@fluid-theme/core 0.4.3

package/src/components/avatar.css

@@ -0,0 +1,192 @@
+/**
+ * Fluid Framework - Avatar Component
+ * @layer components
+ *
+ * Avatars display user profile images or initials.
+ * Supports sizes, groups, status indicators, and fallbacks.
+ *
+ * Usage:
+ *   <div class="avatar">
+ *     <img src="photo.jpg" alt="Jane Doe">
+ *   </div>
+ *
+ *   <!-- With initials fallback -->
+ *   <div class="avatar" data-initials="JD"></div>
+ *
+ *   <!-- With status -->
+ *   <div class="avatar" data-status="online">
+ *     <img src="photo.jpg" alt="Jane Doe">
+ *   </div>
+ *
+ * Sizes: data-size="xs|sm|lg|xl|2xl"
+ * Shapes: data-shape="square|rounded" (default: circle)
+ * Groups: <div class="avatar-group">...</div>
+ */
+
+@layer components {
+  /* ========================================
+     BASE AVATAR
+     ======================================== */
+
+  .avatar {
+    --_avatar-size: 2.5rem;
+
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    inline-size: var(--_avatar-size);
+    block-size: var(--_avatar-size);
+    border-radius: var(--radius-full);
+    background: color-mix(in oklch, var(--accent) 20%, var(--color-surface));
+    color: var(--accent);
+    font-weight: var(--weight-semibold);
+    font-size: calc(var(--_avatar-size) * 0.4);
+    line-height: 1;
+    overflow: visible;
+    user-select: none;
+  }
+
+  /* Image inside avatar */
+  .avatar img {
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+    border-radius: inherit;
+  }
+
+  /* Initials fallback (when no image) */
+  .avatar[data-initials]::before {
+    content: attr(data-initials);
+    text-transform: uppercase;
+    letter-spacing: var(--tracking-wide);
+  }
+
+  /* Border ring */
+  .avatar[data-ring] {
+    box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--accent);
+  }
+
+
+  /* ========================================
+     SIZE VARIANTS
+     ======================================== */
+
+  .avatar[data-size="xs"] { --_avatar-size: 1.5rem; }
+  .avatar[data-size="sm"] { --_avatar-size: 2rem; }
+  /* default: 2.5rem */
+  .avatar[data-size="lg"] { --_avatar-size: 3rem; }
+  .avatar[data-size="xl"] { --_avatar-size: 4rem; }
+  .avatar[data-size="2xl"] { --_avatar-size: 5rem; }
+
+
+  /* ========================================
+     SHAPE VARIANTS
+     ======================================== */
+
+  .avatar[data-shape="square"] {
+    border-radius: var(--radius-md);
+  }
+
+  .avatar[data-shape="rounded"] {
+    border-radius: var(--radius-lg);
+  }
+
+
+  /* ========================================
+     STATUS INDICATOR
+     ======================================== */
+
+  .avatar[data-status]::after {
+    content: "";
+    position: absolute;
+    inset-block-end: 0;
+    inset-inline-end: 0;
+    inline-size: calc(var(--_avatar-size) * 0.3);
+    block-size: calc(var(--_avatar-size) * 0.3);
+    border-radius: var(--radius-full);
+    border: 2px solid var(--color-background);
+    background: var(--color-text-subtle);
+  }
+
+  .avatar[data-status="online"]::after {
+    background: var(--color-success);
+  }
+
+  .avatar[data-status="busy"]::after {
+    background: var(--color-error);
+  }
+
+  .avatar[data-status="away"]::after {
+    background: var(--color-warning);
+  }
+
+  .avatar[data-status="offline"]::after {
+    background: var(--color-text-subtle);
+  }
+
+  /* Don't show status dot on initials-only avatars unless explicitly set */
+  .avatar[data-initials]:not([data-status])::after {
+    display: none;
+  }
+
+
+  /* ========================================
+     AVATAR GROUP
+     Overlapping stack
+     ======================================== */
+
+  .avatar-group {
+    display: flex;
+    align-items: center;
+  }
+
+  .avatar-group .avatar {
+    box-shadow: 0 0 0 2px var(--color-background);
+    transition: transform var(--duration-fast) var(--ease-settle);
+  }
+
+  .avatar-group .avatar + .avatar {
+    margin-inline-start: calc(var(--_avatar-size) * -0.3);
+  }
+
+  .avatar-group .avatar:hover {
+    z-index: var(--z-raised);
+    transform: scale(1.1);
+  }
+
+  /* Overflow counter: +5 more */
+  .avatar-group__overflow {
+    --_avatar-size: 2.5rem;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--_avatar-size);
+    block-size: var(--_avatar-size);
+    border-radius: var(--radius-full);
+    background: var(--color-surface);
+    border: var(--border-width) solid var(--color-border-subtle);
+    font-size: var(--font-size-xs);
+    font-weight: var(--weight-semibold);
+    color: var(--color-text-muted);
+    margin-inline-start: calc(var(--_avatar-size) * -0.3);
+    box-shadow: 0 0 0 2px var(--color-background);
+  }
+
+
+  /* ========================================
+     THEME-SPECIFIC STYLES
+     ======================================== */
+
+  /* Tsunami: asymmetric corners on square */
+  [data-motion="tsunami"] .avatar[data-shape="square"] {
+    border-radius: var(--radius-asymmetric, 0 12px 0 0);
+  }
+
+  /* Rapids: hard shadow on group */
+  [data-motion="rapids"] .avatar-group .avatar {
+    box-shadow: 2px 2px 0 oklch(0 0 0 / 0.1), 0 0 0 2px var(--color-background);
+  }
+}

