@fairgarden/design 0.1.0-alpha.0

package/utils/colors/greenDarkDefault.css

@@ -0,0 +1,101 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="dark"] {
+    --green1: #0e1512;
+    --green2: #121b17;
+    --green3: #132d21;
+    --green4: #113b29;
+    --green5: #174933;
+    --green6: #20573e;
+    --green7: #28684a;
+    --green8: #2f7c57;
+    --green9: #30a46c;
+    --green10: #33b074;
+    --green11: #3dd68c;
+    --green12: #b1f1cb;
+    --green-contrast: var(--green1);
+    --green-hover: var(--green10);
+
+    @media (color-gamut: p3) {
+      --green1: color(display-p3 0.062 0.083 0.071);
+      --green2: color(display-p3 0.079 0.106 0.09);
+      --green3: color(display-p3 0.1 0.173 0.133);
+      --green4: color(display-p3 0.115 0.229 0.166);
+      --green5: color(display-p3 0.147 0.282 0.206);
+      --green6: color(display-p3 0.185 0.338 0.25);
+      --green7: color(display-p3 0.227 0.403 0.298);
+      --green8: color(display-p3 0.27 0.479 0.351);
+      --green9: color(display-p3 0.332 0.634 0.442);
+      --green10: color(display-p3 0.357 0.682 0.474);
+      --green11: color(display-p3 0.434 0.828 0.573);
+      --green12: color(display-p3 0.747 0.938 0.807);
+    }
+  }
+
+  [data-theme="light"] {
+    --green1: #fbfefc;
+    --green2: #f4fbf6;
+    --green3: #e6f6eb;
+    --green4: #d6f1df;
+    --green5: #c4e8d1;
+    --green6: #adddc0;
+    --green7: #8eceaa;
+    --green8: #5bb98b;
+    --green9: #30a46c;
+    --green10: #2b9a66;
+    --green11: #218358;
+    --green12: #193b2d;
+    --green-contrast: var(--green12);
+    --green-hover: var(--green8);
+
+    @media (color-gamut: p3) {
+      --green1: color(display-p3 0.986 0.996 0.989);
+      --green2: color(display-p3 0.963 0.983 0.967);
+      --green3: color(display-p3 0.913 0.964 0.925);
+      --green4: color(display-p3 0.859 0.94 0.879);
+      --green5: color(display-p3 0.796 0.907 0.826);
+      --green6: color(display-p3 0.718 0.863 0.761);
+      --green7: color(display-p3 0.61 0.801 0.675);
+      --green8: color(display-p3 0.451 0.715 0.559);
+      --green9: color(display-p3 0.332 0.634 0.442);
+      --green10: color(display-p3 0.308 0.595 0.417);
+      --green11: color(display-p3 0.19 0.5 0.32);
+      --green12: color(display-p3 0.132 0.228 0.18);
+    }
+  }
+
+  @media print {
+    :root {
+      --green1: #fbfefc;
+      --green2: #f4fbf6;
+      --green3: #e6f6eb;
+      --green4: #d6f1df;
+      --green5: #c4e8d1;
+      --green6: #adddc0;
+      --green7: #8eceaa;
+      --green8: #5bb98b;
+      --green9: #30a46c;
+      --green10: #2b9a66;
+      --green11: #218358;
+      --green12: #193b2d;
+      --green-contrast: var(--green12);
+      --green-hover: var(--green8);
+
+      @media (color-gamut: p3) {
+        --green1: color(display-p3 0.986 0.996 0.989);
+        --green2: color(display-p3 0.963 0.983 0.967);
+        --green3: color(display-p3 0.913 0.964 0.925);
+        --green4: color(display-p3 0.859 0.94 0.879);
+        --green5: color(display-p3 0.796 0.907 0.826);
+        --green6: color(display-p3 0.718 0.863 0.761);
+        --green7: color(display-p3 0.61 0.801 0.675);
+        --green8: color(display-p3 0.451 0.715 0.559);
+        --green9: color(display-p3 0.332 0.634 0.442);
+        --green10: color(display-p3 0.308 0.595 0.417);
+        --green11: color(display-p3 0.19 0.5 0.32);
+        --green12: color(display-p3 0.132 0.228 0.18);
+      }
+    }
+  }
+}

