Tailwind 를 안 쓰는 정적 HTML 대시보드가 회사 디자인을 그대로 쓰기 위한 배포본이다.
theme.css 의 @theme 는 Tailwind 전용 at-rule 이라 브라우저가 못 읽는다 —
그래서 :root 로 변환한 사본을 여기서 제공한다.
토큰을 페이지에 손으로 베끼지 마라. 베끼는 순간 갈라진다.
붙이는 법 — 세 줄
<link rel="stylesheet" href="https://vendit-ds.pages.dev/v1.css"> <script src="https://vendit-ds.pages.dev/v1.js" defer></script> <header data-ds-appbar data-title="쿼리 상황판"></header> <main class="wrap"> … </main>
v1.js 가 앱바를 만든다 — 보라 로고, 로고 클릭 → Access 런처,
테마 토글, 스크롤 그림자. 페이지마다 다르게 생길 여지를 없앤다.
앱바 우측에 검색창 같은 걸 넣고 싶으면 <header data-ds-appbar> 안에 그냥 써 넣으면 된다.
브랜드 · 상태
프리미티브
이름은 React 쪽 @vendit/admin-ui 와 같아야 한다. 두 벌이 갈라지면
같은 컴포넌트를 페이지마다 다르게 부르게 된다 — 실제로 그랬다.
맨 btn 은 보라 채움이다. 중립 버튼은 class="btn btn-secondary" —
두 페이지가 맨 btn 을 중립 버튼 뜻으로 쓰고 있었고, 아무도 못 잡았다.
btn-outline 은 btn-secondary 의 옛 이름이다(쓰지 마라).
배지는 의미 이름을 쓴다(React badge.tsx 와 동일).
색 이름 badge-green·-red·-blue·-amber 는
이관용 별칭으로 살아있을 뿐, 새로 쓰면 안 된다.
badge-orange 만 React 에 짝이 없는 정적 전용이다.
탭 vs 세그먼트 — 역할이 다르다
밑줄 탭은 "지금 뭘 보고 있나", pill 세그먼트는 "그걸 어떻게 보고 있나". 이 구분이 없어서 어떤 페이지는 최상위 뷰 전환에 pill 을 썼다. 헷갈리면 밑줄이 기본이다.
KPI 타일
간격 스케일
정적 페이지엔 Tailwind 간격이 없어서 눈대중 px 가 박혔다. 이제 이것만 쓴다.
| 변수 | 값 | 쓰는 곳 |
|---|---|---|
--sp-2 | 8px | 칩·뱃지 사이, 인라인 요소 간격 |
--sp-3 | 12px | 카드 그리드 gap, 테이블 셀 좌우 |
--sp-4 | 16px | 카드 안쪽 여백, 앱바 요소 간격 |
--sp-6 | 24px | 섹션 사이, 본문 좌우 여백 |
--sp-8 | 32px | 큰 섹션 분리 |
고칠 때
cd ~/projects/admin-ui vi theme.css # ← 토큰은 여기만 고친다 node scripts/build-static-css.mjs # v1.css / v1.js 재생성 npx wrangler pages deploy static --project-name vendit-ds --branch main # 5분 안에 모든 정적 대시보드에 반영된다 (max-age=300)