@repobit/dex-system-design 0.25.12 → 1.0.0

package/src/blog/tokens.css

@@ -225,20 +225,19 @@
      CORE DIMENSION TOKENS
      ================================ */
 
---dimension-2px: 2px;
---dimension-4px: 4px;
---dimension-8px: 8px;
---dimension-12px: 12px;
---dimension-16px: 16px;
---dimension-20px: 20px;
---dimension-24px: 24px;
---dimension-32px: 32px;
---dimension-34px: 34px;
---dimension-40px: 40px;
---dimension-45px: 45px;
---dimension-48px: 48px;
---dimension-55px: 55px;
---dimension-64px: 64px;
+--dimension-4: 4px;
+--dimension-8: 8px;
+--dimension-12: 12px;
+--dimension-16: 16px;
+--dimension-20: 20px;
+--dimension-24: 24px;
+--dimension-32: 32px;
+--dimension-36: 36px;
+--dimension-40: 40px;
+--dimension-44: 44px;
+--dimension-48: 48px;
+--dimension-56: 56px;
+--dimension-64: 64px;
 
 /* ================================
      CORE TRANSITION TOKENS
@@ -548,17 +547,17 @@
 --form-label-required-color: var(--color-red-500);
 --form-label-required-marginLeft: var(--spacing-1);
 
---form-input-small-height: var(--dimension-34px);
+--form-input-small-height: var(--dimension-36);
 --form-input-small-fontSize: var(--typography-fontSize-sm);
 --form-input-small-padding: var(--spacing-8) var(--spacing-12);
 --form-input-small-borderRadius: var(--radius-sm);
 
---form-input-medium-height: var(--dimension-45px);
+--form-input-medium-height: var(--dimension-44);
 --form-input-medium-fontSize: var(--typography-fontSize-base);
 --form-input-medium-padding: var(--spacing-12) var(--spacing-16);
 --form-input-medium-borderRadius: var(--radius-md);
 
---form-input-large-height: var(--dimension-55px);
+--form-input-large-height: var(--dimension-56);
 --form-input-large-fontSize: var(--typography-fontSize-lg);
 --form-input-large-padding: var(--spacing-16) var(--spacing-20);
 --form-input-large-borderRadius: var(--radius-lg);
@@ -609,21 +608,21 @@
 --button-size-small-padding-vertical: var(--spacing-2);
 --button-size-small-padding-horizontal: var(--spacing-4);
 --button-size-small-fontSize: var(--typography-fontSize-sm);
---button-size-small-height: var(--dimension-34px);
+--button-size-small-height: var(--dimension-36);
 --button-size-small-borderRadius: var(--radius-sm);
 --button-size-small-gap: var(--spacing-1);
 
 --button-size-medium-padding-vertical: var(--spacing-12);
 --button-size-medium-padding-horizontal: var(--spacing-20);
 --button-size-medium-fontSize: var(--typography-fontSize-base);
---button-size-medium-height: var(--dimension-45px);
+--button-size-medium-height: var(--dimension-44);
 --button-size-medium-borderRadius: var(--radius-md);
 --button-size-medium-gap: var(--spacing-2);
 
 --button-size-large-padding-vertical: var(--spacing-4);
 --button-size-large-padding-horizontal: var(--spacing-6);
 --button-size-large-fontSize: var(--typography-fontSize-lg);
---button-size-large-height: var(--dimension-55px);
+--button-size-large-height: var(--dimension-56);
 --button-size-large-borderRadius: var(--radius-lg);
 --button-size-large-gap: var(--spacing-2);
 
@@ -780,21 +779,21 @@
      COMPONENT TOKENS - ICON
      ================================ */
 
