matcha-theme 19.0.1 → 19.0.3

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 (5) hide show
  1. package/components/matcha-buttons.scss +1 -1
  2. package/components/matcha-form-field.scss +66 -0
  3. package/main.scss +2 -0
  4. package/package.json +1 -1
  5. package/tokens/_color-tokens.scss +45 -45
package/components/matcha-buttons.scss CHANGED
@@ -155,7 +155,7 @@ a[matcha-button] {
155
155
  &[link]:not([link="false"]) {
156
156
  text-transform: initial;
157
157
  letter-spacing: 0;
158
- text-decoration: underline;
158
+ text-decoration: none;
159
159
  padding: 0;
160
160
  }
161
161
 
package/components/matcha-form-field.scss ADDED
@@ -0,0 +1,66 @@
1
+ @mixin matcha-form-field($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);
7
+
8
+ .matcha-form-field {
9
+ input[type="text"],
10
+ input[type="email"],
11
+ input[type="tel"],
12
+ input[type="url"],
13
+ input[type="password"],
14
+ input[type="number"],
15
+ input[type="search"],
16
+ textarea {
17
+ background-color: map-get($foreground, label);
18
+ color: var(--fg);
19
+ border: 0px solid #ccc;
20
+ }
21
+
22
+ input[type="text"]:focus,
23
+ input[type="email"]:focus,
24
+ input[type="tel"]:focus,
25
+ input[type="url"]:focus,
26
+ input[type="password"]:focus,
27
+ input[type="number"]:focus,
28
+ input[type="search"]:focus,
29
+ textarea:focus {
30
+ border-color: #999;
31
+ outline: none;
32
+ }
33
+ }
34
+ }
35
+
36
+ .matcha-form-field {
37
+ input[type="text"],
38
+ input[type="email"],
39
+ input[type="tel"],
40
+ input[type="url"],
41
+ input[type="password"],
42
+ input[type="number"],
43
+ input[type="search"],
44
+ textarea {
45
+ width: 100%;
46
+ padding: 12px 24px;
47
+ border-radius: 16px;
48
+ outline: none;
49
+ box-shadow: none;
50
+ transition: border-color 0.3s ease;
51
+ font-size: 20px;
52
+ min-height: 48px; /* Mantém a altura dos inputs de texto */
53
+ resize: none;
54
+ }
55
+
56
+ input[type="text"]:focus,
57
+ input[type="email"]:focus,
58
+ input[type="tel"]:focus,
59
+ input[type="url"]:focus,
60
+ input[type="password"]:focus,
61
+ input[type="number"]:focus,
62
+ input[type="search"]:focus,
63
+ textarea:focus {
64
+ outline: none;
65
+ }
66
+ }
package/main.scss CHANGED
@@ -34,6 +34,7 @@
34
34
  @import "./components/matcha-scrollbox-shadow.scss"; // matcha-scrollbox-shadow-theme($theme)
35
35
  @import "./components/matcha-table.scss"; // matcha-table-theme($theme)
36
36
  @import "./components/matcha-tooltip.scss"; // matcha-tooltip-theme($theme)
37
+ @import "./components/matcha-form-field.scss";
37
38
 
38
39
  // VENDORS
39
40
  @import "./vendors/angular-editor.scss";
@@ -129,4 +130,5 @@
129
130
  @include matcha-tooltip-theme($theme);
130
131
  @include matcha-header-theme($theme);
131
132
  @include matcha-menu-theme($theme);
133
+ @include matcha-form-field($theme);
132
134
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "matcha-theme",
3
- "version": "19.0.1",
3
+ "version": "19.0.3",
4
4
  "description": "Themes for matcha-design-system",
5
5
  "main": "main.scss",
