@discourser/design-system 0.1.7 → 0.2.1

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

@@ -1,48 +1,60 @@
 /* eslint-disable */
-export type Token = "colors.primary.0" | "colors.primary.10" | "colors.primary.20" | "colors.primary.30" | "colors.primary.40" | "colors.primary.50" | "colors.primary.60" | "colors.primary.70" | "colors.primary.80" | "colors.primary.90" | "colors.primary.95" | "colors.primary.99" | "colors.primary.100" | "colors.secondary.0" | "colors.secondary.10" | "colors.secondary.20" | "colors.secondary.30" | "colors.secondary.40" | "colors.secondary.50" | "colors.secondary.60" | "colors.secondary.70" | "colors.secondary.80" | "colors.secondary.90" | "colors.secondary.95" | "colors.secondary.99" | "colors.secondary.100" | "colors.tertiary.0" | "colors.tertiary.10" | "colors.tertiary.20" | "colors.tertiary.30" | "colors.tertiary.40" | "colors.tertiary.50" | "colors.tertiary.60" | "colors.tertiary.70" | "colors.tertiary.80" | "colors.tertiary.90" | "colors.tertiary.95" | "colors.tertiary.99" | "colors.tertiary.100" | "colors.neutral.0" | "colors.neutral.10" | "colors.neutral.20" | "colors.neutral.30" | "colors.neutral.40" | "colors.neutral.50" | "colors.neutral.60" | "colors.neutral.70" | "colors.neutral.80" | "colors.neutral.90" | "colors.neutral.95" | "colors.neutral.99" | "colors.neutral.100" | "colors.neutralVariant.0" | "colors.neutralVariant.10" | "colors.neutralVariant.20" | "colors.neutralVariant.30" | "colors.neutralVariant.40" | "colors.neutralVariant.50" | "colors.neutralVariant.60" | "colors.neutralVariant.70" | "colors.neutralVariant.80" | "colors.neutralVariant.90" | "colors.neutralVariant.95" | "colors.neutralVariant.99" | "colors.neutralVariant.100" | "colors.error.0" | "colors.error.10" | "colors.error.20" | "colors.error.30" | "colors.error.40" | "colors.error.50" | "colors.error.60" | "colors.error.70" | "colors.error.80" | "colors.error.90" | "colors.error.95" | "colors.error.99" | "colors.error.100" | "fonts.display" | "fonts.body" | "fonts.mono" | "fontSizes.displayLarge" | "fontSizes.displayMedium" | "fontSizes.displaySmall" | "fontSizes.headlineLarge" | "fontSizes.headlineMedium" | "fontSizes.headlineSmall" | "fontSizes.titleLarge" | "fontSizes.titleMedium" | "fontSizes.titleSmall" | "fontSizes.bodyLarge" | "fontSizes.bodyMedium" | "fontSizes.bodySmall" | "fontSizes.labelLarge" | "fontSizes.labelMedium" | "fontSizes.labelSmall" | "lineHeights.displayLarge" | "lineHeights.displayMedium" | "lineHeights.displaySmall" | "lineHeights.headlineLarge" | "lineHeights.headlineMedium" | "lineHeights.headlineSmall" | "lineHeights.titleLarge" | "lineHeights.titleMedium" | "lineHeights.titleSmall" | "lineHeights.bodyLarge" | "lineHeights.bodyMedium" | "lineHeights.bodySmall" | "lineHeights.labelLarge" | "lineHeights.labelMedium" | "lineHeights.labelSmall" | "fontWeights.400" | "fontWeights.500" | "letterSpacings.displayLarge" | "letterSpacings.displayMedium" | "letterSpacings.displaySmall" | "letterSpacings.headlineLarge" | "letterSpacings.headlineMedium" | "letterSpacings.headlineSmall" | "letterSpacings.titleLarge" | "letterSpacings.titleMedium" | "letterSpacings.titleSmall" | "letterSpacings.bodyLarge" | "letterSpacings.bodyMedium" | "letterSpacings.bodySmall" | "letterSpacings.labelLarge" | "letterSpacings.labelMedium" | "letterSpacings.labelSmall" | "spacing.none" | "spacing.xxs" | "spacing.xs" | "spacing.sm" | "spacing.md" | "spacing.lg" | "spacing.xl" | "spacing.xxl" | "spacing.xxxl" | "radii.none" | "radii.extraSmall" | "radii.small" | "radii.medium" | "radii.large" | "radii.extraLarge" | "radii.full" | "shadows.level0" | "shadows.level1" | "shadows.level2" | "shadows.level3" | "shadows.level4" | "shadows.level5" | "durations.instant" | "durations.fast" | "durations.normal" | "durations.slow" | "durations.slower" | "easings.standard" | "easings.standardDecelerate" | "easings.standardAccelerate" | "easings.emphasized" | "easings.emphasizedDecelerate" | "easings.emphasizedAccelerate" | "breakpoints.sm" | "breakpoints.md" | "breakpoints.lg" | "breakpoints.xl" | "breakpoints.2xl" | "sizes.breakpoint-sm" | "sizes.breakpoint-md" | "sizes.breakpoint-lg" | "sizes.breakpoint-xl" | "sizes.breakpoint-2xl" | "colors.primary" | "colors.onPrimary" | "colors.primaryContainer" | "colors.onPrimaryContainer" | "colors.secondary" | "colors.onSecondary" | "colors.secondaryContainer" | "colors.onSecondaryContainer" | "colors.tertiary" | "colors.onTertiary" | "colors.tertiaryContainer" | "colors.onTertiaryContainer" | "colors.error" | "colors.onError" | "colors.errorContainer" | "colors.onErrorContainer" | "colors.surface" | "colors.onSurface" | "colors.surfaceVariant" | "colors.onSurfaceVariant" | "colors.surfaceContainerLowest" | "colors.surfaceContainerLow" | "colors.surfaceContainer" | "colors.surfaceContainerHigh" | "colors.surfaceContainerHighest" | "colors.outline" | "colors.outlineVariant" | "colors.inverseSurface" | "colors.inverseOnSurface" | "colors.inversePrimary" | "colors.background" | "colors.onBackground" | "colors.scrim" | "colors.shadow" | "spacing.-none" | "spacing.-xxs" | "spacing.-xs" | "spacing.-sm" | "spacing.-md" | "spacing.-lg" | "spacing.-xl" | "spacing.-xxl" | "spacing.-xxxl" | "colors.colorPalette.0" | "colors.colorPalette.10" | "colors.colorPalette.20" | "colors.colorPalette.30" | "colors.colorPalette.40" | "colors.colorPalette.50" | "colors.colorPalette.60" | "colors.colorPalette.70" | "colors.colorPalette.80" | "colors.colorPalette.90" | "colors.colorPalette.95" | "colors.colorPalette.99" | "colors.colorPalette.100" | "colors.colorPalette"
+export type Token = `aspectRatios.${AspectRatioToken}` | `borders.${BorderToken}` | `radii.${RadiusToken}` | `shadows.${ShadowToken}` | `blurs.${BlurToken}` | `spacing.${SpacingToken}` | `sizes.${SizeToken}` | `animations.${AnimationToken}` | `colors.${ColorToken}` | `fonts.${FontToken}` | `fontSizes.${FontSizeToken}` | `lineHeights.${LineHeightToken}` | `fontWeights.${FontWeightToken}` | `letterSpacings.${LetterSpacingToken}` | `durations.${DurationToken}` | `easings.${EasingToken}` | `breakpoints.${BreakpointToken}`
 
