glasskit

GlassKit은 글래스모피즘 미학을 중심으로 구축된 순수 CSS 컴포넌트 라이브러리로, README에 따르면 Apple의 iOS 26 "Liquid Glass" 및 visionOS 디자인 언어에서 영감을 받았습니다. 이 라이브러리는 JavaScript 프레임워크나 빌드 단계 없이도 네이티브하고 현대적인 느낌을 주어야 하는 앱과 인터페이스를 대상으로 합니다. 저장소 포함 내용 - 모든 컴포넌트와 디자인 토큰이 포함된 핵심 라이브러리인 glasskit.css - 릴리스 시 생성되는 압축 빌드 파일인 glasskit.min.css - Shadow DOM 내부에서 사용하기 위한 Constructable Stylesheet인 glasskit-styles.js - 4가지 예시 테마(Ocean Blue, Emerald Green, Rose 및 빈 커스텀 슬롯)가 포함된 커스텀 브랜드 테마 템플릿 theme-override.css - index.html, showcase.html, docs.html 및 de/ 폴더 내의 독일어 번역 페이지 - LLM 및 코딩 어시스턴트를 위한 구조화된 컴포넌트 참조 문서인 SKILL.md - 본 프로젝트는 MIT 라이선스이며 Jungherz GmbH에서 개발했습니다. 공개 데모, 문서 및 쇼케이스는 glasskit.jungherz.com에서 확인할 수 있습니다. 컴포넌트 및 빌딩 블록 README는 컴포넌트를 다음과 같이 분류합니다: 내비게이션 및 레이아웃(오로라 그라데이션 배경, 내비게이션 바, 라운드 필 아이콘 버튼, 고정 하단 탭 바, 액세서리 캡슐 옵션이 있는 플로팅 필 모양 탭 바 변형, 아코디언, 구분선), 콘텐츠(제목, 카드, 글로우 카드 변형, 배지, 아바타, 상태 알림, iOS 스타일의 그룹화된 리스트), 액션 및 피드백(기본, 보조 및 3차 버튼, 블러 오버레이가 포함된 모달, 토스트, 페이드 및 스케일 애니메이션이 적용된 앵커형 팝오버), 폼 요소(입력창, 텍스트 영역, 선택창, 검색 필드, iOS 스타일 토글, 체크박스, 라디오 버튼, 범위 슬라이더 및 진행 표시줄). 총 24개의 컴포넌트를 제공합니다. 컴포넌트 외에도 이 라이브러리는 glass- 접두사가 붙은 컴포넌트 클래스와 함께 flex 레이아웃, 간격, 텍스트 정렬 및 크기 조정을 위한 별도의 gl- 접두사 유틸리티 클래스를 제공합니다. 명명 규칙은 BEM과 유사한 방식을 따르므로 기존 스타일시트와 충돌하지 않습니다. 테마 및 디자인 토큰 다크 모드와 라이트 모드를 모두 지원하며, html 요소의 data-theme 속성을 설정하여 전환할 수 있습니다. 준비된 테마 토글 컴포넌트가 포함되어 있습니다. 거의 모든 시각적 값은 CSS 사용자 정의 속성으로 노출됩니다: 기본 및 텍스트 색상, 5단계의 글래스 표면 그라데이션, 3단계의 블러 레벨, 카드/버튼/입력창의 반지름, 간격 스케일, 그림자 및 인셋 토큰 등이 포함됩니다. 커스텀 브랜딩은 --gl-color-primary 및 다크 변형을 선언하여 수행합니다. 버전 1.11.0부터 그라데이션 중간 지점, 포커스 링, 버튼 글로우 및 범위 썸(thumb)이 이 값들로부터 파생됩니다. README는 사용자 정의 속성이 선언된 곳에서 대체되므로 브랜드 변수를 :root에 선언해야 한다고 명시합니다. 웹 컴포넌트 및 Shadow DOM 외부 스타일시트는 섀도우 경계를 넘지 못하므로, 라이브러리는 adoptedStyleSheets에 할당할 수 있는 공유 CSSStyleSheet인 glassSheet를 제공하는 ES 모듈과 폴백용 css 문자열 내보내기를 제공합니다. README는 일반 커스텀 요소, Hybrids.js 및 Lit에서의 사용법을 보여주며, --gl-* 사용자 정의 속성과 테마 전환이 섀도우 루트를 가로질러 여전히 작동함을 설명합니다. 설치 및 호환성 GlassKit은 link 태그를 통해 jsDelivr 또는 unpkg에서 로드하거나, npm에서 @jungherz-de/glasskit로 설치하여 CSS 또는 JavaScript에서 임포트하거나, GitHub 릴리스에서 직접 다운로드할 수 있습니다. README에 따르면 용량은 원본 51 KB, 압축 39 KB, gzip 6.5 KB이며 외부 의존성이 없습니다. 글래스 효과는 backdrop-filter에 의존합니다. Safari, Chrome/Edge, Samsung Internet에서 완전 지원하며, Firefox는 버전 103부터 지원합니다. backdrop-filter가 없는 경우에도 정의된 일반 배경색을 통해 인터페이스를 사용할 수 있습니다. 이 라이브러리는 세 가지 제품군의 CSS 기반으로 제시됩니다: GlassKit Elements는 앱 UI를 위한 바닐라 JavaScript 커스텀 요소를 제공하며, GlassKit Web은 동일한 디자인 언어를 기반으로 섹션, i18n 및 SEO가 구축된 Astro 웹사이트 템플릿입니다. 기여 시에는 BEM 유사 명명법, 기존 디자인 토큰, 다크/라이트 모드 대응, 최소 44px의 터치 타겟 확보를 권장합니다.