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

package/styles/index.less

@@ -0,0 +1,7 @@
+@import './tokens/index.css';
+@import 'cssVariable.less';
+@import 'var.less';
+@import './common/index';
+@import './animation/index';
+@import './mixins/index';
+@import './components/index';

package/styles/mixins/animation.less

@@ -0,0 +1,34 @@
+.motion-common(@duration:  var(--animation-time, 0.3)) {
+  animation-duration: @duration;
+  animation-fill-mode: both;
+}
+
+.make-motion-reverse(@className, @keyframeName, @duration:  var(--animation-time, 0.3)) {
+  .@{className}-enter-active {
+    .motion-common(@duration);
+
+    animation-name: @keyframeName;
+  }
+
+  .@{className}-leave-active {
+    .motion-common(@duration);
+
+    animation-name: @keyframeName;
+    animation-direction: reverse;
+  }
+}
+
+.make-motion(@className, @keyframeName, @duration: var(--animation-time, 0.3)) {
+  .@{className}-enter-active {
+    .motion-common(@duration);
+
+    animation-name: ~'@{keyframeName}In';
+  }
+
+  .@{className}-leave-active {
+    .motion-common(@duration);
+
+    animation-name: ~'@{keyframeName}Out';
+  }
+}
+

package/styles/mixins/close.less

@@ -0,0 +1,12 @@
+.close-base(@top: 0, @icon-font-size) {
+  font-size: @icon-font-size;
+  color: var(--gray-9);
+  transition: color var(--animation-time-short) ease;
+  position: relative;
+  top: @top;
+  cursor: pointer;
+
+  &:hover {
+    color: #444;
+  }
+}

package/styles/mixins/compatibility.less

@@ -0,0 +1,23 @@
+/* stylelint-disable selector-no-vendor-prefix */
+// Compatibility for browsers.
+
+// Placeholder text
+.placeholder(@color: var(--placeholder-color)) {
+  // Firefox
+  &::-moz-placeholder {
+    color: @color;
+    opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
+  }
+  // Internet Explorer 10+
+  &:-ms-input-placeholder {
+    color: @color;
+  }
+  // Safari and Chrome
+  &::-webkit-input-placeholder {
+    color: @color;
+  }
+
+  &:placeholder-shown {
+    text-overflow: ellipsis;
+  }
+}

package/styles/mixins/iconfont.less

@@ -0,0 +1,16 @@
+
+// for iconfont font size
+// fix chrome 12px bug, support ie
+.iconfont-size-under-12px(@size, @rotate: 0deg) {
+  display: inline-flex;
+  @font-scale: unit((@size / 12px));
+
+  font-size: 12px;
+  // IE9
+  font-size:~'@{size} \9';
+  transform: scale(@font-scale) rotate(@rotate);
+
+  :root & {
+    font-size: var(--font-size-1); // reset IE9 and above
+  }
+}

package/styles/mixins/index.less

@@ -0,0 +1,7 @@
+@import 'animation';
+@import 'size';
+@import 'compatibility';
+@import 'operation-unit';
+@import 'reset';
+@import 'close';
+@import 'iconfont';

package/styles/mixins/operation-unit.less

@@ -0,0 +1,16 @@
+.operation-unit() {
+  color: var(--link-color);
+  text-decoration: none;
+  outline: none;
+  cursor: pointer;
+  transition: color 0.3s;
+
+  &:focus,
+  &:hover {
+    color: var(--link-hover-color);
+  }
+
+  &:active {
+    color: var(--link-active-color);
+  }
+}

package/styles/mixins/reset.less

@@ -0,0 +1,11 @@
+.reset-component() {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: var(--default-font-color);
+  font-size: var(--default-font-size);
+  font-variant: var(--default-font-variant);
+  line-height: var(--default-line-height);
+  list-style: none;
+  font-feature-settings: var(--default-font-feature-settings);
+}

package/styles/mixins/size.less

@@ -0,0 +1,6 @@
+// Sizing shortcuts
+
+.square(@size) {
+  width: @size;
+  height: @size;
+}

package/styles/tokens/colors/amber.css

