Skip to content

Commit 696f160

Browse files
martimalekMartí Malek
martimalek
and
Martí Malek
authored
refactor: migrate first 5 components to SemanticColors (#284)
* refactor: migrate first 5 components to SemanticColors * chore: move TODO to not fail at linting Co-authored-by: Martí Malek <[email protected]>
1 parent 3d587a7 commit 696f160

File tree

13 files changed

+63
-58
lines changed

13 files changed

+63
-58
lines changed

‎src/components/Accordion/Accordion.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import React, { ReactElement } from 'react';
22
import styled from 'styled-components';
33

4-
import { Colors } from '../../essentials';
4+
import { SemanticColors } from '../../essentials';
55
import { Box } from '../Box/Box';
66
import { Compact } from './components/Compact';
77
import { DefaultPanel } from './components/Default';
88
import { AccordionProps } from './types';
99

1010
const HorizontalDivider = styled(Box)`
1111
border: 0;
12-
border-top: solid 0.0625rem ${Colors.AUTHENTIC_BLUE_200};
12+
border-top: solid 0.0625rem ${SemanticColors.border.primary};
1313
`;
1414

1515
const HorizontalDividerTop = HorizontalDivider;

‎src/components/Accordion/components/ChevronDown.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import styled from 'styled-components';
22
import { ChevronDownIcon } from '../../../icons';
3-
import { Colors } from '../../../essentials';
3+
import { SemanticColors } from '../../../essentials';
44

55
export const ChevronDown = styled(ChevronDownIcon)`
6-
color: ${props => (props.color ? props.color : Colors.AUTHENTIC_BLUE_900)};
6+
color: ${props => (props.color ? props.color : SemanticColors.icon.primary)};
77
`;

‎src/components/Accordion/components/ChevronUp.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import styled from 'styled-components';
22
import { ChevronUpIcon } from '../../../icons';
3-
import { Colors } from '../../../essentials';
3+
import { SemanticColors } from '../../../essentials';
44

55
export const ChevronUp = styled(ChevronUpIcon)`
6-
color: ${props => (props.color ? props.color : Colors.AUTHENTIC_BLUE_900)};
6+
color: ${props => (props.color ? props.color : SemanticColors.icon.primary)};
77
`;

‎src/components/Accordion/components/Compact.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useState, ReactElement } from 'react';
22
import styled from 'styled-components';
33

4-
import { Colors } from '../../../essentials';
4+
import { SemanticColors } from '../../../essentials';
55
import { Box } from '../../Box/Box';
66
import { Headline } from '../../Headline/Headline';
77
import { Header } from './Header';
@@ -19,15 +19,15 @@ const StyleHeadline = styled(Headline)``;
1919

2020
const PanelHeader = styled(Header)`
2121
&:hover ${StyleHeadline} {
22-
color: ${Colors.ACTION_BLUE_1000};
22+
color: ${SemanticColors.text.linkHover};
2323
}
2424
2525
&:hover ${ChevronDown} {
26-
color: ${Colors.ACTION_BLUE_1000};
26+
color: ${SemanticColors.text.linkHover};
2727
}
2828
2929
&:hover ${ChevronUp} {
30-
color: ${Colors.ACTION_BLUE_1000};
30+
color: ${SemanticColors.text.linkHover};
3131
}
3232
`;
3333

‎src/components/Accordion/components/Default.tsx

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useState, PropsWithChildren, ReactElement } from 'react';
22
import styled from 'styled-components';
33

4-
import { Colors } from '../../../essentials';
4+
import { SemanticColors } from '../../../essentials';
55
import { Text } from '../../Text/Text';
66
import { Box } from '../../Box/Box';
77
import { Headline } from '../../Headline/Headline';
@@ -12,47 +12,47 @@ import { Description } from './Description';
1212
import { AccordionProps } from '../types';
1313

1414
const ButtonLabel = styled(Text).attrs({ as: 'p' })`
15-
color: ${Colors.ACTION_BLUE_900};
15+
color: ${SemanticColors.text.link};
1616
`;
1717

1818
const PanelHeader = styled(Header)`
1919
&:hover {
20-
background-color: ${Colors.ACTION_BLUE_50};
20+
background-color: ${SemanticColors.background.info};
2121
}
2222
2323
&:hover ${ButtonLabel} {
24-
color: ${Colors.ACTION_BLUE_1000};
24+
color: ${SemanticColors.text.linkHover};
2525
}
2626
2727
&:hover ${ChevronDown} {
28-
color: ${Colors.ACTION_BLUE_1000};
28+
color: ${SemanticColors.text.linkHover};
2929
}
3030
`;
3131

