refactor: Rename danger semantic color to error

.changeset/rename-danger-to-error-color.md

@@ -0,0 +1,10 @@
+---
+"@styleframe/theme": minor
+"styleframe": minor
+---
+
+Rename `danger` semantic color to `error` across the design system
+
+- Rename `danger` color token to `error` in default color values and border color values
+- Update all recipes (badge, button, callout) to use `error` instead of `danger` in color variants
+- Update all documentation, storybook stories, and playground examples

.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);

.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 use<ComponentName>Recipe = createUseRecipe("<component-name>", {
 			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<typeof meta>;
 - **`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 use<ComponentName>Recipe`
 - [ ] Recipe name (first arg) is kebab-case matching the component

.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: {

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
 

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"],
 });
 

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);
 

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',

apps/docs/content/docs/05.design-tokens/02.composables/01.borders.md

@@ -395,24 +395,24 @@ 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
 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);
     }
 }

apps/docs/content/docs/05.design-tokens/02.composables/02.box-shadows.md

@@ -517,24 +517,24 @@ 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
 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;