@smwb/ui-styles 2.6.0 → 2.7.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`

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.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";

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.

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.7.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": [