package/utils/colors/greenLightDefault.css

@@ -0,0 +1,67 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="light"] {
+    --green1: #fbfefc;
+    --green2: #f4fbf6;
+    --green3: #e6f6eb;
+    --green4: #d6f1df;
+    --green5: #c4e8d1;
+    --green6: #adddc0;
+    --green7: #8eceaa;
+    --green8: #5bb98b;
+    --green9: #30a46c;
+    --green10: #2b9a66;
+    --green11: #218358;
+    --green12: #193b2d;
+    --green-contrast: var(--green12);
+    --green-hover: var(--green8);
+
+    @media (color-gamut: p3) {
+      --green1: color(display-p3 0.986 0.996 0.989);
+      --green2: color(display-p3 0.963 0.983 0.967);
+      --green3: color(display-p3 0.913 0.964 0.925);
+      --green4: color(display-p3 0.859 0.94 0.879);
+      --green5: color(display-p3 0.796 0.907 0.826);
+      --green6: color(display-p3 0.718 0.863 0.761);
+      --green7: color(display-p3 0.61 0.801 0.675);
+      --green8: color(display-p3 0.451 0.715 0.559);
+      --green9: color(display-p3 0.332 0.634 0.442);
+      --green10: color(display-p3 0.308 0.595 0.417);
+      --green11: color(display-p3 0.19 0.5 0.32);
+      --green12: color(display-p3 0.132 0.228 0.18);
+    }
+  }
+
+  [data-theme="dark"] {
+    --green1: #0e1512;
+    --green2: #121b17;
+    --green3: #132d21;
+    --green4: #113b29;
+    --green5: #174933;
+    --green6: #20573e;
+    --green7: #28684a;
+    --green8: #2f7c57;
+    --green9: #30a46c;
+    --green10: #33b074;
+    --green11: #3dd68c;
+    --green12: #b1f1cb;
+    --green-contrast: var(--green1);
+    --green-hover: var(--green10);
+
+    @media (color-gamut: p3) {
+      --green1: color(display-p3 0.062 0.083 0.071);
+      --green2: color(display-p3 0.079 0.106 0.09);
+      --green3: color(display-p3 0.1 0.173 0.133);
+      --green4: color(display-p3 0.115 0.229 0.166);
+      --green5: color(display-p3 0.147 0.282 0.206);
+      --green6: color(display-p3 0.185 0.338 0.25);
+      --green7: color(display-p3 0.227 0.403 0.298);
+      --green8: color(display-p3 0.27 0.479 0.351);
+      --green9: color(display-p3 0.332 0.634 0.442);
+      --green10: color(display-p3 0.357 0.682 0.474);
+      --green11: color(display-p3 0.434 0.828 0.573);
+      --green12: color(display-p3 0.747 0.938 0.807);
+    }
+  }
+}

package/utils/colors/indigo.css

