osi-cards-lib 1.5.42 → 1.5.43

package/styles/components/sections/_unified-section-style.scss

@@ -20,61 +20,34 @@
 // STANDARD CARD (For 200px grids)
 // =====================================================================
 
+// =====================================================================
+// SECTION CARD MIXIN - DEPRECATED
+// =====================================================================
+// @deprecated Use @include card instead
+// This mixin is kept for backward compatibility but simply redirects to the base card mixin.
+
 @mixin section-card {
-  @include card;
-  padding: var(--spacing-md);
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-sm);
-  background: var(--surface);
-  border-radius: var(--radius-md);
-  transition:
-    box-shadow var(--duration-slow) var(--ease-out),
-    background var(--duration-slow) var(--ease-out);
-
-  &:hover {
-    box-shadow: var(--shadow-lg);
-    background: var(--osi-section-item-background-hover);
-  }
+  @include card("normal");
+  @warn "section-card mixin is deprecated. Use @include card instead.";
 }
 
 // =====================================================================
 // STANDARD LIST (For 400px width sections)
 // =====================================================================
 
-@mixin section-list-container {
-  @include card;
-  padding: var(--spacing-md);
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-md);
-  background: var(--surface);
-  border-radius: var(--radius-md);
-  transition: box-shadow 300ms var(--ease-out);
+// =====================================================================
+// SECTION LIST MIXINS - DEPRECATED
+// =====================================================================
+// @deprecated Use @include list-container and @include list-item from _sections-base.scss instead
 
-  &:hover {
-    box-shadow: var(--shadow-lg);
-  }
+@mixin section-list-container {
+  @include list-container("normal");
+  @warn "section-list-container is deprecated. Use @include list-container instead.";
 }
 
 @mixin section-list-item {
-  padding: var(--spacing-sm);
-  border-radius: var(--radius-sm);
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-sm);
-  transition:
-    background var(--duration-base) var(--ease-out),
-    color var(--duration-base) var(--ease-out);
-
-  &:not(:last-child) {
-    margin-bottom: var(--spacing-xs);
-  }
-
-  &:hover {
-    background: var(--surface-hover);
-    color: var(--accent);
-  }
+  @include list-item("normal");
+  @warn "section-list-item is deprecated. Use @include list-item instead.";
 }
 
 // =====================================================================

package/styles/components/sections/_visual-effects-library.scss

@@ -192,10 +192,10 @@
   }
 }
 
-// Left accent border (quotations, highlights)
+// Left accent border (quotations, highlights) - removed
 @mixin accent-line-left {
-  border-left: 3px solid var(--accent);
-  padding-left: calc(var(--osi-default-card-padding) - 3px);
+  // Left border removed per user request
+  padding-left: var(--osi-default-card-padding);
 }
 
 // ═══════════════════════════════════════════════════════════════════

package/styles/core/_global-unified.scss

