/* ============================================================================
Design system — components from the Website / dash.org Figma file
One shared sheet for every design-system component. It is safe to share
because every selector here is a `.ds-*` class: linking it restyles
nothing until markup opts in by using one of these classes. Never add a
bare element selector (a, button, h1…) or a legacy class (.btn, .row…) —
that would turn this into another dash.css.
Values live in `css/tokens.css`, never here: this sheet only says which
token goes where. Link order: shared sheets → tokens.css → ds.css →
page-scoped sheet.
Sections: 1. Text styles 2. Button
========================================================================== */
/* --- 1. Text styles ------------------------------------------------------
Figma Typography page (node 694:5049). Only the styles the markup uses
today; add the rest of the scale as pages need them.
A text style carries type only, never spacing. Space between elements is
the parent's job, via `gap` on a flex/grid container, which is how Figma's
auto-layout expresses it. Zeroing margins here — rather than on bare h1-h6
and p — keeps the legacy page flow untouched: 160 of the site's 209 flex
containers have no `gap`, so a global reset would collapse vertical
spacing everywhere. */
.ds-xl-semibold,
.ds-l-semibold,
.ds-m-regular,
.ds-m-medium,
.ds-s-regular,
.ds-s-medium,
.ds-h1-extrabold,
.ds-h2-extrabold,
.ds-h3-bold,
.ds-h4-bold,
.ds-h5-bold,
.ds-h6-bold {
letter-spacing: 0;
margin: 0;
padding: 0;
}
.ds-xl-semibold,
.ds-l-semibold,
.ds-m-regular,
.ds-m-medium,
.ds-s-regular,
.ds-s-medium {
font-family: var(--ds-font-text);
}
/* Heading variants take the heading family, not the text family. */
.ds-h1-extrabold,
.ds-h2-extrabold,
.ds-h3-bold,
.ds-h4-bold,
.ds-h5-bold,
.ds-h6-bold {
font-family: var(--ds-font-heading);
}
.ds-h1-extrabold {
font-size: var(--ds-h1-size);
line-height: var(--ds-h1-lh);
font-weight: var(--ds-fw-extrabold);
}
.ds-h2-extrabold {
font-size: var(--ds-h2-size);
line-height: var(--ds-h2-lh);
font-weight: var(--ds-fw-extrabold);
}
.ds-h3-bold {
font-size: var(--ds-h3-size);
line-height: var(--ds-h3-lh);
font-weight: var(--ds-fw-bold);
}
.ds-h4-bold {
font-size: var(--ds-h4-size);
line-height: var(--ds-h4-lh);
font-weight: var(--ds-fw-bold);
}
.ds-h6-bold {
font-size: var(--ds-h6-size);
line-height: var(--ds-h6-lh);
font-weight: var(--ds-fw-bold);
}
.ds-xl-semibold {
font-size: var(--ds-xl-size);
line-height: var(--ds-xl-lh);
font-weight: var(--ds-fw-semibold);
}
.ds-l-semibold {
font-size: var(--ds-l-size);
line-height: var(--ds-l-lh);
font-weight: var(--ds-fw-semibold);
}
.ds-h5-bold {
font-size: var(--ds-h5-size);
line-height: var(--ds-h5-lh);
font-weight: var(--ds-fw-bold);
}
.ds-m-regular {
font-size: var(--ds-m-size);
line-height: var(--ds-m-lh);
font-weight: var(--ds-fw-regular);
}
.ds-m-medium {
font-size: var(--ds-m-size);
line-height: var(--ds-m-lh);
font-weight: var(--ds-fw-medium);
}
.ds-s-regular {
font-size: var(--ds-s-size);
line-height: var(--ds-s-lh);
font-weight: var(--ds-fw-regular);
}
.ds-s-medium {
font-size: var(--ds-s-size);
line-height: var(--ds-s-lh);
font-weight: var(--ds-fw-medium);
}
/* The class is written twice on purpose. dash.css colours headings through
section classes — `.bg-white h2`, `.bg-light h3` … (0,1,1) — which outrank
a single class (0,1,0) and turned a `.ds-text-primary` h2 Dash blue.
Doubling it gives (0,2,0): enough to win, still below any ID rule, and no
!important. */
.ds-text-primary.ds-text-primary { color: var(--ds-text-primary); }
.ds-text-tertiary.ds-text-tertiary { color: var(--ds-text-tertiary); }
/* --- 2. Button -----------------------------------------------------------
Figma components btn--lg / btn--md / btn--sm (page "|–– Button").
A button is built from three classes — base, size, style:
… optional, Leading icon
Label
… optional, Trailing icon
Works on and