@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.8 → 0.2.10

package/dist/themes/examples/dark-theme.js

@@ -2,84 +2,103 @@ import { createTheme, overrideTheme, PartialThemeConfig } from '../inheritance';
 import { stanDesignTheme } from '../base-themes';
 
 /**
- * Example= {
-  meta,
-    description,
-    author,
-    version,
-    category,
-    tags, 'night', 'inheritance'],
-    preview,
-    createdAt,
-    updatedAt},
-  colors,
-      100,
-      200,
-      300,
-      400,
-      500,
-      600,
-      700,
-      800,
-      900,
-      '500-rgb', 163, 184',
-      '600-rgb', 213, 225',
-      '700-rgb', 232, 240'
+ * Example: Dark Theme using inheritance
+ * This theme overrides colors for a dark mode while keeping other properties
+ */
+const darkThemeConfig: PartialThemeConfig = {
+  meta: {
+    name: 'Dark Mode',
+    description: 'Dark variant with inheritance from default theme',
+    author: 'Theme Examples',
+    version: '1.0.0',
+    category: 'custom',
+    tags: ['dark', 'night', 'inheritance'],
+    preview: '/themes/dark-preview.png',
+    createdAt: '2024-12-01T00:00:00.000Z',
+    updatedAt: '2024-12-01T00:00:00.000Z'
+  },
+  colors: {
+    primary: {
+      50: '#0f172a',
+      100: '#1e293b',
+      200: '#334155',
+      300: '#475569',
+      400: '#64748b',
+      500: '#94a3b8',
+      600: '#cbd5e1',
+      700: '#e2e8f0',
+      800: '#f1f5f9',
+      900: '#f8fafc',
+      '500-rgb': '148, 163, 184',
+      '600-rgb': '203, 213, 225',
+      '700-rgb': '226, 232, 240'
+    },
+    secondary: {
+      50: '#f8fafc',
+      100: '#f1f5f9',
+      200: '#e2e8f0',
+      300: '#cbd5e1',
+      400: '#94a3b8',
+      500: '#64748b',
+      600: '#475569',
+      700: '#334155',
+      800: '#1e293b',
+      900: '#0f172a'
+    },
+    semantic: {
+      success: '#10b981',
+      warning: '#f59e0b',
+      error: '#ef4444',
+      info: '#3b82f6',
+      successRgb: '16, 185, 129',
+      warningRgb: '245, 158, 11',
+      errorRgb: '239, 68, 68',
+      infoRgb: '59, 130, 246',
+      'success-rgb': '16, 185, 129',
+      'warning-rgb': '245, 158, 11',
+      'error-rgb': '239, 68, 68',
+      'info-rgb': '59, 130, 246'
+    },
+    neutral: {
+      50: '#fafafa',
+      100: '#f5f5f5',
+      200: '#e5e5e5',
+      300: '#d4d4d4',
+      400: '#a3a3a3',
+      500: '#737373',
+      600: '#525252',
+      700: '#404040',
+      800: '#262626',
+      900: '#171717'
+    },
+    surface: {
+      background: '#0f172a',
+      surface: '#1e293b',
+      border: '#334155',
+      divider: '#475569'
     },
-    secondary,
-      100,
-      200,
-      300,
-      400,
-      500,
-      600,
-      700,
-      800,
-      900},
-    semantic,
-      warning,
-      error,
-      info,
-      successRgb, 185, 129',
-      warningRgb, 158, 11',
-      errorRgb, 68, 68',
-      infoRgb, 130, 246',
-      'success-rgb', 185, 129',
-      'warning-rgb', 158, 11',
-      'error-rgb', 68, 68',
-      'info-rgb', 130, 246'
+    text: {
+      primary: '#f8fafc',
+      secondary: '#e2e8f0',
+      muted: '#cbd5e1',
+      inverse: '#0f172a',
+      onPrimary: '#0f172a',
+      onSecondary: '#0f172a',
+      onSurface: '#f8fafc'
+    },
+    interactive: {
+      hover: '#1e293b',
+      active: '#334155',
+      focus: '#94a3b8',
+      disabled: '#475569'
     },
-    neutral,
-      100,
-      200,
-      300,
-      400,
-      500,
-      600,
-      700,
-      800,
-      900},
-    surface,
-      surface,
-      border,
-      divider},
-    text,
-      secondary,
-      muted,
-      inverse,
-      onPrimary,
-      onSecondary,
-      onSurface},
-    interactive,
-      active,
-      focus,
-      disabled},
     // Additional dark mode colors
