elements-kit 0.3.3 → 0.4.0

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

@@ -0,0 +1,133 @@
+:root, .light, .light-theme {
+  --lime-1: #fcfdfa;
+  --lime-2: #f8faf3;
+  --lime-3: #eef6d6;
+  --lime-4: #e2f0bd;
+  --lime-5: #d3e7a6;
+  --lime-6: #c2da91;
+  --lime-7: #abc978;
+  --lime-8: #8db654;
+  --lime-9: #bdee63;
+  --lime-10: #b0e64c;
+  --lime-11: #5c7c2f;
+  --lime-12: #37401c;
+  --lime-a1: #66990005;
+  --lime-a2: #6b95000c;
+  --lime-a3: #96c80029;
+  --lime-a4: #8fc60042;
+  --lime-a5: #81bb0059;
+  --lime-a6: #72aa006e;
+  --lime-a7: #61990087;
+  --lime-a8: #559200ab;
+  --lime-a9: #93e4009c;
+  --lime-a10: #8fdc00b3;
+  --lime-a11: #375f00d0;
+  --lime-a12: #1e2900e3;
+  --lime-surface: #f6f9f0cc;
+  --lime-indicator: var(--lime-9);
+  --lime-track: var(--lime-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --lime-1: color(display-p3 .989 .992 .981);
+      --lime-2: color(display-p3 .975 .98 .954);
+      --lime-3: color(display-p3 .939 .965 .851);
+      --lime-4: color(display-p3 .896 .94 .76);
+      --lime-5: color(display-p3 .843 .903 .678);
+      --lime-6: color(display-p3 .778 .852 .599);
+      --lime-7: color(display-p3 .694 .784 .508);
+      --lime-8: color(display-p3 .585 .707 .378);
+      --lime-9: color(display-p3 .78 .928 .466);
+      --lime-10: color(display-p3 .734 .896 .397);
+      --lime-11: color(display-p3 .386 .482 .227);
+      --lime-12: color(display-p3 .222 .25 .128);
+      --lime-a1: color(display-p3 .412 .608 .02 / .02);
+      --lime-a2: color(display-p3 .514 .592 .024 / .048);
+      --lime-a3: color(display-p3 .584 .765 .008 / .15);
+      --lime-a4: color(display-p3 .561 .757 .004 / .24);
+      --lime-a5: color(display-p3 .514 .698 .004 / .322);
+      --lime-a6: color(display-p3 .443 .627 0 / .4);
+      --lime-a7: color(display-p3 .376 .561 .004 / .491);
+      --lime-a8: color(display-p3 .333 .529 0 / .624);
+      --lime-a9: color(display-p3 .588 .867 0 / .534);
+      --lime-a10: color(display-p3 .561 .827 0 / .604);
+      --lime-a11: color(display-p3 .386 .482 .227);
+      --lime-a12: color(display-p3 .222 .25 .128);
+      --lime-surface: color(display-p3 .9725 .9765 .9412 / .8);
+    }
+  }
+}
+
+.dark, .dark-theme {
+  --lime-1: #11130c;
+  --lime-2: #151a10;
+  --lime-3: #1f2917;
+  --lime-4: #29371d;
+  --lime-5: #334423;
+  --lime-6: #3d522a;
+  --lime-7: #496231;
+  --lime-8: #577538;
+  --lime-9: #bdee63;
+  --lime-10: #d4ff70;
+  --lime-11: #bde56c;
+  --lime-12: #e3f7ba;
+  --lime-a1: #11bb0003;
+  --lime-a2: #78f7000a;
+  --lime-a3: #9bfd4c1a;
+  --lime-a4: #a7fe5c29;
+  --lime-a5: #affe6537;
+  --lime-a6: #b2fe6d46;
+  --lime-a7: #b6ff6f57;
+  --lime-a8: #b6fd6d6c;
+  --lime-a9: #caff69ed;
+  --lime-a10: #d4ff70;
+  --lime-a11: #d1fe77e4;
+  --lime-a12: #e9febff7;
+  --lime-surface: #1b211580;
+  --lime-indicator: var(--lime-9);
+  --lime-track: var(--lime-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --lime-1: color(display-p3 .067 .073 .048);
+      --lime-2: color(display-p3 .086 .1 .067);
+      --lime-3: color(display-p3 .13 .16 .099);
+      --lime-4: color(display-p3 .172 .214 .126);
+      --lime-5: color(display-p3 .213 .266 .153);
+      --lime-6: color(display-p3 .257 .321 .182);
+      --lime-7: color(display-p3 .307 .383 .215);
+      --lime-8: color(display-p3 .365 .456 .25);
+      --lime-9: color(display-p3 .78 .928 .466);
+      --lime-10: color(display-p3 .865 .995 .519);
+      --lime-11: color(display-p3 .771 .893 .485);
+      --lime-12: color(display-p3 .905 .966 .753);
+      --lime-a1: color(display-p3 .067 .941 0 / .009);
+      --lime-a2: color(display-p3 .584 .996 .071 / .038);
+      --lime-a3: color(display-p3 .69 1 .38 / .101);
+      --lime-a4: color(display-p3 .729 1 .435 / .16);
+      --lime-a5: color(display-p3 .745 1 .471 / .215);
+      --lime-a6: color(display-p3 .769 1 .482 / .274);
+      --lime-a7: color(display-p3 .769 1 .506 / .341);
+      --lime-a8: color(display-p3 .784 1 .51 / .416);
+      --lime-a9: color(display-p3 .839 1 .502 / .925);
+      --lime-a10: color(display-p3 .871 1 .522 / .996);
+      --lime-a11: color(display-p3 .771 .893 .485);
+      --lime-a12: color(display-p3 .905 .966 .753);
+      --lime-surface: color(display-p3 .1098 .1255 .0784 / .5);
+    }
+  }
+}
+
+:root {
+  --lime-contrast: #1d211c;
+}
+
+@supports (color: color-mix(in oklab, white, black)) {
+  .dark, .dark-theme {
+    --lime-track: color-mix(in oklab, var(--lime-8), var(--lime-9) 65%);
+  }
+}

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

