@skra/tokens 0.6.0 → 0.8.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/README.md +7 -0
  2. package/brutal/_comp.scss +76 -2
  3. package/brutal/_density.comfortable.scoped.scss +11 -0
  4. package/brutal/_density.comfortable.scss +11 -0
  5. package/brutal/_density.compact.scoped.scss +11 -0
  6. package/brutal/_density.compact.scss +11 -0
  7. package/brutal/_theme.dark.scoped.scss +49 -4
  8. package/brutal/_theme.dark.scss +49 -4
  9. package/brutal/_theme.scoped.scss +76 -2
  10. package/manifests/alert.json +117 -107
  11. package/manifests/button.json +134 -133
  12. package/manifests/chip.json +117 -116
  13. package/manifests/file-item.json +6 -0
  14. package/manifests/toast.json +134 -133
  15. package/package.json +1 -1
  16. package/skra/_comp.scss +74 -2
  17. package/skra/_density.comfortable.scss +11 -0
  18. package/skra/_density.compact.scss +11 -0
  19. package/skra/_theme.dark.scss +44 -2
package/README.md CHANGED
@@ -92,6 +92,13 @@ component: which `--skra-comp-*` tokens are public override targets, their types
92
92
  and permitted tiers. Tokens absent from a manifest are private regardless of technical
93
93
  overridability.
94
94
 
95
+ A token whose manifest entry carries `scopedBy` (e.g. `["intent", "emphasis"]`) is re-bound by the
96
+ component for each variant, so overriding its **canonical** name from an ancestor is a silent no-op.
97
+ Target the per-variant hook instead: `--skra-comp-<component>-<axis>-<intent>-<emphasis>`
98
+ (e.g. `--skra-comp-alert-focus-ring-color-danger-high`). Became variant-scoped in 0.7:
99
+ `--skra-comp-button-loading-indicator-color` and the `focus-ring-color` of `alert`, `toast` and
100
+ `chip`.
101
+
95
102
  ## Private skins
96
103
 
97
104
  Only skins marked `"publishable": true` in their `skin.config.json` are included in this
package/brutal/_comp.scss CHANGED
@@ -191,8 +191,8 @@
191
191
  --skra-comp-dialog-border-style: solid;
192
192
  --skra-comp-dialog-focus-ring-width: 0.1875rem;
193
193
  --skra-comp-dialog-typography-role: body-medium;
194
- --skra-comp-field-background-hover: oklch(85.0% 0.015 95);
195
- --skra-comp-field-background-active: oklch(79.0% 0.015 95);
194
+ --skra-comp-field-background-hover: oklch(98.0% 0.015 95);
195
+ --skra-comp-field-background-active: oklch(98.0% 0.015 95);
196
196
  --skra-comp-field-foreground-hover: oklch(12.0% 0 0);
197
197
  --skra-comp-field-foreground-active: oklch(18.0% 0 0);
198
198
  --skra-comp-field-border-color-hover: oklch(12.0% 0 0);
@@ -271,10 +271,54 @@
271
271
  --skra-comp-field-select-arrow-icon-size: 1em;
272
272
  --skra-comp-field-temporal-indicator-color-hover: oklch(12.0% 0 0);
273
273
  --skra-comp-field-temporal-indicator-color-active: oklch(18.0% 0 0);
274
+ --skra-comp-field-file-action-background-hover: oklch(83.0% 0 0);
275
+ --skra-comp-field-file-action-background-active: oklch(77.0% 0 0);
276
+ --skra-comp-field-file-action-foreground-hover: oklch(12.0% 0 0);
277
+ --skra-comp-field-file-action-foreground-active: oklch(18.0% 0 0);
278
+ --skra-comp-field-file-action-border-color-hover: oklch(12.0% 0 0);
279
+ --skra-comp-field-file-action-border-color-active: oklch(18.0% 0 0);
280
+ --skra-comp-field-file-status-color-hover: oklch(12.0% 0 0);
281
+ --skra-comp-field-file-status-color-active: oklch(18.0% 0 0);
282
+ --skra-comp-field-file-instruction-color-hover: oklch(47.0% 0 0);
283
+ --skra-comp-field-file-instruction-color-active: oklch(53.0% 0 0);
284
+ --skra-comp-field-file-background-dragover-hover: oklch(98.0% 0.06 100);
285
+ --skra-comp-field-file-background-dragover-active: oklch(98.0% 0.06 100);
286
+ --skra-comp-field-file-foreground-dragover-hover: oklch(62.0% 0.11 98);
287
+ --skra-comp-field-file-foreground-dragover-active: oklch(68.0% 0.11 98);
288
+ --skra-comp-field-file-border-color-dragover-hover: oklch(12.0% 0 0);
289
+ --skra-comp-field-file-border-color-dragover-active: oklch(18.0% 0 0);
290
+ --skra-comp-field-file-action-border-width: 0.125rem;
291
+ --skra-comp-field-file-action-border-style: solid;
292
+ --skra-comp-field-file-action-typography-role: label-medium;
293
+ --skra-comp-field-file-status-typography-role: body-medium;
294
+ --skra-comp-field-file-instruction-typography-role: body-small;
295
+ --skra-comp-field-file-icon-size: 1.25em;
296
+ --skra-comp-field-file-zone-border-style: dashed;
274
297
  --skra-comp-field-border-width: 0.125rem;
275
298
  --skra-comp-field-border-style: solid;
276
299
  --skra-comp-field-shadow: none;
277
300
  --skra-comp-field-focus-ring-width: 0.1875rem;
