osi-cards-lib 1.5.32 → 1.5.34

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

@@ -0,0 +1,268 @@
+// =====================================================================
+// MINIMALISTIC DESIGN SYSTEM - Clean, Compact, Modern
+// =====================================================================
+// Philosophy: Less is more. Remove visual noise, maximize clarity.
+
+@use "design-tokens" as *;
+
+// ═══════════════════════════════════════════════════════════════════
+// MINIMALISTIC SPACING - Tight but Breathable
+// ═══════════════════════════════════════════════════════════════════
+
+:root {
+  // Minimalistic spacing (tighter than comfortable, but not cramped)
+  --minimal-spacing-xs: 3px;
+  --minimal-spacing-sm: 6px;
+  --minimal-spacing-md: 9px;
+  --minimal-spacing-lg: 12px;
+  --minimal-spacing-xl: 18px;
+
+  // Card/Item spacing
+  --minimal-card-padding: 10px; // Balanced compact
+  --minimal-card-gap: 10px; // Visual separation
+  --minimal-item-gap: 6px; // Between elements
+
+  // Heights
+  --minimal-card-height: 95px; // Compact but not cramped
+  --minimal-card-height-mobile: auto; // Flexible on mobile
+}
+
+// ═══════════════════════════════════════════════════════════════════
+// MINIMALISTIC COLORS - Subtle, Clean
+// ═══════════════════════════════════════════════════════════════════
+
+:root {
+  // Subtle backgrounds (less contrast = cleaner)
+  --minimal-surface: var(--surface);
+  --minimal-surface-hover: rgba(var(--foreground-rgb), 0.03); // Very subtle
+  --minimal-border: rgba(var(--foreground-rgb), 0.06); // Subtle borders
+  --minimal-border-hover: rgba(var(--foreground-rgb), 0.1);
+
+  // Accent usage (minimal, strategic)
+  --minimal-accent-subtle: rgba(var(--accent-rgb), 0.1);
+  --minimal-accent-line: 2px; // Thin accent
+}
+
+// ═══════════════════════════════════════════════════════════════════
+// MINIMALISTIC CARD STYLES
+// ═══════════════════════════════════════════════════════════════════
+
+// Minimal card - clean, subtle
+@mixin minimal-card {
+  background: transparent; // No background
+  border: 1px solid var(--minimal-border); // Subtle border
+  border-radius: var(--radius-sm); // Small radius
+  padding: var(--minimal-card-padding); // 10px
+  transition: all 200ms var(--ease-out);
+
+  &:hover {
+    border-color: var(--minimal-border-hover);
+    background: var(--minimal-surface-hover); // Very subtle
+    transform: translateY(-1px); // Subtle lift
+  }
+}
+
+// Minimal card elevated - with subtle shadow
+@mixin minimal-card-elevated {
+  @include minimal-card;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); // Very subtle
+
+  &:hover {
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); // Subtle elevation
+  }
+}
+
+// Minimal card accent - left border only
+@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);
+  }
+}
+
+// ═══════════════════════════════════════════════════════════════════
+// MINIMALISTIC GRID - Optimal Column Usage
+// ═══════════════════════════════════════════════════════════════════
+
+// Small metrics (3-4 columns desktop, 2 mobile)
+@mixin minimal-grid-metrics {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
+  gap: var(--minimal-card-gap);
+
+  @media (max-width: 768px) {
+    grid-template-columns: repeat(3, 1fr); // 3 columns on tablet
+  }
+
+  @media (max-width: 480px) {
+    grid-template-columns: repeat(2, 1fr); // 2 columns on mobile
+  }
+}
+
+// Medium cards (2-3 columns desktop, 1-2 mobile)
+@mixin minimal-grid-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: var(--minimal-card-gap);
+
+  @media (max-width: 768px) {
+    grid-template-columns: repeat(2, 1fr); // 2 columns on tablet
+  }
+
+  @media (max-width: 480px) {
+    grid-template-columns: 1fr; // 1 column on mobile
+  }
+}
+
+// List layout - no grid, vertical stack
+@mixin minimal-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0; // Seamless with borders
+}
+
+// ═══════════════════════════════════════════════════════════════════
+// MINIMALISTIC TYPOGRAPHY - Clean Hierarchy
+// ═══════════════════════════════════════════════════════════════════
+
+@mixin minimal-section-title {
+  font-size: var(--text-lg); // 17px - not too large
+  font-weight: var(--font-semibold); // 600 - not too bold
+  line-height: var(--leading-tight);
+  color: var(--foreground);
+  margin: 0;
+}
+
+@mixin minimal-item-title {
+  font-size: var(--text-base); // 13px
+  font-weight: var(--font-medium); // 500 - subtle
+  line-height: var(--leading-snug);
+  color: var(--foreground);
+  margin: 0;
+}
+
+@mixin minimal-label {
+  font-size: var(--text-xs); // 11px
+  font-weight: var(--font-normal); // 400 - light
+  line-height: var(--leading-tight);
+  color: var(--muted-foreground);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+@mixin minimal-value {
+  font-size: var(--text-md); // 14px
+  font-weight: var(--font-medium); // 500 - not too bold
+  line-height: var(--leading-normal);
+  color: var(--foreground);
+}
+
+@mixin minimal-number {
+  font-size: var(--text-2xl); // 22px
+  font-weight: var(--font-semibold); // 600 - not too bold
+  line-height: 1;
+  letter-spacing: -0.01em;
+  font-variant-numeric: tabular-nums;
+  color: var(--foreground);
+}
+
+// ═══════════════════════════════════════════════════════════════════
+// MINIMALISTIC ITEM - Clean List Item
+// ═══════════════════════════════════════════════════════════════════
+
+@mixin minimal-item {
+  padding: var(--minimal-card-padding);
+  border: none;
+  border-bottom: 1px solid var(--minimal-border);
+  transition: all 150ms var(--ease-out);
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &:hover {
+    background: var(--minimal-surface-hover);
+    padding-left: calc(var(--minimal-card-padding) + 4px);
+  }
+}
+
+// ═══════════════════════════════════════════════════════════════════
+// MINIMALISTIC EFFECTS - Subtle Interactions
+// ═══════════════════════════════════════════════════════════════════
+
+// Subtle lift (minimalistic)
+@mixin minimal-lift {
+  transition: all 200ms var(--ease-out);
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  }
+}
+
+// Accent line reveal (minimalistic)
+@mixin minimal-accent-reveal {
+  position: relative;
+
+  &::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 100%;
+    height: 1px;
+    background: var(--accent);
+    transition: right 300ms var(--ease-out);
+  }
+
+  &:hover::after {
+    right: 0;
+  }
+}
+
+// Fade background (minimalistic)
+@mixin minimal-fade-bg {
+  background: transparent;
+  transition: background 200ms var(--ease-out);
+
+  &:hover {
+    background: var(--minimal-surface-hover);
+  }
+}
+
+// ═══════════════════════════════════════════════════════════════════
+// MINIMALISTIC RESPONSIVE - Mobile-First
+// ═══════════════════════════════════════════════════════════════════
+
+@mixin minimal-mobile {
+  @media (max-width: 480px) {
+    padding: var(--minimal-spacing-sm); // 6px on mobile
+    gap: var(--minimal-spacing-xs); // 3px between elements
+  }
+}
+
+// ═══════════════════════════════════════════════════════════════════
+// COMPLETE MINIMALISTIC CARD - Ready to Use
+// ═══════════════════════════════════════════════════════════════════
+
+@mixin minimalistic-card-complete {
+  @include minimal-card-elevated;
+  @include minimal-lift;
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--minimal-item-gap);
+  min-height: var(--minimal-card-height);
+
+  @media (max-width: 480px) {
+    min-height: var(--minimal-card-height-mobile);
+    padding: var(--minimal-spacing-sm);
+  }
+}

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

