@skra/tokens 0.7.0 → 0.9.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 (15) hide show
  1. package/brutal/_comp.scss +104 -2
  2. package/brutal/_density.comfortable.scoped.scss +12 -0
  3. package/brutal/_density.comfortable.scss +12 -0
  4. package/brutal/_density.compact.scoped.scss +12 -0
  5. package/brutal/_density.compact.scss +12 -0
  6. package/brutal/_theme.dark.scoped.scss +63 -2
  7. package/brutal/_theme.dark.scss +63 -2
  8. package/brutal/_theme.scoped.scss +104 -2
  9. package/manifests/file-item.json +6 -0
  10. package/manifests/nav-link.json +136 -0
  11. package/package.json +1 -1
  12. package/skra/_comp.scss +102 -2
  13. package/skra/_density.comfortable.scss +12 -0
  14. package/skra/_density.compact.scss +12 -0
  15. package/skra/_theme.dark.scss +60 -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);
@@ -307,6 +351,22 @@
307
351
  --skra-comp-menu-border-style: solid;
308
352
  --skra-comp-menu-focus-ring-width: 0.1875rem;
309
353
  --skra-comp-menu-typography-role: body-medium;
354
+ --skra-comp-nav-link-foreground-active: oklch(17.0% 0 0);
355
+ --skra-comp-nav-link-focus-ring-color-hover: oklch(57.0% 0.18 295);
356
+ --skra-comp-nav-link-focus-ring-color-active: oklch(63.0% 0.18 295);
357
+ --skra-comp-nav-link-background-current-hover: oklch(98.0% 0.06 100);
358
+ --skra-comp-nav-link-background-current-active: oklch(98.0% 0.06 100);
359
+ --skra-comp-nav-link-foreground-current-hover: oklch(62.0% 0.11 98);
360
+ --skra-comp-nav-link-foreground-current-active: oklch(68.0% 0.11 98);
361
+ --skra-comp-nav-link-border-color-current-hover: oklch(12.0% 0 0);
362
+ --skra-comp-nav-link-border-color-current-active: oklch(18.0% 0 0);
363
+ --skra-comp-nav-link-background: transparent;
364
+ --skra-comp-nav-link-border-color: transparent;
365
+ --skra-comp-nav-link-border-width: 0rem;
366
+ --skra-comp-nav-link-border-style: solid;
367
+ --skra-comp-nav-link-shadow: none;
368
+ --skra-comp-nav-link-focus-ring-width: 0.125rem;
369
+ --skra-comp-nav-link-border-width-current: 0.1875rem;
310
370
  --skra-comp-popover-background-hover: oklch(85.0% 0.015 95);
311
371
  --skra-comp-popover-background-active: oklch(79.0% 0.015 95);
312
372
  --skra-comp-popover-foreground-hover: oklch(12.0% 0 0);
@@ -423,6 +483,7 @@
423
483
  --skra-comp-surface-border-style: solid;
424
484
  --skra-comp-surface-focus-ring-width: 0.1875rem;
425
485
  --skra-comp-surface-border-width-selected: 0.375rem;
486
+ --skra-comp-surface-link-text-decoration: none;
426
487
  --skra-comp-tabs-foreground-hover: oklch(47.0% 0 0);
427
488
  --skra-comp-tabs-foreground-active: oklch(53.0% 0 0);
428
489
  --skra-comp-tabs-focus-ring-color-hover: oklch(57.0% 0.18 295);
@@ -535,12 +596,16 @@
535
596
  --skra-comp-field-switch-track-radius: var(--skra-sys-radius-sm);
536
597
  --skra-comp-field-temporal-min-block-size: var(--skra-sys-size-interactive-md);
537
598
  --skra-comp-field-temporal-indicator-icon-size: var(--skra-sys-icon-size-sm);
599
+ --skra-comp-field-file-action-radius: var(--skra-sys-radius-sm);
600
+ --skra-comp-field-file-min-block-size: var(--skra-sys-size-interactive-md);
538
601
  --skra-comp-field-radius: var(--skra-sys-radius-sm);
602
+ --skra-comp-file-item-radius: var(--skra-sys-radius-sm);
539
603
  --skra-comp-kbd-radius: var(--skra-sys-radius-none);
540
604
  --skra-comp-kbd-shadow: var(--skra-sys-shadow-sm);
541
605
  --skra-comp-menu-radius: var(--skra-sys-radius-md);
542
606
  --skra-comp-menu-shadow: var(--skra-sys-shadow-lg);
543
607
  --skra-comp-menu-item-min-block-size: var(--skra-sys-size-interactive-md);
608
+ --skra-comp-nav-link-radius: var(--skra-sys-radius-none);
544
609
  --skra-comp-popover-radius: var(--skra-sys-radius-md);
545
610
  --skra-comp-popover-shadow: var(--skra-sys-shadow-lg);
546
611
  --skra-comp-progress-radius: var(--skra-sys-radius-sm);
@@ -758,6 +823,20 @@
758
823
  --skra-comp-field-select-optgroup-foreground: var(--skra-sys-color-on-surface);
759
824
  --skra-comp-field-temporal-indicator-padding-inline-end: var(--skra-sys-spacing-6);
760
825
  --skra-comp-field-temporal-indicator-color: var(--skra-sys-color-on-surface);
826
+ --skra-comp-field-file-action-background: var(--skra-sys-color-neutral-soft);
827
+ --skra-comp-field-file-action-foreground: var(--skra-sys-color-neutral-strong);
828
+ --skra-comp-field-file-action-border-color: var(--skra-sys-color-border);
829
+ --skra-comp-field-file-action-padding-block: var(--skra-sys-spacing-1);
830
+ --skra-comp-field-file-action-padding-inline: var(--skra-sys-spacing-3);
831
+ --skra-comp-field-file-status-color: var(--skra-sys-color-on-surface);
832
+ --skra-comp-field-file-instruction-color: var(--skra-sys-color-hint);
833
+ --skra-comp-field-file-gap: var(--skra-sys-spacing-3);
834
+ --skra-comp-field-file-background-dragover: var(--skra-sys-color-primary-soft);
835
+ --skra-comp-field-file-foreground-dragover: var(--skra-sys-color-primary-strong);
836
+ --skra-comp-field-file-border-color-dragover: var(--skra-sys-color-primary-border);
837
+ --skra-comp-field-file-zone-padding-block: var(--skra-sys-spacing-6);
838
+ --skra-comp-field-file-zone-padding-inline: var(--skra-sys-spacing-6);
839
+ --skra-comp-field-file-zone-gap: var(--skra-sys-spacing-2);
761
840
  --skra-comp-field-background: var(--skra-sys-color-surface);
