File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
// 디자인 시스템 카탈로그 스타일.
//
// 토큰 목록은 이 파일이 아니라 **CSSOM에서 런타임에 읽는다**(`_components/token-catalog.tsx`).
// SCSS 값을 JS로 내보내는 CSS Modules의 `:export`를 처음 썼으나, Next.js 16의 기본
// 번들러인 Turbopack은 Lightning CSS로 CSS를 파싱해 `:export`(webpack css-loader 시절의
// ICSS 확장)를 인식하지 못한다 — 빌드는 통과하지만 규칙이 통째로 버려져 값이 `undefined`가
// 된다. `--fox-*` 커스텀 프로퍼티를 CSSOM에서 직접 열거하면 같은 목적을 번들러 의존 없이
// 달성한다.
@use "@fox/styles/abstracts" as fox;
.page {
flex: 1;
padding: fox.spacing(top-lg) fox.grid(margin-default) fox.spacing(bottom-xlg);
}
.header {
display: flex;
flex-wrap: wrap;
gap: fox.gap(5);
align-items: baseline;
justify-content: space-between;
padding-block-end: fox.padding(7);
border-block-end: fox.border(1) solid fox.color(border-neutral-default);
}
.title {
font-size: fox.font-size(heading-lg);
font-weight: fox.font-weight(bold);
}
.lede {
margin-block-start: fox.gap(2);
color: fox.color(font-neutral-subtle);
font-size: fox.font-size(body-md);
}
// ── 테마 전환 ───────────────────────────────────────────────────────────────
.themeSwitch {
display: flex;
gap: fox.gap(1);
padding: fox.padding(1);
border: fox.border(1) solid fox.color(border-neutral-default);
border-radius: fox.radius(max);
background: fox.color(surface-neutral-gray);
}
.themeButton {
padding: fox.padding(3) fox.padding(6);
border-radius: fox.radius(max);
color: fox.color(font-neutral-subtle);
font-size: fox.font-size(label-sm);
font-weight: fox.font-weight(medium);
&[aria-pressed="true"] {
background: fox.color(button-primary-surface);
color: fox.color(button-primary-font);
}
&:focus-visible {
outline: fox.border(2) solid fox.color(border-theme-primary);
outline-offset: fox.border(2);
}
}
// ── 섹션 ────────────────────────────────────────────────────────────────────
.section {
padding-block: fox.section(spacing-xsm);
border-block-end: fox.border(1) solid fox.color(border-neutral-subtle);
}
.sectionTitle {
margin-block-end: fox.gap(1);
font-size: fox.font-size(heading-sm);
font-weight: fox.font-weight(bold);
}
.sectionNote {
margin-block-end: fox.gap(5);
color: fox.color(font-neutral-subtle);
font-size: fox.font-size(body-sm);
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(fox.grid(wrap-xsm), 1fr));
gap: fox.gap(4);
@include fox.pc {
grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
}
}
// ── 색상 스와치 ─────────────────────────────────────────────────────────────
.swatch {
overflow: hidden;
border: fox.border(1) solid fox.color(border-neutral-subtle);
border-radius: fox.radius(3);
background: fox.color(surface-neutral-default);
}
.swatchChip {
block-size: fox.icon(7);
border-block-end: fox.border(1) solid fox.color(border-neutral-overlay);
}
.swatchMeta {
padding: fox.padding(5);
}
.name {
display: block;
color: fox.color(font-neutral-default);
font-size: fox.font-size(label-sm);
font-weight: fox.font-weight(medium);
word-break: break-all;
}
.ref {
display: block;
margin-block-start: fox.gap(1);
color: fox.color(font-neutral-subtler);
font-size: fox.font-size(body-xsm);
word-break: break-all;
}
// ── 값 테이블 ───────────────────────────────────────────────────────────────
.table {
inline-size: 100%;
border-collapse: collapse;
text-align: start;
}
.table th,
.table td {
padding: fox.padding(3) fox.padding(5);
border-block-end: fox.border(1) solid fox.color(border-neutral-subtle);
}
.table th {
color: fox.color(font-neutral-subtle);
font-size: fox.font-size(label-xsm);
font-weight: fox.font-weight(medium);
}
.table td {
color: fox.color(font-neutral-default);
font-size: fox.font-size(body-sm);
}
.tdValue {
color: fox.color(font-neutral-subtle);
}
// 크기 토큰을 눈으로 비교하기 위한 막대. 폭은 인라인 style이 토큰을 참조해 넣는다.
.bar {
display: block;
block-size: fox.icon(2);
border-radius: fox.radius(1);
background: fox.color(surface-theme-primary);
}