@repobit/dex-system-design 0.25.12 → 0.26.0

package/src/components/features-tab/features-tab.stories.js

@@ -53,14 +53,14 @@ Toate elementele sunt sloturi pentru consistență maximă.
 };
 
 const heading = html`
-  <bd-h as="h4" slot="heading" color="var(--color-blue-500)">
+  <bd-h as="h4" slot="heading" color="primary">
     Keep your loved ones protected.
   </bd-h>
 `;
 
 const content = html`
   <div slot="content">
-    <bd-p kind="regular">
+    <bd-p variant="regular">
       As the Subscription Manager, you can oversee and adjust online safety
       through an intuitive dashboard. Effortlessly manage settings, monitor
       real-time alerts, and maintain control without compromising simplicity
@@ -69,7 +69,7 @@ const content = html`
   </div>
 `;
 
-const mediaStyle = "width:100%;max-width:520px;height:auto;border-radius:var(--radius-lg,16px);object-fit:cover;display:block;";
+const mediaStyle = "width:100%;max-width:520px;height:auto;border-radius:var(--radius-lg);object-fit:cover;display:block;";
 
 // ─── Imagine ──────────────────────────────────────────────────────────────────
 
@@ -107,7 +107,7 @@ export const WithPicture = {
       ${content}
       <picture slot="media" style="display:block;width:100%;max-width:520px;">
         <source type="image/webp" srcset="/assets/tabs-img1.png?width=2000&format=webp&optimize=medium" media="(min-width: 600px)" />
-        <img src="/assets/tabs-img1.png" alt="Admin using laptop" loading="lazy" style="width:100%;height:auto;border-radius:var(--radius-lg,16px);object-fit:cover;display:block;" />
+        <img src="/assets/tabs-img1.png" alt="Admin using laptop" loading="lazy" style="width:100%;height:auto;border-radius:var(--radius-lg);object-fit:cover;display:block;" />
       </picture>
     </bd-features-tab>
   `,
