barua-ui 0.8.1 → 0.9.1

package/css/components/content.css

@@ -117,6 +117,14 @@
   .b-card--flush .b-card__body { padding: 0; }
   .b-card--flush .b-list { border: none; border-radius: 0; box-shadow: none; }
 
+  /* A card in a grid already stretches to the row's height; its body does not,
+     so a stack inside stops where its content stops and the button at the end
+     lands wherever the copy above happened to finish. Three prices with three
+     different feature lists gave three different buttons. --fill hands the
+     height down, so a .b-spacer inside pins the last row to the floor. */
+  .b-card--fill { display: flex; flex-direction: column; }
+  .b-card--fill > .b-card__body { flex: 1 1 auto; }
+
   .b-card__art {
     width: 4rem;
     height: 4rem;

package/css/components/marketing.css

@@ -81,6 +81,10 @@
     justify-content: center;
     margin-block-start: var(--b-space-6);
   }
+  /* What a chapter shows under its words: a rail of cards, a grid, a picture.
+     Same standoff as the actions row, so a chapter with cards and a chapter
+     with buttons breathe alike. */
+  .b-chapter__media { margin-block-start: var(--b-space-8); text-align: start; }
   .b-chapter--start .b-chapter__actions { justify-content: flex-start; }
   .b-feature-row .b-chapter__actions { justify-content: flex-start; margin-block-start: var(--b-space-5); }
 
@@ -166,6 +170,128 @@
   .b-rating__stars .b-icon { width: 0.95rem; height: 0.95rem; fill: currentColor; }
   .b-rating__stars .is-empty { color: var(--b-fill); }
 
