@knkcs/anker 0.0.5 → 1.0.0

package/CLAUDE-ANKER.md

@@ -0,0 +1,74 @@
+# anker Design System — AI Rules
+
+This file is designed to be `@`-imported into a consumer project's `CLAUDE.md` so Claude Code instances working on that project automatically follow the anker design system. Add this line to your root `CLAUDE.md`:
+
+```
+@node_modules/@knkcs/anker/CLAUDE-ANKER.md
+```
+
+The full human-facing spec lives at the anker GitHub Pages docs site (linked from the `@knkcs/anker` README).
+
+---
+
+## Five design principles
+
+1. **Refined Minimalism.** Surfaces are calm. Brand colors are the crown, not the carpet — primary action only.
+2. **Density over air.** Power users spend hours here. Compact rows, tight spacing, small UI sizes — never cramped.
+3. **Consistency over creativity.** If a pattern exists (status pill, empty state, filter toolbar), use it as-is. No per-product variants.
+4. **Clear hierarchy.** Page title, primary action, content — answerable in under a second.
+5. **Keyboard-first where it matters.** Search (`/`), command palette (`⌘K`), navigation must be keyboard-operable. Show shortcuts in tooltips.
+
+---
+
+## Token quick reference
+
+**Palette anchors** (the visually-load-bearing step in each scale):
+- `primary.700` (`#134788`) — action color (buttons, links, focus rings, active states)
+- `secondary.600` (`#e9580c`) — brand orange (use sparingly; not for standard CTAs)
+- `gray.700` — body text
+- `gray.900` — headings
+
+**Brand colors** (`brand.*`) — exact knk Brand Guidelines values for logos, headers, about pages. Do **not** use for interactive UI.
+
+**Semantic tokens** (prefer these over raw):
+- `bg-canvas` (page frame), `bg-surface` (cards/modals), `bg-subtle` (toolbars), `bg-muted` (hover)
+- `default` / `emphasized` / `muted` / `subtle` (text)
+- `border` (standard 1px), `accent` (action), `success`, `error`
+
+**Defaults:**
+- Border radius: `md` = 6px (use this for buttons, inputs, small cards)
+- Body font size: `md` = 14px
+- Font stack assumes Inter Tight (UI) and JetBrains Mono (code) — consumer must load via Google Fonts
+- Light + dark mode supported via `next-themes`
+
+---
+
+## Do
+
+- **Use semantic tokens before raw tokens.** Reach for `accent` before `primary.700`. Why: semantic tokens are the contract, raw tokens are the implementation; raw use becomes a search-and-replace cost on the next visual update.
+- **Use `<Button variant="solid">` (not `variant="primary"`).** The `primary` variant is deprecated in anker. Why: `solid` reads from `colorPalette` automatically, so the same component works for `colorPalette="primary"`, `colorPalette="secondary"`, `colorPalette="gray"`.
+- **Use `brand.*` only for branding surfaces.** Logos, headers, about pages. Why: brand colors are print-aligned and not WCAG-tuned for interactive UI.
+- **Use anker components instead of raw Chakra.** Import from `@knkcs/anker/{primitives,components,atoms,forms,feedback}`. Why: anker wraps Chakra with consistent defaults; consuming raw Chakra bypasses those defaults and creates visual drift.
+- **Respect `prefers-reduced-motion`.** No per-component handling needed — anker's theme enforces this globally. Why: users who set this OS preference get a broken UI if components add their own motion.
+
+---
+
+## Don't
+
+- **No hex codes inline in components.** Always use tokens. Why: hex codes don't update when the design system evolves; tokens do.
+- **No Material-style large shadows.** Anker shadows are deliberately dezent. Why: heavy shadows read as Material/Bootstrap-4-era and clash with the refined direction.
+- **No `secondary.500` for standard CTAs.** The brand orange now lives at `secondary.600`; `secondary.500` is a lighter shade. Why: standard CTAs use `primary.700`, not orange — orange is for branded moments only.
+- **No mixing radii within one component group.** A card with `lg` can hold inputs with `md`, but not a mix of `md` and `lg` siblings. Why: visual rhythm breaks when adjacent elements have different roundness.
+- **No animations over 300ms.** Outside marketing/onboarding. Why: long animations slow down power users; the design language values immediacy.
+- **No Chakra v2 patterns.** No `extendTheme`, `colorScheme`, `useColorMode` from `@chakra-ui/react`. Use `createSystem`, `colorPalette`, `next-themes`. Why: anker is built on Chakra v3 throughout; v2 patterns either error at build time or silently no-op.
+- **No new color introductions.** If a color isn't in `colors.ts`, it doesn't exist. Why: the palette is closed by design — adding ad-hoc colors fragments the system.
+
+---
+
+## Pointers
+
+- Full spec: anker GitHub Pages docs site (`/design-system`)
+- Components: `node_modules/@knkcs/anker/dist/{primitives,components,atoms,forms,feedback}`
+- Theme entry: `import system from "@knkcs/anker/theme"`
+- Provider entry: `import { Provider } from "@knkcs/anker/primitives"`
+- Anker development rules (for working *on* anker, not consuming it): `node_modules/@knkcs/anker/CLAUDE.md` is **not** included in the package; see the anker GitHub repo

