@smwb/ui-styles 1.5.1 → 2.0.0

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

@@ -94,6 +94,7 @@
 @avatarSizeLarge: 56px;
 @avatarGroupOverlap: @smui-space-sm;
 @avatarGroupBorder: 2px;
+@avatarGroupMaxStacked: 12; // children laid each over the next; any past these overlap the other way
 
 @breadcrumbsGap: @smui-space-sm;
 
@@ -119,6 +120,11 @@
 @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
 
@@ -167,6 +173,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
 
@@ -223,8 +256,18 @@
 @tabIconPaddingBottom: @smui-space-xs;
 @tabLabelPaddingLeft: @smui-space-sm;
 @tabDensePaddingX: @smui-space-md;
+@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
@@ -373,7 +416,8 @@
 @menuDisabledTextColor: @disabledTextColor;
 @menuOpacityHover: 0.08;
 @menuOpacityActive: 0.12;
-@menuOpacity-focus: 0.12;
+@menuOpacityFocus: 0.12;
+@menuOpacity-focus: @menuOpacityFocus; // former name, kept so Less that reads it still compiles
 @menuOpacitySelected: 0.08;
 @menuDividerColor: @dividerColor;
 
@@ -456,6 +500,83 @@
 @messageBgLight: ~"color-mix(in srgb, @{primaryColor} 10%, transparent)";
 @messageBorderRadius: @smui-radius-xs;
 
+// ---- Chart ----
+// Series colours in order, up to 12 (--smwb-chart-series-N). `false` = not set:
+// the token is not emitted, and the chart draws only the colours that are set.
+// Fill slots in order: an unset slot is skipped, so later colours shift up
+// (slot 9 without slot 8 is drawn for the 8th series).
+// Okabe-Ito, apart under colour-vision deficiencies.
+@chartSeries1: #0072b2;
+@chartSeries2: #e69f00;
+@chartSeries3: #009e73;
+@chartSeries4: #cc79a7;
+@chartSeries5: #56b4e9;
+@chartSeries6: #d55e00;
+@chartSeries7: #7a7a7a;
+@chartSeries8: false;
+@chartSeries9: false;
+@chartSeries10: false;
+@chartSeries11: false;
+@chartSeries12: false;
+
+// ---- DagView ----
+// The graph's colours, as --smwb-dag-view-* on .smwb-dag-view. The defaults
+// are the theme's runtime tokens, so the dark theme follows on its own.
+@dagViewNodeBg: ~"var(--smui-surfaceBackground)";
+@dagViewNodeBorder: ~"var(--smui-outlineColor)";
+@dagViewEdgeColor: ~"var(--smui-outlineColor)";
+@dagViewEdgeActiveColor: ~"var(--smui-primaryColor)";
+@dagViewSelectedRing: ~"var(--smui-primaryColor)";
+// A node's accent (its stripe and dot) by status; any other status is drawn as idle.
+@dagViewStatusIdle: ~"var(--smui-outlineColor)";
+@dagViewStatusPending: ~"var(--smui-onSurfaceVariant)";
+@dagViewStatusRunning: ~"var(--smui-infoColor)";
+@dagViewStatusSuccess: ~"var(--smui-successColor)";
+@dagViewStatusWarning: ~"var(--smui-warningColor)";
+@dagViewStatusError: ~"var(--smui-errorColor)";
+@dagViewStatusSkipped: ~"var(--smui-disabledTextColor)";
+// How far the nodes and edges away from the selection fade, with dimUnrelated.
+@dagViewDimOpacity: 0.35;
+// 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
@@ -614,3 +735,33 @@
     Message
 --------------------*/
 @messageBgDark: #323232;
