elements-kit 0.3.3 → 0.4.0

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

@@ -0,0 +1,127 @@
+:root, .light, .light-theme {
+  --sage-1: #fbfdfc;
+  --sage-2: #f7f9f8;
+  --sage-3: #eef1f0;
+  --sage-4: #e6e9e8;
+  --sage-5: #dfe2e0;
+  --sage-6: #d7dad9;
+  --sage-7: #cbcfcd;
+  --sage-8: #b8bcba;
+  --sage-9: #868e8b;
+  --sage-10: #7c8481;
+  --sage-11: #5f6563;
+  --sage-12: #1a211e;
+  --sage-a1: #00804004;
+  --sage-a2: #00402008;
+  --sage-a3: #002d1e11;
+  --sage-a4: #001f1519;
+  --sage-a5: #00180820;
+  --sage-a6: #00140d28;
+  --sage-a7: #00140a34;
+  --sage-a8: #000f0847;
+  --sage-a9: #00110b79;
+  --sage-a10: #00100a83;
+  --sage-a11: #000a07a0;
+  --sage-a12: #000805e5;
+  --sage-surface: #fffc;
+  --sage-indicator: var(--sage-9);
+  --sage-track: var(--sage-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --sage-1: color(display-p3 .986 .992 .988);
+      --sage-2: color(display-p3 .97 .977 .974);
+      --sage-3: color(display-p3 .935 .944 .94);
+      --sage-4: color(display-p3 .904 .913 .909);
+      --sage-5: color(display-p3 .875 .885 .88);
+      --sage-6: color(display-p3 .844 .854 .849);
+      --sage-7: color(display-p3 .8 .811 .806);
+      --sage-8: color(display-p3 .725 .738 .732);
+      --sage-9: color(display-p3 .531 .556 .546);
+      --sage-10: color(display-p3 .492 .515 .506);
+      --sage-11: color(display-p3 .377 .395 .389);
+      --sage-12: color(display-p3 .107 .129 .118);
+      --sage-a1: color(display-p3 .024 .514 .267 / .016);
+      --sage-a2: color(display-p3 .02 .267 .145 / .032);
+      --sage-a3: color(display-p3 .008 .184 .125 / .067);
+      --sage-a4: color(display-p3 .012 .094 .051 / .095);
+      --sage-a5: color(display-p3 .008 .098 .035 / .126);
+      --sage-a6: color(display-p3 .004 .078 .027 / .157);
+      --sage-a7: color(display-p3 0 .059 .039 / .2);
+      --sage-a8: color(display-p3 .004 .047 .031 / .275);
+      --sage-a9: color(display-p3 .004 .059 .035 / .471);
+      --sage-a10: color(display-p3 0 .047 .031 / .51);
+      --sage-a11: color(display-p3 0 .031 .02 / .624);
+      --sage-a12: color(display-p3 0 .027 .012 / .895);
+      --sage-surface: color(display-p3 1 1 1 / .8);
+    }
+  }
+}
+
+.dark, .dark-theme {
+  --sage-1: #101211;
+  --sage-2: #171918;
+  --sage-3: #202221;
+  --sage-4: #272a29;
+  --sage-5: #2e3130;
+  --sage-6: #373b39;
+  --sage-7: #444947;
+  --sage-8: #5b625f;
+  --sage-9: #63706b;
+  --sage-10: #717d79;
+  --sage-11: #adb5b2;
+  --sage-12: #eceeed;
+  --sage-a1: #0000;
+  --sage-a2: #f0f2f108;
+  --sage-a3: #f3f5f412;
+  --sage-a4: #f2fefd1a;
+  --sage-a5: #f1fbfa22;
+  --sage-a6: #edfbf42d;
+  --sage-a7: #edfcf73c;
+  --sage-a8: #ebfdf657;
+  --sage-a9: #dffdf266;
+  --sage-a10: #e5fdf674;
+  --sage-a11: #f4fefbb0;
+  --sage-a12: #fdfffeed;
+  --sage-surface: #1e201f80;
+  --sage-indicator: var(--sage-9);
+  --sage-track: var(--sage-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --sage-1: color(display-p3 .064 .07 .067);
+      --sage-2: color(display-p3 .092 .098 .094);
+      --sage-3: color(display-p3 .128 .135 .131);
+      --sage-4: color(display-p3 .155 .164 .159);
+      --sage-5: color(display-p3 .183 .193 .188);
+      --sage-6: color(display-p3 .218 .23 .224);
+      --sage-7: color(display-p3 .269 .285 .277);
+      --sage-8: color(display-p3 .362 .382 .373);
+      --sage-9: color(display-p3 .398 .438 .421);
+      --sage-10: color(display-p3 .453 .49 .474);
+      --sage-11: color(display-p3 .685 .709 .697);
+      --sage-12: color(display-p3 .927 .933 .93);
+      --sage-a1: color(display-p3 0 0 0 / 0);
+      --sage-a2: color(display-p3 .976 .988 .984 / .03);
+      --sage-a3: color(display-p3 .992 .945 .941 / .072);
+      --sage-a4: color(display-p3 .988 .996 .992 / .102);
+      --sage-a5: color(display-p3 .992 1 .996 / .131);
+      --sage-a6: color(display-p3 .973 1 .976 / .173);
+      --sage-a7: color(display-p3 .957 1 .976 / .233);
+      --sage-a8: color(display-p3 .957 1 .984 / .334);
+      --sage-a9: color(display-p3 .902 1 .957 / .397);
+      --sage-a10: color(display-p3 .929 1 .973 / .452);
+      --sage-a11: color(display-p3 .969 1 .988 / .688);
+      --sage-a12: color(display-p3 .992 1 .996 / .929);
+      --sage-surface: color(display-p3 .1176 .1255 .1176 / .5);
+    }
+  }
+}
+
+:root {
+  --sage-contrast: white;
+}

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

