/* * CONNECT design tokens. * * The token layer is a real stylesheet, not markup, and it is the file a tenant * theme overrides. Everything downstream reads these names; no page defines its * own colours. * * Structure: * 1. Light theme - the complete palette, on bare :root * 2. Dark theme - the same names, redefined, twice: * a) system preference, when no explicit choice * b) explicit [data-theme="dark"] * 3. Legacy aliases - original appearance-based names, repointed * 4. Typography and spacing - unchanged * * THREE THEME STATES, which is why the dark block appears twice: * - no data-theme attribute -> follow the operating system (the default) * - data-theme="light" -> force light, even on a dark OS * - data-theme="dark" -> force dark, even on a light OS * The media query is guarded with :not([data-theme="light"]) so an explicit * light choice beats a dark OS. Without that guard, "Light" would do nothing * for anyone whose machine is set to dark. * * COLOUR RULES, decided 20 August 2026: * - One accent hue (teal). The previous scheme needed two unrelated colours * because gold #b8965a fails WCAG AA both as text (2.62:1 on the page) and * as a text background (2.78:1 under white), so a brown was carrying text. * - The navy navigation surface is identical in both themes. * - Status colours are identical in both themes and only ever appear as pill * fills, never as text: the mint and yellow are unreadable on a light ground * (1.82:1 and 1.99:1) and the red is unreadable on a dark one (2.42:1). * - Every text pairing here meets 4.5:1; every control edge meets 3:1. * ConnectDesignTokenTest asserts this and will fail if a value drifts. */ :root { /* 7b. THE QR CODE'S GROUND, and the one colour in CONNECT that is deliberately the same in every theme. A scanner reads contrast, and a QR inverted for dark mode is a QR that will not scan - so this is declared three times with one value rather than left as a literal, which is what the token layer is for. */ --connect-qr-ground: #ffffff; --connect-qr-ink: #0b0f19; /* §5: the popup close control. A grey disc rather than a darker shade of the popup - Neerav's choice - so it reads as a control on any surface it lands on, including a photograph. */ --popup-close-fill: #E4E7EC; --popup-close-fill-hover: #D5D9E0; --popup-close-border: #D0D5DD; --popup-close-glyph: #1E2230; color-scheme: light; /* --------------------------------------------------------------- * 0. PALETTE - PRIVATE. The only place a raw value appears. * * A design system is not a set of tokens. It is a set of decisions with * exactly one place each, and a guard that fails the build when a second * place appears. Everything below this block is a ROLE, and a role names * what a colour is FOR. Roles are the public surface a tenant theme * overrides; these underscore names are not, and nothing outside this file * may reference one. * * The distinction earns its keep the moment two roles share a value. When * --connect-border and a surface's edge were both #e2e5e9, they were one * decision by accident, and changing a divider changed every card edge. * Naming the palette entry once and pointing two roles at it makes that a * CHOICE, visible in the file, that either role can leave without the other * noticing. * ------------------------------------------------------------- */ --_ivory: #faf8f3; --_white: #ffffff; --_mist: #f1f3f5; --_navy-ink: #1f2430; /* THE BRAND HUE IS TEAL, in both themes. Light takes the DEEP tone, dark takes the light one - one hue, two lightnesses, which is what makes the two themes read as one product rather than two. These were --_navy #24456F. The light accent was migrated to navy in error and is reversed here, not completed. Renamed as well as revalued, because a palette entry called navy holding a teal is a comment that lies, and this file's whole argument is that a value has one home with one true name. */ --_teal-brand: #0B5A55; /* 8.05:1 under white; 7.59:1 as text on ivory */ --_teal-brand-deep: #084440; /* hover; 10.99:1 under white */ --_teal-tint: #E6F0EF; /* 1.09:1 vs ivory - a tint, not a fill; carries ink at 13.36:1 */ --_shell: #1e2230; --_shell-raised: #303545; --_shell-text-muted: #c8ceda; --_slate: #5f6875; --_slate-deep: #3f4652; --_steel: #7e8794; --_steel-pill: #7d838e; --_hairline: #e2e5e9; --_gold: #b8965a; /* ROUND 42 A(1). The gold DARKENED FOR A LIGHT GROUND, chosen by Neerav on 11 September as option A. The estate already proves why it is needed: the_gold_that_was_replaced_still_fails_so_it_cannot_come_back measures #b8965a at under the text floor on white, and the nav's active mark on a light ground was one of the places still paying it at 2.97:1. */ --_gold-ink: #8a6520; /* H4: the brand line's midpoint - the bridge between gold at the top and teal at the foot. A raw value, so it lives here with the others. */ --_brand-line-bridge: #2b7f8f; --_teal-edge: #4E8F87; --_green: #1f7a47; --_green-soft: #dff6e9; --_green-pill: #1B7A47; --_green-pill-edge: #4c9370; --_green-fill: #5fd08a; --_green-edge: #9cc7af; --_amber: #8a5a00; --_amber-soft: #fff1c9; --_amber-pill: #a75f00; --_amber-pill-edge: #ca7300; --_yellow-fill: #ffd028; --_red: #b3261e; --_red-soft: #fce7e5; --_red-border: #d9a6a2; --_red-edge: #E1544B; /* 3.77:1 on the white card - the quiet edge of the danger two-tone */ --_red-pill: #9B2C2C; --_red-pill-edge: #af5959; --_teal-pill: #0F766E; --_teal-pill-edge: #3f918b; /* --------------------------------------------------------------- * 1. SURFACES - four elevation steps, not one flat ground. * ------------------------------------------------------------- */ --connect-canvas: var(--_ivory); /* warm ivory page */ --connect-surface: var(--_white); /* cards, panels, icon buttons */ --connect-surface-muted: var(--_mist); /* hovered rows, menu items */ --connect-surface-action: var(--_mist); --connect-surface-overlay: var(--_white); /* menus, dialogs */ /* Navigation shell - the constant across both themes. */ --connect-nav-surface: var(--_shell); --connect-nav-surface-raised: var(--_shell-raised); --connect-nav-text: var(--_white); --connect-nav-text-muted: var(--_shell-text-muted); /* --------------------------------------------------------------- * 2. TEXT * ------------------------------------------------------------- */ --connect-text: var(--_navy-ink); /* 14.62:1 on canvas */ --connect-text-muted: var(--_slate); /* 5.31:1 on canvas - #67707e sat on exactly 4.50 */ --connect-text-on-status: var(--_slate-deep); /* pill labels; 4.92:1 on the mint fill */ /* --------------------------------------------------------------- * 3. ACCENT - one hue. Teal sits 46 degrees from the navy and 38 from * the success green, the widest gap left once red, amber and green * are spoken for by the status roles. * ------------------------------------------------------------- */ /* ONE BRAND HUE - TEAL - AT TWO LIGHTNESSES. Light takes the deep tone, dark takes the light one. Not a per-mode pair of different colours: the same hue, moved along lightness so it carries on either ground. Measured against the REAL ivory ground #faf8f3, not the #ffffff surface token - the table is transparent and the page is ivory. */ --connect-accent: #1868DB; /* §7: BLUE is the default in both themes. 4.90:1 on ivory */ --connect-accent-hover: #1250aa; /* the deeper blue */ --connect-accent-text: #1868DB; /* 4.90:1 on ivory */ /* ROUND 7 §1: THE INK IS PART OF THE PAIR, NOT A GLOBAL. This was declared ONCE, here, as white - which was a correct reading of a spec that described four accent FILLS and never said what sits on them. It broke the moment an accent went pale: mono in dark mode fills #e9e7e2 and painted white text on it at 1.24:1, so "Set as organisation default" was a blank block. Every accent block now declares its own ink, so a new accent cannot inherit one nobody measured against its fill. Measured, all eight fills with white: light blue 5.20, teal 8.05, indigo 6.62, mono 15.83; dark blue 4.55, teal 4.81, indigo 4.97 - and mono-dark 1.24, which takes #1E2230 at 12.81 instead. Hovers measured with them. This value remains the DEFAULT-accent ink, for a shell carrying no data-accent at all. */ --connect-accent-on: var(--_white); /* text sitting on a filled accent */ /* Text and hairlines sitting on any saturated fill: the dark sidebar rail, the mobile bar, the reminder banner, a status pill. White in both themes because the fill underneath stays saturated in both - but it is a token now, so a future theme can reach it. Previously 17 hardcoded #fff the theme could not see. */ --connect-on-fill: var(--_white); /* Derived in hue space, not by mixing navy into ivory: a 9% mix came out #e7e8e7, a flat grey, because the warm ground cancelled the blue. This keeps hue 214 and reads as navy. 1.09:1 vs ivory - a tint, not a fill - and carries ink at 13.41:1. */ --connect-accent-soft: #e7eefb; /* tinted callouts */ /* The menu trigger is a PER-MODE treatment, expressed as tokens so the component keeps owning its paint without !important. LIGHT: no ground. The quiet fill reads as DISABLED on ivory - a grey ground among outlined controls says "unavailable", which a trigger must never accidentally say. The chevron carries the distinction, and nothing else in the product wears one. DARK: the quiet fill stays; on a dark ground it is a lift, not a greying. */ --connect-trigger-ground: transparent; --connect-trigger-edge: var(--connect-accent); /* THE REFERENCE CONTROL - and the RELATIONSHIP, not the pair. * * Three roles that are only correct together: the ground a control sits on, * the edge that bounds it, and the icon that sits inside it. Recording them * as three values invites a later edit to move one - which is how a control * ends up with a 3:1 edge against a ground it no longer sits on. * * The relationship, which is what a future theme must preserve: * BG is the lightest of the three and carries the other two. * EDGE owes 3:1 against BG - it is a non-text boundary (WCAG 1.4.11). * ICON owes 4.5:1 against BG - it carries meaning, so it is treated * as text, not as decoration. * EDGE is lighter than ICON, always. The boundary must not out-shout the * thing it contains; when it did, the control read as a disabled field. * * Light, decided 25 August 2026 by measuring the live control in both themes: * a white ground rather than the ivory canvas, because these controls sit on * cards; a desaturated teal edge; and a deep teal icon. * * DARK IS DELIBERATELY UNCHANGED. It was measured and it holds - the same * three relationships already resolve there through the accent roles, so * restating them would create a second place for one decision. */ /* The icon-only control's SIZE, one token for every one of them. connect-overflow-toggle pinned 32px of its own, which can never reach the 44px coarse-pointer target - that is drift, not a decision, and it ends here. Coarse pointers lift this to 44px in the block at the foot of the file, the same way the other control heights are lifted. ROUND 18 A2a: 32px, WAS 38px. An icon button sits BESIDE a text button in every action tray in the product, and the text button is 32px (--connect-button-height). 38 beside 32 is a 6px step that nothing justifies and the eye reads as a mistake - measured on /admin/users, where a 38px pencil and a 32px "Delete user" sat 3px apart vertically. */ --control-size: 32px; /* ROUND 18 A2a: THE GLYPH INSIDE IT, ONE SIZE EVERYWHERE. There were two: 24px in 26 of the boxes measured and 19px in 5 - the privacy toggle, which shrank its ink deliberately and is the 19px variant A2a retires. Two glyph sizes inside one box size is not a distinction anybody was reading; it was drift with a reason attached to one side of it. 20px in a 32px box leaves 6px of ink-free space on each side. That number is not written down anywhere: --control-icon-inset derives it, so it stays correct when the box is resized again. */ --control-icon-size: 20px; --control-icon-inset: calc((var(--control-size) - var(--control-icon-size)) / 2); --control-bg: var(--_white); /* ROUND 7 §3: OFF TEAL, ONTO THE TIERS. These were correct when teal WAS the accent. Round 6 made Blue the default and never re-pointed them, so every action chip in CONNECT stayed painted in the old brand colour regardless of the user's accent - invisible to a search for hex literals, which is directive 17. The glyph leads its row, so it takes the PRIMARY tier. The edge takes the DECORATIVE tier: the bright edge was most of what made a forty-row list shout, and quietening it matters more than the glyph shade. §3.2 also named #3a4256 for this edge specifically. Measured, it is 1.58 on surface, 1.41 on surface-muted and 1.22 on overlay against a 3.0 non-text floor - it would be an invisible control boundary. The same section's table assigns chip edges to the decorative tier, which measures 4.00 / 3.56 / 3.08. The table is the half that survives measurement. Reported rather than shipped. */ --control-border: var(--connect-icon-decorative); --control-icon: var(--connect-icon-primary); /* D6, 30 Aug: 52px -> 58px, one token so .side.side--collapsed's own width and .shell's grid-template-columns (the ONE contract that owns whether .main follows the rail) always move together. 10% of 52 is 57.2; 58 was chosen over rounding down because it gives even 19px gutters around a 20px icon (58 - 20 = 38, halved) rather than an odd split, and because it lets --control-size's own 44px coarse-pointer variant fit inside the rail's content box (58 - 7 - 7 padding = 44) for the first time - at 52 it overflowed by 6px. */ --connect-rail-collapsed-width: 58px; /* Brand mark. The travelSTYLE CONNECT wordmark is identity, not an accent - * it must not follow a theme or an accent change. Gold on the navy sidebar * measures 5.69:1, and the sidebar is identical in both themes, so one value * is correct everywhere. */ --connect-brand-mark: var(--_gold); /* THE NAV'S ACTIVE MARK IS AN ACCENT, NOT THE WORDMARK, and the difference is why this is a second role rather than a theme on the first. connect-brand-mark is recorded as deliberately theme-invariant - "the wordmark is identity, not an accent, it must not follow a theme" - and that decision is correct and untouched. The nav's active state is not identity: it says WHERE YOU ARE, it changes as you move, and on a light ground it has to be legible rather than on-brand. So it follows the theme and the wordmark does not. */ --connect-nav-active-mark: var(--_gold-ink); /* --------------------------------------------------------------- * 4. STRUCTURE * ------------------------------------------------------------- */ --connect-border: var(--_hairline); /* decorative dividers */ --connect-border-strong: var(--_steel); /* inputs and control edges; 3.42:1 */ /* THE SCROLL THUMB, taken off the surface it sits on rather than left to the browser. A default thumb is painted by the platform in the platform's own theme, so a dark card got a light scrollbar and the one loud thing in the tile was its scrollbar. Deliberately quiet at rest and stronger on hover: the resting state is below the 3:1 non-text floor BY REQUEST - discreet was the ask - and the interactive state is above it. Scrolling never depends on seeing it; wheel, trackpad, touch and keyboard all reach the same rows. */ --connect-scroll-thumb: #b3bcc8; /* 1.92:1 on #ffffff */ --connect-scroll-thumb-hover: var(--_steel); /* 3.63:1 on #ffffff */ /* The edge of a SURFACE, as distinct from a divider drawn across one. They shared --connect-border, so they were one decision by accident: a card's outline and a rule between two rows had no way to differ, and changing either changed both. Same value today - that is the point. It is now a choice the file records rather than a coincidence, and either can move without dragging the other. */ --surface-edge: var(--_hairline); --connect-elevation: 0 1px 2px rgba(31, 36, 48, .06), 0 8px 24px rgba(31, 36, 48, .06); /* §5 follow-up: the focus ring and info hue ARE the brand/accent hue, so they track the person's chosen accent (var(--connect-accent-text)) rather than a fixed teal - otherwise a table link stayed teal under a blue accent (Neerav). Same resolved value at the default, so no default change. */ --connect-focus-ring: var(--connect-accent-text); /* 9.18:1 on ivory, non-text floor is 3.0 */ /* --------------------------------------------------------------- * 5. STATUS * * Two distinct roles, deliberately separated: * *-fill the pill background. Identical in both themes. * *-text a text-safe value for the rare places a status colour has * to be a word rather than a badge. * ------------------------------------------------------------- */ --connect-status-success-fill: var(--_green-fill); --connect-status-warning-fill: var(--_yellow-fill); --connect-status-danger-fill: var(--_red); --connect-status-danger-on: var(--_white); /* the only fill dark enough for white */ /* PHASE 0, 2 September: SUCCESS DROPS ITS OWN HUE. * It renders as the same two-tone teal every neutral control wears - the * quiet edge of --control-border around the stronger ink of --control-icon * - so "done" is carried by the checkmark SHAPE rather than by a second * colour competing with the brand. Six role tokens moved, in all three * theme blocks: the ink, the soft ground, the positive icon and its edge, * and the success pill's ink and edge. * * TWO THINGS DELIBERATELY LEFT GREEN, neither an oversight: * * --connect-status-success-fill is a saturated status GROUND, not a * two-tone control. It is guarded as identical in both themes and its * label contrast is tuned to it, so it is a separate decision. * * --connect-chart-green is CATEGORICAL - it means "Task" beside blue, * amber and red in the workload donut, not "success". Recolouring it * would cost the chart its distinctness and say nothing about status. * * Note the dark pairing: success takes --control-icon (#6fcfc4), which is * NOT --connect-accent (#118075) there. The brief names the neutral * control, and the control's ink is what a positive glyph should match. */ /* D1 (round 6): SUCCESS IS SEMANTIC AND NEVER FOLLOWS THE ACCENT. "This worked" must look the same to everyone, or a person on Mono gets grey confirmations and a person on Blue cannot tell "saved" from "selected". This was var(--_teal-brand) - the BRAND hue - which is why every success message went on rendering teal after the accent moved to blue. 5.03 as text on ivory, 5.34 on white, 4.70 on its own tint. */ --connect-success: var(--_green); --connect-success-soft: var(--_green-soft); /* #ffd028 IN BOTH THEMES. Neerav's decision, 5 September 2026, taken with the contrast in front of him and knowingly accepting it. This was var(--_amber) #8a5a00. The value now matches --connect-status-away, --connect-status-warning-fill and --_yellow-fill, which were already #ffd028 in both themes; one yellow, not three. MEASURED, AND FAILING THE TEXT FLOOR ON PURPOSE: #ffd028 on #ffffff 1.47:1 (was 3.46:1) floor is 4.5:1 #ffd028 on #fff1c9 1.31:1 (was 5.27:1) warning-soft ground #ffd028 on #1e2230 10.78:1 dark, unaffected The second line is not in the decision record and is the worst of the three: two of the five text consumers - the status-hold pill and the OneDrive connection note - paint warning text ON warning-soft, and that pairing lands at 1.31:1. Recorded in DEFERRED-DEBT so it is traceable when the value is revisited, which Neerav intends to do as a single token change. */ /* CHAT 12 ITEM 11(b) - THE REVISIT THE RECORD ABOVE SAID WAS COMING. The 5 September decision put #ffd028 here knowingly, and the paragraph above records the debt it created and that Neerav intended to revisit it "as a single token change". This is that change, asked for in his own overnight queue, and it moves ONE token: light-theme warning TEXT. #8a5a00 is not a new colour - it is the value that was here before 5 September, so the estate is returning to an amber it already knew rather than inventing one. #8a5a00 on #ffffff 5.93:1 (was 1.47:1) floor 4.5:1 #8a5a00 on #faf8f3 5.58:1 (was 1.38:1) the ivory canvas #8a5a00 on #fff1c9 5.27:1 (was 1.31:1) warning-soft, the worst pairing the record names DARK IS UNTOUCHED at #ffd028 and 10.78:1, which was never the problem. --_yellow-fill keeps its value, so the status dot, the chart amber and --connect-status-away are unchanged: this is the text token only, and the "one yellow, not three" intent survives everywhere it was about fills. */ --connect-warning: #8a5a00; --connect-warning-soft: var(--_amber-soft); --connect-danger: var(--_red); /* 6.54:1 on white */ --connect-danger-soft: var(--_red-soft); --connect-danger-border: var(--_red-border); --connect-danger-deep: var(--_red); --connect-danger-deep-soft: var(--_red-soft); /* MIGRATED TO NAVY. When the light accent moved from teal to navy this one did not come with it, so links and informational text stayed teal on a page whose every other accent was navy - two accents in a system whose first colour rule is that there is one. It was missed because nothing references --connect-info by that name on a page: nine of its fifteen uses arrive through the --link-blue alias, and a rename that follows the token does not follow the alias. */ --connect-info: var(--connect-accent-text); /* * NOTE on --connect-warning. Yellow is intrinsically light: the darkest yellow * that carries white text, or that reads as text on white, is olive-brown. * There is no yellow that is both vivid and text-safe. The four remaining * places that use this as a word should become pills, after which this token * can be retired. Until then it is text-only and never a surface. */ /* --------------------------------------------------------------- * 6. ICON ROLES - colour carries meaning, never decoration. * ------------------------------------------------------------- */ /* The four comments that sat here described tokens deleted in !268 for having no references. The COMMENTS were left behind, describing nothing - a role vocabulary with no roles in it. Restored as real tokens, because the vocabulary is the useful part: it is what lets a new icon be given a meaning rather than a colour picked to match a neighbour. */ /* ── THE THREE NEUTRAL TIERS (round 7 §3.2) ────────────────────────────── Icons are neutral furniture in three weights, and the accent has exactly three jobs: the current item in main-body navigation, the primary action in a set, and links. Most icons are no accent colour at all. Hover raises an icon ONE tier (decorative -> standard -> primary) and never changes hue. Focus keeps the accent ring. These are TIERS OF EMPHASIS, deliberately separate from the semantic icon roles below (positive/negative/quiet), which say what a thing MEANS. A tier says how loudly it speaks; a role says what it is. An icon takes one of each, never a tier in place of a role - a success tick is green because it means done, whatever its emphasis. */ --connect-icon-primary: #1E2230; /* top-bar actions; the single action chip in a row */ --connect-icon-standard: #5F6875; /* row actions where several compete; widget titles */ --connect-icon-decorative: #818B9B; /* drag grips, resize corners, the magnifier, chip edges; #8791A0 measured 2.87 on surface-muted */ --connect-icon-neutral: var(--_slate); /* neutral action */ /* E2: success is ONE colour. A tick that means "done" and text that means "done" are the same semantic, so splitting them across two hues would be an accident rather than a treatment (directive 13). NOTE, reported not hidden: nothing currently reads this token - the tick controls take --connect-success directly - so moving it changes no pixel today. It is moved anyway so that whoever next reaches for "positive" gets the success green rather than a brand colour left pointing the wrong way. */ --connect-icon-positive: var(--_green); /* answered, heard, done */ /* 1c, 2 September: DANGER GETS THE EDGE ITS OPPOSITE ALREADY HAD. * --connect-icon-edge-positive has existed since the icon tier was built; * there was no negative counterpart, so a danger control had an ink and no * quiet edge to pair it with while every neutral and positive one did. * That asymmetry is what "complete the danger token at two lightnesses" * meant - the two lightnesses are the INK and the EDGE, per theme, not two * shades of the same job. * * The weights are matched to the neutral control's edge on the SAME ground * rather than picked by eye: 3.77 against its 3.75 on the white card, 3.29 * against its 3.29 on the dark one. Both clear the 3:1 non-text floor. * * NOTE WHICH ONE IS LIGHTER - it flips with the ground, exactly as the * design record requires. On the white card the edge (#E1544B) is lighter * than the ink (#b3261e); on the dark card the edge (#DC281A) is darker * than the ink (#f08a82). The icon is always the strong tone. */ --connect-icon-negative: var(--_red); /* missed, waiting, destructive */ --connect-icon-edge-negative: var(--_red-edge); --connect-icon-quiet: var(--_steel); /* inactive, none waiting */ --connect-icon-edge: var(--_steel); /* The green pill edge rather than --_green-edge: measured on the real ground, --_green-edge is 1.87:1 and fails the 3:1 non-text floor, while this is 3.67:1 on white and 3.46 on ivory - the same standing the teal it replaces had (3.75 / 3.53). */ --connect-icon-edge-positive: var(--_green-pill-edge); /* --------------------------------------------------------------- * 7. LEGACY ALIASES - original names kept pointing at the roles above, * so existing rules follow the new palette without being rewritten. * ------------------------------------------------------------- */ --bg: var(--connect-canvas); --card: var(--connect-surface); --surface: var(--connect-surface); --surface-action: var(--connect-surface-action); --nav: var(--connect-nav-surface); --nav2: var(--connect-nav-surface-raised); /* --gold and --link-blue are DELETED, not renamed. Both outlived the colours they were named for: --gold resolved to a teal and --link-blue to #6fcfc4, a teal called blue. A name that lies is worse than no name, because the next reader trusts it - and --gold was the sole cause of the one inconsistent control on /contacts, holding #0F766E at 2.89:1, the exact value replaced this morning for being below the floor. 46 references now point at the accent role and 7 at the info role - the roles they actually meant all along. */ --ink: var(--connect-text); --muted: var(--connect-text-muted); --line: var(--connect-border); --border: var(--connect-border); --shadow: var(--connect-elevation); --green: var(--connect-success); --green-soft: var(--connect-success-soft); --amber: var(--connect-warning); --amber-soft: var(--connect-warning-soft); --danger: var(--connect-danger); --danger-soft: var(--connect-danger-soft); --red: var(--connect-danger-deep); --red-soft: var(--connect-danger-deep-soft); /* ───────────────────────────────────────────────────────────────────────── ROUND 41 J — THE ICON AND CONTROL PACK'S TOKEN NAMES, BRIDGED. The pack is a self-contained system: its controls.css opens with its own :root carrying literal hex for --sur-0/1/2, --ink, --line, --success and the rest. Installing that file whole would overwrite this estate's palette with the pack's, and re-theme every page in the product - including --ink and --line, which this block has aliased since round 18. So the NAMES are bridged and the COLOURS stay the estate's. The pack's classes then resolve through the theme that is already here and follow data-theme in both directions, which importing its :root would have broken. --active is the pack's "could not proceed here, go elsewhere" blue, which is this estate's info role; --neutral is its informational grey, which is the muted text role. Every other pairing is the same word twice. */ --success: var(--connect-success); --warning: var(--connect-warning); --active: var(--connect-info); --neutral: var(--connect-text-muted); --tint: 14%; /* ───────────────────────────────────────────────────────────────────────── ROUND 18 A2c — THE CONTROL HEIGHTS, AND WHAT EACH ONE IS FOR. Six heights were measured across sixteen module pages before this item. There are four, and every control takes its height from one of them: 30px a pill or a chip - a piece of STATE, not something you press 32px anything you press: a button, an icon button, a menu trigger 38px anything you type or choose in: an input, a select, a textarea 44px all of the above, where the pointer is coarse or the viewport is below the shell's 767px breakpoint WHAT THE OTHER MEASURED HEIGHTS TURNED OUT TO BE, because A2c asks for the cause and "accident" was not it: 17px an inside a SENTENCE - the "Change" links on the settings overview, and frankfurter.dev inside a paragraph on Currency & margin. Its height is its line box. An inline link in prose is not a control and giving it a control height would put a 32px box in the middle of a paragraph. 20px a.connect-jump-link, which round 17 deliberately made quiet underlined text rather than a chip, and native checkboxes and radios, which the coarse-pointer floor already lifts. 19px the ONE genuine defect: .connect-privacy-toggle shrank its glyph to 19px inside a 38px box. Retired by A2a - one glyph size. NAVIGATION ITEMS ARE NOT IN THE SET, and that is a decision rather than an omission. Measured after this item, at 1440: module tabs 42px, settings rail items 35px, dashboard widget rows 34px. Each takes its height from its own padding and line box, because a tab is not a button - forcing a tab onto the button height would either crop its underline or pad the row out to nothing anybody asked for. What they must not do is disagree with THEMSELVES, and each of the three is one number wherever it appears. ───────────────────────────────────────────────────────────────────────── */ --connect-button-height: 32px; /* §3: 32px is the in-app default for action buttons */ /* 5C, 9 September: ONE CONTROL HEIGHT, AND THIS IS IT. Fields were never brought to the button height. Measured across 447 controls on thirteen pages: 189 render 38 (every text input, select, date and number field) and 135 render 32 (every button and action link), so on every form in the product a button sat 6px shorter than the input beside it and their centres never aligned. The 32 is the value that stays - twelve controls on one page and four on another already render it, and §3 chose it - so the field height comes to meet it rather than the other way round. A 14px/16.8 line in a 32px box leaves 6.6px of vertical room, which is not tight: the compact control has been 30 since it was written. The coarse-pointer block below still raises BOTH to 44, so nothing about touch targets changes. */ /* The button's own horizontal padding. Off the 4px scale on purpose - 14 is what every action control in the product has used since §3 - and named here so the rules that need it stop spelling it out. */ --connect-button-padding-x: 14px; --connect-control-height: 32px; /* 5C: fields and buttons are one height now */ --connect-control-radius: 8px; /* THE SPACE BETWEEN TWO CONTROLS IN A ROW. ONE VALUE, AND ONE WRITER. Round 47 §4.1 measured eight rows: 4px on /contacts page actions (from a whitespace text node, not a rule), 8px on /contacts, /finance and /settings, 10px on /calls, /dashboard and the accent swatches. Three values and three mechanisms - a gap, a margin, and nothing at all - and every row reads from this now. 8px, because it is the majority and the tighter of the two real values. A row of controls is one object; 10px started to read as two. ROUND 48: AND IT IS DECLARED ONCE. Round 47 wrote this token a SECOND time two hundred lines further down, with the paragraph above attached to it. Same value, so nothing rendered differently and nothing failed - and one token with two writers is the fault I had corrected in two other places that same round. The guard I wrote for it matched the duplicate as happily as the original, because it asked whether the token existed, not how often. A CONTEXT NEEDING DIFFERENT SEPARATION GETS ITS OWN NAMED TOKEN, never an unexplained literal - see --connect-topbar-gap below. */ --connect-control-gap: 8px; /* 5D: THE FIELD WIDTH SCALE. Measured first: 14 distinct fr multipliers were in use across the product's grids - 1fr in 186 places and thirteen one-off values in 42 more (2, 1.55, 1.3, 1.2, 1.1, .9, .8, .75, .7, .65, .62, .6, .4). None of them was derived from anything; each was tuned by eye against one page at one width. Three rungs, keyed on WHAT THE FIELD HOLDS, not on how it looked that day: narrow a bounded number - a quantity, a day count, a percentage field the default - a date, a money amount, a code, a select wide free text carrying a name, a description, a label A field that matters more takes MORE TRACKS, not a bigger fraction: span is importance, width is content class. That keeps the two decisions separable, which a hand-tuned 1.55fr does not. Same rule as the height scale above and the date presets in DateTimeFormatter: a named scale, never a free zoom. */ --connect-track-narrow: .6fr; --connect-track-field: 1fr; --connect-track-wide: 2fr; /* ROUND 25 Q6: THE REGION SPLIT SCALE, DERIVED FROM WHAT WAS THERE. Eight declarations sat off the field scale. Their main:aside ratios, measured before anything was proposed: 1.5 x3 1.2fr .8fr three pages 2.067 x2 minmax(0,1.55fr) minmax(300px,.75fr) 2.0 x1 .connect-two-thirds 0.818 x1 an INVERSION - the aside is wider n/a x1 a three-column comparison row, not a split at all They cluster, and tightly: three at exactly 1.5, and three within 3% of 2.0 - which is 2.0 with 1.55/.75 tuned by eye beside it. Two rungs, both read off that measurement rather than chosen: 3:2 the aside is a companion (was 1.2/.8, identical) 2:1 the aside is a sidebar (was 1.55/.75, 0.7% narrower main) A SPLIT IS NOT A FIELD WIDTH and these are not the .6/1/2 rungs. A field width says what a box HOLDS; a split says how a page divides. The values coincide at 2fr and the questions do not, so they are named separately - the merge comparison row uses the FIELD tokens and looks identical. The inversion is left hand-set and named: one page, one occurrence, and an aside wider than its main is a different intent that two rungs derived from six main-dominant splits have no authority over. */ --connect-split-3-2-major: 3fr; --connect-split-3-2-minor: 2fr; --connect-split-2-1-major: 2fr; --connect-split-2-1-minor: 1fr; /* ROUND 19 B3b. 32px, matching the buttons and icon buttons, which is what Neerav asked for: "Pills should have the new height like icons and buttons." 30 was not on the 4px scale either. See B3d in the close-out for the measured consequence at an 11px label. */ /* ROUND 45 §3. 24, NOT 32. The pack's pill is a label, not a control, and a 32px box made it read as one - a status sitting in a table cell at the same height as the button beside it claims the same weight. The pack's own spec records that the 5px/4px asymmetric padding "was an accident of the 32 box; removed", which is the same finding from the other end: the box was wrong and the padding was compensating for it. */ /* ROUND 48 §3.1 - THE TOPBAR IS DENSER, AND THAT IS A DECISION. Round 47 §4.4 permits a second value as a SECOND NAMED TOKEN with a stated reason. The topbar cluster has been 4px since round 18 and the reason was written beside the rule but never given a name: the bar's own 16px is the gap BETWEEN groups (brand | trail | controls), and inside a group it left the icon buttons 50px apart. One gap cannot do both jobs, which is why that container exists at all. So it keeps 4px and stops being an anonymous literal. A row of icon-only controls in chrome is not a row of labelled controls in page content - there is no text between them, so the same 8px reads as a wider space. */ --connect-topbar-gap: 4px; --connect-pill-height: 24px; --connect-pill-padding-x: 10px; --connect-pill-radius: 999px; --connect-button-radius: 8px; /* Deliberately compact controls (the sidebar theme switch). Small on a mouse, full touch target on a finger - the whole reason this is a token and not a literal is that the coarse-pointer block below can reach it. */ --connect-control-height-compact: 30px; --connect-button-font-size: 14px; /* ROUND 47 §1.2 - --connect-button-text IS GONE, NOT RENAMED. It held var(--connect-accent-text) and had exactly ONE reader in the whole estate: the non-primary control default in connect-overrides.css. Its name said "the colour of text on a button" and its value said "the accent", which is how every secondary control in CONNECT came to be blue. §1.2 offered renaming it if some reader genuinely needed the accent. None does. `.primary` never read it - it takes --connect-accent-on for white on the fill - so after §1.1 the token had no readers at all. A token nobody reads is a name people write new rules against. */ --radius: 10px; /* D1, 30 Aug: ONE SHARED POPOVER TOKEN. The nav flyouts carried 6px interior padding against a 9px corner radius - INTERIOR PADDING EXCEEDS THE CORNER RADIUS crowds the curve, content runs into the rounded corner instead of clearing it. The avatar panel already had this right (14px padding, 12px radius - padding exceeds radius, clears every corner). Named here once so every pop-out surface - flyouts, the avatar panel, the notification stack - reads from the same pair instead of three separately-tuned ones that can drift apart again. */ --connect-popover-padding: 14px; --connect-popover-radius: 12px; /* F1, 30 Aug: THE PERSISTENT TOP BAR'S HEIGHT. The bar is not new - it is .mobile-bar (68px, below 850px only, containing nothing but the wordmark) promoted to every width and given a job. One token because four separate rules have to agree on it: the bar's own height, body's padding-top (the bar is fixed, so nothing else pushes content clear of it), the rail's sticky top offset, and .shell's min-height. A literal in any one of them is a fifth place for the bar's height to be wrong. 64/56 rather than the old 68: the bar now carries controls sized by --control-size (38px) rather than a two-line wordmark, and 64 clears that with 13px above and below. */ --connect-topbar-height: 64px; /* H1, 31 Aug: CHROME INK - a token whose SCOPE is part of its definition. The top bar and the sidebar are the two chrome surfaces, they share ONE icon colour, and nothing else in the product uses it. That scope is the whole point of naming it: the moment a third surface reads it, it has stopped being chrome ink and the name is a lie. THE CONSEQUENCE IS THE POINT: TEAL BECOMES A DATA COLOUR. The bar's icon controls took --control-icon (the teal brand) because they used the shared icon primitive unmodified, so one hue was doing two jobs - chrome and data - which is the actual reason the bar icons and the donut looked mismatched. Chrome wears ink; teal belongs to charts and accents. Rest is the rail's own muted ink, so the bar's controls and the rail's nav rows are already the same colour rather than two greys. Hover and active go to full-strength on-fill. The hover GROUND is the raised nav surface - the same one .connect-avatar-trigger already hovers to - so the product has one rule for icon-only controls on chrome, not two. */ /* C1: the search pill sits on chrome, which is the SAME dark in both themes, so its ink cannot come from --connect-text - that flips and the pill's ground does not. These are the light theme's own ink values, pinned. */ --connect-search-ink: #1F2430; --connect-search-ink-muted: #5F6875; /* D6: THE CHROME GROUND IS NOT THE TIER SCALE'S GROUND, AND THAT IS WHY THESE TWO STAY OUT OF IT. The three neutral icon tiers (round 7 §3.2) are measured against surface, surface-muted and overlay - grounds that change with the theme. The two persistent global controls, Call note and Alerts, do not sit on any of them: they sit on the top bar, whose ground is #1E2230 in BOTH themes. Applying a scale outside the domain it was measured in is how the teal tokens survived an accent change, so these keep their own role. Measured on the real ground: the served glyph is #C8CEDA on #1E2230 = 10.02:1, in both themes. Nothing to change. For comparison, forcing them onto a tier would give 7.75 at standard - too quiet for two persistent globals - or 12.81 at primary, which shouts. The name was already honest, so it is kept rather than churned: this is the ink for CHROME, and it is not icon-only - hence not --connect-icon-chrome, which would be narrower than its two consumers. */ --connect-chrome-ink: var(--connect-nav-text-muted); --connect-chrome-ink-active: var(--connect-on-fill); --connect-chrome-hover-ground: var(--connect-nav-surface-raised); /* H4, 31 Aug: THE BRAND LINE. Gold at the very top, teal at the foot, and it decorates neither the bar nor the rail - it runs the full page height past both as one unbroken edge, which is the whole idea: a single mark that says the two chrome surfaces are one object. The midpoint is the bridge hue between the two ends; named here so the gradient is three tokens rather than three literals. */ --connect-brand-line-width: 3px; --connect-brand-line-top: var(--_gold); --connect-brand-line-mid: var(--_brand-line-bridge); --connect-brand-line-foot: var(--connect-accent); /* H5, 31 Aug: THE RAIL SURFACE FADE. Three things this has to get right, each of which was a defect first: - Its top value must EQUAL the bar's background EXACTLY. The rail used to start lighter than the bar, and that difference at the seam is what read as a cut-off edge rather than one surface. - It needs a FLAT RUN TO DEPART FROM. A ramp starting at 0% across the whole rail does not read as a fade at all; it reads as a panel that is slightly the wrong colour everywhere. Hence 60% flat, then ease. - MORE THAN TWO STOPS. A two-stop ramp falls linearly and looks mechanical, so the lift is 22/55/88 across 76/89/100 - an ease-in curve, not a straight line. Derived with color-mix from the two nav surface roles, so the ramp cannot go stale against a token change and carries no literals. ONE RAMP SERVES BOTH THEMES, and that is not an inversion dodged - the navy navigation surface is IDENTICAL in light and dark by express decision (see the colour rules at the head of this file), so both ends of this ramp are theme-invariant already. A second set of light stops would be a copy of these values under another name, which is the duplication this file exists to prevent. If the chrome surface ever does become theme-dependent, this is the block that needs a light twin. */ /* THE CHART PALETTE - FOUR SERIES SLOTS, ONE SET OF VALUES, BOTH THEMES. PR A, 31 August. Replaces --connect-chart-profit / --connect-chart-supplier (a dark pair and a separate light pair) and the four SEMANTIC ROLE tokens the workload donut was borrowing through a PHP array - three writers of a chart colour, now one. WHY ONE SET FOR BOTH THEMES, reversing what the retired block argued. That block's case was that the ground changes so the marks must. These four clear their floors on BOTH grounds - measured against the dark card #1E2230 and the light card #FFFFFF - so a second set would be two names for one decision, which is the duplication this file exists to prevent. They are named in ConnectDesignTokenTest's DELIBERATELY_THEME_INVARIANT with this reason; a role that is theme-invariant BY ACCIDENT is exactly what that guard exists to catch, so being invariant on purpose has to be written down where the guard reads it. FOUR CONSTRAINTS SHIP WITH THESE VALUES. They are conditions, not notes. 1. THE GREEN IS DELIBERATELY A SHADE WARM. A purer green measures ΔE 5.5 against this red under deuteranopia - the textbook red-green failure. #03A970 clears the 8.0 floor at 8.2. Do not "correct" it toward a purer green. 2. RED AND AMBER MUST NEVER BE THE ONLY TWO SERIES IN ONE CHART (ΔE 5.0 deutan on white). Under the assignment below they never are: they co-occur only in the four-series workload donut, where every slice is direct-labelled with its name and its count. That condition stops being true if that donut is ever reduced to two series or shipped with bare swatches. 3. AMBER IS 2.25:1 ON THE WHITE CARD, below 1.4.11's 3:1. The relief the standard allows is that colour is never the only carrier: EVERY donut legend prints the series name AND its value. THE LEGEND IS LOAD-BEARING - a donut that ships without labelled values fails 1.4.11, including the masked state, where the name still prints. 4. ONE DECLARED BAND DEVIATION, dark only: amber sits at lightness 0.751 against the 0.67 ceiling. A vivid amber cannot be dark, and pulling it into band costs the vibrancy and weakens it against the green. Taken deliberately, for one slot. There is no lightness-band guard in this suite, so this comment is the only thing holding it. Six-check validator against #1E2230 and #FFFFFF: green+red pass all six (deutan 8.2, normal 33.0, both >= 3:1); blue+amber protan 31.1, normal 34.5, blue >= 3:1 on both grounds. ASSIGNMENT, which is also ring order clockwise from 12 o'clock: outstanding workload 1 service case blue, 2 task green, 3 refund follow-up amber, 4 ticket to issue red sales and profit 1 gross profit blue, 2 supplier cost amber Lateness, when it lands, is a WORD and a WEIGHT in the legend row, never a colour change - red is a category here and --connect-danger stays reserved for a genuine alert. Two reds can therefore appear on one dashboard. That is deliberate: collapsing them is how the danger step got spent on a category in the first place. */ /* K3, 1 September. PRESENCE, ONE SET OF VALUES IN BOTH THEMES. A status ring reports the same fact whichever theme is on, and a person who learns "green means available" in dark must not have to relearn it in light. Same decision as the chart palette, recorded the same way in ConnectDesignTokenTest's invariant list rather than left to look like an omission. OFFLINE IS NOT HERE: it takes the existing neutral border token per theme, because absence of presence is not a presence colour. */ --connect-status-online: #5fd08a; --connect-status-away: #ffd028; --connect-status-busy: #f08a82; /* ROUND 7 Q1: THE CATEGORICAL PALETTE MEETS THE 3.0 GRAPHICAL FLOOR. Six values were below it, not the two the brief named - measured against every ground a chart actually draws on (surface, surface-muted, overlay), in both themes: light green 2.73 on surface-muted amber 2.25 / 2.02 / 2.25 - all three dark red 2.86 on overlay magenta 2.91 / 2.52 indigo 2.84 / 2.45 All corrected HUE-PRESERVING, lightness only, so the palette keeps its identity: light darkens toward its grounds, dark lightens toward its own. That is why the two themes no longer share one hex - they never should have, since a value that clears white cannot also clear #303545. SEPARATION RE-CHECKED after the move. Note that blue and indigo are NEVER DRAWN TOGETHER - indigo IS chart-blue under the Blue accent - so the check is within each variant set of five, not across six. Worst pair before and after is blue/magenta: 55.2 -> 55.2 light default, 42.7 -> 42.7 light Blue, 55.2 -> 52.1 dark default, 48.1 -> 42.6 dark Blue. Every variant stays far above the point where two categories could be confused. */ --connect-chart-green: #039E69; /* was #03A970, 2.73 on surface-muted */ --connect-chart-red: #E5372C; /* 4.27 / 3.84 - already clear */ --connect-chart-blue: #3D86EF; /* 3.59 / 3.22 - already clear */ --connect-chart-amber: #ffd028; /* was #B18216 (3.46 on white). One yellow across both themes - see --connect-warning above for the decision and the figures. */ /* §1 (round 7): the call-note segment. Magenta at hue 321 is the widest gap left - 83 degrees from indigo/mono and 43 from red - so it cannot be taken for any of the four accents or for another slot. #B5479B clears the 3.0 graphical floor on ALL FOUR grounds (4.84 card, 4.56 canvas, 3.27 dark surface, 3.70 dark canvas), which several older entries in this palette do not - that shortfall is reported rather than copied. */ --connect-chart-magenta: #B5479B; --connect-rail-fade-1: color-mix(in srgb, var(--connect-nav-surface-raised) 22%, var(--connect-nav-surface)); --connect-rail-fade-2: color-mix(in srgb, var(--connect-nav-surface-raised) 55%, var(--connect-nav-surface)); --connect-rail-fade-3: color-mix(in srgb, var(--connect-nav-surface-raised) 88%, var(--connect-nav-surface)); /* --------------------------------------------------------------- * 8. STATUS PILL GEOMETRY * * A pill in a GROUP takes the shared width so a set reads as a column; * 84px is the smallest that fits the whole status vocabulary. A pill on * its OWN is being read rather than compared, so it sizes to its text. * The cap is a backstop: a status that needs truncating has already * failed, which is why labels are held to 11 characters. * ------------------------------------------------------------- */ --connect-pill-min-width: 92px; /* Uppercase, letter-spaced labels are wider than sentence case. At 140px three real voicemail labels were clipped - "Transcription failed" needed 149px against a 138px content box. The clamp keeps a status column tidy, so it is widened rather than the label being shrunk to fit a number chosen before the labels were uppercase. */ --connect-pill-max-width: 172px; /* The lane a status column reserves. * * The widest pill the vocabulary can produce, plus clearance. Sized against * the MAXIMUM and not the average, because a column sized for NEW leaves * HEARD touching the column beside it - which is what it did. * * The pill itself stays content-sized: uniform construction, variable width, * fixed lane. Padding every short status out to the longest label would make * a column of NEW read as a column of buttons. */ --connect-status-lane: 196px; /* The audio-and-transcript lane. * * Same principle as the status lane, different content: this column holds an * audio control AND a transcript preview, and between 1032px and 1232px it * collapsed to 84px - narrow enough that its own header printed as * "Audio / Transcr" with the rest cut off mid-word, and the preview showed * about six characters. * * 260px is the audio control plus enough of a sentence to be worth reading. * Below the width where that fits, the table scrolls inside its card, which * is the ratified behaviour rather than a column quietly crushing itself. */ --connect-audio-transcript-lane: 260px; /* QUEUE 22.4. THE SIDE PANEL'S LANE. * * The send-intake panel is a docked sheet, not a dialog, and its width is the * one number it cannot take from the spacing scale: it is a measure, chosen * so a form label, a 92px number box and the email preview beside them all * read without wrapping, and so the record behind it stays visible on a * laptop. Named rather than written into the rule, because the next docked * panel must be the same width as this one and a literal in one stylesheet * is not something the second one can find. */ --connect-intake-panel-width: 460px; /* ── Shading means navigation ────────────────────────────────────────── * Ratified 24 Aug 2026 from the grouped-button decision pack, option C. * * A shaded ground marks a set of DESTINATIONS - the customer sub-tabs, and * anything else that is a set of places you can go. Everything that ACTS * (Save, Add payment, a header cluster) is quiet and sits on the card. * * The shading therefore carries information rather than decoration, and the * question for a new cluster has an answer - is this destinations or verbs - * instead of a look to match by eye. Matching by eye is how four different * section-box borders happened on four tabs of one record. * * WHAT THIS REPLACED: three hardcoded literals (#ddd7cc twice, #ddd8ce once) * in page-level