@repobit/dex-system-design 0.25.12 → 1.0.0

package/src/components/install-options/install-options.css.js

@@ -1,4 +1,5 @@
-import { css } from "lit";
+import { css, unsafeCSS } from "lit";
+import { below } from "../shared/token-scales.js";
 
 export default css`
   :host {
@@ -7,31 +8,25 @@ export default css`
   }
 
   .bd-installoptions-container {
-    background: var(--color-blue-50);
-    padding: var(--spacing-64) var(--layout-ensemble-inline-padding, var(--spacing-24));
+    background: var(--status-brand-surface);
+    /* the band is full-bleed; the column inside it is bd-ensemble */
+    padding-block: var(--spacing-64);
     box-sizing: border-box;
   }
 
   .bd-installoptions-eyebrow {
-    color: var(--color-blue-600);
-    font-weight: var(--typography-fontWeight-medium);
+    color: var(--color-text-brand);
     margin: 0 0 var(--spacing-24);
-    max-width: var(--layout-ensemble-max-width, 1200px);
-    margin-inline: auto;
   }
 
   .bd-installoptions-title {
     margin: 0 0 var(--spacing-16);
-    color: var(--color-neutral-1000);
-    line-height: var(--typography-lineHeight-tight);
-    max-width: var(--layout-ensemble-max-width, 1200px);
-    margin-inline: auto;
+    color: var(--color-text-primary);
   }
 
   .bd-installoptions-description {
-    color: var(--color-neutral-700);
-    max-width: 640px;
-    // padding: var(--spacing-48) var(--layout-ensemble-inline-padding, var(--spacing-24))
+    color: var(--color-text-secondary);
+    max-width: var(--content-width-readable);
   }
 
   .bd-installoptions-worksin {
@@ -39,20 +34,13 @@ export default css`
     align-items: center;
     flex-wrap: wrap;
     gap: var(--spacing-16);
-    max-width: var(--layout-ensemble-max-width, 1200px);
-    margin: 0 auto var(--spacing-40);
-  }
-
-  /* Slot generic pentru orice continut in afara grid-ului fix de carduri */
-  .bd-installoptions-body {
-    max-width: var(--layout-ensemble-max-width, 1200px);
-    margin: 0 auto;
+    margin: 0 0 var(--spacing-40);
   }
 
   .bd-installoptions-worksin-label {
-    color: var(--color-neutral-500);
-    font-family: var(--typography-fontFamily-mono, monospace);
-    font-size: var(--typography-fontSize-xs);
+    color: var(--color-text-subtle);
+    font-family: var(--typography-fontFamily-mono);
+    font-size: var(--typography-body-xsmall-fontSize);
     text-transform: uppercase;
     letter-spacing: 0.06em;
     flex-shrink: 0;
@@ -69,12 +57,15 @@ export default css`
     align-items: center;
     gap: var(--spacing-8);
     padding: var(--spacing-8) var(--spacing-16);
-    background: var(--color-neutral-0);
-    border: var(--border-width-1) solid var(--color-neutral-200);
+    background: var(--color-surface-default);
+    border: var(--border-width-1) solid var(--color-border-subtle);
     border-radius: var(--radius-full);
-    font-size: var(--typography-fontSize-sm);
-    font-weight: var(--typography-fontWeight-semibold);
-    color: var(--color-neutral-900);
+    font-family: var(--typography-label-default-fontFamily);
+    font-size: var(--typography-label-default-fontSize);
+    font-weight: var(--typography-label-default-fontWeight);
+    line-height: var(--typography-label-default-lineHeight);
+    letter-spacing: var(--typography-label-default-letterSpacing);
+    color: var(--color-text-primary);
   }
 
   /*
@@ -87,11 +78,14 @@ export default css`
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 20px;
-    height: 20px;
+    width: var(--dimension-20);
+    height: var(--dimension-20);
     border-radius: var(--radius-md);
-    color: var(--color-neutral-0);
+    color: var(--color-text-inverse);
+    /* no role: a glyph, not text -- an initial standing in for a brand mark
+       until the real logos exist (see above). */
     font-size: var(--typography-fontSize-xxs);
