@umbra.ui/colors 0.1.0

package/src/semantic-colors.css

@@ -0,0 +1,217 @@
+:root,
+.light,
+.light-theme {
+  /* Accent Light */
+  --accent-1: #fbfdff;
+  --accent-2: #f4faff;
+  --accent-3: #e6f4fe;
+  --accent-4: #d5efff;
+  --accent-5: #c2e5ff;
+  --accent-6: #acd8fc;
+  --accent-7: #8ec8f6;
+  --accent-8: #5eb1ef;
+  --accent-9: #0090ff;
+  --accent-10: #0588f0;
+  --accent-11: #0d74ce;
+  --accent-12: #113264;
+
+  /* Accent Alpha Light */
+  --accent-a1: #0080ff04;
+  --accent-a2: #008cff0b;
+  --accent-a3: #008ff519;
+  --accent-a4: #009eff2a;
+  --accent-a5: #0093ff3d;
+  --accent-a6: #0088f653;
+  --accent-a7: #0083eb71;
+  --accent-a8: #0084e6a1;
+  --accent-a9: #0090ff;
+  --accent-a10: #0086f0fa;
+  --accent-a11: #006dcbf2;
+  --accent-a12: #002359ee;
+
+  /* Neutral Light */
+  --neutral-1: #fcfcfc;
+  --neutral-2: #f9f9f9;
+  --neutral-3: #f0f0f0;
+  --neutral-4: #e8e8e8;
+  --neutral-5: #e0e0e0;
+  --neutral-6: #d9d9d9;
+  --neutral-7: #cecece;
+  --neutral-8: #bbbbbb;
+  --neutral-9: #8d8d8d;
+  --neutral-10: #838383;
+  --neutral-11: #646464;
+  --neutral-12: #202020;
+
+  /* Neutral Alpha Light */
+  --neutral-a1: #00000003;
+  --neutral-a2: #00000006;
+  --neutral-a3: #0000000f;
+  --neutral-a4: #00000017;
+  --neutral-a5: #0000001f;
+  --neutral-a6: #00000026;
+  --neutral-a7: #00000031;
+  --neutral-a8: #00000044;
+  --neutral-a9: #00000072;
+  --neutral-a10: #0000007c;
+  --neutral-a11: #0000009b;
+  --neutral-a12: #000000df;
+
+  --background-0: white;
+  --background-1: var(--neutral-1);
+  --background-2: var(--neutral-2);
+  --control-1: var(--neutral-7);
+  --control-2: var(--neutral-5);
+  --control-3: var(--neutral-3);
+  --border-1: var(--neutral-8);
+  --border-2: var(--neutral-6);
+  --border-3: var(--neutral-4);
+  --text-1: var(--neutral-12);
+  --text-2: var(--neutral-11);
+  --text-3: var(--neutral-10);
+  --accent: var(--accent-a9);
+  --link: #00a2c7;
+  --info: #5b5bd6;
+  --success: #30a46c;
+  --warning: #ffe629;
+  --error: #e5484d;
+}
+
+.dark,
+.dark-theme {
+  /* Accent Dark */
+  --accent-1: #0d1520;
+  --accent-2: #111927;
+  --accent-3: #0d2847;
+  --accent-4: #003362;
+  --accent-5: #004074;
+  --accent-6: #104d87;
+  --accent-7: #205d9e;
+  --accent-8: #2870bd;
+  --accent-9: #0090ff;
+  --accent-10: #3b9eff;
+  --accent-11: #70b8ff;
+  --accent-12: #c2e6ff;
+
+  /* Accent Alpha Dark */
+  --accent-a1: #004df211;
+  --accent-a2: #1166fb18;
+  --accent-a3: #0077ff3a;
+  --accent-a4: #0075ff57;
+  --accent-a5: #0081fd6b;
+  --accent-a6: #0f89fd7f;
+  --accent-a7: #2a91fe98;
+  --accent-a8: #3094feb9;
+  --accent-a9: #0090ff;
+  --accent-a10: #3b9eff;
+  --accent-a11: #70b8ff;
+  --accent-a12: #c2e6ff;
+
+  /* Neutral Dark */
+  --neutral-1: #111111;
+  --neutral-2: #191919;
+  --neutral-3: #222222;
+  --neutral-4: #2a2a2a;
+  --neutral-5: #313131;
+  --neutral-6: #3a3a3a;
+  --neutral-7: #484848;
+  --neutral-8: #606060;
+  --neutral-9: #6e6e6e;
+  --neutral-10: #7b7b7b;
+  --neutral-11: #b4b4b4;
+  --neutral-12: #eeeeee;
+
+  /* Neutral Alpha Dark */
+  --neutral-a1: #00000000;
+  --neutral-a2: #ffffff09;
+  --neutral-a3: #ffffff12;
+  --neutral-a4: #ffffff1b;
+  --neutral-a5: #ffffff22;
+  --neutral-a6: #ffffff2c;
+  --neutral-a7: #ffffff3b;
+  --neutral-a8: #ffffff55;
+  --neutral-a9: #ffffff64;
+  --neutral-a10: #ffffff72;
+  --neutral-a11: #ffffffaf;
+  --neutral-a12: #ffffffed;
+
+  --background-0: black;
+  --background-1: var(--neutral-1);
+  --background-2: var(--neutral-2);
+  --control-1: var(--neutral-7);
+  --control-2: var(--neutral-5);
+  --control-3: var(--neutral-3);
+  --border-1: var(--neutral-8);
+  --border-2: var(--neutral-6);
+  --border-3: var(--neutral-4);
+  --text-1: var(--neutral-12);
+  --text-2: var(--neutral-11);
+  --text-3: var(--neutral-10);
+  --accent: var(--accent-a9);
+  --link: #00a2c7;
+  --info: #5b5bd6;
+  --success: #30a46c;
+  --warning: #ffe629;
+  --error: #e5484d;
+}
+
+/* Color Gamut light */
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root,
+    .light,
+    .light-theme {
+      --accent-1: color(display-p3 0.986 0.992 0.999);
+      --accent-2: color(display-p3 0.96 0.979 0.998);
+      --accent-3: color(display-p3 0.912 0.956 0.991);
+      --accent-4: color(display-p3 0.853 0.932 1);
+      --accent-5: color(display-p3 0.788 0.894 0.998);
+      --accent-6: color(display-p3 0.709 0.843 0.976);
+      --accent-7: color(display-p3 0.606 0.777 0.947);
+      --accent-8: color(display-p3 0.451 0.688 0.917);
+      --accent-9: color(display-p3 0.247 0.556 0.969);
+      --accent-10: color(display-p3 0.234 0.523 0.912);
+      --accent-11: color(display-p3 0.15 0.44 0.84);
+      --accent-12: color(display-p3 0.102 0.193 0.379);
+
+      --accent-a1: color(display-p3 0.024 0.514 1 / 0.016);
+      --accent-a2: color(display-p3 0.024 0.514 0.906 / 0.04);
+      --accent-a3: color(display-p3 0.012 0.506 0.914 / 0.087);
+      --accent-a4: color(display-p3 0.008 0.545 1 / 0.146);
+      --accent-a5: color(display-p3 0.004 0.502 0.984 / 0.212);
+      --accent-a6: color(display-p3 0.004 0.463 0.922 / 0.291);
+      --accent-a7: color(display-p3 0.004 0.431 0.863 / 0.393);
+      --accent-a8: color(display-p3 0 0.427 0.851 / 0.55);
+      --accent-a9: color(display-p3 0 0.412 0.961 / 0.753);
+      --accent-a10: color(display-p3 0 0.376 0.886 / 0.765);
+      --accent-a11: color(display-p3 0.15 0.44 0.84);
+      --accent-a12: color(display-p3 0.102 0.193 0.379);
+
+      --neutral-1: color(display-p3 0.988 0.988 0.988);
+      --neutral-2: color(display-p3 0.975 0.975 0.975);
+      --neutral-3: color(display-p3 0.939 0.939 0.939);
+      --neutral-4: color(display-p3 0.908 0.908 0.908);
+      --neutral-5: color(display-p3 0.88 0.88 0.88);
+      --neutral-6: color(display-p3 0.849 0.849 0.849);
+      --neutral-7: color(display-p3 0.807 0.807 0.807);
+      --neutral-8: color(display-p3 0.732 0.732 0.732);
+      --neutral-9: color(display-p3 0.553 0.553 0.553);
+      --neutral-10: color(display-p3 0.512 0.512 0.512);
+      --neutral-11: color(display-p3 0.392 0.392 0.392);
+      --neutral-12: color(display-p3 0.125 0.125 0.125);
+
+      --neutral-a1: color(display-p3 0 0 0 / 0.012);
+      --neutral-a2: color(display-p3 0 0 0 / 0.024);
+      --neutral-a3: color(display-p3 0 0 0 / 0.063);
+      --neutral-a4: color(display-p3 0 0 0 / 0.09);
+      --neutral-a5: color(display-p3 0 0 0 / 0.122);
+      --neutral-a6: color(display-p3 0 0 0 / 0.153);
+      --neutral-a7: color(display-p3 0 0 0 / 0.192);
+      --neutral-a8: color(display-p3 0 0 0 / 0.267);
+      --neutral-a9: color(display-p3 0 0 0 / 0.447);
+      --neutral-a10: color(display-p3 0 0 0 / 0.486);
+      --neutral-a11: color(display-p3 0 0 0 / 0.608);
+      --neutral-a12: color(display-p3 0 0 0 / 0.875);
+    }
+  }
+}

