@smwb/ui-styles 1.4.3 → 1.5.0

package/README.md

@@ -24,9 +24,11 @@ npm install @smwb/ui-styles
 | `less/components.less` | Aggregate entry — `@import`s foundation + every component |
 | `less/foundation/*` | Tokens: palette, spacing, radius, elevation, breakpoints, sizing |
 | `less/default/globals/default.variables.less` | Semantic colors + per-component LESS variables |
-| `less/variables.less` | Emits `:root { --smui-* }` (light) + `[data-theme="dark"]` |
-| `less/components/<name>/<name>.entry.less` | Per-component entry (self-contained) |
+| `less/variables.less` | Declares the `--smui-*` tokens and emits them on `:root` (light) + `[data-theme="dark"]` |
+| `less/components/<name>/<name>.entry.less` | Per-component entry (component rules only, no tokens) |
+| `less/tokens.entry.less` | The `--smui-*` tokens at zero specificity (`:where(:root)`) for per-component CSS |
 | `less/headless-base.less` | Foundation + theme variables only (no component rules) |
+| `less/connects/rt/table.entry.less` | The React TanStack Table adapter's own rules (column resizer) |
 | `less/themes/*` | Built-in theme packs (`summer`, `material`) |
 | `normalize.css` | Optional CSS reset |
 

package/less/_prelude.less

@@ -1,6 +1,7 @@
 // Reference-only prelude: exposes foundation + theme variables/mixins
-// to a component .less compiled standalone, WITHOUT emitting any CSS
-// (the global :root / normalize / foundation base ship once via the
-// aggregate summer-ui.css or base.css).
+// to a component .less compiled standalone, WITHOUT emitting any CSS.
+// The :root --smui-* tokens ship once per stylesheet set: in the aggregate
+// components.less (@smwb/ui-css) and headless-base.less, or, for the
+// per-component CSS, in tokens.entry.less.
 @import (reference) "./foundation.less";
 @import (reference) "./theme.less";

package/less/components/accordion/accordion.less

@@ -13,19 +13,40 @@
     cursor: pointer;
     gap: @accordionSummaryGap;
     width: 100%;
-    arrow-icon {
-      flex-shrink: 0;
-    }
+    text-align: start;
+  }
+  &__heading {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
   }
   &__title {
     white-space: nowrap;
   }
+  &__subtitle {
+    font-size: 0.8125rem;
+    line-height: 1.4;
+    opacity: 0.8;
+  }
+  // Meta (a date, a badge) after the title: it takes the free space, so the
+  // expand icon stays at the end of the row.
+  &__end {
+    display: inline-flex;
+    align-items: center;
+    gap: @smui-space-sm;
+    flex-shrink: 0;
+    margin-left: auto;
+    & ~ .smwb-accordion__arrow-icon {
+      margin-left: 0;
+    }
+  }
 
   &__content {
     background-color: var(--smui-surfaceBackground);
   }
 
   &__arrow-icon {
+    flex-shrink: 0;
     transform: rotate(0);
     transition: transform 0.3s ease-in-out;
     margin-left: auto;
@@ -33,4 +54,58 @@
       transform: rotate(-180deg);
     }
   }
+
+  // Flat variants: the panel is a row of a feed or a list, not an app bar. It
+  // fills the container's width and its title wraps instead of running out.
+  &_outlined,
+  &_plain {
+    align-self: stretch;
+    box-shadow: none;
+
+    .smwb-accordion__header {
+      height: auto;
+      min-height: @accordionFlatHeaderMinHeight;
+      padding: @smui-space-sm @accordionSummaryPaddingX;
+      gap: @smui-space-md;
+      background-color: transparent;
+      color: var(--smui-onSurfaceColor);
+      &:hover:not(:disabled) {
+        background-color: var(--smui-onSurfaceHover);
+      }
+      &:focus-visible {
+        outline: 2px solid var(--smui-primaryColor);
+        outline-offset: -2px;
+      }
+    }
+    .smwb-accordion__heading {
+      flex: 1 1 auto;
+    }
+    .smwb-accordion__title {
+      white-space: normal;
+      overflow-wrap: break-word;
+      font-weight: 500;
+      line-height: 1.4;
+    }
+    .smwb-accordion__subtitle {
+      color: var(--smui-onSurfaceVariant);
+      opacity: 1;
+    }
+    .smwb-accordion__content {
+      background-color: transparent;
+    }
+    .smwb-accordion__arrow-icon {
+      color: var(--smui-onSurfaceVariant);
+    }
+  }
+
+  &_outlined {
+    border: 1px solid var(--smui-dividerColor);
+    border-radius: @accordionOutlinedRadius;
+    background-color: var(--smui-surfaceBackground);
+    overflow: hidden;
+  }
+
+  &_plain {
+    border-bottom: 1px solid var(--smui-dividerColor);
+  }
 }