-export type ColorPalette = "primary" | "secondary" | "tertiary" | "neutral" | "neutralVariant" | "error" | "onPrimary" | "primaryContainer" | "onPrimaryContainer" | "onSecondary" | "secondaryContainer" | "onSecondaryContainer" | "onTertiary" | "tertiaryContainer" | "onTertiaryContainer" | "onError" | "errorContainer" | "onErrorContainer" | "surface" | "onSurface" | "surfaceVariant" | "onSurfaceVariant" | "surfaceContainerLowest" | "surfaceContainerLow" | "surfaceContainer" | "surfaceContainerHigh" | "surfaceContainerHighest" | "outline" | "outlineVariant" | "inverseSurface" | "inverseOnSurface" | "inversePrimary" | "background" | "onBackground" | "scrim" | "shadow"
+export type ColorPalette = "current" | "black" | "white" | "transparent" | "rose" | "pink" | "fuchsia" | "purple" | "violet" | "indigo" | "blue" | "sky" | "cyan" | "teal" | "emerald" | "green" | "lime" | "yellow" | "amber" | "orange" | "red" | "stone" | "zinc" | "gray" | "slate" | "primary" | "secondary" | "tertiary" | "neutral" | "neutralVariant" | "error" | "primary.solid.bg" | "primary.solid" | "primary.solid.fg" | "primary.subtle.bg" | "primary.subtle" | "primary.subtle.fg" | "primary.surface.bg" | "primary.surface" | "primary.surface.border" | "primary.surface.fg" | "primary.outline" | "primary.outline.bg" | "primary.outline.border" | "primary.outline.fg" | "primary.plain" | "primary.plain.bg" | "primary.plain.fg" | "neutral.solid.bg" | "neutral.solid" | "neutral.solid.fg" | "neutral.subtle.bg" | "neutral.subtle" | "neutral.subtle.fg" | "neutral.surface.bg" | "neutral.surface" | "neutral.surface.border" | "neutral.surface.fg" | "neutral.outline" | "neutral.outline.bg" | "neutral.outline.border" | "neutral.outline.fg" | "neutral.plain" | "neutral.plain.bg" | "neutral.plain.fg" | "error.solid.bg" | "error.solid" | "error.solid.fg" | "error.subtle.bg" | "error.subtle" | "error.subtle.fg" | "error.surface.bg" | "error.surface" | "error.surface.border" | "error.surface.fg" | "error.outline" | "error.outline.bg" | "error.outline.border" | "error.outline.fg" | "error.plain" | "error.plain.bg" | "error.plain.fg" | "gray.solid.bg" | "gray.solid" | "gray.solid.fg" | "gray.subtle.bg" | "gray.subtle" | "gray.subtle.fg" | "gray.surface.bg" | "gray.surface" | "gray.surface.border" | "gray.surface.fg" | "gray.outline" | "gray.outline.bg" | "gray.outline.border" | "gray.outline.fg" | "gray.plain" | "gray.plain.bg" | "gray.plain.fg" | "red.solid.bg" | "red.solid" | "red.solid.fg" | "red.subtle.bg" | "red.subtle" | "red.subtle.fg" | "red.surface.bg" | "red.surface" | "red.surface.border" | "red.surface.fg" | "red.outline" | "red.outline.bg" | "red.outline.border" | "red.outline.fg" | "red.plain" | "red.plain.bg" | "red.plain.fg" | "fg" | "canvas" | "border" | "surface" | "surface.container" | "onSurface" | "m3Primary" | "onM3Primary" | "onSecondary" | "onTertiary" | "outline" | "inverseSurface" | "inverseOnSurface" | "inversePrimary" | "scrim"
 
-export type ColorToken = "primary.0" | "primary.10" | "primary.20" | "primary.30" | "primary.40" | "primary.50" | "primary.60" | "primary.70" | "primary.80" | "primary.90" | "primary.95" | "primary.99" | "primary.100" | "secondary.0" | "secondary.10" | "secondary.20" | "secondary.30" | "secondary.40" | "secondary.50" | "secondary.60" | "secondary.70" | "secondary.80" | "secondary.90" | "secondary.95" | "secondary.99" | "secondary.100" | "tertiary.0" | "tertiary.10" | "tertiary.20" | "tertiary.30" | "tertiary.40" | "tertiary.50" | "tertiary.60" | "tertiary.70" | "tertiary.80" | "tertiary.90" | "tertiary.95" | "tertiary.99" | "tertiary.100" | "neutral.0" | "neutral.10" | "neutral.20" | "neutral.30" | "neutral.40" | "neutral.50" | "neutral.60" | "neutral.70" | "neutral.80" | "neutral.90" | "neutral.95" | "neutral.99" | "neutral.100" | "neutralVariant.0" | "neutralVariant.10" | "neutralVariant.20" | "neutralVariant.30" | "neutralVariant.40" | "neutralVariant.50" | "neutralVariant.60" | "neutralVariant.70" | "neutralVariant.80" | "neutralVariant.90" | "neutralVariant.95" | "neutralVariant.99" | "neutralVariant.100" | "error.0" | "error.10" | "error.20" | "error.30" | "error.40" | "error.50" | "error.60" | "error.70" | "error.80" | "error.90" | "error.95" | "error.99" | "error.100" | "primary" | "onPrimary" | "primaryContainer" | "onPrimaryContainer" | "secondary" | "onSecondary" | "secondaryContainer" | "onSecondaryContainer" | "tertiary" | "onTertiary" | "tertiaryContainer" | "onTertiaryContainer" | "error" | "onError" | "errorContainer" | "onErrorContainer" | "surface" | "onSurface" | "surfaceVariant" | "onSurfaceVariant" | "surfaceContainerLowest" | "surfaceContainerLow" | "surfaceContainer" | "surfaceContainerHigh" | "surfaceContainerHighest" | "outline" | "outlineVariant" | "inverseSurface" | "inverseOnSurface" | "inversePrimary" | "background" | "onBackground" | "scrim" | "shadow" | "colorPalette.0" | "colorPalette.10" | "colorPalette.20" | "colorPalette.30" | "colorPalette.40" | "colorPalette.50" | "colorPalette.60" | "colorPalette.70" | "colorPalette.80" | "colorPalette.90" | "colorPalette.95" | "colorPalette.99" | "colorPalette.100" | "colorPalette"
+export type AspectRatioToken = "square" | "landscape" | "portrait" | "wide" | "ultrawide" | "golden"
 
