@skra/tokens 0.4.0 → 0.6.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 (19) hide show
  1. package/brutal/_comp.scss +57 -32
  2. package/brutal/_density.comfortable.scoped.scss +3 -1
  3. package/brutal/_density.comfortable.scss +3 -1
  4. package/brutal/_density.compact.scoped.scss +3 -1
  5. package/brutal/_density.compact.scss +3 -1
  6. package/brutal/_theme.dark.scoped.scss +80 -59
  7. package/brutal/_theme.dark.scss +80 -59
  8. package/brutal/_theme.scoped.scss +69 -44
  9. package/brutal/_theme.scss +15 -12
  10. package/brutal/skin.config.json +40 -40
  11. package/manifests/datepicker.json +19 -10
  12. package/manifests/star-rating.json +96 -96
  13. package/package.json +1 -1
  14. package/skra/_comp.scss +57 -32
  15. package/skra/_density.comfortable.scss +3 -1
  16. package/skra/_density.compact.scss +3 -1
  17. package/skra/_theme.dark.scss +77 -56
  18. package/skra/_theme.scss +7 -4
  19. package/skra/skin.config.json +37 -37
package/manifests/star-rating.json CHANGED
@@ -1,96 +1,96 @@
1
- {
2
- "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
3
- "component": "star-rating",
4
- "skraVersion": ">=1.0.0",
5
- "axes": [
6
- {
7
- "token": "--skra-comp-star-rating-star-color-empty",
8
- "label": "Star — unselected (empty) glyph 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-star-rating-star-color-filled",
17
- "label": "Star — selected / hover-preview glyph colour (the rating accent)",
18
- "group": "Surface",
19
- "type": "color",
20
- "states": ["default"],
21
- "constraint": { "oklch": true },
22
- "overridable": ["overlay", "subtree", "instance"]
23
- },
24
- {
25
- "token": "--skra-comp-star-rating-gap",
26
- "label": "Star rating — gap between stars",
27
- "group": "Spacing",
28
- "type": "dimension",
29
- "states": ["default"],
30
- "constraint": { "unit": "rem", "min": 0, "max": 1 },
31
- "overridable": ["overlay", "subtree"]
32
- },
33
- {
34
- "token": "--skra-comp-star-rating-star-size-sm",
35
- "label": "Star glyph size — size=sm",
36
- "group": "Spacing",
37
- "type": "dimension",
38
- "states": ["default"],
39
- "constraint": { "unit": "rem", "min": 0.5, "max": 3 },
40
- "overridable": ["overlay", "subtree"]
41
- },
42
- {
43
- "token": "--skra-comp-star-rating-star-size-md",
44
- "label": "Star glyph size — size=md (default)",
45
- "group": "Spacing",
46
- "type": "dimension",
47
- "states": ["default"],
48
- "constraint": { "unit": "rem", "min": 0.5, "max": 3 },
49
- "overridable": ["overlay", "subtree"]
50
- },
51
- {
52
- "token": "--skra-comp-star-rating-star-size-lg",
53
- "label": "Star glyph size — size=lg",
54
- "group": "Spacing",
55
- "type": "dimension",
56
- "states": ["default"],
57
- "constraint": { "unit": "rem", "min": 0.5, "max": 3 },
58
- "overridable": ["overlay", "subtree"]
59
- },
60
- {
61
- "token": "--skra-comp-star-rating-focus-ring-color",
62
- "label": "Focused star — focus ring colour on :focus-visible",
63
- "group": "State",
64
- "type": "color",
65
- "states": ["focus-visible"],
66
- "constraint": { "oklch": true },
67
- "overridable": ["overlay"]
68
- },
69
- {
70
- "token": "--skra-comp-star-rating-focus-ring-width",
71
- "label": "Focused star — focus ring thickness on :focus-visible",
72
- "group": "State",
73
- "type": "dimension",
74
- "states": ["focus-visible"],
75
- "constraint": { "unit": "rem", "min": 0.0625, "max": 0.25 },
76
- "overridable": ["overlay"]
77
- },
78
- {
79
- "token": "--skra-comp-star-rating-motion-duration",
80
- "label": "Star fill — colour transition duration",
81
- "group": "Motion",
82
- "type": "duration",
83
- "states": ["default"],
84
- "constraint": { "unit": "ms" },
85
- "overridable": ["overlay"]
86
- },
87
- {
88
- "token": "--skra-comp-star-rating-motion-easing",
89
- "label": "Star fill — colour transition easing curve",
90
- "group": "Motion",
91
- "type": "cubic-bezier",
92
- "states": ["default"],
93
- "overridable": ["overlay"]
94
- }
95
- ]
96
- }
1
+ {
2
+ "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
3
+ "component": "star-rating",
4
+ "skraVersion": ">=1.0.0",
5
+ "axes": [
6
+ {
7
+ "token": "--skra-comp-star-rating-star-color-empty",
8
+ "label": "Star — unselected (empty) OUTLINE colour — ≥3:1 vs surface",
9
+ "group": "Surface",
10
+ "type": "color",
11
+ "states": ["default"],
12
+ "constraint": { "oklch": true },
13
+ "overridable": ["overlay", "subtree", "instance"]
14
+ },
15
+ {
16
+ "token": "--skra-comp-star-rating-star-color-filled",
17
+ "label": "Star — selected / hover-preview solid glyph colour (the rating accent) — ≥3:1 vs surface",
18
+ "group": "Surface",
19
+ "type": "color",
20
+ "states": ["default"],
21
+ "constraint": { "oklch": true },
22
+ "overridable": ["overlay", "subtree", "instance"]
23
+ },
24
+ {
25
+ "token": "--skra-comp-star-rating-gap",
26
+ "label": "Star rating — gap between stars",
27
+ "group": "Spacing",
28
+ "type": "dimension",
29
+ "states": ["default"],
30
+ "constraint": { "unit": "rem", "min": 0, "max": 1 },
31
+ "overridable": ["overlay", "subtree"]
32
+ },
33
+ {
34
+ "token": "--skra-comp-star-rating-star-size-sm",
35
+ "label": "Star glyph size — size=sm",
36
+ "group": "Spacing",
37
+ "type": "dimension",
38
+ "states": ["default"],
39
+ "constraint": { "unit": "rem", "min": 0.5, "max": 3 },
40
+ "overridable": ["overlay", "subtree"]
41
+ },
42
+ {
43
+ "token": "--skra-comp-star-rating-star-size-md",
44
+ "label": "Star glyph size — size=md (default)",
45
+ "group": "Spacing",
46
+ "type": "dimension",
47
+ "states": ["default"],
48
+ "constraint": { "unit": "rem", "min": 0.5, "max": 3 },
49
+ "overridable": ["overlay", "subtree"]
50
+ },
51
+ {
52
+ "token": "--skra-comp-star-rating-star-size-lg",
53
+ "label": "Star glyph size — size=lg",
54
+ "group": "Spacing",
55
+ "type": "dimension",
56
+ "states": ["default"],
57
+ "constraint": { "unit": "rem", "min": 0.5, "max": 3 },
58
+ "overridable": ["overlay", "subtree"]
59
+ },
60
+ {
61
+ "token": "--skra-comp-star-rating-focus-ring-color",
62
+ "label": "Focused star — focus ring colour on :focus-visible",
63
+ "group": "State",
64
+ "type": "color",
65
+ "states": ["focus-visible"],
66
+ "constraint": { "oklch": true },
67
+ "overridable": ["overlay"]
68
+ },
69
+ {
70
+ "token": "--skra-comp-star-rating-focus-ring-width",
71
+ "label": "Focused star — focus ring thickness on :focus-visible",
72
+ "group": "State",
73
+ "type": "dimension",
74
+ "states": ["focus-visible"],
75
+ "constraint": { "unit": "rem", "min": 0.0625, "max": 0.25 },
76
+ "overridable": ["overlay"]
77
+ },
78
+ {
79
+ "token": "--skra-comp-star-rating-motion-duration",
80
+ "label": "Star fill — colour transition duration",
81
+ "group": "Motion",
82
+ "type": "duration",
83
+ "states": ["default"],
84
+ "constraint": { "unit": "ms" },
85
+ "overridable": ["overlay"]
86
+ },
87
+ {
88
+ "token": "--skra-comp-star-rating-motion-easing",
89
+ "label": "Star fill — colour transition easing curve",
90
+ "group": "Motion",
91
+ "type": "cubic-bezier",
92
+ "states": ["default"],
93
+ "overridable": ["overlay"]
94
+ }
95
+ ]
96
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skra/tokens",
3
- "version": "0.4.0",
3
+ "version": "0.6.0",
4
4
  "license": "Apache-2.0",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/skra/_comp.scss CHANGED
@@ -33,8 +33,8 @@
33
33
  --skra-comp-accordion-item-background-expanded: transparent;
34
34
  --skra-comp-alert-background-hover: oklch(88.0% 0 0);
35
35
  --skra-comp-alert-background-active: oklch(84.5% 0 0);
36
- --skra-comp-alert-foreground-hover: oklch(42.0% 0 0);
37
- --skra-comp-alert-foreground-active: oklch(45.5% 0 0);
36
+ --skra-comp-alert-foreground-hover: oklch(32.0% 0 0);
37
+ --skra-comp-alert-foreground-active: oklch(35.5% 0 0);
38
38
  --skra-comp-alert-border-color-hover: oklch(47.0% 0 0);
39
39
  --skra-comp-alert-border-color-active: oklch(50.5% 0 0);
40
40
  --skra-comp-alert-focus-ring-color-hover: oklch(53.0% 0.15 250);
@@ -67,8 +67,8 @@
67
67
  --skra-comp-avatar-icon-size: 1em;
68
68
  --skra-comp-badge-background-hover: oklch(88.0% 0 0);
69
69
  --skra-comp-badge-background-active: oklch(84.5% 0 0);
70
- --skra-comp-badge-foreground-hover: oklch(42.0% 0 0);
71
- --skra-comp-badge-foreground-active: oklch(45.5% 0 0);
70
+ --skra-comp-badge-foreground-hover: oklch(32.0% 0 0);
71
+ --skra-comp-badge-foreground-active: oklch(35.5% 0 0);
72
72
  --skra-comp-badge-border-color-hover: oklch(47.0% 0 0);
73
73
  --skra-comp-badge-border-color-active: oklch(50.5% 0 0);
74
74
  --skra-comp-badge-focus-ring-color-hover: oklch(53.0% 0.15 250);
@@ -79,8 +79,8 @@
79
79
  --skra-comp-badge-focus-ring-width: 0.125rem;
80
80
  --skra-comp-badge-typography-role: label-small;
81
81
  --skra-comp-badge-icon-size: 1em;
82
- --skra-comp-button-background-hover: oklch(57.0% 0 0);
83
- --skra-comp-button-background-active: oklch(60.5% 0 0);
82
+ --skra-comp-button-background-hover: oklch(43.0% 0 0);
83
+ --skra-comp-button-background-active: oklch(39.5% 0 0);
84
84
  --skra-comp-button-foreground-hover: oklch(91.0% 0 0);
85
85
  --skra-comp-button-foreground-active: oklch(87.5% 0 0);
86
86
  --skra-comp-button-focus-ring-color-hover: oklch(53.0% 0.15 250);
@@ -99,8 +99,8 @@
99
99
  --skra-comp-button-icon-size: 1em;
100
100
  --skra-comp-chip-background-hover: oklch(88.0% 0 0);
101
101
  --skra-comp-chip-background-active: oklch(84.5% 0 0);
102
- --skra-comp-chip-foreground-hover: oklch(42.0% 0 0);
103
- --skra-comp-chip-foreground-active: oklch(45.5% 0 0);
102
+ --skra-comp-chip-foreground-hover: oklch(32.0% 0 0);
103
+ --skra-comp-chip-foreground-active: oklch(35.5% 0 0);
104
104
  --skra-comp-chip-border-color-hover: oklch(47.0% 0 0);
105
105
  --skra-comp-chip-border-color-active: oklch(50.5% 0 0);
106
106
  --skra-comp-chip-focus-ring-color-hover: oklch(53.0% 0.15 250);
@@ -165,13 +165,13 @@
165
165
  --skra-comp-datepicker-panel-border-color-active: oklch(50.5% 0 0);
166
166
  --skra-comp-datepicker-header-foreground-hover: oklch(7.0% 0 0);
167
167
  --skra-comp-datepicker-header-foreground-active: oklch(10.5% 0 0);
168
- --skra-comp-datepicker-nav-color-active: oklch(45.5% 0 0);
168
+ --skra-comp-datepicker-nav-color-active: oklch(24.5% 0 0);
169
169
  --skra-comp-datepicker-weekday-foreground-hover: oklch(42.0% 0 0);
170
170
  --skra-comp-datepicker-weekday-foreground-active: oklch(45.5% 0 0);
171
- --skra-comp-datepicker-day-foreground-hover: oklch(7.0% 0 0);
172
- --skra-comp-datepicker-day-foreground-active: oklch(10.5% 0 0);
173
- --skra-comp-datepicker-day-today-indicator-color-hover: oklch(45.0% 0.15 250);
174
- --skra-comp-datepicker-day-today-indicator-color-active: oklch(41.5% 0.15 250);
171
+ --skra-comp-datepicker-cell-foreground-hover: oklch(7.0% 0 0);
172
+ --skra-comp-datepicker-cell-foreground-active: oklch(10.5% 0 0);
173
+ --skra-comp-datepicker-cell-today-indicator-color-hover: oklch(45.0% 0.15 250);
174
+ --skra-comp-datepicker-cell-today-indicator-color-active: oklch(41.5% 0.15 250);
175
175
  --skra-comp-datepicker-border-width: 0.0625rem;
176
176
  --skra-comp-datepicker-border-style: solid;
177
177
  --skra-comp-datepicker-shadow: none;
@@ -181,7 +181,8 @@
181
181
  --skra-comp-datepicker-header-typography-role: body-medium;
182
182
  --skra-comp-datepicker-nav-icon-size: 1.25em;
183
183
  --skra-comp-datepicker-weekday-typography-role: body-small;
184
- --skra-comp-datepicker-day-typography-role: body-medium;
184
+ --skra-comp-datepicker-cell-typography-role: body-medium;
185
+ --skra-comp-datepicker-month-cell-min-inline-size: 5.5rem;
185
186
  --skra-comp-dialog-background-hover: oklch(93.0% 0 0);
186
187
  --skra-comp-dialog-background-active: oklch(89.5% 0 0);
187
188
  --skra-comp-dialog-foreground-hover: oklch(7.0% 0 0);
@@ -225,6 +226,8 @@
225
226
  --skra-comp-field-checkbox-checked-background-readonly-active: oklch(60.5% 0 0);
226
227
  --skra-comp-field-checkbox-check-color-hover: oklch(93.0% 0 0);
227
228
  --skra-comp-field-checkbox-check-color-active: oklch(89.5% 0 0);
229
+ --skra-comp-field-checkbox-check-color-readonly-hover: oklch(91.0% 0 0);
230
+ --skra-comp-field-checkbox-check-color-readonly-active: oklch(87.5% 0 0);
228
231
  --skra-comp-field-checkbox-border-width: 0.0625rem;
229
232
  --skra-comp-field-radio-border-color-hover: oklch(47.0% 0 0);
230
233
  --skra-comp-field-radio-border-color-active: oklch(50.5% 0 0);
@@ -236,17 +239,25 @@
236
239
  --skra-comp-field-radio-checked-background-readonly-active: oklch(60.5% 0 0);
237
240
  --skra-comp-field-radio-dot-color-hover: oklch(93.0% 0 0);
238
241
  --skra-comp-field-radio-dot-color-active: oklch(89.5% 0 0);
242
+ --skra-comp-field-radio-dot-color-readonly-hover: oklch(91.0% 0 0);
243
+ --skra-comp-field-radio-dot-color-readonly-active: oklch(87.5% 0 0);
239
244
  --skra-comp-field-radio-border-width: 0.0625rem;
240
245
  --skra-comp-field-switch-border-color-hover: oklch(47.0% 0 0);
241
246
  --skra-comp-field-switch-border-color-active: oklch(50.5% 0 0);
242
247
  --skra-comp-field-switch-background-hover: oklch(47.0% 0 0);
243
248
  --skra-comp-field-switch-background-active: oklch(50.5% 0 0);
249
+ --skra-comp-field-switch-background-readonly-hover: oklch(57.0% 0 0);
250
+ --skra-comp-field-switch-background-readonly-active: oklch(60.5% 0 0);
244
251
  --skra-comp-field-switch-checked-background-hover: oklch(45.0% 0.15 250);
245
252
  --skra-comp-field-switch-checked-background-active: oklch(41.5% 0.15 250);
246
253
  --skra-comp-field-switch-checked-background-readonly-hover: oklch(57.0% 0 0);
247
254
  --skra-comp-field-switch-checked-background-readonly-active: oklch(60.5% 0 0);
248
255
  --skra-comp-field-switch-thumb-color-hover: oklch(93.0% 0 0);
249
256
  --skra-comp-field-switch-thumb-color-active: oklch(89.5% 0 0);
257
+ --skra-comp-field-switch-thumb-color-readonly-hover: oklch(91.0% 0 0);
258
+ --skra-comp-field-switch-thumb-color-readonly-active: oklch(87.5% 0 0);
259
+ --skra-comp-field-switch-thumb-color-checked-readonly-hover: oklch(91.0% 0 0);
260
+ --skra-comp-field-switch-thumb-color-checked-readonly-active: oklch(87.5% 0 0);
250
261
  --skra-comp-field-switch-track-inline-size: 2.25rem;
251
262
  --skra-comp-field-switch-track-block-size: 1.25rem;
252
263
  --skra-comp-field-switch-border-width: 0.0625rem;
@@ -261,6 +272,8 @@
261
272
  --skra-comp-field-select-optgroup-foreground-hover: oklch(7.0% 0 0);
262
273
  --skra-comp-field-select-optgroup-foreground-active: oklch(10.5% 0 0);
263
274
  --skra-comp-field-select-arrow-icon-size: 1em;
275
+ --skra-comp-field-temporal-indicator-color-hover: oklch(7.0% 0 0);
276
+ --skra-comp-field-temporal-indicator-color-active: oklch(10.5% 0 0);
264
277
  --skra-comp-field-border-width: 0.0625rem;
265
278
  --skra-comp-field-border-style: solid;
266
279
  --skra-comp-field-shadow: none;
@@ -379,8 +392,8 @@
379
392
  --skra-comp-skeleton-padding-inline: 0rem;
380
393
  --skra-comp-skeleton-shadow: none;
381
394
  --skra-comp-skeleton-focus-ring-width: 0.125rem;
382
- --skra-comp-star-rating-star-color-empty-hover: oklch(7.0% 0 0);
383
- --skra-comp-star-rating-star-color-empty-active: oklch(10.5% 0 0);
395
+ --skra-comp-star-rating-star-color-empty-hover: oklch(47.0% 0 0);
396
+ --skra-comp-star-rating-star-color-empty-active: oklch(50.5% 0 0);
384
397
  --skra-comp-star-rating-star-color-filled-hover: oklch(45.0% 0.15 250);
385
398
  --skra-comp-star-rating-star-color-filled-active: oklch(41.5% 0.15 250);
386
399
  --skra-comp-star-rating-focus-ring-color-hover: oklch(53.0% 0.15 250);
@@ -435,8 +448,8 @@
435
448
  --skra-comp-tabs-tablist-border-width: 0.0625rem;
436
449
  --skra-comp-toast-background-hover: oklch(88.0% 0 0);
437
450
  --skra-comp-toast-background-active: oklch(84.5% 0 0);
438
- --skra-comp-toast-foreground-hover: oklch(42.0% 0 0);
439
- --skra-comp-toast-foreground-active: oklch(45.5% 0 0);
451
+ --skra-comp-toast-foreground-hover: oklch(32.0% 0 0);
452
+ --skra-comp-toast-foreground-active: oklch(35.5% 0 0);
440
453
  --skra-comp-toast-border-color-hover: oklch(47.0% 0 0);
441
454
  --skra-comp-toast-border-color-active: oklch(50.5% 0 0);
442
455
  --skra-comp-toast-focus-ring-color-hover: oklch(53.0% 0.15 250);
@@ -506,8 +519,10 @@
506
519
  --skra-comp-combobox-panel-shadow: var(--skra-sys-shadow-lg);
507
520
  --skra-comp-datepicker-min-block-size: var(--skra-sys-size-interactive-md);
508
521
  --skra-comp-datepicker-panel-shadow: var(--skra-sys-shadow-lg);
509
- --skra-comp-datepicker-day-size: var(--skra-sys-size-interactive-md);
522
+ --skra-comp-datepicker-cell-block-size: var(--skra-sys-size-interactive-md);
510
523
  --skra-comp-dialog-shadow: var(--skra-sys-shadow-xl);
524
+ --skra-comp-field-temporal-min-block-size: var(--skra-sys-size-interactive-md);
525
+ --skra-comp-field-temporal-indicator-icon-size: var(--skra-sys-icon-size-sm);
511
526
  --skra-comp-menu-shadow: var(--skra-sys-shadow-lg);
512
527
  --skra-comp-menu-item-min-block-size: var(--skra-sys-size-interactive-md);
513
528
  --skra-comp-popover-shadow: var(--skra-sys-shadow-lg);
@@ -551,7 +566,7 @@
551
566
  --skra-comp-accordion-panel-padding-block: var(--skra-sys-spacing-3);
552
567
  --skra-comp-accordion-panel-padding-inline: var(--skra-sys-spacing-4);
553
568
  --skra-comp-alert-background: var(--skra-sys-color-neutral-soft);
554
- --skra-comp-alert-foreground: var(--skra-sys-color-neutral-ink);
569
+ --skra-comp-alert-foreground: var(--skra-sys-color-neutral-strong);
555
570
  --skra-comp-alert-border-color: var(--skra-sys-color-neutral-border);
556
571
  --skra-comp-alert-radius: var(--skra-sys-radius-md);
557
572
  --skra-comp-alert-padding-block: var(--skra-sys-spacing-3);
@@ -572,7 +587,7 @@
572
587
  --skra-comp-avatar-size-md: var(--skra-sys-size-avatar-md);
573
588
  --skra-comp-avatar-size-lg: var(--skra-sys-size-avatar-lg);
574
589
  --skra-comp-badge-background: var(--skra-sys-color-neutral-soft);
575
- --skra-comp-badge-foreground: var(--skra-sys-color-neutral-ink);
590
+ --skra-comp-badge-foreground: var(--skra-sys-color-neutral-strong);
576
591
  --skra-comp-badge-border-color: var(--skra-sys-color-neutral-border);
577
592
  --skra-comp-badge-radius: var(--skra-sys-radius-full);
578
593
  --skra-comp-badge-padding-block: var(--skra-sys-spacing-1);
@@ -600,7 +615,7 @@
600
615
  --skra-comp-button-icon-gap: var(--skra-sys-spacing-2);
601
616
  --skra-comp-button-loading-indicator-color: var(--skra-sys-color-on-surface);
602
617
  --skra-comp-chip-background: var(--skra-sys-color-neutral-soft);
603
- --skra-comp-chip-foreground: var(--skra-sys-color-neutral-ink);
618
+ --skra-comp-chip-foreground: var(--skra-sys-color-neutral-strong);
604
619
  --skra-comp-chip-border-color: var(--skra-sys-color-neutral-border);
605
620
  --skra-comp-chip-radius: var(--skra-sys-radius-full);
606
621
  --skra-comp-chip-padding-block: var(--skra-sys-spacing-1);
@@ -664,13 +679,13 @@
664
679
  --skra-comp-datepicker-nav-color: var(--skra-sys-color-on-surface-subtle);
665
680
  --skra-comp-datepicker-nav-color-hover: var(--skra-sys-color-on-surface);
666
681
  --skra-comp-datepicker-weekday-foreground: var(--skra-sys-color-on-surface-subtle);
667
- --skra-comp-datepicker-day-foreground: var(--skra-sys-color-on-surface);
668
- --skra-comp-datepicker-day-background-hover: var(--skra-sys-color-surface-hover);
669
- --skra-comp-datepicker-day-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
670
- --skra-comp-datepicker-day-background-selected: var(--skra-sys-color-primary-base);
671
- --skra-comp-datepicker-day-foreground-selected: var(--skra-sys-color-primary-contrast);
672
- --skra-comp-datepicker-day-today-indicator-color: var(--skra-sys-color-primary-ink);
673
- --skra-comp-datepicker-day-radius: var(--skra-sys-radius-sm);
682
+ --skra-comp-datepicker-cell-foreground: var(--skra-sys-color-on-surface);
683
+ --skra-comp-datepicker-cell-background-hover: var(--skra-sys-color-surface-hover);
684
+ --skra-comp-datepicker-cell-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
685
+ --skra-comp-datepicker-cell-background-selected: var(--skra-sys-color-primary-base);
686
+ --skra-comp-datepicker-cell-foreground-selected: var(--skra-sys-color-primary-contrast);
687
+ --skra-comp-datepicker-cell-today-indicator-color: var(--skra-sys-color-primary-ink);
688
+ --skra-comp-datepicker-cell-radius: var(--skra-sys-radius-sm);
674
689
  --skra-comp-dialog-background: var(--skra-sys-color-surface);
675
690
  --skra-comp-dialog-foreground: var(--skra-sys-color-on-surface);
676
691
  --skra-comp-dialog-radius: var(--skra-sys-radius-lg);
@@ -690,6 +705,7 @@
690
705
  --skra-comp-field-checkbox-checked-background: var(--skra-sys-color-primary-base);
691
706
  --skra-comp-field-checkbox-checked-background-readonly: var(--skra-sys-color-neutral-base);
692
707
  --skra-comp-field-checkbox-check-color: var(--skra-sys-color-primary-contrast);
708
+ --skra-comp-field-checkbox-check-color-readonly: var(--skra-sys-color-neutral-contrast);
693
709
  --skra-comp-field-checkbox-gap: var(--skra-sys-spacing-2);
694
710
  --skra-comp-field-checkbox-touch-target: var(--skra-sys-spacing-6);
695
711
  --skra-comp-field-radio-size: var(--skra-sys-spacing-4);
@@ -698,16 +714,20 @@
698
714
  --skra-comp-field-radio-checked-background: var(--skra-sys-color-primary-base);
699
715
  --skra-comp-field-radio-checked-background-readonly: var(--skra-sys-color-neutral-base);
700
716
  --skra-comp-field-radio-dot-color: var(--skra-sys-color-primary-contrast);
717
+ --skra-comp-field-radio-dot-color-readonly: var(--skra-sys-color-neutral-contrast);
701
718
  --skra-comp-field-radio-dot-size: var(--skra-sys-spacing-2);
702
719
  --skra-comp-field-radio-gap: var(--skra-sys-spacing-2);
703
720
  --skra-comp-field-radio-touch-target: var(--skra-sys-spacing-6);
704
721
  --skra-comp-field-switch-border-color: var(--skra-sys-color-border-subtle);
705
722
  --skra-comp-field-switch-track-radius: var(--skra-sys-radius-full);
706
723
  --skra-comp-field-switch-background: var(--skra-sys-color-border-subtle);
724
+ --skra-comp-field-switch-background-readonly: var(--skra-sys-color-neutral-base);
707
725
  --skra-comp-field-switch-checked-background: var(--skra-sys-color-primary-base);
708
726
  --skra-comp-field-switch-checked-background-readonly: var(--skra-sys-color-neutral-base);
709
727
  --skra-comp-field-switch-thumb-color: var(--skra-sys-color-surface);
728
+ --skra-comp-field-switch-thumb-color-readonly: var(--skra-sys-color-neutral-contrast);
710
729
  --skra-comp-field-switch-thumb-color-checked: var(--skra-sys-color-primary-contrast);
730
+ --skra-comp-field-switch-thumb-color-checked-readonly: var(--skra-sys-color-neutral-contrast);
711
731
  --skra-comp-field-switch-gap: var(--skra-sys-spacing-2);
712
732
  --skra-comp-field-switch-touch-target: var(--skra-sys-spacing-6);
713
733
  --skra-comp-field-group-gap: var(--skra-sys-spacing-3);
@@ -717,6 +737,8 @@
717
737
  --skra-comp-field-select-option-foreground: var(--skra-sys-color-on-surface);
718
738
  --skra-comp-field-select-option-background: var(--skra-sys-color-surface);
719
739
  --skra-comp-field-select-optgroup-foreground: var(--skra-sys-color-on-surface);
740
+ --skra-comp-field-temporal-indicator-padding-inline-end: var(--skra-sys-spacing-6);
741
+ --skra-comp-field-temporal-indicator-color: var(--skra-sys-color-on-surface);
720
742
  --skra-comp-field-background: var(--skra-sys-color-surface);
721
743
  --skra-comp-field-foreground: var(--skra-sys-color-on-surface);
722
744
  --skra-comp-field-border-color: var(--skra-sys-color-border);
@@ -834,8 +856,8 @@
834
856
  --skra-comp-skeleton-motion-duration: var(--skra-sys-motion-duration-fast);
835
857
  --skra-comp-skeleton-motion-easing: var(--skra-sys-motion-easing-standard);
836
858
  --skra-comp-skeleton-focus-ring-color: var(--skra-sys-color-focus-ring);
837
- --skra-comp-star-rating-star-color-empty: var(--skra-sys-color-border);
838
- --skra-comp-star-rating-star-color-filled: var(--skra-sys-color-primary-base);
859
+ --skra-comp-star-rating-star-color-empty: var(--skra-sys-color-border-subtle);
860
+ --skra-comp-star-rating-star-color-filled: var(--skra-sys-color-primary-ink);
839
861
  --skra-comp-star-rating-focus-ring-color: var(--skra-sys-color-focus-ring);
840
862
  --skra-comp-star-rating-motion-duration: var(--skra-sys-motion-duration-fast);
841
863
  --skra-comp-star-rating-motion-easing: var(--skra-sys-motion-easing-standard);
@@ -880,7 +902,7 @@
880
902
  --skra-comp-tabs-panel-padding-block: var(--skra-sys-spacing-4);
881
903
  --skra-comp-tabs-panel-padding-inline: var(--skra-sys-spacing-1);
882
904
  --skra-comp-toast-background: var(--skra-sys-color-neutral-soft);
883
- --skra-comp-toast-foreground: var(--skra-sys-color-neutral-ink);
905
+ --skra-comp-toast-foreground: var(--skra-sys-color-neutral-strong);
884
906
  --skra-comp-toast-border-color: var(--skra-sys-color-neutral-border);
885
907
  --skra-comp-toast-radius: var(--skra-sys-radius-md);
886
908
  --skra-comp-toast-padding-block: var(--skra-sys-spacing-3);
@@ -1005,5 +1027,8 @@
1005
1027
  /* O-24 — build-baked form-control glyphs (token-resolved colour per scheme) — form-glyph-synth.mjs */
1006
1028
  :where(:root, :host) {
1007
1029
  --skra-comp-field-checkbox-check-glyph: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='oklch%28100%25%200%200%29' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12 10 17 19 7'/%3E%3C/svg%3E");
1030
+ --skra-comp-field-checkbox-check-glyph-readonly: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='oklch%2898%25%200%200%29' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12 10 17 19 7'/%3E%3C/svg%3E");
1008
1031
  --skra-comp-field-select-chevron-glyph: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='oklch%280%25%200%200%29' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
1032
+ --skra-comp-field-calendar-indicator-glyph: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='oklch%280%25%200%200%29' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3C/svg%3E");
1033
+ --skra-comp-field-clock-indicator-glyph: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='oklch%280%25%200%200%29' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 16 14'/%3E%3C/svg%3E");
1009
1034
  }
package/skra/_density.comfortable.scss CHANGED
@@ -79,7 +79,7 @@
79
79
  --skra-comp-datepicker-panel-padding: var(--skra-sys-spacing-3);
80
80
  --skra-comp-datepicker-panel-offset: var(--skra-sys-spacing-1);
81
81
  --skra-comp-datepicker-panel-viewport-padding: var(--skra-sys-spacing-2);
82
- --skra-comp-datepicker-day-size: var(--skra-sys-size-interactive-md);
82
+ --skra-comp-datepicker-cell-block-size: var(--skra-sys-size-interactive-md);
83
83
  --skra-comp-dialog-padding-block: var(--skra-sys-spacing-5);
84
84
  --skra-comp-dialog-padding-inline: var(--skra-sys-spacing-5);
85
85
  --skra-comp-dialog-size-sm-max-inline-size: var(--skra-sys-size-container-sm);
@@ -100,6 +100,8 @@
100
100
  --skra-comp-field-group-gap: var(--skra-sys-spacing-3);
101
101
  --skra-comp-field-group-legend-spacing-block-end: var(--skra-sys-spacing-2);
102
102
  --skra-comp-field-select-arrow-padding-inline-end: var(--skra-sys-spacing-6);
103
+ --skra-comp-field-temporal-min-block-size: var(--skra-sys-size-interactive-md);
104
+ --skra-comp-field-temporal-indicator-padding-inline-end: var(--skra-sys-spacing-6);
103
105
  --skra-comp-grid-gap-sm: var(--skra-sys-spacing-1);
104
106
  --skra-comp-grid-gap-md: var(--skra-sys-spacing-2);
105
107
  --skra-comp-grid-gap-lg: var(--skra-sys-spacing-4);
package/skra/_density.compact.scss CHANGED
@@ -79,7 +79,7 @@
79
79
  --skra-comp-datepicker-panel-padding: var(--skra-sys-spacing-3);
80
80
  --skra-comp-datepicker-panel-offset: var(--skra-sys-spacing-1);
81
81
  --skra-comp-datepicker-panel-viewport-padding: var(--skra-sys-spacing-2);
82
- --skra-comp-datepicker-day-size: var(--skra-sys-size-interactive-md);
82
+ --skra-comp-datepicker-cell-block-size: var(--skra-sys-size-interactive-md);
83
83
  --skra-comp-dialog-padding-block: var(--skra-sys-spacing-5);
84
84
  --skra-comp-dialog-padding-inline: var(--skra-sys-spacing-5);
85
85
  --skra-comp-dialog-size-sm-max-inline-size: var(--skra-sys-size-container-sm);
@@ -100,6 +100,8 @@
100
100
  --skra-comp-field-group-gap: var(--skra-sys-spacing-3);
101
101
  --skra-comp-field-group-legend-spacing-block-end: var(--skra-sys-spacing-2);
102
102
  --skra-comp-field-select-arrow-padding-inline-end: var(--skra-sys-spacing-6);
103
+ --skra-comp-field-temporal-min-block-size: var(--skra-sys-size-interactive-md);
104
+ --skra-comp-field-temporal-indicator-padding-inline-end: var(--skra-sys-spacing-6);
103
105
  --skra-comp-grid-gap-sm: var(--skra-sys-spacing-1);
104
106
  --skra-comp-grid-gap-md: var(--skra-sys-spacing-2);
105
107
  --skra-comp-grid-gap-lg: var(--skra-sys-spacing-4);