barua-ui 0.6.0 → 0.8.0

package/css/components/content.css

@@ -144,6 +144,13 @@
     box-shadow: var(--b-glass-edge);
     pointer-events: none;
   }
+  /* Thick material — the same glass, denser veil. For panels carrying data or
+     a form, where whatever the customer set as a wallpaper must not compete
+     with the ink. Translucency is decoration; a bounce rate is not. */
+  .b-card--glass.b-card--thick {
+    background: var(--b-material-thick-bg);
+  }
+
   /* Glass clear — transparent, for media-rich backgrounds */
   .b-card--glass-clear {
     position: relative;
@@ -848,6 +855,14 @@
     backdrop-filter: blur(var(--b-blur-lg)) saturate(1.1);
     border-color: var(--b-material-neutral-edge);
   }
+  /* …but a table of numbers is not decoration. A card that asks for the thick
+     material keeps its blur and doubles the veil, so the picture still shows at
+     the edges without competing with the ink. The veil follows the wallpaper's
+     own scheme, so it lightens on a bright picture and darkens on a dark one. */
+  .b-has-wallpaper .b-card--thick {
+    background: var(--b-material-thick-bg);
+  }
+
   /* A panel inside glass is a fill, never a second material. */
   .b-has-wallpaper .b-card .b-card {
     background: var(--b-fill-quaternary);

package/css/components/marketing.css

@@ -13,6 +13,13 @@
     --b-chapter-gap: clamp(4.5rem, 9vw, 8.5rem);
     display: flex;
     flex-direction: column;
+    /* The wrapper paints the page. A marketing page is often a different
+       scheme from the product around it — light pages for a dark tool — and
+       with data-theme on this element the tokens resolve here, so the page
+       takes its own background rather than the application's. */
+    min-height: 100dvh;
+    background: var(--b-bg);
+    color: var(--b-text);
   }
 
   /* ---- Slim marketing bar: quieter than an app's chrome -------------------- */
@@ -82,6 +89,114 @@
   .b-hero__title { font-size: clamp(2.5rem, 7vw, 4.75rem); }
   .b-hero__media { margin-block-start: clamp(2.5rem, 5vw, 4rem); }
 
