efficient-web-builder 6.0.0 → 7.1.1

package/dist/components/storefront-editor.css

@@ -101,7 +101,7 @@
   margin: 0;
   min-width: 0;
   overflow: hidden;
-  font-size: 11px;
+  font-size: var(--text-2xs);
   font-weight: 500;
   color: var(--sf-muted);
   white-space: nowrap;
@@ -138,7 +138,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 14px;
+  font-size: var(--text-sm);
 }
 .sf-x:hover {
   background: var(--sf-hover);
@@ -222,7 +222,7 @@
    round said it plainly — 「右边那一行不能先删」 — get the order backwards and a
    merchant loses a route.
    `.sf-plus` is untouched; both of its rules are scoped to other buttons
-   (`.sf-add-card .sf-plus`) and `PagesPanel` / `AddChildRow` still render it. */
+   (`.sf-add-card .sf-plus`) and `AddChildRow` still renders it. */
 
 /* ── "Add section" seam between two tree rows ──────────────────────────────
    A slim hover target sitting in the gap between rows; on hover (or keyboard
@@ -268,7 +268,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 14px;
+  font-size: var(--text-sm);
   line-height: 1;
   box-shadow: 0 0 0 2px var(--sf-panel);
   opacity: 0;
@@ -356,7 +356,7 @@
   padding: 0;
   border: 0;
   background: none;
-  font: 600 12.5px/1.3 var(--sf-font);
+  font: 600 var(--text-xs)/1.3 var(--sf-font);
   color: var(--sf-text);
   text-align: left;
   cursor: pointer;
@@ -366,7 +366,7 @@
 }
 .sf-addside-sitewide-desc {
   font-weight: 400;
-  font-size: 11.5px;
+  font-size: var(--text-xs);
   color: var(--sf-muted);
 }
 
@@ -385,7 +385,7 @@
 }
 .sf-box-footer-switch-text {
   margin: 0;
-  font-size: 12px;
+  font-size: var(--text-xs);
   line-height: 1.45;
   color: var(--sf-muted);
 }
@@ -502,12 +502,12 @@
   color: var(--sf-on-accent);
   border-radius: var(--radius-lg);
   padding: 8px 14px;
-  font-size: 12.5px;
+  font-size: var(--text-xs);
   font-weight: 600;
   box-shadow: 0 4px 12px var(--sf-accent-shadow);
 }
 .sf-addcard-plus {
-  font-size: 15px;
+  font-size: var(--text-base);
   line-height: 1;
   margin-top: -1px;
 }
@@ -518,12 +518,12 @@
   padding: 0 2px 2px;
 }
 .sf-addcard-name {
-  font-size: 12.5px;
+  font-size: var(--text-xs);
   font-weight: 600;
   color: var(--sf-text);
 }
 .sf-addcard-desc {
-  font-size: 10.5px;
+  font-size: var(--text-2xs);
   line-height: 1.35;
   color: var(--sf-muted);
 }
@@ -548,13 +548,10 @@
   height: 30px;
 }
 .sf-addempty-title {
-  font-size: 14px;
+  font-size: var(--text-sm);
   font-weight: 600;
   color: var(--sf-text);
 }
-.sf-addempty-sub {
-  font-size: 12.5px;
-}
 
 /* ── Center: device-framed preview (wraps Puck.Preview) ──────────────── */
 .sf-frame--tablet,
@@ -925,7 +922,7 @@
      came to hang 6px OUTSIDE the panel at every width under 280 (measured: gap
      -6.0px at 260 and at 220, against 0.0 at the default 320). One name, read
      by the padding, by the narrow override, and by anything that undoes it. */
-  --sf-insp-pad-x: 14px;
+  --sf-insp-pad-x: var(--space-16);
   padding: 4px var(--sf-insp-pad-x) 18px;
 
   /* THE DROPDOWN ARROW, WRITTEN ONCE — card 66399.c.
@@ -946,7 +943,12 @@
   --sf-select-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23c3c3c3'><polygon points='0,0 100,0 50,50'/></svg>");
 }
 
-/* …AND THE 14 IS A DIFFERENT COST AT EACH END OF A PANEL THE MERCHANT DRAGS
+/* 2026-10-13: THE WIDE PADDING IS 16, AND THE LINE 284. 14 was off the
+   spacing scale (Lewis 2026-10-12: 2 / 4 / 8 / 12 / 16 …) and a value off it
+   goes UP. The content width card 66212 protects stays 241px; at 16 each side
+   that needs a 285px panel, so the query below reads `< 284px`. The note that
+   follows is card 66212's own, written at 14.
+   …AND THE 14 IS A DIFFERENT COST AT EACH END OF A PANEL THE MERCHANT DRAGS
    (card 66212). One number, held at every width from 220 to 560:
 
      320px default   308 client (1px seam + 11px scrollbar) − 28 = 280 content
@@ -986,11 +988,11 @@
    and 10 has nothing to spare, and type is paid vertically as well — card 66206
    has just set the row rhythm to 16px, which shrinking type would hand straight
    back. The padding was the horizontal cost, so the padding is what moved. */
-@container (width < 280px) {
+@container (width < 284px) {
   .sf-insp-body {
     /* The TOKEN, not `padding-inline` — so everything that reads the padding
        narrows with it, instead of only the padding itself. */
-    --sf-insp-pad-x: 8px;
+    --sf-insp-pad-x: var(--space-8);
   }
 }
 
@@ -1004,7 +1006,7 @@
   background: var(--sf-field-bg);
   border-radius: var(--sf-field-radius);
   padding: 8px 11px;
-  font-size: 13px;
+  font-size: var(--text-sm);
   color: var(--sf-field-text);
   font-family: var(--sf-font);
 }
@@ -1105,7 +1107,7 @@
   background-position: calc(100% - 12px) calc(50% + 3px);
   border-radius: var(--sf-field-radius);
   padding: 8px 11px;
-  font-size: 13px;
+  font-size: var(--text-sm);
   color: var(--sf-field-text);
   cursor: pointer;
 }