@@ -0,0 +1,124 @@
+: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-contrast: #21201c;
+  --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 0.995 0.992 0.985);
+      --amber-2: color(display-p3 0.994 0.986 0.921);
+      --amber-3: color(display-p3 0.994 0.969 0.782);
+      --amber-4: color(display-p3 0.989 0.937 0.65);
+      --amber-5: color(display-p3 0.97 0.902 0.527);
+      --amber-6: color(display-p3 0.936 0.844 0.506);
+      --amber-7: color(display-p3 0.89 0.762 0.443);
+      --amber-8: color(display-p3 0.85 0.65 0.3);
+      --amber-9: color(display-p3 1 0.77 0.26);
+      --amber-10: color(display-p3 0.959 0.741 0.274);
+      --amber-11: color(display-p3 0.64 0.4 0);
+      --amber-12: color(display-p3 0.294 0.208 0.145);
+      --amber-a1: color(display-p3 0.757 0.514 0.024 / 1.6%);
+      --amber-a2: color(display-p3 0.902 0.804 0.008 / 7.9%);
+      --amber-a3: color(display-p3 0.965 0.859 0.004 / 22%);
+      --amber-a4: color(display-p3 0.969 0.82 0.004 / 35%);
+      --amber-a5: color(display-p3 0.933 0.796 0.004 / 47.5%);
+      --amber-a6: color(display-p3 0.875 0.682 0.004 / 49.5%);
+      --amber-a7: color(display-p3 0.804 0.573 0 / 55.7%);
+      --amber-a8: color(display-p3 0.788 0.502 0 / 69.9%);
+      --amber-a9: color(display-p3 1 0.686 0 / 74.2%);
+      --amber-a10: color(display-p3 0.945 0.643 0 / 72.6%);
+      --amber-a11: color(display-p3 0.64 0.4 0);
+      --amber-a12: color(display-p3 0.294 0.208 0.145);
+      --amber-surface: color(display-p3 0.9922 0.9843 0.902 / 80%);
+    }
+  }
+}
+
+.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 0.082 0.07 0.05);
+      --amber-2: color(display-p3 0.111 0.094 0.064);
+      --amber-3: color(display-p3 0.178 0.128 0.049);
+      --amber-4: color(display-p3 0.239 0.156 0);
+      --amber-5: color(display-p3 0.29 0.193 0);
+      --amber-6: color(display-p3 0.344 0.245 0.076);
+      --amber-7: color(display-p3 0.422 0.314 0.141);
+      --amber-8: color(display-p3 0.535 0.399 0.189);
+      --amber-9: color(display-p3 1 0.77 0.26);
+      --amber-10: color(display-p3 1 0.87 0.15);
+      --amber-11: color(display-p3 1 0.8 0.29);
+      --amber-12: color(display-p3 0.984 0.909 0.726);
+      --amber-a1: color(display-p3 0.992 0.298 0 / 1.7%);
+      --amber-a2: color(display-p3 0.988 0.651 0 / 4.7%);
+      --amber-a3: color(display-p3 1 0.6 0 / 11.8%);
+      --amber-a4: color(display-p3 1 0.557 0 / 18.5%);
+      --amber-a5: color(display-p3 1 0.592 0 / 24%);
+      --amber-a6: color(display-p3 1 0.659 0.094 / 29.9%);
+      --amber-a7: color(display-p3 1 0.714 0.263 / 38.3%);
+      --amber-a8: color(display-p3 0.996 0.729 0.306 / 50%);
+      --amber-a9: color(display-p3 1 0.769 0.259);
+      --amber-a10: color(display-p3 1 0.871 0.149);
+      --amber-a11: color(display-p3 1 0.8 0.29);
+      --amber-a12: color(display-p3 0.984 0.909 0.726);
+      --amber-surface: color(display-p3 0.1412 0.1176 0.0784 / 50%);
+    }
+  }
+}

package/styles/tokens/colors/blackA.css

