osi-cards-lib 1.5.32 → 1.5.34

package/styles/_osi-cards-mixins.scss

@@ -0,0 +1,459 @@
+/**
+ * OSI Cards SCSS Mixins
+ * Reusable style patterns for components
+ *
+ * Usage:
+ * @use 'osi-cards-mixins' as mixins;
+ *
+ * .my-component {
+ *   @include mixins.card-base;
+ * }
+ */
+
+// ============================================================================
+// CARD MIXINS
+// ============================================================================
+
+/// Base card styles
+@mixin card-base {
+  background: var(--osi-card-bg, white);
+  border: 1px solid var(--osi-card-border, var(--osi-neutral-200));
+  border-radius: var(--osi-card-radius, var(--osi-radius-xl));
+  box-shadow: var(--osi-card-shadow, var(--osi-shadow-md));
+}
+
+/// Card hover state
+@mixin card-hover {
+  transition:
+    transform var(--osi-duration-200) var(--osi-ease-out),
+    box-shadow var(--osi-duration-200) var(--osi-ease-out);
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--osi-shadow-lg);
+  }
+}
+
+/// Card interactive (clickable)
+@mixin card-interactive {
+  @include card-hover;
+  cursor: pointer;
+
+  &:active {
+    transform: translateY(0);
+    box-shadow: var(--osi-shadow-sm);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--osi-primary-500);
+    outline-offset: 2px;
+  }
+}
+
+// ============================================================================
+// SECTION MIXINS
+// ============================================================================
+
+/// Base section styles
+@mixin section-base {
+  padding: var(--osi-spacing-4);
+
+  & + & {
+    border-top: 1px solid var(--osi-border-default);
+  }
+}
+
+/// Section header styles
+@mixin section-header {
+  display: flex;
+  align-items: center;
+  gap: var(--osi-spacing-2);
+  margin-bottom: var(--osi-spacing-3);
+  font-size: var(--osi-text-sm);
+  font-weight: var(--osi-font-semibold);
+  color: var(--osi-section-header-color);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/// Section content styles
+@mixin section-content {
+  color: var(--osi-section-content-color);
+  font-size: var(--osi-text-sm);
+  line-height: var(--osi-leading-relaxed);
+}
+
+// ============================================================================
+// FIELD MIXINS
+// ============================================================================
+
+/// Field container
+@mixin field-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--osi-field-gap);
+}
+
+/// Field label
+@mixin field-label {
+  font-size: var(--osi-text-xs);
+  font-weight: var(--osi-font-medium);
+  color: var(--osi-field-label-color);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/// Field value
+@mixin field-value {
+  font-size: var(--osi-text-base);
+  font-weight: var(--osi-font-medium);
+  color: var(--osi-field-value-color);
+}
+
+/// Field value large (for metrics)
+@mixin field-value-lg {
+  font-size: var(--osi-text-2xl);
+  font-weight: var(--osi-font-bold);
+  color: var(--osi-field-value-color);
+  line-height: var(--osi-leading-tight);
+}
+
+// ============================================================================
+// GRID MIXINS
+// ============================================================================
+
+/// Responsive grid container
+@mixin grid-container($min-column: 200px, $gap: var(--osi-grid-gap)) {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax($min-column, 1fr));
+  gap: $gap;
+}
+
+/// Fixed column grid
+@mixin grid-fixed($columns: 2, $gap: var(--osi-grid-gap)) {
+  display: grid;
+  grid-template-columns: repeat($columns, 1fr);
+  gap: $gap;
+}
+
+/// Masonry-like grid (using CSS grid)
+@mixin masonry-grid($min-column: 250px) {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax($min-column, 1fr));
+  grid-auto-rows: 20px;
+  gap: var(--osi-spacing-4);
+}
+
+// ============================================================================
+// TYPOGRAPHY MIXINS
+// ============================================================================
+
+/// Heading styles
+@mixin heading($level: 1) {
+  font-family: var(--osi-font-sans);
+  font-weight: var(--osi-font-bold);
+  line-height: var(--osi-leading-tight);
+  color: var(--osi-text-primary);
+
+  @if $level == 1 {
+    font-size: var(--osi-text-3xl);
+  } @else if $level == 2 {
+    font-size: var(--osi-text-2xl);
+  } @else if $level == 3 {
+    font-size: var(--osi-text-xl);
+  } @else if $level == 4 {
+    font-size: var(--osi-text-lg);
+  } @else {
+    font-size: var(--osi-text-base);
+  }
+}
+
+/// Body text
+@mixin body-text {
+  font-family: var(--osi-font-sans);
+  font-size: var(--osi-text-base);
+  font-weight: var(--osi-font-normal);
+  line-height: var(--osi-leading-normal);
+  color: var(--osi-text-secondary);
+}
+
+/// Small text
+@mixin small-text {
+  font-size: var(--osi-text-sm);
+  color: var(--osi-text-tertiary);
+}
+
+/// Truncate text with ellipsis
+@mixin truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/// Multi-line truncate
+@mixin line-clamp($lines: 2) {
+  display: -webkit-box;
+  -webkit-line-clamp: $lines;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+// ============================================================================
+// BUTTON MIXINS
+// ============================================================================
+
+/// Base button styles
+@mixin button-base {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--osi-spacing-2);
+  padding: var(--osi-btn-padding-y) var(--osi-btn-padding-x);
+  font-size: var(--osi-btn-font-size);
+  font-weight: var(--osi-btn-font-weight);
+  border-radius: var(--osi-btn-radius);
+  border: none;
+  cursor: pointer;
+  transition: all var(--osi-duration-150) var(--osi-ease-out);
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--osi-primary-500);
+    outline-offset: 2px;
+  }
+}
+
+/// Primary button
+@mixin button-primary {
+  @include button-base;
+  background: var(--osi-primary-500);
+  color: white;
+
+  &:hover:not(:disabled) {
+    background: var(--osi-primary-600);
+  }
+
+  &:active:not(:disabled) {
+    background: var(--osi-primary-700);
+  }
+}
+
+/// Secondary button
+@mixin button-secondary {
+  @include button-base;
+  background: var(--osi-neutral-100);
+  color: var(--osi-text-primary);
+
+  &:hover:not(:disabled) {
+    background: var(--osi-neutral-200);
+  }
+
+  &:active:not(:disabled) {
+    background: var(--osi-neutral-300);
+  }
+}
+
+/// Ghost button
+@mixin button-ghost {
+  @include button-base;
+  background: transparent;
+  color: var(--osi-text-secondary);
+
+  &:hover:not(:disabled) {
+    background: var(--osi-neutral-100);
+    color: var(--osi-text-primary);
+  }
+}
+
+// ============================================================================
+// UTILITY MIXINS
+// ============================================================================
+
+/// Visually hidden (for screen readers)
+@mixin visually-hidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+/// Reset list styles
+@mixin list-reset {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/// Reset button styles
+@mixin button-reset {
+  appearance: none;
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+
+/// Flexbox center
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/// Flex column
+@mixin flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+/// Flex between
+@mixin flex-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+/// Absolute fill (position absolute, fill container)
+@mixin absolute-fill {
+  position: absolute;
+  inset: 0;
+}
+
+/// Fixed fill (position fixed, fill viewport)
+@mixin fixed-fill {
+  position: fixed;
+  inset: 0;
+}
+
+// ============================================================================
+// RESPONSIVE MIXINS
+// ============================================================================
+
+/// Mobile-first breakpoint
+@mixin breakpoint($size) {
+  @if $size == "sm" {
+    @media (min-width: 640px) {
+      @content;
+    }
+  } @else if $size == "md" {
+    @media (min-width: 768px) {
+      @content;
+    }
+  } @else if $size == "lg" {
+    @media (min-width: 1024px) {
+      @content;
+    }
+  } @else if $size == "xl" {
+    @media (min-width: 1280px) {
+      @content;
+    }
+  } @else if $size == "2xl" {
+    @media (min-width: 1536px) {
+      @content;
+    }
+  }
+}
+
+/// Max-width breakpoint
+@mixin breakpoint-down($size) {
+  @if $size == "sm" {
+    @media (max-width: 639px) {
+      @content;
+    }
+  } @else if $size == "md" {
+    @media (max-width: 767px) {
+      @content;
+    }
+  } @else if $size == "lg" {
+    @media (max-width: 1023px) {
+      @content;
+    }
+  } @else if $size == "xl" {
+    @media (max-width: 1279px) {
+      @content;
+    }
+  }
+}
+
+// ============================================================================
+// ANIMATION MIXINS
+// ============================================================================
+
+/// Fade in animation
+@mixin fade-in($duration: var(--osi-duration-200)) {
+  animation: osi-fade-in $duration var(--osi-ease-out);
+}
+
+/// Slide up animation
+@mixin slide-up($duration: var(--osi-duration-300)) {
+  animation: osi-slide-up $duration var(--osi-ease-out);
+}
+
+/// Pulse animation
+@mixin pulse($duration: 2s) {
+  animation: osi-pulse $duration infinite;
+}
+
+/// Loading shimmer
+@mixin loading-shimmer {
+  background: linear-gradient(
+    90deg,
+    var(--osi-neutral-200) 25%,
+    var(--osi-neutral-100) 50%,
+    var(--osi-neutral-200) 75%
+  );
+  background-size: 200% 100%;
+  animation: osi-shimmer 1.5s infinite;
+}
+
+// Keyframe definitions
+@keyframes osi-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes osi-slide-up {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 10px, 0);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes osi-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes osi-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}