osi-cards-lib 1.5.32 → 1.5.34

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

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

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