@slotted/themes 0.1.0-beta.2 → 0.1.0-beta.4

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 (3) hide show
  1. package/dist/default.css +192 -0
  2. package/dist/default.js +120 -0
  3. package/package.json +3 -3
package/dist/default.css CHANGED
@@ -79,6 +79,8 @@
79
79
  --slotted-line-height-2xl: 1.4;
80
80
  --slotted-line-height-3xl: 1.3;
81
81
  --slotted-line-height-4xl: 1.2;
82
+ --slotted-letter-spacing-tight: -0.02em;
83
+ --slotted-letter-spacing-tighter: -0.03em;
82
84
  --slotted-font-weight-regular: 400;
83
85
  --slotted-font-weight-medium: 500;
84
86
  --slotted-font-weight-semibold: 600;
@@ -138,6 +140,7 @@
138
140
  --slotted-selection-size-lg: 18px;
139
141
  --slotted-selection-halo-opacity: 0.12;
140
142
  --slotted-highlight-tint-opacity: 0.075;
143
+ --slotted-material-backdrop: saturate(1.6) blur(20px);
141
144
  --slotted-icon-loader-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-6.219-8.56'/%3E%3C/svg%3E");
142
145
  --slotted-icon-ellipsis: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='19' cy='12' r='1'/%3E%3Ccircle cx='5' cy='12' r='1'/%3E%3C/svg%3E");
143
146
  --slotted-icon-maximize: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3'/%3E%3Cpath d='M21 8V5a2 2 0 0 0-2-2h-3'/%3E%3Cpath d='M3 16v3a2 2 0 0 0 2 2h3'/%3E%3Cpath d='M16 21h3a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E");
@@ -248,6 +251,17 @@
248
251
  --slotted-surface-raised: oklch(from var(--slotted-seed-neutral) 0.985 min(calc(c * 0.22), 0.006) h);
249
252
  --slotted-surface-sunken: oklch(from var(--slotted-seed-neutral) 0.97 min(calc(c * 0.22), 0.012) h);
250
253
  --slotted-surface-inverse: oklch(from var(--slotted-seed-neutral) 0.245 min(calc(c * 0.952), 0.041) h);
254
+ --slotted-tone-neutral-solid: var(--slotted-surface-inverse);
255
+ --slotted-tone-neutral-solid-hover: var(--slotted-surface-inverse-hover);
256
+ --slotted-tone-neutral-solid-active: var(--slotted-surface-inverse-active);
257
+ --slotted-tone-neutral-on-solid: var(--slotted-text-inverse);
258
+ --slotted-tone-neutral-surface: var(--slotted-tone-secondary-surface);
259
+ --slotted-tone-neutral-subtle-hover: var(--slotted-tone-secondary-subtle-hover);
260
+ --slotted-tone-neutral-subtle-active: var(--slotted-tone-secondary-subtle-active);
261
+ --slotted-tone-neutral-border: var(--slotted-border-strong);
262
+ --slotted-tone-neutral-text: var(--slotted-text);
263
+ --slotted-surface-inverse-hover: color-mix(in oklch, var(--slotted-surface-inverse), oklch(from var(--slotted-surface-inverse) clamp(0, calc((0.9 - l) * 1000000), 1) 0 none) 8%);
264
+ --slotted-surface-inverse-active: color-mix(in oklch, var(--slotted-surface-inverse), oklch(from var(--slotted-surface-inverse) clamp(0, calc((0.9 - l) * 1000000), 1) 0 none) 15%);
251
265
  --slotted-text-inverse: oklch(from var(--slotted-seed-neutral) 0.984 min(calc(c * 0.22), 0.007) h);
252
266
  --slotted-border-strong: oklch(from var(--slotted-seed-neutral) 0.623 min(calc(c * 0.857), 0.06) h);
253
267
  --slotted-control-border-color: oklch(from var(--slotted-seed-neutral) 0.826 min(calc(c * 0.406), 0.06) h);
@@ -257,6 +271,10 @@
257
271
  --slotted-shadow-md: 0 4px 6px -1px rgb(15 23 42 / 0.08), 0 2px 4px -2px rgb(15 23 42 / 0.08);
258
272
  --slotted-shadow-lg: 0 10px 15px -3px rgb(15 23 42 / 0.10), 0 4px 6px -4px rgb(15 23 42 / 0.08);
259
273
  --slotted-current-edge: transparent;
274
+ --slotted-state-hover: color-mix(in oklab, var(--slotted-text) 5%, transparent);
275
+ --slotted-state-pressed: color-mix(in oklab, var(--slotted-text) 10%, transparent);
276
+ --slotted-state-selected: color-mix(in oklab, var(--slotted-text) 8%, transparent);
277
+ --slotted-surface-material: color-mix(in oklab, var(--slotted-surface) 72%, transparent);
260
278
  --slotted-control-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
261
279
  --slotted-scrim: rgb(0 0 0 / 0.41);
262
280
  --slotted-data-1: #2563eb;
@@ -354,6 +372,17 @@
354
372
  --slotted-surface-raised: oklch(from var(--slotted-seed-neutral) 0.205 min(calc(c * 0.22), 0.03) h);
355
373
  --slotted-surface-sunken: oklch(from var(--slotted-seed-neutral) 0.155 min(calc(c * 0.22), 0.025) h);
