fix(Table): sort button hover color (#3655)

lumada-design · Aug 30, 2023 · 11f3575 · 11f3575
1 parent 5a062c7
commit 11f3575
Show file tree

Hide file tree

Showing 5 changed files with 5 additions and 1 deletion.
diff --git a/packages/core/src/components/Table/TableHeader/TableHeader.styles.tsx b/packages/core/src/components/Table/TableHeader/TableHeader.styles.tsx
@@ -102,7 +102,7 @@ export const { staticClasses, useClasses } = createClasses("HvTableHeader", {
       boxShadow: "none",
       backgroundColor: "transparent",
       "&:hover": {
-        backgroundColor: "red",
+        backgroundColor: theme.table.sortButtonHoverColor,
       },
     },
   },

diff --git a/packages/styles/src/theme.ts b/packages/styles/src/theme.ts
@@ -247,6 +247,7 @@ const componentsSpec: DeepString<HvThemeComponents> = {
     cellPaddingBottom: "string",
     cellListBorder: "string",
     cellBorder: "string",
+    sortButtonHoverColor: "string",
   },
   calendar: {
     border: "string",

diff --git a/packages/styles/src/themes/ds3.ts b/packages/styles/src/themes/ds3.ts
@@ -464,6 +464,7 @@ const ds3 = makeTheme((theme: HvTheme) => ({
     cellPaddingBottom: `calc(${theme.space.xs} - 3px )`,
     cellListBorder: `solid 2px ${theme.colors.atmo2}`,
     cellBorder: `solid 1px ${theme.colors.atmo4}`,
+    sortButtonHoverColor: "transparent",
   },
   calendar: {
     border: "none",

diff --git a/packages/styles/src/themes/ds5.ts b/packages/styles/src/themes/ds5.ts
@@ -407,6 +407,7 @@ const ds5 = makeTheme((theme: HvTheme) => ({
     cellPaddingBottom: `calc(${theme.space.xs} - 3px )`,
     cellListBorder: "none",
     cellBorder: `solid 1px ${theme.colors.atmo4}`,
+    sortButtonHoverColor: theme.colors.primary_20,
   },
   calendar: {
     border: `1px solid ${theme.colors.secondary_80}`,

diff --git a/packages/styles/src/types.ts b/packages/styles/src/types.ts
@@ -261,6 +261,7 @@ export type HvThemeComponents = {
     cellPaddingBottom: string;
     cellListBorder: string;
     cellBorder: string;
+    sortButtonHoverColor: string;
   };
   calendar: {
     border: string;