-    'bg-primary',
-    'bg-secondary',
-    'surface-bg',
-    'text-primary',
-    'text-secondary'}
+    'bg-primary': '#0f172a',
+    'bg-secondary': '#1e293b',
+    'surface-bg': '#1e293b',
+    'text-primary': '#f8fafc',
+    'text-secondary': '#e2e8f0'
+  }
   // All other properties (fonts, navigation, spacing, etc.) inherit from default
 };
 
@@ -89,36 +108,47 @@ import { stanDesignTheme } from '../base-themes';
 export const darkTheme = createTheme(darkThemeConfig);
 
 /**
- * Example) to create a dark variant
+ * Example: Override an existing theme (Stan Design) to create a dark variant
  */
 export const stanDesignDarkTheme = overrideTheme(stanDesignTheme, {
-  meta,
-    description,
-    author,
-    version,
-    category,
-    tags, 'stan-design', 'professional'],
-    preview,
-    createdAt,
-    updatedAt},
-  colors});
+  meta: {
+    name: 'Stan Design Dark',
+    description: 'Dark variant of Stan Design theme',
+    author: 'Theme Examples',
+    version: '1.0.0',
+    category: 'custom',
+    tags: ['dark', 'stan-design', 'professional'],
+    preview: '/themes/stan-design-dark-preview.png',
+    createdAt: '2024-12-01T00:00:00.000Z',
+    updatedAt: '2024-12-01T00:00:00.000Z'
+  },
+  colors: darkThemeConfig.colors
+});
 
 /**
- * Example= overrideTheme(stanDesignTheme, {
-  colors,
-    secondary,
-    semantic,
-    neutral,
-    surface,
-      surface,
-      border,
-      divider},
-    text,
-      secondary,
-      muted,
-      inverse,
-      onPrimary,
-      onSecondary,
-      onSurface},
-    interactive}
+ * Example: Partial override for quick customizations
+ */
+export const quickDarkVariant = overrideTheme(stanDesignTheme, {
+  colors: {
+    primary: stanDesignTheme.colors.primary,
+    secondary: stanDesignTheme.colors.secondary,
+    semantic: stanDesignTheme.colors.semantic,
+    neutral: stanDesignTheme.colors.neutral,
+    surface: {
+      background: '#0f172a',
+      surface: '#1e293b',
+      border: '#334155',
+      divider: '#475569'
+    },
+    text: {
+      primary: '#f8fafc',
+      secondary: '#e2e8f0',
+      muted: '#cbd5e1',
+      inverse: '#0f172a',
+      onPrimary: '#0f172a',
+      onSecondary: '#0f172a',
+      onSurface: '#f8fafc'
+    },
+    interactive: stanDesignTheme.colors.interactive
+  }
 });

package/dist/themes/examples/minimal-theme.esm.js

