@repobit/dex-system-design 0.25.12 → 1.0.0

package/src/components/terminal/terminal-message.css.js

@@ -3,10 +3,45 @@ import { css } from "lit";
 export default css`
   :host {
     display: block;
-    font-family: var(--typography-fontFamily-mono, monospace);
-    color: var(--color-neutral-0, #fff);
-    background: #151719;
-    border-radius: var(--radius-xl, 12px);
+    font-family: var(--typography-fontFamily-mono);
+    color: var(--color-text-on-media);
+
+    /* The panel's quieter lines: the subordinate ink on the media frame,
+       fixed with it, 7.92:1 in either theme. */
+    --bd-terminalmsg-subdued: var(--color-text-on-media-muted);
+
+    /* The rest of the transcript's line-kind palette, on one mechanism.
+
+       This panel tells its line kinds apart by COLOUR -- see the marker on
+       .bd-terminalmsg-greeting-text -- so these are the component's own
+       vocabulary, not applications of a brand ink. That distinction is why
+       vocabulary question C closed without a global role: blue on a dark surface
+       here means "the assistant is speaking", not "brand". See
+       plans/reports/phase-2-vocab-c-inverse-ink.md.
+
+       The five kinds used four different mechanisms before this -- two semantic
+       roles, one component token, one raw primitive and one literal. Naming them
+       locally puts the palette in one place to read and to change. */
+    --bd-terminalmsg-ask: var(--color-blue-400);
+    --bd-terminalmsg-cmd: var(--color-text-on-media);
+    /* no token: the transcript's success green is the macOS traffic-light green,
+       matched to the dots this panel already draws, and the palette has no step at
+       it -- the nearest is --color-green-500 at a perceptual distance of 10.5,
+       which is a different colour rather than a rounding. Moving it here makes it
+       one declaration instead of one scattered, but it is NOT retired: nothing in
+       the scale carries this value. */
+    --bd-terminalmsg-ok: #27c93f;
+    /* The status badges' two other kinds, on the same mechanism. info is
+       blue-300 rather than the ask line's blue-400: a badge is a label, not the
+       assistant speaking. 7.61 and 12.17:1 on the media frame. */
+    --bd-terminalmsg-info: var(--color-blue-300);
+    --bd-terminalmsg-warn: var(--color-yellow-400);
+    /* The media frame, --color-surface-media. A terminal is dark in every theme, and this
+       panel's line palette (blue-400, the traffic-light green) is legible only
+       on a dark ground -- 2.98 and 1.97:1 once an inverse ground turns light.
+       It read --color-surface-inverse until dark mode decision 15. */
+    background: var(--color-surface-media);
+    border-radius: var(--radius-xl);
     padding: var(--spacing-14) var(--spacing-16) var(--spacing-32);
     box-sizing: border-box;
   }
@@ -14,7 +49,7 @@ export default css`
   /* Tighter host padding for the "flush" variant, used where the terminal
      sits over decorative rings/a 3D scene (e.g. the VPN hero). */
   :host([variant="flush"]) {
-    padding: 18px 20px;
+    padding: var(--spacing-18) var(--spacing-20);
   }
 
   /* === TITLEBAR (traffic-light dots only, no label) === */
@@ -48,8 +83,8 @@ export default css`
   /* === PANEL === */
   .bd-terminalmsg-panel {
     position: relative;
-    border: 1px solid rgba(255, 255, 255, 0.12);
-    border-radius: var(--radius-lg, 10px);
+    border: var(--border-width-1) solid var(--color-border-container-inverse);
+    border-radius: var(--radius-lg);
     padding: var(--spacing-20) var(--spacing-20) calc(var(--spacing-20) + var(--spacing-8));
   }
 
@@ -69,25 +104,64 @@ export default css`
     top: 0;
     left: var(--spacing-16);
     transform: translateY(-50%);
-    background: #151719;
+    /* the media ground again; see the note above */
+    background: var(--color-surface-media);
     padding: 0 var(--spacing-8);
