@fluid-theme/core 0.4.3

package/src/components/indicator.css

@@ -0,0 +1,455 @@
+/**
+ * Fluid Framework - Status Indicator System
+ * @layer components
+ *
+ * A semantic status system for scores, progress, and feedback.
+ * Uses data-status to drive ALL visual styling - prevents color drift.
+ *
+ * Philosophy:
+ * - Status is the single source of truth
+ * - Score → Status → Theme Token → Visuals
+ * - No component may mix status color families
+ *
+ * Status Tiers (default thresholds):
+ * - good: ≥80% (success family)
+ * - moderate: 60-79% (warning family)
+ * - severe: <60% (error family)
+ *
+ * Usage:
+ *   <div data-status="good">88% - Meeting goals</div>
+ *   <progress data-status="moderate" value="65" max="100"></progress>
+ *   <span class="badge" data-status="severe">Needs attention</span>
+ */
+
+@layer components {
+
+  /* ========================================
+     STATUS COLOR SYSTEM
+     All colors derive from status token
+     ======================================== */
+
+  /* Good (Success family) - ≥80% */
+  [data-status="good"] {
+    --status-color: var(--color-success);
+    --status-bg: var(--color-success-subtle);
+    --status-text: var(--color-success);
+    --status-border: var(--color-success);
+  }
+
+  /* Moderate (Warning family) - 60-79% */
+  [data-status="moderate"] {
+    --status-color: var(--color-warning);
+    --status-bg: var(--color-warning-subtle);
+    --status-text: var(--color-warning);
+    --status-text: oklch(from var(--color-warning) calc(l - 0.2) c h);
+    --status-border: var(--color-warning);
+  }
+
+  /* Severe (Error family) - <60% */
+  [data-status="severe"] {
+    --status-color: var(--color-error);
+    --status-bg: var(--color-error-subtle);
+    --status-text: var(--color-error);
+    --status-border: var(--color-error);
+  }
+
+  /* Neutral (no score/status) */
+  [data-status="neutral"] {
+    --status-color: var(--color-text-muted);
+    --status-bg: var(--color-surface);
+    --status-text: var(--color-text-muted);
+    --status-border: var(--color-border);
+  }
+
+
+  /* ========================================
+     ENHANCED PROGRESS BAR
+     Animated, labeled, status-aware
+     ======================================== */
+
+  .progress {
+    --_progress-height: var(--space-3);
+    --_progress-radius: var(--radius-full);
+    --_progress-track: var(--color-border);
+    --_progress-fill: var(--status-color, var(--accent));
+
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+  }
+
+  /* Progress label row */
+  .progress__label {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    font-size: var(--font-size-sm);
+  }
+
+  .progress__title {
+    font-weight: var(--weight-medium);
+    color: var(--color-text);
+  }
+
+  .progress__value {
+    font-weight: var(--weight-semibold);
+    font-variant-numeric: tabular-nums;
+    color: var(--status-text, var(--color-text));
+  }
+
+  /* Progress track (background) - shows the "empty" portion */
+  .progress__track {
+    position: relative;
+    block-size: var(--_progress-height);
+    background-color: var(--_progress-track);
+    border-radius: var(--_progress-radius);
+    overflow: hidden;
+    /* Subtle inner shadow to define the track boundary */
+    box-shadow: inset 0 1px 2px oklch(0% 0 0 / 0.1);
+    /* Light mode: use status-aware tinted track */
+    --_progress-track: color-mix(in oklch, var(--status-color, var(--accent)) 15%, var(--color-surface-raised));
+  }
+
+  /* Dark mode: make track more visible with stronger tint */
+  @media (prefers-color-scheme: dark) {
+    .progress__track {
+      --_progress-track: color-mix(in oklch, var(--status-color, var(--accent)) 20%, var(--color-surface-raised));
+      box-shadow: inset 0 1px 3px oklch(0% 0 0 / 0.3);
+    }
+  }
+
+  [data-theme="dark"] .progress__track {
+    --_progress-track: color-mix(in oklch, var(--status-color, var(--accent)) 20%, var(--color-surface-raised));
+    box-shadow: inset 0 1px 3px oklch(0% 0 0 / 0.3);
+  }
+
+  /* Progress fill bar */
+  .progress__fill {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    inline-size: var(--progress-percent, 0%);
+    background-color: var(--_progress-fill);
+    border-radius: var(--_progress-radius);
+    transition: inline-size var(--duration-slow) var(--ease-fluid);
+  }
+
+  /* Animated progress - starts at 0, fills when visible */
+  .progress[data-animate] .progress__fill {
+    inline-size: 0;
+  }
+
+  .progress[data-animate][data-visible] .progress__fill {
+    inline-size: var(--progress-percent, 0%);
+  }
+
+
+  /* ========================================
+     PROGRESS SIZE VARIANTS
+     ======================================== */
+
+  .progress[data-size="sm"] {
+    --_progress-height: var(--space-2);
+  }
+
+  .progress[data-size="lg"] {
+    --_progress-height: var(--space-4);
+  }
+
+  .progress[data-size="xl"] {
+    --_progress-height: var(--space-6);
+  }
+
+
+  /* ========================================
+     PROGRESS WITH THRESHOLD MARKERS
+     Visual indicators for score bands
+     ======================================== */
+
+  .progress__markers {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  .progress__marker {
+    position: absolute;
+    inset-block: calc(var(--_progress-height) * -0.25);
+    inline-size: 2px;
+    background-color: var(--color-text-subtle);
+    opacity: 0.5;
+  }
+
+  /* Position markers at thresholds */
+  .progress__marker[data-at="60"] {
+    inset-inline-start: 60%;
+  }
+
+  .progress__marker[data-at="80"] {
+    inset-inline-start: 80%;
+  }
+
+
+  /* ========================================
+     STATUS BADGE / PILL
+     Compact status indicator
+     ======================================== */
+
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    padding-block: var(--space-1);
+    padding-inline: var(--space-2);
+    font-size: var(--font-size-xs);
+    font-weight: var(--weight-medium);
+    line-height: var(--leading-none);
+    color: var(--status-text, var(--color-text));
+    background-color: var(--status-bg, var(--color-surface));
+    border-radius: var(--radius-full);
+    white-space: nowrap;
+  }
+
+  /* Filled variant - stronger emphasis */
+  .badge[data-variant="filled"] {
+    color: var(--white);
+    background-color: var(--status-color, var(--accent));
+  }
+
+  /* Outline variant */
+  .badge[data-variant="outline"] {
+    background-color: transparent;
+    border: 1px solid var(--status-border, var(--color-border));
+  }
+
+  /* Badge sizes */
+  .badge[data-size="sm"] {
+    padding-block: var(--space-0-5);
+    padding-inline: var(--space-1-5);
+    font-size: var(--font-size-xs);
+  }
+
+  .badge[data-size="lg"] {
+    padding-block: var(--space-2);
+    padding-inline: var(--space-3);
+    font-size: var(--font-size-sm);
+  }
+
+  /* Badge with dot indicator */
+  .badge[data-dot]::before {
+    content: "";
+    inline-size: 0.5em;
+    block-size: 0.5em;
+    border-radius: var(--radius-full);
+    background-color: var(--status-color, var(--accent));
+  }
+
+
+  /* ========================================
+     STATUS CONTAINER / CARD
+     Wrap content in status context
+     ======================================== */
+
+  .status-card {
+    padding: var(--space-4);
+    background-color: var(--status-bg, var(--color-surface));
+    border: 1px solid var(--status-border, var(--color-border-subtle));
+    border-radius: var(--radius-lg);
+    border-inline-start-width: 4px;
+  }
+
+  .status-card__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-block-end: var(--space-3);
+  }
+
+  .status-card__title {
+    font-weight: var(--weight-semibold);
+    color: var(--color-text);
+  }
+
+  .status-card__score {
+    font-size: var(--font-size-2xl);
+    font-weight: var(--weight-bold);
+    font-variant-numeric: tabular-nums;
+    color: var(--status-text, var(--color-text));
+  }
+
+
+  /* ========================================
+     SCORE LEGEND / KEY
+     Display threshold explanations
+     ======================================== */
+
+  .score-legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-4);
+    padding: var(--space-4);
+    background-color: var(--color-surface);
+    border-radius: var(--radius-lg);
+    font-size: var(--font-size-sm);
+  }
+
+  .score-legend__item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+  }
+
+  .score-legend__color {
+    inline-size: var(--space-4);
+    block-size: var(--space-4);
+    border-radius: var(--radius-sm);
+  }
+
+  .score-legend__item[data-status="good"] .score-legend__color {
+    background-color: var(--color-success);
+  }
+
+  .score-legend__item[data-status="moderate"] .score-legend__color {
+    background-color: var(--color-warning);
+  }
+
+  .score-legend__item[data-status="severe"] .score-legend__color {
+    background-color: var(--color-error);
+  }
+
+  .score-legend__range {
+    color: var(--color-text-muted);
+  }
+
+  .score-legend__label {
+    font-weight: var(--weight-medium);
+  }
+
+
+  /* ========================================
+     FRACTION DISPLAY
+     Show "23 / 26" style values
+     ======================================== */
+
+  .fraction {
+    display: inline-flex;
+    align-items: baseline;
+    gap: var(--space-1);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .fraction__numerator {
+    font-weight: var(--weight-bold);
+    color: var(--status-text, var(--color-text));
+  }
+
+  .fraction__separator {
+    color: var(--color-text-subtle);
+  }
+
+  .fraction__denominator {
+    color: var(--color-text-muted);
+  }
+
+
+  /* ========================================
+     MOTION-AWARE ANIMATIONS
+     Each theme has its own progress animation style
+     ======================================== */
+
+  /* Still: instant fill - no animation */
+  [data-motion="still"] .progress__fill {
+    transition: none;
+  }
+
+  /* Serene: very slow, gentle fill */
+  [data-motion="serene"] .progress__fill {
+    transition: inline-size var(--duration-slowest) var(--ease-fluid);
+  }
+
+  /* Trickling: subtle, quick fill */
+  [data-motion="trickling"] .progress__fill {
+    transition: inline-size var(--duration-slow) var(--ease-fluid);
+  }
+
+  /* Stream: smooth horizontal flow */
+  [data-motion="stream"] .progress__fill {
+    transition: inline-size var(--duration-slow) var(--ease-fluid);
+  }
+
+  /* Flowing: balanced, organic fill (default) */
+  [data-motion="flowing"] .progress__fill,
+  :root:not([data-motion]) .progress__fill {
+    transition: inline-size var(--duration-slow) var(--ease-fluid);
+  }
+
+  /* Cascade: bouncy waterfall effect */
+  [data-motion="cascade"] .progress__fill {
+    transition: inline-size var(--duration-normal) var(--ease-settle);
+  }
+
+  /* Rapids: fast, energetic with overshoot */
+  [data-motion="rapids"] .progress__fill {
+    transition: inline-size var(--duration-normal) var(--ease-settle);
+  }
+
+  /* Tsunami: wave animation - rise, crest, crash, bounce, settle */
+  @keyframes tsunami-progress-fill {
+    0% {
+      inline-size: 0;
+      transform: scaleY(1);
+    }
+    25% {
+      /* Rising - wave builds up, overshoots target */
+      inline-size: calc(var(--progress-percent, 0%) * 1.15);
+      transform: scaleY(1.3);
+    }
+    40% {
+      /* Cresting - peak of the wave */
+      inline-size: calc(var(--progress-percent, 0%) * 1.1);
+      transform: scaleY(1.4);
+    }
+    60% {
+      /* Crashing down - undershoots */
+      inline-size: calc(var(--progress-percent, 0%) * 0.92);
+      transform: scaleY(0.8);
+    }
+    75% {
+      /* Bounce back up */
+      inline-size: calc(var(--progress-percent, 0%) * 1.03);
+      transform: scaleY(1.1);
+    }
+    90% {
+      /* Settling */
+      inline-size: calc(var(--progress-percent, 0%) * 0.99);
+      transform: scaleY(0.95);
+    }
+    100% {
+      /* Final position */
+      inline-size: var(--progress-percent, 0%);
+      transform: scaleY(1);
+    }
+  }
+
+  [data-motion="tsunami"] .progress__fill {
+    transition: none;
+    transform-origin: left center;
+  }
+
+  [data-motion="tsunami"] .progress[data-animate][data-visible] .progress__fill {
+    animation: tsunami-progress-fill var(--duration-slower) var(--ease-settle) forwards;
+  }
+
+  /* Non-animated tsunami progress - just use transition */
+  [data-motion="tsunami"] .progress:not([data-animate]) .progress__fill {
+    transition: inline-size var(--duration-slower) var(--ease-settle);
+  }
+
+  /* Reduced motion: respect preference */
+  @media (prefers-reduced-motion: reduce) {
+    .progress__fill {
+      transition: none;
+    }
+  }
+}