@@ -0,0 +1,101 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="light"] {
+    --indigo1: #fdfdfe;
+    --indigo2: #f7f9ff;
+    --indigo3: #edf2fe;
+    --indigo4: #e1e9ff;
+    --indigo5: #d2deff;
+    --indigo6: #c1d0ff;
+    --indigo7: #abbdf9;
+    --indigo8: #8da4ef;
+    --indigo9: #3e63dd;
+    --indigo10: #3358d4;
+    --indigo11: #3a5bc7;
+    --indigo12: #1f2d5c;
+    --indigo-contrast: var(--indigo1);
+    --indigo-hover: var(--indigo10);
+
+    @media (color-gamut: p3) {
+      --indigo1: color(display-p3 0.992 0.992 0.996);
+      --indigo2: color(display-p3 0.971 0.977 0.998);
+      --indigo3: color(display-p3 0.933 0.948 0.992);
+      --indigo4: color(display-p3 0.885 0.914 1);
+      --indigo5: color(display-p3 0.831 0.87 1);
+      --indigo6: color(display-p3 0.767 0.814 0.995);
+      --indigo7: color(display-p3 0.685 0.74 0.957);
+      --indigo8: color(display-p3 0.569 0.639 0.916);
+      --indigo9: color(display-p3 0.276 0.384 0.837);
+      --indigo10: color(display-p3 0.234 0.343 0.801);
+      --indigo11: color(display-p3 0.256 0.354 0.755);
+      --indigo12: color(display-p3 0.133 0.175 0.348);
+    }
+  }
+
+  [data-theme="dark"] {
+    --indigo1: #11131f;
+    --indigo2: #141726;
+    --indigo3: #182449;
+    --indigo4: #1d2e62;
+    --indigo5: #253974;
+    --indigo6: #304384;
+    --indigo7: #3a4f97;
+    --indigo8: #435db1;
+    --indigo9: #3e63dd;
+    --indigo10: #5472e4;
+    --indigo11: #9eb1ff;
+    --indigo12: #d6e1ff;
+    --indigo-contrast: #fff;
+    --indigo-hover: var(--indigo10);
+
+    @media (color-gamut: p3) {
+      --indigo1: color(display-p3 0.068 0.074 0.118);
+      --indigo2: color(display-p3 0.081 0.089 0.144);
+      --indigo3: color(display-p3 0.105 0.141 0.275);
+      --indigo4: color(display-p3 0.129 0.18 0.369);
+      --indigo5: color(display-p3 0.163 0.22 0.439);
+      --indigo6: color(display-p3 0.203 0.262 0.5);
+      --indigo7: color(display-p3 0.245 0.309 0.575);
+      --indigo8: color(display-p3 0.285 0.362 0.674);
+      --indigo9: color(display-p3 0.276 0.384 0.837);
+      --indigo10: color(display-p3 0.354 0.445 0.866);
+      --indigo11: color(display-p3 0.63 0.69 1);
+      --indigo12: color(display-p3 0.848 0.881 0.99);
+    }
+  }
+
+  @media only screen and (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) {
+      --indigo1: #11131f;
+      --indigo2: #141726;
+      --indigo3: #182449;
+      --indigo4: #1d2e62;
+      --indigo5: #253974;
+      --indigo6: #304384;
+      --indigo7: #3a4f97;
+      --indigo8: #435db1;
+      --indigo9: #3e63dd;
+      --indigo10: #5472e4;
+      --indigo11: #9eb1ff;
+      --indigo12: #d6e1ff;
+      --indigo-contrast: #fff;
+      --indigo-hover: var(--indigo10);
+
+      @media (color-gamut: p3) {
+        --indigo1: color(display-p3 0.068 0.074 0.118);
+        --indigo2: color(display-p3 0.081 0.089 0.144);
+        --indigo3: color(display-p3 0.105 0.141 0.275);
+        --indigo4: color(display-p3 0.129 0.18 0.369);
+        --indigo5: color(display-p3 0.163 0.22 0.439);
+        --indigo6: color(display-p3 0.203 0.262 0.5);
+        --indigo7: color(display-p3 0.245 0.309 0.575);
+        --indigo8: color(display-p3 0.285 0.362 0.674);
+        --indigo9: color(display-p3 0.276 0.384 0.837);
+        --indigo10: color(display-p3 0.354 0.445 0.866);
+        --indigo11: color(display-p3 0.63 0.69 1);
+        --indigo12: color(display-p3 0.848 0.881 0.99);
+      }
+    }
+  }
+}

package/utils/colors/indigoDarkDefault.css