+  /* ---- Marquee: a row that keeps moving ------------------------------------
+     For a line of marks too long to stand still: logos, integrations, the
+     names a product works with. The track holds the list TWICE and travels
+     exactly half its width, which is what makes the loop seamless; with one
+     copy it visibly snaps. It pauses under the pointer so a name can be read,
+     and it stops entirely for anyone who asked for less motion, where it
+     becomes an ordinary scrolling row instead. --b-marquee-time is the pace. */
+  .b-marquee {
+    overflow: hidden;
+    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
+    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
+  }
+  .b-marquee__track {
+    display: flex;
+    align-items: center;
+    gap: clamp(var(--b-space-6), 5vw, var(--b-space-12));
+    width: max-content;
+    animation: b-marquee var(--b-marquee-time, 40s) linear infinite;
+  }
+  .b-marquee:hover .b-marquee__track { animation-play-state: paused; }
+  @keyframes b-marquee { to { translate: -50% 0; } }
+  @media (prefers-reduced-motion: reduce) {
+    .b-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
+    .b-marquee__track { animation: none; }
+  }
+
+  /* ---- Quote card: a number, a sentence, and who said it -------------------
+     The shape a case study takes on a product page. The figure leads because
+     it is what gets remembered, the sentence earns it, and the name is what
+     makes either believable. On the accent by default, because this is the
+     one card on the page that is meant to interrupt. */
+  .b-quote-card {
+    display: flex;
+    flex-direction: column;
+    gap: var(--b-space-6);
+    padding: clamp(var(--b-space-6), 4vw, var(--b-space-10));
+    color: var(--b-color-on-accent);
+    background: var(--b-color-accent);
+    border-radius: var(--b-radius-2xl);
+    color-scheme: dark;
+  }
+  .b-quote-card__head {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: var(--b-space-4);
+  }
+  .b-quote-card__stat {
+    font-size: clamp(2.5rem, 6vw, 4rem);
+    font-weight: var(--b-weight-bold);
+    letter-spacing: var(--b-tracking-tight);
+    line-height: 1;
+  }
+  .b-quote-card__stat-label { font-size: var(--b-text-footnote); opacity: 0.75; }
+  .b-quote-card__quote {
+    /* The base layer gives every blockquote a quieter ink and a rule, which is
+       right in prose and wrong here: on the accent it renders as dark text on
+       a saturated field. The card owns its own colour, so the quote takes it. */
+    margin: 0;
+    padding: 0;
+    border: 0;
+    color: inherit;
+    font-size: clamp(1.125rem, 2vw, 1.5rem);
+    line-height: var(--b-leading-snug);
+    text-wrap: pretty;
+  }
+  .b-quote-card__name { font-weight: var(--b-weight-semibold); }
+  .b-quote-card__role { font-size: var(--b-text-footnote); opacity: 0.75; }
+
+  /* ---- Resource card: something to go and read ----------------------------
+     A picture, what kind of thing it is, and enough of the first line to
+     decide. The whole card is the link, and the plate stands in when there is
+     no picture, so a row of three never has a hole in it. */
+  .b-resource-card {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    color: inherit;
+    text-decoration: none;
+    background: var(--b-surface);
+    border: 1px solid var(--b-separator);
+    border-radius: var(--b-radius-xl);
+    transition: translate var(--b-duration-normal) var(--b-ease-out), box-shadow var(--b-duration-normal);
+  }
+  .b-resource-card:hover { text-decoration: none; }
+  @media (hover: hover) {
+    .b-resource-card:hover { translate: 0 -2px; box-shadow: var(--b-elevation-3); }
+  }
+  .b-resource-card__poster {
+    position: relative;
+    aspect-ratio: 16 / 9;
+    display: grid;
+    place-items: center;
+    overflow: hidden;
+    background: color-mix(in srgb, var(--b-color-accent) 14%, var(--b-fill-tertiary));
+  }
+  /* A picture fills the plate. A glyph is not a picture: stretched to the same
+     rule it became a two-hundred-pixel sparkle, which is how a stand-in ends up
+     louder than the thing it stands in for. It keeps a glyph's size and the
+     plate's quieter ink instead. */
+  .b-resource-card__poster > img { width: 100%; height: 100%; object-fit: cover; }
+  .b-resource-card__poster > svg,
+  .b-resource-card__poster > :not(img):not(.b-resource-card__type) svg {
+    width: var(--b-space-12);
+    height: var(--b-space-12);
+    color: color-mix(in srgb, var(--b-color-accent) 55%, var(--b-text-tertiary));
+  }
+  .b-resource-card__type {
+    position: absolute;
+    inset-block-start: var(--b-space-3);
+    inset-inline-start: var(--b-space-3);
+  }
+  .b-resource-card__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--b-space-2);
+    padding: var(--b-space-4);
+  }
+  .b-resource-card__title { font-weight: var(--b-weight-semibold); line-height: var(--b-leading-snug); }
+  .b-resource-card__excerpt { font-size: var(--b-text-footnote); color: var(--b-text-secondary); }
+
   /* ---- Logo wall: the companies already here ------------------------------- */
   /* A quiet row, evenly spaced, every mark the same height whatever its
      proportions — which is the only way a wall of logos looks deliberate

package/css/tokens.css

@@ -11,8 +11,13 @@
      declaration sits on, so re-declaring them here is what lets a subtree be
      light inside a dark page — a marketing page in a dark product, a preview
      pane, a customer's site. Without it, data-theme on anything but the root
-     only changed color-scheme and the tokens stayed as the root resolved them. */
-  :root, [data-theme] {
+     only changed color-scheme and the tokens stayed as the root resolved them.
+
+     .b-chapter--dark is in the list for the same reason: a chapter that inverts
+     IS a themed subtree, and flipping its color-scheme alone left every token
+     inside still resolved against the page it sits in, so the dark band came
+     out light. Naming it here keeps one copy of the token block. */
+  :root, [data-theme], .b-chapter--dark {
     color-scheme: light dark;
 
     /* ------------------------------------------------------------------ *

package/dist/index.cjs

@@ -194,6 +194,8 @@ __export(index_exports, {
   MarketingNav: () => MarketingNav,
   MarketingNavBrand: () => MarketingNavBrand,
   MarketingNavLinks: () => MarketingNavLinks,
+  Marquee: () => Marquee,
+  MarqueeTrack: () => MarqueeTrack,
   MediaPlaceholder: () => MediaPlaceholder,
   Menu: () => Menu,
   MenuBar: () => MenuBar,
@@ -224,6 +226,13 @@ __export(index_exports, {
   Progress: () => Progress,
   PromoBand: () => PromoBand,
   Quote: () => Quote,
+  QuoteCard: () => QuoteCard,
+  QuoteCardHead: () => QuoteCardHead,
+  QuoteCardName: () => QuoteCardName,
+  QuoteCardQuote: () => QuoteCardQuote,
+  QuoteCardRole: () => QuoteCardRole,
+  QuoteCardStat: () => QuoteCardStat,
+  QuoteCardStatLabel: () => QuoteCardStatLabel,
   RadarChart: () => RadarChart,
   Radio: () => Radio,
   Rail: () => Rail,
@@ -233,6 +242,11 @@ __export(index_exports, {
   RatingStars: () => RatingStars,
   Resizable: () => Resizable,
   ResizeHandle: () => ResizeHandle,
+  ResourceCard: () => ResourceCard,
+  ResourceCardBody: () => ResourceCardBody,
+  ResourceCardExcerpt: () => ResourceCardExcerpt,
+  ResourceCardPoster: () => ResourceCardPoster,
+  ResourceCardTitle: () => ResourceCardTitle,
   Result: () => Result,
   Reveal: () => Reveal,
   SafeArea: () => SafeArea,
@@ -2301,6 +2315,20 @@ var Rating = block("p", "b-rating", "Rating");
 var RatingStars = block("span", "b-rating__stars", "RatingStars");
 var LogoWall = block("div", "b-logo-wall", "LogoWall");
 var LogoWallLogo = block("span", "b-logo-wall__logo", "LogoWallLogo");
+var Marquee = block("div", "b-marquee", "Marquee");
+var MarqueeTrack = block("div", "b-marquee__track", "MarqueeTrack");
+var QuoteCard = block("article", "b-quote-card", "QuoteCard");
+var QuoteCardHead = block("div", "b-quote-card__head", "QuoteCardHead");
+var QuoteCardStat = block("p", "b-quote-card__stat", "QuoteCardStat");
+var QuoteCardStatLabel = block("p", "b-quote-card__stat-label", "QuoteCardStatLabel");
+var QuoteCardQuote = block("blockquote", "b-quote-card__quote", "QuoteCardQuote");
+var QuoteCardName = block("p", "b-quote-card__name", "QuoteCardName");
+var QuoteCardRole = block("p", "b-quote-card__role", "QuoteCardRole");
+var ResourceCard = block("a", "b-resource-card", "ResourceCard");
+var ResourceCardPoster = block("div", "b-resource-card__poster", "ResourceCardPoster");
+var ResourceCardBody = block("div", "b-resource-card__body", "ResourceCardBody");
+var ResourceCardTitle = block("p", "b-resource-card__title", "ResourceCardTitle");
+var ResourceCardExcerpt = block("p", "b-resource-card__excerpt", "ResourceCardExcerpt");
 
 // src/system.tsx
 var import_react17 = require("react");
@@ -3099,6 +3127,8 @@ function usePersistedState(key, initial) {
   MarketingNav,
   MarketingNavBrand,
   MarketingNavLinks,
+  Marquee,
+  MarqueeTrack,
   MediaPlaceholder,
   Menu,
   MenuBar,
@@ -3129,6 +3159,13 @@ function usePersistedState(key, initial) {
   Progress,
   PromoBand,
   Quote,
+  QuoteCard,
+  QuoteCardHead,
+  QuoteCardName,
+  QuoteCardQuote,
+  QuoteCardRole,
+  QuoteCardStat,
+  QuoteCardStatLabel,
   RadarChart,
   Radio,
   Rail,
@@ -3138,6 +3175,11 @@ function usePersistedState(key, initial) {
   RatingStars,
   Resizable,
   ResizeHandle,
+  ResourceCard,
+  ResourceCardBody,
+  ResourceCardExcerpt,
+  ResourceCardPoster,
+  ResourceCardTitle,
   Result,
   Reveal,
   SafeArea,