@stokelp/styled-system 1.34.0 → 1.35.0

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stokelp/styled-system",
3
- "version": "1.34.0",
3
+ "version": "1.35.0",
4
4
  "description": "Stokelp UI styled-system",
5
5
  "type": "module",
6
6
  "publishConfig": {
@@ -55,6 +55,9 @@
55
55
  "marginBlock]___[value:space-24",
56
56
  "width]___[value:100%",
57
57
  "gridTemplateColumns]___[value:repeat(3, 1fr)",
58
+ "borderRadius]___[value:radius-24",
59
+ "padding]___[value:space-16",
60
+ "height]___[value:200",
58
61
  "width]___[value:400",
59
62
  "gap]___[value:space-32",
60
63
  "gap]___[value:space-8",
@@ -119,7 +122,8 @@
119
122
  "text": [
120
123
  "size]___[value:md]___[recipe:text",
121
124
  "size]___[value:lg]___[recipe:text",
122
- "size]___[value:sm]___[recipe:text"
125
+ "size]___[value:sm]___[recipe:text",
126
+ "bold]___[value:true]___[recipe:text"
123
127
  ],
124
128
  "switchRecipe": [
125
129
  "size]___[value:md]___[recipe:switchRecipe"
@@ -144,6 +148,9 @@
144
148
  "drawer": [
145
149
  "variant]___[value:right]___[recipe:drawer"
146
150
  ],
151
+ "illustration": [
152
+ "pattern]___[value:neutral]___[recipe:illustration"
153
+ ],
147
154
  "pagination": [],
148
155
  "popover": [],
149
156
  "radioButtonGroup": [],
@@ -0,0 +1,35 @@
1
+ /* eslint-disable */
2
+ import type { ConditionalValue } from '../types/index';
3
+ import type { DistributiveOmit, Pretty } from '../types/system-types';
4
+
5
+ interface IllustrationVariant {
6
+ /**
7
+ * @default "neutral"
8
+ */
9
+ pattern: "neutral" | "fish" | "meat" | "fruit" | "vegetable" | "cereal" | "oil" | "aromatic"
10
+ }
11
+
12
+ type IllustrationVariantMap = {
13
+ [key in keyof IllustrationVariant]: Array<IllustrationVariant[key]>
14
+ }
15
+
16
+ export type IllustrationVariantProps = {
17
+ [key in keyof IllustrationVariant]?: ConditionalValue<IllustrationVariant[key]> | undefined
18
+ }
19
+
20
+ export interface IllustrationRecipe {
21
+ __type: IllustrationVariantProps
22
+ (props?: IllustrationVariantProps): string
23
+ raw: (props?: IllustrationVariantProps) => IllustrationVariantProps
24
+ variantMap: IllustrationVariantMap
25
+ variantKeys: Array<keyof IllustrationVariant>
26
+ splitVariantProps<Props extends IllustrationVariantProps>(props: Props): [IllustrationVariantProps, Pretty<DistributiveOmit<Props, keyof IllustrationVariantProps>>]
27
+ getVariantProps: (props?: IllustrationVariantProps) => IllustrationVariantProps
28
+ }
29
+
30
+ /**
31
+ * The styles for the Illustration component
32
+
33
+
34
+ */
35
+ export declare const illustration: IllustrationRecipe
@@ -0,0 +1,37 @@
1
+ import { memo, splitProps } from '../helpers.mjs';
2
+ import { createRecipe, mergeRecipes } from './create-recipe.mjs';
3
+
4
+ const illustrationFn = /* @__PURE__ */ createRecipe('illustration', {
5
+ "pattern": "neutral"
6
+ }, [])
7
+
8
+ const illustrationVariantMap = {
9
+ "pattern": [
10
+ "neutral",
11
+ "fish",
12
+ "meat",
13
+ "fruit",
14
+ "vegetable",
15
+ "cereal",
16
+ "oil",
17
+ "aromatic"
18
+ ]
19
+ }
20
+
21
+ const illustrationVariantKeys = Object.keys(illustrationVariantMap)
22
+
23
+ export const illustration = /* @__PURE__ */ Object.assign(memo(illustrationFn.recipeFn), {
24
+ __recipe__: true,
25
+ __name__: 'illustration',
26
+ __getCompoundVariantCss__: illustrationFn.__getCompoundVariantCss__,
27
+ raw: (props) => props,
28
+ variantKeys: illustrationVariantKeys,
29
+ variantMap: illustrationVariantMap,
30
+ merge(recipe) {
31
+ return mergeRecipes(this, recipe)
32
+ },
33
+ splitVariantProps(props) {
34
+ return splitProps(props, illustrationVariantKeys)
35
+ },
36
+ getVariantProps: illustrationFn.getVariantProps,
37
+ })
@@ -13,6 +13,7 @@ export * from './input-group';
13
13
  export * from './table-group-title';
14
14
  export * from './table-empty-row';
15
15
  export * from './table-container';
16
+ export * from './illustration';
16
17
  export * from './drawer';
17
18
  export * from './radio-button-group';
18
19
  export * from './radio-group';
package/recipes/index.mjs CHANGED
@@ -12,6 +12,7 @@ export * from './input-group.mjs';
12
12
  export * from './table-group-title.mjs';
13
13
  export * from './table-empty-row.mjs';
14
14
  export * from './table-container.mjs';
15
+ export * from './illustration.mjs';
15
16
  export * from './drawer.mjs';
16
17
  export * from './radio-button-group.mjs';
17
18
  export * from './radio-group.mjs';
package/tokens/index.mjs CHANGED
@@ -1067,6 +1067,90 @@ const tokens = {
1067
1067
  "value": "#483522",
1068
1068
  "variable": "var(--colors-decorative-brown-dark)"
1069
1069
  },
1070
+ "colors.typology.fish.light": {
1071
+ "value": "#E7F5FD",
1072
+ "variable": "var(--colors-typology-fish-light)"
1073
+ },
1074
+ "colors.typology.fish.mid": {
1075
+ "value": "#B9D1DF",
1076
+ "variable": "var(--colors-typology-fish-mid)"
1077
+ },
1078
+ "colors.typology.fish.dark": {
1079
+ "value": "#778E9B",
1080
+ "variable": "var(--colors-typology-fish-dark)"
1081
+ },
1082
+ "colors.typology.meat.light": {
1083
+ "value": "#FFF0F0",
1084
+ "variable": "var(--colors-typology-meat-light)"
1085
+ },
1086
+ "colors.typology.meat.mid": {
1087
+ "value": "#DEB8B8",
1088
+ "variable": "var(--colors-typology-meat-mid)"
1089
+ },
1090
+ "colors.typology.meat.dark": {
1091
+ "value": "#9D7A7A",
1092
+ "variable": "var(--colors-typology-meat-dark)"
1093
+ },
1094
+ "colors.typology.fruit.light": {
1095
+ "value": "#FCF3FF",
1096
+ "variable": "var(--colors-typology-fruit-light)"
1097
+ },
1098
+ "colors.typology.fruit.mid": {
1099
+ "value": "#D6B9E0",
1100
+ "variable": "var(--colors-typology-fruit-mid)"
1101
+ },
1102
+ "colors.typology.fruit.dark": {
1103
+ "value": "#967B9E",
1104
+ "variable": "var(--colors-typology-fruit-dark)"
1105
+ },
1106
+ "colors.typology.vegetable.light": {
1107
+ "value": "#F1F6E6",
1108
+ "variable": "var(--colors-typology-vegetable-light)"
1109
+ },
1110
+ "colors.typology.vegetable.mid": {
1111
+ "value": "#D7E3BC",
1112
+ "variable": "var(--colors-typology-vegetable-mid)"
1113
+ },
1114
+ "colors.typology.vegetable.dark": {
1115
+ "value": "#97A17F",
1116
+ "variable": "var(--colors-typology-vegetable-dark)"
1117
+ },
1118
+ "colors.typology.cereal.light": {
1119
+ "value": "#F1EDE7",
1120
+ "variable": "var(--colors-typology-cereal-light)"
1121
+ },
1122
+ "colors.typology.cereal.mid": {
1123
+ "value": "#E4D4BB",
1124
+ "variable": "var(--colors-typology-cereal-mid)"
1125
+ },
1126
+ "colors.typology.cereal.dark": {
1127
+ "value": "#A3947E",
1128
+ "variable": "var(--colors-typology-cereal-dark)"
1129
+ },
1130
+ "colors.typology.oil.light": {
1131
+ "value": "#F7F4DB",
1132
+ "variable": "var(--colors-typology-oil-light)"
1133
+ },
1134
+ "colors.typology.oil.mid": {
1135
+ "value": "#E8E3BC",
1136
+ "variable": "var(--colors-typology-oil-mid)"
1137
+ },
1138
+ "colors.typology.oil.dark": {
1139
+ "value": "#A8A47F",
1140
+ "variable": "var(--colors-typology-oil-dark)"
1141
+ },
1142
+ "colors.typology.aromatic.light": {
1143
+ "value": "#E8F5F0",
1144
+ "variable": "var(--colors-typology-aromatic-light)"
1145
+ },
1146
+ "colors.typology.aromatic.mid": {
1147
+ "value": "#B9E5D4",
1148
+ "variable": "var(--colors-typology-aromatic-mid)"
1149
+ },
1150
+ "colors.typology.aromatic.dark": {
1151
+ "value": "#81AB9B",
1152
+ "variable": "var(--colors-typology-aromatic-dark)"
1153
+ },
1070
1154
  "colors.primary.100": {
1071
1155
  "value": "var(--colors-purple-100)",
1072
1156
  "variable": "var(--colors-primary-100)"
@@ -1491,6 +1575,90 @@ const tokens = {
1491
1575
  "value": "var(--colors-color-palette-brown-dark)",
1492
1576
  "variable": "var(--colors-color-palette-brown-dark)"
1493
1577
  },
1578
+ "colors.colorPalette.fish.light": {
1579
+ "value": "var(--colors-color-palette-fish-light)",
1580
+ "variable": "var(--colors-color-palette-fish-light)"
1581
+ },
1582
+ "colors.colorPalette.fish.mid": {
1583
+ "value": "var(--colors-color-palette-fish-mid)",
1584
+ "variable": "var(--colors-color-palette-fish-mid)"
1585
+ },
1586
+ "colors.colorPalette.fish.dark": {
1587
+ "value": "var(--colors-color-palette-fish-dark)",
1588
+ "variable": "var(--colors-color-palette-fish-dark)"
1589
+ },
1590
+ "colors.colorPalette.meat.light": {
1591
+ "value": "var(--colors-color-palette-meat-light)",
1592
+ "variable": "var(--colors-color-palette-meat-light)"
1593
+ },
1594
+ "colors.colorPalette.meat.mid": {
1595
+ "value": "var(--colors-color-palette-meat-mid)",
1596
+ "variable": "var(--colors-color-palette-meat-mid)"
1597
+ },
1598
+ "colors.colorPalette.meat.dark": {
1599
+ "value": "var(--colors-color-palette-meat-dark)",
1600
+ "variable": "var(--colors-color-palette-meat-dark)"
1601
+ },
1602
+ "colors.colorPalette.fruit.light": {
1603
+ "value": "var(--colors-color-palette-fruit-light)",
1604
+ "variable": "var(--colors-color-palette-fruit-light)"
1605
+ },
1606
+ "colors.colorPalette.fruit.mid": {
1607
+ "value": "var(--colors-color-palette-fruit-mid)",
1608
+ "variable": "var(--colors-color-palette-fruit-mid)"
1609
+ },
1610
+ "colors.colorPalette.fruit.dark": {
1611
+ "value": "var(--colors-color-palette-fruit-dark)",
1612
+ "variable": "var(--colors-color-palette-fruit-dark)"
1613
+ },
1614
+ "colors.colorPalette.vegetable.light": {
1615
+ "value": "var(--colors-color-palette-vegetable-light)",
1616
+ "variable": "var(--colors-color-palette-vegetable-light)"
1617
+ },
1618
+ "colors.colorPalette.vegetable.mid": {
1619
+ "value": "var(--colors-color-palette-vegetable-mid)",
1620
+ "variable": "var(--colors-color-palette-vegetable-mid)"
1621
+ },
1622
+ "colors.colorPalette.vegetable.dark": {
1623
+ "value": "var(--colors-color-palette-vegetable-dark)",
1624
+ "variable": "var(--colors-color-palette-vegetable-dark)"
1625
+ },
1626
+ "colors.colorPalette.cereal.light": {
1627
+ "value": "var(--colors-color-palette-cereal-light)",
1628
+ "variable": "var(--colors-color-palette-cereal-light)"
1629
+ },
1630
+ "colors.colorPalette.cereal.mid": {
1631
+ "value": "var(--colors-color-palette-cereal-mid)",
1632
+ "variable": "var(--colors-color-palette-cereal-mid)"
1633
+ },
1634
+ "colors.colorPalette.cereal.dark": {
1635
+ "value": "var(--colors-color-palette-cereal-dark)",
1636
+ "variable": "var(--colors-color-palette-cereal-dark)"
1637
+ },
1638
+ "colors.colorPalette.oil.light": {
1639
+ "value": "var(--colors-color-palette-oil-light)",
1640
+ "variable": "var(--colors-color-palette-oil-light)"
1641
+ },
1642
+ "colors.colorPalette.oil.mid": {
1643
+ "value": "var(--colors-color-palette-oil-mid)",
1644
+ "variable": "var(--colors-color-palette-oil-mid)"
1645
+ },
1646
+ "colors.colorPalette.oil.dark": {
1647
+ "value": "var(--colors-color-palette-oil-dark)",
1648
+ "variable": "var(--colors-color-palette-oil-dark)"
1649
+ },
1650
+ "colors.colorPalette.aromatic.light": {
1651
+ "value": "var(--colors-color-palette-aromatic-light)",
1652
+ "variable": "var(--colors-color-palette-aromatic-light)"
1653
+ },
1654
+ "colors.colorPalette.aromatic.mid": {
1655
+ "value": "var(--colors-color-palette-aromatic-mid)",
1656
+ "variable": "var(--colors-color-palette-aromatic-mid)"
1657
+ },
1658
+ "colors.colorPalette.aromatic.dark": {
1659
+ "value": "var(--colors-color-palette-aromatic-dark)",
1660
+ "variable": "var(--colors-color-palette-aromatic-dark)"
1661
+ },
1494
1662
  "colors.colorPalette.disabled": {
1495
1663
  "value": "var(--colors-color-palette-disabled)",
1496
1664
  "variable": "var(--colors-color-palette-disabled)"
@@ -1,7 +1,7 @@
1
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-10" | "spacing.space-14" | "spacing.space-16" | "spacing.space-18" | "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-10" | "spacing.-space-14" | "spacing.-space-16" | "spacing.-space-18" | "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"
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-10" | "spacing.space-14" | "spacing.space-16" | "spacing.space-18" | "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.typology.fish.light" | "colors.typology.fish.mid" | "colors.typology.fish.dark" | "colors.typology.meat.light" | "colors.typology.meat.mid" | "colors.typology.meat.dark" | "colors.typology.fruit.light" | "colors.typology.fruit.mid" | "colors.typology.fruit.dark" | "colors.typology.vegetable.light" | "colors.typology.vegetable.mid" | "colors.typology.vegetable.dark" | "colors.typology.cereal.light" | "colors.typology.cereal.mid" | "colors.typology.cereal.dark" | "colors.typology.oil.light" | "colors.typology.oil.mid" | "colors.typology.oil.dark" | "colors.typology.aromatic.light" | "colors.typology.aromatic.mid" | "colors.typology.aromatic.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-10" | "spacing.-space-14" | "spacing.-space-16" | "spacing.-space-18" | "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.fish.light" | "colors.colorPalette.fish.mid" | "colors.colorPalette.fish.dark" | "colors.colorPalette.meat.light" | "colors.colorPalette.meat.mid" | "colors.colorPalette.meat.dark" | "colors.colorPalette.fruit.light" | "colors.colorPalette.fruit.mid" | "colors.colorPalette.fruit.dark" | "colors.colorPalette.vegetable.light" | "colors.colorPalette.vegetable.mid" | "colors.colorPalette.vegetable.dark" | "colors.colorPalette.cereal.light" | "colors.colorPalette.cereal.mid" | "colors.colorPalette.cereal.dark" | "colors.colorPalette.oil.light" | "colors.colorPalette.oil.mid" | "colors.colorPalette.oil.dark" | "colors.colorPalette.aromatic.light" | "colors.colorPalette.aromatic.mid" | "colors.colorPalette.aromatic.dark" | "colors.colorPalette.disabled" | "colors.colorPalette.heading"
3
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"
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" | "typology" | "typology.fish" | "typology.meat" | "typology.fruit" | "typology.vegetable" | "typology.cereal" | "typology.oil" | "typology.aromatic" | "primary" | "secondary" | "error" | "success" | "warning" | "text"
5
5
 
6
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
7
 
@@ -11,7 +11,7 @@ export type BlurToken = "2xl" | "3xl" | "base" | "lg" | "md" | "sm" | "xl"
11
11
 
12
12
  export type BorderToken = "border.none"
13
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"
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" | "typology.fish.light" | "typology.fish.mid" | "typology.fish.dark" | "typology.meat.light" | "typology.meat.mid" | "typology.meat.dark" | "typology.fruit.light" | "typology.fruit.mid" | "typology.fruit.dark" | "typology.vegetable.light" | "typology.vegetable.mid" | "typology.vegetable.dark" | "typology.cereal.light" | "typology.cereal.mid" | "typology.cereal.dark" | "typology.oil.light" | "typology.oil.mid" | "typology.oil.dark" | "typology.aromatic.light" | "typology.aromatic.mid" | "typology.aromatic.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.fish.light" | "colorPalette.fish.mid" | "colorPalette.fish.dark" | "colorPalette.meat.light" | "colorPalette.meat.mid" | "colorPalette.meat.dark" | "colorPalette.fruit.light" | "colorPalette.fruit.mid" | "colorPalette.fruit.dark" | "colorPalette.vegetable.light" | "colorPalette.vegetable.mid" | "colorPalette.vegetable.dark" | "colorPalette.cereal.light" | "colorPalette.cereal.mid" | "colorPalette.cereal.dark" | "colorPalette.oil.light" | "colorPalette.oil.mid" | "colorPalette.oil.dark" | "colorPalette.aromatic.light" | "colorPalette.aromatic.mid" | "colorPalette.aromatic.dark" | "colorPalette.disabled" | "colorPalette.heading"
15
15
 
16
16
  export type DurationToken = "fast" | "faster" | "fastest" | "normal" | "slow" | "slower" | "slowest"
17
17
 
@@ -197,7 +197,7 @@ export interface UtilityValues {
197
197
  debug: boolean;
198
198
  containerName: CssProperties["containerName"];
199
199
  boxSize: Tokens["sizes"];
200
- 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";
200
+ colorPalette: "black" | "current" | "transparent" | "white" | "purple" | "blue" | "grey" | "red" | "green" | "yellow" | "decorative" | "decorative.red" | "decorative.blue" | "decorative.yellow" | "decorative.purple" | "decorative.green" | "decorative.brown" | "typology" | "typology.fish" | "typology.meat" | "typology.fruit" | "typology.vegetable" | "typology.cereal" | "typology.oil" | "typology.aromatic" | "primary" | "secondary" | "error" | "success" | "warning" | "text";
201
201
  textStyle: "body.lg" | "body.md" | "body.sm" | "heading.h1" | "heading.h2" | "heading.h3" | "heading.h4" | "heading.h5" | "heading.h6";
202
202
  }
203
203