elements-kit 0.3.4 → 0.4.0

package/dist/ui/styles/base.css

@@ -0,0 +1,156 @@
+:root {
+  --black-a1: #0000000d;
+  --black-a2: #0000001a;
+  --black-a3: #00000026;
+  --black-a4: #0003;
+  --black-a5: #0000004d;
+  --black-a6: #0006;
+  --black-a7: #00000080;
+  --black-a8: #0009;
+  --black-a9: #000000b3;
+  --black-a10: #000c;
+  --black-a11: #000000e6;
+  --black-a12: #000000f2;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root {
+      --black-a1: color(display-p3 0 0 0 / .05);
+      --black-a2: color(display-p3 0 0 0 / .1);
+      --black-a3: color(display-p3 0 0 0 / .15);
+      --black-a4: color(display-p3 0 0 0 / .2);
+      --black-a5: color(display-p3 0 0 0 / .3);
+      --black-a6: color(display-p3 0 0 0 / .4);
+      --black-a7: color(display-p3 0 0 0 / .5);
+      --black-a8: color(display-p3 0 0 0 / .6);
+      --black-a9: color(display-p3 0 0 0 / .7);
+      --black-a10: color(display-p3 0 0 0 / .8);
+      --black-a11: color(display-p3 0 0 0 / .9);
+      --black-a12: color(display-p3 0 0 0 / .95);
+    }
+  }
+}
+
+:root {
+  --white-a1: #ffffff0d;
+  --white-a2: #ffffff1a;
+  --white-a3: #ffffff26;
+  --white-a4: #fff3;
+  --white-a5: #ffffff4d;
+  --white-a6: #fff6;
+  --white-a7: #ffffff80;
+  --white-a8: #fff9;
+  --white-a9: #ffffffb3;
+  --white-a10: #fffc;
+  --white-a11: #ffffffe6;
+  --white-a12: #fffffff2;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root {
+      --white-a1: color(display-p3 1 1 1 / .05);
+      --white-a2: color(display-p3 1 1 1 / .1);
+      --white-a3: color(display-p3 1 1 1 / .15);
+      --white-a4: color(display-p3 1 1 1 / .2);
+      --white-a5: color(display-p3 1 1 1 / .3);
+      --white-a6: color(display-p3 1 1 1 / .4);
+      --white-a7: color(display-p3 1 1 1 / .5);
+      --white-a8: color(display-p3 1 1 1 / .6);
+      --white-a9: color(display-p3 1 1 1 / .7);
+      --white-a10: color(display-p3 1 1 1 / .8);
+      --white-a11: color(display-p3 1 1 1 / .9);
+      --white-a12: color(display-p3 1 1 1 / .95);
+    }
+  }
+}
+
+:where(:root) {
+  --color-background: white;
+  --color-overlay: var(--black-a6);
+  --color-panel-solid: white;
+  --color-panel-translucent: #ffffffb3;
+  --color-surface: #ffffffd9;
+}
+
+:is(.dark, .dark-theme) {
+  --color-background: var(--gray-1);
+  --color-overlay: var(--black-a8);
+  --color-panel-solid: var(--gray-2);
+  --color-panel-translucent: var(--gray-a2);
+  --color-surface: #00000040;
+}
+
+:where(:root) {
+  --color-transparent: #0000;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root {
+      --color-transparent: color(display-p3 0 0 0 / 0);
+    }
+  }
+}
+
+:where(.light, .light-theme) {
+  --lightningcss-light: initial;
+  --lightningcss-dark: ;
+  color-scheme: light;
+}
+
+:where(.dark, .dark-theme) {
+  --lightningcss-light: ;
+  --lightningcss-dark: initial;
+  color-scheme: dark;
+}
+
+:root, [data-accent-color]:where(:not([data-accent-color=""], [data-accent-color="gray"])) {
+  --focus-1: var(--accent-1);
+  --focus-2: var(--accent-2);
+  --focus-3: var(--accent-3);
+  --focus-4: var(--accent-4);
+  --focus-5: var(--accent-5);
+  --focus-6: var(--accent-6);
+  --focus-7: var(--accent-7);
+  --focus-8: var(--accent-8);
+  --focus-9: var(--accent-9);
+  --focus-10: var(--accent-10);
+  --focus-11: var(--accent-11);
+  --focus-12: var(--accent-12);
+  --focus-a1: var(--accent-a1);
+  --focus-a2: var(--accent-a2);
+  --focus-a3: var(--accent-a3);
+  --focus-a4: var(--accent-a4);
+  --focus-a5: var(--accent-a5);
+  --focus-a6: var(--accent-a6);
+  --focus-a7: var(--accent-a7);
+  --focus-a8: var(--accent-a8);
+  --focus-a9: var(--accent-a9);
+  --focus-a10: var(--accent-a10);
+  --focus-a11: var(--accent-a11);
+  --focus-a12: var(--accent-a12);
+}
+
+::selection {
+  background-color: var(--focus-a5);
+}
+
+:root {
+  color: var(--gray-12);
+}
+
+:where([data-has-background="true"]) {
+  background-color: var(--color-background);
+}
+
+:where([data-panel-background="solid"]) {
+  --color-panel: var(--color-panel-solid);
+  --backdrop-filter-panel: none;
+}
+
+:where([data-panel-background="translucent"]) {
+  --color-panel: var(--color-panel-translucent);
+  --backdrop-filter-panel: blur(64px);
+}

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

