@skra/tokens 0.3.0 → 0.4.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 (14) hide show
  1. package/brutal/_comp.scss +28 -0
  2. package/brutal/_density.comfortable.scoped.scss +6 -0
  3. package/brutal/_density.comfortable.scss +6 -0
  4. package/brutal/_density.compact.scoped.scss +6 -0
  5. package/brutal/_density.compact.scss +6 -0
  6. package/brutal/_theme.dark.scoped.scss +14 -0
  7. package/brutal/_theme.dark.scss +14 -0
  8. package/brutal/_theme.scoped.scss +28 -0
  9. package/manifests/surface.json +141 -0
  10. package/package.json +1 -1
  11. package/skra/_comp.scss +28 -0
  12. package/skra/_density.comfortable.scss +6 -0
  13. package/skra/_density.compact.scss +6 -0
  14. package/skra/_theme.dark.scss +14 -0
package/brutal/_comp.scss CHANGED
@@ -398,6 +398,18 @@
398
398
  --skra-comp-status-dot-padding-inline: 0;
399
399
  --skra-comp-status-dot-shadow: none;
400
400
  --skra-comp-status-dot-focus-ring-width: 0.125rem;
401
+ --skra-comp-surface-background-hover: oklch(81.0% 0.025 95);
402
+ --skra-comp-surface-background-active: oklch(75.0% 0.025 95);
403
+ --skra-comp-surface-foreground-hover: oklch(12.0% 0 0);
404
+ --skra-comp-surface-foreground-active: oklch(18.0% 0 0);
405
+ --skra-comp-surface-border-color-hover: oklch(12.0% 0 0);
406
+ --skra-comp-surface-border-color-active: oklch(18.0% 0 0);
407
+ --skra-comp-surface-focus-ring-color-hover: oklch(57.0% 0.18 295);
408
+ --skra-comp-surface-focus-ring-color-active: oklch(63.0% 0.18 295);
409
+ --skra-comp-surface-border-width: 0.1875rem;
410
+ --skra-comp-surface-border-style: solid;
411
+ --skra-comp-surface-focus-ring-width: 0.1875rem;
412
+ --skra-comp-surface-border-width-selected: 0.375rem;
401
413
  --skra-comp-tabs-foreground-hover: oklch(47.0% 0 0);
402
414
  --skra-comp-tabs-foreground-active: oklch(53.0% 0 0);
403
415
  --skra-comp-tabs-focus-ring-color-hover: oklch(57.0% 0.18 295);
@@ -527,6 +539,8 @@
527
539
  --skra-comp-skeleton-radius: var(--skra-sys-radius-sm);
528
540
  --skra-comp-skeleton-shadow: var(--skra-sys-shadow-sm);
529
541
  --skra-comp-status-dot-radius: var(--skra-sys-radius-full);
542
+ --skra-comp-surface-radius: var(--skra-sys-radius-none);
543
+ --skra-comp-surface-shadow: var(--skra-sys-shadow-md);
530
544
  --skra-comp-tabs-radius: var(--skra-sys-radius-sm);
531
545
  --skra-comp-toast-radius: var(--skra-sys-radius-md);
532
546
  --skra-comp-toast-shadow: var(--skra-sys-shadow-lg);
@@ -843,6 +857,20 @@
843
857
  --skra-comp-status-dot-size-sm: var(--skra-sys-size-status-dot-sm);
844
858
  --skra-comp-status-dot-size-md: var(--skra-sys-size-status-dot-md);
845
859
  --skra-comp-status-dot-size-lg: var(--skra-sys-size-status-dot-lg);
860
+ --skra-comp-surface-background: var(--skra-sys-color-surface-raised);
861
+ --skra-comp-surface-foreground: var(--skra-sys-color-on-surface);
862
+ --skra-comp-surface-border-color: var(--skra-sys-color-border);
863
+ --skra-comp-surface-padding-block: var(--skra-sys-spacing-4);
864
+ --skra-comp-surface-padding-inline: var(--skra-sys-spacing-4);
865
+ --skra-comp-surface-motion-duration: var(--skra-sys-motion-duration-fast);
866
+ --skra-comp-surface-motion-easing: var(--skra-sys-motion-easing-standard);
867
+ --skra-comp-surface-focus-ring-color: var(--skra-sys-color-focus-ring);
868
+ --skra-comp-surface-padding-block-sm: var(--skra-sys-spacing-2);
869
+ --skra-comp-surface-padding-inline-sm: var(--skra-sys-spacing-2);
870
+ --skra-comp-surface-padding-block-lg: var(--skra-sys-spacing-6);
871
+ --skra-comp-surface-padding-inline-lg: var(--skra-sys-spacing-6);
872
+ --skra-comp-surface-background-selected: var(--skra-sys-color-primary-soft);
873
+ --skra-comp-surface-border-color-selected: var(--skra-sys-color-primary-border);
846
874
  --skra-comp-tabs-foreground: var(--skra-sys-color-on-surface-subtle);
