osi-cards-lib 1.5.32 → 1.5.34

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

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