@maggioli-design-system/styles 17.3.0 → 17.4.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 +15 -0
- package/LICENSE +21 -0
- package/README.md +6 -3
- 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 +31 -0
- package/dist/css/hydrated.css +2 -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 +64 -57
- package/dist/css/transitions.css +2 -2
- package/dist/css/typography.css +2 -2
- package/dist/dtcg/globals.tokens.json +81 -8
- package/dist/tailwind/dark-mode.css +16 -0
- package/dist/tailwind/theme.css +3 -1
- package/package.json +5 -4
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,21 @@ Every release of `@maggioli-design-system/styles`, newest first. Each section is
|
|
|
4
4
|
release with the same tag, written by git-cliff from the conventional commits of the
|
|
5
5
|
package.
|
|
6
6
|
|
|
7
|
+
## [styles@17.4.0] - 2026-10-24
|
|
8
|
+
|
|
9
|
+
### Documentation
|
|
10
|
+
|
|
11
|
+
- *(magma,styles)* Allow dark: for a deliberate per-mode choice
|
|
12
|
+
|
|
13
|
+
### Features
|
|
14
|
+
|
|
15
|
+
- *(styles)* Describe every global in the DTCG export and in the editor sheet
|
|
16
|
+
- *(styles)* Bring back the dark: variant, on the Magma mode instead of the OS
|
|
17
|
+
|
|
18
|
+
### Refactor
|
|
19
|
+
|
|
20
|
+
- *(design-tokens,styles)* Print the dark selectors of the palette from one list
|
|
21
|
+
|
|
7
22
|
## [styles@17.3.0] - 2026-10-21
|
|
8
23
|
|
|
9
24
|
### Bug Fixes
|
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2020-2026 Maggioli S.p.A.
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -157,8 +157,9 @@ class on the `html` tag:
|
|
|
157
157
|
|
|
158
158
|
To let the user choose, use the `mds-pref-mode` component of
|
|
159
159
|
`@maggioli-design-system/magma`: it writes the class and remembers the choice. Tailwind's
|
|
160
|
-
`dark:` variant follows
|
|
161
|
-
semantic roles
|
|
160
|
+
`dark:` variant follows these classes too (and the OS under `pref-mode-system`), once the
|
|
161
|
+
Magma Tailwind theme is imported. The semantic roles flip without it: keep `dark:` for a
|
|
162
|
+
deliberate per-mode choice, never to correct a colour.
|
|
162
163
|
|
|
163
164
|
---
|
|
164
165
|
|
|
@@ -317,7 +318,9 @@ stylesheets.
|
|
|
317
318
|
| `dist/tailwind/consumption.json` | How each token is consumed through Tailwind 4 |
|
|
318
319
|
|
|
319
320
|
design-tokens' `base.tokens.json` and `globals.tokens.json` together hold every global
|
|
320
|
-
token of `tokens.editor.css`.
|
|
321
|
+
token of `tokens.editor.css`. Every group and token of `globals.tokens.json` has a
|
|
322
|
+
`$description`, and every entry of a `cssOnly` list a `description`;
|
|
323
|
+
`tokens.editor.css` shows the same line at the end of the declaration. The resolver points at the files of design-tokens as
|
|
321
324
|
`../../../design-tokens/dist/dtcg/`: the two packages sit side by side in
|
|
322
325
|
`node_modules/@maggioli-design-system/`, as they do in this repository.
|
|
323
326
|
|
package/dist/css/colors-hex.css
CHANGED
package/dist/css/colors-rgb.css
CHANGED
package/dist/css/globals.css
CHANGED
|
@@ -563,6 +563,37 @@
|
|
|
563
563
|
syntax: '<color>';
|
|
564
564
|
}
|
|
565
565
|
|
|
566
|
+
/* mds-book */
|
|
567
|
+
@property --mds-book-color {
|
|
568
|
+
inherits: true;
|
|
569
|
+
initial-value: rgb(36 103 231);
|
|
570
|
+
syntax: '<color>';
|
|
571
|
+
}
|
|
572
|
+
|
|
573
|
+
@property --mds-book-paper-color {
|
|
574
|
+
inherits: true;
|
|
575
|
+
initial-value: rgb(250 248 242);
|
|
576
|
+
syntax: '<color>';
|
|
577
|
+
}
|
|
578
|
+
|
|
579
|
+
@property --mds-book-text-color {
|
|
580
|
+
inherits: true;
|
|
581
|
+
initial-value: rgb(255 255 255);
|
|
582
|
+
syntax: '<color>';
|
|
583
|
+
}
|
|
584
|
+
|
|
585
|
+
@property --mds-book-page-weight-max {
|
|
586
|
+
inherits: true;
|
|
587
|
+
initial-value: 0.05;
|
|
588
|
+
syntax: '<number>';
|
|
589
|
+
}
|
|
590
|
+
|
|
591
|
+
@property --mds-book-page-weight-min {
|
|
592
|
+
inherits: true;
|
|
593
|
+
initial-value: 0.1;
|
|
594
|
+
syntax: '<number>';
|
|
595
|
+
}
|
|
596
|
+
|
|
566
597
|
/* mds-breadcrumb-item */
|
|
567
598
|
@property --mds-breadcrumb-item-arrow-depth-color {
|
|
568
599
|
inherits: true;
|
package/dist/css/hydrated.css
CHANGED
|
@@ -10,6 +10,7 @@ mds-badge:not(:is([hydrated], .hydrated)),
|
|
|
10
10
|
mds-banner:not(:is([hydrated], .hydrated)),
|
|
11
11
|
mds-benchmark-bar:not(:is([hydrated], .hydrated)),
|
|
12
12
|
mds-bibliography:not(:is([hydrated], .hydrated)),
|
|
13
|
+
mds-book:not(:is([hydrated], .hydrated)),
|
|
13
14
|
mds-breadcrumb:not(:is([hydrated], .hydrated)),
|
|
14
15
|
mds-breadcrumb-item:not(:is([hydrated], .hydrated)),
|
|
15
16
|
mds-button:not(:is([hydrated], .hydrated)),
|
|
@@ -146,6 +147,7 @@ mds-badge:is([hydrated], .hydrated),
|
|
|
146
147
|
mds-banner:is([hydrated], .hydrated),
|
|
147
148
|
mds-benchmark-bar:is([hydrated], .hydrated),
|
|
148
149
|
mds-bibliography:is([hydrated], .hydrated),
|
|
150
|
+
mds-book:is([hydrated], .hydrated),
|
|
149
151
|
mds-breadcrumb:is([hydrated], .hydrated),
|
|
150
152
|
mds-breadcrumb-item:is([hydrated], .hydrated),
|
|
151
153
|
mds-button:is([hydrated], .hydrated),
|
|
@@ -779,63 +779,63 @@
|
|
|
779
779
|
--magma-accent-ai-on-emphasis: var(--magma-tint-text-on-emphasis); /* Text and icons on the solid fill of the AI accent. */
|
|
780
780
|
|
|
781
781
|
/* globals */
|
|
782
|
-
--magma-pref-mode: light;
|
|
783
|
-
--magma-pref-theme-scheme: light;
|
|
784
|
-
--magma-pref-theme: default;
|
|
785
|
-
--magma-pref-consumption: high;
|
|
786
|
-
--magma-pref-animation: no-preference;
|
|
787
|
-
--magma-pref-contrast: no-preference;
|
|
788
|
-
--magma-backdrop-animation-duration: 300ms;
|
|
789
|
-
--magma-outline-animation-duration: 1.5s;
|
|
790
|
-
--magma-backdrop-opacity: 0.1;
|
|
791
|
-
--magma-disabled-opacity: 0.5;
|
|
792
|
-
--magma-overlay-opacity: 0.5;
|
|
793
|
-
--magma-backdrop-blur: 4px;
|
|
794
|
-
--magma-outline-blur-offset: 6px;
|
|
795
|
-
--magma-outline-focus-offset: 2px;
|
|
796
|
-
--magma-backdrop-color: rgb(0 0 0);
|
|
797
|
-
--magma-on-backdrop: rgb(252 252 252);
|
|
798
|
-
--magma-outline-blur-color: transparent;
|
|
799
|
-
--magma-outline-focus-color: rgb(0 0 0);
|
|
800
|
-
--magma-overlay-color: rgb(0 0 0);
|
|
801
|
-
--magma-selection-background: rgb(0 120 255);
|
|
802
|
-
--magma-selection-color: rgb(255 255 255);
|
|
803
|
-
--magma-corner-shape: squircle;
|
|
804
|
-
--magma-corner-cap: 0.5;
|
|
805
|
-
--magma-header-z-index: 1000;
|
|
806
|
-
--magma-notification-z-index: 2000;
|
|
807
|
-
--magma-modal-z-index: 3000;
|
|
808
|
-
--magma-backdrop-z-index: 4000;
|
|
809
|
-
--magma-dropdown-z-index: 5000;
|
|
810
|
-
--magma-tooltip-z-index: 6000;
|
|
811
|
-
--magma-theme-overlay-z-index: 7000;
|
|
812
|
-
--magma-context-menu-z-index: 8000;
|
|
813
|
-
--magma-view-transition-navigation: auto;
|
|
814
|
-
--magma-backdrop: rgb(var(--magma-backdrop-color) / var(--magma-backdrop-opacity));
|
|
815
|
-
--magma-outline-blur: 2px solid var(--magma-outline-blur-color);
|
|
816
|
-
--magma-outline-focus: 2px solid var(--magma-outline-focus-color);
|
|
817
|
-
--magma-overlay-blur: var(--magma-backdrop-blur);
|
|
818
|
-
--magma-overlay: rgb(var(--magma-overlay-color) / var(--magma-overlay-opacity));
|
|
782
|
+
--magma-pref-mode: light; /* The active mode preference, as the mds-pref components write it: read it, never set it. */
|
|
783
|
+
--magma-pref-theme-scheme: light; /* The active theme-scheme preference, as the mds-pref components write it: read it, never set it. */
|
|
784
|
+
--magma-pref-theme: default; /* The active theme preference, as the mds-pref components write it: read it, never set it. */
|
|
785
|
+
--magma-pref-consumption: high; /* The active consumption preference, as the mds-pref components write it: read it, never set it. */
|
|
786
|
+
--magma-pref-animation: no-preference; /* The active animation preference, as the mds-pref components write it: read it, never set it. */
|
|
787
|
+
--magma-pref-contrast: no-preference; /* The active contrast preference, as the mds-pref components write it: read it, never set it. */
|
|
788
|
+
--magma-backdrop-animation-duration: 300ms; /* How long the scrim takes to fade in. */
|
|
789
|
+
--magma-outline-animation-duration: 1.5s; /* How long one pulse of the focus ring takes. */
|
|
790
|
+
--magma-backdrop-opacity: 0.1; /* How much the scrim darkens the page. */
|
|
791
|
+
--magma-disabled-opacity: 0.5; /* The opacity of disabled components. */
|
|
792
|
+
--magma-overlay-opacity: 0.5; /* How much the modal scrim darkens the page. */
|
|
793
|
+
--magma-backdrop-blur: 4px; /* How much the scrim blurs the page behind it. */
|
|
794
|
+
--magma-outline-blur-offset: 6px; /* The gap of the ring without focus, wider than the focus one: the focus ring closes in from it, or pulses out to it. */
|
|
795
|
+
--magma-outline-focus-offset: 2px; /* The gap between the focus ring and the element. */
|
|
796
|
+
--magma-backdrop-color: rgb(0 0 0); /* The colour of the scrim, black in both modes; the elevation shadows draw with it too. */
|
|
797
|
+
--magma-on-backdrop: rgb(252 252 252); /* Text and icons on the scrim, such as the close icon of a modal: light in both modes, as the scrim is black in both. */
|
|
798
|
+
--magma-outline-blur-color: transparent; /* The colour of the ring without focus: transparent. */
|
|
799
|
+
--magma-outline-focus-color: rgb(0 0 0); /* The colour of the focus ring. */
|
|
800
|
+
--magma-overlay-color: rgb(0 0 0); /* The colour of the modal scrim: the backdrop colour. */
|
|
801
|
+
--magma-selection-background: rgb(0 120 255); /* The background of selected text. */
|
|
802
|
+
--magma-selection-color: rgb(255 255 255); /* The colour of selected text. */
|
|
803
|
+
--magma-corner-shape: squircle; /* The shape of the corners: set it through data-corner-shape, which changes the radius scale with it. */
|
|
804
|
+
--magma-corner-cap: 0.5; /* The part of its height a corner may take, for the controls whose radius is past half their height. */
|
|
805
|
+
--magma-header-z-index: 1000; /* The z-index of the header, on the stacking scale of the floating layers: slot your own layers between its steps. */
|
|
806
|
+
--magma-notification-z-index: 2000; /* The z-index of notifications, on the stacking scale of the floating layers: slot your own layers between its steps. */
|
|
807
|
+
--magma-modal-z-index: 3000; /* The z-index of modals, on the stacking scale of the floating layers: slot your own layers between its steps. */
|
|
808
|
+
--magma-backdrop-z-index: 4000; /* The stacking level of the scrim, between modals and dropdowns. */
|
|
809
|
+
--magma-dropdown-z-index: 5000; /* The z-index of dropdowns, on the stacking scale of the floating layers: slot your own layers between its steps. */
|
|
810
|
+
--magma-tooltip-z-index: 6000; /* The z-index of tooltips, on the stacking scale of the floating layers: slot your own layers between its steps. */
|
|
811
|
+
--magma-theme-overlay-z-index: 7000; /* The z-index of the theme overlay, on the stacking scale of the floating layers: slot your own layers between its steps. */
|
|
812
|
+
--magma-context-menu-z-index: 8000; /* The z-index of context menus, on the stacking scale of the floating layers: slot your own layers between its steps. */
|
|
813
|
+
--magma-view-transition-navigation: auto; /* Whether a navigation between pages animates as a view transition. */
|
|
814
|
+
--magma-backdrop: rgb(var(--magma-backdrop-color) / var(--magma-backdrop-opacity)); /* The scrim as one colour, with its opacity. */
|
|
815
|
+
--magma-outline-blur: 2px solid var(--magma-outline-blur-color); /* The ring of an element without focus: transparent. */
|
|
816
|
+
--magma-outline-focus: 2px solid var(--magma-outline-focus-color); /* The focus ring: width, style and colour. */
|
|
817
|
+
--magma-overlay-blur: var(--magma-backdrop-blur); /* How much the modal scrim blurs the page: the backdrop blur. */
|
|
818
|
+
--magma-overlay: rgb(var(--magma-overlay-color) / var(--magma-overlay-opacity)); /* The scrim of mds-modal as one colour, with its opacity. */
|
|
819
819
|
|
|
820
820
|
/* globals: corner */
|
|
821
|
-
--magma-radius-none: var(--radius-none);
|
|
822
|
-
--magma-radius-3xs: var(--radius-squircle-3xs);
|
|
823
|
-
--magma-radius-2xs: var(--radius-squircle-2xs);
|
|
824
|
-
--magma-radius-xs: var(--radius-squircle-xs);
|
|
825
|
-
--magma-radius-sm: var(--radius-squircle-sm);
|
|
826
|
-
--magma-radius-md: var(--radius-squircle-md);
|
|
827
|
-
--magma-radius-lg: var(--radius-squircle-lg);
|
|
828
|
-
--magma-radius-xl: var(--radius-squircle-xl);
|
|
829
|
-
--magma-radius-2xl: var(--radius-squircle-2xl);
|
|
830
|
-
--magma-radius-3xl: var(--radius-squircle-3xl);
|
|
831
|
-
--magma-radius-4xl: var(--radius-squircle-4xl);
|
|
832
|
-
--magma-radius-5xl: var(--radius-squircle-5xl);
|
|
833
|
-
--magma-radius-full: var(--radius-full);
|
|
821
|
+
--magma-radius-none: var(--radius-none); /* No rounding. */
|
|
822
|
+
--magma-radius-3xs: var(--radius-squircle-3xs); /* The 3xs corner radius, on the scale of the active corner shape. */
|
|
823
|
+
--magma-radius-2xs: var(--radius-squircle-2xs); /* The 2xs corner radius, on the scale of the active corner shape. */
|
|
824
|
+
--magma-radius-xs: var(--radius-squircle-xs); /* The xs corner radius, on the scale of the active corner shape. */
|
|
825
|
+
--magma-radius-sm: var(--radius-squircle-sm); /* The sm corner radius, on the scale of the active corner shape. */
|
|
826
|
+
--magma-radius-md: var(--radius-squircle-md); /* The md corner radius, on the scale of the active corner shape. */
|
|
827
|
+
--magma-radius-lg: var(--radius-squircle-lg); /* The lg corner radius, on the scale of the active corner shape. */
|
|
828
|
+
--magma-radius-xl: var(--radius-squircle-xl); /* The xl corner radius, on the scale of the active corner shape. */
|
|
829
|
+
--magma-radius-2xl: var(--radius-squircle-2xl); /* The 2xl corner radius, on the scale of the active corner shape. */
|
|
830
|
+
--magma-radius-3xl: var(--radius-squircle-3xl); /* The 3xl corner radius, on the scale of the active corner shape. */
|
|
831
|
+
--magma-radius-4xl: var(--radius-squircle-4xl); /* The 4xl corner radius, on the scale of the active corner shape. */
|
|
832
|
+
--magma-radius-5xl: var(--radius-squircle-5xl); /* The 5xl corner radius, on the scale of the active corner shape. */
|
|
833
|
+
--magma-radius-full: var(--radius-full); /* The pill, the same under every corner shape. */
|
|
834
834
|
|
|
835
835
|
/* globals: theme */
|
|
836
|
-
--depth: 1;
|
|
837
|
-
--mds-elevation-raised: 0 calc(1px * var(--depth)) calc(2px * var(--depth)) rgb(var(--magma-backdrop-color) / calc(0.06 * var(--depth))), 0 calc(2px * var(--depth)) calc(8px * var(--depth)) rgb(var(--magma-backdrop-color) / calc(0.08 * var(--depth)));
|
|
838
|
-
--mds-elevation-overlay: 0 calc(4px * var(--depth)) calc(12px * var(--depth)) rgb(var(--magma-backdrop-color) / calc(0.12 * var(--depth))), 0 calc(8px * var(--depth)) calc(24px * var(--depth)) rgb(var(--magma-backdrop-color) / calc(0.16 * var(--depth)));
|
|
836
|
+
--depth: 1; /* The depth axis, from 0 to 1: how strong the elevation shadows are. data-theme-depth="flat" sets it to 0. */
|
|
837
|
+
--mds-elevation-raised: 0 calc(1px * var(--depth)) calc(2px * var(--depth)) rgb(var(--magma-backdrop-color) / calc(0.06 * var(--depth))), 0 calc(2px * var(--depth)) calc(8px * var(--depth)) rgb(var(--magma-backdrop-color) / calc(0.08 * var(--depth))); /* The shadow of a raised surface, such as a card. */
|
|
838
|
+
--mds-elevation-overlay: 0 calc(4px * var(--depth)) calc(12px * var(--depth)) rgb(var(--magma-backdrop-color) / calc(0.12 * var(--depth))), 0 calc(8px * var(--depth)) calc(24px * var(--depth)) rgb(var(--magma-backdrop-color) / calc(0.16 * var(--depth))); /* The shadow of an overlay surface, such as a dropdown or a popover. */
|
|
839
839
|
|
|
840
840
|
/* component: mds-accordion */
|
|
841
841
|
--mds-accordion-color: rgb(var(--magma-text-default));
|
|
@@ -929,6 +929,13 @@
|
|
|
929
929
|
--mds-bibliography-text-decoration: rgb(140 140 140);
|
|
930
930
|
--mds-bibliography-text-decoration-hover: rgb(5 5 5);
|
|
931
931
|
|
|
932
|
+
/* component: mds-book */
|
|
933
|
+
--mds-book-color: rgb(36 103 231);
|
|
934
|
+
--mds-book-paper-color: rgb(250 248 242);
|
|
935
|
+
--mds-book-text-color: rgb(255 255 255);
|
|
936
|
+
--mds-book-page-weight-max: 0.05;
|
|
937
|
+
--mds-book-page-weight-min: 0.1;
|
|
938
|
+
|
|
932
939
|
/* component: mds-breadcrumb */
|
|
933
940
|
--mds-breadcrumb-button-background-disabled: transparent;
|
|
934
941
|
--mds-breadcrumb-arrow-depth-color: rgb(var(--magma-text-subtle));
|
|
@@ -1304,7 +1311,7 @@
|
|
|
1304
1311
|
--mds-keyboard-key-illumination-dark-opacity: 0.5;
|
|
1305
1312
|
--mds-keyboard-key-illumination-light-opacity: 0.15;
|
|
1306
1313
|
--mds-keyboard-key-illumination-shadow: 0 0 1px 0 rgb(255 255 255 / 0.5);
|
|
1307
|
-
--mds-keyboard-illumination-dark: 0 calc(var(--mds-keyboard-illumination-dark-size) * -1) 0 0 rgb(
|
|
1314
|
+
--mds-keyboard-illumination-dark: 0 calc(var(--mds-keyboard-illumination-dark-size) * -1) 0 0 rgb(var(--magma-shadow-ink) / var(--mds-keyboard-illumination-dark-opacity)) inset;
|
|
1308
1315
|
--mds-keyboard-illumination-light: 0 var(--mds-keyboard-illumination-light-size) 0 0 rgb(255 255 255 / var(--mds-keyboard-illumination-light-opacity)) inset;
|
|
1309
1316
|
|
|
1310
1317
|
/* component: mds-keyboard-key */
|
|
@@ -1312,7 +1319,7 @@
|
|
|
1312
1319
|
--mds-keyboard-key-illumination-light-size: 2px;
|
|
1313
1320
|
--mds-keyboard-key-padding: 4px;
|
|
1314
1321
|
--mds-keyboard-key-transition-duration: 300ms;
|
|
1315
|
-
--mds-keyboard-key-illumination-dark: 0 calc(var(--mds-keyboard-key-illumination-dark-size) * -1) 0 0 rgb(
|
|
1322
|
+
--mds-keyboard-key-illumination-dark: 0 calc(var(--mds-keyboard-key-illumination-dark-size) * -1) 0 0 rgb(var(--magma-shadow-ink) / var(--mds-keyboard-key-illumination-dark-opacity, 0.05)) inset;
|
|
1316
1323
|
--mds-keyboard-key-illumination-light: 0 var(--mds-keyboard-key-illumination-light-size) 0 0 rgb(255 255 255 / var(--mds-keyboard-key-illumination-light-opacity, 0.5)) inset;
|
|
1317
1324
|
|
|
1318
1325
|
/* component: mds-kpi */
|
|
@@ -1471,7 +1478,7 @@
|
|
|
1471
1478
|
--mds-push-notification-items-duration: 300ms;
|
|
1472
1479
|
--mds-push-notification-items-intro-delay: 300ms;
|
|
1473
1480
|
--mds-push-notification-items-outro-delay: 0ms;
|
|
1474
|
-
--mds-push-notification-background: linear-gradient( to right, rgb(
|
|
1481
|
+
--mds-push-notification-background: linear-gradient( to right, rgb(var(--magma-backdrop-color) / 0) 0%, rgb(var(--magma-backdrop-color) / 0.5) 20%, rgb(var(--magma-backdrop-color) / 0.85) 100% );
|
|
1475
1482
|
--mds-push-notification-items-gap: var(--mds-push-notification-gap);
|
|
1476
1483
|
--mds-push-notification-items-timing-function: var(--ease-in-out-quint);
|
|
1477
1484
|
--mds-push-notification-item-duration: var(--mds-push-notification-items-duration);
|
|
@@ -1585,7 +1592,7 @@
|
|
|
1585
1592
|
--mds-tab-item-hover-color: rgb(var(--magma-text-default));
|
|
1586
1593
|
--mds-tab-item-radius: min( calc(var(--mds-tab-tabs-radius) - var(--mds-tab-tabs-padding)), var(--magma-corner-cap) * var(--private-tab-item-height) );
|
|
1587
1594
|
--mds-tab-scroll-behavior: smooth;
|
|
1588
|
-
--mds-tab-tabs-overflow-shadow: 0 0 var(--mds-tab-tabs-overflow-shadow-size) --spacing(-50) rgb(
|
|
1595
|
+
--mds-tab-tabs-overflow-shadow: 0 0 var(--mds-tab-tabs-overflow-shadow-size) --spacing(-50) rgb(var(--magma-shadow-ink) / 0.375);
|
|
1589
1596
|
--mds-tab-transition-timing-function: var(--ease-out-expo);
|
|
1590
1597
|
--mds-tab-corner-shape: var(--magma-corner-shape);
|
|
1591
1598
|
--mds-tab-item-hover-shadow: none;
|
package/dist/css/transitions.css
CHANGED
package/dist/css/typography.css
CHANGED
|
@@ -1,44 +1,54 @@
|
|
|
1
1
|
{
|
|
2
2
|
"magma": {
|
|
3
|
+
"$description": "The semantic layer: the roles UI code paints with, which follow the mode, the named theme and the contrast preference.",
|
|
3
4
|
"pref": {
|
|
5
|
+
"$description": "The preferences the mds-pref components write on the html element: read them to adapt, never set them by hand.",
|
|
4
6
|
"$extensions": {
|
|
5
7
|
"it.maggioli.magma": {
|
|
6
8
|
"cssOnly": [
|
|
7
9
|
{
|
|
8
10
|
"css": "--magma-pref-mode",
|
|
9
|
-
"value": "light"
|
|
11
|
+
"value": "light",
|
|
12
|
+
"description": "The active mode preference, as the mds-pref components write it: read it, never set it."
|
|
10
13
|
},
|
|
11
14
|
{
|
|
12
15
|
"css": "--magma-pref-theme-scheme",
|
|
13
|
-
"value": "light"
|
|
16
|
+
"value": "light",
|
|
17
|
+
"description": "The active theme-scheme preference, as the mds-pref components write it: read it, never set it."
|
|
14
18
|
},
|
|
15
19
|
{
|
|
16
20
|
"css": "--magma-pref-theme",
|
|
17
|
-
"value": "default"
|
|
21
|
+
"value": "default",
|
|
22
|
+
"description": "The active theme preference, as the mds-pref components write it: read it, never set it."
|
|
18
23
|
},
|
|
19
24
|
{
|
|
20
25
|
"css": "--magma-pref-consumption",
|
|
21
|
-
"value": "high"
|
|
26
|
+
"value": "high",
|
|
27
|
+
"description": "The active consumption preference, as the mds-pref components write it: read it, never set it."
|
|
22
28
|
},
|
|
23
29
|
{
|
|
24
30
|
"css": "--magma-pref-animation",
|
|
25
|
-
"value": "no-preference"
|
|
31
|
+
"value": "no-preference",
|
|
32
|
+
"description": "The active animation preference, as the mds-pref components write it: read it, never set it."
|
|
26
33
|
},
|
|
27
34
|
{
|
|
28
35
|
"css": "--magma-pref-contrast",
|
|
29
|
-
"value": "no-preference"
|
|
36
|
+
"value": "no-preference",
|
|
37
|
+
"description": "The active contrast preference, as the mds-pref components write it: read it, never set it."
|
|
30
38
|
}
|
|
31
39
|
]
|
|
32
40
|
}
|
|
33
41
|
}
|
|
34
42
|
},
|
|
35
43
|
"backdrop": {
|
|
44
|
+
"$description": "The scrim behind modals and drawers: its colour, opacity, blur, entrance and stacking level.",
|
|
36
45
|
"animation-duration": {
|
|
37
46
|
"$type": "duration",
|
|
38
47
|
"$value": {
|
|
39
48
|
"value": 300,
|
|
40
49
|
"unit": "ms"
|
|
41
50
|
},
|
|
51
|
+
"$description": "How long the scrim takes to fade in.",
|
|
42
52
|
"$extensions": {
|
|
43
53
|
"it.maggioli.magma": {
|
|
44
54
|
"css": "--magma-backdrop-animation-duration",
|
|
@@ -49,6 +59,7 @@
|
|
|
49
59
|
"opacity": {
|
|
50
60
|
"$type": "number",
|
|
51
61
|
"$value": 0.1,
|
|
62
|
+
"$description": "How much the scrim darkens the page.",
|
|
52
63
|
"$extensions": {
|
|
53
64
|
"it.maggioli.magma": {
|
|
54
65
|
"css": "--magma-backdrop-opacity",
|
|
@@ -62,6 +73,7 @@
|
|
|
62
73
|
"value": 4,
|
|
63
74
|
"unit": "px"
|
|
64
75
|
},
|
|
76
|
+
"$description": "How much the scrim blurs the page behind it.",
|
|
65
77
|
"$extensions": {
|
|
66
78
|
"it.maggioli.magma": {
|
|
67
79
|
"css": "--magma-backdrop-blur",
|
|
@@ -80,6 +92,7 @@
|
|
|
80
92
|
],
|
|
81
93
|
"hex": "#000000"
|
|
82
94
|
},
|
|
95
|
+
"$description": "The colour of the scrim, black in both modes; the elevation shadows draw with it too.",
|
|
83
96
|
"$extensions": {
|
|
84
97
|
"it.maggioli.magma": {
|
|
85
98
|
"css": "--magma-backdrop-color",
|
|
@@ -90,6 +103,7 @@
|
|
|
90
103
|
"z-index": {
|
|
91
104
|
"$type": "number",
|
|
92
105
|
"$value": 4000,
|
|
106
|
+
"$description": "The stacking level of the scrim, between modals and dropdowns.",
|
|
93
107
|
"$extensions": {
|
|
94
108
|
"it.maggioli.magma": {
|
|
95
109
|
"css": "--magma-backdrop-z-index",
|
|
@@ -109,6 +123,7 @@
|
|
|
109
123
|
"hex": "#000000",
|
|
110
124
|
"alpha": 0.1
|
|
111
125
|
},
|
|
126
|
+
"$description": "The scrim as one colour, with its opacity.",
|
|
112
127
|
"$extensions": {
|
|
113
128
|
"it.maggioli.magma": {
|
|
114
129
|
"css": "--magma-backdrop",
|
|
@@ -119,12 +134,14 @@
|
|
|
119
134
|
}
|
|
120
135
|
},
|
|
121
136
|
"outline": {
|
|
137
|
+
"$description": "The focus ring, and the transparent ring of an element without focus: the focus effects move between the two.",
|
|
122
138
|
"animation-duration": {
|
|
123
139
|
"$type": "duration",
|
|
124
140
|
"$value": {
|
|
125
141
|
"value": 1.5,
|
|
126
142
|
"unit": "s"
|
|
127
143
|
},
|
|
144
|
+
"$description": "How long one pulse of the focus ring takes.",
|
|
128
145
|
"$extensions": {
|
|
129
146
|
"it.maggioli.magma": {
|
|
130
147
|
"css": "--magma-outline-animation-duration",
|
|
@@ -138,6 +155,7 @@
|
|
|
138
155
|
"value": 6,
|
|
139
156
|
"unit": "px"
|
|
140
157
|
},
|
|
158
|
+
"$description": "The gap of the ring without focus, wider than the focus one: the focus ring closes in from it, or pulses out to it.",
|
|
141
159
|
"$extensions": {
|
|
142
160
|
"it.maggioli.magma": {
|
|
143
161
|
"css": "--magma-outline-blur-offset",
|
|
@@ -151,6 +169,7 @@
|
|
|
151
169
|
"value": 2,
|
|
152
170
|
"unit": "px"
|
|
153
171
|
},
|
|
172
|
+
"$description": "The gap between the focus ring and the element.",
|
|
154
173
|
"$extensions": {
|
|
155
174
|
"it.maggioli.magma": {
|
|
156
175
|
"css": "--magma-outline-focus-offset",
|
|
@@ -170,6 +189,7 @@
|
|
|
170
189
|
"hex": "#000000",
|
|
171
190
|
"alpha": 0
|
|
172
191
|
},
|
|
192
|
+
"$description": "The colour of the ring without focus: transparent.",
|
|
173
193
|
"$extensions": {
|
|
174
194
|
"it.maggioli.magma": {
|
|
175
195
|
"css": "--magma-outline-blur-color",
|
|
@@ -180,6 +200,7 @@
|
|
|
180
200
|
"focus-color": {
|
|
181
201
|
"$type": "color",
|
|
182
202
|
"$value": "{palette.tone.neutral.05}",
|
|
203
|
+
"$description": "The colour of the focus ring.",
|
|
183
204
|
"$extensions": {
|
|
184
205
|
"it.maggioli.magma": {
|
|
185
206
|
"css": "--magma-outline-focus-color",
|
|
@@ -197,6 +218,7 @@
|
|
|
197
218
|
},
|
|
198
219
|
"style": "solid"
|
|
199
220
|
},
|
|
221
|
+
"$description": "The ring of an element without focus: transparent.",
|
|
200
222
|
"$extensions": {
|
|
201
223
|
"it.maggioli.magma": {
|
|
202
224
|
"css": "--magma-outline-blur",
|
|
@@ -214,6 +236,7 @@
|
|
|
214
236
|
},
|
|
215
237
|
"style": "solid"
|
|
216
238
|
},
|
|
239
|
+
"$description": "The focus ring: width, style and colour.",
|
|
217
240
|
"$extensions": {
|
|
218
241
|
"it.maggioli.magma": {
|
|
219
242
|
"css": "--magma-outline-focus",
|
|
@@ -223,9 +246,11 @@
|
|
|
223
246
|
}
|
|
224
247
|
},
|
|
225
248
|
"disabled": {
|
|
249
|
+
"$description": "How disabled components fade.",
|
|
226
250
|
"opacity": {
|
|
227
251
|
"$type": "number",
|
|
228
252
|
"$value": 0.5,
|
|
253
|
+
"$description": "The opacity of disabled components.",
|
|
229
254
|
"$extensions": {
|
|
230
255
|
"it.maggioli.magma": {
|
|
231
256
|
"css": "--magma-disabled-opacity",
|
|
@@ -235,9 +260,11 @@
|
|
|
235
260
|
}
|
|
236
261
|
},
|
|
237
262
|
"overlay": {
|
|
263
|
+
"$description": "The scrim of mds-modal: its colour and blur are the backdrop ones, its opacity is its own.",
|
|
238
264
|
"opacity": {
|
|
239
265
|
"$type": "number",
|
|
240
266
|
"$value": 0.5,
|
|
267
|
+
"$description": "How much the modal scrim darkens the page.",
|
|
241
268
|
"$extensions": {
|
|
242
269
|
"it.maggioli.magma": {
|
|
243
270
|
"css": "--magma-overlay-opacity",
|
|
@@ -248,6 +275,7 @@
|
|
|
248
275
|
"color": {
|
|
249
276
|
"$type": "color",
|
|
250
277
|
"$value": "{magma.backdrop.color}",
|
|
278
|
+
"$description": "The colour of the modal scrim: the backdrop colour.",
|
|
251
279
|
"$extensions": {
|
|
252
280
|
"it.maggioli.magma": {
|
|
253
281
|
"css": "--magma-overlay-color",
|
|
@@ -258,6 +286,7 @@
|
|
|
258
286
|
"blur": {
|
|
259
287
|
"$type": "dimension",
|
|
260
288
|
"$value": "{magma.backdrop.blur}",
|
|
289
|
+
"$description": "How much the modal scrim blurs the page: the backdrop blur.",
|
|
261
290
|
"$extensions": {
|
|
262
291
|
"it.maggioli.magma": {
|
|
263
292
|
"css": "--magma-overlay-blur",
|
|
@@ -277,6 +306,7 @@
|
|
|
277
306
|
"hex": "#000000",
|
|
278
307
|
"alpha": 0.5
|
|
279
308
|
},
|
|
309
|
+
"$description": "The scrim of mds-modal as one colour, with its opacity.",
|
|
280
310
|
"$extensions": {
|
|
281
311
|
"it.maggioli.magma": {
|
|
282
312
|
"css": "--magma-overlay",
|
|
@@ -287,6 +317,7 @@
|
|
|
287
317
|
}
|
|
288
318
|
},
|
|
289
319
|
"on": {
|
|
320
|
+
"$description": "Ink on the scrims.",
|
|
290
321
|
"backdrop": {
|
|
291
322
|
"$type": "color",
|
|
292
323
|
"$value": {
|
|
@@ -298,6 +329,7 @@
|
|
|
298
329
|
],
|
|
299
330
|
"hex": "#fcfcfc"
|
|
300
331
|
},
|
|
332
|
+
"$description": "Text and icons on the scrim, such as the close icon of a modal: light in both modes, as the scrim is black in both.",
|
|
301
333
|
"$extensions": {
|
|
302
334
|
"it.maggioli.magma": {
|
|
303
335
|
"css": "--magma-on-backdrop",
|
|
@@ -307,9 +339,11 @@
|
|
|
307
339
|
}
|
|
308
340
|
},
|
|
309
341
|
"selection": {
|
|
342
|
+
"$description": "The colours of selected text.",
|
|
310
343
|
"background": {
|
|
311
344
|
"$type": "color",
|
|
312
345
|
"$value": "{palette.label.sky.09}",
|
|
346
|
+
"$description": "The background of selected text.",
|
|
313
347
|
"$extensions": {
|
|
314
348
|
"it.maggioli.magma": {
|
|
315
349
|
"css": "--magma-selection-background",
|
|
@@ -320,6 +354,7 @@
|
|
|
320
354
|
"color": {
|
|
321
355
|
"$type": "color",
|
|
322
356
|
"$value": "{palette.label.sky.01}",
|
|
357
|
+
"$description": "The colour of selected text.",
|
|
323
358
|
"$extensions": {
|
|
324
359
|
"it.maggioli.magma": {
|
|
325
360
|
"css": "--magma-selection-color",
|
|
@@ -329,12 +364,14 @@
|
|
|
329
364
|
}
|
|
330
365
|
},
|
|
331
366
|
"corner": {
|
|
367
|
+
"$description": "The corner axis: the shape of the corners, and how much of its height a corner may take.",
|
|
332
368
|
"$extensions": {
|
|
333
369
|
"it.maggioli.magma": {
|
|
334
370
|
"cssOnly": [
|
|
335
371
|
{
|
|
336
372
|
"css": "--magma-corner-shape",
|
|
337
|
-
"value": "squircle"
|
|
373
|
+
"value": "squircle",
|
|
374
|
+
"description": "The shape of the corners: set it through data-corner-shape, which changes the radius scale with it."
|
|
338
375
|
}
|
|
339
376
|
]
|
|
340
377
|
}
|
|
@@ -342,6 +379,7 @@
|
|
|
342
379
|
"cap": {
|
|
343
380
|
"$type": "number",
|
|
344
381
|
"$value": 0.5,
|
|
382
|
+
"$description": "The part of its height a corner may take, for the controls whose radius is past half their height.",
|
|
345
383
|
"$extensions": {
|
|
346
384
|
"it.maggioli.magma": {
|
|
347
385
|
"css": "--magma-corner-cap",
|
|
@@ -351,9 +389,11 @@
|
|
|
351
389
|
}
|
|
352
390
|
},
|
|
353
391
|
"header": {
|
|
392
|
+
"$description": "The stacking level of the header.",
|
|
354
393
|
"z-index": {
|
|
355
394
|
"$type": "number",
|
|
356
395
|
"$value": 1000,
|
|
396
|
+
"$description": "The z-index of the header, on the stacking scale of the floating layers: slot your own layers between its steps.",
|
|
357
397
|
"$extensions": {
|
|
358
398
|
"it.maggioli.magma": {
|
|
359
399
|
"css": "--magma-header-z-index",
|
|
@@ -363,9 +403,11 @@
|
|
|
363
403
|
}
|
|
364
404
|
},
|
|
365
405
|
"notification": {
|
|
406
|
+
"$description": "The stacking level of notifications.",
|
|
366
407
|
"z-index": {
|
|
367
408
|
"$type": "number",
|
|
368
409
|
"$value": 2000,
|
|
410
|
+
"$description": "The z-index of notifications, on the stacking scale of the floating layers: slot your own layers between its steps.",
|
|
369
411
|
"$extensions": {
|
|
370
412
|
"it.maggioli.magma": {
|
|
371
413
|
"css": "--magma-notification-z-index",
|
|
@@ -375,9 +417,11 @@
|
|
|
375
417
|
}
|
|
376
418
|
},
|
|
377
419
|
"modal": {
|
|
420
|
+
"$description": "The stacking level of modals.",
|
|
378
421
|
"z-index": {
|
|
379
422
|
"$type": "number",
|
|
380
423
|
"$value": 3000,
|
|
424
|
+
"$description": "The z-index of modals, on the stacking scale of the floating layers: slot your own layers between its steps.",
|
|
381
425
|
"$extensions": {
|
|
382
426
|
"it.maggioli.magma": {
|
|
383
427
|
"css": "--magma-modal-z-index",
|
|
@@ -387,9 +431,11 @@
|
|
|
387
431
|
}
|
|
388
432
|
},
|
|
389
433
|
"dropdown": {
|
|
434
|
+
"$description": "The stacking level of dropdowns.",
|
|
390
435
|
"z-index": {
|
|
391
436
|
"$type": "number",
|
|
392
437
|
"$value": 5000,
|
|
438
|
+
"$description": "The z-index of dropdowns, on the stacking scale of the floating layers: slot your own layers between its steps.",
|
|
393
439
|
"$extensions": {
|
|
394
440
|
"it.maggioli.magma": {
|
|
395
441
|
"css": "--magma-dropdown-z-index",
|
|
@@ -399,9 +445,11 @@
|
|
|
399
445
|
}
|
|
400
446
|
},
|
|
401
447
|
"tooltip": {
|
|
448
|
+
"$description": "The stacking level of tooltips.",
|
|
402
449
|
"z-index": {
|
|
403
450
|
"$type": "number",
|
|
404
451
|
"$value": 6000,
|
|
452
|
+
"$description": "The z-index of tooltips, on the stacking scale of the floating layers: slot your own layers between its steps.",
|
|
405
453
|
"$extensions": {
|
|
406
454
|
"it.maggioli.magma": {
|
|
407
455
|
"css": "--magma-tooltip-z-index",
|
|
@@ -411,9 +459,11 @@
|
|
|
411
459
|
}
|
|
412
460
|
},
|
|
413
461
|
"theme": {
|
|
462
|
+
"$description": "The stacking level of the theme overlay.",
|
|
414
463
|
"overlay-z-index": {
|
|
415
464
|
"$type": "number",
|
|
416
465
|
"$value": 7000,
|
|
466
|
+
"$description": "The z-index of the theme overlay, on the stacking scale of the floating layers: slot your own layers between its steps.",
|
|
417
467
|
"$extensions": {
|
|
418
468
|
"it.maggioli.magma": {
|
|
419
469
|
"css": "--magma-theme-overlay-z-index",
|
|
@@ -423,9 +473,11 @@
|
|
|
423
473
|
}
|
|
424
474
|
},
|
|
425
475
|
"context": {
|
|
476
|
+
"$description": "The stacking level of context menus.",
|
|
426
477
|
"menu-z-index": {
|
|
427
478
|
"$type": "number",
|
|
428
479
|
"$value": 8000,
|
|
480
|
+
"$description": "The z-index of context menus, on the stacking scale of the floating layers: slot your own layers between its steps.",
|
|
429
481
|
"$extensions": {
|
|
430
482
|
"it.maggioli.magma": {
|
|
431
483
|
"css": "--magma-context-menu-z-index",
|
|
@@ -435,21 +487,25 @@
|
|
|
435
487
|
}
|
|
436
488
|
},
|
|
437
489
|
"view": {
|
|
490
|
+
"$description": "The view transitions between pages.",
|
|
438
491
|
"$extensions": {
|
|
439
492
|
"it.maggioli.magma": {
|
|
440
493
|
"cssOnly": [
|
|
441
494
|
{
|
|
442
495
|
"css": "--magma-view-transition-navigation",
|
|
443
|
-
"value": "auto"
|
|
496
|
+
"value": "auto",
|
|
497
|
+
"description": "Whether a navigation between pages animates as a view transition."
|
|
444
498
|
}
|
|
445
499
|
]
|
|
446
500
|
}
|
|
447
501
|
}
|
|
448
502
|
},
|
|
449
503
|
"radius": {
|
|
504
|
+
"$description": "The radius scale of the active corner shape: what components and UI code round corners with.",
|
|
450
505
|
"none": {
|
|
451
506
|
"$type": "dimension",
|
|
452
507
|
"$value": "{radius.none}",
|
|
508
|
+
"$description": "No rounding.",
|
|
453
509
|
"$extensions": {
|
|
454
510
|
"it.maggioli.magma": {
|
|
455
511
|
"css": "--magma-radius-none",
|
|
@@ -460,6 +516,7 @@
|
|
|
460
516
|
"3xs": {
|
|
461
517
|
"$type": "dimension",
|
|
462
518
|
"$value": "{radius.squircle-3xs}",
|
|
519
|
+
"$description": "The 3xs corner radius, on the scale of the active corner shape.",
|
|
463
520
|
"$extensions": {
|
|
464
521
|
"it.maggioli.magma": {
|
|
465
522
|
"css": "--magma-radius-3xs",
|
|
@@ -470,6 +527,7 @@
|
|
|
470
527
|
"2xs": {
|
|
471
528
|
"$type": "dimension",
|
|
472
529
|
"$value": "{radius.squircle-2xs}",
|
|
530
|
+
"$description": "The 2xs corner radius, on the scale of the active corner shape.",
|
|
473
531
|
"$extensions": {
|
|
474
532
|
"it.maggioli.magma": {
|
|
475
533
|
"css": "--magma-radius-2xs",
|
|
@@ -480,6 +538,7 @@
|
|
|
480
538
|
"xs": {
|
|
481
539
|
"$type": "dimension",
|
|
482
540
|
"$value": "{radius.squircle-xs}",
|
|
541
|
+
"$description": "The xs corner radius, on the scale of the active corner shape.",
|
|
483
542
|
"$extensions": {
|
|
484
543
|
"it.maggioli.magma": {
|
|
485
544
|
"css": "--magma-radius-xs",
|
|
@@ -490,6 +549,7 @@
|
|
|
490
549
|
"sm": {
|
|
491
550
|
"$type": "dimension",
|
|
492
551
|
"$value": "{radius.squircle-sm}",
|
|
552
|
+
"$description": "The sm corner radius, on the scale of the active corner shape.",
|
|
493
553
|
"$extensions": {
|
|
494
554
|
"it.maggioli.magma": {
|
|
495
555
|
"css": "--magma-radius-sm",
|
|
@@ -500,6 +560,7 @@
|
|
|
500
560
|
"md": {
|
|
501
561
|
"$type": "dimension",
|
|
502
562
|
"$value": "{radius.squircle-md}",
|
|
563
|
+
"$description": "The md corner radius, on the scale of the active corner shape.",
|
|
503
564
|
"$extensions": {
|
|
504
565
|
"it.maggioli.magma": {
|
|
505
566
|
"css": "--magma-radius-md",
|
|
@@ -510,6 +571,7 @@
|
|
|
510
571
|
"lg": {
|
|
511
572
|
"$type": "dimension",
|
|
512
573
|
"$value": "{radius.squircle-lg}",
|
|
574
|
+
"$description": "The lg corner radius, on the scale of the active corner shape.",
|
|
513
575
|
"$extensions": {
|
|
514
576
|
"it.maggioli.magma": {
|
|
515
577
|
"css": "--magma-radius-lg",
|
|
@@ -520,6 +582,7 @@
|
|
|
520
582
|
"xl": {
|
|
521
583
|
"$type": "dimension",
|
|
522
584
|
"$value": "{radius.squircle-xl}",
|
|
585
|
+
"$description": "The xl corner radius, on the scale of the active corner shape.",
|
|
523
586
|
"$extensions": {
|
|
524
587
|
"it.maggioli.magma": {
|
|
525
588
|
"css": "--magma-radius-xl",
|
|
@@ -530,6 +593,7 @@
|
|
|
530
593
|
"2xl": {
|
|
531
594
|
"$type": "dimension",
|
|
532
595
|
"$value": "{radius.squircle-2xl}",
|
|
596
|
+
"$description": "The 2xl corner radius, on the scale of the active corner shape.",
|
|
533
597
|
"$extensions": {
|
|
534
598
|
"it.maggioli.magma": {
|
|
535
599
|
"css": "--magma-radius-2xl",
|
|
@@ -540,6 +604,7 @@
|
|
|
540
604
|
"3xl": {
|
|
541
605
|
"$type": "dimension",
|
|
542
606
|
"$value": "{radius.squircle-3xl}",
|
|
607
|
+
"$description": "The 3xl corner radius, on the scale of the active corner shape.",
|
|
543
608
|
"$extensions": {
|
|
544
609
|
"it.maggioli.magma": {
|
|
545
610
|
"css": "--magma-radius-3xl",
|
|
@@ -550,6 +615,7 @@
|
|
|
550
615
|
"4xl": {
|
|
551
616
|
"$type": "dimension",
|
|
552
617
|
"$value": "{radius.squircle-4xl}",
|
|
618
|
+
"$description": "The 4xl corner radius, on the scale of the active corner shape.",
|
|
553
619
|
"$extensions": {
|
|
554
620
|
"it.maggioli.magma": {
|
|
555
621
|
"css": "--magma-radius-4xl",
|
|
@@ -560,6 +626,7 @@
|
|
|
560
626
|
"5xl": {
|
|
561
627
|
"$type": "dimension",
|
|
562
628
|
"$value": "{radius.squircle-5xl}",
|
|
629
|
+
"$description": "The 5xl corner radius, on the scale of the active corner shape.",
|
|
563
630
|
"$extensions": {
|
|
564
631
|
"it.maggioli.magma": {
|
|
565
632
|
"css": "--magma-radius-5xl",
|
|
@@ -570,6 +637,7 @@
|
|
|
570
637
|
"full": {
|
|
571
638
|
"$type": "dimension",
|
|
572
639
|
"$value": "{radius.full}",
|
|
640
|
+
"$description": "The pill, the same under every corner shape.",
|
|
573
641
|
"$extensions": {
|
|
574
642
|
"it.maggioli.magma": {
|
|
575
643
|
"css": "--magma-radius-full",
|
|
@@ -582,6 +650,7 @@
|
|
|
582
650
|
"depth": {
|
|
583
651
|
"$type": "number",
|
|
584
652
|
"$value": 1,
|
|
653
|
+
"$description": "The depth axis, from 0 to 1: how strong the elevation shadows are. data-theme-depth=\"flat\" sets it to 0.",
|
|
585
654
|
"$extensions": {
|
|
586
655
|
"it.maggioli.magma": {
|
|
587
656
|
"css": "--depth",
|
|
@@ -590,7 +659,9 @@
|
|
|
590
659
|
}
|
|
591
660
|
},
|
|
592
661
|
"mds": {
|
|
662
|
+
"$description": "Globals the components share.",
|
|
593
663
|
"elevation": {
|
|
664
|
+
"$description": "The shadows of the raised and overlay surfaces, scaled by the depth axis.",
|
|
594
665
|
"raised": {
|
|
595
666
|
"$type": "shadow",
|
|
596
667
|
"$value": [
|
|
@@ -651,6 +722,7 @@
|
|
|
651
722
|
}
|
|
652
723
|
}
|
|
653
724
|
],
|
|
725
|
+
"$description": "The shadow of a raised surface, such as a card.",
|
|
654
726
|
"$extensions": {
|
|
655
727
|
"it.maggioli.magma": {
|
|
656
728
|
"css": "--mds-elevation-raised",
|
|
@@ -719,6 +791,7 @@
|
|
|
719
791
|
}
|
|
720
792
|
}
|
|
721
793
|
],
|
|
794
|
+
"$description": "The shadow of an overlay surface, such as a dropdown or a popover.",
|
|
722
795
|
"$extensions": {
|
|
723
796
|
"it.maggioli.magma": {
|
|
724
797
|
"css": "--mds-elevation-overlay",
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/*
|
|
2
|
+
Tailwind `dark:` variant on the Magma mode.
|
|
3
|
+
GENERATED by scripts/dark-variant.ts from the design-tokens darkScheme - do NOT edit by hand.
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
@custom-variant dark {
|
|
7
|
+
&:where(:root:not(.pref-theme-scheme-light).pref-mode-dark, :root:not(.pref-theme-scheme-light).pref-mode-dark *, :root.pref-theme-scheme-dark, :root.pref-theme-scheme-dark *) {
|
|
8
|
+
@slot;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
@media (prefers-color-scheme: dark) {
|
|
12
|
+
&:where(:root:not(.pref-theme-scheme-light).pref-mode-system, :root:not(.pref-theme-scheme-light).pref-mode-system *, :root:not([data-magma-pref]), :root:not([data-magma-pref]) *) {
|
|
13
|
+
@slot;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
}
|
package/dist/tailwind/theme.css
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
/* @import "tailwindcss"; */
|
|
2
2
|
|
|
3
|
-
/*
|
|
3
|
+
/* the dark: variant on the Magma mode, not the OS only (#1100) */
|
|
4
|
+
@import './dark-mode.css';
|
|
5
|
+
|
|
4
6
|
@import '@maggioli-design-system/design-tokens/dist/css/tailwind-theme-color.css' layer(theme);
|
|
5
7
|
@import '@maggioli-design-system/design-tokens/dist/css/tailwind-theme-typography.css';
|
|
6
8
|
|
package/package.json
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@maggioli-design-system/styles",
|
|
3
|
-
"version": "17.
|
|
3
|
+
"version": "17.4.0",
|
|
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": {
|
|
7
|
-
"build": "npm run clean && npm run semantic && npm run corner && npm run properties && npm run editor.tokens && npm run copy && npm run hydrated && npm run dtcg && npm run consumption && npm run tailwind.build",
|
|
7
|
+
"build": "npm run clean && npm run semantic && npm run dark.variant && npm run corner && npm run properties && npm run editor.tokens && npm run copy && npm run hydrated && npm run dtcg && npm run consumption && npm run tailwind.build",
|
|
8
8
|
"clean": "tsx scripts/clean.ts",
|
|
9
9
|
"semantic": "tsx scripts/semantic.ts",
|
|
10
|
+
"dark.variant": "tsx scripts/dark-variant.ts",
|
|
10
11
|
"properties": "tsx scripts/properties.ts",
|
|
11
12
|
"corner": "tsx scripts/corner.ts",
|
|
12
13
|
"editor.tokens": "tsx scripts/editor-tokens.ts",
|
|
@@ -57,13 +58,13 @@
|
|
|
57
58
|
"role": "Software Engineer"
|
|
58
59
|
}
|
|
59
60
|
],
|
|
60
|
-
"license": "
|
|
61
|
+
"license": "MIT",
|
|
61
62
|
"dependencies": {
|
|
62
63
|
"@fontsource/karla": "5.3.0",
|
|
63
64
|
"@fontsource/merriweather": "5.3.0",
|
|
64
65
|
"@fontsource/roboto": "5.3.0",
|
|
65
66
|
"@fontsource/roboto-mono": "5.3.0",
|
|
66
|
-
"@maggioli-design-system/design-tokens": "^15.
|
|
67
|
+
"@maggioli-design-system/design-tokens": "^15.3.0",
|
|
67
68
|
"normalize.css": "8.0.1"
|
|
68
69
|
},
|
|
69
70
|
"devDependencies": {
|