@yuuvis/material 2.1.19 → 2.1.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +73 -0
- package/package.json +1 -1
- package/scss/elements/_root.scss +4 -0
- package/scss/index.scss +16 -1
- package/scss/themes/yuuvis-standard/mat-theme-components.scss +171 -0
- package/scss/themes/yuuvis-standard/mat-theme-config.scss +148 -0
- package/scss/themes/yuuvis-standard/mat-theme.scss +11 -0
- package/scss/themes/yuuvis-standard/theme-color.scss +19 -7
- package/scss/themes/yuuvis-standard/theme-typo.scss +21 -0
- package/scss/token/_css-token.scss +1 -3
- package/scss/token/_token.scss +309 -278
- package/scss/token/_token.tools.scss +19 -8
- package/scss/themes/yuuvis-standard/theme.scss +0 -284
package/scss/token/_token.scss
CHANGED
|
@@ -1,335 +1,366 @@
|
|
|
1
1
|
@use 'sass:map';
|
|
2
2
|
@use 'sass:math';
|
|
3
3
|
@use '../themes/yuuvis-standard/theme-color';
|
|
4
|
+
@use '../themes/yuuvis-standard/theme-typo';
|
|
4
5
|
@use './token-typo.tools' as t;
|
|
6
|
+
//@use './token.config' as token-config;
|
|
5
7
|
|
|
6
8
|
/*
|
|
9
|
+
Reference Token
|
|
7
10
|
|
|
8
|
-
|
|
9
|
-
|
|
11
|
+
Are used to be assigned to other tokens (mat & ymt).
|
|
12
|
+
They are usually used to be applied to material sys tokens (overrides).
|
|
13
|
+
But they can also be used to be applied to ymt token here when there is no appropriate material sys token is available.
|
|
14
|
+
No Css Vars were created from it but they should be available from outside of this module.
|
|
10
15
|
*/
|
|
11
|
-
|
|
12
|
-
//Base
|
|
13
|
-
$ref-font-family: 'Mulish', sans-serif;
|
|
14
|
-
$ref-font-weight-bold: 800;
|
|
15
|
-
$ref-font-weight-medium: 700;
|
|
16
|
-
$ref-font-weight-regular: 500;
|
|
17
|
-
|
|
18
16
|
//Body
|
|
19
17
|
$ref-font-body-line-height: 1.6;
|
|
20
|
-
|
|
21
18
|
$ref-font-body-medium-tracking: 0.005rem;
|
|
22
|
-
$font-body: var(--mat-sys-body-medium);
|
|
23
|
-
$font-body-font: var(--mat-sys-body-medium-font);
|
|
24
|
-
$font-body-line-height: var(--mat-sys-body-medium-line-height);
|
|
25
|
-
$font-body-size: var(--mat-sys-body-medium-size);
|
|
26
|
-
$font-body-tracking: var(--mat-sys-body-medium-tracking);
|
|
27
|
-
$font-body-weight: var(--mat-sys-body-medium-weight);
|
|
28
|
-
|
|
29
19
|
$ref-font-body-small-tracking: 0.005rem;
|
|
30
|
-
$font-body-subtle: var(--mat-sys-body-small);
|
|
31
|
-
$font-body-subtle-font: var(--mat-sys-body-small-font);
|
|
32
|
-
$font-body-subtle-line-height: var(--mat-sys-body-small-line-height);
|
|
33
|
-
$font-body-subtle-size: var(--mat-sys-body-small-size);
|
|
34
|
-
$font-body-subtle-tracking: var(--mat-sys-body-small-tracking);
|
|
35
|
-
$font-body-subtle-weight: var(--mat-sys-body-small-weight);
|
|
36
20
|
|
|
37
21
|
//Headlines
|
|
38
22
|
$ref-font-headline-line-height: 1.4;
|
|
39
23
|
|
|
40
24
|
$ref-font-headline-small-size: t.rem(16px);
|
|
41
25
|
$ref-font-headline-small-tracking: 0;
|
|
42
|
-
$font-headline-small: var(--mat-sys-headline-small);
|
|
43
|
-
$font-headline-small-font: var(--mat-sys-headline-small-font);
|
|
44
|
-
$font-headline-small-line-height: var(--mat-sys-headline-small-line-height);
|
|
45
|
-
$font-headline-small-size: var(--mat-sys-headline-small-size);
|
|
46
|
-
$font-headline-small-tracking: var(--mat-sys-headline-small-tracking);
|
|
47
|
-
$font-headline-small-weight: var(--mat-sys-headline-small-weight);
|
|
48
26
|
|
|
49
27
|
$ref-font-headline-medium-size: t.rem(20px);
|
|
50
28
|
$ref-font-headline-medium-tracking: 0;
|
|
51
|
-
$font-headline-medium: var(--mat-sys-headline-medium);
|
|
52
|
-
$font-headline-medium-font: var(--mat-sys-headline-medium-font);
|
|
53
|
-
$font-headline-medium-line-height: var(--mat-sys-headline-medium-line-height);
|
|
54
|
-
$font-headline-medium-size: var(--mat-sys-headline-medium-size);
|
|
55
|
-
$font-headline-medium-tracking: var(--mat-sys-headline-medium-tracking);
|
|
56
|
-
$font-headline-medium-weight: var(--mat-sys-headline-medium-weight);
|
|
57
29
|
|
|
58
30
|
$ref-font-headline-large-size: t.rem(25px);
|
|
59
31
|
$ref-font-headline-large-tracking: 0;
|
|
60
|
-
$font-headline-large: var(--mat-sys-headline-large);
|
|
61
|
-
$font-headline-large-font: var(--mat-sys-headline-large-font);
|
|
62
|
-
$font-headline-large-line-height: var(--mat-sys-headline-large-line-height);
|
|
63
|
-
$font-headline-large-size: var(--mat-sys-headline-large-size);
|
|
64
|
-
$font-headline-large-tracking: var(--mat-sys-headline-large-tracking);
|
|
65
|
-
$font-headline-large-weight: var(--mat-sys-headline-large-weight);
|
|
66
32
|
|
|
67
33
|
//Title
|
|
68
34
|
$ref-font-title-line-height: 1.4;
|
|
69
35
|
|
|
70
|
-
// Todo: Check
|
|
71
36
|
$ref-font-title-smallest-size: t.rem(14px);
|
|
72
37
|
$ref-font-title-smallest-tracking: 0.006rem;
|
|
73
|
-
$font-title-smallest: var(--mat-sys-title-small);
|
|
74
|
-
$font-title-smallest-font: var(--mat-sys-title-small-font);
|
|
75
|
-
$font-title-smallest-line-height: var(--mat-sys-title-small-line-height);
|
|
76
|
-
$font-title-smallest-size: var(--mat-sys-title-small-size);
|
|
77
|
-
$font-title-smallest-tracking: var(--mat-sys-title-small-tracking);
|
|
78
|
-
$font-title-smallest-weight: var(--mat-sys-title-small-weight);
|
|
79
38
|
|
|
80
39
|
$ref-font-title-small-size: t.rem(16px);
|
|
81
40
|
$ref-font-title-small-tracking: 0.006rem;
|
|
82
|
-
$font-title-small: var(--mat-sys-title-small);
|
|
83
|
-
$font-title-small-font: var(--mat-sys-title-small-font);
|
|
84
|
-
$font-title-small-line-height: var(--mat-sys-title-small-line-height);
|
|
85
|
-
$font-title-small-size: var(--mat-sys-title-small-size);
|
|
86
|
-
$font-title-small-tracking: var(--mat-sys-title-small-tracking);
|
|
87
|
-
$font-title-small-weight: var(--mat-sys-title-small-weight);
|
|
88
41
|
|
|
89
42
|
$ref-font-title-medium-size: t.rem(18px);
|
|
90
43
|
$ref-font-title-medium-tracking: 0.009rem;
|
|
91
|
-
$font-title-medium: var(--mat-sys-title-medium);
|
|
92
|
-
$font-title-medium-font: var(--mat-sys-title-medium-font);
|
|
93
|
-
$font-title-medium-line-height: var(--mat-sys-title-medium-line-height);
|
|
94
|
-
$font-title-medium-size: var(--mat-sys-title-medium-size);
|
|
95
|
-
$font-title-medium-tracking: var(--mat-sys-title-medium-tracking);
|
|
96
|
-
$font-title-medium-weight: var(--mat-sys-title-medium-weight);
|
|
97
44
|
|
|
98
45
|
$ref-font-title-large-size: t.rem(20px);
|
|
99
46
|
$ref-font-title-large-tracking: 0;
|
|
100
|
-
$font-title-large: var(--mat-sys-title-large);
|
|
101
|
-
$font-title-large-font: var(--mat-sys-title-large-font);
|
|
102
|
-
$font-title-large-line-height: var(--mat-sys-title-large-line-height);
|
|
103
|
-
$font-title-large-size: var(--mat-sys-title-large-size);
|
|
104
|
-
$font-title-large-tracking: var(--mat-sys-title-large-tracking);
|
|
105
|
-
$font-title-large-weight: var(--mat-sys-title-large-weight);
|
|
106
|
-
|
|
107
|
-
//Additional Font Token (TypeScale Major Second | Scale Factor: 1.125 | Design Pixel Base: 14px)
|
|
108
|
-
//todo remove this format
|
|
109
|
-
$font-subhead: var(--ymt-font-subhead-weight) var(--ymt-font-subhead-size) / var(--ymt-font-subhead-line-height) var(--ymt-font-subhead-font);
|
|
110
|
-
$font-subhead-font: $ref-font-family;
|
|
111
|
-
$font-subhead-line-height: $ref-font-headline-line-height;
|
|
112
|
-
$font-subhead-size: t.rem(14px);
|
|
113
|
-
$font-subhead-tracking: 0;
|
|
114
|
-
$font-subhead-weight: $ref-font-weight-medium;
|
|
115
|
-
|
|
116
|
-
$font-app-name: var(--ymt-font-app-name-weight) var(--ymt-font-app-name-size) / var(--ymt-font-app-name-line-height) var(--ymt-font-app-name-font);
|
|
117
|
-
$font-app-name-font: $ref-font-family;
|
|
118
|
-
$font-app-name-line-height: 1.6;
|
|
119
|
-
$font-app-name-size: t.rem(16px);
|
|
120
|
-
$font-app-name-tracking: 0;
|
|
121
|
-
$font-app-name-weight: $ref-font-weight-bold;
|
|
122
47
|
|
|
123
48
|
|
|
124
49
|
/*
|
|
50
|
+
Private Token
|
|
125
51
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
*/
|
|
129
|
-
//Outlines
|
|
130
|
-
$outline-width: 1px;
|
|
131
|
-
$outline: var(--mat-sys-outline);
|
|
132
|
-
$outline-variant: var(--mat-sys-outline-variant);
|
|
133
|
-
$outline-variant-emphasized: light-dark(#{map.get(theme-color.$primary-palette, 'neutral', 80)}, #{map.get(theme-color.$primary-palette, 'neutral', 80)});
|
|
134
|
-
|
|
135
|
-
//Level (Could be used for text-color, surfaces, outlines)
|
|
136
|
-
|
|
137
|
-
// Primary color
|
|
138
|
-
$primary: var(--mat-sys-primary);
|
|
139
|
-
// Color of the text put on a primary color background
|
|
140
|
-
$on-primary: var(--mat-sys-on-primary);
|
|
141
|
-
// Primary color container (used for surfaces, outlines, text-color)
|
|
142
|
-
$primary-container: var(--mat-sys-primary-container);
|
|
143
|
-
// Color of the text put on a primary color container background
|
|
144
|
-
$on-primary-container: var(--mat-sys-on-primary-container);
|
|
145
|
-
|
|
146
|
-
//Brand (Could be used for text-color, surfaces, outlines)
|
|
147
|
-
$brand: light-dark(#{map.get(theme-color.$primary-palette, 'neutral', 10)}, #{map.get(theme-color.$primary-palette, 'neutral', 6)});
|
|
148
|
-
$on-brand: light-dark(#{map.get(theme-color.$primary-palette, 'neutral', 90)}, #{map.get(theme-color.$primary-palette, 'neutral', 90)});
|
|
149
|
-
|
|
150
|
-
//Status
|
|
151
|
-
// Color for status success, could be used for text-color, surfaces, outlines
|
|
152
|
-
$success: light-dark(#{map.get(theme-color.$success-palette, 30)}, #{map.get(theme-color.$success-palette, 95)}); //(Could be used for text-color, outlines, surfaces)
|
|
153
|
-
$on-success: map.get(theme-color.$success-palette, 100);
|
|
154
|
-
// Surface color for status success containers
|
|
155
|
-
$success-container: map.get(theme-color.$success-palette, 95);
|
|
156
|
-
// Color of the text put on a success color container background
|
|
157
|
-
$on-success-container: map.get(theme-color.$success-palette, 30);
|
|
158
|
-
|
|
159
|
-
// Color for status danger, could be used for text-color, surfaces, outlines
|
|
160
|
-
$danger: var(--mat-sys-error); //(Could be used for text-color, outlines, surfaces)
|
|
161
|
-
$on-danger: var(--mat-sys-on-error);
|
|
162
|
-
// Surface color for status danger containers
|
|
163
|
-
$danger-container: var(--mat-sys-error-container);
|
|
164
|
-
// Color of the text put on a danger color container background
|
|
165
|
-
$on-danger-container: var(--mat-sys-on-error-container);
|
|
166
|
-
|
|
167
|
-
// Color for status warning, could be used for text-color, surfaces, outlines
|
|
168
|
-
$warning: light-dark(#{map.get(theme-color.$warning-palette, 30)}, #{map.get(theme-color.$warning-palette, 95)}); //(Could be used for text-color, outlines, surfaces)
|
|
169
|
-
$on-warning: map.get(theme-color.$warning-palette, 100);
|
|
170
|
-
// Surface color for status warning containers
|
|
171
|
-
$warning-container: map.get(theme-color.$warning-palette, 95);
|
|
172
|
-
// Color of the text put on a warning color container background
|
|
173
|
-
$on-warning-container: map.get(theme-color.$warning-palette, 30);
|
|
174
|
-
|
|
175
|
-
//Inverse
|
|
176
|
-
$inverse-surface: var(--mat-sys-inverse-surface);
|
|
177
|
-
$inverse-surface-90: rgb(from var(--mat-sys-inverse-surface) r g b / 0.9);
|
|
178
|
-
$on-inverse-surface: var(--mat-sys-on-inverse-surface);
|
|
179
|
-
|
|
180
|
-
//Surfaces
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
$surface: var(--mat-sys-surface);
|
|
184
|
-
$surface-container-lowest: var(--mat-sys-surface-container-lowest);
|
|
185
|
-
$surface-container-low: var(--mat-sys-surface-container-low);
|
|
186
|
-
$surface-container: var(--mat-sys-surface-container);
|
|
187
|
-
$surface-container-high: var(--mat-sys-surface-container-high);
|
|
188
|
-
$surface-container-highest: var(--mat-sys-surface-container-highest);
|
|
189
|
-
|
|
190
|
-
//Surfaces - Alias Token (More Semantic)
|
|
191
|
-
//Custom Surface Alias Token should only reference one of Materials surface-* token
|
|
192
|
-
//to ensure that the combination with $on-surface-* is accessible
|
|
193
|
-
//If you are using a custom color instead of make sure that this color is accessible with all on-surface-* token
|
|
194
|
-
$surface-panel: $surface-container-low;
|
|
195
|
-
$surface-app: $surface-container-low;
|
|
196
|
-
|
|
197
|
-
$inverse-surface: var(--mat-sys-inverse-surface);
|
|
198
|
-
$inverse-surface-90: rgb(from #{$inverse-surface} r g b / .9);
|
|
199
|
-
$on-inverse-surface: var(--mat-sys-inverse-on-surface);
|
|
200
|
-
|
|
201
|
-
$scrim: var(--mat-sys-scrim);
|
|
202
|
-
$scrim-opacity: 30;
|
|
203
|
-
|
|
204
|
-
//Surfaces - Foreground Color
|
|
205
|
-
//All on-surface-* token are accessible in combination with all surface-* token
|
|
206
|
-
$on-surface: var(--mat-sys-on-surface);
|
|
207
|
-
$on-surface-type-subtle: light-dark(#{map.get(theme-color.$primary-palette, 'neutral', 40)}, #{map.get(theme-color.$primary-palette, 'neutral', 70)});
|
|
208
|
-
|
|
209
|
-
//Text (Alias for Surfaces - Foreground Color Token)
|
|
210
|
-
$text-color: $on-surface;
|
|
211
|
-
$text-color-subtle: $on-surface-type-subtle;
|
|
212
|
-
$text-color-primary: $on-primary;
|
|
213
|
-
|
|
214
|
-
//Text Selection
|
|
215
|
-
$text-selection-container: var(--mat-sys-primary-container);
|
|
216
|
-
$on-text-selection-container: var(--mat-sys-on-primary-container);
|
|
217
|
-
|
|
218
|
-
// PANES
|
|
219
|
-
$pane-surface: $surface;
|
|
220
|
-
$pane-drag-handle: light-dark(#{map.get(theme-color.$primary-palette, 'neutral', 80)}, #{map.get(theme-color.$primary-palette, 'neutral', 80)});
|
|
221
|
-
$pane-surface-blank: rgb(from #FFFFFF r g b / 0);
|
|
222
|
-
$pane-surface-floating: $surface;
|
|
223
|
-
$on-pane-surface: $on-surface;
|
|
224
|
-
$pane-surface-floating-inverse: $inverse-surface-90;
|
|
225
|
-
$on-pane-surface-floating-inverse: $on-inverse-surface;
|
|
226
|
-
|
|
227
|
-
// BARS
|
|
228
|
-
$bar-surface: $surface;
|
|
229
|
-
$on-bar-surface: $on-surface;
|
|
230
|
-
$bar-surface-blank: transparent;
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
/*
|
|
234
|
-
Corner
|
|
235
|
-
*/
|
|
236
|
-
|
|
237
|
-
$corner-full: var(--mat-sys-corner-full);
|
|
238
|
-
$corner-xl: var(--mat-sys-corner-extra-large);
|
|
239
|
-
$corner-l: var(--mat-sys-corner-large);
|
|
240
|
-
$corner: var(--mat-sys-corner-medium);
|
|
241
|
-
$corner-m: $corner;
|
|
242
|
-
$corner-s: var(--mat-sys-corner-small);
|
|
243
|
-
$corner-xs: var(--mat-sys-corner-extra-small);
|
|
244
|
-
|
|
245
|
-
/*
|
|
246
|
-
Sizing
|
|
52
|
+
Utility Token. Only available in this module. No Css Vars were created from it.
|
|
247
53
|
*/
|
|
248
54
|
|
|
249
55
|
$_sizing-base: t.rem(16px);
|
|
250
|
-
|
|
251
|
-
$sizing-3xs: $_sizing-base * 0.25; // 4px
|
|
252
|
-
$sizing-2xs: $_sizing-base * 0.5; // 8px
|
|
253
|
-
$sizing-xs: $_sizing-base * 1; // 16px
|
|
254
|
-
$sizing-s: $_sizing-base * 1.25; // 20px
|
|
255
|
-
$sizing-m: $_sizing-base * 1.5; // 24px
|
|
256
|
-
$sizing-l: $_sizing-base * 1.75; // 28px;
|
|
257
|
-
$sizing-xl: $_sizing-base * 2; // 32px;
|
|
258
|
-
$sizing-2xl: $_sizing-base * 2.25; // 36px;
|
|
259
|
-
$sizing-3xl: $_sizing-base * 2.5; // 40px;
|
|
260
|
-
$sizing-4xl: $_sizing-base * 3; // 48px;
|
|
261
|
-
$sizing-5xl: $_sizing-base * 3.25; // 52px;
|
|
262
|
-
$sizing-6xl: $_sizing-base * 4; // 64px;
|
|
263
|
-
$sizing-7xl: $_sizing-base * 7.5; // 120px;
|
|
264
|
-
|
|
265
|
-
/*
|
|
266
|
-
Spacing
|
|
267
|
-
*/
|
|
268
|
-
|
|
269
56
|
$_spacing-base: t.rem(16px);
|
|
270
57
|
|
|
271
|
-
$spacing-0: 0; // 0px
|
|
272
|
-
$spacing-4xs: $_spacing-base * 0.0625; // 1px
|
|
273
|
-
$spacing-3xs: $_spacing-base * 0.125; // 2px
|
|
274
|
-
$spacing-2xs: $_spacing-base * 0.25; // 4px
|
|
275
|
-
$spacing-xs: $_spacing-base * 0.5; // 8px
|
|
276
|
-
$spacing-s: $_spacing-base * 0.75; // 12px
|
|
277
|
-
$spacing-m: $_spacing-base; // 16px (base: browserDefault)
|
|
278
|
-
$spacing-l: $_spacing-base * 1.25; // 20px
|
|
279
|
-
$spacing-xl: $_spacing-base * 1.5; // 24px
|
|
280
|
-
$spacing-2xl: $_spacing-base * 1.75; // 28px
|
|
281
|
-
$spacing-3xl: $_spacing-base * 2; // 32px
|
|
282
|
-
$spacing-4xl: $_spacing-base * 3; // 48px
|
|
283
58
|
|
|
284
59
|
/*
|
|
285
|
-
|
|
286
|
-
*/
|
|
287
|
-
$dragged-state-layer-opacity: var(--mat-sys-dragged-state-layer-opacity);
|
|
288
|
-
$focus-state-layer-opacity: var(--mat-sys-focus-state-layer-opacity);
|
|
289
|
-
$hover-state-layer-opacity: var(--mat-sys-hover-state-layer-opacity);
|
|
290
|
-
$pressed-state-layer-opacity: var(--mat-sys-pressed-state-layer-opacity);
|
|
291
|
-
$disabled-opacity: 0.35;
|
|
60
|
+
Ymt Token
|
|
292
61
|
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
62
|
+
They are usually constructed from Material Sys Token.
|
|
63
|
+
When there is no appropriate material token is available custom ones can be added.
|
|
64
|
+
Ymt Css Vars were created from it.
|
|
296
65
|
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
$scrollbar-thumb-color: var(--mat-sys-outline-variant);
|
|
301
|
-
$scrollbar-track-color: transparent;
|
|
302
|
-
$scrollbar-thumb-color-hover: var(--mat-sys-outline);
|
|
66
|
+
Note: If you want to use this token to be applied to material token (overrides), please use
|
|
67
|
+
the function use-token(key) from token.tools.scss, which is available
|
|
68
|
+
inside of the whole yuuvis/material (package/nx lib).
|
|
303
69
|
|
|
304
|
-
/*
|
|
305
|
-
Selection & Focus & Hover
|
|
306
70
|
*/
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
71
|
+
@function create(){
|
|
72
|
+
@return (
|
|
73
|
+
|
|
74
|
+
/*
|
|
75
|
+
|
|
76
|
+
Font
|
|
77
|
+
|
|
78
|
+
*/
|
|
79
|
+
//Body
|
|
80
|
+
font-body: var(--mat-sys-body-medium),
|
|
81
|
+
font-body-font: var(--mat-sys-body-medium-font),
|
|
82
|
+
font-body-line-height: var(--mat-sys-body-medium-line-height),
|
|
83
|
+
font-body-size: var(--mat-sys-body-medium-size),
|
|
84
|
+
font-body-tracking: var(--mat-sys-body-medium-tracking),
|
|
85
|
+
font-body-weight: var(--mat-sys-body-medium-weight),
|
|
86
|
+
|
|
87
|
+
font-body-subtle: var(--mat-sys-body-small),
|
|
88
|
+
font-body-subtle-font: var(--mat-sys-body-small-font),
|
|
89
|
+
font-body-subtle-line-height: var(--mat-sys-body-small-line-height),
|
|
90
|
+
font-body-subtle-size: var(--mat-sys-body-small-size),
|
|
91
|
+
font-body-subtle-tracking: var(--mat-sys-body-small-tracking),
|
|
92
|
+
font-body-subtle-weight: var(--mat-sys-body-small-weight),
|
|
93
|
+
|
|
94
|
+
//Headlines
|
|
95
|
+
font-headline-small: var(--mat-sys-headline-small),
|
|
96
|
+
font-headline-small-font: var(--mat-sys-headline-small-font),
|
|
97
|
+
font-headline-small-line-height: var(--mat-sys-headline-small-line-height),
|
|
98
|
+
font-headline-small-size: var(--mat-sys-headline-small-size),
|
|
99
|
+
font-headline-small-tracking: var(--mat-sys-headline-small-tracking),
|
|
100
|
+
font-headline-small-weight: var(--mat-sys-headline-small-weight),
|
|
101
|
+
|
|
102
|
+
font-headline-medium: var(--mat-sys-headline-medium),
|
|
103
|
+
font-headline-medium-font: var(--mat-sys-headline-medium-font),
|
|
104
|
+
font-headline-medium-line-height: var(--mat-sys-headline-medium-line-height),
|
|
105
|
+
font-headline-medium-size: var(--mat-sys-headline-medium-size),
|
|
106
|
+
font-headline-medium-tracking: var(--mat-sys-headline-medium-tracking),
|
|
107
|
+
font-headline-medium-weight: var(--mat-sys-headline-medium-weight),
|
|
108
|
+
|
|
109
|
+
font-headline-large: var(--mat-sys-headline-large),
|
|
110
|
+
font-headline-large-font: var(--mat-sys-headline-large-font),
|
|
111
|
+
font-headline-large-line-height: var(--mat-sys-headline-large-line-height),
|
|
112
|
+
font-headline-large-size: var(--mat-sys-headline-large-size),
|
|
113
|
+
font-headline-large-tracking: var(--mat-sys-headline-large-tracking),
|
|
114
|
+
font-headline-large-weight: var(--mat-sys-headline-large-weight),
|
|
115
|
+
|
|
116
|
+
//Title
|
|
117
|
+
font-title-small: var(--mat-sys-title-small),
|
|
118
|
+
font-title-small-font: var(--mat-sys-title-small-font),
|
|
119
|
+
font-title-small-line-height: var(--mat-sys-title-small-line-height),
|
|
120
|
+
font-title-small-size: var(--mat-sys-title-small-size),
|
|
121
|
+
font-title-small-tracking: var(--mat-sys-title-small-tracking),
|
|
122
|
+
font-title-small-weight: var(--mat-sys-title-small-weight),
|
|
123
|
+
|
|
124
|
+
font-title-medium: var(--mat-sys-title-medium),
|
|
125
|
+
font-title-medium-font: var(--mat-sys-title-medium-font),
|
|
126
|
+
font-title-medium-line-height: var(--mat-sys-title-medium-line-height),
|
|
127
|
+
font-title-medium-size: var(--mat-sys-title-medium-size),
|
|
128
|
+
font-title-medium-tracking: var(--mat-sys-title-medium-tracking),
|
|
129
|
+
font-title-medium-weight: var(--mat-sys-title-medium-weight),
|
|
130
|
+
|
|
131
|
+
font-title-large: var(--mat-sys-title-large),
|
|
132
|
+
font-title-large-font: var(--mat-sys-title-large-font),
|
|
133
|
+
font-title-large-line-height: var(--mat-sys-title-large-line-height),
|
|
134
|
+
font-title-large-size: var(--mat-sys-title-large-size),
|
|
135
|
+
font-title-large-tracking: var(--mat-sys-title-large-tracking),
|
|
136
|
+
font-title-large-weight: var(--mat-sys-title-large-weight),
|
|
137
|
+
|
|
138
|
+
//Additional Font Token (TypeScale Major Second | Scale Factor: 1.125 | Design Pixel Base: 14px)
|
|
139
|
+
|
|
140
|
+
//Title Smallest (Custom Format)
|
|
141
|
+
font-title-smallest: var(--ymt-font-title-smallest-weight) var(--ymt-font-title-smallest-size) / var(--ymt-font-title-smallest-line-height) var(--ymt-font-title-smallest-font),
|
|
142
|
+
font-title-smallest-font: theme-typo.font-family(),
|
|
143
|
+
font-title-smallest-line-height: $ref-font-headline-line-height,
|
|
144
|
+
font-title-smallest-size: t.rem(14px),
|
|
145
|
+
font-title-smallest-tracking: 0.1,
|
|
146
|
+
font-title-smallest-weight: theme-typo.font-weight(medium),
|
|
147
|
+
|
|
148
|
+
//todo: remove (deprecated) Subhead (Custom Format)
|
|
149
|
+
font-subhead: var(--ymt-font-subhead-weight) var(--ymt-font-subhead-size) / var(--ymt-font-subhead-line-height) var(--ymt-font-subhead-font),
|
|
150
|
+
font-subhead-font: theme-typo.font-family(),
|
|
151
|
+
font-subhead-line-height: $ref-font-headline-line-height,
|
|
152
|
+
font-subhead-size: t.rem(14px),
|
|
153
|
+
font-subhead-tracking: 0,
|
|
154
|
+
font-subhead-weight: theme-typo.font-weight(medium),
|
|
155
|
+
|
|
156
|
+
//App Name (Custom Format)
|
|
157
|
+
font-app-name: var(--ymt-font-app-name-weight) var(--ymt-font-app-name-size) / var(--ymt-font-app-name-line-height) var(--ymt-font-app-name-font),
|
|
158
|
+
font-app-name-font: theme-typo.font-family(),
|
|
159
|
+
font-app-name-line-height: $ref-font-body-line-height,
|
|
160
|
+
font-app-name-size: t.rem(16px),
|
|
161
|
+
font-app-name-tracking: 0,
|
|
162
|
+
font-app-name-weight: theme-typo.font-weight(bold),
|
|
163
|
+
|
|
164
|
+
/*
|
|
165
|
+
|
|
166
|
+
Color
|
|
167
|
+
|
|
168
|
+
*/
|
|
169
|
+
//Outlines
|
|
170
|
+
outline-width: 1px,
|
|
171
|
+
outline: var(--mat-sys-outline),
|
|
172
|
+
outline-variant: var(--mat-sys-outline-variant),
|
|
173
|
+
outline-variant-emphasized: light-dark(#{ map.get(theme-color.primary-palette(), neutral, 80)}, #{map.get(theme-color.primary-palette(), neutral, 80)}),
|
|
174
|
+
|
|
175
|
+
// Level
|
|
176
|
+
// Primary color (Could be used for text-color, surfaces, outlines)
|
|
177
|
+
primary: var(--mat-sys-primary),
|
|
178
|
+
// Color of the text put on a primary color background
|
|
179
|
+
on-primary: var(--mat-sys-on-primary),
|
|
180
|
+
// Primary color container (used for surfaces, outlines, text-color)
|
|
181
|
+
primary-container: var(--mat-sys-primary-container),
|
|
182
|
+
// Color of the text put on a primary color container background
|
|
183
|
+
on-primary-container: var(--mat-sys-on-primary-container),
|
|
184
|
+
|
|
185
|
+
//Brand (Could be used for text-color, surfaces, outlines)
|
|
186
|
+
brand: light-dark(#{map.get(theme-color.primary-palette(), 'neutral', 10)}, #{map.get(theme-color.primary-palette(), 'neutral', 6)}),
|
|
187
|
+
on-brand: light-dark(#{map.get(theme-color.primary-palette(), 'neutral', 90)}, #{map.get(theme-color.primary-palette(), 'neutral', 90)}),
|
|
188
|
+
|
|
189
|
+
//Status
|
|
190
|
+
// Color for status success, could be used for text-color, surfaces, outlines
|
|
191
|
+
success: light-dark(#{map.get(theme-color.success-palette(), 30)}, #{map.get(theme-color.success-palette(), 95)}), //(Could be used for text-color, outlines, surfaces)
|
|
192
|
+
on-success: map.get(theme-color.success-palette(), 100),
|
|
193
|
+
// Surface color for status success containers
|
|
194
|
+
success-container: map.get(theme-color.success-palette(), 95),
|
|
195
|
+
// Color of the text put on a success color container background
|
|
196
|
+
on-success-container: map.get(theme-color.success-palette(), 30),
|
|
197
|
+
|
|
198
|
+
// Color for status danger, could be used for text-color, surfaces, outlines
|
|
199
|
+
danger: var(--mat-sys-error), //(Could be used for text-color, outlines, surfaces)
|
|
200
|
+
on-danger: var(--mat-sys-on-error),
|
|
201
|
+
// Surface color for status danger containers
|
|
202
|
+
danger-container: var(--mat-sys-error-container),
|
|
203
|
+
// Color of the text put on a danger color container background
|
|
204
|
+
on-danger-container: var(--mat-sys-on-error-container),
|
|
205
|
+
|
|
206
|
+
// Color for status warning, could be used for text-color, surfaces, outlines
|
|
207
|
+
warning: light-dark(#{map.get(theme-color.warning-palette(), 30)}, #{map.get(theme-color.warning-palette(), 95)}), //(Could be used for text-color, outlines, surfaces)
|
|
208
|
+
on-warning: map.get(theme-color.warning-palette(), 100),
|
|
209
|
+
// Surface color for status warning containers
|
|
210
|
+
warning-container: map.get(theme-color.warning-palette(), 95),
|
|
211
|
+
// Color of the text put on a warning color container background
|
|
212
|
+
on-warning-container: map.get(theme-color.warning-palette(), 30),
|
|
213
|
+
|
|
214
|
+
//Inverse
|
|
215
|
+
inverse-surface: var(--mat-sys-inverse-surface),
|
|
216
|
+
inverse-surface-90: rgb(from var(--mat-sys-inverse-surface) r g b / 0.9),
|
|
217
|
+
on-inverse-surface: var(--mat-sys-on-inverse-surface),
|
|
218
|
+
|
|
219
|
+
//Surfaces
|
|
220
|
+
surface: var(--mat-sys-surface),
|
|
221
|
+
surface-container-lowest: var(--mat-sys-surface-container-lowest),
|
|
222
|
+
surface-container-low: var(--mat-sys-surface-container-low),
|
|
223
|
+
surface-container: var(--mat-sys-surface-container),
|
|
224
|
+
surface-container-high: var(--mat-sys-surface-container-high),
|
|
225
|
+
surface-container-highest: var(--mat-sys-surface-container-highest),
|
|
226
|
+
|
|
227
|
+
//Surfaces - Alias Token (More Semantic)
|
|
228
|
+
//Custom Surface Alias Token should only reference one of Materials surface-* token
|
|
229
|
+
//to ensure that the combination with on-surface-* is accessible
|
|
230
|
+
//If you are using a custom color instead of make sure that this color is accessible with all on-surface-* token
|
|
231
|
+
surface-panel: var(--mat-sys-surface-container-low),
|
|
232
|
+
surface-app: var(--mat-sys-surface-container-low),
|
|
233
|
+
|
|
234
|
+
scrim: var(--mat-sys-scrim),
|
|
235
|
+
scrim-opacity: 30,
|
|
236
|
+
|
|
237
|
+
//Surfaces - Foreground Color
|
|
238
|
+
//All on-surface-* token are accessible in combination with all surface-* token
|
|
239
|
+
on-surface: var(--mat-sys-on-surface),
|
|
240
|
+
on-surface-type-subtle: light-dark(#{map.get(theme-color.primary-palette(), 'neutral', 40)}, #{map.get(theme-color.primary-palette(), 'neutral', 70)}),
|
|
241
|
+
|
|
242
|
+
//Text (Alias for Surfaces - Foreground Color Token)
|
|
243
|
+
text-color: var(--mat-sys-on-surface),
|
|
244
|
+
text-color-subtle: light-dark(#{map.get(theme-color.primary-palette(), 'neutral', 40)}, #{map.get(theme-color.primary-palette(), 'neutral', 70)}),
|
|
245
|
+
text-color-primary: var(--mat-sys-primary),
|
|
246
|
+
|
|
247
|
+
//Text Selection
|
|
248
|
+
text-selection-container: var(--mat-sys-primary-container),
|
|
249
|
+
on-text-selection-container: var(--mat-sys-on-primary-container),
|
|
250
|
+
|
|
251
|
+
// PANES
|
|
252
|
+
pane-surface: var(--mat-sys-surface),
|
|
253
|
+
pane-drag-handle: light-dark(#{map.get(theme-color.primary-palette(), 'neutral', 80)}, #{map.get(theme-color.primary-palette(), 'neutral', 80)}),
|
|
254
|
+
pane-surface-blank: rgb(from #FFFFFF r g b / 0),
|
|
255
|
+
pane-surface-floating: var(--mat-sys-surface),
|
|
256
|
+
on-pane-surface: var(--mat-sys-on-surface),
|
|
257
|
+
pane-surface-floating-inverse: rgb(from var(--mat-sys-inverse-surface) r g b / 0.9),
|
|
258
|
+
on-pane-surface-floating-inverse: var(--mat-sys-on-inverse-surface),
|
|
259
|
+
|
|
260
|
+
// BARS
|
|
261
|
+
bar-surface: var(--mat-sys-surface),
|
|
262
|
+
on-bar-surface: var(--mat-sys-on-surface),
|
|
263
|
+
bar-surface-blank: transparent,
|
|
264
|
+
|
|
265
|
+
/*
|
|
266
|
+
Corner
|
|
267
|
+
*/
|
|
268
|
+
corner-full: var(--mat-sys-corner-full),
|
|
269
|
+
corner-xl: var(--mat-sys-corner-extra-large),
|
|
270
|
+
corner-l: var(--mat-sys-corner-large),
|
|
271
|
+
corner: var(--mat-sys-corner-medium),
|
|
272
|
+
corner-m: corner,
|
|
273
|
+
corner-s: var(--mat-sys-corner-small),
|
|
274
|
+
corner-xs: var(--mat-sys-corner-extra-small),
|
|
275
|
+
|
|
276
|
+
/*
|
|
277
|
+
Sizing
|
|
278
|
+
*/
|
|
279
|
+
sizing-3xs: $_sizing-base * 0.25, // 4px
|
|
280
|
+
sizing-2xs: $_sizing-base * 0.5, // 8px
|
|
281
|
+
sizing-xs: $_sizing-base * 1, // 16px
|
|
282
|
+
sizing-s: $_sizing-base * 1.25, // 20px
|
|
283
|
+
sizing-m: $_sizing-base * 1.5, // 24px
|
|
284
|
+
sizing-l: $_sizing-base * 1.75, // 28px,
|
|
285
|
+
sizing-xl: $_sizing-base * 2, // 32px,
|
|
286
|
+
sizing-2xl: $_sizing-base * 2.25, // 36px,
|
|
287
|
+
sizing-3xl: $_sizing-base * 2.5, // 40px,
|
|
288
|
+
sizing-4xl: $_sizing-base * 3, // 48px,
|
|
289
|
+
sizing-5xl: $_sizing-base * 3.25, // 52px,
|
|
290
|
+
sizing-6xl: $_sizing-base * 4, // 64px,
|
|
291
|
+
sizing-7xl: $_sizing-base * 7.5, // 120px,
|
|
292
|
+
|
|
293
|
+
/*
|
|
294
|
+
Spacing
|
|
295
|
+
*/
|
|
296
|
+
spacing-0: 0, // 0px
|
|
297
|
+
spacing-4xs: $_spacing-base * 0.0625, // 1px
|
|
298
|
+
spacing-3xs: $_spacing-base * 0.125, // 2px
|
|
299
|
+
spacing-2xs: $_spacing-base * 0.25, // 4px
|
|
300
|
+
spacing-xs: $_spacing-base * 0.5, // 8px
|
|
301
|
+
spacing-s: $_spacing-base * 0.75, // 12px
|
|
302
|
+
spacing-m: $_spacing-base, // 16px (base: browserDefault)
|
|
303
|
+
spacing-l: $_spacing-base * 1.25, // 20px
|
|
304
|
+
spacing-xl: $_spacing-base * 1.5, // 24px
|
|
305
|
+
spacing-2xl: $_spacing-base * 1.75, // 28px
|
|
306
|
+
spacing-3xl: $_spacing-base * 2, // 32px
|
|
307
|
+
spacing-4xl: $_spacing-base * 3, // 48px
|
|
308
|
+
|
|
309
|
+
/*
|
|
310
|
+
State Layer Opacity
|
|
311
|
+
*/
|
|
312
|
+
dragged-state-layer-opacity: var(--mat-sys-dragged-state-layer-opacity),
|
|
313
|
+
focus-state-layer-opacity: var(--mat-sys-focus-state-layer-opacity),
|
|
314
|
+
hover-state-layer-opacity: var(--mat-sys-hover-state-layer-opacity),
|
|
315
|
+
pressed-state-layer-opacity: var(--mat-sys-pressed-state-layer-opacity),
|
|
316
|
+
disabled-opacity: 0.35,
|
|
317
|
+
|
|
318
|
+
/*
|
|
319
|
+
Elements
|
|
320
|
+
*/
|
|
321
|
+
|
|
322
|
+
//Scrollbar
|
|
323
|
+
scrollbar-outer-size: 24px,
|
|
324
|
+
scrollbar-inner-size: 4px,
|
|
325
|
+
scrollbar-thumb-color: var(--mat-sys-outline-variant),
|
|
326
|
+
scrollbar-track-color: transparent,
|
|
327
|
+
scrollbar-thumb-color-hover: var(--mat-sys-outline),
|
|
328
|
+
|
|
329
|
+
/*
|
|
330
|
+
Selection & Focus & Hover
|
|
331
|
+
*/
|
|
332
|
+
//There is a complete misunderstanding of aria-selected, aria-current and focusing element across the whole system
|
|
333
|
+
//This should be cleaned up asap
|
|
334
|
+
focus-background: var(--mat-sys-surface-container),
|
|
335
|
+
on-focus-background: var(--mat-sys-on-surface),
|
|
336
|
+
hover-background: var(--mat-sys-surface-container-low),
|
|
337
|
+
on-hover-background: var(--mat-sys-on-surface),
|
|
338
|
+
selection-background: var(--mat-sys-surface-container-highest),
|
|
339
|
+
on-selection-background: var(--mat-sys-on-surface),
|
|
340
|
+
current-background: var(--mat-sys-surface-container), //focus-background
|
|
341
|
+
on-current-background: var(--mat-sys-on-surface), // on-focus-background
|
|
342
|
+
|
|
343
|
+
focus-indicator-size: 2px,
|
|
344
|
+
focus-indicator-inner: light-dark(#{map.get(theme-color.primary-palette(), 'neutral', 90)}, #{map.get(theme-color.primary-palette(), 'neutral', 10)}),
|
|
345
|
+
focus-indicator-outer: light-dark(#{map.get(theme-color.primary-palette(), 'neutral', 10)}, #{map.get(theme-color.primary-palette(), 'neutral', 90)}),
|
|
346
|
+
|
|
347
|
+
/*
|
|
348
|
+
Additional Component Tokens
|
|
349
|
+
*/
|
|
350
|
+
//Dialog
|
|
351
|
+
dialog-content-display: contents,
|
|
352
|
+
|
|
353
|
+
//Overlay
|
|
354
|
+
overlay-backdrop-color: light-dark(
|
|
355
|
+
rgb(from #{map.get(theme-color.primary-palette(), 'neutral', 0)} r g b / 0.3),
|
|
356
|
+
rgb(from #{map.get(theme-color.primary-palette(), 'neutral', 0)} r g b / 0.8)
|
|
357
|
+
),
|
|
358
|
+
|
|
359
|
+
/* Progress-Bar */
|
|
360
|
+
progress-bar-height: 4px,
|
|
361
|
+
)
|
|
362
|
+
}
|
|
363
|
+
|
|
321
364
|
|
|
322
|
-
/*
|
|
323
|
-
Additional Component Tokens
|
|
324
|
-
*/
|
|
325
|
-
//Dialog
|
|
326
|
-
$dialog-content-display: contents;
|
|
327
365
|
|
|
328
|
-
//Overlay
|
|
329
|
-
$overlay-backdrop-color: light-dark(
|
|
330
|
-
rgb(from #{map.get(theme-color.$primary-palette, 'neutral', 0)} r g b / 0.3),
|
|
331
|
-
rgb(from #{map.get(theme-color.$primary-palette, 'neutral', 0)} r g b / 0.8)
|
|
332
|
-
);
|
|
333
366
|
|
|
334
|
-
/* Progress-Bar */
|
|
335
|
-
$progress-bar-height: 4px;
|
|
@@ -4,16 +4,12 @@
|
|
|
4
4
|
@use './token.config' as token-config;
|
|
5
5
|
@use './token';
|
|
6
6
|
|
|
7
|
-
$_map: meta.module-variables('token');
|
|
8
7
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
@if(str-index($token-name, "ref-") == 1){
|
|
12
|
-
@error 'The ymt-Token with name: #{$token-name} is not a CSS Custom Property (variable).';
|
|
13
|
-
}
|
|
8
|
+
$_token: token.create();
|
|
14
9
|
|
|
15
|
-
|
|
16
|
-
|
|
10
|
+
@function use-token($token-name){
|
|
11
|
+
@if(map.has-key($_token, $token-name) == false){
|
|
12
|
+
@error 'The #{token-config.$prefix}-Token with name: #{$token-name} does not exist. Available #{token-config.$prefix}-tokens are: #{map.keys($_token)}';
|
|
17
13
|
}
|
|
18
14
|
|
|
19
15
|
@return var(#{token($token-name)});
|
|
@@ -22,3 +18,18 @@ $_map: meta.module-variables('token');
|
|
|
22
18
|
@function token($token-name){
|
|
23
19
|
@return '--#{token-config.$prefix}-#{$token-name}';
|
|
24
20
|
}
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
@mixin token-overrides($overrides){
|
|
24
|
+
@if($overrides != null){
|
|
25
|
+
$s: #{if(&, '&', ':root')};
|
|
26
|
+
#{$s}{
|
|
27
|
+
@each $token-name, $value in $overrides {
|
|
28
|
+
@if(map.has-key($_token, $token-name) == false){
|
|
29
|
+
@error 'The #{token-config.$prefix}-token with name: #{$token-name} does not exist. Available #{token-config.$prefix}-tokens are: #{map.keys($_token)}';
|
|
30
|
+
}
|
|
31
|
+
#{token($token-name)}:#{$value};
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|