From 7113f434789eb0a52231f35ce37b75e53ba7e618 Mon Sep 17 00:00:00 2001 From: Alex Grozav Date: Sat, 4 Apr 2026 23:28:27 +0700 Subject: [PATCH 1/2] refactor: rename danger semantic color to error Renames the `danger` color token to `error` across the entire codebase including theme values, recipes, tests, documentation, storybook stories, playground, and AGENTS.md files. Pure rename with no logic or behavior changes. --- .claude/styleframe-patterns.md | 8 +-- .claude/styleframe-recipe-prompt.md | 16 ++--- .claude/styleframe-recipes.md | 2 +- AGENTS.md | 2 +- .../content/docs/02.api/12.composables.md | 4 +- ...reate-design-system-in-under-15-minutes.md | 8 +-- .../docs/05.design-tokens/01.presets.md | 6 +- .../02.composables/01.borders.md | 32 +++++----- .../02.composables/02.box-shadows.md | 14 ++--- .../02.composables/04.colors.md | 18 +++--- .../06.components/02.composables/01.badge.md | 18 +++--- .../06.components/02.composables/02.button.md | 16 ++--- .../02.composables/03.button-group.md | 2 +- .../02.composables/04.callout.md | 16 ++--- .../06.components/02.composables/05.card.md | 2 +- .../02.composables/02.form-state.md | 18 +++--- apps/storybook/AGENTS.md | 2 +- .../src/components/components/badge/Badge.vue | 2 +- .../components/badge/preview/BadgeGrid.vue | 2 +- .../badge/preview/BadgeSizeGrid.vue | 2 +- .../preview/ButtonGroupSizeGrid.vue | 2 +- .../preview/ButtonGroupVariantGrid.vue | 2 +- .../components/components/button/Button.vue | 2 +- .../components/button/preview/ButtonGrid.vue | 2 +- .../button/preview/ButtonSizeGrid.vue | 2 +- .../components/components/callout/Callout.vue | 2 +- .../callout/preview/CalloutGrid.vue | 2 +- .../callout/preview/CalloutSizeGrid.vue | 2 +- .../borders/BorderColorSwatch.styleframe.ts | 6 +- .../colors/ColorLevelSwatch.styleframe.ts | 46 +++++++------- .../colors/ColorSwatch.styleframe.ts | 60 +++++++++---------- .../design-tokens/colors/ColorSwatch.vue | 4 +- .../stories/components/badge.stories.ts | 8 +-- .../components/button-group.stories.ts | 8 +-- .../stories/components/button.stories.ts | 8 +-- .../stories/components/callout.stories.ts | 10 ++-- .../design-tokens/color-level.stories.ts | 6 +- .../design-tokens/color-shade.stories.ts | 6 +- .../design-tokens/color-tint.stories.ts | 6 +- .../stories/design-tokens/color.stories.ts | 6 +- engine/core/src/tokens/utility.test.ts | 8 +-- .../transpiler/src/consume/css/root.test.ts | 16 ++--- .../src/fixtures/src/pages/RecipesPage.vue | 6 +- testing/integration/tests/recipes.spec.ts | 6 +- theme/AGENTS.md | 6 +- .../src/presets/useDesignTokensPreset.test.ts | 16 ++--- theme/src/recipes/badge/useBadgeRecipe.ts | 4 +- theme/src/recipes/button/useButtonRecipe.ts | 4 +- .../recipes/callout/useCalloutRecipe.test.ts | 22 +++---- theme/src/recipes/callout/useCalloutRecipe.ts | 4 +- theme/src/utils/createUseRecipe.test.ts | 29 ++++----- theme/src/utils/createUseVariable.test.ts | 14 ++--- theme/src/values/borderColor.ts | 2 +- theme/src/values/color.ts | 4 +- .../useBorderColorDesignTokens.test.ts | 8 +-- tooling/plugin/playground/src/App.vue | 12 ++-- .../theme/components/badge.styleframe.ts | 10 ++-- .../theme/components/button.styleframe.ts | 16 ++--- .../theme/components/callout.styleframe.ts | 8 +-- .../theme/components/input.styleframe.ts | 4 +- tooling/plugin/playground/tokens.json | 40 ++++++------- 61 files changed, 308 insertions(+), 311 deletions(-) diff --git a/.claude/styleframe-patterns.md b/.claude/styleframe-patterns.md index 299c83f5..12e9ece5 100644 --- a/.claude/styleframe-patterns.md +++ b/.claude/styleframe-patterns.md @@ -15,10 +15,10 @@ export function useColorVariables(s: Styleframe) { const colorPrimary = variable('color.primary', '#006cff', { default: true }); const colorSecondary = variable('color.secondary', '#6c757d', { default: true }); const colorSuccess = variable('color.success', '#28a745', { default: true }); - const colorDanger = variable('color.danger', '#dc3545', { default: true }); + const colorError = variable('color.error', '#dc3545', { default: true }); const colorWhite = variable('color.white', '#ffffff', { default: true }); - return { colorPrimary, colorSecondary, colorSuccess, colorDanger, colorWhite }; + return { colorPrimary, colorSecondary, colorSuccess, colorError, colorWhite }; } ``` @@ -153,11 +153,11 @@ const { scale } = useScale(s, { ...defaultScaleValues, default: '@minor-third' } const scalePowers = useScalePowers(s, scale, [-2, -1, 0, 1, 2, 3, 4, 5]); // 2. COLORS - Base colors with lightness variants -const { colorPrimary, colorSecondary, colorSuccess, colorDanger } = useColor(s, { +const { colorPrimary, colorSecondary, colorSuccess, colorError } = useColor(s, { primary: '#006cff', secondary: '#6c757d', success: '#28a745', - danger: '#dc3545', + error: '#dc3545', } as const); const primaryLevels = useColorLightness(s, colorPrimary, defaultColorLightnessValues); diff --git a/.claude/styleframe-recipe-prompt.md b/.claude/styleframe-recipe-prompt.md index 48c43dc5..74208a97 100644 --- a/.claude/styleframe-recipe-prompt.md +++ b/.claude/styleframe-recipe-prompt.md @@ -19,7 +19,7 @@ const colors = [ "success", "info", "warning", - "danger", + "error", ] as const; // Use `const` by default. Export `colors` (and optionally a `variants` array) @@ -39,7 +39,7 @@ export const useRecipe = createUseRecipe("", { success: {}, info: {}, warning: {}, - danger: {}, + error: {}, }, variant: { // Choose variant styles appropriate for this component type. @@ -209,7 +209,7 @@ All values prefixed with `@` are design token references resolved at compile tim ### Available Token Values -**Colors**: primary, secondary, success, info, warning, danger, gray, white, black, background, surface, text, text-inverted, text-weak, text-weaker, text-weakest +**Colors**: primary, secondary, success, info, warning, error, gray, white, black, background, surface, text, text-inverted, text-weak, text-weaker, text-weakest **Color Levels** (absolute lightness): 50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950 @@ -252,7 +252,7 @@ color: { success: {}, info: {}, warning: {}, - danger: {}, + error: {}, }, ``` @@ -277,7 +277,7 @@ color: { success: {}, info: {}, warning: {}, - danger: {}, + error: {}, light: {}, dark: {}, neutral: {}, @@ -1027,7 +1027,7 @@ const colors = [ "success", "info", "warning", - "danger", + "error", ] as const; /** @@ -1520,7 +1520,7 @@ type Story = StoryObj; - **`Default`**: Single instance with default args - **`AllVariants`**: Grid showing all color × variant combinations - **`AllSizes`**: Grid showing all sizes -- **Per-color stories**: One exported story per color (Primary, Secondary, Success, Info, Warning, Danger, and any non-semantic colors) +- **Per-color stories**: One exported story per color (Primary, Secondary, Success, Info, Warning, Error, and any non-semantic colors) - **Per-variant stories**: One per variant style (Solid, Outline, Soft, Subtle, Ghost, Link) - **Per-size stories**: One per size (ExtraSmall, Small, Medium, Large, ExtraLarge) - **Custom axis stories**: When applicable (e.g., `AllOrientations`, `Horizontal`, `Vertical`) @@ -1566,7 +1566,7 @@ Before considering a recipe complete, verify every item: ### Structure - [ ] File imports `createUseRecipe` from `"../utils/createUseRecipe"` -- [ ] `colors` array contains exactly: `"primary"`, `"secondary"`, `"success"`, `"info"`, `"warning"`, `"danger"` (omit entirely for non-semantic-only components) +- [ ] `colors` array contains exactly: `"primary"`, `"secondary"`, `"success"`, `"info"`, `"warning"`, `"error"` (omit entirely for non-semantic-only components) - [ ] `colors` array has `as const` assertion (when present) - [ ] Recipe is exported as `export const useRecipe` - [ ] Recipe name (first arg) is kebab-case matching the component diff --git a/.claude/styleframe-recipes.md b/.claude/styleframe-recipes.md index b1a9c695..440f0471 100644 --- a/.claude/styleframe-recipes.md +++ b/.claude/styleframe-recipes.md @@ -191,7 +191,7 @@ recipe({ color: { primary: { background: ref(colorPrimary) }, secondary: { background: ref(colorSecondary) }, - danger: { background: ref(colorDanger) }, + error: { background: ref(colorError) }, }, // "size" variant group size: { diff --git a/AGENTS.md b/AGENTS.md index 881215e9..e4b6f54c 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -336,7 +336,7 @@ Typography, Backgrounds, Borders, Effects, Filters, Flexbox & Grid, Layout, Sizi ```ts import { useButtonRecipe, useBadgeRecipe } from '@styleframe/theme'; -useButtonRecipe(s); // Colors: primary/secondary/success/info/warning/danger +useButtonRecipe(s); // Colors: primary/secondary/success/info/warning/error // Variants: solid/outline/soft/subtle/ghost/link // Sizes: xs/sm/md/lg/xl diff --git a/apps/docs/content/docs/02.api/12.composables.md b/apps/docs/content/docs/02.api/12.composables.md index 13537d12..23dce079 100644 --- a/apps/docs/content/docs/02.api/12.composables.md +++ b/apps/docs/content/docs/02.api/12.composables.md @@ -273,7 +273,7 @@ Create recipes that generate only the variants you need: import type { Styleframe } from "styleframe"; import { useColorVariables } from "./useColorVariables"; -type ButtonColor = "primary" | "secondary" | "danger"; +type ButtonColor = "primary" | "secondary" | "error"; type ButtonSize = "sm" | "md" | "lg"; interface ButtonOptions { @@ -355,7 +355,7 @@ useButtonRecipe(s); // Or generate only what you need useButtonRecipe(s, { - colors: ["primary", "danger"], + colors: ["primary", "error"], sizes: ["md", "lg"], }); diff --git a/apps/docs/content/docs/04.resources/01.guides/01.create-design-system-in-under-15-minutes.md b/apps/docs/content/docs/04.resources/01.guides/01.create-design-system-in-under-15-minutes.md index 29a7ce24..d5358436 100644 --- a/apps/docs/content/docs/04.resources/01.guides/01.create-design-system-in-under-15-minutes.md +++ b/apps/docs/content/docs/04.resources/01.guides/01.create-design-system-in-under-15-minutes.md @@ -42,10 +42,10 @@ const { colorPrimary, colorSecondary, colorGray } = useColorDesignTokens(s, { } as const); // Define semantic colors -const { colorSuccess, colorWarning, colorDanger, colorInfo } = useColorDesignTokens(s, { +const { colorSuccess, colorWarning, colorError, colorInfo } = useColorDesignTokens(s, { success: '#10b981', warning: '#f59e0b', - danger: '#ef4444', + error: '#ef4444', info: '#06b6d4', } as const); @@ -435,10 +435,10 @@ const { colorPrimary, colorSecondary, colorGray } = useColorDesignTokens(s, { gray: '#64748b', } as const); -const { colorSuccess, colorWarning, colorDanger, colorInfo } = useColorDesignTokens(s, { +const { colorSuccess, colorWarning, colorError, colorInfo } = useColorDesignTokens(s, { success: '#10b981', warning: '#f59e0b', - danger: '#ef4444', + error: '#ef4444', info: '#06b6d4', } as const); diff --git a/apps/docs/content/docs/05.design-tokens/01.presets.md b/apps/docs/content/docs/05.design-tokens/01.presets.md index 594228dd..05db31a3 100644 --- a/apps/docs/content/docs/05.design-tokens/01.presets.md +++ b/apps/docs/content/docs/05.design-tokens/01.presets.md @@ -289,7 +289,7 @@ const { colorSecondary, // Variable<'color.secondary'> colorSuccess, // Variable<'color.success'> colorWarning, // Variable<'color.warning'> - colorDanger, // Variable<'color.danger'> + colorError, // Variable<'color.error'> colorInfo, // Variable<'color.info'> colorLight, // Variable<'color.light'> colorDark, // Variable<'color.dark'> @@ -302,7 +302,7 @@ const { | `secondary` | `#6b7280` | `colorSecondary` | `--color--secondary` | | `success` | `#22c55e` | `colorSuccess` | `--color--success` | | `warning` | `#f59e0b` | `colorWarning` | `--color--warning` | -| `danger` | `#ef4444` | `colorDanger` | `--color--danger` | +| `error` | `#ef4444` | `colorError` | `--color--error` | | `info` | `#06b6d4` | `colorInfo` | `--color--info` | | `light` | `#f8fafc` | `colorLight` | `--color--light` | | `dark` | `#1e293b` | `colorDark` | `--color--dark` | @@ -714,7 +714,7 @@ const preset = useDesignTokensPreset(s, { secondary: '#6c757d', success: '#28a745', warning: '#ffc107', - danger: '#dc3545', + error: '#dc3545', info: '#17a2b8', light: '#f8f9fa', dark: '#343a40', diff --git a/apps/docs/content/docs/05.design-tokens/02.composables/01.borders.md b/apps/docs/content/docs/05.design-tokens/02.composables/01.borders.md index d3b135c9..6bb0a689 100644 --- a/apps/docs/content/docs/05.design-tokens/02.composables/01.borders.md +++ b/apps/docs/content/docs/05.design-tokens/02.composables/01.borders.md @@ -395,11 +395,11 @@ const s = styleframe(); const { ref } = s; // Define base colors -const { colorGray, colorPrimary, colorSuccess, colorDanger } = useColorDesignTokens(s, { +const { colorGray, colorPrimary, colorSuccess, colorError } = useColorDesignTokens(s, { gray: '#6b7280', primary: '#3b82f6', success: '#10b981', - danger: '#ef4444', + error: '#ef4444', } as const); // Create border color variables @@ -407,12 +407,12 @@ const { borderColor, borderColorPrimary, borderColorSuccess, - borderColorDanger, + borderColorError, } = useBorderColorDesignTokens(s, { default: ref(colorGray), primary: ref(colorPrimary), success: ref(colorSuccess), - danger: ref(colorDanger), + error: ref(colorError), } as const); export default s; @@ -426,11 +426,11 @@ export default s; --color--gray: oklch(0.5575 0.0165 244.89 / 1); --color--primary: oklch(0.6109 0.1903 263.71 / 1); --color--success: oklch(0.7051 0.1654 165.47 / 1); - --color--danger: oklch(0.6278 0.2158 27.33 / 1); + --color--error: oklch(0.6278 0.2158 27.33 / 1); --border-color: var(--color--gray); --border-color--primary: var(--color--primary); --border-color--success: var(--color--success); - --border-color--danger: var(--color--danger); + --border-color--error: var(--color--error); } ``` @@ -666,12 +666,12 @@ const { borderStyle, borderStyleDashed } = useBorderStyleDesignTokens(s); const { borderWidth, borderWidthMedium } = useBorderWidthDesignTokens(s); // Setup base colors -const { colorGray, colorPrimary, colorSuccess, colorWarning, colorDanger } = useColorDesignTokens(s, { +const { colorGray, colorPrimary, colorSuccess, colorWarning, colorError } = useColorDesignTokens(s, { gray: '#d1d5db', primary: '#3b82f6', success: '#10b981', warning: '#f59e0b', - danger: '#ef4444', + error: '#ef4444', } as const); // Setup border colors @@ -680,13 +680,13 @@ const { borderColorPrimary, borderColorSuccess, borderColorWarning, - borderColorDanger, + borderColorError, } = useBorderColorDesignTokens(s, { default: ref(colorGray), primary: ref(colorPrimary), success: ref(colorSuccess), warning: ref(colorWarning), - danger: ref(colorDanger), + error: ref(colorError), } as const); // Use border variables in components @@ -711,8 +711,8 @@ selector('.alert', { borderColor: ref(borderColorWarning), borderLeftWidth: ref(borderWidthMedium), }, - '&.danger': { - borderColor: ref(borderColorDanger), + '&.error': { + borderColor: ref(borderColorError), borderLeftWidth: ref(borderWidthMedium), }, }); @@ -743,12 +743,12 @@ export default s; --color--primary: oklch(0.6109 0.1903 263.71 / 1); --color--success: oklch(0.7051 0.1654 165.47 / 1); --color--warning: oklch(0.7444 0.1609 60.67 / 1); - --color--danger: oklch(0.6278 0.2158 27.33 / 1); + --color--error: oklch(0.6278 0.2158 27.33 / 1); --border-color: var(--color--gray); --border-color--primary: var(--color--primary); --border-color--success: var(--color--success); --border-color--warning: var(--color--warning); - --border-color--danger: var(--color--danger); + --border-color--error: var(--color--error); } .card { @@ -776,8 +776,8 @@ export default s; border-left-width: var(--border-width--medium); } - &.danger { - border-color: var(--border-color--danger); + &.error { + border-color: var(--border-color--error); border-left-width: var(--border-width--medium); } } diff --git a/apps/docs/content/docs/05.design-tokens/02.composables/02.box-shadows.md b/apps/docs/content/docs/05.design-tokens/02.composables/02.box-shadows.md index 7472a26e..05eb54fa 100644 --- a/apps/docs/content/docs/05.design-tokens/02.composables/02.box-shadows.md +++ b/apps/docs/content/docs/05.design-tokens/02.composables/02.box-shadows.md @@ -517,11 +517,11 @@ const s = styleframe(); const { ref, selector, css } = s; // Define shadow colors -const { colorPrimary, colorSuccess, colorWarning, colorDanger } = useColorDesignTokens(s, { +const { colorPrimary, colorSuccess, colorWarning, colorError } = useColorDesignTokens(s, { primary: '#3b82f6', success: '#10b981', warning: '#f59e0b', - danger: '#ef4444', + error: '#ef4444', }); // Create colored shadows @@ -529,12 +529,12 @@ const { boxShadowPrimary, boxShadowSuccess, boxShadowWarning, - boxShadowDanger, + boxShadowError, } = useBoxShadowDesignTokens(s, { primary: css`0 4px 8px oklch(from ${colorPrimary} l c h / 0.3), 0 2px 4px oklch(0.6109 0.1903 263.71 / 0.2)`, success: css`0 4px 8px oklch(from ${colorSuccess} l c h / 0.3), 0 2px 4px oklch(0.7051 0.1654 165.47 / 0.2)`, warning: css`0 4px 8px oklch(from ${colorWarning} l c h / 0.3), 0 2px 4px oklch(0.7768 0.1504 75.49 / 0.2)`, - danger: css`0 4px 8px oklch(from ${colorDanger} l c h / 0.3), 0 2px 4px oklch(0.6278 0.2158 27.33 / 0.2)`, + error: css`0 4px 8px oklch(from ${colorError} l c h / 0.3), 0 2px 4px oklch(0.6278 0.2158 27.33 / 0.2)`, }); // Apply colored shadows @@ -556,9 +556,9 @@ selector('.btn-warning', { boxShadow: ref(boxShadowWarning), }); -selector('.btn-danger', { - backgroundColor: ref(colorDanger), - boxShadow: ref(boxShadowDanger), +selector('.btn-error', { + backgroundColor: ref(colorError), + boxShadow: ref(boxShadowError), }); export default s; diff --git a/apps/docs/content/docs/05.design-tokens/02.composables/04.colors.md b/apps/docs/content/docs/05.design-tokens/02.composables/04.colors.md index d2ca2985..045eb898 100644 --- a/apps/docs/content/docs/05.design-tokens/02.composables/04.colors.md +++ b/apps/docs/content/docs/05.design-tokens/02.composables/04.colors.md @@ -38,14 +38,14 @@ const { colorInfo, colorSuccess, colorWarning, - colorDanger, + colorError, } = useColorDesignTokens(s, { primary: "#006cff", secondary: "#6c757d", info: "#17a2b8", success: "#28a745", warning: "#ffc107", - danger: "#dc3545", + error: "#dc3545", } as const); export default s; @@ -61,7 +61,7 @@ export default s; --color--info: oklch(0.6552 0.1105 212.17 / 1); --color--success: oklch(0.6401 0.1751 146.74 / 1); --color--warning: oklch(0.8442 0.172159 84.9338 / 1); - --color--danger: oklch(0.5915 0.202 21.24 / 1); + --color--error: oklch(0.5915 0.202 21.24 / 1); } ``` @@ -72,7 +72,7 @@ Each key in the object becomes a color variable with the prefix `color--`, and t ::tip -**Pro tip:** Use semantic names like `primary`, `secondary`, `info`, `success`, `warning`, and `danger` to create a consistent color system across your application. +**Pro tip:** Use semantic names like `primary`, `secondary`, `info`, `success`, `warning`, and `error` to create a consistent color system across your application. :: @@ -578,13 +578,13 @@ import { const s = styleframe(); // Base colors -const { colorPrimary, colorSecondary, colorSuccess, colorDanger } = useColorDesignTokens( +const { colorPrimary, colorSecondary, colorSuccess, colorError } = useColorDesignTokens( s, { primary: "#006cff", secondary: "#6c757d", success: "#28a745", - danger: "#dc3545", + error: "#dc3545", } as const, ); @@ -610,7 +610,7 @@ const { colorSuccessTint100 } = useColorTintDesignTokens(s, colorSuccess, { 100: 10, } as const); -const { colorDangerShade100 } = useColorShadeDesignTokens(s, colorDanger, { +const { colorErrorShade100 } = useColorShadeDesignTokens(s, colorError, { 100: 10, } as const); @@ -625,7 +625,7 @@ export default s; --color--primary: oklch(0.5749 0.233917 259.9541 / 1); --color--secondary: oklch(0.5575 0.0165 244.89 / 1); --color--success: oklch(0.6401 0.1751 146.74 / 1); - --color--danger: oklch(0.5915 0.202 21.24 / 1); + --color--error: oklch(0.5915 0.202 21.24 / 1); /* Primary levels */ --color--primary-50: oklch(0.97 0.0142 259.95 / 1); @@ -655,7 +655,7 @@ export default s; /* Other color variants */ --color--secondary-shade-100: oklch(0.4575 0.0135 244.89 / 1); --color--success-tint-100: oklch(0.7401 0.2024 146.74 / 1); - --color--danger-shade-100: oklch(0.4915 0.1679 21.24 / 1); + --color--error-shade-100: oklch(0.4915 0.1679 21.24 / 1); } ``` diff --git a/apps/docs/content/docs/06.components/02.composables/01.badge.md b/apps/docs/content/docs/06.components/02.composables/01.badge.md index a4bcf4ee..6b786de9 100644 --- a/apps/docs/content/docs/06.components/02.composables/01.badge.md +++ b/apps/docs/content/docs/06.components/02.composables/01.badge.md @@ -65,7 +65,7 @@ Import the `badge` runtime function from the virtual module and pass variant pro import { badge } from "virtual:styleframe"; interface BadgeProps { - color?: "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "light" | "dark" | "neutral"; + color?: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "light" | "dark" | "neutral"; variant?: "solid" | "outline" | "soft" | "subtle"; size?: "xs" | "sm" | "md" | "lg" | "xl"; children?: React.ReactNode; @@ -91,7 +91,7 @@ export function Badge({ import { badge } from "virtual:styleframe"; const { color = "neutral", variant = "solid", size = "sm" } = defineProps<{ - color?: "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "light" | "dark" | "neutral"; + color?: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "light" | "dark" | "neutral"; variant?: "solid" | "outline" | "soft" | "subtle"; size?: "xs" | "sm" | "md" | "lg" | "xl"; }>(); @@ -120,7 +120,7 @@ panel: true ## Colors -The Badge recipe includes 9 color variants: 6 semantic colors (`primary`, `secondary`, `success`, `info`, `warning`, `danger`) plus 3 neutral-scale colors (`light`, `dark`, `neutral`). Each color is combined with every visual style variant through compound variants, so you get consistent, predictable styling across all combinations. +The Badge recipe includes 9 color variants: 6 semantic colors (`primary`, `secondary`, `success`, `info`, `warning`, `error`) plus 3 neutral-scale colors (`light`, `dark`, `neutral`). Each color is combined with every visual style variant through compound variants, so you get consistent, predictable styling across all combinations. ::story-preview --- @@ -145,7 +145,7 @@ height: 420 | `success` | `@color.success` | Positive states, confirmations, completions | | `info` | `@color.info` | Informational messages, tips, highlights | | `warning` | `@color.warning` | Caution states, pending actions | -| `danger` | `@color.danger` | Error states, destructive actions, alerts | +| `error` | `@color.error` | Error states, destructive actions, alerts | | `light` | `@color.white` / `@color.gray-*` | Light surfaces, stays light in dark mode | | `dark` | `@color.gray-900` | Dark surfaces, stays dark in light mode | | `neutral` | Adaptive (light ↔ dark) | Default color, adapts to the current color scheme | @@ -237,7 +237,7 @@ height: 480 ```html Active -Error +Error 3 @@ -285,10 +285,10 @@ import { useBadgeRecipe } from '@styleframe/theme'; const s = styleframe(); -// Only generate primary and danger colors, with solid and outline styles +// Only generate primary and error colors, with solid and outline styles const badge = useBadgeRecipe(s, { filter: { - color: ['primary', 'danger'], + color: ['primary', 'error'], variant: ['solid', 'outline'], }, }); @@ -322,7 +322,7 @@ Creates a full badge recipe with all variants and compound variant styling. | Variant | Options | Default | |---------|---------|---------| -| `color` | `primary`, `secondary`, `success`, `info`, `warning`, `danger`, `light`, `dark`, `neutral` | `neutral` | +| `color` | `primary`, `secondary`, `success`, `info`, `warning`, `error`, `light`, `dark`, `neutral` | `neutral` | | `variant` | `solid`, `outline`, `soft`, `subtle` | `solid` | | `size` | `xs`, `sm`, `md`, `lg`, `xl` | `sm` | @@ -330,7 +330,7 @@ Creates a full badge recipe with all variants and compound variant styling. ## Best Practices -- **Choose colors by meaning, not appearance**: Use `success` for positive states and `danger` for errors — this keeps your UI consistent when tokens change. +- **Choose colors by meaning, not appearance**: Use `success` for positive states and `error` for errors — this keeps your UI consistent when tokens change. - **Stick to one or two sizes per context**: Mixing too many sizes in the same area creates visual noise. Pick a default size and use alternatives sparingly. - **Prefer `soft` or `subtle` for dense layouts**: Solid badges can be overwhelming when there are many on screen. Reserve `solid` for high-importance items. - **Filter what you don't need**: If your component only uses a few colors, pass a `filter` option to reduce generated CSS. diff --git a/apps/docs/content/docs/06.components/02.composables/02.button.md b/apps/docs/content/docs/06.components/02.composables/02.button.md index 43264992..fd8d9d79 100644 --- a/apps/docs/content/docs/06.components/02.composables/02.button.md +++ b/apps/docs/content/docs/06.components/02.composables/02.button.md @@ -65,7 +65,7 @@ Import the `button` runtime function from the virtual module and pass variant pr import { button } from "virtual:styleframe"; interface ButtonProps { - color?: "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "light" | "dark" | "neutral"; + color?: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "light" | "dark" | "neutral"; variant?: "solid" | "outline" | "soft" | "subtle" | "ghost" | "link"; size?: "xs" | "sm" | "md" | "lg" | "xl"; disabled?: boolean; @@ -102,7 +102,7 @@ const { size = "md", disabled = false, } = defineProps<{ - color?: "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "light" | "dark" | "neutral"; + color?: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "light" | "dark" | "neutral"; variant?: "solid" | "outline" | "soft" | "subtle" | "ghost" | "link"; size?: "xs" | "sm" | "md" | "lg" | "xl"; disabled?: boolean; @@ -132,7 +132,7 @@ panel: true ## Colors -The Button recipe includes 9 color variants: 6 semantic colors (`primary`, `secondary`, `success`, `info`, `warning`, `danger`) plus 3 neutral-scale colors (`light`, `dark`, `neutral`). Each color is combined with every visual style variant through compound variants, so you get consistent, predictable styling across all combinations — including hover, focus, active, and dark mode states. +The Button recipe includes 9 color variants: 6 semantic colors (`primary`, `secondary`, `success`, `info`, `warning`, `error`) plus 3 neutral-scale colors (`light`, `dark`, `neutral`). Each color is combined with every visual style variant through compound variants, so you get consistent, predictable styling across all combinations — including hover, focus, active, and dark mode states. ::story-preview --- @@ -157,7 +157,7 @@ height: 600 | `success` | `@color.success` | Positive actions, confirmations, completions | | `info` | `@color.info` | Informational actions, tips, highlights | | `warning` | `@color.warning` | Caution actions, pending states | -| `danger` | `@color.danger` | Destructive actions, error states, alerts | +| `error` | `@color.error` | Destructive actions, error states, alerts | | `light` | `@color.white` / `@color.gray-*` | Light surfaces, stays light in dark mode | | `dark` | `@color.gray-900` | Dark surfaces, stays dark in light mode | | `neutral` | Adaptive (light ↔ dark) | Default color, adapts to the current color scheme | @@ -341,10 +341,10 @@ import { useButtonRecipe } from '@styleframe/theme'; const s = styleframe(); -// Only generate primary and danger colors, with solid and outline styles +// Only generate primary and error colors, with solid and outline styles const button = useButtonRecipe(s, { filter: { - color: ['primary', 'danger'], + color: ['primary', 'error'], variant: ['solid', 'outline'], }, }); @@ -378,7 +378,7 @@ Creates a full button recipe with all variants and compound variant styling. | Variant | Options | Default | |---------|---------|---------| -| `color` | `primary`, `secondary`, `success`, `info`, `warning`, `danger`, `light`, `dark`, `neutral` | `neutral` | +| `color` | `primary`, `secondary`, `success`, `info`, `warning`, `error`, `light`, `dark`, `neutral` | `neutral` | | `variant` | `solid`, `outline`, `soft`, `subtle`, `ghost`, `link` | `solid` | | `size` | `xs`, `sm`, `md`, `lg`, `xl` | `md` | @@ -386,7 +386,7 @@ Creates a full button recipe with all variants and compound variant styling. ## Best Practices -- **Choose colors by meaning, not appearance**: Use `success` for positive actions and `danger` for destructive actions — this keeps your UI consistent when tokens change. +- **Choose colors by meaning, not appearance**: Use `success` for positive actions and `error` for destructive actions — this keeps your UI consistent when tokens change. - **Establish a clear visual hierarchy**: Use `solid` for the primary action, `outline` or `soft` for secondary actions, and `ghost` or `link` for tertiary actions within the same context. - **Stick to one or two sizes per context**: Mixing too many sizes in the same area creates visual noise. Pick a default size and use alternatives sparingly. - **Use `ghost` for toolbars and icon buttons**: The transparent resting state keeps the interface clean while the hover state confirms interactivity. diff --git a/apps/docs/content/docs/06.components/02.composables/03.button-group.md b/apps/docs/content/docs/06.components/02.composables/03.button-group.md index 0f9e8e83..02cdef3b 100644 --- a/apps/docs/content/docs/06.components/02.composables/03.button-group.md +++ b/apps/docs/content/docs/06.components/02.composables/03.button-group.md @@ -217,7 +217,7 @@ height: 600 | `success` | Positive actions, confirmations | | `info` | Informational actions, tips | | `warning` | Caution actions, pending states | -| `danger` | Destructive actions, error states | +| `error` | Destructive actions, error states | ## Variants diff --git a/apps/docs/content/docs/06.components/02.composables/04.callout.md b/apps/docs/content/docs/06.components/02.composables/04.callout.md index 074d6ea6..280c7432 100644 --- a/apps/docs/content/docs/06.components/02.composables/04.callout.md +++ b/apps/docs/content/docs/06.components/02.composables/04.callout.md @@ -66,7 +66,7 @@ Import the `callout` runtime function from the virtual module and pass variant p import { callout } from "virtual:styleframe"; interface CalloutProps { - color?: "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "light" | "dark" | "neutral"; + color?: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "light" | "dark" | "neutral"; variant?: "solid" | "outline" | "soft" | "subtle"; size?: "sm" | "md" | "lg"; orientation?: "horizontal" | "vertical"; @@ -126,7 +126,7 @@ const { description, dismissible = false, } = defineProps<{ - color?: "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "light" | "dark" | "neutral"; + color?: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "light" | "dark" | "neutral"; variant?: "solid" | "outline" | "soft" | "subtle"; size?: "sm" | "md" | "lg"; orientation?: "horizontal" | "vertical"; @@ -172,7 +172,7 @@ height: 450 ## Colors -The Callout recipe includes 9 color variants: the 6 semantic colors (`primary`, `secondary`, `success`, `info`, `warning`, `danger`) plus 3 neutral-spectrum colors (`light`, `dark`, `neutral`). Each color is combined with every visual style variant through compound variants, so you get consistent, predictable styling across all combinations — including dark mode overrides. +The Callout recipe includes 9 color variants: the 6 semantic colors (`primary`, `secondary`, `success`, `info`, `warning`, `error`) plus 3 neutral-spectrum colors (`light`, `dark`, `neutral`). Each color is combined with every visual style variant through compound variants, so you get consistent, predictable styling across all combinations — including dark mode overrides. The `neutral` color adapts automatically: it uses a light appearance in light mode and a dark appearance in dark mode, making it the safest default for general-purpose callouts. @@ -200,7 +200,7 @@ height: 600 | `success` | `@color.success` | Positive feedback, completions, confirmations | | `info` | `@color.info` | Informational messages, tips, notices | | `warning` | `@color.warning` | Caution messages, pending states, deprecation notices | -| `danger` | `@color.danger` | Error messages, destructive warnings, critical alerts | +| `error` | `@color.error` | Error messages, destructive warnings, critical alerts | | `light` | `@color.white` / `@color.gray-*` | Light-themed callouts, minimal visual weight | | `dark` | `@color.gray-900` | Dark-themed callouts, high visual weight | | `neutral` | Adaptive | Default. Light appearance in light mode, dark in dark mode | @@ -399,10 +399,10 @@ import { useCalloutRecipe } from '@styleframe/theme'; const s = styleframe(); -// Only generate info and danger colors, with soft and subtle styles +// Only generate info and error colors, with soft and subtle styles const callout = useCalloutRecipe(s, { filter: { - color: ['info', 'danger'], + color: ['info', 'error'], variant: ['soft', 'subtle'], }, }); @@ -436,7 +436,7 @@ Creates a full callout recipe with all variants and compound variant styling. | Variant | Options | Default | |---------|---------|---------| -| `color` | `primary`, `secondary`, `success`, `info`, `warning`, `danger`, `light`, `dark`, `neutral` | `neutral` | +| `color` | `primary`, `secondary`, `success`, `info`, `warning`, `error`, `light`, `dark`, `neutral` | `neutral` | | `variant` | `solid`, `outline`, `soft`, `subtle` | `subtle` | | `size` | `sm`, `md`, `lg` | `md` | | `orientation` | `horizontal`, `vertical` | `horizontal` | @@ -445,7 +445,7 @@ Creates a full callout recipe with all variants and compound variant styling. ## Best Practices -- **Choose colors by meaning, not appearance**: Use `success` for confirmations, `danger` for errors, and `warning` for caution messages — this keeps your UI consistent when tokens change. +- **Choose colors by meaning, not appearance**: Use `success` for confirmations, `error` for errors, and `warning` for caution messages — this keeps your UI consistent when tokens change. - **Use `neutral` for generic messages**: The neutral color adapts to light and dark mode automatically, making it the safest default for general-purpose callouts. - **Prefer `subtle` or `soft` for informational callouts**: Reserve `solid` for critical alerts that demand immediate attention. Too many solid callouts create visual fatigue. - **Pair an icon with the message**: Icons reinforce the callout's severity and improve scannability, especially for users who cannot distinguish colors. diff --git a/apps/docs/content/docs/06.components/02.composables/05.card.md b/apps/docs/content/docs/06.components/02.composables/05.card.md index 74af4ddf..99ff3252 100644 --- a/apps/docs/content/docs/06.components/02.composables/05.card.md +++ b/apps/docs/content/docs/06.components/02.composables/05.card.md @@ -476,7 +476,7 @@ No. The most minimal card is just `useCardRecipe()` with a `useCardBodyRecipe()` ::: :::accordion-item{label="Why doesn't the Card recipe include semantic colors like primary or success?" icon="i-lucide-circle-help"} -Cards are content containers, not status indicators. Semantic colors (primary, success, danger) communicate meaning through color, which is better suited to smaller, focused elements like badges, buttons, and callouts. Cards use `light`, `dark`, and `neutral` to provide surface variations that work across all content types without implying a specific status. +Cards are content containers, not status indicators. Semantic colors (primary, success, error) communicate meaning through color, which is better suited to smaller, focused elements like badges, buttons, and callouts. Cards use `light`, `dark`, and `neutral` to provide surface variations that work across all content types without implying a specific status. ::: :::accordion-item{label="What's the difference between light, dark, and neutral colors?" icon="i-lucide-circle-help"} diff --git a/apps/docs/content/docs/08.modifiers/02.composables/02.form-state.md b/apps/docs/content/docs/08.modifiers/02.composables/02.form-state.md index 02520a7c..8abf6c44 100644 --- a/apps/docs/content/docs/08.modifiers/02.composables/02.form-state.md +++ b/apps/docs/content/docs/08.modifiers/02.composables/02.form-state.md @@ -195,7 +195,7 @@ const invalid = useInvalidModifier(s); useBorderColorUtility(s, { success: '#28a745', - danger: '#dc3545', + error: '#dc3545', }, [valid, invalid]); export default s; @@ -206,13 +206,13 @@ export default s; ```css [styleframe/index.css] ._border-color\:success { border-color: #28a745; } -._border-color\:danger { border-color: #dc3545; } +._border-color\:error { border-color: #dc3545; } ._valid\:border-color\:success { &:valid { border-color: #28a745; } } -._invalid\:border-color\:danger { +._invalid\:border-color\:error { &:invalid { border-color: #dc3545; } } ``` @@ -224,7 +224,7 @@ export default s; ``` @@ -340,7 +340,7 @@ const { disabled, valid, invalid, checked } = useFormStateModifiers(s); useBorderColorUtility(s, { success: '#28a745', - danger: '#dc3545', + error: '#dc3545', }, [valid, invalid]); useOpacityUtility(s, { @@ -357,7 +357,7 @@ export default s;