@maggioli-design-system/styles 17.1.0 → 17.2.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 +121 -0
- package/README.md +39 -2
- package/dist/css/base.css +0 -6
- 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/globals.css +40 -0
- package/dist/css/hydrated.css +130 -0
- package/dist/css/tailwind-theme-color.css +2 -2
- package/dist/css/tailwind-theme-typography.css +2 -2
- package/dist/css/tokens.editor.css +114 -113
- package/dist/css/transitions.css +2 -2
- package/dist/css/typography.css +2 -2
- package/dist/dtcg/globals.tokens.json +10 -0
- package/dist/tailwind/base.css +3 -12
- package/dist/tailwind/consumption.json +118 -0
- package/dist/tailwind/semantic.css +111 -111
- package/package.json +4 -3
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
Every release of `@maggioli-design-system/styles`, newest first. Each section is the body of the GitHub
|
|
4
|
+
release with the same tag, written by git-cliff from the conventional commits of the
|
|
5
|
+
package.
|
|
6
|
+
|
|
7
|
+
## [styles@17.2.0] - 2026-10-15
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
- *(styles)* Keep the box of the hydrated components against tailwind's preflight
|
|
12
|
+
- *(styles)* Give every role of the semantic tailwind bridge its light default as fallback
|
|
13
|
+
|
|
14
|
+
### Build
|
|
15
|
+
|
|
16
|
+
- *(design-tokens,identity,styles,svg-icons,icons,magma)* Ship CHANGELOG.md in every package
|
|
17
|
+
|
|
18
|
+
### Documentation
|
|
19
|
+
|
|
20
|
+
- *(styles)* Add the tailwind half of editor autocomplete to the readme
|
|
21
|
+
|
|
22
|
+
### Features
|
|
23
|
+
|
|
24
|
+
- *(styles)* Carry the role descriptions into consumption.json and the editor sheet
|
|
25
|
+
- *(styles)* Fall back to the round scale where corner-shape cannot be drawn
|
|
26
|
+
|
|
27
|
+
### Refactor
|
|
28
|
+
|
|
29
|
+
- *(styles)* Move the token resolver of properties.ts into css-resolve.ts
|
|
30
|
+
|
|
31
|
+
## [styles@17.1.0] - 2026-10-14
|
|
32
|
+
|
|
33
|
+
### Bug Fixes
|
|
34
|
+
|
|
35
|
+
- *(styles)* List the corner radius steps in tokens.editor.css
|
|
36
|
+
|
|
37
|
+
### Documentation
|
|
38
|
+
|
|
39
|
+
- *(styles)* Say that the semantic layer is expanded by semantic.model.ts
|
|
40
|
+
- *(styles)* Document the globals DTCG and the consumption map
|
|
41
|
+
|
|
42
|
+
### Features
|
|
43
|
+
|
|
44
|
+
- *(styles)* Publish the globals as DTCG 2025.10 JSON
|
|
45
|
+
- *(styles)* Export the Tailwind consumption map as JSON
|
|
46
|
+
|
|
47
|
+
### Refactor
|
|
48
|
+
|
|
49
|
+
- *(design-tokens,styles)* Build the semantic layer as data in design-tokens
|
|
50
|
+
|
|
51
|
+
## [styles@17.0.1] - 2026-10-10
|
|
52
|
+
|
|
53
|
+
### Bug Fixes
|
|
54
|
+
|
|
55
|
+
- *(styles,magma)* Require internal dependencies as caret ranges
|
|
56
|
+
|
|
57
|
+
### Documentation
|
|
58
|
+
|
|
59
|
+
- *(styles)* Point the semantic migration at codemod category L
|
|
60
|
+
- *(magma,styles,design-tokens)* Rewrite the color docs on the semantic layer
|
|
61
|
+
- *(magma,styles,design-tokens)* Align the styles and design-tokens docs with the build
|
|
62
|
+
|
|
63
|
+
## [styles@17.0.0] - 2026-09-30
|
|
64
|
+
|
|
65
|
+
### Bug Fixes
|
|
66
|
+
|
|
67
|
+
- *(stencil,styles)* Close the escape hatch of #624, and repair the registration snapshots
|
|
68
|
+
- *(styles)* Let the corner shape token inherit, and admit functional shapes
|
|
69
|
+
- *(styles)* Put the page on the semantic surface, and give a link a colour that exists
|
|
70
|
+
- *(styles)* Let the global tokens inherit
|
|
71
|
+
- *(styles)* Let color-scheme follow the palette in every mode
|
|
72
|
+
- *(styles)* Retint the inverse surface with the named theme
|
|
73
|
+
|
|
74
|
+
### Build
|
|
75
|
+
|
|
76
|
+
- *(styles)* Fix dead Nx targetDefaults block
|
|
77
|
+
|
|
78
|
+
### Changes
|
|
79
|
+
|
|
80
|
+
- *(styles)* Space the comments the way stylelint wants them
|
|
81
|
+
|
|
82
|
+
### Documentation
|
|
83
|
+
|
|
84
|
+
- *(styles)* Add semantic color system SPEC (S0)
|
|
85
|
+
- *(styles)* Themes derive from any surface-opted family (spec 8)
|
|
86
|
+
- *(styles,magma)* Document the corner axis, and stop recommending the hatch
|
|
87
|
+
- *(styles)* The contrast layer promotes the page surface (spec 9.3)
|
|
88
|
+
- *(styles,magma)* Update the compatibility table for magma 2 stable
|
|
89
|
+
|
|
90
|
+
### Features
|
|
91
|
+
|
|
92
|
+
- *(styles)* Semantic color layer (--mds-*) + Tailwind 4 bridge (#573)
|
|
93
|
+
- *(styles)* Theming axes - data-theme-name, tint indirection, --depth (#574)
|
|
94
|
+
- *(styles)* Generate the --magma-* semantic layer from a config (#328)
|
|
95
|
+
- *(styles)* Retint the foreground with the theme via --magma-tint-text-*
|
|
96
|
+
- *(styles)* Ruolo inverse-surface (rename da neutral-emphasis)
|
|
97
|
+
- *(styles)* Generate named-theme overrides, retire the stale tint rules
|
|
98
|
+
- *(styles)* Emit theme-aware accent roles from the accents map
|
|
99
|
+
- *(styles)* Emit accent interaction-state roles from the state-step map
|
|
100
|
+
- *(design-tokens,stencil,styles)* Collapse accent roles to {accent, ai}
|
|
101
|
+
- *(design-tokens,styles,stencil)* Publish the hue role scales and promote them under pref-contrast-more
|
|
102
|
+
- *(styles,stencil)* Register the component custom properties from globals.css
|
|
103
|
+
- *(design-tokens,styles,stencil)* Retint the raw ramp with the theme via --magma-scale-*
|
|
104
|
+
- *(design-tokens,styles,stencil)* Give the colored hues the emphasis band states
|
|
105
|
+
- *(design-tokens,styles)* Give the neutral pills a wash band
|
|
106
|
+
- *(design-tokens,styles,stencil)* A shadow ink role, the ring family back, and a guard
|
|
107
|
+
- *(styles)* Generate a token sheet editors can autocomplete from
|
|
108
|
+
- *(styles,stencil)* Emit the corner axis, shape and scale in one block
|
|
109
|
+
- *(styles)* Publish --magma-surface-inverse-muted
|
|
110
|
+
- *(styles)* Add --magma-on-backdrop, the ink on the modal scrim
|
|
111
|
+
- *(styles)* Dark on-emphasis ink follows the canvas instead of pure black
|
|
112
|
+
|
|
113
|
+
### Refactor
|
|
114
|
+
|
|
115
|
+
- *(stencil,styles)* [**breaking**] Migrate --tone-*(bare) usages to --tone-*-seed (#572)
|
|
116
|
+
- *(styles)* Rename semantic layer prefix to --magma-* (#573)
|
|
117
|
+
- *(styles)* Stage generated CSS in a dedicated build dir
|
|
118
|
+
- *(styles)* Emit accent tint overrides via the shared helper
|
|
119
|
+
- *(design-tokens,styles,stencil)* Name the hue background levels wash-*, not surface-*
|
|
120
|
+
- *(styles)* Paint the light focus-zoom outline with text-on-emphasis
|
|
121
|
+
- *(styles)* Retire the --magma-scale-NN bridge from the semantic layer
|
package/README.md
CHANGED
|
@@ -85,7 +85,11 @@ step only follows the mode.
|
|
|
85
85
|
```
|
|
86
86
|
|
|
87
87
|
The values come from `dist/css/semantic.css`, the Tailwind utilities from
|
|
88
|
-
`dist/tailwind/theme.css`.
|
|
88
|
+
`dist/tailwind/theme.css`. Every role of the Tailwind bridge carries its light default as
|
|
89
|
+
the fallback of its `var()` (`rgb(var(--magma-surface-default, 242 242 242))`): Tailwind
|
|
90
|
+
IntelliSense reads a utility's colour only from that literal, so the semantic utilities get
|
|
91
|
+
a swatch in the editor. Without `semantic.css` they paint that light default, in every mode:
|
|
92
|
+
the file is still required. The roles, their pairing rules and the Magma 1 -> 2 map are
|
|
89
93
|
in the color guide shipped with the components package
|
|
90
94
|
(`@maggioli-design-system/magma/agents/color.md`).
|
|
91
95
|
|
|
@@ -262,6 +266,38 @@ Never import this file. It only holds light-theme defaults, so loading it would
|
|
|
262
266
|
token at the highest-priority origin and freeze theming; it is wrapped in a query that can
|
|
263
267
|
never match, which makes an accidental import a no-op.
|
|
264
268
|
|
|
269
|
+
Do not install `vunguyentuan.vscode-css-variables` next to it: it sorts alphabetically,
|
|
270
|
+
never opens the list by itself and duplicates every entry. To share the setup with the
|
|
271
|
+
team, recommend the extensions in `.vscode/extensions.json`:
|
|
272
|
+
|
|
273
|
+
```json
|
|
274
|
+
{
|
|
275
|
+
"recommendations": ["phoenisx.cssvar", "bradlc.vscode-tailwindcss"],
|
|
276
|
+
"unwantedRecommendations": ["vunguyentuan.vscode-css-variables"]
|
|
277
|
+
}
|
|
278
|
+
```
|
|
279
|
+
|
|
280
|
+
#### Tailwind classes
|
|
281
|
+
|
|
282
|
+
The classes complete through [Tailwind CSS IntelliSense][tailwind-intellisense], which
|
|
283
|
+
reads the CSS entry importing Tailwind and Magma's theme (see Tailwind above). It finds
|
|
284
|
+
that file on its own, split imports included; only if hovering a class shows nothing, add
|
|
285
|
+
`"tailwindCSS.experimental.configFile": "<path of that CSS file>"` to the settings. Classes
|
|
286
|
+
built through functions (`clsx`, `cva`, `cn`) complete once those functions are listed in
|
|
287
|
+
`"tailwindCSS.classFunctions"`.
|
|
288
|
+
|
|
289
|
+
To check it works: hovering `p-600` shows `1.5rem = 24px`, and `bg-surface-default` gets a
|
|
290
|
+
swatch in the completion list (the semantic utilities carry their light default as a
|
|
291
|
+
fallback for that; see Semantic colors).
|
|
292
|
+
|
|
293
|
+
Two limits, with nothing to configure:
|
|
294
|
+
|
|
295
|
+
- the utilities are listed alphabetically, whatever the order of the theme:
|
|
296
|
+
`bg-surface-bisque-*` comes before `bg-surface-default`;
|
|
297
|
+
- the class list offers Tailwind's stock spacing steps (`p-1` ... `p-96`), not Magma's,
|
|
298
|
+
and with Magma's theme `p-1` is 0.04px. Write the Magma steps in full (`p-600`,
|
|
299
|
+
`gap-400`): they work and hover with their value, they are just not suggested.
|
|
300
|
+
|
|
265
301
|
---
|
|
266
302
|
|
|
267
303
|
### Token data
|
|
@@ -334,6 +370,7 @@ Tailwind 4 only; the Tailwind 3 preset is legacy.
|
|
|
334
370
|
| `tailwind3` | Tailwind 3 | `base.css`, `components.css`, `reset.css`, `typography.css` |
|
|
335
371
|
|
|
336
372
|
[mds]: https://magma.maggiolicloud.it/
|
|
337
|
-
[css-variable-autocomplete]: https://marketplace.visualstudio.com/items?itemName=
|
|
373
|
+
[css-variable-autocomplete]: https://marketplace.visualstudio.com/items?itemName=phoenisx.cssvar
|
|
374
|
+
[tailwind-intellisense]: https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
|
|
338
375
|
[fontsource-var-fonts]: https://fontsource.org/docs/variable-fonts
|
|
339
376
|
[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/globals.css
CHANGED
|
@@ -180,6 +180,17 @@
|
|
|
180
180
|
syntax: '*';
|
|
181
181
|
}
|
|
182
182
|
|
|
183
|
+
/* The part of its height a corner may take, for the components whose radius is
|
|
184
|
+
* always past half their height: 0.5 where the browser clamps, less where
|
|
185
|
+
* corner-shape cannot be drawn (corner.ts). `inherits: true` for the same reason
|
|
186
|
+
* as the shape: the fallback block declares it on :root. */
|
|
187
|
+
|
|
188
|
+
@property --magma-corner-cap {
|
|
189
|
+
inherits: true;
|
|
190
|
+
initial-value: 0.5;
|
|
191
|
+
syntax: '<number>';
|
|
192
|
+
}
|
|
193
|
+
|
|
183
194
|
/* z-index */
|
|
184
195
|
|
|
185
196
|
@property --magma-header-z-index {
|
|
@@ -3316,9 +3327,14 @@
|
|
|
3316
3327
|
|
|
3317
3328
|
--magma-radius-full is the same under every shape on purpose: the pill is out
|
|
3318
3329
|
of the axis (see corner.ts).
|
|
3330
|
+
|
|
3331
|
+
A browser without corner-shape gets the round scale back from the last block,
|
|
3332
|
+
and --magma-corner-cap, the part of its height a corner may take, drops from
|
|
3333
|
+
0.5 to the round look-alike of a squircle cut to half the height.
|
|
3319
3334
|
*/
|
|
3320
3335
|
:root {
|
|
3321
3336
|
--magma-corner-shape: squircle;
|
|
3337
|
+
--magma-corner-cap: 0.5;
|
|
3322
3338
|
|
|
3323
3339
|
--magma-radius-none: var(--radius-none);
|
|
3324
3340
|
--magma-radius-3xs: var(--radius-squircle-3xs);
|
|
@@ -3337,6 +3353,7 @@
|
|
|
3337
3353
|
|
|
3338
3354
|
[data-corner-shape='round'] {
|
|
3339
3355
|
--magma-corner-shape: round;
|
|
3356
|
+
--magma-corner-cap: 0.5;
|
|
3340
3357
|
|
|
3341
3358
|
--magma-radius-none: var(--radius-none);
|
|
3342
3359
|
--magma-radius-3xs: var(--radius-3xs);
|
|
@@ -3355,6 +3372,7 @@
|
|
|
3355
3372
|
|
|
3356
3373
|
[data-corner-shape='squircle'] {
|
|
3357
3374
|
--magma-corner-shape: squircle;
|
|
3375
|
+
--magma-corner-cap: 0.5;
|
|
3358
3376
|
|
|
3359
3377
|
--magma-radius-none: var(--radius-none);
|
|
3360
3378
|
--magma-radius-3xs: var(--radius-squircle-3xs);
|
|
@@ -3370,3 +3388,25 @@
|
|
|
3370
3388
|
--magma-radius-5xl: var(--radius-squircle-5xl);
|
|
3371
3389
|
--magma-radius-full: var(--radius-full);
|
|
3372
3390
|
}
|
|
3391
|
+
|
|
3392
|
+
@supports not (corner-shape: squircle) {
|
|
3393
|
+
:root:not([data-corner-shape='round']),
|
|
3394
|
+
[data-corner-shape='squircle'] {
|
|
3395
|
+
--magma-corner-shape: round;
|
|
3396
|
+
--magma-corner-cap: 0.2915;
|
|
3397
|
+
|
|
3398
|
+
--magma-radius-none: var(--radius-none);
|
|
3399
|
+
--magma-radius-3xs: var(--radius-3xs);
|
|
3400
|
+
--magma-radius-2xs: var(--radius-2xs);
|
|
3401
|
+
--magma-radius-xs: var(--radius-xs);
|
|
3402
|
+
--magma-radius-sm: var(--radius-sm);
|
|
3403
|
+
--magma-radius-md: var(--radius-md);
|
|
3404
|
+
--magma-radius-lg: var(--radius-lg);
|
|
3405
|
+
--magma-radius-xl: var(--radius-xl);
|
|
3406
|
+
--magma-radius-2xl: var(--radius-2xl);
|
|
3407
|
+
--magma-radius-3xl: var(--radius-3xl);
|
|
3408
|
+
--magma-radius-4xl: var(--radius-4xl);
|
|
3409
|
+
--magma-radius-5xl: var(--radius-5xl);
|
|
3410
|
+
--magma-radius-full: var(--radius-full);
|
|
3411
|
+
}
|
|
3412
|
+
}
|
package/dist/css/hydrated.css
CHANGED
|
@@ -122,3 +122,133 @@ mds-zero:not(:is([hydrated], .hydrated))
|
|
|
122
122
|
transition-duration: 0s;
|
|
123
123
|
visibility: hidden;
|
|
124
124
|
}
|
|
125
|
+
|
|
126
|
+
/*
|
|
127
|
+
Once hydrated, a component keeps the box it gives itself on :host. A page reset such as
|
|
128
|
+
Tailwind's preflight (margin, padding and border of every element) is page CSS, and page CSS
|
|
129
|
+
beats :host whatever its layer: revert-layer hands each property back to the layers before
|
|
130
|
+
this one, down to the component's own :host rules. This file is imported into `base`, the
|
|
131
|
+
layer the preflight sits in, so the tag beats its `*`. Both forms of the flag: the browser
|
|
132
|
+
builds set the attribute, the server-rendered markup the class.
|
|
133
|
+
*/
|
|
134
|
+
|
|
135
|
+
mds-accordion:is([hydrated], .hydrated),
|
|
136
|
+
mds-accordion-item:is([hydrated], .hydrated),
|
|
137
|
+
mds-accordion-timer:is([hydrated], .hydrated),
|
|
138
|
+
mds-accordion-timer-item:is([hydrated], .hydrated),
|
|
139
|
+
mds-author:is([hydrated], .hydrated),
|
|
140
|
+
mds-avatar:is([hydrated], .hydrated),
|
|
141
|
+
mds-avatar-stack:is([hydrated], .hydrated),
|
|
142
|
+
mds-avatar-stack-item:is([hydrated], .hydrated),
|
|
143
|
+
mds-badge:is([hydrated], .hydrated),
|
|
144
|
+
mds-banner:is([hydrated], .hydrated),
|
|
145
|
+
mds-benchmark-bar:is([hydrated], .hydrated),
|
|
146
|
+
mds-bibliography:is([hydrated], .hydrated),
|
|
147
|
+
mds-breadcrumb:is([hydrated], .hydrated),
|
|
148
|
+
mds-breadcrumb-item:is([hydrated], .hydrated),
|
|
149
|
+
mds-button:is([hydrated], .hydrated),
|
|
150
|
+
mds-button-dropdown:is([hydrated], .hydrated),
|
|
151
|
+
mds-button-group:is([hydrated], .hydrated),
|
|
152
|
+
mds-calendar:is([hydrated], .hydrated),
|
|
153
|
+
mds-calendar-cell:is([hydrated], .hydrated),
|
|
154
|
+
mds-card:is([hydrated], .hydrated),
|
|
155
|
+
mds-card-content:is([hydrated], .hydrated),
|
|
156
|
+
mds-card-footer:is([hydrated], .hydrated),
|
|
157
|
+
mds-card-header:is([hydrated], .hydrated),
|
|
158
|
+
mds-card-media:is([hydrated], .hydrated),
|
|
159
|
+
mds-chip:is([hydrated], .hydrated),
|
|
160
|
+
mds-details:is([hydrated], .hydrated),
|
|
161
|
+
mds-dropdown:is([hydrated], .hydrated),
|
|
162
|
+
mds-emoji:is([hydrated], .hydrated),
|
|
163
|
+
mds-entity:is([hydrated], .hydrated),
|
|
164
|
+
mds-file:is([hydrated], .hydrated),
|
|
165
|
+
mds-file-preview:is([hydrated], .hydrated),
|
|
166
|
+
mds-filter:is([hydrated], .hydrated),
|
|
167
|
+
mds-filter-item:is([hydrated], .hydrated),
|
|
168
|
+
mds-header:is([hydrated], .hydrated),
|
|
169
|
+
mds-header-bar:is([hydrated], .hydrated),
|
|
170
|
+
mds-help:is([hydrated], .hydrated),
|
|
171
|
+
mds-horizontal-scroll:is([hydrated], .hydrated),
|
|
172
|
+
mds-hr:is([hydrated], .hydrated),
|
|
173
|
+
mds-icon:is([hydrated], .hydrated),
|
|
174
|
+
mds-img:is([hydrated], .hydrated),
|
|
175
|
+
mds-input:is([hydrated], .hydrated),
|
|
176
|
+
mds-input-date:is([hydrated], .hydrated),
|
|
177
|
+
mds-input-date-range:is([hydrated], .hydrated),
|
|
178
|
+
mds-input-date-range-preselection:is([hydrated], .hydrated),
|
|
179
|
+
mds-input-field:is([hydrated], .hydrated),
|
|
180
|
+
mds-input-otp:is([hydrated], .hydrated),
|
|
181
|
+
mds-input-range:is([hydrated], .hydrated),
|
|
182
|
+
mds-input-select:is([hydrated], .hydrated),
|
|
183
|
+
mds-input-switch:is([hydrated], .hydrated),
|
|
184
|
+
mds-input-tip:is([hydrated], .hydrated),
|
|
185
|
+
mds-input-tip-item:is([hydrated], .hydrated),
|
|
186
|
+
mds-input-upload:is([hydrated], .hydrated),
|
|
187
|
+
mds-keyboard:is([hydrated], .hydrated),
|
|
188
|
+
mds-keyboard-key:is([hydrated], .hydrated),
|
|
189
|
+
mds-kpi:is([hydrated], .hydrated),
|
|
190
|
+
mds-kpi-item:is([hydrated], .hydrated),
|
|
191
|
+
mds-label:is([hydrated], .hydrated),
|
|
192
|
+
mds-list:is([hydrated], .hydrated),
|
|
193
|
+
mds-list-item:is([hydrated], .hydrated),
|
|
194
|
+
mds-mention:is([hydrated], .hydrated),
|
|
195
|
+
mds-modal:is([hydrated], .hydrated),
|
|
196
|
+
mds-note:is([hydrated], .hydrated),
|
|
197
|
+
mds-notification:is([hydrated], .hydrated),
|
|
198
|
+
mds-paginator:is([hydrated], .hydrated),
|
|
199
|
+
mds-paginator-item:is([hydrated], .hydrated),
|
|
200
|
+
mds-policy-ai:is([hydrated], .hydrated),
|
|
201
|
+
mds-pref:is([hydrated], .hydrated),
|
|
202
|
+
mds-pref-animation:is([hydrated], .hydrated),
|
|
203
|
+
mds-pref-consumption:is([hydrated], .hydrated),
|
|
204
|
+
mds-pref-contrast:is([hydrated], .hydrated),
|
|
205
|
+
mds-pref-language:is([hydrated], .hydrated),
|
|
206
|
+
mds-pref-language-item:is([hydrated], .hydrated),
|
|
207
|
+
mds-pref-mode:is([hydrated], .hydrated),
|
|
208
|
+
mds-pref-theme:is([hydrated], .hydrated),
|
|
209
|
+
mds-pref-theme-item:is([hydrated], .hydrated),
|
|
210
|
+
mds-price-table:is([hydrated], .hydrated),
|
|
211
|
+
mds-price-table-features:is([hydrated], .hydrated),
|
|
212
|
+
mds-price-table-features-cell:is([hydrated], .hydrated),
|
|
213
|
+
mds-price-table-features-row:is([hydrated], .hydrated),
|
|
214
|
+
mds-price-table-header:is([hydrated], .hydrated),
|
|
215
|
+
mds-price-table-list:is([hydrated], .hydrated),
|
|
216
|
+
mds-price-table-list-item:is([hydrated], .hydrated),
|
|
217
|
+
mds-progress:is([hydrated], .hydrated),
|
|
218
|
+
mds-push-notification:is([hydrated], .hydrated),
|
|
219
|
+
mds-push-notification-item:is([hydrated], .hydrated),
|
|
220
|
+
mds-quote:is([hydrated], .hydrated),
|
|
221
|
+
mds-radial-menu:is([hydrated], .hydrated),
|
|
222
|
+
mds-radial-menu-item:is([hydrated], .hydrated),
|
|
223
|
+
mds-radial-progress:is([hydrated], .hydrated),
|
|
224
|
+
mds-separator:is([hydrated], .hydrated),
|
|
225
|
+
mds-spinner:is([hydrated], .hydrated),
|
|
226
|
+
mds-status-bar:is([hydrated], .hydrated),
|
|
227
|
+
mds-stepper-bar:is([hydrated], .hydrated),
|
|
228
|
+
mds-stepper-bar-item:is([hydrated], .hydrated),
|
|
229
|
+
mds-tab:is([hydrated], .hydrated),
|
|
230
|
+
mds-tab-bar:is([hydrated], .hydrated),
|
|
231
|
+
mds-tab-bar-item:is([hydrated], .hydrated),
|
|
232
|
+
mds-tab-item:is([hydrated], .hydrated),
|
|
233
|
+
mds-table:is([hydrated], .hydrated),
|
|
234
|
+
mds-table-body:is([hydrated], .hydrated),
|
|
235
|
+
mds-table-cell:is([hydrated], .hydrated),
|
|
236
|
+
mds-table-footer:is([hydrated], .hydrated),
|
|
237
|
+
mds-table-header:is([hydrated], .hydrated),
|
|
238
|
+
mds-table-header-cell:is([hydrated], .hydrated),
|
|
239
|
+
mds-table-row:is([hydrated], .hydrated),
|
|
240
|
+
mds-text:is([hydrated], .hydrated),
|
|
241
|
+
mds-toast:is([hydrated], .hydrated),
|
|
242
|
+
mds-tooltip:is([hydrated], .hydrated),
|
|
243
|
+
mds-tree:is([hydrated], .hydrated),
|
|
244
|
+
mds-tree-item:is([hydrated], .hydrated),
|
|
245
|
+
mds-url-view:is([hydrated], .hydrated),
|
|
246
|
+
mds-usage:is([hydrated], .hydrated),
|
|
247
|
+
mds-video-wall:is([hydrated], .hydrated),
|
|
248
|
+
mds-zero:is([hydrated], .hydrated)
|
|
249
|
+
{
|
|
250
|
+
border: revert-layer;
|
|
251
|
+
display: revert-layer;
|
|
252
|
+
margin: revert-layer;
|
|
253
|
+
padding: revert-layer;
|
|
254
|
+
}
|