@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.52 → 0.3.0

package/src/styles/themes/stan-design.css

@@ -21,6 +21,13 @@
   --cs-breakpoints-desktop: 1024px;
   --cs-breakpoints-wide: 1280px;
   --cs-breakpoints-ultra: 1536px;
+  --cs-breakpoints-xs: 475px;
+  --cs-breakpoints-sm: 640px;
+  --cs-breakpoints-md: 768px;
+  --cs-breakpoints-lg: 1024px;
+  --cs-breakpoints-xl: 1280px;
+  --cs-breakpoints-2xl: 1536px;
+  --cs-breakpoints-3xl: 1920px;
 
   /* Custom Media Queries for Breakpoints */
   @custom-media --bp-mobile (min-width: 640px);
@@ -28,6 +35,13 @@
   @custom-media --bp-desktop (min-width: 1024px);
   @custom-media --bp-wide (min-width: 1280px);
   @custom-media --bp-ultra (min-width: 1536px);
+  @custom-media --bp-xs (min-width: 475px);
+  @custom-media --bp-sm (min-width: 640px);
+  @custom-media --bp-md (min-width: 768px);
+  @custom-media --bp-lg (min-width: 1024px);
+  @custom-media --bp-xl (min-width: 1280px);
+  @custom-media --bp-2xl (min-width: 1536px);
+  @custom-media --bp-3xl (min-width: 1920px);
 
   --cs-fonts-primary-family: Clash Display;
   --cs-fonts-primary-fallbacks: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
@@ -175,11 +189,6 @@
   --cs-colors-semantic-error-rgb: 239, 68, 68;
   --cs-colors-semantic-error-dark-rgb: 220, 38, 38;
   --cs-colors-semantic-info-rgb: 37, 99, 235;
-  --cs-colors-semantic-success-rgb: 5, 150, 105;
-  --cs-colors-semantic-warning-rgb: 245, 158, 11;
-  --cs-colors-semantic-error-rgb: 239, 68, 68;
-  --cs-colors-semantic-error-dark-rgb: 220, 38, 38;
-  --cs-colors-semantic-info-rgb: 37, 99, 235;
   --cs-colors-neutral-50: #fafafa;
   --cs-colors-neutral-100: #f5f5f5;
   --cs-colors-neutral-200: #e5e5e5;
@@ -214,8 +223,6 @@
   --cs-colors-accent-rgb: 99, 102, 241;
   --cs-colors-border: #e5e7eb;
   --cs-colors-border-transparent: transparent;
-  --cs-colors-text-primary: #111827;
-  --cs-colors-text-secondary: #4b5563;
   --cs-navigation-layout: horizontal;
   --cs-navigation-style: enhanced;
   --cs-navigation-behavior: static;
@@ -323,11 +330,6 @@
   --cs-navigation-typography-letter-spacing-normal: 0;
   --cs-navigation-typography-letter-spacing-wide: 0.025em;
   --cs-navigation-typography-letter-spacing-wider: 0.05em;
-  --cs-navigation-breakpoints-mobile: 640px;
-  --cs-navigation-breakpoints-tablet: 768px;
-  --cs-navigation-breakpoints-desktop: 1024px;
-  --cs-navigation-breakpoints-wide: 1280px;
-  --cs-navigation-breakpoints-ultra: 1536px;
   --cs-spacing-scale-xs: 0.25rem;
   --cs-spacing-scale-sm: 0.5rem;
   --cs-spacing-scale-md: 1rem;
@@ -425,6 +427,95 @@
   --cs-meta-preview: /themes/stan-design-preview.png;
   --cs-meta-created-at: 2024-12-01T00:00:00.000Z;
   --cs-meta-updated-at: 2024-12-01T00:00:00.000Z;
