File name
Commit message
Commit date
08-14
File name
Commit message
Commit date
08-14
08-14
08-14
File name
Commit message
Commit date
08-14
08-14
08-14
08-14
08-14
08-14
08-14
08-14
08-14
// FoxFormLabel — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
// Figma form-label
//
// 입력 칸 위에 붙는 라벨. 필수·선택 표시를 뒤에 달 수 있다.
//
// 마크업 계약 (React 밖 소비자용):
// <label class="fox-form-label" for="…">
// 이름
// <span class="fox-form-label__required" aria-hidden="true">*</span> <!-- 필수일 때 -->
// <span class="fox-form-label__optional">(선택)</span> <!-- 선택일 때 -->
// </label>
//
// 글자 자체는 `form-field`의 `label` 믹스인이 갖는다 — 시안에서 이 컴포넌트와 입력 계열의
// 라벨이 같은 공용 조각이라 값이 갈라질 이유가 없다. 이 파일에는 표시 두 개만 남는다.
//
// 필수의 `*`는 `aria-hidden`이다. 필수 여부는 입력 요소의 `required`(또는 `aria-required`)가
// 알리는 것이고, 별표는 그 눈에 보이는 짝일 뿐이라 두 번 읽히면 안 된다. 반대로 "(선택)"은
// 대신 알려 줄 속성이 없어 그대로 읽히게 둔다.
//
// 표시는 서로 배타적이다 — 필수이면서 선택일 수는 없어 React 래퍼가 하나만 받는다.
//
// 토큰이 아닌 값(FoxButton과 동일한 근거로 승인된 항목):
// - line-height / letter-spacing: 시안 텍스트 스타일의 값이나 Figma가 변수로 export하지
// 않는다. 자간은 px이 아니라 em이라 브레이크포인트가 바뀌어도 비율이 유지된다.
// - display / align-items: 구조 규칙.
@use "@fox/styles/abstracts" as fox;
@use "@fox/styles/form-field" as field;
.fox-form-label {
@include field.label;
display: inline-flex;
align-items: center;
// 시안 label/md-em — 기본 라벨보다 굵고 강조 색이다.
&__required {
color: fox.color(font-theme-accent);
font-weight: fox.font-weight(bold);
}
// 시안 label/sm — 기본 라벨보다 한 단계 작고 흐리다.
&__optional {
color: fox.color(font-neutral-subtle);
font-size: fox.font-size(label-sm);
font-weight: fox.font-weight(regular);
letter-spacing: -0.025em;
}
}