thread-ui 0.8.1 → 0.10.0

package/dist/styled-system/tokens/index.mjs

@@ -227,46 +227,6 @@ const tokens = {
     "value": "8rem",
     "variable": "var(--thread-ui-font-sizes-9xl)"
   },
-  "shadows.2xs": {
-    "value": "0 1px rgb(0 0 0 / 0.05)",
-    "variable": "var(--thread-ui-shadows-2xs)"
-  },
-  "shadows.xs": {
-    "value": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
-    "variable": "var(--thread-ui-shadows-xs)"
-  },
-  "shadows.sm": {
-    "value": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
-    "variable": "var(--thread-ui-shadows-sm)"
-  },
-  "shadows.md": {
-    "value": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
-    "variable": "var(--thread-ui-shadows-md)"
-  },
-  "shadows.lg": {
-    "value": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
-    "variable": "var(--thread-ui-shadows-lg)"
-  },
-  "shadows.xl": {
-    "value": "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
-    "variable": "var(--thread-ui-shadows-xl)"
-  },
-  "shadows.2xl": {
-    "value": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
-    "variable": "var(--thread-ui-shadows-2xl)"
-  },
-  "shadows.inset-2xs": {
-    "value": "inset 0 1px rgb(0 0 0 / 0.05)",
-    "variable": "var(--thread-ui-shadows-inset-2xs)"
-  },
-  "shadows.inset-xs": {
-    "value": "inset 0 1px 1px rgb(0 0 0 / 0.05)",
-    "variable": "var(--thread-ui-shadows-inset-xs)"
-  },
-  "shadows.inset-sm": {
-    "value": "inset 0 2px 4px rgb(0 0 0 / 0.05)",
-    "variable": "var(--thread-ui-shadows-inset-sm)"
-  },
   "blurs.xs": {
     "value": "4px",
     "variable": "var(--thread-ui-blurs-xs)"
@@ -1767,6 +1727,10 @@ const tokens = {
     "value": "var(--thread-info-dark)",
     "variable": "var(--thread-ui-colors-info-dark)"
   },
+  "colors.scrim": {
+    "value": "var(--thread-scrim)",
+    "variable": "var(--thread-ui-colors-scrim)"
+  },
   "radii.xs": {
     "value": "0.125rem",
     "variable": "var(--thread-ui-radii-xs)"
@@ -1815,6 +1779,66 @@ const tokens = {
     "value": "var(--thread-border-size-lg)",
     "variable": "var(--thread-ui-border-widths-lg)"
   },
+  "shadows.2xs": {
+    "value": "0 1px rgb(0 0 0 / 0.05)",
+    "variable": "var(--thread-ui-shadows-2xs)"
+  },
+  "shadows.xs": {
+    "value": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+    "variable": "var(--thread-ui-shadows-xs)"
+  },
+  "shadows.xl": {
+    "value": "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
+    "variable": "var(--thread-ui-shadows-xl)"
+  },
+  "shadows.2xl": {
+    "value": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
+    "variable": "var(--thread-ui-shadows-2xl)"
+  },
+  "shadows.inset-2xs": {
+    "value": "inset 0 1px rgb(0 0 0 / 0.05)",
+    "variable": "var(--thread-ui-shadows-inset-2xs)"
+  },
+  "shadows.inset-xs": {
+    "value": "inset 0 1px 1px rgb(0 0 0 / 0.05)",
+    "variable": "var(--thread-ui-shadows-inset-xs)"
+  },
+  "shadows.inset-sm": {
+    "value": "inset 0 2px 4px rgb(0 0 0 / 0.05)",
+    "variable": "var(--thread-ui-shadows-inset-sm)"
+  },
+  "shadows.sm": {
+    "value": "var(--thread-shadow-sm)",
+    "variable": "var(--thread-ui-shadows-sm)"
+  },
+  "shadows.md": {
+    "value": "var(--thread-shadow-md)",
+    "variable": "var(--thread-ui-shadows-md)"
+  },
+  "shadows.lg": {
+    "value": "var(--thread-shadow-lg)",
+    "variable": "var(--thread-ui-shadows-lg)"
+  },
+  "zIndex.base": {
+    "value": "var(--thread-z-index-base)",
+    "variable": "var(--thread-ui-z-index-base)"
+  },
+  "zIndex.sticky": {
+    "value": "var(--thread-z-index-sticky)",
+    "variable": "var(--thread-ui-z-index-sticky)"
+  },
+  "zIndex.overlay": {
+    "value": "var(--thread-z-index-overlay)",
+    "variable": "var(--thread-ui-z-index-overlay)"
+  },
+  "zIndex.modal": {
+    "value": "var(--thread-z-index-modal)",
+    "variable": "var(--thread-ui-z-index-modal)"
+  },
+  "zIndex.system": {
+    "value": "var(--thread-z-index-system)",
+    "variable": "var(--thread-ui-z-index-system)"
+  },
   "breakpoints.sm": {
     "value": "640px",
     "variable": "var(--thread-ui-breakpoints-sm)"
@@ -1835,9 +1859,13 @@ const tokens = {
     "value": "1536px",
     "variable": "var(--thread-ui-breakpoints-2xl)"
   },
-  "colors.background": {
-    "value": "var(--thread-background)",
-    "variable": "var(--thread-ui-colors-background)"
+  "colors.canvas": {
+    "value": "var(--thread-canvas)",
+    "variable": "var(--thread-ui-colors-canvas)"
+  },
+  "colors.inset": {
+    "value": "var(--thread-inset)",
+    "variable": "var(--thread-ui-colors-inset)"
   },
   "colors.surface": {
     "value": "var(--thread-surface)",
@@ -1847,9 +1875,29 @@ const tokens = {
     "value": "var(--thread-elevated)",
     "variable": "var(--thread-ui-colors-elevated)"
   },
-  "colors.structure": {
-    "value": "var(--thread-structure)",
-    "variable": "var(--thread-ui-colors-structure)"
+  "colors.overlay": {
+    "value": "var(--thread-overlay)",
+    "variable": "var(--thread-ui-colors-overlay)"
+  },
+  "colors.active": {
+    "value": "var(--thread-active)",
+    "variable": "var(--thread-ui-colors-active)"
+  },
+  "colors.hover": {
+    "value": "var(--thread-hover)",
+    "variable": "var(--thread-ui-colors-hover)"
+  },
+  "colors.structure.subtle": {
+    "value": "var(--thread-structure-subtle)",
+    "variable": "var(--thread-ui-colors-structure-subtle)"
+  },
+  "colors.structure.default": {
+    "value": "var(--thread-structure-default)",
+    "variable": "var(--thread-ui-colors-structure-default)"
+  },
+  "colors.structure.strong": {
+    "value": "var(--thread-structure-strong)",
+    "variable": "var(--thread-ui-colors-structure-strong)"
   },
   "colors.text.standard": {
     "value": "var(--thread-text-standard)",
@@ -2071,6 +2119,18 @@ const tokens = {
     "value": "var(--thread-ui-colors-color-palette-dark)",
     "variable": "var(--thread-ui-colors-color-palette-dark)"
   },
+  "colors.colorPalette.subtle": {
+    "value": "var(--thread-ui-colors-color-palette-subtle)",
+    "variable": "var(--thread-ui-colors-color-palette-subtle)"
+  },
+  "colors.colorPalette.default": {
+    "value": "var(--thread-ui-colors-color-palette-default)",
+    "variable": "var(--thread-ui-colors-color-palette-default)"
+  },
+  "colors.colorPalette.strong": {
+    "value": "var(--thread-ui-colors-color-palette-strong)",
+    "variable": "var(--thread-ui-colors-color-palette-strong)"
+  },
   "colors.colorPalette.standard": {
     "value": "var(--thread-ui-colors-color-palette-standard)",
     "variable": "var(--thread-ui-colors-color-palette-standard)"

package/dist/styled-system/tokens/tokens.d.ts

@@ -1,7 +1,7 @@
 /* eslint-disable */
-export type Token = `aspectRatios.${AspectRatioToken}` | `borders.${BorderToken}` | `easings.${EasingToken}` | `durations.${DurationToken}` | `fontWeights.${FontWeightToken}` | `lineHeights.${LineHeightToken}` | `fonts.${FontToken}` | `letterSpacings.${LetterSpacingToken}` | `fontSizes.${FontSizeToken}` | `shadows.${ShadowToken}` | `blurs.${BlurToken}` | `spacing.${SpacingToken}` | `sizes.${SizeToken}` | `animations.${AnimationToken}` | `colors.${ColorToken}` | `radii.${RadiusToken}` | `borderWidths.${BorderWidthToken}` | `breakpoints.${BreakpointToken}`
+export type Token = `aspectRatios.${AspectRatioToken}` | `borders.${BorderToken}` | `easings.${EasingToken}` | `durations.${DurationToken}` | `blurs.${BlurToken}` | `sizes.${SizeToken}` | `animations.${AnimationToken}` | `colors.${ColorToken}` | `spacing.${SpacingToken}` | `radii.${RadiusToken}` | `borderWidths.${BorderWidthToken}` | `shadows.${ShadowToken}` | `zIndex.${ZIndexToken}` | `fonts.${FontToken}` | `fontSizes.${FontSizeToken}` | `fontWeights.${FontWeightToken}` | `lineHeights.${LineHeightToken}` | `letterSpacings.${LetterSpacingToken}` | `breakpoints.${BreakpointToken}`
 
-export type ColorPalette = "current" | "transparent" | "rose" | "pink" | "fuchsia" | "purple" | "violet" | "indigo" | "blue" | "sky" | "cyan" | "teal" | "emerald" | "green" | "lime" | "yellow" | "amber" | "orange" | "red" | "neutral" | "stone" | "zinc" | "slate" | "primary" | "secondary" | "tertiary" | "white" | "black" | "gray" | "success" | "warning" | "error" | "info" | "background" | "surface" | "elevated" | "structure" | "text"
+export type ColorPalette = "current" | "transparent" | "rose" | "pink" | "fuchsia" | "purple" | "violet" | "indigo" | "blue" | "sky" | "cyan" | "teal" | "emerald" | "green" | "lime" | "yellow" | "amber" | "orange" | "red" | "neutral" | "stone" | "zinc" | "slate" | "primary" | "secondary" | "tertiary" | "white" | "black" | "gray" | "success" | "warning" | "error" | "info" | "scrim" | "canvas" | "inset" | "surface" | "elevated" | "overlay" | "active" | "hover" | "structure" | "text"
 
 export type AspectRatioToken = "square" | "landscape" | "portrait" | "wide" | "ultrawide" | "golden"
 
@@ -11,31 +11,33 @@ export type EasingToken = "default" | "linear" | "in" | "out" | "in-out"
 
 export type DurationToken = "fastest" | "faster" | "fast" | "normal" | "slow" | "slower" | "slowest"
 
-export type FontWeightToken = "thin" | "extralight" | "light" | "normal" | "medium" | "semibold" | "bold" | "extrabold" | "black"
+export type BlurToken = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl"
 
-export type LineHeightToken = "none" | "tight" | "snug" | "normal" | "relaxed" | "loose"
+export type SizeToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "prose" | "full" | "min" | "max" | "fit" | "breakpoint-sm" | "breakpoint-md" | "breakpoint-lg" | "breakpoint-xl" | "breakpoint-2xl"
 
-export type FontToken = "sans" | "serif" | "mono"
+export type AnimationToken = "spin" | "ping" | "pulse" | "bounce"
 
-export type LetterSpacingToken = "tighter" | "tight" | "normal" | "wide" | "wider" | "widest"
+export type ColorToken = "current" | "transparent" | "rose.50" | "rose.100" | "rose.200" | "rose.300" | "rose.400" | "rose.500" | "rose.600" | "rose.700" | "rose.800" | "rose.900" | "rose.950" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "pink.950" | "fuchsia.50" | "fuchsia.100" | "fuchsia.200" | "fuchsia.300" | "fuchsia.400" | "fuchsia.500" | "fuchsia.600" | "fuchsia.700" | "fuchsia.800" | "fuchsia.900" | "fuchsia.950" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "purple.950" | "violet.50" | "violet.100" | "violet.200" | "violet.300" | "violet.400" | "violet.500" | "violet.600" | "violet.700" | "violet.800" | "violet.900" | "violet.950" | "indigo.50" | "indigo.100" | "indigo.200" | "indigo.300" | "indigo.400" | "indigo.500" | "indigo.600" | "indigo.700" | "indigo.800" | "indigo.900" | "indigo.950" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "blue.950" | "sky.50" | "sky.100" | "sky.200" | "sky.300" | "sky.400" | "sky.500" | "sky.600" | "sky.700" | "sky.800" | "sky.900" | "sky.950" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "cyan.950" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "teal.950" | "emerald.50" | "emerald.100" | "emerald.200" | "emerald.300" | "emerald.400" | "emerald.500" | "emerald.600" | "emerald.700" | "emerald.800" | "emerald.900" | "emerald.950" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "green.950" | "lime.50" | "lime.100" | "lime.200" | "lime.300" | "lime.400" | "lime.500" | "lime.600" | "lime.700" | "lime.800" | "lime.900" | "lime.950" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "yellow.950" | "amber.50" | "amber.100" | "amber.200" | "amber.300" | "amber.400" | "amber.500" | "amber.600" | "amber.700" | "amber.800" | "amber.900" | "amber.950" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "orange.950" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "red.950" | "neutral.50" | "neutral.100" | "neutral.200" | "neutral.300" | "neutral.400" | "neutral.500" | "neutral.600" | "neutral.700" | "neutral.800" | "neutral.900" | "neutral.950" | "stone.50" | "stone.100" | "stone.200" | "stone.300" | "stone.400" | "stone.500" | "stone.600" | "stone.700" | "stone.800" | "stone.900" | "stone.950" | "zinc.50" | "zinc.100" | "zinc.200" | "zinc.300" | "zinc.400" | "zinc.500" | "zinc.600" | "zinc.700" | "zinc.800" | "zinc.900" | "zinc.950" | "slate.50" | "slate.100" | "slate.200" | "slate.300" | "slate.400" | "slate.500" | "slate.600" | "slate.700" | "slate.800" | "slate.900" | "slate.950" | "primary.light" | "primary.main" | "primary.dark" | "secondary.light" | "secondary.main" | "secondary.dark" | "tertiary.light" | "tertiary.main" | "tertiary.dark" | "white" | "black" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "gray.950" | "gray.light" | "gray.main" | "gray.dark" | "success.light" | "success.main" | "success.dark" | "warning.light" | "warning.main" | "warning.dark" | "error.light" | "error.main" | "error.dark" | "info.light" | "info.main" | "info.dark" | "scrim" | "canvas" | "inset" | "surface" | "elevated" | "overlay" | "active" | "hover" | "structure.subtle" | "structure.default" | "structure.strong" | "text.standard" | "text.secondary" | "text.disabled" | "text.accent" | "text.inverted" | "colorPalette" | "colorPalette.50" | "colorPalette.100" | "colorPalette.200" | "colorPalette.300" | "colorPalette.400" | "colorPalette.500" | "colorPalette.600" | "colorPalette.700" | "colorPalette.800" | "colorPalette.900" | "colorPalette.950" | "colorPalette.light" | "colorPalette.main" | "colorPalette.dark" | "colorPalette.subtle" | "colorPalette.default" | "colorPalette.strong" | "colorPalette.standard" | "colorPalette.secondary" | "colorPalette.disabled" | "colorPalette.accent" | "colorPalette.inverted"
 
-export type FontSizeToken = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl"
+export type SpacingToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-none" | "-xxs" | "-xs" | "-sm" | "-md" | "-lg" | "-xl" | "-xxl"
 
-export type ShadowToken = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "inset-2xs" | "inset-xs" | "inset-sm"
+export type RadiusToken = "xs" | "xl" | "2xl" | "3xl" | "4xl" | "full" | "sm" | "md" | "lg"
 
-export type BlurToken = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl"
+export type BorderWidthToken = "sm" | "md" | "lg"
 
-export type SpacingToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5"
+export type ShadowToken = "2xs" | "xs" | "xl" | "2xl" | "inset-2xs" | "inset-xs" | "inset-sm" | "sm" | "md" | "lg"
 
-export type SizeToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "prose" | "full" | "min" | "max" | "fit" | "breakpoint-sm" | "breakpoint-md" | "breakpoint-lg" | "breakpoint-xl" | "breakpoint-2xl"
+export type ZIndexToken = "base" | "sticky" | "overlay" | "modal" | "system"
 
-export type AnimationToken = "spin" | "ping" | "pulse" | "bounce"
+export type FontToken = "sans" | "serif" | "body" | "heading" | "mono"
 
-export type ColorToken = "current" | "transparent" | "rose.50" | "rose.100" | "rose.200" | "rose.300" | "rose.400" | "rose.500" | "rose.600" | "rose.700" | "rose.800" | "rose.900" | "rose.950" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "pink.950" | "fuchsia.50" | "fuchsia.100" | "fuchsia.200" | "fuchsia.300" | "fuchsia.400" | "fuchsia.500" | "fuchsia.600" | "fuchsia.700" | "fuchsia.800" | "fuchsia.900" | "fuchsia.950" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "purple.950" | "violet.50" | "violet.100" | "violet.200" | "violet.300" | "violet.400" | "violet.500" | "violet.600" | "violet.700" | "violet.800" | "violet.900" | "violet.950" | "indigo.50" | "indigo.100" | "indigo.200" | "indigo.300" | "indigo.400" | "indigo.500" | "indigo.600" | "indigo.700" | "indigo.800" | "indigo.900" | "indigo.950" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "blue.950" | "sky.50" | "sky.100" | "sky.200" | "sky.300" | "sky.400" | "sky.500" | "sky.600" | "sky.700" | "sky.800" | "sky.900" | "sky.950" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "cyan.950" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "teal.950" | "emerald.50" | "emerald.100" | "emerald.200" | "emerald.300" | "emerald.400" | "emerald.500" | "emerald.600" | "emerald.700" | "emerald.800" | "emerald.900" | "emerald.950" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "green.950" | "lime.50" | "lime.100" | "lime.200" | "lime.300" | "lime.400" | "lime.500" | "lime.600" | "lime.700" | "lime.800" | "lime.900" | "lime.950" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "yellow.950" | "amber.50" | "amber.100" | "amber.200" | "amber.300" | "amber.400" | "amber.500" | "amber.600" | "amber.700" | "amber.800" | "amber.900" | "amber.950" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "orange.950" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "red.950" | "neutral.50" | "neutral.100" | "neutral.200" | "neutral.300" | "neutral.400" | "neutral.500" | "neutral.600" | "neutral.700" | "neutral.800" | "neutral.900" | "neutral.950" | "stone.50" | "stone.100" | "stone.200" | "stone.300" | "stone.400" | "stone.500" | "stone.600" | "stone.700" | "stone.800" | "stone.900" | "stone.950" | "zinc.50" | "zinc.100" | "zinc.200" | "zinc.300" | "zinc.400" | "zinc.500" | "zinc.600" | "zinc.700" | "zinc.800" | "zinc.900" | "zinc.950" | "slate.50" | "slate.100" | "slate.200" | "slate.300" | "slate.400" | "slate.500" | "slate.600" | "slate.700" | "slate.800" | "slate.900" | "slate.950" | "primary.light" | "primary.main" | "primary.dark" | "secondary.light" | "secondary.main" | "secondary.dark" | "tertiary.light" | "tertiary.main" | "tertiary.dark" | "white" | "black" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "gray.950" | "gray.light" | "gray.main" | "gray.dark" | "success.light" | "success.main" | "success.dark" | "warning.light" | "warning.main" | "warning.dark" | "error.light" | "error.main" | "error.dark" | "info.light" | "info.main" | "info.dark" | "background" | "surface" | "elevated" | "structure" | "text.standard" | "text.secondary" | "text.disabled" | "text.accent" | "text.inverted" | "colorPalette" | "colorPalette.50" | "colorPalette.100" | "colorPalette.200" | "colorPalette.300" | "colorPalette.400" | "colorPalette.500" | "colorPalette.600" | "colorPalette.700" | "colorPalette.800" | "colorPalette.900" | "colorPalette.950" | "colorPalette.light" | "colorPalette.main" | "colorPalette.dark" | "colorPalette.standard" | "colorPalette.secondary" | "colorPalette.disabled" | "colorPalette.accent" | "colorPalette.inverted"
+export type FontSizeToken = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "heading.sm" | "heading.md" | "heading.lg" | "heading.xl" | "body.xxs" | "body.xs" | "body.sm" | "body.md" | "body.lg" | "body.xl"
 
-export type RadiusToken = "xs" | "xl" | "2xl" | "3xl" | "4xl" | "full" | "sm" | "md" | "lg"
+export type FontWeightToken = "thin" | "extralight" | "light" | "normal" | "extrabold" | "black" | "regular" | "medium" | "semibold" | "bold"
 
-export type BorderWidthToken = "sm" | "md" | "lg"
+export type LineHeightToken = "none" | "snug" | "relaxed" | "tighter" | "tight" | "normal" | "loose" | "looser"
+
+export type LetterSpacingToken = "tighter" | "wider" | "widest" | "tight" | "normal" | "wide"
 
 export type BreakpointToken = "sm" | "md" | "lg" | "xl" | "2xl"
 
@@ -44,19 +46,20 @@ export type Tokens = {
 		borders: BorderToken
 		easings: EasingToken
 		durations: DurationToken
-		fontWeights: FontWeightToken
-		lineHeights: LineHeightToken
-		fonts: FontToken
-		letterSpacings: LetterSpacingToken
-		fontSizes: FontSizeToken
-		shadows: ShadowToken
 		blurs: BlurToken
-		spacing: SpacingToken
 		sizes: SizeToken
 		animations: AnimationToken
 		colors: ColorToken
+		spacing: SpacingToken
 		radii: RadiusToken
 		borderWidths: BorderWidthToken
+		shadows: ShadowToken
+		zIndex: ZIndexToken
+		fonts: FontToken
+		fontSizes: FontSizeToken
+		fontWeights: FontWeightToken
+		lineHeights: LineHeightToken
+		letterSpacings: LetterSpacingToken
 		breakpoints: BreakpointToken
 } & { [token: string]: never }
 

package/dist/styled-system/types/prop-type.d.ts

@@ -5,6 +5,7 @@ import type { Tokens } from '../tokens/index';
 
 export interface UtilityValues {
 	aspectRatio: Tokens["aspectRatios"];
+	zIndex: Tokens["zIndex"];
 	top: Tokens["spacing"];
 	left: Tokens["spacing"];
 	inset: "auto" | Tokens["spacing"];
@@ -219,7 +220,7 @@ export interface UtilityValues {
 	srOnly: boolean;
 	debug: boolean;
 	containerName: CssProperties["containerName"];
-	colorPalette: "current" | "transparent" | "rose" | "pink" | "fuchsia" | "purple" | "violet" | "indigo" | "blue" | "sky" | "cyan" | "teal" | "emerald" | "green" | "lime" | "yellow" | "amber" | "orange" | "red" | "neutral" | "stone" | "zinc" | "slate" | "primary" | "secondary" | "tertiary" | "white" | "black" | "gray" | "success" | "warning" | "error" | "info" | "background" | "surface" | "elevated" | "structure" | "text";
+	colorPalette: "current" | "transparent" | "rose" | "pink" | "fuchsia" | "purple" | "violet" | "indigo" | "blue" | "sky" | "cyan" | "teal" | "emerald" | "green" | "lime" | "yellow" | "amber" | "orange" | "red" | "neutral" | "stone" | "zinc" | "slate" | "primary" | "secondary" | "tertiary" | "white" | "black" | "gray" | "success" | "warning" | "error" | "info" | "scrim" | "canvas" | "inset" | "surface" | "elevated" | "overlay" | "active" | "hover" | "structure" | "text";
 	textStyle: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl";
 }
 

package/dist/styled-system/types/style-props.d.ts

@@ -6766,7 +6766,7 @@ writingMode?: ConditionalValue<CssVars | CssProperties["writingMode"] | AnyStrin
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/z-index
    */
-zIndex?: ConditionalValue<CssProperties["zIndex"] | AnyString>
+zIndex?: ConditionalValue<UtilityValues["zIndex"] | CssVars | CssProperties["zIndex"] | AnyString>
  /**
    * Since May 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
    *