+  --cs-content-density-compact-spacing-section: 16px 24px;
+  --cs-content-density-compact-spacing-component: 8px 12px;
+  --cs-content-density-compact-spacing-element: 4px 8px;
+  --cs-content-density-compact-typography-scale: 0.875;
+  --cs-content-density-compact-typography-line-height: 1.4;
+  --cs-content-density-compact-touch-targets-minimum: 44px;
+  --cs-content-density-compact-touch-targets-preferred: 48px;
+  --cs-content-density-comfortable-spacing-section: 24px 32px;
+  --cs-content-density-comfortable-spacing-component: 12px 16px;
+  --cs-content-density-comfortable-spacing-element: 6px 12px;
+  --cs-content-density-comfortable-typography-scale: 1;
+  --cs-content-density-comfortable-typography-line-height: 1.5;
+  --cs-content-density-comfortable-touch-targets-minimum: 40px;
+  --cs-content-density-comfortable-touch-targets-preferred: 44px;
+  --cs-content-density-spacious-spacing-section: 32px 48px;
+  --cs-content-density-spacious-spacing-component: 16px 24px;
+  --cs-content-density-spacious-spacing-element: 8px 16px;
+  --cs-content-density-spacious-typography-scale: 1.125;
+  --cs-content-density-spacious-typography-line-height: 1.6;
+  --cs-responsive-typography-heading1-xs: 28px;
+  --cs-responsive-typography-heading1-sm: 32px;
+  --cs-responsive-typography-heading1-md: 36px;
+  --cs-responsive-typography-heading1-lg: 42px;
+  --cs-responsive-typography-heading1-xl: 48px;
+  --cs-responsive-typography-heading1-2xl: 56px;
+  --cs-responsive-typography-heading1-3xl: 64px;
+  --cs-responsive-typography-heading2-xs: 24px;
+  --cs-responsive-typography-heading2-sm: 26px;
+  --cs-responsive-typography-heading2-md: 28px;
+  --cs-responsive-typography-heading2-lg: 32px;
+  --cs-responsive-typography-heading2-xl: 36px;
+  --cs-responsive-typography-heading2-2xl: 40px;
+  --cs-responsive-typography-heading2-3xl: 44px;
+  --cs-responsive-typography-heading3-xs: 20px;
+  --cs-responsive-typography-heading3-sm: 22px;
+  --cs-responsive-typography-heading3-md: 24px;
+  --cs-responsive-typography-heading3-lg: 28px;
+  --cs-responsive-typography-heading3-xl: 30px;
+  --cs-responsive-typography-heading3-2xl: 32px;
+  --cs-responsive-typography-heading3-3xl: 36px;
+  --cs-responsive-typography-heading4-xs: 18px;
+  --cs-responsive-typography-heading4-sm: 20px;
+  --cs-responsive-typography-heading4-md: 22px;
+  --cs-responsive-typography-heading4-lg: 24px;
+  --cs-responsive-typography-heading4-xl: 26px;
+  --cs-responsive-typography-heading4-2xl: 28px;
+  --cs-responsive-typography-heading4-3xl: 30px;
+  --cs-responsive-typography-heading5-xs: 16px;
+  --cs-responsive-typography-heading5-sm: 18px;
+  --cs-responsive-typography-heading5-md: 20px;
+  --cs-responsive-typography-heading5-lg: 22px;
+  --cs-responsive-typography-heading5-xl: 24px;
+  --cs-responsive-typography-heading5-2xl: 26px;
+  --cs-responsive-typography-heading5-3xl: 28px;
+  --cs-responsive-typography-heading6-xs: 14px;
+  --cs-responsive-typography-heading6-sm: 16px;
+  --cs-responsive-typography-heading6-md: 18px;
+  --cs-responsive-typography-heading6-lg: 20px;
+  --cs-responsive-typography-heading6-xl: 22px;
+  --cs-responsive-typography-heading6-2xl: 24px;
+  --cs-responsive-typography-heading6-3xl: 26px;
+  --cs-responsive-typography-body-xs: 14px;
+  --cs-responsive-typography-body-sm: 15px;
+  --cs-responsive-typography-body-md: 16px;
+  --cs-responsive-typography-body-lg: 17px;
+  --cs-responsive-typography-body-xl: 18px;
+  --cs-responsive-typography-body-2xl: 18px;
+  --cs-responsive-typography-body-3xl: 19px;
+  --cs-responsive-typography-body-large-xs: 16px;
+  --cs-responsive-typography-body-large-sm: 17px;
+  --cs-responsive-typography-body-large-md: 18px;
+  --cs-responsive-typography-body-large-lg: 19px;
+  --cs-responsive-typography-body-large-xl: 20px;
+  --cs-responsive-typography-body-large-2xl: 21px;
+  --cs-responsive-typography-body-large-3xl: 22px;
+  --cs-responsive-typography-body-small-xs: 12px;
+  --cs-responsive-typography-body-small-sm: 13px;
+  --cs-responsive-typography-body-small-md: 14px;
+  --cs-responsive-typography-body-small-lg: 15px;
+  --cs-responsive-typography-body-small-xl: 16px;
+  --cs-responsive-typography-body-small-2xl: 16px;
+  --cs-responsive-typography-body-small-3xl: 17px;
+  --cs-responsive-typography-caption-xs: 11px;
+  --cs-responsive-typography-caption-sm: 12px;
+  --cs-responsive-typography-caption-md: 13px;
+  --cs-responsive-typography-caption-lg: 14px;
+  --cs-responsive-typography-caption-xl: 15px;
+  --cs-responsive-typography-caption-2xl: 15px;
+  --cs-responsive-typography-caption-3xl: 16px;
   --cs-modes-dark-colors-primary-50: #1e3a8a;
   --cs-modes-dark-colors-primary-100: #1e40af;
   --cs-modes-dark-colors-primary-200: #1d4ed8;
