@fluid-theme/core 0.4.3

package/src/components/themed-images.css

@@ -0,0 +1,229 @@
+/**
+ * Fluid Framework - Themed Images
+ * @layer components
+ *
+ * Apply theme-aware duotone filters to images sitewide.
+ * Uses CSS filters and pseudo-element overlays for the effect.
+ *
+ * Usage:
+ *   <figure class="themed-image">
+ *     <img src="..." alt="...">
+ *   </figure>
+ *
+ * Or apply to card images:
+ *   <div class="card" data-themed-image>
+ *     <img src="..." alt="...">
+ *   </div>
+ *
+ * Disable with data-no-duotone attribute.
+ */
+
+@layer components {
+  /* ========================================
+     THEMED IMAGE CONTAINER
+     Applies duotone effect via overlay
+     ======================================== */
+
+  .themed-image,
+  [data-themed-image] {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .themed-image img,
+  [data-themed-image] img {
+    display: block;
+    inline-size: 100%;
+    block-size: auto;
+    /* Convert to grayscale as base for duotone */
+    filter: grayscale(100%) contrast(1.1);
+    transition: filter var(--duration-normal) var(--ease-fluid);
+  }
+
+  /* Duotone overlay using gradient */
+  .themed-image::after,
+  [data-themed-image]::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      135deg,
+      var(--duotone-dark, oklch(0.3 0.1 220)) 0%,
+      var(--duotone-light, oklch(0.7 0.1 200)) 100%
+    );
+    mix-blend-mode: multiply;
+    opacity: 0.85;
+    pointer-events: none;
+    transition: opacity var(--duration-normal) var(--ease-fluid);
+  }
+
+  /* Hover: reduce effect to show more of original */
+  .themed-image:hover::after,
+  [data-themed-image]:hover::after {
+    opacity: 0.6;
+  }
+
+  .themed-image:hover img,
+  [data-themed-image]:hover img {
+    filter: grayscale(50%) contrast(1.05);
+  }
+
+  /* Disable duotone */
+  [data-no-duotone] img {
+    filter: none !important;
+  }
+
+  [data-no-duotone]::after {
+    display: none !important;
+  }
+
+
+  /* ========================================
+     SITEWIDE IMAGE THEMING
+     Auto-apply to images in certain contexts
+     ======================================== */
+
+  /* Apply to images in cards (opt-in) */
+  .card[data-themed-image] .card__image {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .card[data-themed-image] .card__image img {
+    filter: grayscale(100%) contrast(1.1);
+  }
+
+  .card[data-themed-image] .card__image::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      135deg,
+      var(--duotone-dark) 0%,
+      var(--duotone-light) 100%
+    );
+    mix-blend-mode: multiply;
+    opacity: 0.85;
+    pointer-events: none;
+  }
+
+
+  /* ========================================
+     HERO IMAGE THEMING
+     For hero sections with background images
+     ======================================== */
+
+  .hero[data-themed-image] {
+    position: relative;
+  }
+
+  .hero[data-themed-image]::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      135deg,
+      var(--duotone-dark) 0%,
+      var(--duotone-light) 100%
+    );
+    mix-blend-mode: multiply;
+    opacity: 0.75;
+    z-index: 1;
+    pointer-events: none;
+  }
+
+  .hero[data-themed-image] > * {
+    position: relative;
+    z-index: 2;
+  }
+
+
+  /* ========================================
+     SECTION BACKGROUNDS
+     Alternating themed section colors
+     ======================================== */
+
+  /* Tinted section background */
+  .section[data-bg="tinted"],
+  section[data-bg="tinted"] {
+    background-color: var(--surface-tinted, var(--section-2, var(--color-surface)));
+  }
+
+  /* Accent-tinted section */
+  .section[data-bg="accent"],
+  section[data-bg="accent"] {
+    background-color: var(--section-accent, var(--surface-accent, var(--accent-subtle)));
+  }
+
+  /* Alternating sections (every other) */
+  .section[data-bg="alt"],
+  section[data-bg="alt"] {
+    background-color: var(--section-2, var(--section-alt, var(--color-surface)));
+  }
+
+  /* Specific section color slots */
+  .section[data-bg="1"], section[data-bg="1"] { background-color: var(--section-1, var(--color-background)); }
+  .section[data-bg="2"], section[data-bg="2"] { background-color: var(--section-2, var(--color-surface)); }
+  .section[data-bg="3"], section[data-bg="3"] { background-color: var(--section-3, var(--surface-tinted)); }
+
+  /* Auto-alternating sections - 3-color rotation */
+  [data-alternating-sections] > .section:nth-child(3n+1),
+  [data-alternating-sections] > section:nth-child(3n+1) {
+    background-color: var(--section-1, var(--color-background));
+  }
+
+  [data-alternating-sections] > .section:nth-child(3n+2),
+  [data-alternating-sections] > section:nth-child(3n+2) {
+    background-color: var(--section-2, var(--color-surface));
+  }
+
+  [data-alternating-sections] > .section:nth-child(3n+3),
+  [data-alternating-sections] > section:nth-child(3n+3) {
+    background-color: var(--section-3, var(--surface-tinted));
+  }
+
+  /* Simple 2-color alternation */
+  [data-alternating-sections="simple"] > .section:nth-child(odd),
+  [data-alternating-sections="simple"] > section:nth-child(odd) {
+    background-color: var(--section-1, var(--color-background));
+  }
+
+  [data-alternating-sections="simple"] > .section:nth-child(even),
+  [data-alternating-sections="simple"] > section:nth-child(even) {
+    background-color: var(--section-2, var(--color-surface));
+  }
+
+
+  /* ========================================
+     FULL-BLEED COLORED SECTIONS
+     Sections with strong theme presence
+     ======================================== */
+
+  .section[data-bg="accent-solid"] {
+    background-color: var(--accent);
+    color: var(--white);
+  }
+
+  .section[data-bg="accent-solid"] h1,
+  .section[data-bg="accent-solid"] h2,
+  .section[data-bg="accent-solid"] h3 {
+    color: var(--white);
+  }
+
+  .section[data-bg="accent-solid"] a {
+    color: var(--white);
+    text-decoration: underline;
+  }
+
+  .section[data-bg="accent-solid"] a:hover {
+    opacity: 0.8;
+  }
+
+  /* Accessibility: reduced motion */
+  @media (prefers-reduced-motion: reduce) {
+    [data-duotone] img,
+    [data-duotone]:hover img {
+      transition: none;
+    }
+  }
+}

