Skip to content

Commit 3268c02

Browse files
nlopinnlopin
committed
feat(input): migrate to semantic colors
1 parent f85b75b commit 3268c02

File tree

8 files changed

+70
-63
lines changed

8 files changed

+70
-63
lines changed

‎src/components/Input/BaseInput.ts

+16-16
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
import styled from 'styled-components';
22
import { compose, variant, width } from 'styled-system';
3-
import { Colors } from '../../essentials';
43
import { get } from '../../utils/themeGet';
54
import { InputProps } from './InputProps';
5+
import { getSemanticValue } from '../../utils/cssVariables';
66

77
const ANIMATION_DURATION = 100;
88

99
interface InternalInputComponentProps extends Omit<InputProps, 'label'> {
1010
hasValue?: boolean;
1111
}
1212

13-
const sizeVariant = variant({
13+
const sizeVariant = variant<Record<string, unknown>, InputProps['size']>({
1414
prop: 'size',
1515
variants: {
1616
small: {
@@ -22,25 +22,25 @@ const sizeVariant = variant({
2222
}
2323
});
2424

25-
const inputVariants = variant({
25+
const inputVariants = variant<Record<string, unknown>, InputProps['variant']>({
2626
variants: {
2727
boxed: {
2828
borderRadius: get('radii.2'),
29-
border: `0.0625rem solid ${Colors.AUTHENTIC_BLUE_200}`,
29+
border: `0.0625rem solid ${getSemanticValue('border-primary-default')}`,
3030
'&:active, &:focus': {
31-
borderColor: Colors.ACTION_BLUE_900,
32-
boxShadow: `inset 0 0 0 0.0625rem ${Colors.ACTION_BLUE_900}`
31+
borderColor: getSemanticValue('border-info-emphasized'),
32+
boxShadow: `inset 0 0 0 0.0625rem ${getSemanticValue('border-info-emphasized')}`
3333
}
3434
},
3535
'bottom-lined': {
3636
border: 'none',
3737
borderTopLeftRadius: get('radii.1'),
3838
borderTopRightRadius: get('radii.1'),
39-
borderBottom: `0.0625rem solid ${Colors.AUTHENTIC_BLUE_200}`,
39+
borderBottom: `0.0625rem solid ${getSemanticValue('border-primary-default')}`,
4040

4141
'&:active, &:focus': {
42-
borderColor: Colors.ACTION_BLUE_900,
43-
boxShadow: `inset 0 -0.0625rem 0 0 ${Colors.ACTION_BLUE_900}`
42+
borderColor: getSemanticValue('border-info-emphasized'),
43+
boxShadow: `inset 0 -0.0625rem 0 0 ${getSemanticValue('border-info-emphasized')}`
4444
}
4545
}
4646
}
@@ -49,9 +49,9 @@ const inputVariants = variant({
4949
const BaseInput = styled.input<InternalInputComponentProps>`
5050
margin: 0;
5151
box-sizing: border-box;
52-
background: ${p => (p.inverted ? 'transparent' : Colors.WHITE)};
52+
background: ${p => getSemanticValue(p.inverted ? 'background-transparent' : 'background-primary-default')};
5353
border-radius: 0;
54-
color: ${p => (p.inverted ? Colors.WHITE : Colors.AUTHENTIC_BLUE_900)};
54+
color: ${p => getSemanticValue(p.inverted ? 'text-primaryInverted' : 'text-primary')};
5555
font-size: ${get('fontSizes.2')};
5656
font-family: ${get('fonts.normal')};
5757
transition: box-shadow ${ANIMATION_DURATION}ms, border ${ANIMATION_DURATION}ms;
@@ -60,27 +60,27 @@ const BaseInput = styled.input<InternalInputComponentProps>`
6060
width: 100%;
6161
6262
&::placeholder {
63-
color: ${p => (p.inverted ? Colors.AUTHENTIC_BLUE_200 : Colors.AUTHENTIC_BLUE_350)};
63+
color: ${p => getSemanticValue(p.inverted ? 'text-secondaryInverted' : 'text-tertiary')};
6464
}
6565
6666
${compose(width, sizeVariant, inputVariants)};
6767
6868
&:disabled {
69-
color: ${p => (p.inverted ? Colors.AUTHENTIC_BLUE_550 : Colors.AUTHENTIC_BLUE_200)};
70-
border-color: ${p => (p.inverted ? Colors.AUTHENTIC_BLUE_550 : Colors.AUTHENTIC_BLUE_200)};
69+
color: ${p => getSemanticValue(p.inverted ? 'text-disabledInverted' : 'text-disabled')};
70+
border-color: ${p => getSemanticValue(p.inverted ? 'border-disabled-inverted' : 'border-disabled-default')};
7171
box-shadow: none;
7272
cursor: not-allowed;
7373
7474
&::placeholder {
75-
color: ${p => (p.inverted ? Colors.AUTHENTIC_BLUE_550 : Colors.AUTHENTIC_BLUE_200)};
75+
color: ${p => getSemanticValue(p.inverted ? 'text-disabledInverted' : 'text-disabled')};
7676
}
7777
}
7878
7979
&:-webkit-autofill,
8080
&:-webkit-autofill:hover,
8181
&:-webkit-autofill:focus,
8282
&:-webkit-autofill:active {
83-
-webkit-text-fill-color: ${p => (p.inverted ? Colors.WHITE : Colors.AUTHENTIC_BLUE_900)};
83+
-webkit-text-fill-color: ${p => getSemanticValue(p.inverted ? 'text-primaryInverted' : 'text-primary')};
8484
transition: background-color 99999999ms ease 99999999ms;
8585
}
8686
`;

‎src/components/Input/BottomLinedInput.ts

+17-15
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
11
import { FC } from 'react';
22
import styled, { css } from 'styled-components';
33
import { variant } from 'styled-system';
4-
import { Colors } from '../../essentials';
54
import { BaseInput, InternalInputComponentProps } from './BaseInput';
65
import { activeBottomLinedPosition, BottomLinedInputLabel } from './BottomLinedInputLabel';
6+
import { getSemanticValue } from '../../utils/cssVariables';
7+
import { InputProps } from './InputProps';
78

89
const errorStyles = css`
9-
box-shadow: inset 0 -0.0625rem 0 0 ${Colors.NEGATIVE_ORANGE_900};
10-
border-color: ${Colors.NEGATIVE_ORANGE_900};
10+
box-shadow: inset 0 -0.0625rem 0 0 ${getSemanticValue('border-danger-emphasized')};
11+
border-color: ${getSemanticValue('border-danger-emphasized')};
1112
1213
& ~ ${BottomLinedInputLabel} {
13-
color: ${Colors.NEGATIVE_ORANGE_900};
14+
color: ${getSemanticValue('text-dangerInverted')};
1415
}
1516
`;
1617

17-
const sizeVariant = variant({
18+
const sizeVariant = variant<Record<string, unknown>, InputProps['size']>({
1819
prop: 'size',
1920
variants: {
2021
small: {
@@ -30,28 +31,28 @@ const sizeVariant = variant({
3031

3132
const getLabelColor = ({ hasValue, inverted }: InternalInputComponentProps) => {
3233
if (inverted) {
33-
return Colors.AUTHENTIC_BLUE_200;
34+
return getSemanticValue('text-secondaryInverted');
3435
}
3536

3637
if (hasValue) {
37-
return Colors.AUTHENTIC_BLUE_550;
38+
return getSemanticValue('text-secondary');
3839
}
3940

40-
return Colors.AUTHENTIC_BLUE_350;
41+
return getSemanticValue('text-tertiary');
4142
};
4243

4344
const BottomLinedInput: FC<InternalInputComponentProps> = styled(BaseInput)<InternalInputComponentProps>`
4445
${sizeVariant}
4546
& ~ ${BottomLinedInputLabel} {
46-
${p => (p.hasValue || p.placeholder ? activeBottomLinedPosition(p.size as Pick<InternalInputComponentProps, 'size'>) : '')};
47+
${p => (p.hasValue || p.placeholder ? activeBottomLinedPosition(p.size) : '')};
4748
color: ${getLabelColor};
48-
background: ${p => (p.inverted ? Colors.AUTHENTIC_BLUE_900 : Colors.WHITE)};
49+
background: ${p => getSemanticValue(p.inverted ? 'background-primary-inverted' : 'background-primary-default')};
4950
}
5051
5152
${p => (p.error ? errorStyles : undefined)}
5253
&:disabled {
5354
& ~ ${BottomLinedInputLabel} {
54-
color: ${p => (p.inverted ? Colors.AUTHENTIC_BLUE_550 : Colors.AUTHENTIC_BLUE_200)};
55+
color: ${p => getSemanticValue(p.inverted ? 'text-disabledInverted' : 'text-disabled')};
5556
}
5657
}
5758
@@ -60,15 +61,16 @@ const BottomLinedInput: FC<InternalInputComponentProps> = styled(BaseInput)<Inte
6061
&:-webkit-autofill:focus,
6162
&:-webkit-autofill:active {
6263
& + ${BottomLinedInputLabel} {
63-
${p => activeBottomLinedPosition(p.size as Pick<InternalInputComponentProps, 'size'>)};
64+
${p => activeBottomLinedPosition(p.size)};
6465
}
6566
}
6667
6768
&:focus:not(:disabled) {
6869
& ~ ${BottomLinedInputLabel} {
69-
${p => activeBottomLinedPosition(p.size as Pick<InternalInputComponentProps, 'size'>)};
70-
color: ${p => (p.inverted ? Colors.WHITE : Colors.ACTION_BLUE_900)};
71-
background: ${p => (p.inverted ? Colors.AUTHENTIC_BLUE_900 : Colors.WHITE)};
70+
${p => activeBottomLinedPosition(p.size)};
71+
color: ${p => getSemanticValue(p.inverted ? 'text-primaryInverted' : 'text-info')};
72+
background: ${p =>
73+
getSemanticValue(p.inverted ? 'background-primary-inverted' : 'background-primary-default')};
7274
}
7375
}
7476
`;

‎src/components/Input/BottomLinedInputLabel.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,16 @@ import styled, { css, Interpolation, ThemeProps } from 'styled-components';
22
import { variant } from 'styled-system';
33
import { theme } from '../../essentials/theme';
44
import { get } from '../../utils/themeGet';
5-
import { InternalInputComponentProps } from './BaseInput';
65
import { activePositionBaseStyles, BaseInputLabel } from './BaseInputLabel';
6+
import { InputProps } from './InputProps';
77

8-
const activeBottomLinedPosition = (size?: Pick<InternalInputComponentProps, 'size'>): ReadonlyArray<Interpolation<ThemeProps<unknown>>> => css`
8+
const activeBottomLinedPosition = (size?: InputProps['size']): ReadonlyArray<Interpolation<ThemeProps<unknown>>> => css`
99
${activePositionBaseStyles};
1010
top: ${size === 'small' ? '0' : '0.25rem'};
1111
font-size: ${size === 'small' ? '0.625rem' : get('fontSizes.0')};
1212
`;
1313

14-
const sizeVariant = variant({
14+
const sizeVariant = variant<Record<string, unknown>, InputProps['size']>({
1515
prop: 'size',
1616
variants: {
1717
small: {

‎src/components/Input/BoxedInput.ts

+23-21
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
11
import { FC } from 'react';
22
import styled, { css } from 'styled-components';
33
import { variant } from 'styled-system';
4-
import { Colors } from '../../essentials';
54
import { BaseInput, InternalInputComponentProps } from './BaseInput';
65
import { activeBoxedPosition, BoxedInputLabel } from './BoxedInputLabel';
6+
import { getSemanticValue } from '../../utils/cssVariables';
7+
import { InputProps } from './InputProps';
78

89
const errorStyles = css`
9-
box-shadow: inset 0 0 0 0.0625rem ${Colors.NEGATIVE_ORANGE_900};
10-
border-color: ${Colors.NEGATIVE_ORANGE_900};
10+
box-shadow: inset 0 0 0 0.0625rem ${getSemanticValue('border-danger-emphasized')};
11+
border-color: ${getSemanticValue('border-danger-emphasized')};
1112
1213
& ~ ${BoxedInputLabel} {
13-
color: ${Colors.NEGATIVE_ORANGE_900};
14+
color: ${getSemanticValue('text-dangerInverted')};
1415
}
1516
`;
1617

17-
const sizeVariant = variant({
18+
const sizeVariant = variant<Record<string, unknown>, InputProps['size']>({
1819
prop: 'size',
1920
variants: {
2021
small: {
@@ -30,32 +31,32 @@ const sizeVariant = variant({
3031

3132
const getLabelColor = ({ hasValue, inverted }: InternalInputComponentProps) => {
3233
if (inverted) {
33-
return Colors.AUTHENTIC_BLUE_200;
34+
return getSemanticValue('text-secondaryInverted');
3435
}
3536

3637
if (hasValue) {
37-
return Colors.AUTHENTIC_BLUE_550;
38+
return getSemanticValue('text-secondary');
3839
}
3940

40-
return Colors.AUTHENTIC_BLUE_350;
41+
return getSemanticValue('text-tertiary');
4142
};
4243

4344
const BoxedInput: FC<InternalInputComponentProps> = styled(BaseInput)<InternalInputComponentProps>`
4445
${sizeVariant}
4546
& + ${BoxedInputLabel} {
46-
${p => (p.hasValue || p.placeholder ? activeBoxedPosition(p.size as Pick<InternalInputComponentProps, 'size'>) : undefined)};
47+
${p => (p.hasValue || p.placeholder ? activeBoxedPosition(p.size) : undefined)};
4748
color: ${getLabelColor};
48-
background: ${p => (p.inverted ? Colors.AUTHENTIC_BLUE_900 : Colors.WHITE)};
49+
background: ${p => getSemanticValue(p.inverted ? 'background-primary-inverted' : 'background-primary-default')};
4950
background: ${p =>
50-
`linear-gradient(0deg, ${p.inverted ? Colors.AUTHENTIC_BLUE_900 : Colors.WHITE} calc(50% + ${
51-
(p.size as Pick<InternalInputComponentProps, 'size'>) === 'small' ? '0.0825rem' : '0.0625rem'
52-
}), transparent 50%)`};
51+
`linear-gradient(0deg, ${getSemanticValue(
52+
p.inverted ? 'background-primary-inverted' : 'background-primary-default'
53+
)} calc(50% + ${p.size === 'small' ? '0.0825rem' : '0.0625rem'}), transparent 50%)`};
5354
}
5455
5556
${p => (p.error ? errorStyles : undefined)}
5657
&:disabled {
5758
& + ${BoxedInputLabel} {
58-
color: ${p => (p.inverted ? Colors.AUTHENTIC_BLUE_550 : Colors.AUTHENTIC_BLUE_200)};
59+
color: ${p => getSemanticValue(p.inverted ? 'text-disabledInverted' : 'text-disabled')};
5960
}
6061
}
6162
@@ -64,19 +65,20 @@ const BoxedInput: FC<InternalInputComponentProps> = styled(BaseInput)<InternalIn
6465
&:-webkit-autofill:focus,
6566
&:-webkit-autofill:active {
6667
& + ${BoxedInputLabel} {
67-
${p => activeBoxedPosition(p.size as Pick<InternalInputComponentProps, 'size'>)};
68+
${p => activeBoxedPosition(p.size)};
6869
}
6970
}
7071
7172
&:focus:not(:disabled) {
7273
& + ${BoxedInputLabel} {
73-
${p => activeBoxedPosition(p.size as Pick<InternalInputComponentProps, 'size'>)};
74-
color: ${p => (p.inverted ? Colors.WHITE : Colors.ACTION_BLUE_900)};
75-
background: ${p => (p.inverted ? Colors.AUTHENTIC_BLUE_900 : Colors.WHITE)};
74+
${p => activeBoxedPosition(p.size)};
75+
color: ${p => getSemanticValue(p.inverted ? 'text-primaryInverted' : 'text-info')};
7676
background: ${p =>
77-
`linear-gradient(0deg, ${p.inverted ? Colors.AUTHENTIC_BLUE_900 : Colors.WHITE} calc(50% + ${
78-
(p.size as Pick<InternalInputComponentProps, 'size'>) === 'small' ? '0.0825rem' : '0.0625rem'
79-
}), transparent 50%)`};
77+
getSemanticValue(p.inverted ? 'background-primary-inverted' : 'background-primary-default')};
78+
background: ${p =>
79+
`linear-gradient(0deg, ${getSemanticValue(
80+
p.inverted ? 'background-primary-inverted' : 'background-primary-default'
81+
)} calc(50% + ${p.size === 'small' ? '0.0825rem' : '0.0625rem'}), transparent 50%)`};
8082
}
8183
}
8284
`;

‎src/components/Input/BoxedInputLabel.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,17 @@ import styled, { css, Interpolation, ThemeProps } from 'styled-components';
22
import { variant } from 'styled-system';
33
import { theme } from '../../essentials/theme';
44
import { get } from '../../utils/themeGet';
5-
import { InternalInputComponentProps } from './BaseInput';
65
import { activePositionBaseStyles, BaseInputLabel } from './BaseInputLabel';
6+
import { InputProps } from './InputProps';
77

8-
const activeBoxedPosition = (size: Pick<InternalInputComponentProps, 'size'>): ReadonlyArray<Interpolation<ThemeProps<unknown>>> => css`
8+
const activeBoxedPosition = (size: InputProps['size']): ReadonlyArray<Interpolation<ThemeProps<unknown>>> => css`
99
${activePositionBaseStyles};
1010
1111
top: ${size === 'small' ? '-0.375rem' : '-0.5rem'};
1212
font-size: ${size === 'small' ? '0.625rem' : get('fontSizes.0')};
1313
`;
1414

15-
const sizeVariant = variant({
15+
const sizeVariant = variant<Record<string, unknown>, InputProps['size']>({
1616
prop: 'size',
1717
variants: {
1818
small: {

‎src/essentials/Colors/Colors.ts

+6-5
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ export const SemanticColors = {
7878
background: {
7979
primary: {
8080
default: Colors.white,
81+
inverted: Colors.blue.primary[900],
8182
emphasized: Colors.blue.primary[900],
8283
hover: Colors.blue.primary[1100],
8384
disabled: Colors.blue.primary[200],
@@ -137,12 +138,12 @@ export const SemanticColors = {
137138
},
138139
border: {
139140
primary: {
140-
default: Colors.blue.primary[900],
141+
default: Colors.blue.primary[200],
141142
emphasized: Colors.blue.primary[1100],
142-
inverted: Colors.white,
143+
inverted: Colors.blue.primary[550],
143144
},
144145
secondary: {
145-
default: Colors.blue.primary[200],
146+
default: Colors.blue.primary[50],
146147
inverted: Colors.white,
147148
},
148149
disabled: {
@@ -162,8 +163,8 @@ export const SemanticColors = {
162163
emphasized: Colors.yellow[900]
163164
},
164165
danger: {
165-
default: Colors.orange[900],
166-
emphasized: Colors.orange[1000],
166+
default: Colors.orange[350],
167+
emphasized: Colors.orange[900],
167168
disabled: Colors.orange[350],
168169
},
169170
},

‎src/essentials/Colors/RedesignedColors.ts

+1
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ export const SemanticColors = {
7676
background: {
7777
primary: {
7878
default: Colors.white,
79+
inverted: Colors.blue.primary[900],
7980
emphasized: Colors.blue.primary[900],
8081
hover: Colors.blue.primary[1100],
8182
disabled: Colors.blue.primary[200],

‎src/essentials/Colors/types.ts

+1
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export interface SemanticColorsSchema {
2828
background: {
2929
primary: {
3030
default: Color,
31+
inverted: Color,
3132
emphasized: Color,
3233
hover: Color,
3334
disabled: Color,

0 commit comments

Comments
 (0)