-export type FontToken = "display" | "body" | "mono"
+export type BorderToken = "none"
 
-export type FontSizeToken = "displayLarge" | "displayMedium" | "displaySmall" | "headlineLarge" | "headlineMedium" | "headlineSmall" | "titleLarge" | "titleMedium" | "titleSmall" | "bodyLarge" | "bodyMedium" | "bodySmall" | "labelLarge" | "labelMedium" | "labelSmall"
+export type RadiusToken = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "full" | "l1" | "l2" | "l3"
 
-export type LineHeightToken = "displayLarge" | "displayMedium" | "displaySmall" | "headlineLarge" | "headlineMedium" | "headlineSmall" | "titleLarge" | "titleMedium" | "titleSmall" | "bodyLarge" | "bodyMedium" | "bodySmall" | "labelLarge" | "labelMedium" | "labelSmall"
+export type ShadowToken = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "inset-2xs" | "inset-xs" | "inset-sm" | "inset"
 
-export type FontWeightToken = "400" | "500"
+export type BlurToken = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl"
 
-export type LetterSpacingToken = "displayLarge" | "displayMedium" | "displaySmall" | "headlineLarge" | "headlineMedium" | "headlineSmall" | "titleLarge" | "titleMedium" | "titleSmall" | "bodyLarge" | "bodyMedium" | "bodySmall" | "labelLarge" | "labelMedium" | "labelSmall"
+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 SpacingToken = "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl" | "-none" | "-xxs" | "-xs" | "-sm" | "-md" | "-lg" | "-xl" | "-xxl" | "-xxxl"
+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 RadiusToken = "none" | "extraSmall" | "small" | "medium" | "large" | "extraLarge" | "full"
+export type AnimationToken = "spin" | "ping" | "pulse" | "bounce"
 
