@repobit/dex-system-design 0.25.11 → 0.26.0

package/src/components/back/back.js

@@ -1,17 +1,33 @@
-import { LitElement, html } from "lit";
-import { tokens } from "../../tokens/tokens.js";
+import { LitElement, html, nothing } from "lit";
+// Installs the design tokens into document scope; see src/tokens/tokens.js
+import "../../tokens/tokens.js";
 import backCSS from "./back.css.js";
 
+/**
+ * The compact back control: an arrow and a short label.
+ *
+ * The accessible name is the label. `label=""` is a supported configuration --
+ * it renders the arrow alone -- and an arrow is not a name, so the host's
+ * `aria-label` is forwarded to the button for that case. Without it the button
+ * had no accessible name at all: measured on Atoms/Back "No Label", empty text
+ * content, no aria-label, and an svg with neither a title nor aria-hidden.
+ */
 export class BdBack extends LitElement {
   static properties = {
-    href : { type: String },
-    label: { type: String }
+    href     : { type: String },
+    label    : { type: String },
+    /**
+     * Read off the host so it can be put on the button, which is the element a
+     * screen reader actually lands on. Required when `label` is empty.
+     */
+    ariaLabel: { type: String, attribute: "aria-label" }
   };
 
   constructor() {
     super();
     this.href = "";
     this.label = "Back";
+    this.ariaLabel = null;
   }
 
   handleClick() {
@@ -24,8 +40,13 @@ export class BdBack extends LitElement {
 
   render() {
     return html`
-    <button class="bd-back" @click="${this.handleClick}">
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="mi-solid mi-arrow-back" viewBox="0 0 24 24">
+    <button
+      type="button"
+      class="bd-back"
+      aria-label="${this.ariaLabel ?? nothing}"
+      @click="${this.handleClick}"
+    >
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" aria-hidden="true" class="mi-solid mi-arrow-back" viewBox="0 0 24 24">
   <path d="M19 11H7.83l4.88-4.88c.39-.39.39-1.03 0-1.42a.996.996 0 0 0-1.41 0l-6.59 6.59a.996.996 0 0 0 0 1.41l6.59 6.59a.996.996 0 1 0 1.41-1.41L7.83 13H19c.55 0 1-.45 1-1s-.45-1-1-1"/>
 </svg>
       <span class="bd-back-label">${this.label}</span>
@@ -33,7 +54,7 @@ export class BdBack extends LitElement {
   `;
   }
 
-  static styles = [tokens, backCSS];
+  static styles = [backCSS];
 }
 
 customElements.define("bd-back", BdBack);

package/src/components/back/back.stories.js

@@ -2,7 +2,7 @@ import { html } from 'lit';
 import './back.js';
 
 export default {
-  title     : 'Components/Back',
+  title     : 'Atoms/Back',
   tags      : ['autodocs'],
   parameters: {
     docs: {
@@ -101,11 +101,17 @@ export const LongLabel = {
 
 export const NoLabel = {
   name      : 'No Label (empty string)',
-  render    : () => html`<bd-back label=""></bd-back>`,
+  render    : () => html`<bd-back label="" aria-label="Back to the product list"></bd-back>`,
   parameters: {
     docs: {
       description: {
-        story: 'Edge case: `label` set to an empty string. Only the arrow icon is visible.'
+        story: `\`label\` set to an empty string, so only the arrow renders — and an arrow
+                is not a name. Measured before P6C.2: the button had empty text content,
+                no \`aria-label\` and an svg with neither a title nor \`aria-hidden\`, which
+                is a control a screen reader announces as "button" and nothing else. The
+                arrow is \`aria-hidden\` now and the host's \`aria-label\` reaches the
+                button, which is what this story passes. An icon-only bd-back without one
+                has no accessible name.`
       }
     }
   }

package/src/components/badge/badge.css.js

@@ -1,72 +1,184 @@
 import { css } from "lit";
 
+/**
+ * Styled entirely from src/tokens/tokens.js — see CLAUDE.md, "The foundation
+ * rule". Values were matched to the ds-badge design by finding the token that
+ * already carries each value, never by copying a literal out of Figma.
+ */
 export default css`
   :host {
-    --badge-font-weight: var(--typography-fontWeight-medium);
-    --badge-font-family: var(--typography-fontFamily-sans, sans-serif);
-    --badge-padding: var(--spacing-4) var(--spacing-10);
-    --badge-border-radius: var(--spacing-16);
-    --badge-font-size: var(--typography-label-small-fontSize);
-    --badge-icon-size: 16px;
-    --badge-gap: var(--spacing-4);
+    display: inline-flex;
+    vertical-align: middle;
   }
 
   .badge {
     display: inline-flex;
     align-items: center;
-    gap: var(--badge-gap);
-    background-color: var(--badge-bg, var(--color-blue-500));
-    color: var(--color-neutral-0);
-    border-radius: var(--badge-border-radius);
-    font-size: var(--badge-font-size);
-    font-weight: var(--badge-font-weight);
-    font-family: var(--badge-font-family);
-    line-height: 1;
-    padding: var(--badge-padding);
+    justify-content: center;
+    gap: var(--spacing-4);
+    box-sizing: border-box;
+    font-family: var(--typography-fontFamily-sans);
+    font-weight: var(--typography-control-label-small-fontWeight);
+    line-height: var(--typography-control-label-small-lineHeight);
+    border-radius: var(--radius-full);
     white-space: nowrap;
     user-select: none;
-    vertical-align: middle;
-    box-sizing: border-box;
-    position: relative;
   }
 
-  .badge-icon {
-    display: inline-block;
-    flex-shrink: 0;
-    width: var(--badge-icon-size);
-    height: var(--badge-icon-size);
-    background-repeat: no-repeat;
-    background-position: center center;
-    background-size: contain;
+  /* ---- size -------------------------------------------------------------
+     sm and md share their padding and differ only in type size, which is what
+     makes them 22px and 23px tall. lg steps both up. */
+  :host([size='sm']) .badge {
+    /* no role: this rung sits below the control-label-* family's floor. The
+       base rule takes its weight and leading from control-label-small and the
+       lg rung takes its size from control-label-default, so the ladder already
+       resolves through the family -- but the family's smallest size is xs, and
+       this is xxs. label-extra-small is the only declared role at this size and
+       it carries normal leading where this badge is tight, so it describes
+       different text. The family was deliberately scoped to four rungs; adding
+       a fifth for one consumer is what the token-hygiene item exists to resist,
+       so the size stays a primitive and says why. */
+    font-size: var(--typography-fontSize-xxs);
+    padding: var(--spacing-4) var(--spacing-8);
+  }
+
+  :host([size='md']) .badge,
+  :host(:not([size])) .badge {
+    /* control-label-small's size, completing the rung: the base rule already
+       takes this text's weight and leading from that role, so the size is its
+       third axis rather than a separate choice. */
+    font-size: var(--typography-control-label-small-fontSize);
+    padding: var(--spacing-4) var(--spacing-8);
+  }
+
+  :host([size='lg']) .badge {
+    font-size: var(--typography-control-label-default-fontSize);
+    padding: var(--spacing-8) var(--spacing-12);
+  }
+
+  /* ---- tone × variant --------------------------------------------------
+     shade is a tinted background with dark text; fill is a saturated
+     background. Defaults below are the shade/default pair. */
+  /* Grey, not blue: a tone called "default" reading as pale blue is
+     surprising, and it left default and primary sharing a background while
+     differing only in text colour.
+
+     A badge takes the heavier tint and a tag the lighter one, so the two read
+     apart. Neutral follows that; it used to sit on the lighter grey, which made
+     a neutral badge and a neutral tag the same colour. */
+  .badge {
+    color: var(--status-neutral-text);
+    background: var(--status-neutral-surface-strong);
   }
 
+  /* Brand is the one tone that stays on the lighter tint. Its heavier tint
+     would be blue-100, which is info's, and a brand badge would then be
+     indistinguishable from an info badge. Telling brand from info matters more
+     than telling a brand badge from a brand tag, so brand has no heavier tint
+     at all. */
+  :host([tone='brand']) .badge {
+    color: var(--status-brand-text);
+    background: var(--status-brand-surface);
+  }
 
+  :host([tone='success']) .badge {
+    /* green-800 rather than green-700: on green-100 that is 5.93:1 against
+       4.17:1, and it matches the step the warning tone already uses */
+    color: var(--status-success-text);
+    background: var(--status-success-surface-strong);
+  }
 
-  /* Stil pentru badge-ul bd-light-blue */
-  .badge.bd-light-blue {
-    background-color: var(--color-blue-500);
-    color: var(--color-neutral-0);
+  :host([tone='warning']) .badge {
+    color: var(--status-warning-text);
+    background: var(--status-warning-surface-strong);
   }
 
-  /* Stil pentru badge-ul bd-light-green */
-  .badge.bd-light-green {
-    background-color: var(--color-green-100);
-    color: var(--color-green-800);
+  :host([tone='error']) .badge {
+    color: var(--status-error-text);
+    background: var(--status-error-surface-strong);
   }
 
-  /* Stiluri pentru variantele cu size (doar ajustări de icon și gap) */
-  .badge.sm {
-    --badge-icon-size: 14px;
-    --badge-gap: var(--spacing-2);
+  :host([tone='info']) .badge {
+    color: var(--status-info-text);
+    background: var(--status-info-surface-strong);
   }
 
-  .badge.md {
-    --badge-icon-size: 16px;
-    --badge-gap: var(--spacing-4);
+  :host([variant='fill']) .badge {
+    color: var(--status-neutral-on-fill);
+    background: var(--status-neutral-fill);
+  }
+
+  :host([variant='fill'][tone='brand']) .badge {
+    color: var(--status-brand-on-fill);
+    background: var(--status-brand-fill);
+  }
+
+  /* Info reads its own fill roles, not brand's. The two resolve to the same
+     blue-500 today, which is why info used to borrow brand's; sharing a value
+     is not sharing a role, and borrowing meant a change to brand's fill would
+     have moved every filled info badge with it. */
+  :host([variant='fill'][tone='info']) .badge {
+    color: var(--status-info-on-fill);
+    background: var(--status-info-fill);
+  }
+
+  /* green-700 with a white label, rather than the design's green-500 with a
+     dark one. green-700 is the lightest step in the family that carries white
+     text at 4.5:1 — it measures 4.75, where green-600 is only 3.20. It also
+     lines up with the success dot, which already uses green-700. */
+  :host([variant='fill'][tone='success']) .badge {
+    color: var(--status-success-on-fill);
+    background: var(--status-success-fill);
+  }
+
+  :host([variant='fill'][tone='warning']) .badge {
+    color: var(--status-warning-on-fill);
+    background: var(--status-warning-fill);
+  }
+
+  :host([variant='fill'][tone='error']) .badge {
+    color: var(--status-error-on-fill);
+    background: var(--status-error-fill);
+  }
+
+  /* ---- mode: dot ------------------------------------------------------
+     The design keeps the dot at one size across sm/md/lg, so size has no
+     effect in this mode.
+
+     variant has no effect either. A dot has no text, so there is no
+     foreground/background pair for shade and fill to describe — the colour
+     *is* the content. That also means it has to carry itself on the page:
+     WCAG 1.4.11 wants 3:1 for a graphical object whose colour conveys
+     meaning, and the tint steps the shade text sits on measure 1.08 to 1.33.
+     Each tone therefore uses a saturated step chosen to clear 3:1. */
+  :host([mode='dot']) .badge {
+    width: var(--spacing-8);
+    height: var(--spacing-8);
+    padding: 0;
+    gap: 0;
+  }
+
+  :host([mode='dot']) .badge                 { background: var(--status-neutral-accent); }
+  :host([mode='dot'][tone='brand']) .badge { background: var(--status-brand-accent); }
+  /* green-700 rather than the lighter steps: green-500 measures 2.39 and
+     green-600 only 3.20, where 700 gives 4.75 and still reads as green */
+  :host([mode='dot'][tone='success']) .badge { background: var(--status-success-accent); }
+  /* yellow is inherently light — 700 at 3.61 is the lightest step that both
+     clears 3:1 and still reads as yellow rather than brown */
+  :host([mode='dot'][tone='warning']) .badge { background: var(--status-warning-accent); }
+  :host([mode='dot'][tone='error']) .badge   { background: var(--status-error-accent); }
+  :host([mode='dot'][tone='info']) .badge    { background: var(--status-info-accent); }
+
+  /* ---- mode: count ----------------------------------------------------
+     Digits are set tabular so a counter does not change width as it counts:
+     measured, "12" and "99" both come out at the same width. The padding
+     already makes a single digit near-circular, so no min-width is needed. */
+  :host([mode='count']) .badge {
+    font-variant-numeric: tabular-nums;
   }
 
-  .badge.lg {
-    --badge-icon-size: 18px;
-    --badge-gap: var(--spacing-6);
+  /* ---- icon ------------------------------------------------------------ */
+  ::slotted(*) {
+    flex: none;
   }
-`;
+`;

package/src/components/badge/badge.js

@@ -1,108 +1,96 @@
 import { LitElement, html } from 'lit';
-import { tokens } from "../../tokens/tokens.js";
+// Installs the design tokens into document scope; see src/tokens/tokens.js
+import "../../tokens/tokens.js";
 import "../icons/family-icon.js";
 import "../icons/individual-icon.js";
 import badgeCSS from './badge.css.js';
 
+/**
+ * Maps the pre-ds-badge `variant` values onto the tone/variant pair that
+ * reproduces them, so existing markup keeps rendering the same thing.
+ */
+const LEGACY_VARIANTS = {
+  'bd-light-blue' : { tone: 'brand', variant: 'fill' },     // blue-500 / neutral-0
+  'bd-light-green': { tone: 'success', variant: 'shade' }   // green-100 / green-800
+};
+
+const MODES = ['text', 'dot', 'count'];
+const SIZES = ['sm', 'md', 'lg'];
+/**
+ * The six tones bd-badge, bd-tag and bd-alert now share. `default` and
+ * `primary` are the names this component started with and keep working; they
+ * resolve to `neutral` and `brand`, which say what they mean and are what the
+ * other two already called them. `primary` in particular collided with
+ * bd-button's primary kind while describing something else entirely.
+ */
+const TONES = ['neutral', 'brand', 'success', 'warning', 'error', 'info'];
+const LEGACY_TONES = { default: 'neutral', primary: 'brand' };
+const VARIANTS = ['shade', 'fill'];
+
 export class BdBadge extends LitElement {
-  static styles = [tokens, badgeCSS];
+  static styles = [badgeCSS];
 
   static properties = {
-    color     : { type: String },
-    variant   : { type: String },
-    size      : { type: String },    // sm, md, lg
-    fontsize  : { type: String },    // 12, 14, 16
-    fontweight: { type: String },    // 400, 500, 600, 700, etc.
-    icon      : { type: String }     // individual, family
+    mode   : { type: String, reflect: true },  // text, dot, count
+    size   : { type: String, reflect: true },  // sm, md, lg
+    tone   : { type: String, reflect: true },  // neutral, brand, success, warning, error, info
+    variant: { type: String, reflect: true },  // shade, fill
+    icon   : { type: String },                 // individual, family
+    label  : { type: String }                  // accessible name for mode="dot"
   };
 
   constructor() {
     super();
-    this.color = '';
-    this.variant = '';
+    this.mode = 'text';
     this.size = 'md';
-    this.fontsize = '';
-    this.fontweight = '';
+    this.tone = 'neutral';
+    this.variant = 'shade';
     this.icon = '';
+    this.label = '';
   }
 
-  updated(changed) {
-    if (changed.has('color')) {
-      this.style.setProperty('--badge-bg', this.color || '');
-    }
-
-    if (changed.has('size') || changed.has('fontsize')) {
-      this._updateSizeStyles();
-    }
-
-    if (changed.has('fontweight')) {
-      this._updateFontWeight();
-    }
-  }
-
-  _updateSizeStyles() {
-    const sizeMap = {
-      'sm': {
-        padding     : 'var(--spacing-2) var(--spacing-8)',
-        borderRadius: 'var(--spacing-12)',
-        fontSize    : 'var(--typography-label-extra-small-fontSize)'
-      },
-      'md': {
-        padding     : 'var(--spacing-4) var(--spacing-10)',
-        borderRadius: 'var(--spacing-16)',
-        fontSize    : 'var(--typography-label-small-fontSize)'
-      },
-      'lg': {
-        padding     : 'var(--spacing-6) var(--spacing-12)',
-        borderRadius: 'var(--spacing-20)',
-        fontSize    : 'var(--typography-label-default-fontSize)'
-      }
-    };
-
-    const fontSizeMap = {
-      '12': 'var(--typography-label-small-fontSize)',
-      '14': 'var(--typography-label-default-fontSize)',
-      '16': 'var(--typography-label-large-fontSize)'
-    };
-
-    if (this.size && sizeMap[this.size]) {
-      const sizeStyle = sizeMap[this.size];
-      this.style.setProperty('--badge-padding', sizeStyle.padding);
-      this.style.setProperty('--badge-border-radius', sizeStyle.borderRadius);
-
-      if (!this.fontsize) {
-        this.style.setProperty('--badge-font-size', sizeStyle.fontSize);
-      }
+  willUpdate(changed) {
+    if (changed.has('variant') && LEGACY_VARIANTS[this.variant]) {
+      const { tone, variant } = LEGACY_VARIANTS[this.variant];
+      this.tone = tone;
+      this.variant = variant;
     }
 
-    if (this.fontsize && fontSizeMap[this.fontsize]) {
-      this.style.setProperty('--badge-font-size', fontSizeMap[this.fontsize]);
-    }
-  }
-
-  _updateFontWeight() {
-    if (this.fontweight) {
-      this.style.setProperty('--badge-font-weight', this.fontweight);
+    // an unset or unrecognised value falls back to the default rather than
+    // dropping out of every selector and rendering unstyled
+    if (changed.has('mode') && !MODES.includes(this.mode)) this.mode = 'text';
+    if (changed.has('size') && !SIZES.includes(this.size)) this.size = 'md';
+    if (changed.has('tone')) {
+      if (LEGACY_TONES[this.tone]) this.tone = LEGACY_TONES[this.tone];
+      else if (!TONES.includes(this.tone)) this.tone = 'neutral';
     }
+    if (changed.has('variant') && !VARIANTS.includes(this.variant)) this.variant = 'shade';
   }
 
   _renderIcon() {
-    if (!this.icon) return '';
-    const color = this.variant === 'bd-light-green' ? '#0b6a26' : 'white';
+    if (!this.icon || this.mode === 'dot') return '';
 
+    // currentColor makes the icon follow the tone's text colour, so there is
+    // no per-tone icon colour to keep in step
     switch (this.icon) {
       case 'individual':
-        return html`<bd-individual-icon size="16" color="${color}"></bd-individual-icon>`;
+        return html`<bd-individual-icon size="16" color="currentColor"></bd-individual-icon>`;
       case 'family':
-        return html`<bd-family-icon size="16" color="${color}"></bd-family-icon>`;
+        return html`<bd-family-icon size="16" color="currentColor"></bd-family-icon>`;
       default:
         return '';
     }
   }
 
   render() {
-    return html`
-      <span class="badge ${this.variant} ${this.size}">
+    // a dot renders no text, so it needs a name of its own. Reading
+    // textContent here would be unreliable — light DOM children are not
+    // guaranteed to be parsed at first update, and later edits to them would
+    // not trigger a re-render.
+    return this.mode === 'dot'
+      ? html`<span class="badge" role="img" aria-label="${this.label || this.tone}"></span>`
+      : html`
+      <span class="badge">
         ${this._renderIcon()}
         <slot></slot>
       </span>
@@ -110,4 +98,4 @@ export class BdBadge extends LitElement {
   }
 }
 
-customElements.define('bd-badge', BdBadge);
+customElements.define('bd-badge', BdBadge);