Code - nbnloper/edupay-admin

// FoxAlert — 시안: 통합관리자페이지 디자인시스템 Figma alert // // 화면 안에 놓이는 띠 모양 알림이다. 아이콘 상자 · 제목 · 본문이 한 줄로 선다. // **모달이 아니다** — 화면을 덮지 않고 내용 흐름 안에 그대로 놓인다. // // 마크업 계약 (React 밖 소비자용): // <div class="fox-alert fox-alert--default" role="status"> // <span class="fox-alert__icon">…아이콘…</span> // <div class="fox-alert__content"> // <strong class="fox-alert__title">제목</strong> // <span class="fox-alert__message">본문</span> // </div> // </div> // // 제목·본문은 각각 없을 수 있다. 아이콘 상자는 아이콘이 없어도 그린다 — 시안이 흰 판을 // 배치의 일부로 주고, 있고 없고에 따라 글자 시작점이 흔들리면 안 된다. // // 제목이 `heading/xsm`(title 패밀리·bold)이고 본문이 `body/md`(body 패밀리·regular)다. // 글자 크기는 둘 다 15px이라 굵기와 패밀리로만 갈린다 — 시안이 그렇게 준다. // // 토큰이 아닌 값: // - ⚠️ `inline-size: 72rem`: **시안의 폭(720px)을 일단 그대로 적용해 둔 것이다.** Figma가 // 변수로 export하지 않았고 토큰 스케일에도 720이 없다(modal 계열의 가장 큰 값이 760px). // 토큰이 생기면 `fox.*()`로 바꾸고, 폭을 고정하지 않는 쪽으로 정해지면 여기서 뺀다. // 그때까지 폭을 바꿔야 하는 자리는 호출부가 `className`으로 덮는다 // (`fox-toggle-quantity`와 같은 처리). // - `max-inline-size: 100%`: 시안에 없는 구조 규칙이다. 720px보다 좁은 자리에 놓였을 때 // 띠가 부모를 뚫고 나가지 않게 막는다 — 고정 폭만 두면 표 안이나 좁은 단에서 넘친다. // - line-height / letter-spacing: 시안 텍스트 스타일 heading/xsm·body/md의 값이나 Figma가 // 변수로 export하지 않는다. 시안의 -0.375px은 15px 기준이라 `-0.025em`으로 적는다 // (다른 컴포넌트와 같은 근거). // - box-sizing / display / flex / aspect-ratio: 구조 규칙. // // 아이콘은 컴포넌트의 `TYPE_ICON`이 계열마다 하나씩 쥐고 있다(Prohibit · Warning · // CheckCircle · Info · ChatDots, 전부 `weight="duotone"`). 색은 **제목 글자와 같은 계열색**을 // 쓴다(default는 `font-neutral-strong`) — 시안 확인 완료. // // duotone은 연한 면과 진한 선을 겹쳐 그리고 **둘 다 `currentColor`를 쓴다** — 연한 쪽은 // 글리프 자체가 `opacity: 0.2`를 물고 있어 색을 하나만 줘도 두 톤이 나온다. // // duotone은 연한 면과 진한 선을 겹쳐 그리고 **둘 다 `currentColor`를 쓴다** — 연한 쪽은 // 글리프 자체가 `opacity: 0.2`를 물고 있어 색을 하나만 줘도 두 톤이 나온다. // @use "@fox/styles/abstracts" as fox; .fox-alert { // 안쪽 여백이 바깥 폭을 늘리지 않게 한다 — 720px이 720px로 그려진다. box-sizing: border-box; display: flex; align-items: center; gap: fox.gap(4); inline-size: 72rem; max-inline-size: 100%; padding: fox.padding(5) fox.padding(6); border: fox.border(1) solid fox.color(border-neutral-subtler); border-radius: fox.radius(4); background: fox.color(surface-neutral-gray); // 정사각 흰 판. 글자가 길어져 띠가 늘어나도 크기가 그대로여야 해서 줄어들지 않게 막는다. &__icon { display: flex; flex-shrink: 0; justify-content: center; align-items: center; inline-size: fox.number(13); font-size: fox.number(13); block-size: fox.number(13); aspect-ratio: 1 / 1; border-radius: fox.radius(4); background: fox.color(element-neutral-inverse); // 글리프가 `fill: currentColor`라 이 색을 그대로 입는다. 계열이 있으면 아래에서 덮는다. color: fox.color(font-neutral-strong); } // 글리프는 흰 판(36px)보다 작은 24px이다 — 판이 글리프를 감싸는 여백을 갖는다. // 상자와 마찬가지로 줄어들지 않게 막고 정사각을 못박는다(시안이 둘 다 명시한다). &__icon > * { flex-shrink: 0; inline-size: fox.icon(5); font-size: fox.icon(5); block-size: fox.icon(5); aspect-ratio: 1 / 1; } // 남는 폭을 전부 가져간다. `min-inline-size: 0`이 없으면 긴 글이 줄바꿈되지 않고 띠를 // 밀어 넓힌다(flex 자식의 기본 최소 크기가 내용 크기라서다). &__content { display: flex; flex: 1 0 0; flex-direction: column; align-items: flex-start; gap: fox.gap(1); min-inline-size: 0; } &__title { align-self: stretch; color: fox.color(font-neutral-strong); font-family: fox.font-family(title); font-size: fox.font-size(heading-xsm); font-weight: fox.font-weight(bold); line-height: 1.4; letter-spacing: -0.025em; } &__message { align-self: stretch; color: fox.color(font-neutral-strong); 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; } // ── 계열 ──────────────────────────────────────────────────────────────────── // 계열이 바꾸는 것은 **배경 · 테두리 · 제목 글자색** 셋뿐이다. 본문 글자색과 아이콘 상자의 // 흰 배경은 계열과 무관하게 블록 규칙을 그대로 쓴다(시안 확인). // // 테두리만 `-inverse`다 — 같은 계열의 5(연한 배경)와 10(그보다 한 단계 진한 선)을 짝지어 // 쓰라고 토큰이 그렇게 갈라져 있다. 다크 모드에서는 세 값이 함께 뒤집힌다(95 / 90 / 20). // // `default`는 블록 규칙이 곧 그 계열의 모양이라 따로 덮을 것이 없다. &--default { // 시안 그대로 — 블록에 있는 값이 전부다. } &--information { border-color: fox.color(border-system-information-inverse); background: fox.color(surface-system-information); } &--information &__title, &--information &__icon { color: fox.color(font-system-information); } &--success { border-color: fox.color(border-system-success-inverse); background: fox.color(surface-system-success); } &--success &__title, &--success &__icon { color: fox.color(font-system-success); } &--warning { border-color: fox.color(border-system-warning-inverse); background: fox.color(surface-system-warning); } &--warning &__title, &--warning &__icon { color: fox.color(font-system-warning); } &--danger { border-color: fox.color(border-system-danger-inverse); background: fox.color(surface-system-danger); } &--danger &__title, &--danger &__icon { color: fox.color(font-system-danger); } }