package/src/components/loading.css

@@ -0,0 +1,274 @@
+/**
+ * Fluid Framework - Loading & Skeleton Component
+ * @layer components
+ *
+ * Loading spinners and skeleton screens for loading states.
+ * Respects prefers-reduced-motion.
+ *
+ * Spinner Usage:
+ *   <div class="spinner" aria-label="Loading"></div>
+ *   <div class="spinner" data-size="sm"></div>
+ *   <div class="spinner" data-size="lg"></div>
+ *
+ * Skeleton Usage:
+ *   <div class="skeleton" style="--skeleton-h: 1rem; --skeleton-w: 60%;"></div>
+ *   <div class="skeleton" data-variant="circle"></div>
+ *   <div class="skeleton" data-variant="card"></div>
+ *
+ * Skeleton Card (preset layout):
+ *   <div class="skeleton-card">
+ *     <div class="skeleton" data-variant="media"></div>
+ *     <div class="skeleton" data-variant="title"></div>
+ *     <div class="skeleton" data-variant="text"></div>
+ *     <div class="skeleton" data-variant="text" style="--skeleton-w: 75%;"></div>
+ *   </div>
+ */
+
+@layer components {
+  /* ========================================
+     SPINNER
+     ======================================== */
+
+  .spinner {
+    --_spinner-size: 2rem;
+    --_spinner-width: 3px;
+    --_spinner-color: var(--accent);
+
+    display: inline-block;
+    inline-size: var(--_spinner-size);
+    block-size: var(--_spinner-size);
+    border: var(--_spinner-width) solid color-mix(in oklch, var(--_spinner-color) 20%, transparent);
+    border-block-start-color: var(--_spinner-color);
+    border-radius: var(--radius-full);
+    animation: spinner-rotate var(--duration-slow, 640ms) linear infinite;
+  }
+
+  @keyframes spinner-rotate {
+    to { transform: rotate(360deg); }
+  }
+
+  /* Sizes */
+  .spinner[data-size="xs"] {
+    --_spinner-size: 1rem;
+    --_spinner-width: 2px;
+  }
+
+  .spinner[data-size="sm"] {
+    --_spinner-size: 1.5rem;
+    --_spinner-width: 2px;
+  }
+
+  .spinner[data-size="lg"] {
+    --_spinner-size: 3rem;
+    --_spinner-width: 4px;
+  }
+
+  .spinner[data-size="xl"] {
+    --_spinner-size: 4rem;
+    --_spinner-width: 4px;
+  }
+
+  /* Reduced motion: pulse instead of spin */
+  @media (prefers-reduced-motion: reduce) {
+    .spinner {
+      animation: spinner-pulse 1.5s ease-in-out infinite;
+      border-color: color-mix(in oklch, var(--_spinner-color) 30%, transparent);
+      border-block-start-color: color-mix(in oklch, var(--_spinner-color) 30%, transparent);
+    }
+
+    @keyframes spinner-pulse {
+      0%, 100% { opacity: 0.4; }
+      50% { opacity: 1; }
+    }
+  }
+
+
+  /* ========================================
+     DOTS SPINNER (alternative)
+     ======================================== */
+
+  .spinner-dots {
+    display: inline-flex;
+    gap: var(--space-1-5);
+    align-items: center;
+  }
+
+  .spinner-dots::before,
+  .spinner-dots::after,
+  .spinner-dots span {
+    content: "";
+    display: block;
+    inline-size: 0.5rem;
+    block-size: 0.5rem;
+    border-radius: var(--radius-full);
+    background: var(--accent);
+    animation: spinner-dot-bounce var(--duration-slow, 640ms) ease-in-out infinite;
+  }
+
+  .spinner-dots::after {
+    animation-delay: calc(var(--duration-slow, 640ms) * 0.16);
+  }
+
+  .spinner-dots span {
+    animation-delay: calc(var(--duration-slow, 640ms) * 0.32);
+  }
+
+  @keyframes spinner-dot-bounce {
+    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
+    40% { transform: scale(1); opacity: 1; }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .spinner-dots::before,
+    .spinner-dots::after,
+    .spinner-dots span {
+      animation: none;
+      opacity: 0.6;
+    }
+  }
+
+
+  /* ========================================
+     LOADING OVERLAY
+     Full-area loading state
+     ======================================== */
+
+  .loading-overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: var(--space-3);
+    background: color-mix(in oklch, var(--color-background) 80%, transparent);
+    z-index: var(--z-overlay);
+    border-radius: inherit;
+  }
+
+  .loading-overlay__text {
+    font-size: var(--font-size-sm);
+    color: var(--color-text-muted);
+  }
+
+
+  /* ========================================
+     SKELETON SCREENS
+     ======================================== */
+
+  .skeleton {
+    --skeleton-h: 1rem;
+    --skeleton-w: 100%;
+    --_skeleton-radius: var(--radius-md);
+
+    display: block;
+    inline-size: var(--skeleton-w);
+    block-size: var(--skeleton-h);
+    border-radius: var(--_skeleton-radius);
+    background: linear-gradient(
+      90deg,
+      var(--color-surface) 0%,
+      var(--color-surface-raised) 40%,
+      var(--color-surface) 80%
+    );
+    background-size: 200% 100%;
+    animation: skeleton-shimmer 1.5s ease-in-out infinite;
+  }
+
+  @keyframes skeleton-shimmer {
+    0% { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .skeleton {
+      animation: none;
+      background: var(--color-surface);
+    }
+  }
+
+
+  /* ========================================
+     SKELETON VARIANTS
+     ======================================== */
+
+  /* Circle: avatar placeholder */
+  .skeleton[data-variant="circle"] {
+    --skeleton-w: 2.5rem;
+    --skeleton-h: 2.5rem;
+    --_skeleton-radius: var(--radius-full);
+  }
+
+  /* Title: heading placeholder */
+  .skeleton[data-variant="title"] {
+    --skeleton-h: 1.5rem;
+    --skeleton-w: 60%;
+  }
+
+  /* Text: body line placeholder */
+  .skeleton[data-variant="text"] {
+    --skeleton-h: 0.875rem;
+    --skeleton-w: var(--skeleton-w, 100%);
+  }
+
+  /* Media: image/video placeholder */
+  .skeleton[data-variant="media"] {
+    --skeleton-h: 12rem;
+    --_skeleton-radius: var(--radius-lg);
+  }
+
+  /* Button placeholder */
+  .skeleton[data-variant="button"] {
+    --skeleton-h: 2.75rem;
+    --skeleton-w: 8rem;
+    --_skeleton-radius: var(--radius-button, var(--radius-md));
+  }
+
+
+  /* ========================================
+     SKELETON CARD
+     Pre-built card loading state
+     ======================================== */
+
+  .skeleton-card {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    padding: var(--space-5);
+    background: var(--color-surface-raised);
+    border: var(--border-width) solid var(--color-border-subtle);
+    border-radius: var(--radius-xl);
+  }
+
+  .skeleton-card .skeleton[data-variant="media"] {
+    margin: calc(var(--space-5) * -1);
+    margin-block-end: var(--space-3);
+    inline-size: calc(100% + var(--space-5) * 2);
+    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
+  }
+
+
+  /* ========================================
+     THEME-SPECIFIC STYLES
+     ======================================== */
+
+  /* Still: no animation */
+  [data-motion="still"] .spinner {
+    animation-duration: 800ms;
+  }
+
+  [data-motion="still"] .skeleton {
+    animation: none;
+    background: var(--color-surface);
+  }
+
+  /* Tsunami: asymmetric skeleton cards */
+  [data-motion="tsunami"] .skeleton-card {
+    border-radius: var(--radius-asymmetric, 0 24px 0 0);
+  }
+
+  /* Rapids: faster spinner */
+  [data-motion="rapids"] .spinner {
+    animation-duration: 500ms;
+  }
+}