@mytechtoday/augment-extensions 1.2.1 → 1.3.0

package/augment-extensions/visual-design/examples/vendor-comparison.md

@@ -0,0 +1,247 @@
+# Vendor Style Comparison
+
+## Overview
+
+This example compares the three major vendor design systems: Google Material 3 Expressive, Microsoft Fluent 2, and Amazon Cloudscape.
+
+## Quick Comparison Table
+
+| Aspect | Google Material 3 | Microsoft Fluent 2 | Amazon Cloudscape |
+|--------|-------------------|-------------------|-------------------|
+| **Primary Use** | Consumer apps, web | Enterprise, Windows | AWS dashboards, enterprise |
+| **Color System** | Dynamic color theming | Adaptive tokens | Neutral with blue accents |
+| **Typography** | Google Sans, Roboto | Segoe UI Variable | Amazon Ember |
+| **Layout** | 12-column grid | Responsive grid | Component-heavy |
+| **Motion** | Springy, expressive | Subtle, professional | Minimal, functional |
+| **Elevation** | Subtle shadows | Layered depth | Flat with borders |
+| **Best For** | Modern web apps | Windows apps, enterprise | Data dashboards, AWS tools |
+
+## 1. Google Material 3 Expressive
+
+### Characteristics
+
+```typescript
+import { GOOGLE_MODERN } from './domains/web-page-styles/google-modern';
+
+// Key features:
+// - Dynamic color theming with tonal palettes
+// - Rounded corners (8px, 12px, 16px)
+// - Springy motion (cubic-bezier(0.2, 0, 0, 1))
+// - Subtle elevation shadows
+// - Accessibility-first (WCAG AA)
+```
+
+### When to Use
+
+- **Consumer-facing applications**: Mobile apps, web apps
+- **Modern, expressive designs**: Colorful, dynamic interfaces
+- **Google ecosystem**: Android, Chrome, Google Workspace
+- **Accessibility priority**: WCAG AA/AAA compliance
+
+### Example: Landing Page Hero
+
+```css
+.hero {
+  background: linear-gradient(135deg, #6750A4 0%, #EADDFF 100%);
+  border-radius: 16px;
+  padding: 48px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.hero h1 {
+  font-family: 'Google Sans', sans-serif;
+  font-size: 3.5rem;
+  font-weight: 700;
+  color: #FFFFFF;
+}
+
+.cta-button {
+  background: #6750A4;
+  color: #FFFFFF;
+  border-radius: 20px;
+  padding: 12px 24px;
+  transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
+}
+
+.cta-button:hover {
+  transform: scale(1.05);
+  box-shadow: 0 8px 16px rgba(103, 80, 164, 0.3);
+}
+```
+
+## 2. Microsoft Fluent 2
+
+### Characteristics
+
+```typescript
+import { MICROSOFT_FLUENT } from './domains/web-page-styles/microsoft-fluent';
+
+// Key features:
+// - Adaptive color tokens (light/dark mode)
+// - Acrylic/Mica materials (transparency, blur)
+// - Segoe UI Variable (variable font)
+// - Layered elevation (depth)
+// - Cross-platform consistency
+```
+
+### When to Use
+
+- **Enterprise applications**: Business tools, productivity apps
+- **Windows ecosystem**: Windows 11, Microsoft 365
+- **Professional interfaces**: Clean, corporate aesthetics
+- **Cross-platform apps**: Windows, web, mobile
+
+### Example: Dashboard Card
+
+```css
+.dashboard-card {
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(30px); /* Acrylic material */
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: 8px;
+  padding: 24px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.dashboard-card h2 {
+  font-family: 'Segoe UI Variable', sans-serif;
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #242424;
+}
+
+.dashboard-card:hover {
+  background: rgba(255, 255, 255, 0.8);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  transition: all 0.2s ease-out;
+}
+```
+
+## 3. Amazon Cloudscape
+
+### Characteristics
+
+```typescript
+import { AMAZON_CLOUDSCAPE } from './domains/web-page-styles/amazon-cloudscape';
+
+// Key features:
+// - Neutral color palette (grays, blues)
+// - Amazon Ember typography
+// - Component-heavy patterns
+// - Data-dense layouts
+// - Enterprise dashboard focus
+```
+
+### When to Use
+
+- **AWS dashboards**: Cloud management interfaces
+- **Data-heavy applications**: Tables, charts, analytics
+- **Enterprise tools**: B2B SaaS, admin panels
+- **Amazon ecosystem**: AWS, Amazon services
+
+### Example: Data Table
+
+```css
+.data-table {
+  background: #FFFFFF;
+  border: 1px solid #D5DBDB;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.data-table th {
+  font-family: 'Amazon Ember', sans-serif;
+  font-size: 0.875rem;
+  font-weight: 700;
+  color: #16191F;
+  background: #FAFAFA;
+  padding: 12px 16px;
+  text-align: left;
+  border-bottom: 2px solid #D5DBDB;
+}
+
+.data-table td {
+  font-family: 'Amazon Ember', sans-serif;
+  font-size: 0.875rem;
+  color: #16191F;
+  padding: 12px 16px;
+  border-bottom: 1px solid #EAEDED;
+}
+
+.data-table tr:hover {
+  background: #F9F9F9;
+}
+```
+
+## Side-by-Side Comparison
+
+### Button Styles
+
+**Google Material 3**:
+```css
+.button-google {
+  background: #6750A4;
+  color: #FFFFFF;
+  border-radius: 20px;
+  padding: 12px 24px;
+  font-weight: 500;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+```
+
+**Microsoft Fluent 2**:
+```css
+.button-microsoft {
+  background: #0078D4;
+  color: #FFFFFF;
+  border-radius: 4px;
+  padding: 10px 20px;
+  font-weight: 600;
+  border: 1px solid transparent;
+}
+```
+
+**Amazon Cloudscape**:
+```css
+.button-amazon {
+  background: #0972D3;
+  color: #FFFFFF;
+  border-radius: 4px;
+  padding: 8px 16px;
+  font-weight: 700;
+  border: none;
+}
+```
+
+## Choosing the Right Vendor
+
+### Decision Tree
+
+1. **Building for AWS/enterprise dashboards?** → Amazon Cloudscape
+2. **Building for Windows/Microsoft ecosystem?** → Microsoft Fluent 2
+3. **Building consumer apps or modern web?** → Google Material 3
+
+### Hybrid Approach
+
+You can mix vendor styles for different parts of your application:
+
+```typescript
+import { createStyleSelector } from './style-selector';
+
+// Use Google for public-facing pages
+const publicSelector = createStyleSelector(['google']);
+
+// Use Amazon for admin dashboard
+const adminSelector = createStyleSelector(['amazon']);
+
+// Use Microsoft for Windows desktop app
+const desktopSelector = createStyleSelector(['microsoft']);
+```
+
+## Next Steps
+
+- Explore detailed vendor documentation
+- Try each vendor style with your use case
+- Customize vendor styles with your brand colors
+- Test accessibility across all vendors
+