package/src/components/badge.css

@@ -0,0 +1,182 @@
+/**
+ * Fluid Framework - Badge Component
+ * @layer components
+ *
+ * Small labels for status, categories, counts, and metadata.
+ * Works standalone or positioned inside cards and other components.
+ *
+ * Usage:
+ *   <span class="badge">Default</span>
+ *   <span class="badge" data-variant="filled">Filled</span>
+ *   <span class="badge" data-variant="outline">Outline</span>
+ *   <span class="badge" data-status="good">Active</span>
+ *   <span class="badge" data-status="warning">Pending</span>
+ *   <span class="badge" data-status="error">Failed</span>
+ *   <span class="badge" data-size="sm">Small</span>
+ *   <span class="badge" data-size="lg">Large</span>
+ */
+
+@layer components {
+  /* ========================================
+     BASE BADGE
+     ======================================== */
+
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    padding: var(--space-1) var(--space-3);
+    font-size: var(--font-size-xs);
+    font-weight: var(--weight-semibold);
+    line-height: var(--leading-tight);
+    letter-spacing: var(--tracking-wide);
+    text-transform: uppercase;
+    border-radius: var(--radius-full);
+    white-space: nowrap;
+    vertical-align: middle;
+
+    /* Default: accent-tinted */
+    color: var(--accent);
+    background: var(--accent-subtle);
+  }
+
+
+  /* ========================================
+     VARIANTS
+     ======================================== */
+
+  /* Filled - solid accent background */
+  .badge[data-variant="filled"] {
+    color: var(--white);
+    background: var(--accent);
+  }
+
+  /* Outline - border only */
+  .badge[data-variant="outline"] {
+    background: transparent;
+    border: var(--border-width) solid currentColor;
+  }
+
+  /* Muted - subtle neutral tones */
+  .badge[data-variant="muted"] {
+    color: var(--color-text-muted);
+    background: var(--color-surface);
+  }
+
+
+  /* ========================================
+     STATUS COLORS
+     Semantic states for indicators
+     ======================================== */
+
+  .badge[data-status="good"] {
+    color: var(--color-success);
+    background: var(--color-success-subtle);
+  }
+
+  .badge[data-status="warning"] {
+    color: var(--color-warning);
+    background: var(--color-warning-subtle);
+  }
+
+  .badge[data-status="error"] {
+    color: var(--color-error);
+    background: var(--color-error-subtle);
+  }
+
+  .badge[data-status="info"] {
+    color: var(--color-info);
+    background: var(--color-info-subtle);
+  }
+
+  /* Status + filled combo */
+  .badge[data-status="good"][data-variant="filled"] {
+    color: var(--white);
+    background: var(--color-success);
+  }
+
+  .badge[data-status="warning"][data-variant="filled"] {
+    color: var(--white);
+    background: var(--color-warning);
+  }
+
+  .badge[data-status="error"][data-variant="filled"] {
+    color: var(--white);
+    background: var(--color-error);
+  }
+
+  .badge[data-status="info"][data-variant="filled"] {
+    color: var(--white);
+    background: var(--color-info);
+  }
+
+
+  /* ========================================
+     SIZES
+     ======================================== */
+
+  .badge[data-size="sm"] {
+    padding: var(--space-0-5) var(--space-2);
+    font-size: var(--font-size-2xs, 0.6875rem);
+    letter-spacing: var(--tracking-wider);
+  }
+
+  .badge[data-size="lg"] {
+    padding: var(--space-2) var(--space-4);
+    font-size: var(--font-size-sm);
+  }
+
+
+  /* ========================================
+     BADGE WITH DOT
+     Status dot indicator before text
+     ======================================== */
+
+  .badge[data-dot]::before {
+    content: "";
+    inline-size: 0.375rem;
+    block-size: 0.375rem;
+    border-radius: var(--radius-full);
+    background: currentColor;
+    flex-shrink: 0;
+  }
+
+
+  /* ========================================
+     BADGE COUNT
+     Numeric counters (notifications, etc.)
+     ======================================== */
+
+  .badge[data-count] {
+    min-inline-size: 1.5rem;
+    justify-content: center;
+    padding: var(--space-1);
+    border-radius: var(--radius-full);
+    font-variant-numeric: tabular-nums;
+  }
+
+
+  /* ========================================
+     THEME-SPECIFIC STYLES
+     ======================================== */
+
+  /* Still: square badges */
+  [data-motion="still"] .badge {
+    border-radius: 0;
+    letter-spacing: var(--tracking-wider);
+  }
+
+  /* Brutalist: hard edges, bold */
+  [data-motion="brutalist"] .badge {
+    border-radius: 0;
+    text-transform: uppercase;
+    font-weight: var(--weight-bold);
+    border: 2px solid currentColor;
+    background: transparent;
+  }
+
+  /* Tsunami: asymmetric corners */
+  [data-motion="tsunami"] .badge {
+    border-radius: var(--radius-asymmetric, 0 12px 0 0);
+  }
+}