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-14
08-14
08-18
08-18
08-14
08-18
08-18
// FoxToast — 시안: 통합관리자페이지 디자인시스템 Figma toast
//
// 어두운 판 위에 한 줄짜리 알림을 얹는다. 크기 수식어가 없다 — 시안에 하나뿐이다.
//
// 마크업 계약 (React 밖 소비자용):
// <div class="fox-toast" role="status">저장되었습니다.</div>
//
// 글자를 감싸는 엘리먼트를 두지 않는다 — 안에 들어가는 것이 글자 하나뿐이라 따로 규칙을
// 걸 대상이 없다. 아이콘이나 버튼이 붙는 날이 오면 그때 `__label`을 만든다.
//
// **띄우는 위치는 여기서 정하지 않는다.** 시안이 조각의 모양만 주고, 화면 어디에 어떻게
// 나타나는지는 쓰는 화면이 정한다(사용자 결정). 호출부가 `className`으로 `position: fixed`
// 같은 배치를 준다.
//
// 배경·글자색이 `*-inverse` 토큰이다 — 라이트에서 어두운 판 + 흰 글자이고, 다크 모드에서는
// 둘이 함께 뒤집혀 밝은 판 + 어두운 글자가 된다. 두 값을 한 쌍으로 골라야 대비가 유지된다.
//
// 토큰이 아닌 값(FoxButton·FoxTag와 동일한 근거로 승인된 항목):
// - line-height / letter-spacing: 시안 텍스트 스타일 body/md의 값이나 Figma가 변수로
// export하지 않는다. 시안의 -0.375px은 15px 기준이라 `-0.025em`으로 적는다 — px으로
// 박으면 글자 크기가 모바일에서 13px으로 줄 때 비율이 어긋난다.
// - box-sizing / display / align-items: 구조 규칙.
//
// ⚠️ 그림자 색: 시안이 두 겹을 각각 `dark/alpha/black10`·`alpha/black10`으로 물려 놓았는데
// 값이 같고(rgba(0,0,0,0.10)) 앞쪽 이름의 토큰은 export에 없다. 그래서 두 겹 모두
// `alpha-black10`을 쓴다 — `fox-select-option`과 같은 선택이다(다크 모드에서도 검은 그림자).
@use "@fox/styles/abstracts" as fox;
.fox-toast {
// 안쪽 여백이 바깥 크기를 늘리지 않게 한다.
box-sizing: border-box;
display: inline-flex;
// 글자 하나뿐이라 지금은 티가 나지 않지만, 시안이 세로 가운데 정렬을 명시한다.
align-items: center;
padding: fox.padding(5) fox.padding(7);
border-radius: fox.radius(4);
background: fox.color(surface-neutral-default-inverse);
// 시안의 neutral/lv3 — 가까운 그림자와 먼 그림자 두 겹이다.
box-shadow:
fox.shadow(location2) fox.shadow(location2) fox.shadow(blur3) 0
fox.primitive(alpha-black10),
fox.shadow(location4) fox.shadow(location4) fox.shadow(blur4) 0
fox.primitive(alpha-black10);
color: fox.color(font-neutral-strong-inverse);
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;
}