@@ -456,10 +547,6 @@
   --cs-modes-dark-colors-semantic-warning-rgb: 251, 191, 36;
   --cs-modes-dark-colors-semantic-error-rgb: 248, 113, 113;
   --cs-modes-dark-colors-semantic-info-rgb: 96, 165, 250;
-  --cs-modes-dark-colors-semantic-success-rgb: 16, 185, 129;
-  --cs-modes-dark-colors-semantic-warning-rgb: 251, 191, 36;
-  --cs-modes-dark-colors-semantic-error-rgb: 248, 113, 113;
-  --cs-modes-dark-colors-semantic-info-rgb: 96, 165, 250;
   --cs-modes-dark-colors-neutral-50: #171717;
   --cs-modes-dark-colors-neutral-100: #262626;
   --cs-modes-dark-colors-neutral-200: #404040;
@@ -493,8 +580,6 @@
   --cs-modes-dark-colors-primary-active: #60a5fa;
   --cs-modes-dark-colors-accent-rgb: 139, 92, 246;
   --cs-modes-dark-colors-border: #334155;
-  --cs-modes-dark-colors-text-primary: #f8fafc;
-  --cs-modes-dark-colors-text-secondary: #cbd5e1;
 }
 
 .dark {

package/src/styles/utilities/semantic-input-system.css

@@ -29,32 +29,26 @@
 }
 
 /* Input Type Variants */
+/* Note: inputmode, autocomplete, and autocapitalize are HTML attributes,
+   not CSS properties. These should be applied directly to HTML elements. */
 .semantic-input[type="email"] {
-  inputmode: email;
-  autocomplete: email;
-  autocapitalize: none;
+  /* Email input styling */
 }
 
 .semantic-input[type="tel"] {
-  inputmode: tel;
-  autocomplete: tel;
-  autocapitalize: none;
+  /* Telephone input styling */
 }
 
 .semantic-input[type="number"] {
-  inputmode: decimal;
-  autocomplete: off;
+  /* Number input styling */
 }
 
 .semantic-input[type="search"] {
-  inputmode: search;
-  autocomplete: off;
+  /* Search input styling */
 }
 
 .semantic-input[type="url"] {
-  inputmode: url;
-  autocomplete: url;
-  autocapitalize: none;
+  /* URL input styling */
 }
 
 /* Mobile Keyboard Optimization */

package/src/theme.ts

@@ -1,4 +1,5 @@
 import { MultiThemeConfig } from './types';
