Form components for Nora

components/lib/floatlabel/style/FloatLabelStyle.js

@@ -16,7 +16,7 @@ const theme = ({ dt }) => `
     line-height: 1;
     left: 0.75rem;
     color: ${dt('floatlabel.color')};
-    transition-duration: ${dt('transition.duration')};
+    transition-duration: ${dt('floatlabel.transition.duration')};
 }
 
 .p-float-label:has(textarea) label {

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

@@ -2,6 +2,7 @@ export default {
     root: {
         color: '{form.field.float.label.color}',
         focusColor: '{form.field.float.label.focus.color}',
-        invalidColor: '{form.field.float.label.invalid.color}'
+        invalidColor: '{form.field.float.label.invalid.color}',
+        transitionDuration: '0.2s'
     }
 };

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

@@ -15,7 +15,6 @@ export default {
         hoverBackground: '{content.border.color}',
         content: {
             borderRadius: '50%',
-            background: '{content.background}',
             hoverBackground: '{content.background}',
             width: '16px',
             height: '16px',

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

@@ -2,6 +2,7 @@ export default {
     root: {
         color: '{form.field.float.label.color}',
         focusColor: '{form.field.float.label.focus.color}',
-        invalidColor: '{form.field.float.label.invalid.color}'
+        invalidColor: '{form.field.float.label.invalid.color}',
+        transitionDuration: '0.2s'
     }
 };

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

@@ -14,9 +14,8 @@ export default {
         background: '{primary.color}',
         hoverBackground: '{primary.color}',
         content: {
-            background: '{content.background}',
-            hoverBackground: '{primary.color}',
             borderRadius: '50%',
+            hoverBackground: '{primary.color}',
             width: '12px',
             height: '12px',
             shadow: 'none'

components/lib/themes/nora/autocomplete/index.js

@@ -53,6 +53,10 @@ export default {
     },
     dropdown: {
         width: '2.5rem',
+        background: '{form.field.background}',
+        color: '{form.field.icon.color}',
+        hoverColor: '{form.field.icon.color}',
+        activeColor: '{form.field.icon.color}',
         borderColor: '{form.field.border.color}',
         hoverBorderColor: '{form.field.border.color}',
         activeBorderColor: '{form.field.border.color}',
@@ -74,22 +78,14 @@ export default {
     colorScheme: {
         light: {
             dropdown: {
-                background: '{surface.100}',
                 hoverBackground: '{surface.200}',
-                activeBackground: '{surface.300}',
+                activeBackground: '{surface.300}'
-                color: '{surface.600}',
-                hoverColor: '{surface.700}',
-                activeColor: '{surface.800}'
             }
         },
         dark: {
             dropdown: {
-                background: '{surface.800}',
                 hoverBackground: '{surface.700}',
-                activeBackground: '{surface.600}',
+                activeBackground: '{surface.600}'
-                color: '{surface.300}',
-                hoverColor: '{surface.200}',
-                activeColor: '{surface.100}'
             }
         }
     }

components/lib/themes/nora/chip/index.js

@@ -24,19 +24,19 @@ export default {
     colorScheme: {
         light: {
             root: {
-                background: '{surface.100}',
+                background: '{surface.200}',
-                color: '{surface.800}'
+                color: '{surface.900}'
             },
             icon: {
-                color: '{surface.800}'
+                color: '{surface.900}'
             },
             removeIcon: {
-                color: '{surface.800}'
+                color: '{surface.900}'
             }
         },
         dark: {
             root: {
-                background: '{surface.800}',
+                background: '{surface.700}',
                 color: '{surface.0}'
             },
             icon: {

components/lib/themes/nora/datepicker/index.js

@@ -21,6 +21,10 @@ export default {
     },
     dropdown: {
         width: '2.5rem',
+        background: '{form.field.background}',
+        color: '{form.field.icon.color}',
+        hoverColor: '{form.field.icon.color}',
+        activeColor: '{form.field.icon.color}',
         borderColor: '{form.field.border.color}',
         hoverBorderColor: '{form.field.border.color}',
         activeBorderColor: '{form.field.border.color}',
@@ -103,12 +107,8 @@ export default {
     colorScheme: {
         light: {
             dropdown: {
-                background: '{surface.100}',
                 hoverBackground: '{surface.200}',
-                activeBackground: '{surface.300}',
+                activeBackground: '{surface.300}'
-                color: '{surface.600}',
-                hoverColor: '{surface.700}',
-                activeColor: '{surface.800}'
             },
             today: {
                 background: '{surface.200}',
@@ -117,12 +117,8 @@ export default {
         },
         dark: {
             dropdown: {
-                background: '{surface.800}',
                 hoverBackground: '{surface.700}',
-                activeBackground: '{surface.600}',
+                activeBackground: '{surface.600}'
-                color: '{surface.300}',
-                hoverColor: '{surface.200}',
-                activeColor: '{surface.100}'
             },
             today: {
                 background: '{surface.700}',

components/lib/themes/nora/floatlabel/index.js

@@ -2,6 +2,7 @@ export default {
     root: {
         color: '{form.field.float.label.color}',
         focusColor: '{form.field.float.label.focus.color}',
-        invalidColor: '{form.field.float.label.invalid.color}'
+        invalidColor: '{form.field.float.label.invalid.color}',
+        transitionDuration: '0.2s'
     }
 };

components/lib/themes/nora/inputchips/index.js

@@ -29,13 +29,13 @@ export default {
     colorScheme: {
         light: {
             chip: {
-                focusBackground: '{surface.200}',
+                focusBackground: '{surface.300}',
-                color: '{surface.800}'
+                color: '{surface.900}'
             }
         },
         dark: {
             chip: {
-                focusBackground: '{surface.700}',
+                focusBackground: '{surface.600}',
                 color: '{surface.0}'
             }
         }

components/lib/themes/nora/inputnumber/index.js

@@ -1,5 +1,12 @@
 export default {
     button: {
+        background: 'transparent',
+        borderColor: '{form.field.border.color}',
+        hoverBorderColor: '{form.field.border.color}',
+        activeBorderColor: '{form.field.border.color}',
+        color: '{form.field.icon.color}',
+        hoverColor: '{form.field.icon.color}',
+        activeColor: '{form.field.icon.color}',
         width: '2.5rem',
         borderRadius: '{form.field.border.radius}',
         verticalPadding: '{form.field.padding.y}'
@@ -7,28 +14,14 @@ export default {
     colorScheme: {
         light: {
             button: {
-                background: 'transparent',
+                hoverBackground: '{surface.200}',
-                hoverBackground: '{surface.100}',
+                activeBackground: '{surface.300}'
-                activeBackground: '{surface.200}',
-                borderColor: '{form.field.border.color}',
-                hoverBorderColor: '{form.field.border.color}',
-                activeBorderColor: '{form.field.border.color}',
-                color: '{surface.400}',
-                hoverColor: '{surface.500}',
-                activeColor: '{surface.600}'
             }
         },
         dark: {
             button: {
-                background: 'transparent',
+                hoverBackground: '{surface.700}',
-                hoverBackground: '{surface.800}',
+                activeBackground: '{surface.600}'
-                activeBackground: '{surface.700}',
-                borderColor: '{form.field.border.color}',
-                hoverBorderColor: '{form.field.border.color}',
-                activeBorderColor: '{form.field.border.color}',
-                color: '{surface.400}',
-                hoverColor: '{surface.300}',
-                activeColor: '{surface.200}'
             }
         }
     }

components/lib/themes/nora/password/index.js

@@ -19,16 +19,16 @@ export default {
     colorScheme: {
         light: {
             strength: {
-                weakBackground: '{red.500}',
+                weakBackground: '{red.600}',
-                mediumBackground: '{amber.500}',
+                mediumBackground: '{yellow.600}',
-                strongBackground: '{green.500}'
+                strongBackground: '{green.600}'
             }
         },
         dark: {
             strength: {
-                weakBackground: '{red.400}',
+                weakBackground: '{red.500}',
-                mediumBackground: '{amber.400}',
+                mediumBackground: '{yellow.500}',
-                strongBackground: '{green.400}'
+                strongBackground: '{green.500}'
             }
         }
     }

components/lib/themes/nora/slider/index.js

@@ -8,18 +8,18 @@ export default {
         background: '{primary.color}'
     },
     handle: {
-        width: '20px',
-        height: '20px',
-        borderRadius: '50%',
-        background: '{content.border.color}',
-        hoverBackground: '{content.border.color}',
-        content: {
-            borderRadius: '50%',
-            background: '{content.background}',
-            hoverBackground: '{content.background}',
         width: '16px',
         height: '16px',
-            shadow: '0px 0.5px 0px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.14)'
+        borderRadius: '50%',
+        background: '{primary.color}',
+        hoverBackground: '{primary.color}',
+        content: {
+            borderRadius: '50%',
+            background: '{primary.color}',
+            hoverBackground: '{primary.color}',
+            width: '12px',
+            height: '12px',
+            shadow: 'none'
         },
         focusRing: {
             width: '{focus.ring.width}',
@@ -28,17 +28,5 @@ export default {
             offset: '{focus.ring.offset}',
             shadow: '{focus.ring.shadow}'
         }
-    },
-    colorScheme: {
-        light: {
-            handle: {
-                contentBackground: '{surface.0}'
-            }
-        },
-        dark: {
-            handle: {
-                contentBackground: '{surface.950}'
-            }
-        }
     }
 };