File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
08-14
08-14
08-18
08-18
08-14
08-19
08-19
08-14
08-14
08-18
08-18
08-14
08-18
08-18
08-19
08-19
// FoxEmail — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
// Figma form-email (136:3092 · 섹션 392:5820)
//
// [아이디] @ [도메인 드롭다운] [도메인 직접입력] + 선택적 확인 버튼.
// 시안에서 세 칸이 모두 input·select 인스턴스이고 버튼도 btn 인스턴스라, 이 파일은 줄
// 배치와 `@` 구분자만 갖는다 — 상자 모양과 상태는 FoxInput·FoxSelect가 가진 것을 쓴다.
//
// 마크업 계약 (React 밖 소비자용):
// <div class="fox-email">
// <div class="fox-email__row">
// <div class="fox-email__part">…fox-input…</div>
// <span class="fox-email__at">@</span>
// <div class="fox-email__part">…fox-select…</div>
// <div class="fox-email__part">…fox-input…</div>
// <button class="fox-button fox-button--primary fox-button--md">확인</button>
// </div>
// </div>
//
// 토큰이 아닌 값(사용자 승인):
// - 칸의 `min-inline-size: 24rem`(240px): 시안이 세 칸을 240px로 고정했는데 토큰
// 스케일에 240이 없다. 고정 대신 최소폭으로 두어 넓은 곳에서는 나눠 갖고 좁아지면
// 줄이 넘어가게 했다.
// - line-height / letter-spacing: 시안 텍스트 스타일의 값이나 Figma가 변수로
// export하지 않는다.
@use "abstracts" as fox;
@use "form-field" as field;
.fox-email {
@include field.root;
// 좁아지면 칸이 찌그러지는 대신 줄이 넘어간다.
&__row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: fox.gap(2);
inline-size: 100%;
}
&__part {
flex: 1 1 0;
min-inline-size: 24rem;
}
&__at {
flex-shrink: 0;
color: fox.color(font-neutral-default);
font-family: fox.font-family(body);
font-size: fox.font-size(body-md);
font-weight: fox.font-weight(regular);
line-height: 1.5;
letter-spacing: -0.025em;
}
&__message {
@include field.message;
}
&__message-icon {
@include field.message-icon;
}
&:has([aria-invalid="true"]) .fox-email__message {
color: fox.color(font-system-danger);
}
}