@okshaun/components 1.0.2 → 2.0.1

package/dist/specs/text-styles.json

@@ -109,6 +109,78 @@
         "<Box textStyle=\"body.xs\" />"
       ]
     },
+    {
+      "name": "sans.lg",
+      "functionExamples": [
+        "css({ textStyle: 'sans.lg' })"
+      ],
+      "jsxExamples": [
+        "<Box textStyle=\"sans.lg\" />"
+      ]
+    },
+    {
+      "name": "sans.md",
+      "functionExamples": [
+        "css({ textStyle: 'sans.md' })"
+      ],
+      "jsxExamples": [
+        "<Box textStyle=\"sans.md\" />"
+      ]
+    },
+    {
+      "name": "sans.sm",
+      "functionExamples": [
+        "css({ textStyle: 'sans.sm' })"
+      ],
+      "jsxExamples": [
+        "<Box textStyle=\"sans.sm\" />"
+      ]
+    },
+    {
+      "name": "sans.xs",
+      "functionExamples": [
+        "css({ textStyle: 'sans.xs' })"
+      ],
+      "jsxExamples": [
+        "<Box textStyle=\"sans.xs\" />"
+      ]
+    },
+    {
+      "name": "serif.lg",
+      "functionExamples": [
+        "css({ textStyle: 'serif.lg' })"
+      ],
+      "jsxExamples": [
+        "<Box textStyle=\"serif.lg\" />"
+      ]
+    },
+    {
+      "name": "serif.md",
+      "functionExamples": [
+        "css({ textStyle: 'serif.md' })"
+      ],
+      "jsxExamples": [
+        "<Box textStyle=\"serif.md\" />"
+      ]
+    },
+    {
+      "name": "serif.sm",
+      "functionExamples": [
+        "css({ textStyle: 'serif.sm' })"
+      ],
+      "jsxExamples": [
+        "<Box textStyle=\"serif.sm\" />"
+      ]
+    },
+    {
+      "name": "serif.xs",
+      "functionExamples": [
+        "css({ textStyle: 'serif.xs' })"
+      ],
+      "jsxExamples": [
+        "<Box textStyle=\"serif.xs\" />"
+      ]
+    },
     {
       "name": "mono.lg",
       "functionExamples": [

package/dist/specs/tokens.json

@@ -185,9 +185,19 @@
           "cssVar": "var(--oks-borders-default)"
         },
         {
-          "name": "strong",
+          "name": "bold",
           "value": "var(--oks-border-widths-2) solid var(--oks-colors-border-bold)",
-          "cssVar": "var(--oks-borders-strong)"
+          "cssVar": "var(--oks-borders-bold)"
+        },
+        {
+          "name": "inverse",
+          "value": "var(--oks-border-widths-1) solid var(--oks-colors-border-inverse)",
+          "cssVar": "var(--oks-borders-inverse)"
+        },
+        {
+          "name": "disabled",
+          "value": "var(--oks-border-widths-1) solid var(--oks-colors-border-disabled)",
+          "cssVar": "var(--oks-borders-disabled)"
         },
         {
           "name": "input",
@@ -409,6 +419,11 @@
           "value": "#E2E3E4",
           "cssVar": "var(--oks-colors-dark-neutral-110)"
         },
+        {
+          "name": "darkNeutral.120",
+          "value": "#F1F1F2",
+          "cssVar": "var(--oks-colors-dark-neutral-120)"
+        },
         {
           "name": "darkNeutralA.10",
           "value": "#BDBDBD0A",
@@ -1128,6 +1143,106 @@
           "name": "slate.100",
           "value": "#000000",
           "cssVar": "var(--oks-colors-slate-100)"
+        },
+        {
+          "name": "shadow.raised.1.light",
+          "value": "rgba(30, 31, 33, 0.25)",
+          "cssVar": "var(--oks-colors-shadow-raised-1-light)"
+        },
+        {
+          "name": "shadow.raised.1.dark",
+          "value": "rgba(1, 4, 4, 0.5)",
+          "cssVar": "var(--oks-colors-shadow-raised-1-dark)"
+        },
+        {
+          "name": "shadow.raised.2.light",
+          "value": "rgba(30, 31, 33, 0.31)",
+          "cssVar": "var(--oks-colors-shadow-raised-2-light)"
+        },
+        {
+          "name": "shadow.raised.2.dark",
+          "value": "rgba(1, 4, 4, 0.5)",
+          "cssVar": "var(--oks-colors-shadow-raised-2-dark)"
+        },
+        {
+          "name": "shadow.elevated.1.light",
+          "value": "rgba(0, 0, 0, 0)",
+          "cssVar": "var(--oks-colors-shadow-elevated-1-light)"
+        },
+        {
+          "name": "shadow.elevated.1.dark",
+          "value": "rgba(95, 95, 95, 0.06)",
+          "cssVar": "var(--oks-colors-shadow-elevated-1-dark)"
+        },
+        {
+          "name": "shadow.elevated.2.light",
+          "value": "rgba(30, 31, 33, 0.2)",
+          "cssVar": "var(--oks-colors-shadow-elevated-2-light)"
+        },
+        {
+          "name": "shadow.elevated.2.dark",
+          "value": "rgba(1, 4, 4, 0.43)",
+          "cssVar": "var(--oks-colors-shadow-elevated-2-dark)"
+        },
+        {
+          "name": "shadow.elevated.3.light",
+          "value": "rgba(30, 31, 33, 0.31)",
+          "cssVar": "var(--oks-colors-shadow-elevated-3-light)"
+        },
+        {
+          "name": "shadow.elevated.3.dark",
+          "value": "rgba(1, 4, 4, 0.5)",
+          "cssVar": "var(--oks-colors-shadow-elevated-3-dark)"
+        },
+        {
+          "name": "shadow.overlay.1.light",
+          "value": "rgba(0, 0, 0, 0)",
+          "cssVar": "var(--oks-colors-shadow-overlay-1-light)"
+        },
+        {
+          "name": "shadow.overlay.1.dark",
+          "value": "rgba(189, 189, 189, 0.12)",
+          "cssVar": "var(--oks-colors-shadow-overlay-1-dark)"
+        },
+        {
+          "name": "shadow.overlay.2.light",
+          "value": "rgba(30, 31, 33, 0.15)",
+          "cssVar": "var(--oks-colors-shadow-overlay-2-light)"
+        },
+        {
+          "name": "shadow.overlay.2.dark",
+          "value": "rgba(1, 4, 4, 0.36)",
+          "cssVar": "var(--oks-colors-shadow-overlay-2-dark)"
+        },
+        {
+          "name": "shadow.overlay.3.light",
+          "value": "rgba(30, 31, 33, 0.31)",
+          "cssVar": "var(--oks-colors-shadow-overlay-3-light)"
+        },
+        {
+          "name": "shadow.overlay.3.dark",
+          "value": "rgba(1, 4, 4, 0.5)",
+          "cssVar": "var(--oks-colors-shadow-overlay-3-dark)"
+        },
+        {
+          "name": "shadow.overflow.1.light",
+          "value": "rgba(30, 31, 33, 0.16)",
+          "cssVar": "var(--oks-colors-shadow-overflow-1-light)"
+        },
+        {
+          "name": "shadow.overflow.1.dark",
+          "value": "rgba(1, 4, 4, 0.56)",
+          "cssVar": "var(--oks-colors-shadow-overflow-1-dark)"
+        },
+        {
+          "name": "shadow.overflow.2.light",
+          "value": "rgba(30, 31, 33, 0.12)",
+          "cssVar": "var(--oks-colors-shadow-overflow-2-light)"
+        },
+        {
+          "name": "shadow.overflow.2.dark",
+          "value": "rgba(1, 4, 4, 0.5)",
+          "cssVar": "var(--oks-colors-shadow-overflow-2-dark)"
         }
       ],
       "tokenFunctionExamples": [
@@ -1314,6 +1429,11 @@
     {
       "type": "fontSizes",
       "values": [
+        {
+          "name": "10",
+          "value": "var(--oks-sizes-10)",
+          "cssVar": "var(--oks-font-sizes-10)"
+        },
         {
           "name": "12",
           "value": "var(--oks-sizes-12)",
@@ -1376,14 +1496,14 @@
         }
       ],
       "tokenFunctionExamples": [
-        "token('fontSizes.12')",
-        "token.var('fontSizes.12')"
+        "token('fontSizes.10')",
+        "token.var('fontSizes.10')"
       ],
       "functionExamples": [
-        "css({ fontSize: '12' })"
+        "css({ fontSize: '10' })"
       ],
       "jsxExamples": [
-        "<Box fontSize=\"12\" />"
+        "<Box fontSize=\"10\" />"
       ]
     },
     {
@@ -1634,6 +1754,11 @@
           "value": "1.5rem",
           "cssVar": "var(--oks-numeric-sizes-24)"
         },
+        {
+          "name": "28",
+          "value": "1.75rem",
+          "cssVar": "var(--oks-numeric-sizes-28)"
+        },
         {
           "name": "32",
           "value": "2rem",
@@ -1871,88 +1996,78 @@
       "values": [
         {
           "name": "zeroShadow",
-          "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) rgba(0, 0, 0, 0), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) rgba(0, 0, 0, 0)",
+          "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-colors-transparent), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-colors-transparent)",
           "cssVar": "var(--oks-shadows-zero-shadow)"
         },
         {
           "name": "raisedLight",
-          "value": "var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-sizes-1) rgba(30, 31, 33, 0.25), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) rgba(30, 31, 33, 0.31)",
+          "value": "var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-sizes-1) var(--oks-colors-shadow-raised-1-light), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-raised-2-light)",
           "cssVar": "var(--oks-shadows-raised-light)"
         },
+        {
+          "name": "raisedLightUp",
+          "value": "var(--oks-sizes-0) [-1] var(--oks-sizes-1) var(--oks-colors-shadow-raised-1-light), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-raised-2-light)",
+          "cssVar": "var(--oks-shadows-raised-light-up)"
+        },
         {
           "name": "raisedDark",
-          "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) rgba(0, 0, 0, 0), var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-sizes-1) rgba(1, 4, 4, 0.5), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) rgba(1, 4, 4, 0.5)",
+          "value": "var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-sizes-1) var(--oks-colors-shadow-raised-1-dark), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-raised-2-dark)",
           "cssVar": "var(--oks-shadows-raised-dark)"
         },
+        {
+          "name": "raisedDarkUp",
+          "value": "var(--oks-sizes-0) [-1] var(--oks-sizes-1) var(--oks-colors-shadow-raised-1-dark), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-raised-2-dark)",
+          "cssVar": "var(--oks-shadows-raised-dark-up)"
+        },
         {
           "name": "elevatedLight",
-          "value": "var(--oks-sizes-0) var(--oks-sizes-4) var(--oks-sizes-7) rgba(30, 31, 33, 0.2), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) rgba(30, 31, 33, 0.31)",
+          "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-colors-shadow-elevated-1-light), var(--oks-sizes-0) var(--oks-sizes-4) var(--oks-sizes-7) var(--oks-colors-shadow-elevated-2-light), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-elevated-3-light)",
           "cssVar": "var(--oks-shadows-elevated-light)"
         },
+        {
+          "name": "elevatedLightUp",
+          "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-colors-shadow-elevated-1-light), var(--oks-sizes-0) [-4] var(--oks-sizes-7) var(--oks-colors-shadow-elevated-2-light), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-elevated-3-light)",
+          "cssVar": "var(--oks-shadows-elevated-light-up)"
+        },
         {
           "name": "elevatedDark",
-          "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) rgba(95, 95, 95, 0.06), var(--oks-sizes-0) var(--oks-sizes-4) var(--oks-sizes-7) rgba(1, 4, 4, 0.43), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) rgba(1, 4, 4, 0.5)",
+          "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-colors-shadow-elevated-1-dark), var(--oks-sizes-0) var(--oks-sizes-4) var(--oks-sizes-7) var(--oks-colors-shadow-elevated-2-dark), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-elevated-3-dark)",
           "cssVar": "var(--oks-shadows-elevated-dark)"
         },
+        {
+          "name": "elevatedDarkUp",
+          "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-colors-shadow-elevated-1-dark), var(--oks-sizes-0) [-4] var(--oks-sizes-7) var(--oks-colors-shadow-elevated-2-dark), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-elevated-3-dark)",
+          "cssVar": "var(--oks-shadows-elevated-dark-up)"
+        },
         {
           "name": "overlayLight",
-          "value": "var(--oks-sizes-0) var(--oks-sizes-8) var(--oks-sizes-12) rgba(30, 31, 33, 0.15), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) rgba(30, 31, 33, 0.31)",
+          "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-colors-shadow-overlay-1-light), var(--oks-sizes-0) var(--oks-sizes-8) var(--oks-sizes-12) var(--oks-colors-shadow-overlay-2-light), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-overlay-3-light)",
           "cssVar": "var(--oks-shadows-overlay-light)"
         },
+        {
+          "name": "overlayLightUp",
+          "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-colors-shadow-overlay-1-light), var(--oks-sizes-0) [-8] var(--oks-sizes-12) var(--oks-colors-shadow-overlay-2-light), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-overlay-3-light)",
+          "cssVar": "var(--oks-shadows-overlay-light-up)"
+        },
         {
           "name": "overlayDark",
-          "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) rgba(189, 189, 189, 0.12), var(--oks-sizes-0) var(--oks-sizes-8) var(--oks-sizes-12) rgba(1, 4, 4, 0.36), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) rgba(1, 4, 4, 0.5)",
+          "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-colors-shadow-overlay-1-dark), var(--oks-sizes-0) var(--oks-sizes-8) var(--oks-sizes-12) var(--oks-colors-shadow-overlay-2-dark), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-overlay-3-dark)",
           "cssVar": "var(--oks-shadows-overlay-dark)"
         },
+        {
+          "name": "overlayDarkUp",
+          "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-colors-shadow-overlay-1-dark), var(--oks-sizes-0) [-8] var(--oks-sizes-12) var(--oks-colors-shadow-overlay-2-dark), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-overlay-3-dark)",
+          "cssVar": "var(--oks-shadows-overlay-dark-up)"
+        },
         {
           "name": "overflowLight",
-          "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-8) rgba(30, 31, 33, 0.16), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) rgba(30, 31, 33, 0.12)",
+          "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-8) var(--oks-colors-shadow-overflow-1-light), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-overflow-2-light)",
           "cssVar": "var(--oks-shadows-overflow-light)"
         },
         {
           "name": "overflowDark",
-          "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-12) rgba(1, 4, 4, 0.56), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) rgba(1, 4, 4, 0.5)",
+          "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-12) var(--oks-colors-shadow-overflow-1-dark), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-colors-shadow-overflow-2-dark)",
           "cssVar": "var(--oks-shadows-overflow-dark)"
-        },
-        {
-          "name": "lowLight",
-          "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-2) rgba(30, 30, 30, 0.2), var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-sizes-1) rgba(30, 30, 30, 0.2), var(--oks-sizes-0) var(--oks-sizes-2) var(--oks-sizes-3) rgba(30, 30, 30, 0.2)",
-          "cssVar": "var(--oks-shadows-low-light)"
-        },
-        {
-          "name": "lowDark",
-          "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-2) rgba(0, 0, 0, 0.4), var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-sizes-1) rgba(0, 0, 0, 0.4), var(--oks-sizes-0) var(--oks-sizes-2) var(--oks-sizes-3) rgba(0, 0, 0, 0.4)",
-          "cssVar": "var(--oks-shadows-low-dark)"
-        },
-        {
-          "name": "mediumLight",
-          "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-2) rgba(30, 30, 30, 0.2), var(--oks-sizes-0) var(--oks-sizes-2) var(--oks-sizes-2) rgba(30, 30, 30, 0.2), var(--oks-sizes-0) var(--oks-sizes-4) var(--oks-sizes-4) rgba(30, 30, 30, 0.2), var(--oks-sizes-0) var(--oks-sizes-8) var(--oks-sizes-8) rgba(30, 30, 30, 0.2)",
-          "cssVar": "var(--oks-shadows-medium-light)"
-        },
-        {
-          "name": "mediumDark",
-          "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-2) rgba(0, 0, 0, 0.4), var(--oks-sizes-0) var(--oks-sizes-2) var(--oks-sizes-2) rgba(0, 0, 0, 0.4), var(--oks-sizes-0) var(--oks-sizes-4) var(--oks-sizes-4) rgba(0, 0, 0, 0.4), var(--oks-sizes-0) var(--oks-sizes-8) var(--oks-sizes-8) rgba(0, 0, 0, 0.4)",
-          "cssVar": "var(--oks-shadows-medium-dark)"
-        },
-        {
-          "name": "highLight",
-          "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-2) rgba(30, 30, 30, 0.2), var(--oks-sizes-0) var(--oks-sizes-2) var(--oks-sizes-4) rgba(30, 30, 30, 0.2), var(--oks-sizes-0) var(--oks-sizes-6) var(--oks-sizes-8) var(--oks-sizes-1) rgba(30, 30, 30, 0.2), var(--oks-sizes-0) var(--oks-sizes-14) var(--oks-sizes-16) var(--oks-sizes-2) rgba(30, 30, 30, 0.2)",
-          "cssVar": "var(--oks-shadows-high-light)"
-        },
-        {
-          "name": "highDark",
-          "value": "var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-2) rgba(0, 0, 0, 0.4), var(--oks-sizes-0) var(--oks-sizes-2) var(--oks-sizes-4) rgba(0, 0, 0, 0.4), var(--oks-sizes-0) var(--oks-sizes-6) var(--oks-sizes-8) var(--oks-sizes-1) rgba(0, 0, 0, 0.4), var(--oks-sizes-0) var(--oks-sizes-14) var(--oks-sizes-16) var(--oks-sizes-2) rgba(0, 0, 0, 0.4)",
-          "cssVar": "var(--oks-shadows-high-dark)"
-        },
-        {
-          "name": "insetLight",
-          "value": "inset var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-2) rgba(30, 30, 30, 0.2), inset var(--oks-sizes-0) var(--oks-sizes-2) var(--oks-sizes-1) rgba(30, 30, 30, 0.2), inset var(--oks-sizes-0) var(--oks-sizes-3) var(--oks-sizes-2) rgba(30, 30, 30, 0.2)",
-          "cssVar": "var(--oks-shadows-inset-light)"
-        },
-        {
-          "name": "insetDark",
-          "value": "inset var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-2) rgba(0, 0, 0, 0.4), inset var(--oks-sizes-0) var(--oks-sizes-2) var(--oks-sizes-1) rgba(0, 0, 0, 0.4), inset var(--oks-sizes-0) var(--oks-sizes-3) var(--oks-sizes-2) rgba(0, 0, 0, 0.4)",
-          "cssVar": "var(--oks-shadows-inset-dark)"
         }
       ],
       "tokenFunctionExamples": [
@@ -2054,6 +2169,11 @@
           "value": "1.5rem",
           "cssVar": "var(--oks-sizes-24)"
         },
+        {
+          "name": "28",
+          "value": "1.75rem",
+          "cssVar": "var(--oks-sizes-28)"
+        },
         {
           "name": "32",
           "value": "2rem",
@@ -2316,32 +2436,32 @@
         },
         {
           "name": "breakpoint-xs",
-          "value": "480px",
+          "value": "30rem",
           "cssVar": "var(--oks-sizes-breakpoint-xs)"
         },
         {
           "name": "breakpoint-sm",
-          "value": "640px",
+          "value": "40rem",
           "cssVar": "var(--oks-sizes-breakpoint-sm)"
         },
         {
           "name": "breakpoint-md",
-          "value": "768px",
+          "value": "48rem",
           "cssVar": "var(--oks-sizes-breakpoint-md)"
         },
         {
           "name": "breakpoint-lg",
-          "value": "1024px",
+          "value": "64rem",
           "cssVar": "var(--oks-sizes-breakpoint-lg)"
         },
         {
           "name": "breakpoint-xl",
-          "value": "1280px",
+          "value": "80rem",
           "cssVar": "var(--oks-sizes-breakpoint-xl)"
         },
         {
           "name": "breakpoint-2xl",
-          "value": "1536px",
+          "value": "96rem",
           "cssVar": "var(--oks-sizes-breakpoint-2xl)"
         }
       ],
@@ -2444,6 +2564,11 @@
           "value": "1.5rem",
           "cssVar": "var(--oks-spacing-24)"
         },
