@wavemaker/foundation-css 12.0.0-next.45187 → 12.0.0-next.45189
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.
- foundation-css/foundation/foundation.css +236 -310
- foundation-css/foundation/foundation.min.css +1 -1
- foundation-css/index.d.ts +30 -0
- foundation-css/index.js +46 -0
- foundation-css/package.json +5 -4
- foundation-css/tokens/primitives/border/border.json +10 -0
- foundation-css/tokens/primitives/colors/color.dark.json +124 -0
- foundation-css/tokens/primitives/colors/color.json +163 -0
- foundation-css/tokens/primitives/colors/color.light.json +1 -0
- foundation-css/tokens/primitives/font/font.json +20 -0
- foundation-css/tokens/primitives/radius/radius.json +14 -0
- foundation-css/tokens/primitives/space/space.json +57 -0
- foundation-css/tokens/primitives/spacer/spacer.json +45 -0
- foundation-css/tokens/semantics/box-shadow/box-shadow.json +8 -0
- foundation-css/tokens/semantics/colors/color.json +948 -0
- foundation-css/tokens/semantics/font/font.json +113 -0
- foundation-css/tokens/semantics/icon/icon.json +39 -0
- foundation-css/tokens/semantics/opacity/opacity.json +7 -0
|
@@ -1,252 +1,293 @@
|
|
|
1
1
|
/**--import css variables file--**/
|
|
2
|
-
/**
|
|
3
|
-
* Do not edit directly, this file was auto-generated.
|
|
4
|
-
*/
|
|
5
2
|
@import url("https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
|
|
6
3
|
:root {
|
|
7
|
-
--wm-
|
|
8
|
-
--wm-space-rule: 0.25rem;
|
|
9
|
-
/* 4px */
|
|
10
|
-
--wm-radius-circle: 50%;
|
|
11
|
-
--wm-radius-pill: 1000px;
|
|
12
|
-
--wm-radius-xxl: 32px;
|
|
13
|
-
--wm-radius-xl: 28px;
|
|
14
|
-
--wm-radius-lg: 16px;
|
|
15
|
-
--wm-radius-md: 12px;
|
|
16
|
-
--wm-radius-sm: 8px;
|
|
17
|
-
--wm-radius-xs: 4px;
|
|
18
|
-
--wm-radius-xxs: 2px;
|
|
19
|
-
--wm-radius-none: 0px;
|
|
20
|
-
--wm-font-family-backup: Arial, Helvetica, sans-serif;
|
|
21
|
-
--wm-font-weight-black: 900;
|
|
22
|
-
--wm-font-weight-extrabold: 800;
|
|
23
|
-
--wm-font-weight-bold: 700;
|
|
24
|
-
--wm-font-weight-semibold: 600;
|
|
25
|
-
--wm-font-weight-medium: 500;
|
|
26
|
-
--wm-font-weight-regular: 400;
|
|
27
|
-
--wm-font-weight-light: 300;
|
|
28
|
-
--wm-font-weight-extralight: 200;
|
|
29
|
-
--wm-font-weight-thin: 100;
|
|
30
|
-
--wm-border-style: solid;
|
|
31
|
-
--wm-border-width: 1px;
|
|
4
|
+
--wm-border-color: var(--wm-color-outline-variant);
|
|
32
5
|
--wm-border-color-translucent: rgba(0, 0, 0, 0.175);
|
|
33
|
-
--wm-
|
|
34
|
-
--wm-
|
|
35
|
-
--wm-color-scrim: #000000;
|
|
36
|
-
--wm-color-shadow: #000000;
|
|
37
|
-
--wm-color-outline-variant: #E4E4E4;
|
|
38
|
-
--wm-color-outline: #79747E;
|
|
39
|
-
--wm-color-inverse-primary: #ffd4c9;
|
|
40
|
-
--wm-color-inverse-on-surface: #f5f5ff;
|
|
41
|
-
--wm-color-inverse-surface: #2d2d33;
|
|
42
|
-
--wm-color-on-surface-variant: #4F556D;
|
|
43
|
-
--wm-color-on-surface: #1D1B20;
|
|
44
|
-
--wm-color-surface-container-highest: #dfe0e9;
|
|
45
|
-
--wm-color-surface-container-high: #e8e8f1;
|
|
46
|
-
--wm-color-surface-container-lowest: #FFFFFF;
|
|
47
|
-
--wm-color-surface-container-low: #f2f3fc;
|
|
48
|
-
--wm-color-surface-container: #ebebf7;
|
|
49
|
-
--wm-color-surface-tint: #474b98;
|
|
50
|
-
--wm-color-surface-dim: #c5c6d4;
|
|
51
|
-
--wm-color-surface-bright: #f3f4fe;
|
|
52
|
-
--wm-color-surface-variant: #FBFBFC;
|
|
53
|
-
--wm-color-surface: #FFFFFF;
|
|
54
|
-
--wm-color-on-background: #35363B;
|
|
55
|
-
--wm-color-background: #FFFFFF;
|
|
56
|
-
--wm-color-on-error-container: #410E0B;
|
|
57
|
-
--wm-color-on-error: #FFFFFF;
|
|
58
|
-
--wm-color-error-container: #F9DEDC;
|
|
59
|
-
--wm-color-error: #EF3F3F;
|
|
60
|
-
--wm-color-on-warning-container: #1b1b1b;
|
|
61
|
-
--wm-color-on-warning: #ffffff;
|
|
62
|
-
--wm-color-warning-container: #fff4d5;
|
|
63
|
-
--wm-color-warning: #ffae00;
|
|
64
|
-
--wm-color-on-info-container: #191919;
|
|
65
|
-
--wm-color-on-info: #ffffff;
|
|
66
|
-
--wm-color-info-container: #ddf7ff;
|
|
67
|
-
--wm-color-info: #00c8ff;
|
|
68
|
-
--wm-color-on-success-container: #11251a;
|
|
69
|
-
--wm-color-on-success: #ffffff;
|
|
70
|
-
--wm-color-success-container: #d6ffe8;
|
|
71
|
-
--wm-color-success: #5AC588;
|
|
72
|
-
--wm-color-on-tertiary-fixed-variant: #544c31;
|
|
73
|
-
--wm-color-on-tertiary-fixed: #362e12;
|
|
74
|
-
--wm-color-on-tertiary-container: #27210c;
|
|
75
|
-
--wm-color-on-tertiary: #FFFFFF;
|
|
76
|
-
--wm-color-tertiary-fixed-dim: #e9e1c3;
|
|
77
|
-
--wm-color-tertiary-fixed: #fff5d2;
|
|
78
|
-
--wm-color-tertiary-container: #fff5d3;
|
|
79
|
-
--wm-color-tertiary: #E0B313;
|
|
80
|
-
--wm-color-on-secondary-fixed-variant: #404154;
|
|
81
|
-
--wm-color-on-secondary-fixed: #171828;
|
|
82
|
-
--wm-color-on-secondary-container: #1c1c2b;
|
|
83
|
-
--wm-color-on-secondary: #FFFFFF;
|
|
84
|
-
--wm-color-secondary-fixed-dim: #bbbcd6;
|
|
85
|
-
--wm-color-secondary-fixed: #dcdef6;
|
|
86
|
-
--wm-color-secondary-container: #e2e3ff;
|
|
87
|
-
--wm-color-secondary: #656DF9;
|
|
88
|
-
--wm-color-on-primary-fixed-variant: #804536;
|
|
89
|
-
--wm-color-on-primary-fixed: #1d0600;
|
|
90
|
-
--wm-color-on-primary-container: #2d201d;
|
|
91
|
-
--wm-color-on-primary: #FFFFFF;
|
|
92
|
-
--wm-color-primary-fixed-dim: #ffe8e2;
|
|
93
|
-
--wm-color-primary-fixed: #ffe8e2;
|
|
94
|
-
--wm-color-primary-container: #ffe3dc;
|
|
6
|
+
--wm-border-width: 1px;
|
|
7
|
+
--wm-border-style: solid;
|
|
95
8
|
--wm-color-primary: #FF7250;
|
|
96
|
-
--wm-
|
|
97
|
-
--wm-
|
|
98
|
-
--wm-
|
|
99
|
-
--wm-
|
|
100
|
-
--wm-
|
|
101
|
-
--wm-
|
|
102
|
-
--wm-
|
|
103
|
-
--wm-
|
|
104
|
-
--wm-
|
|
105
|
-
--wm-
|
|
106
|
-
--wm-
|
|
107
|
-
|
|
108
|
-
--wm-
|
|
109
|
-
|
|
110
|
-
--wm-
|
|
111
|
-
|
|
112
|
-
--wm-
|
|
113
|
-
|
|
114
|
-
--wm-
|
|
115
|
-
|
|
116
|
-
--wm-
|
|
117
|
-
|
|
118
|
-
--wm-
|
|
119
|
-
|
|
120
|
-
--wm-
|
|
121
|
-
|
|
122
|
-
--wm-
|
|
123
|
-
|
|
124
|
-
--wm-
|
|
125
|
-
|
|
126
|
-
--wm-
|
|
127
|
-
|
|
128
|
-
--wm-
|
|
129
|
-
|
|
130
|
-
--wm-
|
|
131
|
-
|
|
132
|
-
--wm-
|
|
9
|
+
--wm-color-primary-container: #ffe3dc;
|
|
10
|
+
--wm-color-primary-fixed: #ffe8e2;
|
|
11
|
+
--wm-color-primary-fixed-dim: #ffe8e2;
|
|
12
|
+
--wm-color-on-primary: #FFFFFF;
|
|
13
|
+
--wm-color-on-primary-container: #2d201d;
|
|
14
|
+
--wm-color-on-primary-fixed: #1d0600;
|
|
15
|
+
--wm-color-on-primary-fixed-variant: #804536;
|
|
16
|
+
--wm-color-secondary: #656DF9;
|
|
17
|
+
--wm-color-secondary-container: #e2e3ff;
|
|
18
|
+
--wm-color-secondary-fixed: #dcdef6;
|
|
19
|
+
--wm-color-secondary-fixed-dim: #bbbcd6;
|
|
20
|
+
--wm-color-on-secondary: #FFFFFF;
|
|
21
|
+
--wm-color-on-secondary-container: #1c1c2b;
|
|
22
|
+
--wm-color-on-secondary-fixed: #171828;
|
|
23
|
+
--wm-color-on-secondary-fixed-variant: #404154;
|
|
24
|
+
--wm-color-tertiary: #E0B313;
|
|
25
|
+
--wm-color-tertiary-container: #fff5d3;
|
|
26
|
+
--wm-color-tertiary-fixed: #fff5d2;
|
|
27
|
+
--wm-color-tertiary-fixed-dim: #e9e1c3;
|
|
28
|
+
--wm-color-on-tertiary: #FFFFFF;
|
|
29
|
+
--wm-color-on-tertiary-container: #27210c;
|
|
30
|
+
--wm-color-on-tertiary-fixed: #362e12;
|
|
31
|
+
--wm-color-on-tertiary-fixed-variant: #544c31;
|
|
32
|
+
--wm-color-success: #5AC588;
|
|
33
|
+
--wm-color-success-container: #d6ffe8;
|
|
34
|
+
--wm-color-on-success: #ffffff;
|
|
35
|
+
--wm-color-on-success-container: #11251a;
|
|
36
|
+
--wm-color-info: #00c8ff;
|
|
37
|
+
--wm-color-info-container: #ddf7ff;
|
|
38
|
+
--wm-color-on-info: #ffffff;
|
|
39
|
+
--wm-color-on-info-container: #191919;
|
|
40
|
+
--wm-color-warning: #ffae00;
|
|
41
|
+
--wm-color-warning-container: #fff4d5;
|
|
42
|
+
--wm-color-on-warning: #ffffff;
|
|
43
|
+
--wm-color-on-warning-container: #1b1b1b;
|
|
44
|
+
--wm-color-error: #EF3F3F;
|
|
45
|
+
--wm-color-error-container: #F9DEDC;
|
|
46
|
+
--wm-color-on-error: #FFFFFF;
|
|
47
|
+
--wm-color-on-error-container: #410E0B;
|
|
48
|
+
--wm-color-background: #FFFFFF;
|
|
49
|
+
--wm-color-on-background: #35363B;
|
|
50
|
+
--wm-color-surface: #FFFFFF;
|
|
51
|
+
--wm-color-surface-variant: #FBFBFC;
|
|
52
|
+
--wm-color-surface-bright: #f3f4fe;
|
|
53
|
+
--wm-color-surface-dim: #c5c6d4;
|
|
54
|
+
--wm-color-surface-tint: #474b98;
|
|
55
|
+
--wm-color-surface-container: #ebebf7;
|
|
56
|
+
--wm-color-surface-container-low: #f2f3fc;
|
|
57
|
+
--wm-color-surface-container-lowest: #FFFFFF;
|
|
58
|
+
--wm-color-surface-container-high: #e8e8f1;
|
|
59
|
+
--wm-color-surface-container-highest: #dfe0e9;
|
|
60
|
+
--wm-color-on-surface: #1D1B20;
|
|
61
|
+
--wm-color-on-surface-variant: #4F556D;
|
|
62
|
+
--wm-color-inverse-surface: #2d2d33;
|
|
63
|
+
--wm-color-inverse-on-surface: #f5f5ff;
|
|
64
|
+
--wm-color-inverse-primary: #ffd4c9;
|
|
65
|
+
--wm-color-outline: #79747E;
|
|
66
|
+
--wm-color-outline-variant: #E4E4E4;
|
|
67
|
+
--wm-color-shadow: #000000;
|
|
68
|
+
--wm-color-scrim: #000000;
|
|
69
|
+
--wm-color-white: #FFFFFF;
|
|
70
|
+
--wm-color-black: #000000;
|
|
71
|
+
--wm-font-weight-thin: 100;
|
|
72
|
+
--wm-font-weight-extralight: 200;
|
|
73
|
+
--wm-font-weight-light: 300;
|
|
74
|
+
--wm-font-weight-regular: 400;
|
|
75
|
+
--wm-font-weight-medium: 500;
|
|
76
|
+
--wm-font-weight-semibold: 600;
|
|
77
|
+
--wm-font-weight-bold: 700;
|
|
78
|
+
--wm-font-weight-extrabold: 800;
|
|
79
|
+
--wm-font-weight-black: 900;
|
|
133
80
|
--wm-font-family-brand: Roboto, var(--wm-font-family-backup);
|
|
134
|
-
--wm-
|
|
81
|
+
--wm-font-family-plain: Roboto, var(--wm-font-family-backup);
|
|
82
|
+
--wm-font-family-backup: Arial, Helvetica, sans-serif;
|
|
83
|
+
--wm-radius-none: 0px;
|
|
84
|
+
--wm-radius-xxs: 2px;
|
|
85
|
+
--wm-radius-xs: 4px;
|
|
86
|
+
--wm-radius-sm: 8px;
|
|
87
|
+
--wm-radius-md: 12px;
|
|
88
|
+
--wm-radius-lg: 16px;
|
|
89
|
+
--wm-radius-xl: 28px;
|
|
90
|
+
--wm-radius-xxl: 32px;
|
|
91
|
+
--wm-radius-pill: 1000px;
|
|
92
|
+
--wm-radius-circle: 50%;
|
|
93
|
+
--wm-space-0: calc(var(--wm-space-rule) * 0);
|
|
94
|
+
--wm-space-1: calc(var(--wm-space-rule) * 1);
|
|
95
|
+
--wm-space-2: calc(var(--wm-space-rule) * 2);
|
|
96
|
+
--wm-space-3: calc(var(--wm-space-rule) * 3);
|
|
97
|
+
--wm-space-4: calc(var(--wm-space-rule) * 4);
|
|
98
|
+
--wm-space-5: calc(var(--wm-space-rule) * 5);
|
|
99
|
+
--wm-space-6: calc(var(--wm-space-rule) * 6);
|
|
100
|
+
--wm-space-7: calc(var(--wm-space-rule) * 7);
|
|
101
|
+
--wm-space-8: calc(var(--wm-space-rule) * 8);
|
|
102
|
+
--wm-space-9: calc(var(--wm-space-rule) * 9);
|
|
103
|
+
--wm-space-10: calc(var(--wm-space-rule) * 10);
|
|
104
|
+
--wm-space-11: calc(var(--wm-space-rule) * 11);
|
|
105
|
+
--wm-space-12: calc(var(--wm-space-rule) * 12);
|
|
106
|
+
--wm-space-rule: 0.25rem;
|
|
107
|
+
--wm-spacer-0: calc(var(--wm-spacer) * 0);
|
|
108
|
+
--wm-spacer-1: calc(var(--wm-spacer) * 0.25);
|
|
109
|
+
--wm-spacer-2: calc(var(--wm-spacer) * 0.5);
|
|
110
|
+
--wm-spacer-3: calc(var(--wm-spacer) * 1);
|
|
111
|
+
--wm-spacer-4: calc(var(--wm-spacer) * 1.6);
|
|
112
|
+
--wm-spacer-5: calc(var(--wm-spacer) * 2.5);
|
|
113
|
+
--wm-spacer-6: calc(var(--wm-spacer) * 3.5);
|
|
114
|
+
--wm-spacer-7: calc(var(--wm-spacer) * 4);
|
|
115
|
+
--wm-spacer-8: calc(var(--wm-spacer) * 8);
|
|
116
|
+
--wm-spacer-9: calc(var(--wm-spacer) * 11);
|
|
117
|
+
--wm-spacer: 1rem;
|
|
118
|
+
}
|
|
119
|
+
@media (prefers-color-scheme: dark) {
|
|
120
|
+
:root:not(:has(.wm-studio)) {
|
|
121
|
+
--wm-color-primary: #d0bcfe;
|
|
122
|
+
--wm-color-primary-container: #4f378b;
|
|
123
|
+
--wm-color-primary-fixed: #eaddff;
|
|
124
|
+
--wm-color-primary-fixed-dim: #d0bcff;
|
|
125
|
+
--wm-color-on-primary: #381e72;
|
|
126
|
+
--wm-color-on-primary-container: #eaddff;
|
|
127
|
+
--wm-color-on-primary-fixed: #21005d;
|
|
128
|
+
--wm-color-on-primary-fixed-variant: #4f378b;
|
|
129
|
+
--wm-color-secondary: #ccc2dc;
|
|
130
|
+
--wm-color-secondary-container: #4a4458;
|
|
131
|
+
--wm-color-secondary-fixed: #e8def8;
|
|
132
|
+
--wm-color-secondary-fixed-dim: #ccc2dc;
|
|
133
|
+
--wm-color-on-secondary: #332d41;
|
|
134
|
+
--wm-color-on-secondary-container: #e8def8;
|
|
135
|
+
--wm-color-on-secondary-fixed: #1d192b;
|
|
136
|
+
--wm-color-on-secondary-fixed-variant: #4a4458;
|
|
137
|
+
--wm-color-tertiary: #efb8c8;
|
|
138
|
+
--wm-color-tertiary-container: #633b48;
|
|
139
|
+
--wm-color-tertiary-fixed: #ffd8e4;
|
|
140
|
+
--wm-color-tertiary-fixed-dim: #efb8c8;
|
|
141
|
+
--wm-color-on-tertiary: #492532;
|
|
142
|
+
--wm-color-on-tertiary-container: #ffd8e4;
|
|
143
|
+
--wm-color-on-tertiary-fixed: #31111d;
|
|
144
|
+
--wm-color-on-tertiary-fixed-variant: #633b48;
|
|
145
|
+
--wm-color-error: #f2b8b5;
|
|
146
|
+
--wm-color-error-container: #8c1d18;
|
|
147
|
+
--wm-color-on-error: #601410;
|
|
148
|
+
--wm-color-on-error-container: #f9dedc;
|
|
149
|
+
--wm-color-background: #141218;
|
|
150
|
+
--wm-color-on-background: #e6e0e9;
|
|
151
|
+
--wm-color-surface: #141218;
|
|
152
|
+
--wm-color-surface-variant: #49454f;
|
|
153
|
+
--wm-color-surface-bright: #3b383e;
|
|
154
|
+
--wm-color-surface-dim: #141218;
|
|
155
|
+
--wm-color-surface-tint: #d0bcff;
|
|
156
|
+
--wm-color-surface-container: #211f26;
|
|
157
|
+
--wm-color-surface-container-low: #1d1b20;
|
|
158
|
+
--wm-color-surface-container-lowest: #0f0d13;
|
|
159
|
+
--wm-color-surface-container-high: #2b2930;
|
|
160
|
+
--wm-color-surface-container-highest: #36343b;
|
|
161
|
+
--wm-color-on-surface: #e6e0e9;
|
|
162
|
+
--wm-color-on-surface-variant: #cac4d0;
|
|
163
|
+
--wm-color-inverse-surface: #e6e0e9;
|
|
164
|
+
--wm-color-inverse-on-surface: #322f35;
|
|
165
|
+
--wm-color-inverse-primary: #6750a4;
|
|
166
|
+
--wm-color-outline: #938f99;
|
|
167
|
+
--wm-color-outline-variant: #49454f;
|
|
168
|
+
--wm-color-shadow: #ffffff;
|
|
169
|
+
--wm-color-scrim: #000000;
|
|
170
|
+
--wm-color-on-success: #1d192b;
|
|
171
|
+
}
|
|
135
172
|
}
|
|
136
|
-
/*=========
|
|
137
|
-
css variables doesn't support by less functions to generate lighten, darken, fade, etc.
|
|
138
|
-
We are using color-mix function of css variables.
|
|
139
|
-
ex: color-mix(in srgb, color1 50%, color2 30%)
|
|
140
|
-
// Note: As less doesn't support css funsctions all the css funcions should be with less excepetion to support.
|
|
141
|
-
// ex: ~"calc(100vh - 50px)" instead of calc(100vh - 50px) //
|
|
142
|
-
// ex: ~"color-mix(in srgb, color1 50%, color2 30%)" instead of color-mix(in srgb, color1 50%, color2 30%) //
|
|
143
|
-
=========*/
|
|
144
173
|
:root {
|
|
145
|
-
--wm-
|
|
146
|
-
--wm-
|
|
147
|
-
--wm-
|
|
174
|
+
--wm-color-primary-container-hover: color-mix(in srgb, var(--wm-color-on-primary-container), transparent calc(100% - var(--wm-opacity-hover)));
|
|
175
|
+
--wm-color-primary-container-focus: color-mix(in srgb, var(--wm-color-on-primary-container), transparent calc(100% - var(--wm-opacity-focus)));
|
|
176
|
+
--wm-color-primary-container-active: color-mix(in srgb, var(--wm-color-on-primary-container), transparent calc(100% - var(--wm-opacity-active)));
|
|
177
|
+
--wm-color-primary-fixed-hover: color-mix(in srgb, var(--wm-color-primary-fixed), transparent calc(100% - var(--wm-opacity-hover)));
|
|
178
|
+
--wm-color-primary-fixed-focus: color-mix(in srgb, var(--wm-color-primary-fixed), transparent calc(100% - var(--wm-opacity-focus)));
|
|
179
|
+
--wm-color-primary-fixed-active: color-mix(in srgb, var(--wm-color-primary-fixed), transparent calc(100% - var(--wm-opacity-active)));
|
|
148
180
|
--wm-color-primary-hover: color-mix(in srgb, var(--wm-color-primary), transparent calc(100% - var(--wm-opacity-hover)));
|
|
149
181
|
--wm-color-primary-focus: color-mix(in srgb, var(--wm-color-primary), transparent calc(100% - var(--wm-opacity-focus)));
|
|
150
182
|
--wm-color-primary-active: color-mix(in srgb, var(--wm-color-primary), transparent calc(100% - var(--wm-opacity-active)));
|
|
183
|
+
--wm-color-on-primary-container-hover: color-mix(in srgb, var(--wm-color-on-primary-container), transparent calc(100% - var(--wm-opacity-hover)));
|
|
184
|
+
--wm-color-on-primary-container-focus: color-mix(in srgb, var(--wm-color-on-primary-container), transparent calc(100% - var(--wm-opacity-focus)));
|
|
185
|
+
--wm-color-on-primary-container-active: color-mix(in srgb, var(--wm-color-on-primary-container), transparent calc(100% - var(--wm-opacity-active)));
|
|
186
|
+
--wm-color-on-primary-fixed-hover: color-mix(in srgb, var(--wm-color-on-primary-fixed), transparent calc(100% - var(--wm-opacity-hover)));
|
|
187
|
+
--wm-color-on-primary-fixed-focus: color-mix(in srgb, var(--wm-color-on-primary-fixed), transparent calc(100% - var(--wm-opacity-focus)));
|
|
188
|
+
--wm-color-on-primary-fixed-active: color-mix(in srgb, var(--wm-color-on-primary-fixed), transparent calc(100% - var(--wm-opacity-active)));
|
|
151
189
|
--wm-color-on-primary-hover: color-mix(in srgb, var(--wm-color-on-primary), transparent calc(100% - var(--wm-opacity-hover)));
|
|
152
190
|
--wm-color-on-primary-focus: color-mix(in srgb, var(--wm-color-on-primary), transparent calc(100% - var(--wm-opacity-focus)));
|
|
153
191
|
--wm-color-on-primary-active: color-mix(in srgb, var(--wm-color-on-primary), transparent calc(100% - var(--wm-opacity-active)));
|
|
154
|
-
--wm-color-primary-container-hover: color-mix(in srgb, var(--wm-color-primary-container), transparent calc(100% - var(--wm-opacity-hover)));
|
|
155
|
-
--wm-color-primary-container-active: color-mix(in srgb, var(--wm-color-primary-container), transparent calc(100% - var(--wm-opacity-active)));
|
|
156
|
-
--wm-color-primary-container-focus: color-mix(in srgb, var(--wm-color-primary-container), transparent calc(100% - var(--wm-opacity-focus)));
|
|
157
|
-
--wm-color-on-primary-container-hover: color-mix(in srgb, var(--wm-color-primary-container), transparent calc(100% - var(--wm-opacity-hover)));
|
|
158
|
-
--wm-color-on-primary-container-active: color-mix(in srgb, var(--wm-color-primary-container), transparent calc(100% - var(--wm-opacity-active)));
|
|
159
|
-
--wm-color-on-primary-container-focus: color-mix(in srgb, var(--wm-color-primary-container), transparent calc(100% - var(--wm-opacity-focus)));
|
|
160
|
-
--wm-color-secondary-hover: color-mix(in srgb, var(--wm-color-secondary), transparent calc(100% - var(--wm-opacity-hover)));
|
|
161
|
-
--wm-color-secondary-focus: color-mix(in srgb, var(--wm-color-secondary), transparent calc(100% - var(--wm-opacity-focus)));
|
|
162
|
-
--wm-color-secondary-active: color-mix(in srgb, var(--wm-color-secondary), transparent calc(100% - var(--wm-opacity-active)));
|
|
163
|
-
--wm-color-on-secondary-hover: color-mix(in srgb, var(--wm-color-on-secondary), transparent calc(100% - var(--wm-opacity-hover)));
|
|
164
|
-
--wm-color-on-secondary-focus: color-mix(in srgb, var(--wm-color-on-secondary), transparent calc(100% - var(--wm-opacity-focus)));
|
|
165
|
-
--wm-color-on-secondary-active: color-mix(in srgb, var(--wm-color-on-secondary), transparent calc(100% - var(--wm-opacity-active)));
|
|
166
192
|
--wm-color-secondary-container-hover: color-mix(in srgb, var(--wm-color-secondary-container), transparent calc(100% - var(--wm-opacity-hover)));
|
|
167
193
|
--wm-color-secondary-container-focus: color-mix(in srgb, var(--wm-color-secondary-container), transparent calc(100% - var(--wm-opacity-focus)));
|
|
168
194
|
--wm-color-secondary-container-active: color-mix(in srgb, var(--wm-color-secondary-container), transparent calc(100% - var(--wm-opacity-active)));
|
|
195
|
+
--wm-color-secondary-fixed-hover: color-mix(in srgb, var(--wm-color-secondary-fixed), transparent calc(100% - var(--wm-opacity-hover)));
|
|
196
|
+
--wm-color-secondary-fixed-focus: color-mix(in srgb, var(--wm-color-secondary-fixed), transparent calc(100% - var(--wm-opacity-focus)));
|
|
197
|
+
--wm-color-secondary-fixed-active: color-mix(in srgb, var(--wm-color-secondary-fixed), transparent calc(100% - var(--wm-opacity-active)));
|
|
198
|
+
--wm-color-secondary-hover: color-mix(in srgb, var(--wm-color-secondary), transparent calc(100% - var(--wm-opacity-hover)));
|
|
199
|
+
--wm-color-secondary-focus: color-mix(in srgb, var(--wm-color-secondary), transparent calc(100% - var(--wm-opacity-focus)));
|
|
200
|
+
--wm-color-secondary-active: color-mix(in srgb, var(--wm-color-secondary), transparent calc(100% - var(--wm-opacity-active)));
|
|
169
201
|
--wm-color-on-secondary-container-hover: color-mix(in srgb, var(--wm-color-on-secondary-container), transparent calc(100% - var(--wm-opacity-hover)));
|
|
170
202
|
--wm-color-on-secondary-container-focus: color-mix(in srgb, var(--wm-color-on-secondary-container), transparent calc(100% - var(--wm-opacity-focus)));
|
|
171
203
|
--wm-color-on-secondary-container-active: color-mix(in srgb, var(--wm-color-on-secondary-container), transparent calc(100% - var(--wm-opacity-active)));
|
|
172
|
-
--wm-color-
|
|
173
|
-
--wm-color-
|
|
174
|
-
--wm-color-
|
|
175
|
-
--wm-color-on-
|
|
176
|
-
--wm-color-on-
|
|
177
|
-
--wm-color-on-
|
|
204
|
+
--wm-color-on-secondary-fixed-hover: color-mix(in srgb, var(--wm-color-on-secondary-container), transparent calc(100% - var(--wm-opacity-hover)));
|
|
205
|
+
--wm-color-on-secondary-fixed-focus: color-mix(in srgb, var(--wm-color-on-secondary-container), transparent calc(100% - var(--wm-opacity-focus)));
|
|
206
|
+
--wm-color-on-secondary-fixed-active: color-mix(in srgb, var(--wm-color-on-secondary-container), transparent calc(100% - var(--wm-opacity-active)));
|
|
207
|
+
--wm-color-on-secondary-hover: color-mix(in srgb, var(--wm-color-on-secondary), transparent calc(100% - var(--wm-opacity-hover)));
|
|
208
|
+
--wm-color-on-secondary-focus: color-mix(in srgb, var(--wm-color-on-secondary), transparent calc(100% - var(--wm-opacity-focus)));
|
|
209
|
+
--wm-color-on-secondary-active: color-mix(in srgb, var(--wm-color-on-secondary), transparent calc(100% - var(--wm-opacity-active)));
|
|
178
210
|
--wm-color-tertiary-container-hover: color-mix(in srgb, var(--wm-color-tertiary-container), transparent calc(100% - var(--wm-opacity-hover)));
|
|
179
211
|
--wm-color-tertiary-container-focus: color-mix(in srgb, var(--wm-color-tertiary-container), transparent calc(100% - var(--wm-opacity-focus)));
|
|
180
212
|
--wm-color-tertiary-container-active: color-mix(in srgb, var(--wm-color-tertiary-container), transparent calc(100% - var(--wm-opacity-active)));
|
|
213
|
+
--wm-color-tertiary-fixed-hover: color-mix(in srgb, var(--wm-color-tertiary-fixed), transparent calc(100% - var(--wm-opacity-hover)));
|
|
214
|
+
--wm-color-tertiary-fixed-focus: color-mix(in srgb, var(--wm-color-tertiary-fixed), transparent calc(100% - var(--wm-opacity-focus)));
|
|
215
|
+
--wm-color-tertiary-fixed-active: color-mix(in srgb, var(--wm-color-tertiary-fixed), transparent calc(100% - var(--wm-opacity-active)));
|
|
216
|
+
--wm-color-tertiary-hover: color-mix(in srgb, var(--wm-color-tertiary), transparent calc(100% - var(--wm-opacity-hover)));
|
|
217
|
+
--wm-color-tertiary-focus: color-mix(in srgb, var(--wm-color-tertiary), transparent calc(100% - var(--wm-opacity-focus)));
|
|
218
|
+
--wm-color-tertiary-active: color-mix(in srgb, var(--wm-color-tertiary), transparent calc(100% - var(--wm-opacity-active)));
|
|
181
219
|
--wm-color-on-tertiary-container-hover: color-mix(in srgb, var(--wm-color-on-tertiary-container), transparent calc(100% - var(--wm-opacity-hover)));
|
|
182
220
|
--wm-color-on-tertiary-container-focus: color-mix(in srgb, var(--wm-color-on-tertiary-container), transparent calc(100% - var(--wm-opacity-focus)));
|
|
183
221
|
--wm-color-on-tertiary-container-active: color-mix(in srgb, var(--wm-color-on-tertiary-container), transparent calc(100% - var(--wm-opacity-active)));
|
|
184
|
-
--wm-color-
|
|
185
|
-
--wm-color-
|
|
186
|
-
--wm-color-
|
|
187
|
-
--wm-color-on-
|
|
188
|
-
--wm-color-on-
|
|
189
|
-
--wm-color-on-
|
|
222
|
+
--wm-color-on-tertiary-fixed-hover: color-mix(in srgb, var(--wm-color-on-tertiary-fixed), transparent calc(100% - var(--wm-opacity-hover)));
|
|
223
|
+
--wm-color-on-tertiary-fixed-focus: color-mix(in srgb, var(--wm-color-on-tertiary-fixed), transparent calc(100% - var(--wm-opacity-focus)));
|
|
224
|
+
--wm-color-on-tertiary-fixed-active: color-mix(in srgb, var(--wm-color-on-tertiary-fixed), transparent calc(100% - var(--wm-opacity-active)));
|
|
225
|
+
--wm-color-on-tertiary-hover: color-mix(in srgb, var(--wm-color-on-tertiary), transparent calc(100% - var(--wm-opacity-hover)));
|
|
226
|
+
--wm-color-on-tertiary-focus: color-mix(in srgb, var(--wm-color-on-tertiary), transparent calc(100% - var(--wm-opacity-focus)));
|
|
227
|
+
--wm-color-on-tertiary-active: color-mix(in srgb, var(--wm-color-on-tertiary), transparent calc(100% - var(--wm-opacity-active)));
|
|
190
228
|
--wm-color-success-container-hover: color-mix(in srgb, var(--wm-color-success-container), transparent calc(100% - var(--wm-opacity-hover)));
|
|
191
229
|
--wm-color-success-container-focus: color-mix(in srgb, var(--wm-color-success-container), transparent calc(100% - var(--wm-opacity-focus)));
|
|
192
230
|
--wm-color-success-container-active: color-mix(in srgb, var(--wm-color-success-container), transparent calc(100% - var(--wm-opacity-active)));
|
|
231
|
+
--wm-color-success-hover: color-mix(in srgb, var(--wm-color-success), transparent calc(100% - var(--wm-opacity-hover)));
|
|
232
|
+
--wm-color-success-focus: color-mix(in srgb, var(--wm-color-success), transparent calc(100% - var(--wm-opacity-focus)));
|
|
233
|
+
--wm-color-success-active: color-mix(in srgb, var(--wm-color-success), transparent calc(100% - var(--wm-opacity-active)));
|
|
193
234
|
--wm-color-on-success-container-hover: color-mix(in srgb, var(--wm-color-on-success-container), transparent calc(100% - var(--wm-opacity-hover)));
|
|
194
235
|
--wm-color-on-success-container-focus: color-mix(in srgb, var(--wm-color-on-success-container), transparent calc(100% - var(--wm-opacity-focus)));
|
|
195
236
|
--wm-color-on-success-container-active: color-mix(in srgb, var(--wm-color-on-success-container), transparent calc(100% - var(--wm-opacity-active)));
|
|
196
|
-
--wm-color-
|
|
197
|
-
--wm-color-
|
|
198
|
-
--wm-color-
|
|
199
|
-
--wm-color-on-info-hover: color-mix(in srgb, var(--wm-color-on-info), transparent calc(100% - var(--wm-opacity-hover)));
|
|
200
|
-
--wm-color-on-info-focus: color-mix(in srgb, var(--wm-color-on-info), transparent calc(100% - var(--wm-opacity-focus)));
|
|
201
|
-
--wm-color-on-info-active: color-mix(in srgb, var(--wm-color-on-info), transparent calc(100% - var(--wm-opacity-active)));
|
|
237
|
+
--wm-color-on-success-hover: color-mix(in srgb, var(--wm-color-on-success), transparent calc(100% - var(--wm-opacity-hover)));
|
|
238
|
+
--wm-color-on-success-focus: color-mix(in srgb, var(--wm-color-on-success), transparent calc(100% - var(--wm-opacity-focus)));
|
|
239
|
+
--wm-color-on-success-active: color-mix(in srgb, var(--wm-color-on-success), transparent calc(100% - var(--wm-opacity-active)));
|
|
202
240
|
--wm-color-info-container-hover: color-mix(in srgb, var(--wm-color-info-container), transparent calc(100% - var(--wm-opacity-hover)));
|
|
203
241
|
--wm-color-info-container-focus: color-mix(in srgb, var(--wm-color-info-container), transparent calc(100% - var(--wm-opacity-focus)));
|
|
204
242
|
--wm-color-info-container-active: color-mix(in srgb, var(--wm-color-info-container), transparent calc(100% - var(--wm-opacity-active)));
|
|
243
|
+
--wm-color-info-hover: color-mix(in srgb, var(--wm-color-info), transparent calc(100% - var(--wm-opacity-hover)));
|
|
244
|
+
--wm-color-info-focus: color-mix(in srgb, var(--wm-color-info), transparent calc(100% - var(--wm-opacity-focus)));
|
|
245
|
+
--wm-color-info-active: color-mix(in srgb, var(--wm-color-info), transparent calc(100% - var(--wm-opacity-active)));
|
|
205
246
|
--wm-color-on-info-container-hover: color-mix(in srgb, var(--wm-color-on-info-container), transparent calc(100% - var(--wm-opacity-hover)));
|
|
206
247
|
--wm-color-on-info-container-focus: color-mix(in srgb, var(--wm-color-on-info-container), transparent calc(100% - var(--wm-opacity-focus)));
|
|
207
248
|
--wm-color-on-info-container-active: color-mix(in srgb, var(--wm-color-on-info-container), transparent calc(100% - var(--wm-opacity-active)));
|
|
208
|
-
--wm-color-
|
|
209
|
-
--wm-color-
|
|
210
|
-
--wm-color-
|
|
211
|
-
--wm-color-on-warning-hover: color-mix(in srgb, var(--wm-color-on-warning), transparent calc(100% - var(--wm-opacity-hover)));
|
|
212
|
-
--wm-color-on-warning-focus: color-mix(in srgb, var(--wm-color-on-warning), transparent calc(100% - var(--wm-opacity-focus)));
|
|
213
|
-
--wm-color-on-warning-active: color-mix(in srgb, var(--wm-color-on-warning), transparent calc(100% - var(--wm-opacity-active)));
|
|
249
|
+
--wm-color-on-info-hover: color-mix(in srgb, var(--wm-color-on-info), transparent calc(100% - var(--wm-opacity-hover)));
|
|
250
|
+
--wm-color-on-info-focus: color-mix(in srgb, var(--wm-color-on-info), transparent calc(100% - var(--wm-opacity-focus)));
|
|
251
|
+
--wm-color-on-info-active: color-mix(in srgb, var(--wm-color-on-info), transparent calc(100% - var(--wm-opacity-active)));
|
|
214
252
|
--wm-color-warning-container-hover: color-mix(in srgb, var(--wm-color-warning-container), transparent calc(100% - var(--wm-opacity-hover)));
|
|
215
253
|
--wm-color-warning-container-focus: color-mix(in srgb, var(--wm-color-warning-container), transparent calc(100% - var(--wm-opacity-focus)));
|
|
216
254
|
--wm-color-warning-container-active: color-mix(in srgb, var(--wm-color-warning-container), transparent calc(100% - var(--wm-opacity-active)));
|
|
255
|
+
--wm-color-warning-hover: color-mix(in srgb, var(--wm-color-warning), transparent calc(100% - var(--wm-opacity-hover)));
|
|
256
|
+
--wm-color-warning-focus: color-mix(in srgb, var(--wm-color-warning), transparent calc(100% - var(--wm-opacity-focus)));
|
|
257
|
+
--wm-color-warning-active: color-mix(in srgb, var(--wm-color-warning), transparent calc(100% - var(--wm-opacity-active)));
|
|
217
258
|
--wm-color-on-warning-container-hover: color-mix(in srgb, var(--wm-color-on-warning-container), transparent calc(100% - var(--wm-opacity-hover)));
|
|
218
259
|
--wm-color-on-warning-container-focus: color-mix(in srgb, var(--wm-color-on-warning-container), transparent calc(100% - var(--wm-opacity-focus)));
|
|
219
260
|
--wm-color-on-warning-container-active: color-mix(in srgb, var(--wm-color-on-warning-container), transparent calc(100% - var(--wm-opacity-active)));
|
|
220
|
-
--wm-color-
|
|
221
|
-
--wm-color-
|
|
222
|
-
--wm-color-
|
|
223
|
-
--wm-color-on-error-hover: color-mix(in srgb, var(--wm-color-on-error), transparent calc(100% - var(--wm-opacity-hover)));
|
|
224
|
-
--wm-color-on-error-focus: color-mix(in srgb, var(--wm-color-on-error), transparent calc(100% - var(--wm-opacity-focus)));
|
|
225
|
-
--wm-color-on-error-active: color-mix(in srgb, var(--wm-color-on-error), transparent calc(100% - var(--wm-opacity-active)));
|
|
261
|
+
--wm-color-on-warning-hover: color-mix(in srgb, var(--wm-color-on-warning), transparent calc(100% - var(--wm-opacity-hover)));
|
|
262
|
+
--wm-color-on-warning-focus: color-mix(in srgb, var(--wm-color-on-warning), transparent calc(100% - var(--wm-opacity-focus)));
|
|
263
|
+
--wm-color-on-warning-active: color-mix(in srgb, var(--wm-color-on-warning), transparent calc(100% - var(--wm-opacity-active)));
|
|
226
264
|
--wm-color-error-container-hover: color-mix(in srgb, var(--wm-color-error-container), transparent calc(100% - var(--wm-opacity-hover)));
|
|
227
265
|
--wm-color-error-container-focus: color-mix(in srgb, var(--wm-color-error-container), transparent calc(100% - var(--wm-opacity-focus)));
|
|
228
266
|
--wm-color-error-container-active: color-mix(in srgb, var(--wm-color-error-container), transparent calc(100% - var(--wm-opacity-active)));
|
|
267
|
+
--wm-color-error-hover: color-mix(in srgb, var(--wm-color-error), transparent calc(100% - var(--wm-opacity-hover)));
|
|
268
|
+
--wm-color-error-focus: color-mix(in srgb, var(--wm-color-error), transparent calc(100% - var(--wm-opacity-focus)));
|
|
269
|
+
--wm-color-error-active: color-mix(in srgb, var(--wm-color-error), transparent calc(100% - var(--wm-opacity-active)));
|
|
229
270
|
--wm-color-on-error-container-hover: color-mix(in srgb, var(--wm-color-on-error-container), transparent calc(100% - var(--wm-opacity-hover)));
|
|
230
271
|
--wm-color-on-error-container-focus: color-mix(in srgb, var(--wm-color-on-error-container), transparent calc(100% - var(--wm-opacity-focus)));
|
|
231
272
|
--wm-color-on-error-container-active: color-mix(in srgb, var(--wm-color-on-error-container), transparent calc(100% - var(--wm-opacity-active)));
|
|
273
|
+
--wm-color-on-error-hover: color-mix(in srgb, var(--wm-color-on-error), transparent calc(100% - var(--wm-opacity-hover)));
|
|
274
|
+
--wm-color-on-error-focus: color-mix(in srgb, var(--wm-color-on-error), transparent calc(100% - var(--wm-opacity-focus)));
|
|
275
|
+
--wm-color-on-error-active: color-mix(in srgb, var(--wm-color-on-error), transparent calc(100% - var(--wm-opacity-active)));
|
|
232
276
|
--wm-color-background-hover: color-mix(in srgb, var(--wm-color-background), transparent calc(100% - var(--wm-opacity-hover)));
|
|
233
277
|
--wm-color-background-focus: color-mix(in srgb, var(--wm-color-background), transparent calc(100% - var(--wm-opacity-focus)));
|
|
234
278
|
--wm-color-background-active: color-mix(in srgb, var(--wm-color-background), transparent calc(100% - var(--wm-opacity-active)));
|
|
235
279
|
--wm-color-on-background-hover: color-mix(in srgb, var(--wm-color-on-background), transparent calc(100% - var(--wm-opacity-hover)));
|
|
236
280
|
--wm-color-on-background-focus: color-mix(in srgb, var(--wm-color-on-background), transparent calc(100% - var(--wm-opacity-focus)));
|
|
237
|
-
--wm-color-on-background-active: color-mix(in srgb, var(--wm-color-on-
|
|
281
|
+
--wm-color-on-background-active: color-mix(in srgb, var(--wm-color-on-background), transparent calc(100% - var(--wm-opacity-active)));
|
|
282
|
+
--wm-color-surface-container-hover: color-mix(in srgb, var(--wm-color-surface-container), transparent calc(100% - var(--wm-opacity-hover)));
|
|
283
|
+
--wm-color-surface-container-focus: color-mix(in srgb, var(--wm-color-surface-container), transparent calc(100% - var(--wm-opacity-focus)));
|
|
284
|
+
--wm-color-surface-container-active: color-mix(in srgb, var(--wm-color-surface-container), transparent calc(100% - var(--wm-opacity-active)));
|
|
238
285
|
--wm-color-surface-hover: color-mix(in srgb, var(--wm-color-surface), transparent calc(100% - var(--wm-opacity-hover)));
|
|
239
286
|
--wm-color-surface-focus: color-mix(in srgb, var(--wm-color-surface), transparent calc(100% - var(--wm-opacity-focus)));
|
|
240
287
|
--wm-color-surface-active: color-mix(in srgb, var(--wm-color-surface), transparent calc(100% - var(--wm-opacity-active)));
|
|
241
288
|
--wm-color-on-surface-hover: color-mix(in srgb, var(--wm-color-on-surface), transparent calc(100% - var(--wm-opacity-hover)));
|
|
242
289
|
--wm-color-on-surface-focus: color-mix(in srgb, var(--wm-color-on-surface), transparent calc(100% - var(--wm-opacity-focus)));
|
|
243
290
|
--wm-color-on-surface-active: color-mix(in srgb, var(--wm-color-on-surface), transparent calc(100% - var(--wm-opacity-active)));
|
|
244
|
-
--wm-color-surface-variant-hover: color-mix(in srgb, var(--wm-color-surface-variant), transparent calc(100% - var(--wm-opacity-hover)));
|
|
245
|
-
--wm-color-surface-variant-focus: color-mix(in srgb, var(--wm-color-surface-variant), transparent calc(100% - var(--wm-opacity-focus)));
|
|
246
|
-
--wm-color-surface-variant-active: color-mix(in srgb, var(--wm-color-surface-variant), transparent calc(100% - var(--wm-opacity-active)));
|
|
247
|
-
--wm-color-on-surface-variant-hover: color-mix(in srgb, var(--wm-color-on-surface-variant), transparent calc(100% - var(--wm-opacity-hover)));
|
|
248
|
-
--wm-color-on-surface-variant-focus: color-mix(in srgb, var(--wm-color-on-surface-variant), transparent calc(100% - var(--wm-opacity-focus)));
|
|
249
|
-
--wm-color-on-surface-variant-active: color-mix(in srgb, var(--wm-color-on-surface-variant), transparent calc(100% - var(--wm-opacity-active)));
|
|
250
291
|
--wm-color-inverse-surface-hover: color-mix(in srgb, var(--wm-color-inverse-surface), transparent calc(100% - var(--wm-opacity-hover)));
|
|
251
292
|
--wm-color-inverse-surface-focus: color-mix(in srgb, var(--wm-color-inverse-surface), transparent calc(100% - var(--wm-opacity-focus)));
|
|
252
293
|
--wm-color-inverse-surface-active: color-mix(in srgb, var(--wm-color-inverse-surface), transparent calc(100% - var(--wm-opacity-active)));
|
|
@@ -256,72 +297,9 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
|
|
|
256
297
|
--wm-color-inverse-primary-hover: color-mix(in srgb, var(--wm-color-inverse-primary), transparent calc(100% - var(--wm-opacity-hover)));
|
|
257
298
|
--wm-color-inverse-primary-focus: color-mix(in srgb, var(--wm-color-inverse-primary), transparent calc(100% - var(--wm-opacity-focus)));
|
|
258
299
|
--wm-color-inverse-primary-active: color-mix(in srgb, var(--wm-color-inverse-primary), transparent calc(100% - var(--wm-opacity-active)));
|
|
259
|
-
--wm-color-primary-fixed-hover: color-mix(in srgb, var(--wm-color-primary-fixed), transparent calc(100% - var(--wm-opacity-hover)));
|
|
260
|
-
--wm-color-primary-fixed-focus: color-mix(in srgb, var(--wm-color-primary-fixed), transparent calc(100% - var(--wm-opacity-focus)));
|
|
261
|
-
--wm-color-primary-fixed-active: color-mix(in srgb, var(--wm-color-primary-fixed), transparent calc(100% - var(--wm-opacity-active)));
|
|
262
|
-
--wm-color-on-primary-fixed-hover: color-mix(in srgb, var(--wm-color-on-primary-fixed), transparent calc(100% - var(--wm-opacity-hover)));
|
|
263
|
-
--wm-color-on-primary-fixed-focus: color-mix(in srgb, var(--wm-color-on-primary-fixed), transparent calc(100% - var(--wm-opacity-focus)));
|
|
264
|
-
--wm-color-on-primary-fixed-active: color-mix(in srgb, var(--wm-color-on-primary-fixed), transparent calc(100% - var(--wm-opacity-active)));
|
|
265
|
-
--wm-color-primary-fixed-dim-hover: color-mix(in srgb, var(--wm-color-primary-fixed-dim), transparent calc(100% - var(--wm-opacity-hover)));
|
|
266
|
-
--wm-color-primary-fixed-dim-focus: color-mix(in srgb, var(--wm-color-primary-fixed-dim), transparent calc(100% - var(--wm-opacity-focus)));
|
|
267
|
-
--wm-color-primary-fixed-dim-active: color-mix(in srgb, var(--wm-color-primary-fixed-dim), transparent calc(100% - var(--wm-opacity-active)));
|
|
268
|
-
--wm-color-on-primary-fixed-variant-hover: color-mix(in srgb, var(--wm-color-on-primary-fixed-variant), transparent calc(100% - var(--wm-opacity-hover)));
|
|
269
|
-
--wm-color-on-primary-fixed-variant-focus: color-mix(in srgb, var(--wm-color-on-primary-fixed-variant), transparent calc(100% - var(--wm-opacity-focus)));
|
|
270
|
-
--wm-color-on-primary-fixed-variant-active: color-mix(in srgb, var(--wm-color-on-primary-fixed-variant), transparent calc(100% - var(--wm-opacity-active)));
|
|
271
|
-
--wm-color-secondary-fixed-hover: color-mix(in srgb, var(--wm-color-secondary-fixed), transparent calc(100% - var(--wm-opacity-hover)));
|
|
272
|
-
--wm-color-secondary-fixed-focus: color-mix(in srgb, var(--wm-color-secondary-fixed), transparent calc(100% - var(--wm-opacity-focus)));
|
|
273
|
-
--wm-color-secondary-fixed-active: color-mix(in srgb, var(--wm-color-secondary-fixed), transparent calc(100% - var(--wm-opacity-active)));
|
|
274
|
-
--wm-color-on-secondary-fixed-hover: color-mix(in srgb, var(--wm-color-on-secondary-fixed), transparent calc(100% - var(--wm-opacity-hover)));
|
|
275
|
-
--wm-color-on-secondary-fixed-focus: color-mix(in srgb, var(--wm-color-on-secondary-fixed), transparent calc(100% - var(--wm-opacity-focus)));
|
|
276
|
-
--wm-color-on-secondary-fixed-active: color-mix(in srgb, var(--wm-color-on-secondary-fixed), transparent calc(100% - var(--wm-opacity-active)));
|
|
277
|
-
--wm-color-secondary-fixed-dim-hover: color-mix(in srgb, var(--wm-color-secondary-fixed-dim), transparent calc(100% - var(--wm-opacity-hover)));
|
|
278
|
-
--wm-color-secondary-fixed-dim-focus: color-mix(in srgb, var(--wm-color-secondary-fixed-dim), transparent calc(100% - var(--wm-opacity-focus)));
|
|
279
|
-
--wm-color-secondary-fixed-dim-active: color-mix(in srgb, var(--wm-color-secondary-fixed-dim), transparent calc(100% - var(--wm-opacity-active)));
|
|
280
|
-
--wm-color-on-secondary-fixed-variant-hover: color-mix(in srgb, var(--wm-color-on-secondary-fixed-variant), transparent calc(100% - var(--wm-opacity-hover)));
|
|
281
|
-
--wm-color-on-secondary-fixed-variant-focus: color-mix(in srgb, var(--wm-color-on-secondary-fixed-variant), transparent calc(100% - var(--wm-opacity-focus)));
|
|
282
|
-
--wm-color-on-secondary-fixed-variant-active: color-mix(in srgb, var(--wm-color-on-secondary-fixed-variant), transparent calc(100% - var(--wm-opacity-active)));
|
|
283
|
-
--wm-color-tertiary-fixed-hover: color-mix(in srgb, var(--wm-color-tertiary-fixed), transparent calc(100% - var(--wm-opacity-hover)));
|
|
284
|
-
--wm-color-tertiary-fixed-focus: color-mix(in srgb, var(--wm-color-tertiary-fixed), transparent calc(100% - var(--wm-opacity-focus)));
|
|
285
|
-
--wm-color-tertiary-fixed-active: color-mix(in srgb, var(--wm-color-tertiary-fixed), transparent calc(100% - var(--wm-opacity-active)));
|
|
286
|
-
--wm-color-on-tertiary-fixed-hover: color-mix(in srgb, var(--wm-color-on-tertiary-fixed), transparent calc(100% - var(--wm-opacity-hover)));
|
|
287
|
-
--wm-color-on-tertiary-fixed-focus: color-mix(in srgb, var(--wm-color-on-tertiary-fixed), transparent calc(100% - var(--wm-opacity-focus)));
|
|
288
|
-
--wm-color-on-tertiary-fixed-active: color-mix(in srgb, var(--wm-color-on-tertiary-fixed), transparent calc(100% - var(--wm-opacity-active)));
|
|
289
|
-
--wm-color-tertiary-fixed-dim-hover: color-mix(in srgb, var(--wm-color-tertiary-fixed-dim), transparent calc(100% - var(--wm-opacity-hover)));
|
|
290
|
-
--wm-color-tertiary-fixed-dim-focus: color-mix(in srgb, var(--wm-color-tertiary-fixed-dim), transparent calc(100% - var(--wm-opacity-focus)));
|
|
291
|
-
--wm-color-tertiary-fixed-dim-active: color-mix(in srgb, var(--wm-color-tertiary-fixed-dim), transparent calc(100% - var(--wm-opacity-active)));
|
|
292
|
-
--wm-color-on-tertiary-fixed-variant-hover: color-mix(in srgb, var(--wm-color-on-tertiary-fixed-variant), transparent calc(100% - var(--wm-opacity-hover)));
|
|
293
|
-
--wm-color-on-tertiary-fixed-variant-focus: color-mix(in srgb, var(--wm-color-on-tertiary-fixed-variant), transparent calc(100% - var(--wm-opacity-focus)));
|
|
294
|
-
--wm-color-on-tertiary-fixed-variant-active: color-mix(in srgb, var(--wm-color-on-tertiary-fixed-variant), transparent calc(100% - var(--wm-opacity-active)));
|
|
295
|
-
--wm-color-surface-tint-hover: color-mix(in srgb, var(--wm-color-surface-tint), transparent calc(100% - var(--wm-opacity-hover)));
|
|
296
|
-
--wm-color-surface-tint-focus: color-mix(in srgb, var(--wm-color-surface-tint), transparent calc(100% - var(--wm-opacity-focus)));
|
|
297
|
-
--wm-color-surface-tint-active: color-mix(in srgb, var(--wm-color-surface-tint), transparent calc(100% - var(--wm-opacity-active)));
|
|
298
|
-
--wm-color-surface-dim-hover: color-mix(in srgb, var(--wm-color-surface-dim), transparent calc(100% - var(--wm-opacity-hover)));
|
|
299
|
-
--wm-color-surface-dim-focus: color-mix(in srgb, var(--wm-color-surface-dim), transparent calc(100% - var(--wm-opacity-focus)));
|
|
300
|
-
--wm-color-surface-dim-active: color-mix(in srgb, var(--wm-color-surface-dim), transparent calc(100% - var(--wm-opacity-active)));
|
|
301
|
-
--wm-color-surface-bright-hover: color-mix(in srgb, var(--wm-color-surface-bright), transparent calc(100% - var(--wm-opacity-hover)));
|
|
302
|
-
--wm-color-surface-bright-focus: color-mix(in srgb, var(--wm-color-surface-bright), transparent calc(100% - var(--wm-opacity-focus)));
|
|
303
|
-
--wm-color-surface-bright-active: color-mix(in srgb, var(--wm-color-surface-bright), transparent calc(100% - var(--wm-opacity-active)));
|
|
304
|
-
--wm-color-surface-container-lowest-hover: color-mix(in srgb, var(--wm-color-surface-container-lowest), transparent calc(100% - var(--wm-opacity-hover)));
|
|
305
|
-
--wm-color-surface-container-lowest-focus: color-mix(in srgb, var(--wm-color-surface-container-lowest), transparent calc(100% - var(--wm-opacity-focus)));
|
|
306
|
-
--wm-color-surface-container-lowest-active: color-mix(in srgb, var(--wm-color-surface-container-lowest), transparent calc(100% - var(--wm-opacity-active)));
|
|
307
|
-
--wm-color-surface-container-low-hover: color-mix(in srgb, var(--wm-color-surface-container-low), transparent calc(100% - var(--wm-opacity-hover)));
|
|
308
|
-
--wm-color-surface-container-low-focus: color-mix(in srgb, var(--wm-color-surface-container-low), transparent calc(100% - var(--wm-opacity-focus)));
|
|
309
|
-
--wm-color-surface-container-low-active: color-mix(in srgb, var(--wm-color-surface-container-low), transparent calc(100% - var(--wm-opacity-active)));
|
|
310
|
-
--wm-color-surface-container-hover: color-mix(in srgb, var(--wm-color-surface-container), transparent calc(100% - var(--wm-opacity-hover)));
|
|
311
|
-
--wm-color-surface-container-focus: color-mix(in srgb, var(--wm-color-surface-container), transparent calc(100% - var(--wm-opacity-focus)));
|
|
312
|
-
--wm-color-surface-container-active: color-mix(in srgb, var(--wm-color-surface-container), transparent calc(100% - var(--wm-opacity-active)));
|
|
313
|
-
--wm-color-surface-container-high-hover: color-mix(in srgb, var(--wm-color-surface-container-high), transparent calc(100% - var(--wm-opacity-hover)));
|
|
314
|
-
--wm-color-surface-container-high-focus: color-mix(in srgb, var(--wm-color-surface-container-high), transparent calc(100% - var(--wm-opacity-focus)));
|
|
315
|
-
--wm-color-surface-container-high-active: color-mix(in srgb, var(--wm-color-surface-container-high), transparent calc(100% - var(--wm-opacity-active)));
|
|
316
|
-
--wm-color-surface-container-highest-hover: color-mix(in srgb, var(--wm-color-surface-container-highest), transparent calc(100% - var(--wm-opacity-hover)));
|
|
317
|
-
--wm-color-surface-container-highest-focus: color-mix(in srgb, var(--wm-color-surface-container-highest), transparent calc(100% - var(--wm-opacity-focus)));
|
|
318
|
-
--wm-color-surface-container-highest-active: color-mix(in srgb, var(--wm-color-surface-container-highest), transparent calc(100% - var(--wm-opacity-active)));
|
|
319
300
|
--wm-color-outline-hover: color-mix(in srgb, var(--wm-color-outline), transparent calc(100% - var(--wm-opacity-hover)));
|
|
320
301
|
--wm-color-outline-focus: color-mix(in srgb, var(--wm-color-outline), transparent calc(100% - var(--wm-opacity-focus)));
|
|
321
302
|
--wm-color-outline-active: color-mix(in srgb, var(--wm-color-outline), transparent calc(100% - var(--wm-opacity-active)));
|
|
322
|
-
--wm-color-outline-variant-hover: color-mix(in srgb, var(--wm-color-outline-variant), transparent calc(100% - var(--wm-opacity-hover)));
|
|
323
|
-
--wm-color-outline-variant-focus: color-mix(in srgb, var(--wm-color-outline-variant), transparent calc(100% - var(--wm-opacity-focus)));
|
|
324
|
-
--wm-color-outline-variant-active: color-mix(in srgb, var(--wm-color-outline-variant), transparent calc(100% - var(--wm-opacity-active)));
|
|
325
303
|
--wm-color-shadow-hover: color-mix(in srgb, var(--wm-color-shadow), transparent calc(100% - var(--wm-opacity-hover)));
|
|
326
304
|
--wm-color-shadow-focus: color-mix(in srgb, var(--wm-color-shadow), transparent calc(100% - var(--wm-opacity-focus)));
|
|
327
305
|
--wm-color-shadow-active: color-mix(in srgb, var(--wm-color-shadow), transparent calc(100% - var(--wm-opacity-active)));
|
|
@@ -334,7 +312,10 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
|
|
|
334
312
|
--wm-color-black-hover: color-mix(in srgb, var(--wm-color-black), transparent calc(100% - var(--wm-opacity-hover)));
|
|
335
313
|
--wm-color-black-focus: color-mix(in srgb, var(--wm-color-black), transparent calc(100% - var(--wm-opacity-focus)));
|
|
336
314
|
--wm-color-black-active: color-mix(in srgb, var(--wm-color-black), transparent calc(100% - var(--wm-opacity-active)));
|
|
337
|
-
|
|
315
|
+
--wm-box-shadow: 0px 0px 40px rgba(29, 58, 83, 0.1);
|
|
316
|
+
--wm-box-shadow-sm: 0 0.125rem 0.25rem rgba(29, 58, 83, 0.15);
|
|
317
|
+
--wm-box-shadow-lg: 0 1rem 3rem rgba(29, 58, 83, 0.15);
|
|
318
|
+
--wm-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
|
|
338
319
|
--wm-display-large-font-family: var(--wm-font-family-brand);
|
|
339
320
|
--wm-display-large-font-weight: var(--wm-font-weight-regular);
|
|
340
321
|
--wm-display-large-font-size: 57px;
|
|
@@ -419,64 +400,9 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
|
|
|
419
400
|
--wm-icon-size-3x: calc(var(--wm-icon-size) * 1.75);
|
|
420
401
|
--wm-icon-size-4x: calc(var(--wm-icon-size) * 2);
|
|
421
402
|
--wm-icon-size-5x: calc(var(--wm-icon-size) * 2.25);
|
|
422
|
-
--wm-
|
|
423
|
-
--wm-
|
|
424
|
-
--wm-
|
|
425
|
-
--wm-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
|
|
426
|
-
}
|
|
427
|
-
@media (prefers-color-scheme: dark) {
|
|
428
|
-
:root:not(:has(.wm-studio)) {
|
|
429
|
-
--wm-color-background: #141218;
|
|
430
|
-
--wm-color-error: #f2b8b5;
|
|
431
|
-
--wm-color-error-container: #8c1d18;
|
|
432
|
-
--wm-color-inverse-on-surface: #322f35;
|
|
433
|
-
--wm-color-inverse-primary: #6750a4;
|
|
434
|
-
--wm-color-inverse-surface: #e6e0e9;
|
|
435
|
-
--wm-color-on-background: #e6e0e9;
|
|
436
|
-
--wm-color-on-error: #601410;
|
|
437
|
-
--wm-color-on-error-container: #f9dedc;
|
|
438
|
-
--wm-color-on-primary: #381e72;
|
|
439
|
-
--wm-color-on-primary-container: #eaddff;
|
|
440
|
-
--wm-color-on-primary-fixed: #21005d;
|
|
441
|
-
--wm-color-on-primary-fixed-variant: #4f378b;
|
|
442
|
-
--wm-color-on-secondary: #332d41;
|
|
443
|
-
--wm-color-on-secondary-container: #e8def8;
|
|
444
|
-
--wm-color-on-secondary-fixed: #1d192b;
|
|
445
|
-
--wm-color-on-secondary-fixed-variant: #4a4458;
|
|
446
|
-
--wm-color-on-surface: #e6e0e9;
|
|
447
|
-
--wm-color-on-surface-variant: #cac4d0;
|
|
448
|
-
--wm-color-on-tertiary: #492532;
|
|
449
|
-
--wm-color-on-tertiary-container: #ffd8e4;
|
|
450
|
-
--wm-color-on-tertiary-fixed: #31111d;
|
|
451
|
-
--wm-color-on-tertiary-fixed-variant: #633b48;
|
|
452
|
-
--wm-color-on-success: #1d192b;
|
|
453
|
-
--wm-color-outline: #938f99;
|
|
454
|
-
--wm-color-outline-variant: #49454f;
|
|
455
|
-
--wm-color-primary: #d0bcfe;
|
|
456
|
-
--wm-color-primary-container: #4f378b;
|
|
457
|
-
--wm-color-primary-fixed: #eaddff;
|
|
458
|
-
--wm-color-primary-fixed-dim: #d0bcff;
|
|
459
|
-
--wm-color-scrim: #000000;
|
|
460
|
-
--wm-color-secondary: #ccc2dc;
|
|
461
|
-
--wm-color-secondary-container: #4a4458;
|
|
462
|
-
--wm-color-secondary-fixed: #e8def8;
|
|
463
|
-
--wm-color-secondary-fixed-dim: #ccc2dc;
|
|
464
|
-
--wm-color-shadow: #ffffff;
|
|
465
|
-
--wm-color-surface: #141218;
|
|
466
|
-
--wm-color-surface-bright: #3b383e;
|
|
467
|
-
--wm-color-surface-container: #211f26;
|
|
468
|
-
--wm-color-surface-container-high: #2b2930;
|
|
469
|
-
--wm-color-surface-container-highest: #36343b;
|
|
470
|
-
--wm-color-surface-container-low: #1d1b20;
|
|
471
|
-
--wm-color-surface-container-lowest: #0f0d13;
|
|
472
|
-
--wm-color-surface-dim: #141218;
|
|
473
|
-
--wm-color-surface-tint: #d0bcff;
|
|
474
|
-
--wm-color-surface-variant: #49454f;
|
|
475
|
-
--wm-color-tertiary: #efb8c8;
|
|
476
|
-
--wm-color-tertiary-container: #633b48;
|
|
477
|
-
--wm-color-tertiary-fixed: #ffd8e4;
|
|
478
|
-
--wm-color-tertiary-fixed-dim: #efb8c8;
|
|
479
|
-
}
|
|
403
|
+
--wm-opacity-hover: 8%;
|
|
404
|
+
--wm-opacity-focus: 12%;
|
|
405
|
+
--wm-opacity-active: 16%;
|
|
480
406
|
}
|
|
481
407
|
/*=========
|
|
482
408
|
css variables doesn't support by less functions to generate lighten, darken, fade, etc.
|