osi-cards-lib 1.5.42 → 1.5.43

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

@@ -23,7 +23,7 @@
 @use "compact-mixins" as compact;
 
 // Import base styles (legacy compatibility)
-@import "sections-base";
+@use "sections-base" as *;
 
 // =====================================================================
 // GRID LAYOUTS
@@ -71,7 +71,7 @@
 
 // Section heading text
 @mixin section-heading-text {
-  font-size: var(--section-title-font-size, 1.1rem);
+  font-size: var(--section-title-font-size, 0.9375rem); // 15px (reduced from 17.6px by 2px)
   font-weight: var(--section-title-font-weight, 700);
   letter-spacing: var(--section-title-letter-spacing, -0.02em);
   line-height: var(--section-title-line-height, 1.3);
@@ -81,10 +81,10 @@
 
 // Section description text
 @mixin section-description-text {
-  font-size: var(--section-description-font-size, calc(0.8rem - 1px));
+  font-size: var(--section-description-font-size, 0.75rem);
   font-weight: 400;
   color: var(--card-text-secondary, #{$foreground-60});
-  line-height: 1.4;
+  line-height: 1.3; // Reduced from 1.4 for tighter spacing
   margin: 0;
 }
 
@@ -182,15 +182,16 @@
   font-size: var(--card-title-font-size);
   font-weight: 600;
   color: var(--foreground);
-  line-height: 1.4;
+  line-height: 1.3; // Reduced from 1.4 for tighter spacing
   font-family: inherit;
+  margin-bottom: 0.05em; // Reduced gap between title and content
 }
 
 @mixin card-subtitle-text {
   font-size: var(--card-subtitle-font-size);
   font-weight: 400;
   color: var(--muted-foreground);
-  line-height: 1.5;
+  line-height: 1.3; // Reduced from 1.5 for tighter spacing
   font-family: inherit;
 }
 
@@ -216,11 +217,29 @@
   display: flex;
   flex-direction: column;
   gap: var(--section-card-gap);
-  padding: var(--section-padding);
+  padding: 0 !important; // No padding - sections should use 100% width
   border-radius: var(--osi-section-item-border-radius);
   background: var(--section-background);
   border: var(--section-border);
   box-shadow: var(--section-box-shadow);
+  width: 100% !important; // Ensure full width
+  max-width: 100% !important; // Ensure full width
+  box-sizing: border-box !important; // Include border in width calculation
+
+  // Smooth transitions for hover effects
+  transition:
+    border-color var(--osi-card-transition-normal, 0.22s) cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow var(--osi-card-transition-normal, 0.22s) cubic-bezier(0.4, 0, 0.2, 1);
+
+  // Hover state: gentle shadow with 30% more contrasty cool color and 20% more contrasty border
+  &:hover {
+    border-color: var(--osi-section-border-hover-enhanced-color);
+    box-shadow: var(--osi-section-shadow-hover-enhanced);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
 }
 
 // =====================================================================
@@ -364,12 +383,13 @@
 // =====================================================================
 
 // Modern card variants
-@mixin card-elevated {
-  @include components.card-elevated;
+// Quick access aliases for card variants
+@mixin card-elevated($spacing: "normal") {
+  @include components.card-elevated($spacing);
 }
 
-@mixin card-glass {
-  @include components.card-glass;
+@mixin card-glass($spacing: "normal") {
+  @include components.card-glass($spacing);
 }
 
 // Typography quick access
@@ -475,3 +495,68 @@
 // ```
 //
 // =====================================================================
+// GLOBAL TITLE/PARAGRAPH GAP REDUCTION
+// =====================================================================
+// Reduce gaps between titles and paragraphs across all sections
+
+.ai-section {
+  // Reduce gaps for common title/paragraph patterns
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  [class*="title"],
+  [class*="heading"],
+  [class*="header"] {
+    margin-bottom: 0.05em !important; // Minimized gap between title and paragraph
+    line-height: 1.3 !important;
+  }
+
+  // Reduce line breaks spacing
+  br {
+    margin-top: 0.05em !important; // Minimized gap between paragraphs
+    line-height: 1.3 !important;
+  }
+
+  // Reduce spacing for paragraphs following titles
+  p,
+  div,
+  span {
+    line-height: 1.3 !important;
+  }
+
+  // When paragraphs/content immediately follow a title/heading
+  h1 + p,
+  h1 + div,
+  h1 + span,
+  h2 + p,
+  h2 + div,
+  h2 + span,
+  h3 + p,
+  h3 + div,
+  h3 + span,
+  h4 + p,
+  h4 + div,
+  h4 + span,
+  h5 + p,
+  h5 + div,
+  h5 + span,
+  h6 + p,
+  h6 + div,
+  h6 + span,
+  [class*="title"] + p,
+  [class*="title"] + div,
+  [class*="title"] + span,
+  [class*="heading"] + p,
+  [class*="heading"] + div,
+  [class*="heading"] + span,
+  [class*="header"] + p,
+  [class*="header"] + div,
+  [class*="header"] + span {
+    margin-top: 0.05em !important;
+  }
+}
+
+// =====================================================================

package/styles/components/sections/_master-compact-system.scss

@@ -141,27 +141,10 @@
   transition: all 200ms ease-out;
   box-sizing: border-box;
 
-  // Accent line (consistent across all cards)
-  &::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 1px;
-    background: var(--accent, #ff7900);
-    opacity: 0;
-    transition: opacity 200ms ease-out;
-  }
-
   &:hover {
     border-color: rgba(255, 255, 255, 0.12);
     transform: translateY(-1px);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-
-    &::before {
-      opacity: 0.6;
-    }
   }
 }
 

package/styles/components/sections/_minimalistic-design.scss

@@ -72,18 +72,15 @@
   }
 }
 
