@smwb/ui-styles 1.6.0 → 2.1.0

package/less/components/tabs/tab/tab.less

@@ -50,6 +50,13 @@
     }
   }
 
+  // normalize.css removes the outline, and the state layer above is no ring: a tab
+  // reached by the arrow keys shows one of its own.
+  &:focus-visible {
+    outline: 2px solid var(--smui-primaryColor);
+    outline-offset: -2px;
+  }
+
   &__content {
     position: relative;
     display: flex;
@@ -113,11 +120,136 @@
   cursor: default;
 }
 
-// Compact tabs (Tabs dense): labels as written — no capitals, no letter spacing —
-// and less padding, so more tabs fit in a row.
+// A tab with a close button or actions (Tab `closable`, `actions`) sits in an item with them:
+// a control inside role="tab" would join the tab's name, so the controls are the tab's siblings.
+// They stay in the tab list, which ARIA 1.2 lets own only tabs (see the README). The item is the
+// row's flex child in the tab's place, and draws the hover layer over the whole of it, controls
+// included.
+.smwb-tab-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex: 1 0 auto;
+
+  &:before {
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    content: "";
+    pointer-events: none;
+    transition: opacity 15ms linear;
+    background-color: @tabBgColor;
+  }
+
+  &:hover:not(&--disabled):before {
+    opacity: @tabOpacityHover;
+  }
+
+  // The item's layer replaces the tab's own hover layer (focus keeps the tab's).
+  > .smwb-tab:hover:before {
+    opacity: 0;
+  }
+  > .smwb-tab:focus:before {
+    opacity: @tabOpacityFocus;
+  }
+
+  // The controls take the room the tab's trailing padding was.
+  > .smwb-tab:not(:last-child) {
+    padding-right: @smui-space-sm;
+  }
+}
+
+.smwb-tab__close,
+.smwb-tab__actions {
+  position: relative;
+  z-index: 1;
+  flex: 0 0 auto;
+  margin-right: @tabControlsGap;
+}
+
+.smwb-tab__actions {
+  display: inline-flex;
+  align-items: center;
+}
+
+.smwb-tab__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: @tabCloseSize;
+  height: @tabCloseSize;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: none;
+  color: var(--smui-onSurfaceVariant);
+  cursor: pointer;
+
+  &:hover:not(:disabled) {
+    background-color: var(--smui-onSurfaceHover);
+  }
+  // normalize.css removes the outline: the close button is out of the Tab order but takes focus from a press or a screen reader.
+  &:focus-visible {
+    outline: 2px solid var(--smui-primaryColor);
+    outline-offset: -2px;
+  }
+  &:disabled {
+    opacity: 0.38;
+    cursor: default;
+  }
+}
+
+// Compact tabs (Tabs dense): a shorter row, labels as written — no capitals, no letter spacing —
+// and less padding, so more tabs fit in a row. The height is a token, not a literal, and min-height
+// alone holds the row: the tab is a flex container and its label sets its own line box, so the plain
+// tab's line-height already fits it. A dense row keeps its scroll buttons, its indicator and a
+// closable tab's controls inside that height.
 .smwb-tabs--dense .smwb-tab {
+  min-height: var(--smui-tabDenseHeight, @tabDenseHeight);
   padding: 0 @tabDensePaddingX;
   font-weight: 500;
   letter-spacing: normal;
   text-transform: none;
 }
