elements-kit 0.5.1 → 0.6.0

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

@@ -0,0 +1,127 @@
+:root, .light, .light-theme {
+  --ruby-1: #fffcfd;
+  --ruby-2: #fff7f8;
+  --ruby-3: #feeaed;
+  --ruby-4: #ffdce1;
+  --ruby-5: #ffced6;
+  --ruby-6: #f8bfc8;
+  --ruby-7: #efacb8;
+  --ruby-8: #e592a3;
+  --ruby-9: #e54666;
+  --ruby-10: #dc3b5d;
+  --ruby-11: #ca244d;
+  --ruby-12: #64172b;
+  --ruby-a1: #ff005503;
+  --ruby-a2: #ff002008;
+  --ruby-a3: #f3002515;
+  --ruby-a4: #ff002523;
+  --ruby-a5: #ff002a31;
+  --ruby-a6: #e4002440;
+  --ruby-a7: #ce002553;
+  --ruby-a8: #c300286d;
+  --ruby-a9: #db002cb9;
+  --ruby-a10: #d2002cc4;
+  --ruby-a11: #c10030db;
+  --ruby-a12: #550016e8;
+  --ruby-surface: #fff5f6cc;
+  --ruby-indicator: var(--ruby-9);
+  --ruby-track: var(--ruby-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --ruby-1: color(display-p3 .998 .989 .992);
+      --ruby-2: color(display-p3 .995 .971 .974);
+      --ruby-3: color(display-p3 .983 .92 .928);
+      --ruby-4: color(display-p3 .987 .869 .885);
+      --ruby-5: color(display-p3 .968 .817 .839);
+      --ruby-6: color(display-p3 .937 .758 .786);
+      --ruby-7: color(display-p3 .897 .685 .721);
+      --ruby-8: color(display-p3 .851 .588 .639);
+      --ruby-9: color(display-p3 .83 .323 .408);
+      --ruby-10: color(display-p3 .795 .286 .375);
+      --ruby-11: color(display-p3 .728 .211 .311);
+      --ruby-12: color(display-p3 .36 .115 .171);
+      --ruby-a1: color(display-p3 .675 .024 .349 / .012);
+      --ruby-a2: color(display-p3 .863 .024 .024 / .028);
+      --ruby-a3: color(display-p3 .804 .008 .11 / .079);
+      --ruby-a4: color(display-p3 .91 .008 .125 / .13);
+      --ruby-a5: color(display-p3 .831 .004 .133 / .185);
+      --ruby-a6: color(display-p3 .745 .004 .118 / .244);
+      --ruby-a7: color(display-p3 .678 .004 .114 / .314);
+      --ruby-a8: color(display-p3 .639 .004 .125 / .412);
+      --ruby-a9: color(display-p3 .753 0 .129 / .679);
+      --ruby-a10: color(display-p3 .714 0 .125 / .714);
+      --ruby-a11: color(display-p3 .728 .211 .311);
+      --ruby-a12: color(display-p3 .36 .115 .171);
+      --ruby-surface: color(display-p3 .9961 .9647 .9647 / .8);
+    }
+  }
+}
+
+.dark, .dark-theme {
+  --ruby-1: #191113;
+  --ruby-2: #1e1517;
+  --ruby-3: #3a141e;
+  --ruby-4: #4e1325;
+  --ruby-5: #5e1a2e;
+  --ruby-6: #6f2539;
+  --ruby-7: #883447;
+  --ruby-8: #b3445a;
+  --ruby-9: #e54666;
+  --ruby-10: #ec5a72;
+  --ruby-11: #ff949d;
+  --ruby-12: #fed2e1;
+  --ruby-a1: #f4124a09;
+  --ruby-a2: #fe5a7f0e;
+  --ruby-a3: #ff235d2c;
+  --ruby-a4: #fd195e42;
+  --ruby-a5: #fe2d6b53;
+  --ruby-a6: #ff447665;
+  --ruby-a7: #ff577d80;
+  --ruby-a8: #ff5c7cae;
+  --ruby-a9: #fe4c70e4;
+  --ruby-a10: #ff617beb;
+  --ruby-a11: #ff949d;
+  --ruby-a12: #ffd3e2fe;
+  --ruby-surface: #2b191d80;
+  --ruby-indicator: var(--ruby-9);
+  --ruby-track: var(--ruby-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --ruby-1: color(display-p3 .093 .068 .074);
+      --ruby-2: color(display-p3 .113 .083 .089);
+      --ruby-3: color(display-p3 .208 .088 .117);
+      --ruby-4: color(display-p3 .279 .092 .147);
+      --ruby-5: color(display-p3 .337 .12 .18);
+      --ruby-6: color(display-p3 .401 .166 .223);
+      --ruby-7: color(display-p3 .495 .224 .281);
+      --ruby-8: color(display-p3 .652 .295 .359);
+      --ruby-9: color(display-p3 .83 .323 .408);
+      --ruby-10: color(display-p3 .857 .392 .455);
+      --ruby-11: color(display-p3 1 .57 .59);
+      --ruby-12: color(display-p3 .968 .83 .88);
+      --ruby-a1: color(display-p3 .984 .071 .329 / .03);
+      --ruby-a2: color(display-p3 .992 .376 .529 / .051);
+      --ruby-a3: color(display-p3 .996 .196 .404 / .152);
+      --ruby-a4: color(display-p3 1 .173 .416 / .227);
+      --ruby-a5: color(display-p3 1 .259 .459 / .29);
+      --ruby-a6: color(display-p3 1 .341 .506 / .358);
+      --ruby-a7: color(display-p3 1 .412 .541 / .458);
+      --ruby-a8: color(display-p3 1 .431 .537 / .627);
+      --ruby-a9: color(display-p3 1 .376 .482 / .82);
+      --ruby-a10: color(display-p3 1 .447 .522 / .849);
+      --ruby-a11: color(display-p3 1 .57 .59);
+      --ruby-a12: color(display-p3 .968 .83 .88);
+      --ruby-surface: color(display-p3 .1569 .0941 .1098 / .5);
+    }
+  }
+}
+
+:root {
+  --ruby-contrast: white;
+}

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

