bvandeusenandClaude Opus 5.5
65411d3ce8
#5092 "Tokens". base.html's inline palette was its own: white text on the gold button (1.81:1), a red at 3.26:1 on a card, a warning yellow at hue 42 beside the gold accent at 46, a lavender page title, serif labels at 13px and weights up to 700. - static/theme.css is design system 6's generated sheet (FabledSword + the Steward accent). static/steward.css is base.html's stylesheet moved out, with :root now aliases onto those tokens (--bg, --text-muted, --green…) so every template keeps rendering; it states no colour of its own. - Status text colours are Steward overrides recorded in the design system (tokens 182-184): success #5FB87A, warning #E08A3C, error #EC7A6C. The house -fg mixes read "up" as grey hint text (dE 8.2) and warning as the accent (dE 11.5); these are >= 4.5:1 on page, card, hover and their own 15-25% tints. --orange is now the midpoint of warning and error. - Primary button and active range button: dark text on gold (7.82:1). Danger button on the house destructive fill. Badges and alerts take the -fg colour on a tint; the gold badge uses --fs-accent-fg. - Type: Inter body, Fraunces only for page titles and h1/h2, JetBrains Mono for code; section and widget titles become the tiny caps label in the body face; weights capped at 500. - Removed: the lavender title and share-view gradient, #606080, and the undefined --card-bg, --accent-faint, --accent-bg, --bg-alt, --border-low and --row-alt (now real tokens); the dead settings/index.html. - Guards (tests/test_style_tokens.py): every var(--x) used is defined; steward.css states no colour or weight over 500; hex colours in templates may only go down (ceiling 75, from 81 before this change), each with a self-test that it can fail. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
177 lines
8.8 KiB
CSS
177 lines
8.8 KiB
CSS
/*
|
|
* Steward — generated stylesheet
|
|
* Source: design system 6.
|
|
*
|
|
* Purpose tokens only. This sheet declares what values MEAN; it styles
|
|
* no elements. Buttons, tables and input schemes live as snippets that
|
|
* reference these names, so each value is stated once and reused rather
|
|
* than restated per element.
|
|
*
|
|
* Generated — edit the design system, not this file.
|
|
*/
|
|
|
|
:root {
|
|
/* accent */
|
|
--fs-accent: #C8A840; /* Steward's single signature colour */
|
|
--fs-accent-soft: color-mix(in srgb, var(--fs-accent) 15%, transparent); /* Pill, tag and badge backgrounds */
|
|
--fs-accent-faint: color-mix(in srgb, var(--fs-accent) 8%, transparent); /* The faintest accent wash */
|
|
--fs-accent-deep: color-mix(in srgb, var(--fs-accent) 70%, black); /* The accent, darkened — the far end of a CTA gradient */
|
|
--fs-accent-wash: color-mix(in srgb, var(--fs-accent) 22%, transparent); /* The heaviest accent tint — selection and emphasis washes */
|
|
--fs-gradient-cta: linear-gradient(135deg, var(--fs-accent), var(--fs-accent-deep)); /* Gradient for a deliberate brand moment */
|
|
--fs-glow-cta: 0 2px 10px color-mix(in srgb, var(--fs-accent) 35%, transparent); /* Glow under a brand-moment CTA */
|
|
--fs-glow-cta-hover: 0 4px 24px color-mix(in srgb, var(--fs-accent) 65%, transparent); /* Glow under a hovered brand-moment CTA */
|
|
--fs-accent-fg: color-mix(in srgb, var(--fs-accent) 45%, var(--fs-text-primary)); /* Accent-coloured TEXT sitting on an accent tint — the readable partner of --fs-accent-soft / -faint / -wash */
|
|
|
|
/* action */
|
|
--fs-action-primary: #4A5D3F; /* Save, Submit, Confirm */
|
|
--fs-action-secondary: #8B7355; /* Non-destructive alternates */
|
|
--fs-action-tertiary: var(--fs-border-color); /* Ghost / outline actions */
|
|
--fs-action-destructive: var(--fs-destructive); /* Destructive actions — delete, purge, revoke */
|
|
--fs-action-primary-hover: color-mix(in srgb, var(--fs-action-primary) 88%, white); /* Primary action, hovered */
|
|
--fs-action-secondary-hover: color-mix(in srgb, var(--fs-action-secondary) 88%, white); /* Secondary action, hovered */
|
|
--fs-action-destructive-hover: color-mix(in srgb, var(--fs-action-destructive) 88%, white); /* Destructive action, hovered */
|
|
|
|
/* border */
|
|
--fs-border-color: #3F4651; /* Borders, dividers and ghost outlines */
|
|
--fs-border: 0.5px solid var(--fs-border-color); /* The default structural border */
|
|
--fs-border-hover: 0.5px solid color-mix(in srgb, var(--fs-text-secondary) 30%, transparent); /* Border on hover or emphasis */
|
|
--fs-border-active: 2px solid var(--fs-accent); /* Selected card or active tab only */
|
|
|
|
/* elevation */
|
|
--fs-shadow-1: 0 1px 0 rgba(0,0,0,0.4); /* Hairline lift */
|
|
--fs-shadow-2: 0 4px 12px rgba(0,0,0,0.35); /* Dropdowns and popovers */
|
|
--fs-shadow-3: 0 16px 40px rgba(0,0,0,0.5); /* Modals */
|
|
|
|
/* focus */
|
|
--fs-focus-ring: 0 0 0 2px var(--fs-accent); /* Focus indication, as a box-shadow */
|
|
|
|
/* font */
|
|
--fs-font-display: 'Fraunces', Georgia, serif; /* Display, headings and wordmarks */
|
|
--fs-font-body: 'Inter', system-ui, sans-serif; /* Body text, UI and labels */
|
|
--fs-font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; /* Code, terminal output and monospaced data */
|
|
|
|
/* icon */
|
|
--fs-icon-stroke: 1.5px; /* Icon stroke width at 24px */
|
|
--fs-icon-stroke-sm: 1px; /* Icon stroke width at 16px */
|
|
|
|
/* layout */
|
|
--fs-layout-page-max: 1200px; /* Maximum page width */
|
|
--fs-layout-page-pad: 1rem; /* Horizontal page padding */
|
|
--fs-layout-sidebar: 260px; /* Sidebar / nav rail width */
|
|
--fs-layout-header: 52px; /* App header height */
|
|
|
|
/* motion */
|
|
--fs-ease: cubic-bezier(0.2, 0.6, 0.2, 1); /* The one easing curve, used by every transition */
|
|
--fs-dur-fast: 120ms; /* Hovers, colour and border changes */
|
|
--fs-dur-base: 180ms; /* Most state changes */
|
|
--fs-dur-slow: 280ms; /* Larger surface or layout shifts */
|
|
|
|
/* radius */
|
|
--fs-radius-sm: 4px; /* Pills, tags and code spans */
|
|
--fs-radius-md: 8px; /* Buttons, inputs and small cards */
|
|
--fs-radius-lg: 12px; /* Cards, panels and modals */
|
|
--fs-radius-xl: 16px; /* Hero containers and major surfaces */
|
|
--fs-radius-pill: 9999px; /* Fully rounded — avatars, toggles */
|
|
|
|
/* semantic */
|
|
--fs-success: var(--fs-action-primary); /* Success states */
|
|
--fs-warning: #8B6F1E; /* Warnings */
|
|
--fs-error: #C04A1F; /* Errors — something went wrong */
|
|
--fs-info: #3D5A6E; /* Informational states */
|
|
--fs-destructive: #6B2118; /* Irreversible actions */
|
|
--fs-error-fg: #EC7A6C; /* Error / down / firing as TEXT or a status indicator */
|
|
--fs-warning-fg: #E08A3C; /* Warning / degraded / pending as TEXT or a status indicator */
|
|
--fs-info-fg: color-mix(in srgb, var(--fs-info) 50%, var(--fs-text-primary)); /* Info colour when it is TEXT: a status pill's label, an informational line. Not for fills or borders. */
|
|
--fs-success-fg: #5FB87A; /* Success / up / ok as TEXT or a status indicator: badge labels, status dots, "up" counts */
|
|
|
|
/* space */
|
|
--fs-space-1: 4px; /* Spacing step 1 */
|
|
--fs-space-2: 8px; /* Spacing step 2 */
|
|
--fs-space-3: 12px; /* Spacing step 3 */
|
|
--fs-space-4: 16px; /* Spacing step 4 */
|
|
--fs-space-5: 20px; /* Spacing step 5 */
|
|
--fs-space-6: 24px; /* Spacing step 6 */
|
|
--fs-space-7: 32px; /* Spacing step 7 */
|
|
--fs-space-8: 48px; /* Spacing step 8 */
|
|
--fs-space-9: 64px; /* Spacing step 9 */
|
|
--fs-space-10: 96px; /* Spacing step 10 */
|
|
|
|
/* state */
|
|
--fs-disabled-opacity: 0.5; /* Opacity for disabled controls */
|
|
--fs-overlay: rgba(0, 0, 0, 0.65); /* Scrim behind modals and dialogs */
|
|
|
|
/* surface */
|
|
--fs-surface-page: #14171A; /* Page background, the deepest surface */
|
|
--fs-surface-raised: #1E2228; /* Cards and raised elements */
|
|
--fs-surface-hover: #2C313A; /* Hovered surfaces, secondary elevation */
|
|
--fs-surface-code: var(--fs-surface-page); /* Code block background */
|
|
--fs-surface-code-inline: var(--fs-surface-raised); /* Inline code span background */
|
|
--fs-table-stripe: color-mix(in srgb, var(--fs-text-primary) 3%, transparent); /* Alternating table row tint */
|
|
|
|
/* text */
|
|
--fs-text-primary: #E8E4D8; /* Primary text on a page or raised surface — body, headings, labels */
|
|
--fs-text-secondary: #C2BFB4; /* Secondary text and captions */
|
|
--fs-text-tertiary: #9C9A92; /* Hints and metadata */
|
|
--fs-text-on-action: #E8E4D8; /* Text on a filled coloured surface — action buttons, semantic badges, the accent */
|
|
--fs-text-tertiary-fg: color-mix(in srgb, var(--fs-text-tertiary) 55%, var(--fs-text-primary)); /* Tertiary text on a tertiary tint — a muted chip that stays readable */
|
|
--fs-text-secondary-fg: color-mix(in srgb, var(--fs-text-secondary) 90%, var(--fs-text-primary)); /* Secondary text on a secondary tint — completes the pattern; the value barely moves */
|
|
|
|
/* type */
|
|
--fs-size-display: 40px; /* Display — display face, medium weight */
|
|
--fs-size-h1: 32px; /* H1 — display face, medium weight */
|
|
--fs-size-h2: 24px; /* H2 — display face, medium weight */
|
|
--fs-size-h3: 18px; /* H3 — body face, medium weight */
|
|
--fs-size-body: 15px; /* Body — body face, regular weight */
|
|
--fs-size-body-sm: 13px; /* Small body — body face, regular weight */
|
|
--fs-size-label: 12px; /* Label — body face, medium weight */
|
|
--fs-size-code: 13px; /* Code — mono face, regular weight */
|
|
--fs-size-tiny: 11px; /* Tiny micro-label — body face, medium weight */
|
|
--fs-weight-regular: 400; /* Regular weight */
|
|
--fs-weight-medium: 500; /* Medium weight — the heaviest the system goes */
|
|
--fs-leading-heading: 1.3; /* Line height for headings */
|
|
--fs-leading-body: 1.5; /* Line height for body text */
|
|
--fs-leading-longform: 1.7; /* Line height for long-form reading surfaces */
|
|
--fs-tracking-tiny: 0.08em; /* Letter-spacing on the tiny uppercase label */
|
|
}
|
|
|
|
[data-theme="light"] {
|
|
/* accent */
|
|
--fs-accent-wash: color-mix(in srgb, var(--fs-accent) 20%, transparent);
|
|
--fs-glow-cta-hover: 0 4px 20px color-mix(in srgb, var(--fs-accent) 55%, transparent);
|
|
|
|
/* border */
|
|
--fs-border-color: #D9D6CE;
|
|
|
|
/* state */
|
|
--fs-overlay: rgba(0, 0, 0, 0.45);
|
|
|
|
/* surface */
|
|
--fs-surface-page: #F5F1E8;
|
|
--fs-surface-raised: #FBF8F0;
|
|
--fs-surface-hover: #EFEAE0;
|
|
--fs-surface-code: #EBEDF0;
|
|
--fs-surface-code-inline: #EBEDF0;
|
|
|
|
/* text */
|
|
--fs-text-primary: #14171A;
|
|
--fs-text-secondary: #5A5852;
|
|
--fs-text-tertiary: #9A9890;
|
|
}
|
|
|
|
/* SUPERSEDES — write the token, not the literal.
|
|
* #c84048 -> --fs-error-fg
|
|
* #ff8090 -> --fs-error-fg
|
|
* #ffb0b8 -> --fs-error-fg
|
|
* #ffb0b0 -> --fs-error-fg
|
|
* #d4a840 -> --fs-warning-fg
|
|
* #c87840 -> --fs-warning-fg
|
|
* var(--fs-info) -> --fs-info-fg
|
|
* #4aa86a -> --fs-success-fg
|
|
* #90f0b0 -> --fs-success-fg
|
|
* #fff -> --fs-text-on-action
|
|
* #ffffff -> --fs-text-on-action
|
|
* white -> --fs-text-on-action
|
|
* bold -> --fs-weight-medium
|
|
* bolder -> --fs-weight-medium
|
|
*/
|