@smwb/ui-styles 1.4.3 → 1.5.1

package/less/components/timeline/timeline.less

@@ -0,0 +1,141 @@
+// Events on a line: each item's mark sits on a vertical rule that runs from it
+// down to the next item's mark.
+.smwb-timeline {
+  --smwb-timeline-mark: 24px;
+  --smwb-timeline-pad: @smui-space-xs;
+  display: grid;
+  row-gap: @smui-space-md;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: 0.875rem;
+  line-height: 1.45;
+  min-width: 0;
+
+  &__group {
+    display: grid;
+    row-gap: @smui-space-xs;
+    min-width: 0;
+  }
+
+  &__label {
+    padding: 2px 0;
+    font-size: 0.75rem;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--smui-onSurfaceVariant);
+  }
+
+  &__items {
+    display: grid;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    min-width: 0;
+  }
+
+  &__item {
+    --smwb-timeline-tone: var(--smui-onSurfaceVariant);
+    position: relative;
+    display: grid;
+    grid-template-columns: var(--smwb-timeline-mark) minmax(0, 1fr) auto;
+    column-gap: @smui-space-sm;
+    align-items: start;
+    padding: var(--smwb-timeline-pad) 0;
+    min-width: 0;
+
+    &::before {
+      content: "";
+      position: absolute;
+      left: calc(var(--smwb-timeline-mark) / 2 - 1px);
+      top: calc(var(--smwb-timeline-pad) + var(--smwb-timeline-mark));
+      bottom: calc(-1 * var(--smwb-timeline-pad));
+      width: 2px;
+      background-color: var(--smui-dividerColor);
+    }
+    &:last-child::before {
+      display: none;
+    }
+  }
+
+  &__mark {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--smwb-timeline-mark);
+    height: var(--smwb-timeline-mark);
+    color: var(--smwb-timeline-tone);
+  }
+
+  &__dot {
+    width: 8px;
+    height: 8px;
+    border-radius: @smui-radius-circle;
+    background-color: currentColor;
+  }
+
+  &__body {
+    min-width: 0;
+  }
+
+  &__title {
+    overflow-wrap: anywhere;
+
+    // An event is usually a link: it reads as the text around it until hovered.
+    a {
+      color: inherit;
+      text-decoration: none;
+      &:hover {
+        color: var(--smui-primaryColor);
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &__meta {
+    font-size: 0.75rem;
+    color: var(--smui-onSurfaceVariant);
+    overflow-wrap: anywhere;
+  }
+
+  &__content {
+    margin-top: @smui-space-xs;
+  }
+
+  &__time {
+    font-size: 0.75rem;
+    line-height: 1.45rem;
+    white-space: nowrap;
+    font-variant-numeric: tabular-nums;
+    color: var(--smui-onSurfaceVariant);
+  }
+
+  &__item_tone-info {
+    --smwb-timeline-tone: var(--smui-infoColor);
+  }
+  &__item_tone-success {
+    --smwb-timeline-tone: var(--smui-successColor);
+  }
+  &__item_tone-warning {
+    --smwb-timeline-tone: var(--smui-warningColor);
+  }
+  &__item_tone-error {
+    --smwb-timeline-tone: var(--smui-errorColor);
+  }
+
+  &_dense {
+    --smwb-timeline-pad: 2px;
+    row-gap: @smui-space-sm;
+    font-size: 0.8125rem;
+  }
+
+  // The label covers what scrolls under it; set --smwb-timeline-label-bg to the
+  // background the timeline sits on.
+  &_sticky-labels &__label {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    background-color: var(--smwb-timeline-label-bg, var(--smui-surfaceBackground));
+  }
+}

package/less/components/tooltip/tooltip.less

@@ -9,22 +9,19 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.2s ease-in-out;
   overflow: hidden;
-  opacity: 0;
-  visibility: hidden;
   white-space: nowrap;
   min-width: 50px;
+  // The component mounts the tooltip only while it shows — on hover, on click,
+  // or while `open` — so it is visible whenever it is in the DOM. (It used to be
+  // shown by :hover alone, which hid click and manual tooltips.)
+  animation: smwb-tooltip-in 0.15s ease-out;
 
   &__ref {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    &:hover + .smwb-tooltip {
-      visibility: visible;
-      opacity: 1;
-    }
   }
 
   &__wrapper {
@@ -34,3 +31,9 @@
     justify-content: center;
   }
 }
+
+@keyframes smwb-tooltip-in {
+  from {
+    opacity: 0;
+  }
+}

package/less/components/typography/typography.less

@@ -83,4 +83,18 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+
+  // lines={n}: an ellipsis after n lines (the count comes in as a custom property).
+  &_clamp {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--smwb-typography-lines);
+    line-clamp: var(--smwb-typography-lines);
+    overflow: hidden;
+    overflow-wrap: break-word;
+  }
+
+  &_tabular-nums {
+    font-variant-numeric: tabular-nums;
+  }
 }

