@skra/tokens 0.6.0 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/README.md +7 -0
  2. package/brutal/_comp.scss +76 -2
  3. package/brutal/_density.comfortable.scoped.scss +11 -0
  4. package/brutal/_density.comfortable.scss +11 -0
  5. package/brutal/_density.compact.scoped.scss +11 -0
  6. package/brutal/_density.compact.scss +11 -0
  7. package/brutal/_theme.dark.scoped.scss +49 -4
  8. package/brutal/_theme.dark.scss +49 -4
  9. package/brutal/_theme.scoped.scss +76 -2
  10. package/manifests/alert.json +117 -107
  11. package/manifests/button.json +134 -133
  12. package/manifests/chip.json +117 -116
  13. package/manifests/file-item.json +6 -0
  14. package/manifests/toast.json +134 -133
  15. package/package.json +1 -1
  16. package/skra/_comp.scss +74 -2
  17. package/skra/_density.comfortable.scss +11 -0
  18. package/skra/_density.compact.scss +11 -0
  19. package/skra/_theme.dark.scss +44 -2
package/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);
@@ -576,6 +620,7 @@
576
620
  --skra-comp-alert-focus-ring-color: var(--skra-sys-color-focus-ring);
577
621
  --skra-comp-alert-icon-gap: var(--skra-sys-spacing-3);
578
622
  --skra-comp-alert-title-gap: var(--skra-sys-spacing-1);
623
+ --skra-comp-alert-actions-gap: var(--skra-sys-spacing-2);
579
624
  --skra-comp-avatar-background: var(--skra-sys-color-neutral-soft);
580
625
  --skra-comp-avatar-foreground: var(--skra-sys-color-neutral-strong);
581
626
  --skra-comp-avatar-border-color: var(--skra-sys-color-neutral-border);
@@ -739,6 +784,20 @@
739
784
  --skra-comp-field-select-optgroup-foreground: var(--skra-sys-color-on-surface);
740
785
  --skra-comp-field-temporal-indicator-padding-inline-end: var(--skra-sys-spacing-6);
741
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);
742
801
  --skra-comp-field-background: var(--skra-sys-color-surface);
743
802
  --skra-comp-field-foreground: var(--skra-sys-color-on-surface);
744
803
  --skra-comp-field-border-color: var(--skra-sys-color-border);
@@ -756,6 +815,19 @@
756
815
  --skra-comp-field-background-readonly: var(--skra-sys-color-surface-raised);
757
816
  --skra-comp-field-border-color-readonly: var(--skra-sys-color-border-subtle);
758
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);
759
831
  --skra-comp-kbd-background: var(--skra-sys-color-surface-raised);
760
832
  --skra-comp-kbd-foreground: var(--skra-sys-color-on-surface);
761
833
  --skra-comp-kbd-border-color: var(--skra-sys-color-border-subtle);
package/skra/_density.comfortable.scss CHANGED
@@ -34,6 +34,7 @@
34
34
  --skra-comp-alert-padding-inline: var(--skra-sys-spacing-4);
35
35
  --skra-comp-alert-icon-gap: var(--skra-sys-spacing-3);
36
36
  --skra-comp-alert-title-gap: var(--skra-sys-spacing-1);
37
+ --skra-comp-alert-actions-gap: var(--skra-sys-spacing-2);
37
38
  --skra-comp-alert-dismiss-size: var(--skra-sys-size-interactive-sm);
38
39
  --skra-comp-avatar-size-sm: var(--skra-sys-size-avatar-sm);
39
40
  --skra-comp-avatar-size-md: var(--skra-sys-size-avatar-md);
@@ -102,6 +103,16 @@
102
103
  --skra-comp-field-select-arrow-padding-inline-end: var(--skra-sys-spacing-6);
103
104
  --skra-comp-field-temporal-min-block-size: var(--skra-sys-size-interactive-md);
104
105
  --skra-comp-field-temporal-indicator-padding-inline-end: var(--skra-sys-spacing-6);
106
+ --skra-comp-field-file-action-padding-block: var(--skra-sys-spacing-1);
107
+ --skra-comp-field-file-action-padding-inline: var(--skra-sys-spacing-3);
108
+ --skra-comp-field-file-gap: var(--skra-sys-spacing-3);
109
+ --skra-comp-field-file-min-block-size: var(--skra-sys-size-interactive-md);
110
+ --skra-comp-field-file-zone-padding-block: var(--skra-sys-spacing-6);
111
+ --skra-comp-field-file-zone-padding-inline: var(--skra-sys-spacing-6);
112
+ --skra-comp-field-file-zone-gap: var(--skra-sys-spacing-2);
113
+ --skra-comp-file-item-padding-block: var(--skra-sys-spacing-2);
114
+ --skra-comp-file-item-padding-inline: var(--skra-sys-spacing-3);
115
+ --skra-comp-file-item-gap: var(--skra-sys-spacing-3);
105
116
  --skra-comp-grid-gap-sm: var(--skra-sys-spacing-1);
106
117
  --skra-comp-grid-gap-md: var(--skra-sys-spacing-2);
107
118
  --skra-comp-grid-gap-lg: var(--skra-sys-spacing-4);
package/skra/_density.compact.scss CHANGED
@@ -34,6 +34,7 @@
34
34
  --skra-comp-alert-padding-inline: var(--skra-sys-spacing-4);
35
35
  --skra-comp-alert-icon-gap: var(--skra-sys-spacing-3);
36
36
  --skra-comp-alert-title-gap: var(--skra-sys-spacing-1);
37
+ --skra-comp-alert-actions-gap: var(--skra-sys-spacing-2);
37
38
  --skra-comp-alert-dismiss-size: var(--skra-sys-size-interactive-sm);
38
39
  --skra-comp-avatar-size-sm: var(--skra-sys-size-avatar-sm);
39
40
  --skra-comp-avatar-size-md: var(--skra-sys-size-avatar-md);
@@ -102,6 +103,16 @@
102
103
  --skra-comp-field-select-arrow-padding-inline-end: var(--skra-sys-spacing-6);
103
104
  --skra-comp-field-temporal-min-block-size: var(--skra-sys-size-interactive-md);
104
105
  --skra-comp-field-temporal-indicator-padding-inline-end: var(--skra-sys-spacing-6);
106
+ --skra-comp-field-file-action-padding-block: var(--skra-sys-spacing-1);
107
+ --skra-comp-field-file-action-padding-inline: var(--skra-sys-spacing-3);
108
+ --skra-comp-field-file-gap: var(--skra-sys-spacing-3);
109
+ --skra-comp-field-file-min-block-size: var(--skra-sys-size-interactive-md);
110
+ --skra-comp-field-file-zone-padding-block: var(--skra-sys-spacing-6);
111
+ --skra-comp-field-file-zone-padding-inline: var(--skra-sys-spacing-6);
112
+ --skra-comp-field-file-zone-gap: var(--skra-sys-spacing-2);
113
+ --skra-comp-file-item-padding-block: var(--skra-sys-spacing-2);
114
+ --skra-comp-file-item-padding-inline: var(--skra-sys-spacing-3);
115
+ --skra-comp-file-item-gap: var(--skra-sys-spacing-3);
105
116
  --skra-comp-grid-gap-sm: var(--skra-sys-spacing-1);
106
117
  --skra-comp-grid-gap-md: var(--skra-sys-spacing-2);
107
118
  --skra-comp-grid-gap-lg: var(--skra-sys-spacing-4);
package/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);