/* Sponsorworks design tokens — SW-3635. * * SCOPE. Platform chrome: the primary action colour, neutrals, borders, surfaces, * status, and the metric scales. * * Two kinds of "brand" exist in this app and they are not the same thing. * PLATFORM brand is Sponsorworks' own green (--sw-primary) — hardcoded identically * into 12 stylesheets today, so it belongs here. TENANT brand (#891919, #d4b36e, * #004774, ToyotaType, RN House Sans) arrives at runtime from ThemeController and * must never be frozen here. Do not add a tenant colour to this file. * * DERIVATION. Every value below is the dominant existing value for its role, * counted across styles.css / eventapp.css / the feature sheets, not a new scale. * Where the codebase was genuinely split (radius: 3/4/5/6/10px all in heavy use) * the token collapses it to the smallest defensible set and the comment says so. * * SOURCE OF TRUTH. --ea-* in eventapp.css predates this file and has ~200 call * sites. It is now an alias layer (bottom of this file), not a second palette: * eventapp.css keeps its var(--ea-*) references and loses its own :root block. * * NEW CSS USES TOKENS. Literals are only acceptable in the pre-existing sheets * until they are migrated. Shared/FormControl is migrated. The remaining Shared * sheets carrying "literals until tokens.css lands" are the rest of that batch. * * ONE FILE. Every --sw-* custom property is declared here, and nowhere else, * except the --sw-brand-* set Theme.cshtml writes per tenant. Linked from _Layout, * so a component sheet reads tokens without @importing anything. A value private * to one component stays on that component's own selector, not here. */ :root { /* --------------------------------------------------------------- PRIMARY * The green primary button ("Submit Feedback", "Save", swal2 confirm). This * is the platform's primary action colour and the most important token here. * * It reaches the screen today by overriding Bootstrap's .btn-success in 12 * separate sheets (styles.css:7419, .swal2-confirm, .modal .btn-success, and * nine feature sheets), plus --ea-success: #2fb52b in the PWA — the same green * one digit off. That is a naming accident, not a semantic: .btn-success was * the convenient Bootstrap hook. Green here means "primary action", NOT * "success". Status success is --sw-success and is a different job. * * ACCESSIBILITY — unresolved, see note at the foot of this file. * White on #2FB52A is 2.70:1. That fails WCAG AA for text (4.5:1) and fails * the 3:1 non-text bar too. The hover state is markedly more readable than * the resting state, which is backwards. Values are preserved as-is because * changing the brand green is a design decision, not a tokens one. */ --sw-primary: #2fb52a; /* white on this: 2.70:1 — see note */ --sw-primary-hover: #146c43; /* white on this: 6.45:1 — already in use */ --sw-primary-text: #ffffff; /* what the button actually uses today */ /* ------------------------------------------------------------- SECONDARY * The white dismiss button (.btn-secondary: Cancel, Close). The values are the * ones styles.css:7426 has always given it inside .new-layout-wrapper, promoted * so Shared/Buttons/style.css can apply them everywhere. The border is also the * hover fill. */ --sw-secondary-text: #4e4d51; /* on white: 8.39:1 */ --sw-secondary-border: #6c757d; /* white on this: 4.69:1, the hover state */ /* ---------------------------------------------------------------- TEXT * The Shared/* components introduced a cooler, higher-contrast ramp than the * Bootstrap defaults the older sheets use. That ramp wins: it is the newer * decision and it holds up on #fff and on --sw-surface-sunken. * --sw-text-subtle is for 11-12px meta only, never for body copy. */ --sw-text: #1e2028; /* 15.8:1 on white */ --sw-text-secondary: #5a5f6e; /* 6.4:1 — labels, secondary rows */ --sw-text-subtle: #6b7280; /* 4.8:1 — timestamps, counts, hints */ --sw-text-inverse: #ffffff; --sw-text-link: #0d6efd; /* .btn-tertiary, inline links */ --sw-text-selected: #1a4f9c; /* 6.86:1 on --sw-surface-selected, 7.95:1 on white */ /* -------------------------------------------------------------- SURFACE * Three levels is all the app actually uses: the card, the page behind it, * and the zebra/header fill inside it. #EBEEF3 is the established page * ground (Category/* sheets, .body-wrapper-new) — not a grey off a ramp. */ --sw-surface: #ffffff; /* cards, modals, table body */ --sw-surface-sunken: #f6f7f9; /* table headers, zebra, inset panels */ --sw-surface-page: #ebeef3; /* the app background behind cards */ --sw-surface-hover: #f3f4f6; /* row and menu-item hover */ /* Chosen options and groups in a picker, in the --sw-border-focus blue. Not * #d7efff / #004774: that pair is the default tenant theme. */ --sw-surface-selected: #e6effc; /* Disabled and read-only fields: Bootstrap's own grey, so every control greys alike. */ --sw-surface-disabled: #e9ecef; /* --------------------------------------------------------------- BORDER * One hairline for structure, one stronger for form controls at rest. * A control's edge is what tells you it is a field, so it has to clear WCAG's * 3:1 non-text bar on every surface a form sits on: 3.38:1 on white, 3.15:1 on * --sw-surface-sunken (a card body). #d0d0d0 was 1.54:1 and #949494, the * pickers' old value, 2.83:1 inside a card. Everything structural takes the * lighter rule, which is decoration and is not held to that bar. */ --sw-border: #e2e6ed; /* card edges, table rules, dividers */ --sw-border-strong: #878c96; /* input, select, textarea, picker at rest */ --sw-border-focus: #2c7be5; /* ---------------------------------------------------------------- STATUS * Paired fill + text, taken from .sw-status-pill, which is already the * platform's only correct status treatment. * * The + -bg pair does NOT clear 4.5:1 — measured 3.00 (success), * 2.86 (warning), 3.95 (danger), 3.57 (info), 4.39 (neutral). It is a chip * colour: a 11px bold label on its own fill, which is what .sw-status-pill * uses it for. Anything at body size on a -bg takes the -text token * below instead, which is the darker pair and clears 4.5:1 on the same fill. * "neutral" is the cancelled/informational chip — it is NOT a warning. * --sw-success is the approved/confirmed STATE. It is not --sw-primary and * the two are intentionally different greens: one labels a row, the other is * a button you press. Do not collapse them. * --sw-danger-solid is darker than the pair because it also has to serve * filled .btn-danger on white (6.5:1). */ --sw-success: #16a34a; --sw-success-bg: #dcfce7; --sw-success-text: #166534; /* on --sw-success-bg: 6.49:1 */ --sw-warning: #d97706; --sw-warning-bg: #fef3c7; --sw-warning-text: #92400e; /* on --sw-warning-bg: 6.37:1 — also the waitlist chip */ --sw-danger: #dc2626; --sw-danger-bg: #fee2e2; --sw-danger-text: #991b1b; /* on --sw-danger-bg: 6.80:1 */ --sw-danger-solid: #b02a37; /* filled destructive buttons — white on this: 6.50:1 */ --sw-danger-solid-hover: #a52834; /* white on this: 7.11:1 — hover and active for the above. #b02a37 is Bootstrap's own .btn-danger:active shade, so a resting button at that value needs a step below it or the press feedback disappears. */ --sw-info: #0284c7; --sw-info-bg: #e0f2fe; --sw-info-text: #075985; /* on --sw-info-bg: 6.59:1 */ --sw-neutral: #6b7280; --sw-neutral-bg: #f3f4f6; --sw-neutral-text: #4b5563; /* on --sw-neutral-bg: 6.87:1 */ /* ------------------------------------------------------------ TYPOGRAPHY * Size is the one axis the app already got right: 14 / 13 / 12 account for * 320 of ~500 declarations. px, not rem — the app has no rem-based root * sizing and converting is out of scope for this ticket. * Family is inherited on purpose so tenant fonts cascade. */ --sw-font-size: 14px; /* body, inputs, table cells */ --sw-font-size-sm: 13px; /* dense tables, tertiary buttons */ --sw-font-size-xs: 12px; /* meta, captions, help text */ --sw-font-size-2xs: 11px; /* status pills only */ --sw-font-size-lg: 18px; --sw-font-size-xl: 20px; --sw-font-weight-regular: 400; /* Nothing reads this. Not for headings or any tenant-font text: with no 500 face, 500 renders as 400 and the difference it was meant to make is lost. */ --sw-font-weight-medium: 500; /* The app's "bold". A tenant font that ships only 400 and 700 has no face at 600, so the browser renders 700: still the heavier weight, which is why this stays 600 rather than moving to 700. Aktiv's SemiBold is the face 600 means. */ --sw-font-weight-bold: 600; --sw-line-height: 1.5; /* Headings written from now on (UI-RULES rule 12, docs/ui/typography.html). * Read through the .sw-heading-* classes in Shared/Typography, never by a * feature sheet. Size and line-height are the same for every audience; only * the weight of the large sizes changes, below. Line-heights sit on the 4px * grid. The sm and xs sizes take --sw-font-weight-bold. * xs has no class: its only user is the table caption, which already has * these values, and a heading at label size reads as a field label. */ --sw-heading-xl-size: 28px; --sw-heading-xl-line: 32px; /* page title */ --sw-heading-lg-size: 20px; --sw-heading-lg-line: 24px; /* page section */ --sw-heading-md-size: 18px; --sw-heading-md-line: 24px; /* subsection, dialog title, form section */ --sw-heading-sm-size: 16px; --sw-heading-sm-line: 20px; /* card title, inner form section */ --sw-heading-xs-size: 14px; --sw-heading-xs-line: 20px; /* table caption */ /* Regular on a tenant font: tenant files can be trusted at 400 and 700 only, and 500 falls to 400 without saying so. */ --sw-heading-weight: 400; /* --------------------------------------------------------------- SPACING * Two scales, and that is intentional. * LEGACY: .singlemargin/.singlepadding (15px) and .doublemargin (30px) have * ~1,084 call sites in views. They are load-bearing; they are tokenised so * they can be retuned in one place, not so they can be replaced piecemeal. * COMPONENT: new component internals use the 4px scale the Shared/* sheets * already landed on (4/8/12/16). New CSS uses this one. */ --sw-space-1: 4px; --sw-space-2: 8px; --sw-space-3: 12px; --sw-space-4: 16px; --sw-space-5: 24px; --sw-space-6: 32px; --sw-space-legacy: 15px; /* .singlemargin / .singlepadding */ --sw-space-legacy-half: 7.5px; --sw-space-legacy-double: 30px; /* .doublemargin / .doublepadding */ /* ---------------------------------------------------------------- RADIUS * The app currently ships 3, 4, 5, 6, 10, 12, 14 and 15px. That is noise, * not intent. Three steps plus a pill: 3px and 5px map onto --sw-radius-sm, * 12/14/15px onto --sw-radius-lg. Existing sheets are not rewritten by this * ticket — new work uses these and migration is opportunistic. */ --sw-radius-sm: 4px; /* inputs, selects, small buttons */ --sw-radius-md: 6px; /* buttons, dropdowns */ --sw-radius-lg: 10px; /* cards, modals */ --sw-radius-pill: 999px; /* status pills, avatars */ /* ----------------------------------------------------------------- FORM * Shared/FormControl input box. These are the incumbent control size, * not the 4px spacing scale — padding 5/10 and height 32 are what is * on screen today. */ --sw-control-height: 32px; --sw-control-padding-y: 5px; --sw-control-padding-x: 10px; /* 14px at --sw-line-height, as a length: the pickers set it on elements * whose font-size is inherited from pages that are not always 14px. */ --sw-control-line-height: 21px; /* The .sw-form / .sw-form-row grid in Shared/form-row.css. .sw-form-horizontal * in Shared/FormControl is a different layout with its own 120px column; the * two are not interchangeable. */ --sw-form-label-width: 200px; --sw-form-control-max-width: 500px; /* ------------------------------------------------------ SECONDARY BUTTON * The values styles.css gives .btn-secondary under .new-layout-wrapper, for * a panel portalled to , which that wrapper rule cannot reach. Rests * white on --sw-surface; hover fills with the border colour and turns * --sw-text-inverse. */ --sw-secondary-text: #4e4d51; /* 8.39:1 on white */ --sw-secondary-border: #6c757d; /* 4.69:1 on white, and the hover fill */ /* ------------------------------------------------------ PICKER AND CHIP * Shared by the Select2 multi-select and the grouped multi-select, which * build the same chip and indicator column. On :root rather than on either * component because both portal their dropdowns to , outside any * component root. Indicator geometry follows react-select: the separator * stretches with equal top and bottom margin, glyphs centred in their slot. */ /* A picker sits in a row beside a .form-control, so at rest it is the same * --sw-control-height: 1px border, --sw-combobox-inset-y, a chip, the inset * again. The chip is one line to fit; its second line sits beside the name. * More chips than fit on a row wrap, and the field grows a chip row at a time. * The inset is the same on every side of a chip, the left included; the chip's * own left padding makes up the rest, so its text starts where an input's does. */ --sw-chip-height: 24px; --sw-combobox-inset-y: 3px; --sw-chip-bg: #e4e4e4; --sw-chip-radius: 8px; --sw-chip-padding: 0 0 0 calc(var(--sw-control-padding-x) - var(--sw-combobox-inset-y)); --sw-chip-secondary-color: var(--sw-text-secondary); /* 5.01:1 on --sw-chip-bg */ --sw-chip-remove-hover-bg: #cfcfcf; --sw-chip-remove-hover-color: var(--sw-danger-text); --sw-combobox-indicator-width: 34px; --sw-combobox-clear-slot-width: 22px; --sw-combobox-clear-font-size: 18px; --sw-combobox-indicator-margin: 8px; --sw-combobox-control-min-height: var(--sw-control-height); /* Stroke is --sw-text-subtle; a data URI cannot read a custom property. */ --sw-combobox-chevron-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* -------------------------------------------------------------- DETAILS * The label column of a label-and-value row: Shared/Details, and a * .sw-table--cards row on a phone, which is the same look. The fixed * width is the request card's label column; the percentage stops it * crowding the value out on a narrow screen. Resolved where it is used, * so the percentage is of that row's width. */ --sw-details-label-width: min(40%, 10.625rem); /* ---------------------------------------------------------------- SHADOW * Elevation is three values: resting card, floating layer, dialog. Anything * still using `box-shadow: 0 0 3px #ccc` (the old map/date treatment) is * legacy and should move to --sw-shadow-sm. */ --sw-shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --sw-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.10); --sw-shadow-lg: 0 10px 25px -5px rgba(0,0,0,0.15); --sw-focus-ring: 0 0 0 2px rgba(44,123,229,0.12); /* ----------------------------------------------------------------- MOTION * .btn-tertiary's underline wipe is the reference. Anything using these * must also honour prefers-reduced-motion, as that component does. */ --sw-transition: .3s ease-in-out; --sw-transition-fast: .15s ease-in-out; /* ------------------------------------------------------------------ Z-INDEX * Stated so portalled dropdowns stop being tuned by trial and error * (see the note in Views/Event/UserFeedback.cshtml:350). */ --sw-z-dropdown: 1000; --sw-z-sticky: 1020; --sw-z-modal-backdrop: 1040; --sw-z-modal: 1050; --sw-z-toast: 1080; /* --------------------------------------------------- ALIASES: eventapp PWA * eventapp.css owns ~200 var(--ea-*) call sites. Rather than rewrite them, * --ea-* becomes a thin alias of --sw-*, and the :root block at the top of * eventapp.css is deleted. Two values shift deliberately: --ea-text * (#212529 -> #1e2028) and --ea-border (#dee2e6 -> #e2e6ed), so the PWA and * the admin app stop disagreeing by a few percent of luminance. * Delete an alias once its call sites are migrated. */ --ea-white: var(--sw-surface); --ea-bg: var(--sw-surface-sunken); --ea-text: var(--sw-text); --ea-text-muted: var(--sw-text-secondary); --ea-border: var(--sw-border); /* The PWA has the primary/success confusion inverted relative to the admin app: * --ea-success (#2fb52b) is the brand green doing primary-action work, while * --ea-primary (#495057, Bootstrap gray-700, "from prototype") paints the * active tab underline and several button fills across 11 call sites. * Both are preserved verbatim — repainting the PWA is a visual-regression * conversation, not a tokens one. Neither mapping is correct long-term: * --ea-success should resolve to --sw-primary * --ea-primary's call sites should split into --sw-primary and a neutral * Flagged on SW-3635 rather than fixed here. */ --ea-primary: #495057; /* NOT --sw-primary. PWA chrome grey. */ --ea-primary-hover: #343a40; --ea-neutral: var(--sw-text-secondary); --ea-neutral-light: #e9ecef; --ea-neutral-dark: #495057; --ea-success: #2fb52b; /* the brand green, misnamed. ~= --sw-primary */ --ea-success-hover: #28a125; --ea-warning: var(--sw-warning); --ea-warning-hover: #b45309; --ea-radius-sm: var(--sw-radius-sm); --ea-radius-md: var(--sw-radius-md); --ea-radius-lg: var(--sw-radius-lg); --ea-shadow-sm: var(--sw-shadow-sm); --ea-shadow-md: var(--sw-shadow-md); } /* An admin-only surface is set in the Sponsorworks font, not the tenant's, so * its headings can take SemiBold at every size. The attribute goes on : * dialogs and jQuery UI widgets are appended to , and an attribute on a * wrapper inside the page would miss them. Nothing sets it yet. */ [data-sw-audience="admin"] { --sw-heading-weight: 600; } /* =============================================================== OPEN QUESTION * CONTRAST ON --sw-primary. Recorded here rather than silently resolved. * * White text on the brand green measures 2.70:1. WCAG AA wants 4.5:1 for text * and 3:1 for the button's own edge. The current hover colour (#146c43) is * 6.45:1, so the button becomes easier to read when you point at it. * * Measured options, none of which a tokens ticket should pick unilaterally: * #2fb52a 2.70:1 today — fails AA * #28a125 3.38:1 perceptibly the same green, still fails AA for text * #198754 4.53:1 passes AA, reads as a noticeably deeper green * #146c43 6.45:1 passes AA comfortably, but this is the hover colour * * A fourth route keeps the green exactly as-is and changes the text instead, * but near-black on #2fb52a is only 7.8:1 and looks unlike the button above. * * Needs a design call. Until then --sw-primary is the honest current value, * so tokenising does not quietly bless it. * ============================================================================ */