/* ============================================================================= * Atlas Cloud Tools — design tokens * * CANONICAL COPY. This file is the single source of every colour, radius and * shell metric on the platform. Each tool carries a byte-identical copy at * wwwroot/atlas-tokens.css; scripts\Sync-AtlasTokens.ps1 copies it out and * -Check fails the build if any copy has drifted. Edit here, never in a copy. * * Values are BIReports' — it is the gold standard and is not modified to match * anything. See UnifiedLogin/docs/atlas-tools-style-guide.md (ACT-70). * * Tokens are SEMANTIC, not a palette dump. A tool that needs a grey picks the * one that says what the grey is for; it does not add --grey-7. * ========================================================================== */ :root { /* --- Action ---------------------------------------------------------- * WET ASPHALT, AGAINST THE CHARCOAL CHROME. * * Flat UI (materialui.co/flatuicolors) is now the whole platform palette: * Wet Asphalt #34495E acts, Midnight Blue #2C3E50 is its pressed state, * Concrete #95A5A6 is disabled, Pomegranate #C0392B is danger, and Silver * and Clouds are the only two greys on the page. * * A BUTTON'S FILL AND ITS INK ARE TWO TOKENS, not one. The fill is Clouds, * which is light, so the label is Midnight Blue on it — 11.6:1 — and the * SAME ink carries every text use on a white surface: an outlined * secondary's label, a .btn-link, a hovered icon. One token could not do * both jobs, because a light fill and readable text are opposite demands. * * The border is its own token again: a Clouds button sits on Clouds section * bands and table heads and needs an edge, but the ink is too hard for one. * * Hover flips the label to white. It was the dashboard blue #0E5C8A (the * midpoint of the report palette's two blues); since 2026-10-20 every dark * hover is #3C5273. The tick (--color-check) and the focus ring keep the * dashboard blue — neither is a hover. */ --color-action: #ECF0F1; /* Clouds — the fill of a button */ --color-action-hover: #3C5273; /* slate blue (2026-10-20, ACT-112; was the dashboard blue #0E5C8A) */ --color-action-fg: #2C3E50; /* Midnight Blue: 11.6:1 on Clouds */ --color-action-hover-fg: #FFFFFF; /* white on the hover fill — 7.9:1 */ --color-action-ink: #2C3E50; /* Midnight Blue — the accent as TEXT */ /* The EDGE is Silver. Midnight Blue around a Clouds fill is a hard outline — a box drawn around the label rather than the button's own shape — and Concrete is still heavy enough to read as one. A Clouds button on a Clouds band is separated by its SHADOW, not by a ring, so the line can be light. */ --color-action-edge: #BDC3C7; /* Silver */ /* THE LIGHT INK. Every label that sits on a dark or saturated fill — a hovered button on Peter River, a .btn-danger on Pomegranate, the app bar, a disabled control on Concrete — is Clouds. White is not in this palette and does not belong on a page painted from it. */ --color-on-dark: #ECF0F1; /* Clouds */ /* Disabled is a COLOUR, not an opacity. Fading the accent produced a washed-out copy of the button beside it, which reads as a rendering fault rather than as "not available yet". Concrete, one step down from the Clouds a live button is filled with, with muted ink on it. */ --color-disabled: #BDC3C7; /* Silver */ --color-disabled-fg: #7F8C8D; /* Asbestos — washed out on purpose */ /* --- Link ------------------------------------------------------------- * Same family as the action, so a link and a button are recognisably the * same intent at different weights. */ --color-link: var(--color-action-ink); --color-link-hover: var(--color-action-hover); /* Ticks and radios. The browser's default checked blue is brighter than anything else on the page and is not ours. Applied through accent-color, so the control keeps its native shape and platform behaviour. This is also what the Power BI slicer checkbox is set to, so a tick is the same blue whether the user is on a page or in a report. */ --color-check: #0E5C8A; /* the button hover — a tick is the same blue */ /* Tints, hovers, badges, selected rows. Never behind text. */ --color-accent-soft: #5D6D7E; --color-accent-wash: #DCE3EA; /* Focus is derived from the action colour so a focused control relates to the thing it becomes when pressed. ONE RING, AND IT IS SOLID. This was rgba(52,73,94,0.3) painted as `box-shadow: 0 0 0 3px`, which is a translucent 3px band bleeding outside the control — a halo, not a ring, and the Fluent fields drew it OUTSIDE a solid 2px outline as well, so a focused field carried two indicators. A solid `outline` is the whole statement now: it follows border-radius, it never participates in layout, and one declaration cannot be half- overridden the way a shadow stack can. The dashboard blue is 7.2:1 on white and 6.3:1 on the Clouds band — AA for a non-text indicator either way, which the 30% wash was not, and well clear of the 3.9:1 and 3.1:1 the slate it replaced was holding. */ --color-focus-ring: #0E5C8A; /* dashboard blue — the action hover */ --focus-ring-w: 2px; --focus-ring-offset: 1px; /* THE FILL OF THE FIELD YOU ARE IN. The border is not part of this and never changes — not at rest, not on hover, not when active. Repainting it thicker or in another colour puts a gradient down one edge at 125%/150% display scaling and stops the straight runs meeting the corner radius; a fill has no edges of its own, so it is the same at every scaling. */ --color-field-active-bg: #E4E9F0; /* THE FILL OF THE FIELD UNDER THE POINTER — a step lighter than the field you are in, so hover and active never read as the same state. The same tint the platform dropdown button already takes on hover. */ --color-field-hover-bg: var(--color-surface-3); /* --- Shell ---------------------------------------------------------- * The dark app bar. Identical in every tool. */ --color-shell-bg: #1f2937; --color-shell-fg: var(--color-on-dark); --color-shell-fg-muted: rgba(255, 255, 255, 0.8); --color-shell-fg-dim: rgba(255, 255, 255, 0.7); /* TWO ROLES, TWO NAMES. These were one token doing both jobs, which is how the bar ended up with two shades of control: a FILLED control took the white wash and composited to #363F4B, while every button beside it took --color-action-ink and came out #2C3E50. --color-shell-field-* is the hover TINT on the bar's flat affordances — the menu toggle, the tabs, the user-menu rows, Return to Tools. Those have no fill at rest, so the tint has to be lighter than the bar or nothing happens; Midnight on Wet Asphalt is no change at all. --color-shell-control-* is the FILL of a control that is filled at rest — the tenant picker, and any native select or input in the bar. Midnight, lifting to the slate on hover, which is what the section comment in atlas-fluent.css §4 has always said a bar control does. */ --color-shell-field-bg: rgba(255, 255, 255, 0.1); --color-shell-field-bg-hover: rgba(255, 255, 255, 0.2); --color-shell-control-bg: var(--color-action-ink); --color-shell-control-bg-hover: var(--color-action-hover); /* TRANSPARENT. A CONTROL IN THE BAR HAS NO OUTLINE. This was rgba(255,255,255,0.35), and the comment that used to sit here argued the case well: at 0.30 the edge measured 2.65:1 over #1f2937, under the 3:1 a non-text indicator needs, so it went to 0.35 for contrast. The argument was sound and the premise was wrong — atlas-ui-standard.md §6 has said "No outlines" the whole time, and a 35%-white ring around Refresh Report, the tenant picker and My Views is the thing that keeps being reported. It is fixed on the TOKEN, not on the five rules that read it (atlas-appbar, atlas-fluent ×3, atlas-theme, atlas-components), because fixing one rule is how four of them stayed. The fill — white at 10%, and 20% on hover — is the whole affordance. Audit-Header.js now fails on any bar rule that names a visible edge. */ --color-shell-field-border: transparent; --color-shell-option-bg: #2c3e50; /* native