Skip to content

Commit ef8426c

Browse files
nlopinnlopin
committed
feat(selectlist): migrate to semantic colors
1 parent 90e37c5 commit ef8426c

File tree

4 files changed

+41
-40
lines changed

4 files changed

+41
-40
lines changed

‎src/components/SelectList/SelectList.tsx

+21-20
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,10 @@ import {
99
} from 'react-select';
1010
import WindowedSelect from 'react-windowed-select';
1111

12-
import { Colors, Elevation } from '../../essentials';
12+
import { Elevation } from '../../essentials';
1313
import { ChevronDownIcon, ChevronUpIcon, CloseIcon } from '../../icons';
1414
import { extractClassNameProps, extractWidthProps, extractWrapperMarginProps } from '../../utils/extractProps';
15+
import { getSemanticValue } from '../../utils/cssVariables';
1516
import { useGeneratedId } from '../../utils/hooks/useGeneratedId';
1617
import { get } from '../../utils/themeGet';
1718
import { Label } from './components/Label';
@@ -47,8 +48,8 @@ const customStyles: StylesConfig = {
4748
alignItems: 'center',
4849
justifyContent: 'space-between',
4950
margin: 0,
50-
background: state.selectProps.inverted ? 'transparent' : Colors.WHITE,
51-
color: state.selectProps.inverted ? Colors.WHITE : Colors.AUTHENTIC_BLUE_900,
51+
background: getSemanticValue(state.selectProps.inverted ? 'background-transparent' : 'background-primary-default'),
52+
color: getSemanticValue(state.selectProps.inverted ? 'text-primaryInverted' : 'text-primary'),
5253
...variant,
5354
...error,
5455
...disabled
@@ -60,7 +61,7 @@ const customStyles: StylesConfig = {
6061
}),
6162
menu: provided => ({
6263
...provided,
63-
boxShadow: `0 0.125rem 0.5rem 0.0625rem ${Colors.AUTHENTIC_BLUE_200}`
64+
boxShadow: `0 0.125rem 0.5rem 0.0625rem ${getSemanticValue('border-primary-default')}`
6465
}),
6566
valueContainer: (provided, { selectProps: { size, variant } }: WithSelectProps<Props>) => {
6667
let margin;
@@ -109,7 +110,7 @@ const customStyles: StylesConfig = {
109110
padding: '0',
110111
marginRight: '0.5rem',
111112
cursor: 'pointer',
112-
color: state.selectProps.inverted ? Colors.AUTHENTIC_BLUE_200 : Colors.AUTHENTIC_BLUE_550,
113+
color: getSemanticValue(state.selectProps.inverted ? 'icon-secondary-inverted' : 'icon-secondary-default'),
113114
...disabled
114115
};
115116
},
@@ -118,7 +119,7 @@ const customStyles: StylesConfig = {
118119

119120
return {
120121
...provided,
121-
color: state.selectProps.inverted ? Colors.AUTHENTIC_BLUE_200 : Colors.AUTHENTIC_BLUE_550,
122+
color: getSemanticValue(state.selectProps.inverted ? 'icon-secondary-inverted' : 'icon-secondary-default'),
122123
cursor: 'pointer',
123124
padding: 0,
124125
...disabled
@@ -129,27 +130,27 @@ const customStyles: StylesConfig = {
129130

130131
return {
131132
...provided,
132-
color: Colors.AUTHENTIC_BLUE_550,
133+
color: getSemanticValue('text-secondary'),
133134
...disabled
134135
};
135136
},
136137
option: (provided, state: WithSelectProps<Props>) => {
137138
const colorsByState = {
138139
isDisabled: {
139-
color: Colors.AUTHENTIC_BLUE_350
140+
color: getSemanticValue('text-disabled')
140141
},
141142
isFocused: {
142-
backgroundColor: Colors.ACTION_BLUE_50
143+
backgroundColor: getSemanticValue('background-info-default')
143144
},
144145
isSelected: {
145-
backgroundColor: Colors.ACTION_BLUE_900,
146-
color: Colors.WHITE
146+
backgroundColor: getSemanticValue('background-info-emphasized'),
147+
color: getSemanticValue('text-primaryInverted')
147148
}
148149
};
149150

150151
const defaultColors = {
151-
color: Colors.AUTHENTIC_BLUE_900,
152-
backgroundColor: Colors.WHITE
152+
color: getSemanticValue('text-primary'),
153+
backgroundColor: getSemanticValue('background-primary-default'),
153154
};
154155

155156
const colors = Object.keys(colorsByState)
@@ -172,28 +173,28 @@ const customStyles: StylesConfig = {
172173
multiValue: (provided, { selectProps }: { selectProps: Props }) => {
173174
const styles = {
174175
...provided,
175-
color: Colors.ACTION_BLUE_900,
176-
border: `0.0625rem solid ${Colors.ACTION_BLUE_900}`,
176+
color: getSemanticValue('text-info'),
177+
border: `0.0625rem solid ${getSemanticValue('border-info-emphasized')}`,
177178
borderRadius: '1rem',
178-
backgroundColor: Colors.ACTION_BLUE_50,
179+
backgroundColor: getSemanticValue('background-info-default'),
179180
marginRight: '0.375rem',
180181
marginTop: '0.125rem',
181182
marginLeft: 0,
182183
marginBottom: '0.125rem',
183184
maxWidth: 'calc(100% - 0.5rem)',
184185
transition: 'color 125ms ease, background-color 125ms ease',
185186
'&:hover': {
186-
backgroundColor: Colors.ACTION_BLUE_900,
187-
color: Colors.WHITE
187+
backgroundColor: getSemanticValue('background-info-emphasized'),
188+
color: getSemanticValue('text-primaryInverted')
188189
}
189190
};
190191

191192
if (selectProps.isDisabled) {
192193
return {
193194
...styles,
194-
color: Colors.AUTHENTIC_BLUE_200,
195+
color: getSemanticValue('text-disabled'),
195196
backgroundColor: 'transparent',
196-
borderColor: Colors.AUTHENTIC_BLUE_200
197+
borderColor: getSemanticValue('border-disabled-default')
197198
};
198199
}
199200

‎src/components/SelectList/components/Label.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { ReactNode } from 'react';
22
import styled from 'styled-components';
33

4-
import { Colors } from '../../../essentials';
4+
import { getSemanticValue } from '../../../utils/cssVariables';
55
import { get } from '../../../utils/themeGet';
66
import { variantStyles, errorStyles, disabledStyles } from '../styles';
77
import { Variant, Size } from '../types';
@@ -20,8 +20,8 @@ export const Label = styled.label<LabelProps>`
2020
pointer-events: none;
2121
line-height: 1;
2222
font-weight: ${get('fontWeights.semibold')};
23-
background: ${p => (p.inverted ? Colors.AUTHENTIC_BLUE_900 : Colors.WHITE)};
24-
color: ${p => (p.inverted ? Colors.AUTHENTIC_BLUE_200 : Colors.AUTHENTIC_BLUE_550)};
23+
background: ${p => getSemanticValue(p.inverted ? 'background-primary-inverted' : 'background-primary-default')};
24+
color: ${p => getSemanticValue(p.inverted ? 'text-secondaryInverted' : 'text-secondary')};
2525
transition: color 125ms ease;
2626
2727
${p => p.error && errorStyles.label()}

‎src/components/SelectList/styles.ts

+16-16
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,36 @@
11
import { CSSObject } from 'styled-components';
22
import { CSSObjectWithLabel } from 'react-select';
3-
import { Colors } from '../../essentials';
3+
import { getSemanticValue } from '../../utils/cssVariables';
44
import { get } from '../../utils/themeGet';
55
import { SelectListProps } from './types';
66

77
export const disabledStyles = {
88
control: ({ inverted }: SelectListProps): CSSObjectWithLabel => ({
9-
color: inverted ? Colors.AUTHENTIC_BLUE_550 : Colors.AUTHENTIC_BLUE_200,
10-
borderColor: inverted ? Colors.AUTHENTIC_BLUE_550 : Colors.AUTHENTIC_BLUE_200,
9+
color: getSemanticValue(inverted ? 'text-disabledInverted' : 'text-disabled'),
10+
borderColor: getSemanticValue(inverted ? 'border-disabled-inverted' : 'border-disabled-default'),
1111
boxShadow: 'none'
1212
}),
1313
placeholder: ({ inverted }: SelectListProps): CSSObjectWithLabel => ({
14-
color: inverted ? Colors.AUTHENTIC_BLUE_550 : Colors.AUTHENTIC_BLUE_200
14+
color: getSemanticValue(inverted ? 'text-disabledInverted' : 'text-disabled')
1515
}),
1616
label: ({ inverted }: Pick<SelectListProps, 'inverted'>): CSSObject => ({
17-
color: inverted ? Colors.AUTHENTIC_BLUE_550 : Colors.AUTHENTIC_BLUE_200
17+
color: getSemanticValue(inverted ? 'text-disabledInverted' : 'text-disabled')
1818
}),
1919
icons: ({ inverted }: SelectListProps): CSSObjectWithLabel => ({
20-
color: inverted ? Colors.AUTHENTIC_BLUE_550 : Colors.AUTHENTIC_BLUE_200
20+
color: getSemanticValue(inverted ? 'text-disabledInverted' : 'text-disabled')
2121
})
2222
};
2323

2424
export const errorStyles = {
2525
control: ({ variant }: SelectListProps): CSSObjectWithLabel => ({
26-
borderColor: Colors.NEGATIVE_ORANGE_900,
26+
borderColor: getSemanticValue('border-danger-emphasized'),
2727
boxShadow:
2828
variant === 'boxed'
29-
? `inset 0 0 0 0.0625rem ${Colors.NEGATIVE_ORANGE_900}`
30-
: variant === 'bottom-lined' && `inset 0 -0.0625rem 0 0 ${Colors.NEGATIVE_ORANGE_900}`
29+
? `inset 0 0 0 0.0625rem ${getSemanticValue('border-danger-emphasized')}`
30+
: variant === 'bottom-lined' && `inset 0 -0.0625rem 0 0 ${getSemanticValue('border-danger-emphasized')}`
3131
}),
3232
label: (): CSSObject => ({
33-
color: Colors.NEGATIVE_ORANGE_900
33+
color: getSemanticValue('text-danger')
3434
})
3535
};
3636

@@ -50,13 +50,13 @@ export const variantStyles = {
5050
};
5151

5252
const isBFocused = props.isFocused && {
53-
borderColor: Colors.ACTION_BLUE_900,
54-
boxShadow: `inset 0 0 0 0.0625rem ${Colors.ACTION_BLUE_900}`
53+
borderColor: getSemanticValue('border-focus-default'),
54+
boxShadow: `inset 0 0 0 0.0625rem ${getSemanticValue('border-focus-default')}`
5555
};
5656

5757
return {
5858
borderRadius: get('radii.2')(props),
59-
border: `0.0625rem solid ${Colors.AUTHENTIC_BLUE_200}`,
59+
border: `0.0625rem solid ${getSemanticValue('border-primary-default')}`,
6060
...isBFocused,
6161
...bSize[props.size]
6262
};
@@ -73,15 +73,15 @@ export const variantStyles = {
7373
}
7474
};
7575
const isBLFocused = props.isFocused && {
76-
borderColor: Colors.ACTION_BLUE_900,
77-
boxShadow: `inset 0 -0.0625rem 0 0 ${Colors.ACTION_BLUE_900}`
76+
borderColor: getSemanticValue('border-focus-default'),
77+
boxShadow: `inset 0 -0.0625rem 0 0 ${getSemanticValue('border-focus-default')}`
7878
};
7979

8080
return {
8181
border: 'none',
8282
borderTopLeftRadius: get('radii.1')(props),
8383
borderTopRightRadius: get('radii.1')(props),
84-
borderBottom: `0.0625rem solid ${Colors.AUTHENTIC_BLUE_200}`,
84+
borderBottom: `0.0625rem solid ${getSemanticValue('border-primary-default')}`,
8585
...isBLFocused,
8686
...btSize[props.size]
8787
};

‎src/essentials/Colors/RedesignedColors.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,7 @@ export const SemanticColors = {
172172
},
173173
danger: {
174174
default: Colors.orange[350],
175-
emphasized: Colors.red[900],
175+
emphasized: Colors.orange[900],
176176
disabled: Colors.orange[350]
177177
},
178178
transparent: Colors.transparent

0 commit comments

Comments
 (0)