osi-cards-lib 1.5.30 → 1.5.32

package/styles/components/sections/_section-animations.scss

@@ -1,331 +0,0 @@
-// =====================================================================
-// SECTION ANIMATIONS - Unified Animation System
-// =====================================================================
-//
-// Consolidated animation system for all sections.
-// All hover effects use shadow/color changes only (no transforms).
-// Easy to maintain and consistent across all sections.
-//
-// =====================================================================
-
-@use "design-tokens" as *;
-
-// =====================================================================
-// STANDARD CARD HOVER EFFECT
-// =====================================================================
-//
-// Primary hover effect for section cards.
-// Uses shadow and color transitions only (no transforms).
-//
-
-@mixin section-card-hover {
-  transition:
-    box-shadow var(--duration-base) var(--ease-out),
-    background var(--duration-base) var(--ease-out),
-    border-color var(--duration-base) var(--ease-out);
-
-  &:hover {
-    box-shadow: var(--shadow-lg);
-    background: var(--osi-section-item-background-hover);
-    border-color: var(--osi-section-item-border-hover);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 2px;
-    box-shadow:
-      var(--shadow-lg),
-      0 0 0 4px rgba(var(--accent-rgb, 255, 121, 0), 0.1);
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-
-    &:hover {
-      box-shadow: var(--shadow-md);
-    }
-  }
-}
-
-// =====================================================================
-// ELEVATED CARD HOVER (Stronger Shadow)
-// =====================================================================
-//
-// For cards that need more prominent hover feedback.
-//
-
-@mixin section-card-hover-elevated {
-  transition:
-    box-shadow var(--duration-slow) var(--ease-out),
-    background var(--duration-slow) var(--ease-out),
-    border-color var(--duration-slow) var(--ease-out);
-
-  &:hover {
-    box-shadow: var(--shadow-xl);
-    background: var(--osi-section-item-background-hover);
-    border-color: var(--osi-section-item-border-hover);
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
-}
-
-// =====================================================================
-// SUBTLE CARD HOVER (Lighter Shadow)
-// =====================================================================
-//
-// For cards that need minimal hover feedback.
-//
-
-@mixin section-card-hover-subtle {
-  transition:
-    box-shadow var(--duration-base) var(--ease-out),
-    background var(--duration-base) var(--ease-out);
-
-  &:hover {
-    box-shadow: var(--shadow-md);
-    background: var(--osi-section-item-background-hover);
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
-}
-
-// =====================================================================
-// LIST ITEM HOVER
-// =====================================================================
-//
-// For list items - background and color changes only.
-//
-
-@mixin section-list-item-hover {
-  transition:
-    background var(--duration-base) var(--ease-out),
-    color var(--duration-base) var(--ease-out),
-    border-color var(--duration-base) var(--ease-out);
-
-  &:hover {
-    background: var(--surface-raised);
-    color: var(--foreground);
-    border-color: var(--border-strong);
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
-}
-
-// =====================================================================
-// INTERACTIVE SURFACE HOVER
-// =====================================================================
-//
-// For clickable surfaces - color transitions only.
-//
-
-@mixin section-interactive-hover {
-  transition:
-    background var(--duration-base) var(--ease-out),
-    color var(--duration-base) var(--ease-out),
-    border-color var(--duration-base) var(--ease-out);
-
-  &:hover {
-    background: color-mix(in srgb, var(--osi-section-item-background) 90%, var(--foreground) 10%);
-    color: var(--accent);
-  }
-
-  &:active {
-    background: color-mix(in srgb, var(--osi-section-item-background) 85%, var(--foreground) 15%);
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
-}
-
-// =====================================================================
-// GLOW HOVER EFFECT
-// =====================================================================
-//
-// Adds a subtle glow effect on hover using box-shadow.
-//
-
-@mixin section-glow-hover {
-  transition:
-    box-shadow var(--duration-slow) var(--ease-out),
-    border-color var(--duration-slow) var(--ease-out);
-
-  &:hover {
-    box-shadow:
-      var(--shadow-lg),
-      0 0 20px rgba(var(--accent-rgb, 255, 121, 0), 0.2);
-    border-color: var(--accent);
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
-}
-
-// =====================================================================
-// ACCENT LINE HOVER
-// =====================================================================
-//
-// Shows an accent line on hover (top border effect).
-//
-
-@mixin section-accent-line-hover {
-  position: relative;
-
-  &::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 2px;
-    background: linear-gradient(90deg, var(--accent) 0%, transparent 100%);
-    opacity: 0;
-    transition: opacity var(--duration-base) var(--ease-out);
-    border-radius: var(--osi-section-item-border-radius) var(--osi-section-item-border-radius) 0 0;
-  }
-
-  &:hover::before {
-    opacity: 0.8;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    &::before {
-      display: none;
-    }
-  }
-}
-
-// =====================================================================
-// ENTRANCE ANIMATIONS
-// =====================================================================
-//
-// Keyframe animations for section/item entrance.
-//
-
-@keyframes section-item-stream {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes section-fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes section-fade-in-up {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-// =====================================================================
-// STAGGER ANIMATION MIXINS
-// =====================================================================
-//
-// For animating lists of items with staggered delays.
-//
-
-@mixin section-item-animation {
-  &.section-item-streaming {
-    animation: section-item-stream var(--duration-base) var(--ease-out) forwards;
-  }
-
-  &.section-item-entered {
-    animation: none;
-  }
-
-  @for $i from 0 through 15 {
-    &.section-item-stagger-#{$i} {
-      animation-delay: calc(#{$i} * 30ms);
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    animation: none !important;
-  }
-}
-
-@mixin legacy-item-animation {
-  &.item-streaming {
-    animation: section-item-stream var(--duration-base) var(--ease-out) forwards;
-  }
-
-  &.item-entered {
-    animation: none;
-  }
-
-  @for $i from 0 through 15 {
-    &.item-stagger-#{$i} {
-      animation-delay: calc(#{$i} * 30ms);
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    animation: none !important;
-  }
-}
-
-@mixin legacy-field-animation {
-  &.field-streaming {
-    animation: section-item-stream var(--duration-base) var(--ease-out) forwards;
-  }
-
-  &.field-entered {
-    animation: none;
-  }
-
-  @for $i from 0 through 15 {
-    &.field-stagger-#{$i} {
-      animation-delay: calc(#{$i} * 30ms);
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    animation: none !important;
-  }
-}
-
-// =====================================================================
-// REDUCED MOTION SUPPORT
-// =====================================================================
-//
-// Global reduced motion rules for all section animations.
-//
-
-@media (prefers-reduced-motion: reduce) {
-  .unified-card,
-  .section-card,
-  [class*="__card"],
-  [class*="-card"],
-  [class*="__item"],
-  [class*="-item"],
-  .metric-card,
-  .list-item,
-  .analytics-card {
-    transition: none !important;
-    animation: none !important;
-
-    &:hover {
-      transform: none !important;
-    }
-  }
-}
-

package/styles/components/sections/_section-shell.scss

@@ -1,337 +0,0 @@
-/* Base AI section container styling shared across card sections */
-/* =========================================================== */
-/* Consistent spacing across ALL sections - GLOBALLY ENFORCED */
-@import "design-system";
-@import "../../core/color-helpers";
-
-.ai-section {
-  --section-accent: var(--osi-section-accent);
-  --section-border-hover: var(--osi-section-border-hover);
-  --section-background: var(--osi-section-background);
-  --section-background-hover: var(--osi-section-background-hover);
-  --section-backdrop-filter: var(--osi-section-backdrop-filter);
-  --section-spacing-bottom: var(--osi-section-spacing-bottom);
-  --section-glow-background: var(--osi-section-glow-background);
-  --section-glow-opacity-hover: var(--osi-section-glow-opacity-hover);
-  --section-title-underline-length: var(--osi-section-title-underline-length);
-  --section-title-underline-hover-length: var(--osi-section-title-underline-hover-length);
-  --section-title-underline-height: var(--osi-section-title-underline-height);
-  --section-title-underline-offset: var(--osi-section-title-underline-offset);
-  --section-title-hover-color: var(--osi-section-title-hover-color);
-  height: 100% !important;
-  margin-bottom: var(--section-spacing-bottom) !important;
-  -webkit-font-smoothing: antialiased !important;
-  -moz-osx-font-smoothing: grayscale !important;
-
-  /* Performance optimization: CSS containment (no paint to avoid clipping shadows/glow) */
-  contain: layout style;
-
-  * {
-    -webkit-font-smoothing: antialiased !important;
-    -moz-osx-font-smoothing: grayscale !important;
-  }
-
-  &:not(.masonry-item .ai-section) {
-    @include section-wrapper;
-  }
-
-  .masonry-item & {
-    display: flex !important;
-    flex-direction: column !important;
-    gap: var(--osi-section-gap) !important;
-  }
-}
-
-.ai-section--main {
-  --section-background: var(--osi-section-background-main);
-  --section-background-hover: var(--osi-section-background-main-hover);
-}
-
-.ai-section--contrast {
-  --section-background: var(--osi-section-background-contrast);
-  --section-background-hover: var(--osi-section-background-contrast-hover);
-}
-
-.ai-section__header {
-  @include section-header(column, var(--osi-section-header-gap));
-  flex-direction: column !important;
-  align-items: flex-start !important;
-  justify-content: flex-start !important;
-  padding: 0 0 var(--osi-section-header-padding-bottom) 0 !important;
-  border-bottom: none !important;
-  background: transparent !important;
-  margin: 0 !important;
-  flex-wrap: wrap !important;
-  gap: var(--osi-section-header-gap) !important;
-  text-align: left !important;
-}
-
-.ai-section__title {
-  @include section-heading-text;
-  font-size: var(--osi-section-title-font-size) !important;
-  font-weight: var(--osi-section-title-font-weight) !important;
-  letter-spacing: var(--osi-section-title-letter-spacing) !important;
-  line-height: var(--osi-section-title-line-height) !important;
-  color: var(--osi-section-title-color) !important;
-  opacity: 1 !important;
-  overflow: hidden !important;
-  text-overflow: ellipsis !important;
-  white-space: nowrap !important;
-  position: relative !important;
-  transition: var(--osi-section-title-transition) !important;
-  padding: 0 !important;
-  margin: 0 0 var(--osi-section-title-margin-bottom) 0 !important;
-  text-align: left !important;
-  font-family: inherit !important;
-  border: none !important;
-
-  &::before {
-    content: "" !important;
-    position: absolute !important;
-    left: 0 !important;
-    bottom: var(--osi-section-title-underline-offset) !important;
-    width: var(--osi-section-title-underline-length) !important;
-    height: var(--osi-section-title-underline-height) !important;
-    background: var(--osi-section-title-underline-color) !important;
-    border-radius: var(--radius-xs) !important;
-    transition:
-      width 0.22s ease,
-      opacity 0.22s ease !important;
-    transform-origin: left !important;
-    opacity: 0.6 !important;
-  }
-
-  &:hover {
-    color: var(--osi-section-title-color) !important;
-
-    &::before {
-      width: var(--osi-section-title-underline-hover-length) !important;
-      opacity: 1 !important;
-    }
-  }
-}
-
-.ai-section__icon {
-  display: none !important;
-  width: var(--icon-size-section) !important;
-  height: var(--icon-size-section) !important;
-}
-
-.ai-section__details {
-  display: flex !important;
-  flex-direction: column !important;
-  gap: var(--osi-section-header-gap) !important;
-  align-items: flex-start !important;
-  text-align: left !important;
-}
-
-.ai-section__description {
-  @include section-description-text;
-  color: var(--osi-section-description-color) !important;
-  letter-spacing: 0.01em !important;
-  line-height: 1.2 !important;
-  font-weight: 400 !important;
-  overflow: hidden !important;
-  text-overflow: ellipsis !important;
-  display: -webkit-box !important;
-  -webkit-line-clamp: 2 !important;
-  -webkit-box-orient: vertical !important;
-  margin-top: 0 !important;
-  padding-top: 0 !important;
-  text-align: left !important;
-  transition: var(--osi-section-description-transition) !important;
-  font-family: inherit !important;
-}
-
-.ai-section:hover .ai-section__description {
-  color: var(--osi-section-description-color-hover) !important;
-}
-
-.ai-section__badge {
-  @include standard-badge;
-  display: none !important;
-  padding: var(--tag-padding-y-sm) var(--tag-padding-x) !important;
-  border-radius: var(--radius-sm) !important;
-}
-
-/* Show badge for sections that need it */
-.ai-section--contact-card .ai-section__badge,
-.ai-section--solutions .ai-section__badge,
-.ai-section--event .ai-section__badge,
-.ai-section--chart .ai-section__badge,
-.ai-section--financials .ai-section__badge {
-  display: none !important;
-  align-items: center !important;
-  padding: var(--osi-section-badge-padding) !important;
-  background: var(--osi-section-badge-bg) !important;
-  color: var(--osi-section-badge-color) !important;
-  border: none !important;
-  box-shadow: none !important;
-  border-radius: var(--osi-section-border-radius) !important;
-  font-size: var(--card-meta-font-size, 0.6rem) !important;
-  font-weight: var(--card-meta-font-weight, 500) !important;
-  transition:
-    opacity 0.2s ease,
-    background 0.2s ease !important;
-  line-height: 1.2 !important;
-}
-
-.ai-section:hover .ai-section__badge {
-  opacity: 1 !important;
-  background: var(--osi-section-badge-bg-hover) !important;
-}
-
-.ai-section__body {
-  @include section-body(var(--osi-section-gap-internal));
-  padding: 0 !important;
-  margin: 0 !important;
-}
-
-/* Consistent empty state styling for all sections */
-.ai-section .section-empty {
-  display: flex !important;
-  flex-direction: column !important;
-  align-items: center !important;
-  justify-content: center !important;
-  padding: var(--osi-section-padding) !important;
-  text-align: center !important;
-  color: var(--muted-foreground) !important;
-  min-height: auto !important;
-  border-radius: var(--radius-md) !important;
-  background: var(--osi-section-empty-bg) !important;
-  border: var(--osi-section-empty-border) !important;
-  transition:
-    opacity 0.2s ease,
-    background 0.2s ease !important;
-
-  lucide-icon {
-    margin-bottom: var(--osi-section-gap) !important;
-    opacity: var(--osi-section-empty-icon-opacity) !important;
-    color: var(--accent) !important;
-    transition: all 0.2s ease !important;
-  }
-
-  p {
-    font-size: var(--font-section-description, 0.85rem) !important;
-    margin: 0 !important;
-    font-weight: 500 !important;
-    font-family: inherit !important;
-  }
-
-  &:hover {
-    background: var(--osi-section-empty-bg-hover) !important;
-    border-color: var(--osi-section-empty-border-hover) !important;
-
-    lucide-icon {
-      opacity: var(--osi-section-empty-icon-opacity-hover) !important;
-    }
-  }
-}
-
-/* Section type differentiation - subtle visual identities */
-.ai-section--info {
-  --section-accent: var(--osi-section-accent-info);
-}
-
-.ai-section--analytics {
-  --section-accent: var(--osi-section-accent-analytics);
-}
-
-.ai-section--financials {
-  --section-accent: var(--osi-section-accent-financials);
-}
-
-.ai-section--map {
-  --section-accent: var(--osi-section-accent-map);
-}
-
-.ai-section--network-card {
-  --section-accent: var(--osi-section-accent-network);
-}
-
-.ai-section--contact-card {
-  --section-accent: var(--osi-section-accent-contact);
-}
-
-.ai-section--product {
-  --section-accent: var(--osi-section-accent-product);
-}
-
-.ai-section--solutions {
-  --section-accent: var(--osi-section-accent-solutions);
-}
-
-.ai-section--overview {
-  --section-accent: var(--osi-section-accent-overview);
-}
-
-.ai-section--list,
-.ai-section--info-list {
-  --section-accent: var(--osi-section-accent-list);
-}
-
-.ai-section--event {
-  --section-accent: var(--osi-section-accent-event);
-}
-
-.ai-section--chart {
-  --section-accent: var(--osi-section-accent-chart);
-}
-
-.ai-section--text-reference {
-  --section-accent: var(--osi-section-accent-reference);
-}
-
-.ai-section--quotation {
-  --section-accent: var(--osi-section-accent-quotation);
-}
-
-/* Fullscreen mode - consistent padding using main variables */
-.ai-card-surface--fullscreen {
-  .ai-section {
-    --section-padding: var(--osi-section-padding);
-    --section-spacing-bottom: var(--osi-section-spacing-bottom);
-    --section-gap: var(--osi-section-gap);
-    --section-gap-internal: var(--osi-section-gap-internal);
-    --section-title-underline-length: var(--osi-section-title-underline-length);
-    --section-title-underline-hover-length: var(--osi-section-title-underline-hover-length);
-    --section-title-underline-height: var(--osi-section-title-underline-height);
-    --section-title-underline-offset: var(--osi-section-title-underline-offset);
-    --section-box-shadow: none !important;
-    --section-box-shadow-hover: none !important;
-  }
-
-  .masonry-item {
-    box-shadow: var(--osi-section-shadow-fullscreen) !important;
-
-    &:hover {
-      box-shadow: var(--osi-section-shadow-fullscreen) !important;
-    }
-  }
-
-  .ai-section__header {
-    padding: 0 0 var(--osi-section-header-padding-bottom) 0 !important;
-    gap: var(--osi-section-header-gap) !important;
-  }
-
-  .ai-section__title {
-    font-size: var(--card-title-font-size, 0.95rem) !important;
-  }
-
-  .ai-section__body {
-    gap: var(--osi-section-gap-internal) !important;
-  }
-
-  .ai-section__description {
-    font-size: var(--card-meta-font-size, 0.6rem) !important;
-    margin-top: 0 !important;
-    padding-top: 0 !important;
-  }
-}
-
-/* Theme overrides are handled automatically by theme system */
-/* No hardcoded colors needed - all sections use theme variables */
-/* Variables adapt based on theme selection (night/day/auto) */
-
-/* Theme system handles all light/dark variations automatically */
-/* All colors adapt through CSS variables defined in tokens/_master.scss */

package/styles/components/sections/_section-types.generated.scss

@@ -1,30 +0,0 @@
-// AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
-// Generated from section-registry.json
-// Run: npm run generate:from-registry
-//
-// Imports section SCSS files from their section folders.
-// Each section can inherit from design-system and add custom styles.
-
-// Section type styles - imported from section folders
-@import "../../../components/sections/analytics-section/analytics-section.scss"; // analytics
-@import "../../../components/sections/brand-colors-section/brand-colors-section.scss"; // brand-colors
-@import "../../../components/sections/chart-section/chart-section.scss"; // chart
-@import "../../../components/sections/contact-card-section/contact-card-section.scss"; // contact-card
-@import "../../../components/sections/event-section/event-section.scss"; // event
-@import "../../../components/sections/fallback-section/fallback-section.scss"; // fallback
-@import "../../../components/sections/faq-section/faq-section.scss"; // faq
-@import "../../../components/sections/financials-section/financials-section.scss"; // financials
-@import "../../../components/sections/gallery-section/gallery-section.scss"; // gallery
-@import "../../../components/sections/info-section/info-section.scss"; // info
-@import "../../../components/sections/list-section/list-section.scss"; // list
-@import "../../../components/sections/map-section/map-section.scss"; // map
-@import "../../../components/sections/network-card-section/network-card-section.scss"; // network-card
-@import "../../../components/sections/news-section/news-section.scss"; // news
-@import "../../../components/sections/overview-section/overview-section.scss"; // overview
-@import "../../../components/sections/product-section/product-section.scss"; // product
-@import "../../../components/sections/quotation-section/quotation-section.scss"; // quotation
-@import "../../../components/sections/social-media-section/social-media-section.scss"; // social-media
-@import "../../../components/sections/solutions-section/solutions-section.scss"; // solutions
-@import "../../../components/sections/text-reference-section/text-reference-section.scss"; // text-reference
-@import "../../../components/sections/timeline-section/timeline-section.scss"; // timeline
-@import "../../../components/sections/video-section/video-section.scss"; // video