@ebtgames/theme 0.1.5 → 0.1.6
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.
- package/dist/index.d.ts +98 -70
- package/dist/index.js +202 -159
- package/dist/index.js.map +1 -1
- package/package.json +4 -4
package/dist/index.js
CHANGED
|
@@ -43,7 +43,9 @@ var colors = defineTokens.colors({
|
|
|
43
43
|
// Border Colors (neutral gray)
|
|
44
44
|
border: {
|
|
45
45
|
subtle: { value: "var(--color-border-subtle)" },
|
|
46
|
-
strong: { value: "var(--color-border-strong)" }
|
|
46
|
+
strong: { value: "var(--color-border-strong)" },
|
|
47
|
+
soft: { value: "var(--color-border-soft)" },
|
|
48
|
+
contrast: { value: "var(--color-border-contrast)" }
|
|
47
49
|
},
|
|
48
50
|
// Status Colors
|
|
49
51
|
status: {
|
|
@@ -62,6 +64,8 @@ var colors = defineTokens.colors({
|
|
|
62
64
|
// Active
|
|
63
65
|
heavy: { value: "var(--color-overlay-heavy)" },
|
|
64
66
|
// Emphasis
|
|
67
|
+
primarySoft: { value: "var(--color-overlay-primary-soft)" },
|
|
68
|
+
secondarySoft: { value: "var(--color-overlay-secondary-soft)" },
|
|
65
69
|
error: { value: "var(--color-overlay-error)" },
|
|
66
70
|
// Error tint
|
|
67
71
|
backdrop: {
|
|
@@ -154,6 +158,11 @@ var shadows = defineTokens5.shadows({
|
|
|
154
158
|
md: { value: "var(--shadow-md)" },
|
|
155
159
|
lg: { value: "var(--shadow-lg)" },
|
|
156
160
|
xl: { value: "var(--shadow-xl)" },
|
|
161
|
+
elevation: {
|
|
162
|
+
1: { value: "var(--shadow-elevation-1)" },
|
|
163
|
+
2: { value: "var(--shadow-elevation-2)" },
|
|
164
|
+
3: { value: "var(--shadow-elevation-3)" }
|
|
165
|
+
},
|
|
157
166
|
// Glow shadows (primary - purple)
|
|
158
167
|
glow: {
|
|
159
168
|
primary: { value: "var(--shadow-glow-primary)" },
|
|
@@ -178,6 +187,13 @@ var shadows = defineTokens5.shadows({
|
|
|
178
187
|
primary: { value: "var(--shadow-inset-primary)" },
|
|
179
188
|
subtle: { value: "var(--shadow-inset-subtle)" },
|
|
180
189
|
deep: { value: "var(--shadow-inset-deep)" }
|
|
190
|
+
},
|
|
191
|
+
focus: {
|
|
192
|
+
primary: { value: "var(--shadow-focus-ring-primary)" },
|
|
193
|
+
secondary: { value: "var(--shadow-focus-ring-secondary)" }
|
|
194
|
+
},
|
|
195
|
+
press: {
|
|
196
|
+
inset: { value: "var(--shadow-press-inset)" }
|
|
181
197
|
}
|
|
182
198
|
});
|
|
183
199
|
|
|
@@ -210,7 +226,9 @@ var semanticColors = defineSemanticTokens.colors({
|
|
|
210
226
|
// Border (for buttons, inputs, cards)
|
|
211
227
|
border: {
|
|
212
228
|
subtle: { value: "{colors.border.subtle}" },
|
|
213
|
-
strong: { value: "{colors.border.strong}" }
|
|
229
|
+
strong: { value: "{colors.border.strong}" },
|
|
230
|
+
control: { value: "{colors.border.soft}" },
|
|
231
|
+
emphasis: { value: "{colors.border.contrast}" }
|
|
214
232
|
}
|
|
215
233
|
});
|
|
216
234
|
|
|
@@ -219,16 +237,21 @@ import { defineSemanticTokens as defineSemanticTokens2 } from "@chakra-ui/react"
|
|
|
219
237
|
var semanticShadows = defineSemanticTokens2.shadows({
|
|
220
238
|
// Button shadows
|
|
221
239
|
button: {
|
|
222
|
-
base: { value: "{shadows.
|
|
223
|
-
hover: { value: "{shadows.
|
|
240
|
+
base: { value: "{shadows.elevation.1}, {shadows.inset.subtle}" },
|
|
241
|
+
hover: { value: "{shadows.elevation.2}, {shadows.inset.subtle}" },
|
|
242
|
+
active: { value: "{shadows.press.inset}" }
|
|
243
|
+
},
|
|
244
|
+
// Input shadows
|
|
245
|
+
input: {
|
|
246
|
+
focus: { value: "{shadows.focus.primary}" }
|
|
224
247
|
},
|
|
225
248
|
// Cell shadows (most complex - 4-layer stack for selected state)
|
|
226
249
|
cell: {
|
|
227
250
|
selected: {
|
|
228
|
-
value: "{shadows.inset.primary}, 0 0 0 {borderWidths.base} rgba(
|
|
251
|
+
value: "{shadows.inset.primary}, 0 0 0 {borderWidths.base} rgba(155, 124, 255, 0.52), {shadows.glow.primary}, 0 4px 12px rgba(155, 124, 255, 0.18)"
|
|
229
252
|
},
|
|
230
253
|
conflict: {
|
|
231
|
-
value: "{shadows.glow.error}, 0 2px 6px rgba(
|
|
254
|
+
value: "{shadows.glow.error}, 0 2px 6px rgba(226, 102, 98, 0.26)"
|
|
232
255
|
}
|
|
233
256
|
}
|
|
234
257
|
});
|
|
@@ -362,57 +385,62 @@ import { defineGlobalStyles } from "@chakra-ui/react";
|
|
|
362
385
|
|
|
363
386
|
// src/cssVariables.ts
|
|
364
387
|
var colorVariables = {
|
|
365
|
-
// Surface Colors (
|
|
366
|
-
"--color-surface-0": "#
|
|
388
|
+
// Surface Colors (neutral dark foundation)
|
|
389
|
+
"--color-surface-0": "#0F1216",
|
|
367
390
|
// Base background - darkest
|
|
368
|
-
"--color-surface-1": "#
|
|
391
|
+
"--color-surface-1": "#18202A",
|
|
369
392
|
// Elevated surfaces
|
|
370
|
-
"--color-surface-2": "#
|
|
393
|
+
"--color-surface-2": "#222C38",
|
|
371
394
|
// Cards/panels
|
|
372
|
-
"--color-surface-3": "#
|
|
395
|
+
"--color-surface-3": "#2F3B4A",
|
|
373
396
|
// Raised/hover states
|
|
397
|
+
"--color-surface-card-top": "#31364A",
|
|
398
|
+
// subtle purple cast
|
|
399
|
+
"--color-surface-card-bottom": "#232B39",
|
|
400
|
+
"--color-surface-control-top": "#2A3341",
|
|
401
|
+
"--color-surface-control-bottom": "#1E2632",
|
|
374
402
|
// Text Colors (WCAG AA verified against surface-0)
|
|
375
|
-
"--color-text-primary": "#
|
|
376
|
-
|
|
377
|
-
"--color-text-
|
|
378
|
-
|
|
379
|
-
"--color-text-muted": "#B9AEC9",
|
|
380
|
-
// 8.72:1 contrast
|
|
381
|
-
"--color-text-disabled": "#9E92B4",
|
|
382
|
-
// 6.32:1 contrast
|
|
403
|
+
"--color-text-primary": "#F3F6FB",
|
|
404
|
+
"--color-text-secondary": "#D7DEE9",
|
|
405
|
+
"--color-text-muted": "#AAB6C5",
|
|
406
|
+
"--color-text-disabled": "#7F8A99",
|
|
383
407
|
// Interactive - Primary (Purple)
|
|
384
|
-
"--color-interactive-primary": "#
|
|
385
|
-
"--color-interactive-primary-hover": "#
|
|
408
|
+
"--color-interactive-primary": "#9B7CFF",
|
|
409
|
+
"--color-interactive-primary-hover": "#8A6EF0",
|
|
386
410
|
// Interactive - Secondary (Teal)
|
|
387
|
-
"--color-interactive-secondary": "#
|
|
388
|
-
"--color-interactive-secondary-hover": "#
|
|
411
|
+
"--color-interactive-secondary": "#34CBBF",
|
|
412
|
+
"--color-interactive-secondary-hover": "#5DD9CF",
|
|
389
413
|
// Interactive - Accent (Rose)
|
|
390
|
-
"--color-interactive-accent": "#
|
|
414
|
+
"--color-interactive-accent": "#E282AE",
|
|
391
415
|
// Border Colors
|
|
392
|
-
"--color-border-subtle": "#
|
|
393
|
-
"--color-border-strong": "#
|
|
416
|
+
"--color-border-subtle": "#334051",
|
|
417
|
+
"--color-border-strong": "#5D6D84",
|
|
418
|
+
"--color-border-soft": "#465365",
|
|
419
|
+
"--color-border-contrast": "#748AA4",
|
|
394
420
|
// Status Colors
|
|
395
|
-
"--color-status-success": "#
|
|
421
|
+
"--color-status-success": "#34CBBF",
|
|
396
422
|
// Teal
|
|
397
|
-
"--color-status-warning": "#
|
|
423
|
+
"--color-status-warning": "#E0AD5D",
|
|
398
424
|
// Amber
|
|
399
|
-
"--color-status-error": "#
|
|
425
|
+
"--color-status-error": "#E26662",
|
|
400
426
|
// Red
|
|
401
|
-
"--color-status-info": "#
|
|
427
|
+
"--color-status-info": "#9B7CFF",
|
|
402
428
|
// Purple
|
|
403
|
-
// Overlay Colors (
|
|
404
|
-
"--color-overlay-subtle": "rgba(
|
|
429
|
+
// Overlay Colors (neutral transparency with accent overlays)
|
|
430
|
+
"--color-overlay-subtle": "rgba(255, 255, 255, 0.03)",
|
|
405
431
|
// Hover tint
|
|
406
|
-
"--color-overlay-light": "rgba(
|
|
432
|
+
"--color-overlay-light": "rgba(255, 255, 255, 0.06)",
|
|
407
433
|
// Selected
|
|
408
|
-
"--color-overlay-medium": "rgba(
|
|
434
|
+
"--color-overlay-medium": "rgba(255, 255, 255, 0.1)",
|
|
409
435
|
// Active
|
|
410
|
-
"--color-overlay-heavy": "rgba(
|
|
436
|
+
"--color-overlay-heavy": "rgba(255, 255, 255, 0.16)",
|
|
411
437
|
// Emphasis
|
|
412
|
-
"--color-overlay-
|
|
438
|
+
"--color-overlay-primary-soft": "rgba(155, 124, 255, 0.12)",
|
|
439
|
+
"--color-overlay-secondary-soft": "rgba(52, 203, 191, 0.12)",
|
|
440
|
+
"--color-overlay-error": "rgba(226, 102, 98, 0.14)",
|
|
413
441
|
// Error tint
|
|
414
|
-
"--color-overlay-backdrop-light": "rgba(
|
|
415
|
-
"--color-overlay-backdrop-heavy": "rgba(
|
|
442
|
+
"--color-overlay-backdrop-light": "rgba(10, 12, 16, 0.78)",
|
|
443
|
+
"--color-overlay-backdrop-heavy": "rgba(10, 12, 16, 0.9)"
|
|
416
444
|
};
|
|
417
445
|
var typographyVariables = {
|
|
418
446
|
// Font Families
|
|
@@ -484,22 +512,28 @@ var shadowVariables = {
|
|
|
484
512
|
"--shadow-md": "0 4px 16px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4)",
|
|
485
513
|
"--shadow-lg": "0 8px 24px rgba(0, 0, 0, 0.7), 0 4px 12px rgba(0, 0, 0, 0.5)",
|
|
486
514
|
"--shadow-xl": "0 16px 48px rgba(0, 0, 0, 0.8), 0 8px 24px rgba(0, 0, 0, 0.6)",
|
|
515
|
+
"--shadow-elevation-1": "0 1px 2px rgba(0, 0, 0, 0.36), 0 3px 8px rgba(0, 0, 0, 0.22)",
|
|
516
|
+
"--shadow-elevation-2": "0 6px 16px rgba(0, 0, 0, 0.32), 0 2px 6px rgba(0, 0, 0, 0.2)",
|
|
517
|
+
"--shadow-elevation-3": "0 12px 28px rgba(0, 0, 0, 0.36), 0 6px 14px rgba(0, 0, 0, 0.24)",
|
|
487
518
|
// Glow shadows - Primary (Purple)
|
|
488
|
-
"--shadow-glow-primary": "0 0 10px rgba(
|
|
489
|
-
"--shadow-glow-primary-lg": "0 0 20px rgba(
|
|
490
|
-
"--shadow-glow-primary-xl": "0 0 30px rgba(
|
|
519
|
+
"--shadow-glow-primary": "0 0 10px rgba(155, 124, 255, 0.24)",
|
|
520
|
+
"--shadow-glow-primary-lg": "0 0 20px rgba(155, 124, 255, 0.3), 0 0 40px rgba(155, 124, 255, 0.18)",
|
|
521
|
+
"--shadow-glow-primary-xl": "0 0 30px rgba(155, 124, 255, 0.38), 0 0 60px rgba(155, 124, 255, 0.24)",
|
|
491
522
|
// Glow shadows - Secondary (Teal)
|
|
492
|
-
"--shadow-glow-secondary": "0 0 10px rgba(
|
|
493
|
-
"--shadow-glow-secondary-lg": "0 0 20px rgba(
|
|
523
|
+
"--shadow-glow-secondary": "0 0 10px rgba(52, 203, 191, 0.2)",
|
|
524
|
+
"--shadow-glow-secondary-lg": "0 0 20px rgba(52, 203, 191, 0.28), 0 0 40px rgba(52, 203, 191, 0.15)",
|
|
494
525
|
// Glow shadows - Accent (Rose)
|
|
495
|
-
"--shadow-glow-accent": "0 0 10px rgba(
|
|
496
|
-
"--shadow-glow-accent-lg": "0 0 20px rgba(
|
|
526
|
+
"--shadow-glow-accent": "0 0 10px rgba(226, 130, 174, 0.2)",
|
|
527
|
+
"--shadow-glow-accent-lg": "0 0 20px rgba(226, 130, 174, 0.28), 0 0 40px rgba(226, 130, 174, 0.15)",
|
|
497
528
|
// Glow shadows - Error
|
|
498
|
-
"--shadow-glow-error": "0 0 10px rgba(
|
|
529
|
+
"--shadow-glow-error": "0 0 10px rgba(226, 102, 98, 0.24)",
|
|
530
|
+
"--shadow-focus-ring-primary": "0 0 0 2px rgba(155, 124, 255, 0.55)",
|
|
531
|
+
"--shadow-focus-ring-secondary": "0 0 0 2px rgba(52, 203, 191, 0.55)",
|
|
499
532
|
// Inset shadows
|
|
500
|
-
"--shadow-inset-primary": "inset 0 0 10px rgba(
|
|
533
|
+
"--shadow-inset-primary": "inset 0 0 10px rgba(155, 124, 255, 0.18)",
|
|
501
534
|
"--shadow-inset-subtle": "inset 0 1px 3px rgba(0, 0, 0, 0.3)",
|
|
502
|
-
"--shadow-inset-deep": "inset 0 2px 8px rgba(0, 0, 0, 0.5)"
|
|
535
|
+
"--shadow-inset-deep": "inset 0 2px 8px rgba(0, 0, 0, 0.5)",
|
|
536
|
+
"--shadow-press-inset": "inset 0 2px 6px rgba(0, 0, 0, 0.45)"
|
|
503
537
|
};
|
|
504
538
|
var zIndexVariables = {
|
|
505
539
|
"--z-index-base": "1",
|
|
@@ -593,8 +627,8 @@ var globalCss = defineGlobalStyles({
|
|
|
593
627
|
position: "fixed",
|
|
594
628
|
inset: 0,
|
|
595
629
|
backgroundImage: `
|
|
596
|
-
radial-gradient(circle at 20% 50%, rgba(
|
|
597
|
-
radial-gradient(circle at 80% 80%, rgba(
|
|
630
|
+
radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.02) 0%, transparent 55%),
|
|
631
|
+
radial-gradient(circle at 80% 80%, rgba(155, 124, 255, 0.03) 0%, transparent 45%)
|
|
598
632
|
`,
|
|
599
633
|
pointerEvents: "none",
|
|
600
634
|
zIndex: 0
|
|
@@ -658,55 +692,59 @@ var buttonRecipe = defineRecipe({
|
|
|
658
692
|
py: "sm",
|
|
659
693
|
borderWidth: "base",
|
|
660
694
|
borderStyle: "solid",
|
|
661
|
-
borderColor: "border.
|
|
662
|
-
background: "linear-gradient(145deg, var(--color-surface-
|
|
695
|
+
borderColor: "border.soft",
|
|
696
|
+
background: "linear-gradient(145deg, var(--color-surface-control-top), var(--color-surface-control-bottom))",
|
|
663
697
|
color: "text.primary",
|
|
664
698
|
cursor: "pointer",
|
|
665
699
|
pointerEvents: "auto",
|
|
666
700
|
userSelect: "none",
|
|
667
|
-
transition: "
|
|
701
|
+
transition: "transform 160ms var(--easing-default), box-shadow 180ms var(--easing-default), border-color 180ms var(--easing-default), background 180ms var(--easing-default)",
|
|
668
702
|
textTransform: "uppercase",
|
|
669
703
|
letterSpacing: "tight",
|
|
670
704
|
fontWeight: "medium",
|
|
671
705
|
borderRadius: "md",
|
|
672
|
-
boxShadow: "
|
|
706
|
+
boxShadow: "button.base",
|
|
673
707
|
_disabled: {
|
|
674
708
|
opacity: 0.5,
|
|
675
|
-
cursor: "not-allowed"
|
|
709
|
+
cursor: "not-allowed",
|
|
710
|
+
transform: "none",
|
|
711
|
+
boxShadow: "button.base"
|
|
676
712
|
},
|
|
677
713
|
_focusVisible: {
|
|
678
|
-
outline: "
|
|
679
|
-
|
|
714
|
+
outline: "none",
|
|
715
|
+
boxShadow: "focus.primary, button.base"
|
|
680
716
|
}
|
|
681
717
|
},
|
|
682
718
|
variants: {
|
|
683
719
|
variant: {
|
|
684
720
|
primary: {
|
|
685
|
-
borderColor: "primary",
|
|
721
|
+
borderColor: "primary.DEFAULT",
|
|
686
722
|
color: "primary",
|
|
687
723
|
_hover: {
|
|
688
724
|
background: "linear-gradient(145deg, var(--color-interactive-primary-hover), var(--color-interactive-primary))",
|
|
725
|
+
borderColor: "primary.hover",
|
|
689
726
|
color: "surface.0",
|
|
690
|
-
boxShadow: "
|
|
691
|
-
transform: "translateY(-
|
|
727
|
+
boxShadow: "button.hover",
|
|
728
|
+
transform: "translateY(-1px)"
|
|
692
729
|
},
|
|
693
730
|
_active: {
|
|
694
731
|
transform: "translateY(0)",
|
|
695
|
-
boxShadow: "
|
|
732
|
+
boxShadow: "button.active"
|
|
696
733
|
}
|
|
697
734
|
},
|
|
698
735
|
secondary: {
|
|
699
|
-
borderColor: "utility",
|
|
736
|
+
borderColor: "utility.DEFAULT",
|
|
700
737
|
color: "utility",
|
|
701
738
|
_hover: {
|
|
702
739
|
background: "linear-gradient(145deg, var(--color-interactive-secondary), var(--color-interactive-secondary-hover))",
|
|
740
|
+
borderColor: "utility.hover",
|
|
703
741
|
color: "surface.0",
|
|
704
|
-
boxShadow: "
|
|
705
|
-
transform: "translateY(-
|
|
742
|
+
boxShadow: "button.hover",
|
|
743
|
+
transform: "translateY(-1px)"
|
|
706
744
|
},
|
|
707
745
|
_active: {
|
|
708
746
|
transform: "translateY(0)",
|
|
709
|
-
boxShadow: "
|
|
747
|
+
boxShadow: "button.active"
|
|
710
748
|
}
|
|
711
749
|
},
|
|
712
750
|
danger: {
|
|
@@ -714,13 +752,14 @@ var buttonRecipe = defineRecipe({
|
|
|
714
752
|
color: "status.error",
|
|
715
753
|
_hover: {
|
|
716
754
|
background: "linear-gradient(145deg, var(--color-status-error), var(--color-status-error))",
|
|
755
|
+
borderColor: "status.error",
|
|
717
756
|
color: "surface.0",
|
|
718
|
-
boxShadow: "
|
|
719
|
-
transform: "translateY(-
|
|
757
|
+
boxShadow: "button.hover",
|
|
758
|
+
transform: "translateY(-1px)"
|
|
720
759
|
},
|
|
721
760
|
_active: {
|
|
722
761
|
transform: "translateY(0)",
|
|
723
|
-
boxShadow: "
|
|
762
|
+
boxShadow: "button.active"
|
|
724
763
|
}
|
|
725
764
|
}
|
|
726
765
|
}
|
|
@@ -736,9 +775,9 @@ var cellRecipe = defineRecipe2({
|
|
|
736
775
|
className: "ninefold-cell",
|
|
737
776
|
base: {
|
|
738
777
|
aspectRatio: "1",
|
|
739
|
-
background: "linear-gradient(145deg, var(--color-surface-
|
|
778
|
+
background: "linear-gradient(145deg, var(--color-surface-control-top), var(--color-surface-control-bottom))",
|
|
740
779
|
borderWidth: "thin",
|
|
741
|
-
borderColor: "border.
|
|
780
|
+
borderColor: "border.soft",
|
|
742
781
|
borderStyle: "solid",
|
|
743
782
|
color: "text.primary",
|
|
744
783
|
fontFamily: "body",
|
|
@@ -750,10 +789,10 @@ var cellRecipe = defineRecipe2({
|
|
|
750
789
|
display: "flex",
|
|
751
790
|
alignItems: "center",
|
|
752
791
|
justifyContent: "center",
|
|
753
|
-
boxShadow: "var(--shadow-inset-subtle),
|
|
792
|
+
boxShadow: "var(--shadow-inset-subtle), var(--shadow-elevation-1)",
|
|
754
793
|
_focusVisible: {
|
|
755
|
-
outline: "
|
|
756
|
-
|
|
794
|
+
outline: "none",
|
|
795
|
+
boxShadow: "var(--shadow-inset-subtle), var(--shadow-elevation-1), var(--shadow-focus-ring-primary)",
|
|
757
796
|
zIndex: "base"
|
|
758
797
|
}
|
|
759
798
|
},
|
|
@@ -761,43 +800,43 @@ var cellRecipe = defineRecipe2({
|
|
|
761
800
|
state: {
|
|
762
801
|
normal: {
|
|
763
802
|
_hover: {
|
|
764
|
-
background: "linear-gradient(145deg, var(--color-surface-
|
|
803
|
+
background: "linear-gradient(145deg, var(--color-surface-card-top), var(--color-surface-card-bottom))",
|
|
765
804
|
borderColor: "primary.hover",
|
|
766
|
-
boxShadow: "var(--shadow-inset-subtle),
|
|
805
|
+
boxShadow: "var(--shadow-inset-subtle), var(--shadow-elevation-2)",
|
|
767
806
|
transform: "translateY(-1px)"
|
|
768
807
|
}
|
|
769
808
|
},
|
|
770
809
|
given: {
|
|
771
810
|
fontWeight: "bold",
|
|
772
|
-
background: "linear-gradient(145deg, var(--color-surface-
|
|
773
|
-
borderColor: "border.
|
|
811
|
+
background: "linear-gradient(145deg, var(--color-surface-card-top), var(--color-surface-card-bottom))",
|
|
812
|
+
borderColor: "border.contrast",
|
|
774
813
|
cursor: "default",
|
|
775
|
-
boxShadow: "var(--shadow-inset-subtle),
|
|
814
|
+
boxShadow: "var(--shadow-inset-subtle), var(--shadow-elevation-1)",
|
|
776
815
|
_hover: {
|
|
777
|
-
background: "linear-gradient(145deg, var(--color-surface-
|
|
778
|
-
borderColor: "border.
|
|
779
|
-
boxShadow: "var(--shadow-inset-subtle),
|
|
816
|
+
background: "linear-gradient(145deg, var(--color-surface-card-top), var(--color-surface-card-bottom))",
|
|
817
|
+
borderColor: "border.contrast",
|
|
818
|
+
boxShadow: "var(--shadow-inset-subtle), var(--shadow-elevation-1)",
|
|
780
819
|
transform: "none"
|
|
781
820
|
}
|
|
782
821
|
},
|
|
783
822
|
selected: {
|
|
784
|
-
background: "linear-gradient(145deg,
|
|
823
|
+
background: "linear-gradient(145deg, var(--color-overlay-primary-soft), rgba(155, 124, 255, 0.05))",
|
|
785
824
|
borderColor: "primary.DEFAULT",
|
|
786
825
|
boxShadow: "cell.selected",
|
|
787
|
-
transform: "translateY(-
|
|
826
|
+
transform: "translateY(-1px)"
|
|
788
827
|
},
|
|
789
828
|
conflict: {
|
|
790
|
-
background: "linear-gradient(145deg, rgba(
|
|
829
|
+
background: "linear-gradient(145deg, rgba(226, 102, 98, 0.16), rgba(226, 102, 98, 0.08))",
|
|
791
830
|
borderColor: "status.error",
|
|
792
831
|
color: "status.error",
|
|
793
832
|
boxShadow: "cell.conflict"
|
|
794
833
|
},
|
|
795
834
|
selectedConflict: {
|
|
796
|
-
background: "linear-gradient(145deg, rgba(
|
|
835
|
+
background: "linear-gradient(145deg, rgba(226, 102, 98, 0.16), rgba(226, 102, 98, 0.08))",
|
|
797
836
|
borderColor: "status.error",
|
|
798
837
|
color: "status.error",
|
|
799
838
|
boxShadow: "cell.conflict",
|
|
800
|
-
transform: "translateY(-
|
|
839
|
+
transform: "translateY(-1px)"
|
|
801
840
|
}
|
|
802
841
|
}
|
|
803
842
|
},
|
|
@@ -820,10 +859,10 @@ var timerRecipe = defineRecipe3({
|
|
|
820
859
|
paddingX: "md",
|
|
821
860
|
borderWidth: "base",
|
|
822
861
|
borderStyle: "solid",
|
|
823
|
-
borderColor: "border.
|
|
824
|
-
background: "surface
|
|
862
|
+
borderColor: "border.contrast",
|
|
863
|
+
background: "linear-gradient(145deg, var(--color-surface-control-top), var(--color-surface-control-bottom))",
|
|
825
864
|
borderRadius: "md",
|
|
826
|
-
boxShadow: "var(--shadow-
|
|
865
|
+
boxShadow: "var(--shadow-elevation-1), inset 0 1px 0 rgba(255, 255, 255, 0.05)",
|
|
827
866
|
justifyContent: "center"
|
|
828
867
|
}
|
|
829
868
|
});
|
|
@@ -884,23 +923,24 @@ var inputRecipe = defineRecipe5({
|
|
|
884
923
|
fontFamily: "body",
|
|
885
924
|
fontSize: "base",
|
|
886
925
|
color: "text.primary",
|
|
887
|
-
backgroundColor: "surface.
|
|
926
|
+
backgroundColor: "surface.1",
|
|
888
927
|
borderWidth: "thin",
|
|
889
928
|
borderStyle: "solid",
|
|
890
|
-
borderColor: "border.
|
|
929
|
+
borderColor: "border.soft",
|
|
891
930
|
borderRadius: "md",
|
|
892
931
|
padding: "sm",
|
|
893
932
|
width: "100%",
|
|
894
|
-
transition: "
|
|
933
|
+
transition: "box-shadow var(--timing-base) var(--easing-default), border-color var(--timing-base) var(--easing-default), background-color var(--timing-base) var(--easing-default)",
|
|
934
|
+
boxShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--shadow-inset-subtle)",
|
|
895
935
|
_placeholder: {
|
|
896
936
|
color: "text.muted"
|
|
897
937
|
},
|
|
898
938
|
_hover: {
|
|
899
|
-
borderColor: "border.
|
|
939
|
+
borderColor: "border.contrast"
|
|
900
940
|
},
|
|
901
941
|
_focus: {
|
|
902
942
|
borderColor: "primary.DEFAULT",
|
|
903
|
-
boxShadow: "var(--shadow-
|
|
943
|
+
boxShadow: "input.focus, inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--shadow-inset-subtle)",
|
|
904
944
|
outline: "none"
|
|
905
945
|
},
|
|
906
946
|
_disabled: {
|
|
@@ -910,7 +950,7 @@ var inputRecipe = defineRecipe5({
|
|
|
910
950
|
},
|
|
911
951
|
_invalid: {
|
|
912
952
|
borderColor: "status.error",
|
|
913
|
-
boxShadow: "var(--shadow-
|
|
953
|
+
boxShadow: "0 0 0 var(--border-width-thin) rgba(226, 102, 98, 0.5), 0 0 4px rgba(226, 102, 98, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--shadow-inset-subtle)"
|
|
914
954
|
}
|
|
915
955
|
},
|
|
916
956
|
variants: {
|
|
@@ -933,17 +973,18 @@ var inputRecipe = defineRecipe5({
|
|
|
933
973
|
},
|
|
934
974
|
variant: {
|
|
935
975
|
outline: {
|
|
936
|
-
backgroundColor: "
|
|
937
|
-
borderColor: "border.
|
|
976
|
+
backgroundColor: "surface.1",
|
|
977
|
+
borderColor: "border.soft"
|
|
938
978
|
},
|
|
939
979
|
filled: {
|
|
940
|
-
backgroundColor: "surface.
|
|
941
|
-
borderColor: "
|
|
980
|
+
backgroundColor: "surface.2",
|
|
981
|
+
borderColor: "border.soft",
|
|
942
982
|
_hover: {
|
|
983
|
+
borderColor: "border.contrast",
|
|
943
984
|
backgroundColor: "surface.2"
|
|
944
985
|
},
|
|
945
986
|
_focus: {
|
|
946
|
-
backgroundColor: "surface.
|
|
987
|
+
backgroundColor: "surface.2",
|
|
947
988
|
borderColor: "primary.DEFAULT"
|
|
948
989
|
}
|
|
949
990
|
}
|
|
@@ -1027,35 +1068,36 @@ import { defineRecipe as defineRecipe7 } from "@chakra-ui/react";
|
|
|
1027
1068
|
var cardRecipe = defineRecipe7({
|
|
1028
1069
|
className: "card",
|
|
1029
1070
|
base: {
|
|
1030
|
-
background: "linear-gradient(145deg, var(--color-surface-
|
|
1071
|
+
background: "linear-gradient(145deg, var(--color-surface-card-top), var(--color-surface-card-bottom))",
|
|
1031
1072
|
borderWidth: "thin",
|
|
1032
1073
|
borderStyle: "solid",
|
|
1033
|
-
borderColor: "border.
|
|
1074
|
+
borderColor: "border.soft",
|
|
1034
1075
|
borderRadius: "md",
|
|
1035
1076
|
padding: "lg",
|
|
1036
|
-
boxShadow: "var(--shadow-
|
|
1077
|
+
boxShadow: "var(--shadow-elevation-1), inset 0 1px 0 rgba(255, 255, 255, 0.04)",
|
|
1078
|
+
transition: "box-shadow var(--timing-base) var(--easing-default), border-color var(--timing-base) var(--easing-default)"
|
|
1037
1079
|
},
|
|
1038
1080
|
variants: {
|
|
1039
1081
|
variant: {
|
|
1040
1082
|
subtle: {
|
|
1041
|
-
background: "surface
|
|
1042
|
-
borderColor: "border.
|
|
1043
|
-
boxShadow: "
|
|
1083
|
+
background: "linear-gradient(145deg, var(--color-surface-2), var(--color-surface-1))",
|
|
1084
|
+
borderColor: "border.soft",
|
|
1085
|
+
boxShadow: "var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.03)"
|
|
1044
1086
|
},
|
|
1045
1087
|
elevated: {
|
|
1046
|
-
background: "linear-gradient(145deg, var(--color-surface-
|
|
1047
|
-
borderColor: "border.
|
|
1048
|
-
boxShadow: "var(--shadow-
|
|
1088
|
+
background: "linear-gradient(145deg, var(--color-surface-card-top), var(--color-surface-card-bottom))",
|
|
1089
|
+
borderColor: "border.contrast",
|
|
1090
|
+
boxShadow: "var(--shadow-elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.06)"
|
|
1049
1091
|
},
|
|
1050
1092
|
outline: {
|
|
1051
1093
|
background: "transparent",
|
|
1052
|
-
borderColor: "border.
|
|
1094
|
+
borderColor: "border.contrast",
|
|
1053
1095
|
boxShadow: "none"
|
|
1054
1096
|
},
|
|
1055
1097
|
glow: {
|
|
1056
|
-
background: "linear-gradient(145deg, var(--color-surface-
|
|
1098
|
+
background: "linear-gradient(145deg, var(--color-surface-card-top), var(--color-surface-card-bottom))",
|
|
1057
1099
|
borderColor: "primary.DEFAULT",
|
|
1058
|
-
boxShadow: "var(--shadow-
|
|
1100
|
+
boxShadow: "var(--shadow-elevation-2), var(--shadow-focus-ring-primary), inset 0 1px 0 rgba(255, 255, 255, 0.06)"
|
|
1059
1101
|
}
|
|
1060
1102
|
},
|
|
1061
1103
|
size: {
|
|
@@ -1328,23 +1370,23 @@ var modalSlotRecipe = defineSlotRecipe({
|
|
|
1328
1370
|
padding: "md"
|
|
1329
1371
|
},
|
|
1330
1372
|
modal: {
|
|
1331
|
-
background: "linear-gradient(145deg, var(--color-surface-
|
|
1373
|
+
background: "linear-gradient(145deg, var(--color-surface-card-top), var(--color-surface-card-bottom))",
|
|
1332
1374
|
borderWidth: "base",
|
|
1333
1375
|
borderStyle: "solid",
|
|
1334
|
-
borderColor: "
|
|
1376
|
+
borderColor: "border.contrast",
|
|
1335
1377
|
maxWidth: "500px",
|
|
1336
1378
|
width: "100%",
|
|
1337
1379
|
maxHeight: "90vh",
|
|
1338
1380
|
overflowY: "auto",
|
|
1339
|
-
boxShadow: "var(--shadow-
|
|
1381
|
+
boxShadow: "var(--shadow-elevation-3), inset 0 1px 0 rgba(255, 255, 255, 0.08), var(--shadow-focus-ring-primary)",
|
|
1340
1382
|
borderRadius: "md"
|
|
1341
1383
|
},
|
|
1342
1384
|
header: {
|
|
1343
1385
|
padding: "lg",
|
|
1344
1386
|
borderBottomWidth: "thin",
|
|
1345
1387
|
borderBottomStyle: "solid",
|
|
1346
|
-
borderBottomColor: "border.
|
|
1347
|
-
background: "linear-gradient(180deg, var(--color-overlay-
|
|
1388
|
+
borderBottomColor: "border.soft",
|
|
1389
|
+
background: "linear-gradient(180deg, var(--color-overlay-subtle), transparent)"
|
|
1348
1390
|
},
|
|
1349
1391
|
title: {
|
|
1350
1392
|
margin: 0,
|
|
@@ -1386,7 +1428,6 @@ var switchSlotRecipe = defineSlotRecipe2({
|
|
|
1386
1428
|
color: "text.primary",
|
|
1387
1429
|
textTransform: "uppercase",
|
|
1388
1430
|
letterSpacing: "wide",
|
|
1389
|
-
textShadow: "0 1px 2px rgba(0, 0, 0, 0.4)",
|
|
1390
1431
|
userSelect: "none"
|
|
1391
1432
|
},
|
|
1392
1433
|
control: {
|
|
@@ -1398,23 +1439,23 @@ var switchSlotRecipe = defineSlotRecipe2({
|
|
|
1398
1439
|
borderRadius: "full",
|
|
1399
1440
|
borderWidth: "base",
|
|
1400
1441
|
borderStyle: "solid",
|
|
1401
|
-
borderColor: "border.
|
|
1402
|
-
background: "linear-gradient(
|
|
1403
|
-
boxShadow: "var(--shadow-
|
|
1442
|
+
borderColor: "border.soft",
|
|
1443
|
+
background: "linear-gradient(145deg, var(--color-surface-control-top), var(--color-surface-control-bottom))",
|
|
1444
|
+
boxShadow: "var(--shadow-elevation-1), inset 0 1px 0 rgba(255, 255, 255, 0.06)",
|
|
1404
1445
|
transition: "all 200ms ease",
|
|
1405
1446
|
cursor: "pointer",
|
|
1406
1447
|
_checked: {
|
|
1407
|
-
borderColor: "primary",
|
|
1408
|
-
background: "linear-gradient(
|
|
1409
|
-
boxShadow: "var(--shadow-
|
|
1448
|
+
borderColor: "primary.DEFAULT",
|
|
1449
|
+
background: "linear-gradient(145deg, var(--color-interactive-primary-hover), var(--color-interactive-primary))",
|
|
1450
|
+
boxShadow: "var(--shadow-elevation-2), var(--shadow-glow-primary), inset 0 1px 0 rgba(255, 255, 255, 0.1)"
|
|
1410
1451
|
}
|
|
1411
1452
|
},
|
|
1412
1453
|
thumb: {
|
|
1413
1454
|
width: "var(--switch-height)",
|
|
1414
1455
|
height: "var(--switch-height)",
|
|
1415
1456
|
borderRadius: "full",
|
|
1416
|
-
background: "surface.
|
|
1417
|
-
boxShadow: "var(--shadow-
|
|
1457
|
+
background: "surface.1",
|
|
1458
|
+
boxShadow: "var(--shadow-elevation-1)",
|
|
1418
1459
|
transitionProperty: "translate",
|
|
1419
1460
|
transitionDuration: "fast",
|
|
1420
1461
|
_checked: {
|
|
@@ -1450,16 +1491,16 @@ var victoryScreenSlotRecipe = defineSlotRecipe3({
|
|
|
1450
1491
|
padding: "xl",
|
|
1451
1492
|
borderWidth: "thick",
|
|
1452
1493
|
borderStyle: "solid",
|
|
1453
|
-
borderColor: "border.
|
|
1454
|
-
background: "surface
|
|
1455
|
-
boxShadow: "
|
|
1494
|
+
borderColor: "border.contrast",
|
|
1495
|
+
background: "linear-gradient(145deg, var(--color-surface-card-top), var(--color-surface-card-bottom))",
|
|
1496
|
+
boxShadow: "var(--shadow-elevation-3), var(--shadow-focus-ring-primary)"
|
|
1456
1497
|
},
|
|
1457
1498
|
title: {
|
|
1458
1499
|
fontFamily: "display",
|
|
1459
1500
|
fontSize: "3xl",
|
|
1460
1501
|
color: "text.primary",
|
|
1461
1502
|
letterSpacing: "wide",
|
|
1462
|
-
textShadow: "
|
|
1503
|
+
textShadow: "0 2px 8px rgba(0, 0, 0, 0.45)",
|
|
1463
1504
|
animation: "pulse 2s ease-in-out infinite"
|
|
1464
1505
|
},
|
|
1465
1506
|
stats: {
|
|
@@ -1475,8 +1516,8 @@ var victoryScreenSlotRecipe = defineSlotRecipe3({
|
|
|
1475
1516
|
padding: "md",
|
|
1476
1517
|
borderWidth: "base",
|
|
1477
1518
|
borderStyle: "solid",
|
|
1478
|
-
borderColor: "
|
|
1479
|
-
background: "overlay.
|
|
1519
|
+
borderColor: "primary.DEFAULT",
|
|
1520
|
+
background: "overlay.primarySoft",
|
|
1480
1521
|
animation: "glowHighlight 2s ease-in-out infinite"
|
|
1481
1522
|
},
|
|
1482
1523
|
actions: {
|
|
@@ -1499,7 +1540,7 @@ var accordionSlotRecipe = defineSlotRecipe4({
|
|
|
1499
1540
|
item: {
|
|
1500
1541
|
borderWidth: "thin",
|
|
1501
1542
|
borderStyle: "solid",
|
|
1502
|
-
borderColor: "border.
|
|
1543
|
+
borderColor: "border.soft",
|
|
1503
1544
|
borderRadius: "md",
|
|
1504
1545
|
overflow: "hidden",
|
|
1505
1546
|
marginBottom: "sm",
|
|
@@ -1513,7 +1554,7 @@ var accordionSlotRecipe = defineSlotRecipe4({
|
|
|
1513
1554
|
justifyContent: "space-between",
|
|
1514
1555
|
width: "100%",
|
|
1515
1556
|
padding: "sm",
|
|
1516
|
-
|
|
1557
|
+
background: "linear-gradient(145deg, var(--color-surface-control-top), var(--color-surface-control-bottom))",
|
|
1517
1558
|
borderWidth: 0,
|
|
1518
1559
|
borderBottomWidth: "thin",
|
|
1519
1560
|
borderStyle: "solid",
|
|
@@ -1528,11 +1569,12 @@ var accordionSlotRecipe = defineSlotRecipe4({
|
|
|
1528
1569
|
transition: "all var(--timing-base) var(--easing-default)",
|
|
1529
1570
|
boxShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.06)",
|
|
1530
1571
|
_hover: {
|
|
1531
|
-
|
|
1572
|
+
borderColor: "border.contrast",
|
|
1573
|
+
background: "linear-gradient(145deg, var(--color-surface-card-top), var(--color-surface-card-bottom))"
|
|
1532
1574
|
},
|
|
1533
1575
|
_expanded: {
|
|
1534
|
-
borderBottomColor: "border.
|
|
1535
|
-
|
|
1576
|
+
borderBottomColor: "border.soft",
|
|
1577
|
+
background: "linear-gradient(145deg, var(--color-surface-card-top), var(--color-surface-card-bottom))"
|
|
1536
1578
|
}
|
|
1537
1579
|
},
|
|
1538
1580
|
icon: {
|
|
@@ -1544,25 +1586,25 @@ var accordionSlotRecipe = defineSlotRecipe4({
|
|
|
1544
1586
|
},
|
|
1545
1587
|
content: {
|
|
1546
1588
|
padding: "md",
|
|
1547
|
-
backgroundColor: "surface.
|
|
1589
|
+
backgroundColor: "surface.2"
|
|
1548
1590
|
}
|
|
1549
1591
|
},
|
|
1550
1592
|
variants: {
|
|
1551
1593
|
variant: {
|
|
1552
1594
|
subtle: {
|
|
1553
1595
|
item: {
|
|
1554
|
-
borderColor: "border.
|
|
1596
|
+
borderColor: "border.soft"
|
|
1555
1597
|
},
|
|
1556
1598
|
trigger: {
|
|
1557
|
-
|
|
1599
|
+
background: "linear-gradient(145deg, var(--color-surface-control-top), var(--color-surface-control-bottom))"
|
|
1558
1600
|
},
|
|
1559
1601
|
content: {
|
|
1560
|
-
backgroundColor: "surface.
|
|
1602
|
+
backgroundColor: "surface.2"
|
|
1561
1603
|
}
|
|
1562
1604
|
},
|
|
1563
1605
|
outline: {
|
|
1564
1606
|
item: {
|
|
1565
|
-
borderColor: "border.
|
|
1607
|
+
borderColor: "border.contrast"
|
|
1566
1608
|
},
|
|
1567
1609
|
trigger: {
|
|
1568
1610
|
backgroundColor: "transparent",
|
|
@@ -1577,14 +1619,14 @@ var accordionSlotRecipe = defineSlotRecipe4({
|
|
|
1577
1619
|
solid: {
|
|
1578
1620
|
item: {
|
|
1579
1621
|
borderColor: "primary.DEFAULT",
|
|
1580
|
-
boxShadow: "var(--shadow-glow-primary)"
|
|
1622
|
+
boxShadow: "var(--shadow-elevation-2), var(--shadow-glow-primary)"
|
|
1581
1623
|
},
|
|
1582
1624
|
trigger: {
|
|
1583
|
-
|
|
1625
|
+
background: "linear-gradient(145deg, var(--color-surface-card-top), var(--color-surface-card-bottom))",
|
|
1584
1626
|
borderBottomColor: "primary.DEFAULT"
|
|
1585
1627
|
},
|
|
1586
1628
|
content: {
|
|
1587
|
-
backgroundColor: "surface.
|
|
1629
|
+
backgroundColor: "surface.2"
|
|
1588
1630
|
}
|
|
1589
1631
|
}
|
|
1590
1632
|
},
|
|
@@ -1637,7 +1679,7 @@ var radioGroupSlotRecipe = defineSlotRecipe5({
|
|
|
1637
1679
|
fontFamily: "body",
|
|
1638
1680
|
fontSize: "base",
|
|
1639
1681
|
fontWeight: "medium",
|
|
1640
|
-
color: "
|
|
1682
|
+
color: "text.secondary",
|
|
1641
1683
|
textTransform: "uppercase",
|
|
1642
1684
|
letterSpacing: "tight",
|
|
1643
1685
|
marginBottom: "md"
|
|
@@ -1654,25 +1696,26 @@ var radioGroupSlotRecipe = defineSlotRecipe5({
|
|
|
1654
1696
|
padding: "sm",
|
|
1655
1697
|
borderWidth: "thin",
|
|
1656
1698
|
borderStyle: "solid",
|
|
1657
|
-
borderColor: "border.
|
|
1699
|
+
borderColor: "border.soft",
|
|
1658
1700
|
borderRadius: "md",
|
|
1659
|
-
|
|
1701
|
+
background: "linear-gradient(145deg, var(--color-surface-control-top), var(--color-surface-control-bottom))",
|
|
1660
1702
|
cursor: "pointer",
|
|
1661
1703
|
transition: "all var(--timing-base) var(--easing-default)",
|
|
1662
1704
|
_hover: {
|
|
1663
|
-
borderColor: "
|
|
1664
|
-
backgroundColor: "overlay.
|
|
1705
|
+
borderColor: "border.contrast",
|
|
1706
|
+
backgroundColor: "overlay.light"
|
|
1665
1707
|
},
|
|
1666
1708
|
_checked: {
|
|
1667
1709
|
borderColor: "primary.DEFAULT",
|
|
1668
|
-
backgroundColor: "overlay.
|
|
1710
|
+
backgroundColor: "overlay.primarySoft",
|
|
1711
|
+
boxShadow: "var(--shadow-focus-ring-primary)"
|
|
1669
1712
|
},
|
|
1670
1713
|
_disabled: {
|
|
1671
1714
|
opacity: 0.5,
|
|
1672
1715
|
cursor: "not-allowed",
|
|
1673
1716
|
_hover: {
|
|
1674
|
-
borderColor: "border.
|
|
1675
|
-
|
|
1717
|
+
borderColor: "border.soft",
|
|
1718
|
+
background: "linear-gradient(145deg, var(--color-surface-control-top), var(--color-surface-control-bottom))"
|
|
1676
1719
|
}
|
|
1677
1720
|
}
|
|
1678
1721
|
},
|
|
@@ -1684,7 +1727,7 @@ var radioGroupSlotRecipe = defineSlotRecipe5({
|
|
|
1684
1727
|
height: "18px",
|
|
1685
1728
|
borderWidth: "base",
|
|
1686
1729
|
borderStyle: "solid",
|
|
1687
|
-
borderColor: "border.
|
|
1730
|
+
borderColor: "border.contrast",
|
|
1688
1731
|
borderRadius: "50%",
|
|
1689
1732
|
backgroundColor: "surface.0",
|
|
1690
1733
|
flexShrink: 0,
|
|
@@ -1723,12 +1766,12 @@ var radioGroupSlotRecipe = defineSlotRecipe5({
|
|
|
1723
1766
|
},
|
|
1724
1767
|
subtle: {
|
|
1725
1768
|
item: {
|
|
1726
|
-
backgroundColor: "surface.
|
|
1769
|
+
backgroundColor: "surface.2",
|
|
1727
1770
|
_hover: {
|
|
1728
|
-
backgroundColor: "surface.
|
|
1771
|
+
backgroundColor: "surface.3"
|
|
1729
1772
|
},
|
|
1730
1773
|
_checked: {
|
|
1731
|
-
backgroundColor: "overlay.
|
|
1774
|
+
backgroundColor: "overlay.primarySoft"
|
|
1732
1775
|
}
|
|
1733
1776
|
}
|
|
1734
1777
|
},
|
|
@@ -1736,9 +1779,9 @@ var radioGroupSlotRecipe = defineSlotRecipe5({
|
|
|
1736
1779
|
item: {
|
|
1737
1780
|
padding: "md",
|
|
1738
1781
|
borderRadius: "md",
|
|
1739
|
-
boxShadow: "var(--shadow-
|
|
1782
|
+
boxShadow: "var(--shadow-elevation-1)",
|
|
1740
1783
|
_checked: {
|
|
1741
|
-
boxShadow: "var(--shadow-
|
|
1784
|
+
boxShadow: "var(--shadow-elevation-2), var(--shadow-focus-ring-primary)"
|
|
1742
1785
|
}
|
|
1743
1786
|
}
|
|
1744
1787
|
}
|