Added common hover color for background light. Added hover states to other docs home components

packages/website/ts/components/docs/home/community_links.tsx

@@ -3,7 +3,6 @@ import styled from 'styled-components';
 
 import { Link } from 'ts/components/documentation/shared/link';
 
-
 import { Icon } from 'ts/components/icon';
 import { Heading, Paragraph } from 'ts/components/text';
 
@@ -54,7 +53,6 @@ const CommunityLinksWrapper = styled.div`
 `;
 
 const CommunityLinkWrapper = styled(Link)`
-    background-color: ${colors.backgroundLight};
     border: 1px solid #dbdfdd;
     padding: 50px;
     display: flex;
@@ -62,6 +60,11 @@ const CommunityLinkWrapper = styled(Link)`
     align-items: center;
     justify-content: center;
     text-align: center;
+    background-color: ${colors.backgroundLight};
+
+    &:hover {
+        background: ${colors.backgroundLightHover};
+    }
 `;
 
 const CommunityIcon = styled(Icon)`

packages/website/ts/components/docs/home/shortcut_links.tsx

@@ -6,7 +6,6 @@ import { Heading, Paragraph } from 'ts/components/text';
 
 import { Link } from 'ts/components/documentation/shared/link';
 
-
 import { colors } from 'ts/style/colors';
 
 interface IShortcutLinksProps {
@@ -62,13 +61,17 @@ const ShortcutIcon = styled(Icon)`
 `;
 
 const ShortcutLinkWrapper = styled(Link)`
-    background-color: ${colors.backgroundLight};
     border: 1px solid #dbdfdd;
     padding: 50px;
     display: flex;
     align-items: center;
     flex-direction: column;
     text-align: center;
+    background-color: ${colors.backgroundLight};
+
+    &:hover {
+        background: ${colors.backgroundLightHover};
+    }
 
     @media (min-width: 900px) {
         flex-direction: row;

packages/website/ts/components/docs/home/step_links.tsx

@@ -3,7 +3,6 @@ import styled from 'styled-components';
 
 import { Link } from 'ts/components/documentation/shared/link';
 
-
 import { colors } from 'ts/style/colors';
 
 export interface IStepLinkProps {
@@ -49,12 +48,7 @@ const StepLinkWrapper = styled(Link)`
     justify-content: space-between;
 
     &:hover {
-        background: ${colors.brandDark};
-
-        * {
-            color: ${colors.white};
-            fill: ${colors.white};
-        }
+        background: ${colors.backgroundLightHover};
     }
 
     & + & {

packages/website/ts/style/colors.ts

@@ -18,6 +18,7 @@ const appColors = {
     backgroundDark: '#111A19',
     backgroundBlack: '#000000',
     backgroundLight: '#F3F6F4',
+    backgroundLightHover: '#EAEFEC',
     textDarkPrimary: '#000000',
     textDarkSecondary: '#5C5C5C',
     white: '#fff',