@@ -1,66 +1,88 @@
 import { createTheme, PartialThemeConfig } from '../inheritance';
 
 /**
- * Example= {
-  meta,
-    description,
-    author,
-    version,
-    category,
-    tags, 'blue', 'simple'],
-    preview,
-    createdAt,
-    updatedAt},
-  colors,
-      100,
-      200,
-      300,
-      400,
-      500, // Only override the main primary color
-      600,
-      700,
-      800,
-      900},
-    secondary,
-      100,
-      200,
-      300,
-      400,
-      500,
-      600,
-      700,
-      800,
-      900},
-    semantic,
-      warning,
-      error,
-      info, warning, error will come from default theme
+ * Example: Minimal Theme using inheritance
+ * This theme only defines the properties it wants to override.
+ * All other values will be inherited from the default theme.
+ */
+const minimalThemeConfig: PartialThemeConfig = {
+  meta: {
+    name: 'Minimal Blue',
+    description: 'A minimal theme that only overrides primary colors',
+    author: 'Theme Examples',
+    version: '1.0.0',
+    category: 'custom',
+    tags: ['minimal', 'blue', 'simple'],
+    preview: '/themes/minimal-blue-preview.png',
+    createdAt: '2024-12-01T00:00:00.000Z',
+    updatedAt: '2024-12-01T00:00:00.000Z'
+  },
+  colors: {
+    primary: {
+      50: '#eff6ff',
+      100: '#dbeafe',
+      200: '#bfdbfe',
+      300: '#93c5fd',
+      400: '#60a5fa',
+      500: '#2563eb', // Only override the main primary color
+      600: '#1d4ed8',
+      700: '#1e40af',
+      800: '#1e3a8a',
+      900: '#1e3a8a'
+      // All other primary colors will come from default theme
+    },
+    secondary: {
+      50: '#f8fafc',
+      100: '#f1f5f9',
+      200: '#e2e8f0',
+      300: '#cbd5e1',
+      400: '#94a3b8',
+      500: '#64748b',
+      600: '#475569',
+      700: '#334155',
+      800: '#1e293b',
+      900: '#0f172a'
+    },
+    semantic: {
+      success: '#10b981',
+      warning: '#f59e0b',
+      error: '#ef4444',
+      info: '#2563eb' // Override info color to match primary
+      // success, warning, error will come from default theme
+    },
+    neutral: {
+      50: '#fafafa',
+      100: '#f5f5f5',
+      200: '#e5e5e5',
+      300: '#d4d4d4',
+      400: '#a3a3a3',
+      500: '#737373',
+      600: '#525252',
+      700: '#404040',
+      800: '#262626',
+      900: '#171717'
+    },
+    surface: {
+      background: '#ffffff',
+      surface: '#f8fafc',
+      border: '#e2e8f0',
+      divider: '#cbd5e1'
+    },
+    text: {
+      primary: '#0f172a',
+      secondary: '#475569',
+      muted: '#64748b',
+      inverse: '#ffffff',
+      onPrimary: '#ffffff',
+      onSecondary: '#ffffff',
+      onSurface: '#0f172a'
     },
-    neutral,
-      100,
-      200,
-      300,
-      400,
-      500,
-      600,
-      700,
-      800,
-      900},
-    surface,
-      surface,
-      border,
-      divider},
-    text,
-      secondary,
-      muted,
-      inverse,
-      onPrimary,
-      onSecondary,
-      onSurface},
-    interactive,
-      active,
-      focus,
-      disabled}
+    interactive: {
+      hover: '#f1f5f9',
+      active: '#e2e8f0',
+      focus: '#3b82f6',
+      disabled: '#cbd5e1'
+    }
     // All other colors will be inherited from default theme
   }
   // fonts, navigation, spacing, shadows, transitions will all come from default theme
@@ -79,8 +101,8 @@ import { themeInheritanceManager } from '../inheritance';
 
 // This will return an empty array since inheritance fills in all missing values
 const missingProperties = themeInheritanceManager.validateCompleteness(minimalTheme);
