@okshaun/components 1.0.2 → 2.0.1

package/dist/specs/semantic-tokens.json

@@ -300,6 +300,20 @@
           ],
           "cssVar": "var(--oks-colors-bg-neutral-inverse-subtle-hovered)"
         },
+        {
+          "name": "bg.neutral.solid",
+          "values": [
+            {
+              "value": "{colors.neutral.20}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutral.20}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-bg-neutral-solid)"
+        },
         {
           "name": "bg.selected",
           "values": [
@@ -952,7 +966,7 @@
               "condition": "base"
             },
             {
-              "value": "{colors.blue.80}",
+              "value": "{colors.blue.70}",
               "condition": "dark"
             }
           ],
@@ -966,7 +980,7 @@
               "condition": "base"
             },
             {
-              "value": "{colors.blue.90}",
+              "value": "{colors.blue.80}",
               "condition": "dark"
             }
           ],
@@ -980,7 +994,7 @@
               "condition": "base"
             },
             {
-              "value": "{colors.blue.100}",
+              "value": "{colors.blue.90}",
               "condition": "dark"
             }
           ],
@@ -1008,7 +1022,7 @@
               "condition": "base"
             },
             {
-              "value": "{colors.green.80}",
+              "value": "{colors.green.70}",
               "condition": "dark"
             }
           ],
@@ -1022,7 +1036,7 @@
               "condition": "base"
             },
             {
-              "value": "{colors.green.90}",
+              "value": "{colors.green.80}",
               "condition": "dark"
             }
           ],
@@ -1064,7 +1078,7 @@
               "condition": "base"
             },
             {
-              "value": "{colors.indigo.80}",
+              "value": "{colors.indigo.70}",
               "condition": "dark"
             }
           ],
@@ -1078,7 +1092,7 @@
               "condition": "base"
             },
             {
-              "value": "{colors.indigo.90}",
+              "value": "{colors.indigo.80}",
               "condition": "dark"
             }
           ],
@@ -1120,7 +1134,7 @@
               "condition": "base"
             },
             {
-              "value": "{colors.lime.80}",
+              "value": "{colors.lime.70}",
               "condition": "dark"
             }
           ],
@@ -1134,7 +1148,7 @@
               "condition": "base"
             },
             {
-              "value": "{colors.lime.90}",
+              "value": "{colors.lime.80}",
               "condition": "dark"
             }
           ],
@@ -1176,7 +1190,7 @@
               "condition": "base"
             },
             {
-              "value": "{colors.magenta.80}",
+              "value": "{colors.magenta.70}",
               "condition": "dark"
             }
           ],
@@ -1190,7 +1204,7 @@
               "condition": "base"
             },
             {
-              "value": "{colors.magenta.90}",
+              "value": "{colors.magenta.80}",
               "condition": "dark"
             }
           ],
@@ -1232,7 +1246,7 @@
               "condition": "base"
             },
             {
-              "value": "{colors.orange.80}",
+              "value": "{colors.orange.70}",
               "condition": "dark"
             }
           ],
@@ -1246,7 +1260,7 @@
               "condition": "base"
             },
             {
-              "value": "{colors.orange.90}",
+              "value": "{colors.orange.80}",
               "condition": "dark"
             }
           ],
@@ -1288,7 +1302,7 @@
               "condition": "base"
             },
             {
-              "value": "{colors.purple.80}",
+              "value": "{colors.purple.70}",
               "condition": "dark"
             }
           ],
@@ -1302,7 +1316,7 @@
               "condition": "base"
             },
             {
-              "value": "{colors.purple.90}",
+              "value": "{colors.purple.80}",
               "condition": "dark"
             }
           ],
@@ -1344,7 +1358,7 @@
               "condition": "base"
             },
             {
-              "value": "{colors.red.80}",
+              "value": "{colors.red.70}",
               "condition": "dark"
             }
           ],
@@ -1358,7 +1372,7 @@
               "condition": "base"
             },
             {
-              "value": "{colors.red.90}",
+              "value": "{colors.red.80}",
               "condition": "dark"
             }
           ],
@@ -1372,7 +1386,7 @@
               "condition": "base"
             },
             {
-              "value": "{colors.red.100}",
+              "value": "{colors.red.90}",
               "condition": "dark"
             }
           ],
@@ -1400,7 +1414,7 @@
               "condition": "base"
             },
             {
-              "value": "{colors.tan.80}",
+              "value": "{colors.tan.70}",
               "condition": "dark"
             }
           ],