package/README.md

@@ -54,22 +54,33 @@ import { InputField, ArrayField, FormField } from "@knkcs/anker/forms";
 import { ConfirmModalProvider, useConfirmModal } from "@knkcs/anker/feedback";
 ```
 
+## Using with Claude Code
+
+If your consumer project uses Claude Code, add this line to your root `CLAUDE.md` to import anker's design-system rules automatically:
+
+```
+@node_modules/@knkcs/anker/CLAUDE-ANKER.md
+```
+
+Claude will then follow anker's design principles, token rules, and component conventions when assisting with your code.
+
 ## Brand Colors
 
 The theme includes both **UI-optimized color scales** (primary, secondary, gray) and **exact brand guideline colors** from the knk Brand Guidelines (October 2021).
 
 | Token | HEX | Use |
 |-------|-----|-----|
-| `primary.500` | `#2087d7` | UI blue — buttons, links, focus rings |
-| `secondary.500` | `#e9580c` | UI orange — matches brand orange |
-| `brand.blue` | `#004576` | Exact brand blue — logos, headers, branding |
-| `brand.navy` | `#0f395d` | Dark blue variant |
+| `primary.700` | `#134788` | **Action anchor** — buttons, links, focus rings (via the `accent` semantic token) |
+| `primary.800` | `#0f395d` | Hover on primary; equals `brand.navy` |
+| `secondary.600` | `#e9580c` | Brand orange anchor — reserved for branded moments, not standard CTAs |
+| `brand.blue` | `#004576` | Exact brand-guideline blue — logos, headers, branding |
+| `brand.navy` | `#0f395d` | Dark blue variant — equals `primary.800` |
 | `brand.light-blue` | `#6fa7d1` | Light blue variant |
-| `brand.orange` | `#e9580c` | Brand orange (same as secondary.500) |
+| `brand.orange` | `#e9580c` | Brand orange (same as `secondary.600`) |
 | `brand.gold` | `#f4b235` | Brand gold accent |
 | `brand.light-gray` | `#f2f2f2` | Brand neutral background |
 
-The UI primary blue intentionally differs from the brand guideline blue. The brand blue (`#004576`) is a deep navy designed for print materials; the UI blue (`#2087d7`) is brighter for web accessibility and matches the existing Core application.
+The UI primary anchor (`primary.700` = `#134788`) is intentionally one step lighter than the brand-guideline blue (`brand.blue` = `#004576`), which reads as too heavy as a CTA on white surfaces. The brand-guideline navy (`#0f395d`, `brand.navy`) lives at `primary.800` and is used for hover states on primary actions. See `docs/design-system.md` for the full palette and semantic-token reference.
 
 ## Notable Component Props
 

package/dist/{chunk-7WPKYUHP.js → chunk-QOLM5PLP.js}

