dsh-theme-studio 0.1.0 → 0.3.0

package/lib/themes.d.ts

@@ -1,19 +1,13 @@
 /**
- * Pre-built theme presets for dsh-theme-studio.
+ * Theme presets for dsh-theme-studio.
  *
- * Each preset overrides a set of CSS custom properties on document.documentElement.
- * The property names target dsh's `--dsw-alias-*` semantic layer so the overrides
- * cascade through every component that reads the design tokens.
+ * Each preset only sets tokens listed in `VERIFIED_TOKENS` — real dsh design
+ * tokens, read out of the shipped stylesheets. The accent bundle comes from
+ * `accentTokens()` so a preset and a hand-picked color produce the same shape.
  *
  * @module themes
  */
 import type { ThemePreset } from './types.js';
 export declare const PRESETS: readonly ThemePreset[];
-/** Density → CSS custom property overrides */
-export declare const DENSITY_TOKENS: Record<string, Record<string, string>>;
-/** Radius → CSS custom property overrides */
-export declare const RADIUS_TOKENS: Record<string, Record<string, string>>;
-/** Font family → CSS custom property overrides */
-export declare const FONT_TOKENS: Record<string, Record<string, string>>;
 /** Look up a preset by id. */
 export declare function getPreset(id: string): ThemePreset | undefined;

package/lib/themes.js

@@ -1,125 +1,37 @@
 /**
- * Pre-built theme presets for dsh-theme-studio.
+ * Theme presets for dsh-theme-studio.
  *
- * Each preset overrides a set of CSS custom properties on document.documentElement.
- * The property names target dsh's `--dsw-alias-*` semantic layer so the overrides
- * cascade through every component that reads the design tokens.
+ * Each preset only sets tokens listed in `VERIFIED_TOKENS` — real dsh design
+ * tokens, read out of the shipped stylesheets. The accent bundle comes from
+ * `accentTokens()` so a preset and a hand-picked color produce the same shape.
  *
  * @module themes
  */
