@okshaun/components 0.5.8 → 1.0.1

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 (129) hide show
  1. package/README.md +22 -26
  2. package/dist/.mcp.json +11 -0
  3. package/dist/index.d.ts +3 -1268
  4. package/dist/index.js +1231 -957
  5. package/dist/index.js.map +1 -1
  6. package/dist/okshaun-logo-white.svg +11 -0
  7. package/dist/okshaun-logo.svg +11 -0
  8. package/dist/preset-BzrKiUEH.js +8452 -0
  9. package/dist/preset-BzrKiUEH.js.map +1 -0
  10. package/dist/preset.js +3 -7234
  11. package/dist/preset.js.map +1 -1
  12. package/dist/specs/animation-styles.json +4 -0
  13. package/dist/specs/color-palette.json +98 -0
  14. package/dist/specs/conditions.json +1901 -0
  15. package/dist/specs/keyframes.json +137 -0
  16. package/dist/specs/layer-styles.json +23 -0
  17. package/dist/specs/patterns.json +475 -0
  18. package/dist/specs/recipes.json +907 -0
  19. package/dist/specs/semantic-tokens.json +2837 -0
  20. package/dist/specs/text-styles.json +149 -0
  21. package/dist/specs/tokens.json +2750 -0
  22. package/dist/sprite.svg +1 -1
  23. package/dist/sprite.symbol.html +14 -14
  24. package/dist/styles/global.css +148 -0
  25. package/dist/styles/recipes/avatar.css +185 -0
  26. package/dist/styles/recipes/badge.css +85 -0
  27. package/dist/styles/recipes/breadcrumbs.css +38 -0
  28. package/dist/styles/recipes/button.css +195 -0
  29. package/dist/styles/recipes/card.css +57 -0
  30. package/dist/styles/recipes/checkbox-input.css +12 -0
  31. package/dist/styles/recipes/checkbox.css +90 -0
  32. package/dist/styles/recipes/chip.css +137 -0
  33. package/dist/styles/recipes/code.css +12 -0
  34. package/dist/styles/recipes/divider.css +43 -0
  35. package/dist/styles/recipes/form-field.css +39 -0
  36. package/dist/styles/recipes/heading.css +40 -0
  37. package/dist/styles/recipes/icon-button.css +181 -0
  38. package/dist/styles/recipes/label.css +14 -0
  39. package/dist/styles/recipes/link.css +49 -0
  40. package/dist/styles/recipes/menu.css +141 -0
  41. package/dist/styles/recipes/modal.css +99 -0
  42. package/dist/styles/recipes/pre.css +16 -0
  43. package/dist/styles/recipes/radio-input.css +7 -0
  44. package/dist/styles/recipes/radio.css +82 -0
  45. package/dist/styles/recipes/select.css +103 -0
  46. package/dist/styles/recipes/spinner.css +36 -0
  47. package/dist/styles/recipes/tag.css +27 -0
  48. package/dist/styles/recipes/text.css +46 -0
  49. package/dist/styles/recipes/textarea.css +91 -0
  50. package/dist/styles/recipes/textinput.css +87 -0
  51. package/dist/styles/recipes/theme-switcher.css +53 -0
  52. package/dist/styles/recipes/toggle-input.css +12 -0
  53. package/dist/styles/recipes/toggle.css +125 -0
  54. package/dist/styles/recipes/tooltip.css +133 -0
  55. package/dist/styles/recipes.css +30 -0
  56. package/dist/styles/reset.css +1 -0
  57. package/dist/styles/tokens.css +1016 -0
  58. package/dist/styles/utilities.css +1694 -0
  59. package/dist/styles.css +7 -0
  60. package/dist/svgs/building.svg +1 -0
  61. package/dist/types/index.d.ts +21626 -0
  62. package/dist/types/preset.d.ts +19 -0
  63. package/package.json +37 -35
  64. package/src/recipes/avatar.ts +205 -0
  65. package/src/recipes/badge.ts +203 -0
  66. package/src/recipes/box.ts +13 -0
  67. package/src/recipes/breadcrumbs.ts +29 -0
  68. package/src/recipes/button.ts +319 -0
  69. package/src/recipes/card.ts +148 -0
  70. package/src/recipes/checkbox.ts +87 -0
  71. package/src/recipes/checkboxinput.ts +15 -0
  72. package/src/recipes/chip.ts +189 -0
  73. package/src/recipes/code.ts +35 -0
  74. package/src/recipes/divider.ts +41 -0
  75. package/src/recipes/formField.ts +60 -0
  76. package/src/recipes/index.ts +28 -0
  77. package/src/recipes/menu.ts +205 -0
  78. package/src/recipes/modal.ts +120 -0
  79. package/src/recipes/radio.ts +71 -0
  80. package/src/recipes/radioinput.ts +12 -0
  81. package/src/recipes/select.ts +142 -0
  82. package/src/recipes/spinner.ts +52 -0
  83. package/src/recipes/tag.ts +262 -0
  84. package/src/recipes/text.ts +193 -0
  85. package/src/recipes/textarea.ts +153 -0
  86. package/src/recipes/textinput.ts +100 -0
  87. package/src/recipes/themeSwitcher.ts +48 -0
  88. package/src/recipes/toggle.ts +116 -0
  89. package/src/recipes/toggleinput.ts +16 -0
  90. package/src/recipes/tooltip.ts +359 -0
  91. package/src/styles/index.css +1 -0
  92. package/src/styles/primitives/animations.ts +16 -0
  93. package/src/styles/primitives/aspectRatios.ts +22 -0
  94. package/src/styles/primitives/blurs.ts +25 -0
  95. package/src/styles/primitives/borderWidths.ts +10 -0
  96. package/src/styles/primitives/borders.ts +36 -0
  97. package/src/styles/primitives/colors.ts +228 -0
  98. package/src/styles/primitives/durations.ts +25 -0
  99. package/src/styles/primitives/easings.ts +19 -0
  100. package/src/styles/primitives/fontSizes.ts +16 -0
  101. package/src/styles/primitives/fontWeights.ts +9 -0
  102. package/src/styles/primitives/fonts.ts +18 -0
  103. package/src/styles/primitives/index.ts +46 -0
  104. package/src/styles/primitives/letterSpacings.ts +22 -0
  105. package/src/styles/primitives/lineHeights.ts +16 -0
  106. package/src/styles/primitives/radii.ts +14 -0
  107. package/src/styles/primitives/shadows.ts +73 -0
  108. package/src/styles/primitives/sizes.ts +86 -0
  109. package/src/styles/primitives/spacings.ts +7 -0
  110. package/src/styles/semantics/colors.ts +774 -0
  111. package/src/styles/semantics/index.ts +2 -0
  112. package/src/styles/semantics/shadows.ts +32 -0
  113. package/src/styles/utilities/breakpoints.ts +8 -0
  114. package/src/styles/utilities/conditions.ts +140 -0
  115. package/src/styles/utilities/containerSizes.ts +17 -0
  116. package/src/styles/utilities/filters.ts +12 -0
  117. package/src/styles/utilities/globalStyle.ts +93 -0
  118. package/src/styles/utilities/index.ts +9 -0
  119. package/src/styles/utilities/keyframes.ts +89 -0
  120. package/src/styles/utilities/layerStyles.ts +18 -0
  121. package/src/styles/utilities/textStyles.ts +135 -0
  122. package/src/styles/utilities/transitions.ts +92 -0
  123. package/src/utils/injectSprite.ts +36 -0
  124. package/src/utils/splitProps.ts +19 -0
  125. package/src/utils/spriteContent.ts +4 -0
  126. package/dist/panda.buildinfo.json +0 -448
  127. package/dist/preset.d.ts +0 -5
  128. package/dist/transitions-DUgH88VW.js +0 -1041
  129. package/dist/transitions-DUgH88VW.js.map +0 -1
