@koi-design/uxd-ui 12.1.36-beta.0

package/styles/tokens/colors/gray.css

@@ -0,0 +1,117 @@
+:root, .light, .light-theme {
+  --gray-1: #fcfcfc;
+  --gray-2: #f9f9f9;
+  --gray-3: #f0f0f0;
+  --gray-4: #e8e8e8;
+  --gray-5: #e0e0e0;
+  --gray-6: #d9d9d9;
+  --gray-7: #cecece;
+  --gray-8: #bbb;
+  --gray-9: #8d8d8d;
+  --gray-10: #838383;
+  --gray-11: #646464;
+  --gray-12: #202020;
+  --gray-a1: #00000003;
+  --gray-a2: #00000006;
+  --gray-a3: #0000000f;
+  --gray-a4: #00000017;
+  --gray-a5: #0000001f;
+  --gray-a6: #00000026;
+  --gray-a7: #00000031;
+  --gray-a8: #0004;
+  --gray-a9: #00000072;
+  --gray-a10: #0000007c;
+  --gray-a11: #0000009b;
+  --gray-a12: #000000df;
+}
+
+
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --gray-1: color(display-p3 0.988 0.988 0.988);
+      --gray-2: color(display-p3 0.975 0.975 0.975);
+      --gray-3: color(display-p3 0.939 0.939 0.939);
+      --gray-4: color(display-p3 0.908 0.908 0.908);
+      --gray-5: color(display-p3 0.88 0.88 0.88);
+      --gray-6: color(display-p3 0.849 0.849 0.849);
+      --gray-7: color(display-p3 0.807 0.807 0.807);
+      --gray-8: color(display-p3 0.732 0.732 0.732);
+      --gray-9: color(display-p3 0.553 0.553 0.553);
+      --gray-10: color(display-p3 0.512 0.512 0.512);
+      --gray-11: color(display-p3 0.392 0.392 0.392);
+      --gray-12: color(display-p3 0.125 0.125 0.125);
+      --gray-a1: color(display-p3 0 0 0 / 1.2%);
+      --gray-a2: color(display-p3 0 0 0 / 2.4%);
+      --gray-a3: color(display-p3 0 0 0 / 6.3%);
+      --gray-a4: color(display-p3 0 0 0 / 9%);
+      --gray-a5: color(display-p3 0 0 0 / 12.2%);
+      --gray-a6: color(display-p3 0 0 0 / 15.3%);
+      --gray-a7: color(display-p3 0 0 0 / 19.2%);
+      --gray-a8: color(display-p3 0 0 0 / 26.7%);
+      --gray-a9: color(display-p3 0 0 0 / 44.7%);
+      --gray-a10: color(display-p3 0 0 0 / 48.6%);
+      --gray-a11: color(display-p3 0 0 0 / 60.8%);
+      --gray-a12: color(display-p3 0 0 0 / 87.5%);
+    }
+  }
+}
+
+.dark, .dark-theme {
+  --gray-1: #111;
+  --gray-2: #191919;
+  --gray-3: #222;
+  --gray-4: #2a2a2a;
+  --gray-5: #313131;
+  --gray-6: #3a3a3a;
+  --gray-7: #484848;
+  --gray-8: #606060;
+  --gray-9: #6e6e6e;
+  --gray-10: #7b7b7b;
+  --gray-11: #b4b4b4;
+  --gray-12: #eee;
+  --gray-a1: #0000;
+  --gray-a2: #ffffff09;
+  --gray-a3: #ffffff12;
+  --gray-a4: #ffffff1b;
+  --gray-a5: #fff2;
+  --gray-a6: #ffffff2c;
+  --gray-a7: #ffffff3b;
+  --gray-a8: #fff5;
+  --gray-a9: #ffffff64;
+  --gray-a10: #ffffff72;
+  --gray-a11: #ffffffaf;
+  --gray-a12: #ffffffed;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --gray-1: color(display-p3 0.067 0.067 0.067);
+      --gray-2: color(display-p3 0.098 0.098 0.098);
+      --gray-3: color(display-p3 0.135 0.135 0.135);
+      --gray-4: color(display-p3 0.163 0.163 0.163);
+      --gray-5: color(display-p3 0.192 0.192 0.192);
+      --gray-6: color(display-p3 0.228 0.228 0.228);
+      --gray-7: color(display-p3 0.283 0.283 0.283);
+      --gray-8: color(display-p3 0.375 0.375 0.375);
+      --gray-9: color(display-p3 0.431 0.431 0.431);
+      --gray-10: color(display-p3 0.484 0.484 0.484);
+      --gray-11: color(display-p3 0.706 0.706 0.706);
+      --gray-12: color(display-p3 0.933 0.933 0.933);
+      --gray-a1: color(display-p3 0 0 0 / 0%);
+      --gray-a2: color(display-p3 1 1 1 / 3.4%);
+      --gray-a3: color(display-p3 1 1 1 / 7.1%);
+      --gray-a4: color(display-p3 1 1 1 / 10.5%);
+      --gray-a5: color(display-p3 1 1 1 / 13.4%);
+      --gray-a6: color(display-p3 1 1 1 / 17.2%);
+      --gray-a7: color(display-p3 1 1 1 / 23.1%);
+      --gray-a8: color(display-p3 1 1 1 / 33.2%);
+      --gray-a9: color(display-p3 1 1 1 / 39.1%);
+      --gray-a10: color(display-p3 1 1 1 / 44.5%);
+      --gray-a11: color(display-p3 1 1 1 / 68.5%);
+      --gray-a12: color(display-p3 1 1 1 / 92.9%);
+    }
+  }
+}