301
+ --skra-comp-file-item-background-hover: oklch(98.0% 0.015 95);
302
+ --skra-comp-file-item-background-active: oklch(98.0% 0.015 95);
303
+ --skra-comp-file-item-foreground-hover: oklch(12.0% 0 0);
304
+ --skra-comp-file-item-foreground-active: oklch(18.0% 0 0);
305
+ --skra-comp-file-item-border-color-hover: oklch(12.0% 0 0);
306
+ --skra-comp-file-item-border-color-active: oklch(18.0% 0 0);
307
+ --skra-comp-file-item-focus-ring-color-hover: oklch(57.0% 0.18 295);
308
+ --skra-comp-file-item-focus-ring-color-active: oklch(63.0% 0.18 295);
309
+ --skra-comp-file-item-meta-color-hover: oklch(47.0% 0 0);
310
+ --skra-comp-file-item-meta-color-active: oklch(53.0% 0 0);
311
+ --skra-comp-file-item-error-color-hover: oklch(60.0% 0.2 25);
312
+ --skra-comp-file-item-error-color-active: oklch(66.0% 0.2 25);
313
+ --skra-comp-file-item-border-color-validation-invalid-hover: oklch(60.0% 0.2 25);
314
+ --skra-comp-file-item-border-color-validation-invalid-active: oklch(66.0% 0.2 25);
315
+ --skra-comp-file-item-border-width: 0.125rem;
316
+ --skra-comp-file-item-border-style: solid;
317
+ --skra-comp-file-item-shadow: none;
318
+ --skra-comp-file-item-focus-ring-width: 0.1875rem;
319
+ --skra-comp-file-item-icon-size: 1.5em;
320
+ --skra-comp-file-item-name-typography-role: body-medium;
321
+ --skra-comp-file-item-meta-typography-role: body-small;
278
322
  --skra-comp-kbd-background-hover: oklch(81.0% 0.025 95);
279
323
  --skra-comp-kbd-background-active: oklch(75.0% 0.025 95);
280
324
  --skra-comp-kbd-foreground-hover: oklch(12.0% 0 0);
@@ -535,7 +579,10 @@
535
579
  --skra-comp-field-switch-track-radius: var(--skra-sys-radius-sm);
536
580
  --skra-comp-field-temporal-min-block-size: var(--skra-sys-size-interactive-md);
537
581
  --skra-comp-field-temporal-indicator-icon-size: var(--skra-sys-icon-size-sm);
582
+ --skra-comp-field-file-action-radius: var(--skra-sys-radius-sm);
583
+ --skra-comp-field-file-min-block-size: var(--skra-sys-size-interactive-md);
538
584
  --skra-comp-field-radius: var(--skra-sys-radius-sm);
585
+ --skra-comp-file-item-radius: var(--skra-sys-radius-sm);
539
586
  --skra-comp-kbd-radius: var(--skra-sys-radius-none);
540
587
  --skra-comp-kbd-shadow: var(--skra-sys-shadow-sm);
541
588
  --skra-comp-menu-radius: var(--skra-sys-radius-md);
@@ -603,6 +650,7 @@
603
650
  --skra-comp-alert-focus-ring-color: var(--skra-sys-color-focus-ring);
604
651
  --skra-comp-alert-icon-gap: var(--skra-sys-spacing-3);
605
652
  --skra-comp-alert-title-gap: var(--skra-sys-spacing-1);
653
+ --skra-comp-alert-actions-gap: var(--skra-sys-spacing-2);
606
654
  --skra-comp-avatar-background: var(--skra-sys-color-neutral-soft);
607
655
  --skra-comp-avatar-foreground: var(--skra-sys-color-neutral-strong);
608
656
  --skra-comp-avatar-border-color: var(--skra-sys-color-neutral-border);
@@ -757,6 +805,20 @@
757
805
  --skra-comp-field-select-optgroup-foreground: var(--skra-sys-color-on-surface);
758
806
  --skra-comp-field-temporal-indicator-padding-inline-end: var(--skra-sys-spacing-6);
759
807
  --skra-comp-field-temporal-indicator-color: var(--skra-sys-color-on-surface);
808
+ --skra-comp-field-file-action-background: var(--skra-sys-color-neutral-soft);
809
+ --skra-comp-field-file-action-foreground: var(--skra-sys-color-neutral-strong);
810
+ --skra-comp-field-file-action-border-color: var(--skra-sys-color-border);
811
+ --skra-comp-field-file-action-padding-block: var(--skra-sys-spacing-1);
812
+ --skra-comp-field-file-action-padding-inline: var(--skra-sys-spacing-3);
813
+ --skra-comp-field-file-status-color: var(--skra-sys-color-on-surface);
814
+ --skra-comp-field-file-instruction-color: var(--skra-sys-color-hint);
815
+ --skra-comp-field-file-gap: var(--skra-sys-spacing-3);
816
+ --skra-comp-field-file-background-dragover: var(--skra-sys-color-primary-soft);
817
+ --skra-comp-field-file-foreground-dragover: var(--skra-sys-color-primary-strong);
818
+ --skra-comp-field-file-border-color-dragover: var(--skra-sys-color-primary-border);
819
+ --skra-comp-field-file-zone-padding-block: var(--skra-sys-spacing-6);
820
+ --skra-comp-field-file-zone-padding-inline: var(--skra-sys-spacing-6);
821
+ --skra-comp-field-file-zone-gap: var(--skra-sys-spacing-2);
760
822
  --skra-comp-field-background: var(--skra-sys-color-surface);
761
823
  --skra-comp-field-foreground: var(--skra-sys-color-on-surface);
762
824
  --skra-comp-field-border-color: var(--skra-sys-color-border);
@@ -773,6 +835,18 @@
773
835
  --skra-comp-field-background-readonly: var(--skra-sys-color-surface-raised);
774
836
  --skra-comp-field-border-color-readonly: var(--skra-sys-color-border-subtle);
775
837
  --skra-comp-field-required-color: var(--skra-sys-color-danger-ink);