@@ -0,0 +1,127 @@
+:root, .light, .light-theme {
+  --sand-1: #fdfdfc;
+  --sand-2: #f9f9f8;
+  --sand-3: #f1f0ef;
+  --sand-4: #e9e8e6;
+  --sand-5: #e2e1de;
+  --sand-6: #dad9d6;
+  --sand-7: #cfceca;
+  --sand-8: #bcbbb5;
+  --sand-9: #8d8d86;
+  --sand-10: #82827c;
+  --sand-11: #63635e;
+  --sand-12: #21201c;
+  --sand-a1: #55550003;
+  --sand-a2: #25250007;
+  --sand-a3: #20100010;
+  --sand-a4: #1f150019;
+  --sand-a5: #1f180021;
+  --sand-a6: #19130029;
+  --sand-a7: #19140035;
+  --sand-a8: #1915014a;
+  --sand-a9: #0f0f0079;
+  --sand-a10: #0c0c0083;
+  --sand-a11: #080800a1;
+  --sand-a12: #060500e3;
+  --sand-surface: #fffc;
+  --sand-indicator: var(--sand-9);
+  --sand-track: var(--sand-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --sand-1: color(display-p3 .992 .992 .989);
+      --sand-2: color(display-p3 .977 .977 .973);
+      --sand-3: color(display-p3 .943 .942 .936);
+      --sand-4: color(display-p3 .913 .912 .903);
+      --sand-5: color(display-p3 .885 .883 .873);
+      --sand-6: color(display-p3 .854 .852 .839);
+      --sand-7: color(display-p3 .813 .81 .794);
+      --sand-8: color(display-p3 .738 .734 .713);
+      --sand-9: color(display-p3 .553 .553 .528);
+      --sand-10: color(display-p3 .511 .511 .488);
+      --sand-11: color(display-p3 .388 .388 .37);
+      --sand-12: color(display-p3 .129 .126 .111);
+      --sand-a1: color(display-p3 .349 .349 .024 / .012);
+      --sand-a2: color(display-p3 .161 .161 .024 / .028);
+      --sand-a3: color(display-p3 .067 .067 .008 / .063);
+      --sand-a4: color(display-p3 .129 .129 .012 / .099);
+      --sand-a5: color(display-p3 .098 .067 .008 / .126);
+      --sand-a6: color(display-p3 .102 .075 .004 / .161);
+      --sand-a7: color(display-p3 .098 .098 .004 / .208);
+      --sand-a8: color(display-p3 .086 .075 .004 / .287);
+      --sand-a9: color(display-p3 .051 .051 .004 / .471);
+      --sand-a10: color(display-p3 .047 .047 0 / .514);
+      --sand-a11: color(display-p3 .031 .031 0 / .632);
+      --sand-a12: color(display-p3 .024 .02 0 / .891);
+      --sand-surface: color(display-p3 1 1 1 / .8);
+    }
+  }
+}
+
+.dark, .dark-theme {
+  --sand-1: #111110;
+  --sand-2: #191918;
+  --sand-3: #222221;
+  --sand-4: #2a2a28;
+  --sand-5: #31312e;
+  --sand-6: #3b3a37;
+  --sand-7: #494844;
+  --sand-8: #62605b;
+  --sand-9: #6f6d66;
+  --sand-10: #7c7b74;
+  --sand-11: #b5b3ad;
+  --sand-12: #eeeeec;
+  --sand-a1: #0000;
+  --sand-a2: #f4f4f309;
+  --sand-a3: #f6f6f513;
+  --sand-a4: #fefef31b;
+  --sand-a5: #fbfbeb23;
+  --sand-a6: #fffaed2d;
+  --sand-a7: #fffbed3c;
+  --sand-a8: #fff9eb57;
+  --sand-a9: #fffae965;
+  --sand-a10: #fffdee73;
+  --sand-a11: #fffcf4b0;
+  --sand-a12: #fffffded;
+  --sand-surface: #21212080;
+  --sand-indicator: var(--sand-9);
+  --sand-track: var(--sand-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --sand-1: color(display-p3 .067 .067 .063);
+      --sand-2: color(display-p3 .098 .098 .094);
+      --sand-3: color(display-p3 .135 .135 .129);
+      --sand-4: color(display-p3 .164 .163 .156);
+      --sand-5: color(display-p3 .193 .192 .183);
+      --sand-6: color(display-p3 .23 .229 .217);
+      --sand-7: color(display-p3 .285 .282 .267);
+      --sand-8: color(display-p3 .384 .378 .357);
+      --sand-9: color(display-p3 .434 .428 .403);
+      --sand-10: color(display-p3 .487 .481 .456);
+      --sand-11: color(display-p3 .707 .703 .68);
+      --sand-12: color(display-p3 .933 .933 .926);
+      --sand-a1: color(display-p3 0 0 0 / 0);
+      --sand-a2: color(display-p3 .992 .992 .988 / .034);
+      --sand-a3: color(display-p3 .996 .996 .992 / .072);
+      --sand-a4: color(display-p3 .992 .992 .953 / .106);
+      --sand-a5: color(display-p3 1 1 .965 / .135);
+      --sand-a6: color(display-p3 1 .976 .929 / .177);
+      --sand-a7: color(display-p3 1 .984 .929 / .236);
+      --sand-a8: color(display-p3 1 .976 .925 / .341);
+      --sand-a9: color(display-p3 1 .98 .925 / .395);
+      --sand-a10: color(display-p3 1 .992 .933 / .45);
+      --sand-a11: color(display-p3 1 .996 .961 / .685);
+      --sand-a12: color(display-p3 1 1 .992 / .929);
+      --sand-surface: color(display-p3 .1255 .1255 .1255 / .5);
+    }
+  }
+}
+
+:root {
+  --sand-contrast: white;
+}

