Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Theme] - Change Primary Buttons colors for Secondary Theme #651

Merged
merged 9 commits into from
Dec 17, 2020
Merged

[Theme] - Change Primary Buttons colors for Secondary Theme #651

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
7acf6f8
change secondary theme buttons colors
daigof Dec 16, 2020
07dadc7
disabled button color border
daigof Dec 16, 2020
e96b584
refactor out theme styles
daigof Dec 17, 2020
9d3e0dd
Merge branch 'master' into button-theme-recolor
daigof Dec 17, 2020
01a4e1d
Merge branch 'master' into refactor-out-types-conditional
daigof Dec 17, 2020
f3469d8
restore font weight position
daigof Dec 17, 2020
a79a181
Merge branch 'refactor-out-types-conditional' into button-theme-recolor
daigof Dec 17, 2020
2206e6b
added comment
daigof Dec 17, 2020
208d66a
update snapshot build
daigof Dec 17, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/shared-components/button/shared-components/loader/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,9 @@ const statefulLoader = keyframes`
`;

const primaryLoadingStyles = (theme: ThemeType) => `
background-color: ${theme.COLORS.white};
background-color: ${
theme.__type === 'primary' ? theme.COLORS.white : theme.COLORS.primary
daigof marked this conversation as resolved.
Show resolved Hide resolved
};
`;

const accentLoadingStyles = (buttonColor: ThemeColors) => `
Expand Down
30 changes: 23 additions & 7 deletions src/shared-components/button/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,21 +7,37 @@ import { textColorsAssociatedWithColors } from './constants';

import { ButtonTypeWithAction } from '.';

const primaryStyles = (buttonColor: ThemeColors, theme: ThemeType) => `
background-color: ${buttonColor};
border-color: ${buttonColor};
color: ${theme.COLORS.white};
fill: ${theme.COLORS.white};
const primaryStyles = (buttonColor: ThemeColors, theme: ThemeType) => {
let backgroundColor = buttonColor;
daigof marked this conversation as resolved.
Show resolved Hide resolved
// If it is not a custom color and the theme is secondary
if (
backgroundColor === theme.COLORS.primary &&
theme.__type === 'secondary'
) {
backgroundColor = theme.COLORS.secondary;
}

const fontColor =
theme.__type === 'primary' ? theme.COLORS.white : theme.COLORS.primary;

return `
background-color: ${backgroundColor};
border-color: ${backgroundColor};
color: ${fontColor};
fill: ${fontColor};

&:visited,
&:hover {
opacity: 0.8;
}

&:focus,
&:not([href]):not([tabindex]):hover,
&:not([href]):not([tabindex]):focus {
color: ${theme.COLORS.white};
color: ${fontColor};
}
`;
};

const secondaryStyles = (
isLoading: boolean,
Expand Down Expand Up @@ -113,7 +129,7 @@ const loadingStyles = `

const disabledStyles = (theme: ThemeType) => `
background-color: ${theme.COLORS.defaultLight};
border-color: ${theme.COLORS.border};
border-color: ${theme.COLORS.defaultLight};
daigof marked this conversation as resolved.
Show resolved Hide resolved
color: ${theme.COLORS.textDisabled};
cursor: not-allowed;
fill: ${theme.COLORS.textDisabled};
Expand Down