package/src/components/tooltip.css

@@ -0,0 +1,247 @@
+/**
+ * Fluid Framework - Tooltip & Popover Component
+ * @layer components
+ *
+ * Tooltips for brief hints; popovers for richer content.
+ * CSS-only tooltips via data-tooltip attribute.
+ * Popover uses the native popover API where supported.
+ *
+ * Tooltip Usage (CSS-only):
+ *   <button data-tooltip="Helpful hint">Hover me</button>
+ *   <span data-tooltip="Info" data-tooltip-pos="top">Text</span>
+ *
+ * Positions: data-tooltip-pos="top|bottom|left|right" (default: top)
+ *
+ * Popover Usage (native API):
+ *   <button popovertarget="my-popover">Open</button>
+ *   <div id="my-popover" popover class="popover">
+ *     <div class="popover__content">
+ *       <h3 class="popover__title">Title</h3>
+ *       <p>Rich content here.</p>
+ *     </div>
+ *   </div>
+ */
+
+@layer components {
+  /* ========================================
+     TOOLTIP (CSS-only via data attribute)
+     ======================================== */
+
+  [data-tooltip] {
+    position: relative;
+  }
+
+  /* Tooltip bubble */
+  [data-tooltip]::after {
+    content: attr(data-tooltip);
+
+    /* Positioning */
+    position: absolute;
+    z-index: var(--z-tooltip);
+    pointer-events: none;
+
+    /* Visual — inverts relative to page background */
+    background: var(--color-text);
+    color: var(--color-background);
+    font-size: var(--font-size-xs);
+    font-weight: var(--weight-medium);
+    line-height: var(--leading-snug);
+    white-space: nowrap;
+    max-inline-size: min(20rem, 90vw);
+    padding: var(--space-1-5) var(--space-3);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-md);
+
+    /* Hidden state */
+    opacity: 0;
+    transform: scale(0.95);
+    transition:
+      opacity var(--duration-fast) var(--ease-fluid),
+      transform var(--duration-fast) var(--ease-settle);
+  }
+
+  /* Dark mode tooltip — automatically inverts via semantic tokens above */
+
+  /* Show on hover/focus */
+  [data-tooltip]:hover::after,
+  [data-tooltip]:focus-visible::after {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+
+  /* ========================================
+     TOOLTIP POSITIONS
+     ======================================== */
+
+  /* Top (default) */
+  [data-tooltip]::after,
+  [data-tooltip][data-tooltip-pos="top"]::after {
+    inset-block-end: calc(100% + var(--space-2));
+    inset-inline-start: 50%;
+    translate: -50% 4px;
+  }
+
+  [data-tooltip]:hover::after,
+  [data-tooltip]:focus-visible::after,
+  [data-tooltip][data-tooltip-pos="top"]:hover::after,
+  [data-tooltip][data-tooltip-pos="top"]:focus-visible::after {
+    translate: -50% 0;
+  }
+
+  /* Bottom */
+  [data-tooltip][data-tooltip-pos="bottom"]::after {
+    inset-block-start: calc(100% + var(--space-2));
+    inset-block-end: auto;
+    inset-inline-start: 50%;
+    translate: -50% -4px;
+  }
+
+  [data-tooltip][data-tooltip-pos="bottom"]:hover::after,
+  [data-tooltip][data-tooltip-pos="bottom"]:focus-visible::after {
+    translate: -50% 0;
+  }
+
+  /* Left */
+  [data-tooltip][data-tooltip-pos="left"]::after {
+    inset-inline-end: calc(100% + var(--space-2));
+    inset-inline-start: auto;
+    inset-block-start: 50%;
+    translate: 4px -50%;
+  }
+
+  [data-tooltip][data-tooltip-pos="left"]:hover::after,
+  [data-tooltip][data-tooltip-pos="left"]:focus-visible::after {
+    translate: 0 -50%;
+  }
+
+  /* Right */
+  [data-tooltip][data-tooltip-pos="right"]::after {
+    inset-inline-start: calc(100% + var(--space-2));
+    inset-block-start: 50%;
+    translate: -4px -50%;
+  }
+
+  [data-tooltip][data-tooltip-pos="right"]:hover::after,
+  [data-tooltip][data-tooltip-pos="right"]:focus-visible::after {
+    translate: 0 -50%;
+  }
+
+  /* Multiline: allow wrapping for long tooltips */
+  [data-tooltip][data-tooltip-wrap]::after {
+    white-space: normal;
+    inline-size: max-content;
+    max-inline-size: 20rem;
+    text-align: start;
+  }
+
+
+  /* ========================================
+     POPOVER (native popover API)
+     ======================================== */
+
+  .popover {
+    /* Reset native popover defaults */
+    border: none;
+    padding: 0;
+    margin: 0;
+    background: transparent;
+    overflow: visible;
+
+    /* Positioning handled by browser anchor API or manual JS */
+    z-index: var(--z-popover);
+
+    /* Hidden by default */
+    opacity: 0;
+    transform: scale(0.95) translateY(-4px);
+    transition:
+      opacity var(--duration-fast) var(--ease-fluid),
+      transform var(--duration-fast) var(--ease-settle),
+      display var(--duration-fast) allow-discrete,
+      overlay var(--duration-fast) allow-discrete;
+  }
+
+  /* Open state — JS fallback via [data-open] for browsers without :popover-open */
+  .popover:popover-open,
+  .popover[data-open] {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+
+  /* Starting style for entry animation */
+  @starting-style {
+    .popover:popover-open {
+      opacity: 0;
+      transform: scale(0.95) translateY(-4px);
+    }
+  }
+
+  .popover__content {
+    background: var(--color-surface-raised);
+    border: var(--border-width) solid var(--color-border-subtle);
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-lg);
+    padding: var(--space-4);
+    min-inline-size: 12rem;
+    max-inline-size: 24rem;
+  }
+
+  .popover__title {
+    font-size: var(--font-size-sm);
+    font-weight: var(--weight-semibold);
+    margin: 0 0 var(--space-2);
+  }
+
+  .popover__content p {
+    font-size: var(--font-size-sm);
+    color: var(--color-text-muted);
+    margin: 0;
+  }
+
+
+  /* ========================================
+     THEME-SPECIFIC STYLES
+     ======================================== */
+
+  /* Still: no animation */
+  [data-motion="still"] [data-tooltip]::after {
+    transition: none;
+  }
+
+  [data-motion="still"] .popover {
+    transition: none;
+  }
+
+  /* Rapids: hard shadow */
+  [data-motion="rapids"] .popover__content {
+    box-shadow: var(--shadow-offset);
+  }
+
+  /* Tsunami: asymmetric */
+  [data-motion="tsunami"] .popover__content {
+    border-radius: var(--radius-asymmetric, 0 24px 0 0);
+  }
+
+
+  /* ========================================
+     ACCESSIBILITY
+     ======================================== */
+
+  /* Hide tooltips on touch-only devices */
+  @media (hover: none) {
+    [data-tooltip]::after {
+      display: none;
+    }
+  }
+
+  /* Reduced motion: instant show/hide */
+  @media (prefers-reduced-motion: reduce) {
+    [data-tooltip]::after {
+      transition: none;
+    }
+
+    .popover {
+      transition: none;
+    }
+  }
+}