package/less/components/avatar/avatar.less

@@ -52,18 +52,26 @@
   }
 }
 
+// In source order, each avatar tucked under the previous one's right edge; the
+// "+N" chip ends the row.
 .smwb-avatar-group {
   display: inline-flex;
-  flex-direction: row-reverse;
+  flex-direction: row;
   align-items: center;
 
+  // Direct children overlap, so an avatar wrapped in a link (a compact
+  // PersonChip) tucks in like a bare one.
+  > :not(:first-child) {
+    margin-left: (-1 * @avatarGroupOverlap);
+  }
+
   .smwb-avatar {
     border: @avatarGroupBorder solid var(--smui-surfaceBackground);
     box-sizing: content-box;
+  }
 
-    &:not(:last-child) {
-      margin-left: (-1 * @avatarGroupOverlap);
-    }
+  &__hidden {
+    display: none;
   }
 
   &__surplus {

package/less/components/chart/chart.entry.less

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

package/less/components/chart/chart.less

@@ -0,0 +1,51 @@
+// A chart: ECharts draws into __canvas; until it does, a skeleton of the same
+// size stands in, so the page does not jump.
+.smwb-chart {
+  // Series colours, in order (read up to 12). The set stays apart with
+  // colour-vision deficiencies (Okabe–Ito); a theme may set its own.
+  --smwb-chart-series-1: #0072b2;
+  --smwb-chart-series-2: #e69f00;
+  --smwb-chart-series-3: #009e73;
+  --smwb-chart-series-4: #cc79a7;
+  --smwb-chart-series-5: #56b4e9;
+  --smwb-chart-series-6: #d55e00;
+  --smwb-chart-series-7: #7a7a7a;
+
+  position: relative;
+  width: 100%;
+  min-width: 0;
+
+  &__canvas {
+    position: absolute;
+    inset: 0;
+  }
+
+  // Two classes: the skeleton's own position rule must not win on stylesheet order.
+  .smwb-chart__skeleton {
+    position: absolute;
+    inset: 0;
+  }
+
+  // The chart 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;
+  }
+}
+
+:root[data-theme="dark"] .smwb-chart {
+  --smwb-chart-series-1: #5aa9e6;
+  --smwb-chart-series-2: #f0b43a;
+  --smwb-chart-series-3: #2fc59b;
+  --smwb-chart-series-4: #e08cc0;
+  --smwb-chart-series-5: #8fd0f5;
+  --smwb-chart-series-6: #f27c3c;
+  --smwb-chart-series-7: #a8b0bc;
+}

package/less/components/descriptionList/descriptionList.entry.less

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

package/less/components/descriptionList/descriptionList.less

@@ -0,0 +1,52 @@
+// Field–value pairs. In a row the term keeps its column (--smwb-description-term)
+// and the value takes the rest; stacked, the term sits above its value.
+.smwb-description-list {
+  display: grid;
+  row-gap: @smui-space-sm;
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.45;
+  min-width: 0;
+
+  &__item {
+    display: grid;
+    grid-template-columns: var(--smwb-description-term, minmax(6rem, 30%)) minmax(0, 1fr);
+    column-gap: @smui-space-md;
+    row-gap: 2px;
+    align-items: baseline;
+    min-width: 0;
+  }
+
+  &__term {
+    color: var(--smui-onSurfaceVariant);
+    overflow-wrap: break-word;
+  }
+
+  &__details {
+    margin: 0;
+    min-width: 0;
+    color: var(--smui-onSurfaceColor);
+    overflow-wrap: anywhere;
+  }
+
+  &_dense {
+    row-gap: @smui-space-xs;
+    font-size: 0.8125rem;
+  }
+
+  &_stacked &__item {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  // auto: the list is its own query container, so its width — not the
+  // window's — decides when the pairs stack.
+  &_auto {
+    container: smwb-description-list / inline-size;
+  }
+}
+
+@container smwb-description-list (max-width: (@smui-bp-sm - 0.02px)) {
+  .smwb-description-list_auto .smwb-description-list__item {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}

package/less/components/emptyState/emptyState.entry.less

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

package/less/components/emptyState/emptyState.less

@@ -0,0 +1,105 @@
+// What a list, a table or a panel shows when it has nothing: an icon, a title,
+// the message and actions — centred as a block, or as a muted line of text.
+.smwb-empty-state {
+  min-width: 0;
+  color: var(--smui-onSurfaceVariant);
+
+  &__title {
+    color: var(--smui-onSurfaceColor);
+    font-weight: 600;
+  }
+
+  &__description {
+    overflow-wrap: break-word;
+  }
+
+  // Centred, for an empty page, panel or card.
+  &_block {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: @smui-space-sm;
+    padding: @smui-space-xl @smui-space-lg;
+    text-align: center;
+
+    .smwb-empty-state__icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 64px;
+      height: 64px;
+      margin-bottom: @smui-space-xs;
+      border-radius: @smui-radius-circle;
+      background-color: var(--smui-surfaceVariant);
+    }
+    .smwb-empty-state__title {
+      font-size: 1rem;
+      line-height: 1.4;
+    }
+    .smwb-empty-state__description {
+      max-width: 36rem;
+      font-size: 0.875rem;
+      line-height: 1.5;
+    }
+    .smwb-empty-state__actions {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: @smui-space-sm;
+      margin-top: @smui-space-sm;
+    }
+  }
+
+  &_block&_small {
+    gap: @smui-space-xs;
+    padding: @smui-space-md;
+
+    .smwb-empty-state__icon {
+      width: 44px;
+      height: 44px;
+      margin-bottom: 0;
+    }
+    .smwb-empty-state__title {
+      font-size: 0.875rem;
+    }
+    .smwb-empty-state__description {
+      font-size: 0.8125rem;
+    }
+    .smwb-empty-state__actions {
+      margin-top: @smui-space-xs;
+    }
+  }
+
+  // A muted line of text, for a list, a table or a column that came out empty.
+  // The parts flow as text, so an action follows the last word.
+  &_inline {
+    margin: @smui-space-sm 0;
+    font-size: 0.875rem;
+    line-height: 1.5;
+
+    .smwb-empty-state__title,
+    .smwb-empty-state__description {
+      display: inline;
+    }
+    .smwb-empty-state__title {
+      margin-right: 0.35em;
+    }
+    .smwb-empty-state__icon {
+      display: inline-flex;
+      margin-right: @smui-space-xs;
+      vertical-align: middle;
+    }
+    .smwb-empty-state__actions {
+      display: inline-flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: @smui-space-xs;
+      margin-left: @smui-space-sm;
+      vertical-align: middle;
+    }
+  }
+
+  &_inline&_small {
+    font-size: 0.8125rem;
+  }
+}

package/less/components/kanban/kanban.entry.less

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

package/less/components/kanban/kanban.less

@@ -0,0 +1,162 @@
+// A board: columns side by side, each at least --smwb-kanban-column-width
+// wide; when they do not fit, the board scrolls sideways and snaps to a column.
+.smwb-kanban {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(var(--smwb-kanban-column-width, 15.5rem), 1fr);
+  gap: @smui-space-md;
+  align-items: start;
+  min-width: 0;
+  max-width: 100%;
+  overflow-x: auto;
+  // Room for the scrollbar under the columns.
+  padding-bottom: @smui-space-sm;
+  scroll-snap-type: x proximity;
+  overscroll-behavior-x: contain;
+
+  &__column {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 8rem;
+    padding: 10px;
+    border: 1px solid var(--smui-dividerColor);
+    border-radius: @smui-radius-lg;
+    background-color: color-mix(in srgb, var(--smui-onSurfaceColor) 3%, var(--smui-surfaceBackground));
+    // The column's colour, a stripe along its top.
+    box-shadow: inset 0 3px 0 var(--smwb-kanban-accent, var(--smui-dividerColor));
+    scroll-snap-align: start;
+  }
+
+  &__column-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: @smui-space-sm;
+    margin: 2px 0 10px;
+  }
+
+  &__column-title {
+    min-width: 0;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--smui-onSurfaceColor);
+    overflow-wrap: break-word;
+  }
+
+  &__count {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    min-width: 1.6em;
+    padding: 0 0.45em;
+    border-radius: @smui-radius-pill;
+    background-color: color-mix(in srgb, var(--smui-onSurfaceColor) 8%, transparent);
+    color: var(--smui-onSurfaceVariant);
+    font-size: 0.75rem;
+    font-weight: 600;
+    line-height: 1.7;
+    font-variant-numeric: tabular-nums;
+  }
+
+  &__cards {
+    display: grid;
+    gap: @smui-space-sm;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  &__empty {
+    margin: @smui-space-xs 0;
+    font-size: 0.8125rem;
+    color: var(--smui-onSurfaceVariant);
+  }
+
+  &__column-footer {
+    margin-top: @smui-space-sm;
+    font-size: 0.8125rem;
+    text-align: center;
+  }
+
+  &__card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    min-width: 0;
+    padding: 10px 12px;
+    border: 1px solid var(--smui-dividerColor);
+    border-radius: @smui-radius-md;
+    background-color: var(--smui-surfaceBackground);
+    font-size: 0.875rem;
+    transition: border-color 0.12s;
+  }
+
+  &__card-title {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--smwb-kanban-title-lines, 3);
+    overflow: hidden;
+    font-weight: 500;
+    line-height: 1.4;
+    color: var(--smui-onSurfaceColor);
+    overflow-wrap: break-word;
+  }
+
+  &__card-body {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    min-width: 0;
+    font-size: 0.8125rem;
+    color: var(--smui-onSurfaceVariant);
+  }
+
+  // With href the title is a link stretched over the whole card; links and
+  // buttons in the body stay above it.
+  &__card_link {
+    &:hover {
+      border-color: color-mix(in srgb, var(--smui-primaryColor) 40%, var(--smui-dividerColor));
+    }
+
+    .smwb-kanban__card-title {
+      text-decoration: none;
+
+      &::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        border-radius: @smui-radius-md;
+      }
+      &:hover {
+        color: var(--smui-primaryColor);
+      }
+      &:focus-visible {
+        outline: none;
+      }
+      &:focus-visible::after {
+        outline: 2px solid var(--smui-primaryColor);
+        outline-offset: 2px;
+      }
+    }
+
+    .smwb-kanban__card-body :is(a, button, input, select, textarea, [tabindex]) {
+      position: relative;
+      z-index: 1;
+    }
+  }
+}
+
+// Links in a card or under a column take the theme's link colour, not the
+// browser's. Kept to an element selector's weight, so an app's own link styles
+// still apply.
+:where(.smwb-kanban__card-body, .smwb-kanban__column-footer) a {
+  color: var(--smui-primaryColor);
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}

