Merge pull request #567 from sudhanshutech/fix/typography

Typography for Input fields

Author: leecalcote

README.md

@@ -1,4 +1,4 @@
-# Layer5 Design System Sistent 
+# Layer5 Design System Sistent
 
 The Sistent Design System from Layer5 provides the open source building blocks to design and implement consistent, accessible, and delightful product experiences.
 

src/theme/components/formlabel.modifier.ts

@@ -6,9 +6,11 @@ export const MuiFormLabel: Components<Theme>['MuiFormLabel'] = {
       const {
         palette: {
           background: { brand }
-        }
+        },
+        typography: { textB1Regular }
       } = theme;
       return {
+        ...textB1Regular,
         '&.Mui-focused': {
           color: brand?.default
         }

src/theme/components/input.modifier.ts

@@ -6,9 +6,11 @@ export const MuiInput: Components<Theme>['MuiInput'] = {
       const {
         palette: {
           background: { graphics }
-        }
+        },
+        typography: { textB1Regular }
       } = theme;
       return {
+        ...textB1Regular,
         '&:before': {
           borderBottom: '2px solid rgba(0, 0, 0, 0.5)'
         },

src/theme/components/outlinedinput.modifier.ts

@@ -10,9 +10,11 @@ export const MuiOutlinedInput: Components<Theme>['MuiOutlinedInput'] = {
       const {
         palette: {
           background: { graphics, brand }
-        }
+        },
+        typography: { textB1Regular }
       } = theme;
       return {
+        ...textB1Regular,
         [`&:hover .${outlinedInputClasses.notchedOutline}`]: {
           borderColor: graphics?.default
         },

src/theme/components/textfield.modifier.ts

@@ -6,9 +6,11 @@ export const MuiTextField: Components<Theme>['MuiTextField'] = {
       const {
         palette: {
           background: { graphics }
-        }
+        },
+        typography: { textB1Regular }
       } = theme;
       return {
+        ...textB1Regular,
         '--TextField-brandBorderColor': 'rgba(0, 0, 0, 0.5)',
         '--TextField-brandBorderHoverColor': graphics?.default,
         '--TextField-brandBorderFocusedColor': graphics?.default,