osi-cards-lib 1.5.30 → 1.5.32

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

@@ -1,186 +0,0 @@
-// =====================================================================
-// BALANCED COMPACT SYSTEM - Smart Structure + Visual Appeal
-// =====================================================================
-//
-// The key is SMART STRUCTURE, not just removing padding
-// Balance between efficiency and aesthetics
-//
-// =====================================================================
-
-:root {
-  // BALANCED spacing (not too cramped, not too spacious)
-  --balanced-space-2: 2px;
-  --balanced-space-3: 4px;
-  --balanced-space-4: 6px;
-  --balanced-space-5: 8px;
-  --balanced-space-6: 10px;
-  --balanced-space-7: 12px;
-  --balanced-space-8: 14px;
-
-  // Component spacing (visually pleasant)
-  --balanced-card-padding: 12px; // Cards need breathing room
-  --balanced-card-padding-mobile: 10px;
-  --balanced-item-padding-y: 10px; // Comfortable for touch
-  --balanced-item-padding-x: 12px;
-  --balanced-gap-tight: 6px; // Between close elements
-  --balanced-gap-comfortable: 8px; // Standard gap
-  --balanced-gap-spacious: 10px; // For visual separation
-  --balanced-section-gap: 10px; // Between sections
-}
-
-// =====================================================================
-// VISUAL APPEAL MIXINS
-// =====================================================================
-
-@mixin beautiful-card {
-  position: relative;
-  background: var(--card, #0c0c0c);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 10px;
-  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
-  box-sizing: border-box;
-
-  // Subtle accent line
-  &::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 2px;
-    background: linear-gradient(90deg, var(--accent, #ff7900) 0%, transparent 100%);
-    opacity: 0;
-    transition: opacity 250ms ease-out;
-  }
-
-  &:hover {
-    border-color: rgba(255, 255, 255, 0.15);
-    transform: translateY(-2px);
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
-
-    &::before {
-      opacity: 0.7;
-    }
-  }
-}
-
-@mixin beautiful-list {
-  padding: var(--balanced-space-4);
-  background: var(--card, #0c0c0c);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 10px;
-  box-sizing: border-box;
-}
-
-@mixin beautiful-item {
-  padding: var(--balanced-item-padding-y) var(--balanced-item-padding-x);
-  border-radius: 6px;
-  transition: all 200ms ease-out;
-  box-sizing: border-box;
-
-  &:not(:last-child) {
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-  }
-
-  &:hover {
-    background: rgba(255, 255, 255, 0.03);
-  }
-}
-
-// =====================================================================
-// TYPOGRAPHY - BALANCED (Readable + Compact)
-// =====================================================================
-
-@mixin text-label-balanced {
-  font-size: 0.65rem;
-  font-weight: 600;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-  color: var(--muted-foreground, #999);
-  line-height: 1.2;
-}
-
-@mixin text-value-balanced {
-  font-size: 1.3rem;
-  font-weight: 700;
-  font-variant-numeric: tabular-nums;
-  color: var(--foreground, #fff);
-  line-height: 1.1;
-}
-
-@mixin text-title-balanced {
-  font-size: 0.8rem;
-  font-weight: 600;
-  color: var(--foreground, #fff);
-  line-height: 1.3;
-}
-
-@mixin text-body-balanced {
-  font-size: 0.75rem;
-  font-weight: 400;
-  color: var(--muted-foreground, #999);
-  line-height: 1.4;
-}
-
-// =====================================================================
-// RESPONSIVE GRID - WITH PROPER GAPS
-// =====================================================================
-
-@mixin responsive-grid-200px-balanced {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: var(--balanced-gap-spacious);
-
-  @media (max-width: 640px) {
-    grid-template-columns: repeat(2, 1fr);
-    gap: var(--balanced-gap-comfortable);
-  }
-
-  @media (max-width: 420px) {
-    grid-template-columns: 1fr;
-  }
-}
-
-@mixin responsive-list-400px-balanced {
-  display: block;
-  width: 100%;
-  min-width: 400px;
-
-  @media (max-width: 640px) {
-    min-width: 100%;
-  }
-}
-
-// =====================================================================
-// INTERACTIVE STATES - BEAUTIFUL ANIMATIONS
-// =====================================================================
-
-@mixin interactive-beautiful {
-  cursor: pointer;
-
-  &:hover {
-    .accent-text {
-      color: var(--accent, #ff7900);
-    }
-  }
-
-  &:active {
-    transform: translateY(0);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--accent, #ff7900);
-    outline-offset: 2px;
-  }
-}
-
-@mixin reduced-motion-safe {
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-    animation: none;
-
-    &:hover {
-      transform: none;
-    }
-  }
-}

package/styles/components/sections/_compact-mixins.scss

@@ -1,180 +0,0 @@
-// =====================================================================
-// COMPACT LAYOUT MIXINS
-// =====================================================================
-//
-// Optimized mixins for denser, more compact section layouts.
-// Uses reduced spacing while maintaining readability.
-//
-// =====================================================================
-
-@use "design-tokens" as *;
-@use "sections-base" as base;
-@use "component-mixins" as components;
-@use "modern-effects" as effects;
-@use "typography-system" as typo;
-
-// =====================================================================
-// COMPACT SECTION CONTAINER
-// =====================================================================
-
-@mixin section-container-compact {
-  display: flex;
-  flex-direction: column;
-  gap: var(--section-header-gap);
-}
-
-@mixin section-header-compact {
-  margin-bottom: var(--spacing-compact-sm);
-
-  .section-title,
-  h3 {
-    font-size: var(--text-xl);
-    font-weight: var(--font-bold);
-    line-height: var(--leading-tight);
-    color: var(--foreground);
-    margin: 0 0 var(--spacing-compact-xs);
-  }
-
-  .section-description,
-  p {
-    font-size: var(--text-sm);
-    color: var(--muted-foreground);
-    line-height: var(--leading-snug);
-    margin: 0;
-  }
-}
-
-// =====================================================================
-// COMPACT CARD VARIANTS
-// =====================================================================
-
-@mixin card-compact {
-  @include base.card;
-  padding: var(--spacing-compact-base) var(--spacing-compact-md);
-  gap: var(--spacing-compact-sm);
-  min-height: var(--section-card-compact-height);
-}
-
-@mixin card-compact-elevated {
-  @include card-compact;
-  @include effects.elevated-card;
-}
-
-@mixin card-compact-glass {
-  @include card-compact;
-  @include effects.glass-card;
-}
-
-// =====================================================================
-// COMPACT GRID LAYOUTS
-// =====================================================================
-
-@mixin grid-compact($min-width: 140px) {
-  @include section-grid($min-width, var(--spacing-compact-md));
-}
-
-@mixin list-compact {
-  @include list-stack(var(--spacing-compact-sm));
-}
-
-// =====================================================================
-// COMPACT TYPOGRAPHY
-// =====================================================================
-
-@mixin heading-compact($level: 5) {
-  font-size: var(--text-base);
-  font-weight: var(--font-semibold);
-  line-height: var(--leading-tight);
-  color: var(--foreground);
-  margin: 0;
-}
-
-@mixin body-compact {
-  font-size: var(--text-sm);
-  font-weight: var(--font-normal);
-  line-height: var(--leading-snug);
-  color: var(--foreground);
-  margin: 0;
-}
-
-@mixin caption-compact {
-  font-size: 0.6rem;
-  font-weight: var(--font-medium);
-  line-height: var(--leading-tight);
-  color: var(--muted-foreground);
-  margin: 0;
-}
-
-@mixin label-compact {
-  font-size: 0.6rem;
-  font-weight: var(--font-semibold);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: var(--muted-foreground);
-  line-height: 1.2;
-}
-
-// =====================================================================
-// COMPACT BADGES & INDICATORS
-// =====================================================================
-
-@mixin badge-compact($variant: "default") {
-  @include components.badge-modern($variant);
-  font-size: 0.55rem;
-  padding: 1px 4px;
-  gap: 2px;
-}
-
-// =====================================================================
-// COMPACT EMPTY STATES
-// =====================================================================
-
-@mixin empty-state-compact {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--spacing-compact-sm);
-  padding: var(--spacing-lg);
-  text-align: center;
-
-  .empty-icon {
-    font-size: 36px;
-    opacity: 0.25;
-  }
-
-  .empty-text {
-    font-size: var(--text-sm);
-    color: var(--muted-foreground);
-    margin: 0;
-  }
-}
-
-// =====================================================================
-// UTILITY: Apply Compact Mode to Section
-// =====================================================================
-
-@mixin apply-compact-mode {
-  // Reduce all spacing
-  gap: var(--spacing-compact-md);
-
-  // Reduce padding on cards
-  .card,
-  [class*="-card"],
-  [class$="-card"] {
-    padding: var(--spacing-compact-base) var(--spacing-compact-md);
-    gap: var(--spacing-compact-sm);
-  }
-
-  // Reduce grid gaps
-  [class*="-grid"],
-  [class$="-grid"] {
-    gap: var(--spacing-compact-md);
-  }
-
-  // Reduce list gaps
-  [class*="-list"],
-  [class$="-list"] {
-    gap: var(--spacing-compact-sm);
-  }
-}