@@ -0,0 +1,133 @@
+:root, .light, .light-theme {
+  --amber-1: #fefdfb;
+  --amber-2: #fefbe9;
+  --amber-3: #fff7c2;
+  --amber-4: #ffee9c;
+  --amber-5: #fbe577;
+  --amber-6: #f3d673;
+  --amber-7: #e9c162;
+  --amber-8: #e2a336;
+  --amber-9: #ffc53d;
+  --amber-10: #ffba18;
+  --amber-11: #ab6400;
+  --amber-12: #4f3422;
+  --amber-a1: #c0800004;
+  --amber-a2: #f4d10016;
+  --amber-a3: #ffde003d;
+  --amber-a4: #ffd40063;
+  --amber-a5: #f8cf0088;
+  --amber-a6: #eab5008c;
+  --amber-a7: #dc9b009d;
+  --amber-a8: #da8a00c9;
+  --amber-a9: #ffb300c2;
+  --amber-a10: #ffb300e7;
+  --amber-a11: #ab6400;
+  --amber-a12: #341500dd;
+  --amber-surface: #fefae4cc;
+  --amber-indicator: var(--amber-9);
+  --amber-track: var(--amber-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --amber-1: color(display-p3 .995 .992 .985);
+      --amber-2: color(display-p3 .994 .986 .921);
+      --amber-3: color(display-p3 .994 .969 .782);
+      --amber-4: color(display-p3 .989 .937 .65);
+      --amber-5: color(display-p3 .97 .902 .527);
+      --amber-6: color(display-p3 .936 .844 .506);
+      --amber-7: color(display-p3 .89 .762 .443);
+      --amber-8: color(display-p3 .85 .65 .3);
+      --amber-9: color(display-p3 1 .77 .26);
+      --amber-10: color(display-p3 .959 .741 .274);
+      --amber-11: color(display-p3 .64 .4 0);
+      --amber-12: color(display-p3 .294 .208 .145);
+      --amber-a1: color(display-p3 .757 .514 .024 / .016);
+      --amber-a2: color(display-p3 .902 .804 .008 / .079);
+      --amber-a3: color(display-p3 .965 .859 .004 / .22);
+      --amber-a4: color(display-p3 .969 .82 .004 / .35);
+      --amber-a5: color(display-p3 .933 .796 .004 / .475);
+      --amber-a6: color(display-p3 .875 .682 .004 / .495);
+      --amber-a7: color(display-p3 .804 .573 0 / .557);
+      --amber-a8: color(display-p3 .788 .502 0 / .699);
+      --amber-a9: color(display-p3 1 .686 0 / .742);
+      --amber-a10: color(display-p3 .945 .643 0 / .726);
+      --amber-a11: color(display-p3 .64 .4 0);
+      --amber-a12: color(display-p3 .294 .208 .145);
+      --amber-surface: color(display-p3 .9922 .9843 .902 / .8);
+    }
+  }
+}
+
+.dark, .dark-theme {
+  --amber-1: #16120c;
+  --amber-2: #1d180f;
+  --amber-3: #302008;
+  --amber-4: #3f2700;
+  --amber-5: #4d3000;
+  --amber-6: #5c3d05;
+  --amber-7: #714f19;
+  --amber-8: #8f6424;
+  --amber-9: #ffc53d;
+  --amber-10: #ffd60a;
+  --amber-11: #ffca16;
+  --amber-12: #ffe7b3;
+  --amber-a1: #e63c0006;
+  --amber-a2: #fd9b000d;
+  --amber-a3: #fa820022;
+  --amber-a4: #fc820032;
+  --amber-a5: #fd8b0041;
+  --amber-a6: #fd9b0051;
+  --amber-a7: #ffab2567;
+  --amber-a8: #ffae3587;
+  --amber-a9: #ffc53d;
+  --amber-a10: #ffd60a;
+  --amber-a11: #ffca16;
+  --amber-a12: #ffe7b3;
+  --amber-surface: #271f1380;
+  --amber-indicator: var(--amber-9);
+  --amber-track: var(--amber-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --amber-1: color(display-p3 .082 .07 .05);
+      --amber-2: color(display-p3 .111 .094 .064);
+      --amber-3: color(display-p3 .178 .128 .049);
+      --amber-4: color(display-p3 .239 .156 0);
+      --amber-5: color(display-p3 .29 .193 0);
+      --amber-6: color(display-p3 .344 .245 .076);
+      --amber-7: color(display-p3 .422 .314 .141);
+      --amber-8: color(display-p3 .535 .399 .189);
+      --amber-9: color(display-p3 1 .77 .26);
+      --amber-10: color(display-p3 1 .87 .15);
+      --amber-11: color(display-p3 1 .8 .29);
+      --amber-12: color(display-p3 .984 .909 .726);
+      --amber-a1: color(display-p3 .992 .298 0 / .017);
+      --amber-a2: color(display-p3 .988 .651 0 / .047);
+      --amber-a3: color(display-p3 1 .6 0 / .118);
+      --amber-a4: color(display-p3 1 .557 0 / .185);
+      --amber-a5: color(display-p3 1 .592 0 / .24);
+      --amber-a6: color(display-p3 1 .659 .094 / .299);
+      --amber-a7: color(display-p3 1 .714 .263 / .383);
+      --amber-a8: color(display-p3 .996 .729 .306 / .5);
+      --amber-a9: color(display-p3 1 .769 .259);
+      --amber-a10: color(display-p3 1 .871 .149);
+      --amber-a11: color(display-p3 1 .8 .29);
+      --amber-a12: color(display-p3 .984 .909 .726);
+      --amber-surface: color(display-p3 .1412 .1176 .0784 / .5);
+    }
+  }
+}
+
+:root {
+  --amber-contrast: #21201c;
+}
+
+@supports (color: color-mix(in oklab, white, black)) {
+  .dark, .dark-theme {
+    --amber-track: color-mix(in oklab, var(--amber-8), var(--amber-9) 75%);
+  }
+}

