@invisibleloop/pulse 0.20.10 → 0.20.19

package/docs/public/swish.css

@@ -1,394 +0,0 @@
-/*
- * swish.css — Swish editorial fashion example
- *
- * Palette: warm off-white paper, deep ink, oxblood accent.
- * Font:    Playfair Display (display headings), system-ui (body)
- *
- * Split into two logical sections:
- *   1. Token overrides — hex values, palette definitions ([data-theme="light"])
- *   2. Component styles — layout, typography, custom elements (var() only)
- */
-
-/* ==========================================================================
-   1. Token overrides (hex values live here)
-   ========================================================================== */
-
-/* Override --font-display so --ui-font-display cascades to Playfair Display */
-:root {
-  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
-}
-
-[data-theme="light"] {
-  --ui-bg:           #f5f1ea;
-  --ui-surface:      #faf7f1;
-  --ui-surface-2:    #ede7dc;
-  --ui-border:       #d8cfc0;
-  --ui-text:         #14110d;
-  --ui-muted:        #6b6357;
-  --ui-accent:       #6b1d1d;
-  --ui-accent-hover: #4a1212;
-  --ui-accent-dim:   rgba(107, 29, 29, 0.10);
-  --ui-accent-text:  #faf7f1;
-
-  /* Swish-specific tokens */
-  --swish-paper:         #faf7f1;
-  --swish-ink:           #14110d;
-  --swish-hero-veil:     rgba(20, 17, 13, 0.55);
-  --swish-hero-veil-top: rgba(20, 17, 13, 0.05);
-  --swish-label-bg:      rgba(20, 17, 13, 0.55);
-}
-
-/* Primary button on light theme — needs paper text, not default */
-[data-theme="light"] .ui-btn--primary {
-  color: var(--swish-paper);
-}
-
-/* Frosted nav over editorial imagery */
-[data-theme="light"] .ui-nav {
-  backdrop-filter: blur(14px);
-  -webkit-backdrop-filter: blur(14px);
-  background: rgba(245, 241, 234, 0.78);
-}
-
-[data-theme="light"] .ui-nav-mobile .ui-nav-link,
-[data-theme="light"] .ui-nav-mobile .ui-nav-mega-item-label,
-[data-theme="light"] .ui-nav-mobile-section {
-  color: var(--ui-text);
-}
-
-/* ==========================================================================
-   2. Component styles (var() only — no hex values below this line)
-   ========================================================================== */
-
-/* --------------------------------------------------------------------------
-   Skip link
-   -------------------------------------------------------------------------- */
-.skip-link {
-  position: absolute;
-  left: -9999px;
-  top: 0;
-  background: var(--ui-text);
-  color: var(--ui-bg);
-  padding: var(--ui-space-2) var(--ui-space-4);
-  z-index: 100;
-}
-
-.skip-link:focus {
-  left: var(--ui-space-4);
-  top: var(--ui-space-4);
-}
-
-/* --------------------------------------------------------------------------
-   Brand wordmark
-   -------------------------------------------------------------------------- */
-.swish-mark {
-  font-family: var(--ui-font-display);
-  font-weight: 400;
-  font-size: var(--ui-text-2xl);
-  letter-spacing: 0.32em;
-  text-transform: uppercase;
-}
-
-/* --------------------------------------------------------------------------
-   Full-bleed hero
-   -------------------------------------------------------------------------- */
-.swish-hero {
-  position: relative;
-  min-height: 88vh;
-  display: flex;
-  align-items: center;
-  background-image:
-    linear-gradient(180deg, var(--swish-hero-veil-top) 0%, var(--swish-hero-veil) 100%),
-    url('/images/swish/1490481651871-ab68de25d43d.jpg');
-  background-size: cover;
-  background-position: center;
-  color: var(--swish-paper);
-  padding: var(--ui-space-12) var(--ui-space-6) var(--ui-space-16);
-}
-
-.swish-hero__inner {
-  max-width: 880px;
-  margin: 0 auto;
-  width: 100%;
-}
-
-.swish-hero__eyebrow {
-  display: inline-block;
-  font-size: var(--ui-text-xs);
-  letter-spacing: 0.24em;
-  text-transform: uppercase;
-  color: var(--swish-ink);
-  background: var(--swish-paper);
-  padding: var(--ui-space-1) var(--ui-space-3);
-  margin-bottom: var(--ui-space-5);
-}
-
-.swish-hero__title {
-  font-family: var(--ui-font-display);
-  font-weight: 400;
-  font-size: clamp(3rem, 9vw, 7rem);
-  line-height: 0.95;
-  letter-spacing: -0.02em;
-  margin-bottom: var(--ui-space-6);
-}
-
-.swish-hero__deck {
-  font-size: var(--ui-text-lg);
-  line-height: 1.6;
-  max-width: 36rem;
-  margin-bottom: var(--ui-space-8);
-  opacity: 0.92;
-}
-
-/* Ghost button inside the hero — force white so it's visible over the dark veil */
-.swish-hero .ui-btn--ghost {
-  color: #fff;
-  border-color: rgba(255,255,255,0.6);
-}
-.swish-hero .ui-btn--ghost:hover {
-  background: rgba(255,255,255,0.12);
-  border-color: #fff;
-}
-
-/* Quote section — equal top and bottom padding */
-.swish-quote-section { padding-bottom: var(--ui-space-16); }
-
-/* --------------------------------------------------------------------------
-   Section eyebrow / issue marker
-   -------------------------------------------------------------------------- */
-.swish-issue {
-  display: flex;
-  align-items: center;
-  gap: var(--ui-space-4);
-  font-size: var(--ui-text-xs);
-  letter-spacing: 0.24em;
-  text-transform: uppercase;
-  color: var(--ui-muted);
-  margin-bottom: var(--ui-space-6);
-}
-
-.swish-issue::before,
-.swish-issue::after {
-  content: '';
-  flex: 1;
-  height: 1px;
-  background: var(--ui-border);
-}
-
-.swish-issue--left::after {
-  display: none;
-}
-
-/* --------------------------------------------------------------------------
-   Featured looks (product cards)
-   -------------------------------------------------------------------------- */
-.swish-look {
-  display: block;
-  text-decoration: none;
-  color: var(--ui-text);
-}
-
-.swish-look__frame {
-  aspect-ratio: 3 / 4;
-  overflow: hidden;
-  background: var(--ui-surface-2);
-  margin-bottom: var(--ui-space-4);
-}
-
-.swish-look__frame img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-  transition: transform 600ms ease;
-}
-
-.swish-look:hover .swish-look__frame img {
-  transform: scale(1.04);
-}
-
-.swish-look__name {
-  font-family: var(--ui-font-display);
-  font-size: var(--ui-text-lg);
-  font-weight: 400;
-  margin-bottom: var(--ui-space-1);
-}
-
-.swish-look__meta {
-  font-size: var(--ui-text-sm);
-  color: var(--ui-muted);
-  letter-spacing: 0.04em;
-}
-
-/* --------------------------------------------------------------------------
-   Atelier split layout
-   -------------------------------------------------------------------------- */
-.swish-split {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--ui-space-12);
-  align-items: center;
-}
-
-.swish-split__media {
-  aspect-ratio: 4 / 5;
-  overflow: hidden;
-  background: var(--ui-surface-2);
-}
-
-.swish-split__media img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-}
-
-.swish-split__title {
-  font-family: var(--ui-font-display);
-  font-size: clamp(2rem, 4vw, 3rem);
-  font-weight: 400;
-  line-height: 1.05;
-  letter-spacing: -0.015em;
-  margin-bottom: var(--ui-space-5);
-}
-
-.swish-split__body p {
-  font-size: var(--ui-text-lg);
-  line-height: 1.75;
-  color: var(--ui-text);
-  margin-bottom: var(--ui-space-4);
-}
-
-@media (max-width: 720px) {
-  .swish-split {
-    grid-template-columns: 1fr;
-    gap: var(--ui-space-8);
-  }
-}
-
-/* --------------------------------------------------------------------------
-   Lookbook strip
-   -------------------------------------------------------------------------- */
-.swish-strip {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: var(--ui-space-4);
-}
-
-.swish-strip__cell {
-  position: relative;
-  aspect-ratio: 4 / 5;
-  overflow: hidden;
-  background: var(--ui-surface-2);
-}
-
-.swish-strip__cell img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-}
-
-.swish-strip__label {
-  position: absolute;
-  left: var(--ui-space-4);
-  bottom: var(--ui-space-4);
-  font-size: var(--ui-text-xs);
-  letter-spacing: 0.24em;
-  text-transform: uppercase;
-  color: var(--swish-paper);
-  background: var(--swish-label-bg);
-  padding: var(--ui-space-2) var(--ui-space-3);
-}
-
-@media (max-width: 720px) {
-  .swish-strip {
-    grid-template-columns: 1fr;
-  }
-}
-
-/* --------------------------------------------------------------------------
-   Journal cards
-   -------------------------------------------------------------------------- */
-.swish-journal-card {
-  display: flex;
-  flex-direction: column;
-  gap: var(--ui-space-3);
-}
-
-.swish-journal-card__frame {
-  aspect-ratio: 16 / 10;
-  overflow: hidden;
-  background: var(--ui-surface-2);
-}
-
-.swish-journal-card__frame img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-}
-
-.swish-journal-card__category {
-  font-size: var(--ui-text-xs);
-  letter-spacing: 0.24em;
-  text-transform: uppercase;
-  color: var(--ui-accent);
-}
-
-.swish-journal-card__title {
-  font-family: var(--ui-font-display);
-  font-size: var(--ui-text-xl);
-  font-weight: 400;
-  line-height: 1.25;
-}
-
-.swish-journal-card__deck {
-  font-size: var(--ui-text-base);
-  color: var(--ui-muted);
-  line-height: 1.6;
-}
-
-.swish-journal-card__byline {
-  font-size: var(--ui-text-xs);
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--ui-muted);
-}
-
-/* --------------------------------------------------------------------------
-   Newsletter section
-   -------------------------------------------------------------------------- */
-.swish-newsletter {
-  text-align: center;
-}
-
-.swish-newsletter__title {
-  font-family: var(--ui-font-display);
-  font-size: clamp(2rem, 4vw, 2.75rem);
-  font-weight: 400;
-  letter-spacing: -0.01em;
-  margin-bottom: var(--ui-space-4);
-}
-
-.swish-newsletter__deck {
-  max-width: 32rem;
-  margin: 0 auto var(--ui-space-8);
-  color: var(--ui-muted);
-  line-height: 1.6;
-}
-
-.swish-newsletter__form {
-  max-width: 32rem;
-  margin: 0 auto;
-  display: flex;
-  gap: var(--ui-space-3);
-  align-items: flex-end;
-  flex-wrap: wrap;
-  justify-content: center;
-}
-
-/* Safe area padding for mobile devices (home indicator bar) */
-@supports (padding-bottom: env(safe-area-inset-bottom)) {
-  footer { padding-bottom: max(var(--ui-space-6), env(safe-area-inset-bottom)); }
-}

