elements-kit 0.5.1 → 0.5.2

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

@@ -1,127 +1,30 @@
-:root, .light, .light-theme {
-  --green-1: #fbfefc;
-  --green-2: #f4fbf6;
-  --green-3: #e6f6eb;
-  --green-4: #d6f1df;
-  --green-5: #c4e8d1;
-  --green-6: #adddc0;
-  --green-7: #8eceaa;
-  --green-8: #5bb98b;
-  --green-9: #30a46c;
-  --green-10: #2b9a66;
-  --green-11: #218358;
-  --green-12: #193b2d;
-  --green-a1: #00c04004;
-  --green-a2: #00a32f0b;
-  --green-a3: #00a43319;
-  --green-a4: #00a83829;
-  --green-a5: #019c393b;
-  --green-a6: #00963c52;
-  --green-a7: #00914071;
-  --green-a8: #00924ba4;
-  --green-a9: #008f4acf;
-  --green-a10: #008647d4;
-  --green-a11: #00713fde;
-  --green-a12: #002616e6;
-  --green-surface: #f1faf4cc;
-  --green-indicator: var(--green-9);
-  --green-track: var(--green-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    :root, .light, .light-theme {
-      --green-1: color(display-p3 .986 .996 .989);
-      --green-2: color(display-p3 .963 .983 .967);
-      --green-3: color(display-p3 .913 .964 .925);
-      --green-4: color(display-p3 .859 .94 .879);
-      --green-5: color(display-p3 .796 .907 .826);
-      --green-6: color(display-p3 .718 .863 .761);
-      --green-7: color(display-p3 .61 .801 .675);
-      --green-8: color(display-p3 .451 .715 .559);
-      --green-9: color(display-p3 .332 .634 .442);
-      --green-10: color(display-p3 .308 .595 .417);
-      --green-11: color(display-p3 .19 .5 .32);
-      --green-12: color(display-p3 .132 .228 .18);
-      --green-a1: color(display-p3 .024 .757 .267 / .016);
-      --green-a2: color(display-p3 .024 .565 .129 / .036);
-      --green-a3: color(display-p3 .012 .596 .145 / .087);
-      --green-a4: color(display-p3 .008 .588 .145 / .142);
-      --green-a5: color(display-p3 .004 .541 .157 / .204);
-      --green-a6: color(display-p3 .004 .518 .157 / .283);
-      --green-a7: color(display-p3 .004 .486 .165 / .389);
-      --green-a8: color(display-p3 0 .478 .2 / .55);
-      --green-a9: color(display-p3 0 .455 .165 / .667);
-      --green-a10: color(display-p3 0 .416 .153 / .691);
-      --green-a11: color(display-p3 .19 .5 .32);
-      --green-a12: color(display-p3 .132 .228 .18);
-      --green-surface: color(display-p3 .9569 .9804 .9608 / .8);
-    }
-  }
-}
-
-.dark, .dark-theme {
-  --green-1: #0e1512;
-  --green-2: #121b17;
-  --green-3: #132d21;
-  --green-4: #113b29;
-  --green-5: #174933;
-  --green-6: #20573e;
-  --green-7: #28684a;
-  --green-8: #2f7c57;
-  --green-9: #30a46c;
-  --green-10: #33b074;
-  --green-11: #3dd68c;
-  --green-12: #b1f1cb;
-  --green-a1: #00de4505;
-  --green-a2: #29f99d0b;
-  --green-a3: #22ff991e;
-  --green-a4: #11ff992d;
-  --green-a5: #2bffa23c;
-  --green-a6: #44ffaa4b;
-  --green-a7: #50fdac5e;
-  --green-a8: #54ffad73;
-  --green-a9: #44ffa49e;
-  --green-a10: #43fea4ab;
-  --green-a11: #46fea5d4;
-  --green-a12: #bbffd7f0;
-  --green-surface: #15251d80;
-  --green-indicator: var(--green-9);
-  --green-track: var(--green-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    .dark, .dark-theme {
-      --green-1: color(display-p3 .062 .083 .071);
-      --green-2: color(display-p3 .079 .106 .09);
-      --green-3: color(display-p3 .1 .173 .133);
-      --green-4: color(display-p3 .115 .229 .166);
-      --green-5: color(display-p3 .147 .282 .206);
-      --green-6: color(display-p3 .185 .338 .25);
-      --green-7: color(display-p3 .227 .403 .298);
-      --green-8: color(display-p3 .27 .479 .351);
-      --green-9: color(display-p3 .332 .634 .442);
-      --green-10: color(display-p3 .357 .682 .474);
-      --green-11: color(display-p3 .434 .828 .573);
-      --green-12: color(display-p3 .747 .938 .807);
-      --green-a1: color(display-p3 0 .992 .298 / .017);
-      --green-a2: color(display-p3 .341 .98 .616 / .043);
-      --green-a3: color(display-p3 .376 .996 .655 / .114);
-      --green-a4: color(display-p3 .341 .996 .635 / .173);
-      --green-a5: color(display-p3 .408 1 .678 / .232);
-      --green-a6: color(display-p3 .475 1 .706 / .29);
-      --green-a7: color(display-p3 .514 1 .706 / .362);
-      --green-a8: color(display-p3 .529 1 .718 / .442);
-      --green-a9: color(display-p3 .502 .996 .682 / .61);
-      --green-a10: color(display-p3 .506 1 .682 / .66);
-      --green-a11: color(display-p3 .434 .828 .573);
-      --green-a12: color(display-p3 .747 .938 .807);
-      --green-surface: color(display-p3 .0941 .1412 .1098 / .5);
-    }
-  }
-}
-
-:root {
-  --green-contrast: white;
+[data-color="green"] {
+  --color-1: var(--green-1);
+  --color-2: var(--green-2);
+  --color-3: var(--green-3);
+  --color-4: var(--green-4);
+  --color-5: var(--green-5);
+  --color-6: var(--green-6);
+  --color-7: var(--green-7);
+  --color-8: var(--green-8);
+  --color-9: var(--green-9);
+  --color-10: var(--green-10);
+  --color-11: var(--green-11);
+  --color-12: var(--green-12);
+  --color-a1: var(--green-a1);
+  --color-a2: var(--green-a2);
+  --color-a3: var(--green-a3);
+  --color-a4: var(--green-a4);
+  --color-a5: var(--green-a5);
+  --color-a6: var(--green-a6);
+  --color-a7: var(--green-a7);
+  --color-a8: var(--green-a8);
+  --color-a9: var(--green-a9);
+  --color-a10: var(--green-a10);
+  --color-a11: var(--green-a11);
+  --color-a12: var(--green-a12);
+  --accent-contrast: var(--green-contrast);
+  --accent-surface: var(--green-surface);
+  --accent-indicator: var(--green-indicator);
+  --accent-track: var(--green-track);
 }

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

@@ -1,127 +1,30 @@
-:root, .light, .light-theme {
-  --indigo-1: #fdfdfe;
-  --indigo-2: #f7f9ff;
-  --indigo-3: #edf2fe;
-  --indigo-4: #e1e9ff;
-  --indigo-5: #d2deff;
-  --indigo-6: #c1d0ff;
-  --indigo-7: #abbdf9;
-  --indigo-8: #8da4ef;
-  --indigo-9: #3e63dd;
-  --indigo-10: #3358d4;
-  --indigo-11: #3a5bc7;
-  --indigo-12: #1f2d5c;
-  --indigo-a1: #00008002;
-  --indigo-a2: #0040ff08;
-  --indigo-a3: #0047f112;
-  --indigo-a4: #0044ff1e;
-  --indigo-a5: #0044ff2d;
-  --indigo-a6: #003eff3e;
-  --indigo-a7: #0037ed54;
-  --indigo-a8: #0034dc72;
-  --indigo-a9: #0031d2c1;
-  --indigo-a10: #002ec9cc;
-  --indigo-a11: #002bb7c5;
-  --indigo-a12: #001046e0;
-  --indigo-surface: #f5f8ffcc;
-  --indigo-indicator: var(--indigo-9);
-  --indigo-track: var(--indigo-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    :root, .light, .light-theme {
-      --indigo-1: color(display-p3 .992 .992 .996);
-      --indigo-2: color(display-p3 .971 .977 .998);
-      --indigo-3: color(display-p3 .933 .948 .992);
-      --indigo-4: color(display-p3 .885 .914 1);
-      --indigo-5: color(display-p3 .831 .87 1);
-      --indigo-6: color(display-p3 .767 .814 .995);
-      --indigo-7: color(display-p3 .685 .74 .957);
-      --indigo-8: color(display-p3 .569 .639 .916);
-      --indigo-9: color(display-p3 .276 .384 .837);
-      --indigo-10: color(display-p3 .234 .343 .801);
-      --indigo-11: color(display-p3 .256 .354 .755);
-      --indigo-12: color(display-p3 .133 .175 .348);
-      --indigo-a1: color(display-p3 .02 .02 .51 / .008);
-      --indigo-a2: color(display-p3 .024 .161 .863 / .028);
-      --indigo-a3: color(display-p3 .008 .239 .886 / .067);
-      --indigo-a4: color(display-p3 .004 .247 1 / .114);
-      --indigo-a5: color(display-p3 .004 .235 1 / .169);
-      --indigo-a6: color(display-p3 .004 .208 .984 / .232);
-      --indigo-a7: color(display-p3 .004 .176 .863 / .314);
-      --indigo-a8: color(display-p3 .004 .165 .812 / .432);
-      --indigo-a9: color(display-p3 0 .153 .773 / .726);
-      --indigo-a10: color(display-p3 0 .137 .737 / .765);
-      --indigo-a11: color(display-p3 .256 .354 .755);
-      --indigo-a12: color(display-p3 .133 .175 .348);
-      --indigo-surface: color(display-p3 .9647 .9725 .9961 / .8);
-    }
-  }
-}
-
-.dark, .dark-theme {
-  --indigo-1: #11131f;
-  --indigo-2: #141726;
-  --indigo-3: #182449;
-  --indigo-4: #1d2e62;
-  --indigo-5: #253974;
-  --indigo-6: #304384;
-  --indigo-7: #3a4f97;
-  --indigo-8: #435db1;
-  --indigo-9: #3e63dd;
-  --indigo-10: #5472e4;
-  --indigo-11: #9eb1ff;
-  --indigo-12: #d6e1ff;
-  --indigo-a1: #1133ff0f;
-  --indigo-a2: #3354fa17;
-  --indigo-a3: #2f62ff3c;
-  --indigo-a4: #3566ff57;
-  --indigo-a5: #4171fd6b;
-  --indigo-a6: #5178fd7c;
-  --indigo-a7: #5a7fff90;
-  --indigo-a8: #5b81feac;
-  --indigo-a9: #4671ffdb;
-  --indigo-a10: #5c7efee3;
-  --indigo-a11: #9eb1ff;
-  --indigo-a12: #d6e1ff;
-  --indigo-surface: #171d3b80;
-  --indigo-indicator: var(--indigo-9);
-  --indigo-track: var(--indigo-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    .dark, .dark-theme {
-      --indigo-1: color(display-p3 .068 .074 .118);
-      --indigo-2: color(display-p3 .081 .089 .144);
-      --indigo-3: color(display-p3 .105 .141 .275);
-      --indigo-4: color(display-p3 .129 .18 .369);
-      --indigo-5: color(display-p3 .163 .22 .439);
-      --indigo-6: color(display-p3 .203 .262 .5);
-      --indigo-7: color(display-p3 .245 .309 .575);
-      --indigo-8: color(display-p3 .285 .362 .674);
-      --indigo-9: color(display-p3 .276 .384 .837);
-      --indigo-10: color(display-p3 .354 .445 .866);
-      --indigo-11: color(display-p3 .63 .69 1);
-      --indigo-12: color(display-p3 .848 .881 .99);
-      --indigo-a1: color(display-p3 .071 .212 .996 / .055);
-      --indigo-a2: color(display-p3 .251 .345 .988 / .085);
-      --indigo-a3: color(display-p3 .243 .404 1 / .223);
-      --indigo-a4: color(display-p3 .263 .42 1 / .324);
-      --indigo-a5: color(display-p3 .314 .451 1 / .4);
-      --indigo-a6: color(display-p3 .361 .49 1 / .467);
-      --indigo-a7: color(display-p3 .388 .51 1 / .547);
-      --indigo-a8: color(display-p3 .404 .518 1 / .652);
-      --indigo-a9: color(display-p3 .318 .451 1 / .824);
-      --indigo-a10: color(display-p3 .404 .506 1 / .858);
-      --indigo-a11: color(display-p3 .63 .69 1);
-      --indigo-a12: color(display-p3 .848 .881 .99);
-      --indigo-surface: color(display-p3 .0941 .1098 .2196 / .5);
-    }
-  }
-}
-
-:root {
-  --indigo-contrast: white;
+[data-color="indigo"] {
+  --color-1: var(--indigo-1);
+  --color-2: var(--indigo-2);
+  --color-3: var(--indigo-3);
+  --color-4: var(--indigo-4);
+  --color-5: var(--indigo-5);
+  --color-6: var(--indigo-6);
+  --color-7: var(--indigo-7);
+  --color-8: var(--indigo-8);
+  --color-9: var(--indigo-9);
+  --color-10: var(--indigo-10);
+  --color-11: var(--indigo-11);
+  --color-12: var(--indigo-12);
+  --color-a1: var(--indigo-a1);
+  --color-a2: var(--indigo-a2);
+  --color-a3: var(--indigo-a3);
+  --color-a4: var(--indigo-a4);
+  --color-a5: var(--indigo-a5);
+  --color-a6: var(--indigo-a6);
+  --color-a7: var(--indigo-a7);
+  --color-a8: var(--indigo-a8);
+  --color-a9: var(--indigo-a9);
+  --color-a10: var(--indigo-a10);
+  --color-a11: var(--indigo-a11);
+  --color-a12: var(--indigo-a12);
+  --accent-contrast: var(--indigo-contrast);
+  --accent-surface: var(--indigo-surface);
+  --accent-indicator: var(--indigo-indicator);
+  --accent-track: var(--indigo-track);
 }

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

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

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

@@ -1,127 +1,30 @@
-:root, .light, .light-theme {
-  --iris-1: #fdfdff;
-  --iris-2: #f8f8ff;
-  --iris-3: #f0f1fe;
-  --iris-4: #e6e7ff;
-  --iris-5: #dadcff;
-  --iris-6: #cbcdff;
-  --iris-7: #b8baf8;
-  --iris-8: #9b9ef0;
-  --iris-9: #5b5bd6;
-  --iris-10: #5151cd;
-  --iris-11: #5753c6;
-  --iris-12: #272962;
-  --iris-a1: #0000ff02;
-  --iris-a2: #0000ff07;
-  --iris-a3: #0011ee0f;
-  --iris-a4: #000bff19;
-  --iris-a5: #000eff25;
-  --iris-a6: #000aff34;
-  --iris-a7: #0008e647;
-  --iris-a8: #0008d964;
-  --iris-a9: #0000c0a4;
-  --iris-a10: #0000b6ae;
-  --iris-a11: #0600abac;
-  --iris-a12: #000246d8;
-  --iris-surface: #f6f6ffcc;
-  --iris-indicator: var(--iris-9);
-  --iris-track: var(--iris-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    :root, .light, .light-theme {
-      --iris-1: color(display-p3 .992 .992 .999);
-      --iris-2: color(display-p3 .972 .973 .998);
-      --iris-3: color(display-p3 .943 .945 .992);
-      --iris-4: color(display-p3 .902 .906 1);
-      --iris-5: color(display-p3 .857 .861 1);
-      --iris-6: color(display-p3 .799 .805 .987);
-      --iris-7: color(display-p3 .721 .727 .955);
-      --iris-8: color(display-p3 .61 .619 .918);
-      --iris-9: color(display-p3 .357 .357 .81);
-      --iris-10: color(display-p3 .318 .318 .774);
-      --iris-11: color(display-p3 .337 .326 .748);
-      --iris-12: color(display-p3 .154 .161 .371);
-      --iris-a1: color(display-p3 .02 .02 1 / .008);
-      --iris-a2: color(display-p3 .024 .024 .863 / .028);
-      --iris-a3: color(display-p3 .004 .071 .871 / .059);
-      --iris-a4: color(display-p3 .012 .051 1 / .099);
-      --iris-a5: color(display-p3 .008 .035 1 / .142);
-      --iris-a6: color(display-p3 0 .02 .941 / .2);
-      --iris-a7: color(display-p3 .004 .02 .847 / .279);
-      --iris-a8: color(display-p3 .004 .024 .788 / .389);
-      --iris-a9: color(display-p3 0 0 .706 / .644);
-      --iris-a10: color(display-p3 0 0 .667 / .683);
-      --iris-a11: color(display-p3 .337 .326 .748);
-      --iris-a12: color(display-p3 .154 .161 .371);
-      --iris-surface: color(display-p3 .9647 .9647 .9961 / .8);
-    }
-  }
-}
-
-.dark, .dark-theme {
-  --iris-1: #13131e;
-  --iris-2: #171625;
-  --iris-3: #202248;
-  --iris-4: #262a65;
-  --iris-5: #303374;
-  --iris-6: #3d3e82;
-  --iris-7: #4a4a95;
-  --iris-8: #5958b1;
-  --iris-9: #5b5bd6;
-  --iris-10: #6e6ade;
-  --iris-11: #b1a9ff;
-  --iris-12: #e0dffe;
-  --iris-a1: #3636fe0e;
-  --iris-a2: #564bf916;
-  --iris-a3: #525bff3b;
-  --iris-a4: #4d58ff5a;
-  --iris-a5: #5b62fd6b;
-  --iris-a6: #6d6ffd7a;
-  --iris-a7: #7777fe8e;
-  --iris-a8: #7b7afeac;
-  --iris-a9: #6a6afed4;
-  --iris-a10: #7d79ffdc;
-  --iris-a11: #b1a9ff;
-  --iris-a12: #e1e0fffe;
-  --iris-surface: #1d1b3980;
-  --iris-indicator: var(--iris-9);
-  --iris-track: var(--iris-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    .dark, .dark-theme {
-      --iris-1: color(display-p3 .075 .075 .114);
-      --iris-2: color(display-p3 .089 .086 .14);
-      --iris-3: color(display-p3 .128 .134 .272);
-      --iris-4: color(display-p3 .153 .165 .382);
-      --iris-5: color(display-p3 .192 .201 .44);
-      --iris-6: color(display-p3 .239 .241 .491);
-      --iris-7: color(display-p3 .291 .289 .565);
-      --iris-8: color(display-p3 .35 .345 .673);
-      --iris-9: color(display-p3 .357 .357 .81);
-      --iris-10: color(display-p3 .428 .416 .843);
-      --iris-11: color(display-p3 .685 .662 1);
-      --iris-12: color(display-p3 .878 .875 .986);
-      --iris-a1: color(display-p3 .224 .224 .992 / .051);
-      --iris-a2: color(display-p3 .361 .314 1 / .08);
-      --iris-a3: color(display-p3 .357 .373 1 / .219);
-      --iris-a4: color(display-p3 .325 .361 1 / .337);
-      --iris-a5: color(display-p3 .38 .4 1 / .4);
-      --iris-a6: color(display-p3 .447 .447 1 / .454);
-      --iris-a7: color(display-p3 .486 .486 1 / .534);
-      --iris-a8: color(display-p3 .502 .494 1 / .652);
-      --iris-a9: color(display-p3 .431 .431 1 / .799);
-      --iris-a10: color(display-p3 .502 .486 1 / .832);
-      --iris-a11: color(display-p3 .685 .662 1);
-      --iris-a12: color(display-p3 .878 .875 .986);
-      --iris-surface: color(display-p3 .1098 .102 .2118 / .5);
-    }
-  }
-}
-
-:root {
-  --iris-contrast: white;
+[data-color="iris"] {
+  --color-1: var(--iris-1);
+  --color-2: var(--iris-2);
+  --color-3: var(--iris-3);
+  --color-4: var(--iris-4);
+  --color-5: var(--iris-5);
+  --color-6: var(--iris-6);
+  --color-7: var(--iris-7);
+  --color-8: var(--iris-8);
+  --color-9: var(--iris-9);
+  --color-10: var(--iris-10);
+  --color-11: var(--iris-11);
+  --color-12: var(--iris-12);
+  --color-a1: var(--iris-a1);
+  --color-a2: var(--iris-a2);
+  --color-a3: var(--iris-a3);
+  --color-a4: var(--iris-a4);
+  --color-a5: var(--iris-a5);
+  --color-a6: var(--iris-a6);
+  --color-a7: var(--iris-a7);
+  --color-a8: var(--iris-a8);
+  --color-a9: var(--iris-a9);
+  --color-a10: var(--iris-a10);
+  --color-a11: var(--iris-a11);
+  --color-a12: var(--iris-a12);
+  --accent-contrast: var(--iris-contrast);
+  --accent-surface: var(--iris-surface);
+  --accent-indicator: var(--iris-indicator);
+  --accent-track: var(--iris-track);
 }

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

@@ -1,127 +1,30 @@
-:root, .light, .light-theme {
-  --jade-1: #fbfefd;
-  --jade-2: #f4fbf7;
-  --jade-3: #e6f7ed;
-  --jade-4: #d6f1e3;
-  --jade-5: #c3e9d7;
-  --jade-6: #acdec8;
-  --jade-7: #8bceb6;
-  --jade-8: #56ba9f;
-  --jade-9: #29a383;
-  --jade-10: #26997b;
-  --jade-11: #208368;
-  --jade-12: #1d3b31;
-  --jade-a1: #00c08004;
-  --jade-a2: #00a3460b;
-  --jade-a3: #00ae4819;
-  --jade-a4: #00a85129;
-  --jade-a5: #00a2553c;
-  --jade-a6: #009a5753;
-  --jade-a7: #00945f74;
-  --jade-a8: #00976ea9;
-  --jade-a9: #00916bd6;
-  --jade-a10: #008764d9;
-  --jade-a11: #007152df;
-  --jade-a12: #002217e2;
-  --jade-surface: #f1faf5cc;
-  --jade-indicator: var(--jade-9);
-  --jade-track: var(--jade-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    :root, .light, .light-theme {
-      --jade-1: color(display-p3 .986 .996 .992);
-      --jade-2: color(display-p3 .962 .983 .969);
-      --jade-3: color(display-p3 .912 .965 .932);
-      --jade-4: color(display-p3 .858 .941 .893);
-      --jade-5: color(display-p3 .795 .909 .847);
-      --jade-6: color(display-p3 .715 .864 .791);
-      --jade-7: color(display-p3 .603 .802 .718);
-      --jade-8: color(display-p3 .44 .72 .629);
-      --jade-9: color(display-p3 .319 .63 .521);
-      --jade-10: color(display-p3 .299 .592 .488);
-      --jade-11: color(display-p3 .15 .5 .37);
-      --jade-12: color(display-p3 .142 .229 .194);
-      --jade-a1: color(display-p3 .024 .757 .514 / .016);
-      --jade-a2: color(display-p3 .024 .612 .22 / .04);
-      --jade-a3: color(display-p3 .012 .596 .235 / .087);
-      --jade-a4: color(display-p3 .008 .588 .255 / .142);
-      --jade-a5: color(display-p3 .004 .561 .251 / .204);
-      --jade-a6: color(display-p3 .004 .525 .278 / .287);
-      --jade-a7: color(display-p3 .004 .506 .29 / .397);
-      --jade-a8: color(display-p3 0 .506 .337 / .561);
-      --jade-a9: color(display-p3 0 .459 .298 / .683);
-      --jade-a10: color(display-p3 0 .42 .271 / .702);
-      --jade-a11: color(display-p3 .15 .5 .37);
-      --jade-a12: color(display-p3 .142 .229 .194);
-      --jade-surface: color(display-p3 .9529 .9804 .9608 / .8);
-    }
-  }
-}
-
-.dark, .dark-theme {
-  --jade-1: #0d1512;
-  --jade-2: #121c18;
-  --jade-3: #0f2e22;
-  --jade-4: #0b3b2c;
-  --jade-5: #114837;
-  --jade-6: #1b5745;
-  --jade-7: #246854;
-  --jade-8: #2a7e68;
-  --jade-9: #29a383;
-  --jade-10: #27b08b;
-  --jade-11: #1fd8a4;
-  --jade-12: #adf0d4;
-  --jade-a1: #00de4505;
-  --jade-a2: #27fba60c;
-  --jade-a3: #02f99920;
-  --jade-a4: #00ffaa2d;
-  --jade-a5: #11ffb63b;
-  --jade-a6: #34ffc24b;
-  --jade-a7: #45fdc75e;
-  --jade-a8: #48ffcf75;
-  --jade-a9: #38feca9d;
-  --jade-a10: #31fec7ab;
-  --jade-a11: #21fec0d6;
-  --jade-a12: #b8ffe1ef;
-  --jade-surface: #13271f80;
-  --jade-indicator: var(--jade-9);
-  --jade-track: var(--jade-9);
-}
-
-@supports (color: color(display-p3 1 1 1)) {
-  @media (color-gamut: p3) {
-    .dark, .dark-theme {
-      --jade-1: color(display-p3 .059 .083 .071);
-      --jade-2: color(display-p3 .078 .11 .094);
-      --jade-3: color(display-p3 .091 .176 .138);
-      --jade-4: color(display-p3 .102 .228 .177);
-      --jade-5: color(display-p3 .133 .279 .221);
-      --jade-6: color(display-p3 .174 .334 .273);
-      --jade-7: color(display-p3 .219 .402 .335);
-      --jade-8: color(display-p3 .263 .488 .411);
-      --jade-9: color(display-p3 .319 .63 .521);
-      --jade-10: color(display-p3 .338 .68 .555);
-      --jade-11: color(display-p3 .4 .835 .656);
-      --jade-12: color(display-p3 .734 .934 .838);
-      --jade-a1: color(display-p3 0 .992 .298 / .017);
-      --jade-a2: color(display-p3 .318 .988 .651 / .047);
-      --jade-a3: color(display-p3 .267 1 .667 / .118);
-      --jade-a4: color(display-p3 .275 .996 .702 / .173);
-      --jade-a5: color(display-p3 .361 1 .741 / .227);
-      --jade-a6: color(display-p3 .439 1 .796 / .286);
-      --jade-a7: color(display-p3 .49 1 .804 / .362);
-      --jade-a8: color(display-p3 .506 1 .835 / .45);
-      --jade-a9: color(display-p3 .478 .996 .816 / .606);
-      --jade-a10: color(display-p3 .478 1 .816 / .656);
-      --jade-a11: color(display-p3 .4 .835 .656);
-      --jade-a12: color(display-p3 .734 .934 .838);
-      --jade-surface: color(display-p3 .0863 .149 .1176 / .5);
-    }
-  }
-}
-
-:root {
-  --jade-contrast: white;
+[data-color="jade"] {
+  --color-1: var(--jade-1);
+  --color-2: var(--jade-2);
+  --color-3: var(--jade-3);
+  --color-4: var(--jade-4);
+  --color-5: var(--jade-5);
+  --color-6: var(--jade-6);
+  --color-7: var(--jade-7);
+  --color-8: var(--jade-8);
+  --color-9: var(--jade-9);
+  --color-10: var(--jade-10);
+  --color-11: var(--jade-11);
+  --color-12: var(--jade-12);
+  --color-a1: var(--jade-a1);
+  --color-a2: var(--jade-a2);
+  --color-a3: var(--jade-a3);
+  --color-a4: var(--jade-a4);
+  --color-a5: var(--jade-a5);
+  --color-a6: var(--jade-a6);
+  --color-a7: var(--jade-a7);
+  --color-a8: var(--jade-a8);
+  --color-a9: var(--jade-a9);
+  --color-a10: var(--jade-a10);
+  --color-a11: var(--jade-a11);
+  --color-a12: var(--jade-a12);
+  --accent-contrast: var(--jade-contrast);
+  --accent-surface: var(--jade-surface);
+  --accent-indicator: var(--jade-indicator);
+  --accent-track: var(--jade-track);
 }