@civitai/theme 0.4.0 → 0.5.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 +50 -6
- package/dist/generate.js +37 -13
- package/dist/tokens.css +34 -58
- package/dist/tokens.generated.d.ts +1 -1
- package/dist/tokens.generated.js +1 -1
- package/package.json +1 -1
- package/styles.css +34 -58
package/README.md
CHANGED
|
@@ -100,12 +100,56 @@ tokens.colorPrimary; // "#228BE6"
|
|
|
100
100
|
|
|
101
101
|
Theme by setting `data-theme="light" | "dark"` on any ancestor.
|
|
102
102
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
103
|
+
**Dark is the base, and nothing here consults the OS.** `:root` carries the dark
|
|
104
|
+
palette plus `color-scheme: dark`, so an element with no `data-theme` above it is
|
|
105
|
+
dark — on any machine, under any OS preference. `[data-theme='light']` is a full
|
|
106
|
+
mirror of the light palette and is the only thing that puts light back;
|
|
107
|
+
`[data-theme='dark']` restores dark inside a light subtree. The attribute is the
|
|
108
|
+
override and it wins wherever it sits, because a nearer ancestor's tokens inherit
|
|
109
|
+
over a farther one's.
|
|
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
|
+
|
|
141
|
+
There is deliberately **no** `@media (prefers-color-scheme: …)` block, in either
|
|
142
|
+
direction. The browser must not decide a Civitai surface's theme: civitai.com is
|
|
143
|
+
dark, and an App Block boots dark and takes light only from its host. ⚠️ Until
|
|
144
|
+
`0.5.0` the opposite was true — `:root` was light and dark arrived via
|
|
145
|
+
`@media (prefers-color-scheme: dark) { :root:not([data-theme]) { … } }` — so every
|
|
146
|
+
surface that must not follow the OS had to set `data-theme` explicitly just to
|
|
147
|
+
defeat it. If you added such an attribute for that reason alone, you can drop it.
|
|
148
|
+
|
|
149
|
+
Note on the JS exports, which did **not** change: `tokens` is still the LIGHT
|
|
150
|
+
map and `darkTokens` the dark one. So `tokens` no longer describes what `:root`
|
|
151
|
+
emits — read it as "the `[data-theme='light']` values". That naming is kept
|
|
152
|
+
deliberately, so this release breaks one thing (the CSS default) rather than two.
|
|
109
153
|
|
|
110
154
|
## Build
|
|
111
155
|
|
package/dist/generate.js
CHANGED
|
@@ -280,37 +280,61 @@ export function buildArtifacts(themeOverride = civitaiThemeSource) {
|
|
|
280
280
|
// @property initial-value, so registering them would make the browser drop
|
|
281
281
|
// the whole rule — we skip them and rely on the plain custom-property
|
|
282
282
|
// declaration (which applies identically). `font` is untyped.
|
|
283
|
+
// 🔴 DARK IS THE BASE. `baseValue` is the single place that decides what an
|
|
284
|
+
// UNTHEMED element gets, and it answers DARK wherever a dark value exists.
|
|
285
|
+
// Before this, `:root` carried the light palette and the dark one arrived via
|
|
286
|
+
// `@media (prefers-color-scheme: dark) { :root:not([data-theme]) }` — i.e. an
|
|
287
|
+
// element with no `data-theme` above it followed the OS. That is the opposite
|
|
288
|
+
// of what every Civitai surface wants: civitai.com is dark, App Blocks boot
|
|
289
|
+
// dark and take light only from the host, and the OS preference is not a
|
|
290
|
+
// signal either of them should consult. Under the old shape every surface
|
|
291
|
+
// spanning the two had to set `data-theme` EXPLICITLY just to stop the OS
|
|
292
|
+
// deciding; that workaround is what this flip removes.
|
|
293
|
+
const baseValue = (varName) => dark[varName] ?? root[varName];
|
|
283
294
|
const propertyRules = meta
|
|
284
295
|
.filter((m) => m.type === 'color')
|
|
285
296
|
.map((m) => {
|
|
286
|
-
|
|
297
|
+
// The @property fallback is the no-information case, so it is dark too.
|
|
298
|
+
// ⚠️ CONSISTENCY WITH `:root`, NOT AN INDEPENDENTLY OBSERVABLE BEHAVIOUR —
|
|
299
|
+
// an earlier draft of this comment claimed it "matters for a shadow root
|
|
300
|
+
// that cannot see any ancestor's declaration", and nothing demonstrates
|
|
301
|
+
// that: @property rules are emitted for `type === 'color'` only, and the
|
|
302
|
+
// one shadow-root test case asserts `--civitai-card-border-width`, which
|
|
303
|
+
// has no @property rule at all and resolves by ordinary inheritance of the
|
|
304
|
+
// `:root` declaration. Leaving the initials light against a dark `:root`
|
|
305
|
+
// would be a real inconsistency; that is the reason, and it is the only
|
|
306
|
+
// one claimed here.
|
|
307
|
+
const initial = baseValue(m.varName);
|
|
287
308
|
return `@property ${m.varName} {\n syntax: '<color>';\n inherits: true;\n initial-value: ${initial};\n}`;
|
|
288
309
|
})
|
|
289
310
|
.join('\n');
|
|
290
|
-
const rootBlock = meta.map((m) => ` ${m.varName}: ${
|
|
291
|
-
//
|
|
292
|
-
//
|
|
311
|
+
const rootBlock = meta.map((m) => ` ${m.varName}: ${baseValue(m.varName)};`).join('\n');
|
|
312
|
+
// The light block must be a FULL mirror, not a diff: it is the only thing that
|
|
313
|
+
// can put a light value back once `:root` carries dark, and it has to win over
|
|
314
|
+
// an ambient dark ancestor (`@civitai/components` relies on that).
|
|
293
315
|
const lightBlock = meta.map((m) => ` ${m.varName}: ${root[m.varName]};`).join('\n');
|
|
316
|
+
// Still emitted, and still a diff against the shared values. It is NOT
|
|
317
|
+
// redundant now that `:root` is dark: it is what restores dark for a subtree
|
|
318
|
+
// nested inside a `[data-theme='light']` one.
|
|
294
319
|
const darkDecls = meta
|
|
295
320
|
.filter((m) => m.varName in dark)
|
|
296
321
|
.map((m) => `${m.varName}: ${dark[m.varName]};`);
|
|
297
322
|
const darkBlock = darkDecls.map((d) => ` ${d}`).join('\n');
|
|
298
|
-
const nestedDarkBlock = darkDecls.map((d) => ` ${d}`).join('\n');
|
|
299
323
|
// Not a token: it tells the UA which scheme to paint NATIVE controls in.
|
|
300
324
|
// Without it a number input's spinner, a select's caret and a scrollbar stay
|
|
301
325
|
// light against a dark surface. It inherits, so it reaches shadow roots too.
|
|
302
326
|
const scheme = (value) => ` color-scheme: ${value};`;
|
|
303
|
-
//
|
|
304
|
-
//
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
327
|
+
// 🔴 NO `@media (prefers-color-scheme: …)` BLOCK — deliberately, and do not
|
|
328
|
+
// add one in either direction. The stylesheet has exactly two answers now:
|
|
329
|
+
// the dark base, and whatever `[data-theme]` an ancestor declares. An OS-light
|
|
330
|
+
// block would reintroduce the behaviour this flip removed, and an OS-dark one
|
|
331
|
+
// is already the base. Pinned by `test/generation-parity.test.ts` and by the
|
|
332
|
+
// dark-base contract tests in `@civitai/components`.
|
|
308
333
|
const tokensCss = `${AUTOGEN_BANNER}\n` +
|
|
309
334
|
`${propertyRules}\n\n` +
|
|
310
|
-
`:root {\n${scheme('
|
|
335
|
+
`:root {\n${scheme('dark')}\n${rootBlock}\n}\n\n` +
|
|
311
336
|
`[data-theme='light'] {\n${scheme('light')}\n${lightBlock}\n}\n\n` +
|
|
312
|
-
`[data-theme='dark'] {\n${scheme('dark')}\n${darkBlock}\n}\n
|
|
313
|
-
preferenceBlock;
|
|
337
|
+
`[data-theme='dark'] {\n${scheme('dark')}\n${darkBlock}\n}\n`;
|
|
314
338
|
// ---- tokens.dtcg.json (W3C DTCG 2025.10) ----
|
|
315
339
|
const dtcg = {};
|
|
316
340
|
for (const m of meta) {
|
package/dist/tokens.css
CHANGED
|
@@ -3,42 +3,42 @@
|
|
|
3
3
|
@property --civitai-color-text {
|
|
4
4
|
syntax: '<color>';
|
|
5
5
|
inherits: true;
|
|
6
|
-
initial-value: #
|
|
6
|
+
initial-value: #C1C2C5;
|
|
7
7
|
}
|
|
8
8
|
@property --civitai-color-text-dimmed {
|
|
9
9
|
syntax: '<color>';
|
|
10
10
|
inherits: true;
|
|
11
|
-
initial-value: #
|
|
11
|
+
initial-value: #8c8fa3;
|
|
12
12
|
}
|
|
13
13
|
@property --civitai-color-body {
|
|
14
14
|
syntax: '<color>';
|
|
15
15
|
inherits: true;
|
|
16
|
-
initial-value: #
|
|
16
|
+
initial-value: #1A1B1E;
|
|
17
17
|
}
|
|
18
18
|
@property --civitai-color-surface {
|
|
19
19
|
syntax: '<color>';
|
|
20
20
|
inherits: true;
|
|
21
|
-
initial-value: #
|
|
21
|
+
initial-value: #25262B;
|
|
22
22
|
}
|
|
23
23
|
@property --civitai-color-surface-2 {
|
|
24
24
|
syntax: '<color>';
|
|
25
25
|
inherits: true;
|
|
26
|
-
initial-value: #
|
|
26
|
+
initial-value: #25262B;
|
|
27
27
|
}
|
|
28
28
|
@property --civitai-color-border {
|
|
29
29
|
syntax: '<color>';
|
|
30
30
|
inherits: true;
|
|
31
|
-
initial-value: #
|
|
31
|
+
initial-value: #373A40;
|
|
32
32
|
}
|
|
33
33
|
@property --civitai-color-primary {
|
|
34
34
|
syntax: '<color>';
|
|
35
35
|
inherits: true;
|
|
36
|
-
initial-value: #
|
|
36
|
+
initial-value: #1971C2;
|
|
37
37
|
}
|
|
38
38
|
@property --civitai-color-primary-hover {
|
|
39
39
|
syntax: '<color>';
|
|
40
40
|
inherits: true;
|
|
41
|
-
initial-value: #
|
|
41
|
+
initial-value: #1864AB;
|
|
42
42
|
}
|
|
43
43
|
@property --civitai-color-primary-fg {
|
|
44
44
|
syntax: '<color>';
|
|
@@ -48,27 +48,27 @@
|
|
|
48
48
|
@property --civitai-color-primary-light {
|
|
49
49
|
syntax: '<color>';
|
|
50
50
|
inherits: true;
|
|
51
|
-
initial-value: rgba(34, 139, 230, 0.
|
|
51
|
+
initial-value: rgba(34, 139, 230, 0.15);
|
|
52
52
|
}
|
|
53
53
|
@property --civitai-color-error {
|
|
54
54
|
syntax: '<color>';
|
|
55
55
|
inherits: true;
|
|
56
|
-
initial-value: #
|
|
56
|
+
initial-value: #e03131;
|
|
57
57
|
}
|
|
58
58
|
@property --civitai-color-success {
|
|
59
59
|
syntax: '<color>';
|
|
60
60
|
inherits: true;
|
|
61
|
-
initial-value: #
|
|
61
|
+
initial-value: #326D5C;
|
|
62
62
|
}
|
|
63
63
|
@property --civitai-color-warning {
|
|
64
64
|
syntax: '<color>';
|
|
65
65
|
inherits: true;
|
|
66
|
-
initial-value: #
|
|
66
|
+
initial-value: #e8590c;
|
|
67
67
|
}
|
|
68
68
|
@property --civitai-color-info {
|
|
69
69
|
syntax: '<color>';
|
|
70
70
|
inherits: true;
|
|
71
|
-
initial-value: #
|
|
71
|
+
initial-value: #1971C2;
|
|
72
72
|
}
|
|
73
73
|
@property --civitai-color-gray-0 {
|
|
74
74
|
syntax: '<color>';
|
|
@@ -123,38 +123,38 @@
|
|
|
123
123
|
@property --civitai-color-track {
|
|
124
124
|
syntax: '<color>';
|
|
125
125
|
inherits: true;
|
|
126
|
-
initial-value: #
|
|
126
|
+
initial-value: #25262B;
|
|
127
127
|
}
|
|
128
128
|
@property --civitai-color-segmented-bg {
|
|
129
129
|
syntax: '<color>';
|
|
130
130
|
inherits: true;
|
|
131
|
-
initial-value: #
|
|
131
|
+
initial-value: #25262B;
|
|
132
132
|
}
|
|
133
133
|
@property --civitai-color-media-placeholder {
|
|
134
134
|
syntax: '<color>';
|
|
135
135
|
inherits: true;
|
|
136
|
-
initial-value: #
|
|
136
|
+
initial-value: #25262B;
|
|
137
137
|
}
|
|
138
138
|
|
|
139
139
|
:root {
|
|
140
|
-
color-scheme:
|
|
140
|
+
color-scheme: dark;
|
|
141
141
|
--civitai-font: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
|
|
142
142
|
--civitai-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
|
|
143
143
|
--civitai-radius: 0.25rem;
|
|
144
|
-
--civitai-color-text: #
|
|
145
|
-
--civitai-color-text-dimmed: #
|
|
146
|
-
--civitai-color-body: #
|
|
147
|
-
--civitai-color-surface: #
|
|
148
|
-
--civitai-color-surface-2: #
|
|
149
|
-
--civitai-color-border: #
|
|
150
|
-
--civitai-color-primary: #
|
|
151
|
-
--civitai-color-primary-hover: #
|
|
144
|
+
--civitai-color-text: #C1C2C5;
|
|
145
|
+
--civitai-color-text-dimmed: #8c8fa3;
|
|
146
|
+
--civitai-color-body: #1A1B1E;
|
|
147
|
+
--civitai-color-surface: #25262B;
|
|
148
|
+
--civitai-color-surface-2: #25262B;
|
|
149
|
+
--civitai-color-border: #373A40;
|
|
150
|
+
--civitai-color-primary: #1971C2;
|
|
151
|
+
--civitai-color-primary-hover: #1864AB;
|
|
152
152
|
--civitai-color-primary-fg: #fefefe;
|
|
153
|
-
--civitai-color-primary-light: rgba(34, 139, 230, 0.
|
|
154
|
-
--civitai-color-error: #
|
|
155
|
-
--civitai-color-success: #
|
|
156
|
-
--civitai-color-warning: #
|
|
157
|
-
--civitai-color-info: #
|
|
153
|
+
--civitai-color-primary-light: rgba(34, 139, 230, 0.15);
|
|
154
|
+
--civitai-color-error: #e03131;
|
|
155
|
+
--civitai-color-success: #326D5C;
|
|
156
|
+
--civitai-color-warning: #e8590c;
|
|
157
|
+
--civitai-color-info: #1971C2;
|
|
158
158
|
--civitai-color-gray-0: #f8f9fa;
|
|
159
159
|
--civitai-color-gray-1: #f1f3f5;
|
|
160
160
|
--civitai-color-gray-2: #e9ecef;
|
|
@@ -170,10 +170,10 @@
|
|
|
170
170
|
--civitai-bp-md: 1024px;
|
|
171
171
|
--civitai-bp-lg: 1184px;
|
|
172
172
|
--civitai-bp-xl: 1440px;
|
|
173
|
-
--civitai-card-border-width:
|
|
174
|
-
--civitai-color-track: #
|
|
175
|
-
--civitai-color-segmented-bg: #
|
|
176
|
-
--civitai-color-media-placeholder: #
|
|
173
|
+
--civitai-card-border-width: 0;
|
|
174
|
+
--civitai-color-track: #25262B;
|
|
175
|
+
--civitai-color-segmented-bg: #25262B;
|
|
176
|
+
--civitai-color-media-placeholder: #25262B;
|
|
177
177
|
}
|
|
178
178
|
|
|
179
179
|
[data-theme='light'] {
|
|
@@ -237,27 +237,3 @@
|
|
|
237
237
|
--civitai-color-segmented-bg: #25262B;
|
|
238
238
|
--civitai-color-media-placeholder: #25262B;
|
|
239
239
|
}
|
|
240
|
-
|
|
241
|
-
@media (prefers-color-scheme: dark) {
|
|
242
|
-
:root:not([data-theme]) {
|
|
243
|
-
color-scheme: dark;
|
|
244
|
-
--civitai-color-text: #C1C2C5;
|
|
245
|
-
--civitai-color-text-dimmed: #8c8fa3;
|
|
246
|
-
--civitai-color-body: #1A1B1E;
|
|
247
|
-
--civitai-color-surface: #25262B;
|
|
248
|
-
--civitai-color-surface-2: #25262B;
|
|
249
|
-
--civitai-color-border: #373A40;
|
|
250
|
-
--civitai-color-primary: #1971C2;
|
|
251
|
-
--civitai-color-primary-hover: #1864AB;
|
|
252
|
-
--civitai-color-primary-fg: #fefefe;
|
|
253
|
-
--civitai-color-primary-light: rgba(34, 139, 230, 0.15);
|
|
254
|
-
--civitai-color-error: #e03131;
|
|
255
|
-
--civitai-color-success: #326D5C;
|
|
256
|
-
--civitai-color-warning: #e8590c;
|
|
257
|
-
--civitai-color-info: #1971C2;
|
|
258
|
-
--civitai-card-border-width: 0;
|
|
259
|
-
--civitai-color-track: #25262B;
|
|
260
|
-
--civitai-color-segmented-bg: #25262B;
|
|
261
|
-
--civitai-color-media-placeholder: #25262B;
|
|
262
|
-
}
|
|
263
|
-
}
|
|
@@ -98,6 +98,6 @@ export declare const tokenVars: {
|
|
|
98
98
|
readonly colorMediaPlaceholder: "var(--civitai-color-media-placeholder)";
|
|
99
99
|
};
|
|
100
100
|
/** The full `--civitai-*` stylesheet (`:root` + light/dark). Also emitted to dist/tokens.css. */
|
|
101
|
-
export declare const tokensCss = "/* AUTOGENERATED by @civitai/theme (scripts/build-tokens.ts). DO NOT EDIT.\n Regenerate: pnpm --filter @civitai/theme build. Guarded by generation-parity test. */\n@property --civitai-color-text {\n syntax: '<color>';\n inherits: true;\n initial-value: #
|
|
101
|
+
export declare const tokensCss = "/* AUTOGENERATED by @civitai/theme (scripts/build-tokens.ts). DO NOT EDIT.\n Regenerate: pnpm --filter @civitai/theme build. Guarded by generation-parity test. */\n@property --civitai-color-text {\n syntax: '<color>';\n inherits: true;\n initial-value: #C1C2C5;\n}\n@property --civitai-color-text-dimmed {\n syntax: '<color>';\n inherits: true;\n initial-value: #8c8fa3;\n}\n@property --civitai-color-body {\n syntax: '<color>';\n inherits: true;\n initial-value: #1A1B1E;\n}\n@property --civitai-color-surface {\n syntax: '<color>';\n inherits: true;\n initial-value: #25262B;\n}\n@property --civitai-color-surface-2 {\n syntax: '<color>';\n inherits: true;\n initial-value: #25262B;\n}\n@property --civitai-color-border {\n syntax: '<color>';\n inherits: true;\n initial-value: #373A40;\n}\n@property --civitai-color-primary {\n syntax: '<color>';\n inherits: true;\n initial-value: #1971C2;\n}\n@property --civitai-color-primary-hover {\n syntax: '<color>';\n inherits: true;\n initial-value: #1864AB;\n}\n@property --civitai-color-primary-fg {\n syntax: '<color>';\n inherits: true;\n initial-value: #fefefe;\n}\n@property --civitai-color-primary-light {\n syntax: '<color>';\n inherits: true;\n initial-value: rgba(34, 139, 230, 0.15);\n}\n@property --civitai-color-error {\n syntax: '<color>';\n inherits: true;\n initial-value: #e03131;\n}\n@property --civitai-color-success {\n syntax: '<color>';\n inherits: true;\n initial-value: #326D5C;\n}\n@property --civitai-color-warning {\n syntax: '<color>';\n inherits: true;\n initial-value: #e8590c;\n}\n@property --civitai-color-info {\n syntax: '<color>';\n inherits: true;\n initial-value: #1971C2;\n}\n@property --civitai-color-gray-0 {\n syntax: '<color>';\n inherits: true;\n initial-value: #f8f9fa;\n}\n@property --civitai-color-gray-1 {\n syntax: '<color>';\n inherits: true;\n initial-value: #f1f3f5;\n}\n@property --civitai-color-gray-2 {\n syntax: '<color>';\n inherits: true;\n initial-value: #e9ecef;\n}\n@property --civitai-color-gray-3 {\n syntax: '<color>';\n inherits: true;\n initial-value: #dee2e6;\n}\n@property --civitai-color-gray-4 {\n syntax: '<color>';\n inherits: true;\n initial-value: #ced4da;\n}\n@property --civitai-color-gray-5 {\n syntax: '<color>';\n inherits: true;\n initial-value: #adb5bd;\n}\n@property --civitai-color-gray-6 {\n syntax: '<color>';\n inherits: true;\n initial-value: #868e96;\n}\n@property --civitai-color-gray-7 {\n syntax: '<color>';\n inherits: true;\n initial-value: #495057;\n}\n@property --civitai-color-gray-8 {\n syntax: '<color>';\n inherits: true;\n initial-value: #343a40;\n}\n@property --civitai-color-gray-9 {\n syntax: '<color>';\n inherits: true;\n initial-value: #212529;\n}\n@property --civitai-color-track {\n syntax: '<color>';\n inherits: true;\n initial-value: #25262B;\n}\n@property --civitai-color-segmented-bg {\n syntax: '<color>';\n inherits: true;\n initial-value: #25262B;\n}\n@property --civitai-color-media-placeholder {\n syntax: '<color>';\n inherits: true;\n initial-value: #25262B;\n}\n\n:root {\n color-scheme: dark;\n --civitai-font: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;\n --civitai-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;\n --civitai-radius: 0.25rem;\n --civitai-color-text: #C1C2C5;\n --civitai-color-text-dimmed: #8c8fa3;\n --civitai-color-body: #1A1B1E;\n --civitai-color-surface: #25262B;\n --civitai-color-surface-2: #25262B;\n --civitai-color-border: #373A40;\n --civitai-color-primary: #1971C2;\n --civitai-color-primary-hover: #1864AB;\n --civitai-color-primary-fg: #fefefe;\n --civitai-color-primary-light: rgba(34, 139, 230, 0.15);\n --civitai-color-error: #e03131;\n --civitai-color-success: #326D5C;\n --civitai-color-warning: #e8590c;\n --civitai-color-info: #1971C2;\n --civitai-color-gray-0: #f8f9fa;\n --civitai-color-gray-1: #f1f3f5;\n --civitai-color-gray-2: #e9ecef;\n --civitai-color-gray-3: #dee2e6;\n --civitai-color-gray-4: #ced4da;\n --civitai-color-gray-5: #adb5bd;\n --civitai-color-gray-6: #868e96;\n --civitai-color-gray-7: #495057;\n --civitai-color-gray-8: #343a40;\n --civitai-color-gray-9: #212529;\n --civitai-bp-xs: 480px;\n --civitai-bp-sm: 768px;\n --civitai-bp-md: 1024px;\n --civitai-bp-lg: 1184px;\n --civitai-bp-xl: 1440px;\n --civitai-card-border-width: 0;\n --civitai-color-track: #25262B;\n --civitai-color-segmented-bg: #25262B;\n --civitai-color-media-placeholder: #25262B;\n}\n\n[data-theme='light'] {\n color-scheme: light;\n --civitai-font: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;\n --civitai-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;\n --civitai-radius: 0.25rem;\n --civitai-color-text: #222;\n --civitai-color-text-dimmed: #868e96;\n --civitai-color-body: #fefefe;\n --civitai-color-surface: #fefefe;\n --civitai-color-surface-2: #fefefe;\n --civitai-color-border: #ced4da;\n --civitai-color-primary: #228BE6;\n --civitai-color-primary-hover: #1C7ED6;\n --civitai-color-primary-fg: #fefefe;\n --civitai-color-primary-light: rgba(34, 139, 230, 0.1);\n --civitai-color-error: #fa5252;\n --civitai-color-success: #299C7A;\n --civitai-color-warning: #fd7e14;\n --civitai-color-info: #228BE6;\n --civitai-color-gray-0: #f8f9fa;\n --civitai-color-gray-1: #f1f3f5;\n --civitai-color-gray-2: #e9ecef;\n --civitai-color-gray-3: #dee2e6;\n --civitai-color-gray-4: #ced4da;\n --civitai-color-gray-5: #adb5bd;\n --civitai-color-gray-6: #868e96;\n --civitai-color-gray-7: #495057;\n --civitai-color-gray-8: #343a40;\n --civitai-color-gray-9: #212529;\n --civitai-bp-xs: 480px;\n --civitai-bp-sm: 768px;\n --civitai-bp-md: 1024px;\n --civitai-bp-lg: 1184px;\n --civitai-bp-xl: 1440px;\n --civitai-card-border-width: 1px;\n --civitai-color-track: #e9ecef;\n --civitai-color-segmented-bg: #f1f3f5;\n --civitai-color-media-placeholder: #e9ecef;\n}\n\n[data-theme='dark'] {\n color-scheme: dark;\n --civitai-color-text: #C1C2C5;\n --civitai-color-text-dimmed: #8c8fa3;\n --civitai-color-body: #1A1B1E;\n --civitai-color-surface: #25262B;\n --civitai-color-surface-2: #25262B;\n --civitai-color-border: #373A40;\n --civitai-color-primary: #1971C2;\n --civitai-color-primary-hover: #1864AB;\n --civitai-color-primary-fg: #fefefe;\n --civitai-color-primary-light: rgba(34, 139, 230, 0.15);\n --civitai-color-error: #e03131;\n --civitai-color-success: #326D5C;\n --civitai-color-warning: #e8590c;\n --civitai-color-info: #1971C2;\n --civitai-card-border-width: 0;\n --civitai-color-track: #25262B;\n --civitai-color-segmented-bg: #25262B;\n --civitai-color-media-placeholder: #25262B;\n}\n";
|
|
102
102
|
export type TokenName = keyof typeof tokens;
|
|
103
103
|
//# sourceMappingURL=tokens.generated.d.ts.map
|
package/dist/tokens.generated.js
CHANGED
|
@@ -100,5 +100,5 @@ export const tokenVars = {
|
|
|
100
100
|
"colorMediaPlaceholder": "var(--civitai-color-media-placeholder)"
|
|
101
101
|
};
|
|
102
102
|
/** The full `--civitai-*` stylesheet (`:root` + light/dark). Also emitted to dist/tokens.css. */
|
|
103
|
-
export const tokensCss = "/* AUTOGENERATED by @civitai/theme (scripts/build-tokens.ts). DO NOT EDIT.\n Regenerate: pnpm --filter @civitai/theme build. Guarded by generation-parity test. */\n@property --civitai-color-text {\n syntax: '<color>';\n inherits: true;\n initial-value: #
|
|
103
|
+
export const tokensCss = "/* AUTOGENERATED by @civitai/theme (scripts/build-tokens.ts). DO NOT EDIT.\n Regenerate: pnpm --filter @civitai/theme build. Guarded by generation-parity test. */\n@property --civitai-color-text {\n syntax: '<color>';\n inherits: true;\n initial-value: #C1C2C5;\n}\n@property --civitai-color-text-dimmed {\n syntax: '<color>';\n inherits: true;\n initial-value: #8c8fa3;\n}\n@property --civitai-color-body {\n syntax: '<color>';\n inherits: true;\n initial-value: #1A1B1E;\n}\n@property --civitai-color-surface {\n syntax: '<color>';\n inherits: true;\n initial-value: #25262B;\n}\n@property --civitai-color-surface-2 {\n syntax: '<color>';\n inherits: true;\n initial-value: #25262B;\n}\n@property --civitai-color-border {\n syntax: '<color>';\n inherits: true;\n initial-value: #373A40;\n}\n@property --civitai-color-primary {\n syntax: '<color>';\n inherits: true;\n initial-value: #1971C2;\n}\n@property --civitai-color-primary-hover {\n syntax: '<color>';\n inherits: true;\n initial-value: #1864AB;\n}\n@property --civitai-color-primary-fg {\n syntax: '<color>';\n inherits: true;\n initial-value: #fefefe;\n}\n@property --civitai-color-primary-light {\n syntax: '<color>';\n inherits: true;\n initial-value: rgba(34, 139, 230, 0.15);\n}\n@property --civitai-color-error {\n syntax: '<color>';\n inherits: true;\n initial-value: #e03131;\n}\n@property --civitai-color-success {\n syntax: '<color>';\n inherits: true;\n initial-value: #326D5C;\n}\n@property --civitai-color-warning {\n syntax: '<color>';\n inherits: true;\n initial-value: #e8590c;\n}\n@property --civitai-color-info {\n syntax: '<color>';\n inherits: true;\n initial-value: #1971C2;\n}\n@property --civitai-color-gray-0 {\n syntax: '<color>';\n inherits: true;\n initial-value: #f8f9fa;\n}\n@property --civitai-color-gray-1 {\n syntax: '<color>';\n inherits: true;\n initial-value: #f1f3f5;\n}\n@property --civitai-color-gray-2 {\n syntax: '<color>';\n inherits: true;\n initial-value: #e9ecef;\n}\n@property --civitai-color-gray-3 {\n syntax: '<color>';\n inherits: true;\n initial-value: #dee2e6;\n}\n@property --civitai-color-gray-4 {\n syntax: '<color>';\n inherits: true;\n initial-value: #ced4da;\n}\n@property --civitai-color-gray-5 {\n syntax: '<color>';\n inherits: true;\n initial-value: #adb5bd;\n}\n@property --civitai-color-gray-6 {\n syntax: '<color>';\n inherits: true;\n initial-value: #868e96;\n}\n@property --civitai-color-gray-7 {\n syntax: '<color>';\n inherits: true;\n initial-value: #495057;\n}\n@property --civitai-color-gray-8 {\n syntax: '<color>';\n inherits: true;\n initial-value: #343a40;\n}\n@property --civitai-color-gray-9 {\n syntax: '<color>';\n inherits: true;\n initial-value: #212529;\n}\n@property --civitai-color-track {\n syntax: '<color>';\n inherits: true;\n initial-value: #25262B;\n}\n@property --civitai-color-segmented-bg {\n syntax: '<color>';\n inherits: true;\n initial-value: #25262B;\n}\n@property --civitai-color-media-placeholder {\n syntax: '<color>';\n inherits: true;\n initial-value: #25262B;\n}\n\n:root {\n color-scheme: dark;\n --civitai-font: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;\n --civitai-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;\n --civitai-radius: 0.25rem;\n --civitai-color-text: #C1C2C5;\n --civitai-color-text-dimmed: #8c8fa3;\n --civitai-color-body: #1A1B1E;\n --civitai-color-surface: #25262B;\n --civitai-color-surface-2: #25262B;\n --civitai-color-border: #373A40;\n --civitai-color-primary: #1971C2;\n --civitai-color-primary-hover: #1864AB;\n --civitai-color-primary-fg: #fefefe;\n --civitai-color-primary-light: rgba(34, 139, 230, 0.15);\n --civitai-color-error: #e03131;\n --civitai-color-success: #326D5C;\n --civitai-color-warning: #e8590c;\n --civitai-color-info: #1971C2;\n --civitai-color-gray-0: #f8f9fa;\n --civitai-color-gray-1: #f1f3f5;\n --civitai-color-gray-2: #e9ecef;\n --civitai-color-gray-3: #dee2e6;\n --civitai-color-gray-4: #ced4da;\n --civitai-color-gray-5: #adb5bd;\n --civitai-color-gray-6: #868e96;\n --civitai-color-gray-7: #495057;\n --civitai-color-gray-8: #343a40;\n --civitai-color-gray-9: #212529;\n --civitai-bp-xs: 480px;\n --civitai-bp-sm: 768px;\n --civitai-bp-md: 1024px;\n --civitai-bp-lg: 1184px;\n --civitai-bp-xl: 1440px;\n --civitai-card-border-width: 0;\n --civitai-color-track: #25262B;\n --civitai-color-segmented-bg: #25262B;\n --civitai-color-media-placeholder: #25262B;\n}\n\n[data-theme='light'] {\n color-scheme: light;\n --civitai-font: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;\n --civitai-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;\n --civitai-radius: 0.25rem;\n --civitai-color-text: #222;\n --civitai-color-text-dimmed: #868e96;\n --civitai-color-body: #fefefe;\n --civitai-color-surface: #fefefe;\n --civitai-color-surface-2: #fefefe;\n --civitai-color-border: #ced4da;\n --civitai-color-primary: #228BE6;\n --civitai-color-primary-hover: #1C7ED6;\n --civitai-color-primary-fg: #fefefe;\n --civitai-color-primary-light: rgba(34, 139, 230, 0.1);\n --civitai-color-error: #fa5252;\n --civitai-color-success: #299C7A;\n --civitai-color-warning: #fd7e14;\n --civitai-color-info: #228BE6;\n --civitai-color-gray-0: #f8f9fa;\n --civitai-color-gray-1: #f1f3f5;\n --civitai-color-gray-2: #e9ecef;\n --civitai-color-gray-3: #dee2e6;\n --civitai-color-gray-4: #ced4da;\n --civitai-color-gray-5: #adb5bd;\n --civitai-color-gray-6: #868e96;\n --civitai-color-gray-7: #495057;\n --civitai-color-gray-8: #343a40;\n --civitai-color-gray-9: #212529;\n --civitai-bp-xs: 480px;\n --civitai-bp-sm: 768px;\n --civitai-bp-md: 1024px;\n --civitai-bp-lg: 1184px;\n --civitai-bp-xl: 1440px;\n --civitai-card-border-width: 1px;\n --civitai-color-track: #e9ecef;\n --civitai-color-segmented-bg: #f1f3f5;\n --civitai-color-media-placeholder: #e9ecef;\n}\n\n[data-theme='dark'] {\n color-scheme: dark;\n --civitai-color-text: #C1C2C5;\n --civitai-color-text-dimmed: #8c8fa3;\n --civitai-color-body: #1A1B1E;\n --civitai-color-surface: #25262B;\n --civitai-color-surface-2: #25262B;\n --civitai-color-border: #373A40;\n --civitai-color-primary: #1971C2;\n --civitai-color-primary-hover: #1864AB;\n --civitai-color-primary-fg: #fefefe;\n --civitai-color-primary-light: rgba(34, 139, 230, 0.15);\n --civitai-color-error: #e03131;\n --civitai-color-success: #326D5C;\n --civitai-color-warning: #e8590c;\n --civitai-color-info: #1971C2;\n --civitai-card-border-width: 0;\n --civitai-color-track: #25262B;\n --civitai-color-segmented-bg: #25262B;\n --civitai-color-media-placeholder: #25262B;\n}\n";
|
|
104
104
|
//# sourceMappingURL=tokens.generated.js.map
|
package/package.json
CHANGED
package/styles.css
CHANGED
|
@@ -3,42 +3,42 @@
|
|
|
3
3
|
@property --civitai-color-text {
|
|
4
4
|
syntax: '<color>';
|
|
5
5
|
inherits: true;
|
|
6
|
-
initial-value: #
|
|
6
|
+
initial-value: #C1C2C5;
|
|
7
7
|
}
|
|
8
8
|
@property --civitai-color-text-dimmed {
|
|
9
9
|
syntax: '<color>';
|
|
10
10
|
inherits: true;
|
|
11
|
-
initial-value: #
|
|
11
|
+
initial-value: #8c8fa3;
|
|
12
12
|
}
|
|
13
13
|
@property --civitai-color-body {
|
|
14
14
|
syntax: '<color>';
|
|
15
15
|
inherits: true;
|
|
16
|
-
initial-value: #
|
|
16
|
+
initial-value: #1A1B1E;
|
|
17
17
|
}
|
|
18
18
|
@property --civitai-color-surface {
|
|
19
19
|
syntax: '<color>';
|
|
20
20
|
inherits: true;
|
|
21
|
-
initial-value: #
|
|
21
|
+
initial-value: #25262B;
|
|
22
22
|
}
|
|
23
23
|
@property --civitai-color-surface-2 {
|
|
24
24
|
syntax: '<color>';
|
|
25
25
|
inherits: true;
|
|
26
|
-
initial-value: #
|
|
26
|
+
initial-value: #25262B;
|
|
27
27
|
}
|
|
28
28
|
@property --civitai-color-border {
|
|
29
29
|
syntax: '<color>';
|
|
30
30
|
inherits: true;
|
|
31
|
-
initial-value: #
|
|
31
|
+
initial-value: #373A40;
|
|
32
32
|
}
|
|
33
33
|
@property --civitai-color-primary {
|
|
34
34
|
syntax: '<color>';
|
|
35
35
|
inherits: true;
|
|
36
|
-
initial-value: #
|
|
36
|
+
initial-value: #1971C2;
|
|
37
37
|
}
|
|
38
38
|
@property --civitai-color-primary-hover {
|
|
39
39
|
syntax: '<color>';
|
|
40
40
|
inherits: true;
|
|
41
|
-
initial-value: #
|
|
41
|
+
initial-value: #1864AB;
|
|
42
42
|
}
|
|
43
43
|
@property --civitai-color-primary-fg {
|
|
44
44
|
syntax: '<color>';
|
|
@@ -48,27 +48,27 @@
|
|
|
48
48
|
@property --civitai-color-primary-light {
|
|
49
49
|
syntax: '<color>';
|
|
50
50
|
inherits: true;
|
|
51
|
-
initial-value: rgba(34, 139, 230, 0.
|
|
51
|
+
initial-value: rgba(34, 139, 230, 0.15);
|
|
52
52
|
}
|
|
53
53
|
@property --civitai-color-error {
|
|
54
54
|
syntax: '<color>';
|
|
55
55
|
inherits: true;
|
|
56
|
-
initial-value: #
|
|
56
|
+
initial-value: #e03131;
|
|
57
57
|
}
|
|
58
58
|
@property --civitai-color-success {
|
|
59
59
|
syntax: '<color>';
|
|
60
60
|
inherits: true;
|
|
61
|
-
initial-value: #
|
|
61
|
+
initial-value: #326D5C;
|
|
62
62
|
}
|
|
63
63
|
@property --civitai-color-warning {
|
|
64
64
|
syntax: '<color>';
|
|
65
65
|
inherits: true;
|
|
66
|
-
initial-value: #
|
|
66
|
+
initial-value: #e8590c;
|
|
67
67
|
}
|
|
68
68
|
@property --civitai-color-info {
|
|
69
69
|
syntax: '<color>';
|
|
70
70
|
inherits: true;
|
|
71
|
-
initial-value: #
|
|
71
|
+
initial-value: #1971C2;
|
|
72
72
|
}
|
|
73
73
|
@property --civitai-color-gray-0 {
|
|
74
74
|
syntax: '<color>';
|
|
@@ -123,38 +123,38 @@
|
|
|
123
123
|
@property --civitai-color-track {
|
|
124
124
|
syntax: '<color>';
|
|
125
125
|
inherits: true;
|
|
126
|
-
initial-value: #
|
|
126
|
+
initial-value: #25262B;
|
|
127
127
|
}
|
|
128
128
|
@property --civitai-color-segmented-bg {
|
|
129
129
|
syntax: '<color>';
|
|
130
130
|
inherits: true;
|
|
131
|
-
initial-value: #
|
|
131
|
+
initial-value: #25262B;
|
|
132
132
|
}
|
|
133
133
|
@property --civitai-color-media-placeholder {
|
|
134
134
|
syntax: '<color>';
|
|
135
135
|
inherits: true;
|
|
136
|
-
initial-value: #
|
|
136
|
+
initial-value: #25262B;
|
|
137
137
|
}
|
|
138
138
|
|
|
139
139
|
:root {
|
|
140
|
-
color-scheme:
|
|
140
|
+
color-scheme: dark;
|
|
141
141
|
--civitai-font: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
|
|
142
142
|
--civitai-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
|
|
143
143
|
--civitai-radius: 0.25rem;
|
|
144
|
-
--civitai-color-text: #
|
|
145
|
-
--civitai-color-text-dimmed: #
|
|
146
|
-
--civitai-color-body: #
|
|
147
|
-
--civitai-color-surface: #
|
|
148
|
-
--civitai-color-surface-2: #
|
|
149
|
-
--civitai-color-border: #
|
|
150
|
-
--civitai-color-primary: #
|
|
151
|
-
--civitai-color-primary-hover: #
|
|
144
|
+
--civitai-color-text: #C1C2C5;
|
|
145
|
+
--civitai-color-text-dimmed: #8c8fa3;
|
|
146
|
+
--civitai-color-body: #1A1B1E;
|
|
147
|
+
--civitai-color-surface: #25262B;
|
|
148
|
+
--civitai-color-surface-2: #25262B;
|
|
149
|
+
--civitai-color-border: #373A40;
|
|
150
|
+
--civitai-color-primary: #1971C2;
|
|
151
|
+
--civitai-color-primary-hover: #1864AB;
|
|
152
152
|
--civitai-color-primary-fg: #fefefe;
|
|
153
|
-
--civitai-color-primary-light: rgba(34, 139, 230, 0.
|
|
154
|
-
--civitai-color-error: #
|
|
155
|
-
--civitai-color-success: #
|
|
156
|
-
--civitai-color-warning: #
|
|
157
|
-
--civitai-color-info: #
|
|
153
|
+
--civitai-color-primary-light: rgba(34, 139, 230, 0.15);
|
|
154
|
+
--civitai-color-error: #e03131;
|
|
155
|
+
--civitai-color-success: #326D5C;
|
|
156
|
+
--civitai-color-warning: #e8590c;
|
|
157
|
+
--civitai-color-info: #1971C2;
|
|
158
158
|
--civitai-color-gray-0: #f8f9fa;
|
|
159
159
|
--civitai-color-gray-1: #f1f3f5;
|
|
160
160
|
--civitai-color-gray-2: #e9ecef;
|
|
@@ -170,10 +170,10 @@
|
|
|
170
170
|
--civitai-bp-md: 1024px;
|
|
171
171
|
--civitai-bp-lg: 1184px;
|
|
172
172
|
--civitai-bp-xl: 1440px;
|
|
173
|
-
--civitai-card-border-width:
|
|
174
|
-
--civitai-color-track: #
|
|
175
|
-
--civitai-color-segmented-bg: #
|
|
176
|
-
--civitai-color-media-placeholder: #
|
|
173
|
+
--civitai-card-border-width: 0;
|
|
174
|
+
--civitai-color-track: #25262B;
|
|
175
|
+
--civitai-color-segmented-bg: #25262B;
|
|
176
|
+
--civitai-color-media-placeholder: #25262B;
|
|
177
177
|
}
|
|
178
178
|
|
|
179
179
|
[data-theme='light'] {
|
|
@@ -237,27 +237,3 @@
|
|
|
237
237
|
--civitai-color-segmented-bg: #25262B;
|
|
238
238
|
--civitai-color-media-placeholder: #25262B;
|
|
239
239
|
}
|
|
240
|
-
|
|
241
|
-
@media (prefers-color-scheme: dark) {
|
|
242
|
-
:root:not([data-theme]) {
|
|
243
|
-
color-scheme: dark;
|
|
244
|
-
--civitai-color-text: #C1C2C5;
|
|
245
|
-
--civitai-color-text-dimmed: #8c8fa3;
|
|
246
|
-
--civitai-color-body: #1A1B1E;
|
|
247
|
-
--civitai-color-surface: #25262B;
|
|
248
|
-
--civitai-color-surface-2: #25262B;
|
|
249
|
-
--civitai-color-border: #373A40;
|
|
250
|
-
--civitai-color-primary: #1971C2;
|
|
251
|
-
--civitai-color-primary-hover: #1864AB;
|
|
252
|
-
--civitai-color-primary-fg: #fefefe;
|
|
253
|
-
--civitai-color-primary-light: rgba(34, 139, 230, 0.15);
|
|
254
|
-
--civitai-color-error: #e03131;
|
|
255
|
-
--civitai-color-success: #326D5C;
|
|
256
|
-
--civitai-color-warning: #e8590c;
|
|
257
|
-
--civitai-color-info: #1971C2;
|
|
258
|
-
--civitai-card-border-width: 0;
|
|
259
|
-
--civitai-color-track: #25262B;
|
|
260
|
-
--civitai-color-segmented-bg: #25262B;
|
|
261
|
-
--civitai-color-media-placeholder: #25262B;
|
|
262
|
-
}
|
|
263
|
-
}
|