package/src/sky-alpha.css

@@ -0,0 +1,33 @@
+:root, .light, .light-theme {
+  --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;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --sky-a1: color(display-p3 0.02 0.804 1 / 0.02);
+      --sky-a2: color(display-p3 0.024 0.592 0.757 / 0.048);
+      --sky-a3: color(display-p3 0.004 0.655 0.886 / 0.102);
+      --sky-a4: color(display-p3 0.004 0.604 0.851 / 0.157);
+      --sky-a5: color(display-p3 0.004 0.565 0.792 / 0.224);
+      --sky-a6: color(display-p3 0.004 0.502 0.737 / 0.299);
+      --sky-a7: color(display-p3 0.004 0.459 0.694 / 0.397);
+      --sky-a8: color(display-p3 0 0.435 0.682 / 0.542);
+      --sky-a9: color(display-p3 0.004 0.71 0.965 / 0.416);
+      --sky-a10: color(display-p3 0.004 0.647 0.914 / 0.444);
+      --sky-a11: color(display-p3 0.193 0.448 0.605);
+      --sky-a12: color(display-p3 0.145 0.241 0.329);
+    }
+  }
+}

package/src/sky-dark-alpha.css

@@ -0,0 +1,33 @@
+.dark, .dark-theme {
+  --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;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --sky-a1: color(display-p3 0 0.282 0.996 / 0.055);
+      --sky-a2: color(display-p3 0.157 0.467 0.992 / 0.089);
+      --sky-a3: color(display-p3 0.192 0.522 0.996 / 0.19);
+      --sky-a4: color(display-p3 0.212 0.584 1 / 0.274);
+      --sky-a5: color(display-p3 0.259 0.631 1 / 0.349);
+      --sky-a6: color(display-p3 0.302 0.655 1 / 0.433);
+      --sky-a7: color(display-p3 0.329 0.686 1 / 0.526);
+      --sky-a8: color(display-p3 0.325 0.71 1 / 0.643);
+      --sky-a9: color(display-p3 0.592 0.894 1 / 0.984);
+      --sky-a10: color(display-p3 0.722 0.933 1 / 0.992);
+      --sky-a11: color(display-p3 0.536 0.772 0.924);
+      --sky-a12: color(display-p3 0.799 0.947 0.993);
+    }
+  }
+}

