@things-factory/shell 10.1.16 → 10.1.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/client/themes/dark.css +52 -45
  2. package/client/themes/layout-theme.css +8 -10
  3. package/client/themes/light.css +52 -45
  4. package/client/themes/material-theme.css +57 -0
  5. package/client/themes/spacing.css +12 -5
  6. package/client/themes/theme-base.css +5 -1
  7. package/client/themes/ui-tokens.css +22 -1
  8. package/dist-server/tsconfig.tsbuildinfo +1 -1
  9. package/package.json +6 -6
  10. package/tests/control-height-tokens.test.ts +142 -0
  11. package/tests/error-colour-contrast.test.ts +72 -0
  12. package/tests/md-sys-slot-owners.test.ts +100 -0
  13. package/tests/popup-buttons-class-shrinks.test.ts +83 -0
package/client/themes/dark.css CHANGED
@@ -1,51 +1,58 @@
1
+ /*
2
+ * Accent-derived slots read `--brand-<slot>` so a product can set them from its own brand.css.
3
+ * Neutral slots read `--suite-<slot>`, set by the product suite (@things-factory/operato-suite) for the
4
+ * apps that depend on it. Bundle order does not matter for a var(); the fallback is the shell value.
5
+ * Error, shadow and scrim stay literal on purpose - nobody above the platform owns them.
6
+ * Guarded by tests/md-sys-slot-owners.test.ts.
7
+ */
1
8
  .dark {
2
- --md-sys-color-primary: rgb(178 197 255);
3
- --md-sys-color-surface-tint: rgb(178 197 255);
4
- --md-sys-color-on-primary: rgb(24 46 96);
5
- --md-sys-color-primary-container: rgb(49 69 120);
6
- --md-sys-color-on-primary-container: rgb(218 226 255);
7
- --md-sys-color-secondary: rgb(143 207 243);
8
- --md-sys-color-on-secondary: rgb(0 53 73);
9
- --md-sys-color-secondary-container: rgb(0 76 104);
10
- --md-sys-color-on-secondary-container: rgb(195 232 255);
11
- --md-sys-color-tertiary: #cffce3;
12
- --md-sys-color-on-tertiary: rgb(0 56 35);
13
- --md-sys-color-tertiary-container: #005234;
14
- --md-sys-color-on-tertiary-container: #cffce3;
9
+ --md-sys-color-primary: var(--brand-primary, rgb(178 197 255));
10
+ --md-sys-color-surface-tint: var(--brand-surface-tint, rgb(178 197 255));
11
+ --md-sys-color-on-primary: var(--brand-on-primary, rgb(24 46 96));
12
+ --md-sys-color-primary-container: var(--brand-primary-container, rgb(49 69 120));
13
+ --md-sys-color-on-primary-container: var(--brand-on-primary-container, rgb(218 226 255));
14
+ --md-sys-color-secondary: var(--brand-secondary, rgb(143 207 243));
15
+ --md-sys-color-on-secondary: var(--brand-on-secondary, rgb(0 53 73));
16
+ --md-sys-color-secondary-container: var(--brand-secondary-container, rgb(0 76 104));
17
+ --md-sys-color-on-secondary-container: var(--brand-on-secondary-container, rgb(195 232 255));
18
+ --md-sys-color-tertiary: var(--brand-tertiary, #cffce3);
19
+ --md-sys-color-on-tertiary: var(--brand-on-tertiary, rgb(0 56 35));
20
+ --md-sys-color-tertiary-container: var(--brand-tertiary-container, #005234);
21
+ --md-sys-color-on-tertiary-container: var(--brand-on-tertiary-container, #cffce3);
15
22
  --md-sys-color-error: #fbafa9;
16
- --md-sys-color-on-error: #fe594e;
17
- --md-sys-color-error-container: #fe594e;
23
+ --md-sys-color-on-error: rgb(163 0 12);
24
+ --md-sys-color-error-container: rgb(163 0 12);
18
25
  --md-sys-color-on-error-container: #fbafa9;
19
- --md-sys-color-background: rgb(18 19 24);
20
- --md-sys-color-on-background: rgb(227 226 233);
21
- --md-sys-color-surface: rgb(18 19 24);
22
- --md-sys-color-on-surface: rgb(227 226 233);
23
- --md-sys-color-surface-variant: rgb(69 70 79);
24
- --md-sys-color-on-surface-variant: rgb(197 198 208);
25
- --md-sys-color-outline: rgb(143 144 154);
26
- --md-sys-color-outline-variant: rgb(69 70 79);
26
+ --md-sys-color-background: var(--suite-background, rgb(18 19 24));
27
+ --md-sys-color-on-background: var(--suite-on-background, rgb(227 226 233));
28
+ --md-sys-color-surface: var(--suite-surface, rgb(18 19 24));
29
+ --md-sys-color-on-surface: var(--suite-on-surface, rgb(227 226 233));
30
+ --md-sys-color-surface-variant: var(--suite-surface-variant, rgb(69 70 79));
31
+ --md-sys-color-on-surface-variant: var(--suite-on-surface-variant, rgb(197 198 208));
32
+ --md-sys-color-outline: var(--suite-outline, rgb(143 144 154));
33
+ --md-sys-color-outline-variant: var(--suite-outline-variant, rgb(69 70 79));
27
34
  --md-sys-color-shadow: rgb(0 0 0);
28
35
  --md-sys-color-scrim: rgb(0 0 0);
29
- --md-sys-color-inverse-surface: rgb(227 226 233);
30
- --md-sys-color-inverse-on-surface: rgb(47 48 54);
31
- --md-sys-color-inverse-primary: rgb(73 93 146);
32
- --md-sys-color-primary-fixed: rgb(218 226 255);
33
- --md-sys-color-on-primary-fixed: rgb(0 24 72);
34
- --md-sys-color-primary-fixed-dim: rgb(178 197 255);
35
- --md-sys-color-on-primary-fixed-variant: rgb(49 69 120);
36
- --md-sys-color-secondary-fixed: rgb(195 232 255);
37
- --md-sys-color-on-secondary-fixed: rgb(0 30 44);
38
- --md-sys-color-secondary-fixed-dim: rgb(143 207 243);
39
- --md-sys-color-on-secondary-fixed-variant: rgb(0 76 104);
40
- --md-sys-color-tertiary-fixed: #c7e6d5;
41
- --md-sys-color-on-tertiary-fixed: rgb(0 33 19);
42
- --md-sys-color-tertiary-fixed-dim: #c7e6d5;
43
- --md-sys-color-on-tertiary-fixed-variant: rgb(0 82 52);
44
- --md-sys-color-surface-dim: rgb(18 19 24);
45
- --md-sys-color-surface-bright: rgb(56 57 63);
46
- --md-sys-color-surface-container-lowest: rgb(13 14 19);
47
- --md-sys-color-surface-container-low: rgb(26 27 33);
48
- --md-sys-color-surface-container: rgb(30 31 37);
49
- --md-sys-color-surface-container-high: rgb(41 42 47);
50
- --md-sys-color-surface-container-highest: rgb(51 52 58);
36
+ --md-sys-color-inverse-surface: var(--suite-inverse-surface, rgb(227 226 233));
37
+ --md-sys-color-inverse-on-surface: var(--suite-inverse-on-surface, rgb(47 48 54));
38
+ --md-sys-color-inverse-primary: var(--brand-inverse-primary, rgb(73 93 146));
39
+ --md-sys-color-primary-fixed: var(--brand-primary-fixed, rgb(218 226 255));
40
+ --md-sys-color-on-primary-fixed: var(--brand-on-primary-fixed, rgb(0 24 72));
41
+ --md-sys-color-primary-fixed-dim: var(--brand-primary-fixed-dim, rgb(178 197 255));
42
+ --md-sys-color-on-primary-fixed-variant: var(--brand-on-primary-fixed-variant, rgb(49 69 120));
43
+ --md-sys-color-secondary-fixed: var(--brand-secondary-fixed, rgb(195 232 255));
44
+ --md-sys-color-on-secondary-fixed: var(--brand-on-secondary-fixed, rgb(0 30 44));
45
+ --md-sys-color-secondary-fixed-dim: var(--brand-secondary-fixed-dim, rgb(143 207 243));
46
+ --md-sys-color-on-secondary-fixed-variant: var(--brand-on-secondary-fixed-variant, rgb(0 76 104));
47
+ --md-sys-color-tertiary-fixed: var(--brand-tertiary-fixed, #c7e6d5);
48
+ --md-sys-color-on-tertiary-fixed: var(--brand-on-tertiary-fixed, rgb(0 33 19));
49
+ --md-sys-color-tertiary-fixed-dim: var(--brand-tertiary-fixed-dim, #c7e6d5);
50
+ --md-sys-color-on-tertiary-fixed-variant: var(--brand-on-tertiary-fixed-variant, rgb(0 82 52));
51
+ --md-sys-color-surface-dim: var(--suite-surface-dim, rgb(18 19 24));
52
+ --md-sys-color-surface-bright: var(--suite-surface-bright, rgb(56 57 63));
53
+ --md-sys-color-surface-container-lowest: var(--suite-surface-container-lowest, rgb(13 14 19));
54
+ --md-sys-color-surface-container-low: var(--suite-surface-container-low, rgb(26 27 33));
55
+ --md-sys-color-surface-container: var(--suite-surface-container, rgb(30 31 37));
56
+ --md-sys-color-surface-container-high: var(--suite-surface-container-high, rgb(41 42 47));
57
+ --md-sys-color-surface-container-highest: var(--suite-surface-container-highest, rgb(51 52 58));
51
58
  }
package/client/themes/layout-theme.css CHANGED
@@ -78,13 +78,10 @@ body {
78
78
 
79
79
  /* ── 크기 ────────────────────────────────────────────────────────────── */
80
80
  /*
81
- * 마우스로 쓰는 화면의 기본은 36px 이다. 44px(손가락 최소)을 기본으로 두었더니 관리 화면에서
82
- * 버튼이 커 보였다 — 마우스는 조준이 정확해서 그만큼 필요하지 않다.
83
- *
84
- * 나누는 기준은 화면 폭이 아니라 **입력 장치**다. 폭으로 나누면 창을 좁힌 데스크톱에서 버튼이
85
- * 커지고, 큰 태블릿에서는 작은 채로 남는다. 아래 pointer: coarse 가 그 자리를 넓힌다.
81
+ * Assist chips draw page actions (the action overlay, board info), so they take the page action
82
+ * height, --context-action-height (ADR-0060 decision 6). Mouse and finger use the same height.
86
83
  */
87
- --md-assist-chip-container-height: 36px;
84
+ --md-assist-chip-container-height: var(--context-action-height);
88
85
  --md-assist-chip-container-shape: var(--ui-r-small, 6px);
89
86
  --md-assist-chip-leading-space: 14px;
90
87
  --md-assist-chip-trailing-space: 16px;
@@ -192,14 +189,15 @@ body {
192
189
  }
193
190
 
194
191
  /*
195
- * 손가락으로 누르는 장치 — 태블릿·현장 단말. 자리를 손가락 최소치까지 넓힌다.
192
+ * Finger-driven devices (tablets, phones) opening office screens.
196
193
  *
197
- * `pointer: coarse` 는 주 입력 장치가 정밀하지 않다는 뜻이다. 마우스가 달린 데스크톱은 창을 아무리
198
- * 좁혀도 여기에 걸리지 않고, 큰 태블릿은 폭이 넓어도 걸린다 — 폭으로 나눌 때와 반대다.
194
+ * The product targets WCAG 2.2 AA: SC 2.5.8 asks for a 24px target. Action buttons keep their token
195
+ * height, the same as with a mouse, so an office screen has one control height on every device (user
196
+ * decision 2026-09-17). Only the icon grows a little for thumbs. Shop-floor screens size themselves
197
+ * with --ui-tap-glove / --ui-tap-station.
199
198
  */
200
199
  @media (pointer: coarse) {
201
200
  body {
202
- --md-assist-chip-container-height: var(--ui-tap, 44px);
203
201
  --md-assist-chip-icon-size: 20px;
204
202
  }
205
203
  }
package/client/themes/light.css CHANGED
@@ -1,52 +1,59 @@
1
+ /*
2
+ * Accent-derived slots read `--brand-<slot>` so a product can set them from its own brand.css.
3
+ * Neutral slots read `--suite-<slot>`, set by the product suite (@things-factory/operato-suite) for the
4
+ * apps that depend on it. Bundle order does not matter for a var(); the fallback is the shell value.
5
+ * Error, shadow and scrim stay literal on purpose - nobody above the platform owns them.
6
+ * Guarded by tests/md-sys-slot-owners.test.ts.
7
+ */
1
8
  .light {
2
- --md-sys-color-primary: rgb(73 93 146);
3
- --md-sys-color-surface-tint: rgb(73 93 146);
4
- --md-sys-color-on-primary: rgb(255 255 255);
5
- --md-sys-color-primary-container: #e4eaf9;
6
- --md-sys-color-on-primary-container: rgb(0 24 72);
7
- --md-sys-color-secondary: rgb(27 101 133);
8
- --md-sys-color-on-secondary: rgb(255 255 255);
9
- --md-sys-color-secondary-container: rgb(195 232 255);
10
- --md-sys-color-on-secondary-container: rgb(0 30 44);
11
- --md-sys-color-tertiary: rgb(37 106 75);
12
- --md-sys-color-on-tertiary: rgb(255 255 255);
13
- --md-sys-color-tertiary-container: rgb(171 242 201);
14
- --md-sys-color-on-tertiary-container: rgb(0 33 19);
15
- --md-sys-color-error: #fe594e;
9
+ --md-sys-color-primary: var(--brand-primary, rgb(73 93 146));
10
+ --md-sys-color-surface-tint: var(--brand-surface-tint, rgb(73 93 146));
11
+ --md-sys-color-on-primary: var(--brand-on-primary, rgb(255 255 255));
12
+ --md-sys-color-primary-container: var(--brand-primary-container, #e4eaf9);
13
+ --md-sys-color-on-primary-container: var(--brand-on-primary-container, rgb(0 24 72));
14
+ --md-sys-color-secondary: var(--brand-secondary, rgb(27 101 133));
15
+ --md-sys-color-on-secondary: var(--brand-on-secondary, rgb(255 255 255));
16
+ --md-sys-color-secondary-container: var(--brand-secondary-container, rgb(195 232 255));
17
+ --md-sys-color-on-secondary-container: var(--brand-on-secondary-container, rgb(0 30 44));
18
+ --md-sys-color-tertiary: var(--brand-tertiary, rgb(37 106 75));
19
+ --md-sys-color-on-tertiary: var(--brand-on-tertiary, rgb(255 255 255));
20
+ --md-sys-color-tertiary-container: var(--brand-tertiary-container, rgb(171 242 201));
21
+ --md-sys-color-on-tertiary-container: var(--brand-on-tertiary-container, rgb(0 33 19));
22
+ --md-sys-color-error: rgb(190 12 20);
16
23
  --md-sys-color-on-error: rgb(255 255 255);
17
24
  --md-sys-color-error-container: rgb(255 218 215);
18
- --md-sys-color-on-error-container: #fe594e;
19
- --md-sys-color-background: rgb(250 248 255);
20
- --md-sys-color-on-background: rgb(26 27 33);
21
- --md-sys-color-surface: rgb(250 248 255);
22
- --md-sys-color-on-surface: rgb(26 27 33);
23
- --md-sys-color-surface-variant: rgb(225 226 236);
24
- --md-sys-color-on-surface-variant: rgb(69 70 79);
25
+ --md-sys-color-on-error-container: rgb(190 12 20);
26
+ --md-sys-color-background: var(--suite-background, rgb(250 248 255));
27
+ --md-sys-color-on-background: var(--suite-on-background, rgb(26 27 33));
28
+ --md-sys-color-surface: var(--suite-surface, rgb(250 248 255));
29
+ --md-sys-color-on-surface: var(--suite-on-surface, rgb(26 27 33));
30
+ --md-sys-color-surface-variant: var(--suite-surface-variant, rgb(225 226 236));
31
+ --md-sys-color-on-surface-variant: var(--suite-on-surface-variant, rgb(69 70 79));
25
32
  /* UI 경계는 3:1 이 기준(WCAG 1.4.11). alpha 값은 배경과 무관하게 실효 대비가 1.80 에 고정된다 → 팔레트 톤으로. 필드 3.45. */
26
- --md-sys-color-outline: rgb(118 119 130);
27
- --md-sys-color-outline-variant: rgb(197 198 208);
33
+ --md-sys-color-outline: var(--suite-outline, rgb(118 119 130));
34
+ --md-sys-color-outline-variant: var(--suite-outline-variant, rgb(197 198 208));
28
35
  --md-sys-color-shadow: rgb(0 0 0);
29
36
  --md-sys-color-scrim: rgb(0 0 0);
30
- --md-sys-color-inverse-surface: rgb(47 48 54);
31
- --md-sys-color-inverse-on-surface: rgb(241 240 247);
32
- --md-sys-color-inverse-primary: #c9d4f4;
33
- --md-sys-color-primary-fixed: rgb(218 226 255);
34
- --md-sys-color-on-primary-fixed: rgb(0 24 72);
35
- --md-sys-color-primary-fixed-dim: #c9d4f4;
36
- --md-sys-color-on-primary-fixed-variant: rgb(49 69 120);
37
- --md-sys-color-secondary-fixed: rgb(195 232 255);
38
- --md-sys-color-on-secondary-fixed: rgb(0 30 44);
39
- --md-sys-color-secondary-fixed-dim: rgb(143 207 243);
40
- --md-sys-color-on-secondary-fixed-variant: rgb(0 76 104);
41
- --md-sys-color-tertiary-fixed: #e5f6da;
42
- --md-sys-color-on-tertiary-fixed: #005234;
43
- --md-sys-color-tertiary-fixed-dim: #c8eabc;
44
- --md-sys-color-on-tertiary-fixed-variant: #005234;
45
- --md-sys-color-surface-dim: rgb(218 217 224);
46
- --md-sys-color-surface-bright: rgb(250 248 255);
47
- --md-sys-color-surface-container-lowest: rgb(255 255 255);
48
- --md-sys-color-surface-container-low: rgb(244 243 250);
49
- --md-sys-color-surface-container: rgb(238 237 244);
50
- --md-sys-color-surface-container-high: rgb(232 231 239);
51
- --md-sys-color-surface-container-highest: rgb(227 226 233);
37
+ --md-sys-color-inverse-surface: var(--suite-inverse-surface, rgb(47 48 54));
38
+ --md-sys-color-inverse-on-surface: var(--suite-inverse-on-surface, rgb(241 240 247));
39
+ --md-sys-color-inverse-primary: var(--brand-inverse-primary, #c9d4f4);
40
+ --md-sys-color-primary-fixed: var(--brand-primary-fixed, rgb(218 226 255));
41
+ --md-sys-color-on-primary-fixed: var(--brand-on-primary-fixed, rgb(0 24 72));
42
+ --md-sys-color-primary-fixed-dim: var(--brand-primary-fixed-dim, #c9d4f4);
43
+ --md-sys-color-on-primary-fixed-variant: var(--brand-on-primary-fixed-variant, rgb(49 69 120));
44
+ --md-sys-color-secondary-fixed: var(--brand-secondary-fixed, rgb(195 232 255));
45
+ --md-sys-color-on-secondary-fixed: var(--brand-on-secondary-fixed, rgb(0 30 44));
46
+ --md-sys-color-secondary-fixed-dim: var(--brand-secondary-fixed-dim, rgb(143 207 243));
47
+ --md-sys-color-on-secondary-fixed-variant: var(--brand-on-secondary-fixed-variant, rgb(0 76 104));
48
+ --md-sys-color-tertiary-fixed: var(--brand-tertiary-fixed, #e5f6da);
49
+ --md-sys-color-on-tertiary-fixed: var(--brand-on-tertiary-fixed, #005234);
50
+ --md-sys-color-tertiary-fixed-dim: var(--brand-tertiary-fixed-dim, #c8eabc);
51
+ --md-sys-color-on-tertiary-fixed-variant: var(--brand-on-tertiary-fixed-variant, #005234);
52
+ --md-sys-color-surface-dim: var(--suite-surface-dim, rgb(218 217 224));
53
+ --md-sys-color-surface-bright: var(--suite-surface-bright, rgb(250 248 255));
54
+ --md-sys-color-surface-container-lowest: var(--suite-surface-container-lowest, rgb(255 255 255));
55
+ --md-sys-color-surface-container-low: var(--suite-surface-container-low, rgb(244 243 250));
56
+ --md-sys-color-surface-container: var(--suite-surface-container, rgb(238 237 244));
57
+ --md-sys-color-surface-container-high: var(--suite-surface-container-high, rgb(232 231 239));
58
+ --md-sys-color-surface-container-highest: var(--suite-surface-container-highest, rgb(227 226 233));
52
59
  }
package/client/themes/material-theme.css CHANGED
@@ -20,4 +20,61 @@ body {
20
20
  --md-filled-button-container-shape: var(--md-sys-shape-corner-small);
21
21
  --md-outlined-button-container-shape: var(--md-sys-shape-corner-small);
22
22
  --md-elevated-button-container-shape: var(--md-sys-shape-corner-small);
23
+
24
+ /*
25
+ * Material buttons are 40px by default. Office screens use the form height instead, set once here
26
+ * rather than on every screen (ADR-0060 decision 6). The page action bar and the popup action row
27
+ * point the same variables back at their own tokens inside their scope.
28
+ */
29
+ --md-filled-button-container-height: var(--form-action-height);
30
+ --md-outlined-button-container-height: var(--form-action-height);
31
+ --md-text-button-container-height: var(--form-action-height);
32
+ --md-elevated-button-container-height: var(--form-action-height);
33
+ --md-filled-tonal-button-container-height: var(--form-action-height);
34
+
35
+ /*
36
+ * Material text fields and selects are 56px by default. Outlined ones take the medium input height
37
+ * and filled ones the large, because a filled field carries its label inside the box and 32px has
38
+ * no room for it. Height = top space + one 20px line + bottom space; the text is 14px, like the
39
+ * rest of an office form. The filled label sits above the value at 11px on a 14px line.
40
+ *
41
+ * [measured 2026-09-17, @material/web 2.5.0, headless Chrome] outlined text field and select 32px,
42
+ * filled text field and select 40px; resting labels centred, floating labels clear of the value.
43
+ */
44
+ --md-outlined-text-field-input-text-size: 14px;
45
+ --md-outlined-text-field-input-text-line-height: 20px;
46
+ --md-outlined-text-field-label-text-size: 14px;
47
+ --md-outlined-text-field-label-text-line-height: 20px;
48
+ --md-outlined-text-field-top-space: calc((var(--form-element-height-medium) - 20px) / 2);
49
+ --md-outlined-text-field-bottom-space: calc((var(--form-element-height-medium) - 20px) / 2);
50
+ --md-outlined-select-text-field-input-text-size: 14px;
51
+ --md-outlined-select-text-field-input-text-line-height: 20px;
52
+ --md-outlined-select-text-field-label-text-size: 14px;
53
+ --md-outlined-select-text-field-label-text-line-height: 20px;
54
+ --md-outlined-field-top-space: calc((var(--form-element-height-medium) - 20px) / 2);
55
+ --md-outlined-field-bottom-space: calc((var(--form-element-height-medium) - 20px) / 2);
56
+
57
+ --md-filled-text-field-input-text-size: 14px;
58
+ --md-filled-text-field-input-text-line-height: 20px;
59
+ --md-filled-text-field-label-text-size: 14px;
60
+ --md-filled-text-field-label-text-line-height: 20px;
61
+ --md-filled-text-field-label-text-populated-size: 11px;
62
+ --md-filled-text-field-label-text-populated-line-height: 14px;
63
+ --md-filled-text-field-top-space: calc((var(--form-element-height-large) - 20px) / 2);
64
+ --md-filled-text-field-bottom-space: calc((var(--form-element-height-large) - 20px) / 2);
65
+ --md-filled-text-field-with-label-top-space: calc((var(--form-element-height-large) - 34px) / 2);
66
+ --md-filled-text-field-with-label-bottom-space: calc((var(--form-element-height-large) - 34px) / 2);
67
+ --md-filled-select-text-field-input-text-size: 14px;
68
+ --md-filled-select-text-field-input-text-line-height: 20px;
69
+ --md-filled-select-text-field-label-text-size: 14px;
70
+ --md-filled-select-text-field-label-text-line-height: 20px;
71
+ --md-filled-select-text-field-label-text-populated-size: 11px;
72
+ --md-filled-select-text-field-label-text-populated-line-height: 14px;
73
+ --md-filled-field-top-space: calc((var(--form-element-height-large) - 20px) / 2);
74
+ --md-filled-field-bottom-space: calc((var(--form-element-height-large) - 20px) / 2);
75
+ --md-filled-field-with-label-top-space: calc((var(--form-element-height-large) - 34px) / 2);
76
+ --md-filled-field-with-label-bottom-space: calc((var(--form-element-height-large) - 34px) / 2);
77
+
78
+ /* Filter chips are small controls. */
79
+ --md-filter-chip-container-height: var(--form-element-height-small);
23
80
  }
package/client/themes/spacing.css CHANGED
@@ -14,10 +14,17 @@
14
14
  --icon-size-large: 32px;
15
15
  --icon-size-huge: 48px;
16
16
 
17
- /* form element height */
18
- --form-element-height-tiny: 18px;
19
- --form-element-height-small: 24px;
20
- --form-element-height-medium: 30px;
17
+ /*
18
+ * Input heights: small, medium, large. Compact, because the screens handle a lot of data, and on
19
+ * the button scale so a field and a button on one row line up (small = --cell-action-height,
20
+ * medium = the action buttons). @operato/styles declares the same numbers
21
+ * (FORM_ELEMENT_HEIGHT_TOKENS); tests/control-height-tokens.test.ts checks they agree.
22
+ *
23
+ * small grid filter bars, in-cell editors, chips, dense option buttons
24
+ * medium forms, popups, search fields - the default
25
+ * large sign-in and other single-form entry screens, filled Material fields
26
+ */
27
+ --form-element-height-small: 26px;
28
+ --form-element-height-medium: 32px;
21
29
  --form-element-height-large: 40px;
22
- --form-element-height-huge: 55px;
23
30
  }
package/client/themes/theme-base.css CHANGED
@@ -11,7 +11,11 @@
11
11
  * → 공통 불변 규칙은 여기 한 곳에만 두면 전 앱에 적용된다.
12
12
  *
13
13
  * [넣는 것] 브랜드와 무관하게 항상 성립해야 하는 규칙(테마 스킴, 공통 접근성 기본값 등)
14
- * [넣지 않는 것] 브랜드 색값 — 그것은 각 앱의 `light.css` / `dark.css` 소관(49개 md-sys 슬롯)
14
+ * [넣지 않는 것] 브랜드 색값.
15
+ * Products set accent colours only, as `--brand-<slot>` in their own `brand.css`. The shell
16
+ * `light.css` / `dark.css` read the 26 accent-derived md-sys slots from those variables, the 17
17
+ * neutral slots from `--suite-<slot>` (the product suite's shared greys), and keep the last 6
18
+ * (error, shadow, scrim) literal. See tests/md-sys-slot-owners.test.ts.
15
19
  *
16
20
  * 참고: v10/UI-PILOT-THEME-CONSISTENCY.md §3.5
17
21
  */
package/client/themes/ui-tokens.css CHANGED
@@ -156,13 +156,34 @@ body {
156
156
  *
157
157
  * 세 단계면 충분하다. 값의 근거는 각각 다르다.
158
158
  */
159
- /** 손가락 최소 — WCAG 2.2 Target Size(AAA)가 정한 44px. 마우스 화면에도 이 아래로 두지 않는다. */
159
+ /**
160
+ * Finger minimum on shop-floor screens: 44px (WCAG 2.2 SC 2.5.5, AAA).
161
+ * Office screens do not use this token. The product targets WCAG AA (SC 2.5.8, 24px minimum), and
162
+ * office buttons use the action heights below for mouse and finger alike (user decision 2026-09-17).
163
+ * A shop-floor screen raises an action height with it: `--popup-action-height: var(--ui-tap-glove)`.
164
+ */
160
165
  --ui-tap: 44px;
161
166
  /** 장갑 낀 손. 목장갑을 끼면 접촉 면적이 넓어져 44px 에서는 옆 버튼이 함께 눌린다. */
162
167
  --ui-tap-glove: 64px;
163
168
  /** 서서 보는 작업대. 팔을 뻗어 누르므로 조준이 거칠다. */
164
169
  --ui-tap-station: 96px;
165
170
 
171
+ /* ── 단추 높이 (관리 화면) ───────────────────────────────────────────── */
172
+ /*
173
+ * One token per use (ADR-0060 decision 6). The screens handle a lot of data, so buttons are compact.
174
+ * These names are the variables the components read; @operato/styles declares them with the same
175
+ * defaults (ACTION_HEIGHT_TOKENS) and tests/control-height-tokens.test.ts checks the two agree.
176
+ * An app or tenant theme overrides a use here, and every component of that use follows.
177
+ */
178
+ /** Page action bar: publish, save, export. */
179
+ --context-action-height: 32px;
180
+ /** Popup action row: cancel, confirm - both <ox-popup-actions> and the older .footer. */
181
+ --popup-action-height: 32px;
182
+ /** Form and settings screens. Every Material button follows it unless its bar says otherwise. */
183
+ --form-action-height: 32px;
184
+ /** A button inside a grid cell; icon-only cell buttons use it for their width too. */
185
+ --cell-action-height: 26px;
186
+
166
187
  /* ── 모서리 ──────────────────────────────────────────────────────────── */
167
188
  /** 카드·표. */
168
189
  --ui-r: 10px;