@civitai/theme 0.3.2 → 0.4.0

package/README.md

@@ -3,7 +3,7 @@
 Framework-agnostic **design tokens**, derived at build time from civitai's real
 Mantine theme. Ships three forms of the same `--civitai-*` token contract:
 
-- `dist/tokens.css` — a `:root` + `[data-theme='light'|'dark']` stylesheet
+- `dist/tokens.css` — a `:root` + `[data-theme='light'|'dark']` + OS-preference stylesheet
   (`--civitai-*` custom properties; `<color>` tokens registered via `@property`).
 - typed JS — `import { tokens, darkTokens, tokenVars, tokensCss } from '@civitai/theme'`.
 - `dist/tokens.dtcg.json` — a W3C **Design Tokens Community Group** export
@@ -18,8 +18,9 @@ resolution → re-namespaced `--civitai-*`. This is the same primitive civitai
 uses in `mantine-css-variables.ts`. `--mantine-*` is fully resolved away, so the
 `--civitai-*` contract is self-contained.
 
-The one exception is the **breakpoint scale**, which deliberately bypasses the
-Mantine pipeline — see below.
+Two kinds of token depart from that. The **breakpoint scale** bypasses the
+Mantine pipeline entirely (see below), and a few tokens declare an explicit
+**light/dark pair** — see next section.
 
 Four guards keep it honest (`pnpm --filter @civitai/theme test`):
 
@@ -33,6 +34,22 @@ Four guards keep it honest (`pnpm --filter @civitai/theme test`):
 - **px-not-em guard** — self-contained; pins the breakpoint tokens to the px
   scale and asserts the em values are absent.
 
+## Scheme-paired tokens
+
+A custom property inherits across a shadow boundary; an ancestor selector does
+not cross one. So a component that wanted "gray in light, surface in dark" could
+only say it as `[data-theme='dark'] <descendant>` in `@civitai/components`, which
+a shadow root can never match (`:host-context()` has never shipped in Firefox).
+
+Those decisions are tokens now — `--civitai-card-border-width`,
+`--civitai-color-track`, `--civitai-color-segmented-bg` and
+`--civitai-color-media-placeholder`. Mantine has no variable that carries either
+side of these pairs, so `TokenSpec.source` and `.literal` each accept a
+`{ light, dark }` pair, resolved against its own scheme's variable map.
+
+`--civitai-card-border-width` is a **width**, not a color: dark drops the default
+hairline's box, and a transparent color would still occupy 1px on every card.
+
 ## Breakpoints — 🔴 the px scale, not Mantine's em scale
 
 civitai has **two** breakpoint scales and they agree on exactly one key:
@@ -83,6 +100,13 @@ tokens.colorPrimary;     // "#228BE6"
 
 Theme by setting `data-theme="light" | "dark"` on any ancestor.
 
+Set nothing and the page follows the OS: the stylesheet carries the dark values
+under `@media (prefers-color-scheme: dark)`, scoped to `:root:not([data-theme])`.
+An app that sets the attribute — a block acting on the host's `THEME_CHANGE`, or
+its own theme switch — never matches that block and is unaffected. The attribute
+is the override, and it wins wherever it sits, because a nearer ancestor's tokens
+inherit over a farther one's.
+
 ## Build
 
 `pnpm --filter @civitai/theme build` regenerates `src/tokens.generated.ts`,

package/dist/generate.d.ts

@@ -20,25 +20,34 @@
  * (`scripts/build-tokens.ts`) and the generation-parity test consume it.
  */
 import { type MantineThemeOverride } from '@mantine/core';
