@things-factory/shell 10.0.13 → 10.0.19

package/client/themes/app-theme.css

@@ -60,14 +60,22 @@ body {
   /* material design component themes */
   --mdc-danger-button-primary-color: var(--status-danger-color);
 
-  /* button style */
-  --button-background-color: var(--md-sys-color-surface-variant);
+  /*
+   * button style
+   *
+   * 바탕을 회색(surface-variant)으로 채우고 있었다. 버튼이 서넛 놓이는 툴바에서 회색 덩어리가
+   * 나란히 서면 어느 것이 중요한지 보이지 않는다. 기본은 **면 색 + 테두리**로 두고, 채우는 것은
+   * 주 동작과 위험한 동작에만 남긴다(그 둘은 `[raised]`·`[danger]` 가 그린다).
+   */
+  --button-background-color: var(--ui-panel, var(--md-sys-color-surface-container-lowest));
   --button-background-focus-color: var(--md-sys-color-primary);
   --button-border: var(--border-dim-color);
-  --button-border-radius: var(--border-radius);
+  /* 4px 은 모서리가 둥근지 각진지 애매하다 — 다른 면(카드·표)과 같은 눈금을 쓴다. */
+  --button-border-radius: var(--ui-r-small, 6px);
   --button-margin: var(--margin-default) var(--margin-default) var(--margin-default) 0;
   --button-padding: calc(var(--padding-narrow) * 1.5) var(--padding-wide);
-  --button-color: var(--md-sys-color-secondary);
+  /* 글자는 본문색으로 — 강조는 아이콘과 주 동작이 맡는다. 글자까지 색을 주면 링크로 읽힌다. */
+  --button-color: var(--md-sys-color-on-surface);
   --button-font: 600 var(--fontsize-default) var(--theme-font);
   --button-text-transform: capitalize;
   --button-active-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);

package/client/themes/grist-theme.css