@@ -0,0 +1,133 @@
+:root, .light, .light-theme {
+  --sky-1: #f9feff;
+  --sky-2: #f1fafd;
+  --sky-3: #e1f6fd;
+  --sky-4: #d1f0fa;
+  --sky-5: #bee7f5;
+  --sky-6: #a9daed;
+  --sky-7: #8dcae3;
+  --sky-8: #60b3d7;
+  --sky-9: #7ce2fe;
+  --sky-10: #74daf8;
+  --sky-11: #00749e;
+  --sky-12: #1d3e56;
+  --sky-a1: #00d5ff06;
+  --sky-a2: #00a4db0e;
+  --sky-a3: #00b3ee1e;
+  --sky-a4: #00ace42e;
+  --sky-a5: #00a1d841;
+  --sky-a6: #0092ca56;
+  --sky-a7: #0089c172;
+  --sky-a8: #0085bf9f;
+  --sky-a9: #00c7fe83;
+  --sky-a10: #00bcf38b;
+  --sky-a11: #00749e;
+  --sky-a12: #002540e2;
+  --sky-surface: #eef9fdcc;
+  --sky-indicator: var(--sky-9);
+  --sky-track: var(--sky-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --sky-1: color(display-p3 .98 .995 .999);
+      --sky-2: color(display-p3 .953 .98 .99);
+      --sky-3: color(display-p3 .899 .963 .989);
+      --sky-4: color(display-p3 .842 .937 .977);
+      --sky-5: color(display-p3 .777 .9 .954);
+      --sky-6: color(display-p3 .701 .851 .921);
+      --sky-7: color(display-p3 .604 .785 .879);
+      --sky-8: color(display-p3 .457 .696 .829);
+      --sky-9: color(display-p3 .585 .877 .983);
+      --sky-10: color(display-p3 .555 .845 .959);
+      --sky-11: color(display-p3 .193 .448 .605);
+      --sky-12: color(display-p3 .145 .241 .329);
+      --sky-a1: color(display-p3 .02 .804 1 / .02);
+      --sky-a2: color(display-p3 .024 .592 .757 / .048);
+      --sky-a3: color(display-p3 .004 .655 .886 / .102);
+      --sky-a4: color(display-p3 .004 .604 .851 / .157);
+      --sky-a5: color(display-p3 .004 .565 .792 / .224);
+      --sky-a6: color(display-p3 .004 .502 .737 / .299);
+      --sky-a7: color(display-p3 .004 .459 .694 / .397);
+      --sky-a8: color(display-p3 0 .435 .682 / .542);
+      --sky-a9: color(display-p3 .004 .71 .965 / .416);
+      --sky-a10: color(display-p3 .004 .647 .914 / .444);
+      --sky-a11: color(display-p3 .193 .448 .605);
+      --sky-a12: color(display-p3 .145 .241 .329);
+      --sky-surface: color(display-p3 .9412 .9765 .9843 / .8);
+    }
+  }
+}
+
+.dark, .dark-theme {
+  --sky-1: #0d141f;
+  --sky-2: #111a27;
+  --sky-3: #112840;
+  --sky-4: #113555;
+  --sky-5: #154467;
+  --sky-6: #1b537b;
+  --sky-7: #1f6692;
+  --sky-8: #197cae;
+  --sky-9: #7ce2fe;
+  --sky-10: #a8eeff;
+  --sky-11: #75c7f0;
+  --sky-12: #c2f3ff;
+  --sky-a1: #0044ff0f;
+  --sky-a2: #1171fb18;
+  --sky-a3: #1184fc33;
+  --sky-a4: #128fff49;
+  --sky-a5: #1c9dfd5d;
+  --sky-a6: #28a5ff72;
+  --sky-a7: #2badfe8b;
+  --sky-a8: #1db2fea9;
+  --sky-a9: #7ce3fffe;
+  --sky-a10: #a8eeff;
+  --sky-a11: #7cd3ffef;
+  --sky-a12: #c2f3ff;
+  --sky-surface: #13233b80;
+  --sky-indicator: var(--sky-9);
+  --sky-track: var(--sky-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --sky-1: color(display-p3 .056 .078 .116);
+      --sky-2: color(display-p3 .075 .101 .149);
+      --sky-3: color(display-p3 .089 .154 .244);
+      --sky-4: color(display-p3 .106 .207 .323);
+      --sky-5: color(display-p3 .135 .261 .394);
+      --sky-6: color(display-p3 .17 .322 .469);
+      --sky-7: color(display-p3 .205 .394 .557);
+      --sky-8: color(display-p3 .232 .48 .665);
+      --sky-9: color(display-p3 .585 .877 .983);
+      --sky-10: color(display-p3 .718 .925 .991);
+      --sky-11: color(display-p3 .536 .772 .924);
+      --sky-12: color(display-p3 .799 .947 .993);
+      --sky-a1: color(display-p3 0 .282 .996 / .055);
+      --sky-a2: color(display-p3 .157 .467 .992 / .089);
+      --sky-a3: color(display-p3 .192 .522 .996 / .19);
+      --sky-a4: color(display-p3 .212 .584 1 / .274);
+      --sky-a5: color(display-p3 .259 .631 1 / .349);
+      --sky-a6: color(display-p3 .302 .655 1 / .433);
+      --sky-a7: color(display-p3 .329 .686 1 / .526);
+      --sky-a8: color(display-p3 .325 .71 1 / .643);
+      --sky-a9: color(display-p3 .592 .894 1 / .984);
+      --sky-a10: color(display-p3 .722 .933 1 / .992);
+      --sky-a11: color(display-p3 .536 .772 .924);
+      --sky-a12: color(display-p3 .799 .947 .993);
+      --sky-surface: color(display-p3 .0863 .1333 .2196 / .5);
+    }
+  }
+}
+
+:root {
+  --sky-contrast: #1c2024;
+}
+
+@supports (color: color-mix(in oklab, white, black)) {
+  .dark, .dark-theme {
+    --sky-track: color-mix(in oklab, var(--sky-8), var(--sky-9) 65%);
+  }
+}

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

