mote.css 0.2.0 → 0.2.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/CHANGELOG.md +20 -2
- package/README.md +171 -168
- package/mote.components.css +2 -2
- package/mote.css +2 -2
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,23 @@ All notable changes to this project are documented in this file.
|
|
|
5
5
|
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
|
|
6
6
|
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
7
|
|
|
8
|
+
## [0.2.1] - 2026-10-16
|
|
9
|
+
|
|
10
|
+
### Fixed
|
|
11
|
+
|
|
12
|
+
- README: correct minified CDN URL — jsDelivr publishes the minified variant
|
|
13
|
+
of a dotted filename as `mote.min.css`, not `mote.css.min.css` (verified live).
|
|
14
|
+
|
|
15
|
+
### Changed
|
|
16
|
+
|
|
17
|
+
- Release CI moved to GitLab CI (`.gitlab-ci.yml`): tag-triggered `npm stage
|
|
18
|
+
publish` with OIDC trusted publishing — no tokens anywhere; a maintainer
|
|
19
|
+
still approves every release with 2FA. The GitHub mirror is distribution-only.
|
|
20
|
+
- Publishes now carry npm provenance attestations (the source repository is
|
|
21
|
+
public).
|
|
22
|
+
- Package metadata points to the canonical GitLab source; GitHub remains the
|
|
23
|
+
distribution mirror.
|
|
24
|
+
|
|
8
25
|
## [0.2.0] - 2026-10-15
|
|
9
26
|
|
|
10
27
|
### Added
|
|
@@ -69,8 +86,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
69
86
|
- Opt-in helpers: `.mote-container`, `.mote-muted`, `.mote-note` surfaces.
|
|
70
87
|
- Element gallery demo page (`demo.html`).
|
|
71
88
|
|
|
72
|
-
[0.2.
|
|
73
|
-
[0.
|
|
89
|
+
[0.2.1]: https://gitlab.com/abmach/mote/compare/v0.2.0...v0.2.1
|
|
90
|
+
[0.2.0]: https://gitlab.com/abmach/mote/compare/v0.1.0...v0.2.0
|
|
91
|
+
[0.1.0]: https://gitlab.com/abmach/mote/-/tags/v0.1.0
|
|
74
92
|
|
|
75
93
|
---
|
|
76
94
|
|
package/README.md
CHANGED
|
@@ -1,168 +1,171 @@
|
|
|
1
|
-
# mote.css
|
|
2
|
-
|
|
3
|
-
> The smallest thing that can carry style — a tiny, semantic, classless CSS layer for plain HTML.
|
|
4
|
-
|
|
5
|
-
A mote of styling for plain HTML: **zero dependencies, zero build step, zero classes required**. Write semantic HTML, drop in one file, and it looks like a place you'd want to stay a while — modern, warm, unobtrusive. Inspired by the quiet excellence of [oat](https://github.com/knadh/oat), with its own cozy voice.
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
</
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
- **
|
|
27
|
-
- **
|
|
28
|
-
- **
|
|
29
|
-
- **
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
<!--
|
|
40
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mote.css@0.2.0/mote.
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
npm
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
:
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
|
81
|
-
|
|
82
|
-
| `--mote-
|
|
83
|
-
| `--mote-
|
|
84
|
-
| `--mote-
|
|
85
|
-
| `--mote-
|
|
86
|
-
| `--mote-
|
|
87
|
-
| `--mote-
|
|
88
|
-
| `--mote-
|
|
89
|
-
| `--mote-
|
|
90
|
-
| `--mote-
|
|
91
|
-
| `--mote-
|
|
92
|
-
| `--mote-
|
|
93
|
-
| `--mote-
|
|
94
|
-
| `--mote-
|
|
95
|
-
| `--mote-
|
|
96
|
-
| `--mote-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
|
130
|
-
|
|
131
|
-
| `.mote-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
|
141
|
-
|
|
142
|
-
|
|
|
143
|
-
|
|
|
144
|
-
|
|
|
145
|
-
|
|
|
146
|
-
|
|
|
147
|
-
|
|
|
148
|
-
|
|
|
149
|
-
|
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
1
|
+
# mote.css
|
|
2
|
+
|
|
3
|
+
> The smallest thing that can carry style — a tiny, semantic, classless CSS layer for plain HTML.
|
|
4
|
+
|
|
5
|
+
A mote of styling for plain HTML: **zero dependencies, zero build step, zero classes required**. Write semantic HTML, drop in one file, and it looks like a place you'd want to stay a while — modern, warm, unobtrusive. Inspired by the quiet excellence of [oat](https://github.com/knadh/oat), with its own cozy voice.
|
|
6
|
+
|
|
7
|
+
Source on [GitLab](https://gitlab.com/abmach/mote) · mirrored on [GitHub](https://github.com/abmach/mote).
|
|
8
|
+
|
|
9
|
+
```html
|
|
10
|
+
<!DOCTYPE html>
|
|
11
|
+
<html lang="en">
|
|
12
|
+
<head>
|
|
13
|
+
<link rel="stylesheet" href="mote.css">
|
|
14
|
+
</head>
|
|
15
|
+
<body>
|
|
16
|
+
<main>
|
|
17
|
+
<h1>Hello, cozy.</h1>
|
|
18
|
+
<p>That's the whole setup.</p>
|
|
19
|
+
</main>
|
|
20
|
+
</body>
|
|
21
|
+
</html>
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## Principles
|
|
25
|
+
|
|
26
|
+
- **Semantic HTML is the API.** mote styles elements by what they *are* — headings, forms, `dialog`, `menu` — not by the classes they wear. Classes exist only where the platform has no semantic carrier (a "card" is not a semantic concept).
|
|
27
|
+
- **The platform before the library.** Interactive components ride on native features: `popover`, `dialog`, `<details name>`, `:user-invalid`. Where the browser can do it, mote never ships JavaScript to do it worse.
|
|
28
|
+
- **Tokens all the way down.** Every color, radius, shadow, font and status is a `--mote-*` custom property, and derived tones are computed with `color-mix()`. Status classes set tokens and nothing else — one override re-skins every note, badge and toast. Re-theme by overriding variables, never by fighting selectors.
|
|
29
|
+
- **Weightless by default.** `mote.css` styles your elements; `mote.components.css` is opt-in and CSS-only. You ship zero bytes of library JavaScript, ever.
|
|
30
|
+
- **Framework-agnostic.** It's just CSS — plain HTML, Svelte, Vue, React, HTMX, PHP, your CMS, anything.
|
|
31
|
+
- **Cozy, and unobtrusive about it.** Warm neutrals, soft edges, generous rhythm — styling that never shouts. Automatic light/dark, AA+ contrast, visible focus, reduced-motion respected.
|
|
32
|
+
|
|
33
|
+
## Install
|
|
34
|
+
|
|
35
|
+
**CDN** — jsDelivr, serving the npm package, with auto-minified variants:
|
|
36
|
+
|
|
37
|
+
```html
|
|
38
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mote.css@0.2.0/mote.css">
|
|
39
|
+
<!-- minified variant (dotted filenames minify to <name>.min.css) -->
|
|
40
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mote.css@0.2.0/mote.min.css">
|
|
41
|
+
|
|
42
|
+
<!-- optional components file -->
|
|
43
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mote.css@0.2.0/mote.components.css">
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
Use `mote.css@0` to track the latest 0.x release. CDN URLs go live once the package is published.
|
|
47
|
+
|
|
48
|
+
**npm**:
|
|
49
|
+
|
|
50
|
+
```sh
|
|
51
|
+
npm install mote.css
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
**Download**: [`mote.css`](mote.css) and [`mote.components.css`](mote.components.css) — link them directly.
|
|
55
|
+
|
|
56
|
+
## Theming
|
|
57
|
+
|
|
58
|
+
Everything is a variable. Override the ones you care about:
|
|
59
|
+
|
|
60
|
+
```css
|
|
61
|
+
:root {
|
|
62
|
+
--mote-accent: #4a7a5b; /* your brand color */
|
|
63
|
+
--mote-bg: #fffdf5; /* your paper */
|
|
64
|
+
--mote-radius: 6px; /* your edges */
|
|
65
|
+
}
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
### The token cascade
|
|
69
|
+
|
|
70
|
+
Values flow in layers, each computed from the last — retune a base token and everything downstream re-derives automatically:
|
|
71
|
+
|
|
72
|
+
1. **Base palette** — the raw tokens: `--mote-bg`, `--mote-fg`, `--mote-accent`, the four semantics, fonts, radii, shadows. Light values live in `:root`; dark values swap in via `prefers-color-scheme` or `data-theme`.
|
|
73
|
+
2. **Derived tones** — computed from the base with `color-mix()`: `--mote-accent-deep` (hover deepening), `--mote-accent-soft`, the four `--mote-*-soft` tints, `--mote-focus-ring`, `--mote-border-strong`. They can never go stale — change `--mote-accent` and every tint, ring and hover shade follows.
|
|
74
|
+
3. **Status indirection** — status classes assign `--mote-status` / `--mote-status-soft` and nothing else. Components read them with accent fallbacks: `color: var(--mote-status, var(--mote-accent-deep))`.
|
|
75
|
+
|
|
76
|
+
The consequence: theming is a handful of variable overrides, and an inline tweak (`style="--mote-status: …"`) slots into the same chain at any level.
|
|
77
|
+
|
|
78
|
+
### Token reference
|
|
79
|
+
|
|
80
|
+
| Token | Light | Dark | Used for |
|
|
81
|
+
|---|---|---|---|
|
|
82
|
+
| `--mote-bg` | `#faf9f7` | `#1c1a17` | Page background |
|
|
83
|
+
| `--mote-surface` | `#f1eee7` | `#262320` | Code blocks, cards, inputs |
|
|
84
|
+
| `--mote-fg` | `#2b2924` | `#eae6de` | Body text |
|
|
85
|
+
| `--mote-muted` | `#716a60` | `#a49c90` | Secondary text, captions |
|
|
86
|
+
| `--mote-border` | `#e6e0d4` | `#3b362f` | Rules, borders |
|
|
87
|
+
| `--mote-accent` | `#6f5486` | `#b8a1ca` | Links, buttons, focus, markers |
|
|
88
|
+
| `--mote-on-accent` | `#ffffff` | `#241d28` | Text on accent (buttons) |
|
|
89
|
+
| `--mote-success` | `#4e7d51` | `#8ab88c` | Positive semantics |
|
|
90
|
+
| `--mote-warning` | `#8a6819` | `#d4b465` | Cautious semantics |
|
|
91
|
+
| `--mote-error` | `#b34d4d` | `#d98a8a` | Destructive semantics |
|
|
92
|
+
| `--mote-info` | `#527097` | `#96b1d1` | Neutral semantics |
|
|
93
|
+
| `--mote-font` | `"Inter", system-ui, …` | | Content typeface stack |
|
|
94
|
+
| `--mote-font-mono` | `"Commit Mono", ui-monospace, …` | | Code typeface stack |
|
|
95
|
+
| `--mote-radius` | `10px` | | Default corner softness |
|
|
96
|
+
| `--mote-radius-sm` | `6px` | | Controls, inline code |
|
|
97
|
+
| `--mote-radius-lg` | `16px` | | Dialogs |
|
|
98
|
+
| `--mote-shadow` / `--mote-shadow-sm` | warm diffuse | | Elevation |
|
|
99
|
+
| `--mote-transition` | `150ms ease` | | Hover/focus timing |
|
|
100
|
+
|
|
101
|
+
Derived tones (soft tints, focus ring, hover deepening) are computed from these via `color-mix()`, so changing a base token re-themes everything consistently — no redundant palette bookkeeping.
|
|
102
|
+
|
|
103
|
+
### Dark mode
|
|
104
|
+
|
|
105
|
+
By default, mote follows the user's system preference. To force a theme, set an attribute on `<html>`:
|
|
106
|
+
|
|
107
|
+
```html
|
|
108
|
+
<html data-theme="dark"> <!-- or "light" -->
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
The accent hue is deliberately plum: it's the one family that doesn't collide with the success/warning/error/info semantics, so a link never looks like a status.
|
|
112
|
+
|
|
113
|
+
### Fonts (optional, not bundled)
|
|
114
|
+
|
|
115
|
+
mote's stacks fall back to your system fonts out of the box. For the full experience, add Inter and Commit Mono (both free; Inter is OFL, Commit Mono is OFL):
|
|
116
|
+
|
|
117
|
+
```html
|
|
118
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/inter@5/index.css">
|
|
119
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/commit-mono@5/index.css">
|
|
120
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/commit-mono@5/700.css">
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
Or self-host with `npm install @fontsource-variable/inter @fontsource/commit-mono` — or any fonts you like; the stacks are just variables.
|
|
124
|
+
|
|
125
|
+
## Opt-in helpers
|
|
126
|
+
|
|
127
|
+
mote is classless by design; these are the only escape hatches, plus status classes that every status-consuming component reads:
|
|
128
|
+
|
|
129
|
+
| Class | Purpose |
|
|
130
|
+
|---|---|
|
|
131
|
+
| `.mote-container` | Centered page wrapper: `width: min(100% - 3rem, 70rem)` |
|
|
132
|
+
| `.mote-muted` | Dimmed secondary text (also a neutral status) |
|
|
133
|
+
| `.mote-note` + status class | Tinted message surfaces |
|
|
134
|
+
| `.mote-success` · `.mote-warning` · `.mote-error` · `.mote-info` | Pure status tokens: they only set `--mote-status` / `--mote-status-soft`, so one override re-skins every note, badge and toast |
|
|
135
|
+
|
|
136
|
+
## Components
|
|
137
|
+
|
|
138
|
+
`mote.components.css` is the optional second file: opt-in components, **CSS-only**, riding on native platform features — popovers, dialogs, exclusive `<details>` groups. No JavaScript anywhere.
|
|
139
|
+
|
|
140
|
+
| Component | Hook |
|
|
141
|
+
|---|---|
|
|
142
|
+
| Cards | `.mote-card` |
|
|
143
|
+
| Badges | `.mote-badge` + optional status class |
|
|
144
|
+
| Avatars | `.mote-avatar` |
|
|
145
|
+
| Skeleton / spinner | `.mote-skeleton`, `.mote-spinner` |
|
|
146
|
+
| Sticky site header / nav pills | `.mote-header`, `.mote-nav` |
|
|
147
|
+
| Breadcrumbs | `nav[aria-label="breadcrumb"]` — semantic, no class |
|
|
148
|
+
| Tooltips | `[popover].mote-tooltip` + `popovertarget` button |
|
|
149
|
+
| Menus | `menu[popover]` + `popovertarget` button |
|
|
150
|
+
| Toasts | `[popover].mote-toast` + status class |
|
|
151
|
+
| Exclusive accordions | `<details name="group">` — the browser closes siblings |
|
|
152
|
+
| Dialog & popover entrance animations | automatic when the file is loaded |
|
|
153
|
+
|
|
154
|
+
Full live documentation with copyable markup for everything above: **[docs/index.html](docs/index.html)**.
|
|
155
|
+
|
|
156
|
+
## Browser support
|
|
157
|
+
|
|
158
|
+
Modern evergreen browsers (uses `color-mix()`, `:focus-visible`, `accent-color`, `:user-invalid`):
|
|
159
|
+
Chrome/Edge 111+, Firefox 113+, Safari 16.2+. `color-mix()`-dependent niceties degrade gracefully on older browsers.
|
|
160
|
+
|
|
161
|
+
The components file additionally uses Baseline 2024 platform features — `popover`, `<details name>`,
|
|
162
|
+
`@starting-style`, `allow-discrete` — each degrading gracefully: accordions stay independent,
|
|
163
|
+
animations become instant, on older engines.
|
|
164
|
+
|
|
165
|
+
## Demo
|
|
166
|
+
|
|
167
|
+
Open [`docs/index.html`](docs/index.html) for the full live documentation, or [`demo.html`](demo.html) for a quick gallery of every styled element.
|
|
168
|
+
|
|
169
|
+
## License
|
|
170
|
+
|
|
171
|
+
[MIT](LICENSE). Fonts referenced by the stacks (Inter, Commit Mono) are SIL OFL 1.1 — see their respective projects.
|
package/mote.components.css
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* mote.components.css — opt-in components for mote.css.
|
|
3
|
-
* v0.2.
|
|
4
|
-
* https://github.com/abmach/mote
|
|
3
|
+
* v0.2.1 · MIT
|
|
4
|
+
* https://gitlab.com/abmach/mote · mirror: https://github.com/abmach/mote
|
|
5
5
|
*
|
|
6
6
|
* Requires mote.css loaded first (provides the --mote-* tokens).
|
|
7
7
|
* Everything here is CSS-only and rides on native platform features:
|
package/mote.css
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* mote.css — a mote of styling for plain HTML.
|
|
3
|
-
* v0.2.
|
|
4
|
-
* https://github.com/abmach/mote
|
|
3
|
+
* v0.2.1 · MIT
|
|
4
|
+
* https://gitlab.com/abmach/mote · mirror: https://github.com/abmach/mote
|
|
5
5
|
*
|
|
6
6
|
* The smallest thing that can carry style:
|
|
7
7
|
* framework-agnostic, semantic, classless, zero dependencies.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mote.css",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.1",
|
|
4
4
|
"description": "A mote of styling for plain HTML — tiny, semantic, classless CSS with zero dependencies and no build step.",
|
|
5
5
|
"style": "mote.css",
|
|
6
6
|
"files": [
|
|
@@ -22,9 +22,9 @@
|
|
|
22
22
|
],
|
|
23
23
|
"repository": {
|
|
24
24
|
"type": "git",
|
|
25
|
-
"url": "git+https://
|
|
25
|
+
"url": "git+https://gitlab.com/abmach/mote.git"
|
|
26
26
|
},
|
|
27
27
|
"author": "Arthur Biazon Machado",
|
|
28
28
|
"license": "MIT",
|
|
29
|
-
"homepage": "https://
|
|
29
|
+
"homepage": "https://gitlab.com/abmach/mote#readme"
|
|
30
30
|
}
|