osi-cards-lib 1.5.30 → 1.5.32

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

@@ -1,302 +0,0 @@
-// =====================================================================
-// MASTER COMPACT SYSTEM - Intelligent Structure
-// =====================================================================
-//
-// This isn't just about reducing padding - it's about SMART LAYOUT
-// Horizontal when possible, vertical when needed, adaptive always
-//
-// =====================================================================
-
-// =====================================================================
-// CONSISTENT SPACING SYSTEM
-// =====================================================================
-
-:root {
-  // Base spacing scale (strictly enforced)
-  --compact-space-1: 2px; // Micro
-  --compact-space-2: 4px; // Tight
-  --compact-space-3: 6px; // Compact
-  --compact-space-4: 8px; // Standard
-  --compact-space-5: 10px; // Comfortable
-  --compact-space-6: 12px; // Spacious
-
-  // Component spacing (consistent application)
-  --compact-card-padding: 8px;
-  --compact-item-padding-y: 6px;
-  --compact-item-padding-x: 8px;
-  --compact-gap-tight: 4px;
-  --compact-gap-standard: 6px;
-  --compact-gap-comfortable: 8px;
-}
-
-// =====================================================================
-// INTELLIGENT LAYOUT MIXINS
-// =====================================================================
-
-// Smart card that uses horizontal space wisely
-@mixin smart-card-horizontal {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  grid-template-rows: auto auto;
-  gap: var(--compact-gap-tight);
-  align-items: center;
-
-  // On narrow screens, switch to vertical
-  @media (max-width: 200px) {
-    grid-template-columns: 1fr;
-    grid-template-rows: auto;
-  }
-}
-
-// Metric card optimized for 200px width
-@mixin metric-card-200px {
-  padding: var(--compact-card-padding);
-  display: grid;
-  grid-template-areas:
-    "label trend"
-    "value value"
-    "extra extra";
-  grid-template-columns: 1fr auto;
-  gap: var(--compact-gap-tight);
-  align-items: start;
-  min-height: 75px;
-
-  .label {
-    grid-area: label;
-  }
-  .trend {
-    grid-area: trend;
-  }
-  .value {
-    grid-area: value;
-  }
-  .extra {
-    grid-area: extra;
-  }
-}
-
-// List item optimized for 400px width
-@mixin list-item-400px {
-  padding: var(--compact-item-padding-y) var(--compact-item-padding-x);
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  gap: var(--compact-gap-standard);
-  align-items: center;
-  min-height: 40px;
-}
-
-// Contact card optimized for vertical space
-@mixin contact-card-compact {
-  padding: var(--compact-card-padding);
-  display: grid;
-  grid-template-areas:
-    "avatar"
-    "info"
-    "actions";
-  grid-template-rows: auto 1fr auto;
-  gap: var(--compact-gap-tight);
-  justify-items: center;
-  text-align: center;
-}
-
-// =====================================================================
-// RESPONSIVE GRID SYSTEM
-// =====================================================================
-
-@mixin responsive-grid-200px {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: var(--compact-gap-comfortable);
-
-  @media (max-width: 640px) {
-    grid-template-columns: repeat(2, 1fr);
-    gap: var(--compact-gap-standard);
-  }
-
-  @media (max-width: 420px) {
-    grid-template-columns: 1fr;
-  }
-}
-
-@mixin responsive-list-400px {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  min-width: 400px;
-
-  @media (max-width: 640px) {
-    min-width: 100%;
-  }
-}
-
-// =====================================================================
-// CONSISTENT CARD STRUCTURE
-// =====================================================================
-
-@mixin base-card {
-  position: relative;
-  background: var(--card, #0c0c0c);
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  border-radius: 8px;
-  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;
-    }
-  }
-}
-
-@mixin base-list {
-  padding: var(--compact-space-2);
-  background: var(--card, #0c0c0c);
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  border-radius: 8px;
-  box-sizing: border-box;
-}
-
-@mixin base-item {
-  padding: var(--compact-item-padding-y) var(--compact-item-padding-x);
-  border-radius: 4px;
-  transition: background 150ms ease-out;
-  box-sizing: border-box;
-
-  &:not(:last-child) {
-    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
-  }
-
-  &:hover {
-    background: rgba(255, 255, 255, 0.02);
-  }
-}
-
-// =====================================================================
-// TYPOGRAPHY - CONSISTENT SYSTEM
-// =====================================================================
-
-@mixin text-label-compact {
-  font-size: 0.6rem;
-  font-weight: 600;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-  color: var(--muted-foreground, #999);
-  line-height: 1.1;
-}
-
-@mixin text-value-compact {
-  font-size: 1.1rem;
-  font-weight: 700;
-  font-variant-numeric: tabular-nums;
-  color: var(--foreground, #fff);
-  line-height: 1;
-}
-
-@mixin text-title-compact {
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: var(--foreground, #fff);
-  line-height: 1.2;
-}
-
-@mixin text-body-compact {
-  font-size: 0.7rem;
-  font-weight: 400;
-  color: var(--muted-foreground, #999);
-  line-height: 1.3;
-}
-
-// =====================================================================
-// REDUCED MOTION - CONSISTENT
-// =====================================================================
-
-@mixin reduced-motion-safe {
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-    animation: none;
-
-    &:hover {
-      transform: none;
-    }
-  }
-}
-
-// =====================================================================
-// VISUAL HIERARCHY - SMART SPACING
-// =====================================================================
-
-// Breathing room for visual appeal
-@mixin visual-spacing {
-  // Not everything needs to be cramped
-  // Strategic spacing for visual hierarchy
-
-  > *:not(:first-child) {
-    margin-top: var(--compact-gap-tight);
-  }
-
-  .primary-content {
-    margin: var(--compact-gap-standard) 0;
-  }
-
-  .secondary-content {
-    margin-top: auto; // Push to bottom
-  }
-}
-
-// =====================================================================
-// SMART TRUNCATION
-// =====================================================================
-
-@mixin smart-truncate($lines: 1) {
-  @if $lines == 1 {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  } @else {
-    display: -webkit-box;
-    -webkit-line-clamp: $lines;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-}
-
-// =====================================================================
-// INTERACTIVE STATES - CONSISTENT
-// =====================================================================
-
-@mixin interactive-card {
-  cursor: pointer;
-
-  &:hover {
-    .accent-text {
-      color: var(--accent, #ff7900);
-    }
-  }
-
-  &:active {
-    transform: translateY(0);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--accent, #ff7900);
-    outline-offset: 2px;
-  }
-}

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

@@ -1,239 +0,0 @@
-// =====================================================================
-// MASTER DENSE SYSTEM - Final Consolidated Design Library
-// =====================================================================
-//
-// Optimized typography, smart structures, adaptive layouts
-// Each component preserves style while maximizing density
-//
-// =====================================================================
-
-// =====================================================================
-// CONSOLIDATED SPACING (Consistent across all sections)
-// =====================================================================
-
-:root {
-  // Standard spacing
-  --ds-space-2: 2px;
-  --ds-space-4: 4px;
-  --ds-space-6: 6px;
-  --ds-space-8: 8px;
-  --ds-space-10: 10px;
-  --ds-space-12: 12px;
-  --ds-space-14: 14px;
-  --ds-space-16: 16px;
-
-  // Component spacing (final standards)
-  --ds-card-padding: 14px 12px; // Slightly reduced
-  --ds-card-gap: 8px; // Tighter internal
-  --ds-item-padding: 10px 12px; // Good for lists
-  --ds-grid-gap: 12px; // Between cards
-  --ds-section-gap: 10px; // Section to content
-}
-
-// =====================================================================
-// CONSOLIDATED TYPOGRAPHY (Reduced sizes, tight hierarchy)
-// =====================================================================
-
-:root {
-  // Reduced font scale
-  --ds-text-xs: 0.5625rem; // 9px - Tiny meta
-  --ds-text-sm: 0.625rem; // 10px - Labels
-  --ds-text-base: 0.6875rem; // 11px - Small body
-  --ds-text-md: 0.75rem; // 12px - Body text
-  --ds-text-lg: 0.8125rem; // 13px - Titles
-  --ds-text-xl: 0.875rem; // 14px - Large titles
-  --ds-text-2xl: 1rem; // 16px - Values
-  --ds-text-3xl: 1.125rem; // 18px - Large values
-  --ds-text-4xl: 1.25rem; // 20px - Metrics
-
-  // Tight line heights
-  --ds-leading-tight: 1;
-  --ds-leading-snug: 1.1;
-  --ds-leading-normal: 1.2;
-  --ds-leading-relaxed: 1.3;
-  --ds-leading-loose: 1.4;
-}
-
-// =====================================================================
-// MASTER CARD MIXIN (Consolidated)
-// =====================================================================
-
-@mixin ds-card {
-  position: relative;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  padding: var(--ds-card-padding);
-  display: flex;
-  flex-direction: column;
-  gap: var(--ds-card-gap);
-  transition: all 300ms var(--ease-out);
-
-  &::after {
-    content: "";
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 2px;
-    background: linear-gradient(90deg, var(--accent) 0%, transparent 100%);
-    opacity: 0;
-    transition: opacity 300ms var(--ease-out);
-  }
-
-  &:hover {
-    transform: translateY(-3px);
-    box-shadow: var(--shadow-lg);
-
-    &::after {
-      opacity: 0.8;
-    }
-  }
-}
-
-// =====================================================================
-// MASTER LIST MIXINS (Consolidated)
-// =====================================================================
-
-@mixin ds-list {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  padding: 8px 10px;
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-}
-
-@mixin ds-item {
-  padding: var(--ds-item-padding);
-  border-radius: var(--radius-sm);
-  transition: all 200ms var(--ease-out);
-
-  &:not(:last-child) {
-    border-bottom: 1px solid var(--border);
-  }
-
-  &:hover {
-    background: var(--surface-raised);
-  }
-}
-
-// =====================================================================
-// TYPOGRAPHY MIXINS (Consolidated & Reduced)
-// =====================================================================
-
-@mixin ds-label {
-  font-size: var(--ds-text-sm);
-  font-weight: 600;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-  color: var(--muted-foreground);
-  line-height: var(--ds-leading-snug);
-}
-
-@mixin ds-title {
-  font-size: var(--ds-text-lg);
-  font-weight: 600;
-  color: var(--foreground);
-  line-height: var(--ds-leading-normal);
-  transition: color 200ms ease-out;
-}
-
-@mixin ds-body {
-  font-size: var(--ds-text-md);
-  font-weight: 400;
-  color: var(--muted-foreground);
-  line-height: var(--ds-leading-relaxed);
-}
-
-@mixin ds-value {
-  font-size: var(--ds-text-4xl);
-  font-weight: 700;
-  color: var(--foreground);
-  line-height: var(--ds-leading-tight);
-  font-variant-numeric: tabular-nums;
-}
-
-@mixin ds-meta {
-  font-size: var(--ds-text-base);
-  color: var(--muted-foreground);
-  opacity: 0.7;
-  line-height: var(--ds-leading-snug);
-}
-
-// =====================================================================
-// GRID SYSTEMS (Responsive & Adaptive)
-// =====================================================================
-
-@mixin ds-grid-adaptive($min-width) {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax($min-width, 1fr));
-  gap: var(--ds-grid-gap);
-
-  @media (max-width: 768px) {
-    gap: 10px;
-  }
-
-  @media (max-width: 640px) {
-    grid-template-columns: repeat(2, 1fr);
-    gap: 8px;
-  }
-
-  @media (max-width: 420px) {
-    grid-template-columns: 1fr;
-  }
-}
-
-// =====================================================================
-// OVERLAY SYSTEM (For max density)
-// =====================================================================
-
-@mixin ds-overlay-dark {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  padding: 8px 10px;
-  background: linear-gradient(
-    to top,
-    rgba(0, 0, 0, 0.88) 0%,
-    rgba(0, 0, 0, 0.65) 65%,
-    transparent 100%
-  );
-  -webkit-backdrop-filter: blur(6px);
-  backdrop-filter: blur(6px);
-}
-
-@mixin ds-text-overlay {
-  color: #fff;
-  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
-  line-height: var(--ds-leading-snug);
-}
-
-// =====================================================================
-// UTILITIES
-// =====================================================================
-
-@mixin ds-truncate($lines: 1) {
-  @if $lines == 1 {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  } @else {
-    display: -webkit-box;
-    -webkit-line-clamp: $lines;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-}
-
-@mixin ds-reduced-motion {
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-    animation: none;
-    &:hover {
-      transform: none;
-    }
-  }
-}