@bluefly/openstandardagents 0.2.5-RC → 0.2.7

package/website/styles/_variables.scss

@@ -1,25 +1,173 @@
 // OSSA Design System - Centralized Color Variables
 // Update colors here to change them site-wide
+// Based on Brand Guide v1.0.0 (Issue #44)
 
-// Brand Colors
-$ossa-primary: #4A3ECD;        // Main blue-purple - OSSA hub/standard
-$ossa-secondary: #1CB9ED;     // Cyan-blue - Agent nodes
-$ossa-accent: #9060EA;        // Purple accent
-
-// Semantic Colors - Muted for better visual harmony
-$ossa-success: #10b981;        // Muted green
-$ossa-warning: #f59e0b;        // Muted amber
-$ossa-error: #ef4444;          // Muted red
-$ossa-info: #06b6d4;           // Muted cyan
-
-// Neutral Colors
-$ossa-dark: #212529;
-$ossa-gray-900: #343a40;
-$ossa-gray-700: #495057;
-$ossa-gray-500: #6c757d;
-$ossa-gray-300: #dee2e6;
-$ossa-gray-100: #f8f9fa;
+// ============================================================================
+// PRIMARY BRAND COLOR - Deep Purple (#4A3ECD)
+// ============================================================================
+$ossa-primary-50: #f5f4fd;
+$ossa-primary-100: #e8e5fa;
+$ossa-primary-200: #d4cff5;
+$ossa-primary-300: #b5abee;
+$ossa-primary-400: #8f7ee4;
+$ossa-primary-500: #4A3ECD;    // Base - Main blue-purple
+$ossa-primary-600: #3d2fb8;
+$ossa-primary-700: #322598;
+$ossa-primary-800: #2a1f7a;
+$ossa-primary-900: #241f65;
+$ossa-primary-950: #15113a;
+
+// Legacy alias for backward compatibility
+$ossa-primary: $ossa-primary-500;
+
+// ============================================================================
+// SECONDARY BRAND COLOR - Cyan Blue (#1CB9ED)
+// ============================================================================
+$ossa-secondary-50: #ecfbff;
+$ossa-secondary-100: #d1f5fe;
+$ossa-secondary-200: #a8e9fd;
+$ossa-secondary-300: #6fd8fa;
+$ossa-secondary-400: #2ec0f5;
+$ossa-secondary-500: #1CB9ED;   // Base - Cyan-blue
+$ossa-secondary-600: #0a9dd1;
+$ossa-secondary-700: #087da9;
+$ossa-secondary-800: #0c6688;
+$ossa-secondary-900: #105570;
+$ossa-secondary-950: #08374a;
+
+// Legacy alias for backward compatibility
+$ossa-secondary: $ossa-secondary-500;
+
+// ============================================================================
+// ACCENT COLOR - Light Purple (#9060EA)
+// ============================================================================
+$ossa-accent-50: #f7f4fe;
+$ossa-accent-100: #ede9fd;
+$ossa-accent-200: #ddd4fb;
+$ossa-accent-300: #c5b3f8;
+$ossa-accent-400: #a887f3;
+$ossa-accent-500: #9060EA;      // Base - Purple accent
+$ossa-accent-600: #7c3aed;
+$ossa-accent-700: #6b28d9;
+$ossa-accent-800: #5923b8;
+$ossa-accent-900: #4b1f97;
+$ossa-accent-950: #2d0f5c;
+
+// Legacy alias for backward compatibility
+$ossa-accent: $ossa-accent-500;
+
+// ============================================================================
+// DARK PURPLE - For contrast and depth (#2D1B69)
+// ============================================================================
+$ossa-dark-purple-50: #f5f3f9;
+$ossa-dark-purple-100: #ebe7f3;
+$ossa-dark-purple-200: #d9d1e9;
+$ossa-dark-purple-300: #bfafd9;
+$ossa-dark-purple-400: #9f85c5;
+$ossa-dark-purple-500: #7d5db0;
+$ossa-dark-purple-600: #654497;
+$ossa-dark-purple-700: #53367d;
+$ossa-dark-purple-800: #462e68;
+$ossa-dark-purple-900: #2D1B69;  // Base - Dark purple for contrast
+$ossa-dark-purple-950: #1a0f3d;
+
+// Alias
+$ossa-dark-purple: $ossa-dark-purple-900;
+
+// ============================================================================
+// SEMANTIC COLORS - Success, Warning, Error, Info
+// ============================================================================
+
+// Success - Green
+$ossa-success-50: #ecfdf5;
+$ossa-success-100: #d1fae5;
+$ossa-success-200: #a7f3d0;
+$ossa-success-300: #6ee7b7;
+$ossa-success-400: #34d399;
+$ossa-success-500: #10b981;     // Base
+$ossa-success-600: #059669;
+$ossa-success-700: #047857;
+$ossa-success-800: #065f46;
+$ossa-success-900: #064e3b;
+$ossa-success-950: #022c22;
+
+// Legacy alias
+$ossa-success: $ossa-success-500;
+
+// Warning - Amber
+$ossa-warning-50: #fffbeb;
+$ossa-warning-100: #fef3c7;
+$ossa-warning-200: #fde68a;
+$ossa-warning-300: #fcd34d;
+$ossa-warning-400: #fbbf24;
+$ossa-warning-500: #f59e0b;     // Base
+$ossa-warning-600: #d97706;
+$ossa-warning-700: #b45309;
+$ossa-warning-800: #92400e;
+$ossa-warning-900: #78350f;
+$ossa-warning-950: #451a03;
+
+// Legacy alias
+$ossa-warning: $ossa-warning-500;
+
+// Error - Red
+$ossa-error-50: #fef2f2;
+$ossa-error-100: #fee2e2;
+$ossa-error-200: #fecaca;
+$ossa-error-300: #fca5a5;
+$ossa-error-400: #f87171;
+$ossa-error-500: #ef4444;       // Base
+$ossa-error-600: #dc2626;
+$ossa-error-700: #b91c1c;
+$ossa-error-800: #991b1b;
+$ossa-error-900: #7f1d1d;
+$ossa-error-950: #450a0a;
+
+// Legacy alias
+$ossa-error: $ossa-error-500;
+
+// Info - Cyan
+$ossa-info-50: #ecfeff;
+$ossa-info-100: #cffafe;
+$ossa-info-200: #a5f3fc;
+$ossa-info-300: #67e8f9;
+$ossa-info-400: #22d3ee;
+$ossa-info-500: #06b6d4;        // Base
+$ossa-info-600: #0891b2;
+$ossa-info-700: #0e7490;
+$ossa-info-800: #155e75;
+$ossa-info-900: #164e63;
+$ossa-info-950: #083344;
+
+// Legacy alias
+$ossa-info: $ossa-info-500;
+
+// ============================================================================
+// NEUTRAL COLORS - Grays
+// ============================================================================
+$ossa-gray-50: #f9fafb;
+$ossa-gray-100: #f3f4f6;
+$ossa-gray-200: #e5e7eb;
+$ossa-gray-300: #d1d5db;
+$ossa-gray-400: #9ca3af;
+$ossa-gray-500: #6b7280;
+$ossa-gray-600: #4b5563;
+$ossa-gray-700: #374151;
+$ossa-gray-800: #1f2937;
+$ossa-gray-900: #111827;
+$ossa-gray-950: #030712;
+
+// Special colors
 $ossa-white: #ffffff;