package/dist/ui/styles/colors/black-alpha.css

@@ -0,0 +1,33 @@
+:root {
+  --black-a1: #0000000d;
+  --black-a2: #0000001a;
+  --black-a3: #00000026;
+  --black-a4: #0003;
+  --black-a5: #0000004d;
+  --black-a6: #0006;
+  --black-a7: #00000080;
+  --black-a8: #0009;
+  --black-a9: #000000b3;
+  --black-a10: #000c;
+  --black-a11: #000000e6;
+  --black-a12: #000000f2;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root {
+      --black-a1: color(display-p3 0 0 0 / .05);
+      --black-a2: color(display-p3 0 0 0 / .1);
+      --black-a3: color(display-p3 0 0 0 / .15);
+      --black-a4: color(display-p3 0 0 0 / .2);
+      --black-a5: color(display-p3 0 0 0 / .3);
+      --black-a6: color(display-p3 0 0 0 / .4);
+      --black-a7: color(display-p3 0 0 0 / .5);
+      --black-a8: color(display-p3 0 0 0 / .6);
+      --black-a9: color(display-p3 0 0 0 / .7);
+      --black-a10: color(display-p3 0 0 0 / .8);
+      --black-a11: color(display-p3 0 0 0 / .9);
+      --black-a12: color(display-p3 0 0 0 / .95);
+    }
+  }
+}

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