package/src/sky-dark.css

@@ -0,0 +1,33 @@
+.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;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --sky-1: color(display-p3 0.056 0.078 0.116);
+      --sky-2: color(display-p3 0.075 0.101 0.149);
+      --sky-3: color(display-p3 0.089 0.154 0.244);
+      --sky-4: color(display-p3 0.106 0.207 0.323);
+      --sky-5: color(display-p3 0.135 0.261 0.394);
+      --sky-6: color(display-p3 0.17 0.322 0.469);
+      --sky-7: color(display-p3 0.205 0.394 0.557);
+      --sky-8: color(display-p3 0.232 0.48 0.665);
+      --sky-9: color(display-p3 0.585 0.877 0.983);
+      --sky-10: color(display-p3 0.718 0.925 0.991);
+      --sky-11: color(display-p3 0.536 0.772 0.924);
+      --sky-12: color(display-p3 0.799 0.947 0.993);
+    }
+  }
+}

package/src/sky.css

@@ -0,0 +1,33 @@
+: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;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --sky-1: color(display-p3 0.98 0.995 0.999);
+      --sky-2: color(display-p3 0.953 0.98 0.99);
+      --sky-3: color(display-p3 0.899 0.963 0.989);
+      --sky-4: color(display-p3 0.842 0.937 0.977);
+      --sky-5: color(display-p3 0.777 0.9 0.954);
+      --sky-6: color(display-p3 0.701 0.851 0.921);
+      --sky-7: color(display-p3 0.604 0.785 0.879);
+      --sky-8: color(display-p3 0.457 0.696 0.829);
+      --sky-9: color(display-p3 0.585 0.877 0.983);
+      --sky-10: color(display-p3 0.555 0.845 0.959);
+      --sky-11: color(display-p3 0.193 0.448 0.605);
+      --sky-12: color(display-p3 0.145 0.241 0.329);
+    }
+  }
+}

