elements-kit 0.5.0 → 0.5.2

package/dist/ui/styles/colors/violet.css

@@ -1,127 +1,30 @@
-:root, .light, .light-theme {
-  --violet-1: #fdfcfe;
-  --violet-2: #faf8ff;
-  --violet-3: #f4f0fe;
-  --violet-4: #ebe4ff;
-  --violet-5: #e1d9ff;
-  --violet-6: #d4cafe;
-  --violet-7: #c2b5f5;
-  --violet-8: #aa99ec;
-  --violet-9: #6e56cf;
-  --violet-10: #654dc4;
-  --violet-11: #6550b9;
-  --violet-12: #2f265f;
-  --violet-a1: #5500aa03;
-  --violet-a2: #4900ff07;
-  --violet-a3: #4400ee0f;
-  --violet-a4: #4300ff1b;
-  --violet-a5: #3600ff26;
-  --violet-a6: #3100fb35;
-  --violet-a7: #2d01dd4a;
-  --violet-a8: #2b00d066;
-  --violet-a9: #2400b7a9;
-  --violet-a10: #2300abb2;
-  --violet-a11: #1f0099af;
-  --violet-a12: #0b0043d9;
-  --violet-surface: #f9f6ffcc;
-  --violet-indicator: var(--violet-9);
-  --violet-track: var(--violet-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    :root, .light, .light-theme {
-      --violet-1: color(display-p3 .991 .988 .995);
-      --violet-2: color(display-p3 .978 .974 .998);
-      --violet-3: color(display-p3 .953 .943 .993);
-      --violet-4: color(display-p3 .916 .897 1);
-      --violet-5: color(display-p3 .876 .851 1);
-      --violet-6: color(display-p3 .825 .793 .981);
-      --violet-7: color(display-p3 .752 .712 .943);
-      --violet-8: color(display-p3 .654 .602 .902);
-      --violet-9: color(display-p3 .417 .341 .784);
-      --violet-10: color(display-p3 .381 .306 .741);
-      --violet-11: color(display-p3 .383 .317 .702);
-      --violet-12: color(display-p3 .179 .15 .359);
-      --violet-a1: color(display-p3 .349 .024 .675 / .012);
-      --violet-a2: color(display-p3 .161 .024 .863 / .028);
-      --violet-a3: color(display-p3 .204 .004 .871 / .059);
-      --violet-a4: color(display-p3 .196 .004 1 / .102);
-      --violet-a5: color(display-p3 .165 .008 1 / .15);
-      --violet-a6: color(display-p3 .153 .004 .906 / .208);
-      --violet-a7: color(display-p3 .141 .004 .796 / .287);
-      --violet-a8: color(display-p3 .133 .004 .753 / .397);
-      --violet-a9: color(display-p3 .114 0 .675 / .659);
-      --violet-a10: color(display-p3 .11 0 .627 / .695);
-      --violet-a11: color(display-p3 .383 .317 .702);
-      --violet-a12: color(display-p3 .179 .15 .359);
-      --violet-surface: color(display-p3 .9725 .9647 .9961 / .8);
-    }
-  }
-}
-
-.dark, .dark-theme {
-  --violet-1: #14121f;
-  --violet-2: #1b1525;
-  --violet-3: #291f43;
-  --violet-4: #33255b;
-  --violet-5: #3c2e69;
-  --violet-6: #473876;
-  --violet-7: #56468b;
-  --violet-8: #6958ad;
-  --violet-9: #6e56cf;
-  --violet-10: #7d66d9;
-  --violet-11: #baa7ff;
-  --violet-12: #e2ddfe;
-  --violet-a1: #4422ff0f;
-  --violet-a2: #853ff916;
-  --violet-a3: #8354fe36;
-  --violet-a4: #7d51fd50;
-  --violet-a5: #845ffd5f;
-  --violet-a6: #8f6cfd6d;
-  --violet-a7: #9879ff83;
-  --violet-a8: #977dfea8;
-  --violet-a9: #8668ffcc;
-  --violet-a10: #9176fed7;
-  --violet-a11: #baa7ff;
-  --violet-a12: #e3defffe;
-  --violet-surface: #25193980;
-  --violet-indicator: var(--violet-9);
-  --violet-track: var(--violet-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    .dark, .dark-theme {
-      --violet-1: color(display-p3 .077 .071 .118);
-      --violet-2: color(display-p3 .101 .084 .141);
-      --violet-3: color(display-p3 .154 .123 .256);
-      --violet-4: color(display-p3 .191 .148 .345);
-      --violet-5: color(display-p3 .226 .182 .396);
-      --violet-6: color(display-p3 .269 .223 .449);
-      --violet-7: color(display-p3 .326 .277 .53);
-      --violet-8: color(display-p3 .399 .346 .656);
-      --violet-9: color(display-p3 .417 .341 .784);
-      --violet-10: color(display-p3 .477 .402 .823);
-      --violet-11: color(display-p3 .72 .65 1);
-      --violet-12: color(display-p3 .883 .867 .986);
-      --violet-a1: color(display-p3 .282 .141 .996 / .055);
-      --violet-a2: color(display-p3 .51 .263 1 / .08);
-      --violet-a3: color(display-p3 .494 .337 .996 / .202);
-      --violet-a4: color(display-p3 .49 .345 1 / .299);
-      --violet-a5: color(display-p3 .525 .392 1 / .353);
-      --violet-a6: color(display-p3 .569 .455 1 / .408);
-      --violet-a7: color(display-p3 .588 .494 1 / .496);
-      --violet-a8: color(display-p3 .596 .51 1 / .631);
-      --violet-a9: color(display-p3 .522 .424 1 / .769);
-      --violet-a10: color(display-p3 .576 .482 1 / .811);
-      --violet-a11: color(display-p3 .72 .65 1);
-      --violet-a12: color(display-p3 .883 .867 .986);
-      --violet-surface: color(display-p3 .1333 .102 .2118 / .5);
-    }
-  }
-}
-
-:root {
-  --violet-contrast: white;
+[data-color="violet"] {
+  --color-1: var(--violet-1);
+  --color-2: var(--violet-2);
+  --color-3: var(--violet-3);
+  --color-4: var(--violet-4);
+  --color-5: var(--violet-5);
+  --color-6: var(--violet-6);
+  --color-7: var(--violet-7);
+  --color-8: var(--violet-8);
+  --color-9: var(--violet-9);
+  --color-10: var(--violet-10);
+  --color-11: var(--violet-11);
+  --color-12: var(--violet-12);
+  --color-a1: var(--violet-a1);
+  --color-a2: var(--violet-a2);
+  --color-a3: var(--violet-a3);
+  --color-a4: var(--violet-a4);
+  --color-a5: var(--violet-a5);
+  --color-a6: var(--violet-a6);
+  --color-a7: var(--violet-a7);
+  --color-a8: var(--violet-a8);
+  --color-a9: var(--violet-a9);
+  --color-a10: var(--violet-a10);
+  --color-a11: var(--violet-a11);
+  --color-a12: var(--violet-a12);
+  --accent-contrast: var(--violet-contrast);
+  --accent-surface: var(--violet-surface);
+  --accent-indicator: var(--violet-indicator);
+  --accent-track: var(--violet-track);
 }

package/dist/ui/styles/colors/warning.css

@@ -0,0 +1,30 @@
+[data-color="warning"] {
+  --color-1: var(--amber-1);
+  --color-2: var(--amber-2);
+  --color-3: var(--amber-3);
+  --color-4: var(--amber-4);
+  --color-5: var(--amber-5);
+  --color-6: var(--amber-6);
+  --color-7: var(--amber-7);
+  --color-8: var(--amber-8);
+  --color-9: var(--amber-9);
+  --color-10: var(--amber-10);
+  --color-11: var(--amber-11);
+  --color-12: var(--amber-12);
+  --color-a1: var(--amber-a1);
+  --color-a2: var(--amber-a2);
+  --color-a3: var(--amber-a3);
+  --color-a4: var(--amber-a4);
+  --color-a5: var(--amber-a5);
+  --color-a6: var(--amber-a6);
+  --color-a7: var(--amber-a7);
+  --color-a8: var(--amber-a8);
+  --color-a9: var(--amber-a9);
+  --color-a10: var(--amber-a10);
+  --color-a11: var(--amber-a11);
+  --color-a12: var(--amber-a12);
+  --accent-contrast: var(--amber-contrast);
+  --accent-surface: var(--amber-surface);
+  --accent-indicator: var(--amber-indicator);
+  --accent-track: var(--amber-track);
+}

package/dist/ui/styles/colors/yellow.css

@@ -1,133 +1,30 @@
-:root, .light, .light-theme {
-  --yellow-1: #fdfdf9;
-  --yellow-2: #fefce9;
-  --yellow-3: #fffab8;
-  --yellow-4: #fff394;
-  --yellow-5: #ffe770;
-  --yellow-6: #f3d768;
-  --yellow-7: #e4c767;
-  --yellow-8: #d5ae39;
-  --yellow-9: #ffe629;
-  --yellow-10: #ffdc00;
-  --yellow-11: #9e6c00;
-  --yellow-12: #473b1f;
-  --yellow-a1: #aaaa0006;
-  --yellow-a2: #f4dd0016;
-  --yellow-a3: #ffee0047;
-  --yellow-a4: #ffe3016b;
-  --yellow-a5: #ffd5008f;
-  --yellow-a6: #ebbc0097;
-  --yellow-a7: #d2a10098;
-  --yellow-a8: #c99700c6;
-  --yellow-a9: #ffe100d6;
-  --yellow-a10: #ffdc00;
-  --yellow-a11: #9e6c00;
-  --yellow-a12: #2e2000e0;
-  --yellow-surface: #fefbe4cc;
-  --yellow-indicator: var(--yellow-10);
-  --yellow-track: var(--yellow-10);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    :root, .light, .light-theme {
-      --yellow-1: color(display-p3 .992 .992 .978);
-      --yellow-2: color(display-p3 .995 .99 .922);
-      --yellow-3: color(display-p3 .997 .982 .749);
-      --yellow-4: color(display-p3 .992 .953 .627);
-      --yellow-5: color(display-p3 .984 .91 .51);
-      --yellow-6: color(display-p3 .934 .847 .474);
-      --yellow-7: color(display-p3 .876 .785 .46);
-      --yellow-8: color(display-p3 .811 .689 .313);
-      --yellow-9: color(display-p3 1 .92 .22);
-      --yellow-10: color(display-p3 .977 .868 .291);
-      --yellow-11: color(display-p3 .6 .44 0);
-      --yellow-12: color(display-p3 .271 .233 .137);
-      --yellow-a1: color(display-p3 .675 .675 .024 / .024);
-      --yellow-a2: color(display-p3 .953 .855 .008 / .079);
-      --yellow-a3: color(display-p3 .988 .925 .004 / .251);
-      --yellow-a4: color(display-p3 .98 .875 .004 / .373);
-      --yellow-a5: color(display-p3 .969 .816 .004 / .491);
-      --yellow-a6: color(display-p3 .875 .71 0 / .526);
-      --yellow-a7: color(display-p3 .769 .604 0 / .542);
-      --yellow-a8: color(display-p3 .725 .549 0 / .687);
-      --yellow-a9: color(display-p3 1 .898 0 / .781);
-      --yellow-a10: color(display-p3 .969 .812 0 / .71);
-      --yellow-a11: color(display-p3 .6 .44 0);
-      --yellow-a12: color(display-p3 .271 .233 .137);
-      --yellow-surface: color(display-p3 .9961 .9922 .902 / .8);
-    }
-  }
-}
-
-.dark, .dark-theme {
-  --yellow-1: #14120b;
-  --yellow-2: #1b180f;
-  --yellow-3: #2d2305;
-  --yellow-4: #362b00;
-  --yellow-5: #433500;
-  --yellow-6: #524202;
-  --yellow-7: #665417;
-  --yellow-8: #836a21;
-  --yellow-9: #ffe629;
-  --yellow-10: #ffff57;
-  --yellow-11: #f5e147;
-  --yellow-12: #f6eeb4;
-  --yellow-a1: #d1510004;
-  --yellow-a2: #f9b4000b;
-  --yellow-a3: #ffaa001e;
-  --yellow-a4: #fdb70028;
-  --yellow-a5: #febb0036;
-  --yellow-a6: #fec40046;
-  --yellow-a7: #fdcb225c;
-  --yellow-a8: #fdca327b;
-  --yellow-a9: #ffe629;
-  --yellow-a10: #ffff57;
-  --yellow-a11: #fee949f5;
-  --yellow-a12: #fef6baf6;
-  --yellow-surface: #231f1380;
-  --yellow-indicator: var(--yellow-9);
-  --yellow-track: var(--yellow-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    .dark, .dark-theme {
-      --yellow-1: color(display-p3 .078 .069 .047);
-      --yellow-2: color(display-p3 .103 .094 .063);
-      --yellow-3: color(display-p3 .168 .137 .039);
-      --yellow-4: color(display-p3 .209 .169 0);
-      --yellow-5: color(display-p3 .255 .209 0);
-      --yellow-6: color(display-p3 .31 .261 .07);
-      --yellow-7: color(display-p3 .389 .331 .135);
-      --yellow-8: color(display-p3 .497 .42 .182);
-      --yellow-9: color(display-p3 1 .92 .22);
-      --yellow-10: color(display-p3 1 1 .456);
-      --yellow-11: color(display-p3 .948 .885 .392);
-      --yellow-12: color(display-p3 .959 .934 .731);
-      --yellow-a1: color(display-p3 .973 .369 0 / .013);
-      --yellow-a2: color(display-p3 .996 .792 0 / .038);
-      --yellow-a3: color(display-p3 .996 .71 0 / .11);
-      --yellow-a4: color(display-p3 .996 .741 0 / .152);
-      --yellow-a5: color(display-p3 .996 .765 0 / .202);
-      --yellow-a6: color(display-p3 .996 .816 .082 / .261);
-      --yellow-a7: color(display-p3 1 .831 .263 / .345);
-      --yellow-a8: color(display-p3 1 .831 .314 / .463);
-      --yellow-a9: color(display-p3 1 .922 .22);
-      --yellow-a10: color(display-p3 1 1 .455);
-      --yellow-a11: color(display-p3 .948 .885 .392);
-      --yellow-a12: color(display-p3 .959 .934 .731);
-      --yellow-surface: color(display-p3 .1333 .1176 .0706 / .5);
-    }
-  }
-}
-
-:root {
-  --yellow-contrast: #21201c;
-}
-
-@supports (color: color-mix(in oklab, white, black)) {
-  .dark, .dark-theme {
-    --yellow-track: color-mix(in oklab, var(--yellow-8), var(--yellow-9) 65%);
-  }
+[data-color="yellow"] {
+  --color-1: var(--yellow-1);
+  --color-2: var(--yellow-2);
+  --color-3: var(--yellow-3);
+  --color-4: var(--yellow-4);
+  --color-5: var(--yellow-5);
+  --color-6: var(--yellow-6);
+  --color-7: var(--yellow-7);
+  --color-8: var(--yellow-8);
+  --color-9: var(--yellow-9);
+  --color-10: var(--yellow-10);
+  --color-11: var(--yellow-11);
+  --color-12: var(--yellow-12);
+  --color-a1: var(--yellow-a1);
+  --color-a2: var(--yellow-a2);
+  --color-a3: var(--yellow-a3);
+  --color-a4: var(--yellow-a4);
+  --color-a5: var(--yellow-a5);
+  --color-a6: var(--yellow-a6);
+  --color-a7: var(--yellow-a7);
+  --color-a8: var(--yellow-a8);
+  --color-a9: var(--yellow-a9);
+  --color-a10: var(--yellow-a10);
+  --color-a11: var(--yellow-a11);
+  --color-a12: var(--yellow-a12);
+  --accent-contrast: var(--yellow-contrast);
+  --accent-surface: var(--yellow-surface);
+  --accent-indicator: var(--yellow-indicator);
+  --accent-track: var(--yellow-track);
 }

package/dist/ui/styles/material.css

@@ -0,0 +1,19 @@
+:where(:root) {
+  --color-material-solid: white;
+  --color-material-translucent: #ffffffb3;
+}
+
+:is(.dark, .dark-theme) {
+  --color-material-solid: var(--gray-2);
+  --color-material-translucent: var(--gray-a2);
+}
+
+:where([data-material-background="solid"]) {
+  --color-material: var(--color-material-solid);
+  --backdrop-filter-material: none;
+}
+
+:where([data-material-background="translucent"]) {
+  --color-material: var(--color-material-translucent);
+  --backdrop-filter-material: blur(64px);
+}

package/dist/ui/styles/palette/amber.css

@@ -0,0 +1,133 @@
+:root, .light, .light-theme {
+  --amber-1: #fefdfb;
+  --amber-2: #fefbe9;
+  --amber-3: #fff7c2;
+  --amber-4: #ffee9c;
+  --amber-5: #fbe577;
+  --amber-6: #f3d673;
+  --amber-7: #e9c162;
+  --amber-8: #e2a336;
+  --amber-9: #ffc53d;
+  --amber-10: #ffba18;
+  --amber-11: #ab6400;
+  --amber-12: #4f3422;
+  --amber-a1: #c0800004;
+  --amber-a2: #f4d10016;
+  --amber-a3: #ffde003d;
+  --amber-a4: #ffd40063;
+  --amber-a5: #f8cf0088;
+  --amber-a6: #eab5008c;
+  --amber-a7: #dc9b009d;
+  --amber-a8: #da8a00c9;
+  --amber-a9: #ffb300c2;
+  --amber-a10: #ffb300e7;
+  --amber-a11: #ab6400;
+  --amber-a12: #341500dd;
+  --amber-surface: #fefae4cc;
+  --amber-indicator: var(--amber-9);
+  --amber-track: var(--amber-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --amber-1: color(display-p3 .995 .992 .985);
+      --amber-2: color(display-p3 .994 .986 .921);
+      --amber-3: color(display-p3 .994 .969 .782);
+      --amber-4: color(display-p3 .989 .937 .65);
+      --amber-5: color(display-p3 .97 .902 .527);
+      --amber-6: color(display-p3 .936 .844 .506);
+      --amber-7: color(display-p3 .89 .762 .443);
+      --amber-8: color(display-p3 .85 .65 .3);
+      --amber-9: color(display-p3 1 .77 .26);
+      --amber-10: color(display-p3 .959 .741 .274);
+      --amber-11: color(display-p3 .64 .4 0);
+      --amber-12: color(display-p3 .294 .208 .145);
+      --amber-a1: color(display-p3 .757 .514 .024 / .016);
+      --amber-a2: color(display-p3 .902 .804 .008 / .079);
+      --amber-a3: color(display-p3 .965 .859 .004 / .22);
+      --amber-a4: color(display-p3 .969 .82 .004 / .35);
+      --amber-a5: color(display-p3 .933 .796 .004 / .475);
+      --amber-a6: color(display-p3 .875 .682 .004 / .495);
+      --amber-a7: color(display-p3 .804 .573 0 / .557);
+      --amber-a8: color(display-p3 .788 .502 0 / .699);
+      --amber-a9: color(display-p3 1 .686 0 / .742);
+      --amber-a10: color(display-p3 .945 .643 0 / .726);
+      --amber-a11: color(display-p3 .64 .4 0);
+      --amber-a12: color(display-p3 .294 .208 .145);
+      --amber-surface: color(display-p3 .9922 .9843 .902 / .8);
+    }
+  }
+}
+
+.dark, .dark-theme {
+  --amber-1: #16120c;
+  --amber-2: #1d180f;
+  --amber-3: #302008;
+  --amber-4: #3f2700;
+  --amber-5: #4d3000;
+  --amber-6: #5c3d05;
+  --amber-7: #714f19;
+  --amber-8: #8f6424;
+  --amber-9: #ffc53d;
+  --amber-10: #ffd60a;
+  --amber-11: #ffca16;
+  --amber-12: #ffe7b3;
+  --amber-a1: #e63c0006;
+  --amber-a2: #fd9b000d;
+  --amber-a3: #fa820022;
+  --amber-a4: #fc820032;
+  --amber-a5: #fd8b0041;
+  --amber-a6: #fd9b0051;
+  --amber-a7: #ffab2567;
+  --amber-a8: #ffae3587;
+  --amber-a9: #ffc53d;
+  --amber-a10: #ffd60a;
+  --amber-a11: #ffca16;
+  --amber-a12: #ffe7b3;
+  --amber-surface: #271f1380;
+  --amber-indicator: var(--amber-9);
+  --amber-track: var(--amber-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --amber-1: color(display-p3 .082 .07 .05);
+      --amber-2: color(display-p3 .111 .094 .064);
+      --amber-3: color(display-p3 .178 .128 .049);
+      --amber-4: color(display-p3 .239 .156 0);
+      --amber-5: color(display-p3 .29 .193 0);
+      --amber-6: color(display-p3 .344 .245 .076);
+      --amber-7: color(display-p3 .422 .314 .141);
+      --amber-8: color(display-p3 .535 .399 .189);
+      --amber-9: color(display-p3 1 .77 .26);
+      --amber-10: color(display-p3 1 .87 .15);
+      --amber-11: color(display-p3 1 .8 .29);
+      --amber-12: color(display-p3 .984 .909 .726);
+      --amber-a1: color(display-p3 .992 .298 0 / .017);
+      --amber-a2: color(display-p3 .988 .651 0 / .047);
+      --amber-a3: color(display-p3 1 .6 0 / .118);
+      --amber-a4: color(display-p3 1 .557 0 / .185);
+      --amber-a5: color(display-p3 1 .592 0 / .24);
+      --amber-a6: color(display-p3 1 .659 .094 / .299);
+      --amber-a7: color(display-p3 1 .714 .263 / .383);
+      --amber-a8: color(display-p3 .996 .729 .306 / .5);
+      --amber-a9: color(display-p3 1 .769 .259);
+      --amber-a10: color(display-p3 1 .871 .149);
+      --amber-a11: color(display-p3 1 .8 .29);
+      --amber-a12: color(display-p3 .984 .909 .726);
+      --amber-surface: color(display-p3 .1412 .1176 .0784 / .5);
+    }
+  }
+}
+
+:root {
+  --amber-contrast: #21201c;
+}
+
+@supports (color: color-mix(in oklab, white, black)) {
+  .dark, .dark-theme {
+    --amber-track: color-mix(in oklab, var(--amber-8), var(--amber-9) 75%);
+  }
+}