@@ -1,1041 +0,0 @@
1
- import { defineUtility, defineGlobalStyles, defineKeyframes, defineLayerStyles, defineStyles, defineTextStyles, defineTokens } from "@pandacss/dev";
2
- const breakpoints = {
3
- xs: "480px",
4
- sm: "640px",
5
- md: "768px",
6
- lg: "1024px",
7
- xl: "1280px",
8
- "2xl": "1536px"
9
- };
10
- const containerSizes = {
11
- "2xs": "16rem",
12
- xs: "20rem",
13
- sm: "24rem",
14
- md: "28rem",
15
- lg: "32rem",
16
- xl: "36rem",
17
- "2xl": "42rem",
18
- "3xl": "48rem",
19
- "4xl": "56rem",
20
- "5xl": "64rem",
21
- "6xl": "72rem",
22
- "7xl": "80rem",
23
- "8xl": "90rem"
24
- };
25
- const filtersProperty = defineUtility({
26
- className: "filters",
27
- values: "filters"
28
- });
29
- const globalCss = defineGlobalStyles({
30
- "*, *::before, *::after": {
31
- boxSizing: "border-box",
32
- margin: 0,
33
- padding: 0,
34
- _focusVisible: {
35
- borderColor: "border.focused"
36
- },
37
- _disabled: {
38
- opacity: 0.4,
39
- cursor: "not-allowed",
40
- pointerEvents: "none"
41
- }
42
- },
43
- html: {
44
- fontSize: "16",
45
- lineHeight: "calc(1em + 0.5rem)",
46
- "-webkit-text-size-adjust": "100%",
47
- tabSize: "4"
48
- },
49
- body: {
50
- fontFamily: "body",
51
- bg: "surface",
52
- color: "text.subtlest",
53
- fontWeight: "normal"
54
- },
55
- "h1, h2, h3, h4, h5, h6": {
56
- color: "text",
57
- fontWeight: "bold",
58
- lineHeight: "calc(1em + 0.5rem)"
59
- },
60
- p: {
61
- marginBottom: "0.5rem"
62
- },
63
- "b, strong": {
64
- fontWeight: "bolder"
65
- },
66
- "i, em": {
67
- fontStyle: "italic"
68
- },
69
- u: {
70
- textDecoration: "underline"
71
- },
72
- "code, kbd, samp, pre": {
73
- fontFamily: "mono",
74
- fontSize: "1em"
75
- },
76
- table: {
77
- borderColor: "border.subtle"
78
- },
79
- "button, input, optgroup, select, textarea": {
80
- fontFamily: "body",
81
- fontSize: "100%",
82
- lineHeight: "calc(1em + 0.5rem)",
83
- margin: "0"
84
- },
85
- 'button, [type="button"], [type="reset"], [type="submit"]': {
86
- "-webkit-appearance": "button"
87
- },
88
- legend: {
89
- padding: "0"
90
- },
91
- progress: {
92
- verticalAlign: "baseline"
93
- },
94
- "::-webkit-inner-spin-button, ::-webkit-outer-spin-button": {
95
- height: "auto"
96
- },
97
- '[type="search"]': {
98
- "-webkit-appearance": "textfield",
99
- outlineOffset: "-2px"
100
- },
101
- "::-webkit-search-decoration": {
102
- "-webkit-appearance": "none"
103
- },
104
- "::-webkit-file-upload-button": {
105
- "-webkit-appearance": "button",
106
- font: "inherit"
107
- },
108
- summary: {
109
- display: "list-item"
110
- }
111
- });
112
- const keyframes = defineKeyframes({
113
- spin: {
114
- to: {
115
- transform: "rotate(360deg)"
116
- }
117
- },
118
- ping: {
119
- "75%, 100%": {
120
- transform: "scale(2)",
121
- opacity: "0"
122
- }
123
- },
124
- pulse: {
125
- "50%": {
126
- opacity: ".5"
127
- }
128
- },
129
- bounce: {
130
- "0%, 100%": {
131
- transform: "translateY(-25%)",
132
- animationTimingFunction: "cubic-bezier(0.8,0,1,1)"
133
- },
134
- "50%": {
135
- transform: "none",
136
- animationTimingFunction: "cubic-bezier(0,0,0.2,1)"
137
- }
138
- },
139
- badgePop: {
140
- "0%": {
141
- transform: "translate(50%, -50%) scale(1)"
142
- },
143
- "50%": {
144
- transform: "translate(50%, -50%) scale(1.2)"
145
- },
146
- "100%": {
147
- transform: "translate(50%, -50%) scale(1)"
148
- }
149
- },
150
- badgePopStandalone: {
151
- "0%": {
152
- transform: "scale(1)"
153
- },
154
- "50%": {
155
- transform: "scale(1.2)"
156
- },
157
- "100%": {
158
- transform: "scale(1)"
159
- }
160
- },
161
- slideLeft: {
162
- "0%": { transform: "translateX(100%)", opacity: "0" },
163
- "100%": { transform: "translateX(0)", opacity: "1" }
164
- },
165
- slideRight: {
166
- "0%": { transform: "translateX(-100%)", opacity: "0" },
167
- "100%": { transform: "translateX(0)", opacity: "1" }
168
- },
169
- // Modal animations
170
- modalFadeIn: {
171
- "0%": { opacity: "0" },
172
- "100%": { opacity: "1" }
173
- },
174
- modalFadeOut: {
175
- "0%": { opacity: "1" },
176
- "100%": { opacity: "0" }
177
- },
178
- modalScaleIn: {
179
- "0%": {
180
- opacity: "0",
181
- transform: "translate(-50%, -50%) scale(0.95) translateY(-10px)"
182
- },
183
- "100%": {
184
- opacity: "1",
185
- transform: "translate(-50%, -50%) scale(1) translateY(0)"
186
- }
187
- },
188
- modalScaleOut: {
189
- "0%": {
190
- opacity: "1",
191
- transform: "translate(-50%, -50%) scale(1) translateY(0)"
192
- },
193
- "100%": {
194
- opacity: "0",
195
- transform: "translate(-50%, -50%) scale(0.95) translateY(-10px)"
196
- }
197
- }
198
- });
199
- const layerStyles = defineLayerStyles({
200
- surface: {
201
- raised: {
202
- value: {
203
- background: "surface.raised",
204
- boxShadow: "shadow.raised"
205
- }
206
- },
207
- overlay: {
208
- value: {
209
- background: "surface.overlay",
210
- boxShadow: "shadow.overlay"
211
- }
212
- }
213
- }
214
- });
215
- const baseHeadingStyles = defineStyles({
216
- value: {
217
- fontFamily: "sans",
218
- fontWeight: "bold",
219
- color: "text",
220
- lineHeight: "default"
221
- }
222
- });
223
- const baseBodyTextStyles = defineStyles({
224
- value: {
225
- fontFamily: "serif",
226
- fontWeight: "normal",
227
- color: "text.subtlest",
228
- lineHeight: "default"
229
- }
230
- });
231
- const baseMonoStyles = defineStyles({
232
- value: {
233
- fontFamily: "mono",
234
- fontWeight: "normal",
235
- color: "text.subtlest",
236
- lineHeight: "default"
237
- }
238
- });
239
- const textStyles = defineTextStyles({
240
- display: {
241
- lg: {
242
- value: {
243
- ...baseHeadingStyles,
244
- fontSize: "72"
245
- }
246
- },
247
- md: {
248
- value: {
249
- ...baseHeadingStyles,
250
- fontSize: "64"
251
- }
252
- },
253
- sm: {
254
- value: {
255
- ...baseHeadingStyles,
256
- fontSize: "56"
257
- }
258
- },
259
- xs: {
260
- value: {
261
- ...baseHeadingStyles,
262
- fontSize: "48"
263
- }
264
- }
265
- },
266
- heading: {
267
- lg: {
268
- value: {
269
- ...baseHeadingStyles,
270
- fontSize: "40"
271
- }
272
- },
273
- md: {
274
- value: {
275
- ...baseHeadingStyles,
276
- fontSize: "32"
277
- }
278
- },
279
- sm: {
280
- value: {
281
- ...baseHeadingStyles,
282
- fontSize: "24"
283
- }
284
- },
285
- xs: {
286
- value: {
287
- ...baseHeadingStyles,
288
- fontSize: "20"
289
- }
290
- }
291
- },
292
- body: {
293
- lg: {
294
- value: {
295
- ...baseBodyTextStyles,
296
- fontSize: "20"
297
- }
298
- },
299
- md: {
300
- value: {
301
- ...baseBodyTextStyles,
302
- fontSize: "16"
303
- }
304
- },
305
- sm: {
306
- value: {
307
- ...baseBodyTextStyles,
308
- fontSize: "14"
309
- }
310
- },
311
- xs: {
312
- value: {
313
- ...baseBodyTextStyles,
314
- fontSize: "12"
315
- }
316
- }
317
- },
318
- mono: {
319
- lg: {
320
- value: {
321
- ...baseMonoStyles,
322
- fontSize: "20"
323
- }
324
- },
325
- md: {
326
- value: {
327
- ...baseMonoStyles,
328
- fontSize: "16"
329
- }
330
- },
331
- sm: {
332
- value: {
333
- ...baseMonoStyles,
334
- fontSize: "14"
335
- }
336
- },
337
- xs: {
338
- value: {
339
- ...baseMonoStyles,
340
- fontSize: "12"
341
- }
342
- }
343
- }
344
- });
345
- const animations = defineTokens.animations({
346
- spin: {
347
- value: "spin 1s linear infinite"
348
- },
349
- ping: {
350
- value: "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite"
351
- },
352
- pulse: {
353
- value: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
354
- },
355
- bounce: {
356
- value: "bounce 1s infinite"
357
- }
358
- });
359
- const aspectRatios = defineTokens.aspectRatios({
360
- square: {
361
- value: "1 / 1"
362
- },
363
- landscape: {
364
- value: "4 / 3"
365
- },
366
- portrait: {
367
- value: "3 / 4"
368
- },
369
- wide: {
370
- value: "16 / 9"
371
- },
372
- ultrawide: {
373
- value: "18 / 5"
374
- },
375
- golden: {
376
- value: "1.618 / 1"
377
- }
378
- });
379
- const blurs = defineTokens.blurs({
380
- sm: {
381
- value: "{sizes.4}"
382
- },
383
- base: {
384
- value: "{sizes.8}"
385
- },
386
- md: {
387
- value: "{sizes.12}"
388
- },
389
- lg: {
390
- value: "{sizes.16}"
391
- },
392
- xl: {
393
- value: "{sizes.24}"
394
- },
395
- "2xl": {
396
- value: "{sizes.40}"
397
- },
398
- "3xl": {
399
- value: "{sizes.64}"
400
- }
401
- });
402
- const borders = defineTokens.borders({
403
- default: {
404
- value: "{borderWidths.1} solid {colors.border}"
405
- },
406
- strong: {
407
- value: "{borderWidths.2} solid {colors.border.bold}"
408
- },
409
- input: {
410
- value: "{borderWidths.1} solid {colors.border.input}"
411
- },
412
- focused: {
413
- value: "{borderWidths.2} solid {colors.border.focused}"
414
- },
415
- success: {
416
- value: "{borderWidths.1} solid {colors.border.success}"
417
- },
418
- warning: {
419
- value: "{borderWidths.1} solid {colors.border.warning}"
420
- },
421
- danger: {
422
- value: "{borderWidths.1} solid {colors.border.danger}"
423
- },
424
- info: {
425
- value: "{borderWidths.1} solid {colors.border.info}"
426
- },
427
- none: {
428
- value: "none"
429
- }
430
- });
431
- const borderWidths = defineTokens.borderWidths({
432
- "0": { value: "{sizes.0}" },
433
- "1": { value: "{sizes.1}" },
434
- "2": { value: "{sizes.2}" },
435
- "4": { value: "{sizes.4}" },
436
- "8": { value: "{sizes.8}" },
437
- "16": { value: "{sizes.16}" }
438
- });
439
- const colors = defineTokens.colors({
440
- transparent: { value: "transparent" },
441
- current: { value: "currentColor" },
442
- inherit: { value: "inherit" },
443
- neutral: {
444
- "0": { value: "#FFFFFF" },
445
- "10": { value: "#F8F8F8" },
446
- "20": { value: "#F0F1F2" },
447
- "30": { value: "#DDDEE1" },
448
- "40": { value: "#B7B9BE" },
449
- "50": { value: "#8C8F97" },
450
- "60": { value: "#7D818A" },
451
- "70": { value: "#6B6E76" },
452
- "80": { value: "#505258" },
453
- "90": { value: "#3B3D42" },
454
- "100": { value: "#292A2E" },
455
- "110": { value: "#1E1F21" }
456
- },
457
- neutralA: {
458
- "10": { value: "#17171708" },
459
- "20": { value: "#1717170F" },
460
- "30": { value: "#17171724" },
461
- "40": { value: "#1717174A" },
462
- "50": { value: "#17171775" }
463
- },
464
- darkNeutral: {
465
- "0": { value: "#18191A" },
466
- "10": { value: "#1F1F21" },
467
- "20": { value: "#242528" },
468
- "25": { value: "#2B2C2F" },
469
- "30": { value: "#303134" },
470
- "35": { value: "#3D3F43" },
471
- "40": { value: "#4B4D51" },
472
- "50": { value: "#63666B" },
473
- "60": { value: "#7E8188" },
474
- "70": { value: "#96999E" },
475
- "80": { value: "#A9ABAF" },
476
- "90": { value: "#BFC1C4" },
477
- "100": { value: "#CECFD2" },
478
- "110": { value: "#E2E3E4" }
479
- },
480
- darkNeutralA: {
481
- "-10": { value: "#01040475" },
482
- "10": { value: "#BDBDBD0A" },
483
- "20": { value: "#CECED912" },
484
- "25": { value: "#D9DAE71A" },
485
- "30": { value: "#E3E4F21F" },
486
- "35": { value: "#E8EDFD2E" },
487
- "40": { value: "#E5E9F640" },
488
- "50": { value: "#E9F0FB5C" }
489
- },
490
- gray: {
491
- "10": { value: "#fbfcfd" },
492
- "20": { value: "#e0e1e2" },
493
- "30": { value: "#c5c5c6" },
494
- "40": { value: "#a9aaab" },
495
- "50": { value: "#8e8f8f" },
496
- "60": { value: "#737374" },
497
- "70": { value: "#585858" },
498
- "80": { value: "#3c3d3d" },
499
- "90": { value: "#212121" },
500
- "100": { value: "#060606" }
501
- },
502
- red: {
503
- DEFAULT: { value: "#e2483d" },
504
- "10": { value: "#ffeceb" },
505
- "20": { value: "#ffd5d2" },
506
- "30": { value: "#fd9891" },
507
- "40": { value: "#f87168" },
508
- "50": { value: "#f15b50" },
509
- "60": { value: "#e2483d" },
510
- "70": { value: "#c9372c" },
511
- "80": { value: "#ae2e24" },
512
- "90": { value: "#5d1f1a" },
513
- "100": { value: "#42221f" }
514
- },
515
- orange: {
516
- DEFAULT: { value: "#e06c00" },
517
- "10": { value: "#fff5db" },
518
- "20": { value: "#fce4a6" },
519
- "30": { value: "#fbc828" },
520
- "40": { value: "#fca700" },
521
- "50": { value: "#f68909" },
522
- "60": { value: "#e06c00" },
523
- "70": { value: "#bd5b00" },
524
- "80": { value: "#9e4c00" },
525
- "90": { value: "#693200" },
526
- "100": { value: "#3a2c1f" }
527
- },
528
- yellow: {
529
- DEFAULT: { value: "#e5b00a" },
530
- "10": { value: "#fefbf3" },
531
- "20": { value: "#f9ecc4" },
532
- "30": { value: "#f4dd96" },
533
- "40": { value: "#efce67" },
534
- "50": { value: "#eabf39" },
535
- "60": { value: "#e5b00a" },
536
- "70": { value: "#b68e0f" },
537
- "80": { value: "#886c14" },
538
- "90": { value: "#594918" },
539
- "100": { value: "#2a271d" }
540
- },
541
- lime: {
542
- DEFAULT: { value: "#6a9a23" },
543
- "10": { value: "#efffd6" },
544
- "20": { value: "#d3f1a7" },
545
- "30": { value: "#b3df72" },
546
- "40": { value: "#94c748" },
547
- "50": { value: "#82b536" },
548
- "60": { value: "#6a9a23" },
549
- "70": { value: "#5b7f24" },
550
- "80": { value: "#4c6b1f" },
551
- "90": { value: "#37471f" },
552
- "100": { value: "#28311b" }
553
- },
554
- green: {
555
- DEFAULT: { value: "#22a06b" },
556
- "10": { value: "#dcfff1" },
557
- "20": { value: "#baf3db" },
558
- "30": { value: "#7ee2b8" },
559
- "40": { value: "#4bce97" },
560
- "50": { value: "#2abb7f" },
561
- "60": { value: "#22a06b" },
562
- "70": { value: "#1f845a" },
563
- "80": { value: "#216e4e" },
564
- "90": { value: "#164b35" },
565
- "100": { value: "#1c3329" }
566
- },
567
- teal: {
568
- DEFAULT: { value: "#2898bd" },
569
- "10": { value: "#e7f9ff" },
570
- "20": { value: "#c6edfb" },
571
- "30": { value: "#9dd9ee" },
572
- "40": { value: "#6cc3e0" },
573
- "50": { value: "#42b2d7" },
574
- "60": { value: "#2898bd" },
575
- "70": { value: "#227d9b" },
576
- "80": { value: "#206a83" },
577
- "90": { value: "#164555" },
578
- "100": { value: "#1e3137" }
579
- },
580
- blue: {
581
- DEFAULT: { value: "#357de8" },
582
- "10": { value: "#e9f2fe" },
583
- "20": { value: "#cfe1fd" },
584
- "30": { value: "#8fb8f6" },
585
- "40": { value: "#669df1" },
586
- "50": { value: "#4688ec" },
587
- "60": { value: "#357de8" },
588
- "70": { value: "#1868db" },
589
- "80": { value: "#1558bc" },
590
- "90": { value: "#123263" },
591
- "100": { value: "#1c2b42" }
592
- },
593
- indigo: {
594
- DEFAULT: { value: "#7665d1" },
595
- "10": { value: "#f1eff7" },
596
- "20": { value: "#e7e3fa" },
597
- "30": { value: "#cbc4f2" },
598
- "40": { value: "#afa5e8" },
599
- "50": { value: "#9287d8" },
600
- "60": { value: "#7665d1" },
601
- "70": { value: "#5e519e" },
602
- "80": { value: "#453c7b" },
603
- "90": { value: "#2e2c40" },
604
- "100": { value: "#18161d" }
605
- },
606
- purple: {
607
- DEFAULT: { value: "#af59e1" },
608
- "10": { value: "#f8eefe" },
609
- "20": { value: "#eed7fc" },
610
- "30": { value: "#d8a0f7" },
611
- "40": { value: "#c97cf4" },
612
- "50": { value: "#bf63f3" },
613
- "60": { value: "#af59e1" },
614
- "70": { value: "#964ac0" },
615
- "80": { value: "#803fa5" },
616
- "90": { value: "#48245d" },
617
- "100": { value: "#35243f" }
618
- },
619
- magenta: {
620
- DEFAULT: { value: "#cd519d" },
621
- "10": { value: "#ffecf8" },
622
- "20": { value: "#fdd0ec" },
623
- "30": { value: "#f797d2" },
624
- "40": { value: "#e774bb" },
625
- "50": { value: "#da62ac" },
626
- "60": { value: "#cd519d" },
627
- "70": { value: "#ae4787" },
628
- "80": { value: "#943d73" },
629
- "90": { value: "#50253f" },
630
- "100": { value: "#3d2232" }
631
- },
632
- tan: {
633
- DEFAULT: { value: "#8e704f" },
634
- "10": { value: "#f5f0e6" },
635
- "20": { value: "#f1e5cd" },
636
- "30": { value: "#dec69a" },
637
- "40": { value: "#c7a97b" },
638
- "50": { value: "#ad8b65" },
639
- "60": { value: "#8e704f" },
640
- "70": { value: "#6b5947" },
641
- "80": { value: "#4d4438" },
642
- "90": { value: "#322d26" },
643
- "100": { value: "#191714" }
644
- },
645
- slate: {
646
- DEFAULYT: { value: "#1E1E1E" },
647
- "0": { value: "#FFFFFF" },
648
- "1": { value: "#FAFAFA" },
649
- "2": { value: "#F9F8F6" },
650
- "3": { value: "#F7F5F3" },
651
- "4": { value: "#F6F3EF" },
652
- "5": { value: "#F4F0EB" },
653
- "10": { value: "#E3E1DE" },
654
- "20": { value: "#CBCAC8" },
655
- "30": { value: "#AFADAB" },
656
- "40": { value: "#939190" },
657
- "50": { value: "#767675" },
658
- "60": { value: "#5F5F5E" },
659
- "70": { value: "#474747" },
660
- "80": { value: "#2E2E2E" },
661
- "90": { value: "#1E1E1E" },
662
- "100": { value: "#000000" }
663
- }
664
- });
665
- const durations = defineTokens.durations({
666
- fastest: {
667
- value: "50ms"
668
- },
669
- faster: {
670
- value: "100ms"
671
- },
672
- fast: {
673
- value: "150ms"
674
- },
675
- normal: {
676
- value: "200ms"
677
- },
678
- slow: {
679
- value: "300ms"
680
- },
681
- slower: {
682
- value: "400ms"
683
- },
684
- slowest: {
685
- value: "500ms"
686
- }
687
- });
688
- const easings = defineTokens.easings({
689
- default: {
690
- value: "cubic-bezier(0.4, 0, 0.2, 1)"
691
- },
692
- linear: {
693
- value: "linear"
694
- },
695
- in: {
696
- value: "cubic-bezier(0.4, 0, 1, 1)"
697
- },
698
- out: {
699
- value: "cubic-bezier(0, 0, 0.2, 1)"
700
- },
701
- "in-out": {
702
- value: "cubic-bezier(0.4, 0, 0.2, 1)"
703
- }
704
- });
705
- const fonts = defineTokens.fonts({
706
- heading: { value: "'IBM Plex Sans', Geneva, Tahoma, Verdana, sans-serif" },
707
- sans: { value: "'IBM Plex Sans', Geneva, Tahoma, Verdana, sans-serif" },
708
- body: {
709
- value: "'Piazzolla Variable', 'Piazzolla', Georgia, 'Times New Roman', Times, serif"
710
- },
711
- serif: {
712
- value: "'Piazzolla Variable', 'Piazzolla', Georgia, 'Times New Roman', Times, serif"
713
- },
714
- mono: {
715
- value: "'IBM Plex Mono', Andale Mono, monaco, Consolas, Lucida Console, monospace"
716
- }
717
- });
718
- const fontSizes = defineTokens.fontSizes({
719
- "12": { value: "{sizes.12}" },
720
- "14": { value: "{sizes.14}" },
721
- "16": { value: "{sizes.16}" },
722
- "20": { value: "{sizes.20}" },
723
- "24": { value: "{sizes.24}" },
724
- "32": { value: "{sizes.32}" },
725
- "40": { value: "{sizes.40}" },
726
- "48": { value: "{sizes.48}" },
727
- "64": { value: "{sizes.64}" },
728
- "72": { value: "{sizes.72}" },
729
- "80": { value: "{sizes.80}" },
730
- "96": { value: "{sizes.96}" }
731
- });
732
- const fontWeights = defineTokens.fontWeights({
733
- light: { value: 300 },
734
- normal: { value: 400 },
735
- medium: { value: 500 },
736
- bold: { value: 700 },
737
- black: { value: 900 }
738
- });
739
- const letterSpacings = defineTokens.letterSpacings({
740
- tighter: {
741
- value: "-0.05em"
742
- },
743
- tight: {
744
- value: "-0.025em"
745
- },
746
- normal: {
747
- value: "0em"
748
- },
749
- wide: {
750
- value: "0.025em"
751
- },
752
- wider: {
753
- value: "0.05em"
754
- },
755
- widest: {
756
- value: "0.1em"
757
- }
758
- });
759
- const lineHeights = defineTokens.lineHeights({
760
- none: {
761
- value: "1"
762
- },
763
- tight: {
764
- value: "1em + 0.25rem"
765
- // 4
766
- },
767
- default: {
768
- value: "1em + 0.5rem"
769
- // 8
770
- },
771
- loose: {
772
- value: "1em + 0.75rem"
773
- // 12
774
- }
775
- });
776
- const numericSizes = {
777
- "0": { value: "0" },
778
- "1": { value: "0.0625rem" },
779
- "2": { value: "0.125rem" },
780
- "3": { value: "0.1875rem" },
781
- "4": { value: "0.25rem" },
782
- "5": { value: "0.3125rem" },
783
- "6": { value: "0.375rem" },
784
- "7": { value: "0.4375rem" },
785
- "8": { value: "0.5rem" },
786
- "9": { value: "0.5625rem" },
787
- "10": { value: "0.625rem" },
788
- "12": { value: "0.75rem" },
789
- "14": { value: "0.875rem" },
790
- "16": { value: "1rem" },
791
- "20": { value: "1.25rem" },
792
- "22": { value: "1.375rem" },
793
- "24": { value: "1.5rem" },
794
- "32": { value: "2rem" },
795
- "40": { value: "2.5rem" },
796
- "48": { value: "3rem" },
797
- "56": { value: "3.5rem" },
798
- "64": { value: "4rem" },
799
- "72": { value: "4.5rem" },
800
- "80": { value: "5rem" },
801
- "88": { value: "5.5rem" },
802
- "96": { value: "6rem" },
803
- "104": { value: "6.5rem" },
804
- "112": { value: "7rem" },
805
- "120": { value: "7.5rem" },
806
- "128": { value: "8rem" },
807
- "136": { value: "8.5rem" },
808
- "144": { value: "9rem" },
809
- "152": { value: "9.5rem" },
810
- "160": { value: "10rem" },
811
- "168": { value: "10.5rem" },
812
- "176": { value: "11rem" },
813
- "184": { value: "11.5rem" },
814
- "192": { value: "12rem" },
815
- "200": { value: "12.5rem" },
816
- "208": { value: "13rem" },
817
- "216": { value: "13.5rem" },
818
- "224": { value: "14rem" },
819
- "232": { value: "14.5rem" },
820
- "240": { value: "15rem" },
821
- "248": { value: "15.5rem" },
822
- "256": { value: "16rem" },
823
- "264": { value: "16.5rem" },
824
- "272": { value: "17rem" },
825
- "280": { value: "17.5rem" }
826
- };
827
- const utilitySizes = {
828
- full: { value: "100%" },
829
- half: { value: "50%" },
830
- min: { value: "min-content" },
831
- max: { value: "max-content" },
832
- fit: { value: "fit-content" },
833
- prose: { value: "65ch" },
834
- auto: { value: "auto" }
835
- };
836
- const containerSizeTokens = {
837
- "2xs": { value: "16rem" },
838
- // 256px
839
- xs: { value: "20rem" },
840
- // 320px
841
- sm: { value: "24rem" },
842
- // 384px
843
- md: { value: "28rem" },
844
- // 448px
845
- lg: { value: "32rem" },
846
- // 512px
847
- xl: { value: "36rem" },
848
- // 576px
849
- "2xl": { value: "42rem" },
850
- // 672px
851
- "3xl": { value: "48rem" },
852
- // 768px
853
- "4xl": { value: "56rem" },
854
- // 896px
855
- "5xl": { value: "64rem" },
856
- // 1024px
857
- "6xl": { value: "72rem" },
858
- // 1152px
859
- "7xl": { value: "80rem" },
860
- // 1280px
861
- "8xl": { value: "90rem" }
862
- // 1440px
863
- };
864
- const sizes = defineTokens.sizes({
865
- ...numericSizes,
866
- ...utilitySizes,
867
- ...containerSizeTokens
868
- });
869
- const radii = defineTokens.radii({
870
- "0": { value: "{sizes.0}" },
871
- "1": { value: "{sizes.1}" },
872
- "2": { value: "{sizes.2}" },
873
- "3": { value: "{sizes.3}" },
874
- "4": { value: "{sizes.4}" },
875
- "8": { value: "{sizes.8}" },
876
- "16": { value: "{sizes.16}" },
877
- "100": { value: utilitySizes["full"].value },
878
- "999": { value: "999px" }
879
- });
880
- const shadows = defineTokens.shadows({
881
- zeroShadow: {
882
- value: "{sizes.0} {sizes.0} {sizes.0} rgba(0, 0, 0, 0), {sizes.0} {sizes.0} {sizes.0} rgba(0, 0, 0, 0)"
883
- },
884
- raisedLight: {
885
- value: "{sizes.0} {sizes.1} {sizes.1} rgba(30, 31, 33, 0.25), {sizes.0} {sizes.0} {sizes.1} rgba(30, 31, 33, 0.31)"
886
- },
887
- raisedDark: {
888
- value: "{sizes.0} {sizes.0} {sizes.0} rgba(0, 0, 0, 0), {sizes.0} {sizes.1} {sizes.1} rgba(1, 4, 4, 0.5), {sizes.0} {sizes.0} {sizes.1} rgba(1, 4, 4, 0.5)"
889
- },
890
- elevatedLight: {
891
- value: "{sizes.0} {sizes.4} {sizes.7} rgba(30, 31, 33, 0.2), {sizes.0} {sizes.0} {sizes.1} rgba(30, 31, 33, 0.31)"
892
- },
893
- elevatedDark: {
894
- value: "{sizes.0} {sizes.0} {sizes.0} rgba(95, 95, 95, 0.06), {sizes.0} {sizes.4} {sizes.7} rgba(1, 4, 4, 0.43), {sizes.0} {sizes.0} {sizes.1} rgba(1, 4, 4, 0.5)"
895
- },
896
- overlayLight: {
897
- value: "{sizes.0} {sizes.8} {sizes.12} rgba(30, 31, 33, 0.15), {sizes.0} {sizes.0} {sizes.1} rgba(30, 31, 33, 0.31)"
898
- },
899
- overlayDark: {
900
- value: "{sizes.0} {sizes.0} {sizes.0} rgba(189, 189, 189, 0.12), {sizes.0} {sizes.8} {sizes.12} rgba(1, 4, 4, 0.36), {sizes.0} {sizes.0} {sizes.1} rgba(1, 4, 4, 0.5)"
901
- },
902
- overflowLight: {
903
- value: "{sizes.0} {sizes.0} {sizes.8} rgba(30, 31, 33, 0.16), {sizes.0} {sizes.0} {sizes.1} rgba(30, 31, 33, 0.12)"
904
- },
905
- overflowDark: {
906
- value: "{sizes.0} {sizes.0} {sizes.12} rgba(1, 4, 4, 0.56), {sizes.0} {sizes.0} {sizes.1} rgba(1, 4, 4, 0.5)"
907
- },
908
- // TODO: delete below once migration is complete
909
- lowLight: {
910
- value: "{sizes.0} {sizes.0} {sizes.2} rgba(30, 30, 30, 0.2), {sizes.0} {sizes.1} {sizes.1} rgba(30, 30, 30, 0.2), {sizes.0} {sizes.2} {sizes.3} rgba(30, 30, 30, 0.2)"
911
- },
912
- lowDark: {
913
- value: "{sizes.0} {sizes.0} {sizes.2} rgba(0, 0, 0, 0.4), {sizes.0} {sizes.1} {sizes.1} rgba(0, 0, 0, 0.4), {sizes.0} {sizes.2} {sizes.3} rgba(0, 0, 0, 0.4)"
914
- },
915
- mediumLight: {
916
- value: "{sizes.0} {sizes.0} {sizes.2} rgba(30, 30, 30, 0.2), {sizes.0} {sizes.2} {sizes.2} rgba(30, 30, 30, 0.2), {sizes.0} {sizes.4} {sizes.4} rgba(30, 30, 30, 0.2), {sizes.0} {sizes.8} {sizes.8} rgba(30, 30, 30, 0.2)"
917
- },
918
- mediumDark: {
919
- value: "{sizes.0} {sizes.0} {sizes.2} rgba(0, 0, 0, 0.4), {sizes.0} {sizes.2} {sizes.2} rgba(0, 0, 0, 0.4), {sizes.0} {sizes.4} {sizes.4} rgba(0, 0, 0, 0.4), {sizes.0} {sizes.8} {sizes.8} rgba(0, 0, 0, 0.4)"
920
- },
921
- highLight: {
922
- value: "{sizes.0} {sizes.0} {sizes.2} rgba(30, 30, 30, 0.2), {sizes.0} {sizes.2} {sizes.4} rgba(30, 30, 30, 0.2), {sizes.0} {sizes.6} {sizes.8} {sizes.1} rgba(30, 30, 30, 0.2), {sizes.0} {sizes.14} {sizes.16} {sizes.2} rgba(30, 30, 30, 0.2)"
923
- },
924
- highDark: {
925
- value: "{sizes.0} {sizes.0} {sizes.2} rgba(0, 0, 0, 0.4), {sizes.0} {sizes.2} {sizes.4} rgba(0, 0, 0, 0.4), {sizes.0} {sizes.6} {sizes.8} {sizes.1} rgba(0, 0, 0, 0.4), {sizes.0} {sizes.14} {sizes.16} {sizes.2} rgba(0, 0, 0, 0.4)"
926
- },
927
- insetLight: {
928
- value: "inset {sizes.0} {sizes.0} {sizes.2} rgba(30, 30, 30, 0.2), inset {sizes.0} {sizes.2} {sizes.1} rgba(30, 30, 30, 0.2), inset {sizes.0} {sizes.3} {sizes.2} rgba(30, 30, 30, 0.2)"
929
- },
930
- insetDark: {
931
- value: "inset {sizes.0} {sizes.0} {sizes.2} rgba(0, 0, 0, 0.4), inset {sizes.0} {sizes.2} {sizes.1} rgba(0, 0, 0, 0.4), inset {sizes.0} {sizes.3} {sizes.2} rgba(0, 0, 0, 0.4)"
932
- }
933
- });
934
- const spacing = defineTokens.spacing({
935
- ...numericSizes,
936
- ...utilitySizes
937
- });
938
- const transitionProperties = {
939
- all: {
940
- value: "all"
941
- },
942
- common: {
943
- value: "background-color, border-color, color, fill, stroke, opacity, box-shadow, transform"
944
- },
945
- colors: {
946
- value: "background-color, border-color, color, fill, stroke"
947
- },
948
- opacity: {
949
- value: "opacity"
950
- },
951
- shadow: {
952
- value: "box-shadow"
953
- },
954
- transform: {
955
- value: "transform"
956
- },
957
- position: {
958
- value: "top, right, bottom, left"
959
- },
960
- size: {
961
- value: "width, height"
962
- },
963
- spacing: {
964
- value: "margin, padding"
965
- },
966
- outline: {
967
- value: "outline, outline-color, outline-offset"
968
- },
969
- border: {
970
- value: "border, border-color"
971
- }
972
- };
973
- ({
974
- all: {
975
- value: `${transitionProperties.all} ${durations.normal} ${easings.default}`
976
- },
977
- common: {
978
- value: `${transitionProperties.common} ${durations.normal} ${easings.default}`
979
- },
980
- colors: {
981
- value: `${transitionProperties.colors} ${durations.normal} ${easings.default}`
982
- },
983
- opacity: {
984
- value: `${transitionProperties.opacity} ${durations.normal} ${easings.default}`
985
- },
986
- shadow: {
987
- value: `${transitionProperties.shadow} ${durations.normal} ${easings.default}`
988
- },
989
- transform: {
990
- value: `${transitionProperties.transform} ${durations.normal} ${easings.default}`
991
- },
992
- position: {
993
- value: `${transitionProperties.position} ${durations.normal} ${easings.default}`
994
- },
995
- size: {
996
- value: `${transitionProperties.size} ${durations.normal} ${easings.default}`
997
- },
998
- spacing: {
999
- value: `${transitionProperties.spacing} ${durations.normal} ${easings.default}`
1000
- },
1001
- outline: {
1002
- value: `${transitionProperties.outline} ${durations.normal} ${easings.default}`
1003
- },
1004
- border: {
1005
- value: `${transitionProperties.border} ${durations.normal} ${easings.default}`
1006
- }
1007
- });
1008
- const transitionProperty = defineUtility({
1009
- className: "transition-property",
1010
- values: "transitions"
1011
- });
1012
- export {
1013
- keyframes as A,
1014
- animations as a,
1015
- breakpoints as b,
1016
- containerSizes as c,
1017
- aspectRatios as d,
1018
- blurs as e,
1019
- borderWidths as f,
1020
- borders as g,
1021
- colors as h,
1022
- durations as i,
1023
- easings as j,
1024
- fontSizes as k,
1025
- fontWeights as l,
1026
- fonts as m,
1027
- letterSpacings as n,
1028
- lineHeights as o,
1029
- numericSizes as p,
1030
- sizes as q,
1031
- radii as r,
1032
- shadows as s,
1033
- spacing as t,
1034
- utilitySizes as u,
1035
- globalCss as v,
1036
- transitionProperty as w,
1037
- filtersProperty as x,
1038
- textStyles as y,
1039
- layerStyles as z
1040
- };
1041
- //# sourceMappingURL=transitions-DUgH88VW.js.map