@lmvz-ds/design-tokens 0.22.1 → 0.24.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/CHANGELOG.md +8 -0
- package/README.md +59 -0
- package/dist/css/custom-media.css +11 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
package/README.md
CHANGED
|
@@ -51,3 +51,62 @@ which will create CSS custom properties in the dist folder.
|
|
|
51
51
|
### Code Versioning
|
|
52
52
|
|
|
53
53
|
Currently the changes have to be created and committed manually. As of October 2025, CI/CD-based sync is not possible due to our GitLab being hosted behind a VPN.
|
|
54
|
+
|
|
55
|
+
## Responsive Breakpoint Custom Media
|
|
56
|
+
|
|
57
|
+
This package generates a `dist/css/custom-media.css` artifact containing CSS custom media queries sourced from Supernova `naming.spec-breakpoint-*` tokens. Components and applications consume these aliases via a PostCSS plugin chain during their CSS build.
|
|
58
|
+
|
|
59
|
+
The `@custom-media` artifact is a standard CSS custom media rule file that makes breakpoint values defined in Supernova available to component CSS. The file is generated automatically during the design-tokens build instead of manually maintained.
|
|
60
|
+
|
|
61
|
+
### How to import as a consumer
|
|
62
|
+
|
|
63
|
+
If your build pipeline consumes custom media queries, import the artifact:
|
|
64
|
+
|
|
65
|
+
```javascript
|
|
66
|
+
import '@lmvz-ds/design-tokens/css/custom-media.css';
|
|
67
|
+
|
|
68
|
+
// Or via CSS @import (less common in modern bundlers)
|
|
69
|
+
// @import '@lmvz-ds/design-tokens/css/custom-media';
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
### How to use in component CSS
|
|
73
|
+
|
|
74
|
+
Component CSS uses breakpoint aliases in media queries via a PostCSS plugin chain:
|
|
75
|
+
|
|
76
|
+
```css
|
|
77
|
+
@media (--lmvz-bp-small) {
|
|
78
|
+
.my-component {
|
|
79
|
+
/* styles for small breakpoint and above */
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
The PostCSS build resolves this to the concrete pixel value:
|
|
85
|
+
|
|
86
|
+
```css
|
|
87
|
+
@media (min-width: 768px) {
|
|
88
|
+
.my-component {
|
|
89
|
+
/* styles for small breakpoint and above */
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
See `packages/components/stencil.config.base.ts` for the reference PostCSS plugin chain configuration. The key plugins are:
|
|
95
|
+
|
|
96
|
+
1. `postcss-import` — inlines `@import` statements so all CSS is available to subsequent plugins.
|
|
97
|
+
2. `@csstools/postcss-global-data` — makes `@custom-media` declarations globally available without emitting them to output.
|
|
98
|
+
3. `postcss-custom-media` — resolves `@media (--lmvz-bp-*)` aliases to concrete media queries.
|
|
99
|
+
|
|
100
|
+
Plugin order is load-bearing: reversing or skipping any step causes aliases to remain unresolved.
|
|
101
|
+
|
|
102
|
+
### Naming convention
|
|
103
|
+
|
|
104
|
+
All breakpoint aliases follow the pattern `--lmvz-bp-<size>`, where `<size>` is the trailing segment of the `naming.spec-breakpoint-*` token name (e.g., `spec-breakpoint-small` → `--lmvz-bp-small`).
|
|
105
|
+
|
|
106
|
+
### Sentinel value handling
|
|
107
|
+
|
|
108
|
+
Supernova currently defines `naming.spec-breakpoint-largest` as `"TV"` (a non-numeric placeholder for future expansion). The design-tokens build intentionally skips this value with a `console.warn` message. When Supernova provides a real pixel value, the alias appears automatically on the next build without code changes.
|
|
109
|
+
|
|
110
|
+
### How to extend with new breakpoints
|
|
111
|
+
|
|
112
|
+
Add a new token to Supernova matching the naming pattern `naming.spec-breakpoint-<size>` with a numeric pixel value. On the next design-tokens build, a new `--lmvz-bp-<size>` alias is generated. No code changes are needed.
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Generated by @lmvz-ds/design-tokens — do not edit.
|
|
3
|
+
* Source: tokens.json `naming.spec-breakpoint-*`
|
|
4
|
+
*
|
|
5
|
+
* Skipped tokens:
|
|
6
|
+
* --lmvz-bp-largest (value "TV" is non-numeric)
|
|
7
|
+
*/
|
|
8
|
+
@custom-media --lmvz-bp-large (min-width: 1920px);
|
|
9
|
+
@custom-media --lmvz-bp-medium (min-width: 1440px);
|
|
10
|
+
@custom-media --lmvz-bp-small (min-width: 768px);
|
|
11
|
+
@custom-media --lmvz-bp-smallest (min-width: 402px);
|