@skra/tokens 0.7.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 (14) hide show
  1. package/brutal/_comp.scss +75 -2
  2. package/brutal/_density.comfortable.scoped.scss +10 -0
  3. package/brutal/_density.comfortable.scss +10 -0
  4. package/brutal/_density.compact.scoped.scss +10 -0
  5. package/brutal/_density.compact.scss +10 -0
  6. package/brutal/_theme.dark.scoped.scss +47 -2
  7. package/brutal/_theme.dark.scss +47 -2
  8. package/brutal/_theme.scoped.scss +75 -2
  9. package/manifests/file-item.json +6 -0
  10. package/package.json +1 -1
  11. package/skra/_comp.scss +73 -2
  12. package/skra/_density.comfortable.scss +10 -0
  13. package/skra/_density.compact.scss +10 -0
  14. package/skra/_theme.dark.scss +44 -2
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);
@@ -758,6 +805,20 @@
758
805
  --skra-comp-field-select-optgroup-foreground: var(--skra-sys-color-on-surface);
759
806
  --skra-comp-field-temporal-indicator-padding-inline-end: var(--skra-sys-spacing-6);
760
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);
761
822
  --skra-comp-field-background: var(--skra-sys-color-surface);
762
823
  --skra-comp-field-foreground: var(--skra-sys-color-on-surface);
763
824
  --skra-comp-field-border-color: var(--skra-sys-color-border);
@@ -774,6 +835,18 @@
774
835
  --skra-comp-field-background-readonly: var(--skra-sys-color-surface-raised);
775
836
  --skra-comp-field-border-color-readonly: var(--skra-sys-color-border-subtle);
776
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);
777
850
  --skra-comp-kbd-background: var(--skra-sys-color-surface-raised);
778
851
  --skra-comp-kbd-foreground: var(--skra-sys-color-on-surface);
779
852
  --skra-comp-kbd-border-color: var(--skra-sys-color-border);
package/brutal/_density.comfortable.scoped.scss CHANGED
@@ -103,6 +103,16 @@
103
103
  --skra-comp-field-select-arrow-padding-inline-end: var(--skra-sys-spacing-6);
104
104
  --skra-comp-field-temporal-min-block-size: var(--skra-sys-size-interactive-md);
105
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);
106
116
  --skra-comp-grid-gap-sm: var(--skra-sys-spacing-1);
107
117
  --skra-comp-grid-gap-md: var(--skra-sys-spacing-2);
108
118
  --skra-comp-grid-gap-lg: var(--skra-sys-spacing-4);
package/brutal/_density.comfortable.scss CHANGED
@@ -103,6 +103,16 @@
103
103
  --skra-comp-field-select-arrow-padding-inline-end: var(--skra-sys-spacing-6);
104
104
  --skra-comp-field-temporal-min-block-size: var(--skra-sys-size-interactive-md);
105
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);
106
116
  --skra-comp-grid-gap-sm: var(--skra-sys-spacing-1);
107
117
  --skra-comp-grid-gap-md: var(--skra-sys-spacing-2);
108
118
  --skra-comp-grid-gap-lg: var(--skra-sys-spacing-4);
package/brutal/_density.compact.scoped.scss CHANGED
@@ -103,6 +103,16 @@
103
103
  --skra-comp-field-select-arrow-padding-inline-end: var(--skra-sys-spacing-6);
104
104
  --skra-comp-field-temporal-min-block-size: var(--skra-sys-size-interactive-md);
105
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);
106
116
  --skra-comp-grid-gap-sm: var(--skra-sys-spacing-1);
107
117
  --skra-comp-grid-gap-md: var(--skra-sys-spacing-2);
108
118
  --skra-comp-grid-gap-lg: var(--skra-sys-spacing-4);
package/brutal/_density.compact.scss CHANGED
@@ -103,6 +103,16 @@
103
103
  --skra-comp-field-select-arrow-padding-inline-end: var(--skra-sys-spacing-6);
104
104
  --skra-comp-field-temporal-min-block-size: var(--skra-sys-size-interactive-md);
105
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);
106
116
  --skra-comp-grid-gap-sm: var(--skra-sys-spacing-1);
107
117
  --skra-comp-grid-gap-md: var(--skra-sys-spacing-2);
108
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);
@@ -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);
@@ -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);
@@ -1062,6 +1109,20 @@
1062
1109
  --skra-comp-field-select-optgroup-foreground: var(--skra-sys-color-on-surface);
1063
1110
  --skra-comp-field-temporal-indicator-padding-inline-end: var(--skra-sys-spacing-6);
1064
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);
1065
1126
  --skra-comp-field-background: var(--skra-sys-color-surface);