package/augment-extensions/visual-design/module.json

@@ -0,0 +1,78 @@
+{
+  "name": "visual-design",
+  "version": "1.0.0",
+  "displayName": "Visual Design System",
+  "description": "Comprehensive visual design module with vendor-specific design systems (Google Material 3, Microsoft Fluent 2, Amazon Cloudscape) and domain-specific styles (Website, Web-app, Mobile, .NET, Linux, Windows, Motion Picture, AI Prompt Helper, Print Campaigns). Provides design elements, principles, and skills for AI-driven design generation.",
+  "type": "domain-rules",
+  "tags": [
+    "visual-design",
+    "design-systems",
+    "material-design",
+    "fluent-design",
+    "cloudscape",
+    "typography",
+    "color-theory",
+    "layout",
+    "ui-ux"
+  ],
+  "augment": {
+    "inject": "on-demand",
+    "priority": "medium",
+    "contexts": [
+      "design",
+      "ui",
+      "ux",
+      "frontend",
+      "web-development",
+      "visual-identity"
+    ]
+  },
+  "characterCount": 85000,
+  "contents": {
+    "core": [
+      "visual-design-core.ts",
+      "types.ts",
+      "style-selector.ts"
+    ],
+    "vendors": {
+      "web-page-styles": [
+        "google-modern.ts",
+        "microsoft-fluent.ts",
+        "amazon-cloudscape.ts"
+      ]
+    },
+    "domains": {
+      "other": [
+        "website.ts",
+        "web-app.ts",
+        "mobile-application.ts",
+        "dotnet-application.ts",
+        "linux-platform.ts",
+        "windows-platform.ts",
+        "motion-picture.ts",
+        "ai-prompt-helper.ts",
+        "print-campaigns.ts",
+        "os-application.ts"
+      ]
+    },
+    "tests": [
+      "__tests__/"
+    ],
+    "examples": [
+      "examples/"
+    ]
+  },
+  "vendorPriority": [
+    "google",
+    "microsoft",
+    "amazon"
+  ],
+  "installation": {
+    "steps": [
+      "Run: augx link visual-design",
+      "Configure vendor preference in .augment/extensions.json (optional)",
+      "Use: augx show visual-design to view module content"
+    ]
+  }
+}
+

package/augment-extensions/visual-design/style-selector.ts

