matcha-theme 19.0.1 → 19.0.2

package/components/matcha-form-field.scss

@@ -0,0 +1,66 @@
+@mixin matcha-form-field($theme) {
+    $primary: map-get($theme, primary);
+    $accent: map-get($theme, accent);
+    $warn: map-get($theme, warn);
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    .matcha-form-field {
+        input[type="text"],
+        input[type="email"],
+        input[type="tel"],
+        input[type="url"],
+        input[type="password"],
+        input[type="number"],
+        input[type="search"],
+        textarea {
+            background-color: map-get($foreground, label);
+            color: var(--fg);
+            border: 0px solid #ccc;
+        }
+
+        input[type="text"]:focus,
+        input[type="email"]:focus,
+        input[type="tel"]:focus,
+        input[type="url"]:focus,
+        input[type="password"]:focus,
+        input[type="number"]:focus,
+        input[type="search"]:focus,
+        textarea:focus {
+            border-color: #999;
+            outline: none;
+        }
+    }
+}
+
+.matcha-form-field {
+    input[type="text"],
+    input[type="email"],
+    input[type="tel"],
+    input[type="url"],
+    input[type="password"],
+    input[type="number"],
+    input[type="search"],
+    textarea {
+        width: 100%;
+        padding: 12px 24px;
+        border-radius: 16px;
+        outline: none;
+        box-shadow: none;
+        transition: border-color 0.3s ease;
+        font-size: 20px;
+        min-height: 48px; /* Mantém a altura dos inputs de texto */
+        resize: none;
+    }
+
+    input[type="text"]:focus,
+    input[type="email"]:focus,
+    input[type="tel"]:focus,
+    input[type="url"]:focus,
+    input[type="password"]:focus,
+    input[type="number"]:focus,
+    input[type="search"]:focus,
+    textarea:focus {
+        outline: none;
+    }
+}

package/main.scss

@@ -34,6 +34,7 @@
 @import "./components/matcha-scrollbox-shadow.scss"; // matcha-scrollbox-shadow-theme($theme)
 @import "./components/matcha-table.scss"; // matcha-table-theme($theme)
 @import "./components/matcha-tooltip.scss"; // matcha-tooltip-theme($theme)
+@import "./components/matcha-form-field.scss";
 
 // VENDORS
 @import "./vendors/angular-editor.scss";
@@ -129,4 +130,5 @@
     @include matcha-tooltip-theme($theme);
     @include matcha-header-theme($theme);
     @include matcha-menu-theme($theme);
+    @include matcha-form-field($theme);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "matcha-theme",
-    "version": "19.0.1",
+    "version": "19.0.2",
     "description": "Themes for matcha-design-system",
     "main": "main.scss",
     "scripts": {

package/tokens/_color-tokens.scss

@@ -281,22 +281,22 @@ $color-base-brown-a400: $color-base-brown-400;
 $color-base-brown-a700: $color-base-brown-700;
 $color-base-brown-200-alpha: #bcaaa433;
 $color-base-brown-500-alpha: #79554833;
-$color-base-grey-50: #fafafa;
-$color-base-grey-100: #f5f5f5;
-$color-base-grey-200: #eeeeee;
-$color-base-grey-300: #e0e0e0;
-$color-base-grey-400: #bdbdbd;
-$color-base-grey-500: #9e9e9e;
-$color-base-grey-600: #757575;
-$color-base-grey-700: #616161;
-$color-base-grey-800: #464646;
-$color-base-grey-900: #262626;
-$color-base-grey-a100: $color-base-grey-100;
-$color-base-grey-a200: $color-base-grey-200;
-$color-base-grey-a400: $color-base-grey-400;
-$color-base-grey-a700: $color-base-grey-700;
-$color-base-grey-200-alpha: #eeeeee33;
-$color-base-grey-500-alpha: #9e9e9e33;
+$color-base-grey-50: #EFF1F2;
+$color-base-grey-100: #DEE3E6;
+$color-base-grey-200: #C8D0D5;
+$color-base-grey-300: #B2BDC4;
+$color-base-grey-400: #A2AEB7;
+$color-base-grey-500: #91A0AA;
+$color-base-grey-600: #7B8891;
+$color-base-grey-700: #667077;
+$color-base-grey-800: #495055;
+$color-base-grey-900: #33383B;
+$color-base-grey-a100: #FFFFFF;
+$color-base-grey-a200: #E7EDF1;
+$color-base-grey-a400: #C0CEDA;
+$color-base-grey-a700: #98AFC2;
+$color-base-grey-200-alpha: #C8D0D533;
+$color-base-grey-500-alpha: #91A0AA33;
 $color-base-blue-grey-50: #f5f7fa;
 $color-base-blue-grey-100: #d4dde3;
 $color-base-blue-grey-200: #b5c1c8;
@@ -978,35 +978,35 @@ $mat-brown: (
 $brown: $mat-brown;
 
 $mat-grey: (
-    50: $color-base-grey-50,
-    100: $color-base-grey-100,
-    200: $color-base-grey-200,
-    300: $color-base-grey-300,
-    400: $color-base-grey-400,
-    500: $color-base-grey-500,
-    600: $color-base-grey-600,
-    700: $color-base-grey-700,
-    800: $color-base-grey-800,
-    900: $color-base-grey-900,
-    A100: $color-base-grey-a100,
-    A200: $color-base-grey-a200,
-    A400: $color-base-grey-a400,
-    A700: $color-base-grey-a700,
-    contrast: (
-        50: $dark-primary-text,
-        100: $dark-primary-text,
-        200: $dark-primary-text,
-        300: $dark-primary-text,
-        400: $dark-primary-text,
-        500: $dark-primary-text,
-        600: $light-primary-text,
-        700: $light-primary-text,
-        800: $light-primary-text,
-        900: $light-primary-text,
-        A100: $dark-primary-text,
-        A200: $dark-primary-text,
-        A400: $dark-primary-text,
-        A700: $light-primary-text
+    50 : $color-base-grey-50,
+	100 : $color-base-grey-100,
+	200 : $color-base-grey-200,
+	300 : $color-base-grey-300,
+	400 : $color-base-grey-400,
+	500 : $color-base-grey-500,
+	600 : $color-base-grey-600,
+	700 : $color-base-grey-700,
+	800 : $color-base-grey-800,
+	900 : $color-base-grey-900,
+	A100 : $color-base-grey-a100,
+	A200 : $color-base-grey-a200,
+	A400 : $color-base-grey-a400,
+	A700 : $color-base-grey-a700,
+	contrast: (
+		50 : $dark-primary-text,
+		100 : $dark-primary-text,
+		200 : $dark-primary-text,
+		300 : $dark-primary-text,
+		400 : $dark-primary-text,
+		500 : $dark-primary-text,
+		600 : $dark-primary-text,
+		700 : $light-primary-text,
+		800 : $light-primary-text,
+		900 : $light-primary-text,
+		A100 : $dark-primary-text,
+		A200 : $dark-primary-text,
+		A400 : $dark-primary-text,
+		A700 : $dark-primary-text,
     )
 );
 // Alias for alternate spelling.