838
+ --skra-comp-file-item-background: var(--skra-sys-color-surface);
839
+ --skra-comp-file-item-foreground: var(--skra-sys-color-on-surface);
840
+ --skra-comp-file-item-border-color: var(--skra-sys-color-border);
841
+ --skra-comp-file-item-padding-block: var(--skra-sys-spacing-2);
842
+ --skra-comp-file-item-padding-inline: var(--skra-sys-spacing-3);
843
+ --skra-comp-file-item-motion-duration: var(--skra-sys-motion-duration-fast);
844
+ --skra-comp-file-item-motion-easing: var(--skra-sys-motion-easing-standard);
845
+ --skra-comp-file-item-focus-ring-color: var(--skra-sys-color-focus-ring);
846
+ --skra-comp-file-item-gap: var(--skra-sys-spacing-3);
847
+ --skra-comp-file-item-meta-color: var(--skra-sys-color-hint);
848
+ --skra-comp-file-item-error-color: var(--skra-sys-color-danger-ink);
849
+ --skra-comp-file-item-border-color-validation-invalid: var(--skra-sys-color-danger-ink);
776
850
  --skra-comp-kbd-background: var(--skra-sys-color-surface-raised);
777
851
  --skra-comp-kbd-foreground: var(--skra-sys-color-on-surface);
778
852
  --skra-comp-kbd-border-color: var(--skra-sys-color-border);
package/brutal/_density.comfortable.scoped.scss CHANGED
@@ -34,6 +34,7 @@
34
34
  --skra-comp-alert-padding-inline: var(--skra-sys-spacing-4);
35
35
  --skra-comp-alert-icon-gap: var(--skra-sys-spacing-3);
36
36
  --skra-comp-alert-title-gap: var(--skra-sys-spacing-1);
37
+ --skra-comp-alert-actions-gap: var(--skra-sys-spacing-2);
37
38
  --skra-comp-alert-dismiss-size: var(--skra-sys-size-interactive-sm);
38
39
  --skra-comp-avatar-size-sm: var(--skra-sys-size-avatar-sm);
39
40
  --skra-comp-avatar-size-md: var(--skra-sys-size-avatar-md);
@@ -102,6 +103,16 @@
102
103
  --skra-comp-field-select-arrow-padding-inline-end: var(--skra-sys-spacing-6);
103
104
  --skra-comp-field-temporal-min-block-size: var(--skra-sys-size-interactive-md);
104
105
  --skra-comp-field-temporal-indicator-padding-inline-end: var(--skra-sys-spacing-6);
106
+ --skra-comp-field-file-action-padding-block: var(--skra-sys-spacing-1);
107
+ --skra-comp-field-file-action-padding-inline: var(--skra-sys-spacing-3);
108
+ --skra-comp-field-file-gap: var(--skra-sys-spacing-3);
109
+ --skra-comp-field-file-min-block-size: var(--skra-sys-size-interactive-md);
110
+ --skra-comp-field-file-zone-padding-block: var(--skra-sys-spacing-6);
111
+ --skra-comp-field-file-zone-padding-inline: var(--skra-sys-spacing-6);
112
+ --skra-comp-field-file-zone-gap: var(--skra-sys-spacing-2);
113
+ --skra-comp-file-item-padding-block: var(--skra-sys-spacing-2);
114
+ --skra-comp-file-item-padding-inline: var(--skra-sys-spacing-3);
115
+ --skra-comp-file-item-gap: var(--skra-sys-spacing-3);
105
116
  --skra-comp-grid-gap-sm: var(--skra-sys-spacing-1);
106
117
  --skra-comp-grid-gap-md: var(--skra-sys-spacing-2);
107
118
  --skra-comp-grid-gap-lg: var(--skra-sys-spacing-4);
package/brutal/_density.comfortable.scss CHANGED
@@ -34,6 +34,7 @@
34
34
  --skra-comp-alert-padding-inline: var(--skra-sys-spacing-4);
35
35
  --skra-comp-alert-icon-gap: var(--skra-sys-spacing-3);
36
36
  --skra-comp-alert-title-gap: var(--skra-sys-spacing-1);
37
+ --skra-comp-alert-actions-gap: var(--skra-sys-spacing-2);
37
38
  --skra-comp-alert-dismiss-size: var(--skra-sys-size-interactive-sm);
38
39
  --skra-comp-avatar-size-sm: var(--skra-sys-size-avatar-sm);
39
40
  --skra-comp-avatar-size-md: var(--skra-sys-size-avatar-md);
@@ -102,6 +103,16 @@
102
103
  --skra-comp-field-select-arrow-padding-inline-end: var(--skra-sys-spacing-6);
103
104
  --skra-comp-field-temporal-min-block-size: var(--skra-sys-size-interactive-md);
104
105
  --skra-comp-field-temporal-indicator-padding-inline-end: var(--skra-sys-spacing-6);
106
+ --skra-comp-field-file-action-padding-block: var(--skra-sys-spacing-1);
107
+ --skra-comp-field-file-action-padding-inline: var(--skra-sys-spacing-3);
108
+ --skra-comp-field-file-gap: var(--skra-sys-spacing-3);
109
+ --skra-comp-field-file-min-block-size: var(--skra-sys-size-interactive-md);
110
+ --skra-comp-field-file-zone-padding-block: var(--skra-sys-spacing-6);
111
+ --skra-comp-field-file-zone-padding-inline: var(--skra-sys-spacing-6);
112
+ --skra-comp-field-file-zone-gap: var(--skra-sys-spacing-2);
113
+ --skra-comp-file-item-padding-block: var(--skra-sys-spacing-2);
114
+ --skra-comp-file-item-padding-inline: var(--skra-sys-spacing-3);
115
+ --skra-comp-file-item-gap: var(--skra-sys-spacing-3);
105
116
  --skra-comp-grid-gap-sm: var(--skra-sys-spacing-1);
106
117
  --skra-comp-grid-gap-md: var(--skra-sys-spacing-2);
107
118
  --skra-comp-grid-gap-lg: var(--skra-sys-spacing-4);
package/brutal/_density.compact.scoped.scss CHANGED
@@ -34,6 +34,7 @@
34
34
  --skra-comp-alert-padding-inline: var(--skra-sys-spacing-4);
35
35
  --skra-comp-alert-icon-gap: var(--skra-sys-spacing-3);
36
36
  --skra-comp-alert-title-gap: var(--skra-sys-spacing-1);
