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

Web: Components: ToggleButton: fixed colors for dark theme

Browse Source
This commit is contained in:
Nikita Gopienko 2022-10-04 17:19:20 +03:00
parent a6448a476f
commit b56a90e917
2 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/components/themes/dark.js
View File

@ -1614,10 +1614,11 @@ const Dark = {
}, },
toggleButton: { toggleButton: {
fillColor: grayMaxLight, fillColor: "#F0F0F0",
fillColorOff: "#292929", fillColorOff: "#292929",
disableFillColor: black, disableFillColor: black,
disableFillColorOff: "#545454",
borderColor: "#474747", borderColor: "#474747",
borderColorOff: "#474747", borderColorOff: "#474747",
@ -1625,11 +1626,11 @@ const Dark = {
disableBorderColor: "#474747", disableBorderColor: "#474747",
disableBorderColorOff: "#646464", disableBorderColorOff: "#646464",
fillCircleColor: "#FFFFFF", fillCircleColor: "#292929",
fillCircleColorOff: grayMaxLight, fillCircleColorOff: grayMaxLight,
disableFillCircleColor: "#333333", disableFillCircleColor: "#545454",
disableFillCircleColorOff: "#797979", disableFillCircleColorOff: black,
}, },
contextMenuButton: { contextMenuButton: {

8
packages/components/toggle-button/styled-toggle-button.js
View File

@ -36,9 +36,12 @@ const ToggleButtonContainer = styled.label`
rect { rect {
fill: ${props.isChecked fill: ${props.isChecked
? props.theme.toggleButton.disableFillColor ? props.theme.toggleButton.disableFillColor
: props.theme.toggleButton.fillColorOff}; : props.theme.toggleButton.disableFillColorOff};
stroke-width: 1px; stroke-width: 1px;
stroke-linecap: round; stroke-linecap: round;
stroke: ${props.isChecked
? props.theme.toggleButton.borderColor
: props.theme.toggleButton.borderColorOff};
} }
circle { circle {
fill: ${props.isChecked fill: ${props.isChecked
@ -52,6 +55,9 @@ const ToggleButtonContainer = styled.label`
? props.theme.toggleButton.fillColor ? props.theme.toggleButton.fillColor
: props.theme.toggleButton.fillColorOff}; : props.theme.toggleButton.fillColorOff};
stroke-width: 1px; stroke-width: 1px;
stroke: ${props.isChecked
? props.theme.toggleButton.borderColor
: props.theme.toggleButton.borderColor};
} }
circle { circle {
fill: ${props.isChecked fill: ${props.isChecked