---icon-xs-size: var(--dimension-12px);
---icon-sm-size: var(--dimension-16px);
---icon-md-size: var(--dimension-20px);
---icon-lg-size: var(--dimension-24px);
---icon-xl-size: var(--dimension-32px);
---icon-2xl-size: var(--dimension-48px);
---icon-3xl-size: var(--dimension-64px);
+--icon-xs-size: var(--dimension-12);
+--icon-sm-size: var(--dimension-16);
+--icon-md-size: var(--dimension-20);
+--icon-lg-size: var(--dimension-24);
+--icon-xl-size: var(--dimension-32);
+--icon-2xl-size: var(--dimension-48);
+--icon-3xl-size: var(--dimension-64);
 
---icon-button-small-size: var(--dimension-16px);
---icon-button-medium-size: var(--dimension-20px);
---icon-button-large-size: var(--dimension-24px);
+--icon-button-small-size: var(--dimension-16);
+--icon-button-medium-size: var(--dimension-20);
+--icon-button-large-size: var(--dimension-24);
 
---icon-form-small-size: var(--dimension-16px);
---icon-form-medium-size: var(--dimension-20px);
---icon-form-large-size: var(--dimension-24px);
+--icon-form-small-size: var(--dimension-16);
+--icon-form-medium-size: var(--dimension-20);
+--icon-form-large-size: var(--dimension-24);
 
 --icon-default-color: var(--color-text-secondary);
 --icon-hover-color: var(--color-neutral-700);
@@ -808,6 +807,7 @@
 --icon-success-color: var(--color-green-500);
 --icon-warning-color: var(--color-yellow-500);
 --icon-error-color: var(--color-red-500);
+
 /* ================================
      BLOG — LAYOUT
      ================================ */
@@ -915,7 +915,7 @@
 --blog-byline-fontSize: var(--typography-fontSize-sm);
 --blog-byline-color: var(--color-text-secondary);
 --blog-byline-gap: var(--spacing-12);
---blog-byline-avatar-size: var(--dimension-40px);
+--blog-byline-avatar-size: var(--dimension-40);
 
 --blog-date-color: var(--color-text-muted);
 --blog-reading-time-color: var(--color-text-muted);
@@ -940,7 +940,7 @@
 --blog-tag-padding: var(--spacing-4) var(--spacing-8);
 --blog-tag-fontSize: var(--typography-label-default-fontSize);
 --blog-tag-fontWeight: var(--typography-label-default-fontWeight);
---blog-tag-lineHeight: var(--dimension-20px);
+--blog-tag-lineHeight: var(--typography-lineHeight-snug);
 --blog-tag-borderRadius: var(--radius-full);
 --blog-tag-border-width: var(--border-width-1);
 --blog-tag-gap: var(--spacing-8);
@@ -1211,6 +1211,7 @@
 --blog-newsletter-disclaimer-max-width: 28rem;
 --blog-newsletter-spacing-top: var(--spacing-48);
 --blog-newsletter-spacing-bottom: var(--spacing-32);
+
 /* ================================
      LEGACY ALIASES (DEPRECATED)
      Do not add new references — use core tokens instead.
@@ -1232,25 +1233,16 @@
 --display-large-mobile: 2.75rem;
 --display-xlarge-mobile: 3rem;
 
---display-xlarge-line-height: 1.1;
---display-medium-line-height: 1.15;
---display-xlarge-mobile-line-height: 1.15;
---display-medium-mobile-line-height: 1.2;
-
 /* Heading sizes (legacy names — map to current scale) */
 --heading-xxsmall: var(--typography-fontSize-lg);
 --heading-xsmall: var(--typography-fontSize-xl);
 --heading-medium: 1.75rem;
 --heading-xlarge: var(--typography-fontSize-4xl);
 --heading-xxlarge: 2.5rem;
---heading-xlarge-line-height: 1.2;
---typography-heading-h4-fontSize-line-height: 1.3;
 
 /* Body sizes (legacy names) */
 --body-small: 0.8125rem;
 --body-xlarge: var(--typography-fontSize-lg);
---typography-body-regular-fontSize-line-height: var(--typography-lineHeight-normal);
---typography-label-small-fontSize-line-height: 1.35;
 
 /* Font family shorthand (legacy) */
 --font-family-mono: var(--typography-fontFamily-mono);