+import { getPhase1ThemeExtensions } from './themes/phase1-constants';
 
 /**
  * Stan Design Base Theme
@@ -679,5 +680,8 @@ export const stanDesignTheme: MultiThemeConfig = {
       },
       
       }
-  }
+  },
+
+  // Phase 1 Enhancement: Use shared constants to prevent duplication
+  ...getPhase1ThemeExtensions()
 };

package/src/themes/phase1-constants.ts

@@ -0,0 +1,189 @@
+/**
+ * Phase 1 Enhancement: Shared Constants
+ *
+ * This file contains shared constants for the Phase 1 mobile support enhancement
+ * to ensure consistency across themes and prevent duplication.
+ */
+
+import { BreakpointThemeConfig, ContentDensityThemeConfig, ResponsiveTypographyThemeConfig } from './types';
+
+// Enhanced Breakpoint System - Shared across all themes
+export const PHASE1_BREAKPOINTS: BreakpointThemeConfig = {
+  xs: '475px',   // Large phones (iPhone 14 Plus, etc.)
+  sm: '640px',   // Small tablets, large phones landscape
+  md: '768px',   // Tablets (iPad Mini, etc.)
+  lg: '1024px',  // Desktop, large tablets
+  xl: '1280px',  // Large desktop (MacBook Pro 13")
+  '2xl': '1536px', // Ultra-wide (MacBook Pro 16", external monitors)
+  '3xl': '1920px'  // Large external monitors, TV displays
+};
+
+// Content Density System - Shared across all themes
+export const PHASE1_CONTENT_DENSITY: ContentDensityThemeConfig = {
+  compact: {
+    spacing: {
+      section: '16px 24px',
+      component: '8px 12px',
+      element: '4px 8px'
+    },
+    typography: {
+      scale: 0.875, // 14px base instead of 16px
+      lineHeight: 1.4
+    },
+    touchTargets: {
+      minimum: '44px', // Apple/WCAG recommendation
+      preferred: '48px'
+    }
+  },
+  comfortable: {
+    spacing: {
+      section: '24px 32px',
+      component: '12px 16px',
+      element: '6px 12px'
+    },
+    typography: {
+      scale: 1.0, // 16px base
+      lineHeight: 1.5
+    },
+    touchTargets: {
+      minimum: '40px',
+      preferred: '44px'
+    }
+  },
+  spacious: {
+    spacing: {
+      section: '32px 48px',
+      component: '16px 24px',
+      element: '8px 16px'
+    },
+    typography: {
+      scale: 1.125, // 18px base for better readability
+      lineHeight: 1.6
+    },
+    interactions: {
+      hover: true,
+      tooltips: true,
+      shortcuts: true
+    }
+  }
+};
+
+// Responsive Typography System - Shared across all themes
+export const PHASE1_RESPONSIVE_TYPOGRAPHY: ResponsiveTypographyThemeConfig = {
+  heading1: {
+    xs: '28px',   // Large phone
+    sm: '32px',   // Small tablet
+    md: '36px',   // Tablet
+    lg: '42px',   // Desktop
+    xl: '48px',   // Large desktop
+    '2xl': '56px', // Ultra-wide
+    '3xl': '64px'  // Large displays
+  },
+  heading2: {
+    xs: '24px',
+    sm: '26px',
+    md: '28px',
+    lg: '32px',
+    xl: '36px',
+    '2xl': '40px',
+    '3xl': '44px'
+  },
+  heading3: {
+    xs: '20px',
+    sm: '22px',
+    md: '24px',
+    lg: '28px',
+    xl: '30px',
+    '2xl': '32px',
+    '3xl': '36px'
+  },
+  heading4: {
+    xs: '18px',
+    sm: '20px',
+    md: '22px',
+    lg: '24px',
+    xl: '26px',
+    '2xl': '28px',
+    '3xl': '30px'
+  },
+  heading5: {
+    xs: '16px',
+    sm: '18px',
+    md: '20px',
+    lg: '22px',
+    xl: '24px',
+    '2xl': '26px',
+    '3xl': '28px'
+  },
+  heading6: {
+    xs: '14px',
+    sm: '16px',
+    md: '18px',
+    lg: '20px',
+    xl: '22px',
+    '2xl': '24px',
+    '3xl': '26px'
+  },
+  body: {
+    xs: '14px',
+    sm: '15px',
+    md: '16px',
+    lg: '17px',
+    xl: '18px',
+    '2xl': '18px',
+    '3xl': '19px'
+  },
+  bodyLarge: {
+    xs: '16px',
+    sm: '17px',
+    md: '18px',
+    lg: '19px',
+    xl: '20px',
+    '2xl': '21px',
+    '3xl': '22px'
+  },
+  bodySmall: {
+    xs: '12px',
+    sm: '13px',
+    md: '14px',
+    lg: '15px',
+    xl: '16px',
+    '2xl': '16px',
+    '3xl': '17px'
+  },
+  caption: {
+    xs: '11px',
+    sm: '12px',
+    md: '13px',
+    lg: '14px',
+    xl: '15px',
+    '2xl': '15px',
+    '3xl': '16px'
+  }
+};
+
+/**
+ * Helper function to get complete Phase 1 configuration for any theme
+ */
+export function getPhase1ThemeExtensions() {
+  return {
+    breakpoints: PHASE1_BREAKPOINTS,
+    contentDensity: PHASE1_CONTENT_DENSITY,
+    responsiveTypography: PHASE1_RESPONSIVE_TYPOGRAPHY
+  };
+}
+
+/**
+ * Helper function to check if a theme has Phase 1 compliance
+ */
+export function isPhase1Compliant(theme: any): boolean {
+  return !!(
+    theme.breakpoints?.xs &&
+    theme.breakpoints?.['3xl'] &&
+    theme.contentDensity?.compact &&
+    theme.contentDensity?.comfortable &&
+    theme.contentDensity?.spacious &&
+    theme.responsiveTypography?.heading1?.xs &&
+    theme.responsiveTypography?.heading1?.['3xl']
+  );
+}

package/src/themes/themes/default.ts

@@ -1,4 +1,5 @@
 import { MultiThemeConfig } from '../types';
