2.1.2 — 크레마 위쪽 틈 제거

고친 것 / Fixed

• 크레마 위 가장자리에 밝은 선이 띠와 따로 떠 보이던 틈. 가장자리 선을 띠와 같은 색의 "첫 줄"로 바꾸고, 띠의 2·5·10px 계단을 16px까지의 ease-out 곡선으로 바꿨어요. / The crema edge line now blends into the band; the band eases out without steps.

🤖 Generated with Claude Code

2.1.1 — 블러레마가 팔레트를 따라가지 않던 문제 수정

고친 것 / Fixed

• @layer로 감싸면서 팔레트를 따라가는 크레마 띠·가장자리·빛 변수(--crema-band 등의 color-mix)와 리치 모드 블러 값이 계층 밖 tokens.css 고정값에 져서 블러레마가 항상 에스프레소빛이던 문제. 그 블록을 계층 밖으로 꺼냈어요(/* @unlayered */). / Palette-following crema variables now live outside the layer.
• 팔레트·테마·배경을 바꿀 때 크레마 채움·띠·가장자리 색이 0.35초 동안 이어져요(@property로 등록한 색 변수 전환). 블러 반경은 전환하지 않아요. / Crema colors transition smoothly on palette changes.

🤖 Generated with Claude Code

2.1.0 — 새 컴포넌트 9개, 상태 있는 Sheet·Toast, 로케일, 트리셰이킹, @layer, 테스트

2.0 검토에서 남겨 둔 14개 항목을 모두 반영한 릴리스예요. 기존 API는 그대로 동작해요(createBlurssism()만 deprecated).

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

• bundle.css가 @layer blurssism으로 감싸져요. 계층 밖의 소비자 CSS가 명시도와 상관없이 이기므로 덮어쓰기가 쉬워졌지만, button { background: none } 같은 전역 리셋도 이기니 리셋은 @layer reset, blurssism;처럼 앞 계층에 두세요. / bundle.css is now inside @layer blurssism; put global resets in an earlier layer.
• NavBar 링크 <nav>의 이름이 "주요 메뉴"에서 "사이트 메뉴"로 바뀌었어요(TabBar와 같은 이름이라 랜드마크가 겹쳤어요). / NavBar's links landmark is now named "사이트 메뉴".
• Tailwind 프리셋의 hex 색이 rgb(var(--x-rgb) / <alpha-value>)가 됐어요. bg-accent/50이 되고, tokens.css가 --x-rgb 변수를 함께 내보내요. / Tailwind colors support opacity modifiers.

새 컴포넌트 9개 / 9 new components (React·Svelte 5·CSS, 38개)

• Textarea(자동 높이 autoResize·maxRows), Alert(인라인 배너, info·positive·warning·danger, 닫기·행동), Link(밑줄 링크, external은 새 창 안내 포함), Pagination(처음·끝 고정, 생략 표시, 제어·비제어), Tabs(콘텐츠 탭, line·pill, WAI-ARIA tablist, 방향키), Accordion(네이티브 <details name>, 단일·다중), Popover(네이티브 Popover API, 라이트 디스미스, 위치 자동), Menu(Popover 위의 role="menu", 방향키·Enter, 구분선·danger), Drawer(옆에서 나오는 모달 패널, persistentFrom="lg"면 데스크톱 사이드바로).
• Badge·Toast에 info·warning 톤.

상태를 가진 Sheet·Toast / Stateful Sheet and Toast

• Sheet에 open·onClose를 주면 네이티브 <dialog> 모달이 돼요: scrim, Esc·바깥 누르기, 손잡이를 80px 끌어내려 닫기, 포커스 복귀, 닫힘 애니메이션. 안 주면 전처럼 자리에 그려져요. md 이상은 가운데 카드.
• ToastProvider + useToast().show({ message, tone, actionLabel, duration }): 아래 가운데(lg 이상 오른쪽 아래)에 최대 3개 쌓이고 4초 뒤 사라지며 마우스를 올리면 멈춰요. Svelte는 toast.show() + <Toaster />.
• Dialog·Sheet·Drawer가 닫힐 때도 애니메이션이 끝난 뒤 사라져요(data-closing).

로케일 / Locale

• setLocale("en" | "ko" | 객체), getLocale(), onLocaleChange(). 오류 접두어, 뒤로, 달력 제목·날짜 라벨, 메뉴·페이지 이름 등 컴포넌트가 그리는 모든 문구가 로케일을 따라요. React는 useLocale()로 다시 그리고, 컴포넌트마다 locale prop으로 덮어쓸 수 있어요. Svelte는 locale.current.