+
+// The close button shows when it is reachable: the item is hovered (item not disabled),
+// the item is the active tab, or focus is inside the item. The disabled button stays
+// hidden; the reveal restores what the hidden defaults below took away. Hidden means
+// opacity/pointer-events only — never `visibility`, so the button stays in the
+// accessibility tree (its accessible name is computed, a screen reader reaches it) — and
+// never size, so the row does not jump. Scoped under .smwb-tabs so the rules only ever
+// match inside a tabs row (dense included); a standalone closable Tab outside a row
+// renders its close button visible and clickable.
+.smwb-tabs {
+  .smwb-tab__close {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.15s linear;
+  }
+
+  .smwb-tab-item:hover:not(.smwb-tab-item--disabled) .smwb-tab__close:not(:disabled),
+  .smwb-tab-item--active .smwb-tab__close:not(:disabled),
+  .smwb-tab-item:focus-within .smwb-tab__close:not(:disabled) {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  // Drag-to-reorder states (Tabs `onReorder`): the dragged item dims, the drop target
+  // is marked with a 2px indicator line on its leading edge. The line rides above the
+  // item's hover layer and never takes pointer events.
+  .smwb-tab-item--dragging {
+    opacity: 0.6;
+  }
+
+  .smwb-tab-item--drop-target:after {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: @tabsDragIndicatorSize;
+    background-color: var(--smui-primaryColor);
+    pointer-events: none;
+  }
+}

package/less/components/tabs/tabPanel/tabPanel.entry.less

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

package/less/components/tabs/tabPanel/tabPanel.less

@@ -0,0 +1,8 @@
+// A tab panel is a tab stop of its own (Tab moves from the tab list into it), and
+// normalize.css removes the focus outline, so it draws its own ring.
+.smwb-tab-panel {
+  &:focus-visible {
+    outline: 2px solid var(--smui-primaryColor);
+    outline-offset: -2px;
+  }
+}

package/less/components/tabs/tabs.less

@@ -71,6 +71,32 @@
     }
   }
 
+  // The overflow-menu trigger (Tabs `overflowMenu`) renders beside the scroller in the
+  // scroll buttons' spot: the same box, its own width token.
+  &__overflow-trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    width: @tabsOverflowTriggerWidth;
+    padding: 0;
+    border: none;
+    background: none;
+    color: var(--smui-onSurfaceVariant);
+    cursor: pointer;
+    &:hover:not(:disabled) {
+      background-color: var(--smui-onSurfaceHover);
+    }
+    &:focus-visible {
+      outline: 2px solid var(--smui-primaryColor);
+      outline-offset: -2px;
+    }
+    &:disabled {
+      opacity: 0.38;
+      cursor: default;
+    }
+  }
+
   &__indicator {
     display: flex;
     justify-content: center;

package/less/components/textField/textField.less

@@ -31,7 +31,9 @@
     left: 0;
     top: 0;
     transform: translate(16px, 16px);
-    transition: color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
+    transition:
+      color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
+      transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
       max-width 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
     user-select: none;
 
@@ -72,8 +74,14 @@
     box-sizing: content-box;
     width: 100%;
 
+    // The control height comes from min-height (see the size rules below), so the
+    // vertical padding is 0 and the text is centred in the border box.
     &:not(&--inline) {
       padding: @textFieldFilledInputPadding;
+      padding-top: 0;
+      padding-bottom: 0;
+      box-sizing: border-box;
+      min-height: var(--smui-control-h-md, @smui-control-h-md);
     }
 
     &::placeholder {
@@ -361,19 +369,36 @@
   }
 }
 
-// 8 + 23 + 9 = 40px, the md control height: the extra pixel at the bottom is the
-// same as the medium size's 16/17.
+// The height of an outlined field is its @smui-control-h-* token (md is the base
+// rule above): the input is border-box with no vertical padding, so min-height is
+// the whole box. The resting label is centred by the same token: its 23px line box
+// sits (height - 23) / 2 from the top, i.e. 4.5 / 8.5 / 12.5px for 32 / 40 / 48.
+.smwb-text-field:not(.smwb-text-field--filled) .smwb-text-field__label:not(.smwb-text-field__label--shrink) {
+  transform: translate(16px, calc((var(--smui-control-h-md, @smui-control-h-md) - 23px) / 2));
+}
 .smwb-text-field_size-small .smwb-text-field__input:not(.smwb-text-field__input--inline) {
-  padding-top: @smui-space-sm;
-  padding-bottom: (@smui-space-sm + 1px);
+  padding-top: 0;
+  padding-bottom: 0;
+  min-height: var(--smui-control-h-sm, @smui-control-h-sm);
   font-size: @smui-control-font-sm;
 }
