@smwb/ui-styles 1.5.1 → 2.0.0

package/less/components/dagView/dagView.less

@@ -0,0 +1,280 @@
+// Emits --smwb-dag-view-<name> from @dagView<Var><suffix> (suffix "" or "Dark").
+// A variable that is `false` (the dark defaults) emits nothing, so the light
+// value, a runtime token that follows the theme, stays in force.
+.smwb-dag-view-token(@name; @var; @suffix) {
+  @full: ~"dagView@{var}@{suffix}";
+  .smwb-dag-view-token-value(@name; @@full);
+}
+.smwb-dag-view-token-value(@name; @value) when not (@value = false) {
+  --smwb-dag-view-@{name}: @value;
+}
+.smwb-dag-view-tokens(@suffix) {
+  .smwb-dag-view-token(node-bg; NodeBg; @suffix);
+  .smwb-dag-view-token(node-border; NodeBorder; @suffix);
+  .smwb-dag-view-token(edge-color; EdgeColor; @suffix);
+  .smwb-dag-view-token(edge-active-color; EdgeActiveColor; @suffix);
+  .smwb-dag-view-token(selected-ring; SelectedRing; @suffix);
+  .smwb-dag-view-token(status-idle; StatusIdle; @suffix);
+  .smwb-dag-view-token(status-pending; StatusPending; @suffix);
+  .smwb-dag-view-token(status-running; StatusRunning; @suffix);
+  .smwb-dag-view-token(status-success; StatusSuccess; @suffix);
+  .smwb-dag-view-token(status-warning; StatusWarning; @suffix);
+  .smwb-dag-view-token(status-error; StatusError; @suffix);
+  .smwb-dag-view-token(status-skipped; StatusSkipped; @suffix);
+}
+// A built-in status: its accent, unless the node sets its own.
+.smwb-dag-view-status(@status) {
+  @accent: ~"var(--smwb-dag-view-node-accent, var(--smwb-dag-view-status-@{status}))";
+  &[data-status="@{status}"] {
+    --smwb-dag-view-accent: @accent;
+  }
+}
+
+// A dependency graph: a viewport that clips a "world" moved and scaled by one
+// transform; in the world, an SVG layer of edges under absolutely placed nodes.
+.smwb-dag-view {
+  .smwb-dag-view-tokens("");
+  --smwb-dag-view-dim-opacity: @dagViewDimOpacity;
+
+  position: relative;
+  width: 100%;
+  // The default height; the `height` prop or a height in `style` wins.
+  height: @dagViewHeight;
+  min-width: 0;
+  box-sizing: border-box;
+  // clip, not hidden: a focused node off screen must not scroll the viewport
+  // (the view moves by its transform), and a clipping box is no Tab stop.
+  overflow: hidden;
+  overflow: clip;
+  border: 1px solid var(--smui-dividerColor);
+  border-radius: @smui-radius-lg;
+  background-color: color-mix(in srgb, var(--smui-onSurfaceColor) 2%, var(--smui-surfaceBackground));
+  color: var(--smui-onSurfaceColor);
+  // The graph takes every touch gesture, and a wheel turn does not reach the page.
+  touch-action: none;
+  overscroll-behavior: contain;
+  user-select: none;
+  -webkit-user-select: none;
+  cursor: grab;
+
+  &[data-interacting] {
+    cursor: grabbing;
+  }
+
+  &__world {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform-origin: 0 0;
+  }
+
+  // Only during a gesture: at rest it would blur the text.
+  &[data-interacting] &__world {
+    will-change: transform;
+  }
+
+  &__edges {
+    position: absolute;
+    top: 0;
+    left: 0;
+    overflow: visible;
+    pointer-events: none;
+  }
+
+  &__edge {
+    fill: none;
+    stroke: var(--smwb-dag-view-edge-color);
+    stroke-width: 1.5px;
+    transition:
+      stroke 0.12s,
+      opacity 0.12s;
+  }
+
+  &__edge--active {
+    stroke: var(--smwb-dag-view-edge-active-color);
+    stroke-width: 2.5px;
+  }
+
+  // An edge that closes a cycle, drawn against the flow.
+  &__edge--reversed {
+    stroke-dasharray: 6 4;
+  }
+
+  &__edge--dimmed {
+    opacity: var(--smwb-dag-view-dim-opacity);
+  }
+
+  &__arrow {
+    fill: var(--smwb-dag-view-edge-color);
+  }
+
+  &__arrow--active {
+    fill: var(--smwb-dag-view-edge-active-color);
+  }
+
+  &__node {
+    --smwb-dag-view-accent: var(--smwb-dag-view-node-accent, var(--smwb-dag-view-status-idle));
+    .smwb-dag-view-status(pending);
+    .smwb-dag-view-status(running);
+    .smwb-dag-view-status(success);
+    .smwb-dag-view-status(warning);
+    .smwb-dag-view-status(error);
+    .smwb-dag-view-status(skipped);
+
+    position: absolute;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    gap: @smui-space-sm;
+    padding: 0 @smui-space-md 0 10px;
+    border: 1px solid var(--smwb-dag-view-node-border);
+    // The status stripe.
+    border-left: 4px solid var(--smwb-dag-view-accent);
+    border-radius: @smui-radius-md;
+    background-color: var(--smwb-dag-view-node-bg);
+    color: var(--smui-onSurfaceColor);
+    font-size: 0.875rem;
+    line-height: 1.3;
+    overflow: hidden;
+    contain: layout paint;
+    cursor: pointer;
+    transition:
+      box-shadow 0.12s,
+      border-color 0.12s,
+      opacity 0.12s;
+
+    &:hover {
+      border-color: color-mix(in srgb, var(--smwb-dag-view-edge-active-color) 45%, var(--smwb-dag-view-node-border));
+      border-left-color: var(--smwb-dag-view-accent);
+    }
+
+    // normalize.css takes the outline off :focus; the keyboard gets a ring here.
+    &:focus-visible {
+      outline: 2px solid var(--smui-primaryColor);
+      outline-offset: 2px;
+    }
+  }
+
+  &__node--selected {
+    box-shadow: 0 0 0 2px var(--smwb-dag-view-selected-ring);
+  }
+
+  &__node--upstream,
+  &__node--downstream {
+    border-color: var(--smwb-dag-view-edge-active-color);
+    border-left-color: var(--smwb-dag-view-accent);
+  }
+
+  &__node--dimmed {
+    opacity: var(--smwb-dag-view-dim-opacity);
+  }
+
+  &__node--disabled {
+    cursor: default;
+    color: var(--smui-disabledTextColor);
+  }
+
+  &__dot {
+    flex-shrink: 0;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: var(--smwb-dag-view-accent);
+  }
+
+  &__label {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    font-weight: 500;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__status {
+    flex-shrink: 0;
+    font-size: 0.75rem;
+    color: var(--smui-onSurfaceVariant);
+  }
+
+  // Zoomed far out the status words (and any content marked __detail) give
+  // way, so the boxes stay readable.
+  &[data-zoom="far"] &__status,
+  &[data-zoom="far"] &__detail {
+    display: none;
+  }
+
+  // The graph in words, for screen readers only.
+  &__summary {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  &__controls {
+    position: absolute;
+    right: @smui-space-sm;
+    bottom: @smui-space-sm;
+    display: flex;
+    flex-direction: column;
+    gap: @smui-space-xs;
+    cursor: default;
+  }
+
+  &__control {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    border: 1px solid var(--smui-dividerColor);
+    border-radius: @smui-radius-md;
+    background-color: var(--smui-surfaceBackground);
+    color: var(--smui-onSurfaceVariant);
+    cursor: pointer;
+
+    svg {
+      width: 18px;
+      height: 18px;
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 2;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+
+    &:hover {
+      background-color: color-mix(in srgb, var(--smui-onSurfaceColor) 8%, var(--smui-surfaceBackground));
+      color: var(--smui-onSurfaceColor);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--smui-primaryColor);
+      outline-offset: 2px;
+    }
+  }
+}
+
+:root[data-theme="dark"] .smwb-dag-view {
+  .smwb-dag-view-tokens("Dark");
+}
+
+// A running node's dot pulses, unless motion is reduced.
+@media (prefers-reduced-motion: no-preference) {
+  .smwb-dag-view__node[data-status="running"] .smwb-dag-view__dot {
+    animation: smwb-dag-view-pulse 1.4s ease-in-out infinite;
+  }
+}
+
+@keyframes smwb-dag-view-pulse {
+  50% {
+    opacity: 0.35;
+  }
+}

package/less/components/descriptionList/descriptionList.less

@@ -39,7 +39,13 @@
   }
 
   // auto: the list is its own query container, so its width — not the
-  // window's — decides when the pairs stack.
+  // window's — decides when the pairs stack. A container's content does not
+  // count toward its width, so where the parent takes its width from its
+  // content (a flex item that does not grow, a popover, a table cell) the list
+  // has none: it needs a width there, or "row" / "stacked". A fallback width
+  // (contain-intrinsic-inline-size) would also become the list's min-content
+  // width, and a card holding the list in a 1fr grid column or a flex: 1 item
+  // could no longer shrink below it.
   &_auto {
     container: smwb-description-list / inline-size;
   }

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;
+  }
+}

