@smwb/ui-styles 2.6.0 → 2.8.0

package/README.md

@@ -117,6 +117,23 @@ value for both modes, so a theme that makes `@warningColor` lighter, or any of t
 changes the numbers: re-check them there. `color="secondary"` is the one name that falls short in the default dark
 theme (2.65:1): use a status for state.
 
+#### IdentityBadge colours
+
+`IdentityBadge` is a frame with no fill, so its colour is a border, an icon and 11px of text. It reads one custom
+property, `--smwb-identity-badge-accent`, which the component sets from its `accent` prop; without it (or with an empty
+one) the badge resolves `--smwb-identity-badge-color` to `@identityBadgeColor`, `var(--smui-onSurfaceVariant)` —
+neutral, following the dark theme. No status token (`infoColor`, `successColor`, `warningColor`, `errorColor`) appears
+in the badge's rules: the marker must not read as a state the way `StatusDot` does. An accent is any CSS colour, so its
+contrast is the caller's problem: at `@identityBadgeFontSize` (11px) pick one that reaches 4.5:1 against the surface it
+sits on.
+
+The box comes from `@identityBadgeHeight` (18px), `@identityBadgePaddingX` (4px), `@identityBadgeGap` (2px, icon to
+text), `@identityBadgeIconSize` (12px), `@identityBadgeBorderWidth` and `@identityBadgeRadius`; the text from
+`@identityBadgeFontFamily` (a monospace stack), `@identityBadgeFontSize` and `@identityBadgeFontWeight`; the row of a
+group from `@identityBadgeGroupGap` (4px). All are `theme.config` variables, and the colour is the only one that reads a
+`--smui-*` runtime token. Under forced colours the frame and the text draw in `CanvasText`, and a clickable "+N" in
+`ButtonText`.
+
 #### QrCode colours
 
 `QrCode` never reads theme tokens for the code itself: the modules are always `@qrCodeDarkColor`
@@ -127,6 +144,26 @@ so a copied or printed svg scans without the library CSS). Only the caption is t
 (`--smui-onSurfaceVariant`). The corner rounding is `@qrCodeRadius` (`@smui-radius-sm`); the svg clips to
 it, and the quiet zone keeps the modules clear of the rounding.
 
+#### Markdown
+
+`Markdown` (issue and PR descriptions and comments) takes its text styles from `@markdown*` variables and
+its colours from runtime tokens, so the dark theme follows without extra settings: the link is
+`@markdownLinkColor` (`--smui-primaryColor`), the code and table-head surfaces are
+`@markdownCodeBackground` / `@markdownTableHeadBackground` (`--smui-surfaceVariant`), the quote border and
+text are `@markdownQuoteBorderColor` / `@markdownQuoteColor` (`--smui-outlineColor` /
+`--smui-onSurfaceVariant`), the table borders are `@markdownTableBorderColor` (`--smui-tableBorderColor`)
+and the rule is `@markdownRuleColor` (`--smui-dividerColor`). The type scale lives in
+`@markdownFontSize` / `@markdownLineHeight` (body2), the six `@markdownHeading*Size` steps, sized in `em`
+off the prose, `@markdownHeadingWeight`, `@markdownListIndent`, the code measures (`@markdownCodeFontFamily`,
+`@markdownCodeFontSize`, `@markdownCodeRadius`, `@markdownCodeBlockPadding`, `@markdownInlineCodePadding`),
+the quote's `@markdownQuoteBorderWidth` and the table's `@markdownTableCellPadding`.
+
+Two layout promises are part of the theme contract: the prose wraps long words and addresses itself
+(`overflow-wrap: anywhere` on the root), and the code blocks and tables scroll sideways _inside
+themselves_ (`overflow-x: auto` with `contain: inline-size`), so a long line or a wide table never widens
+the page — not even inside a flex or grid parent that does not set `min-width: 0`. Override the variables
+in `theme.config`; an app needs no rules of its own on the `smwb-markdown` classes.
+
 #### DagView colours
 
 The dependency graph (`DagView` in `@smwb/ui-solid` and `@smwb/ui-react`) takes its colours from theme variables that default to the

package/less/components/identityBadge/identityBadge.entry.less

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

package/less/components/identityBadge/identityBadge.less