@@ -1267,7 +1259,6 @@
 --font-style-sans-normal: normal;
 --font-style-sans-italic: italic;
 }
-
 /* Load once globally — do not import into Lit shadow styles */
 
 @font-face {
@@ -1509,4 +1500,3 @@
   font-display: swap;
   src: url("/assets/fonts/IBMPlexSansCondensed-SemiBoldItalic.woff2") format("woff2");
 }
-

package/src/components/accordion/accordion-bg.css.js

@@ -2,14 +2,13 @@ import { css } from "lit";
 
 export default css`
   :host {
-    --bd-accesibility-focus: var(--color-blue-500);
     display: block;
   }
 
   :host(bd-accordion-bg-item[data-variant="terms-of-use"]) {
     background-color: transparent !important;
     padding: 0;
-    border-radius: 0;
+    border-radius: var(--radius-none);
   }
 
   :host(bd-accordion-bg-item) {
@@ -17,34 +16,34 @@ export default css`
     margin-bottom: var(--spacing-16);
     padding: 0 var(--spacing-16);
     box-sizing: border-box;
-    background-color: var(--color-blue-50);
+    background-color: var(--status-brand-surface);
     border-radius: var(--radius-lg);
     overflow: visible;
   }
 
-  :host(bd-accordion-bg-item[data-bd-acc-focus]) {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--color-neutral-0),
-      0 0 0 4px var(--color-blue-700);
-    position: relative;
-    z-index: 1;
-    border-radius: var(--radius-sm);
-  }
-
-  :host(bd-accordion-bg-item[data-variant="terms-of-use"][data-bd-acc-focus]) {
-    box-shadow: var(--focus-outline-primary);
-    border-radius: var(--radius-sm);
+  /* The ring is accordion.css.js's :host([data-bd-acc-focus]), which this
+     element adopts, so there is one ring rule for the whole family and nothing
+     here that could give one variant a different colour -- the divergence P5G
+     found and P5G.1 closed stays closed by construction.
+
+     What this sheet adds is shape, not colour. The ring follows the item's own
+     corner: --radius-lg on the tinted FAQ item, which is right. The terms-of-use
+     and no-bg items are transparent boxes with --radius-none, so their ring
+     would be a hard rectangle, which Foundations/Focus says the ring should
+     not be on an element with no shape of its own. They take the focus radius
+     while focused. That changes no resting pixel -- these hosts paint no
+     background and no border -- and it is the same radius the trigger used to
+     take for the same reason. */
+  :host(bd-accordion-bg-item[data-variant="terms-of-use"][data-bd-acc-focus]),
+  :host(bd-accordion-bg-item[no-bg][data-bd-acc-focus]) {
+    border-radius: var(--focus-outline-radius);
   }
 
-  // :host(bd-accordion-bg-item:last-of-type) {
-  //   margin-bottom: 0;
-  // }
-
   :host(bd-accordion-bg-item[no-bg]) {
     margin-bottom: var(--spacing-16);
     padding: 0;
     background-color: transparent;
-    border-radius: 0;
+    border-radius: var(--radius-none);
     overflow: visible;
   }
 
@@ -52,11 +51,6 @@ export default css`
     margin-bottom: 0;
   }
 
-  :host(bd-accordion-bg-item[no-bg][data-bd-acc-focus]) {
-    border-radius: var(--radius-sm);
-    box-shadow: var(--focus-outline-primary);
-  }
-
   /* bd-p in bd-accordion-bg — fara padding bottom */
   ::slotted(bd-p) {
     padding-bottom: 0;
@@ -82,7 +76,7 @@ export default css`
 }
   .bd-accordion-bg-item {
     margin-bottom: 0;
-    border-radius: 0;
+    border-radius: var(--radius-none);
     background-color: transparent;
     overflow: visible;
     transition: box-shadow var(--transition-duration-slow)
@@ -101,34 +95,37 @@ export default css`
     border: none;
     font: inherit;
     text-align: left;
-    font-family: var(--typography-fontFamily-sans);
-    font-size: var(--typography-fontSize-lg);
-    font-weight: var(--typography-fontWeight-semibold);
-    line-height: 1.3;
+    font-family: var(--typography-control-label-xl-fontFamily);
+    font-size: var(--typography-control-label-xl-fontSize);
+    font-weight: var(--typography-control-label-xl-fontWeight);
+    line-height: var(--typography-control-label-xl-lineHeight);
     background-color: transparent;
-    color: var(--color-neutral-900);
+    color: var(--color-text-primary);
     transition: color var(--transition-duration-normal) var(--transition-easing-smooth);
   }
 
   .bd-accordion-bg-question[aria-expanded="true"] {
-    color: var(--color-blue-500);
+    /* 18px/600 on the blue-50 item ground — below WCAG large (18.66px bold),
+       so it needs 4.5:1. blue-500 measured 4.20:1. */
+    color: var(--color-text-brand);
   }
 
   .bd-accordion-bg-question[aria-expanded="false"] {
-    color: var(--color-neutral-900);
+    color: var(--color-text-primary);
   }
 
   .bd-accordion-bg-question:hover {
-    color: var(--color-blue-600);
+    color: var(--color-text-brand);
   }
 
   .bd-accordion-bg-question:hover .bd-accordion-bg-question-text {
     text-decoration-line: none;
   }
 
+  /* No ring on the trigger; see the note on .header:focus-visible in
+     accordion.css.js. The item draws it. */
   .bd-accordion-bg-question:focus-visible {
     outline: none;
-    box-shadow: none;
   }
 
   .bd-accordion-bg-header {
@@ -142,8 +139,6 @@ export default css`
   }
 
   .bd-accordion-bg-title {
-    font-family: var(--typography-fontFamily-sans);
-    font-weight: var(--typography-fontWeight-semibold);
     margin-left: auto;
     margin-right: auto;
     text-align: center;
@@ -157,17 +152,25 @@ export default css`
     display: flex;
     align-items: center;
     justify-content: center;
-    line-height: 0;
+    /* the box holds an icon, not text; none collapses the leading to the
+       glyph rather than reserving a text line around it */
+    line-height: var(--typography-lineHeight-none);
     user-select: none;
-    margin-top: calc((1.3 * 1em - var(--icon-sm-size)) / 2);
-  }
-
-  .bd-accordion-bg-icon img {
-    display: block;
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-  }
+    /* Derived, like accordion.css.js's .toggle: half the difference between
+       the first line box and the glyph. The 1.3 that stood here was a literal
+       and it did not match this question's own leading -- the text is set at
+       control-label-xl, whose line-height is tight (1.25) -- so the glyph sat
+       below the optical centre of the type it is meant to align with. */
+    margin-top: calc(
+      (var(--typography-control-label-xl-lineHeight) * 1em - var(--icon-sm-size)) / 2
+    );
+  }
+
+  /* A ".bd-accordion-bg-icon img" rule stood here and could never match, for
+     the same reason as accordion.css.js's ".toggle img": the icon is
+     <bd-plus-icon> or <bd-minus-icon> with size and color as props, not an
+     <img> this stylesheet can reach. Those props carry --color-text-brand for
+     the reason accordion.css.js records at the same rule. */
 
   .bd-accordion-bg-answer {
     overflow: hidden;
@@ -177,10 +180,20 @@ export default css`
       calc(var(--icon-sm-size) + var(--spacing-12));
     background-color: transparent;
     font-family: var(--typography-fontFamily-sans);
-    font-size: var(--typography-fontSize-sm);
-    font-weight: var(--typography-fontWeight-normal);
-    line-height: var(--typography-lineHeight-normal);
-    color: var(--color-neutral-700);
+    /* body-small: sm / normal / 1.5, which is what this already rendered on all
+       three axes. Only the axes this rule declares are adopted -- the role also
+       carries a family and a tracking, and importing those would change text
+       the rule never spoke for. */
+    font-size: var(--typography-body-small-fontSize);
+    font-weight: var(--typography-body-small-fontWeight);
+    line-height: var(--typography-body-small-lineHeight);
+    /* -primary, the default ink. This said -secondary from the day it was
+       written, and nothing ever argued for it: it arrived as a raw
+       --color-neutral-700 and the token migration only renamed the step to
+       whichever role carries that value. -secondary is for supporting copy
+       UNDER a title; an answer is the payload of the disclosure, which is body
+       copy, and every accordion panel already resolves to -primary. */
+    color: var(--color-text-primary);
     transition: none;
   }
 