762
841
  --skra-comp-field-foreground: var(--skra-sys-color-on-surface);
763
842
  --skra-comp-field-border-color: var(--skra-sys-color-border);
@@ -774,6 +853,18 @@
774
853
  --skra-comp-field-background-readonly: var(--skra-sys-color-surface-raised);
775
854
  --skra-comp-field-border-color-readonly: var(--skra-sys-color-border-subtle);
776
855
  --skra-comp-field-required-color: var(--skra-sys-color-danger-ink);
856
+ --skra-comp-file-item-background: var(--skra-sys-color-surface);
857
+ --skra-comp-file-item-foreground: var(--skra-sys-color-on-surface);
858
+ --skra-comp-file-item-border-color: var(--skra-sys-color-border);
859
+ --skra-comp-file-item-padding-block: var(--skra-sys-spacing-2);
860
+ --skra-comp-file-item-padding-inline: var(--skra-sys-spacing-3);
861
+ --skra-comp-file-item-motion-duration: var(--skra-sys-motion-duration-fast);
862
+ --skra-comp-file-item-motion-easing: var(--skra-sys-motion-easing-standard);
863
+ --skra-comp-file-item-focus-ring-color: var(--skra-sys-color-focus-ring);
864
+ --skra-comp-file-item-gap: var(--skra-sys-spacing-3);
865
+ --skra-comp-file-item-meta-color: var(--skra-sys-color-hint);
866
+ --skra-comp-file-item-error-color: var(--skra-sys-color-danger-ink);
867
+ --skra-comp-file-item-border-color-validation-invalid: var(--skra-sys-color-danger-ink);
777
868
  --skra-comp-kbd-background: var(--skra-sys-color-surface-raised);
778
869
  --skra-comp-kbd-foreground: var(--skra-sys-color-on-surface);
779
870
  --skra-comp-kbd-border-color: var(--skra-sys-color-border);
@@ -806,6 +897,17 @@
806
897
  --skra-comp-menu-item-padding-block: var(--skra-sys-spacing-2);
807
898
  --skra-comp-menu-item-padding-inline: var(--skra-sys-spacing-3);
808
899
  --skra-comp-menu-item-gap: var(--skra-sys-spacing-2);
900
+ --skra-comp-nav-link-foreground: var(--skra-sys-color-on-surface-subtle);
901
+ --skra-comp-nav-link-padding-block: var(--skra-sys-spacing-2);
902
+ --skra-comp-nav-link-padding-inline: var(--skra-sys-spacing-4);
903
+ --skra-comp-nav-link-motion-duration: var(--skra-sys-motion-duration-fast);
904
+ --skra-comp-nav-link-motion-easing: var(--skra-sys-motion-easing-standard);
905
+ --skra-comp-nav-link-focus-ring-color: var(--skra-sys-color-focus-ring);
906
+ --skra-comp-nav-link-background-hover: var(--skra-sys-color-surface-hover);
907
+ --skra-comp-nav-link-foreground-hover: var(--skra-sys-color-on-surface-strong);
908
+ --skra-comp-nav-link-background-current: var(--skra-sys-color-primary-soft);
909
+ --skra-comp-nav-link-foreground-current: var(--skra-sys-color-primary-strong);
910
+ --skra-comp-nav-link-border-color-current: var(--skra-sys-color-border);
809
911
  --skra-comp-popover-background: var(--skra-sys-color-surface);
810
912
  --skra-comp-popover-foreground: var(--skra-sys-color-on-surface);
811
913
  --skra-comp-popover-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);
@@ -124,6 +134,8 @@
124
134
  --skra-comp-menu-item-padding-inline: var(--skra-sys-spacing-3);
125
135
  --skra-comp-menu-item-gap: var(--skra-sys-spacing-2);
126
136
  --skra-comp-menu-item-min-block-size: var(--skra-sys-size-interactive-md);
137
+ --skra-comp-nav-link-padding-block: var(--skra-sys-spacing-2);
138
+ --skra-comp-nav-link-padding-inline: var(--skra-sys-spacing-4);
127
139
  --skra-comp-popover-padding-block: var(--skra-sys-spacing-3);
128
140
  --skra-comp-popover-padding-inline: var(--skra-sys-spacing-3);
129
141
  --skra-comp-popover-max-inline-size: var(--skra-sys-size-container-sm);
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);
@@ -124,6 +134,8 @@
124
134
  --skra-comp-menu-item-padding-inline: var(--skra-sys-spacing-3);
125
135
  --skra-comp-menu-item-gap: var(--skra-sys-spacing-2);
126
136
  --skra-comp-menu-item-min-block-size: var(--skra-sys-size-interactive-md);
137
+ --skra-comp-nav-link-padding-block: var(--skra-sys-spacing-2);
138
+ --skra-comp-nav-link-padding-inline: var(--skra-sys-spacing-4);
127
139
  --skra-comp-popover-padding-block: var(--skra-sys-spacing-3);
128
140
  --skra-comp-popover-padding-inline: var(--skra-sys-spacing-3);
129
141
  --skra-comp-popover-max-inline-size: var(--skra-sys-size-container-sm);
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);
@@ -124,6 +134,8 @@
124
134
  --skra-comp-menu-item-padding-inline: var(--skra-sys-spacing-3);
125
135
  --skra-comp-menu-item-gap: var(--skra-sys-spacing-2);
126
136
  --skra-comp-menu-item-min-block-size: var(--skra-sys-size-interactive-md);
137
+ --skra-comp-nav-link-padding-block: var(--skra-sys-spacing-2);
138
+ --skra-comp-nav-link-padding-inline: var(--skra-sys-spacing-4);
127
139
  --skra-comp-popover-padding-block: var(--skra-sys-spacing-3);
128
140
  --skra-comp-popover-padding-inline: var(--skra-sys-spacing-3);
129
141
  --skra-comp-popover-max-inline-size: var(--skra-sys-size-container-sm);
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);
@@ -124,6 +134,8 @@
124
134
  --skra-comp-menu-item-padding-inline: var(--skra-sys-spacing-3);