package/dist/ui/styles/colors/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/colors/slate.css

@@ -0,0 +1,127 @@
+:root, .light, .light-theme {
+  --slate-1: #fcfcfd;
+  --slate-2: #f9f9fb;
+  --slate-3: #f0f0f3;
+  --slate-4: #e8e8ec;
+  --slate-5: #e0e1e6;
+  --slate-6: #d9d9e0;
+  --slate-7: #cdced6;
+  --slate-8: #b9bbc6;
+  --slate-9: #8b8d98;
+  --slate-10: #80838d;
+  --slate-11: #60646c;
+  --slate-12: #1c2024;
+  --slate-a1: #00005503;
+  --slate-a2: #00005506;
+  --slate-a3: #0000330f;
+  --slate-a4: #00002d17;
+  --slate-a5: #0009321f;
+  --slate-a6: #00002f26;
+  --slate-a7: #00062e32;
+  --slate-a8: #00083046;
+  --slate-a9: #00051d74;
+  --slate-a10: #00071b7f;
+  --slate-a11: #0007149f;
+  --slate-a12: #000509e3;
+  --slate-surface: #fffc;
+  --slate-indicator: var(--slate-9);
+  --slate-track: var(--slate-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --slate-1: color(display-p3 .988 .988 .992);
+      --slate-2: color(display-p3 .976 .976 .984);
+      --slate-3: color(display-p3 .94 .941 .953);
+      --slate-4: color(display-p3 .908 .909 .925);
+      --slate-5: color(display-p3 .88 .881 .901);
+      --slate-6: color(display-p3 .85 .852 .876);
+      --slate-7: color(display-p3 .805 .808 .838);
+      --slate-8: color(display-p3 .727 .733 .773);
+      --slate-9: color(display-p3 .547 .553 .592);
+      --slate-10: color(display-p3 .503 .512 .549);
+      --slate-11: color(display-p3 .379 .392 .421);
+      --slate-12: color(display-p3 .113 .125 .14);
+      --slate-a1: color(display-p3 .024 .024 .349 / .012);
+      --slate-a2: color(display-p3 .024 .024 .349 / .024);
+      --slate-a3: color(display-p3 .004 .004 .204 / .059);
+      --slate-a4: color(display-p3 .012 .012 .184 / .091);
+      --slate-a5: color(display-p3 .004 .039 .2 / .122);
+      --slate-a6: color(display-p3 .008 .008 .165 / .15);
+      --slate-a7: color(display-p3 .008 .027 .184 / .197);
+      --slate-a8: color(display-p3 .004 .031 .176 / .275);
+      --slate-a9: color(display-p3 .004 .02 .106 / .455);
+      --slate-a10: color(display-p3 .004 .027 .098 / .499);
+      --slate-a11: color(display-p3 0 .02 .063 / .62);
+      --slate-a12: color(display-p3 0 .012 .031 / .887);
+      --slate-surface: color(display-p3 1 1 1 / .8);
+    }
+  }
+}
+
+.dark, .dark-theme {
+  --slate-1: #111113;
+  --slate-2: #18191b;
+  --slate-3: #212225;
+  --slate-4: #272a2d;
+  --slate-5: #2e3135;
+  --slate-6: #363a3f;
+  --slate-7: #43484e;
+  --slate-8: #5a6169;
+  --slate-9: #696e77;
+  --slate-10: #777b84;
+  --slate-11: #b0b4ba;
+  --slate-12: #edeef0;
+  --slate-a1: #0000;
+  --slate-a2: #d8f4f609;
+  --slate-a3: #ddeaf814;
+  --slate-a4: #d3edf81d;
+  --slate-a5: #d9edfe25;
+  --slate-a6: #d6ebfd30;
+  --slate-a7: #d9edff40;
+  --slate-a8: #d9edff5d;
+  --slate-a9: #dfebfd6d;
+  --slate-a10: #e5edfd7b;
+  --slate-a11: #f1f7feb5;
+  --slate-a12: #fcfdffef;
+  --slate-surface: #1f212380;
+  --slate-indicator: var(--slate-9);
+  --slate-track: var(--slate-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --slate-1: color(display-p3 .067 .067 .074);
+      --slate-2: color(display-p3 .095 .098 .105);
+      --slate-3: color(display-p3 .13 .135 .145);
+      --slate-4: color(display-p3 .156 .163 .176);
+      --slate-5: color(display-p3 .183 .191 .206);
+      --slate-6: color(display-p3 .215 .226 .244);
+      --slate-7: color(display-p3 .265 .28 .302);
+      --slate-8: color(display-p3 .357 .381 .409);
+      --slate-9: color(display-p3 .415 .431 .463);
+      --slate-10: color(display-p3 .469 .483 .514);
+      --slate-11: color(display-p3 .692 .704 .728);
+      --slate-12: color(display-p3 .93 .933 .94);
+      --slate-a1: color(display-p3 0 0 0 / 0);
+      --slate-a2: color(display-p3 .875 .992 1 / .034);
+      --slate-a3: color(display-p3 .882 .933 .992 / .077);
+      --slate-a4: color(display-p3 .882 .953 .996 / .111);
+      --slate-a5: color(display-p3 .878 .929 .996 / .145);
+      --slate-a6: color(display-p3 .882 .949 .996 / .183);
+      --slate-a7: color(display-p3 .882 .929 1 / .246);
+      --slate-a8: color(display-p3 .871 .937 1 / .361);
+      --slate-a9: color(display-p3 .898 .937 1 / .42);
+      --slate-a10: color(display-p3 .918 .945 1 / .475);
+      --slate-a11: color(display-p3 .949 .969 .996 / .708);
+      --slate-a12: color(display-p3 .988 .992 1 / .937);
+      --slate-surface: color(display-p3 .1176 .1255 .1333 / .5);
+    }
+  }
+}
+
+:root {
+  --slate-contrast: white;
+}

package/dist/ui/styles/colors/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;
+}