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
// FoxLinkButton — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F) Figma btn-lnk (컴포넌트 세트 107:207 · 섹션 391:676)
//
// 마크업 계약 (React 밖 소비자용):
// <a href="…" class="fox-link-button fox-link-button--primary fox-link-button--md">
// <span class="fox-link-button__label">링크</span>
// <span class="fox-link-button__icon">…svg…</span> <!-- 선택, 항상 라벨 뒤 -->
// </a>
// href가 없으면 `<button>`으로 써도 되고, 그때는 `:visited`가 켜지지 않는다.
// 앵커의 비활성은 `disabled` 속성이 없으므로 `aria-disabled="true"`로 표시한다.
//
// 크기·계열과 무관하게 상자는 하나뿐이다 — 패딩·간격·모서리가 전부 같다.
//
// 토큰이 아닌 값(FoxButton과 동일한 근거로 승인된 항목):
// - line-height / letter-spacing: 시안 텍스트 스타일 label/*-strong의 값이나 Figma가
// 변수로 export하지 않는다.
// - box-sizing / cursor / white-space / flex-shrink: 구조·상호작용 규칙.
// - text-decoration-* / text-underline-position: 시안이 밑줄을 그렇게 지정한다
// (from-font). Figma가 변수로 export하지 않을 뿐 임의로 고른 값이 아니다.
//
// 아이콘 크기: lg는 `icon/4`(고정 20px), md·sm은 `form/icon/sm`(PC 16 · 모바일 12)로
// 시안이 서로 다른 그룹에 바인딩해 두었다. 그대로 따른다.
@use "abstracts" as fox;
.fox-link-button {
box-sizing: border-box;
display: inline-flex;
align-items: center;
cursor: pointer;
border: none;
padding: fox.padding(1);
border-radius: fox.form(radius-xsm);
gap: fox.gap(1);
background: fox.color(button-text-surface);
font-family: fox.font-family(body);
font-weight: fox.font-weight(medium);
line-height: 1;
letter-spacing: -0.025em;
white-space: nowrap;
// 시안이 지정한 밑줄 표기. `from-font`는 폰트가 가진 밑줄 위치·두께를 쓰므로 내림획
// (g·y·다) 아래로 내려간다 — 기본값 `auto`는 밑줄이 글자를 관통하고 skip-ink가 그
// 자리를 파내 끊겨 보인다. 아래 규칙들이 `text-decoration` 단축을 쓰지 않는 이유도
// 같다: 단축은 thickness를 `auto`로 되돌린다.
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-thickness: from-font;
text-underline-position: from-font;
&__label {
min-inline-size: 0;
}
&__icon {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
}
&__icon > * {
inline-size: 100%;
block-size: 100%;
}
// ── 크기 ──────────────────────────────────────────────────────────────────
&--lg {
font-size: fox.font-size(label-lg);
.fox-link-button__icon {
inline-size: fox.icon(4);
block-size: fox.icon(4);
}
}
&--md {
font-size: fox.font-size(label-md);
.fox-link-button__icon {
inline-size: fox.form(icon-sm);
block-size: fox.form(icon-sm);
}
}
&--sm {
font-size: fox.font-size(label-sm);
.fox-link-button__icon {
inline-size: fox.form(icon-sm);
block-size: fox.form(icon-sm);
}
}
// ── 계열 ──────────────────────────────────────────────────────────────────
&--primary {
color: fox.color(font-theme-primary);
}
&--secondary {
color: fox.color(font-neutral-default);
}
// tertiary만 평소에 밑줄이 없고 hover·pressed에서만 생긴다.
&--tertiary {
color: fox.color(font-neutral-default);
text-decoration-line: none;
}
&:hover:not([aria-disabled="true"]):not(:disabled) {
background: fox.color(button-text-surface-hover);
text-decoration-line: underline;
}
&:active:not([aria-disabled="true"]):not(:disabled) {
background: fox.color(button-text-surface-pressed);
text-decoration-line: underline;
}
// 방문 색은 계열과 무관하게 같다. `:visited`는 앵커에서만, 그리고 색만 적용된다.
&:visited {
color: fox.color(button-text-visited);
}
}
// 시안이 비활성 글자에도 `color/icon/neutral/disabled`를 쓴다(font 쪽이 아니다).
// 계열·`:visited`를 이기려면 특이도가 높아야 해 블록과 함께 지목한다.
.fox-link-button[aria-disabled="true"],
.fox-link-button:disabled {
cursor: default;
background: fox.color(button-text-surface);
color: fox.color(icon-neutral-disabled);
}