banhaten 0.3.0 → 0.5.0

package/docs/design-system/appearances/default.md

@@ -1,94 +1,94 @@
-# Default Appearance
-
-`default` is the baseline product appearance.
-
-It should feel practical, calm, and balanced: a gray application background, white cards, modest radius, restrained elevation, and conservative spacing.
-
-## Visual Character
-
-- Application background is gray or off-white.
-- Cards and primary content areas are white.
-- Actions and controls have a modest radius.
-- Spacing is comfortable but compact enough for daily product use.
-- Shadows are subtle and used only to separate floating or raised elements.
-
-## Token Direction
-
-```ts
-export const defaultAppearance = {
-  content: {
-    default: "#171717",
-    primary: "#000000",
-    subtle: "#404040",
-    muted: "#737373",
-    disabled: "#a3a3a3",
-    inverse: "#ffffff",
-    link: "#1d4ed8",
-    linkHover: "#1e40af",
-    onColor: "#ffffff",
-    onLight: "#171717",
-    onBrand: "#ffffff",
-  },
-  background: {
-    app: "#f4f4f5",
-    default: "#ffffff",
-    card: "#ffffff",
-    subtle: "#fafafa",
-    muted: "#f5f5f5",
-    disabled: "#e5e5e5",
-    inverse: "#171717",
-    overlay: "rgba(23, 23, 23, 0.48)",
-    brand: "#171717",
-    brandHover: "#262626",
-    brandPressed: "#0a0a0a",
-    selected: "#e5e7eb",
-    hover: "#f5f5f5",
-    pressed: "#e5e5e5",
-  },
-  border: {
-    default: "#d4d4d4",
-    subtle: "#e5e5e5",
-    strong: "#a3a3a3",
-    disabled: "#e5e5e5",
-    focus: "#2563eb",
-    brand: "#171717",
-  },
-  shape: {
-    action: "10px",
-    control: "10px",
-    card: "12px",
-    panel: "12px",
-    modal: "16px",
-    popover: "12px",
-    badge: "999px",
-    avatar: "999px",
-  },
-  density: {
-    controlHeight: "40px",
-    controlPaddingX: "14px",
-    cardPadding: "20px",
-    panelPadding: "20px",
-    sectionGap: "24px",
-    listRowHeight: "44px",
-    tableRowHeight: "44px",
-  },
-  elevation: {
-    card: "0 1px 2px rgba(0, 0, 0, 0.04)",
-    panel: "0 1px 3px rgba(0, 0, 0, 0.06)",
-    popover: "0 12px 28px rgba(0, 0, 0, 0.14)",
-    modal: "0 24px 64px rgba(0, 0, 0, 0.20)",
-    none: "none",
-  },
-};
-```
-
-## Component Impact
-
-- Buttons: modest radius, dark primary action, balanced padding.
-- Breadcrumbs: inline trails stay quiet; raised trails use `background.card`, `border.subtle`, and the modest control radius.
-- Inputs: modest radius, visible but quiet border.
-- Cards: white on gray app background, subtle border or shadow.
-- Dividers: quiet 1px separators using `border.subtle`, with compact spacing around labels or inline actions.
-- File uploads: subtle dashed drop zones with white queued rows, modest radius, and quiet row elevation.
-- Modals and popovers: slightly more radius than inline components.
-- Tables and lists: normal row height for readable operational screens.
+# Default Appearance
+
+`default` is the baseline product appearance.
+
+It should feel practical, calm, and balanced: a gray application background, white cards, modest radius, restrained elevation, and conservative spacing.
+
+## Visual Character
+
+- Application background is gray or off-white.
+- Cards and primary content areas are white.
+- Actions and controls have a modest radius.
+- Spacing is comfortable but compact enough for daily product use.
+- Elevation is subtle and used only to separate floating or raised elements.
+
+## Token Direction
+
+```ts
+export const defaultAppearance = {
+  content: {
+    default: "#171717",
+    primary: "#000000",
+    subtle: "#404040",
+    muted: "#737373",
+    disabled: "#a3a3a3",
+    inverse: "#ffffff",
+    link: "#1d4ed8",
+    linkHover: "#1e40af",
+    onColor: "#ffffff",
+    onLight: "#171717",
+    onBrand: "#ffffff",
+  },
+  background: {
+    app: "#f4f4f5",
+    default: "#ffffff",
+    card: "#ffffff",
+    subtle: "#fafafa",
+    muted: "#f5f5f5",
+    disabled: "#e5e5e5",
+    inverse: "#171717",
+    overlay: "rgba(23, 23, 23, 0.48)",
+    brand: "#171717",
+    brandHover: "#262626",
+    brandPressed: "#0a0a0a",
+    selected: "#e5e7eb",
+    hover: "#f5f5f5",
+    pressed: "#e5e5e5",
+  },
+  border: {
+    default: "#d4d4d4",
+    subtle: "#e5e5e5",
+    strong: "#a3a3a3",
+    disabled: "#e5e5e5",
+    focus: "#2563eb",
+    brand: "#171717",
+  },
+  shape: {
+    action: "10px",
+    control: "10px",
+    card: "12px",
+    panel: "12px",
+    modal: "16px",
+    popover: "12px",
+    badge: "999px",
+    avatar: "999px",
+  },
+  density: {
+    controlHeight: "40px",
+    controlPaddingX: "14px",
+    cardPadding: "20px",
+    panelPadding: "20px",
+    sectionGap: "24px",
+    listRowHeight: "44px",
+    tableRowHeight: "44px",
+  },
+  elevation: {
+    card: "0 1px 2px rgba(0, 0, 0, 0.04)",
+    panel: "0 1px 3px rgba(0, 0, 0, 0.06)",
+    popover: "0 12px 28px rgba(0, 0, 0, 0.14)",
+    modal: "0 24px 64px rgba(0, 0, 0, 0.20)",
+    none: "none",
+  },
+};
+```
+
+## Component Impact
+
+- Buttons: modest radius, dark primary action, balanced padding.
+- Breadcrumbs: inline trails stay quiet; raised trails use `background.card`, `border.subtle`, and the modest control radius.
+- Inputs: modest radius, visible but quiet border.
+- Cards: white on gray app background, subtle border or shadow.
+- Dividers: quiet 1px separators using `border.subtle`, with compact spacing around labels or inline actions.
+- File uploads: subtle dashed drop zones with white queued rows, modest radius, and quiet row elevation.
+- Modals and popovers: slightly more radius than inline components.
+- Tables and lists: normal row height for readable operational screens.

