osi-cards-lib 1.5.32 → 1.5.34

package/styles/_osi-cards-tokens.scss

@@ -0,0 +1,333 @@
+/**
+ * OSI Cards Design Tokens
+ * Single Source of Truth for all design tokens
+ *
+ * Usage:
+ * @use 'osi-cards-tokens' as tokens;
+ *
+ * .my-component {
+ *   color: var(--osi-text-primary);
+ *   padding: var(--osi-spacing-md);
+ * }
+ */
+
+// ============================================================================
+// COLOR PALETTE
+// ============================================================================
+
+:root {
+  // Primary Colors
+  --osi-primary-50: #fef4f2;
+  --osi-primary-100: #fee5e2;
+  --osi-primary-200: #fdd0c8;
+  --osi-primary-300: #fbb0a3;
+  --osi-primary-400: #f78370;
+  --osi-primary-500: #ec5a45;
+  --osi-primary-600: #d93e27;
+  --osi-primary-700: #b6311d;
+  --osi-primary-800: #972c1c;
+  --osi-primary-900: #7d2a1d;
+
+  // Neutral Colors
+  --osi-neutral-50: #f8fafc;
+  --osi-neutral-100: #f1f5f9;
+  --osi-neutral-200: #e2e8f0;
+  --osi-neutral-300: #cbd5e1;
+  --osi-neutral-400: #94a3b8;
+  --osi-neutral-500: #64748b;
+  --osi-neutral-600: #475569;
+  --osi-neutral-700: #334155;
+  --osi-neutral-800: #1e293b;
+  --osi-neutral-900: #0f172a;
+
+  // Semantic Colors
+  --osi-success-50: #f0fdf4;
+  --osi-success-500: #22c55e;
+  --osi-success-700: #15803d;
+
+  --osi-warning-50: #fffbeb;
+  --osi-warning-500: #f59e0b;
+  --osi-warning-700: #b45309;
+
+  --osi-error-50: #fef2f2;
+  --osi-error-500: #ef4444;
+  --osi-error-700: #b91c1c;
+
+  --osi-info-50: #eff6ff;
+  --osi-info-500: #3b82f6;
+  --osi-info-700: #1d4ed8;
+}
+
+// ============================================================================
+// TYPOGRAPHY
+// ============================================================================
+
+:root {
+  // Font Families
+  --osi-font-sans:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --osi-font-mono: "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+
+  // Font Sizes - COMPACT MODE (reduced by ~10-15%)
+  --osi-text-xs: 0.625rem; // 10px (was 12px)
+  --osi-text-sm: 0.8125rem; // 13px (was 14px)
+  --osi-text-base: 0.9375rem; // 15px (was 16px)
+  --osi-text-lg: 1.0625rem; // 17px (was 18px)
+  --osi-text-xl: 1.1875rem; // 19px (was 20px)
+  --osi-text-2xl: 1.375rem; // 22px (was 24px)
+  --osi-text-3xl: 1.75rem; // 28px (was 30px)
+  --osi-text-4xl: 2.125rem; // 34px (was 36px)
+
+  // Line Heights
+  --osi-leading-tight: 1.25;
+  --osi-leading-snug: 1.375;
+  --osi-leading-normal: 1.5;
+  --osi-leading-relaxed: 1.625;
+
+  // Font Weights
+  --osi-font-normal: 400;
+  --osi-font-medium: 500;
+  --osi-font-semibold: 600;
+  --osi-font-bold: 700;
+}
+
+// ============================================================================
+// SPACING
+// ============================================================================
+
+:root {
+  --osi-spacing-0: 0;
+  --osi-spacing-px: 1px;
+  --osi-spacing-0_5: 0.125rem; // 2px
+  --osi-spacing-1: 0.25rem; // 4px
+  --osi-spacing-1_5: 0.375rem; // 6px
+  --osi-spacing-2: 0.5rem; // 8px
+  --osi-spacing-2_5: 0.625rem; // 10px
+  --osi-spacing-3: 0.75rem; // 12px
+  --osi-spacing-3_5: 0.875rem; // 14px
+  --osi-spacing-4: 1rem; // 16px
+  --osi-spacing-5: 1.25rem; // 20px
+  --osi-spacing-6: 1.5rem; // 24px
+  --osi-spacing-7: 1.75rem; // 28px
+  --osi-spacing-8: 2rem; // 32px
+  --osi-spacing-9: 2.25rem; // 36px
+  --osi-spacing-10: 2.5rem; // 40px
+  --osi-spacing-12: 3rem; // 48px
+  --osi-spacing-14: 3.5rem; // 56px
+  --osi-spacing-16: 4rem; // 64px
+  --osi-spacing-20: 5rem; // 80px
+  --osi-spacing-24: 6rem; // 96px
+
+  // Semantic spacing aliases (DEFAULT)
+  --osi-spacing-xs: var(--osi-spacing-1);
+  --osi-spacing-sm: var(--osi-spacing-2);
+  --osi-spacing-md: var(--osi-spacing-4);
+  --osi-spacing-lg: var(--osi-spacing-6);
+  --osi-spacing-xl: var(--osi-spacing-8);
+  --osi-spacing-2xl: var(--osi-spacing-12);
+
+  // COMPACT MODE - Reduced spacing (25-30% smaller)
+  --osi-spacing-compact-xs: var(--osi-spacing-0_5); // 2px (was 4px)
+  --osi-spacing-compact-sm: var(--osi-spacing-1_5); // 6px (was 8px)
+  --osi-spacing-compact-md: var(--osi-spacing-3); // 12px (was 16px)
+  --osi-spacing-compact-lg: var(--osi-spacing-4); // 16px (was 24px)
+  --osi-spacing-compact-xl: var(--osi-spacing-6); // 24px (was 32px)
+  --osi-spacing-compact-2xl: var(--osi-spacing-8); // 32px (was 48px)
+}
+
+// ============================================================================
+// BORDERS & RADIUS
+// ============================================================================
+
+:root {
+  // Border Radius
+  --osi-radius-none: 0;
+  --osi-radius-sm: 0.125rem; // 2px
+  --osi-radius-default: 0.25rem; // 4px
+  --osi-radius-md: 0.375rem; // 6px
+  --osi-radius-lg: 0.5rem; // 8px
+  --osi-radius-xl: 0.75rem; // 12px
+  --osi-radius-2xl: 1rem; // 16px
+  --osi-radius-3xl: 1.5rem; // 24px
+  --osi-radius-full: 9999px;
+
+  // Border Widths
+  --osi-border-0: 0;
+  --osi-border-1: 1px;
+  --osi-border-2: 2px;
+  --osi-border-4: 4px;
+  --osi-border-8: 8px;
+}
+
+// ============================================================================
+// SHADOWS
+// ============================================================================
+
+:root {
+  --osi-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --osi-shadow-default: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --osi-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --osi-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --osi-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --osi-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --osi-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+  --osi-shadow-none: 0 0 #0000;
+}
+
+// ============================================================================
+// ANIMATIONS
+// ============================================================================
+
+:root {
+  // Durations
+  --osi-duration-75: 75ms;
+  --osi-duration-100: 100ms;
+  --osi-duration-150: 150ms;
+  --osi-duration-200: 200ms;
+  --osi-duration-300: 300ms;
+  --osi-duration-500: 500ms;
+  --osi-duration-700: 700ms;
+  --osi-duration-1000: 1000ms;
+
+  // Timing Functions
+  --osi-ease-linear: linear;
+  --osi-ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --osi-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --osi-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --osi-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
+
+// ============================================================================
+// Z-INDEX
+// ============================================================================
+
+:root {
+  --osi-z-0: 0;
+  --osi-z-10: 10;
+  --osi-z-20: 20;
+  --osi-z-30: 30;
+  --osi-z-40: 40;
+  --osi-z-50: 50;
+  --osi-z-auto: auto;
+
+  // Semantic z-index
+  --osi-z-dropdown: 1000;
+  --osi-z-sticky: 1020;
+  --osi-z-fixed: 1030;
+  --osi-z-modal-backdrop: 1040;
+  --osi-z-modal: 1050;
+  --osi-z-popover: 1060;
+  --osi-z-tooltip: 1070;
+}
+
+// ============================================================================
+// COMPONENT TOKENS
+// ============================================================================
+
+:root {
+  // Card tokens
+  --osi-card-bg: white;
+  --osi-card-border: var(--osi-neutral-200);
+  --osi-card-radius: var(--osi-radius-xl);
+  --osi-card-shadow: var(--osi-shadow-md);
+  --osi-card-padding: var(--osi-spacing-4);
+
+  // Section tokens
+  --osi-section-gap: var(--osi-spacing-3);
+  --osi-section-header-color: var(--osi-neutral-800);
+  --osi-section-content-color: var(--osi-neutral-600);
+
+  // Field tokens
+  --osi-field-label-color: var(--osi-neutral-500);
+  --osi-field-value-color: var(--osi-neutral-900);
+  --osi-field-gap: var(--osi-spacing-1);
+
+  // Grid tokens
+  --osi-grid-columns: 12;
+  --osi-grid-gap: var(--osi-spacing-4);
+  --osi-grid-min-column: 200px;
+
+  // Button tokens
+  --osi-btn-padding-x: var(--osi-spacing-4);
+  --osi-btn-padding-y: var(--osi-spacing-2);
+  --osi-btn-radius: var(--osi-radius-md);
+  --osi-btn-font-size: var(--osi-text-sm);
+  --osi-btn-font-weight: var(--osi-font-medium);
+}
+
+// ============================================================================
+// THEME-SPECIFIC TOKENS (Light)
+// ============================================================================
+
+:root,
+[data-theme="light"] {
+  --osi-bg-primary: white;
+  --osi-bg-secondary: var(--osi-neutral-50);
+  --osi-bg-tertiary: var(--osi-neutral-100);
+
+  --osi-text-primary: var(--osi-neutral-900);
+  --osi-text-secondary: var(--osi-neutral-600);
+  --osi-text-tertiary: var(--osi-neutral-400);
+  --osi-text-inverse: white;
+
+  --osi-border-default: var(--osi-neutral-200);
+  --osi-border-strong: var(--osi-neutral-300);
+}
+
+// ============================================================================
+// THEME-SPECIFIC TOKENS (Dark)
+// ============================================================================
+
+[data-theme="dark"] {
+  --osi-bg-primary: var(--osi-neutral-900);
+  --osi-bg-secondary: var(--osi-neutral-800);
+  --osi-bg-tertiary: var(--osi-neutral-700);
+
+  --osi-text-primary: var(--osi-neutral-50);
+  --osi-text-secondary: var(--osi-neutral-300);
+  --osi-text-tertiary: var(--osi-neutral-500);
+  --osi-text-inverse: var(--osi-neutral-900);
+
+  --osi-border-default: var(--osi-neutral-700);
+  --osi-border-strong: var(--osi-neutral-600);
+
+  // Override card tokens for dark
+  --osi-card-bg: var(--osi-neutral-800);
+  --osi-card-border: var(--osi-neutral-700);
+
+  // Override section tokens
+  --osi-section-header-color: var(--osi-neutral-100);
+  --osi-section-content-color: var(--osi-neutral-300);
+
+  // Override field tokens
+  --osi-field-label-color: var(--osi-neutral-400);
+  --osi-field-value-color: var(--osi-neutral-100);
+}
+
+// ============================================================================
+// PRINT STYLES
+// ============================================================================
+
+@media print {
+  :root {
+    --osi-card-shadow: none;
+    --osi-card-border: var(--osi-neutral-300);
+  }
+}
+
+// ============================================================================
+// REDUCED MOTION
+// ============================================================================
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --osi-duration-75: 0ms;
+    --osi-duration-100: 0ms;
+    --osi-duration-150: 0ms;
+    --osi-duration-200: 0ms;
+    --osi-duration-300: 0ms;
+    --osi-duration-500: 0ms;
+    --osi-duration-700: 0ms;
+    --osi-duration-1000: 0ms;
+  }
+}

