/* Generated by script/build_tokens.rb from design/tokens.json. Do not edit. * * Regenerate: ruby script/build_tokens.rb * Verify: ruby script/build_tokens.rb --check */ :root { /* Brand green. The baseline also contained #1aaf11 in four places — a 2-point difference in the blue channel, visually identical, treated here as a typo and unified. */ --gp-color-green: #1aaf13; /* Was --dk-green. Form control text, progress borders. */ --gp-color-green-dark: #1a8754; /* Border paired with green on the checkpoint buttons. */ --gp-color-green-border: #198510; --gp-color-white: #ffffff; --gp-color-black: #000000; /* Body background. */ --gp-color-page: #fefefe; /* Chud checkpoint banner. */ --gp-color-alert-yellow: #ffff00; /* Bootstrap's .alert-secondary background, which is what a sale notification has always been painted. Kept as the opaque fill for floating surfaces that must not let anything through — see surface/plate. */ --gp-color-plate: #e2e3e5; /* Bootstrap's --bs-danger, and the border an invalid form control already gets today: .form-control.is-invalid, applied by bootstrap_form whenever the record has an error on that attribute. */ --gp-color-red: #dc3545; /* The text colour of .alert-danger in the vendored Bootstrap — the error summary shared/_errors renders. Also ships today; used here for error text because #dc3545 is 4.49:1 on the page background, a hair under AA. */ --gp-color-red-dark: #842029; /* Bootstrap's .bg-light. Recorded because it is what the chud status card actually renders: baseline:285 paints the card with surface/glass, and .bg-light on the same element carries !important and wins. The card reads as glass in the CSS and ships opaque. */ --gp-color-bootstrap-light: #f8f9fa; /* Bootstrap's .border. The stat chips carry .border, whose !important beats the white hairline at baseline:176 — so the chip border is this grey, not border/glass. 1.48:1 on the page background, which fails WCAG 1.4.11; kept because it is what ships, not because it is right. */ --gp-color-bootstrap-border: #dee2e6; /* Bootstrap's .text-muted. The stat chip label carries .text-muted, whose !important beats the #6c6c6c at baseline:186 — so grey-700 is NOT the colour that label renders, despite its description. Importance beats specificity. */ --gp-color-bootstrap-muted: #6c757d; /* Bootstrap's --bs-body-color, inherited by . Nothing in Setting[custom_css] sets a text colour on the attendee body, so this — not text/body's black — is what every ordinary paragraph and heading on the attendee surface actually paints. Measured on /vouchers at 390px: the h1 and the blurb both compute rgb(33, 37, 41). */ --gp-color-bootstrap-body: #212529; /* Bootstrap's .form-control border. Distinct from bootstrap-border (#dee2e6, the .border utility) and it is the one a text input actually gets. No page block in the row restyles the border on .form-control, so all four form pages ship this grey hairline — measured rgb(206, 212, 218) on /vouchers. The Figma Field component draws border/glass instead, which is the value .gp-field__control was reconciled AWAY from; that component is wrong and is tracked separately. */ --gp-color-bootstrap-input-border: #ced4da; --gp-color-grey-100: #ededed; /* Light stop of the stat chip's gradient (baseline:166-170); grey-200 is the dark stop. */ --gp-color-grey-150: #e6e6e6; --gp-color-grey-200: #dcdcdc; --gp-color-grey-300: #d0d0d0; --gp-color-grey-400: #cbcbcb; --gp-color-grey-600: #6e6e6e; /* Muted label text. */ --gp-color-grey-700: #6c6c6c; /* Label text in #shop (baseline:1039). NOT what the three form pages ship — their labels inherit Bootstrap's body colour, #212529 — so .gp-field__label deliberately sets no colour. */ --gp-color-grey-800: #3c3c3c; --gp-color-glass-fill: rgba(255, 255, 255, 0.65); --gp-color-glass-fill-strong: rgba(255, 255, 255, 0.78); --gp-color-glass-fill-faint: rgba(255, 255, 255, 0.15); --gp-color-glass-border: rgba(255, 255, 255, 0.75); --gp-color-glass-border-bright: rgba(255, 255, 255, 0.8); --gp-color-glass-sheen: rgba(255, 255, 255, 0.1); /* 8 uses in the baseline. */ --gp-dimension-radius-card: 16px; /* Navbar capsule. */ --gp-dimension-radius-nav: 35px; /* Was 5rem. 9 uses. Any value past half the control height rounds identically, so px is safe here. */ --gp-dimension-radius-pill: 80px; --gp-dimension-radius-round: 999px; /* 6 uses. Buttons, form controls, balance pill. */ --gp-dimension-control-height: 42px; /* Shop inputs and selects. */ --gp-dimension-control-height-sm: 35px; /* Stat chip (baseline:172). Fixed, so a long level name wraps out of it rather than growing it. */ --gp-dimension-chip-height: 60px; /* Level progress bar (baseline:247). Fixed px inside a fluid card — it can overflow a narrow one. Recorded as a parity defect to carry, not a value to reuse. */ --gp-dimension-meter-width: 300px; /* Form column on login, vouchers, edit-info and referrals. */ --gp-dimension-form-width: 350px; --gp-dimension-blur-glass: 2px; /* ATTENDEE UI ONLY. Corey, 2026-09-14: the stage screen and broadcast board use Grange and Richmond and no IBM Plex Sans at all; the attendee UI is all IBM Plex Sans. Do not bind board or stage text to this token — they are two type systems, not one with an exception. Note also that nothing in this repository loads IBM Plex Sans: the only @import is line 1 of the operator's custom_css row, so this token means what it says only while that row is injected on the same page. A local @font-face has to land before the row is emptied. The four emoji families are NOT optional padding: the operator's row sets --bs-font-sans-serif to exactly this ten-entry stack (baseline:6), and admin's --gpa-font-family-base carries the same ten. This token shipped with six, dropping them, which broke the project's own rule that a token models what ships. It was inert -- nothing binds var(--gp-font-family) -- so the fix changes no rendering, but binding a six-entry stack during the migration would have quietly removed emoji coverage from every attendee page. */ --gp-font-family: "IBM Plex Sans", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* TWO NAMES ON PURPOSE. Lowercase "grange" is the Adobe web project (https://use.typekit.net/wsd4utv.css), which renames every family to its own slug; capital "Grange" is the CoreSync install on a signed-in Mac. Neither alone covers both machines, so both are in the chain with the slug first. Verified against the served CSS: it defines grange, grange-condensed and grange-extended at weights 400 and 700 only, normal and italic. NO HEAVY over the link — asking for 800 gets a synthesised bold, and on a CoreSync machine gets a REAL Grange Heavy, so the same page would render differently depending on whether the venue is signed into Creative Cloud. Pin stage weights to 700. The link is loaded on performers/status only, never in minimum.html.erb, which is shared with /order_notifications. Stage only; never an attendee surface. */ --gp-font-family-grange: grange, Grange, "Helvetica Neue", Arial, sans-serif; /* Condensed is a SEPARATE FAMILY over the web link, not a width axis — font-stretch: condensed does nothing against the Typekit font and you must name "grange-condensed". The second name, capital Grange, is the CoreSync install, where font-stretch DOES select the condensed cut, so a declaration wanting condensed should set this family AND font-stretch: condensed. Needed because the board's big numbers overflow at normal width: the mockup sets a four-digit total 84px wide at 60px and Grange Bold is nearer 140px. */ --gp-font-family-grange-condensed: grange-condensed, Grange, "Helvetica Neue", Arial, sans-serif; /* NOT IN THE WEB PROJECT. https://use.typekit.net/wsd4utv.css serves only the three Grange families — zero Richmond of any kind — so unlike Grange this resolves ONLY on a machine with Richmond Display installed locally through CoreSync, and falls back to Helvetica everywhere else, including over the link. A different situation from Grange, and the reason this token is riskier than it looks. The family is "Richmond Display", NOT "Richmond": system_profiler SPFontsDataType reports Family: Richmond Display with 14 styles. This token said "Richmond" until 2026-09-14 and could never have matched. Nothing binds it yet. */ --gp-font-family-richmond: "Richmond Display", "Helvetica Neue", Arial, sans-serif; --gp-font-weight-regular: 400; --gp-font-weight-medium: 500; --gp-font-weight-semibold: 600; --gp-font-weight-bold: 700; --gp-font-weight-heavy: 800; /* DEAD AS SHIPPED — kept because the value is real in the row and deleting it would hide that. All three uses are `.form-label { font-size: 0.6rem }` inside #login, [id$="-edit"] and #referrals-new, and every one of them is beaten by `.mb-3 label { font-size: 0.75rem }` in the same block: (0,1,1,1) over (0,1,1,0). bootstrap_form wraps every non-inline field in .mb-3, so a form label on those pages renders at 0.75rem and this token has never painted a pixel. .gp-field__label uses font/size-small. Delete this and the matching Figma variable after 4 October. */ --gp-font-size-label: 0.6rem; /* Stat chip label (baseline:191). Deliberately px, not rem: the baseline sets it in px and 9px is below the point where a rem conversion is faithful. Smaller than any sane minimum — recorded as shipped, not endorsed. */ --gp-font-size-micro: 9px; /* Level NAME in the first stat chip (baseline:236), which is smaller than the numeric values beside it because the names run long — "Senior Product Pioneer" at 24px would not fit 30% of a phone width. */ --gp-font-size-chip: 13px; --gp-font-size-small: 0.75rem; --gp-font-size-body: 0.875rem; /* Checkpoint banner, participation body copy. */ --gp-font-size-lead: 1.125rem; /* Product name, panel headers. */ --gp-font-size-h2: 1.5rem; /* Page titles. */ --gp-font-size-h1: 2rem; /* Broadcast board only. Read at distance, never on a phone. */ --gp-font-size-display: 6rem; --gp-shadow-glass: 0px 8px 32px 0px rgba(31, 38, 135, 0.2), inset 0px 4px 20px 0px rgba(255, 255, 255, 0.3); --gp-shadow-card: 0px 2px 6px 0px rgba(0, 0, 0, 0.08), inset 0px 1px 2px 0px rgba(0, 0, 0, 0.06); /* The ::after highlight. Written 16 times in the baseline, but only 11 attach to an element that can render a pseudo-element (baseline:704 and :1096 target , and the three .btn-primary::after copies target submit inputs), and 2 of the survivors use drop-shadow(10px 3px 6px #888) brightness(122%) instead. All 11 carry an IDENTICAL box-shadow — the 2 variants differ only in their filter chain and a misspelt --backdrop-filter — so THIS token has 11 live copies. The wider pseudo-element recipe has 9. Still the most duplicated thing in the file. */ --gp-shadow-rim: inset -10px -8px 0px -11px rgba(255, 255, 255, 1), inset 0px -9px 0px -8px rgba(255, 255, 255, 1); --gp-zIndex-reminder: 1040; --gp-zIndex-overlay: 1050; --gp-surface-page: var(--gp-color-page); --gp-surface-glass: var(--gp-color-glass-fill); --gp-surface-glass-strong: var(--gp-color-glass-fill-strong); --gp-surface-alert: var(--gp-color-alert-yellow); /* An opaque floating surface. Glass in shape — same radius, rim and shadow — but solid, for anything that sits over video or over content it must not reveal. The sale toast is the case that forced it: /order_notifications is a transparent browser source, so any alpha at all lets the footage through. */ --gp-surface-plate: var(--gp-color-plate); /* The solid dark block — the +N Chuds chip on a sale toast. */ --gp-surface-ink: var(--gp-color-black); /* The unfilled part of a meter. On the broadcast board the accent fill grows along this as chuds arrive. */ --gp-surface-track: var(--gp-color-white); --gp-text-body: var(--gp-color-black); --gp-text-muted: var(--gp-color-grey-700); --gp-text-label: var(--gp-color-grey-800); --gp-text-field: var(--gp-color-green-dark); --gp-text-on-dark: var(--gp-color-white); /* Text over photography — the login cloud plate, the broadcast board. Same value as on-dark today but a different contract: on-dark is safe by construction, on-image is only safe with a scrim behind it. */ --gp-text-on-image: var(--gp-color-white); /* Validation message under a field. Darker than border/error on purpose: #dc3545 is 4.49:1 on the page background and this is small text, #842029 is 9.38:1. Same reasoning as border/focus being black. */ --gp-text-error: var(--gp-color-red-dark); --gp-action-primary: var(--gp-color-green); --gp-action-primary-border: var(--gp-color-green-border); --gp-action-on-primary: var(--gp-color-white); /* performers.icon_color defaults to #FFFFFF, which is invisible against surface/track and against white text. Anything rendering an accent must fall back to this when icon_color is blank or white. */ --gp-accent-fallback: var(--gp-color-green); --gp-border-glass: var(--gp-color-glass-border); --gp-border-glass-bright: var(--gp-color-glass-border-bright); /* Focus ring. Black rather than brand green on purpose: a focus indicator needs 3:1 against BOTH the control it outlines and the surface behind it, and green-dark against green is nowhere near that. Black is 4.9:1 on the green button and 21:1 on the page. */ --gp-border-focus: var(--gp-color-black); /* Border of an invalid control. Matches what .form-control.is-invalid already paints, so a .gp-field and a Bootstrap field in the same form do not disagree about what invalid looks like. */ --gp-border-error: var(--gp-color-red); --gp-radius-pill: var(--gp-dimension-radius-pill); --gp-radius-card: var(--gp-dimension-radius-card); --gp-radius-nav: var(--gp-dimension-radius-nav); --gp-control-height: var(--gp-dimension-control-height); --gp-control-height-sm: var(--gp-dimension-control-height-sm); }