-// Minimal card accent - left border only
+// Minimal card accent - no left border
 @mixin minimal-card-accent {
   background: transparent;
   border: none;
-  border-left: var(--minimal-accent-line) solid var(--accent);
   padding: var(--minimal-card-padding);
-  padding-left: calc(var(--minimal-card-padding) + 4px);
   transition: all 200ms var(--ease-out);
 
   &:hover {
     background: var(--minimal-surface-hover);
-    padding-left: calc(var(--minimal-card-padding) + 6px);
   }
 }
 

package/styles/components/sections/_modern-effects.scss

@@ -157,9 +157,7 @@
 
   // Focus state (keyboard navigation)
   &:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 2px;
-    box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.1);
+    outline: none;
   }
 
   // Disabled state

package/styles/components/sections/_modern-sections.scss

@@ -13,44 +13,15 @@
 // UNIFIED CARD - Single Source
 // =====================================================================
 
-@mixin unified-card {
-  // Background & Border - from CSS vars
-  background: var(--osi-section-item-background);
-  border: var(--osi-section-item-border);
-  border-radius: var(--osi-section-item-border-radius);
-
-  // Layout
-  display: flex;
-  flex-direction: column;
-  gap: var(--card-element-gap-md);
-  padding: var(--space-3) var(--space-4);
-
-  // Interaction
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-  box-sizing: border-box;
-
-  // Smooth transitions - subtle
-  transition:
-    background var(--duration-normal) var(--ease-out-smooth),
-    border-color var(--duration-normal) var(--ease-out-smooth),
-    box-shadow var(--duration-normal) var(--ease-out-smooth);
-
-  &:hover {
-    background: var(--osi-section-item-background-hover);
-    border-color: var(--osi-section-item-border-hover);
-    box-shadow: var(--osi-section-item-shadow-hover);
-  }
-
-  &:focus-visible {
-    outline: var(--border-width-accent-sm) solid var(--accent);
-    outline-offset: var(--border-width-accent-sm);
-  }
+// =====================================================================
+// UNIFIED CARD MIXIN - DEPRECATED
+// =====================================================================
+// @deprecated Use @include card instead
+// This mixin is kept for backward compatibility but simply redirects to the base card mixin.
 
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
+@mixin unified-card {
+  @include card("normal");
+  @warn "unified-card mixin is deprecated. Use @include card instead.";
 }
 
 // =====================================================================
@@ -313,39 +284,12 @@
 }
 
 // =====================================================================