37
+ --skra-comp-alert-actions-gap: var(--skra-sys-spacing-2);
37
38
  --skra-comp-alert-dismiss-size: var(--skra-sys-size-interactive-sm);
38
39
  --skra-comp-avatar-size-sm: var(--skra-sys-size-avatar-sm);
39
40
  --skra-comp-avatar-size-md: var(--skra-sys-size-avatar-md);
@@ -102,6 +103,16 @@
102
103
  --skra-comp-field-select-arrow-padding-inline-end: var(--skra-sys-spacing-6);
103
104
  --skra-comp-field-temporal-min-block-size: var(--skra-sys-size-interactive-md);
104
105
  --skra-comp-field-temporal-indicator-padding-inline-end: var(--skra-sys-spacing-6);
106
+ --skra-comp-field-file-action-padding-block: var(--skra-sys-spacing-1);
107
+ --skra-comp-field-file-action-padding-inline: var(--skra-sys-spacing-3);
108
+ --skra-comp-field-file-gap: var(--skra-sys-spacing-3);
109
+ --skra-comp-field-file-min-block-size: var(--skra-sys-size-interactive-md);
110
+ --skra-comp-field-file-zone-padding-block: var(--skra-sys-spacing-6);
111
+ --skra-comp-field-file-zone-padding-inline: var(--skra-sys-spacing-6);
112
+ --skra-comp-field-file-zone-gap: var(--skra-sys-spacing-2);
113
+ --skra-comp-file-item-padding-block: var(--skra-sys-spacing-2);
114
+ --skra-comp-file-item-padding-inline: var(--skra-sys-spacing-3);
115
+ --skra-comp-file-item-gap: var(--skra-sys-spacing-3);
105
116
  --skra-comp-grid-gap-sm: var(--skra-sys-spacing-1);
106
117
  --skra-comp-grid-gap-md: var(--skra-sys-spacing-2);
107
118
  --skra-comp-grid-gap-lg: var(--skra-sys-spacing-4);
package/brutal/_density.compact.scss CHANGED
@@ -34,6 +34,7 @@
34
34
  --skra-comp-alert-padding-inline: var(--skra-sys-spacing-4);
35
35
  --skra-comp-alert-icon-gap: var(--skra-sys-spacing-3);
36
36
  --skra-comp-alert-title-gap: var(--skra-sys-spacing-1);
37
+ --skra-comp-alert-actions-gap: var(--skra-sys-spacing-2);
37
38
  --skra-comp-alert-dismiss-size: var(--skra-sys-size-interactive-sm);
38
39
  --skra-comp-avatar-size-sm: var(--skra-sys-size-avatar-sm);
39
40
  --skra-comp-avatar-size-md: var(--skra-sys-size-avatar-md);
@@ -102,6 +103,16 @@
102
103
  --skra-comp-field-select-arrow-padding-inline-end: var(--skra-sys-spacing-6);
103
104
  --skra-comp-field-temporal-min-block-size: var(--skra-sys-size-interactive-md);
104
105
  --skra-comp-field-temporal-indicator-padding-inline-end: var(--skra-sys-spacing-6);
106
+ --skra-comp-field-file-action-padding-block: var(--skra-sys-spacing-1);
107
+ --skra-comp-field-file-action-padding-inline: var(--skra-sys-spacing-3);
108
+ --skra-comp-field-file-gap: var(--skra-sys-spacing-3);
109
+ --skra-comp-field-file-min-block-size: var(--skra-sys-size-interactive-md);
110
+ --skra-comp-field-file-zone-padding-block: var(--skra-sys-spacing-6);
111
+ --skra-comp-field-file-zone-padding-inline: var(--skra-sys-spacing-6);
112
+ --skra-comp-field-file-zone-gap: var(--skra-sys-spacing-2);
113
+ --skra-comp-file-item-padding-block: var(--skra-sys-spacing-2);
114
+ --skra-comp-file-item-padding-inline: var(--skra-sys-spacing-3);
115
+ --skra-comp-file-item-gap: var(--skra-sys-spacing-3);
105
116
  --skra-comp-grid-gap-sm: var(--skra-sys-spacing-1);
106
117
  --skra-comp-grid-gap-md: var(--skra-sys-spacing-2);
107
118
  --skra-comp-grid-gap-lg: var(--skra-sys-spacing-4);
package/brutal/_theme.dark.scoped.scss CHANGED
@@ -294,8 +294,8 @@
294
294
  --skra-comp-dialog-border-color-active: oklch(74.0% 0 0);
295
295
  --skra-comp-dialog-focus-ring-color-hover: oklch(48.0% 0.162 295);
296
296
  --skra-comp-dialog-focus-ring-color-active: oklch(42.0% 0.162 295);
297
- --skra-comp-field-background-hover: oklch(27.0% 0 0);
298
- --skra-comp-field-background-active: oklch(33.0% 0 0);
297
+ --skra-comp-field-background-hover: oklch(3.0% 0 0);
298
+ --skra-comp-field-background-active: oklch(2.0% 0 0);
299
299
  --skra-comp-field-foreground-hover: oklch(80.0% 0 0);
300
300
  --skra-comp-field-foreground-active: oklch(74.0% 0 0);
301
301
  --skra-comp-field-border-color-hover: oklch(80.0% 0 0);
@@ -366,6 +366,36 @@
366
366
  --skra-comp-field-select-optgroup-foreground-active: oklch(74.0% 0 0);
367
367
  --skra-comp-field-temporal-indicator-color-hover: oklch(80.0% 0 0);
368
368
  --skra-comp-field-temporal-indicator-color-active: oklch(74.0% 0 0);