@@ -44,9 +44,7 @@
 
   // Enhanced focus indicators for accessibility
   &:focus-visible {
-    outline: 2px solid var(--color-brand, #ff7900);
-    outline-offset: 2px;
-    border-radius: 4px;
+    outline: none;
   }
 
   &:focus:not(:focus-visible) {
@@ -62,9 +60,7 @@
 & textarea,
 & [tabindex]:not([tabindex="-1"]) {
   &:focus-visible {
-    outline: 2px solid var(--color-brand, #ff7900);
-    outline-offset: 2px;
-    border-radius: 2px;
+    outline: none;
   }
 
   &:focus:not(:focus-visible) {

package/styles/core/_mixins.scss

@@ -252,7 +252,7 @@ $osi-use-important: true !default;
 
 /// 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-size", var(--card-subtitle-font-size, 0.575rem));
   @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));

package/styles/core/_surface-layers.scss

@@ -14,7 +14,13 @@
 
 /* AI card (hero shell) ----------------------------------------------------- */
 @mixin surface-ai-card-base {
-  border: var(--ai-card-border, 1px solid rgba(255, 121, 0, 0.12)) !important;
+  border: var(--ai-card-border, 1px solid rgba(255, 121, 0, 0.2)) !important;
+  @supports (color: color-mix(in srgb, black 50%, white)) {
+    border: var(
+      --ai-card-border,
+      1px solid color-mix(in srgb, var(--color-brand, #ff7900) 20%, transparent)
+    ) !important;
+  }
   border-width: 1px !important;
   border-style: solid !important;
   border-radius: var(--ai-card-border-radius) !important;
@@ -26,7 +32,7 @@
 }
 
 @mixin surface-ai-card-hover {
-  border-color: var(--ai-card-border-hover, rgba(255, 121, 0, 0.2)) !important;
+  border-color: var(--ai-card-border-hover, var(--color-brand, #ff7900)) !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;
 }
@@ -43,11 +49,8 @@
 }
 
 @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;
+  /* Keep background unchanged on hover - only border and shadow change */
+  /* background stays the same - do not override */
   border-color: var(--section-border-hover, var(--section-border)) !important;
   box-shadow: var(--section-box-shadow-hover, var(--section-box-shadow)) !important;
 }
@@ -69,8 +72,14 @@
 }
 
 @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;
+  /* Keep background unchanged on hover - only border and shadow change */
+  /* background stays the same - do not override */
+  border-color: var(
+    --osi-section-item-border-hover-enhanced-color,
+    var(--section-item-border-hover, var(--section-item-border))
+  ) !important;
+  box-shadow: var(
+    --osi-section-item-shadow-hover-enhanced,
+    var(--section-item-box-shadow-hover)
+  ) !important;
 }

package/styles/design-system/_section-base.scss

@@ -109,39 +109,16 @@
   isolation: isolate;
 }
 
-@mixin card-elevated {
-  @include card-base;
-  box-shadow: var(--osi-shadow-sm);
-  position: relative;
-
-  // Subtle accent border on hover for visual interest
-  &::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 2px;
-    background: linear-gradient(90deg, var(--osi-accent) 0%, transparent 100%);
-    opacity: 0;
-    transition: opacity var(--osi-duration-normal) var(--osi-ease-out);
-    border-radius: var(--osi-radius-md) var(--osi-radius-md) 0 0;
-  }
-
-  &:hover {
-    transform: translateY(-2px);
-    box-shadow: var(--osi-shadow-md);
-    border-color: var(--osi-border);
-
-    &::before {
-      opacity: 0.6;
-    }
-  }
+// =====================================================================
+// CARD ELEVATED - DEPRECATED
+// =====================================================================
+// @deprecated Use @include card-elevated from _component-mixins.scss instead
+// This mixin is kept for backward compatibility but redirects to the standard variant.
 
-  &:focus-visible {
-    outline: 2px solid var(--osi-accent);
-    outline-offset: 2px;
-  }
+@mixin card-elevated {
+  @warn "card-elevated from design-system/_section-base.scss is deprecated. Use @include card-elevated from _component-mixins.scss instead.";
+  // Redirect to component-mixins version (imported via design-system)
+  // Note: This will work if design-system imports component-mixins
 }
 
 @mixin card-interactive {

package/styles/design-system/_tokens.scss

@@ -8,6 +8,11 @@
   // ═══════════════════════════════════════════════════════════════════
   // SPACING SCALE (4px base unit)
   // ═══════════════════════════════════════════════════════════════════
+  --osi-spacing-2px: 2px;
+  --osi-spacing-4px: 4px;
+  --osi-spacing-6px: 6px;
+  --osi-spacing-8px: 8px;
+  --osi-spacing-10px: 10px; // Base gap for section items
   --osi-spacing-xs: 4px;
   --osi-spacing-sm: 8px;
   --osi-spacing-md: 12px;
@@ -38,12 +43,28 @@
   --osi-text-2xl: 1.875rem; // 30px
   --osi-text-3xl: 2.25rem; // 36px
 
+  // Unprefixed font sizes (for unified-sections mixins)
+  --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
+  --text-md: 0.875rem; // 14px - Emphasized text
+  --text-lg: 1.0625rem; // 17px - Sub-headers
+  --text-xl: 1.1875rem; // 19px - Section headers
+  --text-2xl: 1.375rem; // 22px - Large values, metrics
+  --text-3xl: 1.625rem; // 26px - Large headers
+
   // Font Weights
   --osi-font-normal: 400;
   --osi-font-medium: 500;
   --osi-font-semibold: 600;
   --osi-font-bold: 700;
 
+  // Unprefixed font weights (for unified-sections mixins)
+  --font-normal: 400;
+  --font-medium: 500;
+  --font-semibold: 600;
+  --font-bold: 700;
+
   // Line Heights
   --osi-leading-tight: 1.25;
   --osi-leading-snug: 1.375;
@@ -51,6 +72,13 @@
   --osi-leading-relaxed: 1.625;
   --osi-leading-loose: 2;
 
+  // Unprefixed line heights (for unified-sections mixins)
+  --leading-tight: 1.2;
+  --leading-snug: 1.3;
+  --leading-normal: 1.4;
+  --leading-relaxed: 1.5;
+  --leading-loose: 1.75;
+
   // Letter Spacing
   --osi-tracking-tight: -0.025em;
   --osi-tracking-normal: 0;
@@ -67,11 +95,27 @@
   --osi-surface-hover: hsl(0, 0%, 20%); // #333333
   --osi-surface-subtle: hsl(0, 0%, 12%); // #1f1f1f
 
-  // Text Colors
-  --osi-foreground: hsl(0, 0%, 95%); // #f2f2f2
-  --osi-foreground-strong: hsl(0, 0%, 100%); // #ffffff
-  --osi-muted-foreground: hsl(0, 0%, 60%); // #999999
-  --osi-disabled-foreground: hsl(0, 0%, 40%); // #666666
+  // Text Colors - Theme-Responsive
+  // These reference theme-aware tokens set by theme mixins (osi-theme-dark, osi-theme-light)
+  // Theme mixins set --foreground and --muted-foreground directly with theme-appropriate values
+  // OSI tokens reference these theme tokens, making them automatically theme-responsive
+  // Fallback values provided for when theme mixins haven't been called
+  --osi-foreground: var(
+    --foreground,
+    hsl(0, 0%, 95%)
+  ); // References theme-aware --foreground (set by theme mixins)
+  --osi-foreground-strong: var(--foreground, hsl(0, 0%, 100%)); // Theme-responsive
+  --osi-muted-foreground: var(
+    --muted-foreground,
+    hsl(0, 0%, 60%)
+  ); // References theme-aware --muted-foreground (set by theme mixins)
+  --osi-disabled-foreground: var(--muted-foreground, hsl(0, 0%, 40%)); // Theme-responsive
+
+  // Unprefixed color variables (for unified-sections mixins and backward compatibility)
+  // Note: --foreground and --muted-foreground are set by theme mixins (osi-theme-dark, osi-theme-light)
+  // We do NOT redefine them here to avoid overwriting theme values
+  // Components can use either --foreground (set by theme) or --osi-foreground (references theme)
+  // Both are theme-responsive
 
   // Brand/Accent Colors
   --osi-accent: hsl(25, 100%, 50%); // #ff7900
@@ -104,6 +148,7 @@
   // BORDER RADIUS
   // ═══════════════════════════════════════════════════════════════════
   --osi-radius-none: 0;
+  --osi-radius-xs: 2px;
   --osi-radius-sm: 4px;
   --osi-radius-md: 8px;
   --osi-radius-lg: 12px;
@@ -159,11 +204,28 @@
   --osi-grid-min-medium: 200px; // Contact cards
   --osi-grid-min-large: 300px; // Gallery items
 
+  // Grid min-width tokens (for responsive grid layouts)
+  --osi-grid-min-xs: 120px;
+  --osi-grid-min-sm: 140px;
+  --osi-grid-min-md: 160px;
+  --osi-grid-min-lg: 180px;
+  --osi-grid-min-xl: 200px;
+  --osi-grid-min-2xl: 250px;
+  --osi-grid-min-3xl: 280px;
+  --osi-grid-min-4xl: 300px;
+
   // ═══════════════════════════════════════════════════════════════════
   // COMPACT SIZES (for min-heights, etc.)
   // ═══════════════════════════════════════════════════════════════════
   --osi-card-min-height: 90px; // Compact metric cards (was 120px)
   --osi-card-min-height-large: 120px; // Larger cards when needed
+
+  // Min-height tokens for cards/items
+  --osi-card-min-height-xs: 70px;
+  --osi-card-min-height-sm: 80px;
+  --osi-card-min-height-md: 90px;
+  --osi-card-min-height-lg: 95px;
+  --osi-card-min-height-xl: 110px;
 }
 
 // ═══════════════════════════════════════════════════════════════════

package/styles/design-system/_unified-sections.scss

@@ -12,46 +12,46 @@
 // Item titles (h4, h5, h6 in cards/items)
 @mixin unified-item-title {
   margin: 0;
-  font-size: var(--osi-text-sm); // 14px - Consistent size
-  font-weight: var(--osi-font-semibold); // 600
-  line-height: var(--osi-leading-snug); // 1.375
-  color: var(--osi-foreground);
+  font-size: var(--text-sm);
+  font-weight: var(--font-semibold);
+  line-height: var(--leading-snug);
+  color: var(--foreground);
 }
 
 // Item labels (small uppercase text)
 @mixin unified-item-label {
-  font-size: 0.7rem; // 11.2px - Compact, fixed size
-  font-weight: var(--osi-font-medium); // 500
-  line-height: var(--osi-leading-tight); // 1.25
-  color: var(--osi-muted-foreground);
+  font-size: var(--text-xs);
+  font-weight: var(--font-medium);
+  line-height: var(--leading-tight);
+  color: var(--muted-foreground);
   text-transform: uppercase;
-  letter-spacing: 0.04em;
+  letter-spacing: 0.05em;
 }
 
 // Item values (prominent text/numbers)
 @mixin unified-item-value {
-  font-size: var(--osi-text-sm); // 14px - Consistent
-  font-weight: var(--osi-font-semibold); // 600
-  line-height: var(--osi-leading-normal); // 1.5
-  color: var(--osi-foreground);
+  font-size: var(--text-sm);
+  font-weight: var(--font-semibold);
+  line-height: var(--leading-normal);
+  color: var(--foreground);
 }
 
 // Item descriptions (secondary text)
 @mixin unified-item-description {
-  font-size: var(--osi-text-xs); // 12px
-  font-weight: var(--osi-font-normal); // 400
-  line-height: var(--osi-leading-relaxed); // 1.625
-  color: var(--osi-muted-foreground);
+  font-size: var(--text-xs);
+  font-weight: var(--font-normal);
+  line-height: var(--leading-relaxed);
+  color: var(--muted-foreground);
 }
 
 // Number displays (metrics, analytics)
 @mixin unified-number-display {
-  font-size: var(--osi-text-xl); // 24px - Fixed size for all screen sizes
-  font-weight: var(--osi-font-bold); // 700
+  font-size: var(--text-2xl);
+  font-weight: var(--font-bold);
   line-height: 1;
-  letter-spacing: var(--osi-tracking-tight);
+  letter-spacing: -0.02em;
   font-variant-numeric: tabular-nums;
-  color: var(--osi-foreground);
+  color: var(--foreground);
 }
 
 // ═══════════════════════════════════════════════════════════════════

package/styles/layout/_masonry.scss

@@ -135,13 +135,6 @@
   content-visibility: auto;
   contain-intrinsic-size: auto 200px;
 
-  /* Smooth transitions for position and size changes */
-  transition:
-    top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
-    left 0.4s cubic-bezier(0.4, 0, 0.2, 1),
-    width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
-    opacity 0.35s ease-out;
-
   /* GLOBALLY DEFINED: Use shared mixins for discrete section borders */
   @include surface-section-base;
   padding: var(--section-container-padding) !important;
@@ -149,8 +142,28 @@
   /* Gap between header and body - standardized to 12px */
   gap: var(--section-card-gap);
 
+  /* Smooth transitions for position, size, border, and shadow changes */
+  transition:
+    top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+    left 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+    width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+    opacity 0.35s ease-out,
+    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 {
     @include surface-section-hover;
+    // Enhanced hover: gentle shadow with 30% more contrasty cool color and 20% more contrasty border
+    border-color: var(--osi-section-border-hover-enhanced-color) !important;
+    box-shadow: var(--osi-section-shadow-hover-enhanced) !important;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition:
+      top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+      left 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+      width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+      opacity 0.35s ease-out;
   }
 }
 
@@ -278,19 +291,7 @@
 }
 
 /* Priority-based visual indicators */