+import { accentTokens } from './tokens.js';
+/** Every preset is built from one accent color per mode. */
+function preset(id, name, description, lightAccent, darkAccent) {
+    const base = { id, name, description, tokens: accentTokens(lightAccent) };
+    // A dark entry equal to the light one would be a no-op that still shows the
+    // "adapts to dark" badge, so it is only kept when the color actually changes.
+    if (darkAccent !== undefined && darkAccent.toLowerCase() !== lightAccent.toLowerCase()) {
+        base.darkTokens = accentTokens(darkAccent);
+    }
+    return base;
+}
 export const PRESETS = [
-    {
-        id: 'ocean',
-        name: 'Ocean',
-        description: 'Deep blue accent with cool neutrals',
-        tokens: {
-            '--accent': '#2563eb',
-            '--accent-hover': '#1d4ed8',
-            '--dsw-alias-state-business-primary': '#2563eb',
-            '--dsw-alias-state-business-secondary': '#dbeafe',
-            '--dsw-alias-interactive-bg-hover': 'rgba(37,99,235,0.08)',
-        },
-    },
-    {
-        id: 'forest',
-        name: 'Forest',
-        description: 'Green accent with earthy neutrals',
-        tokens: {
-            '--accent': '#16a34a',
-            '--accent-hover': '#15803d',
-            '--dsw-alias-state-business-primary': '#16a34a',
-            '--dsw-alias-state-business-secondary': '#dcfce7',
-            '--dsw-alias-interactive-bg-hover': 'rgba(22,163,74,0.08)',
-        },
-    },
-    {
-        id: 'sunset',
-        name: 'Sunset',
-        description: 'Warm orange accent with amber highlights',
-        tokens: {
-            '--accent': '#ea580c',
-            '--accent-hover': '#c2410c',
-            '--dsw-alias-state-business-primary': '#ea580c',
-            '--dsw-alias-state-business-secondary': '#fed7aa',
-            '--dsw-alias-interactive-bg-hover': 'rgba(234,88,12,0.08)',
-        },
-    },
-    {
-        id: 'monochrome',
-        name: 'Monochrome',
-        description: 'Grayscale only — no color accent',
-        tokens: {
-            '--accent': '#404040',
-            '--accent-hover': '#262626',
-            '--dsw-alias-state-business-primary': '#404040',
-            '--dsw-alias-state-business-secondary': '#e5e5e5',
-            '--dsw-alias-interactive-bg-hover': 'rgba(64,64,64,0.08)',
-        },
-    },
-    {
-        id: 'nord',
-        name: 'Nord',
-        description: 'Frost blue inspired by the Nord palette',
-        tokens: {
-            '--accent': '#5e81ac',
-            '--accent-hover': '#4c6f96',
-            '--dsw-alias-state-business-primary': '#5e81ac',
-            '--dsw-alias-state-business-secondary': '#e5ebf1',
-            '--dsw-alias-interactive-bg-hover': 'rgba(94,129,172,0.08)',
-        },
-    },
-    {
-        id: 'dracula',
-        name: 'Dracula',
-        description: 'Purple accent with dark mode flair',
-        tokens: {
-            '--accent': '#bd93f9',
-            '--accent-hover': '#a678e8',
-            '--dsw-alias-state-business-primary': '#bd93f9',
-            '--dsw-alias-state-business-secondary': '#3a3a5c',
-            '--dsw-alias-interactive-bg-hover': 'rgba(189,147,249,0.12)',
-        },
-    },
+    preset('ocean', 'Ocean', 'Deep blue, close to dsh default', '#4d6bfe'),
+    preset('forest', 'Forest', 'Calm green', '#16a34a', '#22c55e'),
+    preset('sunset', 'Sunset', 'Warm orange', '#ea580c', '#fb923c'),
+    preset('monochrome', 'Monochrome', 'No color accent at all', '#5c5c5c', '#9e9e9e'),
+    preset('nord', 'Nord', 'Frost blue', '#5e81ac', '#88c0d0'),
+    preset('dracula', 'Dracula', 'Purple, brighter on dark', '#7c5cd6', '#bd93f9'),
+    preset('gruvbox', 'Gruvbox', 'Retro warm earth tones', '#b57614', '#fe8019'),
+    preset('solarized', 'Solarized', 'Schoonover precision palette', '#268bd2', '#5fa8d3'),
+    preset('tokyo-night', 'Tokyo Night', 'City lights blue', '#3d59a1', '#7aa2f7'),
+    preset('catppuccin', 'Catppuccin', 'Soft pastel', '#7287fd', '#cba6f7'),
+    preset('rose', 'Rosé', 'Muted pink', '#b3276b', '#f472b6'),
+    preset('ember', 'Ember', 'Deep red', '#b91c1c', '#ef4444'),
 ];