@@ -0,0 +1,127 @@
+:root, .light, .light-theme {
+  --blue-1: #fbfdff;
+  --blue-2: #f4faff;
+  --blue-3: #e6f4fe;
+  --blue-4: #d5efff;
+  --blue-5: #c2e5ff;
+  --blue-6: #acd8fc;
+  --blue-7: #8ec8f6;
+  --blue-8: #5eb1ef;
+  --blue-9: #0090ff;
+  --blue-10: #0588f0;
+  --blue-11: #0d74ce;
+  --blue-12: #113264;
+  --blue-a1: #0080ff04;
+  --blue-a2: #008cff0b;
+  --blue-a3: #008ff519;
+  --blue-a4: #009eff2a;
+  --blue-a5: #0093ff3d;
+  --blue-a6: #0088f653;
+  --blue-a7: #0083eb71;
+  --blue-a8: #0084e6a1;
+  --blue-a9: #0090ff;
+  --blue-a10: #0086f0fa;
+  --blue-a11: #006dcbf2;
+  --blue-a12: #002359ee;
+  --blue-surface: #f1f9ffcc;
+  --blue-indicator: var(--blue-9);
+  --blue-track: var(--blue-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --blue-1: color(display-p3 .986 .992 .999);
+      --blue-2: color(display-p3 .96 .979 .998);
+      --blue-3: color(display-p3 .912 .956 .991);
+      --blue-4: color(display-p3 .853 .932 1);
+      --blue-5: color(display-p3 .788 .894 .998);
+      --blue-6: color(display-p3 .709 .843 .976);
+      --blue-7: color(display-p3 .606 .777 .947);
+      --blue-8: color(display-p3 .451 .688 .917);
+      --blue-9: color(display-p3 .247 .556 .969);
+      --blue-10: color(display-p3 .234 .523 .912);
+      --blue-11: color(display-p3 .15 .44 .84);
+      --blue-12: color(display-p3 .102 .193 .379);
+      --blue-a1: color(display-p3 .024 .514 1 / .016);
+      --blue-a2: color(display-p3 .024 .514 .906 / .04);
+      --blue-a3: color(display-p3 .012 .506 .914 / .087);
+      --blue-a4: color(display-p3 .008 .545 1 / .146);
+      --blue-a5: color(display-p3 .004 .502 .984 / .212);
+      --blue-a6: color(display-p3 .004 .463 .922 / .291);
+      --blue-a7: color(display-p3 .004 .431 .863 / .393);
+      --blue-a8: color(display-p3 0 .427 .851 / .55);
+      --blue-a9: color(display-p3 0 .412 .961 / .753);
+      --blue-a10: color(display-p3 0 .376 .886 / .765);
+      --blue-a11: color(display-p3 .15 .44 .84);
+      --blue-a12: color(display-p3 .102 .193 .379);
+      --blue-surface: color(display-p3 .9529 .9765 .9961 / .8);
+    }
+  }
+}
+
+.dark, .dark-theme {
+  --blue-1: #0d1520;
+  --blue-2: #111927;
+  --blue-3: #0d2847;
+  --blue-4: #003362;
+  --blue-5: #004074;
+  --blue-6: #104d87;
+  --blue-7: #205d9e;
+  --blue-8: #2870bd;
+  --blue-9: #0090ff;
+  --blue-10: #3b9eff;
+  --blue-11: #70b8ff;
+  --blue-12: #c2e6ff;
+  --blue-a1: #004df211;
+  --blue-a2: #1166fb18;
+  --blue-a3: #0077ff3a;
+  --blue-a4: #0075ff57;
+  --blue-a5: #0081fd6b;
+  --blue-a6: #0f89fd7f;
+  --blue-a7: #2a91fe98;
+  --blue-a8: #3094feb9;
+  --blue-a9: #0090ff;
+  --blue-a10: #3b9eff;
+  --blue-a11: #70b8ff;
+  --blue-a12: #c2e6ff;
+  --blue-surface: #11213d80;
+  --blue-indicator: var(--blue-9);
+  --blue-track: var(--blue-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --blue-1: color(display-p3 .057 .081 .122);
+      --blue-2: color(display-p3 .072 .098 .147);
+      --blue-3: color(display-p3 .078 .154 .27);
+      --blue-4: color(display-p3 .033 .197 .37);
+      --blue-5: color(display-p3 .08 .245 .441);
+      --blue-6: color(display-p3 .14 .298 .511);
+      --blue-7: color(display-p3 .195 .361 .6);
+      --blue-8: color(display-p3 .239 .434 .72);
+      --blue-9: color(display-p3 .247 .556 .969);
+      --blue-10: color(display-p3 .344 .612 .973);
+      --blue-11: color(display-p3 .49 .72 1);
+      --blue-12: color(display-p3 .788 .898 .99);
+      --blue-a1: color(display-p3 0 .333 1 / .059);
+      --blue-a2: color(display-p3 .114 .435 .988 / .085);
+      --blue-a3: color(display-p3 .122 .463 1 / .219);
+      --blue-a4: color(display-p3 0 .467 1 / .324);
+      --blue-a5: color(display-p3 .098 .51 1 / .4);
+      --blue-a6: color(display-p3 .224 .557 1 / .475);
+      --blue-a7: color(display-p3 .294 .584 1 / .572);
+      --blue-a8: color(display-p3 .314 .592 1 / .702);
+      --blue-a9: color(display-p3 .251 .573 .996 / .967);
+      --blue-a10: color(display-p3 .357 .631 1 / .971);
+      --blue-a11: color(display-p3 .49 .72 1);
+      --blue-a12: color(display-p3 .788 .898 .99);
+      --blue-surface: color(display-p3 .0706 .1255 .2196 / .5);
+    }
+  }
+}
+
+:root {
+  --blue-contrast: white;
+}

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

