matcha-theme 20.5.0 → 20.7.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 (10) hide show
  1. package/components/matcha-avatar.scss +101 -0
  2. package/components/matcha-button-toggle.scss +5 -5
  3. package/components/matcha-buttons.scss +8 -8
  4. package/components/matcha-cards.scss +5 -5
  5. package/components/matcha-form-field.scss +1 -2
  6. package/components/matcha-radio.scss +1 -0
  7. package/components/matcha-tabs.scss +4 -4
  8. package/main.scss +2 -0
  9. package/package.json +1 -1
  10. package/tokens/_color-tokens.scss +16 -16
package/components/matcha-avatar.scss ADDED
@@ -0,0 +1,101 @@
1
+ // Estilos estruturais do avatar
2
+ .matcha-avatar {
3
+ display: inline-flex;
4
+ align-items: center;
5
+ justify-content: center;
6
+ position: relative;
7
+ overflow: hidden;
8
+
9
+ font-weight: 500;
10
+ user-select: none;
11
+ flex-shrink: 0;
12
+
13
+ // Tamanhos
14
+ &.matcha-avatar-tiny {
15
+ width: 24px;
16
+ height: 24px;
17
+ font-size: 10px;
18
+ line-height: 1;
19
+ }
20
+
21
+ &.matcha-avatar-small {
22
+ width: 40px;
23
+ height: 40px;
24
+ font-size: 14px;
25
+ line-height: 1;
26
+ }
27
+
28
+ &.matcha-avatar-medium {
29
+ width: 56px;
30
+ height: 56px;
31
+ font-size: 20px;
32
+ line-height: 1;
33
+ }
34
+
35
+ &.matcha-avatar-large {
36
+ width: 80px;
37
+ height: 80px;
38
+ font-size: 28px;
39
+ line-height: 1;
40
+ }
41
+
42
+ &.matcha-avatar-huge {
43
+ width: 96px;
44
+ height: 96px;
45
+ font-size: 32px;
46
+ line-height: 1;
47
+ }
48
+
49
+ // Imagem
50
+ .matcha-avatar-image {
51
+ width: 100%;
52
+ height: 100%;
53
+ object-fit: cover;
54
+ border-radius: inherit;
55
+ }
56
+
57
+ // Iniciais
58
+ .matcha-avatar-initials {
59
+ font-weight: 500;
60
+ text-transform: uppercase;
61
+ letter-spacing: 0.5px;
62
+ }
63
+
64
+ // Ícone padrão
65
+ .matcha-avatar-icon {
66
+ width: 100%;
67
+ height: 100%;
68
+ }
69
+
70
+ // Estado desabilitado
71
+ &.color-disabled {
72
+ opacity: 0.6;
73
+ pointer-events: none;
74
+ }
75
+ }
76
+
77
+ // Mixin de tema
78
+ @mixin matcha-avatar-theme($theme) {
79
+ $background: map-get($theme, background);
80
+ $foreground: map-get($theme, foreground);
81
+ $is-dark: map-get($theme, is-dark);
82
+
83
+ .matcha-avatar {
84
+
85
+
86
+ // Ícone padrão
87
+ .matcha-avatar-icon {
88
+ color: map-get($foreground, disabled-text);
89
+ }
90
+
91
+ // Estado desabilitado
92
+ &.color-disabled {
93
+ background-color: map-get($foreground, disabled);
94
+ color: map-get($foreground, disabled-text)!important;
95
+
96
+ .matcha-avatar-icon {
97
+ color: map-get($foreground, disabled-text);
98
+ }
99
+ }
100
+ }
101
+ }
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,7 +12,6 @@
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;
16
15
  }
17
16
  }
18
17
  }
@@ -86,7 +85,7 @@
86
85
  input[type="time"]:focus,
87
86
  textarea:focus {
88
87
  outline: none;
89
- }
88
+ }
90
89
  }
91
90
 
92
91
  matcha-form-field{
package/components/matcha-radio.scss CHANGED
@@ -284,6 +284,7 @@ matcha-radio {
284
284
  width: 18px;
285
285
  height: 18px;
286
286
  padding: 0;
287
+ margin: 0;
287
288
  border-radius: 50%;
288
289
  border-width: 2px;
289
290
  border-style: solid;
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/main.scss CHANGED
@@ -46,6 +46,7 @@
46
46
  @import "./components/matcha-hint-text.scss"; // matcha-hint-theme($theme)
47
47
  @import "./components/matcha-slide-toggle.scss"; // matcha-slide-toggle($theme)
48
48
  @import "./components/matcha-radio.scss"; // matcha-radio($theme)
49
+ @import "./components/matcha-avatar.scss"; // matcha-avatar($theme)
49
50
 
50
51
  @import "./components/matcha-tabs.scss"; // matcha-tabs($theme)
51
52
  @import "./components/matcha-modal.scss"; // matcha-modal($theme)
@@ -156,4 +157,5 @@
156
157
  @include matcha-modal-theme($theme);
157
158
  @include matcha-skeleton-theme($theme);
158
159
  @include matcha-radio($theme);
160
+ @include matcha-avatar-theme($theme);
159
161
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "matcha-theme",
3
- "version": "20.5.0",
3
+ "version": "20.7.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: #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;
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;
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: $dark-primary-text,
702
- 600: $dark-primary-text,
701
+ 500: $light-primary-text,
702
+ 600: $light-primary-text,
703
703
  700: $light-primary-text,
704
704
  800: $light-primary-text,
705
705
  900: $light-primary-text,