barua-ui 0.7.0 → 0.8.0
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 +7 -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 -------------------- */
|
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
|
/* ------------------------------------------------------------------ *
|