Series · 4 stories
디자인 시스템 세우기
한 벌이어야 할 값이 여러 벌이 되지 않게 — Aurora Ledger 이야기
-
디자인 시스템 세우기 4 — light-dark()를 퍼센트 자리에 쓰면 선언이 통째로 죽습니다
CSS의 모던 함수 light-dark()를 color-mix()의 퍼센트 농도 자리에 썼더니 에러 하나 없이 선언 전체가 무효 처리되어 투명해졌습니다. CSS 명세의 미묘한 파싱 규칙과 테마 토큰을 안전하게 합성하는 방법을 정리합니다.
-
디자인 시스템 세우기 3 — Aurora Ledger - CSS 주석 한 줄에서 태어났어요
이름의 유래는 어디에도 적힌 적이 없었어요. 목업을 다시 짜던 날 CSS 주석 한 줄로 태어났고, 2주 뒤 모든 제품의 기준이 됐습니다. 그 사이에 되돌린 결정이 셋 있어요.
-
디자인 시스템 세우기 2 — 저쪽과 같은 크기라는 주석은 아무것도 묶지 않습니다
두 배지가 각자 24.dp 리터럴을 들고 '저쪽과 같은 크기'라는 주석으로만 묶여 있었어요. 같은 꼴을 찾다가, 주석이 같다고 말하는 채로 값이 이미 갈라진 것을 봤습니다.
-
디자인 시스템 세우기 1 — 라이트·다크를 네 벌 적으면 그중 하나가 몰래 달라집니다
목업의 색 토큰 표가 여섯 벌 있었어요. 그 사이에서 이 문서 자신의 보라가, Aurora는 #7040D9라고 적어둔 주석 바로 아래에서 다른 보라로 그려지고 있었습니다.