@@ -0,0 +1,127 @@
+:root, .light, .light-theme {
+  --teal-1: #fafefd;
+  --teal-2: #f3fbf9;
+  --teal-3: #e0f8f3;
+  --teal-4: #ccf3ea;
+  --teal-5: #b8eae0;
+  --teal-6: #a1ded2;
+  --teal-7: #83cdc1;
+  --teal-8: #53b9ab;
+  --teal-9: #12a594;
+  --teal-10: #0d9b8a;
+  --teal-11: #008573;
+  --teal-12: #0d3d38;
+  --teal-a1: #00cc9905;
+  --teal-a2: #00aa800c;
+  --teal-a3: #00c69d1f;
+  --teal-a4: #00c39633;
+  --teal-a5: #00b49047;
+  --teal-a6: #00a6855e;
+  --teal-a7: #0099807c;
+  --teal-a8: #009783ac;
+  --teal-a9: #009e8ced;
+  --teal-a10: #009684f2;
+  --teal-a11: #008573;
+  --teal-a12: #00332df2;
+  --teal-surface: #f0faf8cc;
+  --teal-indicator: var(--teal-9);
+  --teal-track: var(--teal-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --teal-1: color(display-p3 .983 .996 .992);
+      --teal-2: color(display-p3 .958 .983 .976);
+      --teal-3: color(display-p3 .895 .971 .952);
+      --teal-4: color(display-p3 .831 .949 .92);
+      --teal-5: color(display-p3 .761 .914 .878);
+      --teal-6: color(display-p3 .682 .864 .825);
+      --teal-7: color(display-p3 .581 .798 .756);
+      --teal-8: color(display-p3 .433 .716 .671);
+      --teal-9: color(display-p3 .297 .637 .581);
+      --teal-10: color(display-p3 .275 .599 .542);
+      --teal-11: color(display-p3 .08 .5 .43);
+      --teal-12: color(display-p3 .11 .235 .219);
+      --teal-a1: color(display-p3 .024 .757 .514 / .016);
+      --teal-a2: color(display-p3 .02 .647 .467 / .044);
+      --teal-a3: color(display-p3 .004 .741 .557 / .106);
+      --teal-a4: color(display-p3 .004 .702 .537 / .169);
+      --teal-a5: color(display-p3 .004 .643 .494 / .24);
+      --teal-a6: color(display-p3 .004 .569 .447 / .318);
+      --teal-a7: color(display-p3 .004 .518 .424 / .42);
+      --teal-a8: color(display-p3 0 .506 .424 / .569);
+      --teal-a9: color(display-p3 0 .482 .404 / .702);
+      --teal-a10: color(display-p3 0 .451 .369 / .726);
+      --teal-a11: color(display-p3 .08 .5 .43);
+      --teal-a12: color(display-p3 .11 .235 .219);
+      --teal-surface: color(display-p3 .9451 .9804 .9725 / .8);
+    }
+  }
+}
+
+.dark, .dark-theme {
+  --teal-1: #0d1514;
+  --teal-2: #111c1b;
+  --teal-3: #0d2d2a;
+  --teal-4: #023b37;
+  --teal-5: #084843;
+  --teal-6: #145750;
+  --teal-7: #1c6961;
+  --teal-8: #207e73;
+  --teal-9: #12a594;
+  --teal-10: #0eb39e;
+  --teal-11: #0bd8b6;
+  --teal-12: #adf0dd;
+  --teal-a1: #00deab05;
+  --teal-a2: #12fbe60c;
+  --teal-a3: #00ffe61e;
+  --teal-a4: #00ffe92d;
+  --teal-a5: #00ffea3b;
+  --teal-a6: #1cffe84b;
+  --teal-a7: #2efde85f;
+  --teal-a8: #32ffe775;
+  --teal-a9: #13ffe49f;
+  --teal-a10: #0dffe0ae;
+  --teal-a11: #0afed5d6;
+  --teal-a12: #b8ffebef;
+  --teal-surface: #13272580;
+  --teal-indicator: var(--teal-9);
+  --teal-track: var(--teal-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --teal-1: color(display-p3 .059 .083 .079);
+      --teal-2: color(display-p3 .075 .11 .107);
+      --teal-3: color(display-p3 .087 .175 .165);
+      --teal-4: color(display-p3 .087 .227 .214);
+      --teal-5: color(display-p3 .12 .277 .261);
+      --teal-6: color(display-p3 .162 .335 .314);
+      --teal-7: color(display-p3 .205 .406 .379);
+      --teal-8: color(display-p3 .245 .489 .453);
+      --teal-9: color(display-p3 .297 .637 .581);
+      --teal-10: color(display-p3 .319 .69 .62);
+      --teal-11: color(display-p3 .388 .835 .719);
+      --teal-12: color(display-p3 .734 .934 .87);
+      --teal-a1: color(display-p3 0 .992 .761 / .017);
+      --teal-a2: color(display-p3 .235 .988 .902 / .047);
+      --teal-a3: color(display-p3 .235 1 .898 / .118);
+      --teal-a4: color(display-p3 .18 .996 .929 / .173);
+      --teal-a5: color(display-p3 .31 1 .933 / .227);
+      --teal-a6: color(display-p3 .396 1 .933 / .286);
+      --teal-a7: color(display-p3 .443 1 .925 / .366);
+      --teal-a8: color(display-p3 .459 1 .925 / .454);
+      --teal-a9: color(display-p3 .443 .996 .906 / .61);
+      --teal-a10: color(display-p3 .439 .996 .89 / .669);
+      --teal-a11: color(display-p3 .388 .835 .719);
+      --teal-a12: color(display-p3 .734 .934 .87);
+      --teal-surface: color(display-p3 .0863 .149 .1412 / .5);
+    }
+  }
+}
+
+:root {
+  --teal-contrast: white;
+}

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

