style(admin): unify text color hierarchy with foundation gray

packages/ui/ai/DESIGN_RULES.md

@@ -12,13 +12,14 @@
 | 역할 | 값 | 변수 |
 |---|---|---|
 | Green(주색) | `#164434` | `--hm-sem-palette-green-default` |
-| Green 진한 글자 | `#11372D` | `--hm-sem-palette-green-dark-1` |
+| Green Dark 1 | `#11372D` | `--hm-sem-palette-green-dark-1` (브랜드 gradient·테두리. 글자 기본값 아님) |
 | Green Focus·Active | `#266651` | `--hm-sem-palette-green-light-2` |
 | Green Tint(강조 면) | `#BDDFD4` | `--hm-sem-palette-green-tint` |
 | Beige(콘텐츠 면) | `#F5F0E5` | `--hm-sem-palette-beige-light` |
 | Warm neutral | dark `#6E6759`, mid `#9A9284`, pale `#DEDBD2`, muted `#F4F1EA` | `--hm-sem-palette-warm-neutral-dark` / `-mid` / `-pale` / `-muted` |
 | Red | `#D32F2F` | `--hm-sem-palette-red-danger` |
-| Gray placeholder | `#999999` | `--hm-sem-palette-neutral-gray-500` |
+| Foundation Gray(글자) | 900 `#212121`, 800 `#424242`, 700 `#616161`, 600 `#757575`, 500 `#9E9E9E` | `--hm-sem-palette-gray-900` / `-800` / `-700` / `-600` / `-500` |
+| Neutral gray(호환) | `#999999` | `--hm-sem-palette-neutral-gray-500` — 기본 연결 없음 |
 | White / Black | `#FFFFFF` / `#000000` | `--hm-sem-palette-white` / `--hm-sem-palette-black` |
 
 Brown·Orange 계열 팔레트(`--hm-sem-palette-brown-*`, `--hm-sem-palette-orange-*`)도 선언되어 있으며 Button `secondary`(Brown)·`modify`(Orange) 역할에 쓰입니다. 새 UI는 팔레트보다 §2의 Semantic 변수를 우선합니다.
