@slotted/styles 0.0.0-stage → 0.1.0-beta.0

package/src/command-palette/command-palette.tokens.json

@@ -0,0 +1,75 @@
+[
+  "--slotted-border-subtle",
+  "--slotted-border-width-thin",
+  "--slotted-command-palette-active",
+  "--slotted-command-palette-border-color",
+  "--slotted-command-palette-footer-surface",
+  "--slotted-command-palette-highlight",
+  "--slotted-command-palette-highlight-ring",
+  "--slotted-command-palette-hover",
+  "--slotted-command-palette-item-radius",
+  "--slotted-command-palette-list-max-block-size",
+  "--slotted-command-palette-list-padding",
+  "--slotted-command-palette-measure",
+  "--slotted-command-palette-page-surface",
+  "--slotted-command-palette-placeholder-fade",
+  "--slotted-command-palette-radius",
+  "--slotted-command-palette-separator-color",
+  "--slotted-command-palette-shadow",
+  "--slotted-command-palette-surface",
+  "--slotted-command-palette-text",
+  "--slotted-command-palette-text-muted",
+  "--slotted-control-font-size-lg",
+  "--slotted-control-font-size-md",
+  "--slotted-control-font-size-sm",
+  "--slotted-control-gap-lg",
+  "--slotted-control-gap-md",
+  "--slotted-control-gap-sm",
+  "--slotted-control-height-lg",
+  "--slotted-control-height-md",
+  "--slotted-control-height-sm",
+  "--slotted-control-icon-size-lg",
+  "--slotted-control-icon-size-md",
+  "--slotted-control-icon-size-sm",
+  "--slotted-control-inner-size-lg",
+  "--slotted-control-inner-size-md",
+  "--slotted-control-inner-size-sm",
+  "--slotted-control-padding-inline-lg",
+  "--slotted-control-padding-inline-md",
+  "--slotted-control-padding-inline-sm",
+  "--slotted-control-radius",
+  "--slotted-control-transition-duration",
+  "--slotted-control-transition-easing",
+  "--slotted-disabled-foreground",
+  "--slotted-duration-short",
+  "--slotted-easing-standard",
+  "--slotted-focus-ring-color",
+  "--slotted-focus-ring-width",
+  "--slotted-font-family-sans",
+  "--slotted-font-size-lg",
+  "--slotted-font-size-xs",
+  "--slotted-font-weight-medium",
+  "--slotted-font-weight-semibold",
+  "--slotted-line-height-md",
+  "--slotted-line-height-sm",
+  "--slotted-line-height-xs",
+  "--slotted-radius-lg",
+  "--slotted-radius-sm",
+  "--slotted-shadow-lg",
+  "--slotted-space-2",
+  "--slotted-space-3",
+  "--slotted-space-4",
+  "--slotted-space-6",
+  "--slotted-space-8",
+  "--slotted-surface-raised",
+  "--slotted-surface-sunken",
+  "--slotted-target-comfortable",
+  "--slotted-target-min",
+  "--slotted-text",
+  "--slotted-text-muted",
+  "--slotted-tone-accent-border",
+  "--slotted-tone-accent-surface",
+  "--slotted-tone-accent-text",
+  "--slotted-tone-secondary-subtle-active",
+  "--slotted-tone-secondary-subtle-hover"
+]

package/src/container/container.css