+
+// ---- Chart ----
+// Same rule as the light set: fill in order, an unset slot is skipped.
+@chartSeries1Dark: #5aa9e6;
+@chartSeries2Dark: #f0b43a;
+@chartSeries3Dark: #2fc59b;
+@chartSeries4Dark: #e08cc0;
+@chartSeries5Dark: #8fd0f5;
+@chartSeries6Dark: #f27c3c;
+@chartSeries7Dark: #a8b0bc;
+@chartSeries8Dark: false;
+@chartSeries9Dark: false;
+@chartSeries10Dark: false;
+@chartSeries11Dark: false;
+@chartSeries12Dark: false;
+
+// ---- DagView ----
+// Dark-only values; `false` = not set: the light value (a runtime token) applies.
+@dagViewNodeBgDark: false;
+@dagViewNodeBorderDark: false;
+@dagViewEdgeColorDark: false;
+@dagViewEdgeActiveColorDark: false;
+@dagViewSelectedRingDark: false;
+@dagViewStatusIdleDark: false;
+@dagViewStatusPendingDark: false;
+@dagViewStatusRunningDark: false;
+@dagViewStatusSuccessDark: false;
+@dagViewStatusWarningDark: false;
+@dagViewStatusErrorDark: false;
+@dagViewStatusSkippedDark: false;

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/foundation/typography.less

@@ -5,6 +5,13 @@
 //  <Typography> component (smwb-typography_<variant>) and reusable by
 //  any component. Override a step from theme.config, e.g.
 //      @smui-font-h1-size: 40px;
+// Letter case and spacing per variant are theme variables too; set them from
+// theme.config to, say, put the headings in capitals:
+//      @smui-font-h1-transform: uppercase; @smui-font-h1-letter-spacing: 0.06em;
+// The defaults are `auto`, a marker meaning the variant declares nothing of its
+// own, except overline and button, which have always been uppercase with 0.06em.
+// A set value is also readable at runtime as --smui-font-<variant>-transform /
+// -letter-spacing (the compiled value is the var() fallback).
 //=====================================================================
 
 @smui-font-family: var(--smui-fontFamily, inherit);
@@ -28,3 +35,17 @@
 @smui-font-caption-size: 12px; @smui-font-caption-weight: 400; @smui-font-caption-lh: 1.4;
 @smui-font-overline-size: 12px; @smui-font-overline-weight: 600; @smui-font-overline-lh: 1.4;
 @smui-font-button-size: 14px; @smui-font-button-weight: 500; @smui-font-button-lh: 1.75;
+
+@smui-font-h1-transform: auto; @smui-font-h1-letter-spacing: auto;
+@smui-font-h2-transform: auto; @smui-font-h2-letter-spacing: auto;
+@smui-font-h3-transform: auto; @smui-font-h3-letter-spacing: auto;
+@smui-font-h4-transform: auto; @smui-font-h4-letter-spacing: auto;
+@smui-font-h5-transform: auto; @smui-font-h5-letter-spacing: auto;
+@smui-font-h6-transform: auto; @smui-font-h6-letter-spacing: auto;
+@smui-font-subtitle1-transform: auto; @smui-font-subtitle1-letter-spacing: auto;
+@smui-font-subtitle2-transform: auto; @smui-font-subtitle2-letter-spacing: auto;
+@smui-font-body1-transform: auto; @smui-font-body1-letter-spacing: auto;
+@smui-font-body2-transform: auto; @smui-font-body2-letter-spacing: auto;
+@smui-font-caption-transform: auto; @smui-font-caption-letter-spacing: auto;
+@smui-font-overline-transform: uppercase; @smui-font-overline-letter-spacing: 0.06em;
+@smui-font-button-transform: uppercase; @smui-font-button-letter-spacing: 0.06em;

package/less/themes/material/variables.less

@@ -170,6 +170,7 @@
 @menuDisabledTextColor: @disabledTextColor;
 @menuOpacityHover: 0.08;
 @menuOpacityActive: 0.12;
+@menuOpacityFocus: 0.12;
 @menuOpacitySelected: 0.08;
 @menuDividerColor: rgba(0, 0, 0, 0.12);
 

package/less/themes/summer/variables.less

@@ -166,6 +166,7 @@
 @menuDisabledTextColor: @disabledTextColor;
 @menuOpacityHover: 0.08;
 @menuOpacityActive: 0.12;
+@menuOpacityFocus: 0.12;
 @menuOpacitySelected: 0.08;
 @menuDividerColor: rgba(0, 0, 0, 0.12);
 

package/less/variables.less

@@ -142,6 +142,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.5.1",
+  "version": "2.0.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"
+    "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"
   }
 }