@@ -0,0 +1,33 @@
+:root {
+  --black-a1: rgba(0, 0, 0, 5%);
+  --black-a2: rgba(0, 0, 0, 10%);
+  --black-a3: rgba(0, 0, 0, 15%);
+  --black-a4: rgba(0, 0, 0, 20%);
+  --black-a5: rgba(0, 0, 0, 30%);
+  --black-a6: rgba(0, 0, 0, 40%);
+  --black-a7: rgba(0, 0, 0, 50%);
+  --black-a8: rgba(0, 0, 0, 60%);
+  --black-a9: rgba(0, 0, 0, 70%);
+  --black-a10: rgba(0, 0, 0, 80%);
+  --black-a11: rgba(0, 0, 0, 90%);
+  --black-a12: rgba(0, 0, 0, 95%);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root {
+      --black-a1: color(display-p3 0 0 0 / 5%);
+      --black-a2: color(display-p3 0 0 0 / 10%);
+      --black-a3: color(display-p3 0 0 0 / 15%);
+      --black-a4: color(display-p3 0 0 0 / 20%);
+      --black-a5: color(display-p3 0 0 0 / 30%);
+      --black-a6: color(display-p3 0 0 0 / 40%);
+      --black-a7: color(display-p3 0 0 0 / 50%);
+      --black-a8: color(display-p3 0 0 0 / 60%);
+      --black-a9: color(display-p3 0 0 0 / 70%);
+      --black-a10: color(display-p3 0 0 0 / 80%);
+      --black-a11: color(display-p3 0 0 0 / 90%);
+      --black-a12: color(display-p3 0 0 0 / 95%);
+    }
+  }
+}

package/styles/tokens/colors/blue.css