package/styles/tokens/colors/index.css

@@ -0,0 +1,18 @@
+@import './whiteA.css';
+@import './blackA.css';
+@import 'blue.css';
+@import 'cyan.css';
+@import 'grass.css';
+@import 'gray.css';
+@import 'iris.css';
+@import 'orange.css';
+@import 'slate.css';
+@import 'tomato.css';
+@import 'yellow.css';
+@import 'lime.css';
+@import 'amber.css';
+@import 'pink.css';
+@import 'purple.css';
+@import 'violet.css';
+@import 'sky.css';
+@import 'mint.css';

package/styles/tokens/colors/iris.css

@@ -0,0 +1,126 @@
+: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-contrast: white;
+  --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 0.992 0.992 0.999);
+      --iris-2: color(display-p3 0.972 0.973 0.998);
+      --iris-3: color(display-p3 0.943 0.945 0.992);
+      --iris-4: color(display-p3 0.902 0.906 1);
+      --iris-5: color(display-p3 0.857 0.861 1);
+      --iris-6: color(display-p3 0.799 0.805 0.987);
+      --iris-7: color(display-p3 0.721 0.727 0.955);
+      --iris-8: color(display-p3 0.61 0.619 0.918);
+      --iris-9: color(display-p3 0.357 0.357 0.81);
+      --iris-10: color(display-p3 0.318 0.318 0.774);
+      --iris-11: color(display-p3 0.337 0.326 0.748);
+      --iris-12: color(display-p3 0.154 0.161 0.371);
+      --iris-a1: color(display-p3 0.02 0.02 1 / 0.8%);
+      --iris-a2: color(display-p3 0.024 0.024 0.863 / 2.8%);
+      --iris-a3: color(display-p3 0.004 0.071 0.871 / 5.9%);
+      --iris-a4: color(display-p3 0.012 0.051 1 / 9.9%);
+      --iris-a5: color(display-p3 0.008 0.035 1 / 14.2%);
+      --iris-a6: color(display-p3 0 0.02 0.941 / 20%);
+      --iris-a7: color(display-p3 0.004 0.02 0.847 / 27.9%);
+      --iris-a8: color(display-p3 0.004 0.024 0.788 / 38.9%);
+      --iris-a9: color(display-p3 0 0 0.706 / 64.4%);
+      --iris-a10: color(display-p3 0 0 0.667 / 68.3%);
+      --iris-a11: color(display-p3 0.337 0.326 0.748);
+      --iris-a12: color(display-p3 0.154 0.161 0.371);
+      --iris-surface: color(display-p3 0.9647 0.9647 0.9961 / 80%);
+
+    }
+  }
+}
+
+
+.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 0.075 0.075 0.114);
+      --iris-2: color(display-p3 0.089 0.086 0.14);
+      --iris-3: color(display-p3 0.128 0.134 0.272);
+      --iris-4: color(display-p3 0.153 0.165 0.382);
+      --iris-5: color(display-p3 0.192 0.201 0.44);
+      --iris-6: color(display-p3 0.239 0.241 0.491);
+      --iris-7: color(display-p3 0.291 0.289 0.565);
+      --iris-8: color(display-p3 0.35 0.345 0.673);
+      --iris-9: color(display-p3 0.357 0.357 0.81);
+      --iris-10: color(display-p3 0.428 0.416 0.843);
+      --iris-11: color(display-p3 0.685 0.662 1);
+      --iris-12: color(display-p3 0.878 0.875 0.986);
+      --iris-a1: color(display-p3 0.224 0.224 0.992 / 5.1%);
+      --iris-a2: color(display-p3 0.361 0.314 1 / 8%);
+      --iris-a3: color(display-p3 0.357 0.373 1 / 21.9%);
+      --iris-a4: color(display-p3 0.325 0.361 1 / 33.7%);
+      --iris-a5: color(display-p3 0.38 0.4 1 / 40%);
+      --iris-a6: color(display-p3 0.447 0.447 1 / 45.4%);
+      --iris-a7: color(display-p3 0.486 0.486 1 / 53.4%);
+      --iris-a8: color(display-p3 0.502 0.494 1 / 65.2%);
+      --iris-a9: color(display-p3 0.431 0.431 1 / 79.9%);
+      --iris-a10: color(display-p3 0.502 0.486 1 / 83.2%);
+      --iris-a11: color(display-p3 0.685 0.662 1);
+      --iris-a12: color(display-p3 0.878 0.875 0.986);
+      --iris-surface: color(display-p3 0.1098 0.102 0.2118 / 50%);
+    }
+  }
+}