369
+ --skra-comp-field-file-action-background-hover: oklch(36.0% 0 0);
370
+ --skra-comp-field-file-action-background-active: oklch(42.0% 0 0);
371
+ --skra-comp-field-file-action-foreground-hover: oklch(80.0% 0 0);
372
+ --skra-comp-field-file-action-foreground-active: oklch(74.0% 0 0);
373
+ --skra-comp-field-file-action-border-color-hover: oklch(80.0% 0 0);
374
+ --skra-comp-field-file-action-border-color-active: oklch(74.0% 0 0);
375
+ --skra-comp-field-file-status-color-hover: oklch(80.0% 0 0);
376
+ --skra-comp-field-file-status-color-active: oklch(74.0% 0 0);
377
+ --skra-comp-field-file-instruction-color-hover: oklch(53.0% 0 0);
378
+ --skra-comp-field-file-instruction-color-active: oklch(47.0% 0 0);
379
+ --skra-comp-field-file-background-dragover-hover: oklch(12.0% 0.06 100);
380
+ --skra-comp-field-file-background-dragover-active: oklch(6.0% 0.06 100);
381
+ --skra-comp-field-file-foreground-dragover-hover: oklch(53.0% 0.099 98);
382
+ --skra-comp-field-file-foreground-dragover-active: oklch(47.0% 0.099 98);
383
+ --skra-comp-field-file-border-color-dragover-hover: oklch(46.0% 0 0);
384
+ --skra-comp-field-file-border-color-dragover-active: oklch(40.0% 0 0);
385
+ --skra-comp-file-item-background-hover: oklch(3.0% 0 0);
386
+ --skra-comp-file-item-background-active: oklch(2.0% 0 0);
387
+ --skra-comp-file-item-foreground-hover: oklch(80.0% 0 0);
388
+ --skra-comp-file-item-foreground-active: oklch(74.0% 0 0);
389
+ --skra-comp-file-item-border-color-hover: oklch(80.0% 0 0);
390
+ --skra-comp-file-item-border-color-active: oklch(74.0% 0 0);
391
+ --skra-comp-file-item-focus-ring-color-hover: oklch(48.0% 0.162 295);
392
+ --skra-comp-file-item-focus-ring-color-active: oklch(42.0% 0.162 295);
393
+ --skra-comp-file-item-meta-color-hover: oklch(53.0% 0 0);
394
+ --skra-comp-file-item-meta-color-active: oklch(47.0% 0 0);
395
+ --skra-comp-file-item-error-color-hover: oklch(51.0% 0.18 25);
396
+ --skra-comp-file-item-error-color-active: oklch(45.0% 0.18 25);
397
+ --skra-comp-file-item-border-color-validation-invalid-hover: oklch(51.0% 0.18 25);
398
+ --skra-comp-file-item-border-color-validation-invalid-active: oklch(45.0% 0.18 25);
369
399
  --skra-comp-kbd-background-hover: oklch(31.0% 0 0);
370
400
  --skra-comp-kbd-background-active: oklch(37.0% 0 0);
371
401
  --skra-comp-kbd-foreground-hover: oklch(80.0% 0 0);
@@ -419,8 +449,8 @@
419
449
  --skra-comp-select-border-color-validation-invalid-active: oklch(45.0% 0.18 25);
420
450
  --skra-comp-select-arrow-color-hover: oklch(53.0% 0 0);
421
451
  --skra-comp-select-arrow-color-active: oklch(47.0% 0 0);
422
- --skra-comp-select-panel-background-hover: oklch(27.0% 0 0);
423
- --skra-comp-select-panel-background-active: oklch(33.0% 0 0);
452
+ --skra-comp-select-panel-background-hover: oklch(3.0% 0 0);
453
+ --skra-comp-select-panel-background-active: oklch(2.0% 0 0);
424
454
  --skra-comp-select-panel-foreground-hover: oklch(80.0% 0 0);
425
455
  --skra-comp-select-panel-foreground-active: oklch(74.0% 0 0);
426
456
  --skra-comp-select-panel-border-color-hover: oklch(80.0% 0 0);
@@ -634,6 +664,21 @@
634
664
  --skra-comp-field-select-option-background: var(--skra-sys-color-surface);
635
665
  --skra-comp-field-select-optgroup-foreground: var(--skra-sys-color-on-surface);
636
666
  --skra-comp-field-temporal-indicator-color: var(--skra-sys-color-on-surface);
667
+ --skra-comp-field-file-action-background: var(--skra-sys-color-neutral-soft);
668
+ --skra-comp-field-file-action-foreground: var(--skra-sys-color-neutral-strong);
669
+ --skra-comp-field-file-action-border-color: var(--skra-sys-color-border);
670
+ --skra-comp-field-file-status-color: var(--skra-sys-color-on-surface);
671
+ --skra-comp-field-file-instruction-color: var(--skra-sys-color-hint);
672
+ --skra-comp-field-file-background-dragover: var(--skra-sys-color-primary-soft);
673
+ --skra-comp-field-file-foreground-dragover: var(--skra-sys-color-primary-strong);
674
+ --skra-comp-field-file-border-color-dragover: var(--skra-sys-color-primary-border);
675
+ --skra-comp-file-item-background: var(--skra-sys-color-surface);
676
+ --skra-comp-file-item-foreground: var(--skra-sys-color-on-surface);
677
+ --skra-comp-file-item-border-color: var(--skra-sys-color-border);
678
+ --skra-comp-file-item-focus-ring-color: var(--skra-sys-color-focus-ring);
679
+ --skra-comp-file-item-meta-color: var(--skra-sys-color-hint);
680
+ --skra-comp-file-item-error-color: var(--skra-sys-color-danger-ink);
681
+ --skra-comp-file-item-border-color-validation-invalid: var(--skra-sys-color-danger-ink);
637
682
  --skra-comp-kbd-background: var(--skra-sys-color-surface-raised);
638
683
  --skra-comp-kbd-foreground: var(--skra-sys-color-on-surface);
639
684
  --skra-comp-kbd-border-color: var(--skra-sys-color-border);
package/brutal/_theme.dark.scss CHANGED
@@ -295,8 +295,8 @@
295
295
  --skra-comp-dialog-border-color-active: oklch(74.0% 0 0);
296
296
  --skra-comp-dialog-focus-ring-color-hover: oklch(48.0% 0.162 295);
297
297
  --skra-comp-dialog-focus-ring-color-active: oklch(42.0% 0.162 295);