@@ -0,0 +1,127 @@
+:root, .light, .light-theme {
+  --mauve-1: #fdfcfd;
+  --mauve-2: #faf9fb;
+  --mauve-3: #f2eff3;
+  --mauve-4: #eae7ec;
+  --mauve-5: #e3dfe6;
+  --mauve-6: #dbd8e0;
+  --mauve-7: #d0cdd7;
+  --mauve-8: #bcbac7;
+  --mauve-9: #8e8c99;
+  --mauve-10: #84828e;
+  --mauve-11: #65636d;
+  --mauve-12: #211f26;
+  --mauve-a1: #55005503;
+  --mauve-a2: #2b005506;
+  --mauve-a3: #30004010;
+  --mauve-a4: #20003618;
+  --mauve-a5: #20003820;
+  --mauve-a6: #14003527;
+  --mauve-a7: #10003332;
+  --mauve-a8: #08003145;
+  --mauve-a9: #05001d73;
+  --mauve-a10: #0500197d;
+  --mauve-a11: #0400119c;
+  --mauve-a12: #020008e0;
+  --mauve-surface: #fffc;
+  --mauve-indicator: var(--mauve-9);
+  --mauve-track: var(--mauve-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --mauve-1: color(display-p3 .991 .988 .992);
+      --mauve-2: color(display-p3 .98 .976 .984);
+      --mauve-3: color(display-p3 .946 .938 .952);
+      --mauve-4: color(display-p3 .915 .906 .925);
+      --mauve-5: color(display-p3 .886 .876 .901);
+      --mauve-6: color(display-p3 .856 .846 .875);
+      --mauve-7: color(display-p3 .814 .804 .84);
+      --mauve-8: color(display-p3 .735 .728 .777);
+      --mauve-9: color(display-p3 .555 .549 .596);
+      --mauve-10: color(display-p3 .514 .508 .552);
+      --mauve-11: color(display-p3 .395 .388 .424);
+      --mauve-12: color(display-p3 .128 .122 .147);
+      --mauve-a1: color(display-p3 .349 .024 .349 / .012);
+      --mauve-a2: color(display-p3 .184 .024 .349 / .024);
+      --mauve-a3: color(display-p3 .129 .008 .255 / .063);
+      --mauve-a4: color(display-p3 .094 .012 .216 / .095);
+      --mauve-a5: color(display-p3 .098 .008 .224 / .126);
+      --mauve-a6: color(display-p3 .055 .004 .18 / .153);
+      --mauve-a7: color(display-p3 .067 .008 .184 / .197);
+      --mauve-a8: color(display-p3 .02 .004 .176 / .271);
+      --mauve-a9: color(display-p3 .02 .004 .106 / .451);
+      --mauve-a10: color(display-p3 .012 .004 .09 / .491);
+      --mauve-a11: color(display-p3 .016 0 .059 / .612);
+      --mauve-a12: color(display-p3 .008 0 .027 / .879);
+      --mauve-surface: color(display-p3 1 1 1 / .8);
+    }
+  }
+}
+
+.dark, .dark-theme {
+  --mauve-1: #121113;
+  --mauve-2: #1a191b;
+  --mauve-3: #232225;
+  --mauve-4: #2b292d;
+  --mauve-5: #323035;
+  --mauve-6: #3c393f;
+  --mauve-7: #49474e;
+  --mauve-8: #625f69;
+  --mauve-9: #6f6d78;
+  --mauve-10: #7c7a85;
+  --mauve-11: #b5b2bc;
+  --mauve-12: #eeeef0;
+  --mauve-a1: #0000;
+  --mauve-a2: #f5f4f609;
+  --mauve-a3: #ebeaf814;
+  --mauve-a4: #eee5f81d;
+  --mauve-a5: #efe6fe25;
+  --mauve-a6: #f1e6fd30;
+  --mauve-a7: #eee9ff40;
+  --mauve-a8: #eee7ff5d;
+  --mauve-a9: #eae6fd6e;
+  --mauve-a10: #ece9fd7c;
+  --mauve-a11: #f5f1ffb7;
+  --mauve-a12: #fdfdffef;
+  --mauve-surface: #22212380;
+  --mauve-indicator: var(--mauve-9);
+  --mauve-track: var(--mauve-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --mauve-1: color(display-p3 .07 .067 .074);
+      --mauve-2: color(display-p3 .101 .098 .105);
+      --mauve-3: color(display-p3 .138 .134 .144);
+      --mauve-4: color(display-p3 .167 .161 .175);
+      --mauve-5: color(display-p3 .196 .189 .206);
+      --mauve-6: color(display-p3 .232 .225 .245);
+      --mauve-7: color(display-p3 .286 .277 .302);
+      --mauve-8: color(display-p3 .383 .373 .408);
+      --mauve-9: color(display-p3 .434 .428 .467);
+      --mauve-10: color(display-p3 .487 .48 .519);
+      --mauve-11: color(display-p3 .707 .7 .735);
+      --mauve-12: color(display-p3 .933 .933 .94);
+      --mauve-a1: color(display-p3 0 0 0 / 0);
+      --mauve-a2: color(display-p3 .996 .992 1 / .034);
+      --mauve-a3: color(display-p3 .937 .933 .992 / .077);
+      --mauve-a4: color(display-p3 .957 .918 .996 / .111);
+      --mauve-a5: color(display-p3 .937 .906 .996 / .145);
+      --mauve-a6: color(display-p3 .953 .925 .996 / .183);
+      --mauve-a7: color(display-p3 .945 .929 1 / .246);
+      --mauve-a8: color(display-p3 .937 .918 1 / .361);
+      --mauve-a9: color(display-p3 .933 .918 1 / .424);
+      --mauve-a10: color(display-p3 .941 .925 1 / .479);
+      --mauve-a11: color(display-p3 .965 .961 1 / .712);
+      --mauve-a12: color(display-p3 .992 .992 1 / .937);
+      --mauve-surface: color(display-p3 .1333 .1255 .1333 / .5);
+    }
+  }
+}
+
+:root {
+  --mauve-contrast: white;
+}

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

