@okshaun/components 1.0.1 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (128) hide show
  1. package/dist/.mcp.json +2 -5
  2. package/dist/icon-metadata.json +5173 -0
  3. package/dist/index.js +17088 -9273
  4. package/dist/index.js.map +1 -1
  5. package/dist/panda.buildinfo.json +693 -0
  6. package/dist/playroom-static.css +187432 -0
  7. package/dist/{preset-BzrKiUEH.js → preset-Coz-VwQR.js} +4051 -3217
  8. package/dist/preset-Coz-VwQR.js.map +1 -0
  9. package/dist/preset.js +1 -1
  10. package/dist/specs/color-palette.json +22 -1
  11. package/dist/specs/patterns.json +0 -16
  12. package/dist/specs/recipes.json +411 -247
  13. package/dist/specs/semantic-tokens.json +330 -115
  14. package/dist/specs/text-styles.json +72 -0
  15. package/dist/specs/tokens.json +237 -27
  16. package/dist/sprite.svg +1 -1
  17. package/dist/sprite.symbol.html +6662 -320
  18. package/dist/styles.css +36938 -5
  19. package/dist/svgs/calendar-lock.svg +1 -0
  20. package/dist/svgs/computer.svg +1 -0
  21. package/dist/svgs/cookie.svg +1 -0
  22. package/dist/svgs/folder-check.svg +1 -0
  23. package/dist/svgs/folder-copy.svg +1 -0
  24. package/dist/svgs/folder-dashed.svg +1 -0
  25. package/dist/svgs/folder-open.svg +1 -0
  26. package/dist/svgs/folder-topic.svg +1 -0
  27. package/dist/svgs/folder.svg +1 -0
  28. package/dist/svgs/mobile.svg +1 -0
  29. package/dist/svgs/numpad.svg +1 -0
  30. package/dist/svgs/phone.svg +1 -0
  31. package/dist/svgs/qr-code.svg +1 -0
  32. package/dist/svgs/sparkle.svg +1 -0
  33. package/dist/svgs/trolley.svg +1 -0
  34. package/dist/types/index.d.ts +834 -347
  35. package/package.json +49 -36
  36. package/src/recipes/avatar.ts +4 -4
  37. package/src/recipes/badge.ts +22 -48
  38. package/src/recipes/box.ts +1 -7
  39. package/src/recipes/breadcrumbs.ts +42 -25
  40. package/src/recipes/button.ts +151 -85
  41. package/src/recipes/card.ts +5 -1
  42. package/src/recipes/checkbox.ts +23 -24
  43. package/src/recipes/checkboxInput.ts +25 -0
  44. package/src/recipes/chip.ts +35 -37
  45. package/src/recipes/code.ts +4 -4
  46. package/src/recipes/datePicker.ts +223 -0
  47. package/src/recipes/divider.ts +38 -31
  48. package/src/recipes/formField.ts +41 -23
  49. package/src/recipes/highlightText.ts +14 -0
  50. package/src/recipes/icon.ts +13 -0
  51. package/src/recipes/list.ts +14 -0
  52. package/src/recipes/listItem.ts +310 -0
  53. package/src/recipes/listItemGroup.ts +62 -0
  54. package/src/recipes/menu.ts +90 -163
  55. package/src/recipes/modal.ts +51 -18
  56. package/src/recipes/radio.ts +29 -20
  57. package/src/recipes/radioInput.ts +25 -0
  58. package/src/recipes/recipes-regular.ts +14 -0
  59. package/src/recipes/{index.ts → recipes-slot.ts} +14 -23
  60. package/src/recipes/select.ts +1 -1
  61. package/src/recipes/spinner.ts +49 -23
  62. package/src/recipes/tag.ts +80 -84
  63. package/src/recipes/text.ts +18 -19
  64. package/src/recipes/textInput.ts +205 -0
  65. package/src/recipes/textarea.ts +65 -138
  66. package/src/recipes/themeSwitcher.ts +3 -3
  67. package/src/recipes/timePicker.ts +199 -0
  68. package/src/recipes/toggle.ts +72 -99
  69. package/src/recipes/toggleInput.ts +26 -0
  70. package/src/recipes/tooltip.ts +52 -343
  71. package/src/styles/index.css +1 -1
  72. package/src/styles/primitives/borders.ts +7 -1
  73. package/src/styles/primitives/colors.ts +51 -0
  74. package/src/styles/primitives/fontSizes.ts +1 -0
  75. package/src/styles/primitives/index.ts +2 -1
  76. package/src/styles/primitives/radii.ts +1 -1
  77. package/src/styles/primitives/shadows.ts +9 -9
  78. package/src/styles/primitives/sizes.ts +1 -0
  79. package/src/styles/primitives/zIndex.ts +17 -0
  80. package/src/styles/semantics/colors.ts +137 -82
  81. package/src/styles/semantics/index.ts +1 -0
  82. package/src/styles/semantics/zIndex.ts +18 -0
  83. package/src/styles/utilities/breakpoints.ts +6 -6
  84. package/src/styles/utilities/index.ts +3 -0
  85. package/src/styles/utilities/textStyles.ts +71 -1
  86. package/src/utils/splitProps.ts +4 -4
  87. package/dist/preset-BzrKiUEH.js.map +0 -1
  88. package/dist/styles/global.css +0 -148
  89. package/dist/styles/recipes/avatar.css +0 -185
  90. package/dist/styles/recipes/badge.css +0 -85
  91. package/dist/styles/recipes/breadcrumbs.css +0 -38
  92. package/dist/styles/recipes/button.css +0 -195
  93. package/dist/styles/recipes/card.css +0 -57
  94. package/dist/styles/recipes/checkbox-input.css +0 -12
  95. package/dist/styles/recipes/checkbox.css +0 -90
  96. package/dist/styles/recipes/chip.css +0 -137
  97. package/dist/styles/recipes/code.css +0 -12
  98. package/dist/styles/recipes/divider.css +0 -43
  99. package/dist/styles/recipes/form-field.css +0 -39
  100. package/dist/styles/recipes/heading.css +0 -40
  101. package/dist/styles/recipes/icon-button.css +0 -181
  102. package/dist/styles/recipes/label.css +0 -14
  103. package/dist/styles/recipes/link.css +0 -49
  104. package/dist/styles/recipes/menu.css +0 -141
  105. package/dist/styles/recipes/modal.css +0 -99
  106. package/dist/styles/recipes/pre.css +0 -16
  107. package/dist/styles/recipes/radio-input.css +0 -7
  108. package/dist/styles/recipes/radio.css +0 -82
  109. package/dist/styles/recipes/select.css +0 -103
  110. package/dist/styles/recipes/spinner.css +0 -36
  111. package/dist/styles/recipes/tag.css +0 -27
  112. package/dist/styles/recipes/text.css +0 -46
  113. package/dist/styles/recipes/textarea.css +0 -91
  114. package/dist/styles/recipes/textinput.css +0 -87
  115. package/dist/styles/recipes/theme-switcher.css +0 -53
  116. package/dist/styles/recipes/toggle-input.css +0 -12
  117. package/dist/styles/recipes/toggle.css +0 -125
  118. package/dist/styles/recipes/tooltip.css +0 -133
  119. package/dist/styles/recipes.css +0 -30
  120. package/dist/styles/reset.css +0 -1
  121. package/dist/styles/tokens.css +0 -1016
  122. package/dist/styles/utilities.css +0 -1694
  123. package/src/recipes/checkboxinput.ts +0 -15
  124. package/src/recipes/radioinput.ts +0 -12
  125. package/src/recipes/textinput.ts +0 -100
  126. package/src/recipes/toggleinput.ts +0 -16
  127. package/src/utils/injectSprite.ts +0 -36
  128. package/src/utils/spriteContent.ts +0 -4