package/src/slate-alpha.css

@@ -0,0 +1,33 @@
+:root, .light, .light-theme {
+  --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;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --slate-a1: color(display-p3 0.024 0.024 0.349 / 0.012);
+      --slate-a2: color(display-p3 0.024 0.024 0.349 / 0.024);
+      --slate-a3: color(display-p3 0.004 0.004 0.204 / 0.059);
+      --slate-a4: color(display-p3 0.012 0.012 0.184 / 0.091);
+      --slate-a5: color(display-p3 0.004 0.039 0.2 / 0.122);
+      --slate-a6: color(display-p3 0.008 0.008 0.165 / 0.15);
+      --slate-a7: color(display-p3 0.008 0.027 0.184 / 0.197);
+      --slate-a8: color(display-p3 0.004 0.031 0.176 / 0.275);
+      --slate-a9: color(display-p3 0.004 0.02 0.106 / 0.455);
+      --slate-a10: color(display-p3 0.004 0.027 0.098 / 0.499);
+      --slate-a11: color(display-p3 0 0.02 0.063 / 0.62);
+      --slate-a12: color(display-p3 0 0.012 0.031 / 0.887);
+    }
+  }
+}

package/src/slate-dark-alpha.css

@@ -0,0 +1,33 @@
+.dark, .dark-theme {
+  --slate-a1: #00000000;
+  --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;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --slate-a1: color(display-p3 0 0 0 / 0);
+      --slate-a2: color(display-p3 0.875 0.992 1 / 0.034);
+      --slate-a3: color(display-p3 0.882 0.933 0.992 / 0.077);
+      --slate-a4: color(display-p3 0.882 0.953 0.996 / 0.111);
+      --slate-a5: color(display-p3 0.878 0.929 0.996 / 0.145);
+      --slate-a6: color(display-p3 0.882 0.949 0.996 / 0.183);
+      --slate-a7: color(display-p3 0.882 0.929 1 / 0.246);
+      --slate-a8: color(display-p3 0.871 0.937 1 / 0.361);
+      --slate-a9: color(display-p3 0.898 0.937 1 / 0.42);
+      --slate-a10: color(display-p3 0.918 0.945 1 / 0.475);
+      --slate-a11: color(display-p3 0.949 0.969 0.996 / 0.708);
+      --slate-a12: color(display-p3 0.988 0.992 1 / 0.937);
+    }
+  }
+}

package/src/slate-dark.css

@@ -0,0 +1,33 @@
+.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;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --slate-1: color(display-p3 0.067 0.067 0.074);
+      --slate-2: color(display-p3 0.095 0.098 0.105);
+      --slate-3: color(display-p3 0.13 0.135 0.145);
+      --slate-4: color(display-p3 0.156 0.163 0.176);
+      --slate-5: color(display-p3 0.183 0.191 0.206);
+      --slate-6: color(display-p3 0.215 0.226 0.244);
+      --slate-7: color(display-p3 0.265 0.28 0.302);
+      --slate-8: color(display-p3 0.357 0.381 0.409);
+      --slate-9: color(display-p3 0.415 0.431 0.463);
+      --slate-10: color(display-p3 0.469 0.483 0.514);
+      --slate-11: color(display-p3 0.692 0.704 0.728);
+      --slate-12: color(display-p3 0.93 0.933 0.94);
+    }
+  }
+}