@@ -0,0 +1,198 @@
+@layer slotted.components {
+  /**
+   * Container bounds the inline size of a region, insets it from the edge of
+   * the space it was given, and places it inside that space. It paints
+   * nothing: a layout that carried a colour would be a surface, and a surface
+   * is another family's decision.
+   *
+   * The root lays three tracks — a start gutter, the bounded column, an end
+   * gutter — rather than setting a maximum on the box itself. The reason is
+   * the breakout: a child that has to reach both edges needs a track to span,
+   * and a box bounded by its own maximum has nothing to offer it. Inset for
+   * the same reason is a floor on the two gutters and never a pad on the box,
+   * because a pad would inset the breakout too.
+   *
+   * Every value travels through a private property so the three axes can be
+   * read against each other in one declaration instead of restating the
+   * template four times.
+   */
+  [data-ui='container'] {
+    --_max: var(--slotted-container-content, 56rem);
+    --_inset: var(--slotted-space-6, 1rem);
+    --_start-track: 1fr;
+    --_end-track: 1fr;
+
+    display: grid;
+    /**
+     * The column takes the smaller of its maximum and what is left after both
+     * gutters, so it collapses continuously as the container narrows. There is
+     * no breakpoint to be unstable around, and nothing to reflow.
+     */
+    grid-template-columns:
+      [full-start] minmax(var(--_inset), var(--_start-track))
+      [content-start] min(100% - 2 * var(--_inset), var(--_max))
+      [content-end] minmax(var(--_inset), var(--_end-track))
+      [full-end];
+    /**
+     * The maximum belongs to the column, so the box itself takes everything it
+     * is offered. Without this a container placed in a flex row would size to
+     * its content and bound nothing.
+     */
+    inline-size: 100%;
+  }
+
+  /**
+   * A grid item is at least as wide as its content unless it is told
+   * otherwise, so a single unbroken token — a URL, an identifier — would widen
+   * the track past its maximum and scroll the page sideways, which is the
+   * failure WCAG SC 1.4.10 names. The column holds; what to do with the
+   * overflow is the child's decision.
+   */
+  [data-ui='container'] > * {
+    grid-column: content;
+    min-inline-size: 0;
+  }
+
+  /**
+   * A child that leaves the bound behind and reaches both edges of the
+   * container: a table, a banner, a strip of media inside a page of prose.
+   * It answers the container rather than the viewport, so it is still correct
+   * nested, inside a scroll region, and in a container that does not fill the
+   * page — none of which the `50% - 50vw` recipe survives. Bounded content
+   * returns inside it by nesting another container.
+   */
+  [data-ui='container'] > [data-part='breakout'] {
+    grid-column: full;
+  }
+
+  /**
+   * The steps are named for what they bound. `sm`/`md`/`lg` is this library's
+   * word for control geometry, and a container's maximum is not that: it is
+   * chosen by what is inside it, and a letter hides the choice.
+   *
+   * `measure` is stated in characters because that is the unit a measure has.
+   * A maximum stated in pixels gets *longer* in characters when the reader
+   * enlarges the text, which is the opposite of what the bound is for; `ch`
+   * follows the inherited type and the reader's zoom. WCAG SC 1.4.8 caps a
+   * line at eighty characters, and `ch` is the advance of "0" — wider than the
+   * average glyph in a proportional face — so sixty-five of them land under
+   * that ceiling rather than over it.
+   *
+   * The two page steps state a literal because the foundation has no scale of
+   * widths: space stops at 4rem and is about separation, not extent. Three
+   * values read by one family is not a scale, so they stay family tokens.
+   */
+  [data-ui='container'][data-size='measure'] {
+    --_max: var(--slotted-container-measure, 65ch);
+  }
+
+  [data-ui='container'][data-size='content'] {
+    --_max: var(--slotted-container-content, 56rem);
+  }
+
+  [data-ui='container'][data-size='wide'] {
+    --_max: var(--slotted-container-wide, 80rem);
+  }
+
+  /**
+   * `full` is what the frame gives, up to a ceiling, and `bleed` is the
+   * absence of a ceiling. The names are that way round because the value
+   * written without thinking has to be the safe one: `full` is what a person
+   * types to mean "use the screen", and an application that typed it on every
+   * route was unreadable on an ultra-wide display — a line of text three
+   * thousand pixels long, a form whose label and field were a screen apart.
+   * 120rem is a 1920-pixel display, where `full` and `bleed` are the same
+   * picture; past it the content stops and centres.
+   *
+   * `bleed` keeps the old behaviour and has to be asked for by name: a data
+   * grid, a board, a canvas — content that is worth every pixel it is given,
+   * and reads better at three thousand pixels than at nineteen hundred.
+   * Neither removes the container: the gutters stay in both.
+   */
+  [data-ui='container'][data-size='full'] {
+    --_max: var(--slotted-container-full, 120rem);
+  }
+
+  [data-ui='container'][data-size='bleed'] {
+    --_max: 100%;
+  }
+
+  /**
+   * The inset is a step of the space scale the layout families take their gap
+   * from, so a page gutter and a stack gap are retuned by one theme decision.
+   * It does not answer density: how tightly controls are packed is not a
+   * composition decision, and a page frame that moved every time a table got
+   * denser would be the page reflowing for no reason.
+   */
+  [data-ui='container'][data-inset='0'] {
+    --_inset: 0px;
+  }
+
+  [data-ui='container'][data-inset='1'] {
+    --_inset: var(--slotted-space-1, 0.125rem);
+  }
+
+  [data-ui='container'][data-inset='2'] {
+    --_inset: var(--slotted-space-2, 0.25rem);
+  }
+
+  [data-ui='container'][data-inset='3'] {
+    --_inset: var(--slotted-space-3, 0.375rem);
+  }
+
+  [data-ui='container'][data-inset='4'] {
+    --_inset: var(--slotted-space-4, 0.5rem);
+  }
+
+  [data-ui='container'][data-inset='5'] {
+    --_inset: var(--slotted-space-5, 0.75rem);
+  }
+
+  [data-ui='container'][data-inset='6'] {
+    --_inset: var(--slotted-space-6, 1rem);
+  }
+
+  [data-ui='container'][data-inset='7'] {
+    --_inset: var(--slotted-space-7, 1.25rem);
+  }
+
+  [data-ui='container'][data-inset='8'] {
+    --_inset: var(--slotted-space-8, 1.5rem);
+  }
+
+  [data-ui='container'][data-inset='9'] {
+    --_inset: var(--slotted-space-9, 2rem);
+  }
+
+  [data-ui='container'][data-inset='10'] {
+    --_inset: var(--slotted-space-10, 2.5rem);
+  }
+
+  [data-ui='container'][data-inset='11'] {
+    --_inset: var(--slotted-space-11, 3rem);
+  }
+
+  [data-ui='container'][data-inset='12'] {
+    --_inset: var(--slotted-space-12, 4rem);
+  }
+
+  /**
+   * Where the column sits when there is spare space. It is expressed as the
+   * growth limit of a gutter: `1fr` takes a share of what is free, and the
+   * inset itself pins a gutter to its floor. Track order follows the writing
+   * direction, so a right-to-left document is the same component mirrored
+   * rather than a second stylesheet.
+   */
+  [data-ui='container'][data-align='center'] {
+    --_start-track: 1fr;
+    --_end-track: 1fr;
+  }
+
+  [data-ui='container'][data-align='start'] {
+    --_start-track: var(--_inset);
+  }
+
+  [data-ui='container'][data-align='end'] {
+    --_end-track: var(--_inset);
+  }
+}

