@felixgeelhaar/glossa-ui
Advanced tools
Glossa design system — utilitarian Lit primitives + design tokens. Used by the admin SPA and any consumer surface embedding glossa.
@felixgeelhaar/glossa-uiLit primitives + design tokens that power the Glossa admin SPA. Light / dark / system theming via CSS custom properties; form-associated where it matters (works inside native <form>). ~1100 LOC, ~75 KB unpacked.
pnpm add @felixgeelhaar/glossa-ui
import "@felixgeelhaar/glossa-ui/tokens.css";
import { initTheme } from "@felixgeelhaar/glossa-ui";
import "@felixgeelhaar/glossa-ui";
initTheme(); // applies persisted theme before first paint
<gl-button variant="primary">Save</gl-button>
<gl-input label="Email" type="email" required></gl-input>
<gl-badge variant="approved">approved</gl-badge>
| Tag | Notes |
|---|---|
gl-button | variants: primary / outline / ghost / danger; sizes: sm / md |
gl-input | form-associated via ElementInternals.setFormValue |
gl-select | form-associated |
gl-textarea | form-associated |
gl-card | optional header slot, flush attribute for tables |
gl-badge | variants: pending / review / approved / danger / accent / neutral |
gl-table + glTableStyles | shared CSS for hand-rolled tables that want gl-table look |
gl-tabs | emits gl-tab-change with { id } |
gl-toast + toast() | one-shot notifications, auto-dismiss |
gl-toolbar | top-bar with title + center + actions slots, brand mark built in |
gl-theme-toggle | system → light → dark cycle |
Switch theme via the data-glossa-theme attribute on <html> or <body>:
<html data-glossa-theme="dark">
initTheme() reads the persisted preference (or prefers-color-scheme if "system") and applies it before first paint to prevent flash. setTheme() and getTheme() are exposed for theme toggles.
Token names follow --gl-<group>-<role>: --gl-bg, --gl-surface, --gl-text, --gl-text-dim, --gl-accent, --gl-danger, etc. See src/tokens.css for the full set.
tokens.css references Inter as the UI font. Either load it yourself (<link> to rsms.me) or override --gl-font-ui.
MIT
FAQs
Glossa design system — utilitarian Lit primitives + design tokens. Used by the admin SPA and any consumer surface embedding glossa.
We found that @felixgeelhaar/glossa-ui demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
pnpm 11.5 now recognizes npm staged publish approvals in release metadata, preventing those releases from being mistaken for lower-trust package publishes.
Security News
Federal audit finds NIST lacked a plan to clear the NVD backlog, wasted funds on duplicate work, and delayed use of CISA data.
Research
/Security News
A mini Shai-Hulud campaign compromised Red Hat Cloud Services npm packages to steal developer and CI/CD secrets during installation.