@@ -0,0 +1,110 @@
+// A compact identity marker: an outlined frame with no fill, a glyph on the left and a
+// short monospace text on the right. It must not read as a status, so its colour is the
+// caller's accent or the theme's neutral — never a status token — and the frame, not a
+// fill, carries it. One size, one look: no modifier classes.
+.smwb-identity-badge {
+  --smwb-identity-badge-color: var(--smwb-identity-badge-accent, @identityBadgeColor);
+  display: inline-flex;
+  align-items: center;
+  gap: @identityBadgeGap;
+  flex: none;
+  box-sizing: border-box;
+  height: @identityBadgeHeight;
+  padding: 0 @identityBadgePaddingX;
+  vertical-align: middle;
+  white-space: nowrap;
+  border: @identityBadgeBorderWidth solid var(--smwb-identity-badge-color);
+  border-radius: @identityBadgeRadius;
+  background-color: transparent;
+  color: var(--smwb-identity-badge-color);
+  font-family: @identityBadgeFontFamily;
+  font-size: @identityBadgeFontSize;
+  font-weight: @identityBadgeFontWeight;
+  line-height: 1;
+
+  &__icon {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: @identityBadgeIconSize;
+    height: @identityBadgeIconSize;
+    overflow: hidden;
+
+    // The caller picks the icon's own size, so the box clamps it: an <Icon size={20}> is scaled
+    // into the 12px slot instead of stretching the badge's fixed height. The Icon's wrapper
+    // takes the whole box, so that its glyph has a definite size to be clamped to.
+    > .smwb-icon__wrapper {
+      width: 100%;
+      height: 100%;
+    }
+
+    svg,
+    img {
+      max-width: 100%;
+      max-height: 100%;
+    }
+
+    // A font glyph sizes itself with an inline font-size, which only !important can take over.
+    .material-symbols-outlined {
+      font-size: @identityBadgeIconSize !important;
+    }
+  }
+}
+
+.smwb-identity-badge-group {
+  display: inline-flex;
+  align-items: center;
+  gap: @identityBadgeGroupGap;
+  vertical-align: middle;
+
+  // The children past `max` are drawn for hydration and hidden: a server that left them
+  // out would leave the browser without nodes to hydrate them from.
+  &__hidden {
+    display: none;
+  }
+
+  // A clickable "+N" is a real button, so a keyboard reaches it. normalize.css strips a
+  // button's looks and its outline, so both come back here.
+  button&__surplus {
+    position: relative; // holds the coarse-pointer hit area
+    margin: 0;
+    appearance: none;
+    background-color: transparent;
+    cursor: pointer;
+
+    &:focus-visible {
+      outline: 2px solid var(--smui-primaryColor);
+      outline-offset: 2px;
+    }
+
+    // A finger needs a 44px target and the badge must keep its 18px row, so the hit area
+    // hangs off a pseudo-element, centred over the button: the row does not grow
+    // (SelectField's chip-delete precedent).
+    @media (pointer: coarse) {
+      &::after {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: var(--smui-control-h-sm, @smui-control-h-sm-coarse);
+        height: var(--smui-control-h-sm, @smui-control-h-sm-coarse);
+        transform: translate(-50%, -50%);
+      }
+    }
+  }
+}
+
+// Forced colours drop the accent: draw the frame and the text in the text colour, and a
+// clickable "+N" in the button colour.
+@media (forced-colors: active) {
+  .smwb-identity-badge {
+    border-color: CanvasText;
+    color: CanvasText;
+  }
+
+  button.smwb-identity-badge-group__surplus {
+    border-color: ButtonText;
+    color: ButtonText;
+  }
+}

package/less/components/markdown/markdown.entry.less

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

package/less/components/markdown/markdown.less

