@djangocfg/layouts 2.1.257 → 2.1.259

package/src/theme/buildThemeStyleSheet.ts

@@ -0,0 +1,71 @@
+import type { ThemeCssVarMap, ThemeStyleConfig, ThemeStylePresetId } from './themeStyle.types';
+import { THEME_STYLE_PRESETS } from './themeStylePresets';
+
+function mergeLayer(
+  base: ThemeCssVarMap | undefined,
+  over: ThemeCssVarMap | undefined
+): ThemeCssVarMap {
+  return { ...base, ...over };
+}
+
+/**
+ * Tailwind v4 `rounded-*` utilities are backed by `--radius-*` scale variables (xs/sm/md/…),
+ * not by our semantic `--radius`.
+ *
+ * When semantic `radius` is present, emit the derived scale too so the injected stylesheet
+ * controls both semantic and Tailwind scale rounding across the UI.
+ */
+function withTailwindRadiusScale(vars: ThemeCssVarMap): Array<[string, string]> {
+  const entries = Object.entries(vars);
+  const radius = vars.radius;
+  if (!radius) return entries;
+
+  const r = String(radius).trim();
+  if (!r) return entries;
+
+  const scale: Array<[string, string]> = [
+    ['radius-xs', `calc(${r} - 6px)`],
+    ['radius-sm', `calc(${r} - 4px)`],
+    ['radius-md', `calc(${r} - 2px)`],
+    ['radius-lg', r],
+    ['radius-xl', `calc(${r} + 4px)`],
+    ['radius-2xl', `calc(${r} + 8px)`],
+    ['radius-3xl', `calc(${r} + 12px)`],
+    ['radius-4xl', `calc(${r} + 16px)`],
+  ];
+
+  // Put derived values after semantic `radius` so they always win in the injected block.
+  return [...entries, ...scale];
+}
+
+/**
+ * Build a small stylesheet fragment for injection after globals.
+ * Order: preset (if not default) → `vars.light` / `vars.dark`.
+ */
+export function buildThemeStyleSheet(style?: ThemeStyleConfig): string {
+  if (!style) return '';
+
+  const presetId: ThemeStylePresetId = style.preset ?? 'default';
+  const preset = THEME_STYLE_PRESETS[presetId] ?? THEME_STYLE_PRESETS.default;
+
+  const light = mergeLayer(preset.light, style.vars?.light);
+  const dark = mergeLayer(preset.dark, style.vars?.dark);
+
+  const blocks: string[] = [];
+
+  if (Object.keys(light).length > 0) {
+    const body = withTailwindRadiusScale(light)
+      .map(([k, v]) => `  --${k}: ${v};`)
+      .join('\n');
+    blocks.push(`:root {\n${body}\n}`);
+  }
+
+  if (Object.keys(dark).length > 0) {
+    const body = withTailwindRadiusScale(dark)
+      .map(([k, v]) => `  --${k}: ${v};`)
+      .join('\n');
+    blocks.push(`.dark {\n${body}\n}`);
+  }
+
+  return blocks.join('\n\n');
+}

package/src/theme/index.ts

@@ -0,0 +1,16 @@
+export type {
+  ThemeCssVarChartKey,
+  ThemeCssVarChromeKey,
+  ThemeCssVarColorKey,
+  ThemeCssVarKey,
+  ThemeCssVarMap,
+  ThemeCssVarSidebarKey,
+  ThemeStyleConfig,
+  ThemeStylePresetId,
+} from './themeStyle.types';
+
+export { THEME_STYLE_PRESETS, THEME_STYLE_PRESET_ORDER } from './themeStylePresets';
+
+export { buildThemeStyleSheet } from './buildThemeStyleSheet';
+
+export { ThemeStyleBridge, type ThemeStyleBridgeProps } from './ThemeStyleBridge';

package/src/theme/themeStyle.types.ts