@@ -0,0 +1,133 @@
+:root, .light, .light-theme {
+  --mint-1: #f9fefd;
+  --mint-2: #f2fbf9;
+  --mint-3: #ddf9f2;
+  --mint-4: #c8f4e9;
+  --mint-5: #b3ecde;
+  --mint-6: #9ce0d0;
+  --mint-7: #7ecfbd;
+  --mint-8: #4cbba5;
+  --mint-9: #86ead4;
+  --mint-10: #7de0cb;
+  --mint-11: #027864;
+  --mint-12: #16433c;
+  --mint-a1: #00d5aa06;
+  --mint-a2: #00b18a0d;
+  --mint-a3: #00d29e22;
+  --mint-a4: #00cc9937;
+  --mint-a5: #00c0914c;
+  --mint-a6: #00b08663;
+  --mint-a7: #00a17d81;
+  --mint-a8: #009e7fb3;
+  --mint-a9: #00d3a579;
+  --mint-a10: #00c39982;
+  --mint-a11: #007763fd;
+  --mint-a12: #00312ae9;
+  --mint-surface: #effaf8cc;
+  --mint-indicator: var(--mint-9);
+  --mint-track: var(--mint-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --mint-1: color(display-p3 .98 .995 .992);
+      --mint-2: color(display-p3 .957 .985 .977);
+      --mint-3: color(display-p3 .888 .972 .95);
+      --mint-4: color(display-p3 .819 .951 .916);
+      --mint-5: color(display-p3 .747 .918 .873);
+      --mint-6: color(display-p3 .668 .87 .818);
+      --mint-7: color(display-p3 .567 .805 .744);
+      --mint-8: color(display-p3 .42 .724 .649);
+      --mint-9: color(display-p3 .62 .908 .834);
+      --mint-10: color(display-p3 .585 .871 .797);
+      --mint-11: color(display-p3 .203 .463 .397);
+      --mint-12: color(display-p3 .136 .259 .236);
+      --mint-a1: color(display-p3 .02 .804 .608 / .02);
+      --mint-a2: color(display-p3 .02 .647 .467 / .044);
+      --mint-a3: color(display-p3 .004 .761 .553 / .114);
+      --mint-a4: color(display-p3 .004 .741 .545 / .181);
+      --mint-a5: color(display-p3 .004 .678 .51 / .255);
+      --mint-a6: color(display-p3 .004 .616 .463 / .334);
+      --mint-a7: color(display-p3 .004 .549 .412 / .432);
+      --mint-a8: color(display-p3 0 .529 .392 / .581);
+      --mint-a9: color(display-p3 .004 .765 .569 / .381);
+      --mint-a10: color(display-p3 .004 .69 .51 / .416);
+      --mint-a11: color(display-p3 .203 .463 .397);
+      --mint-a12: color(display-p3 .136 .259 .236);
+      --mint-surface: color(display-p3 .9451 .9804 .9725 / .8);
+    }
+  }
+}
+
+.dark, .dark-theme {
+  --mint-1: #0e1515;
+  --mint-2: #0f1b1b;
+  --mint-3: #092c2b;
+  --mint-4: #003a38;
+  --mint-5: #004744;
+  --mint-6: #105650;
+  --mint-7: #1e685f;
+  --mint-8: #277f70;
+  --mint-9: #86ead4;
+  --mint-10: #a8f5e5;
+  --mint-11: #58d5ba;
+  --mint-12: #c4f5e1;
+  --mint-a1: #00dede05;
+  --mint-a2: #00f9f90b;
+  --mint-a3: #00fff61d;
+  --mint-a4: #00fff42c;
+  --mint-a5: #00fff23a;
+  --mint-a6: #0effeb4a;
+  --mint-a7: #34fde55e;
+  --mint-a8: #41ffdf76;
+  --mint-a9: #92ffe7e9;
+  --mint-a10: #aefeedf5;
+  --mint-a11: #67ffded2;
+  --mint-a12: #cbfee9f5;
+  --mint-surface: #15272780;
+  --mint-indicator: var(--mint-9);
+  --mint-track: var(--mint-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --mint-1: color(display-p3 .059 .082 .081);
+      --mint-2: color(display-p3 .068 .104 .105);
+      --mint-3: color(display-p3 .077 .17 .168);
+      --mint-4: color(display-p3 .068 .224 .22);
+      --mint-5: color(display-p3 .104 .275 .264);
+      --mint-6: color(display-p3 .154 .332 .313);
+      --mint-7: color(display-p3 .207 .403 .373);
+      --mint-8: color(display-p3 .258 .49 .441);
+      --mint-9: color(display-p3 .62 .908 .834);
+      --mint-10: color(display-p3 .725 .954 .898);
+      --mint-11: color(display-p3 .482 .825 .733);
+      --mint-12: color(display-p3 .807 .955 .887);
+      --mint-a1: color(display-p3 0 .992 .992 / .017);
+      --mint-a2: color(display-p3 .071 .98 .98 / .043);
+      --mint-a3: color(display-p3 .176 .996 .996 / .11);
+      --mint-a4: color(display-p3 .071 .996 .973 / .169);
+      --mint-a5: color(display-p3 .243 1 .949 / .223);
+      --mint-a6: color(display-p3 .369 1 .933 / .286);
+      --mint-a7: color(display-p3 .459 1 .914 / .362);
+      --mint-a8: color(display-p3 .49 1 .89 / .454);
+      --mint-a9: color(display-p3 .678 .996 .914 / .904);
+      --mint-a10: color(display-p3 .761 1 .941 / .95);
+      --mint-a11: color(display-p3 .482 .825 .733);
+      --mint-a12: color(display-p3 .807 .955 .887);
+      --mint-surface: color(display-p3 .0941 .149 .1412 / .5);
+    }
+  }
+}
+
+:root {
+  --mint-contrast: #1a211e;
+}
+
+@supports (color: color-mix(in oklab, white, black)) {
+  .dark, .dark-theme {
+    --mint-track: color-mix(in oklab, var(--mint-8), var(--mint-9) 65%);
+  }
+}

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

