osi-cards-lib 1.5.30 → 1.5.32

package/styles/components/sections/_design-system.scss

@@ -1,477 +0,0 @@
-// =====================================================================
-// DESIGN SYSTEM - Enhanced Modern Design System
-// =====================================================================
-//
-// Comprehensive design system with:
-// - Design tokens (spacing, typography, colors, effects)
-// - Modern effects (glass morphism, gradients, animations)
-// - Component mixins (pre-built patterns)
-// - Typography system (semantic text styles)
-// - Utility classes (optional rapid development)
-//
-// All styles use CSS variables for theme-ability.
-//
-// =====================================================================
-
-@use "../../tokens/master" as *;
-
-// Import enhanced modules
-@use "design-tokens" as tokens;
-@use "modern-effects" as effects;
-@use "component-mixins" as components;
-@use "typography-system" as typo;
-@use "compact-mixins" as compact;
-
-// Import base styles (legacy compatibility)
-@import "sections-base";
-
-// =====================================================================
-// GRID LAYOUTS
-// =====================================================================
-
-@mixin section-responsive-grid(
-  $min-width: var(--section-grid-min-width),
-  $gap: var(--section-card-gap)
-) {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax($min-width, 1fr));
-  gap: $gap;
-  width: 100%;
-  box-sizing: border-box;
-
-  @media (max-width: 420px) {
-    grid-template-columns: 1fr;
-  }
-}
-
-@mixin grid-2col($gap: var(--section-card-gap), $min-width: var(--section-grid-min-width)) {
-  @include section-responsive-grid($min-width, $gap);
-}
-
-@mixin grid-auto-fit($min-width: var(--section-grid-min-width), $gap: var(--section-card-gap)) {
-  @include section-responsive-grid($min-width, $gap);
-}
-
-@mixin list-stack($gap: var(--section-card-gap)) {
-  display: flex;
-  flex-direction: column;
-  gap: $gap;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-// Section header layout
-@mixin section-header($direction: row, $gap: var(--section-card-gap)) {
-  display: flex;
-  flex-direction: $direction;
-  gap: $gap;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-// Section heading text
-@mixin section-heading-text {
-  font-size: var(--section-title-font-size, 1.1rem);
-  font-weight: var(--section-title-font-weight, 700);
-  letter-spacing: var(--section-title-letter-spacing, -0.02em);
-  line-height: var(--section-title-line-height, 1.3);
-  color: var(--card-text-primary, #{$foreground-color});
-  margin: 0;
-}
-
-// Section description text
-@mixin section-description-text {
-  font-size: var(--section-description-font-size, 0.8rem);
-  font-weight: 400;
-  color: var(--card-text-secondary, #{$foreground-60});
-  line-height: 1.4;
-  margin: 0;
-}
-
-// Section body
-@mixin section-body($gap: var(--section-card-gap)) {
-  display: flex;
-  flex-direction: column;
-  gap: $gap;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-// Standard badge
-@mixin standard-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 3px;
-  padding: 2px 6px;
-  font-size: 0.55rem;
-  font-weight: 600;
-  letter-spacing: 0.03em;
-  text-transform: uppercase;
-  color: #{$brand-color};
-  background: #{$brand-color-10};
-  border-radius: 4px;
-  white-space: nowrap;
-}
-
-@mixin section-compact-grid($min-width: 220px, $gap: var(--section-card-gap)) {
-  @include section-responsive-grid($min-width, $gap);
-}
-
-// =====================================================================
-// CARD LAYOUT HELPERS
-// =====================================================================
-
-@mixin compact-card-layout {
-  gap: var(--card-gap);
-  padding: var(--card-padding);
-  min-height: auto;
-  box-sizing: border-box;
-}
-
-@mixin compact-card-header($gap: var(--card-gap)) {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: $gap;
-  width: 100%;
-}
-
-@mixin compact-card-meta($gap: var(--card-gap)) {
-  display: flex;
-  justify-content: flex-start;
-  flex-wrap: wrap;
-  gap: $gap;
-  width: 100%;
-  font-size: var(--card-meta-font-size);
-  color: var(--muted-foreground);
-}
-
-// =====================================================================
-// TYPOGRAPHY - Uses CSS Variables
-// =====================================================================
-
-@mixin label-text {
-  font-size: var(--card-label-font-size);
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  color: var(--muted-foreground);
-  line-height: 1.3;
-  font-family: inherit;
-}
-
-@mixin value-text {
-  font-size: var(--card-value-font-size);
-  font-weight: 600;
-  color: var(--foreground);
-  letter-spacing: -0.01em;
-  line-height: 1.3;
-  font-family: inherit;
-}
-
-@mixin value-text-lg {
-  font-size: var(--card-value-font-size-large);
-  font-weight: 600;
-  color: var(--foreground);
-  letter-spacing: -0.01em;
-  line-height: 1.2;
-  font-family: inherit;
-}
-
-@mixin card-title-text {
-  font-size: var(--card-title-font-size);
-  font-weight: 600;
-  color: var(--foreground);
-  line-height: 1.4;
-  font-family: inherit;
-}
-
-@mixin card-subtitle-text {
-  font-size: var(--card-subtitle-font-size);
-  font-weight: 400;
-  color: var(--muted-foreground);
-  line-height: 1.5;
-  font-family: inherit;
-}
-
-@mixin card-meta-text {
-  font-size: var(--card-meta-font-size);
-  font-weight: 500;
-  color: var(--muted-foreground);
-  line-height: 1.3;
-  font-family: inherit;
-}
-
-// Legacy alias
-@mixin section-title-text {
-  @include card-title-text;
-}
-
-// =====================================================================
-// SECTION CONTAINER
-// =====================================================================
-
-@mixin section-wrapper {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: var(--section-card-gap);
-  padding: var(--section-padding);
-  border-radius: var(--osi-section-item-border-radius);
-  background: var(--section-background);
-  border: var(--section-border);
-  box-shadow: var(--section-box-shadow);
-}
-
-// =====================================================================
-// ICON
-// =====================================================================
-
-@mixin icon-base($size: 16px) {
-  width: $size;
-  height: $size;
-  flex-shrink: 0;
-  color: var(--accent);
-}
-
-@mixin icon-button-base($size: 20px) {
-  width: $size;
-  height: $size;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  color: var(--accent);
-  background: transparent;
-  cursor: pointer;
-  transition: background 0.2s ease;
-
-  &:hover {
-    background: var(--muted);
-  }
-}
-
-// =====================================================================
-// PROGRESS BAR
-// =====================================================================
-
-@mixin progress-bar-track {
-  width: 100%;
-  height: 4px;
-  background: var(--border);
-  border-radius: 2px;
-  overflow: hidden;
-}
-
-@mixin progress-bar-fill {
-  height: 100%;
-  background: var(--accent);
-  border-radius: inherit;
-  transition: width 0.3s ease;
-}
-
-// =====================================================================
-// AVATAR
-// =====================================================================
-
-@mixin avatar-base($size: 36px) {
-  width: $size;
-  height: $size;
-  border-radius: 50%;
-  background: #{$brand-color-15};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  overflow: hidden;
-
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-
-  lucide-icon,
-  svg {
-    width: calc($size * 0.5);
-    height: calc($size * 0.5);
-    color: var(--accent);
-  }
-}
-
-// =====================================================================
-// EMPTY STATE
-// =====================================================================
-
-@mixin empty-state-base {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--card-gap);
-  padding: calc(var(--card-padding) * 2);
-  text-align: center;
-  color: var(--muted-foreground);
-  background: var(--osi-section-item-background);
-  border: 1px dashed var(--border);
-  border-radius: var(--osi-section-item-border-radius);
-
-  lucide-icon,
-  svg {
-    opacity: 0.4;
-    width: 32px;
-    height: 32px;
-  }
-
-  p {
-    margin: 0;
-    font-size: var(--card-subtitle-font-size);
-  }
-}
-
-// =====================================================================
-// CARD BASE (Legacy support)
-// =====================================================================
-
-@mixin section-card-base {
-  @include card;
-}
-
-// =====================================================================
-// MODERN ICON (Legacy support)
-// =====================================================================
-
-@mixin modern-icon($size: 40px) {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: $size;
-  height: $size;
-  border-radius: 50%;
-  background: #{$brand-color-10};
-  flex-shrink: 0;
-
-  lucide-icon,
-  svg {
-    width: calc($size * 0.5);
-    height: calc($size * 0.5);
-    color: var(--accent);
-  }
-}
-
-// =====================================================================
-// ENHANCED MIXINS - Quick Access Aliases
-// =====================================================================
-
-// Modern card variants
-@mixin card-elevated {
-  @include components.card-elevated;
-}
-
-@mixin card-glass {
-  @include components.card-glass;
-}
-
-// Typography quick access
-@mixin heading($level: 1) {
-  @if $level == 1 {
-    @include typo.heading-1;
-  } @else if $level == 2 {
-    @include typo.heading-2;
-  } @else if $level == 3 {
-    @include typo.heading-3;
-  } @else if $level == 4 {
-    @include typo.heading-4;
-  } @else if $level == 5 {
-    @include typo.heading-5;
-  } @else {
-    @include typo.heading-6;
-  }
-}
-
-@mixin body-text($size: "base") {
-  @if $size == "large" {
-    @include typo.body-large;
-  } @else if $size == "small" {
-    @include typo.body-small;
-  } @else if $size == "xs" {
-    @include typo.body-xs;
-  } @else {
-    @include typo.body-base;
-  }
-}
-
-// =====================================================================
-// DESIGN SYSTEM USAGE DOCUMENTATION
-// =====================================================================
-//
-// ## Quick Examples
-//
-// ### 1. Enhanced Card with Effects
-// ```scss
-// .my-card {
-//   @include card-elevated;  // Card with lift effect
-//   @include effects.shimmer-effect;  // Add shimmer
-// }
-// ```
-//
-// ### 2. Glass Morphism Card
-// ```scss
-// .glass-panel {
-//   @include card-glass;  // Frosted glass effect
-// }
-// ```
-//
-// ### 3. Stat/Metric Display
-// ```scss
-// .stat-card {
-//   @include components.stat-card;
-//
-//   .label {
-//     @include components.stat-label;
-//   }
-//
-//   .value {
-//     @include components.stat-value;
-//   }
-// }
-// ```
-//
-// ### 4. Modern Badge
-// ```scss
-// .status-badge {
-//   @include components.badge-modern('success');
-// }
-// ```
-//
-// ### 5. Typography
-// ```scss
-// .title {
-//   @include heading(2);  // H2 styling
-// }
-//
-// .description {
-//   @include body-text('small');
-// }
-// ```
-//
-// ### 6. Using Design Tokens
-// ```scss
-// .custom-element {
-//   margin: var(--spacing-md);
-//   padding: var(--spacing-base);
-//   border-radius: var(--radius-lg);
-//   box-shadow: var(--shadow-md);
-//   transition: var(--transition-base);
-// }
-// ```
-//
-// ### 7. Interactive Surface
-// ```scss
-// .clickable-card {
-//   @include card;
-//   @include effects.interactive-surface;
-// }
-// ```
-//
-// =====================================================================