Theme Token Scales

All available theme scales in Stoop

Approved Scales

Stoop supports 13 approved theme scales:

colors

Color values (strings)

colors: {
  primary: "#0070f3",
  background: "#ffffff",
  text: "#000000",
}
Copy

opacities

Opacity values (strings or numbers)

opacities: {
  disabled: "0.5",
  hover: "0.8",
}
Copy

space

Spacing values (strings)

space: {
  small: "8px",
  medium: "16px",
  large: "24px",
}
Copy

radii

Border radius values (strings)

radii: {
  small: "4px",
  default: "6px",
  large: "8px",
}
Copy

sizes

Size values (strings)

sizes: {
  small: "100px",
  medium: "200px",
  large: "300px",
}
Copy

fonts

Font family values (strings)

fonts: {
  body: "system-ui, sans-serif",
  heading: "Georgia, serif",
}
Copy

fontWeights

Font weight values (strings or numbers)

fontWeights: {
  normal: "400",
  bold: "500",
}
Copy

fontSizes

Font size values (strings)

fontSizes: {
  small: "14px",
  medium: "16px",
  large: "20px",
}
Copy

lineHeights

Line height values (strings or numbers)

lineHeights: {
  normal: "1.5",
  tight: "1.2",
}
Copy

letterSpacings

Letter spacing values (strings)

letterSpacings: {
  normal: "0",
  wide: "0.1em",
}
Copy

shadows

Shadow values (strings)

shadows: {
  subtle: "0 1px 2px rgba(0,0,0,0.05)",
  medium: "0 4px 6px rgba(0,0,0,0.1)",
}
Copy

zIndices

Z-index values (strings or numbers)

zIndices: {
  dropdown: "1000",
  modal: "2000",
}
Copy

transitions

Transition/animation values (strings)

transitions: {
  fast: "all 0.1s ease",
  default: "all 0.2s ease",
}
Copy