osi-cards-lib 1.5.30 → 1.5.32

package/styles/components/sections/_design-tokens.scss

@@ -1,308 +0,0 @@
-// =====================================================================
-// ENHANCED DESIGN TOKENS
-// =====================================================================
-//
-// Comprehensive token system for consistent, scalable design.
-// All tokens use CSS variables for theme-ability and runtime changes.
-//
-// =====================================================================
-
-@use "../../tokens/master" as *;
-
-// =====================================================================
-// RESPONSIVE BREAKPOINTS
-// =====================================================================
-
-@mixin mobile {
-  @media (max-width: 480px) {
-    @content;
-  }
-}
-
-@mixin tablet {
-  @media (max-width: 768px) {
-    @content;
-  }
-}
-
-@mixin desktop {
-  @media (min-width: 1024px) {
-    @content;
-  }
-}
-
-// =====================================================================
-// SPACING SCALE (8px base)
-// =====================================================================
-
-$spacing-scale: (
-  "none": 0,
-  "xs": 4px,
-  "sm": 8px,
-  "md": 12px,
-  "base": 16px,
-  "lg": 24px,
-  "xl": 32px,
-  "2xl": 48px,
-  "3xl": 64px,
-) !default;
-
-@function spacing($key) {
-  @return map-get($spacing-scale, $key);
-}
-
-// Export as CSS variables - BALANCED: Compact but Comfortable
-:root {
-  --spacing-none: 0;
-  --spacing-xs: 4px; // Tight spacing
-  --spacing-sm: 8px; // Small spacing
-  --spacing-md: 12px; // Medium spacing (comfortable)
-  --spacing-base: 16px; // Base spacing
-  --spacing-lg: 20px; // Large spacing (comfortable)
-  --spacing-xl: 28px; // Extra large
-  --spacing-2xl: 40px; // 2XL
-  --spacing-3xl: 56px; // 3XL
-
-  // Compact mode variations (for denser layouts when needed)
-  --spacing-compact-xs: 3px;
-  --spacing-compact-sm: 6px;
-  --spacing-compact-md: 9px;
-  --spacing-compact-base: 12px;
-  --spacing-compact-lg: 16px;
-
-  // Section-specific sizing - BALANCED for good UX
-  --section-card-min-height: 110px; // Comfortable (was 120px, not 90px)
-  --section-card-compact-height: 90px; // Compact variant
-  --section-header-gap: var(--spacing-md); // 12px - comfortable readability
-  --section-content-gap: var(--spacing-sm); // 8px - good separation
-  --section-card-gap: var(--spacing-md); // 12px - visual breathing room
-  --section-card-padding: var(--spacing-md); // 12px - comfortable
-}
-
-// =====================================================================
-// TYPOGRAPHY SCALE
-// =====================================================================
-
-$font-sizes: (
-  "xs": 0.625rem,
-  // 10px (was 10.4px)
-  "sm": 0.7rem,
-  // 11.2px (was 12px)
-  "base": 0.8125rem,
-  // 13px (was 14px)
-  "md": 0.9375rem,
-  // 15px (was 16px)
-  "lg": 1.0625rem,
-  // 17px (was 18px)
-  "xl": 1.1875rem,
-  // 19px (was 20px)
-  "2xl": 1.375rem,
-  // 22px (was 24px)
-  "3xl": 1.75rem,
-  // 28px (was 30px)
-  "4xl": 2.125rem, // 34px (was 36px)
-) !default;
-
-$font-weights: (
-  "light": 300,
-  "normal": 400,
-  "medium": 500,
-  "semibold": 600,
-  "bold": 700,
-  "extrabold": 800,
-) !default;
-
-$line-heights: (
-  "tight": 1.25,
-  "snug": 1.375,
-  "normal": 1.5,
-  "relaxed": 1.625,
-  "loose": 2,
-) !default;
-
-:root {
-  // Font sizes - BALANCED: Compact but readable hierarchy
-  --text-xs: 0.6875rem; // 11px - Small labels, captions
-  --text-sm: 0.75rem; // 12px - Secondary text, metadata
-  --text-base: 0.8125rem; // 13px - Body text, item titles (H5)
-  --text-md: 0.875rem; // 14px - Emphasized text, small headers (H6)
-  --text-lg: 1.0625rem; // 17px - Sub-headers (H4)
-  --text-xl: 1.1875rem; // 19px - Section headers (H3)
-  --text-2xl: 1.375rem; // 22px - Page headers (H2)
-  --text-3xl: 1.625rem; // 26px - Large headers (H1)
-  --text-4xl: 2rem; // 32px - Hero text
-
-  // Font weights
-  --font-light: 300;
-  --font-normal: 400;
-  --font-medium: 500;
-  --font-semibold: 600;
-  --font-bold: 700;
-  --font-extrabold: 800;
-
-  // Line heights - COMPACT MODE (tighter)
-  --leading-tight: 1.2; // Was 1.25
-  --leading-snug: 1.3; // Was 1.375
-  --leading-normal: 1.4; // Was 1.5
-  --leading-relaxed: 1.5; // Was 1.625
-  --leading-loose: 1.75; // Was 2
-}
-
-// =====================================================================
-// BORDER RADIUS SCALE
-// =====================================================================
-
-:root {
-  --radius-none: 0;
-  --radius-xs: 2px;
-  --radius-sm: 3px; // Was 4px
-  --radius-md: 5px; // Was 6px
-  --radius-lg: 7px; // Was 8px
-  --radius-xl: 10px; // Was 12px
-  --radius-2xl: 14px; // Was 16px
-  --radius-full: 9999px;
-}
-
-// =====================================================================
-// SHADOWS (Layered, Subtle)
-// =====================================================================
-
-:root {
-  // Subtle shadows for cards
-  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
-  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
-  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
-  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
-  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-
-  // Inner shadows
-  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
-
-  // Glow effects
-  --glow-sm: 0 0 10px rgba(var(--accent-rgb), 0.15);
-  --glow-md: 0 0 20px rgba(var(--accent-rgb), 0.2);
-  --glow-lg: 0 0 30px rgba(var(--accent-rgb), 0.25);
-}
-
-// Dark mode shadows (stronger)
-@media (prefers-color-scheme: dark) {
-  :root {
-    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
-    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
-    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
-    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
-    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
-  }
-}
-
-// =====================================================================
-// TRANSITIONS & TIMING
-// =====================================================================
-
-:root {
-  // Durations
-  --duration-fast: 150ms;
-  --duration-base: 200ms;
-  --duration-slow: 300ms;
-  --duration-slower: 500ms;
-
-  // Timing functions
-  --ease-in: cubic-bezier(0.4, 0, 1, 1);
-  --ease-out: cubic-bezier(0, 0, 0.2, 1);
-  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
-  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-  --ease-smooth: cubic-bezier(0.4, 0, 0.6, 1);
-
-  // Composite transitions
-  --transition-base: all var(--duration-base) var(--ease-out);
-  --transition-fast: all var(--duration-fast) var(--ease-out);
-  --transition-slow: all var(--duration-slow) var(--ease-out);
-  --transition-colors:
-    background-color var(--duration-base) var(--ease-out),
-    border-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
-  --transition-shadow: box-shadow var(--duration-base) var(--ease-out);
-  --transition-transform: transform var(--duration-base) var(--ease-out);
-}
-
-// =====================================================================
-// Z-INDEX SCALE
-// =====================================================================
-
-:root {
-  --z-base: 1;
-  --z-dropdown: 100;
-  --z-sticky: 200;
-  --z-fixed: 300;
-  --z-modal-backdrop: 400;
-  --z-modal: 500;
-  --z-popover: 600;
-  --z-tooltip: 700;
-  --z-toast: 800;
-  --z-max: 9999;
-}
-
-// =====================================================================
-// BLUR & BACKDROP EFFECTS
-// =====================================================================
-
-:root {
-  --blur-none: 0;
-  --blur-sm: 4px;
-  --blur-md: 8px;
-  --blur-lg: 16px;
-  --blur-xl: 24px;
-
-  // Glass morphism
-  --glass-bg: rgba(255, 255, 255, 0.7);
-  --glass-border: rgba(255, 255, 255, 0.2);
-  --glass-blur: var(--blur-md);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --glass-bg: rgba(0, 0, 0, 0.4);
-    --glass-border: rgba(255, 255, 255, 0.1);
-  }
-}
-
-// =====================================================================
-// OPACITY SCALE
-// =====================================================================
-
-:root {
-  --opacity-0: 0;
-  --opacity-5: 0.05;
-  --opacity-10: 0.1;
-  --opacity-20: 0.2;
-  --opacity-30: 0.3;
-  --opacity-40: 0.4;
-  --opacity-50: 0.5;
-  --opacity-60: 0.6;
-  --opacity-70: 0.7;
-  --opacity-80: 0.8;
-  --opacity-90: 0.9;
-  --opacity-100: 1;
-}
-
-// =====================================================================
-// ENHANCED COLOR UTILITIES
-// =====================================================================
-
-:root {
-  // Surface colors
-  --surface-base: var(--osi-section-item-background);
-  --surface-raised: var(--osi-section-item-background-hover);
-  --surface-overlay: var(--glass-bg);
-
-  // Border colors
-  --border-light: rgba(var(--foreground-rgb), 0.08);
-  --border-base: var(--border);
-  --border-strong: rgba(var(--foreground-rgb), 0.2);
-
-  // Interactive states
-  --state-hover-opacity: 0.08;
-  --state-active-opacity: 0.12;
-  --state-focus-opacity: 0.16;
-  --state-disabled-opacity: 0.5;
-}

