diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js index 1a8f0e7d..fe472c14 100644 --- a/src/components/Button/Button.js +++ b/src/components/Button/Button.js @@ -50,6 +50,12 @@ const StyledButton = styled.button` ${createBoxStyles()}; ${({ active }) => active ? createBorderStyles(true) : createBorderStyles(false)} + ${({ active, theme }) => + active && + `background-image: ${ + theme.hatchedBackground + };`} + &:active { ${({ isDisabled }) => !isDisabled && createBorderStyles(true)} } diff --git a/src/components/common/themes.js b/src/components/common/themes.js index 9fffa61e..7c307541 100644 --- a/src/components/common/themes.js +++ b/src/components/common/themes.js @@ -1,6 +1,9 @@ const themes = {}; themes.default = { + hatchedBackground: + "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIElEQVQYV2P8////fwYGBgZGRkZGMI0hABIFAbgEugAAQFQP/QfjEPcAAAAASUVORK5CYII=)", + canvas: "#ffffff", material: "#ced0cf", materialDark: "#9a9e9c", @@ -38,6 +41,9 @@ themes.default = { }; themes.water = { + hatchedBackground: + "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIElEQVQYV2P8////fwYGBgZGRkZGMI0hABIFAbgEugAAQFQP/QfjEPcAAAAASUVORK5CYII=)", + canvas: "#ffffff", material: "#ced0cf", materialDark: "#9a9e9c", @@ -75,6 +81,9 @@ themes.water = { }; themes.coldGray = { + hatchedBackground: + "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIElEQVQYV2P8////fwYGBgZGRkZGMI0hABIFAbgEugAAQFQP/QfjEPcAAAAASUVORK5CYII=)", + // background: "#CCF5AC", // background: "#416165", background: "#4C6663", @@ -116,6 +125,9 @@ themes.coldGray = { }; themes.lilacRoseDark = { + hatchedBackground: + "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIElEQVQYV2P8////fwYGBgZGRkZGMI0hABIFAbgEugAAQFQP/QfjEPcAAAAASUVORK5CYII=)", + background: "#3B3B58", canvas: "#dab1c7", @@ -155,6 +167,9 @@ themes.lilacRoseDark = { }; themes.violetDark = { + hatchedBackground: + "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIElEQVQYV2P8////fwYGBgZGRkZGMI0hABIFAbgEugAAQFQP/QfjEPcAAAAASUVORK5CYII=)", + canvas: "#c47bcc", material: "#652a6d", materialDark: "#210e23",