/* * Fair Manager front-end design tokens. The single source of truth for the * public-facing colour palette, type scale and spacing scale. Every module * stylesheet under src/frontend/ consumes these via var(); no module file * should introduce a new brand colour or spacing literal without a token. * * Defined on :root with an --fm- prefix so they cannot collide with theme * variables. The portal's theme-override seam (--fm-portal-* on #content in * portal/portal.css) is the THEME'S API and layers above these tokens. * * Spacing is an 8pt grid with a 4px half-step: 4 / 8 / 12 / 16 / 24 / 32 / 48. * Component-tuned dimensions (control heights, pill paddings) intentionally * stay literal in the module files. */ :root { /* ---- Colour: brand ---------------------------------------------------- * Neutral defaults. The active theme re-declares these on :root with the * fair year's brand (see the MAF Portal theme's assets/css/tokens.css). */ --fm-color-accent: #c7c7c7; --fm-color-accent-hover: #b5b5b5; --fm-color-accent-soft: #f1f1f1; /* The label colour on any accent FILL (button, active menu row, status pill). * Its own token because a brand's accent is not always light enough for white * or dark enough for black -- the theme decides, and every fill obeys it. */ --fm-color-on-accent: #000000; /* The accent as TEXT on a light ground. A brand accent chosen to be a fill is * usually too light to read as small text on white, so this is the darkened * counterpart; the theme sets it to whatever clears AA for its own accent. */ --fm-color-accent-ink: #6b6b6b; /* ---- Colour: text ----------------------------------------------------- */ --fm-color-ink: #000000; --fm-color-text-muted: #555555; --fm-color-text-subtle: #777777; /* ---- Colour: feedback ------------------------------------------------- */ --fm-color-danger: #8a1c1c; --fm-color-danger-hover: #701616; --fm-color-danger-soft: #fbeaea; --fm-color-danger-border: #e7c3c3; --fm-color-error: #b3261e; --fm-color-success: #2f6b3a; --fm-color-success-soft: #eaf6ec; --fm-color-success-border: #c3e0c8; --fm-color-waitlist-text: #8a6d1c; --fm-color-waitlist-bg: #f0e2bf; --fm-color-waitlist-border: #e3d3a4; --fm-color-progress: #f0d27a; /* ---- Colour: surfaces -------------------------------------------------- * The alternating row tint on data tables. Its own token, NOT accent-soft: * a zebra row has to be far lighter than a hover state, and the two drifted * into each other when they shared one value. Just enough to track a row * across the width without the stripe becoming a design element. */ --fm-color-row-alt: #fafafa; /* The category badge, on a program tile and on the single-event hero. It sits * OVER a featured image, so it needs a solid ground of its own rather than a * page surface -- hence its own pair rather than reuse of ink/on-accent, which * a brand is free to point at the same colour and leave the badge invisible. */ --fm-color-badge-bg: #1f2024; --fm-color-badge-fg: #ffffff; /* ---- Shape ------------------------------------------------------------- * * ONE corner radius for every squared-off surface in the portal: buttons, the * content container, tiles, the sidebar's current item, badges, the RSVP modal * and every form field. They share a token so the whole portal can be softened * or squared off by changing this single value -- which is the point: a mixture * of radii is what makes an interface look assembled rather than designed. * Must be :root, not #content -- the RSVP modal is appended to . */ --fm-radius: 0; /* ---- Colour: the RSVP modal -------------------------------------------- * The modal is appended to , OUTSIDE #content, so the --fm-portal-* * seam cannot reach it -- these have to live on :root. Defaults reproduce * the light panel exactly; a theme re-declares them to re-skin the dialog * without touching its structure. */ --fm-modal-bg: #ffffff; --fm-modal-fg: #000000; --fm-modal-muted: #444444; --fm-modal-border: #d8d8d8; --fm-modal-divider: #ececec; /* Fields and the secondary controls inside the dialog. */ --fm-modal-field-bg: #ffffff; --fm-modal-field-border: #d8d8d8; /* The add (+) and remove (-) controls. Their own tokens because the page's * --fm-color-success / --fm-color-danger are chosen to read on WHITE, and a * dark dialog needs lighter values of the same two meanings. */ --fm-modal-affirm: #2f6b3a; --fm-modal-danger: #8a1c1c; /* Notices are drawn FROM those two: a tint of the colour behind its own * text, so they need no separate soft/border pair per surface. */ /* ---- Colour: neutrals ------------------------------------------------- */ --fm-color-border: #d8d8d8; --fm-color-border-soft: #ececec; --fm-color-neutral: #e3e3e3; --fm-color-dark: #1f2024; /* ---- Type ------------------------------------------------------------- */ /* * Three roles, so a theme can give each its own face. The plugin ships neutral * generics; the theme supplies the brand (see the MAF Portal theme's * assets/css/tokens.css). The ROLE is fixed here and the FACE is the theme's: * * heading every heading -- page titles, section headings, card titles -- * plus the sidebar and header chrome. * body body copy, form fields, tables, the text inside cards. * accent used sparingly: button labels, small group headings, status * pills, date/meta lines. * * A theme that wants one face everywhere simply points all three at it. */ --fm-font-heading: sans-serif; --fm-font-body: sans-serif; --fm-font-accent: serif; --fm-text-badge: 0.72rem; --fm-text-sm: 0.85rem; --fm-text-base: 0.95rem; --fm-text-btn: 1.05rem; --fm-text-lg: 1.4rem; --fm-size-title: clamp( 2.25rem, 6vw, 4rem ); /* ---- Controls ---------------------------------------------------------- */ /* One height for every interactive control -- text inputs, selects and * buttons -- so a button never sits a few pixels proud of the field beside * it. Consumers set min-height (not height) so a wrapped label still grows. */ --fm-control-height: 46px; /* ---- Spacing (8pt grid, 4px half-step) --------------------------------- */ --fm-space-1: 4px; --fm-space-2: 8px; --fm-space-3: 12px; --fm-space-4: 16px; --fm-space-5: 24px; --fm-space-6: 32px; --fm-space-7: 48px; }