125
135
  --skra-comp-menu-item-gap: var(--skra-sys-spacing-2);
126
136
  --skra-comp-menu-item-min-block-size: var(--skra-sys-size-interactive-md);
137
+ --skra-comp-nav-link-padding-block: var(--skra-sys-spacing-2);
138
+ --skra-comp-nav-link-padding-inline: var(--skra-sys-spacing-4);
127
139
  --skra-comp-popover-padding-block: var(--skra-sys-spacing-3);
128
140
  --skra-comp-popover-padding-inline: var(--skra-sys-spacing-3);
129
141
  --skra-comp-popover-max-inline-size: var(--skra-sys-size-container-sm);
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);
@@ -387,6 +417,15 @@
387
417
  --skra-comp-menu-focus-ring-color-active: oklch(42.0% 0.162 295);
388
418
  --skra-comp-menu-item-foreground-hover: oklch(80.0% 0 0);
389
419
  --skra-comp-menu-item-foreground-active: oklch(74.0% 0 0);
420
+ --skra-comp-nav-link-foreground-active: oklch(83.0% 0 0);
421
+ --skra-comp-nav-link-focus-ring-color-hover: oklch(48.0% 0.162 295);
422
+ --skra-comp-nav-link-focus-ring-color-active: oklch(42.0% 0.162 295);
423
+ --skra-comp-nav-link-background-current-hover: oklch(12.0% 0.06 100);
424
+ --skra-comp-nav-link-background-current-active: oklch(6.0% 0.06 100);
425
+ --skra-comp-nav-link-foreground-current-hover: oklch(53.0% 0.099 98);
426
+ --skra-comp-nav-link-foreground-current-active: oklch(47.0% 0.099 98);
427
+ --skra-comp-nav-link-border-color-current-hover: oklch(80.0% 0 0);
428
+ --skra-comp-nav-link-border-color-current-active: oklch(74.0% 0 0);
390
429
  --skra-comp-popover-background-hover: oklch(27.0% 0 0);
391
430
  --skra-comp-popover-background-active: oklch(33.0% 0 0);
392
431
  --skra-comp-popover-foreground-hover: oklch(80.0% 0 0);
@@ -634,6 +673,21 @@
634
673
  --skra-comp-field-select-option-background: var(--skra-sys-color-surface);
635
674
  --skra-comp-field-select-optgroup-foreground: var(--skra-sys-color-on-surface);
636
675
  --skra-comp-field-temporal-indicator-color: var(--skra-sys-color-on-surface);
676
+ --skra-comp-field-file-action-background: var(--skra-sys-color-neutral-soft);
677
+ --skra-comp-field-file-action-foreground: var(--skra-sys-color-neutral-strong);
678
+ --skra-comp-field-file-action-border-color: var(--skra-sys-color-border);
679
+ --skra-comp-field-file-status-color: var(--skra-sys-color-on-surface);
680
+ --skra-comp-field-file-instruction-color: var(--skra-sys-color-hint);
681
+ --skra-comp-field-file-background-dragover: var(--skra-sys-color-primary-soft);
682
+ --skra-comp-field-file-foreground-dragover: var(--skra-sys-color-primary-strong);
683
+ --skra-comp-field-file-border-color-dragover: var(--skra-sys-color-primary-border);
684
+ --skra-comp-file-item-background: var(--skra-sys-color-surface);
685
+ --skra-comp-file-item-foreground: var(--skra-sys-color-on-surface);
686
+ --skra-comp-file-item-border-color: var(--skra-sys-color-border);
687
+ --skra-comp-file-item-focus-ring-color: var(--skra-sys-color-focus-ring);
688
+ --skra-comp-file-item-meta-color: var(--skra-sys-color-hint);
689
+ --skra-comp-file-item-error-color: var(--skra-sys-color-danger-ink);
690
+ --skra-comp-file-item-border-color-validation-invalid: var(--skra-sys-color-danger-ink);
637
691
  --skra-comp-kbd-background: var(--skra-sys-color-surface-raised);
638
692
  --skra-comp-kbd-foreground: var(--skra-sys-color-on-surface);
639
693
  --skra-comp-kbd-border-color: var(--skra-sys-color-border);
@@ -649,6 +703,13 @@
649
703
  --skra-comp-menu-item-foreground: var(--skra-sys-color-on-surface);
650
704
  --skra-comp-menu-item-background-hover: var(--skra-sys-color-surface-hover);
651
705
  --skra-comp-menu-item-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
706
+ --skra-comp-nav-link-foreground: var(--skra-sys-color-on-surface-subtle);
707
+ --skra-comp-nav-link-focus-ring-color: var(--skra-sys-color-focus-ring);
708
+ --skra-comp-nav-link-background-hover: var(--skra-sys-color-surface-hover);
709
+ --skra-comp-nav-link-foreground-hover: var(--skra-sys-color-on-surface-strong);
710
+ --skra-comp-nav-link-background-current: var(--skra-sys-color-primary-soft);
711
+ --skra-comp-nav-link-foreground-current: var(--skra-sys-color-primary-strong);
712
+ --skra-comp-nav-link-border-color-current: var(--skra-sys-color-border);
652
713
  --skra-comp-popover-background: var(--skra-sys-color-surface);
653
714
  --skra-comp-popover-foreground: var(--skra-sys-color-on-surface);
654
715
  --skra-comp-popover-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);
@@ -388,6 +418,15 @@
388
418
  --skra-comp-menu-focus-ring-color-active: oklch(42.0% 0.162 295);
389
419
  --skra-comp-menu-item-foreground-hover: oklch(80.0% 0 0);
390
420
  --skra-comp-menu-item-foreground-active: oklch(74.0% 0 0);
421
+ --skra-comp-nav-link-foreground-active: oklch(83.0% 0 0);
422
+ --skra-comp-nav-link-focus-ring-color-hover: oklch(48.0% 0.162 295);
423
+ --skra-comp-nav-link-focus-ring-color-active: oklch(42.0% 0.162 295);
424
+ --skra-comp-nav-link-background-current-hover: oklch(12.0% 0.06 100);
425
+ --skra-comp-nav-link-background-current-active: oklch(6.0% 0.06 100);
426
+ --skra-comp-nav-link-foreground-current-hover: oklch(53.0% 0.099 98);
427
+ --skra-comp-nav-link-foreground-current-active: oklch(47.0% 0.099 98);
428
+ --skra-comp-nav-link-border-color-current-hover: oklch(80.0% 0 0);
429
+ --skra-comp-nav-link-border-color-current-active: oklch(74.0% 0 0);
391
430
  --skra-comp-popover-background-hover: oklch(27.0% 0 0);
