barua-ui 0.7.0 → 0.8.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/components/marketing.css +22 -0
- package/css/tokens.css +7 -1
- package/package.json +1 -1
|
@@ -13,6 +13,13 @@
|
|
|
13
13
|
--b-chapter-gap: clamp(4.5rem, 9vw, 8.5rem);
|
|
14
14
|
display: flex;
|
|
15
15
|
flex-direction: column;
|
|
16
|
+
/* The wrapper paints the page. A marketing page is often a different
|
|
17
|
+
scheme from the product around it — light pages for a dark tool — and
|
|
18
|
+
with data-theme on this element the tokens resolve here, so the page
|
|
19
|
+
takes its own background rather than the application's. */
|
|
20
|
+
min-height: 100dvh;
|
|
21
|
+
background: var(--b-bg);
|
|
22
|
+
color: var(--b-text);
|
|
16
23
|
}
|
|
17
24
|
|
|
18
25
|
/* ---- Slim marketing bar: quieter than an app's chrome -------------------- */
|
|
@@ -206,6 +213,21 @@
|
|
|
206
213
|
}
|
|
207
214
|
.b-figure--bleed { margin-inline: calc(var(--b-space-6) * -1); }
|
|
208
215
|
.b-figure--bleed .b-figure__frame { border-radius: 0; }
|
|
216
|
+
/* A picture that dissolves into the page instead of ending.
|
|
217
|
+
|
|
218
|
+
The product shot under a hero is not a photograph with a bottom edge; it
|
|
219
|
+
is a window into the thing, and a hard edge with a shadow under it asks
|
|
220
|
+
the reader to look at the frame rather than through it. The mask fades the
|
|
221
|
+
last stretch to nothing, so the screen appears to continue past the fold.
|
|
222
|
+
--b-fade-from is where the fade begins. The shadow and the bottom corners
|
|
223
|
+
go with it: both would draw the cut the mask is there to hide. */
|
|
224
|
+
.b-figure--fade .b-figure__frame {
|
|
225
|
+
-webkit-mask-image: linear-gradient(to bottom, #000 var(--b-fade-from, 55%), transparent 100%);
|
|
226
|
+
mask-image: linear-gradient(to bottom, #000 var(--b-fade-from, 55%), transparent 100%);
|
|
227
|
+
border-end-start-radius: 0;
|
|
228
|
+
border-end-end-radius: 0;
|
|
229
|
+
box-shadow: none;
|
|
230
|
+
}
|
|
209
231
|
|
|
210
232
|
/* ---- Alternating rows: picture beside prose ------------------------------ */
|
|
211
233
|
.b-feature-row {
|
package/css/tokens.css
CHANGED
|
@@ -6,7 +6,13 @@
|
|
|
6
6
|
========================================================================== */
|
|
7
7
|
|
|
8
8
|
@layer tokens {
|
|
9
|
-
|
|
9
|
+
/* The tokens are declared for the document and for any element that names a
|
|
10
|
+
theme. light-dark() resolves against the color-scheme of the element the
|
|
11
|
+
declaration sits on, so re-declaring them here is what lets a subtree be
|
|
12
|
+
light inside a dark page — a marketing page in a dark product, a preview
|
|
13
|
+
pane, a customer's site. Without it, data-theme on anything but the root
|
|
14
|
+
only changed color-scheme and the tokens stayed as the root resolved them. */
|
|
15
|
+
:root, [data-theme] {
|
|
10
16
|
color-scheme: light dark;
|
|
11
17
|
|
|
12
18
|
/* ------------------------------------------------------------------ *
|