Merge pull request #567 from sudhanshutech/fix/typography

Typography for Input fields
layer5io · Apr 17, 2024 · eefb2b3 · eefb2b3
2 parents db200a2 + 5b2b2e9
commit eefb2b3
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 5 deletions.
diff --git a/README.md b/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.
 

diff --git a/src/theme/components/formlabel.modifier.ts b/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
         }

diff --git a/src/theme/components/input.modifier.ts b/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)'
         },

diff --git a/src/theme/components/outlinedinput.modifier.ts b/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
         },

diff --git a/src/theme/components/textfield.modifier.ts b/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,