@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/README.md
CHANGED
|
@@ -2,4 +2,77 @@
|
|
|
2
2
|
|
|
3
3
|
yuuvis Momentum component library based on [Angular Material](https://www.npmjs.com/package/@angular/material).
|
|
4
4
|
|
|
5
|
+
## Theming in Consumer Apps
|
|
6
|
+
According to Angular Material it is possible to customize the theme in 2 categories: Color and Typography.
|
|
7
|
+
|
|
8
|
+
### Setup Material Color Palette
|
|
9
|
+
Generate Material Color Palette with your seed colors: `ng generate @angular/material:theme-color`.
|
|
10
|
+
|
|
11
|
+
### Include Theme Mixin
|
|
12
|
+
Include that mixin before loading `@include ymt.global-styles()`in the styles.scss of your project with your
|
|
13
|
+
new colors and typography values.
|
|
14
|
+
|
|
15
|
+
Only add the color palettes and typography settings that you want to change. If only
|
|
16
|
+
the primary palette changes, only add this palette.
|
|
17
|
+
|
|
18
|
+
```
|
|
19
|
+
$new-palettes: {
|
|
20
|
+
primary: ([generated values]),
|
|
21
|
+
secondary: ([generated values]),
|
|
22
|
+
tertiary: ([generated values]),
|
|
23
|
+
neutral: ([generated values]),
|
|
24
|
+
neutral-variant: ([generated values]),
|
|
25
|
+
error: ([generated values]),
|
|
26
|
+
success: ([generated values]),
|
|
27
|
+
warning: ([generated values]),
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
$new-theme: (
|
|
31
|
+
color: $new-palettes,
|
|
32
|
+
typography: (
|
|
33
|
+
plain-family: Helvetica,
|
|
34
|
+
brand-family: Helvetica,
|
|
35
|
+
bold-weight: 700,
|
|
36
|
+
medium-weight: 500,
|
|
37
|
+
regular-weight: 400
|
|
38
|
+
)
|
|
39
|
+
);
|
|
40
|
+
// adjust theme before loading global styles
|
|
41
|
+
@include ymt.theme($new-theme);
|
|
42
|
+
@include ymt.global-styles();
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
> **_NOTE:_**
|
|
46
|
+
Note: You may have noticed that the generator won't output palettes for success & warning by default.
|
|
47
|
+
These are custom palettes added by yuuvis. To customize them with your new seed colors for success and warning
|
|
48
|
+
just put them in prompt of the generator. After that copy/paste them over.
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
### Overriding Material System Token (mat-sys)
|
|
52
|
+
In Order to override the Material System Tokens, add a second parameter in the theme mixin.
|
|
53
|
+
|
|
54
|
+
```
|
|
55
|
+
$new-mat-sys-token-overrides: (
|
|
56
|
+
'outline': black
|
|
57
|
+
);
|
|
58
|
+
|
|
59
|
+
@include ymt.theme($new-theme, $new-mat-sys-token-overrides);
|
|
60
|
+
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
### Overriding Yuuvis Material Token (ymt)
|
|
64
|
+
On top of that you may want to customize some of our ymt token
|
|
65
|
+
that mostly references mat-sys token under the hood:
|
|
66
|
+
|
|
67
|
+
````
|
|
68
|
+
@include ymt.token-overrides((
|
|
69
|
+
brand: green,
|
|
70
|
+
surface: white
|
|
71
|
+
));
|
|
72
|
+
````
|
|
73
|
+
|
|
74
|
+
> **_NOTE:_**
|
|
75
|
+
> Just including `ymt.token-overrides()` without any surrounding CSS selector, CSS variables will be created under `:root{}`
|
|
76
|
+
|
|
77
|
+
|
|
5
78
|
License: MIT
|
package/package.json
CHANGED
package/scss/elements/_root.scss
CHANGED
package/scss/index.scss
CHANGED
|
@@ -1,11 +1,25 @@
|
|
|
1
1
|
@use 'sass:meta';
|
|
2
|
+
@use 'themes/yuuvis-standard/mat-theme-config' as theme-cfg;
|
|
3
|
+
@use 'token/token.tools' as token-tools;
|
|
2
4
|
@forward 'material-components/tools';
|
|
3
5
|
|
|
6
|
+
|
|
7
|
+
@mixin theme($theme: (), $theme-overrides: ()){
|
|
8
|
+
@include theme-cfg.modify($theme, $theme-overrides);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
@mixin token-overrides($overrides: ()){
|
|
12
|
+
@include token-tools.token-overrides($overrides);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
|
|
4
16
|
@mixin global-styles($generics: true, $vendors: true, $elements: true, $components: true, $utils: true, $material-components: true) {
|
|
5
17
|
@layer token, generics, vendors, elements, ng-components, components, utils;
|
|
6
18
|
|
|
19
|
+
|
|
7
20
|
@layer token {
|
|
8
|
-
@include meta.load-css('./themes/yuuvis-standard/theme');
|
|
21
|
+
@include meta.load-css('./themes/yuuvis-standard/mat-theme');
|
|
22
|
+
@include meta.load-css('./themes/yuuvis-standard/mat-theme-components');
|
|
9
23
|
@include meta.load-css('./token');
|
|
10
24
|
}
|
|
11
25
|
|
|
@@ -39,6 +53,7 @@
|
|
|
39
53
|
}
|
|
40
54
|
}
|
|
41
55
|
|
|
56
|
+
//Custom CSS for Material Components (on top of Token Overrides)
|
|
42
57
|
@if($material-components){
|
|
43
58
|
@include meta.load-css('./material-components');
|
|
44
59
|
}
|
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
@use '@angular/material' as mat;
|
|
2
|
+
@use '../../token/token.tools' as t;
|
|
3
|
+
|
|
4
|
+
:root {
|
|
5
|
+
/*
|
|
6
|
+
Material Component Token Overrides
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
/* Core */
|
|
10
|
+
@include mat.core-overrides(
|
|
11
|
+
(
|
|
12
|
+
option-label-text-font: t.use-token(font-body-font),
|
|
13
|
+
option-label-text-line-height: t.use-token(font-body-line-height),
|
|
14
|
+
option-label-text-size: t.use-token(font-body-size),
|
|
15
|
+
option-label-text-tracking: t.use-token(font-body-tracking),
|
|
16
|
+
option-label-text-weight: t.use-token(font-body-weight),
|
|
17
|
+
optgroup-label-text-font: t.use-token(font-body-font),
|
|
18
|
+
optgroup-label-text-line-height: t.use-token(font-body-line-height),
|
|
19
|
+
optgroup-label-text-size: t.use-token(font-body-size),
|
|
20
|
+
optgroup-label-text-tracking: t.use-token(font-body-tracking),
|
|
21
|
+
optgroup-label-text-weight: t.use-token(font-body-weight)
|
|
22
|
+
)
|
|
23
|
+
);
|
|
24
|
+
|
|
25
|
+
/* Loading Indicator/Progress-Bar/-Spinner */
|
|
26
|
+
@include mat.progress-bar-overrides(
|
|
27
|
+
(
|
|
28
|
+
active-indicator-height: t.use-token(progress-bar-height),
|
|
29
|
+
track-height: t.use-token(progress-bar-height),
|
|
30
|
+
//track-shape: none,
|
|
31
|
+
active-indicator-color: var(--mat-sys-primary),
|
|
32
|
+
track-color: rgb(from var(--mat-sys-primary) r g b / 0.2)
|
|
33
|
+
)
|
|
34
|
+
);
|
|
35
|
+
@include mat.progress-spinner-overrides(
|
|
36
|
+
(
|
|
37
|
+
active-indicator-color: var(--mat-sys-primary),
|
|
38
|
+
// "active-indicator-width" does not work!
|
|
39
|
+
// "size" does not work!
|
|
40
|
+
)
|
|
41
|
+
);
|
|
42
|
+
/* Buttons */
|
|
43
|
+
@include mat.button-overrides();
|
|
44
|
+
|
|
45
|
+
/*Icon Button*/
|
|
46
|
+
/* This is a quick and dirty workaround.
|
|
47
|
+
Material Icon Button with larger absolute positioned touch
|
|
48
|
+
targets cause horizontal scrollbar to appear.*/
|
|
49
|
+
@include mat.icon-button-overrides(
|
|
50
|
+
(
|
|
51
|
+
touch-target-display: none,
|
|
52
|
+
state-layer-color: var(--mat-sys-on-surface),
|
|
53
|
+
state-layer-size: t.use-token(sizing-2xl),
|
|
54
|
+
icon-size: t.use-token(sizing-m)
|
|
55
|
+
)
|
|
56
|
+
);
|
|
57
|
+
|
|
58
|
+
/*Fab*/
|
|
59
|
+
@include mat.fab-overrides(
|
|
60
|
+
(
|
|
61
|
+
container-elevation-shadow: none,
|
|
62
|
+
focus-container-elevation-shadow: none,
|
|
63
|
+
hover-container-elevation-shadow: none,
|
|
64
|
+
pressed-container-elevation-shadow: none,
|
|
65
|
+
touch-target-display: none,
|
|
66
|
+
extended-container-elevation-shadow: none,
|
|
67
|
+
extended-focus-container-elevation-shadow: none,
|
|
68
|
+
extended-hover-container-elevation-shadow: none,
|
|
69
|
+
extended-pressed-container-elevation-shadow: none,
|
|
70
|
+
extended-container-height: 36px,
|
|
71
|
+
small-container-elevation-shadow: none,
|
|
72
|
+
small-focus-container-elevation-shadow: none,
|
|
73
|
+
small-hover-container-elevation-shadow: none,
|
|
74
|
+
small-pressed-container-elevation-shadow: none,
|
|
75
|
+
small-touch-target-display: none
|
|
76
|
+
)
|
|
77
|
+
);
|
|
78
|
+
|
|
79
|
+
/*Form Field*/
|
|
80
|
+
@include mat.form-field-density(-4);
|
|
81
|
+
@include mat.form-field-overrides(
|
|
82
|
+
(
|
|
83
|
+
container-text-font: var(--mat-sys-body-medium-font),
|
|
84
|
+
container-text-size: var(--mat-sys-body-medium-size),
|
|
85
|
+
container-text-line-height: var(--mat-sys-body-medium-line-height),
|
|
86
|
+
container-text-tracking: var(--mat-sys-body-medium-tracking),
|
|
87
|
+
container-text-weight: var(--mat-sys-body-medium-weight),
|
|
88
|
+
container-vertical-padding: 10px,
|
|
89
|
+
outlined-focus-outline-color: t.use-token(focus-indicator-outer),
|
|
90
|
+
outlined-focus-outline-width: t.use-token(focus-indicator-size),
|
|
91
|
+
outlined-label-text-font: var(--mat-sys-body-medium-font),
|
|
92
|
+
outlined-label-text-size: var(--mat-sys-body-medium-size),
|
|
93
|
+
outlined-label-text-tracking: var(--mat-sys-body-medium-tracking),
|
|
94
|
+
outlined-label-text-weight: var(--mat-sys-body-medium-weight)
|
|
95
|
+
)
|
|
96
|
+
);
|
|
97
|
+
|
|
98
|
+
/* Datepicker */
|
|
99
|
+
@include mat.datepicker-overrides (
|
|
100
|
+
(
|
|
101
|
+
calendar-container-background-color: t.use-token(surface),
|
|
102
|
+
)
|
|
103
|
+
);
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
/*Select*/
|
|
107
|
+
@include mat.select-overrides(
|
|
108
|
+
(
|
|
109
|
+
trigger-text-font: var(--mat-sys-body-medium-font),
|
|
110
|
+
trigger-text-line-height: var(--mat-sys-body-medium-line-height),
|
|
111
|
+
trigger-text-size: var(--mat-sys-body-medium-size),
|
|
112
|
+
trigger-text-tracking: var(--mat-sys-body-medium-tracking),
|
|
113
|
+
trigger-text-weight: var(--mat-sys-body-medium-weight),
|
|
114
|
+
container-elevation-shadow: none,
|
|
115
|
+
panel-background-color: var(--mat-sys-surface-container-low)
|
|
116
|
+
)
|
|
117
|
+
);
|
|
118
|
+
|
|
119
|
+
/*Menu*/
|
|
120
|
+
@include mat.menu-overrides(
|
|
121
|
+
(
|
|
122
|
+
container-elevation-shadow: none,
|
|
123
|
+
container-shape: var(--mat-sys-corner-medium),
|
|
124
|
+
container-color: var(--mat-sys-surface-container-low),
|
|
125
|
+
item-label-text-font: t.use-token(font-body-font),
|
|
126
|
+
item-label-text-line-height: t.use-token(font-body-line-height),
|
|
127
|
+
item-label-text-size: t.use-token(font-body-size),
|
|
128
|
+
item-label-text-tracking: t.use-token(font-body-tracking),
|
|
129
|
+
item-label-text-weight: t.use-token(font-body-weight)
|
|
130
|
+
)
|
|
131
|
+
);
|
|
132
|
+
|
|
133
|
+
/*Dialog*/
|
|
134
|
+
@include mat.dialog-overrides(
|
|
135
|
+
(
|
|
136
|
+
container-shape: var(--mat-sys-corner-medium),
|
|
137
|
+
container-color: var(--mat-sys-surface),
|
|
138
|
+
subhead-color: var(--mat-sys-on-surface),
|
|
139
|
+
subhead-font: var(--mat-sys-title-large-font),
|
|
140
|
+
subhead-line-height: var(--mat-sys-title-large-line-height),
|
|
141
|
+
subhead-size: var(--mat-sys-title-large-size),
|
|
142
|
+
subhead-weight: var(--mat-sys-title-large-weight),
|
|
143
|
+
subhead-tracking: var(--mat-sys-title-large-tracking),
|
|
144
|
+
with-actions-content-padding: none
|
|
145
|
+
)
|
|
146
|
+
);
|
|
147
|
+
|
|
148
|
+
/*Tree*/
|
|
149
|
+
@include mat.tree-overrides(
|
|
150
|
+
(
|
|
151
|
+
node-text-font: var(--mat-sys-body-medium-font),
|
|
152
|
+
node-text-size: var(--mat-sys-body-medium-size),
|
|
153
|
+
node-text-weight: var(--mat-sys-body-medium-weight),
|
|
154
|
+
node-min-height: t.use-token(sizing-l)
|
|
155
|
+
)
|
|
156
|
+
);
|
|
157
|
+
|
|
158
|
+
/*Tabs*/
|
|
159
|
+
@include mat.tabs-overrides(
|
|
160
|
+
(
|
|
161
|
+
divider-color: var(--mat-sys-outline-variant)
|
|
162
|
+
)
|
|
163
|
+
);
|
|
164
|
+
|
|
165
|
+
/*Tooltip*/
|
|
166
|
+
@include mat.tooltip-overrides(
|
|
167
|
+
(
|
|
168
|
+
container-color: light-dark(rgb(from var(--mat-sys-inverse-surface) r g b / 0.9), rgb(from var(--mat-sys-inverse-surface) r g b / 0.95))
|
|
169
|
+
)
|
|
170
|
+
);
|
|
171
|
+
}
|
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
@use '@angular/material' as mat;
|
|
2
|
+
@use 'sass:map';
|
|
3
|
+
@use 'theme-color';
|
|
4
|
+
@use 'theme-typo';
|
|
5
|
+
@use '../../token/token';
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
@function _create-mat-theme(){
|
|
9
|
+
@return (
|
|
10
|
+
color: (
|
|
11
|
+
primary: theme-color.primary-palette(),
|
|
12
|
+
tertiary: theme-color.tertiary-palette()
|
|
13
|
+
),
|
|
14
|
+
typography: (
|
|
15
|
+
plain-family: theme-typo.font-family(),
|
|
16
|
+
brand-family: theme-typo.font-family(),
|
|
17
|
+
bold-weight: theme-typo.font-weight(bold),
|
|
18
|
+
medium-weight: theme-typo.font-weight(medium),
|
|
19
|
+
regular-weight: theme-typo.font-weight(regular)
|
|
20
|
+
),
|
|
21
|
+
density: -1 // block theming for density
|
|
22
|
+
)
|
|
23
|
+
}
|
|
24
|
+
@function _create-mat-sys-token-overrides(){
|
|
25
|
+
@return (
|
|
26
|
+
'outline-variant': light-dark(map.get(theme-color.primary-palette(), 'neutral-variant', 90), map.get(theme-color.primary-palette(), 'neutral', 20)),
|
|
27
|
+
'surface-variant': var(--mat-sys-surface),
|
|
28
|
+
'on-surface-variant': var(--mat-sys-on-surface),
|
|
29
|
+
|
|
30
|
+
//Headline
|
|
31
|
+
'headline-small': var(--mat-sys-headline-small-weight) var(--mat-sys-headline-small-size) / var(--mat-sys-headline-small-line-height)
|
|
32
|
+
var(--mat-sys-headline-small-font),
|
|
33
|
+
'headline-small-size': token.$ref-font-headline-small-size,
|
|
34
|
+
'headline-small-line-height': token.$ref-font-headline-line-height,
|
|
35
|
+
'headline-small-weight': theme-typo.font-weight(bold),
|
|
36
|
+
'headline-small-tracking': token.$ref-font-headline-small-tracking,
|
|
37
|
+
|
|
38
|
+
'headline-medium': var(--mat-sys-headline-medium-weight) var(--mat-sys-headline-medium-size) / var(--mat-sys-headline-medium-line-height)
|
|
39
|
+
var(--mat-sys-headline-medium-font),
|
|
40
|
+
'headline-medium-size': token.$ref-font-headline-medium-size,
|
|
41
|
+
'headline-medium-line-height': token.$ref-font-headline-line-height,
|
|
42
|
+
'headline-medium-weight': theme-typo.font-weight(bold),
|
|
43
|
+
'headline-medium-tracking': token.$ref-font-headline-medium-tracking,
|
|
44
|
+
|
|
45
|
+
'headline-large': var(--mat-sys-headline-large-weight) var(--mat-sys-headline-large-size) / var(--mat-sys-headline-large-line-height)
|
|
46
|
+
var(--mat-sys-headline-large-font),
|
|
47
|
+
'headline-large-size': token.$ref-font-headline-large-size,
|
|
48
|
+
'headline-large-line-height': token.$ref-font-headline-line-height,
|
|
49
|
+
'headline-large-weight': theme-typo.font-weight(bold),
|
|
50
|
+
'headline-large-tracking': token.$ref-font-headline-large-tracking,
|
|
51
|
+
|
|
52
|
+
//Title
|
|
53
|
+
'title-small': var(--mat-sys-title-small-weight) var(--mat-sys-title-small-size) / var(--mat-sys-title-small-line-height) var(--mat-sys-title-small-font),
|
|
54
|
+
'title-small-size': token.$ref-font-title-small-size,
|
|
55
|
+
'title-small-weight': theme-typo.font-weight(bold),
|
|
56
|
+
'title-small-line-height': token.$ref-font-title-line-height,
|
|
57
|
+
'title-small-tracking': token.$ref-font-title-small-tracking,
|
|
58
|
+
|
|
59
|
+
'title-medium': var(--mat-sys-title-medium-weight) var(--mat-sys-title-medium-size) / var(--mat-sys-title-medium-line-height)
|
|
60
|
+
var(--mat-sys-title-medium-font),
|
|
61
|
+
'title-medium-size': token.$ref-font-title-medium-size,
|
|
62
|
+
'title-medium-weight': theme-typo.font-weight(bold),
|
|
63
|
+
'title-medium-line-height': token.$ref-font-title-line-height,
|
|
64
|
+
'title-medium-tracking': token.$ref-font-title-medium-tracking,
|
|
65
|
+
|
|
66
|
+
'title-large': var(--mat-sys-title-large-weight) var(--mat-sys-title-large-size) / var(--mat-sys-title-large-line-height) var(--mat-sys-title-large-font),
|
|
67
|
+
'title-large-size': token.$ref-font-title-large-size,
|
|
68
|
+
'title-large-weight': theme-typo.font-weight(bold),
|
|
69
|
+
'title-large-line-height': token.$ref-font-title-line-height,
|
|
70
|
+
'title-large-tracking': token.$ref-font-title-large-tracking,
|
|
71
|
+
|
|
72
|
+
//Body
|
|
73
|
+
'body-small': var(--mat-sys-body-small-weight) var(--mat-sys-body-small-size) / var(--mat-sys-body-small-line-height) var(--mat-sys-body-small-font),
|
|
74
|
+
'body-small-line-height': token.$ref-font-body-line-height,
|
|
75
|
+
'body-small-tracking': token.$ref-font-body-small-tracking,
|
|
76
|
+
|
|
77
|
+
'body-medium': var(--mat-sys-body-medium-weight) var(--mat-sys-body-medium-size) / var(--mat-sys-body-medium-line-height) var(--mat-sys-body-medium-font),
|
|
78
|
+
'body-medium-line-height': token.$ref-font-body-line-height,
|
|
79
|
+
'body-medium-tracking': token.$ref-font-body-medium-tracking,
|
|
80
|
+
|
|
81
|
+
'body-large': unset,
|
|
82
|
+
'body-large-font': unset,
|
|
83
|
+
'body-large-size': unset,
|
|
84
|
+
'body-large-weight': unset,
|
|
85
|
+
'body-large-line-height': unset,
|
|
86
|
+
'body-large-tracking': unset,
|
|
87
|
+
|
|
88
|
+
//Label
|
|
89
|
+
'label-small': var(--mat-sys-label-small-weight) var(--mat-sys-label-small-size) / var(--mat-sys-label-small-line-height) var(--mat-sys-label-small-font),
|
|
90
|
+
'label-medium': var(--mat-sys-label-medium-weight) var(--mat-sys-label-medium-size) / var(--mat-sys-label-medium-line-height)
|
|
91
|
+
var(--mat-sys-label-medium-font),
|
|
92
|
+
'label-large': var(--mat-sys-label-large-weight) var(--mat-sys-label-large-size) / var(--mat-sys-label-large-line-height) var(--mat-sys-label-large-font),
|
|
93
|
+
|
|
94
|
+
//Display
|
|
95
|
+
'display-small': unset,
|
|
96
|
+
'display-small-font': unset,
|
|
97
|
+
'display-small-size': unset,
|
|
98
|
+
'display-small-weight': unset,
|
|
99
|
+
'display-small-line-height': unset,
|
|
100
|
+
'display-small-tracking': unset,
|
|
101
|
+
'display-medium': unset,
|
|
102
|
+
'display-medium-font': unset,
|
|
103
|
+
'display-medium-size': unset,
|
|
104
|
+
'display-medium-weight': unset,
|
|
105
|
+
'display-medium-line-height': unset,
|
|
106
|
+
'display-medium-tracking': unset,
|
|
107
|
+
'display-large': unset,
|
|
108
|
+
'display-large-font': unset,
|
|
109
|
+
'display-large-size': unset,
|
|
110
|
+
'display-large-weight': unset,
|
|
111
|
+
'display-largeline-height': unset,
|
|
112
|
+
'display-large-tracking': unset
|
|
113
|
+
)
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
$mat-theme: _create-mat-theme();
|
|
117
|
+
$mat-sys-token-overrides: _create-mat-sys-token-overrides();
|
|
118
|
+
|
|
119
|
+
|
|
120
|
+
@mixin modify($new-mat-theme, $new-mat-system-overrides){
|
|
121
|
+
@if($new-mat-theme != null){
|
|
122
|
+
$_new-colors: if(map.has-key($new-mat-theme, color), map.get($new-mat-theme, color), ());
|
|
123
|
+
|
|
124
|
+
//Modify Theme Color
|
|
125
|
+
@include theme-color.modify((
|
|
126
|
+
primary: if(map.has-key($_new-colors, primary), map.get($_new-colors, primary), ()),
|
|
127
|
+
secondary: if(map.has-key($_new-colors, secondary), map.get($_new-colors, secondary), ()),
|
|
128
|
+
neutral: if(map.has-key($_new-colors, neutral), map.get($_new-colors, neutral), ()),
|
|
129
|
+
neutral-variant: if(map.has-key($_new-colors, neutral-variant), map.get($_new-colors, neutral-variant), ()),
|
|
130
|
+
error: if(map.has-key($_new-colors, error), map.get($_new-colors, error), ()),
|
|
131
|
+
tertiary: if(map.has-key($_new-colors, tertiary), map.get($_new-colors, tertiary), ()),
|
|
132
|
+
success: if(map.has-key($_new-colors, success), map.get($_new-colors, success), ()),
|
|
133
|
+
warning: if(map.has-key($_new-colors, warning), map.get($_new-colors, warning), ()),
|
|
134
|
+
));
|
|
135
|
+
|
|
136
|
+
//Modify Theme Typography
|
|
137
|
+
@include theme-typo.modify(if(map.has-key($new-mat-theme, typography), map.get($new-mat-theme, typography), ()));
|
|
138
|
+
|
|
139
|
+
//Run Mat Theme Creation again
|
|
140
|
+
$mat-theme: _create-mat-theme()!global;
|
|
141
|
+
//Run Mat Sys Token Overrides Creation again
|
|
142
|
+
$mat-sys-token-overrides : _create-mat-sys-token-overrides()!global;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
@if($new-mat-system-overrides != null){
|
|
146
|
+
$mat-sys-token-overrides : map.deep-merge($mat-sys-token-overrides, $new-mat-system-overrides)!global;
|
|
147
|
+
}
|
|
148
|
+
}
|
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
// This file was generated by running 'ng generate @angular/material:theme-color'.
|
|
2
|
-
// Proceed with caution if making changes to this file.
|
|
3
|
-
|
|
4
1
|
@use 'sass:map';
|
|
5
2
|
|
|
6
3
|
// Note: Color palettes are generated from primary: #2A70AC, secondary: #8E9198, tertiary: #8E9198, neutral: #8E9198, neutral variant: #8E9198, error: #BF3352
|
|
@@ -168,7 +165,22 @@ $_rest: (
|
|
|
168
165
|
error: map.get($_palettes, error),
|
|
169
166
|
);
|
|
170
167
|
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
168
|
+
|
|
169
|
+
@function primary-palette(){
|
|
170
|
+
@return map.merge(map.get($_palettes, primary), $_rest)
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
@function tertiary-palette(){
|
|
174
|
+
@return map.merge(map.get($_palettes, tertiary), $_rest);
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
@function success-palette(){
|
|
178
|
+
@return map.get($_palettes, success);
|
|
179
|
+
}
|
|
180
|
+
@function warning-palette(){
|
|
181
|
+
@return map.get($_palettes, warning);
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
@mixin modify($palettes) {
|
|
185
|
+
$_palettes: map.deep-merge($_palettes, $palettes)!global;
|
|
186
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
@use "sass:map";
|
|
2
|
+
|
|
3
|
+
$_typography : (
|
|
4
|
+
plain-family:"'Mulish', sans-serif",
|
|
5
|
+
brand-family:"'Mulish', sans-serif",
|
|
6
|
+
bold-weight: 800,
|
|
7
|
+
medium-weight: 700,
|
|
8
|
+
regular-weight: 500,
|
|
9
|
+
);
|
|
10
|
+
|
|
11
|
+
@function font-family($key:plain){
|
|
12
|
+
@return if(map.has-key($_typography, #{$key}-family), map.get($_typography, #{$key}-family), plain);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
@function font-weight($key:regular){
|
|
16
|
+
@return if(map.has-key($_typography, #{$key}-weight), map.get($_typography, #{$key}-weight), regular);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
@mixin modify($typography) {
|
|
20
|
+
$_typography: map.deep-merge($_typography, $typography)!global;
|
|
21
|
+
}
|