847
875
  --skra-comp-tabs-padding-block: var(--skra-sys-spacing-2);
848
876
  --skra-comp-tabs-padding-inline: var(--skra-sys-spacing-4);
package/brutal/_density.comfortable.scoped.scss CHANGED
@@ -145,6 +145,12 @@
145
145
  --skra-comp-status-dot-size-sm: var(--skra-sys-size-status-dot-sm);
146
146
  --skra-comp-status-dot-size-md: var(--skra-sys-size-status-dot-md);
147
147
  --skra-comp-status-dot-size-lg: var(--skra-sys-size-status-dot-lg);
148
+ --skra-comp-surface-padding-block: var(--skra-sys-spacing-4);
149
+ --skra-comp-surface-padding-inline: var(--skra-sys-spacing-4);
150
+ --skra-comp-surface-padding-block-sm: var(--skra-sys-spacing-2);
151
+ --skra-comp-surface-padding-inline-sm: var(--skra-sys-spacing-2);
152
+ --skra-comp-surface-padding-block-lg: var(--skra-sys-spacing-6);
153
+ --skra-comp-surface-padding-inline-lg: var(--skra-sys-spacing-6);
148
154
  --skra-comp-tabs-padding-block: var(--skra-sys-spacing-2);
149
155
  --skra-comp-tabs-padding-inline: var(--skra-sys-spacing-4);
150
156
  --skra-comp-tabs-gap: var(--skra-sys-spacing-1);
package/brutal/_density.comfortable.scss CHANGED
@@ -145,6 +145,12 @@
145
145
  --skra-comp-status-dot-size-sm: var(--skra-sys-size-status-dot-sm);
146
146
  --skra-comp-status-dot-size-md: var(--skra-sys-size-status-dot-md);
147
147
  --skra-comp-status-dot-size-lg: var(--skra-sys-size-status-dot-lg);
148
+ --skra-comp-surface-padding-block: var(--skra-sys-spacing-4);
149
+ --skra-comp-surface-padding-inline: var(--skra-sys-spacing-4);
150
+ --skra-comp-surface-padding-block-sm: var(--skra-sys-spacing-2);
151
+ --skra-comp-surface-padding-inline-sm: var(--skra-sys-spacing-2);
152
+ --skra-comp-surface-padding-block-lg: var(--skra-sys-spacing-6);
153
+ --skra-comp-surface-padding-inline-lg: var(--skra-sys-spacing-6);
148
154
  --skra-comp-tabs-padding-block: var(--skra-sys-spacing-2);
149
155
  --skra-comp-tabs-padding-inline: var(--skra-sys-spacing-4);
150
156
  --skra-comp-tabs-gap: var(--skra-sys-spacing-1);
package/brutal/_density.compact.scoped.scss CHANGED
@@ -145,6 +145,12 @@
145
145
  --skra-comp-status-dot-size-sm: var(--skra-sys-size-status-dot-sm);
146
146
  --skra-comp-status-dot-size-md: var(--skra-sys-size-status-dot-md);
147
147
  --skra-comp-status-dot-size-lg: var(--skra-sys-size-status-dot-lg);
148
+ --skra-comp-surface-padding-block: var(--skra-sys-spacing-4);
149
+ --skra-comp-surface-padding-inline: var(--skra-sys-spacing-4);
150
+ --skra-comp-surface-padding-block-sm: var(--skra-sys-spacing-2);
151
+ --skra-comp-surface-padding-inline-sm: var(--skra-sys-spacing-2);
152
+ --skra-comp-surface-padding-block-lg: var(--skra-sys-spacing-6);
153
+ --skra-comp-surface-padding-inline-lg: var(--skra-sys-spacing-6);
148
154
  --skra-comp-tabs-padding-block: var(--skra-sys-spacing-2);
149
155
  --skra-comp-tabs-padding-inline: var(--skra-sys-spacing-4);