package/less/components.less

@@ -9,8 +9,10 @@
 @import "./components/fileInput/fileInput.less";
 @import "./components/modal/modal.less";
 @import "./components/confirmDialog/confirmDialog.less";
+@import "./components/emptyState/emptyState.less";
 @import "./components/saveAssetDialog/saveAssetDialog.less";
 @import "./components/progressIndicator/progressIndicator.less";
+@import "./components/meter/meter.less";
 @import "./components/radioButton/radioButton.less";
 @import "./components/sidebar/sidebar.less";
 @import "./components/bottomBar/bottomBar.less";
@@ -26,6 +28,7 @@
 @import "./components/selectField/selectField.less";
 @import "./components/ripple/ripple.less";
 @import "./components/list/list.less";
+@import "./components/descriptionList/descriptionList.less";
 @import "./components/imagesList/imagesList.less";
 @import "./components/imagesList/imagesListItem/imagesListItem.less";
 @import "./components/lazyImage/lazyImage.less";
@@ -37,10 +40,12 @@
 @import "./components/floatingWindow/floatingWindow.less";
 @import "./components/badge/badge.less";
 @import "./components/card/card.less";
+@import "./components/stat/stat.less";
 @import "./components/carousel/carousel.less";
 @import "./components/accordion/accordion.less";
 @import "./components/expansionPanel/expansionPanel.less";
 @import "./components/chat/chat.less";
+@import "./components/kanban/kanban.less";
 @import "./components/table/table.less";
 @import "./components/table/tablePagination/tablePagination.less";
 @import "./components/icon/icon.less";
@@ -48,19 +53,23 @@
 @import "./components/datePicker/dataPicker.less";
 @import "./components/timePicker/timePicker.less";
 @import "./components/treeView/treeView.less";
+@import "./components/timeline/timeline.less";
 @import "./components/message/message.less";
 @import "./components/buttonGroup/buttonGroup.less";
 @import "./components/avatar/avatar.less";
+@import "./components/personChip/personChip.less";
 @import "./components/breadcrumbs/breadcrumbs.less";
 @import "./components/divider/divider.less";
 @import "./components/pagination/pagination.less";
 @import "./components/rating/rating.less";
 @import "./components/skeleton/skeleton.less";
+@import "./components/chart/chart.less";
 @import "./components/stepper/stepper.less";
 @import "./components/typography/typography.less";
 @import "./components/stack/stack.less";
 @import "./components/page/page.less";
 @import "./components/pageHeader/pageHeader.less";
+@import "./components/sectionHeader/sectionHeader.less";
 @import "./components/appLayout/appLayout.less";
 @import "./responsive.less";
 @import "./connects.less";

package/less/connects/rt/table.entry.less

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

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

@@ -57,6 +57,7 @@
 @onSurfaceVariant: #49454e;
 @onSurfaceHover: ~"color-mix(in srgb, @{onSurfaceColor} 8%, transparent)";
 @onSurfaceActive: ~"color-mix(in srgb, @{onSurfaceColor} 12%, transparent)";
+@onSurfaceFocus: ~"color-mix(in srgb, @{onSurfaceColor} 12%, transparent)";
 @disabledTextColor: ~"color-mix(in srgb, @{onSurfaceColor} 38%, transparent)";
 @disabledBgColor: ~"color-mix(in srgb, @{onSurfaceColor} 12%, transparent)";
 
@@ -85,6 +86,8 @@
 =====================================================================*/
 @accordionSummaryPaddingX: @smui-space-lg;
 @accordionSummaryGap: 15px; // off-grid
+@accordionFlatHeaderMinHeight: @smui-space-12; // outlined / plain header
+@accordionOutlinedRadius: @smui-radius-md;
 
 @avatarSizeSmall: 24px;
 @avatarSizeMedium: 40px;
