Background gradient added and hover background changed for Button.ter…

…tiary This was done to match the implementation with the design
vrk-kpa · Oct 22, 2019 · bc86e31 · bc86e31
1 parent aadadf3
commit bc86e31
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/src/core/Button/Button.baseStyles.tsx b/src/core/Button/Button.baseStyles.tsx
@@ -71,11 +71,11 @@ const secondaryNoBorderStyles = ({ theme }: SuomifiThemeProp) => css`
 const tertiaryStyles = ({ theme }: SuomifiThemeProp) => css`
   &.fi-button--tertiary {
     ${secondary({ theme })}
-    background: ${theme.colors.highlightLight50};
+    background: ${theme.gradients.highlightLight45ToHighlightLight50};
     border: none;
 
     &:hover {
-      background: ${theme.colors.highlightLight53};
+      background: ${theme.colors.highlightLight50};
     }
 
     &:active {

diff --git a/src/core/Button/__snapshots__/Button.test.tsx.snap b/src/core/Button/__snapshots__/Button.test.tsx.snap
@@ -208,7 +208,7 @@ exports[`calling render with the same component on the same container does not r
   background-color: hsl(0,0%,100%);
   border: 1px solid hsl(212,63%,45%);
   text-shadow: none;
-  background: hsl(212,63%,95%);
+  background: linear-gradient(0deg,hsl(212,63%,90%),hsl(212,63%,95%));
   border: none;
 }
 
@@ -232,7 +232,7 @@ exports[`calling render with the same component on the same container does not r
 }
 
 .c0.fi-button--tertiary:hover {
-  background: hsl(212,63%,98%);
+  background: hsl(212,63%,95%);
 }
 
 .c0.fi-button--tertiary:active {

diff --git a/src/core/theme/colors.ts b/src/core/theme/colors.ts
@@ -93,6 +93,9 @@ export const gradients = {
   depthLight26: `linear-gradient(0deg, ${colors.depthLight26} 0%, ${
     colors.whiteBase
   } 100%)`,
+  highlightLight45ToHighlightLight50: `linear-gradient(0deg, ${
+    colors.highlightLight45
+  }, ${colors.highlightLight50})`,
 };
 
 export const outlines = {