osi-cards-lib 1.5.30 → 1.5.32

package/styles/core/_mixins.scss

@@ -1,491 +0,0 @@
-/* ===================================================================
-   SHARED STYLING MIXINS FOR OSI CARDS
-   =================================================================== */
-
-/* ===================================================================
-   IMPORTANT FLAG SYSTEM
-   Controls whether !important is applied for Bootstrap/Boosted overrides.
-
-   Usage:
-   - In scoped/standalone styles: $osi-use-important: true (default)
-   - In demo app styles: $osi-use-important: false
-   =================================================================== */
-
-// Global flag - set to false in demo app entry point to disable !important
-$osi-use-important: true !default;
-
-/// Apply a property with conditional !important
-/// @param {String} $property - CSS property name
-/// @param {*} $value - Property value
-@mixin important-prop($property, $value) {
-  @if $osi-use-important {
-    #{$property}: #{$value} !important;
-  } @else {
-    #{$property}: #{$value};
-  }
-}
-
-/// Apply display property with conditional !important
-@mixin display($value) {
-  @include important-prop("display", $value);
-}
-
-/// Apply width property with conditional !important
-@mixin width($value) {
-  @include important-prop("width", $value);
-}
-
-/// Apply grid-template-columns with conditional !important
-@mixin grid-columns($value) {
-  @include important-prop("grid-template-columns", $value);
-}
-
-/// Apply gap property with conditional !important
-@mixin gap($value) {
-  @include important-prop("gap", $value);
-}
-
-/// Apply flex-direction with conditional !important
-@mixin flex-direction($value) {
-  @include important-prop("flex-direction", $value);
-}
-
-/// Apply box-sizing with conditional !important
-@mixin box-sizing($value) {
-  @include important-prop("box-sizing", $value);
-}
-
-/// Apply min-height with conditional !important
-@mixin min-height($value) {
-  @include important-prop("min-height", $value);
-}
-
-/* Glass panel effect for cards and modals */
-@mixin glass-panel(
-  $padding: 1.5rem,
-  $border-color: rgba(255, 255, 255, 0.08),
-  $background-start: rgba(16, 16, 24, 0.86),
-  $background-end: rgba(10, 10, 18, 0.92),
-  $shadow: 0 28px 70px rgba(0, 0, 0, 0.5)
-) {
-  position: relative;
-  border-radius: 22px;
-  border: 1px solid $border-color;
-  background: color-mix(in srgb, $background-start 50%, $background-end 50%);
-  box-shadow: $shadow;
-  -webkit-backdrop-filter: blur(18px);
-  backdrop-filter: blur(18px);
-  padding: $padding;
-}
-
-/* Shimmer overlay effect */
-@mixin shimmer-overlay($border-radius: 20px, $start-opacity: 0.08, $end-opacity: 0) {
-  content: "";
-  position: absolute;
-  inset: 1px;
-  border-radius: $border-radius;
-  background: rgba(255, 255, 255, $start-opacity);
-  pointer-events: none;
-}
-
-/* ===================================================================
-   ANIMATION & TRANSITION MIXINS
-   Performance-optimized with design system variables
-   =================================================================== */
-
-/* Standard smooth transition for all properties */
-@mixin smooth-transition($duration: var(--duration-normal)) {
-  transition: all $duration var(--ease-out-smooth);
-
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
-}
-
-/* Transform-only transition (best performance) */
-@mixin transition-transform($duration: var(--duration-normal)) {
-  transition: transform $duration var(--ease-out-smooth);
-
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
-}
-
-/* Opacity transition */
-@mixin transition-opacity($duration: var(--duration-normal)) {
-  transition: opacity $duration var(--ease-out-smooth);
-
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
-}
-
-/* Multiple property transition */
-@mixin transition-properties(
-  $properties,
-  $duration: var(--duration-normal),
-  $easing: var(--ease-out-smooth)
-) {
-  $transition-list: ();
-
-  @each $property in $properties {
-    $transition-list: append($transition-list, #{$property} $duration $easing, comma);
-  }
-
-  transition: $transition-list;
-
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
-}
-
-/* Card interaction transitions - standard for all cards */
-@mixin card-transition() {
-  transition:
-    transform var(--card-hover-duration) var(--ease-out-smooth),
-    border-color var(--card-hover-duration) var(--ease-out-smooth),
-    background var(--card-hover-duration) var(--ease-out-smooth),
-    box-shadow var(--card-hover-duration) var(--ease-out-smooth);
-
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
-}
-
-/* Hardware acceleration hint */
-@mixin gpu-accelerated() {
-  transform: translateZ(0);
-  backface-visibility: hidden;
-  perspective: 1000px;
-}
-
-/* Will-change optimization (use sparingly) */
-@mixin will-change-transform() {
-  will-change: transform;
-
-  &:not(:hover):not(:focus):not(:active) {
-    will-change: auto;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    will-change: auto;
-  }
-}
-
-/* Hover lift effect - DISABLED: Cards should not move vertically */
-@mixin hover-lift($distance: 0px) {
-  @include transition-transform();
-
-  &:hover {
-    /* No vertical movement, only GPU acceleration */
-    transform: translateZ(0);
-
-    @media (prefers-reduced-motion: reduce) {
-      transform: none;
-    }
-  }
-}
-
-/* Hover scale effect */
-@mixin hover-scale($scale: 1.05) {
-  @include transition-transform();
-
-  &:hover {
-    transform: scale($scale) translateZ(0);
-
-    @media (prefers-reduced-motion: reduce) {
-      transform: none;
-    }
-  }
-}
-
-/* ===================================================================
-   TYPOGRAPHY MIXINS
-   Unified typography patterns for consistent text styling
-   =================================================================== */
-
-/// Label text - used for field names, categories, tags
-/// @example @include osi-text('label');
-@mixin osi-text-label {
-  @include important-prop("font-size", var(--card-label-font-size, 0.5rem));
-  @include important-prop("font-weight", var(--card-label-font-weight, 700));
-  @include important-prop("letter-spacing", var(--card-label-letter-spacing, 0.065em));
-  @include important-prop("text-transform", var(--card-label-text-transform, uppercase));
-  @include important-prop("color", var(--card-text-label, inherit));
-  @include important-prop("line-height", var(--card-label-line-height, 1.25));
-  @include important-prop("text-align", left);
-  @include important-prop("font-family", inherit);
-}
-
-/// Value text - used for field values, data points
-@mixin osi-text-value {
-  @include important-prop("font-size", var(--card-value-font-size, 1rem));
-  @include important-prop("font-weight", var(--card-value-font-weight, 600));
-  @include important-prop("color", var(--card-text-primary, inherit));
-  @include important-prop("letter-spacing", var(--card-value-letter-spacing, -0.015em));
-  @include important-prop("line-height", var(--card-value-line-height, 1.35));
-  @include important-prop("text-align", left);
-  @include important-prop("font-family", inherit);
-}
-
-/// Large value text - for emphasized stats, metrics
-@mixin osi-text-value-lg {
-  @include important-prop("font-size", var(--card-value-font-size-large, 1.2rem));
-  @include important-prop("font-weight", var(--card-value-font-weight, 600));
-  @include important-prop("color", var(--card-text-primary, inherit));
-  @include important-prop("letter-spacing", var(--card-value-letter-spacing, -0.015em));
-  @include important-prop("line-height", var(--card-value-line-height, 1.35));
-  @include important-prop("text-align", left);
-  @include important-prop("font-family", inherit);
-}
-
-/// Title text - used for card titles, headings within cards
-@mixin osi-text-title {
-  @include important-prop("font-size", var(--card-title-font-size, 0.95rem));
-  @include important-prop("font-weight", var(--card-title-font-weight, 700));
-  @include important-prop("color", var(--card-text-primary, inherit));
-  @include important-prop("letter-spacing", var(--card-title-letter-spacing, -0.01em));
-  @include important-prop("line-height", var(--card-title-line-height, 1.4));
-  @include important-prop("text-align", left);
-  @include important-prop("font-family", inherit);
-}
-
-/// Subtitle text - used for secondary headings, roles
-@mixin osi-text-subtitle {
-  @include important-prop("font-size", var(--card-subtitle-font-size, 0.7rem));
-  @include important-prop("font-weight", var(--card-subtitle-font-weight, 500));
-  @include important-prop("color", var(--card-text-secondary, inherit));
-  @include important-prop("letter-spacing", var(--card-subtitle-letter-spacing, 0.015em));
-  @include important-prop("line-height", var(--card-subtitle-line-height, 1.3));
-  @include important-prop("text-align", left);
-  @include important-prop("font-family", inherit);
-}
-
-/// Meta text - used for timestamps, small descriptions
-@mixin osi-text-meta {
-  @include important-prop("font-size", var(--card-meta-font-size, 0.6rem));
-  @include important-prop("font-weight", var(--card-meta-font-weight, 500));
-  @include important-prop("color", var(--card-text-muted, inherit));
-  @include important-prop("line-height", var(--card-meta-line-height, 1.3));
-  @include important-prop("text-align", left);
-  @include important-prop("font-family", inherit);
-}
-
-/// Unified text mixin with variant selector
-/// @param {String} $variant - label, value, value-lg, title, subtitle, meta
-@mixin osi-text($variant) {
-  @if $variant == "label" {
-    @include osi-text-label;
-  } @else if $variant == "value" {
-    @include osi-text-value;
-  } @else if $variant == "value-lg" {
-    @include osi-text-value-lg;
-  } @else if $variant == "title" {
-    @include osi-text-title;
-  } @else if $variant == "subtitle" {
-    @include osi-text-subtitle;
-  } @else if $variant == "meta" {
-    @include osi-text-meta;
-  }
-}
-
-/* ===================================================================
-   GRID MIXINS
-   Unified grid patterns for consistent layouts
-   =================================================================== */
-
-/// Responsive auto-fit grid
-/// @param {Length} $min-width - Minimum column width
-/// @param {Length} $gap - Gap between items
-@mixin osi-grid(
-  $min-width: var(--section-grid-min-width, 200px),
-  $gap: var(--section-card-gap, 12px)
-) {
-  @include display(grid);
-  @include grid-columns(repeat(auto-fit, minmax($min-width, 1fr)));
-  @include gap($gap);
-  @include width(100%);
-  @include min-height(0);
-  @include box-sizing(border-box);
-
-  @media (max-width: 420px) {
-    @include grid-columns(1fr);
-  }
-}
-
-/// Flex column stack for vertical lists
-/// @param {Length} $gap - Gap between items
-@mixin osi-stack($gap: var(--section-stack-gap, 12px)) {
-  @include display(flex);
-  @include flex-direction(column);
-  @include gap($gap);
-  @include width(100%);
-  @include box-sizing(border-box);
-}
-
-/// Fixed column grid
-/// @param {Number} $columns - Number of columns
-/// @param {Length} $gap - Gap between items
-@mixin osi-grid-fixed($columns: 2, $gap: var(--section-card-gap, 12px)) {
-  @include display(grid);
-  @include grid-columns(repeat($columns, 1fr));
-  @include gap($gap);
-  @include width(100%);
-  @include box-sizing(border-box);
-}
-
-/* ===================================================================
-   STAGGER ANIMATION MIXINS
-   Reusable patterns for staggered animations
-   =================================================================== */
-
-/// Apply staggered animation delays to child elements
-/// @param {Number} $count - Number of children to stagger
-/// @param {Time} $base-delay - Base delay between items (default: 0.08s)
-/// @param {String} $selector - Child selector (default: '&')
-/// @param {String} $property - CSS property to delay (default: animation-delay)
-@mixin stagger-animation(
-  $count: 10,
-  $base-delay: 0.08s,
-  $selector: "&",
-  $property: animation-delay
-) {
-  @for $i from 1 through $count {
-    #{$selector}:nth-child(#{$i}) {
-      #{$property}: #{$i * $base-delay};
-    }
-  }
-}
-
-/// Apply staggered transition delays to child elements
-/// @param {Number} $count - Number of children to stagger
-/// @param {Time} $base-delay - Base delay between items (default: 0.05s)
-/// @param {String} $selector - Child selector (default: '&')
-@mixin stagger-transition($count: 10, $base-delay: 0.05s, $selector: "&") {
-  @include stagger-animation($count, $base-delay, $selector, transition-delay);
-}
-
-/// Apply staggered entrance animation with fade-in-up
-/// @param {Number} $count - Number of children to stagger
-/// @param {Time} $base-delay - Base delay between items (default: 0.08s)
-/// @param {Time} $duration - Animation duration (default: 0.6s)
-@mixin stagger-entrance($count: 10, $base-delay: 0.08s, $duration: 0.6s) {
-  animation: fadeInUp $duration ease-out backwards;
-
-  @for $i from 1 through $count {
-    &:nth-child(#{$i}) {
-      animation-delay: #{$i * $base-delay};
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    animation: none;
-  }
-}
-
-/* ===================================================================
-   BRAND GRADIENT MIXINS
-   Consistent gradient patterns for brand styling
-   =================================================================== */
-
-/// Brand radial gradient background
-/// @param {Number} $opacity - Opacity of the gradient (default: 0.1)
-/// @param {String} $position - Gradient position (default: center)
-@mixin brand-gradient-bg($opacity: 0.1, $position: center) {
-  background: radial-gradient(
-    circle at $position,
-    color-mix(in srgb, var(--color-brand, #ff7900) #{$opacity * 100}%, transparent) 0%,
-    transparent 70%
-  );
-}
-
-/// Brand linear gradient background
-/// @param {Angle} $angle - Gradient angle (default: 135deg)
-/// @param {Number} $start-opacity - Start opacity (default: 0.15)
-/// @param {Number} $end-opacity - End opacity (default: 0.05)
-@mixin brand-gradient-linear($angle: 135deg, $start-opacity: 0.15, $end-opacity: 0.05) {
-  background: linear-gradient(
-    $angle,
-    color-mix(in srgb, var(--color-brand, #ff7900) #{$start-opacity * 100}%, transparent) 0%,
-    color-mix(in srgb, var(--color-brand, #ff7900) #{$end-opacity * 100}%, transparent) 100%
-  );
-}
-
-/// Brand gradient text effect
-/// Creates a shimmering gradient text effect
-@mixin brand-gradient-text() {
-  background: linear-gradient(
-    90deg,
-    var(--foreground, #ffffff) 0%,
-    var(--color-brand, #ff7900) 50%,
-    var(--foreground, #ffffff) 100%
-  );
-  background-size: 200% 100%;
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-
-  @media (prefers-reduced-motion: reduce) {
-    background: none;
-    -webkit-text-fill-color: currentColor;
-  }
-}
-
-/// Brand gradient text with animation
-/// @param {Time} $duration - Animation duration (default: 2s)
-@mixin brand-gradient-text-animated($duration: 2s) {
-  @include brand-gradient-text();
-  animation: textShimmer $duration ease-in-out infinite;
-
-  @media (prefers-reduced-motion: reduce) {
-    animation: none;
-    background: none;
-    -webkit-text-fill-color: currentColor;
-  }
-}
-
-/// Glow effect mixin
-/// @param {Color} $color - Glow color (default: brand color)
-/// @param {Length} $blur - Blur radius (default: 20px)
-/// @param {Number} $opacity - Opacity (default: 0.4)
-@mixin glow-effect($color: var(--color-brand, #ff7900), $blur: 20px, $opacity: 0.4) {
-  box-shadow: 0 0 $blur color-mix(in srgb, $color #{$opacity * 100}%, transparent);
-}
-
-/// Glow effect on hover
-/// @param {Color} $color - Glow color (default: brand color)
-/// @param {Length} $blur - Blur radius (default: 25px)
-/// @param {Number} $opacity - Opacity (default: 0.5)
-@mixin glow-effect-hover($color: var(--color-brand, #ff7900), $blur: 25px, $opacity: 0.5) {
-  transition: box-shadow var(--duration-normal, 200ms) var(--ease-out-smooth, ease-out);
-
-  &:hover {
-    @include glow-effect($color, $blur, $opacity);
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
-}
-
-/* ===================================================================
-   BACKDROP BLUR MIXINS
-   Glass-morphism effect mixins
-   =================================================================== */
-
-/// Apply backdrop blur with vendor prefix
-/// @param {Length} $blur - Blur amount (default: 12px)
-@mixin backdrop-blur($blur: 12px) {
-  backdrop-filter: blur($blur);
-  -webkit-backdrop-filter: blur($blur);
-}
-
-/// Glass panel effect
-/// @param {Length} $blur - Blur amount (default: 12px)
-/// @param {Number} $opacity - Background opacity (default: 0.8)
-/// @param {Color} $bg-color - Background color (default: var(--background))
-@mixin glass-effect($blur: 12px, $opacity: 0.8, $bg-color: var(--background, #0c0c0c)) {
-  background: color-mix(in srgb, $bg-color #{$opacity * 100}%, transparent);
-  @include backdrop-blur($blur);
-  border: 1px solid color-mix(in srgb, var(--border, rgba(255, 255, 255, 0.1)) 50%, transparent);
-}

package/styles/core/_surface-layers.scss

@@ -1,76 +0,0 @@
-/* -------------------------------------------------------------------------- */
-/* Surface Layer Mixins                                                       */
-/* -------------------------------------------------------------------------- */
-/*
- * Centralized mixins for the three visual layers in the card stack:
- * 1. Hero AI card shell (.ai-card-surface)
- * 2. Section containers (.masonry-item)
- * 3. Section items (cards rendered inside sections)
- *
- * Each mixin relies exclusively on CSS custom properties declared in
- * core/_variables.scss so that switching providers or day/night themes only
- * requires token tweaks rather than touching component styles.
- */
-
-/* AI card (hero shell) ----------------------------------------------------- */
-@mixin surface-ai-card-base {
-  border: var(--ai-card-border, 1px solid rgba(255, 121, 0, 0.12)) !important;
-  border-width: 1px !important;
-  border-style: solid !important;
-  border-radius: var(--ai-card-border-radius) !important;
-  background: var(--section-item-background) !important;
-  box-shadow: var(--ai-card-box-shadow, none) !important;
-  transition: var(--ai-card-transition, none) !important;
-  animation: var(--ai-card-entrance-animation, none);
-  will-change: opacity, transform;
-}
-
-@mixin surface-ai-card-hover {
-  border-color: var(--ai-card-border-hover, rgba(255, 121, 0, 0.2)) !important;
-  background: var(--section-item-background-hover, var(--section-item-background)) !important;
-  box-shadow: var(--ai-card-box-shadow-hover, var(--ai-card-box-shadow, none)) !important;
-}
-
-/* Section container (masonry item) ---------------------------------------- */
-@mixin surface-section-base {
-  border: var(--section-border) !important;
-  border-radius: var(--section-border-radius) !important;
-  background: var(--section-surface, var(--section-background, var(--card-section-bg))) !important;
-  box-shadow: var(--section-box-shadow) !important;
-  transition: var(--section-transition, none) !important;
-  animation: var(--section-entrance-animation, none);
-  will-change: opacity, transform;
-}
-
-@mixin surface-section-hover {
-  /* Use hover background variable - flat color with theme border */
-  background: var(
-    --section-surface-hover,
-    var(--section-background-hover, var(--section-surface))
-  ) !important;
-  border-color: var(--section-border-hover, var(--section-border)) !important;
-  box-shadow: var(--section-box-shadow-hover, var(--section-box-shadow)) !important;
-}
-
-/* Section items (cards rendered inside sections) --------------------------- */
-@mixin surface-section-item-base {
-  padding: var(--section-item-padding) !important;
-  border: var(--section-item-border) !important;
-  border-width: 1px !important;
-  border-style: solid !important;
-  border-radius: var(--section-item-border-radius) !important;
-  background: var(--section-item-background) !important;
-  box-shadow: var(--section-item-box-shadow) !important;
-  gap: var(--card-gap) !important;
-  min-height: var(--card-min-height) !important;
-  transition: var(--section-item-transition) !important;
-  animation: var(--section-item-entrance-animation, none);
-  will-change: opacity, transform;
-}
-
-@mixin surface-section-item-hover {
-  /* Use hover background variable - flat color with theme border */
-  background: var(--section-item-background-hover, var(--section-item-background)) !important;
-  border-color: var(--section-item-border-hover, var(--section-item-border)) !important;
-  box-shadow: var(--section-item-box-shadow-hover) !important;
-}