3232
const CardHeader = styled(Header).attrs({ p: '3' })`
33-
background-color: ${Colors.AUTHENTIC_BLUE_50};
33+
background-color: ${SemanticColors.background.secondary};
3434
border-radius: 0.3125rem 0.3125rem 0 0;
3535
3636
&:hover {
37-
background-color: ${Colors.ACTION_BLUE_50};
37+
background-color: ${SemanticColors.background.info};
3838
}
3939
4040
&:hover ${ButtonLabel} {
41-
color: ${Colors.ACTION_BLUE_1000};
41+
color: ${SemanticColors.text.linkHover};
4242
}
4343
4444
&:hover ${ChevronUp} {
45-
color: ${Colors.ACTION_BLUE_1000};
45+
color: ${SemanticColors.text.linkHover};
4646
}
4747
`;
4848

4949
const PanelBody = styled(Box).attrs({ my: '3' })`
50-
border: solid 0.0625rem ${Colors.AUTHENTIC_BLUE_200};
50+
border: solid 0.0625rem ${SemanticColors.border.primary};
5151
border-radius: 0.3125rem;
5252
`;
5353

5454
const PanelIcon = ({ isOpen }: { isOpen: boolean }) =>
55-
isOpen ? <ChevronUp color={Colors.ACTION_BLUE_900} /> : <ChevronDown color={Colors.ACTION_BLUE_900} />;
55+
isOpen ? <ChevronUp color={SemanticColors.icon.action} /> : <ChevronDown color={SemanticColors.icon.action} />;
5656