356
374
  --slotted-surface-inverse: oklch(from var(--slotted-seed-neutral) 0.985 min(calc(c * 0.22), 0.006) h);
375
+ --slotted-tone-neutral-solid: var(--slotted-surface-inverse);
376
+ --slotted-tone-neutral-solid-hover: var(--slotted-surface-inverse-hover);
377
+ --slotted-tone-neutral-solid-active: var(--slotted-surface-inverse-active);
378
+ --slotted-tone-neutral-on-solid: var(--slotted-text-inverse);
379
+ --slotted-tone-neutral-surface: var(--slotted-tone-secondary-surface);
380
+ --slotted-tone-neutral-subtle-hover: var(--slotted-tone-secondary-subtle-hover);
381
+ --slotted-tone-neutral-subtle-active: var(--slotted-tone-secondary-subtle-active);
382
+ --slotted-tone-neutral-border: var(--slotted-border-strong);
383
+ --slotted-tone-neutral-text: var(--slotted-text);
384
+ --slotted-surface-inverse-hover: color-mix(in oklch, var(--slotted-surface-inverse), oklch(from var(--slotted-surface-inverse) clamp(0, calc((0.9 - l) * 1000000), 1) 0 none) 8%);
385
+ --slotted-surface-inverse-active: color-mix(in oklch, var(--slotted-surface-inverse), oklch(from var(--slotted-surface-inverse) clamp(0, calc((0.9 - l) * 1000000), 1) 0 none) 15%);
357
386
  --slotted-text-inverse: oklch(from var(--slotted-seed-neutral) 0.21 min(calc(c * 0.22), 0.035) h);
358
387
  --slotted-border-strong: oklch(from var(--slotted-seed-neutral) 0.552 min(calc(c * 0.339), 0.06) h);
359
388
  --slotted-control-border-color: oklch(from var(--slotted-seed-neutral) 0.378 min(calc(c * 0.332), 0.06) h);
@@ -363,6 +392,10 @@
363
392
  --slotted-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.50), 0 2px 4px -2px rgb(0 0 0 / 0.45);
364
393
  --slotted-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.60), 0 4px 6px -4px rgb(0 0 0 / 0.50);
365
394
  --slotted-current-edge: transparent;
395
+ --slotted-state-hover: color-mix(in oklab, var(--slotted-text) 6%, transparent);
396
+ --slotted-state-pressed: color-mix(in oklab, var(--slotted-text) 12%, transparent);
397
+ --slotted-state-selected: color-mix(in oklab, var(--slotted-text) 10%, transparent);
398
+ --slotted-surface-material: color-mix(in oklab, var(--slotted-surface) 68%, transparent);
366
399
  --slotted-control-shadow: 0 1px 2px rgb(0 0 0 / 0.5);
367
400
  --slotted-scrim: rgb(0 0 0 / 0.62);
368
401
  --slotted-data-1: #2563eb;
@@ -460,6 +493,17 @@
460
493
  --slotted-surface-raised: oklch(from var(--slotted-seed-neutral) 1 min(calc(c * 0), 0) h);
461
494
  --slotted-surface-sunken: oklch(from var(--slotted-seed-neutral) 1 min(calc(c * 0), 0) h);
462
495
  --slotted-surface-inverse: oklch(from var(--slotted-seed-neutral) 0 min(calc(c * 0), 0) h);
496
+ --slotted-tone-neutral-solid: var(--slotted-surface-inverse);
497
+ --slotted-tone-neutral-solid-hover: var(--slotted-surface-inverse-hover);
498
+ --slotted-tone-neutral-solid-active: var(--slotted-surface-inverse-active);
499
+ --slotted-tone-neutral-on-solid: var(--slotted-text-inverse);
500
+ --slotted-tone-neutral-surface: var(--slotted-tone-secondary-surface);
501
+ --slotted-tone-neutral-subtle-hover: var(--slotted-tone-secondary-subtle-hover);
502
+ --slotted-tone-neutral-subtle-active: var(--slotted-tone-secondary-subtle-active);
503
+ --slotted-tone-neutral-border: var(--slotted-border-strong);
504
+ --slotted-tone-neutral-text: var(--slotted-text);
505
+ --slotted-surface-inverse-hover: color-mix(in oklch, var(--slotted-surface-inverse), oklch(from var(--slotted-surface-inverse) clamp(0, calc((0.9 - l) * 1000000), 1) 0 none) 8%);
506
+ --slotted-surface-inverse-active: color-mix(in oklch, var(--slotted-surface-inverse), oklch(from var(--slotted-surface-inverse) clamp(0, calc((0.9 - l) * 1000000), 1) 0 none) 15%);
463
507
  --slotted-text-inverse: oklch(from var(--slotted-seed-neutral) 1 min(calc(c * 0), 0) h);
464
508
  --slotted-border-strong: oklch(from var(--slotted-seed-neutral) 0 min(calc(c * 0), 0) h);
465
509
  --slotted-control-border-color: oklch(from var(--slotted-seed-neutral) 0 min(calc(c * 0), 0) h);
@@ -469,6 +513,10 @@
469
513
  --slotted-shadow-md: 0 0 0 2px #000000;
470
514
  --slotted-shadow-lg: 0 0 0 2px #000000;
471
515
  --slotted-current-edge: #000000;
