IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web:Components:Button: add support dark-theme for button

Browse Source
This commit is contained in:
Timofey Boyko 2021-12-15 16:17:36 +08:00
parent 7b21c03357
commit 0dcafb8184
2 changed files with 45 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/asc-web-components/button/index.js
View File

@ -16,9 +16,7 @@ const Icon = ({ size, primary, icon, isHovered }) => (
? isHovered
? icon.props.hoveredcolor
: icon.props.color
: primary
? "#FFFFFF"
: "#333333",
: "",
})}
</div>
);

44
packages/asc-web-components/button/styled-button.js
View File

@ -25,6 +25,17 @@ const activeCss = css`
border: ${(props) => props.theme.button.border.primaryActive};
box-sizing: ${(props) => props.theme.button.boxSizing};
`}
.btnIcon {
svg {
path {
fill: ${(props) =>
props.primary
? props.theme.button.color.primaryActive
: props.theme.button.color.baseActive};
}
}
}
`;
const hoverCss = css`
@ -48,6 +59,17 @@ const hoverCss = css`
border: ${(props) => props.theme.button.border.primaryHover};
box-sizing: ${(props) => props.theme.button.boxSizing};
`}
.btnIcon {
svg {
path {
fill: ${(props) =>
props.primary
? props.theme.button.color.primaryHover
: props.theme.button.color.baseHover};
}
}
}
`;
const disableCss = css`
@ -71,6 +93,17 @@ const disableCss = css`
border: ${(props) => props.theme.button.border.primaryDisabled};
box-sizing: ${(props) => props.theme.button.boxSizing};
`}
.btnIcon {
svg {
path {
fill: ${(props) =>
props.primary
? props.theme.button.color.primaryDisabled
: props.theme.button.color.baseDisabled};
}
}
}
`;
const heightStyle = (props) => props.theme.button.height[props.size];
@ -136,6 +169,17 @@ const StyledButton = styled(ButtonWrapper).attrs((props) => ({
${(props) => props.scale && `width: 100%;`}
.btnIcon {
svg {
path {
fill: ${(props) =>
props.primary
? props.theme.button.color.primary
: props.theme.button.color.base};
}
}
}
padding: ${(props) =>
(props.size === "large" &&
(props.primary