@smwb/ui-styles 1.6.0 → 2.0.0

package/less/components/commandPalette/commandPalette.less

@@ -0,0 +1,233 @@
+// The ⌘K palette. It is a Modal, so its box is overridden through a
+// three-class selector: `.smwb-modal.smwb-medium` is (0,2,0), and which of two
+// equal-specificity sheets wins differs between a Storybook dev server and a
+// build, so a two-class rule would only win by luck.
+.smwb-modal__overlay > .smwb-modal.smwb-command-palette {
+  width: @commandPaletteWidth;
+  height: auto;
+  min-height: 0;
+  max-height: @commandPaletteMaxHeight;
+  // The results box scrolls, not the dialog, so the footer stays put.
+  overflow: hidden;
+  padding: 0;
+  // Modal's own radius. Its small-screen rule zeroes it for a full-bleed dialog;
+  // the palette keeps side gutters there instead, so it keeps the corners too.
+  border-radius: @modalBorderRadius;
+  // A cross-axis auto margin beats the overlay's `align-items: center`, which is
+  // what puts the palette near the top instead of in the middle.
+  margin-block: @commandPaletteTopOffset auto;
+
+  @media (max-width: 600px) {
+    margin-block-start: @smui-space-lg;
+  }
+}
+
+.smwb-command-palette {
+  &__panel {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+  }
+
+  &__search {
+    display: flex;
+    align-items: center;
+    gap: @smui-space-sm;
+    padding: @smui-space-md @smui-space-lg;
+    border-bottom: 1px solid var(--smui-dividerColor);
+  }
+
+  &__search-icon {
+    display: inline-flex;
+    flex-shrink: 0;
+    color: var(--smui-onSurfaceVariant);
+  }
+
+  // The caret is a text field's focus indicator, so the box draws no ring of its
+  // own (normalize.css removes the browser's outline anyway).
+  &__input {
+    flex: 1;
+    min-width: 0;
+    border: 0;
+    background: transparent;
+    font: inherit;
+    font-size: 1rem;
+    line-height: 1.5;
+    color: var(--smui-onSurfaceColor);
+    outline: none;
+
+    &::placeholder {
+      color: var(--smui-onSurfaceVariant);
+      opacity: 1; // the UA grey would stay light in the dark theme
+    }
+  }
+
+  &__results {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    overscroll-behavior: contain; // a palette over a page does not scroll it
+    padding: @smui-space-xs 0;
+  }
+
+  &__listbox,
+  &__group-options {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  // As SelectField's group label, so a grouped list reads the same in both.
+  &__group-label {
+    padding: @smui-space-sm @smui-space-lg @smui-space-xs;
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--smui-onSurfaceVariant);
+  }
+
+  &__item {
+    position: relative; // holds the state layer
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    align-items: center;
+    gap: @smui-space-md;
+    min-height: @commandPaletteItemMinHeight;
+    padding: @smui-space-xs @smui-space-lg;
+    margin: 0 @smui-space-xs;
+    border-radius: @commandPaletteItemRadius;
+    cursor: pointer;
+    color: var(--smui-onSurfaceColor);
+
+    &::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      background: currentColor;
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    &:hover:not(&_active):not(&_disabled)::before {
+      opacity: @commandPaletteHoverLayerOpacity;
+    }
+
+    // The option the keys are on. Focus stays in the field, which points here
+    // with aria-activedescendant, so this row draws the library's ring inside
+    // itself: a scrolling results box would clip an outside one. The state layer
+    // is not an indicator on its own (1.29:1 against a plain row) and forced
+    // colours flatten it to Canvas, hence the outline.
+    &_active {
+      outline: 2px solid var(--smui-primaryColor);
+      outline-offset: -2px;
+
+      &::before {
+        opacity: @commandPaletteActiveLayerOpacity;
+      }
+
+      @media (forced-colors: active) {
+        outline-color: Highlight;
+      }
+    }
+
+    &_disabled {
+      color: var(--smui-disabledTextColor);
+      cursor: default;
+    }
+  }
+
+  &__item-icon {
+    grid-column: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: @commandPaletteIconSize;
+    height: @commandPaletteIconSize;
+    color: var(--smui-onSurfaceVariant);
+  }
+
+  &__item-text {
+    grid-column: 2;
+    min-width: 0; // lets the two lines ellipsis instead of widening the track
+  }
+
+  // With no icon the text takes the icon's column as well, so a row without one
+  // is not indented against an empty gutter. A browser without :has() drops the
+  // rule and keeps the text in column 2, which the empty `auto` track collapses.
+  &__item:not(:has(> .smwb-command-palette__item-icon)) > .smwb-command-palette__item-text {
+    grid-column: 1 / 3;
+  }
+
+  &__item-label {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__item-subtitle {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 0.8125rem;
+    color: var(--smui-onSurfaceVariant);
+  }
+
+  // Two classes: Kbd sets `font-size: inherit` at the same specificity, and in
+  // Storybook the per-component sheets can land in either order.
+  &__item-shortcut.smwb-kbd {
+    grid-column: 3;
+    font-size: 0.75rem;
+    color: var(--smui-onSurfaceVariant);
+  }
+
+  // The rows a pending search draws in place of results. Skeleton is already
+  // aria-hidden, and the item grid keeps the widths the real rows will have, so
+  // the list does not reflow when the answer lands. No hover layer: nothing here
+  // can be chosen.
+  &__loading-row {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    align-items: center;
+    gap: @smui-space-md;
+    min-height: @commandPaletteItemMinHeight;
+    padding: @smui-space-xs @smui-space-lg;
+    margin: 0 @smui-space-xs;
+  }
+
+  &__message {
+    padding: @smui-space-lg @smui-space-xl;
+    text-align: center;
+    color: var(--smui-onSurfaceVariant);
+
+    &_error {
+      color: var(--smui-errorColor);
+    }
+  }
+
+  &__footer {
+    display: flex;
+    align-items: center;
+    gap: @smui-space-md;
+    padding: @smui-space-sm @smui-space-lg;
+    border-top: 1px solid var(--smui-dividerColor);
+    font-size: 0.75rem;
+    color: var(--smui-onSurfaceVariant);
+  }
+
+  // The polite live region. A screen reader ignores one outside an aria-modal
+  // dialog, so it lives inside the palette and is hidden from sight only. With
+  // no inset it stays at its static position, out of flow.
+  &__status {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+}

package/less/components/composer/composer.entry.less

@@ -0,0 +1,2 @@
+@import (reference) "../../_prelude.less";
+@import "./composer.less";

package/less/components/composer/composer.less

@@ -0,0 +1,294 @@
+@import "./composer.variables.less";
+
+// The textarea and its mirror (.smwb-composer__field::after) must share these,
+// or the auto-grown height drifts from the text.
+.smwb-composer-text() {
+  box-sizing: border-box;
+  margin: 0;
+  border: 0;
+  padding: @composerFieldPaddingY @composerFieldPaddingX;
+  font: inherit;
+  letter-spacing: inherit;
+  line-height: @composerLineHeight;
+  overflow-wrap: anywhere;
+  // The height of N rows of text, with the text's own padding.
+  min-height: ~"calc(var(--smwb-composer-min-rows, 1) * @{composerLineHeight} + 2 * @{composerFieldPaddingY})";
+  max-height: ~"calc(var(--smwb-composer-max-rows, 8) * @{composerLineHeight} + 2 * @{composerFieldPaddingY})";
+}
+
+// A task input: a growing textarea with an attach button, a toolbar slot, a
+// counter and a send/stop button. The children are flat; grid areas place them
+// for each layout. An absent child leaves its area empty, and the spacing is
+// margins, not gaps, so an empty track adds none.
+.smwb-composer {
+  position: relative;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto auto;
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  padding: @composerPadding;
+  // Focus (below) paints the second pixel of the border inside, so the layout
+  // does not shift.
+  border: 1px solid @composerBorder;
+  border-radius: @composerRadius;
+  background-color: @composerBg;
+  color: @composerText;
+
+  &__attachments {
+    grid-area: attachments;
+    min-width: 0;
+    margin-bottom: @composerGap;
+  }
+
+  &__field {
+    grid-area: field;
+    display: grid;
+    min-width: 0;
+
+    // The mirror: the text plus a trailing space (so a final newline counts a
+    // line) in the same box as the textarea. It sizes the grid cell, and the
+    // textarea fills it, so the field grows with the text up to max-height.
+    &::after {
+      .smwb-composer-text();
+      content: attr(data-value) " ";
+      grid-area: 1 / 1;
+      visibility: hidden;
+      pointer-events: none;
+      white-space: pre-wrap;
+      overflow: hidden;
+    }
+  }
+
+  &__input {
+    .smwb-composer-text();
+    grid-area: 1 / 1;
+    display: block;
+    width: 100%;
+    resize: none;
+    overflow-y: auto;
+    outline: 0;
+    background: transparent;
+    color: @composerText;
+    caret-color: @composerText;
+
+    &::placeholder {
+      // The UA grey stays light in the dark theme.
+      color: @composerPlaceholder;
+      opacity: 1;
+    }
+  }
+
+  &__icon-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    flex: none;
+    width: @composerIconButtonSize;
+    height: @composerIconButtonSize;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    border-radius: @smui-radius-circle;
+    background-color: transparent;
+    color: @composerText;
+    font: inherit;
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
+    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+
+    &:hover:not(:disabled):not([aria-disabled="true"]) {
+      background-color: var(--smui-onSurfaceHover);
+    }
+
+    &:active:not(:disabled):not([aria-disabled="true"]) {
+      background-color: var(--smui-onSurfaceActive);
+    }
+
+    // normalize.css removes outlines, so each focusable draws its own ring.
+    &:focus-visible {
+      outline: 2px solid @composerBorderFocus;
+      outline-offset: 2px;
+    }
+
+    &:disabled {
+      cursor: default;
+      pointer-events: none;
+    }
+  }
+
+  &__attach {
+    grid-area: attach;
+    color: @composerCounter;
+  }
+
+  &__toolbar {
+    grid-area: toolbar;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: @composerGap;
+    min-width: 0;
+  }
+
+  // The toolbar follows the attach button.
+  &__attach ~ &__toolbar {
+    margin-inline-start: @composerGap;
+  }
+
+  &__counter {
+    grid-area: counter;
+    margin-inline-start: @composerGap;
+    color: @composerCounter;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+
+    &_error {
+      color: @composerCounterError;
+      font-weight: 500;
+    }
+  }
+
+  &__action {
+    grid-area: action;
+    margin-inline-start: @composerGap;
+
+    // Send is available: filled.
+    &:not([aria-disabled="true"]):not(:disabled) {
+      background-color: @composerActionBg;
+      color: @composerActionColor;
+
+      &:hover {
+        background-color: ~"color-mix(in srgb, @{composerActionColor} 12%, @{composerActionBg})";
+      }
+
+      &:active {
+        background-color: ~"color-mix(in srgb, @{composerActionColor} 20%, @{composerActionBg})";
+      }
+    }
+
+    // Send is unavailable (empty text, over the limit, no handler): muted. The
+    // button is not natively disabled, so it keeps focus.
+    &[aria-disabled="true"],
+    &:disabled {
+      background-color: var(--smui-disabledBgColor);
+      color: var(--smui-disabledTextColor);
+      cursor: default;
+    }
+
+    // Stop: the agent is busy.
+    &_stop:not([aria-disabled="true"]):not(:disabled) {
+      background-color: @composerStopBg;
+      color: @composerStopColor;
+
+      &:hover {
+        background-color: @composerStopBg;
+        opacity: 0.88;
+      }
+
+      &:active {
+        background-color: @composerStopBg;
+        opacity: 0.76;
+      }
+    }
+  }
+
+  // The live region for the counter: read by screen readers, never drawn.
+  &__status {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    border: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  // ---- Layouts ----
+  // stacked: the field on top; a bar under it (attach, toolbar, counter, action).
+  &_stacked {
+    grid-template-areas:
+      "attachments attachments attachments attachments"
+      "field field field field"
+      "attach toolbar counter action";
+
+    .smwb-composer__field {
+      margin-bottom: @composerGap;
+    }
+
+    .smwb-composer__action {
+      justify-self: end;
+    }
+  }
+
+  // inline: one row (attach, field, counter, action); the toolbar, if any, under it.
+  &_inline {
+    grid-template-areas:
+      "attachments attachments attachments attachments"
+      "attach field counter action"
+      "toolbar toolbar toolbar toolbar";
+    // Buttons stay at the bottom edge as the field grows.
+    align-items: end;
+
+    .smwb-composer__toolbar {
+      margin-top: @composerGap;
+    }
+
+    .smwb-composer__counter {
+      // On the bottom row of text, level with the action.
+      align-self: end;
+      padding-bottom: ~"calc((@{composerIconButtonSize} - 1rem) / 2)";
+    }
+
+    .smwb-composer__attach ~ .smwb-composer__toolbar {
+      margin-inline-start: 0;
+    }
+  }
+
+  // ---- States ----
+  // Set from the textarea's focus, not :focus-within: the chips in the toolbar
+  // have rings of their own.
+  &_focused {
+    border-color: @composerBorderFocus;
+    box-shadow: inset 0 0 0 1px @composerBorderFocus;
+  }
+
+  &_drag-active {
+    border-style: dashed;
+    border-color: @composerBorderFocus;
+    background-color: @composerDragBg;
+  }
+
+  &_disabled {
+    opacity: 0.6;
+    cursor: default;
+  }
+
+  &_over-limit:not(.smwb-composer_focused) {
+    border-color: @composerCounterError;
+  }
+
+  @media (forced-colors: active) {
+    &_focused {
+      outline: 2px solid Highlight;
+      outline-offset: -2px;
+    }
+
+    &__action:not([aria-disabled="true"]):not(:disabled) {
+      border: 1px solid ButtonText;
+    }
+
+    // The UA greys a native disabled control; an unavailable Send is aria-disabled, so it needs the same grey.
+    &__action[aria-disabled="true"],
+    &__action:disabled {
+      color: GrayText;
+    }
+  }
+}

package/less/components/composer/composer.variables.less

@@ -0,0 +1,10 @@
+@composerPadding: @smui-space-sm;
+@composerGap: @smui-space-xs;
+@composerRadius: @smui-radius-lg;
+// One text line. The textarea and its mirror share it, so their heights agree.
+@composerLineHeight: 1.5rem;
+// The text's own padding inside the field; with one line, 24px + 2 * 6px = 36px,
+// the height of an icon button.
+@composerFieldPaddingY: 6px;
+@composerFieldPaddingX: @smui-space-sm;
+@composerIconButtonSize: 36px;

package/less/components/diffStat/diffStat.entry.less

@@ -0,0 +1,2 @@
+@import (reference) "../../_prelude.less";
+@import "./diffStat.less";

package/less/components/diffStat/diffStat.less

@@ -0,0 +1,76 @@
+// The size of a change: "+N −M" (a U+2212 minus, not a hyphen), with an optional
+// five-cell bar of the same proportions.
+//
+// Both the figures and their cells take the theme's success and error pulled
+// @diffStatColorMix toward the surface ink. The raw tokens measure 3.89:1 (light)
+// and 4.12–4.14:1 (dark) against the page — under the 4.5:1 text of this size
+// needs — while the mix comes out 5.42:1 at worst across both themes and both
+// backgrounds, and still clears the 3:1 a cell needs against a neutral one
+// (WCAG 1.4.3 and 1.4.11). A cell nobody owns is an outline, not a fill: the surface
+// ink mixed @diffStatNeutralMix into transparent measures 3.69:1 at worst (the material
+// and summer light themes), 4.12:1 or better in the default light theme against the page
+// and the surface and 5.4:1 or better in the dark ones, so "4 of 5" never looks like "5 of 5"; the tint
+// the old track fill gave was 1.29:1 (default) and 1.08:1 (summer) against the page.
+// No colour is written here: the ink is the theme's, so the dark theme follows on its own.
+.smwb-diff-stat {
+  --smwb-diff-stat-added: ~"color-mix(in srgb, var(--smui-successColor) @{diffStatColorMix}, var(--smui-onSurfaceColor))";
+  --smwb-diff-stat-removed: ~"color-mix(in srgb, var(--smui-errorColor) @{diffStatColorMix}, var(--smui-onSurfaceColor))";
+  --smwb-diff-stat-neutral: ~"color-mix(in srgb, var(--smui-onSurfaceColor) @{diffStatNeutralMix}, transparent)";
+
+  display: inline-flex;
+  align-items: center;
+  gap: @diffStatGap;
+  min-width: 0;
+  font-size: @diffStatFontSize;
+  line-height: 1.4;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+
+  &__text {
+    display: inline-flex;
+    gap: @diffStatSignGap;
+    font-weight: 600;
+  }
+
+  &__added {
+    color: var(--smwb-diff-stat-added);
+  }
+
+  &__removed {
+    color: var(--smwb-diff-stat-removed);
+  }
+
+  &__bar {
+    display: inline-flex;
+    align-items: center;
+    gap: @diffStatCellGap;
+  }
+
+  &__cell {
+    width: @diffStatCellWidth;
+    height: @diffStatCellHeight;
+    border-radius: @diffStatCellRadius;
+    // A border rather than a shadow, so the outline survives forced colours.
+    border: 1px solid var(--smwb-diff-stat-neutral);
+    box-sizing: border-box;
+  }
+
+  &__cell_added {
+    border-color: var(--smwb-diff-stat-added);
+    background-color: var(--smwb-diff-stat-added);
+  }
+
+  &__cell_removed {
+    border-color: var(--smwb-diff-stat-removed);
+    background-color: var(--smwb-diff-stat-removed);
+  }
+
+  // A tab label: the figures shrink and the cells with them.
+  &_compact {
+    font-size: @diffStatCompactFontSize;
+
+    .smwb-diff-stat__cell {
+      height: @diffStatCompactCellHeight;
+    }
+  }
+}

package/less/components/kbd/kbd.entry.less

@@ -0,0 +1,2 @@
+@import (reference) "../../_prelude.less";
+@import "./kbd.less";

package/less/components/kbd/kbd.less

@@ -0,0 +1,55 @@
+// A keyboard shortcut: one small key cap per key. Everything is drawn from
+// currentColor, so the same caps sit on a menu item, on the dark tooltip and in
+// dark mode alike.
+.smwb-kbd {
+  position: relative; // holds the visually hidden text
+  display: inline-flex;
+  align-items: center;
+  gap: @kbdGap;
+  flex-shrink: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: 1;
+  white-space: nowrap;
+
+  &__key {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: @kbdKeyMinSize;
+    height: @kbdKeyMinSize;
+    padding: 0 @kbdKeyPaddingX;
+    border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
+    border-radius: @kbdKeyRadius;
+    background-color: color-mix(in srgb, currentColor 10%, transparent);
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: 500;
+    line-height: 1;
+    color: inherit;
+    user-select: none; // the caps repeat the hidden text: copy and find see the shortcut once
+
+    @media (forced-colors: active) {
+      border-color: currentColor;
+    }
+  }
+
+  &__separator {
+    opacity: 0.7;
+    user-select: none;
+  }
+
+  // The text assistive technology reads instead of the key caps.
+  &__text {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+    border: 0;
+  }
+}