516
+ --slotted-state-hover: color-mix(in oklab, var(--slotted-text) 10%, transparent);
517
+ --slotted-state-pressed: color-mix(in oklab, var(--slotted-text) 20%, transparent);
518
+ --slotted-state-selected: color-mix(in oklab, var(--slotted-text) 16%, transparent);
519
+ --slotted-surface-material: var(--slotted-surface);
472
520
  --slotted-control-shadow: none;
473
521
  --slotted-scrim: rgb(0 0 0 / 0.75);
474
522
  --slotted-data-1: #1d4ed8;
@@ -566,6 +614,17 @@
566
614
  --slotted-surface-raised: oklch(from var(--slotted-seed-neutral) 0.985 min(calc(c * 0.22), 0.006) h);
567
615
  --slotted-surface-sunken: oklch(from var(--slotted-seed-neutral) 0.97 min(calc(c * 0.22), 0.012) h);
568
616
  --slotted-surface-inverse: oklch(from var(--slotted-seed-neutral) 0.245 min(calc(c * 0.952), 0.041) h);
617
+ --slotted-tone-neutral-solid: var(--slotted-surface-inverse);
618
+ --slotted-tone-neutral-solid-hover: var(--slotted-surface-inverse-hover);
619
+ --slotted-tone-neutral-solid-active: var(--slotted-surface-inverse-active);
620
+ --slotted-tone-neutral-on-solid: var(--slotted-text-inverse);
621
+ --slotted-tone-neutral-surface: var(--slotted-tone-secondary-surface);
622
+ --slotted-tone-neutral-subtle-hover: var(--slotted-tone-secondary-subtle-hover);
623
+ --slotted-tone-neutral-subtle-active: var(--slotted-tone-secondary-subtle-active);
624
+ --slotted-tone-neutral-border: var(--slotted-border-strong);
625
+ --slotted-tone-neutral-text: var(--slotted-text);
626
+ --slotted-surface-inverse-hover: color-mix(in oklch, var(--slotted-surface-inverse), oklch(from var(--slotted-surface-inverse) clamp(0, calc((0.9 - l) * 1000000), 1) 0 none) 8%);
627
+ --slotted-surface-inverse-active: color-mix(in oklch, var(--slotted-surface-inverse), oklch(from var(--slotted-surface-inverse) clamp(0, calc((0.9 - l) * 1000000), 1) 0 none) 15%);
569
628
  --slotted-text-inverse: oklch(from var(--slotted-seed-neutral) 0.984 min(calc(c * 0.22), 0.007) h);
570
629
  --slotted-border-strong: oklch(from var(--slotted-seed-neutral) 0.623 min(calc(c * 0.857), 0.06) h);
571
630
  --slotted-control-border-color: oklch(from var(--slotted-seed-neutral) 0.826 min(calc(c * 0.406), 0.06) h);
@@ -575,6 +634,10 @@
575
634
  --slotted-shadow-md: 0 4px 6px -1px rgb(15 23 42 / 0.08), 0 2px 4px -2px rgb(15 23 42 / 0.08);
576
635
  --slotted-shadow-lg: 0 10px 15px -3px rgb(15 23 42 / 0.10), 0 4px 6px -4px rgb(15 23 42 / 0.08);
577
636
  --slotted-current-edge: transparent;
637
+ --slotted-state-hover: color-mix(in oklab, var(--slotted-text) 5%, transparent);
638
+ --slotted-state-pressed: color-mix(in oklab, var(--slotted-text) 10%, transparent);
639
+ --slotted-state-selected: color-mix(in oklab, var(--slotted-text) 8%, transparent);
640
+ --slotted-surface-material: color-mix(in oklab, var(--slotted-surface) 72%, transparent);
578
641
  --slotted-control-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
579
642
  --slotted-scrim: rgb(0 0 0 / 0.41);
580
643
  --slotted-data-1: #2563eb;
@@ -673,6 +736,17 @@
673
736
  --slotted-surface-raised: oklch(from var(--slotted-seed-neutral) 0.205 min(calc(c * 0.22), 0.03) h);
674
737
  --slotted-surface-sunken: oklch(from var(--slotted-seed-neutral) 0.155 min(calc(c * 0.22), 0.025) h);
675
738
  --slotted-surface-inverse: oklch(from var(--slotted-seed-neutral) 0.985 min(calc(c * 0.22), 0.006) h);
739
+ --slotted-tone-neutral-solid: var(--slotted-surface-inverse);
740
+ --slotted-tone-neutral-solid-hover: var(--slotted-surface-inverse-hover);
741
+ --slotted-tone-neutral-solid-active: var(--slotted-surface-inverse-active);
742
+ --slotted-tone-neutral-on-solid: var(--slotted-text-inverse);
743
+ --slotted-tone-neutral-surface: var(--slotted-tone-secondary-surface);
744
+ --slotted-tone-neutral-subtle-hover: var(--slotted-tone-secondary-subtle-hover);
745
+ --slotted-tone-neutral-subtle-active: var(--slotted-tone-secondary-subtle-active);
746
+ --slotted-tone-neutral-border: var(--slotted-border-strong);
747
+ --slotted-tone-neutral-text: var(--slotted-text);
748
+ --slotted-surface-inverse-hover: color-mix(in oklch, var(--slotted-surface-inverse), oklch(from var(--slotted-surface-inverse) clamp(0, calc((0.9 - l) * 1000000), 1) 0 none) 8%);
749
+ --slotted-surface-inverse-active: color-mix(in oklch, var(--slotted-surface-inverse), oklch(from var(--slotted-surface-inverse) clamp(0, calc((0.9 - l) * 1000000), 1) 0 none) 15%);
676
750
  --slotted-text-inverse: oklch(from var(--slotted-seed-neutral) 0.21 min(calc(c * 0.22), 0.035) h);