@@ -200,9 +213,13 @@ export default css`
     margin: var(--spacing-0);
   }
 
-  .bd-accordion-bg-answer > div {
-    overflow: hidden;
-  }
+  /* A ".bd-accordion-bg-answer > div { overflow: hidden }" rule stood here and
+     could never match, and its reason differs from the icon rules above. The
+     answer region contains a single <slot>, so its children in the SHADOW tree
+     are the slot, not the consumer's markup -- a child combinator never reaches
+     slotted content. ::slotted(div) would, and is deliberately not substituted:
+     nothing has been clipping here, so turning the clip on now is a behaviour
+     change to every accordion body, not a repair. */
 
   /* FAQ container — padding 64px top/bottom */
   .bd-accordion-bg-container {
@@ -220,11 +237,8 @@ export default css`
     padding-bottom: 0;
   }
 
-  /* Inner — max-width 1290px centrat */
+  /* Inner — the page column, centred */
   .bd-accordion-bg-inner {
-    max-width: 1290px;
-    margin-inline: auto;
-    padding-inline: var(--layout-ensemble-inline-padding, var(--spacing-24));
     box-sizing: border-box;
   }
 
@@ -253,4 +267,14 @@ export default css`
   .bd-accordion-bg-item.no-bg .bd-accordion-bg-question:hover .bd-accordion-bg-question-text {
     text-decoration-line: none;
   }
-`;
+
+  /* A reader who asked for less motion was still getting the item shadow and the question colour. Twenty-three
+     of the thirty animated directories in this package honour the query; this
+     one did not. */
+  @media (prefers-reduced-motion: reduce) {
+    .bd-accordion-bg-item,
+    .bd-accordion-bg-question {
+      transition: none;
+    }
+  }
+`;

package/src/components/accordion/accordion-bg.js

@@ -1,11 +1,14 @@
 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 "../heading/heading.js";
 import "../icons/minus-icon.js";
 import "../icons/plus-icon.js";
 import "../paragraph/paragraph.js";
 import accordionCSS from "./accordion-bg.css.js";
+import { ensembleCSS } from "../shared/ensemble.css.js";
 import { accordionItem, accordionSection } from "./accordion.css.js";
+import { onTriggerKeydown } from "./accordion-keyboard.js";
 
 class BdAccordionBg extends LitElement {
   static properties = {
@@ -30,7 +33,7 @@ class BdAccordionBg extends LitElement {
     this.guideHref  = "#";
   }
 
-  static styles = [tokens, accordionCSS, accordionSection];
+  static styles = [ensembleCSS, accordionCSS, accordionSection];
 
   connectedCallback() {
     super.connectedCallback();
@@ -71,7 +74,7 @@ class BdAccordionBg extends LitElement {
   _renderFaq() {
     return html`
     <div class="bd-accordion-bg-container ${this.noBg ? "no-bg" : ""} ${this.noPadding ? "no-padding" : ""}">