@@ -0,0 +1,89 @@
+/**
+ * Typed theme token overrides for BaseApp (`theme.style`).
+ *
+ * Values are raw HSL components as in ui-core CSS, e.g. `192 90% 35%` (no `hsl()` wrapper).
+ * **`radius`** accepts any valid CSS length (`0.75rem`, `1rem`, …).
+ *
+ * ### Parity with the Theme Configurator playground
+ *
+ * The playground (`apps/playground`) uses **`ThemeData`**: nested objects (`colors.primary`, `radius`, …).
+ * This package maps the **same semantics** onto **global CSS variables** (`--primary`, `--radius`, …) that
+ * `buildThemeStyleSheet` injects. Playground-only buckets (**`shadows`**, **`typography`**, **`spacing`**, …)
+ * are **not** represented here — export full CSS from the configurator when you need those.
+ *
+ * Rough mapping: `colors.*` → kebab key without `Foreground` → `*-foreground`; `radius` → `radius`;
+ * `sidebar.*` → `sidebar-*`.
+ */
+
+/** Core semantic colors (HSL triplets) */
+export type ThemeCssVarColorKey =
+  | 'background'
+  | 'foreground'
+  | 'card'
+  | 'card-foreground'
+  | 'popover'
+  | 'popover-foreground'
+  | 'primary'
+  | 'primary-foreground'
+  | 'secondary'
+  | 'secondary-foreground'
+  | 'muted'
+  | 'muted-foreground'
+  | 'accent'
+  | 'accent-foreground'
+  | 'destructive'
+  | 'destructive-foreground';
+
+/** Layout / focus tokens — `radius` is usually a length, rest are HSL or shared with colors */
+export type ThemeCssVarChromeKey = 'border' | 'input' | 'ring' | 'radius';
+
+export type ThemeCssVarSidebarKey =
+  | 'sidebar-background'
+  | 'sidebar-foreground'
+  | 'sidebar-primary'
+  | 'sidebar-primary-foreground'
+  | 'sidebar-accent'
+  | 'sidebar-accent-foreground'
+  | 'sidebar-border'
+  | 'sidebar-ring';
+
+export type ThemeCssVarChartKey = 'chart-1' | 'chart-2' | 'chart-3' | 'chart-4' | 'chart-5';
+
+/**
+ * Keys that match `--${key}` in `ui-core` theme files (`light.css` / `dark.css`).
+ * Use `ThemeCssVarMap` for partial overrides on top of a preset.
+ */
+export type ThemeCssVarKey =
+  | ThemeCssVarColorKey
+  | ThemeCssVarChromeKey
+  | ThemeCssVarSidebarKey
+  | ThemeCssVarChartKey;
+
+/** Partial map of semantic variables for one color mode */
+export type ThemeCssVarMap = Partial<Record<ThemeCssVarKey, string>>;
+
+/** Built-in bundles in `THEME_STYLE_PRESETS` — see README preset table. */
+export type ThemeStylePresetId =
+  | 'default'
+  | 'django-cfg'
+  | 'ios'
+  | 'soft'
+  | 'dense'
+  | 'high-contrast';
+
+/**
+ * Optional style layer: named preset + per-mode overrides.
+ * Merged as: globals (CSS imports) → **preset** → **`vars.light` / `vars.dark`** (later wins).
+ */
+export interface ThemeStyleConfig {
+  /**
+   * Built-in token bundle. Use `'default'` or omit to rely only on imported CSS + `vars`.
+   * @default 'default'
+   */
+  preset?: ThemeStylePresetId;
+  /** Fine-grained overrides on top of globals and preset */
+  vars?: {
+    light?: ThemeCssVarMap;
+    dark?: ThemeCssVarMap;
+  };
+}

package/src/theme/themeStylePresets.ts