@@ -0,0 +1,392 @@
+// =====================================================================
+// MODERN EFFECTS & INTERACTIONS
+// =====================================================================
+//
+// Advanced visual effects, micro-interactions, and modern UI patterns.
+// Uses design tokens for consistency.
+//
+// =====================================================================
+
+@use "design-tokens" as *;
+
+// =====================================================================
+// GLASS MORPHISM
+// =====================================================================
+
+@mixin glass-card {
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
+  backdrop-filter: blur(var(--glass-blur));
+  -webkit-backdrop-filter: blur(var(--glass-blur));
+  box-shadow: var(--shadow-md);
+  transition: var(--transition-colors), var(--transition-shadow);
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.75);
+    border-color: rgba(255, 255, 255, 0.3);
+    box-shadow: var(--shadow-lg);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    &:hover {
+      background: rgba(0, 0, 0, 0.5);
+      border-color: rgba(255, 255, 255, 0.15);
+    }
+  }
+}
+
+// =====================================================================
+// SUBTLE GRADIENT ACCENTS
+// =====================================================================
+
+@mixin gradient-accent-top {
+  position: relative;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);
+    opacity: 0;
+    transition: opacity var(--duration-base) var(--ease-out);
+  }
+
+  &:hover::before {
+    opacity: 1;
+  }
+}
+
+@mixin gradient-background {
+  background: linear-gradient(
+    135deg,
+    var(--osi-section-item-background) 0%,
+    var(--osi-section-item-background-hover) 100%
+  );
+}
+
+// =====================================================================
+// SHINE/SHIMMER EFFECT
+// =====================================================================
+
+@mixin shimmer-effect {
+  position: relative;
+  overflow: hidden;
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      rgba(255, 255, 255, 0.1) 50%,
+      transparent 100%
+    );
+    transition: left var(--duration-slower) var(--ease-out);
+    pointer-events: none;
+  }
+
+  &:hover::after {
+    left: 100%;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    &::after {
+      display: none;
+    }
+  }
+}
+
+// =====================================================================
+// ELEVATION (Lifted Card Effect)
+// =====================================================================
+
+@mixin elevated-card {
+  transition: var(--transition-shadow), var(--transition-colors);
+
+  &:hover {
+    box-shadow: var(--shadow-xl);
+    background: var(--osi-section-item-background-hover);
+  }
+
+  &:active {
+    box-shadow: var(--shadow-md);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+// =====================================================================
+// GLOW EFFECT
+// =====================================================================
+
+@mixin glow-on-hover($intensity: "md") {
+  transition: box-shadow var(--duration-base) var(--ease-out);
+
+  &:hover {
+    box-shadow: var(--glow-#{$intensity});
+  }
+}
+
+// =====================================================================
+// INTERACTIVE STATES (Modern)
+// =====================================================================
+
+@mixin interactive-surface {
+  position: relative;
+  cursor: pointer;
+  transition: var(--transition-colors);
+
+  // Hover state
+  &:hover {
+    background: color-mix(in srgb, var(--osi-section-item-background) 90%, var(--foreground) 10%);
+  }
+
+  // Active state
+  &:active {
+    background: color-mix(in srgb, var(--osi-section-item-background) 85%, var(--foreground) 15%);
+  }
+
+  // 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);
+  }
+
+  // Disabled state
+  &:disabled,
+  &[aria-disabled="true"] {
+    opacity: var(--state-disabled-opacity);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}
+
+// =====================================================================
+// BORDER ANIMATIONS
+// =====================================================================
+
+@mixin animated-border {
+  position: relative;
+  border: 1px solid transparent;
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    padding: 1px;
+    background: linear-gradient(135deg, transparent 0%, var(--accent) 50%, transparent 100%);
+    -webkit-mask:
+      linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    opacity: 0;
+    transition: opacity var(--duration-base) var(--ease-out);
+  }
+
+  &:hover::before {
+    opacity: 1;
+  }
+}
+
+// =====================================================================
+// RIPPLE EFFECT
+// =====================================================================
+
+@mixin ripple-effect {
+  position: relative;
+  overflow: hidden;
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.5);
+    transform: translate(-50%, -50%);
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  &:active::after {
+    width: 200%;
+    height: 200%;
+    opacity: 1;
+    transition:
+      width var(--duration-slow) var(--ease-out),
+      height var(--duration-slow) var(--ease-out),
+      opacity var(--duration-fast) var(--ease-out);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    &::after {
+      display: none;
+    }
+  }
+}
+
+// =====================================================================
+// SKELETON LOADING
+// =====================================================================
+
+@keyframes skeleton-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+
+@mixin skeleton-loading {
+  background: var(--muted);
+  border-radius: var(--radius-md);
+  animation: skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+}
+
+// =====================================================================
+// SMOOTH CORNERS (iOS-style)
+// =====================================================================
+
+@mixin smooth-corners($radius: var(--radius-lg)) {
+  border-radius: $radius;
+
+  // Enhanced for supporting browsers
+  @supports (border-radius: var(--radius-lg) / var(--radius-lg)) {
+    border-radius: $radius / calc($radius * 1.5);
+  }
+}
+
+// =====================================================================
+// FADE IN ANIMATIONS
+// =====================================================================
+
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 10px, 0);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes fade-in-scale {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 0, 0) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+}
+
+@mixin fade-in-animation($type: "up", $delay: 0ms) {
+  animation: fade-in-#{$type} var(--duration-base) var(--ease-out) $delay forwards;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+    opacity: 1;
+    transform: none;
+  }
+}
+
+// =====================================================================
+// STAGGER ANIMATION UTILITIES
+// =====================================================================
+
+@mixin stagger-children($max: 10, $delay-increment: 50ms) {
+  @for $i from 1 through $max {
+    &:nth-child(#{$i}) {
+      animation-delay: calc(#{$i - 1} * #{$delay-increment});
+    }
+  }
+}
+
+// =====================================================================
+// FROSTED GLASS EFFECT
+// =====================================================================
+
+@mixin frosted-glass($blur: var(--blur-md), $opacity: 0.8) {
+  background: rgba(255, 255, 255, $opacity);
+  backdrop-filter: blur($blur) saturate(180%);
+  -webkit-backdrop-filter: blur($blur) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+
+  @media (prefers-color-scheme: dark) {
+    background: rgba(0, 0, 0, $opacity);
+    border-color: rgba(255, 255, 255, 0.1);
+  }
+}
+
+// =====================================================================
+// NEUMORPHISM (Soft UI)
+// =====================================================================
+
+@mixin neumorphic-card($raised: true) {
+  background: var(--osi-section-item-background);
+  border-radius: var(--radius-xl);
+
+  @if $raised {
+    box-shadow:
+      8px 8px 16px rgba(0, 0, 0, 0.1),
+      -8px -8px 16px rgba(255, 255, 255, 0.7);
+  } @else {
+    box-shadow:
+      inset 8px 8px 16px rgba(0, 0, 0, 0.1),
+      inset -8px -8px 16px rgba(255, 255, 255, 0.7);
+  }
+
+  transition: box-shadow var(--duration-base) var(--ease-out);
+
+  &:hover {
+    @if $raised {
+      box-shadow:
+        12px 12px 24px rgba(0, 0, 0, 0.12),
+        -12px -12px 24px rgba(255, 255, 255, 0.8);
+    }
+  }
+}
+
+// =====================================================================
+// SCROLL REVEAL (Intersection Observer Companion)
+// =====================================================================
+
+@mixin scroll-reveal {
+  opacity: 0;
+  transform: translate3d(0, 20px, 0);
+  transition:
+    opacity var(--duration-slow) var(--ease-out),
+    transform var(--duration-slow) var(--ease-out);
+
+  &.is-revealed {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    opacity: 1;
+    transform: none;
+  }
+}