@@ -1166,27 +1129,27 @@ exports[`Storyshots Skeleton Count 1`] = `
className="light storyWrapper-0-2-2"
>
@@ -1198,7 +1161,7 @@ exports[`Storyshots Skeleton Default 1`] = `
className="light storyWrapper-0-2-2"
>
diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
index e2872619..1eae87b7 100644
--- a/src/components/Button/Button.stories.tsx
+++ b/src/components/Button/Button.stories.tsx
@@ -1,6 +1,4 @@
import { action } from '@storybook/addon-actions'
-import { createUseStyles } from 'react-jss'
-import GoogleOutlined from '@ant-design/icons/GoogleOutlined'
import React from 'react'
import { Button, ButtonProps } from '.'
import { Meta, Story } from '@storybook/react/types-6-0'
@@ -40,33 +38,3 @@ PrimaryDisabled.args = {
disabled: true,
primary: true
}
-
-// Google Icon Button
-const useStyles = createUseStyles({
- google: {
- '&:hover': {
- backgroundColor: '#e36e60',
- color: 'white'
- },
- backgroundColor: '#dd4b39',
- border: 'none',
- color: 'white'
- }
-})
-
-const GoogleTemplate: Story = ({ ...args }: ButtonProps) => {
- const classes = useStyles()
- args.classes = [classes.google]
- return (
-
- )
-}
-
-export const Google = GoogleTemplate.bind({})
-Google.args = {
- children: 'Sign in with Google',
- classes: ['google']
-}
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 7764c5de..20f4cef1 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -3,11 +3,27 @@ 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 { Button as AntDButton, Spin } from 'antd'
import React, { FC, ReactNode } from 'react'
+import { styleguide, ThemeType } from '../assets/styles'
+
+const {
+ colors: { blacks }
+} = styleguide
+
+const { dark, light } = ThemeType
+
+const useStyles = createUseStyles({
+ '@global': {
+ [`.${dark} button`]: generateButtonStyles(dark),
+ button: generateButtonStyles(light)
+ }
+})
export interface ButtonProps extends CommonComponentProps {
/**
@@ -67,6 +83,8 @@ export const Button: FC = ({
type: primary ? 'primary' : 'default'
}
+ useStyles()
+
return loading ? (
) : (
@@ -78,7 +96,13 @@ export const Button: FC = ({
+
}
/>
diff --git a/src/components/Button/utils.ts b/src/components/Button/utils.ts
new file mode 100644
index 00000000..ddf68834
--- /dev/null
+++ b/src/components/Button/utils.ts
@@ -0,0 +1,89 @@
+import { styleguide, themedStyles, ThemeType } from 'components/assets/styles'
+
+const { borderRadius, colors } = styleguide
+const { blacks } = colors
+
+const { dark, light } = ThemeType
+
+const buttonPalette = {
+ [dark]: {
+ color: blacks['lighten-50'],
+ disabledBgColor: blacks.base,
+ hoverColor: blacks['lighten-80'],
+ primaryBackgroundColor: blacks['lighten-30'],
+ primaryDisabledBgColor: blacks['lighten-10'],
+ primaryDisabledTextColor: blacks['darken-20'],
+ primaryHoverBgColor: blacks['lighten-40']
+ },
+ [light]: {
+ color: blacks['lighten-30'],
+ disabledBgColor: blacks['lighten-90'],
+ hoverColor: blacks['darken-20'],
+ primaryBackgroundColor: blacks.base,
+ primaryDisabledBgColor: blacks['lighten-90'],
+ primaryDisabledTextColor: blacks['lighten-80'],
+ primaryHoverBgColor: blacks['lighten-50']
+ }
+}
+
+export const generateButtonStyles = (themeType: ThemeType) => {
+ const { base, disabled } = themedStyles[themeType]
+
+ const {
+ color,
+ disabledBgColor,
+ hoverColor,
+ primaryBackgroundColor,
+ primaryDisabledBgColor,
+ primaryDisabledTextColor,
+ primaryHoverBgColor
+ } = buttonPalette[themeType]
+
+ const baseButtonStyles = {
+ borderColor: base.borderColor,
+ borderRadius,
+ color
+ }
+
+ const activeStyles = {
+ borderColor: hoverColor,
+ color: hoverColor
+ }
+
+ return {
+ '&.ant-btn': {
+ '&:hover': activeStyles,
+ backgroundColor: base.backgroundColor,
+ ...baseButtonStyles,
+ '&.ant-btn-primary': {
+ '&.ant-btn-disabled, &.ant-btn[disabled]': {
+ '&:hover': {
+ backgroundColor: primaryDisabledBgColor,
+ color: primaryDisabledTextColor
+ },
+ backgroundColor: primaryDisabledBgColor,
+ borderColor: primaryDisabledBgColor,
+ color: primaryDisabledTextColor
+ },
+ '&:hover': {
+ backgroundColor: primaryHoverBgColor,
+ borderColor: primaryHoverBgColor,
+ color: blacks['lighten-80']
+ },
+ backgroundColor: primaryBackgroundColor,
+ color: blacks['lighten-80']
+ }
+ },
+ '&.ant-btn-active': { ...baseButtonStyles, ...activeStyles },
+ '&.ant-btn-disabled, &.ant-btn[disabled]': {
+ '&:hover': {
+ backgroundColor: disabledBgColor,
+ borderColor: base.borderColor,
+ color: disabled.color
+ },
+ backgroundColor: disabledBgColor,
+ color: disabled.color
+ },
+ '&.ant-btn-focused, &.ant-btn:focus': activeStyles
+ }
+}
diff --git a/src/components/assets/styles/colors.ts b/src/components/assets/styles/colors.ts
index 15fb6bcb..e83a22c6 100644
--- a/src/components/assets/styles/colors.ts
+++ b/src/components/assets/styles/colors.ts
@@ -72,7 +72,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 = {