@maggioli-design-system/styles 17.2.0 → 17.3.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 +21 -0
- package/README.md +10 -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/globals.css +58 -368
- package/dist/css/hydrated.css +4 -0
- package/dist/css/semantic.css +3 -1
- package/dist/css/tailwind-theme-color.css +2 -2
- package/dist/css/tailwind-theme-typography.css +37 -3
- package/dist/css/tokens.editor.css +82 -118
- package/dist/css/transitions.css +3 -3
- package/dist/css/typography.css +2 -2
- package/dist/tailwind/consumption.json +115 -51
- package/package.json +7 -7
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/*
|
|
2
|
-
@magma-design-system/design-tokens v15.2.
|
|
2
|
+
@magma-design-system/design-tokens v15.2.2
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at
|
|
5
|
+
Generated at Wed, 21 Oct 2026 16:52:02 GMT
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
@theme {
|
|
@@ -113,6 +113,40 @@ Generated at Thu, 15 Oct 2026 16:07:06 GMT
|
|
|
113
113
|
--container-6xl: 1152px;
|
|
114
114
|
--container-7xl: 1280px;
|
|
115
115
|
|
|
116
|
+
--width-xs: var(--container-xs);
|
|
117
|
+
--min-width-xs: var(--container-xs);
|
|
118
|
+
--max-width-xs: var(--container-xs);
|
|
119
|
+
--flex-basis-xs: var(--container-xs);
|
|
120
|
+
--width-sm: var(--container-sm);
|
|
121
|
+
--min-width-sm: var(--container-sm);
|
|
122
|
+
--max-width-sm: var(--container-sm);
|
|
123
|
+
--flex-basis-sm: var(--container-sm);
|
|
124
|
+
--width-md: var(--container-md);
|
|
125
|
+
--min-width-md: var(--container-md);
|
|
126
|
+
--max-width-md: var(--container-md);
|
|
127
|
+
--flex-basis-md: var(--container-md);
|
|
128
|
+
--width-lg: var(--container-lg);
|
|
129
|
+
--min-width-lg: var(--container-lg);
|
|
130
|
+
--max-width-lg: var(--container-lg);
|
|
131
|
+
--flex-basis-lg: var(--container-lg);
|
|
132
|
+
--width-xl: var(--container-xl);
|
|
133
|
+
--min-width-xl: var(--container-xl);
|
|
134
|
+
--max-width-xl: var(--container-xl);
|
|
135
|
+
--flex-basis-xl: var(--container-xl);
|
|
136
|
+
--width-2xl: var(--container-2xl);
|
|
137
|
+
--min-width-2xl: var(--container-2xl);
|
|
138
|
+
--max-width-2xl: var(--container-2xl);
|
|
139
|
+
--flex-basis-2xl: var(--container-2xl);
|
|
140
|
+
--width-3xl: var(--container-3xl);
|
|
141
|
+
--min-width-3xl: var(--container-3xl);
|
|
142
|
+
--max-width-3xl: var(--container-3xl);
|
|
143
|
+
--flex-basis-3xl: var(--container-3xl);
|
|
144
|
+
--width-4xl: var(--container-4xl);
|
|
145
|
+
--min-width-4xl: var(--container-4xl);
|
|
146
|
+
--max-width-4xl: var(--container-4xl);
|
|
147
|
+
--flex-basis-4xl: var(--container-4xl);
|
|
148
|
+
--max-width-none: none;
|
|
149
|
+
|
|
116
150
|
--breakpoint-mobile: 480px;
|
|
117
151
|
--breakpoint-tablet: 768px;
|
|
118
152
|
--breakpoint-desktop: 1024px;
|
|
@@ -238,7 +272,7 @@ Generated at Thu, 15 Oct 2026 16:07:06 GMT
|
|
|
238
272
|
}
|
|
239
273
|
|
|
240
274
|
@utility transition-cosmetic {
|
|
241
|
-
transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;
|
|
275
|
+
transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, rotate, scale, transform, translate, width;
|
|
242
276
|
transition-timing-function: var(--default-transition-timing-function); /* default cubic-bezier(0.4, 0, 0.2, 1) */
|
|
243
277
|
transition-duration: var(--default-transition-duration); /* default 150ms */
|
|
244
278
|
}
|
|
@@ -240,7 +240,7 @@
|
|
|
240
240
|
--shadow-ring-strong-4: 0 0 0 4px rgb(var(--tone-neutral-01) / 0.6);
|
|
241
241
|
|
|
242
242
|
/* motion */
|
|
243
|
-
--transition-property-cosmetic: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;
|
|
243
|
+
--transition-property-cosmetic: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, rotate, scale, transform, translate, width;
|
|
244
244
|
--transition-property-size: height, margin, padding, width;
|
|
245
245
|
|
|
246
246
|
/* palette */
|
|
@@ -840,9 +840,9 @@
|
|
|
840
840
|
/* component: mds-accordion */
|
|
841
841
|
--mds-accordion-color: rgb(var(--magma-text-default));
|
|
842
842
|
--mds-accordion-border-color: rgb(var(--magma-border-default));
|
|
843
|
-
--mds-accordion-border-width:
|
|
843
|
+
--mds-accordion-border-width: --spacing(50);
|
|
844
844
|
--mds-accordion-description-color: rgb(var(--magma-text-default));
|
|
845
|
-
--mds-accordion-duration:
|
|
845
|
+
--mds-accordion-duration: var(--duration-300);
|
|
846
846
|
--mds-accordion-padding-selected: --spacing(400) 0 --spacing(800) 0;
|
|
847
847
|
--mds-accordion-padding-unselected: --spacing(400) 0;
|
|
848
848
|
|
|
@@ -860,7 +860,7 @@
|
|
|
860
860
|
--mds-accordion-timer-progress-bar-color: rgb(var(--magma-text-muted));
|
|
861
861
|
--mds-accordion-timer-progress-bar-background: rgb(var(--magma-wash-strong));
|
|
862
862
|
--mds-accordion-timer-progress-bar-thickness: --spacing(100);
|
|
863
|
-
--mds-accordion-timer-duration:
|
|
863
|
+
--mds-accordion-timer-duration: var(--duration-500);
|
|
864
864
|
|
|
865
865
|
/* component: mds-accordion-timer-item */
|
|
866
866
|
--mds-accordion-timer-item-color: rgb(5 5 5);
|
|
@@ -908,7 +908,7 @@
|
|
|
908
908
|
--mds-badge-border-color: rgb(47 182 243);
|
|
909
909
|
--mds-badge-border-width: 1px;
|
|
910
910
|
--mds-badge-color: rgb(255 255 255);
|
|
911
|
-
--mds-badge-radius:
|
|
911
|
+
--mds-badge-radius: 1000px;
|
|
912
912
|
--mds-badge-transition-duration: var(--duration-200);
|
|
913
913
|
|
|
914
914
|
/* component: mds-banner */
|
|
@@ -921,7 +921,7 @@
|
|
|
921
921
|
--mds-banner-icon-color: rgb(7 76 204);
|
|
922
922
|
--mds-banner-radius: 40px;
|
|
923
923
|
--mds-banner-transition-duration: 300ms;
|
|
924
|
-
--mds-banner-shadow:
|
|
924
|
+
--mds-banner-shadow: none;
|
|
925
925
|
--mds-banner-transition-timing-function: var(--ease-in-out-expo, cubic-bezier(1, 0, 0, 1));
|
|
926
926
|
|
|
927
927
|
/* component: mds-bibliography */
|
|
@@ -931,13 +931,14 @@
|
|
|
931
931
|
|
|
932
932
|
/* component: mds-breadcrumb */
|
|
933
933
|
--mds-breadcrumb-button-background-disabled: transparent;
|
|
934
|
-
--mds-breadcrumb-button-color-current: rgb(5 5 5);
|
|
935
|
-
--mds-breadcrumb-current-button-color: rgb(119 119 119);
|
|
936
934
|
--mds-breadcrumb-arrow-depth-color: rgb(var(--magma-text-subtle));
|
|
937
935
|
--mds-breadcrumb-button-background-hover: rgb(var(--magma-wash-soft));
|
|
936
|
+
--mds-breadcrumb-button-background-selected: rgb(var(--magma-wash-base));
|
|
938
937
|
--mds-breadcrumb-button-background: transparent;
|
|
939
938
|
--mds-breadcrumb-button-color-hover: rgb(var(--magma-text-default));
|
|
939
|
+
--mds-breadcrumb-button-color-selected: var( --mds-breadcrumb-button-color-current, var(--mds-breadcrumb-current-button-color, rgb(var(--magma-text-default))) );
|
|
940
940
|
--mds-breadcrumb-button-color: rgb(var(--magma-text-default));
|
|
941
|
+
--mds-button-background: var(--mds-breadcrumb-button-background-disabled);
|
|
941
942
|
|
|
942
943
|
/* component: mds-breadcrumb-item */
|
|
943
944
|
--mds-breadcrumb-item-arrow-depth-color: rgb(99 99 99);
|
|
@@ -951,7 +952,6 @@
|
|
|
951
952
|
--mds-breadcrumb-item-button-border-color-rgb-selected: var(--magma-wash-base);
|
|
952
953
|
--mds-breadcrumb-item-button-border-color-rgb-hover: var(--magma-wash-soft);
|
|
953
954
|
--mds-breadcrumb-item-button-border-color-rgb: var( --mds-breadcrumb-item-button-border-color-rgb-hover );
|
|
954
|
-
--mds-button-background: var(--mds-breadcrumb-item-button-background);
|
|
955
955
|
--mds-button-border-color-rgb: var(--mds-breadcrumb-item-button-border-color-rgb);
|
|
956
956
|
--mds-button-color: var(--mds-breadcrumb-item-button-color);
|
|
957
957
|
--mds-button-radius: var(--mds-breadcrumb-item-button-border-radius);
|
|
@@ -959,8 +959,6 @@
|
|
|
959
959
|
/* component: mds-button */
|
|
960
960
|
--mds-button-await-duration: 0.725s;
|
|
961
961
|
--mds-button-border-default-opacity: 0;
|
|
962
|
-
--mds-button-border-high-contrast-hover-width: 3px;
|
|
963
|
-
--mds-button-border-high-contrast-width: 2px;
|
|
964
962
|
--mds-button-border-hover-opacity: 0.75;
|
|
965
963
|
--mds-button-border-opacity: 0;
|
|
966
964
|
--mds-button-border-tone-outline-hover-width: 3px;
|
|
@@ -968,6 +966,7 @@
|
|
|
968
966
|
--mds-button-border-tone-weak-hover-width: 2px;
|
|
969
967
|
--mds-button-border-width: 2px;
|
|
970
968
|
--mds-button-gap: 8px;
|
|
969
|
+
--mds-button-label-transform: uppercase;
|
|
971
970
|
--mds-button-line-clamp: 1;
|
|
972
971
|
--mds-spinner-duration: var(--mds-button-await-duration);
|
|
973
972
|
--mds-button-border-hover-width: --spacing(50);
|
|
@@ -976,66 +975,27 @@
|
|
|
976
975
|
--mds-text-line-clamp: var(--mds-button-line-clamp);
|
|
977
976
|
|
|
978
977
|
/* component: mds-button-dropdown */
|
|
979
|
-
--mds-button-dropdown-radius:
|
|
980
|
-
--mds-button-dropdown-window-radius:
|
|
978
|
+
--mds-button-dropdown-radius: 40px;
|
|
979
|
+
--mds-button-dropdown-window-radius: 40px;
|
|
981
980
|
|
|
982
981
|
/* component: mds-calendar */
|
|
983
982
|
--mds-calendar-background: rgb(248 248 248);
|
|
984
|
-
--mds-calendar-border-radius:
|
|
985
|
-
--mds-calendar-day-number-color: rgb(5 5 5);
|
|
983
|
+
--mds-calendar-border-radius: 28px;
|
|
986
984
|
--mds-calendar-max-width: 480px;
|
|
987
985
|
--mds-calendar-padding: 16px;
|
|
988
986
|
--mds-calendar-select-month-or-year-height: 36px;
|
|
989
987
|
--mds-calendar-select-month-or-year-width: 224px;
|
|
988
|
+
--mds-calendar-day-number-color: rgb(var(--magma-text-default));
|
|
990
989
|
--mds-calendar-cell-gap: --spacing(50);
|
|
991
990
|
--mds-calendar-cell-other-month-visibility: visible;
|
|
992
991
|
|
|
993
|
-
/* component: mds-calendar-cell */
|
|
994
|
-
--mds-calendar-cell-background: transparent;
|
|
995
|
-
--mds-calendar-cell-boundaries-background: transparent;
|
|
996
|
-
--mds-calendar-cell-boundaries-color: rgb(5 5 5);
|
|
997
|
-
--mds-calendar-cell-boundaries-padding: 4px;
|
|
998
|
-
--mds-calendar-cell-color: rgb(5 5 5);
|
|
999
|
-
--mds-calendar-cell-disabled-background: transparent;
|
|
1000
|
-
--mds-calendar-cell-disabled-color: rgb(119 119 119);
|
|
1001
|
-
--mds-calendar-cell-other-month-background: transparent;
|
|
1002
|
-
--mds-calendar-cell-other-month-color: rgb(119 119 119);
|
|
1003
|
-
--mds-calendar-cell-preselection-current-month-background: rgb(204 212 226);
|
|
1004
|
-
--mds-calendar-cell-preselection-current-month-boundaries-background: rgb( 236 237 240 );
|
|
1005
|
-
--mds-calendar-cell-preselection-current-month-boundaries-color: rgb(119 119 119);
|
|
1006
|
-
--mds-calendar-cell-preselection-current-month-color: rgb(119 119 119);
|
|
1007
|
-
--mds-calendar-cell-preselection-other-month-background: rgb(220 224 231);
|
|
1008
|
-
--mds-calendar-cell-preselection-other-month-boundaries-background: rgb(248 248 248);
|
|
1009
|
-
--mds-calendar-cell-preselection-other-month-boundaries-color: rgb(119 119 119);
|
|
1010
|
-
--mds-calendar-cell-preselection-other-month-color: rgb(119 119 119);
|
|
1011
|
-
--mds-calendar-cell-preselection-today-background: rgb(220 224 231);
|
|
1012
|
-
--mds-calendar-cell-preselection-today-color: rgb(7 76 204);
|
|
1013
|
-
--mds-calendar-cell-selection-boundaries-border-radius: 200px;
|
|
1014
|
-
--mds-calendar-cell-selection-current-month-background: rgb(36 103 231);
|
|
1015
|
-
--mds-calendar-cell-selection-current-month-boundaries-background: rgb(248 248 248);
|
|
1016
|
-
--mds-calendar-cell-selection-current-month-boundaries-color: rgb(73 73 73);
|
|
1017
|
-
--mds-calendar-cell-selection-current-month-color: rgb(255 255 255);
|
|
1018
|
-
--mds-calendar-cell-selection-current-month-weekend-background: rgb(7 76 204);
|
|
1019
|
-
--mds-calendar-cell-selection-current-month-weekend-boundaries-background: rgb( 7 76 204 );
|
|
1020
|
-
--mds-calendar-cell-selection-current-month-weekend-boundaries-color: rgb(73 73 73);
|
|
1021
|
-
--mds-calendar-cell-selection-current-month-weekend-color: rgb(148 172 218);
|
|
1022
|
-
--mds-calendar-cell-selection-other-month-background: rgb(204 212 226);
|
|
1023
|
-
--mds-calendar-cell-selection-other-month-boundaries-background: rgb(236 237 240);
|
|
1024
|
-
--mds-calendar-cell-selection-other-month-boundaries-color: rgb(119 119 119);
|
|
1025
|
-
--mds-calendar-cell-selection-other-month-color: rgb(99 99 99);
|
|
1026
|
-
--mds-calendar-cell-selection-week-boundaries-border-radius: 200px;
|
|
1027
|
-
--mds-calendar-cell-size: 48px;
|
|
1028
|
-
--mds-calendar-cell-weekend-background: transparent;
|
|
1029
|
-
--mds-calendar-cell-weekend-color: rgb(99 99 99);
|
|
1030
|
-
--mds-calendar-cell-inner-background: var(--mds-calendar-cell-preselection-today-background);
|
|
1031
|
-
|
|
1032
992
|
/* component: mds-card */
|
|
1033
993
|
--mds-card-gap: 0;
|
|
1034
994
|
--mds-card-padding: 0;
|
|
1035
995
|
--mds-card-background: rgb(var(--magma-surface-raised));
|
|
1036
996
|
|
|
1037
997
|
/* component: mds-chip */
|
|
1038
|
-
--mds-chip-background: rgb(
|
|
998
|
+
--mds-chip-background: rgb(255 255 255);
|
|
1039
999
|
--mds-chip-border: transparent;
|
|
1040
1000
|
--mds-chip-color: rgb(73 73 73);
|
|
1041
1001
|
--mds-chip-icon-background: rgb(7 76 204);
|
|
@@ -1044,7 +1004,7 @@
|
|
|
1044
1004
|
--mds-chip-color-selected: rgb(var(--magma-text-default));
|
|
1045
1005
|
--mds-chip-icon-background-selected: rgb(var(--magma-accent-emphasis-hover));
|
|
1046
1006
|
--mds-chip-icon-color-selected: rgb(var(--magma-text-on-emphasis));
|
|
1047
|
-
--mds-chip-background-selected: rgb(var(--magma-
|
|
1007
|
+
--mds-chip-background-selected: rgb(var(--magma-surface-overlay));
|
|
1048
1008
|
--mds-chip-border-selected: transparent;
|
|
1049
1009
|
--mds-chip-shadow: var(--shadow-sm-sharp);
|
|
1050
1010
|
--mds-chip-shadow-selected: var(--shadow-sm-sharp);
|
|
@@ -1058,16 +1018,16 @@
|
|
|
1058
1018
|
|
|
1059
1019
|
/* component: mds-dropdown */
|
|
1060
1020
|
--mds-dropdown-arrow-background: rgb(255 255 255);
|
|
1061
|
-
--mds-dropdown-backdrop-duration:
|
|
1021
|
+
--mds-dropdown-backdrop-duration: 300ms;
|
|
1062
1022
|
--mds-dropdown-backdrop-z-index: 4000;
|
|
1063
1023
|
--mds-dropdown-background: rgb(255 255 255);
|
|
1064
1024
|
--mds-dropdown-drop-shadow-color-rgb: rgb(5 5 5);
|
|
1065
|
-
--mds-dropdown-duration:
|
|
1066
|
-
--mds-dropdown-mouseover-delay:
|
|
1025
|
+
--mds-dropdown-duration: 500ms;
|
|
1026
|
+
--mds-dropdown-mouseover-delay: 500ms;
|
|
1067
1027
|
--mds-dropdown-transform-from: scale(0.9) translateY(-3%);
|
|
1068
1028
|
--mds-dropdown-transform-to: scale(1) translate(0, 0);
|
|
1069
1029
|
--mds-dropdown-z-index: 5000;
|
|
1070
|
-
--mds-dropdown-drop-shadow: drop-shadow(0 0
|
|
1030
|
+
--mds-dropdown-drop-shadow: drop-shadow(0 0 --spacing(100) rgb(var(--magma-text-default) / 0.075)) drop-shadow(0 0 --spacing(100) rgb(var(--magma-text-default) / 0.45)) drop-shadow(0 0 --spacing(100) rgb(var(--magma-text-default) / 0.45));
|
|
1071
1031
|
--mds-dropdown-ease: var(--ease-out-expo);
|
|
1072
1032
|
|
|
1073
1033
|
/* component: mds-emoji */
|
|
@@ -1108,7 +1068,7 @@
|
|
|
1108
1068
|
--mds-entity-detail-color: rgb(73 73 73);
|
|
1109
1069
|
--mds-entity-icon-background: rgb(216 222 254);
|
|
1110
1070
|
--mds-entity-icon-color: rgb(63 94 248);
|
|
1111
|
-
--mds-entity-icon-radius:
|
|
1071
|
+
--mds-entity-icon-radius: 20px;
|
|
1112
1072
|
|
|
1113
1073
|
/* component: mds-file */
|
|
1114
1074
|
--mds-file-preview-icon-color: rgb(var(--label-amaranth-04));
|
|
@@ -1145,8 +1105,6 @@
|
|
|
1145
1105
|
--mds-header-backdrop-blur-strength: 2px;
|
|
1146
1106
|
--mds-header-backdrop-height: 64px;
|
|
1147
1107
|
--mds-header-backdrop-show: true;
|
|
1148
|
-
--mds-header-color: rgb(5 5 5);
|
|
1149
|
-
--mds-header-icon-color: rgb(5 5 5);
|
|
1150
1108
|
--mds-header-inline-margin: 24px;
|
|
1151
1109
|
--mds-header-inline-margin-mobile: 16px;
|
|
1152
1110
|
--mds-header-modal-icon-color: rgb(255 255 255);
|
|
@@ -1159,7 +1117,7 @@
|
|
|
1159
1117
|
|
|
1160
1118
|
/* component: mds-header-bar */
|
|
1161
1119
|
--mds-header-bar-hamburger-color: rgb(73 73 73);
|
|
1162
|
-
--mds-header-bar-transition-duration:
|
|
1120
|
+
--mds-header-bar-transition-duration: var(--duration-500);
|
|
1163
1121
|
|
|
1164
1122
|
/* component: mds-help */
|
|
1165
1123
|
--mds-help-tooltip-delay: 0.25s;
|
|
@@ -1207,13 +1165,13 @@
|
|
|
1207
1165
|
--mds-input-variant-color-rgb: rgb(0 0 0);
|
|
1208
1166
|
--mds-input-ring: var(--shadow-ring-strong-2);
|
|
1209
1167
|
--mds-input-tip-background: rgb(var(--magma-accent-ai-fg));
|
|
1210
|
-
--mds-input-shadow: 0 1px
|
|
1168
|
+
--mds-input-shadow: 0 1px --spacing(75) 0 rgb(var(--mds-input-variant-color-rgb) / 0.1), 0 1px --spacing(50) 0 rgb(var(--mds-input-variant-color-rgb) / 0.06);
|
|
1211
1169
|
--mds-input-tip-horizontal-offset-focused: --spacing(100);
|
|
1212
1170
|
--mds-input-tip-horizontal-offset: --spacing(100);
|
|
1213
1171
|
--mds-input-tip-vertical-offset: --spacing(100);
|
|
1214
1172
|
--mds-input-border-radius: min( var(--magma-radius-xl), var(--magma-corner-cap) * var(--private-input-height) );
|
|
1215
1173
|
--mds-input-transition-duration: var(--duration-300);
|
|
1216
|
-
--mds-input-controls-border:
|
|
1174
|
+
--mds-input-controls-border: --spacing(50) solid rgb(var(--magma-border-muted));
|
|
1217
1175
|
--mds-input-controls-color: rgb(var(--magma-text-muted));
|
|
1218
1176
|
|
|
1219
1177
|
/* component: mds-input-date */
|
|
@@ -1221,10 +1179,9 @@
|
|
|
1221
1179
|
--mds-input-date-field-background-empty: rgb(255 232 230);
|
|
1222
1180
|
--mds-input-date-field-color-empty: rgb(89 0 0);
|
|
1223
1181
|
--mds-input-date-icon-color: rgb(36 103 231);
|
|
1224
|
-
--mds-input-date-icon-color-rgb: rgb(0 0 0);
|
|
1225
1182
|
--mds-input-date-variant-color-rgb: rgb(0 0 0);
|
|
1226
1183
|
--mds-input-date-ring: var(--shadow-ring-strong-2);
|
|
1227
|
-
--mds-input-date-shadow: 0 1px
|
|
1184
|
+
--mds-input-date-shadow: 0 1px --spacing(75) 0 rgb(var(--mds-input-date-variant-color-rgb) / 0.1), 0 1px --spacing(50) 0 rgb(var(--mds-input-date-variant-color-rgb) / 0.06);
|
|
1228
1185
|
--mds-input-date-transition-duration: var(--duration-300);
|
|
1229
1186
|
|
|
1230
1187
|
/* component: mds-input-date-range */
|
|
@@ -1235,7 +1192,7 @@
|
|
|
1235
1192
|
--mds-input-date-range-icon-color: rgb(36 103 231);
|
|
1236
1193
|
--mds-input-date-range-variant-color-rgb: rgb(0 0 0);
|
|
1237
1194
|
--mds-input-date-range-ring: var(--shadow-ring-strong-2);
|
|
1238
|
-
--mds-input-date-range-shadow: 0 1px
|
|
1195
|
+
--mds-input-date-range-shadow: 0 1px --spacing(75) 0 rgb(var(--mds-input-date-range-variant-color-rgb) / 0.1), 0 1px --spacing(50) 0 rgb(var(--mds-input-date-range-variant-color-rgb) / 0.06);
|
|
1239
1196
|
--mds-input-date-range-transition-duration: var(--duration-300);
|
|
1240
1197
|
|
|
1241
1198
|
/* component: mds-input-date-range-preselection */
|
|
@@ -1277,7 +1234,7 @@
|
|
|
1277
1234
|
--mds-input-select-arrow-icon-hover-color: rgb(7 76 204);
|
|
1278
1235
|
--mds-input-select-variant-color-rgb: rgb(0 0 0);
|
|
1279
1236
|
--mds-input-select-ring: var(--shadow-ring-strong-2);
|
|
1280
|
-
--mds-input-select-shadow: 0 1px
|
|
1237
|
+
--mds-input-select-shadow: 0 1px --spacing(75) 0 rgb(var(--mds-input-select-variant-color-rgb) / 0.1), 0 1px --spacing(50) 0 rgb(var(--mds-input-select-variant-color-rgb) / 0.06);
|
|
1281
1238
|
--mds-input-select-transition-duration: var(--duration-300);
|
|
1282
1239
|
--mds-input-select-icon-transition-duration: var(--duration-200);
|
|
1283
1240
|
|
|
@@ -1325,12 +1282,12 @@
|
|
|
1325
1282
|
--mds-input-upload-drag-area-background-color: rgb(255 255 255);
|
|
1326
1283
|
--mds-input-upload-drag-area-background-color-on-drag: rgb(237 237 237);
|
|
1327
1284
|
--mds-input-upload-min-cols: 3;
|
|
1328
|
-
--mds-input-upload-drag-area-border-on-drag:
|
|
1329
|
-
--mds-input-upload-drag-area-border:
|
|
1285
|
+
--mds-input-upload-drag-area-border-on-drag: --spacing(75) dashed rgb(var(--magma-border-strong));
|
|
1286
|
+
--mds-input-upload-drag-area-border: --spacing(75) dashed rgb(var(--magma-border-default));
|
|
1330
1287
|
|
|
1331
1288
|
/* component: mds-keyboard */
|
|
1332
|
-
--mds-keyboard-background: rgb(
|
|
1333
|
-
--mds-keyboard-background-default: rgb(
|
|
1289
|
+
--mds-keyboard-background: rgb(208 208 208);
|
|
1290
|
+
--mds-keyboard-background-default: rgb(208 208 208);
|
|
1334
1291
|
--mds-keyboard-background-fail: rgb(255 214 211);
|
|
1335
1292
|
--mds-keyboard-background-pass: rgb(191 233 205);
|
|
1336
1293
|
--mds-keyboard-color: rgb(99 99 99);
|
|
@@ -1341,9 +1298,9 @@
|
|
|
1341
1298
|
--mds-keyboard-illumination-light-opacity: 0.075;
|
|
1342
1299
|
--mds-keyboard-illumination-light-size: 1px;
|
|
1343
1300
|
--mds-keyboard-padding: 8px;
|
|
1344
|
-
--mds-keyboard-spinner-duration:
|
|
1345
|
-
--mds-keyboard-illumination-shadow: 0 0
|
|
1346
|
-
--mds-keyboard-key-background: rgb(var(--
|
|
1301
|
+
--mds-keyboard-spinner-duration: 1000ms;
|
|
1302
|
+
--mds-keyboard-illumination-shadow: 0 0 --spacing(75) 0 rgb(255 255 255 / 0.5);
|
|
1303
|
+
--mds-keyboard-key-background: rgb(var(--magma-wash-strong));
|
|
1347
1304
|
--mds-keyboard-key-illumination-dark-opacity: 0.5;
|
|
1348
1305
|
--mds-keyboard-key-illumination-light-opacity: 0.15;
|
|
1349
1306
|
--mds-keyboard-key-illumination-shadow: 0 0 1px 0 rgb(255 255 255 / 0.5);
|
|
@@ -1383,6 +1340,19 @@
|
|
|
1383
1340
|
--mds-text-selection-background: var(--mds-label-selection-background);
|
|
1384
1341
|
--mds-text-selection-color: var(--mds-label-selection-color);
|
|
1385
1342
|
|
|
1343
|
+
/* component: mds-link */
|
|
1344
|
+
--private-link-band: 0px;
|
|
1345
|
+
--private-link-fill: 0px;
|
|
1346
|
+
--private-link-ink: 100%;
|
|
1347
|
+
--mds-link-underline-thickness: --spacing(50);
|
|
1348
|
+
--mds-link-underline-color: color-mix(in srgb, currentcolor 30%, transparent);
|
|
1349
|
+
--mds-link-background-hover: color-mix(in srgb, currentcolor 12%, transparent);
|
|
1350
|
+
--mds-link-color: rgb(var(--magma-accent-fg));
|
|
1351
|
+
--mds-link-icon-gap: --spacing(100);
|
|
1352
|
+
--mds-link-icon-size: --spacing(400);
|
|
1353
|
+
--mds-link-transition-duration: var(--duration-500);
|
|
1354
|
+
--mds-link-underline-offset: --spacing(100);
|
|
1355
|
+
|
|
1386
1356
|
/* component: mds-list-item */
|
|
1387
1357
|
--mds-list-item-icon-margin: 0 8px 0 0;
|
|
1388
1358
|
|
|
@@ -1405,7 +1375,7 @@
|
|
|
1405
1375
|
--mds-modal-window-height: auto;
|
|
1406
1376
|
--mds-modal-window-max-height: calc(100dvh - calc(var(--mds-modal-window-distance) * 2));
|
|
1407
1377
|
--mds-modal-window-shadow: var(--shadow-ring-strong-2), var(--shadow-2xl);
|
|
1408
|
-
--mds-modal-transition-timing-
|
|
1378
|
+
--mds-modal-transition-timing-function: var( --mds-modal-transition-timing-funciton, var(--ease-in-out-quint) );
|
|
1409
1379
|
|
|
1410
1380
|
/* component: mds-note */
|
|
1411
1381
|
--mds-note-background: rgb(253 236 186);
|
|
@@ -1441,16 +1411,6 @@
|
|
|
1441
1411
|
--mds-paginator-transition-duration: var(--duration-200);
|
|
1442
1412
|
|
|
1443
1413
|
/* component: mds-paginator-item */
|
|
1444
|
-
--mds-paginator-item-background: transparent;
|
|
1445
|
-
--mds-paginator-item-background-disabled: rgb(225 225 225);
|
|
1446
|
-
--mds-paginator-item-background-selected: rgb(7 76 204);
|
|
1447
|
-
--mds-paginator-item-color: rgb(5 5 5);
|
|
1448
|
-
--mds-paginator-item-color-disabled: rgb(119 119 119);
|
|
1449
|
-
--mds-paginator-item-color-hover: rgb(5 5 5);
|
|
1450
|
-
--mds-paginator-item-color-selected: rgb(255 255 255);
|
|
1451
|
-
--mds-paginator-item-size: 36px;
|
|
1452
|
-
--mds-paginator-item-radius: 200px;
|
|
1453
|
-
--mds-paginator-item-shadow-selected: var(--shadow-md-sharp);
|
|
1454
1414
|
--mds-paginator-item-transition-duration: var(--duration-200);
|
|
1455
1415
|
|
|
1456
1416
|
/* component: mds-pref-animation */
|
|
@@ -1471,7 +1431,7 @@
|
|
|
1471
1431
|
--mds-pref-theme-item-color-variant-primary: rgb(36 103 231);
|
|
1472
1432
|
|
|
1473
1433
|
/* component: mds-price-table-features */
|
|
1474
|
-
--mds-price-table-features-border-color: rgb(
|
|
1434
|
+
--mds-price-table-features-border-color: rgb(var(--magma-border-muted));
|
|
1475
1435
|
--mds-price-table-features-padding: --spacing(300);
|
|
1476
1436
|
--mds-price-table-features-transition-duration: var(--duration-200);
|
|
1477
1437
|
|
|
@@ -1502,7 +1462,7 @@
|
|
|
1502
1462
|
|
|
1503
1463
|
/* component: mds-progress */
|
|
1504
1464
|
--mds-progress-duration: 750ms;
|
|
1505
|
-
--mds-progress-radius:
|
|
1465
|
+
--mds-progress-radius: 40px;
|
|
1506
1466
|
--mds-progress-transition-duration: var(--duration-300);
|
|
1507
1467
|
|
|
1508
1468
|
/* component: mds-push-notification */
|
|
@@ -1535,14 +1495,14 @@
|
|
|
1535
1495
|
--mds-radial-menu-radius: 80px;
|
|
1536
1496
|
--mds-radial-menu-disc-scale: 0;
|
|
1537
1497
|
--mds-radial-menu-disc-delay: calc( (var(--mds-radial-menu-nth-siblings) + 1) * var(--mds-radial-menu-delay) );
|
|
1538
|
-
--mds-radial-menu-disc-filter: blur(
|
|
1498
|
+
--mds-radial-menu-disc-filter: blur(--spacing(200));
|
|
1539
1499
|
--mds-radial-menu-disc-shadow: var(--shadow-lg-sharp);
|
|
1540
|
-
--mds-radial-menu-transition-duration:
|
|
1500
|
+
--mds-radial-menu-transition-duration: var(--duration-500);
|
|
1541
1501
|
--mds-radial-menu-transition-timing-function: var(--ease-out-expo);
|
|
1542
1502
|
--mds-radial-menu-nth-siblings: 0;
|
|
1543
1503
|
--mds-radial-menu-radius-current: 0;
|
|
1544
|
-
--mds-radial-menu-is-full-circle:
|
|
1545
|
-
--mds-radial-menu-is-start-greater-than-end:
|
|
1504
|
+
--mds-radial-menu-is-full-circle: cos( clamp( 0deg, max(var(--private-radial-menu-sweep) - 360deg, 360deg - var(--private-radial-menu-sweep)) * 1000, 90deg ) );
|
|
1505
|
+
--mds-radial-menu-is-start-greater-than-end: sin( clamp(-90deg, var(--private-radial-menu-sweep) * 1000, 90deg) );
|
|
1546
1506
|
--mds-radial-menu-item-offset-per-child: calc( (var(--mds-radial-menu-angle-end) - var(--mds-radial-menu-angle-start)) / (var(--mds-radial-menu-nth-siblings) + var(--mds-radial-menu-is-full-circle)) );
|
|
1547
1507
|
--mds-radial-menu-item-angle-offset: calc( var(--mds-radial-menu-direction) * var(--mds-radial-menu-item-index) * var(--mds-radial-menu-item-offset-per-child) );
|
|
1548
1508
|
--mds-radial-menu-item-delay: calc( (var(--mds-radial-menu-item-index) + 1) * var(--mds-radial-menu-delay) );
|
|
@@ -1611,7 +1571,7 @@
|
|
|
1611
1571
|
--mds-tab-tabs-wrapper-margin: 0;
|
|
1612
1572
|
--mds-tab-tabs-wrapper-outline-opacity: 0.7;
|
|
1613
1573
|
--mds-tab-tabs-wrapper-shadow-color: rgb(237 237 237);
|
|
1614
|
-
--mds-tab-transition-duration:
|
|
1574
|
+
--mds-tab-transition-duration: 500ms;
|
|
1615
1575
|
--mds-tab-slider-offset-x: 0;
|
|
1616
1576
|
--mds-tab-slider-offset-y: 0;
|
|
1617
1577
|
--mds-tab-slider-width: 0;
|
|
@@ -1620,15 +1580,15 @@
|
|
|
1620
1580
|
--mds-tab-tabs-wrapper-shadow: 0 0 0 --spacing(50) var(--mds-tab-tabs-wrapper-shadow-color) inset;
|
|
1621
1581
|
--mds-tab-item-selected-background: rgb(var(--magma-wash-strong));
|
|
1622
1582
|
--mds-tab-item-default-background: transparent;
|
|
1623
|
-
--mds-tab-item-default-shadow:
|
|
1583
|
+
--mds-tab-item-default-shadow: none;
|
|
1624
1584
|
--mds-tab-item-hover-background: transparent;
|
|
1625
1585
|
--mds-tab-item-hover-color: rgb(var(--magma-text-default));
|
|
1626
|
-
--mds-tab-item-hover-shadow: transparent;
|
|
1627
1586
|
--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) );
|
|
1628
1587
|
--mds-tab-scroll-behavior: smooth;
|
|
1629
|
-
--mds-tab-tabs-overflow-shadow: 0 0 var(--mds-tab-tabs-overflow-shadow-size) -
|
|
1588
|
+
--mds-tab-tabs-overflow-shadow: 0 0 var(--mds-tab-tabs-overflow-shadow-size) --spacing(-50) rgb(0 0 0 / 0.375);
|
|
1630
1589
|
--mds-tab-transition-timing-function: var(--ease-out-expo);
|
|
1631
1590
|
--mds-tab-corner-shape: var(--magma-corner-shape);
|
|
1591
|
+
--mds-tab-item-hover-shadow: none;
|
|
1632
1592
|
--mds-tab-contents-height: auto;
|
|
1633
1593
|
|
|
1634
1594
|
/* component: mds-tab-bar */
|
|
@@ -1645,7 +1605,8 @@
|
|
|
1645
1605
|
--mds-button-corner-shape: var(--mds-tab-item-corner-shape, var(--magma-corner-shape));
|
|
1646
1606
|
|
|
1647
1607
|
/* component: mds-table */
|
|
1648
|
-
--mds-table-border-color: rgb(
|
|
1608
|
+
--mds-table-border-color: rgb(219 219 219);
|
|
1609
|
+
--mds-table-separator-color: rgb(219 219 219);
|
|
1649
1610
|
--mds-table-background: rgb(var(--magma-wash-strong));
|
|
1650
1611
|
--mds-table-body-background-hover: rgb(var(--magma-surface-default));
|
|
1651
1612
|
--mds-table-color: rgb(var(--magma-text-default));
|
|
@@ -1653,7 +1614,7 @@
|
|
|
1653
1614
|
--mds-table-transition-duration: var(--duration-300);
|
|
1654
1615
|
--mds-table-actions-gap: --spacing(200);
|
|
1655
1616
|
--mds-table-background-alt: rgb(var(--magma-surface-raised));
|
|
1656
|
-
--mds-table-border-width:
|
|
1617
|
+
--mds-table-border-width: --spacing(50);
|
|
1657
1618
|
--mds-table-cell-padding: --spacing(400);
|
|
1658
1619
|
--mds-table-color-alt: rgb(var(--magma-text-muted));
|
|
1659
1620
|
--mds-table-batch-actions-width: --spacing(4800);
|
|
@@ -1669,8 +1630,8 @@
|
|
|
1669
1630
|
/* component: mds-table-cell */
|
|
1670
1631
|
--mds-table-cell-background: var(--mds-table-cell-background-alt);
|
|
1671
1632
|
--mds-table-cell-color: var(--mds-table-cell-color-alt);
|
|
1672
|
-
--mds-table-cell-background-alt: var(--mds-table-
|
|
1673
|
-
--mds-table-cell-color-alt: var(--mds-table-
|
|
1633
|
+
--mds-table-cell-background-alt: var(--mds-table-background);
|
|
1634
|
+
--mds-table-cell-color-alt: var(--mds-table-color);
|
|
1674
1635
|
--mds-table-cell-transition-duration: var(--duration-200);
|
|
1675
1636
|
|
|
1676
1637
|
/* component: mds-table-footer */
|
|
@@ -1702,23 +1663,23 @@
|
|
|
1702
1663
|
--mds-toast-width: auto;
|
|
1703
1664
|
--mds-toast-shadow: var(--shadow-ring-strong-2);
|
|
1704
1665
|
|
|
1666
|
+
/* component: mds-toast-region */
|
|
1667
|
+
--mds-toast-region-gap: 8px;
|
|
1668
|
+
|
|
1705
1669
|
/* component: mds-tooltip */
|
|
1706
1670
|
--mds-tooltip-arrow-background: rgb(255 255 255);
|
|
1707
1671
|
--mds-tooltip-background: rgb(255 255 255);
|
|
1708
1672
|
--mds-tooltip-dot-padding: 4px;
|
|
1709
|
-
--mds-tooltip-duration:
|
|
1673
|
+
--mds-tooltip-duration: 500ms;
|
|
1710
1674
|
--mds-tooltip-transform-from: scale(0.9) translateY(calc(16px * -1));
|
|
1711
1675
|
--mds-tooltip-transform-to: scale(1) translate(0, 0);
|
|
1712
1676
|
--mds-tooltip-z-index: 6000;
|
|
1713
|
-
--mds-tooltip-drop-shadow: drop-shadow(0 0
|
|
1677
|
+
--mds-tooltip-drop-shadow: drop-shadow(0 0 --spacing(100) rgb(var(--magma-text-default) / 0.075)) drop-shadow(0 0 --spacing(100) rgb(var(--magma-text-default) / 0.45)) drop-shadow(0 0 --spacing(100) rgb(var(--magma-text-default) / 0.45));
|
|
1714
1678
|
--mds-tooltip-ease: var(--ease-out-expo);
|
|
1715
1679
|
|
|
1716
1680
|
/* component: mds-tree */
|
|
1717
1681
|
--mds-tree-branch-use-rounded-border: true;
|
|
1718
|
-
--mds-tree-
|
|
1719
|
-
--mds-tree-toggle-icon-chevron-expanded-color: rgb(255 255 255);
|
|
1720
|
-
--mds-tree-toggle-icon-folder-expanded-color: rgb(36 103 231);
|
|
1721
|
-
--mds-tree-actions-border-radius: var(--radius-lg);
|
|
1682
|
+
--mds-tree-actions-border-radius: var(--magma-radius-lg);
|
|
1722
1683
|
--mds-tree-actions-gap: --spacing(50);
|
|
1723
1684
|
--mds-tree-label-default-background: transparent;
|
|
1724
1685
|
--mds-tree-label-hover-background: rgb(var(--magma-wash-soft));
|
|
@@ -1729,28 +1690,31 @@
|
|
|
1729
1690
|
--mds-tree-branch-border-size: --spacing(50);
|
|
1730
1691
|
--mds-tree-branch-dot-default-color: rgb(var(--magma-border-default));
|
|
1731
1692
|
--mds-tree-branch-dot-expanded-color: rgb(var(--magma-border-strong));
|
|
1732
|
-
--mds-tree-toggle-gap: --spacing(
|
|
1693
|
+
--mds-tree-toggle-gap: --spacing(100);
|
|
1733
1694
|
--mds-tree-toggle-icon-async-background: rgb(var(--magma-wash-base));
|
|
1734
1695
|
--mds-tree-toggle-icon-async-color: rgb(var(--magma-accent-fg));
|
|
1735
1696
|
--mds-tree-toggle-icon-chevron-default-background: rgb(var(--magma-accent-emphasis));
|
|
1736
1697
|
--mds-tree-toggle-icon-chevron-default-color: rgb(var(--magma-text-on-emphasis));
|
|
1698
|
+
--mds-tree-toggle-icon-chevron-expanded-background: var( --mds-tree-toggle-icon-chevron-default-background );
|
|
1699
|
+
--mds-tree-toggle-icon-chevron-expanded-color: var(--mds-tree-toggle-icon-chevron-default-color);
|
|
1737
1700
|
--mds-tree-toggle-icon-folder-default-background: rgb(var(--magma-wash-strong));
|
|
1738
1701
|
--mds-tree-toggle-icon-folder-default-color: rgb(var(--magma-accent-emphasis));
|
|
1702
|
+
--mds-tree-toggle-icon-folder-expanded-color: var(--mds-tree-toggle-icon-folder-default-color);
|
|
1739
1703
|
--mds-tree-toggle-icon-position-right-default-background: transparent;
|
|
1740
1704
|
--mds-tree-toggle-icon-position-right-default-color: rgb(var(--magma-text-subtle));
|
|
1741
1705
|
--mds-tree-toggle-icon-position-right-expanded-background: transparent;
|
|
1742
1706
|
--mds-tree-toggle-icon-position-right-expanded-color: rgb(var(--magma-text-subtle));
|
|
1743
|
-
--mds-tree-transition-duration:
|
|
1707
|
+
--mds-tree-transition-duration: var(--duration-300);
|
|
1744
1708
|
--mds-tree-transition-timing-function: var(--ease-in-out-expo);
|
|
1745
|
-
--mds-tree-toggle-border-radius: var(--radius-lg);
|
|
1709
|
+
--mds-tree-toggle-border-radius: var(--magma-radius-lg);
|
|
1746
1710
|
--mds-tree-toggle-size: --spacing(900);
|
|
1747
1711
|
|
|
1748
1712
|
/* component: mds-tree-item */
|
|
1749
|
-
--mds-tree-item-branch-border-radius:
|
|
1713
|
+
--mds-tree-item-branch-border-radius: 28px;
|
|
1750
1714
|
--mds-tree-item-children-padding-left: calc( calc(var(--mds-tree-item-toggle-size) - var(--mds-tree-item-branch-border-size)) / 2 );
|
|
1751
1715
|
--mds-tree-item-icon-background-color: var( --mds-tree-item-toggle-icon-chevron-default-background );
|
|
1752
1716
|
--mds-tree-item-icon-color: var(--mds-tree-item-toggle-icon-chevron-default-color);
|
|
1753
|
-
--mds-tree-branch-border-radius: var(--radius
|
|
1717
|
+
--mds-tree-branch-border-radius: var(--private-tree-item-branch-border-radius);
|
|
1754
1718
|
--mds-tree-item-actions-border-radius: var(--mds-tree-actions-border-radius);
|
|
1755
1719
|
--mds-tree-item-actions-gap: var(--mds-tree-actions-gap);
|
|
1756
1720
|
--mds-tree-item-branch-border-color: var(--mds-tree-branch-border-color);
|
|
@@ -1762,17 +1726,17 @@
|
|
|
1762
1726
|
--mds-tree-item-label-icon-default-color: var(--mds-tree-label-icon-default-color);
|
|
1763
1727
|
--mds-tree-item-label-icon-hover-color: var(--mds-tree-label-icon-hover-color);
|
|
1764
1728
|
--mds-tree-item-line-clamp: var(--mds-tree-line-clamp);
|
|
1765
|
-
--mds-tree-item-toggle-gap: var(--mds-tree-toggle-gap);
|
|
1729
|
+
--mds-tree-item-toggle-gap: var(--mds-tree-toggle-gap, --spacing(100));
|
|
1766
1730
|
--mds-tree-item-toggle-icon-async-background: var(--mds-tree-toggle-icon-async-background);
|
|
1767
1731
|
--mds-tree-item-toggle-icon-async-color: var(--mds-tree-toggle-icon-async-color);
|
|
1768
1732
|
--mds-tree-item-toggle-icon-chevron-default-background: var( --mds-tree-toggle-icon-chevron-default-background );
|
|
1769
1733
|
--mds-tree-item-toggle-icon-chevron-default-color: var( --mds-tree-toggle-icon-chevron-default-color );
|
|
1770
|
-
--mds-tree-item-toggle-icon-chevron-expanded-background: var( --mds-tree-item-toggle-icon-chevron-default-background );
|
|
1771
|
-
--mds-tree-item-toggle-icon-chevron-expanded-color: var( --mds-tree-item-toggle-icon-chevron-default-color );
|
|
1734
|
+
--mds-tree-item-toggle-icon-chevron-expanded-background: var( --mds-tree-toggle-icon-chevron-expanded-background, var(--mds-tree-item-toggle-icon-chevron-default-background) );
|
|
1735
|
+
--mds-tree-item-toggle-icon-chevron-expanded-color: var( --mds-tree-toggle-icon-chevron-expanded-color, var(--mds-tree-item-toggle-icon-chevron-default-color) );
|
|
1772
1736
|
--mds-tree-item-toggle-icon-folder-default-background: var( --mds-tree-toggle-icon-folder-default-background );
|
|
1773
1737
|
--mds-tree-item-toggle-icon-folder-default-color: var( --mds-tree-toggle-icon-folder-default-color );
|
|
1774
1738
|
--mds-tree-item-toggle-icon-folder-expanded-background: var( --mds-tree-item-toggle-icon-folder-default-background );
|
|
1775
|
-
--mds-tree-item-toggle-icon-folder-expanded-color: var( --mds-tree-item-toggle-icon-folder-default-color );
|
|
1739
|
+
--mds-tree-item-toggle-icon-folder-expanded-color: var( --mds-tree-toggle-icon-folder-expanded-color, var(--mds-tree-item-toggle-icon-folder-default-color) );
|
|
1776
1740
|
--mds-tree-item-toggle-icon-position-right-default-background: var( --mds-tree-toggle-icon-position-right-default-background );
|
|
1777
1741
|
--mds-tree-item-toggle-icon-position-right-default-color: var( --mds-tree-toggle-icon-position-right-default-color );
|
|
1778
1742
|
--mds-tree-item-toggle-icon-position-right-expanded-background: var( --mds-tree-toggle-icon-position-right-expanded-background );
|
|
@@ -1784,7 +1748,7 @@
|
|
|
1784
1748
|
/* component: mds-url-view */
|
|
1785
1749
|
--mds-url-view-background: rgb(237 237 237);
|
|
1786
1750
|
--mds-url-view-color: rgb(5 5 5);
|
|
1787
|
-
--mds-url-view-radius:
|
|
1751
|
+
--mds-url-view-radius: 20px;
|
|
1788
1752
|
--mds-url-view-shadow: var(--shadow-ring-2);
|
|
1789
1753
|
--mds-url-view-transition-duration: var(--duration-200);
|
|
1790
1754
|
--mds-url-view-header-shadow: var(--shadow-sm-sharp);
|
package/dist/css/transitions.css
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/*
|
|
2
|
-
@magma-design-system/design-tokens v15.2.
|
|
2
|
+
@magma-design-system/design-tokens v15.2.2
|
|
3
3
|
Generated by Style Dictionary
|
|
4
4
|
Do not edit directly
|
|
5
|
-
Generated at
|
|
5
|
+
Generated at Wed, 21 Oct 2026 16:52:02 GMT
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
:root {
|
|
@@ -40,6 +40,6 @@ Generated at Thu, 15 Oct 2026 16:07:06 GMT
|
|
|
40
40
|
--ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
|
|
41
41
|
--ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
|
|
42
42
|
|
|
43
|
-
--transition-property-cosmetic: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;
|
|
43
|
+
--transition-property-cosmetic: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, rotate, scale, transform, translate, width;
|
|
44
44
|
--transition-property-size: height, margin, padding, width;
|
|
45
45
|
}
|
package/dist/css/typography.css
CHANGED