New InputText tokens

components/lib/inputtext/style/InputTextStyle.js

@@ -7,11 +7,11 @@ const theme = ({ dt }) => `
     font-size: 1rem;
     color: ${dt('inputtext.color')};
     background: ${dt('inputtext.background')};
-    padding: 0.5rem 0.75rem;
+    padding: ${dt('inputtext.padding.y')} ${dt('inputtext.padding.x')};
     border: 1px solid ${dt('inputtext.border.color')};
-    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
     appearance: none;
-    border-radius: ${dt('rounded.base')};
+    border-radius: ${dt('inputtext.border.radius')};
     outline-color: transparent;
     box-shadow: ${dt('inputtext.box.shadow')};
 }
@@ -22,6 +22,7 @@ const theme = ({ dt }) => `
 
 .p-inputtext:enabled:focus {
     border-color: ${dt('inputtext.focus.border.color')};
+    box-shadow: ${dt('inputtext.focus.box.shadow')};
     outline: 0 none;
 }
 

components/lib/themes/aura/index.js

@@ -86,9 +86,9 @@ import treetable from 'primevue/themes/aura/treetable';
 
 export default {
     primitive: {
-        rounded: {
+        borderRadius: {
             sm: '4px',
-            base: '6px',
+            md: '6px',
             lg: '8px',
             xl: '12px'
         },
@@ -137,6 +137,11 @@ export default {
             900: '{emerald.900}',
             950: '{emerald.950}'
         },
+        formField: {
+            paddingX: '0.75rem',
+            paddingY: '0.5rem',
+            borderRadius: '{border.radius.md}'
+        },
         colorScheme: {
             light: {
                 surface: {
@@ -182,7 +187,8 @@ export default {
                     floatLabelFocusColor: '{surface.500}',
                     floatLabelInvalidColor: '{red.400}',
                     iconColor: '{surface.400}',
-                    boxShadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)'
+                    boxShadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)',
+                    focusBoxShadow: 'none'
                 },
                 text: {
                     color: '{surface.700}',
@@ -287,7 +293,8 @@ export default {
                     floatLabelFocusColor: '{surface.400}',
                     floatLabelInvalidColor: '{red.300}',
                     iconColor: '{surface.400}',
-                    boxShadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)'
+                    boxShadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)',
+                    focusBoxShadow: 'none'
                 },
                 text: {
                     color: '{surface.0}',

components/lib/themes/aura/inputtext/index.js

@@ -11,6 +11,10 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
-        boxShadow: '{form.field.box.shadow}'
+        boxShadow: '{form.field.box.shadow}',
+        focusBoxShadow: '{form.field.focus.box.shadow}',
+        paddingX: '{form.field.padding.x}',
+        paddingY: '{form.field.padding.y}',
+        borderRadius: '{form.field.border.radius}'
     }
 };

components/lib/themes/lara/index.js

@@ -86,9 +86,9 @@ import treetable from 'primevue/themes/lara/treetable';
 
 export default {
     primitive: {
-        rounded: {
+        borderRadius: {
             sm: '4px',
-            base: '6px',
+            md: '6px',
             lg: '8px',
             xl: '12px'
         },
@@ -124,19 +124,23 @@ export default {
             offset: '2px'
         },
         anchorGutter: '2px',
-        // @todo - dummy test
         primary: {
-            50: '{blue.50}',
+            50: '{emerald.50}',
-            100: '{blue.100}',
+            100: '{emerald.100}',
-            200: '{blue.200}',
+            200: '{emerald.200}',
-            300: '{blue.300}',
+            300: '{emerald.300}',
-            400: '{blue.400}',
+            400: '{emerald.400}',
-            500: '{blue.500}',
+            500: '{emerald.500}',
-            600: '{blue.600}',
+            600: '{emerald.600}',
-            700: '{blue.700}',
+            700: '{emerald.700}',
-            800: '{blue.800}',
+            800: '{emerald.800}',
-            900: '{blue.900}',
+            900: '{emerald.900}',
-            950: '{blue.950}'
+            950: '{emerald.950}'
+        },
+        formField: {
+            paddingX: '0.75rem',
+            paddingY: '0.625rem',
+            borderRadius: '{border.radius.sm}'
         },
         colorScheme: {
             light: {
@@ -173,7 +177,7 @@ export default {
                     filledBackground: '{surface.50}',
                     filledFocusBackground: '{surface.0}',
                     borderColor: '{surface.300}',
-                    hoverBorderColor: '{surface.400}',
+                    hoverBorderColor: '{primary.color}',
                     focusBorderColor: '{primary.color}',
                     invalidBorderColor: '{red.400}',
                     color: '{surface.700}',
@@ -183,7 +187,8 @@ export default {
                     floatLabelFocusColor: '{surface.500}',
                     floatLabelInvalidColor: '{red.400}',
                     iconColor: '{surface.400}',
-                    boxShadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)'
+                    boxShadow: 'none',
+                    focusBoxShadow: '0 0 0 0.2rem {primary.200}'
                 },
                 text: {
                     color: '{surface.700}',
@@ -288,7 +293,8 @@ export default {
                     floatLabelFocusColor: '{surface.400}',
                     floatLabelInvalidColor: '{red.300}',
                     iconColor: '{surface.400}',
-                    boxShadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)'
+                    boxShadow: 'none',
+                    focusBoxShadow: '0 0 0 0.2rem color-mix(in srgb, {primary.color}, transparent 80%)'
                 },
                 text: {
                     color: '{surface.0}',

components/lib/themes/lara/inputtext/index.js

@@ -11,6 +11,10 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
-        boxShadow: '{form.field.box.shadow}'
+        boxShadow: '{form.field.box.shadow}',
+        focusBoxShadow: '{form.field.focus.box.shadow}',
+        paddingX: '{form.field.padding.x}',
+        paddingY: '{form.field.padding.y}',
+        borderRadius: '{form.field.border.radius}'
     }
 };