677
751
  --slotted-border-strong: oklch(from var(--slotted-seed-neutral) 0.552 min(calc(c * 0.339), 0.06) h);
678
752
  --slotted-control-border-color: oklch(from var(--slotted-seed-neutral) 0.378 min(calc(c * 0.332), 0.06) h);
@@ -682,6 +756,10 @@
682
756
  --slotted-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.50), 0 2px 4px -2px rgb(0 0 0 / 0.45);
683
757
  --slotted-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.60), 0 4px 6px -4px rgb(0 0 0 / 0.50);
684
758
  --slotted-current-edge: transparent;
759
+ --slotted-state-hover: color-mix(in oklab, var(--slotted-text) 6%, transparent);
760
+ --slotted-state-pressed: color-mix(in oklab, var(--slotted-text) 12%, transparent);
761
+ --slotted-state-selected: color-mix(in oklab, var(--slotted-text) 10%, transparent);
762
+ --slotted-surface-material: color-mix(in oklab, var(--slotted-surface) 68%, transparent);
685
763
  --slotted-control-shadow: 0 1px 2px rgb(0 0 0 / 0.5);
686
764
  --slotted-scrim: rgb(0 0 0 / 0.62);
687
765
  --slotted-data-1: #2563eb;
@@ -832,6 +910,45 @@
832
910
  }
833
911
  }
834
912
 