-export type ShadowToken = "level0" | "level1" | "level2" | "level3" | "level4" | "level5"
+export type ColorToken = "current" | "black" | "white" | "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" | "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" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "gray.950" | "slate.50" | "slate.100" | "slate.200" | "slate.300" | "slate.400" | "slate.500" | "slate.600" | "slate.700" | "slate.800" | "slate.900" | "slate.950" | "primary.0" | "primary.10" | "primary.20" | "primary.30" | "primary.40" | "primary.50" | "primary.60" | "primary.70" | "primary.80" | "primary.90" | "primary.95" | "primary.99" | "primary.100" | "secondary.0" | "secondary.10" | "secondary.20" | "secondary.30" | "secondary.40" | "secondary.50" | "secondary.60" | "secondary.70" | "secondary.80" | "secondary.90" | "secondary.95" | "secondary.99" | "secondary.100" | "tertiary.0" | "tertiary.10" | "tertiary.20" | "tertiary.30" | "tertiary.40" | "tertiary.50" | "tertiary.60" | "tertiary.70" | "tertiary.80" | "tertiary.90" | "tertiary.95" | "tertiary.99" | "tertiary.100" | "neutral.0" | "neutral.10" | "neutral.20" | "neutral.30" | "neutral.40" | "neutral.50" | "neutral.60" | "neutral.70" | "neutral.80" | "neutral.90" | "neutral.95" | "neutral.99" | "neutral.100" | "neutral.200" | "neutral.300" | "neutral.400" | "neutral.500" | "neutral.600" | "neutral.700" | "neutral.800" | "neutral.900" | "neutral.950" | "neutralVariant.0" | "neutralVariant.10" | "neutralVariant.20" | "neutralVariant.30" | "neutralVariant.40" | "neutralVariant.50" | "neutralVariant.60" | "neutralVariant.70" | "neutralVariant.80" | "neutralVariant.90" | "neutralVariant.95" | "neutralVariant.99" | "neutralVariant.100" | "error.0" | "error.10" | "error.20" | "error.30" | "error.40" | "error.50" | "error.60" | "error.70" | "error.80" | "error.90" | "error.95" | "error.99" | "error.100" | "primary.1" | "primary.2" | "primary.3" | "primary.4" | "primary.5" | "primary.6" | "primary.7" | "primary.8" | "primary.9" | "primary.11" | "primary.12" | "primary.a1" | "primary.a2" | "primary.a3" | "primary.a4" | "primary.a5" | "primary.a6" | "primary.a7" | "primary.a8" | "primary.a9" | "primary.a10" | "primary.a11" | "primary.a12" | "primary.solid.bg" | "primary.solid.bg.hover" | "primary.solid.fg" | "primary.subtle.bg" | "primary.subtle.bg.hover" | "primary.subtle.bg.active" | "primary.subtle.fg" | "primary.surface.bg" | "primary.surface.bg.active" | "primary.surface.border" | "primary.surface.border.hover" | "primary.surface.fg" | "primary.outline.bg.hover" | "primary.outline.bg.active" | "primary.outline.border" | "primary.outline.fg" | "primary.plain.bg.hover" | "primary.plain.bg.active" | "primary.plain.fg" | "neutral.1" | "neutral.2" | "neutral.3" | "neutral.4" | "neutral.5" | "neutral.6" | "neutral.7" | "neutral.8" | "neutral.9" | "neutral.11" | "neutral.12" | "neutral.a1" | "neutral.a2" | "neutral.a3" | "neutral.a4" | "neutral.a5" | "neutral.a6" | "neutral.a7" | "neutral.a8" | "neutral.a9" | "neutral.a10" | "neutral.a11" | "neutral.a12" | "neutral.solid.bg" | "neutral.solid.bg.hover" | "neutral.solid.fg" | "neutral.subtle.bg" | "neutral.subtle.bg.hover" | "neutral.subtle.bg.active" | "neutral.subtle.fg" | "neutral.surface.bg" | "neutral.surface.bg.hover" | "neutral.surface.bg.active" | "neutral.surface.border" | "neutral.surface.border.hover" | "neutral.surface.fg" | "neutral.outline.bg.hover" | "neutral.outline.bg.active" | "neutral.outline.border" | "neutral.outline.fg" | "neutral.plain.bg.hover" | "neutral.plain.bg.active" | "neutral.plain.fg" | "error.1" | "error.2" | "error.3" | "error.4" | "error.5" | "error.6" | "error.7" | "error.8" | "error.9" | "error.11" | "error.12" | "error.a1" | "error.a2" | "error.a3" | "error.a4" | "error.a5" | "error.a6" | "error.a7" | "error.a8" | "error.a9" | "error.a10" | "error.a11" | "error.a12" | "error.solid.bg" | "error.solid.bg.hover" | "error.solid.fg" | "error.subtle.bg" | "error.subtle.bg.hover" | "error.subtle.bg.active" | "error.subtle.fg" | "error.surface.bg" | "error.surface.bg.active" | "error.surface.border" | "error.surface.border.hover" | "error.surface.fg" | "error.outline.bg.hover" | "error.outline.bg.active" | "error.outline.border" | "error.outline.fg" | "error.plain.bg.hover" | "error.plain.bg.active" | "error.plain.fg" | "gray.1" | "gray.2" | "gray.3" | "gray.4" | "gray.5" | "gray.6" | "gray.7" | "gray.8" | "gray.9" | "gray.10" | "gray.11" | "gray.12" | "gray.a1" | "gray.a2" | "gray.a3" | "gray.a4" | "gray.a5" | "gray.a6" | "gray.a7" | "gray.a8" | "gray.a9" | "gray.a10" | "gray.a11" | "gray.a12" | "gray.solid.bg" | "gray.solid.bg.hover" | "gray.solid.fg" | "gray.subtle.bg" | "gray.subtle.bg.hover" | "gray.subtle.bg.active" | "gray.subtle.fg" | "gray.surface.bg" | "gray.surface.bg.hover" | "gray.surface.bg.active" | "gray.surface.border" | "gray.surface.border.hover" | "gray.surface.fg" | "gray.outline.bg.hover" | "gray.outline.bg.active" | "gray.outline.border" | "gray.outline.fg" | "gray.plain.bg.hover" | "gray.plain.bg.active" | "gray.plain.fg" | "red.1" | "red.2" | "red.3" | "red.4" | "red.5" | "red.6" | "red.7" | "red.8" | "red.9" | "red.10" | "red.11" | "red.12" | "red.a1" | "red.a2" | "red.a3" | "red.a4" | "red.a5" | "red.a6" | "red.a7" | "red.a8" | "red.a9" | "red.a10" | "red.a11" | "red.a12" | "red.solid.bg" | "red.solid.bg.hover" | "red.solid.fg" | "red.subtle.bg" | "red.subtle.bg.hover" | "red.subtle.bg.active" | "red.subtle.fg" | "red.surface.bg" | "red.surface.bg.active" | "red.surface.border" | "red.surface.border.hover" | "red.surface.fg" | "red.outline.bg.hover" | "red.outline.bg.active" | "red.outline.border" | "red.outline.fg" | "red.plain.bg.hover" | "red.plain.bg.active" | "red.plain.fg" | "fg.default" | "fg.muted" | "fg.subtle" | "canvas" | "border.default" | "border.muted" | "surface" | "surface.dim" | "surface.bright" | "surface.container" | "surface.container.low" | "surface.container.lowest" | "surface.container.high" | "surface.container.highest" | "onSurface" | "onSurface.variant" | "m3Primary" | "m3Primary.container" | "onM3Primary" | "onM3Primary.container" | "secondary" | "secondary.container" | "onSecondary" | "onSecondary.container" | "tertiary" | "tertiary.container" | "onTertiary" | "onTertiary.container" | "outline" | "outline.variant" | "inverseSurface" | "inverseOnSurface" | "inversePrimary" | "scrim" | "colorPalette" | "colorPalette.50" | "colorPalette.100" | "colorPalette.200" | "colorPalette.300" | "colorPalette.400" | "colorPalette.500" | "colorPalette.600" | "colorPalette.700" | "colorPalette.800" | "colorPalette.900" | "colorPalette.950" | "colorPalette.0" | "colorPalette.10" | "colorPalette.20" | "colorPalette.30" | "colorPalette.40" | "colorPalette.60" | "colorPalette.70" | "colorPalette.80" | "colorPalette.90" | "colorPalette.95" | "colorPalette.99" | "colorPalette.1" | "colorPalette.2" | "colorPalette.3" | "colorPalette.4" | "colorPalette.5" | "colorPalette.6" | "colorPalette.7" | "colorPalette.8" | "colorPalette.9" | "colorPalette.11" | "colorPalette.12" | "colorPalette.a1" | "colorPalette.a2" | "colorPalette.a3" | "colorPalette.a4" | "colorPalette.a5" | "colorPalette.a6" | "colorPalette.a7" | "colorPalette.a8" | "colorPalette.a9" | "colorPalette.a10" | "colorPalette.a11" | "colorPalette.a12" | "colorPalette.solid.bg" | "colorPalette.bg" | "colorPalette.solid.bg.hover" | "colorPalette.bg.hover" | "colorPalette.hover" | "colorPalette.solid.fg" | "colorPalette.fg" | "colorPalette.subtle.bg" | "colorPalette.subtle.bg.hover" | "colorPalette.subtle.bg.active" | "colorPalette.bg.active" | "colorPalette.active" | "colorPalette.subtle.fg" | "colorPalette.surface.bg" | "colorPalette.surface.bg.active" | "colorPalette.surface.border" | "colorPalette.border" | "colorPalette.surface.border.hover" | "colorPalette.border.hover" | "colorPalette.surface.fg" | "colorPalette.outline.bg.hover" | "colorPalette.outline.bg.active" | "colorPalette.outline.border" | "colorPalette.outline.fg" | "colorPalette.plain.bg.hover" | "colorPalette.plain.bg.active" | "colorPalette.plain.fg" | "colorPalette.surface.bg.hover" | "colorPalette.default" | "colorPalette.muted" | "colorPalette.subtle" | "colorPalette.dim" | "colorPalette.bright" | "colorPalette.container" | "colorPalette.container.low" | "colorPalette.low" | "colorPalette.container.lowest" | "colorPalette.lowest" | "colorPalette.container.high" | "colorPalette.high" | "colorPalette.container.highest" | "colorPalette.highest" | "colorPalette.variant"
 
-export type DurationToken = "instant" | "fast" | "normal" | "slow" | "slower"
+export type FontToken = "sans" | "serif" | "display" | "body" | "mono"
 