@@ -0,0 +1,101 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="dark"] {
+    --indigo1: #11131f;
+    --indigo2: #141726;
+    --indigo3: #182449;
+    --indigo4: #1d2e62;
+    --indigo5: #253974;
+    --indigo6: #304384;
+    --indigo7: #3a4f97;
+    --indigo8: #435db1;
+    --indigo9: #3e63dd;
+    --indigo10: #5472e4;
+    --indigo11: #9eb1ff;
+    --indigo12: #d6e1ff;
+    --indigo-contrast: #fff;
+    --indigo-hover: var(--indigo10);
+
+    @media (color-gamut: p3) {
+      --indigo1: color(display-p3 0.068 0.074 0.118);
+      --indigo2: color(display-p3 0.081 0.089 0.144);
+      --indigo3: color(display-p3 0.105 0.141 0.275);
+      --indigo4: color(display-p3 0.129 0.18 0.369);
+      --indigo5: color(display-p3 0.163 0.22 0.439);
+      --indigo6: color(display-p3 0.203 0.262 0.5);
+      --indigo7: color(display-p3 0.245 0.309 0.575);
+      --indigo8: color(display-p3 0.285 0.362 0.674);
+      --indigo9: color(display-p3 0.276 0.384 0.837);
+      --indigo10: color(display-p3 0.354 0.445 0.866);
+      --indigo11: color(display-p3 0.63 0.69 1);
+      --indigo12: color(display-p3 0.848 0.881 0.99);
+    }
+  }
+
+  [data-theme="light"] {
+    --indigo1: #fdfdfe;
+    --indigo2: #f7f9ff;
+    --indigo3: #edf2fe;
+    --indigo4: #e1e9ff;
+    --indigo5: #d2deff;
+    --indigo6: #c1d0ff;
+    --indigo7: #abbdf9;
+    --indigo8: #8da4ef;
+    --indigo9: #3e63dd;
+    --indigo10: #3358d4;
+    --indigo11: #3a5bc7;
+    --indigo12: #1f2d5c;
+    --indigo-contrast: var(--indigo1);
+    --indigo-hover: var(--indigo10);
+
+    @media (color-gamut: p3) {
+      --indigo1: color(display-p3 0.992 0.992 0.996);
+      --indigo2: color(display-p3 0.971 0.977 0.998);
+      --indigo3: color(display-p3 0.933 0.948 0.992);
+      --indigo4: color(display-p3 0.885 0.914 1);
+      --indigo5: color(display-p3 0.831 0.87 1);
+      --indigo6: color(display-p3 0.767 0.814 0.995);
+      --indigo7: color(display-p3 0.685 0.74 0.957);
+      --indigo8: color(display-p3 0.569 0.639 0.916);
+      --indigo9: color(display-p3 0.276 0.384 0.837);
+      --indigo10: color(display-p3 0.234 0.343 0.801);
+      --indigo11: color(display-p3 0.256 0.354 0.755);
+      --indigo12: color(display-p3 0.133 0.175 0.348);
+    }
+  }
+
+  @media print {
+    :root {
+      --indigo1: #fdfdfe;
+      --indigo2: #f7f9ff;
+      --indigo3: #edf2fe;
+      --indigo4: #e1e9ff;
+      --indigo5: #d2deff;
+      --indigo6: #c1d0ff;
+      --indigo7: #abbdf9;
+      --indigo8: #8da4ef;
+      --indigo9: #3e63dd;
+      --indigo10: #3358d4;
+      --indigo11: #3a5bc7;
+      --indigo12: #1f2d5c;
+      --indigo-contrast: var(--indigo1);
+      --indigo-hover: var(--indigo10);
+
+      @media (color-gamut: p3) {
+        --indigo1: color(display-p3 0.992 0.992 0.996);
+        --indigo2: color(display-p3 0.971 0.977 0.998);
+        --indigo3: color(display-p3 0.933 0.948 0.992);
+        --indigo4: color(display-p3 0.885 0.914 1);
+        --indigo5: color(display-p3 0.831 0.87 1);
+        --indigo6: color(display-p3 0.767 0.814 0.995);
+        --indigo7: color(display-p3 0.685 0.74 0.957);
+        --indigo8: color(display-p3 0.569 0.639 0.916);
+        --indigo9: color(display-p3 0.276 0.384 0.837);
+        --indigo10: color(display-p3 0.234 0.343 0.801);
+        --indigo11: color(display-p3 0.256 0.354 0.755);
+        --indigo12: color(display-p3 0.133 0.175 0.348);
+      }
+    }
+  }
+}

