@repobit/dex-system-design 0.25.11 → 0.26.0

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

@@ -1,69 +1,98 @@
-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, not the primitive that happens to equal it.
+       Deleting this outright was measured to drop the footer to the font's
+       metric (21px -> normal), because body-small is referenced for the size
+       only -- nothing would have supplied the leading. */
+    line-height: var(--typography-body-small-lineHeight);
   }
-.footer-nav-main-container a:focus,
 .footer-links a:focus,
 .footer-countries-container a:focus,
 .country-toggle:focus,
 .close-countries-button:focus,
 .social-icons 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;
+  /* The ring is --focus-outline-primary alone, as in every other component.
+     The 2px border that stood here was redundant and, since these elements
+     have no border otherwise, it shifted the layout by 2px on focus. */
+  box-shadow: var(--focus-outline-primary);
+  border-radius: var(--focus-outline-radius);
 }
 
 .country-toggle:focus,
 .close-countries-button:focus {
-  border-color: var(--color-blue-500);
-  box-shadow: var(--focus-outline-primary, 0 0 0 2px rgba(0, 109, 255, 0.3));
+  box-shadow: var(--focus-outline-primary);
 }
 
 .footer-countries-container a:focus {
-  border-color: var(--color-blue-500);
-  box-shadow: var(--focus-outline-primary, 0 0 0 2px rgba(0, 109, 255, 0.3));
-  border-radius: 4px;
+  box-shadow: var(--focus-outline-primary);
+  border-radius: var(--focus-outline-radius);
   padding: 2px 6px;
 }
 
-.footer-nav-main-container a:focus {
-  padding: 2px 6px;
-  margin: -2px -6px;
-}
+/* No navigation rules in this sheet: no .footer-nav-main, no .second-nav, no
+   bd-footer-nav and no bd-footer-links-group a. None of them names anything in
+   this shadow tree. .footer-nav-main is rendered by bd-footer-nav into its own
+   root -- this template only has .footer-nav-main-container, the box the slot
+   sits in -- and bd-footer-nav and bd-footer-links-group are slotted elements,
+   reachable only through ::slotted. Measured across the 22 built footer
+   stories, in 12 bd-footer roots and 11 bd-footer-lp roots: 0 matches for
+   every one of those selectors.
+   
+   The focus ring they were trying to draw now lives in
+   footer-nav-menu.css.js, spelled ::slotted, where it renders.
+   
+   The bd-footer-links-group *layout* rules further down are the same kind of
+   unreachable and are left alone: they are the quick-links column, not
+   navigation, and they belong to whichever phase takes that family. */
 .footer-secondary-nav {
 padding-top: var(--spacing-24);
 padding-bottom: var(--spacing-24);
 }
-bd-footer-links-group a:focus {
-  padding: 2px 6px;
-  margin: -2px -6px;
-  display: inline-block;
+.footer-nav-main-container {
+padding-top: var(--spacing-12);
+padding-bottom: var(--spacing-12);
 }
-
   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;
   }
 
   footer {
     padding: var(--spacing-32) var(--spacing-16);
-    max-width: 1200px;
     margin: auto;
   }
 