package/src/container/container.tokens.json

@@ -0,0 +1,18 @@
+[
+  "--slotted-container-content",
+  "--slotted-container-full",
+  "--slotted-container-measure",
+  "--slotted-container-wide",
+  "--slotted-space-1",
+  "--slotted-space-10",
+  "--slotted-space-11",
+  "--slotted-space-12",
+  "--slotted-space-2",
+  "--slotted-space-3",
+  "--slotted-space-4",
+  "--slotted-space-5",
+  "--slotted-space-6",
+  "--slotted-space-7",
+  "--slotted-space-8",
+  "--slotted-space-9"
+]

package/src/context-menu/context-menu.css

@@ -0,0 +1,104 @@
+@layer slotted.components {
+  /**
+   * The target of a context menu: the region the reader presses with the
+   * secondary button, holds on a touch screen, or opens with `Shift+F10`.
+   *
+   *   ┌─ root ─ the target ─ data-open ─ data-pressed ──────────────┐
+   *   │  the consumer's content: a row, a card, a canvas             │
+   *   └──────────────────────────────────────────────────────────────┘
+   *           ┌─ [data-ui='menu'] ─ unchanged ─┐  ← anchored to the point
+   *
+   * The family owns this one part and no surface: the menu that opens is
+   * `menu`, imported as it is, the way `menubar` holds it. Radix's context menu
+   * re-exports sixteen parts its dropdown already has, and two copies of one
+   * machine drift.
+   *
+   * ── Why the target paints nothing at rest ────────────────────────────
+   *
+   * Its content is the consumer's. A wash on hover would claim a row that
+   * `table` already paints; a ground would fight the card it wraps. What the
+   * stylesheet owns is the three moments the family adds to the region: the
+   * long press, the open menu, and the browser's own menu taking over.
+   */
+  [data-ui='context-menu'] {
+    /* The mark Finder and Explorer leave on the row whose menu is showing:
+       one line, inward, in the colour that separates two surfaces. A consumer
+       whose target already shows its selection sets the width to `0`. */
+    --_mark-width: var(--slotted-context-menu-mark-width, var(--slotted-border-width-thin, 1px));
+    --_mark-color: var(--slotted-context-menu-mark-color, var(--slotted-border-strong, CanvasText));
+  }
+
+  /**
+   * On a coarse pointer a long press on a link or an image inside the target
+   * raises the platform's own callout — the sheet iOS draws with "Open" and
+   * "Copy" — over the family's menu. It is turned off for the whole target
+   * rather than only during the press, because the callout is decided by the
+   * platform at `touchstart`, before any state the family writes could apply.
+   */
+  @media (pointer: coarse) {
+    [data-ui='context-menu'] {
+      -webkit-touch-callout: none;
+    }
+  }
+
+  /**
+   * While a long press is running the press must not become a text selection,
+   * which is what a held finger otherwise starts at the same moment. Only
+   * then: a target that is text stays selectable at rest, and a mouse never
+   * sets the state at all.
+   */
+  [data-ui='context-menu'][data-pressed] {
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  /**
+   * The open mark is a pseudo-element laid over the whole target rather than a
+   * shadow on the target's own box: the region's content — a card with a
+   * ground of its own, a row's cells — paints over the target's background,
+   * and an inset shadow drawn there showed only at the corners the content's
+   * radius left uncovered. Laid on top, the mark takes no room, follows the
+   * target's own corner through `border-radius: inherit`, and lets every press
+   * through. It is not an outline, because an outline in this library is the
+   * focus ring and nothing else (`focus-ring.test.mjs`).
+   *
+   * The target is positioned so the overlay has a box to fill. It is
+   * positioned at rest rather than only while open, so nothing inside the
+   * region moves at the moment the menu appears.
+   */
+  [data-ui='context-menu'] {
+    position: relative;
+  }
+
+  [data-ui='context-menu']::after {
+    border-radius: inherit;
+    box-shadow: inset 0 0 0 var(--_mark-width) transparent;
+    content: '';
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
+    transition: box-shadow var(--slotted-duration-short) var(--slotted-easing-standard);
+  }
+
+  [data-ui='context-menu'][data-open]::after {
+    box-shadow: inset 0 0 0 var(--_mark-width) var(--_mark-color);
+  }
+
+  /**
+   * A target the consumer made focusable — a row with roving focus, a tile with
+   * `tabindex` — takes the foundation ring, so `Shift+F10` is pressed on a
+   * region the reader can see they are on. The open mark is gone by the time
+   * focus returns, so the two are never drawn together.
+   */
+  [data-ui='context-menu']:focus-visible {
+    outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
+    outline-offset: var(--slotted-focus-ring-offset, 2px);
+  }
+
+  /**
+   * `disabled` means the browser's own menu is the one that opens, and the
+   * family writes nothing: a region that looks disabled while its content
+   * still works would say the wrong thing. The state is in the DOM for a
+   * consumer who wants to say it.
+   */
+}

package/src/context-menu/context-menu.tokens.json

@@ -0,0 +1,11 @@
+[
+  "--slotted-border-strong",
+  "--slotted-border-width-thin",
+  "--slotted-context-menu-mark-color",
+  "--slotted-context-menu-mark-width",
+  "--slotted-duration-short",
+  "--slotted-easing-standard",
+  "--slotted-focus-ring-color",
+  "--slotted-focus-ring-offset",
+  "--slotted-focus-ring-width"
+]