150
156
  --skra-comp-tabs-gap: var(--skra-sys-spacing-1);
package/brutal/_density.compact.scss CHANGED
@@ -145,6 +145,12 @@
145
145
  --skra-comp-status-dot-size-sm: var(--skra-sys-size-status-dot-sm);
146
146
  --skra-comp-status-dot-size-md: var(--skra-sys-size-status-dot-md);
147
147
  --skra-comp-status-dot-size-lg: var(--skra-sys-size-status-dot-lg);
148
+ --skra-comp-surface-padding-block: var(--skra-sys-spacing-4);
149
+ --skra-comp-surface-padding-inline: var(--skra-sys-spacing-4);
150
+ --skra-comp-surface-padding-block-sm: var(--skra-sys-spacing-2);
151
+ --skra-comp-surface-padding-inline-sm: var(--skra-sys-spacing-2);
152
+ --skra-comp-surface-padding-block-lg: var(--skra-sys-spacing-6);
153
+ --skra-comp-surface-padding-inline-lg: var(--skra-sys-spacing-6);
148
154
  --skra-comp-tabs-padding-block: var(--skra-sys-spacing-2);
149
155
  --skra-comp-tabs-padding-inline: var(--skra-sys-spacing-4);
150
156
  --skra-comp-tabs-gap: var(--skra-sys-spacing-1);
package/brutal/_theme.dark.scoped.scss CHANGED
@@ -445,6 +445,14 @@
445
445
  --skra-comp-status-dot-border-color-active: oklch(33.0% 0 0);
446
446
  --skra-comp-status-dot-focus-ring-color-hover: oklch(48.0% 0.162 295);
447
447
  --skra-comp-status-dot-focus-ring-color-active: oklch(42.0% 0.162 295);
448
+ --skra-comp-surface-background-hover: oklch(31.0% 0 0);
449
+ --skra-comp-surface-background-active: oklch(37.0% 0 0);
450
+ --skra-comp-surface-foreground-hover: oklch(80.0% 0 0);
451
+ --skra-comp-surface-foreground-active: oklch(74.0% 0 0);
452
+ --skra-comp-surface-border-color-hover: oklch(80.0% 0 0);
453
+ --skra-comp-surface-border-color-active: oklch(74.0% 0 0);
454
+ --skra-comp-surface-focus-ring-color-hover: oklch(48.0% 0.162 295);
455
+ --skra-comp-surface-focus-ring-color-active: oklch(42.0% 0.162 295);
448
456
  --skra-comp-tabs-foreground-hover: oklch(53.0% 0 0);
449
457
  --skra-comp-tabs-foreground-active: oklch(47.0% 0 0);
450
458
  --skra-comp-tabs-focus-ring-color-hover: oklch(48.0% 0.162 295);
@@ -666,6 +674,12 @@
666
674
  --skra-comp-status-dot-foreground: var(--skra-sys-color-neutral-contrast);
667
675
  --skra-comp-status-dot-border-color: var(--skra-sys-color-surface);
668
676
  --skra-comp-status-dot-focus-ring-color: var(--skra-sys-color-focus-ring);
677
+ --skra-comp-surface-background: var(--skra-sys-color-surface-raised);
678
+ --skra-comp-surface-foreground: var(--skra-sys-color-on-surface);
679
+ --skra-comp-surface-border-color: var(--skra-sys-color-border);
680
+ --skra-comp-surface-focus-ring-color: var(--skra-sys-color-focus-ring);
681
+ --skra-comp-surface-background-selected: var(--skra-sys-color-primary-soft);
682
+ --skra-comp-surface-border-color-selected: var(--skra-sys-color-primary-border);
669
683
  --skra-comp-tabs-foreground: var(--skra-sys-color-on-surface-subtle);
670
684
  --skra-comp-tabs-focus-ring-color: var(--skra-sys-color-focus-ring);
671
685
  --skra-comp-tabs-foreground-selected: var(--skra-sys-color-on-surface-strong);
package/brutal/_theme.dark.scss CHANGED
@@ -446,6 +446,14 @@
446
446
  --skra-comp-status-dot-border-color-active: oklch(33.0% 0 0);
447
447
  --skra-comp-status-dot-focus-ring-color-hover: oklch(48.0% 0.162 295);
448
448
  --skra-comp-status-dot-focus-ring-color-active: oklch(42.0% 0.162 295);