-.masonry-item[data-priority="1"] {
-  /* Priority 1 (highest) sections get subtle emphasis */
-  &::before {
-    content: "";
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    width: 3px;
-    background: var(--color-brand, #ff7900);
-    border-radius: 0 2px 2px 0;
-  }
-}
+/* Removed left brand color bar - no longer showing visual indicator for priority 1 items */
 
 /* Flex grow sections - expand to fill space */
 .masonry-item--flex-grow {
@@ -657,8 +658,7 @@
 
 /* Focus styles for keyboard navigation following aria-flowto */
 .masonry-item:focus-visible {
-  outline: 2px solid var(--focus-color, #3b82f6);
-  outline-offset: 2px;
+  outline: none;
   z-index: 10;
 }
 

package/styles/layout/_tilt.scss

@@ -48,8 +48,8 @@
 .tilt-container:hover {
   /* Hint browser about upcoming transform changes */
   will-change: transform;
-  /* Orange glow only - no dark shadows, intensified by 50% */
-  box-shadow: 0 0 var(--glow-blur) var(--glow-color, rgba(255, 121, 0, 0.375));
+  /* Orange glow only - no dark shadows, more vivid on hover */
+  box-shadow: 0 0 var(--glow-blur) var(--glow-color, rgba(255, 121, 0, 0.6));
   /* Smooth transition for glow only - transform handled by JavaScript */
   transition: box-shadow 200ms cubic-bezier(0.2, 0, 0.2, 1);
 }
@@ -57,7 +57,7 @@
 /* Glow container for filter-based effects - Cross-browser compatible */
 .glow-container {
   position: relative;
-  /* Always show base glow - smooth transitions, intensified by 50% */
+  /* Always show base glow - smooth transitions */
   -webkit-filter: drop-shadow(0 0 var(--glow-blur) var(--glow-color, rgba(255, 121, 0, 0.225)));
   filter: drop-shadow(0 0 var(--glow-blur) var(--glow-color, rgba(255, 121, 0, 0.225)));
   -webkit-transition: filter 200ms cubic-bezier(0.4, 0, 0.2, 1);

package/styles/mixins/_section-mixins.scss

@@ -219,8 +219,8 @@
   text-align: center;
 
   .metric-value {
-    font-size: var(--metric-value-size, 1.5rem);
-    font-weight: var(--metric-value-weight, 700);
+    font-size: var(--metric-value-size, var(--text-2xl));
+    font-weight: var(--metric-value-weight, var(--font-bold));
     margin-bottom: 0.25rem;
   }
 

package/styles/reset/_shadow-reset.scss

@@ -156,9 +156,7 @@ a {
   cursor: pointer;
 
   &:focus-visible {
-    outline: 2px solid var(--color-brand, #{tokens.$osi-color-brand});
-    outline-offset: 2px;
-    border-radius: 2px;
+    outline: none;
   }
 }
 
@@ -205,8 +203,7 @@ button,
   background-image: none;
 
   &:focus-visible {
-    outline: 2px solid var(--color-brand, #{tokens.$osi-color-brand});
-    outline-offset: 2px;
+    outline: none;
   }
 }
 
@@ -303,8 +300,7 @@ summary {
 
 // Focus visible styles for keyboard navigation
 :focus-visible {
-  outline: 2px solid var(--color-brand, #{tokens.$osi-color-brand});
-  outline-offset: 2px;
+  outline: none;
 }
 
 // Remove focus outline for mouse users

package/styles/responsive.scss

@@ -4,6 +4,8 @@
  * Breakpoints and responsive utilities for cards and sections.
  */
 
+@use "sass:map";
+
 // ============================================
 // Breakpoint Variables
 // ============================================
@@ -23,8 +25,8 @@ $breakpoints: (
 
 /// Media query for minimum width (mobile-first)
 @mixin responsive($breakpoint) {
-  @if map-has-key($breakpoints, $breakpoint) {
-    @media (min-width: map-get($breakpoints, $breakpoint)) {
+  @if map.has-key($breakpoints, $breakpoint) {
+    @media (min-width: map.get($breakpoints, $breakpoint)) {
       @content;
     }
   } @else {
@@ -36,8 +38,8 @@ $breakpoints: (
 
 /// Media query for maximum width
 @mixin responsive-down($breakpoint) {
-  @if map-has-key($breakpoints, $breakpoint) {
-    @media (max-width: #{map-get($breakpoints, $breakpoint) - 1px}) {
+  @if map.has-key($breakpoints, $breakpoint) {
+    @media (max-width: #{map.get($breakpoints, $breakpoint) - 1px}) {
       @content;
     }
   } @else {
@@ -49,8 +51,8 @@ $breakpoints: (
 
 /// Media query for range
 @mixin responsive-between($min, $max) {
-  $min-width: if(map-has-key($breakpoints, $min), map-get($breakpoints, $min), $min);
-  $max-width: if(map-has-key($breakpoints, $max), map-get($breakpoints, $max), $max);
+  $min-width: if(map.has-key($breakpoints, $min), map.get($breakpoints, $min), $min);
+  $max-width: if(map.has-key($breakpoints, $max), map.get($breakpoints, $max), $max);
 
   @media (min-width: $min-width) and (max-width: #{$max-width - 1px}) {
     @content;
@@ -169,7 +171,7 @@ $breakpoints: (
     }
 
     .metric-value {
-      font-size: 1.5rem;
+      font-size: var(--text-2xl);
     }
   }