@mytechtoday/augment-extensions 1.2.2 → 1.3.0

package/augment-extensions/visual-design/domains/web-page-styles/google-modern.ts

@@ -0,0 +1,615 @@
+/**
+ * Google Modern (Material 3 Expressive) Design System
+ *
+ * Material Design 3 (2021-present) represents Google's evolution toward more
+ * expressive, personalized, and accessible design. Key characteristics include
+ * dynamic color theming, rounded corners, springy motion, and enhanced accessibility.
+ *
+ * References:
+ * - Material Design 3 Documentation (2025-2026)
+ * - https://m3.material.io/
+ */
+
+import {
+  VendorStyle,
+  ColorPalette,
+  TypographyRules,
+  LayoutSystem,
+  MotionSystem,
+  ElevationSystem,
+  ComponentLibrary
+} from '../../types';
+
+// ============================================================================
+// Color System - Dynamic Color Theming
+// ============================================================================
+
+const GOOGLE_MODERN_COLORS: ColorPalette = {
+  primary: {
+    name: 'Primary',
+    hex: '#6750A4',
+    rgb: 'rgb(103, 80, 164)',
+    usage: 'Primary brand color, key actions, important UI elements',
+    accessibility: 'WCAG AA compliant with white text',
+    tones: {
+      0: '#000000',
+      10: '#21005D',
+      20: '#381E72',
+      30: '#4F378B',
+      40: '#6750A4',
+      50: '#7F67BE',
+      60: '#9A82DB',
+      70: '#B69DF8',
+      80: '#D0BCFF',
+      90: '#EADDFF',
+      95: '#F6EDFF',
+      99: '#FFFBFE',
+      100: '#FFFFFF'
+    }
+  },
+  secondary: {
+    name: 'Secondary',
+    hex: '#625B71',
+    rgb: 'rgb(98, 91, 113)',
+    usage: 'Secondary actions, less prominent UI elements',
+    accessibility: 'WCAG AA compliant',
+    tones: {
+      0: '#000000',
+      10: '#1D192B',
+      20: '#332D41',
+      30: '#4A4458',
+      40: '#625B71',
+      50: '#7A7289',
+      60: '#958DA5',
+      70: '#B0A7C0',
+      80: '#CCC2DC',
+      90: '#E8DEF8',
+      95: '#F6EDFF',
+      99: '#FFFBFE',
+      100: '#FFFFFF'
+    }
+  },
+  tertiary: {
+    name: 'Tertiary',
+    hex: '#7D5260',
+    rgb: 'rgb(125, 82, 96)',
+    usage: 'Accent color, highlights, contrasting elements',
+    accessibility: 'WCAG AA compliant',
+    tones: {
+      0: '#000000',
+      10: '#31111D',
+      20: '#492532',
+      30: '#633B48',
+      40: '#7D5260',
+      50: '#986977',
+      60: '#B58392',
+      70: '#D29DAC',
+      80: '#EFB8C8',
+      90: '#FFD8E4',
+      95: '#FFECF1',
+      99: '#FFFBFA',
+      100: '#FFFFFF'
+    }
+  },
+  error: {
+    name: 'Error',
+    hex: '#B3261E',
+    rgb: 'rgb(179, 38, 30)',
+    usage: 'Error states, destructive actions, warnings',
+    accessibility: 'WCAG AA compliant with white text'
+  },
+  neutral: {
+    name: 'Neutral',
+    hex: '#79747E',
+    rgb: 'rgb(121, 116, 126)',
+    usage: 'Backgrounds, surfaces, outlines',
+    accessibility: 'WCAG AA compliant'
+  },
+  neutralVariant: {
+    name: 'Neutral Variant',
+    hex: '#79747E',
+    rgb: 'rgb(121, 116, 126)',
+    usage: 'Medium emphasis backgrounds, subtle outlines',
+    accessibility: 'WCAG AA compliant'
+  }
+};
+
+// ============================================================================
+// Typography - Google Sans & Roboto
+// ============================================================================
+
+const GOOGLE_MODERN_TYPOGRAPHY: TypographyRules = {
+  fontFamilies: {
+    primary: "'Google Sans', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+    secondary: "'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+    monospace: "'Roboto Mono', 'Courier New', monospace"
+  },
+  typeScale: {
+    displayLarge: {
+      fontSize: '57px',
+      lineHeight: '64px',
+      fontWeight: 400,
+      letterSpacing: '-0.25px',
+      usage: 'Largest display text, hero sections'
+    },
+    displayMedium: {
+      fontSize: '45px',
+      lineHeight: '52px',
+      fontWeight: 400,
+      letterSpacing: '0px',
+      usage: 'Large display text'
+    },
+    displaySmall: {
+      fontSize: '36px',
+      lineHeight: '44px',
+      fontWeight: 400,
+      letterSpacing: '0px',
+      usage: 'Small display text'
+    },
+    headlineLarge: {
+      fontSize: '32px',
+      lineHeight: '40px',
+      fontWeight: 400,
+      letterSpacing: '0px',
+      usage: 'Large headlines'
+    },
+    headlineMedium: {
+      fontSize: '28px',
+      lineHeight: '36px',
+      fontWeight: 400,
+      letterSpacing: '0px',
+      usage: 'Medium headlines'
+    },
+    headlineSmall: {
+      fontSize: '24px',
+      lineHeight: '32px',
+      fontWeight: 400,
+      letterSpacing: '0px',
+      usage: 'Small headlines'
+    },
+    titleLarge: {
+      fontSize: '22px',
+      lineHeight: '28px',
+      fontWeight: 400,
+      letterSpacing: '0px',
+      usage: 'Large titles'
+    },
+    titleMedium: {
+      fontSize: '16px',
+      lineHeight: '24px',
+      fontWeight: 500,
+      letterSpacing: '0.15px',
+      usage: 'Medium titles, card headers'
+    },
+    titleSmall: {
+      fontSize: '14px',
+      lineHeight: '20px',
+      fontWeight: 500,
+      letterSpacing: '0.1px',
+      usage: 'Small titles'
+    },
+    bodyLarge: {
+      fontSize: '16px',
+      lineHeight: '24px',
+      fontWeight: 400,
+      letterSpacing: '0.5px',
+      usage: 'Large body text'
+    },
+    bodyMedium: {
+      fontSize: '14px',
+      lineHeight: '20px',
+      fontWeight: 400,
+      letterSpacing: '0.25px',
+      usage: 'Default body text'
+    },
+    bodySmall: {
+      fontSize: '12px',
+      lineHeight: '16px',
+      fontWeight: 400,
+      letterSpacing: '0.4px',
+      usage: 'Small body text, captions'
+    },
+    labelLarge: {
+      fontSize: '14px',
+      lineHeight: '20px',
+      fontWeight: 500,
+      letterSpacing: '0.1px',
+      usage: 'Large labels, buttons'
+    },
+    labelMedium: {
+      fontSize: '12px',
+      lineHeight: '16px',
+      fontWeight: 500,
+      letterSpacing: '0.5px',
+      usage: 'Medium labels'
+    },
+    labelSmall: {
+      fontSize: '11px',
+      lineHeight: '16px',
+      fontWeight: 500,
+      letterSpacing: '0.5px',
+      usage: 'Small labels'
+    }
+  },
+  guidelines: [
+    'Use Google Sans for display and headlines',
+    'Use Roboto for body text and UI elements',
+    'Maintain consistent type scale across application',
+    'Ensure minimum 16px font size for body text',
+    'Use font weights: 400 (regular), 500 (medium), 700 (bold)',
+    'Apply appropriate letter spacing for readability'
+  ]
+};
+
+
+// ============================================================================
+// Layout System - Responsive Grid
+// ============================================================================
+
+const GOOGLE_MODERN_LAYOUT: LayoutSystem = {
+  grid: {
+    columns: 12,
+    gutter: '16px',
+    margin: '16px',
+    breakpoints: {
+      compact: '0-599px',
+      medium: '600-839px',
+      expanded: '840-1199px',
+      large: '1200-1599px',
+      extraLarge: '1600px+'
+    }
+  },
+  spacing: {
+    unit: 4,
+    scale: [0, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128],
+    guidelines: [
+      'Use 4px base unit for all spacing',
+      'Apply consistent spacing scale',
+      'Use larger spacing for visual hierarchy',
+      'Maintain breathing room around interactive elements'
+    ]
+  },
+  containerWidths: {
+    compact: '100%',
+    medium: '840px',
+    expanded: '1200px',
+    large: '1600px'
+  },
+  guidelines: [
+    'Use 12-column grid for flexible layouts',
+    'Apply responsive breakpoints for different screen sizes',
+    'Maintain consistent spacing using 4px base unit',
+    'Use container widths for content readability',
+    'Apply adaptive layouts for different form factors'
+  ]
+};
+
+// ============================================================================
+// Motion System - Springy, Expressive Animations
+// ============================================================================
+
+const GOOGLE_MODERN_MOTION: MotionSystem = {
+  durations: {
+    short1: '50ms',
+    short2: '100ms',
+    short3: '150ms',
+    short4: '200ms',
+    medium1: '250ms',
+    medium2: '300ms',
+    medium3: '350ms',
+    medium4: '400ms',
+    long1: '450ms',
+    long2: '500ms',
+    long3: '550ms',
+    long4: '600ms',
+    extraLong1: '700ms',
+    extraLong2: '800ms',
+    extraLong3: '900ms',
+    extraLong4: '1000ms'
+  },
+  easings: {
+    standard: 'cubic-bezier(0.2, 0.0, 0, 1.0)',
+    standardAccelerate: 'cubic-bezier(0.3, 0.0, 1, 1)',
+    standardDecelerate: 'cubic-bezier(0, 0.0, 0, 1)',
+    emphasized: 'cubic-bezier(0.2, 0.0, 0, 1.0)',
+    emphasizedAccelerate: 'cubic-bezier(0.3, 0.0, 0.8, 0.15)',
+    emphasizedDecelerate: 'cubic-bezier(0.05, 0.7, 0.1, 1.0)',
+    legacy: 'cubic-bezier(0.4, 0.0, 0.2, 1)',
+    legacyAccelerate: 'cubic-bezier(0.4, 0.0, 1, 1)',
+    legacyDecelerate: 'cubic-bezier(0.0, 0.0, 0.2, 1)'
+  },
+  patterns: {
+    fadeIn: {
+      duration: '300ms',
+      easing: 'emphasizedDecelerate',
+      properties: ['opacity']
+    },
+    fadeOut: {
+      duration: '200ms',
+      easing: 'emphasizedAccelerate',
+      properties: ['opacity']
+    },
+    scaleUp: {
+      duration: '300ms',
+      easing: 'emphasizedDecelerate',
+      properties: ['transform', 'opacity']
+    },
+    scaleDown: {
+      duration: '200ms',
+      easing: 'emphasizedAccelerate',
+      properties: ['transform', 'opacity']
+    },
+    slideIn: {
+      duration: '400ms',
+      easing: 'emphasizedDecelerate',
+      properties: ['transform']
+    },
+    slideOut: {
+      duration: '300ms',
+      easing: 'emphasizedAccelerate',
+      properties: ['transform']
+    }
+  },
+  guidelines: [
+    'Use emphasized easing for important transitions',
+    'Apply standard easing for common UI interactions',
+    'Keep durations short for micro-interactions (50-200ms)',
+    'Use medium durations for component transitions (250-400ms)',
+    'Apply long durations for page transitions (450-600ms)',
+    'Ensure animations are smooth and natural',
+    'Provide reduced motion alternatives for accessibility'
+  ]
+};
+
+// ============================================================================
+// Elevation System - Subtle Shadows
+// ============================================================================
+
+const GOOGLE_MODERN_ELEVATION: ElevationSystem = {
+  levels: {
+    level0: {
+      shadow: 'none',
+      usage: 'No elevation, flat surface'
+    },
+    level1: {
+      shadow: '0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15)',
+      usage: 'Minimal elevation, cards at rest'
+    },
+    level2: {
+      shadow: '0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15)',
+      usage: 'Low elevation, raised cards'
+    },
+    level3: {
+      shadow: '0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3)',
+      usage: 'Medium elevation, dialogs, menus'
+    },
+    level4: {
+      shadow: '0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3)',
+      usage: 'High elevation, navigation drawer'
+    },
+    level5: {
+      shadow: '0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.3)',
+      usage: 'Highest elevation, modal dialogs'
+    }
+  },
+  guidelines: [
+    'Use elevation to establish visual hierarchy',
+    'Apply consistent elevation levels across similar components',
+    'Increase elevation for interactive states (hover, focus)',
+    'Use level 0-1 for most surfaces',
+    'Reserve level 3-5 for overlays and modals',
+    'Ensure shadows are subtle and natural'
+  ]
+};
+
+// ============================================================================
+// Component Library - Material 3 Components
+// ============================================================================
+
+const GOOGLE_MODERN_COMPONENTS: ComponentLibrary = {
+  buttons: {
+    variants: [
+      'filled',
+      'outlined',
+      'text',
+      'elevated',
+      'tonal'
+    ],
+    states: [
+      'enabled',
+      'disabled',
+      'hovered',
+      'focused',
+      'pressed'
+    ],
+    sizes: [
+      'small',
+      'medium',
+      'large'
+    ],
+    examples: [
+      'Filled button: Primary actions with solid background',
+      'Outlined button: Secondary actions with border',
+      'Text button: Low-emphasis actions without background',
+      'Elevated button: Raised appearance with shadow',
+      'Tonal button: Medium-emphasis with tinted background'
+    ]
+  },
+  inputs: {
+    variants: [
+      'filled',
+      'outlined'
+    ],
+    states: [
+      'enabled',
+      'disabled',
+      'error',
+      'focused',
+      'populated'
+    ],
+    sizes: [
+      'small',
+      'medium',
+      'large'
+    ],
+    examples: [
+      'Filled text field: Default input with filled background',
+      'Outlined text field: Input with border outline',
+      'Text area: Multi-line input field',
+      'Select dropdown: Single or multi-select options',
+      'Checkbox: Binary selection control',
+      'Radio button: Single selection from group',
+      'Switch: Toggle between two states'
+    ]
+  },
+  cards: {
+    variants: [
+      'elevated',
+      'filled',
+      'outlined'
+    ],
+    states: [
+      'enabled',
+      'disabled',
+      'hovered',
+      'pressed',
+      'dragged'
+    ],
+    sizes: [
+      'compact',
+      'medium',
+      'expanded'
+    ],
+    examples: [
+      'Elevated card: Card with shadow elevation',
+      'Filled card: Card with tinted background',
+      'Outlined card: Card with border outline',
+      'Interactive card: Clickable card with hover state',
+      'Media card: Card with image or video content'
+    ]
+  },
+  navigation: {
+    variants: [
+      'navigation-bar',
+      'navigation-drawer',
+      'navigation-rail',
+      'top-app-bar',
+      'bottom-app-bar',
+      'tabs'
+    ],
+    states: [
+      'active',
+      'inactive',
+      'selected',
+      'hovered',
+      'focused'
+    ],
+    sizes: [
+      'compact',
+      'medium',
+      'expanded'
+    ],
+    examples: [
+      'Navigation bar: Bottom navigation for mobile',
+      'Navigation drawer: Side navigation panel',
+      'Navigation rail: Compact side navigation',
+      'Top app bar: Header with title and actions',
+      'Bottom app bar: Footer with actions',
+      'Tabs: Horizontal navigation between views'
+    ]
+  }
+};
+
+// ============================================================================
+// Google Modern Style Export
+// ============================================================================
+
+export const GOOGLE_MODERN: VendorStyle = {
+  vendor: 'google',
+  name: 'Material 3 Expressive',
+  version: '3.0',
+  characteristics: [
+    'Dynamic color theming with tonal palettes',
+    'Rounded corners (8px-24px radius)',
+    'Springy, expressive motion with emphasized easing',
+    'High accessibility standards (WCAG 2.1 AA+)',
+    'Personalized and adaptive design',
+    'Subtle elevation with layered shadows',
+    'Google Sans and Roboto typography',
+    'Responsive 12-column grid system',
+    'Component-based architecture',
+    'Support for light and dark themes',
+    'Emphasis on user expression and customization'
+  ],
+  colorPalette: GOOGLE_MODERN_COLORS,
+  typography: GOOGLE_MODERN_TYPOGRAPHY,
+  layout: GOOGLE_MODERN_LAYOUT,
+  motion: GOOGLE_MODERN_MOTION,
+  elevation: GOOGLE_MODERN_ELEVATION,
+  components: GOOGLE_MODERN_COMPONENTS
+};
+
+// ============================================================================
+// Usage Guidelines
+// ============================================================================
+
+/**
+ * USAGE GUIDELINES FOR AI AGENTS
+ *
+ * When applying Google Modern (Material 3 Expressive) design:
+ *
+ * 1. COLOR THEMING
+ *    - Use dynamic color system with tonal palettes
+ *    - Apply primary color for key actions and branding
+ *    - Use secondary and tertiary for supporting elements
+ *    - Ensure WCAG AA compliance for all color combinations
+ *    - Support both light and dark themes
+ *
+ * 2. TYPOGRAPHY
+ *    - Use Google Sans for display and headlines
+ *    - Use Roboto for body text and UI elements
+ *    - Follow type scale for consistent hierarchy
+ *    - Maintain minimum 16px for body text
+ *    - Apply appropriate letter spacing
+ *
+ * 3. LAYOUT
+ *    - Use 12-column responsive grid
+ *    - Apply 4px base spacing unit
+ *    - Use breakpoints for responsive design
+ *    - Maintain consistent spacing scale
+ *
+ * 4. MOTION
+ *    - Use emphasized easing for important transitions
+ *    - Keep micro-interactions short (50-200ms)
+ *    - Apply medium durations for components (250-400ms)
+ *    - Provide reduced motion alternatives
+ *
+ * 5. ELEVATION
+ *    - Use subtle shadows for depth
+ *    - Apply consistent elevation levels
+ *    - Increase elevation for interactive states
+ *    - Reserve high elevation for modals
+ *
+ * 6. COMPONENTS
+ *    - Use Material 3 component variants
+ *    - Apply appropriate states (hover, focus, pressed)
+ *    - Maintain consistent sizing
+ *    - Follow accessibility guidelines
+ *
+ * 7. ACCESSIBILITY
+ *    - Ensure WCAG 2.1 AA compliance minimum
+ *    - Provide sufficient color contrast
+ *    - Support keyboard navigation
+ *    - Include ARIA labels and roles
+ *    - Provide reduced motion alternatives
+ *    - Ensure touch targets are at least 48x48px
+ *
+ * REFERENCES:
+ * - Material Design 3: https://m3.material.io/
+ * - Color System: https://m3.material.io/styles/color/overview
+ * - Typography: https://m3.material.io/styles/typography/overview
+ * - Motion: https://m3.material.io/styles/motion/overview
+ * - Components: https://m3.material.io/components
+ */
+
+