449
+ --skra-comp-surface-background-hover: oklch(31.0% 0 0);
450
+ --skra-comp-surface-background-active: oklch(37.0% 0 0);
451
+ --skra-comp-surface-foreground-hover: oklch(80.0% 0 0);
452
+ --skra-comp-surface-foreground-active: oklch(74.0% 0 0);
453
+ --skra-comp-surface-border-color-hover: oklch(80.0% 0 0);
454
+ --skra-comp-surface-border-color-active: oklch(74.0% 0 0);
455
+ --skra-comp-surface-focus-ring-color-hover: oklch(48.0% 0.162 295);
456
+ --skra-comp-surface-focus-ring-color-active: oklch(42.0% 0.162 295);
449
457
  --skra-comp-tabs-foreground-hover: oklch(53.0% 0 0);
450
458
  --skra-comp-tabs-foreground-active: oklch(47.0% 0 0);
451
459
  --skra-comp-tabs-focus-ring-color-hover: oklch(48.0% 0.162 295);
@@ -667,6 +675,12 @@
667
675
  --skra-comp-status-dot-foreground: var(--skra-sys-color-neutral-contrast);
668
676
  --skra-comp-status-dot-border-color: var(--skra-sys-color-surface);
669
677
  --skra-comp-status-dot-focus-ring-color: var(--skra-sys-color-focus-ring);
678
+ --skra-comp-surface-background: var(--skra-sys-color-surface-raised);
679
+ --skra-comp-surface-foreground: var(--skra-sys-color-on-surface);
680
+ --skra-comp-surface-border-color: var(--skra-sys-color-border);
681
+ --skra-comp-surface-focus-ring-color: var(--skra-sys-color-focus-ring);
682
+ --skra-comp-surface-background-selected: var(--skra-sys-color-primary-soft);
683
+ --skra-comp-surface-border-color-selected: var(--skra-sys-color-primary-border);
670
684
  --skra-comp-tabs-foreground: var(--skra-sys-color-on-surface-subtle);
671
685
  --skra-comp-tabs-focus-ring-color: var(--skra-sys-color-focus-ring);
672
686
  --skra-comp-tabs-foreground-selected: var(--skra-sys-color-on-surface-strong);
package/brutal/_theme.scoped.scss CHANGED
@@ -539,6 +539,18 @@
539
539
  --skra-comp-status-dot-padding-inline: 0;
540
540
  --skra-comp-status-dot-shadow: none;
541
541
  --skra-comp-status-dot-focus-ring-width: 0.125rem;
542
+ --skra-comp-surface-background-hover: oklch(81.0% 0.025 95);
543
+ --skra-comp-surface-background-active: oklch(75.0% 0.025 95);
544
+ --skra-comp-surface-foreground-hover: oklch(12.0% 0 0);
545
+ --skra-comp-surface-foreground-active: oklch(18.0% 0 0);
546
+ --skra-comp-surface-border-color-hover: oklch(12.0% 0 0);
547
+ --skra-comp-surface-border-color-active: oklch(18.0% 0 0);
548
+ --skra-comp-surface-focus-ring-color-hover: oklch(57.0% 0.18 295);
549
+ --skra-comp-surface-focus-ring-color-active: oklch(63.0% 0.18 295);
550
+ --skra-comp-surface-border-width: 0.1875rem;
551
+ --skra-comp-surface-border-style: solid;
552
+ --skra-comp-surface-focus-ring-width: 0.1875rem;
553
+ --skra-comp-surface-border-width-selected: 0.375rem;
542
554
  --skra-comp-tabs-foreground-hover: oklch(47.0% 0 0);
543
555
  --skra-comp-tabs-foreground-active: oklch(53.0% 0 0);
544
556
  --skra-comp-tabs-focus-ring-color-hover: oklch(57.0% 0.18 295);
@@ -831,6 +843,8 @@
831
843
  --skra-comp-skeleton-radius: var(--skra-sys-radius-sm);
832
844
  --skra-comp-skeleton-shadow: var(--skra-sys-shadow-sm);
833
845
  --skra-comp-status-dot-radius: var(--skra-sys-radius-full);
846
+ --skra-comp-surface-radius: var(--skra-sys-radius-none);
847
+ --skra-comp-surface-shadow: var(--skra-sys-shadow-md);
834
848
  --skra-comp-tabs-radius: var(--skra-sys-radius-sm);