+import { getPhase1ThemeExtensions } from '../phase1-constants';
 
 /**
  * Default Base Theme Configuration
@@ -582,5 +583,8 @@ export const defaultTheme: MultiThemeConfig = {
     preview: '/themes/default-preview.png',
     createdAt: '2024-12-01T00:00:00.000Z',
     updatedAt: '2024-12-01T00:00:00.000Z'
-  }
+  },
+
+  // Phase 1 Enhancement: Use shared constants to prevent duplication
+  ...getPhase1ThemeExtensions()
 };

package/src/themes/themes/stan-design.ts

@@ -1,4 +1,5 @@
 import { MultiThemeConfig } from '../types';
+import { getPhase1ThemeExtensions } from '../phase1-constants';
 
 /**
  * Stan Design Base Theme
@@ -679,5 +680,8 @@ export const stanDesignTheme: MultiThemeConfig = {
       },
       
       }
-  }
+  },
+
+  // Phase 1 Enhancement: Use shared constants to prevent duplication
+  ...getPhase1ThemeExtensions()
 };

package/src/themes/types.ts

@@ -22,7 +22,12 @@ export interface MultiThemeConfig {
   shimmer: ShimmerThemeConfig;
   meta: ThemeMetadata;
   extends?: string; // Optional property for theme inheritance
-  
+
+  // Phase 1 Enhancements: Breakpoint and Content Density Systems
+  breakpoints?: BreakpointThemeConfig;
+  contentDensity?: ContentDensityThemeConfig;
+  responsiveTypography?: ResponsiveTypographyThemeConfig;
+
   // NEW: Add light/dark mode configuration (colors only)
   modes?: {
     light?: {
@@ -462,3 +467,74 @@ export interface CompleteThemeConfig extends MultiThemeConfig {
   inheritance?: ThemeInheritance;
   validation: ThemeValidationResult;
 }
+
+// Phase 1 Enhancement: Enhanced Breakpoint System
+export interface BreakpointThemeConfig {
+  xs: string;   // 475px - Large phones (iPhone 14 Plus, etc.)
+  sm: string;   // 640px - Small tablets, large phones landscape
+  md: string;   // 768px - Tablets (iPad Mini, etc.)
+  lg: string;   // 1024px - Desktop, large tablets
+  xl: string;   // 1280px - Large desktop (MacBook Pro 13")
+  '2xl': string; // 1536px - Ultra-wide (MacBook Pro 16", external monitors)
+  '3xl': string; // 1920px - Large external monitors, TV displays
+}
+
+// Phase 1 Enhancement: Content Density System
+export interface ContentDensityThemeConfig {
+  compact: DensityLevel;     // xs to md breakpoints
+  comfortable: DensityLevel; // md to lg breakpoints
+  spacious: DensityLevel;    // lg+ breakpoints
+}
+
+export interface DensityLevel {
+  spacing: DensitySpacing;
+  typography: DensityTypography;
+  touchTargets?: DensityTouchTargets;
+  interactions?: DensityInteractions;
+}
+
+export interface DensitySpacing {
+  section: string;   // Section-level spacing
+  component: string; // Component-level spacing
+  element: string;   // Element-level spacing
+}
+
+export interface DensityTypography {
+  scale: number;     // Typography scale multiplier
+  lineHeight: number; // Line height ratio
+}
+
+export interface DensityTouchTargets {
+  minimum: string;   // Minimum touch target size
+  preferred: string; // Preferred touch target size
+}
+
+export interface DensityInteractions {
+  hover?: boolean;     // Enable hover states
+  tooltips?: boolean;  // Enable tooltips
+  shortcuts?: boolean; // Enable keyboard shortcuts
+}
+
+// Phase 1 Enhancement: Responsive Typography System
+export interface ResponsiveTypographyThemeConfig {
+  heading1: ResponsiveTypographyScale;
+  heading2: ResponsiveTypographyScale;
+  heading3: ResponsiveTypographyScale;
+  heading4: ResponsiveTypographyScale;
+  heading5: ResponsiveTypographyScale;
+  heading6: ResponsiveTypographyScale;
+  body: ResponsiveTypographyScale;
+  bodyLarge: ResponsiveTypographyScale;
+  bodySmall: ResponsiveTypographyScale;
+  caption: ResponsiveTypographyScale;
+}
+
+export interface ResponsiveTypographyScale {
+  xs: string;   // Large phone
+  sm: string;   // Small tablet
+  md: string;   // Tablet
+  lg: string;   // Desktop
+  xl: string;   // Large desktop
+  '2xl': string; // Ultra-wide
+  '3xl': string; // Large displays
+}