barua-ui 0.9.0 → 0.9.2

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); }
 
@@ -105,7 +109,10 @@
     inset: 0;
     z-index: 0;
     pointer-events: none;
-    --b-tile: 5.5rem;
+    /* The cell scales with the viewport. Held at a fixed size it kept its
+       pixel grain while the hero got narrow, so on a phone the whisper of a
+       pattern became grey blocks sitting behind the headline. */
+    --b-tile: clamp(2.25rem, 5.5vw, 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
@@ -126,6 +133,14 @@
     -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%);
   }
+  /* A hero on a phone is a different shape: tall and narrow, with the words
+     starting much higher up. The field has to be done before they get there. */
+  @media (max-width: 40rem) {
+    .b-tile-field {
+      -webkit-mask-image: radial-gradient(150% 52% at 50% 0%, #000 0%, transparent 70%);
+      mask-image: radial-gradient(150% 52% at 50% 0%, #000 0%, transparent 70%);
+    }
+  }
   /* Anything that has to sit on top of it says so once. */
   .b-tile-field ~ * { position: relative; z-index: 1; }
 
@@ -263,7 +278,17 @@
     overflow: hidden;
     background: color-mix(in srgb, var(--b-color-accent) 14%, var(--b-fill-tertiary));
   }
-  .b-resource-card__poster :is(img, svg) { width: 100%; height: 100%; object-fit: cover; }
+  /* 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);

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "barua-ui",
-  "version": "0.9.0",
-  "description": "Barua UI \u2014 Apple-DNA design system (glass materials, Barua blue) as React components over pure CSS.",
+  "version": "0.9.2",
+  "description": "Barua UI — Apple-DNA design system (glass materials, Barua blue) as React components over pure CSS.",
   "license": "MIT",
   "type": "module",
   "sideEffects": [