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

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

@@ -0,0 +1,124 @@
+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'
+    },
+    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'
+    },
+    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'}
+  // All other properties (fonts, navigation, spacing, etc.) inherit from default
+};
+
+/**
+ * Create dark theme with full inheritance
+ */
+export const darkTheme = createTheme(darkThemeConfig);
+
+/**
+ * Example) to create a dark variant
+ */
+export const stanDesignDarkTheme = overrideTheme(stanDesignTheme, {
+  meta,
+    description,
+    author,
+    version,
+    category,
+    tags, 'stan-design', 'professional'],
+    preview,
+    createdAt,
+    updatedAt},
+  colors});
+
+/**
+ * Example= overrideTheme(stanDesignTheme, {
+  colors,
+    secondary,
+    semantic,
+    neutral,
+    surface,
+      surface,
+      border,
+      divider},
+    text,
+      secondary,
+      muted,
+      inverse,
+      onPrimary,
+      onSecondary,
+      onSurface},
+    interactive}
+});

package/dist/themes/examples/minimal-theme.d.ts

@@ -0,0 +1,93 @@
+
+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'
+    },
+    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
+};
+
+export declare const minimalTheme: createTheme(minimalThemeConfig);
+
+// This will return an empty array since inheritance fills in all missing values
+const missingProperties = themeInheritanceManager.validateCompleteness(minimalTheme);
+ // Should be []
+
+// This will return true since all properties are present
+const hasCompleteInheritance = themeInheritanceManager.hasInheritance(minimalTheme);
+ // Should be true

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

@@ -0,0 +1,86 @@
+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
+    },
+    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}
+    // All other colors will be inherited from default theme
+  }
+  // fonts, navigation, spacing, shadows, transitions will all come from default theme
+};
+
+/**
+ * Create the theme with inheritance applied
+ * This will have ALL properties filled in, using defaults where not specified
+ */
+export const minimalTheme = createTheme(minimalThemeConfig);
+
+/**
+ * Example of checking theme completeness
+ */
+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 []
+
+// This will return true since all properties are present
+const hasCompleteInheritance = themeInheritanceManager.hasInheritance(minimalTheme);
+console.log('Has complete inheritance, hasCompleteInheritance); // Should be true

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

@@ -0,0 +1,86 @@
+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
+    },
+    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}
+    // All other colors will be inherited from default theme
+  }
+  // fonts, navigation, spacing, shadows, transitions will all come from default theme
+};
+
+/**
+ * Create the theme with inheritance applied
+ * This will have ALL properties filled in, using defaults where not specified
+ */
+export const minimalTheme = createTheme(minimalThemeConfig);
+
+/**
+ * Example of checking theme completeness
+ */
+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 []
+
+// This will return true since all properties are present
+const hasCompleteInheritance = themeInheritanceManager.hasInheritance(minimalTheme);
+console.log('Has complete inheritance, hasCompleteInheritance); // Should be true