File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
08-19
// 개발 전용 테스트 페이지 스타일.
//
// 이 파일 자체가 토큰 규율의 첫 소비처다 — 여기 있는 모든 값은 `fox.*()` 함수를 거치므로,
// 없는 토큰을 쓰면 빌드가 실패한다. 페이지가 그려진다는 것은 사용된 토큰이 전부 실재한다는
// 뜻이기도 하다.
@use "@fox/styles/abstracts" as fox;
.shell {
display: grid;
grid-template-columns: 1fr;
min-block-size: 100dvh;
background: fox.color(background-default);
color: fox.color(font-neutral-default);
@include fox.pc {
// 화면을 넘지 않게 못박고 스크롤은 두 칸이 각자 갖는다.
block-size: 100dvh;
grid-template-columns: 26rem 1fr;
overflow: hidden;
}
}
.loading {
padding: fox.padding(8);
color: fox.color(font-neutral-subtle);
font-size: fox.font-size(body-md);
}
// ── 사이드바 ────────────────────────────────────────────────────────────────
.sidebar {
display: flex;
flex-direction: column;
gap: fox.gap(5);
padding: fox.padding(7);
border-block-end: fox.border(1) solid fox.color(border-neutral-subtle);
background: fox.color(surface-neutral-gray);
@include fox.pc {
min-block-size: 0;
overflow-y: auto;
border-block-end: 0;
border-inline-end: fox.border(1) solid fox.color(border-neutral-subtle);
}
}
.brand {
display: flex;
flex-direction: column;
gap: fox.gap(1);
}
.brandTitle {
font-size: fox.font-size(heading-sm);
font-weight: fox.font-weight(bold);
}
.brandNote {
color: fox.color(font-neutral-subtler);
font-size: fox.font-size(label-xsm);
}
.nav {
display: flex;
flex-direction: column;
gap: fox.gap(6);
}
.navGroup {
display: flex;
flex-direction: column;
gap: fox.gap(2);
}
.navGroupTitle {
padding-inline: fox.padding(3);
color: fox.color(font-neutral-subtler);
font-size: fox.font-size(label-xsm);
font-weight: fox.font-weight(bold);
letter-spacing: 0.04em;
}
// Mode / Responsive 처럼 하위 항목을 묶는 분류.
.navSubGroup {
display: flex;
flex-direction: column;
gap: fox.gap(1);
margin-block-start: fox.gap(2);
}
.navSubTitle {
padding-inline: fox.padding(3);
color: fox.color(font-neutral-subtler);
font-size: fox.font-size(label-xsm);
font-weight: fox.font-weight(medium);
opacity: 0.8;
}
// 3depth — 대분류(navSubTitle) 아래 소분류.
.navLeaf {
display: flex;
flex-direction: column;
gap: fox.gap(1);
margin-block-start: fox.gap(1);
padding-inline-start: fox.padding(3);
}
.navLeafTitle {
padding-inline: fox.padding(3);
color: fox.color(font-neutral-subtler);
font-size: fox.font-size(label-xsm);
font-weight: fox.font-weight(regular);
opacity: 0.7;
}
.navList {
display: flex;
flex-direction: column;
gap: fox.gap(1);
margin: 0;
padding: 0;
list-style: none;
}
.navItem {
display: flex;
inline-size: 100%;
align-items: center;
justify-content: space-between;
gap: fox.gap(3);
padding: fox.padding(3) fox.padding(4);
border-radius: fox.radius(3);
color: fox.color(font-neutral-subtle);
font-size: fox.font-size(label-sm);
text-align: start;
&:hover {
background: fox.color(button-default-surface-hover);
color: fox.color(font-neutral-default);
}
&[aria-current="page"] {
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(1);
}
}
// "추가 방법"은 컴포넌트가 아니라 안내다. 목록 맨 아래에 두고 점선 테두리로 구분해,
// 등록된 컴포넌트 탭과 같은 층위로 읽히지 않게 한다.
// `.navItem` 뒤에 와야 선택 상태(aria-current)를 덮어쓴다 — 특이도가 같아 순서가 정한다.
.navItemGuide {
margin-block-start: fox.gap(2);
border: fox.border(1) dashed fox.color(border-neutral-strong);
background: none;
color: fox.color(font-neutral-subtler);
&:hover {
border-color: fox.color(border-theme-primary);
background: none;
color: fox.color(font-theme-primary);
}
&[aria-current="page"] {
border-style: solid;
border-color: fox.color(border-theme-primary);
background: none;
color: fox.color(font-theme-primary);
}
}
.navGuideMark {
font-size: fox.font-size(label-lg);
line-height: 1;
}
// ── 본문 ────────────────────────────────────────────────────────────────────
.content {
min-inline-size: 0;
padding: fox.spacing(top-md) fox.padding(7) fox.spacing(bottom-xlg);
@include fox.pc {
min-block-size: 0;
overflow-y: auto;
}
@include fox.pc {
padding: fox.spacing(top-lg) fox.padding(11) fox.spacing(bottom-xlg);
}
}
.section {
display: flex;
flex-direction: column;
}
.sectionTitle {
font-size: fox.font-size(heading-md);
font-weight: fox.font-weight(bold);
}
.sectionNote {
margin-block: fox.gap(2) fox.gap(6);
color: fox.color(font-neutral-subtle);
font-size: fox.font-size(body-sm);
}
.code {
overflow-x: auto;
margin-block-start: fox.gap(4);
padding: fox.padding(6);
border: fox.border(1) solid fox.color(border-neutral-subtle);
border-radius: fox.radius(3);
background: fox.color(surface-neutral-gray);
color: fox.color(font-neutral-default);
font-size: fox.font-size(body-sm);
}
// ── 색상 칩 ─────────────────────────────────────────────────────────────────
// 값 앞에 붙는 16px 정사각형. 16px는 `icon-3`(1.6rem)과 같은 값이라 리터럴 대신
// 토큰을 쓴다.
// 테두리는 box-shadow로 그린다 — border는 칩 안쪽을 먹어 색이 보이는 면적을 줄인다.
.colorChip {
display: inline-block;
inline-size: fox.icon(3);
block-size: fox.icon(3);
margin-inline-end: fox.gap(3);
box-shadow: 0 0 0 fox.border(1) #{fox.color(border-neutral-overlay)};
vertical-align: middle;
}
.tokenName {
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;
}
// 다른 토큰을 가리키는 값. 실제 값과 구분되어야 "이게 참조구나"가 한눈에 보인다.
.aliasRef {
color: fox.color(font-theme-primary);
}
// 서체 토큰 미리보기 문장.
.demoType {
margin: 0;
color: fox.color(font-neutral-default);
white-space: nowrap;
}
// ── 값 테이블 ───────────────────────────────────────────────────────────────
.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-subtler);
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);
}
// 미리보기 칸은 내용만큼만 차지하게 두어 토큰/값 열이 밀리지 않게 한다.
.tdDemo {
inline-size: 1%;
white-space: nowrap;
}
// ── 패딩 · 간격 미리보기 ────────────────────────────────────────────────────
// 점선 테두리와 옅은 바탕이 "토큰이 만든 공간"이고, 흰 칩이 문단이다.
.demoPadBox,
.demoGapBox {
border: fox.border(1) dashed fox.color(border-theme-primary);
background: fox.color(surface-theme-primary);
}
.demoPadBox {
display: inline-block;
}
.demoGapBox {
display: inline-flex;
align-items: center;
}
.demoText {
margin: 0;
padding: fox.padding(1) fox.padding(3);
background: fox.color(surface-neutral-default);
color: fox.color(font-neutral-default);
font-size: fox.font-size(label-xsm);
white-space: nowrap;
}
// ── 모서리 반경 · 테두리 두께 미리보기 ──────────────────────────────────────
.demoRadius,
.demoBorder {
inline-size: fox.icon(7);
block-size: fox.icon(7);
border-color: fox.color(border-theme-primary);
border-style: solid;
background: fox.color(surface-neutral-gray);
}
.demoRadius {
border-width: fox.border(2);
}
// ── 아이콘 크기 미리보기 ────────────────────────────────────────────────────
// 브라우저 기본 체크박스를 토큰 크기로 키운다 — 별도 에셋 없이 크기만 비교한다.
.demoIcon {
display: block;
margin: 0;
accent-color: fox.color(surface-theme-primary);
}
// ── 그림자 미리보기 ─────────────────────────────────────────────────────────
// 그림자 색은 Figma에 토큰이 없어 중립 알파 토큰을 데모용으로 쓴다.
// 인라인 style이 참조할 수 있도록 여기서 커스텀 프로퍼티로 내려둔다.
.demoShadow {
--demo-shadow-color: #{fox.color(alpha-default-inverse25)};
inline-size: fox.icon(7);
block-size: fox.icon(6);
border-radius: fox.radius(2);
background: fox.color(surface-neutral-default);
}
// ── 배경 흐림 미리보기 ──────────────────────────────────────────────────────
// 캔버스 크기는 디자인 값이 아니라 데모용 지면이라 토큰을 두지 않는다.
.demoBackdrop {
position: relative;
overflow: hidden;
inline-size: 20rem;
block-size: 12rem;
border-radius: fox.radius(2);
}
.demoBackdropImage {
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.demoBackdropOverlay {
position: absolute;
inset-block: 0;
inset-inline-end: 0;
inline-size: 50%;
border-inline-start: fox.border(1) solid fox.color(border-neutral-overlay);
}
// ── 컴포넌트 예제 ───────────────────────────────────────────────────────────
.variantList {
display: flex;
flex-direction: column;
gap: fox.gap(5);
}
.variant {
display: flex;
flex-direction: column;
gap: fox.gap(2);
}
.variantLabel {
color: fox.color(font-neutral-subtler);
font-size: fox.font-size(label-xsm);
font-weight: fox.font-weight(medium);
}
// 예제를 얹는 무대. 컴포넌트 자체의 배경·여백과 섞이지 않도록 중립 표면 위에 올린다.
.variantStage {
display: flex;
flex-wrap: wrap;
gap: fox.gap(4);
align-items: center;
padding: fox.padding(7);
border: fox.border(1) solid fox.color(border-neutral-subtle);
border-radius: fox.radius(3);
background: fox.color(surface-neutral-default);
}
// 그룹 예제용. 그룹이 블록 레벨이라 정렬·줄바꿈을 보려면 폭이 정해진 무대가 필요하다.
//
// ⚠️ 세로 flex의 기본 `align-items: stretch`가 자식을 가로로 늘린다. 인라인 컨트롤
// (`inline-flex`·`inline-block`인 것들)을 여러 줄로 쌓아 비교할 때는 아래 `demoStackStart`를
// 쓴다 — 이걸 쓰면 컴포넌트가 제 폭을 잃어 실제 모습과 다르게 보인다.
.demoStack {
display: flex;
flex-direction: column;
gap: fox.gap(4);
inline-size: 100%;
}
// 인라인 컨트롤을 세로로 쌓아 비교할 때. 자식이 늘어나지 않아 제 폭 그대로 보인다.
.demoStackStart {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: fox.gap(4);
}
.demoOutline {
padding: fox.padding(3);
border: fox.border(1) dashed fox.color(border-neutral-subtle);
border-radius: fox.radius(2);
inline-size: 100%;
}
// 폼 컨트롤 예제용. FoxSelect는 폭을 부모가 정하므로 무대가 폭을 줘야 크기 비교가 된다.
// 칸 너비는 디자인 값이 아니라 데모용 지면이라 토큰을 두지 않는다.
.demoFields {
display: flex;
flex-wrap: wrap;
gap: fox.gap(5);
align-items: start;
inline-size: 100%;
> * {
inline-size: 28rem;
max-inline-size: 100%;
}
}
// 옵션 목록 단독 예제용. 목록이 `position: absolute`라 위치 기준이 필요하고, 자기 높이를
// 차지하지 않으므로 아래쪽 여백으로 펼쳐질 자리를 만들어 준다. 높이 0이면 목록이 무대
// 맨 위에서 시작한다. 치수는 데모용 지면이라 토큰을 두지 않는다.
.demoListboxStage {
position: relative;
inline-size: 28rem;
max-inline-size: 100%;
block-size: 0;
margin-block-end: 22rem;
}
// wrap 예제는 자식이 확실히 넘치도록 좁아야 한다.
.demoNarrow {
padding: fox.padding(3);
border: fox.border(1) dashed fox.color(border-neutral-subtle);
border-radius: fox.radius(2);
inline-size: 20rem;
max-inline-size: 100%;
}
// 입력 예제용. 시안 폭(360px)에 맞춰야 실제 비율로 보인다.
.demoField {
inline-size: 36rem;
max-inline-size: 100%;
}
// 이메일은 세 칸이라 360px에서는 계속 줄이 넘어간다. 넓게 볼 무대를 따로 둔다.
.demoFieldWide {
inline-size: 80rem;
max-inline-size: 100%;
}
// 캐러셀 조각은 흰 알약이라 흰 바탕에서는 보이지 않는다 — 시안처럼 어두운 판 위에 올린다.
.carouselStage {
display: flex;
flex-wrap: wrap;
gap: fox.gap(5);
align-items: center;
padding: fox.padding(6);
border-radius: fox.radius(3);
background: fox.color(surface-neutral-gray-stronger);
}
// 조합을 한 줄에 늘어놓고 비교할 때. 좁아지면 줄이 넘어간다.
.demoRow {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: fox.gap(3);
}
// 정렬 가능한 머리칸 — 글자 옆에 위아래 화살표가 붙는다.
.tableSortHead {
display: inline-flex;
align-items: center;
gap: fox.gap(2);
white-space: nowrap;
> svg {
inline-size: fox.icon(3);
block-size: fox.icon(3);
color: fox.color(icon-neutral-default);
}
}