@@ -0,0 +1,202 @@
+/**
+ * Curated presets for `BaseApp` `theme.style` — small deltas over `ui-core` globals.
+ * For full token matrices (shadows, type scale, …) use the playground Theme Configurator → export CSS.
+ */
+
+import type { ThemeCssVarMap, ThemeStylePresetId } from './themeStyle.types';
+
+/** Stable order for UI lists / docs (every `ThemeStylePresetId` appears once). */
+export const THEME_STYLE_PRESET_ORDER = [
+  'default',
+  'django-cfg',
+  'ios',
+  'soft',
+  'dense',
+  'high-contrast',
+] as const satisfies readonly ThemeStylePresetId[];
+
+export const THEME_STYLE_PRESETS: Record<
+  ThemeStylePresetId,
+  { light: ThemeCssVarMap; dark: ThemeCssVarMap }
+> = {
+  /** No extra rules — same as globals only (`vars` may still apply). */
+  default: {
+    light: {},
+    dark: {},
+  },
+
+  /**
+   * DjangoCFG brand: deeper cyan primary on light, bright cyan + dark label on dark
+   * (aligned with current `ui-core` theme files when globals are loaded).
+   */
+  'django-cfg': {
+    light: {
+      primary: '192 90% 35%',
+      'primary-foreground': '0 0% 100%',
+      ring: '192 90% 35%',
+      'sidebar-primary': '192 90% 35%',
+      'sidebar-ring': '192 90% 35%',
+      'chart-1': '192 90% 35%',
+    },
+    dark: {
+      primary: '189 100% 50%',
+      'primary-foreground': '0 0% 9%',
+      ring: '189 100% 50%',
+      'sidebar-primary': '189 100% 50%',
+      'sidebar-primary-foreground': '0 0% 9%',
+      'sidebar-ring': '189 100% 50%',
+      'chart-1': '189 100% 50%',
+    },
+  },
+
+  /**
+   * Apple-style system UI: #007AFF primary, very light chrome, ~12pt corners, hairline separators.
+   * (Inspired by `apps/playground` `macos` preset, mapped to semantic `--*` vars only.)
+   */
+  ios: {
+    light: {
+      background: '0 0% 98%',
+      foreground: '220 9% 12%',
+      card: '0 0% 100%',
+      'card-foreground': '220 9% 12%',
+      popover: '0 0% 100%',
+      'popover-foreground': '220 9% 12%',
+      primary: '211 100% 50%',
+      'primary-foreground': '0 0% 100%',
+      secondary: '220 9% 92%',
+      'secondary-foreground': '220 9% 12%',
+      muted: '220 9% 94%',
+      'muted-foreground': '220 9% 40%',
+      accent: '220 9% 94%',
+      'accent-foreground': '220 9% 12%',
+      destructive: '0 100% 58%',
+      'destructive-foreground': '0 0% 100%',
+      border: '220 9% 88%',
+      input: '220 9% 88%',
+      ring: '211 100% 50%',
+      radius: '0.75rem',
+      'sidebar-background': '0 0% 99%',
+      'sidebar-foreground': '220 9% 12%',
+      'sidebar-primary': '211 100% 50%',
+      'sidebar-primary-foreground': '0 0% 100%',
+      'sidebar-accent': '220 9% 94%',
+      'sidebar-accent-foreground': '220 9% 12%',
+      'sidebar-border': '220 9% 88%',
+      'sidebar-ring': '211 100% 50%',
+      'chart-1': '211 100% 50%',
+      'chart-2': '145 63% 42%',
+      'chart-3': '262 83% 58%',
+      'chart-4': '35 100% 50%',
+      'chart-5': '346 77% 50%',
+    },
+    dark: {
+      background: '240 6% 10%',
+      foreground: '0 0% 96%',
+      card: '240 6% 14%',
+      'card-foreground': '0 0% 96%',
+      popover: '240 6% 16%',
+      'popover-foreground': '0 0% 96%',
+      primary: '211 100% 55%',
+      'primary-foreground': '0 0% 100%',
+      secondary: '240 5% 26%',
+      'secondary-foreground': '0 0% 96%',
+      muted: '240 5% 16%',
+      'muted-foreground': '240 5% 64%',
+      accent: '240 5% 18%',
+      'accent-foreground': '0 0% 96%',
+      destructive: '0 100% 67%',
+      'destructive-foreground': '0 0% 100%',
+      border: '240 5% 22%',
+      input: '240 5% 22%',
+      ring: '211 100% 55%',
+      radius: '0.75rem',
+      'sidebar-background': '240 6% 8%',
+      'sidebar-foreground': '0 0% 96%',
+      'sidebar-primary': '211 100% 55%',
+      'sidebar-primary-foreground': '0 0% 100%',
+      'sidebar-accent': '240 5% 16%',
+      'sidebar-accent-foreground': '0 0% 96%',
+      'sidebar-border': '240 5% 22%',
+      'sidebar-ring': '211 100% 55%',
+      'chart-1': '211 100% 55%',
+      'chart-2': '145 65% 52%',
+      'chart-3': '262 83% 65%',
+      'chart-4': '35 100% 58%',
+      'chart-5': '346 77% 58%',
+    },
+  },
+
+  /** Soft, friendly surfaces: larger radius, low-contrast borders (product / marketing). */
+  soft: {
+    light: {
+      background: '0 0% 98%',
+      foreground: '240 6% 10%',
+      card: '0 0% 100%',
+      'card-foreground': '240 6% 10%',
+      muted: '240 5% 96%',
+      'muted-foreground': '240 4% 46%',
+      accent: '240 5% 94%',
+      'accent-foreground': '240 6% 10%',
+      border: '240 5% 91%',
+      input: '240 5% 91%',
+      radius: '1rem',
+      'sidebar-accent': '240 5% 94%',
+      'sidebar-border': '240 5% 91%',
+    },
+    dark: {
+      background: '240 6% 8%',
+      foreground: '0 0% 96%',
+      card: '240 5% 12%',
+      'card-foreground': '0 0% 96%',
+      muted: '240 4% 16%',
+      'muted-foreground': '240 5% 64%',
+      accent: '240 5% 16%',
+      'accent-foreground': '0 0% 96%',
+      border: '240 5% 20%',
+      input: '240 5% 20%',
+      radius: '1rem',
+      'sidebar-background': '240 6% 6%',
+      'sidebar-accent': '240 5% 14%',
+      'sidebar-border': '240 5% 20%',
+    },
+  },
+
+  /** Compact controls: small radius, stronger borders (tables, admin, IDE-like). */
+  dense: {
+    light: {
+      radius: '0.25rem',
+      border: '0 0% 82%',
+      input: '0 0% 82%',
+      muted: '0 0% 94%',
+      card: '0 0% 100%',
+      accent: '0 0% 93%',
+    },
+    dark: {
+      radius: '0.25rem',
+      border: '0 0% 24%',
+      input: '0 0% 24%',
+      muted: '0 0% 12%',
+      card: '0 0% 10%',
+      accent: '0 0% 14%',
+    },
+  },
+
+  /** Stronger borders and text for glare / accessibility. */
+  'high-contrast': {
+    light: {
+      border: '0 0% 72%',
+      input: '0 0% 72%',
+      'muted-foreground': '0 0% 32%',
+      foreground: '0 0% 6%',
+      ring: '0 0% 20%',
+    },
+    dark: {
+      border: '0 0% 38%',
+      input: '0 0% 38%',
+      'muted-foreground': '0 0% 78%',
+      foreground: '0 0% 100%',
+      background: '0 0% 6%',
+      ring: '0 0% 85%',
+    },
+  },
+};