fix(tokens): correct text-kumo-subtle dark mode value (#382)

Author: mattrothenberg

.changeset/fix-text-kumo-subtle-dark.md

@@ -0,0 +1,5 @@
+---
+"@cloudflare/kumo": patch
+---
+
+fix(tokens): correct text-kumo-subtle dark mode value to provide visible contrast

packages/kumo/scripts/theme-generator/config.ts

@@ -53,7 +53,7 @@ export const THEME_CONFIG: ThemeConfig = {
       theme: {
         kumo: {
           light: "var(--color-neutral-500, oklch(55.6% 0 0))",
-          dark: "var(--color-kumo-neutral-50, oklch(97.5% 0 0))",
+          dark: "var(--color-neutral-400, oklch(70.8% 0 0))",
         },
       },
     },
@@ -166,7 +166,8 @@ export const THEME_CONFIG: ThemeConfig = {
     },
     "kumo-badge-inverted": {
       newName: "",
-      description: "Text color for inverted badge (white in light, black in dark)",
+      description:
+        "Text color for inverted badge (white in light, black in dark)",
       theme: {
         kumo: {
           light: "var(--color-white, #fff)",
@@ -194,7 +195,7 @@ export const THEME_CONFIG: ThemeConfig = {
           dark: "#5b697c",
         },
       },
-    }, 
+    },
     "kumo-elevated": {
       newName: "",
       theme: {
@@ -554,7 +555,8 @@ export const THEME_CONFIG: ThemeConfig = {
     // Inverted
     "kumo-badge-inverted": {
       newName: "",
-      description: "Inverted badge background (near-black in light, white in dark)",
+      description:
+        "Inverted badge background (near-black in light, white in dark)",
       theme: {
         kumo: {
           light: "var(--color-neutral-950, oklch(14.5% 0 0))",

packages/kumo/src/styles/theme-kumo.css

@@ -25,7 +25,7 @@
 
   --text-color-kumo-subtle: light-dark(
     var(--color-neutral-500, oklch(55.6% 0 0)),
-    var(--color-kumo-neutral-50, oklch(97.5% 0 0))
+    var(--color-neutral-400, oklch(70.8% 0 0))
   );
 
   --text-color-kumo-inactive: light-dark(
@@ -351,7 +351,7 @@
     --text-color-kumo-default: var(--color-neutral-100, oklch(97% 0 0));
     --text-color-kumo-inverse: var(--color-neutral-900, oklch(20.5% 0 0));
     --text-color-kumo-strong: var(--color-neutral-400, oklch(70.8% 0 0));
-    --text-color-kumo-subtle: var(--color-kumo-neutral-50, oklch(97.5% 0 0));
+    --text-color-kumo-subtle: var(--color-neutral-400, oklch(70.8% 0 0));
     --text-color-kumo-inactive: var(--color-neutral-600, oklch(70.8% 0 0));
     --text-color-kumo-placeholder: var(--color-neutral-500, oklch(55.6% 0 0));
     --text-color-kumo-brand: #f6821f;