package/styles/tokens/colors/lime.css

@@ -0,0 +1,124 @@
+: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-contrast: #1d211c;
+  --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 0.989 0.992 0.981);
+      --lime-2: color(display-p3 0.975 0.98 0.954);
+      --lime-3: color(display-p3 0.939 0.965 0.851);
+      --lime-4: color(display-p3 0.896 0.94 0.76);
+      --lime-5: color(display-p3 0.843 0.903 0.678);
+      --lime-6: color(display-p3 0.778 0.852 0.599);
+      --lime-7: color(display-p3 0.694 0.784 0.508);
+      --lime-8: color(display-p3 0.585 0.707 0.378);
+      --lime-9: color(display-p3 0.78 0.928 0.466);
+      --lime-10: color(display-p3 0.734 0.896 0.397);
+      --lime-11: color(display-p3 0.386 0.482 0.227);
+      --lime-12: color(display-p3 0.222 0.25 0.128);
+      --lime-a1: color(display-p3 0.412 0.608 0.02 / 2%);
+      --lime-a2: color(display-p3 0.514 0.592 0.024 / 4.8%);
+      --lime-a3: color(display-p3 0.584 0.765 0.008 / 15%);
+      --lime-a4: color(display-p3 0.561 0.757 0.004 / 24%);
+      --lime-a5: color(display-p3 0.514 0.698 0.004 / 32.2%);
+      --lime-a6: color(display-p3 0.443 0.627 0 / 40%);
+      --lime-a7: color(display-p3 0.376 0.561 0.004 / 49.1%);
+      --lime-a8: color(display-p3 0.333 0.529 0 / 62.4%);
+      --lime-a9: color(display-p3 0.588 0.867 0 / 53.4%);
+      --lime-a10: color(display-p3 0.561 0.827 0 / 60.4%);
+      --lime-a11: color(display-p3 0.386 0.482 0.227);
+      --lime-a12: color(display-p3 0.222 0.25 0.128);
+      --lime-surface: color(display-p3 0.9725 0.9765 0.9412 / 80%);
+    }
+  }
+}
+
+.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 0.067 0.073 0.048);
+      --lime-2: color(display-p3 0.086 0.1 0.067);
+      --lime-3: color(display-p3 0.13 0.16 0.099);
+      --lime-4: color(display-p3 0.172 0.214 0.126);
+      --lime-5: color(display-p3 0.213 0.266 0.153);
+      --lime-6: color(display-p3 0.257 0.321 0.182);
+      --lime-7: color(display-p3 0.307 0.383 0.215);
+      --lime-8: color(display-p3 0.365 0.456 0.25);
+      --lime-9: color(display-p3 0.78 0.928 0.466);
+      --lime-10: color(display-p3 0.865 0.995 0.519);
+      --lime-11: color(display-p3 0.771 0.893 0.485);
+      --lime-12: color(display-p3 0.905 0.966 0.753);
+      --lime-a1: color(display-p3 0.067 0.941 0 / 0.9%);
+      --lime-a2: color(display-p3 0.584 0.996 0.071 / 3.8%);
+      --lime-a3: color(display-p3 0.69 1 0.38 / 10.1%);
+      --lime-a4: color(display-p3 0.729 1 0.435 / 16%);
+      --lime-a5: color(display-p3 0.745 1 0.471 / 21.5%);
+      --lime-a6: color(display-p3 0.769 1 0.482 / 27.4%);
+      --lime-a7: color(display-p3 0.769 1 0.506 / 34.1%);
+      --lime-a8: color(display-p3 0.784 1 0.51 / 41.6%);
+      --lime-a9: color(display-p3 0.839 1 0.502 / 92.5%);
+      --lime-a10: color(display-p3 0.871 1 0.522 / 99.6%);
+      --lime-a11: color(display-p3 0.771 0.893 0.485);
+      --lime-a12: color(display-p3 0.905 0.966 0.753);
+      --lime-surface: color(display-p3 0.1098 0.1255 0.0784 / 50%);
+    }
+  }
+}

