@okshaun/components 0.5.8 → 1.0.1

package/dist/specs/semantic-tokens.json

@@ -0,0 +1,2837 @@
+{
+  "type": "semantic-tokens",
+  "data": [
+    {
+      "type": "colors",
+      "values": [
+        {
+          "name": "brand.10",
+          "values": [
+            {
+              "value": "{colors.gray.10}",
+              "condition": "base"
+            }
+          ],
+          "cssVar": "var(--oks-colors-brand-10)"
+        },
+        {
+          "name": "brand.20",
+          "values": [
+            {
+              "value": "{colors.gray.20}",
+              "condition": "base"
+            }
+          ],
+          "cssVar": "var(--oks-colors-brand-20)"
+        },
+        {
+          "name": "brand.30",
+          "values": [
+            {
+              "value": "{colors.gray.30}",
+              "condition": "base"
+            }
+          ],
+          "cssVar": "var(--oks-colors-brand-30)"
+        },
+        {
+          "name": "brand.40",
+          "values": [
+            {
+              "value": "{colors.gray.40}",
+              "condition": "base"
+            }
+          ],
+          "cssVar": "var(--oks-colors-brand-40)"
+        },
+        {
+          "name": "brand.50",
+          "values": [
+            {
+              "value": "{colors.gray.50}",
+              "condition": "base"
+            }
+          ],
+          "cssVar": "var(--oks-colors-brand-50)"
+        },
+        {
+          "name": "brand.60",
+          "values": [
+            {
+              "value": "{colors.gray.60}",
+              "condition": "base"
+            }
+          ],
+          "cssVar": "var(--oks-colors-brand-60)"
+        },
+        {
+          "name": "brand.70",
+          "values": [
+            {
+              "value": "{colors.gray.70}",
+              "condition": "base"
+            }
+          ],
+          "cssVar": "var(--oks-colors-brand-70)"
+        },
+        {
+          "name": "brand.80",
+          "values": [
+            {
+              "value": "{colors.gray.80}",
+              "condition": "base"
+            }
+          ],
+          "cssVar": "var(--oks-colors-brand-80)"
+        },
+        {
+          "name": "brand.90",
+          "values": [
+            {
+              "value": "{colors.gray.90}",
+              "condition": "base"
+            }
+          ],
+          "cssVar": "var(--oks-colors-brand-90)"
+        },
+        {
+          "name": "brand.100",
+          "values": [
+            {
+              "value": "{colors.gray.100}",
+              "condition": "base"
+            }
+          ],
+          "cssVar": "var(--oks-colors-brand-100)"
+        },
+        {
+          "name": "bg.disabled",
+          "values": [
+            {
+              "value": "{colors.neutral.10}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutral.10}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-disabled)"
+        },
+        {
+          "name": "bg.neutral",
+          "values": [
+            {
+              "value": "{colors.neutralA.20}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutralA.20}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-neutral)"
+        },
+        {
+          "name": "bg.neutral.hovered",
+          "values": [
+            {
+              "value": "{colors.neutralA.30}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutralA.30}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-neutral-hovered)"
+        },
+        {
+          "name": "bg.neutral.pressed",
+          "values": [
+            {
+              "value": "{colors.neutralA.40}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutralA.40}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-neutral-pressed)"
+        },
+        {
+          "name": "bg.neutral.bold",
+          "values": [
+            {
+              "value": "{colors.neutral.80}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutral.80}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-neutral-bold)"
+        },
+        {
+          "name": "bg.neutral.bold.hovered",
+          "values": [
+            {
+              "value": "{colors.neutral.90}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutral.90}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-neutral-bold-hovered)"
+        },
+        {
+          "name": "bg.neutral.bold.pressed",
+          "values": [
+            {
+              "value": "{colors.neutral.100}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutral.100}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-neutral-bold-pressed)"
+        },
+        {
+          "name": "bg.neutral.boldest",
+          "values": [
+            {
+              "value": "{colors.neutral.100}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutral.110}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-neutral-boldest)"
+        },
+        {
+          "name": "bg.neutral.subtle",
+          "values": [
+            {
+              "value": "#ffffff02",
+              "condition": "base"
+            },
+            {
+              "value": "#ffffff02",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-neutral-subtle)"
+        },
+        {
+          "name": "bg.neutral.subtle.hovered",
+          "values": [
+            {
+              "value": "{colors.neutralA.20}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutralA.20}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-neutral-subtle-hovered)"
+        },
+        {
+          "name": "bg.neutral.subtle.pressed",
+          "values": [
+            {
+              "value": "{colors.neutralA.30}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutralA.30}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-neutral-subtle-pressed)"
+        },
+        {
+          "name": "bg.neutral.inverse",
+          "values": [
+            {
+              "value": "{colors.darkNeutral.0}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.neutral.0}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-neutral-inverse)"
+        },
+        {
+          "name": "bg.neutral.inverse.subtle",
+          "values": [
+            {
+              "value": "#00000029",
+              "condition": "base"
+            },
+            {
+              "value": "#ffffff29",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-neutral-inverse-subtle)"
+        },
+        {
+          "name": "bg.neutral.inverse.subtle.hovered",
+          "values": [
+            {
+              "value": "#0000003d",
+              "condition": "base"
+            },
+            {
+              "value": "#ffffff3d",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-neutral-inverse-subtle-hovered)"
+        },
+        {
+          "name": "bg.selected",
+          "values": [
+            {
+              "value": "{colors.blue.10}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.blue.100}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-selected)"
+        },
+        {
+          "name": "bg.selected.hovered",
+          "values": [
+            {
+              "value": "{colors.blue.20}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.blue.90}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-selected-hovered)"
+        },
+        {
+          "name": "bg.selected.pressed",
+          "values": [
+            {
+              "value": "{colors.blue.30}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.blue.80}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-selected-pressed)"
+        },
+        {
+          "name": "bg.selected.bold",
+          "values": [
+            {
+              "value": "{colors.blue.70}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.blue.40}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-selected-bold)"
+        },
+        {
+          "name": "bg.selected.bold.hovered",
+          "values": [
+            {
+              "value": "{colors.blue.80}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.blue.30}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-selected-bold-hovered)"
+        },
+        {
+          "name": "bg.selected.bold.pressed",
+          "values": [
+            {
+              "value": "{colors.blue.90}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.blue.20}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-selected-bold-pressed)"
+        },
+        {
+          "name": "bg.brand.bold",
+          "values": [
+            {
+              "value": "{colors.brand.70}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.brand.40}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-brand-bold)"
+        },
+        {
+          "name": "bg.brand.bold.hovered",
+          "values": [
+            {
+              "value": "{colors.brand.80}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.brand.30}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-brand-bold-hovered)"
+        },
+        {
+          "name": "bg.brand.bold.pressed",
+          "values": [
+            {
+              "value": "{colors.brand.90}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.brand.20}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-brand-bold-pressed)"
+        },
+        {
+          "name": "bg.brand.boldest",
+          "values": [
+            {
+              "value": "{colors.brand.100}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.brand.20}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-brand-boldest)"
+        },
+        {
+          "name": "bg.brand.boldest.hovered",
+          "values": [
+            {
+              "value": "{colors.brand.90}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.brand.30}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-brand-boldest-hovered)"
+        },
+        {
+          "name": "bg.brand.boldest.pressed",
+          "values": [
+            {
+              "value": "{colors.brand.80}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.brand.40}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-brand-boldest-pressed)"
+        },
+        {
+          "name": "bg.brand.subtle",
+          "values": [
+            {
+              "value": "{colors.brand.10}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.brand.100}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-brand-subtle)"
+        },
+        {
+          "name": "bg.brand.subtle.hovered",
+          "values": [
+            {
+              "value": "{colors.brand.20}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.brand.90}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-brand-subtle-hovered)"
+        },
+        {
+          "name": "bg.brand.subtle.pressed",
+          "values": [
+            {
+              "value": "{colors.brand.30}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.brand.80}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-brand-subtle-pressed)"
+        },
+        {
+          "name": "bg.success",
+          "values": [
+            {
+              "value": "{colors.lime.10}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.lime.100}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-success)"
+        },
+        {
+          "name": "bg.success.hovered",
+          "values": [
+            {
+              "value": "{colors.lime.20}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.lime.90}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-success-hovered)"
+        },
+        {
+          "name": "bg.success.pressed",
+          "values": [
+            {
+              "value": "{colors.lime.30}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.lime.80}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-success-pressed)"
+        },
+        {
+          "name": "bg.success.bold",
+          "values": [
+            {
+              "value": "{colors.lime.70}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.lime.40}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-success-bold)"
+        },
+        {
+          "name": "bg.success.bold.hovered",
+          "values": [
+            {
+              "value": "{colors.lime.80}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.lime.30}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-success-bold-hovered)"
+        },
+        {
+          "name": "bg.success.bold.pressed",
+          "values": [
+            {
+              "value": "{colors.lime.90}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.lime.20}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-success-bold-pressed)"
+        },
+        {
+          "name": "bg.warning",
+          "values": [
+            {
+              "value": "{colors.orange.10}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.orange.100}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-warning)"
+        },
+        {
+          "name": "bg.warning.hovered",
+          "values": [
+            {
+              "value": "{colors.orange.20}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.orange.90}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-warning-hovered)"
+        },
+        {
+          "name": "bg.warning.pressed",
+          "values": [
+            {
+              "value": "{colors.orange.30}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.orange.80}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-warning-pressed)"
+        },
+        {
+          "name": "bg.warning.bold",
+          "values": [
+            {
+              "value": "{colors.orange.30}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.orange.30}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-warning-bold)"
+        },
+        {
+          "name": "bg.warning.bold.hovered",
+          "values": [
+            {
+              "value": "{colors.orange.40}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.orange.40}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-warning-bold-hovered)"
+        },
+        {
+          "name": "bg.warning.bold.pressed",
+          "values": [
+            {
+              "value": "{colors.orange.50}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.orange.50}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-warning-bold-pressed)"
+        },
+        {
+          "name": "bg.danger",
+          "values": [
+            {
+              "value": "{colors.red.10}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.red.100}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-danger)"
+        },
+        {
+          "name": "bg.danger.hovered",
+          "values": [
+            {
+              "value": "{colors.red.20}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.red.90}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-danger-hovered)"
+        },
+        {
+          "name": "bg.danger.pressed",
+          "values": [
+            {
+              "value": "{colors.red.30}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.red.80}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-danger-pressed)"
+        },
+        {
+          "name": "bg.danger.bold",
+          "values": [
+            {
+              "value": "{colors.red.70}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.red.40}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-danger-bold)"
+        },
+        {
+          "name": "bg.danger.bold.hovered",
+          "values": [
+            {
+              "value": "{colors.red.80}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.red.30}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-danger-bold-hovered)"
+        },
+        {
+          "name": "bg.danger.bold.pressed",
+          "values": [
+            {
+              "value": "{colors.red.90}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.red.20}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-danger-bold-pressed)"
+        },
+        {
+          "name": "bg.info",
+          "values": [
+            {
+              "value": "{colors.blue.10}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.blue.100}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-info)"
+        },
+        {
+          "name": "bg.info.hovered",
+          "values": [
+            {
+              "value": "{colors.blue.20}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.blue.90}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-info-hovered)"
+        },
+        {
+          "name": "bg.info.pressed",
+          "values": [
+            {
+              "value": "{colors.blue.30}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.blue.80}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-info-pressed)"
+        },
+        {
+          "name": "bg.info.bold",
+          "values": [
+            {
+              "value": "{colors.blue.70}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.blue.40}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-info-bold)"
+        },
+        {
+          "name": "bg.info.bold.hovered",
+          "values": [
+            {
+              "value": "{colors.blue.80}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.blue.30}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-info-bold-hovered)"
+        },
+        {
+          "name": "bg.info.bold.pressed",
+          "values": [
+            {
+              "value": "{colors.blue.90}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.blue.20}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-info-bold-pressed)"
+        },
+        {
+          "name": "bg.input",
+          "values": [
+            {
+              "value": "{colors.neutral.0}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutral.20}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-input)"
+        },
+        {
+          "name": "bg.input.hovered",
+          "values": [
+            {
+              "value": "{colors.neutral.10}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutral.25}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-input-hovered)"
+        },
+        {
+          "name": "bg.input.pressed",
+          "values": [
+            {
+              "value": "{colors.neutral.0}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutral.20}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-input-pressed)"
+        },
+        {
+          "name": "bg.accent.neutral",
+          "values": [
+            {
+              "value": "{colors.neutral.50}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutral.50}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-accent-neutral)"
+        },
+        {
+          "name": "bg.accent.neutral.subtle",
+          "values": [
+            {
+              "value": "{colors.neutral.30}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutral.40}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-accent-neutral-subtle)"
+        },
+        {
+          "name": "bg.accent.neutral.subtlest",
+          "values": [
+            {
+              "value": "{colors.neutral.10}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutral.10}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-accent-neutral-subtlest)"
+        },
+        {
+          "name": "bg.accent.neutral.bold",
+          "values": [
+            {
+              "value": "{colors.neutral.70}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutral.70}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-accent-neutral-bold)"
+        },
+        {
+          "name": "bg.accent.blue",
+          "values": [
+            {
+              "value": "{colors.blue.40}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.blue.80}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-accent-blue)"
+        },
+        {
+          "name": "bg.accent.blue.subtle",
+          "values": [
+            {
+              "value": "{colors.blue.20}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.blue.90}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-accent-blue-subtle)"
+        },
+        {
+          "name": "bg.accent.blue.subtlest",
+          "values": [
+            {
+              "value": "{colors.blue.10}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.blue.100}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-accent-blue-subtlest)"
+        },
+        {
+          "name": "bg.accent.blue.bold",
+          "values": [
+            {
+              "value": "{colors.blue.70}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.blue.40}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-accent-blue-bold)"
+        },
+        {
+          "name": "bg.accent.green",
+          "values": [
+            {
+              "value": "{colors.green.40}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.green.80}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-accent-green)"
+        },
+        {
+          "name": "bg.accent.green.subtle",
+          "values": [
+            {
+              "value": "{colors.green.20}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.green.90}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-accent-green-subtle)"
+        },
+        {
+          "name": "bg.accent.green.subtlest",
+          "values": [
+            {
+              "value": "{colors.green.10}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.green.90}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-accent-green-subtlest)"
+        },
+        {
+          "name": "bg.accent.green.bold",
+          "values": [
+            {
+              "value": "{colors.green.70}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.green.40}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-accent-green-bold)"
+        },
+        {
+          "name": "bg.accent.indigo",
+          "values": [
+            {
+              "value": "{colors.indigo.40}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.indigo.80}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-accent-indigo)"
+        },
+        {
+          "name": "bg.accent.indigo.subtle",
+          "values": [
+            {
+              "value": "{colors.indigo.20}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.indigo.90}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-accent-indigo-subtle)"
+        },
+        {
+          "name": "bg.accent.indigo.subtlest",
+          "values": [
+            {
+              "value": "{colors.indigo.10}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.indigo.90}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-accent-indigo-subtlest)"
+        },
+        {
+          "name": "bg.accent.indigo.bold",
+          "values": [
+            {
+              "value": "{colors.indigo.70}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.indigo.40}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-accent-indigo-bold)"
+        },
+        {
+          "name": "bg.accent.lime",
+          "values": [
+            {
+              "value": "{colors.lime.40}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.lime.80}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-accent-lime)"
+        },
+        {
+          "name": "bg.accent.lime.subtle",
+          "values": [
+            {
+              "value": "{colors.lime.20}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.lime.90}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-accent-lime-subtle)"
+        },
+        {
+          "name": "bg.accent.lime.subtlest",
+          "values": [
+            {
+              "value": "{colors.lime.10}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.lime.90}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-accent-lime-subtlest)"
+        },
+        {
+          "name": "bg.accent.lime.bold",
+          "values": [
+            {
+              "value": "{colors.lime.70}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.lime.40}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-accent-lime-bold)"
+        },
+        {
+          "name": "bg.accent.magenta",
+          "values": [
+            {
+              "value": "{colors.magenta.40}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.magenta.80}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-accent-magenta)"
+        },
+        {
+          "name": "bg.accent.magenta.subtle",
+          "values": [
+            {
+              "value": "{colors.magenta.20}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.magenta.90}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-accent-magenta-subtle)"
+        },
+        {
+          "name": "bg.accent.magenta.subtlest",
+          "values": [
+            {
+              "value": "{colors.magenta.10}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.magenta.90}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-accent-magenta-subtlest)"
+        },
+        {
+          "name": "bg.accent.magenta.bold",
+          "values": [
+            {
+              "value": "{colors.magenta.70}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.magenta.40}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-accent-magenta-bold)"
+        },
+        {
+          "name": "bg.accent.orange",
+          "values": [
+            {
+              "value": "{colors.orange.40}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.orange.80}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-accent-orange)"
+        },
+        {
+          "name": "bg.accent.orange.subtle",
+          "values": [
+            {
+              "value": "{colors.orange.20}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.orange.90}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-accent-orange-subtle)"
+        },
+        {
+          "name": "bg.accent.orange.subtlest",
+          "values": [
+            {
+              "value": "{colors.orange.10}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.orange.90}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-accent-orange-subtlest)"
+        },
+        {
+          "name": "bg.accent.orange.bold",
+          "values": [
+            {
+              "value": "{colors.orange.70}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.orange.40}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-accent-orange-bold)"
+        },
+        {
+          "name": "bg.accent.purple",
+          "values": [
+            {
+              "value": "{colors.purple.40}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.purple.80}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-accent-purple)"
+        },
+        {
+          "name": "bg.accent.purple.subtle",
+          "values": [
+            {
+              "value": "{colors.purple.20}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.purple.90}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-accent-purple-subtle)"
+        },
+        {
+          "name": "bg.accent.purple.subtlest",
+          "values": [
+            {
+              "value": "{colors.purple.10}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.purple.90}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-accent-purple-subtlest)"
+        },
+        {
+          "name": "bg.accent.purple.bold",
+          "values": [
+            {
+              "value": "{colors.purple.70}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.purple.40}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-accent-purple-bold)"
+        },
+        {
+          "name": "bg.accent.red",
+          "values": [
+            {
+              "value": "{colors.red.40}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.red.80}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-accent-red)"
+        },
+        {
+          "name": "bg.accent.red.subtle",
+          "values": [
+            {
+              "value": "{colors.red.20}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.red.90}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-accent-red-subtle)"
+        },
+        {
+          "name": "bg.accent.red.subtlest",
+          "values": [
+            {
+              "value": "{colors.red.10}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.red.100}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-accent-red-subtlest)"
+        },
+        {
+          "name": "bg.accent.red.bold",
+          "values": [
+            {
+              "value": "{colors.red.70}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.red.40}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-accent-red-bold)"
+        },
+        {
+          "name": "bg.accent.tan",
+          "values": [
+            {
+              "value": "{colors.tan.40}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.tan.80}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-accent-tan)"
+        },
+        {
+          "name": "bg.accent.tan.subtle",
+          "values": [
+            {
+              "value": "{colors.tan.20}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.tan.90}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-accent-tan-subtle)"
+        },
+        {
+          "name": "bg.accent.tan.subtlest",
+          "values": [
+            {
+              "value": "{colors.tan.10}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.tan.90}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-accent-tan-subtlest)"
+        },
+        {
+          "name": "bg.accent.tan.bold",
+          "values": [
+            {
+              "value": "{colors.tan.70}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.tan.40}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-accent-tan-bold)"
+        },
+        {
+          "name": "bg.accent.teal",
+          "values": [
+            {
+              "value": "{colors.teal.40}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.teal.80}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-accent-teal)"
+        },
+        {
+          "name": "bg.accent.teal.subtle",
+          "values": [
+            {
+              "value": "{colors.teal.20}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.teal.90}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-accent-teal-subtle)"
+        },
+        {
+          "name": "bg.accent.teal.subtlest",
+          "values": [
+            {
+              "value": "{colors.teal.10}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.teal.90}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-accent-teal-subtlest)"
+        },
+        {
+          "name": "bg.accent.teal.bold",
+          "values": [
+            {
+              "value": "{colors.teal.70}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.teal.40}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-accent-teal-bold)"
+        },
+        {
+          "name": "bg.accent.yellow",
+          "values": [
+            {
+              "value": "{colors.yellow.30}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.yellow.70}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-accent-yellow)"
+        },
+        {
+          "name": "bg.accent.yellow.subtle",
+          "values": [
+            {
+              "value": "{colors.yellow.20}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.yellow.80}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-accent-yellow-subtle)"
+        },
+        {
+          "name": "bg.accent.yellow.subtlest",
+          "values": [
+            {
+              "value": "{colors.yellow.10}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.yellow.90}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-accent-yellow-subtlest)"
+        },
+        {
+          "name": "bg.accent.yellow.bold",
+          "values": [
+            {
+              "value": "{colors.yellow.70}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.yellow.40}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-accent-yellow-bold)"
+        },
+        {
+          "name": "blanket",
+          "values": [
+            {
+              "value": "#17171775",
+              "condition": "base"
+            },
+            {
+              "value": "#10121499",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-blanket)"
+        },
+        {
+          "name": "blanket.danger",
+          "values": [
+            {
+              "value": "#ef5c4814",
+              "condition": "base"
+            },
+            {
+              "value": "#e3493514",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-blanket-danger)"
+        },
+        {
+          "name": "blanket.selected",
+          "values": [
+            {
+              "value": "#388bff14",
+              "condition": "base"
+            },
+            {
+              "value": "#1d7afc14",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-blanket-selected)"
+        },
+        {
+          "name": "border",
+          "values": [
+            {
+              "value": "{colors.neutralA.30}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutralA.30}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-border)"
+        },
+        {
+          "name": "border.bold",
+          "values": [
+            {
+              "value": "{colors.neutral.60}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutral.60}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-border-bold)"
+        },
+        {
+          "name": "border.inverse",
+          "values": [
+            {
+              "value": "{colors.neutral.0}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutral.0}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-border-inverse)"
+        },
+        {
+          "name": "border.disabled",
+          "values": [
+            {
+              "value": "{colors.neutralA.20}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutralA.20}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-border-disabled)"
+        },
+        {
+          "name": "border.focused",
+          "values": [
+            {
+              "value": "{colors.blue.50}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.blue.30}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-border-focused)"
+        },
+        {
+          "name": "border.focused.inverse",
+          "values": [
+            {
+              "value": "{colors.blue.100}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.blue.10}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-border-focused-inverse)"
+        },
+        {
+          "name": "border.selected",
+          "values": [
+            {
+              "value": "{colors.blue.70}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.blue.40}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-border-selected)"
+        },
+        {
+          "name": "border.input",
+          "values": [
+            {
+              "value": "{colors.neutral.50}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutral.60}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-border-input)"
+        },
+        {
+          "name": "border.success",
+          "values": [
+            {
+              "value": "{colors.lime.60}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.lime.50}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-border-success)"
+        },
+        {
+          "name": "border.warning",
+          "values": [
+            {
+              "value": "{colors.orange.60}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.orange.50}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-border-warning)"
+        },
+        {
+          "name": "border.danger",
+          "values": [
+            {
+              "value": "{colors.red.60}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.red.50}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-border-danger)"
+        },
+        {
+          "name": "border.info",
+          "values": [
+            {
+              "value": "{colors.blue.60}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.blue.50}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-border-info)"
+        },
+        {
+          "name": "icon",
+          "values": [
+            {
+              "value": "{colors.neutral.100}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutral.110}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-icon)"
+        },
+        {
+          "name": "icon.subtle",
+          "values": [
+            {
+              "value": "{colors.neutral.80}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutral.80}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-icon-subtle)"
+        },
+        {
+          "name": "icon.subtlest",
+          "values": [
+            {
+              "value": "{colors.neutral.70}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutral.70}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-icon-subtlest)"
+        },
+        {
+          "name": "icon.inverse",
+          "values": [
+            {
+              "value": "{colors.neutral.0}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutral.10}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-icon-inverse)"
+        },
+        {
+          "name": "icon.selected",
+          "values": [
+            {
+              "value": "{colors.blue.70}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.blue.40}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-icon-selected)"
+        },
+        {
+          "name": "icon.disabled",
+          "values": [
+            {
+              "value": "{colors.neutralA.40}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutralA.40}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-icon-disabled)"
+        },
+        {
+          "name": "icon.decorative",
+          "values": [
+            {
+              "value": "{colors.neutral.50}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutral.60}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-icon-decorative)"
+        },
+        {
+          "name": "icon.decorative.hovered",
+          "values": [
+            {
+              "value": "{colors.neutral.100}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.neutral.0}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-icon-decorative-hovered)"
+        },
+        {
+          "name": "icon.decorative.inverse",
+          "values": [
+            {
+              "value": "{colors.neutral.30}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutral.30}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-icon-decorative-inverse)"
+        },
+        {
+          "name": "icon.decorative.inverse.hovered",
+          "values": [
+            {
+              "value": "{colors.neutral.0}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutral.10}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-icon-decorative-inverse-hovered)"
+        },
+        {
+          "name": "icon.success",
+          "values": [
+            {
+              "value": "{colors.lime.60}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.lime.50}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-icon-success)"
+        },
+        {
+          "name": "icon.warning",
+          "values": [
+            {
+              "value": "{colors.orange.60}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.orange.30}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-icon-warning)"
+        },
+        {
+          "name": "icon.warning.inverse",
+          "values": [
+            {
+              "value": "{colors.neutral.100}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutral.10}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-icon-warning-inverse)"
+        },
+        {
+          "name": "icon.danger",
+          "values": [
+            {
+              "value": "{colors.red.70}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.red.50}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-icon-danger)"
+        },
+        {
+          "name": "icon.info",
+          "values": [
+            {
+              "value": "{colors.blue.60}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.blue.50}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-icon-info)"
+        },
+        {
+          "name": "link",
+          "values": [
+            {
+              "value": "{colors.blue.70}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.blue.40}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-link)"
+        },
+        {
+          "name": "link.pressed",
+          "values": [
+            {
+              "value": "{colors.blue.80}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.blue.30}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-link-pressed)"
+        },
+        {
+          "name": "surface",
+          "values": [
+            {
+              "value": "{colors.neutral.0}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutral.10}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-surface)"
+        },
+        {
+          "name": "surface.hovered",
+          "values": [
+            {
+              "value": "{colors.neutral.20}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutral.20}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-surface-hovered)"
+        },
+        {
+          "name": "surface.pressed",
+          "values": [
+            {
+              "value": "{colors.neutral.30}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutral.30}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-surface-pressed)"
+        },
+        {
+          "name": "surface.sunken",
+          "values": [
+            {
+              "value": "{colors.neutral.10}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutral.0}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-surface-sunken)"
+        },
+        {
+          "name": "surface.overlay",
+          "values": [
+            {
+              "value": "{colors.neutral.0}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutral.25}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-surface-overlay)"
+        },
+        {
+          "name": "surface.overlay.hovered",
+          "values": [
+            {
+              "value": "{colors.neutral.20}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutral.30}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-surface-overlay-hovered)"
+        },
+        {
+          "name": "surface.overlay.pressed",
+          "values": [
+            {
+              "value": "{colors.neutral.30}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutral.35}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-surface-overlay-pressed)"
+        },
+        {
+          "name": "surface.raised",
+          "values": [
+            {
+              "value": "{colors.neutral.0}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutral.0}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-surface-raised)"
+        },
+        {
+          "name": "surface.raised.hovered",
+          "values": [
+            {
+              "value": "{colors.neutral.20}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutral.25}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-surface-raised-hovered)"
+        },
+        {
+          "name": "surface.raised.pressed",
+          "values": [
+            {
+              "value": "{colors.neutral.30}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutral.30}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-surface-raised-pressed)"
+        },
+        {
+          "name": "text",
+          "values": [
+            {
+              "value": "{colors.neutral.100}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutral.100}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-text)"
+        },
+        {
+          "name": "text.subtle",
+          "values": [
+            {
+              "value": "{colors.neutral.80}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutral.80}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-text-subtle)"
+        },
+        {
+          "name": "text.subtlest",
+          "values": [
+            {
+              "value": "{colors.neutral.70}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutral.70}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-text-subtlest)"
+        },
+        {
+          "name": "text.placeholder",
+          "values": [
+            {
+              "value": "{colors.neutral.50}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutral.60}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-text-placeholder)"
+        },
+        {
+          "name": "text.bold",
+          "values": [
+            {
+              "value": "{colors.neutral.100}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutral.110}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-text-bold)"
+        },
+        {
+          "name": "text.inverse",
+          "values": [
+            {
+              "value": "{colors.neutral.0}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutral.10}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-text-inverse)"
+        },
+        {
+          "name": "text.selected",
+          "values": [
+            {
+              "value": "{colors.blue.70}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.blue.40}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-text-selected)"
+        },
+        {
+          "name": "text.disabled",
+          "values": [
+            {
+              "value": "{colors.neutralA.40}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutralA.40}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-text-disabled)"
+        },
+        {
+          "name": "text.success",
+          "values": [
+            {
+              "value": "{colors.lime.80}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.lime.30}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-text-success)"
+        },
+        {
+          "name": "text.warning",
+          "values": [
+            {
+              "value": "{colors.orange.80}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.orange.30}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-text-warning)"
+        },
+        {
+          "name": "text.warning.inverse",
+          "values": [
+            {
+              "value": "{colors.neutral.100}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutral.10}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-text-warning-inverse)"
+        },
+        {
+          "name": "text.danger",
+          "values": [
+            {
+              "value": "{colors.red.80}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.red.30}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-text-danger)"
+        },
+        {
+          "name": "text.info",
+          "values": [
+            {
+              "value": "{colors.blue.80}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.blue.30}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-text-info)"
+        },
+        {
+          "name": "text.accent.neutral",
+          "values": [
+            {
+              "value": "{colors.neutral.80}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutral.80}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-text-accent-neutral)"
+        },
+        {
+          "name": "text.accent.neutral.bold",
+          "values": [
+            {
+              "value": "{colors.neutral.100}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutral.100}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-text-accent-neutral-bold)"
+        },
+        {
+          "name": "text.accent.red",
+          "values": [
+            {
+              "value": "{colors.red.80}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.red.30}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-text-accent-red)"
+        },
+        {
+          "name": "text.accent.red.bold",
+          "values": [
+            {
+              "value": "{colors.red.90}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.red.20}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-text-accent-red-bold)"
+        },
+        {
+          "name": "text.accent.orange",
+          "values": [
+            {
+              "value": "{colors.orange.80}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.orange.30}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-text-accent-orange)"
+        },
+        {
+          "name": "text.accent.orange.bold",
+          "values": [
+            {
+              "value": "{colors.orange.90}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.orange.20}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-text-accent-orange-bold)"
+        },
+        {
+          "name": "text.accent.yellow",
+          "values": [
+            {
+              "value": "{colors.yellow.80}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.yellow.30}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-text-accent-yellow)"
+        },
+        {
+          "name": "text.accent.yellow.bold",
+          "values": [
+            {
+              "value": "{colors.yellow.90}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.yellow.20}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-text-accent-yellow-bold)"
+        },
+        {
+          "name": "text.accent.lime",
+          "values": [
+            {
+              "value": "{colors.lime.80}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.lime.30}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-text-accent-lime)"
+        },
+        {
+          "name": "text.accent.lime.bold",
+          "values": [
+            {
+              "value": "{colors.lime.90}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.lime.20}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-text-accent-lime-bold)"
+        },
+        {
+          "name": "text.accent.green",
+          "values": [
+            {
+              "value": "{colors.green.80}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.green.30}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-text-accent-green)"
+        },
+        {
+          "name": "text.accent.green.bold",
+          "values": [
+            {
+              "value": "{colors.green.90}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.green.20}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-text-accent-green-bold)"
+        },
+        {
+          "name": "text.accent.teal",
+          "values": [
+            {
+              "value": "{colors.teal.80}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.teal.30}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-text-accent-teal)"
+        },
+        {
+          "name": "text.accent.teal.bold",
+          "values": [
+            {
+              "value": "{colors.teal.90}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.teal.20}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-text-accent-teal-bold)"
+        },
+        {
+          "name": "text.accent.blue",
+          "values": [
+            {
+              "value": "{colors.blue.80}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.blue.30}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-text-accent-blue)"
+        },
+        {
+          "name": "text.accent.blue.bold",
+          "values": [
+            {
+              "value": "{colors.blue.90}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.blue.20}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-text-accent-blue-bold)"
+        },
+        {
+          "name": "text.accent.indigo",
+          "values": [
+            {
+              "value": "{colors.indigo.80}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.indigo.30}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-text-accent-indigo)"
+        },
+        {
+          "name": "text.accent.indigo.bold",
+          "values": [
+            {
+              "value": "{colors.indigo.90}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.indigo.20}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-text-accent-indigo-bold)"
+        },
+        {
+          "name": "text.accent.purple",
+          "values": [
+            {
+              "value": "{colors.purple.80}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.purple.30}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-text-accent-purple)"
+        },
+        {
+          "name": "text.accent.purple.bold",
+          "values": [
+            {
+              "value": "{colors.purple.90}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.purple.20}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-text-accent-purple-bold)"
+        },
+        {
+          "name": "text.accent.magenta",
+          "values": [
+            {
+              "value": "{colors.magenta.80}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.magenta.30}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-text-accent-magenta)"
+        },
+        {
+          "name": "text.accent.magenta.bold",
+          "values": [
+            {
+              "value": "{colors.magenta.90}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.magenta.20}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-text-accent-magenta-bold)"
+        },
+        {
+          "name": "text.accent.tan",
+          "values": [
+            {
+              "value": "{colors.tan.80}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.tan.30}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-text-accent-tan)"
+        },
+        {
+          "name": "text.accent.tan.bold",
+          "values": [
+            {
+              "value": "{colors.tan.90}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.tan.20}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-text-accent-tan-bold)"
+        },
+        {
+          "name": "utility.shadowColor",
+          "values": [
+            {
+              "value": "{colors.slate.90/20}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.slate.100/40}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-utility-shadow-color)"
+        }
+      ],
+      "tokenFunctionExamples": [
+        "token('colors.brand.10')",
+        "token.var('colors.brand.10')"
+      ],
+      "functionExamples": [
+        "css({ color: 'brand.10' })"
+      ],
+      "jsxExamples": [
+        "<Box color=\"brand.10\" />"
+      ]
+    },
+    {
+      "type": "shadows",
+      "values": [
+        {
+          "name": "zero",
+          "values": [
+            {
+              "value": "{shadows.zeroShadow}",
+              "condition": "base"
+            },
+            {
+              "value": "{shadows.zeroShadow}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-shadows-zero)"
+        },
+        {
+          "name": "raised",
+          "values": [
+            {
+              "value": "{shadows.raisedLight}",
+              "condition": "base"
+            },
+            {
+              "value": "{shadows.raisedDark}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-shadows-raised)"
+        },
+        {
+          "name": "elevated",
+          "values": [
+            {
+              "value": "{shadows.elevatedLight}",
+              "condition": "base"
+            },
+            {
+              "value": "{shadows.elevatedDark}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-shadows-elevated)"
+        },
+        {
+          "name": "overlay",
+          "values": [
+            {
+              "value": "{shadows.overlayLight}",
+              "condition": "base"
+            },
+            {
+              "value": "{shadows.overlayDark}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-shadows-overlay)"
+        },
+        {
+          "name": "overflow",
+          "values": [
+            {
+              "value": "{shadows.overflowLight}",
+              "condition": "base"
+            },
+            {
+              "value": "{shadows.overflowDark}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-shadows-overflow)"
+        },
+        {
+          "name": "low",
+          "values": [
+            {
+              "value": "{shadows.lowLight}",
+              "condition": "base"
+            },
+            {
+              "value": "{shadows.lowDark}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-shadows-low)"
+        },
+        {
+          "name": "medium",
+          "values": [
+            {
+              "value": "{shadows.mediumLight}",
+              "condition": "base"
+            },
+            {
+              "value": "{shadows.mediumDark}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-shadows-medium)"
+        },
+        {
+          "name": "high",
+          "values": [
+            {
+              "value": "{shadows.highLight}",
+              "condition": "base"
+            },
+            {
+              "value": "{shadows.highDark}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-shadows-high)"
+        },
+        {
+          "name": "inset",
+          "values": [
+            {
+              "value": "{shadows.insetLight}",
+              "condition": "base"
+            },
+            {
+              "value": "{shadows.insetDark}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-shadows-inset)"
+        }
+      ],
+      "tokenFunctionExamples": [
+        "token('shadows.zero')",
+        "token.var('shadows.zero')"
+      ],
+      "functionExamples": [
+        "css({ boxShadow: 'zero' })"
+      ],
+      "jsxExamples": [
+        "<Box boxShadow=\"zero\" />"
+      ]
+    }
+  ]
+}