barua-ui 0.9.0 → 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); }
 
@@ -263,7 +267,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.1",
+  "description": "Barua UI — Apple-DNA design system (glass materials, Barua blue) as React components over pure CSS.",
   "license": "MIT",
   "type": "module",
   "sideEffects": [