/* ------ ICON LIBRARY STYLES ------ */ /* Layer: app. The Icon Library tool: one docked bar, a docked band for the selected icon, and a full-width tile grid under them. Every selector is .icon-library-* prefixed because this file loads on every page (extraStylesheets, cms/docs.config.js), so an unscoped rule here reaches all of them. No .bar-container rules here: the bar's content column belongs to docs-site.css. Same reason as svg-cleaner.css. Deliberate exceptions to the tokens-only rule, all preview or export data: the stage's checkerboard (fixed greys, the logo tool's), the light and dark grounds and the swatch fills (brand hex values the script reads from the palette tokens at init, because an exported file cannot resolve a custom property), and the focus outlines (the system's own 2px convention, as in the segmented control). Everything else here is tokens. */ /* -- Docked chrome -- Two layers dock on this page: the bar, and the selected icon's band under it. The shell already sums --scroll-offset for one docked bar (docs-site.css), so nothing here re-points it. The band is deliberately not in that sum: it comes and goes with a selection, and an anchor landing position that moved when you picked an icon would be worse than one that ignores it. Tiles carry the band's real measured height instead (--il-detail-height, written by the module). --il-bar-height rebuilds the component's default-density height from its own tokens — one control tall, its padding, its border — so re-pointing a bar knob moves the band with it. --bar-top is re-pointed on .bar by the shell, not on :root, so anything outside a bar has to name --top-nav-height itself. */ body:has(.bar.icon-library-bar) { --il-bar-height: calc( var(--bar-control-height) + (2 * var(--bar-padding-y)) + var(--border-s) ); --il-chrome-top: calc(var(--top-nav-height) + var(--il-bar-height)); } /* -- Layout -- No .container-m: the grid is the page, and a set of 175 icons reads better across the full measure than in a reading column. .padding-global still holds the gutter, and it is the same --space-xl the bar uses for --bar-padding-x, so the first tile and the first control share a left edge. That alignment is also why the bar carries no data-width="tool", which would constrain it to the container width the page no longer has. */ .icon-library-layout { min-width: 0; } /* Empty state swaps via a state class: the grid, count and callout leave together and the message takes their place. The message block itself is the one thing toggled with [hidden], after init has settled. */ .icon-library-layout.is-empty > :not(.icon-library-empty) { display: none; } /* -- Search -- */ /* A fixed measure: the bar never wraps, so the field needs a width that holds its placeholder and leaves the category room, rather than the intrinsic width the flex item would otherwise settle on. Element-qualified on purpose: input[type="search"] is (0,1,1) and a bare class (0,1,0) never lands — docs-site.css records the same trap for the glossary's field. */ input.icon-library-search { width: 14rem; } /* -- Bar -- The chip is the whole visible trigger: the colour is faster to read than its name, and the name stays as the trigger's accessible name. Export data, so the same forced-colours opt-out as a swatch. */ .icon-library-swatch-chip { display: block; width: 1rem; height: 1rem; flex-shrink: 0; border: var(--border-s) solid var(--text-faded); border-radius: var(--radius-xs); background-color: var(--swatch-fill, transparent); forced-color-adjust: none; } /* The unit belongs to the number beside it, not to the group's name — the field is already named "Export size in pixels", so this is decoration. */ .icon-library-unit { font-size: var(--font-xs); color: var(--text-faded); } /* Wide enough for two rows of seven swatches, which is the palette's own shape: six neutrals and eight accents. */ .icon-library-colour-panel { width: 20rem; max-width: calc(100vw - (2 * var(--space-l))); /* .dropdown-menu carries no padding of its own: every child supplies its own inset, and .dropdown-item / .dropdown-label do. The swatch grid and the Custom row are neither, so they sat flush against the panel border while the captions above them were inset, and the last row had nothing below it at all. logo-tool.css hit this first with its width panel and solved it the same way: the rows borrow the item inset. */ padding-block-end: var(--space-m); } .icon-library-colour-panel > .icon-library-swatches, .icon-library-colour-panel > .icon-library-colour-row { padding-inline: var(--space-m); } /* -- Grid -- */ /* auto-fill, not auto-fit: a filtered result of three icons keeps its column width instead of stretching three tiles across the page. The gap is wide enough for a tile's focus ring to sit in the gutter. The track is narrower than it was because a tile carries no caption now, so its width is the drawing's, not a word's. */ .icon-library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); gap: var(--space-xs); /* The tooltip bubble is opacity: 0, not display: none, so its box exists at every moment and the last column's hangs past the page edge — 9px of horizontal page scroll with no visible cause. clip, not hidden: it never creates a scroll container, and the clip margin is wide enough that an edge tile's tooltip is still drawn in full. */ overflow-x: clip; /* The margin is what keeps an edge tile's tooltip and focus ring whole: the clip box is the padding box without it, and the longest name overhangs a 4.5rem track by roughly 40px. Generous on purpose — nothing scrolls, so an over-wide clip box costs nothing. Where the property is unsupported the fallback is the padding edge, so check a first-column focus ring before assuming it is honoured. */ overflow-clip-margin: 8rem; } /* -- Tile -- A bare