@tolle_/tolle-ui 0.0.5-beta → 0.0.7-beta

package/lib/button.component.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from 'class-variance-authority';
 import * as i0 from "@angular/core";
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
+    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
     size?: "default" | "xs" | "sm" | "lg" | "icon-xs" | "icon-sm" | "icon" | "icon-lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type ButtonProps = VariantProps<typeof buttonVariants>;

package/lib/theme.service.d.ts

@@ -8,19 +8,22 @@ export declare class ThemeService {
     private renderer;
     private isDarkSubject;
     isDark$: import("rxjs").Observable<boolean>;
+    private styleId;
     constructor(document: Document, platformId: Object, config: TolleConfig, rendererFactory: RendererFactory2);
     private initializeTheme;
     /**
-     * Applies the brand identity variables.
-     * These are applied to :root (html) so they ripple through all color-mix functions.
+     * Applies the brand identity variables with full shade palette
      */
     applyBrandConfig(config: TolleConfig): void;
+    /**
+     * Generates full primary color palette (50-900) based on base color
+     * Uses color-mix() for consistency with your existing approach
+     */
+    private generatePrimaryShades;
+    private injectDynamicStyles;
     toggleTheme(): void;
     private enableDarkMode;
     private disableDarkMode;
-    /**
-     * Helper to get current state for components that might need JS-based logic
-     */
     get currentTheme(): 'dark' | 'light';
     static ɵfac: i0.ɵɵFactoryDeclaration<ThemeService, [null, null, { optional: true; }, null]>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ThemeService>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tolle_/tolle-ui",
-  "version": "0.0.5-beta",
+  "version": "0.0.7-beta",
   "publishConfig": {
     "access": "public"
   },
@@ -8,6 +8,9 @@
     "./theme.css": {
       "default": "./theme.css"
     },
+    "./preset": {
+      "default": "./preset.js"
+    },
     "./package.json": {
       "default": "./package.json"
     },

package/preset.js

@@ -0,0 +1,56 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        // Primary with full palette
+        primary: {
+          50: 'var(--primary-50)',
+          100: 'var(--primary-100)',
+          200: 'var(--primary-200)',
+          300: 'var(--primary-300)',
+          400: 'var(--primary-400)',
+          500: 'var(--primary-500)',
+          600: 'var(--primary-600)',
+          700: 'var(--primary-700)',
+          800: 'var(--primary-800)',
+          900: 'var(--primary-900)',
+          DEFAULT: 'var(--primary-500)',
+          foreground: 'var(--primary-foreground)',
+        },
+        // Other colors
+        secondary: {
+          DEFAULT: 'var(--secondary)',
+          foreground: 'var(--secondary-foreground)',
+        },
+        muted: {
+          DEFAULT: 'var(--muted)',
+          foreground: 'var(--muted-foreground)',
+        },
+        accent: {
+          DEFAULT: 'var(--accent)',
+          foreground: 'var(--accent-foreground)',
+        },
+        destructive: {
+          DEFAULT: 'var(--destructive)',
+          foreground: 'var(--destructive-foreground)',
+        },
+        border: 'var(--border)',
+        input: 'var(--input)',
+        ring: 'var(--ring)',
+        background: 'var(--background)',
+        foreground: 'var(--foreground)',
+        popover: {
+          DEFAULT: 'var(--popover)',
+          foreground: 'var(--popover-foreground)',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+    },
+  },
+  plugins: [],
+};

package/theme.css

@@ -6,25 +6,34 @@
 @tailwind utilities;
 
 /* -------------------------------------------------------------------------- */
-/* 2. THEME VARIABLES (The Engine)                                            */
+/* 2. THEME VARIABLES (The Engine) - WITH FULL PALETTE                        */
 /* -------------------------------------------------------------------------- */
 :root {
   /* --- Configuration (Source of Truth) --- */
   --primary: #2563eb;
   --radius: 0.5rem;
 
-  /* --- Auto-Generated Colors (Dependent on --primary) --- */
+  /* --- Auto-Generated Full Palette (Defaults) --- */
+  --primary-50: #eff6ff;
+  --primary-100: #dbeafe;
+  --primary-200: #bfdbfe;
+  --primary-300: #93c5fd;
+  --primary-400: #60a5fa;
+  --primary-500: #3b82f6;
+  --primary-600: #2563eb;
+  --primary-700: #1d4ed8;
+  --primary-800: #1e40af;
+  --primary-900: #1e3a8a;
+
+  /* --- Derived Colors (will be overridden by dynamic styles) --- */
   --primary-foreground: #ffffff;
-  --secondary: color-mix(in srgb, var(--primary), #ffffff 85%);
-  --secondary-foreground: color-mix(in srgb, var(--primary), #000000 80%);
-
-  --muted: color-mix(in srgb, var(--primary), #f3f4f6 92%);
-  --muted-foreground: color-mix(in srgb, var(--primary), #4b5563 40%); /* Fixed double definition */
-
-  --accent: color-mix(in srgb, var(--primary), transparent 90%);
-  --accent-foreground: var(--primary);
-
-  --ring: color-mix(in srgb, var(--primary), transparent 75%);
+  --secondary: color-mix(in srgb, var(--primary-200), transparent 40%);
+  --secondary-foreground: var(--primary-900);
+  --muted: color-mix(in srgb, var(--primary-50), #f3f4f6 50%);
+  --muted-foreground: color-mix(in srgb, var(--primary-400), #4b5563 60%);
+  --accent: color-mix(in srgb, var(--primary-100), transparent 70%);
+  --accent-foreground: var(--primary-700);
+  --ring: color-mix(in srgb, var(--primary-300), transparent 50%);
 
   /* --- Neutral/Layout Base --- */
   --background: #ffffff;
@@ -34,10 +43,23 @@
   --destructive: #ef4444;
   --destructive-foreground: #f8fafc;
   --input-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --popover: #ffffff;
+  --popover-foreground: #020817;
 }
 
 /* --- Dark Mode (Google/Charcoal Palette) --- */
 .dark {
+  --primary-50: #1e3a8a;
+  --primary-100: #1e40af;
+  --primary-200: #1d4ed8;
+  --primary-300: #2563eb;
+  --primary-400: #3b82f6;
+  --primary-500: #60a5fa;
+  --primary-600: #93c5fd;
+  --primary-700: #bfdbfe;
+  --primary-800: #dbeafe;
+  --primary-900: #eff6ff;
+
   --background: #121212;
   --foreground: #e3e3e3;
   --secondary: #1f1f1f;
@@ -49,11 +71,14 @@
   --popover: #1f1f1f;
   --popover-foreground: #e3e3e3;
   --accent: rgba(255, 255, 255, 0.04);
-  --accent-foreground: var(--primary);
-  --ring: color-mix(in srgb, var(--primary), transparent 40%);
+  --accent-foreground: var(--primary-400);
+  --ring: color-mix(in srgb, var(--primary-500), transparent 60%);
   --input-shadow: 0 0 #0000;
+  --destructive: #dc2626;
+  --destructive-foreground: #f8fafc;
 }
 
+/* [Rest of your existing CSS remains the same - everything below stays] */
 /* -------------------------------------------------------------------------- */
 /* 3. BASE LAYER (Icons & Typography)                                         */
 /* -------------------------------------------------------------------------- */