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-form-field.scss CHANGED
@@ -50,7 +50,6 @@
50
50
  @mixin matcha-form-field($theme) {
51
51
  $primary: map-get($theme, primary);
52
52
  $accent: map-get($theme, accent);
53
- $warn: map-get($theme, warn);
54
53
  $background: map-get($theme, background);
55
54
  $foreground: map-get($theme, foreground);
56
55
 
package/components/matcha-hint-text.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @mixin generate-matcha-hint-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
  font-size: px-to-rem(12px);
@@ -34,7 +34,7 @@
34
34
  @mixin matcha-hint-text($theme) {
35
35
  matcha-hint-text {
36
36
  // Estilos base semelhantes ao matcha-error para manter a consistência visual
37
- width:100%;
37
+ width: 100%;
38
38
  display: flex;
39
39
  align-items: center;
40
40
  gap: px-to-rem(4px);
@@ -43,19 +43,19 @@
43
43
 
44
44
  // Cor por type
45
45
  &[type="error"] {
46
- color: getRed($theme);
46
+ color: getDanger($theme);
47
47
  }
48
48
 
49
49
  &[type="warning"] {
50
- color: getYellow($theme);
50
+ color: getWarn($theme);
51
51
  }
52
52
 
53
53
  &[type="info"] {
54
- color: getBlue($theme);
54
+ color: getInfo($theme);
55
55
  }
56
56
 
57
57
  &[type="success"] {
58
- color: getGreen($theme);
58
+ color: getSuccess($theme);
59
59
  }
60
60
 
61
61
  &:not([size]) {
@@ -74,5 +74,4 @@
74
74
 
75
75
  @include generate-matcha-hint-size-classes($helper-breakpoints);
76
76
  }
77
- }
78
-
77
+ }
package/components/matcha-horizontal-tree.scss CHANGED
@@ -1,7 +1,6 @@
1
1
  @mixin matcha-horizontal-tree($theme) {
2
2
  $primary: map-get($theme, primary);
3
3
  $accent: map-get($theme, accent);
4
- $warn: map-get($theme, warn);
5
4
  $background: map-get($theme, background);
6
5
  $foreground: map-get($theme, foreground);
7
6
 
package/components/matcha-menu.scss CHANGED
@@ -1,7 +1,6 @@
1
1
  @mixin matcha-menu-theme($theme) {
2
2
  $primary: map-get($theme, primary);
3
3
  $accent: map-get($theme, accent);
4
- $warn: map-get($theme, warn);
5
4
  $background: map-get($theme, background);
6
5
  $foreground: map-get($theme, foreground);
7
6
 
package/components/matcha-option.scss CHANGED
@@ -1,6 +1,5 @@
1
1
  @mixin matcha-option-theme($theme) {
2
2
  $accent: map-get($theme, accent);
3
- $warn: map-get($theme, warn);
4
3
  $primary: map-get($theme, primary);
5
4
  $background: map-get($theme, background);
6
5
  $foreground: map-get($theme, foreground);
package/components/matcha-panel.scss CHANGED
@@ -60,7 +60,6 @@
60
60
 
61
61
  @mixin matcha-panel-theme($theme) {
62
62
  $accent: map-get($theme, accent);
63
- $warn: map-get($theme, warn);
64
63
  $primary: map-get($theme, primary);
65
64
  $background: map-get($theme, background);
66
65
  $foreground: map-get($theme, foreground);
package/components/matcha-progress-bar.scss CHANGED
@@ -1,107 +1,200 @@
1
1
  /*
2
2
  How to use
3
- @import '~matcha-ds/assets/scss/components/matcha-header.scss';
4
- @include matcha-progress-bar-theme($theme);
3
+ @import '~matcha-ds/assets/scss/components/matcha-progress-bar.scss';
4
+ @include matcha-progress-bar($theme);
5
5
  */
6
- // -----------------------------------------------------------------------------------------------------
7
- // Progress-bar [Theme]
8
- // -----------------------------------------------------------------------------------------------------
6
+
7
+ @mixin keyframes($animation-name) {
8
+ @-webkit-keyframes #{$animation-name} {
9
+ @content;
10
+ }
11
+
12
+ @-moz-keyframes #{$animation-name} {
13
+ @content;
14
+ }
15
+
16
+ @keyframes #{$animation-name} {
17
+ @content;
18
+ }
19
+ }
20
+
21
+ @mixin generate-matcha-progress-bar-size-classes($helper-breakpoints) {
22
+ @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
23
+ @include media-breakpoint($materialBreakpoint) {
24
+ $infix: if($materialBreakpoint ==null, "", "-#{$breakpoint}");
25
+
26
+ &[size#{$infix}="tiny"] {
27
+ .progress {
28
+ height: px-to-rem(8px);
29
+ }
30
+ }
31
+
32
+ &[size#{$infix}="small"] {
33
+ .progress {
34
+ height: px-to-rem(16px);
35
+ }
36
+ }
37
+
38
+ &[size#{$infix}="medium"] {
39
+ .progress {
40
+ height: px-to-rem(32px);
41
+ }
42
+ }
43
+ }
44
+ }
45
+
46
+ &:not([size]) {
47
+ .progress {
48
+ height: px-to-rem(4px);
49
+ }
50
+ }
51
+ }
52
+
9
53
  @mixin matcha-progress-bar-theme($theme) {
10
- $accent: map-get($theme, accent);
11
- $warn: map-get($theme, warn);
12
- $primary: map-get($theme, primary);
13
- $background: map-get($theme, background);
14
- $foreground: map-get($theme, foreground);
54
+ matcha-progress-bar:not([color]) {
15
55
 
16
- .matcha-progress-bar {
56
+ .determinate,
57
+ .indeterminate {
58
+ background-color: getAccent($theme);
59
+ }
60
+ }
61
+
62
+ matcha-progress-bar {
17
63
 
18
- // matcha-progress-bar__field
19
- &__field {
20
- background: map-get($background, disabled);
21
- transition: all 300ms linear;
64
+ .matcha-progress-bar {
65
+ overflow: hidden;
66
+ border-radius: px-to-rem(8px);
22
67
  }
23
68
 
24
- // matcha-progress-bar__progress
25
- &__progress {
26
- transition: all 300ms ease-out;
27
-
28
- &::before {
29
- content: '';
30
- border-radius: 8px;
31
- background-size: 50px 50px;
32
- background-image: linear-gradient(-45deg,
33
- rgba(0, 0, 0, 0) 25%,
34
- transparent 25%,
35
- transparent 50%,
36
- rgba(0, 0, 0, 0) 50%,
37
- rgba(0, 0, 0, 0) 75%,
38
- transparent 75%,
39
- transparent);
40
- animation: progress-bar-animation 2s linear infinite;
69
+ .progress {
70
+ position: relative;
71
+ display: block;
72
+ width: 100%;
73
+ background-color: getDisabled($theme);
74
+ border-radius: px-to-rem(2px);
75
+ background-clip: padding-box;
76
+ overflow: hidden;
77
+
78
+ .progress-text {
79
+ position: absolute;
80
+ top: 0;
81
+ left: 0;
41
82
  width: 100%;
83
+ height: 100%;
42
84
  display: flex;
43
- transition: all 300ms linear;
85
+ align-items: center;
86
+ justify-content: center;
87
+ font-size: 0.75rem;
88
+ font-weight: 600;
89
+ pointer-events: none;
90
+ white-space: nowrap;
91
+ }
44
92
 
93
+ .progress-text-bg {
94
+ color: getForeground($theme);
95
+ z-index: 1;
45
96
  }
46
- }
47
97
 
48
- @keyframes progress-bar-animation {
49
- 0% {
50
- background-position: 50px 50px;
98
+ .progress-text-fg {
99
+ color: getDisabled($theme);
100
+ z-index: 3;
101
+ transition: clip-path 0.3s linear;
51
102
  }
52
103
 
53
- 100% {
54
- background-position: 0px 0px;
104
+ .determinate {
105
+ position: absolute;
106
+ top: 0;
107
+ bottom: 0;
108
+ left: 0;
109
+ transition: width 0.3s linear;
110
+ z-index: 2;
111
+ }
112
+
113
+ .indeterminate {
114
+ &:before {
115
+ content: '';
116
+ position: absolute;
117
+ background-color: inherit;
118
+ top: 0;
119
+ left: 0;
120
+ bottom: 0;
121
+ will-change: left, right;
122
+ animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
123
+ }
124
+
125
+ &:after {
126
+ content: '';
127
+ position: absolute;
128
+ background-color: inherit;
129
+ top: 0;
130
+ left: 0;
131
+ bottom: 0;
132
+ will-change: left, right;
133
+ animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
134
+ animation-delay: 1.15s;
135
+ }
55
136
  }
56
137
  }
57
138
 
58
- // matcha-progress-bar__progress
59
- &__label {
60
- color: map-get($foreground, foreground-inverse);
139
+ // Informative card styles
140
+ .progress-info-card {
141
+ border-radius: 8px;
142
+ width: 100%;
143
+ display: block;
61
144
  }
145
+
146
+ @include generate-matcha-progress-bar-size-classes($helper-breakpoints);
62
147
  }
63
- }
64
148
 
65
- // -----------------------------------------------------------------------------------------------------
66
- // Progress-bar [Style]
67
- // -----------------------------------------------------------------------------------------------------
68
- .matcha-progress-bar {
69
- width: 100%;
70
- display: flex;
149
+ @include keyframes(indeterminate) {
150
+ 0% {
151
+ left: -35%;
152
+ right: 100%;
153
+ }
71
154
 
72
- // matcha-progress-bar__field
73
- &__field {
74
- border-radius: 8px;
75
- display: flex;
76
- width: 100%;
77
- }
155
+ 60% {
156
+ left: 100%;
157
+ right: -90%;
158
+ }
78
159
 
79
- // matcha-progress-bar__progress
80
- &__progress {
81
- line-height: 12px;
82
- font-size: 12px;
83
- height: 16px;
84
- border-radius: 8px;
85
- display: flex;
160
+ 100% {
161
+ left: 100%;
162
+ right: -90%;
163
+ }
86
164
  }
87
165
 
88
- // matcha-progress-bar__progress
89
- &__label {
90
- line-height: 16px;
91
- padding-left: 8px;
92
- display: flex;
93
- position: relative;
166
+ @include keyframes(indeterminate-short) {
167
+ 0% {
168
+ left: -200%;
169
+ right: 100%;
170
+ }
171
+
172
+ 60% {
173
+ left: 107%;
174
+ right: -8%;
175
+ }
176
+
177
+ 100% {
178
+ left: 107%;
179
+ right: -8%;
180
+ }
94
181
  }
95
182
  }
96
183
 
97
- // Medium devices (landscapes and tablets, 600px and up < 1024px )
98
- @media (min-width: 600px) {}
99
184
 
100
- // Large devices (tablets and small monitors, 1024px and up < 1440px)
101
- @media (min-width: 1024px) {}
185
+ matcha-progress-bar {
186
+ display: flex;
187
+ width: 100%;
188
+ border-radius: px-to-rem(8px);
102
189
 
103
- // X-Large devices (big desktops, 1440px and up < 1920)
104
- @media (min-width: 1440px) {}
190
+ .matcha-progress-bar {
191
+ display: flex;
192
+ flex-direction: column;
193
+ position: relative;
194
+ width: 100%;
195
+ }
196
+ }
105
197
 
106
- // XX-Large devices (larger desktops, 1920px and up)
107
- @media (min-width: 1920px) {}
198
+ .progress {
199
+ overflow: hidden;
200
+ }