package/docs/public/theme.css

@@ -1,52 +0,0 @@
-/* Brut theme tokens — home page only, scoped to [data-theme="light"] on <body> */
-[data-theme="light"] {
-  /* Confident saturated gold — solid block fill (dark ink text sits on top) */
-  --brut-gold: #e8b613;
-  --brut-gold-deep: #c99700;
-  --brut-ink: #171512;
-  --brut-surface: #faf8f2;
-  --brut-surface-2: #f1ede1;
-  --brut-muted: #5c574c;
-  --brut-dark: #171512;
-  --brut-darker: #100f0c;
-  --brut-surface-dot: #e6e0d2;
-}
-
-/* Site-wide light theme tokens — feeds docs.css's :root token names (--bg,
-   --surface, --text, --accent, etc.) and pulse-ui.css's input tokens, so
-   every docs page (nav, sidebar, guides, component reference, templates
-   gallery) picks up the same warm/gold/paper palette as the home page. */
-[data-theme="light"] {
-  --bg:            var(--brut-surface);
-  --surface:       #ffffff;
-  --surface-2:     var(--brut-surface-2);
-  --border:        #ddd6c4;
-  --border-subtle: #ece7d9;
-  --text:          var(--brut-ink);
-  --muted:         var(--brut-muted);
-  --muted-2:       #736b5c;
-  --accent:        #8a6300;
-  --accent-text:   var(--brut-ink);
-  --accent-hover:  #7a5700;
-  --accent-dim:    rgba(201, 151, 0, 0.12);
-  --green:         #166534;
-  --red:           #b91c1c;
-
-  /* Syntax tokens — dark-on-light, tuned for contrast on --surface-2 */
-  --tok-kw:    #7c3aed;
-  --tok-str:   #166534;
-  --tok-cmt:   #5c574f;
-  --tok-num:   #9a3412;
-  --tok-fn:    #1d4ed8;
-  --tok-prop:  #854d0e;
-  --tok-op:    #0e6280;
-  --tok-punct: #57534e;
-
-  /* Sticky header background — replaces the hardcoded rgba(13,13,16,.9) */
-  --header-bg: rgba(250, 248, 242, 0.9);
-
-  /* Callout / tag accents that were hardcoded dark-theme hex in docs.css */
-  --callout-note-icon: #1d4ed8;
-  --tag-required-bg:   rgba(185, 28, 28, 0.12);
-  --tag-required-text: #b91c1c;
-}

