feat #113 - Revamp button styles

src/components/Button/index.tsx

@@ -3,12 +3,24 @@ import 'antd/lib/spin/style/index.css'
 import { ButtonProps as AntDButtonProps } from 'antd/es/button'
 import classnames from 'classnames'
 import { CommonComponentProps } from '../types'
+import { createUseStyles } from 'react-jss'
+import { generateButtonStyles } from './utils'
 import { getDataTestAttributeProp } from '../utils'
 import { LoadingOutlined } from '@ant-design/icons'
 import { Skeleton } from '../Skeleton'
+import { ThemeType } from '../assets/styles/themes'
 import { Button as AntDButton, Spin } from 'antd'
 import React, { FC, ReactNode } from 'react'
 
+const { dark, light } = ThemeType
+
+const useStyles = createUseStyles({
+	'@global': {
+		[`.${dark} button`]: generateButtonStyles(dark),
+		button: generateButtonStyles(light)
+	}
+})
+
 export interface ButtonProps extends CommonComponentProps {
 	/**
 	 * Required click handler.
@@ -67,6 +79,8 @@ export const Button: FC<ButtonProps> = ({
 		type: primary ? 'primary' : 'default'
 	}
 
+	useStyles()
+
 	return loading ? (
 		<Skeleton height={skeletonHeight} width={skeletonWidth} />
 	) : (

src/components/Button/utils.ts

@@ -0,0 +1,40 @@
+import { themedStyles, themes, ThemeType } from '../assets/styles/themes'
+
+export const generateButtonStyles = (themeType: ThemeType) => {
+	const palette = themes[themeType]
+	const { base, disabled } = themedStyles[themeType]
+
+	const baseButtonStyles = {
+		borderColor: base.borderColor,
+		borderRadius: 4,
+		color: base.color
+	}
+
+	return {
+		'&.ant-btn': {
+			'&:hover': {
+				borderColor: palette.hover,
+				color: palette.hover
+			},
+			backgroundColor: base.backgroundColor,
+			...baseButtonStyles
+		},
+		'&.ant-btn-disabled, &.ant-btn[disabled]': {
+			'&:hover': {
+				backgroundColor: disabled.backgroundColor,
+				borderColor: disabled.backgroundColor,
+				color: disabled.color
+			},
+			backgroundColor: disabled.backgroundColor,
+			borderColor: disabled.backgroundColor,
+			color: disabled.color
+		},
+		'&.ant-btn-focused, &.ant-btn:focus': {
+			borderColor: palette.hover,
+			color: base.color
+		},
+		'&.ant-btn-primary': {
+			...baseButtonStyles
+		}
+	}
+}

src/components/assets/styles/colors.ts

@@ -1,3 +1,4 @@
+import { darken } from '@storybook/theming'
 import { ColorManipulationTypes, manipulateColor } from 'components/utils'
 
 const { shade, tint } = ColorManipulationTypes
@@ -72,7 +73,7 @@ export interface ColorsType {
 	greens: { base: string }
 	oranges: { base: string }
 	reds: { base: string }
-	whites: { base: string }
+	whites: { base: string; 'darken-5': string }
 }
 
 const colors: ColorsType = {
@@ -81,7 +82,7 @@ const colors: ColorsType = {
 	greens: { base: green },
 	oranges: { base: orange },
 	reds: { base: red },
-	whites: { base: white }
+	whites: { base: white, 'darken-5': manipulateColor(white, 5, shade) }
 }
 
 export default colors

src/components/assets/styles/themes.ts

@@ -18,6 +18,7 @@ export interface Theme {
 		secondary: string
 	}
 	border: string
+	hover: string
 	primary: string
 	error: string
 	success: string
@@ -36,6 +37,7 @@ const lightPalette: Theme = {
 	},
 	border: blacks['lighten-80'],
 	error: reds.base,
+	hover: blacks['lighten-30'],
 	primary: blues.base,
 	success: greens.base,
 	text: {
@@ -48,18 +50,19 @@ const lightPalette: Theme = {
 const darkPalette: Theme = {
 	action: {
 		active: whites.base,
-		disabled: blacks['lighten-20'] // update when defined by Design
+		disabled: blacks['lighten-10'] // update when defined by Design
 	},
 	background: {
 		primary: blacks.base,
 		secondary: blacks['darken-20']
 	},
-	border: blacks['darken-20'],
+	border: blacks['lighten-20'],
 	error: reds.base,
+	hover: blacks['lighten-60'],
 	primary: blues.base,
 	success: greens.base,
 	text: {
-		disabled: blacks['lighten-20'], // update when defined by Design
+		disabled: blacks['lighten-30'], // update when defined by Design
 		primary: blacks['lighten-50']
 	},
 	warning: oranges.base
@@ -89,7 +92,7 @@ const generateThemedStyles = ({
 	}
 
 	const hover = {
-		borderColor: blues['lighten-10'] // update when defined by Design
+		borderColor: blues['lighten-10']
 	}
 
 	const focus = {