@phcdevworks/spectre-tokens 0.0.3 → 0.1.0
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 +22 -0
- package/dist/index.cjs +589 -45
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +66 -6
- package/dist/index.d.cts +136 -5
- package/dist/index.d.ts +136 -5
- package/dist/index.js +589 -45
- package/dist/index.js.map +1 -1
- package/package.json +5 -6
- package/tokens/core.json +274 -18
package/README.md
CHANGED
|
@@ -177,6 +177,28 @@ Always re-run final UI implementations through tools like [WebAIM Contrast Check
|
|
|
177
177
|
- `text.onPage.*` vs `text.onSurface.*`: use `onPage` for copy sitting directly on the page canvas; use `onSurface` for text inside cards, tiles, inputs, overlays, and other elevated surfaces.
|
|
178
178
|
- `component.card.text`/`textMuted`, `component.input.text`/`placeholder`, and `component.button.textDefault`/`textOnPrimary` alias the underlying `text.onSurface` roles (with `textOnPrimary` pairing white against the primary button background) to keep component defaults aligned.
|
|
179
179
|
|
|
180
|
+
## Modes
|
|
181
|
+
|
|
182
|
+
Tokens ship with a `modes` object:
|
|
183
|
+
|
|
184
|
+
- `modes.default` is the light theme.
|
|
185
|
+
- `modes.dark` is the dark theme.
|
|
186
|
+
|
|
187
|
+
The CSS generator outputs:
|
|
188
|
+
|
|
189
|
+
- `:root { ... }` for `modes.default`
|
|
190
|
+
- `:root[data-spectre-theme="dark"] { ... }` for `modes.dark`
|
|
191
|
+
|
|
192
|
+
Consumers can toggle themes by setting `data-spectre-theme="dark"` on `:root` or `<html>`.
|
|
193
|
+
|
|
194
|
+
### Key CSS variables
|
|
195
|
+
|
|
196
|
+
These variables are the contract consumed by `@phcdevworks/spectre-ui`; removing or renaming them will break downstream UI packages.
|
|
197
|
+
|
|
198
|
+
- Surface: `--sp-surface-page`, `--sp-surface-card`, `--sp-surface-input`, `--sp-surface-overlay`
|
|
199
|
+
- Text: `--sp-text-on-page-default`, `--sp-text-on-page-muted`, `--sp-text-on-surface-default`, `--sp-text-on-surface-muted`
|
|
200
|
+
- Components/buttons: `--sp-component-card-text`, `--sp-component-card-text-muted`, `--sp-component-input-text`, `--sp-component-input-placeholder`, `--sp-button-primary-bg`, `--sp-button-primary-text`, `--sp-button-secondary-bg`, `--sp-button-secondary-text`, `--sp-button-ghost-bg`, `--sp-button-ghost-text`
|
|
201
|
+
|
|
180
202
|
## Repository Layout
|
|
181
203
|
|
|
182
204
|
| Folder | Responsibility |
|