nbnloper / edupay-admin star
Forked from ldu0009 / edupay-admin
임동욱 임동욱 08-12
fix: 링크 버튼 밑줄이 글자를 관통하던 문제 
시안이 지정한 text-underline-position/text-decoration-thickness의
`from-font`를 옮기지 않아 브라우저 기본값 `auto`로 그려졌다. auto는 밑줄을
베이스라인 바로 아래에 붙여 g·y·다 같은 내림획을 관통하고, skip-ink가 그
자리를 파내 밑줄이 끊겨 보인다. lg에서 글자가 커질수록 두드러진다.

단축 `text-decoration`은 thickness를 auto로 되돌리므로 계열·상태 규칙은
`text-decoration-line`만 쓴다.

Co-Authored-By: Claude Opus 5
@d1790b56bb3768c98be07e00284940efc1deb408
27bbef7
d1790b5
@fox/styles/_fox-link-button.scss
--- @fox/styles/_fox-link-button.scss
+++ @fox/styles/_fox-link-button.scss
@@ -13,7 +13,9 @@
 
 // 토큰이 아닌 값(FoxButton과 동일한 근거로 승인된 항목):
 
 //   - line-height / letter-spacing: 시안 텍스트 스타일 label/*-strong의 값이나 Figma가
 
 //     변수로 export하지 않는다.
 
-//   - box-sizing / cursor / white-space / flex-shrink / text-decoration: 구조·상호작용 규칙.
 
+//   - 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)로
 
 // 시안이 서로 다른 그룹에 바인딩해 두었다. 그대로 따른다.
@@ -36,7 +38,15 @@
 
   line-height: 1;
 
   letter-spacing: -0.025em;
 
   white-space: nowrap;
 
-  text-decoration: underline;
 
+
 
+  // 시안이 지정한 밑줄 표기. `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;
@@ -94,17 +104,17 @@
 
   // tertiary만 평소에 밑줄이 없고 hover·pressed에서만 생긴다.
 
   &--tertiary {
 
     color: fox.color(font-neutral-default);
 
-    text-decoration: none;
 
+    text-decoration-line: none;
 
   }
 
 
   &:hover:not([aria-disabled="true"]):not(:disabled) {
 
     background: fox.color(button-text-surface-hover);
 
-    text-decoration: underline;
 
+    text-decoration-line: underline;
 
   }
 
 
   &:active:not([aria-disabled="true"]):not(:disabled) {
 
     background: fox.color(button-text-surface-pressed);
 
-    text-decoration: underline;
 
+    text-decoration-line: underline;
 
   }
 
 
   // 방문 색은 계열과 무관하게 같다. `:visited`는 앵커에서만, 그리고 색만 적용된다.
Add a comment
List