+$ossa-black: #000000;
+$ossa-dark: #1A1A2E;            // From brand guide
+
+// ============================================================================
+// FOCUS RING COLORS - For Accessibility
+// ============================================================================
+$ossa-focus-primary: rgba(74, 62, 205, 0.3);      // primary/30
+$ossa-focus-secondary: rgba(28, 185, 237, 0.3);   // secondary/30
+$ossa-focus-accent: rgba(144, 96, 234, 0.3);      // accent/30
 
 // Gradients - Lightest blue to darkest purple, blue spans more
 // Order: secondary (lightest blue #1CB9ED) -> primary (blue-purple #4A3ECD) -> accent (darkest purple #9060EA)
@@ -27,7 +175,110 @@ $gradient-brand: linear-gradient(135deg, $ossa-secondary 0%, $ossa-secondary 40%
 $gradient-hero: linear-gradient(135deg, $ossa-secondary 0%, $ossa-secondary 35%, $ossa-primary 65%, $ossa-accent 100%);
 $gradient-button: linear-gradient(135deg, $ossa-secondary 0%, $ossa-secondary 45%, $ossa-primary 75%, $ossa-accent 100%);
 
-// Code Colors
+// ============================================================================
+// TYPOGRAPHY SYSTEM - Based on Issue #44 Brand Guide
+// ============================================================================
+
+// Font Families
+$font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+$font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
+
+// Type Scale - Exact specifications from Issue #44
+$text-display: 4.5rem;    // 72px - Display/Hero
+$text-h1: 3.5rem;         // 56px - H1
+$text-h2: 2.5rem;         // 40px - H2
+$text-h3: 2rem;           // 32px - H3
+$text-h4: 1.5rem;         // 24px - H4
+$text-h5: 1.25rem;        // 20px - H5
+$text-h6: 1.125rem;       // 18px - H6
+$text-body: 1rem;         // 16px - Body
+$text-small: 0.875rem;    // 14px - Small
+
+// Line Heights - From Issue #44
+$leading-display: 1.1;
+$leading-h1: 1.2;
+$leading-h2: 1.3;
+$leading-h3: 1.4;
+$leading-h4: 1.5;
+$leading-h5: 1.5;
+$leading-h6: 1.5;
+$leading-body: 1.6;
+$leading-small: 1.5;
+
+// Letter Spacing - From Issue #44
+$tracking-display: -0.02em;
+$tracking-h1: -0.01em;
+$tracking-normal: 0;
+
+// Font Weights
+$font-normal: 400;
+$font-medium: 500;
+$font-semibold: 600;
+$font-bold: 700;
+$font-extrabold: 800;
+
+// ============================================================================
+// SPACING & LAYOUT SYSTEM - Based on 4px grid
+// ============================================================================
+
+// Spacing Scale
+$space-1: 0.25rem;   // 4px
+$space-2: 0.5rem;    // 8px
+$space-3: 0.75rem;   // 12px
+$space-4: 1rem;      // 16px
+$space-5: 1.25rem;   // 20px
+$space-6: 1.5rem;    // 24px
+$space-8: 2rem;      // 32px
+$space-10: 2.5rem;   // 40px
+$space-12: 3rem;     // 48px
+$space-16: 4rem;     // 64px
+$space-20: 5rem;     // 80px
+$space-24: 6rem;     // 96px
+
+// Section Padding (Vertical Rhythm)
+$section-padding-sm: $space-12;   // 48px - py-12
+$section-padding-md: $space-16;   // 64px - py-16
+$section-padding-lg: $space-20;   // 80px - py-20
+$section-padding-xl: $space-24;   // 96px - py-24
+
+// Container Max Widths
+$container-sm: 640px;    // max-w-sm
+$container-md: 768px;    // max-w-md
+$container-lg: 1024px;   // max-w-lg
+$container-xl: 1280px;   // max-w-xl
+$container-2xl: 1536px;  // max-w-2xl
+$container-4xl: 56rem;   // max-w-4xl (896px)
+$container-6xl: 72rem;   // max-w-6xl (1152px)
+$container-7xl: 80rem;   // max-w-7xl (1280px)
+
+// Grid Gaps
+$gap-sm: $space-4;   // 16px - gap-4
+$gap-md: $space-6;   // 24px - gap-6
+$gap-lg: $space-8;   // 32px - gap-8
+
+// Border Radius
+$radius-sm: 0.25rem;   // 4px
+$radius-md: 0.5rem;    // 8px
+$radius-lg: 0.75rem;   // 12px
+$radius-xl: 1rem;      // 16px
+$radius-2xl: 1.5rem;   // 24px
+$radius-full: 9999px;  // Full rounded
+
+// Shadows
+$shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
+$shadow-md: 0 2px 8px rgba(0, 0, 0, 0.04);
+$shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
+$shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);
+$shadow-brand: 0 8px 16px rgba(74, 62, 205, 0.3);
+
+// Transitions
+$transition-fast: 150ms ease;
+$transition-base: 200ms ease;
+$transition-slow: 300ms ease;
+
+// ============================================================================
+// CODE SYNTAX HIGHLIGHTING
+// ============================================================================
 $code-bg: #1e1e1e;
 $code-text: #d4d4d4;
 $code-keyword: #569cd6;

