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: { 'darken-5': string; base: string }
+	whites: { base: string; 'darken-5': string }
 }
 
 const colors: ColorsType = {