-console.log('Missing properties, missingProperties); // Should be []
+console.log('Missing properties:', missingProperties); // Should be []
 
 // This will return true since all properties are present
 const hasCompleteInheritance = themeInheritanceManager.hasInheritance(minimalTheme);
-console.log('Has complete inheritance, hasCompleteInheritance); // Should be true
+console.log('Has complete inheritance:', hasCompleteInheritance); // Should be true

package/dist/themes/examples/minimal-theme.js

@@ -1,66 +1,88 @@
 import { createTheme, PartialThemeConfig } from '../inheritance';
 
 /**
- * Example= {
-  meta,
-    description,
-    author,
-    version,
-    category,
-    tags, 'blue', 'simple'],
-    preview,
-    createdAt,
-    updatedAt},
-  colors,
-      100,
-      200,
-      300,
-      400,
-      500, // Only override the main primary color
-      600,
-      700,
-      800,
-      900},
-    secondary,
-      100,
-      200,
-      300,
-      400,
-      500,
-      600,
-      700,
-      800,
-      900},
-    semantic,
-      warning,
-      error,
-      info, warning, error will come from default theme
+ * Example: Minimal Theme using inheritance
+ * This theme only defines the properties it wants to override.
+ * All other values will be inherited from the default theme.
+ */
+const minimalThemeConfig: PartialThemeConfig = {
+  meta: {
+    name: 'Minimal Blue',
+    description: 'A minimal theme that only overrides primary colors',
+    author: 'Theme Examples',
+    version: '1.0.0',
+    category: 'custom',
+    tags: ['minimal', 'blue', 'simple'],
+    preview: '/themes/minimal-blue-preview.png',
+    createdAt: '2024-12-01T00:00:00.000Z',
+    updatedAt: '2024-12-01T00:00:00.000Z'
+  },
+  colors: {
+    primary: {
+      50: '#eff6ff',
+      100: '#dbeafe',
+      200: '#bfdbfe',
+      300: '#93c5fd',
+      400: '#60a5fa',
+      500: '#2563eb', // Only override the main primary color
+      600: '#1d4ed8',
+      700: '#1e40af',
+      800: '#1e3a8a',
+      900: '#1e3a8a'
+      // All other primary colors will come from default theme
+    },
+    secondary: {
+      50: '#f8fafc',
+      100: '#f1f5f9',
+      200: '#e2e8f0',
+      300: '#cbd5e1',
+      400: '#94a3b8',
+      500: '#64748b',
+      600: '#475569',
+      700: '#334155',
+      800: '#1e293b',
+      900: '#0f172a'
+    },
+    semantic: {
+      success: '#10b981',
+      warning: '#f59e0b',
+      error: '#ef4444',
+      info: '#2563eb' // Override info color to match primary
+      // success, warning, error will come from default theme
+    },
+    neutral: {
+      50: '#fafafa',
+      100: '#f5f5f5',
+      200: '#e5e5e5',
+      300: '#d4d4d4',
+      400: '#a3a3a3',
+      500: '#737373',
+      600: '#525252',
+      700: '#404040',
+      800: '#262626',
+      900: '#171717'
+    },
+    surface: {
+      background: '#ffffff',
+      surface: '#f8fafc',
+      border: '#e2e8f0',
+      divider: '#cbd5e1'
+    },
+    text: {
+      primary: '#0f172a',
+      secondary: '#475569',
+      muted: '#64748b',
+      inverse: '#ffffff',
+      onPrimary: '#ffffff',
+      onSecondary: '#ffffff',
+      onSurface: '#0f172a'
     },
-    neutral,
-      100,
-      200,
-      300,
-      400,
-      500,
-      600,
-      700,
-      800,
-      900},
-    surface,
-      surface,
-      border,
-      divider},
-    text,
-      secondary,
-      muted,
-      inverse,
-      onPrimary,
-      onSecondary,
-      onSurface},
-    interactive,
-      active,
-      focus,
-      disabled}
+    interactive: {
+      hover: '#f1f5f9',
+      active: '#e2e8f0',
+      focus: '#3b82f6',
+      disabled: '#cbd5e1'
+    }
     // All other colors will be inherited from default theme
   }
   // fonts, navigation, spacing, shadows, transitions will all come from default theme
@@ -79,8 +101,8 @@ import { themeInheritanceManager } from '../inheritance';
 
 // This will return an empty array since inheritance fills in all missing values
 const missingProperties = themeInheritanceManager.validateCompleteness(minimalTheme);
-console.log('Missing properties, missingProperties); // Should be []
+console.log('Missing properties:', missingProperties); // Should be []
 
 // This will return true since all properties are present
 const hasCompleteInheritance = themeInheritanceManager.hasInheritance(minimalTheme);
-console.log('Has complete inheritance, hasCompleteInheritance); // Should be true
+console.log('Has complete inheritance:', hasCompleteInheritance); // Should be true