@djangocfg/ui-core 2.1.257 → 2.1.260

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.257",
+  "version": "2.1.260",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -33,6 +33,11 @@
       "import": "./src/index.ts",
       "require": "./src/index.ts"
     },
+    "./stories": {
+      "types": "./src/stories/index.ts",
+      "import": "./src/stories/index.ts",
+      "require": "./src/stories/index.ts"
+    },
     "./components": {
       "types": "./src/components/index.ts",
       "import": "./src/components/index.ts",
@@ -81,7 +86,7 @@
     "playground": "playground dev"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.257",
+    "@djangocfg/i18n": "^2.1.260",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
@@ -143,9 +148,9 @@
     "vaul": "1.1.2"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.257",
+    "@djangocfg/i18n": "^2.1.260",
     "@djangocfg/playground": "workspace:*",
-    "@djangocfg/typescript-config": "^2.1.257",
+    "@djangocfg/typescript-config": "^2.1.260",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/components/effects/GlowBackground.tsx

@@ -32,7 +32,7 @@ export const GlowBackground = React.memo(({ className }: GlowBackgroundProps) =>
     }}
     className={className}
   >
-    {/* Blue blob — top left */}
+    {/* Primary-hue blob — top left (follows --primary) */}
     <div style={{
       position: 'absolute',
       top: '-10%',
@@ -40,7 +40,7 @@ export const GlowBackground = React.memo(({ className }: GlowBackgroundProps) =>
       width: 700,
       height: 700,
       borderRadius: '50%',
-      background: 'radial-gradient(circle, hsl(217 91% 60% / 0.5) 0%, transparent 70%)',
+      background: 'radial-gradient(circle, hsl(var(--primary) / 0.45) 0%, transparent 70%)',
       filter: 'blur(80px)',
       animation: 'blob 10s ease-in-out infinite',
     }} />

package/src/stories/index.ts

@@ -0,0 +1,28 @@
+/**
+ * UI-Core story modules registry.
+ *
+ * Re-export stories through a package subpath instead of deep importing files from apps.
+ */
+ 
+ import type { StoryModule } from '@djangocfg/playground';
+ 
+ import * as Button from '../components/button.story';
+ import * as Input from '../components/input.story';
+ import * as Select from '../components/select.story';
+ import * as Slider from '../components/slider.story';
+ import * as Dialog from '../components/dialog.story';
+ import * as Tabs from '../components/tabs.story';
+ import * as Popover from '../components/popover.story';
+ import * as Tooltip from '../components/tooltip.story';
+ 
+ export const uiCoreStoryModules: Record<string, StoryModule> = {
+   'button.story.tsx': Button,
+   'input.story.tsx': Input,
+   'select.story.tsx': Select,
+   'slider.story.tsx': Slider,
+   'dialog.story.tsx': Dialog,
+   'tabs.story.tsx': Tabs,
+   'popover.story.tsx': Popover,
+   'tooltip.story.tsx': Tooltip,
+ };
+ 

package/src/styles/palette/useThemePalette.ts

@@ -6,6 +6,11 @@
  * Reads colors directly from document, converting HSL to hex for compatibility
  * with Canvas, SVG, Mermaid, and other tools that don't support CSS variables.
  *
+ * **Contrast / semantic pairs:** Filled surfaces (`primary`, `secondary`, `destructive`, …) and
+ * their `*-foreground` text colors are defined together in `theme/light.css` and `theme/dark.css`.
+ * Components should use `bg-primary text-primary-foreground`, not pick a one-off text color.
+ * To change how buttons read, adjust those CSS variables — not per-component styles or hooks.
+ *
  * @module ui-core/styles/palette/useThemePalette
  */
 
@@ -29,16 +34,16 @@ const SSR_FALLBACK: Record<string, string> = {
   'muted-foreground':     '#737373',
   'border':               '#e5e5e5',
   'input':                '#e5e5e5',
-  'ring':                 '#3b82f6',
-  'primary':              '#3b82f6',
+  'ring':                 '#0989aa',
+  'primary':              '#0989aa',
   'primary-foreground':   '#ffffff',
   'secondary':            '#f5f5f5',
   'secondary-foreground': '#171717',
-  'accent':               '#f5f5f5',
+  'accent':               '#eaf7fa',
   'accent-foreground':    '#171717',
   'destructive':          '#ef4444',
   'destructive-foreground': '#ffffff',
-  'chart-1':              '#3b82f6',
+  'chart-1':              '#0989aa',
   'chart-2':              '#22c55e',
   'chart-3':              '#8b5cf6',
   'chart-4':              '#f59e0b',
@@ -125,7 +130,7 @@ export function useThemePalette(): ThemePalette {
       successForeground: '#ffffff',
       warning: getCssColorAsHex('chart-4'), // Orange
       warningForeground: '#ffffff',
-      info: getCssColorAsHex('chart-1'), // Blue (same as primary)
+      info: getCssColorAsHex('chart-1'), // Brand / primary hue
       infoForeground: '#ffffff',
 
       // Chart colors

package/src/styles/palette/utils.ts

@@ -4,7 +4,7 @@
  */
 
 /**
- * Parse HSL string from CSS variable (e.g., "217 91% 60%") to components
+ * Parse HSL string from CSS variable (e.g., "192 90% 35%" for light `--primary`) to components
  */
 function parseHslString(hsl: string): { h: number; s: number; l: number } | null {
   const match = hsl.trim().match(/^(\d+)\s+(\d+)%\s+(\d+)%$/);
@@ -53,8 +53,8 @@ function rgbToHex(r: number, g: number, b: number): string {
 
 /**
  * Convert CSS HSL variable value to hex
- * Input: "217 91% 60%" (from CSS --primary: 217 91% 60%)
- * Output: "#3b82f6"
+ * Input: "192 90% 35%" (from CSS --primary in light theme)
+ * Output: "#0989aa"
  */
 export function hslToHex(hslString: string): string {
   const parsed = parseHslString(hslString);
@@ -66,7 +66,7 @@ export function hslToHex(hslString: string): string {
 
 /**
  * Convert CSS HSL variable value to rgb() string
- * Input: "217 91% 60%"
+ * Input: "192 90% 35%"
  * Output: "rgb(59, 130, 246)"
  */
 export function hslToRgbString(hslString: string): string {
@@ -79,7 +79,7 @@ export function hslToRgbString(hslString: string): string {
 
 /**
  * Convert CSS HSL variable value to rgba() string with opacity
- * Input: "217 91% 60%", 0.2
+ * Input: "192 90% 35%", 0.2
  * Output: "rgba(59, 130, 246, 0.2)"
  */
 export function hslToRgba(hslString: string, alpha: number): string {

package/src/styles/theme/dark.css

@@ -1,8 +1,15 @@
 /**
  * Dark Theme Colors
  *
- * Vercel-inspired dark theme with true black backgrounds
- * High contrast with subtle grays for comfortable viewing
+ * Same brand as light: #00d9ff → `189 100% 50%`.
+ *
+ * Semantic pairs (do not split ad hoc in components):
+ * - --primary / --primary-foreground — filled CTAs. On dark UI the brand #00d9ff is bright enough
+ *   that **dark ink** (same as light :root --foreground) reads better than white (WCAG + legibility).
+ * - --secondary / --secondary-foreground — neutral filled controls on dark chrome (elevated gray +
+ *   light text), not a light-theme secondary pasted onto .dark.
+ *
+ * Tuning contrast: adjust HSL together; avoid setting text color per button in React — use tokens.
  */
 
 .dark {
@@ -13,37 +20,41 @@
   --card-foreground: 0 0% 98%;
   --popover: 0 0% 12%;
   --popover-foreground: 0 0% 98%;
-  --primary: 217 91% 60%;
-  --primary-foreground: 0 0% 100%;
-  --secondary: 0 0% 98%;
-  --secondary-foreground: 0 0% 9%;
+  /* Exact brand: #00d9ff (same HSL as :root light primary) */
+  --primary: 189 100% 50%;
+  /* Dark label on bright cyan — stronger contrast than white on #00d9ff */
+  --primary-foreground: 0 0% 9%;
+  /* Secondary: dark elevated surface + light label (matches typical shadcn dark “secondary” role) */
+  --secondary: 0 0% 16%;
+  --secondary-foreground: 0 0% 96%;
   --muted: 0 0% 10%;
   --muted-foreground: 0 0% 60%;
-  --accent: 0 0% 15%;
+  /* Cyan-tinted elevated surface */
+  --accent: 189 18% 17%;
   --accent-foreground: 0 0% 98%;
   --destructive: 0 84% 60%;
   --destructive-foreground: 0 0% 98%;
   --border: 0 0% 15%;
   --input: 0 0% 15%;
-  --ring: 217 91% 60%;
+  --ring: 189 100% 50%;
 
   /* Sidebar Dark Theme - Darker black sidebar */
   --sidebar-background: 0 0% 0%;
   --sidebar-foreground: 0 0% 98%;
-  --sidebar-primary: 217 91% 60%;
-  --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 0 0% 10%;
+  --sidebar-primary: 189 100% 50%;
+  --sidebar-primary-foreground: 0 0% 9%;
+  --sidebar-accent: 189 14% 12%;
   --sidebar-accent-foreground: 0 0% 98%;
   --sidebar-border: 0 0% 15%;
-  --sidebar-ring: 217 91% 60%;
+  --sidebar-ring: 189 100% 50%;
 
   /* Surface gradient dark */
   --surface-gradient: linear-gradient(to bottom, hsl(var(--background)), hsl(var(--background) / 0.8));
 
-  /* Chart colors - same as light theme for consistency */
-  --chart-1: 217 91% 60%;  /* Blue - CPU */
-  --chart-2: 142 76% 36%;  /* Green - Memory */
-  --chart-3: 262 83% 58%;  /* Purple - Disk */
-  --chart-4: 26 90% 57%;   /* Orange */
-  --chart-5: 346 77% 50%;  /* Red */
+  /* Chart colors — chart-1 aligned with brand */
+  --chart-1: 189 100% 50%;
+  --chart-2: 142 76% 36%;
+  --chart-3: 262 83% 58%;
+  --chart-4: 26 90% 57%;
+  --chart-5: 346 77% 50%;
 }

package/src/styles/theme/light.css

@@ -1,8 +1,12 @@
 /**
  * Light Theme Colors
  *
- * Vercel-inspired light theme with clean whites and subtle grays
- * High contrast for optimal readability
+ * Marketing / dark UI can use bright cyan `#00d9ff`. On **white** backgrounds, that neon with white
+ * label fails contrast and looks harsh—so `:root` `--primary` is a **deeper blue-cyan** (same family,
+ * lower L + slightly bluer hue) for buttons, links, and `text-primary`. Dark theme keeps the bright
+ * swatch via `.dark`.
+ *
+ * Pairs `--primary` / `--primary-foreground` are tuned together. Prefer editing tokens over ad hoc classes.
  */
 
 :root {
@@ -13,38 +17,40 @@
   --card-foreground: 0 0% 9%;
   --popover: 0 0% 100%;
   --popover-foreground: 0 0% 9%;
-  --primary: 217 91% 60%;
+  /* Interactive primary on white (~#0989aa): readable white-on-fill + calmer than neon */
+  --primary: 192 90% 35%;
   --primary-foreground: 0 0% 100%;
   --secondary: 0 0% 9%;
   --secondary-foreground: 0 0% 98%;
   --muted: 0 0% 96%;
   --muted-foreground: 0 0% 45%;
-  --accent: 0 0% 92%;
+  /* Subtle cyan-tinted hover surface (not gray-only) */
+  --accent: 192 18% 94%;
   --accent-foreground: 0 0% 9%;
   --destructive: 0 84% 60%;
   --destructive-foreground: 0 0% 98%;
   --border: 0 0% 90%;
   --input: 0 0% 90%;
-  --ring: 217 91% 60%;
+  --ring: 192 90% 35%;
   --radius: 0.5rem;
 
   /* Sidebar Light Theme - Subtle gray background */
   --sidebar-background: 0 0% 98%;
   --sidebar-foreground: 0 0% 9%;
-  --sidebar-primary: 217 91% 60%;
+  --sidebar-primary: 192 90% 35%;
   --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 0 0% 94%;
+  --sidebar-accent: 189 16% 95%;
   --sidebar-accent-foreground: 0 0% 9%;
   --sidebar-border: 0 0% 90%;
-  --sidebar-ring: 217 91% 60%;
+  --sidebar-ring: 192 90% 35%;
 
   /* Surface gradient */
   --surface-gradient: linear-gradient(to bottom, hsl(var(--background)), hsl(var(--background) / 0.8));
 
-  /* Chart colors - vibrant and distinct */
-  --chart-1: 217 91% 60%;  /* Blue - CPU */
-  --chart-2: 142 76% 36%;  /* Green - Memory */
-  --chart-3: 262 83% 58%;  /* Purple - Disk */
-  --chart-4: 26 90% 57%;   /* Orange */
-  --chart-5: 346 77% 50%;  /* Red */
+  /* Chart colors — chart-1 aligned with brand hue */
+  --chart-1: 192 90% 35%;
+  --chart-2: 142 76% 36%;
+  --chart-3: 262 83% 58%;
+  --chart-4: 26 90% 57%;
+  --chart-5: 346 77% 50%;
 }