/* * THE definition of every design token. ADR 0028 §2. * * This is the only file in the repository permitted to write a colour value. * Every other stylesheet references var(--…), and * tests/Unit/DesignSystem/NoColourLiteralsOutsideTokensTest.php fails the build * on a hex, an rgb()/hsl()/color(), or a CSS named colour anywhere else under * assets/styles/. * * docs/ux/design-system.md is a checked transcription of this file: * DesignTokensTest asserts the two agree in both directions, so a value changed * here without the table, or a token added here that nobody named, fails. * * Nothing @imports anything. AssetMapper rewrites url() to digested paths and * does not rewrite @import paths, so a relative @import resolves in dev and * 404s after asset-map:compile. Every stylesheet is linked from base.html.twig * instead, in the layer order declared below. */ @layer tokens, base, components, shell, utilities; @layer tokens { :root { /* Brand — the single accent, and the only ramp a breeder may swap. */ --brand-50: #F5F3FF; --brand-100: #EDE9FE; --brand-200: #DDD6FE; --brand-500: #8B5CF6; --brand-600: #6D28D9; --brand-700: #5B21B6; /* * The card. One token per ink of App\Domain\PetId\Artwork\CardPalette (CardPaletteTokensTest * holds the two lists together), for the on-screen preview of the printed card (issue #790). * Each value is the palette's CMYK ink read back through the ISO Coated v2 profile to sRGB, * the path CardBrandInkConverter takes the other way — what the press makes of the ink. The * preview uses the fixed palette always: an affix's own ink is frozen at issue (ADR 0183). * --card-felio is Felio's #6D28D9 itself, which the print converts to [89, 93, 1, 0]. */ --card-paper: #FFFFFF; --card-ink: #1B2436; --card-muted: #606575; --card-panel: #F2F3F8; --card-accent: #B68E56; --card-pill: #385D8A; --card-band: #18284A; --card-motif: #E1E6F0; --card-blue: #738ABF; --card-felio: #6D28D9; /* * Neutrals. --border is a separator, never a control boundary — it sits * at 1.06:1 against --surface-page, deliberately far below the 3:1 that * WCAG 2.1 AA §1.4.11 requires of a boundary a user needs in order to * identify a control. --border-control is that stronger boundary, for * form field edges only: 3.43:1 against --surface-card. */ --surface-page: #FAF9FC; --surface-card: #FFFFFF; --surface-band: #F3F0FB; --border: #ECE9F3; --border-control: #8D87A3; --text-strong: #171426; --text: #3F3B52; --text-muted: #6B6880; --text-subtle: #726F85; /* * Status. Every foreground here is darker than the reference mockup * because four of the five read off it failed 4.5:1 on their own * background. The corrections and their measured ratios are in * docs/ux/design-system.md. */ --status-success-fg: #2F7A3E; --status-success-bg: #E6F4E9; --status-warning-fg: #94600F; --status-warning-bg: #FCF0DC; --status-info-fg: #44679A; --status-info-bg: #E6EDF8; --status-danger-fg: #B23F38; --status-danger-bg: #FBE7E6; /* * Category tints. No semantic weight — they exist so a grid of four * cards is scannable. Each -ink is the darker shade of the same hue * that icons and labels on that tint are drawn in, never brand purple. */ --tint-sage: #E4F0DC; --tint-sage-ink: #3F7A33; --tint-sand: #FBE7CF; --tint-sand-ink: #8A6216; --tint-blush: #FBE0E0; --tint-blush-ink: #A34A50; --tint-sky: #E0E9F7; --tint-sky-ink: #3A6394; --tint-lilac: #EDE6FA; --tint-lilac-ink: #5F45A3; /* * Google's "G" on the sign-in button. Not a palette and not brandable: * Google's sign-in branding guidelines fix the mark's four colours, so * a breeder's ramp must never reach them. */ --google-blue: #4285F4; --google-green: #34A853; --google-yellow: #FBBC05; --google-red: #EA4335; /* * Typography. The named faces are not in the repository yet — #185 * subsets and self-hosts them — so today the fallback is what renders. */ --font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-size-display: 36px; --font-size-page-title: 28px; --font-size-section-title: 22px; --font-size-card-title: 17px; --font-size-metric: 30px; --font-size-body: 15px; --font-size-label: 13px; --font-size-caption: 12px; /* Form control text only. Never below 16px, or iOS zooms the page on focus. */ --font-size-control: 16px; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-body: 1.5; --line-height-heading: 1.25; --measure-body: 70ch; /* Spacing. --space-N is always N × 4px, which is why the scale skips. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* Radii. Nothing in this product has a square corner. */ --radius-lg: 16px; --radius-md: 12px; --radius-sm: 8px; --radius-full: 9999px; /* Elevation. Cards are separated by border and page tint, not shadow. */ --shadow-card: 0 1px 2px rgba(20, 16, 40, 0.04); --shadow-raised: 0 1px 2px rgba(20, 16, 40, 0.04), 0 8px 24px rgba(20, 16, 40, 0.05); /* Layout. What each shell does with these is docs/ux/patterns.md. */ --sidebar-width: 240px; --tab-bar-height: 64px; --grid-gutter: 20px; --bare-shell-max-width: 1200px; --column-max-width: 760px; --column-wide-max-width: 1120px; --form-max-width: 480px; --form-wide-max-width: 720px; --touch-target: 44px; /* The padding every pill-shaped control shares — status pills, chips and tags — so text sits centred in all of them (#880). Wider on purpose, and outside it: .owner-home__chip, .landing-eyebrow and the fixed-width .cat-board__count. */ --pill-padding-block: var(--space-1); --pill-padding-inline: var(--space-3); /* A form chip keeps the checkmark's room on both sides, so its label is centred: the check's offset (--space-2) plus its width (--space-4). */ --pill-padding-inline-check: var(--space-6); --focus-ring-width: 3px; --focus-ring-offset: 2px; } }