298
- --skra-comp-field-background-hover: oklch(27.0% 0 0);
299
- --skra-comp-field-background-active: oklch(33.0% 0 0);
298
+ --skra-comp-field-background-hover: oklch(3.0% 0 0);
299
+ --skra-comp-field-background-active: oklch(2.0% 0 0);
300
300
  --skra-comp-field-foreground-hover: oklch(80.0% 0 0);
301
301
  --skra-comp-field-foreground-active: oklch(74.0% 0 0);
302
302
  --skra-comp-field-border-color-hover: oklch(80.0% 0 0);
@@ -367,6 +367,36 @@
367
367
  --skra-comp-field-select-optgroup-foreground-active: oklch(74.0% 0 0);
368
368
  --skra-comp-field-temporal-indicator-color-hover: oklch(80.0% 0 0);
369
369
  --skra-comp-field-temporal-indicator-color-active: oklch(74.0% 0 0);
370
+ --skra-comp-field-file-action-background-hover: oklch(36.0% 0 0);
371
+ --skra-comp-field-file-action-background-active: oklch(42.0% 0 0);
372
+ --skra-comp-field-file-action-foreground-hover: oklch(80.0% 0 0);
373
+ --skra-comp-field-file-action-foreground-active: oklch(74.0% 0 0);
374
+ --skra-comp-field-file-action-border-color-hover: oklch(80.0% 0 0);
375
+ --skra-comp-field-file-action-border-color-active: oklch(74.0% 0 0);
376
+ --skra-comp-field-file-status-color-hover: oklch(80.0% 0 0);
377
+ --skra-comp-field-file-status-color-active: oklch(74.0% 0 0);
378
+ --skra-comp-field-file-instruction-color-hover: oklch(53.0% 0 0);
379
+ --skra-comp-field-file-instruction-color-active: oklch(47.0% 0 0);
380
+ --skra-comp-field-file-background-dragover-hover: oklch(12.0% 0.06 100);
381
+ --skra-comp-field-file-background-dragover-active: oklch(6.0% 0.06 100);
382
+ --skra-comp-field-file-foreground-dragover-hover: oklch(53.0% 0.099 98);
383
+ --skra-comp-field-file-foreground-dragover-active: oklch(47.0% 0.099 98);
384
+ --skra-comp-field-file-border-color-dragover-hover: oklch(46.0% 0 0);
385
+ --skra-comp-field-file-border-color-dragover-active: oklch(40.0% 0 0);
386
+ --skra-comp-file-item-background-hover: oklch(3.0% 0 0);
387
+ --skra-comp-file-item-background-active: oklch(2.0% 0 0);
388
+ --skra-comp-file-item-foreground-hover: oklch(80.0% 0 0);
389
+ --skra-comp-file-item-foreground-active: oklch(74.0% 0 0);
390
+ --skra-comp-file-item-border-color-hover: oklch(80.0% 0 0);
391
+ --skra-comp-file-item-border-color-active: oklch(74.0% 0 0);
392
+ --skra-comp-file-item-focus-ring-color-hover: oklch(48.0% 0.162 295);
393
+ --skra-comp-file-item-focus-ring-color-active: oklch(42.0% 0.162 295);
394
+ --skra-comp-file-item-meta-color-hover: oklch(53.0% 0 0);
395
+ --skra-comp-file-item-meta-color-active: oklch(47.0% 0 0);
396
+ --skra-comp-file-item-error-color-hover: oklch(51.0% 0.18 25);
397
+ --skra-comp-file-item-error-color-active: oklch(45.0% 0.18 25);
398
+ --skra-comp-file-item-border-color-validation-invalid-hover: oklch(51.0% 0.18 25);
399
+ --skra-comp-file-item-border-color-validation-invalid-active: oklch(45.0% 0.18 25);
370
400
  --skra-comp-kbd-background-hover: oklch(31.0% 0 0);
371
401
  --skra-comp-kbd-background-active: oklch(37.0% 0 0);
372
402
  --skra-comp-kbd-foreground-hover: oklch(80.0% 0 0);
@@ -420,8 +450,8 @@
420
450
  --skra-comp-select-border-color-validation-invalid-active: oklch(45.0% 0.18 25);
421
451
  --skra-comp-select-arrow-color-hover: oklch(53.0% 0 0);
422
452
  --skra-comp-select-arrow-color-active: oklch(47.0% 0 0);
423
- --skra-comp-select-panel-background-hover: oklch(27.0% 0 0);
424
- --skra-comp-select-panel-background-active: oklch(33.0% 0 0);
453
+ --skra-comp-select-panel-background-hover: oklch(3.0% 0 0);
454
+ --skra-comp-select-panel-background-active: oklch(2.0% 0 0);
425
455
  --skra-comp-select-panel-foreground-hover: oklch(80.0% 0 0);
426
456
  --skra-comp-select-panel-foreground-active: oklch(74.0% 0 0);
427
457
  --skra-comp-select-panel-border-color-hover: oklch(80.0% 0 0);
@@ -635,6 +665,21 @@
635
665
  --skra-comp-field-select-option-background: var(--skra-sys-color-surface);
636
666
  --skra-comp-field-select-optgroup-foreground: var(--skra-sys-color-on-surface);
637
667
  --skra-comp-field-temporal-indicator-color: var(--skra-sys-color-on-surface);
