Add missing success background and tint color tokens (#43)

* fix Add success semantic color tokens

Add missing `success` semantic tokens and mappings for parity with info/warning/danger. Includes: a changeset, new CSS variables (`--color-kumo-success`, `--color-kumo-success-tint`), update to `--text-color-kumo-success` dark value (use green-400 for better contrast), theme-generator config entries for kumo-success and kumo-success-tint, Figma generator/ parser mappings, and update Meter demo to use the `kumo-success` utility classes.

* feat(badge): add success variant

Add new 'success' Badge variant for positive state indicators,
using the bg-kumo-success semantic color token.

---------

Co-authored-by: Kumo Bot <kumo-bot@cloudflare.com>

Author: threepointone

.changeset/add-success-color-tokens.md

@@ -0,0 +1,5 @@
+---
+"@cloudflare/kumo": patch
+---
+
+Add missing `success` background and tint semantic color tokens (`bg-kumo-success`, `bg-kumo-success-tint`) for parity with `info`, `warning`, and `danger`. Fix `text-kumo-success` dark mode contrast by using `green-400` instead of `green-500`. Add new `success` Badge variant for positive state indicators.

packages/kumo-docs-astro/src/components/demos/BadgeDemo.tsx

@@ -6,6 +6,7 @@ export function BadgeVariantsDemo() {
       <Badge variant="primary">Primary</Badge>
       <Badge variant="secondary">Secondary</Badge>
       <Badge variant="destructive">Destructive</Badge>
+      <Badge variant="success">Success</Badge>
       <Badge variant="outline">Outline</Badge>
       <Badge variant="beta">Beta</Badge>
     </div>
@@ -24,6 +25,10 @@ export function BadgeDestructiveDemo() {
   return <Badge variant="destructive">Destructive</Badge>;
 }
 
+export function BadgeSuccessDemo() {
+  return <Badge variant="success">Success</Badge>;
+}
+
 export function BadgeOutlineDemo() {
   return <Badge variant="outline">Outline</Badge>;
 }

packages/kumo-docs-astro/src/components/demos/MeterDemo.tsx

@@ -25,7 +25,7 @@ export function MeterCustomStyleDemo() {
     <Meter
       label="Upload progress"
       value={80}
-      indicatorClassName="from-green-500 via-green-500 to-green-500"
+      indicatorClassName="from-kumo-success via-kumo-success to-kumo-success"
     />
   );
 }

packages/kumo-figma/src/generators/shared.ts

@@ -63,6 +63,8 @@ export const VAR_NAMES = {
     warningTint: "color-kumo-warning-tint",
     danger: "color-kumo-danger",
     dangerTint: "color-kumo-danger-tint",
+    success: "color-kumo-success",
+    successTint: "color-kumo-success-tint",
     // Legacy aliases (for gradual migration from old naming convention)
     // Old: "color-{name}" → New: "color-kumo-{name}"
     surface: "color-kumo-base",

packages/kumo-figma/src/parsers/tailwind-to-figma.ts

@@ -97,6 +97,8 @@ const COLOR_TO_VARIABLE: Record<string, string> = {
   "bg-kumo-warning-tint": "color-kumo-warning-tint",
   "bg-kumo-danger": "color-kumo-danger",
   "bg-kumo-danger-tint": "color-kumo-danger-tint",
+  "bg-kumo-success": "color-kumo-success",
+  "bg-kumo-success-tint": "color-kumo-success-tint",
   "bg-transparent": null!, // No fill
   "bg-inherit": null!, // No fill
 
@@ -124,6 +126,7 @@ const COLOR_TO_VARIABLE: Record<string, string> = {
   "border-kumo-info": "color-kumo-info",
   "border-kumo-warning": "color-kumo-warning",
   "border-kumo-danger": "color-kumo-danger",
+  "border-kumo-success": "color-kumo-success",
   "ring-kumo-line": "color-kumo-line",
   "ring-kumo-ring": "color-kumo-ring",
   "ring-kumo-danger": "color-kumo-danger",

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

@@ -89,7 +89,7 @@ export const THEME_CONFIG: ThemeConfig = {
       theme: {
         kumo: {
           light: "var(--color-green-500, oklch(72.3% 0.219 149.579))",
-          dark: "var(--color-green-500, oklch(72.3% 0.219 149.579))",
+          dark: "var(--color-green-400, oklch(79.2% 0.209 151.711))",
         },
       },
     },
@@ -325,6 +325,24 @@ export const THEME_CONFIG: ThemeConfig = {
         },
       },
     },
+    "kumo-success": {
+      newName: "",
+      theme: {
+        kumo: {
+          light: "var(--color-green-500, oklch(72.3% 0.219 149.579))",
+          dark: "var(--color-green-700, oklch(52.7% 0.154 150.069))",
+        },
+      },
+    },
+    "kumo-success-tint": {
+      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))",
+        },
+      },
+    },
   },
 
   /**

packages/kumo/src/components/badge/badge.tsx

@@ -20,12 +20,17 @@ export const KUMO_BADGE_VARIANTS = {
       classes: "bg-kumo-danger text-white",
       description: "Error or danger state indicator",
     },
+    success: {
+      classes: "bg-kumo-success text-white",
+      description: "Success or positive state indicator",
+    },
     outline: {
       classes: "border border-kumo-fill bg-transparent text-kumo-default",
       description: "Bordered badge with transparent background",
     },
     beta: {
-      classes: "border border-dashed border-kumo-brand bg-transparent text-kumo-link",
+      classes:
+        "border border-dashed border-kumo-brand bg-transparent text-kumo-link",
       description: "Indicates beta or experimental features",
     },
   },

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

@@ -45,7 +45,7 @@
 
   --text-color-kumo-success: light-dark(
     var(--color-green-500, oklch(72.3% 0.219 149.579)),
-    var(--color-green-500, oklch(72.3% 0.219 149.579))
+    var(--color-green-400, oklch(79.2% 0.209 151.711))
   );
 
   --text-color-kumo-danger: light-dark(
@@ -171,6 +171,16 @@
     var(--color-red-900, oklch(39.6% 0.141 25.723))
   );
 
+  --color-kumo-success: light-dark(
+    var(--color-green-500, oklch(72.3% 0.219 149.579)),
+    var(--color-green-700, oklch(52.7% 0.154 150.069))
+  );
+
+  --color-kumo-success-tint: light-dark(
+    var(--color-green-300, oklch(87.1% 0.15 154.449)),
+    var(--color-green-900, oklch(39.3% 0.095 152.535))
+  );
+
 }
 
 @theme {