-export type EasingToken = "standard" | "standardDecelerate" | "standardAccelerate" | "emphasized" | "emphasizedDecelerate" | "emphasizedAccelerate"
+export type FontSizeToken = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "displayLarge" | "displayMedium" | "displaySmall" | "headlineLarge" | "headlineMedium" | "headlineSmall" | "titleLarge" | "titleMedium" | "titleSmall" | "bodyLarge" | "bodyMedium" | "bodySmall" | "labelLarge" | "labelMedium" | "labelSmall"
 
-export type BreakpointToken = "sm" | "md" | "lg" | "xl" | "2xl"
+export type LineHeightToken = "none" | "tight" | "snug" | "normal" | "relaxed" | "loose" | "displayLarge" | "displayMedium" | "displaySmall" | "headlineLarge" | "headlineMedium" | "headlineSmall" | "titleLarge" | "titleMedium" | "titleSmall" | "bodyLarge" | "bodyMedium" | "bodySmall" | "labelLarge" | "labelMedium" | "labelSmall"
+
+export type FontWeightToken = "400" | "500" | "thin" | "extralight" | "light" | "normal" | "medium" | "semibold" | "bold" | "extrabold" | "black"
+
+export type LetterSpacingToken = "tighter" | "tight" | "normal" | "wide" | "wider" | "widest" | "displayLarge" | "displayMedium" | "displaySmall" | "headlineLarge" | "headlineMedium" | "headlineSmall" | "titleLarge" | "titleMedium" | "titleSmall" | "bodyLarge" | "bodyMedium" | "bodySmall" | "labelLarge" | "labelMedium" | "labelSmall"
+
+export type DurationToken = "fastest" | "faster" | "slowest" | "instant" | "fast" | "normal" | "slow" | "slower"
 
-export type SizeToken = "breakpoint-sm" | "breakpoint-md" | "breakpoint-lg" | "breakpoint-xl" | "breakpoint-2xl"
+export type EasingToken = "default" | "linear" | "in" | "out" | "in-out" | "standard" | "standardDecelerate" | "standardAccelerate" | "emphasized" | "emphasizedDecelerate" | "emphasizedAccelerate"
+
+export type BreakpointToken = "sm" | "md" | "lg" | "xl" | "2xl"
 
 export type Tokens = {
+		aspectRatios: AspectRatioToken
+		borders: BorderToken
+		radii: RadiusToken
+		shadows: ShadowToken
+		blurs: BlurToken
+		spacing: SpacingToken
+		sizes: SizeToken
+		animations: AnimationToken
 		colors: ColorToken
 		fonts: FontToken
 		fontSizes: FontSizeToken
 		lineHeights: LineHeightToken
 		fontWeights: FontWeightToken
 		letterSpacings: LetterSpacingToken
-		spacing: SpacingToken
-		radii: RadiusToken
-		shadows: ShadowToken
 		durations: DurationToken
 		easings: EasingToken
 		breakpoints: BreakpointToken
-		sizes: SizeToken
 } & { [token: string]: never }
 
 export type TokenCategory = "aspectRatios" | "zIndex" | "opacity" | "colors" | "fonts" | "fontSizes" | "fontWeights" | "lineHeights" | "letterSpacings" | "sizes" | "cursor" | "shadows" | "spacing" | "radii" | "borders" | "borderWidths" | "durations" | "easings" | "animations" | "blurs" | "gradients" | "breakpoints" | "assets"

package/styled-system/types/composition.d.ts

