@cahyo-dimas/freeday 3.5.0 → 3.7.0

package/dist/freeday.tokens.css

@@ -244,6 +244,7 @@
   --color-surface: var(--slate-0);
   --color-surface-2: var(--slate-50);
   --color-surface-3: var(--slate-100);
+  --color-surface-stripe: #fbfbfc;
   --color-surface-raised: var(--color-surface);
   --color-scrim: rgba(10,12,25,.5);
   --color-text: var(--slate-900);
@@ -266,11 +267,21 @@
   --color-danger-soft: var(--red-100);
   --color-info: var(--blue-600);
   --color-info-soft: var(--blue-100);
+  --color-danger-border: #de979c;
   --color-primary-strong: var(--primary-700);
   --color-success-strong: var(--green-800);
   --color-warning-strong: var(--amber-800);
   --color-danger-strong: var(--red-700);
   --color-info-strong: var(--blue-700);
+  --color-primary-rgb: var(--primary-600-rgb);
+  --color-on-primary-rgb: var(--slate-0-rgb);
+  --color-danger-rgb: var(--red-600-rgb);
+  --color-danger-btn-rgb: var(--red-600-rgb);
+  --color-success-rgb: var(--green-600-rgb);
+  --color-warning-rgb: 194,116,10;
+  --color-info-rgb: var(--blue-600-rgb);
+  --color-surface-rgb: var(--slate-0-rgb);
+  --color-inverse-text-rgb: var(--slate-0-rgb);
   --chart-1: #2a78d6;
   --chart-2: #eb6834;
   --chart-3: #1baf7a;
@@ -289,10 +300,55 @@
   --tone-6: var(--chart-6);
   --tone-7: var(--chart-7);
   --tone-8: var(--chart-8);
+  --tone-1-bg: #d9e7f8;
+  --tone-2-bg: #fbe4da;
+  --tone-3-bg: #d6f1e7;
+  --tone-4-bg: #fceed1;
+  --tone-5-bg: #fbe7ef;
+  --tone-6-bg: #d1e9d1;
+  --tone-7-bg: #dedcef;
+  --tone-8-bg: #fadede;
+  --tone-1-ink: #214a7e;
+  --tone-2-ink: #81422d;
+  --tone-3-ink: #196550;
+  --tone-4-ink: #825e13;
+  --tone-5-ink: #804b65;
+  --tone-6-ink: #0c4f13;
+  --tone-7-ink: #312b67;
+  --tone-8-ink: #7d3237;
+  --tone-1-border: #a9c3e4;
+  --tone-2-border: #e3beb3;
+  --tone-3-border: #a5d3c8;
+  --tone-4-border: #e4cfa4;
+  --tone-5-border: #e2c4d5;
+  --tone-6-border: #9dc6a4;
+  --tone-7-border: #b3b0d6;
+  --tone-8-border: #e1b5b9;
+  --tone-1-border-soft: rgba(42,120,214,.26);
+  --tone-2-border-soft: rgba(235,104,52,.26);
+  --tone-3-border-soft: rgba(27,175,122,.26);
+  --tone-4-border-soft: rgba(237,161,0,.26);
+  --tone-5-border-soft: rgba(232,123,164,.26);
+  --tone-6-border-soft: rgba(0,131,0,.26);
+  --tone-7-border-soft: rgba(74,58,167,.26);
+  --tone-8-border-soft: rgba(227,73,72,.26);
   --surface-filter: none;
   --surface-inset: inset 0 0 0 0 transparent;
   --focus-ring: var(--primary-600);
   --focus-ring-width: 2px;
