matcha-theme 20.188.0 → 20.190.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.
Files changed (28) hide show
  1. package/abstracts/_colors.scss +197 -122
  2. package/abstracts/_functions.scss +278 -114
  3. package/components/matcha-audio-player.scss +1 -5
  4. package/components/matcha-avatar.scss +2 -5
  5. package/components/matcha-button-toggle.scss +121 -90
  6. package/components/matcha-buttons.scss +3 -0
  7. package/components/matcha-cards.scss +147 -126
  8. package/components/matcha-checkbox.scss +432 -94
  9. package/components/matcha-form-field.scss +0 -1
  10. package/components/matcha-hint-text.scss +7 -8
  11. package/components/matcha-horizontal-tree.scss +0 -1
  12. package/components/matcha-menu.scss +0 -1
  13. package/components/matcha-option.scss +0 -1
  14. package/components/matcha-panel.scss +0 -1
  15. package/components/matcha-progress-bar.scss +169 -76
  16. package/components/matcha-radio.scss +426 -95
  17. package/components/matcha-scrollbar.scss +1 -2
  18. package/components/matcha-scrollbox-shadow.scss +1 -2
  19. package/components/matcha-select.scss +0 -1
  20. package/components/matcha-skeleton.scss +6 -8
  21. package/components/matcha-slide-toggle.scss +104 -31
  22. package/components/matcha-slider.scss +66 -52
  23. package/components/matcha-spin.scss +47 -4
  24. package/components/matcha-spinner.scss +65 -22
  25. package/components/matcha-tabs.scss +104 -79
  26. package/main.scss +2 -0
  27. package/package.json +1 -1
  28. package/tokens/_color-tokens.scss +95 -136
package/components/matcha-spin.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @mixin generate-matcha-spin-size-classes($helper-breakpoints) {
2
2
  @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
3
3
  @include media-breakpoint($materialBreakpoint) {
4
- $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
4
+ $infix: if($materialBreakpoint ==null, "", "-#{$breakpoint}");
5
5
 
6
6
  &[size#{$infix}="tiny"] {
7
7
  width: px-to-rem(24px);
@@ -30,109 +30,150 @@
30
30
  }
31
31
  }
32
32
  }