+  /* The tile field a hero stands on.
+
+     A flat page makes a centred headline look like it is floating in milk.
+     This is the quietest possible ground: three checkerboards at different
+     scales, each barely there, masked so the pattern dissolves before it
+     reaches the text. It is drawn entirely from gradients — no image, no
+     element per square — so it costs nothing and re-tints with the theme.
+     --b-tile is the cell; --b-tile-ink is how loud the squares are. */
+  /* The tile field is absolute, so whatever holds it has to be positioned and
+     has to clip. Saying it here means no page has to remember. */
+  .b-has-tiles { position: relative; overflow: hidden; }
+  .b-tile-field {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    pointer-events: none;
+    --b-tile: 5.5rem;
+    /* The field paints its own ground, a shade off the page, and the squares
+       sit *lighter* on it — which is the only way the pattern is visible on a
+       white page and still barely there on a dark one. Two knobs, both
+       translucent, so whatever surface it lands on shows through. */
+    --b-tile-ground: light-dark(rgba(20, 24, 38, 0.045), rgba(255, 255, 255, 0.014));
+    --b-tile-ink: light-dark(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.03));
+    background-color: var(--b-tile-ground);
+    background-image:
+      repeating-conic-gradient(var(--b-tile-ink) 0% 25%, transparent 0% 50%),
+      repeating-conic-gradient(var(--b-tile-ink) 0% 25%, transparent 0% 50%),
+      repeating-conic-gradient(var(--b-tile-ink) 0% 25%, transparent 0% 50%);
+    background-size:
+      var(--b-tile) var(--b-tile),
+      calc(var(--b-tile) * 1.62) calc(var(--b-tile) * 1.62),
+      calc(var(--b-tile) * 2.71) calc(var(--b-tile) * 2.71);
+    background-position: 0 0, calc(var(--b-tile) * 0.5) calc(var(--b-tile) * 0.8), calc(var(--b-tile) * -0.7) calc(var(--b-tile) * 0.3);
+    /* Nothing in the middle, where the words are. */
+    -webkit-mask-image: radial-gradient(120% 85% at 50% 0%, #000 0%, transparent 72%);
+    mask-image: radial-gradient(120% 85% at 50% 0%, #000 0%, transparent 72%);
+  }
+  /* Anything that has to sit on top of it says so once. */
+  .b-tile-field ~ * { position: relative; z-index: 1; }
+
+  /* ---- Announcement: one line of news above a headline --------------------- */
+  /* The pill every product page opens with — a release, a launch, a price
+     change. It is a link, so it is an <a>; the arrow is a text mark, not an
+     icon, and it steps forward on hover the way a link should suggest travel. */
+  .b-announce {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--b-space-2);
+    padding: var(--b-space-1) var(--b-space-3);
+    font-size: var(--b-text-footnote);
+    font-weight: var(--b-weight-medium);
+    color: var(--b-color-accent-text);
+    background: var(--b-color-accent-soft);
+    border: 1px solid color-mix(in srgb, var(--b-color-accent) 22%, transparent);
+    border-radius: var(--b-radius-full);
+    text-decoration: none;
+  }
+  .b-announce:hover { text-decoration: none; background: color-mix(in srgb, var(--b-color-accent) 18%, transparent); }
+  .b-announce .b-icon { width: 1rem; height: 1rem; }
+  .b-announce__go { transition: translate var(--b-duration-fast) var(--b-ease-out); }
+  .b-announce:hover .b-announce__go { translate: 2px 0; }
+
+  /* ---- Rating: borrowed credibility, stated plainly ------------------------ */
+  /* Five marks and who is vouching. The stars are the library's own star at
+     caption size; a star that was not earned carries .is-empty rather than
+     being left out, so the row is always five wide and reads as a score. */
+  .b-rating {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--b-space-2);
+    font-size: var(--b-text-footnote);
+    color: var(--b-text-secondary);
+  }
+  .b-rating__stars { display: inline-flex; gap: 0.125rem; color: var(--b-color-yellow); }
+  .b-rating__stars .b-icon { width: 0.95rem; height: 0.95rem; fill: currentColor; }
+  .b-rating__stars .is-empty { color: var(--b-fill); }
+
+  /* ---- 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
+     rather than pasted. Inline SVG on currentColor is the intended form: it
+     inherits the wall's ink and therefore survives the dark theme. Raster
+     logos get greyed instead, because a PNG cannot follow the text colour. */
+  .b-logo-wall {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: clamp(var(--b-space-6), 5vw, var(--b-space-12));
+    padding-block: var(--b-space-8);
+    color: var(--b-text-secondary);
+  }
+  .b-logo-wall__logo {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--b-space-2);
+    height: var(--b-logo-h, 1.5rem);
+    font-size: var(--b-text-title3);
+    font-weight: var(--b-weight-semibold);
+    letter-spacing: var(--b-tracking-tight);
+    white-space: nowrap;
+    opacity: 0.7;
+    transition: opacity var(--b-duration-fast);
+  }
+  .b-logo-wall__logo:hover { opacity: 1; }
+  .b-logo-wall__logo :is(svg, img) { height: 100%; width: auto; }
+  .b-logo-wall__logo img { filter: grayscale(1); }
+
   /* ---- Figures: a picture is furniture, so it has a shape ------------------ */
   .b-figure { margin: 0; }
   .b-figure__frame {

package/css/tokens.css

@@ -6,7 +6,13 @@
    ========================================================================== */
 
 @layer tokens {
-  :root {
+  /* The tokens are declared for the document and for any element that names a
+     theme. light-dark() resolves against the color-scheme of the element the
+     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] {
     color-scheme: light dark;
 
     /* ------------------------------------------------------------------ *

package/dist/index.cjs

@@ -27,6 +27,8 @@ __export(index_exports, {
   ActionSheet: () => ActionSheet,
   Alert: () => Alert,
   AlertDialog: () => AlertDialog,
+  Announce: () => Announce,
+  AnnounceGo: () => AnnounceGo,
   AppGrid: () => AppGrid,
   AppTile: () => AppTile,
   AreaChart: () => AreaChart,
@@ -187,6 +189,8 @@ __export(index_exports, {
   ListHeader: () => ListHeader,
   ListItem: () => ListItem,
   Log: () => Log,
+  LogoWall: () => LogoWall,
+  LogoWallLogo: () => LogoWallLogo,
   MarketingNav: () => MarketingNav,
   MarketingNavBrand: () => MarketingNavBrand,
   MarketingNavLinks: () => MarketingNavLinks,
@@ -225,6 +229,8 @@ __export(index_exports, {
   Rail: () => Rail,
   RailItem: () => RailItem,
   Range: () => Range,
+  Rating: () => Rating,
+  RatingStars: () => RatingStars,
   Resizable: () => Resizable,
   ResizeHandle: () => ResizeHandle,
   Result: () => Result,
@@ -288,6 +294,7 @@ __export(index_exports, {
   Textarea: () => Textarea,
   ThemeScript: () => ThemeScript,
   Thumb: () => Thumb,
+  TileField: () => TileField,
   Timeline: () => Timeline,
   Tip: () => Tip,
   ToastProvider: () => ToastProvider,
@@ -2287,6 +2294,13 @@ var PromoBand = (0, import_react16.forwardRef)(function PromoBand2({ title, body
     children
   ] });
 });
+var TileField = block("div", "b-tile-field", "TileField");
+var Announce = block("a", "b-announce", "Announce");
+var AnnounceGo = block("span", "b-announce__go", "AnnounceGo");
+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");
 
 // src/system.tsx
 var import_react17 = require("react");
@@ -2918,6 +2932,8 @@ function usePersistedState(key, initial) {
   ActionSheet,
   Alert,
   AlertDialog,
+  Announce,
+  AnnounceGo,
   AppGrid,
   AppTile,
   AreaChart,
@@ -3078,6 +3094,8 @@ function usePersistedState(key, initial) {
   ListHeader,
   ListItem,
   Log,
+  LogoWall,
+  LogoWallLogo,
   MarketingNav,
   MarketingNavBrand,
   MarketingNavLinks,
@@ -3116,6 +3134,8 @@ function usePersistedState(key, initial) {
   Rail,
   RailItem,
   Range,
+  Rating,
+  RatingStars,
   Resizable,
   ResizeHandle,
   Result,
@@ -3179,6 +3199,7 @@ function usePersistedState(key, initial) {
   Textarea,
   ThemeScript,
   Thumb,
+  TileField,
   Timeline,
   Tip,
   ToastProvider,