2.0.0 — 색 역할 정리, 타입 토큰화, forwardRef, glass 이름 제거

올리기 전에 확인할 것 / Before upgrading

• primary 버튼이 ink 채움에서 강조색(accent) 채움으로 바뀌었어요. 블랙 팔레트(기본)는 그대로 검정이고, 에스프레소·말차 같은 팔레트에서는 primary 버튼이 그 색이 돼요. variant="accent"는 primary의 별칭이라 그대로 동작해요(같은 클래스 bl-btn-primary). / primary buttons are now filled with accent; accent is an alias of primary.
• 타입 클래스에 bl- 접두어가 붙었어요: .body → .bl-body, .title-1 → .bl-title-1, .label → .bl-label 등. 접두어 없는 이름은 소비자 CSS(.label, .body)와 충돌했어요. / Type classes are prefixed: .bl-body, .bl-title-1, …
• 데스크톱 모드의 포인터를 따라오는 빛이 기본으로 꺼져요. 켜려면 applyCremaPreference({ pointerLight: true }). 리치 블러는 40/64px에서 32/48px로. / Pointer light is opt-in; rich blur is 32/48px.
• 블랙 팔레트의 accent-ink(링크·활성 글자)가 검정에서 캐러멜빛(#653819, 다크 #e2ab7a)으로 바뀌었어요. 본문 ink와 같은 색이라 링크가 구분되지 않던 문제예요. / The black palette's accent-ink is now caramel so links differ from body text.
• 1.4의 glass 이름이 제거됐어요: .bl-glass*·.bl-btn-glass·variant="glass"·data-glass·--glass-*·--crema(띠 색)·applyGlassPreference()·setGlassMode()·getGlassMode()·shouldReduceGlass()·GlassMode·GlassOptions·팔레트 값의 glass-tint-accent. 1.5부터 예고한 대로예요. crema 이름으로 바꾸고, 남은 쓰임새는 auditCrema()가 legacy-glass로 찾아 줘요. / The 1.4 glass names are removed; auditCrema() reports leftovers.

정리 / Cleanup

• glass 별칭을 걷어내서 dist/bundle.css의 복제 선택자 104개와 tokens.css의 이중 변수 선언이 사라졌어요. / Removing the aliases drops 104 duplicated selectors and the double variable declarations.

왜 2.0인가 / Why 2.0

• 1.6.x에서 기본 팔레트·글꼴·TabBar 동작 같은 보이는 변경이 마이너·패치 릴리스로 나갔어요. 2.0부터는 보이는 변경은 메이저에서만 해요. / Visible changes now ship only in major releases.

색 역할 / Color roles

• 블랙 팔레트에서 ink(본문)·accent(채움)·accent-ink(링크)가 사실상 한 색이라 primary 버튼과 accent 버튼이 구분되지 않고 링크 어포던스가 사라졌어요. primary를 accent 채움으로 합치고, accent-ink를 캐러멜빛으로 분리했어요. 대비 검사 108,550개 조합 그대로 통과.

블러레마 / Blurema

• 크레마가 흐린 유리가 아니라 매트한 황갈색 판으로 읽히던 문제. 거품 결 알파 .46→.26(다크 .24→.16), 크레마 띠 세기 42/26/16/10 → 30/18/10/6%(다크 30/16/10/7 → 24/13/8/5%), 채움 틴트 20→12%(다크 12→10%). / Lighter grain, band and tint so crema reads as frosted glass.
• 갤러리의 팔레트 선택 패널이 평평한 바탕 위의 크레마였어요(원칙 2 위반). 불투명 카드로 바꿨어요.

타이포그래피 / Typography

• 타입 스케일이 변수로 나와요: --text-{이름}-size·-line·-weight·-tracking(이름: display·title-1·quote·title-2·title-3·body·body-strong·body-sm·label·caption). 컴포넌트 CSS의 하드코딩 px 43곳이 이 변수를 읽어서, :root { --text-body-size: 17px }처럼 덮어쓰면 입력창·카드까지 함께 바뀌어요. md 미만에서 제목이 줄어드는 규칙도 변수를 바꾸는 방식이라 MediaCard·Dialog 제목이 함께 줄어요. Tailwind 프리셋의 fontSize도 같은 변수를 읽어요. / Type scale is now variables; components read them.

React

• Button·IconButton·Chip·TextField(ref는 <input>)·Select(<select>)·Checkbox(<input>)·Switch·RadioGroup·ListItem·Container·Grid가 forwardRef예요. react-hook-form의 register, 프로그램적 포커스가 돼요. displayName도 붙어요. / These components forward refs.

성능 / Performance

• 포인터 빛을 켰을 때도 포인터에서 420px 안에 있는 크레마 면만 매 프레임 다시 칠하고, 멀어진 면은 한 번만 화면 밖으로 보내요. 전에는 화면의 모든 블러 면에 매 프레임 인라인 속성을 써서 전부 다시 칠해졌어요.
• 저사양 판정에 (update: slow)(전자잉크 등)를 더했어요. 메모리를 알려 주지 않는 Safari·Firefox에서는 여전히 prefers-reduced-transparency·데이터 절약·update: slow만 자동으로 잡히고, 나머지는 setCremaMode("off")로 앱이 정해요.
• 브랜드북의 "거품 결은 성능 부담이 거의 없다"는 문장을 지웠어요. 측정한 적이 없고, blend-mode와 함께 칠해지는 층이라 블러 예산 안에서 세는 게 맞아요.

🤖 Generated with Claude Code