@@ -0,0 +1,127 @@
+:root, .light, .light-theme {
+  --olive-1: #fcfdfc;
+  --olive-2: #f8faf8;
+  --olive-3: #eff1ef;
+  --olive-4: #e7e9e7;
+  --olive-5: #dfe2df;
+  --olive-6: #d7dad7;
+  --olive-7: #cccfcc;
+  --olive-8: #b9bcb8;
+  --olive-9: #898e87;
+  --olive-10: #7f847d;
+  --olive-11: #60655f;
+  --olive-12: #1d211c;
+  --olive-a1: #00550003;
+  --olive-a2: #00490007;
+  --olive-a3: #00200010;
+  --olive-a4: #00160018;
+  --olive-a5: #00180020;
+  --olive-a6: #00140028;
+  --olive-a7: #000f0033;
+  --olive-a8: #040f0047;
+  --olive-a9: #050f0078;
+  --olive-a10: #040e0082;
+  --olive-a11: #020a00a0;
+  --olive-a12: #010600e3;
+  --olive-surface: #fffc;
+  --olive-indicator: var(--olive-9);
+  --olive-track: var(--olive-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --olive-1: color(display-p3 .989 .992 .989);
+      --olive-2: color(display-p3 .974 .98 .973);
+      --olive-3: color(display-p3 .939 .945 .937);
+      --olive-4: color(display-p3 .907 .914 .905);
+      --olive-5: color(display-p3 .878 .885 .875);
+      --olive-6: color(display-p3 .846 .855 .843);
+      --olive-7: color(display-p3 .803 .812 .8);
+      --olive-8: color(display-p3 .727 .738 .723);
+      --olive-9: color(display-p3 .541 .556 .532);
+      --olive-10: color(display-p3 .5 .515 .491);
+      --olive-11: color(display-p3 .38 .395 .374);
+      --olive-12: color(display-p3 .117 .129 .111);
+      --olive-a1: color(display-p3 .024 .349 .024 / .012);
+      --olive-a2: color(display-p3 .024 .302 .024 / .028);
+      --olive-a3: color(display-p3 .008 .129 .008 / .063);
+      --olive-a4: color(display-p3 .012 .094 .012 / .095);
+      --olive-a5: color(display-p3 .035 .098 .008 / .126);
+      --olive-a6: color(display-p3 .027 .078 .004 / .157);
+      --olive-a7: color(display-p3 .02 .059 0 / .2);
+      --olive-a8: color(display-p3 .02 .059 .004 / .279);
+      --olive-a9: color(display-p3 .02 .051 .004 / .467);
+      --olive-a10: color(display-p3 .024 .047 0 / .51);
+      --olive-a11: color(display-p3 .012 .039 0 / .628);
+      --olive-a12: color(display-p3 .008 .024 0 / .891);
+      --olive-surface: color(display-p3 1 1 1 / .8);
+    }
+  }
+}
+
+.dark, .dark-theme {
+  --olive-1: #111210;
+  --olive-2: #181917;
+  --olive-3: #212220;
+  --olive-4: #282a27;
+  --olive-5: #2f312e;
+  --olive-6: #383a36;
+  --olive-7: #454843;
+  --olive-8: #5c625b;
+  --olive-9: #687066;
+  --olive-10: #767d74;
+  --olive-11: #afb5ad;
+  --olive-12: #eceeec;
+  --olive-a1: #0000;
+  --olive-a2: #f1f2f008;
+  --olive-a3: #f4f5f312;
+  --olive-a4: #f3fef21a;
+  --olive-a5: #f2fbf122;
+  --olive-a6: #f4faed2c;
+  --olive-a7: #f2fced3b;
+  --olive-a8: #edfdeb57;
+  --olive-a9: #ebfde766;
+  --olive-a10: #f0fdec74;
+  --olive-a11: #f6fef4b0;
+  --olive-a12: #fdfffded;
+  --olive-surface: #1f201e80;
+  --olive-indicator: var(--olive-9);
+  --olive-track: var(--olive-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --olive-1: color(display-p3 .067 .07 .063);
+      --olive-2: color(display-p3 .095 .098 .091);
+      --olive-3: color(display-p3 .131 .135 .126);
+      --olive-4: color(display-p3 .158 .163 .153);
+      --olive-5: color(display-p3 .186 .192 .18);
+      --olive-6: color(display-p3 .221 .229 .215);
+      --olive-7: color(display-p3 .273 .284 .266);
+      --olive-8: color(display-p3 .365 .382 .359);
+      --olive-9: color(display-p3 .414 .438 .404);
+      --olive-10: color(display-p3 .467 .49 .458);
+      --olive-11: color(display-p3 .69 .709 .682);
+      --olive-12: color(display-p3 .927 .933 .926);
+      --olive-a1: color(display-p3 0 0 0 / 0);
+      --olive-a2: color(display-p3 .984 .988 .976 / .03);
+      --olive-a3: color(display-p3 .992 .996 .988 / .068);
+      --olive-a4: color(display-p3 .953 .996 .949 / .102);
+      --olive-a5: color(display-p3 .969 1 .965 / .131);
+      --olive-a6: color(display-p3 .973 1 .969 / .169);
+      --olive-a7: color(display-p3 .98 1 .961 / .228);
+      --olive-a8: color(display-p3 .961 1 .957 / .334);
+      --olive-a9: color(display-p3 .949 1 .922 / .397);
+      --olive-a10: color(display-p3 .953 1 .941 / .452);
+      --olive-a11: color(display-p3 .976 1 .965 / .688);
+      --olive-a12: color(display-p3 .992 1 .992 / .929);
+      --olive-surface: color(display-p3 .1176 .1255 .1176 / .5);
+    }
+  }
+}
+
+:root {
+  --olive-contrast: white;
+}

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

