@bluefly/openstandardagents 0.2.7 → 0.2.8

package/website/styles/_typography.scss

@@ -1,361 +0,0 @@
-// 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

@@ -1,287 +0,0 @@
-// 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;
-