package/docs/public/themes/lumio.css

@@ -1,50 +0,0 @@
-/* ─── Lumio brand theme ───────────────────────────────────────────────────────
-   Palette tokens + light-theme overrides for the Lumio mobile-app template.
-   Load after pulse-ui.css so these override the framework defaults.          */
-
-/* Palette tokens — available in any rule */
-:root {
-  --cotton-rose: #e5c1bd;
-  --bone:        #d2d0ba;
-  --dry-sage:    #b6be9c;
-  --muted-teal:  #7b9e87;
-  --blue-slate:  #5e747f;
-}
-
-/* Override light-theme semantic tokens */
-[data-theme="light"],
-.ui-theme-light {
-  --ui-bg:           #f7f4ed;
-  --ui-surface:      #edeae0;
-  --ui-surface-2:    #e4e1d6;
-  --ui-border:       #cbc8b8;
-  /* Deep teal — darker than --muted-teal so it passes WCAG AA on both bg surfaces */
-  --ui-accent:       #3d6650;
-  --ui-accent-hover: #2e5040;
-  --ui-accent-dim:   rgba(61, 102, 80, 0.14);
-  --ui-accent-text:  #ffffff;
-  --ui-muted:        #5a574e;
-}
-
-/* Nav: frosted glass effect */
-[data-theme="light"] .ui-nav {
-  backdrop-filter: blur(14px);
-  -webkit-backdrop-filter: blur(14px);
-}
-
-/* Mobile menu: dark text on light dropdown background */
-[data-theme="light"] .ui-nav-mobile .ui-nav-link,
-[data-theme="light"] .ui-nav-mobile .ui-nav-mega-item-label,
-[data-theme="light"] .ui-nav-mobile-section {
-  color: var(--ui-text);
-}
-
-/* Pricing: show the Pro (highlighted) card first on mobile */
-@media (max-width: 639px) {
-  #pricing .ui-grid > div:nth-child(2) { order: -1; }
-}
-
-/* Primary buttons: white text on the deep teal accent background (6.5:1) */
-[data-theme="light"] .ui-btn--primary {
-  color: #fff;
-}