-// A resting label sits in the middle of the smaller field, not 16px down.
 .smwb-text-field_size-small:not(.smwb-text-field--filled) .smwb-text-field__label:not(.smwb-text-field__label--shrink) {
-  transform: translate(16px, @smui-space-sm);
+  transform: translate(16px, calc((var(--smui-control-h-sm, @smui-control-h-sm) - 23px) / 2));
 }
 .smwb-text-field_size-large .smwb-text-field__input:not(.smwb-text-field__input--inline) {
-  padding-top: @smui-space-lg;
-  padding-bottom: @smui-space-lg;
+  padding-top: 0;
+  padding-bottom: 0;
+  min-height: var(--smui-control-h-lg, @smui-control-h-lg);
   font-size: @smui-control-font-lg;
 }
+.smwb-text-field_size-large:not(.smwb-text-field--filled) .smwb-text-field__label:not(.smwb-text-field__label--shrink) {
+  transform: translate(16px, calc((var(--smui-control-h-lg, @smui-control-h-lg) - 23px) / 2));
+}
+// A filled field keeps its own height: the shrunk label needs the 23px of top
+// padding, so there min-height is not a floor and the box is the padding sum.
+.smwb-text-field--filled .smwb-text-field__input:not(.smwb-text-field__input--inline) {
+  box-sizing: content-box;
+  min-height: 0;
+  padding-top: 23px;
+  padding-bottom: 10px;
+}

package/less/components/toggle/toggle.less

@@ -17,6 +17,30 @@
       align-items: center;
     }
   }
+
+  // The size prop maps the row onto the control-height scale. :has() is what
+  // reaches it: the size class rides .smwb-toggle, the switch itself, while the row
+  // is its ancestor __wrapper — and putting min-height on the switch would stretch
+  // the 50x30 box, whose track fills its parent by height: 100%. So the switch
+  // keeps its geometry at every size (no @smui-selection-* edge applies to it: a
+  // track and a 15/20px thumb are not a selection box), and the 40px thumb halo
+  // (::before) stays unscaled with it — it already surrounds the largest switch.
+  // justify-content centers the switch inside the taller row in the default
+  // column layout; with a label above (top/unset placement) the wrapper is
+  // already 61px at every size, so the row min-height is inert there and
+  // nothing moves. In the row layouts (label left/right) it is a no-op.
+  &__wrapper:has(.smwb-toggle_size-small) {
+    min-height: var(--smui-control-h-sm, @smui-control-h-sm);
+    justify-content: center;
+  }
+  &__wrapper:has(.smwb-toggle_size-medium) {
+    min-height: var(--smui-control-h-md, @smui-control-h-md);
+    justify-content: center;
+  }
+  &__wrapper:has(.smwb-toggle_size-large) {
+    min-height: var(--smui-control-h-lg, @smui-control-h-lg);
+    justify-content: center;
+  }
   &.smwb-disabled {
     opacity: 0.35;
     pointer-events: none;
@@ -46,7 +70,10 @@
     transform: translateY(-50%);
     top: 50%;
     transition: all 0.2s ease-in-out;
-    box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
+    box-shadow:
+      0 3px 1px -2px rgb(0 0 0 / 20%),
+      0 2px 2px 0 rgb(0 0 0 / 14%),
+      0 1px 5px 0 rgb(0 0 0 / 12%);
     &::before {
       width: 40px;
       height: 40px;

package/less/components/treeView/treeView.less

@@ -46,20 +46,58 @@
       }
     }
 
