Card meta migration, Astro 7, and the token-collapse adaptation

package.json

@@ -22,7 +22,7 @@
     "@types/leaflet": "^1.9.21",
     "@types/leaflet-draw": "^1.0.13",
     "ag-grid-community": "^35.3.1",
-    "astro": "^5.0.0",
+    "astro": "^7.2.6",
     "leaflet": "^1.9.4",
     "leaflet-draw": "^1.0.4"
   },

src/components/bcn/BcnAldoMark.astro

@@ -6,7 +6,7 @@
 // Aldo-green circle, and it is the ONE badge that stands for guidance everywhere
 // it appears: the floating help-bar button, the guidance drawer header, and the
 // Help & Guidance page hero. Aldo green (--bcn-aldo) is a deliberately distinct
-// accent — never --color-primary — so the guide reads as its own presence, not
+// accent — never --color-background-brand — so the guide reads as its own presence, not
 // another primary action.
 //
 // Purely decorative (aria-hidden). It carries no interactivity of its own — a host
@@ -52,7 +52,7 @@ const ICON_STEP = { sm: 'xs', md: 'md', lg: 'xl' } as const;
     flex-shrink: 0;
     border-radius: var(--radius-full);
     background: var(--bcn-aldo);
-    color: var(--color-text-inverse);
+    color: var(--color-content-default-knockout);
     line-height: 0;
   }
 

src/components/bcn/BcnAttentionPanel.astro

