Skip to content
This repository was archived by the owner on Mar 25, 2025. It is now read-only.

feat(theme): add more color slots #248

Merged
merged 1 commit into from
Nov 9, 2022
Merged

feat(theme): add more color slots #248

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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: 2 additions & 2 deletions packages/core/src/Button/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,14 +72,14 @@ export const NativeButton = styled.button<{
? css`
background-color: ${theme.color.elementPrimary()};
box-shadow: ${theme.shadow.primaryButton};
border: 2px solid ${theme.color.textPrimary()};
border: 2px solid ${theme.color.elementBorderFocus()};
`
: undefined};
}

&:active {
background-color: ${theme.color.textPrimary()};
box-shadow: 0 0 0 4px ${theme.color.elementPrimary(opacity[24])};
box-shadow: 0 0 0 4px ${theme.color.elementBorderActive(opacity[24])};
}

&:disabled {
Expand Down
4 changes: 2 additions & 2 deletions packages/core/src/Checkbox/__snapshots__/index.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -290,7 +290,7 @@ exports[`Checkbox Checked 2`] = `
content: '';
width: 5px;
height: 10px;
border: solid #fff;
border: solid rgb(255,255,255);
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
Expand Down Expand Up @@ -488,7 +488,7 @@ exports[`Checkbox Checked 3`] = `
content: '';
width: 10px;
height: 2px;
background-color: #fff;
background-color: rgb(255,255,255);
border-radius: 2px;
}

Expand Down
4 changes: 2 additions & 2 deletions packages/core/src/Checkbox/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ const CSSCheckboxChecked = styled(BaseCheckbox)`
content: '';
width: 5px;
height: 10px;
border: solid #fff;
border: solid ${({ theme }) => theme.color.element17()};
border-width: 0 2px 2px 0;
transform: rotate(45deg);
margin-bottom: 3px;
Expand All @@ -154,7 +154,7 @@ const CSSCheckboxIndeterminate = styled(BaseCheckbox)`
content: '';
width: 10px;
height: 2px;
background-color: #fff;
background-color: ${({ theme }) => theme.color.element17()};
border-radius: ${shape.radius.small};
}
`
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/Table/__snapshots__/index.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ exports[`Tables Table (full) 1`] = `
content: '';
width: 5px;
height: 10px;
border: solid #fff;
border: solid rgb(255,255,255);
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
Expand Down
6 changes: 6 additions & 0 deletions packages/core/src/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,9 @@ export interface Color {
readonly element14: CSSColor
readonly element15: CSSColor
readonly element16: CSSColor
readonly element17: CSSColor
readonly elementBorderActive: CSSColor
readonly elementBorderFocus: CSSColor
readonly elementPrimary: CSSColor
readonly elementHalfPrimary: CSSColor
readonly elementError: CSSColor
Expand Down Expand Up @@ -198,6 +201,9 @@ const generateDefaultColors = (
element14: palette.grey64,
element15: palette.grey98,
element16: palette.grey98,
element17: palette.white,
elementBorderActive: palette[`${color}500` as ColorName],
elementBorderFocus: palette[`${color}800` as ColorName],
elementPrimary: palette[`${color}500` as ColorName],
elementHalfPrimary: palette[`${color}600` as ColorName],
elementError: palette.red700,
Expand Down