392
431
  --skra-comp-popover-background-active: oklch(33.0% 0 0);
393
432
  --skra-comp-popover-foreground-hover: oklch(80.0% 0 0);
@@ -635,6 +674,21 @@
635
674
  --skra-comp-field-select-option-background: var(--skra-sys-color-surface);
636
675
  --skra-comp-field-select-optgroup-foreground: var(--skra-sys-color-on-surface);
637
676
  --skra-comp-field-temporal-indicator-color: var(--skra-sys-color-on-surface);
677
+ --skra-comp-field-file-action-background: var(--skra-sys-color-neutral-soft);
678
+ --skra-comp-field-file-action-foreground: var(--skra-sys-color-neutral-strong);
679
+ --skra-comp-field-file-action-border-color: var(--skra-sys-color-border);
680
+ --skra-comp-field-file-status-color: var(--skra-sys-color-on-surface);
681
+ --skra-comp-field-file-instruction-color: var(--skra-sys-color-hint);
682
+ --skra-comp-field-file-background-dragover: var(--skra-sys-color-primary-soft);
683
+ --skra-comp-field-file-foreground-dragover: var(--skra-sys-color-primary-strong);
684
+ --skra-comp-field-file-border-color-dragover: var(--skra-sys-color-primary-border);
685
+ --skra-comp-file-item-background: var(--skra-sys-color-surface);
686
+ --skra-comp-file-item-foreground: var(--skra-sys-color-on-surface);
687
+ --skra-comp-file-item-border-color: var(--skra-sys-color-border);
688
+ --skra-comp-file-item-focus-ring-color: var(--skra-sys-color-focus-ring);
689
+ --skra-comp-file-item-meta-color: var(--skra-sys-color-hint);
690
+ --skra-comp-file-item-error-color: var(--skra-sys-color-danger-ink);
691
+ --skra-comp-file-item-border-color-validation-invalid: var(--skra-sys-color-danger-ink);
638
692
  --skra-comp-kbd-background: var(--skra-sys-color-surface-raised);
639
693
  --skra-comp-kbd-foreground: var(--skra-sys-color-on-surface);
640
694
  --skra-comp-kbd-border-color: var(--skra-sys-color-border);
@@ -650,6 +704,13 @@
650
704
  --skra-comp-menu-item-foreground: var(--skra-sys-color-on-surface);
651
705
  --skra-comp-menu-item-background-hover: var(--skra-sys-color-surface-hover);
652
706
  --skra-comp-menu-item-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
707
+ --skra-comp-nav-link-foreground: var(--skra-sys-color-on-surface-subtle);
708
+ --skra-comp-nav-link-focus-ring-color: var(--skra-sys-color-focus-ring);
709
+ --skra-comp-nav-link-background-hover: var(--skra-sys-color-surface-hover);
710
+ --skra-comp-nav-link-foreground-hover: var(--skra-sys-color-on-surface-strong);
711
+ --skra-comp-nav-link-background-current: var(--skra-sys-color-primary-soft);
712
+ --skra-comp-nav-link-foreground-current: var(--skra-sys-color-primary-strong);
713
+ --skra-comp-nav-link-border-color-current: var(--skra-sys-color-border);
653
714
  --skra-comp-popover-background: var(--skra-sys-color-surface);
654
715
  --skra-comp-popover-foreground: var(--skra-sys-color-on-surface);
655
716
  --skra-comp-popover-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);
@@ -448,6 +492,22 @@
448
492
  --skra-comp-menu-border-style: solid;
449
493
  --skra-comp-menu-focus-ring-width: 0.1875rem;
450
494
  --skra-comp-menu-typography-role: body-medium;
495
+ --skra-comp-nav-link-foreground-active: oklch(17.0% 0 0);
496
+ --skra-comp-nav-link-focus-ring-color-hover: oklch(57.0% 0.18 295);
497
+ --skra-comp-nav-link-focus-ring-color-active: oklch(63.0% 0.18 295);
498
+ --skra-comp-nav-link-background-current-hover: oklch(98.0% 0.06 100);
499
+ --skra-comp-nav-link-background-current-active: oklch(98.0% 0.06 100);
500
+ --skra-comp-nav-link-foreground-current-hover: oklch(62.0% 0.11 98);
501
+ --skra-comp-nav-link-foreground-current-active: oklch(68.0% 0.11 98);
502
+ --skra-comp-nav-link-border-color-current-hover: oklch(12.0% 0 0);
503
+ --skra-comp-nav-link-border-color-current-active: oklch(18.0% 0 0);
504
+ --skra-comp-nav-link-background: rgba(0, 0, 0, 0);
505
+ --skra-comp-nav-link-border-color: rgba(0, 0, 0, 0);
506
+ --skra-comp-nav-link-border-width: 0rem;
507
+ --skra-comp-nav-link-border-style: solid;
508
+ --skra-comp-nav-link-shadow: none;
509
+ --skra-comp-nav-link-focus-ring-width: 0.125rem;
510
+ --skra-comp-nav-link-border-width-current: 0.1875rem;
451
511
  --skra-comp-popover-background-hover: oklch(85.0% 0.015 95);
452
512
  --skra-comp-popover-background-active: oklch(79.0% 0.015 95);
453
513
  --skra-comp-popover-foreground-hover: oklch(12.0% 0 0);
@@ -564,6 +624,7 @@
564
624
  --skra-comp-surface-border-style: solid;
565
625
  --skra-comp-surface-focus-ring-width: 0.1875rem;
566
626
  --skra-comp-surface-border-width-selected: 0.375rem;
627
+ --skra-comp-surface-link-text-decoration: none;
567
628
  --skra-comp-tabs-foreground-hover: oklch(47.0% 0 0);
568
629
  --skra-comp-tabs-foreground-active: oklch(53.0% 0 0);
569
630
  --skra-comp-tabs-focus-ring-color-hover: oklch(57.0% 0.18 295);
@@ -839,12 +900,16 @@
839
900
  --skra-comp-field-switch-track-radius: var(--skra-sys-radius-sm);