package/src/slate.css

@@ -0,0 +1,33 @@
+: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;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --slate-1: color(display-p3 0.988 0.988 0.992);
+      --slate-2: color(display-p3 0.976 0.976 0.984);
+      --slate-3: color(display-p3 0.94 0.941 0.953);
+      --slate-4: color(display-p3 0.908 0.909 0.925);
+      --slate-5: color(display-p3 0.88 0.881 0.901);
+      --slate-6: color(display-p3 0.85 0.852 0.876);
+      --slate-7: color(display-p3 0.805 0.808 0.838);
+      --slate-8: color(display-p3 0.727 0.733 0.773);
+      --slate-9: color(display-p3 0.547 0.553 0.592);
+      --slate-10: color(display-p3 0.503 0.512 0.549);
+      --slate-11: color(display-p3 0.379 0.392 0.421);
+      --slate-12: color(display-p3 0.113 0.125 0.14);
+    }
+  }
+}

package/src/teal-alpha.css

@@ -0,0 +1,33 @@
+:root, .light, .light-theme {
+  --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;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --teal-a1: color(display-p3 0.024 0.757 0.514 / 0.016);
+      --teal-a2: color(display-p3 0.02 0.647 0.467 / 0.044);
+      --teal-a3: color(display-p3 0.004 0.741 0.557 / 0.106);
+      --teal-a4: color(display-p3 0.004 0.702 0.537 / 0.169);
+      --teal-a5: color(display-p3 0.004 0.643 0.494 / 0.24);
+      --teal-a6: color(display-p3 0.004 0.569 0.447 / 0.318);
+      --teal-a7: color(display-p3 0.004 0.518 0.424 / 0.42);
+      --teal-a8: color(display-p3 0 0.506 0.424 / 0.569);
+      --teal-a9: color(display-p3 0 0.482 0.404 / 0.702);
+      --teal-a10: color(display-p3 0 0.451 0.369 / 0.726);
+      --teal-a11: color(display-p3 0.08 0.5 0.43);
+      --teal-a12: color(display-p3 0.11 0.235 0.219);
+    }
+  }
+}

package/src/teal-dark-alpha.css

@@ -0,0 +1,33 @@
+.dark, .dark-theme {
+  --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;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --teal-a1: color(display-p3 0 0.992 0.761 / 0.017);
+      --teal-a2: color(display-p3 0.235 0.988 0.902 / 0.047);
+      --teal-a3: color(display-p3 0.235 1 0.898 / 0.118);
+      --teal-a4: color(display-p3 0.18 0.996 0.929 / 0.173);
+      --teal-a5: color(display-p3 0.31 1 0.933 / 0.227);
+      --teal-a6: color(display-p3 0.396 1 0.933 / 0.286);
+      --teal-a7: color(display-p3 0.443 1 0.925 / 0.366);
+      --teal-a8: color(display-p3 0.459 1 0.925 / 0.454);
+      --teal-a9: color(display-p3 0.443 0.996 0.906 / 0.61);
+      --teal-a10: color(display-p3 0.439 0.996 0.89 / 0.669);
+      --teal-a11: color(display-p3 0.388 0.835 0.719);
+      --teal-a12: color(display-p3 0.734 0.934 0.87);
+    }
+  }
+}

package/src/teal-dark.css

@@ -0,0 +1,33 @@
+.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;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --teal-1: color(display-p3 0.059 0.083 0.079);
+      --teal-2: color(display-p3 0.075 0.11 0.107);
+      --teal-3: color(display-p3 0.087 0.175 0.165);
+      --teal-4: color(display-p3 0.087 0.227 0.214);
+      --teal-5: color(display-p3 0.12 0.277 0.261);
+      --teal-6: color(display-p3 0.162 0.335 0.314);
+      --teal-7: color(display-p3 0.205 0.406 0.379);
+      --teal-8: color(display-p3 0.245 0.489 0.453);
+      --teal-9: color(display-p3 0.297 0.637 0.581);
+      --teal-10: color(display-p3 0.319 0.69 0.62);
+      --teal-11: color(display-p3 0.388 0.835 0.719);
+      --teal-12: color(display-p3 0.734 0.934 0.87);
+    }
+  }
+}

package/src/teal.css

