osi-cards-lib 1.5.30 → 1.5.32

package/styles/themes.scss

@@ -1,573 +0,0 @@
-/**
- * OSI Cards - Theme Presets
- *
- * Beautiful, opinionated theme presets for OSI Cards.
- *
- * ⚠️ WARNING: This file contains :root selectors for global theming.
- * For library integration, prefer container-scoped theming:
- * - Use <osi-cards-container [theme]="'day'"> component
- * - Use [attr.data-theme]="theme" attribute binding
- * - This file is primarily for demo app use
- *
- * The selectors below support both global (:root) and container-scoped (.osi-cards-container) usage.
- *
- * ⚠️ TOKEN SOURCE RELATIONSHIPS:
- * This file defines demo app theme presets (`--osi-card-*` variables).
- * For CSS component tokens, see: `styles/tokens/_master.scss`
- * For JS-applied theme presets, see: `themes/presets.ts`
- *
- * NOTE: Theme values here may differ from `themes/presets.ts` as they serve
- * different purposes (demo app vs library integration). Consider aligning
- * values if consistency is required.
- */
-
-// ============================================
-// Light Theme (Default)
-// ============================================
-
-[data-theme="light"],
-.osi-cards-container[data-theme="light"],
-:root {
-  // Base colors
-  --osi-card-background: #ffffff;
-  --osi-card-foreground: #1a1a2e;
-  --osi-card-muted: #64748b;
-  --osi-card-muted-foreground: #94a3b8;
-
-  // Surface colors
-  --osi-card-surface: #f8fafc;
-  --osi-card-surface-hover: #f1f5f9;
-  --osi-card-surface-active: #e2e8f0;
-
-  // Accent
-  --osi-card-accent: #6366f1;
-  --osi-card-accent-rgb: 99, 102, 241;
-  --osi-card-accent-foreground: #ffffff;
-  --osi-card-accent-hover: #4f46e5;
-
-  // Borders
-  --osi-card-border: #e2e8f0;
-  --osi-card-border-hover: #cbd5e1;
-  --osi-card-ring: rgba(99, 102, 241, 0.3);
-
-  // Status colors
-  --osi-card-success: #10b981;
-  --osi-card-success-bg: #ecfdf5;
-  --osi-card-warning: #f59e0b;
-  --osi-card-warning-bg: #fffbeb;
-  --osi-card-destructive: #ef4444;
-  --osi-card-destructive-bg: #fef2f2;
-  --osi-card-info: #3b82f6;
-  --osi-card-info-bg: #eff6ff;
-
-  // Shadows
-  --osi-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
-  --osi-card-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.04);
-  --osi-card-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.03);
-  --osi-card-shadow-glow: 0 0 20px rgba(99, 102, 241, 0.15);
-}
-
-// ============================================
-// Dark Theme
-// ============================================
-
-[data-theme="dark"],
-.osi-cards-container[data-theme="dark"] {
-  // Base colors
-  --osi-card-background: #0f172a;
-  --osi-card-foreground: #f1f5f9;
-  --osi-card-muted: #94a3b8;
-  --osi-card-muted-foreground: #64748b;
-
-  // Surface colors
-  --osi-card-surface: #1e293b;
-  --osi-card-surface-hover: #334155;
-  --osi-card-surface-active: #475569;
-
-  // Accent
-  --osi-card-accent: #818cf8;
-  --osi-card-accent-rgb: 129, 140, 248;
-  --osi-card-accent-foreground: #0f172a;
-  --osi-card-accent-hover: #a5b4fc;
-
-  // Borders
-  --osi-card-border: #334155;
-  --osi-card-border-hover: #475569;
-  --osi-card-ring: rgba(129, 140, 248, 0.4);
-
-  // Status colors
-  --osi-card-success: #34d399;
-  --osi-card-success-bg: rgba(16, 185, 129, 0.1);
-  --osi-card-warning: #fbbf24;
-  --osi-card-warning-bg: rgba(245, 158, 11, 0.1);
-  --osi-card-destructive: #f87171;
-  --osi-card-destructive-bg: rgba(239, 68, 68, 0.1);
-  --osi-card-info: #60a5fa;
-  --osi-card-info-bg: rgba(59, 130, 246, 0.1);
-
-  // Shadows
-  --osi-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
-  --osi-card-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.15);
-  --osi-card-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3), 0 4px 6px rgba(0, 0, 0, 0.15);
-  --osi-card-shadow-glow: 0 0 30px rgba(129, 140, 248, 0.2);
-}
-
-// ============================================
-// Midnight Theme
-// ============================================
-
-[data-theme="midnight"],
-.osi-cards-container[data-theme="midnight"] {
-  --osi-card-background: #0a0a0f;
-  --osi-card-foreground: #e4e4e7;
-  --osi-card-muted: #71717a;
-  --osi-card-muted-foreground: #52525b;
-
-  --osi-card-surface: #18181b;
-  --osi-card-surface-hover: #27272a;
-  --osi-card-surface-active: #3f3f46;
-
-  --osi-card-accent: #a78bfa;
-  --osi-card-accent-rgb: 167, 139, 250;
-  --osi-card-accent-foreground: #0a0a0f;
-  --osi-card-accent-hover: #c4b5fd;
-
-  --osi-card-border: #27272a;
-  --osi-card-border-hover: #3f3f46;
-  --osi-card-ring: rgba(167, 139, 250, 0.4);
-
-  --osi-card-shadow-glow: 0 0 40px rgba(167, 139, 250, 0.15);
-}
-
-// ============================================
-// Corporate Theme
-// ============================================
-
-[data-theme="corporate"],
-.osi-cards-container[data-theme="corporate"] {
-  --osi-card-background: #ffffff;
-  --osi-card-foreground: #1e3a5f;
-  --osi-card-muted: #5a7fa3;
-  --osi-card-muted-foreground: #8ba8c7;
-
-  --osi-card-surface: #f0f7ff;
-  --osi-card-surface-hover: #e1efff;
-  --osi-card-surface-active: #cfe2ff;
-
-  --osi-card-accent: #0066cc;
-  --osi-card-accent-rgb: 0, 102, 204;
-  --osi-card-accent-foreground: #ffffff;
-  --osi-card-accent-hover: #0052a3;
-
-  --osi-card-border: #d1e3f6;
-  --osi-card-border-hover: #a8cdef;
-
-  // More subdued shadows for professional look
-  --osi-card-shadow: 0 1px 2px rgba(30, 58, 95, 0.05);
-  --osi-card-shadow-md: 0 2px 4px rgba(30, 58, 95, 0.08);
-  --osi-card-shadow-lg: 0 4px 8px rgba(30, 58, 95, 0.1);
-
-  // Sharper corners for corporate feel
-  --osi-card-border-radius: 4px;
-}
-
-// ============================================
-// Nature Theme
-// ============================================
-
-[data-theme="nature"],
-.osi-cards-container[data-theme="nature"] {
-  --osi-card-background: #fefefe;
-  --osi-card-foreground: #1a3129;
-  --osi-card-muted: #5a7268;
-  --osi-card-muted-foreground: #8aa496;
-
-  --osi-card-surface: #f0f7f4;
-  --osi-card-surface-hover: #e3f0ea;
-  --osi-card-surface-active: #d1e6db;
-
-  --osi-card-accent: #059669;
-  --osi-card-accent-rgb: 5, 150, 105;
-  --osi-card-accent-foreground: #ffffff;
-  --osi-card-accent-hover: #047857;
-
-  --osi-card-border: #d1e6db;
-  --osi-card-border-hover: #a7d4be;
-  --osi-card-ring: rgba(5, 150, 105, 0.3);
-
-  --osi-card-success: #059669;
-  --osi-card-warning: #d97706;
-  --osi-card-destructive: #dc2626;
-}
-
-// ============================================
-// Sunset Theme
-// ============================================
-
-[data-theme="sunset"],
-.osi-cards-container[data-theme="sunset"] {
-  --osi-card-background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
-  --osi-card-foreground: #fef3c7;
-  --osi-card-muted: #d4a574;
-  --osi-card-muted-foreground: #a87c4f;
-
-  --osi-card-surface: rgba(255, 255, 255, 0.05);
-  --osi-card-surface-hover: rgba(255, 255, 255, 0.1);
-  --osi-card-surface-active: rgba(255, 255, 255, 0.15);
-
-  --osi-card-accent: #f59e0b;
-  --osi-card-accent-rgb: 245, 158, 11;
-  --osi-card-accent-foreground: #1a1a2e;
-  --osi-card-accent-hover: #d97706;
-
-  --osi-card-border: rgba(245, 158, 11, 0.2);
-  --osi-card-border-hover: rgba(245, 158, 11, 0.3);
-  --osi-card-ring: rgba(245, 158, 11, 0.4);
-
-  --osi-card-shadow-glow: 0 0 40px rgba(245, 158, 11, 0.2);
-}
-
-// ============================================
-// Ocean Theme
-// ============================================
-
-[data-theme="ocean"],
-.osi-cards-container[data-theme="ocean"] {
-  --osi-card-background: #0a192f;
-  --osi-card-foreground: #ccd6f6;
-  --osi-card-muted: #8892b0;
-  --osi-card-muted-foreground: #495670;
-
-  --osi-card-surface: #112240;
-  --osi-card-surface-hover: #1d3461;
-  --osi-card-surface-active: #233554;
-
-  --osi-card-accent: #64ffda;
-  --osi-card-accent-rgb: 100, 255, 218;
-  --osi-card-accent-foreground: #0a192f;
-  --osi-card-accent-hover: #4cd7b8;
-
-  --osi-card-border: #233554;
-  --osi-card-border-hover: #2d4a6f;
-  --osi-card-ring: rgba(100, 255, 218, 0.3);
-
-  --osi-card-shadow-glow: 0 0 50px rgba(100, 255, 218, 0.15);
-}
-
-// ============================================
-// Rose Theme
-// ============================================
-
-[data-theme="rose"],
-.osi-cards-container[data-theme="rose"] {
-  --osi-card-background: #fffbfc;
-  --osi-card-foreground: #4a1c2c;
-  --osi-card-muted: #9f6070;
-  --osi-card-muted-foreground: #c89aa6;
-
-  --osi-card-surface: #fef1f4;
-  --osi-card-surface-hover: #fde4ea;
-  --osi-card-surface-active: #fbd2dc;
-
-  --osi-card-accent: #e11d48;
-  --osi-card-accent-rgb: 225, 29, 72;
-  --osi-card-accent-foreground: #ffffff;
-  --osi-card-accent-hover: #be123c;
-
-  --osi-card-border: #fbd2dc;
-  --osi-card-border-hover: #f9a8bb;
-  --osi-card-ring: rgba(225, 29, 72, 0.3);
-}
-
-// ============================================
-// Minimal Theme
-// ============================================
-
-[data-theme="minimal"],
-.osi-cards-container[data-theme="minimal"] {
-  --osi-card-background: #ffffff;
-  --osi-card-foreground: #171717;
-  --osi-card-muted: #737373;
-  --osi-card-muted-foreground: #a3a3a3;
-
-  --osi-card-surface: #fafafa;
-  --osi-card-surface-hover: #f5f5f5;
-  --osi-card-surface-active: #e5e5e5;
-
-  --osi-card-accent: #171717;
-  --osi-card-accent-rgb: 23, 23, 23;
-  --osi-card-accent-foreground: #ffffff;
-  --osi-card-accent-hover: #404040;
-
-  --osi-card-border: #e5e5e5;
-  --osi-card-border-hover: #d4d4d4;
-  --osi-card-ring: rgba(23, 23, 23, 0.2);
-
-  // No shadows for minimal look
-  --osi-card-shadow: none;
-  --osi-card-shadow-md: none;
-  --osi-card-shadow-lg: none;
-  --osi-card-shadow-glow: none;
-
-  // Sharp corners
-  --osi-card-border-radius: 0;
-}
-
-// ============================================
-// High Contrast Theme (Accessibility)
-// ============================================
-
-[data-theme="high-contrast"],
-.osi-cards-container[data-theme="high-contrast"] {
-  --osi-card-background: #000000;
-  --osi-card-foreground: #ffffff;
-  --osi-card-muted: #ffffff;
-  --osi-card-muted-foreground: #d4d4d4;
-
-  --osi-card-surface: #1a1a1a;
-  --osi-card-surface-hover: #2d2d2d;
-  --osi-card-surface-active: #404040;
-
-  --osi-card-accent: #ffff00;
-  --osi-card-accent-rgb: 255, 255, 0;
-  --osi-card-accent-foreground: #000000;
-  --osi-card-accent-hover: #cccc00;
-
-  --osi-card-border: #ffffff;
-  --osi-card-border-hover: #ffffff;
-  --osi-card-ring: rgba(255, 255, 0, 0.5);
-
-  --osi-card-success: #00ff00;
-  --osi-card-warning: #ffff00;
-  --osi-card-destructive: #ff0000;
-  --osi-card-info: #00ffff;
-
-  // Strong shadows for depth perception
-  --osi-card-shadow: 0 0 0 2px #ffffff;
-  --osi-card-shadow-md: 0 0 0 3px #ffffff;
-  --osi-card-shadow-lg: 0 0 0 4px #ffffff;
-}
-
-// ============================================
-// System Theme (Auto)
-// ============================================
-
-@media (prefers-color-scheme: dark) {
-  [data-theme="system"],
-  .osi-cards-container[data-theme="system"],
-  :root:not([data-theme]) {
-    --osi-card-background: #0f172a;
-    --osi-card-foreground: #f1f5f9;
-    --osi-card-muted: #94a3b8;
-    --osi-card-surface: #1e293b;
-    --osi-card-accent: #818cf8;
-    --osi-card-accent-rgb: 129, 140, 248;
-    --osi-card-border: #334155;
-  }
-}
-
-@media (prefers-color-scheme: light) {
-  [data-theme="system"],
-  .osi-cards-container[data-theme="system"],
-  :root:not([data-theme]) {
-    --osi-card-background: #ffffff;
-    --osi-card-foreground: #1a1a2e;
-    --osi-card-muted: #64748b;
-    --osi-card-surface: #f8fafc;
-    --osi-card-accent: #6366f1;
-    --osi-card-accent-rgb: 99, 102, 241;
-    --osi-card-border: #e2e8f0;
-  }
-}
-
-// ============================================
-// Theme Transition System
-// ============================================
-
-// CSS Custom Properties for transition configuration
-// Support both global and container-scoped usage
-:root,
-.osi-cards-container {
-  --osi-theme-transition-duration: 200ms;
-  --osi-theme-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-// Properties that should transition during theme changes
-$theme-transition-properties: (
-  background-color,
-  background,
-  border-color,
-  color,
-  fill,
-  stroke,
-  box-shadow,
-  opacity
-);
-
-// Properties that should NOT transition (prevent layout shift)
-$theme-no-transition-properties: (
-  width,
-  height,
-  margin,
-  padding,
-  transform,
-  font-size,
-  line-height
-);
-
-// Transitioning class - applied during theme switch
-.theme-transitioning,
-[data-theme-transition="true"] {
-  // Apply transitions to all elements
-  *,
-  *::before,
-  *::after {
-    transition-property: #{$theme-transition-properties};
-    transition-duration: var(--osi-theme-transition-duration);
-    transition-timing-function: var(--osi-theme-transition-timing);
-  }
-
-  // Card-specific smoother transitions
-  .osi-card-container,
-  .ai-card-renderer,
-  .ai-section,
-  .masonry-item {
-    transition-duration: calc(var(--osi-theme-transition-duration) * 1.2);
-  }
-}
-
-// Respect reduced motion preference
-@media (prefers-reduced-motion: reduce) {
-  .theme-transitioning,
-  [data-theme-transition="true"] {
-    *,
-    *::before,
-    *::after {
-      transition-duration: 0ms !important;
-    }
-  }
-}
-
-// ============================================
-// Scoped Theme Container
-// ============================================
-
-.osi-scoped-theme {
-  // Inherit theme from data-theme attribute
-  // Container queries are progressive enhancement (Safari 16+)
-  @supports (container-type: inline-size) {
-    container-type: inline-size;
-  }
-
-  // Ensure CSS variables cascade properly
-  color: var(--osi-card-foreground);
-  background-color: var(--osi-card-background);
-}
-
-.osi-theme-container {
-  position: relative;
-  contain: layout style;
-  // Container queries are progressive enhancement (Safari 16+)
-  @supports (container-type: inline-size) {
-    container-type: inline-size;
-  }
-
-  // Reset background to theme
-  background-color: var(--osi-card-background);
-  color: var(--osi-card-foreground);
-}
-
-// ============================================
-// Theme Transition Utilities
-// ============================================
-
-// Instant transition (no animation)
-.theme-transition-none {
-  *,
-  *::before,
-  *::after {
-    transition: none !important;
-  }
-}
-
-// Fast transition
-.theme-transition-fast {
-  --osi-theme-transition-duration: 100ms;
-}
-
-// Slow transition
-.theme-transition-slow {
-  --osi-theme-transition-duration: 400ms;
-}
-
-// Smooth easing
-.theme-transition-smooth {
-  --osi-theme-transition-timing: cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-// ============================================
-// Color Scheme Indicator
-// ============================================
-
-// Visual indicator for current theme (useful for debugging)
-[data-theme]::before {
-  content: none; // Hidden by default
-}
-
-// Show theme indicator in debug mode
-[data-osi-debug="true"][data-theme]::before {
-  content: attr(data-theme);
-  position: fixed;
-  bottom: 8px;
-  right: 8px;
-  padding: 4px 8px;
-  font-size: 10px;
-  font-family: monospace;
-  background: var(--osi-card-surface);
-  color: var(--osi-card-muted);
-  border: 1px solid var(--osi-card-border);
-  border-radius: 4px;
-  z-index: 9999;
-  pointer-events: none;
-}
-
-// ============================================
-// Dark/Light Mode Specific Adjustments
-// ============================================
-
-// Enhanced readability for dark themes
-[data-theme="dark"],
-[data-theme="midnight"],
-[data-theme="ocean"],
-[data-theme="sunset"],
-.osi-cards-container[data-theme="dark"],
-.osi-cards-container[data-theme="midnight"],
-.osi-cards-container[data-theme="ocean"],
-.osi-cards-container[data-theme="sunset"] {
-  // Slightly increase font weight for better legibility on dark backgrounds
-  --osi-card-font-weight-normal: 400;
-  --osi-card-font-weight-medium: 500;
-
-  // Enhance link visibility
-  a:not([class]) {
-    color: var(--osi-card-accent);
-
-    &:hover {
-      color: var(--osi-card-accent-hover);
-    }
-  }
-}
-
-// Print mode - always use light theme
-@media print {
-  [data-theme],
-  .osi-cards-container[data-theme] {
-    --osi-card-background: #ffffff !important;
-    --osi-card-foreground: #000000 !important;
-    --osi-card-muted: #666666 !important;
-    --osi-card-border: #cccccc !important;
-    --osi-card-shadow: none !important;
-    --osi-card-shadow-md: none !important;
-    --osi-card-shadow-lg: none !important;
-  }
-}

package/styles/tokens/_index.scss

@@ -1,92 +0,0 @@
-// ============================================
-// TOKENS INDEX - Single Source of Truth
-// ============================================
-//
-// This file consolidates all design tokens for the OSI Cards library.
-// Import this file to access all tokens and mixins.
-//
-// Usage:
-//   @use 'osi-cards-lib/styles/tokens' as tokens;
-//
-//   :host {
-//     @include tokens.osi-tokens('integration', true);
-//     @include tokens.osi-theme-base('integration', true);
-//   }
-//
-// ============================================
-
-@forward "master";
-
-// ============================================
-// ISOLATED FONT STACK
-// ============================================
-//
-// System font stack that doesn't rely on external fonts.
-// This ensures consistent typography without host app interference.
-//
-
-$osi-font-stack-system:
-  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
-  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-
-$osi-font-stack-mono:
-  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
-
-// Helvetica-first stack for OSI Cards (matches existing)
-$osi-font-stack-primary:
-  Helvetica,
-  -apple-system,
-  BlinkMacSystemFont,
-  "Segoe UI",
-  Roboto,
-  Arial,
-  sans-serif;
-
-/// Apply isolated font stack
-/// @param {Boolean} $important - Whether to use !important
-@mixin osi-font-isolation($important: false) {
-  @if $important {
-    font-family: $osi-font-stack-primary !important;
-    -webkit-font-smoothing: antialiased !important;
-    -moz-osx-font-smoothing: grayscale !important;
-    text-rendering: optimizeLegibility !important;
-    font-feature-settings: "kern" 1 !important;
-  } @else {
-    font-family: $osi-font-stack-primary;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-rendering: optimizeLegibility;
-    font-feature-settings: "kern" 1;
-  }
-}
-
-/// Apply isolated container styles
-/// Creates a new stacking context and prevents style leakage
-@mixin osi-container-isolation() {
-  // Create new stacking context
-  isolation: isolate;
-
-  // Ensure box-sizing is correct
-  box-sizing: border-box;
-
-  // Apply font isolation
-  @include osi-font-isolation(true);
-
-  // Reset inherited styles that could leak from host
-  font-size: var(--font-size-base, 13px);
-  font-weight: var(--font-weight-normal, 400);
-  line-height: 1.5;
-  text-align: left;
-  color: var(--foreground, #1c1c1f);
-
-  // Preserve 3D transforms for tilt effects
-  perspective: 1200px;
-  transform-style: preserve-3d;
-
-  // Apply to all children
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-}