package/dist/specs/text-styles.json CHANGED
@@ -109,6 +109,78 @@
109
109
  "<Box textStyle=\"body.xs\" />"
110
110
  ]
111
111
  },
112
+ {
113
+ "name": "sans.lg",
114
+ "functionExamples": [
115
+ "css({ textStyle: 'sans.lg' })"
116
+ ],
117
+ "jsxExamples": [
118
+ "<Box textStyle=\"sans.lg\" />"
119
+ ]
120
+ },
121
+ {
122
+ "name": "sans.md",
123
+ "functionExamples": [
124
+ "css({ textStyle: 'sans.md' })"
125
+ ],
126
+ "jsxExamples": [
127
+ "<Box textStyle=\"sans.md\" />"
128
+ ]
129
+ },
130
+ {
131
+ "name": "sans.sm",
132
+ "functionExamples": [
133
+ "css({ textStyle: 'sans.sm' })"
134
+ ],
135
+ "jsxExamples": [
136
+ "<Box textStyle=\"sans.sm\" />"
137
+ ]
138
+ },
139
+ {
140
+ "name": "sans.xs",
141
+ "functionExamples": [
142
+ "css({ textStyle: 'sans.xs' })"
143
+ ],
144
+ "jsxExamples": [
145
+ "<Box textStyle=\"sans.xs\" />"
146
+ ]
147
+ },
148
+ {
149
+ "name": "serif.lg",
150
+ "functionExamples": [
151
+ "css({ textStyle: 'serif.lg' })"
152
+ ],
153
+ "jsxExamples": [
154
+ "<Box textStyle=\"serif.lg\" />"
155
+ ]
156
+ },
157
+ {
158
+ "name": "serif.md",
159
+ "functionExamples": [
160
+ "css({ textStyle: 'serif.md' })"
161
+ ],
162
+ "jsxExamples": [
163
+ "<Box textStyle=\"serif.md\" />"
164
+ ]
165
+ },
166
+ {
167
+ "name": "serif.sm",
168
+ "functionExamples": [
169
+ "css({ textStyle: 'serif.sm' })"
170
+ ],
171
+ "jsxExamples": [
172
+ "<Box textStyle=\"serif.sm\" />"
173
+ ]
174
+ },
175
+ {
176
+ "name": "serif.xs",
177
+ "functionExamples": [
178
+ "css({ textStyle: 'serif.xs' })"
179
+ ],
180
+ "jsxExamples": [
181
+ "<Box textStyle=\"serif.xs\" />"
182
+ ]
183
+ },
112
184
  {
113
185
  "name": "mono.lg",
114
186
  "functionExamples": [
package/dist/specs/tokens.json CHANGED
@@ -185,9 +185,19 @@
185
185
  "cssVar": "var(--oks-borders-default)"
186
186
  },
187
187
  {
188
- "name": "strong",
188
+ "name": "bold",
189
189
  "value": "var(--oks-border-widths-2) solid var(--oks-colors-border-bold)",
190
- "cssVar": "var(--oks-borders-strong)"
190
+ "cssVar": "var(--oks-borders-bold)"
191
+ },
192
+ {
193
+ "name": "inverse",
194
+ "value": "var(--oks-border-widths-1) solid var(--oks-colors-border-inverse)",
195
+ "cssVar": "var(--oks-borders-inverse)"
196
+ },
197
+ {
198
+ "name": "disabled",
199
+ "value": "var(--oks-border-widths-1) solid var(--oks-colors-border-disabled)",
200
+ "cssVar": "var(--oks-borders-disabled)"
191
201
  },
192
202
  {
193
203
  "name": "input",
@@ -409,6 +419,11 @@
409
419
  "value": "#E2E3E4",
410
420
  "cssVar": "var(--oks-colors-dark-neutral-110)"
411
421
  },
422
+ {
423
+ "name": "darkNeutral.120",
424
+ "value": "#F1F1F2",
425
+ "cssVar": "var(--oks-colors-dark-neutral-120)"
426
+ },
412
427
  {
413
428
  "name": "darkNeutralA.10",
414
429
  "value": "#BDBDBD0A",
@@ -1128,6 +1143,106 @@
1128
1143
  "name": "slate.100",
1129
1144
  "value": "#000000",
1130
1145
  "cssVar": "var(--oks-colors-slate-100)"
1146
+ },
1147
+ {
1148
+ "name": "shadow.raised.1.light",
1149
+ "value": "rgba(30, 31, 33, 0.25)",
1150
+ "cssVar": "var(--oks-colors-shadow-raised-1-light)"
1151
+ },
1152
+ {
1153
+ "name": "shadow.raised.1.dark",
1154
+ "value": "rgba(1, 4, 4, 0.5)",
1155
+ "cssVar": "var(--oks-colors-shadow-raised-1-dark)"
1156
+ },
1157
+ {
1158
+ "name": "shadow.raised.2.light",
1159
+ "value": "rgba(30, 31, 33, 0.31)",
1160
+ "cssVar": "var(--oks-colors-shadow-raised-2-light)"
1161
+ },
1162
+ {
1163
+ "name": "shadow.raised.2.dark",
1164
+ "value": "rgba(1, 4, 4, 0.5)",
1165
+ "cssVar": "var(--oks-colors-shadow-raised-2-dark)"
1166
+ },
1167
+ {
1168
+ "name": "shadow.elevated.1.light",
1169
+ "value": "rgba(0, 0, 0, 0)",
1170
+ "cssVar": "var(--oks-colors-shadow-elevated-1-light)"
1171
+ },
1172
+ {
1173
+ "name": "shadow.elevated.1.dark",
1174
+ "value": "rgba(95, 95, 95, 0.06)",
1175
+ "cssVar": "var(--oks-colors-shadow-elevated-1-dark)"
1176
+ },
1177
+ {
1178
+ "name": "shadow.elevated.2.light",
1179
+ "value": "rgba(30, 31, 33, 0.2)",
1180
+ "cssVar": "var(--oks-colors-shadow-elevated-2-light)"
1181
+ },
1182
+ {
1183
+ "name": "shadow.elevated.2.dark",
1184
+ "value": "rgba(1, 4, 4, 0.43)",
1185
+ "cssVar": "var(--oks-colors-shadow-elevated-2-dark)"
1186
+ },
1187
+ {
1188
+ "name": "shadow.elevated.3.light",
1189
+ "value": "rgba(30, 31, 33, 0.31)",
1190
+ "cssVar": "var(--oks-colors-shadow-elevated-3-light)"
1191
+ },
1192
+ {
1193
+ "name": "shadow.elevated.3.dark",
1194
+ "value": "rgba(1, 4, 4, 0.5)",
1195
+ "cssVar": "var(--oks-colors-shadow-elevated-3-dark)"
1196
+ },
1197
+ {
1198
+ "name": "shadow.overlay.1.light",
1199
+ "value": "rgba(0, 0, 0, 0)",
1200
+ "cssVar": "var(--oks-colors-shadow-overlay-1-light)"
1201
+ },
1202
+ {
1203
+ "name": "shadow.overlay.1.dark",
1204
+ "value": "rgba(189, 189, 189, 0.12)",
1205
+ "cssVar": "var(--oks-colors-shadow-overlay-1-dark)"
1206
+ },
1207
+ {
1208
+ "name": "shadow.overlay.2.light",
1209
+ "value": "rgba(30, 31, 33, 0.15)",
1210
+ "cssVar": "var(--oks-colors-shadow-overlay-2-light)"
1211
+ },
1212
+ {
1213
+ "name": "shadow.overlay.2.dark",
1214
+ "value": "rgba(1, 4, 4, 0.36)",
1215
+ "cssVar": "var(--oks-colors-shadow-overlay-2-dark)"
1216
+ },
1217
+ {
1218
+ "name": "shadow.overlay.3.light",
1219
+ "value": "rgba(30, 31, 33, 0.31)",
1220
+ "cssVar": "var(--oks-colors-shadow-overlay-3-light)"
1221
+ },
1222
+ {
1223
+ "name": "shadow.overlay.3.dark",
1224
+ "value": "rgba(1, 4, 4, 0.5)",
1225
+ "cssVar": "var(--oks-colors-shadow-overlay-3-dark)"
1226
+ },
1227
+ {
1228
+ "name": "shadow.overflow.1.light",
1229
+ "value": "rgba(30, 31, 33, 0.16)",
1230
+ "cssVar": "var(--oks-colors-shadow-overflow-1-light)"
1231
+ },
1232
+ {
1233
+ "name": "shadow.overflow.1.dark",
1234
+ "value": "rgba(1, 4, 4, 0.56)",
1235
+ "cssVar": "var(--oks-colors-shadow-overflow-1-dark)"
1236
+ },
1237
+ {
1238
+ "name": "shadow.overflow.2.light",
1239
+ "value": "rgba(30, 31, 33, 0.12)",
1240
+ "cssVar": "var(--oks-colors-shadow-overflow-2-light)"
1241
+ },
1242
+ {
1243
+ "name": "shadow.overflow.2.dark",
1244
+ "value": "rgba(1, 4, 4, 0.5)",
1245
+ "cssVar": "var(--oks-colors-shadow-overflow-2-dark)"
1131
1246
  }
1132
1247
  ],
