/* ============================================================ Weavery — Design Tokens Rebrand of Printsoft (still "by nauni"). Direction: Clinical — sky-700 primary, cool neutrals, Rubik, pill statuses, 8px radii. THEMING CONTRACT ---------------- Every colour token is defined twice: once on :root (light) and once on [data-theme="dark"]. Put the resolved theme on : Never read the user's choice straight from the DOM — persist the PREFERENCE ("light" | "dark" | "system") and resolve it to one of the two concrete themes. See the "Theme toggle" card. ============================================================ */ :root { color-scheme: light; /* ── Primary — Sky ────────────────────────────────────────── */ --color-primary-50: #eff8ff; --color-primary-100: #d8ecfa; --color-primary-200: #bae0f7; --color-primary-400: #38bdf8; --color-primary-600: #0284c7; --color-primary-700: #0369a1; --color-primary-800: #075985; --color-primary: #0369a1; /* buttons, active nav, links, brand */ --color-primary-dark: #075985; /* button hover */ --color-primary-hover: #eff8ff; /* active nav bg, chip selected bg */ --color-primary-subtle: #d8ecfa; /* tag badges, role badge */ --color-primary-border: #bae0f7; /* tinted-surface borders */ --color-primary-ring: #38bdf8; /* focus ring */ --color-primary-text: #075985; /* active nav label, breadcrumb link */ --color-on-primary: #ffffff; /* text/icons ON primary fill */ /* ── Neutrals — cool grey ─────────────────────────────────── */ --color-bg: #f7f9fb; /* page background */ --color-surface: #ffffff; /* cards, sidebar, panels */ --color-surface-raised: #ffffff; /* menus, popovers, dialogs */ --color-surface-sunken: #fbfcfd; /* table head, inset wells */ --color-border: #e4e8ed; /* card borders, dividers */ --color-border-light: #eff2f5; /* inner dividers, row dividers */ --color-border-mid: #cdd4dc; /* input borders */ --color-text-primary: #0f1922; /* headings, table values */ --color-text-secondary: #3d4b57; /* body text */ --color-text-mid: #4b5866; /* nav labels */ --color-text-muted: #6c7a87; /* helper text */ --color-text-placeholder: #9aa6b2; /* placeholders, timestamps */ --color-text-disabled: #cdd4dc; /* chevrons, disabled icons */ --color-row-hover: #fafcfd; /* table row hover */ --color-overlay: rgba(15,25,34,0.34); /* ── Semantic ─────────────────────────────────────────────── */ --color-error: #d92d20; --color-error-bg: #fef3f2; --color-error-border: #fecdca; --color-error-text: #b42318; --color-warning: #f79009; --color-warning-bg: #fffaeb; --color-warning-border: #fef0c7; --color-warning-text: #b54708; --color-success: #12b76a; --color-success-bg: #ecfdf3; --color-success-border: #a6f4c5; --color-success-text: #027a48; --color-info-bg: #eff8ff; --color-info-border: #d1e9ff; --color-info-text: #175cd3; /* ── Order status pills ───────────────────────────────────── */ --color-status-received-bg: #f2f4f7; --color-status-received-text: #344054; --color-status-routed-bg: #d1e9ff; --color-status-routed-text: #175cd3; --color-status-sent-bg: #e0eaff; --color-status-sent-text: #3538cd; --color-status-processing-bg: #ebe9fe; --color-status-processing-text: #5925dc; --color-status-completed-bg: #d1fadf; --color-status-completed-text: #027a48; --color-status-failed-bg: #fee4e2; --color-status-failed-text: #b42318; /* ── Entity status (users / organisations) ────────────────── */ /* active = green, inactive = NEUTRAL grey (not red), archived = amber text only */ --color-entity-active-bg: #d1fadf; --color-entity-active-text: #027a48; --color-entity-inactive-bg: #f2f4f7; --color-entity-inactive-text: #6c7a87; --color-entity-archived-text: #b54708; /* ── Role badge (rounded-md, not a pill) ─────────────────── */ --color-role-bg: #d8ecfa; --color-role-text: #075985; /* ── Category tints (product grid) ───────────────────────── */ --color-apparel-bg: #eff8ff; --color-apparel-border: #d1e9ff; --color-drinkware-bg: #fffaeb; --color-drinkware-border: #fef0c7; --color-bags-bg: #ecfdf3; --color-bags-border: #a6f4c5; --color-prints-bg: #f4f3ff; --color-prints-border: #ebe9fe; --color-home-bg: #fff1f3; --color-home-border: #ffe4e8; --color-accessories-bg: #f8fafc; --color-accessories-border: #f1f5f9; /* ── Shadows ─────────────────────────────────────────────── */ --shadow-xs: 0 1px 2px rgba(15,25,34,0.05); --shadow-sm: 0 1px 3px rgba(15,25,34,0.07), 0 1px 2px rgba(15,25,34,0.04); --shadow-md: 0 4px 8px rgba(15,25,34,0.08), 0 2px 4px rgba(15,25,34,0.05); --shadow-lg: 0 12px 20px rgba(15,25,34,0.10), 0 4px 8px rgba(15,25,34,0.05); --shadow-focus: 0 0 0 2px #eff8ff, 0 0 0 4px #38bdf8; } [data-theme="dark"] { color-scheme: dark; /* On dark the accent has to LIGHTEN to stay legible — primary and primary-dark swap direction, and "on primary" becomes deep ink. */ --color-primary-50: #0b2a3d; --color-primary-100: #0e3f5c; --color-primary-200: #12557a; --color-primary-400: #38bdf8; --color-primary-600: #7dd3fc; --color-primary-700: #38bdf8; --color-primary-800: #7dd3fc; --color-primary: #38bdf8; --color-primary-dark: #7dd3fc; --color-primary-hover: rgba(56,189,248,0.12); --color-primary-subtle: rgba(56,189,248,0.18); --color-primary-border: rgba(56,189,248,0.30); --color-primary-ring: #38bdf8; --color-primary-text: #7dd3fc; --color-on-primary: #04202f; --color-bg: #0b1219; --color-surface: #111b24; --color-surface-raised: #16222c; --color-surface-sunken: #142029; --color-border: #1f2d3a; --color-border-light: #19252f; --color-border-mid: #31414f; --color-text-primary: #eaf1f7; --color-text-secondary: #adbdc9; --color-text-mid: #9fb0bd; --color-text-muted: #7e8f9d; --color-text-placeholder: #5b6a78; --color-text-disabled: #3b4a58; --color-row-hover: #15212b; --color-overlay: rgba(0,0,0,0.60); --color-error: #f97066; --color-error-bg: rgba(249,112,102,0.12); --color-error-border: rgba(249,112,102,0.28); --color-error-text: #fda29b; --color-warning: #fdb022; --color-warning-bg: rgba(253,176,34,0.12); --color-warning-border: rgba(253,176,34,0.28); --color-warning-text: #fec84b; --color-success: #32d583; --color-success-bg: rgba(50,213,131,0.12); --color-success-border: rgba(50,213,131,0.28); --color-success-text: #6ce9a6; --color-info-bg: rgba(56,189,248,0.12); --color-info-border: rgba(56,189,248,0.28); --color-info-text: #7dd3fc; /* Status pills go translucent-tint + light ink so they read as quiet fills on a dark surface rather than glowing blocks. */ --color-status-received-bg: #1c2833; --color-status-received-text: #b3c2ce; --color-status-routed-bg: rgba(56,189,248,0.14); --color-status-routed-text: #7dd3fc; --color-status-sent-bg: rgba(129,140,248,0.16); --color-status-sent-text: #a5b4fc; --color-status-processing-bg: rgba(167,139,250,0.16); --color-status-processing-text: #c4b5fd; --color-status-completed-bg: rgba(50,213,131,0.14); --color-status-completed-text: #6ce9a6; --color-status-failed-bg: rgba(249,112,102,0.14); --color-status-failed-text: #fda29b; --color-entity-active-bg: rgba(50,213,131,0.14); --color-entity-active-text: #6ce9a6; --color-entity-inactive-bg: #1c2833; --color-entity-inactive-text: #9fb0bd; --color-entity-archived-text: #fec84b; --color-role-bg: rgba(56,189,248,0.16); --color-role-text: #7dd3fc; --color-apparel-bg: rgba(56,189,248,0.10); --color-apparel-border: rgba(56,189,248,0.22); --color-drinkware-bg: rgba(253,176,34,0.10); --color-drinkware-border: rgba(253,176,34,0.22); --color-bags-bg: rgba(50,213,131,0.10); --color-bags-border: rgba(50,213,131,0.22); --color-prints-bg: rgba(167,139,250,0.10); --color-prints-border: rgba(167,139,250,0.22); --color-home-bg: rgba(253,138,170,0.10); --color-home-border: rgba(253,138,170,0.22); --color-accessories-bg: #16222c; --color-accessories-border: #1f2d3a; --shadow-xs: 0 1px 2px rgba(0,0,0,0.40); --shadow-sm: 0 1px 3px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.30); --shadow-md: 0 4px 8px rgba(0,0,0,0.50), 0 2px 4px rgba(0,0,0,0.30); --shadow-lg: 0 12px 20px rgba(0,0,0,0.55), 0 4px 8px rgba(0,0,0,0.35); --shadow-focus: 0 0 0 2px #0b1219, 0 0 0 4px #38bdf8; } :root { /* ── Typography ──────────────────────────────────────────── */ /* Rubik across the whole UI — the wordmark is the same family at 700, so there is no second webfont to load. */ --font-brand: "Rubik", system-ui, sans-serif; /* Nauni's own face, for the "by nauni" endorsement line only. The Nauni wordmark is artwork and is never typeset; Archivo at width 112 is how the Nauni design system approximates its extended lowercase letterforms. */ --font-nauni: "Archivo", system-ui, sans-serif; --font-sans: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace; /* ── Type Scale ──────────────────────────────────────────── */ --text-xs: 0.75rem; /* 12px — badges, timestamps, breadcrumbs */ --text-13: 0.8125rem; /* 13px — dense table cells, toolbar controls */ --text-sm: 0.875rem; /* 14px — body, labels, buttons, nav */ --text-base: 1rem; /* 16px — section h2 */ --text-lg: 1.125rem; /* 18px — detail h1 */ --text-xl: 1.1875rem; /* 19px — page title in the header bar */ --text-2xl: 1.5rem; /* 24px — login title */ --text-3xl: 1.75rem; /* 28px — wordmark on login */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; /* ── Spacing ─────────────────────────────────────────────── */ --space-0-5: 0.125rem; --space-1: 0.25rem; --space-1-5: 0.375rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; /* ── Shell dimensions ────────────────────────────────────── */ /* Chrome came down from 64+64: the brand block and the header bar are both 56px, and page padding is 20px instead of 32px. That returns ~28px of vertical space on every screen and a full row on dense lists. --page-pad-tight is for board/station screens. */ --sidebar-w: 224px; --sidebar-w-collapsed: 56px; --brandbar-h: 56px; --topbar-h: 56px; --page-pad: 20px; --page-pad-tight: 12px; /* ── Density ─────────────────────────────────────────────── */ --row-h: 38px; /* default list row */ --row-h-compact: 32px; /* compact toggle */ --row-h-touch: 44px; /* station screens on tablets */ --control-h: 34px; /* inputs, selects, buttons in toolbars */ /* ── Border Radius ───────────────────────────────────────── */ --radius-sm: 4px; /* checkbox, micro-tag */ --radius-md: 6px; /* badges, icon buttons */ --radius-lg: 8px; /* buttons, inputs, nav items, menus */ --radius-xl: 12px; /* cards, panels */ --radius-2xl: 16px; /* large icon containers */ --radius-full: 9999px; /* pills, chips, status badges */ /* ── Transitions ─────────────────────────────────────────── */ --transition-fast: 150ms ease; /* @kind other */ --transition-colors: color 150ms ease, background-color 150ms ease, border-color 150ms ease; --transition-all: all 150ms ease; /* @kind other */ --transition-transform: transform 150ms ease; /* @kind other */ } /* ──────────────────────────────────────────────────────────── Element defaults ──────────────────────────────────────────────────────────── */ body { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--color-text-primary); background: var(--color-bg); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; } h1 { font-size: var(--text-xl); font-weight: var(--weight-semibold); color: var(--color-text-primary); line-height: var(--leading-tight); letter-spacing: -0.02em; margin: 0 } h2 { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-text-primary); line-height: var(--leading-tight); letter-spacing: -0.01em; margin: 0 } h3 { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-primary); margin: 0 } p { font-size: var(--text-sm); color: var(--color-text-mid); line-height: var(--leading-normal); margin: 0 } label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-secondary) } code, kbd, pre { font-family: var(--font-mono); font-size: var(--text-xs) } a { color: var(--color-primary); text-decoration: none } a:hover { color: var(--color-primary-dark); text-decoration: underline; text-underline-offset: 2px } /* The wordmark — caps, with three letters drawn rather than typeset. Both E's are three bars with a shortened middle arm; the A is a bare chevron kerned tight into the V. Markup + live in assets/_wordmark-snippet.html. Capitals need the tracking opened back up from the old lowercase -0.03em. */ .brand { font-family: var(--font-brand); font-weight: var(--weight-extrabold, 800); letter-spacing: -0.01em; line-height: 1; text-transform: uppercase; color: var(--color-text-primary); white-space: nowrap; } .brand-sky { color: var(--color-primary); } /* Drawn glyphs are sized in em against the cap height, so one definition serves every size. Bottom edge sits on the text baseline. */ .brand-g { display: inline-block; vertical-align: baseline; height: 0.71em; margin: 0 0.02em; } .brand-g--e { width: 0.60em; } /* A pointed A beside a V wants the classic tight AV kern — the diagonals nest instead of facing each other across a gap. */ .brand-g--a { width: 0.64em; margin-left: 0.005em; margin-right: -0.07em; } /* The endorsement is Nauni's supplied artwork, never typeset. Baseline aligns because "nauni" is pure x-height — no ascenders or descenders. */ .brand-endorse { display: flex; justify-content: flex-end; align-items: baseline; gap: 0.38em; font-size: 0.34em; } .brand-endorse > span { font-family: var(--font-nauni); font-variation-settings: "wdth" 112; font-weight: var(--weight-medium); color: var(--color-text-secondary); letter-spacing: 0.01em; } .brand-endorse img { display: block; height: 0.85em; width: auto; } .brand-endorse img.nw-dark { display: none; } [data-theme="dark"] .brand-endorse img.nw-light { display: none; } [data-theme="dark"] .brand-endorse img.nw-dark { display: block; } .brand-tag { font-family: var(--font-nauni); font-variation-settings: "wdth" 112; font-weight: var(--weight-medium); font-size: 0.5625rem; letter-spacing: 0.01em; color: var(--color-text-placeholder); } /* ──────────────────────────────────────────────────────────── Component patterns ──────────────────────────────────────────────────────────── */ .btn-primary { background: var(--color-primary); color: var(--color-on-primary); padding: 0.5rem 1rem; border-radius: var(--radius-lg); border: none; font: var(--weight-medium) var(--text-sm) var(--font-sans); cursor: pointer; transition: var(--transition-colors); } .btn-primary:hover { background: var(--color-primary-dark) } .btn-primary:disabled { opacity: 0.5; cursor: not-allowed } .btn-secondary { background: var(--color-surface); color: var(--color-text-secondary); border: 1px solid var(--color-border); padding: 0.5rem 1rem; border-radius: var(--radius-lg); font: var(--weight-medium) var(--text-sm) var(--font-sans); cursor: pointer; transition: var(--transition-colors); } .btn-secondary:hover { background: var(--color-bg) } .btn-danger { background: var(--color-error); color: #fff; padding: 0.5rem 1rem; border-radius: var(--radius-lg); border: none; font: var(--weight-medium) var(--text-sm) var(--font-sans); cursor: pointer; transition: var(--transition-colors); } .btn-icon { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-text-muted); cursor: pointer; transition: var(--transition-colors); } .btn-icon:hover { background: var(--color-bg); color: var(--color-text-secondary) } .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-5); } .card-hover:hover { box-shadow: var(--shadow-sm) } .input, .select { width: 100%; height: var(--control-h); border: 1px solid var(--color-border-mid); border-radius: var(--radius-lg); padding: 0 0.75rem; font: var(--text-sm) var(--font-sans); color: var(--color-text-primary); background: var(--color-surface); outline: none; transition: border-color 150ms ease, box-shadow 150ms ease; } .input::placeholder { color: var(--color-text-placeholder) } .input:focus, .select:focus { border-color: var(--color-primary-ring); box-shadow: 0 0 0 2px var(--color-primary-hover); } .input:disabled, .select:disabled { background: var(--color-bg); color: var(--color-text-placeholder); cursor: not-allowed; } /* Filter bar — ONE definition for every list screen. Replaces the select class string that was duplicated across six pages. */ .filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) } .filter-bar .select { width: auto; min-width: 9rem; flex: 0 1 auto; font-size: var(--text-13) } .filter-bar .input { width: auto; flex: 0 1 250px; font-size: var(--text-13) } .filter-bar .spacer { flex: 1 1 auto } .filter-count { font-size: var(--text-13); color: var(--color-text-muted); font-variant-numeric: tabular-nums } /* Applied-filter chip — removable, shows what is narrowing the list */ .filter-chip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.5rem 0.25rem 0.625rem; border-radius: var(--radius-full); background: var(--color-primary-hover); color: var(--color-primary-text); border: 1px solid var(--color-primary-border); font-size: var(--text-xs); font-weight: var(--weight-medium); } .filter-chip button { border: 0; background: none; color: inherit; cursor: pointer; opacity: 0.7; padding: 0; line-height: 1 } .filter-chip button:hover { opacity: 1 } .chip { display: inline-flex; align-items: center; padding: 0.375rem 0.75rem; border-radius: var(--radius-full); background: var(--color-border-light); color: var(--color-text-mid); font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer; transition: var(--transition-colors); } .chip:hover { background: var(--color-border) } .chip.active { background: var(--color-primary); color: var(--color-on-primary) } /* Menu / popover — ONE primitive. Radii and widths used to drift (rounded-lg vs rounded-xl, min-w 180/230/240px). */ .menu { min-width: 220px; background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-1) 0; } .menu-item { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: 0.5rem 0.75rem; background: none; border: 0; text-align: left; font: var(--text-sm) var(--font-sans); color: var(--color-text-secondary); cursor: pointer; transition: var(--transition-colors); } .menu-item:hover { background: var(--color-bg); color: var(--color-text-primary) } .menu-item.danger { color: var(--color-error-text) } .menu-item.danger:hover { background: var(--color-error-bg) } .menu-item:disabled { color: var(--color-text-disabled); cursor: not-allowed; background: none } .menu-label { padding: 0.375rem 0.75rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-placeholder) } .menu-sep { height: 1px; background: var(--color-border-light); margin: var(--space-1) 0 } /* Data list table — sticky head is the DEFAULT, not the exception */ .table-wrap { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); overflow: auto; } .table { width: 100%; border-collapse: separate; border-spacing: 0 } .table thead th { position: sticky; top: 0; z-index: 2; text-align: left; white-space: nowrap; padding: 0.625rem 0.75rem; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-muted); background: var(--color-surface-sunken); border-bottom: 1px solid var(--color-border); } .table tbody td { height: var(--row-h); padding: 0 0.75rem; font-size: var(--text-13); color: var(--color-text-secondary); border-bottom: 1px solid var(--color-border-light); white-space: nowrap; } .table tbody tr:last-child td { border-bottom: 0 } .table tbody tr:hover td { background: var(--color-row-hover) } .table tbody tr[aria-selected="true"] td { background: var(--color-primary-hover) } .table .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono) } .table .id { font-family: var(--font-mono); color: var(--color-text-primary) } /* Frozen first column for wide tables — pairs with the column picker */ .table .freeze { position: sticky; left: 0; z-index: 1; background: var(--color-surface) } .table thead .freeze { z-index: 3 } .table.compact tbody td { height: var(--row-h-compact) } .table.touch tbody td { height: var(--row-h-touch) } .status-pill { display: inline-flex; align-items: center; padding: 0.125rem 0.625rem; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-medium); } .badge-role { display: inline-flex; padding: 0.0625rem 0.375rem; border-radius: var(--radius-sm); background: var(--color-role-bg); color: var(--color-role-text); font-size: var(--text-xs); font-weight: var(--weight-medium); } .badge-version { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-primary-text); background: var(--color-primary-hover); padding: 0.125rem 0.5rem; border-radius: var(--radius-md); } .nav-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; border-radius: var(--radius-lg); font-size: var(--text-sm); color: var(--color-text-mid); text-decoration: none; transition: var(--transition-colors); } .nav-item:hover { background: var(--color-bg); color: var(--color-text-primary); text-decoration: none } .nav-item.active { background: var(--color-primary-hover); color: var(--color-primary-text); font-weight: var(--weight-medium); } /* Theme toggle — three-state segmented control (Light / Dark / System) */ .theme-toggle { display: inline-flex; padding: 2px; gap: 2px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); } .theme-toggle button { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 26px; padding: 0; border: 0; border-radius: var(--radius-md); background: none; color: var(--color-text-muted); cursor: pointer; transition: var(--transition-colors); } .theme-toggle button:hover { color: var(--color-text-primary) } .theme-toggle button[aria-pressed="true"] { background: var(--color-surface); color: var(--color-primary-text); box-shadow: var(--shadow-xs); }