@@ -0,0 +1,127 @@
+:root, .light, .light-theme {
+  --tomato-1: #fffcfc;
+  --tomato-2: #fff8f7;
+  --tomato-3: #feebe7;
+  --tomato-4: #ffdcd3;
+  --tomato-5: #ffcdc2;
+  --tomato-6: #fdbdaf;
+  --tomato-7: #f5a898;
+  --tomato-8: #ec8e7b;
+  --tomato-9: #e54d2e;
+  --tomato-10: #dd4425;
+  --tomato-11: #d13415;
+  --tomato-12: #5c271f;
+  --tomato-a1: #ff000003;
+  --tomato-a2: #ff200008;
+  --tomato-a3: #f52b0018;
+  --tomato-a4: #ff35002c;
+  --tomato-a5: #ff2e003d;
+  --tomato-a6: #f92d0050;
+  --tomato-a7: #e7280067;
+  --tomato-a8: #db250084;
+  --tomato-a9: #df2600d1;
+  --tomato-a10: #d72400da;
+  --tomato-a11: #cd2200ea;
+  --tomato-a12: #460900e0;
+  --tomato-surface: #fff6f5cc;
+  --tomato-indicator: var(--tomato-9);
+  --tomato-track: var(--tomato-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --tomato-1: color(display-p3 .998 .989 .988);
+      --tomato-2: color(display-p3 .994 .974 .969);
+      --tomato-3: color(display-p3 .985 .924 .909);
+      --tomato-4: color(display-p3 .996 .868 .835);
+      --tomato-5: color(display-p3 .98 .812 .77);
+      --tomato-6: color(display-p3 .953 .75 .698);
+      --tomato-7: color(display-p3 .917 .673 .611);
+      --tomato-8: color(display-p3 .875 .575 .502);
+      --tomato-9: color(display-p3 .831 .345 .231);
+      --tomato-10: color(display-p3 .802 .313 .2);
+      --tomato-11: color(display-p3 .755 .259 .152);
+      --tomato-12: color(display-p3 .335 .165 .132);
+      --tomato-a1: color(display-p3 .675 .024 .024 / .012);
+      --tomato-a2: color(display-p3 .757 .145 .02 / .032);
+      --tomato-a3: color(display-p3 .831 .184 .012 / .091);
+      --tomato-a4: color(display-p3 .976 .192 .004 / .165);
+      --tomato-a5: color(display-p3 .918 .192 .004 / .232);
+      --tomato-a6: color(display-p3 .847 .173 .004 / .302);
+      --tomato-a7: color(display-p3 .788 .165 .004 / .389);
+      --tomato-a8: color(display-p3 .749 .153 .004 / .499);
+      --tomato-a9: color(display-p3 .78 .149 0 / .769);
+      --tomato-a10: color(display-p3 .757 .141 0 / .8);
+      --tomato-a11: color(display-p3 .755 .259 .152);
+      --tomato-a12: color(display-p3 .335 .165 .132);
+      --tomato-surface: color(display-p3 .9922 .9647 .9608 / .8);
+    }
+  }
+}
+
+.dark, .dark-theme {
+  --tomato-1: #181111;
+  --tomato-2: #1f1513;
+  --tomato-3: #391714;
+  --tomato-4: #4e1511;
+  --tomato-5: #5e1c16;
+  --tomato-6: #6e2920;
+  --tomato-7: #853a2d;
+  --tomato-8: #ac4d39;
+  --tomato-9: #e54d2e;
+  --tomato-10: #ec6142;
+  --tomato-11: #ff977d;
+  --tomato-12: #fbd3cb;
+  --tomato-a1: #f1121208;
+  --tomato-a2: #ff55330f;
+  --tomato-a3: #ff35232b;
+  --tomato-a4: #fd201142;
+  --tomato-a5: #fe332153;
+  --tomato-a6: #ff4f3864;
+  --tomato-a7: #fd644a7d;
+  --tomato-a8: #fe6d4ea7;
+  --tomato-a9: #fe5431e4;
+  --tomato-a10: #ff6847eb;
+  --tomato-a11: #ff977d;
+  --tomato-a12: #ffd6cefb;
+  --tomato-surface: #2d191580;
+  --tomato-indicator: var(--tomato-9);
+  --tomato-track: var(--tomato-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --tomato-1: color(display-p3 .09 .068 .067);
+      --tomato-2: color(display-p3 .115 .084 .076);
+      --tomato-3: color(display-p3 .205 .097 .083);
+      --tomato-4: color(display-p3 .282 .099 .077);
+      --tomato-5: color(display-p3 .339 .129 .101);
+      --tomato-6: color(display-p3 .398 .179 .141);
+      --tomato-7: color(display-p3 .487 .245 .194);
+      --tomato-8: color(display-p3 .629 .322 .248);
+      --tomato-9: color(display-p3 .831 .345 .231);
+      --tomato-10: color(display-p3 .862 .415 .298);
+      --tomato-11: color(display-p3 1 .585 .455);
+      --tomato-12: color(display-p3 .959 .833 .802);
+      --tomato-a1: color(display-p3 .973 .071 .071 / .026);
+      --tomato-a2: color(display-p3 .992 .376 .224 / .051);
+      --tomato-a3: color(display-p3 .996 .282 .176 / .148);
+      --tomato-a4: color(display-p3 1 .204 .118 / .232);
+      --tomato-a5: color(display-p3 1 .286 .192 / .29);
+      --tomato-a6: color(display-p3 1 .392 .278 / .353);
+      --tomato-a7: color(display-p3 1 .459 .349 / .45);
+      --tomato-a8: color(display-p3 1 .49 .369 / .601);
+      --tomato-a9: color(display-p3 1 .408 .267 / .82);
+      --tomato-a10: color(display-p3 1 .478 .341 / .853);
+      --tomato-a11: color(display-p3 1 .585 .455);
+      --tomato-a12: color(display-p3 .959 .833 .802);
+      --tomato-surface: color(display-p3 .1569 .0941 .0784 / .5);
+    }
+  }
+}
+
+:root {
+  --tomato-contrast: white;
+}

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

@@ -0,0 +1,127 @@
+: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;
+}