package/docs/design-system/appearances/rounded.md

@@ -1,95 +1,95 @@
-# Rounded Appearance
-
-`rounded` is the softer appearance.
-
-It should feel open, approachable, and more polished: a white application background, larger radii, softer borders, relaxed spacing, and less visual heaviness.
-
-## Visual Character
-
-- Application background is white.
-- Cards use white or near-white backgrounds with light borders.
-- Primary actions can be pill-shaped.
-- Panels and cards have visibly larger radius.
-- Spacing is a little more relaxed than `default`.
-- Shadows are soft and optional.
-
-## Token Direction
-
-```ts
-export const roundedAppearance = {
-  content: {
-    default: "#18181b",
-    primary: "#09090b",
-    subtle: "#52525b",
-    muted: "#71717a",
-    disabled: "#a1a1aa",
-    inverse: "#ffffff",
-    link: "#0f766e",
-    linkHover: "#115e59",
-    onColor: "#ffffff",
-    onLight: "#18181b",
-    onBrand: "#ffffff",
-  },
-  background: {
-    app: "#ffffff",
-    default: "#ffffff",
-    card: "#ffffff",
-    subtle: "#fafafa",
-    muted: "#f6f7f7",
-    disabled: "#e4e4e7",
-    inverse: "#18181b",
-    overlay: "rgba(24, 24, 27, 0.42)",
-    brand: "#0f766e",
-    brandHover: "#115e59",
-    brandPressed: "#134e4a",
-    selected: "#ccfbf1",
-    hover: "#f4f7f6",
-    pressed: "#e7f3f0",
-  },
-  border: {
-    default: "#dedede",
-    subtle: "#eeeeee",
-    strong: "#b8b8b8",
-    disabled: "#e4e4e7",
-    focus: "#0f766e",
-    brand: "#0f766e",
-  },
-  shape: {
-    action: "999px",
-    control: "16px",
-    card: "22px",
-    panel: "24px",
-    modal: "28px",
-    popover: "20px",
-    badge: "999px",
-    avatar: "999px",
-  },
-  density: {
-    controlHeight: "44px",
-    controlPaddingX: "18px",
-    cardPadding: "24px",
-    panelPadding: "24px",
-    sectionGap: "32px",
-    listRowHeight: "48px",
-    tableRowHeight: "48px",
-  },
-  elevation: {
-    card: "0 8px 24px rgba(15, 23, 42, 0.06)",
-    panel: "0 10px 32px rgba(15, 23, 42, 0.08)",
-    popover: "0 18px 40px rgba(15, 23, 42, 0.16)",
-    modal: "0 28px 72px rgba(15, 23, 42, 0.22)",
-    none: "none",
-  },
-};
-```
-
-## Component Impact
-
-- Buttons: pill-like primary and action buttons.
-- Breadcrumbs: raised trails inherit the softer control radius and can use slightly more relaxed spacing.
-- Inputs: rounded controls with slightly taller height.
-- Cards: larger radius with light borders and soft separation.
-- Dividers: quiet 1px separators using `border.subtle`, with softer action backgrounds and the preset control radius.
-- File uploads: softer drop zones and queued rows, relaxed padding, and gentle borders.
-- Modals and popovers: rounded, friendly containers.
-- Tables and lists: slightly more vertical breathing room.
+# Rounded Appearance
+
+`rounded` is the softer appearance.
+
+It should feel open, approachable, and more polished: a white application background, larger radii, softer borders, relaxed spacing, and less visual heaviness.
+
+## Visual Character
+
+- Application background is white.
+- Cards use white or near-white backgrounds with light borders.
+- Primary actions can be pill-shaped.
+- Panels and cards have visibly larger radius.
+- Spacing is a little more relaxed than `default`.
+- Elevation is soft and optional.
+
+## Token Direction
+
+```ts
+export const roundedAppearance = {
+  content: {
+    default: "#18181b",
+    primary: "#09090b",
+    subtle: "#52525b",
+    muted: "#71717a",
+    disabled: "#a1a1aa",
+    inverse: "#ffffff",
+    link: "#0f766e",
+    linkHover: "#115e59",
+    onColor: "#ffffff",
+    onLight: "#18181b",
+    onBrand: "#ffffff",
+  },
+  background: {
+    app: "#ffffff",
+    default: "#ffffff",
+    card: "#ffffff",
+    subtle: "#fafafa",
+    muted: "#f6f7f7",
+    disabled: "#e4e4e7",
+    inverse: "#18181b",
+    overlay: "rgba(24, 24, 27, 0.42)",
+    brand: "#0f766e",
+    brandHover: "#115e59",
+    brandPressed: "#134e4a",
+    selected: "#ccfbf1",
+    hover: "#f4f7f6",
+    pressed: "#e7f3f0",
+  },
+  border: {
+    default: "#dedede",
+    subtle: "#eeeeee",
+    strong: "#b8b8b8",
+    disabled: "#e4e4e7",
+    focus: "#0f766e",
+    brand: "#0f766e",
+  },
+  shape: {
+    action: "999px",
+    control: "16px",
+    card: "22px",
+    panel: "24px",
+    modal: "28px",
+    popover: "20px",
+    badge: "999px",
+    avatar: "999px",
+  },
+  density: {
+    controlHeight: "44px",
+    controlPaddingX: "18px",
+    cardPadding: "24px",
+    panelPadding: "24px",
+    sectionGap: "32px",
+    listRowHeight: "48px",
+    tableRowHeight: "48px",
+  },
+  elevation: {
+    card: "0 8px 24px rgba(15, 23, 42, 0.06)",
+    panel: "0 10px 32px rgba(15, 23, 42, 0.08)",
+    popover: "0 18px 40px rgba(15, 23, 42, 0.16)",
+    modal: "0 28px 72px rgba(15, 23, 42, 0.22)",
+    none: "none",
+  },
+};
+```
+
+## Component Impact
+
+- Buttons: pill-like primary and action buttons.
+- Breadcrumbs: raised trails inherit the softer control radius and can use slightly more relaxed spacing.
+- Inputs: rounded controls with slightly taller height.
+- Cards: larger radius with light borders and soft separation.
+- Dividers: quiet 1px separators using `border.subtle`, with softer action backgrounds and the preset control radius.
+- File uploads: softer drop zones and queued rows, relaxed padding, and gentle borders.
+- Modals and popovers: rounded, friendly containers.
+- Tables and lists: slightly more vertical breathing room.

