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
// FoxTextArea — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
// Figma textarea (135:1655 · 섹션 391:3107)
//
// 마크업 계약 (React 밖 소비자용):
// <div class="fox-text-area">
// <label class="fox-form-label" for="…">레이블</label>
// <div class="fox-text-area__box">
// <textarea class="fox-text-area__field" id="…" rows="5" placeholder="…"></textarea>
// </div>
// <div class="fox-text-area__footer">
// <p class="fox-text-area__message">…</p> <!-- 선택 -->
// <p class="fox-text-area__counter">
// <span class="fox-text-area__counter-current">80</span>/100
// </p> <!-- 선택 -->
// </div>
// </div>
//
// 상태는 FoxInput과 같은 두 갈래다.
// - 기본(자동): 포커스는 `:focus-within`, 비활성·읽기전용은 네이티브 속성, 오류는
// `aria-invalid="true"`. 시안의 completed는 default와 글자색만 다른데 그건
// 플레이스홀더와 입력값의 네이티브 차이라 규칙이 필요 없다.
// - 고정: 루트에 `data-state`를 주면 그 모양으로 못박힌다.
//
// 라벨·헬퍼·상자·알맹이와 두 갈래 상태는 `form-field` 믹스인이 갖는다. 이 파일에는
// FoxTextArea만의 것(여러 줄 여백, 카운터)이 남는다.
//
// 시안에 크기 축이 없다 — 상자 하나뿐이고 높이는 줄 수가 정한다(시안은 5줄).
//
// 토큰이 아닌 값(FoxInput과 동일한 근거로 승인된 항목):
// - line-height(카운터 1) / letter-spacing: 시안 텍스트 스타일의 값이나 Figma가 변수로
// export하지 않는다.
// - resize / flex 관련: 구조·상호작용 규칙. 시안에 리사이즈 핸들이 없어 막아 둔다 —
// 높이가 필요하면 `rows`로 정한다.
@use "abstracts" as fox;
@use "form-field" as field;
.fox-text-area {
@include field.root;
// 여러 줄이라 세로 가운데 정렬을 끄고, 크기 축이 없어 md 여백을 직접 준다.
&__box {
@include field.box($align: null);
padding-inline: fox.form(padding-md);
padding-block: fox.padding(5);
border-radius: fox.form(radius-lg);
}
&__field {
resize: none;
@include field.field($font-size: body-md, $line-height: 1.5);
}
// 헬퍼는 왼쪽에서 남는 폭을 먹고 카운터는 오른쪽에 붙는다.
&__footer {
display: flex;
gap: fox.gap(5);
align-items: center;
justify-content: flex-end;
inline-size: 100%;
}
// 카운터와 한 줄에 서므로 남는 폭을 먹는다.
&__message {
@include field.message;
flex: 1 0 0;
min-inline-size: 0;
}
&__message-icon {
@include field.message-icon;
}
&__counter {
flex-shrink: 0;
margin: 0;
color: fox.color(font-neutral-default);
font-family: fox.font-family(body);
font-size: fox.font-size(label-sm);
font-weight: fox.font-weight(regular);
line-height: 1;
letter-spacing: -0.025em;
text-align: end;
}
// 현재 글자 수만 굵고 색이 다르다.
&__counter-current {
color: fox.color(font-theme-primary);
font-weight: fox.font-weight(bold);
}
}
@include field.auto-states("fox-text-area") {
// 시안의 오류 변형에서만 카운터 현재값이 빨갛다.
&:has(.fox-text-area__field[aria-invalid="true"]) .fox-text-area__counter-current {
color: fox.color(font-system-danger);
}
}
@include field.fixed-states("fox-text-area") {
.fox-text-area[data-state="error"] .fox-text-area__counter-current {
color: fox.color(font-system-danger);
}
}