@@ -104,16 +104,16 @@ var buttonTheme = defineRecipe({
       // colorPalette="primary". This variant will be removed in a future
       // major release.
       primary: {
-        bg: "primary.500",
+        bg: "primary.700",
         color: "white",
         _hover: {
-          bg: "primary.600",
+          bg: "primary.800",
           _disabled: {
-            bg: "primary.500"
+            bg: "primary.700"
           }
         },
         _active: {
-          bg: "primary.700"
+          bg: "primary.900"
         }
       },
       // Secondary: outline style using gray color palette
@@ -150,7 +150,7 @@ var buttonTheme = defineRecipe({
       ghost: {
         _hover: {
           bg: "transparent",
-          color: "primary.500"
+          color: "primary.700"
         },
         _active: {
           bg: "gray.200"
@@ -399,8 +399,8 @@ var inputSlotRecipe = defineSlotRecipe({
           bg: { base: "white", _dark: "gray.800" },
           _hover: { borderColor: { base: "gray.300", _dark: "gray.600" } },
           _focus: {
-            borderColor: { base: "primary.500", _dark: "primary.200" },
-            boxShadow: "0px 0px 0px 1px var(--chakra-colors-primary-500)"
+            borderColor: { base: "primary.700", _dark: "primary.300" },
+            boxShadow: "0px 0px 0px 1px var(--chakra-colors-primary-700)"
           }
         },
         addon: {
@@ -447,16 +447,16 @@ var inputSlotRecipe = defineSlotRecipe({
           boxShadow: "none",
           padding: 0,
           minHeight: "auto",
-          color: "primary.500",
+          color: "primary.700",
           textDecoration: "underline",
           cursor: "pointer",
           _hover: {
-            color: "primary.600",
+            color: "primary.800",
             textDecoration: "underline"
           },
           _focus: {
             boxShadow: "none",
-            color: "primary.600"
+            color: "primary.800"
           }
         }
       }
@@ -967,10 +967,10 @@ var radioCardTheme = defineRecipe({
       borderColor: { base: "gray.300", _dark: "gray.600" }
     },
     _checked: {
-      borderColor: { base: "primary.500", _dark: "primary.200" },
+      borderColor: { base: "primary.700", _dark: "primary.300" },
       boxShadow: {
-        base: "0px 0px 0px 1px var(--chakra-colors-primary-500)",
-        _dark: "0px 0px 0px 1px var(--chakra-colors-primary-200)"
+        base: "0px 0px 0px 1px var(--chakra-colors-primary-700)",
+        _dark: "0px 0px 0px 1px var(--chakra-colors-primary-300)"
       }
     }
   }
@@ -1290,7 +1290,7 @@ var tagTheme = defineRecipe({
       outlineOffset: "2px",
       outlineWidth: "2px",
       outlineStyle: "solid",
-      outlineColor: "primary.600"
+      outlineColor: "primary.700"
     },
     _disabled: {
       opacity: 0.4,
@@ -1333,7 +1333,7 @@ var tagTheme = defineRecipe({
       ghost: {
         _hover: {
           bg: "transparent",
-          color: "primary.500"
+          color: "primary.700"
         },
         _active: {
           bg: "transparent"
@@ -1411,10 +1411,10 @@ var textarea_default = defineRecipe({
         bg: { base: "white", _dark: "gray.800" },
         _hover: { borderColor: { base: "gray.300", _dark: "gray.600" } },
         _focus: {
-          borderColor: { base: "primary.500", _dark: "primary.200" },
+          borderColor: { base: "primary.700", _dark: "primary.300" },
           boxShadow: {
-            base: "0px 0px 0px 1px var(--chakra-colors-primary-500)",
-            _dark: "0px 0px 0px 1px var(--chakra-colors-primary-200)"
+            base: "0px 0px 0px 1px var(--chakra-colors-primary-700)",
+            _dark: "0px 0px 0px 1px var(--chakra-colors-primary-300)"
           }
         }
       }
@@ -1487,7 +1487,7 @@ var tree_item_default = defineSlotRecipe({
     treeItemIcon: {
       width: "45px",
       height: "22px",
-      color: "primary.600",
+      color: "primary.700",
       "&[aria-leaf=true],&[data-leaf]": {
         color: "gray.400"
       }
@@ -1556,29 +1556,30 @@ var keyframes = {
 // src/theme/tokens/colors.ts
 var colors = {
   primary: {
-    "50": { value: "#f1f7fe" },
-    "100": { value: "#e2effc" },
-    "200": { value: "#bfddf8" },
-    "300": { value: "#87c1f2" },
-    "400": { value: "#48a3e8" },
-    "500": { value: "#2087d7" },
-    "600": { value: "#126ab7" },
-    "700": { value: "#105595" },
-    "800": { value: "#11497b" },
-    "900": { value: "#143e66" },
-    "950": { value: "#0d2744" }
+    "50": { value: "#eff6fc" },
+    "100": { value: "#d9eafa" },
+    "200": { value: "#b8d6f5" },
+    "300": { value: "#88baeb" },
+    "400": { value: "#5995dc" },
+    "500": { value: "#2f6fbf" },
+    "600": { value: "#1c5aa8" },
+    "700": { value: "#134788" },
+    "800": { value: "#0f395d" },
+    "900": { value: "#0a2740" },
+    "950": { value: "#061a2c" }
   },
   secondary: {
-    "50": { value: "#FEF0E6" },
-    "100": { value: "#FCD9BF" },
-    "200": { value: "#F9B888" },
-    "300": { value: "#F59651" },
-    "400": { value: "#F27726" },
-    "500": { value: "#e9580c" },
-    "600": { value: "#C54A0A" },
-    "700": { value: "#9A3A08" },
-    "800": { value: "#6F2A06" },
-    "900": { value: "#441A03" }
+    "50": { value: "#fff5ed" },
+    "100": { value: "#ffe6d4" },
+    "200": { value: "#ffc8a8" },
+    "300": { value: "#ffa170" },
+    "400": { value: "#ff7c41" },
+    "500": { value: "#f25f1c" },
+    "600": { value: "#e9580c" },
+    "700": { value: "#b73806" },
+    "800": { value: "#912e0d" },
+    "900": { value: "#762a0e" },
+    "950": { value: "#411208" }
   },
   // Exact brand guideline colors for branding elements (headers, logos, about pages).
   // See: knk Brand Guidelines, October 2021
@@ -1601,18 +1602,47 @@ var colors = {
     "600": { value: "#475569" },
     "700": { value: "#334155" },
     "800": { value: "#1e293b" },
-    "900": { value: "#0f172a" }
+    "900": { value: "#0f172a" },
+    "950": { value: "#020617" }
+  },
+  success: {
+    "50": { value: "#ecfdf5" },
+    "100": { value: "#d1fae5" },
+    "500": { value: "#10b981" },
+    "600": { value: "#059669" },
+    "700": { value: "#047857" }
+  },
+  warning: {
+    "50": { value: "#fffbeb" },
+    "100": { value: "#fef3c7" },
+    "500": { value: "#f59e0b" },
+    "600": { value: "#d97706" },
+    "700": { value: "#b45309" }
+  },
+  danger: {
+    "50": { value: "#fef2f2" },
+    "100": { value: "#fee2e2" },
+    "500": { value: "#ef4444" },
+    "600": { value: "#dc2626" },
+    "700": { value: "#b91c1c" }
+  },
+  info: {
+    "50": { value: "#eff6fc" },
+    "100": { value: "#d9eafa" },
+    "500": { value: "#2f6fbf" },
+    "600": { value: "#1c5aa8" },
+    "700": { value: "#134788" }
   }
 };
 var colors_default = colors;
 
 // src/theme/tokens/radii.ts
 var radii = {
-  sm: "0.375rem",
-  md: "0.5rem",
-  lg: "0.75rem",
-  xl: "1rem",
-  "2xl": "1.25rem"
+  sm: "0.25rem",
+  md: "0.375rem",
+  lg: "0.5rem",
+  xl: "0.75rem",
+  "2xl": "1rem"
 };
 var radii_default = radii;
 
@@ -1650,7 +1680,7 @@ var semanticTokens = {
       value: { base: "gray.200", _dark: "gray.700" }
     },
     accent: {
-      value: { base: "primary.500", _dark: "primary.200" }
+      value: { base: "primary.700", _dark: "primary.300" }
     },
     success: {
       value: { base: "green.600", _dark: "green.200" }
@@ -1686,21 +1716,25 @@ var semanticTokens = {
           _dark: "{colors.primary.700}"
         }
       },
+      // solid + focusRing intentionally keep dark at step 500 (not 700)
+      // so the action color stays visible on dark canvas. This breaks the
+      // "same step both modes" pattern that held before the 1.0 anchor
+      // shift. Do not "fix" the asymmetry — see design-system spec §5.2.
       solid: {
         value: {
-          base: "{colors.primary.500}",
+          base: "{colors.primary.700}",
           _dark: "{colors.primary.500}"
         }
       },
       focusRing: {
         value: {
-          base: "{colors.primary.500}",
+          base: "{colors.primary.700}",
           _dark: "{colors.primary.500}"
         }
       },
       border: {
         value: {
-          base: "{colors.primary.500}",
+          base: "{colors.primary.700}",
           _dark: "{colors.primary.400}"
         }
       }
@@ -1734,30 +1768,30 @@ var semanticTokens = {
       },
       solid: {
         value: {
-          base: "{colors.secondary.500}",
+          base: "{colors.secondary.600}",
           _dark: "{colors.secondary.500}"
         }
       },
       focusRing: {
         value: {
-          base: "{colors.secondary.500}",
+          base: "{colors.secondary.600}",
           _dark: "{colors.secondary.500}"
         }
       },
       border: {
         value: {
-          base: "{colors.secondary.500}",
+          base: "{colors.secondary.600}",
           _dark: "{colors.secondary.400}"
         }
       }
     },
     // Accent surface tokens
-    "bg-accent": { value: { base: "primary.600", _dark: "primary.400" } },
+    "bg-accent": { value: { base: "primary.700", _dark: "primary.400" } },
     "bg-accent-subtle": {
-      value: { base: "primary.500", _dark: "primary.500" }
+      value: { base: "primary.700", _dark: "primary.500" }
     },
     "bg-accent-muted": {
-      value: { base: "primary.400", _dark: "primary.600" }
+      value: { base: "primary.500", _dark: "primary.600" }
     },
     "on-accent": { value: { base: "white", _dark: "white" } },
     "on-accent-muted": {
@@ -1770,44 +1804,44 @@ var semanticTokens = {
   shadows: {
     xs: {
       value: {
-        base: "0px 0px 1px rgba(45, 55, 72, 0.05), 0px 1px 2px rgba(45, 55, 72, 0.1)",
-        _dark: "0px 0px 1px rgba(13, 14, 20, 1), 0px 1px 2px rgba(13, 14, 20, 0.9)"
+        base: "0 1px 2px rgba(0, 0, 0, 0.04)",
+        _dark: "0 1px 2px rgba(0, 0, 0, 0.4)"
       }
     },
     sm: {
       value: {
-        base: "0px 0px 1px rgba(45, 55, 72, 0.05), 0px 2px 4px rgba(45, 55, 72, 0.1)",
-        _dark: "0px 0px 1px rgba(13, 14, 20, 1), 0px 2px 4px rgba(13, 14, 20, 0.9)"
+        base: "0 1px 2px rgba(0, 0, 0, 0.06)",
+        _dark: "0 1px 2px rgba(0, 0, 0, 0.5)"
       }
     },
     md: {
       value: {
-        base: "0px 0px 1px rgba(45, 55, 72, 0.05), 0px 4px 8px rgba(45, 55, 72, 0.1)",
-        _dark: "0px 0px 1px rgba(13, 14, 20, 1), 0px 4px 8px rgba(13, 14, 20, 0.9)"
+        base: "0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04)",
+        _dark: "0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.3)"
       }
     },
     lg: {
       value: {
-        base: "0px 0px 1px rgba(45, 55, 72, 0.05), 0px 8px 16px rgba(45, 55, 72, 0.1)",
-        _dark: "0px 0px 1px rgba(13, 14, 20, 1), 0px 8px 16px rgba(13, 14, 20, 0.9)"
+        base: "0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04)",
+        _dark: "0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.3)"
       }
     },
     xl: {
       value: {
-        base: "0px 0px 1px rgba(45, 55, 72, 0.05), 0px 16px 24px rgba(45, 55, 72, 0.1)",
-        _dark: "0px 0px 1px rgba(13, 14, 20, 1), 0px 16px 24px rgba(13, 14, 20, 0.9)"
+        base: "0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.04)",
+        _dark: "0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.3)"
       }
     },
     "2xl": {
       value: {
-        base: "0px 0px 1px rgba(45, 55, 72, 0.04), 0px 24px 48px rgba(45, 55, 72, 0.12)",
-        _dark: "0px 0px 1px rgba(13, 14, 20, 1), 0px 24px 48px rgba(13, 14, 20, 0.9)"
+        base: "0 25px 50px -12px rgba(0, 0, 0, 0.18)",
+        _dark: "0 25px 50px -12px rgba(0, 0, 0, 0.7)"
       }
     },
     "focus-ring": {
       value: {
-        base: "0 0 0 3px rgba(32, 135, 215, 0.4)",
-        _dark: "0 0 0 3px rgba(32, 135, 215, 0.6)"
+        base: "0 0 0 3px rgba(19, 71, 136, 0.18)",
+        _dark: "0 0 0 3px rgba(47, 111, 191, 0.4)"
       }
     }
   },
@@ -1829,8 +1863,9 @@ var spacing_default = space;
 
 // src/theme/tokens/typography.ts
 var fonts = {
-  heading: "InterVariable, -apple-system, system-ui, sans-serif",
-  body: "InterVariable, -apple-system, system-ui, sans-serif"
+  heading: "'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif",
+  body: "'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif",
+  mono: "'JetBrains Mono', ui-monospace, SFMono-Regular, monospace"
 };
 var textStyles = {
   "7xl": {
@@ -1911,6 +1946,32 @@ var textStyles = {
     letterSpacing: "0.08em",
     fontWeight: "semibold",
     textTransform: "uppercase"
+  },
+  bodyLg: {
+    fontSize: "lg",
+    fontWeight: "normal",
+    lineHeight: "1.5"
+    // unitless multiplier — scales with fontSize
+  },
+  body: {
+    fontSize: "md",
+    fontWeight: "normal",
+    lineHeight: "1.5"
+  },
+  bodySm: {
+    fontSize: "sm",
+    fontWeight: "normal",
+    lineHeight: "1.45"
+  },
+  mono: {
+    fontFamily: "mono",
+    fontSize: "md",
+    lineHeight: "1.5"
+  },
+  monoSm: {
+    fontFamily: "mono",
+    fontSize: "xs",
+    lineHeight: "1.45"
   }
 };
 
@@ -1929,7 +1990,8 @@ var z_index_default = zIndex;
 function createAnkerTheme(preset) {
   const fonts2 = {
     heading: preset?.fonts?.heading ?? fonts.heading,
-    body: preset?.fonts?.body ?? fonts.body
+    body: preset?.fonts?.body ?? fonts.body,
+    mono: preset?.fonts?.mono ?? fonts.mono
   };
   const colors2 = preset?.colors ? { ...colors_default, ...preset.colors } : colors_default;
   const durations2 = preset?.durations ? { ...durations, ...preset.durations } : durations;
@@ -1985,7 +2047,8 @@ function createAnkerTheme(preset) {
         easings: easings2,
         fonts: {
           heading: { value: fonts2.heading },
-          body: { value: fonts2.body }
+          body: { value: fonts2.body },
+          mono: { value: fonts2.mono }
         },
         spacing: Object.fromEntries(
           Object.entries(spacing_default).map(([k, v]) => [k, { value: v }])
@@ -2094,5 +2157,5 @@ var system = createAnkerTheme();
 var theme_default = system;
 
 export { colors_default, createAnkerTheme, defaultPreset, durations, easings, fonts, getColor, keyframes, radii_default, semantic_default, spacing_default, textStyles, theme_default, transparentize, z_index_default };
-//# sourceMappingURL=chunk-7WPKYUHP.js.map
-//# sourceMappingURL=chunk-7WPKYUHP.js.map
+//# sourceMappingURL=chunk-QOLM5PLP.js.map
+//# sourceMappingURL=chunk-QOLM5PLP.js.map