package/utils/colors/indigoLightDefault.css

@@ -0,0 +1,67 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="light"] {
+    --indigo1: #fdfdfe;
+    --indigo2: #f7f9ff;
+    --indigo3: #edf2fe;
+    --indigo4: #e1e9ff;
+    --indigo5: #d2deff;
+    --indigo6: #c1d0ff;
+    --indigo7: #abbdf9;
+    --indigo8: #8da4ef;
+    --indigo9: #3e63dd;
+    --indigo10: #3358d4;
+    --indigo11: #3a5bc7;
+    --indigo12: #1f2d5c;
+    --indigo-contrast: var(--indigo1);
+    --indigo-hover: var(--indigo10);
+
+    @media (color-gamut: p3) {
+      --indigo1: color(display-p3 0.992 0.992 0.996);
+      --indigo2: color(display-p3 0.971 0.977 0.998);
+      --indigo3: color(display-p3 0.933 0.948 0.992);
+      --indigo4: color(display-p3 0.885 0.914 1);
+      --indigo5: color(display-p3 0.831 0.87 1);
+      --indigo6: color(display-p3 0.767 0.814 0.995);
+      --indigo7: color(display-p3 0.685 0.74 0.957);
+      --indigo8: color(display-p3 0.569 0.639 0.916);
+      --indigo9: color(display-p3 0.276 0.384 0.837);
+      --indigo10: color(display-p3 0.234 0.343 0.801);
+      --indigo11: color(display-p3 0.256 0.354 0.755);
+      --indigo12: color(display-p3 0.133 0.175 0.348);
+    }
+  }
+
+  [data-theme="dark"] {
+    --indigo1: #11131f;
+    --indigo2: #141726;
+    --indigo3: #182449;
+    --indigo4: #1d2e62;
+    --indigo5: #253974;
+    --indigo6: #304384;
+    --indigo7: #3a4f97;
+    --indigo8: #435db1;
+    --indigo9: #3e63dd;
+    --indigo10: #5472e4;
+    --indigo11: #9eb1ff;
+    --indigo12: #d6e1ff;
+    --indigo-contrast: #fff;
+    --indigo-hover: var(--indigo10);
+
+    @media (color-gamut: p3) {
+      --indigo1: color(display-p3 0.068 0.074 0.118);
+      --indigo2: color(display-p3 0.081 0.089 0.144);
+      --indigo3: color(display-p3 0.105 0.141 0.275);
+      --indigo4: color(display-p3 0.129 0.18 0.369);
+      --indigo5: color(display-p3 0.163 0.22 0.439);
+      --indigo6: color(display-p3 0.203 0.262 0.5);
+      --indigo7: color(display-p3 0.245 0.309 0.575);
+      --indigo8: color(display-p3 0.285 0.362 0.674);
+      --indigo9: color(display-p3 0.276 0.384 0.837);
+      --indigo10: color(display-p3 0.354 0.445 0.866);
+      --indigo11: color(display-p3 0.63 0.69 1);
+      --indigo12: color(display-p3 0.848 0.881 0.99);
+    }
+  }
+}

package/utils/colors/iris.css