668
+ --skra-comp-field-file-action-background: var(--skra-sys-color-neutral-soft);
669
+ --skra-comp-field-file-action-foreground: var(--skra-sys-color-neutral-strong);
670
+ --skra-comp-field-file-action-border-color: var(--skra-sys-color-border);
671
+ --skra-comp-field-file-status-color: var(--skra-sys-color-on-surface);
672
+ --skra-comp-field-file-instruction-color: var(--skra-sys-color-hint);
673
+ --skra-comp-field-file-background-dragover: var(--skra-sys-color-primary-soft);
674
+ --skra-comp-field-file-foreground-dragover: var(--skra-sys-color-primary-strong);
675
+ --skra-comp-field-file-border-color-dragover: var(--skra-sys-color-primary-border);
676
+ --skra-comp-file-item-background: var(--skra-sys-color-surface);
677
+ --skra-comp-file-item-foreground: var(--skra-sys-color-on-surface);
678
+ --skra-comp-file-item-border-color: var(--skra-sys-color-border);
679
+ --skra-comp-file-item-focus-ring-color: var(--skra-sys-color-focus-ring);
680
+ --skra-comp-file-item-meta-color: var(--skra-sys-color-hint);
681
+ --skra-comp-file-item-error-color: var(--skra-sys-color-danger-ink);
682
+ --skra-comp-file-item-border-color-validation-invalid: var(--skra-sys-color-danger-ink);
638
683
  --skra-comp-kbd-background: var(--skra-sys-color-surface-raised);
639
684
  --skra-comp-kbd-foreground: var(--skra-sys-color-on-surface);
640
685
  --skra-comp-kbd-border-color: var(--skra-sys-color-border);
package/brutal/_theme.scoped.scss CHANGED
@@ -332,8 +332,8 @@
332
332
  --skra-comp-dialog-border-style: solid;
333
333
  --skra-comp-dialog-focus-ring-width: 0.1875rem;
334
334
  --skra-comp-dialog-typography-role: body-medium;
335
- --skra-comp-field-background-hover: oklch(85.0% 0.015 95);
336
- --skra-comp-field-background-active: oklch(79.0% 0.015 95);
335
+ --skra-comp-field-background-hover: oklch(98.0% 0.015 95);
336
+ --skra-comp-field-background-active: oklch(98.0% 0.015 95);
337
337
  --skra-comp-field-foreground-hover: oklch(12.0% 0 0);
338
338
  --skra-comp-field-foreground-active: oklch(18.0% 0 0);
339
339
  --skra-comp-field-border-color-hover: oklch(12.0% 0 0);
@@ -412,10 +412,54 @@
412
412
  --skra-comp-field-select-arrow-icon-size: 1em;
413
413
  --skra-comp-field-temporal-indicator-color-hover: oklch(12.0% 0 0);
414
414
  --skra-comp-field-temporal-indicator-color-active: oklch(18.0% 0 0);
415
+ --skra-comp-field-file-action-background-hover: oklch(83.0% 0 0);
416
+ --skra-comp-field-file-action-background-active: oklch(77.0% 0 0);
417
+ --skra-comp-field-file-action-foreground-hover: oklch(12.0% 0 0);
418
+ --skra-comp-field-file-action-foreground-active: oklch(18.0% 0 0);
419
+ --skra-comp-field-file-action-border-color-hover: oklch(12.0% 0 0);
420
+ --skra-comp-field-file-action-border-color-active: oklch(18.0% 0 0);
421
+ --skra-comp-field-file-status-color-hover: oklch(12.0% 0 0);
422
+ --skra-comp-field-file-status-color-active: oklch(18.0% 0 0);
423
+ --skra-comp-field-file-instruction-color-hover: oklch(47.0% 0 0);
424
+ --skra-comp-field-file-instruction-color-active: oklch(53.0% 0 0);
425
+ --skra-comp-field-file-background-dragover-hover: oklch(98.0% 0.06 100);
426
+ --skra-comp-field-file-background-dragover-active: oklch(98.0% 0.06 100);
427
+ --skra-comp-field-file-foreground-dragover-hover: oklch(62.0% 0.11 98);
428
+ --skra-comp-field-file-foreground-dragover-active: oklch(68.0% 0.11 98);
429
+ --skra-comp-field-file-border-color-dragover-hover: oklch(12.0% 0 0);
430
+ --skra-comp-field-file-border-color-dragover-active: oklch(18.0% 0 0);
431
+ --skra-comp-field-file-action-border-width: 0.125rem;
432
+ --skra-comp-field-file-action-border-style: solid;
433
+ --skra-comp-field-file-action-typography-role: label-medium;
434
+ --skra-comp-field-file-status-typography-role: body-medium;
435
+ --skra-comp-field-file-instruction-typography-role: body-small;
436
+ --skra-comp-field-file-icon-size: 1.25em;
437
+ --skra-comp-field-file-zone-border-style: dashed;
415
438
  --skra-comp-field-border-width: 0.125rem;
416
439
  --skra-comp-field-border-style: solid;
417
440
  --skra-comp-field-shadow: none;
418
441
  --skra-comp-field-focus-ring-width: 0.1875rem;
442
+ --skra-comp-file-item-background-hover: oklch(98.0% 0.015 95);
443
+ --skra-comp-file-item-background-active: oklch(98.0% 0.015 95);
444
+ --skra-comp-file-item-foreground-hover: oklch(12.0% 0 0);
445
+ --skra-comp-file-item-foreground-active: oklch(18.0% 0 0);
446
+ --skra-comp-file-item-border-color-hover: oklch(12.0% 0 0);
447
+ --skra-comp-file-item-border-color-active: oklch(18.0% 0 0);
448
+ --skra-comp-file-item-focus-ring-color-hover: oklch(57.0% 0.18 295);
449
+ --skra-comp-file-item-focus-ring-color-active: oklch(63.0% 0.18 295);
450
+ --skra-comp-file-item-meta-color-hover: oklch(47.0% 0 0);
451
+ --skra-comp-file-item-meta-color-active: oklch(53.0% 0 0);
452
+ --skra-comp-file-item-error-color-hover: oklch(60.0% 0.2 25);
453
+ --skra-comp-file-item-error-color-active: oklch(66.0% 0.2 25);
454
+ --skra-comp-file-item-border-color-validation-invalid-hover: oklch(60.0% 0.2 25);
455
+ --skra-comp-file-item-border-color-validation-invalid-active: oklch(66.0% 0.2 25);
456
+ --skra-comp-file-item-border-width: 0.125rem;
457
+ --skra-comp-file-item-border-style: solid;
458
+ --skra-comp-file-item-shadow: none;
459
+ --skra-comp-file-item-focus-ring-width: 0.1875rem;
460
+ --skra-comp-file-item-icon-size: 1.5em;
461
+ --skra-comp-file-item-name-typography-role: body-medium;
462
+ --skra-comp-file-item-meta-typography-role: body-small;
419
463
  --skra-comp-kbd-background-hover: oklch(81.0% 0.025 95);