@@ -27,7 +27,7 @@ body {
   --grid-header-top-border: 2px solid var(--md-sys-color-primary);
   --grid-header-bottom-border: var(--grid-container-border-color);
   --grid-header-padding: var(--spacing-small) var(--spacing-tiny);
-  --grid-header-sorter-size: 18px;
+  --grid-header-sorter-size: 14px;
   --grid-header-splitter-border: var(--grid-container-border-color);
   --grid-header-splitter-border-hover: 1px solid var(--md-sys-color-inverse-primary);
   --grid-header-color: var(--md-sys-color-primary);

package/client/themes/layout-theme.css

@@ -35,7 +35,7 @@ body {
   --group-bar-active-line-color: var(--md-sys-color-on-secondary-container);
   --group-bar-line: solid 3px var(--md-sys-color-outline);
 
-  --button-container-margin: inintial;
+  --button-container-margin: initial;
   --button-container-padding: 0 var(--padding-default) var(--padding-wide) var(--padding-default);
   --button-container-background: transparent;
   --button-container-height: initial;
@@ -46,6 +46,86 @@ body {
   --button-container-button-height: initial;
   --button-container-button-border: var(--button-border);
 
+  /* ── 동작 버튼 ──────────────────────────────────────────────────────── */
+  /*
+   * 버튼 — 페이지의 동작 버튼(발행·취소·내보내기 …).
+   *
+   * ── 무엇이 어긋나 있었나 (2026-08-31, 실측) ─────────────────────────────────
+   * 이 버튼들은 `md-assist-chip` 으로 그려진다(`ox-page-action-context-bar`). 그런데 그 부품이 읽는
+   * `--md-assist-chip-*` 토큰을 **아무도 정하지 않았다.** 그래서 머티리얼 기본값으로 떨어졌고,
+   * 브라우저에서 잰 값이 이랬다.
+   *
+   * ```
+   * 글자색   rgb(0, 0, 0)     순수 검정. 본문 글자색(on-surface)과 다르다
+   * 굵기     400              본문과 같은 굵기라 누를 것으로 안 보인다
+   * 크기     13.33px          지정한 적 없는 값(1em 의 브라우저 기본에서 나온 것)
+   * 모서리   5px              둥근 것도 각진 것도 아닌 어중간한 값
+   * 높이     32px             손가락으로 누르기에 작다(WCAG 최소 44px)
+   * ```
+   *
+   * 즉 「낡아 보인다」의 상당 부분이 취향이 아니라 **값이 비어 있어서** 생긴 것이었다.
+   *
+   * ── 무엇을 정하나 ───────────────────────────────────────────────────────────
+   * 부품은 `@operato/*` 에 있어 고칠 수 없지만, 이 토큰들은 상속되므로 문서 수준에서 정하면 모든 앱의
+   * 모든 동작 버튼에 닿는다.
+   *
+   * ── 아직 못 하는 것 ─────────────────────────────────────────────────────────
+   * 지금은 **주 동작과 보조 동작이 똑같이 보인다.** 「발행」과 「취소」가 구별되지 않는다.
+   * 부품이 그 구분을 나타내는 표식(속성)을 붙이지 않아서, 문서 수준의 토큰으로는 가를 수 없다
+   * (속성 선택자는 shadow DOM 안으로 들어가지 못한다). 부품 쪽에 `[danger]` 는 이미 있으므로,
+   * 주 동작 표식이 생기면 여기서 채운다.
+   */
+
+  /* ── 크기 ────────────────────────────────────────────────────────────── */
+  /*
+   * 마우스로 쓰는 화면의 기본은 36px 이다. 44px(손가락 최소)을 기본으로 두었더니 관리 화면에서
+   * 버튼이 커 보였다 — 마우스는 조준이 정확해서 그만큼 필요하지 않다.
+   *
+   * 나누는 기준은 화면 폭이 아니라 **입력 장치**다. 폭으로 나누면 창을 좁힌 데스크톱에서 버튼이
+   * 커지고, 큰 태블릿에서는 작은 채로 남는다. 아래 pointer: coarse 가 그 자리를 넓힌다.
+   */
+  --md-assist-chip-container-height: 36px;
+  --md-assist-chip-container-shape: var(--ui-r-small, 6px);
+  --md-assist-chip-leading-space: 14px;
+  --md-assist-chip-trailing-space: 16px;
+  --md-assist-chip-with-leading-icon-leading-space: 12px;
+  --md-assist-chip-icon-size: 18px;
+  --md-assist-chip-icon-label-space: 7px;
+
+  /* ── 글자 ────────────────────────────────────────────────────────────── */
+  /* 굵기 600 — 본문(400)과 같으면 문장인지 버튼인지 구별되지 않는다. */
+  --md-assist-chip-label-text-font: var(--theme-font);
+  --md-assist-chip-label-text-size: var(--ui-t-body, 13px);
+  --md-assist-chip-label-text-weight: 600;
+  --md-assist-chip-label-text-line-height: 1;
+  --md-assist-chip-label-text-color: var(--md-sys-color-on-surface);
+
+  /* ── 테두리 ──────────────────────────────────────────────────────────── */
+  --md-assist-chip-outline-width: 1px;
+  --md-assist-chip-outline-color: var(--md-sys-color-outline-variant);
+
+  /* ── 아이콘 ──────────────────────────────────────────────────────────── */
+  /* 아이콘만 강조색을 준다 — 버튼 전체를 칠하면 여러 개가 나란히 있을 때 화면이 시끄럽다. */
+  --md-assist-chip-leading-icon-color: var(--md-sys-color-primary);
+
+  /* ── 손을 올렸을 때 ──────────────────────────────────────────────────── */
+  --md-assist-chip-hover-state-layer-color: var(--md-sys-color-primary);
+  --md-assist-chip-hover-state-layer-opacity: 0.08;
+  --md-assist-chip-hover-label-text-color: var(--md-sys-color-primary);
+  --md-assist-chip-hover-leading-icon-color: var(--md-sys-color-primary);
+
+  /* ── 키보드로 왔을 때 ────────────────────────────────────────────────── */
+  /* 테두리 색이 바뀌지 않으면 키보드로 이동할 때 지금 어디인지 알 수 없다. */
+  --md-assist-chip-focus-outline-color: var(--md-sys-color-primary);
+  --md-assist-chip-focus-label-text-color: var(--md-sys-color-primary);
+  --md-assist-chip-focus-leading-icon-color: var(--md-sys-color-primary);
+
+  /* ── 누를 수 없을 때 ─────────────────────────────────────────────────── */
+  --md-assist-chip-disabled-label-text-color: var(--md-sys-color-on-surface);
+  --md-assist-chip-disabled-label-text-opacity: 0.38;
+  --md-assist-chip-disabled-outline-color: var(--md-sys-color-outline-variant);
+  --md-assist-chip-disabled-outline-opacity: 0.5;
+
   --popup-content-background-color: var(--md-sys-color-background);
   --popup-content-color: var(--md-sys-color-on-background);
   --popup-content-padding: 10px 20px;
@@ -110,3 +190,16 @@ body {
     --overlay-center-large-height: 80%;
   }
 }
+
+/*
+ * 손가락으로 누르는 장치 — 태블릿·현장 단말. 자리를 손가락 최소치까지 넓힌다.
+ *
+ * `pointer: coarse` 는 주 입력 장치가 정밀하지 않다는 뜻이다. 마우스가 달린 데스크톱은 창을 아무리
+ * 좁혀도 여기에 걸리지 않고, 큰 태블릿은 폭이 넓어도 걸린다 — 폭으로 나눌 때와 반대다.
+ */
+@media (pointer: coarse) {
+  body {
+    --md-assist-chip-container-height: var(--ui-tap, 44px);
+    --md-assist-chip-icon-size: 20px;
+  }
+}

package/client/themes/oops-theme.css

@@ -17,6 +17,13 @@ body {
     --oops-note-icon-font: normal 18px var(--md-icon-font, 'Material Symbols Outlined');
     --oops-note-title-font: bold 13px var(--theme-font);
     --oops-note-title-margin: var(--margin-narrow) 0 2px 0;
-    --oops-note-description-font: normal 0px var(--theme-font);
+    /*
+     * 좁은 화면에서도 설명은 남긴다.
+     *
+     * 전에는 여기가 `normal 0px` 이었다. 글자 크기를 0 으로 만들어 설명을 지운 것이라, 460px 아래에서는
+     * 제목만 남고 무엇을 하면 되는지가 사라졌다. 홈 화면이 그 상태였다 — 「HOME DASHBOARD」한 줄만
+     * 보이고 다음에 할 일이 안 보였다. 자리가 좁으면 글자를 줄이고, 없애지 않는다.
+     */
+    --oops-note-description-font: normal 11px var(--theme-font);
   }
 }

package/client/themes/state-color.css

@@ -1,6 +1,55 @@
+/*
+ * 상태 의미색 — 정상·주의·정보·위험. 모든 앱이 여기서 가져다 쓴다.
+ *
+ * ── 왜 라이트·다크로 갈리나 (2026-08-30) ────────────────────────────────────
+ * 전에는 `:root` 한 벌뿐이었다. 그래서 다크 테마에서 밝은 초록·주황이 어두운 바탕에 그대로 얹혔고,
+ * 앱들이 각자 자기 값을 따로 갖게 됐다(operato-twin 이 `--twin-good`·`--twin-warn` 을 직접 들고 있었다).
+ * 두 화면을 나란히 놓으면 「정상」이 서로 다른 초록이었다.
+ *
+ * ── 값을 어떻게 잡았나 ──────────────────────────────────────────────────────
+ * 이 색들은 **글자색으로 쓰인다.** 그래서 WCAG AA(4.5:1)를 기준으로, 가장 불리한 바탕에 대고 잡았다.
+ *
+ * ```
+ * 라이트 기준 바탕   rgb(238 241 243)   앱들 중 가장 어두운 라이트 surface
+ * 다크  기준 바탕   rgb(51 52 58)      가장 밝은 다크 surface-container-highest
+ * ```
+ *
+ * 색상(hue)과 채도는 그대로 두고 명도만 옮겼다 — 초록은 초록으로, 주황은 주황으로 남는다.
+ *
+ * ```
+ *            이전(라이트)        지금(라이트)       지금(다크)
+ * success    #35a24a  2.88      #297d39  4.53     #35c46e  5.48
+ * warning    #ee8d03  2.19      #9f5e02  4.54     #e0a24a  5.57
+ * info       #398ace  3.25      #2b72ad  4.50     #61a2d8  4.53
+ * ```
+ *
+ * 주의(warning)는 AA 를 맞추면 갈색에 가까워진다. 주황을 살리려면 3:1(#c97703)에서 멈춰야 하는데,
+ * 그러면 글자색으로 쓸 수 없다. **읽히는 쪽을 골랐다** — 상태는 색만으로 전하지 않고 글자를 함께
+ * 보이므로, 그 글자가 읽혀야 한다.
+ *
+ * ── danger 는 여기서 값을 정하지 않는다 ─────────────────────────────────────
+ * `--md-sys-color-error` 를 그대로 쓴다. 위험은 md 역할색에 대응이 있어서 팔레트가 정하는 것이 맞다.
+ * 다만 그 값의 대비는 앱 팔레트마다 다르다(셸 라이트 #fe594e 는 2.74 로 낮다) — 팔레트 쪽에서 볼 일이다.
+ */
+
+/* 테마 클래스가 붙기 전 · 붙지 않는 앱을 위한 기본값. 라이트와 같다. */
 :root {
   --status-danger-color: var(--md-sys-color-error, #d14946);
-  --status-warning-color: #ee8d03;
-  --status-info-color: #398ace;
-  --status-success-color: #35a24a;
+  --status-warning-color: #9f5e02;
+  --status-info-color: #2b72ad;
+  --status-success-color: #297d39;
+}
+
+.light {
+  --status-danger-color: var(--md-sys-color-error, #d14946);
+  --status-warning-color: #9f5e02;
+  --status-info-color: #2b72ad;
+  --status-success-color: #297d39;
+}
+
+.dark {
+  --status-danger-color: var(--md-sys-color-error, #fbafa9);
+  --status-warning-color: #e0a24a;
+  --status-info-color: #61a2d8;
+  --status-success-color: #35c46e;
 }

package/client/themes/theme-base.css

@@ -28,3 +28,40 @@
 .dark {
   color-scheme: dark;
 }
+
+/*
+ * 앱 글꼴을 md 타이포스케일에 잇는다.
+ *
+ * [무엇이 어긋나 있었나]
+ * 셸은 `--theme-font` 를 정의하고(`app-theme.css`) 자기 파생 토큰 15개에만 썼다. md 타이포스케일이
+ * 참조하는 `--md-ref-typeface-*` 에는 아무도 값을 넣지 않았다. 그래서 md 기반 공통 위젯 — 확인
+ * 대화상자(`ox-prompt`)·버튼 라벨·토스트 — 이 앱 글꼴을 못 받고 각자의 폴백(Roboto)으로 갈렸다.
+ * 한 화면 안에서 본문과 대화상자의 글꼴이 달랐다.
+ *
+ * 부품이 스타일을 빠뜨린 것이 아니다. 부품은 토큰으로 받도록 이미 짜여 있고, 그 토큰을 정한 곳이
+ * 없었을 뿐이다. 그러므로 고칠 자리는 부품이 아니라 토큰이다.
+ *
+ * [왜 여기인가]
+ * `app-theme.css` 에 넣으면 그 파일을 override 하는 앱이 이 규칙을 통째로 잃는다(파일 단위 대체).
+ * `theme-base.css` 는 어떤 앱도 같은 이름으로 두지 않으므로 항상 번들에 들어간다.
+ *
+ * [plain 과 brand 둘 다]
+ * md 타이포스케일은 본문·라벨(plain)과 제목(brand)을 다른 토큰으로 읽는다. 하나만 걸면 같은
+ * 대화상자에서 제목과 본문의 글꼴이 갈린다(operato-twin 에서 실제로 그랬다).
+ *
+ * [body 까지 짚는 이유]
+ * 셸은 `--theme-font` 를 body 에 정한다. 상속은 가까운 조상이 이기므로 html 에만 두면 body 아래에
+ * 붙는 토스트는 여전히 셸 값을 물려받는다. `body.light`·`body.dark` 로 한 번 더 짚어, 테마 파일의
+ * 병합 순서에 기대지 않고 앱 값이 이기게 한다.
+ *
+ * `:root` 를 빼고 body 만 짚는다: `--theme-font` 는 body 에 정의되므로, html 에서는 `var()` 가
+ * 풀리지 않아 값이 비어 버린다. 대화상자·토스트를 포함해 눈에 보이는 것은 모두 body 아래에 있다.
+ *
+ * 글꼴 값 자체는 여기서 정하지 않는다 — 앱이 `--theme-font` 하나만 정하면 된다.
+ */
+body,
+body.light,
+body.dark {
+  --md-ref-typeface-plain: var(--theme-font);
+  --md-ref-typeface-brand: var(--theme-font);
+}

package/client/themes/ui-tokens.css

@@ -0,0 +1,111 @@
+/*
+ * 화면을 그릴 때 쓰는 토큰 — 면·글자·눈금·모서리.
+ *
+ * ── 왜 필요한가 ─────────────────────────────────────────────────────────────
+ * 지금은 페이지가 `--md-sys-color-*` 를 직접 가져다 쓴다. 그 이름은 색의 **역할**을 말할 뿐이라
+ * (surface-container 가 카드인지 배경인지 구분하지 않는다), 페이지마다 다른 것을 고른다. 그래서
+ * 같은 뜻의 자리가 앱마다·페이지마다 다른 회색이 됐다.
+ *
+ * 여기서 한 겹 위의 이름을 붙인다. 값은 전부 md 역할색에서 오므로 라이트·다크가 자동으로 따라온다.
+ * 페이지는 `--ui-panel`(카드가 놓이는 면) 처럼 **무엇인지**로 고른다.
+ *
+ * ── 글자 눈금 ───────────────────────────────────────────────────────────────
+ * 눈금을 정하지 않으면 페이지마다 0.72 / 0.78 / 0.83 / 0.88rem 같은 값이 생긴다(operato-mes 한
+ * 파일에 아홉 가지가 있었다). 크기가 아홉이면 위계가 없는 것과 같다. 다섯이면 충분하다.
+ *
+ * ── 이 파일 이름 ────────────────────────────────────────────────────────────
+ * 테마 파일은 같은 이름이면 파일 단위로 대체된다(builder 의 ThemeOverridePlugin). `ui-tokens.css`
+ * 는 앱이 같은 이름을 두지 않는 한 항상 번들에 들어간다. 앱이 값을 바꾸고 싶으면 자기 light.css /
+ * dark.css 에서 해당 토큰만 다시 정하면 된다.
+ */
+
+:root,
+body {
+  /* ── 면 ──────────────────────────────────────────────────────────────── */
+  /** 페이지 바탕. */
+  --ui-bg: var(--md-sys-color-surface);
+  /** 카드·표·패널이 놓이는 면. 바탕보다 한 단계 앞이다. */
+  --ui-panel: var(--md-sys-color-surface-container-lowest);
+  /** 면의 테두리. 회색으로 채우는 대신 이 선으로 구분한다. */
+  --ui-line: var(--md-sys-color-outline-variant);
+  /** 같은 면 안에서 행을 나누는 선. 테두리보다 흐리다. */
+  --ui-line-soft: var(--md-sys-color-surface-container-high);
+
+  /* ── 글자 ────────────────────────────────────────────────────────────── */
+  /** 본문. */
+  --ui-ink: var(--md-sys-color-on-surface);
+  /** 라벨·보조 설명. */
+  --ui-muted: var(--md-sys-color-on-surface-variant);
+  /** 곁말·단위·시각처럼 있어도 그만인 글자. */
+  --ui-faint: var(--md-sys-color-outline);
+
+  /* ── 강조·상태 ───────────────────────────────────────────────────────── */
+  --ui-accent: var(--md-sys-color-primary);
+  /** 강조색을 아주 옅게 깐 면 — 마우스를 올린 행, 선택된 칩. */
+  --ui-accent-wash: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
+  /* 상태 의미색은 state-color.css 가 정본이다. 여기서는 짧은 이름만 잇는다. */
+  --ui-good: var(--status-success-color);
+  --ui-warn: var(--status-warning-color);
+  --ui-crit: var(--status-danger-color);
+
+  /* ── 글꼴 ────────────────────────────────────────────────────────────── */
+  /* 숫자·식별자·시각에 쓴다. 자릿수가 흔들리지 않아 값으로 읽힌다. */
+  --ui-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
+
+  /* ── 글자 크기 다섯 ──────────────────────────────────────────────────── */
+  /** 화면에서 가장 큰 수 하나(지표 값). */
+  --ui-t-hero: 26px;
+  /** 구역 제목. */
+  --ui-t-title: 15px;
+  /** 본문·표의 칸. */
+  --ui-t-body: 13px;
+  /** 보조 설명·범례. */
+  --ui-t-small: 11.5px;
+  /**
+   * 라벨.
+   *
+   * 처음에는 10px 로 두고 「대문자 라벨 전용」이라고 적었다. 그것은 라틴 문자의 관습이다 —
+   * 작은 대문자는 소문자와 모양이 달라서 작아도 라벨로 읽힌다.
+   *
+   * **한국어에는 대소문자가 없다.** `text-transform: uppercase` 가 아무 일도 하지 않고, 남는 것은
+   * 10px 짜리 작은 글씨뿐이다. 이 제품의 화면은 한국어가 먼저이므로 11px 로 둔다.
+   * (`work-shift` 화면에서 절 제목이 안 읽힌다고 MES 레인이 알려 왔다.)
+   *
+   * 대문자 변환은 그대로 둔다 — 한국어에 해가 없고 라틴 라벨에는 도움이 된다.
+   */
+  --ui-t-micro: 11px;
+
+  /*
+   * 화면에서 가장 큰 수 — 서서 보는 작업대용. `--ui-t-hero` 는 앉아서 보는 관리 화면 기준이라
+   * 현장에서는 작다. 두 값을 나눠 두어야 같은 컴포넌트를 두 곳에서 쓸 수 있다.
+   */
+  --ui-t-display: 40px;
+
+  /* ── 손으로 누르는 자리 ──────────────────────────────────────────────── */
+  /*
+   * 현장 화면은 마우스가 아니라 손가락이 누른다. 크기를 화면마다 정하면 어떤 화면은 44px 이고
+   * 어떤 화면은 96px 이 된다 — 같은 사람이 같은 장갑으로 누르는데.
+   *
+   * 세 단계면 충분하다. 값의 근거는 각각 다르다.
+   */
+  /** 손가락 최소 — WCAG 2.2 Target Size(AAA)가 정한 44px. 마우스 화면에도 이 아래로 두지 않는다. */
+  --ui-tap: 44px;
+  /** 장갑 낀 손. 목장갑을 끼면 접촉 면적이 넓어져 44px 에서는 옆 버튼이 함께 눌린다. */
+  --ui-tap-glove: 64px;
+  /** 서서 보는 작업대. 팔을 뻗어 누르므로 조준이 거칠다. */
+  --ui-tap-station: 96px;
+
+  /* ── 모서리 ──────────────────────────────────────────────────────────── */
+  /** 카드·표. */
+  --ui-r: 10px;
+  /** 버튼·칩처럼 작은 것. */
+  --ui-r-small: 6px;
+
+  /* ── 읽기 폭 ─────────────────────────────────────────────────────────── */
+  /*
+   * 넓은 화면에서 한 줄이 너무 길어지면 눈이 다음 줄의 첫머리를 놓친다. 좁은 화면에서는 폭을 다
+   * 써야 하므로 min() 으로 잡는다. 값이 px 인 이유: 한글은 전각이라 ch(숫자 0 의 폭)로 재면 실제
+   * 글자 수와 두 배 가까이 어긋난다.
+   */
+  --ui-measure: min(1080px, 100%);
+}