@civitai/theme 0.2.0 → 0.3.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 +38 -2
- package/dist/breakpoints.source.d.ts +57 -0
- package/dist/breakpoints.source.d.ts.map +1 -0
- package/dist/breakpoints.source.js +62 -0
- package/dist/breakpoints.source.js.map +1 -0
- package/dist/generate.d.ts +15 -2
- package/dist/generate.d.ts.map +1 -1
- package/dist/generate.js +21 -2
- package/dist/generate.js.map +1 -1
- package/dist/index.d.ts +6 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +6 -0
- package/dist/index.js.map +1 -1
- package/dist/tokens.css +10 -0
- package/dist/tokens.dtcg.json +42 -0
- package/dist/tokens.generated.d.ts +11 -1
- package/dist/tokens.generated.d.ts.map +1 -1
- package/dist/tokens.generated.js +13 -3
- package/dist/tokens.generated.js.map +1 -1
- package/package.json +4 -4
- package/styles.css +10 -0
package/README.md
CHANGED
|
@@ -18,18 +18,54 @@ resolution → re-namespaced `--civitai-*`. This is the same primitive civitai
|
|
|
18
18
|
uses in `mantine-css-variables.ts`. `--mantine-*` is fully resolved away, so the
|
|
19
19
|
`--civitai-*` contract is self-contained.
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
The one exception is the **breakpoint scale**, which deliberately bypasses the
|
|
22
|
+
Mantine pipeline — see below.
|
|
23
|
+
|
|
24
|
+
Four guards keep it honest (`pnpm --filter @civitai/theme test`):
|
|
22
25
|
|
|
23
26
|
- **drift guard** — reads civitai/civitai's live `ThemeProvider.tsx` and fails
|
|
24
27
|
if the vendored palette/`white`/`black` diverge (set `CIVITAI_REPO`; skips
|
|
25
28
|
with a clear message when the checkout is absent).
|
|
29
|
+
- **breakpoint drift guard** — same, against civitai's
|
|
30
|
+
`src/utils/breakpoints.json`.
|
|
26
31
|
- **generation parity** — the committed generated source + built artifacts must
|
|
27
32
|
byte-match a fresh generation, so a stale hand-edit can't slip through.
|
|
33
|
+
- **px-not-em guard** — self-contained; pins the breakpoint tokens to the px
|
|
34
|
+
scale and asserts the em values are absent.
|
|
35
|
+
|
|
36
|
+
## Breakpoints — 🔴 the px scale, not Mantine's em scale
|
|
37
|
+
|
|
38
|
+
civitai has **two** breakpoint scales and they agree on exactly one key:
|
|
39
|
+
|
|
40
|
+
| scale | xs | sm | md | lg | xl |
|
|
41
|
+
|---|---|---|---|---|---|
|
|
42
|
+
| **px** — `src/utils/breakpoints.json`, mirrored by Tailwind and `mantineContainerSizes`. **This package emits this one.** | 480 | 768 | 1024 | 1184 | 1440 |
|
|
43
|
+
| Mantine's stock **em** scale — never overridden in civitai; what every Mantine responsive prop uses | 576 | 768 | 992 | 1200 | 1408 |
|
|
44
|
+
|
|
45
|
+
Only `sm` matches, so a wrong implementation *looks* correct at a glance and a
|
|
46
|
+
test that pins `sm` alone passes against the wrong scale. The px scale is
|
|
47
|
+
therefore vendored in its own module (`src/breakpoints.source.ts`), guarded
|
|
48
|
+
directly against `breakpoints.json`, and emitted as a **literal** token spec that
|
|
49
|
+
never touches `mergeMantineTheme` — routing it through the Mantine resolver is
|
|
50
|
+
exactly how an un-overridden key would silently come back as the em value.
|
|
51
|
+
|
|
52
|
+
```ts
|
|
53
|
+
import { breakpoints, BREAKPOINT_KEYS, tokens } from '@civitai/theme';
|
|
54
|
+
breakpoints.md; // 1024 ← use this for a JS width comparison
|
|
55
|
+
tokens.bpMd; // "1024px"
|
|
56
|
+
// CSS: var(--civitai-bp-md)
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
Use the **numeric** `breakpoints` for width comparisons: a CSS custom property
|
|
60
|
+
cannot appear inside a `@media`/`@container` condition, so `--civitai-bp-*` is
|
|
61
|
+
for lengths (`max-width`, `grid-template-columns`), not for conditions. React
|
|
62
|
+
blocks should use `useBlockBreakpoint()` from `@civitai/blocks-react`, which
|
|
63
|
+
resolves the block's own measured width against this scale.
|
|
28
64
|
|
|
29
65
|
## Usage
|
|
30
66
|
|
|
31
67
|
```html
|
|
32
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@civitai/theme@0.
|
|
68
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@civitai/theme@0.2.0/styles.css" />
|
|
33
69
|
```
|
|
34
70
|
|
|
35
71
|
```ts
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* VENDORED civitai BREAKPOINT SCALE — the second generator input for
|
|
3
|
+
* `@civitai/theme`, alongside `theme.source.ts`.
|
|
4
|
+
*
|
|
5
|
+
* 🔴 THERE ARE TWO BREAKPOINT SCALES IN CIVITAI AND THEY AGREE ON EXACTLY ONE
|
|
6
|
+
* KEY. Getting this wrong produces a scale that *looks* right at a glance,
|
|
7
|
+
* because one of the five values matches:
|
|
8
|
+
*
|
|
9
|
+
* - the PX scale — civitai/civitai's `src/utils/breakpoints.json`, mirrored by
|
|
10
|
+
* its Tailwind config and by `mantineContainerSizes` in
|
|
11
|
+
* `src/utils/mantine-css-helpers.ts`:
|
|
12
|
+
* xs 480 · sm 768 · md 1024 · lg 1184 · xl 1440
|
|
13
|
+
* THIS IS THE ONE VENDORED BELOW.
|
|
14
|
+
*
|
|
15
|
+
* - Mantine's stock EM scale, which civitai never overrides and which every
|
|
16
|
+
* Mantine responsive prop (`visibleFrom`, `hiddenFrom`, `Grid`) uses:
|
|
17
|
+
* xs 576 · sm 768 · md 992 · lg 1200 · xl 1408
|
|
18
|
+
*
|
|
19
|
+
* Only `sm` (768) is shared. A test that pins `sm` alone therefore passes
|
|
20
|
+
* against the WRONG scale — `test/breakpoint-tokens.test.ts` pins the four
|
|
21
|
+
* discriminating keys and explicitly asserts the em values are absent.
|
|
22
|
+
*
|
|
23
|
+
* WHY THIS IS NOT IN `theme.source.ts`. `theme.source.ts` is a byte-faithful
|
|
24
|
+
* copy of the CSS-variable-relevant fields of civitai's `createTheme({...})`
|
|
25
|
+
* override, and `test/theme-drift.test.ts` fails on any divergence from the live
|
|
26
|
+
* `ThemeProvider.tsx`. That file defines NO `breakpoints` key at all (verified:
|
|
27
|
+
* `grep -n breakpoint src/providers/ThemeProvider.tsx` matches nothing), so
|
|
28
|
+
* adding one there would either break the drift guard or falsify the
|
|
29
|
+
* byte-faithful claim. More importantly, routing the px scale through the
|
|
30
|
+
* Mantine theme pipeline is exactly the mistake this module exists to prevent:
|
|
31
|
+
* `mergeMantineTheme` would resolve `theme.breakpoints` against Mantine's EM
|
|
32
|
+
* defaults for any key we failed to override.
|
|
33
|
+
*
|
|
34
|
+
* So the px scale is vendored here as its own literal, with its own drift guard
|
|
35
|
+
* (`test/breakpoint-drift.test.ts`) reading civitai's `breakpoints.json`
|
|
36
|
+
* directly, and it is emitted through `generate.ts` as a LITERAL token spec that
|
|
37
|
+
* never touches Mantine.
|
|
38
|
+
*/
|
|
39
|
+
/** Scale keys, ascending. ORDER IS SIGNIFICANT — tier comparison relies on it. */
|
|
40
|
+
export declare const BREAKPOINT_KEYS: readonly ["xs", "sm", "md", "lg", "xl"];
|
|
41
|
+
export type BreakpointKey = (typeof BREAKPOINT_KEYS)[number];
|
|
42
|
+
/**
|
|
43
|
+
* Byte-faithful copy of civitai/civitai's `src/utils/breakpoints.json`,
|
|
44
|
+
* INCLUDING its `px` units. Drift-guarded against that file.
|
|
45
|
+
*/
|
|
46
|
+
export declare const civitaiBreakpointsSource: Record<BreakpointKey, string>;
|
|
47
|
+
/**
|
|
48
|
+
* The same scale as plain numbers (CSS pixels), derived from
|
|
49
|
+
* `civitaiBreakpointsSource` so the two can never disagree.
|
|
50
|
+
*
|
|
51
|
+
* This is the form a JS consumer actually needs: the `--civitai-bp-*` CSS
|
|
52
|
+
* custom properties are `<length>` strings, and a custom property cannot be used
|
|
53
|
+
* inside a `@media`/`@container` condition at all, so a numeric comparison in JS
|
|
54
|
+
* (against a `ResizeObserver` measurement) is the real consumption path.
|
|
55
|
+
*/
|
|
56
|
+
export declare const breakpoints: Record<BreakpointKey, number>;
|
|
57
|
+
//# sourceMappingURL=breakpoints.source.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"breakpoints.source.d.ts","sourceRoot":"","sources":["../src/breakpoints.source.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAEH,kFAAkF;AAClF,eAAO,MAAM,eAAe,yCAA0C,CAAC;AAEvE,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAE7D;;;GAGG;AACH,eAAO,MAAM,wBAAwB,EAAE,MAAM,CAAC,aAAa,EAAE,MAAM,CAMlE,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,aAAa,EAAE,MAAM,CAEpB,CAAC"}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* VENDORED civitai BREAKPOINT SCALE — the second generator input for
|
|
3
|
+
* `@civitai/theme`, alongside `theme.source.ts`.
|
|
4
|
+
*
|
|
5
|
+
* 🔴 THERE ARE TWO BREAKPOINT SCALES IN CIVITAI AND THEY AGREE ON EXACTLY ONE
|
|
6
|
+
* KEY. Getting this wrong produces a scale that *looks* right at a glance,
|
|
7
|
+
* because one of the five values matches:
|
|
8
|
+
*
|
|
9
|
+
* - the PX scale — civitai/civitai's `src/utils/breakpoints.json`, mirrored by
|
|
10
|
+
* its Tailwind config and by `mantineContainerSizes` in
|
|
11
|
+
* `src/utils/mantine-css-helpers.ts`:
|
|
12
|
+
* xs 480 · sm 768 · md 1024 · lg 1184 · xl 1440
|
|
13
|
+
* THIS IS THE ONE VENDORED BELOW.
|
|
14
|
+
*
|
|
15
|
+
* - Mantine's stock EM scale, which civitai never overrides and which every
|
|
16
|
+
* Mantine responsive prop (`visibleFrom`, `hiddenFrom`, `Grid`) uses:
|
|
17
|
+
* xs 576 · sm 768 · md 992 · lg 1200 · xl 1408
|
|
18
|
+
*
|
|
19
|
+
* Only `sm` (768) is shared. A test that pins `sm` alone therefore passes
|
|
20
|
+
* against the WRONG scale — `test/breakpoint-tokens.test.ts` pins the four
|
|
21
|
+
* discriminating keys and explicitly asserts the em values are absent.
|
|
22
|
+
*
|
|
23
|
+
* WHY THIS IS NOT IN `theme.source.ts`. `theme.source.ts` is a byte-faithful
|
|
24
|
+
* copy of the CSS-variable-relevant fields of civitai's `createTheme({...})`
|
|
25
|
+
* override, and `test/theme-drift.test.ts` fails on any divergence from the live
|
|
26
|
+
* `ThemeProvider.tsx`. That file defines NO `breakpoints` key at all (verified:
|
|
27
|
+
* `grep -n breakpoint src/providers/ThemeProvider.tsx` matches nothing), so
|
|
28
|
+
* adding one there would either break the drift guard or falsify the
|
|
29
|
+
* byte-faithful claim. More importantly, routing the px scale through the
|
|
30
|
+
* Mantine theme pipeline is exactly the mistake this module exists to prevent:
|
|
31
|
+
* `mergeMantineTheme` would resolve `theme.breakpoints` against Mantine's EM
|
|
32
|
+
* defaults for any key we failed to override.
|
|
33
|
+
*
|
|
34
|
+
* So the px scale is vendored here as its own literal, with its own drift guard
|
|
35
|
+
* (`test/breakpoint-drift.test.ts`) reading civitai's `breakpoints.json`
|
|
36
|
+
* directly, and it is emitted through `generate.ts` as a LITERAL token spec that
|
|
37
|
+
* never touches Mantine.
|
|
38
|
+
*/
|
|
39
|
+
/** Scale keys, ascending. ORDER IS SIGNIFICANT — tier comparison relies on it. */
|
|
40
|
+
export const BREAKPOINT_KEYS = ['xs', 'sm', 'md', 'lg', 'xl'];
|
|
41
|
+
/**
|
|
42
|
+
* Byte-faithful copy of civitai/civitai's `src/utils/breakpoints.json`,
|
|
43
|
+
* INCLUDING its `px` units. Drift-guarded against that file.
|
|
44
|
+
*/
|
|
45
|
+
export const civitaiBreakpointsSource = {
|
|
46
|
+
xs: '480px',
|
|
47
|
+
sm: '768px',
|
|
48
|
+
md: '1024px',
|
|
49
|
+
lg: '1184px',
|
|
50
|
+
xl: '1440px',
|
|
51
|
+
};
|
|
52
|
+
/**
|
|
53
|
+
* The same scale as plain numbers (CSS pixels), derived from
|
|
54
|
+
* `civitaiBreakpointsSource` so the two can never disagree.
|
|
55
|
+
*
|
|
56
|
+
* This is the form a JS consumer actually needs: the `--civitai-bp-*` CSS
|
|
57
|
+
* custom properties are `<length>` strings, and a custom property cannot be used
|
|
58
|
+
* inside a `@media`/`@container` condition at all, so a numeric comparison in JS
|
|
59
|
+
* (against a `ResizeObserver` measurement) is the real consumption path.
|
|
60
|
+
*/
|
|
61
|
+
export const breakpoints = Object.fromEntries(BREAKPOINT_KEYS.map((key) => [key, parseInt(civitaiBreakpointsSource[key], 10)]));
|
|
62
|
+
//# sourceMappingURL=breakpoints.source.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"breakpoints.source.js","sourceRoot":"","sources":["../src/breakpoints.source.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAEH,kFAAkF;AAClF,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAU,CAAC;AAIvE;;;GAGG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAkC;IACrE,EAAE,EAAE,OAAO;IACX,EAAE,EAAE,OAAO;IACX,EAAE,EAAE,QAAQ;IACZ,EAAE,EAAE,QAAQ;IACZ,EAAE,EAAE,QAAQ;CACb,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,WAAW,GAAkC,MAAM,CAAC,WAAW,CAC1E,eAAe,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,GAAG,EAAE,QAAQ,CAAC,wBAAwB,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAChD,CAAC"}
|
package/dist/generate.d.ts
CHANGED
|
@@ -24,8 +24,21 @@ import { type MantineThemeOverride } from '@mantine/core';
|
|
|
24
24
|
interface TokenSpec {
|
|
25
25
|
/** Public name WITHOUT the `--civitai-` prefix, e.g. `color-primary`. */
|
|
26
26
|
name: string;
|
|
27
|
-
/**
|
|
28
|
-
|
|
27
|
+
/**
|
|
28
|
+
* Source Mantine variable name (with `--mantine-` prefix). Mutually exclusive
|
|
29
|
+
* with `literal` — exactly one of the two must be set.
|
|
30
|
+
*/
|
|
31
|
+
source?: string;
|
|
32
|
+
/**
|
|
33
|
+
* Concrete literal value for a token that deliberately does NOT derive from
|
|
34
|
+
* Mantine. Only the breakpoint scale uses this, and the reason is load-bearing:
|
|
35
|
+
* civitai's px breakpoints are NOT part of its Mantine theme, and Mantine's own
|
|
36
|
+
* stock EM scale disagrees with them on four of five keys (see
|
|
37
|
+
* `breakpoints.source.ts`). Routing them through `mergeMantineTheme` would
|
|
38
|
+
* silently resolve any un-overridden key to the wrong number, so they bypass
|
|
39
|
+
* the Mantine pipeline entirely. Scheme-independent by construction.
|
|
40
|
+
*/
|
|
41
|
+
literal?: string;
|
|
29
42
|
/** Typed-syntax category — drives `@property` registration + DTCG `$type`. */
|
|
30
43
|
type: 'color' | 'length' | 'font';
|
|
31
44
|
description: string;
|
package/dist/generate.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"generate.d.ts","sourceRoot":"","sources":["../src/generate.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,OAAO,EAIL,KAAK,oBAAoB,EAC1B,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"generate.d.ts","sourceRoot":"","sources":["../src/generate.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,OAAO,EAIL,KAAK,oBAAoB,EAC1B,MAAM,eAAe,CAAC;AAKvB,6EAA6E;AAC7E,UAAU,SAAS;IACjB,yEAAyE;IACzE,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,8EAA8E;IAC9E,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAClC,WAAW,EAAE,MAAM,CAAC;IACpB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AA4LD,MAAM,WAAW,cAAc;IAC7B,0EAA0E;IAC1E,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC7B,0EAA0E;IAC1E,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC7B,wCAAwC;IACxC,IAAI,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAC1F;AAKD,8EAA8E;AAC9E,wBAAgB,aAAa,CAAC,aAAa,GAAE,oBAAyC,GAAG,cAAc,CA6BtG;AASD,MAAM,WAAW,SAAS;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,iFAAiF;IACjF,qBAAqB,EAAE,MAAM,CAAC;CAC/B;AAMD,iDAAiD;AACjD,wBAAgB,cAAc,CAAC,aAAa,GAAE,oBAAyC,GAAG,SAAS,CAsFlG"}
|
package/dist/generate.js
CHANGED
|
@@ -20,6 +20,7 @@
|
|
|
20
20
|
* (`scripts/build-tokens.ts`) and the generation-parity test consume it.
|
|
21
21
|
*/
|
|
22
22
|
import { DEFAULT_THEME, defaultCssVariablesResolver, mergeMantineTheme, } from '@mantine/core';
|
|
23
|
+
import { BREAKPOINT_KEYS, civitaiBreakpointsSource } from './breakpoints.source.js';
|
|
23
24
|
import { civitaiThemeSource } from './theme.source.js';
|
|
24
25
|
/**
|
|
25
26
|
* The curated public token contract. ORDER is significant (drives deterministic
|
|
@@ -150,6 +151,19 @@ const TOKEN_SPEC = [
|
|
|
150
151
|
type: 'color',
|
|
151
152
|
description: `Neutral ramp step ${i} (Mantine gray[${i}]); 0 = lightest … 9 = darkest.`,
|
|
152
153
|
})),
|
|
154
|
+
// --- Responsive breakpoint scale (issue #279 R2) ---
|
|
155
|
+
// 🔴 THE PX SCALE (civitai `src/utils/breakpoints.json`), NOT Mantine's stock em
|
|
156
|
+
// scale. The two agree only on `sm` (768). These are `literal` specs precisely so
|
|
157
|
+
// they cannot pick up an em value from the Mantine resolver — see TokenSpec.literal
|
|
158
|
+
// and the header of `breakpoints.source.ts`. Appended LAST so the pre-existing
|
|
159
|
+
// token order (and therefore every existing artifact byte) is unchanged.
|
|
160
|
+
...BREAKPOINT_KEYS.map((key) => ({
|
|
161
|
+
name: `bp-${key}`,
|
|
162
|
+
literal: civitaiBreakpointsSource[key],
|
|
163
|
+
type: 'length',
|
|
164
|
+
description: `Responsive breakpoint \`${key}\` from civitai's px scale ` +
|
|
165
|
+
`(src/utils/breakpoints.json) — NOT Mantine's em scale.`,
|
|
166
|
+
})),
|
|
153
167
|
];
|
|
154
168
|
const VAR_RE = /var\(\s*(--[a-zA-Z0-9-]+)\s*(?:,\s*([^)]*))?\)/;
|
|
155
169
|
/**
|
|
@@ -198,8 +212,13 @@ export function resolveTokens(themeOverride = civitaiThemeSource) {
|
|
|
198
212
|
const meta = [];
|
|
199
213
|
for (const spec of TOKEN_SPEC) {
|
|
200
214
|
const varName = `--civitai-${spec.name}`;
|
|
201
|
-
|
|
202
|
-
|
|
215
|
+
if ((spec.source == null) === (spec.literal == null)) {
|
|
216
|
+
throw new Error(`Token ${varName}: exactly one of \`source\` (Mantine-derived) or \`literal\` must be set.`);
|
|
217
|
+
}
|
|
218
|
+
// A `literal` spec is scheme-independent by construction and NEVER touches the
|
|
219
|
+
// Mantine dicts — that bypass is the whole point for the breakpoint scale.
|
|
220
|
+
const lightVal = spec.literal ?? resolveValue(`var(${spec.source})`, lightDict);
|
|
221
|
+
const darkVal = spec.literal ?? resolveValue(`var(${spec.source})`, darkDict);
|
|
203
222
|
root[varName] = lightVal;
|
|
204
223
|
if (darkVal !== lightVal || spec.alwaysDark)
|
|
205
224
|
dark[varName] = darkVal;
|
package/dist/generate.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"generate.js","sourceRoot":"","sources":["../src/generate.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,OAAO,EACL,aAAa,EACb,2BAA2B,EAC3B,iBAAiB,GAElB,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"generate.js","sourceRoot":"","sources":["../src/generate.ts"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -5,6 +5,11 @@
|
|
|
5
5
|
* - `tokens` / `darkTokens` / `tokenVars` — typed token values (generated).
|
|
6
6
|
* - `tokensCss` — the full `--civitai-*` stylesheet string.
|
|
7
7
|
* - `injectTokens(doc?)` — inject the stylesheet at runtime (JS consumers).
|
|
8
|
+
* - `breakpoints` / `BREAKPOINT_KEYS` — civitai's PX breakpoint scale as
|
|
9
|
+
* numbers, for JS width comparisons. (The matching `--civitai-bp-*` CSS
|
|
10
|
+
* tokens are in `tokens`/`tokensCss` as `<length>` strings; a custom
|
|
11
|
+
* property cannot appear in a `@media`/`@container` condition, so the
|
|
12
|
+
* numeric form is what a responsive branch actually consumes.)
|
|
8
13
|
*
|
|
9
14
|
* Non-JS consumers link the stylesheet directly:
|
|
10
15
|
* `<link rel="stylesheet" href="@civitai/theme/styles.css">`
|
|
@@ -12,4 +17,5 @@
|
|
|
12
17
|
*/
|
|
13
18
|
export { tokens, darkTokens, tokenVars, tokensCss, type TokenName } from './tokens.generated.js';
|
|
14
19
|
export { injectTokens } from './inject.js';
|
|
20
|
+
export { BREAKPOINT_KEYS, breakpoints, civitaiBreakpointsSource, type BreakpointKey, } from './breakpoints.source.js';
|
|
15
21
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACjG,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EACL,eAAe,EACf,WAAW,EACX,wBAAwB,EACxB,KAAK,aAAa,GACnB,MAAM,yBAAyB,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -5,6 +5,11 @@
|
|
|
5
5
|
* - `tokens` / `darkTokens` / `tokenVars` — typed token values (generated).
|
|
6
6
|
* - `tokensCss` — the full `--civitai-*` stylesheet string.
|
|
7
7
|
* - `injectTokens(doc?)` — inject the stylesheet at runtime (JS consumers).
|
|
8
|
+
* - `breakpoints` / `BREAKPOINT_KEYS` — civitai's PX breakpoint scale as
|
|
9
|
+
* numbers, for JS width comparisons. (The matching `--civitai-bp-*` CSS
|
|
10
|
+
* tokens are in `tokens`/`tokensCss` as `<length>` strings; a custom
|
|
11
|
+
* property cannot appear in a `@media`/`@container` condition, so the
|
|
12
|
+
* numeric form is what a responsive branch actually consumes.)
|
|
8
13
|
*
|
|
9
14
|
* Non-JS consumers link the stylesheet directly:
|
|
10
15
|
* `<link rel="stylesheet" href="@civitai/theme/styles.css">`
|
|
@@ -12,4 +17,5 @@
|
|
|
12
17
|
*/
|
|
13
18
|
export { tokens, darkTokens, tokenVars, tokensCss } from './tokens.generated.js';
|
|
14
19
|
export { injectTokens } from './inject.js';
|
|
20
|
+
export { BREAKPOINT_KEYS, breakpoints, civitaiBreakpointsSource, } from './breakpoints.source.js';
|
|
15
21
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAkB,MAAM,uBAAuB,CAAC;AACjG,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EACL,eAAe,EACf,WAAW,EACX,wBAAwB,GAEzB,MAAM,yBAAyB,CAAC"}
|
package/dist/tokens.css
CHANGED
|
@@ -149,6 +149,11 @@
|
|
|
149
149
|
--civitai-color-gray-7: #495057;
|
|
150
150
|
--civitai-color-gray-8: #343a40;
|
|
151
151
|
--civitai-color-gray-9: #212529;
|
|
152
|
+
--civitai-bp-xs: 480px;
|
|
153
|
+
--civitai-bp-sm: 768px;
|
|
154
|
+
--civitai-bp-md: 1024px;
|
|
155
|
+
--civitai-bp-lg: 1184px;
|
|
156
|
+
--civitai-bp-xl: 1440px;
|
|
152
157
|
}
|
|
153
158
|
|
|
154
159
|
[data-theme='light'] {
|
|
@@ -179,6 +184,11 @@
|
|
|
179
184
|
--civitai-color-gray-7: #495057;
|
|
180
185
|
--civitai-color-gray-8: #343a40;
|
|
181
186
|
--civitai-color-gray-9: #212529;
|
|
187
|
+
--civitai-bp-xs: 480px;
|
|
188
|
+
--civitai-bp-sm: 768px;
|
|
189
|
+
--civitai-bp-md: 1024px;
|
|
190
|
+
--civitai-bp-lg: 1184px;
|
|
191
|
+
--civitai-bp-xl: 1440px;
|
|
182
192
|
}
|
|
183
193
|
|
|
184
194
|
[data-theme='dark'] {
|
package/dist/tokens.dtcg.json
CHANGED
|
@@ -212,5 +212,47 @@
|
|
|
212
212
|
"$value": "#212529",
|
|
213
213
|
"$description": "Neutral ramp step 9 (Mantine gray[9]); 0 = lightest … 9 = darkest."
|
|
214
214
|
}
|
|
215
|
+
},
|
|
216
|
+
"bp": {
|
|
217
|
+
"xs": {
|
|
218
|
+
"$type": "dimension",
|
|
219
|
+
"$value": {
|
|
220
|
+
"value": 480,
|
|
221
|
+
"unit": "px"
|
|
222
|
+
},
|
|
223
|
+
"$description": "Responsive breakpoint `xs` from civitai's px scale (src/utils/breakpoints.json) — NOT Mantine's em scale."
|
|
224
|
+
},
|
|
225
|
+
"sm": {
|
|
226
|
+
"$type": "dimension",
|
|
227
|
+
"$value": {
|
|
228
|
+
"value": 768,
|
|
229
|
+
"unit": "px"
|
|
230
|
+
},
|
|
231
|
+
"$description": "Responsive breakpoint `sm` from civitai's px scale (src/utils/breakpoints.json) — NOT Mantine's em scale."
|
|
232
|
+
},
|
|
233
|
+
"md": {
|
|
234
|
+
"$type": "dimension",
|
|
235
|
+
"$value": {
|
|
236
|
+
"value": 1024,
|
|
237
|
+
"unit": "px"
|
|
238
|
+
},
|
|
239
|
+
"$description": "Responsive breakpoint `md` from civitai's px scale (src/utils/breakpoints.json) — NOT Mantine's em scale."
|
|
240
|
+
},
|
|
241
|
+
"lg": {
|
|
242
|
+
"$type": "dimension",
|
|
243
|
+
"$value": {
|
|
244
|
+
"value": 1184,
|
|
245
|
+
"unit": "px"
|
|
246
|
+
},
|
|
247
|
+
"$description": "Responsive breakpoint `lg` from civitai's px scale (src/utils/breakpoints.json) — NOT Mantine's em scale."
|
|
248
|
+
},
|
|
249
|
+
"xl": {
|
|
250
|
+
"$type": "dimension",
|
|
251
|
+
"$value": {
|
|
252
|
+
"value": 1440,
|
|
253
|
+
"unit": "px"
|
|
254
|
+
},
|
|
255
|
+
"$description": "Responsive breakpoint `xl` from civitai's px scale (src/utils/breakpoints.json) — NOT Mantine's em scale."
|
|
256
|
+
}
|
|
215
257
|
}
|
|
216
258
|
}
|
|
@@ -27,6 +27,11 @@ export declare const tokens: {
|
|
|
27
27
|
readonly colorGray7: "#495057";
|
|
28
28
|
readonly colorGray8: "#343a40";
|
|
29
29
|
readonly colorGray9: "#212529";
|
|
30
|
+
readonly bpXs: "480px";
|
|
31
|
+
readonly bpSm: "768px";
|
|
32
|
+
readonly bpMd: "1024px";
|
|
33
|
+
readonly bpLg: "1184px";
|
|
34
|
+
readonly bpXl: "1440px";
|
|
30
35
|
};
|
|
31
36
|
/** Dark-scheme overrides (only tokens that differ from light). */
|
|
32
37
|
export declare const darkTokens: {
|
|
@@ -74,8 +79,13 @@ export declare const tokenVars: {
|
|
|
74
79
|
readonly colorGray7: "var(--civitai-color-gray-7)";
|
|
75
80
|
readonly colorGray8: "var(--civitai-color-gray-8)";
|
|
76
81
|
readonly colorGray9: "var(--civitai-color-gray-9)";
|
|
82
|
+
readonly bpXs: "var(--civitai-bp-xs)";
|
|
83
|
+
readonly bpSm: "var(--civitai-bp-sm)";
|
|
84
|
+
readonly bpMd: "var(--civitai-bp-md)";
|
|
85
|
+
readonly bpLg: "var(--civitai-bp-lg)";
|
|
86
|
+
readonly bpXl: "var(--civitai-bp-xl)";
|
|
77
87
|
};
|
|
78
88
|
/** The full `--civitai-*` stylesheet (`:root` + light/dark). Also emitted to dist/tokens.css. */
|
|
79
|
-
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: #222;\n}\n@property --civitai-color-text-dimmed {\n syntax: '<color>';\n inherits: true;\n initial-value: #868e96;\n}\n@property --civitai-color-body {\n syntax: '<color>';\n inherits: true;\n initial-value: #fefefe;\n}\n@property --civitai-color-surface {\n syntax: '<color>';\n inherits: true;\n initial-value: #fefefe;\n}\n@property --civitai-color-surface-2 {\n syntax: '<color>';\n inherits: true;\n initial-value: #fefefe;\n}\n@property --civitai-color-border {\n syntax: '<color>';\n inherits: true;\n initial-value: #ced4da;\n}\n@property --civitai-color-primary {\n syntax: '<color>';\n inherits: true;\n initial-value: #228BE6;\n}\n@property --civitai-color-primary-hover {\n syntax: '<color>';\n inherits: true;\n initial-value: #1C7ED6;\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.1);\n}\n@property --civitai-color-error {\n syntax: '<color>';\n inherits: true;\n initial-value: #fa5252;\n}\n@property --civitai-color-success {\n syntax: '<color>';\n inherits: true;\n initial-value: #299C7A;\n}\n@property --civitai-color-warning {\n syntax: '<color>';\n inherits: true;\n initial-value: #fd7e14;\n}\n@property --civitai-color-info {\n syntax: '<color>';\n inherits: true;\n initial-value: #228BE6;\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\n:root {\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}\n\n[data-theme='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}\n\n[data-theme='dark'] {\n --civitai-color-text: #C1C2C5;\n --civitai-color-text-dimmed: #8c8fa3;\n --civitai-color-body: #1A1B1E;\n --civitai-color-surface: #1A1B1E;\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}\n";
|
|
89
|
+
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: #222;\n}\n@property --civitai-color-text-dimmed {\n syntax: '<color>';\n inherits: true;\n initial-value: #868e96;\n}\n@property --civitai-color-body {\n syntax: '<color>';\n inherits: true;\n initial-value: #fefefe;\n}\n@property --civitai-color-surface {\n syntax: '<color>';\n inherits: true;\n initial-value: #fefefe;\n}\n@property --civitai-color-surface-2 {\n syntax: '<color>';\n inherits: true;\n initial-value: #fefefe;\n}\n@property --civitai-color-border {\n syntax: '<color>';\n inherits: true;\n initial-value: #ced4da;\n}\n@property --civitai-color-primary {\n syntax: '<color>';\n inherits: true;\n initial-value: #228BE6;\n}\n@property --civitai-color-primary-hover {\n syntax: '<color>';\n inherits: true;\n initial-value: #1C7ED6;\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.1);\n}\n@property --civitai-color-error {\n syntax: '<color>';\n inherits: true;\n initial-value: #fa5252;\n}\n@property --civitai-color-success {\n syntax: '<color>';\n inherits: true;\n initial-value: #299C7A;\n}\n@property --civitai-color-warning {\n syntax: '<color>';\n inherits: true;\n initial-value: #fd7e14;\n}\n@property --civitai-color-info {\n syntax: '<color>';\n inherits: true;\n initial-value: #228BE6;\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\n:root {\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}\n\n[data-theme='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}\n\n[data-theme='dark'] {\n --civitai-color-text: #C1C2C5;\n --civitai-color-text-dimmed: #8c8fa3;\n --civitai-color-body: #1A1B1E;\n --civitai-color-surface: #1A1B1E;\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}\n";
|
|
80
90
|
export type TokenName = keyof typeof tokens;
|
|
81
91
|
//# sourceMappingURL=tokens.generated.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tokens.generated.d.ts","sourceRoot":"","sources":["../src/tokens.generated.ts"],"names":[],"mappings":"AAGA,iEAAiE;AACjE,eAAO,MAAM,MAAM
|
|
1
|
+
{"version":3,"file":"tokens.generated.d.ts","sourceRoot":"","sources":["../src/tokens.generated.ts"],"names":[],"mappings":"AAGA,iEAAiE;AACjE,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCT,CAAC;AAEX,kEAAkE;AAClE,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;CAeb,CAAC;AAEX,kEAAkE;AAClE,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCZ,CAAC;AAEX,iGAAiG;AACjG,eAAO,MAAM,SAAS,w5LAAw5L,CAAC;AAE/6L,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,MAAM,CAAC"}
|
package/dist/tokens.generated.js
CHANGED
|
@@ -28,7 +28,12 @@ export const tokens = {
|
|
|
28
28
|
"colorGray6": "#868e96",
|
|
29
29
|
"colorGray7": "#495057",
|
|
30
30
|
"colorGray8": "#343a40",
|
|
31
|
-
"colorGray9": "#212529"
|
|
31
|
+
"colorGray9": "#212529",
|
|
32
|
+
"bpXs": "480px",
|
|
33
|
+
"bpSm": "768px",
|
|
34
|
+
"bpMd": "1024px",
|
|
35
|
+
"bpLg": "1184px",
|
|
36
|
+
"bpXl": "1440px"
|
|
32
37
|
};
|
|
33
38
|
/** Dark-scheme overrides (only tokens that differ from light). */
|
|
34
39
|
export const darkTokens = {
|
|
@@ -75,8 +80,13 @@ export const tokenVars = {
|
|
|
75
80
|
"colorGray6": "var(--civitai-color-gray-6)",
|
|
76
81
|
"colorGray7": "var(--civitai-color-gray-7)",
|
|
77
82
|
"colorGray8": "var(--civitai-color-gray-8)",
|
|
78
|
-
"colorGray9": "var(--civitai-color-gray-9)"
|
|
83
|
+
"colorGray9": "var(--civitai-color-gray-9)",
|
|
84
|
+
"bpXs": "var(--civitai-bp-xs)",
|
|
85
|
+
"bpSm": "var(--civitai-bp-sm)",
|
|
86
|
+
"bpMd": "var(--civitai-bp-md)",
|
|
87
|
+
"bpLg": "var(--civitai-bp-lg)",
|
|
88
|
+
"bpXl": "var(--civitai-bp-xl)"
|
|
79
89
|
};
|
|
80
90
|
/** The full `--civitai-*` stylesheet (`:root` + light/dark). Also emitted to dist/tokens.css. */
|
|
81
|
-
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: #222;\n}\n@property --civitai-color-text-dimmed {\n syntax: '<color>';\n inherits: true;\n initial-value: #868e96;\n}\n@property --civitai-color-body {\n syntax: '<color>';\n inherits: true;\n initial-value: #fefefe;\n}\n@property --civitai-color-surface {\n syntax: '<color>';\n inherits: true;\n initial-value: #fefefe;\n}\n@property --civitai-color-surface-2 {\n syntax: '<color>';\n inherits: true;\n initial-value: #fefefe;\n}\n@property --civitai-color-border {\n syntax: '<color>';\n inherits: true;\n initial-value: #ced4da;\n}\n@property --civitai-color-primary {\n syntax: '<color>';\n inherits: true;\n initial-value: #228BE6;\n}\n@property --civitai-color-primary-hover {\n syntax: '<color>';\n inherits: true;\n initial-value: #1C7ED6;\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.1);\n}\n@property --civitai-color-error {\n syntax: '<color>';\n inherits: true;\n initial-value: #fa5252;\n}\n@property --civitai-color-success {\n syntax: '<color>';\n inherits: true;\n initial-value: #299C7A;\n}\n@property --civitai-color-warning {\n syntax: '<color>';\n inherits: true;\n initial-value: #fd7e14;\n}\n@property --civitai-color-info {\n syntax: '<color>';\n inherits: true;\n initial-value: #228BE6;\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\n:root {\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}\n\n[data-theme='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}\n\n[data-theme='dark'] {\n --civitai-color-text: #C1C2C5;\n --civitai-color-text-dimmed: #8c8fa3;\n --civitai-color-body: #1A1B1E;\n --civitai-color-surface: #1A1B1E;\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}\n";
|
|
91
|
+
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: #222;\n}\n@property --civitai-color-text-dimmed {\n syntax: '<color>';\n inherits: true;\n initial-value: #868e96;\n}\n@property --civitai-color-body {\n syntax: '<color>';\n inherits: true;\n initial-value: #fefefe;\n}\n@property --civitai-color-surface {\n syntax: '<color>';\n inherits: true;\n initial-value: #fefefe;\n}\n@property --civitai-color-surface-2 {\n syntax: '<color>';\n inherits: true;\n initial-value: #fefefe;\n}\n@property --civitai-color-border {\n syntax: '<color>';\n inherits: true;\n initial-value: #ced4da;\n}\n@property --civitai-color-primary {\n syntax: '<color>';\n inherits: true;\n initial-value: #228BE6;\n}\n@property --civitai-color-primary-hover {\n syntax: '<color>';\n inherits: true;\n initial-value: #1C7ED6;\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.1);\n}\n@property --civitai-color-error {\n syntax: '<color>';\n inherits: true;\n initial-value: #fa5252;\n}\n@property --civitai-color-success {\n syntax: '<color>';\n inherits: true;\n initial-value: #299C7A;\n}\n@property --civitai-color-warning {\n syntax: '<color>';\n inherits: true;\n initial-value: #fd7e14;\n}\n@property --civitai-color-info {\n syntax: '<color>';\n inherits: true;\n initial-value: #228BE6;\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\n:root {\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}\n\n[data-theme='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}\n\n[data-theme='dark'] {\n --civitai-color-text: #C1C2C5;\n --civitai-color-text-dimmed: #8c8fa3;\n --civitai-color-body: #1A1B1E;\n --civitai-color-surface: #1A1B1E;\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}\n";
|
|
82
92
|
//# sourceMappingURL=tokens.generated.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tokens.generated.js","sourceRoot":"","sources":["../src/tokens.generated.ts"],"names":[],"mappings":"AAAA;wFACwF;AAExF,iEAAiE;AACjE,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,MAAM,EAAE,sHAAsH;IAC9H,UAAU,EAAE,gGAAgG;IAC5G,QAAQ,EAAE,SAAS;IACnB,WAAW,EAAE,MAAM;IACnB,iBAAiB,EAAE,SAAS;IAC5B,WAAW,EAAE,SAAS;IACtB,cAAc,EAAE,SAAS;IACzB,eAAe,EAAE,SAAS;IAC1B,aAAa,EAAE,SAAS;IACxB,cAAc,EAAE,SAAS;IACzB,mBAAmB,EAAE,SAAS;IAC9B,gBAAgB,EAAE,SAAS;IAC3B,mBAAmB,EAAE,yBAAyB;IAC9C,YAAY,EAAE,SAAS;IACvB,cAAc,EAAE,SAAS;IACzB,cAAc,EAAE,SAAS;IACzB,WAAW,EAAE,SAAS;IACtB,YAAY,EAAE,SAAS;IACvB,YAAY,EAAE,SAAS;IACvB,YAAY,EAAE,SAAS;IACvB,YAAY,EAAE,SAAS;IACvB,YAAY,EAAE,SAAS;IACvB,YAAY,EAAE,SAAS;IACvB,YAAY,EAAE,SAAS;IACvB,YAAY,EAAE,SAAS;IACvB,YAAY,EAAE,SAAS;IACvB,YAAY,EAAE,SAAS;
|
|
1
|
+
{"version":3,"file":"tokens.generated.js","sourceRoot":"","sources":["../src/tokens.generated.ts"],"names":[],"mappings":"AAAA;wFACwF;AAExF,iEAAiE;AACjE,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,MAAM,EAAE,sHAAsH;IAC9H,UAAU,EAAE,gGAAgG;IAC5G,QAAQ,EAAE,SAAS;IACnB,WAAW,EAAE,MAAM;IACnB,iBAAiB,EAAE,SAAS;IAC5B,WAAW,EAAE,SAAS;IACtB,cAAc,EAAE,SAAS;IACzB,eAAe,EAAE,SAAS;IAC1B,aAAa,EAAE,SAAS;IACxB,cAAc,EAAE,SAAS;IACzB,mBAAmB,EAAE,SAAS;IAC9B,gBAAgB,EAAE,SAAS;IAC3B,mBAAmB,EAAE,yBAAyB;IAC9C,YAAY,EAAE,SAAS;IACvB,cAAc,EAAE,SAAS;IACzB,cAAc,EAAE,SAAS;IACzB,WAAW,EAAE,SAAS;IACtB,YAAY,EAAE,SAAS;IACvB,YAAY,EAAE,SAAS;IACvB,YAAY,EAAE,SAAS;IACvB,YAAY,EAAE,SAAS;IACvB,YAAY,EAAE,SAAS;IACvB,YAAY,EAAE,SAAS;IACvB,YAAY,EAAE,SAAS;IACvB,YAAY,EAAE,SAAS;IACvB,YAAY,EAAE,SAAS;IACvB,YAAY,EAAE,SAAS;IACvB,MAAM,EAAE,OAAO;IACf,MAAM,EAAE,OAAO;IACf,MAAM,EAAE,QAAQ;IAChB,MAAM,EAAE,QAAQ;IAChB,MAAM,EAAE,QAAQ;CACR,CAAC;AAEX,kEAAkE;AAClE,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,WAAW,EAAE,SAAS;IACtB,iBAAiB,EAAE,SAAS;IAC5B,WAAW,EAAE,SAAS;IACtB,cAAc,EAAE,SAAS;IACzB,eAAe,EAAE,SAAS;IAC1B,aAAa,EAAE,SAAS;IACxB,cAAc,EAAE,SAAS;IACzB,mBAAmB,EAAE,SAAS;IAC9B,gBAAgB,EAAE,SAAS;IAC3B,mBAAmB,EAAE,0BAA0B;IAC/C,YAAY,EAAE,SAAS;IACvB,cAAc,EAAE,SAAS;IACzB,cAAc,EAAE,SAAS;IACzB,WAAW,EAAE,SAAS;CACd,CAAC;AAEX,kEAAkE;AAClE,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,MAAM,EAAE,qBAAqB;IAC7B,UAAU,EAAE,0BAA0B;IACtC,QAAQ,EAAE,uBAAuB;IACjC,WAAW,EAAE,2BAA2B;IACxC,iBAAiB,EAAE,kCAAkC;IACrD,WAAW,EAAE,2BAA2B;IACxC,cAAc,EAAE,8BAA8B;IAC9C,eAAe,EAAE,gCAAgC;IACjD,aAAa,EAAE,6BAA6B;IAC5C,cAAc,EAAE,8BAA8B;IAC9C,mBAAmB,EAAE,oCAAoC;IACzD,gBAAgB,EAAE,iCAAiC;IACnD,mBAAmB,EAAE,oCAAoC;IACzD,YAAY,EAAE,4BAA4B;IAC1C,cAAc,EAAE,8BAA8B;IAC9C,cAAc,EAAE,8BAA8B;IAC9C,WAAW,EAAE,2BAA2B;IACxC,YAAY,EAAE,6BAA6B;IAC3C,YAAY,EAAE,6BAA6B;IAC3C,YAAY,EAAE,6BAA6B;IAC3C,YAAY,EAAE,6BAA6B;IAC3C,YAAY,EAAE,6BAA6B;IAC3C,YAAY,EAAE,6BAA6B;IAC3C,YAAY,EAAE,6BAA6B;IAC3C,YAAY,EAAE,6BAA6B;IAC3C,YAAY,EAAE,6BAA6B;IAC3C,YAAY,EAAE,6BAA6B;IAC3C,MAAM,EAAE,sBAAsB;IAC9B,MAAM,EAAE,sBAAsB;IAC9B,MAAM,EAAE,sBAAsB;IAC9B,MAAM,EAAE,sBAAsB;IAC9B,MAAM,EAAE,sBAAsB;CACtB,CAAC;AAEX,iGAAiG;AACjG,MAAM,CAAC,MAAM,SAAS,GAAG,q5LAAq5L,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@civitai/theme",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"description": "Framework-agnostic --civitai-* design tokens, derived build-time from civitai's real Mantine theme. CSS + typed JS + W3C DTCG.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"react-dom": "^19.0.0",
|
|
30
30
|
"tsx": "^4.19.2",
|
|
31
31
|
"typescript": "^5.9.2",
|
|
32
|
-
"vitest": "^4.1.
|
|
32
|
+
"vitest": "^4.1.11"
|
|
33
33
|
},
|
|
34
34
|
"publishConfig": {
|
|
35
35
|
"access": "public"
|
|
@@ -54,8 +54,8 @@
|
|
|
54
54
|
"build": "tsx scripts/build-tokens.ts && tsc -p tsconfig.json",
|
|
55
55
|
"typecheck": "tsc -p tsconfig.json --noEmit",
|
|
56
56
|
"test": "vitest run",
|
|
57
|
-
"test:self": "vitest run test/generation-parity.test.ts",
|
|
58
|
-
"test:drift": "vitest run test/theme-drift.test.ts",
|
|
57
|
+
"test:self": "vitest run test/generation-parity.test.ts test/breakpoint-tokens.test.ts",
|
|
58
|
+
"test:drift": "vitest run test/theme-drift.test.ts test/breakpoint-drift.test.ts",
|
|
59
59
|
"test:watch": "vitest"
|
|
60
60
|
}
|
|
61
61
|
}
|
package/styles.css
CHANGED
|
@@ -149,6 +149,11 @@
|
|
|
149
149
|
--civitai-color-gray-7: #495057;
|
|
150
150
|
--civitai-color-gray-8: #343a40;
|
|
151
151
|
--civitai-color-gray-9: #212529;
|
|
152
|
+
--civitai-bp-xs: 480px;
|
|
153
|
+
--civitai-bp-sm: 768px;
|
|
154
|
+
--civitai-bp-md: 1024px;
|
|
155
|
+
--civitai-bp-lg: 1184px;
|
|
156
|
+
--civitai-bp-xl: 1440px;
|
|
152
157
|
}
|
|
153
158
|
|
|
154
159
|
[data-theme='light'] {
|
|
@@ -179,6 +184,11 @@
|
|
|
179
184
|
--civitai-color-gray-7: #495057;
|
|
180
185
|
--civitai-color-gray-8: #343a40;
|
|
181
186
|
--civitai-color-gray-9: #212529;
|
|
187
|
+
--civitai-bp-xs: 480px;
|
|
188
|
+
--civitai-bp-sm: 768px;
|
|
189
|
+
--civitai-bp-md: 1024px;
|
|
190
|
+
--civitai-bp-lg: 1184px;
|
|
191
|
+
--civitai-bp-xl: 1440px;
|
|
182
192
|
}
|
|
183
193
|
|
|
184
194
|
[data-theme='dark'] {
|