913
+ @media (prefers-reduced-transparency: reduce) {
914
+ [data-slotted-theme="default"] {
915
+ --slotted-surface-material: var(--slotted-surface);
916
+ --slotted-material-backdrop: none;
917
+ }
918
+
919
+ @scope ([data-slotted-theme="default"][data-slotted-scheme="light"], [data-slotted-theme="default"] [data-slotted-scheme="light"], [data-slotted-scheme="light"] [data-slotted-theme="default"]:not([data-slotted-scheme])) to ([data-slotted-scheme], [data-slotted-theme]) {
920
+ :scope,
921
+ [data-slotted-seeds] {
922
+ --slotted-surface-material: var(--slotted-surface);
923
+ --slotted-material-backdrop: none;
924
+ }
925
+ }
926
+
927
+ @scope ([data-slotted-theme="default"][data-slotted-scheme="dark"], [data-slotted-theme="default"] [data-slotted-scheme="dark"], [data-slotted-scheme="dark"] [data-slotted-theme="default"]:not([data-slotted-scheme])) to ([data-slotted-scheme], [data-slotted-theme]) {
928
+ :scope,
929
+ [data-slotted-seeds] {
930
+ --slotted-surface-material: var(--slotted-surface);
931
+ --slotted-material-backdrop: none;
932
+ }
933
+ }
934
+
935
+ @scope ([data-slotted-theme="default"][data-slotted-scheme="high-contrast"], [data-slotted-theme="default"] [data-slotted-scheme="high-contrast"], [data-slotted-scheme="high-contrast"] [data-slotted-theme="default"]:not([data-slotted-scheme])) to ([data-slotted-scheme], [data-slotted-theme]) {
936
+ :scope,
937
+ [data-slotted-seeds] {
938
+ --slotted-surface-material: var(--slotted-surface);
939
+ --slotted-material-backdrop: none;
940
+ }
941
+ }
942
+
943
+ @scope ([data-slotted-theme="default"][data-slotted-scheme="system"], [data-slotted-theme="default"] [data-slotted-scheme="system"], [data-slotted-scheme="system"] [data-slotted-theme="default"]:not([data-slotted-scheme])) to ([data-slotted-scheme], [data-slotted-theme]) {
944
+ :scope,
945
+ [data-slotted-seeds] {
946
+ --slotted-surface-material: var(--slotted-surface);
947
+ --slotted-material-backdrop: none;
948
+ }
949
+ }
950
+ }
951
+
835
952
  @media (forced-colors: active) {
836
953
  [data-slotted-theme="default"] {
837
954
  --slotted-focus-ring-color: Highlight;
@@ -860,6 +977,15 @@
860
977
  --slotted-tone-secondary-text: CanvasText;
861
978
  --slotted-tone-secondary-subtle-hover: Canvas;
862
979
  --slotted-tone-secondary-subtle-active: Canvas;
980
+ --slotted-tone-neutral-solid: CanvasText;
981
+ --slotted-tone-neutral-solid-hover: CanvasText;
982
+ --slotted-tone-neutral-solid-active: CanvasText;
983
+ --slotted-tone-neutral-on-solid: Canvas;
984
+ --slotted-tone-neutral-surface: Canvas;
985
+ --slotted-tone-neutral-subtle-hover: Canvas;
986
+ --slotted-tone-neutral-subtle-active: Canvas;
987
+ --slotted-tone-neutral-border: ButtonBorder;
988
+ --slotted-tone-neutral-text: CanvasText;
863
989
  --slotted-tone-success-solid: ButtonFace;
864
990
  --slotted-tone-success-surface: Canvas;
865
991
  --slotted-tone-success-solid-hover: ButtonFace;
@@ -895,11 +1021,17 @@
895
1021
  --slotted-surface-raised: Canvas;
896
1022
  --slotted-surface-sunken: Canvas;
897
1023
  --slotted-surface-inverse: CanvasText;
1024
+ --slotted-surface-inverse-hover: CanvasText;
1025
+ --slotted-surface-inverse-active: CanvasText;
1026
+ --slotted-surface-material: Canvas;
898
1027
  --slotted-text-inverse: Canvas;
899
1028
  --slotted-border-strong: CanvasText;
900
1029
  --slotted-control-border-color: ButtonBorder;
901
1030
  --slotted-control-surface: Field;
902
1031
  --slotted-current-edge: Highlight;
1032
+ --slotted-state-hover: Canvas;
1033
+ --slotted-state-pressed: Canvas;
1034
+ --slotted-state-selected: Canvas;
903
1035
  --slotted-control-shadow: none;
904
1036
  --slotted-scrim: Canvas;
905
1037
  --slotted-data-1: CanvasText;
@@ -964,6 +1096,15 @@
964
1096
  --slotted-tone-secondary-text: CanvasText;
965
1097
  --slotted-tone-secondary-subtle-hover: Canvas;
966
1098
  --slotted-tone-secondary-subtle-active: Canvas;
1099
+ --slotted-tone-neutral-solid: CanvasText;
1100
+ --slotted-tone-neutral-solid-hover: CanvasText;
1101
+ --slotted-tone-neutral-solid-active: CanvasText;
1102
+ --slotted-tone-neutral-on-solid: Canvas;
1103
+ --slotted-tone-neutral-surface: Canvas;
1104
+ --slotted-tone-neutral-subtle-hover: Canvas;
1105
+ --slotted-tone-neutral-subtle-active: Canvas;
1106
+ --slotted-tone-neutral-border: ButtonBorder;
1107
+ --slotted-tone-neutral-text: CanvasText;
967
1108
  --slotted-tone-success-solid: ButtonFace;
968
1109
  --slotted-tone-success-surface: Canvas;
969
1110
  --slotted-tone-success-solid-hover: ButtonFace;
@@ -999,11 +1140,17 @@
999
1140
  --slotted-surface-raised: Canvas;
1000
1141
  --slotted-surface-sunken: Canvas;
1001
1142
  --slotted-surface-inverse: CanvasText;
1143
+ --slotted-surface-inverse-hover: CanvasText;
1144
+ --slotted-surface-inverse-active: CanvasText;
1145
+ --slotted-surface-material: Canvas;
1002
1146
  --slotted-text-inverse: Canvas;
1003
1147
  --slotted-border-strong: CanvasText;
1004
1148
  --slotted-control-border-color: ButtonBorder;
1005
1149
  --slotted-control-surface: Field;
1006
1150
  --slotted-current-edge: Highlight;
1151
+ --slotted-state-hover: Canvas;
1152
+ --slotted-state-pressed: Canvas;
1153
+ --slotted-state-selected: Canvas;
1007
1154
  --slotted-control-shadow: none;
1008
1155
  --slotted-scrim: Canvas;
1009
1156
  --slotted-data-1: CanvasText;
@@ -1069,6 +1216,15 @@
1069
1216
  --slotted-tone-secondary-text: CanvasText;
1070
1217
  --slotted-tone-secondary-subtle-hover: Canvas;
1071
1218
  --slotted-tone-secondary-subtle-active: Canvas;
1219
+ --slotted-tone-neutral-solid: CanvasText;
1220
+ --slotted-tone-neutral-solid-hover: CanvasText;
1221
+ --slotted-tone-neutral-solid-active: CanvasText;
1222
+ --slotted-tone-neutral-on-solid: Canvas;
1223
+ --slotted-tone-neutral-surface: Canvas;
1224
+ --slotted-tone-neutral-subtle-hover: Canvas;
1225
+ --slotted-tone-neutral-subtle-active: Canvas;
1226
+ --slotted-tone-neutral-border: ButtonBorder;
1227
+ --slotted-tone-neutral-text: CanvasText;
1072
1228
  --slotted-tone-success-solid: ButtonFace;
1073
1229
  --slotted-tone-success-surface: Canvas;
1074
1230
  --slotted-tone-success-solid-hover: ButtonFace;
@@ -1104,11 +1260,17 @@
1104
1260
  --slotted-surface-raised: Canvas;
1105
1261
  --slotted-surface-sunken: Canvas;
1106
1262
  --slotted-surface-inverse: CanvasText;
1263
+ --slotted-surface-inverse-hover: CanvasText;
1264
+ --slotted-surface-inverse-active: CanvasText;
1265
+ --slotted-surface-material: Canvas;
1107
1266
  --slotted-text-inverse: Canvas;
1108
1267
  --slotted-border-strong: CanvasText;
1109
1268
  --slotted-control-border-color: ButtonBorder;
1110
1269
  --slotted-control-surface: Field;
1111
1270
  --slotted-current-edge: Highlight;
1271
+ --slotted-state-hover: Canvas;
1272
+ --slotted-state-pressed: Canvas;
1273
+ --slotted-state-selected: Canvas;
1112
1274
  --slotted-control-shadow: none;
1113
1275
  --slotted-scrim: Canvas;
1114
1276
  --slotted-data-1: CanvasText;
@@ -1174,6 +1336,15 @@
1174
1336
  --slotted-tone-secondary-text: CanvasText;
1175
1337
  --slotted-tone-secondary-subtle-hover: Canvas;
1176
1338
  --slotted-tone-secondary-subtle-active: Canvas;
1339
+ --slotted-tone-neutral-solid: CanvasText;
1340
+ --slotted-tone-neutral-solid-hover: CanvasText;
1341
+ --slotted-tone-neutral-solid-active: CanvasText;
1342
+ --slotted-tone-neutral-on-solid: Canvas;
1343
+ --slotted-tone-neutral-surface: Canvas;
1344
+ --slotted-tone-neutral-subtle-hover: Canvas;
1345
+ --slotted-tone-neutral-subtle-active: Canvas;
1346
+ --slotted-tone-neutral-border: ButtonBorder;
1347
+ --slotted-tone-neutral-text: CanvasText;
1177
1348
  --slotted-tone-success-solid: ButtonFace;
1178
1349
  --slotted-tone-success-surface: Canvas;
1179
1350
  --slotted-tone-success-solid-hover: ButtonFace;
@@ -1209,11 +1380,17 @@
1209
1380
  --slotted-surface-raised: Canvas;
1210
1381
  --slotted-surface-sunken: Canvas;
1211
1382
  --slotted-surface-inverse: CanvasText;
1383
+ --slotted-surface-inverse-hover: CanvasText;
1384
+ --slotted-surface-inverse-active: CanvasText;
1385
+ --slotted-surface-material: Canvas;
1212
1386
  --slotted-text-inverse: Canvas;
1213
1387
  --slotted-border-strong: CanvasText;
1214
1388
  --slotted-control-border-color: ButtonBorder;
1215
1389
  --slotted-control-surface: Field;
1216
1390
  --slotted-current-edge: Highlight;
1391
+ --slotted-state-hover: Canvas;
1392
+ --slotted-state-pressed: Canvas;
1393
+ --slotted-state-selected: Canvas;
1217
1394
  --slotted-control-shadow: none;
1218
1395
  --slotted-scrim: Canvas;
1219
1396
  --slotted-data-1: CanvasText;
@@ -1279,6 +1456,15 @@
1279
1456
  --slotted-tone-secondary-text: CanvasText;
1280
1457
  --slotted-tone-secondary-subtle-hover: Canvas;
1281
1458
  --slotted-tone-secondary-subtle-active: Canvas;
1459
+ --slotted-tone-neutral-solid: CanvasText;
1460
+ --slotted-tone-neutral-solid-hover: CanvasText;
1461
+ --slotted-tone-neutral-solid-active: CanvasText;
1462
+ --slotted-tone-neutral-on-solid: Canvas;
1463
+ --slotted-tone-neutral-surface: Canvas;
1464
+ --slotted-tone-neutral-subtle-hover: Canvas;
1465
+ --slotted-tone-neutral-subtle-active: Canvas;
1466
+ --slotted-tone-neutral-border: ButtonBorder;
1467
+ --slotted-tone-neutral-text: CanvasText;
1282
1468
  --slotted-tone-success-solid: ButtonFace;
1283
1469
  --slotted-tone-success-surface: Canvas;
1284
1470
  --slotted-tone-success-solid-hover: ButtonFace;
@@ -1314,11 +1500,17 @@
1314
1500
  --slotted-surface-raised: Canvas;
1315
1501
  --slotted-surface-sunken: Canvas;
1316
1502
  --slotted-surface-inverse: CanvasText;
1503
+ --slotted-surface-inverse-hover: CanvasText;
1504
+ --slotted-surface-inverse-active: CanvasText;
1505
+ --slotted-surface-material: Canvas;
1317
1506
  --slotted-text-inverse: Canvas;
1318
1507
  --slotted-border-strong: CanvasText;
1319
1508
  --slotted-control-border-color: ButtonBorder;
1320
1509
  --slotted-control-surface: Field;
1321
1510
  --slotted-current-edge: Highlight;
1511
+ --slotted-state-hover: Canvas;
1512
+ --slotted-state-pressed: Canvas;
1513
+ --slotted-state-selected: Canvas;
1322
1514
  --slotted-control-shadow: none;
1323
1515
  --slotted-scrim: Canvas;
1324
1516
  --slotted-data-1: CanvasText;
package/dist/default.js CHANGED
@@ -1075,6 +1075,41 @@ export default {
1075
1075
  "max": 0.041
1076
1076
  }
1077
1077
  },
1078
+ "--slotted-tone-neutral-solid": {
1079
+ "alias": "--slotted-surface-inverse"
1080
+ },
1081
+ "--slotted-tone-neutral-solid-hover": {
1082
+ "alias": "--slotted-surface-inverse-hover"
1083
+ },
1084
+ "--slotted-tone-neutral-solid-active": {
1085
+ "alias": "--slotted-surface-inverse-active"
1086
+ },
1087
+ "--slotted-tone-neutral-on-solid": {
1088
+ "alias": "--slotted-text-inverse"
1089
+ },
1090
+ "--slotted-tone-neutral-surface": {
1091
+ "alias": "--slotted-tone-secondary-surface"
1092
+ },
1093
+ "--slotted-tone-neutral-subtle-hover": {
1094
+ "alias": "--slotted-tone-secondary-subtle-hover"
1095
+ },
1096
+ "--slotted-tone-neutral-subtle-active": {
1097
+ "alias": "--slotted-tone-secondary-subtle-active"
1098
+ },
1099
+ "--slotted-tone-neutral-border": {
1100
+ "alias": "--slotted-border-strong"
1101
+ },
1102
+ "--slotted-tone-neutral-text": {
1103
+ "alias": "--slotted-text"
1104
+ },
1105
+ "--slotted-surface-inverse-hover": {
1106
+ "mix": "--slotted-surface-inverse",
1107
+ "share": 0.08
1108
+ },
1109
+ "--slotted-surface-inverse-active": {
1110
+ "mix": "--slotted-surface-inverse",
1111
+ "share": 0.15
1112
+ },
1078
1113
  "--slotted-text-inverse": {
1079
1114
  "seed": "neutral",
1080
1115
  "l": 0.984,
@@ -2167,6 +2202,41 @@ export default {
2167
2202
  "max": 0.006
2168
2203
  }
2169
2204
  },
2205
+ "--slotted-tone-neutral-solid": {
2206
+ "alias": "--slotted-surface-inverse"
2207
+ },
2208
+ "--slotted-tone-neutral-solid-hover": {
2209
+ "alias": "--slotted-surface-inverse-hover"
2210
+ },
2211
+ "--slotted-tone-neutral-solid-active": {
2212
+ "alias": "--slotted-surface-inverse-active"
2213
+ },
2214
+ "--slotted-tone-neutral-on-solid": {
2215
+ "alias": "--slotted-text-inverse"
2216
+ },
2217
+ "--slotted-tone-neutral-surface": {
2218
+ "alias": "--slotted-tone-secondary-surface"
2219
+ },
2220
+ "--slotted-tone-neutral-subtle-hover": {
2221
+ "alias": "--slotted-tone-secondary-subtle-hover"
2222
+ },
2223
+ "--slotted-tone-neutral-subtle-active": {
2224
+ "alias": "--slotted-tone-secondary-subtle-active"
2225
+ },
2226
+ "--slotted-tone-neutral-border": {
2227
+ "alias": "--slotted-border-strong"
2228
+ },
2229
+ "--slotted-tone-neutral-text": {
2230
+ "alias": "--slotted-text"
2231
+ },
2232
+ "--slotted-surface-inverse-hover": {
2233
+ "mix": "--slotted-surface-inverse",
2234
+ "share": 0.08
2235
+ },
2236
+ "--slotted-surface-inverse-active": {
2237
+ "mix": "--slotted-surface-inverse",
2238
+ "share": 0.15
2239
+ },
2170
2240
  "--slotted-text-inverse": {
2171
2241
  "seed": "neutral",
2172
2242
  "l": 0.21,
@@ -3245,6 +3315,41 @@ export default {
3245
3315
  "max": 0
3246
3316
  }
3247
3317
  },
3318
+ "--slotted-tone-neutral-solid": {
3319
+ "alias": "--slotted-surface-inverse"
3320
+ },
3321
+ "--slotted-tone-neutral-solid-hover": {
3322
+ "alias": "--slotted-surface-inverse-hover"
3323
+ },
3324
+ "--slotted-tone-neutral-solid-active": {
3325
+ "alias": "--slotted-surface-inverse-active"
3326
+ },
3327
+ "--slotted-tone-neutral-on-solid": {
3328
+ "alias": "--slotted-text-inverse"
3329
+ },
3330
+ "--slotted-tone-neutral-surface": {
3331
+ "alias": "--slotted-tone-secondary-surface"
3332
+ },
3333
+ "--slotted-tone-neutral-subtle-hover": {
3334
+ "alias": "--slotted-tone-secondary-subtle-hover"
3335
+ },
3336
+ "--slotted-tone-neutral-subtle-active": {
3337
+ "alias": "--slotted-tone-secondary-subtle-active"
3338
+ },
3339
+ "--slotted-tone-neutral-border": {
3340
+ "alias": "--slotted-border-strong"
3341
+ },
3342
+ "--slotted-tone-neutral-text": {
3343
+ "alias": "--slotted-text"
3344
+ },
3345
+ "--slotted-surface-inverse-hover": {
3346
+ "mix": "--slotted-surface-inverse",
3347
+ "share": 0.08
3348
+ },
3349
+ "--slotted-surface-inverse-active": {
3350
+ "mix": "--slotted-surface-inverse",
3351
+ "share": 0.15
3352
+ },
3248
3353
  "--slotted-text-inverse": {
3249
3354
  "seed": "neutral",
3250
3355
  "l": 1,
@@ -3317,6 +3422,8 @@ export default {
3317
3422
  "--slotted-line-height-2xl": "1.4",
3318
3423
  "--slotted-line-height-3xl": "1.3",
3319
3424
  "--slotted-line-height-4xl": "1.2",
3425
+ "--slotted-letter-spacing-tight": "-0.02em",
3426
+ "--slotted-letter-spacing-tighter": "-0.03em",
3320
3427
  "--slotted-font-weight-regular": "400",
3321
3428
  "--slotted-font-weight-medium": "500",
3322
3429
  "--slotted-font-weight-semibold": "600",
@@ -3376,6 +3483,7 @@ export default {
3376
3483
  "--slotted-selection-size-lg": "18px",
3377
3484
  "--slotted-selection-halo-opacity": "0.12",
3378
3485
  "--slotted-highlight-tint-opacity": "0.075",
3486
+ "--slotted-material-backdrop": "saturate(1.6) blur(20px)",
3379
3487
  "--slotted-icon-loader-circle": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-6.219-8.56'/%3E%3C/svg%3E\")",
3380
3488
  "--slotted-icon-ellipsis": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='19' cy='12' r='1'/%3E%3Ccircle cx='5' cy='12' r='1'/%3E%3C/svg%3E\")",
3381
3489
  "--slotted-icon-maximize": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3'/%3E%3Cpath d='M21 8V5a2 2 0 0 0-2-2h-3'/%3E%3Cpath d='M3 16v3a2 2 0 0 0 2 2h3'/%3E%3Cpath d='M16 21h3a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E\")",
@@ -3424,6 +3532,10 @@ export default {
3424
3532
  "--slotted-shadow-md": "0 4px 6px -1px rgb(15 23 42 / 0.08), 0 2px 4px -2px rgb(15 23 42 / 0.08)",
3425
3533
  "--slotted-shadow-lg": "0 10px 15px -3px rgb(15 23 42 / 0.10), 0 4px 6px -4px rgb(15 23 42 / 0.08)",
3426
3534
  "--slotted-current-edge": "transparent",
3535
+ "--slotted-state-hover": "color-mix(in oklab, var(--slotted-text) 5%, transparent)",
3536
+ "--slotted-state-pressed": "color-mix(in oklab, var(--slotted-text) 10%, transparent)",
3537
+ "--slotted-state-selected": "color-mix(in oklab, var(--slotted-text) 8%, transparent)",
3538
+ "--slotted-surface-material": "color-mix(in oklab, var(--slotted-surface) 72%, transparent)",
3427
3539
  "--slotted-control-shadow": "0 1px 2px rgb(0 0 0 / 0.06)",
3428
3540
  "--slotted-scrim": "rgb(0 0 0 / 0.41)",
3429
3541
  "--slotted-data-1": "#2563eb",
@@ -3464,6 +3576,10 @@ export default {
3464
3576
  "--slotted-shadow-md": "0 4px 6px -1px rgb(0 0 0 / 0.50), 0 2px 4px -2px rgb(0 0 0 / 0.45)",
3465
3577
  "--slotted-shadow-lg": "0 10px 15px -3px rgb(0 0 0 / 0.60), 0 4px 6px -4px rgb(0 0 0 / 0.50)",
3466
3578
  "--slotted-current-edge": "transparent",
3579
+ "--slotted-state-hover": "color-mix(in oklab, var(--slotted-text) 6%, transparent)",
3580
+ "--slotted-state-pressed": "color-mix(in oklab, var(--slotted-text) 12%, transparent)",
3581
+ "--slotted-state-selected": "color-mix(in oklab, var(--slotted-text) 10%, transparent)",
3582
+ "--slotted-surface-material": "color-mix(in oklab, var(--slotted-surface) 68%, transparent)",
3467
3583
  "--slotted-control-shadow": "0 1px 2px rgb(0 0 0 / 0.5)",
3468
3584
  "--slotted-scrim": "rgb(0 0 0 / 0.62)",
3469
3585
  "--slotted-data-1": "#2563eb",
@@ -3504,6 +3620,10 @@ export default {
3504
3620
  "--slotted-shadow-md": "0 0 0 2px #000000",
3505
3621
  "--slotted-shadow-lg": "0 0 0 2px #000000",
3506
3622
  "--slotted-current-edge": "#000000",
3623
+ "--slotted-state-hover": "color-mix(in oklab, var(--slotted-text) 10%, transparent)",
3624
+ "--slotted-state-pressed": "color-mix(in oklab, var(--slotted-text) 20%, transparent)",
3625
+ "--slotted-state-selected": "color-mix(in oklab, var(--slotted-text) 16%, transparent)",
3626
+ "--slotted-surface-material": "var(--slotted-surface)",
3507
3627
  "--slotted-control-shadow": "none",
3508
3628
  "--slotted-scrim": "rgb(0 0 0 / 0.75)",
3509
3629
  "--slotted-data-1": "#1d4ed8",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@slotted/themes",
3
- "version": "0.1.0-beta.2",
3
+ "version": "0.1.0-beta.4",
4
4
  "license": "MIT",
5
5
  "repository": {
6
6
  "type": "git",
@@ -19,7 +19,7 @@
19
19
  }
20
20
  },
21
21
  "peerDependencies": {
22
- "@slotted/theme": "0.1.0-beta.2"
22
+ "@slotted/theme": "0.1.0-beta.4"
23
23
  },
24
24
  "peerDependenciesMeta": {
25
25
  "@slotted/theme": {
@@ -27,7 +27,7 @@
27
27
  }
28
28
  },
29
29
  "devDependencies": {
30
- "@slotted/theme": "0.1.0-beta.2"
30
+ "@slotted/theme": "0.1.0-beta.4"
31
31
  },
32
32
  "scripts": {
33
33
  "build": "node ../../scripts/generate-icon-glyphs.mjs --theme src/default && slotted-build-theme src/default/theme.mjs --out dist",