@@ -122,7 +122,7 @@ export const WithYouTube = {
     <bd-features-tab cta-label="Learn more" cta-href="#" cta-kind="danger">
       ${heading}
       ${content}
-      <div slot="media" style="position:relative;width:100%;max-width:520px;padding-bottom:56.25%;border-radius:var(--radius-lg,16px);overflow:hidden;">
+      <div slot="media" style="position:relative;width:100%;max-width:520px;padding-bottom:56.25%;border-radius:var(--radius-lg);overflow:hidden;">
         <iframe
           style="position:absolute;top:0;left:0;width:100%;height:100%;border:none;"
           src="https://www.youtube.com/embed/zal9Mt02ErM"
@@ -189,7 +189,7 @@ export const WithVideoNative = {
         src="https://www.bitdefender.com/content/dam/bitdefender/consumers/solutions/ultimate-small-business-security/Bitdefender_Final_1080p_V.webm"
         controls
         playsinline
-        style="width:100%;max-width:520px;height:auto;border-radius:var(--radius-lg,16px);display:block;"
+        style="width:100%;max-width:520px;height:auto;border-radius:var(--radius-lg);display:block;"
       ></video>
     </bd-features-tab>
   `,
@@ -257,7 +257,7 @@ export const WithCTASlot = {
       ${heading}
       ${content}
       <img slot="media" src="/assets/tabs-img1.png" alt="Admin" loading="lazy" style="${mediaStyle}" />
-      <bd-button-link slot="cta" href="#" kind="primary" size="md">Custom CTA button</bd-button-link>
+      <bd-button-link slot="cta" href="#" variant="primary" size="md">Custom CTA button</bd-button-link>
     </bd-features-tab>
   `,
   parameters: { docs: { description: { story: 'Buton CTA custom via `slot="cta"`.' } } }
@@ -275,9 +275,9 @@ export const WithTabs = {
     >
       <bd-tab-panel title="Imagine">
         <bd-features-tab cta-label="Stay worry free" cta-href="#" cta-kind="danger">
-          <bd-h as="h4" slot="heading" color="var(--color-blue-500)">Keep your loved ones protected.</bd-h>
+          <bd-h as="h4" slot="heading" color="primary">Keep your loved ones protected.</bd-h>
           <div slot="content">
-            <bd-p kind="regular">As the Subscription Manager, you can oversee and adjust online safety.</bd-p>
+            <bd-p variant="regular">As the Subscription Manager, you can oversee and adjust online safety.</bd-p>
           </div>
           <img slot="media" src="/assets/tabs-img1.png" alt="Admin using laptop" loading="lazy" style="${mediaStyle}" />
         </bd-features-tab>
@@ -285,9 +285,9 @@ export const WithTabs = {
 
       <bd-tab-panel title="YouTube">
         <bd-features-tab cta-label="Learn more" cta-href="#" cta-kind="danger">
-          <bd-h as="h4" slot="heading" color="var(--color-blue-500)">Watch how it works.</bd-h>
+          <bd-h as="h4" slot="heading" color="primary">Watch how it works.</bd-h>
           <div slot="content">
-            <bd-p kind="regular">See Bitdefender in action with our video walkthrough.</bd-p>
+            <bd-p variant="regular">See Bitdefender in action with our video walkthrough.</bd-p>
           </div>
           <bd-video-player
             slot="media"
@@ -301,9 +301,9 @@ export const WithTabs = {
 
       <bd-tab-panel title="Video">
         <bd-features-tab cta-label="Get started" cta-href="#" cta-kind="danger">
-          <bd-h as="h4" slot="heading" color="var(--color-blue-500)">See the full demo.</bd-h>
+          <bd-h as="h4" slot="heading" color="primary">See the full demo.</bd-h>
           <div slot="content">
-            <bd-p kind="regular">Watch our full product demo and discover all features.</bd-p>
+            <bd-p variant="regular">Watch our full product demo and discover all features.</bd-p>
           </div>
           <bd-video-player
             slot="media"
@@ -366,25 +366,25 @@ export const WithFeaturesTabVideo = {
     >
       <bd-tab-panel title="Admin">
         <bd-features-tab cta-label="Stay worry free" cta-href="#" cta-kind="danger">
-          <bd-h as="h4" slot="heading" color="var(--color-blue-500)">Keep your loved ones protected.</bd-h>
+          <bd-h as="h4" slot="heading" color="primary">Keep your loved ones protected.</bd-h>
           <div slot="content">
-            <bd-p kind="regular">As the Subscription Manager, you can oversee and adjust online safety through an intuitive dashboard.</bd-p>
+            <bd-p variant="regular">As the Subscription Manager, you can oversee and adjust online safety through an intuitive dashboard.</bd-p>
           </div>
           <img
             slot="media"
             src="/assets/tabs-img1.png"
             alt="Admin using laptop"
             loading="lazy"
-            style="width:100%;max-width:520px;height:auto;border-radius:var(--radius-lg,16px);object-fit:cover;display:block;"
+            style="width:100%;max-width:520px;height:auto;border-radius:var(--radius-lg);object-fit:cover;display:block;"
           />
         </bd-features-tab>
       </bd-tab-panel>
 
       <bd-tab-panel title="YouTube">
         <bd-features-tab cta-label="Learn more" cta-href="#" cta-kind="danger">
-          <bd-h as="h4" slot="heading" color="var(--color-blue-500)">Watch how it works.</bd-h>
+          <bd-h as="h4" slot="heading" color="primary">Watch how it works.</bd-h>
           <div slot="content">
-            <bd-p kind="regular">See Bitdefender in action with our full video walkthrough.</bd-p>
+            <bd-p variant="regular">See Bitdefender in action with our full video walkthrough.</bd-p>
           </div>
           <bd-video-player
             slot="media"
@@ -398,9 +398,9 @@ export const WithFeaturesTabVideo = {
 
       <bd-tab-panel title="Video">
         <bd-features-tab cta-label="Get started" cta-href="#" cta-kind="danger">
-          <bd-h as="h4" slot="heading" color="var(--color-blue-500)">See the full demo.</bd-h>
+          <bd-h as="h4" slot="heading" color="primary">See the full demo.</bd-h>
           <div slot="content">
-            <bd-p kind="regular">Watch our full product demo and discover all the features available.</bd-p>
+            <bd-p variant="regular">Watch our full product demo and discover all the features available.</bd-p>
           </div>
           <bd-video-player
             slot="media"
@@ -414,16 +414,16 @@ export const WithFeaturesTabVideo = {
 
       <bd-tab-panel title="Teen">
         <bd-features-tab cta-label="Explore features" cta-href="#" cta-kind="danger">
-          <bd-h as="h4" slot="heading" color="var(--color-blue-500)">Safe browsing for teens.</bd-h>
+          <bd-h as="h4" slot="heading" color="primary">Safe browsing for teens.</bd-h>
           <div slot="content">
-            <bd-p kind="regular">Give teens the freedom to explore online while keeping them protected from threats.</bd-p>
+            <bd-p variant="regular">Give teens the freedom to explore online while keeping them protected from threats.</bd-p>
           </div>
           <img
             slot="media"
             src="/assets/tabs-img3.png"
             alt="Teen protection"
             loading="lazy"
-            style="width:100%;max-width:520px;height:auto;border-radius:var(--radius-lg,16px);object-fit:cover;display:block;"
+            style="width:100%;max-width:520px;height:auto;border-radius:var(--radius-lg);object-fit:cover;display:block;"
           />
         </bd-features-tab>
       </bd-tab-panel>

package/src/components/fieldset/fieldset.css.js

@@ -0,0 +1,30 @@
+import { css } from 'lit';
+
+/** Styled entirely from design tokens — see npm run lint:tokens. */
+export const fieldsetCSS = css`
+  :host { display: block; }
+
+  fieldset {
+    margin: 0;
+    padding: var(--spacing-16);
+    border: var(--border-width-1) solid var(--color-border-subtle);
+    border-radius: var(--radius-md);
+  }
+
+  legend {
+    padding: 0 var(--spacing-8);
+    font-family: var(--form-label-large-fontFamily);
+    font-size: var(--form-label-large-fontSize);
+    font-weight: var(--form-label-large-fontWeight);
+    line-height: var(--form-label-large-lineHeight);
+    color: var(--form-label-large-color);
+  }
+
+  .fields {
+    display: flex;
+    flex-direction: column;
+    gap: var(--form-fieldSpacing);
+  }
+`;
+
+export default fieldsetCSS;

package/src/components/fieldset/fieldset.js

@@ -0,0 +1,28 @@
+import { LitElement, html, nothing } from 'lit';
+// Installs the design tokens into document scope; see src/tokens/tokens.js
+import '../../tokens/tokens.js';
+import { fieldsetCSS } from './fieldset.css.js';
+
+export class BdFieldset extends LitElement {
+  static styles = [fieldsetCSS];
+
+  static properties = {
+    legend: { type: String }
+  };
+
+  constructor() {
+    super();
+    this.legend = '';
+  }
+
+  render() {
+    return html`
+      <fieldset>
+        ${this.legend ? html`<legend>${this.legend}</legend>` : nothing}
+        <div class="fields"><slot></slot></div>
+      </fieldset>
+    `;
+  }
+}
+
+customElements.define('bd-fieldset', BdFieldset);

package/src/components/fieldset/fieldset.stories.js

@@ -0,0 +1,84 @@
+import { html } from 'lit';
+import './fieldset.js';
+import '../switch/switch.js';
+import '../label/label.js';
+import '../help-text/help-text.js';
+import '../input/input.js';
+
+export default {
+  title     : 'Atoms/Fieldset',
+  tags      : ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+**BdFieldset** groups related form controls under a shared caption.
+
+### Usage
+\`\`\`html
+<bd-fieldset legend="Choose your plan">
+  <bd-radio name="plan" value="basic" label="Basic"></bd-radio>
+  <bd-radio name="plan" value="premium" label="Premium"></bd-radio>
+</bd-fieldset>
+\`\`\`
+
+### Props
+| Prop | Values | Default |
+|---|---|---|
+| \`legend\` | the group caption — omit for an unlabelled group | \`''\` |
+
+The controls go in the default slot.
+
+### Why group at all
+A screen reader reads a control's own label, not the question above it. Without
+a group caption, "Basic" and "Premium" are announced with no indication of what
+they are choosing between. The \`legend\` is what supplies that.
+
+Because slotted controls sit inside the \`<fieldset>\` in the flattened tree, the
+native grouping does apply here — unlike a \`for\` reference, which cannot cross
+the shadow boundary.
+        `
+      }
+    }
+  },
+  argTypes: {
+    legend: {
+      control    : 'text',
+      description: 'The group caption. Omit for an unlabelled group, though a group without one is rarely useful.',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: "" }, category: 'Content' }
+    }
+  }
+};
+
+export const Default = () => html`
+    <bd-fieldset legend="Notifications">
+      <bd-switch label="Email"></bd-switch>
+      <bd-switch label="SMS"></bd-switch>
+    </bd-fieldset>
+  `;
+
+/**
+ * The gap between fields comes from `--form-fieldSpacing`, and the gap inside
+ * each field from `--form-label-default-marginBottom` and
+ * `--form-help-text-default-marginTop`. None of those three is visible in a
+ * fieldset of bare switches, so this story is the one that shows them — it is
+ * where a change to the form spacing tokens actually appears.
+ */
+export const FieldStack = () => html`
+    <bd-fieldset legend="Billing address">
+      <div>
+        <bd-label for="line1" required>Street</bd-label>
+        <bd-custom-input label="" size="md" placeholder="221B Baker Street"></bd-custom-input>
+        <bd-help-text>Include the building number.</bd-help-text>
+      </div>
+      <div>
+        <bd-label for="city" required>City</bd-label>
+        <bd-custom-input label="" size="md" placeholder="London"></bd-custom-input>
+      </div>
+      <div>
+        <bd-label for="post">Postcode</bd-label>
+        <bd-custom-input label="" size="md" placeholder="NW1 6XE"></bd-custom-input>
+        <bd-help-text tone="error">We could not find that postcode.</bd-help-text>
+      </div>
+    </bd-fieldset>
+  `;

package/src/components/footer/footer-links-group.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 {
@@ -8,28 +9,23 @@ export default css`
     padding-right: var(--spacing-64);
   }
 
-  h4 {
-    font-size: var(--font-size-sm);
-    font-weight: var(--font-weight-bold);
-    color: #ffffff;
-    margin: 0;
-  }
-
+  /* No type here: this needs a directly-slotted raw anchor, and every consumer
+     slots bd-link -- measured, 2 instances, assigned [bd-link], 0 raw anchors.
+     The fourth rule in this component family to name the anchor tag where the
+     markup is bd-link. The remaining two declarations are dead by the same
+     proof and are left for a follow-up. */
   ::slotted(a) {
-    color: #ffffff;
+    color: var(--color-text-inverse);
     text-decoration: none;
-    font-size: var(--typography-body-regular-fontSize);
-    line-height: 1.8;
   }
 
   .group-title {
     font-size: var(--typography-body-regular-fontSize);
-    font-family: var(--typography-fontFamily-sans, 'IBM Plex Sans');
+    font-family: var(--typography-fontFamily-sans);
     font-weight: var(--typography-heading-h1-fontWeight);
-    color: #ffffff; 
   }
 
-  @media (max-width: 768px) {
+  @media ${unsafeCSS(below('md'))} {
  
   :host(:nth-of-type(2)) .group-title {
     display: none !important;

package/src/components/footer/footer-links-group.js

@@ -1,5 +1,6 @@
 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 footerCSS from './footer-links-group.css.js';
 
@@ -15,11 +16,11 @@ export class BdFooterLinksGroup extends LitElement {
 
   render() {
     return html`
-    ${this.title ? html`<bd-h as="h6"  fontWeight="700" color="#ffffff" class="group-title">${this.title}</bd-h>` : html`&nbsp;`}
+    ${this.title ? html`<bd-h as="h6"  fontWeight="bold" color="inverse" class="group-title">${this.title}</bd-h>` : html`&nbsp;`}
     <slot></slot>
   `;
   }
 }
-BdFooterLinksGroup.styles = [tokens, footerCSS];
+BdFooterLinksGroup.styles = [footerCSS];
 
 customElements.define('bd-footer-links-group', BdFooterLinksGroup);

package/src/components/footer/footer-lp.css.js

@@ -1,32 +1,51 @@
-import { css } from 'lit';
+import { css, unsafeCSS } from 'lit';
+import { below } from '../shared/token-scales.js';
 
 export default css`
   :host {
     display: block;
+    /* no role: the masthead's ground, and it stays a primitive on purpose.
+       blue-600 is this system's brand INK step -- six roles resolve to it
+       (--color-text-brand, --status-brand-text, --status-brand-accent,
+       --status-info-text, --color-action-primary-hover and
+       --citation-reference-color) and every one of them is ink or an action,
+       not a surface.
+       .
+       So a --color-surface-brand-strong at this value would not be a missing
+       role, it would be a trap: brand ink on a brand-strong surface measures
+       1.00:1 -- identical colours, invisible text -- and the primary action
+       colour on it is 1.36:1, which is where a button in a footer sits. The
+       role that reads here is --color-text-inverse at 6.18:1, which is what
+       the next line uses.
+       .
+       Two consumers, both footers, against the twelve that justified
+       --color-surface-container. See plans/reports/phase-2-vocab-e-has-role-pass.md
+       question E2. */
     background-color: var(--color-blue-600);
-    color: var(--color-neutral-0);
-    font-family: 'IBM Plex Sans', sans-serif;
+    color: var(--color-text-inverse);
+    font-family: var(--typography-fontFamily-sans);
     font-size: var(--typography-body-small-fontSize);
-    line-height: var(--typography-lineHeight-normal); 
+    /* The role's own leading -- see footer.css.js's :host. Deleting it was
+       measured to drop this footer to the font metric too. */
+    line-height: var(--typography-body-small-lineHeight);
   }
 
   bd-divider-vertical {
     display: inline-block;
     width: var(--form-input-default-borderWidth);
-    height: var(--dimension-20px);
-    background-color: var(--color-neutral-0);
+    height: var(--dimension-20);
+    background-color: var(--color-surface-default);
   }
 
   bd-divider-horizontal {
     display: block;
-    background-color: var(--color-neutral-0);
+    background-color: var(--color-surface-default);
     opacity: 0.25;
     margin: var(--spacing-16) 0;
   }
 
   footer {
     padding: var(--spacing-32) var(--spacing-16);
-    max-width: 1200px;
     margin: auto;
   }
 
@@ -34,7 +53,7 @@ export default css`
     display: flex;
     justify-content: space-between;
     align-items: center;
-    background-color: var(--color-blue-500);
+    background-color: var(--color-surface-brand);
     padding: var(--spacing-24) 0;
   }
 
@@ -64,8 +83,20 @@ export default css`
   }
 
   .footer-copy {
-    font-size: var(--typography-fontSize-sm);
-    color: var(--color-gray-400);
+    /* No font-size: as footer.css.js's twin of this rule -- :host already
+       resolves --typography-body-small-fontSize and this restated the same
+       14px as the primitive. The colour stays. */
+    /* no role: --color-text-muted-inverse is the role for this job -- dimmed ink
+       on a dark ground -- and it CANNOT be used here. Measured against the
+       host's blue-600: neutral-100 is 4.80:1 and passes body text; the role's
+       neutral-300 is 2.72:1 and fails. The role was built against
+       surface-inverse (neutral-900), where neutral-300 reaches 7.92:1; on a
+       brand ground two steps lighter it runs out of room.
+       .
+       So the value stays a primitive deliberately. Adopting the role here would
+       be a category-correct, job-correct, ACCESSIBILITY-BREAKING change, which
+       is the case worth a marker rather than a silent primitive. */
+    color: var(--color-neutral-100);
   }
 
   .footer-anpc-lp {
@@ -74,32 +105,28 @@ export default css`
   }
 
   .container {
-    max-width: 1600px;
     margin: 0 auto;
-    padding: 0 var(--spacing-16);
   }
 
   .footer-top-bleed {
-    background: var(--color-blue-500);
+    background: var(--color-surface-brand);
   }
 
-  a {
-    color: var(--color-neutral-0);
-    text-decoration: none;
-  }
-
-  a:hover {
-    text-decoration: underline;
-  }
+  /* No a, a:hover, a:focus or .footer-nav-main rules. This template renders no
+     anchor of its own -- the links are slotted, and bd-footer-nav renders
+     .footer-nav-main into its own shadow root -- so none of the four could
+     match: measured 0 across the 22 built footer stories in 11 bd-footer-lp
+     roots. The secondary nav's ink and focus ring are footer-nav-menu.css.js',
+     which is the sheet in the same tree as the anchors.
 
-  a:focus {
-    outline: none;
-    border: 2px solid var(--color-blue-500);
-    box-shadow: var(--focus-outline-primary, 0 0 0 2px rgba(0, 109, 255, 0.3));
-    border-radius: 4px;
-  }
+     One of them expressed an intent worth recording rather than resurrecting:
+     the mobile query dropped .footer-nav-main to gap 8, where the live sheet
+     keeps 16 at both. So the composed rhythm today is 16px stacked and 33px in
+     a row -- 16 either side of a 1px divider -- and tightening stacked tap
+     targets from 40px of pitch to 32 is a decision, not a repair. */
 
-  @media (max-width: 768px) {
+  /* Responsive styles */
+  @media ${unsafeCSS(below('md'))} {
     .footer-top {
       flex-direction: column;
       gap: var(--spacing-16);
@@ -117,13 +144,15 @@ export default css`
       margin-bottom: var(--spacing-16);
     }
 
+    /* Stacked on a phone. The slot is display: contents, so the slotted
+       links are this flex box's items -- and only ::slotted reaches them. */
     .footer-secondary-nav {
       flex-direction: column;
       align-items: flex-start;
       gap: var(--spacing-8);
     }
 
-    .footer-secondary-nav bd-divider-vertical {
+    .footer-secondary-nav ::slotted(bd-divider-vertical) {
       display: none !important;
     }
   }

package/src/components/footer/footer-lp.js

@@ -1,11 +1,18 @@
 import { LitElement, html } from 'lit';
+// Installs the design tokens into document scope; see src/tokens/tokens.js
+import "../../tokens/tokens.js";
+/* The md boundary comes from the shared breakpoint source so the CSS and the
+   JS cannot drift apart again: bd-footer switched at 767 while bd-footer-lp,
+   sharing footer-nav-menu.css.js, switched at 768 — so at exactly 768px the
+   LP footer rendered its mobile markup under the desktop stylesheet. */
+import { matchesBelow } from '../shared/token-scales.js';
 import '../../components/divider/divider-horizontal.js';
 import '../../components/divider/divider-vertical.js';
 import '../../components/footer/footer-links-group.js';
 import '../../components/footer/footer-nav-menu.js';
 import '../../components/grid/grid.js';
-import { tokens } from "../../tokens/tokens.js";
 import footerCSS from './footer.css.js';
+import { ensembleCSS } from '../shared/ensemble.css.js';
 import { localeMap } from './localeMap.js';
 
 export class BdFooterLP extends LitElement {
@@ -17,7 +24,7 @@ export class BdFooterLP extends LitElement {
   constructor() {
     super();
     this.currentLocale = 'en';
-    this._isMobile = window.innerWidth <= 768;
+    this._isMobile = matchesBelow('md');
   }
 
   connectedCallback() {
@@ -75,13 +82,11 @@ export class BdFooterLP extends LitElement {
         });
 
         if (exactRegionMatch) {
-          country = exactRegionMatch[1];
           const originalKey = Object.keys(localeMap).find(k =>
             k.toLowerCase() === exactRegionMatch[0]
           );
           this.currentLocale = originalKey || exactRegionMatch[0];
         } else {
-          country = possibleMatches[0][1];
           const originalKey = Object.keys(localeMap).find(k =>
             k.toLowerCase() === possibleMatches[0][0]
           );
@@ -111,9 +116,9 @@ export class BdFooterLP extends LitElement {
       if (impressumLink) {
         impressumDivider = impressumLink.previousElementSibling;
 
-        if (impressumDivider && impressumDivider.tagName === 'BD-DIVIDER-VERTICAL' &&
-            impressumDivider.nextElementSibling === impressumLink) {
-        } else {
+        // Keep it only if it is the divider immediately before the link
+        if (!(impressumDivider && impressumDivider.tagName === 'BD-DIVIDER-VERTICAL' &&
+            impressumDivider.nextElementSibling === impressumLink)) {
           impressumDivider = null;
         }
       }
@@ -129,7 +134,7 @@ export class BdFooterLP extends LitElement {
   }
 
   _handleResize() {
-    this._isMobile = window.innerWidth <= 768;
+    this._isMobile = matchesBelow('md');
   }
 
   get locale() {
@@ -152,7 +157,7 @@ export class BdFooterLP extends LitElement {
 
     return html`
     <div class="footer-top-bleed">
-      <div class="container">
+      <div class="bd-ensemble container">
         <div class="footer-top">
           <div class="footer-logo">
             <slot name="logo">
@@ -172,7 +177,7 @@ export class BdFooterLP extends LitElement {
       </div>
     </div>
 
-    <footer class="container">
+    <footer class="bd-ensemble container">
       <div class="footer-main-content">
         <slot name="content"></slot>
       </div>
@@ -180,7 +185,7 @@ export class BdFooterLP extends LitElement {
       <div class="footer-secondary-nav">
         <slot name="secondary-nav"></slot>
       </div>
-      <bd-divider-horizontal width="100%" color="white" opacity="0.25"></bd-divider-horizontal>
+      <bd-divider-horizontal width="100%" color="inverse" opacity="0.25"></bd-divider-horizontal>
       <div class="footer-extra">
         <div class="footer-copy">
           <slot name="copyright">
@@ -230,7 +235,7 @@ export class BdFooterLP extends LitElement {
            !(assignedNodes.length === 1 && assignedNodes[0].nodeType === Node.TEXT_NODE && assignedNodes[0].textContent.trim() === '');
   }
 
-  static styles = [tokens, footerCSS];
+  static styles = [ensembleCSS, footerCSS];
 }
 
 customElements.define('bd-footer-lp', BdFooterLP);