-// STREAMING ANIMATIONS
+// STREAMING ANIMATIONS - DEPRECATED
 // =====================================================================
-
-@keyframes unified-stream-in {
-  0% {
-    opacity: 0;
-    transform: translate3d(0, var(--motion-distance-sm), 0);
-  }
-  100% {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-}
+// @deprecated Use @include item-animation from _sections-base.scss instead
+// This mixin is kept for backward compatibility but redirects to the standard animation mixin.
 
 @mixin stream-animation {
-  &.section-item-streaming,
-  &.item-streaming,
-  &.field-streaming {
-    animation: unified-stream-in var(--duration-moderate) var(--ease-out-smooth)
-      var(--animation-fill-mode);
-  }
-
-  &.section-item-entered,
-  &.item-entered,
-  &.field-entered {
-    animation: none;
-  }
-
-  @for $i from 0 through 15 {
-    &.section-item-stagger-#{$i},
-    &.item-stagger-#{$i},
-    &.field-stagger-#{$i} {
-      animation-delay: calc(#{$i} * var(--stagger-delay-base));
-    }
-  }
+  @include item-animation;
+  @warn "stream-animation is deprecated. Use @include item-animation instead.";
 }

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

@@ -10,6 +10,127 @@
 
 @use "design-tokens" as *;
 
+// =====================================================================
+// METAL REFLECTION EFFECT
+// =====================================================================
+//
+// Adds a subtle metallic reflection effect on hover with sweeping animation.
+// Direction can be left-to-right (ltr) or right-to-left (rtl).
+// The effect sweeps across the element like light on metal.
+//
+
+// Keyframe animation for metal sweep effect - fully vertical, more discrete
+@keyframes metal-sweep-ltr {
+  0% {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  20% {
+    opacity: 0.3;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  80% {
+    opacity: 0.3;
+  }
+  100% {
+    transform: translateX(200%);
+    opacity: 0;
+  }
+}
+
+@keyframes metal-sweep-rtl {
+  0% {
+    transform: translateX(200%);
+    opacity: 0;
+  }
+  20% {
+    opacity: 0.3;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  80% {
+    opacity: 0.3;
+  }
+  100% {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+}
+
+@mixin section-metal-reflection($direction: "ltr") {
+  position: relative;
+  overflow: hidden;
+
+  // Use ::before for metal reflection to avoid conflicts with ::after used by components
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+    z-index: 1;
+    opacity: 0;
+    border-radius: inherit;
+    // Reset animation state
+    animation: none;
+
+    @if $direction == "ltr" {
+      // Left-to-right reflection with sweep animation - more discrete
+      background: linear-gradient(
+        90deg,
+        transparent 0%,
+        rgba(255, 255, 255, 0.2) 20%,
+        rgba(255, 255, 255, 0.3) 40%,
+        rgba(255, 255, 255, 0.2) 60%,
+        transparent 100%
+      );
+      width: 50%;
+    } @else {
+      // Right-to-left reflection with sweep animation - more discrete
+      background: linear-gradient(
+        270deg,
+        transparent 0%,
+        rgba(255, 255, 255, 0.2) 20%,
+        rgba(255, 255, 255, 0.3) 40%,
+        rgba(255, 255, 255, 0.2) 60%,
+        transparent 100%
+      );
+      width: 50%;
+    }
+
+    // Use overlay blend mode for metallic appearance
+    mix-blend-mode: overlay;
+  }
+
+  // Trigger animation on hover - each item independently
+  &:hover::before {
+    opacity: 1;
+    // Play animation on hover - restart animation each time for this specific item
+    @if $direction == "ltr" {
+      animation: metal-sweep-ltr 0.23s ease-out forwards;
+    } @else {
+      animation: metal-sweep-rtl 0.23s ease-out forwards;
+    }
+  }
+
+  // Reset animation when hover ends so it can play again
+  &:not(:hover)::before {
+    animation: none;
+    opacity: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    &::before {
+      display: none;
+    }
+  }
+}
+
 // =====================================================================
 // STANDARD CARD HOVER EFFECT
 // =====================================================================
@@ -19,15 +140,17 @@
 //
 
 @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);
+  // Use standardized transition token
+  transition: var(--osi-section-item-transition);
+
+  // Add metal reflection effect (default left-to-right)
+  @include section-metal-reflection("ltr");
 
   &:hover {
-    box-shadow: var(--shadow-lg);
-    background: var(--osi-section-item-background-hover);
-    border-color: var(--osi-section-item-border-hover);
+    // Keep background unchanged - only border and shadow change
+    // background: var(--osi-section-item-background-hover); // Removed - background stays the same
+    border-color: var(--osi-section-item-border-hover-enhanced-color);
+    box-shadow: var(--osi-section-item-shadow-hover-enhanced);
   }
 
   &:focus-visible {
@@ -60,6 +183,9 @@
     background var(--duration-slow) var(--ease-out),
     border-color var(--duration-slow) var(--ease-out);
 
+  // Add metal reflection effect (default left-to-right)
+  @include section-metal-reflection("ltr");
+
   &:hover {
     box-shadow: var(--shadow-xl);
     background: var(--osi-section-item-background-hover);
@@ -83,6 +209,9 @@
     box-shadow var(--duration-base) var(--ease-out),
     background var(--duration-base) var(--ease-out);
 
+  // Add metal reflection effect (default left-to-right)
+  @include section-metal-reflection("ltr");
+
   &:hover {
     box-shadow: var(--shadow-md);
     background: var(--osi-section-item-background-hover);
@@ -101,15 +230,16 @@
 //
 
 @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);
+  // Use standardized transition token
+  transition: var(--osi-section-item-transition);
+
+  // Add metal reflection effect (default left-to-right)
+  @include section-metal-reflection("ltr");
 
   &:hover {
-    background: var(--surface-raised);
+    background: var(--osi-section-item-background-hover);
     color: var(--foreground);
-    border-color: var(--border-strong);
+    border-color: var(--osi-section-item-border-hover);
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -203,20 +333,10 @@
 }
 
 // =====================================================================
-// ENTRANCE ANIMATIONS
+// ENTRANCE ANIMATIONS - DEPRECATED
 // =====================================================================
-//
-// Keyframe animations for section/item entrance.
-//
-
-@keyframes section-item-stream {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
+// @deprecated Use @keyframes item-stream from _sections-base.scss instead
+// This keyframe is kept for backward compatibility.
 
 @keyframes section-fade-in {
   from {
@@ -243,64 +363,25 @@
 // 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);
-    }
-  }
+// =====================================================================
+// ANIMATION MIXINS - DEPRECATED
+// =====================================================================
+// @deprecated Use @include item-animation from _sections-base.scss instead
+// These mixins are kept for backward compatibility but redirect to the standard mixin.
 
-  @media (prefers-reduced-motion: reduce) {
-    animation: none !important;
-  }
+@mixin section-item-animation {
+  @include item-animation;
+  @warn "section-item-animation from _section-animations.scss is deprecated. Use @include item-animation from _sections-base.scss instead.";
 }
 
 @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;
-  }
+  @include item-animation;
+  @warn "legacy-item-animation from _section-animations.scss is deprecated. Use @include item-animation from _sections-base.scss instead.";
 }
 
 @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;
-  }
+  @include item-animation;
+  @warn "legacy-field-animation from _section-animations.scss is deprecated. Use @include item-animation from _sections-base.scss instead.";
 }
 
 // =====================================================================