@sproutsocial/seeds-react-narrative-kit 0.1.0 → 0.2.0

package/src/narrative-container.css

@@ -17,7 +17,7 @@
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
+  align-items: stretch;
   padding: var(--space-500);
   border-radius: var(--radius-800);
   box-shadow: var(--shadow-low);

package/src/narrative-headline.css

@@ -0,0 +1,125 @@
+/**
+ * Seeds NarrativeHeadline component classes.
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * Usage:
+ *   <h2 class="seeds-narrative-headline">
+ *     Headline with a
+ *     <span class="seeds-narrative-headline-highlight">highlighted</span>
+ *     word
+ *   </h2>
+ */
+
+@layer components {
+
+/* Headline text. Rendered as an h1–h6, so reset the UA heading margins. */
+.seeds-narrative-headline {
+  box-sizing: border-box;
+  margin: 0;
+  font-family: var(--font-family);
+  font-size: var(--font-size-700);
+  line-height: var(--line-height-700);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: -0.02em;
+  color: var(--color-text-headline);
+}
+
+/* Static gradient accent for a span of headline text ("highlighted word").
+   Paints the AI brand gradient onto the glyphs via background-clip. */
+.seeds-narrative-headline-highlight {
+  background: var(--color-gradient-ai);
+  -webkit-background-clip: text;
+          background-clip: text;
+  color: transparent;
+}
+
+/* -------------------------------------------------------------------------
+   "Roll" variant — vertical word roll. The active word slides into view
+   while the previous one rolls out.
+   ------------------------------------------------------------------------- */
+.seeds-narrative-headline-roll {
+  display: inline-block;
+  position: relative;
+  /* clip-path rather than overflow:hidden: overflow:hidden on an inline-block
+     snaps its baseline to the bottom margin edge, dropping the rolling word
+     below the surrounding text. clip-path keeps the natural baseline. */
+  clip-path: inset(0);
+}
+
+/* Invisible word that holds the box width to the active word. */
+.seeds-narrative-headline-roll-sizer {
+  display: inline-block;
+  visibility: hidden;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+.seeds-narrative-headline-roll-word {
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  white-space: nowrap;
+  transform: translateY(100%);
+  opacity: 0;
+  transition:
+    transform var(--seeds-narrative-headline-roll-ms, 500ms) ease,
+    opacity var(--seeds-narrative-headline-roll-ms, 500ms) ease;
+}
+
+.seeds-narrative-headline-roll-word-active {
+  transform: translateY(0);
+  opacity: 1;
+}
+
+.seeds-narrative-headline-roll-word-past {
+  transform: translateY(-100%);
+  opacity: 0;
+}
+
+/* Reverse the roll direction. */
+.seeds-narrative-headline-roll-down .seeds-narrative-headline-roll-word {
+  transform: translateY(-100%);
+}
+.seeds-narrative-headline-roll-down .seeds-narrative-headline-roll-word-active {
+  transform: translateY(0);
+}
+.seeds-narrative-headline-roll-down .seeds-narrative-headline-roll-word-past {
+  transform: translateY(100%);
+}
+
+/* Gradient-painted rolling words with a slow shimmer. */
+.seeds-narrative-headline-roll-gradient .seeds-narrative-headline-roll-word {
+  background: var(--color-gradient-ai);
+  background-size: 200% 200%;
+  -webkit-background-clip: text;
+          background-clip: text;
+  color: transparent;
+  animation: seeds-narrative-headline-grad-shift 8s ease infinite;
+}
+
+@keyframes seeds-narrative-headline-grad-shift {
+  0%,
+  100% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+}
+
+/* The JS cycle is already disabled under reduced-motion (the first word holds);
+   also flatten the transition and shimmer so any in-flight motion settles. */
+@media (prefers-reduced-motion: reduce) {
+  .seeds-narrative-headline-roll-word {
+    transition: none;
+  }
+  .seeds-narrative-headline-roll-gradient .seeds-narrative-headline-roll-word {
+    animation: none;
+  }
+}
+
+}

package/src/pull-quote.css

@@ -0,0 +1,89 @@
+/**
+ * Seeds PullQuote component classes.
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * Usage:
+ *   <figure class="seeds-pull-quote">…</figure>            // subtle (default)
+ *   <figure class="seeds-pull-quote seeds-pull-quote-vivid">…</figure>
+ */
+
+@layer components {
+
+.seeds-pull-quote {
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin: 0; /* reset the browser default <figure> margin */
+  /* 40px block / 48px inline — 48px is off the space scale, so derive it from
+     two tokens (40 + 8) rather than hardcoding an off-scale value. */
+  padding: var(--space-600) calc(var(--space-600) + var(--space-300));
+  border-radius: var(--radius-800);
+  box-shadow: var(--shadow-low);
+  font-family: var(--font-family);
+  /* Subtle (default): the 20% AI gradient tint composited over the base
+     surface. --color-gradient-ai-subtle is already translucent, so layering it
+     over the opaque base color produces the soft wash. */
+  background-color: var(--color-container-bg-base);
+  background-image: var(--color-gradient-ai-subtle);
+  color: var(--color-text-headline);
+}
+
+/* Vivid: the full-saturation AI gradient with white content. White has no
+   semantic Seeds token; it is part of the AI gradient treatment (mirrors the
+   raw brand hex used in --color-gradient-ai). */
+.seeds-pull-quote-vivid {
+  background-color: transparent;
+  background-image: var(--color-gradient-ai);
+  color: #fff;
+}
+
+/* The accented bar holding the quote and attribution. */
+.seeds-pull-quote-bar {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-450); /* 24px */
+  width: 100%;
+  padding-left: var(--space-450); /* 24px */
+  /* 4px is off the border-width scale (max token is 3px); the bar is a
+     decorative accent, mirroring NarrativeContainer's hardcoded 4px ring. The
+     subtle accent uses the AI gradient mid stop (#9747ff — no exact token). */
+  border-left: 4px solid #9747ff;
+}
+
+.seeds-pull-quote-vivid .seeds-pull-quote-bar {
+  border-left-color: #fff;
+}
+
+.seeds-pull-quote-text {
+  margin: 0; /* reset the browser default <blockquote> margin */
+  font-size: var(--font-size-600);
+  line-height: var(--line-height-600);
+  font-style: italic;
+  font-weight: var(--font-weight-normal);
+  color: inherit;
+  overflow-wrap: break-word;
+}
+
+/* Attribution row — a flex container for author name, avatar, network, etc.
+   Direct text inherits a bold, small treatment to match the display-name style;
+   richer content (e.g. an Avatar) composes freely. */
+.seeds-pull-quote-attribution {
+  display: flex;
+  align-items: center;
+  gap: var(--space-300); /* 8px */
+  font-size: var(--font-size-200);
+  line-height: var(--line-height-200);
+  font-weight: var(--font-weight-bold);
+  color: inherit;
+}
+
+}