6
6
  "scripts": {
package/tokens/_color-tokens.scss CHANGED
@@ -281,22 +281,22 @@ $color-base-brown-a400: $color-base-brown-400;
281
281
  $color-base-brown-a700: $color-base-brown-700;
282
282
  $color-base-brown-200-alpha: #bcaaa433;
283
283
  $color-base-brown-500-alpha: #79554833;
284
- $color-base-grey-50: #fafafa;
285
- $color-base-grey-100: #f5f5f5;
286
- $color-base-grey-200: #eeeeee;
287
- $color-base-grey-300: #e0e0e0;
288
- $color-base-grey-400: #bdbdbd;
289
- $color-base-grey-500: #9e9e9e;
290
- $color-base-grey-600: #757575;
291
- $color-base-grey-700: #616161;
292
- $color-base-grey-800: #464646;
293
- $color-base-grey-900: #262626;
294
- $color-base-grey-a100: $color-base-grey-100;
295
- $color-base-grey-a200: $color-base-grey-200;
296
- $color-base-grey-a400: $color-base-grey-400;
297
- $color-base-grey-a700: $color-base-grey-700;
298
- $color-base-grey-200-alpha: #eeeeee33;
299
- $color-base-grey-500-alpha: #9e9e9e33;
284
+ $color-base-grey-50: #EFF1F2;
285
+ $color-base-grey-100: #DEE3E6;
286
+ $color-base-grey-200: #C8D0D5;
287
+ $color-base-grey-300: #B2BDC4;
288
+ $color-base-grey-400: #A2AEB7;
289
+ $color-base-grey-500: #91A0AA;
290
+ $color-base-grey-600: #7B8891;
291
+ $color-base-grey-700: #667077;
292
+ $color-base-grey-800: #495055;
293
+ $color-base-grey-900: #33383B;
294
+ $color-base-grey-a100: #FFFFFF;
295
+ $color-base-grey-a200: #E7EDF1;
296
+ $color-base-grey-a400: #C0CEDA;
297
+ $color-base-grey-a700: #98AFC2;
298
+ $color-base-grey-200-alpha: #C8D0D533;
299
+ $color-base-grey-500-alpha: #91A0AA33;
300
300
  $color-base-blue-grey-50: #f5f7fa;
301
301
  $color-base-blue-grey-100: #d4dde3;
302
302
  $color-base-blue-grey-200: #b5c1c8;
@@ -978,35 +978,35 @@ $mat-brown: (
978
978
  $brown: $mat-brown;
979
979
 
980
980
  $mat-grey: (
981
- 50: $color-base-grey-50,
982
- 100: $color-base-grey-100,
983
- 200: $color-base-grey-200,
984
- 300: $color-base-grey-300,
985
- 400: $color-base-grey-400,
986
- 500: $color-base-grey-500,
987
- 600: $color-base-grey-600,
988
- 700: $color-base-grey-700,
989
- 800: $color-base-grey-800,
990
- 900: $color-base-grey-900,
991
- A100: $color-base-grey-a100,
992
- A200: $color-base-grey-a200,
993
- A400: $color-base-grey-a400,
994
- A700: $color-base-grey-a700,
995
- contrast: (
996
- 50: $dark-primary-text,
997
- 100: $dark-primary-text,
998
- 200: $dark-primary-text,
999
- 300: $dark-primary-text,
1000
- 400: $dark-primary-text,
1001
- 500: $dark-primary-text,
1002
- 600: $light-primary-text,
1003
- 700: $light-primary-text,
1004
- 800: $light-primary-text,
1005
- 900: $light-primary-text,
1006
- A100: $dark-primary-text,
1007
- A200: $dark-primary-text,
1008
- A400: $dark-primary-text,
1009
- A700: $light-primary-text
981
+ 50 : $color-base-grey-50,
982
+ 100 : $color-base-grey-100,
983
+ 200 : $color-base-grey-200,
984
+ 300 : $color-base-grey-300,
985
+ 400 : $color-base-grey-400,
986
+ 500 : $color-base-grey-500,
987
+ 600 : $color-base-grey-600,
988
+ 700 : $color-base-grey-700,
989
+ 800 : $color-base-grey-800,
990
+ 900 : $color-base-grey-900,
991
+ A100 : $color-base-grey-a100,
992
+ A200 : $color-base-grey-a200,
993
+ A400 : $color-base-grey-a400,
994
+ A700 : $color-base-grey-a700,
995
+ contrast: (
996
+ 50 : $dark-primary-text,
997
+ 100 : $dark-primary-text,
998
+ 200 : $dark-primary-text,
999
+ 300 : $dark-primary-text,
1000
+ 400 : $dark-primary-text,
1001
+ 500 : $dark-primary-text,
1002
+ 600 : $dark-primary-text,
1003
+ 700 : $light-primary-text,
1004
+ 800 : $light-primary-text,
1005
+ 900 : $light-primary-text,
1006
+ A100 : $dark-primary-text,
1007
+ A200 : $dark-primary-text,
1008
+ A400 : $dark-primary-text,
1009
+ A700 : $dark-primary-text,
1010
1010
  )
1011
1011
  );
1012
1012
  // Alias for alternate spelling.