840
901
  --skra-comp-field-temporal-min-block-size: var(--skra-sys-size-interactive-md);
841
902
  --skra-comp-field-temporal-indicator-icon-size: var(--skra-sys-icon-size-sm);
903
+ --skra-comp-field-file-action-radius: var(--skra-sys-radius-sm);
904
+ --skra-comp-field-file-min-block-size: var(--skra-sys-size-interactive-md);
842
905
  --skra-comp-field-radius: var(--skra-sys-radius-sm);
906
+ --skra-comp-file-item-radius: var(--skra-sys-radius-sm);
843
907
  --skra-comp-kbd-radius: var(--skra-sys-radius-none);
844
908
  --skra-comp-kbd-shadow: var(--skra-sys-shadow-sm);
845
909
  --skra-comp-menu-radius: var(--skra-sys-radius-md);
846
910
  --skra-comp-menu-shadow: var(--skra-sys-shadow-lg);
847
911
  --skra-comp-menu-item-min-block-size: var(--skra-sys-size-interactive-md);
912
+ --skra-comp-nav-link-radius: var(--skra-sys-radius-none);
848
913
  --skra-comp-popover-radius: var(--skra-sys-radius-md);
849
914
  --skra-comp-popover-shadow: var(--skra-sys-shadow-lg);
850
915
  --skra-comp-progress-radius: var(--skra-sys-radius-sm);
@@ -1062,6 +1127,20 @@
1062
1127
  --skra-comp-field-select-optgroup-foreground: var(--skra-sys-color-on-surface);
1063
1128
  --skra-comp-field-temporal-indicator-padding-inline-end: var(--skra-sys-spacing-6);
1064
1129
  --skra-comp-field-temporal-indicator-color: var(--skra-sys-color-on-surface);
1130
+ --skra-comp-field-file-action-background: var(--skra-sys-color-neutral-soft);
1131
+ --skra-comp-field-file-action-foreground: var(--skra-sys-color-neutral-strong);
1132
+ --skra-comp-field-file-action-border-color: var(--skra-sys-color-border);
1133
+ --skra-comp-field-file-action-padding-block: var(--skra-sys-spacing-1);
1134
+ --skra-comp-field-file-action-padding-inline: var(--skra-sys-spacing-3);
1135
+ --skra-comp-field-file-status-color: var(--skra-sys-color-on-surface);
1136
+ --skra-comp-field-file-instruction-color: var(--skra-sys-color-hint);
1137
+ --skra-comp-field-file-gap: var(--skra-sys-spacing-3);
1138
+ --skra-comp-field-file-background-dragover: var(--skra-sys-color-primary-soft);
1139
+ --skra-comp-field-file-foreground-dragover: var(--skra-sys-color-primary-strong);
1140
+ --skra-comp-field-file-border-color-dragover: var(--skra-sys-color-primary-border);
1141
+ --skra-comp-field-file-zone-padding-block: var(--skra-sys-spacing-6);
1142
+ --skra-comp-field-file-zone-padding-inline: var(--skra-sys-spacing-6);
1143
+ --skra-comp-field-file-zone-gap: var(--skra-sys-spacing-2);
1065
1144
  --skra-comp-field-background: var(--skra-sys-color-surface);
1066
1145
  --skra-comp-field-foreground: var(--skra-sys-color-on-surface);
1067
1146
  --skra-comp-field-border-color: var(--skra-sys-color-border);
@@ -1078,6 +1157,18 @@
1078
1157
  --skra-comp-field-background-readonly: var(--skra-sys-color-surface-raised);
1079
1158
  --skra-comp-field-border-color-readonly: var(--skra-sys-color-border-subtle);
1080
1159
  --skra-comp-field-required-color: var(--skra-sys-color-danger-ink);
1160
+ --skra-comp-file-item-background: var(--skra-sys-color-surface);
1161
+ --skra-comp-file-item-foreground: var(--skra-sys-color-on-surface);
1162
+ --skra-comp-file-item-border-color: var(--skra-sys-color-border);
1163
+ --skra-comp-file-item-padding-block: var(--skra-sys-spacing-2);
1164
+ --skra-comp-file-item-padding-inline: var(--skra-sys-spacing-3);
1165
+ --skra-comp-file-item-motion-duration: var(--skra-sys-motion-duration-fast);
1166
+ --skra-comp-file-item-motion-easing: var(--skra-sys-motion-easing-standard);
1167
+ --skra-comp-file-item-focus-ring-color: var(--skra-sys-color-focus-ring);
1168
+ --skra-comp-file-item-gap: var(--skra-sys-spacing-3);
1169
+ --skra-comp-file-item-meta-color: var(--skra-sys-color-hint);
1170
+ --skra-comp-file-item-error-color: var(--skra-sys-color-danger-ink);
1171
+ --skra-comp-file-item-border-color-validation-invalid: var(--skra-sys-color-danger-ink);
1081
1172
  --skra-comp-kbd-background: var(--skra-sys-color-surface-raised);
1082
1173
  --skra-comp-kbd-foreground: var(--skra-sys-color-on-surface);
1083
1174
  --skra-comp-kbd-border-color: var(--skra-sys-color-border);
@@ -1110,6 +1201,17 @@
1110
1201
  --skra-comp-menu-item-padding-block: var(--skra-sys-spacing-2);
1111
1202
  --skra-comp-menu-item-padding-inline: var(--skra-sys-spacing-3);
1112
1203
  --skra-comp-menu-item-gap: var(--skra-sys-spacing-2);
1204
+ --skra-comp-nav-link-foreground: var(--skra-sys-color-on-surface-subtle);
1205
+ --skra-comp-nav-link-padding-block: var(--skra-sys-spacing-2);
1206
+ --skra-comp-nav-link-padding-inline: var(--skra-sys-spacing-4);
1207
+ --skra-comp-nav-link-motion-duration: var(--skra-sys-motion-duration-fast);
1208
+ --skra-comp-nav-link-motion-easing: var(--skra-sys-motion-easing-standard);
1209
+ --skra-comp-nav-link-focus-ring-color: var(--skra-sys-color-focus-ring);
1210
+ --skra-comp-nav-link-background-hover: var(--skra-sys-color-surface-hover);
1211
+ --skra-comp-nav-link-foreground-hover: var(--skra-sys-color-on-surface-strong);
1212
+ --skra-comp-nav-link-background-current: var(--skra-sys-color-primary-soft);
1213
+ --skra-comp-nav-link-foreground-current: var(--skra-sys-color-primary-strong);
1214
+ --skra-comp-nav-link-border-color-current: var(--skra-sys-color-border);
1113
1215
  --skra-comp-popover-background: var(--skra-sys-color-surface);
