houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Apply new theme (#449)

Browse Source 
* Apply new theme

* Fix storybook

* Fixes

* Fix regressions
This commit is contained in:
Charles Bochet
2023-06-26 19:13:04 -07:00
committed by GitHub
parent 2a42ebb70d
commit d6364a9fdd
115 changed files with 818 additions and 721 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/src/modules/ui/components/buttons/IconButton.tsx
+4 -4
View File
@@ -2,11 +2,11 @@ import styled from '@emotion/styled';
const StyledIconButton = styled.button`
align-items: center;
background: ${(props) => props.theme.blue};
background: ${({ theme }) => theme.color.blue};
border: none;
border-radius: 50%;
color: ${(props) => props.theme.text0};
color: ${({ theme }) => theme.font.color.inverted};
cursor: pointer;
display: flex;
@@ -19,8 +19,8 @@ const StyledIconButton = styled.button`
width: 20px;
&:disabled {
background: ${(props) => props.theme.quaternaryBackground};
color: ${(props) => props.theme.text40};
background: ${({ theme }) => theme.background.quaternary};
color: ${({ theme }) => theme.font.color.tertiary};
cursor: default;
}
`;
front/src/modules/ui/components/buttons/PrimaryButton.tsx
+8 -7
View File
@@ -10,18 +10,19 @@ const StyledButton = styled.button<{ fullWidth: boolean }>`
align-items: center;
background: radial-gradient(
50% 62.62% at 50% 0%,
${({ theme }) => theme.text60} 0%,
${({ theme }) => theme.text80} 100%
${({ theme }) => theme.font.color.secondary} 0%,
${({ theme }) => theme.font.color.primary} 100%
);
border: 1px solid ${({ theme }) => theme.primaryBorder};
border: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: 8px;
box-shadow: 0px 0px 4px ${({ theme }) => theme.mediumBackgroundTransparent} 0%,
0px 2px 4px ${({ theme }) => theme.lightBackgroundTransparent} 0%;
color: ${(props) => props.theme.text0};
box-shadow: 0px 0px 4px ${({ theme }) => theme.background.transparent.medium}
0%,
0px 2px 4px ${({ theme }) => theme.background.transparent.light} 0%;
color: ${({ theme }) => theme.font.color.inverted};
cursor: pointer;
display: flex;
flex-direction: row;
font-weight: ${({ theme }) => theme.fontWeightBold};
font-weight: ${({ theme }) => theme.font.weight.semiBold};
gap: ${({ theme }) => theme.spacing(2)};
justify-content: center;
padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(3)};
front/src/modules/ui/components/buttons/SecondaryButton.tsx
+8 -7
View File
@@ -8,16 +8,17 @@ type OwnProps = {
const StyledButton = styled.button<{ fullWidth: boolean }>`
align-items: center;
background: ${({ theme }) => theme.primaryBackground};
border: 1px solid ${({ theme }) => theme.primaryBorder};
background: ${({ theme }) => theme.background.primary};
border: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: 8px;
box-shadow: 0px 0px 4px ${({ theme }) => theme.mediumBackgroundTransparent} 0%,
0px 2px 4px ${({ theme }) => theme.lightBackgroundTransparent} 0%;
color: ${(props) => props.theme.text80};
box-shadow: 0px 0px 4px ${({ theme }) => theme.background.transparent.medium}
0%,
0px 2px 4px ${({ theme }) => theme.background.transparent.light} 0%;
color: ${({ theme }) => theme.font.color.primary};
cursor: pointer;
display: flex;
flex-direction: row;
font-weight: ${({ theme }) => theme.fontWeightBold};
font-weight: ${({ theme }) => theme.font.weight.semiBold};
gap: 8px;
justify-content: center;
padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(3)};
@@ -25,7 +26,7 @@ const StyledButton = styled.button<{ fullWidth: boolean }>`
width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
&:hover {
background: ${({ theme }) => theme.tertiaryBackground};
background: ${({ theme }) => theme.background.tertiary};
}
`;