package/dist/ui/styles/palette/blue.css

@@ -0,0 +1,127 @@
+:root, .light, .light-theme {
+  --blue-1: #fbfdff;
+  --blue-2: #f4faff;
+  --blue-3: #e6f4fe;
+  --blue-4: #d5efff;
+  --blue-5: #c2e5ff;
+  --blue-6: #acd8fc;
+  --blue-7: #8ec8f6;
+  --blue-8: #5eb1ef;
+  --blue-9: #0090ff;
+  --blue-10: #0588f0;
+  --blue-11: #0d74ce;
+  --blue-12: #113264;
+  --blue-a1: #0080ff04;
+  --blue-a2: #008cff0b;
+  --blue-a3: #008ff519;
+  --blue-a4: #009eff2a;
+  --blue-a5: #0093ff3d;
+  --blue-a6: #0088f653;
+  --blue-a7: #0083eb71;
+  --blue-a8: #0084e6a1;
+  --blue-a9: #0090ff;
+  --blue-a10: #0086f0fa;
+  --blue-a11: #006dcbf2;
+  --blue-a12: #002359ee;
+  --blue-surface: #f1f9ffcc;
+  --blue-indicator: var(--blue-9);
+  --blue-track: var(--blue-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --blue-1: color(display-p3 .986 .992 .999);
+      --blue-2: color(display-p3 .96 .979 .998);
+      --blue-3: color(display-p3 .912 .956 .991);
+      --blue-4: color(display-p3 .853 .932 1);
+      --blue-5: color(display-p3 .788 .894 .998);
+      --blue-6: color(display-p3 .709 .843 .976);
+      --blue-7: color(display-p3 .606 .777 .947);
+      --blue-8: color(display-p3 .451 .688 .917);
+      --blue-9: color(display-p3 .247 .556 .969);
+      --blue-10: color(display-p3 .234 .523 .912);
+      --blue-11: color(display-p3 .15 .44 .84);
+      --blue-12: color(display-p3 .102 .193 .379);
+      --blue-a1: color(display-p3 .024 .514 1 / .016);
+      --blue-a2: color(display-p3 .024 .514 .906 / .04);
+      --blue-a3: color(display-p3 .012 .506 .914 / .087);
+      --blue-a4: color(display-p3 .008 .545 1 / .146);
+      --blue-a5: color(display-p3 .004 .502 .984 / .212);
+      --blue-a6: color(display-p3 .004 .463 .922 / .291);
+      --blue-a7: color(display-p3 .004 .431 .863 / .393);
+      --blue-a8: color(display-p3 0 .427 .851 / .55);
+      --blue-a9: color(display-p3 0 .412 .961 / .753);
+      --blue-a10: color(display-p3 0 .376 .886 / .765);
+      --blue-a11: color(display-p3 .15 .44 .84);
+      --blue-a12: color(display-p3 .102 .193 .379);
+      --blue-surface: color(display-p3 .9529 .9765 .9961 / .8);
+    }
+  }
+}
+
+.dark, .dark-theme {
+  --blue-1: #0d1520;
+  --blue-2: #111927;
+  --blue-3: #0d2847;
+  --blue-4: #003362;
+  --blue-5: #004074;
+  --blue-6: #104d87;
+  --blue-7: #205d9e;
+  --blue-8: #2870bd;
+  --blue-9: #0090ff;
+  --blue-10: #3b9eff;
+  --blue-11: #70b8ff;
+  --blue-12: #c2e6ff;
+  --blue-a1: #004df211;
+  --blue-a2: #1166fb18;
+  --blue-a3: #0077ff3a;
+  --blue-a4: #0075ff57;
+  --blue-a5: #0081fd6b;
+  --blue-a6: #0f89fd7f;
+  --blue-a7: #2a91fe98;
+  --blue-a8: #3094feb9;
+  --blue-a9: #0090ff;
+  --blue-a10: #3b9eff;
+  --blue-a11: #70b8ff;
+  --blue-a12: #c2e6ff;
+  --blue-surface: #11213d80;
+  --blue-indicator: var(--blue-9);
+  --blue-track: var(--blue-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --blue-1: color(display-p3 .057 .081 .122);
+      --blue-2: color(display-p3 .072 .098 .147);
+      --blue-3: color(display-p3 .078 .154 .27);
+      --blue-4: color(display-p3 .033 .197 .37);
+      --blue-5: color(display-p3 .08 .245 .441);
+      --blue-6: color(display-p3 .14 .298 .511);
+      --blue-7: color(display-p3 .195 .361 .6);
+      --blue-8: color(display-p3 .239 .434 .72);
+      --blue-9: color(display-p3 .247 .556 .969);
+      --blue-10: color(display-p3 .344 .612 .973);
+      --blue-11: color(display-p3 .49 .72 1);
+      --blue-12: color(display-p3 .788 .898 .99);
+      --blue-a1: color(display-p3 0 .333 1 / .059);
+      --blue-a2: color(display-p3 .114 .435 .988 / .085);
+      --blue-a3: color(display-p3 .122 .463 1 / .219);
+      --blue-a4: color(display-p3 0 .467 1 / .324);
+      --blue-a5: color(display-p3 .098 .51 1 / .4);
+      --blue-a6: color(display-p3 .224 .557 1 / .475);
+      --blue-a7: color(display-p3 .294 .584 1 / .572);
+      --blue-a8: color(display-p3 .314 .592 1 / .702);
+      --blue-a9: color(display-p3 .251 .573 .996 / .967);
+      --blue-a10: color(display-p3 .357 .631 1 / .971);
+      --blue-a11: color(display-p3 .49 .72 1);
+      --blue-a12: color(display-p3 .788 .898 .99);
+      --blue-surface: color(display-p3 .0706 .1255 .2196 / .5);
+    }
+  }
+}
+
+:root {
+  --blue-contrast: white;
+}