1114
1216
  --skra-comp-popover-foreground: var(--skra-sys-color-on-surface);
1115
1217
  --skra-comp-popover-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/manifests/nav-link.json ADDED
@@ -0,0 +1,136 @@
1
+ {
2
+ "$schema": "https://skra-ds/schemas/skin-surface.v1.json",
3
+ "component": "nav-link",
4
+ "skraVersion": ">=1.0.0",
5
+ "axes": [
6
+ {
7
+ "token": "--skra-comp-nav-link-background",
8
+ "label": "Nav link \u2014 resting fill (quiet by design: no button container, ADR 0060 R5.2)",
9
+ "group": "Surface",
10
+ "type": "color",
11
+ "states": ["default"],
12
+ "constraint": {
13
+ "oklch": true
14
+ },
15
+ "overridable": ["overlay", "subtree"]
16
+ },
17
+ {
18
+ "token": "--skra-comp-nav-link-foreground",
19
+ "label": "Nav link \u2014 resting label colour",
20
+ "group": "Surface",
21
+ "type": "color",
22
+ "states": ["default"],
23
+ "constraint": {
24
+ "oklch": true
25
+ },
26
+ "overridable": ["overlay", "subtree", "instance"]
27
+ },
28
+ {
29
+ "token": "--skra-comp-nav-link-radius",
30
+ "label": "Nav link \u2014 corner radius (the pill is a skin choice)",
31
+ "group": "Surface",
32
+ "type": "dimension",
33
+ "states": ["default"],
34
+ "constraint": {
35
+ "unit": "rem",
36
+ "min": 0,
37
+ "max": 100
38
+ },
39
+ "overridable": ["overlay", "subtree"]
40
+ },
41
+ {
42
+ "token": "--skra-comp-nav-link-padding-block",
43
+ "label": "Nav link \u2014 block padding",
44
+ "group": "Spacing",
45
+ "type": "dimension",
46
+ "states": ["default"],
47
+ "constraint": {
48
+ "unit": "rem",
49
+ "min": 0,
50
+ "max": 4
51
+ },
52
+ "overridable": ["overlay", "subtree"]
53
+ },
54
+ {
55
+ "token": "--skra-comp-nav-link-padding-inline",
56
+ "label": "Nav link \u2014 inline padding",
57
+ "group": "Spacing",
58
+ "type": "dimension",
59
+ "states": ["default"],
60
+ "constraint": {
61
+ "unit": "rem",
62
+ "min": 0,
63
+ "max": 4
64
+ },
65
+ "overridable": ["overlay", "subtree"]
66
+ },
67
+ {
68
+ "token": "--skra-comp-nav-link-background-hover",
69
+ "label": "Nav link \u2014 fill under the pointer (not on the current item)",
70
+ "group": "State",
71
+ "type": "color",
72
+ "states": ["hover"],
73
+ "constraint": {
74
+ "oklch": true
75
+ },
76
+ "overridable": ["overlay"]
77
+ },
78
+ {
79
+ "token": "--skra-comp-nav-link-foreground-hover",
80
+ "label": "Nav link \u2014 label colour under the pointer",
81
+ "group": "State",
82
+ "type": "color",
83
+ "states": ["hover"],
84
+ "constraint": {
85
+ "oklch": true
86
+ },
87
+ "overridable": ["overlay"]
88
+ },
89
+ {
90
+ "token": "--skra-comp-nav-link-background-current",
91
+ "label": "Nav link \u2014 fill of the current destination (aria-current)",
92
+ "group": "State",
93
+ "type": "color",
94
+ "states": ["current"],
95
+ "constraint": {
96
+ "oklch": true
97
+ },
98
+ "overridable": ["overlay", "subtree"]
99
+ },
100
+ {
101
+ "token": "--skra-comp-nav-link-foreground-current",
102
+ "label": "Nav link \u2014 label colour of the current destination",
103
+ "group": "State",
104
+ "type": "color",
105
+ "states": ["current"],
106
+ "constraint": {
107
+ "oklch": true
108
+ },
109
+ "overridable": ["overlay", "subtree"]
110
+ },
111
+ {
112
+ "token": "--skra-comp-nav-link-border-color-current",
113
+ "label": "Nav link \u2014 edge colour of the current destination",
114
+ "group": "State",
115
+ "type": "color",
116
+ "states": ["current"],
117
+ "constraint": {
118
+ "oklch": true
119
+ },
120
+ "overridable": ["overlay", "subtree"]
121
+ },
122
+ {
123
+ "token": "--skra-comp-nav-link-border-width-current",
124
+ "label": "Nav link \u2014 edge width of the current destination (WCAG 1.4.1 non-colour channel \u2014 must differ from the resting width, R-60.1)",
125
+ "group": "State",
126
+ "type": "dimension",
127
+ "states": ["current"],
128
+ "constraint": {
129
+ "unit": "rem",
130
+ "min": 0,
131
+ "max": 0.5
132
+ },
133
+ "overridable": ["overlay", "subtree"]
134
+ }
135
+ ]
136
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skra/tokens",
3
- "version": "0.7.0",
3
+ "version": "0.9.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);
@@ -311,6 +354,22 @@
311
354
  --skra-comp-menu-border-style: solid;
312
355
  --skra-comp-menu-focus-ring-width: 0.125rem;
313
356
  --skra-comp-menu-typography-role: body-medium;
357
+ --skra-comp-nav-link-foreground-active: oklch(24.5% 0 0);
358
+ --skra-comp-nav-link-focus-ring-color-hover: oklch(53.0% 0.15 250);
359
+ --skra-comp-nav-link-focus-ring-color-active: oklch(49.5% 0.15 250);
360
+ --skra-comp-nav-link-background-current-hover: oklch(88.0% 0.04 250);
361
+ --skra-comp-nav-link-background-current-active: oklch(84.5% 0.04 250);
362
+ --skra-comp-nav-link-foreground-current-hover: oklch(42.0% 0.15 250);
363
+ --skra-comp-nav-link-foreground-current-active: oklch(45.5% 0.15 250);
364
+ --skra-comp-nav-link-border-color-current-hover: oklch(45.0% 0.15 250);
365
+ --skra-comp-nav-link-border-color-current-active: oklch(41.5% 0.15 250);
366
+ --skra-comp-nav-link-background: transparent;
367
+ --skra-comp-nav-link-border-color: transparent;
368
+ --skra-comp-nav-link-border-width: 0rem;
369
+ --skra-comp-nav-link-border-style: solid;
370
+ --skra-comp-nav-link-shadow: none;
371
+ --skra-comp-nav-link-focus-ring-width: 0.125rem;
372
+ --skra-comp-nav-link-border-width-current: 0.0625rem;
314
373
  --skra-comp-popover-background-hover: oklch(93.0% 0 0);
315
374
  --skra-comp-popover-background-active: oklch(89.5% 0 0);
316
375
  --skra-comp-popover-foreground-hover: oklch(7.0% 0 0);
@@ -429,6 +488,7 @@
429
488
  --skra-comp-surface-border-style: solid;
430
489
  --skra-comp-surface-focus-ring-width: 0.125rem;
431
490
  --skra-comp-surface-border-width-selected: 0.125rem;
491
+ --skra-comp-surface-link-text-decoration: none;
432
492
  --skra-comp-tabs-foreground-hover: oklch(42.0% 0 0);
433
493
  --skra-comp-tabs-foreground-active: oklch(45.5% 0 0);
434
494
  --skra-comp-tabs-focus-ring-color-hover: oklch(53.0% 0.15 250);
@@ -523,6 +583,7 @@
523
583
  --skra-comp-dialog-shadow: var(--skra-sys-shadow-xl);
524
584
  --skra-comp-field-temporal-min-block-size: var(--skra-sys-size-interactive-md);
525
585
  --skra-comp-field-temporal-indicator-icon-size: var(--skra-sys-icon-size-sm);
586
+ --skra-comp-field-file-min-block-size: var(--skra-sys-size-interactive-md);
526
587
  --skra-comp-menu-shadow: var(--skra-sys-shadow-lg);
527
588
  --skra-comp-menu-item-min-block-size: var(--skra-sys-size-interactive-md);
528
589
  --skra-comp-popover-shadow: var(--skra-sys-shadow-lg);
@@ -740,6 +801,20 @@
740
801
  --skra-comp-field-select-optgroup-foreground: var(--skra-sys-color-on-surface);
741
802
  --skra-comp-field-temporal-indicator-padding-inline-end: var(--skra-sys-spacing-6);
742
803
  --skra-comp-field-temporal-indicator-color: var(--skra-sys-color-on-surface);
804
+ --skra-comp-field-file-action-background: var(--skra-sys-color-neutral-soft);
805
+ --skra-comp-field-file-action-foreground: var(--skra-sys-color-neutral-strong);
806
+ --skra-comp-field-file-action-radius: var(--skra-sys-radius-sm);
807
+ --skra-comp-field-file-action-padding-block: var(--skra-sys-spacing-1);
808
+ --skra-comp-field-file-action-padding-inline: var(--skra-sys-spacing-3);
809
+ --skra-comp-field-file-status-color: var(--skra-sys-color-on-surface);
810
+ --skra-comp-field-file-instruction-color: var(--skra-sys-color-hint);
811
+ --skra-comp-field-file-gap: var(--skra-sys-spacing-3);
812
+ --skra-comp-field-file-background-dragover: var(--skra-sys-color-primary-soft);
813
+ --skra-comp-field-file-foreground-dragover: var(--skra-sys-color-primary-strong);
814
+ --skra-comp-field-file-border-color-dragover: var(--skra-sys-color-primary-border);
815
+ --skra-comp-field-file-zone-padding-block: var(--skra-sys-spacing-6);
816
+ --skra-comp-field-file-zone-padding-inline: var(--skra-sys-spacing-6);
817
+ --skra-comp-field-file-zone-gap: var(--skra-sys-spacing-2);
743
818
  --skra-comp-field-background: var(--skra-sys-color-surface);
744
819
  --skra-comp-field-foreground: var(--skra-sys-color-on-surface);
745
820
  --skra-comp-field-border-color: var(--skra-sys-color-border);
@@ -757,6 +832,19 @@
757
832
  --skra-comp-field-background-readonly: var(--skra-sys-color-surface-raised);
758
833
  --skra-comp-field-border-color-readonly: var(--skra-sys-color-border-subtle);
759
834
  --skra-comp-field-required-color: var(--skra-sys-color-danger-ink);
835
+ --skra-comp-file-item-background: var(--skra-sys-color-surface);
836
+ --skra-comp-file-item-foreground: var(--skra-sys-color-on-surface);
837
+ --skra-comp-file-item-border-color: var(--skra-sys-color-border-subtle);
838
+ --skra-comp-file-item-radius: var(--skra-sys-radius-sm);
839
+ --skra-comp-file-item-padding-block: var(--skra-sys-spacing-2);
840
+ --skra-comp-file-item-padding-inline: var(--skra-sys-spacing-3);
841
+ --skra-comp-file-item-motion-duration: var(--skra-sys-motion-duration-fast);
842
+ --skra-comp-file-item-motion-easing: var(--skra-sys-motion-easing-standard);
843
+ --skra-comp-file-item-focus-ring-color: var(--skra-sys-color-focus-ring);
844
+ --skra-comp-file-item-gap: var(--skra-sys-spacing-3);
845
+ --skra-comp-file-item-meta-color: var(--skra-sys-color-hint);
846
+ --skra-comp-file-item-error-color: var(--skra-sys-color-danger-ink);
847
+ --skra-comp-file-item-border-color-validation-invalid: var(--skra-sys-color-danger-ink);
760
848
  --skra-comp-kbd-background: var(--skra-sys-color-surface-raised);
761
849
  --skra-comp-kbd-foreground: var(--skra-sys-color-on-surface);
762
850
  --skra-comp-kbd-border-color: var(--skra-sys-color-border-subtle);
@@ -791,6 +879,18 @@
791
879
  --skra-comp-menu-item-padding-block: var(--skra-sys-spacing-2);
792
880
  --skra-comp-menu-item-padding-inline: var(--skra-sys-spacing-3);
793
881
  --skra-comp-menu-item-gap: var(--skra-sys-spacing-2);
882
+ --skra-comp-nav-link-foreground: var(--skra-sys-color-on-surface-subtle);
883
+ --skra-comp-nav-link-radius: var(--skra-sys-radius-full);
884
+ --skra-comp-nav-link-padding-block: var(--skra-sys-spacing-2);
885
+ --skra-comp-nav-link-padding-inline: var(--skra-sys-spacing-4);
886
+ --skra-comp-nav-link-motion-duration: var(--skra-sys-motion-duration-fast);
887
+ --skra-comp-nav-link-motion-easing: var(--skra-sys-motion-easing-standard);
888
+ --skra-comp-nav-link-focus-ring-color: var(--skra-sys-color-focus-ring);
889
+ --skra-comp-nav-link-background-hover: var(--skra-sys-color-surface-hover);
890
+ --skra-comp-nav-link-foreground-hover: var(--skra-sys-color-on-surface-strong);
891
+ --skra-comp-nav-link-background-current: var(--skra-sys-color-primary-soft);
892
+ --skra-comp-nav-link-foreground-current: var(--skra-sys-color-primary-strong);
893
+ --skra-comp-nav-link-border-color-current: var(--skra-sys-color-primary-border);
794
894
  --skra-comp-popover-background: var(--skra-sys-color-surface);
795
895
  --skra-comp-popover-foreground: var(--skra-sys-color-on-surface);
796
896
  --skra-comp-popover-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);
