/* ============================================================================= * Atlas Cloud Tools — Fluent components, painted and sized from atlas-tokens.css * * CANONICAL COPY. Each tool carries a byte-identical copy; scripts\Sync-AtlasTokens.ps1 * copies it out and -Check fails the build if a copy has drifted. Edit here only. * * WHY THIS FILE EXISTS * Fluent's components (FAST, both in the React apps via @fluentui/web-components * and in the Blazor apps via Microsoft.FluentUI.AspNetCore.Components — they are * the same custom elements) render into a SHADOW ROOT. An app stylesheet that * says `button { padding: 0 12px }` does not reach the button inside * , which is why layouts collapsed when the markup was converted: * the element kept its class, the class kept its rules, and the rules stopped * applying to anything that draws. * * Two mechanisms reach in, and both are used here on purpose. * * 1. DESIGN TOKENS. Every Fluent colour and metric is a FAST CSSDesignToken, * which is emitted and read as an ordinary CSS custom property — the JS * token API writes exactly the same property. Custom properties inherit * through a shadow boundary, so setting them on :root themes every * component at once, with no script and no interactive render mode. That * last point matters: a statically rendered Blazor layout cannot run * FluentDesignTheme's JS, and this file works there anyway. * * Only LEAF tokens are set. Setting --accent-base-color in CSS does * nothing, because the palette it feeds is computed in JS; the leaves it * would have produced are stated directly instead. * * 2. ::part(). The box model, and any paint the platform defines differently * from Fluent's own recipes. A platform button is Clouds with Midnight Blue * ink and lifts to Wet Asphalt with white ink — that is not Fluent's * neutral or accent button and no token combination produces it. * * THE SIZING CONTRACT * Every host element is laid out by the app's own CSS, exactly as the native * element it replaced was. The part inside FILLS the host. So a rule the app * already had — `.nav-report-sub { width: 22px }`, `.btn-block { width: 100% }` — * keeps working, and app stylesheets do not have to learn about parts. * ========================================================================== */ /* ============================================================================= * 1. Design tokens — the leaves, from atlas-tokens.css * ========================================================================== */ :root { /* --- Shape --------------------------------------------------------------- * Fluent derives control height as * (--base-height-multiplier + --density) * --design-unit px * 7.5 * 4 = 30px = --control-h, the one control height on the platform. * --design-unit 4 also matches the 4px spacing scale. */ --design-unit: 4; --base-height-multiplier: 7.5; --base-horizontal-spacing-multiplier: 3; --density: 0; --control-corner-radius: 6; /* --radius, unitless: Fluent multiplies by 1px */ --layer-corner-radius: 6; --stroke-width: 1; --focus-stroke-width: 2; /* Disabled is a COLOUR on this platform, not a fade — a faded control reads as a rendering fault rather than as "not available yet". The opacity is neutralised and the disabled paint is applied in §3. */ --disabled-opacity: 1; /* --- Type ---------------------------------------------------------------- */ --body-font: var(--font-stack); --type-ramp-base-font-size: 14px; /* --font-size-body */ --type-ramp-base-line-height: 20px; --type-ramp-minus-1-font-size: 13px; /* --font-size-table */ --type-ramp-minus-1-line-height: 18px; --type-ramp-minus-2-font-size: 11px; /* --font-size-micro */ --type-ramp-minus-2-line-height: 16px; /* --- The accent ---------------------------------------------------------- * Fluent's accent is the saturated, ink-on-dark end of the scale; on this * platform that is the button's HOVER fill, not its rest fill. */ --accent-fill-rest: var(--color-action-hover); --accent-fill-hover: var(--color-action-ink); --accent-fill-active: var(--color-action-ink); --accent-fill-focus: var(--color-action-hover); --accent-foreground-rest: var(--color-action-ink); --accent-foreground-hover: var(--color-action-hover); --accent-foreground-active: var(--color-action-ink); --accent-foreground-focus: var(--color-action-ink); --accent-stroke-control-rest: var(--color-action-edge); --accent-stroke-control-hover: var(--color-action-edge); --accent-stroke-control-active: var(--color-action-edge); --accent-stroke-control-focus: var(--color-action-hover); /* The ink that sits ON the accent. Clouds, never white — white is not in this palette. */ --foreground-on-accent-rest: var(--color-action-hover-fg); --foreground-on-accent-hover: var(--color-action-hover-fg); --foreground-on-accent-active: var(--color-action-hover-fg); --foreground-on-accent-focus: var(--color-action-hover-fg); --foreground-on-accent-rest-large: var(--color-action-hover-fg); --foreground-on-accent-hover-large: var(--color-action-hover-fg); --foreground-on-accent-active-large: var(--color-action-hover-fg); --foreground-on-accent-focus-large: var(--color-action-hover-fg); /* --- Text ---------------------------------------------------------------- */ --neutral-foreground-rest: var(--color-text); --neutral-foreground-hover: var(--color-text-strong); --neutral-foreground-active: var(--color-text-strong); --neutral-foreground-focus: var(--color-text); --neutral-foreground-hint: var(--color-text-muted); --input-placeholder-rest: var(--color-text-subtle); --input-placeholder-hover: var(--color-text-muted); --input-filled-placeholder-rest: var(--color-text-subtle); --input-filled-placeholder-hover: var(--color-text-muted); /* --- Fills --------------------------------------------------------------- * An INPUT is white (--color-surface). A neutral BUTTON is Clouds * (--color-action). Fluent keeps those on two separate token families, * which is exactly the split the platform wants. */ --fill-color: var(--color-surface); --neutral-fill-input-rest: var(--color-surface); --neutral-fill-input-hover: var(--color-surface); --neutral-fill-input-active: var(--color-surface); --neutral-fill-input-focus: var(--color-surface); --neutral-fill-input-alt-rest: var(--color-surface); --neutral-fill-input-alt-hover: var(--color-surface); --neutral-fill-input-alt-active: var(--color-surface); --neutral-fill-input-alt-focus: var(--color-surface); --neutral-fill-rest: var(--color-action); --neutral-fill-hover: var(--color-action-hover); --neutral-fill-active: var(--color-action-ink); --neutral-fill-focus: var(--color-action); --neutral-fill-secondary-rest: var(--color-surface-2); --neutral-fill-secondary-hover: var(--color-row-hover); --neutral-fill-secondary-active: var(--color-accent-wash); --neutral-fill-secondary-focus: var(--color-surface-2); /* Stealth is the transparent button — a toolbar icon, a menu row. */ --neutral-fill-stealth-rest: transparent; --neutral-fill-stealth-hover: var(--color-surface-2); --neutral-fill-stealth-active: var(--color-accent-wash); --neutral-fill-stealth-focus: transparent; --neutral-fill-stealth-rest-on-neutral-fill-layer-rest: transparent; --neutral-fill-stealth-hover-on-neutral-fill-layer-rest: var(--color-surface-2); --neutral-fill-stealth-active-on-neutral-fill-layer-rest: var(--color-accent-wash); --neutral-fill-strong-rest: var(--color-text-subtle); --neutral-fill-strong-hover: var(--color-text-muted); --neutral-fill-strong-active: var(--color-text-muted); --neutral-fill-strong-focus: var(--color-text-subtle); --neutral-fill-layer-rest: var(--color-surface); --neutral-fill-layer-hover: var(--color-surface-3); --neutral-fill-layer-active: var(--color-surface-2); --neutral-fill-layer-alt-rest: var(--color-surface-3); /* The floating layer: a select's open list, a menu, a tooltip. */ --neutral-layer-floating: var(--color-surface); --neutral-layer-card-container: var(--color-surface); --neutral-layer-1: var(--color-surface); --neutral-layer-2: var(--color-surface-3); --neutral-layer-3: var(--color-surface-2); --neutral-layer-4: var(--color-surface-2); /* --- Strokes -------------------------------------------------------------- */ --neutral-stroke-rest: var(--color-border); --neutral-stroke-hover: var(--color-border-strong); --neutral-stroke-active: var(--color-border-strong); --neutral-stroke-focus: var(--color-action-hover); --neutral-stroke-control-rest: var(--color-action-edge); --neutral-stroke-control-hover: var(--color-action-edge); --neutral-stroke-control-active: var(--color-action-edge); --neutral-stroke-control-focus: var(--color-action-hover); --neutral-stroke-input-rest: var(--color-border-strong); --neutral-stroke-input-hover: var(--color-text-subtle); --neutral-stroke-input-active: var(--color-text-subtle); --neutral-stroke-input-focus: var(--color-action-hover); --neutral-stroke-divider-rest: var(--color-border); --neutral-stroke-layer-rest: var(--color-border); --neutral-stroke-layer-hover: var(--color-border-strong); --neutral-stroke-layer-active: var(--color-border-strong); --neutral-stroke-strong-rest: var(--color-text-muted); --neutral-stroke-strong-hover: var(--color-text); --neutral-stroke-strong-active: var(--color-text); --neutral-stroke-strong-focus: var(--color-action-hover); /* --- Focus --------------------------------------------------------------- * One focus treatment for the whole platform: the action colour outside, * the light ink inside so the ring reads on a dark fill too. */ --focus-stroke-outer: var(--color-action-hover); --focus-stroke-inner: var(--color-action-hover-fg); /* --- Elevation ------------------------------------------------------------ * Fluent's shadows are heavier than the platform's two. */ --elevation-shadow-card-rest: var(--shadow-sm); --elevation-shadow-card-hover: var(--shadow); --elevation-shadow-card-active: var(--shadow-sm); --elevation-shadow-card-focus: var(--shadow); --elevation-shadow-flyout: var(--shadow); --elevation-shadow-dialog: var(--shadow); --elevation-shadow-tooltip: var(--shadow-sm); } /* ============================================================================= * 2. The sizing contract * * The host is laid out by the app's CSS; the part fills the host. Every rule an * app already had against the native element's class keeps working. * ========================================================================== */ fluent-button, fluent-text-field, fluent-text-area, fluent-number-field, fluent-search, fluent-select, fluent-combobox { font-family: var(--font-stack); font-size: var(--font-size-control); vertical-align: middle; } /* ONE CONTROL HEIGHT, SET ON THE HOST. * * The floor used to be min-height on the PART, which no app rule could get under: * a 22px icon button in a table row was forced to 30px and broke the row. Height * belongs on the host instead, where an app that genuinely needs a different box * — a square icon button, a tall search field — overrides it with its own class, * and where the part simply fills whatever it is given. * * A text area is exempt: it is the one control that is not one line tall. */ fluent-button, fluent-text-field, fluent-number-field, fluent-search, fluent-select, fluent-combobox { height: var(--control-h); } /* A FIELD IN A FORM GRID FILLS ITS COLUMN. * * A Fluent field sizes to its own content, so a field in a grid column that is * wider than it leaves the remainder as dead space INSIDE the column — and the * eye reads that remainder as the gap to the next field. ACH's Vendor ACH row * was the case that showed it: a 280px select in a col-md-4, which at the * content cap is a ~530px column, put roughly 250px of nothing between Vendor * and Bank account while every other pair in the row was 8px apart. The gap was * never set anywhere — it was left over. * * The column already IS the width the layout intends, so the field takes it and * the only gap left is the grid's own gutter. This also means a field's width is * a layout decision in the markup, never a pixel value on the component. * * Scoped to a grid column or a .field wrapper: a Fluent control that is * deliberately sized — a search box in the app bar, an icon button — is not in * one and is untouched. */ :is([class*="col-"], .field, .form-group) > :is( fluent-text-field, fluent-number-field, fluent-search, fluent-select, fluent-combobox ) { width: 100%; } /* THE HOST DOES NOT PAINT. * * This is the other half of the contract and it is not optional. A Fluent * element's host box is behind the part that draws, so when app CSS — or an * inline style — puts a background, a border or padding on the host, BOTH show: * the app's dark box, and the platform's control sitting inside it, inset by the * host's padding. That is not a subtle mismatch; it reads as a broken control, * and it is what a converted button looked like anywhere its old paint was left * on the host. * * !important because the rules being neutralised are class selectors and inline * styles, which otherwise win. It is safe to be absolute here: the host CANNOT * paint anything the user should see, so there is no case where honouring it is * correct. Everything the app wants painted is carried to the part instead — * Fix-FluentCss.js does that for stylesheets, and §3 below is the platform's own * default for anything not carried. * * Layout is untouched: width, height, margin, display, flex and position still * belong to the host, which is what keeps every existing layout rule working. */ fluent-button, fluent-text-field, fluent-text-area, fluent-number-field, fluent-search, fluent-select, fluent-combobox, fluent-checkbox, fluent-radio, fluent-switch { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } fluent-button::part(control), fluent-text-field::part(root), fluent-number-field::part(root), fluent-search::part(root), fluent-select::part(control), fluent-combobox::part(control) { box-sizing: border-box; width: 100%; height: 100%; /* No minimum here — the HOST carries the control height, so a control the app deliberately made smaller stays smaller. */ min-height: 0; min-width: 0; border-radius: var(--radius); font-family: inherit; font-size: inherit; } /* A TEXTAREA IS THE ONE CONTROL THAT IS NOT ONE LINE TALL. * * Apps give their fields a shared class — .field__input, .form-control — that * carries the platform's single control height. On a text area that height * applies to the HOST, and the multi-line control inside is then clipped to one * line: the Statements message body showed three lines of template in a 30px * box. The host cannot be one line tall, whatever class it carries, so this is * absolute; `rows` governs the height from there. */ fluent-text-area { display: inline-block; height: auto !important; min-height: calc(var(--control-h) * 2); } /* A text area has NO root part — only label and control. Every box rule aimed at ::part(root) therefore painted nothing, which is why it came out with no border and no fill while every field beside it had both. The box lives on the control. */ fluent-text-area::part(control) { box-sizing: border-box; width: 100%; height: auto; border-radius: var(--radius); } fluent-text-area::part(control) { box-sizing: border-box; width: 100%; height: auto; min-height: calc(var(--control-h) * 2); padding: var(--space-3); font-family: inherit; font-size: inherit; resize: vertical; } /* The label a Fluent field draws for itself. Every app draws its own, so this only fires where a component was given a label attribute. */ fluent-text-field::part(label), fluent-text-area::part(label), fluent-number-field::part(label), fluent-select::part(label), fluent-checkbox::part(label), fluent-search::part(label) { font-size: var(--font-size-micro); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--color-text-muted); padding-bottom: var(--space-2); } /* ============================================================================= * 3. The controls, one by one * ========================================================================== */ /* --- Button ------------------------------------------------------------------ * * ONE BUTTON. Light grey at rest, steel blue on hover. Every button in every * tool: the Save under a settings section, the icon in a table row, the toggle * in a nav strip, the menu button in the dark app bar, the Cancel in a modal. * Same fill, same edge, same ink, same height, same radius, same padding, same * type, same hover. * * There are no variants here on purpose. Fluent ships appearance="accent", * "outline", "stealth" and "lightweight"; the platform had a quiet icon button, * a text button, a compact button and a translucent one for the dark bar. Each * was defensible on its own and the result was a screen with four kinds of * button on it. Emphasis comes from POSITION and WORDING. * * What survives is STATE, not style: * pressed the button is being clicked * latched a toggle that is currently on, a view that is selected * disabled the action is not available — and must never look like it is * * ORDER MATTERS. ::part() rules compete on ordinary specificity, so the states * come after the base and disabled comes last. * ========================================================================== */ fluent-button { display: inline-flex; height: var(--control-h); } /* --- Clearance around -------------------------------------------------------- * A BUTTON never sits hard against whatever is next to it — above, below, or * the button beside it. Buttons were landing flush under the control or the * paragraph they follow and flush on top of the table below, and each app had * patched its own gap into its own markup, so the same Save had a different * space around it in ACH than in Warranty. The clearance is the air a table * already puts around its rows, so a button and a row read on the same rhythm. * One declaration on the host puts it under every tool, and retuning it is one * token. * * On the HOST, not ::part(control): a margin inside the shadow root would move * the fill away from the button's own box and take the focus ring with it. * * The flat affordances are excluded. An ICON in a table row, a ROW in a menu, a * text LINK and a FIELD TRIGGER are not buttons — a margin on them opens a gap * mid-list, or drops a trigger below the fields it sits beside. A button in the * dark bar is excluded for the same reason: the bar centres its contents in a * fixed height, so a top margin there is an off-centre button, not clearance. */ fluent-button:not( .icon-btn, .icon-btn--danger, .cr-iconbtn, .cr-iconbtn2, .nav-report-sub, .nav-toggle-btn-header, .search-clear-btn, .rpm__x, .update-toast__x, .pwl-upgrade-x, .btn-close, .views-menu-del, .rpm__item, .views-menu-item, .cr-menu__item, .cr-viewrow__name, .app-bar__menu-item, .nav-folder-header, .nav-report-item, .dropdown-item, .btn-link, .cr-link, .sched__link, .mfa-link, .forgot-link, .link, .atlas-picker__trigger, .atlas-picker__action, .app-bar__btn, /* A TILE IN A LIST SPACES ITSELF THROUGH ITS CONTAINER. These two rules give a button air by putting margin ON THE BUTTON, which is right for a pair of actions in a form but wrong for a stacked list: the portal grid already has gap:12px, and the adjacent-sibling margin then indented tiles two through six by 8px against the first. */ .atlas-card-button, .application-card, .search-report-card ):not(:is(.app-header, .app-bar, .header-wrapper, .header-content, .header-inner) *) { margin-block: var(--button-gap, 0.5em); } /* Two buttons side by side get the same air between them. Stated on the adjacent sibling rather than as a gap on the container, because the containers are per app — a form's action row, a toolbar, the pair under the logo — and there is no one class to hang a gap on. */ fluent-button + fluent-button:not( .icon-btn, .icon-btn--danger, .cr-iconbtn, .cr-iconbtn2, .nav-report-sub, .nav-toggle-btn-header, .search-clear-btn, .rpm__x, .update-toast__x, .pwl-upgrade-x, .btn-close, .views-menu-del, .rpm__item, .views-menu-item, .cr-menu__item, .cr-viewrow__name, .app-bar__menu-item, .nav-folder-header, .nav-report-item, .dropdown-item, .btn-link, .cr-link, .sched__link, .mfa-link, .forgot-link, .link, .atlas-picker__trigger, .atlas-picker__action, .app-bar__btn, /* A TILE IN A LIST SPACES ITSELF THROUGH ITS CONTAINER. These two rules give a button air by putting margin ON THE BUTTON, which is right for a pair of actions in a form but wrong for a stacked list: the portal grid already has gap:12px, and the adjacent-sibling margin then indented tiles two through six by 8px against the first. */ .atlas-card-button, .application-card, .search-report-card ):not(:is(.app-header, .app-bar, .header-wrapper, .header-content, .header-inner) *) { margin-inline-start: var(--button-gap, 0.5em); } /* --- Rest ------------------------------------------------------------------- */ fluent-button::part(control) { /* The host carries the height, and the part fills it — but a host set to display:contents generates no box at all, and then the part has nothing to fill and shrinks to its label. One minimum here keeps every button the same height whatever its host does. */ min-height: var(--control-h); padding: var(--control-pad-y) var(--control-pad-x); /* GAP ZERO HERE, AND ON ::part(content) INSTEAD. Fluent's shadow root always renders an empty and around the content, width 0 but still flex items — so a gap on the control is charged TWICE for slots that hold nothing, and every React button came out 2 × gap wider than the Blazor button with the same label (52px vs 64px for OK). It is why the two sides still did not measure the same after the box tokens were unified. The glyph a tool puts in the button is in the DEFAULT slot, inside part=content, so the gap belongs there. */ gap: 0; background: var(--color-action); color: var(--color-action-fg); border: 1px solid var(--color-action-edge); border-radius: var(--radius); box-shadow: var(--shadow-sm); font-family: var(--font-stack); font-size: var(--font-size-control); font-weight: 500; line-height: 1.4; text-decoration: none; cursor: pointer; transition: background-color .12s ease, color .12s ease, border-color .12s ease; } fluent-button::part(content) { display: inline-flex; align-items: center; gap: var(--control-gap); } /* --- Card button ------------------------------------------------------------- * A FIFTH AFFORDANCE: a full-width tile that acts. The portal's app list is six * of them, and Fluent cannot be told to be one from the host. * * .application-card was a carrying display:flex, gap, padding, * a white fill and an edge — every one of them on the HOST, where none of them * reaches anything. The box a button draws is ::part(control) inside the shadow * root and the slotted children land inside ::part(content); so the tile * rendered as an ordinary 30px button with its icon, title and chevron spilling * out of a grey pill. The host rules had been there long enough to look * deliberate, which is why the tile was never questioned. * * Everything the tile needs is therefore said on the two parts. The one thing * the host still has to do is stop being an inline-sized button: a tile is as * wide as the column it sits in. */ fluent-button.atlas-card-button, fluent-button.search-report-card, fluent-button.application-card { display: block; width: 100%; height: auto; min-height: 0; } fluent-button.atlas-card-button::part(control), fluent-button.search-report-card::part(control), fluent-button.application-card::part(control) { display: flex; align-items: center; justify-content: flex-start; width: 100%; height: auto; /* A tile is as tall as its content, not one control high. */ min-height: 0; /* --space-6 --space-5: 24 by 16, the tile's own air. --space-4 made it 12 all round and the row read as a list item rather than a card. */ padding: var(--space-5) var(--space-6); background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: none; font-size: var(--font-size-base); font-weight: 400; /* A button centres its label and refuses to wrap. A tile is a paragraph. */ text-align: left; white-space: normal; } /* The slot is inside part=content, so the tile's own row — icon, text, chevron — is laid out HERE. It has to fill the control or the chevron sits against the text instead of the far edge. */ fluent-button.atlas-card-button::part(content), fluent-button.search-report-card::part(content), fluent-button.application-card::part(content) { display: flex; align-items: center; gap: var(--space-5); width: 100%; } fluent-button.atlas-card-button:hover::part(control), fluent-button.search-report-card:hover::part(control), fluent-button.application-card:hover::part(control) { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-strong); box-shadow: var(--shadow); } /* --- Small ------------------------------------------------------------------ * One button HEIGHT platform-wide; small tightens the horizontal padding only. * Both tools had this on the host, where padding does nothing. */ fluent-button.btn--sm::part(control), fluent-button.cr-btn--sm::part(control) { padding: var(--control-pad-y) var(--control-pad-x-tight); } /* --- Page tab ---------------------------------------------------------------- * NOT the app bar tab: that one sits on Midnight. This is a tab strip on the * page — no box at all, just a label that grows an edge underneath when it is * the current one. BIReports' schedule editor declared the whole thing on the * host, so all three tabs rendered as ordinary filled buttons in a row. */ fluent-button.sched__tab::part(control) { background: none; border: none; border-bottom: 2px solid transparent; border-radius: 0; box-shadow: none; padding: var(--space-3) var(--control-pad-x); color: var(--color-text-muted); font-size: var(--font-size-control); font-weight: 600; } fluent-button.sched__tab:hover::part(control) { background: none; border-bottom-color: var(--color-border-strong); color: var(--color-text-strong); } fluent-button.sched__tab--on::part(control), fluent-button.sched__tab.is-on::part(control) { color: var(--color-action-ink); border-bottom-color: var(--color-action-edge); } /* --- Round close ------------------------------------------------------------- * The dismiss on a toast. Same bare icon as every other close, but round, * because it sits inside a rounded strip rather than in a row of controls. */ fluent-button.send-toast__close::part(control) { background: transparent; border: 0; box-shadow: none; border-radius: 50%; padding: var(--control-pad-y); min-height: 0; color: inherit; } fluent-button.send-toast__close:hover::part(control) { background: var(--color-surface-3); border-color: transparent; color: inherit; } /* --- Small outlined ---------------------------------------------------------- * A button that clears a filter sits INSIDE a summary line, so it cannot be a * filled action competing with the line it is part of. Outlined, on the page * surface, one step down in size. */ fluent-button.summary-bar__filter-clear::part(control) { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: none; color: var(--color-text); font-size: var(--font-size-table); font-weight: 400; padding: var(--space-1) var(--control-pad-x-tight); min-height: 0; } fluent-button.summary-bar__filter-clear:hover::part(control) { background: var(--color-surface-3); border-color: var(--color-border-strong); color: var(--color-text-strong); } fluent-button.summary-bar__filter-clear--all::part(control) { font-weight: 600; color: var(--color-text-muted); } fluent-button.summary-bar__filter-clear--compact::part(control) { font-size: var(--font-size-micro); padding: var(--space-1) var(--space-3); } fluent-button.summary-bar__filter-clear--compact::part(content) { gap: var(--space-2); } /* --- Heading button ---------------------------------------------------------- * A section title that also acts. It carries no box: it IS the heading, and * only the pointer says it does anything. */ fluent-button.preview-panel__title-btn::part(control) { background: none; border: 0; box-shadow: none; padding: 0; min-height: 0; color: inherit; font: inherit; } fluent-button.preview-panel__title-btn:hover::part(control) { background: none; color: var(--color-action-hover); } fluent-button.preview-panel__title-btn:disabled::part(control) { background: none; color: var(--color-text-muted); } /* --- Icon -------------------------------------------------------------------- * A GLYPH IS NOT A BOX. An icon action repeats down a table column and sits * inside toolbars and toasts; drawn as a filled button it turns a quiet column * of affordances into a wall of grey chips, which is what ACH Tools' vendor * table looked like. * * atlas-theme.css has said this for the Blazor tools since ACT-70 — but only * for a NATIVE