+        {
+          "name": "28",
+          "value": "1.75rem",
+          "cssVar": "var(--oks-spacing-28)"
+        },
         {
           "name": "32",
           "value": "2rem",
@@ -2701,37 +2826,112 @@
         "<Box color=\"full\" />"
       ]
     },
+    {
+      "type": "zIndex",
+      "values": [
+        {
+          "name": "0",
+          "value": 0,
+          "cssVar": "var(--oks-z-index-0)"
+        },
+        {
+          "name": "1",
+          "value": 1,
+          "cssVar": "var(--oks-z-index-1)"
+        },
+        {
+          "name": "2",
+          "value": 2,
+          "cssVar": "var(--oks-z-index-2)"
+        },
+        {
+          "name": "3",
+          "value": 3,
+          "cssVar": "var(--oks-z-index-3)"
+        },
+        {
+          "name": "4",
+          "value": 4,
+          "cssVar": "var(--oks-z-index-4)"
+        },
+        {
+          "name": "5",
+          "value": 5,
+          "cssVar": "var(--oks-z-index-5)"
+        },
+        {
+          "name": "10",
+          "value": 10,
+          "cssVar": "var(--oks-z-index-10)"
+        },
+        {
+          "name": "1000",
+          "value": 1000,
+          "cssVar": "var(--oks-z-index-1000)"
+        },
+        {
+          "name": "1100",
+          "value": 1100,
+          "cssVar": "var(--oks-z-index-1100)"
+        },
+        {
+          "name": "1101",
+          "value": 1101,
+          "cssVar": "var(--oks-z-index-1101)"
+        },
+        {
+          "name": "1200",
+          "value": 1200,
+          "cssVar": "var(--oks-z-index-1200)"
+        },
+        {
+          "name": "-1",
+          "value": -1,
+          "cssVar": "var(--oks-z-index--1)"
+        }
+      ],
+      "tokenFunctionExamples": [
+        "token('zIndex.0')",
+        "token.var('zIndex.0')"
+      ],
+      "functionExamples": [
+        "css({ zIndex: '0' })"
+      ],
+      "jsxExamples": [
+        "<Box zIndex=\"0\" />"
+      ]
+    },
     {
       "type": "breakpoints",
       "values": [
         {
           "name": "xs",
-          "value": "480px",
+          "value": "30rem",
           "cssVar": "var(--oks-breakpoints-xs)"
         },
         {
           "name": "sm",
-          "value": "640px",
+          "value": "40rem",
           "cssVar": "var(--oks-breakpoints-sm)"
         },
         {
           "name": "md",
-          "value": "768px",
+          "value": "48rem",
           "cssVar": "var(--oks-breakpoints-md)"
         },
         {
           "name": "lg",
-          "value": "1024px",
+          "value": "64rem",
           "cssVar": "var(--oks-breakpoints-lg)"
         },
         {
           "name": "xl",
-          "value": "1280px",
+          "value": "80rem",
           "cssVar": "var(--oks-breakpoints-xl)"
         },
         {
           "name": "2xl",
-          "value": "1536px",
+          "value": "96rem",
           "cssVar": "var(--oks-breakpoints-2xl)"
         }
       ],