osi-cards-lib 1.5.30 → 1.5.32

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

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