package/styles/tokens/colors/mint.css

@@ -0,0 +1,133 @@
+:root, .light, .light-theme {
+  --mint-1: #f9fefd;
+  --mint-2: #f2fbf9;
+  --mint-3: #def8f1;
+  --mint-4: #caf3e9;
+  --mint-5: #b5ebde;
+  --mint-6: #9de0d0;
+  --mint-7: #7ed0bd;
+  --mint-8: #49bba5;
+  --mint-9: #70dbc4;
+  --mint-10: #67d1ba;
+  --mint-11: #007a67;
+  --mint-12: #174239;
+  --mint-a1: #00d5aa06;
+  --mint-a2: #00b18a0d;
+  --mint-a3: #00c99321;
+  --mint-a4: #00c69635;
+  --mint-a5: #01bb8e4a;
+  --mint-a6: #00af8562;
+  --mint-a7: #00a37d81;
+  --mint-a8: #00a081b6;
+  --mint-a9: #00bf968f;
+  --mint-a10: #00b28c98;
+  --mint-a11: #007a67;
+  --mint-a12: #002f25e8;
+
+  /* --mint-contrast: #062821; */
+  --mint-contrast: #fff;
+  --mint-surface: #effaf8cc;
+  --mint-indicator: #70dbc4;
+  --mint-track: #70dbc4;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --mint-1: oklch(99.3% 0.005 177.7deg);
+      --mint-2: oklch(98.2% 0.01 177.7deg);
+      --mint-3: oklch(96% 0.029 177.7deg);
+      --mint-4: oklch(93.3% 0.045 177.7deg);
+      --mint-5: oklch(90% 0.059 177.7deg);
+      --mint-6: oklch(85.7% 0.071 177.7deg);
+      --mint-7: oklch(79.8% 0.085 177.7deg);
+      --mint-8: oklch(72.2% 0.108 177.7deg);
+      --mint-9: oklch(82.2% 0.105 177.7deg);
+      --mint-10: oklch(79% 0.104 177.7deg);
+      --mint-11: oklch(51.5% 0.104 177.7deg);
+      --mint-12: oklch(34.5% 0.049 177.7deg);
+      --mint-a1: color(display-p3 0.02 0.804 0.608 / 2%);
+      --mint-a2: color(display-p3 0.02 0.647 0.467 / 4.4%);
+      --mint-a3: color(display-p3 0.004 0.718 0.502 / 11%);
+      --mint-a4: color(display-p3 0.004 0.714 0.514 / 17.7%);
+      --mint-a5: color(display-p3 0.004 0.655 0.478 / 24.8%);
+      --mint-a6: color(display-p3 0.004 0.608 0.443 / 33%);
+      --mint-a7: color(display-p3 0.004 0.557 0.412 / 43.2%);
+      --mint-a8: color(display-p3 0 0.529 0.404 / 58.5%);
+      --mint-a9: color(display-p3 0.004 0.667 0.502 / 45.5%);
+      --mint-a10: color(display-p3 0.004 0.616 0.459 / 49.1%);
+      --mint-a11: color(display-p3 0 0.333 0.255 / 79.7%);
+      --mint-a12: color(display-p3 0 0.137 0.102 / 86.3%);
+
+      /* --mint-contrast: #062821; */
+      --mint-contrast: #fff;
+      --mint-surface: color(display-p3 0.945 0.98 0.973 / 80%);
+      --mint-indicator: oklch(82.2% 0.105 177.7deg);
+      --mint-track: oklch(82.2% 0.105 177.7deg);
+    }
+  }
+}
+
+.dark, .dark-theme {
+  --mint-1: #0c1311;
+  --mint-2: #101a18;
+  --mint-3: #112b26;
+  --mint-4: #0a3931;
+  --mint-5: #13463d;
+  --mint-6: #20554a;
+  --mint-7: #2c675b;
+  --mint-8: #367d6e;
+  --mint-9: #70dbc4;
+  --mint-10: #65d0ba;
+  --mint-11: #67d3bc;
+  --mint-12: #c5f4e8;
+  --mint-a1: #00bb1103;
+  --mint-a2: #00f7c40a;
+  --mint-a3: #12fed11c;
+  --mint-a4: #00ffcf2b;
+  --mint-a5: #1affd639;
+  --mint-a6: #46ffd949;
+  --mint-a7: #5bfddc5d;
+  --mint-a8: #63ffde74;
+  --mint-a9: #80fee3d9;
+  --mint-a10: #7affe4cd;
+  --mint-a11: #7bffe3d0;
+  --mint-a12: #cdfef1f4;
+  --mint-surface: #10231f80;
+  --mint-indicator: #70dbc4;
+  --mint-track: #70dbc4;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --mint-1: oklch(17.8% 0.01 177.7deg);
+      --mint-2: oklch(20.8% 0.015 177.7deg);
+      --mint-3: oklch(26.8% 0.035 177.7deg);
+      --mint-4: oklch(31.3% 0.052 177.7deg);
+      --mint-5: oklch(35.9% 0.056 177.7deg);
+      --mint-6: oklch(41% 0.059 177.7deg);
+      --mint-7: oklch(47.1% 0.065 177.7deg);
+      --mint-8: oklch(54% 0.076 177.7deg);
+      --mint-9: oklch(82.1% 0.105 177.7deg);
+      --mint-10: oklch(78.9% 0.105 177.7deg);
+      --mint-11: oklch(79.5% 0.105 177.7deg);
+      --mint-12: oklch(93% 0.051 177.7deg);
+      --mint-a1: color(display-p3 0 0.941 0.067 / 0.9%);
+      --mint-a2: color(display-p3 0.173 0.996 0.792 / 3.8%);
+      --mint-a3: color(display-p3 0.329 0.992 0.847 / 10.6%);
+      --mint-a4: color(display-p3 0.259 1 0.835 / 16.4%);
+      --mint-a5: color(display-p3 0.373 1 0.855 / 21.9%);
+      --mint-a6: color(display-p3 0.486 1 0.863 / 28.2%);
+      --mint-a7: color(display-p3 0.541 1 0.878 / 35.8%);
+      --mint-a8: color(display-p3 0.561 1 0.894 / 44.6%);
+      --mint-a9: color(display-p3 0.639 1 0.91 / 83.7%);
+      --mint-a10: color(display-p3 0.62 1 0.906 / 79.5%);
+      --mint-a11: color(display-p3 0.624 1 0.906 / 80.7%);
+      --mint-a12: color(display-p3 0.847 1 0.953 / 95%);
+      --mint-surface: color(display-p3 0.071 0.133 0.118 / 50%);
+      --mint-indicator: oklch(82.1% 0.105 177.7deg);
+      --mint-track: oklch(82.1% 0.105 177.7deg);
+    }
+  }
+}