@@ -71,23 +100,7 @@ bd-footer-links-group a:focus {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    background-color: var(--color-blue-500);
-  }
-
-  .footer-nav-main-container {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    gap: var(--spacing-16);
-    flex-wrap: wrap;
-    padding-top: var(--spacing-12);
-    padding-bottom: var(--spacing-12);
-    font-size: var(--typography-body-regular-fontSize);
-    font-family: var(--typography-fontFamily-sans, 'IBM Plex Sans');
-  }
-    
-  bd-footer-nav.second-nav {
-    font-weight: var(--typography-fontWeight-medium);
+    background-color: var(--color-surface-brand);
   }
 
   .footer-links {
@@ -123,18 +136,10 @@ bd-footer-links-group a:focus {
     align-items: center;
     margin: 0;
     font-size: var(--typography-body-small-fontSize);
-    font-family: var(--typography-fontFamily-sans, 'IBM Plex Sans');
-    font-weight: var(--typography-fontWeight-normal);
-    color: white;
-  }
-
-  .footer-middle-line > * {
-    line-height: var(--typography-lineHeight-normal);
-  }
-
-  .second-nav {
-    flex-shrink: 0;
-    max-width: 60%;
+    font-family: var(--typography-fontFamily-sans);
+    /* No font-weight: body-small, whose size this rule asks for, is normal, and
+       the inherited weight is 400 -- measured inert either way. */
+    color: var(--color-text-inverse);
   }
 
   .footer-address {
@@ -157,16 +162,6 @@ bd-footer-links-group a:focus {
     min-width: 200px
   }
 
-  .quick-links-section {
-    flex: 1 1 auto;
-    min-width: 200px;
-  }
-
-  .quick-links-title {
-    font-weight: var(--typography-fontWeight-semibold);
-    margin-bottom: var(--spacing-8);
-  }
-
   .quick-links-columns {
     display: grid;
     gap: var(--spacing-8) var(--spacing-16);
@@ -178,16 +173,6 @@ bd-footer-links-group a:focus {
     gap: var(--spacing-4);
   }
 
-  .footer-social-legal {
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    gap: var(--spacing-16);
-    border-top: var(--form-input-default-borderWidth) solid rgba(255,255,255,0.2);
-    padding-top: var(--spacing-16);
-    margin-bottom: var(--spacing-16);
-  }
-
   .legal-links {
     display: flex;
     flex-wrap: wrap;
@@ -196,19 +181,18 @@ bd-footer-links-group a:focus {
 
   .social-icons {
     display: flex;
-    gap: var(--spacing-16);
-  }
-
-  .footer-bottom {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+    /* Wrapping rather than a breakpoint: the row is a variable number of
+       icons, so the width it needs depends on how many were slotted, not on
+       the viewport. Without this the last one hung 12px past a 320px screen. */
     flex-wrap: wrap;
     gap: var(--spacing-16);
-    border-top: var(--form-input-default-borderWidth) solid rgba(255,255,255,0.2);
-    padding-top: var(--spacing-16);
   }
 
+  /* .footer-social-legal and .footer-bottom stood here. Neither element is
+     rendered: measured 0 occurrences across all 11 footer stories, while
+     .country-toggle in the same sheet rendered in all 11. They carried the only
+     two rgba(255,255,255,0.2) edges in the package, and a form-control width
+     token doing a divider's job. */
   .locale-select {
     display: flex;
     align-items: center;
@@ -236,28 +220,20 @@ bd-footer-links-group a:focus {
   content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M4.14286 1C2.40937 1 1 2.40937 1 4.14286V19.8571C1 21.5906 2.40937 23 4.14286 23H19.8571C21.5906 23 23 21.5906 23 19.8571V4.14286C23 2.40937 21.5906 1 19.8571 1H4.14286ZM18.7326 5.125L13.6353 10.9491L19.6312 18.875H14.9366L11.2634 14.0674L7.05491 18.875H4.72232L10.1732 12.6433L4.42277 5.125H9.23527L12.5598 9.52009L16.4 5.125H18.7326ZM16.8763 17.4804L8.53304 6.44598H7.1433L15.5799 17.4804H16.8714H16.8763Z" fill="white"/></svg>');
 }
 
-  a {
-    color: var(--color-neutral-0);
-    text-decoration: none;
-  }
-
-  a:hover {
-    text-decoration: underline;
-  }
 
   ::slotted(a[slot="social-top"]) {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: var(--dimension-32px);
-    height: var(--dimension-32px);
+    width: var(--dimension-32);
+    height: var(--dimension-32);
   }
 
   ::slotted(a[slot="social-top"] svg) {
     width: 100%;
     height: 100%;
-    fill: white;
-    color: white !important;
+    fill: var(--color-text-inverse);
+    color: var(--color-text-inverse) !important;
   }
 
   .footer-links-right.social-icons {
@@ -289,93 +265,46 @@ bd-footer-links-group a:focus {
     display: inline-block;
   }
 
-  .dropdown-btn {
-    cursor: pointer;
-    padding: var(--spacing-8) var(--spacing-16);
-    background: transparent;
-    border: var(--form-input-default-borderWidth) solid #ccc;
-    border-radius: var(--radius-sm);
-    font-size: var(--typography-body-small-fontSize);
-    color: white;
-  }
-
-  .dropdown-list {
-    position: absolute;
-    top: 100%;
-    right: 0;
-    background: white;
-    border: var(--form-input-default-borderWidth) solid #ccc;
-    border-radius: var(--radius-sm);
-    display: none;
-    min-width: 160px;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
-    z-index: 1000;
-  }
-
-  .dropdown-list.open {
-    display: block;
-  }
-
-  .dropdown-list ::slotted(a) {
-    display: block;
-    padding: var(--spacing-8) var(--spacing-16);
-    color: #333;
-    text-decoration: none;
-  }
-
-  .dropdown-list ::slotted(a:hover) {
-    background: #f2f2f2;
-  }
-
-  .countries-dropdown {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    background: white;
-    color: black;
-    padding: var(--spacing-8);
-    border: var(--form-input-default-borderWidth) solid #ccc;
-    z-index: 10;
-  }
-
   .country-toggle {
     background: none;
     border: var(--form-input-default-borderWidth) solid white;
-    color: white;
+    color: var(--color-text-inverse);
     padding: var(--spacing-8) var(--spacing-16);
     cursor: pointer;
     border-radius: var(--form-input-large-borderRadius);
-    font-family: 'IBM Plex Sans', sans-serif;
+    font-family: var(--typography-fontFamily-sans);
     font-size: var(--typography-body-small-fontSize);
     display: inline-flex;
     align-items: center;
     gap: var(--spacing-8);
   }
 
-  .country-toggle img {
-    width: var(--dimension-20px);
-    height: var(--dimension-20px);
-    object-fit: contain;
-  }
-
-  .country-toggle .arrow {
-    margin-left: var(--spacing-4);
-  }
-
-  .arrow img {
-    display: inline-block;
-    width: var(--dimension-20px);
-    height: auto;
-    vertical-align: middle;
-  }
+  /* Three rules stood here and none could match, all left behind by the same
+     migration. The country toggle renders <bd-globe-icon> and the arrow atoms
+     with size and color as props: ".country-toggle img" had no <img> to size,
+     and ".arrow" is not a class this component renders at all -- so both it and
+     ".arrow img" were orphans, the second nested inside the first's absent
+     element. The atoms' own props carry the sizing. */
 
   .countries-container {
     margin-top: var(--spacing-4);
   }
 
   .footer-copy {
-    font-size: var(--typography-fontSize-sm);
-    color: var(--color-gray-400);
+    /* No font-size: :host already resolves --typography-body-small-fontSize, and
+       this restated the identical 14px as the primitive. The colour stays --
+       neutral-100 is a step dimmer than the host's inverse white. */
+    /* 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-countries-container {
@@ -383,27 +312,12 @@ bd-footer-links-group a:focus {
     gap: 10rem;
   }
 
-  bd-footer-links-group a.selected {
-    font-weight: var(--typography-fontWeight-bold);
-    position: relative;
-    padding-left: var(--spacing-12);
-  }
-
-  bd-footer-links-group a.selected::before {
-    content: '•';
-    position: absolute;
-    left: 0;
-    color: white;
-  }
-
   .footer-top-bleed {
-    background: var(--color-blue-500);
+    background: var(--color-surface-brand);
   }
 
   .container {
-    max-width: 1600px;
     margin: 0 auto;
-    padding: 0 var(--spacing-16);
   }
 
   .footer-top {
@@ -413,7 +327,7 @@ bd-footer-links-group a:focus {
 
   a.impressum {
     display: none;
-    color: white;
+    color: var(--color-text-inverse);
     text-decoration: none;
   }
 
@@ -422,6 +336,8 @@ bd-footer-links-group a:focus {
   }
 
   .country-selected {
+    /* no role: the selected country in the picker -- 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);
     position: relative;
     padding-left: var(--spacing-24);
@@ -430,32 +346,34 @@ bd-footer-links-group a:focus {
   .country-selected .bullet {
     position: absolute;
     left: 0;
-    color: white;
-  }
+    color: var(--color-text-inverse);
+  }
+
+  /* Two "slot[name=countries]::slotted(a)" rules stood here -- a base one
+     and a .selected one painting the chosen country on --color-surface-brand.
+     Neither could ever match, for two independent reasons.
+     .
+     There is no <slot name="countries"> in this shadow tree. The template
+     declares nine slots (logo, top-right, nav, quick-links, social-links,
+     secondary-nav, address, copyright, anpc) and countries is not among them,
+     so the selector's first compound matches nothing. The slot="countries"
+     attribute at footer.js:473 sits on a <bd-footer-links-group> that this
+     component renders INTO ITS OWN shadow root, where a slot attribute assigns
+     nothing.
+     .
+     And the country links are <bd-link> elements (footer.js:475), not <a>, so
+     ::slotted(a) would not have matched them even given a real slot.
+     .
+     The selected-country highlight this described has therefore never
+     rendered. Restoring it is a design question, not a CSS repair: it needs a
+     real slot or a rule on the light-DOM children, and somebody has to decide
+     which. */
 
-  slot[name="countries"]::slotted(a) {
-    color: black;
-    text-decoration: none;
-    padding: var(--spacing-4) var(--spacing-8);
-    display: inline-block;
-  }
-
-  slot[name="countries"]::slotted(a.selected) {
-    background-color: #007bff;
-    color: white;
-    border-radius: var(--radius-sm);
-  }
-
-  .footer-countries-container a.selected {
-    font-weight: var(--typography-fontWeight-bold);
-    color: var(--color-primary);
-    right: 12px;
-  }
 .footer-countries-container {
     margin-top: var(--spacing-16);
     padding: var(--spacing-24);
     border-radius: var(--radius-lg);
-    transition: all 0.3s ease;
+    transition: all var(--transition-duration-slow) var(--transition-easing-ease);
     width: 90%;
   }
   .footer-countries-container {
@@ -471,31 +389,22 @@ bd-footer-links-group a:focus {
   border: none;
   cursor: pointer;
   padding: var(--spacing-6);
-  z-index: 10;
+  /* Raised, not overlay: it only has to clear the country links it sits on
+     top of inside this panel, and nothing else in this shadow root is
+     positioned above them. */
+  z-index: var(--z-raised);
 }
 
-.close-countries-button img {
-  width: var(--dimension-20px);
-  height: var(--dimension-20px);
-  display: block;
-}
-@media (max-width: 767px) {
+/* A ".close-countries-button img" rule stood here and could never match: the
+   button renders <bd-close-icon size="18">, so the size is the atom's prop and
+   there is no <img> in this root. */
+@media ${unsafeCSS(below('md'))} {
   :host {
     font-size: var(--typography-body-small-fontSize);
   }
 .footer-address{
   display: none !important;
   }
-  .footer-nav-main-container {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: var(--spacing-8);
-  }
-
-  .footer-nav-main-container bd-divider-vertical {
-    display: none !important;
-  }
-
   .footer-middle-line {
     flex-direction: column;
     align-items: flex-start;
@@ -530,34 +439,17 @@ bd-footer-links-group a:focus {
     width: 100%;
   }
 
-  .footer-nav-main-container a[slot="nav"] {
-    color: #151719 !important;
-  }
-
   bd-footer-links-group {
     margin-bottom: 10px;
   }
 
-  .second-nav .footer-nav-main-container {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: var(--spacing-14);
-  }
-
-  .second-nav .footer-nav-main-container bd-divider-vertical {
-    display: none !important;
-  }
-
-  .second-nav .footer-nav-main-container a {
-    color: #151719 !important;
-    padding: var(--spacing-4) 0;
-    display: block;
-  }
-  
-  .footer-links-right.social-icons a svg {
-    fill: #151719 !important;
-    color: #151719 !important;
-  }
+  /* A ".footer-links-right.social-icons a svg" rule stood here and was dead
+     twice over. The "social icons" are <bd-link> TEXT links -- Facebook,
+     Twitter, LinkedIn and the rest, spelled as words -- so there is no svg to
+     paint, and the <a> those links render lives inside bd-link's shadow root
+     where this selector cannot follow it. The class name is the misleading
+     part: it says icons and renders text. Worth knowing if icons are ever
+     wanted there, because this rule would not have coloured them either. */
 
   .social-icons {
     gap: var(--spacing-40);
@@ -565,25 +457,6 @@ bd-footer-links-group a:focus {
     margin: auto;
   }
 
-  .second-nav {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: var(--spacing-8);
-  }
-
-  .second-nav.footer-nav-main-container {
-    display: inline-grid;
-  }
-
-  .second-nav bd-divider-vertical {
-    display: none !important;
-  }
-
-  .second-nav a {
-    color: #151719 !important;
-    padding: var(--spacing-4) 0;
-    display: block;
-  }
 
   .footer-countries-toggle {
     display: flex;
@@ -744,4 +617,13 @@ bd-footer-links-group a:focus {
     flex-wrap: wrap;
 }
 }
-`;
+
+  /* A reader who asked for less motion was still getting the countries panel. Twenty-three
+     of the thirty animated directories in this package honour the query; this
+     one did not. */
+  @media (prefers-reduced-motion: reduce) {
+    .footer-countries-container {
+      transition: none;
+    }
+  }
+`;