matcha-theme 20.189.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 (23) hide show
  1. package/components/matcha-audio-player.scss +1 -5
  2. package/components/matcha-avatar.scss +2 -5
  3. package/components/matcha-button-toggle.scss +121 -90
  4. package/components/matcha-buttons.scss +3 -0
  5. package/components/matcha-cards.scss +147 -126
  6. package/components/matcha-checkbox.scss +432 -94
  7. package/components/matcha-form-field.scss +0 -1
  8. package/components/matcha-hint-text.scss +7 -8
  9. package/components/matcha-horizontal-tree.scss +0 -1
  10. package/components/matcha-menu.scss +0 -1
  11. package/components/matcha-option.scss +0 -1
  12. package/components/matcha-panel.scss +0 -1
  13. package/components/matcha-radio.scss +426 -95
  14. package/components/matcha-scrollbar.scss +1 -2
  15. package/components/matcha-scrollbox-shadow.scss +1 -2
  16. package/components/matcha-select.scss +0 -1
  17. package/components/matcha-skeleton.scss +6 -8
  18. package/components/matcha-slide-toggle.scss +104 -31
  19. package/components/matcha-slider.scss +66 -52
  20. package/components/matcha-spin.scss +47 -4
  21. package/components/matcha-spinner.scss +65 -22
  22. package/components/matcha-tabs.scss +104 -79
  23. package/package.json +1 -1
package/components/matcha-cards.scss CHANGED
@@ -21,158 +21,180 @@
21
21
  blue-grey: getBlueGrey,
22
22
  primary: getPrimary,
23
23
  accent: getAccent,
24
+ success: getSuccess,
24
25
  warn: getWarn,
26
+ danger: getDanger,
27
+ info: getInfo,
25
28
  disabled: getDisabled,
26
29
  );
27
30
 
