@things-factory/figure-ui 10.1.172 → 10.1.175

package/client/modeller/editor-styles.ts

@@ -10,7 +10,10 @@ export const EditorStyles = css`
     height: 100%;
     /* The editor folds by the width it is given, not the window's (UX ruling, 2026-09-24). */
     container-type: inline-size;
-    font: 13px sans-serif;
+    /* The app's one face (its typography theme's --theme-font) at the body size: a bare sans-serif here put a second
+       face under everything the editor draws, beside the parts list and the shell in the app's own (2026-10-16). */
+    font-family: var(--theme-font, ui-sans-serif, system-ui, sans-serif);
+    font-size: var(--ui-t-body, 13px);
     color: var(--md-sys-color-on-surface);
   }
   /* The bar over the work is ox-canvas-bar (ADR-0060 decision 8): the folds at its edges, undo, redo and
@@ -177,10 +180,15 @@ export const EditorStyles = css`
     color: var(--md-sys-color-on-surface-variant);
   }
   /* The side: tabs over one panel at a time, each using the whole height. */
+  /*
+    The side's words at the panel's size (side-panel-styles: titles body, the rest small). The editor's host is at body
+    for the bar, and the fields the editor drew itself -- the part's name -- stood a step larger than every other field.
+  */
   aside {
     display: flex;
     flex-direction: column;
     min-height: 0;
+    font-size: var(--ui-t-small, 11.5px);
     background: var(--md-sys-color-surface-container-lowest);
   }
   div[tabs] {
@@ -220,7 +228,7 @@ export const EditorStyles = css`
   button[tab] span[tab-label] {
     max-width: 100%;
     overflow: hidden;
-    font-size: 0.66rem;
+    font-size: var(--ui-t-micro, 11px);
     line-height: 1.2;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -230,7 +238,7 @@ export const EditorStyles = css`
     top: 3px;
     right: 2px;
     padding: 0 5px;
-    font-size: 0.62rem;
+    font-size: var(--ui-t-micro, 11px);
     font-weight: 700;
     line-height: 1.5;
     color: var(--md-sys-color-on-primary-container);

package/client/modeller/figure-capability-panel.ts

@@ -61,7 +61,7 @@ export class FigureCapabilityPanel extends localize(i18next)(LitElement) {
       border-color: var(--md-sys-color-primary);
     }
     code {
-      font-size: 0.9em;
+      font-size: var(--ui-t-small, 11.5px);
       color: var(--md-sys-color-on-surface-variant);
     }
   `]

package/client/modeller/figure-controls.ts

@@ -40,13 +40,13 @@ export class FigureControls extends localize(i18next)(LitElement) {
     }
     div[control] > span[name] em {
       font-style: normal;
-      font-size: 0.64rem;
+      font-size: var(--ui-t-micro, 11px);
       color: var(--md-sys-color-on-surface-variant);
     }
     div[control] input[type='number'] {
       min-height: 24px;
       padding: 2px 5px;
-      font-family: var(--mono-font, monospace);
+      font-family: var(--ui-mono, ui-monospace, monospace);
       text-align: right;
     }
     svg[dial] {

package/client/modeller/figure-data-panel.ts

@@ -139,7 +139,7 @@ export class FigureDataPanel extends localize(i18next)(LitElement) {
         width: 100%;
         min-height: 96px;
         box-sizing: border-box;
-        font-family: var(--ui-font-mono, monospace);
+        font-family: var(--ui-mono, ui-monospace, monospace);
         font-size: inherit;
       }
       ul[result] {

package/client/modeller/figure-first-save.ts

@@ -36,7 +36,7 @@ export class FigureFirstSave extends LitElement {
         width: 100%;
       }
       input[type-field] {
-        font-family: var(--mono-font, monospace);
+        font-family: var(--ui-mono, ui-monospace, monospace);
       }
     `
   ]

package/client/modeller/figure-history-panel.ts

