File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
08-14
08-14
08-14
08-14
08-14
08-14
// FoxCheckbox — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
// Figma checkbox
//
// 체크박스 한 칸이다 — 네모 표시(`fox-check-icon`) + 라벨 + 부가설명.
//
// 마크업 계약 (React 밖 소비자용):
// <label class="fox-checkbox fox-checkbox--lg">
// <input type="checkbox" class="fox-checkbox__input" name="terms" value="privacy">
// <span class="fox-check-icon fox-check-icon--lg">…svg…</span>
// <span class="fox-checkbox__body">
// <span class="fox-checkbox__label">라벨</span>
// <span class="fox-checkbox__description">부가 설명</span> <!-- 선택 -->
// </span>
// </label>
//
// 루트가 `<label>`이라 어디를 눌러도 브라우저가 선택을 처리한다. 상태는 전부 네이티브
// `<input type="checkbox">`가 소유한다(규약 3).
//
// 라디오와 다른 점은 **여러 개를 동시에 고를 수 있다**는 것뿐이다. `name`이 같아도 서로를
// 끄지 않으므로 그룹이 단일 선택을 강제하지 않고, 폼 전송 시 고른 것들이 함께 나간다.
//
// ⚠️ 부분선택(`:indeterminate`)은 HTML 속성이 아니라 DOM 프로퍼티다. 마크업만으로는 켤 수
// 없고 `el.indeterminate = true` 한 줄이 필요하다 — React 밖 소비자가 알아야 할 지점이다.
//
// input은 순서상 **맨 앞**에 와야 한다. 네모 표시와 본문이 `~` 형제 선택자로 그 상태를
// 따라가기 때문이다. 시각적으로만 숨기고 포커스는 살려 둔다 — `display: none`으로 지우면
// 키보드로 도달할 수 없다.
//
// 라벨 서체는 시안 확인 완료(body/lg·body/md · font-neutral-strong · 150% · -0.025em).
// ⚠️ 부가설명의 서체는 시안 미확인이라 `fox-radio`와 같은 값으로 맞췄다.
//
// 토큰이 아닌 값(FoxButton과 동일한 근거로 승인된 항목):
// - line-height / letter-spacing: 라벨·부가설명의 시안 텍스트 스타일 값이나 Figma가 변수로
// export하지 않는다.
//
// 토큰이 아닌 값(사용자 승인):
// - 아이콘의 위쪽 여백 `0.1rem`(1px): 시안 icon-area의 `padding-top` 값이고 변수로 바인딩
// 되어 있지 않다. 크기·브레이크포인트가 바뀌어도 필요한 보정이 0.75~1.25px 범위라 하나로
// 쓴다(1rem = 10px).
// - cursor / display / flex / position: 구조·상호작용 규칙.
// - 숨긴 input의 `inline-size: 0`: 크기가 아니라 "보이지 않게" 하는 구조 값이다.
@use "@fox/styles/abstracts" as fox;
.fox-checkbox {
// 숨긴 input의 위치 기준. 안 주면 input이 조상까지 올라가 엉뚱한 곳에 붙는다.
position: relative;
display: flex;
// 부가설명이 여러 줄이어도 네모 표시는 첫 줄에 붙어 있어야 한다.
align-items: flex-start;
gap: fox.gap(3);
cursor: pointer;
// 시각적으로만 숨긴다. `opacity: 0`은 포커스를 유지하므로 키보드로 도달할 수 있고,
// 클릭은 루트 `<label>`이 받는다.
&__input {
position: absolute;
inline-size: 0;
block-size: 0;
margin: 0;
opacity: 0;
pointer-events: none;
}
// 시안이 아이콘을 감싼 icon-area에 위쪽 여백 1px을 준다. 라벨의 line box(글자 크기 × 1.5)가
// 아이콘보다 조금 높아서, 그만큼 내려야 글자 첫 줄과 시각 중심이 맞는다.
//
// 감싸는 요소를 따로 두지 않고 여백으로 처리한다 — 1px 내리는 것 말고는 하는 일이 없어
// React 밖 소비자에게 마크업을 하나 더 요구할 이유가 없다.
.fox-check-icon {
margin-block-start: 0.1rem;
}
&__body {
display: flex;
flex-direction: column;
gap: fox.gap(1);
align-items: flex-start;
}
// 자간은 px이 아니라 em이다 — 라벨은 크기 수식어(lg·md)마다, 부가설명은 브레이크포인트마다
// 글자 크기가 달라지는데, px으로 박으면 그 자리에서 비율이 어긋난다.
&__label {
// 시안이 라벨에 "가로 채우기"를 준다. 본문이 `align-items: flex-start`라 그대로 두면
// 글자 너비만큼만 차지하므로, 라벨만 늘려 준다.
align-self: stretch;
color: fox.color(font-neutral-strong);
font-family: fox.font-family(body);
font-weight: fox.font-weight(regular);
line-height: 1.5;
letter-spacing: -0.025em;
}
&__description {
color: fox.color(font-neutral-subtle);
font-family: fox.font-family(body);
font-weight: fox.font-weight(regular);
font-size: fox.font-size(body-sm);
line-height: 1.5;
letter-spacing: -0.025em;
}
// ── 크기 ────────────────────────────────────────────────────────────────────
&--lg &__label {
font-size: fox.font-size(body-lg);
}
&--md &__label {
font-size: fox.font-size(body-md);
}
}
// ── 비활성 ────────────────────────────────────────────────────────────────────
// 글자색도 함께 흐려진다. 네모 표시는 `_fox-check-icon.scss`가 같은 `:disabled`를 보고
// 처리하므로 여기서 건드리지 않는다.
.fox-checkbox:has(.fox-checkbox__input:disabled) {
cursor: default;
}
.fox-checkbox__input:disabled ~ .fox-checkbox__body .fox-checkbox__label,
.fox-checkbox__input:disabled ~ .fox-checkbox__body .fox-checkbox__description {
color: fox.color(font-neutral-disabled);
}
// ── 글자 감추기 ───────────────────────────────────────────────────────────────
// `display: none`으로 지우면 접근성 트리에서도 빠져 이름 없는 조작기가 된다. 그래서
// 자리만 없애고 DOM에는 남긴다 — 루트가 `<label>`이라 이 글자가 곧 이름이다.
.fox-checkbox--hide-label {
gap: 0;
> .fox-checkbox__body {
position: absolute;
inline-size: fox.border(1);
block-size: fox.border(1);
overflow: hidden;
clip-path: inset(50%);
}
}