From 880e8d178957906246d66fe1155df4869cd5f53a Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 28 Sep 2024 12:38:20 +0300
Subject: [PATCH] Initiated material design preset

---
 apps/showcase/doc/inputtext/IftaLabelDoc.vue  |   8 +-
 apps/showcase/doc/inputtext/InvalidDoc.vue    |  27 ++--
 apps/showcase/pages/inputtext/index.vue       |  12 +-
 .../src/floatlabel/style/FloatLabelStyle.js   |   1 +
 .../src/iftalabel/style/IftaLabelStyle.js     |   1 +
 .../src/presets/aura/floatlabel/index.js      |   3 +-
 .../src/presets/aura/iftalabel/index.js       |   3 +-
 .../src/presets/lara/floatlabel/index.js      |   3 +-
 .../src/presets/lara/iftalabel/index.js       |   3 +-
 .../themes/src/presets/material/base/index.js | 145 +++++++++---------
 .../src/presets/material/floatlabel/index.js  |  18 +--
 .../src/presets/material/iftalabel/index.js   |   5 +-
 packages/themes/src/presets/material/index.js |   6 +-
 .../src/presets/material/inputtext/index.js   |  54 +++++--
 .../src/presets/nora/floatlabel/index.js      |   3 +-
 .../src/presets/nora/iftalabel/index.js       |   3 +-
 16 files changed, 171 insertions(+), 124 deletions(-)

diff --git a/apps/showcase/doc/inputtext/IftaLabelDoc.vue b/apps/showcase/doc/inputtext/IftaLabelDoc.vue
index 1d1d921bf..9c182948d 100644
--- a/apps/showcase/doc/inputtext/IftaLabelDoc.vue
+++ b/apps/showcase/doc/inputtext/IftaLabelDoc.vue
@@ -4,7 +4,7 @@
     </DocSectionText>
     <div class="card flex justify-center">
         <IftaLabel>
-            <InputText id="username" v-model="value" autocomplete="off" />
+            <InputText id="username" v-model="value" autocomplete="off" variant="filled" />
             <label for="username">Username</label>
         </IftaLabel>
     </div>