@@ -0,0 +1,127 @@
+:root, .light, .light-theme {
+  --bronze-1: #fdfcfc;
+  --bronze-2: #fdf7f5;
+  --bronze-3: #f6edea;
+  --bronze-4: #efe4df;
+  --bronze-5: #e7d9d3;
+  --bronze-6: #dfcdc5;
+  --bronze-7: #d3bcb3;
+  --bronze-8: #c2a499;
+  --bronze-9: #a18072;
+  --bronze-10: #957468;
+  --bronze-11: #7d5e54;
+  --bronze-12: #43302b;
+  --bronze-a1: #55000003;
+  --bronze-a2: #cc33000a;
+  --bronze-a3: #92250015;
+  --bronze-a4: #80280020;
+  --bronze-a5: #7423002c;
+  --bronze-a6: #7324003a;
+  --bronze-a7: #6c1f004c;
+  --bronze-a8: #671c0066;
+  --bronze-a9: #551a008d;
+  --bronze-a10: #4c150097;
+  --bronze-a11: #3d0f00ab;
+  --bronze-a12: #1d0600d4;
+  --bronze-surface: #fdf5f3cc;
+  --bronze-indicator: var(--bronze-9);
+  --bronze-track: var(--bronze-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --bronze-1: color(display-p3 .991 .988 .988);
+      --bronze-2: color(display-p3 .989 .97 .961);
+      --bronze-3: color(display-p3 .958 .932 .919);
+      --bronze-4: color(display-p3 .929 .894 .877);
+      --bronze-5: color(display-p3 .898 .853 .832);
+      --bronze-6: color(display-p3 .861 .805 .778);
+      --bronze-7: color(display-p3 .812 .739 .706);
+      --bronze-8: color(display-p3 .741 .647 .606);
+      --bronze-9: color(display-p3 .611 .507 .455);
+      --bronze-10: color(display-p3 .563 .461 .414);
+      --bronze-11: color(display-p3 .471 .373 .336);
+      --bronze-12: color(display-p3 .251 .191 .172);
+      --bronze-a1: color(display-p3 .349 .024 .024 / .012);
+      --bronze-a2: color(display-p3 .71 .22 .024 / .04);
+      --bronze-a3: color(display-p3 .482 .2 .008 / .083);
+      --bronze-a4: color(display-p3 .424 .133 .004 / .122);
+      --bronze-a5: color(display-p3 .4 .145 .004 / .169);
+      --bronze-a6: color(display-p3 .388 .125 .004 / .224);
+      --bronze-a7: color(display-p3 .365 .11 .004 / .295);
+      --bronze-a8: color(display-p3 .341 .102 .004 / .393);
+      --bronze-a9: color(display-p3 .29 .094 0 / .546);
+      --bronze-a10: color(display-p3 .255 .082 0 / .585);
+      --bronze-a11: color(display-p3 .471 .373 .336);
+      --bronze-a12: color(display-p3 .251 .191 .172);
+      --bronze-surface: color(display-p3 .9843 .9608 .9529 / .8);
+    }
+  }
+}
+
+.dark, .dark-theme {
+  --bronze-1: #141110;
+  --bronze-2: #1c1917;
+  --bronze-3: #262220;
+  --bronze-4: #302a27;
+  --bronze-5: #3b3330;
+  --bronze-6: #493e3a;
+  --bronze-7: #5a4c47;
+  --bronze-8: #6f5f58;
+  --bronze-9: #a18072;
+  --bronze-10: #ae8c7e;
+  --bronze-11: #d4b3a5;
+  --bronze-12: #ede0d9;
+  --bronze-a1: #d1110004;
+  --bronze-a2: #fbbc910c;
+  --bronze-a3: #faceb817;
+  --bronze-a4: #facdb622;
+  --bronze-a5: #ffd2c12d;
+  --bronze-a6: #ffd1c03c;
+  --bronze-a7: #fdd0c04f;
+  --bronze-a8: #ffd6c565;
+  --bronze-a9: #fec7b09b;
+  --bronze-a10: #fecab5a9;
+  --bronze-a11: #ffd7c6d1;
+  --bronze-a12: #fff1e9ec;
+  --bronze-surface: #27211d80;
+  --bronze-indicator: var(--bronze-9);
+  --bronze-track: var(--bronze-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --bronze-1: color(display-p3 .076 .067 .063);
+      --bronze-2: color(display-p3 .106 .097 .093);
+      --bronze-3: color(display-p3 .147 .132 .125);
+      --bronze-4: color(display-p3 .185 .166 .156);
+      --bronze-5: color(display-p3 .227 .202 .19);
+      --bronze-6: color(display-p3 .278 .246 .23);
+      --bronze-7: color(display-p3 .343 .302 .281);
+      --bronze-8: color(display-p3 .426 .374 .347);
+      --bronze-9: color(display-p3 .611 .507 .455);
+      --bronze-10: color(display-p3 .66 .556 .504);
+      --bronze-11: color(display-p3 .81 .707 .655);
+      --bronze-12: color(display-p3 .921 .88 .854);
+      --bronze-a1: color(display-p3 .941 .067 0 / .009);
+      --bronze-a2: color(display-p3 .98 .8 .706 / .043);
+      --bronze-a3: color(display-p3 .988 .851 .761 / .085);
+      --bronze-a4: color(display-p3 .996 .839 .78 / .127);
+      --bronze-a5: color(display-p3 .996 .863 .773 / .173);
+      --bronze-a6: color(display-p3 1 .863 .796 / .227);
+      --bronze-a7: color(display-p3 1 .867 .8 / .295);
+      --bronze-a8: color(display-p3 1 .859 .788 / .387);
+      --bronze-a9: color(display-p3 1 .82 .733 / .585);
+      --bronze-a10: color(display-p3 1 .839 .761 / .635);
+      --bronze-a11: color(display-p3 .81 .707 .655);
+      --bronze-a12: color(display-p3 .921 .88 .854);
+      --bronze-surface: color(display-p3 .1412 .1255 .1176 / .5);
+    }
+  }
+}
+
+:root {
+  --bronze-contrast: white;
+}

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

