diff --git a/package.json b/package.json index 651f46f..ad434b3 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "react", "typescript" ], - "version": "2.1.17", + "version": "2.1.18", "main": "./dist/index.cjs.js", "module": "./dist/index.esm.js", "types": "./dist/index.d.ts", diff --git a/src/components/atoms/Button/Button.ts b/src/components/atoms/Button/Button.ts index be795a2..c430c60 100644 --- a/src/components/atoms/Button/Button.ts +++ b/src/components/atoms/Button/Button.ts @@ -100,7 +100,10 @@ const colorModeVariant = getVariant({ ` default: - return css`` + return css` + background-color: systemPrimary; + color: systemWhite; + ` } }, danger: ({ variant }) => { @@ -124,7 +127,10 @@ const colorModeVariant = getVariant({ ` default: - return css`` + return css` + background-color: systemDanger; + color: systemWhite; + ` } }, warning: ({ variant }) => { @@ -148,7 +154,10 @@ const colorModeVariant = getVariant({ ` default: - return css`` + return css` + background-color: systemWarning; + color: systemWhite; + ` } }, safe: ({ variant }) => { @@ -172,7 +181,10 @@ const colorModeVariant = getVariant({ ` default: - return css`` + return css` + background-color: systemSafe; + color: systemWhite; + ` } }, }, @@ -209,11 +221,11 @@ const disabledStyleResolver = ({ disabled, variant }: ButtonProps) => { case 'ghost': return css` background-color: transparent; + box-shadow: none; &:hover, &:active { - box-shadow: rgba(0, 0, 0, 0.1) 0px 7px 8px -4px, - rgba(0, 0, 0, 0.02) 0px 12px 17px 2px; + box-shadow: none; } ` @@ -275,6 +287,12 @@ const Button = styled.buttonBox` rgba(0, 0, 0, 0.12) 0px 3px 14px 2px; } + &:focus { + outline-width: 1px !important; + outline-style: solid !important; + outline-color: systemPrimary !important; + } + ${sizeVariant} ${modeVariant} ${colorModeVariant}