28
- matcha-card,
29
- .matcha-card,
30
- .matcha-card-flat {
31
- @each $colorName, $colorFn in $color-functions {
32
- &[color="#{'' + $colorName}"][tint]:not([tint="false"]) {
33
- background: call(#{$colorFn}Alpha, $theme);
34
- color: call(#{$colorFn}, $theme);
35
- }
36
- &[color="#{'' + $colorName}"][outline]:not([outline="false"]),
37
- &[color="#{'' + $colorName}"][link]:not([link="false"]),
38
- &[color="#{'' + $colorName}"][basic]:not([basic="false"]) {
39
- color: call(#{$colorFn}, $theme);
40
- }
41
-
42
- &[color="#{'' + $colorName}"] {
43
- background: call(#{$colorFn}, $theme);
44
- color: call(#{$colorFn}Contrast, $theme);
45
- &[alpha]:not([alpha="false"]) {
46
- background: call(#{$colorFn}Alpha, $theme);
47
- color: getForeground($theme);
48
- }
49
- }
31
+ matcha-card,
32
+ .matcha-card,
33
+ .matcha-card-flat {
34
+ @each $colorName, $colorFn in $color-functions {
35
+ &[color="#{'' + $colorName}"][tint]:not([tint="false"]) {
36
+ background: call(#{$colorFn}Alpha, $theme);
37
+ color: call(#{$colorFn}, $theme);
50
38
  }
51
39
 
52
-
53
- &[basic]:not([basic="false"]) {
54
- box-shadow: 0px 0px 0px 0px inset;
40
+ &[color="#{'' + $colorName}"][outline]:not([outline="false"]),
41
+ &[color="#{'' + $colorName}"][link]:not([link="false"]),
42
+ &[color="#{'' + $colorName}"][basic]:not([basic="false"]) {
43
+ color: call(#{$colorFn}, $theme);
55
44
  }
56
45
 
57
- &[link]:not([link="false"]) {
58
- text-transform: initial;
59
- letter-spacing: 0;
60
- text-decoration: none;
61
- padding: 0;
62
- }
46
+ &[color="#{'' + $colorName}"] {
47
+ background: call(#{$colorFn}, $theme);
48
+ color: call(#{$colorFn}Contrast, $theme);
63
49
 
64
- &[basic="true"]:not([icon="false"]) {
65
- border: 0px solid currentColor;
66
- background: getSurface($theme);
67
- &:not([color]){
68
- border-color: getForeground($theme);
69
- background: transparent !important;
70
- }
71
- &[color]:not([outline]){
72
- background: getSurface($theme)!important;
50
+ &[alpha]:not([alpha="false"]) {
51
+ background: call(#{$colorFn}Alpha, $theme);
52
+ color: getForeground($theme);
73
53
  }
74
54
  }
55
+ }
56
+
75
57
 
76
- &[outline]:not([outline="false"]) {
77
- box-shadow: 0px 0px 0px 2px inset;
78
- border: 0px solid currentColor;
58
+ &[basic]:not([basic="false"]) {
59
+ box-shadow: 0px 0px 0px 0px inset;
60
+ }
61
+
62
+ &[link]:not([link="false"]) {
63
+ text-transform: initial;
64
+ letter-spacing: 0;
65
+ text-decoration: none;
66
+ padding: 0;
67
+ }
68
+
69
+ &[basic="true"]:not([icon="false"]) {
70
+ border: 0px solid currentColor;
71
+ background: getSurface($theme);
72
+
73
+ &:not([color]) {
74
+ border-color: getForeground($theme);
79
75
  background: transparent !important;
80
- &:not([color]){
81
- border-color: getForeground($theme);
82
- color: getForeground($theme);
83
- }
84
76
  }
85
77
 
78
+ &[color]:not([outline]) {
79
+ background: getSurface($theme) !important;
80
+ }
81
+ }
82
+
83
+ &[outline]:not([outline="false"]) {
84
+ box-shadow: 0px 0px 0px 2px inset;
85
+ border: 0px solid currentColor;
86
+ background: transparent !important;
87
+
86
88
  &:not([color]) {
87
- background: getSurface($theme);
89
+ border-color: getForeground($theme);
88
90
  color: getForeground($theme);
89
91
  }
92
+ }
90
93
 
94
+ &:not([color]) {
95
+ background: getSurface($theme);
96
+ color: getForeground($theme);
97
+ }
91
98
 
92
99
 
93
- // bg
94
- &[color="bg"][alpha]:not([alpha="false"]){
95
- background: getBackgroundAlpha($theme);
96
- color:getForeground($theme);
97
- }
98
- &[color="bg"][tint]:not([tint="false"]){
99
- background: getBackgroundAlpha($theme);
100
- color: getForeground($theme);
101
- }
102
- &[color="bg"][outline]:not([outline="false"]),
103
- &[color="bg"][link]:not([link="false"]),
104
- &[color="bg"][basic]:not([basic="false"]) {
105
- color: getForeground($theme);
106
- }
107
- &[color="bg"]{
108
- background: getBackground($theme);
109
- color: getForeground($theme);
110
- }
111
100
 
112
- // surface
113
- &[color="surface"][alpha]:not([alpha="false"]){
114
- background: getSurfaceAlpha($theme);
115
- color:getForeground($theme);
116
- }
117
- &[color="surface"][tint]:not([tint="false"]){
118
- background: getSurfaceAlpha($theme);
119
- color: getForeground($theme);
120
- }
121
- &[color="surface"][outline]:not([outline="false"]),
122
- &[color="surface"][link]:not([link="false"]),
123
- &[color="surface"][basic]:not([basic="false"]) {
124
- color: getForeground($theme);
125
- }
126
- &[color="surface"]{
127
- background: getSurface($theme);
128
- color: getForeground($theme);
129
- }
101
+ // bg
102
+ &[color="bg"][alpha]:not([alpha="false"]) {
103
+ background: getBackgroundAlpha($theme);
104
+ color: getForeground($theme);
105
+ }
130
106
 
131
- // fg
132
- &[color="fg"][alpha]:not([alpha="false"]){
133
- background: getForegroundAlpha($theme);
134
- color:getForeground($theme);
135
- }
136
- &[color="fg"][tint]:not([tint="false"]){
137
- background: getForegroundAlpha($theme);
138
- color:getForeground($theme);
139
- }
140
- &[color="fg"][outline]:not([outline="false"]),
141
- &[color="fg"][link]:not([link="false"]),
142
- &[color="fg"][basic]:not([basic="false"]) {
143
- color: getForeground($theme);
144
- }
145
- &[color="fg"]{
146
- background: getForeground($theme);
147
- color: getForegroundInverse($theme);
148
- }
107
+ &[color="bg"][tint]:not([tint="false"]) {
108
+ background: getBackgroundAlpha($theme);
109
+ color: getForeground($theme);
110
+ }
149
111
 
150
- //basic
151
- &[color="basic"][alpha]:not([alpha="false"]){
152
- background: getForegroundAlpha($theme);
153
- color:getForeground($theme);
154
- }
155
- &[color="basic"][tint]:not([tint="false"]){
156
- background: getForegroundAlpha($theme);
157
- color: getForeground($theme);
158
- }
159
- &[color="basic"][outline]:not([outline="false"]),
160
- &[color="basic"][link]:not([link="false"]),
161
- &[color="basic"][basic]:not([basic="false"]) {
162
- color: getForeground($theme);
163
- }
164
- &[color="basic"]{
165
- background: getSurface($theme);
112
+ &[color="bg"][outline]:not([outline="false"]),
113
+ &[color="bg"][link]:not([link="false"]),
114
+ &[color="bg"][basic]:not([basic="false"]) {
115
+ color: getForeground($theme);
116
+ }
117
+
118
+ &[color="bg"] {
119
+ background: getBackground($theme);
120
+ color: getForeground($theme);
121
+ }
122
+
123
+ // surface
124
+ &[color="surface"][alpha]:not([alpha="false"]) {
125
+ background: getSurfaceAlpha($theme);
126
+ color: getForeground($theme);
127
+ }
128
+
129
+ &[color="surface"][tint]:not([tint="false"]) {
130
+ background: getSurfaceAlpha($theme);
131
+ color: getForeground($theme);
132
+ }
133
+
134
+ &[color="surface"][outline]:not([outline="false"]),
135
+ &[color="surface"][link]:not([link="false"]),
136
+ &[color="surface"][basic]:not([basic="false"]) {
137
+ color: getForeground($theme);
138
+ }
139
+
140
+ &[color="surface"] {
141
+ background: getSurface($theme);
142
+ color: getForeground($theme);
143
+ }
144
+
145
+ // fg
146
+ &[color="fg"][alpha]:not([alpha="false"]) {
147
+ background: getForegroundAlpha($theme);
148
+ color: getForeground($theme);
149
+ }
150
+
151
+ &[color="fg"][tint]:not([tint="false"]) {
152
+ background: getForegroundAlpha($theme);
153
+ color: getForeground($theme);
154
+ }
155
+
156
+ &[color="fg"][outline]:not([outline="false"]),
157
+ &[color="fg"][link]:not([link="false"]),
158
+ &[color="fg"][basic]:not([basic="false"]) {
159
+ color: getForeground($theme);
160
+ }
161
+
162
+ &[color="fg"] {
163
+ background: getForeground($theme);
164
+ color: getForegroundInverse($theme);
165
+ }
166
+
167
+ //basic
168
+ &[color="basic"][alpha]:not([alpha="false"]) {
169
+ background: getForegroundAlpha($theme);
170
+ color: getForeground($theme);
171
+ }
172
+
173
+ &[color="basic"][tint]:not([tint="false"]) {
174
+ background: getForegroundAlpha($theme);
175
+ color: getForeground($theme);
176
+ }
177
+
178
+ &[color="basic"][outline]:not([outline="false"]),
179
+ &[color="basic"][link]:not([link="false"]),
180
+ &[color="basic"][basic]:not([basic="false"]) {
181
+ color: getForeground($theme);
182
+ }
183
+
184
+ &[color="basic"] {
185
+ background: getSurface($theme);
186
+ color: getForeground($theme);
187
+ }
188
+
189
+ &[color="basic"] {
190
+ background: getSurface($theme);
191
+
192
+ &:not([color]) {
166
193
  color: getForeground($theme);
167
194
  }
168
- &[color="basic"]{
169
- background: getSurface($theme);
170
- &:not([color]){
171
- color: getForeground($theme);
172
- }
173
- }
174
195
  }
175
196
  }
197
+ }
176
198
 
177
199
  // -----------------------------------------------------------------------------------------------------
178
200
  // @ Cards
@@ -254,5 +276,4 @@ matcha-card,
254
276
  line-height: 1.75;
255
277
  }
256
278
  }
257
- }
258
-
279
+ }