@@ -31,9 +32,9 @@ Brown·Orange 계열 팔레트(`--hm-sem-palette-brown-*`, `--hm-sem-palette-ora
 | 카드·팝업 표면 | `--hm-sem-bg-surface` | White |
 | 보조 면 | `--hm-sem-bg-subtle` | warm-neutral-muted |
 | 브랜드 배경(gradient) | `--hm-sem-bg-brand`, `--hm-sem-bg-brown`, `--hm-sem-bg-orange` | 공통 세로 gradient 배경(소비 화면 배경용). 패키지 컴포넌트(GNB·Button·Dashboard)에는 자동 연결되지 않음 — GNB 면은 `--hm-gnb-background`(저장소 `docs/guidelines/runtime-theme-contract.md` "Brown·Orange 공통 Background") |
-| 기본 글자 | `--hm-sem-fg-primary` | green-dark-1 |
-| 보조 글자 | `--hm-sem-fg-secondary` | warm-neutral-dark |
-| placeholder | `--hm-sem-fg-placeholder` | gray-500 |
+| 기본 글자(제목·본문) | `--hm-sem-fg-primary` | gray-900 `#212121` |
+| 보조 글자(설명·Label·캡션) | `--hm-sem-fg-secondary` | gray-700 `#616161` |
+| placeholder | `--hm-sem-fg-placeholder` | gray-600 `#757575`(흰 면 전용, 베이지 면에서는 보조 글자) |
 | 일반 테두리 | `--hm-sem-stroke-default` | warm-neutral-mid |
 | 입력 테두리 | `--hm-sem-stroke-input-default` | warm-neutral-pale |
 | Focus 테두리 | `--hm-sem-stroke-input-focus` | green-light-2 |

packages/ui/src/theme/combobox.css

@@ -19,8 +19,8 @@
 
   --hm-combobox-background: var(--hm-sem-bg-surface);
   --hm-combobox-text: var(--hm-sem-fg-primary);
-  /* Readable empty-value guidance on the white trigger; preserve shared tokens. */
-  --hm-combobox-placeholder: var(--hm-sem-fg-secondary);
+  /* Shared placeholder (Gray 600, 4.61:1 on the white trigger) since 2026-11-11; was fg-secondary for contrast. */
+  --hm-combobox-placeholder: var(--hm-sem-fg-placeholder);
   --hm-combobox-border-color: var(--hm-sem-stroke-input-default);
   --hm-combobox-focus-border-color: var(--hm-sem-stroke-input-focus);
   --hm-combobox-seam-color: var(--hm-sem-stroke-input-default);

packages/ui/src/theme/contract.ts

@@ -98,6 +98,12 @@ export const runtimeThemeContract = {
   "color.palette.orange-dark-1": { property: "--hm-sem-palette-orange-dark-1", defaultValue: runtimeThemeDefaults["--hm-sem-palette-orange-dark-1"], type: "color" },
   "color.palette.orange-dark-2": { property: "--hm-sem-palette-orange-dark-2", defaultValue: runtimeThemeDefaults["--hm-sem-palette-orange-dark-2"], type: "color" },
   "color.palette.orange-dark-3": { property: "--hm-sem-palette-orange-dark-3", defaultValue: runtimeThemeDefaults["--hm-sem-palette-orange-dark-3"], type: "color" },
+// Foundation Gray text steps (Admin Web / Chart text hierarchy, 2026-11-11). Additive; existing keys unchanged.
+  "color.palette.gray-900": { property: "--hm-sem-palette-gray-900", defaultValue: runtimeThemeDefaults["--hm-sem-palette-gray-900"], type: "color" },
+  "color.palette.gray-800": { property: "--hm-sem-palette-gray-800", defaultValue: runtimeThemeDefaults["--hm-sem-palette-gray-800"], type: "color" },
+  "color.palette.gray-700": { property: "--hm-sem-palette-gray-700", defaultValue: runtimeThemeDefaults["--hm-sem-palette-gray-700"], type: "color" },
+  "color.palette.gray-600": { property: "--hm-sem-palette-gray-600", defaultValue: runtimeThemeDefaults["--hm-sem-palette-gray-600"], type: "color" },
+  "color.palette.gray-500": { property: "--hm-sem-palette-gray-500", defaultValue: runtimeThemeDefaults["--hm-sem-palette-gray-500"], type: "color" },
 } as const
 
 export type RuntimeThemeToken = keyof typeof runtimeThemeContract

packages/ui/src/theme/date-picker.css

@@ -19,8 +19,8 @@
 
   --hm-date-picker-background: var(--hm-sem-bg-surface);
   --hm-date-picker-text: var(--hm-sem-fg-primary);
-  /* Readable empty-value guidance on the white trigger; preserve shared tokens. */
-  --hm-date-picker-placeholder: var(--hm-sem-fg-secondary);
+  /* Shared placeholder (Gray 600, 4.61:1 on the white trigger) since 2026-11-11; was fg-secondary for contrast. */
+  --hm-date-picker-placeholder: var(--hm-sem-fg-placeholder);
   --hm-date-picker-border-color: var(--hm-sem-stroke-input-default);
   --hm-date-picker-focus-border-color: var(--hm-sem-stroke-input-focus);
   --hm-date-picker-icon-size: 18px;

packages/ui/src/theme/default-values.generated.ts

@@ -3,9 +3,9 @@
 export const runtimeThemeDefaults = {
   "--hm-sem-bg-content": "#f5f0e5",
   "--hm-sem-bg-surface": "#ffffff",
-  "--hm-sem-fg-primary": "#11372d",
-  "--hm-sem-fg-secondary": "#6e6759",
-  "--hm-sem-fg-placeholder": "#999999",
+  "--hm-sem-fg-primary": "#212121",
+  "--hm-sem-fg-secondary": "#616161",
+  "--hm-sem-fg-placeholder": "#757575",
   "--hm-sem-action-primary": "#164434",
   "--hm-sem-action-cancel": "#6e6759",
   "--hm-sem-action-destructive": "#d32f2f",
@@ -94,5 +94,10 @@ export const runtimeThemeDefaults = {
   "--hm-sem-palette-orange-light-1": "#eb5f00",
   "--hm-sem-palette-orange-dark-1": "#bc4c00",
   "--hm-sem-palette-orange-dark-2": "#883700",
-  "--hm-sem-palette-orange-dark-3": "#4f2000"
+  "--hm-sem-palette-orange-dark-3": "#4f2000",
+  "--hm-sem-palette-gray-900": "#212121",
+  "--hm-sem-palette-gray-800": "#424242",
+  "--hm-sem-palette-gray-700": "#616161",
+  "--hm-sem-palette-gray-600": "#757575",
+  "--hm-sem-palette-gray-500": "#9e9e9e"
 } as const

packages/ui/src/theme/default.css

@@ -9,10 +9,11 @@
   --hm-color-surface-default: var(--hm-sem-palette-white);
   --hm-color-surface-content: var(--hm-sem-palette-beige-light);
   --hm-color-surface-subtle: var(--hm-sem-palette-warm-neutral-muted);
-  --hm-color-text-primary: var(--hm-sem-palette-green-dark-1);
-  --hm-color-text-secondary: var(--hm-sem-palette-warm-neutral-dark);
+  /* Admin text hierarchy (2026-11-11): Primary Gray 900, Secondary Gray 700, Placeholder Gray 600. Brand primitives keep their values. */
+  --hm-color-text-primary: var(--hm-sem-palette-gray-900);
+  --hm-color-text-secondary: var(--hm-sem-palette-gray-700);
   --hm-color-text-inverse: var(--hm-sem-palette-white);
-  --hm-color-text-placeholder: var(--hm-sem-palette-neutral-gray-500);
+  --hm-color-text-placeholder: var(--hm-sem-palette-gray-600);
   --hm-color-border-default: var(--hm-sem-palette-warm-neutral-mid);
   --hm-color-border-control: var(--hm-sem-palette-warm-neutral-pale);
   /* Common Focus color. Trial value: Light 2 (#266651), pending user confirmation. Was --hm-color-primary. */
@@ -237,3 +238,12 @@
   --hm-sem-palette-orange-dark-2: var(--hm-orange-dark-2);
   --hm-sem-palette-orange-dark-3: var(--hm-orange-dark-3);
 }
+
+/* Foundation Gray text steps; only the text aliases above reference them. */
+:root, [data-hm-theme] {
+  --hm-sem-palette-gray-900: var(--hm-gray-900);
+  --hm-sem-palette-gray-800: var(--hm-gray-800);
+  --hm-sem-palette-gray-700: var(--hm-gray-700);
+  --hm-sem-palette-gray-600: var(--hm-gray-600);
+  --hm-sem-palette-gray-500: var(--hm-gray-500);
+}

packages/ui/src/theme/input.css

@@ -99,6 +99,8 @@
   border-width: 0;
   padding-inline: 0;
   background: transparent;
+  /* Transparent face can sit on the beige content surface, where Gray 600 is below 4.5:1. */
+  --hm-input-placeholder: var(--hm-sem-fg-secondary);
 }
 [data-slot="input"][readonly]:focus-visible {
   border-width: 0;

packages/ui/src/theme/primitives.css

@@ -58,3 +58,12 @@
   --hm-orange-dark-2: #883700;
   --hm-orange-dark-3: #4f2000;
 }
+
+/* Foundation Gray text steps (2026-11-11). Admin text hierarchy only; SW keeps its own tokens. */
+:root {
+  --hm-gray-900: #212121;
+  --hm-gray-800: #424242;
+  --hm-gray-700: #616161;
+  --hm-gray-600: #757575;
+  --hm-gray-500: #9e9e9e;
+}