package/styles/components/sections/_enhanced-design-variables.scss

@@ -1,147 +0,0 @@
-// =====================================================================
-// ENHANCED DESIGN VARIABLES - Flexible & Customizable
-// =====================================================================
-// More design variables for greater control and beautiful sections
-
-@use "design-tokens" as *;
-
-// ═══════════════════════════════════════════════════════════════════
-// ENHANCED SPACING - Balanced (Not Too Cramped)
-// ═══════════════════════════════════════════════════════════════════
-
-:root {
-  // Card/Item padding (comfortable, not cramped)
-  --osi-card-padding-comfortable: var(--space-3); // Balanced
-  --osi-card-padding-compact: var(--space-2); // Slightly tight
-  --osi-card-padding-dense: var(--space-2); // Dense
-
-  // Grid gaps (visual breathing room)
-  --osi-grid-gap-comfortable: var(--space-3); // Good visual separation
-  --osi-grid-gap-compact: var(--space-2); // Less separation
-  --osi-grid-gap-dense: var(--gap-md); // Tight
-
-  // Item gaps (within cards)
-  --osi-item-internal-gap: var(--gap-md); // Between elements in card
-  --osi-item-compact-gap: var(--gap-sm); // Compact
-
-  // Section gaps
-  --osi-section-gap-comfortable: var(--space-4); // Between major sections
-  --osi-section-gap-compact: var(--space-2); // Compact
-
-  // Defaults (comfortable for readability)
-  --osi-default-card-padding: var(--osi-card-padding-comfortable);
-  --osi-default-grid-gap: var(--osi-grid-gap-comfortable);
-  --osi-default-item-gap: var(--osi-item-internal-gap);
-}
-
-// ═══════════════════════════════════════════════════════════════════
-// TYPOGRAPHY VARIABLES - More Hierarchy Control
-// ═══════════════════════════════════════════════════════════════════
-
-:root {
-  // Section-level typography
-  --osi-section-title-size: var(--text-xl); // 19px
-  --osi-section-title-weight: var(--font-bold); // 700
-  --osi-section-title-line-height: var(--leading-tight);
-
-  --osi-section-description-size: var(--text-sm); // 12px
-  --osi-section-description-weight: var(--font-normal);
-  --osi-section-description-line-height: var(--leading-relaxed);
-
-  // Item-level typography
-  --osi-item-title-size: var(--text-base); // 13px
-  --osi-item-title-weight: var(--font-semibold); // 600
-  --osi-item-title-line-height: var(--leading-snug);
-
-  --osi-item-label-size: var(--text-xs); // 11px
-  --osi-item-label-weight: var(--font-medium); // 500
-  --osi-item-label-line-height: var(--leading-tight);
-
-  --osi-item-value-size: var(--text-md); // 14px
-  --osi-item-value-weight: var(--font-semibold); // 600
-  --osi-item-value-line-height: var(--leading-normal);
-
-  // Metric/Number displays
-  --osi-metric-value-size: var(--text-2xl); // 22px
-  --osi-metric-value-weight: var(--font-bold); // 700
-  --osi-metric-label-size: var(--text-xs); // 11px
-}
-
-// ═══════════════════════════════════════════════════════════════════
-// VISUAL EFFECTS VARIABLES - Depth & Polish
-// ═══════════════════════════════════════════════════════════════════
-
-:root {
-  // Hover transforms
-  --osi-hover-lift: calc(var(--motion-distance-sm) * -1); // Lift on hover
-  --osi-hover-slide: var(--motion-distance-lg); // Slide on hover
-  --osi-hover-scale: var(--motion-scale-soft-end); // Scale on hover
-
-  // Shadow depths
-  --osi-card-shadow-rest: var(--shadow-sm);
-  --osi-card-shadow-hover: var(--shadow-md);
-  --osi-card-shadow-active: var(--shadow-xs);
-
-  // Border thickness
-  --osi-border-thin: var(--border-width-default);
-  --osi-border-medium: var(--border-width-accent-sm);
-  --osi-border-thick: var(--border-width-accent);
-
-  // Transition speeds
-  --osi-transition-fast: var(--duration-fast);
-  --osi-transition-normal: var(--duration-normal);
-  --osi-transition-slow: var(--duration-slow);
-
-  // Background overlays (for effects)
-  --osi-overlay-subtle: #{$white-05};
-  --osi-overlay-medium: #{$white-10};
-  --osi-overlay-strong: #{$white-15};
-}
-
-// ═══════════════════════════════════════════════════════════════════
-// CARD APPEARANCE VARIABLES - Easy Customization
-// ═══════════════════════════════════════════════════════════════════
-
-:root {
-  // Card backgrounds
-  --osi-card-background: var(--surface);
-  --osi-card-background-hover: var(--surface-raised);
-
-  // Card borders
-  --osi-card-border-color: var(--border);
-  --osi-card-border-width: var(--osi-border-thin);
-  --osi-card-border-radius: var(--radius-md);
-
-  // Accent elements
-  --osi-accent-border-width: var(--border-width-accent);
-  --osi-accent-line-thickness: var(--border-width-accent-sm);
-}
-
-// ═══════════════════════════════════════════════════════════════════
-// GRID CUSTOMIZATION VARIABLES
-// ═══════════════════════════════════════════════════════════════════
-
-:root {
-  // Min widths for different card sizes
-  --osi-grid-min-tiny: 100px; // Very small cards
-  --osi-grid-min-small: 140px; // Analytics, metrics
-  --osi-grid-min-medium: 200px; // Contacts, products
-  --osi-grid-min-large: 280px; // Gallery, news
-
-  // Card heights
-  --osi-card-height-small: 100px; // Metrics
-  --osi-card-height-medium: 140px; // Standard cards
-  --osi-card-height-large: 200px; // Featured cards
-}
-
-// ═══════════════════════════════════════════════════════════════════
-// SECTION-SPECIFIC CUSTOMIZATION (Override as needed)
-// ═══════════════════════════════════════════════════════════════════
-
-// Allow sections to override these
-:root {
-  --osi-custom-accent-color: var(--accent);
-  --osi-custom-card-background: var(--osi-card-background);
-  --osi-custom-hover-effect: translateY(calc(var(--motion-distance-sm) * -1));
-  --osi-custom-border-style: solid;
-}