/* * Bento — Brand Tokens (v1 draft) * * Single source of truth for color, type, spacing, motion, radii, shadow. * Copied into both `app/styles/bento.css` (admin) and * `extensions/bundle-configurator/assets/bento.css` (storefront) via the * `npm run sync:tokens` script. Edit THIS file, then run sync. * * Design intent: * Warm, considered, "curated like a bento" — but ultra-modern in motion, * spacing, and type. Not Japan-themed. The palette evokes washi paper + * lacquer + ink — quiet warmth, one decisive accent. * * Surface guidance: * - Admin: tokens layer on top of Polaris. Use them on hero panels, * analytics canvases, the Bento wordmark area — NOT to override Polaris * components. * - Storefront: tokens fall back to theme custom properties first * (so the widget feels native), then to these Bento defaults. * Pattern: `var(--color-base-accent-1, var(--bento-ink-900))`. */ :root { /* ─── COLOR ─ Ink (text, primary marks) ───────────────────────────────── */ /* Warm near-blacks: a hair of red/yellow so the ink sits with the washi paper instead of reading as a cold, default "#0e0e10" black on cream. */ --bento-ink-900: #15110d; /* primary text, highest contrast */ --bento-ink-700: #2a2620; /* heading on paper */ --bento-ink-500: #57534b; /* body on paper (AAA on paper-50) */ --bento-ink-400: #8a8b92; /* meta, placeholders */ --bento-ink-300: #b8b9bf; /* disabled text, crisp borders */ /* ─── COLOR ─ Paper (backgrounds, surfaces) ───────────────────────────── */ --bento-paper-0: #ffffff; /* pure white — modals, cards on cream */ --bento-paper-50: #faf8f3; /* base cream — washi warmth */ --bento-paper-100: #f3efe6; /* surface, panel */ --bento-paper-200: #e8e3d6; /* divider, soft border */ --bento-paper-300: #d4cebd; /* strong border, chip outline */ /* ─── COLOR ─ Lacquer (primary accent, CTA) ───────────────────────────── */ /* Earthen red — between brick and persimmon. NOT tomato, NOT crimson. */ --bento-lacquer-50: #fdeee9; --bento-lacquer-100: #f9d3c7; --bento-lacquer-300: #e88b6e; --bento-lacquer-500: #c9472b; /* primary brand accent */ --bento-lacquer-600: #a83721; /* hover */ --bento-lacquer-700: #872a18; /* pressed */ /* ─── COLOR ─ State ──────────────────────────────────────────────────── */ --bento-tatami-500: #6e7a3d; /* success — kit complete, synced */ --bento-tatami-100: #eef0e0; --bento-shoyu-700: #3a2818; /* warning — needs attention */ --bento-shoyu-100: #f4ebde; --bento-info-500: #3b6ea5; /* info — analytics insight */ --bento-info-100: #e2ecf6; /* ─── TYPE ─ Family ──────────────────────────────────────────────────── */ /* Inter is Shopify-served (already preloaded in app/root.tsx) and feels native to Shopify admin. Excellent OpenType features. Display variant (Inter Display) used for large numerals — narrower, more decisive. */ --bento-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --bento-font-display: "Inter Display", "Inter", system-ui, sans-serif; --bento-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* ─── TYPE ─ Scale (modular, 1.250 minor third) ──────────────────────── */ --bento-text-xs: 11px; /* meta, chip labels */ --bento-text-sm: 13px; /* secondary body */ --bento-text-base: 15px; /* primary body */ --bento-text-md: 17px; /* prominent body, card titles */ --bento-text-lg: 21px; /* section heading */ --bento-text-xl: 27px; /* page title */ --bento-text-2xl: 34px; /* hero stat */ --bento-text-3xl: 44px; /* landing hero */ --bento-text-4xl: 56px; /* big number display */ /* ─── TYPE ─ Weight ──────────────────────────────────────────────────── */ --bento-font-regular: 400; --bento-font-medium: 500; --bento-font-semi: 600; --bento-font-bold: 700; /* ─── TYPE ─ Tracking + leading ──────────────────────────────────────── */ --bento-tracking-tight: -0.02em; --bento-tracking-normal: 0; --bento-tracking-wide: 0.04em; --bento-leading-tight: 1.15; --bento-leading-snug: 1.35; --bento-leading-normal: 1.5; --bento-leading-relaxed: 1.65; /* ─── SPACE ─ 4px base, semantic names ───────────────────────────────── */ --bento-space-1: 4px; --bento-space-2: 8px; --bento-space-3: 12px; --bento-space-4: 16px; --bento-space-5: 20px; --bento-space-6: 24px; --bento-space-8: 32px; --bento-space-10: 40px; --bento-space-12: 48px; --bento-space-16: 64px; --bento-space-20: 80px; /* ─── RADIUS ─ Compartmented identity ────────────────────────────────── */ /* Bento boxes have a signature: tight inner compartments, softer outer. */ --bento-radius-sm: 4px; /* chip, badge */ --bento-radius-md: 8px; /* input, button */ --bento-radius-lg: 12px; /* compartment tile */ --bento-radius-xl: 18px; /* outer container */ --bento-radius-2xl: 24px; /* hero panel */ --bento-radius-pill: 999px; /* pill */ /* ─── SHADOW ─ Quiet, lifted-paper feel ──────────────────────────────── */ --bento-shadow-sm: 0 1px 2px rgba(14, 14, 16, 0.04); --bento-shadow-md: 0 2px 6px rgba(14, 14, 16, 0.06), 0 1px 2px rgba(14, 14, 16, 0.04); --bento-shadow-lg: 0 8px 24px rgba(14, 14, 16, 0.08), 0 2px 6px rgba(14, 14, 16, 0.04); --bento-shadow-xl: 0 16px 48px rgba(14, 14, 16, 0.12), 0 4px 12px rgba(14, 14, 16, 0.06); /* Lacquer-tinted shadow for hovered CTAs */ --bento-shadow-accent: 0 6px 20px rgba(201, 71, 43, 0.22); /* ─── MOTION ─ Calm, decisive, never bouncy ──────────────────────────── */ /* Standard easing — matches Material/Tailwind defaults but with our own opinion on duration. Slower than feels "snappy" by ~20ms — gives compartment transitions a deliberate, "placed" quality. */ --bento-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* exit, reveal */ --bento-ease-in: cubic-bezier(0.4, 0, 1, 1); /* enter */ --bento-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* movement */ --bento-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* select, pop-in */ --bento-dur-fast: 120ms; /* hover, micro */ --bento-dur-base: 200ms; /* most UI transitions */ --bento-dur-mid: 320ms; /* compartment fill */ --bento-dur-slow: 500ms; /* reveal, page-level */ /* ─── Z-INDEX ─ Single scale, named ──────────────────────────────────── */ --bento-z-base: 1; --bento-z-raised: 10; --bento-z-sticky: 100; --bento-z-modal: 1000; --bento-z-toast: 2000; /* ─── FOCUS ─ Keyboard accessibility ─────────────────────────────────── */ /* Single ring style used everywhere a control accepts focus. */ --bento-ring: 0 0 0 3px rgba(21, 17, 13, 0.28); /* ink @ 28% */ --bento-ring-inset: inset 0 0 0 2px var(--bento-ink-900); --bento-ring-offset: 2px; /* ─── SKELETON / LOAD ─ Quiet placeholders ───────────────────────────── */ --bento-skeleton-base: var(--bento-paper-100); --bento-skeleton-shimmer: var(--bento-paper-200); } /* ─── DARK MODE — placeholder, refined in Stage B ───────────────────────── */ @media (prefers-color-scheme: dark) { :root { /* Intentionally empty for v1. Storefront inherits theme; admin = Polaris, which handles its own dark mode. Add Bento dark surfaces in Stage B only after testing on real merchant themes. */ } }