matcha-theme 19.46.0 → 19.51.0
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/_functions.scss +9 -0
- package/components/matcha-button-group.scss +58 -0
- package/components/matcha-buttons.scss +21 -1
- package/components/matcha-form-field.scss +49 -3
- package/components/matcha-spin.scss +48 -3
- package/main.scss +2 -0
- package/package.json +1 -1
- package/tokens/_color-tokens.scss +4 -3
|
@@ -172,21 +172,30 @@
|
|
|
172
172
|
}
|
|
173
173
|
|
|
174
174
|
// Disabled
|
|
175
|
+
// #D4DDE3
|
|
175
176
|
@function getDisabled($theme){
|
|
176
177
|
$background: map-get($theme, background);
|
|
177
178
|
$disabled: map-get($background, disabled);
|
|
178
179
|
@return $disabled;
|
|
179
180
|
}
|
|
181
|
+
@function getDisabledBgContrast($theme){
|
|
182
|
+
$foreground: map-get($theme, foreground);
|
|
183
|
+
$disabled-contrast: map-get($foreground, disabled-contrast);
|
|
184
|
+
@return $disabled-contrast;
|
|
185
|
+
}
|
|
186
|
+
// rgba(0, 0, 0, 0.26),
|
|
180
187
|
@function getDisabledContrast($theme){
|
|
181
188
|
$foreground: map-get($theme, foreground);
|
|
182
189
|
$disabled-contrast: map-get($foreground, disabled);
|
|
183
190
|
@return $disabled-contrast;
|
|
184
191
|
}
|
|
192
|
+
// #D4DDE3 50%
|
|
185
193
|
@function getDisabledAlpha($theme){
|
|
186
194
|
$background: map-get($theme, background);
|
|
187
195
|
$disabled-alpha: rgba(map-get($background, disabled), 0.5);
|
|
188
196
|
@return $disabled-alpha;
|
|
189
197
|
}
|
|
198
|
+
// rgba(0, 0, 0, 0.13)
|
|
190
199
|
@function getDisabledContrastAlpha($theme){
|
|
191
200
|
$foreground: map-get($theme, foreground);
|
|
192
201
|
$disabled-contrast-alpha: rgba(map-get($foreground, disabled), 0.5);
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
@mixin matcha-button-group($theme) {
|
|
2
|
+
matcha-button-group {
|
|
3
|
+
&[disabled],
|
|
4
|
+
&[disabled]:not([disabled="false"]) ,
|
|
5
|
+
&[disabled="true"]{
|
|
6
|
+
button[matcha-button],
|
|
7
|
+
a[matcha-button] {
|
|
8
|
+
pointer-events: none;
|
|
9
|
+
user-select: none;
|
|
10
|
+
|
|
11
|
+
[outline]:not([outline="false"]),
|
|
12
|
+
[link]:not([link="false"]),
|
|
13
|
+
[basic]:not([basic="false"]) {
|
|
14
|
+
color: getDisabled($theme);
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
button[matcha-button],
|
|
20
|
+
a[matcha-button] {
|
|
21
|
+
&[outline]:not([outline="false"]),
|
|
22
|
+
&[link]:not([link="false"]){
|
|
23
|
+
color: getDisabled($theme) !important;
|
|
24
|
+
}
|
|
25
|
+
&[basic]:not([basic="false"]){
|
|
26
|
+
background: getSurface($theme);
|
|
27
|
+
color: getDisabled($theme) !important;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
background: getDisabled($theme);
|
|
31
|
+
color: getDisabledBgContrast($theme);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
.button-group {
|
|
40
|
+
&.gap-0 {
|
|
41
|
+
gap: 0 !important;
|
|
42
|
+
|
|
43
|
+
// Ajuste border-radius quando gap = 0
|
|
44
|
+
matcha-button-item:first-child button[matcha-button] {
|
|
45
|
+
border-top-right-radius: 0;
|
|
46
|
+
border-bottom-right-radius: 0;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
matcha-button-item:last-child button[matcha-button] {
|
|
50
|
+
border-top-left-radius: 0;
|
|
51
|
+
border-bottom-left-radius: 0;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
matcha-button-item:not(:first-child):not(:last-child) button[matcha-button] {
|
|
55
|
+
border-radius: 0;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
}
|
|
@@ -633,6 +633,26 @@ a[matcha-button] {
|
|
|
633
633
|
}
|
|
634
634
|
&[color="warn"] .ripple{background: getWarnContrastAlpha($theme)}
|
|
635
635
|
|
|
636
|
+
// Disabled
|
|
637
|
+
&[color="disabled"][outline]:not([outline="false"]) .ripple,
|
|
638
|
+
&[color="disabled"][basic]:not([basic="false"]) .ripple {
|
|
639
|
+
background: getDisabledAlpha($theme);
|
|
640
|
+
}
|
|
641
|
+
&[color="disabled"][alpha]:not([alpha="false"]){
|
|
642
|
+
background: getDisabledAlpha($theme);
|
|
643
|
+
color: getDisabled($theme);
|
|
644
|
+
}
|
|
645
|
+
&[color="disabled"][outline]:not([outline="false"]),
|
|
646
|
+
&[color="disabled"][link]:not([link="false"]),
|
|
647
|
+
&[color="disabled"][basic]:not([basic="false"]) {
|
|
648
|
+
color: getDisabled($theme)!important
|
|
649
|
+
}
|
|
650
|
+
&[color="disabled"]{
|
|
651
|
+
background: getDisabled($theme);
|
|
652
|
+
color: getDisabledBgContrast($theme);
|
|
653
|
+
}
|
|
654
|
+
&[color="disabled"] .ripple{background: getDisabledContrastAlpha($theme)}
|
|
655
|
+
|
|
636
656
|
}
|
|
637
657
|
|
|
638
658
|
button[matcha-button],
|
|
@@ -641,7 +661,7 @@ a[matcha-button] {
|
|
|
641
661
|
|
|
642
662
|
&[disabled] {
|
|
643
663
|
background-color: getDisabled($theme);
|
|
644
|
-
color:
|
|
664
|
+
color: getDisabledBgContrast($theme);
|
|
645
665
|
border-color: getDisabled($theme);
|
|
646
666
|
}
|
|
647
667
|
|
|
@@ -1,3 +1,47 @@
|
|
|
1
|
+
@mixin _field-height($line-height) {
|
|
2
|
+
.matcha-form-field {
|
|
3
|
+
input[type="text"],
|
|
4
|
+
input[type="email"],
|
|
5
|
+
input[type="tel"],
|
|
6
|
+
input[type="url"],
|
|
7
|
+
input[type="password"],
|
|
8
|
+
input[type="number"],
|
|
9
|
+
input[type="search"],
|
|
10
|
+
textarea {
|
|
11
|
+
min-height: px-to-rem(20px); /* Mantém a altura dos inputs de texto */
|
|
12
|
+
line-height: px-to-rem($line-height);
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@mixin generate-matcha-form-field-size-classes($helper-breakpoints){
|
|
18
|
+
@each $breakpoint, $materialBreakpoint in $helper-breakpoints {
|
|
19
|
+
@include media-breakpoint($materialBreakpoint) {
|
|
20
|
+
$infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
|
|
21
|
+
|
|
22
|
+
&[size#{$infix}="tiny"] {
|
|
23
|
+
@include _field-height(24px)
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
&[size#{$infix}="small"] {
|
|
27
|
+
@include _field-height(24px)
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
&[size#{$infix}="medium"] {
|
|
31
|
+
@include _field-height(32px);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&[size#{$infix}="large"] {
|
|
35
|
+
@include _field-height(40px)
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
&[size#{$infix}="huge"] {
|
|
39
|
+
@include _field-height(40px)
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
1
45
|
@mixin matcha-form-field($theme) {
|
|
2
46
|
$primary: map-get($theme, primary);
|
|
3
47
|
$accent: map-get($theme, accent);
|
|
@@ -35,7 +79,11 @@
|
|
|
35
79
|
input[type="search"]:focus,
|
|
36
80
|
textarea:focus {
|
|
37
81
|
outline: none;
|
|
38
|
-
}
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
matcha-form-field{
|
|
86
|
+
@include generate-matcha-form-field-size-classes($helper-breakpoints);
|
|
39
87
|
}
|
|
40
88
|
}
|
|
41
89
|
|
|
@@ -52,10 +100,8 @@
|
|
|
52
100
|
outline: none;
|
|
53
101
|
box-shadow: none;
|
|
54
102
|
font-size: 16px;
|
|
55
|
-
min-height: 16px; /* Mantém a altura dos inputs de texto */
|
|
56
103
|
resize: none;
|
|
57
104
|
font-weight: 500;
|
|
58
|
-
line-height: 20px;
|
|
59
105
|
}
|
|
60
106
|
|
|
61
107
|
input[type="text"]:focus,
|
|
@@ -1,4 +1,39 @@
|
|
|
1
|
+
@mixin generate-matcha-spin-size-classes($helper-breakpoints) {
|
|
2
|
+
@each $breakpoint, $materialBreakpoint in $helper-breakpoints {
|
|
3
|
+
@include media-breakpoint($materialBreakpoint) {
|
|
4
|
+
$infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
|
|
5
|
+
|
|
6
|
+
&[size#{$infix}="tiny"] {
|
|
7
|
+
width: px-to-rem(24px);
|
|
8
|
+
height: px-to-rem(24px);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
&[size#{$infix}="small"] {
|
|
12
|
+
width: px-to-rem(32px);
|
|
13
|
+
height: px-to-rem(32px);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
&[size#{$infix}="medium"] {
|
|
17
|
+
width: px-to-rem(40px);
|
|
18
|
+
height: px-to-rem(40px);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
&[size#{$infix}="large"] {
|
|
22
|
+
width: px-to-rem(48px);
|
|
23
|
+
height: px-to-rem(48px);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
&[size#{$infix}="huge"] {
|
|
27
|
+
width: px-to-rem(56px);
|
|
28
|
+
height: px-to-rem(56px);
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
}
|
|
1
33
|
@mixin matcha-spin($theme) {
|
|
34
|
+
matcha-spin:not([color]) .spin-progress {
|
|
35
|
+
stroke: getAccent($theme);
|
|
36
|
+
}
|
|
2
37
|
matcha-spin {
|
|
3
38
|
// Red
|
|
4
39
|
&[color="red"] .spin-progress {
|
|
@@ -80,7 +115,7 @@
|
|
|
80
115
|
&[color="accent"] .spin-progress {
|
|
81
116
|
stroke: getAccent($theme);
|
|
82
117
|
}
|
|
83
|
-
// Primary
|
|
118
|
+
// Primary
|
|
84
119
|
&[color="primary"] .spin-progress {
|
|
85
120
|
stroke: getPrimary($theme);
|
|
86
121
|
}
|
|
@@ -89,10 +124,18 @@
|
|
|
89
124
|
stroke: getWarn($theme);
|
|
90
125
|
}
|
|
91
126
|
.spin-placeholder {
|
|
92
|
-
stroke: getDisabled($theme);
|
|
127
|
+
stroke: getDisabled($theme);
|
|
93
128
|
}
|
|
129
|
+
|
|
130
|
+
&:not([size]) {
|
|
131
|
+
width: px-to-rem(40px);
|
|
132
|
+
height: px-to-rem(40px);
|
|
133
|
+
}
|
|
134
|
+
@include generate-matcha-spin-size-classes($helper-breakpoints);
|
|
135
|
+
|
|
136
|
+
}
|
|
94
137
|
}
|
|
95
|
-
|
|
138
|
+
|
|
96
139
|
matcha-spin:not([progress]) .spin-progress {
|
|
97
140
|
animation:
|
|
98
141
|
matcha-spin-rotate 1.5s linear infinite,
|
|
@@ -105,6 +148,8 @@ matcha-spin:not([progress]) .spin-progress {
|
|
|
105
148
|
|
|
106
149
|
svg {
|
|
107
150
|
transform: rotate(-90deg);
|
|
151
|
+
width: 100%;
|
|
152
|
+
height: 100%;
|
|
108
153
|
}
|
|
109
154
|
|
|
110
155
|
.spin-placeholder {
|
package/main.scss
CHANGED
|
@@ -40,6 +40,7 @@
|
|
|
40
40
|
@import "./components/matcha-ripple.scss"; // matcha-ripple-theme($theme)
|
|
41
41
|
@import "./components/matcha-spin.scss"; // matcha-spin-theme($theme)
|
|
42
42
|
@import "./components/matcha-hint-text.scss"; // matcha-hint-theme($theme)
|
|
43
|
+
@import "./components/matcha-button-group.scss"; // matcha-button-group($theme)
|
|
43
44
|
|
|
44
45
|
// VENDORS
|
|
45
46
|
@import "./vendors/angular-editor.scss";
|
|
@@ -140,4 +141,5 @@
|
|
|
140
141
|
@include matcha-checkbox($theme);
|
|
141
142
|
@include matcha-spin($theme);
|
|
142
143
|
@include matcha-hint-text($theme);
|
|
144
|
+
@include matcha-button-group($theme);
|
|
143
145
|
}
|
package/package.json
CHANGED
|
@@ -998,8 +998,8 @@ $mat-grey: (
|
|
|
998
998
|
200 : $dark-primary-text,
|
|
999
999
|
300 : $dark-primary-text,
|
|
1000
1000
|
400 : $dark-primary-text,
|
|
1001
|
-
500 : $
|
|
1002
|
-
600 : $
|
|
1001
|
+
500 : $light-primary-text,
|
|
1002
|
+
600 : $light-primary-text,
|
|
1003
1003
|
700 : $light-primary-text,
|
|
1004
1004
|
800 : $light-primary-text,
|
|
1005
1005
|
900 : $light-primary-text,
|
|
@@ -1162,6 +1162,7 @@ $light-theme-foreground-palette: (
|
|
|
1162
1162
|
divider: rgba(0, 0, 0, 0.12),
|
|
1163
1163
|
dividers: rgba(0, 0, 0, 0.12),
|
|
1164
1164
|
disabled: rgba(0, 0, 0, 0.26),
|
|
1165
|
+
disabled-contrast: #f1f1f1,
|
|
1165
1166
|
// disabled-button: rgba(0, 0, 0, 0.26),
|
|
1166
1167
|
disabled-text: rgba(0, 0, 0, 0.38),
|
|
1167
1168
|
elevation: black,
|
|
@@ -1179,7 +1180,6 @@ $light-theme-foreground-palette: (
|
|
|
1179
1180
|
static-light-text: $color-base-blue-grey-50,
|
|
1180
1181
|
static-dark-text: $color-base-blue-grey-a700,
|
|
1181
1182
|
|
|
1182
|
-
disabled-icon: $color-base-blue-grey-200,
|
|
1183
1183
|
placeholder: $color-base-blue-grey-400,
|
|
1184
1184
|
label: $color-base-blue-grey-500,
|
|
1185
1185
|
);
|
|
@@ -1190,6 +1190,7 @@ $dark-theme-foreground-palette: (
|
|
|
1190
1190
|
divider: rgba(255, 255, 255, 0.12),
|
|
1191
1191
|
dividers: rgba(255, 255, 255, 0.12),
|
|
1192
1192
|
disabled: rgba(255, 255, 255, 0.3),
|
|
1193
|
+
disabled-contrast: #888888,
|
|
1193
1194
|
// disabled-button: rgba(white, 0.3),
|
|
1194
1195
|
disabled-text: rgba(255, 255, 255, 0.5),
|
|
1195
1196
|
elevation: black,
|