/* $Id: 5b362c4b5e49ec7c1a172f3f4c34c784101d1534 $ */ /* ============================================================================= HigherEdJobs Design Tokens -- RE-1130 ----------------------------------------------------------------------------- The single source of truth for color, typography, geometry and elevation on the public (Bootstrap 5) surface. HOW THIS FILE IS MEANT TO BE USED --------------------------------- Each token group is first WIRED UP at the value production already renders -- so the wiring is provably invisible -- and then FLIPPED to its design-system target as its own reviewable change. One group at a time: Phase 1 typography -- the --hej-fs-* / --hej-lh-* / --hej-ls-* group [FLIPPED] Phase 2 geometry -- the --hej-r-* and --hej-shadow-* groups Phase 3 components -- rules in components.bs5.css start consuming these A token still carrying a "DS:" comment has not been flipped yet; that comment records the target. Do not change an active value outside of its own phase. Each phase's diff is therefore a short, reviewable change in this file rather than a scattered edit across 55KB of component CSS. Where the design system's target value differs from what we render today, the target is recorded in a trailing "DS:" comment next to the token. Do not change an active value to its DS target outside of that token's phase. Loaded first in the HEJ block of templates/pageHeader.bs5.cfm, so every stylesheet after it can consume these. ========================================================================== */ :root { /* ------------------------------------------------------------------------- BRAND ---------------------------------------------------------------------- */ /* Gold -- the brand color and, per DS v0.2, the ONLY CTA color. Four spellings of this color exist in the codebase today (see DRIFT at the bottom of this file); #f0ab00 is the canonical one at 38 occurrences. */ --hej-gold: #f0ab00; --hej-gold-dark: #c88f00; /* DS: hover/active gold. No current equivalent. */ --hej-gold-light: #ffc94d; /* DS: the gradient's top stop. */ /* The hover fill for gold buttons. The design system brightens them with a top-to-bottom ramp from --hej-gold-light; we brighten them evenly instead (see the button rules for why), and this is that ramp's average. Applying --hej-gold-light flat is too pale against the rest colour -- gold is already a light hue, so the lighter stop washes out rather than reading as a lift. */ --hej-gold-hover: #f7ba26; /* Blue and green are RETIRED as CTA colors -- DS v0.2's gold-only palette now stands. .btn-blue (68 public files) and .btn-green (111) were not swept out of the markup; they are aliased onto gold in components.bs5.css, so the class names live on but no longer name a color. The two hues stay as tokens because non-button chrome still uses green (.tag-green) and because the style guide swatches them as retired. Do not reach for either on a button. RE-1130 G8 correction: this note used to claim nothing consumed --hej-blue outside the style guide. Not so -- #0076cf was still hardcoded as a TEXT colour in .font-blue, in three page-local .text-blue rules and in stickyCart.css, which is part of why Marketing kept seeing blues that were not the link blue. Those now read --hej-link. What still uses #0076cf is chrome, not text: carousel arrows and the layout gradients. */ --hej-blue: #0076cf; --hej-green: #58a618; /* Text links. Distinct from --hej-blue: this is the only blue DS v0.2 keeps. */ --hej-link: #0062a7; --hej-link-hover: #004d84; /* DS: darkened link. No current equivalent. */ /* ------------------------------------------------------------------------- INK (text + dark surfaces) ---------------------------------------------------------------------- */ --hej-ink: #333333; /* body copy, footer, charcoal button fill */ --hej-ink-2: #4c4e52; /* headings, charcoal outline-button border */ --hej-ink-3: #6b6f76; /* DS: muted/meta text. No current equivalent. */ /* The charcoal hover stop, exactly as --hej-gold-light is the gold one: both are the TOP stop of a 180deg gradient that settles back to the base colour. */ --hej-ink-light: #5a5d61; /* ------------------------------------------------------------------------- SURFACE + LINE ---------------------------------------------------------------------- */ --hej-surface: #ffffff; /* page + card background */ --hej-surface-2: #f7f7f7; /* striped table rows */ --hej-surface-3: #f0f0f0; /* widget / panel fill */ --hej-line: #e5e5e5; /* hairline rules */ --hej-line-2: #cccccc; /* stronger borders, input outlines */ /* ------------------------------------------------------------------------- FEEDBACK ---------------------------------------------------------------------- */ /* FLIPPED to the DS value. Four different reds were previously doing this one job across the bundle -- #a94442 (.font-red, .has-error borders), #dc3545 (Bootstrap's danger, used by the newer .has-error rules), #b94a48 (.help-block-error) and #f00 (.warning, the required-field asterisk). All now read from this token. The -rgb companion exists so a focus ring can be built with rgba(); it must be kept in step with --hej-danger by hand. */ --hej-danger: #c92a2a; --hej-danger-rgb: 201, 42, 42; --hej-danger-soft: #fdecec; --hej-success: #2f7d32; /* DS. No current equivalent. */ --hej-success-soft: #e8f5e9; /* DS. No current equivalent. */ --hej-warning: #a06b00; /* DS. No current equivalent. */ --hej-warning-soft: #fff4d6; /* DS. No current equivalent. */ /* ------------------------------------------------------------------------- TYPOGRAPHY -- FLIPPED (Phase 1, complete) ---------------------------------------------------------------------- */ --hej-font: 'Figtree', Helvetica, Arial, sans-serif; /* Phase 0c has landed, so 'Figtree' is a real 300-900 ladder and headings no longer need a separate single-weight family. The design system distinguishes headings by WEIGHT (700), not by family, so this resolves to the same stack as --hej-font. It survives as a named token because the heading rules read better for it, and because the DS may yet give headings a display face. */ --hej-font-heading: var(--hej-font); /* PHASE 1 FLIPPED -- was 14px / 1.42857143 and a 26/20/18/16/15 heading scale. Pre-flip values are in git at 5c595bcee if a comparison is needed. */ --hej-fs-base: 16px; --hej-lh-base: 1.55; --hej-fs-display: 40px; --hej-fs-h1: 32px; --hej-fs-h2: 24px; --hej-fs-h3: 20px; --hej-fs-h4: 18px; --hej-fs-h5: 16px; --hej-fs-lg: 18px; /* DS "Body L" -- also .font-large */ /* DS "Reading" -- long-form body copy: the job description and article text. 17px is not a step on the rest of the ladder; it is the size the design system specifies for sustained reading, so it stays literal. Marketing confirmed the same value is intended on desktop AND mobile (RE-1130 D6), which is why there is one token and no breakpoint pair. */ --hej-fs-reading: 17px; --hej-lh-reading: 1.65; --hej-fs-control: 15px; /* DS "Button" -- .btn label AND .form-control value */ --hej-fs-body-s: 14px; /* DS "Body S" -- alerts, breadcrumbs, CTA-card bullets */ --hej-fs-sm: 13px; /* DS "Label" -- form labels, .btn-sm; also help text */ --hej-fs-xs: 12px; /* DS "Eyebrow" -- kickers, ad caption */ --hej-fs-micro: 11px; /* DS "Micro". NO CONSUMER -- see note below. */ /* The five steps above that name a DS label were only implicit until the 2026-09-01 revision of the Mobile Tests drop, which promoted them into the documented type scale. Four of them we already rendered, in hardcoded px at the point of use; they are named here so the scale is one list. "Micro" (11/.14em/700, uppercase) is the exception: it is listed for data table headers, breakpoint tags and AD CAPTIONS, but the drop's own .ad-caption component rule is unchanged at 12px/400/no-transform -- which is what .js-ad-indicator already renders. The component rule wins over the type specimen (the same precedence the mobile delta doc settled on), so the token is named but deliberately unconsumed: our tables are author-supplied content tables, not the DS data table, and breakpoint tags are documentation only. */ /* Optical letter-spacing on large type. PHASE 1 FLIPPED -- all were `normal`. */ --hej-ls-display: -.02em; --hej-ls-h1: -.015em; --hej-ls-h2: -.005em; /* Two trackings, split by weight -- the DS is consistent about this and the 2026-09-01 revision names both. .16em goes with the 600-weight muted eyebrow ("Eyebrow"); .14em goes with the 700/800-weight ink or gold one ("Eyebrow Strong") -- the VIP header, the filter-section labels, the nav's section and group headings. Every eyebrow we render is the strong one; nothing consumes --hej-ls-eyebrow today, and it is kept so the pair stays legible as a pair. */ --hej-ls-eyebrow: .16em; --hej-ls-eyebrow-strong: .14em; /* ------------------------------------------------------------------------- GEOMETRY -- FLIPPED (Phase 2, complete) ----------------------------------------------------------------------- Reaches every Bootstrap component through the bridge at the foot of this file. Was the Bootstrap 5.3.8 scale: .25 / .375 / .5 / 1rem / 50rem. r-xs has collapsed into r-sm as planned: Bootstrap's sub-base tier (btn-sm, form-control-sm, badges) was .25rem and the DS has nothing under 8px, so 8px is now the site's smallest corner. It is kept as a distinct token only so the bridge stays readable. ---------------------------------------------------------------------- */ --hej-r-xs: 8px; --hej-r-sm: 8px; --hej-r-md: 12px; --hej-r-lg: 16px; --hej-r-pill: 999px; /* ------------------------------------------------------------------------- ELEVATION -- FLIPPED (Phase 2, complete) ----------------------------------------------------------------------- Was Bootstrap 5.3.8's own three shadows. The design system's are tighter and cooler-toned (a blue-grey rgba(15,20,25) rather than pure black), so the visible effect lands wherever `.shadow-sm` is used - 42 files - plus dropdowns and modals via the bridge. Our own components stay flat: shadow-2 and shadow-hover have no consumer until Phase 3 gives cards and tiles their elevation. ---------------------------------------------------------------------- */ --hej-shadow-1: 0 1px 2px rgba(15, 20, 25, .06), 0 1px 3px rgba(15, 20, 25, .05); --hej-shadow-2: 0 6px 20px rgba(15, 20, 25, .08); --hej-shadow-hover: 0 12px 30px rgba(15, 20, 25, .10); /* ------------------------------------------------------------------------- NAVIGATION PANELS ----------------------------------------------------------------------- The dark surface ramp for the mega-menu panels. Kept as tokens because the design system's dark-panels-in-a-light-header choice is the one open question still outstanding with Marketing -- if it is reversed, that is a flip of these four values rather than a rewrite of navigation.bs5.css. Our panels were already dark (#333 links painted onto a light container); these deepen and unify that rather than inverting it. ---------------------------------------------------------------------- */ --hej-nav-panel: #1d1d1d; --hej-nav-panel-2: #232323; /* row hover */ --hej-nav-feature: #141414; /* promoted card */ --hej-nav-panel-line: rgba(255, 255, 255, .14); /* ------------------------------------------------------------------------- SPACING ----------------------------------------------------------------------- The DS spacing scale. Nothing in the current CSS is expressed in these terms, so there is no "current value" to preserve -- these are additive and safe to consume from Phase 2 onward. ---------------------------------------------------------------------- */ --hej-space-1: 4px; --hej-space-2: 8px; --hej-space-3: 12px; --hej-space-4: 16px; --hej-space-5: 20px; --hej-space-6: 24px; --hej-space-8: 32px; --hej-space-10: 40px; } /* ============================================================================= KNOWN DRIFT -- resolved in PHASE 3, as rules adopt var() ----------------------------------------------------------------------------- The same brand colors are spelled several ways across the bundle. Collapsing them as a standalone edit would churn declarations that Phase 3 rewrites anyway, for no functional gain and a small visual risk -- so each of these disappears naturally when its rule is converted to var(--hej-...) during component convergence. GOLD #f0ab00 x38 canonical #efab00 x2 -> imperceptible (1/0/0) #f2ab01 x2 -> imperceptible (2/0/1) #f1aa00 x1 -> imperceptible (1/1/0) GREEN #58a618 x9 canonical #55a800 x3 -> VISIBLE (3/14/24). This is the .tag-green color (components.bs5.css:917, 2403, 2406). Do NOT collapse it to #58a618 on its own -- .tag is restyled to a DS pill in Phase 3, which supersedes the question. DARK #4c4e52 x7 canonical (headings) #4d4f53 x6 -> imperceptible (1/1/1). Button hover borders + nav. #4c4c4c x2 -> slight (0/2/6) Everything except #55a800 is imperceptible and safe to fold in silently. ========================================================================== */ /* ============================================================================= BOOTSTRAP BRIDGE ----------------------------------------------------------------------------- Bootstrap draws every component's corners from its own --bs-border-radius* variables, and its shadow utilities from --bs-box-shadow*. Rebinding those to our tokens is how the design system's geometry reaches buttons, inputs, selects, cards, modals, alerts, dropdowns, pagination and list groups without writing a rule per component. This block lives HERE, in tokens.css, on purpose. The shared /assets/custom/bootstrap/css/bootstrap.v5.css would be the more natural home, but the employer portal loads that file and does NOT load tokens.css - the var() references below would then be invalid at computed-value time on every employer page and would strip the radius from every Bootstrap component there. Keeping the bridge in a public-only file keeps this pass scoped to the public site, as intended. Source order matters: tokens.css loads after bootstrap.min.css, so these win. ========================================================================== */ :root { --bs-border-radius: var(--hej-r-sm); --bs-border-radius-sm: var(--hej-r-xs); --bs-border-radius-lg: var(--hej-r-md); --bs-border-radius-xl: var(--hej-r-lg); --bs-border-radius-pill: var(--hej-r-pill); /* --bs-border-radius-xxl (2rem) is left alone; the DS has no counterpart. */ --bs-box-shadow: var(--hej-shadow-2); --bs-box-shadow-sm: var(--hej-shadow-1); --bs-box-shadow-lg: var(--hej-shadow-hover); /* Danger, so Bootstrap's own utilities and validation state agree with our token rather than staying on its #dc3545: --bs-danger-rgb backs .text-danger / .bg-danger / .border-danger, and the two form-invalid variables back .is-invalid. */ --bs-danger: var(--hej-danger); --bs-danger-rgb: var(--hej-danger-rgb); --bs-form-invalid-color: var(--hej-danger); --bs-form-invalid-border-color: var(--hej-danger); }