@@ -109,6 +112,9 @@
 @stepperConnectorGap: @smui-space-sm;
 @stepperIconSize: 24px;
 @stepperLabelGap: @smui-space-sm;
+// orientation="auto": the container width per step below which the steps stack
+@stepperAutoStepWidth: 8rem;
+@stepperAutoMaxSteps: 12; // keep in step with AUTO_MAX_STEPS in the components
 
 @appBarPaddingX: @smui-space-lg;
 @appBarActionPadding: @smui-space-md;
@@ -159,9 +165,14 @@
 @menuTextInsetDense: 36px; // off-grid
 
 @progressDotMargin: @smui-space-xs;
+@meterHeight: 6px;
+@meterMinBarWidth: 3.5rem; // the bar keeps at least this much beside its text
 
 @screenDividerLabelMargin: 5px; // off-grid
 
+@sectionHeaderTitleSize: 1.15rem;
+@sectionHeaderMinorTitleSize: 1rem; // h3 and below
+
 @messagePadding: @smui-space-md @smui-space-xl;
 @messageGap: 10px; // off-grid
 @messageTitleMarginBottom: @smui-space-xs;
@@ -211,6 +222,9 @@
 @tabIconPaddingTop: 6px; // off-grid
 @tabIconPaddingBottom: @smui-space-xs;
 @tabLabelPaddingLeft: @smui-space-sm;
+@tabDensePaddingX: @smui-space-md;
+@tabsFadeWidth: 2.5rem; // scrollable row: the fading edge beyond which tabs are hidden
+@tabsScrollButtonWidth: 40px;
 
 @tableCellPaddingX: @smui-space-lg;
 @tableToolbarMarginBottom: 10px; // off-grid
@@ -464,6 +478,7 @@
 @onSurfaceVariantDark: #cac4d0;
 @onSurfaceHoverDark: ~"color-mix(in srgb, @{onSurfaceColorDark} 8%, transparent)";
 @onSurfaceActiveDark: ~"color-mix(in srgb, @{onSurfaceColorDark} 12%, transparent)";
+@onSurfaceFocusDark: ~"color-mix(in srgb, @{onSurfaceColorDark} 12%, transparent)";
 @disabledBgColorDark: ~"color-mix(in srgb, @{onSurfaceColorDark} 12%, transparent)";
 @disabledTextColorDark: ~"color-mix(in srgb, @{onSurfaceColorDark} 38%, transparent)";
 

package/less/foundation/typography.less

@@ -9,12 +9,17 @@
 
 @smui-font-family: var(--smui-fontFamily, inherit);
 
-// size / weight / line-height per variant
-@smui-font-h1-size: 48px;   @smui-font-h1-weight: 300; @smui-font-h1-lh: 1.2;
-@smui-font-h2-size: 40px;   @smui-font-h2-weight: 300; @smui-font-h2-lh: 1.2;
-@smui-font-h3-size: 32px;   @smui-font-h3-weight: 400; @smui-font-h3-lh: 1.25;
-@smui-font-h4-size: 28px;   @smui-font-h4-weight: 400; @smui-font-h4-lh: 1.3;
-@smui-font-h5-size: 24px;   @smui-font-h5-weight: 500; @smui-font-h5-lh: 1.3;
+// Fluid headings: h1–h5 grow with the viewport from a phone (360px wide) to a
+// desktop (1200px): 32/28/24/22/20px on the phone, the full 48/40/32/28/24px from
+// 1200px up. The bounds are in rem, so the headings also follow the reader's font
+// size. Each value is min + slope × width between the two (escaped: Less would
+// otherwise add the rem and vw terms). A fixed size still overrides a step:
+//     @smui-font-h1-size: 48px;
+@smui-font-h1-size: ~"clamp(2rem, 1.5714rem + 1.9048vw, 3rem)";        @smui-font-h1-weight: 300; @smui-font-h1-lh: 1.2;
+@smui-font-h2-size: ~"clamp(1.75rem, 1.4286rem + 1.4286vw, 2.5rem)";   @smui-font-h2-weight: 300; @smui-font-h2-lh: 1.2;
+@smui-font-h3-size: ~"clamp(1.5rem, 1.2857rem + 0.9524vw, 2rem)";      @smui-font-h3-weight: 400; @smui-font-h3-lh: 1.25;
+@smui-font-h4-size: ~"clamp(1.375rem, 1.2143rem + 0.7143vw, 1.75rem)"; @smui-font-h4-weight: 400; @smui-font-h4-lh: 1.3;
+@smui-font-h5-size: ~"clamp(1.25rem, 1.1429rem + 0.4762vw, 1.5rem)";   @smui-font-h5-weight: 500; @smui-font-h5-lh: 1.3;
 @smui-font-h6-size: 20px;   @smui-font-h6-weight: 500; @smui-font-h6-lh: 1.4;
 @smui-font-subtitle1-size: 16px; @smui-font-subtitle1-weight: 500; @smui-font-subtitle1-lh: 1.5;
 @smui-font-subtitle2-size: 14px; @smui-font-subtitle2-weight: 500; @smui-font-subtitle2-lh: 1.5;