@@ -0,0 +1,265 @@
+// Markdown prose: an issue or PR description or comment rendered from a parsed tree.
+// Text styles follow the @markdown* theme variables; colours are runtime tokens, so the
+// dark theme follows without extra settings. Long words and addresses wrap in the prose
+// itself; the wide blocks (code and tables) scroll sideways inside themselves instead
+// of widening the page — `contain: inline-size` takes their min-content contribution out
+// of flex and grid parents that do not set min-width: 0.
+.smwb-markdown {
+  min-width: 0;
+  max-width: 100%;
+  overflow-wrap: anywhere;
+  font-size: @markdownFontSize;
+  line-height: @markdownLineHeight;
+
+  // Blocks stack with a gap; the first and the last child carry no outer margin.
+  > * {
+    margin-block: 0;
+  }
+  > * + * {
+    margin-block-start: @markdownBlockGap;
+  }
+
+  // Over the maxLength cap, and for raw HTML that survived as a block, the text is pre-wrapped prose.
+  &__plain,
+  &__raw {
+    white-space: pre-wrap;
+  }
+
+  // The look follows the Markdown level (the class), not the tag: `headingOffset` shifts
+  // the tag for the document outline, not the size.
+  &__heading {
+    font-weight: @markdownHeadingWeight;
+    line-height: 1.3;
+
+    &_level-1 {
+      font-size: @markdownHeading1Size;
+    }
+    &_level-2 {
+      font-size: @markdownHeading2Size;
+    }
+    &_level-3 {
+      font-size: @markdownHeading3Size;
+    }
+    &_level-4 {
+      font-size: @markdownHeading4Size;
+    }
+    &_level-5 {
+      font-size: @markdownHeading5Size;
+    }
+    &_level-6 {
+      font-size: @markdownHeading6Size;
+    }
+  }
+
+  &__rule {
+    height: 0;
+    border: 0;
+    border-block-start: 1px solid @markdownRuleColor;
+  }
+
+  &__quote {
+    margin-inline: 0;
+    padding-inline-start: @markdownBlockGap;
+    border-inline-start: @markdownQuoteBorderWidth solid @markdownQuoteBorderColor;
+    color: @markdownQuoteColor;
+
+    > * + * {
+      margin-block-start: @markdownBlockGap;
+    }
+  }
+
+  // Deep nesting stops widening the text: from the fourth occurrence of the same container on,
+  // a quote, a list or a footnote indents only a little, so the deepest text that still draws as
+  // Markdown (31 levels of quotes, lists and footnotes, alone or mixed) fits a phone-width column.
+  &__quote &__quote &__quote &__quote,
+  &__footnote &__footnote &__footnote &__footnote {
+    padding-inline-start: ~"calc(@{markdownBlockGap} / 3)";
+  }
+  &__list &__list &__list &__list {
+    padding-inline-start: ~"calc(@{markdownListIndent} * 2 / 3)";
+  }
+
+  // The marker kind lives on the list…
+  &__list {
+    padding-inline-start: @markdownListIndent;
+    list-style: disc;
+
+    &_ordered {
+      list-style: decimal;
+    }
+
+    // A nested list hangs closer to its parent item than a top-level block gap.
+    .smwb-markdown__list {
+      margin-block-start: ~"calc(@{markdownBlockGap} / 2)";
+    }
+  }
+
+  // …and reaches each item through `inherit`: normalize.css sets `list-style: none` on every
+  // `ul li` (0,0,2), and this class (0,1,0) wins over it.
+  &__item {
+    list-style: inherit;
+
+    // Loose list items stack their paragraphs like the root's blocks.
+    > * + * {
+      margin-block-start: ~"calc(@{markdownBlockGap} / 2)";
+    }
+
+    // A task item drops its marker, the checkbox leads it instead; plain items in the same list
+    // keep theirs. In a loose item the first paragraph runs on after the checkbox.
+    &_task {
+      list-style: none;
+
+      > .smwb-markdown__checkbox + .smwb-markdown__paragraph {
+        display: inline;
+      }
+    }
+  }
+
+  // normalize.css stretches every `input` to the full width and height of its parent; the
+  // checkbox keeps its own size so the item's text runs on beside it.
+  &__checkbox {
+    width: auto;
+    height: auto;
+    margin-block: 0;
+    margin-inline-end: 0.5em;
+    vertical-align: middle;
+    accent-color: var(--smui-primaryColor);
+  }
+
+  // A focusable scroll container: it keeps long lines inside itself, never the page.
+  &__code-block {
+    max-width: 100%;
+    overflow-x: auto;
+    contain: inline-size;
+    padding: @markdownCodeBlockPadding;
+    border-radius: @markdownCodeRadius;
+    background-color: @markdownCodeBackground;
+    white-space: pre;
+    overflow-wrap: normal;
+    tab-size: 4;
+
+    @supports not (contain: inline-size) {
+      width: 0;
+      min-width: 100%;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--smui-primaryColor);
+      outline-offset: 2px;
+    }
+  }
+
+  &__code,
+  &__inline-code {
+    font-family: @markdownCodeFontFamily;
+    font-size: @markdownCodeFontSize;
+  }
+
+  &__code {
+    padding: 0;
+    border-radius: 0;
+    background-color: transparent;
+  }
+
+  &__inline-code {
+    padding: @markdownInlineCodePadding;
+    border-radius: @markdownCodeRadius;
+    background-color: @markdownCodeBackground;
+    // The background (and padding), not the font, tells inline code apart: an app's own
+    // UI font may already be monospace, so a different family alone would read as plain text.
+  }
+
+  &__table-wrap {
+    max-width: 100%;
+    overflow-x: auto;
+    contain: inline-size;
+
+    @supports not (contain: inline-size) {
+      width: 0;
+      min-width: 100%;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--smui-primaryColor);
+      outline-offset: 2px;
+    }
+  }
+
+  // The cells carry the borders, so the grid reads both when the table fills the wrap
+  // and when the wrap scrolls sideways over a wider table.
+  &__table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  // Cells wrap at spaces only: with the root's `overflow-wrap: anywhere` every character would
+  // be a break, the table's min-content width would drop to nothing and a wide table would squeeze
+  // into the wrap instead of scrolling inside it. Prose in a cell still wraps.
+  &__cell {
+    overflow-wrap: normal;
+    padding: @markdownTableCellPadding;
+    border: 1px solid @markdownTableBorderColor;
+    text-align: left;
+
+    &_head {
+      background-color: @markdownTableHeadBackground;
+      font-weight: @markdownHeadingWeight;
+    }
+
+    &_align-left {
+      text-align: left;
+    }
+    &_align-center {
+      text-align: center;
+    }
+    &_align-right {
+      text-align: right;
+    }
+  }
+
+  &__link {
+    color: @markdownLinkColor;
+    text-decoration: underline;
+    text-underline-offset: 0.15em;
+
+    &:hover,
+    &:focus-visible {
+      text-decoration-thickness: 2px;
+    }
+  }
+
+  &__image {
+    max-width: 100%;
+    height: auto;
+  }
+
+  // Footnotes render where their definitions stand, with no ids or back-links.
+  &__footnote {
+    margin-inline: 0;
+    padding-inline-start: @markdownListIndent;
+
+    > * + * {
+      margin-block-start: @markdownBlockGap;
+    }
+  }
+
+  // The label leads the definition's first paragraph on its line.
+  &__footnote-label {
+    margin-inline-end: 0.5em;
+    font-weight: @markdownHeadingWeight;
+
+    + .smwb-markdown__paragraph {
+      display: inline;
+    }
+  }
+}
+
+// Forced colours drop background colours: the code surfaces become frames so they stay visible.
+@media (forced-colors: active) {
+  .smwb-markdown {
+    &__code-block,
+    &__inline-code {
+      border: 1px solid CanvasText;
+    }
+  }
+}

