@things-factory/shell 10.1.26 → 10.1.28

package/client/themes/layout-theme.css

@@ -78,10 +78,10 @@ body {
 
   /* ── 크기 ────────────────────────────────────────────────────────────── */
   /*
-   * Assist chips draw page actions (the action overlay, board info), so they take the page action
-   * height, --context-action-height (ADR-0060 decision 6). Mouse and finger use the same height.
+   * Assist chips draw page actions (the action overlay, board info). The platform keeps 36px; the
+   * operato products give them their page action height (ADR-0060 decision 6-1).
    */
-  --md-assist-chip-container-height: var(--context-action-height);
+  --md-assist-chip-container-height: var(--suite-context-action-height, 36px);
   --md-assist-chip-container-shape: var(--ui-r-small, 6px);
   --md-assist-chip-leading-space: 14px;
   --md-assist-chip-trailing-space: 16px;
@@ -191,13 +191,13 @@ body {
 /*
  * Finger-driven devices (tablets, phones) opening office screens.
  *
- * The product targets WCAG 2.2 AA: SC 2.5.8 asks for a 24px target. Action buttons keep their token
- * height, the same as with a mouse, so an office screen has one control height on every device (user
- * decision 2026-09-17). Only the icon grows a little for thumbs. Shop-floor screens size themselves
- * with --ui-tap-glove / --ui-tap-station.
+ * The platform keeps a 44px chip (--ui-tap). The operato products use one height for mouse and
+ * finger (WCAG 2.2 AA, their suite value). The icon grows a little for thumbs either way. Shop-floor
+ * screens size themselves with --ui-tap-glove / --ui-tap-station.
  */
 @media (pointer: coarse) {
   body {
+    --md-assist-chip-container-height: var(--suite-context-action-height, var(--ui-tap, 44px));
     --md-assist-chip-icon-size: 20px;
   }
 }

package/client/themes/material-theme.css

@@ -22,9 +22,9 @@ body {
   --md-elevated-button-container-shape: var(--md-sys-shape-corner-small);
 
   /*
-   * Material buttons are 40px by default. Office screens use the form height instead, set once here
-   * rather than on every screen (ADR-0060 decision 6). The page action bar and the popup action row
-   * point the same variables back at their own tokens inside their scope.
+   * Material buttons follow the form height, set once here rather than on every screen (ADR-0060
+   * decision 6). On the platform that is Material's own 40px; the operato products are compact. The
+   * page action bar and the popup action row point the same variables at their own heights.
    */
   --md-filled-button-container-height: var(--form-action-height);
   --md-outlined-button-container-height: var(--form-action-height);
@@ -33,48 +33,8 @@ body {
   --md-filled-tonal-button-container-height: var(--form-action-height);
 
   /*
-   * Material text fields and selects are 56px by default. Outlined ones take the medium input height
-   * and filled ones the large, because a filled field carries its label inside the box and 32px has
-   * no room for it. Height = top space + one 20px line + bottom space; the text is 14px, like the
-   * rest of an office form. The filled label sits above the value at 11px on a 14px line.
-   *
-   * [measured 2026-09-17, @material/web 2.5.0, headless Chrome] outlined text field and select 32px,
-   * filled text field and select 40px; resting labels centred, floating labels clear of the value.
+   * Material text fields and selects keep their own size (56px). Their label sits inside the box
+   * and floats above the value as you type, and that needs the room (user decision 2026-09-17).
+   * The compact input heights (--form-element-height-*) are for our own inputs and filter bars.
    */
-  --md-outlined-text-field-input-text-size: 14px;
-  --md-outlined-text-field-input-text-line-height: 20px;
-  --md-outlined-text-field-label-text-size: 14px;
-  --md-outlined-text-field-label-text-line-height: 20px;
-  --md-outlined-text-field-top-space: calc((var(--form-element-height-medium) - 20px) / 2);
-  --md-outlined-text-field-bottom-space: calc((var(--form-element-height-medium) - 20px) / 2);
-  --md-outlined-select-text-field-input-text-size: 14px;
-  --md-outlined-select-text-field-input-text-line-height: 20px;
-  --md-outlined-select-text-field-label-text-size: 14px;
-  --md-outlined-select-text-field-label-text-line-height: 20px;
-  --md-outlined-field-top-space: calc((var(--form-element-height-medium) - 20px) / 2);
-  --md-outlined-field-bottom-space: calc((var(--form-element-height-medium) - 20px) / 2);
-
-  --md-filled-text-field-input-text-size: 14px;
-  --md-filled-text-field-input-text-line-height: 20px;
-  --md-filled-text-field-label-text-size: 14px;
-  --md-filled-text-field-label-text-line-height: 20px;
-  --md-filled-text-field-label-text-populated-size: 11px;
-  --md-filled-text-field-label-text-populated-line-height: 14px;
-  --md-filled-text-field-top-space: calc((var(--form-element-height-large) - 20px) / 2);
-  --md-filled-text-field-bottom-space: calc((var(--form-element-height-large) - 20px) / 2);
-  --md-filled-text-field-with-label-top-space: calc((var(--form-element-height-large) - 34px) / 2);
-  --md-filled-text-field-with-label-bottom-space: calc((var(--form-element-height-large) - 34px) / 2);
-  --md-filled-select-text-field-input-text-size: 14px;
-  --md-filled-select-text-field-input-text-line-height: 20px;
-  --md-filled-select-text-field-label-text-size: 14px;
-  --md-filled-select-text-field-label-text-line-height: 20px;
-  --md-filled-select-text-field-label-text-populated-size: 11px;
-  --md-filled-select-text-field-label-text-populated-line-height: 14px;
-  --md-filled-field-top-space: calc((var(--form-element-height-large) - 20px) / 2);
-  --md-filled-field-bottom-space: calc((var(--form-element-height-large) - 20px) / 2);
-  --md-filled-field-with-label-top-space: calc((var(--form-element-height-large) - 34px) / 2);
-  --md-filled-field-with-label-bottom-space: calc((var(--form-element-height-large) - 34px) / 2);
-
-  /* Filter chips are small controls. */
-  --md-filter-chip-container-height: var(--form-element-height-small);
 }

package/client/themes/spacing.css

@@ -15,16 +15,18 @@
   --icon-size-huge: 48px;
 
   /*
-   * Input heights: small, medium, large. Compact, because the screens handle a lot of data, and on
-   * the button scale so a field and a button on one row line up (small = --cell-action-height,
-   * medium = the action buttons). @operato/styles declares the same numbers
-   * (FORM_ELEMENT_HEIGHT_TOKENS); tests/control-height-tokens.test.ts checks they agree.
+   * Input heights: small, medium, large (ADR-0060 decisions 6 and 6-1). The fallbacks are the platform
+   * defaults, the heights before the operato standardization; operato-suite fills the --suite-* slot
+   * with the compact scale that lines up with its buttons (26/32/40). @operato/styles declares the
+   * same platform numbers (FORM_ELEMENT_HEIGHT_TOKENS); tests/control-height-tokens.test.ts checks.
    *
-   *   small   grid filter bars, in-cell editors, chips, dense option buttons
+   *   small   grid filter bars, in-cell editors, dense option buttons
    *   medium  forms, popups, search fields - the default
-   *   large   sign-in and other single-form entry screens, filled Material fields
+   *   large   roomier single forms
+   *
+   * Material text fields and selects are not on this scale: they keep their own 56px.
    */
-  --form-element-height-small: 26px;
-  --form-element-height-medium: 32px;
-  --form-element-height-large: 40px;
+  --form-element-height-small: var(--suite-form-element-height-small, 24px);
+  --form-element-height-medium: var(--suite-form-element-height-medium, 30px);
+  --form-element-height-large: var(--suite-form-element-height-large, 40px);
 }

package/client/themes/ui-tokens.css

@@ -159,7 +159,7 @@ body {
   /**
    * Finger minimum on shop-floor screens: 44px (WCAG 2.2 SC 2.5.5, AAA).
    * Office screens do not use this token. The product targets WCAG AA (SC 2.5.8, 24px minimum), and
-   * office buttons use the action heights below for mouse and finger alike (user decision 2026-09-17).
+   * the operato products' office buttons use the action heights below for mouse and finger alike.
    * A shop-floor screen raises an action height with it: `--popup-action-height: var(--ui-tap-glove)`.
    */
   --ui-tap: 44px;
@@ -168,21 +168,22 @@ body {
   /** 서서 보는 작업대. 팔을 뻗어 누르므로 조준이 거칠다. */
   --ui-tap-station: 96px;
 
-  /* ── 단추 높이 (관리 화면) ───────────────────────────────────────────── */
+  /* ── 단추 높이 ──────────────────────────────────────────────────────── */
   /*
-   * One token per use (ADR-0060 decision 6). The screens handle a lot of data, so buttons are compact.
-   * These names are the variables the components read; @operato/styles declares them with the same
-   * defaults (ACTION_HEIGHT_TOKENS) and tests/control-height-tokens.test.ts checks the two agree.
-   * An app or tenant theme overrides a use here, and every component of that use follows.
+   * One token per use (ADR-0060 decisions 6 and 6-1). The fallbacks are the platform defaults - the
+   * heights every application had before the operato standardization, so dssp, fmsim and the rest do
+   * not change when they upgrade. The operato products are compact: operato-suite fills the
+   * --suite-* slot. @operato/styles declares the same platform numbers (ACTION_HEIGHT_TOKENS);
+   * tests/control-height-tokens.test.ts checks they agree.
    */
   /** Page action bar: publish, save, export. */
-  --context-action-height: 32px;
-  /** Popup action row: cancel, confirm - both <ox-popup-actions> and the older .footer. */
-  --popup-action-height: 32px;
-  /** Form and settings screens. Every Material button follows it unless its bar says otherwise. */
-  --form-action-height: 32px;
+  --context-action-height: var(--suite-context-action-height, 32px);
+  /** Popup action row: cancel, confirm - <ox-popup-actions>, OxPrompt and the older .footer. */
+  --popup-action-height: var(--suite-popup-action-height, 30px);
+  /** Form and settings screens. Every Material button follows it (Material's own 40px by default). */
+  --form-action-height: var(--suite-form-action-height, 40px);
   /** A button inside a grid cell; icon-only cell buttons use it for their width too. */
-  --cell-action-height: 26px;
+  --cell-action-height: var(--suite-cell-action-height, 26px);
 
   /* ── 모서리 ──────────────────────────────────────────────────────────── */
   /** 카드·표. */