/* =============================================================
arXiv Design System — internal tools (tier 2)
Admin Console, arXiv Check, the moderation queue.
This file is NOT self-contained. Load the tier 1 stylesheet first, and
put .ds-internal on — that class is what makes the accent lime:
Tier 1 owns everything a second surface could use — the foundation,
the alert, the tag, the field family, the close control. What lives
here is what only internal tools have (tables, metadata panels,
segmented controls, toggles, type badges, info cards, the internal
icon-button variants), plus the tokens whose VALUES differ on this
surface.
The rule for this file: it may re-point a tier 1 token where this
surface needs a different value. It must never introduce a token that
reuses a tier 1 name for a different meaning.
============================================================= */
/* ─── Tokens that differ on this surface ────────────────────── */
/*
* Only what disagrees with tier 1 is declared here. Everything else —
* text, canvas, borders, links, focus ring, the four status families,
* the spacing scale, the type stack — is inherited, because it is
* identical on both surfaces and a second copy is only somewhere for
* the two to drift apart.
*/
:root {
/* Surfaces. Light matches tier 1; the dark values are a shade
different because internal screens are dense with tables and want a
little more separation between a row and its ground. */
--ds-surface: #ffffff;
--ds-surface-muted: var(--ds-grey-10);
/* Internal-only surfaces: two hover washes, because a table row wants a
wash you barely notice and a control wants one you do, and a
pressed state below both. */
--ds-surface-hover: var(--ds-grey-5);
--ds-surface-hover-strong: var(--ds-grey-10);
--ds-surface-active: var(--ds-grey-25);
/* Text one step above muted — column headers, a row's leading cell. */
--ds-text-strong: #4a433d;
}
/* ─── Icon button, internal variants ─────────────────────────
Modifiers on tier 1's .ds-btn-icon, which is a shape composed with a
Only what internal tools alone have is here: the pressed state of a
toggle. The button itself is tier 1's, and so is the quiet destructive
(.ds-btn-text.ds-btn-destructive). */
/* Compact — inline field actions and table rows. 29px tall, above the 24px floor. */
/* Constructive — edit, add, copy */
/* Pressed — a toggle that is on. aria-pressed carries the state; this only shows it. */
.ds-btn-icon[aria-pressed="true"] {
background: var(--ds-surface-active);
border-color: var(--ds-text-disabled);
color: var(--ds-text-strong);
}
.ds-btn-icon[aria-pressed="true"]:hover:not(:disabled) {
background: var(--ds-surface-hover-strong);
border-color: var(--ds-text-disabled);
color: var(--ds-text-strong);
}
/* The bulk bar's count: "2 selected", quieter than the actions beside it. */
.ds-bulk-count { font-size: 0.75rem; color: var(--ds-text-muted); }
/* ─── Table Row Selection ────────────────────────────────────
* Selected rows carry the lime selection tint (
* the tint aids scanability of the selection set). The row's checkbox
* carries the state; the tint is never the only signal (WCAG 1.4.1).
*/
.ds-table tr.is-selected td { background: var(--ds-accent-wash); }
/* ─── Dark Mode Overrides ───────────────────────────────────── */
/*
* Fires when: OS is set to dark AND the page has not locked to light mode.
*
* To lock a page to light mode, add data-theme="light" to :
*
* The :not([data-theme="light"]) guard prevents this block from applying.
*/
/* Dark mode. Only the tokens whose dark value differs from tier 1's; never
* hand-pick a dark colour into a component rule. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
/* Only the tokens whose dark value differs from tier 1's. Everything
else — text, canvas, borders, links, focus ring, all four status
families — flips identically on both surfaces and is inherited. */
/* Surfaces sit a shade apart from tier 1's: internal screens are dense
with tables and want more separation between a row and its ground. */
--ds-surface: #252118;
--ds-surface-muted: #302c28;
--ds-surface-hover: #2a2520;
--ds-surface-hover-strong: #272420;
--ds-surface-active: #302c28;
--ds-text-strong: #d4cfc9; /* 11.22:1 on dark ✓ */
}
/* Constructive icon — lime holds its light value, so the label is lime on dark */
}
/* ── The same values, keyed to the attribute ──────────────────────────────
Generated from the @media block above; check-drift.py fails if the two
disagree. The block above answers the OS; this one answers the reader,
who can now say so on either surface. Until 2026-09-16 this file had no
attribute rules at all, so an internal tool followed the machine and could
not be switched — an asymmetry with tier 1 that was inherited, not chosen.
Dropping the :root / html prefix also makes it scopable: a data-theme
island anywhere in the DOM picks up the same values. */
[data-theme="dark"] {
/* Only the tokens whose dark value differs from tier 1's. Everything
else — text, canvas, borders, links, focus ring, all four status
families — flips identically on both surfaces and is inherited. */
/* Surfaces sit a shade apart from tier 1's: internal screens are dense
with tables and want more separation between a row and its ground. */
--ds-surface: #252118;
--ds-surface-muted: #302c28;
--ds-surface-hover: #2a2520;
--ds-surface-hover-strong: #272420;
--ds-surface-active: #302c28;
--ds-text-strong: #d4cfc9; /* 11.22:1 on dark ✓ */
}
/* Constructive icon — lime holds its light value, so the label is lime on dark */
/* ─── Data Table ───────────────────────────────────────────── */
/*
* Base table styles for admin data tables. Warm-tinted header row,
* subtle row dividers, hover highlight. Use .ds-table on
.
*
* Column widths: set via classes on
/
or inline widths.
* The table defaults to auto layout; add table-layout: fixed to
* the