420
464
  --skra-comp-kbd-background-active: oklch(75.0% 0.025 95);
421
465
  --skra-comp-kbd-foreground-hover: oklch(12.0% 0 0);
@@ -839,7 +883,10 @@
839
883
  --skra-comp-field-switch-track-radius: var(--skra-sys-radius-sm);
840
884
  --skra-comp-field-temporal-min-block-size: var(--skra-sys-size-interactive-md);
841
885
  --skra-comp-field-temporal-indicator-icon-size: var(--skra-sys-icon-size-sm);
886
+ --skra-comp-field-file-action-radius: var(--skra-sys-radius-sm);
887
+ --skra-comp-field-file-min-block-size: var(--skra-sys-size-interactive-md);
842
888
  --skra-comp-field-radius: var(--skra-sys-radius-sm);
889
+ --skra-comp-file-item-radius: var(--skra-sys-radius-sm);
843
890
  --skra-comp-kbd-radius: var(--skra-sys-radius-none);
844
891
  --skra-comp-kbd-shadow: var(--skra-sys-shadow-sm);
845
892
  --skra-comp-menu-radius: var(--skra-sys-radius-md);
@@ -907,6 +954,7 @@
907
954
  --skra-comp-alert-focus-ring-color: var(--skra-sys-color-focus-ring);
908
955
  --skra-comp-alert-icon-gap: var(--skra-sys-spacing-3);
909
956
  --skra-comp-alert-title-gap: var(--skra-sys-spacing-1);
957
+ --skra-comp-alert-actions-gap: var(--skra-sys-spacing-2);
910
958
  --skra-comp-avatar-background: var(--skra-sys-color-neutral-soft);
911
959
  --skra-comp-avatar-foreground: var(--skra-sys-color-neutral-strong);
912
960
  --skra-comp-avatar-border-color: var(--skra-sys-color-neutral-border);
@@ -1061,6 +1109,20 @@
1061
1109
  --skra-comp-field-select-optgroup-foreground: var(--skra-sys-color-on-surface);
1062
1110
  --skra-comp-field-temporal-indicator-padding-inline-end: var(--skra-sys-spacing-6);
1063
1111
  --skra-comp-field-temporal-indicator-color: var(--skra-sys-color-on-surface);
1112
+ --skra-comp-field-file-action-background: var(--skra-sys-color-neutral-soft);
1113
+ --skra-comp-field-file-action-foreground: var(--skra-sys-color-neutral-strong);
1114
+ --skra-comp-field-file-action-border-color: var(--skra-sys-color-border);
1115
+ --skra-comp-field-file-action-padding-block: var(--skra-sys-spacing-1);
1116
+ --skra-comp-field-file-action-padding-inline: var(--skra-sys-spacing-3);
1117
+ --skra-comp-field-file-status-color: var(--skra-sys-color-on-surface);
1118
+ --skra-comp-field-file-instruction-color: var(--skra-sys-color-hint);
1119
+ --skra-comp-field-file-gap: var(--skra-sys-spacing-3);
1120
+ --skra-comp-field-file-background-dragover: var(--skra-sys-color-primary-soft);
1121
+ --skra-comp-field-file-foreground-dragover: var(--skra-sys-color-primary-strong);
1122
+ --skra-comp-field-file-border-color-dragover: var(--skra-sys-color-primary-border);
1123
+ --skra-comp-field-file-zone-padding-block: var(--skra-sys-spacing-6);
1124
+ --skra-comp-field-file-zone-padding-inline: var(--skra-sys-spacing-6);
1125
+ --skra-comp-field-file-zone-gap: var(--skra-sys-spacing-2);
1064
1126
  --skra-comp-field-background: var(--skra-sys-color-surface);
1065
1127
  --skra-comp-field-foreground: var(--skra-sys-color-on-surface);
1066
1128
  --skra-comp-field-border-color: var(--skra-sys-color-border);
@@ -1077,6 +1139,18 @@
1077
1139
  --skra-comp-field-background-readonly: var(--skra-sys-color-surface-raised);
1078
1140
  --skra-comp-field-border-color-readonly: var(--skra-sys-color-border-subtle);
1079
1141
  --skra-comp-field-required-color: var(--skra-sys-color-danger-ink);
1142
+ --skra-comp-file-item-background: var(--skra-sys-color-surface);
1143
+ --skra-comp-file-item-foreground: var(--skra-sys-color-on-surface);
1144
+ --skra-comp-file-item-border-color: var(--skra-sys-color-border);
1145
+ --skra-comp-file-item-padding-block: var(--skra-sys-spacing-2);
1146
+ --skra-comp-file-item-padding-inline: var(--skra-sys-spacing-3);
1147
+ --skra-comp-file-item-motion-duration: var(--skra-sys-motion-duration-fast);
1148
+ --skra-comp-file-item-motion-easing: var(--skra-sys-motion-easing-standard);
1149
+ --skra-comp-file-item-focus-ring-color: var(--skra-sys-color-focus-ring);
1150
+ --skra-comp-file-item-gap: var(--skra-sys-spacing-3);
1151
+ --skra-comp-file-item-meta-color: var(--skra-sys-color-hint);
1152
+ --skra-comp-file-item-error-color: var(--skra-sys-color-danger-ink);
1153
+ --skra-comp-file-item-border-color-validation-invalid: var(--skra-sys-color-danger-ink);
1080
1154
  --skra-comp-kbd-background: var(--skra-sys-color-surface-raised);
1081
1155
  --skra-comp-kbd-foreground: var(--skra-sys-color-on-surface);
1082
1156
  --skra-comp-kbd-border-color: var(--skra-sys-color-border);