@onemrvapublic/design-system-theme 17.2.46 → 17.2.48
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/components/_badge.scss +10 -0
- package/components/_bottom-sheet.scss +10 -0
- package/components/_button-toggle.scss +42 -0
- package/components/{_buttons.scss → _button.scss} +0 -24
- package/components/_chips.scss +16 -29
- package/components/_divider.scss +10 -0
- package/components/_fab.scss +13 -0
- package/components/_icon-button.scss +14 -0
- package/components/_icon.scss +0 -1
- package/components/_slider.scss +14 -0
- package/index.scss +50 -30
- package/package.json +1 -1
- /package/components/{_snackbar.scss → _snack-bar.scss} +0 -0
- /package/components/{_tables.scss → _table.scss} +0 -0
- /package/components/{_text-inputs.scss → input.scss} +0 -0
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
@use "@angular/material" as mat;
|
|
2
|
+
@use "sass:map";
|
|
3
|
+
|
|
4
|
+
@mixin theme($theme) {
|
|
5
|
+
@include mat.badge-base($theme);
|
|
6
|
+
@include mat.badge-theme($theme);
|
|
7
|
+
@include mat.badge-typography(map.get($theme, typography));
|
|
8
|
+
@include mat.badge-color(map.get($theme, color));
|
|
9
|
+
@include mat.badge-density($theme);
|
|
10
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
@use "@angular/material" as mat;
|
|
2
|
+
@use "sass:map";
|
|
3
|
+
|
|
4
|
+
@mixin theme($theme) {
|
|
5
|
+
@include mat.bottom-sheet-base($theme);
|
|
6
|
+
@include mat.bottom-sheet-theme($theme);
|
|
7
|
+
@include mat.bottom-sheet-typography(map.get($theme, typography));
|
|
8
|
+
@include mat.bottom-sheet-color(map.get($theme, color));
|
|
9
|
+
@include mat.bottom-sheet-density($theme);
|
|
10
|
+
}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
@use "@angular/material" as mat;
|
|
2
|
+
@use "sass:map";
|
|
3
|
+
@use "./µ";
|
|
4
|
+
@import "../utilities/variables";
|
|
5
|
+
|
|
6
|
+
@mixin theme($theme) {
|
|
7
|
+
|
|
8
|
+
@include mat.button-toggle-base($theme);
|
|
9
|
+
@include mat.button-toggle-theme($theme);
|
|
10
|
+
@include mat.button-toggle-typography(map.get($theme, typography));
|
|
11
|
+
@include mat.button-toggle-color(map.get($theme, color));
|
|
12
|
+
@include mat.button-toggle-density($theme);
|
|
13
|
+
|
|
14
|
+
$spacer: map-get($theme, "spacer");
|
|
15
|
+
$accent400: µ.accent($theme, 400);
|
|
16
|
+
$accent500: µ.accent($theme, 500);
|
|
17
|
+
|
|
18
|
+
mat-button-toggle-group {
|
|
19
|
+
border-radius: $onemrva-button-border-radius;
|
|
20
|
+
border-color: µ.grayscale($theme, 300);
|
|
21
|
+
mat-button-toggle {
|
|
22
|
+
font: mat.get-theme-typography($theme,'button');
|
|
23
|
+
// padding: $spacer 2 * $spacer;
|
|
24
|
+
font-weight: 600;
|
|
25
|
+
color: µ.grayscale($theme, 900);
|
|
26
|
+
.mat-button-toggle-button {
|
|
27
|
+
padding: $spacer 2 * $spacer;
|
|
28
|
+
width: auto;
|
|
29
|
+
}
|
|
30
|
+
.mat-button-toggle-label-content {
|
|
31
|
+
line-height: 21px !important;
|
|
32
|
+
padding: 0;
|
|
33
|
+
}
|
|
34
|
+
&.mat-button-toggle-checked {
|
|
35
|
+
background-color: µ.primary($theme, 500);
|
|
36
|
+
.mat-button-toggle-label-content {
|
|
37
|
+
color: µ.accent($theme, "500-contrast");
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}
|
|
@@ -17,30 +17,6 @@
|
|
|
17
17
|
$accent-gradient: transparent
|
|
18
18
|
linear-gradient(90deg, $accent400 0%, $accent500 100%) 0% 0% no-repeat
|
|
19
19
|
padding-box;
|
|
20
|
-
mat-button-toggle-group {
|
|
21
|
-
border-radius: $onemrva-button-border-radius;
|
|
22
|
-
border-color: µ.grayscale($theme, 300);
|
|
23
|
-
mat-button-toggle {
|
|
24
|
-
font: mat.get-theme-typography($theme,'button');
|
|
25
|
-
// padding: $spacer 2 * $spacer;
|
|
26
|
-
font-weight: 600;
|
|
27
|
-
color: µ.grayscale($theme, 900);
|
|
28
|
-
.mat-button-toggle-button {
|
|
29
|
-
padding: $spacer 2 * $spacer;
|
|
30
|
-
width: auto;
|
|
31
|
-
}
|
|
32
|
-
.mat-button-toggle-label-content {
|
|
33
|
-
line-height: 21px !important;
|
|
34
|
-
padding: 0;
|
|
35
|
-
}
|
|
36
|
-
&.mat-button-toggle-checked {
|
|
37
|
-
background-color: µ.primary($theme, 500);
|
|
38
|
-
.mat-button-toggle-label-content {
|
|
39
|
-
color: µ.accent($theme, "500-contrast");
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
20
|
.mat-mdc-button-base {
|
|
45
21
|
|
|
46
22
|
&.mat-error {
|
package/components/_chips.scss
CHANGED
|
@@ -7,17 +7,19 @@
|
|
|
7
7
|
$primary: µ.primary($theme);
|
|
8
8
|
$color: mat.get-color-from-palette(map-get($theme, "grayscale"));
|
|
9
9
|
|
|
10
|
-
|
|
11
10
|
@include mat.chips-base($theme);
|
|
12
11
|
@include mat.chips-theme($theme);
|
|
13
12
|
@include mat.chips-typography(map.get($theme, typography));
|
|
14
13
|
@include mat.chips-color(map.get($theme, color));
|
|
15
14
|
@include mat.chips-density($theme);
|
|
16
|
-
|
|
15
|
+
|
|
17
16
|
|
|
18
17
|
.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) {
|
|
19
18
|
background: none;
|
|
20
19
|
}
|
|
20
|
+
.mat-mdc-standard-chip {
|
|
21
|
+
--mdc-chip-container-shape-radius: 500px 500px 500px 500px ;
|
|
22
|
+
}
|
|
21
23
|
|
|
22
24
|
mat-chip-option {
|
|
23
25
|
transition: none;
|
|
@@ -27,7 +29,6 @@
|
|
|
27
29
|
color: $color;
|
|
28
30
|
border: 2px solid $color;
|
|
29
31
|
height: 22px;
|
|
30
|
-
border-radius: 500px;
|
|
31
32
|
padding: 8px 16px;
|
|
32
33
|
font-family: mat.get-theme-typography($theme,'button', font-family);
|
|
33
34
|
font-size: 16px;
|
|
@@ -43,67 +44,53 @@
|
|
|
43
44
|
width: var(--mdc-chip-with-avatar-avatar-size);
|
|
44
45
|
}
|
|
45
46
|
}
|
|
47
|
+
.mat-mdc-chip-action {
|
|
48
|
+
padding-right: 0 !important;
|
|
49
|
+
}
|
|
46
50
|
.mat-icon {
|
|
47
51
|
line-height: 14px;
|
|
48
52
|
}
|
|
49
53
|
&.mat-primary {
|
|
54
|
+
--mdc-chip-label-text-color: #{$primary};
|
|
50
55
|
background: µ.primary($theme, 50) !important;
|
|
51
56
|
border: 1px solid µ.primary($theme, 300);
|
|
52
|
-
.mat-mdc-chip-action-label {
|
|
53
|
-
color: $primary;
|
|
54
|
-
}
|
|
55
57
|
}
|
|
56
58
|
&.mat-accent {
|
|
57
|
-
|
|
59
|
+
--mdc-chip-label-text-color: #{ µ.accent($theme, "500-contrast")};
|
|
58
60
|
background: $onemrva-accent-gradient-vertical !important;
|
|
59
|
-
border: none;
|
|
60
|
-
.mat-mdc-chip-action-label {
|
|
61
|
-
color: $color;
|
|
62
|
-
}
|
|
61
|
+
border: none !important;
|
|
63
62
|
}
|
|
64
63
|
&.mat-error {
|
|
64
|
+
--mdc-chip-label-text-color: #{ µ.error($theme, 500)};
|
|
65
65
|
background: µ.error($theme, 50) !important;
|
|
66
66
|
border: 1px solid µ.error($theme, 500);
|
|
67
|
-
.mat-mdc-chip-action-label {
|
|
68
|
-
color: µ.error($theme, 500);
|
|
69
|
-
}
|
|
70
67
|
}
|
|
71
68
|
&.mat-warn {
|
|
69
|
+
--mdc-chip-label-text-color: #{ µ.warn($theme, 500)};
|
|
72
70
|
background: µ.warn($theme, 50) !important;
|
|
73
71
|
border: 1px solid µ.warn($theme, 200);
|
|
74
|
-
.mat-mdc-chip-action-label {
|
|
75
|
-
color: µ.warn($theme, 600);
|
|
76
|
-
}
|
|
77
72
|
}
|
|
78
73
|
&.mat-success {
|
|
74
|
+
--mdc-chip-label-text-color: #{ µ.success($theme, 500)};
|
|
79
75
|
background: µ.success($theme, 50) !important;
|
|
80
76
|
border: 1px solid µ.success($theme, 200);
|
|
81
|
-
.mat-mdc-chip-action-label {
|
|
82
|
-
color: µ.success($theme);
|
|
83
|
-
}
|
|
84
77
|
}
|
|
85
78
|
&.mat-error {
|
|
79
|
+
--mdc-chip-label-text-color: #{ µ.error($theme, 500)};
|
|
86
80
|
background: µ.error($theme, 50) !important;
|
|
87
81
|
border: 1px solid µ.error($theme, 500);
|
|
88
82
|
display: inline-flex;
|
|
89
|
-
.mat-mdc-chip-action-label {
|
|
90
|
-
color: µ.error($theme);
|
|
91
|
-
}
|
|
92
83
|
}
|
|
93
84
|
&.mat-info {
|
|
85
|
+
--mdc-chip-label-text-color: #{ µ.info($theme, 500)};
|
|
94
86
|
background: µ.info($theme, 50) !important;
|
|
95
87
|
border: 1px solid µ.info($theme, 200);
|
|
96
|
-
.mat-mdc-chip-action-label {
|
|
97
|
-
color: µ.info($theme);
|
|
98
|
-
}
|
|
99
88
|
}
|
|
100
89
|
&.mat-mdc-chip-disabled {
|
|
90
|
+
--mdc-chip-label-text-color: #{ µ.grayscale($theme, 700)};
|
|
101
91
|
opacity: 1;
|
|
102
92
|
background: µ.grayscale($theme, 50) !important;
|
|
103
93
|
border: 1px solid µ.grayscale($theme, 400);
|
|
104
|
-
.mat-mdc-chip-action-label {
|
|
105
|
-
color: µ.grayscale($theme, 700);
|
|
106
|
-
}
|
|
107
94
|
}
|
|
108
95
|
&.mdc-evolution-chip--selected {
|
|
109
96
|
background: µ.primary($theme, 500) !important;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
@use "@angular/material" as mat;
|
|
2
|
+
@use "sass:map";
|
|
3
|
+
|
|
4
|
+
@mixin theme($theme) {
|
|
5
|
+
@include mat.divider-base($theme);
|
|
6
|
+
@include mat.divider-theme($theme);
|
|
7
|
+
@include mat.divider-typography(map.get($theme, typography));
|
|
8
|
+
@include mat.divider-color(map.get($theme, color));
|
|
9
|
+
@include mat.divider-density($theme);
|
|
10
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
@use "@angular/material" as mat;
|
|
2
|
+
@use "./µ";
|
|
3
|
+
@use "sass:map";
|
|
4
|
+
@import "../utilities/variables";
|
|
5
|
+
|
|
6
|
+
@mixin theme($theme) {
|
|
7
|
+
|
|
8
|
+
@include mat.fab-base($theme);
|
|
9
|
+
@include mat.fab-theme($theme);
|
|
10
|
+
@include mat.fab-typography(map.get($theme, typography));
|
|
11
|
+
@include mat.fab-color(map.get($theme, color));
|
|
12
|
+
@include mat.fab-density($theme);
|
|
13
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
@use "@angular/material" as mat;
|
|
2
|
+
@use "./µ";
|
|
3
|
+
@use "sass:map";
|
|
4
|
+
@import "../utilities/variables";
|
|
5
|
+
|
|
6
|
+
@mixin theme($theme) {
|
|
7
|
+
|
|
8
|
+
@include mat.icon-button-base($theme);
|
|
9
|
+
@include mat.icon-button-theme($theme);
|
|
10
|
+
@include mat.icon-button-typography(map.get($theme, typography));
|
|
11
|
+
@include mat.icon-button-color(map.get($theme, color));
|
|
12
|
+
@include mat.icon-button-density($theme);
|
|
13
|
+
|
|
14
|
+
}
|
package/components/_icon.scss
CHANGED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
@use "@angular/material" as mat;
|
|
2
|
+
@use "sass:map";
|
|
3
|
+
@use "./µ";
|
|
4
|
+
@import "../utilities/variables";
|
|
5
|
+
|
|
6
|
+
@mixin theme($theme) {
|
|
7
|
+
|
|
8
|
+
@include mat.slider-base($theme);
|
|
9
|
+
@include mat.slider-theme($theme);
|
|
10
|
+
@include mat.slider-typography(map.get($theme, typography));
|
|
11
|
+
@include mat.slider-color(map.get($theme, color));
|
|
12
|
+
@include mat.slider-density($theme);
|
|
13
|
+
|
|
14
|
+
}
|
package/index.scss
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
@forward "./components/autocomplete" as autocomplete-*;
|
|
2
|
-
@forward "./components/
|
|
2
|
+
@forward "./components/button" as button-*;
|
|
3
|
+
@forward "./components/button-toggle" as button-toggle-*;
|
|
3
4
|
@forward "./components/cards" as cards-*;
|
|
4
5
|
@forward "./components/checkbox" as checkbox-*;
|
|
5
6
|
@forward "./components/chips" as chips-*;
|
|
6
|
-
@forward "components/choice-chips" as choice-chips-*;
|
|
7
|
+
@forward "./components/choice-chips" as choice-chips-*;
|
|
7
8
|
@forward "./components/container" as container-*;
|
|
8
9
|
@forward "./components/datepicker" as datepicker-*;
|
|
9
10
|
@forward "./components/drag-and-drop" as drag-and-drop-*;
|
|
@@ -15,17 +16,22 @@
|
|
|
15
16
|
@forward "./components/menu" as menu-*;
|
|
16
17
|
@forward "./components/progress-bar" as progress-bar-*;
|
|
17
18
|
@forward "./components/radio" as radio-*;
|
|
18
|
-
@forward "./components/
|
|
19
|
+
@forward "./components/snack-bar" as snack-bar-*;
|
|
19
20
|
@forward "./components/sidenav" as sidenav-*;
|
|
20
21
|
@forward "./components/slide-toggle" as slide-toggle-*;
|
|
21
|
-
@forward "./components/
|
|
22
|
+
@forward "./components/table" as tables-*;
|
|
22
23
|
@forward "./components/toolbar" as toolbar-*;
|
|
23
24
|
@forward "./components/tabs" as tabs-*;
|
|
24
|
-
@forward "./components/
|
|
25
|
+
@forward "./components/input" as text-inputs-*;
|
|
25
26
|
@forward "./components/stepper" as stepper-*;
|
|
26
27
|
@forward "./components/icon" as icon-*;
|
|
27
28
|
@forward "./components/tooltip" as tooltip-*;
|
|
28
29
|
@forward "./components/select" as select-*;
|
|
30
|
+
@forward "./components/slider" as slider-*;
|
|
31
|
+
@forward "./components/fab" as fab-*;
|
|
32
|
+
@forward "./components/badge" as badge-*;
|
|
33
|
+
@forward "./components/bottom-sheet" as bottom-sheet-*;
|
|
34
|
+
@forward "./components/icon-button" as icon-button-*;
|
|
29
35
|
|
|
30
36
|
@forward "utilities/variables" show $onemrva-theme;
|
|
31
37
|
@forward "utilities/variables" show $breakpoints;
|
|
@@ -39,33 +45,39 @@
|
|
|
39
45
|
@use "@angular/material" as mat;
|
|
40
46
|
|
|
41
47
|
@use "./components/autocomplete";
|
|
42
|
-
@use "./components/
|
|
48
|
+
@use "./components/button";
|
|
49
|
+
@use "./components/button-toggle";
|
|
50
|
+
@use "./components/icon-button";
|
|
43
51
|
@use "./components/cards";
|
|
44
52
|
@use "./components/checkbox";
|
|
45
53
|
@use "./components/chips";
|
|
46
|
-
@use "components/choice-chips" as choiceChips;
|
|
54
|
+
@use "./components/choice-chips" as choiceChips;
|
|
47
55
|
@use "./components/container";
|
|
48
56
|
@use "./components/datepicker";
|
|
49
57
|
@use "./components/dialogs";
|
|
50
58
|
@use "./components/drag-and-drop" as dragAndDrop;
|
|
51
59
|
@use "./components/expansion" as expansion;
|
|
52
|
-
@use "./components/form-field" as
|
|
60
|
+
@use "./components/form-field" as form-field;
|
|
53
61
|
@use "./components/links";
|
|
54
62
|
@use "./components/lists";
|
|
55
63
|
@use "./components/menu";
|
|
56
64
|
@use "./components/progress-bar" as progressBar;
|
|
57
65
|
@use "./components/radio";
|
|
58
|
-
@use "
|
|
66
|
+
@use "components/snack-bar";
|
|
59
67
|
@use "./components/sidenav";
|
|
60
|
-
@use "./components/
|
|
61
|
-
@use "./components/
|
|
68
|
+
@use "./components/slider";
|
|
69
|
+
@use "./components/slide-toggle" as slide-toggle;
|
|
70
|
+
@use "components/table";
|
|
62
71
|
@use "./components/tabs";
|
|
63
|
-
@use "./components/
|
|
72
|
+
@use "./components/input" as input;
|
|
64
73
|
@use "./components/stepper";
|
|
65
74
|
@use "./components/icon";
|
|
66
75
|
@use "./components/tooltip";
|
|
67
76
|
@use "./components/select";
|
|
68
77
|
@use "./components/toolbar";
|
|
78
|
+
@use "./components/fab";
|
|
79
|
+
@use "./components/badge";
|
|
80
|
+
@use "./components/bottom-sheet";
|
|
69
81
|
|
|
70
82
|
@use "utilities/utilities";
|
|
71
83
|
@use "utilities/fonts";
|
|
@@ -121,6 +133,7 @@
|
|
|
121
133
|
@mixin base($b: variables.$breakpoints) {
|
|
122
134
|
@include reset();
|
|
123
135
|
@include fonts.theme(variables.$onemrva-theme);
|
|
136
|
+
@include links.theme(variables.$onemrva-theme);
|
|
124
137
|
@include mat.core-theme(variables.$onemrva-theme);
|
|
125
138
|
}
|
|
126
139
|
|
|
@@ -135,34 +148,41 @@
|
|
|
135
148
|
|
|
136
149
|
@include fonts.theme(variables.$onemrva-theme);
|
|
137
150
|
|
|
138
|
-
@include autocomplete.theme(variables.$onemrva-theme);
|
|
139
|
-
@include buttons.theme(variables.$onemrva-theme);
|
|
140
151
|
@include cards.theme(variables.$onemrva-theme);
|
|
141
|
-
@include
|
|
152
|
+
@include progressBar.theme(variables.$onemrva-theme);
|
|
153
|
+
@include tooltip.theme(variables.$onemrva-theme);
|
|
154
|
+
@include form-field.theme(variables.$onemrva-theme);
|
|
155
|
+
@include input.theme(variables.$onemrva-theme);
|
|
156
|
+
@include select.theme(variables.$onemrva-theme);
|
|
157
|
+
@include autocomplete.theme(variables.$onemrva-theme);
|
|
158
|
+
@include dialogs.theme(variables.$onemrva-theme);
|
|
142
159
|
@include chips.theme(variables.$onemrva-theme);
|
|
143
|
-
@include
|
|
144
|
-
@include
|
|
160
|
+
@include slide-toggle.theme(variables.$onemrva-theme);
|
|
161
|
+
@include radio.theme(variables.$onemrva-theme);
|
|
162
|
+
@include slider.theme(variables.$onemrva-theme);
|
|
163
|
+
@include menu.theme(variables.$onemrva-theme);
|
|
164
|
+
@include lists.theme(variables.$onemrva-theme);
|
|
165
|
+
// Paginator is replaced by onemrva design system
|
|
166
|
+
@include tabs.theme(variables.$onemrva-theme);
|
|
167
|
+
@include checkbox.theme(variables.$onemrva-theme);
|
|
168
|
+
@include button.theme(variables.$onemrva-theme);
|
|
169
|
+
@include icon-button.theme(variables.$onemrva-theme);
|
|
170
|
+
@include fab.theme(variables.$onemrva-theme);
|
|
171
|
+
@include snack-bar.theme(variables.$onemrva-theme);
|
|
172
|
+
@include table.theme(variables.$onemrva-theme);
|
|
173
|
+
// Spinner is replaced by onemrva design system
|
|
174
|
+
@include badge.theme(variables.$onemrva-theme);
|
|
175
|
+
@include bottom-sheet.theme(variables.$onemrva-theme);
|
|
176
|
+
@include button-toggle.theme(variables.$onemrva-theme);
|
|
145
177
|
@include datepicker.theme(variables.$onemrva-theme);
|
|
146
178
|
|
|
147
|
-
@include
|
|
179
|
+
@include choiceChips.theme(variables.$onemrva-theme);
|
|
148
180
|
@include dragAndDrop.theme(variables.$onemrva-theme);
|
|
149
181
|
@include expansion.theme(variables.$onemrva-theme);
|
|
150
182
|
@include icon.theme(variables.$onemrva-theme);
|
|
151
183
|
@include links.theme(variables.$onemrva-theme);
|
|
152
|
-
@include lists.theme(variables.$onemrva-theme);
|
|
153
|
-
@include menu.theme(variables.$onemrva-theme);
|
|
154
|
-
@include progressBar.theme(variables.$onemrva-theme);
|
|
155
|
-
@include radio.theme(variables.$onemrva-theme);
|
|
156
|
-
@include slideToggle.theme(variables.$onemrva-theme);
|
|
157
|
-
@include snackbar.theme(variables.$onemrva-theme);
|
|
158
184
|
@include stepper.theme(variables.$onemrva-theme);
|
|
159
|
-
@include tables.theme(variables.$onemrva-theme);
|
|
160
|
-
@include tabs.theme(variables.$onemrva-theme);
|
|
161
|
-
@include textInputs.theme(variables.$onemrva-theme);
|
|
162
185
|
@include toolbar.theme(variables.$onemrva-theme);
|
|
163
|
-
@include tooltip.theme(variables.$onemrva-theme);
|
|
164
|
-
@include select.theme(variables.$onemrva-theme);
|
|
165
|
-
|
|
166
186
|
|
|
167
187
|
@include container.theme(variables.$onemrva-theme, $b);
|
|
168
188
|
|
package/package.json
CHANGED
|
File without changes
|
|
File without changes
|
|
File without changes
|