fix(Input): fix styles on the input label and info message

lumada-design · Jun 12, 2023 · 089cff1 · 089cff1
1 parent 7bf3d81
commit 089cff1
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 0 deletions.
diff --git a/packages/core/src/components/Forms/InfoMessage/InfoMessage.styles.tsx b/packages/core/src/components/Forms/InfoMessage/InfoMessage.styles.tsx
@@ -14,6 +14,7 @@ export const StyledTypography = styled(
     $infoDisabled: boolean;
     $gutter: boolean;
   }) => ({
+    color: theme.forms.infoMessage.textColor,
     display: "inline-block",
     ...($infoDisabled && {
       color: theme.colors.secondary_60,

diff --git a/packages/core/src/components/Forms/Label/Label.styles.tsx b/packages/core/src/components/Forms/Label/Label.styles.tsx
@@ -14,6 +14,7 @@ export const StyledTypography = styled(
     $labelDisabled: boolean;
     $childGutter: boolean;
   }) => ({
+    fontWeight: theme.forms.label.fontWeight,
     display: "inline-block",
     ...($labelDisabled && {
       color: theme.colors.secondary_60,

diff --git a/packages/styles/src/theme.ts b/packages/styles/src/theme.ts
@@ -407,6 +407,14 @@ const componentsSpec: DeepString<HvThemeComponents> = {
   drawer: {
     backDropBackgroundColor: "string",
   },
+  forms: {
+    infoMessage: {
+      textColor: "string",
+    },
+    label: {
+      fontWeight: "string",
+    },
+  },
 };
 
 const typographyProps: DeepString<HvThemeTypographyProps> = {

diff --git a/packages/styles/src/themes/ds3.ts b/packages/styles/src/themes/ds3.ts
@@ -623,6 +623,14 @@ const ds3 = makeTheme((theme: HvTheme) => ({
   drawer: {
     backDropBackgroundColor: theme.colors.atmo4,
   },
+  forms: {
+    infoMessage: {
+      textColor: theme.colors.secondary,
+    },
+    label: {
+      fontWeight: theme.fontWeights.semibold,
+    },
+  },
 }));
 
 export default ds3;
diff --git a/packages/styles/src/themes/ds5.ts b/packages/styles/src/themes/ds5.ts
@@ -566,6 +566,14 @@ const ds5 = makeTheme((theme: HvTheme) => ({
   drawer: {
     backDropBackgroundColor: theme.colors.atmo4,
   },
+  forms: {
+    infoMessage: {
+      textColor: theme.colors.secondary_80,
+    },
+    label: {
+      fontWeight: theme.fontWeights.normal,
+    },
+  },
 }));
 
 export default ds5;
diff --git a/packages/styles/src/types.ts b/packages/styles/src/types.ts
@@ -414,6 +414,14 @@ export type HvThemeComponents = {
   drawer: {
     backDropBackgroundColor: CSSProperties["backgroundColor"];
   };
+  forms: {
+    infoMessage: {
+      textColor: string;
+    };
+    label: {
+      fontWeight: string;
+    };
+  };
 };
 
 // Theme typography