5757
export const DefaultPanel = ({
5858
heading,

‎src/components/Accordion/components/Header.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import styled from 'styled-components';
22

3-
import { Colors } from '../../../essentials';
3+
import { SemanticColors } from '../../../essentials';
44
import { Box } from '../../Box/Box';
55

6-
export const Header = styled(Box).attrs({ p: '2', color: Colors.AUTHENTIC_BLUE_900 })`
6+
export const Header = styled(Box).attrs({ p: '2', color: SemanticColors.text.primary })`
77
display: flex;
88
flex-direction: row;
99
justify-content: space-between;

‎src/components/Banner/Banner.spec.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { render, waitForElementToBeRemoved, screen } from '@testing-library/react';
22
import userEvent from '@testing-library/user-event';
33
import * as React from 'react';
4-
import { Colors } from '../../essentials';
4+
import { SemanticColors } from '../../essentials';
55
import { ANIMATION_DURATION, Banner, useBannerDismiss } from './Banner';
66

77
describe('Banner', () => {
@@ -106,19 +106,19 @@ describe('Banner', () => {
106106
describe('renders the variant', () => {
107107
it('"info" correctly', () => {
108108
expect(render(<Banner variant="info" />).container.firstChild).toHaveStyle(`
109-
background-color: ${Colors.AUTHENTIC_BLUE_550};
109+
background-color: ${SemanticColors.background.secondaryEmphasized};
110110
`);
111111
});
112112

113113
it('"success" correctly', () => {
114114
expect(render(<Banner variant="success" />).container.firstChild).toHaveStyle(`
115-
background-color: ${Colors.POSITIVE_GREEN_900};
115+
background-color: ${SemanticColors.background.successEmphasized};
116116
`);
117117
});
118118

119119
it('"danger" correctly', () => {
120120
expect(render(<Banner variant="danger" />).container.firstChild).toHaveStyle(`
121-
background-color: ${Colors.NEGATIVE_ORANGE_900};
121+
background-color: ${SemanticColors.background.dangerEmphasized};
122122
`);
123123
});
124124
});

‎src/components/Banner/Banner.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { ReactNode, useState, useContext } from 'react';
22
import { CSSTransition } from 'react-transition-group';
33
import styled, { css } from 'styled-components';
44
import { variant } from 'styled-system';
5-
import { Colors, Elevation } from '../../essentials';
5+
import { Elevation, SemanticColors } from '../../essentials';
66
import { theme } from '../../essentials/theme';
77
import { get } from '../../utils/themeGet';
88

@@ -60,13 +60,13 @@ const riseUp = css`
6060
const bannerVariants = variant({
6161
variants: {
6262
info: {
63-
backgroundColor: Colors.AUTHENTIC_BLUE_550
63+
backgroundColor: SemanticColors.background.secondaryEmphasized
6464
},
6565
success: {
66-
backgroundColor: Colors.POSITIVE_GREEN_900
66+
backgroundColor: SemanticColors.background.successEmphasized
6767
},
6868
danger: {
69-
backgroundColor: Colors.NEGATIVE_ORANGE_900
69+
backgroundColor: SemanticColors.background.dangerEmphasized
7070
}
7171
}
7272
});
@@ -114,7 +114,7 @@ const AnimatedBanner = styled.div.attrs({ theme })<BannerProps>`
114114
overflow: auto;
115115
box-sizing: border-box;
116116
padding: ${get('space.3')};
117-
background-color: ${Colors.AUTHENTIC_BLUE_550};
117+
background-color: ${SemanticColors.background.secondaryEmphasized};
118118
119119
position: fixed;
120120
left: 0;

‎src/components/Box/Box.spec.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { render } from '@testing-library/react';
22
import * as React from 'react';
3-
import { Colors } from '../../essentials';
3+
import { SemanticColors } from '../../essentials';
44
import { Box } from './Box';
55

66
describe('Box', () => {
@@ -21,7 +21,9 @@ describe('Box', () => {
2121
});
2222

2323
it('renders color', () => {
24-
expect(render(<Box backgroundColor={Colors.POSITIVE_GREEN_900} />).container.firstChild).toMatchSnapshot();
24+
expect(
25+
render(<Box backgroundColor={SemanticColors.background.successEmphasized} />).container.firstChild
26+
).toMatchSnapshot();
2527
});
2628

2729
it('renders flexbox', () => {
@@ -36,7 +38,7 @@ describe('Box', () => {
3638

3739
it('accepts props spreading', () => {
3840
const renderBox = () => {
39-
const props = { backgroundColor: Colors.POSITIVE_GREEN_900 };
41+
const props = { backgroundColor: SemanticColors.background.successEmphasized };
4042
return <Box {...props} />;
4143
};
4244
expect(renderBox).not.toThrow();

‎src/components/Button/Button.spec.tsx

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import { render } from '@testing-library/react';
33
import { Button } from './Button';
4-
import { Colors } from '../../essentials';
4+
import { SemanticColors } from '../../essentials';
55

66
describe('standard button', () => {
77
it('renders by default the primary variant', () => {
@@ -15,8 +15,8 @@ describe('standard button', () => {
1515
it('renders as design system suggests', () => {
1616
const { container } = render(<Button variant="primary">Click</Button>);
1717
expect(container.firstChild).toHaveStyle(`
18-
background: ${Colors.AUTHENTIC_BLUE_900};
19-
color: ${Colors.WHITE};
18+
background: ${SemanticColors.button.primary.background};
19+
color: ${SemanticColors.button.primary.text};
2020
`);
2121
expect(container.firstChild).toMatchSnapshot();
2222
});
@@ -26,9 +26,9 @@ describe('standard button', () => {
2626
it('renders as design system suggests', () => {
2727
const { container } = render(<Button variant="secondary">Click</Button>);
2828
expect(container.firstChild).toHaveStyle(`
29-
background: ${Colors.WHITE};
30-
color: ${Colors.AUTHENTIC_BLUE_900};
31-
border-color: ${Colors.AUTHENTIC_BLUE_200};
29+
background: ${SemanticColors.button.secondary.background};
30+
color: ${SemanticColors.button.secondary.text};
31+
border-color: ${SemanticColors.button.secondary.border};
3232
`);
3333
expect(container.firstChild).toMatchSnapshot();
3434
});
@@ -38,8 +38,8 @@ describe('standard button', () => {
3838
it('renders as design system suggests', () => {
3939
const { container } = render(<Button variant="danger">Click</Button>);
4040
expect(container.firstChild).toHaveStyle(`
41-
background: ${Colors.NEGATIVE_ORANGE_900};
42-
color: ${Colors.WHITE};
41+
background: ${SemanticColors.button.danger.background};
42+
color: ${SemanticColors.button.danger.text};
4343
`);
4444
expect(container.firstChild).toMatchSnapshot();
4545
});
@@ -66,8 +66,8 @@ describe('inverted button', () => {
6666
</Button>
6767
);
6868
expect(container.firstChild).toHaveStyle(`
69-
background: ${Colors.WHITE};
70-
color: ${Colors.ACTION_BLUE_900};
69+
background: ${SemanticColors.button.primary.backgroundInverted};
70+
color: ${SemanticColors.button.primary.textInverted};
7171
`);
7272
expect(container.firstChild).toMatchSnapshot();
7373
});
@@ -83,8 +83,8 @@ describe('inverted button', () => {
8383

8484
expect(container.firstChild).toHaveStyle(`
8585
background: transparent;
86-
color: ${Colors.WHITE};
87-
border-color: ${Colors.WHITE};
86+
color: ${SemanticColors.button.secondary.textInverted};
87+
border-color: ${SemanticColors.button.secondary.borderInverted};
8888
`);
8989
expect(container.firstChild).toMatchSnapshot();
9090
});

‎src/components/Toggle/Slide.tsx

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,30 @@
11
import styled from 'styled-components';
2-
import { Colors } from '../../essentials';
2+
import { SemanticColors } from '../../essentials';
33

44
const determineBackground = (props: SlideProps) => {
55
if (props.disabled) {
6-
return Colors.AUTHENTIC_BLUE_50;
6+
return SemanticColors.background.secondary;
77
}
88

99
if (props.error) {
10-
return Colors.NEGATIVE_ORANGE_900;
10+
return SemanticColors.background.dangerEmphasized;
1111
}
1212

13-
return Colors.ACTION_BLUE_900;
13+
return SemanticColors.background.infoEmphasized;
1414
};
1515

1616
interface SlideProps {
1717
disabled?: boolean;
1818
error?: boolean;
1919
}
2020

21+
// TODO use SemanticColors.forms once https://github.com/freenowtech/wave/issues/286 is done
2122
const Slide = styled.div<SlideProps>`
2223
width: 2.25rem;
2324
height: 1rem;
2425
2526
cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};
26-
background: ${props => (props.disabled ? Colors.AUTHENTIC_BLUE_50 : Colors.AUTHENTIC_BLUE_200)};
27+
background: ${props => (props.disabled ? SemanticColors.background.secondary : SemanticColors.border.primary)};
2728
display: inline-block;
2829
border-radius: 0.5rem;
2930
position: relative;
@@ -36,7 +37,8 @@ const Slide = styled.div<SlideProps>`
3637
left: 0;
3738
width: 1.25rem;
3839
height: 1.25rem;
39-
background: ${props => (props.disabled ? Colors.AUTHENTIC_BLUE_50 : Colors.WHITE)};
40+
background: ${props =>
41+
props.disabled ? SemanticColors.background.secondary : SemanticColors.background.primary};
4042
border-radius: 50%;
4143
box-shadow: 0 0 0.0625rem 0 rgba(0, 0, 0, 0.05), 0 0.0625rem 0.1875rem 0 rgba(0, 0, 0, 0.4);
4244
transform: translateX(0);

‎src/components/Tooltip/Tooltip.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import styled, { keyframes } from 'styled-components';
44
import { usePopper } from 'react-popper';
55
import { Placement } from '@popperjs/core/lib/enums';
66
import { variant } from 'styled-system';
7-
import { Colors, MediaQueries } from '../../essentials';
7+
import { MediaQueries, SemanticColors } from '../../essentials';
88
import { get } from '../../utils/themeGet';
99
import { Text } from '../Text/Text';
1010
import { mapPlacementWithDeprecationWarning, TooltipPlacement } from './TooltipPlacement';
@@ -87,7 +87,8 @@ interface TooltipBodyProps {
8787

8888
const TooltipBody = styled.div<TooltipBodyProps>`
8989
position: relative;
90-
background-color: ${p => (p.inverted ? Colors.AUTHENTIC_BLUE_50 : Colors.AUTHENTIC_BLUE_900)};
90+
background-color: ${p =>
91+
p.inverted ? SemanticColors.background.secondary : SemanticColors.background.primaryEmphasized};
9192
padding: 0.25rem 0.5rem;
9293
border-radius: ${get('radii.2')};
9394
opacity: 0;
@@ -110,7 +111,8 @@ const TooltipBody = styled.div<TooltipBodyProps>`
110111
position: absolute;
111112
pointer-events: none;
112113
border: 0.25rem solid rgba(0, 0, 0, 0);
113-
border-bottom-color: ${p => (p.inverted ? Colors.AUTHENTIC_BLUE_50 : Colors.AUTHENTIC_BLUE_900)};
114+
border-bottom-color: ${p =>
115+
p.inverted ? SemanticColors.background.secondary : SemanticColors.background.primaryEmphasized};
114116
margin-left: -0.25rem;
115117
116118
${arrowPlacementStyles}
@@ -150,7 +152,6 @@ const Tooltip: React.FC<TooltipProps> = ({
150152
const [triggerReference, setTriggerReference] = React.useState(undefined);
151153
const [contentReference, setContentReference] = React.useState(undefined);
152154

153-
154155
/**
155156
* Map the older placement values to Popper placement as we need to get the correct placement for the tooltip from the Popper library
156157
* without introduce any breaking changes to the Tooltip component.

‎src/essentials/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export { Colors } from './Colors/Colors';
1+
export { Colors, SemanticColors } from './Colors/Colors';
22
export { Elevation } from './Elevation/Elevation';
33
export { Spaces } from './Spaces/Spaces';
44
export { Breakpoints, MediaQueries } from './Breakpoints/Breakpoints';

0 commit comments

Comments
 (0)