@@ -1177,7 +1179,7 @@
   background: var(--sf-field-bg);
   border-radius: var(--sf-field-radius);
   padding: 8px 11px;
-  font-size: 13px;
+  font-size: var(--text-sm);
   font-family: var(--sf-font);
   color: var(--sf-field-text);
   text-align: left;
@@ -1189,7 +1191,7 @@
   box-shadow: 0 0 0 3px var(--sf-accent-ring);
 }
 .sf-multi-caret {
-  font-size: 10px;
+  font-size: var(--text-2xs);
   color: var(--sf-text-secondary);
   flex: none;
 }
@@ -1277,7 +1279,7 @@
 .sf-secttheme-oncard {
   margin: 0;
   padding: 5px 4px 7px;
-  font-size: 11px;
+  font-size: var(--text-2xs);
   line-height: 1.4;
   color: var(--sf-text-secondary);
 }
@@ -1391,7 +1393,7 @@
   border: 0;
   background: transparent;
   border-radius: max(calc(var(--sf-field-radius) - 2px), 2px);
-  font-size: 13px;
+  font-size: var(--text-sm);
   font-family: var(--sf-font);
   color: var(--sf-field-text);
   text-align: left;
@@ -1433,7 +1435,7 @@
   padding: 6px 9px;
   background: var(--sf-field-bg);
   border-bottom: 1px solid var(--sf-input-border);
-  font-size: 12px;
+  font-size: var(--text-xs);
   font-weight: 600;
   color: var(--sf-field-text);
 }
@@ -1443,7 +1445,7 @@
   border: 0;
   background: transparent;
   color: var(--sf-text-secondary);
-  font-size: 11px;
+  font-size: var(--text-2xs);
   font-family: var(--sf-font);
   cursor: pointer;
 }
