Code - nbnloper/edupay-admin

// FoxTag — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F) Figma tag (132:195) // // 알약 모양의 작은 조각이다 — 글자 하나와 아이콘 하나로 끝난다. // // 마크업 계약 (React 밖 소비자용): // <button type="button" class="fox-tag fox-tag--lg fox-tag--sorting"> // <span class="fox-tag__label">서울</span> // <span class="fox-tag__icon">…닫기 svg…</span> // </button> // <button type="button" class="fox-tag fox-tag--lg fox-tag--button"> // <span class="fox-tag__icon">…택 svg…</span> // <span class="fox-tag__label">서울</span> // </button> // // 아이콘이 앞이냐 뒤냐는 **마크업 순서가 정한다** — 계열별로 `order`나 `row-reverse`를 쓰지 // 않는다. sorting은 글자 뒤에 닫기 아이콘, button은 글자 앞에 택 아이콘이다. 두 계열이 쓰는 // 클래스가 `fox-tag__icon` 하나라 크기·색 규칙도 한 벌로 끝난다(`fox-button`과 같은 방식). // // 루트가 `<button>`이라 hover·pressed·포커스·키보드가 전부 네이티브다. 시안의 pressed는 // `:active`로 받는다. // // 배경은 세 상태 모두 계열과 무관하게 같다. button 계열만 hover·pressed에서 **글자에 밑줄이 // 추가로** 붙는다 — 시안이 배경 규칙을 계열 위에 두고 밑줄만 button에 얹는다. // // 아이콘 색은 시안의 `black / 25%`를 그대로 값으로 박지 않고 `icon-neutral-fill`을 쓴다 — // 라이트에서 `alpha-black25`, 다크에서 `alpha-white25`로 뒤집히는 같은 값의 토큰이다. // SVG는 `fill="currentColor"`로 그려야 이 색이 먹는다. // // 아이콘 크기는 세 크기가 모두 `icon-3`(16px)이다 — 시안 확인 완료. 크기 수식어가 바꾸는 것은 // padding·gap·글자 크기뿐이고 아이콘은 건드리지 않으므로, 아이콘 규칙을 블록에 한 번만 둔다. // // ⚠️ 비활성은 시안에 없다. 색을 임의로 만들지 않고 hover·pressed만 막는다 — 네이티브 // `disabled`를 주면 커서와 클릭만 죽고 모양은 기본과 같다. // // 토큰이 아닌 값(FoxButton과 동일한 근거로 승인된 항목): // - line-height / letter-spacing: 시안 텍스트 스타일 label/*의 값이나 Figma가 변수로 // export하지 않는다. 세 크기가 모두 `-0.025em`이라 규칙 하나로 끝난다(15px→-0.375px, // 13px→-0.325px, 11px→-0.275px). px이 아니라 em인 이유는 글자 크기가 크기 수식어마다, // 그리고 브레이크포인트마다 달라지기 때문이다 — px으로 박으면 그 자리에서 비율이 어긋난다. // - box-sizing / display / flex / cursor / white-space / aspect-ratio: 구조·상호작용 규칙. @use "@fox/styles/abstracts" as fox; .fox-tag { // 안쪽 여백이 바깥 크기를 늘리지 않게 한다 — 좁은 자리에서 알약 높이가 흔들리지 않는다. box-sizing: border-box; display: inline-flex; align-items: center; border: none; border-radius: fox.radius(max); background: fox.color(action-secondary); cursor: pointer; color: fox.color(font-neutral-default); font-family: fox.font-family(body); font-weight: fox.font-weight(regular); line-height: 1; letter-spacing: -0.025em; white-space: nowrap; &:disabled { cursor: default; } // 글자만 줄어들게 해 아이콘이 밀리지 않게 한다. &__label { min-inline-size: 0; } &__icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; inline-size: fox.icon(3); block-size: fox.icon(3); // 시안이 아이콘에 정사각 비율을 못박는다. 자리가 좁아 눌려도 글리프가 찌그러지지 않는다. aspect-ratio: 1 / 1; color: fox.color(icon-neutral-fill); } // 넘긴 SVG가 슬롯을 꽉 채운다 — 크기는 슬롯이 정하고 SVG는 따라온다. &__icon > * { inline-size: 100%; block-size: 100%; } // ── 크기 ──────────────────────────────────────────────────────────────────── // 크기 이름과 글자 토큰 이름이 한 칸씩 어긋난다(lg→label-md). 시안이 그렇게 준다. &--lg { padding: fox.padding(3) fox.padding(5); gap: fox.gap(2); font-size: fox.font-size(label-md); } &--md { padding: fox.padding(2) fox.padding(3); gap: fox.gap(2); font-size: fox.font-size(label-sm); } // sm만 gap이 한 단계 좁다. &--sm { padding: fox.padding(1) fox.padding(3); gap: fox.gap(1); font-size: fox.font-size(label-xsm); } // ── 상태 ──────────────────────────────────────────────────────────────────── // 계열과 무관하게 배경만 바뀐다. &:hover:not(:disabled) { background: fox.color(action-secondary-hover); } &:active:not(:disabled) { background: fox.color(action-secondary-pressed); } // button 계열은 위 배경 변화에 밑줄이 더해진다. sorting은 배경 변화로 끝난다. // // `text-decoration` 단축을 쓰지 않는다 — 단축은 thickness를 `auto`로 되돌린다. 시안의 // skip-ink·thickness·underline-offset은 값이 전부 `auto`, 즉 기본값이라 적지 않는다. // 기본값과 다른 것은 `from-font` 하나뿐이다 — 폰트가 가진 밑줄 위치를 쓰므로 내림획 // (g·y·다) 아래로 내려간다. &--button:hover:not(:disabled) &__label, &--button:active:not(:disabled) &__label { text-decoration-line: underline; text-decoration-style: solid; text-underline-position: from-font; } }