@@ -15,6 +15,8 @@ interface Recursive<T> {
  * -----------------------------------------------------------------------------*/
 
 type TextStyleProperty =
+  | 'color'
+  | 'direction'
   | 'font'
   | 'fontFamily'
   | 'fontFeatureSettings'
@@ -35,6 +37,7 @@ type TextStyleProperty =
   | 'fontVariantPosition'
   | 'fontVariationSettings'
   | 'fontWeight'
+  | 'hangingPunctuation'
   | 'hypens'
   | 'hyphenateCharacter'
   | 'hyphenateLimitChars'
@@ -43,11 +46,17 @@ type TextStyleProperty =
   | 'lineHeight'
   | 'quotes'
   | 'overflowWrap'
+  | 'tabSize'
+  | 'textAlign'
+  | 'textAlignLast'
   | 'textCombineUpright'
   | 'textDecoration'
   | 'textDecorationColor'
   | 'textDecorationLine'
+  | 'textDecorationSkip'
+  | 'textDecorationSkipBox'
   | 'textDecorationSkipInk'
+  | 'textDecorationSkipInset'
   | 'textDecorationStyle'
   | 'textDecorationThickness'
   | 'textEmphasis'
@@ -60,16 +69,21 @@ type TextStyleProperty =
   | 'textOverflow'
   | 'textRendering'
   | 'textShadow'
+  | 'textStroke'
+  | 'textStrokeColor'
+  | 'textStrokeWidth'
   | 'textTransform'
   | 'textUnderlineOffset'
   | 'textUnderlinePosition'
   | 'textWrap'
   | 'textWrapMode'
   | 'textWrapStyle'
+  | 'unicodeBidi'
   | 'verticalAlign'
   | 'whiteSpace'
   | 'wordBreak'
   | 'wordSpacing'
+  | 'writingMode'
 
 export type TextStyle = CompositionStyleObject<TextStyleProperty>
 
@@ -79,17 +93,11 @@ export type TextStyles = Recursive<Token<TextStyle>>
  * Layer styles
  * -----------------------------------------------------------------------------*/
 
-type Placement =
-  | 'Top'
-  | 'Right'
-  | 'Bottom'
-  | 'Left'
-  | 'Inline'
-  | 'Block'
-  | 'InlineStart'
-  | 'InlineEnd'
-  | 'BlockStart'
-  | 'BlockEnd'
+type LogicalPlacement = 'Inline' | 'Block' | 'InlineStart' | 'InlineEnd' | 'BlockStart' | 'BlockEnd'
+
+type PhysicalPlacement = 'Top' | 'Right' | 'Bottom' | 'Left'
+
+type Placement = PhysicalPlacement | LogicalPlacement
 
 type Radius =
   | `Top${'Right' | 'Left'}`
@@ -98,20 +106,80 @@ type Radius =
   | `End${'Start' | 'End'}`
 
 type LayerStyleProperty =
+  | 'aspectRatio'
   | 'background'
   | 'backgroundColor'
   | 'backgroundImage'
-  | 'borderRadius'
   | 'border'
-  | 'borderWidth'
   | 'borderColor'
+  | 'borderImage'
+  | 'borderImageOutset'
+  | 'borderImageRepeat'
+  | 'borderImageSlice'
+  | 'borderImageSource'
+  | 'borderImageWidth'
+  | 'borderRadius'
   | 'borderStyle'
+  | 'borderWidth'
+  | `border${Placement}`
+  | `border${Placement}Color`
+  | `border${Placement}Style`
+  | `border${Placement}Width`
+  | 'borderRadius'
+  | `border${Radius}Radius`
   | 'boxShadow'
+  | 'boxShadowColor'
+  | 'clipPath'
+  | 'color'
+  | 'contain'
+  | 'content'
+  | 'contentVisibility'
+  | 'cursor'
+  | 'display'
   | 'filter'
   | 'backdropFilter'
-  | 'transform'
-  | 'color'
+  | 'height'
+  | 'width'
+  | 'minHeight'
+  | 'minWidth'
+  | 'maxHeight'
+  | 'maxWidth'
+  | `margin${Placement}`
+  | 'inset'
+  | `inset${LogicalPlacement}`
+  | Lowercase<PhysicalPlacement>
+  | 'isolation'
+  | 'mask'
+  | 'maskClip'
+  | 'maskComposite'
+  | 'maskImage'
+  | 'maskMode'
+  | 'maskOrigin'
+  | 'maskPosition'
+  | 'maskRepeat'
+  | 'maskSize'
+  | 'mixBlendMode'
+  | 'objectFit'
+  | 'objectPosition'
   | 'opacity'
+  | 'outline'
+  | 'outlineColor'
+  | 'outlineOffset'
+  | 'outlineStyle'
+  | 'outlineWidth'
+  | 'overflow'
+  | 'overflowX'
+  | 'overflowY'
+  | 'padding'
+  | `padding${Placement}`
+  | 'pointerEvents'
+  | 'position'
+  | 'resize'
+  | 'transform'
+  | 'transition'
+  | 'visibility'
+  | 'willChange'
+  | 'zIndex'
   | 'backgroundBlendMode'
   | 'backgroundAttachment'
   | 'backgroundClip'
@@ -119,14 +187,6 @@ type LayerStyleProperty =
   | 'backgroundPosition'
   | 'backgroundRepeat'
   | 'backgroundSize'
-  | `border${Placement}`
-  | `border${Placement}Width`
-  | 'borderRadius'
-  | `border${Radius}Radius`
-  | `border${Placement}Color`
-  | `border${Placement}Style`
-  | 'padding'
-  | `padding${Placement}`
 
 export type LayerStyle = CompositionStyleObject<LayerStyleProperty>
 

package/styled-system/types/conditions.d.ts

@@ -14,7 +14,7 @@ export interface Conditions {
 	"_focusWithin": string
 	/** `&:is(:focus-visible, [data-focus-visible])` */
 	"_focusVisible": string
-	/** `&:is(:disabled, [disabled], [data-disabled])` */
+	/** `&:is(:disabled, [disabled], [data-disabled], [aria-disabled=true])` */
 	"_disabled": string
 	/** `&:is(:active, [data-active])` */
 	"_active": string
@@ -22,7 +22,7 @@ export interface Conditions {
 	"_visited": string
 	/** `&:target` */
 	"_target": string
-	/** `&:is(:read-only, [data-read-only])` */
+	/** `&:is(:read-only, [data-read-only], [aria-readonly=true])` */
 	"_readOnly": string
 	/** `&:read-write` */
 	"_readWrite": string
@@ -50,7 +50,7 @@ export interface Conditions {
 	"_firstLetter": string
 	/** `&::first-line` */
 	"_firstLine": string
-	/** `&::marker` */
+	/** `&::marker, &::-webkit-details-marker` */
 	"_marker": string
 	/** `&::selection` */
 	"_selection": string
@@ -84,7 +84,7 @@ export interface Conditions {
 	"_peerFocusWithin": string
 	/** `.peer:is(:focus-visible, [data-focus-visible]) ~ &` */
 	"_peerFocusVisible": string
-	/** `.peer:is(:disabled, [disabled], [data-disabled]) ~ &` */
+	/** `.peer:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) ~ &` */
 	"_peerDisabled": string
 	/** `.peer:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ &` */
 	"_peerChecked": string
@@ -104,13 +104,13 @@ export interface Conditions {
 	"_groupFocusWithin": string
 	/** `.group:is(:focus-visible, [data-focus-visible]) &` */
 	"_groupFocusVisible": string
-	/** `.group:is(:disabled, [disabled], [data-disabled]) &` */
+	/** `.group:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) &` */
 	"_groupDisabled": string
 	/** `.group:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) &` */
 	"_groupChecked": string
 	/** `.group:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) &` */
 	"_groupExpanded": string
-	/** `.group:invalid &` */
+	/** `.group:is(:invalid, [data-invalid], [aria-invalid=true]) &` */
 	"_groupInvalid": string
 	/** `&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate"])` */
 	"_indeterminate": string
@@ -118,7 +118,7 @@ export interface Conditions {
 	"_required": string
 	/** `&:is(:valid, [data-valid])` */
 	"_valid": string
-	/** `&:is(:invalid, [data-invalid])` */
+	/** `&:is(:invalid, [data-invalid], [aria-invalid=true])` */
 	"_invalid": string
 	/** `&:autofill` */
 	"_autofill": string
@@ -146,11 +146,11 @@ export interface Conditions {
 	"_default": string
 	/** `&:optional` */
 	"_optional": string
-	/** `&:is([open], [data-open], [data-state="open"])` */
+	/** `&:is([open], [data-open], [data-state="open"], :popover-open)` */
 	"_open": string
 	/** `&:is([closed], [data-closed], [data-state="closed"])` */
 	"_closed": string
-	/** `&is(:fullscreen, [data-fullscreen])` */
+	/** `&:is(:fullscreen, [data-fullscreen])` */
 	"_fullscreen": string
 	/** `&:is([data-loading], [aria-busy=true])` */
 	"_loading": string
@@ -194,9 +194,9 @@ export interface Conditions {
 	"_lessContrast": string
 	/** `@media (prefers-contrast: more)` */
 	"_moreContrast": string
-	/** `[dir=ltr] &` */
+	/** `:where([dir=ltr], :dir(ltr)) &` */
 	"_ltr": string
-	/** `[dir=rtl] &` */
+	/** `:where([dir=rtl], :dir(rtl)) &` */
 	"_rtl": string
 	/** `&::-webkit-scrollbar` */
 	"_scrollbar": string
@@ -212,6 +212,10 @@ export interface Conditions {
 	"_icon": string
 	/** `@starting-style` */
 	"_starting": string
+	/** `@media (scripting: none)` */
+	"_noscript": string
+	/** `@media (inverted-colors: inverted)` */
+	"_invertedColors": string
 	/** `@media screen and (min-width: 40rem)` */
 	"sm": string
 	/** `@media screen and (min-width: 40rem) and (max-width: 47.9975rem)` */

package/styled-system/types/jsx.d.ts

@@ -1,5 +1,5 @@
 /* eslint-disable */
-import type { ComponentPropsWithoutRef, ElementType, ElementRef, JSX, Ref } from 'react'
+import type { ElementType, JSX, ComponentPropsWithRef, ComponentType, Component } from 'react'
 import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe';
 import type { Assign, DistributiveOmit, DistributiveUnion, JsxHTMLProps, JsxStyleProps, Pretty } from './system-types';
 
@@ -7,26 +7,43 @@ interface Dict {
   [k: string]: unknown
 }
 
-export type ComponentProps<T extends ElementType> = DistributiveOmit<ComponentPropsWithoutRef<T>, 'ref'> & {
-  ref?: Ref<ElementRef<T>>
+export type DataAttrs = Record<`data-${string}`, unknown>
+
+export interface UnstyledProps {
+  /**
+   * Whether to remove recipe styles
+   */
+  unstyled?: boolean | undefined
+}
+
+export interface AsProps {
+  /**
+   * The element to render as
+   */
+  as?: ElementType | undefined
 }
 
+export type ComponentProps<T extends ElementType> = T extends ComponentType<infer P> | Component<infer P>
+  ? JSX.LibraryManagedAttributes<T, P>
+  : ComponentPropsWithRef<T>
+
 export interface StyledComponent<T extends ElementType, P extends Dict = {}> {
-  (props: JsxHTMLProps<ComponentProps<T>, Assign<JsxStyleProps, P>>): JSX.Element
-  displayName?: string
+  (props: JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, Assign<JsxStyleProps, P>>): JSX.Element
+  displayName?: string | undefined
 }
 
 interface RecipeFn {
   __type: any
 }
 
-interface JsxFactoryOptions<TProps extends Dict> {
+export interface JsxFactoryOptions<TProps extends Dict> {
   dataAttr?: boolean
-  defaultProps?: TProps
-  shouldForwardProp?(prop: string, variantKeys: string[]): boolean
+  defaultProps?: Partial<TProps> & DataAttrs
+  shouldForwardProp?: (prop: string, variantKeys: string[]) => boolean
+  forwardProps?: string[]
 }
 
-export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T>, P>;
+export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, P>;
 
 export type JsxElement<T extends ElementType, P extends Dict> = T extends StyledComponent<infer A, infer B>
   ? StyledComponent<A, Pretty<DistributiveUnion<P, B>>>
@@ -47,6 +64,6 @@ export type JsxElements = {
 
 export type Styled = JsxFactory & JsxElements
 
-export type HTMLStyledProps<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
+export type HTMLStyledProps<T extends ElementType> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, JsxStyleProps>
 
 export type StyledVariantProps<T extends StyledComponent<any, any>> = T extends StyledComponent<any, infer Props> ? Props : never

package/styled-system/types/pattern.d.ts

@@ -6,10 +6,10 @@ type Primitive = string | number | boolean | null | undefined
 type LiteralUnion<T, K extends Primitive = string> = T | (K & Record<never, never>)
 
 export type PatternProperty =
-  | { type: 'property'; value: CssProperty }
-  | { type: 'enum'; value: string[] }
-  | { type: 'token'; value: TokenCategory; property?: CssProperty }
-  | { type: 'string' | 'boolean' | 'number' }
+  | { type: 'property'; value: CssProperty; description?: string }
+  | { type: 'enum'; value: string[]; description?: string }
+  | { type: 'token'; value: TokenCategory; property?: CssProperty; description?: string }
+  | { type: 'string' | 'boolean' | 'number'; description?: string }
 
 export interface PatternHelpers {
   map: (value: any, fn: (value: string) => string | undefined) => any

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

@@ -4,6 +4,7 @@ import type { CssProperties } from './system-types';
 import type { Tokens } from '../tokens/index';
 
 export interface UtilityValues {
+	aspectRatio: Tokens["aspectRatios"];
 	top: Tokens["spacing"];
 	left: Tokens["spacing"];
 	inset: "auto" | Tokens["spacing"];
@@ -53,7 +54,14 @@ export interface UtilityValues {
 	spaceX: "auto" | Tokens["spacing"] | CssProperties["marginInlineStart"];
 	spaceY: "auto" | Tokens["spacing"] | CssProperties["marginBlockStart"];
 	outlineColor: Tokens["colors"];
+	outline: Tokens["borders"];
 	outlineOffset: Tokens["spacing"];
+	focusRing: "outside" | "inside" | "mixed" | "none";
+	focusVisibleRing: "outside" | "inside" | "mixed" | "none";
+	focusRingColor: Tokens["colors"];
+	focusRingOffset: Tokens["spacing"];
+	focusRingWidth: CssProperties["outlineWidth"];
+	focusRingStyle: CssProperties["outlineStyle"];
 	divideColor: Tokens["colors"];
 	divideStyle: CssProperties["borderStyle"];
 	width: "auto" | Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen";
@@ -68,6 +76,7 @@ export interface UtilityValues {
 	minBlockSize: "auto" | Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6";
 	maxHeight: "auto" | Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6";
 	maxBlockSize: "auto" | Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6";
+	boxSize: "auto" | Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen";
 	color: Tokens["colors"];
 	fontFamily: Tokens["fonts"];
 	fontSize: Tokens["fontSizes"];
@@ -80,11 +89,13 @@ export interface UtilityValues {
 	textIndent: Tokens["spacing"];
 	textShadow: Tokens["shadows"];
 	textShadowColor: Tokens["colors"];
+	WebkitTextFillColor: Tokens["colors"];
 	textWrap: "wrap" | "balance" | "nowrap";
 	truncate: boolean;
 	background: Tokens["colors"];
 	backgroundColor: Tokens["colors"];
 	backgroundGradient: "to-t" | "to-tr" | "to-r" | "to-br" | "to-b" | "to-bl" | "to-l" | "to-tl";
+	backgroundLinear: "to-t" | "to-tr" | "to-r" | "to-br" | "to-b" | "to-bl" | "to-l" | "to-tl";
 	textGradient: "to-t" | "to-tr" | "to-r" | "to-br" | "to-b" | "to-bl" | "to-l" | "to-tl";
 	gradientFrom: Tokens["colors"];
 	gradientTo: Tokens["colors"];
@@ -104,28 +115,43 @@ export interface UtilityValues {
 	borderEndStartRadius: Tokens["radii"];
 	borderEndEndRadius: Tokens["radii"];
 	borderEndRadius: Tokens["radii"] | CssProperties["borderRadius"];
+	border: Tokens["borders"];
 	borderColor: Tokens["colors"];
+	borderInline: Tokens["borders"];
 	borderInlineColor: Tokens["colors"];
+	borderBlock: Tokens["borders"];
 	borderBlockColor: Tokens["colors"];
+	borderLeft: Tokens["borders"];
 	borderLeftColor: Tokens["colors"];
+	borderInlineStart: Tokens["borders"];
 	borderInlineStartColor: Tokens["colors"];
+	borderRight: Tokens["borders"];
 	borderRightColor: Tokens["colors"];
+	borderInlineEnd: Tokens["borders"];
 	borderInlineEndColor: Tokens["colors"];
+	borderTop: Tokens["borders"];
 	borderTopColor: Tokens["colors"];
+	borderBottom: Tokens["borders"];
 	borderBottomColor: Tokens["colors"];
+	borderBlockEnd: Tokens["borders"];
 	borderBlockEndColor: Tokens["colors"];
+	borderBlockStart: Tokens["borders"];
 	borderBlockStartColor: Tokens["colors"];
 	boxShadow: Tokens["shadows"];
 	boxShadowColor: Tokens["colors"];
 	filter: "auto";
+	blur: Tokens["blurs"];
 	backdropFilter: "auto";
+	backdropBlur: Tokens["blurs"];
 	borderSpacing: Tokens["spacing"] | "auto";
 	borderSpacingX: Tokens["spacing"];
 	borderSpacingY: Tokens["spacing"];
 	transitionTimingFunction: Tokens["easings"];
 	transitionDelay: Tokens["durations"];
 	transitionDuration: Tokens["durations"];
-	transition: "all" | "common" | "background" | "colors" | "opacity" | "shadow" | "transform";
+	transitionProperty: "common" | "colors" | "size" | "position" | "background";
+	transition: "all" | "common" | "size" | "position" | "background" | "colors" | "opacity" | "shadow" | "transform";
+	animation: Tokens["animations"];
 	animationName: "spin" | "ping" | "pulse" | "bounce";
 	animationTimingFunction: Tokens["easings"];
 	animationDuration: Tokens["durations"];
@@ -178,8 +204,9 @@ export interface UtilityValues {
 	srOnly: boolean;
 	debug: boolean;
 	containerName: CssProperties["containerName"];
-	colorPalette: "primary" | "secondary" | "tertiary" | "neutral" | "neutralVariant" | "error" | "onPrimary" | "primaryContainer" | "onPrimaryContainer" | "onSecondary" | "secondaryContainer" | "onSecondaryContainer" | "onTertiary" | "tertiaryContainer" | "onTertiaryContainer" | "onError" | "errorContainer" | "onErrorContainer" | "surface" | "onSurface" | "surfaceVariant" | "onSurfaceVariant" | "surfaceContainerLowest" | "surfaceContainerLow" | "surfaceContainer" | "surfaceContainerHigh" | "surfaceContainerHighest" | "outline" | "outlineVariant" | "inverseSurface" | "inverseOnSurface" | "inversePrimary" | "background" | "onBackground" | "scrim" | "shadow";
-	textStyle: "displayLarge" | "displayMedium" | "displaySmall" | "headlineLarge" | "headlineMedium" | "headlineSmall" | "titleLarge" | "titleMedium" | "titleSmall" | "bodyLarge" | "bodyMedium" | "bodySmall" | "labelLarge" | "labelMedium" | "labelSmall";
+	colorPalette: "current" | "black" | "white" | "transparent" | "rose" | "pink" | "fuchsia" | "purple" | "violet" | "indigo" | "blue" | "sky" | "cyan" | "teal" | "emerald" | "green" | "lime" | "yellow" | "amber" | "orange" | "red" | "stone" | "zinc" | "gray" | "slate" | "primary" | "secondary" | "tertiary" | "neutral" | "neutralVariant" | "error" | "primary.solid.bg" | "primary.solid" | "primary.solid.fg" | "primary.subtle.bg" | "primary.subtle" | "primary.subtle.fg" | "primary.surface.bg" | "primary.surface" | "primary.surface.border" | "primary.surface.fg" | "primary.outline" | "primary.outline.bg" | "primary.outline.border" | "primary.outline.fg" | "primary.plain" | "primary.plain.bg" | "primary.plain.fg" | "neutral.solid.bg" | "neutral.solid" | "neutral.solid.fg" | "neutral.subtle.bg" | "neutral.subtle" | "neutral.subtle.fg" | "neutral.surface.bg" | "neutral.surface" | "neutral.surface.border" | "neutral.surface.fg" | "neutral.outline" | "neutral.outline.bg" | "neutral.outline.border" | "neutral.outline.fg" | "neutral.plain" | "neutral.plain.bg" | "neutral.plain.fg" | "error.solid.bg" | "error.solid" | "error.solid.fg" | "error.subtle.bg" | "error.subtle" | "error.subtle.fg" | "error.surface.bg" | "error.surface" | "error.surface.border" | "error.surface.fg" | "error.outline" | "error.outline.bg" | "error.outline.border" | "error.outline.fg" | "error.plain" | "error.plain.bg" | "error.plain.fg" | "gray.solid.bg" | "gray.solid" | "gray.solid.fg" | "gray.subtle.bg" | "gray.subtle" | "gray.subtle.fg" | "gray.surface.bg" | "gray.surface" | "gray.surface.border" | "gray.surface.fg" | "gray.outline" | "gray.outline.bg" | "gray.outline.border" | "gray.outline.fg" | "gray.plain" | "gray.plain.bg" | "gray.plain.fg" | "red.solid.bg" | "red.solid" | "red.solid.fg" | "red.subtle.bg" | "red.subtle" | "red.subtle.fg" | "red.surface.bg" | "red.surface" | "red.surface.border" | "red.surface.fg" | "red.outline" | "red.outline.bg" | "red.outline.border" | "red.outline.fg" | "red.plain" | "red.plain.bg" | "red.plain.fg" | "fg" | "canvas" | "border" | "surface" | "surface.container" | "onSurface" | "m3Primary" | "onM3Primary" | "onSecondary" | "onTertiary" | "outline" | "inverseSurface" | "inverseOnSurface" | "inversePrimary" | "scrim";
+	textStyle: "8xl" | "9xl" | "displayLarge" | "displayMedium" | "displaySmall" | "headlineLarge" | "headlineMedium" | "headlineSmall" | "titleLarge" | "titleMedium" | "titleSmall" | "bodyLarge" | "bodyMedium" | "bodySmall" | "labelLarge" | "labelMedium" | "labelSmall" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "label";
+	layerStyle: "disabled";
 }