From 6b2b776db9eb6d5746a536974361ed3b1468d69e Mon Sep 17 00:00:00 2001 From: balint Date: Wed, 5 Aug 2026 11:28:10 +0100 Subject: [PATCH 1/4] feat(kumo): deprecate kumo-hairline in favor of kumo-line Redefine kumo-line to use 10% black in light mode and 10% white in dark mode, unifying the two former border/ring tokens into a single semantic token. Add a backwards-compatibility alias so existing consumers using bg-kumo-hairline / border-kumo-hairline / ring-kumo-hairline etc. continue to render identically; the alias will be removed in the next major release. --- .changeset/deprecate-kumo-hairline.md | 9 ++ .../kumo/scripts/theme-generator/config.ts | 17 +-- packages/kumo/src/styles/kumo-binding.css | 7 + packages/kumo/src/styles/theme-fedramp.css | 20 +-- packages/kumo/src/styles/theme-kumo.css | 132 ++++++------------ 5 files changed, 69 insertions(+), 116 deletions(-) create mode 100644 .changeset/deprecate-kumo-hairline.md diff --git a/.changeset/deprecate-kumo-hairline.md b/.changeset/deprecate-kumo-hairline.md new file mode 100644 index 0000000000..1d96bbe047 --- /dev/null +++ b/.changeset/deprecate-kumo-hairline.md @@ -0,0 +1,9 @@ +--- +"@cloudflare/kumo": minor +--- + +Deprecate `kumo-hairline` token in favor of `kumo-line`. + +The `kumo-line` token has been redefined to use 10% black in light mode and 10% white in dark mode, unifying the two former border/ring tokens into a single semantic token. All internal usage has been migrated from `kumo-hairline` to `kumo-line`. + +For backwards compatibility, `--color-kumo-hairline` is kept as a CSS alias for `--color-kumo-line`. Existing consumers using `bg-kumo-hairline`, `border-kumo-hairline`, `ring-kumo-hairline`, etc. will continue to work but should migrate to the `kumo-line` equivalents. The alias will be removed in the next major release. diff --git a/packages/kumo/scripts/theme-generator/config.ts b/packages/kumo/scripts/theme-generator/config.ts index 947f803a79..f09561ba38 100644 --- a/packages/kumo/scripts/theme-generator/config.ts +++ b/packages/kumo/scripts/theme-generator/config.ts @@ -313,21 +313,8 @@ export const THEME_CONFIG: ThemeConfig = { newName: "", theme: { kumo: { - light: "oklch(14.5% 0 0 / 0.1)", - dark: "var(--color-kumo-neutral-750, oklch(32% 0 0))", - }, - }, - }, - "kumo-hairline": { - newName: "", - theme: { - kumo: { - light: "var(--color-kumo-neutral-150, oklch(93.5% 0 0))", - dark: "var(--color-neutral-800, oklch(26.9% 0 0))", - }, - fedramp: { - light: "#c8d4e5", - dark: "#c8d4e5", + light: "rgb(0 0 0 / 0.1)", + dark: "rgb(255 255 255 / 0.1)", }, }, }, diff --git a/packages/kumo/src/styles/kumo-binding.css b/packages/kumo/src/styles/kumo-binding.css index 89234acd42..ef7f84e737 100644 --- a/packages/kumo/src/styles/kumo-binding.css +++ b/packages/kumo/src/styles/kumo-binding.css @@ -22,6 +22,13 @@ --color-kumo-neutral-950: oklch(15% 0 0); --color-kumo-neutral-975: oklch(12% 0 0); --color-kumo-neutral-1000: oklch(10% 0 0); + + /** + * @deprecated `kumo-hairline` is deprecated. Use `kumo-line` instead. + * This alias keeps existing consumers working; it will be removed in the + * next major release. + */ + --color-kumo-hairline: var(--color-kumo-line); } /* Typography is now generated in theme-kumo.css via codegen:themes */ diff --git a/packages/kumo/src/styles/theme-fedramp.css b/packages/kumo/src/styles/theme-fedramp.css index 588574c08d..773830baa4 100644 --- a/packages/kumo/src/styles/theme-fedramp.css +++ b/packages/kumo/src/styles/theme-fedramp.css @@ -6,11 +6,17 @@ * Then run: pnpm codegen:themes */ + @layer base { [data-theme="fedramp"] { - --color-kumo-canvas: light-dark(#5b697c, #5b697c); - --color-kumo-base: light-dark(#5b697c, #5b697c); - --color-kumo-hairline: light-dark(#c8d4e5, #c8d4e5); + --color-kumo-canvas: light-dark( + #5b697c, + #5b697c + ); + --color-kumo-base: light-dark( + #5b697c, + #5b697c + ); } } @@ -18,14 +24,10 @@ [data-theme="fedramp"] { --color-kumo-canvas: #5b697c; --color-kumo-base: #5b697c; - --color-kumo-hairline: #c8d4e5; } - - [data-mode="dark"] [data-theme="fedramp"], - [data-theme="fedramp"][data-mode="dark"], - [data-theme="fedramp"] [data-mode="dark"] { + + [data-mode="dark"] [data-theme="fedramp"], [data-theme="fedramp"][data-mode="dark"], [data-theme="fedramp"] [data-mode="dark"] { --color-kumo-canvas: #5b697c; --color-kumo-base: #5b697c; - --color-kumo-hairline: #c8d4e5; } } diff --git a/packages/kumo/src/styles/theme-kumo.css b/packages/kumo/src/styles/theme-kumo.css index 356e3daf6b..4590fc3134 100644 --- a/packages/kumo/src/styles/theme-kumo.css +++ b/packages/kumo/src/styles/theme-kumo.css @@ -6,6 +6,7 @@ * Then run: pnpm codegen:themes */ + @theme { --text-color-kumo-default: light-dark( var(--color-neutral-900, oklch(21% 0.006 285.885)), @@ -37,7 +38,10 @@ var(--color-neutral-500, oklch(55.6% 0 0)) ); - --text-color-kumo-brand: light-dark(#f6821f, #f6821f); + --text-color-kumo-brand: light-dark( + #f6821f, + #f6821f + ); --text-color-kumo-link: light-dark( var(--color-blue-800, oklch(42.4% 0.199 265.638)), @@ -83,6 +87,7 @@ var(--color-white, #fff), var(--color-black, #000) ); + } @theme { @@ -152,13 +157,8 @@ ); --color-kumo-line: light-dark( - oklch(14.5% 0 0 / 0.1), - var(--color-kumo-neutral-750, oklch(32% 0 0)) - ); - - --color-kumo-hairline: light-dark( - var(--color-kumo-neutral-150, oklch(93.5% 0 0)), - var(--color-neutral-800, oklch(26.9% 0 0)) + rgb(0 0 0 / 0.1), + rgb(255 255 255 / 0.1) ); --color-kumo-focus: light-dark( @@ -188,7 +188,7 @@ --color-kumo-info-tint: light-dark( oklch(93.2% 0.032 255.6 / 0.45), - oklch(38% 0.145 265.5 / 0.22) + oklch(38.0% 0.145 265.5 / 0.22) ); --color-kumo-info: light-dark( @@ -197,13 +197,13 @@ ); --color-kumo-warning-tint: light-dark( - oklch(93.1% 0.107 94.6 / 0.2), - oklch(35.3% 0.079 65 / 0.37) + oklch(93.1% 0.107 94.6 / 0.20), + oklch(35.3% 0.079 65.0 / 0.37) ); --color-kumo-warning: light-dark( oklch(73.9% 0.177 58.2), - oklch(64.5% 0.168 50) + oklch(64.5% 0.168 50.0) ); --color-kumo-danger-tint: light-dark( @@ -218,7 +218,7 @@ --color-kumo-success-tint: light-dark( oklch(96.2% 0.043 156.7 / 0.57), - oklch(39.3% 0.096 152.3 / 0.2) + oklch(39.3% 0.096 152.3 / 0.20) ); --color-kumo-success: light-dark( @@ -275,6 +275,7 @@ var(--color-neutral-950, oklch(14.5% 0 0)), var(--color-white, #fff) ); + } @theme { @@ -290,12 +291,8 @@ } @layer base { - :root, - [data-theme="kumo"] { - --text-color-kumo-default: var( - --color-neutral-900, - oklch(21% 0.006 285.885) - ); + :root, [data-theme="kumo"] { + --text-color-kumo-default: var(--color-neutral-900, oklch(21% 0.006 285.885)); --text-color-kumo-inverse: var(--color-neutral-100, oklch(97% 0 0)); --text-color-kumo-strong: var(--color-neutral-950, oklch(14.5% 0 0)); --text-color-kumo-subtle: var(--color-neutral-500, oklch(55.6% 0 0)); @@ -304,24 +301,12 @@ --text-color-kumo-brand: #f6821f; --text-color-kumo-link: var(--color-blue-800, oklch(42.4% 0.199 265.638)); --text-color-kumo-info: var(--color-blue-800, oklch(42.4% 0.199 265.638)); - --text-color-kumo-success: var( - --color-emerald-800, - oklch(43.2% 0.095 166.913) - ); + --text-color-kumo-success: var(--color-emerald-800, oklch(43.2% 0.095 166.913)); --text-color-kumo-danger: var(--color-red-700, oklch(50.5% 0.213 27.518)); --text-color-kumo-warning: oklch(59.7% 0.144 57.5); - --text-color-kumo-badge-orange-subtle: var( - --color-orange-800, - oklch(47% 0.157 37.304) - ); - --text-color-kumo-badge-teal-subtle: var( - --color-teal-800, - oklch(43.7% 0.078 188.216) - ); - --text-color-kumo-badge-neutral-subtle: var( - --color-neutral-800, - oklch(26.9% 0 0) - ); + --text-color-kumo-badge-orange-subtle: var(--color-orange-800, oklch(47% 0.157 37.304)); + --text-color-kumo-badge-teal-subtle: var(--color-teal-800, oklch(43.7% 0.078 188.216)); + --text-color-kumo-badge-neutral-subtle: var(--color-neutral-800, oklch(26.9% 0 0)); --text-color-kumo-badge-inverted: var(--color-white, #fff); --color-kumo-canvas: var(--color-kumo-neutral-25, oklch(98.75% 0 0)); --color-kumo-elevated: var(--color-kumo-neutral-75, oklch(98% 0 0)); @@ -336,8 +321,7 @@ --color-kumo-fill-hover: var(--color-kumo-neutral-125, oklch(96.5% 0 0)); --color-kumo-brand: oklch(0.5772 0.2324 260); --color-kumo-brand-hover: var(--color-blue-700, oklch(48.8% 0.243 264.376)); - --color-kumo-line: oklch(14.5% 0 0 / 0.1); - --color-kumo-hairline: var(--color-kumo-neutral-150, oklch(93.5% 0 0)); + --color-kumo-line: rgb(0 0 0 / 0.1); --color-kumo-focus: var(--color-kumo-neutral-950, oklch(15% 0 0)); --color-kumo-shadow-edge: oklch(0% 0 0 / 0.12); --color-kumo-shadow-drop: oklch(0% 0 0 / 0.08); @@ -345,38 +329,25 @@ --color-kumo-tip-stroke: transparent; --color-kumo-info-tint: oklch(93.2% 0.032 255.6 / 0.45); --color-kumo-info: var(--color-blue-500, oklch(68.5% 0.169 237.323)); - --color-kumo-warning-tint: oklch(93.1% 0.107 94.6 / 0.2); + --color-kumo-warning-tint: oklch(93.1% 0.107 94.6 / 0.20); --color-kumo-warning: oklch(73.9% 0.177 58.2); --color-kumo-danger-tint: oklch(93.6% 0.032 17.7 / 0.42); --color-kumo-danger: var(--color-red-500, oklch(63.7% 0.237 25.331)); --color-kumo-success-tint: oklch(96.2% 0.043 156.7 / 0.57); --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-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-green: var( - --color-emerald-600, - oklch(59.6% 0.145 163.225) - ); + --color-kumo-badge-green: var(--color-emerald-600, oklch(59.6% 0.145 163.225)); --color-kumo-badge-orange: var(--color-orange-650, oklch(81.5% 0.197 76)); - --color-kumo-badge-purple: var( - --color-purple-600, - oklch(55.8% 0.288 302.321) - ); + --color-kumo-badge-purple: var(--color-purple-600, oklch(55.8% 0.288 302.321)); --color-kumo-badge-teal: var(--color-teal-650, oklch(54.9% 0.096 184.565)); --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)); } - - :root[data-mode="dark"], - [data-mode="dark"]:not([data-theme]), - [data-mode="dark"] [data-theme="kumo"], - [data-theme="kumo"][data-mode="dark"], - [data-theme="kumo"] [data-mode="dark"] { + + :root[data-mode="dark"], [data-mode="dark"]:not([data-theme]), [data-mode="dark"] [data-theme="kumo"], [data-theme="kumo"][data-mode="dark"], [data-theme="kumo"] [data-mode="dark"] { --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-50, oklch(98.5% 0 0)); @@ -386,24 +357,12 @@ --text-color-kumo-brand: #f6821f; --text-color-kumo-link: var(--color-blue-400, oklch(70.7% 0.165 254.624)); --text-color-kumo-info: var(--color-blue-400, oklch(70.7% 0.165 254.624)); - --text-color-kumo-success: var( - --color-emerald-200, - oklch(90.5% 0.093 164.15) - ); + --text-color-kumo-success: var(--color-emerald-200, oklch(90.5% 0.093 164.15)); --text-color-kumo-danger: var(--color-red-400, oklch(70.4% 0.191 22.216)); --text-color-kumo-warning: var(--color-orange-400, oklch(75% 0.183 55.934)); - --text-color-kumo-badge-orange-subtle: var( - --color-orange-200, - oklch(90.1% 0.076 70.697) - ); - --text-color-kumo-badge-teal-subtle: var( - --color-teal-200, - oklch(91% 0.096 180.426) - ); - --text-color-kumo-badge-neutral-subtle: var( - --color-neutral-200, - oklch(92.2% 0 0) - ); + --text-color-kumo-badge-orange-subtle: var(--color-orange-200, oklch(90.1% 0.076 70.697)); + --text-color-kumo-badge-teal-subtle: var(--color-teal-200, oklch(91% 0.096 180.426)); + --text-color-kumo-badge-neutral-subtle: var(--color-neutral-200, oklch(92.2% 0 0)); --text-color-kumo-badge-inverted: var(--color-black, #000); --color-kumo-canvas: var(--color-kumo-neutral-1000, oklch(10% 0 0)); --color-kumo-elevated: var(--color-kumo-neutral-975, oklch(12% 0 0)); @@ -416,42 +375,31 @@ --color-kumo-interact: var(--color-neutral-700, oklch(37.1% 0 0)); --color-kumo-fill: var(--color-neutral-800, oklch(26.9% 0 0)); --color-kumo-fill-hover: var(--color-neutral-800, oklch(37.1% 0 0)); - --color-kumo-brand: color-mix( - in oklch, - oklch(0.5772 0.2324 260), - black 10% - ); + --color-kumo-brand: color-mix(in oklch, oklch(0.5772 0.2324 260), black 10%); --color-kumo-brand-hover: var(--color-blue-700, oklch(48.8% 0.243 264.376)); - --color-kumo-line: var(--color-kumo-neutral-750, oklch(32% 0 0)); - --color-kumo-hairline: var(--color-neutral-800, oklch(26.9% 0 0)); + --color-kumo-line: rgb(255 255 255 / 0.1); --color-kumo-focus: var(--color-kumo-neutral-150, oklch(93.5% 0 0)); --color-kumo-shadow-edge: oklch(100% 0 0 / 0.1); --color-kumo-shadow-drop: oklch(0% 0 0 / 0.3); --color-kumo-tip-shadow: transparent; --color-kumo-tip-stroke: var(--color-neutral-800, oklch(26.9% 0 0)); - --color-kumo-info-tint: oklch(38% 0.145 265.5 / 0.22); + --color-kumo-info-tint: oklch(38.0% 0.145 265.5 / 0.22); --color-kumo-info: var(--color-blue-500, oklch(68.5% 0.169 237.323)); - --color-kumo-warning-tint: oklch(35.3% 0.079 65 / 0.37); - --color-kumo-warning: oklch(64.5% 0.168 50); + --color-kumo-warning-tint: oklch(35.3% 0.079 65.0 / 0.37); + --color-kumo-warning: oklch(64.5% 0.168 50.0); --color-kumo-danger-tint: oklch(42.9% 0.176 28.7 / 0.17); --color-kumo-danger: var(--color-red-600, oklch(57.7% 0.245 27.325)); - --color-kumo-success-tint: oklch(39.3% 0.096 152.3 / 0.2); + --color-kumo-success-tint: oklch(39.3% 0.096 152.3 / 0.20); --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-green: var( - --color-emerald-700, - oklch(50.8% 0.118 165.612) - ); + --color-kumo-badge-green: var(--color-emerald-700, oklch(50.8% 0.118 165.612)); --color-kumo-badge-orange: var(--color-orange-650, oklch(81.5% 0.197 76)); - --color-kumo-badge-purple: var( - --color-purple-700, - oklch(49.6% 0.265 301.924) - ); + --color-kumo-badge-purple: var(--color-purple-700, oklch(49.6% 0.265 301.924)); --color-kumo-badge-teal: var(--color-teal-700, oklch(51.1% 0.096 186.391)); --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); } -} +} \ No newline at end of file From 8e623fc8a1712ad123f829a3f123419dc24db23a Mon Sep 17 00:00:00 2001 From: balint Date: Wed, 5 Aug 2026 11:28:22 +0100 Subject: [PATCH 2/4] docs: update token references from kumo-hairline to kumo-line Update AGENTS.md examples, USAGE.md token reference, colors.mdx token table, and lint rule comments to reflect the deprecation. Merge the two former Borders & Rings rows (hairline + line) into a single line entry describing the new semantics. --- AGENTS.md | 2 +- lint/no-primitive-colors.js | 2 +- packages/kumo-docs-astro/src/pages/colors.mdx | 10 +++------- packages/kumo/ai/USAGE.md | 7 +++---- packages/kumo/lint/no-primitive-colors.js | 2 +- packages/kumo/src/components/AGENTS.md | 2 +- 6 files changed, 10 insertions(+), 15 deletions(-) diff --git a/AGENTS.md b/AGENTS.md index 084438bbd7..646009d6e0 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -39,7 +39,7 @@ kumo/ ### Styling (CRITICAL) -- **ONLY semantic tokens**: `bg-kumo-base`, `text-kumo-default`, `border-kumo-line`, `ring-kumo-hairline` +- **ONLY semantic tokens**: `bg-kumo-base`, `text-kumo-default`, `border-kumo-line`, `ring-kumo-line` - **NEVER raw Tailwind colors**: `bg-blue-500`, `text-gray-900` → fails lint - **NEVER `dark:` variant**: dark mode automatic via `light-dark()` in CSS custom properties - **Exceptions**: `bg-white`, `bg-black`, `text-white`, `text-black`, `transparent` diff --git a/lint/no-primitive-colors.js b/lint/no-primitive-colors.js index 1bb1a180c6..372417c841 100644 --- a/lint/no-primitive-colors.js +++ b/lint/no-primitive-colors.js @@ -11,7 +11,7 @@ const INVALID_TOKEN_RULE = "invalid-color-token"; // We want to enforce use of Kumo semantic color tokens `--color-kumo-*`. // Any Tailwind color utility (e.g. `bg-blue-500`) or legacy semantic -// utility (e.g. `bg-kumo-hairline`, `text-kumo-default`) in class strings should be +// utility (e.g. `bg-kumo-line`, `text-kumo-default`) in class strings should be // replaced by semantic tokens / component APIs. // Matches Tailwind-like color utilities in class strings. diff --git a/packages/kumo-docs-astro/src/pages/colors.mdx b/packages/kumo-docs-astro/src/pages/colors.mdx index 87f7e63115..591737dec8 100644 --- a/packages/kumo-docs-astro/src/pages/colors.mdx +++ b/packages/kumo-docs-astro/src/pages/colors.mdx @@ -19,7 +19,7 @@ Always use semantic tokens instead of raw Tailwind colors. This ensures your UI #### Correct ```tsx -
+
@@ -328,14 +328,10 @@ Use the solid token `bg-kumo-*` for status dots, `fill-kumo-*` for icons, and `b - kumo-hairline + kumo-line - A border/ring color to distinguish between flat surfaces where no shadow is present (i.e. LayerCard). - - - kumo-line - A thicker border/ring color that defines the edge of an elevated surface alongside a shadow. + Border/ring color for all surface edges (10% black in light mode, 10% white in dark mode). Use for both flat surfaces (e.g. LayerCard) and elevated surfaces alongside a shadow. diff --git a/packages/kumo/ai/USAGE.md b/packages/kumo/ai/USAGE.md index c5f32da522..783455188f 100644 --- a/packages/kumo/ai/USAGE.md +++ b/packages/kumo/ai/USAGE.md @@ -120,10 +120,9 @@ Use the solid token on icons, status dots, and progress fills. Banners and badge ### Borders & Rings -| Token | Purpose | -| --------------- | ------------------------------------------------------------------------------------------------------- | -| `kumo-hairline` | A border/ring color to distinguish between flat surfaces where no shadow is present (i.e. `LayerCard`). | -| `kumo-line` | A thicker border/ring color that defines the edge of an elevated surface alongside a shadow. | +| Token | Purpose | +| ----------- | -------------------------------------------------------------------------------------------------------------------- | +| `kumo-line` | Border/ring color for all surface edges (10% black in light mode, 10% white in dark mode). Use for both flat surfaces (e.g. `LayerCard`) and elevated surfaces alongside a shadow. | ## Icons diff --git a/packages/kumo/lint/no-primitive-colors.js b/packages/kumo/lint/no-primitive-colors.js index 82d846826f..b7f849ddb0 100644 --- a/packages/kumo/lint/no-primitive-colors.js +++ b/packages/kumo/lint/no-primitive-colors.js @@ -11,7 +11,7 @@ const INVALID_TOKEN_RULE = "invalid-color-token"; // We want to enforce use of Kumo semantic color tokens `--color-kumo-*`. // Any Tailwind color utility (e.g. `bg-blue-500`) or legacy semantic -// utility (e.g. `bg-kumo-hairline`, `text-kumo-default`) in class strings should be +// utility (e.g. `bg-kumo-line`, `text-kumo-default`) in class strings should be // replaced by semantic tokens / component APIs. // Matches Tailwind-like color utilities in class strings. diff --git a/packages/kumo/src/components/AGENTS.md b/packages/kumo/src/components/AGENTS.md index e7e8f59405..5d4cb4f108 100644 --- a/packages/kumo/src/components/AGENTS.md +++ b/packages/kumo/src/components/AGENTS.md @@ -154,7 +154,7 @@ className="base-classes" Tailwind state prefixes are extractable: ```typescript -classes: "bg-kumo-elevated hover:bg-kumo-base focus:ring-kumo-hairline disabled:opacity-50"; +classes: "bg-kumo-elevated hover:bg-kumo-base focus:ring-kumo-line disabled:opacity-50"; // Parsed into: { default, hover, focus, disabled } state map ``` From b285685a4ebf01300067fa998ce6d265cfaf3fa8 Mon Sep 17 00:00:00 2001 From: balint Date: Wed, 5 Aug 2026 11:28:43 +0100 Subject: [PATCH 3/4] refactor: migrate all kumo-hairline usages to kumo-line Sweep every internal usage of bg-kumo-hairline / border-kumo-hairline / ring-kumo-hairline / divide-kumo-hairline etc. across kumo components, registry metadata, kumo-figma parsers and generators, and the docs site (demos, layouts, mdx pages, global.css) over to kumo-line. Also fix a pre-existing duplicate --color-kumo-hairline declaration in KumoPressDemo.tsx (collapsed to a single --color-kumo-line) and reword a JSDoc comment in SidebarDemo.tsx to avoid the deprecated term. Existing external consumers are unaffected thanks to the compatibility alias added when the token was deprecated. --- .../src/components/Header.astro | 4 +-- .../src/components/SearchDialog.tsx | 10 +++--- .../src/components/SidebarNav.tsx | 18 +++++----- .../components/demos/Chart/ChartCard.astro | 6 ++-- .../src/components/demos/Chart/ChartDemo.tsx | 8 ++--- .../components/demos/CloudflareLogoDemo.tsx | 2 +- .../components/demos/CodeHighlightedDemo.tsx | 2 +- .../components/demos/CommandPaletteDemo.tsx | 8 ++--- .../src/components/demos/DatePickerDemo.tsx | 2 +- .../src/components/demos/DialogDemo.tsx | 2 +- .../src/components/demos/FlowDemo.tsx | 16 ++++----- .../src/components/demos/HomeGrid.tsx | 2 +- .../src/components/demos/KumoPressDemo.tsx | 7 ++-- .../demos/LayerCardFilterMockupDemo.tsx | 2 +- .../src/components/demos/PopoverDemo.tsx | 6 ++-- .../src/components/demos/RegistryDemo.tsx | 10 +++--- .../src/components/demos/SidebarDemo.tsx | 2 +- .../src/components/demos/SkeletonLineDemo.tsx | 2 +- .../components/demos/TableOfContentsDemo.tsx | 2 +- .../src/components/demos/TextDemo.tsx | 30 ++++++++-------- .../components/docs/ComponentPreview.astro | 2 +- .../components/docs/KeyboardShortcuts.astro | 2 +- .../src/components/docs/PropsTable.astro | 4 +-- .../src/components/docs/StickyDocHeader.tsx | 4 +-- .../kumo/page-header/page-header.tsx | 4 +-- .../src/layouts/DocLayout.astro | 8 ++--- .../src/pages/blocks/page-header.mdx | 6 ++-- .../src/pages/blocks/resource-list.mdx | 16 ++++----- .../src/pages/changelog/[...page].astro | 2 +- .../src/pages/components/cloudflare-logo.mdx | 10 +++--- .../src/pages/components/code-highlighted.mdx | 36 +++++++++---------- .../src/pages/components/dialog.mdx | 8 ++--- .../src/pages/components/flow.mdx | 36 +++++++++---------- .../src/pages/components/grid.mdx | 20 +++++------ .../src/pages/components/input-group.mdx | 4 +-- .../src/pages/components/input.mdx | 18 +++++----- .../src/pages/components/label.mdx | 18 +++++----- .../src/pages/components/link.mdx | 22 ++++++------ .../src/pages/components/popover.mdx | 4 +-- .../src/pages/components/skeleton-line.mdx | 18 +++++----- .../src/pages/components/tabs.mdx | 8 ++--- .../src/pages/components/toast.mdx | 14 ++++---- .../kumo-docs-astro/src/pages/index.astro | 2 +- .../src/pages/tests/flow.astro | 30 ++++++++-------- .../kumo-docs-astro/src/pages/tests/map.astro | 6 ++-- .../src/pages/tests/select.astro | 24 ++++++------- .../src/pages/tests/timeseries.astro | 10 +++--- .../kumo-docs-astro/src/styles/global.css | 28 +++++++-------- packages/kumo-figma/src/generators/button.ts | 4 +-- packages/kumo-figma/src/generators/shared.ts | 2 +- .../src/parsers/tailwind-to-figma.test.ts | 14 ++++---- .../src/parsers/tailwind-to-figma.ts | 5 +-- .../scripts/component-registry/index.test.ts | 8 ++--- .../scripts/component-registry/metadata.ts | 6 ++-- packages/kumo/src/components/badge/badge.tsx | 2 +- .../kumo/src/components/checkbox/checkbox.tsx | 10 +++--- .../cloudflare-logo/cloudflare-logo.tsx | 2 +- .../kumo/src/components/combobox/combobox.tsx | 4 +-- .../command-palette/command-palette.tsx | 2 +- .../kumo/src/components/dropdown/dropdown.tsx | 2 +- packages/kumo/src/components/flow/diagram.tsx | 4 +-- .../src/components/flow/flow.browser.test.tsx | 4 +-- .../kumo/src/components/flow/flow.test.tsx | 2 +- packages/kumo/src/components/grid/grid.tsx | 2 +- .../src/components/layer-card/layer-card.tsx | 2 +- .../src/components/pagination/pagination.tsx | 4 +-- packages/kumo/src/components/radio/radio.tsx | 10 +++--- .../src/components/select/select.test.tsx | 2 +- .../kumo/src/components/select/select.tsx | 2 +- .../kumo/src/components/sidebar/sidebar.tsx | 2 +- .../kumo/src/components/switch/switch.tsx | 4 +-- .../table-of-contents/table-of-contents.tsx | 4 +-- packages/kumo/src/components/table/table.tsx | 2 +- packages/kumo/src/components/tabs/tabs.tsx | 4 +-- packages/kumo/src/components/toast/toast.tsx | 2 +- 75 files changed, 306 insertions(+), 310 deletions(-) diff --git a/packages/kumo-docs-astro/src/components/Header.astro b/packages/kumo-docs-astro/src/components/Header.astro index 8da1ec2971..07cbd05460 100644 --- a/packages/kumo-docs-astro/src/components/Header.astro +++ b/packages/kumo-docs-astro/src/components/Header.astro @@ -8,10 +8,10 @@ const kumoVersion = ---