package/less/components.less

@@ -15,6 +15,7 @@
 @import "./components/meter/meter.less";
 @import "./components/diffStat/diffStat.less";
 @import "./components/statusDot/statusDot.less";
+@import "./components/identityBadge/identityBadge.less";
 @import "./components/qrCode/qrCode.less";
 @import "./components/radioButton/radioButton.less";
 @import "./components/sidebar/sidebar.less";
@@ -41,6 +42,7 @@
 @import "./components/grid/grid.less";
 @import "./components/tooltip/tooltip.less";
 @import "./components/kbd/kbd.less";
+@import "./components/markdown/markdown.less";
 @import "./components/commandPalette/commandPalette.less";
 @import "./components/sheet/sheet.less";
 @import "./components/floatingWindow/floatingWindow.less";

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

@@ -204,6 +204,20 @@
 @statusDotDiamondRotation: 45deg; // corner-up, the diamond of the onreel thread marker
 @statusDotDiamondRadius: @smui-radius-none; // sharp corners; the dot's are a circle
 
+// A compact identity marker sits inside a dense row, so its height is off-grid and below
+// the control scale on purpose: one 14px line at the DagView node's line-height 1.3.
+@identityBadgeHeight: 18px;
+@identityBadgePaddingX: @smui-space-xs; // 4px
+@identityBadgeGap: @smui-space-xxs; // 2px, icon to text
+@identityBadgeIconSize: 12px; // @smui-space-3
+@identityBadgeBorderWidth: 1px;
+@identityBadgeRadius: @smui-radius-sm;
+@identityBadgeFontFamily: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+@identityBadgeFontSize: 11px; // off-grid
+@identityBadgeFontWeight: 500;
+@identityBadgeColor: ~"var(--smui-onSurfaceVariant)"; // neutral, follows the dark theme; never a status token
+@identityBadgeGroupGap: @smui-space-xs; // 4px between badges
+
 // 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.
