@tobq/boardclip 0.0.0-stage → 2.1.108

package/site/shared/clipboard-tokens.css

@@ -0,0 +1,326 @@
+/* ============================================================
+   BoardClip design tokens - the single source of truth for the
+   whole product (app popup, editor, conflict view, AI-approval
+   modal, and the marketing site). Imported first by
+   clipboard-popup.css (@import) and by site/styles.css so every
+   surface renders from ONE palette/scale and cannot drift.
+
+   Three tiers:
+     (a) PRIMITIVES + ROLES on :root - raw scales plus the role
+                                       tokens components size with
+                                       (type, weight, control height,
+                                       radius, gutter, bar height)
+     (b) SEMANTIC on [data-theme]    - the colour names components
+                                       reference
+     (c) VARIANT overrides           - data-surface/-accent/-density/
+                                       -corners/-borders swap a small,
+                                       disjoint set of tokens
+   Components size text, controls and corners with the ROLE tokens
+   (--fs-meta/--fs-ui/--fs-text, --fw-*, --lh-*, --ctl-*, --r-ctl/
+   --r-chip/--r-panel, --gutter); the raw --sp-* and --r-1..4 scales
+   stay for spacing and inset corners. Density and corners remap the
+   role tokens directly (a role token resolved on :root would not see
+   a .bc-popup variant override of the primitive it points at).
+   Cascade (later wins on equal specificity):
+     primitives -> theme -> surface -> accent -> density -> corners/borders
+   All variant attributes ride on the SAME element that carries
+   data-theme (:root on <html> for the app/editor/modal, .bc-popup
+   on the demo window), mirrored in every selector below.
+   ============================================================ */
+
+/* (a) PRIMITIVES - raw scales, identical in every theme */
+:root {
+  /* Graphite ramp (cool-tinted neutral), dark -> light */
+  --g-950: #0b0d10;
+  --g-900: #0f1216;
+  --g-850: #14171b;
+  --g-800: #1b1f24;
+  --g-750: #23272e;
+  --g-700: #2d323a;
+  --g-600: #3f4650;
+  --g-500: #6b7280;
+  --g-400: #868d97;
+  --g-300: #a8afb8;
+  --g-200: #cdd2d8;
+  --g-100: #e6e8eb;
+  --g-050: #f4f5f7;
+  --white: #ffffff;
+
+  /* Brand accent (cool blue) + audition accents */
+  --blue-700: #1d4ed8;
+  --blue-600: #2563eb;
+  --blue-500: #3b82f6;
+  --blue-400: #60a5fa;
+  --blue-300: #93c5fd;
+  --teal-800: #115e59;
+  --teal-600: #0d9488;
+  --teal-500: #14b8a6;
+  --teal-400: #2dd4bf;
+
+  /* Functional status colours - never used as the brand accent.
+     500 = dark theme, 600 = light theme. */
+  --green-500: #34d399;
+  --green-600: #059669;
+  --amber-500: #f59e0b;
+  --amber-600: #d97706;
+  --red-500: #f87171;
+  --red-600: #dc2626;
+
+  /* The OS's own window-control colours, for the windows a page draws (the
+     website demo, Core.attachWebWindow): macOS traffic lights and their
+     glyph ink, the Windows close button's red. Never a UI accent. */
+  --os-mac-close: #ff5f57;
+  --os-mac-min: #febc2e;
+  --os-mac-max: #28c840;
+  --os-mac-ink: #00000099;
+  --os-win-close: #c42b1c;
+
+  /* Spacing scale (4/8-based) */
+  --sp-1: 2px;  --sp-2: 4px;  --sp-3: 6px;  --sp-4: 8px;   --sp-5: 10px;
+  --sp-6: 12px; --sp-7: 14px; --sp-8: 16px; --sp-10: 20px; --sp-12: 24px;
+  /* Left/right padding of every bar and content area, in every window */
+  --gutter: 14px;
+  --bar-h: 32px;
+
+  /* Radius scale + roles: controls, chips, floating surfaces */
+  --r-1: 4px; --r-2: 6px; --r-3: 8px; --r-4: 10px; --r-pill: 999px;
+  --r-ctl: 6px; --r-chip: 999px; --r-panel: 8px;
+
+  /* Type roles. meta = row meta, chips, overlines, foot/status text, counts;
+     ui = every label, menu item, button, input value, clip title/preview,
+     dialog body; text = anything you type into (search, editor, find, title,
+     merge panes); display = site hero only. Nothing smaller than 11px. */
+  --fs-meta: 11px; --fs-ui: 12px; --fs-text: 13px; --fs-display: 18px;
+  --lh-ui: 1.35; --lh-text: 1.5;
+  /* Two weights only */
+  --fw-regular: 400; --fw-strong: 600;
+  --font-sans: system-ui, "Segoe UI", -apple-system, sans-serif;
+  --font-mono: "Cascadia Code", "Consolas", ui-monospace, monospace;
+
+  /* Control heights: chips/keys/foot buttons, icon buttons/menu rows,
+     inputs/segmented/.btn. Height + horizontal padding, no vertical padding. */
+  --ctl-sm: 20px; --ctl-md: 24px; --ctl-lg: 28px;
+
+  /* Icon sizes (Material Symbols): md in a --ctl-md box, sm in a --ctl-sm box */
+  --icon-sm: 14px; --icon-md: 16px; --icon-lg: 18px;
+
+  /* Motion: the one duration + curve for every state transition */
+  --dur: 130ms;
+  --ease: cubic-bezier(.2, .7, .2, 1);
+
+  /* Glass blur (theme-independent) */
+  --glass-blur: blur(14px) saturate(1.3);
+}
+
+/* Theme-agnostic derived vars (reference semantic tokens set below, so they
+   resolve per element, accent and theme variants included) */
+:root[data-theme], .bc-popup[data-theme] {
+  /* The one scrollbar: an inset thumb (2px transparent border + padding-box
+     clip in the shared rule), so it works on any surface, glass included. */
+  --scrollbar-size: 8px;
+  --scrollbar-thumb: var(--line-strong);
+  --scrollbar-thumb-hover: var(--text-dim);
+  /* The one keyboard focus ring (box-shadow: no outline, no layout shift) */
+  --focus-ring: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);
+  /* Resting fill of a .btn: a tint of the text colour, so it reads on any
+     surface (popup, settings, an opaque dialog, glass). */
+  --ctl-fill: color-mix(in srgb, var(--text) 9%, transparent);
+  --ctl-fill-hover: color-mix(in srgb, var(--text) 15%, transparent);
+  /* A trailing control's edge: an icon button at the end of a bar or field
+     sits this far in, so its GLYPH (not its hover box) lands on the gutter
+     with the text above and below it. Here (not on :root) so it follows a
+     .bc-popup density override of --gutter / --ctl-md. */
+  --edge-ctl: calc(var(--gutter) - (var(--ctl-md) - var(--icon-md)) / 2);
+}
+
+/* (b) SEMANTIC - the ONLY colour names components reference. Keep names
+   stable across the redesign; only the mapped VALUES change.
+   Lines: --line = section/bar/pane dividers, --line-faint = list row
+   separators, --menu-edge = the 1px ring of floating surfaces. --line-strong
+   is a fill (scrollbar thumb, switch track), never a 1px line.
+   Hovers: --hover on in-surface transparent things, --menu-hover in menus. */
+:root[data-theme="dark"], .bc-popup[data-theme="dark"] {
+  color-scheme: dark;
+  --bg: var(--g-950);
+  --surface-solid: var(--g-850);
+  --surface2-solid: var(--g-800);
+  --input-solid: color-mix(in srgb, var(--g-100) 7%, transparent); /* a wash: lifts the band, the canvas and menus alike */
+  --surface: var(--surface-solid);
+  --surface2: var(--surface2-solid);
+  --input: var(--input-solid);
+  --menu: var(--g-800);                   /* floating menus/dialogs - stays OPAQUE under glass */
+  --menu-hover: var(--g-700);             /* menu-item hover - a step lighter than --menu so it reads */
+  --menu-edge: rgba(255, 255, 255, .15);  /* soft 1px ring so menus separate from the backdrop */
+  --text: var(--g-100);
+  --text-dim: var(--g-400);
+  --line: var(--g-750);
+  --line-strong: var(--g-700);
+  --line-faint: color-mix(in srgb, var(--g-050) 7%, transparent);
+  --hover: color-mix(in srgb, var(--g-100) 6%, transparent);
+  --similar-mix: 60%;                     /* a similar row's wash, as a share of --hover (.item.similar) */
+  --accent: var(--blue-500);
+  --accent-hover: var(--blue-400);
+  --accent-text: var(--blue-400);         /* accent AS TEXT: 4.5:1 on the surface and on --accent-bg */
+  --accent-bg: color-mix(in srgb, var(--accent) 16%, transparent);
+  --accent-bg-strong: color-mix(in srgb, var(--accent) 26%, transparent);
+  --active-fg: var(--g-950);              /* dark ink on blue = 5.7:1, beats white */
+  --shadow: rgba(0, 0, 0, .5);
+  --scrim: rgba(0, 0, 0, .5);             /* backdrop behind a modal dialog */
+  --green: var(--green-500);
+  --green-bg: color-mix(in srgb, var(--green) 16%, transparent);
+  --red: var(--red-500);
+  --red-bg: color-mix(in srgb, var(--red) 14%, transparent);
+  --danger-fg: var(--g-950);              /* ink on --red (a danger button); accent variants never touch it */
+  --pin: var(--amber-500);
+  --mark-bg: color-mix(in srgb, var(--accent) 22%, transparent);
+  --mark-bg-current: color-mix(in srgb, var(--accent) 50%, transparent);
+  --mark-fg: var(--blue-300);
+  --glass-tint: rgba(15, 18, 22, .62);
+  --canvas: var(--bg);
+}
+:root[data-theme="light"], .bc-popup[data-theme="light"] {
+  color-scheme: light;
+  --bg: var(--g-050);
+  --surface-solid: var(--white);
+  --surface2-solid: var(--g-050);
+  --input-solid: color-mix(in srgb, var(--g-900) 6%, transparent); /* a wash: reads on white and on the grey canvas */
+  --surface: var(--surface-solid);
+  --surface2: var(--surface2-solid);
+  --input: var(--input-solid);
+  --menu: var(--white);                   /* floating menus/dialogs - stays OPAQUE under glass */
+  --menu-hover: var(--g-100);             /* menu-item hover - light grey on the white menu */
+  --menu-edge: rgba(24, 27, 31, .16);     /* soft 1px ring (dark, since white is invisible on white) */
+  --text: var(--g-900);
+  --text-dim: var(--g-500);
+  --line: var(--g-100);
+  --line-strong: var(--g-200);
+  --line-faint: color-mix(in srgb, var(--g-900) 8%, transparent); /* was invisible on white */
+  --hover: color-mix(in srgb, var(--g-900) 7%, transparent); /* reads on white (the popup list, settings) */
+  --similar-mix: 35%;                     /* on white 60% sat too close to hover; hover stays the strongest neutral row state */
+  --accent: var(--blue-600);
+  --accent-hover: var(--blue-500);
+  --accent-text: var(--blue-700);         /* blue-600 is 4.0:1 on its own tint */
+  --accent-bg: color-mix(in srgb, var(--accent) 12%, transparent);
+  --accent-bg-strong: color-mix(in srgb, var(--accent) 20%, transparent);
+  --active-fg: var(--white);              /* white on blue-600 = 5.1:1, beats black */
+  --shadow: rgba(24, 24, 27, .14);
+  --scrim: rgba(15, 18, 22, .28);
+  --green: var(--green-600);
+  --green-bg: color-mix(in srgb, var(--green) 16%, transparent);
+  --red: var(--red-600);
+  --red-bg: color-mix(in srgb, var(--red) 12%, transparent);
+  --danger-fg: var(--white);              /* white on red-600 = 4.8:1 */
+  --pin: var(--amber-600);
+  --mark-bg: color-mix(in srgb, var(--accent) 16%, transparent);
+  --mark-bg-current: color-mix(in srgb, var(--accent) 40%, transparent);
+  --mark-fg: var(--blue-600);
+  --glass-tint: rgba(255, 255, 255, .84); /* light stays light over a dark desktop / dark system acrylic (.5 went mid-grey) */
+  --canvas: var(--bg);
+}
+
+/* (c) VARIANT OVERRIDES - small, disjoint sets, authored after the
+   theme blocks so they win by source order at equal specificity. */
+
+/* Surface: under glass the OS acrylic / vibrancy shows through. The
+   content (--canvas) is the one scrim; the chrome band (--surface) is a
+   LIFT over it, lighter than the content whatever the desktop is (two
+   tones, as on solid); a field is a wash over either. color-mix can't
+   read the token it is redefining, so these are authored per-theme
+   (higher specificity than the plain theme block, so they also win
+   cleanly). "solid" is a no-op that exists so the switcher can force
+   glass off. */
+:root[data-theme="dark"][data-surface="glass"], .bc-popup[data-theme="dark"][data-surface="glass"] {
+  --canvas: var(--glass-tint);
+  --surface: color-mix(in srgb, var(--white) 6%, transparent);
+  --surface2: color-mix(in srgb, var(--g-800) 58%, transparent);
+  --input: color-mix(in srgb, var(--g-100) 8%, transparent);
+}
+:root[data-theme="light"][data-surface="glass"], .bc-popup[data-theme="light"][data-surface="glass"] {
+  --canvas: var(--glass-tint);
+  --surface: color-mix(in srgb, var(--white) 70%, transparent);   /* the band: a white lift over the scrim, the blur still shows */
+  --surface2: color-mix(in srgb, var(--white) 72%, transparent);  /* WHITE, not grey - brighter frost for hover/selected */
+  /* A field is a dark WASH, as on solid light (a white one vanished on any
+     light frost and on the opaque white menu: dialogs, the demo page). */
+  --input: color-mix(in srgb, var(--g-900) 6%, transparent);
+  /* What shows through can still darken the frost: dim text one step darker keeps it readable. */
+  --text-dim: var(--g-600);
+}
+
+/* Accent: blue is the default (no block). accent-bg / mark-bg / focus ring
+   re-derive automatically because they are color-mix over --accent. */
+:root[data-accent="teal"], .bc-popup[data-accent="teal"] {
+  --accent: var(--teal-500);
+  --accent-hover: var(--teal-400);
+  --accent-text: var(--teal-400);
+  --mark-fg: var(--teal-400);
+}
+:root[data-accent="mono"], .bc-popup[data-accent="mono"] {
+  --accent: var(--g-300);
+  --accent-hover: var(--g-200);
+  --accent-text: var(--g-200);
+  --active-fg: var(--g-950);
+  --mark-fg: var(--g-100);
+}
+/* The light theme needs a darker step of both presets: teal-500 and g-300
+   read under 3:1 on white (check glyphs, focus ring, switch), and white ink
+   on teal-500 is 2.5:1. Each pair passes the same rule as a System / Custom
+   colour (ui-tokens.test.js checks it); teal as TEXT needs teal-800 (teal-600
+   is 3.4:1 on --g-050). */
+:root[data-theme="light"][data-accent="teal"], .bc-popup[data-theme="light"][data-accent="teal"] {
+  --accent: var(--teal-600);
+  --accent-hover: var(--teal-500);
+  --accent-text: var(--teal-800);
+  --active-fg: var(--g-950);
+  --mark-fg: var(--teal-600);
+}
+:root[data-theme="light"][data-accent="mono"], .bc-popup[data-theme="light"][data-accent="mono"] {
+  --accent: var(--g-700);
+  --accent-hover: var(--g-600);
+  --accent-text: var(--g-700);
+  --active-fg: var(--white);
+  --mark-fg: var(--g-900);
+}
+/* A System or Custom colour (Core.applyAppearance): data-accent="custom" plus
+   six inline vars, the colour's shade for each theme, the ink on it and its
+   text shade, already contrast-checked (Core.accentShades). The theme picks
+   its set, so a theme flip needs no script; hover and find-match text derive
+   here. */
+:root[data-theme="dark"][data-accent="custom"], .bc-popup[data-theme="dark"][data-accent="custom"] {
+  --accent: var(--accent-custom-dark);
+  --active-fg: var(--accent-ink-dark);
+  --accent-text: var(--accent-text-dark);
+}
+:root[data-theme="light"][data-accent="custom"], .bc-popup[data-theme="light"][data-accent="custom"] {
+  --accent: var(--accent-custom-light);
+  --active-fg: var(--accent-ink-light);
+  --accent-text: var(--accent-text-light);
+}
+:root[data-accent="custom"], .bc-popup[data-accent="custom"] {
+  --accent-hover: color-mix(in srgb, var(--accent) 82%, var(--text));
+  --mark-fg: color-mix(in srgb, var(--accent) 70%, var(--text));
+}
+
+/* Density: compact tightens spacing, the gutter and control heights. The type
+   roles stay put (meta 11 / ui 12 / text 13 are already one step apart, so a
+   smaller ui or text would merge with its neighbour), and every spacing and
+   control step stays distinct. ui-tokens.test.js checks both under each
+   density. */
+:root[data-density="compact"], .bc-popup[data-density="compact"] {
+  --sp-3: 5px; --sp-4: 6px; --sp-5: 8px; --sp-6: 10px; --sp-7: 12px; --sp-8: 14px;
+  --gutter: 12px;
+  --ctl-sm: 18px; --ctl-md: 22px; --ctl-lg: 26px;
+}
+
+/* Corners: sharp tightens the radius scale and the control/panel roles
+   (chips stay pills). */
+:root[data-corners="sharp"], .bc-popup[data-corners="sharp"] {
+  --r-1: 2px; --r-2: 3px; --r-3: 4px; --r-4: 4px;
+  --r-ctl: 3px; --r-panel: 4px;
+}
+
+/* Borders: borderless dissolves divider lines (keeps a faint strong fill). */
+:root[data-borders="borderless"], .bc-popup[data-borders="borderless"] {
+  --line: transparent;
+  --line-faint: transparent;
+  --line-strong: color-mix(in srgb, var(--text) 8%, transparent);
+}