package/src/components/version-badge.css

@@ -0,0 +1,70 @@
+/**
+ * Fluid Framework - Version Badge Component
+ * @layer components
+ *
+ * A small fixed-position badge showing the current version number.
+ * Subtle, semi-transparent, bottom-right corner.
+ *
+ * Toggled via data attribute on <html>:
+ *   <html data-show-version="true"> — shows badge
+ *   Default (no attribute) — hidden
+ *
+ * Usage:
+ *   <span class="version-badge">v0.3.5</span>
+ */
+
+@layer components {
+
+  .version-badge {
+    position: fixed;
+    inset-block-end: var(--space-3);
+    inset-inline-end: var(--space-3);
+    z-index: var(--z-sticky);
+
+    display: none;
+    align-items: center;
+
+    padding-block: var(--space-1);
+    padding-inline: var(--space-3);
+    border-radius: var(--radius-full);
+
+    font-size: var(--font-size-xs);
+    font-weight: var(--weight-medium, 500);
+    font-family: var(--font-mono);
+    line-height: 1;
+    letter-spacing: var(--tracking-wide);
+
+    color: var(--color-text-muted);
+    background-color: color-mix(in oklch, var(--color-surface) 85%, transparent);
+    border: var(--border-width) solid var(--color-border-subtle);
+    backdrop-filter: blur(8px);
+
+    opacity: 0.7;
+    transition: opacity var(--duration-fast) var(--ease-fluid);
+    pointer-events: none;
+    user-select: none;
+  }
+
+  /* Show when data attribute is set */
+  [data-show-version="true"] .version-badge {
+    display: flex;
+  }
+
+  .version-badge:hover {
+    opacity: 1;
+  }
+
+  /* Hide in print */
+  @media print {
+    .version-badge {
+      display: none;
+    }
+  }
+
+  /* Accessibility */
+  @media (prefers-reduced-motion: reduce) {
+    .version-badge {
+      transition: none;
+    }
+  }
+}