elements-kit 0.5.1 → 0.5.2

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

@@ -0,0 +1,127 @@
+:root, .light, .light-theme {
+  --purple-1: #fefcfe;
+  --purple-2: #fbf7fe;
+  --purple-3: #f7edfe;
+  --purple-4: #f2e2fc;
+  --purple-5: #ead5f9;
+  --purple-6: #e0c4f4;
+  --purple-7: #d1afec;
+  --purple-8: #be93e4;
+  --purple-9: #8e4ec6;
+  --purple-10: #8347b9;
+  --purple-11: #8145b5;
+  --purple-12: #402060;
+  --purple-a1: #aa00aa03;
+  --purple-a2: #8000e008;
+  --purple-a3: #8e00f112;
+  --purple-a4: #8d00e51d;
+  --purple-a5: #8000db2a;
+  --purple-a6: #7a01d03b;
+  --purple-a7: #6d00c350;
+  --purple-a8: #6600c06c;
+  --purple-a9: #5c00adb1;
+  --purple-a10: #53009eb8;
+  --purple-a11: #52009aba;
+  --purple-a12: #250049df;
+  --purple-surface: #faf5fecc;
+  --purple-indicator: var(--purple-9);
+  --purple-track: var(--purple-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --purple-1: color(display-p3 .995 .988 .996);
+      --purple-2: color(display-p3 .983 .971 .993);
+      --purple-3: color(display-p3 .963 .931 .989);
+      --purple-4: color(display-p3 .937 .888 .981);
+      --purple-5: color(display-p3 .904 .837 .966);
+      --purple-6: color(display-p3 .86 .774 .942);
+      --purple-7: color(display-p3 .799 .69 .91);
+      --purple-8: color(display-p3 .719 .583 .874);
+      --purple-9: color(display-p3 .523 .318 .751);
+      --purple-10: color(display-p3 .483 .289 .7);
+      --purple-11: color(display-p3 .473 .281 .687);
+      --purple-12: color(display-p3 .234 .132 .363);
+      --purple-a1: color(display-p3 .675 .024 .675 / .012);
+      --purple-a2: color(display-p3 .443 .024 .722 / .028);
+      --purple-a3: color(display-p3 .506 .008 .835 / .071);
+      --purple-a4: color(display-p3 .451 .004 .831 / .114);
+      --purple-a5: color(display-p3 .431 .004 .788 / .165);
+      --purple-a6: color(display-p3 .384 .004 .745 / .228);
+      --purple-a7: color(display-p3 .357 .004 .71 / .31);
+      --purple-a8: color(display-p3 .322 .004 .702 / .416);
+      --purple-a9: color(display-p3 .298 0 .639 / .683);
+      --purple-a10: color(display-p3 .271 0 .58 / .71);
+      --purple-a11: color(display-p3 .473 .281 .687);
+      --purple-a12: color(display-p3 .234 .132 .363);
+      --purple-surface: color(display-p3 .9804 .9647 .9922 / .8);
+    }
+  }
+}
+
+.dark, .dark-theme {
+  --purple-1: #18111b;
+  --purple-2: #1e1523;
+  --purple-3: #301c3b;
+  --purple-4: #3d224e;
+  --purple-5: #48295c;
+  --purple-6: #54346b;
+  --purple-7: #664282;
+  --purple-8: #8457aa;
+  --purple-9: #8e4ec6;
+  --purple-10: #9a5cd0;
+  --purple-11: #d19dff;
+  --purple-12: #ecd9fa;
+  --purple-a1: #b412f90b;
+  --purple-a2: #b744f714;
+  --purple-a3: #c150ff2d;
+  --purple-a4: #bb53fd42;
+  --purple-a5: #be5cfd51;
+  --purple-a6: #c16dfd61;
+  --purple-a7: #c378fd7a;
+  --purple-a8: #c47effa4;
+  --purple-a9: #b661ffc2;
+  --purple-a10: #bc6fffcd;
+  --purple-a11: #d19dff;
+  --purple-a12: #f1ddfffa;
+  --purple-surface: #2b173580;
+  --purple-indicator: var(--purple-9);
+  --purple-track: var(--purple-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --purple-1: color(display-p3 .09 .068 .103);
+      --purple-2: color(display-p3 .113 .082 .134);
+      --purple-3: color(display-p3 .175 .112 .224);
+      --purple-4: color(display-p3 .224 .137 .297);
+      --purple-5: color(display-p3 .264 .167 .349);
+      --purple-6: color(display-p3 .311 .208 .406);
+      --purple-7: color(display-p3 .381 .266 .496);
+      --purple-8: color(display-p3 .49 .349 .649);
+      --purple-9: color(display-p3 .523 .318 .751);
+      --purple-10: color(display-p3 .57 .373 .791);
+      --purple-11: color(display-p3 .8 .62 1);
+      --purple-12: color(display-p3 .913 .854 .971);
+      --purple-a1: color(display-p3 .686 .071 .996 / .038);
+      --purple-a2: color(display-p3 .722 .286 .996 / .072);
+      --purple-a3: color(display-p3 .718 .349 .996 / .169);
+      --purple-a4: color(display-p3 .702 .353 1 / .248);
+      --purple-a5: color(display-p3 .718 .404 1 / .303);
+      --purple-a6: color(display-p3 .733 .455 1 / .366);
+      --purple-a7: color(display-p3 .753 .506 1 / .458);
+      --purple-a8: color(display-p3 .749 .522 1 / .622);
+      --purple-a9: color(display-p3 .686 .408 1 / .736);
+      --purple-a10: color(display-p3 .71 .459 1 / .778);
+      --purple-a11: color(display-p3 .8 .62 1);
+      --purple-a12: color(display-p3 .913 .854 .971);
+      --purple-surface: color(display-p3 .149 .0941 .1961 / .5);
+    }
+  }
+}
+
+:root {
+  --purple-contrast: white;
+}

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