@@ -1414,7 +1428,7 @@
               "condition": "base"
             },
             {
-              "value": "{colors.tan.90}",
+              "value": "{colors.tan.80}",
               "condition": "dark"
             }
           ],
@@ -1456,7 +1470,7 @@
               "condition": "base"
             },
             {
-              "value": "{colors.teal.80}",
+              "value": "{colors.teal.70}",
               "condition": "dark"
             }
           ],
@@ -1470,7 +1484,7 @@
               "condition": "base"
             },
             {
-              "value": "{colors.teal.90}",
+              "value": "{colors.teal.80}",
               "condition": "dark"
             }
           ],
@@ -1620,11 +1634,11 @@
           "name": "border.bold",
           "values": [
             {
-              "value": "{colors.neutral.60}",
+              "value": "{colors.neutral.90}",
               "condition": "base"
             },
             {
-              "value": "{colors.darkNeutral.60}",
+              "value": "{colors.darkNeutral.90}",
               "condition": "dark"
             }
           ],
@@ -1644,6 +1658,20 @@
           ],
           "cssVar": "var(--oks-colors-border-inverse)"
         },
+        {
+          "name": "border.inverse.focused",
+          "values": [
+            {
+              "value": "{colors.darkNeutral.100}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.neutral.90}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-border-inverse-focused)"
+        },
         {
           "name": "border.disabled",
           "values": [
@@ -1690,7 +1718,7 @@
           "name": "border.selected",
           "values": [
             {
-              "value": "{colors.blue.70}",
+              "value": "{colors.blue.60}",
               "condition": "base"
             },
             {
@@ -1718,7 +1746,7 @@
           "name": "border.success",
           "values": [
             {
-              "value": "{colors.lime.60}",
+              "value": "{colors.lime.50}",
               "condition": "base"
             },
             {
@@ -1732,7 +1760,7 @@
           "name": "border.warning",
           "values": [
             {
-              "value": "{colors.orange.60}",
+              "value": "{colors.orange.50}",
               "condition": "base"
             },
             {
@@ -1746,7 +1774,7 @@
           "name": "border.danger",
           "values": [
             {
-              "value": "{colors.red.60}",
+              "value": "{colors.red.50}",
               "condition": "base"
             },
             {
@@ -1760,7 +1788,7 @@
           "name": "border.info",
           "values": [
             {
-              "value": "{colors.blue.60}",
+              "value": "{colors.blue.50}",
               "condition": "base"
             },
             {
@@ -1830,7 +1858,7 @@
           "name": "icon.selected",
           "values": [
             {
-              "value": "{colors.blue.70}",
+              "value": "{colors.blue.60}",
               "condition": "base"
             },
             {
@@ -1910,6 +1938,20 @@
           ],
           "cssVar": "var(--oks-colors-icon-decorative-inverse-hovered)"
         },
+        {
+          "name": "icon.decorative.subtle",
+          "values": [
+            {
+              "value": "{colors.neutral.40}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutral.50}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-icon-decorative-subtle)"
+        },
         {
           "name": "icon.success",
           "values": [
@@ -1966,6 +2008,20 @@
           ],
           "cssVar": "var(--oks-colors-icon-danger)"
         },
+        {
+          "name": "icon.danger.inverse",
+          "values": [
+            {
+              "value": "{colors.red.10}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.red.70}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-icon-danger-inverse)"
+        },
         {
           "name": "icon.info",
           "values": [
@@ -1984,7 +2040,7 @@
           "name": "link",
           "values": [
             {
-              "value": "{colors.blue.70}",
+              "value": "{colors.blue.50}",
               "condition": "base"
             },
             {
@@ -1998,11 +2054,11 @@
           "name": "link.pressed",
           "values": [
             {
-              "value": "{colors.blue.80}",
+              "value": "{colors.blue.60}",
               "condition": "base"
             },
             {
-              "value": "{colors.blue.30}",
+              "value": "{colors.blue.50}",
               "condition": "dark"
             }
           ],
@@ -2064,6 +2120,48 @@
           ],
           "cssVar": "var(--oks-colors-surface-sunken)"
         },
+        {
+          "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": "surface.overlay",
           "values": [
@@ -2107,46 +2205,46 @@
           "cssVar": "var(--oks-colors-surface-overlay-pressed)"
         },
         {
-          "name": "surface.raised",
+          "name": "surface.selected",
           "values": [
             {
-              "value": "{colors.neutral.0}",
+              "value": "{colors.blue.10}",
               "condition": "base"
             },
             {
-              "value": "{colors.darkNeutral.0}",
+              "value": "{colors.blue.70}",
               "condition": "dark"
             }
           ],
-          "cssVar": "var(--oks-colors-surface-raised)"
+          "cssVar": "var(--oks-colors-surface-selected)"
         },
         {
-          "name": "surface.raised.hovered",
+          "name": "surface.selected.hovered",
           "values": [
             {
-              "value": "{colors.neutral.20}",
+              "value": "{colors.blue.10}",
               "condition": "base"
             },
             {
-              "value": "{colors.darkNeutral.25}",
+              "value": "{colors.blue.60}",
               "condition": "dark"
             }
           ],
-          "cssVar": "var(--oks-colors-surface-raised-hovered)"
+          "cssVar": "var(--oks-colors-surface-selected-hovered)"
         },
         {
-          "name": "surface.raised.pressed",
+          "name": "surface.selected.pressed",
           "values": [
             {
-              "value": "{colors.neutral.30}",
+              "value": "{colors.blue.20}",
               "condition": "base"
             },
             {
-              "value": "{colors.darkNeutral.30}",
+              "value": "{colors.blue.80}",
               "condition": "dark"
             }
           ],
-          "cssVar": "var(--oks-colors-surface-raised-pressed)"
+          "cssVar": "var(--oks-colors-surface-selected-pressed)"
         },
         {
           "name": "text",
@@ -2191,52 +2289,52 @@
           "cssVar": "var(--oks-colors-text-subtlest)"
         },
         {
-          "name": "text.placeholder",
+          "name": "text.bold",
           "values": [
             {
-              "value": "{colors.neutral.50}",
+              "value": "{colors.neutral.110}",
               "condition": "base"
             },
             {
-              "value": "{colors.darkNeutral.60}",
+              "value": "{colors.darkNeutral.110}",
               "condition": "dark"
             }
           ],
-          "cssVar": "var(--oks-colors-text-placeholder)"
+          "cssVar": "var(--oks-colors-text-bold)"
         },
         {
-          "name": "text.bold",
+          "name": "text.inverse",
           "values": [
             {
-              "value": "{colors.neutral.100}",
+              "value": "{colors.neutral.0}",
               "condition": "base"
             },
             {
-              "value": "{colors.darkNeutral.110}",
+              "value": "{colors.darkNeutral.10}",
               "condition": "dark"
             }
           ],
-          "cssVar": "var(--oks-colors-text-bold)"
+          "cssVar": "var(--oks-colors-text-inverse)"
         },
         {
-          "name": "text.inverse",
+          "name": "text.inverse.subtlest",
           "values": [
             {
-              "value": "{colors.neutral.0}",
+              "value": "{colors.neutral.40}",
               "condition": "base"
             },
             {
-              "value": "{colors.darkNeutral.10}",
+              "value": "{colors.darkNeutral.40}",
               "condition": "dark"
             }
           ],
-          "cssVar": "var(--oks-colors-text-inverse)"
+          "cssVar": "var(--oks-colors-text-inverse-subtlest)"
         },
         {
           "name": "text.selected",
           "values": [
             {
-              "value": "{colors.blue.70}",
+              "value": "{colors.blue.60}",
               "condition": "base"
             },
             {
@@ -2246,6 +2344,20 @@
           ],
           "cssVar": "var(--oks-colors-text-selected)"
         },
+        {
+          "name": "text.placeholder",
+          "values": [
+            {
+              "value": "{colors.neutral.40}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.darkNeutral.40}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-text-placeholder)"
+        },
         {
           "name": "text.disabled",
           "values": [
@@ -2264,7 +2376,7 @@
           "name": "text.success",
           "values": [
             {
-              "value": "{colors.lime.80}",
+              "value": "{colors.lime.50}",
               "condition": "base"
             },
             {
@@ -2274,15 +2386,29 @@
           ],
           "cssVar": "var(--oks-colors-text-success)"
         },
+        {
+          "name": "text.success.inverse",
+          "values": [
+            {
+              "value": "{colors.lime.30}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.lime.50}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-text-success-inverse)"
+        },
         {
           "name": "text.warning",
           "values": [
             {
-              "value": "{colors.orange.80}",
+              "value": "{colors.orange.60}",
               "condition": "base"
             },
             {
-              "value": "{colors.orange.30}",
+              "value": "{colors.orange.40}",
               "condition": "dark"
             }
           ],
@@ -2292,11 +2418,11 @@
           "name": "text.warning.inverse",
           "values": [
             {
-              "value": "{colors.neutral.100}",
+              "value": "{colors.orange.40}",
               "condition": "base"
             },
             {
-              "value": "{colors.darkNeutral.10}",
+              "value": "{colors.orange.60}",
               "condition": "dark"
             }
           ],
@@ -2306,7 +2432,7 @@
           "name": "text.danger",
           "values": [
             {
-              "value": "{colors.red.80}",
+              "value": "{colors.red.50}",
               "condition": "base"
             },
             {
@@ -2316,20 +2442,48 @@
           ],
           "cssVar": "var(--oks-colors-text-danger)"
         },
+        {
+          "name": "text.danger.inverse",
+          "values": [
+            {
+              "value": "{colors.red.30}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.red.50}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-text-danger-inverse)"
+        },
         {
           "name": "text.info",
           "values": [
             {
-              "value": "{colors.blue.80}",
+              "value": "{colors.blue.50}",
               "condition": "base"
             },
             {
-              "value": "{colors.blue.30}",
+              "value": "{colors.blue.40}",
               "condition": "dark"
             }
           ],
           "cssVar": "var(--oks-colors-text-info)"
         },
+        {
+          "name": "text.info.inverse",
+          "values": [
+            {
+              "value": "{colors.blue.40}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.blue.50}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-colors-text-info-inverse)"
+        },
         {
           "name": "text.accent.neutral",
           "values": [
@@ -2362,7 +2516,7 @@
           "name": "text.accent.red",
           "values": [
             {
-              "value": "{colors.red.80}",
+              "value": "{colors.red.50}",
               "condition": "base"
             },
             {
@@ -2376,7 +2530,7 @@
           "name": "text.accent.red.bold",
           "values": [
             {
-              "value": "{colors.red.90}",
+              "value": "{colors.red.60}",
               "condition": "base"
             },
             {
@@ -2390,11 +2544,11 @@
           "name": "text.accent.orange",
           "values": [
             {
-              "value": "{colors.orange.80}",
+              "value": "{colors.orange.60}",
               "condition": "base"
             },
             {
-              "value": "{colors.orange.30}",
+              "value": "{colors.orange.50}",
               "condition": "dark"
             }
           ],
@@ -2404,11 +2558,11 @@
           "name": "text.accent.orange.bold",
           "values": [
             {
-              "value": "{colors.orange.90}",
+              "value": "{colors.orange.70}",
               "condition": "base"
             },
             {
-              "value": "{colors.orange.20}",
+              "value": "{colors.orange.30}",
               "condition": "dark"
             }
           ],
@@ -2418,7 +2572,7 @@
           "name": "text.accent.yellow",
           "values": [
             {
-              "value": "{colors.yellow.80}",
+              "value": "{colors.yellow.50}",
               "condition": "base"
             },
             {
@@ -2432,7 +2586,7 @@
           "name": "text.accent.yellow.bold",
           "values": [
             {
-              "value": "{colors.yellow.90}",
+              "value": "{colors.yellow.60}",
               "condition": "base"
             },
             {
@@ -2446,11 +2600,11 @@
           "name": "text.accent.lime",
           "values": [
             {
-              "value": "{colors.lime.80}",
+              "value": "{colors.lime.50}",
               "condition": "base"
             },
             {
-              "value": "{colors.lime.30}",
+              "value": "{colors.lime.40}",
               "condition": "dark"
             }
           ],
@@ -2460,7 +2614,7 @@
           "name": "text.accent.lime.bold",
           "values": [
             {
-              "value": "{colors.lime.90}",
+              "value": "{colors.lime.60}",
               "condition": "base"
             },
             {
@@ -2474,11 +2628,11 @@
           "name": "text.accent.green",
           "values": [
             {
-              "value": "{colors.green.80}",
+              "value": "{colors.green.50}",
               "condition": "base"
             },
             {
-              "value": "{colors.green.30}",
+              "value": "{colors.green.40}",
               "condition": "dark"
             }
           ],
@@ -2488,7 +2642,7 @@
           "name": "text.accent.green.bold",
           "values": [
             {
-              "value": "{colors.green.90}",
+              "value": "{colors.green.60}",
               "condition": "base"
             },
             {
@@ -2502,11 +2656,11 @@
           "name": "text.accent.teal",
           "values": [
             {
-              "value": "{colors.teal.80}",
+              "value": "{colors.teal.50}",
               "condition": "base"
             },
             {
-              "value": "{colors.teal.30}",
+              "value": "{colors.teal.40}",
               "condition": "dark"
             }
           ],
@@ -2516,7 +2670,7 @@
           "name": "text.accent.teal.bold",
           "values": [
             {
-              "value": "{colors.teal.90}",
+              "value": "{colors.teal.60}",
               "condition": "base"
             },
             {
@@ -2530,11 +2684,11 @@
           "name": "text.accent.blue",
           "values": [
             {
-              "value": "{colors.blue.80}",
+              "value": "{colors.blue.50}",
               "condition": "base"
             },
             {
-              "value": "{colors.blue.30}",
+              "value": "{colors.blue.40}",
               "condition": "dark"
             }
           ],
@@ -2544,11 +2698,11 @@
           "name": "text.accent.blue.bold",
           "values": [
             {
-              "value": "{colors.blue.90}",
+              "value": "{colors.blue.60}",
               "condition": "base"
             },
             {
-              "value": "{colors.blue.20}",
+              "value": "{colors.blue.30}",
               "condition": "dark"
             }
           ],
@@ -2558,11 +2712,11 @@
           "name": "text.accent.indigo",
           "values": [
             {
-              "value": "{colors.indigo.80}",
+              "value": "{colors.indigo.40}",
               "condition": "base"
             },
             {
-              "value": "{colors.indigo.30}",
+              "value": "{colors.indigo.20}",
               "condition": "dark"
             }
           ],
@@ -2572,11 +2726,11 @@
           "name": "text.accent.indigo.bold",
           "values": [
             {
-              "value": "{colors.indigo.90}",
+              "value": "{colors.indigo.60}",
               "condition": "base"
             },
             {
-              "value": "{colors.indigo.20}",
+              "value": "{colors.indigo.10}",
               "condition": "dark"
             }
           ],
@@ -2586,11 +2740,11 @@
           "name": "text.accent.purple",
           "values": [
             {
-              "value": "{colors.purple.80}",
+              "value": "{colors.purple.50}",
               "condition": "base"
             },
             {
-              "value": "{colors.purple.30}",
+              "value": "{colors.purple.40}",
               "condition": "dark"
             }
           ],
@@ -2600,11 +2754,11 @@
           "name": "text.accent.purple.bold",
           "values": [
             {
-              "value": "{colors.purple.90}",
+              "value": "{colors.purple.60}",
               "condition": "base"
             },
             {
-              "value": "{colors.purple.20}",
+              "value": "{colors.purple.30}",
               "condition": "dark"
             }
           ],
@@ -2614,11 +2768,11 @@
           "name": "text.accent.magenta",
           "values": [
             {
-              "value": "{colors.magenta.80}",
+              "value": "{colors.magenta.60}",
               "condition": "base"
             },
             {
-              "value": "{colors.magenta.30}",
+              "value": "{colors.magenta.40}",
               "condition": "dark"
             }
           ],
@@ -2628,11 +2782,11 @@
           "name": "text.accent.magenta.bold",
           "values": [
             {
-              "value": "{colors.magenta.90}",
+              "value": "{colors.magenta.70}",
               "condition": "base"
             },
             {
-              "value": "{colors.magenta.20}",
+              "value": "{colors.magenta.30}",
               "condition": "dark"
             }
           ],
@@ -2642,7 +2796,7 @@
           "name": "text.accent.tan",
           "values": [
             {
-              "value": "{colors.tan.80}",
+              "value": "{colors.tan.50}",
               "condition": "base"
             },
             {
@@ -2656,7 +2810,7 @@
           "name": "text.accent.tan.bold",
           "values": [
             {
-              "value": "{colors.tan.90}",
+              "value": "{colors.tan.60}",
               "condition": "base"
             },
             {
@@ -2665,20 +2819,6 @@
             }
           ],
           "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": [
@@ -2723,6 +2863,20 @@
           ],
           "cssVar": "var(--oks-shadows-raised)"
         },
+        {
+          "name": "raised.up",
+          "values": [
+            {
+              "value": "{shadows.raisedLightUp}",
+              "condition": "base"
+            },
+            {
+              "value": "{shadows.raisedDarkUp}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-shadows-raised-up)"
+        },
         {
           "name": "elevated",
           "values": [
@@ -2737,6 +2891,20 @@
           ],
           "cssVar": "var(--oks-shadows-elevated)"
         },
+        {
+          "name": "elevated.up",
+          "values": [
+            {
+              "value": "{shadows.elevatedLightUp}",
+              "condition": "base"
+            },
+            {
+              "value": "{shadows.elevatedDarkUp}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--oks-shadows-elevated-up)"
+        },
         {
           "name": "overlay",
           "values": [
@@ -2752,85 +2920,118 @@
           "cssVar": "var(--oks-shadows-overlay)"
         },
         {
-          "name": "overflow",
+          "name": "overlay.dark",
           "values": [
             {
-              "value": "{shadows.overflowLight}",
+              "value": "{shadows.overlayDark}",
               "condition": "base"
             },
             {
-              "value": "{shadows.overflowDark}",
+              "value": "{shadows.overlayLight}",
               "condition": "dark"
             }
           ],
-          "cssVar": "var(--oks-shadows-overflow)"
+          "cssVar": "var(--oks-shadows-overlay-dark)"
         },
         {
-          "name": "low",
+          "name": "overflow",
           "values": [
             {
-              "value": "{shadows.lowLight}",
+              "value": "{shadows.overflowLight}",
               "condition": "base"
             },
             {
-              "value": "{shadows.lowDark}",
+              "value": "{shadows.overflowDark}",
               "condition": "dark"
             }
           ],
-          "cssVar": "var(--oks-shadows-low)"
-        },
+          "cssVar": "var(--oks-shadows-overflow)"
+        }
+      ],
+      "tokenFunctionExamples": [
+        "token('shadows.zero')",
+        "token.var('shadows.zero')"
+      ],
+      "functionExamples": [
+        "css({ boxShadow: 'zero' })"
+      ],
+      "jsxExamples": [
+        "<Box boxShadow=\"zero\" />"
+      ]
+    },
+    {
+      "type": "zIndex",
+      "values": [
         {
-          "name": "medium",
+          "name": "base",
           "values": [
             {
-              "value": "{shadows.mediumLight}",
+              "value": "{zIndex.0}",
               "condition": "base"
-            },
+            }
+          ],
+          "cssVar": "var(--oks-z-index-base)"
+        },
+        {
+          "name": "raised",
+          "values": [
             {
-              "value": "{shadows.mediumDark}",
-              "condition": "dark"
+              "value": "{zIndex.1}",
+              "condition": "base"
             }
           ],
-          "cssVar": "var(--oks-shadows-medium)"
+          "cssVar": "var(--oks-z-index-raised)"
         },
         {
-          "name": "high",
+          "name": "elevated",
           "values": [
             {
-              "value": "{shadows.highLight}",
+              "value": "{zIndex.1000}",
               "condition": "base"
-            },
+            }
+          ],
+          "cssVar": "var(--oks-z-index-elevated)"
+        },
+        {
+          "name": "overlay",
+          "values": [
             {
-              "value": "{shadows.highDark}",
-              "condition": "dark"
+              "value": "{zIndex.1100}",
+              "condition": "base"
             }
           ],
-          "cssVar": "var(--oks-shadows-high)"
+          "cssVar": "var(--oks-z-index-overlay)"
         },
         {
-          "name": "inset",
+          "name": "modal",
           "values": [
             {
-              "value": "{shadows.insetLight}",
+              "value": "{zIndex.1101}",
               "condition": "base"
-            },
+            }
+          ],
+          "cssVar": "var(--oks-z-index-modal)"
+        },
+        {
+          "name": "tooltip",
+          "values": [
             {
-              "value": "{shadows.insetDark}",
-              "condition": "dark"
+              "value": "{zIndex.1200}",
+              "condition": "base"
             }
           ],
-          "cssVar": "var(--oks-shadows-inset)"
+          "cssVar": "var(--oks-z-index-tooltip)"
         }
       ],
       "tokenFunctionExamples": [
-        "token('shadows.zero')",
-        "token.var('shadows.zero')"
+        "token('zIndex.base')",
+        "token.var('zIndex.base')"
       ],
       "functionExamples": [
-        "css({ boxShadow: 'zero' })"
+        "css({ zIndex: 'base' })"
       ],
       "jsxExamples": [
-        "<Box boxShadow=\"zero\" />"
+        "<Box zIndex=\"base\" />"
       ]
     }
   ]