@@ -0,0 +1,131 @@
+:root, .light, .light-theme {
+  --blue-1: #fcfdff;
+  --blue-2: #f6f9ff;
+  --blue-3: #ebf2ff;
+  --blue-4: #ddeaff;
+  --blue-5: #cde0ff;
+  --blue-6: #bad2ff;
+  --blue-7: #a2c0ff;
+  --blue-8: #80a6fa;
+  --blue-9: #3f75ff;
+  --blue-10: #3568ed;
+  --blue-11: #3162e2;
+  --blue-12: #172e66;
+  --blue-a1: #0055ff03;
+  --blue-a2: #0055ff09;
+  --blue-a3: #005aff14;
+  --blue-a4: #0062ff22;
+  --blue-a5: #0061ff32;
+  --blue-a6: #0059ff45;
+  --blue-a7: #0053ff5d;
+  --blue-a8: #004df57f;
+  --blue-a9: #0048ffc0;
+  --blue-a10: #0041e8ca;
+  --blue-a11: #003ddbce;
+  --blue-a12: #001957e8;
+  --blue-contrast: #fff;
+  --blue-surface: #f4f8ffcc;
+  --blue-indicator: #3f75ff;
+  --blue-track: #3f75ff;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --blue-1: oklch(99.4% 0.003 264.6deg);
+      --blue-2: oklch(98.2% 0.01 264.6deg);
+      --blue-3: oklch(96% 0.02 264.6deg);
+      --blue-4: oklch(93.7% 0.039 264.6deg);
+      --blue-5: oklch(90.5% 0.057 264.6deg);
+      --blue-6: oklch(86.4% 0.076 264.6deg);
+      --blue-7: oklch(80.8% 0.096 264.6deg);
+      --blue-8: oklch(73.3% 0.129 264.6deg);
+      --blue-9: oklch(60.5% 0.214 264.6deg);
+      --blue-10: oklch(56.2% 0.208 264.6deg);
+      --blue-11: oklch(54% 0.203 264.6deg);
+      --blue-12: oklch(32% 0.103 264.6deg);
+      --blue-a1: color(display-p3 0.024 0.349 1 / 1.2%);
+      --blue-a2: color(display-p3 0.02 0.267 0.878 / 3.2%);
+      --blue-a3: color(display-p3 0.008 0.322 0.949 / 7.5%);
+      --blue-a4: color(display-p3 0.008 0.349 0.941 / 12.6%);
+      --blue-a5: color(display-p3 0.004 0.31 0.937 / 18.1%);
+      --blue-a6: color(display-p3 0.004 0.282 0.941 / 25.1%);
+      --blue-a7: color(display-p3 0.004 0.267 0.945 / 34.2%);
+      --blue-a8: color(display-p3 0.004 0.247 0.91 / 46.7%);
+      --blue-a9: color(display-p3 0 0.224 0.949 / 70.2%);
+      --blue-a10: color(display-p3 0 0.196 0.863 / 74.2%);
+      --blue-a11: color(display-p3 0 0.184 0.808 / 76.1%);
+      --blue-a12: color(display-p3 0 0.075 0.31 / 89.1%);
+      --blue-contrast: #fff;
+      --blue-surface: color(display-p3 0.957 0.973 1 / 80%);
+      --blue-indicator: oklch(60.5% 0.214 264.6deg);
+      --blue-track: oklch(60.5% 0.214 264.6deg);
+    }
+  }
+}
+
+.dark, .dark-theme {
+  --blue-1: #0c111c;
+  --blue-2: #111725;
+  --blue-3: #172448;
+  --blue-4: #1d2e61;
+  --blue-5: #243974;
+  --blue-6: #2d4484;
+  --blue-7: #375098;
+  --blue-8: #405eb2;
+  --blue-9: #3d63dd;
+  --blue-10: #3f5cb0;
+  --blue-11: #93b4ff;
+  --blue-12: #d5e2ff;
+  --blue-a1: #0012fb0c;
+  --blue-a2: #1156f916;
+  --blue-a3: #2b64ff3b;
+  --blue-a4: #3567ff56;
+  --blue-a5: #3f71fd6b;
+  --blue-a6: #4b7afd7c;
+  --blue-a7: #5480ff91;
+  --blue-a8: #5783ffad;
+  --blue-a9: #4571ffdb;
+  --blue-a10: #5580feab;
+  --blue-a11: #93b4ff;
+  --blue-a12: #d5e2ff;
+  --blue-contrast: #fff;
+  --blue-surface: #111d3980;
+  --blue-indicator: #3d63dd;
+  --blue-track: #3d63dd;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --blue-1: oklch(17.8% 0.025 266.8deg);
+      --blue-2: oklch(20.7% 0.03 266.8deg);
+      --blue-3: oklch(27.1% 0.069 266.8deg);
+      --blue-4: oklch(31.8% 0.093 266.8deg);
+      --blue-5: oklch(36.1% 0.105 266.8deg);
+      --blue-6: oklch(40.4% 0.111 266.8deg);
+      --blue-7: oklch(45% 0.12 266.8deg);
+      --blue-8: oklch(50.3% 0.137 266.8deg);
+      --blue-9: oklch(54.3% 0.191 266.8deg);
+      --blue-10: oklch(49.7% 0.137 266.8deg);
+      --blue-11: oklch(77.7% 0.123 266.8deg);
+      --blue-12: oklch(91.1% 0.043 266.8deg);
+      --blue-a1: color(display-p3 0 0.071 0.98 / 4.3%);
+      --blue-a2: color(display-p3 0.118 0.361 1 / 8%);
+      --blue-a3: color(display-p3 0.227 0.404 1 / 22.3%);
+      --blue-a4: color(display-p3 0.263 0.42 1 / 32.4%);
+      --blue-a5: color(display-p3 0.302 0.451 1 / 40%);
+      --blue-a6: color(display-p3 0.345 0.49 1 / 46.7%);
+      --blue-a7: color(display-p3 0.373 0.51 1 / 54.7%);
+      --blue-a8: color(display-p3 0.384 0.525 1 / 65.2%);
+      --blue-a9: color(display-p3 0.318 0.451 1 / 82.4%);
+      --blue-a10: color(display-p3 0.384 0.518 1 / 64.3%);
+      --blue-a11: color(display-p3 0.62 0.722 1 / 97.5%);
+      --blue-a12: color(display-p3 0.855 0.898 1 / 98.8%);
+      --blue-contrast: #fff;
+      --blue-surface: color(display-p3 0.071 0.11 0.212 / 50%);
+      --blue-indicator: oklch(54.3% 0.191 266.8deg);
+      --blue-track: oklch(54.3% 0.191 266.8deg);
+    }
+  }
+}

package/styles/tokens/colors/cyan.css