@@ -0,0 +1,33 @@
+: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;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --teal-1: color(display-p3 0.983 0.996 0.992);
+      --teal-2: color(display-p3 0.958 0.983 0.976);
+      --teal-3: color(display-p3 0.895 0.971 0.952);
+      --teal-4: color(display-p3 0.831 0.949 0.92);
+      --teal-5: color(display-p3 0.761 0.914 0.878);
+      --teal-6: color(display-p3 0.682 0.864 0.825);
+      --teal-7: color(display-p3 0.581 0.798 0.756);
+      --teal-8: color(display-p3 0.433 0.716 0.671);
+      --teal-9: color(display-p3 0.297 0.637 0.581);
+      --teal-10: color(display-p3 0.275 0.599 0.542);
+      --teal-11: color(display-p3 0.08 0.5 0.43);
+      --teal-12: color(display-p3 0.11 0.235 0.219);
+    }
+  }
+}

package/src/tomato-alpha.css

@@ -0,0 +1,33 @@
+:root, .light, .light-theme {
+  --tomato-a1: #ff000003;
+  --tomato-a2: #ff200008;
+  --tomato-a3: #f52b0018;
+  --tomato-a4: #ff35002c;
+  --tomato-a5: #ff2e003d;
+  --tomato-a6: #f92d0050;
+  --tomato-a7: #e7280067;
+  --tomato-a8: #db250084;
+  --tomato-a9: #df2600d1;
+  --tomato-a10: #d72400da;
+  --tomato-a11: #cd2200ea;
+  --tomato-a12: #460900e0;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --tomato-a1: color(display-p3 0.675 0.024 0.024 / 0.012);
+      --tomato-a2: color(display-p3 0.757 0.145 0.02 / 0.032);
+      --tomato-a3: color(display-p3 0.831 0.184 0.012 / 0.091);
+      --tomato-a4: color(display-p3 0.976 0.192 0.004 / 0.165);
+      --tomato-a5: color(display-p3 0.918 0.192 0.004 / 0.232);
+      --tomato-a6: color(display-p3 0.847 0.173 0.004 / 0.302);
+      --tomato-a7: color(display-p3 0.788 0.165 0.004 / 0.389);
+      --tomato-a8: color(display-p3 0.749 0.153 0.004 / 0.499);
+      --tomato-a9: color(display-p3 0.78 0.149 0 / 0.769);
+      --tomato-a10: color(display-p3 0.757 0.141 0 / 0.8);
+      --tomato-a11: color(display-p3 0.755 0.259 0.152);
+      --tomato-a12: color(display-p3 0.335 0.165 0.132);
+    }
+  }
+}

package/src/tomato-dark-alpha.css

@@ -0,0 +1,33 @@
+.dark, .dark-theme {
+  --tomato-a1: #f1121208;
+  --tomato-a2: #ff55330f;
+  --tomato-a3: #ff35232b;
+  --tomato-a4: #fd201142;
+  --tomato-a5: #fe332153;
+  --tomato-a6: #ff4f3864;
+  --tomato-a7: #fd644a7d;
+  --tomato-a8: #fe6d4ea7;
+  --tomato-a9: #fe5431e4;
+  --tomato-a10: #ff6847eb;
+  --tomato-a11: #ff977d;
+  --tomato-a12: #ffd6cefb;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --tomato-a1: color(display-p3 0.973 0.071 0.071 / 0.026);
+      --tomato-a2: color(display-p3 0.992 0.376 0.224 / 0.051);
+      --tomato-a3: color(display-p3 0.996 0.282 0.176 / 0.148);
+      --tomato-a4: color(display-p3 1 0.204 0.118 / 0.232);
+      --tomato-a5: color(display-p3 1 0.286 0.192 / 0.29);
+      --tomato-a6: color(display-p3 1 0.392 0.278 / 0.353);
+      --tomato-a7: color(display-p3 1 0.459 0.349 / 0.45);
+      --tomato-a8: color(display-p3 1 0.49 0.369 / 0.601);
+      --tomato-a9: color(display-p3 1 0.408 0.267 / 0.82);
+      --tomato-a10: color(display-p3 1 0.478 0.341 / 0.853);
+      --tomato-a11: color(display-p3 1 0.585 0.455);
+      --tomato-a12: color(display-p3 0.959 0.833 0.802);
+    }
+  }
+}