package/less/components/list/list.less

@@ -75,6 +75,45 @@
     padding-bottom: @smui-space-xs;
   }
 
+  // A row that is a link: the anchor takes the padding, so the whole row is the link.
+  &__item.smwb-list__item_link,
+  &_dense &__item.smwb-list__item_link {
+    padding: 0;
+    gap: 0;
+  }
+
+  // The end adornment sits beside the anchor, which has its own right padding: no end adornment, no part.
+  &__item_link > &__item__end {
+    padding-right: @smui-space-lg;
+    &:empty {
+      display: none;
+    }
+  }
+
+  &__item__link {
+    display: flex;
+    align-items: center;
+    align-self: stretch;
+    flex: auto;
+    min-width: 0;
+    min-height: inherit;
+    box-sizing: border-box;
+    gap: @listItemGap;
+    padding: @listItemPadding;
+    color: inherit;
+    text-decoration: none;
+    &:focus-visible {
+      outline: 2px solid var(--smui-primaryColor);
+      outline-offset: -2px;
+    }
+  }
+
+  &_dense &__item__link,
+  &__item_dense > &__item__link {
+    padding-top: @smui-space-xs;
+    padding-bottom: @smui-space-xs;
+  }
+
   &__subheader {
     padding: @smui-space-sm @smui-space-lg;
     color: var(--smui-onSurfaceVariant);

package/less/components/menu/menu.less

@@ -28,7 +28,9 @@
     white-space: nowrap;
     height: 48px;
 
-    &:not(&--selected):not(:active) {
+    // A select's option the keys are on (aria-activedescendant, no DOM focus) keeps
+    // the focus layer under the pointer too, as a focused item does.
+    &:not(&--selected):not(:active):not(:focus-visible):not(.smwb-select-field__option--active) {
       &:hover {
         &:before {
           opacity: @menuOpacityHover;
@@ -61,6 +63,23 @@
       }
     }
 
+    // Keyboard focus: the focus state layer, over hover and the selected shade, and the
+    // library's ring, inside the item so that neither the menu's edge nor a scrolling menu
+    // clips it. normalize.css removes the browser's own ring.
+    &:focus-visible {
+      outline: 2px solid var(--smui-primaryColor);
+      outline-offset: -2px;
+
+      &:before {
+        opacity: @menuOpacityFocus;
+      }
+    }
+
+    // An item with `href` takes focus a second time, on its link, which fills the item.
+    &:has(> &-inner:focus-visible):before {
+      opacity: @menuOpacityFocus;
+    }
+
     &:active {
       &:before {
         opacity: @menuOpacityActive;
@@ -75,6 +94,11 @@
     height: 100%;
     color: currentColor;
     gap: @menuItemGap;
+
+    &:focus-visible {
+      outline: 2px solid var(--smui-primaryColor);
+      outline-offset: -2px;
+    }
   }
 
   &__text {

package/less/components/personChip/personChip.less

@@ -10,8 +10,10 @@
   color: inherit;
   text-decoration: none;
 
-  // The derived colours are mid-dark in both themes: white initials read on all of them.
-  &__avatar {
+  // The derived colours are mid-dark in both themes: white initials read on all
+  // of them. Two classes: the avatar's own colour rule (--smui-onPrimaryColor,
+  // dark in the dark theme) must not win on stylesheet order.
+  .smwb-avatar&__avatar {
     flex-shrink: 0;
     color: #fff;
   }

package/less/components/qrCode/qrCode.entry.less

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

package/less/components/qrCode/qrCode.less

@@ -0,0 +1,35 @@
+// A QR code of a value: an SVG image with dark modules on a white square — the quiet
+// zone is part of the square, so the code scans on a dark page. The colours are fixed,
+// never theme tokens, so no theme can invert the code; only the caption is themed.
+.smwb-qr-code {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: @smui-space-sm;
+  margin: 0;
+}
+
+.smwb-qr-code__image {
+  // The rounded corner keeps the white square from looking pasted onto a dark page;
+  // the quiet zone keeps the modules clear of the rounding.
+  border-radius: @qrCodeRadius;
+  overflow: hidden;
+  // Forced colours would remap `fill` and could invert or flatten the code; printing
+  // would drop the dark modules.
+  forced-color-adjust: none;
+  print-color-adjust: exact;
+}
+
+.smwb-qr-code__light {
+  fill: @qrCodeLightColor;
+}
+
+.smwb-qr-code__dark {
+  fill: @qrCodeDarkColor;
+}
+
+.smwb-qr-code__caption {
+  color: var(--smui-onSurfaceVariant);
+  font-size: 0.8125rem;
+  text-align: center;
+}

package/less/components/radioButton/radioButton.less

@@ -30,7 +30,20 @@
   }
 
   &__input {
-    display: none;
+    // Visually hidden but rendered: with display: none the input would be out of
+    // the tab order and the accessibility tree. It fills the wrapper, under the
+    // button, which takes the pointer and passes clicks on through the label.
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    opacity: 0;
+    &:focus-visible ~ .smwb-radio__btn {
+      outline: 2px solid var(--smui-primaryColor);
+      outline-offset: 2px;
+    }
     &:active {
       & ~ .radio__btn:hover ~ .smwb-radio__bg {
         transform: translate(-50%, -50%) scale(1);
@@ -127,6 +140,38 @@
     pointer-events: none;
     color: var(--smui-primaryTextColor);
   }
+
+  // The size prop maps the row onto the control-height scale (the size class rides
+  // this component's root, which is the row). The box only moves off its current
+  // edge at sm and lg: radio's medium box is 20px today, not the 18px selection
+  // token, and re-tuning it would change every default RadioButton. So _size-medium
+  // sets the row height and leaves the box to the rule above — a documented
+  // exemption from @smui-selection-md. The 40px halo (__bg and __btn::before) is
+  // left unscaled with it, as the touch target is already below the row's own
+  // min-height.
+  &_size-small {
+    min-height: var(--smui-control-h-sm, @smui-control-h-sm);
+    .smwb-radio__btn {
+      width: @smui-selection-sm;
+      height: @smui-selection-sm;
+      // 8px dot (not the base 10px): inside the 16px box's 2px border the
+      // fixed 10px dot would leave only a 1px ring.
+      &::after {
+        width: 8px;
+        height: 8px;
+      }
+    }
+  }
+  &_size-medium {
+    min-height: var(--smui-control-h-md, @smui-control-h-md);
+  }
+  &_size-large {
+    min-height: var(--smui-control-h-lg, @smui-control-h-lg);
+    .smwb-radio__btn {
+      width: @smui-selection-lg;
+      height: @smui-selection-lg;
+    }
+  }
 }
 
 @keyframes ping {

package/less/components/rating/rating.less

@@ -1,7 +1,8 @@
+// The control (the row of icons) with its helper text below it.
 .smwb-rating {
   display: inline-flex;
-  align-items: center;
-  gap: @ratingGap;
+  flex-direction: column;
+  align-items: flex-start;
   color: var(--smui-primaryColor);
 
   &_disabled {
@@ -9,6 +10,18 @@
     pointer-events: none;
   }
 
+  &__control {
+    display: inline-flex;
+    align-items: center;
+    gap: @ratingGap;
+
+    // normalize.css removes the browser's focus ring.
+    &:focus-visible {
+      outline: 2px solid var(--smui-primaryColor);
+      outline-offset: 2px;
+    }
+  }
+
   &__item {
     position: relative;
     display: inline-flex;