1066
1127
  --skra-comp-field-foreground: var(--skra-sys-color-on-surface);
1067
1128
  --skra-comp-field-border-color: var(--skra-sys-color-border);
@@ -1078,6 +1139,18 @@
1078
1139
  --skra-comp-field-background-readonly: var(--skra-sys-color-surface-raised);
1079
1140
  --skra-comp-field-border-color-readonly: var(--skra-sys-color-border-subtle);
1080
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);
1081
1154
  --skra-comp-kbd-background: var(--skra-sys-color-surface-raised);
1082
1155
  --skra-comp-kbd-foreground: var(--skra-sys-color-on-surface);
1083
1156
  --skra-comp-kbd-border-color: var(--skra-sys-color-border);
package/manifests/file-item.json ADDED
@@ -0,0 +1,6 @@
1
+ {
2
+ "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
3
+ "component": "file-item",
4
+ "skraVersion": ">=1.0.0",
5
+ "axes": []
6
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skra/tokens",
3
- "version": "0.7.0",
3
+ "version": "0.8.0",
4
4
  "license": "Apache-2.0",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/skra/_comp.scss CHANGED
@@ -194,8 +194,8 @@
194
194
  --skra-comp-dialog-border-style: solid;
195
195
  --skra-comp-dialog-focus-ring-width: 0.125rem;
196
196
  --skra-comp-dialog-typography-role: body-medium;
197
- --skra-comp-field-background-hover: oklch(93.0% 0 0);
198
- --skra-comp-field-background-active: oklch(89.5% 0 0);
197
+ --skra-comp-field-background-hover: oklch(98.0% 0 0);
198
+ --skra-comp-field-background-active: oklch(98.0% 0 0);
199
199
  --skra-comp-field-foreground-hover: oklch(7.0% 0 0);
200
200
  --skra-comp-field-foreground-active: oklch(10.5% 0 0);
201
201
  --skra-comp-field-border-color-hover: oklch(7.0% 0 0);
@@ -274,10 +274,53 @@
274
274
  --skra-comp-field-select-arrow-icon-size: 1em;
275
275
  --skra-comp-field-temporal-indicator-color-hover: oklch(7.0% 0 0);
276
276
  --skra-comp-field-temporal-indicator-color-active: oklch(10.5% 0 0);
277
+ --skra-comp-field-file-action-background-hover: oklch(88.0% 0 0);
278
+ --skra-comp-field-file-action-background-active: oklch(84.5% 0 0);
279
+ --skra-comp-field-file-action-foreground-hover: oklch(32.0% 0 0);
280
+ --skra-comp-field-file-action-foreground-active: oklch(35.5% 0 0);
281
+ --skra-comp-field-file-status-color-hover: oklch(7.0% 0 0);
282
+ --skra-comp-field-file-status-color-active: oklch(10.5% 0 0);
283
+ --skra-comp-field-file-instruction-color-hover: oklch(47.0% 0 0);
284
+ --skra-comp-field-file-instruction-color-active: oklch(50.5% 0 0);
285
+ --skra-comp-field-file-background-dragover-hover: oklch(88.0% 0.04 250);
286
+ --skra-comp-field-file-background-dragover-active: oklch(84.5% 0.04 250);
287
+ --skra-comp-field-file-foreground-dragover-hover: oklch(42.0% 0.15 250);
288
+ --skra-comp-field-file-foreground-dragover-active: oklch(45.5% 0.15 250);
289
+ --skra-comp-field-file-border-color-dragover-hover: oklch(45.0% 0.15 250);
290
+ --skra-comp-field-file-border-color-dragover-active: oklch(41.5% 0.15 250);
291
+ --skra-comp-field-file-action-border-color: transparent;
292
+ --skra-comp-field-file-action-border-width: 0.0625rem;
293
+ --skra-comp-field-file-action-border-style: solid;
294
+ --skra-comp-field-file-action-typography-role: label-medium;
295
+ --skra-comp-field-file-status-typography-role: body-medium;
296
+ --skra-comp-field-file-instruction-typography-role: body-small;
297
+ --skra-comp-field-file-icon-size: 1.25em;
298
+ --skra-comp-field-file-zone-border-style: dashed;
277
299
  --skra-comp-field-border-width: 0.0625rem;
278
300
  --skra-comp-field-border-style: solid;
279
301
  --skra-comp-field-shadow: none;
280
302
  --skra-comp-field-focus-ring-width: 0.125rem;
303
+ --skra-comp-file-item-background-hover: oklch(98.0% 0 0);
304
+ --skra-comp-file-item-background-active: oklch(98.0% 0 0);
305
+ --skra-comp-file-item-foreground-hover: oklch(7.0% 0 0);
306
+ --skra-comp-file-item-foreground-active: oklch(10.5% 0 0);
307
+ --skra-comp-file-item-border-color-hover: oklch(47.0% 0 0);
308
+ --skra-comp-file-item-border-color-active: oklch(50.5% 0 0);
309
+ --skra-comp-file-item-focus-ring-color-hover: oklch(53.0% 0.15 250);
310
+ --skra-comp-file-item-focus-ring-color-active: oklch(49.5% 0.15 250);
311
+ --skra-comp-file-item-meta-color-hover: oklch(47.0% 0 0);
312
+ --skra-comp-file-item-meta-color-active: oklch(50.5% 0 0);
313
+ --skra-comp-file-item-error-color-hover: oklch(48.0% 0.2 25);
314
+ --skra-comp-file-item-error-color-active: oklch(44.5% 0.2 25);
315
+ --skra-comp-file-item-border-color-validation-invalid-hover: oklch(48.0% 0.2 25);
316
+ --skra-comp-file-item-border-color-validation-invalid-active: oklch(44.5% 0.2 25);
317
+ --skra-comp-file-item-border-width: 0.0625rem;
318
+ --skra-comp-file-item-border-style: solid;
319
+ --skra-comp-file-item-shadow: none;
320
+ --skra-comp-file-item-focus-ring-width: 0.125rem;
321
+ --skra-comp-file-item-icon-size: 1.5em;
322
+ --skra-comp-file-item-name-typography-role: body-medium;
323
+ --skra-comp-file-item-meta-typography-role: body-small;
281
324
  --skra-comp-kbd-background-hover: oklch(88.0% 0 0);
282
325
  --skra-comp-kbd-background-active: oklch(84.5% 0 0);
283
326
  --skra-comp-kbd-foreground-hover: oklch(7.0% 0 0);
@@ -523,6 +566,7 @@
523
566
  --skra-comp-dialog-shadow: var(--skra-sys-shadow-xl);
524
567
  --skra-comp-field-temporal-min-block-size: var(--skra-sys-size-interactive-md);
525
568
  --skra-comp-field-temporal-indicator-icon-size: var(--skra-sys-icon-size-sm);
569
+ --skra-comp-field-file-min-block-size: var(--skra-sys-size-interactive-md);
526
570
  --skra-comp-menu-shadow: var(--skra-sys-shadow-lg);
527
571
  --skra-comp-menu-item-min-block-size: var(--skra-sys-size-interactive-md);
528
572
  --skra-comp-popover-shadow: var(--skra-sys-shadow-lg);
@@ -740,6 +784,20 @@
740
784
  --skra-comp-field-select-optgroup-foreground: var(--skra-sys-color-on-surface);
741
785
  --skra-comp-field-temporal-indicator-padding-inline-end: var(--skra-sys-spacing-6);
742
786
  --skra-comp-field-temporal-indicator-color: var(--skra-sys-color-on-surface);
787
+ --skra-comp-field-file-action-background: var(--skra-sys-color-neutral-soft);
788
+ --skra-comp-field-file-action-foreground: var(--skra-sys-color-neutral-strong);
789
+ --skra-comp-field-file-action-radius: var(--skra-sys-radius-sm);
790
+ --skra-comp-field-file-action-padding-block: var(--skra-sys-spacing-1);
791
+ --skra-comp-field-file-action-padding-inline: var(--skra-sys-spacing-3);
792
+ --skra-comp-field-file-status-color: var(--skra-sys-color-on-surface);
793
+ --skra-comp-field-file-instruction-color: var(--skra-sys-color-hint);
794
+ --skra-comp-field-file-gap: var(--skra-sys-spacing-3);
795
+ --skra-comp-field-file-background-dragover: var(--skra-sys-color-primary-soft);
796
+ --skra-comp-field-file-foreground-dragover: var(--skra-sys-color-primary-strong);
797
+ --skra-comp-field-file-border-color-dragover: var(--skra-sys-color-primary-border);
798
+ --skra-comp-field-file-zone-padding-block: var(--skra-sys-spacing-6);
799
+ --skra-comp-field-file-zone-padding-inline: var(--skra-sys-spacing-6);
800
+ --skra-comp-field-file-zone-gap: var(--skra-sys-spacing-2);
743
801
  --skra-comp-field-background: var(--skra-sys-color-surface);
744
802
  --skra-comp-field-foreground: var(--skra-sys-color-on-surface);
745
803
  --skra-comp-field-border-color: var(--skra-sys-color-border);
@@ -757,6 +815,19 @@
757
815
  --skra-comp-field-background-readonly: var(--skra-sys-color-surface-raised);
758
816
  --skra-comp-field-border-color-readonly: var(--skra-sys-color-border-subtle);
759
817
  --skra-comp-field-required-color: var(--skra-sys-color-danger-ink);
818
+ --skra-comp-file-item-background: var(--skra-sys-color-surface);
819
+ --skra-comp-file-item-foreground: var(--skra-sys-color-on-surface);
820
+ --skra-comp-file-item-border-color: var(--skra-sys-color-border-subtle);
821
+ --skra-comp-file-item-radius: var(--skra-sys-radius-sm);
822
+ --skra-comp-file-item-padding-block: var(--skra-sys-spacing-2);
823
+ --skra-comp-file-item-padding-inline: var(--skra-sys-spacing-3);
824
+ --skra-comp-file-item-motion-duration: var(--skra-sys-motion-duration-fast);
825
+ --skra-comp-file-item-motion-easing: var(--skra-sys-motion-easing-standard);
826
+ --skra-comp-file-item-focus-ring-color: var(--skra-sys-color-focus-ring);
827
+ --skra-comp-file-item-gap: var(--skra-sys-spacing-3);
828
+ --skra-comp-file-item-meta-color: var(--skra-sys-color-hint);
829
+ --skra-comp-file-item-error-color: var(--skra-sys-color-danger-ink);
830
+ --skra-comp-file-item-border-color-validation-invalid: var(--skra-sys-color-danger-ink);
760
831
  --skra-comp-kbd-background: var(--skra-sys-color-surface-raised);
761
832
  --skra-comp-kbd-foreground: var(--skra-sys-color-on-surface);
762
833
  --skra-comp-kbd-border-color: var(--skra-sys-color-border-subtle);
package/skra/_density.comfortable.scss CHANGED
@@ -103,6 +103,16 @@
103
103
  --skra-comp-field-select-arrow-padding-inline-end: var(--skra-sys-spacing-6);
104
104
  --skra-comp-field-temporal-min-block-size: var(--skra-sys-size-interactive-md);
105
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);
106
116
  --skra-comp-grid-gap-sm: var(--skra-sys-spacing-1);