@@ -124,6 +134,8 @@
124
134
  --skra-comp-menu-item-padding-inline: var(--skra-sys-spacing-3);
125
135
  --skra-comp-menu-item-gap: var(--skra-sys-spacing-2);
126
136
  --skra-comp-menu-item-min-block-size: var(--skra-sys-size-interactive-md);
137
+ --skra-comp-nav-link-padding-block: var(--skra-sys-spacing-2);
138
+ --skra-comp-nav-link-padding-inline: var(--skra-sys-spacing-4);
127
139
  --skra-comp-popover-padding-block: var(--skra-sys-spacing-3);
128
140
  --skra-comp-popover-padding-inline: var(--skra-sys-spacing-3);
129
141
  --skra-comp-popover-max-inline-size: var(--skra-sys-size-container-sm);
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);
@@ -124,6 +134,8 @@
124
134
  --skra-comp-menu-item-padding-inline: var(--skra-sys-spacing-3);
125
135
  --skra-comp-menu-item-gap: var(--skra-sys-spacing-2);
126
136
  --skra-comp-menu-item-min-block-size: var(--skra-sys-size-interactive-md);
137
+ --skra-comp-nav-link-padding-block: var(--skra-sys-spacing-2);
138
+ --skra-comp-nav-link-padding-inline: var(--skra-sys-spacing-4);
127
139
  --skra-comp-popover-padding-block: var(--skra-sys-spacing-3);