@@ -28,7 +28,7 @@ interface OutstandingItem {
   category: string;
   severity: 'needs-attention' | 'non-compliance';
   severityLabel: string;
-  /** SSR color for the severity chip; may be a `var(--color-danger)` string. */
+  /** SSR color for the severity chip; may be a `var(--color-background-utility-danger)` string. */
   severityHex: string;
   daysActive: number;
   area: string;
@@ -72,10 +72,10 @@ const payload = { outstanding, fileBase: exportFileBase };
 
 <EsaCard title="Needs Attention & Non-Compliance">
   <Fragment slot="actions">
-    <EsaButton id="ap-export-csv" color="ghost" appearance="outline" size="sm" icon="arrow-down">
+    <EsaButton id="ap-export-csv" variant="ghost" appearance="outline" size="sm" icon="arrow-down">
       Export spreadsheet
     </EsaButton>
-    <EsaButton id="ap-export-kml" color="ghost" appearance="outline" size="sm" icon="map-pin">
+    <EsaButton id="ap-export-kml" variant="ghost" appearance="outline" size="sm" icon="map-pin">
       Export KMZ
     </EsaButton>
   </Fragment>
@@ -89,7 +89,7 @@ const payload = { outstanding, fileBase: exportFileBase };
        reads as the aside. -->
   <div class="bcn-apanel__body sidebar" data-gap="lg" data-side="end">
     <div class="bcn-apanel__inset stack" data-gap="xs">
-      <h4 class="bcn-apanel__heading type-label">Active issue locations</h4>
+      <h4 class="bcn-apanel__heading typography-label">Active issue locations</h4>
       <BcnObservationMap
         observations={mapPins}
         mapId="attention-panel"
@@ -99,7 +99,7 @@ const payload = { outstanding, fileBase: exportFileBase };
     </div>
 
     <section class="bcn-apanel__outstanding stack" data-gap="sm">
-      <h4 class="bcn-apanel__heading type-label">Outstanding items ({outstanding.length})</h4>
+      <h4 class="bcn-apanel__heading typography-label">Outstanding items ({outstanding.length})</h4>
       {outstanding.length === 0 ? (
         <EsaEmptyState
           size="sm"
@@ -116,8 +116,8 @@ const payload = { outstanding, fileBase: exportFileBase };
                 label={item.severityLabel}
                 hex={item.severityHex}
               />
-              <span class="bcn-apanel__category type-body-small">{item.category}</span>
-              <span class="bcn-apanel__area type-body-small">{item.area}</span>
+              <span class="bcn-apanel__category typography-body-sm">{item.category}</span>
+              <span class="bcn-apanel__area typography-body-sm">{item.area}</span>
               <EsaBadge
                 value={`${item.daysActive}d active`}
                 variant={item.severity === 'non-compliance' ? 'danger' : 'warning'}
@@ -133,15 +133,15 @@ const payload = { outstanding, fileBase: exportFileBase };
   <Fragment slot="footer">
     <div class="cluster" data-gap="sm">
       <EsaButton
-        color="ghost"
+        variant="ghost"
         appearance="outline"
         size="sm"
         href={severityHref('needs-attention')}
       >
         All needs attention ({attentionCount})
       </EsaButton>
       <EsaButton
-        color="ghost"
+        variant="ghost"
         appearance="outline"
         size="sm"
         href={severityHref('non-compliance')}
@@ -262,7 +262,7 @@ ${placemarks}
 
   .bcn-apanel__heading {
     margin: 0;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
 
   /* ── Outstanding items ── */
@@ -279,27 +279,27 @@ ${placemarks}
     padding-block: var(--spacing-150);
     padding-inline: var(--spacing-200);
   }
-  .bcn-apanel__list > li + li { border-top: 1px solid var(--color-border-light); }
+  .bcn-apanel__list > li + li { border-top: 1px solid var(--color-border-default-subtle); }
 
   .bcn-apanel__id {
-    font-size: var(--type-size-150);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-primary);
+    font-size: var(--font-size-150);
+    font-weight: var(--typography-font-weight-semibold);
+    color: var(--color-background-brand);
     text-decoration: underline;
     text-underline-offset: 2px;
     white-space: nowrap;
   }
-  .bcn-apanel__id:hover { color: var(--color-primary-hover); }
+  .bcn-apanel__id:hover { color: var(--color-background-brand-hover); }
 
-  /* Dense data row: .type-body-small (14px), darkened rather than grayed out. */
+  /* Dense data row: .typography-body-sm (14px), darkened rather than grayed out. */
   .bcn-apanel__category,
   .bcn-apanel__area {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-  .bcn-apanel__category { color: var(--color-text-primary); }
-  .bcn-apanel__area { color: var(--color-text-secondary); }
+  .bcn-apanel__category { color: var(--color-content-default); }
+  .bcn-apanel__area { color: var(--color-content-default-secondary); }
 
   /* Narrow: the row wraps to id + chip on one line, the rest beneath. */
   @media (max-width: 40rem) {

src/components/bcn/BcnBottomDrawer.astro

@@ -26,7 +26,7 @@
 // <esa-side-dialog position="bottom">. Until then bcn-bottom-drawer is the reusable home,
 // and it mirrors the lego's committed mechanics and token contract verbatim so the swap is
 // a rename. The close control IS esa-icon-button; the shell chrome is the only owned CSS.
-import EsaIconButton from '@esa/ecology/esa-icon-button.astro';
+import EsaIconButton from '@esa/ecology/esa-button.astro';
 
 interface Props {
   /** Accessible name for the dialog. Rendered as the fallback heading when no header slot. */
@@ -53,11 +53,11 @@ const hasFooter = Astro.slots.has('footer');
   >
     <header class="bcn-bottom-drawer__head">
       <div class="bcn-bottom-drawer__headslot">
-        {hasHeader ? <slot name="header" /> : <h2 class="type-card-title">{heading}</h2>}
+        {hasHeader ? <slot name="header" /> : <h2 class="typography-title">{heading}</h2>}
       </div>
       {showCloseButton && (
         <span class="bcn-bottom-drawer__close" data-drawer-close>
-          <EsaIconButton icon="x" label="Close" size="md" />
+          <EsaIconButton variant="chrome" iconOnly icon="x" label="Close" size="md" />
         </span>
       )}
     </header>
@@ -93,7 +93,7 @@ const hasFooter = Astro.slots.has('footer');
   .bcn-bottom-drawer__backdrop {
     position: fixed;
     inset: 0;
-    background: var(--color-backdrop, rgba(0, 0, 0, 0.5));
+    background: var(--color-background-overlay-backdrop, rgba(0, 0, 0, 0.5));
     -webkit-backdrop-filter: blur(2px);
     backdrop-filter: blur(2px);
     z-index: var(--_z);
@@ -109,7 +109,7 @@ const hasFooter = Astro.slots.has('footer');
     height: var(--_height);
     display: flex;
     flex-direction: column;
-    background: var(--color-surface);
+    background: var(--color-background-elevation-raised);
     /* Rises from the bottom edge — only the top corners round. */
     border-radius: var(--radius-300) var(--radius-300) 0 0;
     box-shadow: 0 -12px 48px -12px rgba(0, 0, 0, 0.32);
@@ -143,15 +143,15 @@ const hasFooter = Astro.slots.has('footer');
     justify-content: space-between;
     gap: var(--spacing-400);
     padding: var(--spacing-400) var(--spacing-500);
-    border-bottom: 1px solid var(--color-border);
+    border-bottom: 1px solid var(--color-border-default);
   }
   .bcn-bottom-drawer__headslot {
     flex: 1;
     min-width: 0;
   }
   .bcn-bottom-drawer__close {
     flex: none;
-    color: var(--color-text-secondary);
+    color: var(--color-content-default-secondary);
   }
 
   .bcn-bottom-drawer__body {
@@ -164,8 +164,8 @@ const hasFooter = Astro.slots.has('footer');
   .bcn-bottom-drawer__foot {
     flex: none;
     padding: var(--spacing-300) var(--spacing-500);
-    border-top: 1px solid var(--color-border);
-    background: var(--color-surface);
+    border-top: 1px solid var(--color-border-default);
+    background: var(--color-background-elevation-raised);
   }
 
   @keyframes bcn-bd-fade {

src/components/bcn/BcnBoundaryDrawMap.astro

@@ -188,7 +188,7 @@ const mapLabel = `${title} — draw or edit the site outline`;
   const rootStyle = () => getComputedStyle(document.documentElement);
 
   /**
-   * Leaflet paths take LITERAL colors, so a `var(--color-primary)` has to be resolved
+   * Leaflet paths take LITERAL colors, so a `var(--color-background-brand)` has to be resolved
    * first. Recurses because a semantic token may alias another var(), and honors an
    * inline var() fallback. Lifted verbatim from BcnFootprintMap / BcnObservationMap —
    * the third map to need it, and the reason it reads the same in all three.
@@ -328,7 +328,7 @@ const mapLabel = `${title} — draw or edit the site outline`;
     if (!mapEl) return;
 
     const seedRing = readSeed(prefix);
-    const drawColor = resolveColor('var(--color-primary)');
+    const drawColor = resolveColor('var(--color-background-brand)');
     const shapeOptions: L.PolylineOptions = {
       color: drawColor,
       weight: 2,
@@ -558,15 +558,15 @@ const mapLabel = `${title} — draw or edit the site outline`;
   .bcn-bmap__surface {
     width: 100%;
     border-radius: var(--radius-200);
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-border-default);
     overflow: hidden;
-    background: var(--color-surface-sunken);
+    background: var(--color-background-elevation-sunken);
   }
 
   /* Leaflet injects .leaflet-container itself, so it is outside Astro's scope. */
   .bcn-bmap__surface :global(.leaflet-container) {
-    font-family: var(--font-sans, inherit);
-    background: var(--color-surface-sunken);
+    font-family: var(--typography-font-family-sans, inherit);
+    background: var(--color-background-elevation-sunken);
   }
   /* An editable map offers a crosshair while a draw handler is armed — Leaflet.draw
      sets this class on the container, and its own default is a dotted cursor URL. */
@@ -578,26 +578,26 @@ const mapLabel = `${title} — draw or edit the site outline`;
      no component scope can reach it. Bring it to the house control language: the 4px
      control radius, semantic surface and border. Glyphs stay the plugin's sprite. */
   .bcn-bmap__surface :global(.leaflet-draw-toolbar a) {
-    background-color: var(--color-surface);
-    border-bottom-color: var(--color-border);
+    background-color: var(--color-background-elevation-raised);
+    border-bottom-color: var(--color-border-default);
   }
   .bcn-bmap__surface :global(.leaflet-draw-toolbar a:hover) {
-    background-color: var(--color-surface-sunken);
+    background-color: var(--color-background-elevation-sunken);
   }
   .bcn-bmap__surface :global(.leaflet-bar) {
     border-radius: var(--radius-100);
-    border-color: var(--color-border);
+    border-color: var(--color-border-default);
   }
   .bcn-bmap__surface :global(.leaflet-draw-actions a) {
-    background-color: var(--color-text-primary);
+    background-color: var(--color-content-default);
   }
 
   /* Guidance under the control it explains — meta rung, the 13px floor the sibling
      maps' provenance line already sets. */
   .bcn-bmap__hint {
     margin: 0;
-    font-size: var(--type-size-150);
-    color: var(--color-text-secondary);
+    font-size: var(--font-size-150);
+    color: var(--color-content-default-secondary);
     max-width: 68ch;
   }
 

src/components/bcn/BcnCaDotMap.astro

@@ -106,12 +106,12 @@ const mapProjects = DOT_MAP_PROJECTS.map((p) => ({
     box-shadow: 0 0 6px currentColor;
   }
   .bcn-dot-map__name {
-    font-size: var(--type-size-150);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-150);
+    font-weight: var(--typography-font-weight-semibold);
     color: #ffffff;
   }
   .bcn-dot-map__tagline {
-    font-size: var(--type-size-150);
+    font-size: var(--font-size-150);
     font-weight: 300;
     color: rgba(255, 255, 255, 0.6);
     line-height: var(--line-height-normal, 1.5);

src/components/bcn/BcnChallengeGrid.astro

@@ -39,34 +39,34 @@ import { CHALLENGES, MARKETING_ICON_PATHS } from '../../data/homepage';
     align-items: flex-start;
     gap: var(--spacing-400);
     padding: var(--spacing-500);
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
+    background: var(--color-background-elevation-raised);
+    border: 1px solid var(--color-border-default);
     border-radius: var(--radius-200);
     transition: box-shadow 200ms ease;
   }
   .bcn-challenges__card:hover {
-    box-shadow: var(--shadow-200, 0 0 0.75rem rgba(0, 0, 0, 0.1));
+    box-shadow: var(--elevation-3, 0 0 0.75rem rgba(0, 0, 0, 0.1));
   }
 
   .bcn-challenges__icon {
     display: inline-flex;
-    color: var(--color-primary);
+    color: var(--color-background-brand);
     flex-shrink: 0;
     margin-block-start: 2px;
   }
 
   .bcn-challenges__q {
     margin: 0 0 var(--spacing-200);
-    font-family: var(--font-decorative, var(--font-sans));
-    font-size: var(--type-size-300);
-    font-weight: var(--font-weight-semibold);
+    font-family: var(--font-decorative, var(--typography-font-family-sans));
+    font-size: var(--font-size-300);
+    font-weight: var(--typography-font-weight-semibold);
     line-height: var(--line-height-tight, 1.25);
-    color: var(--color-text-primary);
+    color: var(--color-content-default);
   }
   .bcn-challenges__desc {
     margin: 0;
-    font-size: var(--type-size-150);
-    color: var(--color-text-secondary);
+    font-size: var(--font-size-150);
+    color: var(--color-content-default-secondary);
     line-height: var(--line-height-relaxed, 1.75);
   }
 

src/components/bcn/BcnChangeLog.astro

@@ -52,16 +52,16 @@ const { days } = Astro.props;
 <style>
   .bcn-change-log { list-style: none; margin: 0; padding: 0; }
   /* The left border is the timeline SPINE (a rail), not a status indicator. */
-  .bcn-change-log__day { position: relative; margin-left: 5px; padding: 0 0 var(--spacing-400) var(--spacing-500); border-left: 2px solid var(--color-border); }
+  .bcn-change-log__day { position: relative; margin-left: 5px; padding: 0 0 var(--spacing-400) var(--spacing-500); border-left: 2px solid var(--color-border-default); }
   .bcn-change-log__day:last-child { border-left-color: transparent; padding-bottom: 0; }
-  .bcn-change-log__day::before { content: ''; position: absolute; left: -6px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-surface); border: 2px solid var(--color-secondary); }
-  .bcn-change-log__date { margin: 0 0 var(--spacing-200); font-size: 0.8125rem; font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
+  .bcn-change-log__day::before { content: ''; position: absolute; left: -6px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-background-elevation-raised); border: 2px solid var(--color-background-brand-muted); }
+  .bcn-change-log__date { margin: 0 0 var(--spacing-200); font-size: 0.8125rem; font-weight: var(--typography-font-weight-semibold); color: var(--color-content-default); }
   .bcn-change-log__events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-300); }
   .bcn-change-log__event { display: flex; flex-direction: column; gap: 1px; }
-  .bcn-change-log__text { font-size: 0.875rem; line-height: 1.4; color: var(--color-text-primary); }
+  .bcn-change-log__text { font-size: 0.875rem; line-height: 1.4; color: var(--color-content-default); }
   /* The emphasis is the record the event happened ON — a link when the host has a
      route for it, otherwise plain bold. Same weight either way. */
-  .bcn-change-log__target { color: var(--color-text-link); text-decoration: none; }
+  .bcn-change-log__target { color: var(--color-content-link); text-decoration: none; }
   .bcn-change-log__target:hover { text-decoration: underline; }
-  .bcn-change-log__by { font-size: 0.75rem; color: var(--color-text-tertiary); }
+  .bcn-change-log__by { font-size: 0.75rem; color: var(--color-content-default-tertiary); }
 </style>