@@ -0,0 +1,127 @@
+:root, .light, .light-theme {
+  --brown-1: #fefdfc;
+  --brown-2: #fcf9f6;
+  --brown-3: #f6eee7;
+  --brown-4: #f0e4d9;
+  --brown-5: #ebdaca;
+  --brown-6: #e4cdb7;
+  --brown-7: #dcbc9f;
+  --brown-8: #cea37e;
+  --brown-9: #ad7f58;
+  --brown-10: #a07553;
+  --brown-11: #815e46;
+  --brown-12: #3e332e;
+  --brown-a1: #aa550003;
+  --brown-a2: #aa550009;
+  --brown-a3: #a04b0018;
+  --brown-a4: #9b4a0026;
+  --brown-a5: #9f4d0035;
+  --brown-a6: #a04e0048;
+  --brown-a7: #a34e0060;
+  --brown-a8: #9f4a0081;
+  --brown-a9: #823c00a7;
+  --brown-a10: #723300ac;
+  --brown-a11: #522100b9;
+  --brown-a12: #140600d1;
+  --brown-surface: #fbf8f4cc;
+  --brown-indicator: var(--brown-9);
+  --brown-track: var(--brown-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --brown-1: color(display-p3 .995 .992 .989);
+      --brown-2: color(display-p3 .987 .976 .964);
+      --brown-3: color(display-p3 .959 .936 .909);
+      --brown-4: color(display-p3 .934 .897 .855);
+      --brown-5: color(display-p3 .909 .856 .798);
+      --brown-6: color(display-p3 .88 .808 .73);
+      --brown-7: color(display-p3 .841 .742 .639);
+      --brown-8: color(display-p3 .782 .647 .514);
+      --brown-9: color(display-p3 .651 .505 .368);
+      --brown-10: color(display-p3 .601 .465 .344);
+      --brown-11: color(display-p3 .485 .374 .288);
+      --brown-12: color(display-p3 .236 .202 .183);
+      --brown-a1: color(display-p3 .675 .349 .024 / .012);
+      --brown-a2: color(display-p3 .675 .349 .024 / .036);
+      --brown-a3: color(display-p3 .573 .314 .012 / .091);
+      --brown-a4: color(display-p3 .545 .302 .008 / .146);
+      --brown-a5: color(display-p3 .561 .29 .004 / .204);
+      --brown-a6: color(display-p3 .553 .294 .004 / .271);
+      --brown-a7: color(display-p3 .557 .286 .004 / .361);
+      --brown-a8: color(display-p3 .549 .275 .004 / .487);
+      --brown-a9: color(display-p3 .447 .22 0 / .632);
+      --brown-a10: color(display-p3 .388 .188 0 / .655);
+      --brown-a11: color(display-p3 .485 .374 .288);
+      --brown-a12: color(display-p3 .236 .202 .183);
+      --brown-surface: color(display-p3 .9843 .9725 .9569 / .8);
+    }
+  }
+}
+
+.dark, .dark-theme {
+  --brown-1: #12110f;
+  --brown-2: #1c1816;
+  --brown-3: #28211d;
+  --brown-4: #322922;
+  --brown-5: #3e3128;
+  --brown-6: #4d3c2f;
+  --brown-7: #614a39;
+  --brown-8: #7c5f46;
+  --brown-9: #ad7f58;
+  --brown-10: #b88c67;
+  --brown-11: #dbb594;
+  --brown-12: #f2e1ca;
+  --brown-a1: #91110002;
+  --brown-a2: #fba67c0c;
+  --brown-a3: #fcb58c19;
+  --brown-a4: #fbbb8a24;
+  --brown-a5: #fcb88931;
+  --brown-a6: #fdba8741;
+  --brown-a7: #ffbb8856;
+  --brown-a8: #ffbe8773;
+  --brown-a9: #feb87da8;
+  --brown-a10: #ffc18cb3;
+  --brown-a11: #fed1aad9;
+  --brown-a12: #feecd4f2;
+  --brown-surface: #271f1b80;
+  --brown-indicator: var(--brown-9);
+  --brown-track: var(--brown-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --brown-1: color(display-p3 .071 .067 .059);
+      --brown-2: color(display-p3 .107 .095 .087);
+      --brown-3: color(display-p3 .151 .13 .115);
+      --brown-4: color(display-p3 .191 .161 .138);
+      --brown-5: color(display-p3 .235 .194 .162);
+      --brown-6: color(display-p3 .291 .237 .192);
+      --brown-7: color(display-p3 .365 .295 .232);
+      --brown-8: color(display-p3 .469 .377 .287);
+      --brown-9: color(display-p3 .651 .505 .368);
+      --brown-10: color(display-p3 .697 .557 .423);
+      --brown-11: color(display-p3 .835 .715 .597);
+      --brown-12: color(display-p3 .938 .885 .802);
+      --brown-a1: color(display-p3 .855 .071 0 / .005);
+      --brown-a2: color(display-p3 .98 .706 .525 / .043);
+      --brown-a3: color(display-p3 .996 .745 .576 / .093);
+      --brown-a4: color(display-p3 1 .765 .592 / .135);
+      --brown-a5: color(display-p3 1 .761 .588 / .181);
+      --brown-a6: color(display-p3 1 .773 .592 / .24);
+      --brown-a7: color(display-p3 .996 .776 .58 / .32);
+      --brown-a8: color(display-p3 1 .78 .573 / .433);
+      --brown-a9: color(display-p3 1 .769 .549 / .627);
+      --brown-a10: color(display-p3 1 .792 .596 / .677);
+      --brown-a11: color(display-p3 .835 .715 .597);
+      --brown-a12: color(display-p3 .938 .885 .802);
+      --brown-surface: color(display-p3 .1412 .1176 .102 / .5);
+    }
+  }
+}
+
+:root {
+  --brown-contrast: white;
+}