@@ -0,0 +1,101 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="light"] {
+    --iris1: #fdfdff;
+    --iris2: #f8f8ff;
+    --iris3: #f0f1fe;
+    --iris4: #e6e7ff;
+    --iris5: #dadcff;
+    --iris6: #cbcdff;
+    --iris7: #b8baf8;
+    --iris8: #9b9ef0;
+    --iris9: #5b5bd6;
+    --iris10: #5151cd;
+    --iris11: #5753c6;
+    --iris12: #272962;
+    --iris-contrast: var(--iris1);
+    --iris-hover: var(--iris10);
+
+    @media (color-gamut: p3) {
+      --iris1: color(display-p3 0.992 0.992 0.999);
+      --iris2: color(display-p3 0.972 0.973 0.998);
+      --iris3: color(display-p3 0.943 0.945 0.992);
+      --iris4: color(display-p3 0.902 0.906 1);
+      --iris5: color(display-p3 0.857 0.861 1);
+      --iris6: color(display-p3 0.799 0.805 0.987);
+      --iris7: color(display-p3 0.721 0.727 0.955);
+      --iris8: color(display-p3 0.61 0.619 0.918);
+      --iris9: color(display-p3 0.357 0.357 0.81);
+      --iris10: color(display-p3 0.318 0.318 0.774);
+      --iris11: color(display-p3 0.337 0.326 0.748);
+      --iris12: color(display-p3 0.154 0.161 0.371);
+    }
+  }
+
+  [data-theme="dark"] {
+    --iris1: #13131e;
+    --iris2: #171625;
+    --iris3: #202248;
+    --iris4: #262a65;
+    --iris5: #303374;
+    --iris6: #3d3e82;
+    --iris7: #4a4a95;
+    --iris8: #5958b1;
+    --iris9: #5b5bd6;
+    --iris10: #6e6ade;
+    --iris11: #b1a9ff;
+    --iris12: #e0dffe;
+    --iris-contrast: #fff;
+    --iris-hover: var(--iris10);
+
+    @media (color-gamut: p3) {
+      --iris1: color(display-p3 0.075 0.075 0.114);
+      --iris2: color(display-p3 0.089 0.086 0.14);
+      --iris3: color(display-p3 0.128 0.134 0.272);
+      --iris4: color(display-p3 0.153 0.165 0.382);
+      --iris5: color(display-p3 0.192 0.201 0.44);
+      --iris6: color(display-p3 0.239 0.241 0.491);
+      --iris7: color(display-p3 0.291 0.289 0.565);
+      --iris8: color(display-p3 0.35 0.345 0.673);
+      --iris9: color(display-p3 0.357 0.357 0.81);
+      --iris10: color(display-p3 0.428 0.416 0.843);
+      --iris11: color(display-p3 0.685 0.662 1);
+      --iris12: color(display-p3 0.878 0.875 0.986);
+    }
+  }
+
+  @media only screen and (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) {
+      --iris1: #13131e;
+      --iris2: #171625;
+      --iris3: #202248;
+      --iris4: #262a65;
+      --iris5: #303374;
+      --iris6: #3d3e82;
+      --iris7: #4a4a95;
+      --iris8: #5958b1;
+      --iris9: #5b5bd6;
+      --iris10: #6e6ade;
+      --iris11: #b1a9ff;
+      --iris12: #e0dffe;
+      --iris-contrast: #fff;
+      --iris-hover: var(--iris10);
+
+      @media (color-gamut: p3) {
+        --iris1: color(display-p3 0.075 0.075 0.114);
+        --iris2: color(display-p3 0.089 0.086 0.14);
+        --iris3: color(display-p3 0.128 0.134 0.272);
+        --iris4: color(display-p3 0.153 0.165 0.382);
+        --iris5: color(display-p3 0.192 0.201 0.44);
+        --iris6: color(display-p3 0.239 0.241 0.491);
+        --iris7: color(display-p3 0.291 0.289 0.565);
+        --iris8: color(display-p3 0.35 0.345 0.673);
+        --iris9: color(display-p3 0.357 0.357 0.81);
+        --iris10: color(display-p3 0.428 0.416 0.843);
+        --iris11: color(display-p3 0.685 0.662 1);
+        --iris12: color(display-p3 0.878 0.875 0.986);
+      }
+    }
+  }
+}

package/utils/colors/irisDarkDefault.css