@@ -0,0 +1,124 @@
+:root, .light, .light-theme {
+  --cyan-1: #fafdfe;
+  --cyan-2: #f2fafb;
+  --cyan-3: #def7f9;
+  --cyan-4: #caf1f6;
+  --cyan-5: #b5e9f0;
+  --cyan-6: #9ddde7;
+  --cyan-7: #7dcedc;
+  --cyan-8: #3db9cf;
+  --cyan-9: #00a2c7;
+  --cyan-10: #0797b9;
+  --cyan-11: #107d98;
+  --cyan-12: #0d3c48;
+  --cyan-a1: #0099cc05;
+  --cyan-a2: #009db10d;
+  --cyan-a3: #00c2d121;
+  --cyan-a4: #00bcd435;
+  --cyan-a5: #01b4cc4a;
+  --cyan-a6: #00a7c162;
+  --cyan-a7: #009fbb82;
+  --cyan-a8: #00a3c0c2;
+  --cyan-a9: #00a2c7;
+  --cyan-a10: #0094b7f8;
+  --cyan-a11: #007491ef;
+  --cyan-a12: #00323ef2;
+  --cyan-contrast: white;
+  --cyan-surface: #eff9facc;
+  --cyan-indicator: var(--cyan-9);
+  --cyan-track: var(--cyan-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root, .light, .light-theme {
+      --cyan-1: color(display-p3 0.982 0.992 0.996);
+      --cyan-2: color(display-p3 0.955 0.981 0.984);
+      --cyan-3: color(display-p3 0.888 0.965 0.975);
+      --cyan-4: color(display-p3 0.821 0.941 0.959);
+      --cyan-5: color(display-p3 0.751 0.907 0.935);
+      --cyan-6: color(display-p3 0.671 0.862 0.9);
+      --cyan-7: color(display-p3 0.564 0.8 0.854);
+      --cyan-8: color(display-p3 0.388 0.715 0.798);
+      --cyan-9: color(display-p3 0.282 0.627 0.765);
+      --cyan-10: color(display-p3 0.264 0.583 0.71);
+      --cyan-11: color(display-p3 0.08 0.48 0.63);
+      --cyan-12: color(display-p3 0.108 0.232 0.277);
+      --cyan-a1: color(display-p3 0.02 0.608 0.804 / 2%);
+      --cyan-a2: color(display-p3 0.02 0.557 0.647 / 4.4%);
+      --cyan-a3: color(display-p3 0.004 0.694 0.796 / 11.4%);
+      --cyan-a4: color(display-p3 0.004 0.678 0.784 / 18.1%);
+      --cyan-a5: color(display-p3 0.004 0.624 0.733 / 24.8%);
+      --cyan-a6: color(display-p3 0.004 0.584 0.706 / 33%);
+      --cyan-a7: color(display-p3 0.004 0.541 0.667 / 43.6%);
+      --cyan-a8: color(display-p3 0 0.533 0.667 / 61.2%);
+      --cyan-a9: color(display-p3 0 0.482 0.675 / 71.8%);
+      --cyan-a10: color(display-p3 0 0.435 0.608 / 73.8%);
+      --cyan-a11: color(display-p3 0.08 0.48 0.63);
+      --cyan-a12: color(display-p3 0.108 0.232 0.277);
+      --cyan-surface: color(display-p3 0.9412 0.9765 0.9804 / 80%);
+    }
+  }
+}
+
+.dark, .dark-theme {
+  --cyan-1: #0b161a;
+  --cyan-2: #101b20;
+  --cyan-3: #082c36;
+  --cyan-4: #003848;
+  --cyan-5: #004558;
+  --cyan-6: #045468;
+  --cyan-7: #12677e;
+  --cyan-8: #11809c;
+  --cyan-9: #00a2c7;
+  --cyan-10: #23afd0;
+  --cyan-11: #4ccce6;
+  --cyan-12: #b6ecf7;
+  --cyan-a1: #0091f70a;
+  --cyan-a2: #02a7f211;
+  --cyan-a3: #00befd28;
+  --cyan-a4: #00baff3b;
+  --cyan-a5: #00befd4d;
+  --cyan-a6: #00c7fd5e;
+  --cyan-a7: #14cdff75;
+  --cyan-a8: #11cfff95;
+  --cyan-a9: #00cfffc3;
+  --cyan-a10: #28d6ffcd;
+  --cyan-a11: #52e1fee5;
+  --cyan-a12: #bbf3fef7;
+  --cyan-surface: #11252d80;
+  --cyan-indicator: var(--cyan-9);
+  --cyan-track: var(--cyan-9);
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    .dark, .dark-theme {
+      --cyan-1: color(display-p3 0.053 0.085 0.098);
+      --cyan-2: color(display-p3 0.072 0.105 0.122);
+      --cyan-3: color(display-p3 0.073 0.168 0.209);
+      --cyan-4: color(display-p3 0.063 0.216 0.277);
+      --cyan-5: color(display-p3 0.091 0.267 0.336);
+      --cyan-6: color(display-p3 0.137 0.324 0.4);
+      --cyan-7: color(display-p3 0.186 0.398 0.484);
+      --cyan-8: color(display-p3 0.23 0.496 0.6);
+      --cyan-9: color(display-p3 0.282 0.627 0.765);
+      --cyan-10: color(display-p3 0.331 0.675 0.801);
+      --cyan-11: color(display-p3 0.446 0.79 0.887);
+      --cyan-12: color(display-p3 0.757 0.919 0.962);
+      --cyan-a1: color(display-p3 0 0.647 0.992 / 3.4%);
+      --cyan-a2: color(display-p3 0.133 0.733 1 / 5.9%);
+      --cyan-a3: color(display-p3 0.122 0.741 0.996 / 15.2%);
+      --cyan-a4: color(display-p3 0.051 0.725 1 / 22.7%);
+      --cyan-a5: color(display-p3 0.149 0.757 1 / 29%);
+      --cyan-a6: color(display-p3 0.267 0.792 1 / 35.8%);
+      --cyan-a7: color(display-p3 0.333 0.808 1 / 44.6%);
+      --cyan-a8: color(display-p3 0.357 0.816 1 / 57.2%);
+      --cyan-a9: color(display-p3 0.357 0.82 1 / 74.8%);
+      --cyan-a10: color(display-p3 0.4 0.839 1 / 78.6%);
+      --cyan-a11: color(display-p3 0.446 0.79 0.887);
+      --cyan-a12: color(display-p3 0.757 0.919 0.962);
+      --cyan-surface: color(display-p3 0.0784 0.1412 0.1725 / 50%);
+    }
+  }
+}

