matcha-theme 20.3.0 → 20.5.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 (7) hide show
  1. package/components/matcha-button-toggle.scss +5 -5
  2. package/components/matcha-buttons.scss +8 -8
  3. package/components/matcha-cards.scss +5 -5
  4. package/components/matcha-form-field.scss +2 -1
  5. package/components/matcha-tabs.scss +4 -4
  6. package/package.json +1 -1
  7. package/tokens/_color-tokens.scss +16 -16
package/components/matcha-button-toggle.scss CHANGED
@@ -2,7 +2,7 @@
2
2
  &:not([inactivetype]),
3
3
  &[inactivetype="solid"]{
4
4
  @each $colorName, $colorFn in $color-functions {
5
- &[inactivecolor="#{$colorName}"]{
5
+ &[inactivecolor="#{'' + $colorName}"]{
6
6
  .button-group{
7
7
  button[matcha-button],
8
8
  a[matcha-button]{
@@ -36,7 +36,7 @@
36
36
  @mixin _colorize-inactive-type-basic-button-toggle-item($theme, $color-functions) {
37
37
  &[inactivetype="basic"]{
38
38
  @each $colorName, $colorFn in $color-functions {
39
- &[inactivecolor="#{$colorName}"]{
39
+ &[inactivecolor="#{'' + $colorName}"]{
40
40
  .button-group{
41
41
  button[matcha-button],
42
42
  a[matcha-button]{
@@ -72,7 +72,7 @@
72
72
  //disabled false
73
73
  &:not([disabled="true"]){
74
74
  @each $colorName, $colorFn in $color-functions {
75
- &[inactivecolor="#{$colorName}"]{
75
+ &[inactivecolor="#{'' + $colorName}"]{
76
76
  .button-group{
77
77
  button[matcha-button],
78
78
  a[matcha-button]{
@@ -110,7 +110,7 @@
110
110
  @mixin _colorize-inactive-type-alpha-button-toggle-item($theme, $color-functions) {
111
111
  &[inactivetype="alpha"]{
112
112
  @each $colorName, $colorFn in $color-functions {
113
- &[inactivecolor="#{$colorName}"]{
113
+ &[inactivecolor="#{'' + $colorName}"]{
114
114
  .button-group{
115
115
  button[matcha-button],
116
116
  a[matcha-button]{
@@ -146,7 +146,7 @@
146
146
 
147
147
  &[inactivetype="link"]{
148
148
  @each $colorName, $colorFn in $color-functions {
149
- &[inactivecolor="#{$colorName}"]{
149
+ &[inactivecolor="#{'' + $colorName}"]{
150
150
  .button-group{
151
151
  button[matcha-button],
152
152
  a[matcha-button]{
package/components/matcha-buttons.scss CHANGED
@@ -255,24 +255,24 @@ a[matcha-button] {
255
255
  }
256
256
 
257
257
  @each $colorName, $colorFn in $color-functions {
258
- &[color="#{$colorName}"][outline]:not([outline="false"]) .ripple,
259
- &[color="#{$colorName}"][basic]:not([basic="false"]) .ripple {
258
+ &[color="#{'' + $colorName}"][outline]:not([outline="false"]) .ripple,
259
+ &[color="#{'' + $colorName}"][basic]:not([basic="false"]) .ripple {
260
260
  background: call(#{$colorFn}Alpha, $theme)
261
261
  }
262
- &[color="#{$colorName}"][alpha]:not([alpha="false"]){
262
+ &[color="#{'' + $colorName}"][alpha]:not([alpha="false"]){
263
263
  background: call(#{$colorFn}Alpha, $theme);
264
264
  color: call(#{$colorFn}, $theme);
265
265
  }
266
- &[color="#{$colorName}"][outline]:not([outline="false"]),
267
- &[color="#{$colorName}"][link]:not([link="false"]),
268
- &[color="#{$colorName}"][basic]:not([basic="false"]) {
266
+ &[color="#{'' + $colorName}"][outline]:not([outline="false"]),
267
+ &[color="#{'' + $colorName}"][link]:not([link="false"]),
268
+ &[color="#{'' + $colorName}"][basic]:not([basic="false"]) {
269
269
  color: call(#{$colorFn}, $theme);
270
270
  }
271
- &[color="#{$colorName}"]{
271
+ &[color="#{'' + $colorName}"]{
272
272
  background: call(#{$colorFn}, $theme);
273
273
  color: call(#{$colorFn}Contrast, $theme);
274
274
  }
275
- &[color="#{$colorName}"] .ripple{background: call(#{$colorFn}ContrastAlpha, $theme)}
275
+ &[color="#{'' + $colorName}"] .ripple{background: call(#{$colorFn}ContrastAlpha, $theme)}
276
276
 
277
277
  &[disabled],
278
278
  &[disabled]:not([disabled="false"]),
package/components/matcha-cards.scss CHANGED
@@ -29,17 +29,17 @@
29
29
  .matcha-card,
30
30
  .matcha-card-flat {
31
31
  @each $colorName, $colorFn in $color-functions {
32
- &[color="#{$colorName}"][tint]:not([tint="false"]) {
32
+ &[color="#{'' + $colorName}"][tint]:not([tint="false"]) {
33
33
  background: call(#{$colorFn}Alpha, $theme);
34
34
  color: call(#{$colorFn}, $theme);
35
35
  }
36
- &[color="#{$colorName}"][outline]:not([outline="false"]),
37
- &[color="#{$colorName}"][link]:not([link="false"]),
38
- &[color="#{$colorName}"][basic]:not([basic="false"]) {
36
+ &[color="#{'' + $colorName}"][outline]:not([outline="false"]),
37
+ &[color="#{'' + $colorName}"][link]:not([link="false"]),
38
+ &[color="#{'' + $colorName}"][basic]:not([basic="false"]) {
39
39
  color: call(#{$colorFn}, $theme);
40
40
  }
41
41
 
42
- &[color="#{$colorName}"] {
42
+ &[color="#{'' + $colorName}"] {
43
43
  background: call(#{$colorFn}, $theme);
44
44
  color: call(#{$colorFn}Contrast, $theme);
45
45
  &[alpha]:not([alpha="false"]) {
package/components/matcha-form-field.scss CHANGED
@@ -12,6 +12,7 @@
12
12
  textarea {
13
13
  min-height: px-to-rem(20px); /* Mantém a altura dos inputs de texto */
14
14
  line-height: px-to-rem($line-height);
15
+ padding: 0;
15
16
  }
16
17
  }
17
18
  }
@@ -85,7 +86,7 @@
85
86
  input[type="time"]:focus,
86
87
  textarea:focus {
87
88
  outline: none;
88
- }
89
+ }
89
90
  }
90
91
 
91
92
  matcha-form-field{
package/components/matcha-tabs.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @mixin _colorize-inactive-type-basic($theme, $color-functions) {
2
2
  &[inactivetype="basic"]{
3
3
  @each $colorName, $colorFn in $color-functions {
4
- &[inactivecolor="#{$colorName}"]{
4
+ &[inactivecolor="#{'' + $colorName}"]{
5
5
  .button-group matcha-tab-item{
6
6
  button[matcha-button],
7
7
  a[matcha-button]{
@@ -37,7 +37,7 @@
37
37
  //disabled false
38
38
  &:not([disabled="true"]){
39
39
  @each $colorName, $colorFn in $color-functions {
40
- &[inactivecolor="#{$colorName}"]{
40
+ &[inactivecolor="#{'' + $colorName}"]{
41
41
  .button-group matcha-tab-item{
42
42
  button[matcha-button],
43
43
  a[matcha-button]{
@@ -75,7 +75,7 @@
75
75
  @mixin _colorize-inactive-type-alpha($theme, $color-functions) {
76
76
  &[inactivetype="alpha"]{
77
77
  @each $colorName, $colorFn in $color-functions {
78
- &[inactivecolor="#{$colorName}"]{
78
+ &[inactivecolor="#{'' + $colorName}"]{
79
79
  .button-group matcha-tab-item{
80
80
  button[matcha-button],
81
81
  a[matcha-button]{
@@ -111,7 +111,7 @@
111
111
 
112
112
  &[inactivetype="link"]{
113
113
  @each $colorName, $colorFn in $color-functions {
114
- &[inactivecolor="#{$colorName}"]{
114
+ &[inactivecolor="#{'' + $colorName}"]{
115
115
  .button-group matcha-tab-item{
116
116
  button[matcha-button],
117
117
  a[matcha-button]{
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "matcha-theme",
3
- "version": "20.3.0",
3
+ "version": "20.5.0",
4
4
  "description": "Themes for matcha-design-system",
5
5
  "main": "main.scss",
6
6
  "scripts": {
package/tokens/_color-tokens.scss CHANGED
@@ -158,20 +158,20 @@ $color-base-green-a200: #69f0ae;
158
158
  $color-base-green-a400: #2cff5b;
159
159
  $color-base-green-a700: #13ff48;
160
160
 
161
- $color-base-light-green-50: #f1f8e9;
162
- $color-base-light-green-100: #dcedc8;
163
- $color-base-light-green-200: #c5e1a5;
164
- $color-base-light-green-300: #aed581;
165
- $color-base-light-green-400: #9ccc65;
166
- $color-base-light-green-500: #8bc34a;
167
- $color-base-light-green-600: #7cb342;
168
- $color-base-light-green-700: #689f38;
169
- $color-base-light-green-800: #558b2f;
170
- $color-base-light-green-900: #33691e;
171
- $color-base-light-green-a100: #ccff90;
172
- $color-base-light-green-a200: #b2ff59;
173
- $color-base-light-green-a400: #76ff03;
174
- $color-base-light-green-a700: #64dd17;
161
+ $color-base-light-green-50: #E9F9DF;
162
+ $color-base-light-green-100: #D4F4C0;
163
+ $color-base-light-green-200: #B7ED96;
164
+ $color-base-light-green-300: #9AE56B;
165
+ $color-base-light-green-400: #84E04C;
166
+ $color-base-light-green-500: #6EDA2C;
167
+ $color-base-light-green-600: #5EB925;
168
+ $color-base-light-green-700: #4D991F;
169
+ $color-base-light-green-800: #376D16;
170
+ $color-base-light-green-900: #274C0F;
171
+ $color-base-light-green-a100: #D4FFBE;
172
+ $color-base-light-green-a200: #B1FF8A;
173
+ $color-base-light-green-a400: #8DFF56;
174
+ $color-base-light-green-a700: #6AFF21;
175
175
 
176
176
  $color-base-lime-50: #f0f7e0;
177
177
  $color-base-lime-100: #dbebb3;
@@ -698,8 +698,8 @@ $mat-light-green: (
698
698
  200: $dark-primary-text,
699
699
  300: $dark-primary-text,
700
700
  400: $dark-primary-text,
701
- 500: $light-primary-text,
702
- 600: $light-primary-text,
701
+ 500: $dark-primary-text,
702
+ 600: $dark-primary-text,
703
703
  700: $light-primary-text,
704
704
  800: $light-primary-text,
705
705
  900: $light-primary-text,