@@ -1468,7 +1470,7 @@
   padding: 7px 9px;
   border-top: 1px solid var(--sf-input-border);
   background: var(--sf-accent-ring);
-  font-size: 11px;
+  font-size: var(--text-2xs);
   line-height: 1.4;
   color: var(--sf-text-secondary);
 }
@@ -1541,7 +1543,7 @@
   border: none;
   background: transparent;
   font-family: var(--sf-font);
-  font-size: 13px;
+  font-size: var(--text-sm);
   color: var(--sf-text);
   outline: none;
 }
@@ -1584,23 +1586,26 @@
 .sf-pgroup-label {
   flex: 1;
   text-align: left;
-  font-size: 11px;
+  font-size: var(--text-2xs);
   font-weight: 700;
   letter-spacing: 0.4px;
   text-transform: uppercase;
 }
 .sf-pgroup-count {
   flex: none;
-  font-size: 11px;
+  font-size: var(--text-2xs);
   font-weight: 600;
   color: var(--sf-muted);
   background: var(--sf-track-bg);
   border-radius: 999px;
   padding: 1px 7px;
 }
+/* 4 between rows, the shell Tree's own row gap, so a hovered row next to the
+   selected one is two rounded shapes, never one block (Lewis, 2026-10-14). */
 .sf-pgroup-body {
   display: flex;
   flex-direction: column;
+  gap: var(--space-4);
 }
 /* Page rows reuse .sf-row; anchors (Cart/Checkout) reset link chrome. */
 .sf-prow {
@@ -1609,7 +1614,7 @@
 }
 .sf-page-draft {
   flex: none;
-  font-size: 10px;
+  font-size: var(--text-2xs);
   font-weight: 600;
   color: var(--sf-muted);
   text-transform: uppercase;
@@ -1621,7 +1626,7 @@
 .sf-badge-dynamic,
 .sf-badge-lightbox {
   flex: none;
-  font-size: 9px;
+  font-size: var(--text-3xs);
   font-weight: 700;
   letter-spacing: 0.3px;
   text-transform: uppercase;
@@ -1670,7 +1675,7 @@
 /* "Preview" pill on Cart / Checkout — signals "opens the live page, view-only". */
 .sf-badge-preview {
   flex: none;
-  font-size: 9px;
+  font-size: var(--text-3xs);
   font-weight: 700;
   letter-spacing: 0.3px;
   text-transform: uppercase;
@@ -1679,26 +1684,6 @@
   color: var(--sf-warning);
   background: var(--sf-preview-tint);
 }
-.sf-pages-new {
-  flex: none;
-  margin: 6px 10px 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  padding: 9px;
-  border: 1px dashed var(--sf-line);
-  border-radius: var(--sf-row-radius);
-  background: transparent;
-  color: var(--sf-accent-text);
-  font-family: var(--sf-font);
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-}
-.sf-pages-new:hover {
-  background: var(--sf-hover);
-}
 
 /* ── Layers rows (redesign 2b) ──────────────────────────────────────────
    The Layers tree's rows are editor-shell's `TreeRow` (efficient-easel/tree.css):
@@ -1744,14 +1729,6 @@
   gap: 2px;
 }
 
-/* The relocated heading-outline tool sits muted at the bottom of the tree. */
-.sf-tree-tool {
-  margin-top: 14px;
-  /* The left inset is the tree's 11px column, not `.sf-tree`'s padding — that
-     is 0 on this side now so the bars can bleed. */
-  padding: 10px 0 0 11px;
-}
-
 /* `.sf-field-section` AND `.sf-field-group` WERE HERE, and they are gone on
    purpose (card 66300). They were the panel's two heading tiers — a 12px label
    over a 1.5px rule, and a 10.5px label over a 1px one — and the rules are what
@@ -2011,7 +1988,7 @@
 }
 .sf-field-label {
   display: block;
-  font-size: 12px;
+  font-size: var(--text-xs);
   font-weight: 500;
   color: var(--sf-text-secondary);
   /* WITHIN one setting: its label to its own control. This gap is the only
@@ -2146,7 +2123,7 @@
   background: var(--sf-chip-bg);
   border-radius: var(--sf-field-radius);
   padding: 8px 11px;
-  font-size: 13px;
+  font-size: var(--text-sm);
   color: var(--sf-text-secondary);
   font-family: var(--sf-font);
   cursor: default;
@@ -2270,7 +2247,7 @@
   /* The style's NAME — Highlight / Bold / Quiet. Padded so two of them do not
      read as one word, and never wrapped mid-name. */
   padding: 0 6px;
-  font-size: 11px;
+  font-size: var(--text-2xs);
   line-height: 1;
   white-space: nowrap;
 }
@@ -2419,7 +2396,7 @@
   box-shadow: 0 0 0 2px var(--sf-panel), 0 0 0 4px var(--sf-accent);
 }
 .sf-swatch-hex {
-  font-size: 11px;
+  font-size: var(--text-2xs);
   color: var(--sf-muted);
   font-variant-numeric: tabular-nums;
   margin-left: 2px;
@@ -2454,7 +2431,7 @@
   width: 4.75rem;
 }
 .sf-colour-caption {
-  font-size: 12px;
+  font-size: var(--text-xs);
   color: var(--sf-muted);
   white-space: nowrap;
 }