+/**
+ * A light/dark pair, for the tokens whose two sides come from different places —
+ * something a single Mantine variable cannot express.
+ */
+type SchemePair = {
+    light: string;
+    dark: string;
+};
 /** A single public token, mapped to the Mantine variable it derives from. */
 interface TokenSpec {
     /** Public name WITHOUT the `--civitai-` prefix, e.g. `color-primary`. */
     name: string;
     /**
-     * Source Mantine variable name (with `--mantine-` prefix). Mutually exclusive
-     * with `literal` — exactly one of the two must be set.
+     * Source Mantine variable name (with `--mantine-` prefix), or one per scheme.
+     * Mutually exclusive with `literal` — exactly one of the two must be set.
      */
-    source?: string;
+    source?: string | SchemePair;
     /**
      * Concrete literal value for a token that deliberately does NOT derive from
-     * Mantine. Only the breakpoint scale uses this, and the reason is load-bearing:
+     * Mantine. The breakpoint scale uses this, and the reason is load-bearing:
      * civitai's px breakpoints are NOT part of its Mantine theme, and Mantine's own
      * stock EM scale disagrees with them on four of five keys (see
      * `breakpoints.source.ts`). Routing them through `mergeMantineTheme` would
      * silently resolve any un-overridden key to the wrong number, so they bypass
-     * the Mantine pipeline entirely. Scheme-independent by construction.
+     * the Mantine pipeline entirely. A single string is scheme-independent by
+     * construction.
      */
-    literal?: string;
+    literal?: string | SchemePair;
     /** Typed-syntax category — drives `@property` registration + DTCG `$type`. */
     type: 'color' | 'length' | 'font';
     description: string;

package/dist/generate.js

@@ -22,6 +22,7 @@
 import { DEFAULT_THEME, defaultCssVariablesResolver, mergeMantineTheme, } from '@mantine/core';
 import { BREAKPOINT_KEYS, civitaiBreakpointsSource } from './breakpoints.source.js';
 import { civitaiThemeSource } from './theme.source.js';
+const forScheme = (value, scheme) => typeof value === 'string' ? value : value[scheme];
 /**
  * The curated public token contract. ORDER is significant (drives deterministic
  * CSS/JSON output). Each token derives from a real resolved Mantine variable —
@@ -68,9 +69,12 @@ const TOKEN_SPEC = [
     },
     {
         name: 'color-surface',
-        source: '--mantine-color-body',
+        // Dark parts company with the page: measured against civitai.com, a raised
+        // surface is #25262B where the page is darker. Sharing one value made every
+        // card, menu, modal and input invisible except for its border.
+        source: { light: '--mantine-color-body', dark: '--mantine-color-default' },
         type: 'color',
-        description: 'Primary surface / page background.',
+        description: 'Raised surface — cards, menus, dialogs, inputs.',
     },
     {
         name: 'color-surface-2',
@@ -164,6 +168,33 @@ const TOKEN_SPEC = [
         description: `Responsive breakpoint \`${key}\` from civitai's px scale ` +
             `(src/utils/breakpoints.json) — NOT Mantine's em scale.`,
     })),
+    // Scheme-paired: a shadow root cannot see a `[data-theme='dark']` ancestor,
+    // so these carry the decision as an inherited property. Appended last.
+    {
+        name: 'card-border-width',
+        // A width, not a color: a transparent hairline still occupies 1px of box.
+        literal: { light: '1px', dark: '0' },
+        type: 'length',
+        description: 'Default card hairline width. Light needs it (surface == body); dark already separates them, so it collapses to 0.',
+    },
+    {
+        name: 'color-track',
+        source: { light: '--mantine-color-gray-2', dark: '--mantine-color-default' },
+        type: 'color',
+        description: 'Groove behind a slider thumb.',
+    },
+    {
+        name: 'color-segmented-bg',
+        source: { light: '--mantine-color-gray-1', dark: '--mantine-color-default' },
+        type: 'color',
+        description: 'Trough a segmented control\'s segments sit in.',
+    },
+    {
+        name: 'color-media-placeholder',
+        source: { light: '--mantine-color-gray-2', dark: '--mantine-color-default' },
+        type: 'color',
+        description: 'Backdrop shown while an image loads or after it fails.',
+    },
 ];
 const VAR_RE = /var\(\s*(--[a-zA-Z0-9-]+)\s*(?:,\s*([^)]*))?\)/;
 /**
@@ -215,10 +246,14 @@ export function resolveTokens(themeOverride = civitaiThemeSource) {
         if ((spec.source == null) === (spec.literal == null)) {
             throw new Error(`Token ${varName}: exactly one of \`source\` (Mantine-derived) or \`literal\` must be set.`);
         }
-        // A `literal` spec is scheme-independent by construction and NEVER touches the
-        // Mantine dicts — that bypass is the whole point for the breakpoint scale.
-        const lightVal = spec.literal ?? resolveValue(`var(${spec.source})`, lightDict);
-        const darkVal = spec.literal ?? resolveValue(`var(${spec.source})`, darkDict);
+        // A `literal` spec NEVER touches the Mantine dicts — that bypass is the
+        // whole point for the breakpoint scale.
+        const lightVal = spec.literal != null
+            ? forScheme(spec.literal, 'light')
+            : resolveValue(`var(${forScheme(spec.source, 'light')})`, lightDict);
+        const darkVal = spec.literal != null
+            ? forScheme(spec.literal, 'dark')
+            : resolveValue(`var(${forScheme(spec.source, 'dark')})`, darkDict);
         root[varName] = lightVal;
         if (darkVal !== lightVal || spec.alwaysDark)
             dark[varName] = darkVal;
@@ -256,15 +291,26 @@ export function buildArtifacts(themeOverride = civitaiThemeSource) {
     // Explicit light block mirrors the :root defaults so `[data-theme='light']`
     // (used by @civitai/components) always wins over an ambient dark ancestor.
     const lightBlock = meta.map((m) => `  ${m.varName}: ${root[m.varName]};`).join('\n');
-    const darkBlock = meta
+    const darkDecls = meta
         .filter((m) => m.varName in dark)
-        .map((m) => `  ${m.varName}: ${dark[m.varName]};`)
-        .join('\n');
+        .map((m) => `${m.varName}: ${dark[m.varName]};`);
+    const darkBlock = darkDecls.map((d) => `  ${d}`).join('\n');
+    const nestedDarkBlock = darkDecls.map((d) => `    ${d}`).join('\n');
+    // Not a token: it tells the UA which scheme to paint NATIVE controls in.
+    // Without it a number input's spinner, a select's caret and a scrollbar stay
+    // light against a dark surface. It inherits, so it reaches shadow roots too.
+    const scheme = (value) => `  color-scheme: ${value};`;
+    // `:not([data-theme])` is what keeps an explicit choice authoritative: a host
+    // that sets the attribute never matches, and a nested one wins by proximity.
+    const preferenceBlock = `@media (prefers-color-scheme: dark) {\n` +
+        `  :root:not([data-theme]) {\n` +
+        `  ${scheme('dark')}\n${nestedDarkBlock}\n  }\n}\n`;
     const tokensCss = `${AUTOGEN_BANNER}\n` +
         `${propertyRules}\n\n` +
-        `:root {\n${rootBlock}\n}\n\n` +
-        `[data-theme='light'] {\n${lightBlock}\n}\n\n` +
-        `[data-theme='dark'] {\n${darkBlock}\n}\n`;
+        `:root {\n${scheme('light')}\n${rootBlock}\n}\n\n` +
+        `[data-theme='light'] {\n${scheme('light')}\n${lightBlock}\n}\n\n` +
+        `[data-theme='dark'] {\n${scheme('dark')}\n${darkBlock}\n}\n\n` +
+        preferenceBlock;
     // ---- tokens.dtcg.json (W3C DTCG 2025.10) ----
     const dtcg = {};
     for (const m of meta) {

package/dist/tokens.css

@@ -120,8 +120,24 @@
   inherits: true;
   initial-value: #212529;
 }
+@property --civitai-color-track {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #e9ecef;
+}
+@property --civitai-color-segmented-bg {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #f1f3f5;
+}
+@property --civitai-color-media-placeholder {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #e9ecef;
+}
 
 :root {
+  color-scheme: light;
   --civitai-font: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
   --civitai-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
   --civitai-radius: 0.25rem;
@@ -154,9 +170,14 @@
   --civitai-bp-md: 1024px;
   --civitai-bp-lg: 1184px;
   --civitai-bp-xl: 1440px;
+  --civitai-card-border-width: 1px;
+  --civitai-color-track: #e9ecef;
+  --civitai-color-segmented-bg: #f1f3f5;
+  --civitai-color-media-placeholder: #e9ecef;
 }
 
 [data-theme='light'] {
+  color-scheme: light;
   --civitai-font: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
   --civitai-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
   --civitai-radius: 0.25rem;
@@ -189,13 +210,18 @@
   --civitai-bp-md: 1024px;
   --civitai-bp-lg: 1184px;
   --civitai-bp-xl: 1440px;
+  --civitai-card-border-width: 1px;
+  --civitai-color-track: #e9ecef;
+  --civitai-color-segmented-bg: #f1f3f5;
+  --civitai-color-media-placeholder: #e9ecef;
 }
 
 [data-theme='dark'] {
+  color-scheme: dark;
   --civitai-color-text: #C1C2C5;
   --civitai-color-text-dimmed: #8c8fa3;
   --civitai-color-body: #1A1B1E;
-  --civitai-color-surface: #1A1B1E;
+  --civitai-color-surface: #25262B;
   --civitai-color-surface-2: #25262B;
   --civitai-color-border: #373A40;
   --civitai-color-primary: #1971C2;
@@ -206,4 +232,32 @@
   --civitai-color-success: #326D5C;
   --civitai-color-warning: #e8590c;
   --civitai-color-info: #1971C2;
+  --civitai-card-border-width: 0;
+  --civitai-color-track: #25262B;
+  --civitai-color-segmented-bg: #25262B;
+  --civitai-color-media-placeholder: #25262B;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    color-scheme: dark;
+    --civitai-color-text: #C1C2C5;
+    --civitai-color-text-dimmed: #8c8fa3;
+    --civitai-color-body: #1A1B1E;
+    --civitai-color-surface: #25262B;
+    --civitai-color-surface-2: #25262B;
+    --civitai-color-border: #373A40;
+    --civitai-color-primary: #1971C2;
+    --civitai-color-primary-hover: #1864AB;
+    --civitai-color-primary-fg: #fefefe;
+    --civitai-color-primary-light: rgba(34, 139, 230, 0.15);
+    --civitai-color-error: #e03131;
+    --civitai-color-success: #326D5C;
+    --civitai-color-warning: #e8590c;
+    --civitai-color-info: #1971C2;
+    --civitai-card-border-width: 0;
+    --civitai-color-track: #25262B;
+    --civitai-color-segmented-bg: #25262B;
+    --civitai-color-media-placeholder: #25262B;
+  }
 }

package/dist/tokens.dtcg.json

@@ -55,10 +55,10 @@
     "surface": {
       "$type": "color",
       "$value": "#fefefe",
-      "$description": "Primary surface / page background.",
+      "$description": "Raised surface — cards, menus, dialogs, inputs.",
       "$extensions": {
         "com.civitai.theme": {
-          "dark": "#1A1B1E"
+          "dark": "#25262B"
         }
       }
     },
@@ -211,6 +211,36 @@
       "$type": "color",
       "$value": "#212529",
       "$description": "Neutral ramp step 9 (Mantine gray[9]); 0 = lightest … 9 = darkest."
+    },
+    "track": {
+      "$type": "color",
+      "$value": "#e9ecef",
+      "$description": "Groove behind a slider thumb.",
+      "$extensions": {
+        "com.civitai.theme": {
+          "dark": "#25262B"
+        }
+      }
+    },
+    "segmentedBg": {
+      "$type": "color",
+      "$value": "#f1f3f5",
+      "$description": "Trough a segmented control's segments sit in.",
+      "$extensions": {
+        "com.civitai.theme": {
+          "dark": "#25262B"
+        }
+      }
+    },
+    "mediaPlaceholder": {
+      "$type": "color",
+      "$value": "#e9ecef",
+      "$description": "Backdrop shown while an image loads or after it fails.",
+      "$extensions": {
+        "com.civitai.theme": {
+          "dark": "#25262B"
+        }
+      }
     }
   },
   "bp": {
@@ -254,5 +284,20 @@
       },
       "$description": "Responsive breakpoint `xl` from civitai's px scale (src/utils/breakpoints.json) — NOT Mantine's em scale."
     }
+  },
+  "card": {
+    "borderWidth": {
+      "$type": "dimension",
+      "$value": {
+        "value": 1,
+        "unit": "px"
+      },
+      "$description": "Default card hairline width. Light needs it (surface == body); dark already separates them, so it collapses to 0.",
+      "$extensions": {
+        "com.civitai.theme": {
+          "dark": "0"
+        }
+      }
+    }
   }
 }

package/dist/tokens.generated.d.ts

@@ -32,13 +32,17 @@ export declare const tokens: {
     readonly bpMd: "1024px";
     readonly bpLg: "1184px";
     readonly bpXl: "1440px";
+    readonly cardBorderWidth: "1px";
+    readonly colorTrack: "#e9ecef";
+    readonly colorSegmentedBg: "#f1f3f5";
+    readonly colorMediaPlaceholder: "#e9ecef";
 };
 /** Dark-scheme overrides (only tokens that differ from light). */
 export declare const darkTokens: {
     readonly colorText: "#C1C2C5";
     readonly colorTextDimmed: "#8c8fa3";
     readonly colorBody: "#1A1B1E";
-    readonly colorSurface: "#1A1B1E";
+    readonly colorSurface: "#25262B";
     readonly colorSurface2: "#25262B";
     readonly colorBorder: "#373A40";
     readonly colorPrimary: "#1971C2";
@@ -49,6 +53,10 @@ export declare const darkTokens: {
     readonly colorSuccess: "#326D5C";
     readonly colorWarning: "#e8590c";
     readonly colorInfo: "#1971C2";
+    readonly cardBorderWidth: "0";
+    readonly colorTrack: "#25262B";
+    readonly colorSegmentedBg: "#25262B";
+    readonly colorMediaPlaceholder: "#25262B";
 };
 /** `var(--civitai-*)` reference strings for inline JS styling. */
 export declare const tokenVars: {
@@ -84,8 +92,12 @@ export declare const tokenVars: {
     readonly bpMd: "var(--civitai-bp-md)";
     readonly bpLg: "var(--civitai-bp-lg)";
     readonly bpXl: "var(--civitai-bp-xl)";
+    readonly cardBorderWidth: "var(--civitai-card-border-width)";
+    readonly colorTrack: "var(--civitai-color-track)";
+    readonly colorSegmentedBg: "var(--civitai-color-segmented-bg)";
+    readonly colorMediaPlaceholder: "var(--civitai-color-media-placeholder)";
 };
 /** The full `--civitai-*` stylesheet (`:root` + light/dark). Also emitted to dist/tokens.css. */
-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";
+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@property --civitai-color-track {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #e9ecef;\n}\n@property --civitai-color-segmented-bg {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #f1f3f5;\n}\n@property --civitai-color-media-placeholder {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #e9ecef;\n}\n\n:root {\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='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\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\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}\n";
 export type TokenName = keyof typeof tokens;
 //# sourceMappingURL=tokens.generated.d.ts.map

package/dist/tokens.generated.js

@@ -33,14 +33,18 @@ export const tokens = {
     "bpSm": "768px",
     "bpMd": "1024px",
     "bpLg": "1184px",
-    "bpXl": "1440px"
+    "bpXl": "1440px",
+    "cardBorderWidth": "1px",
+    "colorTrack": "#e9ecef",
+    "colorSegmentedBg": "#f1f3f5",
+    "colorMediaPlaceholder": "#e9ecef"
 };
 /** Dark-scheme overrides (only tokens that differ from light). */
 export const darkTokens = {
     "colorText": "#C1C2C5",
     "colorTextDimmed": "#8c8fa3",
     "colorBody": "#1A1B1E",
-    "colorSurface": "#1A1B1E",
+    "colorSurface": "#25262B",
     "colorSurface2": "#25262B",
     "colorBorder": "#373A40",
     "colorPrimary": "#1971C2",
@@ -50,7 +54,11 @@ export const darkTokens = {
     "colorError": "#e03131",
     "colorSuccess": "#326D5C",
     "colorWarning": "#e8590c",
-    "colorInfo": "#1971C2"
+    "colorInfo": "#1971C2",
+    "cardBorderWidth": "0",
+    "colorTrack": "#25262B",
+    "colorSegmentedBg": "#25262B",
+    "colorMediaPlaceholder": "#25262B"
 };
 /** `var(--civitai-*)` reference strings for inline JS styling. */
 export const tokenVars = {
@@ -85,8 +93,12 @@ export const tokenVars = {
     "bpSm": "var(--civitai-bp-sm)",
     "bpMd": "var(--civitai-bp-md)",
     "bpLg": "var(--civitai-bp-lg)",
-    "bpXl": "var(--civitai-bp-xl)"
+    "bpXl": "var(--civitai-bp-xl)",
+    "cardBorderWidth": "var(--civitai-card-border-width)",
+    "colorTrack": "var(--civitai-color-track)",
+    "colorSegmentedBg": "var(--civitai-color-segmented-bg)",
+    "colorMediaPlaceholder": "var(--civitai-color-media-placeholder)"
 };
 /** The full `--civitai-*` stylesheet (`:root` + light/dark). Also emitted to dist/tokens.css. */
-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";
+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@property --civitai-color-track {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #e9ecef;\n}\n@property --civitai-color-segmented-bg {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #f1f3f5;\n}\n@property --civitai-color-media-placeholder {\n  syntax: '<color>';\n  inherits: true;\n  initial-value: #e9ecef;\n}\n\n:root {\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='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\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\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}\n";
 //# sourceMappingURL=tokens.generated.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@civitai/theme",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "Framework-agnostic --civitai-* design tokens, derived build-time from civitai's real Mantine theme. CSS + typed JS + W3C DTCG.",
   "license": "MIT",
   "type": "module",

package/styles.css

@@ -120,8 +120,24 @@
   inherits: true;
   initial-value: #212529;
 }
+@property --civitai-color-track {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #e9ecef;
+}
+@property --civitai-color-segmented-bg {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #f1f3f5;
+}
+@property --civitai-color-media-placeholder {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #e9ecef;
+}
 
 :root {
+  color-scheme: light;
   --civitai-font: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
   --civitai-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
   --civitai-radius: 0.25rem;
@@ -154,9 +170,14 @@
   --civitai-bp-md: 1024px;
   --civitai-bp-lg: 1184px;
   --civitai-bp-xl: 1440px;
+  --civitai-card-border-width: 1px;
+  --civitai-color-track: #e9ecef;
+  --civitai-color-segmented-bg: #f1f3f5;
+  --civitai-color-media-placeholder: #e9ecef;
 }
 
 [data-theme='light'] {
+  color-scheme: light;
   --civitai-font: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
   --civitai-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
   --civitai-radius: 0.25rem;
@@ -189,13 +210,18 @@
   --civitai-bp-md: 1024px;
   --civitai-bp-lg: 1184px;
   --civitai-bp-xl: 1440px;
+  --civitai-card-border-width: 1px;
+  --civitai-color-track: #e9ecef;
+  --civitai-color-segmented-bg: #f1f3f5;
+  --civitai-color-media-placeholder: #e9ecef;
 }
 
 [data-theme='dark'] {
+  color-scheme: dark;
   --civitai-color-text: #C1C2C5;
   --civitai-color-text-dimmed: #8c8fa3;
   --civitai-color-body: #1A1B1E;
-  --civitai-color-surface: #1A1B1E;
+  --civitai-color-surface: #25262B;
   --civitai-color-surface-2: #25262B;
   --civitai-color-border: #373A40;
   --civitai-color-primary: #1971C2;
@@ -206,4 +232,32 @@
   --civitai-color-success: #326D5C;
   --civitai-color-warning: #e8590c;
   --civitai-color-info: #1971C2;
+  --civitai-card-border-width: 0;
+  --civitai-color-track: #25262B;
+  --civitai-color-segmented-bg: #25262B;
+  --civitai-color-media-placeholder: #25262B;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    color-scheme: dark;
+    --civitai-color-text: #C1C2C5;
+    --civitai-color-text-dimmed: #8c8fa3;
+    --civitai-color-body: #1A1B1E;
+    --civitai-color-surface: #25262B;
+    --civitai-color-surface-2: #25262B;
+    --civitai-color-border: #373A40;
+    --civitai-color-primary: #1971C2;
+    --civitai-color-primary-hover: #1864AB;
+    --civitai-color-primary-fg: #fefefe;
+    --civitai-color-primary-light: rgba(34, 139, 230, 0.15);
+    --civitai-color-error: #e03131;
+    --civitai-color-success: #326D5C;
+    --civitai-color-warning: #e8590c;
+    --civitai-color-info: #1971C2;
+    --civitai-card-border-width: 0;
+    --civitai-color-track: #25262B;
+    --civitai-color-segmented-bg: #25262B;
+    --civitai-color-media-placeholder: #25262B;
+  }
 }