1133
1248
  "tokenFunctionExamples": [
@@ -1314,6 +1429,11 @@
1314
1429
  {
1315
1430
  "type": "fontSizes",
1316
1431
  "values": [
1432
+ {
1433
+ "name": "10",
1434
+ "value": "var(--oks-sizes-10)",
1435
+ "cssVar": "var(--oks-font-sizes-10)"
1436
+ },
1317
1437
  {
1318
1438
  "name": "12",
1319
1439
  "value": "var(--oks-sizes-12)",
@@ -1376,14 +1496,14 @@
1376
1496
  }
1377
1497
  ],
1378
1498
  "tokenFunctionExamples": [
1379
- "token('fontSizes.12')",
1380
- "token.var('fontSizes.12')"
1499
+ "token('fontSizes.10')",
1500
+ "token.var('fontSizes.10')"
1381
1501
  ],
1382
1502
  "functionExamples": [
1383
- "css({ fontSize: '12' })"
1503
+ "css({ fontSize: '10' })"
1384
1504
  ],
1385
1505
  "jsxExamples": [
1386
- "<Box fontSize=\"12\" />"
1506
+ "<Box fontSize=\"10\" />"
1387
1507
  ]
1388
1508
  },
1389
1509
  {
@@ -1634,6 +1754,11 @@
1634
1754
  "value": "1.5rem",
1635
1755
  "cssVar": "var(--oks-numeric-sizes-24)"
1636
1756
  },
1757
+ {
1758
+ "name": "28",
1759
+ "value": "1.75rem",
1760
+ "cssVar": "var(--oks-numeric-sizes-28)"
1761
+ },
1637
1762
  {
1638
1763
  "name": "32",
1639
1764
  "value": "2rem",
@@ -1871,47 +1996,47 @@
1871
1996
  "values": [
1872
1997
  {
1873
1998
  "name": "zeroShadow",
1874
- "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)",
1999
+ "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)",
1875
2000
  "cssVar": "var(--oks-shadows-zero-shadow)"
1876
2001
  },
1877
2002
  {
1878
2003
  "name": "raisedLight",
1879
- "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)",
2004
+ "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)",
1880
2005
  "cssVar": "var(--oks-shadows-raised-light)"
1881
2006
  },
1882
2007
  {
1883
2008
  "name": "raisedDark",
1884
- "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)",
2009
+ "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)",
1885
2010
  "cssVar": "var(--oks-shadows-raised-dark)"
1886
2011
  },
1887
2012
  {
1888
2013
  "name": "elevatedLight",
1889
- "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)",
2014
+ "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)",
1890
2015
  "cssVar": "var(--oks-shadows-elevated-light)"
1891
2016
  },
1892
2017
  {
1893
2018
  "name": "elevatedDark",
1894
- "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)",
2019
+ "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)",
1895
2020
  "cssVar": "var(--oks-shadows-elevated-dark)"
1896
2021
  },
1897
2022
  {
1898
2023
  "name": "overlayLight",
1899
- "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)",
2024
+ "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)",
1900
2025
  "cssVar": "var(--oks-shadows-overlay-light)"
1901
2026
  },
1902
2027
  {
1903
2028
  "name": "overlayDark",
1904
- "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)",
2029
+ "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)",
1905
2030
  "cssVar": "var(--oks-shadows-overlay-dark)"
1906
2031
  },
1907
2032
  {
1908
2033
  "name": "overflowLight",
1909
- "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)",
2034
+ "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)",
1910
2035
  "cssVar": "var(--oks-shadows-overflow-light)"
1911
2036
  },
1912
2037
  {
1913
2038
  "name": "overflowDark",
1914
- "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)",
2039
+ "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)",
1915
2040
  "cssVar": "var(--oks-shadows-overflow-dark)"
1916
2041
  },
1917
2042
  {
@@ -2054,6 +2179,11 @@
2054
2179
  "value": "1.5rem",
2055
2180
  "cssVar": "var(--oks-sizes-24)"
2056
2181
  },
2182
+ {
2183
+ "name": "28",
2184
+ "value": "1.75rem",
2185
+ "cssVar": "var(--oks-sizes-28)"
2186
+ },
2057
2187
  {
2058
2188
  "name": "32",
2059
2189
  "value": "2rem",
@@ -2316,32 +2446,32 @@
2316
2446
  },
2317
2447
  {
2318
2448
  "name": "breakpoint-xs",
2319
- "value": "480px",
2449
+ "value": "30rem",
2320
2450
  "cssVar": "var(--oks-sizes-breakpoint-xs)"
2321
2451
  },
2322
2452
  {
2323
2453
  "name": "breakpoint-sm",
2324
- "value": "640px",
2454
+ "value": "40rem",
2325
2455
  "cssVar": "var(--oks-sizes-breakpoint-sm)"
2326
2456
  },
2327
2457
  {
2328
2458
  "name": "breakpoint-md",
2329
- "value": "768px",
2459
+ "value": "48rem",
2330
2460
  "cssVar": "var(--oks-sizes-breakpoint-md)"
2331
2461
  },
2332
2462
  {
2333
2463
  "name": "breakpoint-lg",
2334
- "value": "1024px",
2464
+ "value": "64rem",
2335
2465
  "cssVar": "var(--oks-sizes-breakpoint-lg)"
2336
2466
  },
2337
2467
  {
2338
2468
  "name": "breakpoint-xl",
2339
- "value": "1280px",
2469
+ "value": "80rem",
2340
2470
  "cssVar": "var(--oks-sizes-breakpoint-xl)"
2341
2471
  },
2342
2472
  {
2343
2473
  "name": "breakpoint-2xl",
2344
- "value": "1536px",
2474
+ "value": "96rem",
2345
2475
  "cssVar": "var(--oks-sizes-breakpoint-2xl)"
2346
2476
  }
2347
2477
  ],
@@ -2444,6 +2574,11 @@
2444
2574
  "value": "1.5rem",
2445
2575
  "cssVar": "var(--oks-spacing-24)"
2446
2576
  },
2577
+ {
2578
+ "name": "28",
2579
+ "value": "1.75rem",
2580
+ "cssVar": "var(--oks-spacing-28)"
2581
+ },
2447
2582
  {
2448
2583
  "name": "32",
2449
2584
  "value": "2rem",
@@ -2701,37 +2836,112 @@
2701
2836
  "<Box color=\"full\" />"
2702
2837
  ]
2703
2838
  },