@@ -0,0 +1,101 @@
+/* Generated by scripts/build-colors.js. Do not edit. */
+@layer theme {
+  :root,
+  [data-theme="dark"] {
+    --iris1: #13131e;
+    --iris2: #171625;
+    --iris3: #202248;
+    --iris4: #262a65;
+    --iris5: #303374;
+    --iris6: #3d3e82;
+    --iris7: #4a4a95;
+    --iris8: #5958b1;
+    --iris9: #5b5bd6;
+    --iris10: #6e6ade;
+    --iris11: #b1a9ff;
+    --iris12: #e0dffe;
+    --iris-contrast: #fff;
+    --iris-hover: var(--iris10);
+
+    @media (color-gamut: p3) {
+      --iris1: color(display-p3 0.075 0.075 0.114);
+      --iris2: color(display-p3 0.089 0.086 0.14);
+      --iris3: color(display-p3 0.128 0.134 0.272);
+      --iris4: color(display-p3 0.153 0.165 0.382);
+      --iris5: color(display-p3 0.192 0.201 0.44);
+      --iris6: color(display-p3 0.239 0.241 0.491);
+      --iris7: color(display-p3 0.291 0.289 0.565);
+      --iris8: color(display-p3 0.35 0.345 0.673);
+      --iris9: color(display-p3 0.357 0.357 0.81);
+      --iris10: color(display-p3 0.428 0.416 0.843);
+      --iris11: color(display-p3 0.685 0.662 1);
+      --iris12: color(display-p3 0.878 0.875 0.986);
+    }
+  }
+
+  [data-theme="light"] {
+    --iris1: #fdfdff;
+    --iris2: #f8f8ff;
+    --iris3: #f0f1fe;
+    --iris4: #e6e7ff;
+    --iris5: #dadcff;
+    --iris6: #cbcdff;
+    --iris7: #b8baf8;
+    --iris8: #9b9ef0;
+    --iris9: #5b5bd6;
+    --iris10: #5151cd;
+    --iris11: #5753c6;
+    --iris12: #272962;
+    --iris-contrast: var(--iris1);
+    --iris-hover: var(--iris10);
+
+    @media (color-gamut: p3) {
+      --iris1: color(display-p3 0.992 0.992 0.999);
+      --iris2: color(display-p3 0.972 0.973 0.998);
+      --iris3: color(display-p3 0.943 0.945 0.992);
+      --iris4: color(display-p3 0.902 0.906 1);
+      --iris5: color(display-p3 0.857 0.861 1);
+      --iris6: color(display-p3 0.799 0.805 0.987);
+      --iris7: color(display-p3 0.721 0.727 0.955);
+      --iris8: color(display-p3 0.61 0.619 0.918);
+      --iris9: color(display-p3 0.357 0.357 0.81);
+      --iris10: color(display-p3 0.318 0.318 0.774);
+      --iris11: color(display-p3 0.337 0.326 0.748);
+      --iris12: color(display-p3 0.154 0.161 0.371);
+    }
+  }
+
+  @media print {
+    :root {
+      --iris1: #fdfdff;
+      --iris2: #f8f8ff;
+      --iris3: #f0f1fe;
+      --iris4: #e6e7ff;
+      --iris5: #dadcff;
+      --iris6: #cbcdff;
+      --iris7: #b8baf8;
+      --iris8: #9b9ef0;
+      --iris9: #5b5bd6;
+      --iris10: #5151cd;
+      --iris11: #5753c6;
+      --iris12: #272962;
+      --iris-contrast: var(--iris1);
+      --iris-hover: var(--iris10);
+
+      @media (color-gamut: p3) {
+        --iris1: color(display-p3 0.992 0.992 0.999);
+        --iris2: color(display-p3 0.972 0.973 0.998);
+        --iris3: color(display-p3 0.943 0.945 0.992);
+        --iris4: color(display-p3 0.902 0.906 1);
+        --iris5: color(display-p3 0.857 0.861 1);
+        --iris6: color(display-p3 0.799 0.805 0.987);
+        --iris7: color(display-p3 0.721 0.727 0.955);
+        --iris8: color(display-p3 0.61 0.619 0.918);
+        --iris9: color(display-p3 0.357 0.357 0.81);
+        --iris10: color(display-p3 0.318 0.318 0.774);
+        --iris11: color(display-p3 0.337 0.326 0.748);
+        --iris12: color(display-p3 0.154 0.161 0.371);
+      }
+    }
+  }
+}