@@ -2517,7 +2494,7 @@
   border-radius: var(--sf-field-radius);
   background: var(--sf-field-bg);
   color: var(--sf-field-text);
-  font-size: 13px;
+  font-size: var(--text-sm);
   text-align: left;
   cursor: pointer;
 }
@@ -2537,7 +2514,7 @@
    so it reads quieter than everything else on the row. */
 .sf-chooser-meta {
   flex: none;
-  font-size: 10px;
+  font-size: var(--text-2xs);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--sf-disabled);
@@ -2573,7 +2550,7 @@
   border: 0;
   background: none;
   text-align: left;
-  font-size: 13px;
+  font-size: var(--text-sm);
   color: var(--sf-text-secondary);
   cursor: pointer;
 }
@@ -2619,7 +2596,7 @@
   border-radius: var(--sf-field-radius);
   background: var(--sf-field-bg);
   color: var(--sf-text-secondary);
-  font-size: 12px;
+  font-size: var(--text-xs);
   cursor: pointer;
 }
 .sf-rung:hover:not(.is-active) {
@@ -2689,12 +2666,12 @@
 /* The small and large A flanking a size slider. */
 .sf-scale-a {
   flex: none;
-  font-size: 11px;
+  font-size: var(--text-2xs);
   line-height: 1;
   color: var(--sf-disabled);
 }
 .sf-scale-a--lg {
-  font-size: 15px;
+  font-size: var(--text-base);
   color: var(--sf-muted);
 }
 /* The "Auto" button that clears an optional number back to the built-in. */
@@ -2703,7 +2680,7 @@
   border: 1px solid var(--sf-input-border);
   border-radius: var(--sf-field-radius);
   background: var(--sf-field-bg);
-  font-size: 11px;
+  font-size: var(--text-2xs);
   color: var(--sf-text-secondary);
   cursor: pointer;
 }
@@ -2793,7 +2770,7 @@
    between tabs does not have to learn how to read a second kind of row. */
 .sf-style-name {
   flex: none;
-  font-size: 11px;
+  font-size: var(--text-2xs);
   font-weight: 600;
   color: var(--sf-muted);
 }
@@ -2871,7 +2848,7 @@
   border-radius: var(--sf-field-radius);
   background: var(--sf-field-bg);
   color: var(--sf-text);