-    color: rgba(255, 255, 255, 0.4);
-    font-family: var(--typography-fontFamily-mono, monospace);
+    color: var(--bd-terminalmsg-subdued);
+    font-family: var(--typography-fontFamily-mono);
+    /* no role: the panel label sitting on the top border, in mono -- see awards-flex.css.js's
+       .bd-awardsflex-quote-source for the argument. */
     font-size: var(--typography-fontSize-xs);
   }
 
   .bd-terminalmsg-body {
-    font-size: var(--typography-fontSize-sm);
-    line-height: var(--typography-lineHeight-normal);
+    /* body-small's size and leading only. NOT its family: this panel is a
+       transcript and the mono face comes from .bd-terminalmsg-panel above, so
+       importing body-small's fontFamily-sans here would break it. */
+    font-size: var(--typography-body-small-fontSize);
+    line-height: var(--typography-body-small-lineHeight);
   }
 
   .bd-terminalmsg-greeting-text {
-    color: var(--color-blue-400, #7ab8ff);
+    color: var(--bd-terminalmsg-ask);
+    /* no role: this panel is a transcript, and its line kinds are told apart by
+       TWO channels -- colour always, weight on some -- over type that is
+       deliberately constant. Measured: l-cmd and l-strong are 700 white,
+       l-ok is 400 green, l-dim is 400 grey, and all four are 14px/21px mono,
+       because the metrics belong to the panel and not to the line. That makes
+       the weight a highlighting channel, the way a syntax highlighter uses
+       one, and a role cannot express it: a role carries a size and a leading
+       with it, so adopting one here would import metrics that break the shared
+       grid the transcript is read on.
+       .
+       The type itself is owned elsewhere and correctly -- this span sits inside
+       <bd-p variant="regular">, a valid semantic text owner, which is the case
+       CLAUDE.md rule 10 sanctions an inline descendant inheriting from. Only
+       the emphasis is declared here.
+       .
+       This is the argument for the other two bold classes in this file.
+       (The separator dots keep this one comment block contiguous: the marker
+       scan stops at any blank line, even one inside a single comment, so a
+       paragraph break would leave the "no role:" above out of reach.) */
     font-weight: var(--typography-fontWeight-bold);
   }
 
+  /* bd-p paints itself with --color-text-primary, and on this panel that is the
+     background colour exactly, so a bd-p in here is invisible unless the panel
+     says otherwise. The class existed and the rule did not, which is how
+     dim-text rendered at 1:1. The greeting needs it too: its blue span covers
+     the greeting text but not the icon sitting beside it, so a non-emoji prefix
+     inherited the same invisible colour. */
+  .bd-terminalmsg-dim {
+    color: var(--bd-terminalmsg-subdued);
+  }
+
+  .bd-terminalmsg-greeting {
+    color: var(--color-text-on-media);
+  }
+
   .bd-terminalmsg-intro {
-    color: var(--color-neutral-0, #fff);
+    color: var(--color-text-on-media);
   }
 
   .bd-terminalmsg-list {
@@ -97,7 +171,7 @@ export default css`
   }
 
   .bd-terminalmsg-footer {
-    color: var(--color-neutral-0, #fff);
+    color: var(--color-text-on-media);
     margin: 0;
   }
 
@@ -107,19 +181,30 @@ export default css`
     bottom: 0;
     left: var(--spacing-16);
     transform: translateY(50%);
-    background: #151719;
+    /* the media ground again; see the note above */
+    background: var(--color-surface-media);
     padding: 0 var(--spacing-8);
-    color: rgba(255, 255, 255, 0.5);
-    font-family: var(--typography-fontFamily-mono, monospace);
+    color: var(--bd-terminalmsg-subdued);
+    font-family: var(--typography-fontFamily-mono);
+    /* no role: the hint legend on the bottom border, in mono -- see awards-flex.css.js's
+       .bd-awardsflex-quote-source for the argument. */
     font-size: var(--typography-fontSize-xs);
-    white-space: nowrap;
+    /* The legend is taken out of flow, so nothing stops it growing past the
+       panel: any hint longer than the panel is wide ran off the page at every
+       viewport, not only on a small phone. Bound it to the panel less its two
+       gutters and let it wrap when it has to. It still sits on one line at
+       every width where it fits, which is the normal case. */
+    max-width: calc(100% - var(--spacing-32));
   }
 
   /* Bracketed key labels inside the hint (e.g. "[Enter]", "[esc]") — bold + white,
      standing out from the rest of the dimmer hint text. */
   .bd-terminalmsg-hint-key {
-    color: #fff;
-    font-weight: var(--typography-fontWeight-bold, 700);
+    color: var(--color-text-on-media);
+    /* no role: the colour-plus-weight highlighting channel described on
+       .bd-terminalmsg-greeting-text above -- a bracketed key against dimmer
+       hint text. */
+    font-weight: var(--typography-fontWeight-bold);
   }
 
   /* === CAPTION — small dim note inside the panel, below everything else
@@ -127,11 +212,13 @@ export default css`
      closes when the prompt ends". Sits inside the black box, unlike
      bd-header-code's terminal-caption which renders below the whole card. */
   .bd-terminalmsg-caption {
-    color: rgba(255, 255, 255, 0.35);
-    font-size: var(--typography-fontSize-xs);
+    /* The subdued ink, not white at 35%: that measured 3.22:1 on the frame
+       and failed 1.4.3; this is 7.92:1. */
+    color: var(--bd-terminalmsg-subdued);
+    font-size: var(--typography-body-xsmall-fontSize);
     margin-top: var(--spacing-16);
     padding-top: var(--spacing-12);
-    border-top: 1px solid rgba(255, 255, 255, 0.08);
+    border-top: var(--border-width-1) solid var(--color-border-container-inverse);
   }
 
   /* === TYPED-LINE API (bd-terminal-message .lines=...) === */
@@ -149,28 +236,33 @@ export default css`
   }
 
   .bd-terminalmsg-l-cmd {
-    color: var(--color-neutral-0, #fff);
-    font-weight: var(--typography-fontWeight-bold, 700);
+    color: var(--bd-terminalmsg-cmd);
+    /* no role: the colour-plus-weight highlighting channel described on
+       .bd-terminalmsg-greeting-text above -- the command line of the
+       transcript, taking its 14px/21px mono from .bd-terminalmsg-body. */
+    font-weight: var(--typography-fontWeight-bold);
   }
 
   .bd-terminalmsg-l-ok {
-    color: #27c93f;
+    color: var(--bd-terminalmsg-ok);
     padding-bottom: var(--spacing-12);
   }
 
   .bd-terminalmsg-l-ask {
-    color: var(--color-blue-400, #7ab8ff);
+    color: var(--bd-terminalmsg-ask);
     padding: var(--spacing-12) 0;
   }
 
   .bd-terminalmsg-l-strong {
-    color: var(--color-neutral-0, #fff);
-    font-weight: var(--typography-fontWeight-bold, 700);
+    color: var(--color-text-on-media);
+    /* no role: the strong run inside a terminal line -- a state or modifier weight, not a text-content
+       type. See button.css.js's .button--bold for the argument. */
+    font-weight: var(--typography-fontWeight-bold);
     padding-top: var(--spacing-12);
   }
 
   .bd-terminalmsg-l-dim {
-    color: rgba(255, 255, 255, 0.5);
+    color: var(--bd-terminalmsg-subdued);
   }
 
   .bd-terminalmsg-l-space {
@@ -179,7 +271,10 @@ export default css`
 
   .bd-terminalmsg-l-sep {
     border: none;
-    border-top: 1px solid rgba(255, 255, 255, 0.12);
+    /* A boundary on the dark media ground, the same value and the same role as
+       process-steps' divider: --color-border-container-inverse is white at 12%
+       exactly. Nothing moves. */
+    border-top: var(--border-width-1) solid var(--color-border-container-inverse);
     margin: var(--spacing-8) 0;
   }
 
@@ -190,27 +285,32 @@ export default css`
     align-items: center;
     justify-content: space-between;
     gap: var(--spacing-12);
-    color: var(--color-neutral-0, #fff);
-    font-weight: var(--typography-fontWeight-bold, 700);
+    color: var(--color-text-on-media);
+    /* no role: the colour-plus-weight highlighting channel described on
+       .bd-terminalmsg-greeting-text above -- the transcript's title line. */
+    font-weight: var(--typography-fontWeight-bold);
     padding-bottom: var(--spacing-16);
   }
 
   .bd-terminalmsg-live {
     display: inline-flex;
     align-items: center;
-    gap: var(--spacing-4, 4px);
-    color: #27c93f;
+    gap: var(--spacing-4);
+    color: var(--bd-terminalmsg-ok);
+    /* no role: a status marker in a mono transcript, not a text-content type.
+       label-small is the nearest role and would set it in sans at medium. */
     font-size: var(--typography-fontSize-xs);
-    font-weight: var(--typography-fontWeight-bold, 700);
-    letter-spacing: 0.05em;
+    /* no role: the weight of the same marker. */
+    font-weight: var(--typography-fontWeight-bold);
+    letter-spacing: var(--typography-letterSpacing-wider);
     flex-shrink: 0;
   }
 
   .bd-terminalmsg-live-dot {
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background: #27c93f;
+    width: var(--spacing-6);
+    height: var(--spacing-6);
+    border-radius: var(--radius-full);
+    background: var(--bd-terminalmsg-ok);
   }
 
   /* === "row" line — label / text / colored badge, 3-column layout.
@@ -229,51 +329,55 @@ export default css`
      the host's own top padding, which reads fine here — no exception
      needed. */
   :host([variant="flush"]) .bd-terminalmsg-l-row {
-    border-top: 1px solid #ffffff17;
+    border-top: var(--border-width-1) solid var(--color-border-container-inverse);
   }
 
   .bd-terminalmsg-l-row-label {
-    color: rgba(255, 255, 255, 0.35);
+    color: var(--bd-terminalmsg-subdued);
     text-transform: uppercase;
-    font-size: var(--typography-fontSize-xs);
-    letter-spacing: 0.05em;
-    padding-top: 2px;
+    font-size: var(--typography-body-xsmall-fontSize);
+    letter-spacing: var(--typography-letterSpacing-wider);
+    padding-top: var(--spacing-2);
   }
 
   .bd-terminalmsg-l-row-text {
-    color: rgba(255, 255, 255, 0.85);
+    color: var(--color-text-on-media);
     word-break: break-word;
   }
 
   .bd-terminalmsg-badge {
     display: inline-flex;
     align-items: center;
-    padding: 2px var(--spacing-12, 10px);
-    border-radius: var(--radius-full, 999px);
+    padding: var(--spacing-2) var(--spacing-12);
+    border-radius: var(--radius-full);
+    /* no role: the status chip, as .bd-terminalmsg-live above. */
     font-size: var(--typography-fontSize-xs);
-    font-weight: var(--typography-fontWeight-bold, 600);
+    /* no role: the weight of the same marker. */
+    font-weight: var(--typography-fontWeight-bold);
     white-space: nowrap;
     margin-top: 1px;
   }
 
+  /* Each badge is its ink on a tint of the same ink, so a kind is one
+     declaration to change. */
   .bd-terminalmsg-badge--green {
-    background: rgba(39, 201, 63, 0.15);
-    color: #27c93f;
+    background: color-mix(in srgb, var(--bd-terminalmsg-ok) 15%, transparent);
+    color: var(--bd-terminalmsg-ok);
   }
 
   .bd-terminalmsg-badge--blue {
-    background: rgba(122, 184, 255, 0.15);
-    color: #7ab8ff;
+    background: color-mix(in srgb, var(--bd-terminalmsg-info) 15%, transparent);
+    color: var(--bd-terminalmsg-info);
   }
 
   .bd-terminalmsg-badge--amber {
-    background: rgba(217, 119, 6, 0.2);
-    color: #f5a524;
+    background: color-mix(in srgb, var(--bd-terminalmsg-warn) 15%, transparent);
+    color: var(--bd-terminalmsg-warn);
   }
 
   .bd-terminalmsg-badge--neutral {
-    background: rgba(255, 255, 255, 0.12);
-    color: rgba(255, 255, 255, 0.75);
+    background: color-mix(in srgb, var(--bd-terminalmsg-subdued) 15%, transparent);
+    color: var(--bd-terminalmsg-subdued);
   }
 
   /* Below ~360px of the terminal's OWN width (not the viewport's), stack
@@ -287,7 +391,7 @@ export default css`
   @container bd-terminalmsg-lines (max-width: 360px) {
     .bd-terminalmsg-l-row {
       grid-template-columns: 1fr;
-      row-gap: var(--spacing-4, 4px);
+      row-gap: var(--spacing-4);
     }
 
     .bd-terminalmsg-l-row-label {

package/src/components/terminal/terminal-message.js

@@ -141,12 +141,12 @@ class TerminalMessage extends LitElement {
           ${this._renderLines()}
 
           ${this.dimText
-            ? html`<bd-p kind="small" font-family="var(--font-family-mono)" paddingBottom="var(--spacing-12)" class="bd-terminalmsg-dim">${this.dimText}</bd-p>`
+            ? html`<bd-p variant="small" font-family="mono" paddingBottom="12" class="bd-terminalmsg-dim">${this.dimText}</bd-p>`
             : nothing}
 
           ${this.greeting
             ? html`
-                <bd-p kind="regular" font-family="var(--font-family-mono)" paddingBottom="var(--spacing-12)" class="bd-terminalmsg-greeting">
+                <bd-p variant="regular" font-family="mono" paddingBottom="12" class="bd-terminalmsg-greeting">
                   ${this.icon ? html`${this.icon} ` : nothing}
                   <span class="bd-terminalmsg-greeting-text">${this.greeting}</span>
                 </bd-p>
@@ -154,20 +154,20 @@ class TerminalMessage extends LitElement {
             : nothing}
 
           ${this.intro
-            ? html`<bd-p kind="regular" font-family="var(--font-family-mono)" paddingBottom="var(--spacing-12)" class="bd-terminalmsg-intro">${this.intro}</bd-p>`
+            ? html`<bd-p variant="regular" font-family="mono" paddingBottom="12" class="bd-terminalmsg-intro">${this.intro}</bd-p>`
             : nothing}
 
           ${this.items && this.items.length
             ? html`
                 <bd-list class="bd-terminalmsg-list">
-                  ${this.items.map((item) => html`<bd-li kind="bullet" size="sm" color="#fff">${item}</bd-li>`)}
+                  ${this.items.map((item) => html`<bd-li variant="bullet" size="sm" color="var(--color-neutral-0)">${item}</bd-li>`)}
                 </bd-list>
               `
             : nothing}
 
           ${this.footer || this.footerBold
             ? html`
-                <bd-p kind="regular" font-family="var(--font-family-mono)" class="bd-terminalmsg-footer">
+                <bd-p variant="regular" font-family="mono" class="bd-terminalmsg-footer">
                   ${this.footerBold
                     ? html`<strong>${this.footerBold}</strong> `
                     : nothing}

package/src/components/terminal/terminal-message.stories.js

@@ -117,7 +117,9 @@ Every field is optional — omitted fields render nothing rather than empty spac
   }
 };
 
-const containerStyle = "width: 480px;";
+/* A terminal reads best at a fixed measure, but the demo frame must not be
+   wider than the phone it is being viewed on. */
+const containerStyle = "max-width: 480px;";
 
 const render = (args) => html`
   <div style="${containerStyle}">
@@ -291,6 +293,73 @@ export const WithSlottedContent = {
 
 // ─── Playground ─────────────────────────────────────────────────────────────────
 
+/**
+ * The typed-line API, which had no story: `lines` takes a literal sequence of
+ * terminal lines and each `type` gets its own rule. Seven of those rules --
+ * cmd, ok, ask, strong, dim, sep and space -- never matched anything in 556
+ * stories, because nothing rendered a line. This story is what makes them
+ * observable.
+ */
+export const TypedLines = {
+  name: "Typed lines — the literal command sequence",
+  args: {
+    showTitlebar: true,
+    label       : "AI Guardian CLI",
+    lines       : [
+      { type: "cmd", text: "npx skills add bitdefender/agent-skill-scanner" },
+      { type: "ok", text: "agent-skill-scanner installed" },
+      { type: "sep" },
+      { type: "ask", text: "Scan the skills already on this machine?" },
+      { type: "dim", text: "14 skills found in ~/.claude/skills" },
+      { type: "space" },
+      { type: "strong", text: "3 skills flagged for review" }
+    ]
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "Every line type in one frame. `sep` and `space` ignore their text: one draws a rule, the other leaves a gap."
+      }
+    }
+  }
+};
+
+
+export const ConnectionLog = {
+  name  : "Connection log — title, rows and status badges",
+  render: () => html`
+    <div style="${containerStyle} display: grid; gap: 24px;">
+      <bd-terminal-message
+        show-titlebar
+        caption="// illustrative — every connection closes when the prompt ends"
+        .lines=${[
+          { type: "title", text: "VPN for AI Agents · connection log", live: true },
+          { type: "row", label: "MCP", text: "vpn_connect(location: frankfurt)", badge: "Open", badgeColor: "green" },
+          { type: "row", label: "REQUEST", text: "agent reaches insurer-compare.com", badge: "Server IP", badgeColor: "blue" },
+          { type: "row", label: "MCP", text: "vpn_safefetch(location: frankfurt, url: insurer-compare.com)", badge: "Scanned", badgeColor: "amber" },
+          { type: "row", label: "MCP", text: "vpn_disconnect(location: frankfurt) — prompt ends", badge: "Closed — session cleared", badgeColor: "neutral" }
+        ]}
+      ></bd-terminal-message>
+      <bd-terminal-message
+        variant="flush"
+        .lines=${[
+          { type: "title", text: "flush variant — rows carry their own hairline" },
+          { type: "row", label: "MCP", text: "vpn_connect(location: frankfurt)", badge: "Open", badgeColor: "green" },
+          { type: "row", label: "NETWORK", text: "hotel Wi-Fi, unencrypted", badge: "Protected", badgeColor: "green" }
+        ]}
+      ></bd-terminal-message>
+    </div>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "The `title` and `row` line types with all four badge colours, the LIVE marker and the caption. Each badge is its ink on a 15% tint of the same ink, from the panel's own line-kind palette."
+      }
+    }
+  }
+};
+
 export const Playground = {
   name: "Playground",
   args: {

package/src/components/termsOfUse/terms.css.js

@@ -2,43 +2,48 @@ import { css } from "lit";
 
 export default css`
   :host {
-    --background-card-grey: var(--color-neutral-25);
-    --border-card-grey: var(--color-neutral-50);
-    --border-card-green: var(--color-green-700);
-    --badge-background: var(--color-blue-500);
-    --text-color-white: var(--color-neutral-0);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     display: block;
-    --bd-accesibility-focus: var(--color-blue-500);
+    /* the band runs full-bleed on the host; the column inside it is bd-ensemble,
+       and the prose inside that keeps its own readable measure */
+    background: var(--color-surface-subtle);
   }
 
   .bd-terms-text-a:focus-visible{
-    outline: var(--spacing-2) solid var(--bd-accesibility-focus);
-    outline-offset: var(--spacing-2);
-    border-radius: var(--space-2xs);
+    /* the one focus ring — see Foundations/Focus */
+    outline: none;
+    box-shadow: var(--focus-outline-primary);
+    border-radius: var(--focus-outline-radius);
   }
   .bd-terms-container {
-    background: #f2f2f2;
-    padding: var(--spacing-44) 0;
-    font-family: Arial, Helvetica, sans-serif;
+    padding-block: var(--spacing-44);
+    font-family: var(--typography-fontFamily-sans);
   }
 
+  /* A readable measure, because this is the module with the most prose in the
+     package and it had no bound at all. Measured at 1440 in the module rhythm
+     pass: the heading ran 1368px wide and the paragraphs with it, roughly 200
+     characters a line -- unreadable for text somebody is expected to actually
+     read, and the widest measure of any of the 17 units by a long way.
+
+     --content-width-readable is the role this package already uses for that
+     job: comparison-panel bounds its text with it, agent-endpoints bounds its
+     description with it, and the tooltip bubble caps itself with it. It is
+     70ch, so the bound follows the type rather than a pixel guess. No token
+     added and no legal typography redesigned -- size, leading and family are
+     untouched; only the line length is. */
   .bd-terms-wrapper {
+    max-width: var(--content-width-readable);
+    margin-inline: auto;
     padding: var(--spacing-14) var(--spacing-20) var(--spacing-40) var(--spacing-20);
   }
 
-  #bd-terms-of-use {
-    font-size: var(--spacing-16);
-  }
-
   .bd-terms-text-p {
-    font-size: var(--spacing-12);
-    line-height: 1.31;
-    letter-spacing: 0.006em;
     padding: 0;
   }
   .bd-terms-text-a {
-    color: var(--color-blue-500);
+    /* on the neutral-50 tint this is 4.05:1; blue-600 gives 5.51 */
+    color: var(--color-text-brand);
   }
 `;

package/src/components/termsOfUse/terms.js

@@ -1,8 +1,12 @@
 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 '../list/list-item/list-item.js';
 import '../list/list.js';
+import '../paragraph/paragraph.js';
 import termsCSS from "../termsOfUse/terms.css.js";
+import { ensembleCSS } from "../shared/ensemble.css.js";
 
 class TermsSection extends LitElement {
   static properties = {
@@ -54,13 +58,13 @@ class TermsSection extends LitElement {
     return html`
       <div>
         <div>
-          <bd-p kind="small" class="bd-terms-text-p"><strong>${faq.question}</strong></bd-p>
+          <bd-p variant="small" class="bd-terms-text-p"><strong>${faq.question}</strong></bd-p>
           ${faq.items
             ? html`
-            <bd-p kind="small">
+            <bd-p variant="small">
               <bd-list type="unordered" spacing="md" variant="default" orientation="vertical">
                 ${faq.items.map(item => html`
-                  <bd-li kind="bullet" size="md">${item}</bd-li>
+                  <bd-li variant="bullet" size="md">${item}</bd-li>
                 `)}
               </bd-list>
             </bd-p>
@@ -74,7 +78,7 @@ class TermsSection extends LitElement {
   render() {
     return html`
       <div
-        class="bd-section bd-terms_section bd-terms-container"
+        class="bd-ensemble bd-section bd-terms_section bd-terms-container"
         data-section-status="loaded"
         id="bd-tos"
         style=""
@@ -87,7 +91,7 @@ class TermsSection extends LitElement {
           >
             <div>
               <div>
-                <h5 id="bd-terms-of-use">Terms of use</h5>
+                <bd-h as="h2" visual-level="h3" paddingBottom="16" id="bd-terms-of-use">Terms of use</bd-h>
               </div>
             </div>
             
@@ -97,7 +101,7 @@ class TermsSection extends LitElement {
             <!-- Additional content -->
             <div>
               <div class="bd-terms-text-p">
-                <bd-p kind="small">
+                <bd-p variant="small">
                   Your subscription may include product, service and/or protection
                   updates and features that may be added, modified or removed
                   subject to
@@ -118,7 +122,7 @@ class TermsSection extends LitElement {
             </div>
             <div>
               <div class="bd-terms-text-p">
-                <bd-p kind="small">
+                <bd-p variant="small">
                   By using the subscription, You acknowledge and agree that your
                   use of the product which integrates with YouTube API Services is
                   subject to
@@ -137,5 +141,5 @@ class TermsSection extends LitElement {
   }
 }
 
-TermsSection.styles = [tokens, termsCSS];
+TermsSection.styles = [ensembleCSS, termsCSS];
 customElements.define("bd-terms-section", TermsSection);

package/src/components/termsOfUse/terms.stories.js

@@ -2,7 +2,7 @@ import { html } from 'lit';
 import './terms.js';
 
 export default {
-  title     : 'Components/TermsSection',
+  title     : 'Modules/TermsSection',
   component : 'bd-terms-section',
   tags      : ['autodocs'],
   parameters: {