-      <div class="bd-accordion-bg-inner">
+      <div class="bd-ensemble bd-accordion-bg-inner">
         <div class="bd-accordion-bg-header">
           <bd-h as="h2" class="bd-accordion-bg-title">${this.title}</bd-h>
         </div>
@@ -87,7 +90,7 @@ class BdAccordionBg extends LitElement {
     <div class="bd-accordion-section-container">
       <div class="bd-accordion-section-inner">
         ${this.title
-          ? html`<bd-h as="h6" paddingBottom="var(--spacing-32)" fontWeight="700" class="section-title">${this.title}</bd-h>`
+          ? html`<bd-h as="h6" paddingBottom="32" fontWeight="bold" class="section-title">${this.title}</bd-h>`
           : ""}
         <slot></slot>
         <slot name="footer"></slot>
@@ -96,7 +99,7 @@ class BdAccordionBg extends LitElement {
               <p class="user-guide-link">
                 <a href=${this.guideHref}>
                   ${this.guideIcon
-                    ? html`<bd-plus-icon  size="16" color="#006DFF"></bd-plus-icon>`
+                    ? html`<bd-plus-icon  size="16" color="var(--color-text-brand)"></bd-plus-icon>`
                     : ""}
                   ${this.guideLabel}
                 </a>
@@ -136,7 +139,7 @@ class BdAccordionBgItem extends LitElement {
     this._panelId  = `acc-bg-p-${id}`;
   }
 
-  static styles = [tokens, accordionCSS, accordionItem];
+  static styles = [accordionCSS, accordionItem];
 
   connectedCallback() {
     super.connectedCallback();
@@ -169,6 +172,10 @@ class BdAccordionBgItem extends LitElement {
     this.open = !this.open;
   }
 
+  /* See the note on _onTriggerFocusIn in accordion.js: the trigger is the
+     focus target, the item draws the ring, and this attribute is how the host
+     learns the trigger is :focus-visible. Re-run on keydown for the reason
+     given there. */
   _onTriggerFocusIn() {
     const btn = this.renderRoot?.querySelector(".bd-accordion-bg-question, .header");
     if (!btn) return;
@@ -185,6 +192,16 @@ class BdAccordionBgItem extends LitElement {
     this.removeAttribute("data-bd-acc-focus");
   }
 
+  _onTriggerKeydown(e) {
+    onTriggerKeydown(this, e);
+    this._onTriggerFocusIn();
+  }
+
+  /** Move keyboard focus to this item's disclosure trigger. */
+  focusTrigger() {
+    this.renderRoot?.querySelector(".bd-accordion-bg-question, .header")?.focus();
+  }
+
   _renderTerms() {
     return html`
       <button
@@ -195,11 +212,12 @@ class BdAccordionBgItem extends LitElement {
         @click=${this.toggleItem}
         @focusin=${this._onTriggerFocusIn}
         @focusout=${this._onTriggerFocusOut}
+        @keydown=${this._onTriggerKeydown}
       >
         <span class="toggle" aria-hidden="true">
           ${this.open
-            ? html`<bd-minus-icon size="16" color="#006DFF"></bd-minus-icon>`
-            : html`<bd-plus-icon  size="16" color="#006DFF"></bd-plus-icon>`}
+            ? html`<bd-minus-icon size="16" color="var(--color-text-brand)"></bd-minus-icon>`
+            : html`<bd-plus-icon  size="16" color="var(--color-text-brand)"></bd-plus-icon>`}
         </span>
         <span class="title">${this.title}</span>
       </button>
@@ -221,11 +239,12 @@ class BdAccordionBgItem extends LitElement {
           @click=${this.toggleItem}
           @focusin=${this._onTriggerFocusIn}
           @focusout=${this._onTriggerFocusOut}
+          @keydown=${this._onTriggerKeydown}
         >
           <span class="bd-accordion-bg-icon" aria-hidden="true">
             ${this.open
-              ? html`<bd-minus-icon size="16" color="#006DFF"></bd-minus-icon>`
-              : html`<bd-plus-icon  size="16" color="#006DFF"></bd-plus-icon>`}
+              ? html`<bd-minus-icon size="16" color="var(--color-text-brand)"></bd-minus-icon>`
+              : html`<bd-plus-icon  size="16" color="var(--color-text-brand)"></bd-plus-icon>`}
           </span>
           <span class="bd-accordion-bg-question-text">${this.title}</span>
         </button>