-  font-size: 12px;
+  font-size: var(--text-xs);
   cursor: pointer;
 }
 /* A rung showing a LETTERFORM rather than a word -- the B and the I. It is the
@@ -2879,7 +2856,7 @@
    glyph and it keeps its accessible name in `aria-label`. */
 .sf-rung--glyph {
   flex: 0 0 34px;
-  font-size: 13px;
+  font-size: var(--text-sm);
   line-height: 18px;
   text-align: center;
 }
@@ -2989,7 +2966,7 @@
   line-height: 1;
 }
 .sf-theme-headline {
-  font-size: 14px;
+  font-size: var(--text-sm);
   font-weight: 750;
   letter-spacing: -0.01em;
   line-height: 1.1;
@@ -3044,7 +3021,7 @@
 }
 .sf-theme-card.is-selected .sf-theme-foot { color: var(--sf-accent-text); }
 .sf-theme-name {
-  font-size: 11px;
+  font-size: var(--text-2xs);
   font-weight: 700;
   min-width: 0;
   overflow: hidden;
@@ -3058,7 +3035,7 @@
 .sf-theme-warn {
   flex: none;
   margin-left: auto;
-  font-size: 10px;
+  font-size: var(--text-2xs);
   font-weight: 700;
   color: var(--status-warning-soft-ink);
   white-space: nowrap;
@@ -3094,7 +3071,7 @@
   border: 0;
   background: none;
   font: inherit;
-  font-size: 12px;
+  font-size: var(--text-xs);
   font-weight: 600;
   color: var(--sf-accent-text);
   padding: 4px 0;
@@ -3144,14 +3121,14 @@
    INSIDE one setting, and reading as a quieter copy of the row above them is
    what said they were the same thing. */
 .sf-colour-mode {
-  font-size: 12px;
+  font-size: var(--text-xs);
   font-weight: 500;
   color: var(--sf-text-secondary);
 }
 .sf-colour-mode small {
   display: block;
   margin-top: 1px;
-  font-size: 11px;
+  font-size: var(--text-2xs);
   font-weight: 400;
   color: var(--sf-muted);
 }
@@ -3162,20 +3139,12 @@
   border: 1px solid var(--sf-divider);
   border-radius: var(--sf-row-radius);
 }
-.sf-readability-head {
-  margin-bottom: 7px;
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--sf-muted);
-}
 .sf-readability-row {
   display: flex;
   align-items: center;
   gap: 9px;
   padding: 4px 0;
-  font-size: 12px;
+  font-size: var(--text-xs);
 }
 .sf-readability-who {
   flex: 1;
@@ -3213,7 +3182,7 @@
 
 .sf-readability-advice {
   margin-top: 7px;
-  font-size: 11px;
+  font-size: var(--text-2xs);
   line-height: 1.6;
   color: var(--sf-muted);
 }
@@ -3233,7 +3202,7 @@
   border-radius: var(--sf-field-radius);
   background: var(--sf-field-bg);
   color: var(--sf-btn-text);
-  font-size: 11px;
+  font-size: var(--text-2xs);
   font-variant-numeric: tabular-nums;
   cursor: pointer;
 }
@@ -3348,12 +3317,12 @@
   min-width: 0;
 }
 .sf-preview-pin-label {
-  font-size: 13px;
+  font-size: var(--text-sm);
   font-weight: 500;
   color: var(--sf-text);
 }
 .sf-preview-pin-hint {
-  font-size: 11px;
+  font-size: var(--text-2xs);
   color: var(--sf-muted);
 }
 
@@ -3369,7 +3338,7 @@
 .sf-colstep-value {
   min-width: 14px;
   text-align: center;
-  font-size: 13px;
+  font-size: var(--text-sm);
   font-weight: 500;
   color: var(--sf-text);
 }
@@ -3433,7 +3402,7 @@
   background: transparent;
   border-radius: var(--radius-md);
   padding: 6px 8px;
-  font-size: 12px;
+  font-size: var(--text-xs);
   font-weight: 500;
   color: var(--sf-icon);
   cursor: pointer;
