@okshaun/components 0.5.8 → 1.0.1

package/dist/specs/tokens.json

@@ -0,0 +1,2750 @@
+{
+  "type": "tokens",
+  "data": [
+    {
+      "type": "animations",
+      "values": [
+        {
+          "name": "spin",
+          "value": "spin 1s linear infinite",
+          "cssVar": "var(--oks-animations-spin)"
+        },
+        {
+          "name": "ping",
+          "value": "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite",
+          "cssVar": "var(--oks-animations-ping)"
+        },
+        {
+          "name": "pulse",
+          "value": "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+          "cssVar": "var(--oks-animations-pulse)"
+        },
+        {
+          "name": "bounce",
+          "value": "bounce 1s infinite",
+          "cssVar": "var(--oks-animations-bounce)"
+        }
+      ],
+      "tokenFunctionExamples": [
+        "token('animations.spin')",
+        "token.var('animations.spin')"
+      ],
+      "functionExamples": [
+        "css({ color: 'spin' })"
+      ],
+      "jsxExamples": [
+        "<Box color=\"spin\" />"
+      ]
+    },
+    {
+      "type": "aspectRatios",
+      "values": [
+        {
+          "name": "square",
+          "value": "1 / 1",
+          "cssVar": "var(--oks-aspect-ratios-square)"
+        },
+        {
+          "name": "landscape",
+          "value": "4 / 3",
+          "cssVar": "var(--oks-aspect-ratios-landscape)"
+        },
+        {
+          "name": "portrait",
+          "value": "3 / 4",
+          "cssVar": "var(--oks-aspect-ratios-portrait)"
+        },
+        {
+          "name": "wide",
+          "value": "16 / 9",
+          "cssVar": "var(--oks-aspect-ratios-wide)"
+        },
+        {
+          "name": "ultrawide",
+          "value": "18 / 5",
+          "cssVar": "var(--oks-aspect-ratios-ultrawide)"
+        },
+        {
+          "name": "golden",
+          "value": "1.618 / 1",
+          "cssVar": "var(--oks-aspect-ratios-golden)"
+        }
+      ],
+      "tokenFunctionExamples": [
+        "token('aspectRatios.square')",
+        "token.var('aspectRatios.square')"
+      ],
+      "functionExamples": [
+        "css({ aspectRatio: 'square' })"
+      ],
+      "jsxExamples": [
+        "<Box aspectRatio=\"square\" />"
+      ]
+    },
+    {
+      "type": "blurs",
+      "values": [
+        {
+          "name": "sm",
+          "value": "var(--oks-sizes-4)",
+          "cssVar": "var(--oks-blurs-sm)"
+        },
+        {
+          "name": "base",
+          "value": "var(--oks-sizes-8)",
+          "cssVar": "var(--oks-blurs-base)"
+        },
+        {
+          "name": "md",
+          "value": "var(--oks-sizes-12)",
+          "cssVar": "var(--oks-blurs-md)"
+        },
+        {
+          "name": "lg",
+          "value": "var(--oks-sizes-16)",
+          "cssVar": "var(--oks-blurs-lg)"
+        },
+        {
+          "name": "xl",
+          "value": "var(--oks-sizes-24)",
+          "cssVar": "var(--oks-blurs-xl)"
+        },
+        {
+          "name": "2xl",
+          "value": "var(--oks-sizes-40)",
+          "cssVar": "var(--oks-blurs-2xl)"
+        },
+        {
+          "name": "3xl",
+          "value": "var(--oks-sizes-64)",
+          "cssVar": "var(--oks-blurs-3xl)"
+        }
+      ],
+      "tokenFunctionExamples": [
+        "token('blurs.sm')",
+        "token.var('blurs.sm')"
+      ],
+      "functionExamples": [
+        "css({ filter: 'sm' })"
+      ],
+      "jsxExamples": [
+        "<Box filter=\"sm\" />"
+      ]
+    },
+    {
+      "type": "borderWidths",
+      "values": [
+        {
+          "name": "0",
+          "value": "var(--oks-sizes-0)",
+          "cssVar": "var(--oks-border-widths-0)"
+        },
+        {
+          "name": "1",
+          "value": "var(--oks-sizes-1)",
+          "cssVar": "var(--oks-border-widths-1)"
+        },
+        {
+          "name": "2",
+          "value": "var(--oks-sizes-2)",
+          "cssVar": "var(--oks-border-widths-2)"
+        },
+        {
+          "name": "4",
+          "value": "var(--oks-sizes-4)",
+          "cssVar": "var(--oks-border-widths-4)"
+        },
+        {
+          "name": "8",
+          "value": "var(--oks-sizes-8)",
+          "cssVar": "var(--oks-border-widths-8)"
+        },
+        {
+          "name": "16",
+          "value": "var(--oks-sizes-16)",
+          "cssVar": "var(--oks-border-widths-16)"
+        }
+      ],
+      "tokenFunctionExamples": [
+        "token('borderWidths.0')",
+        "token.var('borderWidths.0')"
+      ],
+      "functionExamples": [
+        "css({ borderWidth: '0' })"
+      ],
+      "jsxExamples": [
+        "<Box borderWidth=\"0\" />"
+      ]
+    },
+    {
+      "type": "borders",
+      "values": [
+        {
+          "name": "default",
+          "value": "var(--oks-border-widths-1) solid var(--oks-colors-border)",
+          "cssVar": "var(--oks-borders-default)"
+        },
+        {
+          "name": "strong",
+          "value": "var(--oks-border-widths-2) solid var(--oks-colors-border-bold)",
+          "cssVar": "var(--oks-borders-strong)"
+        },
+        {
+          "name": "input",
+          "value": "var(--oks-border-widths-1) solid var(--oks-colors-border-input)",
+          "cssVar": "var(--oks-borders-input)"
+        },
+        {
+          "name": "focused",
+          "value": "var(--oks-border-widths-2) solid var(--oks-colors-border-focused)",
+          "cssVar": "var(--oks-borders-focused)"
+        },
+        {
+          "name": "success",
+          "value": "var(--oks-border-widths-1) solid var(--oks-colors-border-success)",
+          "cssVar": "var(--oks-borders-success)"
+        },
+        {
+          "name": "warning",
+          "value": "var(--oks-border-widths-1) solid var(--oks-colors-border-warning)",
+          "cssVar": "var(--oks-borders-warning)"
+        },
+        {
+          "name": "danger",
+          "value": "var(--oks-border-widths-1) solid var(--oks-colors-border-danger)",
+          "cssVar": "var(--oks-borders-danger)"
+        },
+        {
+          "name": "info",
+          "value": "var(--oks-border-widths-1) solid var(--oks-colors-border-info)",
+          "cssVar": "var(--oks-borders-info)"
+        },
+        {
+          "name": "none",
+          "value": "none",
+          "cssVar": "var(--oks-borders-none)"
+        }
+      ],
+      "tokenFunctionExamples": [
+        "token('borders.default')",
+        "token.var('borders.default')"
+      ],
+      "functionExamples": [
+        "css({ border: 'default' })"
+      ],
+      "jsxExamples": [
+        "<Box border=\"default\" />"
+      ]
+    },
+    {
+      "type": "colors",
+      "values": [
+        {
+          "name": "transparent",
+          "value": "transparent",
+          "cssVar": "var(--oks-colors-transparent)"
+        },
+        {
+          "name": "current",
+          "value": "currentColor",
+          "cssVar": "var(--oks-colors-current)"
+        },
+        {
+          "name": "inherit",
+          "value": "inherit",
+          "cssVar": "var(--oks-colors-inherit)"
+        },
+        {
+          "name": "neutral.0",
+          "value": "#FFFFFF",
+          "cssVar": "var(--oks-colors-neutral-0)"
+        },
+        {
+          "name": "neutral.10",
+          "value": "#F8F8F8",
+          "cssVar": "var(--oks-colors-neutral-10)"
+        },
+        {
+          "name": "neutral.20",
+          "value": "#F0F1F2",
+          "cssVar": "var(--oks-colors-neutral-20)"
+        },
+        {
+          "name": "neutral.30",
+          "value": "#DDDEE1",
+          "cssVar": "var(--oks-colors-neutral-30)"
+        },
+        {
+          "name": "neutral.40",
+          "value": "#B7B9BE",
+          "cssVar": "var(--oks-colors-neutral-40)"
+        },
+        {
+          "name": "neutral.50",
+          "value": "#8C8F97",
+          "cssVar": "var(--oks-colors-neutral-50)"
+        },
+        {
+          "name": "neutral.60",
+          "value": "#7D818A",
+          "cssVar": "var(--oks-colors-neutral-60)"
+        },
+        {
+          "name": "neutral.70",
+          "value": "#6B6E76",
+          "cssVar": "var(--oks-colors-neutral-70)"
+        },
+        {
+          "name": "neutral.80",
+          "value": "#505258",
+          "cssVar": "var(--oks-colors-neutral-80)"
+        },
+        {
+          "name": "neutral.90",
+          "value": "#3B3D42",
+          "cssVar": "var(--oks-colors-neutral-90)"
+        },
+        {
+          "name": "neutral.100",
+          "value": "#292A2E",
+          "cssVar": "var(--oks-colors-neutral-100)"
+        },
+        {
+          "name": "neutral.110",
+          "value": "#1E1F21",
+          "cssVar": "var(--oks-colors-neutral-110)"
+        },
+        {
+          "name": "neutralA.10",
+          "value": "#17171708",
+          "cssVar": "var(--oks-colors-neutral-a-10)"
+        },
+        {
+          "name": "neutralA.20",
+          "value": "#1717170F",
+          "cssVar": "var(--oks-colors-neutral-a-20)"
+        },
+        {
+          "name": "neutralA.30",
+          "value": "#17171724",
+          "cssVar": "var(--oks-colors-neutral-a-30)"
+        },
+        {
+          "name": "neutralA.40",
+          "value": "#1717174A",
+          "cssVar": "var(--oks-colors-neutral-a-40)"
+        },
+        {
+          "name": "neutralA.50",
+          "value": "#17171775",
+          "cssVar": "var(--oks-colors-neutral-a-50)"
+        },
+        {
+          "name": "darkNeutral.0",
+          "value": "#18191A",
+          "cssVar": "var(--oks-colors-dark-neutral-0)"
+        },
+        {
+          "name": "darkNeutral.10",
+          "value": "#1F1F21",
+          "cssVar": "var(--oks-colors-dark-neutral-10)"
+        },
+        {
+          "name": "darkNeutral.20",
+          "value": "#242528",
+          "cssVar": "var(--oks-colors-dark-neutral-20)"
+        },
+        {
+          "name": "darkNeutral.25",
+          "value": "#2B2C2F",
+          "cssVar": "var(--oks-colors-dark-neutral-25)"
+        },
+        {
+          "name": "darkNeutral.30",
+          "value": "#303134",
+          "cssVar": "var(--oks-colors-dark-neutral-30)"
+        },
+        {
+          "name": "darkNeutral.35",
+          "value": "#3D3F43",
+          "cssVar": "var(--oks-colors-dark-neutral-35)"
+        },
+        {
+          "name": "darkNeutral.40",
+          "value": "#4B4D51",
+          "cssVar": "var(--oks-colors-dark-neutral-40)"
+        },
+        {
+          "name": "darkNeutral.50",
+          "value": "#63666B",
+          "cssVar": "var(--oks-colors-dark-neutral-50)"
+        },
+        {
+          "name": "darkNeutral.60",
+          "value": "#7E8188",
+          "cssVar": "var(--oks-colors-dark-neutral-60)"
+        },
+        {
+          "name": "darkNeutral.70",
+          "value": "#96999E",
+          "cssVar": "var(--oks-colors-dark-neutral-70)"
+        },
+        {
+          "name": "darkNeutral.80",
+          "value": "#A9ABAF",
+          "cssVar": "var(--oks-colors-dark-neutral-80)"
+        },
+        {
+          "name": "darkNeutral.90",
+          "value": "#BFC1C4",
+          "cssVar": "var(--oks-colors-dark-neutral-90)"
+        },
+        {
+          "name": "darkNeutral.100",
+          "value": "#CECFD2",
+          "cssVar": "var(--oks-colors-dark-neutral-100)"
+        },
+        {
+          "name": "darkNeutral.110",
+          "value": "#E2E3E4",
+          "cssVar": "var(--oks-colors-dark-neutral-110)"
+        },
+        {
+          "name": "darkNeutralA.10",
+          "value": "#BDBDBD0A",
+          "cssVar": "var(--oks-colors-dark-neutral-a-10)"
+        },
+        {
+          "name": "darkNeutralA.20",
+          "value": "#CECED912",
+          "cssVar": "var(--oks-colors-dark-neutral-a-20)"
+        },
+        {
+          "name": "darkNeutralA.25",
+          "value": "#D9DAE71A",
+          "cssVar": "var(--oks-colors-dark-neutral-a-25)"
+        },
+        {
+          "name": "darkNeutralA.30",
+          "value": "#E3E4F21F",
+          "cssVar": "var(--oks-colors-dark-neutral-a-30)"
+        },
+        {
+          "name": "darkNeutralA.35",
+          "value": "#E8EDFD2E",
+          "cssVar": "var(--oks-colors-dark-neutral-a-35)"
+        },
+        {
+          "name": "darkNeutralA.40",
+          "value": "#E5E9F640",
+          "cssVar": "var(--oks-colors-dark-neutral-a-40)"
+        },
+        {
+          "name": "darkNeutralA.50",
+          "value": "#E9F0FB5C",
+          "cssVar": "var(--oks-colors-dark-neutral-a-50)"
+        },
+        {
+          "name": "darkNeutralA.-10",
+          "value": "#01040475",
+          "cssVar": "var(--oks-colors-dark-neutral-a--10)"
+        },
+        {
+          "name": "gray.10",
+          "value": "#fbfcfd",
+          "cssVar": "var(--oks-colors-gray-10)"
+        },
+        {
+          "name": "gray.20",
+          "value": "#e0e1e2",
+          "cssVar": "var(--oks-colors-gray-20)"
+        },
+        {
+          "name": "gray.30",
+          "value": "#c5c5c6",
+          "cssVar": "var(--oks-colors-gray-30)"
+        },
+        {
+          "name": "gray.40",
+          "value": "#a9aaab",
+          "cssVar": "var(--oks-colors-gray-40)"
+        },
+        {
+          "name": "gray.50",
+          "value": "#8e8f8f",
+          "cssVar": "var(--oks-colors-gray-50)"
+        },
+        {
+          "name": "gray.60",
+          "value": "#737374",
+          "cssVar": "var(--oks-colors-gray-60)"
+        },
+        {
+          "name": "gray.70",
+          "value": "#585858",
+          "cssVar": "var(--oks-colors-gray-70)"
+        },
+        {
+          "name": "gray.80",
+          "value": "#3c3d3d",
+          "cssVar": "var(--oks-colors-gray-80)"
+        },
+        {
+          "name": "gray.90",
+          "value": "#212121",
+          "cssVar": "var(--oks-colors-gray-90)"
+        },
+        {
+          "name": "gray.100",
+          "value": "#060606",
+          "cssVar": "var(--oks-colors-gray-100)"
+        },
+        {
+          "name": "red.10",
+          "value": "#ffeceb",
+          "cssVar": "var(--oks-colors-red-10)"
+        },
+        {
+          "name": "red.20",
+          "value": "#ffd5d2",
+          "cssVar": "var(--oks-colors-red-20)"
+        },
+        {
+          "name": "red.30",
+          "value": "#fd9891",
+          "cssVar": "var(--oks-colors-red-30)"
+        },
+        {
+          "name": "red.40",
+          "value": "#f87168",
+          "cssVar": "var(--oks-colors-red-40)"
+        },
+        {
+          "name": "red.50",
+          "value": "#f15b50",
+          "cssVar": "var(--oks-colors-red-50)"
+        },
+        {
+          "name": "red.60",
+          "value": "#e2483d",
+          "cssVar": "var(--oks-colors-red-60)"
+        },
+        {
+          "name": "red.70",
+          "value": "#c9372c",
+          "cssVar": "var(--oks-colors-red-70)"
+        },
+        {
+          "name": "red.80",
+          "value": "#ae2e24",
+          "cssVar": "var(--oks-colors-red-80)"
+        },
+        {
+          "name": "red.90",
+          "value": "#5d1f1a",
+          "cssVar": "var(--oks-colors-red-90)"
+        },
+        {
+          "name": "red.100",
+          "value": "#42221f",
+          "cssVar": "var(--oks-colors-red-100)"
+        },
+        {
+          "name": "orange.10",
+          "value": "#fff5db",
+          "cssVar": "var(--oks-colors-orange-10)"
+        },
+        {
+          "name": "orange.20",
+          "value": "#fce4a6",
+          "cssVar": "var(--oks-colors-orange-20)"
+        },
+        {
+          "name": "orange.30",
+          "value": "#fbc828",
+          "cssVar": "var(--oks-colors-orange-30)"
+        },
+        {
+          "name": "orange.40",
+          "value": "#fca700",
+          "cssVar": "var(--oks-colors-orange-40)"
+        },
+        {
+          "name": "orange.50",
+          "value": "#f68909",
+          "cssVar": "var(--oks-colors-orange-50)"
+        },
+        {
+          "name": "orange.60",
+          "value": "#e06c00",
+          "cssVar": "var(--oks-colors-orange-60)"
+        },
+        {
+          "name": "orange.70",
+          "value": "#bd5b00",
+          "cssVar": "var(--oks-colors-orange-70)"
+        },
+        {
+          "name": "orange.80",
+          "value": "#9e4c00",
+          "cssVar": "var(--oks-colors-orange-80)"
+        },
+        {
+          "name": "orange.90",
+          "value": "#693200",
+          "cssVar": "var(--oks-colors-orange-90)"
+        },
+        {
+          "name": "orange.100",
+          "value": "#3a2c1f",
+          "cssVar": "var(--oks-colors-orange-100)"
+        },
+        {
+          "name": "yellow.10",
+          "value": "#fefbf3",
+          "cssVar": "var(--oks-colors-yellow-10)"
+        },
+        {
+          "name": "yellow.20",
+          "value": "#f9ecc4",
+          "cssVar": "var(--oks-colors-yellow-20)"
+        },
+        {
+          "name": "yellow.30",
+          "value": "#f4dd96",
+          "cssVar": "var(--oks-colors-yellow-30)"
+        },
+        {
+          "name": "yellow.40",
+          "value": "#efce67",
+          "cssVar": "var(--oks-colors-yellow-40)"
+        },
+        {
+          "name": "yellow.50",
+          "value": "#eabf39",
+          "cssVar": "var(--oks-colors-yellow-50)"
+        },
+        {
+          "name": "yellow.60",
+          "value": "#e5b00a",
+          "cssVar": "var(--oks-colors-yellow-60)"
+        },
+        {
+          "name": "yellow.70",
+          "value": "#b68e0f",
+          "cssVar": "var(--oks-colors-yellow-70)"
+        },
+        {
+          "name": "yellow.80",
+          "value": "#886c14",
+          "cssVar": "var(--oks-colors-yellow-80)"
+        },
+        {
+          "name": "yellow.90",
+          "value": "#594918",
+          "cssVar": "var(--oks-colors-yellow-90)"
+        },
+        {
+          "name": "yellow.100",
+          "value": "#2a271d",
+          "cssVar": "var(--oks-colors-yellow-100)"
+        },
+        {
+          "name": "lime.10",
+          "value": "#efffd6",
+          "cssVar": "var(--oks-colors-lime-10)"
+        },
+        {
+          "name": "lime.20",
+          "value": "#d3f1a7",
+          "cssVar": "var(--oks-colors-lime-20)"
+        },
+        {
+          "name": "lime.30",
+          "value": "#b3df72",
+          "cssVar": "var(--oks-colors-lime-30)"
+        },
+        {
+          "name": "lime.40",
+          "value": "#94c748",
+          "cssVar": "var(--oks-colors-lime-40)"
+        },
+        {
+          "name": "lime.50",
+          "value": "#82b536",
+          "cssVar": "var(--oks-colors-lime-50)"
+        },
+        {
+          "name": "lime.60",
+          "value": "#6a9a23",
+          "cssVar": "var(--oks-colors-lime-60)"
+        },
+        {
+          "name": "lime.70",
+          "value": "#5b7f24",
+          "cssVar": "var(--oks-colors-lime-70)"
+        },
+        {
+          "name": "lime.80",
+          "value": "#4c6b1f",
+          "cssVar": "var(--oks-colors-lime-80)"
+        },
+        {
+          "name": "lime.90",
+          "value": "#37471f",
+          "cssVar": "var(--oks-colors-lime-90)"
+        },
+        {
+          "name": "lime.100",
+          "value": "#28311b",
+          "cssVar": "var(--oks-colors-lime-100)"
+        },
+        {
+          "name": "green.10",
+          "value": "#dcfff1",
+          "cssVar": "var(--oks-colors-green-10)"
+        },
+        {
+          "name": "green.20",
+          "value": "#baf3db",
+          "cssVar": "var(--oks-colors-green-20)"
+        },
+        {
+          "name": "green.30",
+          "value": "#7ee2b8",
+          "cssVar": "var(--oks-colors-green-30)"
+        },
+        {
+          "name": "green.40",
+          "value": "#4bce97",
+          "cssVar": "var(--oks-colors-green-40)"
+        },
+        {
+          "name": "green.50",
+          "value": "#2abb7f",
+          "cssVar": "var(--oks-colors-green-50)"
+        },
+        {
+          "name": "green.60",
+          "value": "#22a06b",
+          "cssVar": "var(--oks-colors-green-60)"
+        },
+        {
+          "name": "green.70",
+          "value": "#1f845a",
+          "cssVar": "var(--oks-colors-green-70)"
+        },
+        {
+          "name": "green.80",
+          "value": "#216e4e",
+          "cssVar": "var(--oks-colors-green-80)"
+        },
+        {
+          "name": "green.90",
+          "value": "#164b35",
+          "cssVar": "var(--oks-colors-green-90)"
+        },
+        {
+          "name": "green.100",
+          "value": "#1c3329",
+          "cssVar": "var(--oks-colors-green-100)"
+        },
+        {
+          "name": "teal.10",
+          "value": "#e7f9ff",
+          "cssVar": "var(--oks-colors-teal-10)"
+        },
+        {
+          "name": "teal.20",
+          "value": "#c6edfb",
+          "cssVar": "var(--oks-colors-teal-20)"
+        },
+        {
+          "name": "teal.30",
+          "value": "#9dd9ee",
+          "cssVar": "var(--oks-colors-teal-30)"
+        },
+        {
+          "name": "teal.40",
+          "value": "#6cc3e0",
+          "cssVar": "var(--oks-colors-teal-40)"
+        },
+        {
+          "name": "teal.50",
+          "value": "#42b2d7",
+          "cssVar": "var(--oks-colors-teal-50)"
+        },
+        {
+          "name": "teal.60",
+          "value": "#2898bd",
+          "cssVar": "var(--oks-colors-teal-60)"
+        },
+        {
+          "name": "teal.70",
+          "value": "#227d9b",
+          "cssVar": "var(--oks-colors-teal-70)"
+        },
+        {
+          "name": "teal.80",
+          "value": "#206a83",
+          "cssVar": "var(--oks-colors-teal-80)"
+        },
+        {
+          "name": "teal.90",
+          "value": "#164555",
+          "cssVar": "var(--oks-colors-teal-90)"
+        },
+        {
+          "name": "teal.100",
+          "value": "#1e3137",
+          "cssVar": "var(--oks-colors-teal-100)"
+        },
+        {
+          "name": "blue.10",
+          "value": "#e9f2fe",
+          "cssVar": "var(--oks-colors-blue-10)"
+        },
+        {
+          "name": "blue.20",
+          "value": "#cfe1fd",
+          "cssVar": "var(--oks-colors-blue-20)"
+        },
+        {
+          "name": "blue.30",
+          "value": "#8fb8f6",
+          "cssVar": "var(--oks-colors-blue-30)"
+        },
+        {
+          "name": "blue.40",
+          "value": "#669df1",
+          "cssVar": "var(--oks-colors-blue-40)"
+        },
+        {
+          "name": "blue.50",
+          "value": "#4688ec",
+          "cssVar": "var(--oks-colors-blue-50)"
+        },
+        {
+          "name": "blue.60",
+          "value": "#357de8",
+          "cssVar": "var(--oks-colors-blue-60)"
+        },
+        {
+          "name": "blue.70",
+          "value": "#1868db",
+          "cssVar": "var(--oks-colors-blue-70)"
+        },
+        {
+          "name": "blue.80",
+          "value": "#1558bc",
+          "cssVar": "var(--oks-colors-blue-80)"
+        },
+        {
+          "name": "blue.90",
+          "value": "#123263",
+          "cssVar": "var(--oks-colors-blue-90)"
+        },
+        {
+          "name": "blue.100",
+          "value": "#1c2b42",
+          "cssVar": "var(--oks-colors-blue-100)"
+        },
+        {
+          "name": "indigo.10",
+          "value": "#f1eff7",
+          "cssVar": "var(--oks-colors-indigo-10)"
+        },
+        {
+          "name": "indigo.20",
+          "value": "#e7e3fa",
+          "cssVar": "var(--oks-colors-indigo-20)"
+        },
+        {
+          "name": "indigo.30",
+          "value": "#cbc4f2",
+          "cssVar": "var(--oks-colors-indigo-30)"
+        },
+        {
+          "name": "indigo.40",
+          "value": "#afa5e8",
+          "cssVar": "var(--oks-colors-indigo-40)"
+        },
+        {
+          "name": "indigo.50",
+          "value": "#9287d8",
+          "cssVar": "var(--oks-colors-indigo-50)"
+        },
+        {
+          "name": "indigo.60",
+          "value": "#7665d1",
+          "cssVar": "var(--oks-colors-indigo-60)"
+        },
+        {
+          "name": "indigo.70",
+          "value": "#5e519e",
+          "cssVar": "var(--oks-colors-indigo-70)"
+        },
+        {
+          "name": "indigo.80",
+          "value": "#453c7b",
+          "cssVar": "var(--oks-colors-indigo-80)"
+        },
+        {
+          "name": "indigo.90",
+          "value": "#2e2c40",
+          "cssVar": "var(--oks-colors-indigo-90)"
+        },
+        {
+          "name": "indigo.100",
+          "value": "#18161d",
+          "cssVar": "var(--oks-colors-indigo-100)"
+        },
+        {
+          "name": "purple.10",
+          "value": "#f8eefe",
+          "cssVar": "var(--oks-colors-purple-10)"
+        },
+        {
+          "name": "purple.20",
+          "value": "#eed7fc",
+          "cssVar": "var(--oks-colors-purple-20)"
+        },
+        {
+          "name": "purple.30",
+          "value": "#d8a0f7",
+          "cssVar": "var(--oks-colors-purple-30)"
+        },
+        {
+          "name": "purple.40",
+          "value": "#c97cf4",
+          "cssVar": "var(--oks-colors-purple-40)"
+        },
+        {
+          "name": "purple.50",
+          "value": "#bf63f3",
+          "cssVar": "var(--oks-colors-purple-50)"
+        },
+        {
+          "name": "purple.60",
+          "value": "#af59e1",
+          "cssVar": "var(--oks-colors-purple-60)"
+        },
+        {
+          "name": "purple.70",
+          "value": "#964ac0",
+          "cssVar": "var(--oks-colors-purple-70)"
+        },
+        {
+          "name": "purple.80",
+          "value": "#803fa5",
+          "cssVar": "var(--oks-colors-purple-80)"
+        },
+        {
+          "name": "purple.90",
+          "value": "#48245d",
+          "cssVar": "var(--oks-colors-purple-90)"
+        },
+        {
+          "name": "purple.100",
+          "value": "#35243f",
+          "cssVar": "var(--oks-colors-purple-100)"
+        },
+        {
+          "name": "magenta.10",
+          "value": "#ffecf8",
+          "cssVar": "var(--oks-colors-magenta-10)"
+        },
+        {
+          "name": "magenta.20",
+          "value": "#fdd0ec",
+          "cssVar": "var(--oks-colors-magenta-20)"
+        },
+        {
+          "name": "magenta.30",
+          "value": "#f797d2",
+          "cssVar": "var(--oks-colors-magenta-30)"
+        },
+        {
+          "name": "magenta.40",
+          "value": "#e774bb",
+          "cssVar": "var(--oks-colors-magenta-40)"
+        },
+        {
+          "name": "magenta.50",
+          "value": "#da62ac",
+          "cssVar": "var(--oks-colors-magenta-50)"
+        },
+        {
+          "name": "magenta.60",
+          "value": "#cd519d",
+          "cssVar": "var(--oks-colors-magenta-60)"
+        },
+        {
+          "name": "magenta.70",
+          "value": "#ae4787",
+          "cssVar": "var(--oks-colors-magenta-70)"
+        },
+        {
+          "name": "magenta.80",
+          "value": "#943d73",
+          "cssVar": "var(--oks-colors-magenta-80)"
+        },
+        {
+          "name": "magenta.90",
+          "value": "#50253f",
+          "cssVar": "var(--oks-colors-magenta-90)"
+        },
+        {
+          "name": "magenta.100",
+          "value": "#3d2232",
+          "cssVar": "var(--oks-colors-magenta-100)"
+        },
+        {
+          "name": "tan.10",
+          "value": "#f5f0e6",
+          "cssVar": "var(--oks-colors-tan-10)"
+        },
+        {
+          "name": "tan.20",
+          "value": "#f1e5cd",
+          "cssVar": "var(--oks-colors-tan-20)"
+        },
+        {
+          "name": "tan.30",
+          "value": "#dec69a",
+          "cssVar": "var(--oks-colors-tan-30)"
+        },
+        {
+          "name": "tan.40",
+          "value": "#c7a97b",
+          "cssVar": "var(--oks-colors-tan-40)"
+        },
+        {
+          "name": "tan.50",
+          "value": "#ad8b65",
+          "cssVar": "var(--oks-colors-tan-50)"
+        },
+        {
+          "name": "tan.60",
+          "value": "#8e704f",
+          "cssVar": "var(--oks-colors-tan-60)"
+        },
+        {
+          "name": "tan.70",
+          "value": "#6b5947",
+          "cssVar": "var(--oks-colors-tan-70)"
+        },
+        {
+          "name": "tan.80",
+          "value": "#4d4438",
+          "cssVar": "var(--oks-colors-tan-80)"
+        },
+        {
+          "name": "tan.90",
+          "value": "#322d26",
+          "cssVar": "var(--oks-colors-tan-90)"
+        },
+        {
+          "name": "tan.100",
+          "value": "#191714",
+          "cssVar": "var(--oks-colors-tan-100)"
+        },
+        {
+          "name": "slate.0",
+          "value": "#FFFFFF",
+          "cssVar": "var(--oks-colors-slate-0)"
+        },
+        {
+          "name": "slate.1",
+          "value": "#FAFAFA",
+          "cssVar": "var(--oks-colors-slate-1)"
+        },
+        {
+          "name": "slate.2",
+          "value": "#F9F8F6",
+          "cssVar": "var(--oks-colors-slate-2)"
+        },
+        {
+          "name": "slate.3",
+          "value": "#F7F5F3",
+          "cssVar": "var(--oks-colors-slate-3)"
+        },
+        {
+          "name": "slate.4",
+          "value": "#F6F3EF",
+          "cssVar": "var(--oks-colors-slate-4)"
+        },
+        {
+          "name": "slate.5",
+          "value": "#F4F0EB",
+          "cssVar": "var(--oks-colors-slate-5)"
+        },
+        {
+          "name": "slate.10",
+          "value": "#E3E1DE",
+          "cssVar": "var(--oks-colors-slate-10)"
+        },
+        {
+          "name": "slate.20",
+          "value": "#CBCAC8",
+          "cssVar": "var(--oks-colors-slate-20)"
+        },
+        {
+          "name": "slate.30",
+          "value": "#AFADAB",
+          "cssVar": "var(--oks-colors-slate-30)"
+        },
+        {
+          "name": "slate.40",
+          "value": "#939190",
+          "cssVar": "var(--oks-colors-slate-40)"
+        },
+        {
+          "name": "slate.50",
+          "value": "#767675",
+          "cssVar": "var(--oks-colors-slate-50)"
+        },
+        {
+          "name": "slate.60",
+          "value": "#5F5F5E",
+          "cssVar": "var(--oks-colors-slate-60)"
+        },
+        {
+          "name": "slate.70",
+          "value": "#474747",
+          "cssVar": "var(--oks-colors-slate-70)"
+        },
+        {
+          "name": "slate.80",
+          "value": "#2E2E2E",
+          "cssVar": "var(--oks-colors-slate-80)"
+        },
+        {
+          "name": "slate.90",
+          "value": "#1E1E1E",
+          "cssVar": "var(--oks-colors-slate-90)"
+        },
+        {
+          "name": "slate.100",
+          "value": "#000000",
+          "cssVar": "var(--oks-colors-slate-100)"
+        }
+      ],
+      "tokenFunctionExamples": [
+        "token('colors.transparent')",
+        "token.var('colors.transparent')"
+      ],
+      "functionExamples": [
+        "css({ color: 'transparent' })"
+      ],
+      "jsxExamples": [
+        "<Box color=\"transparent\" />"
+      ]
+    },
+    {
+      "type": "containerSizeTokens",
+      "values": [
+        {
+          "name": "2xs",
+          "value": "16rem",
+          "cssVar": "var(--oks-container-size-tokens-2xs)"
+        },
+        {
+          "name": "xs",
+          "value": "20rem",
+          "cssVar": "var(--oks-container-size-tokens-xs)"
+        },
+        {
+          "name": "sm",
+          "value": "24rem",
+          "cssVar": "var(--oks-container-size-tokens-sm)"
+        },
+        {
+          "name": "md",
+          "value": "28rem",
+          "cssVar": "var(--oks-container-size-tokens-md)"
+        },
+        {
+          "name": "lg",
+          "value": "32rem",
+          "cssVar": "var(--oks-container-size-tokens-lg)"
+        },
+        {
+          "name": "xl",
+          "value": "36rem",
+          "cssVar": "var(--oks-container-size-tokens-xl)"
+        },
+        {
+          "name": "2xl",
+          "value": "42rem",
+          "cssVar": "var(--oks-container-size-tokens-2xl)"
+        },
+        {
+          "name": "3xl",
+          "value": "48rem",
+          "cssVar": "var(--oks-container-size-tokens-3xl)"
+        },
+        {
+          "name": "4xl",
+          "value": "56rem",
+          "cssVar": "var(--oks-container-size-tokens-4xl)"
+        },
+        {
+          "name": "5xl",
+          "value": "64rem",
+          "cssVar": "var(--oks-container-size-tokens-5xl)"
+        },
+        {
+          "name": "6xl",
+          "value": "72rem",
+          "cssVar": "var(--oks-container-size-tokens-6xl)"
+        },
+        {
+          "name": "7xl",
+          "value": "80rem",
+          "cssVar": "var(--oks-container-size-tokens-7xl)"
+        },
+        {
+          "name": "8xl",
+          "value": "90rem",
+          "cssVar": "var(--oks-container-size-tokens-8xl)"
+        }
+      ],
+      "tokenFunctionExamples": [
+        "token('containerSizeTokens.2xs')",
+        "token.var('containerSizeTokens.2xs')"
+      ],
+      "functionExamples": [
+        "css({ color: '2xs' })"
+      ],
+      "jsxExamples": [
+        "<Box color=\"2xs\" />"
+      ]
+    },
+    {
+      "type": "durations",
+      "values": [
+        {
+          "name": "fastest",
+          "value": "50ms",
+          "cssVar": "var(--oks-durations-fastest)"
+        },
+        {
+          "name": "faster",
+          "value": "100ms",
+          "cssVar": "var(--oks-durations-faster)"
+        },
+        {
+          "name": "fast",
+          "value": "150ms",
+          "cssVar": "var(--oks-durations-fast)"
+        },
+        {
+          "name": "normal",
+          "value": "200ms",
+          "cssVar": "var(--oks-durations-normal)"
+        },
+        {
+          "name": "slow",
+          "value": "300ms",
+          "cssVar": "var(--oks-durations-slow)"
+        },
+        {
+          "name": "slower",
+          "value": "400ms",
+          "cssVar": "var(--oks-durations-slower)"
+        },
+        {
+          "name": "slowest",
+          "value": "500ms",
+          "cssVar": "var(--oks-durations-slowest)"
+        }
+      ],
+      "tokenFunctionExamples": [
+        "token('durations.fastest')",
+        "token.var('durations.fastest')"
+      ],
+      "functionExamples": [
+        "css({ transitionDuration: 'fastest' })"
+      ],
+      "jsxExamples": [
+        "<Box transitionDuration=\"fastest\" />"
+      ]
+    },
+    {
+      "type": "easings",
+      "values": [
+        {
+          "name": "default",
+          "value": "cubic-bezier(0.4, 0, 0.2, 1)",
+          "cssVar": "var(--oks-easings-default)"
+        },
+        {
+          "name": "linear",
+          "value": "linear",
+          "cssVar": "var(--oks-easings-linear)"
+        },
+        {
+          "name": "in",
+          "value": "cubic-bezier(0.4, 0, 1, 1)",
+          "cssVar": "var(--oks-easings-in)"
+        },
+        {
+          "name": "out",
+          "value": "cubic-bezier(0, 0, 0.2, 1)",
+          "cssVar": "var(--oks-easings-out)"
+        },
+        {
+          "name": "in-out",
+          "value": "cubic-bezier(0.4, 0, 0.2, 1)",
+          "cssVar": "var(--oks-easings-in-out)"
+        }
+      ],
+      "tokenFunctionExamples": [
+        "token('easings.default')",
+        "token.var('easings.default')"
+      ],
+      "functionExamples": [
+        "css({ transitionTimingFunction: 'default' })"
+      ],
+      "jsxExamples": [
+        "<Box transitionTimingFunction=\"default\" />"
+      ]
+    },
+    {
+      "type": "fontSizes",
+      "values": [
+        {
+          "name": "12",
+          "value": "var(--oks-sizes-12)",
+          "cssVar": "var(--oks-font-sizes-12)"
+        },
+        {
+          "name": "14",
+          "value": "var(--oks-sizes-14)",
+          "cssVar": "var(--oks-font-sizes-14)"
+        },
+        {
+          "name": "16",
+          "value": "var(--oks-sizes-16)",
+          "cssVar": "var(--oks-font-sizes-16)"
+        },
+        {
+          "name": "20",
+          "value": "var(--oks-sizes-20)",
+          "cssVar": "var(--oks-font-sizes-20)"
+        },
+        {
+          "name": "24",
+          "value": "var(--oks-sizes-24)",
+          "cssVar": "var(--oks-font-sizes-24)"
+        },
+        {
+          "name": "32",
+          "value": "var(--oks-sizes-32)",
+          "cssVar": "var(--oks-font-sizes-32)"
+        },
+        {
+          "name": "40",
+          "value": "var(--oks-sizes-40)",
+          "cssVar": "var(--oks-font-sizes-40)"
+        },
+        {
+          "name": "48",
+          "value": "var(--oks-sizes-48)",
+          "cssVar": "var(--oks-font-sizes-48)"
+        },
+        {
+          "name": "64",
+          "value": "var(--oks-sizes-64)",
+          "cssVar": "var(--oks-font-sizes-64)"
+        },
+        {
+          "name": "72",
+          "value": "var(--oks-sizes-72)",
+          "cssVar": "var(--oks-font-sizes-72)"
+        },
+        {
+          "name": "80",
+          "value": "var(--oks-sizes-80)",
+          "cssVar": "var(--oks-font-sizes-80)"
+        },
+        {
+          "name": "96",
+          "value": "var(--oks-sizes-96)",
+          "cssVar": "var(--oks-font-sizes-96)"
+        }
+      ],
+      "tokenFunctionExamples": [
+        "token('fontSizes.12')",
+        "token.var('fontSizes.12')"
+      ],
+      "functionExamples": [
+        "css({ fontSize: '12' })"
+      ],
+      "jsxExamples": [
+        "<Box fontSize=\"12\" />"
+      ]
+    },
+    {
+      "type": "fontWeights",
+      "values": [
+        {
+          "name": "light",
+          "value": 300,
+          "cssVar": "var(--oks-font-weights-light)"
+        },
+        {
+          "name": "normal",
+          "value": 400,
+          "cssVar": "var(--oks-font-weights-normal)"
+        },
+        {
+          "name": "medium",
+          "value": 500,
+          "cssVar": "var(--oks-font-weights-medium)"
+        },
+        {
+          "name": "bold",
+          "value": 700,
+          "cssVar": "var(--oks-font-weights-bold)"
+        },
+        {
+          "name": "black",
+          "value": 900,
+          "cssVar": "var(--oks-font-weights-black)"
+        }
+      ],
+      "tokenFunctionExamples": [
+        "token('fontWeights.light')",
+        "token.var('fontWeights.light')"
+      ],
+      "functionExamples": [
+        "css({ fontWeight: 'light' })"
+      ],
+      "jsxExamples": [
+        "<Box fontWeight=\"light\" />"
+      ]
+    },
+    {
+      "type": "fonts",
+      "values": [
+        {
+          "name": "heading",
+          "value": "'IBM Plex Sans', Geneva, Tahoma, Verdana, sans-serif",
+          "cssVar": "var(--oks-fonts-heading)"
+        },
+        {
+          "name": "sans",
+          "value": "'IBM Plex Sans', Geneva, Tahoma, Verdana, sans-serif",
+          "cssVar": "var(--oks-fonts-sans)"
+        },
+        {
+          "name": "body",
+          "value": "'Piazzolla Variable', 'Piazzolla', Georgia, 'Times New Roman', Times, serif",
+          "cssVar": "var(--oks-fonts-body)"
+        },
+        {
+          "name": "serif",
+          "value": "'Piazzolla Variable', 'Piazzolla', Georgia, 'Times New Roman', Times, serif",
+          "cssVar": "var(--oks-fonts-serif)"
+        },
+        {
+          "name": "mono",
+          "value": "'IBM Plex Mono', Andale Mono, monaco, Consolas, Lucida Console, monospace",
+          "cssVar": "var(--oks-fonts-mono)"
+        }
+      ],
+      "tokenFunctionExamples": [
+        "token('fonts.heading')",
+        "token.var('fonts.heading')"
+      ],
+      "functionExamples": [
+        "css({ fontFamily: 'heading' })"
+      ],
+      "jsxExamples": [
+        "<Box fontFamily=\"heading\" />"
+      ]
+    },
+    {
+      "type": "letterSpacings",
+      "values": [
+        {
+          "name": "tighter",
+          "value": "-0.05em",
+          "cssVar": "var(--oks-letter-spacings-tighter)"
+        },
+        {
+          "name": "tight",
+          "value": "-0.025em",
+          "cssVar": "var(--oks-letter-spacings-tight)"
+        },
+        {
+          "name": "normal",
+          "value": "0em",
+          "cssVar": "var(--oks-letter-spacings-normal)"
+        },
+        {
+          "name": "wide",
+          "value": "0.025em",
+          "cssVar": "var(--oks-letter-spacings-wide)"
+        },
+        {
+          "name": "wider",
+          "value": "0.05em",
+          "cssVar": "var(--oks-letter-spacings-wider)"
+        },
+        {
+          "name": "widest",
+          "value": "0.1em",
+          "cssVar": "var(--oks-letter-spacings-widest)"
+        }
+      ],
+      "tokenFunctionExamples": [
+        "token('letterSpacings.tighter')",
+        "token.var('letterSpacings.tighter')"
+      ],
+      "functionExamples": [
+        "css({ letterSpacing: 'tighter' })"
+      ],
+      "jsxExamples": [
+        "<Box letterSpacing=\"tighter\" />"
+      ]
+    },
+    {
+      "type": "lineHeights",
+      "values": [
+        {
+          "name": "none",
+          "value": "1",
+          "cssVar": "var(--oks-line-heights-none)"
+        },
+        {
+          "name": "tight",
+          "value": "calc(1em + 0.25rem)",
+          "cssVar": "var(--oks-line-heights-tight)"
+        },
+        {
+          "name": "default",
+          "value": "calc(1em + 0.5rem)",
+          "cssVar": "var(--oks-line-heights-default)"
+        },
+        {
+          "name": "loose",
+          "value": "calc(1em + 0.75rem)",
+          "cssVar": "var(--oks-line-heights-loose)"
+        }
+      ],
+      "tokenFunctionExamples": [
+        "token('lineHeights.none')",
+        "token.var('lineHeights.none')"
+      ],
+      "functionExamples": [
+        "css({ lineHeight: 'none' })"
+      ],
+      "jsxExamples": [
+        "<Box lineHeight=\"none\" />"
+      ]
+    },
+    {
+      "type": "numericSizes",
+      "values": [
+        {
+          "name": "0",
+          "value": "0",
+          "cssVar": "var(--oks-numeric-sizes-0)"
+        },
+        {
+          "name": "1",
+          "value": "0.0625rem",
+          "cssVar": "var(--oks-numeric-sizes-1)"
+        },
+        {
+          "name": "2",
+          "value": "0.125rem",
+          "cssVar": "var(--oks-numeric-sizes-2)"
+        },
+        {
+          "name": "3",
+          "value": "0.1875rem",
+          "cssVar": "var(--oks-numeric-sizes-3)"
+        },
+        {
+          "name": "4",
+          "value": "0.25rem",
+          "cssVar": "var(--oks-numeric-sizes-4)"
+        },
+        {
+          "name": "5",
+          "value": "0.3125rem",
+          "cssVar": "var(--oks-numeric-sizes-5)"
+        },
+        {
+          "name": "6",
+          "value": "0.375rem",
+          "cssVar": "var(--oks-numeric-sizes-6)"
+        },
+        {
+          "name": "7",
+          "value": "0.4375rem",
+          "cssVar": "var(--oks-numeric-sizes-7)"
+        },
+        {
+          "name": "8",
+          "value": "0.5rem",
+          "cssVar": "var(--oks-numeric-sizes-8)"
+        },
+        {
+          "name": "9",
+          "value": "0.5625rem",
+          "cssVar": "var(--oks-numeric-sizes-9)"
+        },
+        {
+          "name": "10",
+          "value": "0.625rem",
+          "cssVar": "var(--oks-numeric-sizes-10)"
+        },
+        {
+          "name": "12",
+          "value": "0.75rem",
+          "cssVar": "var(--oks-numeric-sizes-12)"
+        },
+        {
+          "name": "14",
+          "value": "0.875rem",
+          "cssVar": "var(--oks-numeric-sizes-14)"
+        },
+        {
+          "name": "16",
+          "value": "1rem",
+          "cssVar": "var(--oks-numeric-sizes-16)"
+        },
+        {
+          "name": "20",
+          "value": "1.25rem",
+          "cssVar": "var(--oks-numeric-sizes-20)"
+        },
+        {
+          "name": "22",
+          "value": "1.375rem",
+          "cssVar": "var(--oks-numeric-sizes-22)"
+        },
+        {
+          "name": "24",
+          "value": "1.5rem",
+          "cssVar": "var(--oks-numeric-sizes-24)"
+        },
+        {
+          "name": "32",
+          "value": "2rem",
+          "cssVar": "var(--oks-numeric-sizes-32)"
+        },
+        {
+          "name": "40",
+          "value": "2.5rem",
+          "cssVar": "var(--oks-numeric-sizes-40)"
+        },
+        {
+          "name": "48",
+          "value": "3rem",
+          "cssVar": "var(--oks-numeric-sizes-48)"
+        },
+        {
+          "name": "56",
+          "value": "3.5rem",
+          "cssVar": "var(--oks-numeric-sizes-56)"
+        },
+        {
+          "name": "64",
+          "value": "4rem",
+          "cssVar": "var(--oks-numeric-sizes-64)"
+        },
+        {
+          "name": "72",
+          "value": "4.5rem",
+          "cssVar": "var(--oks-numeric-sizes-72)"
+        },
+        {
+          "name": "80",
+          "value": "5rem",
+          "cssVar": "var(--oks-numeric-sizes-80)"
+        },
+        {
+          "name": "88",
+          "value": "5.5rem",
+          "cssVar": "var(--oks-numeric-sizes-88)"
+        },
+        {
+          "name": "96",
+          "value": "6rem",
+          "cssVar": "var(--oks-numeric-sizes-96)"
+        },
+        {
+          "name": "104",
+          "value": "6.5rem",
+          "cssVar": "var(--oks-numeric-sizes-104)"
+        },
+        {
+          "name": "112",
+          "value": "7rem",
+          "cssVar": "var(--oks-numeric-sizes-112)"
+        },
+        {
+          "name": "120",
+          "value": "7.5rem",
+          "cssVar": "var(--oks-numeric-sizes-120)"
+        },
+        {
+          "name": "128",
+          "value": "8rem",
+          "cssVar": "var(--oks-numeric-sizes-128)"
+        },
+        {
+          "name": "136",
+          "value": "8.5rem",
+          "cssVar": "var(--oks-numeric-sizes-136)"
+        },
+        {
+          "name": "144",
+          "value": "9rem",
+          "cssVar": "var(--oks-numeric-sizes-144)"
+        },
+        {
+          "name": "152",
+          "value": "9.5rem",
+          "cssVar": "var(--oks-numeric-sizes-152)"
+        },
+        {
+          "name": "160",
+          "value": "10rem",
+          "cssVar": "var(--oks-numeric-sizes-160)"
+        },
+        {
+          "name": "168",
+          "value": "10.5rem",
+          "cssVar": "var(--oks-numeric-sizes-168)"
+        },
+        {
+          "name": "176",
+          "value": "11rem",
+          "cssVar": "var(--oks-numeric-sizes-176)"
+        },
+        {
+          "name": "184",
+          "value": "11.5rem",
+          "cssVar": "var(--oks-numeric-sizes-184)"
+        },
+        {
+          "name": "192",
+          "value": "12rem",
+          "cssVar": "var(--oks-numeric-sizes-192)"
+        },
+        {
+          "name": "200",
+          "value": "12.5rem",
+          "cssVar": "var(--oks-numeric-sizes-200)"
+        },
+        {
+          "name": "208",
+          "value": "13rem",
+          "cssVar": "var(--oks-numeric-sizes-208)"
+        },
+        {
+          "name": "216",
+          "value": "13.5rem",
+          "cssVar": "var(--oks-numeric-sizes-216)"
+        },
+        {
+          "name": "224",
+          "value": "14rem",
+          "cssVar": "var(--oks-numeric-sizes-224)"
+        },
+        {
+          "name": "232",
+          "value": "14.5rem",
+          "cssVar": "var(--oks-numeric-sizes-232)"
+        },
+        {
+          "name": "240",
+          "value": "15rem",
+          "cssVar": "var(--oks-numeric-sizes-240)"
+        },
+        {
+          "name": "248",
+          "value": "15.5rem",
+          "cssVar": "var(--oks-numeric-sizes-248)"
+        },
+        {
+          "name": "256",
+          "value": "16rem",
+          "cssVar": "var(--oks-numeric-sizes-256)"
+        },
+        {
+          "name": "264",
+          "value": "16.5rem",
+          "cssVar": "var(--oks-numeric-sizes-264)"
+        },
+        {
+          "name": "272",
+          "value": "17rem",
+          "cssVar": "var(--oks-numeric-sizes-272)"
+        },
+        {
+          "name": "280",
+          "value": "17.5rem",
+          "cssVar": "var(--oks-numeric-sizes-280)"
+        }
+      ],
+      "tokenFunctionExamples": [
+        "token('numericSizes.0')",
+        "token.var('numericSizes.0')"
+      ],
+      "functionExamples": [
+        "css({ color: '0' })"
+      ],
+      "jsxExamples": [
+        "<Box color=\"0\" />"
+      ]
+    },
+    {
+      "type": "radii",
+      "values": [
+        {
+          "name": "0",
+          "value": "var(--oks-sizes-0)",
+          "cssVar": "var(--oks-radii-0)"
+        },
+        {
+          "name": "1",
+          "value": "var(--oks-sizes-1)",
+          "cssVar": "var(--oks-radii-1)"
+        },
+        {
+          "name": "2",
+          "value": "var(--oks-sizes-2)",
+          "cssVar": "var(--oks-radii-2)"
+        },
+        {
+          "name": "3",
+          "value": "var(--oks-sizes-3)",
+          "cssVar": "var(--oks-radii-3)"
+        },
+        {
+          "name": "4",
+          "value": "var(--oks-sizes-4)",
+          "cssVar": "var(--oks-radii-4)"
+        },
+        {
+          "name": "8",
+          "value": "var(--oks-sizes-8)",
+          "cssVar": "var(--oks-radii-8)"
+        },
+        {
+          "name": "16",
+          "value": "var(--oks-sizes-16)",
+          "cssVar": "var(--oks-radii-16)"
+        },
+        {
+          "name": "100",
+          "value": "100%",
+          "cssVar": "var(--oks-radii-100)"
+        },
+        {
+          "name": "999",
+          "value": "999px",
+          "cssVar": "var(--oks-radii-999)"
+        }
+      ],
+      "tokenFunctionExamples": [
+        "token('radii.0')",
+        "token.var('radii.0')"
+      ],
+      "functionExamples": [
+        "css({ borderRadius: '0' })"
+      ],
+      "jsxExamples": [
+        "<Box borderRadius=\"0\" />"
+      ]
+    },
+    {
+      "type": "shadows",
+      "values": [
+        {
+          "name": "zeroShadow",
+          "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) rgba(0, 0, 0, 0), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) rgba(0, 0, 0, 0)",
+          "cssVar": "var(--oks-shadows-zero-shadow)"
+        },
+        {
+          "name": "raisedLight",
+          "value": "var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-sizes-1) rgba(30, 31, 33, 0.25), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) rgba(30, 31, 33, 0.31)",
+          "cssVar": "var(--oks-shadows-raised-light)"
+        },
+        {
+          "name": "raisedDark",
+          "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) rgba(0, 0, 0, 0), var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-sizes-1) rgba(1, 4, 4, 0.5), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) rgba(1, 4, 4, 0.5)",
+          "cssVar": "var(--oks-shadows-raised-dark)"
+        },
+        {
+          "name": "elevatedLight",
+          "value": "var(--oks-sizes-0) var(--oks-sizes-4) var(--oks-sizes-7) rgba(30, 31, 33, 0.2), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) rgba(30, 31, 33, 0.31)",
+          "cssVar": "var(--oks-shadows-elevated-light)"
+        },
+        {
+          "name": "elevatedDark",
+          "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) rgba(95, 95, 95, 0.06), var(--oks-sizes-0) var(--oks-sizes-4) var(--oks-sizes-7) rgba(1, 4, 4, 0.43), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) rgba(1, 4, 4, 0.5)",
+          "cssVar": "var(--oks-shadows-elevated-dark)"
+        },
+        {
+          "name": "overlayLight",
+          "value": "var(--oks-sizes-0) var(--oks-sizes-8) var(--oks-sizes-12) rgba(30, 31, 33, 0.15), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) rgba(30, 31, 33, 0.31)",
+          "cssVar": "var(--oks-shadows-overlay-light)"
+        },
+        {
+          "name": "overlayDark",
+          "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) rgba(189, 189, 189, 0.12), var(--oks-sizes-0) var(--oks-sizes-8) var(--oks-sizes-12) rgba(1, 4, 4, 0.36), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) rgba(1, 4, 4, 0.5)",
+          "cssVar": "var(--oks-shadows-overlay-dark)"
+        },
+        {
+          "name": "overflowLight",
+          "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-8) rgba(30, 31, 33, 0.16), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) rgba(30, 31, 33, 0.12)",
+          "cssVar": "var(--oks-shadows-overflow-light)"
+        },
+        {
+          "name": "overflowDark",
+          "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-12) rgba(1, 4, 4, 0.56), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) rgba(1, 4, 4, 0.5)",
+          "cssVar": "var(--oks-shadows-overflow-dark)"
+        },
+        {
+          "name": "lowLight",
+          "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-2) rgba(30, 30, 30, 0.2), var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-sizes-1) rgba(30, 30, 30, 0.2), var(--oks-sizes-0) var(--oks-sizes-2) var(--oks-sizes-3) rgba(30, 30, 30, 0.2)",
+          "cssVar": "var(--oks-shadows-low-light)"
+        },
+        {
+          "name": "lowDark",
+          "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-2) rgba(0, 0, 0, 0.4), var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-sizes-1) rgba(0, 0, 0, 0.4), var(--oks-sizes-0) var(--oks-sizes-2) var(--oks-sizes-3) rgba(0, 0, 0, 0.4)",
+          "cssVar": "var(--oks-shadows-low-dark)"
+        },
+        {
+          "name": "mediumLight",
+          "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-2) rgba(30, 30, 30, 0.2), var(--oks-sizes-0) var(--oks-sizes-2) var(--oks-sizes-2) rgba(30, 30, 30, 0.2), var(--oks-sizes-0) var(--oks-sizes-4) var(--oks-sizes-4) rgba(30, 30, 30, 0.2), var(--oks-sizes-0) var(--oks-sizes-8) var(--oks-sizes-8) rgba(30, 30, 30, 0.2)",
+          "cssVar": "var(--oks-shadows-medium-light)"
+        },
+        {
+          "name": "mediumDark",
+          "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-2) rgba(0, 0, 0, 0.4), var(--oks-sizes-0) var(--oks-sizes-2) var(--oks-sizes-2) rgba(0, 0, 0, 0.4), var(--oks-sizes-0) var(--oks-sizes-4) var(--oks-sizes-4) rgba(0, 0, 0, 0.4), var(--oks-sizes-0) var(--oks-sizes-8) var(--oks-sizes-8) rgba(0, 0, 0, 0.4)",
+          "cssVar": "var(--oks-shadows-medium-dark)"
+        },
+        {
+          "name": "highLight",
+          "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-2) rgba(30, 30, 30, 0.2), var(--oks-sizes-0) var(--oks-sizes-2) var(--oks-sizes-4) rgba(30, 30, 30, 0.2), var(--oks-sizes-0) var(--oks-sizes-6) var(--oks-sizes-8) var(--oks-sizes-1) rgba(30, 30, 30, 0.2), var(--oks-sizes-0) var(--oks-sizes-14) var(--oks-sizes-16) var(--oks-sizes-2) rgba(30, 30, 30, 0.2)",
+          "cssVar": "var(--oks-shadows-high-light)"
+        },
+        {
+          "name": "highDark",
+          "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-2) rgba(0, 0, 0, 0.4), var(--oks-sizes-0) var(--oks-sizes-2) var(--oks-sizes-4) rgba(0, 0, 0, 0.4), var(--oks-sizes-0) var(--oks-sizes-6) var(--oks-sizes-8) var(--oks-sizes-1) rgba(0, 0, 0, 0.4), var(--oks-sizes-0) var(--oks-sizes-14) var(--oks-sizes-16) var(--oks-sizes-2) rgba(0, 0, 0, 0.4)",
+          "cssVar": "var(--oks-shadows-high-dark)"
+        },
+        {
+          "name": "insetLight",
+          "value": "inset var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-2) rgba(30, 30, 30, 0.2), inset var(--oks-sizes-0) var(--oks-sizes-2) var(--oks-sizes-1) rgba(30, 30, 30, 0.2), inset var(--oks-sizes-0) var(--oks-sizes-3) var(--oks-sizes-2) rgba(30, 30, 30, 0.2)",
+          "cssVar": "var(--oks-shadows-inset-light)"
+        },
+        {
+          "name": "insetDark",
+          "value": "inset var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-2) rgba(0, 0, 0, 0.4), inset var(--oks-sizes-0) var(--oks-sizes-2) var(--oks-sizes-1) rgba(0, 0, 0, 0.4), inset var(--oks-sizes-0) var(--oks-sizes-3) var(--oks-sizes-2) rgba(0, 0, 0, 0.4)",
+          "cssVar": "var(--oks-shadows-inset-dark)"
+        }
+      ],
+      "tokenFunctionExamples": [
+        "token('shadows.zeroShadow')",
+        "token.var('shadows.zeroShadow')"
+      ],
+      "functionExamples": [
+        "css({ boxShadow: 'zeroShadow' })"
+      ],
+      "jsxExamples": [
+        "<Box boxShadow=\"zeroShadow\" />"
+      ]
+    },
+    {
+      "type": "sizes",
+      "values": [
+        {
+          "name": "0",
+          "value": "0",
+          "cssVar": "var(--oks-sizes-0)"
+        },
+        {
+          "name": "1",
+          "value": "0.0625rem",
+          "cssVar": "var(--oks-sizes-1)"
+        },
+        {
+          "name": "2",
+          "value": "0.125rem",
+          "cssVar": "var(--oks-sizes-2)"
+        },
+        {
+          "name": "3",
+          "value": "0.1875rem",
+          "cssVar": "var(--oks-sizes-3)"
+        },
+        {
+          "name": "4",
+          "value": "0.25rem",
+          "cssVar": "var(--oks-sizes-4)"
+        },
+        {
+          "name": "5",
+          "value": "0.3125rem",
+          "cssVar": "var(--oks-sizes-5)"
+        },
+        {
+          "name": "6",
+          "value": "0.375rem",
+          "cssVar": "var(--oks-sizes-6)"
+        },
+        {
+          "name": "7",
+          "value": "0.4375rem",
+          "cssVar": "var(--oks-sizes-7)"
+        },
+        {
+          "name": "8",
+          "value": "0.5rem",
+          "cssVar": "var(--oks-sizes-8)"
+        },
+        {
+          "name": "9",
+          "value": "0.5625rem",
+          "cssVar": "var(--oks-sizes-9)"
+        },
+        {
+          "name": "10",
+          "value": "0.625rem",
+          "cssVar": "var(--oks-sizes-10)"
+        },
+        {
+          "name": "12",
+          "value": "0.75rem",
+          "cssVar": "var(--oks-sizes-12)"
+        },
+        {
+          "name": "14",
+          "value": "0.875rem",
+          "cssVar": "var(--oks-sizes-14)"
+        },
+        {
+          "name": "16",
+          "value": "1rem",
+          "cssVar": "var(--oks-sizes-16)"
+        },
+        {
+          "name": "20",
+          "value": "1.25rem",
+          "cssVar": "var(--oks-sizes-20)"
+        },
+        {
+          "name": "22",
+          "value": "1.375rem",
+          "cssVar": "var(--oks-sizes-22)"
+        },
+        {
+          "name": "24",
+          "value": "1.5rem",
+          "cssVar": "var(--oks-sizes-24)"
+        },
+        {
+          "name": "32",
+          "value": "2rem",
+          "cssVar": "var(--oks-sizes-32)"
+        },
+        {
+          "name": "40",
+          "value": "2.5rem",
+          "cssVar": "var(--oks-sizes-40)"
+        },
+        {
+          "name": "48",
+          "value": "3rem",
+          "cssVar": "var(--oks-sizes-48)"
+        },
+        {
+          "name": "56",
+          "value": "3.5rem",
+          "cssVar": "var(--oks-sizes-56)"
+        },
+        {
+          "name": "64",
+          "value": "4rem",
+          "cssVar": "var(--oks-sizes-64)"
+        },
+        {
+          "name": "72",
+          "value": "4.5rem",
+          "cssVar": "var(--oks-sizes-72)"
+        },
+        {
+          "name": "80",
+          "value": "5rem",
+          "cssVar": "var(--oks-sizes-80)"
+        },
+        {
+          "name": "88",
+          "value": "5.5rem",
+          "cssVar": "var(--oks-sizes-88)"
+        },
+        {
+          "name": "96",
+          "value": "6rem",
+          "cssVar": "var(--oks-sizes-96)"
+        },
+        {
+          "name": "104",
+          "value": "6.5rem",
+          "cssVar": "var(--oks-sizes-104)"
+        },
+        {
+          "name": "112",
+          "value": "7rem",
+          "cssVar": "var(--oks-sizes-112)"
+        },
+        {
+          "name": "120",
+          "value": "7.5rem",
+          "cssVar": "var(--oks-sizes-120)"
+        },
+        {
+          "name": "128",
+          "value": "8rem",
+          "cssVar": "var(--oks-sizes-128)"
+        },
+        {
+          "name": "136",
+          "value": "8.5rem",
+          "cssVar": "var(--oks-sizes-136)"
+        },
+        {
+          "name": "144",
+          "value": "9rem",
+          "cssVar": "var(--oks-sizes-144)"
+        },
+        {
+          "name": "152",
+          "value": "9.5rem",
+          "cssVar": "var(--oks-sizes-152)"
+        },
+        {
+          "name": "160",
+          "value": "10rem",
+          "cssVar": "var(--oks-sizes-160)"
+        },
+        {
+          "name": "168",
+          "value": "10.5rem",
+          "cssVar": "var(--oks-sizes-168)"
+        },
+        {
+          "name": "176",
+          "value": "11rem",
+          "cssVar": "var(--oks-sizes-176)"
+        },
+        {
+          "name": "184",
+          "value": "11.5rem",
+          "cssVar": "var(--oks-sizes-184)"
+        },
+        {
+          "name": "192",
+          "value": "12rem",
+          "cssVar": "var(--oks-sizes-192)"
+        },
+        {
+          "name": "200",
+          "value": "12.5rem",
+          "cssVar": "var(--oks-sizes-200)"
+        },
+        {
+          "name": "208",
+          "value": "13rem",
+          "cssVar": "var(--oks-sizes-208)"
+        },
+        {
+          "name": "216",
+          "value": "13.5rem",
+          "cssVar": "var(--oks-sizes-216)"
+        },
+        {
+          "name": "224",
+          "value": "14rem",
+          "cssVar": "var(--oks-sizes-224)"
+        },
+        {
+          "name": "232",
+          "value": "14.5rem",
+          "cssVar": "var(--oks-sizes-232)"
+        },
+        {
+          "name": "240",
+          "value": "15rem",
+          "cssVar": "var(--oks-sizes-240)"
+        },
+        {
+          "name": "248",
+          "value": "15.5rem",
+          "cssVar": "var(--oks-sizes-248)"
+        },
+        {
+          "name": "256",
+          "value": "16rem",
+          "cssVar": "var(--oks-sizes-256)"
+        },
+        {
+          "name": "264",
+          "value": "16.5rem",
+          "cssVar": "var(--oks-sizes-264)"
+        },
+        {
+          "name": "272",
+          "value": "17rem",
+          "cssVar": "var(--oks-sizes-272)"
+        },
+        {
+          "name": "280",
+          "value": "17.5rem",
+          "cssVar": "var(--oks-sizes-280)"
+        },
+        {
+          "name": "full",
+          "value": "100%",
+          "cssVar": "var(--oks-sizes-full)"
+        },
+        {
+          "name": "half",
+          "value": "50%",
+          "cssVar": "var(--oks-sizes-half)"
+        },
+        {
+          "name": "min",
+          "value": "min-content",
+          "cssVar": "var(--oks-sizes-min)"
+        },
+        {
+          "name": "max",
+          "value": "max-content",
+          "cssVar": "var(--oks-sizes-max)"
+        },
+        {
+          "name": "fit",
+          "value": "fit-content",
+          "cssVar": "var(--oks-sizes-fit)"
+        },
+        {
+          "name": "prose",
+          "value": "65ch",
+          "cssVar": "var(--oks-sizes-prose)"
+        },
+        {
+          "name": "auto",
+          "value": "auto",
+          "cssVar": "var(--oks-sizes-auto)"
+        },
+        {
+          "name": "2xs",
+          "value": "16rem",
+          "cssVar": "var(--oks-sizes-2xs)"
+        },
+        {
+          "name": "xs",
+          "value": "20rem",
+          "cssVar": "var(--oks-sizes-xs)"
+        },
+        {
+          "name": "sm",
+          "value": "24rem",
+          "cssVar": "var(--oks-sizes-sm)"
+        },
+        {
+          "name": "md",
+          "value": "28rem",
+          "cssVar": "var(--oks-sizes-md)"
+        },
+        {
+          "name": "lg",
+          "value": "32rem",
+          "cssVar": "var(--oks-sizes-lg)"
+        },
+        {
+          "name": "xl",
+          "value": "36rem",
+          "cssVar": "var(--oks-sizes-xl)"
+        },
+        {
+          "name": "2xl",
+          "value": "42rem",
+          "cssVar": "var(--oks-sizes-2xl)"
+        },
+        {
+          "name": "3xl",
+          "value": "48rem",
+          "cssVar": "var(--oks-sizes-3xl)"
+        },
+        {
+          "name": "4xl",
+          "value": "56rem",
+          "cssVar": "var(--oks-sizes-4xl)"
+        },
+        {
+          "name": "5xl",
+          "value": "64rem",
+          "cssVar": "var(--oks-sizes-5xl)"
+        },
+        {
+          "name": "6xl",
+          "value": "72rem",
+          "cssVar": "var(--oks-sizes-6xl)"
+        },
+        {
+          "name": "7xl",
+          "value": "80rem",
+          "cssVar": "var(--oks-sizes-7xl)"
+        },
+        {
+          "name": "8xl",
+          "value": "90rem",
+          "cssVar": "var(--oks-sizes-8xl)"
+        },
+        {
+          "name": "breakpoint-xs",
+          "value": "480px",
+          "cssVar": "var(--oks-sizes-breakpoint-xs)"
+        },
+        {
+          "name": "breakpoint-sm",
+          "value": "640px",
+          "cssVar": "var(--oks-sizes-breakpoint-sm)"
+        },
+        {
+          "name": "breakpoint-md",
+          "value": "768px",
+          "cssVar": "var(--oks-sizes-breakpoint-md)"
+        },
+        {
+          "name": "breakpoint-lg",
+          "value": "1024px",
+          "cssVar": "var(--oks-sizes-breakpoint-lg)"
+        },
+        {
+          "name": "breakpoint-xl",
+          "value": "1280px",
+          "cssVar": "var(--oks-sizes-breakpoint-xl)"
+        },
+        {
+          "name": "breakpoint-2xl",
+          "value": "1536px",
+          "cssVar": "var(--oks-sizes-breakpoint-2xl)"
+        }
+      ],
+      "tokenFunctionExamples": [
+        "token('sizes.0')",
+        "token.var('sizes.0')"
+      ],
+      "functionExamples": [
+        "css({ width: '0' })"
+      ],
+      "jsxExamples": [
+        "<Box width=\"0\" />"
+      ]
+    },
+    {
+      "type": "spacing",
+      "values": [
+        {
+          "name": "0",
+          "value": "0",
+          "cssVar": "var(--oks-spacing-0)"
+        },
+        {
+          "name": "1",
+          "value": "0.0625rem",
+          "cssVar": "var(--oks-spacing-1)"
+        },
+        {
+          "name": "2",
+          "value": "0.125rem",
+          "cssVar": "var(--oks-spacing-2)"
+        },
+        {
+          "name": "3",
+          "value": "0.1875rem",
+          "cssVar": "var(--oks-spacing-3)"
+        },
+        {
+          "name": "4",
+          "value": "0.25rem",
+          "cssVar": "var(--oks-spacing-4)"
+        },
+        {
+          "name": "5",
+          "value": "0.3125rem",
+          "cssVar": "var(--oks-spacing-5)"
+        },
+        {
+          "name": "6",
+          "value": "0.375rem",
+          "cssVar": "var(--oks-spacing-6)"
+        },
+        {
+          "name": "7",
+          "value": "0.4375rem",
+          "cssVar": "var(--oks-spacing-7)"
+        },
+        {
+          "name": "8",
+          "value": "0.5rem",
+          "cssVar": "var(--oks-spacing-8)"
+        },
+        {
+          "name": "9",
+          "value": "0.5625rem",
+          "cssVar": "var(--oks-spacing-9)"
+        },
+        {
+          "name": "10",
+          "value": "0.625rem",
+          "cssVar": "var(--oks-spacing-10)"
+        },
+        {
+          "name": "12",
+          "value": "0.75rem",
+          "cssVar": "var(--oks-spacing-12)"
+        },
+        {
+          "name": "14",
+          "value": "0.875rem",
+          "cssVar": "var(--oks-spacing-14)"
+        },
+        {
+          "name": "16",
+          "value": "1rem",
+          "cssVar": "var(--oks-spacing-16)"
+        },
+        {
+          "name": "20",
+          "value": "1.25rem",
+          "cssVar": "var(--oks-spacing-20)"
+        },
+        {
+          "name": "22",
+          "value": "1.375rem",
+          "cssVar": "var(--oks-spacing-22)"
+        },
+        {
+          "name": "24",
+          "value": "1.5rem",
+          "cssVar": "var(--oks-spacing-24)"
+        },
+        {
+          "name": "32",
+          "value": "2rem",
+          "cssVar": "var(--oks-spacing-32)"
+        },
+        {
+          "name": "40",
+          "value": "2.5rem",
+          "cssVar": "var(--oks-spacing-40)"
+        },
+        {
+          "name": "48",
+          "value": "3rem",
+          "cssVar": "var(--oks-spacing-48)"
+        },
+        {
+          "name": "56",
+          "value": "3.5rem",
+          "cssVar": "var(--oks-spacing-56)"
+        },
+        {
+          "name": "64",
+          "value": "4rem",
+          "cssVar": "var(--oks-spacing-64)"
+        },
+        {
+          "name": "72",
+          "value": "4.5rem",
+          "cssVar": "var(--oks-spacing-72)"
+        },
+        {
+          "name": "80",
+          "value": "5rem",
+          "cssVar": "var(--oks-spacing-80)"
+        },
+        {
+          "name": "88",
+          "value": "5.5rem",
+          "cssVar": "var(--oks-spacing-88)"
+        },
+        {
+          "name": "96",
+          "value": "6rem",
+          "cssVar": "var(--oks-spacing-96)"
+        },
+        {
+          "name": "104",
+          "value": "6.5rem",
+          "cssVar": "var(--oks-spacing-104)"
+        },
+        {
+          "name": "112",
+          "value": "7rem",
+          "cssVar": "var(--oks-spacing-112)"
+        },
+        {
+          "name": "120",
+          "value": "7.5rem",
+          "cssVar": "var(--oks-spacing-120)"
+        },
+        {
+          "name": "128",
+          "value": "8rem",
+          "cssVar": "var(--oks-spacing-128)"
+        },
+        {
+          "name": "136",
+          "value": "8.5rem",
+          "cssVar": "var(--oks-spacing-136)"
+        },
+        {
+          "name": "144",
+          "value": "9rem",
+          "cssVar": "var(--oks-spacing-144)"
+        },
+        {
+          "name": "152",
+          "value": "9.5rem",
+          "cssVar": "var(--oks-spacing-152)"
+        },
+        {
+          "name": "160",
+          "value": "10rem",
+          "cssVar": "var(--oks-spacing-160)"
+        },
+        {
+          "name": "168",
+          "value": "10.5rem",
+          "cssVar": "var(--oks-spacing-168)"
+        },
+        {
+          "name": "176",
+          "value": "11rem",
+          "cssVar": "var(--oks-spacing-176)"
+        },
+        {
+          "name": "184",
+          "value": "11.5rem",
+          "cssVar": "var(--oks-spacing-184)"
+        },
+        {
+          "name": "192",
+          "value": "12rem",
+          "cssVar": "var(--oks-spacing-192)"
+        },
+        {
+          "name": "200",
+          "value": "12.5rem",
+          "cssVar": "var(--oks-spacing-200)"
+        },
+        {
+          "name": "208",
+          "value": "13rem",
+          "cssVar": "var(--oks-spacing-208)"
+        },
+        {
+          "name": "216",
+          "value": "13.5rem",
+          "cssVar": "var(--oks-spacing-216)"
+        },
+        {
+          "name": "224",
+          "value": "14rem",
+          "cssVar": "var(--oks-spacing-224)"
+        },
+        {
+          "name": "232",
+          "value": "14.5rem",
+          "cssVar": "var(--oks-spacing-232)"
+        },
+        {
+          "name": "240",
+          "value": "15rem",
+          "cssVar": "var(--oks-spacing-240)"
+        },
+        {
+          "name": "248",
+          "value": "15.5rem",
+          "cssVar": "var(--oks-spacing-248)"
+        },
+        {
+          "name": "256",
+          "value": "16rem",
+          "cssVar": "var(--oks-spacing-256)"
+        },
+        {
+          "name": "264",
+          "value": "16.5rem",
+          "cssVar": "var(--oks-spacing-264)"
+        },
+        {
+          "name": "272",
+          "value": "17rem",
+          "cssVar": "var(--oks-spacing-272)"
+        },
+        {
+          "name": "280",
+          "value": "17.5rem",
+          "cssVar": "var(--oks-spacing-280)"
+        },
+        {
+          "name": "full",
+          "value": "100%",
+          "cssVar": "var(--oks-spacing-full)"
+        },
+        {
+          "name": "half",
+          "value": "50%",
+          "cssVar": "var(--oks-spacing-half)"
+        },
+        {
+          "name": "min",
+          "value": "min-content",
+          "cssVar": "var(--oks-spacing-min)"
+        },
+        {
+          "name": "max",
+          "value": "max-content",
+          "cssVar": "var(--oks-spacing-max)"
+        },
+        {
+          "name": "fit",
+          "value": "fit-content",
+          "cssVar": "var(--oks-spacing-fit)"
+        },
+        {
+          "name": "prose",
+          "value": "65ch",
+          "cssVar": "var(--oks-spacing-prose)"
+        },
+        {
+          "name": "auto",
+          "value": "auto",
+          "cssVar": "var(--oks-spacing-auto)"
+        }
+      ],
+      "tokenFunctionExamples": [
+        "token('spacing.0')",
+        "token.var('spacing.0')"
+      ],
+      "functionExamples": [
+        "css({ padding: '0' })"
+      ],
+      "jsxExamples": [
+        "<Box padding=\"0\" />"
+      ]
+    },
+    {
+      "type": "utilitySizes",
+      "values": [
+        {
+          "name": "full",
+          "value": "100%",
+          "cssVar": "var(--oks-utility-sizes-full)"
+        },
+        {
+          "name": "half",
+          "value": "50%",
+          "cssVar": "var(--oks-utility-sizes-half)"
+        },
+        {
+          "name": "min",
+          "value": "min-content",
+          "cssVar": "var(--oks-utility-sizes-min)"
+        },
+        {
+          "name": "max",
+          "value": "max-content",
+          "cssVar": "var(--oks-utility-sizes-max)"
+        },
+        {
+          "name": "fit",
+          "value": "fit-content",
+          "cssVar": "var(--oks-utility-sizes-fit)"
+        },
+        {
+          "name": "prose",
+          "value": "65ch",
+          "cssVar": "var(--oks-utility-sizes-prose)"
+        },
+        {
+          "name": "auto",
+          "value": "auto",
+          "cssVar": "var(--oks-utility-sizes-auto)"
+        }
+      ],
+      "tokenFunctionExamples": [
+        "token('utilitySizes.full')",
+        "token.var('utilitySizes.full')"
+      ],
+      "functionExamples": [
+        "css({ color: 'full' })"
+      ],
+      "jsxExamples": [
+        "<Box color=\"full\" />"
+      ]
+    },
+    {
+      "type": "breakpoints",
+      "values": [
+        {
+          "name": "xs",
+          "value": "480px",
+          "cssVar": "var(--oks-breakpoints-xs)"
+        },
+        {
+          "name": "sm",
+          "value": "640px",
+          "cssVar": "var(--oks-breakpoints-sm)"
+        },
+        {
+          "name": "md",
+          "value": "768px",
+          "cssVar": "var(--oks-breakpoints-md)"
+        },
+        {
+          "name": "lg",
+          "value": "1024px",
+          "cssVar": "var(--oks-breakpoints-lg)"
+        },
+        {
+          "name": "xl",
+          "value": "1280px",
+          "cssVar": "var(--oks-breakpoints-xl)"
+        },
+        {
+          "name": "2xl",
+          "value": "1536px",
+          "cssVar": "var(--oks-breakpoints-2xl)"
+        }
+      ],
+      "tokenFunctionExamples": [
+        "token('breakpoints.xs')",
+        "token.var('breakpoints.xs')"
+      ],
+      "functionExamples": [
+        "css({ color: 'xs' })"
+      ],
+      "jsxExamples": [
+        "<Box color=\"xs\" />"
+      ]
+    }
+  ]
+}