package/styles/tokens/colors/grass.css

@@ -0,0 +1,125 @@
+:root, .light, .light-theme {
+  --green-1: #fbfefb;
+  --green-2: #f5fbf5;
+  --green-3: #e9f6e9;
+  --green-4: #daf1db;
+  --green-5: #c9e8ca;
+  --green-6: #b2ddb5;
+  --green-7: #94ce9a;
+  --green-8: #65ba74;
+  --green-9: #46a758;
+  --green-10: #3e9b4f;
+  --green-11: #2a7e3b;
+  --green-12: #203c25;
+  --green-a1: #00c00004;
+  --green-a2: #0099000a;
+  --green-a3: #00970016;
+  --green-a4: #009f0725;
+  --green-a5: #00930536;
+  --green-a6: #008f0a4d;
+  --green-a7: #018b0f6b;
+  --green-a8: #008d199a;
+  --green-a9: #008619b9;
+  --green-a10: #007b17c1;
+  --green-a11: #006514d5;
+  --green-a12: #002006df;
+  --green-contrast: white;
+  --green-surface: #f3faf3cc;
+  --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 0.986 0.996 0.985);
+      --green-2: color(display-p3 0.966 0.983 0.964);
+      --green-3: color(display-p3 0.923 0.965 0.917);
+      --green-4: color(display-p3 0.872 0.94 0.865);
+      --green-5: color(display-p3 0.811 0.908 0.802);
+      --green-6: color(display-p3 0.733 0.864 0.724);
+      --green-7: color(display-p3 0.628 0.803 0.622);
+      --green-8: color(display-p3 0.477 0.72 0.482);
+      --green-9: color(display-p3 0.38 0.647 0.378);
+      --green-10: color(display-p3 0.344 0.598 0.342);
+      --green-11: color(display-p3 0.263 0.488 0.261);
+      --green-12: color(display-p3 0.151 0.233 0.153);
+      --green-a1: color(display-p3 0.024 0.757 0.024 / 1.6%);
+      --green-a2: color(display-p3 0.024 0.565 0.024 / 3.6%);
+      --green-a3: color(display-p3 0.059 0.576 0.008 / 8.3%);
+      --green-a4: color(display-p3 0.035 0.565 0.008 / 13.4%);
+      --green-a5: color(display-p3 0.047 0.545 0.008 / 19.7%);
+      --green-a6: color(display-p3 0.031 0.502 0.004 / 27.5%);
+      --green-a7: color(display-p3 0.012 0.482 0.004 / 37.7%);
+      --green-a8: color(display-p3 0 0.467 0.008 / 52.2%);
+      --green-a9: color(display-p3 0.008 0.435 0 / 62.4%);
+      --green-a10: color(display-p3 0.008 0.388 0 / 65.9%);
+      --green-a11: color(display-p3 0.263 0.488 0.261);
+      --green-a12: color(display-p3 0.151 0.233 0.153);
+      --green-surface: color(display-p3 0.9569 0.9804 0.9569 / 80%);
+    }
+  }
+}
+
+.dark, .dark-theme {
+  --green-1: #0e1511;
+  --green-2: #141a15;
+  --green-3: #1b2a1e;
+  --green-4: #1d3a24;
+  --green-5: #25482d;
+  --green-6: #2d5736;
+  --green-7: #366740;
+  --green-8: #3e7949;
+  --green-9: #46a758;
+  --green-10: #53b365;
+  --green-11: #71d083;
+  --green-12: #c2f0c2;
+  --green-a1: #00de1205;
+  --green-a2: #5ef7780a;
+  --green-a3: #70fe8c1b;
+  --green-a4: #57ff802c;
+  --green-a5: #68ff8b3b;
+  --green-a6: #71ff8f4b;
+  --green-a7: #77fd925d;
+  --green-a8: #77fd9070;
+  --green-a9: #65ff82a1;
+  --green-a10: #72ff8dae;
+  --green-a11: #89ff9fcd;
+  --green-a12: #ceffceef;
+  --green-surface: #19231b80;
+  --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 0.062 0.083 0.067);
+      --green-2: color(display-p3 0.083 0.103 0.085);
+      --green-3: color(display-p3 0.118 0.163 0.122);
+      --green-4: color(display-p3 0.142 0.225 0.15);
+      --green-5: color(display-p3 0.178 0.279 0.186);
+      --green-6: color(display-p3 0.217 0.337 0.224);
+      --green-7: color(display-p3 0.258 0.4 0.264);
+      --green-8: color(display-p3 0.302 0.47 0.305);
+      --green-9: color(display-p3 0.38 0.647 0.378);
+      --green-10: color(display-p3 0.426 0.694 0.426);
+      --green-11: color(display-p3 0.535 0.807 0.542);
+      --green-12: color(display-p3 0.797 0.936 0.776);
+      --green-a1: color(display-p3 0 0.992 0.071 / 1.7%);
+      --green-a2: color(display-p3 0.482 0.996 0.584 / 3.8%);
+      --green-a3: color(display-p3 0.549 0.992 0.588 / 10.6%);
+      --green-a4: color(display-p3 0.51 0.996 0.557 / 16.9%);
+      --green-a5: color(display-p3 0.553 1 0.588 / 22.7%);
+      --green-a6: color(display-p3 0.584 1 0.608 / 29%);
+      --green-a7: color(display-p3 0.604 1 0.616 / 35.8%);
+      --green-a8: color(display-p3 0.608 1 0.62 / 43.3%);
+      --green-a9: color(display-p3 0.573 1 0.569 / 62.2%);
+      --green-a10: color(display-p3 0.6 0.996 0.6 / 67.3%);
+      --green-a11: color(display-p3 0.535 0.807 0.542);
+      --green-a12: color(display-p3 0.797 0.936 0.776);
+      --green-surface: color(display-p3 0.102 0.1333 0.102 / 50%);
+    }
+  }
+}