Skip to content

Add missing success background and tint color tokens #43

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
stritt merged 2 commits into from
Feb 27, 2026
Merged

Add missing success background and tint color tokens #43

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
26eb9b5
fix Add success semantic color tokens
threepointone Feb 8, 2026
9a9cc51
feat(badge): add success variant
Feb 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/add-success-color-tokens.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
5 changes: 5 additions & 0 deletions packages/kumo-docs-astro/src/components/demos/BadgeDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/kumo-docs-astro/src/components/demos/MeterDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
/>
);
}
2 changes: 2 additions & 0 deletions packages/kumo-figma/src/generators/shared.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
3 changes: 3 additions & 0 deletions packages/kumo-figma/src/parsers/tailwind-to-figma.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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",
Expand Down
20 changes: 19 additions & 1 deletion packages/kumo/scripts/theme-generator/config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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))",
Copy link
Copy Markdown
Contributor Author

@threepointone threepointone Feb 8, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please note this specific change, reasoning in the pr description

},
},
},
Expand Down Expand Up @@ -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))",
},
},
},
},

/**
Expand Down
7 changes: 6 additions & 1 deletion packages/kumo/src/components/badge/badge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
},
},
Expand Down
12 changes: 11 additions & 1 deletion packages/kumo/src/styles/theme-kumo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down Expand Up @@ -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 {
Expand Down
Loading