matcha-theme 1.0.4 → 1.0.8
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/abstracts/_colors.scss +198 -164
- package/abstracts/_functions.scss +38 -5
- package/abstracts/_typography.scss +50 -53
- package/base/_typography.scss +11 -11
- package/components/matcha-table.scss +47 -28
- package/main.scss +7 -6
- package/package.json +1 -1
- package/tokens/_color-tokens.scss +26 -28
- package/vendors/angular-material-fixes.scss +202 -17
package/abstracts/_colors.scss
CHANGED
|
@@ -1,29 +1,6 @@
|
|
|
1
1
|
// Saturation Levels
|
|
2
2
|
$saturationLevels: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700;
|
|
3
3
|
|
|
4
|
-
// Hues Palette Colors
|
|
5
|
-
$matchaPalettes: (
|
|
6
|
-
"red": $red,
|
|
7
|
-
"pink": $pink,
|
|
8
|
-
"purple": $purple,
|
|
9
|
-
"deep-purple": $deep-purple,
|
|
10
|
-
"indigo": $indigo,
|
|
11
|
-
"blue": $blue,
|
|
12
|
-
"light-blue": $light-blue,
|
|
13
|
-
"cyan": $cyan,
|
|
14
|
-
"teal": $teal,
|
|
15
|
-
"green": $green,
|
|
16
|
-
"light-green": $light-green,
|
|
17
|
-
"lime": $lime,
|
|
18
|
-
"yellow": $yellow,
|
|
19
|
-
"amber": $amber,
|
|
20
|
-
"orange": $orange,
|
|
21
|
-
"deep-orange": $deep-orange,
|
|
22
|
-
"brown": $brown,
|
|
23
|
-
"grey": $grey,
|
|
24
|
-
"blue-grey": $blue-grey
|
|
25
|
-
);
|
|
26
|
-
|
|
27
4
|
// Hues Palette Colors
|
|
28
5
|
$index: 0;
|
|
29
6
|
// -------------------------------------------------------------------------------------------------------------------
|
|
@@ -70,24 +47,24 @@ $index: 0;
|
|
|
70
47
|
}
|
|
71
48
|
}
|
|
72
49
|
}
|
|
73
|
-
@mixin _generate-classes($prefix, $color-map, $saturation) {
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
}
|
|
50
|
+
// @mixin _generate-classes($prefix, $color-map, $saturation) {
|
|
51
|
+
// // .primary-500
|
|
52
|
+
// // .primary-600-bg
|
|
53
|
+
// // .primary-700-fg
|
|
54
|
+
// $background: map-get($color-map, $saturation);
|
|
55
|
+
// $contrast: map-get($color-map, #{$saturation}-contrast);
|
|
56
|
+
|
|
57
|
+
// .#{$prefix}-#{$saturation} {
|
|
58
|
+
// background: $background;
|
|
59
|
+
// color: $contrast;
|
|
60
|
+
// }
|
|
61
|
+
// .#{$prefix}-#{$saturation}-bg {
|
|
62
|
+
// background: $background;
|
|
63
|
+
// }
|
|
64
|
+
// .#{$prefix}-#{$saturation}-fg {
|
|
65
|
+
// color: $background;
|
|
66
|
+
// }
|
|
67
|
+
// }
|
|
91
68
|
|
|
92
69
|
// -------------------------------------------------------------------------------------------------------------------
|
|
93
70
|
// @ Static color classes generator
|
|
@@ -95,10 +72,6 @@ $index: 0;
|
|
|
95
72
|
@mixin _generate-static-color-classes($colorName, $color, $contrastColor, $saturation) {
|
|
96
73
|
$colorSelector: unquote(".#{$colorName}#{$saturation}");
|
|
97
74
|
|
|
98
|
-
#{$colorSelector}-bg {
|
|
99
|
-
background-color: $color !important;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
75
|
#{$colorSelector} {
|
|
103
76
|
background-color: $color !important;
|
|
104
77
|
color: $contrastColor !important;
|
|
@@ -109,28 +82,45 @@ $index: 0;
|
|
|
109
82
|
}
|
|
110
83
|
}
|
|
111
84
|
|
|
85
|
+
#{$colorSelector}-bg {
|
|
86
|
+
background-color: $color !important;
|
|
87
|
+
}
|
|
88
|
+
|
|
112
89
|
#{$colorSelector}-fg {
|
|
113
90
|
color: $color !important;
|
|
114
91
|
}
|
|
115
92
|
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
}
|
|
93
|
+
@if ($saturation == "-500") {
|
|
94
|
+
$colorSelectorDefault: unquote(".#{$colorName}");
|
|
95
|
+
|
|
96
|
+
#{$colorSelectorDefault}-bg {
|
|
97
|
+
background-color: $color !important;
|
|
98
|
+
}
|
|
123
99
|
|
|
124
|
-
|
|
125
|
-
|
|
100
|
+
#{$colorSelectorDefault}-fg {
|
|
101
|
+
color: $color !important;
|
|
102
|
+
}
|
|
126
103
|
}
|
|
104
|
+
|
|
105
|
+
// #{$colorSelector}-border,
|
|
106
|
+
// #{$colorSelector}-border-top,
|
|
107
|
+
// #{$colorSelector}-border-right,
|
|
108
|
+
// #{$colorSelector}-border-bottom,
|
|
109
|
+
// #{$colorSelector}-border-left {
|
|
110
|
+
// border-color: $color !important;
|
|
111
|
+
// }
|
|
112
|
+
|
|
113
|
+
// #{$colorSelector}-fill {
|
|
114
|
+
// fill: $color !important;
|
|
115
|
+
// }
|
|
127
116
|
}
|
|
128
117
|
|
|
129
|
-
@mixin colors-classes-static($
|
|
118
|
+
@mixin colors-classes-static($theme) {
|
|
119
|
+
$palettes: getAllPalettes($theme);
|
|
130
120
|
$light-contrasting-classes: ();
|
|
131
121
|
$dark-contrasting-classes: ();
|
|
132
122
|
|
|
133
|
-
@each $paletteName, $palette in $
|
|
123
|
+
@each $paletteName, $palette in $palettes {
|
|
134
124
|
// $contrasts: map-get($red, "contrast");
|
|
135
125
|
// $contrasts = all contrast colors of $red palette
|
|
136
126
|
$contrasts: map-get($palette, "contrast");
|
|
@@ -161,43 +151,29 @@ $index: 0;
|
|
|
161
151
|
"comma"
|
|
162
152
|
);
|
|
163
153
|
}
|
|
164
|
-
|
|
165
|
-
// Run the generator one more time for default values (500)
|
|
166
|
-
// if we are not working with primary, accent or warn palettes
|
|
167
|
-
@if (
|
|
168
|
-
$saturation
|
|
169
|
-
==500 and
|
|
170
|
-
$paletteName !=
|
|
171
|
-
"primary" and
|
|
172
|
-
$paletteName !=
|
|
173
|
-
"accent" and
|
|
174
|
-
$paletteName !=
|
|
175
|
-
"warn"
|
|
176
|
-
) {
|
|
177
|
-
// Generate color classes
|
|
178
|
-
@include _generate-static-color-classes($paletteName, $color, $contrast, "");
|
|
179
|
-
|
|
180
|
-
// Add color to the correct list depending on the contrasting color
|
|
181
|
-
|
|
182
|
-
// If the contrast color is dark
|
|
183
|
-
@if (rgba(black, 1) ==rgba($contrast, 1)) {
|
|
184
|
-
$dark-contrasting-classes: append(
|
|
185
|
-
$dark-contrasting-classes,
|
|
186
|
-
unquote(".#{$paletteName}"),
|
|
187
|
-
"comma"
|
|
188
|
-
);
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
// if the contrast color is light
|
|
192
|
-
@else {
|
|
193
|
-
$light-contrasting-classes: append(
|
|
194
|
-
$light-contrasting-classes,
|
|
195
|
-
unquote(".#{$paletteName}"),
|
|
196
|
-
"comma"
|
|
197
|
-
);
|
|
198
|
-
}
|
|
199
|
-
}
|
|
200
154
|
}
|
|
155
|
+
// Run the generator one more time for default values (500)
|
|
156
|
+
// if we are not working with primary, accent or warn palettes
|
|
157
|
+
// @if ($saturation == 500) {
|
|
158
|
+
// // Generate color classes
|
|
159
|
+
// @include _generate-static-color-classes($paletteName, $color, $contrast, "");
|
|
160
|
+
|
|
161
|
+
// // Add color to the correct list depending on the contrasting color
|
|
162
|
+
|
|
163
|
+
// // If the contrast color is dark
|
|
164
|
+
// @if (rgba(black, 1) ==rgba($contrast, 1)) {
|
|
165
|
+
// $dark-contrasting-classes: append($dark-contrasting-classes, unquote(".#{$paletteName}"), "comma");
|
|
166
|
+
// }
|
|
167
|
+
|
|
168
|
+
// // if the contrast color is light
|
|
169
|
+
// @else {
|
|
170
|
+
// $light-contrasting-classes: append(
|
|
171
|
+
// $light-contrasting-classes,
|
|
172
|
+
// unquote(".#{$paletteName}"),
|
|
173
|
+
// "comma"
|
|
174
|
+
// );
|
|
175
|
+
// }
|
|
176
|
+
// }
|
|
201
177
|
}
|
|
202
178
|
}
|
|
203
179
|
|
|
@@ -206,43 +182,87 @@ $index: 0;
|
|
|
206
182
|
@include _generate-text-color-levels($light-contrasting-classes, "light");
|
|
207
183
|
}
|
|
208
184
|
|
|
209
|
-
@include colors-classes-static($matchaPalettes);
|
|
210
185
|
// -------------------------------------------------------------------------------------------------------------------
|
|
211
186
|
// @ Dynamic color classes generator
|
|
212
187
|
// -------------------------------------------------------------------------------------------------------------------
|
|
213
|
-
@mixin _generate-dynamic-color-classes($
|
|
214
|
-
$color: unquote(
|
|
215
|
-
$
|
|
216
|
-
$
|
|
217
|
-
|
|
218
|
-
#{$
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
188
|
+
@mixin _generate-dynamic-color-classes($attributes, $palette, $paletteName, $background, $foreground) {
|
|
189
|
+
$color: unquote(#{$paletteName});
|
|
190
|
+
$baseClassName: (".background-#{$paletteName}"); // .base-yellow
|
|
191
|
+
// $baseClassNameDefault: (".#{$paletteName}"); // .amber
|
|
192
|
+
|
|
193
|
+
// $paletteClassNameDefault: "#{$paletteName}"; // .amber
|
|
194
|
+
@each $attribute, $attribute-palette in $attributes {
|
|
195
|
+
$withPrefixSelector: ".#{$attribute}-#{$color}"; // .background-amber
|
|
196
|
+
$nonPrefixSelector: ".#{$color}"; // .amber
|
|
197
|
+
|
|
198
|
+
// generate classes for color-amber, background-amber, fill-amber, stroke-amber and border-color-amber
|
|
199
|
+
#{$withPrefixSelector} {
|
|
200
|
+
#{$attribute}: map-get($attribute-palette, $paletteName);
|
|
201
|
+
@if ($attribute != "color") {
|
|
202
|
+
&-alpha {
|
|
203
|
+
#{$attribute}: map-get($attribute-palette, ("#{$paletteName}-alpha")) !important;
|
|
204
|
+
}
|
|
205
|
+
}
|
|
222
206
|
}
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
207
|
+
// generate classes red blue green pink
|
|
208
|
+
@if ($attribute == "background") {
|
|
209
|
+
#{$nonPrefixSelector} {
|
|
210
|
+
background: map-get($attribute-palette, $paletteName) !important;
|
|
211
|
+
}
|
|
228
212
|
}
|
|
229
|
-
}
|
|
230
213
|
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
214
|
+
@if ($attribute == "color") {
|
|
215
|
+
@if ($color == "yellow" or $color == "amber") {
|
|
216
|
+
#{$nonPrefixSelector} {
|
|
217
|
+
color: map-get($foreground, static-dark-text);
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
@if ($color != "yellow" and $color != "amber") {
|
|
221
|
+
#{$nonPrefixSelector} {
|
|
222
|
+
color: map-get($foreground, text-inverse);
|
|
223
|
+
}
|
|
224
|
+
}
|
|
241
225
|
}
|
|
226
|
+
// $selector: ".#{$attribute}-#{$color}"; // .background-yellow
|
|
227
|
+
// @if ($attribute != "color") {
|
|
228
|
+
// #{$selector} {
|
|
229
|
+
// #{$attribute}: map-get($background, $color) !important;
|
|
230
|
+
// &-alpha {
|
|
231
|
+
// #{$attribute}: map-get($background, ("#{$paletteName}-alpha")) !important;
|
|
232
|
+
// }
|
|
233
|
+
// }
|
|
234
|
+
// }
|
|
235
|
+
// @if ($attribute == "color") {
|
|
236
|
+
// }
|
|
242
237
|
}
|
|
238
|
+
|
|
239
|
+
// #{$baseClassName} {
|
|
240
|
+
// // background: map-get($background, ("#{$paletteName}")) !important;
|
|
241
|
+
// &-alpha {
|
|
242
|
+
// background: map-get($background, ("#{$paletteName}-alpha")) !important;
|
|
243
|
+
// }
|
|
244
|
+
// }
|
|
245
|
+
|
|
246
|
+
// #{$baseClassNameDefault} {
|
|
247
|
+
// background: map-get($background, ("#{$paletteName}")) !important;
|
|
248
|
+
// }
|
|
249
|
+
|
|
250
|
+
// @if ($color != yellow or $color != amber) {
|
|
251
|
+
// #{$baseClassNameDefault} {
|
|
252
|
+
// color: map-get($foreground, text-inverse);
|
|
253
|
+
// }
|
|
254
|
+
// }
|
|
255
|
+
|
|
256
|
+
// @if ($color == yellow or $color == amber) {
|
|
257
|
+
// #{$baseClassNameDefault} {
|
|
258
|
+
// color: map-get($foreground, static-dark-text);
|
|
259
|
+
// }
|
|
260
|
+
// }
|
|
243
261
|
}
|
|
244
262
|
|
|
245
263
|
@mixin colors-classes-dynamic($theme) {
|
|
264
|
+
$palettes: getAllPalettes($theme);
|
|
265
|
+
|
|
246
266
|
$is-dark: map-get($theme, isdark);
|
|
247
267
|
$primary: map-get($theme, primary);
|
|
248
268
|
$accent: map-get($theme, accent);
|
|
@@ -250,13 +270,9 @@ $index: 0;
|
|
|
250
270
|
$background: map-get($theme, background);
|
|
251
271
|
$foreground: map-get($theme, foreground);
|
|
252
272
|
|
|
253
|
-
$themePalette: (
|
|
254
|
-
"primary": $primary,
|
|
255
|
-
"accent": $accent,
|
|
256
|
-
"warn": $warn
|
|
257
|
-
);
|
|
258
273
|
$colorNames: red, pink, purple, deep-purple, indigo, blue, light-blue, cyan, teal, green, light-green, lime, yellow,
|
|
259
274
|
amber, orange, deep-orange, primary, accent, warn;
|
|
275
|
+
|
|
260
276
|
$attributes: (
|
|
261
277
|
color: $foreground,
|
|
262
278
|
border-color: $foreground,
|
|
@@ -265,31 +281,44 @@ $index: 0;
|
|
|
265
281
|
stroke: $background
|
|
266
282
|
);
|
|
267
283
|
|
|
268
|
-
@each $saturation in $saturationLevels {
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
}
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
284
|
+
// @each $saturation in $saturationLevels {
|
|
285
|
+
// // generate classes for all saturation levels of primary, accent and warn palettes
|
|
286
|
+
// @include _generate-classes("primary", $primary, $saturation);
|
|
287
|
+
// @include _generate-classes("accent", $accent, $saturation);
|
|
288
|
+
// @include _generate-classes("warn", $warn, $saturation);
|
|
289
|
+
// }
|
|
290
|
+
|
|
291
|
+
// // primary accent e warn
|
|
292
|
+
// @each $paletteName, $palette in $palettes {
|
|
293
|
+
// // generate
|
|
294
|
+
// // .background-primary
|
|
295
|
+
// // .background-primary-alpha
|
|
296
|
+
// // .base-primary
|
|
297
|
+
// // .base-primary-alpha
|
|
298
|
+
// // .primary
|
|
299
|
+
// // .primary-alpha
|
|
300
|
+
|
|
301
|
+
// // .primary-bg
|
|
302
|
+
// // .primary-fg
|
|
303
|
+
// .background-#{$paletteName},
|
|
304
|
+
// .base-#{$paletteName},
|
|
305
|
+
// .#{$paletteName} {
|
|
306
|
+
// background: map-get($palette, default);
|
|
307
|
+
// color: map-get($palette, default-contrast);
|
|
308
|
+
// &-alpha {
|
|
309
|
+
// background: rgba(map-get($background, background), 0.5) !important;
|
|
310
|
+
// }
|
|
311
|
+
// }
|
|
312
|
+
// .#{$paletteName}-bg {
|
|
313
|
+
// background: map-get($palette, default) !important;
|
|
314
|
+
// }
|
|
315
|
+
// .#{$paletteName}-fg {
|
|
316
|
+
// color: map-get($palette, default) !important;
|
|
317
|
+
// }
|
|
318
|
+
// // .background-#{$paletteName}-alpha,
|
|
319
|
+
// // .base-#{$paletteName}-alpha {
|
|
320
|
+
// // }
|
|
321
|
+
// }
|
|
293
322
|
|
|
294
323
|
.base-surface {
|
|
295
324
|
background: map-get($background, card);
|
|
@@ -320,10 +349,6 @@ $index: 0;
|
|
|
320
349
|
|
|
321
350
|
@each $attribute, $colorLevel in $attributes {
|
|
322
351
|
@if ($attribute != "color") {
|
|
323
|
-
// border-color-bg
|
|
324
|
-
// background-bg
|
|
325
|
-
// fill-bg
|
|
326
|
-
// stroke-bg
|
|
327
352
|
.#{$attribute}-bg {
|
|
328
353
|
#{$attribute}: map-get($background, background) !important;
|
|
329
354
|
}
|
|
@@ -342,36 +367,46 @@ $index: 0;
|
|
|
342
367
|
.#{$attribute}-surface-alpha-inverse {
|
|
343
368
|
#{$attribute}: map-get($background, card-alpha-inverse) !important;
|
|
344
369
|
}
|
|
370
|
+
.primary {
|
|
371
|
+
#{$attribute}: map-get($primary, default) !important;
|
|
372
|
+
}
|
|
373
|
+
.accent {
|
|
374
|
+
#{$attribute}: map-get($accent, default) !important;
|
|
375
|
+
}
|
|
376
|
+
.warn {
|
|
377
|
+
#{$attribute}: map-get($warn, default) !important;
|
|
378
|
+
}
|
|
345
379
|
}
|
|
346
380
|
.#{$attribute}-primary {
|
|
347
381
|
#{$attribute}: map-get($primary, default) !important;
|
|
382
|
+
&-alpha {
|
|
383
|
+
background: rgba(map-get($primary, default), 0.2) !important;
|
|
384
|
+
}
|
|
348
385
|
}
|
|
349
|
-
|
|
350
386
|
.#{$attribute}-accent {
|
|
351
387
|
#{$attribute}: map-get($accent, default) !important;
|
|
388
|
+
&-alpha {
|
|
389
|
+
background: rgba(map-get($accent, default), 0.2) !important;
|
|
390
|
+
}
|
|
352
391
|
}
|
|
353
|
-
|
|
354
392
|
.#{$attribute}-warn {
|
|
355
393
|
#{$attribute}: map-get($warn, default) !important;
|
|
394
|
+
&-alpha {
|
|
395
|
+
background: rgba(map-get($warn, default), 0.2) !important;
|
|
396
|
+
}
|
|
356
397
|
}
|
|
357
|
-
|
|
358
398
|
.#{$attribute}-error {
|
|
359
399
|
#{$attribute}: map-get($background, error) !important;
|
|
360
400
|
}
|
|
361
|
-
|
|
362
401
|
.#{$attribute}-info {
|
|
363
402
|
#{$attribute}: map-get($background, info) !important;
|
|
364
403
|
}
|
|
365
|
-
|
|
366
404
|
.#{$attribute}-success {
|
|
367
405
|
#{$attribute}: map-get($background, success) !important;
|
|
368
406
|
}
|
|
369
|
-
|
|
370
407
|
.#{$attribute}-warning {
|
|
371
408
|
#{$attribute}: map-get($background, warning) !important;
|
|
372
409
|
}
|
|
373
|
-
|
|
374
|
-
.#{$attribute}-foreground,
|
|
375
410
|
.#{$attribute}-fg,
|
|
376
411
|
.#{$attribute}-base,
|
|
377
412
|
.#{$attribute}-text {
|
|
@@ -414,9 +449,8 @@ $index: 0;
|
|
|
414
449
|
.#{$attribute}-selected {
|
|
415
450
|
#{$attribute}: map-get($background, selected-button) !important;
|
|
416
451
|
}
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
}
|
|
452
|
+
}
|
|
453
|
+
@each $paletteName, $palette in $palettes {
|
|
454
|
+
@include _generate-dynamic-color-classes($attributes, $palette, $paletteName, $background, $foreground);
|
|
421
455
|
}
|
|
422
456
|
}
|
|
@@ -39,6 +39,39 @@
|
|
|
39
39
|
@return $result;
|
|
40
40
|
}
|
|
41
41
|
|
|
42
|
+
@function getAllPalettes($theme) {
|
|
43
|
+
$primary: map-get($theme, primary);
|
|
44
|
+
$accent: map-get($theme, accent);
|
|
45
|
+
$warn: map-get($theme, warn);
|
|
46
|
+
|
|
47
|
+
// base colors
|
|
48
|
+
$palettes: (
|
|
49
|
+
red: $red,
|
|
50
|
+
pink: $pink,
|
|
51
|
+
purple: $purple,
|
|
52
|
+
deep-purple: $deep-purple,
|
|
53
|
+
indigo: $indigo,
|
|
54
|
+
blue: $blue,
|
|
55
|
+
light-blue: $light-blue,
|
|
56
|
+
cyan: $cyan,
|
|
57
|
+
teal: $teal,
|
|
58
|
+
green: $green,
|
|
59
|
+
light-green: $light-green,
|
|
60
|
+
lime: $lime,
|
|
61
|
+
yellow: $yellow,
|
|
62
|
+
amber: $amber,
|
|
63
|
+
orange: $orange,
|
|
64
|
+
deep-orange: $deep-orange,
|
|
65
|
+
brown: $brown,
|
|
66
|
+
grey: $grey,
|
|
67
|
+
blue-grey: $blue-grey,
|
|
68
|
+
primary: $primary,
|
|
69
|
+
accent: $accent,
|
|
70
|
+
warn: $warn
|
|
71
|
+
);
|
|
72
|
+
@return $palettes;
|
|
73
|
+
}
|
|
74
|
+
|
|
42
75
|
// Gets a color from a theme palette (the output of mat-palette).
|
|
43
76
|
// The hue can be one of the standard values (500, A400, etc.), one of the three preconfigured
|
|
44
77
|
// hues (default, lighter, darker), or any of the aforementioned prefixed with "-contrast".
|
|
@@ -139,15 +172,15 @@
|
|
|
139
172
|
// Note: The spec doesn't mention letter spacing. The values here come from
|
|
140
173
|
// eyeballing it until it looked exactly like the spec examples.
|
|
141
174
|
@function matcha-typography-config(
|
|
142
|
-
$font-family: '"CircularStd
|
|
175
|
+
$font-family: '"CircularStd", "Helvetica Neue", "Arial", sans-serif, "angular";',
|
|
143
176
|
$display-4: matcha-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
|
|
144
177
|
$display-3: matcha-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
|
|
145
178
|
$display-2: matcha-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
|
|
146
179
|
$display-1: matcha-typography-level(34px, 40px, 400),
|
|
147
180
|
$headline: matcha-typography-level(24px, 32px, 400),
|
|
148
|
-
$title: matcha-typography-level(20px, 32px,
|
|
149
|
-
$subheading-2: matcha-typography-level(16px, 28px,
|
|
150
|
-
$subheading-1: matcha-typography-level(15px, 24px,
|
|
181
|
+
$title: matcha-typography-level(20px, 32px, 700),
|
|
182
|
+
$subheading-2: matcha-typography-level(16px, 28px, 700),
|
|
183
|
+
$subheading-1: matcha-typography-level(15px, 24px, 700),
|
|
151
184
|
$body-2: matcha-typography-level(14px, 24px, 500),
|
|
152
185
|
$body-1: matcha-typography-level(14px, 20px, 400),
|
|
153
186
|
$caption: matcha-typography-level(12px, 20px, 400),
|
|
@@ -357,7 +390,7 @@ $base-font-size: 16px;
|
|
|
357
390
|
|
|
358
391
|
// Function to convert pixels to rem.
|
|
359
392
|
@function px-to-rem($value-in-px) {
|
|
360
|
-
@return ($value-in-px / $base-font-size) * 1rem;
|
|
393
|
+
@return calc($value-in-px / $base-font-size) * 1rem;
|
|
361
394
|
}
|
|
362
395
|
|
|
363
396
|
// Example of use of the function:
|
|
@@ -4,17 +4,31 @@
|
|
|
4
4
|
// Outputs the shorthand `font` CSS property, based on a set of typography values. Falls back to
|
|
5
5
|
// the individual properties if a value that isn't allowed in the shorthand is passed in.
|
|
6
6
|
@mixin matcha-typography-font-shorthand($font-size, $font-weight, $line-height, $font-family) {
|
|
7
|
-
|
|
8
7
|
// If any of the values are set to `inherit`, we can't use the shorthand
|
|
9
8
|
// so we fall back to passing in the individual properties.
|
|
10
|
-
@if (
|
|
9
|
+
@if (
|
|
10
|
+
$font-size
|
|
11
|
+
==inherit or
|
|
12
|
+
$font-weight
|
|
13
|
+
==inherit or
|
|
14
|
+
$line-height
|
|
15
|
+
==inherit or
|
|
16
|
+
$font-family
|
|
17
|
+
==inherit or
|
|
18
|
+
$font-size
|
|
19
|
+
==null or
|
|
20
|
+
$font-weight
|
|
21
|
+
==null or
|
|
22
|
+
$line-height
|
|
23
|
+
==null or
|
|
24
|
+
$font-family
|
|
25
|
+
==null
|
|
26
|
+
) {
|
|
11
27
|
font-size: $font-size;
|
|
12
28
|
font-weight: $font-weight;
|
|
13
29
|
line-height: $line-height;
|
|
14
30
|
font-family: $font-family;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
@else {
|
|
31
|
+
} @else {
|
|
18
32
|
// Otherwise use the shorthand `font`, because it's the least amount of bytes. Note
|
|
19
33
|
// that we need to use interpolation for `font-size/line-height` in order to prevent
|
|
20
34
|
// Sass from dividing the two values.
|
|
@@ -52,86 +66,69 @@
|
|
|
52
66
|
// p 14px body - regular
|
|
53
67
|
// small 12px caption - regular
|
|
54
68
|
@mixin matcha-reset-typography($config) {
|
|
55
|
-
|
|
56
69
|
// Headings
|
|
57
70
|
.h1,
|
|
58
71
|
h1 {
|
|
59
|
-
font-size: 40px;
|
|
60
|
-
|
|
61
|
-
font:
|
|
62
|
-
family: matcha-font-family($config, button);
|
|
63
|
-
}
|
|
72
|
+
font-size: px-to-rem(40px);
|
|
73
|
+
font-family: matcha-font-family($config, title);
|
|
74
|
+
font-weight: matcha-font-weight($config, title);
|
|
64
75
|
}
|
|
65
76
|
|
|
66
77
|
.h2,
|
|
67
78
|
h2 {
|
|
68
|
-
font-size: 32px;
|
|
69
|
-
|
|
70
|
-
font:
|
|
71
|
-
family: matcha-font-family($config, button);
|
|
72
|
-
}
|
|
79
|
+
font-size: px-to-rem(32px);
|
|
80
|
+
font-family: matcha-font-family($config, title);
|
|
81
|
+
font-weight: matcha-font-weight($config, title);
|
|
73
82
|
}
|
|
74
83
|
|
|
75
84
|
.h3,
|
|
76
85
|
h3 {
|
|
77
|
-
font-size: 24px;
|
|
78
|
-
|
|
79
|
-
font:
|
|
80
|
-
family: matcha-font-family($config, button);
|
|
81
|
-
}
|
|
86
|
+
font-size: px-to-rem(24px);
|
|
87
|
+
font-family: matcha-font-family($config, title);
|
|
88
|
+
font-weight: matcha-font-weight($config, title);
|
|
82
89
|
}
|
|
83
90
|
|
|
84
91
|
.h4,
|
|
85
92
|
h4 {
|
|
86
|
-
font-size: 20px;
|
|
87
|
-
|
|
88
|
-
font:
|
|
89
|
-
family: matcha-font-family($config, button);
|
|
90
|
-
}
|
|
93
|
+
font-size: px-to-rem(20px);
|
|
94
|
+
font-family: matcha-font-family($config, title);
|
|
95
|
+
font-weight: matcha-font-weight($config, title);
|
|
91
96
|
}
|
|
92
97
|
|
|
93
98
|
.h5,
|
|
94
99
|
h5 {
|
|
95
|
-
font-size: 16px;
|
|
96
|
-
|
|
97
|
-
font:
|
|
98
|
-
family: matcha-font-family($config, button);
|
|
99
|
-
}
|
|
100
|
+
font-size: px-to-rem(16px);
|
|
101
|
+
font-family: matcha-font-family($config, title);
|
|
102
|
+
font-weight: matcha-font-weight($config, title);
|
|
100
103
|
}
|
|
101
104
|
|
|
102
105
|
.h6,
|
|
103
106
|
h6 {
|
|
104
|
-
font-size: 14px;
|
|
105
|
-
|
|
106
|
-
font:
|
|
107
|
-
family: matcha-font-family($config, button);
|
|
108
|
-
}
|
|
107
|
+
font-size: px-to-rem(14px);
|
|
108
|
+
font-family: matcha-font-family($config, title);
|
|
109
|
+
font-weight: matcha-font-weight($config, title);
|
|
109
110
|
}
|
|
110
111
|
|
|
111
|
-
.h7
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
font:
|
|
115
|
-
|
|
116
|
-
}
|
|
112
|
+
.h7,
|
|
113
|
+
.subheading-2 {
|
|
114
|
+
font-size: px-to-rem(12px);
|
|
115
|
+
font-family: matcha-font-family($config, title);
|
|
116
|
+
font-weight: matcha-font-weight($config, title);
|
|
117
117
|
}
|
|
118
118
|
|
|
119
|
-
.h8
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
font:
|
|
123
|
-
|
|
124
|
-
}
|
|
125
|
-
|
|
119
|
+
.h8,
|
|
120
|
+
.subheading-1 {
|
|
121
|
+
font-size: px-to-rem(12px);
|
|
122
|
+
font-family: matcha-font-family($config, title);
|
|
123
|
+
font-weight: matcha-font-weight($config, title);
|
|
126
124
|
text-transform: uppercase;
|
|
127
|
-
letter-spacing: 0.
|
|
125
|
+
letter-spacing: px-to-rem(0.8px);
|
|
128
126
|
}
|
|
129
127
|
|
|
130
128
|
.text-bold,
|
|
131
129
|
strong,
|
|
132
130
|
b {
|
|
133
|
-
font:
|
|
134
|
-
|
|
135
|
-
}
|
|
131
|
+
font-family: matcha-font-family($config, title);
|
|
132
|
+
font-weight: matcha-font-weight($config, title);
|
|
136
133
|
}
|
|
137
134
|
}
|
package/base/_typography.scss
CHANGED
|
@@ -20,7 +20,7 @@ How to use
|
|
|
20
20
|
|
|
21
21
|
code {
|
|
22
22
|
&:not(.highlight) {
|
|
23
|
-
background-color: map-get($background,
|
|
23
|
+
background-color: map-get($background, card);
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
26
|
|
|
@@ -41,23 +41,23 @@ How to use
|
|
|
41
41
|
}
|
|
42
42
|
|
|
43
43
|
.text-primary {
|
|
44
|
-
color: map-get($primary, default);
|
|
44
|
+
color: map-get($primary, default) !important;
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
.text-warn {
|
|
48
|
-
color: map-get($warn, default);
|
|
48
|
+
color: map-get($warn, default) !important;
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
.text-label {
|
|
52
|
-
color: map-get($foreground, label);
|
|
52
|
+
color: map-get($foreground, label) !important;
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
.text-placeholder {
|
|
56
|
-
color: map-get($foreground, placeholder);
|
|
56
|
+
color: map-get($foreground, placeholder) !important;
|
|
57
57
|
}
|
|
58
58
|
|
|
59
59
|
.text-basic {
|
|
60
|
-
color: map-get($foreground, text);
|
|
60
|
+
color: map-get($foreground, text) !important;
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
// Changelog
|
|
@@ -153,25 +153,25 @@ How to use
|
|
|
153
153
|
// -----------------------------------------------------------------------------------------------------
|
|
154
154
|
// Paragraph
|
|
155
155
|
.par-xs {
|
|
156
|
-
font-size: 12px;
|
|
156
|
+
font-size: 12px !important;
|
|
157
157
|
}
|
|
158
158
|
|
|
159
159
|
.par-sm,
|
|
160
160
|
.par-p {
|
|
161
|
-
font-size: 14px;
|
|
161
|
+
font-size: 14px !important;
|
|
162
162
|
}
|
|
163
163
|
|
|
164
164
|
.par-md,
|
|
165
165
|
.par-m {
|
|
166
|
-
font-size: 16px;
|
|
166
|
+
font-size: 16px !important;
|
|
167
167
|
}
|
|
168
168
|
|
|
169
169
|
.par-lg {
|
|
170
|
-
font-size:
|
|
170
|
+
font-size: 20px !important;
|
|
171
171
|
}
|
|
172
172
|
|
|
173
173
|
.par-xl {
|
|
174
|
-
font-size:
|
|
174
|
+
font-size: 24px !important;
|
|
175
175
|
}
|
|
176
176
|
|
|
177
177
|
.text-semibold {
|
|
@@ -1,8 +1,12 @@
|
|
|
1
1
|
@mixin _matcha-table-theme-container-shadow-property($theme) {
|
|
2
2
|
$background: map-get($theme, background);
|
|
3
3
|
|
|
4
|
-
box-shadow:
|
|
5
|
-
-
|
|
4
|
+
box-shadow:
|
|
5
|
+
0px -16px 0px 0px inset map-get($background, card),
|
|
6
|
+
20px 0 16px -24px inset #000000,
|
|
7
|
+
-20px 0 16px -24px inset #000000,
|
|
8
|
+
0px 2px 2px 0px #00000009,
|
|
9
|
+
0px 2px 2px 0px #00000009,
|
|
6
10
|
0px 2px 2px 0px #00000009;
|
|
7
11
|
}
|
|
8
12
|
|
|
@@ -10,24 +14,30 @@
|
|
|
10
14
|
$background: map-get($theme, background);
|
|
11
15
|
|
|
12
16
|
background: map-get($background, card);
|
|
13
|
-
background: linear-gradient(
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
17
|
+
background: linear-gradient(
|
|
18
|
+
90deg,
|
|
19
|
+
map-get($background, card) 0px,
|
|
20
|
+
map-get($background, card) 0px,
|
|
21
|
+
rgba(255, 255, 255, 0) calc(0% + 40px),
|
|
22
|
+
rgba(255, 255, 255, 0) calc(100% - 40px),
|
|
23
|
+
map-get($background, card) calc(100% - 0px)
|
|
24
|
+
);
|
|
25
|
+
background: -moz-linear-gradient(
|
|
26
|
+
90deg,
|
|
27
|
+
map-get($background, card) 0px,
|
|
28
|
+
map-get($background, card) 0px,
|
|
29
|
+
rgba(255, 255, 255, 0) calc(0% + 40px),
|
|
30
|
+
rgba(255, 255, 255, 0) calc(100% - 40px),
|
|
31
|
+
map-get($background, card) calc(100% - 0px)
|
|
32
|
+
);
|
|
33
|
+
background: -webkit-linear-gradient(
|
|
34
|
+
0deg,
|
|
35
|
+
map-get($background, card) 0px,
|
|
36
|
+
map-get($background, card) 0px,
|
|
37
|
+
rgba(255, 255, 255, 0) calc(0% + 40px),
|
|
38
|
+
rgba(255, 255, 255, 0) calc(100% - 40px),
|
|
39
|
+
map-get($background, card) calc(100% - 0px)
|
|
40
|
+
);
|
|
31
41
|
}
|
|
32
42
|
|
|
33
43
|
@mixin matcha-table-theme($theme) {
|
|
@@ -45,7 +55,8 @@
|
|
|
45
55
|
overflow: auto;
|
|
46
56
|
@include _matcha-table-theme-container-shadow-property($theme);
|
|
47
57
|
|
|
48
|
-
.mat-table
|
|
58
|
+
.mat-table,
|
|
59
|
+
.mat-sort {
|
|
49
60
|
tbody {
|
|
50
61
|
@include _matcha-table-theme-shadow-property($theme);
|
|
51
62
|
}
|
|
@@ -57,7 +68,8 @@
|
|
|
57
68
|
.table-container {
|
|
58
69
|
width: 100%;
|
|
59
70
|
|
|
60
|
-
.mat-table
|
|
71
|
+
.mat-table,
|
|
72
|
+
.mat-sort {
|
|
61
73
|
.published {
|
|
62
74
|
color: map-get($foreground, green);
|
|
63
75
|
// margin-top: 5px;
|
|
@@ -73,10 +85,14 @@
|
|
|
73
85
|
overflow: auto;
|
|
74
86
|
background: map-get($background, card);
|
|
75
87
|
border-radius: 8px;
|
|
76
|
-
box-shadow:
|
|
88
|
+
box-shadow:
|
|
89
|
+
0px 2px 2px 0px #00000009,
|
|
90
|
+
0px 2px 2px 0px #00000009,
|
|
91
|
+
0px 2px 2px 0px #00000009;
|
|
77
92
|
@include _matcha-table-theme-container-shadow-property($theme);
|
|
78
93
|
|
|
79
|
-
.mat-table
|
|
94
|
+
.mat-table,
|
|
95
|
+
.mat-sort {
|
|
80
96
|
tbody {
|
|
81
97
|
@include _matcha-table-theme-shadow-property($theme);
|
|
82
98
|
}
|
|
@@ -85,13 +101,15 @@
|
|
|
85
101
|
&.ps--active-x {
|
|
86
102
|
@include _matcha-table-theme-container-shadow-property($theme);
|
|
87
103
|
|
|
88
|
-
.mat-table
|
|
104
|
+
.mat-table,
|
|
105
|
+
.mat-sort {
|
|
89
106
|
@include _matcha-table-theme-shadow-property($theme);
|
|
90
107
|
}
|
|
91
108
|
}
|
|
92
109
|
}
|
|
93
110
|
|
|
94
111
|
.mat-table,
|
|
112
|
+
.mat-sort,
|
|
95
113
|
.mat-expansion-panel {
|
|
96
114
|
thead {
|
|
97
115
|
background: map-get($background, card);
|
|
@@ -103,7 +121,6 @@
|
|
|
103
121
|
|
|
104
122
|
tr {
|
|
105
123
|
&.mat-row {
|
|
106
|
-
|
|
107
124
|
// &:nth-child(even){background: map-get($background, card);}
|
|
108
125
|
&:nth-child(odd) {
|
|
109
126
|
background: map-get($background, table-row-hover);
|
|
@@ -119,7 +136,8 @@
|
|
|
119
136
|
padding-left: 24px;
|
|
120
137
|
}
|
|
121
138
|
|
|
122
|
-
&:last-child {
|
|
139
|
+
&:last-child {
|
|
140
|
+
}
|
|
123
141
|
|
|
124
142
|
.clickable {
|
|
125
143
|
cursor: pointer;
|
|
@@ -249,7 +267,8 @@
|
|
|
249
267
|
// X-Large devices (big desktops, 1440px and up < 1920)
|
|
250
268
|
@media (min-width: 1440px) {
|
|
251
269
|
.table-container {
|
|
252
|
-
.mat-table
|
|
270
|
+
.mat-table,
|
|
271
|
+
.mat-sort {
|
|
253
272
|
.mat-cell {
|
|
254
273
|
font-size: 16px;
|
|
255
274
|
}
|
package/main.scss
CHANGED
|
@@ -49,38 +49,38 @@
|
|
|
49
49
|
|
|
50
50
|
// DEFAULT FONTS
|
|
51
51
|
@font-face {
|
|
52
|
-
font-family: "CircularStd
|
|
52
|
+
font-family: "CircularStd";
|
|
53
53
|
src: url("fonts/CircularStd-Regular.eot");
|
|
54
54
|
src:
|
|
55
55
|
local("☺"),
|
|
56
56
|
url("fonts/CircularStd-Regular.woff") format("woff"),
|
|
57
57
|
url("fonts/CircularStd-Regular.ttf") format("truetype"),
|
|
58
58
|
url("fonts/CircularStd-Regular.svg") format("svg");
|
|
59
|
-
font-weight:
|
|
59
|
+
font-weight: 400;
|
|
60
60
|
font-style: normal;
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
@font-face {
|
|
64
|
-
font-family: "CircularStd
|
|
64
|
+
font-family: "CircularStd";
|
|
65
65
|
src: url("fonts/CircularStd-Medium.eot");
|
|
66
66
|
src:
|
|
67
67
|
local("☺"),
|
|
68
68
|
url("fonts/CircularStd-Medium.woff") format("woff"),
|
|
69
69
|
url("fonts/CircularStd-Medium.ttf") format("truetype"),
|
|
70
70
|
url("fonts/CircularStd-Medium.svg") format("svg");
|
|
71
|
-
font-weight:
|
|
71
|
+
font-weight: 500;
|
|
72
72
|
font-style: normal;
|
|
73
73
|
}
|
|
74
74
|
|
|
75
75
|
@font-face {
|
|
76
|
-
font-family: "CircularStd
|
|
76
|
+
font-family: "CircularStd";
|
|
77
77
|
src: url("fonts/CircularStd-Bold.eot");
|
|
78
78
|
src:
|
|
79
79
|
local("☺"),
|
|
80
80
|
url("fonts/CircularStd-Bold.woff") format("woff"),
|
|
81
81
|
url("fonts/CircularStd-Bold.ttf") format("truetype"),
|
|
82
82
|
url("fonts/CircularStd-Bold.svg") format("svg");
|
|
83
|
-
font-weight:
|
|
83
|
+
font-weight: 700;
|
|
84
84
|
font-style: normal;
|
|
85
85
|
}
|
|
86
86
|
// -------------------------------------------------------------------------------------------------------------------
|
|
@@ -96,6 +96,7 @@
|
|
|
96
96
|
|
|
97
97
|
@mixin matcha-components($theme) {
|
|
98
98
|
@include colors-classes-dynamic($theme);
|
|
99
|
+
@include colors-classes-static($theme);
|
|
99
100
|
|
|
100
101
|
@include elevation-theme($theme);
|
|
101
102
|
|
package/package.json
CHANGED
|
@@ -1124,9 +1124,9 @@ $dark-grey: $mat-dark-grey;
|
|
|
1124
1124
|
// --------------------------------------------------------------------------------------------------------------------
|
|
1125
1125
|
|
|
1126
1126
|
$light-theme-background-palette: (
|
|
1127
|
-
status-bar: $color-base-grey-300,
|
|
1128
|
-
app-bar: white,
|
|
1129
|
-
hover: rgba(black, 0.04),
|
|
1127
|
+
// status-bar: $color-base-grey-300,
|
|
1128
|
+
// app-bar: white,
|
|
1129
|
+
// hover: rgba(black, 0.04),
|
|
1130
1130
|
background: $color-base-blue-grey-50,
|
|
1131
1131
|
background-inverse: $color-base-dark-grey-700,
|
|
1132
1132
|
background-alpha: #f5f7fa80,
|
|
@@ -1136,16 +1136,15 @@ $light-theme-background-palette: (
|
|
|
1136
1136
|
card-alpha: #ffffff80,
|
|
1137
1137
|
card-alpha-inverse: #2b2c2d80,
|
|
1138
1138
|
|
|
1139
|
-
dialog: white,
|
|
1140
|
-
disabled-button: rgba(black, 0.12),
|
|
1141
|
-
raised-button: white,
|
|
1142
|
-
focused-button: rgba(black, 0.12),
|
|
1143
|
-
selected-button: $color-base-grey-300,
|
|
1144
|
-
selected-disabled-button: $color-base-grey-400,
|
|
1145
|
-
disabled-button-toggle: $color-base-grey-200,
|
|
1146
|
-
unselected-chip: $color-base-grey-300,
|
|
1147
|
-
disabled-list-option: $color-base-grey-200,
|
|
1148
|
-
|
|
1139
|
+
// dialog: white,
|
|
1140
|
+
// disabled-button: rgba(black, 0.12),
|
|
1141
|
+
// raised-button: white,
|
|
1142
|
+
// focused-button: rgba(black, 0.12),
|
|
1143
|
+
// selected-button: $color-base-grey-300,
|
|
1144
|
+
// selected-disabled-button: $color-base-grey-400,
|
|
1145
|
+
// disabled-button-toggle: $color-base-grey-200,
|
|
1146
|
+
// unselected-chip: $color-base-grey-300,
|
|
1147
|
+
// disabled-list-option: $color-base-grey-200,
|
|
1149
1148
|
// MATCHA-DS
|
|
1150
1149
|
sidebar: $color-base-blue-grey-50,
|
|
1151
1150
|
sidebar-hover: white,
|
|
@@ -1193,9 +1192,9 @@ $light-theme-background-palette: (
|
|
|
1193
1192
|
|
|
1194
1193
|
// Background palette for dark themes.
|
|
1195
1194
|
$dark-theme-background-palette: (
|
|
1196
|
-
status-bar: black,
|
|
1197
|
-
app-bar: $color-base-blue-grey-800,
|
|
1198
|
-
hover: rgba(white, 0.04),
|
|
1195
|
+
// status-bar: black,
|
|
1196
|
+
// app-bar: $color-base-blue-grey-800,
|
|
1197
|
+
// hover: rgba(white, 0.04),
|
|
1199
1198
|
background: $color-base-dark-grey-700,
|
|
1200
1199
|
background-inverse: $color-base-blue-grey-50,
|
|
1201
1200
|
background-alpha: #1b1b1b80,
|
|
@@ -1205,16 +1204,15 @@ $dark-theme-background-palette: (
|
|
|
1205
1204
|
card-alpha: #2b2c2d80,
|
|
1206
1205
|
card-alpha-inverse: #ffffff80,
|
|
1207
1206
|
|
|
1208
|
-
dialog: $color-base-blue-grey-800,
|
|
1209
|
-
disabled-button: rgba(white, 0.12),
|
|
1210
|
-
raised-button: $color-base-grey-800,
|
|
1211
|
-
focused-button: rgba(white, 0.12),
|
|
1212
|
-
selected-button: $color-base-blue-grey-900,
|
|
1213
|
-
selected-disabled-button: $color-base-grey-800,
|
|
1214
|
-
disabled-button-toggle: black,
|
|
1215
|
-
unselected-chip: $color-base-blue-grey-700,
|
|
1216
|
-
disabled-list-option: black,
|
|
1217
|
-
|
|
1207
|
+
// dialog: $color-base-blue-grey-800,
|
|
1208
|
+
// disabled-button: rgba(white, 0.12),
|
|
1209
|
+
// raised-button: $color-base-grey-800,
|
|
1210
|
+
// focused-button: rgba(white, 0.12),
|
|
1211
|
+
// selected-button: $color-base-blue-grey-900,
|
|
1212
|
+
// selected-disabled-button: $color-base-grey-800,
|
|
1213
|
+
// disabled-button-toggle: black,
|
|
1214
|
+
// unselected-chip: $color-base-blue-grey-700,
|
|
1215
|
+
// disabled-list-option: black,
|
|
1218
1216
|
// MATCHA-DS
|
|
1219
1217
|
sidebar: $color-base-dark-grey-700,
|
|
1220
1218
|
sidebar-hover: $color-base-blue-grey-800,
|
|
@@ -1266,7 +1264,7 @@ $light-theme-foreground-palette: (
|
|
|
1266
1264
|
divider: rgba(black, 0.12),
|
|
1267
1265
|
dividers: rgba(black, 0.12),
|
|
1268
1266
|
disabled: rgba(black, 0.38),
|
|
1269
|
-
disabled-button: rgba(black, 0.26),
|
|
1267
|
+
// disabled-button: rgba(black, 0.26),
|
|
1270
1268
|
disabled-text: rgba(black, 0.38),
|
|
1271
1269
|
elevation: black,
|
|
1272
1270
|
hint-text: $color-base-blue-grey-400,
|
|
@@ -1332,7 +1330,7 @@ $dark-theme-foreground-palette: (
|
|
|
1332
1330
|
divider: rgba(white, 0.12),
|
|
1333
1331
|
dividers: rgba(white, 0.12),
|
|
1334
1332
|
disabled: rgba(white, 0.5),
|
|
1335
|
-
disabled-button: rgba(white, 0.3),
|
|
1333
|
+
// disabled-button: rgba(white, 0.3),
|
|
1336
1334
|
disabled-text: rgba(white, 0.5),
|
|
1337
1335
|
elevation: black,
|
|
1338
1336
|
hint-text: $color-base-blue-grey-200,
|
|
@@ -8,8 +8,29 @@
|
|
|
8
8
|
// -------------------------------------------------------------------------------------------------------------------
|
|
9
9
|
// @ ANGULAR MATERIAL - To attempt to fix some of the issues with the Angular Material components we have to override
|
|
10
10
|
// -------------------------------------------------------------------------------------------------------------------
|
|
11
|
+
--mdc-typography-button-letter-spacing: 0;
|
|
12
|
+
.mat-mdc-unelevated-button,
|
|
13
|
+
.mat-mdc-raised-button,
|
|
14
|
+
.mat-mdc-fab,
|
|
15
|
+
.mat-mdc-mini-fab {
|
|
16
|
+
--mdc-filled-button-container-shape: 8px;
|
|
17
|
+
&:not([disabled="true"]) {
|
|
18
|
+
&.mat-primary {
|
|
19
|
+
color: map-get($primary, "default-contrast");
|
|
20
|
+
}
|
|
21
|
+
&.mat-accent {
|
|
22
|
+
color: map-get($accent, "default-contrast");
|
|
23
|
+
}
|
|
24
|
+
&.mat-warn {
|
|
25
|
+
color: map-get($warn, "default-contrast");
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
}
|
|
11
29
|
.mat-mdc-outlined-button {
|
|
12
30
|
--mdc-outlined-button-container-shape: 8px;
|
|
31
|
+
--mdc-outlined-button-outline-color: currentColor;
|
|
32
|
+
--mdc-outlined-button-outline-width: 0;
|
|
33
|
+
box-shadow: 0px 0px 0px 2px currentColor inset;
|
|
13
34
|
}
|
|
14
35
|
.mat-mdc-raised-button {
|
|
15
36
|
--mdc-protected-button-container-height: 36px;
|
|
@@ -22,6 +43,29 @@
|
|
|
22
43
|
.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__trailing {
|
|
23
44
|
--mdc-outlined-text-field-outline-width: 2px;
|
|
24
45
|
}
|
|
46
|
+
.mdc-text-field--outlined.mdc-text-field--disabled .mdc-notched-outline .mdc-notched-outline__leading,
|
|
47
|
+
.mdc-text-field--outlined.mdc-text-field--disabled .mdc-notched-outline .mdc-notched-outline__notch,
|
|
48
|
+
.mdc-text-field--outlined.mdc-text-field--disabled .mdc-notched-outline .mdc-notched-outline__trailing {
|
|
49
|
+
--mdc-outlined-text-field-outline-width: 2px;
|
|
50
|
+
}
|
|
51
|
+
.mdc-notched-outline__trailing {
|
|
52
|
+
border-left: none;
|
|
53
|
+
border-right: 2px solid;
|
|
54
|
+
}
|
|
55
|
+
.mdc-notched-outline__leading {
|
|
56
|
+
border-left: 2px solid;
|
|
57
|
+
border-right: none;
|
|
58
|
+
width: 12px;
|
|
59
|
+
}
|
|
60
|
+
.mdc-notched-outline__notch {
|
|
61
|
+
border-left: 2px solid transparent;
|
|
62
|
+
}
|
|
63
|
+
.mdc-notched-outline__leading,
|
|
64
|
+
.mdc-notched-outline__notch,
|
|
65
|
+
.mdc-notched-outline__trailing {
|
|
66
|
+
border-top: 2px solid;
|
|
67
|
+
border-bottom: 2px solid;
|
|
68
|
+
}
|
|
25
69
|
.mdc-text-field--outlined {
|
|
26
70
|
--mdc-outlined-text-field-container-shape: 8px;
|
|
27
71
|
}
|
|
@@ -54,22 +98,163 @@
|
|
|
54
98
|
justify-content: center;
|
|
55
99
|
flex-wrap: wrap;
|
|
56
100
|
}
|
|
101
|
+
.mat-stepper-vertical,
|
|
102
|
+
.mat-stepper-horizontal {
|
|
103
|
+
--mat-stepper-container-color: map-get($background, surface);
|
|
104
|
+
}
|
|
105
|
+
.mat-stepper-horizontal {
|
|
106
|
+
&.bullet-stepper-header-labeled {
|
|
107
|
+
.mat-horizontal-stepper-header-container {
|
|
108
|
+
justify-content: end;
|
|
109
|
+
margin-bottom: 0;
|
|
110
|
+
margin-top: 0;
|
|
111
|
+
margin-right: 0;
|
|
112
|
+
padding-right: 24px;
|
|
113
|
+
height: 0;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
&.bullet-stepper-header-labeled,
|
|
118
|
+
&.bullet-stepper-header {
|
|
119
|
+
position: relative;
|
|
120
|
+
|
|
121
|
+
.mat-horizontal-stepper-header-container {
|
|
122
|
+
.mat-stepper-horizontal-line {
|
|
123
|
+
display: none;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.mat-step-header-ripple {
|
|
127
|
+
display: none;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.mat-horizontal-stepper-header {
|
|
131
|
+
height: initial;
|
|
132
|
+
overflow: initial;
|
|
133
|
+
|
|
134
|
+
&.mat-step-header {
|
|
135
|
+
padding: 0;
|
|
136
|
+
border-radius: 0;
|
|
137
|
+
flex-direction: column;
|
|
138
|
+
position: inherit;
|
|
139
|
+
width: 40px;
|
|
140
|
+
|
|
141
|
+
&.cdk-keyboard-focused,
|
|
142
|
+
&.cdk-program-focused,
|
|
143
|
+
&:hover {
|
|
144
|
+
background-color: transparent;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.mat-step-icon {
|
|
148
|
+
margin: -32px 0 0 8px;
|
|
149
|
+
border-radius: 8px;
|
|
150
|
+
height: 8px;
|
|
151
|
+
width: 32px;
|
|
152
|
+
flex-shrink: 0;
|
|
153
|
+
position: absolute;
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.mat-step-label {
|
|
158
|
+
position: absolute;
|
|
159
|
+
display: none;
|
|
160
|
+
right: 0;
|
|
161
|
+
margin-top: -52px;
|
|
162
|
+
margin-right: 24px;
|
|
163
|
+
font-family: "CircularStd-Bold";
|
|
164
|
+
color: map-get($foreground, label);
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.mat-step-label.mat-step-label-active {
|
|
168
|
+
display: none;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.mat-step-label.mat-step-label-active.mat-step-label-selected {
|
|
172
|
+
display: flex;
|
|
173
|
+
justify-content: flex-end;
|
|
174
|
+
}
|
|
57
175
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
176
|
+
.mat-step-icon-state-edit {
|
|
177
|
+
margin: 0;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.mat-step-icon-state-edit.mat-step-icon {
|
|
181
|
+
background-color: map-get($accent, default);
|
|
182
|
+
|
|
183
|
+
.mat-icon {
|
|
184
|
+
display: none;
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.mat-step-icon-state-number {
|
|
189
|
+
// background-color: blue;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.mat-step-icon-state-number.mat-step-icon {
|
|
193
|
+
background-color: map-get($background, disabled);
|
|
194
|
+
|
|
195
|
+
.mat-step-icon-content {
|
|
196
|
+
display: none;
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
.mat-step-icon-state-number.mat-step-icon.mat-step-icon-selected {
|
|
201
|
+
background-color: map-get($accent, default);
|
|
202
|
+
order: 1;
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
.mat-horizontal-content-container {
|
|
208
|
+
padding: 0;
|
|
209
|
+
|
|
210
|
+
.mat-dialog-content {
|
|
211
|
+
max-height: calc(100vh - 268px);
|
|
212
|
+
}
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
&.hide-stepper-header {
|
|
217
|
+
.mat-horizontal-stepper-header-container {
|
|
218
|
+
display: none !important;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
.mat-horizontal-content-container {
|
|
222
|
+
overflow: hidden;
|
|
223
|
+
padding: 0;
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
&.page-layout-stepper {
|
|
228
|
+
.mat-horizontal-stepper-header-container {
|
|
229
|
+
padding-right: 24px;
|
|
230
|
+
|
|
231
|
+
.mat-horizontal-stepper-header {
|
|
232
|
+
.mat-step-label {
|
|
233
|
+
margin-top: -60px;
|
|
234
|
+
margin-right: 24px;
|
|
235
|
+
}
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
@media screen and (min-width: 600px) {
|
|
241
|
+
.mat-stepper-horizontal {
|
|
242
|
+
&.bullet-stepper-header-labeled {
|
|
243
|
+
.mat-horizontal-stepper-header-container {
|
|
244
|
+
padding-right: 72px;
|
|
245
|
+
.mat-horizontal-stepper-header {
|
|
246
|
+
.mat-step-label {
|
|
247
|
+
margin-right: 72px;
|
|
248
|
+
}
|
|
249
|
+
}
|
|
250
|
+
}
|
|
251
|
+
}
|
|
252
|
+
}
|
|
253
|
+
}
|
|
254
|
+
@media screen and (min-width: 1024px) {
|
|
255
|
+
}
|
|
256
|
+
@media screen and (min-width: 1440px) {
|
|
257
|
+
}
|
|
258
|
+
@media screen and (min-width: 1920px) {
|
|
259
|
+
}
|
|
75
260
|
}
|