@@ -0,0 +1,177 @@
+/**
+ * Style Selector - Vendor Priority and Fallback Logic
+ *
+ * This module implements the default fallback chain for vendor style selection:
+ * 1. Google Modern (Material 3 Expressive) - Primary
+ * 2. Microsoft Fluent 2 - Secondary
+ * 3. Amazon Cloudscape - Tertiary
+ *
+ * The priority chain can be overridden via .augment/extensions.json configuration.
+ */
+
+import { VendorStyle, DomainStyle, StylePreferences, StyleSelector } from './types';
+import { GOOGLE_MODERN } from './domains/web-page-styles/google-modern';
+import { MICROSOFT_FLUENT } from './domains/web-page-styles/microsoft-fluent';
+import { AMAZON_CLOUDSCAPE } from './domains/web-page-styles/amazon-cloudscape';
+
+// ============================================================================
+// Default Vendor Priority Chain
+// ============================================================================
+
+/**
+ * Default vendor priority order:
+ * 1. Google (Material 3 Expressive)
+ * 2. Microsoft (Fluent 2)
+ * 3. Amazon (Cloudscape)
+ */
+export const DEFAULT_VENDOR_PRIORITY: string[] = ['google', 'microsoft', 'amazon'];
+
+/**
+ * Vendor style registry
+ * Maps vendor names to their corresponding VendorStyle implementations
+ */
+const VENDOR_STYLES: Record<string, VendorStyle> = {
+  google: GOOGLE_MODERN,
+  microsoft: MICROSOFT_FLUENT,
+  amazon: AMAZON_CLOUDSCAPE
+};
+
+// ============================================================================
+// Style Selector Implementation
+// ============================================================================
+
+/**
+ * Creates a style selector with configurable vendor priority
+ *
+ * @param vendorPriority - Optional custom vendor priority order
+ * @returns StyleSelector instance
+ */
+export function createStyleSelector(
+  vendorPriority: string[] = DEFAULT_VENDOR_PRIORITY
+): StyleSelector {
+  return {
+    vendorPriority,
+    fallbackChain: vendorPriority,
+
+    /**
+     * Selects a vendor style based on preferences and fallback chain
+     *
+     * @param preferences - Optional style preferences
+     * @returns Selected VendorStyle or DomainStyle
+     */
+    selectStyle(preferences?: StylePreferences): VendorStyle | DomainStyle {
+      // If vendor preference is specified, try to use it
+      if (preferences?.vendor) {
+        const preferredStyle = VENDOR_STYLES[preferences.vendor.toLowerCase()];
+        if (preferredStyle) {
+          return preferredStyle;
+        }
+        console.warn(
+          `Vendor "${preferences.vendor}" not found. Falling back to priority chain.`
+        );
+      }
+
+      // Use fallback chain to select vendor
+      for (const vendor of this.fallbackChain) {
+        const style = VENDOR_STYLES[vendor.toLowerCase()];
+        if (style) {
+          return style;
+        }
+      }
+
+      // Ultimate fallback: return Google Modern
+      console.warn('No vendor found in fallback chain. Using Google Modern as default.');
+      return GOOGLE_MODERN;
+    }
+  };
+}
+
+/**
+ * Default style selector instance
+ * Uses the default vendor priority: google → microsoft → amazon
+ */
+export const defaultStyleSelector = createStyleSelector();
+
+/**
+ * Selects a vendor style using the default priority chain
+ *
+ * @param preferences - Optional style preferences
+ * @returns Selected VendorStyle
+ */
+export function selectVendorStyle(preferences?: StylePreferences): VendorStyle {
+  return defaultStyleSelector.selectStyle(preferences) as VendorStyle;
+}
+
+/**
+ * Gets a specific vendor style by name
+ *
+ * @param vendor - Vendor name ('google', 'microsoft', or 'amazon')
+ * @returns VendorStyle or undefined if not found
+ */
+export function getVendorStyle(vendor: string): VendorStyle | undefined {
+  return VENDOR_STYLES[vendor.toLowerCase()];
+}
+
+/**
+ * Gets all available vendor styles
+ *
+ * @returns Array of all VendorStyle implementations
+ */
+export function getAllVendorStyles(): VendorStyle[] {
+  return Object.values(VENDOR_STYLES);
+}
+
+/**
+ * Checks if a vendor style exists
+ *
+ * @param vendor - Vendor name to check
+ * @returns true if vendor exists, false otherwise
+ */
+export function hasVendorStyle(vendor: string): boolean {
+  return vendor.toLowerCase() in VENDOR_STYLES;
+}
+
+// ============================================================================
+// Usage Examples for AI Agents
+// ============================================================================
+
+/**
+ * EXAMPLE 1: Use default priority chain
+ *
+ * ```typescript
+ * import { selectVendorStyle } from './style-selector';
+ *
+ * const style = selectVendorStyle();
+ * // Returns GOOGLE_MODERN (first in priority chain)
+ * ```
+ *
+ * EXAMPLE 2: Specify vendor preference
+ *
+ * ```typescript
+ * import { selectVendorStyle } from './style-selector';
+ *
+ * const style = selectVendorStyle({ vendor: 'microsoft' });
+ * // Returns MICROSOFT_FLUENT
+ * ```
+ *
+ * EXAMPLE 3: Custom priority chain
+ *
+ * ```typescript
+ * import { createStyleSelector } from './style-selector';
+ *
+ * const selector = createStyleSelector(['amazon', 'microsoft', 'google']);
+ * const style = selector.selectStyle();
+ * // Returns AMAZON_CLOUDSCAPE (first in custom chain)
+ * ```
+ */
+
+export default {
+  createStyleSelector,
+  defaultStyleSelector,
+  selectVendorStyle,
+  getVendorStyle,
+  getAllVendorStyles,
+  hasVendorStyle,
+  DEFAULT_VENDOR_PRIORITY
+};
+