2839
+ {
2840
+ "type": "zIndex",
2841
+ "values": [
2842
+ {
2843
+ "name": "0",
2844
+ "value": 0,
2845
+ "cssVar": "var(--oks-z-index-0)"
2846
+ },
2847
+ {
2848
+ "name": "1",
2849
+ "value": 1,
2850
+ "cssVar": "var(--oks-z-index-1)"
2851
+ },
2852
+ {
2853
+ "name": "2",
2854
+ "value": 2,
2855
+ "cssVar": "var(--oks-z-index-2)"
2856
+ },
2857
+ {
2858
+ "name": "3",
2859
+ "value": 3,
2860
+ "cssVar": "var(--oks-z-index-3)"
2861
+ },
2862
+ {
2863
+ "name": "4",
2864
+ "value": 4,
2865
+ "cssVar": "var(--oks-z-index-4)"
2866
+ },
2867
+ {
2868
+ "name": "5",
2869
+ "value": 5,
2870
+ "cssVar": "var(--oks-z-index-5)"
2871
+ },
2872
+ {
2873
+ "name": "10",
2874
+ "value": 10,
2875
+ "cssVar": "var(--oks-z-index-10)"
2876
+ },
2877
+ {
2878
+ "name": "1000",
2879
+ "value": 1000,
2880
+ "cssVar": "var(--oks-z-index-1000)"
2881
+ },
2882
+ {
2883
+ "name": "1100",
2884
+ "value": 1100,
2885
+ "cssVar": "var(--oks-z-index-1100)"
2886
+ },
2887
+ {
2888
+ "name": "1101",
2889
+ "value": 1101,
2890
+ "cssVar": "var(--oks-z-index-1101)"
2891
+ },
2892
+ {
2893
+ "name": "1200",
2894
+ "value": 1200,
2895
+ "cssVar": "var(--oks-z-index-1200)"
2896
+ },
2897
+ {
2898
+ "name": "-1",
2899
+ "value": -1,
2900
+ "cssVar": "var(--oks-z-index--1)"
2901
+ }
2902
+ ],
2903
+ "tokenFunctionExamples": [
2904
+ "token('zIndex.0')",
2905
+ "token.var('zIndex.0')"
2906
+ ],
2907
+ "functionExamples": [
2908
+ "css({ zIndex: '0' })"
2909
+ ],
2910
+ "jsxExamples": [
2911
+ "<Box zIndex=\"0\" />"
2912
+ ]
2913
+ },
2704
2914
  {
2705
2915
  "type": "breakpoints",
2706
2916
  "values": [
2707
2917
  {
2708
2918
  "name": "xs",
2709
- "value": "480px",
2919
+ "value": "30rem",
2710
2920
  "cssVar": "var(--oks-breakpoints-xs)"
2711
2921
  },
2712
2922
  {
2713
2923
  "name": "sm",
2714
- "value": "640px",
2924
+ "value": "40rem",
2715
2925
  "cssVar": "var(--oks-breakpoints-sm)"
2716
2926
  },
2717
2927
  {
2718
2928
  "name": "md",
2719
- "value": "768px",
2929
+ "value": "48rem",
2720
2930
  "cssVar": "var(--oks-breakpoints-md)"
2721
2931
  },
2722
2932
  {
2723
2933
  "name": "lg",
2724
- "value": "1024px",
2934
+ "value": "64rem",
2725
2935
  "cssVar": "var(--oks-breakpoints-lg)"
2726
2936
  },
2727
2937
  {
2728
2938
  "name": "xl",
2729
- "value": "1280px",
2939
+ "value": "80rem",
2730
2940
  "cssVar": "var(--oks-breakpoints-xl)"
2731
2941
  },
2732
2942
  {
2733
2943
  "name": "2xl",
2734
- "value": "1536px",
2944
+ "value": "96rem",
2735
2945
  "cssVar": "var(--oks-breakpoints-2xl)"
2736
2946
  }
2737
2947
  ],