107
117
  --skra-comp-grid-gap-md: var(--skra-sys-spacing-2);
108
118
  --skra-comp-grid-gap-lg: var(--skra-sys-spacing-4);
package/skra/_density.compact.scss CHANGED
@@ -103,6 +103,16 @@
103
103
  --skra-comp-field-select-arrow-padding-inline-end: var(--skra-sys-spacing-6);
104
104
  --skra-comp-field-temporal-min-block-size: var(--skra-sys-size-interactive-md);
105
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);
106
116
  --skra-comp-grid-gap-sm: var(--skra-sys-spacing-1);
107
117
  --skra-comp-grid-gap-md: var(--skra-sys-spacing-2);
108
118
  --skra-comp-grid-gap-lg: var(--skra-sys-spacing-4);
package/skra/_theme.dark.scss CHANGED
@@ -291,8 +291,8 @@
291
291
  --skra-comp-dialog-foreground-active: oklch(81.5% 0 0);
292
292
  --skra-comp-dialog-focus-ring-color-hover: oklch(68.0% 0.135 250);
293
293
  --skra-comp-dialog-focus-ring-color-active: oklch(64.5% 0.135 250);
294
- --skra-comp-field-background-hover: oklch(22.0% 0 0);
295
- --skra-comp-field-background-active: oklch(25.5% 0 0);
294
+ --skra-comp-field-background-hover: oklch(8.0% 0 0);
295
+ --skra-comp-field-background-active: oklch(4.5% 0 0);
296
296
  --skra-comp-field-foreground-hover: oklch(85.0% 0 0);