@@ -0,0 +1,127 @@
+:root, .light, .light-theme {
+  --red-1: #fffcfc;
+  --red-2: #fff7f7;
+  --red-3: #feebec;
+  --red-4: #ffdbdc;
+  --red-5: #ffcdce;
+  --red-6: #fdbdbe;
+  --red-7: #f4a9aa;
+  --red-8: #eb8e90;
+  --red-9: #e5484d;
+  --red-10: #dc3e42;
+  --red-11: #ce2c31;
+  --red-12: #641723;
+  --red-a1: #ff000003;
+  --red-a2: #ff000008;
+  --red-a3: #f3000d14;
+  --red-a4: #ff000824;
+  --red-a5: #ff000632;
+  --red-a6: #f8000442;
+  --red-a7: #df000356;
+  --red-a8: #d2000571;
+  --red-a9: #db0007b7;
+  --red-a10: #d10005c1;
+  --red-a11: #c40006d3;
+  --red-a12: #55000de8;
+  --red-surface: #fff5f5cc;
+  --red-indicator: var(--red-9);
+  --red-track: var(--red-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --red-1: color(display-p3 .998 .989 .988);
+      --red-2: color(display-p3 .995 .971 .971);
+      --red-3: color(display-p3 .985 .925 .925);
+      --red-4: color(display-p3 .999 .866 .866);
+      --red-5: color(display-p3 .984 .812 .811);
+      --red-6: color(display-p3 .955 .751 .749);
+      --red-7: color(display-p3 .915 .675 .672);
+      --red-8: color(display-p3 .872 .575 .572);
+      --red-9: color(display-p3 .83 .329 .324);
+      --red-10: color(display-p3 .798 .294 .285);
+      --red-11: color(display-p3 .744 .234 .222);
+      --red-12: color(display-p3 .36 .115 .143);
+      --red-a1: color(display-p3 .675 .024 .024 / .012);
+      --red-a2: color(display-p3 .863 .024 .024 / .028);
+      --red-a3: color(display-p3 .792 .008 .008 / .075);
+      --red-a4: color(display-p3 1 .008 .008 / .134);
+      --red-a5: color(display-p3 .918 .008 .008 / .189);
+      --red-a6: color(display-p3 .831 .02 .004 / .251);
+      --red-a7: color(display-p3 .741 .016 .004 / .33);
+      --red-a8: color(display-p3 .698 .012 .004 / .428);
+      --red-a9: color(display-p3 .749 .008 0 / .675);
+      --red-a10: color(display-p3 .714 .012 0 / .714);
+      --red-a11: color(display-p3 .744 .234 .222);
+      --red-a12: color(display-p3 .36 .115 .143);
+      --red-surface: color(display-p3 .9961 .9647 .9647 / .8);
+    }
+  }
+}
+
+.dark, .dark-theme {
+  --red-1: #191111;
+  --red-2: #201314;
+  --red-3: #3b1219;
+  --red-4: #500f1c;
+  --red-5: #611623;
+  --red-6: #72232d;
+  --red-7: #8c333a;
+  --red-8: #b54548;
+  --red-9: #e5484d;
+  --red-10: #ec5d5e;
+  --red-11: #ff9592;
+  --red-12: #ffd1d9;
+  --red-a1: #f4121209;
+  --red-a2: #f22f3e11;
+  --red-a3: #ff173f2d;
+  --red-a4: #fe0a3b44;
+  --red-a5: #ff204756;
+  --red-a6: #ff3e5668;
+  --red-a7: #ff536184;
+  --red-a8: #ff5d61b0;
+  --red-a9: #fe4e54e4;
+  --red-a10: #ff6465eb;
+  --red-a11: #ff9592;
+  --red-a12: #ffd1d9;
+  --red-surface: #2f151780;
+  --red-indicator: var(--red-9);
+  --red-track: var(--red-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --red-1: color(display-p3 .093 .068 .067);
+      --red-2: color(display-p3 .118 .077 .079);
+      --red-3: color(display-p3 .211 .081 .099);
+      --red-4: color(display-p3 .287 .079 .113);
+      --red-5: color(display-p3 .348 .11 .142);
+      --red-6: color(display-p3 .414 .16 .183);
+      --red-7: color(display-p3 .508 .224 .236);
+      --red-8: color(display-p3 .659 .298 .297);
+      --red-9: color(display-p3 .83 .329 .324);
+      --red-10: color(display-p3 .861 .403 .387);
+      --red-11: color(display-p3 1 .57 .55);
+      --red-12: color(display-p3 .971 .826 .852);
+      --red-a1: color(display-p3 .984 .071 .071 / .03);
+      --red-a2: color(display-p3 .996 .282 .282 / .055);
+      --red-a3: color(display-p3 1 .169 .271 / .156);
+      --red-a4: color(display-p3 1 .118 .267 / .236);
+      --red-a5: color(display-p3 1 .212 .314 / .303);
+      --red-a6: color(display-p3 1 .318 .38 / .374);
+      --red-a7: color(display-p3 1 .4 .424 / .475);
+      --red-a8: color(display-p3 1 .431 .431 / .635);
+      --red-a9: color(display-p3 1 .388 .384 / .82);
+      --red-a10: color(display-p3 1 .463 .447 / .853);
+      --red-a11: color(display-p3 1 .57 .55);
+      --red-a12: color(display-p3 .971 .826 .852);
+      --red-surface: color(display-p3 .1647 .0863 .0863 / .5);
+    }
+  }
+}
+
+:root {
+  --red-contrast: white;
+}

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;
+}