@jasonsdevspace/design-kit 0.1.0-next.1 → 0.1.0-next.3

package/dist/components.css

@@ -0,0 +1,688 @@
+/*
+ * The kit's components, in the kit's components layer, so they sit over the base and under a
+ * page's own rules. Each is styled by its class and the markup the package README gives for it,
+ * which the React components draw and a page without React writes by hand. A selector beyond a
+ * single class sits inside one :where(), followed at most by a focus pseudo-class, so only the
+ * classes and the focus rule carry weight. The page chrome comes first, then the buttons, fields
+ * and callouts, then the explainer page and the panel, table and code block it holds.
+ *
+ * Load it after tokens.css, whose first statement declares the order of the kit's layers.
+ */
+
+@layer dk.components {
+    /*
+     * Skip to content, out of sight until it takes focus, and then over the strip at the column's
+     * inset, where the strip's links start. It waits in its own place as the visually hidden
+     * class does, one pixel clipped to nothing, rather than moved above it, so one inside a
+     * positioned box of the page's own draws nothing, takes no click and covers nothing a screen
+     * reader's touch finds wherever the box starts, and shows at the top of that box once a
+     * keyboard reaches it.
+     */
+    .dk-skip {
+        position: absolute;
+        left: calc(max(0px, (100% - var(--dk-column)) / 2) + var(--dk-space-4));
+        top: var(--dk-space-4);
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        overflow: hidden;
+        clip-path: inset(50%);
+        white-space: nowrap;
+        border-radius: var(--dk-radius);
+        background: var(--dk-accent);
+        color: var(--dk-on-accent);
+        z-index: 10;
+    }
+
+    :where(.dk-skip):focus-visible {
+        width: auto;
+        height: auto;
+        padding: var(--dk-space-2) var(--dk-space-4);
+        overflow: visible;
+        clip-path: none;
+    }
+
+    /*
+     * The strip and the footer run their rules the width of the page and line their content up
+     * with the column below, so the page reads as one column from the strip to the footer. An
+     * explainer and the header above it start their text at the same inset.
+     */
+    :where(.dk-strip, .dk-footer, .dk-explainer-header, .dk-explainer) {
+        padding-inline: calc(max(0px, (100% - var(--dk-column)) / 2) + var(--dk-space-4));
+    }
+
+    /*
+     * Whose demo this is, one row over its rule on a wide screen: the links together on the left,
+     * and the demo's own switches, when it has some, on the right.
+     */
+    .dk-strip {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: space-between;
+        gap: 0 var(--dk-space-5);
+        border-bottom: 1px solid var(--dk-line);
+        font-size: var(--dk-text-small);
+    }
+
+    .dk-strip-links {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 0 var(--dk-space-5);
+    }
+
+    /* The whole row's height is the target, not the one line of small text. */
+    :where(.dk-strip-links a) {
+        display: inline-flex;
+        align-items: center;
+        min-height: var(--dk-strip);
+    }
+
+    /*
+     * The switches wrap where larger text leaves no room, and stand at least as tall as the links'
+     * row.
+     */
+    .dk-strip-tools {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--dk-space-3);
+        min-height: var(--dk-strip);
+    }
+
+    /* The exit after a long scroll, its rule the width of the page and its text in the column. */
+    .dk-footer {
+        margin-top: var(--dk-space-6);
+        padding-block: var(--dk-space-4);
+        border-top: 1px solid var(--dk-line);
+        color: var(--dk-muted);
+        font-size: var(--dk-text-small);
+    }
+
+    :where(.dk-footer p) {
+        margin: 0;
+    }
+
+    /*
+     * The chrome's links step back in the muted text, and come forward to the page's text when
+     * pointed at or focused, as the link to the current page always is. Every one keeps its
+     * underline, which in the footer's sentence is what tells a link from the text around it.
+     */
+    :where(.dk-strip-links a, .dk-footer a) {
+        color: var(--dk-muted);
+    }
+
+    :where(
+        .dk-strip-links a:hover,
+        .dk-strip-links a:focus-visible,
+        .dk-strip-links a[aria-current='page'],
+        .dk-footer a:hover,
+        .dk-footer a:focus-visible,
+        .dk-footer a[aria-current='page']
+    ) {
+        color: var(--dk-fg);
+    }
+
+    /*
+     * The link to the page a reader is on stands in the page's text, as above, and at the heading's
+     * weight, so it is told from the links around it by more than its color, which forced colors
+     * replace. It keeps its underline, so it still reads as a link.
+     */
+    :where(.dk-strip-links a[aria-current='page'], .dk-footer a[aria-current='page']) {
+        font-weight: var(--dk-weight-strong);
+    }
+
+    /*
+     * On a phone the links are smaller and closer, and wrap to rows of their own where they must,
+     * with the switches on a row below them.
+     */
+    @media (max-width: 48rem) {
+        .dk-strip {
+            font-size: var(--dk-text-caption);
+        }
+
+        .dk-strip-links {
+            gap: 0 var(--dk-space-4);
+        }
+
+        .dk-strip-tools {
+            flex-basis: 100%;
+            padding-block: 0 var(--dk-space-2);
+        }
+
+        /*
+         * The room of switches on their way stands as tall as one of the kit's controls at the
+         * target, which is taller than the strip's row, so their row keeps the height the switches
+         * give it. On a wide screen the strip's row is taller than a control, and holds alone.
+         */
+        .dk-strip-room {
+            min-height: var(--dk-target);
+        }
+    }
+
+    /*
+     * Every rule for a button, a field or a callout sits in one :where(), the resting look
+     * included. Each weighs nothing, so a state written after the resting look, such as pressed or
+     * off, wins over it by coming later, and a page's own rule outside a layer wins over them all.
+     * A button's states come in the order they win, at rest, pointed at, the accent, pressed and
+     * off, and a control's at rest, invalid and off, so off is last for each.
+     */
+
+    /*
+     * A button stands as tall as a field, so the two sit level in a row, and is never narrower
+     * than it is tall. It has no ground of its own, so it takes the ground of whatever it sits on,
+     * a callout or a panel included. A link that wears the class looks the same.
+     */
+    :where(.dk-button) {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--dk-space-2);
+        min-height: var(--dk-field-height);
+        min-width: var(--dk-field-height);
+        padding: 0 var(--dk-space-3);
+        border: 1px solid var(--dk-control);
+        border-radius: var(--dk-radius);
+        background: transparent;
+        color: var(--dk-fg);
+        font-size: var(--dk-text-small);
+        line-height: var(--dk-leading-tight);
+        text-decoration: none;
+        cursor: pointer;
+        transition:
+            border-color var(--dk-duration-short),
+            background-color var(--dk-duration-short);
+    }
+
+    /*
+     * Pointed at, the edge turns to the accent. Only where a pointer can rest over a button, since
+     * on a phone the look would stay after a tap, and a toggle tapped off would look pressed.
+     */
+    @media (hover: hover) {
+        :where(.dk-button:hover) {
+            border-color: var(--dk-accent);
+        }
+    }
+
+    /*
+     * The one action a view leads with, filled in the accent. Its edge is already the accent, so
+     * a pointer over it underlines the words instead.
+     */
+    :where(.dk-button-accent) {
+        border-color: var(--dk-accent);
+        background: var(--dk-accent);
+        color: var(--dk-on-accent);
+        font-weight: var(--dk-weight-strong);
+    }
+
+    @media (hover: hover) {
+        :where(.dk-button-accent:hover) {
+            text-decoration: underline;
+        }
+    }
+
+    /*
+     * A toggle that is on, and a button whose panel is open, on the highlight with an edge twice
+     * as thick in the accent and its words in the page's text, the accent button's included. The
+     * highlight alone is close to the page's own ground, so the thicker edge is what tells the
+     * state at a glance.
+     */
+    :where(.dk-button[aria-pressed='true'], .dk-button[aria-expanded='true']) {
+        border-color: var(--dk-accent);
+        background: var(--dk-highlight);
+        box-shadow: inset 0 0 0 1px var(--dk-accent);
+        color: var(--dk-fg);
+    }
+
+    /*
+     * Off, drawn the same whether the button is disabled or marked aria-disabled, which keeps it
+     * in the tab order. The accent is dropped too, so the muted words never sit on the accent.
+     * Off has colors of its own rather than a fade, so its words keep a ratio that is measured.
+     */
+    :where(.dk-button:disabled, .dk-button[aria-disabled='true']) {
+        border-color: var(--dk-line);
+        background: transparent;
+        box-shadow: none;
+        color: var(--dk-muted);
+        font-weight: var(--dk-weight-normal);
+        text-decoration: none;
+        cursor: default;
+    }
+
+    /* An off toggle that is on keeps its thicker edge, in the line's color, so it still tells. */
+    :where(
+        .dk-button[aria-pressed='true']:disabled,
+        .dk-button[aria-pressed='true'][aria-disabled='true']
+    ) {
+        box-shadow: inset 0 0 0 1px var(--dk-line);
+    }
+
+    /*
+     * A field: its label, a hint when it has one, an error when it has one, and then the control.
+     * The error sits above the control, so a phone's keyboard or an open list never covers it, and
+     * the hint stays while the error shows, since it often says how to put the error right.
+     */
+    :where(.dk-field) {
+        display: grid;
+        gap: var(--dk-space-1);
+    }
+
+    :where(.dk-field > *) {
+        margin: 0;
+    }
+
+    :where(.dk-field-label) {
+        font-size: var(--dk-text-small);
+        font-weight: var(--dk-weight-medium);
+    }
+
+    :where(.dk-field-hint, .dk-field-error) {
+        font-size: var(--dk-text-caption);
+    }
+
+    :where(.dk-field-hint) {
+        color: var(--dk-muted);
+    }
+
+    :where(.dk-field-error) {
+        color: var(--dk-danger);
+        font-weight: var(--dk-weight-medium);
+    }
+
+    /*
+     * A control a visitor types into or picks from, on the page's own ground, so it reads as a
+     * well on a card or a panel. Its text is never under 16px, in px since it is the size
+     * at which a phone stops zooming the page when the field is tapped.
+     */
+    :where(.dk-input, .dk-select) {
+        min-width: 0;
+        max-width: 100%;
+        min-height: var(--dk-field-height);
+        padding: var(--dk-space-1) var(--dk-field-inline);
+        border: 1px solid var(--dk-control);
+        border-radius: var(--dk-radius);
+        background-color: var(--dk-bg);
+        color: var(--dk-fg);
+        font-size: max(var(--dk-text-body), 16px);
+    }
+
+    /*
+     * The browser's own list opens, but the closed select is drawn here, so its caret is in the
+     * muted text and sits as far from the right edge as the text does from the left. The padding
+     * keeps a long value short of the caret, cut off with an ellipsis where the browser draws one.
+     * A select that shows its options as a list, with multiple or a size, is left as the browser
+     * draws it.
+     */
+    :where(.dk-select:not([multiple], [size])) {
+        appearance: none;
+        padding-inline-end: calc(var(--dk-field-inline) * 2 + var(--dk-space-3));
+        text-overflow: ellipsis;
+        background-image:
+            linear-gradient(45deg, transparent 50%, var(--dk-muted) 50%),
+            linear-gradient(135deg, var(--dk-muted) 50%, transparent 50%);
+        background-repeat: no-repeat;
+        background-position:
+            right calc(var(--dk-field-inline) + var(--dk-space-3) / 2) center,
+            right var(--dk-field-inline) center;
+        background-size: calc(var(--dk-space-3) / 2) calc(var(--dk-space-3) / 2);
+        cursor: pointer;
+    }
+
+    /* A control with an error shown, its edge in the danger color, beside the error's words. */
+    :where(.dk-input[aria-invalid='true'], .dk-select[aria-invalid='true']) {
+        border-color: var(--dk-danger);
+    }
+
+    :where(.dk-input:disabled, .dk-select:disabled) {
+        border-color: var(--dk-line);
+        background-color: var(--dk-surface);
+        color: var(--dk-muted);
+        cursor: default;
+    }
+
+    /*
+     * A message set apart from the page, on the highlight for news, or on a ground of its own for
+     * something that went right or wrong. Its words stay in the page's own color in every tone,
+     * and say the tone themselves, so color is never the only sign of it. The edge draws nothing
+     * until forced colors drop the ground, and then it marks where the callout starts and ends.
+     */
+    :where(.dk-callout) {
+        display: grid;
+        gap: var(--dk-space-2);
+        padding: var(--dk-space-2) var(--dk-space-3);
+        border: 1px solid transparent;
+        border-radius: var(--dk-radius);
+        background: var(--dk-highlight);
+        color: var(--dk-fg);
+        font-size: var(--dk-text-small);
+    }
+
+    :where(.dk-callout-success) {
+        background: var(--dk-success-bg);
+    }
+
+    :where(.dk-callout-danger) {
+        background: var(--dk-danger-bg);
+    }
+
+    /*
+     * A callout whose message holds nothing, not even a space, and that has no actions draws
+     * nothing, no ground, padding or edge. That is a live callout a page mounts before it has
+     * words, and it stays in the page so a screen reader reads what fills it. It comes after the
+     * tones, so it wins over each of them by its order.
+     */
+    :where(.dk-callout:has(> .dk-callout-body:empty):not(:has(> .dk-callout-actions))) {
+        padding: 0;
+        border-width: 0;
+        background: none;
+    }
+
+    :where(.dk-callout-title) {
+        margin: 0;
+        font-size: inherit;
+        font-weight: var(--dk-weight-strong);
+    }
+
+    :where(.dk-callout-body) {
+        display: grid;
+        gap: var(--dk-space-2);
+    }
+
+    :where(.dk-callout-body > *) {
+        margin: 0;
+    }
+
+    :where(.dk-callout-actions) {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--dk-space-2);
+    }
+
+    /* On a phone a button and a field grow to the target a thumb presses, and stay level. */
+    @media (max-width: 48rem) {
+        :where(.dk-button, .dk-input, .dk-select) {
+            min-height: var(--dk-target);
+        }
+
+        :where(.dk-button) {
+            min-width: var(--dk-target);
+        }
+    }
+
+    /*
+     * In forced colors the page's own grounds and shadows are gone, so a pressed toggle takes the
+     * system's highlight, an off button the system's gray on the page's ground as a disabled one
+     * does, an off toggle that is on an edge in the highlight, and the select the browser's own
+     * arrow, since the drawn caret is a background.
+     */
+    @media (forced-colors: active) {
+        :where(.dk-button[aria-pressed='true'], .dk-button[aria-expanded='true']) {
+            background: Highlight;
+            color: HighlightText;
+        }
+
+        :where(.dk-button:disabled, .dk-button[aria-disabled='true']) {
+            border-color: GrayText;
+            background: Canvas;
+            color: GrayText;
+        }
+
+        :where(
+            .dk-button[aria-pressed='true']:disabled,
+            .dk-button[aria-pressed='true'][aria-disabled='true']
+        ) {
+            border-color: Highlight;
+        }
+
+        :where(.dk-select) {
+            appearance: auto;
+            padding-inline-end: var(--dk-field-inline);
+            background-image: none;
+        }
+    }
+
+    /*
+     * An explainer: the page that says how a demo works, in sections a reader can jump between.
+     * Its text starts at the column's inset, where the strip's links start, and every part of it
+     * holds to the measure. Each part is spaced from the one before it, so lists, tables, panels
+     * and code blocks space alike. A section opens on a rule, then its number, its heading and its
+     * text, and a section is a plain one, never named, so the page's landmarks stay the strip's
+     * links and switches, the header, the main content, the footer and the frames that scroll.
+     */
+    :where(.dk-explainer-header) {
+        padding-block: var(--dk-space-4) 0;
+        font-size: var(--dk-text-small);
+    }
+
+    :where(.dk-explainer) {
+        padding-block-start: var(--dk-space-6);
+    }
+
+    :where(.dk-explainer > *, .dk-explainer > section > *) {
+        max-width: var(--dk-measure);
+        margin-block: 0;
+    }
+
+    :where(.dk-explainer > * + *, .dk-explainer > section > * + *) {
+        margin-block-start: var(--dk-space-4);
+    }
+
+    :where(.dk-explainer > h1) {
+        font-size: var(--dk-text-display);
+    }
+
+    :where(.dk-explainer > h1 + *) {
+        margin-block-start: var(--dk-space-2);
+    }
+
+    /* What the demo does, in a sentence or two, the second thing a reader reads after the title. */
+    :where(.dk-explainer-lead) {
+        font-size: var(--dk-text-lead);
+    }
+
+    :where(.dk-explainer > section) {
+        margin-block-start: var(--dk-space-6);
+        padding-block-start: var(--dk-space-6);
+        border-top: 1px solid var(--dk-line);
+    }
+
+    /* The section's number, for the eye alone, since its heading says what it is. */
+    :where(.dk-explainer-number) {
+        color: var(--dk-muted);
+        font-size: var(--dk-text-caption);
+    }
+
+    /*
+     * A jump to a section's heading stops short of it by the number's line, the space over it and a
+     * short step more, so the number and the section's rule stay in sight above it.
+     */
+    :where(.dk-explainer > section > h2) {
+        font-size: var(--dk-text-title);
+        scroll-margin-top: calc(
+            var(--dk-text-caption) * var(--dk-leading-body) + var(--dk-space-1) +
+                var(--dk-space-6) + var(--dk-space-2)
+        );
+    }
+
+    :where(.dk-explainer-number + h2) {
+        margin-block-start: var(--dk-space-1);
+    }
+
+    :where(.dk-explainer > section > h2 + *) {
+        margin-block-start: var(--dk-space-3);
+    }
+
+    :where(.dk-explainer > section > h3) {
+        margin-block-start: var(--dk-space-5);
+        font-size: var(--dk-text-body);
+    }
+
+    :where(.dk-explainer > section > h3 + *) {
+        margin-block-start: var(--dk-space-1);
+    }
+
+    /*
+     * Steps a demo takes one after another, each in a box of its own with an arrow above it from
+     * the step before. The arrow is a span hidden from a screen reader, since a selector in this
+     * sheet takes nothing after its :where() but a focus pseudo-class, and a pseudo-element cannot
+     * sit inside one. The list keeps role="list" in its markup, since a browser can drop a list's
+     * meaning when its markers are gone.
+     */
+    :where(.dk-steps) {
+        display: grid;
+        gap: var(--dk-space-5);
+        padding: 0;
+        list-style: none;
+    }
+
+    :where(.dk-steps > li) {
+        position: relative;
+        padding: var(--dk-space-3) var(--dk-space-4);
+        border: 1px solid var(--dk-line);
+        border-radius: var(--dk-radius-large);
+        font-size: var(--dk-text-small);
+    }
+
+    :where(.dk-steps-arrow) {
+        position: absolute;
+        inset-inline: 0;
+        bottom: 100%;
+        line-height: var(--dk-space-5);
+        text-align: center;
+        color: var(--dk-muted);
+    }
+
+    :where(.dk-steps-title) {
+        display: block;
+        font-weight: var(--dk-weight-medium);
+    }
+
+    :where(.dk-steps-note) {
+        display: block;
+        margin-block-start: var(--dk-space-1);
+        color: var(--dk-muted);
+    }
+
+    /*
+     * A panel, a region of a page set apart on the card's ground, at the body's size, with no
+     * tone and no role. Its edge in the line's color is what draws it, since the card's ground is
+     * close to the page's, and it stays in forced colors. Its title steps down to the body's size
+     * inside an explainer, under the section's heading.
+     */
+    :where(.dk-panel) {
+        padding: var(--dk-space-5);
+        border: 1px solid var(--dk-line);
+        border-radius: var(--dk-radius-large);
+        background: var(--dk-surface);
+        color: var(--dk-fg);
+    }
+
+    :where(.dk-panel > *) {
+        margin-block: 0;
+    }
+
+    :where(.dk-panel > * + *) {
+        margin-block-start: var(--dk-space-3);
+    }
+
+    :where(.dk-panel-title) {
+        font-size: var(--dk-text-title);
+        font-weight: var(--dk-weight-strong);
+        line-height: var(--dk-leading-tight);
+    }
+
+    :where(.dk-explainer .dk-panel-title) {
+        font-size: var(--dk-text-body);
+    }
+
+    /*
+     * A table scrolls inside its frame when it is wider than the measure, so the page never does.
+     * The frame is a named region with a tabindex of 0, so a keyboard can reach it and scroll it.
+     * Its rows are ruled, its headers step back in the muted text, and its outer cells keep no
+     * padding, so its text lines up with the prose around it. Figures sit to the right, never
+     * wrapping, while the text in a row wraps and keeps each cell's first line level.
+     */
+    :where(.dk-table-scroll) {
+        max-width: 100%;
+        overflow-x: auto;
+    }
+
+    :where(.dk-table) {
+        width: 100%;
+        font-size: var(--dk-text-small);
+    }
+
+    :where(.dk-table th, .dk-table td) {
+        padding: var(--dk-space-2) var(--dk-space-3);
+        border-bottom: 1px solid var(--dk-line);
+        text-align: start;
+        vertical-align: baseline;
+    }
+
+    :where(.dk-table th:first-child, .dk-table td:first-child) {
+        padding-inline-start: 0;
+    }
+
+    :where(.dk-table th:last-child, .dk-table td:last-child) {
+        padding-inline-end: 0;
+    }
+
+    :where(.dk-table thead th) {
+        color: var(--dk-muted);
+        font-weight: var(--dk-weight-medium);
+    }
+
+    :where(.dk-table tbody th) {
+        font-weight: var(--dk-weight-medium);
+    }
+
+    :where(.dk-table .dk-table-number) {
+        text-align: end;
+        white-space: nowrap;
+    }
+
+    /* Code in a cell keeps its name whole, so the frame scrolls rather than the name breaking. */
+    :where(.dk-table code) {
+        overflow-wrap: normal;
+    }
+
+    /*
+     * A block of code keeps its lines as written and scrolls inside itself, a named region the
+     * keyboard reaches, as a table's frame is. It sits on the card's ground, or on the page's
+     * inside a panel, so it reads as set into what holds it, and its edge shows in forced colors.
+     */
+    :where(.dk-code) {
+        padding: var(--dk-space-3) var(--dk-space-4);
+        border: 1px solid transparent;
+        border-radius: var(--dk-radius);
+        background: var(--dk-surface);
+        font-size: var(--dk-text-code);
+        line-height: var(--dk-leading-body);
+    }
+
+    :where(.dk-panel .dk-code) {
+        background: var(--dk-bg);
+    }
+
+    /*
+     * The title of a table or a code block, outside the frame that scrolls, which names the frame
+     * and the table. A caption would take the table's width and scroll off a phone with it. It
+     * comes after the frames' own rules, so its step wins over the code block's margin.
+     */
+    :where(.dk-table-title, .dk-code-title) {
+        margin-block-end: 0;
+        font-size: var(--dk-text-small);
+        font-weight: var(--dk-weight-strong);
+    }
+
+    :where(.dk-table-title + *, .dk-code-title + *) {
+        margin-block-start: var(--dk-space-2);
+    }
+
+    @media (max-width: 48rem) {
+        :where(.dk-panel) {
+            padding: var(--dk-space-4);
+        }
+    }
+}