128
140
  --skra-comp-popover-padding-inline: var(--skra-sys-spacing-3);
129
141
  --skra-comp-popover-max-inline-size: var(--skra-sys-size-container-sm);
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);
@@ -384,6 +412,15 @@
384
412
  --skra-comp-menu-focus-ring-color-active: oklch(64.5% 0.135 250);
385
413
  --skra-comp-menu-item-foreground-hover: oklch(85.0% 0 0);
386
414
  --skra-comp-menu-item-foreground-active: oklch(81.5% 0 0);
415
+ --skra-comp-nav-link-foreground-active: oklch(75.5% 0 0);
416
+ --skra-comp-nav-link-focus-ring-color-hover: oklch(68.0% 0.135 250);
417
+ --skra-comp-nav-link-focus-ring-color-active: oklch(64.5% 0.135 250);
418
+ --skra-comp-nav-link-background-current-hover: oklch(17.0% 0.04 250);
419
+ --skra-comp-nav-link-background-current-active: oklch(13.5% 0.04 250);
420
+ --skra-comp-nav-link-foreground-current-hover: oklch(55.0% 0.135 250);
421
+ --skra-comp-nav-link-foreground-current-active: oklch(51.5% 0.135 250);
422
+ --skra-comp-nav-link-border-color-current-hover: oklch(60.0% 0.135 250);
423
+ --skra-comp-nav-link-border-color-current-active: oklch(56.5% 0.135 250);
387
424
  --skra-comp-popover-background-hover: oklch(22.0% 0 0);
388
425
  --skra-comp-popover-background-active: oklch(25.5% 0 0);
389
426
  --skra-comp-popover-foreground-hover: oklch(85.0% 0 0);
@@ -628,6 +665,20 @@
628
665
  --skra-comp-field-select-option-background: var(--skra-sys-color-surface);
629
666
  --skra-comp-field-select-optgroup-foreground: var(--skra-sys-color-on-surface);
630
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-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-subtle);
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);
631
682
  --skra-comp-kbd-background: var(--skra-sys-color-surface-raised);
632
683
  --skra-comp-kbd-foreground: var(--skra-sys-color-on-surface);
633
684
  --skra-comp-kbd-border-color: var(--skra-sys-color-border-subtle);
@@ -643,6 +694,13 @@
643
694
  --skra-comp-menu-item-foreground: var(--skra-sys-color-on-surface);
644
695
  --skra-comp-menu-item-background-hover: var(--skra-sys-color-surface-hover);
645
696
  --skra-comp-menu-item-foreground-disabled: var(--skra-sys-color-on-surface-disabled);
697
+ --skra-comp-nav-link-foreground: var(--skra-sys-color-on-surface-subtle);
698
+ --skra-comp-nav-link-focus-ring-color: var(--skra-sys-color-focus-ring);
699
+ --skra-comp-nav-link-background-hover: var(--skra-sys-color-surface-hover);
700
+ --skra-comp-nav-link-foreground-hover: var(--skra-sys-color-on-surface-strong);
701
+ --skra-comp-nav-link-background-current: var(--skra-sys-color-primary-soft);
702
+ --skra-comp-nav-link-foreground-current: var(--skra-sys-color-primary-strong);
703
+ --skra-comp-nav-link-border-color-current: var(--skra-sys-color-primary-border);
646
704
  --skra-comp-popover-background: var(--skra-sys-color-surface);
647
705
  --skra-comp-popover-foreground: var(--skra-sys-color-on-surface);
648
706
  --skra-comp-popover-border-color: var(--skra-sys-color-border-subtle);