@@ -0,0 +1,127 @@
+:root, .light, .light-theme {
+  --orange-1: #fefcfb;
+  --orange-2: #fff7ed;
+  --orange-3: #ffefd6;
+  --orange-4: #ffdfb5;
+  --orange-5: #ffd19a;
+  --orange-6: #ffc182;
+  --orange-7: #f5ae73;
+  --orange-8: #ec9455;
+  --orange-9: #f76b15;
+  --orange-10: #ef5f00;
+  --orange-11: #cc4e00;
+  --orange-12: #582d1d;
+  --orange-a1: #c0400004;
+  --orange-a2: #ff8e0012;
+  --orange-a3: #ff9c0029;
+  --orange-a4: #ff91014a;
+  --orange-a5: #ff8b0065;
+  --orange-a6: #ff81007d;
+  --orange-a7: #ed6c008c;
+  --orange-a8: #e35f00aa;
+  --orange-a9: #f65e00ea;
+  --orange-a10: #ef5f00;
+  --orange-a11: #cc4e00;
+  --orange-a12: #431200e2;
+  --orange-surface: #fff5e9cc;
+  --orange-indicator: var(--orange-9);
+  --orange-track: var(--orange-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --orange-1: color(display-p3 .995 .988 .985);
+      --orange-2: color(display-p3 .994 .968 .934);
+      --orange-3: color(display-p3 .989 .938 .85);
+      --orange-4: color(display-p3 1 .874 .687);
+      --orange-5: color(display-p3 1 .821 .583);
+      --orange-6: color(display-p3 .975 .767 .545);
+      --orange-7: color(display-p3 .919 .693 .486);
+      --orange-8: color(display-p3 .877 .597 .379);
+      --orange-9: color(display-p3 .9 .45 .2);
+      --orange-10: color(display-p3 .87 .409 .164);
+      --orange-11: color(display-p3 .76 .34 0);
+      --orange-12: color(display-p3 .323 .185 .127);
+      --orange-a1: color(display-p3 .757 .267 .024 / .016);
+      --orange-a2: color(display-p3 .886 .533 .008 / .067);
+      --orange-a3: color(display-p3 .922 .584 .008 / .15);
+      --orange-a4: color(display-p3 1 .604 .004 / .314);
+      --orange-a5: color(display-p3 1 .569 .004 / .416);
+      --orange-a6: color(display-p3 .949 .494 .004 / .455);
+      --orange-a7: color(display-p3 .839 .408 0 / .514);
+      --orange-a8: color(display-p3 .804 .349 0 / .62);
+      --orange-a9: color(display-p3 .878 .314 0 / .8);
+      --orange-a10: color(display-p3 .843 .29 0 / .836);
+      --orange-a11: color(display-p3 .76 .34 0);
+      --orange-a12: color(display-p3 .323 .185 .127);
+      --orange-surface: color(display-p3 .9961 .9608 .9176 / .8);
+    }
+  }
+}
+
+.dark, .dark-theme {
+  --orange-1: #17120e;
+  --orange-2: #1e160f;
+  --orange-3: #331e0b;
+  --orange-4: #462100;
+  --orange-5: #562800;
+  --orange-6: #66350c;
+  --orange-7: #7e451d;
+  --orange-8: #a35829;
+  --orange-9: #f76b15;
+  --orange-10: #ff801f;
+  --orange-11: #ffa057;
+  --orange-12: #ffe0c2;
+  --orange-a1: #ec360007;
+  --orange-a2: #fe6d000e;
+  --orange-a3: #fb6a0025;
+  --orange-a4: #ff590039;
+  --orange-a5: #ff61004a;
+  --orange-a6: #fd75045c;
+  --orange-a7: #ff832c75;
+  --orange-a8: #fe84389d;
+  --orange-a9: #fe6d15f7;
+  --orange-a10: #ff801f;
+  --orange-a11: #ffa057;
+  --orange-a12: #ffe0c2;
+  --orange-surface: #271d1380;
+  --orange-indicator: var(--orange-9);
+  --orange-track: var(--orange-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --orange-1: color(display-p3 .088 .07 .057);
+      --orange-2: color(display-p3 .113 .089 .061);
+      --orange-3: color(display-p3 .189 .12 .056);
+      --orange-4: color(display-p3 .262 .132 0);
+      --orange-5: color(display-p3 .315 .168 .016);
+      --orange-6: color(display-p3 .376 .219 .088);
+      --orange-7: color(display-p3 .465 .283 .147);
+      --orange-8: color(display-p3 .601 .359 .201);
+      --orange-9: color(display-p3 .9 .45 .2);
+      --orange-10: color(display-p3 .98 .51 .23);
+      --orange-11: color(display-p3 1 .63 .38);
+      --orange-12: color(display-p3 .98 .883 .775);
+      --orange-a1: color(display-p3 .961 .247 0 / .022);
+      --orange-a2: color(display-p3 .992 .529 0 / .051);
+      --orange-a3: color(display-p3 .996 .486 0 / .131);
+      --orange-a4: color(display-p3 .996 .384 0 / .211);
+      --orange-a5: color(display-p3 1 .455 0 / .265);
+      --orange-a6: color(display-p3 1 .529 .129 / .332);
+      --orange-a7: color(display-p3 1 .569 .251 / .429);
+      --orange-a8: color(display-p3 1 .584 .302 / .572);
+      --orange-a9: color(display-p3 1 .494 .216 / .895);
+      --orange-a10: color(display-p3 1 .522 .235 / .979);
+      --orange-a11: color(display-p3 1 .63 .38);
+      --orange-a12: color(display-p3 .98 .883 .775);
+      --orange-surface: color(display-p3 .1412 .1098 .0706 / .5);
+    }
+  }
+}
+
+:root {
+  --orange-contrast: white;
+}