/* Olowo semantic design tokens * * This file does not introduce a second token system. Every value below maps to * a primitive that already exists in public_html/themes/.css (colour) or * public_html/theme/spacing.css (spacing, radius, sizing). Fallbacks are given * so components render correctly even when only the theme file is loaded. * * Load order: /themes/.css, then this file, then components.css. * * Naming: semantic role, never page name. * --color-surface-* container backgrounds * --color-text-* foreground text * --color-action-* interactive intent * --color-status-* state communication * --tone-*-bg/-fg paired badge tones */ :root { /* Surfaces */ --color-surface-page: var(--background, #f2f5ef); --color-surface-card: var(--surface-container-lowest, #ffffff); --color-surface-sunken: var(--surface-container-low, #f4f3f1); --color-surface-muted: var(--surface-container, #efeeeb); --color-surface-inverse: var(--inverse-surface, #2f312f); /* Text */ --color-text-primary: var(--ink, #1a1c1a); --color-text-secondary: var(--ink-muted, #524437); --color-text-tertiary: var(--ink-faint, #847466); --color-text-inverse: var(--inverse-on-surface, #f2f1ee); /* Borders and separators. #F5F5F5 is the house hairline: one colour for every card edge, divider and input outline across the app. It is set here rather than taken from the theme's --border so a theme swap can't quietly change it; a theme that genuinely needs its own hairline should override this token. */ --color-border-hairline: #f5f5f5; --color-border-subtle: var(--color-border-hairline); --color-border-strong: var(--outline, #847466); /* Actions */ --color-action-primary: var(--gold, #895200); --color-action-on-primary: var(--on-primary, #ffffff); --color-action-secondary: var(--color-surface-card); --color-action-on-secondary: var(--color-text-primary); --color-action-danger: var(--danger, #ba1a1a); --color-action-on-danger: var(--on-error, #ffffff); --color-action-danger-soft: var(--error-container, #ffdad6); /* House "on/active" brown. Anything that reads as switched on — an open section chevron, a selected tab or segmented pill, an active chip — uses this so the state is one colour everywhere. -soft is its tint, for the fill behind an outlined active pill. */ --color-action-active: #75461d; --color-action-on-active: #ffffff; --color-action-active-soft: #f1ece6; /* Filled selected pills sit on the same brown rather than a second one. */ --color-action-selected: var(--color-action-active); --color-action-on-selected: var(--color-action-on-active); /* Switches — the house convention, one paint job for every one of them. A switch is any control that picks one of a small set and changes what is shown or filtered below it: New / Saved on the transfer form, Tasks / Teams on /team, the dashboard section pills, a TabBar, an access-level segment. The selected option is ALWAYS a solid brown fill with a white label. Never a white chip, never an outline-only tint, never a second accent colour — "this one is on" must read identically wherever a switch appears. selected brown fill, white label -selected-bg / -selected-fg idle no fill, grey label -option-bg / -option-fg hover brown label, fill unchanged -option-fg-hover tray cream sunken surface, brown hairline -track / -track-border count grey disc idle, cream disc selected -count-* / -selected-count-* Two shapes carry it. A *tray* switch seats its options inside --track (the two-up controls). A *loose pill* switch has no tray, so its idle option sits on --color-surface-card instead of --option-bg; everything else is identical. Recolour a switch here and nowhere else — concrete switch classes reference these tokens and must not carry their own hex. */ --color-switch-track: var(--color-count-surface, #fbf4ef); --color-switch-track-border: var(--color-action-active); --color-switch-option-bg: transparent; --color-switch-option-fg: #8e8e8e; --color-switch-option-fg-hover: var(--color-action-active); --color-switch-selected-bg: var(--color-action-selected); --color-switch-selected-fg: var(--color-action-on-selected); --color-switch-count-bg: #e1e1e1; --color-switch-count-fg: #8e8e8e; --color-switch-selected-count-bg: var(--color-count-surface, #fbf4ef); --color-switch-selected-count-fg: var(--color-action-active); /* On/off toggles (a knob that slides in a track) are green when on, everywhere. They are a different control from the brown segmented switches above: brown means "the option you chose", green means "this is turned on". Every toggle class reads this token. */ --color-toggle-on: var(--color-status-success); /* Counts. The cream disc behind a tally — a tab's "2", an unread total. It is the same disc whether the pill under it is plain or filled brown, so the number sits on one colour everywhere and only its ink changes. */ --color-count-surface: #fbf4ef; --color-count-text: var(--color-action-active); /* Section heading type. Every heading that names a block of the page — Balance, Accounts, Deadlines, Activity, Projects, a settings card header — reads at exactly this size and weight, so the page has one heading rhythm rather than a different one per feature. Retune a section heading here and nowhere else; the concrete classes only ever reference these tokens and must not carry their own font-size or font-weight. Small eyebrow labels inside a form (.form-section-title and friends) are a different type role and deliberately do not use these. */ --section-title-size: 1.15rem; --section-title-weight: 800; --section-title-tracking: -0.02em; --section-title-line: 1.3; --section-title-color: #4a4744; /* A success action — the green on a Save, an Accept, an Add income button. Deliberately darker than --color-status-success, which is tuned for badge tints and text and does not carry white label text at AA contrast. One value so every affirmative button in the app is the same green; see olowo-modals.css, which paints the in-modal save buttons from it. */ --color-action-success: #518c15; --color-action-success-hover: #4a7f13; --color-action-on-success: #ffffff; /* Status */ --color-status-success: var(--success, #52a374); --color-status-warning: var(--warning, #ed6c02); --color-status-info: var(--info, #0288d1); --color-status-danger: var(--danger, #ba1a1a); /* Terracotta. The house colour for "this needs a decision from you" — a missing certificate, a due date inside a fortnight, an overspent budget. Deliberately not --color-status-danger: nothing has failed yet, and the red used for destructive actions would overstate it. Was hard-coded as #c45b4b in three places before it was named here. */ --color-status-attention: #c45b4b; /* An @Name mention. Green wherever one is written, so a tagged team member reads the same in the task composer as in a reply. */ --color-mention-text: var(--color-status-success); /* Paired badge tones. Each pair is a background plus a readable foreground. */ --tone-neutral-bg: var(--color-surface-muted); --tone-neutral-fg: var(--color-text-secondary); --tone-brand-bg: var(--primary-fixed, #ffdcbc); --tone-brand-fg: var(--on-primary-fixed-variant, #683d00); --tone-accent-bg: var(--tertiary-fixed, #c3e8ff); --tone-accent-fg: var(--on-tertiary-fixed-variant, #004c68); /* Static fallbacks first; the color-mix block below overrides them wherever color-mix is supported so the tint always tracks the theme's status hue. */ --tone-success-bg: #e6f4ec; --tone-success-fg: var(--color-status-success); --tone-warning-bg: #fdeee0; --tone-warning-fg: var(--color-status-warning); --tone-danger-bg: var(--color-action-danger-soft); --tone-danger-fg: var(--on-error-container, #93000a); --tone-royal-bg: #ece8ff; --tone-royal-fg: #5b3fd6; --tone-attention-bg: #f9ebe9; --tone-attention-fg: var(--color-status-attention); /* Team role tones. Each role owns a label colour; the pill fill is a tint of that same colour so a new role only ever needs one value. Accountant is the exception — its cream fill was specified directly. */ --role-owner-fg: #a41ac0; --role-admin-fg: #0e7b5b; --role-manager-fg: #75461d; --role-bookkeeper-fg: #c45b4b; --role-accountant-fg: var(--color-status-warning); --role-viewer-fg: #0097dd; --role-owner-bg: #f6e8fa; --role-admin-bg: #e3f4ec; --role-manager-bg: #f1ece6; --role-bookkeeper-bg: #f9ebe9; --role-accountant-bg: #fdf5ed; --role-viewer-bg: #e5f5fd; } @supports (background: color-mix(in srgb, red 50%, transparent)) { :root { --tone-success-bg: color-mix(in srgb, var(--color-status-success) 16%, transparent); --tone-warning-bg: color-mix(in srgb, var(--color-status-warning) 16%, transparent); --tone-royal-bg: color-mix(in srgb, var(--tone-royal-fg) 15%, transparent); --tone-attention-bg: color-mix(in srgb, var(--color-status-attention) 16%, transparent); --color-action-active-soft: color-mix(in srgb, var(--color-action-active) 12%, transparent); --role-owner-bg: color-mix(in srgb, var(--role-owner-fg) 14%, transparent); --role-admin-bg: color-mix(in srgb, var(--role-admin-fg) 14%, transparent); --role-manager-bg: color-mix(in srgb, var(--role-manager-fg) 14%, transparent); --role-bookkeeper-bg: color-mix(in srgb, var(--role-bookkeeper-fg) 14%, transparent); --role-viewer-bg: color-mix(in srgb, var(--role-viewer-fg) 14%, transparent); } } :root { /* Focus ring */ --focus-ring-color: var(--color-action-primary); --focus-ring-width: 2px; --focus-ring-offset: 2px; /* The one green used on hero image cards — available balances, income, anything positive sitting on artwork. Fixed here rather than taken from --color-status-success because that token follows the theme, and this green is chosen to hold up against a photo. */ --color-hero-positive: #6ee7b7; /* Hero image cards. One size for every full-bleed photo card in the app — the dashboard balance cards, the Team header, Send Money next. They sit on different pages but read as the same object, so the height, radius and inset live here rather than being retyped per feature. 9.25rem is the 148px Figma hero; the md step is the wider-screen equivalent. */ --hero-card-min-height: 9.25rem; --hero-card-min-height-md: 11rem; --hero-card-radius: 20px; --hero-card-padding: var(--space-4, 1rem); --hero-card-padding-md: var(--space-5, 1.25rem); /* Elevation */ --elevation-card: var(--pf-shadow-elev-1, 0 8px 24px rgba(28, 25, 23, 0.075)); --elevation-raised: 0 12px 32px rgba(28, 25, 23, 0.12); /* Motion */ --motion-fast: 120ms; --motion-default: 180ms; --motion-ease: cubic-bezier(0.2, 0, 0.2, 1); }