33
+
33
34
  @mixin matcha-spin($theme) {
34
35
  matcha-spin:not([color]) .spin-progress {
35
36
  stroke: getAccent($theme);
36
37
  }
38
+
37
39
  matcha-spin {
40
+
38
41
  // Red
39
42
  &[color="red"] .spin-progress {
40
43
  stroke: getRed($theme);
41
44
  }
45
+
42
46
  // Pink
43
47
  &[color="pink"] .spin-progress {
44
48
  stroke: getPink($theme);
45
49
  }
50
+
46
51
  // Purple
47
52
  &[color="purple"] .spin-progress {
48
53
  stroke: getPurple($theme);
49
54
  }
55
+
50
56
  // Deep Purple
51
57
  &[color="deep-purple"] .spin-progress {
52
58
  stroke: getDeepPurple($theme);
53
59
  }
60
+
54
61
  // Indigo
55
62
  &[color="indigo"] .spin-progress {
56
63
  stroke: getIndigo($theme);
57
64
  }
65
+
58
66
  // Blue
59
67
  &[color="blue"] .spin-progress {
60
68
  stroke: getBlue($theme);
61
69
  }
70
+
62
71
  // Light Blue
63
72
  &[color="light-blue"] .spin-progress {
64
73
  stroke: getLightBlue($theme);
65
74
  }
75
+
66
76
  // Cyan
67
77
  &[color="cyan"] .spin-progress {
68
78
  stroke: getCyan($theme);
69
79
  }
80
+
70
81
  // Teal
71
82
  &[color="teal"] .spin-progress {
72
83
  stroke: getTeal($theme);
73
84
  }
85
+
74
86
  // Green
75
87
  &[color="green"] .spin-progress {
76
88
  stroke: getGreen($theme);
77
89
  }
90
+
78
91
  // Light Green
79
92
  &[color="light-green"] .spin-progress {
80
93
  stroke: getLightGreen($theme);
81
94
  }
95
+
82
96
  // Lime
83
97
  &[color="lime"] .spin-progress {
84
98
  stroke: getLime($theme);
85
99
  }
100
+
86
101
  // Yellow
87
102
  &[color="yellow"] .spin-progress {
88
103
  stroke: getYellow($theme);
89
104
  }
105
+
90
106
  // Amber
91
107
  &[color="amber"] .spin-progress {
92
108
  stroke: getAmber($theme);
93
109
  }
110
+
94
111
  // Orange
95
112
  &[color="orange"] .spin-progress {
96
113
  stroke: getOrange($theme);
97
114
  }
115
+
98
116
  // Deep Orange
99
117
  &[color="deep-orange"] .spin-progress {
100
118
  stroke: getDeepOrange($theme);
101
119
  }
120
+
102
121
  // Brown
103
122
  &[color="brown"] .spin-progress {
104
123
  stroke: getBrown($theme);
105
124
  }
125
+
106
126
  // Grey
107
127
  &[color="grey"] .spin-progress {
108
128
  stroke: getGrey($theme);
109
129
  }
130
+
110
131
  // Blue Grey
111
132
  &[color="blue-grey"] .spin-progress {
112
133
  stroke: getBlueGrey($theme);
113
134
  }
135
+
114
136
  // Accent
115
137
  &[color="accent"] .spin-progress {
116
138
  stroke: getAccent($theme);
117
139
  }
140
+
118
141
  // Primary
119
142
  &[color="primary"] .spin-progress {
120
143
  stroke: getPrimary($theme);
121
144
  }
145
+
146
+ // Success
147
+ &[color="success"] .spin-progress {
148
+ stroke: getSuccess($theme);
149
+ }
150
+
122
151
  // Warn
123
152
  &[color="warn"] .spin-progress {
124
153
  stroke: getWarn($theme);
125
154
  }
155
+
156
+ //danger
157
+ &[color="danger"] .spin-progress {
158
+ stroke: getDanger($theme);
159
+ }
160
+
161
+ //info
162
+ &[color="info"] .spin-progress {
163
+ stroke: getInfo($theme);
164
+ }
165
+
126
166
  .spin-placeholder {
127
167
  stroke: getDisabled($theme);
128
168
  }
129
-
169
+
130
170
  &:not([size]) {
131
171
  width: px-to-rem(40px);
132
172
  height: px-to-rem(40px);
133
173
  }
174
+
134
175
  @include generate-matcha-spin-size-classes($helper-breakpoints);
135
-
176
+
136
177
  }
137
178
  }
138
179
 
@@ -174,13 +215,15 @@ matcha-spin:not([progress]) .spin-progress {
174
215
  stroke-dasharray: 1, 200;
175
216
  stroke-dashoffset: 0;
176
217
  }
218
+
177
219
  50% {
178
220
  stroke-dasharray: 100, 200;
179
221
  stroke-dashoffset: -15;
180
222
  }
223
+
181
224
  100% {
182
225
  stroke-dasharray: 100, 200;
183
226
  stroke-dashoffset: -200;
184
227
  }
185
228
  }