package/docs/public/themes/observatory.css

@@ -1,104 +0,0 @@
-/*
- * Observatory theme — dark astronomy palette
- *
- * Contrast notes (all checked against WCAG AA 4.5:1 for small text on --ui-bg):
- *   --pacific-blue (#53a2be) on --prussian-blue (#0a2239) → 5.29:1  ✓
- *   --ocean-blue   (#1d84b5) on --prussian-blue (#0a2239) → 3.68:1  (large text / UI only)
- *   Default --ui-text (#e2e2ea) on --prussian-blue (#0a2239)         ✓ (very high)
- *   --ui-muted rgba(180,215,230,0.85) on --prussian-blue (#0a2239)   → ~7.4:1  ✓
- *   --ui-muted rgba(180,215,230,0.85) on --jet-black (#132e32)       → ~6.4:1  ✓
- */
-
-/* Palette tokens */
-:root {
-  --prussian-blue: #0a2239;
-  --pacific-blue:  #53a2be;
-  --ocean-blue:    #1d84b5;
-  --jet-black:     #132e32;
-  --baltic-blue:   #176087;
-}
-
-/* Dark theme overrides — target :root (dark is the default pulse-ui theme) */
-:root {
-  --ui-bg:          var(--prussian-blue);
-  --ui-surface:     var(--jet-black);
-  --ui-surface-2:   #0d2b38;
-  --ui-border:      rgba(83, 162, 190, 0.18);
-  --ui-accent:      var(--pacific-blue);
-  --ui-accent-hover:#6bbcd4;
-  --ui-accent-dim:  rgba(83, 162, 190, 0.12);
-  --ui-accent-text: var(--prussian-blue);
-  --ui-muted:       rgba(180, 215, 230, 0.85);
-}
-
-/* Reading progress bar — CSS scroll-driven animation, no JS required */
-.obs-reading-progress {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 3px;
-  z-index: 10000;
-  pointer-events: none;
-}
-.obs-reading-progress-bar {
-  height: 100%;
-  width: 100%;
-  background: var(--ui-accent);
-  transform: scaleX(0);
-  transform-origin: left;
-  animation: obs-reading-progress linear both;
-  animation-timeline: scroll(root block);
-}
-@keyframes obs-reading-progress {
-  from { transform: scaleX(0); }
-  to   { transform: scaleX(1); }
-}
-
-/* Article hero — restore bottom padding (ui-hero--sm removes it) */
-.ui-hero--sm { padding-bottom: 3rem; }
-
-/* Article layout — prose + aside side by side */
-.obs-article {
-  display: grid;
-  grid-template-columns: 1fr 260px;
-  gap: 3rem;
-  align-items: start;
-}
-
-@media (max-width: 767px) {
-  .obs-article { grid-template-columns: 1fr; }
-  .obs-aside-section:first-child { display: none; } /* ToC not useful below article on mobile */
-}
-
-/* Aside sections */
-.obs-aside-section {
-  margin-bottom: 2rem;
-}
-.obs-aside-section:last-child {
-  margin-bottom: 0;
-}
-.obs-aside-nav-link {
-  display: block;
-  padding: 0.375rem 0;
-  font-size: 0.875rem;
-  color: var(--ui-muted);
-  text-decoration: none;
-  border-bottom: 1px solid var(--ui-border);
-  transition: color .15s;
-}
-.obs-aside-nav-link:hover { color: var(--ui-text); }
-.obs-aside-nav-link:last-child { border-bottom: none; }
-
-/* Nav — frosted glass effect */
-.ui-nav {
-  backdrop-filter: blur(14px);
-  -webkit-backdrop-filter: blur(14px);
-}
-
-/* Mobile nav — ensure readable text on the expanded panel */
-.ui-nav-mobile .ui-nav-link,
-.ui-nav-mobile .ui-nav-mega-item-label,
-.ui-nav-mobile-section {
-  color: var(--ui-text);
-}