osi-cards-lib 1.5.32 → 1.5.34

package/styles/components/sections/_sections-all.scss

@@ -0,0 +1,26 @@
+/**
+ * Consolidated Section Styles
+ *
+ * This file imports all section styles.
+ *
+ * @import "osi-cards-lib/styles/components/sections/sections-all";
+ *
+ * Structure:
+ * 1. Design System - Core mixins and tokens
+ * 2. Sections Base - Card mixin and grid layouts
+ * 3. Section Shell - Section container styles
+ * 4. All Sections - Unified styles for all section types
+ */
+
+// ============================================================================
+// CORE FILES
+// ============================================================================
+@import "design-system";
+@import "sections-base";
+@import "section-shell";
+@import "section-animations";
+
+// ============================================================================
+// ALL SECTION STYLES (Unified)
+// ============================================================================
+@import "all-sections";

package/styles/components/sections/_sections-base.scss

@@ -0,0 +1,334 @@
+// =====================================================================
+// SECTIONS BASE - Clean, Consistent Card Styles
+// =====================================================================
+//
+// Uses CSS variables from master tokens. No hardcoded shadows or effects.
+//
+// =====================================================================
+
+@use "../../tokens/master" as *;
+
+// =====================================================================
+// GRID MIXINS
+// =====================================================================
+
+@mixin section-grid($min-width: var(--section-grid-min-width), $gap: var(--section-card-gap)) {
+  display: grid;
+  gap: $gap;
+  grid-template-columns: repeat(auto-fit, minmax($min-width, 1fr));
+  min-height: 0;
+  box-sizing: border-box;
+
+  @media (max-width: 420px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+@mixin section-grid-responsive(
+  $min-width: var(--section-grid-min-width),
+  $gap: var(--section-card-gap),
+  $tablet-breakpoint: 820px
+) {
+  display: grid;
+  gap: $gap;
+  grid-template-columns: repeat(auto-fit, minmax($min-width, 1fr));
+  min-height: 0;
+  box-sizing: border-box;
+
+  @media (max-width: $tablet-breakpoint) {
+    grid-template-columns: 1fr;
+  }
+}
+
+// =====================================================================
+// UNIVERSAL CARD MIXIN - Uses CSS Variables Only
+// =====================================================================
+
+@mixin card {
+  background: var(--osi-section-item-background);
+  border: var(--osi-section-item-border);
+  border-radius: var(--osi-section-item-border-radius);
+  box-shadow: var(--osi-section-item-shadow);
+  padding: var(--card-padding);
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--card-gap);
+  min-height: var(--card-min-height, auto);
+
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+  text-align: left;
+
+  transition:
+    background var(--duration-base) var(--ease-out),
+    box-shadow var(--duration-base) var(--ease-out),
+    border-color var(--duration-base) var(--ease-out);
+
+  // Subtle accent border indicator
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: var(--border-width-default);
+    background: linear-gradient(90deg, var(--accent, var(--osi-accent)) 0%, transparent 100%);
+    opacity: 0;
+    transition: opacity var(--duration-base) var(--ease-out);
+    border-radius: var(--osi-section-item-border-radius) var(--osi-section-item-border-radius) 0 0;
+  }
+
+  &:hover {
+    background: var(--osi-section-item-background-hover);
+    border-color: var(--osi-section-item-border-hover);
+    box-shadow: var(--osi-section-item-shadow-hover);
+
+    &::before {
+      opacity: 0.6;
+    }
+  }
+
+  &:focus-visible {
+    outline: var(--border-width-accent-sm) solid var(--accent, var(--osi-accent));
+    outline-offset: var(--border-width-accent-sm);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+// =====================================================================
+// UNIFIED SECTION CARD CLASS
+// =====================================================================
+
+.unified-card {
+  @include card;
+}
+
+.section-card {
+  @include card;
+}
+
+// =====================================================================
+// TYPOGRAPHY MIXINS - Use CSS Variables
+// =====================================================================
+
+@mixin metric-label {
+  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 metric-value {
+  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 section-description {
+  font-size: var(--card-subtitle-font-size);
+  color: var(--muted-foreground);
+  line-height: 1.5;
+  font-weight: 400;
+  font-family: inherit;
+}
+
+// Legacy aliases
+@mixin section-label {
+  @include metric-label;
+}
+
+@mixin section-value {
+  @include metric-value;
+}
+
+// =====================================================================
+// EMPTY STATE
+// =====================================================================
+
+@mixin section-empty-state {
+  padding: var(--osi-section-padding);
+  text-align: center;
+  color: var(--muted-foreground);
+  border: var(--border-width-default) dashed var(--border);
+  border-radius: var(--osi-section-item-border-radius);
+  background: var(--osi-section-item-background);
+  min-height: auto;
+}
+
+@mixin section-empty-icon {
+  margin: 0 auto var(--card-gap);
+  opacity: 0.5;
+}
+
+// =====================================================================
+// TREND COLORS
+// =====================================================================
+
+@mixin trend-colors {
+  &.trend--up {
+    color: #{$osi-color-trend-up};
+  }
+
+  &.trend--down {
+    color: #{$osi-color-trend-down};
+  }
+
+  &.trend--stable {
+    color: #{$osi-color-trend-stable};
+  }
+
+  &.trend--neutral {
+    color: #{$osi-color-trend-neutral};
+  }
+}
+
+// =====================================================================
+// STATUS CLASSES
+// =====================================================================
+
+.status--completed,
+.status--success {
+  color: #{$success-color};
+  background: #{$success-color-10};
+}
+
+.status--active,
+.status--in-progress {
+  color: var(--accent);
+  background: #{$brand-color-10};
+}
+
+.status--pending,
+.status--warning {
+  color: #{$warning-color};
+  background: #{$warning-color-10};
+}
+
+.status--blocked,
+.status--cancelled,
+.status--delayed,
+.status--inactive,
+.status--error {
+  color: #{$error-color};
+  background: #{$error-color-10};
+}
+
+.status--default {
+  color: var(--muted-foreground);
+  background: var(--muted);
+}
+
+// =====================================================================
+// PRIORITY CLASSES
+// =====================================================================
+
+.priority--high {
+  color: #{$error-color};
+  background: #{$error-color-10};
+}
+
+.priority--medium {
+  color: #{$warning-color};
+  background: #{$warning-color-10};
+}
+
+.priority--low {
+  color: #{$success-color};
+  background: #{$success-color-10};
+}
+
+.priority--default {
+  color: var(--muted-foreground);
+  background: var(--muted);
+}
+
+// =====================================================================
+// REDUCED MOTION
+// =====================================================================
+
+@media (prefers-reduced-motion: reduce) {
+  .unified-card,
+  .section-card,
+  [class*="__card"],
+  [class*="-card"],
+  [class*="__item"],
+  [class*="-item"] {
+    transition: none;
+    animation: none;
+  }
+}
+
+// =====================================================================
+// ANIMATION SYSTEM
+// =====================================================================
+
+@keyframes section-item-stream {
+  0% {
+    opacity: 0;
+    transform: translate3d(0, var(--motion-distance-sm), 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@mixin section-item-animation {
+  &.section-item-streaming {
+    animation: section-item-stream 0.25s ease-out forwards;
+  }
+
+  &.section-item-entered {
+    animation: none;
+  }
+
+  @for $i from 0 through 15 {
+    &.section-item-stagger-#{$i} {
+      animation-delay: calc(#{$i} * 30ms);
+    }
+  }
+}
+
+@mixin legacy-item-animation {
+  &.item-streaming {
+    animation: section-item-stream 0.25s ease-out forwards;
+  }
+
+  &.item-entered {
+    animation: none;
+  }
+
+  @for $i from 0 through 15 {
+    &.item-stagger-#{$i} {
+      animation-delay: calc(#{$i} * 30ms);
+    }
+  }
+}
+
+@mixin legacy-field-animation {
+  &.field-streaming {
+    animation: section-item-stream 0.25s ease-out forwards;
+  }
+
+  &.field-entered {
+    animation: none;
+  }
+
+  @for $i from 0 through 15 {
+    &.field-stagger-#{$i} {
+      animation-delay: calc(#{$i} * 30ms);
+    }
+  }
+}

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

@@ -0,0 +1,327 @@
+// =====================================================================
+// ENHANCED TYPOGRAPHY SYSTEM
+// =====================================================================
+//
+// Comprehensive typography utilities with semantic naming.
+// Uses design tokens for consistency and theme-ability.
+//
+// =====================================================================
+
+@use "design-tokens" as *;
+
+// =====================================================================
+// HEADING MIXINS
+// =====================================================================
+
+@mixin heading-1 {
+  font-size: var(--text-4xl);
+  font-weight: var(--font-bold);
+  line-height: var(--leading-tight);
+  letter-spacing: -0.02em;
+  color: var(--foreground);
+  margin: 0;
+}
+
+@mixin heading-2 {
+  font-size: var(--text-3xl);
+  font-weight: var(--font-bold);
+  line-height: var(--leading-tight);
+  letter-spacing: -0.015em;
+  color: var(--foreground);
+  margin: 0;
+}
+
+// CONSISTENT HIERARCHY: Section headers and content headers
+@mixin heading-3 {
+  // Section Title (main section header)
+  font-size: var(--text-xl); // Consistent: 19px
+  font-weight: var(--font-bold);
+  line-height: var(--leading-tight);
+  letter-spacing: -0.01em;
+  color: var(--foreground);
+  margin: 0;
+}
+
+@mixin heading-4 {
+  // Sub-section Title
+  font-size: var(--text-lg); // Consistent: 17px
+  font-weight: var(--font-semibold);
+  line-height: var(--leading-snug);
+  color: var(--foreground);
+  margin: 0;
+}
+
+@mixin heading-5 {
+  // Card/Item Title (consistent across all sections)
+  font-size: var(--text-base); // Consistent: 13px
+  font-weight: var(--font-semibold);
+  line-height: var(--leading-normal);
+  color: var(--foreground);
+  margin: 0;
+}
+
+@mixin heading-6 {
+  // Small Item Title / Label Header
+  font-size: var(--text-sm); // Consistent: 11.2px
+  font-weight: var(--font-semibold);
+  line-height: var(--leading-normal);
+  color: var(--foreground);
+  margin: 0;
+}
+
+// =====================================================================
+// BODY TEXT MIXINS
+// =====================================================================
+
+@mixin body-large {
+  font-size: var(--text-lg);
+  font-weight: var(--font-normal);
+  line-height: var(--leading-relaxed);
+  color: var(--foreground);
+}
+
+@mixin body-base {
+  font-size: var(--text-base);
+  font-weight: var(--font-normal);
+  line-height: var(--leading-normal);
+  color: var(--foreground);
+}
+
+@mixin body-small {
+  font-size: var(--text-sm);
+  font-weight: var(--font-normal);
+  line-height: var(--leading-normal);
+  color: var(--foreground);
+}
+
+@mixin body-xs {
+  font-size: var(--text-xs);
+  font-weight: var(--font-normal);
+  line-height: var(--leading-normal);
+  color: var(--foreground);
+}
+
+// =====================================================================
+// SEMANTIC TEXT VARIANTS
+// =====================================================================
+
+@mixin text-primary {
+  color: var(--foreground);
+  font-weight: var(--font-medium);
+}
+
+@mixin text-secondary {
+  color: var(--muted-foreground);
+  font-weight: var(--font-normal);
+}
+
+@mixin text-tertiary {
+  color: var(--muted-foreground);
+  font-weight: var(--font-normal);
+  opacity: var(--opacity-70);
+}
+
+@mixin text-disabled {
+  color: var(--muted-foreground);
+  opacity: var(--state-disabled-opacity);
+}
+
+// =====================================================================
+// LABEL & CAPTION MIXINS
+// =====================================================================
+
+@mixin label-base {
+  font-size: var(--text-sm);
+  font-weight: var(--font-semibold);
+  color: var(--foreground);
+  text-transform: none;
+}
+
+@mixin label-uppercase {
+  font-size: var(--text-xs);
+  font-weight: var(--font-semibold);
+  color: var(--muted-foreground);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+@mixin caption {
+  font-size: var(--text-xs);
+  font-weight: var(--font-normal);
+  line-height: var(--leading-normal);
+  color: var(--muted-foreground);
+}
+
+@mixin caption-bold {
+  font-size: var(--text-xs);
+  font-weight: var(--font-semibold);
+  line-height: var(--leading-normal);
+  color: var(--muted-foreground);
+}
+
+// =====================================================================
+// CODE & MONOSPACE
+// =====================================================================
+
+@mixin code-inline {
+  font-family: "Monaco", "Courier New", monospace;
+  font-size: 0.9em;
+  padding: 2px 6px;
+  background: var(--muted);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--foreground);
+}
+
+@mixin code-block {
+  font-family: "Monaco", "Courier New", monospace;
+  font-size: var(--text-sm);
+  padding: var(--spacing-md);
+  background: var(--muted);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  color: var(--foreground);
+  overflow-x: auto;
+  line-height: var(--leading-relaxed);
+}
+
+// =====================================================================
+// LINK STYLES
+// =====================================================================
+
+@mixin link-base {
+  color: var(--accent);
+  text-decoration: none;
+  font-weight: var(--font-medium);
+  cursor: pointer;
+  transition: color var(--duration-fast) var(--ease-out);
+
+  &:hover {
+    color: var(--accent);
+    text-decoration: underline;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+    border-radius: var(--radius-xs);
+  }
+}
+
+@mixin link-subtle {
+  color: var(--muted-foreground);
+  text-decoration: none;
+  transition: color var(--duration-fast) var(--ease-out);
+
+  &:hover {
+    color: var(--foreground);
+    text-decoration: underline;
+  }
+}
+
+// =====================================================================
+// NUMBER & STAT DISPLAY
+// =====================================================================
+
+@mixin number-display-large {
+  font-size: var(--text-4xl);
+  font-weight: var(--font-bold);
+  line-height: var(--leading-tight);
+  letter-spacing: -0.03em;
+  color: var(--foreground);
+  font-variant-numeric: tabular-nums;
+}
+
+@mixin number-display-medium {
+  font-size: var(--text-2xl);
+  font-weight: var(--font-semibold);
+  line-height: var(--leading-tight);
+  letter-spacing: -0.02em;
+  color: var(--foreground);
+  font-variant-numeric: tabular-nums;
+}
+
+@mixin number-display-small {
+  font-size: var(--text-lg);
+  font-weight: var(--font-semibold);
+  line-height: var(--leading-snug);
+  letter-spacing: -0.01em;
+  color: var(--foreground);
+  font-variant-numeric: tabular-nums;
+}
+
+// =====================================================================
+// TRUNCATION UTILITIES
+// =====================================================================
+
+@mixin text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@mixin text-truncate-lines($lines: 2) {
+  display: -webkit-box;
+  -webkit-line-clamp: $lines;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+// =====================================================================
+// READING OPTIMIZATIONS
+// =====================================================================
+
+@mixin reading-optimized {
+  font-feature-settings:
+    "kern" 1,
+    "liga" 1,
+    "calt" 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+@mixin reading-width {
+  max-width: 65ch; // Optimal reading width
+  margin-left: auto;
+  margin-right: auto;
+}
+
+// =====================================================================
+// RESPONSIVE TYPOGRAPHY
+// =====================================================================
+
+@mixin fluid-type($min-size, $max-size, $min-width: 320px, $max-width: 1200px) {
+  font-size: clamp(
+    #{$min-size},
+    calc(
+      #{$min-size} + (#{strip-unit($max-size)} - #{strip-unit($min-size)}) *
+        ((100vw - #{$min-width}) / (#{strip-unit($max-width)} - #{strip-unit($min-width)}))
+    ),
+    #{$max-size}
+  );
+}
+
+@function strip-unit($number) {
+  @if type-of($number) == "number" and not unitless($number) {
+    @return $number / ($number * 0 + 1);
+  }
+  @return $number;
+}
+
+// =====================================================================
+// SELECTION STYLING
+// =====================================================================
+
+@mixin selection-style {
+  ::selection {
+    background: var(--accent-color-30);
+    color: var(--foreground);
+  }
+
+  ::-moz-selection {
+    background: var(--accent-color-30);
+    color: var(--foreground);
+  }
+}