186
- }
229
+ }
package/components/matcha-spinner.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @mixin generate-matcha-spinner-size-classes($helper-breakpoints) {
2
2
  @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
3
3
  @include media-breakpoint($materialBreakpoint) {
4
- $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
4
+ $infix: if($materialBreakpoint ==null, "", "-#{$breakpoint}");
5
5
 
6
6
  &[size#{$infix}="tiny"] {
7
7
  svg {
@@ -48,103 +48,144 @@
48
48
  }
49
49
 
50
50
  }
51
+
51
52
  @mixin matcha-spinner($theme) {
52
53
  matcha-spinner:not([color]) .spinner-progress {
53
54
  stroke: getAccent($theme);
54
55
  }
56
+
55
57
  matcha-spinner {
58
+
56
59
  // Red
57
60
  &[color="red"] .spinner-progress {
58
61
  stroke: getRed($theme);
59
62
  }
63
+
60
64
  // Pink
61
65
  &[color="pink"] .spinner-progress {
62
66
  stroke: getPink($theme);
63
67
  }
68
+
64
69
  // Purple
65
70
  &[color="purple"] .spinner-progress {
66
71
  stroke: getPurple($theme);
67
72
  }
73
+
68
74
  // Deep Purple
69
75
  &[color="deep-purple"] .spinner-progress {
70
76
  stroke: getDeepPurple($theme);
71
77
  }
78
+
72
79
  // Indigo
73
80
  &[color="indigo"] .spinner-progress {
74
81
  stroke: getIndigo($theme);
75
82
  }
83
+
76
84
  // Blue
77
85
  &[color="blue"] .spinner-progress {
78
86
  stroke: getBlue($theme);
79
87
  }
88
+
80
89
  // Light Blue
81
90
  &[color="light-blue"] .spinner-progress {
82
91
  stroke: getLightBlue($theme);
83
92
  }
93
+
84
94
  // Cyan
85
95
  &[color="cyan"] .spinner-progress {
86
96
  stroke: getCyan($theme);
87
97
  }
98
+
88
99
  // Teal
89
100
  &[color="teal"] .spinner-progress {
90
101
  stroke: getTeal($theme);
91
102
  }
103
+
92
104
  // Green
93
105
  &[color="green"] .spinner-progress {
94
106
  stroke: getGreen($theme);
95
107
  }
108
+
96
109
  // Light Green
97
110
  &[color="light-green"] .spinner-progress {
98
111
  stroke: getLightGreen($theme);
99
112
  }
113
+
100
114
  // Lime
101
115
  &[color="lime"] .spinner-progress {
102
116
  stroke: getLime($theme);
103
117
  }
118
+
104
119
  // Yellow
105
120
  &[color="yellow"] .spinner-progress {
106
121
  stroke: getYellow($theme);
107
122
  }
123
+
108
124
  // Amber
109
125
  &[color="amber"] .spinner-progress {
110
126
  stroke: getAmber($theme);
111
127
  }
128
+
112
129
  // Orange
113
130
  &[color="orange"] .spinner-progress {
114
131
  stroke: getOrange($theme);
115
132
  }
133
+
116
134
  // Deep Orange
117
135
  &[color="deep-orange"] .spinner-progress {
118
136
  stroke: getDeepOrange($theme);
119
137
  }
138
+
120
139
  // Brown
121
140
  &[color="brown"] .spinner-progress {
122
141
  stroke: getBrown($theme);
123
142
  }
143
+
124
144
  // Grey
125
145
  &[color="grey"] .spinner-progress {
126
146
  stroke: getGrey($theme);
127
147
  }
148
+
128
149
  // Blue Grey
129
150
  &[color="blue-grey"] .spinner-progress {
130
151
  stroke: getBlueGrey($theme);
131
152
  }
153
+
132
154
  // Accent
133
155
  &[color="accent"] .spinner-progress {
134
156
  stroke: getAccent($theme);
135
157
  }
158
+
136
159
  // Primary
137
160
  &[color="primary"] .spinner-progress {
138
161
  stroke: getPrimary($theme);
139
162
  }
163
+
164
+ // Success
165
+ &[color="success"] .spinner-progress {
166
+ stroke: getSuccess($theme);
167
+ }
168
+
140
169
  // Warn
141
170
  &[color="warn"] .spinner-progress {
142
171
  stroke: getWarn($theme);
143
172
  }
173
+
174
+ // Danger
175
+ &[color="danger"] .spinner-progress {
176
+ stroke: getDanger($theme);
177
+ }
178
+
179
+ // Info
180
+ &[color="info"] .spinner-progress {
181
+ stroke: getInfo($theme);
182
+ }
183
+
144
184
  .spinner-placeholder {
145
185
  stroke: getDisabled($theme);
146
186
  fill: none;
147
187
  }
188
+
148
189
  .spinner-progress {
149
190
  fill: none;
150
191
  }
@@ -156,7 +197,7 @@
156
197
  }
157
198
 
158
199
  matcha-spinner:not([progress]),
159
- matcha-spinner[progress="0"] {
200
+ matcha-spinner[progress="0"] {
160
201
  $offset: 187;
161
202
  $duration: 1.4s;
162
203
 
@@ -185,12 +226,17 @@ matcha-spinner[progress="0"] {
185
226
 
186
227
 
187
228
  .spinner {
188
- animation: rotator $duration linear infinite;
229
+ animation: rotator $duration linear infinite;
189
230
  }
190
231
 
191
232
  @keyframes rotator {
192
- 0% { transform: rotate(0deg); }
193
- 100% { transform: rotate(270deg); }
233
+ 0% {
234
+ transform: rotate(0deg);
235
+ }
236
+
237
+ 100% {
238
+ transform: rotate(270deg);
239
+ }
194
240
  }
195
241
 
196
242
 
@@ -198,15 +244,19 @@ matcha-spinner[progress="0"] {
198
244
 
199
245
 
200
246
  @keyframes dash {
201
- 0% { stroke-dashoffset: $offset; }
202
- 50% {
203
- stroke-dashoffset: $offset/4;
204
- transform:rotate(135deg);
205
- }
206
- 100% {
207
- stroke-dashoffset: $offset;
208
- transform:rotate(450deg);
209
- }
247
+ 0% {
248
+ stroke-dashoffset: $offset;
249
+ }
250
+
251
+ 50% {
252
+ stroke-dashoffset: $offset/4;
253
+ transform: rotate(135deg);
254
+ }
255
+
256
+ 100% {
257
+ stroke-dashoffset: $offset;
258
+ transform: rotate(450deg);
259
+ }
210
260
  }
211
261
  }
212
262
 
@@ -214,11 +264,4 @@ matcha-spinner[progress="0"] {
214
264
 
215
265
  matcha-spinner[progress] .spinner-progress {
216
266
  animation: none;
217
- }
218
-
219
-
220
-
221
-
222
-
223
-
224
-
267
+ }
package/components/matcha-tabs.scss CHANGED
@@ -1,15 +1,17 @@
1
1
  @mixin _colorize-inactive-type-basic($theme, $color-functions) {
2
- &[inactivetype="basic"]{
2
+ &[inactivetype="basic"] {
3
3
  @each $colorName, $colorFn in $color-functions {
4
- &[inactivecolor="#{'' + $colorName}"]{
5
- .button-group matcha-tab-item{
4
+ &[inactivecolor="#{'' + $colorName}"] {
5
+ .button-group matcha-tab-item {
6
+
6
7
  button[matcha-button],
7
- a[matcha-button]{
8
- &:not([active-item="true"]){
8
+ a[matcha-button] {
9
+ &:not([active-item="true"]) {
9
10
  background: getSurface($theme);
10
- color: call(#{$colorFn}, $theme);
11
+ color: call(#{$colorFn}, $theme);
11
12
  box-shadow: 0 0 0 0px inset;
12
- .ripple{
13
+
14
+ .ripple {
13
15
  background: call(#{$colorFn}Alpha, $theme);
14
16
  }
15
17
  }
@@ -17,13 +19,15 @@
17
19
  }
18
20
  }
19
21
  }
22
+
20
23
  &[disabled],
21
24
  &[disabled]:not([disabled="false"]),
22
25
  &[disabled="true"] {
23
- &:not([active-item="true"]){
24
- .button-group matcha-tab-item{
26
+ &:not([active-item="true"]) {
27
+ .button-group matcha-tab-item {
28
+
25
29
  button[matcha-button],
26
- a[matcha-button]{
30
+ a[matcha-button] {
27
31
  @include _disabled-basic-button($theme);
28
32
  }
29
33
  }
@@ -33,20 +37,24 @@
33
37
  }
34
38
 
35
39
  @mixin _colorize-inactive-type-outline($theme, $color-functions) {
36
- &[inactivetype="outline"]{
40
+ &[inactivetype="outline"] {
41
+
37
42
  //disabled false
38
- &:not([disabled="true"]){
43
+ &:not([disabled="true"]) {
39
44
  @each $colorName, $colorFn in $color-functions {
40
- &[inactivecolor="#{'' + $colorName}"]{
41
- .button-group matcha-tab-item{
45
+ &[inactivecolor="#{'' + $colorName}"] {
46
+ .button-group matcha-tab-item {
47
+
42
48
  button[matcha-button],
43
- a[matcha-button]{
49
+ a[matcha-button] {
50
+
44
51
  //botão não ativo
45
- &:not([active-item="true"]){
52
+ &:not([active-item="true"]) {
46
53
  color: call(#{$colorFn}, $theme);
47
54
  background: transparent;
48
55
  box-shadow: 0 0 0 2px call(#{$colorFn}, $theme) inset;
49
- .ripple{
56
+
57
+ .ripple {
50
58
  background: call(#{$colorFn}Alpha, $theme);
51
59
  }
52
60
  }
@@ -55,15 +63,18 @@
55
63
  }
56
64
  }
57
65
  }
66
+
58
67
  //disabled true
59
68
  &[disabled],
60
69
  &[disabled]:not([disabled="false"]),
61
70
  &[disabled="true"] {
62
- > .button-group matcha-tab-item{
71
+ >.button-group matcha-tab-item {
72
+
63
73
  button[matcha-button],
64
- a[matcha-button]{
74
+ a[matcha-button] {
75
+
65
76
  //botão não ativo
66
- &:not([active-item="true"]){
77
+ &:not([active-item="true"]) {
67
78
  @include _disabled-outline-button($theme);
68
79
  }
69
80
  }
@@ -73,17 +84,19 @@
73
84
  }
74
85
 
75
86
  @mixin _colorize-inactive-type-alpha($theme, $color-functions) {
76
- &[inactivetype="alpha"]{
87
+ &[inactivetype="alpha"] {
77
88
  @each $colorName, $colorFn in $color-functions {
78
- &[inactivecolor="#{'' + $colorName}"]{
79
- .button-group matcha-tab-item{
89
+ &[inactivecolor="#{'' + $colorName}"] {
90
+ .button-group matcha-tab-item {
91
+
80
92
  button[matcha-button],
81
- a[matcha-button]{
82
- &:not([active-item="true"]){
93
+ a[matcha-button] {
94
+ &:not([active-item="true"]) {
83
95
  color: call(#{$colorFn}, $theme);
84
96
  background: call(#{$colorFn}Alpha, $theme);
85
97
  box-shadow: 0 0 0 0px;
86
- .ripple{
98
+
99
+ .ripple {
87
100
  background: call(#{$colorFn}ContrastAlpha, $theme)
88
101
  }
89
102
  }
@@ -91,14 +104,17 @@
91
104
  }
92
105
  }
93
106
  }
107
+
94
108
  &[disabled],
95
109
  &[disabled]:not([disabled="false"]),
96
110
  &[disabled="true"] {
97
- .button-group matcha-tab-item{
111
+ .button-group matcha-tab-item {
112
+
98
113
  button[matcha-button],
99
- a[matcha-button]{
114
+ a[matcha-button] {
115
+
100
116
  //botão não ativo
101
- &:not([active-item="true"]){
117
+ &:not([active-item="true"]) {
102
118
  @include _disabled-alpha-button($theme);
103
119
  }
104
120
  }
@@ -109,34 +125,39 @@
109
125
 
110
126
  @mixin _colorize-inactive-type-link($theme, $color-functions) {
111
127
 
112
- &[inactivetype="link"]{
128
+ &[inactivetype="link"] {
113
129
  @each $colorName, $colorFn in $color-functions {
114
- &[inactivecolor="#{'' + $colorName}"]{
115
- .button-group matcha-tab-item{
130
+ &[inactivecolor="#{'' + $colorName}"] {
131
+ .button-group matcha-tab-item {
132
+
116
133
  button[matcha-button],
117
- a[matcha-button]{
118
- &:not([active-item="true"]){
134
+ a[matcha-button] {
135
+ &:not([active-item="true"]) {
119
136
 
120
- background: transparent;
121
- color: call(#{$colorFn}, $theme);
122
- box-shadow: 0 0 0 0px;
123
- .ripple{
124
- background: call(#{$colorFn}Alpha, $theme);
125
- }
137
+ background: transparent;
138
+ color: call(#{$colorFn}, $theme);
139
+ box-shadow: 0 0 0 0px;
140
+
141
+ .ripple {
142
+ background: call(#{$colorFn}Alpha, $theme);
143
+ }
126
144
 
127
145
  }
128
146
  }
129
147
  }
130
148
  }
131
149
  }
150
+
132
151
  &[disabled],
133
152
  &[disabled]:not([disabled="false"]),
134
153
  &[disabled="true"] {
135
- .button-group matcha-tab-item{
154
+ .button-group matcha-tab-item {
155
+
136
156
  button[matcha-button],
137
- a[matcha-button]{
157
+ a[matcha-button] {
158
+
138
159
  //botão não ativo
139
- &:not([active-item="true"]){
160
+ &:not([active-item="true"]) {
140
161
  @include _disabled-link-button($theme);
141
162
  }
142
163
  }
@@ -171,54 +192,59 @@
171
192
  blue-grey: getBlueGrey,
172
193
  primary: getPrimary,
173
194
  accent: getAccent,
195
+ success: getSuccess,
174
196
  warn: getWarn,
197
+ danger: getDanger,
198
+ info: getInfo,
175
199
  disabled: getDisabled,
176
200
  );
177
201
 
178
- matcha-tabs{
179
- display: flex;
180
- @include _colorize-inactive-type-basic($theme, $color-functions);
181
- @include _colorize-inactive-type-outline($theme, $color-functions);
182
- @include _colorize-inactive-type-alpha($theme, $color-functions);
183
- @include _colorize-inactive-type-link($theme, $color-functions);
202
+ matcha-tabs {
203
+ display: flex;
204
+ @include _colorize-inactive-type-basic($theme, $color-functions);
205
+ @include _colorize-inactive-type-outline($theme, $color-functions);
206
+ @include _colorize-inactive-type-alpha($theme, $color-functions);
207
+ @include _colorize-inactive-type-link($theme, $color-functions);
184
208
 
185
- &[disabled],
186
- &[disabled]:not([disabled="false"]),
187
- &[disabled="true"] {
188
- .button-group matcha-tab-item{
189
- button[matcha-button],
190
- a[matcha-button]{
191
- &[active-item="true"]{
192
- &[outline],
193
- &[outline]:not([outline="false"]),
194
- &[outline="true"]{
195
- @include _disabled-outline-button($theme);
196
- }
209
+ &[disabled],
210
+ &[disabled]:not([disabled="false"]),
211
+ &[disabled="true"] {
212
+ .button-group matcha-tab-item {
197
213
 
198
- &[basic],
199
- &[basic]:not([basic="false"]),
200
- &[basic="true"]{
201
- @include _disabled-basic-button($theme);
202
- }
214
+ button[matcha-button],
215
+ a[matcha-button] {
216
+ &[active-item="true"] {
203
217
 
204
- &[alpha],
205
- &[alpha]:not([alpha="false"]),
206
- &[alpha="true"]{
207
- @include _disabled-alpha-button($theme);
208
- }
218
+ &[outline],
219
+ &[outline]:not([outline="false"]),
220
+ &[outline="true"] {
221
+ @include _disabled-outline-button($theme);
222
+ }
209
223
 
210
- &[link],
211
- &[link]:not([link="false"]),
212
- &[link="true"]{
213
- @include _disabled-link-button($theme);
214
- }
224
+ &[basic],
225
+ &[basic]:not([basic="false"]),
226
+ &[basic="true"] {
227
+ @include _disabled-basic-button($theme);
228
+ }
229
+
230
+ &[alpha],
231
+ &[alpha]:not([alpha="false"]),
232
+ &[alpha="true"] {
233
+ @include _disabled-alpha-button($theme);
234
+ }
235
+
236
+ &[link],
237
+ &[link]:not([link="false"]),
238
+ &[link="true"] {
239
+ @include _disabled-link-button($theme);
215
240
  }
216
241
  }
217
242
  }
218
-
219
243
  }
244
+
220
245
  }
221
246
  }
247
+ }
222
248
 
223
249
  .button-group {
224
250
  &.gap-0 {
@@ -239,5 +265,4 @@
239
265
  border-radius: 0;
240
266
  }
241
267
  }
242
- }
243
-
268
+ }