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
Hyerin1201
08-19
6b6be15
feat: 디자인시스템 FoxContextualTrigger, FoxTooltip, FoxTooltipRich, FoxPopover 추가
UNIX
// FoxContextualTrigger — 시안: 통합관리자페이지 디자인시스템 Figma contextual-trigger
//
// 툴팁이나 팝오버를 여는 24px짜리 아이콘 단추다. 계열이 아이콘을 정하고(help는 물음표,
// information은 느낌표), 상태는 배경만 바꾼다.
//
// 마크업 계약 (React 밖 소비자용):
// <button type="button" class="fox-contextual-trigger fox-contextual-trigger--help"
// aria-label="도움말">
// <span class="fox-contextual-trigger__icon">…아이콘 svg…</span>
// </button>
//
// 루트가 `<button>`이라 hover·pressed·포커스·키보드가 전부 네이티브다. 시안의 pressed는
// `:active`가 받는다.
//
// `fox-icon-button`과 다른 조각이다. 저쪽은 폼 컨트롤과 높이를 맞추는 단추라 크기가
// `form(height-*)`을 따르는데(가장 작은 xsm도 32px), 이쪽은 글줄 옆에 붙는 24px 고정이고
// 모서리도 `radius-2`(4px)다.
//
// 배경은 세 상태 모두 `action-secondary` 계열이다 — 기본이 투명이라 아래 배경이 그대로
// 비치고, hover·pressed에서만 연한 판이 깔린다(`fox-tag`와 같은 규칙).
//
// ⚠️ 비활성은 시안에 없다. 색을 임의로 만들지 않고 hover·pressed만 막는다 — 네이티브
// `disabled`를 주면 커서와 클릭만 죽고 모양은 기본과 같다(`fox-tag`와 같은 처리).
//
// 토큰이 아닌 값:
// - box-sizing / display / flex / aspect-ratio / cursor: 구조·상호작용 규칙.
@use "@fox/styles/abstracts" as fox;
.fox-contextual-trigger {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
inline-size: fox.number(10);
block-size: fox.number(10);
aspect-ratio: 1 / 1;
padding: 0;
border: none;
border-radius: fox.radius(2);
background: fox.color(action-secondary);
color: fox.color(icon-neutral-default);
cursor: pointer;
&:disabled {
cursor: default;
}
// 아이콘은 판(24px)보다 작은 20px이다 — 판이 아이콘을 감싸는 여백을 갖는다.
&__icon {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
inline-size: fox.icon(4);
block-size: fox.icon(4);
aspect-ratio: 1 / 1;
}
// 넘긴 SVG가 슬롯을 꽉 채운다 — 크기는 슬롯이 정하고 SVG는 따라온다.
&__icon > * {
inline-size: 100%;
block-size: 100%;
}
// ── 상태 ────────────────────────────────────────────────────────────────────
// 계열과 무관하게 배경만 바뀐다.
&:hover:not(:disabled) {
background: fox.color(action-secondary-hover);
}
&:active:not(:disabled) {
background: fox.color(action-secondary-pressed);
}
}