package/styles/_styles-scoped.scss

@@ -0,0 +1,81 @@
+/* ===================================================================
+   OSI CARDS STYLES - Scoped Integration Entry Point
+
+   Wraps all styles in .osi-cards-container to prevent CSS leakage.
+   Uses same CSS variables as demo app, just scoped to container.
+
+   CSS Layer Strategy:
+     - All library styles are in the 'osi-cards' layer
+     - Consumer styles outside this layer have higher priority
+     - Easy to override: just write your CSS normally, no !important needed
+
+   Usage:
+     1. Import this file in your styles or angular.json
+     2. Wrap your OSI Cards components in <div class="osi-cards-container">
+
+   Example:
+     <div class="osi-cards-container" data-theme="day">
+       <app-ai-card-renderer [cardConfig]="card"></app-ai-card-renderer>
+     </div>
+
+   Overriding styles:
+     // Your styles (outside @layer) automatically override library styles
+     .osi-cards-container .ai-card-title {
+       font-size: 2rem; // This will override library default
+     }
+   =================================================================== */
+
+/* Declare the layer first for proper cascade ordering */
+@layer osi-cards;
+
+/* All library styles go in the osi-cards layer */
+@layer osi-cards {
+  .osi-cards-container {
+    // Container base styles - transparent with 8px padding
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    padding: 8px;
+    background: transparent !important;
+    background-color: transparent !important;
+
+    // Preserve 3D transforms for tilt effects
+    perspective: 1200px;
+    transform-style: preserve-3d;
+
+    // Responsive: reduce padding on mobile
+    @media (max-width: 480px) {
+      padding: 4px;
+    }
+
+    // Bootstrap isolation - must come first to reset external Bootstrap variables
+    @import "core/bootstrap-reset";
+
+    // Scoped variables (applies tokens to & selector)
+    @import "core/variables-unified";
+
+    // Core styles (scoped versions where needed)
+    @import "core/mixins";
+    @import "core/surface-layers";
+    @import "core/global-unified";
+    @import "core/utilities";
+    @import "core/animations";
+
+    // Layout styles
+    @import "layout/tilt";
+    @import "layout/masonry";
+    @import "layout/feature-grid";
+
+    // Streaming effects (must come after animations)
+    @import "components/streaming-effects";
+
+    // Hero card and feature card styles
+    @import "components/hero-card";
+
+    // Component styles (SAME files as demo app)
+    @import "components/cards/ai-card";
+
+    // All section styles (consolidated)
+    @import "components/sections/sections-all";
+  }
+}