package/styles/tokens/colors/orange.css

@@ -0,0 +1,124 @@
+: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-contrast: white;
+  --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 0.995 0.988 0.985);
+      --orange-2: color(display-p3 0.994 0.968 0.934);
+      --orange-3: color(display-p3 0.989 0.938 0.85);
+      --orange-4: color(display-p3 1 0.874 0.687);
+      --orange-5: color(display-p3 1 0.821 0.583);
+      --orange-6: color(display-p3 0.975 0.767 0.545);
+      --orange-7: color(display-p3 0.919 0.693 0.486);
+      --orange-8: color(display-p3 0.877 0.597 0.379);
+      --orange-9: color(display-p3 0.9 0.45 0.2);
+      --orange-10: color(display-p3 0.87 0.409 0.164);
+      --orange-11: color(display-p3 0.76 0.34 0);
+      --orange-12: color(display-p3 0.323 0.185 0.127);
+      --orange-a1: color(display-p3 0.757 0.267 0.024 / 1.6%);
+      --orange-a2: color(display-p3 0.886 0.533 0.008 / 6.7%);
+      --orange-a3: color(display-p3 0.922 0.584 0.008 / 15%);
+      --orange-a4: color(display-p3 1 0.604 0.004 / 31.4%);
+      --orange-a5: color(display-p3 1 0.569 0.004 / 41.6%);
+      --orange-a6: color(display-p3 0.949 0.494 0.004 / 45.5%);
+      --orange-a7: color(display-p3 0.839 0.408 0 / 51.4%);
+      --orange-a8: color(display-p3 0.804 0.349 0 / 62%);
+      --orange-a9: color(display-p3 0.878 0.314 0 / 80%);
+      --orange-a10: color(display-p3 0.843 0.29 0 / 83.6%);
+      --orange-a11: color(display-p3 0.76 0.34 0);
+      --orange-a12: color(display-p3 0.323 0.185 0.127);
+      --orange-surface: color(display-p3 0.9961 0.9608 0.9176 / 80%);
+    }
+  }
+}
+
+.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 0.088 0.07 0.057);
+      --orange-2: color(display-p3 0.113 0.089 0.061);
+      --orange-3: color(display-p3 0.189 0.12 0.056);
+      --orange-4: color(display-p3 0.262 0.132 0);
+      --orange-5: color(display-p3 0.315 0.168 0.016);
+      --orange-6: color(display-p3 0.376 0.219 0.088);
+      --orange-7: color(display-p3 0.465 0.283 0.147);
+      --orange-8: color(display-p3 0.601 0.359 0.201);
+      --orange-9: color(display-p3 0.9 0.45 0.2);
+      --orange-10: color(display-p3 0.98 0.51 0.23);
+      --orange-11: color(display-p3 1 0.63 0.38);
+      --orange-12: color(display-p3 0.98 0.883 0.775);
+      --orange-a1: color(display-p3 0.961 0.247 0 / 2.2%);
+      --orange-a2: color(display-p3 0.992 0.529 0 / 5.1%);
+      --orange-a3: color(display-p3 0.996 0.486 0 / 13.1%);
+      --orange-a4: color(display-p3 0.996 0.384 0 / 21.1%);
+      --orange-a5: color(display-p3 1 0.455 0 / 26.5%);
+      --orange-a6: color(display-p3 1 0.529 0.129 / 33.2%);
+      --orange-a7: color(display-p3 1 0.569 0.251 / 42.9%);
+      --orange-a8: color(display-p3 1 0.584 0.302 / 57.2%);
+      --orange-a9: color(display-p3 1 0.494 0.216 / 89.5%);
+      --orange-a10: color(display-p3 1 0.522 0.235 / 97.9%);
+      --orange-a11: color(display-p3 1 0.63 0.38);
+      --orange-a12: color(display-p3 0.98 0.883 0.775);
+      --orange-surface: color(display-p3 0.1412 0.1098 0.0706 / 50%);
+    }
+  }
+}