/* * Consentics brand override for django-brickwork's --bw-* token set * (django-brickwork 0.10.0). * * 0.10.0 base-theme derives its whole surface scale, muted foregrounds, * accent family, status tiers, elevation ladder, type scale, and density * rhythm from a small set of primitives, live in the browser via * color-mix(), with no rebuild. This file is a full elevation pass over * that derived surface (not just the seven base colours): it stays inside * the documented aubergine palette (docs/DESIGN.md) while pushing the * console from "correct but minimal" (0.3.0-era pilot) to a considered, * gently-lifted warm-paper ops console per the design brief (2026-08-02, * design authority granted by the owner for this pass). * * Structure: LIGHT tier first (the default theme, --color-* 1:1 per * docs/DESIGN.md), then DARK tier (the constructed aubergine-field tier, * unchanged in intent from the 0.3.0 file, refreshed onto the 0.10.0 * token surface), then shared cross-theme tokens (type scale, radius, * focus ring, motion) that do not vary by theme. * * Every override below carries a one-line WHY. No colour outside the * documented palette (ink/field/canvas/surface/border/accent/accent-soft/ * danger/granted/pending) is introduced. accent-soft stays dark-field-only * per DESIGN.md's contrast discipline; it is never used as a light-surface * colour, including in the elevation/wash tuning below. * * Loaded via templates/shell/_bw_head_extra.html in {% block head_extra %} * on brickwork/shell/base.html AFTER the brickwork.css link, so these * declarations win on equal specificity. Plain stable-filename static * asset (like brickwork.css itself), NOT part of the vite bundle: do not * @import it from main.css; it is linked with a bare {% static %} tag. */ /* ========================================================================== LIGHT (default theme, docs/DESIGN.md "Colour tokens") ========================================================================== */ [data-theme="light"] { /* --- Seven base colours: 1:1 product palette mapping --- */ --bw-color-surface: #ffffff; /* --color-surface */ --bw-color-fg: #211A1E; /* --color-ink */ --bw-color-border: #EAE3DF; /* --color-border */ --bw-color-accent: #5C2F52; /* --color-accent */ --bw-color-danger: #c41e1e; /* --color-danger */ --bw-color-success: #15803d; /* --color-consent-granted */ --bw-color-warning: #b45309; /* --color-consent-pending */ --bw-color-fg-on-accent: #ffffff; /* white on aubergine accent: 10.59:1, matches .c-btn-primary */ --bw-color-info: var(--bw-color-accent); /* three-role brand (danger/granted/pending), no dedicated info hue */ /* * --- Depth: warm paper, not white-on-white --- * base-theme's default surface-sunken/raised both collapse to near-white * on a white --color-surface, so cards and canvas read as flat and * undifferentiated. Consentics already has a second surface value for * this: --color-canvas (#F8F5F1, warm paper) is the page background; * --color-surface (#ffffff) is the raised card/table/panel plate. Wiring * sunken to canvas gives page chrome (table stripes, disabled fields, * skeleton ground) a warm recess relative to the white cards sitting on * it, which is exactly the "gently lifted" read the brief asks for, * achieved with a real colour step instead of a shadow. */ --bw-color-surface-sunken: #F8F5F1; /* --color-canvas: warm-paper recess under raised white cards */ --bw-color-surface-raised: #ffffff; /* --color-surface: unchanged, cards stay pure white against the paper */ /* * --- Accent family: rationed, on-brand, never a second colour --- * accent-hover: base-theme's color-mix(accent 89%, black) is close to * correct in spirit (a darkened accent for hover/active) but is tuned * against a generic blue; re-authored explicitly against aubergine so * the darkening reads as "the same colour, pressed" rather than * shifting hue. accent-subtle: this is the single most-seen accent * surface in the console (active nav row, hover row, selected table * row), so it is authored, not left to the generic 7% mix, at a low * enough alpha to read as a wash on warm paper, never a second block * colour, per DESIGN.md "hierarchy from spacing before colour" and * "the field is a brand field, not a second accent sprayed on every * link". */ --bw-color-accent-hover: color-mix(in oklab, var(--bw-color-accent) 85%, black); /* pressed/hover aubergine, darkened not hue-shifted */ --bw-color-accent-subtle: color-mix(in oklab, var(--bw-color-accent) 8%, #ffffff); /* low-alpha aubergine wash: active nav bg, hover row, selected row */ /* * --- Status tiers: consent-state semantics, isolated from the accent --- * DESIGN.md requires granted/pending/danger to read cleanly and stay * isolated from the aubergine signal. base-theme's generic -subtle/ * -border/-strong/-fg formulas are directionally right (light mixes for * fills, darker mixes for text-on-tint) but are re-derived here from the * documented hex values rather than the primitive gray/red/amber/green * ramp, so a consent chip's tint is provably built from * --color-consent-granted / --color-consent-pending / --color-danger and * nothing else. */ --bw-color-success-subtle: color-mix(in oklab, var(--bw-color-success) 10%, #ffffff); --bw-color-success-border: color-mix(in oklab, var(--bw-color-success) 32%, #ffffff); --bw-color-success-fg: color-mix(in oklab, var(--bw-color-success) 88%, black); --bw-color-warning-subtle: color-mix(in oklab, var(--bw-color-warning) 10%, #ffffff); --bw-color-warning-border: color-mix(in oklab, var(--bw-color-warning) 32%, #ffffff); --bw-color-warning-fg: color-mix(in oklab, var(--bw-color-warning) 88%, black); --bw-color-danger-subtle: color-mix(in oklab, var(--bw-color-danger) 10%, #ffffff); --bw-color-danger-border: color-mix(in oklab, var(--bw-color-danger) 32%, #ffffff); --bw-color-danger-fg: color-mix(in oklab, var(--bw-color-danger) 88%, black); /* * --- Focus ring: considered, on-brand, always visible --- * base-theme already points --bw-color-focus-ring at --bw-color-accent, * which resolves correctly once --bw-color-accent is aubergine above; no * override needed here. Ring geometry (width/offset/style) is set in the * shared cross-theme block below since it does not vary by theme. */ /* * --- Nav active state: text also darkens, not just the wash --- * base-theme derives nav-item-active-text from accent-hover; keeping * that derivation (no override) means it now resolves to the aubergine * hover tone above, which is legible on the accent-subtle wash without * introducing a second hue. */ } /* ========================================================================== DARK (constructed aubergine-field tier; default theme stays light) ========================================================================== */ [data-theme="dark"] { /* --- Seven base colours: unchanged construction from the 0.3.0 file --- */ --bw-color-surface: #2E1B2A; /* --color-field, the brand's reserved dark surface */ --bw-color-fg: #F8F5F1; /* --color-canvas, as paper-on-ink */ --bw-color-border: color-mix(in srgb, #F8F5F1 18%, #2E1B2A); /* paper-tinted border on the dark field */ --bw-color-accent: #C98FB4; /* --color-accent-soft, the brand's dark-field accent */ --bw-color-danger: #e05a5a; /* --color-danger lightened for the dark ground */ --bw-color-success: #3fae6b; /* --color-consent-granted lightened for the dark ground */ --bw-color-warning: #e0a339; /* --color-consent-pending lightened for the dark ground */ --bw-color-fg-on-accent: #211A1E; /* dark ink on light accent-soft: white fails contrast here */ --bw-color-info: var(--bw-color-accent); /* same three-role collapse as light */ /* * --- Depth: a field that has a floor and a raised plate --- * Dark has no second brand surface to borrow (field is the only reserved * dark colour), so sunken/raised are built as black/white mixes over * field itself, same technique base-theme uses, tuned lighter on the * raised step so cards read as a distinct lifted plate against the * field rather than nearly merging with it. */ --bw-color-surface-sunken: color-mix(in oklab, var(--bw-color-surface) 82%, black); --bw-color-surface-raised: color-mix(in oklab, var(--bw-color-surface) 90%, white); /* * --- Accent family on the dark field --- * accent here is accent-soft, a light pink; darkening it for hover would * push it towards mid-tone mud, so hover instead desaturates towards * white slightly (the "pressed" cue on a light accent against a dark * ground reads better as brightening, not darkening). accent-subtle is * a restrained tint of accent-soft into the field, for the same * nav/hover/selected-row roles as light. */ --bw-color-accent-hover: color-mix(in oklab, var(--bw-color-accent) 92%, white); --bw-color-accent-subtle: color-mix(in oklab, var(--bw-color-accent) 22%, var(--bw-color-surface)); /* --- Status tiers: lightened semantics, tinted into the field, isolated from accent --- */ --bw-color-success-subtle: color-mix(in oklab, var(--bw-color-success) 24%, var(--bw-color-surface)); --bw-color-success-border: color-mix(in oklab, var(--bw-color-success) 50%, var(--bw-color-surface)); --bw-color-success-fg: color-mix(in oklab, var(--bw-color-success) 82%, white); --bw-color-warning-subtle: color-mix(in oklab, var(--bw-color-warning) 24%, var(--bw-color-surface)); --bw-color-warning-border: color-mix(in oklab, var(--bw-color-warning) 50%, var(--bw-color-surface)); --bw-color-warning-fg: color-mix(in oklab, var(--bw-color-warning) 82%, white); --bw-color-danger-subtle: color-mix(in oklab, var(--bw-color-danger) 24%, var(--bw-color-surface)); --bw-color-danger-border: color-mix(in oklab, var(--bw-color-danger) 50%, var(--bw-color-surface)); --bw-color-danger-fg: color-mix(in oklab, var(--bw-color-danger) 82%, white); } /* ========================================================================== SHARED (cross-theme: type scale, radius, elevation ladder, density, focus ring, motion). None of these vary between light and dark, so they are set once outside the [data-theme] blocks. ========================================================================== */ :root { /* * --- Radius: DESIGN.md's tight product restraint, not brickwork's * softer generic defaults --- * base-theme ships --bw-radius-md (0.375rem) as the button/input radius * and --bw-radius-lg (0.5rem) as the card radius; DESIGN.md's product * scale is tighter on both counts (control 0.25rem, card 0.375rem, * tables sharp). We override the CANONICAL radius names: .bw-input reads * --bw-radius-md, .bw-card reads --bw-radius-lg, and the button/input * radius reads --bw-component-button-radius (all confirmed against the * 1.0.0rc1 brickwork.css). * NOTE (brickwork 1.0.0rc1, ADR-054 Phase b token re-grammar): the old * names --bw-size-radius-* and --bw-button-radius are now DEPRECATED * READ-aliases (old: var(--new)), so WRITING them no longer reaches the * components, which read the canonical names. We therefore write the * canonical names. Do not revert to --bw-size-radius-* here: that regresses * silently (cards/inputs snap back to brickwork's defaults). */ --bw-component-button-radius: var(--bw-radius-sm); /* 0.25rem = --radius-control: buttons, inputs share the tight control radius */ --bw-radius-md: 0.25rem; /* 0.25rem = --radius-control: .bw-input and other md-radius controls */ --bw-radius-lg: 0.375rem; /* 0.375rem = --radius-card: .bw-card and other lg-radius surfaces */ /* * --- Elevation: hairline-first, a barely-there lift, never Material --- * DESIGN.md: "hairline borders over shadows in product" and "elevation: * none by default; hairline borders do separation work." .bw-card * already pairs elevation-1 with a hairline border and an inset * top-light (box-shadow: var(--bw-elevation-1), inset 0 1px #fff9); the * pilot validated that inset top-light as on-brand. elevation-1 is * tuned down further here so the shadow component reads as "barely * there" (a soft ambient contact shadow, not a drop shadow), leaving * the hairline border and the inset top-light to do the actual lifted * read. elevation-2 (menus, popovers: surfaces that float ABOVE page * content rather than sit flush within it) keeps a touch more presence * since those genuinely need scan-priority depth. 0/3/4/5 are left at * base-theme's values: 0 is intentionally "none" (flush surfaces), and * 3-5 are reserved for modal/toast layers this pass does not touch. */ --bw-elevation-1: 0 1px 2px 0 oklch(0 0 0 / 0.04); /* barely-there ambient lift for .bw-card; hairline + inset top-light carry the read */ --bw-elevation-2: 0 2px 6px -1px oklch(0 0 0 / 0.08), 0 1px 3px -1px oklch(0 0 0 / 0.06); /* menus/popovers: floats above content, earns slightly more depth */ /* * --- Spacing / density: a more generous, considered rhythm --- * DESIGN.md: "hierarchy from spacing before colour." base-theme's * comfortable density (the brickwork default) is tuned for a denser * generic admin; Consentics is a considered ops console, not a * high-density spreadsheet, so the rhythm opens up one notch: taller * row padding gives table data room to breathe, a wider sidebar gives * nav labels room without truncation, and a larger stack/section gap * lets the page-header-to-content and card-to-card spacing carry * hierarchy on its own, per the brief, before any colour is involved. * Control height is left at base-theme's 2.5rem (already meets the * 44px touch target once focus/click padding is included) so buttons * and inputs do not become oversized relative to the tightened radius. */ --bw-density-row-padding-block: 0.75rem; /* was 0.625rem: more breathing room in table rows */ --bw-density-stack-gap: 1.25rem; /* was 1rem: more air between stacked page elements */ --bw-density-sidebar-width: 17rem; /* was 16rem: nav labels get room without truncation */ --bw-density-section-gap: 2.5rem; /* was 2rem: page-header-to-content and section-to-section separation reads as hierarchy */ --bw-density-card-padding: 1.25rem; /* was 1rem: cards read as considered panels, not cramped boxes */ /* * --- Type scale: brickwork's --bw-text-* roles mapped onto DESIGN.md's * documented scale (H1 1.5rem/1.3/600, H2 1.125rem/1.4/600, body * 0.875rem/1.5/400, meta 0.75rem/1.4/400), Inter, product only --- * base-theme's heading-xl/lg and body-md/sm sizes are close but not * exact (heading-xl is 1.5rem already; heading-lg is 1.125rem already; * body-md is 1rem where DESIGN.md's body role is 0.875rem; line-heights * use the generic tight/snug/normal tokens rather than DESIGN.md's * exact 1.3/1.4/1.5 ratios). heading-2xl (marketing-scale display) is * intentionally left alone: DESIGN.md is explicit that Noto Serif * Display and marketing-scale type never appear inside the dashboard, * so no product component should be reaching for heading-2xl; leaving * its family/size as base-theme's default (not remapped to Inter or * to a product size) means it is out of scope by construction rather * than accidentally styled to look right if something did. * * Font family is Inter everywhere product-scoped, matching main.css's * --font-body; brickwork.css links its own font-family chain but * Consentics loads Inter globally via main.css @font-face, so pointing * --bw-font-family-sans at "Inter" here (with brickwork's own system-ui * stack as fallback) makes every --bw-text-* role inherit Inter without * touching each role's family token individually. */ --bw-font-family-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --bw-text-heading-xl-size: 1.5rem; /* DESIGN.md H1 */ --bw-text-heading-xl-line-height: 1.3; /* DESIGN.md H1 */ --bw-text-heading-xl-weight: var(--bw-font-weight-semibold); /* DESIGN.md H1: 600 */ --bw-text-heading-lg-size: 1.125rem; /* DESIGN.md H2 */ --bw-text-heading-lg-line-height: 1.4; /* DESIGN.md H2 */ --bw-text-heading-lg-weight: var(--bw-font-weight-semibold); /* DESIGN.md H2: 600 */ --bw-text-body-md-size: 0.875rem; /* DESIGN.md body role lives at 0.875rem, not brickwork's 1rem default */ --bw-text-body-md-line-height: 1.5; /* DESIGN.md body */ --bw-text-body-sm-size: 0.875rem; /* keep body-sm aligned with the same 0.875rem UI-text size */ --bw-text-body-sm-line-height: 1.5; /* DESIGN.md body */ --bw-text-caption-size: 0.75rem; /* DESIGN.md small/meta */ --bw-text-caption-line-height: 1.4; /* DESIGN.md small/meta */ /* * Tabular numerals on data: DESIGN.md requires tabular numerals on all * data surfaces. base-theme's stat-tile value already reads * --bw-stat-tile-value-size (font-size-3xl); tabular-nums is not a * token brickwork exposes as a variable (it is set directly in * component CSS, e.g. .bw-badge already sets font-variant-numeric: * tabular-nums). .bw-stat-tile's value element is confirmed to need * this at the template layer (bw-stat markup), not here: no * --bw-* token exists to carry font-variant-numeric, so this file * cannot enforce it by variable override. Flagged for the preview and * for template authors: any KPI/stat number rendered outside * .bw-stat-tile or .c-kpi-value must add font-variant-numeric: * tabular-nums itself. */ /* * --- Focus ring: considered, accessible, on-brand --- * base-theme already resolves --bw-color-focus-ring to --bw-color-accent * (aubergine in light, accent-soft in dark) and ships * --bw-focus-ring-width/--bw-focus-ring-offset at 2px/2px, which already * matches this project's own focus-visible rule in main.css's * .c-btn/.c-input (outline: 2px solid var(--color-accent); outline-offset: * 2px). No override needed: the aubergine accent remap above is * sufficient to make the ring on-brand, and the geometry the two kits * ship is already identical, so no divergence to reconcile. */ /* * --- Motion: DESIGN.md "live state is the only sanctioned product * motion" --- * base-theme's duration/ease tokens are reasonable defaults and are not * overridden; Consentics does not introduce new motion roles in this * pass. Noted here, not changed: any future live-indicator animation * should use --bw-duration-normal/--bw-ease-standard rather than a new * token, and must still respect prefers-reduced-motion at the component * layer. */ } @media (prefers-reduced-motion: reduce) { /* * DESIGN.md's "live state is the only sanctioned product motion" still * has to yield to the user's OS preference. base-theme's own components * already gate their transitions through --bw-transition-* tokens built * from --bw-duration-*; collapsing durations to near-zero here disables * motion globally for reduced-motion users without hunting down every * consumer of --bw-transition-colors/opacity/transform/shadow. */ :root { --bw-duration-fast: 1ms; --bw-duration-normal: 1ms; --bw-duration-moderate: 1ms; --bw-duration-slow: 1ms; --bw-duration-shimmer: 1ms; --bw-duration-spin: 1ms; } } /* * --- Brand lockup (structure, not tokens) --- * * Layout + collapse behaviour for the sidebar-header brand markup that * shell/_bw_brand.html renders into brickwork's {% block brand_logo %} * (console-branding pass, 2026-08-03). brickwork ships no brand of its own * (AC-BW-078) and no .bw-brand class, so this is net-new structure for the * consentics lockup, deliberately separate from the token layer above: it * sets no --bw-* value, only the flex/hover/collapse rules the mark and * lowercase wordmark need. Colour and type come from the token layer and * the app's own .brand-name utility (frontend/css/main.css), not from here. */ .bw-brand { display: inline-flex; align-items: center; gap: var(--bw-space-2); min-width: 0; color: var(--bw-color-text); text-decoration: none; border-radius: var(--bw-radius-sm); } .bw-brand:hover .bw-brand__wordmark { color: var(--bw-color-accent); } .bw-brand:focus-visible { outline: var(--bw-size-focus-ring, 2px) solid var(--bw-color-accent); outline-offset: 2px; } .bw-brand__mark { flex: none; display: block; } .bw-brand__wordmark { font-size: var(--bw-font-size-md, 1rem); line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* * When the sidebar collapses, hide the wordmark and leave the centred mark, * matching brickwork's own collapse convention for nav labels and the * switcher (visually-hidden, not display:none, so the accessible name of the * brand link survives). Mirrors the .bw-nav__label collapse rule shipped in * brickwork.css. */ .bw-sidebar[data-bw-collapsed] .bw-brand__wordmark { position: absolute; inline-size: var(--bw-space-px); block-size: var(--bw-space-px); margin: calc(var(--bw-space-px) * -1); padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }