matcha-theme 20.174.0 → 20.179.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 (3) hide show
  1. package/components/matcha-buttons.scss +164 -136
  2. package/components/matcha-menu.scss +30 -61
  3. package/package.json +1 -1
package/components/matcha-buttons.scss CHANGED
@@ -57,10 +57,10 @@
57
57
  pointer-events: none;
58
58
  }
59
59
 
60
- @mixin generate-matcha-button-size-classes($helper-breakpoints){
60
+ @mixin generate-matcha-button-size-classes($helper-breakpoints) {
61
61
  @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
62
62
  @include media-breakpoint($materialBreakpoint) {
63
- $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
63
+ $infix: if($materialBreakpoint ==null, "", "-#{$breakpoint}");
64
64
 
65
65
  &[size#{$infix}="tiny"] {
66
66
  padding: 0 px-to-rem(32px);
@@ -120,7 +120,8 @@ a[matcha-button] {
120
120
  cursor: pointer;
121
121
  box-sizing: border-box;
122
122
  border-radius: px-to-rem(8px);
123
- *{
123
+
124
+ * {
124
125
  pointer-events: none;
125
126
  }
126
127
 
@@ -135,12 +136,12 @@ a[matcha-button] {
135
136
  @include generate-matcha-button-size-classes($helper-breakpoints);
136
137
 
137
138
 
138
- &:hover{
139
- // filter: brightness(1.02);
139
+ &:hover {
140
+ filter: brightness(0.98);
140
141
  }
141
142
 
142
- &:active{
143
- // filter: brightness(0.98);
143
+ &:active {
144
+ filter: brightness(0.96);
144
145
  }
145
146
 
146
147
  &[disabled] {
@@ -153,26 +154,31 @@ a[matcha-button] {
153
154
 
154
155
  &[outline]:not([outline="false"]) {
155
156
  box-shadow: 0px 0px 0px 2px inset;
156
- &[link]:not([link="false"]){
157
- &[size="tiny"]{
158
- padding:0px 8px;
159
- gap:4px;
157
+
158
+ &[link]:not([link="false"]) {
159
+ &[size="tiny"] {
160
+ padding: 0px 8px;
161
+ gap: 4px;
160
162
  }
161
- &[size="small"]{
162
- padding:0px 12px;
163
- gap:8px;
163
+
164
+ &[size="small"] {
165
+ padding: 0px 12px;
166
+ gap: 8px;
164
167
  }
165
- &[size="medium"]{
166
- padding:0px 16px;
167
- gap:12px;
168
+
169
+ &[size="medium"] {
170
+ padding: 0px 16px;
171
+ gap: 12px;
168
172
  }
169
- &[size="large"]{
170
- padding:0px 16px;
171
- gap:12px;
173
+
174
+ &[size="large"] {
175
+ padding: 0px 16px;
176
+ gap: 12px;
172
177
  }
173
- &[size="huge"]{
174
- padding:0px 16px;
175
- gap:12px;
178
+
179
+ &[size="huge"] {
180
+ padding: 0px 16px;
181
+ gap: 12px;
176
182
  }
177
183
  }
178
184
  }
@@ -202,6 +208,7 @@ a[matcha-button] {
202
208
  transform: scale(0);
203
209
  pointer-events: none;
204
210
  }
211
+
205
212
  .ripple.show {
206
213
  animation: ripple 400ms ease-out;
207
214
  }
@@ -211,9 +218,11 @@ a[matcha-button] {
211
218
  opacity: 0;
212
219
  transform: scale(0);
213
220
  }
221
+
214
222
  25% {
215
223
  opacity: 1;
216
224
  }
225
+
217
226
  100% {
218
227
  opacity: 0;
219
228
  transform: scale(2);
@@ -248,146 +257,165 @@ a[matcha-button] {
248
257
  disabled: getDisabled,
249
258
  );
250
259
 
251
- button[matcha-button],
252
- a[matcha-button] {
253
- &:not([color]) .ripple {
254
- background: getForegroundAlpha($theme)
260
+ button[matcha-button],
261
+ a[matcha-button] {
262
+ &:not([color]) .ripple {
263
+ background: getForegroundAlpha($theme)
264
+ }
265
+
266
+ @each $colorName, $colorFn in $color-functions {
267
+
268
+ // Background do ripple para outline e basic
269
+ &[color="#{'' + $colorName}"][outline]:not([outline="false"]) .ripple,
270
+ &[color="#{'' + $colorName}"][basic]:not([basic="false"]) .ripple {
271
+ background: call(#{$colorFn}Alpha, $theme)
255
272
  }
256
273
 
257
- @each $colorName, $colorFn in $color-functions {
258
- // Background do ripple para outline e basic
259
- &[color="#{'' + $colorName}"][outline]:not([outline="false"]) .ripple,
260
- &[color="#{'' + $colorName}"][basic]:not([basic="false"]) .ripple {
261
- background: call(#{$colorFn}Alpha, $theme)
262
- }
263
- // Background e color do botão para alpha
264
- &[color="#{'' + $colorName}"][alpha]:not([alpha="false"]){
265
- background: call(#{$colorFn}Alpha, $theme);
266
- color: call(#{$colorFn}, $theme);
267
-
268
- // Divider dentro do botão para alpha
269
- matcha-divider {
270
- .border-color-disabled {
271
- border-color: call(#{$colorFn}, $theme) !important;
272
- opacity: 0.3 !important;
273
- }
274
+ // Background e color do botão para alpha
275
+ &[color="#{'' + $colorName}"][alpha]:not([alpha="false"]) {
276
+ background: call(#{$colorFn}Alpha, $theme);
277
+ color: call(#{$colorFn}, $theme);
278
+
279
+ // Divider dentro do botão para alpha
280
+ matcha-divider {
281
+ .border-color-disabled {
282
+ border-color: call(#{$colorFn}, $theme) !important;
283
+ opacity: 0.3 !important;
274
284
  }
275
285
  }
276
- // Color do botão para outline, link e basic
277
- &[color="#{'' + $colorName}"][outline]:not([outline="false"]),
278
- &[color="#{'' + $colorName}"][link]:not([link="false"]),
279
- &[color="#{'' + $colorName}"][basic]:not([basic="false"]) {
280
- color: call(#{$colorFn}, $theme);
281
- // Divider dentro do botão para outline, link e basic
282
- matcha-divider {
283
- .border-color-disabled {
284
- border-color: call(#{$colorFn}, $theme) !important;
285
- opacity: 0.3 !important;
286
- }
286
+ }
287
+
288
+ // Color do botão para outline, link e basic
289
+ &[color="#{'' + $colorName}"][outline]:not([outline="false"]),
290
+ &[color="#{'' + $colorName}"][link]:not([link="false"]),
291
+ &[color="#{'' + $colorName}"][basic]:not([basic="false"]) {
292
+ color: call(#{$colorFn}, $theme);
293
+
294
+ // Divider dentro do botão para outline, link e basic
295
+ matcha-divider {
296
+ .border-color-disabled {
297
+ border-color: call(#{$colorFn}, $theme) !important;
298
+ opacity: 0.3 !important;
287
299
  }
288
300
  }
301
+ }
302
+
303
+ // Background e color do botão para default
304
+ &[color="#{'' + $colorName}"] {
305
+ background: call(#{$colorFn}, $theme);
306
+ color: call(#{$colorFn}Contrast, $theme);
289
307
 
290
- // Background e color do botão para default
291
- &[color="#{'' + $colorName}"]{
292
- background: call(#{$colorFn}, $theme);
293
- color: call(#{$colorFn}Contrast, $theme);
294
-
295
- // Divider dentro do botão para default
296
- matcha-divider {
297
- .border-color-disabled {
298
- border-color: call(#{$colorFn}Contrast, $theme) !important;
299
- opacity: 0.3 !important;
300
- }
308
+ // Divider dentro do botão para default
309
+ matcha-divider {
310
+ .border-color-disabled {
311
+ border-color: call(#{$colorFn}Contrast, $theme) !important;
312
+ opacity: 0.3 !important;
301
313
  }
302
314
  }
303
- // Ripple dentro do botão para default
304
- &[color="#{'' + $colorName}"] .ripple{background: call(#{$colorFn}ContrastAlpha, $theme)}
315
+ }
305
316
 
317
+ // Ripple dentro do botão para default
318
+ &[color="#{'' + $colorName}"] .ripple {
319
+ background: call(#{$colorFn}ContrastAlpha, $theme)
320
+ }
306
321
 
307
- &[disabled],
308
- &[disabled]:not([disabled="false"]),
309
- &[disabled="true"] {
310
- &[solid],
311
- &[solid]:not([solid="false"]),
312
- &[solid="true"]{
313
- @include _disabled-solid-button($theme);
314
- }
315
- &[outline],
316
- &[outline]:not([outline="false"]),
317
- &[outline="true"]{
318
- @include _disabled-outline-button($theme);
319
- }
320
- &[basic],
321
- &[basic]:not([basic="false"]),
322
- &[basic="true"]{
323
- @include _disabled-basic-button($theme);
324
- }
325
- &[alpha],
326
- &[alpha]:not([alpha="false"]),
327
- &[alpha="true"]{
328
- @include _disabled-alpha-button($theme);
329
- }
330
- &[link],
331
- &[link]:not([link="false"]),
332
- &[link="true"]{
333
- @include _disabled-link-button($theme);
334
- }
322
+
323
+ &[disabled],
324
+ &[disabled]:not([disabled="false"]),
325
+ &[disabled="true"] {
326
+
327
+ &[solid],
328
+ &[solid]:not([solid="false"]),
329
+ &[solid="true"] {
330
+ @include _disabled-solid-button($theme);
331
+ }
332
+
333
+ &[outline],
334
+ &[outline]:not([outline="false"]),
335
+ &[outline="true"] {
336
+ @include _disabled-outline-button($theme);
337
+ }
338
+
339
+ &[basic],
340
+ &[basic]:not([basic="false"]),
341
+ &[basic="true"] {
342
+ @include _disabled-basic-button($theme);
343
+ }
344
+
345
+ &[alpha],
346
+ &[alpha]:not([alpha="false"]),
347
+ &[alpha="true"] {
348
+ @include _disabled-alpha-button($theme);
349
+ }
350
+
351
+ &[link],
352
+ &[link]:not([link="false"]),
353
+ &[link="true"] {
354
+ @include _disabled-link-button($theme);
335
355
  }
336
356
  }
337
357
  }
358
+ }
359
+
360
+ button[matcha-button],
361
+ a[matcha-button] {
362
+ border: 0px solid currentColor;
363
+
364
+ &[disabled] {
365
+ background-color: getDisabled($theme);
366
+ color: getDisabledBgContrast($theme);
367
+ border-color: getDisabled($theme);
368
+ }
338
369
 
339
- button[matcha-button],
340
- a[matcha-button] {
370
+ &[outline]:not([outline="false"]) {
341
371
  border: 0px solid currentColor;
372
+ background: transparent;
373
+
374
+ &:not([color]) {
375
+ border-color: getForeground($theme);
376
+ color: getForeground($theme);
377
+ }
342
378
 
343
379
  &[disabled] {
344
- background-color: getDisabled($theme);
345
- color: getDisabledBgContrast($theme);
346
- border-color: getDisabled($theme);
380
+ box-shadow: 0 0 0 2px getDisabledContrast($theme);
381
+ color: getDisabledContrast($theme) !important;
382
+ }
383
+ }
384
+
385
+ &[basic]:not([basic="false"]) {
386
+ background: getSurface($theme);
387
+
388
+ &:not([color]) {
389
+ color: getForeground($theme);
347
390
  }
348
391
 
349
- &[outline]:not([outline="false"]) {
350
- border: 0px solid currentColor;
392
+ &[disabled] {
393
+ color: getDisabledContrast($theme) !important;
394
+ }
395
+
396
+ &[alpha]:not([alpha="false"]) {
351
397
  background: transparent;
352
- &:not([color]){
353
- border-color: getForeground($theme);
354
- color: getForeground($theme);
355
- }
356
- &[disabled] {
357
- box-shadow: 0 0 0 2px getDisabledContrast($theme);
358
- color: getDisabledContrast($theme) !important;
359
- }
360
398
  }
399
+ }
361
400
 
362
- &[basic]:not([basic="false"]){
363
- background: getSurface($theme);
364
- &:not([color]){
365
- color: getForeground($theme);
366
- }
367
- &[disabled] {
368
- color: getDisabledContrast($theme) !important;
369
- }
370
- &[alpha]:not([alpha="false"]){
371
- background:transparent;
372
- }
401
+ &[alpha]:not([alpha="false"]) {
402
+ &:not([color]) {
403
+ background: getForegroundAlpha($theme);
404
+ border-color: getForeground($theme);
405
+ color: getForeground($theme);
373
406
  }
374
407
 
375
- &[alpha]:not([alpha="false"]){
376
- &:not([color]){
377
- background: getForegroundAlpha($theme);
378
- border-color: getForeground($theme);
379
- color: getForeground($theme);
380
- }
381
- &[disabled] {
382
- background: getDisabledAlpha($theme);
383
- }
408
+ &[disabled] {
409
+ background: getDisabledAlpha($theme);
384
410
  }
411
+ }
385
412
 
386
- &[link]:not([link="false"]) {
387
- background-color: transparent;
388
- &:not([color]){
389
- color: getForeground($theme);
390
- }
413
+ &[link]:not([link="false"]) {
414
+ background-color: transparent;
415
+
416
+ &:not([color]) {
417
+ color: getForeground($theme);
391
418
  }
392
419
  }
393
420
  }
421
+ }
package/components/matcha-menu.scss CHANGED
@@ -1,68 +1,37 @@
1
1
  @mixin matcha-menu-theme($theme) {
2
- $primary: map-get($theme, primary);
3
- $accent: map-get($theme, accent);
4
- $warn: map-get($theme, warn);
5
- $background: map-get($theme, background);
6
- $foreground: map-get($theme, foreground);
2
+ $primary: map-get($theme, primary);
3
+ $accent: map-get($theme, accent);
4
+ $warn: map-get($theme, warn);
5
+ $background: map-get($theme, background);
6
+ $foreground: map-get($theme, foreground);
7
7
 
8
- .matcha-menu{
9
- position: relative;
8
+ .matcha-menu-content {
9
+ display: flex;
10
+ flex-direction: column;
11
+ padding: 8px 0;
10
12
 
11
- .matcha-menu-trigger{
12
- line-height: 48px;
13
- }
14
- .menu {
15
- position: absolute;
16
- background: white;
17
- display: none;
18
- flex-direction: column;
19
- z-index: 1000;
20
- }
13
+ button,
14
+ [matcha-button] {
15
+ width: 100%;
16
+ text-align: left;
17
+ justify-content: flex-start;
18
+ border-radius: 0;
19
+ padding: 8px 16px;
20
+ height: 40px;
21
+ font-weight: 500;
21
22
 
22
- .menu.show {
23
- display: flex;
24
- left: 100%;
25
- }
23
+ &:hover {
24
+ filter: brightness(0.98);
25
+ }
26
26
 
27
- .menu-item {
28
- position: relative;
29
- button{
30
- background: white;
31
- border: none;
32
- padding: 0;
33
- cursor: pointer;
34
- font-size: 16px;
35
- font-weight: 700;
36
- height: 48px;
37
- appearance: auto;
38
- text-rendering: auto;
39
- letter-spacing: normal;
40
- word-spacing: normal;
41
- line-height: normal;
42
- text-transform: none;
43
- text-indent: 0px;
44
- text-shadow: none;
45
- display: inline-block;
46
- text-align: center;
47
- align-items: flex-start;
48
- cursor: default;
49
- box-sizing: border-box;
50
- *{
51
- pointer-events: none;
52
- }
53
- }
54
- }
27
+ &:active {
28
+ filter: brightness(0.96);
29
+ }
55
30
 
56
- .submenu {
57
- position: absolute;
58
- display: none;
59
- }
60
-
61
- .menu-item:hover > .submenu {
62
- display: block;
63
- z-index: 1001; /* Ensure submenus appear above other content */
64
- position:relative;
65
- top: -48px;
66
- }
31
+ matcha-icon,
32
+ .matcha-icon {
33
+ margin-right: 12px;
34
+ }
67
35
  }
68
- }
36
+ }
37
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "matcha-theme",
3
- "version": "20.174.0",
3
+ "version": "20.179.0",
4
4
  "description": "Themes for matcha-design-system",
5
5
  "main": "main.scss",
6
6
  "scripts": {