/* * Design tokens — translates the Figma design system (frontend §2.2–§2.5) to * CSS custom properties. Every component CSS must use these tokens, never raw * hex/px values. If Figma changes a token, update here and every component * picks it up automatically. * * Source of truth: ../../../../sheens-erp-design-doc/02_프론트엔드_설계서/0.4.0.md */ :root { /* ─── SKIN KNOBS (Fiori structure, Stripe skin — retune these) ───── * Four knobs define the whole skin; every colour below aliases one of them. * --accent ONE interactive colour (Sheens brand navy) — buttons, links, focus, * active-nav ONLY, never decoration. a11y-safe with white text. * --canvas cool near-white page background; --surface = white cards. * --ink navy-tinted primary text (never pure black); --ink-muted = slate labels. */ --accent: #1F3A5F; /* Sheens brand navy — the one interactive colour */ --accent-hover: #284A78; /* :hover on the primary button (matches the navy chrome hover) */ --canvas: #F6F8FB; --ink: #1A2233; --ink-muted: #55607A; /* ─── Colors (frontend §2.2) ──────────────────────────────────── * CHROME uses --color-primary (TopNav, legacy borders). The one INTERACTIVE accent (--accent, * navy) drives buttons/links/focus/active-nav via --color-accent + the kit — decoupled tokens, * currently the same navy; retune --accent alone to shift the interactive colour. */ --color-primary: #1F3A5F; /* navy — TopNav + legacy chrome */ --color-primary-hover: #284A78; --color-accent: var(--accent); /* focus / calculated totals — the accent */ /* INLINE TEXT LINKS are their own colour, not the brand accent. The accent is Sheens navy * (#1F3A5F); at text size, against near-black body ink, it reads as ordinary text and a link stops * announcing itself — which is exactly what happened to the 발주 link on 입고/출고. Buttons, focus * rings and totals keep the navy; only inline anchors take this. 8.6:1 on white (AA, and AAA for * body text). Every link-like control that must NOT be blue (.btn-*, .console__item, * .admin-table__row--link) already sets its own colour, so this reaches inline links only. */ --color-link: #1d4ed8; --color-link-hover: #1e40af; --color-bg-base: var(--canvas); /* page background */ --color-bg-surface: #FFFFFF; /* cards, modals, table backgrounds */ --color-border: #E3E6EB; /* Softer hairline for CARD outlines (Stripe-calm): cards read via whitespace + a very * subtle shadow, not a boxy edge. Table gridlines keep the stronger --color-border. */ --color-border-subtle: #ECEEF2; --color-text-primary: var(--ink); --color-text-secondary: var(--ink-muted); --color-text-muted: #8A93A1; --color-text-inverse: #FFFFFF; /* text on dark backgrounds (TopNav) */ --color-success: #2E7D57; --color-warning: #C2850C; --color-danger: #B3261E; --color-info: #2F6FB3; /* Status row tints (e.g. 부적합 row highlight on 3.1 — frontend §5.14) */ --color-bg-danger-tint: #FDF1F0; /* Unfilled part of an inline progress bar (발주 상세 입고/출고). Deliberately its own token and not * --color-border: a gridline and an empty bar are different things that happen to look similar * today, and retuning one must not silently move the other. */ --progress-track: #E4E8EF; /* ─── Interaction-state colours (Carbon / Material a11y) ─────────── * One subtle hover/active tint for rows & secondary controls, and one * focus colour — every control shares them (no per-control values). */ --color-bg-hover: #EEF1F5; /* row / secondary-control hover */ --color-bg-active: #E1E6EE; /* pressed / selected */ --color-focus: var(--color-accent); /* focus-ring colour */ /* ─── Spacing scale (frontend §2.3; 8px grid — Atlassian/Carbon) ─── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; /* ─── Form rhythm (Atlassian spacing guidance), as semantic aliases ─ * one place decides the vertical rhythm; components reference these. */ --space-label-gap: var(--space-2); /* 8px label → control */ --space-field-gap: var(--space-3); /* 12px between fields */ --space-section-pad: var(--space-4); /* 16px padding inside a section */ --space-block-gap: var(--space-6); /* 24px between blocks / sections */ /* ─── Control sizing / density ───────────────────────────────────── * ONE control height everywhere: 32px = Carbon `sm` · Ant `middle` · * Primer `medium`. Inputs, selects and buttons all use --control-height. */ --control-height: 32px; --control-height-sm: 28px; /* dense secondary (Carbon sm / Primer small) */ --control-pad-x: var(--space-3); /* 12px horizontal padding */ /* Read-only LIST row height = Carbon `short` / Ant `small` data-table row (40px). * Data-entry GRIDS are denser (36px) via `.admin-table--grid`. One token → easy to retune. */ --row-height: 40px; --row-height-grid: 36px; /* denser data-entry grid row (BOM 소요량, color matrix) */ /* ONE table-header look for EVERY table on the site — the hand-rolled .admin-table header AND the * AG Grid (.ag-theme-sheens) header both read from these, so a master-detail's left list header and * right grid header are identical in height + background. Retune here, nowhere else. */ --table-header-height: 36px; --table-header-bg: var(--color-bg-base); /* ─── Focus / disabled state (Carbon / Material a11y) ────────────── * One focus-visible ring recipe + one disabled treatment for ALL controls. */ --focus-ring: 0 0 0 3px rgba(31, 58, 95, 0.28); /* soft --accent (navy) ring */ --disabled-opacity: 0.5; /* ─── Radius (frontend §2.3) ───────────────────────────────────── */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; /* cards, modals */ --radius-lg: 12px; --radius-pill: 9999px; /* progress fills and compact status pills */ /* ─── Shadows (frontend §2.3) ──────────────────────────────────── */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); /* TopNav */ --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); /* modals, popups */ /* Card lift — soft two-layer, blue-gray-tinted (Stripe-calm); whitespace + this shadow define * the card, with a hairline at most. */ --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.05), 0 2px 5px rgba(16, 24, 40, 0.06); /* ─── Typography (frontend §2.1) ───────────────────────────────── */ --font-body: "Pretendard Variable", Pretendard, "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* ONE type ramp (every system — Carbon/Material/Primer/Ant/… — defines one). * Each role = size + weight + line-height; use a role, never an ad-hoc size. * Roles: h1 / h2 / h3 / body / label / caption (+ table, mono variants). */ --fs-h1: 28px; --fs-h2: 22px; --fs-h3: 18px; --fs-body: 14px; --fs-table: 13px; --fs-label: 12px; --fs-meta: 12px; /* alias of caption; kept for existing usages */ --fs-caption: 12px; --fs-mono: 13px; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-heading: 1.3; /* h1–h3 */ --lh-body: 1.5; /* Korean default */ --lh-table: 1.4; /* ─── Layout (frontend §2.4) ───────────────────────────────────── */ /* Figma canvas: 1440 wide; content frame sits at x=80, width=1280. * `.container` is `max-width: var(--layout-content-width); padding: ... 80px;` * — so content-width must be the OUTER (canvas) width 1440px, leaving the * inner content area at 1280px after the 80px gutters. Earlier this token * was 1280px which made the inner area only 1120px and caused the BOM body * to overflow on the right. */ --layout-canvas-width: 1440px; --layout-content-width: 1440px; --layout-side-margin: 80px; --layout-grid-cols: 12; --layout-grid-gutter: 20px; --layout-topnav-height: 56px; --layout-page-pad-top: 24px; }