@things-factory/shell 10.1.4 → 10.1.16

package/client/themes/calendar-theme.css

@@ -1,47 +1,89 @@
 body {
 
   /* monthly common color */
-  --calendar-monthly-border: 1px solid rgba(0, 0, 0, 0.1);
+  --calendar-monthly-border: 1px solid var(--md-sys-color-outline-variant);
   --calendar-monthly-border-width: 0 1px 1px 0px;
 
   /* monthly layout */
   --calendar-monthly-ol-margin: var(--margin-default) 0;
-  --calendar-monthly-ol-top-border: 2px solid var(--md-sys-color-secondary);
-  --calendar-current-month-background-color: var(--md-sys-color-surface-variant);
+  --calendar-monthly-ol-top-border: 1px solid var(--md-sys-color-outline-variant);
+  --calendar-current-month-background-color: var(--md-sys-color-surface-container-lowest);
   --calendar-current-month-color: var(--md-sys-color-on-surface);
   --calendar-monthly-label-align: left;
   --calendar-monthly-label-padding: var(--padding-narrow) 0;
-  --calendar-monthly-opacity: 0.5;
-  --calendar-monthly-date-label-background-color: var(--status-danger-color);
+  --calendar-monthly-opacity: 1;
+  /* Today is not a fault — the accent marks it and danger stays for what is wrong.
+     It was a filled pill in primary; now the cell carries today (its ring and wash) and this is
+     just a bolder number. The ink token went too: primary sits a step away from the body ink, so a
+     tinted today came out paler than its neighbours (dE00 7.2 dark, 5.7 light) while being bold —
+     emphasis pointing two ways. The number inherits the cell's ink and the ring carries the
+     accent. Background and padding went with the pill. */
   --calendar-monthly-date-label-margin: var(--margin-narrow);
-  --calendar-monthly-date-label-padding: 0px 6px;
-  --calendar-monthly-date-label-color: var(--md-sys-color-on-primary);
 
-  --calendar-monthly-background-color: #f4f4f4;
+  --calendar-monthly-background-color: var(--md-sys-color-surface-container-low);
   --calendar-monthly-event-margin: var(--padding-narrow) 0 0 0;
   --calendar-monthly-event-padding: 2px var(--padding-default);
   --calendar-monthly-event-border: 3px solid #ccc;
   --calendar-monthly-event-border-width: 0 0 0 3px;
 
+  /*
+   * 날 자체의 상태 — 그 날에 일어난 일이 아니라, 일들을 읽는 틀이다.
+   *
+   * ── 왜 불투명한 색이 아니라 알파인가 ──────────────────────────────────────
+   * 이 면은 이미 칠해진 면 **위에** 얹힌다(이번 달 흰 칸 · 다른 달 회색 칸). 불투명한 색을 고르면
+   * 밝은 모드와 어두운 모드 중 한쪽에서 반드시 글씨를 먹는다. 알파는 깔린 면을 따라가므로 두 모드
+   * 어디서나 그 바탕 위에 얹힌다 — plant 레인이 대체값을 그렇게 잡았고 같은 이유다.
+   *
+   * ── 왜 10% 인가 (실측 2026-09-11) ───────────────────────────────────────
+   * ```
+   *                        이웃 칸과 ΔE00      그 면 위 글자 대비
+   *   밝은 · 이번 달 칸        7.6              14.49
+   *   밝은 · 다른 달 칸        8.2
+   *   어두운 · 이번 달         9.0              10.93
+   *   어두운 · 다른 달         9.2
+   * ```
+   *
+   * 오늘의 워시도 10% 인데 이웃과 4.1~6.3 이다. 휴무가 더 크게 벌어지는 것이 맞다 — **오늘은 내가
+   * 어디 있나이고 휴무는 이 날을 어떻게 읽나**여서, 틀이 먼저 읽혀야 한다.
+   *
+   * 둘이 겹치는 날(오늘이면서 휴무)도 갈린다: 휴무 면 위에 오늘 워시를 얹으면 ΔE00 4.3.
+   *
+   * 색상은 분류 1번을 따른다. 사람들이 방금 배운 「이 분홍이 휴무」를 그대로 들고 가고, error 빨강과도
+   * 멀다(ΔE00 24.2). ⚠ 그래서 **분류 1번은 다른 뜻으로 쓰지 않는 것이 좋다** — 한 화면에서 같은 색이
+   * 날을 뜻하기도 하고 종류를 뜻하기도 하면 방금 없앤 그 겹침이 돌아온다.
+   */
+  --calendar-day-state-non-working-background-color: color-mix(in srgb, var(--ui-category-1) 10%, transparent);
+
   /* weekly common color */
-  --calendar-weekly-text-color: var(--md-sys-color-secondary);
-  --calendar-weekly-border: 1px solid rgba(0, 0, 0, 0.1);
+  /* The week view sets an ink on its host, the month view does not — so at secondary the same
+     events came out a step paler after a view switch, title included.
+     [확인함] 2026-09-11 — weekly rgb(74,86,100) against monthly rgb(24,29,35). */
+  --calendar-weekly-text-color: var(--md-sys-color-on-surface);
+  --calendar-weekly-border: 1px solid var(--md-sys-color-outline-variant);
   --calendar-weekly-border-width: 0 1px 1px 0px;
 
   /* weekly layout */
   --calendar-weekly-ol-margin: var(--margin-default) 0;
-  --calendar-weekly-ol-top-border: 2px solid var(--md-sys-color-secondary);
-  --calendar-current-week-background-color: var(--md-sys-color-surface-variant);
-  --calendar-current-week-color: var(--md-sys-color-on-surface);
+  --calendar-weekly-ol-top-border: 1px solid var(--md-sys-color-outline-variant);
+  --calendar-current-week-background-color: var(--md-sys-color-surface);
+  /* The days you are reading, on the same ladder the month view uses for this month. */
+  --calendar-weekly-date-background-color: var(--md-sys-color-surface-container-lowest);
+/* The weekday row is a column header, not content. At on-surface it carried the same ink as
+     the dates under it, so the only thing telling a heading from its column was the grey band.
+     [확인함] 2026-09-11 — 요일 13px and 날짜 16px were both rgb(24,29,35). */
+  --calendar-current-week-color: var(--md-sys-color-on-surface-variant);
   --calendar-weekly-label-align: center;
   --calendar-weekly-label-padding: var(--padding-narrow) 0;
-  --calendar-weekly-opacity: 0.5;
-  --calendar-weekly-date-label-background-color: var(--status-danger-color);
+  --calendar-weekly-opacity: 1;
+  /* Today is not a fault — the accent marks it and danger stays for what is wrong.
+     It was a filled pill in primary; now the cell carries today (its ring and wash) and this is
+     just a bolder number. The ink token went too: primary sits a step away from the body ink, so a
+     tinted today came out paler than its neighbours (dE00 7.2 dark, 5.7 light) while being bold —
+     emphasis pointing two ways. The number inherits the cell's ink and the ring carries the
+     accent. Background and padding went with the pill. */
   --calendar-weekly-date-label-margin: var(--margin-narrow);
-  --calendar-weekly-date-label-padding: 0px 6px;
-  --calendar-weekly-date-label-color: var(--md-sys-color-on-primary);
 
-  --calendar-weekly-background-color: #f4f4f4;
+  --calendar-weekly-background-color: var(--md-sys-color-surface-container-low);
   --calendar-weekly-event-margin: var(--padding-narrow) 0 0 0;
   --calendar-weekly-event-padding: 2px var(--padding-default);
   --calendar-weekly-event-border: 3px solid #ccc;

package/client/themes/category-color.css

@@ -0,0 +1,139 @@
+/*
+ * 분류색 여섯 — 서로 갈리라고 만든 색. 모든 앱이 여기서 가져다 쓴다.
+ *
+ * ── 왜 필요한가 (2026-09-11) ───────────────────────────────────────────────
+ * 이 저장소에는 역할색(`--md-sys-color-primary` 계열)만 있고 **서로 구별하라고 만든 색 묶음이
+ * 없었다.** 도메인 테마 한 벌의 토큰 98개 중 category · series · chart · qualitative 류가 0개다.
+ *
+ * 그래서 화면들이 역할색을 분류에 돌려썼다. `primary`·`secondary`·`tertiary` 는 **강조의 단계**이지
+ * 분류의 색이 아니고, 이 테마에서는 셋 다 검정에 가까운 숯빛이다. 공장 달력의 종류 여섯을 실측하면
+ * 이렇게 나온다.
+ *
+ * ```
+ *   ΔE00  2.4   내 일(on-secondary-container) 대 생산 계획(primary)
+ *   ΔE00  9.2   정비(tertiary) 대 생산 실적(secondary)
+ *   ΔE00 13.2   생산 계획 대 생산 실적
+ * ```
+ *
+ * 6px 점에서 ΔE00 2.4 는 같은 색이다. 목록으로 뽑아 놓으면 다 달라 보이는데 화면에서는 안 갈린다.
+ * twin 쪽은 아예 색을 화면에 박아 두었다 — kpi 를 언급하는 파일들에만 색 리터럴이 93개, 그 client
+ * 전체로는 607개다(2026-09-11 실측. 이 수는 「분류색으로 갈 것」의 수가 아니라 박힌 것의 수다 —
+ * 상태색·면색·선색이 섞여 있다). 팔레트가 없으면 각자 지어내고, 지어낸 것은 야간 모드를 안 따라간다.
+ *
+ * ── 자리는 고정, 색은 모드마다 (아키텍트 판정 2026-09-11) ──────────────────
+ * ```
+ * 자리(슬롯)   --ui-category-1 … 6      고정. 도메인 테마가 못 바꾼다
+ * 색           밝은 모드 · 어두운 모드 두 벌만 다르다
+ * ```
+ *
+ * 분류색은 꾸밈이 아니라 **부호**다. 「1번 = 휴무」를 한 번 배운 사람은 그것을 들고 다닌다. 도메인마다
+ * 다르면 같은 것을 배운 사람이 다른 공장에서 **잘못 읽는다.** 오독은 오류보다 나쁘다 — 화면이 멀쩡해
+ * 보이기 때문이다.
+ *
+ * 밝기 모드에 따라 같은 슬롯의 색이 달라지는 것은 **읽히게 하려고** 그런 것이라 허용이다. 도메인이
+ * 바꾸는 것은 허용이 아니다. 「이 도메인 바탕에서 3번이 안 보인다」가 나오면 그것은 도메인이 덮을
+ * 일이 아니라 **팔레트의 결함**이고 여기서 고친다.
+ *
+ * (이 파일은 같은 이름이면 파일 단위로 대체된다 — builder 의 ThemeOverridePlugin. 앱이 자기
+ * `category-color.css` 를 두면 팔레트가 통째로 갈린다. 두지 말 것.)
+ *
+ * ── 이름을 번호로 두는 이유 ────────────────────────────────────────────────
+ * `--ui-category-maintenance` 같은 이름을 만들면 제품마다 개념 하나에 슬롯 하나를 요구하게 되고
+ * 팔레트가 스무 개로 자란다. 번호는 「서로 갈리는 자리 여섯」이라는 사실만 말한다. **어느 종류가 몇
+ * 번을 쓰는지는 그 화면의 범례가 정한다.**
+ *
+ * ── 여섯에서 멈춘다. 모자라면 늘리지 않는다 ────────────────────────────────
+ * 8px 점에서 사람이 갈라 보는 색은 여섯 언저리에서 끝난다. 열둘을 만들면 **갈리지 않는 것이 섞여
+ * 들어오고**, 그때는 팔레트가 있으나 마나다.
+ *
+ *   종류가 팔레트보다 많아지면 **색으로 부호화하는 것을 그만둔다.** 모양 · 이름 · 묶기로 옮긴다.
+ *
+ * 그리고 **모양이 바탕이고 색은 빠르게 읽히라고 얹는 것**이다. 색이 유일한 채널이면 색각 이상인
+ * 사람에게 화면이 통째로 안 읽힌다. 공장 달력이 채움/비움 × 둥금/모남 + 막대로 다섯을 가르고 있는
+ * 것은 색이 모자라서 버티는 임시방편이 아니라 **원래 옳은 바탕이다.** 이 팔레트가 생겼다고 그 모양을
+ * 걷어내지 말 것.
+ *
+ * ── 값을 어떻게 잡았나 ─────────────────────────────────────────────────────
+ * 이 색들은 **6px 표시와 칩 테두리**로 쓰인다. 그래서 두 가지를 함께 쟀다.
+ *
+ * ```
+ * 칸 바탕과의 대비   안 보이면 없는 것과 같다
+ * 서로 간의 대비     실제 크기에서. 견본 사각형에서 재면 안 된다
+ * ```
+ *
+ * 기준 바탕은 가장 불리한 것으로 잡았다 — 어두운 색은 **가장 어두운 밝은 면**에서 가장 안 보이고,
+ * 밝은 색은 **가장 밝은 어두운 면**에서 가장 안 보인다.
+ *
+ * ```
+ * 밝은 모드 기준 바탕   rgb(238 241 243)   figure·twin — 앱들 중 가장 어두운 라이트 surface
+ * 어두운 모드 기준 바탕 rgb(56 53 43)      codelingua — 가장 밝은 다크 surface-container-highest
+ * ```
+ *
+ * ```
+ *          밝은 모드                         어두운 모드
+ *          색        기준면   흰 칸          색        기준면   어두운 칸
+ *   1 분홍  #a8306e   5.59    6.34           #ff8ab0   5.56    8.40
+ *   2 주황  #9a6206   4.49    5.09           #e0a24a   5.51    8.34
+ *   3 초록  #2d7d46   4.48    5.08           #54c977   5.84    8.83
+ *   4 청록  #0f7480   4.83    5.48           #4ec7d1   6.08    9.20
+ *   5 파랑  #2b5fc4   5.23    5.94           #8cb2ff   5.80    8.77
+ *   6 보라  #66339f   7.29    8.27           #c79bef   5.47    8.27
+ * ```
+ *
+ * 표시로 쓰기만 하면 3:1(WCAG 1.4.11)이면 되는데 전부 4.48 이상이다. 범례의 글자색으로 써도 AA 를
+ * 넘긴다는 뜻이고, 그래야 「점과 그 이름」을 같은 색으로 둘 수 있다.
+ *
+ * 서로 간의 색차는 가장 가까운 쌍이 **밝은 모드 ΔE00 18.9 · 어두운 모드 19.1**(둘 다 파랑-보라)이다.
+ * 지금 공장 달력의 가장 가까운 쌍이 2.4 였다.
+ *
+ * ── 빨강이 없는 것은 실수가 아니다 ─────────────────────────────────────────
+ * 1번은 처음에 빨강(#c0392b)이었다. 그런데 그 값과 이 제품의 error 색을 재면 이렇게 나온다.
+ *
+ * ```
+ *   ΔE00  2.5   분류 1 #c0392b  대  공장 화면의 error rgb(201,63,48)
+ *   ΔE00  8.7   분류 1(다크)    대  다크 error #fbafa9
+ * ```
+ *
+ * **이 팔레트를 만들게 한 그 수(2.4)와 같은 자리다.** 한 화면에 종류 1과 오류가 같이 나오면 빨강이
+ * 두 뜻을 갖고, 「빨강은 나쁜 것」이라는 사람들이 이미 아는 규칙이 그 화면에서만 안 맞는다. 공장
+ * 달력이 정확히 그 화면이다 — 휴무가 error 이고 종류 점들이 그 옆에 선다.
+ *
+ * 「상태색이 나오는 화면에서는 1번을 쓰지 않는다」는 규칙을 붙이는 길도 있었다. 그 길을 안 간 이유는
+ * **규칙은 화면마다 지켜야 하고, 안 지켜도 아무 신호가 없기 때문이다.** 색 하나를 포기하는 값이 그
+ * 규칙을 영원히 지키는 값보다 싸다.
+ *
+ * 그래서 빨강 자리를 분홍으로 옮겼다. 색상환에서 보라와 주황 사이의 빈 자리라 여섯이 그대로 남는다.
+ * 지금 error 와 가장 가까운 슬롯이 밝은 모드 ΔE00 24.2 · 어두운 모드 14.0 이다.
+ *
+ *   **빨강은 상태의 것이다. 분류가 빌려 쓰지 않는다.**
+ *
+ * 순서는 색상환 차례다(분홍 → 보라). 어느 화면이 셋만 쓰더라도 1·2·3 을 집으면 서로 멀다.
+ */
+
+/* 테마 클래스가 붙기 전 · 붙지 않는 앱을 위한 기본값. 밝은 모드와 같다. */
+:root {
+  --ui-category-1: #a8306e;
+  --ui-category-2: #9a6206;
+  --ui-category-3: #2d7d46;
+  --ui-category-4: #0f7480;
+  --ui-category-5: #2b5fc4;
+  --ui-category-6: #66339f;
+}
+
+.light {
+  --ui-category-1: #a8306e;
+  --ui-category-2: #9a6206;
+  --ui-category-3: #2d7d46;
+  --ui-category-4: #0f7480;
+  --ui-category-5: #2b5fc4;
+  --ui-category-6: #66339f;
+}
+
+.dark {
+  --ui-category-1: #ff8ab0;
+  --ui-category-2: #e0a24a;
+  --ui-category-3: #54c977;
+  --ui-category-4: #4ec7d1;
+  --ui-category-5: #8cb2ff;
+  --ui-category-6: #c79bef;
+}

package/client/themes/grist-theme.css

@@ -54,11 +54,16 @@ body {
   --grid-record-emphasized-background-color: var(--md-sys-color-secondary-container);
   --grid-record-emphasized-color: var(--md-sys-color-on-secondary-container);
   --grid-record-editing-background-color: var(--md-sys-color-inverse-primary);
-  --grid-record-editing-border: 1px dashed rgba(var(--md-sys-color-primary-rgb), 0.4);
+  /* --md-sys-color-primary-rgb is defined nowhere in this repo, so rgba() got an invalid
+     argument and the whole declaration was dropped — this token came out empty and the row
+     being edited had no border at all. color-mix takes the colour itself.
+     [확인함] 2026-09-11 computed border was 0px none; with a literal rgba it draws. */
+  --grid-record-editing-border: 1px dashed color-mix(in srgb, var(--md-sys-color-primary) 40%, transparent);
   --grid-record-fontsize: var(--md-sys-typescale-label-large-size, 0.875rem);
   --grid-record-border-bottom: var(--grid-container-border-color);
 
-  --grid-record-dirty-border-top: 24px solid rgba(var(--md-sys-color-primary-rgb), 0.6);
+  /* Same undefined token — the marker that says a record is unsaved was not drawn either. */
+  --grid-record-dirty-border-top: 24px solid color-mix(in srgb, var(--md-sys-color-primary) 60%, transparent);
   --grid-record-dirty-border-left: 24px solid transparent;
   --grid-record-dirty-icon-font: bold 10px/12px var(--md-icon-font, 'Material Symbols Outlined');
   --grid-record-dirty-icon-size: var(--fontsize-large);