package/less/components/meter/meter.entry.less

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

package/less/components/meter/meter.less

@@ -0,0 +1,65 @@
+// A share of a whole: the bar takes what the "X of Y" text leaves, so in a table
+// cell the figures never run over the neighbouring cell.
+.smwb-meter {
+  --smwb-meter-color: var(--smui-infoColor);
+  display: grid;
+  grid-template-columns: minmax(@meterMinBarWidth, 1fr) auto;
+  align-items: center;
+  column-gap: @smui-space-sm;
+  width: 100%;
+  min-width: 0;
+  font-size: 0.875rem;
+  line-height: 1.4;
+
+  &__track {
+    display: block;
+    height: @meterHeight;
+    border-radius: 999px;
+    background-color: var(--smui-indicatorTrackBg);
+    overflow: hidden;
+  }
+
+  &__fill {
+    display: block;
+    height: 100%;
+    border-radius: inherit;
+    background-color: var(--smwb-meter-color);
+    transition: width 0.2s ease-out;
+  }
+
+  &__text {
+    white-space: nowrap;
+    font-variant-numeric: tabular-nums;
+  }
+
+  &__value {
+    font-weight: 600;
+  }
+
+  &__of {
+    color: var(--smui-onSurfaceVariant);
+  }
+
+  &_bar-only {
+    grid-template-columns: minmax(@meterMinBarWidth, 1fr);
+  }
+
+  &_color-neutral {
+    --smwb-meter-color: var(--smui-onSurfaceVariant);
+  }
+  &_color-primary {
+    --smwb-meter-color: var(--smui-primaryColor);
+  }
+  &_color-info {
+    --smwb-meter-color: var(--smui-infoColor);
+  }
+  &_color-success {
+    --smwb-meter-color: var(--smui-successColor);
+  }
+  &_color-warning {
+    --smwb-meter-color: var(--smui-warningColor);
+  }
+  &_color-error {
+    --smwb-meter-color: var(--smui-errorColor);
+  }
+}

package/less/components/personChip/personChip.entry.less

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

package/less/components/personChip/personChip.less

@@ -0,0 +1,49 @@
+// A person: avatar and name. As a link it reads as the text around it until
+// hovered.
+.smwb-person-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: @smui-space-sm;
+  max-width: 100%;
+  min-width: 0;
+  vertical-align: middle;
+  color: inherit;
+  text-decoration: none;
+
+  // The derived colours are mid-dark in both themes: white initials read on all of them.
+  &__avatar {
+    flex-shrink: 0;
+    color: #fff;
+  }
+
+  &__text {
+    display: inline-flex;
+    flex-direction: column;
+    min-width: 0;
+    line-height: 1.3;
+  }
+
+  &__name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__meta {
+    font-size: 0.75rem;
+    color: var(--smui-onSurfaceVariant);
+  }
+
+  &_link {
+    border-radius: @smui-radius-sm;
+    cursor: pointer;
+    &:hover .smwb-person-chip__name {
+      color: var(--smui-primaryColor);
+      text-decoration: underline;
+    }
+    &:focus-visible {
+      outline: 2px solid var(--smui-primaryColor);
+      outline-offset: 2px;
+    }
+  }
+}