@@ -56,7 +56,7 @@ export class FigureHistoryPanel extends localize(i18next)(LitElement) {
       background-color: var(--md-sys-color-surface-container-lowest);
       color: var(--md-sys-color-on-surface);
       font: var(--label-font, inherit);
-      font-size: 0.76rem;
+      font-size: var(--ui-t-small, 11.5px);
     }
 
     :host([off]) {
@@ -88,7 +88,7 @@ export class FigureHistoryPanel extends localize(i18next)(LitElement) {
     span[state] {
       padding: 2px 8px;
       border-radius: 10px;
-      font-size: 0.7rem;
+      font-size: var(--ui-t-micro, 11px);
       font-weight: 700;
       color: var(--md-sys-color-on-secondary-container);
       background-color: var(--md-sys-color-secondary-container);
@@ -100,14 +100,14 @@ export class FigureHistoryPanel extends localize(i18next)(LitElement) {
     }
 
     span[ver] {
-      font-family: var(--mono-font, monospace);
+      font-family: var(--ui-mono, ui-monospace, monospace);
       color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
     }
 
     input,
     button {
       font: var(--input-field-font, inherit);
-      font-size: 0.76rem;
+      font-size: var(--ui-t-small, 11.5px);
     }
 
     input[note] {
@@ -140,14 +140,14 @@ export class FigureHistoryPanel extends localize(i18next)(LitElement) {
     /* 왜 못 누르는지 — 눌러 보고 알게 하지 않는다 */
     p[why] {
       margin: 6px 0 0 0;
-      font-size: 0.7rem;
+      font-size: var(--ui-t-micro, 11px);
       line-height: 1.5;
       color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
     }
 
     p[failed] {
       margin: 6px 0 0 0;
-      font-size: 0.7rem;
+      font-size: var(--ui-t-micro, 11px);
       line-height: 1.5;
       color: var(--md-sys-color-error);
     }
@@ -172,13 +172,13 @@ export class FigureHistoryPanel extends localize(i18next)(LitElement) {
     }
 
     li span[no] {
-      font-family: var(--mono-font, monospace);
+      font-family: var(--ui-mono, ui-monospace, monospace);
       font-weight: 700;
     }
 
     li span[when] {
       grid-column: 2 / 4;
-      font-size: 0.7rem;
+      font-size: var(--ui-t-micro, 11px);
       color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
     }
 

package/client/modeller/figure-parts.ts

@@ -84,7 +84,7 @@ export class FigureParts extends localize(i18next)(LitElement) {
         /* The divider beside it is the editor's frame's (ox-three-pane). */
         color: var(--md-sys-color-on-surface);
         font: var(--label-font, inherit);
-        font-size: 0.76rem;
+        font-size: var(--ui-t-small, 11.5px);
         /* Folds by its own width: the editor gives this column 140 px when it has two columns (UX, 2026-09-24). */
         container-type: inline-size;
       }
@@ -148,7 +148,7 @@ export class FigureParts extends localize(i18next)(LitElement) {
         margin: 0 0 6px;
         padding: 4px 6px;
         font: inherit;
-        font-size: 0.68rem;
+        font-size: var(--ui-t-micro, 11px);
         line-height: 1.5;
         text-align: left;
         color: var(--md-sys-color-on-surface-variant);
@@ -190,7 +190,7 @@ export class FigureParts extends localize(i18next)(LitElement) {
       }
       p[full] {
         margin: 4px 0 0;
-        font-size: 0.68rem;
+        font-size: var(--ui-t-micro, 11px);
         color: var(--md-sys-color-error);
       }
       div[level] {
@@ -199,14 +199,16 @@ export class FigureParts extends localize(i18next)(LitElement) {
         align-items: center;
         gap: 6px;
         margin: 0 0 6px;
-        font-size: 0.68rem;
+        font-size: var(--ui-t-micro, 11px);
         color: var(--md-sys-color-on-surface-variant);
       }
+      /* One height with the side's fields (30px, side-panel-styles): it stood at 21px, the only small box on the screen. */
       div[level] select {
         min-width: 0;
+        min-height: 30px;
         padding: 2px 4px;
         font: inherit;
-        font-size: 0.7rem;
+        font-size: var(--ui-t-small, 11.5px);
         color: var(--md-sys-color-on-surface);
         background: var(--md-sys-color-surface-container-lowest);
         border: 1px solid var(--md-sys-color-outline-variant);
@@ -216,7 +218,7 @@ export class FigureParts extends localize(i18next)(LitElement) {
         color: var(--md-sys-color-on-surface-variant);
       }
       span[room] {
-        font-size: 0.7rem;
+        font-size: var(--ui-t-micro, 11px);
         font-weight: 400;
         letter-spacing: 0;
         text-transform: none;
@@ -235,7 +237,7 @@ export class FigureParts extends localize(i18next)(LitElement) {
         min-width: 0;
         padding: 5px 1px 4px;
         font: var(--label-font, inherit);
-        font-size: 0.6rem;
+        font-size: var(--ui-t-micro, 11px);
         line-height: 1.2;
         text-align: center;
         overflow-wrap: anywhere;
@@ -245,13 +247,25 @@ export class FigureParts extends localize(i18next)(LitElement) {
         border-radius: 6px;
         cursor: pointer;
       }
+      /*
+        A file brought in is not a starting shape: its own row under the nine, its words on one line. As a tenth tile its
+        two-word name broke onto two lines and stood it taller than the rest (2026-10-16).
+      */
+      button[shape][import] {
+        grid-column: 1 / -1;
+        flex-direction: row;
+        justify-content: center;
+        gap: 6px;
+        min-height: 30px;
+        padding: 0 8px;
+      }
       button[recipe-catalog] {
         display: inline-flex;
         align-items: center;
         gap: 4px;
         padding: 4px 10px;
         font: inherit;
-        font-size: 0.75rem;
+        font-size: var(--ui-t-small, 11.5px);
         color: var(--md-sys-color-on-surface);
         background: none;
         border: 1px solid var(--md-sys-color-outline-variant);
@@ -293,6 +307,17 @@ export class FigureParts extends localize(i18next)(LitElement) {
         color: var(--md-sys-color-on-primary-container);
         background-color: var(--md-sys-color-primary-container);
       }
+      /*
+        Icons by role, three sizes on the whole screen (2026-10-16; there were six): 20 for the bar, the tabs and the
+        model's head, 18 for a palette tile, 16 beside words and on a row.
+      */
+      button[model-root] md-icon {
+        --md-icon-size: 20px;
+      }
+      /* Beside its words, as every icon on a button with words is; without a size it stood at md-icon's own 24. */
+      button[recipe-catalog] md-icon {
+        --md-icon-size: 16px;
+      }
       li md-icon {
         --md-icon-size: 16px;
         flex: none;
@@ -325,7 +350,7 @@ export class FigureParts extends localize(i18next)(LitElement) {
         color: var(--md-sys-color-tertiary);
       }
       button[eye] md-icon {
-        --md-icon-size: 15px;
+        --md-icon-size: 16px;
         color: inherit;
       }
       li[off] span[label],
@@ -343,11 +368,11 @@ export class FigureParts extends localize(i18next)(LitElement) {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
-        font-size: 0.78rem;
+        font-size: var(--ui-t-body, 13px);
       }
       span[label] small {
         margin-left: 4px;
-        font-size: 0.66rem;
+        font-size: var(--ui-t-micro, 11px);
         color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
       }
       div[ops] {
@@ -374,7 +399,7 @@ export class FigureParts extends localize(i18next)(LitElement) {
         cursor: default;
       }
       div[ops] md-icon {
-        --md-icon-size: 15px;
+        --md-icon-size: 16px;
         color: inherit;
       }
       /*
@@ -392,7 +417,7 @@ export class FigureParts extends localize(i18next)(LitElement) {
       }
       p[quiet] {
         margin: 0;
-        font-size: 0.76rem;
+        font-size: var(--ui-t-small, 11.5px);
         line-height: 1.6;
         color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
       }
@@ -441,6 +466,7 @@ export class FigureParts extends localize(i18next)(LitElement) {
           )}
           <button
             shape
+            import
             ?disabled=${this.locked || full}
             title=${full ? i18next.t('figure.text.part-limit-reached') : i18next.t('figure.text.import-mesh-hint')}
             @click=${() => this.renderRoot.querySelector<HTMLInputElement>('input[mesh-file]')?.click()}

package/client/modeller/figure-preview.ts

@@ -51,7 +51,7 @@ export class FigurePreview extends localize(i18next)(LitElement) {
       min-height: 0;
       overflow: hidden;
       background-color: ${unsafeCSS(WORKBENCH)};
-      font-size: 0.76rem;
+      font-size: var(--ui-t-small, 11.5px);
     }
     div[stage] {
       position: absolute;
@@ -91,7 +91,7 @@ export class FigurePreview extends localize(i18next)(LitElement) {
       color: rgba(255, 255, 255, 0.9);
       background-color: rgba(28, 28, 30, 0.6);
       border-radius: 6px;
-      font-size: 0.72rem;
+      font-size: var(--ui-t-micro, 11px);
       flex-wrap: wrap;
       max-width: calc(100% - 16px);
     }
@@ -123,7 +123,7 @@ export class FigurePreview extends localize(i18next)(LitElement) {
       color: rgba(255, 255, 255, 0.92);
       background-color: rgba(28, 28, 30, 0.72);
       border-radius: 8px;
-      font-size: 0.72rem;
+      font-size: var(--ui-t-micro, 11px);
     }
     div[sizes] label {
       display: grid;
@@ -158,7 +158,7 @@ export class FigurePreview extends localize(i18next)(LitElement) {
       color: rgba(255, 255, 255, 0.92);
       background-color: rgba(28, 28, 30, 0.72);
       border-radius: 8px;
-      font-size: 0.72rem;
+      font-size: var(--ui-t-micro, 11px);
     }
     div[clips] label {
       display: grid;
@@ -196,7 +196,7 @@ export class FigurePreview extends localize(i18next)(LitElement) {
       align-self: stretch;
       padding: 4px 8px;
       font: inherit;
-      font-size: 0.7rem;
+      font-size: var(--ui-t-micro, 11px);
       color: rgba(255, 255, 255, 0.92);
       background-color: rgba(255, 255, 255, 0.14);
       border: 1px solid rgba(255, 255, 255, 0.22);
@@ -208,7 +208,7 @@ export class FigurePreview extends localize(i18next)(LitElement) {
     }
     div[clips] span[drive] {
       opacity: 0.6;
-      font-size: 0.66rem;
+      font-size: var(--ui-t-micro, 11px);
     }
     div[clips] input {
       width: 96px;

package/client/modeller/figure-recipe-catalog.ts

@@ -29,7 +29,7 @@ export class FigureRecipeCatalog extends localize(i18next)(LitElement) {
         display: grid;
         place-items: center;
         background: color-mix(in srgb, var(--md-sys-color-scrim, #000) 32%, transparent);
-        font-size: 0.82rem;
+        font-size: var(--ui-t-body, 13px);
         color: var(--md-sys-color-on-surface);
       }
       div[panel] {

package/client/modeller/figure-section-editor.ts

@@ -90,7 +90,7 @@ export class FigureSectionEditor extends localize(i18next)(LitElement) {
       font-size: var(--ui-t-body);
     }
     header span {
-      font-size: 0.72rem;
+      font-size: var(--ui-t-micro, 11px);
       color: var(--md-sys-color-on-surface-variant);
     }
     nav[tabs] {
@@ -102,7 +102,7 @@ export class FigureSectionEditor extends localize(i18next)(LitElement) {
     footer button,
     li button {
       font: inherit;
-      font-size: 0.78rem;
+      font-size: var(--ui-t-small, 11.5px);
       min-height: 30px;
       padding: 0 12px;
       border-radius: 15px;
@@ -136,7 +136,7 @@ export class FigureSectionEditor extends localize(i18next)(LitElement) {
       position: absolute;
       left: 8px;
       top: 6px;
-      font-size: 0.68rem;
+      font-size: var(--ui-t-micro, 11px);
       color: var(--md-sys-color-on-surface-variant);
       pointer-events: none;
     }
@@ -222,7 +222,7 @@ export class FigureSectionEditor extends localize(i18next)(LitElement) {
       margin: 8px 0 0;
       padding: 0 0 0 16px;
       color: var(--md-sys-color-error);
-      font-size: 0.76rem;
+      font-size: var(--ui-t-small, 11.5px);
     }
     small {
       color: var(--md-sys-color-on-surface-variant);
@@ -236,7 +236,7 @@ export class FigureSectionEditor extends localize(i18next)(LitElement) {
     }
     footer span[grow] {
       flex: 1;
-      font-size: 0.72rem;
+      font-size: var(--ui-t-micro, 11px);
       color: var(--md-sys-color-on-surface-variant);
     }
     footer span[grow][stale] {

package/client/modeller/figure-settings.ts

@@ -34,7 +34,7 @@ export class FigureSettings extends localize(i18next)(LitElement) {
         background-color: var(--md-sys-color-surface-container-lowest);
         color: var(--md-sys-color-on-surface);
         font: var(--label-font, inherit);
-        font-size: 0.76rem;
+        font-size: var(--ui-t-small, 11.5px);
       }
 
       section {
@@ -58,7 +58,7 @@ export class FigureSettings extends localize(i18next)(LitElement) {
       /* 저장되지 않는다는 것을 한 번 말해 둔다 */
       p[quiet] {
         margin: 0;
-        font-size: 0.72rem;
+        font-size: var(--ui-t-micro, 11px);
         line-height: 1.5;
         color: var(--md-sys-color-on-surface-variant);
       }
@@ -76,7 +76,7 @@ export class FigureSettings extends localize(i18next)(LitElement) {
       }
       label[row] em {
         font-style: normal;
-        font-size: 0.7rem;
+        font-size: var(--ui-t-micro, 11px);
         color: var(--md-sys-color-on-surface-variant);
       }
 
@@ -104,7 +104,7 @@ export class FigureSettings extends localize(i18next)(LitElement) {
         width: 100%;
         padding: 5px 6px;
         font: var(--input-field-font, inherit);
-        font-size: 0.76rem;
+        font-size: var(--ui-t-small, 11.5px);
         color: var(--md-sys-color-on-surface);
         background-color: var(--md-sys-color-surface);
         border: 1px solid var(--md-sys-color-outline-variant);
@@ -131,8 +131,8 @@ export class FigureSettings extends localize(i18next)(LitElement) {
         flex: none;
         width: 2.4em;
         text-align: right;
-        font: var(--mono-font, ui-monospace, monospace);
-        font-size: 0.72rem;
+        font-family: var(--ui-mono, ui-monospace, monospace);
+        font-size: var(--ui-t-micro, 11px);
         color: var(--md-sys-color-on-surface-variant);
       }
 
@@ -140,7 +140,7 @@ export class FigureSettings extends localize(i18next)(LitElement) {
         align-self: flex-start;
         padding: 5px 12px;
         font: var(--label-font, inherit);
-        font-size: 0.74rem;
+        font-size: var(--ui-t-small, 11.5px);
         color: var(--md-sys-color-on-surface-variant);
         background: none;
         border: 1px solid var(--md-sys-color-outline-variant);

package/client/modeller/figure-verdict.ts

@@ -72,7 +72,7 @@ export class FigureVerdict extends localize(i18next)(LitElement) {
       p[lead],
       p[basis],
       p[quiet] {
-        font-size: 0.74rem;
+        font-size: var(--ui-t-micro, 11px);
         line-height: 1.55;
         color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
       }
@@ -86,14 +86,14 @@ export class FigureVerdict extends localize(i18next)(LitElement) {
         gap: 6px;
       }
       span[capacity] {
-        font-size: 2.1rem;
+        font-size: var(--ui-t-hero, 26px);
         font-weight: 800;
         line-height: 1;
         letter-spacing: -0.01em;
         color: var(--md-sys-color-primary);
       }
       span[unit] {
-        font-size: 0.9rem;
+        font-size: var(--ui-t-title, 15px);
         font-weight: 600;
         color: var(--md-sys-color-primary);
       }
@@ -104,7 +104,7 @@ export class FigureVerdict extends localize(i18next)(LitElement) {
         gap: 5px;
         margin-left: auto;
         padding: 3px 10px;
-        font-size: 0.76rem;
+        font-size: var(--ui-t-small, 11.5px);
         font-weight: 700;
         color: var(--md-sys-color-on-primary-container);
         background-color: var(--md-sys-color-primary-container);
@@ -113,7 +113,7 @@ export class FigureVerdict extends localize(i18next)(LitElement) {
       span[grade] small {
         display: inline;
         margin: 0;
-        font-size: 0.68rem;
+        font-size: var(--ui-t-micro, 11px);
         font-weight: 500;
         color: inherit;
       }
@@ -127,7 +127,7 @@ export class FigureVerdict extends localize(i18next)(LitElement) {
         background-color: var(--md-sys-color-error-container);
       }
       p[because] {
-        font-size: 0.78rem;
+        font-size: var(--ui-t-small, 11.5px);
         line-height: 1.6;
         color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
       }
@@ -139,7 +139,7 @@ export class FigureVerdict extends localize(i18next)(LitElement) {
         display: flex;
         flex-wrap: wrap;
         gap: 2px 10px;
-        font-size: 0.7rem;
+        font-size: var(--ui-t-micro, 11px);
         color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
       }
       p[scale] b {
@@ -184,11 +184,12 @@ export class FigureVerdict extends localize(i18next)(LitElement) {
         fill: var(--md-sys-color-primary);
       }
       div[radar] text {
+        /* svg-units: the radar's own coordinates (its viewBox), drawn to the chart's size -- not a page size. */
         font-size: 5.2px;
         fill: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
       }
       p[unmeasured] {
-        font-size: 0.7rem;
+        font-size: var(--ui-t-micro, 11px);
         line-height: 1.5;
         color: var(--md-sys-color-tertiary);
       }
@@ -209,7 +210,7 @@ export class FigureVerdict extends localize(i18next)(LitElement) {
         display: grid;
         grid-template-columns: 1fr auto;
         gap: 2px 8px;
-        font-size: 0.75rem;
+        font-size: var(--ui-t-small, 11.5px);
       }
       ul[axes] li[blocked] {
         opacity: 0.7;
@@ -217,7 +218,7 @@ export class FigureVerdict extends localize(i18next)(LitElement) {
       ul[axes] em {
         grid-column: 1 / -1;
         font-style: normal;
-        font-size: 0.68rem;
+        font-size: var(--ui-t-micro, 11px);
         line-height: 1.5;
         color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
       }
@@ -225,7 +226,7 @@ export class FigureVerdict extends localize(i18next)(LitElement) {
         color: var(--md-sys-color-tertiary);
       }
       span[reading] {
-        font-family: var(--mono-font, monospace);
+        font-family: var(--ui-mono, ui-monospace, monospace);
         color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
       }
       div[bar] {
@@ -250,7 +251,7 @@ export class FigureVerdict extends localize(i18next)(LitElement) {
         display: grid;
         grid-template-columns: 1fr auto;
         gap: 4px 8px;
-        font-size: 0.78rem;
+        font-size: var(--ui-t-small, 11.5px);
       }
       dl[metrics] dt {
         color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
@@ -258,7 +259,7 @@ export class FigureVerdict extends localize(i18next)(LitElement) {
       dl[metrics] dd {
         margin: 0;
         text-align: right;
-        font-family: var(--mono-font, monospace);
+        font-family: var(--ui-mono, ui-monospace, monospace);
       }
 
       /* ── Trend ──────────────────────────────────────────────────────
@@ -268,7 +269,7 @@ export class FigureVerdict extends localize(i18next)(LitElement) {
         justify-self: start;
         padding: 4px 10px;
         font: inherit;
-        font-size: 0.74rem;
+        font-size: var(--ui-t-small, 11.5px);
         color: var(--md-sys-color-on-surface);
         background: none;
         border: 1px solid var(--md-sys-color-outline-variant);
@@ -304,7 +305,7 @@ export class FigureVerdict extends localize(i18next)(LitElement) {
         /* Not shrunk below its natural size — a narrow window scrolls instead. */
         min-width: 680px;
         font-family: inherit;
-        font-size: 11px;
+        font-size: var(--ui-t-micro, 11px);
         fill: currentColor;
       }
       div[sheet] svg [grid] {

package/client/modeller/gate-findings.ts

@@ -50,7 +50,7 @@ export const gateFindingStyles = css`
 
     li[head] {
       font: var(--label-font, inherit);
-      font-size: 0.72rem;
+      font-size: var(--ui-t-small, 11.5px);
       color: var(--md-sys-color-error);
     }
 
@@ -64,7 +64,7 @@ export const gateFindingStyles = css`
       align-items: flex-start;
       gap: 3px;
       padding: 3px 6px;
-      font-size: 0.72rem;
+      font-size: var(--ui-t-small, 11.5px);
       line-height: 1.5;
       color: var(--md-sys-color-on-surface-variant, var(--md-sys-color-on-surface));
       background-color: var(--md-sys-color-surface-container);
@@ -77,8 +77,8 @@ export const gateFindingStyles = css`
     }
 
     li[finding] [where] {
-      font-family: var(--mono-font, monospace);
-      font-size: 0.68rem;
+      font-family: var(--ui-mono, ui-monospace, monospace);
+      font-size: var(--ui-t-micro, 11px);
       opacity: 0.85;
     }
 
@@ -106,8 +106,7 @@ export const gateFindingStyles = css`
       font-weight: 600;
     }
     li[finding] span[how-line] md-icon {
-      --md-icon-size: 13px;
+      --md-icon-size: 16px;
       flex: none;
-      margin-top: 1px;
     }
 `

package/client/modeller/group-menu.ts

@@ -52,6 +52,6 @@ export const GroupMenuStyles = css`
     background: var(--md-sys-color-surface-container);
   }
   button[group-menu] md-icon {
-    --md-icon-size: 18px;
+    --md-icon-size: 16px;
   }
 `

package/client/pages/figure-modeller-page.ts

@@ -72,7 +72,7 @@ export class FigureModellerPage extends PageView {
       box-sizing: border-box;
       min-height: 30px;
       padding: 4px 7px;
-      font-family: var(--mono-font, monospace);
+      font-family: var(--ui-mono, ui-monospace, monospace);
       font-size: 0.76rem;
       color: var(--md-sys-color-on-surface);
       background: var(--md-sys-color-surface-container-lowest);