835
849
  --skra-comp-toast-radius: var(--skra-sys-radius-md);
836
850
  --skra-comp-toast-shadow: var(--skra-sys-shadow-lg);
@@ -1147,6 +1161,20 @@
1147
1161
  --skra-comp-status-dot-size-sm: var(--skra-sys-size-status-dot-sm);
1148
1162
  --skra-comp-status-dot-size-md: var(--skra-sys-size-status-dot-md);
1149
1163
  --skra-comp-status-dot-size-lg: var(--skra-sys-size-status-dot-lg);
1164
+ --skra-comp-surface-background: var(--skra-sys-color-surface-raised);
1165
+ --skra-comp-surface-foreground: var(--skra-sys-color-on-surface);
1166
+ --skra-comp-surface-border-color: var(--skra-sys-color-border);
1167
+ --skra-comp-surface-padding-block: var(--skra-sys-spacing-4);
1168
+ --skra-comp-surface-padding-inline: var(--skra-sys-spacing-4);
1169
+ --skra-comp-surface-motion-duration: var(--skra-sys-motion-duration-fast);
1170
+ --skra-comp-surface-motion-easing: var(--skra-sys-motion-easing-standard);
1171
+ --skra-comp-surface-focus-ring-color: var(--skra-sys-color-focus-ring);
1172
+ --skra-comp-surface-padding-block-sm: var(--skra-sys-spacing-2);
1173
+ --skra-comp-surface-padding-inline-sm: var(--skra-sys-spacing-2);
1174
+ --skra-comp-surface-padding-block-lg: var(--skra-sys-spacing-6);
1175
+ --skra-comp-surface-padding-inline-lg: var(--skra-sys-spacing-6);
1176
+ --skra-comp-surface-background-selected: var(--skra-sys-color-primary-soft);
1177
+ --skra-comp-surface-border-color-selected: var(--skra-sys-color-primary-border);
1150
1178
  --skra-comp-tabs-foreground: var(--skra-sys-color-on-surface-subtle);
1151
1179
  --skra-comp-tabs-padding-block: var(--skra-sys-spacing-2);
1152
1180
  --skra-comp-tabs-padding-inline: var(--skra-sys-spacing-4);
