@stokelp/styled-system 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/conditions.mjs +34 -0
- package/css/css.d.ts +9 -0
- package/css/css.mjs +45 -0
- package/css/cva.d.ts +6 -0
- package/css/cva.mjs +87 -0
- package/css/cx.d.ts +5 -0
- package/css/cx.mjs +15 -0
- package/css/index.d.ts +5 -0
- package/css/index.mjs +4 -0
- package/css/sva.d.ts +4 -0
- package/css/sva.mjs +41 -0
- package/jsx/aspect-ratio.d.ts +10 -0
- package/jsx/aspect-ratio.mjs +14 -0
- package/jsx/bleed.d.ts +10 -0
- package/jsx/bleed.mjs +14 -0
- package/jsx/box.d.ts +10 -0
- package/jsx/box.mjs +14 -0
- package/jsx/center.d.ts +10 -0
- package/jsx/center.mjs +14 -0
- package/jsx/circle.d.ts +10 -0
- package/jsx/circle.mjs +14 -0
- package/jsx/container.d.ts +10 -0
- package/jsx/container.mjs +14 -0
- package/jsx/cq.d.ts +10 -0
- package/jsx/cq.mjs +14 -0
- package/jsx/divider.d.ts +10 -0
- package/jsx/divider.mjs +14 -0
- package/jsx/factory-helper.mjs +22 -0
- package/jsx/factory.d.ts +3 -0
- package/jsx/factory.mjs +80 -0
- package/jsx/flex.d.ts +10 -0
- package/jsx/flex.mjs +14 -0
- package/jsx/float.d.ts +10 -0
- package/jsx/float.mjs +14 -0
- package/jsx/grid-item.d.ts +10 -0
- package/jsx/grid-item.mjs +14 -0
- package/jsx/grid.d.ts +10 -0
- package/jsx/grid.mjs +14 -0
- package/jsx/hstack.d.ts +10 -0
- package/jsx/hstack.mjs +14 -0
- package/jsx/index.d.ts +25 -0
- package/jsx/index.mjs +23 -0
- package/jsx/is-valid-prop.d.ts +11 -0
- package/jsx/is-valid-prop.mjs +17 -0
- package/jsx/link-box.d.ts +10 -0
- package/jsx/link-box.mjs +14 -0
- package/jsx/link-overlay.d.ts +10 -0
- package/jsx/link-overlay.mjs +14 -0
- package/jsx/spacer.d.ts +10 -0
- package/jsx/spacer.mjs +14 -0
- package/jsx/square.d.ts +10 -0
- package/jsx/square.mjs +14 -0
- package/jsx/stack.d.ts +10 -0
- package/jsx/stack.mjs +14 -0
- package/jsx/visually-hidden.d.ts +10 -0
- package/jsx/visually-hidden.mjs +14 -0
- package/jsx/vstack.d.ts +10 -0
- package/jsx/vstack.mjs +14 -0
- package/jsx/wrap.d.ts +10 -0
- package/jsx/wrap.mjs +14 -0
- package/package.json +56 -0
- package/panda.buildinfo.json +75 -0
- package/patterns/aspect-ratio.d.ts +21 -0
- package/patterns/aspect-ratio.mjs +38 -0
- package/patterns/bleed.d.ts +22 -0
- package/patterns/bleed.mjs +24 -0
- package/patterns/box.d.ts +21 -0
- package/patterns/box.mjs +15 -0
- package/patterns/center.d.ts +21 -0
- package/patterns/center.mjs +21 -0
- package/patterns/circle.d.ts +21 -0
- package/patterns/circle.mjs +25 -0
- package/patterns/container.d.ts +21 -0
- package/patterns/container.mjs +21 -0
- package/patterns/cq.d.ts +22 -0
- package/patterns/cq.mjs +21 -0
- package/patterns/divider.d.ts +23 -0
- package/patterns/divider.mjs +25 -0
- package/patterns/flex.d.ts +27 -0
- package/patterns/flex.mjs +26 -0
- package/patterns/float.d.ts +24 -0
- package/patterns/float.mjs +52 -0
- package/patterns/grid-item.d.ts +26 -0
- package/patterns/grid-item.mjs +25 -0
- package/patterns/grid.d.ts +25 -0
- package/patterns/grid.mjs +27 -0
- package/patterns/hstack.d.ts +22 -0
- package/patterns/hstack.mjs +24 -0
- package/patterns/index.d.ts +22 -0
- package/patterns/index.mjs +21 -0
- package/patterns/link-box.d.ts +21 -0
- package/patterns/link-box.mjs +22 -0
- package/patterns/link-overlay.d.ts +21 -0
- package/patterns/link-overlay.mjs +27 -0
- package/patterns/spacer.d.ts +21 -0
- package/patterns/spacer.mjs +21 -0
- package/patterns/square.d.ts +21 -0
- package/patterns/square.mjs +24 -0
- package/patterns/stack.d.ts +24 -0
- package/patterns/stack.mjs +24 -0
- package/patterns/visually-hidden.d.ts +21 -0
- package/patterns/visually-hidden.mjs +18 -0
- package/patterns/vstack.d.ts +22 -0
- package/patterns/vstack.mjs +24 -0
- package/patterns/wrap.d.ts +25 -0
- package/patterns/wrap.mjs +25 -0
- package/recipes/accordion.d.ts +28 -0
- package/recipes/accordion.mjs +56 -0
- package/recipes/button.d.ts +30 -0
- package/recipes/button.mjs +116 -0
- package/recipes/checkbox.d.ts +28 -0
- package/recipes/checkbox.mjs +52 -0
- package/recipes/create-recipe.mjs +82 -0
- package/recipes/drawer.d.ts +28 -0
- package/recipes/drawer.mjs +77 -0
- package/recipes/form-control.d.ts +28 -0
- package/recipes/form-control.mjs +24 -0
- package/recipes/form-helper-text.d.ts +28 -0
- package/recipes/form-helper-text.mjs +24 -0
- package/recipes/form-label.d.ts +28 -0
- package/recipes/form-label.mjs +36 -0
- package/recipes/heading.d.ts +30 -0
- package/recipes/heading.mjs +41 -0
- package/recipes/index.d.ts +12 -0
- package/recipes/index.mjs +11 -0
- package/recipes/switch-recipe.d.ts +28 -0
- package/recipes/switch-recipe.mjs +52 -0
- package/recipes/text.d.ts +31 -0
- package/recipes/text.mjs +41 -0
- package/recipes/textarea.d.ts +28 -0
- package/recipes/textarea.mjs +24 -0
- package/tokens/index.d.ts +9 -0
- package/tokens/index.mjs +1496 -0
- package/tokens/tokens.d.ts +63 -0
- package/types/composition.d.ts +111 -0
- package/types/conditions.d.ts +270 -0
- package/types/csstype.d.ts +21298 -0
- package/types/global.d.ts +19 -0
- package/types/index.d.ts +8 -0
- package/types/jsx.d.ts +52 -0
- package/types/parts.d.ts +8 -0
- package/types/pattern.d.ts +74 -0
- package/types/prop-type.d.ts +242 -0
- package/types/recipe.d.ts +173 -0
- package/types/selectors.d.ts +59 -0
- package/types/static-css.d.ts +51 -0
- package/types/style-props.d.ts +7468 -0
- package/types/system-types.d.ts +89 -0
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
export type Token = "animations.backdrop-in" | "animations.backdrop-out" | "animations.bounce" | "animations.dialog-in" | "animations.dialog-out" | "animations.drawer-in-left" | "animations.drawer-in-right" | "animations.drawer-out-left" | "animations.drawer-out-right" | "animations.fade-in" | "animations.ping" | "animations.pulse" | "animations.skeleton-pulse" | "animations.spin" | "animations.collapse-in" | "animations.collapse-out" | "aspectRatios.golden" | "aspectRatios.landscape" | "aspectRatios.portrait" | "aspectRatios.square" | "aspectRatios.ultrawide" | "aspectRatios.wide" | "blurs.2xl" | "blurs.3xl" | "blurs.base" | "blurs.lg" | "blurs.md" | "blurs.sm" | "blurs.xl" | "borders.border.none" | "colors.black" | "colors.current" | "colors.transparent" | "colors.white" | "colors.purple.100" | "colors.purple.200" | "colors.purple.300" | "colors.purple.400" | "colors.purple.500" | "colors.purple.600" | "colors.purple.700" | "colors.purple.800" | "colors.purple.900" | "colors.blue.100" | "colors.blue.200" | "colors.blue.300" | "colors.blue.400" | "colors.blue.500" | "colors.blue.600" | "colors.blue.700" | "colors.blue.800" | "colors.blue.900" | "colors.grey.50" | "colors.grey.100" | "colors.grey.200" | "colors.grey.300" | "colors.grey.400" | "colors.grey.500" | "colors.grey.600" | "colors.grey.700" | "colors.grey.800" | "colors.grey.900" | "colors.red.100" | "colors.red.200" | "colors.red.300" | "colors.red.400" | "colors.red.500" | "colors.red.600" | "colors.red.700" | "colors.red.800" | "colors.red.900" | "colors.green.100" | "colors.green.200" | "colors.green.300" | "colors.green.400" | "colors.green.500" | "colors.green.600" | "colors.green.700" | "colors.green.800" | "colors.green.900" | "colors.yellow.100" | "colors.yellow.200" | "colors.yellow.300" | "colors.yellow.400" | "colors.yellow.500" | "colors.yellow.600" | "colors.yellow.700" | "colors.yellow.800" | "colors.yellow.900" | "durations.fast" | "durations.faster" | "durations.fastest" | "durations.normal" | "durations.slow" | "durations.slower" | "durations.slowest" | "easings.default" | "easings.ease-bounce-1" | "easings.ease-bounce-2" | "easings.ease-bounce-3" | "easings.ease-bounce-4" | "easings.ease-bounce-5" | "easings.ease-spring-1" | "easings.ease-spring-2" | "easings.ease-spring-3" | "easings.ease-spring-4" | "easings.ease-spring-5" | "easings.emphasized-in" | "easings.emphasized-out" | "easings.in" | "easings.in-out" | "easings.linear" | "easings.out" | "easings.pulse" | "fontSizes.body.lg" | "fontSizes.body.md" | "fontSizes.body.sm" | "fontSizes.heading.desktop.2xl" | "fontSizes.heading.desktop.lg" | "fontSizes.heading.desktop.md" | "fontSizes.heading.desktop.sm" | "fontSizes.heading.desktop.xs" | "fontSizes.heading.mobile.2xl" | "fontSizes.heading.mobile.lg" | "fontSizes.heading.mobile.md" | "fontSizes.heading.mobile.sm" | "fontSizes.heading.mobile.xs" | "fontWeights.black" | "fontWeights.bold" | "fontWeights.extrabold" | "fontWeights.extralight" | "fontWeights.light" | "fontWeights.medium" | "fontWeights.normal" | "fontWeights.semibold" | "fontWeights.thin" | "fonts.satoshi" | "fonts.cabinet" | "fonts.mono" | "fonts.sans" | "fonts.serif" | "letterSpacings.normal" | "letterSpacings.tight" | "letterSpacings.tighter" | "letterSpacings.wide" | "letterSpacings.wider" | "letterSpacings.widest" | "radii.radius-0" | "radii.radius-2" | "radii.radius-4" | "radii.radius-6" | "radii.radius-8" | "radii.radius-10" | "radii.radius-12" | "radii.radius-16" | "radii.radius-20" | "radii.radius-24" | "radii.radius-28" | "radii.radius-32" | "radii.radius-36" | "radii.radius-40" | "radii.radius-44" | "radii.radius-48" | "radii.radius-52" | "radii.radius-56" | "radii.radius-60" | "radii.radius-64" | "radii.full" | "shadows.2xl" | "shadows.inner" | "shadows.lg" | "shadows.md" | "shadows.sm" | "shadows.xl" | "shadows.xs" | "sizes.size-0" | "sizes.size-12" | "sizes.size-14" | "sizes.size-16" | "sizes.size-2" | "sizes.size-20" | "sizes.size-24" | "sizes.size-28" | "sizes.size-32" | "sizes.size-36" | "sizes.size-4" | "sizes.size-40" | "sizes.size-6" | "sizes.size-44" | "sizes.size-8" | "sizes.full" | "sizes.max" | "sizes.size-48" | "sizes.fit" | "sizes.size-52" | "sizes.min" | "sizes.size-56" | "sizes.size-60" | "sizes.size-64" | "sizes.size-68" | "sizes.size-72" | "sizes.size-76" | "sizes.size-80" | "sizes.breakpoint-xl" | "sizes.breakpoint-lg" | "sizes.breakpoint-md" | "sizes.breakpoint-sm" | "spacing.space-0" | "spacing.space-12" | "spacing.space-14" | "spacing.space-16" | "spacing.space-2" | "spacing.space-20" | "spacing.space-24" | "spacing.space-28" | "spacing.space-32" | "spacing.space-36" | "spacing.space-4" | "spacing.space-40" | "spacing.space-6" | "spacing.space-44" | "spacing.space-8" | "spacing.space-48" | "spacing.space-52" | "spacing.space-56" | "spacing.space-60" | "spacing.space-64" | "spacing.space-68" | "spacing.space-72" | "spacing.space-76" | "spacing.space-80" | "zIndex.banner" | "zIndex.base" | "zIndex.docked" | "zIndex.dropdown" | "zIndex.hide" | "zIndex.modal" | "zIndex.overlay" | "zIndex.popover" | "zIndex.skipLink" | "zIndex.sticky" | "zIndex.toast" | "zIndex.tooltip" | "breakpoints.xl" | "breakpoints.lg" | "breakpoints.md" | "breakpoints.sm" | "colors.decorative.red.light" | "colors.decorative.red.mid" | "colors.decorative.red.dark" | "colors.decorative.blue.light" | "colors.decorative.blue.mid" | "colors.decorative.blue.dark" | "colors.decorative.yellow.light" | "colors.decorative.yellow.mid" | "colors.decorative.yellow.dark" | "colors.decorative.purple.light" | "colors.decorative.purple.mid" | "colors.decorative.purple.dark" | "colors.decorative.green.light" | "colors.decorative.green.mid" | "colors.decorative.green.dark" | "colors.decorative.brown.light" | "colors.decorative.brown.mid" | "colors.decorative.brown.dark" | "colors.primary.100" | "colors.primary.200" | "colors.primary.300" | "colors.primary.400" | "colors.primary.500" | "colors.primary.600" | "colors.primary.700" | "colors.primary.800" | "colors.primary.900" | "colors.secondary.100" | "colors.secondary.200" | "colors.secondary.300" | "colors.secondary.400" | "colors.secondary.500" | "colors.secondary.600" | "colors.secondary.700" | "colors.secondary.800" | "colors.secondary.900" | "colors.error.100" | "colors.error.200" | "colors.error.300" | "colors.error.400" | "colors.error.500" | "colors.error.600" | "colors.error.700" | "colors.error.800" | "colors.error.900" | "colors.success.100" | "colors.success.200" | "colors.success.300" | "colors.success.400" | "colors.success.500" | "colors.success.600" | "colors.success.700" | "colors.success.800" | "colors.success.900" | "colors.warning.100" | "colors.warning.200" | "colors.warning.300" | "colors.warning.400" | "colors.warning.500" | "colors.warning.600" | "colors.warning.700" | "colors.warning.800" | "colors.warning.900" | "colors.text" | "colors.text.disabled" | "colors.text.heading" | "spacing.-space-0" | "spacing.-space-12" | "spacing.-space-14" | "spacing.-space-16" | "spacing.-space-2" | "spacing.-space-20" | "spacing.-space-24" | "spacing.-space-28" | "spacing.-space-32" | "spacing.-space-36" | "spacing.-space-4" | "spacing.-space-40" | "spacing.-space-6" | "spacing.-space-44" | "spacing.-space-8" | "spacing.-space-48" | "spacing.-space-52" | "spacing.-space-56" | "spacing.-space-60" | "spacing.-space-64" | "spacing.-space-68" | "spacing.-space-72" | "spacing.-space-76" | "spacing.-space-80" | "colors.colorPalette" | "colors.colorPalette.100" | "colors.colorPalette.200" | "colors.colorPalette.300" | "colors.colorPalette.400" | "colors.colorPalette.500" | "colors.colorPalette.600" | "colors.colorPalette.700" | "colors.colorPalette.800" | "colors.colorPalette.900" | "colors.colorPalette.50" | "colors.colorPalette.red.light" | "colors.colorPalette.light" | "colors.colorPalette.red.mid" | "colors.colorPalette.mid" | "colors.colorPalette.red.dark" | "colors.colorPalette.dark" | "colors.colorPalette.blue.light" | "colors.colorPalette.blue.mid" | "colors.colorPalette.blue.dark" | "colors.colorPalette.yellow.light" | "colors.colorPalette.yellow.mid" | "colors.colorPalette.yellow.dark" | "colors.colorPalette.purple.light" | "colors.colorPalette.purple.mid" | "colors.colorPalette.purple.dark" | "colors.colorPalette.green.light" | "colors.colorPalette.green.mid" | "colors.colorPalette.green.dark" | "colors.colorPalette.brown.light" | "colors.colorPalette.brown.mid" | "colors.colorPalette.brown.dark" | "colors.colorPalette.disabled" | "colors.colorPalette.heading"
|
|
3
|
+
|
|
4
|
+
export type ColorPalette = "black" | "current" | "transparent" | "white" | "purple" | "blue" | "grey" | "red" | "green" | "yellow" | "decorative" | "decorative.red" | "decorative.blue" | "decorative.yellow" | "decorative.purple" | "decorative.green" | "decorative.brown" | "primary" | "secondary" | "error" | "success" | "warning" | "text"
|
|
5
|
+
|
|
6
|
+
export type AnimationToken = "backdrop-in" | "backdrop-out" | "bounce" | "dialog-in" | "dialog-out" | "drawer-in-left" | "drawer-in-right" | "drawer-out-left" | "drawer-out-right" | "fade-in" | "ping" | "pulse" | "skeleton-pulse" | "spin" | "collapse-in" | "collapse-out"
|
|
7
|
+
|
|
8
|
+
export type AspectRatioToken = "golden" | "landscape" | "portrait" | "square" | "ultrawide" | "wide"
|
|
9
|
+
|
|
10
|
+
export type BlurToken = "2xl" | "3xl" | "base" | "lg" | "md" | "sm" | "xl"
|
|
11
|
+
|
|
12
|
+
export type BorderToken = "border.none"
|
|
13
|
+
|
|
14
|
+
export type ColorToken = "black" | "current" | "transparent" | "white" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "grey.50" | "grey.100" | "grey.200" | "grey.300" | "grey.400" | "grey.500" | "grey.600" | "grey.700" | "grey.800" | "grey.900" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "decorative.red.light" | "decorative.red.mid" | "decorative.red.dark" | "decorative.blue.light" | "decorative.blue.mid" | "decorative.blue.dark" | "decorative.yellow.light" | "decorative.yellow.mid" | "decorative.yellow.dark" | "decorative.purple.light" | "decorative.purple.mid" | "decorative.purple.dark" | "decorative.green.light" | "decorative.green.mid" | "decorative.green.dark" | "decorative.brown.light" | "decorative.brown.mid" | "decorative.brown.dark" | "primary.100" | "primary.200" | "primary.300" | "primary.400" | "primary.500" | "primary.600" | "primary.700" | "primary.800" | "primary.900" | "secondary.100" | "secondary.200" | "secondary.300" | "secondary.400" | "secondary.500" | "secondary.600" | "secondary.700" | "secondary.800" | "secondary.900" | "error.100" | "error.200" | "error.300" | "error.400" | "error.500" | "error.600" | "error.700" | "error.800" | "error.900" | "success.100" | "success.200" | "success.300" | "success.400" | "success.500" | "success.600" | "success.700" | "success.800" | "success.900" | "warning.100" | "warning.200" | "warning.300" | "warning.400" | "warning.500" | "warning.600" | "warning.700" | "warning.800" | "warning.900" | "text" | "text.disabled" | "text.heading" | "colorPalette" | "colorPalette.100" | "colorPalette.200" | "colorPalette.300" | "colorPalette.400" | "colorPalette.500" | "colorPalette.600" | "colorPalette.700" | "colorPalette.800" | "colorPalette.900" | "colorPalette.50" | "colorPalette.red.light" | "colorPalette.light" | "colorPalette.red.mid" | "colorPalette.mid" | "colorPalette.red.dark" | "colorPalette.dark" | "colorPalette.blue.light" | "colorPalette.blue.mid" | "colorPalette.blue.dark" | "colorPalette.yellow.light" | "colorPalette.yellow.mid" | "colorPalette.yellow.dark" | "colorPalette.purple.light" | "colorPalette.purple.mid" | "colorPalette.purple.dark" | "colorPalette.green.light" | "colorPalette.green.mid" | "colorPalette.green.dark" | "colorPalette.brown.light" | "colorPalette.brown.mid" | "colorPalette.brown.dark" | "colorPalette.disabled" | "colorPalette.heading"
|
|
15
|
+
|
|
16
|
+
export type DurationToken = "fast" | "faster" | "fastest" | "normal" | "slow" | "slower" | "slowest"
|
|
17
|
+
|
|
18
|
+
export type EasingToken = "default" | "ease-bounce-1" | "ease-bounce-2" | "ease-bounce-3" | "ease-bounce-4" | "ease-bounce-5" | "ease-spring-1" | "ease-spring-2" | "ease-spring-3" | "ease-spring-4" | "ease-spring-5" | "emphasized-in" | "emphasized-out" | "in" | "in-out" | "linear" | "out" | "pulse"
|
|
19
|
+
|
|
20
|
+
export type FontSizeToken = "body.lg" | "body.md" | "body.sm" | "heading.desktop.2xl" | "heading.desktop.lg" | "heading.desktop.md" | "heading.desktop.sm" | "heading.desktop.xs" | "heading.mobile.2xl" | "heading.mobile.lg" | "heading.mobile.md" | "heading.mobile.sm" | "heading.mobile.xs"
|
|
21
|
+
|
|
22
|
+
export type FontWeightToken = "black" | "bold" | "extrabold" | "extralight" | "light" | "medium" | "normal" | "semibold" | "thin"
|
|
23
|
+
|
|
24
|
+
export type FontToken = "satoshi" | "cabinet" | "mono" | "sans" | "serif"
|
|
25
|
+
|
|
26
|
+
export type LetterSpacingToken = "normal" | "tight" | "tighter" | "wide" | "wider" | "widest"
|
|
27
|
+
|
|
28
|
+
export type RadiusToken = "radius-0" | "radius-2" | "radius-4" | "radius-6" | "radius-8" | "radius-10" | "radius-12" | "radius-16" | "radius-20" | "radius-24" | "radius-28" | "radius-32" | "radius-36" | "radius-40" | "radius-44" | "radius-48" | "radius-52" | "radius-56" | "radius-60" | "radius-64" | "full"
|
|
29
|
+
|
|
30
|
+
export type ShadowToken = "2xl" | "inner" | "lg" | "md" | "sm" | "xl" | "xs"
|
|
31
|
+
|
|
32
|
+
export type SizeToken = "size-0" | "size-12" | "size-14" | "size-16" | "size-2" | "size-20" | "size-24" | "size-28" | "size-32" | "size-36" | "size-4" | "size-40" | "size-6" | "size-44" | "size-8" | "full" | "max" | "size-48" | "fit" | "size-52" | "min" | "size-56" | "size-60" | "size-64" | "size-68" | "size-72" | "size-76" | "size-80" | "breakpoint-xl" | "breakpoint-lg" | "breakpoint-md" | "breakpoint-sm"
|
|
33
|
+
|
|
34
|
+
export type SpacingToken = "space-0" | "space-12" | "space-14" | "space-16" | "space-2" | "space-20" | "space-24" | "space-28" | "space-32" | "space-36" | "space-4" | "space-40" | "space-6" | "space-44" | "space-8" | "space-48" | "space-52" | "space-56" | "space-60" | "space-64" | "space-68" | "space-72" | "space-76" | "space-80" | "-space-0" | "-space-12" | "-space-14" | "-space-16" | "-space-2" | "-space-20" | "-space-24" | "-space-28" | "-space-32" | "-space-36" | "-space-4" | "-space-40" | "-space-6" | "-space-44" | "-space-8" | "-space-48" | "-space-52" | "-space-56" | "-space-60" | "-space-64" | "-space-68" | "-space-72" | "-space-76" | "-space-80"
|
|
35
|
+
|
|
36
|
+
export type ZIndexToken = "banner" | "base" | "docked" | "dropdown" | "hide" | "modal" | "overlay" | "popover" | "skipLink" | "sticky" | "toast" | "tooltip"
|
|
37
|
+
|
|
38
|
+
export type BreakpointToken = "xl" | "lg" | "md" | "sm"
|
|
39
|
+
|
|
40
|
+
export type AnimationName = "blob" | "bounce" | "fade-in" | "fade-out" | "fadeIn" | "fadeInFromRight" | "fadeInSkew" | "fadeOut" | "fadeOutFromRight" | "fadeOutSkew" | "ping" | "pulse" | "skeleton-pulse" | "slide-in" | "slide-in-left" | "slide-in-modal" | "slide-in-right" | "slide-out" | "slide-out-left" | "slide-out-modal" | "slide-out-right" | "slideInFromBottom" | "slideOutToBottom" | "collapse-in" | "collapse-out" | "spin"
|
|
41
|
+
|
|
42
|
+
export type Tokens = {
|
|
43
|
+
animations: AnimationToken
|
|
44
|
+
aspectRatios: AspectRatioToken
|
|
45
|
+
blurs: BlurToken
|
|
46
|
+
borders: BorderToken
|
|
47
|
+
colors: ColorToken
|
|
48
|
+
durations: DurationToken
|
|
49
|
+
easings: EasingToken
|
|
50
|
+
fontSizes: FontSizeToken
|
|
51
|
+
fontWeights: FontWeightToken
|
|
52
|
+
fonts: FontToken
|
|
53
|
+
letterSpacings: LetterSpacingToken
|
|
54
|
+
radii: RadiusToken
|
|
55
|
+
shadows: ShadowToken
|
|
56
|
+
sizes: SizeToken
|
|
57
|
+
spacing: SpacingToken
|
|
58
|
+
zIndex: ZIndexToken
|
|
59
|
+
breakpoints: BreakpointToken
|
|
60
|
+
animationName: AnimationName
|
|
61
|
+
} & { [token: string]: never }
|
|
62
|
+
|
|
63
|
+
export type TokenCategory = "aspectRatios" | "zIndex" | "opacity" | "colors" | "fonts" | "fontSizes" | "fontWeights" | "lineHeights" | "letterSpacings" | "sizes" | "shadows" | "spacing" | "radii" | "borders" | "borderWidths" | "durations" | "easings" | "animations" | "blurs" | "gradients" | "breakpoints" | "assets"
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import type { CompositionStyleObject } from './system-types';
|
|
3
|
+
|
|
4
|
+
interface Token<T> {
|
|
5
|
+
value: T
|
|
6
|
+
description?: string
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
interface Recursive<T> {
|
|
10
|
+
[key: string]: Recursive<T> | T
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
/* -----------------------------------------------------------------------------
|
|
14
|
+
* Text styles
|
|
15
|
+
* -----------------------------------------------------------------------------*/
|
|
16
|
+
|
|
17
|
+
type TextStyleProperty =
|
|
18
|
+
| 'fontSize'
|
|
19
|
+
| 'fontSizeAdjust'
|
|
20
|
+
| 'fontVariationSettings'
|
|
21
|
+
| 'fontVariantPosition'
|
|
22
|
+
| 'fontVariantCaps'
|
|
23
|
+
| 'fontVariantNumeric'
|
|
24
|
+
| 'fontVariantAlternates'
|
|
25
|
+
| 'fontVariantLigatures'
|
|
26
|
+
| 'fontFamily'
|
|
27
|
+
| 'fontWeight'
|
|
28
|
+
| 'fontSynthesis'
|
|
29
|
+
| 'fontStyle'
|
|
30
|
+
| 'fontVariant'
|
|
31
|
+
| 'lineHeight'
|
|
32
|
+
| 'letterSpacing'
|
|
33
|
+
| 'textDecoration'
|
|
34
|
+
| 'textTransform'
|
|
35
|
+
| 'textIndent'
|
|
36
|
+
| 'textDecorationColor'
|
|
37
|
+
| 'textDecorationLine'
|
|
38
|
+
| 'textDecorationStyle'
|
|
39
|
+
| 'textEmphasisColor'
|
|
40
|
+
| 'textEmphasisPosition'
|
|
41
|
+
| 'textEmphasisStyle'
|
|
42
|
+
| 'hyphenateCharacter'
|
|
43
|
+
| 'textOrientation'
|
|
44
|
+
| 'textOverflow'
|
|
45
|
+
| 'textRendering'
|
|
46
|
+
|
|
47
|
+
export type TextStyle = CompositionStyleObject<TextStyleProperty>
|
|
48
|
+
|
|
49
|
+
export type TextStyles = Recursive<Token<TextStyle>>
|
|
50
|
+
|
|
51
|
+
/* -----------------------------------------------------------------------------
|
|
52
|
+
* Layer styles
|
|
53
|
+
* -----------------------------------------------------------------------------*/
|
|
54
|
+
|
|
55
|
+
type Placement =
|
|
56
|
+
| 'Top'
|
|
57
|
+
| 'Right'
|
|
58
|
+
| 'Bottom'
|
|
59
|
+
| 'Left'
|
|
60
|
+
| 'Inline'
|
|
61
|
+
| 'Block'
|
|
62
|
+
| 'InlineStart'
|
|
63
|
+
| 'InlineEnd'
|
|
64
|
+
| 'BlockStart'
|
|
65
|
+
| 'BlockEnd'
|
|
66
|
+
|
|
67
|
+
type Radius =
|
|
68
|
+
| `Top${'Right' | 'Left'}`
|
|
69
|
+
| `Bottom${'Right' | 'Left'}`
|
|
70
|
+
| `Start${'Start' | 'End'}`
|
|
71
|
+
| `End${'Start' | 'End'}`
|
|
72
|
+
|
|
73
|
+
type LayerStyleProperty =
|
|
74
|
+
| 'background'
|
|
75
|
+
| 'backgroundColor'
|
|
76
|
+
| 'backgroundImage'
|
|
77
|
+
| 'borderRadius'
|
|
78
|
+
| 'border'
|
|
79
|
+
| 'borderWidth'
|
|
80
|
+
| 'borderColor'
|
|
81
|
+
| 'borderStyle'
|
|
82
|
+
| 'boxShadow'
|
|
83
|
+
| 'filter'
|
|
84
|
+
| 'backdropFilter'
|
|
85
|
+
| 'transform'
|
|
86
|
+
| 'color'
|
|
87
|
+
| 'opacity'
|
|
88
|
+
| 'backgroundBlendMode'
|
|
89
|
+
| 'backgroundAttachment'
|
|
90
|
+
| 'backgroundClip'
|
|
91
|
+
| 'backgroundOrigin'
|
|
92
|
+
| 'backgroundPosition'
|
|
93
|
+
| 'backgroundRepeat'
|
|
94
|
+
| 'backgroundSize'
|
|
95
|
+
| `border${Placement}`
|
|
96
|
+
| `border${Placement}Width`
|
|
97
|
+
| 'borderRadius'
|
|
98
|
+
| `border${Radius}Radius`
|
|
99
|
+
| `border${Placement}Color`
|
|
100
|
+
| `border${Placement}Style`
|
|
101
|
+
| 'padding'
|
|
102
|
+
| `padding${Placement}`
|
|
103
|
+
|
|
104
|
+
export type LayerStyle = CompositionStyleObject<LayerStyleProperty>
|
|
105
|
+
|
|
106
|
+
export type LayerStyles = Recursive<Token<LayerStyle>>
|
|
107
|
+
|
|
108
|
+
export interface CompositionStyles {
|
|
109
|
+
textStyles: TextStyles
|
|
110
|
+
layerStyles: LayerStyles
|
|
111
|
+
}
|
|
@@ -0,0 +1,270 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import type { AnySelector, Selectors } from './selectors';
|
|
3
|
+
|
|
4
|
+
export interface Conditions {
|
|
5
|
+
/** `&:where(:hover, [data-hover], [data-hovered])` */
|
|
6
|
+
"_hover": string
|
|
7
|
+
/** `&:where(:focus, [data-focus], [data-focused])` */
|
|
8
|
+
"_focus": string
|
|
9
|
+
/** `&:focus-within` */
|
|
10
|
+
"_focusWithin": string
|
|
11
|
+
/** `&:is(:focus-visible, [data-focus-visible])` */
|
|
12
|
+
"_focusVisible": string
|
|
13
|
+
/** `&:is(:disabled, [disabled], [data-disabled])` */
|
|
14
|
+
"_disabled": string
|
|
15
|
+
/** `&:is(:active, [data-active])` */
|
|
16
|
+
"_active": string
|
|
17
|
+
/** `&:visited` */
|
|
18
|
+
"_visited": string
|
|
19
|
+
/** `&:target` */
|
|
20
|
+
"_target": string
|
|
21
|
+
/** `&:is(:read-only, [data-read-only])` */
|
|
22
|
+
"_readOnly": string
|
|
23
|
+
/** `&:read-write` */
|
|
24
|
+
"_readWrite": string
|
|
25
|
+
/** `&:is(:empty, [data-empty])` */
|
|
26
|
+
"_empty": string
|
|
27
|
+
/** `&:where(:checked, [data-checked], [aria-checked=true], [data-state=checked])` */
|
|
28
|
+
"_checked": string
|
|
29
|
+
/** `&:enabled` */
|
|
30
|
+
"_enabled": string
|
|
31
|
+
/** `&:is([aria-expanded=true], [data-expanded], [data-state="expanded"])` */
|
|
32
|
+
"_expanded": string
|
|
33
|
+
/** `&:where([data-highlighted])` */
|
|
34
|
+
"_highlighted": string
|
|
35
|
+
/** `&::before` */
|
|
36
|
+
"_before": string
|
|
37
|
+
/** `&::after` */
|
|
38
|
+
"_after": string
|
|
39
|
+
/** `&::first-letter` */
|
|
40
|
+
"_firstLetter": string
|
|
41
|
+
/** `&::first-line` */
|
|
42
|
+
"_firstLine": string
|
|
43
|
+
/** `&::marker` */
|
|
44
|
+
"_marker": string
|
|
45
|
+
/** `&::selection` */
|
|
46
|
+
"_selection": string
|
|
47
|
+
/** `&::file-selector-button` */
|
|
48
|
+
"_file": string
|
|
49
|
+
/** `&::backdrop` */
|
|
50
|
+
"_backdrop": string
|
|
51
|
+
/** `&:first-child` */
|
|
52
|
+
"_first": string
|
|
53
|
+
/** `&:last-child` */
|
|
54
|
+
"_last": string
|
|
55
|
+
/** `&:only-child` */
|
|
56
|
+
"_only": string
|
|
57
|
+
/** `&:nth-child(even)` */
|
|
58
|
+
"_even": string
|
|
59
|
+
/** `&:nth-child(odd)` */
|
|
60
|
+
"_odd": string
|
|
61
|
+
/** `&:first-of-type` */
|
|
62
|
+
"_firstOfType": string
|
|
63
|
+
/** `&:last-of-type` */
|
|
64
|
+
"_lastOfType": string
|
|
65
|
+
/** `&:only-of-type` */
|
|
66
|
+
"_onlyOfType": string
|
|
67
|
+
/** `.peer:is(:focus, [data-focus]) ~ &` */
|
|
68
|
+
"_peerFocus": string
|
|
69
|
+
/** `.peer:is(:hover, [data-hover]) ~ &` */
|
|
70
|
+
"_peerHover": string
|
|
71
|
+
/** `.peer:is(:active, [data-active]) ~ &` */
|
|
72
|
+
"_peerActive": string
|
|
73
|
+
/** `.peer:focus-within ~ &` */
|
|
74
|
+
"_peerFocusWithin": string
|
|
75
|
+
/** `.peer:is(:focus-visible, [data-focus-visible]) ~ &` */
|
|
76
|
+
"_peerFocusVisible": string
|
|
77
|
+
/** `.peer:is(:disabled, [disabled], [data-disabled]) ~ &` */
|
|
78
|
+
"_peerDisabled": string
|
|
79
|
+
/** `.peer:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ &` */
|
|
80
|
+
"_peerChecked": string
|
|
81
|
+
/** `.peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &` */
|
|
82
|
+
"_peerInvalid": string
|
|
83
|
+
/** `.peer:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) ~ &` */
|
|
84
|
+
"_peerExpanded": string
|
|
85
|
+
/** `.peer:placeholder-shown ~ &` */
|
|
86
|
+
"_peerPlaceholderShown": string
|
|
87
|
+
/** `.group:is(:focus, [data-focus]) &` */
|
|
88
|
+
"_groupFocus": string
|
|
89
|
+
/** `[role=group]:where(:hover, [data-hover]) &` */
|
|
90
|
+
"_groupHover": string
|
|
91
|
+
/** `.group:is(:active, [data-active]) &` */
|
|
92
|
+
"_groupActive": string
|
|
93
|
+
/** `.group:focus-within &` */
|
|
94
|
+
"_groupFocusWithin": string
|
|
95
|
+
/** `.group:is(:focus-visible, [data-focus-visible]) &` */
|
|
96
|
+
"_groupFocusVisible": string
|
|
97
|
+
/** `.group:is(:disabled, [disabled], [data-disabled]) &` */
|
|
98
|
+
"_groupDisabled": string
|
|
99
|
+
/** `.group:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) &` */
|
|
100
|
+
"_groupChecked": string
|
|
101
|
+
/** `.group:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) &` */
|
|
102
|
+
"_groupExpanded": string
|
|
103
|
+
/** `.group:invalid &` */
|
|
104
|
+
"_groupInvalid": string
|
|
105
|
+
/** `&:where(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=indeterminate])` */
|
|
106
|
+
"_indeterminate": string
|
|
107
|
+
/** `&:is(:required, [data-required], [aria-required=true])` */
|
|
108
|
+
"_required": string
|
|
109
|
+
/** `&:is(:valid, [data-valid])` */
|
|
110
|
+
"_valid": string
|
|
111
|
+
/** `&:where(:invalid, [data-invalid], [aria-invalid=true])` */
|
|
112
|
+
"_invalid": string
|
|
113
|
+
/** `&:autofill` */
|
|
114
|
+
"_autofill": string
|
|
115
|
+
/** `&:in-range` */
|
|
116
|
+
"_inRange": string
|
|
117
|
+
/** `&:out-of-range` */
|
|
118
|
+
"_outOfRange": string
|
|
119
|
+
/** `&::placeholder, &[data-placeholder]` */
|
|
120
|
+
"_placeholder": string
|
|
121
|
+
/** `&:where(:placeholder-shown, [data-placeholder-shown])` */
|
|
122
|
+
"_placeholderShown": string
|
|
123
|
+
/** `&:is([aria-pressed=true], [data-pressed])` */
|
|
124
|
+
"_pressed": string
|
|
125
|
+
/** `&:is([aria-selected=true], [data-selected])` */
|
|
126
|
+
"_selected": string
|
|
127
|
+
/** `&:default` */
|
|
128
|
+
"_default": string
|
|
129
|
+
/** `&:optional` */
|
|
130
|
+
"_optional": string
|
|
131
|
+
/** `&:where([open], [data-state=open])` */
|
|
132
|
+
"_open": string
|
|
133
|
+
/** `&:where([data-state=closed])` */
|
|
134
|
+
"_closed": string
|
|
135
|
+
/** `&:fullscreen` */
|
|
136
|
+
"_fullscreen": string
|
|
137
|
+
/** `&:is([data-loading], [aria-busy=true])` */
|
|
138
|
+
"_loading": string
|
|
139
|
+
/** `&[aria-current=page]` */
|
|
140
|
+
"_currentPage": string
|
|
141
|
+
/** `&[aria-current=step]` */
|
|
142
|
+
"_currentStep": string
|
|
143
|
+
/** `@media (prefers-reduced-motion: reduce)` */
|
|
144
|
+
"_motionReduce": string
|
|
145
|
+
/** `@media (prefers-reduced-motion: no-preference)` */
|
|
146
|
+
"_motionSafe": string
|
|
147
|
+
/** `@media print` */
|
|
148
|
+
"_print": string
|
|
149
|
+
/** `@media (orientation: landscape)` */
|
|
150
|
+
"_landscape": string
|
|
151
|
+
/** `@media (orientation: portrait)` */
|
|
152
|
+
"_portrait": string
|
|
153
|
+
/** `.dark &` */
|
|
154
|
+
"_dark": string
|
|
155
|
+
/** `.light &` */
|
|
156
|
+
"_light": string
|
|
157
|
+
/** `@media (prefers-color-scheme: dark)` */
|
|
158
|
+
"_osDark": string
|
|
159
|
+
/** `@media (prefers-color-scheme: light)` */
|
|
160
|
+
"_osLight": string
|
|
161
|
+
/** `@media (forced-colors: active)` */
|
|
162
|
+
"_highContrast": string
|
|
163
|
+
/** `@media (prefers-contrast: less)` */
|
|
164
|
+
"_lessContrast": string
|
|
165
|
+
/** `@media (prefers-contrast: more)` */
|
|
166
|
+
"_moreContrast": string
|
|
167
|
+
/** `[dir=ltr] &` */
|
|
168
|
+
"_ltr": string
|
|
169
|
+
/** `[dir=rtl] &` */
|
|
170
|
+
"_rtl": string
|
|
171
|
+
/** `&::-webkit-scrollbar` */
|
|
172
|
+
"_scrollbar": string
|
|
173
|
+
/** `&::-webkit-scrollbar-thumb` */
|
|
174
|
+
"_scrollbarThumb": string
|
|
175
|
+
/** `&::-webkit-scrollbar-track` */
|
|
176
|
+
"_scrollbarTrack": string
|
|
177
|
+
/** `&[data-orientation=horizontal]` */
|
|
178
|
+
"_horizontal": string
|
|
179
|
+
/** `&[data-orientation=vertical]` */
|
|
180
|
+
"_vertical": string
|
|
181
|
+
/** `@starting-style` */
|
|
182
|
+
"_starting": string
|
|
183
|
+
/** `&:where([aria-collapsed=true], [data-collapsed], [data-state="collapsed"])` */
|
|
184
|
+
"_collapsed": string
|
|
185
|
+
/** `&:is([data-current])` */
|
|
186
|
+
"_current": string
|
|
187
|
+
/** `&:where([hidden])` */
|
|
188
|
+
"_hidden": string
|
|
189
|
+
/** `&:where([data-today])` */
|
|
190
|
+
"_today": string
|
|
191
|
+
/** `&:where([data-state="under-value"])` */
|
|
192
|
+
"_underValue": string
|
|
193
|
+
/** `@media screen and (min-width: 37.5rem)` */
|
|
194
|
+
"sm": string
|
|
195
|
+
/** `@media screen and (min-width: 37.5rem) and (max-width: 56.2475rem)` */
|
|
196
|
+
"smOnly": string
|
|
197
|
+
/** `@media screen and (max-width: 37.4975rem)` */
|
|
198
|
+
"smDown": string
|
|
199
|
+
/** `@media screen and (min-width: 56.25rem)` */
|
|
200
|
+
"md": string
|
|
201
|
+
/** `@media screen and (min-width: 56.25rem) and (max-width: 74.9975rem)` */
|
|
202
|
+
"mdOnly": string
|
|
203
|
+
/** `@media screen and (max-width: 56.2475rem)` */
|
|
204
|
+
"mdDown": string
|
|
205
|
+
/** `@media screen and (min-width: 75rem)` */
|
|
206
|
+
"lg": string
|
|
207
|
+
/** `@media screen and (min-width: 75rem) and (max-width: 95.9975rem)` */
|
|
208
|
+
"lgOnly": string
|
|
209
|
+
/** `@media screen and (max-width: 74.9975rem)` */
|
|
210
|
+
"lgDown": string
|
|
211
|
+
/** `@media screen and (min-width: 96rem)` */
|
|
212
|
+
"xl": string
|
|
213
|
+
/** `@media screen and (min-width: 96rem)` */
|
|
214
|
+
"xlOnly": string
|
|
215
|
+
/** `@media screen and (max-width: 95.9975rem)` */
|
|
216
|
+
"xlDown": string
|
|
217
|
+
/** `@media screen and (min-width: 37.5rem) and (max-width: 56.2475rem)` */
|
|
218
|
+
"smToMd": string
|
|
219
|
+
/** `@media screen and (min-width: 37.5rem) and (max-width: 74.9975rem)` */
|
|
220
|
+
"smToLg": string
|
|
221
|
+
/** `@media screen and (min-width: 37.5rem) and (max-width: 95.9975rem)` */
|
|
222
|
+
"smToXl": string
|
|
223
|
+
/** `@media screen and (min-width: 56.25rem) and (max-width: 74.9975rem)` */
|
|
224
|
+
"mdToLg": string
|
|
225
|
+
/** `@media screen and (min-width: 56.25rem) and (max-width: 95.9975rem)` */
|
|
226
|
+
"mdToXl": string
|
|
227
|
+
/** `@media screen and (min-width: 75rem) and (max-width: 95.9975rem)` */
|
|
228
|
+
"lgToXl": string
|
|
229
|
+
/** `@container (min-width: 42rem)` */
|
|
230
|
+
"@/2xl": string
|
|
231
|
+
/** `@container (min-width: 48rem)` */
|
|
232
|
+
"@/3xl": string
|
|
233
|
+
/** `@container (min-width: 56rem)` */
|
|
234
|
+
"@/4xl": string
|
|
235
|
+
/** `@container (min-width: 64rem)` */
|
|
236
|
+
"@/5xl": string
|
|
237
|
+
/** `@container (min-width: 72rem)` */
|
|
238
|
+
"@/6xl": string
|
|
239
|
+
/** `@container (min-width: 80rem)` */
|
|
240
|
+
"@/7xl": string
|
|
241
|
+
/** `@container (min-width: 90rem)` */
|
|
242
|
+
"@/8xl": string
|
|
243
|
+
/** `@container (min-width: 32rem)` */
|
|
244
|
+
"@/lg": string
|
|
245
|
+
/** `@container (min-width: 28rem)` */
|
|
246
|
+
"@/md": string
|
|
247
|
+
/** `@container (min-width: 24rem)` */
|
|
248
|
+
"@/sm": string
|
|
249
|
+
/** `@container (min-width: 36rem)` */
|
|
250
|
+
"@/xl": string
|
|
251
|
+
/** `@container (min-width: 20rem)` */
|
|
252
|
+
"@/xs": string
|
|
253
|
+
/** The base (=no conditions) styles to apply */
|
|
254
|
+
"base": string
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
export type ConditionalValue<V> =
|
|
258
|
+
| V
|
|
259
|
+
| Array<V | null>
|
|
260
|
+
| {
|
|
261
|
+
[K in keyof Conditions]?: ConditionalValue<V>
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
export type Nested<P> = P & {
|
|
265
|
+
[K in Selectors]?: Nested<P>
|
|
266
|
+
} & {
|
|
267
|
+
[K in AnySelector]?: Nested<P>
|
|
268
|
+
} & {
|
|
269
|
+
[K in keyof Conditions]?: Nested<P>
|
|
270
|
+
}
|