style(storybook): unify content hierarchy and section spacing
- Story page frame: H2 16/24/700 -> 12px -> divider -> 16px -> content, sections 28px apart;
StorySectionGrid keeps its 24px column gap
- Content indent (--sb-page-indent 16px, 12px at 640px and below): .sb-page-indent for information
blocks; group boards (StateBoard / CardBoard, data-sb-board) indented once per section block so
per-column boards keep their 24px gap
- Input / Select / Toggle Sizes grids take the same indent; field Labels unchanged
- Full-width Pattern previews (GNB, LNB, Loading Screen, Page Header) opt out with indent={false}
- Foundation/폰트: Text Colors name / usage / HEX levels, Font Family and Font Weight token lines,
Specimens row spacing and indent; specimen values unchanged
- Guideline and WORKING_CONTEXT updated
This commit is contained in:
1 parent
15c64b0003
commit
3e97cd0b2d
14 files changed
+89
-30
No files matched your search
@@ -1,5 +1,14 @@
|
||||
# Working Context
|
||||
|
||||
## 2026-11-11 — Storybook 섹션 간격·정보 영역 들여쓰기 공통화, Foundation 폰트 위계 (main 기준, 미커밋)
|
||||
|
||||
- 공통 프레임 `src/components/story-page.css`: H2 16/24/700 → 12px → 구분선 → 16px → 콘텐츠(섹션 헤더 padding-bottom 8→12, margin-bottom 12→16), 섹션 사이 `--sb-page-section-gap` 24→28px. `StorySectionGrid`는 row gap만 이 변수를 따르고 column gap 24px은 유지(Chart 2열 미리보기 폭 불변). SW `sw-story-stack`·Footer 너비 행, Foundation Layout도 변수로 28px.
|
||||
- 선택 들여쓰기 `.sb-page-indent`(`--sb-page-indent` 16px, 640px 이하 12px, `padding-left`): 문서 텍스트·사양 표 같은 정보 블록에만 붙인다. 실제 컴포넌트·Pattern·Chart·OrgChart·SW·CENTER 미리보기와 테두리 있는 카드/칩 Grid(한맥·가족사 컬러, Layout, Text Colors)는 들여쓰지 않는다. 현재 사용처는 Foundation/폰트의 Font Family·Font Weight·Specimens.
|
||||
- `StateBoard` H3 라벨 14/20/500 보조색·행 간격 24px 유지(주석만 갱신). 좌우·상단 여백, 접근성 H1, Story ID 불변.
|
||||
- Foundation/폰트(`typography.stories.tsx`, `foundation.css`): Text Colors 칩을 이름(14/700 Primary)·용도(14/400 Secondary)·HEX(12/18/400 Secondary) 3줄로 분리, Font Family 이름+대체 폰트 / CSS 변수 2줄, Font Weight CSS 변수 12px, Specimens 행 위·아래 12px·열 오른쪽 16px·고정폭 숫자. 실제 샘플 스펙(10개)은 불변. 전용 간격 덮어쓰기(`.hm-typo-page`)는 공통 규칙으로 대체해 제거.
|
||||
- 기준 문서: `docs/guidelines/프로젝트-지침.md` §6 Storybook 페이지 프레임 항목.
|
||||
- 하위 그룹 들여쓰기(같은 날 후속): `StateBoard`(`StorySection` 안)·Card `CardBoard`는 `data-sb-board`만 표시하고, `story-page.css`의 `.sb-page-section-body > :is([data-sb-board], :has([data-sb-board]))`가 섹션 본문 직계 블록에 한 번만 `--sb-page-indent`(16px, 640px 이하 12px)를 준다. Story 전용 Grid의 열마다 단일 보드를 둔 34개 Story의 열별 중복 들여쓰기(보이는 그룹 간격 40px)를 제거해 24px 복원. Input·Select·Toggle Sizes Grid는 `.sb-page-indent`(Input·Select의 Small/Medium/Large는 필드 Label #212121 유지). 전체 폭 Pattern 4개(GNB·LNB·Loading Screen·Page Header)는 `indent={false}`, Toggle Group(내부 검증·라벨 없음)과 단일 미리보기는 제외. 섹션 제목 X(1024/1440 60px, 390 16px) 불변, 첫 그룹 X 76px / 28px.
|
||||
|
||||
## 2026-11-11 — Admin 텍스트 컬러 위계·Foundation Gray (브랜치 `style/admin-text-gray-hierarchy`, 미커밋)
|
||||
|
||||
- Theme: `themes/default.json`에 `color.palette.gray-900|800|700|600|500`(#212121·#424242·#616161·#757575·#9E9E9E) 추가, `color.fg.primary|secondary|placeholder` 기본값을 #212121 / #616161 / #757575로 변경. 템플릿 텍스트 alias만 Gray를 가리키고 브랜드 Primitive 값은 불변. `contract.ts` 공개 키 5개 추가(기존 키 불변). 생성물은 `generate:theme-defaults`.
|
||||
|
||||
Reference in new issue
Block a user