@felixgeelhaar/glossa-ui 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +59 -0
- package/package.json +3 -2
package/README.md
ADDED
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
# `@felixgeelhaar/glossa-ui`
|
|
2
|
+
|
|
3
|
+
Lit primitives + design tokens that power the [Glossa](https://github.com/felixgeelhaar/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.
|
|
4
|
+
|
|
5
|
+
```bash
|
|
6
|
+
pnpm add @felixgeelhaar/glossa-ui
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
## Usage
|
|
10
|
+
|
|
11
|
+
```ts
|
|
12
|
+
import "@felixgeelhaar/glossa-ui/tokens.css";
|
|
13
|
+
import { initTheme } from "@felixgeelhaar/glossa-ui";
|
|
14
|
+
import "@felixgeelhaar/glossa-ui";
|
|
15
|
+
|
|
16
|
+
initTheme(); // applies persisted theme before first paint
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
```html
|
|
20
|
+
<gl-button variant="primary">Save</gl-button>
|
|
21
|
+
<gl-input label="Email" type="email" required></gl-input>
|
|
22
|
+
<gl-badge variant="approved">approved</gl-badge>
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## Primitives
|
|
26
|
+
|
|
27
|
+
| Tag | Notes |
|
|
28
|
+
|---|---|
|
|
29
|
+
| `gl-button` | variants: `primary` / `outline` / `ghost` / `danger`; sizes: `sm` / `md` |
|
|
30
|
+
| `gl-input` | form-associated via `ElementInternals.setFormValue` |
|
|
31
|
+
| `gl-select` | form-associated |
|
|
32
|
+
| `gl-textarea` | form-associated |
|
|
33
|
+
| `gl-card` | optional `header` slot, `flush` attribute for tables |
|
|
34
|
+
| `gl-badge` | variants: `pending` / `review` / `approved` / `danger` / `accent` / `neutral` |
|
|
35
|
+
| `gl-table` + `glTableStyles` | shared CSS for hand-rolled tables that want gl-table look |
|
|
36
|
+
| `gl-tabs` | emits `gl-tab-change` with `{ id }` |
|
|
37
|
+
| `gl-toast` + `toast()` | one-shot notifications, auto-dismiss |
|
|
38
|
+
| `gl-toolbar` | top-bar with title + center + actions slots, brand mark built in |
|
|
39
|
+
| `gl-theme-toggle` | system → light → dark cycle |
|
|
40
|
+
|
|
41
|
+
## Theming
|
|
42
|
+
|
|
43
|
+
Switch theme via the `data-glossa-theme` attribute on `<html>` or `<body>`:
|
|
44
|
+
|
|
45
|
+
```html
|
|
46
|
+
<html data-glossa-theme="dark">
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
`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.
|
|
50
|
+
|
|
51
|
+
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.
|
|
52
|
+
|
|
53
|
+
## Inter font
|
|
54
|
+
|
|
55
|
+
`tokens.css` references Inter as the UI font. Either load it yourself (`<link>` to rsms.me) or override `--gl-font-ui`.
|
|
56
|
+
|
|
57
|
+
## License
|
|
58
|
+
|
|
59
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@felixgeelhaar/glossa-ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "Glossa design system — utilitarian Lit primitives + design tokens. Used by the admin SPA and any consumer surface embedding glossa.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -47,7 +47,8 @@
|
|
|
47
47
|
"node": ">=22"
|
|
48
48
|
},
|
|
49
49
|
"publishConfig": {
|
|
50
|
-
"access": "public"
|
|
50
|
+
"access": "public",
|
|
51
|
+
"provenance": true
|
|
51
52
|
},
|
|
52
53
|
"scripts": {
|
|
53
54
|
"build": "tsc -p tsconfig.json && cp src/tokens.css dist/tokens.css",
|