-/** Density → CSS custom property overrides */
-export const DENSITY_TOKENS = {
-    compact: {
-        '--dsh-content-font-size': '13px',
-        '--dsh-spacing-unit': '4px',
-    },
-    comfortable: {
-        '--dsh-content-font-size': '14px',
-        '--dsh-spacing-unit': '6px',
-    },
-    spacious: {
-        '--dsh-content-font-size': '15px',
-        '--dsh-spacing-unit': '8px',
-    },
-};
-/** Radius → CSS custom property overrides */
-export const RADIUS_TOKENS = {
-    sharp: {
-        '--dsh-radius-small': '2px',
-        '--dsh-radius-medium': '4px',
-        '--dsh-radius-large': '6px',
-    },
-    rounded: {
-        '--dsh-radius-small': '6px',
-        '--dsh-radius-medium': '10px',
-        '--dsh-radius-large': '14px',
-    },
-    soft: {
-        '--dsh-radius-small': '10px',
-        '--dsh-radius-medium': '16px',
-        '--dsh-radius-large': '22px',
-    },
-};
-/** Font family → CSS custom property overrides */
-export const FONT_TOKENS = {
-    system: { '--dsh-font-family': "system-ui, -apple-system, sans-serif" },
-    mono: { '--dsh-font-family': "'JetBrains Mono', 'Fira Code', monospace" },
-    serif: { '--dsh-font-family': "'Georgia', 'Times New Roman', serif" },
-};
 /** Look up a preset by id. */
 export function getPreset(id) {
     return PRESETS.find((p) => p.id === id);

package/lib/tokens.d.ts

@@ -0,0 +1,67 @@
+/**
+ * The verified dsh design-token surface this plugin is allowed to write.
+ *
+ * WHY THIS FILE EXISTS
+ * --------------------
+ * An earlier version of this plugin invented its own variable names
+ * (`--accent`, `--border`, `--dsh-radius-medium`, `--dsh-transition-fast`).
+ * None of them exist in dsh, so nothing the panel did had any effect on the
+ * real UI — while the panel's own preview, which read the same invented
+ * fallbacks, changed color and made it look like it worked.
+ *
+ * Every name below was read out of the shipped dsh stylesheets
+ * (`@deepseek-ai/dsh-client-ui-theme/lib/client.js`), which define the palette
+ * on `body` and `body[data-ds-dark-theme]`. Anything not on this list must not
+ * be written by this plugin, and `tests/tokens.test.mjs` enforces that.
+ *
+ * Two consequences that are load-bearing:
+ *
+ * 1. The palette lives on `body`, not `:root`/`html`. A custom property set on
+ *    `documentElement` is inherited INTO body, but body's own declaration wins
+ *    — so this plugin must write to `document.body`, which `applyTheme` does.
+ * 2. dsh hardcodes `border-radius` per component (including many `50%` circles
+ *    and `corner-shape: round`), and ships no motion tokens at all. Radius
+ *    therefore has no faithful token target and is deliberately not offered;
+ *    animation-reduction is done with a stylesheet instead (see `motionCss`).
+ *
+ * @module tokens
+ */
+/**
+ * Token names confirmed present in dsh, kept here as data so the guard test can
+ * check every map this plugin builds against it.
+ */
+export declare const VERIFIED_TOKENS: readonly string[];
+/** True when `name` is a token this plugin has verified against dsh. */
+export declare function isVerifiedToken(name: string): boolean;
+/** Turn `#rrggbb` into an `rgba()` tint at the given alpha. */
+export declare function tint(hex: string, alpha: number): string;
+/**
+ * The accent bundle: every token that should follow one accent color.
+ *
+ * Applying one color to all of these keeps the primary button, links, active
+ * nav item, focus accents and hover tint in step. Deriving the hover tint from
+ * the accent rather than using a fixed value is what makes a custom color look
+ * deliberate instead of half-applied.
+ */
+export declare function accentTokens(hex: string): Record<string, string>;
+/**
+ * Density → content font size.
+ *
+ * `--dsh-content-font-size` is the verified knob: dsh's own theme bootstrap
+ * writes it on `body`, and 22 shipped stylesheets read it, so changing it moves
+ * the whole content column.
+ */
+export declare const DENSITY_TOKENS: Record<string, Record<string, string>>;
+/** Font family → the two verified family tokens. */
+export declare const FONT_TOKENS: Record<string, Record<string, string>>;
+/**
+ * CSS that suppresses motion, injected as a stylesheet rather than set as
+ * tokens (dsh ships no motion tokens).
+ *
+ * Durations are `0.001ms` rather than `0s` on purpose: a zero duration can stop
+ * `transitionend` / `animationend` from firing, and components that wait on
+ * those events would hang. A near-zero duration keeps every event firing while
+ * being visually instant — the same approach the `prefers-reduced-motion`
+ * convention uses.
+ */
+export declare const MOTION_OFF_CSS: string;

package/lib/tokens.js

@@ -0,0 +1,151 @@
+/**
+ * The verified dsh design-token surface this plugin is allowed to write.
+ *
+ * WHY THIS FILE EXISTS
+ * --------------------
+ * An earlier version of this plugin invented its own variable names
+ * (`--accent`, `--border`, `--dsh-radius-medium`, `--dsh-transition-fast`).
+ * None of them exist in dsh, so nothing the panel did had any effect on the
+ * real UI — while the panel's own preview, which read the same invented
+ * fallbacks, changed color and made it look like it worked.
+ *
+ * Every name below was read out of the shipped dsh stylesheets
+ * (`@deepseek-ai/dsh-client-ui-theme/lib/client.js`), which define the palette
+ * on `body` and `body[data-ds-dark-theme]`. Anything not on this list must not
+ * be written by this plugin, and `tests/tokens.test.mjs` enforces that.
+ *
+ * Two consequences that are load-bearing:
+ *
+ * 1. The palette lives on `body`, not `:root`/`html`. A custom property set on
+ *    `documentElement` is inherited INTO body, but body's own declaration wins
+ *    — so this plugin must write to `document.body`, which `applyTheme` does.
+ * 2. dsh hardcodes `border-radius` per component (including many `50%` circles
+ *    and `corner-shape: round`), and ships no motion tokens at all. Radius
+ *    therefore has no faithful token target and is deliberately not offered;
+ *    animation-reduction is done with a stylesheet instead (see `motionCss`).
+ *
+ * @module tokens
+ */
+/**
+ * Token names confirmed present in dsh, kept here as data so the guard test can
+ * check every map this plugin builds against it.
+ */
+export const VERIFIED_TOKENS = [
+    // Accent / business
+    '--dsw-alias-state-business-primary',
+    '--dsw-alias-state-business-tertiary',
+    '--dsw-alias-brand-primary',
+    '--dsw-alias-brand-text',
+    '--dsw-alias-link',
+    '--dsw-alias-interactive-bg-hover',
+    '--dsw-alias-interactive-bg-hover-accent',
+    '--dsw-alias-button-primary-fill',
+    '--dsw-alias-button-primary-hover',
+    // Typography
+    '--dsw-font-family',
+    '--dsw-font-mono',
+    '--dsw-font-xs-13',
+    '--dsw-font-xs-strong-13',
+    '--dsw-font-xxs-12',
+    '--dsw-font-xxxs-11',
+    '--dsw-font-s-14',
+    '--dsw-font-l-20',
+    '--dsh-content-font-size',
+    '--dsh-content-font-delta',
+];
+/** Fast membership test used by the presets and the guard test. */
+const VERIFIED = new Set(VERIFIED_TOKENS);
+/** True when `name` is a token this plugin has verified against dsh. */
+export function isVerifiedToken(name) {
+    return VERIFIED.has(name);
+}
+/** Turn `#rrggbb` into an `rgba()` tint at the given alpha. */
+export function tint(hex, alpha) {
+    const value = hex.trim().replace(/^#/, '');
+    let r;
+    let g;
+    let b;
+    if (value.length === 3) {
+        r = parseInt(value[0] + value[0], 16);
+        g = parseInt(value[1] + value[1], 16);
+        b = parseInt(value[2] + value[2], 16);
+    }
+    else if (value.length === 6) {
+        r = parseInt(value.slice(0, 2), 16);
+        g = parseInt(value.slice(2, 4), 16);
+        b = parseInt(value.slice(4, 6), 16);
+    }
+    else {
+        return hex;
+    }
+    if ([r, g, b].some((n) => Number.isNaN(n)))
+        return hex;
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+/**
+ * The accent bundle: every token that should follow one accent color.
+ *
+ * Applying one color to all of these keeps the primary button, links, active
+ * nav item, focus accents and hover tint in step. Deriving the hover tint from
+ * the accent rather than using a fixed value is what makes a custom color look
+ * deliberate instead of half-applied.
+ */
+export function accentTokens(hex) {
+    return {
+        '--dsw-alias-state-business-primary': hex,
+        '--dsw-alias-state-business-tertiary': tint(hex, 0.12),
+        '--dsw-alias-brand-primary': hex,
+        '--dsw-alias-brand-text': hex,
+        '--dsw-alias-link': hex,
+        '--dsw-alias-interactive-bg-hover-accent': tint(hex, 0.10),
+        '--dsw-alias-button-primary-fill': hex,
+        '--dsw-alias-button-primary-hover': hex,
+    };
+}
+/**
+ * Density → content font size.
+ *
+ * `--dsh-content-font-size` is the verified knob: dsh's own theme bootstrap
+ * writes it on `body`, and 22 shipped stylesheets read it, so changing it moves
+ * the whole content column.
+ */
+export const DENSITY_TOKENS = {
+    compact: { '--dsh-content-font-size': '13px' },
+    comfortable: { '--dsh-content-font-size': '14px' },
+    spacious: { '--dsh-content-font-size': '15px' },
+};
+/** Font family → the two verified family tokens. */
+export const FONT_TOKENS = {
+    system: {
+        '--dsw-font-family': "system-ui, -apple-system, 'Segoe UI', sans-serif",
+        '--dsw-font-mono': "'Cascadia Code', 'JetBrains Mono', Consolas, monospace",
+    },
+    mono: {
+        '--dsw-font-family': "'Cascadia Code', 'JetBrains Mono', Consolas, monospace",
+        '--dsw-font-mono': "'Cascadia Code', 'JetBrains Mono', Consolas, monospace",
+    },
+    serif: {
+        '--dsw-font-family': "Georgia, 'Times New Roman', serif",
+        '--dsw-font-mono': "'Cascadia Code', Consolas, monospace",
+    },
+};
+/**
+ * CSS that suppresses motion, injected as a stylesheet rather than set as
+ * tokens (dsh ships no motion tokens).
+ *
+ * Durations are `0.001ms` rather than `0s` on purpose: a zero duration can stop
+ * `transitionend` / `animationend` from firing, and components that wait on
+ * those events would hang. A near-zero duration keeps every event firing while
+ * being visually instant — the same approach the `prefers-reduced-motion`
+ * convention uses.
+ */
+export const MOTION_OFF_CSS = `
+*, *::before, *::after {
+  transition-duration: 0.001ms !important;
+  transition-delay: 0ms !important;
+  animation-duration: 0.001ms !important;
+  animation-delay: 0ms !important;
+  animation-iteration-count: 1 !important;
+  scroll-behavior: auto !important;
+}
+`.trim();

package/lib/types.d.ts

@@ -8,25 +8,29 @@ export interface ThemePreset {
     id: string;
     name: string;
     description: string;
-    /** CSS custom property → value, applied to document.documentElement.style */
+    /** Accent tokens for light mode. */
     tokens: Record<string, string>;
+    /** Accent tokens for dark mode, applied when dsh is dark. */
+    darkTokens?: Record<string, string>;
 }
 /** User-selectable density preference. */
 export type Density = 'compact' | 'comfortable' | 'spacious';
-/** User-selectable border-radius preference. */
-export type Radius = 'sharp' | 'rounded' | 'soft';
 /** User-selectable font family preference. */
 export type FontFamily = 'system' | 'mono' | 'serif';
 /** Complete theme preferences persisted in localStorage. */
 export interface ThemePreferences {
     preset: string | null;
     accentColor: string | null;
+    /** Separate accent color for dark mode; null = use accentColor */
+    darkAccentColor: string | null;
     density: Density;
-    radius: Radius;
     fontFamily: FontFamily;
+    animations: boolean;
     customCss: string;
 }
 /** Default preferences — nothing overridden, dsh's built-in theme wins. */
 export declare const DEFAULT_PREFERENCES: ThemePreferences;
 /** localStorage key for persisting preferences. */
 export declare const STORAGE_KEY = "dsh-theme-studio";
+/** Element carrying the plugin's injected stylesheet id. */
+export declare const STYLE_ELEMENT_ID = "dsh-theme-studio-overrides";

package/lib/types.js

@@ -7,10 +7,13 @@
 export const DEFAULT_PREFERENCES = {
     preset: null,
     accentColor: null,
+    darkAccentColor: null,
     density: 'comfortable',
-    radius: 'rounded',
     fontFamily: 'system',
+    animations: true,
     customCss: '',
 };
 /** localStorage key for persisting preferences. */
 export const STORAGE_KEY = 'dsh-theme-studio';
+/** Element carrying the plugin's injected stylesheet id. */
+export const STYLE_ELEMENT_ID = 'dsh-theme-studio-overrides';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-theme-studio",
-  "version": "0.1.0",
-  "description": "Customize the dsh UI theme: pick presets, set accent colors, adjust density, border radius, and font family, or write custom CSS variable overrides.",
+  "version": "0.3.0",
+  "description": "Customize the dsh UI theme: 12 accent presets, dark-mode aware accents with a contrast guard, density, font family, animation toggle, and raw design-token overrides.",
   "type": "module",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",