297
297
  --skra-comp-field-foreground-active: oklch(81.5% 0 0);
298
298
  --skra-comp-field-border-color-hover: oklch(85.0% 0 0);
@@ -363,6 +363,34 @@
363
363
  --skra-comp-field-select-optgroup-foreground-active: oklch(81.5% 0 0);
364
364
  --skra-comp-field-temporal-indicator-color-hover: oklch(85.0% 0 0);
365
365
  --skra-comp-field-temporal-indicator-color-active: oklch(81.5% 0 0);
366
+ --skra-comp-field-file-action-background-hover: oklch(31.0% 0 0);
367
+ --skra-comp-field-file-action-background-active: oklch(34.5% 0 0);
368
+ --skra-comp-field-file-action-foreground-hover: oklch(68.0% 0 0);
369
+ --skra-comp-field-file-action-foreground-active: oklch(64.5% 0 0);
370
+ --skra-comp-field-file-status-color-hover: oklch(85.0% 0 0);
371
+ --skra-comp-field-file-status-color-active: oklch(81.5% 0 0);
372
+ --skra-comp-field-file-instruction-color-hover: oklch(53.0% 0 0);
373
+ --skra-comp-field-file-instruction-color-active: oklch(49.5% 0 0);
374
+ --skra-comp-field-file-background-dragover-hover: oklch(17.0% 0.04 250);
375
+ --skra-comp-field-file-background-dragover-active: oklch(13.5% 0.04 250);
376
+ --skra-comp-field-file-foreground-dragover-hover: oklch(55.0% 0.135 250);
377
+ --skra-comp-field-file-foreground-dragover-active: oklch(51.5% 0.135 250);
378
+ --skra-comp-field-file-border-color-dragover-hover: oklch(60.0% 0.135 250);
379
+ --skra-comp-field-file-border-color-dragover-active: oklch(56.5% 0.135 250);
380
+ --skra-comp-file-item-background-hover: oklch(8.0% 0 0);
381
+ --skra-comp-file-item-background-active: oklch(4.5% 0 0);
382
+ --skra-comp-file-item-foreground-hover: oklch(85.0% 0 0);
383
+ --skra-comp-file-item-foreground-active: oklch(81.5% 0 0);
384
+ --skra-comp-file-item-border-color-hover: oklch(53.0% 0 0);
385
+ --skra-comp-file-item-border-color-active: oklch(49.5% 0 0);
386
+ --skra-comp-file-item-focus-ring-color-hover: oklch(68.0% 0.135 250);
387
+ --skra-comp-file-item-focus-ring-color-active: oklch(64.5% 0.135 250);
388
+ --skra-comp-file-item-meta-color-hover: oklch(53.0% 0 0);
389
+ --skra-comp-file-item-meta-color-active: oklch(49.5% 0 0);
390
+ --skra-comp-file-item-error-color-hover: oklch(63.0% 0.18 25);
391
+ --skra-comp-file-item-error-color-active: oklch(59.5% 0.18 25);
392
+ --skra-comp-file-item-border-color-validation-invalid-hover: oklch(63.0% 0.18 25);
393
+ --skra-comp-file-item-border-color-validation-invalid-active: oklch(59.5% 0.18 25);
366
394
  --skra-comp-kbd-background-hover: oklch(26.0% 0 0);