package/styles/_styles.scss

@@ -0,0 +1,26 @@
+/* ===================================================================
+   OSI CARDS STYLES - Demo App Entry Point
+   
+   For use in the demo/documentation app. Applies styles to :root.
+   Imports shared component bundle after setting up variables.
+   
+   CSS Layer Strategy:
+     - All library styles are in the 'osi-cards' layer
+     - Consumer styles outside this layer have higher priority
+     
+   Note: Using @import inside @layer as @use cannot be used in @layer blocks.
+   The Sass @import deprecation warnings can be safely ignored until
+   Dart Sass 3.0.0 when migration will be required.
+   =================================================================== */
+
+/* Declare the layer first for proper cascade ordering */
+@layer osi-cards;
+
+/* All library styles go in the osi-cards layer */
+@layer osi-cards {
+  // Core variables (applies to :root)
+  @import "core/variables";
+
+  // Shared component styles
+  @import "components";
+}

package/styles/bundles/_ai-card.scss

@@ -0,0 +1,245 @@
+// ============================================
+// AI CARD COMPONENT BUNDLE
+// ============================================
+//
+// Self-contained bundle for the AI Card Renderer component.
+// Includes all styles needed to render AI cards with any section type.
+//
+// Usage in Shadow DOM component:
+//   @use 'osi-cards-lib/styles/bundles/ai-card';
+//
+// ============================================
+
+// 1. Master tokens (single source of truth)
+@use "../tokens/master" as *;
+
+// 2. Shadow DOM reset (full isolation)
+@use "../reset/shadow-reset";
+
+// 3. Generate CSS custom properties
+// Use "demo" mode to match demo app appearance exactly
+:host {
+  @include osi-theme-base("demo", true);
+  @include osi-tokens("demo", true);
+
+  // Block display - let content determine height
+  display: block;
+  width: 100%;
+  min-height: 0; // Allow flex children to shrink
+}
+
+// Primary: Use :host([data-theme]) for explicit Shadow DOM scope (most reliable)
+// Fallback: :host-context for cases where parent sets data-theme
+:host([data-theme="night"]) {
+  @include osi-theme-dark("demo", true);
+}
+
+:host([data-theme="day"]) {
+  @include osi-theme-light("demo", true);
+}
+
+// Fallback: Support parent context (for backward compatibility)
+// Note: Safari may have inconsistent :host-context behavior, so :host([data-theme]) is preferred
+:host-context([data-theme="night"]) {
+  @include osi-theme-dark("demo", true);
+}
+
+:host-context([data-theme="day"]) {
+  @include osi-theme-light("demo", true);
+}
+
+// 4. Core styles required for AI card
+@import "../core/mixins";
+@import "../core/surface-layers";
+@import "../core/utilities";
+
+// 4a. Animations (keyframes + utility classes)
+@import "../core/animations";
+
+// 5. Layout
+@import "../layout/tilt";
+@import "../layout/masonry";
+@import "../layout/feature-grid";
+
+// 5a. Hero card styles
+@import "../components/hero-card";
+
+// 5b. Streaming effects
+@import "../components/streaming-effects";
+
+// 5c. Component styles for ViewEncapsulation.None components
+// (masonry-grid, section-renderer, card-actions, card-streaming-indicator, etc.)
+@import "../components/_component-styles";
+
+// 6. AI Card specific styles
+@import "../components/cards/ai-card";
+@import "../components/_empty-state";
+
+// 6a. Utility classes (w-full, h-full, flex-1, min-h-0, etc.)
+@import "../components/sections/_utility-classes";
+
+// 7. Section Styles (consolidated)
+// Design system + sections base + section shell + all section types
+@import "../components/sections/sections-all";
+
+// 7a. Additional design tokens for Shadow DOM
+// Convert :root selectors to :host for Shadow DOM compatibility
+:host {
+  // Spacing scale
+  --spacing-none: 0;
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 12px;
+  --spacing-base: 16px;
+  --spacing-lg: 20px;
+  --spacing-xl: 28px;
+  --spacing-2xl: 40px;
+  --spacing-3xl: 56px;
+
+  // Compact mode variations
+  --spacing-compact-xs: 3px;
+  --spacing-compact-sm: 6px;
+  --spacing-compact-md: 9px;
+  --spacing-compact-base: 12px;
+  --spacing-compact-lg: 16px;
+
+  // Section-specific sizing
+  --section-card-min-height: 110px;
+  --section-card-compact-height: 90px;
+  --section-header-gap: var(--spacing-md);
+  --section-content-gap: var(--spacing-sm);
+  --section-card-gap: var(--spacing-md);
+  --section-card-padding: var(--spacing-md);
+
+  // Typography
+  --text-md: 0.875rem;
+  --font-light: 300;
+  --font-normal: 400;
+  --font-medium: 500;
+  --font-semibold: 600;
+  --font-bold: 700;
+  --font-extrabold: 800;
+  --leading-tight: 1.2;
+  --leading-snug: 1.3;
+  --leading-normal: 1.4;
+  --leading-relaxed: 1.5;
+  --leading-loose: 1.75;
+}
+
+// 8. Component-specific optimizations (from demo app)
+// Register CSS custom properties for browser-native interpolation
+@supports (background: paint(id)) {
+  @property --tilt-x {
+    syntax: "<angle>";
+    initial-value: 0deg;
+    inherits: false;
+  }
+  @property --tilt-y {
+    syntax: "<angle>";
+    initial-value: 0deg;
+    inherits: false;
+  }
+  @property --glow-blur {
+    syntax: "<length>";
+    initial-value: 8px;
+    inherits: false;
+  }
+  @property --glow-color {
+    syntax: "<color>";
+    initial-value: rgba(255, 121, 0, 0.225);
+    inherits: false;
+  }
+  @property --reflection-opacity {
+    syntax: "<number>";
+    initial-value: 0;
+    inherits: false;
+  }
+}
+
+// Card container wrapper - CSS containment for performance
+.card-container-wrapper {
+  contain: layout style;
+}
+
+// Note: Tilt and glow container styles are already included from _tilt.scss import above
+// The tilt effect should work automatically via the tilt-container class
+
+// Card surface styles - matching demo app exactly
+// These ensure the card has proper background and border in Shadow DOM
+// Theme-aware: uses CSS variables but with fallbacks for night theme
+.ai-card-surface {
+  // Use theme variables, but ensure they're applied with proper specificity
+  // The theme mixins set these, but we need to ensure they're not overridden
+  border: var(--osi-card-border, 1px solid rgba(255, 255, 255, 0.08)) !important;
+  background: var(--osi-card-background, rgba(20, 20, 20, 0.6)) !important;
+  backdrop-filter: var(--osi-card-backdrop-filter, blur(12px)) !important;
+  -webkit-backdrop-filter: var(--osi-card-backdrop-filter, blur(12px)) !important;
+  box-shadow: var(--osi-card-shadow, 0 4px 24px -1px rgba(0, 0, 0, 0.2)) !important;
+  transition: var(--osi-card-transition-border, all 0.4s cubic-bezier(0.4, 0, 0.2, 1)) !important;
+}
+
+.ai-card-surface:hover {
+  border: var(--osi-card-border-hover, 1px solid rgba(255, 121, 0, 0.5)) !important;
+  background: var(--osi-card-background-hover, rgba(30, 30, 30, 0.8)) !important;
+  box-shadow: var(--osi-card-shadow-hover, 0 20px 40px -5px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 121, 0, 0.2)) !important;
+}
+
+// Section highlight animation for URL fragment scrolling
+.section-highlight {
+  animation: section-pulse 2s ease-out;
+  position: relative;
+}
+
+.section-highlight::after {
+  content: "";
+  position: absolute;
+  inset: -4px;
+  border: 2px solid rgba(255, 121, 0, 0.6);
+  border-radius: 14px;
+  pointer-events: none;
+  animation: section-border-fade 2s ease-out forwards;
+}
+
+@keyframes section-pulse {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.01);
+  }
+}
+
+@keyframes section-border-fade {
+  0% {
+    opacity: 1;
+    box-shadow: 0 0 20px rgba(255, 121, 0, 0.4);
+  }
+  100% {
+    opacity: 0;
+    box-shadow: 0 0 0 rgba(255, 121, 0, 0);
+  }
+}
+
+// 10. Action buttons and footer (enforced styles for Shadow DOM)
+@import "../components/card-actions";
+@import "../components/card-footer";
+
+// 11. Accessibility support
+@media (prefers-reduced-motion: reduce) {
+  :host {
+    @include osi-tokens-reduced-motion();
+  }
+}
+
+@media (prefers-contrast: high) {
+  :host {
+    @include osi-tokens-high-contrast();
+  }
+}
+
+@media (forced-colors: active) {
+  :host {
+    @include osi-tokens-forced-colors();
+  }
+}