@bluefly/openstandardagents 0.2.5-RC → 0.2.7

package/website/styles/_tokens.scss

@@ -0,0 +1,245 @@
+// OSSA Design System - Design Tokens
+// Complete color scales, gradients, and design tokens
+
+// ============================================================================
+// COLOR SCALES (50-900)
+// ============================================================================
+
+// Primary Color Scale (Blue-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 primary color
+$ossa-primary-600: #3d2fb8;
+$ossa-primary-700: #322598;
+$ossa-primary-800: #2a1f7a;
+$ossa-primary-900: #241f65;
+$ossa-primary-950: #15113a;
+
+// Secondary Color Scale (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 secondary color
+$ossa-secondary-600: #0a9dd1;
+$ossa-secondary-700: #087da9;
+$ossa-secondary-800: #0c6688;
+$ossa-secondary-900: #105570;
+$ossa-secondary-950: #08374a;
+
+// Accent Color Scale (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 accent color
+$ossa-accent-600: #7c3aed;
+$ossa-accent-700: #6b28d9;
+$ossa-accent-800: #5923b8;
+$ossa-accent-900: #4b1f97;
+$ossa-accent-950: #2d0f5c;
+
+// Success Color Scale (Green #10b981)
+$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 success color
+$ossa-success-600: #059669;
+$ossa-success-700: #047857;
+$ossa-success-800: #065f46;
+$ossa-success-900: #064e3b;
+$ossa-success-950: #022c22;
+
+// Warning Color Scale (Amber #f59e0b)
+$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 warning color
+$ossa-warning-600: #d97706;
+$ossa-warning-700: #b45309;
+$ossa-warning-800: #92400e;
+$ossa-warning-900: #78350f;
+$ossa-warning-950: #451a03;
+
+// Error Color Scale (Red #ef4444)
+$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 error color
+$ossa-error-600: #dc2626;
+$ossa-error-700: #b91c1c;
+$ossa-error-800: #991b1b;
+$ossa-error-900: #7f1d1d;
+$ossa-error-950: #450a0a;
+
+// Info Color Scale (Cyan #06b6d4)
+$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 info color
+$ossa-info-600: #0891b2;
+$ossa-info-700: #0e7490;
+$ossa-info-800: #155e75;
+$ossa-info-900: #164e63;
+$ossa-info-950: #083344;
+
+// Neutral/Gray Color Scale
+$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;
+
+// ============================================================================
+// DARK MODE COLOR MAPPINGS (Future-ready)
+// ============================================================================
+
+// Dark mode will invert the color scales
+// Light backgrounds (50-100) become dark (900-950)
+// Dark text (900-950) becomes light (50-100)
+
+$ossa-dark-bg-primary: $ossa-gray-900;
+$ossa-dark-bg-secondary: $ossa-gray-800;
+$ossa-dark-bg-tertiary: $ossa-gray-700;
+$ossa-dark-text-primary: $ossa-gray-50;
+$ossa-dark-text-secondary: $ossa-gray-300;
+$ossa-dark-text-tertiary: $ossa-gray-400;
+
+// ============================================================================
+// GRADIENT TOKENS (CSS Custom Properties)
+// ============================================================================
+
+// Primary gradient (Purple spectrum)
+$gradient-primary: linear-gradient(135deg, $ossa-primary-500 0%, $ossa-accent-600 100%);
+
+// Secondary gradient (Blue to Cyan)
+$gradient-secondary: linear-gradient(135deg, $ossa-secondary-500 0%, $ossa-info-500 100%);
+
+// Accent gradient (Purple to Pink)
+$gradient-accent: linear-gradient(135deg, $ossa-accent-500 0%, #ec4899 100%);
+
+// Hero gradient (Full spectrum - Blue to Purple)
+$gradient-hero: linear-gradient(135deg, $ossa-secondary-500 0%, $ossa-primary-500 50%, $ossa-accent-500 100%);
+
+// Button gradient (Subtle blue to purple)
+$gradient-button: linear-gradient(135deg, $ossa-secondary-400 0%, $ossa-primary-500 100%);
+
+// Success gradient
+$gradient-success: linear-gradient(135deg, $ossa-success-400 0%, $ossa-success-600 100%);
+
+// Warning gradient
+$gradient-warning: linear-gradient(135deg, $ossa-warning-400 0%, $ossa-warning-600 100%);
+
+// Error gradient
+$gradient-error: linear-gradient(135deg, $ossa-error-400 0%, $ossa-error-600 100%);
+
+// Info gradient
+$gradient-info: linear-gradient(135deg, $ossa-info-400 0%, $ossa-info-600 100%);
+
+// Subtle background gradients
+$gradient-bg-light: linear-gradient(180deg, $ossa-gray-50 0%, $ossa-gray-100 100%);
+$gradient-bg-primary: linear-gradient(180deg, $ossa-primary-50 0%, $ossa-primary-100 100%);
+$gradient-bg-secondary: linear-gradient(180deg, $ossa-secondary-50 0%, $ossa-secondary-100 100%);
+
+// ============================================================================
+// FOCUS RING COLORS (Accessibility)
+// ============================================================================
+
+$focus-ring-primary: $ossa-primary-500;
+$focus-ring-secondary: $ossa-secondary-500;
+$focus-ring-accent: $ossa-accent-500;
+$focus-ring-error: $ossa-error-500;
+$focus-ring-success: $ossa-success-500;
+
+// Focus ring with opacity for layering
+$focus-ring-primary-alpha: rgba($ossa-primary-500, 0.5);
+$focus-ring-secondary-alpha: rgba($ossa-secondary-500, 0.5);
+$focus-ring-accent-alpha: rgba($ossa-accent-500, 0.5);
+
+// ============================================================================
+// SHADOW TOKENS
+// ============================================================================
+
+$shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+$shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+$shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+$shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+$shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+
+// Colored shadows for emphasis
+$shadow-primary: 0 10px 15px -3px rgba($ossa-primary-500, 0.2), 0 4px 6px -2px rgba($ossa-primary-500, 0.1);
+$shadow-secondary: 0 10px 15px -3px rgba($ossa-secondary-500, 0.2), 0 4px 6px -2px rgba($ossa-secondary-500, 0.1);
+$shadow-accent: 0 10px 15px -3px rgba($ossa-accent-500, 0.2), 0 4px 6px -2px rgba($ossa-accent-500, 0.1);
+
+// ============================================================================
+// BORDER RADIUS TOKENS
+// ============================================================================
+
+$radius-none: 0;
+$radius-sm: 0.125rem;   // 2px
+$radius-md: 0.375rem;   // 6px
+$radius-lg: 0.5rem;     // 8px
+$radius-xl: 0.75rem;    // 12px
+$radius-2xl: 1rem;      // 16px
+$radius-3xl: 1.5rem;    // 24px
+$radius-full: 9999px;   // Full circle
+
+// ============================================================================
+// TRANSITION TOKENS
+// ============================================================================
+
+$transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+$transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
+$transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
+$transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1);
+
+// ============================================================================
+// Z-INDEX TOKENS
+// ============================================================================
+
+$z-dropdown: 1000;
+$z-sticky: 1020;
+$z-fixed: 1030;
+$z-modal-backdrop: 1040;
+$z-modal: 1050;
+$z-popover: 1060;
+$z-tooltip: 1070;
+
+// ============================================================================
+// OPACITY TOKENS
+// ============================================================================
+
+$opacity-0: 0;
+$opacity-5: 0.05;
+$opacity-10: 0.1;
+$opacity-20: 0.2;
+$opacity-25: 0.25;
+$opacity-30: 0.3;
+$opacity-40: 0.4;
+$opacity-50: 0.5;
+$opacity-60: 0.6;
+$opacity-70: 0.7;
+$opacity-75: 0.75;
+$opacity-80: 0.8;
+$opacity-90: 0.9;
+$opacity-95: 0.95;
+$opacity-100: 1;

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;
+}