nbnloper / edupay-admin star
Forked from ldu0009 / edupay-admin
임동욱 임동욱 08-11
style: 색상 칩을 16px로 키우고 토큰으로 지목 
5px에서는 밝은 회색 계열(#FFFFFF · #F4F5F6 · #E6E8EA)이 서로 구분되지 않았고
반투명 토큰의 알파 여부도 보이지 않았다.

16px는 icon-3(1.6rem)과 같은 값이라 리터럴 대신 토큰을 쓴다 — 5px일 때는 스케일에
맞는 값이 없어 리터럴이 불가피했던 예외가 사라졌다.

Co-Authored-By: Claude Opus 5
@4bf981427577fc868835df1141c492f1a9a79558
f9ee35a
4bf9814
@fox/dev-test/dev-test.module.scss
--- @fox/dev-test/dev-test.module.scss
+++ @fox/dev-test/dev-test.module.scss
@@ -232,14 +232,13 @@
 
 }
 
 
 // ── 색상 칩 ─────────────────────────────────────────────────────────────────
 
-// 값 앞에 붙는 5px 정사각형. 토큰 스케일에 5px(0.5rem)이 없어 리터럴을 쓴다 —
 
-// 카탈로그 표시용 치수이지 디자인 값이 아니다.
 
-// 테두리는 box-shadow로 그린다. border를 쓰면 5px 중 2px을 테두리가 먹어
 
-// 색이 보이는 면적이 3px로 줄어든다.
 
+// 값 앞에 붙는 16px 정사각형. 16px는 `icon-3`(1.6rem)과 같은 값이라 리터럴 대신
 
+// 토큰을 쓴다.
 
+// 테두리는 box-shadow로 그린다 — border는 칩 안쪽을 먹어 색이 보이는 면적을 줄인다.
 
 .colorChip {
 
   display: inline-block;
 
-  inline-size: 0.5rem;
 
-  block-size: 0.5rem;
 
+  inline-size: fox.icon(3);
 
+  block-size: fox.icon(3);
 
   margin-inline-end: fox.gap(3);
 
   box-shadow: 0 0 0 fox.border(1) #{fox.color(border-neutral-overlay)};
 
   vertical-align: middle;
Add a comment
List