+  --amber-500-rgb: 245,158,11;
+  --blue-400-rgb: 96,165,250;
+  --blue-600-rgb: 37,99,235;
+  --green-500-rgb: 34,197,94;
+  --green-600-rgb: 22,163,74;
+  --primary-400-rgb: 92,139,246;
+  --primary-500-rgb: 52,103,236;
+  --primary-600-rgb: 32,80,216;
+  --red-400-rgb: 248,113,113;
+  --red-600-rgb: 220,38,38;
+  --slate-0-rgb: 255,255,255;
+  --slate-900-rgb: 23,27,38;
+  --slate-950-rgb: 14,17,26;
 }
 /* The SYSTEM default stays root-scoped: it is a statement about the document, and dropping :root
  * here would match every element that is not itself [data-theme="light"], which would re-darken
@@ -309,8 +365,8 @@
   --color-primary-hover: var(--primary-400);
   --color-primary-active: var(--primary-300);
   --color-on-primary: var(--slate-0);
-  --color-primary-soft: color-mix(in srgb, var(--primary-600) 20%, transparent);
-  --color-primary-border: color-mix(in srgb, var(--primary-400) 28%, transparent);
+  --color-primary-soft: rgba(var(--primary-600-rgb), .2);
+  --color-primary-border: rgba(var(--primary-400-rgb), .28);
   --color-accent: var(--sky-400);
   --color-accent-hover: var(--sky-300);
   --color-on-accent: #06233f;
@@ -319,6 +375,7 @@
   --color-surface: var(--slate-950);
   --color-surface-2: var(--slate-900);
   --color-surface-3: var(--slate-800);
+  --color-surface-stripe: #131721;
   --color-surface-raised: var(--color-surface);
   --color-text: var(--slate-100);
   --color-text-muted: var(--slate-400);
@@ -338,11 +395,19 @@
   --color-danger-soft: rgba(248,113,113,.18);
   --color-info: var(--blue-400);
   --color-info-soft: rgba(96,165,250,.18);
+  --color-danger-border: #7a474f;
   --color-primary-strong: var(--primary-300);
   --color-success-strong: var(--green-400);
   --color-warning-strong: var(--amber-400);
   --color-danger-strong: var(--red-300);
   --color-info-strong: var(--blue-300);
+  --color-primary-rgb: var(--primary-500-rgb);
+  --color-danger-rgb: var(--red-400-rgb);
+  --color-success-rgb: var(--green-500-rgb);
+  --color-warning-rgb: var(--amber-500-rgb);
+  --color-info-rgb: var(--blue-400-rgb);
+  --color-surface-rgb: var(--slate-950-rgb);
+  --color-inverse-text-rgb: var(--slate-900-rgb);
   --chart-1: #3987e5;
   --chart-2: #d95926;
   --chart-3: #199e70;
@@ -353,6 +418,37 @@
   --chart-8: #e66767;
   --chart-grid: var(--slate-800);
   --chart-tick: var(--slate-600);
+  --tone-1-bg: #16263f;
+  --tone-2-bg: #331e1c;
+  --tone-3-bg: #102a29;
+  --tone-4-bg: #302615;
+  --tone-5-bg: #321d2d;
+  --tone-6-bg: #0b2615;
+  --tone-7-bg: #25263f;
+  --tone-8-bg: #352028;
+  --tone-1-ink: #94bced;
+  --tone-2-ink: #e4a58d;
+  --tone-3-ink: #84c7b2;
+  --tone-4-ink: #dcbb7a;
+  --tone-5-ink: #e2a1bb;
+  --tone-6-ink: #77ba7a;
+  --tone-7-ink: #bfbbef;
+  --tone-8-ink: #eaacae;
+  --tone-1-border: #2c476c;
+  --tone-2-border: #5c3933;
+  --tone-3-border: #224e49;
+  --tone-4-border: #574627;
+  --tone-5-border: #5b364e;
+  --tone-6-border: #1b4527;
+  --tone-7-border: #46466d;
+  --tone-8-border: #603d46;
+  --tone-1-border-soft: rgba(57,135,229,.26);
+  --tone-2-border-soft: rgba(217,89,38,.26);
+  --tone-3-border-soft: rgba(25,158,112,.26);
+  --tone-4-border-soft: rgba(201,133,0,.26);
+  --tone-5-border-soft: rgba(213,81,129,.26);
+  --tone-7-border-soft: rgba(144,133,233,.26);
+  --tone-8-border-soft: rgba(230,103,103,.26);
   --focus-ring: var(--primary-400);
   }
 }
@@ -373,8 +469,8 @@
   --color-primary-hover: var(--primary-400);
   --color-primary-active: var(--primary-300);
   --color-on-primary: var(--slate-0);
-  --color-primary-soft: color-mix(in srgb, var(--primary-600) 20%, transparent);
-  --color-primary-border: color-mix(in srgb, var(--primary-400) 28%, transparent);
+  --color-primary-soft: rgba(var(--primary-600-rgb), .2);
+  --color-primary-border: rgba(var(--primary-400-rgb), .28);
   --color-accent: var(--sky-400);
   --color-accent-hover: var(--sky-300);
   --color-on-accent: #06233f;
@@ -383,6 +479,7 @@
   --color-surface: var(--slate-950);
   --color-surface-2: var(--slate-900);
   --color-surface-3: var(--slate-800);
+  --color-surface-stripe: #131721;
   --color-surface-raised: var(--color-surface);
   --color-text: var(--slate-100);
   --color-text-muted: var(--slate-400);
@@ -402,11 +499,19 @@
   --color-danger-soft: rgba(248,113,113,.18);
   --color-info: var(--blue-400);
   --color-info-soft: rgba(96,165,250,.18);
+  --color-danger-border: #7a474f;
   --color-primary-strong: var(--primary-300);
   --color-success-strong: var(--green-400);
   --color-warning-strong: var(--amber-400);
   --color-danger-strong: var(--red-300);
   --color-info-strong: var(--blue-300);
+  --color-primary-rgb: var(--primary-500-rgb);
+  --color-danger-rgb: var(--red-400-rgb);
+  --color-success-rgb: var(--green-500-rgb);
+  --color-warning-rgb: var(--amber-500-rgb);
+  --color-info-rgb: var(--blue-400-rgb);
+  --color-surface-rgb: var(--slate-950-rgb);
+  --color-inverse-text-rgb: var(--slate-900-rgb);
   --chart-1: #3987e5;
   --chart-2: #d95926;
   --chart-3: #199e70;
@@ -417,6 +522,37 @@
   --chart-8: #e66767;
   --chart-grid: var(--slate-800);
   --chart-tick: var(--slate-600);
+  --tone-1-bg: #16263f;
+  --tone-2-bg: #331e1c;
+  --tone-3-bg: #102a29;
+  --tone-4-bg: #302615;
+  --tone-5-bg: #321d2d;
+  --tone-6-bg: #0b2615;
+  --tone-7-bg: #25263f;
+  --tone-8-bg: #352028;
+  --tone-1-ink: #94bced;
+  --tone-2-ink: #e4a58d;
+  --tone-3-ink: #84c7b2;
+  --tone-4-ink: #dcbb7a;
+  --tone-5-ink: #e2a1bb;
+  --tone-6-ink: #77ba7a;
+  --tone-7-ink: #bfbbef;
+  --tone-8-ink: #eaacae;
+  --tone-1-border: #2c476c;
+  --tone-2-border: #5c3933;
+  --tone-3-border: #224e49;
+  --tone-4-border: #574627;
+  --tone-5-border: #5b364e;
+  --tone-6-border: #1b4527;
+  --tone-7-border: #46466d;
+  --tone-8-border: #603d46;
+  --tone-1-border-soft: rgba(57,135,229,.26);
+  --tone-2-border-soft: rgba(217,89,38,.26);
+  --tone-3-border-soft: rgba(25,158,112,.26);
+  --tone-4-border-soft: rgba(201,133,0,.26);
+  --tone-5-border-soft: rgba(213,81,129,.26);
+  --tone-7-border-soft: rgba(144,133,233,.26);
+  --tone-8-border-soft: rgba(230,103,103,.26);
   --focus-ring: var(--primary-400);
 }
 [data-theme="light"] {
@@ -440,6 +576,7 @@
   --color-surface: var(--slate-0);
   --color-surface-2: var(--slate-50);
   --color-surface-3: var(--slate-100);
+  --color-surface-stripe: #fbfbfc;
   --color-surface-raised: var(--color-surface);
   --color-text: var(--slate-900);
   --color-text-muted: var(--slate-600);
@@ -459,11 +596,19 @@
   --color-danger-soft: var(--red-100);
   --color-info: var(--blue-600);
   --color-info-soft: var(--blue-100);
+  --color-danger-border: #de979c;
   --color-primary-strong: var(--primary-700);
   --color-success-strong: var(--green-800);
   --color-warning-strong: var(--amber-800);
   --color-danger-strong: var(--red-700);
   --color-info-strong: var(--blue-700);
+  --color-primary-rgb: var(--primary-600-rgb);
+  --color-danger-rgb: var(--red-600-rgb);
+  --color-success-rgb: var(--green-600-rgb);
+  --color-warning-rgb: 194,116,10;
+  --color-info-rgb: var(--blue-600-rgb);
+  --color-surface-rgb: var(--slate-0-rgb);
+  --color-inverse-text-rgb: var(--slate-0-rgb);
   --chart-1: #2a78d6;
   --chart-2: #eb6834;
   --chart-3: #1baf7a;
@@ -474,6 +619,37 @@
   --chart-8: #e34948;
   --chart-grid: var(--slate-200);
   --chart-tick: var(--slate-400);
+  --tone-1-bg: #d9e7f8;
+  --tone-2-bg: #fbe4da;
+  --tone-3-bg: #d6f1e7;
+  --tone-4-bg: #fceed1;
+  --tone-5-bg: #fbe7ef;
+  --tone-6-bg: #d1e9d1;
+  --tone-7-bg: #dedcef;
+  --tone-8-bg: #fadede;
+  --tone-1-ink: #214a7e;
+  --tone-2-ink: #81422d;
+  --tone-3-ink: #196550;
+  --tone-4-ink: #825e13;
+  --tone-5-ink: #804b65;
+  --tone-6-ink: #0c4f13;
+  --tone-7-ink: #312b67;
+  --tone-8-ink: #7d3237;
+  --tone-1-border: #a9c3e4;
+  --tone-2-border: #e3beb3;
+  --tone-3-border: #a5d3c8;
+  --tone-4-border: #e4cfa4;
+  --tone-5-border: #e2c4d5;
+  --tone-6-border: #9dc6a4;
+  --tone-7-border: #b3b0d6;
+  --tone-8-border: #e1b5b9;
+  --tone-1-border-soft: rgba(42,120,214,.26);
+  --tone-2-border-soft: rgba(235,104,52,.26);
+  --tone-3-border-soft: rgba(27,175,122,.26);
+  --tone-4-border-soft: rgba(237,161,0,.26);
+  --tone-5-border-soft: rgba(232,123,164,.26);
+  --tone-7-border-soft: rgba(74,58,167,.26);
+  --tone-8-border-soft: rgba(227,73,72,.26);
   --focus-ring: var(--primary-600);
 }
 /* Density is deliberately NOT scoped to :root. These are custom properties, so they inherit,
@@ -533,7 +709,11 @@
   --primary-600: var(--azure-600);
   --primary-700: var(--azure-700);
   --primary-800: var(--azure-800);
+  --primary-400-rgb: 92,139,246;
+  --primary-500-rgb: 52,103,236;
+  --primary-600-rgb: 32,80,216;
   --color-on-primary: var(--slate-0);
+  --color-on-primary-rgb: var(--slate-0-rgb);
 }
 [data-primary="sky"] {
   --primary-50: var(--sky-50);
@@ -544,18 +724,25 @@
   --primary-600: var(--sky-600);
   --primary-700: var(--sky-700);
   --primary-800: var(--sky-800);
+  --primary-400-rgb: 71,161,230;
+  --primary-500-rgb: 26,134,220;
+  --primary-600-rgb: 0,120,212;
   --color-on-primary: var(--slate-0);
+  --color-on-primary-rgb: var(--slate-0-rgb);
 }
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"])[data-primary="sky"] {
   --color-on-primary: var(--slate-950);
+  --color-on-primary-rgb: var(--slate-950-rgb);
   }
 }
 [data-theme="dark"][data-primary="sky"] {
   --color-on-primary: var(--slate-950);
+  --color-on-primary-rgb: var(--slate-950-rgb);
 }
 [data-theme="light"][data-primary="sky"] {
   --color-on-primary: var(--slate-0);
+  --color-on-primary-rgb: var(--slate-0-rgb);
 }
 [data-primary="blue"] {
   --primary-50: var(--blue-50);
@@ -566,18 +753,25 @@
   --primary-600: var(--blue-600);
   --primary-700: var(--blue-700);
   --primary-800: var(--blue-800);
+  --primary-400-rgb: 96,165,250;
+  --primary-500-rgb: 59,130,246;
+  --primary-600-rgb: 37,99,235;
   --color-on-primary: var(--slate-0);
+  --color-on-primary-rgb: var(--slate-0-rgb);
 }
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"])[data-primary="blue"] {
   --color-on-primary: var(--slate-950);
+  --color-on-primary-rgb: var(--slate-950-rgb);
   }
 }
 [data-theme="dark"][data-primary="blue"] {
   --color-on-primary: var(--slate-950);
+  --color-on-primary-rgb: var(--slate-950-rgb);
 }
 [data-theme="light"][data-primary="blue"] {
   --color-on-primary: var(--slate-0);
+  --color-on-primary-rgb: var(--slate-0-rgb);
 }
 [data-primary="indigo"] {
   --primary-50: var(--indigo-50);
@@ -588,27 +782,40 @@
   --primary-600: var(--indigo-600);
   --primary-700: var(--indigo-700);
   --primary-800: var(--indigo-800);
+  --primary-400-rgb: 129,140,248;
+  --primary-500-rgb: 99,102,241;
+  --primary-600-rgb: 79,70,229;
   --color-on-primary: var(--slate-0);
+  --color-on-primary-rgb: var(--slate-0-rgb);
 }
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"])[data-primary="indigo"] {
   --primary-300: var(--indigo-200);
   --primary-400: var(--indigo-300);
   --primary-500: var(--indigo-400);
+  --primary-400-rgb: 165,180,252;
+  --primary-500-rgb: 129,140,248;
   --color-on-primary: var(--slate-950);
+  --color-on-primary-rgb: var(--slate-950-rgb);
   }
 }
 [data-theme="dark"][data-primary="indigo"] {
   --primary-300: var(--indigo-200);
   --primary-400: var(--indigo-300);
   --primary-500: var(--indigo-400);
+  --primary-400-rgb: 165,180,252;
+  --primary-500-rgb: 129,140,248;
   --color-on-primary: var(--slate-950);
+  --color-on-primary-rgb: var(--slate-950-rgb);
 }
 [data-theme="light"][data-primary="indigo"] {
   --primary-300: var(--indigo-300);
   --primary-400: var(--indigo-400);
   --primary-500: var(--indigo-500);
+  --primary-400-rgb: 129,140,248;
+  --primary-500-rgb: 99,102,241;
   --color-on-primary: var(--slate-0);
+  --color-on-primary-rgb: var(--slate-0-rgb);
 }
 [data-primary="violet"] {
   --primary-50: var(--violet-50);
@@ -619,27 +826,40 @@
   --primary-600: var(--violet-600);
   --primary-700: var(--violet-700);
   --primary-800: var(--violet-800);
+  --primary-400-rgb: 167,139,250;
+  --primary-500-rgb: 139,92,246;
+  --primary-600-rgb: 124,58,237;
   --color-on-primary: var(--slate-0);
+  --color-on-primary-rgb: var(--slate-0-rgb);
 }
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"])[data-primary="violet"] {
   --primary-300: var(--violet-200);
   --primary-400: var(--violet-300);
   --primary-500: var(--violet-400);
+  --primary-400-rgb: 196,181,253;
+  --primary-500-rgb: 167,139,250;
   --color-on-primary: var(--slate-950);
+  --color-on-primary-rgb: var(--slate-950-rgb);
   }
 }
 [data-theme="dark"][data-primary="violet"] {
   --primary-300: var(--violet-200);
   --primary-400: var(--violet-300);
   --primary-500: var(--violet-400);
+  --primary-400-rgb: 196,181,253;
+  --primary-500-rgb: 167,139,250;
   --color-on-primary: var(--slate-950);
+  --color-on-primary-rgb: var(--slate-950-rgb);
 }
 [data-theme="light"][data-primary="violet"] {
   --primary-300: var(--violet-300);
   --primary-400: var(--violet-400);
   --primary-500: var(--violet-500);
+  --primary-400-rgb: 167,139,250;
+  --primary-500-rgb: 139,92,246;
   --color-on-primary: var(--slate-0);
+  --color-on-primary-rgb: var(--slate-0-rgb);
 }
 [data-primary="purple"] {
   --primary-50: var(--purple-50);
@@ -650,18 +870,25 @@
   --primary-600: var(--purple-600);
   --primary-700: var(--purple-700);
   --primary-800: var(--purple-800);
+  --primary-400-rgb: 192,132,252;
+  --primary-500-rgb: 168,85,247;
+  --primary-600-rgb: 147,51,234;
   --color-on-primary: var(--slate-0);
+  --color-on-primary-rgb: var(--slate-0-rgb);
 }
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"])[data-primary="purple"] {
   --color-on-primary: var(--slate-950);
+  --color-on-primary-rgb: var(--slate-950-rgb);
   }
 }
 [data-theme="dark"][data-primary="purple"] {
   --color-on-primary: var(--slate-950);
+  --color-on-primary-rgb: var(--slate-950-rgb);
 }
 [data-theme="light"][data-primary="purple"] {
   --color-on-primary: var(--slate-0);
+  --color-on-primary-rgb: var(--slate-0-rgb);
 }
 [data-primary="fuchsia"] {
   --primary-50: var(--fuchsia-50);
@@ -672,18 +899,25 @@
   --primary-600: var(--fuchsia-600);
   --primary-700: var(--fuchsia-700);
   --primary-800: var(--fuchsia-800);
+  --primary-400-rgb: 232,121,249;
+  --primary-500-rgb: 217,70,239;
+  --primary-600-rgb: 192,38,211;
   --color-on-primary: var(--slate-0);
+  --color-on-primary-rgb: var(--slate-0-rgb);
 }
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"])[data-primary="fuchsia"] {
   --color-on-primary: var(--slate-950);
+  --color-on-primary-rgb: var(--slate-950-rgb);
   }
 }
 [data-theme="dark"][data-primary="fuchsia"] {
   --color-on-primary: var(--slate-950);
+  --color-on-primary-rgb: var(--slate-950-rgb);
 }
 [data-theme="light"][data-primary="fuchsia"] {
   --color-on-primary: var(--slate-0);
+  --color-on-primary-rgb: var(--slate-0-rgb);
 }
 [data-primary="pink"] {
   --primary-50: var(--pink-50);
@@ -694,18 +928,25 @@
   --primary-600: var(--pink-600);
   --primary-700: var(--pink-700);
   --primary-800: var(--pink-800);
+  --primary-400-rgb: 244,114,182;
+  --primary-500-rgb: 236,72,153;
+  --primary-600-rgb: 219,39,119;
   --color-on-primary: var(--slate-0);
+  --color-on-primary-rgb: var(--slate-0-rgb);
 }
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"])[data-primary="pink"] {
   --color-on-primary: var(--slate-950);
+  --color-on-primary-rgb: var(--slate-950-rgb);
   }
 }
 [data-theme="dark"][data-primary="pink"] {
   --color-on-primary: var(--slate-950);
+  --color-on-primary-rgb: var(--slate-950-rgb);
 }
 [data-theme="light"][data-primary="pink"] {
   --color-on-primary: var(--slate-0);
+  --color-on-primary-rgb: var(--slate-0-rgb);
 }
 [data-primary="rose"] {
   --primary-50: var(--rose-50);
@@ -716,18 +957,25 @@
   --primary-600: var(--rose-600);
   --primary-700: var(--rose-700);
   --primary-800: var(--rose-800);
+  --primary-400-rgb: 251,113,133;
+  --primary-500-rgb: 244,63,94;
+  --primary-600-rgb: 225,29,72;
   --color-on-primary: var(--slate-0);
+  --color-on-primary-rgb: var(--slate-0-rgb);
 }
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"])[data-primary="rose"] {
   --color-on-primary: var(--slate-950);
+  --color-on-primary-rgb: var(--slate-950-rgb);
   }
 }
 [data-theme="dark"][data-primary="rose"] {
   --color-on-primary: var(--slate-950);
+  --color-on-primary-rgb: var(--slate-950-rgb);
 }
 [data-theme="light"][data-primary="rose"] {
   --color-on-primary: var(--slate-0);
+  --color-on-primary-rgb: var(--slate-0-rgb);
 }
 [data-primary="orange"] {
   --primary-50: var(--orange-50);
@@ -738,7 +986,11 @@
   --primary-600: var(--orange-600);
   --primary-700: var(--orange-700);
   --primary-800: var(--orange-800);
+  --primary-400-rgb: 251,146,60;
+  --primary-500-rgb: 249,115,22;
+  --primary-600-rgb: 234,88,12;
   --color-on-primary: var(--slate-950);
+  --color-on-primary-rgb: var(--slate-950-rgb);
 }
 [data-primary="amber"] {
   --primary-50: var(--amber-50);
@@ -749,7 +1001,11 @@
   --primary-600: var(--amber-600);
   --primary-700: var(--amber-700);
   --primary-800: var(--amber-800);
+  --primary-400-rgb: 251,191,36;
+  --primary-500-rgb: 245,158,11;
+  --primary-600-rgb: 217,119,6;
   --color-on-primary: var(--slate-950);
+  --color-on-primary-rgb: var(--slate-950-rgb);
 }
 [data-primary="yellow"] {
   --primary-50: var(--yellow-50);
@@ -760,18 +1016,25 @@
   --primary-600: var(--yellow-700);
   --primary-700: var(--yellow-800);
   --primary-800: var(--yellow-900);
+  --primary-400-rgb: 250,204,21;
+  --primary-500-rgb: 234,179,8;
+  --primary-600-rgb: 161,98,7;
   --color-on-primary: var(--slate-0);
+  --color-on-primary-rgb: var(--slate-0-rgb);
 }
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"])[data-primary="yellow"] {
   --color-on-primary: var(--slate-950);
+  --color-on-primary-rgb: var(--slate-950-rgb);
   }
 }
 [data-theme="dark"][data-primary="yellow"] {
   --color-on-primary: var(--slate-950);
+  --color-on-primary-rgb: var(--slate-950-rgb);
 }
 [data-theme="light"][data-primary="yellow"] {
   --color-on-primary: var(--slate-0);
+  --color-on-primary-rgb: var(--slate-0-rgb);
 }
 [data-primary="lime"] {
   --primary-50: var(--lime-50);
@@ -782,7 +1045,11 @@
   --primary-600: var(--lime-600);
   --primary-700: var(--lime-700);
   --primary-800: var(--lime-800);
+  --primary-400-rgb: 163,230,53;
+  --primary-500-rgb: 132,204,22;
+  --primary-600-rgb: 101,163,13;
   --color-on-primary: var(--slate-950);
+  --color-on-primary-rgb: var(--slate-950-rgb);
 }
 [data-primary="green"] {
   --primary-50: var(--green-50);
@@ -793,7 +1060,11 @@
   --primary-600: var(--green-600);
   --primary-700: var(--green-700);
   --primary-800: var(--green-800);
+  --primary-400-rgb: 74,222,128;
+  --primary-500-rgb: 34,197,94;
+  --primary-600-rgb: 22,163,74;
   --color-on-primary: var(--slate-950);
+  --color-on-primary-rgb: var(--slate-950-rgb);
 }
 [data-primary="emerald"] {
   --primary-50: var(--emerald-50);
@@ -804,7 +1075,11 @@
   --primary-600: var(--emerald-600);
   --primary-700: var(--emerald-700);
   --primary-800: var(--emerald-800);
+  --primary-400-rgb: 52,211,153;
+  --primary-500-rgb: 16,185,129;
+  --primary-600-rgb: 5,150,105;
   --color-on-primary: var(--slate-950);
+  --color-on-primary-rgb: var(--slate-950-rgb);
 }
 [data-primary="teal"] {
   --primary-50: var(--teal-50);
@@ -815,7 +1090,11 @@
   --primary-600: var(--teal-600);
   --primary-700: var(--teal-700);
   --primary-800: var(--teal-800);
+  --primary-400-rgb: 45,212,191;
+  --primary-500-rgb: 20,184,166;
+  --primary-600-rgb: 13,148,136;
   --color-on-primary: var(--slate-950);
+  --color-on-primary-rgb: var(--slate-950-rgb);
 }
 [data-primary="cyan"] {
   --primary-50: var(--cyan-50);
@@ -826,7 +1105,11 @@
   --primary-600: var(--cyan-600);
   --primary-700: var(--cyan-700);
   --primary-800: var(--cyan-800);
+  --primary-400-rgb: 34,211,238;
+  --primary-500-rgb: 6,182,212;
+  --primary-600-rgb: 8,145,178;
   --color-on-primary: var(--slate-950);
+  --color-on-primary-rgb: var(--slate-950-rgb);
 }
 [data-primary="noir"] {
   --primary-50: var(--slate-100);
@@ -837,7 +1120,11 @@
   --primary-600: var(--slate-900);
   --primary-700: var(--slate-800);
   --primary-800: var(--slate-950);
+  --primary-400-rgb: 58,65,82;
+  --primary-500-rgb: 38,43,56;
+  --primary-600-rgb: 23,27,38;
   --color-on-primary: var(--slate-0);
+  --color-on-primary-rgb: var(--slate-0-rgb);
 }
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"])[data-primary="noir"] {
@@ -849,7 +1136,11 @@
   --primary-600: var(--slate-50);
   --primary-700: var(--slate-200);
   --primary-800: var(--slate-300);
+  --primary-400-rgb: 224,227,234;
+  --primary-500-rgb: 238,240,244;
+  --primary-600-rgb: 247,248,250;
   --color-on-primary: var(--slate-950);
+  --color-on-primary-rgb: var(--slate-950-rgb);
   }
 }
 [data-theme="dark"][data-primary="noir"] {
@@ -861,7 +1152,11 @@
   --primary-600: var(--slate-50);
   --primary-700: var(--slate-200);
   --primary-800: var(--slate-300);
+  --primary-400-rgb: 224,227,234;
+  --primary-500-rgb: 238,240,244;
+  --primary-600-rgb: 247,248,250;
   --color-on-primary: var(--slate-950);
+  --color-on-primary-rgb: var(--slate-950-rgb);
 }
 [data-theme="light"][data-primary="noir"] {
   --primary-50: var(--slate-100);
@@ -872,5 +1167,9 @@
   --primary-600: var(--slate-900);
   --primary-700: var(--slate-800);
   --primary-800: var(--slate-950);
+  --primary-400-rgb: 58,65,82;
+  --primary-500-rgb: 38,43,56;
+  --primary-600-rgb: 23,27,38;
   --color-on-primary: var(--slate-0);
+  --color-on-primary-rgb: var(--slate-0-rgb);
 }