osi-cards-lib 1.5.32 → 1.5.34

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

@@ -0,0 +1,454 @@
+// =====================================================================
+// ADVANCED COMPONENT MIXINS
+// =====================================================================
+//
+// Pre-built component patterns for common UI elements.
+// Combines design tokens, effects, and best practices.
+//
+// =====================================================================
+
+@use "design-tokens" as *;
+@use "modern-effects" as effects;
+@use "sections-base" as base;
+
+// =====================================================================
+// ENHANCED CARD VARIANTS
+// =====================================================================
+
+@mixin card-elevated {
+  @include base.card;
+  @include effects.elevated-card;
+  @include effects.shimmer-effect;
+}
+
+@mixin card-glass {
+  @include effects.glass-card;
+  padding: var(--spacing-base);
+  border-radius: var(--radius-lg);
+}
+
+@mixin card-neumorphic {
+  @include effects.neumorphic-card(true);
+  padding: var(--spacing-base);
+}
+
+@mixin card-with-gradient {
+  @include base.card;
+  @include effects.gradient-background;
+  @include effects.gradient-accent-top;
+}
+
+// =====================================================================
+// STAT/METRIC CARDS
+// =====================================================================
+
+@mixin stat-card {
+  @include base.card;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-base);
+  min-height: 100px;
+  transition: var(--transition-colors), var(--transition-transform);
+
+  &:hover {
+    transform: translateY(calc(var(--motion-distance-xs) * -1));
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    &:hover {
+      transform: none;
+    }
+  }
+}
+
+@mixin stat-label {
+  font-size: var(--text-xs);
+  font-weight: var(--font-semibold);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--muted-foreground);
+}
+
+@mixin stat-value {
+  font-size: var(--text-3xl);
+  font-weight: var(--font-bold);
+  line-height: var(--leading-tight);
+  color: var(--foreground);
+  letter-spacing: -0.02em;
+}
+
+@mixin stat-change($direction: "neutral") {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  font-size: var(--text-sm);
+  font-weight: var(--font-semibold);
+
+  @if $direction == "positive" {
+    color: var(--status-success);
+  } @else if $direction == "negative" {
+    color: var(--status-error);
+  } @else {
+    color: var(--muted-foreground);
+  }
+}
+
+// =====================================================================
+// BADGES & CHIPS
+// =====================================================================
+
+@mixin badge-modern($variant: "default") {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-xs) var(--spacing-sm);
+  font-size: var(--text-xs);
+  font-weight: var(--font-semibold);
+  letter-spacing: 0.03em;
+  border-radius: var(--radius-full);
+  white-space: nowrap;
+  transition: var(--transition-colors);
+
+  @if $variant == "primary" {
+    background: var(--accent-color-10);
+    color: var(--accent);
+    border: var(--border-width-default) solid var(--accent-color);
+  } @else if $variant == "success" {
+    background: var(--status-success-10);
+    color: var(--status-success);
+  } @else if $variant == "warning" {
+    background: var(--status-warning-10);
+    color: var(--status-warning);
+  } @else if $variant == "error" {
+    background: var(--status-error-10);
+    color: var(--status-error);
+  } @else {
+    background: var(--muted);
+    color: var(--muted-foreground);
+  }
+
+  &:hover {
+    opacity: 0.9;
+  }
+}
+
+@mixin chip-removable {
+  @include badge-modern;
+  padding-right: var(--spacing-xs);
+  cursor: pointer;
+
+  .chip-remove {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--icon-sm);
+    height: var(--icon-sm);
+    border-radius: 50%;
+    transition: var(--transition-colors);
+
+    &:hover {
+      background: var(--osi-section-item-background-hover);
+    }
+  }
+}
+
+// =====================================================================
+// AVATAR COMPONENTS
+// =====================================================================
+
+@mixin avatar($size: 40px) {
+  width: $size;
+  height: $size;
+  border-radius: 50%;
+  overflow: hidden;
+  flex-shrink: 0;
+  position: relative;
+  background: var(--accent-color-10);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  // Fallback initials
+  &::before {
+    font-size: calc($size * 0.4);
+    font-weight: var(--font-semibold);
+    color: var(--accent);
+  }
+}
+
+@mixin avatar-group {
+  display: flex;
+  align-items: center;
+  flex-direction: row-reverse;
+  padding-left: var(--spacing-sm);
+
+  .avatar {
+    margin-left: calc(var(--spacing-sm) * -1);
+    border: var(--border-width-accent-sm) solid var(--osi-section-item-background);
+    transition: transform var(--duration-fast) var(--ease-out);
+
+    &:hover {
+      transform: translateY(calc(var(--motion-distance-xs) * -1));
+      z-index: 1;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .avatar:hover {
+      transform: none;
+    }
+  }
+}
+
+// =====================================================================
+// ICON BUTTONS
+// =====================================================================
+
+@mixin icon-button($size: 36px) {
+  width: $size;
+  height: $size;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-md);
+  background: transparent;
+  border: none;
+  color: var(--foreground);
+  cursor: pointer;
+  transition: var(--transition-colors);
+  position: relative;
+
+  &:hover {
+    background: var(--muted);
+  }
+
+  &:active {
+    background: var(--border);
+  }
+
+  &:focus-visible {
+    outline: var(--border-width-accent-sm) solid var(--accent);
+    outline-offset: var(--border-width-accent-sm);
+  }
+
+  lucide-icon,
+  svg {
+    width: calc($size * 0.55);
+    height: calc($size * 0.55);
+  }
+}
+
+// =====================================================================
+// PROGRESS INDICATORS
+// =====================================================================
+
+@mixin progress-bar($height: 4px) {
+  width: 100%;
+  height: $height;
+  background: var(--muted);
+  border-radius: var(--radius-full);
+  overflow: hidden;
+  position: relative;
+
+  .progress-fill {
+    height: 100%;
+    background: var(--accent);
+    border-radius: inherit;
+    transition: width var(--duration-slow) var(--ease-out);
+  }
+}
+
+@mixin progress-circle($size: 40px, $stroke: 4px) {
+  width: $size;
+  height: $size;
+  position: relative;
+
+  svg {
+    width: 100%;
+    height: 100%;
+    transform: rotate(-90deg);
+
+    circle {
+      fill: none;
+      stroke-width: $stroke;
+      cx: calc($size / 2);
+      cy: calc($size / 2);
+      r: calc(($size - $stroke) / 2);
+
+      &.track {
+        stroke: var(--muted);
+      }
+
+      &.progress {
+        stroke: var(--accent);
+        stroke-linecap: round;
+        transition: stroke-dashoffset var(--duration-slow) var(--ease-out);
+      }
+    }
+  }
+}
+
+// =====================================================================
+// TOOLTIP
+// =====================================================================
+
+@mixin tooltip {
+  position: absolute;
+  z-index: var(--z-tooltip);
+  padding: var(--spacing-xs) var(--spacing-sm);
+  background: rgba(0, 0, 0, 0.9);
+  color: white;
+  font-size: var(--text-xs);
+  font-weight: var(--font-medium);
+  border-radius: var(--radius-md);
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--duration-fast) var(--ease-out);
+
+  // Arrow
+  &::before {
+    content: "";
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-style: solid;
+  }
+
+  &[data-placement="top"] {
+    bottom: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+
+    &::before {
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      border-width: 4px 4px 0 4px;
+      border-color: rgba(0, 0, 0, 0.9) transparent transparent transparent;
+    }
+  }
+
+  &[data-placement="bottom"] {
+    top: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+
+    &::before {
+      bottom: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      border-width: 0 4px 4px 4px;
+      border-color: transparent transparent rgba(0, 0, 0, 0.9) transparent;
+    }
+  }
+}
+
+// =====================================================================
+// DIVIDER
+// =====================================================================
+
+@mixin divider($orientation: "horizontal") {
+  @if $orientation == "horizontal" {
+    width: 100%;
+    height: 1px;
+    background: var(--border);
+    margin: var(--spacing-md) 0;
+  } @else {
+    width: 1px;
+    height: 100%;
+    background: var(--border);
+    margin: 0 var(--spacing-md);
+  }
+}
+
+// =====================================================================
+// INPUT FIELD
+// =====================================================================
+
+@mixin input-field {
+  width: 100%;
+  padding: var(--spacing-sm) var(--spacing-md);
+  font-size: var(--text-base);
+  font-weight: var(--font-normal);
+  color: var(--foreground);
+  background: var(--osi-section-item-background);
+  border: var(--osi-section-item-border);
+  border-radius: var(--osi-section-item-border-radius);
+  outline: none;
+  transition: var(--osi-section-item-transition);
+
+  &:hover {
+    border-color: var(--osi-section-item-border-hover);
+  }
+
+  &:focus {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
+  }
+
+  &::placeholder {
+    color: var(--muted-foreground);
+  }
+
+  &:disabled {
+    opacity: var(--state-disabled-opacity);
+    cursor: not-allowed;
+  }
+}
+
+// =====================================================================
+// SKELETON LOADER
+// =====================================================================
+
+@mixin skeleton($width: 100%, $height: 16px) {
+  width: $width;
+  height: $height;
+  @include effects.skeleton-loading;
+}
+
+// =====================================================================
+// EMPTY STATE
+// =====================================================================
+
+@mixin empty-state-modern {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-md);
+  padding: var(--spacing-2xl);
+  text-align: center;
+
+  .empty-icon {
+    width: 64px;
+    height: 64px;
+    color: var(--muted-foreground);
+    opacity: 0.3;
+  }
+
+  .empty-title {
+    font-size: var(--text-lg);
+    font-weight: var(--font-semibold);
+    color: var(--foreground);
+    margin: 0;
+  }
+
+  .empty-description {
+    font-size: var(--text-base);
+    color: var(--muted-foreground);
+    max-width: 400px;
+    margin: 0;
+  }
+
+  .empty-action {
+    margin-top: var(--spacing-sm);
+  }
+}