@@ -19,7 +19,7 @@ export default {
             code: {
                 basic: `
 <IftaLabel>
-    <InputText id="username" v-model="value" />
+    <InputText id="username" v-model="value" variant="filled" />
     <label for="username">Username</label>
 </IftaLabel>
 `,
@@ -27,7 +27,7 @@ export default {
 <template>
     <div class="card flex justify-center">
         <IftaLabel>
-            <InputText id="username" v-model="value" />
+            <InputText id="username" v-model="value" variant="filled" />
             <label for="username">Username</label>
         </IftaLabel>
     </div>
@@ -47,7 +47,7 @@ export default {
 <template>
     <div class="card flex justify-center">
         <IftaLabel>
-            <InputText id="username" v-model="value" />
+            <InputText id="username" v-model="value" variant="filled" />
             <label for="username">Username</label>
         </IftaLabel>
     </div>
diff --git a/apps/showcase/doc/inputtext/InvalidDoc.vue b/apps/showcase/doc/inputtext/InvalidDoc.vue
index d3f253e7a..225353735 100644
--- a/apps/showcase/doc/inputtext/InvalidDoc.vue
+++ b/apps/showcase/doc/inputtext/InvalidDoc.vue
@@ -2,8 +2,9 @@
     <DocSectionText v-bind="$attrs">
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
-    <div class="card flex justify-center">
-        <InputText v-model="value" :invalid="value === ''" />
+    <div class="card flex flex-wrap justify-center gap-4">
+        <InputText v-model="value1" :invalid="!value1" />
+        <InputText v-model="value2" :invalid="!value2" variant="filled" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -12,15 +13,18 @@
 export default {
     data() {
         return {
-            value: '',
+            value1: '',
+            value2: '',
             code: {
                 basic: `
-<InputText v-model="value" :invalid="value === null"  />
+<InputText v-model="value1" :invalid="!value1" />
+<InputText v-model="value2" :invalid="!value2" variant="filled" />
 `,
                 options: `
 <template>
-    <div class="card flex justify-center">
-        <InputText v-model="value" :invalid="value === null"  />
+    <div class="card flex flex-wrap justify-center gap-4">
+        <InputText v-model="value1" :invalid="!value1" />
+        <InputText v-model="value2" :invalid="!value2" variant="filled" />
     </div>
 </template>
 
@@ -28,7 +32,8 @@ export default {
 export default {
     data() {
         return {
-            value: ''
+            value1: '',
+            value2: ''
         }
     }
 }
@@ -36,15 +41,17 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-center">
-        <InputText v-model="value" :invalid="value === null"  />
+    <div class="card flex flex-wrap justify-center gap-4">
+        <InputText v-model="value1" :invalid="!value1" />
+        <InputText v-model="value2" :invalid="!value2" variant="filled" />
     </div>
 </template>
 
 <script setup>
 import { ref } from 'vue';
 
-const value = ref('');
+const value1 = ref('');
+const value2 = ref('');
 <\/script>
 `
             }
diff --git a/apps/showcase/pages/inputtext/index.vue b/apps/showcase/pages/inputtext/index.vue
index e9e598a02..1b97e20fc 100755
--- a/apps/showcase/pages/inputtext/index.vue
+++ b/apps/showcase/pages/inputtext/index.vue
@@ -8,8 +8,8 @@ import BasicDoc from '@/doc/inputtext/BasicDoc.vue';
 import DisabledDoc from '@/doc/inputtext/DisabledDoc.vue';
 import FilledDoc from '@/doc/inputtext/FilledDoc.vue';
 import FloatLabelDoc from '@/doc/inputtext/FloatLabelDoc.vue';
-import IftaLabelDoc from '@/doc/inputtext/IftaLabelDoc.vue';
 import HelpTextDoc from '@/doc/inputtext/HelpTextDoc.vue';
+import IftaLabelDoc from '@/doc/inputtext/IftaLabelDoc.vue';
 import ImportDoc from '@/doc/inputtext/ImportDoc.vue';
 import InvalidDoc from '@/doc/inputtext/InvalidDoc.vue';
 import SizesDoc from '@/doc/inputtext/SizesDoc.vue';
@@ -30,6 +30,11 @@ export default {
                     label: 'Basic',
                     component: BasicDoc
                 },
+                {
+                    id: 'filled',
+                    label: 'Filled',
+                    component: FilledDoc
+                },
                 {
                     id: 'floatlabel',
                     label: 'Float Label',
@@ -50,11 +55,6 @@ export default {
                     label: 'Help Text',
                     component: HelpTextDoc
                 },
-                {
-                    id: 'filled',
-                    label: 'Filled',
-                    component: FilledDoc
-                },
                 {
                     id: 'invalid',
                     label: 'Invalid',
diff --git a/packages/primevue/src/floatlabel/style/FloatLabelStyle.js b/packages/primevue/src/floatlabel/style/FloatLabelStyle.js
index 5105fcc53..197132d0d 100644
--- a/packages/primevue/src/floatlabel/style/FloatLabelStyle.js
+++ b/packages/primevue/src/floatlabel/style/FloatLabelStyle.js
@@ -83,6 +83,7 @@ const theme = ({ dt }) => `
 .p-floatlabel-in .p-cascadeselect-label,
 .p-floatlabel-in .p-treeselect-label {
     padding-top: ${dt('floatlabel.in.input.padding.top')};
+    padding-bottom: ${dt('floatlabel.in.input.padding.bottom')};
 }
 
 .p-floatlabel-in:has(input:focus) label,
diff --git a/packages/primevue/src/iftalabel/style/IftaLabelStyle.js b/packages/primevue/src/iftalabel/style/IftaLabelStyle.js
index f71076578..ea8aba53e 100644
--- a/packages/primevue/src/iftalabel/style/IftaLabelStyle.js
+++ b/packages/primevue/src/iftalabel/style/IftaLabelStyle.js
@@ -28,6 +28,7 @@ const theme = ({ dt }) => `
 .p-iftalabel .p-cascadeselect-label,
 .p-iftalabel .p-treeselect-label {
     padding-top: ${dt('iftalabel.input.padding.top')};
+    padding-bottom: ${dt('iftalabel.input.padding.bottom')};
 }
 
 .p-iftalabel:has(.p-invalid) label {
diff --git a/packages/themes/src/presets/aura/floatlabel/index.js b/packages/themes/src/presets/aura/floatlabel/index.js
index 1467e2483..71afc18ee 100644
--- a/packages/themes/src/presets/aura/floatlabel/index.js
+++ b/packages/themes/src/presets/aura/floatlabel/index.js
@@ -20,7 +20,8 @@ export default {
     },
     in: {
         input: {
-            paddingTop: '1.5rem'
+            paddingTop: '1.5rem',
+            paddingBottom: '{form.field.padding.y}'
         },
         active: {
             top: '{form.field.padding.y}'
diff --git a/packages/themes/src/presets/aura/iftalabel/index.js b/packages/themes/src/presets/aura/iftalabel/index.js
index 7edbeb5b6..956748b4e 100644
--- a/packages/themes/src/presets/aura/iftalabel/index.js
+++ b/packages/themes/src/presets/aura/iftalabel/index.js
@@ -10,6 +10,7 @@ export default {
         fontWeight: '400'
     },
     input: {
-        paddingTop: '1.5rem'
+        paddingTop: '1.5rem',
+        paddingBottom: '{form.field.padding.y}'
     }
 };
diff --git a/packages/themes/src/presets/lara/floatlabel/index.js b/packages/themes/src/presets/lara/floatlabel/index.js
index c38ff6000..9e921dce6 100644
--- a/packages/themes/src/presets/lara/floatlabel/index.js
+++ b/packages/themes/src/presets/lara/floatlabel/index.js
@@ -20,7 +20,8 @@ export default {
     },
     in: {
         input: {
-            paddingTop: '1.875rem'
+            paddingTop: '1.875rem',
+            paddingBottom: '{form.field.padding.y}'
         },
         active: {
             top: '{form.field.padding.y}'
diff --git a/packages/themes/src/presets/lara/iftalabel/index.js b/packages/themes/src/presets/lara/iftalabel/index.js
index 853139e1b..af2b3bf61 100644
--- a/packages/themes/src/presets/lara/iftalabel/index.js
+++ b/packages/themes/src/presets/lara/iftalabel/index.js
@@ -10,6 +10,7 @@ export default {
         fontWeight: '400'
     },
     input: {
-        paddingTop: '1.875rem'
+        paddingTop: '1.875rem',
+        paddingBottom: '{form.field.padding.y}'
     }
 };
diff --git a/packages/themes/src/presets/material/base/index.js b/packages/themes/src/presets/material/base/index.js
index f39ffdc1b..82c6e7ddd 100644
--- a/packages/themes/src/presets/material/base/index.js
+++ b/packages/themes/src/presets/material/base/index.js
@@ -34,15 +34,15 @@ export default {
     semantic: {
         transitionDuration: '0.2s',
         focusRing: {
-            width: '1px',
-            style: 'solid',
-            color: '{primary.color}',
-            offset: '2px',
+            width: '0',
+            style: 'none',
+            color: 'transparent',
+            offset: '0',
             shadow: 'none'
         },
-        disabledOpacity: '0.6',
+        disabledOpacity: '0.38',
         iconSize: '1rem',
-        anchorGutter: '2px',
+        anchorGutter: '0',
         primary: {
             50: '{emerald.50}',
             100: '{emerald.100}',
@@ -58,51 +58,51 @@ export default {
         },
         formField: {
             paddingX: '0.75rem',
-            paddingY: '0.5rem',
-            borderRadius: '{border.radius.md}',
+            paddingY: '0.75rem',
+            borderRadius: '{border.radius.sm}',
             focusRing: {
-                width: '0',
-                style: 'none',
-                color: 'transparent',
-                offset: '0',
+                width: '2px',
+                style: 'solid',
+                color: '{primary.color}',
+                offset: '-2px',
                 shadow: 'none'
             },
             transitionDuration: '{transition.duration}'
         },
         list: {
-            padding: '0.25rem 0.25rem',
-            gap: '2px',
+            padding: '0.5rem 0',
+            gap: '0',
             header: {
-                padding: '0.5rem 1rem 0.25rem 1rem'
+                padding: '0.75rem 0.75rem'
             },
             option: {
-                padding: '0.5rem 0.75rem',
-                borderRadius: '{border.radius.sm}'
+                padding: '0.75rem 0.75rem',
+                borderRadius: '{border.radius.none}'
             },
             optionGroup: {
-                padding: '0.5rem 0.75rem',
-                fontWeight: '600'
+                padding: '0.75rem 0.75rem',
+                fontWeight: '700'
             }
         },
         content: {
-            borderRadius: '{border.radius.md}'
+            borderRadius: '{border.radius.sm}'
         },
         mask: {
             transitionDuration: '0.15s'
         },
         navigation: {
             list: {
-                padding: '0.25rem 0.25rem',
-                gap: '2px'
+                padding: '0.5rem 0',
+                gap: '0'
             },
             item: {
-                padding: '0.5rem 0.75rem',
-                borderRadius: '{border.radius.sm}',
+                padding: '0.75rem 0.75rem',
+                borderRadius: '{border.radius.none}',
                 gap: '0.5rem'
             },
             submenuLabel: {
-                padding: '0.5rem 0.75rem',
-                fontWeight: '600'
+                padding: '0.75rem 0.75rem',
+                fontWeight: '700'
             },
             submenuIcon: {
                 size: '0.875rem'
@@ -110,21 +110,21 @@ export default {
         },
         overlay: {
             select: {
-                borderRadius: '{border.radius.md}',
-                shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)'
+                borderRadius: '{border.radius.sm}',
+                shadow: '0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12)'
             },
             popover: {
-                borderRadius: '{border.radius.md}',
-                padding: '0.75rem',
-                shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)'
+                borderRadius: '{border.radius.sm}',
+                padding: '1rem',
+                shadow: '0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12)'
             },
             modal: {
-                borderRadius: '{border.radius.xl}',
-                padding: '1.25rem',
-                shadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)'
+                borderRadius: '{border.radius.sm}',
+                padding: '1.5rem',
+                shadow: '0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12)'
             },
             navigation: {
-                shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)'
+                shadow: '0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12)'
             }
         },
         colorScheme: {
@@ -146,65 +146,66 @@ export default {
                 primary: {
                     color: '{primary.500}',
                     contrastColor: '#ffffff',
-                    hoverColor: '{primary.600}',
-                    activeColor: '{primary.700}'
+                    hoverColor: 'color-mix(in srgb, {primary.color}, transparent 8%)',
+                    activeColor: 'color-mix(in srgb, {primary.color}, transparent 32%)'
                 },
                 highlight: {
-                    background: '{primary.50}',
-                    focusBackground: '{primary.100}',
+                    background: 'color-mix(in srgb, {primary.color}, transparent 88%)',
+                    focusBackground: 'color-mix(in srgb, {primary.color}, transparent 76%)',
                     color: '{primary.700}',
                     focusColor: '{primary.800}'
                 },
                 mask: {
-                    background: 'rgba(0,0,0,0.4)',
+                    background: 'rgba(0,0,0,0.32)',
                     color: '{surface.200}'
                 },
                 formField: {
                     background: '{surface.0}',
-                    disabledBackground: '{surface.200}',
-                    filledBackground: '{surface.50}',
-                    filledFocusBackground: '{surface.50}',
-                    borderColor: '{surface.300}',
-                    hoverBorderColor: '{surface.400}',
+                    disabledBackground: '{surface.300}',
+                    filledBackground: '{surface.100}',
+                    filledHoverBackground: '{surface.200}',
+                    filledFocusBackground: '{surface.100}',
+                    borderColor: '{surface.400}',
+                    hoverBorderColor: '{surface.900}',
                     focusBorderColor: '{primary.color}',
-                    invalidBorderColor: '{red.400}',
-                    color: '{surface.700}',
-                    disabledColor: '{surface.500}',
-                    placeholderColor: '{surface.500}',
-                    floatLabelColor: '{surface.500}',
+                    invalidBorderColor: '{red.800}',
+                    color: '{surface.900}',
+                    disabledColor: '{surface.600}',
+                    placeholderColor: '{surface.600}',
+                    floatLabelColor: '{surface.600}',
                     floatLabelFocusColor: '{primary.600}',
-                    floatLabelActiveColor: '{surface.500}',
-                    floatLabelInvalidColor: '{red.400}',
-                    iconColor: '{surface.400}',
-                    shadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)'
+                    floatLabelActiveColor: '{surface.600}',
+                    floatLabelInvalidColor: '{red.800}',
+                    iconColor: '{surface.600}',
+                    shadow: 'none'
                 },
                 text: {
-                    color: '{surface.700}',
-                    hoverColor: '{surface.800}',
-                    mutedColor: '{surface.500}',
+                    color: '{surface.900}',
+                    hoverColor: '{surface.900}',
+                    mutedColor: '{surface.600}',
                     hoverMutedColor: '{surface.600}'
                 },
                 content: {
                     background: '{surface.0}',
                     hoverBackground: '{surface.100}',
-                    borderColor: '{surface.200}',
+                    borderColor: '{surface.300}',
                     color: '{text.color}',
                     hoverColor: '{text.hover.color}'
                 },
                 overlay: {
                     select: {
                         background: '{surface.0}',
-                        borderColor: '{surface.200}',
+                        borderColor: '{surface.0}',
                         color: '{text.color}'
                     },
                     popover: {
                         background: '{surface.0}',
-                        borderColor: '{surface.200}',
+                        borderColor: '{surface.0}',
                         color: '{text.color}'
                     },
                     modal: {
                         background: '{surface.0}',
-                        borderColor: '{surface.200}',
+                        borderColor: '{surface.0}',
                         color: '{text.color}'
                     }
                 },
@@ -218,36 +219,36 @@ export default {
                         selectedColor: '{highlight.color}',
                         selectedFocusColor: '{highlight.focus.color}',
                         icon: {
-                            color: '{surface.400}',
-                            focusColor: '{surface.500}'
+                            color: '{surface.600}',
+                            focusColor: '{surface.600}'
                         }
                     },
                     optionGroup: {
                         background: 'transparent',
-                        color: '{text.muted.color}'
+                        color: '{text.color}'
                     }
                 },
                 navigation: {
                     item: {
                         focusBackground: '{surface.100}',
-                        activeBackground: '{surface.100}',
+                        activeBackground: '{surface.200}',
                         color: '{text.color}',
                         focusColor: '{text.hover.color}',
                         activeColor: '{text.hover.color}',
                         icon: {
-                            color: '{surface.400}',
-                            focusColor: '{surface.500}',
-                            activeColor: '{surface.500}'
+                            color: '{surface.600}',
+                            focusColor: '{surface.600}',
+                            activeColor: '{surface.600}'
                         }
                     },
                     submenuLabel: {
                         background: 'transparent',
-                        color: '{text.muted.color}'
+                        color: '{text.color}'
                     },
                     submenuIcon: {
-                        color: '{surface.400}',
-                        focusColor: '{surface.500}',
-                        activeColor: '{surface.500}'
+                        color: '{surface.600}',
+                        focusColor: '{surface.600}',
+                        activeColor: '{surface.600}'
                     }
                 }
             },
diff --git a/packages/themes/src/presets/material/floatlabel/index.js b/packages/themes/src/presets/material/floatlabel/index.js
index 1bab854db..a2e111e37 100644
--- a/packages/themes/src/presets/material/floatlabel/index.js
+++ b/packages/themes/src/presets/material/floatlabel/index.js
@@ -8,30 +8,28 @@ export default {
         positionX: '{form.field.padding.x}',
         positionY: '{form.field.padding.y}',
         fontWeight: '500',
-        focus: {
+        active: {
             fontSize: '0.75rem',
             fontWeight: '400'
         }
     },
     over: {
-        focus: {
+        active: {
             top: '-1.25rem'
         }
     },
     in: {
         input: {
-            paddingTop: '1.5rem'
+            paddingTop: '1.5rem',
+            paddingBottom: '0.5rem'
         },
-        focus: {
-            top: '{form.field.padding.y}'
+        active: {
+            top: '0.5rem'
         }
     },
     on: {
-        input: {
-            paddingTop: '1rem',
-            paddingBottom: '1rem'
-        },
-        focus: {
+        borderRadius: '{border.radius.xs}',
+        active: {
             background: '{form.field.background}',
             padding: '0 0.125rem'
         }
diff --git a/packages/themes/src/presets/material/iftalabel/index.js b/packages/themes/src/presets/material/iftalabel/index.js
index 7edbeb5b6..2db75dc03 100644
--- a/packages/themes/src/presets/material/iftalabel/index.js
+++ b/packages/themes/src/presets/material/iftalabel/index.js
@@ -5,11 +5,12 @@ export default {
         invalidColor: '{form.field.float.label.invalid.color}',
         transitionDuration: '0.2s',
         positionX: '{form.field.padding.x}',
-        top: '{form.field.padding.y}',
+        top: '0.5rem',
         fontSize: '0.75rem',
         fontWeight: '400'
     },
     input: {
-        paddingTop: '1.5rem'
+        paddingTop: '1.5rem',
+        paddingBottom: '0.5rem'
     }
 };
diff --git a/packages/themes/src/presets/material/index.js b/packages/themes/src/presets/material/index.js
index de05faa87..193cec53e 100644
--- a/packages/themes/src/presets/material/index.js
+++ b/packages/themes/src/presets/material/index.js
@@ -178,11 +178,7 @@ export default {
         tooltip,
         ripple
     },
-    // @todo: REMOVE THIS BLOCK
     style: ({ dt }) => `
-.p-button {
-    background: blue !important;
-    padding: ${dt('inputtext.test')} ${dt('inputtext.test')} !important;
-}
+
     `
 };
diff --git a/packages/themes/src/presets/material/inputtext/index.js b/packages/themes/src/presets/material/inputtext/index.js
index f3f3a497a..e9c4d77dc 100644
--- a/packages/themes/src/presets/material/inputtext/index.js
+++ b/packages/themes/src/presets/material/inputtext/index.js
@@ -3,6 +3,7 @@ export default {
         background: '{form.field.background}',
         disabledBackground: '{form.field.disabled.background}',
         filledBackground: '{form.field.filled.background}',
+        filledHoverBackground: '{form.field.filled.hover.background}',
         filledFocusBackground: '{form.field.filled.focus.background}',
         borderColor: '{form.field.border.color}',
         hoverBorderColor: '{form.field.hover.border.color}',
@@ -14,7 +15,6 @@ export default {
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
-        test: '2rem', // @todo: REMOVE THIS LINE
         borderRadius: '{form.field.border.radius}',
         focusRing: {
             width: '{form.field.focus.ring.width}',
@@ -27,20 +27,56 @@ export default {
         sm: {
             fontSize: '0.875rem',
             paddingX: '0.625rem',
-            paddingY: '0.375rem'
+            paddingY: '0.625rem'
         },
         lg: {
             fontSize: '1.125rem',
-            paddingX: '0.875rem',
-            paddingY: '0.625rem'
+            paddingX: '1rem',
+            paddingY: '1rem'
         }
     },
-    // @todo: REMOVE THIS BLOCK
     style: ({ dt }) => `
-.p-inputtext {
-    background: yellow;
-    padding: ${dt('inputtext.test')} ${dt('inputtext.test')};
-    border: 5px solid red;
+.p-inputtext.p-variant-filled {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border: 1px solid transparent;
+    background: ${dt('inputtext.filled.background')} no-repeat;
+    background-image: linear-gradient(to bottom, ${dt('inputtext.focus.border.color')}, ${dt('inputtext.focus.border.color')}), linear-gradient(to bottom, ${dt('inputtext.border.color')}, ${dt('inputtext.border.color')});
+    background-size: 0 2px, 100% 1px;
+    background-position: 50% 100%, 50% 100%;
+    background-origin: border-box;
+    transition: background-size 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
+}
+
+.p-inputtext.p-variant-filled:enabled:hover {
+    background: ${dt('inputtext.filled.hover.background')} no-repeat;
+    background-image: linear-gradient(to bottom, ${dt('inputtext.focus.border.color')}, ${dt('inputtext.focus.border.color')}), linear-gradient(to bottom, ${dt('inputtext.hover.border.color')}, ${dt('inputtext.hover.border.color')});
+    background-size: 0 2px, 100% 1px;
+    background-position: 50% 100%, 50% 100%;
+    background-origin: border-box;
+    border-color: transparent;
+}
+
+.p-inputtext.p-variant-filled:enabled:focus {
+    outline: 0 none;
+    background: ${dt('inputtext.filled.focus.background')} no-repeat;
+    background-image: linear-gradient(to bottom, ${dt('inputtext.focus.border.color')}, ${dt('inputtext.focus.border.color')}), linear-gradient(to bottom, ${dt('inputtext.border.color')}, ${dt('inputtext.border.color')});
+    background-size: 100% 2px, 100% 1px;
+    background-position: 50% 100%, 50% 100%;
+    background-origin: border-box;
+    border-color: transparent;
+}
+
+.p-inputtext.p-variant-filled:enabled:hover:focus {
+    background-image: linear-gradient(to bottom, ${dt('inputtext.focus.border.color')}, ${dt('inputtext.focus.border.color')}), linear-gradient(to bottom, ${dt('inputtext.hover.border.color')}, ${dt('inputtext.hover.border.color')});
+}
+
+.p-inputtext.p-variant-filled.p-invalid {
+    background-image: linear-gradient(to bottom, ${dt('inputtext.invalid.border.color')}, ${dt('inputtext.invalid.border.color')}), linear-gradient(to bottom, ${dt('inputtext.invalid.border.color')}, ${dt('inputtext.invalid.border.color')});
+}
+
+.p-inputtext.p-variant-filled.p-invalid:enabled:focus {
+    background-image: linear-gradient(to bottom, ${dt('inputtext.invalid.border.color')}, ${dt('inputtext.invalid.border.color')}), linear-gradient(to bottom, ${dt('inputtext.invalid.border.color')}, ${dt('inputtext.invalid.border.color')});
 }
     `
 };
diff --git a/packages/themes/src/presets/nora/floatlabel/index.js b/packages/themes/src/presets/nora/floatlabel/index.js
index 1467e2483..71afc18ee 100644
--- a/packages/themes/src/presets/nora/floatlabel/index.js
+++ b/packages/themes/src/presets/nora/floatlabel/index.js
@@ -20,7 +20,8 @@ export default {
     },
     in: {
         input: {
-            paddingTop: '1.5rem'
+            paddingTop: '1.5rem',
+            paddingBottom: '{form.field.padding.y}'
         },
         active: {
             top: '{form.field.padding.y}'
diff --git a/packages/themes/src/presets/nora/iftalabel/index.js b/packages/themes/src/presets/nora/iftalabel/index.js
index 7edbeb5b6..956748b4e 100644
--- a/packages/themes/src/presets/nora/iftalabel/index.js
+++ b/packages/themes/src/presets/nora/iftalabel/index.js
@@ -10,6 +10,7 @@ export default {
         fontWeight: '400'
     },
     input: {
-        paddingTop: '1.5rem'
+        paddingTop: '1.5rem',
+        paddingBottom: '{form.field.padding.y}'
     }
 };