@things-factory/shell 10.1.20 → 10.1.27

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 +17 -0
  5. package/client/themes/spacing.css +15 -6
  6. package/client/themes/theme-base.css +5 -1
  7. package/client/themes/ui-tokens.css +23 -1
  8. package/dist-server/tsconfig.tsbuildinfo +1 -1
  9. package/package.json +2 -2
  10. package/tests/control-height-tokens.test.ts +113 -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). The platform keeps 36px; the
82
+ * operato products give them their page action height (ADR-0060 decision 6-1).
86
83
  */
87
- --md-assist-chip-container-height: 36px;
84
+ --md-assist-chip-container-height: var(--suite-context-action-height, 36px);
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 platform keeps a 44px chip (--ui-tap). The operato products use one height for mouse and
195
+ * finger (WCAG 2.2 AA, their suite value). The icon grows a little for thumbs either way. Shop-floor
196
+ * screens size themselves with --ui-tap-glove / --ui-tap-station.
199
197
  */
200
198
  @media (pointer: coarse) {
201
199
  body {
202
- --md-assist-chip-container-height: var(--ui-tap, 44px);
200
+ --md-assist-chip-container-height: var(--suite-context-action-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,21 @@ 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 follow the form height, set once here rather than on every screen (ADR-0060
26
+ * decision 6). On the platform that is Material's own 40px; the operato products are compact. The
27
+ * page action bar and the popup action row point the same variables at their own heights.
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 keep their own size (56px). Their label sits inside the box
37
+ * and floats above the value as you type, and that needs the room (user decision 2026-09-17).
38
+ * The compact input heights (--form-element-height-*) are for our own inputs and filter bars.
39
+ */
23
40
  }
package/client/themes/spacing.css CHANGED
@@ -14,10 +14,19 @@
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;
21
- --form-element-height-large: 40px;
22
- --form-element-height-huge: 55px;
17
+ /*
18
+ * Input heights: small, medium, large (ADR-0060 decisions 6 and 6-1). The fallbacks are the platform
19
+ * defaults, the heights before the operato standardization; operato-suite fills the --suite-* slot
20
+ * with the compact scale that lines up with its buttons (26/32/40). @operato/styles declares the
21
+ * same platform numbers (FORM_ELEMENT_HEIGHT_TOKENS); tests/control-height-tokens.test.ts checks.
22
+ *
23
+ * small grid filter bars, in-cell editors, dense option buttons
24
+ * medium forms, popups, search fields - the default
25
+ * large roomier single forms
26
+ *
27
+ * Material text fields and selects are not on this scale: they keep their own 56px.
28
+ */
29
+ --form-element-height-small: var(--suite-form-element-height-small, 24px);
30
+ --form-element-height-medium: var(--suite-form-element-height-medium, 30px);
31
+ --form-element-height-large: var(--suite-form-element-height-large, 40px);
23
32
  }
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,35 @@ 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
+ * the operato products' office buttons use the action heights below for mouse and finger alike.
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 decisions 6 and 6-1). The fallbacks are the platform defaults - the
174
+ * heights every application had before the operato standardization, so dssp, fmsim and the rest do
175
+ * not change when they upgrade. The operato products are compact: operato-suite fills the
176
+ * --suite-* slot. @operato/styles declares the same platform numbers (ACTION_HEIGHT_TOKENS);
177
+ * tests/control-height-tokens.test.ts checks they agree.
178
+ */
179
+ /** Page action bar: publish, save, export. */
180
+ --context-action-height: var(--suite-context-action-height, 32px);
181
+ /** Popup action row: cancel, confirm - <ox-popup-actions>, OxPrompt and the older .footer. */
182
+ --popup-action-height: var(--suite-popup-action-height, 30px);
183
+ /** Form and settings screens. Every Material button follows it (Material's own 40px by default). */
184
+ --form-action-height: var(--suite-form-action-height, 40px);
185
+ /** A button inside a grid cell; icon-only cell buttons use it for their width too. */
186
+ --cell-action-height: var(--suite-cell-action-height, 26px);
187
+
166
188
  /* ── 모서리 ──────────────────────────────────────────────────────────── */
167
189
  /** 카드·표. */
168
190
  --ui-r: 10px;