package/less/theme.less

@@ -2,7 +2,7 @@
        Theme
 -------------------*/
 @theme: "";
-@themesFolder: "";
+@themesFolder: "./themes";
 
 /*--------------------
     Site variables

package/less/tokens.entry.less

@@ -0,0 +1,19 @@
+// Runtime token layer of the per-component CSS. The default builds of
+// @smwb/ui-react and @smwb/ui-solid import it from every component module,
+// next to the component's <name>.entry.less: those only reference the theme
+// (see _prelude.less), so without this sheet no --smui-* token is defined.
+//
+// :where() drops the specificity to zero. The bundler places this sheet
+// with the first component module, often after the app's own CSS, so an
+// app's `:root { --smui-* }` override must win regardless of load order.
+// It also wins in dark mode; dark-only values go under
+// :root[data-theme="dark"]. The aggregate keeps plain :root (variables.less).
+@import (reference) "./_prelude.less";
+
+:where(:root) {
+  .smui-tokens-light();
+}
+
+:where(:root[data-theme="dark"]) {
+  .smui-tokens-dark();
+}

package/less/variables.less

@@ -1,4 +1,9 @@
-:root {
+// The runtime --smui-* tokens, light and dark. They are declared once, as
+// mixins, because two stylesheets ship them: this file emits them on :root
+// (the aggregate components.less / @smwb/ui-css, and headless-base.less), and
+// tokens.entry.less emits them at zero specificity for the per-component CSS
+// of @smwb/ui-react and @smwb/ui-solid.
+.smui-tokens-light() {
   --smui-onSurfaceVariant: @onSurfaceVariant;
   --smui-onSurfaceColor: @onSurfaceColor;
   --smui-primaryColor: @primaryColor;
@@ -12,6 +17,7 @@
   --smui-outlineColor: @outlineColor;
   --smui-onSurfaceHover: @onSurfaceHover;
   --smui-onSurfaceActive: @onSurfaceActive;
+  --smui-onSurfaceFocus: @onSurfaceFocus;
   --smui-surfaceVariant: @surfaceVariant;
   --smui-disabledBgColor: @disabledBgColor;
   --smui-primaryContainer: @primaryContainer;
@@ -160,7 +166,7 @@
   --smui-bp-xl: @smui-bp-xl;
 }
 
-:root[data-theme="dark"] {
+.smui-tokens-dark() {
   --smui-onSurfaceVariant: @onSurfaceVariantDark;
   --smui-onSurfaceColor: @onSurfaceColorDark;
   --smui-primaryColor: @primaryColorDark;
@@ -174,6 +180,7 @@
   --smui-outlineColor: @outlineColorDark;
   --smui-onSurfaceHover: @onSurfaceHoverDark;
   --smui-onSurfaceActive: @onSurfaceActiveDark;
+  --smui-onSurfaceFocus: @onSurfaceFocusDark;
   --smui-surfaceVariant: @surfaceVariantDark;
   --smui-disabledBgColor: @disabledBgColorDark;
   --smui-primaryContainer: @primaryContainerDark;
@@ -259,3 +266,11 @@
 
   --smui-messageBackground: @messageBgDark;
 }
+
+:root {
+  .smui-tokens-light();
+}
+
+:root[data-theme="dark"] {
+  .smui-tokens-dark();
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smwb/ui-styles",
-  "version": "1.4.3",
+  "version": "1.5.1",
   "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,7 +19,7 @@
     "./package.json": "./package.json"
   },
   "scripts": {
-    "lint": "node scripts/check-aggregate.mjs"
+    "lint": "node scripts/check-aggregate.mjs && node scripts/check-tokens.mjs"
   },
   "homepage": "https://sourcecraft.dev/elfenmail/ui",
   "repository": {