@@ -3471,11 +3440,12 @@
    SCOPED TO THE NARROW PANEL, on the container card 66212 already put on
    `.sf-panel` — the same rule, one level down: that card paid the horizontal
    cost out of the body's padding, and this pays the rest out of the strip's.
-   Above 280px nothing changes, so all 23 `segmented()` call sites and the four
+   Above 284px (280 until the body's padding went 14 → 16 on 2026-10-13: one
+   edge, one number) nothing changes, so all 23 `segmented()` call sites and the four
    panels that draw their own label rows are byte-identical at every width where
    they already fit. A `.sf-seg2` that is not inside a `.sf-panel` matches no
    container and is untouched by construction. */
-@container (width < 280px) {
+@container (width < 284px) {
   .sf-seg2 button {
     padding-inline: 6px;
   }
@@ -3597,7 +3567,7 @@ input.sf-list-marking {
 }
 .sf-blogsource-status {
   margin: 0;
-  font-size: 12px;
+  font-size: var(--text-xs);
   color: var(--sf-text-secondary);
 }
 .sf-blogsource-status[data-state="error"] {
@@ -3643,7 +3613,7 @@ input.sf-list-marking {
 }
 .sf-formsummary-caption {
   margin-bottom: 4px;
-  font-size: 11px;
+  font-size: var(--text-2xs);
   font-weight: 600;
   letter-spacing: 0.02em;
   color: var(--sf-text-secondary);
@@ -3651,13 +3621,13 @@ input.sf-list-marking {
 .sf-formsummary-fields {
   margin: 0;
   padding-left: 18px;
-  font-size: 12px;
+  font-size: var(--text-xs);
   line-height: 1.55;
   color: var(--sf-text-secondary);
 }
 .sf-formsummary-warn {
   margin: 0;
-  font-size: 11.5px;
+  font-size: var(--text-xs);
   line-height: 1.45;
   color: var(--sf-danger);
 }
@@ -3675,7 +3645,7 @@ input.sf-list-marking {
    visible instead of nothing happening. */
 .sf-image-status {
   margin-top: 6px;
-  font-size: 11px;
+  font-size: var(--text-2xs);
   color: var(--sf-muted);
 }
 .sf-image-status--error {
@@ -3701,7 +3671,7 @@ ul.sf-image-status {
   border: 1.5px dashed var(--sf-input-border);
   border-radius: var(--radius-lg);
   padding: 12px 14px;
-  font-size: 12px;
+  font-size: var(--text-xs);
   line-height: 1.5;
   color: var(--sf-muted);
   background-image: repeating-linear-gradient(45deg, var(--sf-hatch) 0 1px, transparent 1px 12px);
@@ -3757,7 +3727,7 @@ ul.sf-image-status {
    same six classes wearing one name. */
 .sf-note {
   padding: 14px 16px;
-  font-size: 13px;
+  font-size: var(--text-sm);
   line-height: 1.5;
   color: var(--sf-muted);
 }
@@ -3777,7 +3747,7 @@ ul.sf-image-status {
    sentence above it, so it reads as a footnote and not as an instruction. */
 .sf-note-detail {
   margin-top: 10px;
-  font-size: 11px;
+  font-size: var(--text-2xs);
   color: var(--sf-muted);
   opacity: 0.75;
   word-break: break-all;
@@ -3845,7 +3815,7 @@ ul.sf-image-status {
    heading for the name below rather than as another name. */
 .sf-part-style-caption {
   margin-bottom: 2px;
-  font-size: 11px;
+  font-size: var(--text-2xs);
   font-weight: 600;
   letter-spacing: 0.06em;
   text-transform: uppercase;
@@ -3853,13 +3823,13 @@ ul.sf-image-status {
 }
 .sf-part-style-count {
   margin-bottom: 3px;
-  font-size: 11px;
+  font-size: var(--text-2xs);
   font-weight: 600;
   color: var(--sf-muted);
 }
 .sf-part-style-name {
   min-width: 0;
-  font-size: 20px;
+  font-size: var(--text-xl);
   line-height: 1.15;
   letter-spacing: -0.01em;
   color: var(--sf-text-strong);
@@ -3908,7 +3878,7 @@ ul.sf-image-status {
   flex: none;
   text-align: center;
   color: var(--sf-muted);
-  font-size: 14px;
+  font-size: var(--text-sm);
   line-height: 1;
 }
 .sf-part-style-trigger[aria-expanded="false"] .sf-part-style-sign::before {
@@ -3942,7 +3912,7 @@ ul.sf-image-status {
   background: none;
   text-align: left;
   /* E6 — a field label is never smaller than 12px, and an option is a label. */
-  font-size: 13px;
+  font-size: var(--text-sm);
   color: var(--sf-field-text);
   border-radius: max(calc(var(--sf-field-radius) - 2px), 2px);
   cursor: pointer;
@@ -3986,13 +3956,13 @@ ul.sf-image-status {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 11px;
+  font-size: var(--text-2xs);
   font-weight: 400;
   color: var(--es-muted);
 }
 .sf-part-style-meta {
   margin-top: 1px;
-  font-size: 11px;
+  font-size: var(--text-2xs);
   color: var(--sf-muted);
   font-variant-numeric: tabular-nums;
 }
@@ -4019,7 +3989,7 @@ ul.sf-image-status {
    it read at 13px and wrapped, taking "Edit style" over two lines with it. So
    it keeps its look exactly and takes an honest name. */
 .sf-part-style-state {
-  font-size: 11.5px;
+  font-size: var(--text-xs);
   color: var(--sf-text-secondary);
 }
 /* The override count. A chip rather than plain text because it is a NUMBER a
@@ -4031,7 +4001,7 @@ ul.sf-image-status {
   padding: 2px 9px;
   background: var(--sf-accent-tint);
   color: var(--sf-accent-text);
-  font-size: 10.5px;
+  font-size: var(--text-2xs);
   font-weight: 700;
   font-variant-numeric: tabular-nums;
 }
@@ -4043,7 +4013,7 @@ ul.sf-image-status {
   background: none;
   padding: 0;
   font: inherit;
-  font-size: 12px;
+  font-size: var(--text-xs);
   font-weight: 500;
   color: var(--sf-accent-text);
   cursor: pointer;
@@ -4135,13 +4105,13 @@ ul.sf-image-status {
   gap: 8px;
 }
 .sf-part-ink-label {
-  font-size: 11px;
+  font-size: var(--text-2xs);
   font-weight: 600;
   color: var(--sf-muted);
 }
 .sf-part-ink-read {
   margin-left: auto;
-  font-size: 12px;
+  font-size: var(--text-xs);
   color: var(--sf-text-secondary);
   font-variant-numeric: tabular-nums;
 }
@@ -4225,7 +4195,7 @@ ul.sf-image-status {
    reads like the buckets above it. A real <h3>, so it joins the panel outline. */
 .sf-entries-head {
   margin: 14px 0 4px;
-  font-size: 11px;
+  font-size: var(--text-2xs);
   font-weight: 600;
   letter-spacing: 0.06em;
   text-transform: uppercase;
@@ -4305,7 +4275,7 @@ ul.sf-image-status {
   background: var(--sf-field-bg);
   border-radius: 999px;
   padding: 4px 11px;
-  font-size: 11.5px;
+  font-size: var(--text-xs);
   font-weight: 600;
   color: var(--sf-icon);
   cursor: pointer;
@@ -4428,7 +4398,7 @@ ul.sf-image-status {
 
 /* How many the filter left. Without it an empty-looking strip is a mystery. */
 .sf-gallery-count {
-  font-size: 10.5px;
+  font-size: var(--text-2xs);
   color: var(--sf-disabled);
   margin-top: 7px;
 }