@maggioli-design-system/styles 17.0.0 → 17.0.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/README.md +90 -85
- package/dist/css/base.css +1 -1
- package/dist/css/colors-hex-brand-rnd.css +2 -2
- package/dist/css/colors-hex-brand.css +2 -2
- package/dist/css/colors-hex-default.css +2 -2
- package/dist/css/colors-hex-label.css +2 -2
- package/dist/css/colors-hex-status.css +2 -2
- package/dist/css/colors-hex-theme.css +2 -2
- package/dist/css/colors-hex-tones.css +2 -2
- package/dist/css/colors-hex.css +2 -2
- package/dist/css/colors-rgb-brand-rnd.css +2 -2
- package/dist/css/colors-rgb-brand.css +2 -2
- package/dist/css/colors-rgb-default.css +2 -2
- package/dist/css/colors-rgb-label.css +2 -2
- package/dist/css/colors-rgb-status.css +2 -2
- package/dist/css/colors-rgb-theme.css +2 -2
- package/dist/css/colors-rgb-tones.css +2 -2
- package/dist/css/colors-rgb.css +2 -2
- package/dist/css/reset.css +3 -3
- package/dist/css/tailwind-theme-color.css +2 -2
- package/dist/css/tailwind-theme-typography.css +2 -2
- package/dist/css/theme.css +3 -3
- package/dist/css/transitions.css +2 -2
- package/dist/css/typography.css +2 -2
- package/dist/css/utility-typography.css +1 -1
- package/dist/tailwind/theme.css +1 -1
- package/package.json +8 -8
package/README.md
CHANGED
|
@@ -28,7 +28,7 @@ npm i @maggioli-design-system/styles
|
|
|
28
28
|
|
|
29
29
|
### Integration
|
|
30
30
|
|
|
31
|
-
The
|
|
31
|
+
The cascade layers are ordered for Tailwind: reset, vendor, theme, base, components, utilities, and your overrides last. Import the files in this order in your global CSS entry point:
|
|
32
32
|
|
|
33
33
|
```css
|
|
34
34
|
@layer reset, vendor, theme, base, components, utilities, overrides;
|
|
@@ -43,55 +43,76 @@ The layer order is thinked to be used with tailwindcss, so the first layer is th
|
|
|
43
43
|
@import '@fontsource/roboto/500.css' layer(vendor);
|
|
44
44
|
@import '@fontsource/roboto/700.css' layer(vendor);
|
|
45
45
|
@import '@fontsource/roboto/900.css' layer(vendor);
|
|
46
|
-
@import './iconsauce.css' layer(vendor);
|
|
47
46
|
@import '@maggioli-design-system/styles/dist/css/reset.css' layer(reset);
|
|
48
47
|
@import '@maggioli-design-system/styles/dist/css/globals.css' layer(theme);
|
|
49
48
|
@import '@maggioli-design-system/styles/dist/css/colors-rgb.css' layer(theme);
|
|
49
|
+
@import '@maggioli-design-system/styles/dist/css/typography.css' layer(theme);
|
|
50
|
+
@import '@maggioli-design-system/styles/dist/css/semantic.css' layer(theme);
|
|
51
|
+
@import '@maggioli-design-system/styles/dist/css/themes.css' layer(theme);
|
|
50
52
|
@import '@maggioli-design-system/styles/dist/css/hydrated.css' layer(base);
|
|
53
|
+
@import '@maggioli-design-system/styles/dist/css/transitions.css' layer(base);
|
|
51
54
|
@import '@maggioli-design-system/styles/dist/css/animations.css' layer(base);
|
|
52
55
|
@import '@maggioli-design-system/styles/dist/css/base.css' layer(base);
|
|
56
|
+
|
|
57
|
+
/* your Tailwind entry point, if any (see Tailwind below) */
|
|
53
58
|
@import './tailwind.css';
|
|
54
59
|
|
|
55
60
|
@layer overrides {
|
|
56
|
-
|
|
57
|
-
@apply
|
|
58
|
-
bg-tone-neutral-seed
|
|
59
|
-
text-tone-neutral-03
|
|
60
|
-
transition-colors
|
|
61
|
-
duration-300
|
|
62
|
-
ease-in-out;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
mds-button {
|
|
66
|
-
border-radius: var(--radius-2xl);
|
|
67
|
-
}
|
|
61
|
+
/* your own overrides of the --magma-* globals and --mds-* component tokens */
|
|
68
62
|
}
|
|
69
63
|
```
|
|
70
64
|
|
|
71
|
-
|
|
65
|
+
`base.css` already paints the `body` with the semantic roles (`--magma-surface-default`
|
|
66
|
+
and `--magma-text-default`), which is why `semantic.css` is required.
|
|
72
67
|
|
|
73
|
-
|
|
68
|
+
### Semantic colors
|
|
69
|
+
|
|
70
|
+
Color your UI with the semantic roles, not with raw palette steps: a role follows the
|
|
71
|
+
mode, the named theme (`data-theme-name`) and the high-contrast preference, a palette
|
|
72
|
+
step only follows the mode.
|
|
73
|
+
|
|
74
|
+
```html
|
|
75
|
+
<section class="bg-surface-raised text-fg-default border border-border-muted">
|
|
76
|
+
<p class="text-fg-muted">Secondary text</p>
|
|
77
|
+
</section>
|
|
78
|
+
```
|
|
74
79
|
|
|
80
|
+
```css
|
|
81
|
+
.panel {
|
|
82
|
+
background: rgb(var(--magma-surface-raised));
|
|
83
|
+
color: rgb(var(--magma-text-default));
|
|
84
|
+
}
|
|
75
85
|
```
|
|
76
86
|
|
|
87
|
+
The values come from `dist/css/semantic.css`, the Tailwind utilities from
|
|
88
|
+
`dist/tailwind/theme.css`. The roles, their pairing rules and the Magma 1 -> 2 map are
|
|
89
|
+
in the color guide shipped with the components package
|
|
90
|
+
(`@maggioli-design-system/magma/agents/color.md`).
|
|
91
|
+
|
|
92
|
+
### Palette
|
|
93
|
+
|
|
77
94
|
#### Colors with tailwind or web components
|
|
78
95
|
|
|
79
|
-
If you use tailwind or web components, you need
|
|
96
|
+
If you use tailwind or web components, you need the **rgb format** of the palette, the one
|
|
97
|
+
imported above:
|
|
80
98
|
|
|
81
99
|
```ts
|
|
82
|
-
import '@maggioli-design-system/styles/dist/css/colors-rgb
|
|
83
|
-
import '@maggioli-design-system/styles/dist/css/colors-rgb-status.css';
|
|
84
|
-
import '@maggioli-design-system/styles/dist/css/colors-rgb-label.css';
|
|
85
|
-
import '@maggioli-design-system/styles/dist/css/colors-rgb-brand.css';
|
|
100
|
+
import '@maggioli-design-system/styles/dist/css/colors-rgb.css';
|
|
86
101
|
```
|
|
87
102
|
|
|
88
|
-
|
|
103
|
+
The web components, the Tailwind utilities and the semantic layer read the palette as
|
|
104
|
+
custom properties in rgb channel format (`rr gg bb`). `colors-rgb.css` holds every group;
|
|
105
|
+
the per-group files (`colors-rgb-{tones,status,label,brand,default,theme}.css`) exist for
|
|
106
|
+
a custom setup, and the semantic roles need at least `default` (the `--variant-*` accents)
|
|
107
|
+
and `theme` (the `--surface-*`, `--border-*` and `--text-*` families) besides `tones` and
|
|
108
|
+
`status`.
|
|
89
109
|
|
|
90
|
-
|
|
110
|
+
A raw palette step is right only for a colour that encodes data rather than an
|
|
111
|
+
interface role (a `label-*` category, a `brand-*` identity). Outside tailwind:
|
|
91
112
|
|
|
92
113
|
```css
|
|
93
114
|
.selector {
|
|
94
|
-
color: rgb(var(--
|
|
115
|
+
color: rgb(var(--label-sky-04));
|
|
95
116
|
}
|
|
96
117
|
```
|
|
97
118
|
|
|
@@ -114,48 +135,52 @@ Then you can use them like this:
|
|
|
114
135
|
}
|
|
115
136
|
```
|
|
116
137
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
### Dark mode format
|
|
120
|
-
|
|
121
|
-
our color palette already supports dark mode, either according to your computer settings, or with manual support:
|
|
122
|
-
|
|
123
|
-
#### Manual mode
|
|
124
|
-
|
|
125
|
-
Just add the `dark-mode` class to the `html` tag:
|
|
138
|
+
The hex files are for plain CSS only: they cannot take an alpha, and neither the
|
|
139
|
+
components nor the semantic roles can read them.
|
|
126
140
|
|
|
127
|
-
|
|
128
|
-
<html class="dark-mode">
|
|
129
|
-
```
|
|
141
|
+
---
|
|
130
142
|
|
|
131
|
-
|
|
143
|
+
### Dark mode
|
|
132
144
|
|
|
133
|
-
|
|
145
|
+
The palette and the semantic roles already flip between light and dark. Pick the mode with a
|
|
146
|
+
class on the `html` tag:
|
|
134
147
|
|
|
135
148
|
```html
|
|
136
|
-
<html class="
|
|
149
|
+
<html class="pref-mode-system"><!-- follows the OS --></html>
|
|
150
|
+
<html class="pref-mode-light"><!-- always light --></html>
|
|
151
|
+
<html class="pref-mode-dark"><!-- always dark --></html>
|
|
137
152
|
```
|
|
138
153
|
|
|
139
|
-
|
|
154
|
+
To let the user choose, use the `mds-pref-mode` component of
|
|
155
|
+
`@maggioli-design-system/magma`: it writes the class and remembers the choice. Tailwind's
|
|
156
|
+
`dark:` variant follows only the OS (`prefers-color-scheme`), not these classes; the
|
|
157
|
+
semantic roles need no `dark:`.
|
|
140
158
|
|
|
141
159
|
---
|
|
142
160
|
|
|
143
|
-
###
|
|
161
|
+
### Tailwind
|
|
162
|
+
|
|
163
|
+
With Tailwind 4, import Magma's theme (palette, typography tokens, semantic colors), its
|
|
164
|
+
typography utilities and its helpers in your Tailwind entry point, after Tailwind's own
|
|
165
|
+
theme and utilities (Magma ships its own reset, so Tailwind's preflight is left out):
|
|
144
166
|
|
|
145
|
-
|
|
146
|
-
|
|
167
|
+
```css
|
|
168
|
+
/* tailwind.css */
|
|
169
|
+
@import 'tailwindcss/theme.css' layer(theme);
|
|
170
|
+
@import 'tailwindcss/utilities.css' layer(utilities);
|
|
171
|
+
@import '@maggioli-design-system/styles/dist/tailwind/theme.css';
|
|
172
|
+
@import '@maggioli-design-system/styles/dist/tailwind/typography.css';
|
|
173
|
+
@import '@maggioli-design-system/styles/dist/tailwind/utilities.css';
|
|
174
|
+
```
|
|
147
175
|
|
|
148
|
-
|
|
176
|
+
With Tailwind 3, extend the [JS preset][tailwindcss-config] (the package `main`) and use
|
|
177
|
+
the layers in `dist/tailwind3/`. The preset does not work with Tailwind 4: its colors are
|
|
178
|
+
Tailwind 3 color functions.
|
|
149
179
|
|
|
150
180
|
```js
|
|
151
181
|
module.exports = {
|
|
152
|
-
content: [
|
|
153
|
-
|
|
154
|
-
],
|
|
155
|
-
important: false,
|
|
156
|
-
presets: [
|
|
157
|
-
require('@maggioli-design-system/styles'),
|
|
158
|
-
],
|
|
182
|
+
content: ['./src/**/*.{ts,tsx}'],
|
|
183
|
+
presets: [require('@maggioli-design-system/styles')],
|
|
159
184
|
}
|
|
160
185
|
```
|
|
161
186
|
|
|
@@ -163,17 +188,17 @@ module.exports = {
|
|
|
163
188
|
|
|
164
189
|
### Fonts
|
|
165
190
|
|
|
166
|
-
|
|
191
|
+
Magma does not bundle webfonts: the type scale uses **Roboto** (titles and actions: 500,
|
|
192
|
+
700, 900), **Karla** (UI text: 400, 700), **Merriweather** (reading text: 300, 400, plus 700
|
|
193
|
+
for bold) and **Roboto Mono** (code: 400). Load them with `@fontsource`; the weights are
|
|
194
|
+
the ones of the scale.
|
|
167
195
|
|
|
168
196
|
#### TypeScript
|
|
169
197
|
|
|
170
|
-
Importing fonts in TypeScript:
|
|
171
|
-
|
|
172
|
-
```ts
|
|
173
|
-
|
|
174
198
|
```ts
|
|
175
199
|
import '@fontsource/karla/400.css'
|
|
176
200
|
import '@fontsource/karla/700.css'
|
|
201
|
+
import '@fontsource/merriweather/300.css'
|
|
177
202
|
import '@fontsource/merriweather/400.css'
|
|
178
203
|
import '@fontsource/merriweather/700.css'
|
|
179
204
|
import '@fontsource/roboto-mono/400.css'
|
|
@@ -184,18 +209,7 @@ import '@fontsource/roboto/900.css'
|
|
|
184
209
|
|
|
185
210
|
#### CSS
|
|
186
211
|
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
```css
|
|
190
|
-
@import '@fontsource/karla/400.css';
|
|
191
|
-
@import '@fontsource/karla/700.css';
|
|
192
|
-
@import '@fontsource/merriweather/400.css';
|
|
193
|
-
@import '@fontsource/merriweather/700.css';
|
|
194
|
-
@import '@fontsource/roboto-mono/400.css';
|
|
195
|
-
@import '@fontsource/roboto/500.css';
|
|
196
|
-
@import '@fontsource/roboto/700.css';
|
|
197
|
-
@import '@fontsource/roboto/900.css';
|
|
198
|
-
```
|
|
212
|
+
In CSS use the `layer(vendor)` imports of the Integration block above.
|
|
199
213
|
|
|
200
214
|
Fontsource supports [variable fonts][fontsource-var-fonts].
|
|
201
215
|
|
|
@@ -252,25 +266,16 @@ never match, which makes an accidental import a no-op.
|
|
|
252
266
|
|
|
253
267
|
### Dist folder
|
|
254
268
|
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
|
258
|
-
|
|
|
259
|
-
| `css` | both | `globals.css` |
|
|
260
|
-
| `css` | both | `reset.css` |
|
|
269
|
+
| Folder | For | Files |
|
|
270
|
+
| --- | --- | --- |
|
|
271
|
+
| `css` | everyone | `layer.css` (the cascade layer order), `reset.css`, `globals.css` (the `--magma-*` globals and the corner axis), `colors-rgb.css` (+ one `colors-rgb-<group>.css` per group), `typography.css` (the non-color tokens: fonts, type sizes, spacing, radius, shadows), `semantic.css` (the semantic color roles), `themes.css` (the named themes), `hydrated.css`, `transitions.css`, `animations.css`, `base.css` |
|
|
272
|
+
| `css` | plain css | `colors-hex.css` (+ per group), `utility-typography.css` (the `typography-*` classes), `theme.css` (the `--depth` axis) |
|
|
261
273
|
| `css` | editors only, never import | `tokens.editor.css` |
|
|
262
|
-
| `css` |
|
|
263
|
-
| `
|
|
264
|
-
| `
|
|
265
|
-
| `css` | plain css | `typography.css` |
|
|
266
|
-
| `css` | tailwind or web components | `colors-rgb-*.css` |
|
|
267
|
-
| `tailwind` | tailwind | `base.css` |
|
|
268
|
-
| `tailwind` | tailwind components | `components.css` |
|
|
274
|
+
| `css` | tailwind (copied from design-tokens) | `tailwind-theme-color.css`, `tailwind-theme-typography.css` |
|
|
275
|
+
| `tailwind` | Tailwind 4 | `theme.css` (palette, typography tokens, semantic colors; imports `semantic.css`), `typography.css` (the `text-title-*`, `text-info-*`, ... utilities), `utilities.css` (`focus-bounce`, `focus-zoom`, ...), `base.css`, `reset.css`, `semantic.css` |
|
|
276
|
+
| `tailwind3` | Tailwind 3 | `base.css`, `components.css`, `reset.css`, `typography.css` |
|
|
269
277
|
|
|
270
278
|
[mds]: https://magma.maggiolicloud.it/
|
|
271
279
|
[css-variable-autocomplete]: https://marketplace.visualstudio.com/items?itemName=vunguyentuan.vscode-css-variables
|
|
272
280
|
[fontsource-var-fonts]: https://fontsource.org/docs/variable-fonts
|
|
273
|
-
[tailwindcss-config]: https://
|
|
274
|
-
[tailwindcss-doc]: https://tailwindcss.com/docs/installation
|
|
275
|
-
[tailwindcss-dark]: https://tailwindcss.com/docs/dark-mode#supporting-system-preference-and-manual-selection
|
|
276
|
-
[next-themes]: https://github.com/pacocoursey/next-themes#use
|
|
281
|
+
[tailwindcss-config]: https://github.com/magma-design-system/magma/blob/main/projects/styles/tailwind.config.js
|
package/dist/css/base.css
CHANGED
package/dist/css/colors-hex.css
CHANGED
package/dist/css/colors-rgb.css
CHANGED
package/dist/css/reset.css
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
/*! tailwindcss v4.3.
|
|
1
|
+
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
|
|
2
2
|
@layer properties;
|
|
3
3
|
@layer reset {
|
|
4
|
-
:
|
|
5
|
-
|
|
4
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
5
|
+
:root {
|
|
6
6
|
interpolate-size: allow-keywords;
|
|
7
7
|
}
|
|
8
8
|
}
|
package/dist/css/theme.css
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/*
|
|
2
2
|
Theming axes (issue #574, B2) - layered on top of the semantic layer
|
|
3
|
-
(css/semantic.css). Three INDEPENDENT axes, all driven by
|
|
4
|
-
on <html> (cross-browser; no @container style(), which is below the
|
|
3
|
+
(build/css/semantic.css, generated). Three INDEPENDENT axes, all driven by
|
|
4
|
+
attributes/classes on <html> (cross-browser; no @container style(), which is below the
|
|
5
5
|
browserslist floor and crashes WebKit with shadow DOM):
|
|
6
6
|
|
|
7
7
|
1. mode (light|dark|system) -> the existing global --tone-* flip; the
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
3. --depth (numeric 0..1) -> shadow/elevation intensity, consumed as a
|
|
13
13
|
scalar in calc(). NOT a true|false style query.
|
|
14
14
|
|
|
15
|
-
Supersedes
|
|
15
|
+
Supersedes the former draft/theme.css (removed).
|
|
16
16
|
*/
|
|
17
17
|
|
|
18
18
|
/* --------------------------------------------------------------------------
|
package/dist/css/transitions.css
CHANGED
package/dist/css/typography.css
CHANGED
package/dist/tailwind/theme.css
CHANGED
|
@@ -4,5 +4,5 @@
|
|
|
4
4
|
@import '@maggioli-design-system/design-tokens/dist/css/tailwind-theme-color.css' layer(theme);
|
|
5
5
|
@import '@maggioli-design-system/design-tokens/dist/css/tailwind-theme-typography.css';
|
|
6
6
|
|
|
7
|
-
/* semantic color layer bridge (--
|
|
7
|
+
/* semantic color layer bridge (--magma-* -> Tailwind --color-*) */
|
|
8
8
|
@import './semantic.css';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@maggioli-design-system/styles",
|
|
3
|
-
"version": "17.0.
|
|
3
|
+
"version": "17.0.1",
|
|
4
4
|
"description": "This module contains SCSS and CSS styles used by Maggioli Design System, it also makes available a Tailwind config based on Maggioli design tokens.",
|
|
5
5
|
"main": "./tailwind.config.js",
|
|
6
6
|
"scripts": {
|
|
@@ -59,16 +59,16 @@
|
|
|
59
59
|
"@fontsource/merriweather": "5.1.0",
|
|
60
60
|
"@fontsource/roboto": "5.1.0",
|
|
61
61
|
"@fontsource/roboto-mono": "5.1.0",
|
|
62
|
-
"@maggioli-design-system/design-tokens": "15.0.
|
|
62
|
+
"@maggioli-design-system/design-tokens": "^15.0.1",
|
|
63
63
|
"normalize.css": "8.0.1"
|
|
64
64
|
},
|
|
65
65
|
"devDependencies": {
|
|
66
|
-
"@tailwindcss/postcss": "4.3.
|
|
67
|
-
"autoprefixer": "10.
|
|
68
|
-
"handlebars": "4.7.
|
|
66
|
+
"@tailwindcss/postcss": "4.3.3",
|
|
67
|
+
"autoprefixer": "10.6.1",
|
|
68
|
+
"handlebars": "4.7.10",
|
|
69
69
|
"postcss-cli": "11.0.1",
|
|
70
|
-
"postcss": "8.5.
|
|
71
|
-
"postcss-import": "16.
|
|
72
|
-
"tailwindcss": "4.3.
|
|
70
|
+
"postcss": "8.5.29",
|
|
71
|
+
"postcss-import": "16.2.0",
|
|
72
|
+
"tailwindcss": "4.3.3"
|
|
73
73
|
}
|
|
74
74
|
}
|