package/docs/design-system/appearances/sharp.md

@@ -1,95 +1,95 @@
-# Sharp Appearance
-
-`sharp` is the precise appearance.
-
-It should feel structured, architectural, and efficient: square edges, tighter spacing, stronger borders, flatter surfaces, and minimal elevation.
-
-## Visual Character
-
-- Application background can be white or a very light gray.
-- Cards are flat panels with clear borders.
-- Radius is zero or nearly zero across most UI.
-- Spacing is tighter than `default`.
-- Borders carry most of the separation work.
-- Shadows are reserved for overlays only.
-
-## Token Direction
-
-```ts
-export const sharpAppearance = {
-  content: {
-    default: "#111111",
-    primary: "#000000",
-    subtle: "#3f3f46",
-    muted: "#6b7280",
-    disabled: "#9ca3af",
-    inverse: "#ffffff",
-    link: "#7c2d12",
-    linkHover: "#431407",
-    onColor: "#ffffff",
-    onLight: "#111111",
-    onBrand: "#ffffff",
-  },
-  background: {
-    app: "#f7f7f7",
-    default: "#ffffff",
-    card: "#ffffff",
-    subtle: "#f9fafb",
-    muted: "#f3f4f6",
-    disabled: "#e5e7eb",
-    inverse: "#111111",
-    overlay: "rgba(17, 17, 17, 0.52)",
-    brand: "#111111",
-    brandHover: "#262626",
-    brandPressed: "#000000",
-    selected: "#e5e7eb",
-    hover: "#f3f4f6",
-    pressed: "#e5e7eb",
-  },
-  border: {
-    default: "#c7c7c7",
-    subtle: "#dedede",
-    strong: "#737373",
-    disabled: "#dedede",
-    focus: "#111111",
-    brand: "#111111",
-  },
-  shape: {
-    action: "0px",
-    control: "0px",
-    card: "0px",
-    panel: "0px",
-    modal: "0px",
-    popover: "0px",
-    badge: "2px",
-    avatar: "0px",
-  },
-  density: {
-    controlHeight: "38px",
-    controlPaddingX: "12px",
-    cardPadding: "16px",
-    panelPadding: "16px",
-    sectionGap: "20px",
-    listRowHeight: "40px",
-    tableRowHeight: "38px",
-  },
-  elevation: {
-    card: "none",
-    panel: "none",
-    popover: "0 12px 24px rgba(0, 0, 0, 0.18)",
-    modal: "0 20px 56px rgba(0, 0, 0, 0.24)",
-    none: "none",
-  },
-};
-```
-
-## Component Impact
-
-- Buttons: square edges, compact padding, strong hover and pressed states.
-- Breadcrumbs: raised trails use square or near-square corners with tight separator rhythm.
-- Inputs: square controls with clear border states.
-- Cards: flat panels with borders instead of visible rounding.
-- Dividers: clear 1px separators using `border.subtle`, with square action treatment and tight spacing.
-- File uploads: precise dashed drop zones, square queued rows, tighter spacing, and border-led error states.
-- Modals and popovers: square containers with overlay separation.
-- Tables and lists: denser rows for scanning and comparison.
+# Sharp Appearance
+
+`sharp` is the precise appearance.
+
+It should feel structured, architectural, and efficient: square edges, tighter spacing, stronger borders, flatter surfaces, and minimal elevation.
+
+## Visual Character
+
+- Application background can be white or a very light gray.
+- Cards are flat panels with clear borders.
+- Radius is zero or nearly zero across most UI.
+- Spacing is tighter than `default`.
+- Borders carry most of the separation work.
+- Elevation is reserved for overlays only.
+
+## Token Direction
+
+```ts
+export const sharpAppearance = {
+  content: {
+    default: "#111111",
+    primary: "#000000",
+    subtle: "#3f3f46",
+    muted: "#6b7280",
+    disabled: "#9ca3af",
+    inverse: "#ffffff",
+    link: "#7c2d12",
+    linkHover: "#431407",
+    onColor: "#ffffff",
+    onLight: "#111111",
+    onBrand: "#ffffff",
+  },
+  background: {
+    app: "#f7f7f7",
+    default: "#ffffff",
+    card: "#ffffff",
+    subtle: "#f9fafb",
+    muted: "#f3f4f6",
+    disabled: "#e5e7eb",
+    inverse: "#111111",
+    overlay: "rgba(17, 17, 17, 0.52)",
+    brand: "#111111",
+    brandHover: "#262626",
+    brandPressed: "#000000",
+    selected: "#e5e7eb",
+    hover: "#f3f4f6",
+    pressed: "#e5e7eb",
+  },
+  border: {
+    default: "#c7c7c7",
+    subtle: "#dedede",
+    strong: "#737373",
+    disabled: "#dedede",
+    focus: "#111111",
+    brand: "#111111",
+  },
+  shape: {
+    action: "0px",
+    control: "0px",
+    card: "0px",
+    panel: "0px",
+    modal: "0px",
+    popover: "0px",
+    badge: "2px",
+    avatar: "0px",
+  },
+  density: {
+    controlHeight: "38px",
+    controlPaddingX: "12px",
+    cardPadding: "16px",
+    panelPadding: "16px",
+    sectionGap: "20px",
+    listRowHeight: "40px",
+    tableRowHeight: "38px",
+  },
+  elevation: {
+    card: "none",
+    panel: "none",
+    popover: "0 12px 24px rgba(0, 0, 0, 0.18)",
+    modal: "0 20px 56px rgba(0, 0, 0, 0.24)",
+    none: "none",
+  },
+};
+```
+
+## Component Impact
+
+- Buttons: square edges, compact padding, strong hover and pressed states.
+- Breadcrumbs: raised trails use square or near-square corners with tight separator rhythm.
+- Inputs: square controls with clear border states.
+- Cards: flat panels with borders instead of visible rounding.
+- Dividers: clear 1px separators using `border.subtle`, with square action treatment and tight spacing.
+- File uploads: precise dashed drop zones, square queued rows, tighter spacing, and border-led error states.
+- Modals and popovers: square containers with overlay separation.
+- Tables and lists: denser rows for scanning and comparison.