Skip to content

Commit

Permalink
BREAKING CHANGE: Update palette of theme (#220)
Browse files Browse the repository at this point in the history 
* refactor: remove deprecated colors

BREAKING CHANGE: new theme does not support outdated variables

* chore: replace ${palette.White} to #fff

* chore: replace Mono_P10 to Border

* chore: replace Mono_P20 to Border

* chore: replace SmarthrGreen to Main

* chore: theme.palette.White to #fff

* chore: replace Mono_P40 to TextGrey

* chore: replace palette.Red to palette.Danger

* chore: replace Mono_P60 to TextGrey

* chore: replace Orange_M30 to Warning

* chore: replace Yellow to Warning

* chore: replace Red to Danger

* chore: replace Blue to Main

* chore: replace White to #fff

* chore: replace Black to TextBlack

* chore: replace Mono_P30 to TextGrey

* chore: change color

* chore: yarn add polished

* feat: add hoverColor method

* chore: modify hover color for PagenationItem

* chore: modify hover color for Button

* chore: modify focus color for Input

* style: change color code to lower case

* style: update snapshots
  • Loading branch information
@im36-123
im36-123 authored Aug 5, 2019
1 parent b6dc81d commit de50fd8
Show file tree
Hide file tree
Showing 29 changed files with 222 additions and 443 deletions.
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@
"author": "SmartHR-UI Team",
"dependencies": {
"lodash.merge": "^4.6.1",
"lodash.range": "^3.2.0"
"lodash.range": "^3.2.0",
"polished": "^3.4.1"
},
"devDependencies": {
"@babel/core": "^7.2.2",
Expand Down
2 changes: 1 addition & 1 deletion src/components/AppBar/AppBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const Wrapper = styled.div`
return css`
padding: ${pcPadding};
background: ${palette.SmartHRGreen};
background: ${palette.Main};
@media screen and (max-width: ${size.mediaQuery.tablet}px) {
padding: ${tabletPadding};
Expand Down
109 changes: 29 additions & 80 deletions src/components/AppBar/__snapshots__/AppBar.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,33 +27,16 @@ exports[`AppBar should be match snapshot 1`] = `
},
"palette": Object {
"Background": "#f5f6fa",
"Background_Omen": "#009ea6",
"Background_Omen_M07": "#0dbac1",
"Black": "#333",
"Blue": "#0081cc",
"Blue_M20": "#4dbdff",
"Blue_P30": "#005180",
"GreenGray": "#6bb0b3",
"GreenGray_M20": "#f0f9fa",
"Border": "#d6d6d6",
"Column": "#f9f9f9",
"Danger": "#ef475b",
"Main": "#00a5ab",
"Main_P10": "#008d91",
"Main_P20": "#007378",
"Mono_P03": "#f9f9f9",
"Mono_P05": "#f5f5f5",
"Mono_P10": "#eaeaea",
"Mono_P20": "#d6d6d6",
"Mono_P30": "#c1c1c1",
"Mono_P40": "#adadad",
"Mono_P60": "#858585",
"Mono_P80": "#5c5c5c",
"Orange": "#f80",
"Orange_M30": "#ffac4d",
"Orange_P10": "#e67a00",
"Overlay": "rgba(51, 51, 51, 0.4)",
"Red": "#ef475b",
"SmartHRGreen": "#00c4cc",
"White": "#fff",
"Yellow": "#fc0",
"Overlay": "rgba(0,0,0,0.15)",
"Scrim": "rgba(0,0,0,0.5)",
"TextBlack": "#333",
"TextGrey": "#767676",
"Warning": "#ff8800",
"hoverColor": [Function],
},
"size": Object {
"font": Object {
Expand Down Expand Up @@ -107,33 +90,16 @@ exports[`AppBar should be match snapshot 1`] = `
},
"palette": Object {
"Background": "#f5f6fa",
"Background_Omen": "#009ea6",
"Background_Omen_M07": "#0dbac1",
"Black": "#333",
"Blue": "#0081cc",
"Blue_M20": "#4dbdff",
"Blue_P30": "#005180",
"GreenGray": "#6bb0b3",
"GreenGray_M20": "#f0f9fa",
"Border": "#d6d6d6",
"Column": "#f9f9f9",
"Danger": "#ef475b",
"Main": "#00a5ab",
"Main_P10": "#008d91",
"Main_P20": "#007378",
"Mono_P03": "#f9f9f9",
"Mono_P05": "#f5f5f5",
"Mono_P10": "#eaeaea",
"Mono_P20": "#d6d6d6",
"Mono_P30": "#c1c1c1",
"Mono_P40": "#adadad",
"Mono_P60": "#858585",
"Mono_P80": "#5c5c5c",
"Orange": "#f80",
"Orange_M30": "#ffac4d",
"Orange_P10": "#e67a00",
"Overlay": "rgba(51, 51, 51, 0.4)",
"Red": "#ef475b",
"SmartHRGreen": "#00c4cc",
"White": "#fff",
"Yellow": "#fc0",
"Overlay": "rgba(0,0,0,0.15)",
"Scrim": "rgba(0,0,0,0.5)",
"TextBlack": "#333",
"TextGrey": "#767676",
"Warning": "#ff8800",
"hoverColor": [Function],
},
"size": Object {
"font": Object {
Expand Down Expand Up @@ -170,7 +136,7 @@ exports[`AppBar should be match snapshot 1`] = `
"componentStyle": ComponentStyle {
"componentId": "sc-bdVaJa",
"isStatic": false,
"lastClassName": "jkxwsS",
"lastClassName": "ineNls",
"rules": Array [
"
",
Expand Down Expand Up @@ -214,33 +180,16 @@ exports[`AppBar should be match snapshot 1`] = `
},
"palette": Object {
"Background": "#f5f6fa",
"Background_Omen": "#009ea6",
"Background_Omen_M07": "#0dbac1",
"Black": "#333",
"Blue": "#0081cc",
"Blue_M20": "#4dbdff",
"Blue_P30": "#005180",
"GreenGray": "#6bb0b3",
"GreenGray_M20": "#f0f9fa",
"Border": "#d6d6d6",
"Column": "#f9f9f9",
"Danger": "#ef475b",
"Main": "#00a5ab",
"Main_P10": "#008d91",
"Main_P20": "#007378",
"Mono_P03": "#f9f9f9",
"Mono_P05": "#f5f5f5",
"Mono_P10": "#eaeaea",
"Mono_P20": "#d6d6d6",
"Mono_P30": "#c1c1c1",
"Mono_P40": "#adadad",
"Mono_P60": "#858585",
"Mono_P80": "#5c5c5c",
"Orange": "#f80",
"Orange_M30": "#ffac4d",
"Orange_P10": "#e67a00",
"Overlay": "rgba(51, 51, 51, 0.4)",
"Red": "#ef475b",
"SmartHRGreen": "#00c4cc",
"White": "#fff",
"Yellow": "#fc0",
"Overlay": "rgba(0,0,0,0.15)",
"Scrim": "rgba(0,0,0,0.5)",
"TextBlack": "#333",
"TextGrey": "#767676",
"Warning": "#ff8800",
"hoverColor": [Function],
},
"size": Object {
"font": Object {
Expand Down Expand Up @@ -270,7 +219,7 @@ exports[`AppBar should be match snapshot 1`] = `
}
>
<div
className="sc-bdVaJa jkxwsS"
className="sc-bdVaJa ineNls"
/>
</StyledComponent>
</styled.div>
Expand Down
32 changes: 16 additions & 16 deletions src/components/Balloon/Balloon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,41 +51,41 @@ const Base = styled.div`
}
&.light {
background-color: ${palette.White};
color: ${palette.Black};
background-color: #fff;
color: ${palette.TextBlack};
}
&.dark {
background-color: ${palette.Black};
color: ${palette.White};
background-color: ${palette.TextBlack};
color: #fff;
}
&.light.top {
&::before {
border-color: transparent transparent ${palette.Mono_P20};
border-color: transparent transparent ${palette.Border};
}
&::after {
border-color: transparent transparent ${palette.White};
border-color: transparent transparent #fff;
}
}
&.light.bottom {
&::before {
border-color: ${palette.Mono_P20} transparent transparent;
border-color: ${palette.Border} transparent transparent;
}
&::after {
border-color: ${palette.White} transparent transparent;
border-color: #fff transparent transparent;
}
}
&.dark.top {
&::before,
&::after {
border-color: transparent transparent ${palette.Black};
border-color: transparent transparent ${palette.TextBlack};
}
}
&.dark.bottom {
&::before,
&::after {
border-color: ${palette.Black} transparent transparent;
border-color: ${palette.TextBlack} transparent transparent;
}
}
Expand Down Expand Up @@ -153,16 +153,16 @@ const Base = styled.div`
}
&.light {
&::before {
border-color: transparent ${palette.Mono_P20} transparent transparent;
border-color: transparent ${palette.Border} transparent transparent;
}
&::after {
border-color: transparent ${palette.White} transparent transparent;
border-color: transparent #fff transparent transparent;
}
}
&.dark {
&::before,
&::after {
border-color: transparent ${palette.Black} transparent transparent;
border-color: transparent ${palette.TextBlack} transparent transparent;
}
}
}
Expand All @@ -179,16 +179,16 @@ const Base = styled.div`
}
&.light {
&::before {
border-color: transparent transparent transparent ${palette.Mono_P20};
border-color: transparent transparent transparent ${palette.Border};
}
&::after {
border-color: transparent transparent transparent ${palette.White};
border-color: transparent transparent transparent #fff;
}
}
&.dark {
&::before,
&::after {
border-color: transparent transparent transparent ${palette.Black};
border-color: transparent transparent transparent ${palette.TextBlack};
}
}
}
Expand Down
26 changes: 13 additions & 13 deletions src/components/Button/Button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ const Base: any = styled.div`
width: ${({ wide }: any) => (wide ? '100%;' : 'auto')};
border: none;
border-radius: ${frame.border.radius.m};
color: ${palette.White};
color: #fff;
font-size: ${size.font.tall}px;
font-weight: bold;
text-align: center;
Expand Down Expand Up @@ -106,44 +106,44 @@ const Base: any = styled.div`
background-color: ${palette.Main};
}
&.danger {
background-color: ${palette.Red};
background-color: ${palette.Danger};
}
&.sub-a {
background-color: #5e718d;
}
&.sub-b {
border: 1px solid ${palette.Mono_P20};
background-color: ${palette.White};
color: ${palette.Mono_P60};
border: 1px solid ${palette.Border};
background-color: #fff;
color: ${palette.TextGrey};
}
&.sub-c {
border: 1px solid ${palette.White};
border: 1px solid #fff;
background-color: transparent;
color: ${palette.White};
color: #fff;
}
&.hover {
&.primary {
background-color: ${palette.Main_P10};
background-color: ${palette.hoverColor(palette.Main)};
}
&.danger {
background-color: #de283d;
background-color: ${palette.hoverColor(palette.Danger)};
}
&.sub-a {
background-color: #414e62;
}
&.sub-b {
background-color: ${palette.Mono_P05};
background-color: ${palette.hoverColor('#fff')};
}
&.sub-c {
background-color: ${palette.White};
background-color: #fff;
color: ${palette.Main};
}
}
&[disabled] {
background-color: ${palette.Mono_P10};
color: ${palette.Mono_P30};
background-color: ${palette.Border};
color: ${palette.TextGrey};
pointer-events: none;
}
`
Expand Down
12 changes: 6 additions & 6 deletions src/components/Checkbox/Checkbox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ class CheckboxComponent extends React.PureComponent<Props & InjectedProps> {
name="check"
width={12}
height={12}
fill={themeColor === 'light' ? theme.palette.White : theme.palette.Main}
fill={themeColor === 'light' ? '#fff' : theme.palette.Main}
/>
</IconWrap>
)}
Expand Down Expand Up @@ -61,7 +61,7 @@ const Wrapper = styled.div`
flex-shrink: 0;
border-radius: ${frame.border.radius.s};
border: ${frame.border.default};
background-color: ${palette.White};
background-color: #fff;
line-height: 1;
box-sizing: border-box;
Expand All @@ -71,19 +71,19 @@ const Wrapper = styled.div`
}
&.disabled {
background-color: ${palette.Mono_P10};
border-color: ${palette.Mono_P10};
background-color: ${palette.Border};
border-color: ${palette.Border};
&.active {
border-color: ${palette.Mono_P10};
border-color: ${palette.Border};
}
}
&.dark {
border-color: ${palette.Main};
&.active {
background-color: ${palette.White};
background-color: #fff;
}
}
`
Expand Down
Loading

0 comments on commit de50fd8

Please sign in to comment.