367
395
  --skra-comp-kbd-background-active: oklch(29.5% 0 0);
368
396
  --skra-comp-kbd-foreground-hover: oklch(85.0% 0 0);
@@ -628,6 +656,20 @@
628
656
  --skra-comp-field-select-option-background: var(--skra-sys-color-surface);
629
657
  --skra-comp-field-select-optgroup-foreground: var(--skra-sys-color-on-surface);
630
658
  --skra-comp-field-temporal-indicator-color: var(--skra-sys-color-on-surface);
659
+ --skra-comp-field-file-action-background: var(--skra-sys-color-neutral-soft);
660
+ --skra-comp-field-file-action-foreground: var(--skra-sys-color-neutral-strong);
661
+ --skra-comp-field-file-status-color: var(--skra-sys-color-on-surface);
662
+ --skra-comp-field-file-instruction-color: var(--skra-sys-color-hint);
663
+ --skra-comp-field-file-background-dragover: var(--skra-sys-color-primary-soft);
664
+ --skra-comp-field-file-foreground-dragover: var(--skra-sys-color-primary-strong);
665
+ --skra-comp-field-file-border-color-dragover: var(--skra-sys-color-primary-border);
666
+ --skra-comp-file-item-background: var(--skra-sys-color-surface);
667
+ --skra-comp-file-item-foreground: var(--skra-sys-color-on-surface);
668
+ --skra-comp-file-item-border-color: var(--skra-sys-color-border-subtle);
669
+ --skra-comp-file-item-focus-ring-color: var(--skra-sys-color-focus-ring);
670
+ --skra-comp-file-item-meta-color: var(--skra-sys-color-hint);
671
+ --skra-comp-file-item-error-color: var(--skra-sys-color-danger-ink);
672
+ --skra-comp-file-item-border-color-validation-invalid: var(--skra-sys-color-danger-ink);
631
673
  --skra-comp-kbd-background: var(--skra-sys-color-surface-raised);
632
674
  --skra-comp-kbd-foreground: var(--skra-sys-color-on-surface);
633
675
  --skra-comp-kbd-border-color: var(--skra-sys-color-border-subtle);