@cloudflare/kumo 2.3.0 → 2.4.0

package/dist/styles/theme-kumo.css

@@ -197,8 +197,8 @@
   );
 
   --color-kumo-info: light-dark(
-    var(--color-blue-300, oklch(80.9% 0.105 251.813)),
-    var(--color-blue-900, oklch(37.9% 0.146 265.522))
+    var(--color-blue-500, oklch(68.5% 0.169 237.323)),
+    var(--color-blue-400, oklch(70.7% 0.165 254.624))
   );
 
   --color-kumo-warning-tint: light-dark(
@@ -207,8 +207,8 @@
   );
 
   --color-kumo-warning: light-dark(
-    var(--color-yellow-300, oklch(90.5% 0.182 98.111)),
-    var(--color-yellow-900, oklch(42.1% 0.095 57.708))
+    var(--color-yellow-500, oklch(79.5% 0.184 86.047)),
+    var(--color-yellow-400, oklch(85.2% 0.199 91.936))
   );
 
   --color-kumo-danger-tint: light-dark(
@@ -218,7 +218,7 @@
 
   --color-kumo-danger: light-dark(
     var(--color-red-500, oklch(63.7% 0.237 25.331)),
-    var(--color-red-900, oklch(39.6% 0.141 25.723))
+    var(--color-red-400, oklch(70.4% 0.191 22.216))
   );
 
   --color-kumo-success-tint: light-dark(
@@ -227,8 +227,18 @@
   );
 
   --color-kumo-success: light-dark(
-    var(--color-green-300, oklch(87.1% 0.15 154.449)),
-    var(--color-green-900, oklch(39.3% 0.095 152.535))
+    var(--color-emerald-600, oklch(59.6% 0.145 163.225)),
+    var(--color-emerald-400, oklch(76.5% 0.177 163.223))
+  );
+
+  --color-kumo-banner-info: light-dark(
+    oklch(93.2% 0.032 255.585 / 0.7),
+    oklch(37.9% 0.146 265.522 / 0.5)
+  );
+
+  --color-kumo-banner-warning: light-dark(
+    var(--color-yellow-100, oklch(97.3% 0.071 103.193)),
+    oklch(55.4% 0.135 66.442 / 0.5)
   );
 
   --color-kumo-badge-red: light-dark(
@@ -241,31 +251,16 @@
     var(--color-orange-650, oklch(81.5% 0.197 76))
   );
 
-  --color-kumo-badge-orange-subtle: light-dark(
-    var(--color-orange-100, oklch(95.4% 0.038 75.164)),
-    var(--color-orange-900, oklch(40.8% 0.123 38.172))
-  );
-
   --color-kumo-badge-purple: light-dark(
     var(--color-purple-600, oklch(60% 0.118 184.704)),
     var(--color-purple-700, oklch(50.8% 0.118 165.612))
   );
 
-  --color-kumo-badge-green: light-dark(
-    var(--color-emerald-500, oklch(69.6% 0.17 162.48)),
-    var(--color-emerald-400, oklch(76.5% 0.177 163.223))
-  );
-
   --color-kumo-badge-teal: light-dark(
     var(--color-teal-650, oklch(54.9% 0.096 184.565)),
     var(--color-teal-700, oklch(51.1% 0.096 186.391))
   );
 
-  --color-kumo-badge-teal-subtle: light-dark(
-    var(--color-teal-100, oklch(95.3% 0.051 180.801)),
-    var(--color-teal-900, oklch(38.6% 0.063 188.416))
-  );
-
   --color-kumo-badge-blue: light-dark(
     var(--color-blue-600, oklch(54.6% 0.245 262.881)),
     var(--color-blue-700, oklch(48.8% 0.243 264.376))
@@ -334,20 +329,19 @@
     --color-kumo-tip-shadow: var(--color-gray-200, oklch(92.8% 0.006 264.531));
     --color-kumo-tip-stroke: transparent;
     --color-kumo-info-tint: var(--color-blue-100, oklch(93.2% 0.032 255.585));
-    --color-kumo-info: var(--color-blue-300, oklch(80.9% 0.105 251.813));
+    --color-kumo-info: var(--color-blue-500, oklch(68.5% 0.169 237.323));
     --color-kumo-warning-tint: var(--color-yellow-100, oklch(97.3% 0.071 103.193));
-    --color-kumo-warning: var(--color-yellow-300, oklch(90.5% 0.182 98.111));
+    --color-kumo-warning: var(--color-yellow-500, oklch(79.5% 0.184 86.047));
     --color-kumo-danger-tint: var(--color-red-100, oklch(93.6% 0.032 17.717));
     --color-kumo-danger: var(--color-red-500, oklch(63.7% 0.237 25.331));
     --color-kumo-success-tint: var(--color-emerald-100, oklch(95% 0.052 163.051));
-    --color-kumo-success: var(--color-green-300, oklch(87.1% 0.15 154.449));
+    --color-kumo-success: var(--color-emerald-600, oklch(59.6% 0.145 163.225));
+    --color-kumo-banner-info: oklch(93.2% 0.032 255.585 / 0.7);
+    --color-kumo-banner-warning: var(--color-yellow-100, oklch(97.3% 0.071 103.193));
     --color-kumo-badge-red: var(--color-red-600, oklch(57.7% 0.245 27.325));
     --color-kumo-badge-orange: var(--color-orange-650, oklch(81.5% 0.197 76));
-    --color-kumo-badge-orange-subtle: var(--color-orange-100, oklch(95.4% 0.038 75.164));
     --color-kumo-badge-purple: var(--color-purple-600, oklch(60% 0.118 184.704));
-    --color-kumo-badge-green: var(--color-emerald-500, oklch(69.6% 0.17 162.48));
     --color-kumo-badge-teal: var(--color-teal-650, oklch(54.9% 0.096 184.565));
-    --color-kumo-badge-teal-subtle: var(--color-teal-100, oklch(95.3% 0.051 180.801));
     --color-kumo-badge-blue: var(--color-blue-600, oklch(54.6% 0.245 262.881));
     --color-kumo-badge-neutral: var(--color-neutral-500, oklch(55.6% 0 0));
     --color-kumo-badge-inverted: var(--color-neutral-950, oklch(14.5% 0 0));
@@ -391,20 +385,19 @@
     --color-kumo-tip-shadow: transparent;
     --color-kumo-tip-stroke: var(--color-neutral-800, oklch(26.9% 0 0));
     --color-kumo-info-tint: var(--color-blue-900, oklch(37.9% 0.146 265.522));
-    --color-kumo-info: var(--color-blue-900, oklch(37.9% 0.146 265.522));
+    --color-kumo-info: var(--color-blue-400, oklch(70.7% 0.165 254.624));
     --color-kumo-warning-tint: var(--color-yellow-700, oklch(55.4% 0.135 66.442));
-    --color-kumo-warning: var(--color-yellow-900, oklch(42.1% 0.095 57.708));
+    --color-kumo-warning: var(--color-yellow-400, oklch(85.2% 0.199 91.936));
     --color-kumo-danger-tint: var(--color-red-900, oklch(39.6% 0.141 25.723));
-    --color-kumo-danger: var(--color-red-900, oklch(39.6% 0.141 25.723));
+    --color-kumo-danger: var(--color-red-400, oklch(70.4% 0.191 22.216));
     --color-kumo-success-tint: var(--color-emerald-900, oklch(37.8% 0.077 168.94));
-    --color-kumo-success: var(--color-green-900, oklch(39.3% 0.095 152.535));
+    --color-kumo-success: var(--color-emerald-400, oklch(76.5% 0.177 163.223));
+    --color-kumo-banner-info: oklch(37.9% 0.146 265.522 / 0.5);
+    --color-kumo-banner-warning: oklch(55.4% 0.135 66.442 / 0.5);
     --color-kumo-badge-red: var(--color-red-700, oklch(50.5% 0.213 27.518));
     --color-kumo-badge-orange: var(--color-orange-650, oklch(81.5% 0.197 76));
-    --color-kumo-badge-orange-subtle: var(--color-orange-900, oklch(40.8% 0.123 38.172));
     --color-kumo-badge-purple: var(--color-purple-700, oklch(50.8% 0.118 165.612));
-    --color-kumo-badge-green: var(--color-emerald-400, oklch(76.5% 0.177 163.223));
     --color-kumo-badge-teal: var(--color-teal-700, oklch(51.1% 0.096 186.391));
-    --color-kumo-badge-teal-subtle: var(--color-teal-900, oklch(38.6% 0.063 188.416));
     --color-kumo-badge-blue: var(--color-blue-700, oklch(48.8% 0.243 264.376));
     --color-kumo-badge-neutral: var(--color-neutral-600, oklch(43.9% 0 0));
     --color-kumo-badge-inverted: var(--color-white, #fff);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudflare/kumo",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "private": false,
   "type": "module",
   "description": "Kumo - Cloudflare's component library for building modern web applications",
@@ -434,6 +434,9 @@
   "peerDependenciesMeta": {
     "zod": {
       "optional": true
+    },
+    "echarts": {
+      "optional": true
     }
   },
   "dependencies": {

package/scripts/theme-generator/config.ts

@@ -389,10 +389,11 @@ export const THEME_CONFIG: ThemeConfig = {
     },
     "kumo-info": {
       newName: "",
+      // Aligned with fill.kumo-info so `bg-kumo-info` matches `fill-kumo-info`.
       theme: {
         kumo: {
-          light: "var(--color-blue-300, oklch(80.9% 0.105 251.813))",
-          dark: "var(--color-blue-900, oklch(37.9% 0.146 265.522))",
+          light: "var(--color-blue-500, oklch(68.5% 0.169 237.323))",
+          dark: "var(--color-blue-400, oklch(70.7% 0.165 254.624))",
         },
       },
     },
@@ -407,10 +408,11 @@ export const THEME_CONFIG: ThemeConfig = {
     },
     "kumo-warning": {
       newName: "",
+      // Aligned with fill.kumo-warning so `bg-kumo-warning` matches `fill-kumo-warning`.
       theme: {
         kumo: {
-          light: "var(--color-yellow-300, oklch(90.5% 0.182 98.111))",
-          dark: "var(--color-yellow-900, oklch(42.1% 0.095 57.708))",
+          light: "var(--color-yellow-500, oklch(79.5% 0.184 86.047))",
+          dark: "var(--color-yellow-400, oklch(85.2% 0.199 91.936))",
         },
       },
     },
@@ -425,10 +427,11 @@ export const THEME_CONFIG: ThemeConfig = {
     },
     "kumo-danger": {
       newName: "",
+      // Aligned with fill.kumo-danger so `bg-kumo-danger` matches `fill-kumo-danger`.
       theme: {
         kumo: {
           light: "var(--color-red-500, oklch(63.7% 0.237 25.331))",
-          dark: "var(--color-red-900, oklch(39.6% 0.141 25.723))",
+          dark: "var(--color-red-400, oklch(70.4% 0.191 22.216))",
         },
       },
     },
@@ -445,8 +448,34 @@ export const THEME_CONFIG: ThemeConfig = {
       newName: "",
       theme: {
         kumo: {
-          light: "var(--color-green-300, oklch(87.1% 0.15 154.449))",
-          dark: "var(--color-green-900, oklch(39.3% 0.095 152.535))",
+          light: "var(--color-emerald-600, oklch(59.6% 0.145 163.225))",
+          dark: "var(--color-emerald-400, oklch(76.5% 0.177 163.223))",
+        },
+      },
+    },
+
+    /*
+     * Banner background tokens
+     * Pre-baked opacity per mode so banners don't need dark: overrides.
+     * Mirrors the *-tint hues but tuned for the Banner component's surface contrast.
+     */
+    "kumo-banner-info": {
+      newName: "",
+      description: "Info banner background (informational/default variant)",
+      theme: {
+        kumo: {
+          light: "oklch(93.2% 0.032 255.585 / 0.7)",
+          dark: "oklch(37.9% 0.146 265.522 / 0.5)",
+        },
+      },
+    },
+    "kumo-banner-warning": {
+      newName: "",
+      description: "Warning banner background (alert variant)",
+      theme: {
+        kumo: {
+          light: "var(--color-yellow-100, oklch(97.3% 0.071 103.193))",
+          dark: "oklch(55.4% 0.135 66.442 / 0.5)",
         },
       },
     },
@@ -480,17 +509,8 @@ export const THEME_CONFIG: ThemeConfig = {
         },
       },
     },
-    "kumo-badge-orange-subtle": {
-      newName: "",
-      description: "Subtle orange badge background",
-      theme: {
-        kumo: {
-          light: "var(--color-orange-100, oklch(95.4% 0.038 75.164))",
-          dark: "var(--color-orange-900, oklch(40.8% 0.123 38.172))",
-        },
-      },
-    },
 
+    // Purple
     "kumo-badge-purple": {
       newName: "",
       description: "Purple badge background",
@@ -502,18 +522,6 @@ export const THEME_CONFIG: ThemeConfig = {
       },
     },
 
-    // Green (emerald scale)
-    "kumo-badge-green": {
-      newName: "",
-      description: "Green badge background",
-      theme: {
-        kumo: {
-          light: "var(--color-emerald-500, oklch(69.6% 0.17 162.48))",
-          dark: "var(--color-emerald-400, oklch(76.5% 0.177 163.223))",
-        },
-      },
-    },
-
     // Teal
     "kumo-badge-teal": {
       newName: "",
@@ -525,16 +533,6 @@ export const THEME_CONFIG: ThemeConfig = {
         },
       },
     },
-    "kumo-badge-teal-subtle": {
-      newName: "",
-      description: "Subtle teal badge background",
-      theme: {
-        kumo: {
-          light: "var(--color-teal-100, oklch(95.3% 0.051 180.801))",
-          dark: "var(--color-teal-900, oklch(38.6% 0.063 188.416))",
-        },
-      },
-    },
 
     // Blue
     "kumo-badge-blue": {

package/scripts/theme-generator/generate-css.ts

@@ -141,7 +141,10 @@ export function generateKumoThemeCSS(
   lines.push("}");
   lines.push("");
 
-  // Color tokens (bg, border, ring, etc.)
+  // Color tokens (bg, border, ring, fill, stroke, etc.)
+  // Tailwind v4 resolves every color-aware utility family against this
+  // single `--color-*` palette — including SVG `fill-*` and `stroke-*` —
+  // so one declaration here covers backgrounds, borders, and icon glyphs.
   lines.push("@theme {");
 
   for (const [tokenName, def] of Object.entries(config.color)) {

package/scripts/theme-generator/types.ts

@@ -32,7 +32,13 @@ export type TextTokens = {
   [tokenName: string]: TokenDefinition;
 };
 
-/** Color tokens (used with bg-*, border-*, ring-*, etc.) */
+/**
+ * Color tokens (used with bg-*, border-*, ring-*, fill-*, stroke-*, etc.)
+ *
+ * Tailwind v4 resolves all of these utility families against the shared
+ * `--color-*` palette, so a single entry here drives every CSS property
+ * that paints a color — including SVG `fill` / `stroke` for icons.
+ */
 export type ColorTokens = {
   [tokenName: string]: TokenDefinition;
 };
@@ -63,7 +69,7 @@ export type TypographyTokens = {
 export type ThemeConfig = {
   /** Text color tokens */
   text: TextTokens;
-  /** General color tokens (bg, border, ring, etc.) */
+  /** General color tokens (bg, border, ring, fill, stroke, etc.) */
   color: ColorTokens;
   /** Typography tokens (font sizes and line heights) */
   typography?: TypographyTokens;