제어·비제어 / Controlled and uncontrolled

• Switch(defaultChecked), SegmentedControl·TabBar·RadioGroup(defaultValue), Pagination(defaultPage), Tabs·Accordion·Popover·Menu가 Chip처럼 둘 다 돼요. 공용 훅 useControllable() 공개.

구조 / Structure

• React 원본이 src/react/*.js로 나뉘고 빌드가 한 파일로 합쳐요. 각 컴포넌트가 /*#__PURE__*/가 붙은 최상위 선언이라 안 쓰는 컴포넌트는 번들러가 버려요. createBlurssism()은 deprecated(인자 무시).
• 컴포넌트 변수: --bl-btn-h·--bl-btn-h-md·--bl-field-h·--bl-icon-btn·--bl-chip-h·--bl-switch-w/h·--bl-tab-h·--bl-card-pad·--bl-dialog-w·--bl-sheet-w·--bl-toast-w. 영역에서 덮어쓰면 그 안의 컴포넌트가 따라가요.
• 컴포넌트 CSS 조각 src/css/*.css, 타입 조각 src/react/*.d.ts를 빌드가 합쳐요.

검사 / Checks

• npm test: jsdom + React로 실제 동작(키보드, 제어·비제어, 다이얼로그 포커스·닫힘, 토스트 타이머)을 15개 테스트로 확인하고, axe-core로 대표 화면의 접근성 위반을 검사해요. npm run check에 포함.
• auditCrema()·checkCrema()에 palette(한 화면에 팔레트 하나)와 accent-area(강조·상태·장식색 면이 10% 초과, 90/10) 검사 추가.
• probeCremaCost(): 블러 비용을 실제로 재요. applyCremaPreference({ probe: true })면 느린 기기에서 off로. 메모리를 알려 주지 않는 브라우저에서 코어 2개 이하도 저사양으로 봐요.
• 크레마 벤치마크 페이지 scripts/bench/crema.html과 측정값을 브랜드북에 적었어요.

문서·글꼴 / Docs and fonts

• docs/components/*.md에 dist/index.d.ts에서 만든 Props 표(npm run docs, 빌드에 포함).
• 브랜드북에 크레마 용어 표(crema-fill·tint·band·edge·light·saturate·모드가 각각 무엇인지)와 테스트·벤치마크 절. README와 브랜드북의 변경 이력 문장은 체인지로그로 옮겼어요.
• fonts.dynamic.css: Pretendard·Gowun Batang 원본을 동적 서브셋으로 쓰는 선택지. 11,172자 전부 같은 글꼴이고 쓰인 글자 조각만 받아요(jsDelivr + Google Fonts). README에 글꼴 출처를 분명히 적었어요.

🤖 Generated with Claude Code

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

1.6.0 — Blurssism 글꼴, 크레마 띠 전체로, 접근성·대비 강화

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

• 글꼴을 tokens.css·bundle.css가 더 이상 불러오지 않아요. import "@caffeinecatkr/blurssism/fonts.css"(또는 <link>)를 한 줄 더하거나, CDN 없이 쓰려면 그 자리에 fonts.local.css를 불러오세요(패키지에 든 글꼴 파일을 씀). 글꼴 이름이 Blurssism Sans·Blurssism Serif로 바뀌었으니 font-family에 Pretendard·Gowun Batang을 직접 썼다면 var(--font-sans)·var(--font-serif)로 바꾸세요. / Fonts moved to fonts.css (CDN) or fonts.local.css (font files shipped in the package).
• TabBar가 lg(1120px)부터 스스로 숨고, NavBar 링크는 lg부터 보여요(전에는 md부터). 계속 보이려면 hideFrom={false}. / TabBar hides from lg by default; NavBar links show from lg.
• Dialog가 네이티브 <dialog>로 바뀌었어요. className은 이제 <dialog class="bl-dialog">에 붙어요. / Dialog renders a native <dialog>.
• TabBar는 role="tablist" 대신 <nav> + aria-current="page"예요. [aria-selected]에 건 CSS는 [aria-current="page"]로 바꾸세요. / TabBar uses <nav> + aria-current.

크레마 / Crema

• 크레마 띠가 위쪽에만 몰리지 않고 면 전체에 옅게 남아요(crema-band-top·lip·mid·low 토큰으로 세기 조절). / The crema band now spreads across the whole surface instead of pooling at the top.
• 크레마 위 글자 대비를 뒤가 완전한 검정·흰색인 경우까지 검사해요(npm run check, 8,760개 조합 추가, 전체 16,644개). 이에 맞춰 채움 불투명도와 다크 띠 세기를 조정하고, 두꺼운 크레마용 보조 글자색 crema-ink-muted를 추가했어요. 얇은 크레마 위 글자(MediaCard 메타, 탭·내비게이션 링크)는 ink예요. / Text-on-crema contrast is now checked over worst-case backdrops; fills and the dark band were tuned and crema-ink-muted was added.
• 선택된 탭과 내비게이션 링크는 불투명한 accent-soft + 굵기 + 밑줄, 고른 팔레트는 체크 표시로 보여요(색만으로 알리지 않기). / Selected states no longer rely on color alone.
• 크레마 안의 아이콘 버튼, 다이얼로그 뒤 scrim, 숨어 있는 툴팁은 블러를 쓰지 않아요(블러 예산). / Nested icon buttons, the dialog scrim and hidden tooltips no longer use blur.
• 데스크톱 모드의 포인터 빛이 문서 전체가 아니라 크레마 요소에만 좌표를 써서, 스타일 재계산과 스크롤 때 다시 그리기가 줄었어요. 그림자는 새 토큰 shadow-crema-rich·shadow-crema-rich-hover·shadow-sheet-rich(다크는 검정 기반)를 써요. / Pointer light no longer restyles the whole document; rich-mode shadows are tokens now.
• 저사양 판정: 메모리 4GB 미만(전에는 4GB 이하)일 때 off, 코어 수는 메모리를 알려 주는 브라우저에서만 봐요. applyCremaPreference({ minMemory, minCores })로 바꿀 수 있어요. / Less aggressive low-end detection, now configurable.
• 새 함수 auditCrema()·checkCrema(): 개발 중 블러 예산 초과, primary 버튼 2개 이상, 남은 glass 이름을 알려 줘요. / New dev-time audit.

고친 것 / Fixes

• 1.4 변수(--glass-fill 등)를 덮어써도 반영되지 않던 문제(1.5.0). 이제 옛 변수에 값이 있고 새 변수가 그 값을 읽어요. 1.4의 --crema도 --crema-tint가 읽어요. / Overriding 1.4 --glass-* variables works again.
• Svelte 진입점·CommonJS·/utils가 utils 사본을 따로 들고 있어 브랜드 팔레트 등록과 크레마 모드 상태가 어긋나던 문제. 이제 모듈 하나(dist/utils.mjs, CJS는 dist/utils.cjs)를 같이 써요. / One shared utils module.
• <html data-palette> 안에 <section data-theme="dark">처럼 테마만 따로 걸면 팔레트가 에스프레소로 돌아가던 문제. 팔레트 영역 안의 크레마 그림자 가장자리 색도 팔레트를 따라가요. / Nested theme regions keep the palette.
• 투명도 줄이기 설정에서 크레마 버튼·아이콘 버튼의 블러가 남던 문제, backdrop-filter 미지원 브라우저의 버튼 대체. / Reduced transparency now covers buttons.
• Dialog: 크레마 안에서 열면 그 안에 갇히던 문제(네이티브 showModal()로 최상위 층), 뒤 화면 inert·스크롤 잠금, Esc가 처음 onClose를 부르던 문제, alert인데 바깥 클릭으로 닫히던 문제, 설명의 aria-describedby.
• SegmentedControl·PalettePicker: 방향키로 고를 때 포커스가 따라가고, 고른 것이 없으면 첫 항목으로 들어와요. Calendar: 날짜 하나만 Tab에 들고 방향키·PageUp·PageDown으로 이동해요.
• Calendar: min·max를 날짜로 비교(min={new Date()}가 오늘을 막던 문제), 오늘 표시를 마운트 뒤에 정해 하이드레이션 어긋남 방지, 바깥에서 value가 다른 달로 바뀌면 따라감.
• React Select: placeholder가 있으면 빈 값에서 시작(Svelte와 같게).
• Tooltip: 자식의 aria-describedby를 덮어쓰지 않고 이어 붙임, Esc로 닫기, 최상위 층(popover)에 떠서 overflow: hidden인 부모에 잘리지 않음.
• 터치 기기에서 누르는 영역 44px(칩·팔레트·세그먼트·스위치·내비게이션 링크·아이콘 버튼, 달력 칸). README의 "44px" 설명을 실제와 맞췄어요.
• 고대비(강제 색상) 모드에서 선택·켜짐 상태가 사라지던 문제, prefers-contrast: more 대응, 동작 줄이기 범위 확대.
• paletteToCss·createPalette·CLI --id가 선택자를 깨는 id를 막아요(영문으로 시작, 영문·숫자·하이픈).
• 노랑·연두 같은 밝은 브랜드색의 다크 장식색을 어둡게 맞춰 크레마 위 대비를 지켜요.
• Table: caption이 없으면 스크롤 영역에 role·tabindex를 붙이지 않아요.

API

• React Button이 href일 때 target·rel 같은 링크 속성을 타입에서도 받아요. variant="glass"는 개발 중 한 번 안내해요.
• React Chip: defaultSelected·onChange로 스스로 바뀌는 모드. React Table: format(Svelte와 같음). Svelte ListItem: 나머지 속성 전달. Svelte Checkbox: label에 스니펫.
• TabBar: 항목 href, hideFrom. PalettePicker: 브랜드 팔레트 표시(custom), group="custom", value에 브랜드 id. 새 함수 getCustomPalettes()·onCustomPalettesChange().
• 패키지: ./fonts.css(CDN), ./fonts.local.css와 ./fonts/*(woff2 3개 840KB와 SIL OFL 라이선스), ./utils의 require 조건(dist/utils.cjs). 쓰이지 않던 src/ 파일을 패키지에서 뺐어요.
• 글꼴이 Blurssism Sans·Blurssism Serif로 바뀌었어요. Pretendard·Gowun Batang에서 KS X 1001 한글 2350자 + 영문·숫자·기호만 남긴 사본이고(OFL 예약 이름 때문에 이름을 바꿈), 조각 수백 개 대신 파일 하나씩 받아요. 2350자 밖의 드문 글자는 시스템 글꼴로 보여요. scripts/subset-fonts.py로 만들어요. / Fonts are now Blurssism Sans and Serif: 2,350-syllable subsets of Pretendard and Gowun Batang, one file each.

개발 / Tooling

• npm run check가 대비(크레마 위 포함), Svelte 타입, React 타입(tsc), 서버 렌더링 스모크 테스트를 함께 돌려요. GitHub Actions에서 빌드 재현성과 함께 검사해요.
• 예제(examples/*)가 npm 배포본 대신 저장소의 패키지(file:../..)를 써요.

npm: npm install @caffeinecatkr/blurssism@1.6.0

1.5.0 — 코드 이름 glass → crema

코드 이름 glass → crema · Renamed to crema

• 클래스 .bl-crema · .bl-crema-thick · .bl-crema-lite · .bl-btn-crema, 버튼 variant="crema"
• 속성 <html data-crema>, 함수 applyCremaPreference() · setCremaMode() · getCremaMode() · shouldReduceCrema(), 타입 CremaMode · CremaOptions
• 토큰 --crema-fill · --crema-fill-strong · --crema-stroke · --crema-tint-accent · --crema-edge · --crema-band · --crema-grain · --crema-light · --shadow-crema · --crema-saturate (Tailwind 키 포함)
• 옛 glass 이름은 2.0까지 별칭으로 그대로 동작 / the glass names stay as aliases until 2.0
  • CSS: 옛 클래스·속성·변수를 같은 규칙에 함께 생성 / old selectors and variables are generated alongside
  • 컴포넌트: 새 클래스와 옛 클래스를 함께 붙임 (bl-crema bl-glass) / components emit both classes
  • 함수: 개발 중 콘솔에 한 번 새 이름 안내 / old functions log a one-time hint in development
• 브랜드 팔레트 값에 crema-tint-accent 추가 (glass-tint-accent도 유지)
• 1.4.1의 문서 용어 정리 포함 / includes the 1.4.1 docs changes

1.4에서 올릴 때: 옛 glass 이름은 2.0까지 그대로 동작해요. 바꾸는 표는 README에 있어요.

npm: npm install @caffeinecatkr/blurssism@1.5.0

1.4.1 — 문서 용어 정리 (유리 → 크레마)

문서만 바뀌었습니다. 코드와 화면은 1.4.0과 같습니다. / Docs only; code and visuals are the same as 1.4.0.

• 용어 정리: 떠 있는 블러레마 면을 한국어 "유리" → "크레마", 영어 "glass" → "crema"로 / floating Blurema surfaces are now called crema
• 위쪽 캐러멜빛 층은 "크레마 띠"(crema band)로 구분 / the top caramel layer is the crema band
• 코드 이름 bl-glass · data-glass · applyGlassPreference는 호환을 위해 그대로 / code names keep glass

1.4.0 — 블러레마 크레마, 데스크톱 모드, 브랜드색 팔레트

업데이트하면 데스크톱에서 화면이 조금 달라져요. 1.3처럼 쓰려면 applyGlassPreference({ rich: false })를 쓰세요.
Apps that call applyGlassPreference() now get desktop mode on capable desktops. Use applyGlassPreference({ rich: false }) to keep the 1.3 look.

변경점

• 크레마 재질 변경 (블러레마: 크림색 젖빛 면, 거품 결 노이즈, 위쪽 캐러멜빛 크레마 띠)
• 리퀴드 글래스 느낌 줄임 (채도 180% → 125%, 흰 반사광 대신 크레마 가장자리)
• 크레마 띠 색이 팔레트를 따라 바뀜 (말차는 녹차빛, 블루는 하늘빛)
• 데스크톱 모드 추가 (블러 40/64px, 두 겹 그림자, 마우스를 따라오는 캐러멜빛, 크레마 화면당 6개)
• 크레마 모드 3단계 자동 전환 (끄기 · 기본 · 데스크톱)
• 데스크톱 모드 켜고 끄기 가능 (applyGlassPreference({ rich: false }), setGlassMode())
• 브랜드색 팔레트 자동 생성 (applyBrandColor("#색"), 라이트·다크 강조색 생성과 대비 자동 보정)
• 상태색과 헷갈리는 브랜드색 경고 (빨강·노랑·초록)
• 터미널에서 팔레트 생성 (npx @caffeinecatkr/blurssism palette "#색")
• 대비 검사 확대 (702 → 7,884개 조합)
• 미리보기 추가 (블러레마 층·세 모드 비교, 브랜드색 만들기), 표지 그림에 블러레마 적용
• 문서 용어 정리 (떠 있는 면은 "크레마", 코드 이름 glass는 그대로)
• 문의 메일 추가 (leeunchan10@gmail.com), 다른 디자인 시스템과 비교표 추가
• 버그 수정 (끄기 모드에서 유리 버튼 비침, /utils 타입 파일 누락)

English

• Blurema: a cream, frosted surface with foam grain and a caramel crema band that follows the palette
• Desktop mode (data-glass="rich") with deeper blur, layered shadows and a pointer light; developers can switch it off
• Brand-color palettes: createPalette, applyBrandColor, paletteToCss, plus a CLI
• 7,884 contrast pairs checked; contact email and a comparison with other design systems in the docs

npm: npm install @caffeinecatkr/blurssism@1.4.0

1.3.1 — 웹 기본 팔레트 7종

웹 기본 팔레트 · Web essential palettes

• 웹에서 자주 쓰는 색 7종 추가: blue · indigo · violet · teal · emerald · pink · graphite
  Seven common web colors, toned down to sit on the cream paper
• 카페인 팔레트 6종과 기본값(espresso)은 그대로 / caffeine palettes and the espresso default are unchanged
• 팔레트에 group("caffeine" · "web") 추가, PalettePicker에 group prop / palettes now carry a group; PalettePicker can show one group
• npm run check: 팔레트 13종 × 라이트·다크, 702개 대비 조합 통과 / 702 contrast pairs pass

blurssism 1.3.0 — 카페인 팔레트 · 반응형 · Svelte

npm install @caffeinecatkr/blurssism

카페인 팔레트 · Caffeine palettes

• 기본 색이 카페인 계열로 바뀌었습니다: 우유 거품 크림색 바탕, 에스프레소 글자, 볶은 원두 갈색 강조, 크레마 장식색
  New caffeine defaults: milk-foam paper, espresso ink, roasted-bean accent, crema decoration
• data-palette로 고르는 팔레트 6종 / six palettes: espresso · matcha · chai · coldbrew · mocha · classic
• PalettePicker, setPalette(), setTheme(). 324개 대비 조합 모두 WCAG 통과 / all 324 contrast pairs pass WCAG

1.2의 자두색을 그대로 쓰려면 <html data-palette="classic"> / To keep the 1.2 plum colors, set data-palette="classic".

반응형 · Responsive

• 5단계 xs · sm 600 · md 768 · lg 1120 · xl 1440, 그리드 4·8·12열 / five breakpoints with a 4/8/12-column grid
• Container, Grid, .bl-grid + .bl-span-md-6, .bl-hide-from-lg, useBreakpoint()
• md 미만에서 제목 자동 축소, 다이얼로그는 아래 시트로 / smaller headings and bottom-sheet dialogs below md
• 터치 기기에서 조작 요소 44px 이상 / 44px touch targets on touch devices

Svelte 5

• import { Button } from "@caffeinecatkr/blurssism/svelte": 컴포넌트 29개, bind:, 스니펫, 타입, SvelteKit 서버 렌더링 / 29 components with bindings, snippets, types and SvelteKit SSR
• 예제 / example: examples/sveltekit

전체 변경 / Full changes: CHANGELOG · 미리보기 / Preview: https://leeuc10.github.io/blurssism/

made by caffeinecat