package/manifests/surface.json ADDED
@@ -0,0 +1,141 @@
1
+ {
2
+ "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
3
+ "component": "surface",
4
+ "skraVersion": ">=1.0.0",
5
+ "axes": [
6
+ {
7
+ "token": "--skra-comp-surface-background",
8
+ "label": "Surface — container fill colour",
9
+ "group": "Surface",
10
+ "type": "color",
11
+ "states": ["default"],
12
+ "constraint": { "oklch": true },
13
+ "overridable": ["overlay", "subtree", "instance"]
14
+ },
15
+ {
16
+ "token": "--skra-comp-surface-foreground",
17
+ "label": "Surface — inherited text colour inside the container",
18
+ "group": "Surface",
19
+ "type": "color",
20
+ "states": ["default"],
21
+ "constraint": { "oklch": true },
22
+ "overridable": ["overlay", "subtree", "instance"]
23
+ },
24
+ {
25
+ "token": "--skra-comp-surface-border-color",
26
+ "label": "Surface — container edge colour",
27
+ "group": "Surface",
28
+ "type": "color",
29
+ "states": ["default"],
30
+ "constraint": { "oklch": true },
31
+ "overridable": ["overlay", "subtree"]
32
+ },
33
+ {
34
+ "token": "--skra-comp-surface-border-width",
35
+ "label": "Surface — container edge width",
36
+ "group": "Surface",
37
+ "type": "dimension",
38
+ "states": ["default"],
39
+ "constraint": { "unit": "rem", "min": 0, "max": 0.5 },
40
+ "overridable": ["overlay", "subtree"]
41
+ },
42
+ {
43
+ "token": "--skra-comp-surface-radius",
44
+ "label": "Surface — container corner radius",
45
+ "group": "Surface",
46
+ "type": "dimension",
47
+ "states": ["default"],
48
+ "constraint": { "unit": "rem", "min": 0, "max": 2 },
49
+ "overridable": ["overlay", "subtree"]
50
+ },
51
+ {
52
+ "token": "--skra-comp-surface-shadow",
53
+ "label": "Surface — elevation shadow (the skin's single neutral level)",
54
+ "group": "Surface",
55
+ "type": "shadow",
56
+ "states": ["default"],
57
+ "overridable": ["overlay", "subtree"]
58
+ },
59
+ {
60
+ "token": "--skra-comp-surface-padding-block",
61
+ "label": "Surface — block padding, medium preset (the default)",
62
+ "group": "Spacing",
63
+ "type": "dimension",
64
+ "states": ["default"],
65
+ "constraint": { "unit": "rem", "min": 0, "max": 4 },
66
+ "overridable": ["overlay", "subtree", "instance"]
67
+ },
68
+ {
69
+ "token": "--skra-comp-surface-padding-inline",
70
+ "label": "Surface — inline padding, medium preset (the default)",
71
+ "group": "Spacing",
72
+ "type": "dimension",
73
+ "states": ["default"],
74
+ "constraint": { "unit": "rem", "min": 0, "max": 4 },
75
+ "overridable": ["overlay", "subtree", "instance"]
76
+ },
77
+ {
78
+ "token": "--skra-comp-surface-padding-block-sm",
79
+ "label": "Surface — block padding, small preset",
80
+ "group": "Spacing",
81
+ "type": "dimension",
82
+ "states": ["default"],
83
+ "constraint": { "unit": "rem", "min": 0, "max": 4 },
84
+ "overridable": ["overlay", "subtree", "instance"]
85
+ },
86
+ {
87
+ "token": "--skra-comp-surface-padding-inline-sm",
88
+ "label": "Surface — inline padding, small preset",
89
+ "group": "Spacing",
90
+ "type": "dimension",
91
+ "states": ["default"],
92
+ "constraint": { "unit": "rem", "min": 0, "max": 4 },
93
+ "overridable": ["overlay", "subtree", "instance"]
94
+ },
95
+ {
96
+ "token": "--skra-comp-surface-padding-block-lg",
97
+ "label": "Surface — block padding, large preset",
98
+ "group": "Spacing",
99
+ "type": "dimension",
100
+ "states": ["default"],
101
+ "constraint": { "unit": "rem", "min": 0, "max": 4 },
102
+ "overridable": ["overlay", "subtree", "instance"]
103
+ },
104
+ {
105
+ "token": "--skra-comp-surface-padding-inline-lg",
106
+ "label": "Surface — inline padding, large preset",
107
+ "group": "Spacing",
108
+ "type": "dimension",
109
+ "states": ["default"],
110
+ "constraint": { "unit": "rem", "min": 0, "max": 4 },
111
+ "overridable": ["overlay", "subtree", "instance"]
112
+ },
113
+ {
114
+ "token": "--skra-comp-surface-background-selected",
115
+ "label": "Surface — fill when the consumer's markup reads as selected/current",
116
+ "group": "Surface",
117
+ "type": "color",
118
+ "states": ["selected"],
119
+ "constraint": { "oklch": true },
120
+ "overridable": ["overlay", "subtree"]
121
+ },
122
+ {
123
+ "token": "--skra-comp-surface-border-color-selected",
124
+ "label": "Surface — edge colour when selected/current",
125
+ "group": "Surface",
126
+ "type": "color",
127
+ "states": ["selected"],
128
+ "constraint": { "oklch": true },
129
+ "overridable": ["overlay", "subtree"]
130
+ },
131
+ {
132
+ "token": "--skra-comp-surface-border-width-selected",
133
+ "label": "Surface — edge width when selected/current (WCAG 1.4.1 non-colour channel — must differ from the resting width)",
134
+ "group": "Surface",
135
+ "type": "dimension",
136
+ "states": ["selected"],
137
+ "constraint": { "unit": "rem", "min": 0, "max": 0.5 },
138
+ "overridable": ["overlay", "subtree"]
139
+ }
140
+ ]
141
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skra/tokens",
3
- "version": "0.3.0",
3
+ "version": "0.4.0",
4
4
  "license": "Apache-2.0",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/skra/_comp.scss CHANGED
@@ -404,6 +404,18 @@
404
404
  --skra-comp-status-dot-padding-inline: 0;
405
405
  --skra-comp-status-dot-shadow: none;
406
406
  --skra-comp-status-dot-focus-ring-width: 0.125rem;
407
+ --skra-comp-surface-background-hover: oklch(88.0% 0 0);
408
+ --skra-comp-surface-background-active: oklch(84.5% 0 0);
409
+ --skra-comp-surface-foreground-hover: oklch(7.0% 0 0);
410
+ --skra-comp-surface-foreground-active: oklch(10.5% 0 0);
411
+ --skra-comp-surface-border-color-hover: oklch(47.0% 0 0);
412
+ --skra-comp-surface-border-color-active: oklch(50.5% 0 0);
413
+ --skra-comp-surface-focus-ring-color-hover: oklch(53.0% 0.15 250);
414
+ --skra-comp-surface-focus-ring-color-active: oklch(49.5% 0.15 250);
415
+ --skra-comp-surface-border-width: 0.0625rem;
416
+ --skra-comp-surface-border-style: solid;
417
+ --skra-comp-surface-focus-ring-width: 0.125rem;
418
+ --skra-comp-surface-border-width-selected: 0.125rem;
407
419
  --skra-comp-tabs-foreground-hover: oklch(42.0% 0 0);
408
420
  --skra-comp-tabs-foreground-active: oklch(45.5% 0 0);
409
421
  --skra-comp-tabs-focus-ring-color-hover: oklch(53.0% 0.15 250);
@@ -502,6 +514,7 @@
502
514
  --skra-comp-select-min-block-size: var(--skra-sys-size-interactive-md);
503
515
  --skra-comp-select-panel-shadow: var(--skra-sys-shadow-lg);
504
516
  --skra-comp-select-option-min-block-size: var(--skra-sys-size-interactive-md);
517
+ --skra-comp-surface-shadow: var(--skra-sys-shadow-sm);
505
518
  --skra-comp-toast-shadow: var(--skra-sys-shadow-lg);
506
519
  --skra-comp-toast-dismiss-size: var(--skra-sys-size-interactive-sm);
507
520
  --skra-comp-tooltip-shadow: var(--skra-sys-shadow-md);
@@ -836,6 +849,21 @@
836
849
  --skra-comp-status-dot-size-sm: var(--skra-sys-size-status-dot-sm);
837
850
  --skra-comp-status-dot-size-md: var(--skra-sys-size-status-dot-md);
838
851
  --skra-comp-status-dot-size-lg: var(--skra-sys-size-status-dot-lg);
852
+ --skra-comp-surface-background: var(--skra-sys-color-surface-raised);
853
+ --skra-comp-surface-foreground: var(--skra-sys-color-on-surface);
854
+ --skra-comp-surface-border-color: var(--skra-sys-color-border-subtle);
855
+ --skra-comp-surface-radius: var(--skra-sys-radius-md);
856
+ --skra-comp-surface-padding-block: var(--skra-sys-spacing-4);
857
+ --skra-comp-surface-padding-inline: var(--skra-sys-spacing-4);
858
+ --skra-comp-surface-motion-duration: var(--skra-sys-motion-duration-fast);
859
+ --skra-comp-surface-motion-easing: var(--skra-sys-motion-easing-standard);
860
+ --skra-comp-surface-focus-ring-color: var(--skra-sys-color-focus-ring);
861
+ --skra-comp-surface-padding-block-sm: var(--skra-sys-spacing-2);
862
+ --skra-comp-surface-padding-inline-sm: var(--skra-sys-spacing-2);
863
+ --skra-comp-surface-padding-block-lg: var(--skra-sys-spacing-6);
864
+ --skra-comp-surface-padding-inline-lg: var(--skra-sys-spacing-6);
865
+ --skra-comp-surface-background-selected: var(--skra-sys-color-primary-soft);
866
+ --skra-comp-surface-border-color-selected: var(--skra-sys-color-primary-border);
839
867
  --skra-comp-tabs-foreground: var(--skra-sys-color-on-surface-subtle);
840
868
  --skra-comp-tabs-radius: var(--skra-sys-radius-sm);
841
869
  --skra-comp-tabs-padding-block: var(--skra-sys-spacing-2);
package/skra/_density.comfortable.scss CHANGED
@@ -145,6 +145,12 @@
145
145
  --skra-comp-status-dot-size-sm: var(--skra-sys-size-status-dot-sm);
146
146
  --skra-comp-status-dot-size-md: var(--skra-sys-size-status-dot-md);
147
147
  --skra-comp-status-dot-size-lg: var(--skra-sys-size-status-dot-lg);
148
+ --skra-comp-surface-padding-block: var(--skra-sys-spacing-4);
149
+ --skra-comp-surface-padding-inline: var(--skra-sys-spacing-4);
150
+ --skra-comp-surface-padding-block-sm: var(--skra-sys-spacing-2);
151
+ --skra-comp-surface-padding-inline-sm: var(--skra-sys-spacing-2);
152
+ --skra-comp-surface-padding-block-lg: var(--skra-sys-spacing-6);
153
+ --skra-comp-surface-padding-inline-lg: var(--skra-sys-spacing-6);
148
154
  --skra-comp-tabs-padding-block: var(--skra-sys-spacing-2);
149
155
  --skra-comp-tabs-padding-inline: var(--skra-sys-spacing-4);
150
156
  --skra-comp-tabs-gap: var(--skra-sys-spacing-1);
package/skra/_density.compact.scss CHANGED
@@ -145,6 +145,12 @@
145
145
  --skra-comp-status-dot-size-sm: var(--skra-sys-size-status-dot-sm);
146
146
  --skra-comp-status-dot-size-md: var(--skra-sys-size-status-dot-md);
147
147
  --skra-comp-status-dot-size-lg: var(--skra-sys-size-status-dot-lg);
148
+ --skra-comp-surface-padding-block: var(--skra-sys-spacing-4);
149
+ --skra-comp-surface-padding-inline: var(--skra-sys-spacing-4);
150
+ --skra-comp-surface-padding-block-sm: var(--skra-sys-spacing-2);
151
+ --skra-comp-surface-padding-inline-sm: var(--skra-sys-spacing-2);
152
+ --skra-comp-surface-padding-block-lg: var(--skra-sys-spacing-6);
153
+ --skra-comp-surface-padding-inline-lg: var(--skra-sys-spacing-6);
148
154
  --skra-comp-tabs-padding-block: var(--skra-sys-spacing-2);
149
155
  --skra-comp-tabs-padding-inline: var(--skra-sys-spacing-4);
150
156
  --skra-comp-tabs-gap: var(--skra-sys-spacing-1);
package/skra/_theme.dark.scss CHANGED
@@ -442,6 +442,14 @@
442
442
  --skra-comp-status-dot-border-color-active: oklch(25.5% 0 0);
443
443
  --skra-comp-status-dot-focus-ring-color-hover: oklch(68.0% 0.135 250);
444
444
  --skra-comp-status-dot-focus-ring-color-active: oklch(64.5% 0.135 250);
445
+ --skra-comp-surface-background-hover: oklch(26.0% 0 0);
446
+ --skra-comp-surface-background-active: oklch(29.5% 0 0);
447
+ --skra-comp-surface-foreground-hover: oklch(85.0% 0 0);
448
+ --skra-comp-surface-foreground-active: oklch(81.5% 0 0);
449
+ --skra-comp-surface-border-color-hover: oklch(53.0% 0 0);
450
+ --skra-comp-surface-border-color-active: oklch(49.5% 0 0);
451
+ --skra-comp-surface-focus-ring-color-hover: oklch(68.0% 0.135 250);
452
+ --skra-comp-surface-focus-ring-color-active: oklch(64.5% 0.135 250);
445
453
  --skra-comp-tabs-foreground-hover: oklch(58.0% 0 0);
446
454
  --skra-comp-tabs-foreground-active: oklch(54.5% 0 0);
447
455
  --skra-comp-tabs-focus-ring-color-hover: oklch(68.0% 0.135 250);
@@ -660,6 +668,12 @@
660
668
  --skra-comp-status-dot-foreground: var(--skra-sys-color-neutral-contrast);
661
669
  --skra-comp-status-dot-border-color: var(--skra-sys-color-surface);
662
670
  --skra-comp-status-dot-focus-ring-color: var(--skra-sys-color-focus-ring);
671
+ --skra-comp-surface-background: var(--skra-sys-color-surface-raised);
672
+ --skra-comp-surface-foreground: var(--skra-sys-color-on-surface);
673
+ --skra-comp-surface-border-color: var(--skra-sys-color-border-subtle);
674
+ --skra-comp-surface-focus-ring-color: var(--skra-sys-color-focus-ring);
675
+ --skra-comp-surface-background-selected: var(--skra-sys-color-primary-soft);
676
+ --skra-comp-surface-border-color-selected: var(--skra-sys-color-primary-border);
663
677
  --skra-comp-tabs-foreground: var(--skra-sys-color-on-surface-subtle);
664
678
  --skra-comp-tabs-focus-ring-color: var(--skra-sys-color-focus-ring);
665
679
  --skra-comp-tabs-foreground-selected: var(--skra-sys-color-on-surface-strong);