/* KAT'S STYLE GUIDE (2026-09-22, docs/style-guide.md), transcribed from FXETennis/Resources/Brand.swift. The history below is history. PALETTE B, transcribed from FXETennis/Resources/Brand.swift. History: this file sat on palette A from 2026-08-12 while Brand.swift moved to B, and each file's header claimed to mirror the other. Two sources of truth that both say "see the other one" is worse than one that is wrong. The 2026-08-26 transcription fixed the brand core, surfaces and most text tokens but left the on-fill text and the four status pairs on palette A, and kept a header and a contrast table narrating palette A values. The 2026-09-12 transcription below carries every token that has a Brand.swift counterpart, value for value. Brand.swift wins; change it there first, then transcribe here. */ /* * tokens.css * FXE Tennis web admin design tokens. * * Mirror of FXETennis/Resources/Brand.swift. Change one, change both. * Every measured contrast ratio and every rationale lives in that file. This * file repeats the numbers so a web-only contributor never has to open Xcode, * but Brand.swift is the source of truth. * * --------------------------------------------------------------------------- * PALETTE B, "full country club" (Tara, 2026-08-12: "lets do b for now") * #16264C navy #3E7C55 forest green (fill only) * #B08D57 brass accent (fill only) #F7F4EC cream ground * #FFFFFF raised surface #6E6552 warm grey-brown, secondary * * Palette A (Tara's raw file colours: navy #0E1239, green #6DBE45, yellow * #D5DF24, surface #FAF7F1) shipped first and is in git history. If she * reverts, the A values and ratios are in that history. * * LIGHT APPEARANCE ONLY. A dark theme needs surfaces she has not supplied. * --------------------------------------------------------------------------- */ :root { /* ---- Brand core ---- */ --fxe-navy: #0A1B3D; /* Brand.navy */ --fxe-court: #4F7A38; /* Brand.court. FILL ONLY */ --fxe-accent: #4F7A38; /* Brand.accent, brass. FILL ONLY */ /* ---- Surfaces ---- */ --fxe-surface: #F2F0EC; /* Brand.surface */ --fxe-surface-raised: #FFFFFF; /* Brand.surfaceRaised */ --fxe-surface-warm: #EAE6DF; /* Brand.surfaceWarm: bottom of the page gradient */ --fxe-navy-pressed: #16295C; /* Brand.navyPressed */ --fxe-surface-inverted: #0A1B3D; /* Brand.surfaceInverted */ /* ---- Text ---- */ --fxe-text-primary: #0A1B3D; /* Brand.textPrimary, 13.50:1 on surface */ --fxe-text-secondary: #4A4843; /* Brand.textSecondary, 8.02:1 on surface (darkened 2026-09-28 with Brand.swift) */ --fxe-text-on-navy: #FFFFFF; /* Brand.textOnNavy */ --fxe-text-on-navy-muted: #C9CCD6; /* Brand.textOnNavyMuted */ --fxe-text-on-court: #FFFFFF; /* Brand.textOnCourt, 4.98:1 on court */ --fxe-text-on-accent: #FFFFFF; /* Brand.textOnAccent, 5.55:1 on accent */ /* ---- Lines and states ---- */ --fxe-border: #5C5A55; /* Brand.border */ --fxe-hairline: #E3E0DA; /* Brand.hairline */ --fxe-disabled: #B5B2AC; /* Brand.disabled */ --fxe-focus-ring: #0A1B3D; /* Brand.focusRing */ /* ---- Status ---- * Never use a status colour on its own. Every status renders as * icon + label + tint. See .fxe-chip below. * Brand.Status.ink / .tint: forest, brass, deep teal, brick red. All four * silhouettes and hues differ; the ink is the only approved status colour. */ --fxe-status-in-ink: #2C5A3E; /* 7.24:1 on surface, 6.83:1 on tint */ --fxe-status-in-tint: #E7F0E7; --fxe-status-pool-ink: #7A5E24; /* 5.53:1 on surface, 5.14:1 on tint */ --fxe-status-pool-tint: #F5EBD8; --fxe-status-respond-ink: #1F4E5A; /* 8.32:1 on surface, 7.65:1 on tint */ --fxe-status-respond-tint: #DDEEF0; --fxe-status-canceled-ink: #992E22; /* 6.90:1 on surface, 5.91:1 on tint */ --fxe-status-canceled-tint: #F6DED9; /* ---- Typography ---- * rem based so the browser's own font size setting scales everything, * the web equivalent of Dynamic Type. Never set a font-size in px. * Serif on display and title matches Brand.Typography.displayDesign. */ --fxe-font-display: "Playfair Display", Georgia, "Times New Roman", serif; --fxe-font-body: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --fxe-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; --fxe-text-display: 2.125rem; /* 34px at default root */ --fxe-text-title: 1.375rem; /* 22px */ --fxe-text-headline: 1.0625rem; /* 17px */ --fxe-text-body: 0.9375rem; /* 15px, guide body */ --fxe-text-subheadline: 0.9375rem; --fxe-text-caption: 0.8125rem; --fxe-text-chip: 0.8125rem; --fxe-weight-regular: 400; --fxe-weight-semibold: 600; --fxe-weight-bold: 700; --fxe-leading-tight: 1.2; --fxe-leading-body: 1.45; /* ---- Spacing, four point grid ---- */ --fxe-space-xxs: 0.25rem; /* 4 */ --fxe-space-xs: 0.5rem; /* 8 */ --fxe-space-sm: 0.75rem; /* 12 */ --fxe-space-md: 1rem; /* 16 */ --fxe-space-lg: 1.5rem; /* 24 */ --fxe-space-xl: 2rem; /* 32 */ --fxe-space-xxl: 3rem; /* 48 */ --fxe-page-margin: 1.5rem; /* 24px, space-6 */ --fxe-card-padding: 1rem; /* ---- Radius ---- */ --fxe-radius-xs: 6px; --fxe-radius-sm: 8px; /* icon glyph containers */ --fxe-radius-md: 16px; /* chips, secondary controls, cards */ --fxe-radius-lg: 28px; /* any tappable row or button */ --fxe-radius-pill: 999px; /* ---- Layout ---- */ --fxe-tap-min: 44px; --fxe-tap-comfortable: 52px; --fxe-hairline-width: 1px; --fxe-border-width: 1.5px; } /* --------------------------------------------------------------------------- * Base * ------------------------------------------------------------------------ */ body { background: var(--fxe-surface); color: var(--fxe-text-primary); font-family: var(--fxe-font-body); font-size: var(--fxe-text-body); line-height: var(--fxe-leading-body); } h1, h2 { font-family: var(--fxe-font-display); line-height: var(--fxe-leading-tight); } h1 { font-size: var(--fxe-text-display); font-weight: var(--fxe-weight-bold); } h2 { font-size: var(--fxe-text-title); font-weight: var(--fxe-weight-semibold); } :focus-visible { outline: 2px solid var(--fxe-focus-ring); outline-offset: 2px; } /* --------------------------------------------------------------------------- * Status chips * * Required markup. The icon and the label are both mandatory, which is how the * never-colour-alone rule is enforced on the web where there are no SF Symbols. * * * * You're In! * * * Icon glyphs that match the iOS SF Symbols: * You're In ✓ check * Player Pool ⌛ hourglass * Response Needed ! exclamation * Canceled ✕ cross * ------------------------------------------------------------------------ */ .fxe-chip { display: inline-flex; align-items: center; gap: var(--fxe-space-xxs); padding: var(--fxe-space-xxs) var(--fxe-space-xs); border-radius: var(--fxe-radius-pill); font-size: var(--fxe-text-chip); font-weight: var(--fxe-weight-semibold); white-space: nowrap; } .fxe-chip--in { color: var(--fxe-status-in-ink); background: var(--fxe-status-in-tint); } .fxe-chip--pool { color: var(--fxe-status-pool-ink); background: var(--fxe-status-pool-tint); } .fxe-chip--respond { color: var(--fxe-status-respond-ink); background: var(--fxe-status-respond-tint); } .fxe-chip--canceled { color: var(--fxe-status-canceled-ink); background: var(--fxe-status-canceled-tint); } /* --------------------------------------------------------------------------- * Cards and buttons * ------------------------------------------------------------------------ */ .fxe-card { background: var(--fxe-surface-raised); border-radius: var(--fxe-radius-md); padding: var(--fxe-card-padding); } .fxe-card__divider { border: 0; border-top: var(--fxe-hairline-width) solid var(--fxe-hairline); } .fxe-btn { min-height: var(--fxe-tap-comfortable); padding: 0 var(--fxe-space-md); border: 0; border-radius: var(--fxe-radius-sm); font-size: var(--fxe-text-body); font-weight: var(--fxe-weight-semibold); cursor: pointer; } .fxe-btn--primary { background: var(--fxe-navy); color: var(--fxe-text-on-navy); } /* White text on forest green, never navy. Navy on #3E7C55 is 2.98:1 and fails; white is 4.98:1 (Brand.textOnCourt). */ .fxe-btn--secondary { background: var(--fxe-court); color: var(--fxe-text-on-court); } .fxe-btn--quiet { background: transparent; color: var(--fxe-text-primary); border: var(--fxe-border-width) solid var(--fxe-border); } .fxe-btn--destructive { background: var(--fxe-status-canceled-ink); color: #ffffff; /* 7.59:1 on #992E22 */ } .fxe-btn:disabled { background: transparent; color: var(--fxe-disabled); border: var(--fxe-border-width) solid var(--fxe-disabled); cursor: not-allowed; } /* --------------------------------------------------------------------------- * MEASURED WCAG 2.1 CONTRAST RATIOS, sRGB, PALETTE B * Transcribed from Brand.swift's ACCESSIBILITY block and re-derived with the * WCAG relative-luminance formula on 2026-09-12 (every value agreed). * Thresholds: 4.5:1 body text, 3:1 large text and non-text UI components. * * #16264C on #F7F4EC 13.50:1 PASS primary text on page * #16264C on #FFFFFF 14.83:1 PASS primary text on card * #6E6552 on #F7F4EC 5.24:1 PASS secondary text on page * #6E6552 on #FFFFFF 5.76:1 PASS secondary text on card * #F6F3EA on #16264C 13.37:1 PASS text on navy * #CFC9BC on #16264C 8.99:1 PASS muted text on navy * #FFFFFF on #3E7C55 4.98:1 PASS text on green button * #231A0C on #B08D57 5.55:1 PASS text on accent * #6E6552 on #F7F4EC 5.24:1 PASS control border, needs 3:1 * #16264C on #F7F4EC 13.50:1 PASS focus ring, needs 3:1 * * #2C5A3E on #F7F4EC 7.24:1 PASS You're In on page * #2C5A3E on #E7F0E7 6.83:1 PASS You're In chip * #7A5E24 on #F7F4EC 5.53:1 PASS Player Pool on page * #7A5E24 on #F5EBD8 5.14:1 PASS Player Pool chip * #1F4E5A on #F7F4EC 8.32:1 PASS Response Needed on page * #1F4E5A on #DDEEF0 7.65:1 PASS Response Needed chip * #992E22 on #F7F4EC 6.90:1 PASS Canceled on page * #992E22 on #F6DED9 5.91:1 PASS Canceled chip * #FFFFFF on #992E22 7.59:1 PASS destructive button * * FAILING PAIRS AND THE RULE THAT REPLACES THEM * #16264C on #3E7C55 2.98:1 FAIL banned. Green buttons take white text. * #3E7C55 on #F7F4EC 4.53:1 fill only: fine as a fill, never body text. * #B08D57 on #F7F4EC 2.81:1 FAIL accent is fill only, never text or icon * #E3DCCB on #F7F4EC 1.24:1 below 3:1. Decorative separators only, which * 1.4.11 exempts. Controls use --fxe-border. * #B7B0A2 on #F7F4EC 1.96:1 below 4.5:1. Inactive controls, WCAG exempt. * Always pair with visible helper text. * ------------------------------------------------------------------------ */