package/website/tailwind.config.ts

@@ -9,102 +9,136 @@ const config: Config = {
   theme: {
     extend: {
       colors: {
+        // Primary Brand Color - Deep Purple
         primary: {
-          DEFAULT: 'var(--ossa-primary)', // From SCSS variables - #4A3ECD
-          50: '#f5f4fd',
-          100: '#e8e5fa',
-          200: '#d4cff5',
-          300: '#b5abee',
-          400: '#8f7ee4',
-          500: 'var(--ossa-primary)', // #4A3ECD - from SCSS
-          600: '#3d2fb8',
-          700: '#322598',
-          800: '#2a1f7a',
-          900: '#241f65',
-          950: '#15113a',
+          DEFAULT: 'var(--ossa-primary)',
+          50: 'var(--ossa-primary-50)',
+          100: 'var(--ossa-primary-100)',
+          200: 'var(--ossa-primary-200)',
+          300: 'var(--ossa-primary-300)',
+          400: 'var(--ossa-primary-400)',
+          500: 'var(--ossa-primary)',
+          600: 'var(--ossa-primary-600)',
+          700: 'var(--ossa-primary-700)',
+          800: 'var(--ossa-primary-800)',
+          900: 'var(--ossa-primary-900)',
+          950: 'var(--ossa-primary-950)',
         },
+        // Secondary Brand Color - Cyan Blue
         secondary: {
-          DEFAULT: 'var(--ossa-secondary)', // From SCSS variables - #1CB9ED
-          50: '#ecfbff',
-          100: '#d1f5fe',
-          200: '#a8e9fd',
-          300: '#6fd8fa',
-          400: '#2ec0f5',
-          500: 'var(--ossa-secondary)', // #1CB9ED - from SCSS
-          600: '#0a9dd1',
-          700: '#087da9',
-          800: '#0c6688',
-          900: '#105570',
-          950: '#08374a',
+          DEFAULT: 'var(--ossa-secondary)',
+          50: 'var(--ossa-secondary-50)',
+          100: 'var(--ossa-secondary-100)',
+          200: 'var(--ossa-secondary-200)',
+          300: 'var(--ossa-secondary-300)',
+          400: 'var(--ossa-secondary-400)',
+          500: 'var(--ossa-secondary)',
+          600: 'var(--ossa-secondary-600)',
+          700: 'var(--ossa-secondary-700)',
+          800: 'var(--ossa-secondary-800)',
+          900: 'var(--ossa-secondary-900)',
+          950: 'var(--ossa-secondary-950)',
         },
+        // Accent Color - Light Purple
         accent: {
-          DEFAULT: 'var(--ossa-accent)', // From SCSS variables - #9060EA
-          50: '#f7f4fe',
-          100: '#ede9fd',
-          200: '#ddd4fb',
-          300: '#c5b3f8',
-          400: '#a887f3',
-          500: 'var(--ossa-accent)', // #9060EA - from SCSS
-          600: '#7c3aed',
-          700: '#6b28d9',
-          800: '#5923b8',
-          900: '#4b1f97',
-          950: '#2d0f5c',
+          DEFAULT: 'var(--ossa-accent)',
+          50: 'var(--ossa-accent-50)',
+          100: 'var(--ossa-accent-100)',
+          200: 'var(--ossa-accent-200)',
+          300: 'var(--ossa-accent-300)',
+          400: 'var(--ossa-accent-400)',
+          500: 'var(--ossa-accent)',
+          600: 'var(--ossa-accent-600)',
+          700: 'var(--ossa-accent-700)',
+          800: 'var(--ossa-accent-800)',
+          900: 'var(--ossa-accent-900)',
+          950: 'var(--ossa-accent-950)',
         },
-        // Semantic colors - centralized and muted
-        // These reference CSS variables which come from SCSS variables in styles/_variables.scss
-        // Update colors in ONE place: styles/_variables.scss
+        // Dark Purple - For contrast and depth
+        'dark-purple': {
+          DEFAULT: 'var(--ossa-dark-purple)',
+          50: 'var(--ossa-dark-purple-50)',
+          100: 'var(--ossa-dark-purple-100)',
+          200: 'var(--ossa-dark-purple-200)',
+          300: 'var(--ossa-dark-purple-300)',
+          400: 'var(--ossa-dark-purple-400)',
+          500: 'var(--ossa-dark-purple-500)',
+          600: 'var(--ossa-dark-purple-600)',
+          700: 'var(--ossa-dark-purple-700)',
+          800: 'var(--ossa-dark-purple-800)',
+          900: 'var(--ossa-dark-purple)',
+          950: 'var(--ossa-dark-purple-950)',
+        },
+        // Semantic Colors - Success, Warning, Error, Info
         success: {
           DEFAULT: 'var(--ossa-success)',
-          50: '#ecfdf5',
-          100: '#d1fae5',
-          200: '#a7f3d0',
-          300: '#6ee7b7',
-          400: '#34d399',
-          500: 'var(--ossa-success)', // #10b981 - from SCSS
-          600: '#059669',
-          700: '#047857',
-          800: '#065f46',
-          900: '#064e3b',
+          50: 'var(--ossa-success-50)',
+          100: 'var(--ossa-success-100)',
+          200: 'var(--ossa-success-200)',
+          300: 'var(--ossa-success-300)',
+          400: 'var(--ossa-success-400)',
+          500: 'var(--ossa-success)',
+          600: 'var(--ossa-success-600)',
+          700: 'var(--ossa-success-700)',
+          800: 'var(--ossa-success-800)',
+          900: 'var(--ossa-success-900)',
+          950: 'var(--ossa-success-950)',
         },
         warning: {
           DEFAULT: 'var(--ossa-warning)',
-          50: '#fffbeb',
-          100: '#fef3c7',
-          200: '#fde68a',
-          300: '#fcd34d',
-          400: '#fbbf24',
-          500: 'var(--ossa-warning)', // #f59e0b - from SCSS
-          600: '#d97706',
-          700: '#b45309',
-          800: '#92400e',
-          900: '#78350f',
+          50: 'var(--ossa-warning-50)',
+          100: 'var(--ossa-warning-100)',
+          200: 'var(--ossa-warning-200)',
+          300: 'var(--ossa-warning-300)',
+          400: 'var(--ossa-warning-400)',
+          500: 'var(--ossa-warning)',
+          600: 'var(--ossa-warning-600)',
+          700: 'var(--ossa-warning-700)',
+          800: 'var(--ossa-warning-800)',
+          900: 'var(--ossa-warning-900)',
+          950: 'var(--ossa-warning-950)',
         },
         error: {
           DEFAULT: 'var(--ossa-error)',
-          50: '#fef2f2',
-          100: '#fee2e2',
-          200: '#fecaca',
-          300: '#fca5a5',
-          400: '#f87171',
-          500: 'var(--ossa-error)', // #ef4444 - from SCSS
-          600: '#dc2626',
-          700: '#b91c1c',
-          800: '#991b1b',
-          900: '#7f1d1d',
+          50: 'var(--ossa-error-50)',
+          100: 'var(--ossa-error-100)',
+          200: 'var(--ossa-error-200)',
+          300: 'var(--ossa-error-300)',
+          400: 'var(--ossa-error-400)',
+          500: 'var(--ossa-error)',
+          600: 'var(--ossa-error-600)',
+          700: 'var(--ossa-error-700)',
+          800: 'var(--ossa-error-800)',
+          900: 'var(--ossa-error-900)',
+          950: 'var(--ossa-error-950)',
         },
         info: {
           DEFAULT: 'var(--ossa-info)',
-          50: '#ecfeff',
-          100: '#cffafe',
-          200: '#a5f3fc',
-          300: '#67e8f9',
-          400: '#22d3ee',
-          500: 'var(--ossa-info)', // #06b6d4 - from SCSS
-          600: '#0891b2',
-          700: '#0e7490',
-          800: '#155e75',
-          900: '#164e63',
+          50: 'var(--ossa-info-50)',
+          100: 'var(--ossa-info-100)',
+          200: 'var(--ossa-info-200)',
+          300: 'var(--ossa-info-300)',
+          400: 'var(--ossa-info-400)',
+          500: 'var(--ossa-info)',
+          600: 'var(--ossa-info-600)',
+          700: 'var(--ossa-info-700)',
+          800: 'var(--ossa-info-800)',
+          900: 'var(--ossa-info-900)',
+          950: 'var(--ossa-info-950)',
+        },
+        // Neutral Grays
+        gray: {
+          50: 'var(--ossa-gray-50)',
+          100: 'var(--ossa-gray-100)',
+          200: 'var(--ossa-gray-200)',
+          300: 'var(--ossa-gray-300)',
+          400: 'var(--ossa-gray-400)',
+          500: 'var(--ossa-gray-500)',
+          600: 'var(--ossa-gray-600)',
+          700: 'var(--ossa-gray-700)',
+          800: 'var(--ossa-gray-800)',
+          900: 'var(--ossa-gray-900)',
+          950: 'var(--ossa-gray-950)',
         },
       },
       fontFamily: {