osi-cards-lib 1.5.30 → 1.5.32

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

@@ -1,268 +0,0 @@
-// =====================================================================
-// 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

@@ -1,392 +0,0 @@
-// =====================================================================
-// 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;
-  }
-}