@bluefly/openstandardagents 0.2.4 → 0.2.7

package/website/styles/_typography.scss

@@ -0,0 +1,361 @@
+// OSSA Design System - Typography System
+// Complete typography hierarchy with responsive scales
+
+// ============================================================================
+// FONT FAMILIES
+// ============================================================================
+
+$font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+$font-mono: 'JetBrains Mono', 'Fira Code', Menlo, Monaco, 'Courier New', monospace;
+$font-display: 'Inter', system-ui, -apple-system, sans-serif;
+$font-body: 'Inter', system-ui, -apple-system, sans-serif;
+$font-heading: 'Inter', system-ui, -apple-system, sans-serif;
+
+// ============================================================================
+// FONT WEIGHTS
+// ============================================================================
+
+$font-weight-thin: 100;
+$font-weight-extralight: 200;
+$font-weight-light: 300;
+$font-weight-normal: 400;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
+$font-weight-bold: 700;
+$font-weight-extrabold: 800;
+$font-weight-black: 900;
+
+// ============================================================================
+// FONT SIZES (Desktop)
+// ============================================================================
+
+// Display level (Hero text)
+$font-size-display: 4.5rem;      // 72px
+$line-height-display: 1.1;
+$font-weight-display: $font-weight-extrabold;
+
+// Heading levels
+$font-size-h1: 3.5rem;           // 56px
+$line-height-h1: 1.2;
+$font-weight-h1: $font-weight-bold;
+
+$font-size-h2: 2.5rem;           // 40px
+$line-height-h2: 1.3;
+$font-weight-h2: $font-weight-bold;
+
+$font-size-h3: 2rem;             // 32px
+$line-height-h3: 1.4;
+$font-weight-h3: $font-weight-semibold;
+
+$font-size-h4: 1.5rem;           // 24px
+$line-height-h4: 1.5;
+$font-weight-h4: $font-weight-semibold;
+
+$font-size-h5: 1.25rem;          // 20px
+$line-height-h5: 1.5;
+$font-weight-h5: $font-weight-semibold;
+
+$font-size-h6: 1.125rem;         // 18px
+$line-height-h6: 1.5;
+$font-weight-h6: $font-weight-semibold;
+
+// Body text
+$font-size-base: 1rem;           // 16px
+$line-height-base: 1.6;
+$font-weight-base: $font-weight-normal;
+
+$font-size-lg: 1.125rem;         // 18px
+$line-height-lg: 1.6;
+
+$font-size-sm: 0.875rem;         // 14px
+$line-height-sm: 1.5;
+
+$font-size-xs: 0.75rem;          // 12px
+$line-height-xs: 1.4;
+
+// ============================================================================
+// RESPONSIVE FONT SIZES (Mobile)
+// ============================================================================
+
+// Mobile adjustments (reduce by ~20-30% for smaller screens)
+$font-size-display-mobile: 3rem;     // 48px (from 72px)
+$font-size-h1-mobile: 2.5rem;        // 40px (from 56px)
+$font-size-h2-mobile: 2rem;          // 32px (from 40px)
+$font-size-h3-mobile: 1.75rem;       // 28px (from 32px)
+$font-size-h4-mobile: 1.375rem;      // 22px (from 24px)
+$font-size-h5-mobile: 1.125rem;      // 18px (from 20px)
+$font-size-h6-mobile: 1rem;          // 16px (from 18px)
+
+// ============================================================================
+// LETTER SPACING
+// ============================================================================
+
+$letter-spacing-tighter: -0.05em;
+$letter-spacing-tight: -0.025em;
+$letter-spacing-normal: 0;
+$letter-spacing-wide: 0.025em;
+$letter-spacing-wider: 0.05em;
+$letter-spacing-widest: 0.1em;
+
+// ============================================================================
+// TYPOGRAPHY MIXINS
+// ============================================================================
+
+// Display text (Hero sections)
+@mixin text-display {
+  font-family: $font-display;
+  font-size: $font-size-display;
+  line-height: $line-height-display;
+  font-weight: $font-weight-display;
+  letter-spacing: $letter-spacing-tight;
+  
+  @media (max-width: 768px) {
+    font-size: $font-size-display-mobile;
+  }
+}
+
+// Heading 1
+@mixin text-h1 {
+  font-family: $font-heading;
+  font-size: $font-size-h1;
+  line-height: $line-height-h1;
+  font-weight: $font-weight-h1;
+  letter-spacing: $letter-spacing-tight;
+  
+  @media (max-width: 768px) {
+    font-size: $font-size-h1-mobile;
+  }
+}
+
+// Heading 2
+@mixin text-h2 {
+  font-family: $font-heading;
+  font-size: $font-size-h2;
+  line-height: $line-height-h2;
+  font-weight: $font-weight-h2;
+  letter-spacing: $letter-spacing-tight;
+  
+  @media (max-width: 768px) {
+    font-size: $font-size-h2-mobile;
+  }
+}
+
+// Heading 3
+@mixin text-h3 {
+  font-family: $font-heading;
+  font-size: $font-size-h3;
+  line-height: $line-height-h3;
+  font-weight: $font-weight-h3;
+  letter-spacing: $letter-spacing-normal;
+  
+  @media (max-width: 768px) {
+    font-size: $font-size-h3-mobile;
+  }
+}
+
+// Heading 4
+@mixin text-h4 {
+  font-family: $font-heading;
+  font-size: $font-size-h4;
+  line-height: $line-height-h4;
+  font-weight: $font-weight-h4;
+  letter-spacing: $letter-spacing-normal;
+  
+  @media (max-width: 768px) {
+    font-size: $font-size-h4-mobile;
+  }
+}
+
+// Heading 5
+@mixin text-h5 {
+  font-family: $font-heading;
+  font-size: $font-size-h5;
+  line-height: $line-height-h5;
+  font-weight: $font-weight-h5;
+  letter-spacing: $letter-spacing-normal;
+  
+  @media (max-width: 768px) {
+    font-size: $font-size-h5-mobile;
+  }
+}
+
+// Heading 6
+@mixin text-h6 {
+  font-family: $font-heading;
+  font-size: $font-size-h6;
+  line-height: $line-height-h6;
+  font-weight: $font-weight-h6;
+  letter-spacing: $letter-spacing-normal;
+  
+  @media (max-width: 768px) {
+    font-size: $font-size-h6-mobile;
+  }
+}
+
+// Body text
+@mixin text-body {
+  font-family: $font-body;
+  font-size: $font-size-base;
+  line-height: $line-height-base;
+  font-weight: $font-weight-base;
+  letter-spacing: $letter-spacing-normal;
+}
+
+// Large body text
+@mixin text-body-lg {
+  font-family: $font-body;
+  font-size: $font-size-lg;
+  line-height: $line-height-lg;
+  font-weight: $font-weight-base;
+  letter-spacing: $letter-spacing-normal;
+}
+
+// Small text
+@mixin text-sm {
+  font-family: $font-body;
+  font-size: $font-size-sm;
+  line-height: $line-height-sm;
+  font-weight: $font-weight-base;
+  letter-spacing: $letter-spacing-normal;
+}
+
+// Extra small text
+@mixin text-xs {
+  font-family: $font-body;
+  font-size: $font-size-xs;
+  line-height: $line-height-xs;
+  font-weight: $font-weight-base;
+  letter-spacing: $letter-spacing-wide;
+}
+
+// Code/monospace text
+@mixin text-code {
+  font-family: $font-mono;
+  font-size: 0.875em; // Slightly smaller than surrounding text
+  line-height: 1.5;
+  font-weight: $font-weight-normal;
+}
+
+// ============================================================================
+// UTILITY CLASSES
+// ============================================================================
+
+.text-display {
+  @include text-display;
+}
+
+.text-h1 {
+  @include text-h1;
+}
+
+.text-h2 {
+  @include text-h2;
+}
+
+.text-h3 {
+  @include text-h3;
+}
+
+.text-h4 {
+  @include text-h4;
+}
+
+.text-h5 {
+  @include text-h5;
+}
+
+.text-h6 {
+  @include text-h6;
+}
+
+.text-body {
+  @include text-body;
+}
+
+.text-body-lg {
+  @include text-body-lg;
+}
+
+.text-sm {
+  @include text-sm;
+}
+
+.text-xs {
+  @include text-xs;
+}
+
+.text-code {
+  @include text-code;
+}
+
+// Font weight utilities
+.font-thin { font-weight: $font-weight-thin; }
+.font-extralight { font-weight: $font-weight-extralight; }
+.font-light { font-weight: $font-weight-light; }
+.font-normal { font-weight: $font-weight-normal; }
+.font-medium { font-weight: $font-weight-medium; }
+.font-semibold { font-weight: $font-weight-semibold; }
+.font-bold { font-weight: $font-weight-bold; }
+.font-extrabold { font-weight: $font-weight-extrabold; }
+.font-black { font-weight: $font-weight-black; }
+
+// Letter spacing utilities
+.tracking-tighter { letter-spacing: $letter-spacing-tighter; }
+.tracking-tight { letter-spacing: $letter-spacing-tight; }
+.tracking-normal { letter-spacing: $letter-spacing-normal; }
+.tracking-wide { letter-spacing: $letter-spacing-wide; }
+.tracking-wider { letter-spacing: $letter-spacing-wider; }
+.tracking-widest { letter-spacing: $letter-spacing-widest; }
+
+// Text transform utilities
+.uppercase { text-transform: uppercase; }
+.lowercase { text-transform: lowercase; }
+.capitalize { text-transform: capitalize; }
+.normal-case { text-transform: none; }
+
+// Text decoration utilities
+.underline { text-decoration: underline; }
+.line-through { text-decoration: line-through; }
+.no-underline { text-decoration: none; }
+
+// Text alignment utilities
+.text-left { text-align: left; }
+.text-center { text-align: center; }
+.text-right { text-align: right; }
+.text-justify { text-align: justify; }
+
+// Truncate text
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// Line clamp utilities
+.line-clamp-1 {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.line-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.line-clamp-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.line-clamp-4 {
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}

package/website/styles/_variables.scss

@@ -0,0 +1,287 @@
+// OSSA Design System - Centralized Color Variables
+// Update colors here to change them site-wide
+// Based on Brand Guide v1.0.0 (Issue #44)
+
+// ============================================================================
+// 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)
+$gradient-brand: linear-gradient(135deg, $ossa-secondary 0%, $ossa-secondary 40%, $ossa-primary 70%, $ossa-accent 100%);
+$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%);
+
+// ============================================================================
+// 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;
+$code-string: #ce9178;
+$code-comment: #6a9955;
+