@@ -215,6 +229,35 @@
 @kbdKeyMinSize: 1.5em; // a key cap is square at one character
 @kbdKeyPaddingX: 0.375em;
 @kbdKeyRadius: @smui-radius-sm;
+
+// ---- Markdown ----
+// Prose of Markdown descriptions and comments. The colours are runtime tokens, so the
+// dark theme follows without a Dark set here.
+@markdownFontSize: @smui-font-body2-size; // 14px
+@markdownLineHeight: @smui-font-body2-lh; // 1.5
+@markdownBlockGap: @smui-space-md; // 12px between blocks
+@markdownHeadingWeight: 600;
+@markdownHeading1Size: 1.5em;
+@markdownHeading2Size: 1.3em;
+@markdownHeading3Size: 1.15em;
+@markdownHeading4Size: 1em;
+@markdownHeading5Size: 0.925em;
+@markdownHeading6Size: 0.85em;
+@markdownListIndent: 1.5em;
+@markdownLinkColor: ~"var(--smui-primaryColor)";
+@markdownCodeFontFamily: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+@markdownCodeFontSize: 0.9em;
+@markdownCodeBackground: ~"var(--smui-surfaceVariant)";
+@markdownCodeRadius: @smui-radius-sm;
+@markdownCodeBlockPadding: @smui-space-sm @smui-space-md;
+@markdownInlineCodePadding: 0.1em 0.35em;
+@markdownQuoteBorderWidth: 3px;
+@markdownQuoteBorderColor: ~"var(--smui-outlineColor)";
+@markdownQuoteColor: ~"var(--smui-onSurfaceVariant)";
+@markdownTableBorderColor: ~"var(--smui-tableBorderColor)";
+@markdownTableCellPadding: @smui-space-xs @smui-space-sm;
+@markdownTableHeadBackground: ~"var(--smui-surfaceVariant)";
+@markdownRuleColor: ~"var(--smui-dividerColor)";
 // ---- DiffStat ----
 @diffStatFontSize: 0.875rem;
 @diffStatCompactFontSize: 0.75rem; // a tab label

package/less/foundation/sizing.less

@@ -35,6 +35,8 @@
 //    - ProgressIndicator: indicator diameter (28px), not a control box
 //    - StatusDot: decorative dot (@statusDotSizeSm/Md); also uses the
 //      _size-sm suffix, a different class convention
+//    - IdentityBadge: compact identity marker (@identityBadgeHeight 18px),
+//      not a control — it must fit a dense TreeView row and a DagView node
 //    - Slider: size scales track thickness and thumb diameter, not a
 //      control height
 //    - Modal: size selects dialog width, not control height
@@ -53,7 +55,8 @@
 //  Menu dense items, List dense rows, and the targets the controls above do not
 //  cover: Composer icon buttons, Breadcrumbs "..." button, DagView zoom buttons,
 //  Slider rail and thumb zones, SelectField clear button and chip delete zones, Sheet
-//  header buttons, Table sort control, DatePicker adornment button). A mouse keeps the sizes above.
+//  header buttons, Table sort control, DatePicker adornment button, IdentityBadgeGroup's
+//  clickable "+N"). A mouse keeps the sizes above.
 //  Still exempt on touch: the --filled and --inline fields, the compact Toggle
 //  (capped at @toggleCompactMaxHeight) and a small Chip that is neither a button
 //  nor a link.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smwb/ui-styles",
-  "version": "2.6.0",
+  "version": "2.8.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": [