@civitai/theme 0.5.0 → 0.5.2
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 +31 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Framework-agnostic **design tokens**, derived at build time from civitai's real
|
|
4
4
|
Mantine theme. Ships three forms of the same `--civitai-*` token contract:
|
|
5
5
|
|
|
6
|
-
- `dist/tokens.css` — a `:root` + `[data-theme='light'|'dark']`
|
|
6
|
+
- `dist/tokens.css` — a `:root` + `[data-theme='light'|'dark']` stylesheet
|
|
7
7
|
(`--civitai-*` custom properties; `<color>` tokens registered via `@property`).
|
|
8
8
|
- typed JS — `import { tokens, darkTokens, tokenVars, tokensCss } from '@civitai/theme'`.
|
|
9
9
|
- `dist/tokens.dtcg.json` — a W3C **Design Tokens Community Group** export
|
|
@@ -108,6 +108,36 @@ mirror of the light palette and is the only thing that puts light back;
|
|
|
108
108
|
override and it wins wherever it sits, because a nearer ancestor's tokens inherit
|
|
109
109
|
over a farther one's.
|
|
110
110
|
|
|
111
|
+
### Recolouring a token (brand overrides)
|
|
112
|
+
|
|
113
|
+
🔴 **Put a token override on a SCOPE, never on `:root`.** This sheet carries no
|
|
114
|
+
cascade layer, and its `:root` / `[data-theme='…']` blocks sit at specificity
|
|
115
|
+
`0-1-0` — so a consumer's `:root { --civitai-color-primary: … }` does not
|
|
116
|
+
outrank them, it **ties**, and the last stylesheet in the document wins.
|
|
117
|
+
|
|
118
|
+
```css
|
|
119
|
+
.my-block { --civitai-color-primary: #a259ff; } /* ✅ wins in either order */
|
|
120
|
+
:root { --civitai-color-primary: #a259ff; } /* ⚠️ wins only if this sheet loaded FIRST */
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
The same goes for an inline `style="--civitai-color-primary: …"`, and a scoped
|
|
124
|
+
value reaches **inside** component shadow roots, because custom properties cross
|
|
125
|
+
the boundary.
|
|
126
|
+
|
|
127
|
+
⚠️ **The `:root` form fails silently in the order the framework produces.**
|
|
128
|
+
`@civitai/blocks-react`'s `useBlocksStyles()` calls `injectTokens()` from a
|
|
129
|
+
`useEffect`, so these tokens are appended **after** a bundler-injected app
|
|
130
|
+
stylesheet. Measured in Chromium: a `:root` override in that order resolves to
|
|
131
|
+
this theme's own value with no error — with or without `data-theme` present, so
|
|
132
|
+
the theme attribute is not the cause. The full order × route matrix is pinned in
|
|
133
|
+
`@civitai/components`' `test/token-override-order.browser.test.ts`.
|
|
134
|
+
|
|
135
|
+
**What you cannot do:** define a theme of your own. This package exports token
|
|
136
|
+
*values* and `injectTokens(doc?)`; the generator is internal, and only the
|
|
137
|
+
literal strings `light` and `dark` select a token block — `data-theme="mybrand"`
|
|
138
|
+
selects none and inherits the dark base. Recolour the token set; there is no
|
|
139
|
+
named-theme API.
|
|
140
|
+
|
|
111
141
|
There is deliberately **no** `@media (prefers-color-scheme: …)` block, in either
|
|
112
142
|
direction. The browser must not decide a Civitai surface's theme: civitai.com is
|
|
113
143
|
dark, and an App Block boots dark and takes light only from its host. ⚠️ Until
|
package/package.json
CHANGED