-    &__content {
+    // Chevron, checkbox, the row's button and the actions are siblings: the button holds only the
+    // label, so a control beside it never sits inside a role="button".
+    &__row {
       display: flex;
       align-items: center;
       gap: @treeViewItemGap;
       // min-height, not height: a fixed row height let a wrapped two-line label
       // overflow the node and overlap the next one.
       min-height: 40px;
+    }
+
+    &__toggle {
+      display: inline-flex;
+      flex: none;
+      align-items: center;
+      justify-content: center;
+      // Leaves keep the empty box so labels line up across levels.
+      width: 24px;
       cursor: pointer;
       user-select: none;
+
+      &:empty {
+        cursor: default;
+      }
+    }
+
+    &__content {
+      display: flex;
+      align-items: center;
+      flex: 1 1 auto;
+      min-width: 0;
+      align-self: stretch;
+      cursor: pointer;
+      user-select: none;
+      border-radius: 4px;
+
+      &:focus-visible {
+        outline: 2px solid var(--smui-primaryColor);
+        outline-offset: -2px;
+      }
+    }
+
+    &__actions {
+      display: inline-flex;
+      flex: none;
+      align-items: center;
+      gap: 4px;
     }
   }
 }
 
-.smwb-tree__node_selected > .smwb-tree__node__content {
+.smwb-tree__node_selected > .smwb-tree__node__row {
   background-color: var(--smui-onSurfaceHover);
   border-radius: 4px;
 }

package/less/components.less

@@ -13,6 +13,9 @@
 @import "./components/saveAssetDialog/saveAssetDialog.less";
 @import "./components/progressIndicator/progressIndicator.less";
 @import "./components/meter/meter.less";
+@import "./components/diffStat/diffStat.less";
+@import "./components/statusDot/statusDot.less";
+@import "./components/qrCode/qrCode.less";
 @import "./components/radioButton/radioButton.less";
 @import "./components/sidebar/sidebar.less";
 @import "./components/bottomBar/bottomBar.less";
@@ -23,6 +26,7 @@
 @import "./components/overflowMenu/overflowMenu.less";
 @import "./components/tabs/tabs.less";
 @import "./components/tabs/tab/tab.less";
+@import "./components/tabs/tabPanel/tabPanel.less";
 @import "./components/slider/slider.less";
 @import "./components/valueSlider/valueSlider.less";
 @import "./components/selectField/selectField.less";
@@ -36,6 +40,8 @@
 @import "./components/assetGrid/assetGrid.less";
 @import "./components/grid/grid.less";
 @import "./components/tooltip/tooltip.less";
+@import "./components/kbd/kbd.less";
+@import "./components/commandPalette/commandPalette.less";
 @import "./components/sheet/sheet.less";
 @import "./components/floatingWindow/floatingWindow.less";
 @import "./components/badge/badge.less";
@@ -50,6 +56,7 @@
 @import "./components/table/tablePagination/tablePagination.less";
 @import "./components/icon/icon.less";
 @import "./components/screenDivider/screenDivider.less";
+@import "./components/tabGroups/tabGroups.less";
 @import "./components/datePicker/dataPicker.less";
 @import "./components/timePicker/timePicker.less";
 @import "./components/treeView/treeView.less";
@@ -65,6 +72,8 @@
 @import "./components/skeleton/skeleton.less";
 @import "./components/chart/chart.less";
 @import "./components/dagView/dagView.less";
+@import "./components/swimlanes/swimlanes.less";
+@import "./components/composer/composer.less";
 @import "./components/stepper/stepper.less";
 @import "./components/typography/typography.less";
 @import "./components/stack/stack.less";

package/less/default/globals/default.variables.less

@@ -120,8 +120,17 @@
 @appBarPaddingX: @smui-space-lg;
 @appBarActionPadding: @smui-space-md;
 @appBarActionsGap: 10px; // off-grid
+// Width reserved for the OS window buttons in `AppBar variant="window"`: the macOS traffic lights of Electron's
+// `hiddenInset` end around 70-78px, so with @appBarPaddingX the content starts at 80px; Windows/Linux draw three
+// 46px caption buttons. Not theme tokens — an app overrides both sides with --smui-appBarWindowControlsWidth.
+@appBarWindowControlsLeft: 64px;
+@appBarWindowControlsRight: 138px;
 
 @badgePaddingX: 6px; // off-grid
+// The `warning` badge fills with the theme's amber, which is light: white text on
+// it measures 3.1:1, under the 4.5:1 WCAG AA needs at the badge's 12px label, so
+// this one carries dark ink instead of @onWarningColor. 5.5:1 on @warningColor.
+@badgeWarningColor: #1c1b1f;
 
 @buttonGap: @smui-space-sm;
 @buttonPaddingSmall: @smui-space-xs 10px; // 10 off-grid
@@ -168,6 +177,33 @@
 @progressDotMargin: @smui-space-xs;
 @meterHeight: 6px;
 @meterMinBarWidth: 3.5rem; // the bar keeps at least this much beside its text
+@statusDotSizeSm: 8px; // @smui-space-2
+@statusDotSizeMd: 12px; // @smui-space-3
+@statusDotRing: 2px; // the unknown status is a ring this thick
+
+// A QR code is always dark modules on a white square — never theme tokens, so no
+// theme (or forced-colours mode, see the component's print/forced-color-adjust) can
+// invert it.
+@qrCodeDarkColor: rgb(0 0 0);
+@qrCodeLightColor: rgb(255 255 255);
+@qrCodeRadius: @smui-radius-sm;
+
+@kbdGap: @smui-space-xxs;
+@kbdKeyMinSize: 1.5em; // a key cap is square at one character
+@kbdKeyPaddingX: 0.375em;
+@kbdKeyRadius: @smui-radius-sm;
+// ---- DiffStat ----
+@diffStatFontSize: 0.875rem;
+@diffStatCompactFontSize: 0.75rem; // a tab label
+@diffStatGap: @smui-space-xs; // the figures to the bar
+@diffStatSignGap: @smui-space-xxs; // "+N" to "−M"
+@diffStatCellWidth: 5px;
+@diffStatCellHeight: 10px;
+@diffStatCompactCellHeight: 8px;
+@diffStatCellGap: @smui-space-xxs;
+@diffStatCellRadius: 2px;
+@diffStatColorMix: 55%; // how much of the success/error token survives against the surface ink
+@diffStatNeutralMix: 60%; // how much surface ink an unowned cell's outline keeps (3:1 or better against the page)
 
 @screenDividerLabelMargin: 5px; // off-grid
 
@@ -224,8 +260,19 @@
 @tabIconPaddingBottom: @smui-space-xs;
 @tabLabelPaddingLeft: @smui-space-sm;
 @tabDensePaddingX: @smui-space-md;
+@tabDenseHeight: 36px; // off-grid; the row height of Tabs dense, the height of the compact onreel strips
+@tabCloseSize: @smui-space-6; // the close button of a closable tab
+@tabControlsGap: @smui-space-xs; // between a tab's close button, its actions and the row's next tab
 @tabsFadeWidth: 2.5rem; // scrollable row: the fading edge beyond which tabs are hidden
 @tabsScrollButtonWidth: 40px;
+@tabsOverflowTriggerWidth: @tabsScrollButtonWidth; // the "more tabs" trigger beside the scroller (Tabs `overflowMenu`)
+@tabsDragIndicatorSize: 2px; // off-grid; the drop-target line of a drag-to-reorder
+
+// ---- TabGroups ----
+@tabGroupsSeparatorSize: 4px; // off-grid; the grid track a separator between two groups sits in
+@tabGroupsSeparatorHitArea: 8px; // off-grid; the invisible grip around that track
+@tabGroupsDropTintOpacity: 0.16; // how much primary the zone a dragged tab would land in shows
+@tabGroupsActiveLineWidth: 2px; // off-grid; the line over the header of the group in use
 
 @tableCellPaddingX: @smui-space-lg;
 @tableToolbarMarginBottom: 10px; // off-grid
@@ -498,6 +545,43 @@
 // The graph's height when the app sets none (its `height` prop or `style`).
 @dagViewHeight: 480px;
 
+// ---- Swimlanes ----
+// The fixed header column's width when the app sets none (its `headerWidth`
+// prop writes --smwb-swimlanes-header-width, which these fallbacks read).
+@swimlanesHeaderWidth: 240px;
+// The grid's height when the app sets none (its `height` prop or `style`).
+@swimlanesHeight: 480px;
+
+// ---- CommandPalette ----
+// Escaped: Less would otherwise try to compute the mixed-unit min()/calc().
+@commandPaletteWidth: ~"min(640px, calc(100vw - 32px))";
+// The palette hangs near the top of the overlay, not centred, so that its
+// bottom edge - and the row the keys are on - does not move as results arrive.
+@commandPaletteTopOffset: ~"min(12vh, 96px)";
+@commandPaletteMaxHeight: ~"min(560px, calc(100vh - 2 * min(12vh, 96px)))";
+@commandPaletteItemMinHeight: 44px; // a pointer target, WCAG 2.5.5
+@commandPaletteItemRadius: @smui-radius-sm;
+@commandPaletteIconSize: 20px;
+@commandPaletteActiveLayerOpacity: 0.12; // focus state layer, as menu items
+@commandPaletteHoverLayerOpacity: 0.08;
+// ---- Composer ----
+// The task input's colours, as theme variables. The defaults are the theme's
+// runtime tokens, so the dark theme follows without extra settings.
+@composerBg: ~"var(--smui-surfaceBackground)";
+@composerBorder: ~"var(--smui-outlineColor)";
+@composerBorderFocus: ~"var(--smui-primaryColor)";
+@composerText: ~"var(--smui-onSurfaceColor)";
+@composerPlaceholder: ~"var(--smui-onSurfaceVariant)";
+@composerCounter: ~"var(--smui-onSurfaceVariant)";
+@composerCounterError: ~"var(--smui-errorColor)";
+// The send button, and the stop button while the agent is busy.
+@composerActionBg: ~"var(--smui-primaryColor)";
+@composerActionColor: ~"var(--smui-onPrimaryColor)";
+@composerStopBg: ~"var(--smui-onSurfaceColor)";
+@composerStopColor: ~"var(--smui-surfaceBackground)";
+// The surface while files are dragged over it.
+@composerDragBg: ~"var(--smui-primaryContainer)";
+
 /*===================================================== DARK THEME =================================================*/
 /*-------------------
     Common

package/less/foundation/sizing.less

@@ -1,10 +1,46 @@
 //=====================================================================
 //  Control sizing scale (small / medium / large)
 //---------------------------------------------------------------------
-//  Single source for the size variants shared by interactive controls
-//  (button, checkbox, radio, toggle, textField, selectField, slider,
-//  rating, datePicker, chip, pagination, icon defaults). Components map
-//  their `size` prop -> a `smwb-*_size-sm|md|lg` class that reads these.
+//  The height tokens @smui-control-h-sm/md/lg are consumed via
+//  min-height: var(--smui-control-h-*, @smui-control-h-*) by:
+//    - Button (sm/md/lg size classes)
+//    - TextField and SelectField (base = md, plus sm/lg size classes)
+//    - Chip (default box; its _size-small 24px step stays hardcoded)
+//    - Checkbox, RadioButton (_size-small/-medium/-large row classes) and
+//      Toggle (row min-height via .smwb-toggle__wrapper:has(.smwb-toggle_size-*))
+//  The runtime tokens --smui-control-h-* are declared in variables.less
+//  (light mixin only — the same :root block applies under data-theme="dark",
+//  so a dark re-declaration would reset a consumer's global density override),
+//  and a subtree can override the height at runtime.
+//
+//  Variant exemptions: TextField/SelectField --filled and --inline keep their
+//  own padding (no token read), radio _size-medium keeps its hardcoded 20px
+//  box, and Chip _size-small keeps 24px hardcoded.
+//
+//  @smui-control-font-sm/lg is consumed by TextField/SelectField only;
+//  @smui-control-font-md is defined but not yet consumed (reserved).
+//
+//  Defined but not yet consumed (reserved): @smui-control-px-* and
+//  @smui-icon-*. @smui-selection-* is consumed only by the checkbox box
+//  edges and the radio sm/lg box edges (radio md is hardcoded 20px);
+//  beyond that it is reserved.
+//
+//  Intentionally exempt (do not wire without a design decision):
+//    - FloatingButton: Material FAB spec diameters (56/48/40, extended
+//      48/40/34) are their own scale, not the control scale
+//    - Avatar: identity badge (@avatarSizeSmall/Medium/Large 24/40/56),
+//      not an interactive control
+//    - Pagination: has its own item scale (@paginationItemSize 32 /
+//      @paginationItemSizeSmall 26)
+//    - ProgressIndicator: indicator diameter (28px), not a control box
+//    - StatusDot: decorative dot (@statusDotSizeSm/Md); also uses the
+//      _size-sm suffix, a different class convention
+//    - Slider: size scales track thickness and thumb diameter, not a
+//      control height
+//    - Modal: size selects dialog width, not control height
+//    - Rating: size is a pixel number, not a three-step variant
+//    - DatePicker / TimePicker / DateTimePicker: compose TextField +
+//      Button, so they inherit the tokens
 //
 //  Override one step from theme.config, e.g.  @smui-control-h-md: 44px;
 //=====================================================================
@@ -24,7 +60,7 @@
 @smui-control-font-md: 14px;
 @smui-control-font-lg: 16px;
 
-// Selection-control box (checkbox/radio/toggle thumb) edge
+// Selection-control box edges (checkbox sm/md/lg, radio sm/lg)
 @smui-selection-sm: 16px;
 @smui-selection-md: 18px;
 @smui-selection-lg: 22px;

package/less/variables.less

@@ -57,6 +57,10 @@
 
   --smui-dividerColor: @dividerColor;
 
+  // Mode-independent (the amber is the same in dark), so light-only, like --smui-control-h-*:
+  // a dark-mixin copy would reset a consumer's :root override in dark mode.
+  --smui-badgeWarningColor: @badgeWarningColor;
+
   --smui-buttonOutlinedHoverBg: @buttonOutlinedHoverBg;
   --smui-buttonOutlinedActiveBg: @buttonOutlinedActiveBg;
   --smui-buttonOutlinedFocusBg: @buttonOutlinedFocusBg;
@@ -88,6 +92,7 @@
 
   --smui-tabIconColor: @tabIconColor;
   --smui-tabColorDefault: @tabColorDefault;
+  --smui-tabDenseHeight: @tabDenseHeight;
 
   --smui-sliderColor: @sliderColor;
   --smui-sliderDisabledColor: @sliderDisabledColor;
@@ -142,6 +147,11 @@
   --smui-space-xxl: @smui-space-xxl;
   --smui-space-xxxl: @smui-space-xxxl;
 
+  // Control heights (overridable at runtime by client apps, e.g. a density switch)
+  --smui-control-h-sm: @smui-control-h-sm;
+  --smui-control-h-md: @smui-control-h-md;
+  --smui-control-h-lg: @smui-control-h-lg;
+
   /* Border-radius scale */
   --smui-radius-xs: @smui-radius-xs;
   --smui-radius-sm: @smui-radius-sm;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smwb/ui-styles",
-  "version": "1.6.0",
+  "version": "2.1.0",
   "description": "Framework-agnostic LESS design tokens and component styles (smwb-*) shared by the @smwb UI libraries. Prebuilt aggregate CSS lives in @smwb/ui-css.",
   "license": "MIT",
   "sideEffects": [
@@ -19,12 +19,15 @@
     "./package.json": "./package.json"
   },
   "scripts": {
-    "lint": "node scripts/check-aggregate.mjs && node scripts/check-tokens.mjs && node scripts/check-typography-case.mjs && node scripts/check-chart-series.mjs"
+    "lint": "node scripts/check-aggregate.mjs && node scripts/check-tokens.mjs && node scripts/check-control-heights.mjs && node scripts/check-typography-case.mjs && node scripts/check-chart-series.mjs"
   },
   "homepage": "https://sourcecraft.dev/elfenmail/ui",
   "repository": {
     "type": "git",
     "url": "git+https://git.sourcecraft.dev/elfenmail/ui.git",
     "directory": "packages/styles"
+  },
+  "devDependencies": {
+    "less": "^4.6.4"
   }
 }