+    /* no role: the weight of the same glyph. */
     font-weight: var(--typography-fontWeight-bold);
     flex-shrink: 0;
   }
@@ -100,13 +94,11 @@ export default css`
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: var(--spacing-24);
-    max-width: var(--layout-ensemble-max-width, 1200px);
-    margin-inline: auto;
   }
 
   .bd-installoptions-card {
-    background: var(--color-neutral-0);
-    border: var(--border-width-1) solid var(--color-neutral-100);
+    background: var(--color-surface-default);
+    border: var(--border-width-1) solid var(--color-border-container);
     border-radius: var(--radius-xl);
     padding: var(--spacing-24);
     box-sizing: border-box;
@@ -124,31 +116,33 @@ export default css`
 
   .bd-installoptions-card-title {
     margin: 0;
-    color: var(--color-neutral-900);
+    color: var(--color-text-primary);
   }
 
   .bd-installoptions-badge {
     flex-shrink: 0;
     padding: var(--spacing-4) var(--spacing-8);
-    background: var(--color-blue-50);
-    color: var(--color-blue-700);
+    background: var(--status-brand-surface);
+    color: var(--status-brand-text);
     border-radius: var(--radius-md);
-    font-size: var(--typography-fontSize-xxs);
-    font-weight: var(--typography-fontWeight-bold);
+    font-family: var(--typography-label-extra-small-fontFamily);
+    font-size: var(--typography-label-extra-small-fontSize);
+    font-weight: var(--typography-label-extra-small-fontWeight);
+    line-height: var(--typography-label-extra-small-lineHeight);
+    letter-spacing: var(--typography-label-extra-small-letterSpacing);
     text-transform: uppercase;
-    letter-spacing: 0.04em;
     white-space: nowrap;
   }
 
   .bd-installoptions-card-description {
-    color: var(--color-neutral-600);
+    color: var(--color-text-muted);
     margin: 0;
     flex-grow: 1;
   }
 
   .bd-installoptions-code {
     position: relative;
-    background: var(--color-neutral-900);
+    background: var(--color-surface-inverse);
     border-radius: var(--radius-md);
     padding: var(--spacing-16);
     box-sizing: border-box;
@@ -156,9 +150,12 @@ export default css`
 
   .bd-installoptions-code-text {
     margin: 0;
-    color: var(--color-neutral-0);
-    font-family: var(--typography-fontFamily-mono, monospace);
-    font-size: var(--typography-fontSize-sm);
+    color: var(--color-text-inverse);
+    font-family: var(--typography-code-block-fontFamily);
+    font-size: var(--typography-code-block-fontSize);
+    font-weight: var(--typography-code-block-fontWeight);
+    line-height: var(--typography-code-block-lineHeight);
+    letter-spacing: var(--typography-code-block-letterSpacing);
     white-space: pre-wrap;
     word-break: break-word;
     padding-right: var(--spacing-56);
@@ -169,19 +166,25 @@ export default css`
     top: var(--spacing-12);
     right: var(--spacing-12);
     padding: var(--spacing-4) var(--spacing-10);
-    background: rgba(255, 255, 255, 0.12);
-    color: var(--color-neutral-0);
+    /* no role: a control fill on an inverse ground -- the vocabulary gap
+       button.css.js's SURFACE block records. Mixed from the inverse ink so
+       it follows the code block if the ground ever flips. */
+    background: color-mix(in srgb, var(--color-text-inverse) 12%, transparent);
+    color: var(--color-text-inverse);
     border: none;
     border-radius: var(--radius-sm);
-    font-family: var(--typography-fontFamily-sans);
-    font-size: var(--typography-fontSize-xs);
-    font-weight: var(--typography-fontWeight-semibold);
+    font-family: var(--typography-control-label-small-fontFamily);
+    font-size: var(--typography-control-label-small-fontSize);
+    font-weight: var(--typography-control-label-small-fontWeight);
+    line-height: var(--typography-control-label-small-lineHeight);
+    letter-spacing: var(--typography-control-label-small-letterSpacing);
     cursor: pointer;
     transition: background var(--transition-duration-fast) var(--transition-easing-smooth);
   }
 
   .bd-installoptions-copy:hover {
-    background: rgba(255, 255, 255, 0.2);
+    /* no role: as the resting fill above, one step stronger. */
+    background: color-mix(in srgb, var(--color-text-inverse) 20%, transparent);
   }
 
   .bd-installoptions-copy:focus-visible {
@@ -190,34 +193,31 @@ export default css`
   }
 
   .bd-installoptions-card-link {
-    font-weight: var(--typography-fontWeight-semibold);
     margin-top: auto;
   }
 
   /* === "Then just ask" prompt panel (prompt-panel attribute) === */
 
   .bd-installoptions-promptpanel {
-    max-width: var(--layout-ensemble-max-width, 1200px);
-    margin: var(--spacing-64) auto 0;
+    margin: var(--spacing-64) 0 0;
   }
 
   .bd-installoptions-prompt-title {
     margin: 0 0 var(--spacing-16);
-    color: var(--color-neutral-1000);
-    line-height: var(--typography-lineHeight-tight);
+    color: var(--color-text-primary);
   }
 
   .bd-installoptions-prompt-description {
-    color: var(--color-neutral-700);
-    max-width: 640px;
+    color: var(--color-text-secondary);
+    max-width: var(--content-width-readable);
     margin: 0 0 var(--spacing-24);
   }
 
   .bd-installoptions-prompt-label {
     display: block;
-    color: var(--color-neutral-500);
-    font-family: var(--typography-fontFamily-mono, monospace);
-    font-size: var(--typography-fontSize-xs);
+    color: var(--color-text-subtle);
+    font-family: var(--typography-fontFamily-mono);
+    font-size: var(--typography-body-xsmall-fontSize);
     text-transform: uppercase;
     letter-spacing: 0.06em;
     margin-bottom: var(--spacing-8);
@@ -225,8 +225,8 @@ export default css`
 
   .bd-installoptions-prompt-code {
     position: relative;
-    background: var(--color-neutral-900);
-    border: var(--border-width-2) solid var(--color-blue-500);
+    background: var(--color-surface-inverse);
+    border: var(--border-width-2) solid var(--color-border-brand);
     border-radius: var(--radius-md);
     padding: var(--spacing-16);
     padding-right: var(--spacing-64);
@@ -235,10 +235,12 @@ export default css`
   }
 
   .bd-installoptions-prompt-code-text {
-    color: var(--color-neutral-0);
-    font-family: var(--typography-fontFamily-mono, monospace);
-    font-size: var(--typography-fontSize-sm);
-    line-height: var(--typography-lineHeight-normal);
+    color: var(--color-text-inverse);
+    font-family: var(--typography-code-block-fontFamily);
+    font-size: var(--typography-code-block-fontSize);
+    font-weight: var(--typography-code-block-fontWeight);
+    line-height: var(--typography-code-block-lineHeight);
+    letter-spacing: var(--typography-code-block-letterSpacing);
   }
 
   .bd-installoptions-prompt-code-text ::slotted(*) {
@@ -253,13 +255,16 @@ export default css`
   }
 
   .bd-installoptions-prompt-note {
-    background: var(--color-yellow-50, #fffbeb);
-    border: var(--border-width-1) solid var(--color-yellow-300, #fcd34d);
+    background: var(--status-warning-surface);
+    border: var(--border-width-1) solid var(--status-warning-border);
     border-radius: var(--radius-md);
     padding: var(--spacing-16) var(--spacing-20);
-    color: var(--color-yellow-800, #92400e);
-    font-size: var(--typography-fontSize-sm);
-    line-height: var(--typography-lineHeight-normal);
+    color: var(--status-warning-text);
+    font-family: var(--typography-body-small-fontFamily);
+    font-size: var(--typography-body-small-fontSize);
+    font-weight: var(--typography-body-small-fontWeight);
+    line-height: var(--typography-body-small-lineHeight);
+    letter-spacing: var(--typography-body-small-letterSpacing);
     margin-bottom: var(--spacing-24);
   }
 
@@ -270,11 +275,13 @@ export default css`
   }
 
   .bd-installoptions-prompt-footer {
-    color: var(--color-neutral-600);
+    color: var(--color-text-muted);
     margin: 0;
   }
 
-  @media (max-width: 899px) {
+  /* below lg, not the 899px main shipped: three cards with code blocks need
+     the room, so they stack across 900-991 as well. */
+  @media ${unsafeCSS(below('lg'))} {
     .bd-installoptions-grid {
       grid-template-columns: 1fr;
     }

package/src/components/install-options/install-options.js

@@ -4,6 +4,7 @@ import "../heading/heading.js";
 import "../link/link.js";
 import "../paragraph/paragraph.js";
 import installOptionsCSS from "./install-options.css.js";
+import { ensembleCSS } from "../shared/ensemble.css.js";
 
 class BdInstallOptions extends LitElement {
   static properties = {
@@ -19,7 +20,7 @@ class BdInstallOptions extends LitElement {
     promptLabel: { type: String, attribute: "prompt-label" } // small mono label above the prompt block
   };
 
-  static styles = [tokens, installOptionsCSS];
+  static styles = [tokens, ensembleCSS, installOptionsCSS];
 
   constructor() {
     super();
@@ -126,7 +127,7 @@ class BdInstallOptions extends LitElement {
           <slot name="prompt-title"></slot>
         </bd-h>
 
-        <bd-p kind="regular" class="bd-installoptions-prompt-description">
+        <bd-p variant="regular" class="bd-installoptions-prompt-description">
           <slot name="prompt-description"></slot>
         </bd-p>
 
@@ -149,7 +150,7 @@ class BdInstallOptions extends LitElement {
           <slot name="prompt-note"></slot>
         </div>
 
-        <bd-p kind="regular" class="bd-installoptions-prompt-footer">
+        <bd-p variant="regular" class="bd-installoptions-prompt-footer">
           <slot name="prompt-footer"></slot>
         </bd-p>
       </div>
@@ -159,38 +160,40 @@ class BdInstallOptions extends LitElement {
   render() {
     return html`
       <div class="bd-installoptions-container">
-        ${this.eyebrow
-          ? html`<bd-p kind="normal" class="bd-installoptions-eyebrow">${this.eyebrow}</bd-p>`
-          : nothing}
+        <div class="bd-ensemble">
+          ${this.eyebrow
+            ? html`<bd-p variant="regular" class="bd-installoptions-eyebrow">${this.eyebrow}</bd-p>`
+            : nothing}
 
-        <bd-h as="h2" class="bd-installoptions-title">${this.title}</bd-h>
+          <bd-h as="h2" class="bd-installoptions-title">${this.title}</bd-h>
 
-        ${this.description
-          ? html`<bd-p kind="regular" class="bd-installoptions-description">${this.description}</bd-p>`
-          : nothing}
+          ${this.description
+            ? html`<bd-p variant="regular" class="bd-installoptions-description">${this.description}</bd-p>`
+            : nothing}
 
-        ${this._renderWorksIn()}
-
-        <!--
-          Slot generic (fara nume) -- pentru orice continut care nu se
-          potriveste cu grid-ul fix de carduri (ex: un tabel, o casuta
-          checklist, o nota de avertizare). Cardurile ramase implicite
-          (this.cards) tot se randeaza mai jos daca sunt pasate; cele doua
-          pot coexista sau poti folosi doar unul din ele.
-        -->
-        <div class="bd-installoptions-body">
-          <slot></slot>
-        </div>
+          ${this._renderWorksIn()}
+
+          <!--
+            Slot generic (fara nume) -- pentru orice continut care nu se
+            potriveste cu grid-ul fix de carduri (ex: un tabel, o casuta
+            checklist, o nota de avertizare). Cardurile ramase implicite
+            (this.cards) tot se randeaza mai jos daca sunt pasate; cele doua
+            pot coexista sau poti folosi doar unul din ele.
+          -->
+          <div class="bd-installoptions-body">
+            <slot></slot>
+          </div>
 
-        ${this.cards.length
-          ? html`
-              <div class="bd-installoptions-grid">
-                ${this.cards.map((card) => this._renderCard(card))}
-              </div>
-            `
-          : nothing}
+          ${this.cards.length
+            ? html`
+                <div class="bd-installoptions-grid">
+                  ${this.cards.map((card) => this._renderCard(card))}
+                </div>
+              `
+            : nothing}
 
-        ${this._renderPromptPanel()}
+          ${this._renderPromptPanel()}
+        </div>
       </div>
     `;
   }

package/src/components/install-options/install-options.stories.js

@@ -188,17 +188,17 @@ export const GenericSlotContent = {
         <bd-h as="h3" style="margin: 0 0 16px;">The contract the agent is held to</bd-h>
         <ul style="list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px;">
           <li style="display: flex; align-items: flex-start; gap: 12px;">
-            <span aria-hidden="true" style="flex-shrink: 0; width: 20px; height: 20px; border-radius: 999px; background: var(--color-green-600, #16a34a); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 2px;">✓</span>
+            <span aria-hidden="true" style="flex-shrink: 0; width: 20px; height: 20px; border-radius: 999px; background: var(--color-green-600); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 2px;">✓</span>
             <bd-p kind="regular" style="margin:0;">Scan mode is the default: a casual request never uploads your files.</bd-p>
           </li>
           <li style="display: flex; align-items: flex-start; gap: 12px;">
-            <span aria-hidden="true" style="flex-shrink: 0; width: 20px; height: 20px; border-radius: 999px; background: var(--color-green-600, #16a34a); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 2px;">✓</span>
+            <span aria-hidden="true" style="flex-shrink: 0; width: 20px; height: 20px; border-radius: 999px; background: var(--color-green-600); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 2px;">✓</span>
             <bd-p kind="regular" style="margin:0;">Submit is opt-in only: the agent won't upload the full archive unless you explicitly ask.</bd-p>
           </li>
         </ul>
       </div>
 
-      <div style="background: var(--color-yellow-50, #fffbeb); border: 1px solid var(--color-yellow-300, #fcd34d); border-radius: var(--radius-md); padding: 16px 20px; color: var(--color-yellow-800, #92400e); margin-top: 24px;">
+      <div style="background: var(--color-yellow-50); border: 1px solid var(--color-yellow-300); border-radius: var(--radius-md); padding: 16px 20px; color: var(--color-yellow-800); margin-top: 24px;">
         <bd-p kind="small" style="margin:0;">A scan that returns no findings means no known threat patterns were detected — not that the skill is safe.</bd-p>
       </div>
     </bd-install-options>

package/src/components/label/label.css.js

@@ -0,0 +1,35 @@
+import { css } from 'lit';
+
+/** Styled entirely from design tokens — see npm run lint:tokens. */
+export const labelCSS = css`
+  :host { display: block; }
+
+  label {
+    display: block;
+    font-family: var(--form-label-default-fontFamily);
+    font-size: var(--form-label-default-fontSize);
+    font-weight: var(--form-label-default-fontWeight);
+    line-height: var(--form-label-default-lineHeight);
+    letter-spacing: var(--form-label-default-letterSpacing);
+    color: var(--form-label-default-color);
+    margin-bottom: var(--form-label-default-marginBottom);
+  }
+
+  :host([size='sm']) label {
+    font-size: var(--form-label-small-fontSize);
+    letter-spacing: var(--form-label-small-letterSpacing);
+    margin-bottom: var(--form-label-small-marginBottom);
+  }
+
+  :host([size='lg']) label {
+    font-size: var(--form-label-large-fontSize);
+    margin-bottom: var(--form-label-large-marginBottom);
+  }
+
+  .required {
+    color: var(--form-label-required-color);
+    margin-left: var(--form-label-required-marginLeft);
+  }
+`;
+
+export default labelCSS;

package/src/components/label/label.js

@@ -0,0 +1,38 @@
+import { LitElement, html, nothing } from 'lit';
+// Installs the design tokens into document scope; see src/tokens/tokens.js
+import '../../tokens/tokens.js';
+import { labelCSS } from './label.css.js';
+import { resolveSize } from '../shared/prop-vocabulary.js';
+
+export class BdLabel extends LitElement {
+  static styles = [labelCSS];
+
+  static properties = {
+    size    : { type: String, reflect: true },
+    for     : { type: String },
+    required: { type: Boolean, reflect: true }
+  };
+
+  constructor() {
+    super();
+    this.size = 'md';
+    this.required = false;
+  }
+
+  willUpdate(changed) {
+    // small / default / large still resolve; see shared/prop-vocabulary.js
+    if (changed.has('size')) this.size = resolveSize(this.size, 'md');
+  }
+
+  render() {
+    return html`
+      <label for=${this.for || nothing}>
+        <slot></slot>${this.required
+          ? html`<span class="required" aria-hidden="true">*</span>`
+          : nothing}
+      </label>
+    `;
+  }
+}
+
+customElements.define('bd-label', BdLabel);

package/src/components/label/label.stories.js

@@ -0,0 +1,82 @@
+import { html } from 'lit';
+import './label.js';
+
+export default {
+  title     : 'Atoms/Label',
+  tags      : ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+**BdLabel** is the caption for a form control, with an optional required
+marker.
+
+### Usage
+\`\`\`html
+<bd-label>Email address</bd-label>
+<bd-label required>Email address</bd-label>
+<bd-label size="sm">Postcode</bd-label>
+\`\`\`
+
+### Props
+| Prop | Values | Default |
+|---|---|---|
+| \`size\` | \`small\`, \`default\`, \`large\` | \`default\` |
+| \`required\` | boolean — appends a \`*\` marker | \`false\` |
+| \`for\` | id of the control being labelled | \`''\` |
+
+### \`for\` does not cross the shadow boundary
+The \`for\` attribute is applied to a \`<label>\` inside this element's shadow
+root, and a \`for\` reference can only resolve within the same tree. **It will
+not associate with an \`<input id="…">\` in your page.**
+
+Until that is addressed, associate the control by nesting or by
+\`aria-labelledby\`:
+
+\`\`\`html
+<bd-label id="email-label">Email address</bd-label>
+<input aria-labelledby="email-label">
+\`\`\`
+
+### The required marker is decorative
+The \`*\` carries \`aria-hidden="true"\`, so it is not announced. That is correct
+only if the control itself is marked \`required\` or \`aria-required\` — a screen
+reader user learns the field is required from the input, never from this label.
+Set both.
+        `
+      }
+    }
+  },
+  argTypes: {
+    size: {
+      control    : { type: 'select' },
+      options    : ['small', 'default', 'large'],
+      description: 'Type size of the label.',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: "default" }, category: 'Appearance' }
+    },
+    required: {
+      control    : 'boolean',
+      description: 'Appends a decorative asterisk. Mark the control itself required too — the asterisk is aria-hidden.',
+      table      : { type: { summary: 'boolean' }, defaultValue: { summary: "false" }, category: 'State' }
+    },
+    for: {
+      control    : 'text',
+      description: 'Id of the labelled control. Note it cannot cross the shadow boundary — see the notes.',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: "" }, category: 'Accessibility' }
+    }
+  }
+};
+
+export const Default = () => html`
+    <bd-label>Email address</bd-label>
+  `;
+
+export const Required = () => html`
+    <bd-label required>Email address</bd-label>
+  `;
+
+export const Sizes = () => html`
+    <bd-label size="sm">Small</bd-label>
+      <bd-label>Default</bd-label>
+      <bd-label size="lg">Large</bd-label>
+  `;