/* aq-tokens.css — the platform's shared design tokens, in one place. * * WHAT THIS IS * Before this file existed, names like --Primary-500 were referenced 724 times and * defined nowhere. Every reference worked only because it carried an inline fallback: * var(--Primary-500, #6A5D8B). The tokens were names, not values. Nothing was * single-sourced, and defining any of those names anywhere would have silently * repainted hundreds of elements with no review. * * This file writes down what the product ALREADY renders. Nothing in it is a new * colour: every value is one the product already uses at that name, at hundreds of * call sites. * * The first 22 names were a strict visual no-op — every single reference already * carried exactly that value. Five more names (--Primary-50, --Colors-Gray-Default, * --Colors-Gray-Darkest, --Colors-Gray-Lightest, --Colors-Gray-Darker) were added * afterwards and are NOT no-ops: a handful of call sites carried a different * fallback and now snap to the value here. Then four more (--Others-White, * --Black-10, --Primary-300, --Primary-400) — of which the first two are no-ops * and the last two move five sites. Then --Primary-600, which the owner ruled on * directly and which moves ten more. All twenty-five moved sites are enumerated * at the bottom of this file under REPAINTED. Nothing else in the tree moved. * * Three names are still deliberately undefined. All three are waiting on * analysis, not on a ruling. See DELIBERATELY NOT DEFINED at the bottom. * * RULE FOR EDITING * Do not add a token whose value is not already what that name resolves to at the * overwhelming majority of its call sites, and do not add one until you have read * every disagreeing site and satisfied yourself it is a straggler rather than a * deliberate shade. Do not add a name that is only used in one component — that * belongs next to the component. Changing a value here changes hundreds of screens * at once. * * LOAD ORDER * Linked first in every active layout, before any sheet that consumes it. Because * these names are defined nowhere else, cascade order is not load-bearing for * correctness — but being first means any sheet that later wants to override a * token at :root can simply do so. * * NOT COVERED HERE * - Component-private families (--fin-*, --pma-*, --svc-*, --sbb-*, --ci-pay-*, ...) * stay with their components. * - Vendor families (--bs-*, --tw-*) are Bootstrap's and Tailwind's to define. * - Shared/output.css is generated Tailwind and is two months stale; it does not * consume these tokens and must not be regenerated to make it do so. */ :root { /* --------------------------------------------------------------------- * Brand * Flattened across the tree in e7b5e921. #6B5B95 is retired — do not * reintroduce it in any form. * ------------------------------------------------------------------ */ --Primary-500: #6A5D8B; /* 724 uses, all agreeing */ --Primary-Full: #583286; /* 14 uses, all agreeing */ --Primary-50: #F3F2F6; /* 174 uses; 171 already say this. NOT a no-op — see the REPAINTED list at the bottom. Chosen because it is both the overwhelming majority AND the value of 50 in the written-out --colors-primary-* ramp, so majority and ramp agree. */ /* 300 and 400 take the value from the written-out --colors-primary-* ramp * (see the bottom of this file), NOT from the most common inline fallback. * Both are low-count and both candidate values are near-identical purples, so * a ramp someone wrote out on purpose beats values typed one reference at a * time. NOT no-ops — five sites move; they are in the REPAINTED list. * --Primary-600 went the other way — see its own note below. */ --Primary-300: #A69EB9; /* 5 uses; 2 already say this, 3 said #9B8DB8 */ --Primary-400: #887DA2; /* 4 uses; 2 already say this, 2 said #A898C4 */ /* 600 is the one step where the owner ruled AGAINST the written-out ramp and * for the majority of call sites. The ramp's #372A58 is a deep aubergine and * the majority's #5A4D7B is a visibly lighter purple, so unlike 300/400 this * was not a choice between near-identical shades and could not be settled by * "a ramp beats values typed one at a time". Ruled #5A4D7B. NOT a no-op — ten * sites move; they are in the REPAINTED list at the bottom. */ --Primary-600: #5A4D7B; /* 31 uses; 21 already say this, 9 said #372A58, 1 said #5A4E78 */ --Secondary-Full: #C37E93; /* 5 uses */ --secondary-full: #C37E93; /* 5 uses — custom properties are case-sensitive, so this lowercase spelling is a DIFFERENT property than the one above and needs its own definition. */ --secondary-10: #F9F2F4; /* 1 use */ /* --------------------------------------------------------------------- * Greys * ------------------------------------------------------------------ */ --Colors-Gray-White: #FFFFFF; /* 510 uses; spelled `white`, `#fff`, `#FFF`, `#ffffff` and `#FFFFFF` at the call sites — all the same colour. */ --Colors-Gray-Light: #CCCCCC; /* 26 uses */ --Colors-Gray-300: #CCCCCC; /* 3 uses */ --Colors-Gray-600: #666666; /* 3 uses */ --Colors-White: #FFFFFF; /* 1 use */ /* The four below are NOT no-ops. Each had a handful of call sites carrying a * different fallback; those sites now snap to the value here. Every one of * them is enumerated in the REPAINTED list at the bottom of this file. They * were adopted because their strays are stragglers — a foreign-palette import, * a near-identical shade, a within-file inconsistency — not design intent. * Two siblings (--Colors-Gray-Dark, --Colors-Gray-Lighter) are still undefined * because THEIR strays are design intent. See the bottom of the file. * The other two, --Others-White and --Black-10, are now defined: their single * shared stray was design intent too, so it was written out literally at the * call site instead of being allowed to block two tokens. */ --Colors-Gray-Default: #999999; /* 620 uses; 616 already say this */ --Colors-Gray-Darkest: #111111; /* 467 uses; 466 already say this */ --Colors-Gray-Lightest: #F4F4F4; /* 72 uses; 71 already say this */ --Colors-Gray-Darker: #333333; /* 18 uses; 17 already say this */ /* --------------------------------------------------------------------- * Black scale * ------------------------------------------------------------------ */ --Neutral-Black: #0C0D0D; /* 22 uses */ --Black-Full: #000000; /* 4 uses */ --black-full: #000000; /* 1 use — lowercase spelling, separate property */ --black-10: #E6E6E6; /* 4 uses — lowercase spelling, separate property */ --Black-10: #E6E6E6; /* 11 references, 10 of which already say this (one of those 10 sits inside a commented-out rule, so 9 are live). The one disagreeing site was the account-calculator input in styles-RTL.css; it is deliberately borderless and now says #F8F8F8 literally, with the reason written next to it. */ --Black-60: #666666; /* 3 uses */ --Black-40: #999999; /* 1 use */ /* --------------------------------------------------------------------- * Status * ------------------------------------------------------------------ */ --Additional-Success: #49A078; /* 31 uses */ --Additional-Failure: #DB3A34; /* 14 uses */ /* --------------------------------------------------------------------- * Others * ------------------------------------------------------------------ */ --others-white: #FFFFFF; /* 9 uses — lowercase spelling, separate property */ --Others-White: #FFFFFF; /* 16 uses, 15 of which already say this (spelled `#FFF` and `#fff`). The one disagreeing site was the same borderless account-calculator input as --Black-10 above, and is now literal. */ --Others-Green: #78BC61; /* 2 uses */ --Others-Light: #F8F8F8; /* 1 use */ --others-light: #F8F8F8; /* 1 use — lowercase spelling, separate property */ /* --------------------------------------------------------------------- * Radius scale — ADOPTED ACROSS SERVICES, PROJECTS, PARTNER AND ADMIN * * Chosen by the owner from a census of the tree: 12px and 16px are at once * the most-used raw CSS radius values, the most-used markup utilities * (rounded-xl / rounded-2xl), and the base pair of four of the eleven * existing private radius token families. * * 818 declarations across 89 stylesheets now point here. Roughly the same * number were deliberately left on literals — see the migration's report — * so a literal radius in those areas is not automatically a miss. * * Seven private families (--sbb-*, --sbl-*, --ga-*, --sad-*, --pma-*, * --prm-*) were repointed at these three rather than deleted, so the files * that consume them keep working and there is one source to read. * ------------------------------------------------------------------ */ --radius-control: 12px; /* buttons, inputs, selects, chips */ --radius-surface: 16px; /* cards, panels, modals, sheets */ --radius-pill: 999px; /* pills, avatars, fully-round controls */ } /* ======================================================================= * REPAINTED — the exact twenty-five call sites the non-no-op tokens moved * * Adopting --Primary-50, --Colors-Gray-Default, --Colors-Gray-Darkest, * --Colors-Gray-Lightest and --Colors-Gray-Darker changed the first ten sites * below; adopting --Primary-300 and --Primary-400 changed the next five; adopting * --Primary-600 changed the last ten. Nothing else in the tree moved. Verified by * computed style in an isolated iframe. * * --Others-White and --Black-10 were adopted in the same pass and moved NOTHING: * their one disagreeing site was made literal first (see below). * * --Primary-50 #F3F2F6 * Client/client-add-units.css:798 #EDE9F6 .amenity-chip--selected bg * Partner/partner-add-units.css:795 #EDE9F6 (the same file, duplicated) * Shared/messaging.css:358 #EDE9F5 outgoing chat bubble bg * --Colors-Gray-Default #999999 * Client/client-add-units.css:1293 #8B8B8B .addunits-geo-hint text * Client/client-add-units.css:2249 #AAAAAA .property-photos-card__hint * Partner/partner-add-units.css:1290 #8B8B8B (duplicated) * Partner/partner-add-units.css:2236 #AAAAAA (duplicated) * --Colors-Gray-Darkest #111111 * Employees/employees.css:711 #333333 permissions-table thead th * --Colors-Gray-Lightest #F4F4F4 * Employees/employees.css:1189 #FAFAFA permission-btn :hover bg * --Colors-Gray-Darker #333333 * Employees/employees.css:2049 #1F2937 .aq-perm-row__label * --Primary-300 #A69EB9 * Home/_SliderSection.css:286 #9B8DB8 .Banners .carousel-indicator:hover * Home/_ExploreNewSection.css:753 #9B8DB8 .Projects .carousel-indicator:hover * Home/_ExploreNewProjectsBottom.css:441 #9B8DB8 .Projects .carousel-indicator:hover * --Primary-400 #887DA2 * Client/client-add-units.css:797 #A898C4 .amenity-chip--selected border * Partner/partner-add-units.css:794 #A898C4 (the same file, duplicated) * --Primary-600 #5A4D7B * Admin/adminHome.css:67 #372A58 .ah2-hero::before strip, gradient end * Partner/partnerHome.css:82 #372A58 .ph2-hero::before strip, gradient end * Partner/partnerHome.css:1254 #372A58 .ph-password-requirements__title colour * Client/client-add-units.css:1764 #372a58 --pp-brand-deep → __add-btn gradient end * Partner/partner-add-units.css:1751 #372a58 (the same file, duplicated) * finance/finance-admin.css:12544 #372A58 create-modal --fin-brand-strong * finance/finance-admin.css:12545 #372A58 create-modal --fin-text * finance/finance-admin.css:12789 #372A58 status-modal --fin-brand-strong * finance/finance-admin.css:12790 #372A58 status-modal --fin-text * Employees/employees.css:1814 #5A4E78 .aq-phone-search-btn:hover bg * * Four screens, then: Add/Edit Units (client and partner, same sheet twice), the * Employees permissions screen, one chat bubble, and the home page carousels. * Every stray was read before it was flattened. #1F2937 is Tailwind's gray-800 — * a foreign palette, not a choice. #AAAAAA sits in a component that says #999999 * twice on adjacent rules. #FAFAFA is in a file that says #F4F4F4 for the same * token seven lines earlier. The three #9B8DB8 are one carousel-dot hover rule * copy-pasted into three home sections — one rule, not three decisions, and the * dot is 10px. The two #A898C4 are one amenity-chip border, and roughly 960 lines * further down its own file the SAME token is written with #887da2 as the * fallback, under a comment reading "same tokens as rest of Partner UI" — so the * file already answers the question against itself. The chip's :hover steps that * same border to --Primary-500, so the ramp value makes rest→hover a proper * one-step move down the scale instead of a jump. None of them survives contact * with its own neighbours. * * The ten --Primary-600 sites are different in kind: their strays were NOT * stragglers, they were the written-out ramp's own value, and the owner ruled * against the ramp in favour of the 21-site majority. Nine of the ten lighten * visibly from a deep aubergine to a mid purple; the tenth (#5A4E78) is a * one-hex-step nudge nobody can see. Measured effect, white text on the token: * 12.85:1 → 7.55:1 — still AAA. The one text-on-tint site, the partner password * hint title on --Primary-50, goes 11.53:1 → 6.77:1: AAA → AA, still well clear * of the 4.5:1 floor. No site drops below AA. Two purely decorative 4px hero * strips (Admin, Partner) and two gradient buttons lighten at their deep end * only; the buttons' worst-case contrast is set by their LIGHT end * (--Primary-400 #887DA2, 3.82:1 against white) and is unchanged by this ruling. * * NOT repainted, made explicit instead — styles-RTL.css:6177 * The account-calculator input #portfolio #container-fluid .form-control was * the only site disagreeing with BOTH --Others-White and --Black-10, and its * disagreement was intent: fill and border were both #F8F8F8, a deliberately * borderless flat field. Rather than let one intentional element block two * otherwise-unanimous tokens, its two declarations now carry #F8F8F8 literally * with the reason written above them. Exactly equivalent to what it rendered * before — the tokens were undefined, so the fallbacks were already what the * browser used. Confirmed identical by computed style. * * ======================================================================= * DELIBERATELY NOT DEFINED — call sites disagree, owner must rule * * Each of the three names below is referenced with two or more fallbacks that are * genuinely different colours (not merely different spellings of the same one). * Defining any of them at the majority value would repaint the minority call * sites, and for each of these the minority is a deliberate shade, not a * straggler. Counts are of call sites, dominant value first. * * The escape hatch used for --Others-White / --Black-10 — write the intentional * element's values out literally, then define the token — is available here too, * but it does not scale to these three: their strays are not one element but * dozens, spread across whole components. * * NOTE: the --Primary-600 ruling does NOT unblock any of these three. It settled * a ramp-vs-majority tie at one step; all three below are blocked on a different * question — call sites that use one name for two or three DIFFERENT jobs. No * choice of value fixes that; the components have to be split first. * * --Colors-Gray-Dark 503 #666666 x495 | #888888 x5 | #6B6B6B x2 | #555555 x1 * Shared/messaging.css uses this ONE name at THREE values to build a type * hierarchy: #555 sender name, #666 legacy bubble body, #888 timestamps and * muted state text. Defining it collapses all three onto #666666, so a * timestamp becomes exactly as heavy as the sender name above it. The two * #6B6B6B sites (Admin/adminHome.css:481, Partner/partnerHome.css:714) are * indistinguishable from #666666 and are not the obstacle; messaging is. * * --Colors-Gray-Lighter 346 #E6E6E6 x338 | #F8F9FB x3 | #D8D8D8 x2 | #DCD8E4 x2 | #F8F7FA x1 * Shared/messaging.css line 1 is a written-down palette declaration: * "page bg ~#F8F9FB". Four of its rules paint near-white component surfaces * through this name. #E6E6E6 is a mid grey; the messaging pane, conversation * pane and attachment preview would all visibly darken. The add-units * dropzone border #DCD8E4 is likewise a purple-tinted dashed border sitting * on a purple-tinted #FAF9FC fill. * * --Primary-100 23 #E1DFE8 x9 | #E6E3ED x8 | #D4CCE8 x3 | #E2DAF0 x2 | #E6E1EC x1 * #E1DFE8 is a PLURALITY, not a majority — 9 of 23, under 40%. Defining it * moves 14 of the token's 23 sites. Worse, the losing values are not scatter: * all 8 #E6E3ED are one filter-popup cancel-button hover rule copy-pasted * across Buy, Rent, Share and Share/Map, and all 3 #D4CCE8 are the * .featured-investment-badge on the map card — a deliberately more saturated * lavender for a badge meant to stand out. #E2DAF0 is the one-step-darker * hover of the #EDE9F6 selected amenity chip. Every "stray" here is a * considered shade. Note the ramp agrees with #E1DFE8 — but the 600 ruling * went AGAINST the ramp, so ramp agreement is no longer even a thumb on the * scale here, and it never made 14 repainted sites reviewable in passing. * * (--Primary-600 was the fourth name here. RULED #5A4D7B — the majority, against * the ramp. It is now defined at the top of this file and its ten moved sites are * in the REPAINTED list above.) * * THE WRITTEN-OUT RAMP, for reference. The codebase contains one fully * written-out primary ramp — the --colors-primary-* family, defined identically * at :root in three Admin sheets (Admin/wallets.css, Admin/ShareUnitDetails.css, * Admin/ShareUnitsIndex.css), as rgba() triples: * * 50 #F3F2F6 100 #E1DFE8 200 #C3BED1 300 #A69EB9 * 400 #887DA2 500 #6A5D8B 600 #372A58 * * 300 and 400 above were resolved in favour of that ramp rather than the most * common inline fallback: at those two steps the candidates are near-identical * and the counts are tiny (5 and 4 sites), so a ramp written out on purpose beats * values typed one reference at a time. 600 is the step where that reasoning ran * out, because there the two candidates are not near-identical — and the owner * ruled for the majority's #5A4D7B over the ramp's #372A58. So this ramp is the * reference for 50–400 and is NOT authoritative at 600: three Admin sheets still * define --colors-primary-600 as #372A58 for their own use, and that is now a * different colour from --Primary-600. Do not "reconcile" them without a ruling. * ==================================================================== */