@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.
Files changed (148) hide show
  1. package/css/conditions.mjs +34 -0
  2. package/css/css.d.ts +9 -0
  3. package/css/css.mjs +45 -0
  4. package/css/cva.d.ts +6 -0
  5. package/css/cva.mjs +87 -0
  6. package/css/cx.d.ts +5 -0
  7. package/css/cx.mjs +15 -0
  8. package/css/index.d.ts +5 -0
  9. package/css/index.mjs +4 -0
  10. package/css/sva.d.ts +4 -0
  11. package/css/sva.mjs +41 -0
  12. package/jsx/aspect-ratio.d.ts +10 -0
  13. package/jsx/aspect-ratio.mjs +14 -0
  14. package/jsx/bleed.d.ts +10 -0
  15. package/jsx/bleed.mjs +14 -0
  16. package/jsx/box.d.ts +10 -0
  17. package/jsx/box.mjs +14 -0
  18. package/jsx/center.d.ts +10 -0
  19. package/jsx/center.mjs +14 -0
  20. package/jsx/circle.d.ts +10 -0
  21. package/jsx/circle.mjs +14 -0
  22. package/jsx/container.d.ts +10 -0
  23. package/jsx/container.mjs +14 -0
  24. package/jsx/cq.d.ts +10 -0
  25. package/jsx/cq.mjs +14 -0
  26. package/jsx/divider.d.ts +10 -0
  27. package/jsx/divider.mjs +14 -0
  28. package/jsx/factory-helper.mjs +22 -0
  29. package/jsx/factory.d.ts +3 -0
  30. package/jsx/factory.mjs +80 -0
  31. package/jsx/flex.d.ts +10 -0
  32. package/jsx/flex.mjs +14 -0
  33. package/jsx/float.d.ts +10 -0
  34. package/jsx/float.mjs +14 -0
  35. package/jsx/grid-item.d.ts +10 -0
  36. package/jsx/grid-item.mjs +14 -0
  37. package/jsx/grid.d.ts +10 -0
  38. package/jsx/grid.mjs +14 -0
  39. package/jsx/hstack.d.ts +10 -0
  40. package/jsx/hstack.mjs +14 -0
  41. package/jsx/index.d.ts +25 -0
  42. package/jsx/index.mjs +23 -0
  43. package/jsx/is-valid-prop.d.ts +11 -0
  44. package/jsx/is-valid-prop.mjs +17 -0
  45. package/jsx/link-box.d.ts +10 -0
  46. package/jsx/link-box.mjs +14 -0
  47. package/jsx/link-overlay.d.ts +10 -0
  48. package/jsx/link-overlay.mjs +14 -0
  49. package/jsx/spacer.d.ts +10 -0
  50. package/jsx/spacer.mjs +14 -0
  51. package/jsx/square.d.ts +10 -0
  52. package/jsx/square.mjs +14 -0
  53. package/jsx/stack.d.ts +10 -0
  54. package/jsx/stack.mjs +14 -0
  55. package/jsx/visually-hidden.d.ts +10 -0
  56. package/jsx/visually-hidden.mjs +14 -0
  57. package/jsx/vstack.d.ts +10 -0
  58. package/jsx/vstack.mjs +14 -0
  59. package/jsx/wrap.d.ts +10 -0
  60. package/jsx/wrap.mjs +14 -0
  61. package/package.json +56 -0
  62. package/panda.buildinfo.json +75 -0
  63. package/patterns/aspect-ratio.d.ts +21 -0
  64. package/patterns/aspect-ratio.mjs +38 -0
  65. package/patterns/bleed.d.ts +22 -0
  66. package/patterns/bleed.mjs +24 -0
  67. package/patterns/box.d.ts +21 -0
  68. package/patterns/box.mjs +15 -0
  69. package/patterns/center.d.ts +21 -0
  70. package/patterns/center.mjs +21 -0
  71. package/patterns/circle.d.ts +21 -0
  72. package/patterns/circle.mjs +25 -0
  73. package/patterns/container.d.ts +21 -0
  74. package/patterns/container.mjs +21 -0
  75. package/patterns/cq.d.ts +22 -0
  76. package/patterns/cq.mjs +21 -0
  77. package/patterns/divider.d.ts +23 -0
  78. package/patterns/divider.mjs +25 -0
  79. package/patterns/flex.d.ts +27 -0
  80. package/patterns/flex.mjs +26 -0
  81. package/patterns/float.d.ts +24 -0
  82. package/patterns/float.mjs +52 -0
  83. package/patterns/grid-item.d.ts +26 -0
  84. package/patterns/grid-item.mjs +25 -0
  85. package/patterns/grid.d.ts +25 -0
  86. package/patterns/grid.mjs +27 -0
  87. package/patterns/hstack.d.ts +22 -0
  88. package/patterns/hstack.mjs +24 -0
  89. package/patterns/index.d.ts +22 -0
  90. package/patterns/index.mjs +21 -0
  91. package/patterns/link-box.d.ts +21 -0
  92. package/patterns/link-box.mjs +22 -0
  93. package/patterns/link-overlay.d.ts +21 -0
  94. package/patterns/link-overlay.mjs +27 -0
  95. package/patterns/spacer.d.ts +21 -0
  96. package/patterns/spacer.mjs +21 -0
  97. package/patterns/square.d.ts +21 -0
  98. package/patterns/square.mjs +24 -0
  99. package/patterns/stack.d.ts +24 -0
  100. package/patterns/stack.mjs +24 -0
  101. package/patterns/visually-hidden.d.ts +21 -0
  102. package/patterns/visually-hidden.mjs +18 -0
  103. package/patterns/vstack.d.ts +22 -0
  104. package/patterns/vstack.mjs +24 -0
  105. package/patterns/wrap.d.ts +25 -0
  106. package/patterns/wrap.mjs +25 -0
  107. package/recipes/accordion.d.ts +28 -0
  108. package/recipes/accordion.mjs +56 -0
  109. package/recipes/button.d.ts +30 -0
  110. package/recipes/button.mjs +116 -0
  111. package/recipes/checkbox.d.ts +28 -0
  112. package/recipes/checkbox.mjs +52 -0
  113. package/recipes/create-recipe.mjs +82 -0
  114. package/recipes/drawer.d.ts +28 -0
  115. package/recipes/drawer.mjs +77 -0
  116. package/recipes/form-control.d.ts +28 -0
  117. package/recipes/form-control.mjs +24 -0
  118. package/recipes/form-helper-text.d.ts +28 -0
  119. package/recipes/form-helper-text.mjs +24 -0
  120. package/recipes/form-label.d.ts +28 -0
  121. package/recipes/form-label.mjs +36 -0
  122. package/recipes/heading.d.ts +30 -0
  123. package/recipes/heading.mjs +41 -0
  124. package/recipes/index.d.ts +12 -0
  125. package/recipes/index.mjs +11 -0
  126. package/recipes/switch-recipe.d.ts +28 -0
  127. package/recipes/switch-recipe.mjs +52 -0
  128. package/recipes/text.d.ts +31 -0
  129. package/recipes/text.mjs +41 -0
  130. package/recipes/textarea.d.ts +28 -0
  131. package/recipes/textarea.mjs +24 -0
  132. package/tokens/index.d.ts +9 -0
  133. package/tokens/index.mjs +1496 -0
  134. package/tokens/tokens.d.ts +63 -0
  135. package/types/composition.d.ts +111 -0
  136. package/types/conditions.d.ts +270 -0
  137. package/types/csstype.d.ts +21298 -0
  138. package/types/global.d.ts +19 -0
  139. package/types/index.d.ts +8 -0
  140. package/types/jsx.d.ts +52 -0
  141. package/types/parts.d.ts +8 -0
  142. package/types/pattern.d.ts +74 -0
  143. package/types/prop-type.d.ts +242 -0
  144. package/types/recipe.d.ts +173 -0
  145. package/types/selectors.d.ts +59 -0
  146. package/types/static-css.d.ts +51 -0
  147. package/types/style-props.d.ts +7468 -0
  148. 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
+ }