@behivetech/cms.base-styles 0.3.1 → 0.3.3
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/README.md +23 -0
- package/package.json +2 -1
package/README.md
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
# Base styles
|
|
2
|
+
|
|
3
|
+
The Material Design 3 token sheet every `@behivetech` component reads — `--md-sys-color-*`, typescale and shape custom properties for the light and dark schemes — plus the breakpoint mixins, generated from one source colour.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
Import the sheet once, before any component stylesheet, so the custom properties exist on `:root`:
|
|
8
|
+
|
|
9
|
+
```scss
|
|
10
|
+
@use "@behivetech/cms.base-styles/tokens.scss";
|
|
11
|
+
@use "@behivetech/cms.base-styles/breakpoints.scss" as bp;
|
|
12
|
+
|
|
13
|
+
.Hero {
|
|
14
|
+
color: var(--md-sys-color-on-surface);
|
|
15
|
+
border-radius: var(--md-sys-shape-corner-medium);
|
|
16
|
+
|
|
17
|
+
@include bp.md {
|
|
18
|
+
font-size: var(--md-sys-typescale-headline-large-size);
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
Override a token after the import to theme a site; components pick up whichever value the page sets. The JavaScript entry exports `breakpoints` and `minWidth()` for the same breakpoints in code.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@behivetech/cms.base-styles",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.3",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"private": false,
|
|
6
6
|
"exports": {
|
|
@@ -36,6 +36,7 @@
|
|
|
36
36
|
"access": "public",
|
|
37
37
|
"provenance": true
|
|
38
38
|
},
|
|
39
|
+
"description": "The Material Design 3 token sheet every `@behivetech` component reads — `--md-sys-color-*`, typescale and shape custom properties for the light and dark schemes — plus the breakpoint mixins, generated from one source colour.",
|
|
39
40
|
"scripts": {
|
|
40
41
|
"build": "tsup",
|
|
41
42
|
"dev": "tsup --watch",
|