@mastra/playground-ui 60.0.0-alpha.8 → 60.0.0

package/theme/colors.css

@@ -1,5 +1,5 @@
 /*
- * Raw colour ramps — where every literal colour value is authored.
+ * Raw colour ramps and the fixed Mastra brand palette.
  *
  * The achromatic foundations (`--background-*`, `--gray-*`, `--gray-alpha-*`)
  * are deliberately not exported as Tailwind colours: a component reaches for a
@@ -33,36 +33,189 @@
   --gray-alpha-9: rgb(255 255 255 / 75%);
   --gray-alpha-10: rgb(255 255 255 / 90%);
 
-  --accent1: oklch(0.723 0.219 149.579);
-  --accent2: oklch(0.637 0.237 25.331);
-  --accent3: oklch(0.623 0.214 259.815);
-  --accent5: oklch(0.707 0.165 254.624);
-  --accent6: oklch(0.769 0.188 70.08);
+  --red-50: oklch(0.97 0.012 25);
+  --red-100: oklch(0.94 0.03 25);
+  --red-200: oklch(0.88 0.063 25);
+  --red-300: oklch(0.8 0.114 25);
+  --red-400: oklch(0.7 0.18 25);
+  --red-500: oklch(0.62 0.22 25);
+  --red-600: oklch(0.55 0.22 25);
+  --red-700: oklch(0.47 0.19 25);
+  --red-800: oklch(0.39 0.14 25);
+  --red-900: oklch(0.31 0.1 25);
+  --red-950: oklch(0.23 0.06 25);
+  --red-soft-50: oklch(0.97 0.01 25);
+  --red-soft-100: oklch(0.93 0.022 25);
+  --red-soft-200: oklch(0.86 0.045 25);
+  --red-soft-300: oklch(0.76 0.1 25);
+  --red-soft-400: oklch(0.68 0.1 25);
+  --red-soft-500: oklch(0.6 0.1 25);
+  --red-soft-600: oklch(0.52 0.1 25);
+  --red-soft-700: oklch(0.45 0.092 25);
+  --red-soft-800: oklch(0.38 0.083 25);
+  --red-soft-900: oklch(0.31 0.075 25);
+  --red-soft-950: oklch(0.23 0.045 25);
 
-  --accent1Dark: oklch(0.242 0.051 151);
-  --accent2Dark: oklch(0.216 0.044 22);
-  --accent3Dark: oklch(0.234 0.052 261);
-  --accent5Dark: oklch(0.227 0.03 244);
-  --accent6Dark: oklch(0.229 0.031 71);
+  --orange-50: oklch(0.97 0.014 50);
+  --orange-100: oklch(0.94 0.03 50);
+  --orange-200: oklch(0.88 0.07 50);
+  --orange-300: oklch(0.8 0.12 50);
+  --orange-400: oklch(0.7 0.17 50);
+  --orange-500: oklch(0.62 0.164 50);
+  --orange-600: oklch(0.55 0.145 50);
+  --orange-700: oklch(0.47 0.124 50);
+  --orange-800: oklch(0.39 0.103 50);
+  --orange-900: oklch(0.31 0.082 50);
+  --orange-950: oklch(0.23 0.05 50);
+  --orange-soft-50: oklch(0.97 0.01 50);
+  --orange-soft-100: oklch(0.93 0.022 50);
+  --orange-soft-200: oklch(0.86 0.045 50);
+  --orange-soft-300: oklch(0.76 0.1 50);
+  --orange-soft-400: oklch(0.68 0.1 50);
+  --orange-soft-500: oklch(0.6 0.1 50);
+  --orange-soft-600: oklch(0.52 0.1 50);
+  --orange-soft-700: oklch(0.45 0.088 50);
+  --orange-soft-800: oklch(0.38 0.076 50);
+  --orange-soft-900: oklch(0.31 0.064 50);
+  --orange-soft-950: oklch(0.23 0.038 50);
 
-  --accent1Darker: oklch(0.181 0.033 147);
-  --accent2Darker: oklch(0.16 0.023 19);
-  --accent3Darker: oklch(0.174 0.031 263);
-  --accent5Darker: oklch(0.17 0.015 240);
-  --accent6Darker: oklch(0.175 0.019 72);
+  --yellow-50: oklch(0.97 0.018 90);
+  --yellow-100: oklch(0.94 0.04 90);
+  --yellow-200: oklch(0.88 0.08 90);
+  --yellow-300: oklch(0.82 0.16 95);
+  --yellow-400: oklch(0.7 0.143 90);
+  --yellow-500: oklch(0.62 0.126 90);
+  --yellow-600: oklch(0.55 0.112 90);
+  --yellow-700: oklch(0.47 0.096 90);
+  --yellow-800: oklch(0.39 0.079 90);
+  --yellow-900: oklch(0.31 0.06 90);
+  --yellow-950: oklch(0.23 0.035 90);
+  --yellow-soft-50: oklch(0.97 0.01 90);
+  --yellow-soft-100: oklch(0.93 0.022 90);
+  --yellow-soft-200: oklch(0.86 0.045 90);
+  --yellow-soft-300: oklch(0.76 0.1 90);
+  --yellow-soft-400: oklch(0.68 0.1 90);
+  --yellow-soft-500: oklch(0.6 0.1 90);
+  --yellow-soft-600: oklch(0.52 0.1 90);
+  --yellow-soft-700: oklch(0.45 0.082 90);
+  --yellow-soft-800: oklch(0.38 0.063 90);
+  --yellow-soft-900: oklch(0.31 0.045 90);
+  --yellow-soft-950: oklch(0.23 0.026 90);
 
-  /* Brand green (dark). Remaps Tailwind green-* via @theme below. */
-  --brand-green-50: oklch(99% 0.024 138);
-  --brand-green-100: oklch(97.5% 0.055 138);
-  --brand-green-200: oklch(95.5% 0.105 138);
-  --brand-green-300: oklch(94% 0.18 138);
-  --brand-green-400: oklch(93% 0.235 138);
-  --brand-green-500: var(--notice-success);
-  --brand-green-600: oklch(76% 0.22 140);
-  --brand-green-700: oklch(62% 0.19 140);
-  --brand-green-800: oklch(45% 0.13 142);
-  --brand-green-900: oklch(33% 0.09 144);
-  --brand-green-950: oklch(22% 0.06 145);
+  --green-50: oklch(0.97 0.015 150);
+  --green-100: oklch(0.94 0.035 150);
+  --green-200: oklch(0.88 0.07 150);
+  --green-300: oklch(0.8 0.11 150);
+  --green-400: oklch(0.7 0.15 150);
+  --green-500: oklch(0.62 0.17 150);
+  --green-600: oklch(0.55 0.151 150);
+  --green-700: oklch(0.47 0.129 150);
+  --green-800: oklch(0.39 0.1 150);
+  --green-900: oklch(0.31 0.07 150);
+  --green-950: oklch(0.23 0.04 150);
+  --green-soft-50: oklch(0.97 0.01 150);
+  --green-soft-100: oklch(0.93 0.022 150);
+  --green-soft-200: oklch(0.86 0.045 150);
+  --green-soft-300: oklch(0.76 0.1 150);
+  --green-soft-400: oklch(0.68 0.1 150);
+  --green-soft-500: oklch(0.6 0.1 150);
+  --green-soft-600: oklch(0.52 0.1 150);
+  --green-soft-700: oklch(0.45 0.084 150);
+  --green-soft-800: oklch(0.38 0.069 150);
+  --green-soft-900: oklch(0.31 0.053 150);
+  --green-soft-950: oklch(0.23 0.03 150);
+
+  --cyan-50: oklch(0.97 0.014 215);
+  --cyan-100: oklch(0.94 0.03 215);
+  --cyan-200: oklch(0.88 0.055 215);
+  --cyan-300: oklch(0.8 0.085 215);
+  --cyan-400: oklch(0.7 0.115 215);
+  --cyan-500: oklch(0.62 0.109 215);
+  --cyan-600: oklch(0.55 0.097 215);
+  --cyan-700: oklch(0.47 0.083 215);
+  --cyan-800: oklch(0.39 0.069 215);
+  --cyan-900: oklch(0.31 0.054 215);
+  --cyan-950: oklch(0.23 0.035 215);
+  --cyan-soft-50: oklch(0.97 0.01 215);
+  --cyan-soft-100: oklch(0.93 0.022 215);
+  --cyan-soft-200: oklch(0.86 0.045 215);
+  --cyan-soft-300: oklch(0.76 0.1 215);
+  --cyan-soft-400: oklch(0.68 0.097 215);
+  --cyan-soft-500: oklch(0.6 0.093 215);
+  --cyan-soft-600: oklch(0.52 0.09 215);
+  --cyan-soft-700: oklch(0.45 0.074 215);
+  --cyan-soft-800: oklch(0.38 0.057 215);
+  --cyan-soft-900: oklch(0.31 0.041 215);
+  --cyan-soft-950: oklch(0.23 0.026 215);
+
+  --blue-50: oklch(0.97 0.012 260);
+  --blue-100: oklch(0.94 0.028 260);
+  --blue-200: oklch(0.88 0.058 260);
+  --blue-300: oklch(0.8 0.1 260);
+  --blue-400: oklch(0.7 0.157 260);
+  --blue-500: oklch(0.62 0.205 260);
+  --blue-600: oklch(0.55 0.21 260);
+  --blue-700: oklch(0.47 0.18 260);
+  --blue-800: oklch(0.39 0.14 260);
+  --blue-900: oklch(0.31 0.1 260);
+  --blue-950: oklch(0.23 0.06 260);
+  --blue-soft-50: oklch(0.97 0.01 260);
+  --blue-soft-100: oklch(0.93 0.022 260);
+  --blue-soft-200: oklch(0.86 0.045 260);
+  --blue-soft-300: oklch(0.76 0.1 260);
+  --blue-soft-400: oklch(0.68 0.1 260);
+  --blue-soft-500: oklch(0.6 0.1 260);
+  --blue-soft-600: oklch(0.52 0.1 260);
+  --blue-soft-700: oklch(0.45 0.092 260);
+  --blue-soft-800: oklch(0.38 0.083 260);
+  --blue-soft-900: oklch(0.31 0.075 260);
+  --blue-soft-950: oklch(0.23 0.045 260);
+
+  --purple-50: oklch(0.97 0.014 304);
+  --purple-100: oklch(0.94 0.035 304);
+  --purple-200: oklch(0.88 0.072 304);
+  --purple-300: oklch(0.8 0.124 304);
+  --purple-400: oklch(0.7 0.195 304);
+  --purple-500: oklch(0.62 0.24 304);
+  --purple-600: oklch(0.55 0.23 304);
+  --purple-700: oklch(0.47 0.2 304);
+  --purple-800: oklch(0.39 0.15 304);
+  --purple-900: oklch(0.31 0.11 304);
+  --purple-950: oklch(0.23 0.065 304);
+  --purple-soft-50: oklch(0.97 0.01 304);
+  --purple-soft-100: oklch(0.93 0.022 304);
+  --purple-soft-200: oklch(0.86 0.045 304);
+  --purple-soft-300: oklch(0.76 0.1 304);
+  --purple-soft-400: oklch(0.68 0.1 304);
+  --purple-soft-500: oklch(0.6 0.1 304);
+  --purple-soft-600: oklch(0.52 0.1 304);
+  --purple-soft-700: oklch(0.45 0.094 304);
+  --purple-soft-800: oklch(0.38 0.089 304);
+  --purple-soft-900: oklch(0.31 0.083 304);
+  --purple-soft-950: oklch(0.23 0.049 304);
+
+  --pink-50: oklch(0.97 0.014 350);
+  --pink-100: oklch(0.94 0.035 350);
+  --pink-200: oklch(0.88 0.075 350);
+  --pink-300: oklch(0.8 0.13 350);
+  --pink-400: oklch(0.7 0.19 350);
+  --pink-500: oklch(0.62 0.22 350);
+  --pink-600: oklch(0.55 0.21 350);
+  --pink-700: oklch(0.47 0.18 350);
+  --pink-800: oklch(0.39 0.14 350);
+  --pink-900: oklch(0.31 0.1 350);
+  --pink-950: oklch(0.23 0.06 350);
+  --pink-soft-50: oklch(0.97 0.01 350);
+  --pink-soft-100: oklch(0.93 0.022 350);
+  --pink-soft-200: oklch(0.86 0.045 350);
+  --pink-soft-300: oklch(0.76 0.1 350);
+  --pink-soft-400: oklch(0.68 0.1 350);
+  --pink-soft-500: oklch(0.6 0.1 350);
+  --pink-soft-600: oklch(0.52 0.1 350);
+  --pink-soft-700: oklch(0.45 0.092 350);
+  --pink-soft-800: oklch(0.38 0.083 350);
+  --pink-soft-900: oklch(0.31 0.075 350);
+  --pink-soft-950: oklch(0.23 0.045 350);
 }
 
 html.light {
@@ -89,67 +242,193 @@ html.light {
   --gray-alpha-8: rgb(0 0 0 / 60%);
   --gray-alpha-9: rgb(0 0 0 / 75%);
   --gray-alpha-10: rgb(0 0 0 / 90%);
-
-  --accent1: oklch(0.627 0.194 149.214);
-  --accent2: oklch(0.577 0.245 27.325);
-  --accent3: oklch(0.546 0.245 262.881);
-  --accent5: oklch(0.623 0.214 259.815);
-  --accent6: oklch(0.666 0.179 58.318);
-
-  --accent1Dark: oklch(0.962 0.044 156.743);
-  --accent2Dark: oklch(0.936 0.032 17.717);
-  --accent3Dark: oklch(0.932 0.032 255.585);
-  --accent5Dark: oklch(0.932 0.032 255.585);
-  --accent6Dark: oklch(0.962 0.059 95.617);
-
-  --accent1Darker: oklch(0.925 0.084 155.995);
-  --accent2Darker: oklch(0.885 0.062 18.334);
-  --accent3Darker: oklch(0.882 0.059 254.128);
-  --accent5Darker: oklch(0.882 0.059 254.128);
-  --accent6Darker: oklch(0.924 0.12 95.746);
-
-  /* Brand green (light). badge + chart inherit :root. */
-  --brand-green-50: oklch(97.8% 0.025 140);
-  --brand-green-100: oklch(95.5% 0.055 140);
-  --brand-green-200: oklch(91.5% 0.095 140);
-  --brand-green-300: oklch(84.5% 0.145 140);
-  --brand-green-400: oklch(72.5% 0.18 140);
-  --brand-green-500: var(--notice-success);
-  --brand-green-600: oklch(47% 0.17 142);
-  --brand-green-700: oklch(38% 0.13 144);
-  --brand-green-800: oklch(30% 0.1 145);
-  --brand-green-900: oklch(24% 0.075 146);
-  --brand-green-950: oklch(17% 0.05 147);
 }
 
-@theme {
-  --color-accent1: var(--accent1);
-  --color-accent2: var(--accent2);
-  --color-accent3: var(--accent3);
-  --color-accent5: var(--accent5);
-  --color-accent6: var(--accent6);
-  --color-accent1Dark: var(--accent1Dark);
-  --color-accent2Dark: var(--accent2Dark);
-  --color-accent3Dark: var(--accent3Dark);
-  --color-accent5Dark: var(--accent5Dark);
-  --color-accent6Dark: var(--accent6Dark);
-  --color-accent1Darker: var(--accent1Darker);
-  --color-accent2Darker: var(--accent2Darker);
-  --color-accent3Darker: var(--accent3Darker);
-  --color-accent5Darker: var(--accent5Darker);
-  --color-accent6Darker: var(--accent6Darker);
+@theme static {
+  --color-brand-green: #7aff78;
+  --color-brand-orange: #fdac53;
+  --color-brand-pink: #ff69cc;
+  --color-brand-purple: #b588fe;
+  --color-brand-blue: #6ccdfb;
+  --color-brand-red: #ff4758;
+  --color-brand-yellow: #e7e67b;
+}
 
-  /* Replace Tailwind green with brand green. initial clears defaults (native v4), then remap. */
-  --color-green-*: initial;
-  --color-green-50: var(--brand-green-50);
-  --color-green-100: var(--brand-green-100);
-  --color-green-200: var(--brand-green-200);
-  --color-green-300: var(--brand-green-300);
-  --color-green-400: var(--brand-green-400);
-  --color-green-500: var(--brand-green-500);
-  --color-green-600: var(--brand-green-600);
-  --color-green-700: var(--brand-green-700);
-  --color-green-800: var(--brand-green-800);
-  --color-green-900: var(--brand-green-900);
-  --color-green-950: var(--brand-green-950);
+@theme inline {
+  --color-green-50: var(--green-50);
+  --color-green-100: var(--green-100);
+  --color-green-200: var(--green-200);
+  --color-green-300: var(--green-300);
+  --color-green-400: var(--green-400);
+  --color-green-500: var(--green-500);
+  --color-green-600: var(--green-600);
+  --color-green-700: var(--green-700);
+  --color-green-800: var(--green-800);
+  --color-green-900: var(--green-900);
+  --color-green-950: var(--green-950);
+  --color-green-soft-50: var(--green-soft-50);
+  --color-green-soft-100: var(--green-soft-100);
+  --color-green-soft-200: var(--green-soft-200);
+  --color-green-soft-300: var(--green-soft-300);
+  --color-green-soft-400: var(--green-soft-400);
+  --color-green-soft-500: var(--green-soft-500);
+  --color-green-soft-600: var(--green-soft-600);
+  --color-green-soft-700: var(--green-soft-700);
+  --color-green-soft-800: var(--green-soft-800);
+  --color-green-soft-900: var(--green-soft-900);
+  --color-green-soft-950: var(--green-soft-950);
+  --color-red-50: var(--red-50);
+  --color-red-100: var(--red-100);
+  --color-red-200: var(--red-200);
+  --color-red-300: var(--red-300);
+  --color-red-400: var(--red-400);
+  --color-red-500: var(--red-500);
+  --color-red-600: var(--red-600);
+  --color-red-700: var(--red-700);
+  --color-red-800: var(--red-800);
+  --color-red-900: var(--red-900);
+  --color-red-950: var(--red-950);
+  --color-red-soft-50: var(--red-soft-50);
+  --color-red-soft-100: var(--red-soft-100);
+  --color-red-soft-200: var(--red-soft-200);
+  --color-red-soft-300: var(--red-soft-300);
+  --color-red-soft-400: var(--red-soft-400);
+  --color-red-soft-500: var(--red-soft-500);
+  --color-red-soft-600: var(--red-soft-600);
+  --color-red-soft-700: var(--red-soft-700);
+  --color-red-soft-800: var(--red-soft-800);
+  --color-red-soft-900: var(--red-soft-900);
+  --color-red-soft-950: var(--red-soft-950);
+  --color-orange-50: var(--orange-50);
+  --color-orange-100: var(--orange-100);
+  --color-orange-200: var(--orange-200);
+  --color-orange-300: var(--orange-300);
+  --color-orange-400: var(--orange-400);
+  --color-orange-500: var(--orange-500);
+  --color-orange-600: var(--orange-600);
+  --color-orange-700: var(--orange-700);
+  --color-orange-800: var(--orange-800);
+  --color-orange-900: var(--orange-900);
+  --color-orange-950: var(--orange-950);
+  --color-orange-soft-50: var(--orange-soft-50);
+  --color-orange-soft-100: var(--orange-soft-100);
+  --color-orange-soft-200: var(--orange-soft-200);
+  --color-orange-soft-300: var(--orange-soft-300);
+  --color-orange-soft-400: var(--orange-soft-400);
+  --color-orange-soft-500: var(--orange-soft-500);
+  --color-orange-soft-600: var(--orange-soft-600);
+  --color-orange-soft-700: var(--orange-soft-700);
+  --color-orange-soft-800: var(--orange-soft-800);
+  --color-orange-soft-900: var(--orange-soft-900);
+  --color-orange-soft-950: var(--orange-soft-950);
+  --color-yellow-50: var(--yellow-50);
+  --color-yellow-100: var(--yellow-100);
+  --color-yellow-200: var(--yellow-200);
+  --color-yellow-300: var(--yellow-300);
+  --color-yellow-400: var(--yellow-400);
+  --color-yellow-500: var(--yellow-500);
+  --color-yellow-600: var(--yellow-600);
+  --color-yellow-700: var(--yellow-700);
+  --color-yellow-800: var(--yellow-800);
+  --color-yellow-900: var(--yellow-900);
+  --color-yellow-950: var(--yellow-950);
+  --color-yellow-soft-50: var(--yellow-soft-50);
+  --color-yellow-soft-100: var(--yellow-soft-100);
+  --color-yellow-soft-200: var(--yellow-soft-200);
+  --color-yellow-soft-300: var(--yellow-soft-300);
+  --color-yellow-soft-400: var(--yellow-soft-400);
+  --color-yellow-soft-500: var(--yellow-soft-500);
+  --color-yellow-soft-600: var(--yellow-soft-600);
+  --color-yellow-soft-700: var(--yellow-soft-700);
+  --color-yellow-soft-800: var(--yellow-soft-800);
+  --color-yellow-soft-900: var(--yellow-soft-900);
+  --color-yellow-soft-950: var(--yellow-soft-950);
+  --color-cyan-50: var(--cyan-50);
+  --color-cyan-100: var(--cyan-100);
+  --color-cyan-200: var(--cyan-200);
+  --color-cyan-300: var(--cyan-300);
+  --color-cyan-400: var(--cyan-400);
+  --color-cyan-500: var(--cyan-500);
+  --color-cyan-600: var(--cyan-600);
+  --color-cyan-700: var(--cyan-700);
+  --color-cyan-800: var(--cyan-800);
+  --color-cyan-900: var(--cyan-900);
+  --color-cyan-950: var(--cyan-950);
+  --color-cyan-soft-50: var(--cyan-soft-50);
+  --color-cyan-soft-100: var(--cyan-soft-100);
+  --color-cyan-soft-200: var(--cyan-soft-200);
+  --color-cyan-soft-300: var(--cyan-soft-300);
+  --color-cyan-soft-400: var(--cyan-soft-400);
+  --color-cyan-soft-500: var(--cyan-soft-500);
+  --color-cyan-soft-600: var(--cyan-soft-600);
+  --color-cyan-soft-700: var(--cyan-soft-700);
+  --color-cyan-soft-800: var(--cyan-soft-800);
+  --color-cyan-soft-900: var(--cyan-soft-900);
+  --color-cyan-soft-950: var(--cyan-soft-950);
+  --color-blue-50: var(--blue-50);
+  --color-blue-100: var(--blue-100);
+  --color-blue-200: var(--blue-200);
+  --color-blue-300: var(--blue-300);
+  --color-blue-400: var(--blue-400);
+  --color-blue-500: var(--blue-500);
+  --color-blue-600: var(--blue-600);
+  --color-blue-700: var(--blue-700);
+  --color-blue-800: var(--blue-800);
+  --color-blue-900: var(--blue-900);
+  --color-blue-950: var(--blue-950);
+  --color-blue-soft-50: var(--blue-soft-50);
+  --color-blue-soft-100: var(--blue-soft-100);
+  --color-blue-soft-200: var(--blue-soft-200);
+  --color-blue-soft-300: var(--blue-soft-300);
+  --color-blue-soft-400: var(--blue-soft-400);
+  --color-blue-soft-500: var(--blue-soft-500);
+  --color-blue-soft-600: var(--blue-soft-600);
+  --color-blue-soft-700: var(--blue-soft-700);
+  --color-blue-soft-800: var(--blue-soft-800);
+  --color-blue-soft-900: var(--blue-soft-900);
+  --color-blue-soft-950: var(--blue-soft-950);
+  --color-purple-50: var(--purple-50);
+  --color-purple-100: var(--purple-100);
+  --color-purple-200: var(--purple-200);
+  --color-purple-300: var(--purple-300);
+  --color-purple-400: var(--purple-400);
+  --color-purple-500: var(--purple-500);
+  --color-purple-600: var(--purple-600);
+  --color-purple-700: var(--purple-700);
+  --color-purple-800: var(--purple-800);
+  --color-purple-900: var(--purple-900);
+  --color-purple-950: var(--purple-950);
+  --color-purple-soft-50: var(--purple-soft-50);
+  --color-purple-soft-100: var(--purple-soft-100);
+  --color-purple-soft-200: var(--purple-soft-200);
+  --color-purple-soft-300: var(--purple-soft-300);
+  --color-purple-soft-400: var(--purple-soft-400);
+  --color-purple-soft-500: var(--purple-soft-500);
+  --color-purple-soft-600: var(--purple-soft-600);
+  --color-purple-soft-700: var(--purple-soft-700);
+  --color-purple-soft-800: var(--purple-soft-800);
+  --color-purple-soft-900: var(--purple-soft-900);
+  --color-purple-soft-950: var(--purple-soft-950);
+  --color-pink-50: var(--pink-50);
+  --color-pink-100: var(--pink-100);
+  --color-pink-200: var(--pink-200);
+  --color-pink-300: var(--pink-300);
+  --color-pink-400: var(--pink-400);
+  --color-pink-500: var(--pink-500);
+  --color-pink-600: var(--pink-600);
+  --color-pink-700: var(--pink-700);
+  --color-pink-800: var(--pink-800);
+  --color-pink-900: var(--pink-900);
+  --color-pink-950: var(--pink-950);
+  --color-pink-soft-50: var(--pink-soft-50);
+  --color-pink-soft-100: var(--pink-soft-100);
+  --color-pink-soft-200: var(--pink-soft-200);
+  --color-pink-soft-300: var(--pink-soft-300);
+  --color-pink-soft-400: var(--pink-soft-400);
+  --color-pink-soft-500: var(--pink-soft-500);
+  --color-pink-soft-600: var(--pink-soft-600);
+  --color-pink-soft-700: var(--pink-soft-700);
+  --color-pink-soft-800: var(--pink-soft-800);
+  --color-pink-soft-900: var(--pink-soft-900);
+  --color-pink-soft-950: var(--pink-soft-950);
 }

package/theme/data-viz.css

@@ -1,59 +1,87 @@
-/* Chart series and span-type hues. Consumed through `var()` by canvases and
-   timelines that pick a colour at runtime, so they generate no utility. */
+/* Chart series and span-type hues. Chart roles point at the colour ramps; span
+   roles keep their own hue wheel, one hue per span type. */
 
 :root {
-  --chart-blue: oklch(0.63 0.174 263);
-  --chart-blue-deep: oklch(0.519 0.199 264);
-  --chart-green: oklch(0.723 0.192 150);
-  --chart-purple: oklch(0.606 0.219 293);
-  --chart-orange: oklch(0.758 0.159 56);
-  --chart-pink: oklch(0.725 0.175 350);
-  --chart-red: oklch(0.711 0.166 22);
-  --chart-yellow: oklch(0.861 0.173 92);
+  --chart-blue: var(--blue-300);
+  --chart-blue-deep: var(--blue-600);
+  --chart-yellow: var(--yellow-300);
+  --chart-green: var(--green-400);
+  --chart-purple: var(--purple-400);
+  --chart-orange: var(--orange-400);
+  --chart-pink: var(--pink-300);
+  --chart-red: var(--red-500);
 
-  --chart-soft-1: oklch(0.62 0.19 285);
-  --chart-soft-2: oklch(0.7 0.145 285);
-  --chart-soft-3: oklch(0.78 0.1 285);
-  --chart-soft-4: oklch(0.85 0.06 285);
-  --chart-soft-5: oklch(0.9 0.03 285);
+  --chart-sequential-1: var(--purple-200);
+  --chart-sequential-2: var(--purple-300);
+  --chart-sequential-3: var(--purple-400);
+  --chart-sequential-4: var(--purple-500);
+  --chart-sequential-5: var(--purple-600);
+  --chart-sequential-pale: var(--purple-200);
 
-  --span-type-agent: oklch(0.75 0.15 250);
-  --span-type-workflow: oklch(0.75 0.15 200);
-  --span-type-model: oklch(0.75 0.15 320);
-  --span-type-mcp: oklch(0.75 0.15 160);
-  --span-type-tool: oklch(0.75 0.15 100);
-  --span-type-provider: oklch(0.75 0.15 60);
-  --span-type-memory: oklch(0.75 0.12 50);
-  --span-type-workspace: oklch(0.75 0.15 40);
-  --span-type-skill: oklch(0.75 0.15 130);
-  --span-type-scorer: oklch(0.75 0.15 280);
-  --span-type-other: var(--muted-foreground);
+  --span-agent: oklch(0.75 0.133 250);
+  --span-workflow: oklch(0.75 0.127 200);
+  --span-model: oklch(0.75 0.15 320);
+  --span-mcp: oklch(0.75 0.15 160);
+  --span-tool: oklch(0.75 0.15 100);
+  --span-provider: oklch(0.75 0.14 75);
+  --span-memory: oklch(0.75 0.12 50);
+  --span-workspace: oklch(0.75 0.13 20);
+  --span-skill: oklch(0.75 0.15 130);
+  --span-scorer: oklch(0.75 0.13 350);
+  --span-other: var(--muted-foreground);
 }
 
 html.light {
-  --chart-blue: oklch(0.55 0.2 263);
-  --chart-blue-deep: oklch(0.42 0.16 264);
-  --chart-green: oklch(0.55 0.15 150);
-  --chart-purple: oklch(0.52 0.24 293);
-  --chart-orange: oklch(0.62 0.15 56);
-  --chart-pink: oklch(0.57 0.2 350);
-  --chart-red: oklch(0.55 0.21 22);
-  --chart-yellow: oklch(0.62 0.12 92);
+  --chart-blue: var(--blue-500);
+  --chart-blue-deep: var(--blue-800);
+  --chart-yellow: var(--yellow-500);
+  --chart-green: var(--green-500);
+  --chart-purple: var(--purple-600);
+  --chart-orange: var(--orange-600);
+  --chart-pink: var(--pink-500);
+  --chart-red: var(--red-700);
 
-  --chart-soft-1: oklch(0.52 0.2 285);
-  --chart-soft-2: oklch(0.64 0.16 285);
-  --chart-soft-3: oklch(0.75 0.11 285);
-  --chart-soft-4: oklch(0.85 0.065 285);
-  --chart-soft-5: oklch(0.92 0.035 285);
+  --span-agent: oklch(0.55 0.15 250);
+  --span-workflow: oklch(0.55 0.093 200);
+  --span-model: oklch(0.55 0.15 320);
+  --span-mcp: oklch(0.55 0.124 160);
+  --span-tool: oklch(0.55 0.114 100);
+  --span-provider: oklch(0.55 0.11 75);
+  --span-memory: oklch(0.55 0.12 50);
+  --span-workspace: oklch(0.55 0.15 20);
+  --span-skill: oklch(0.55 0.148 130);
+  --span-scorer: oklch(0.55 0.15 350);
+  --chart-sequential-1: var(--purple-900);
+  --chart-sequential-2: var(--purple-800);
+  --chart-sequential-3: var(--purple-700);
+  --chart-sequential-4: var(--purple-600);
+  --chart-sequential-5: var(--purple-500);
+}
 
-  --span-type-agent: oklch(0.55 0.15 250);
-  --span-type-workflow: oklch(0.55 0.15 200);
-  --span-type-model: oklch(0.55 0.15 320);
-  --span-type-mcp: oklch(0.55 0.15 160);
-  --span-type-tool: oklch(0.55 0.15 100);
-  --span-type-provider: oklch(0.55 0.15 60);
-  --span-type-memory: oklch(0.55 0.12 50);
-  --span-type-workspace: oklch(0.55 0.15 40);
-  --span-type-skill: oklch(0.55 0.15 130);
-  --span-type-scorer: oklch(0.55 0.15 280);
+@theme inline {
+  --color-chart-blue: var(--chart-blue);
+  --color-chart-blue-deep: var(--chart-blue-deep);
+  --color-chart-yellow: var(--chart-yellow);
+  --color-chart-green: var(--chart-green);
+  --color-chart-purple: var(--chart-purple);
+  --color-chart-orange: var(--chart-orange);
+  --color-chart-pink: var(--chart-pink);
+  --color-chart-red: var(--chart-red);
+  --color-chart-sequential-1: var(--chart-sequential-1);
+  --color-chart-sequential-2: var(--chart-sequential-2);
+  --color-chart-sequential-3: var(--chart-sequential-3);
+  --color-chart-sequential-4: var(--chart-sequential-4);
+  --color-chart-sequential-5: var(--chart-sequential-5);
+  --color-chart-sequential-pale: var(--chart-sequential-pale);
+  --color-span-agent: var(--span-agent);
+  --color-span-workflow: var(--span-workflow);
+  --color-span-model: var(--span-model);
+  --color-span-mcp: var(--span-mcp);
+  --color-span-tool: var(--span-tool);
+  --color-span-provider: var(--span-provider);
+  --color-span-memory: var(--span-memory);
+  --color-span-workspace: var(--span-workspace);
+  --color-span-skill: var(--span-skill);
+  --color-span-scorer: var(--span-scorer);
+  --color-span-other: var(--span-other);
 }