Skip to content

Commit

Permalink
feat(input): migrate to semantic colors
Browse files Browse the repository at this point in the history
  • Loading branch information
@nlopin
nlopin committed Jul 4, 2023
1 parent f85b75b commit 3268c02
Show file tree
Hide file tree
Showing 8 changed files with 70 additions and 63 deletions.
32 changes: 16 additions & 16 deletions src/components/Input/BaseInput.ts
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
import styled from 'styled-components';
import { compose, variant, width } from 'styled-system';
import { Colors } from '../../essentials';
import { get } from '../../utils/themeGet';
import { InputProps } from './InputProps';
import { getSemanticValue } from '../../utils/cssVariables';

const ANIMATION_DURATION = 100;

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

const sizeVariant = variant({
const sizeVariant = variant<Record<string, unknown>, InputProps['size']>({
prop: 'size',
variants: {
small: {
Expand All @@ -22,25 +22,25 @@ const sizeVariant = variant({
}
});

const inputVariants = variant({
const inputVariants = variant<Record<string, unknown>, InputProps['variant']>({
variants: {
boxed: {
borderRadius: get('radii.2'),
border: `0.0625rem solid ${Colors.AUTHENTIC_BLUE_200}`,
border: `0.0625rem solid ${getSemanticValue('border-primary-default')}`,
'&:active, &:focus': {
borderColor: Colors.ACTION_BLUE_900,
boxShadow: `inset 0 0 0 0.0625rem ${Colors.ACTION_BLUE_900}`
borderColor: getSemanticValue('border-info-emphasized'),
boxShadow: `inset 0 0 0 0.0625rem ${getSemanticValue('border-info-emphasized')}`
}
},
'bottom-lined': {
border: 'none',
borderTopLeftRadius: get('radii.1'),
borderTopRightRadius: get('radii.1'),
borderBottom: `0.0625rem solid ${Colors.AUTHENTIC_BLUE_200}`,
borderBottom: `0.0625rem solid ${getSemanticValue('border-primary-default')}`,

'&:active, &:focus': {
borderColor: Colors.ACTION_BLUE_900,
boxShadow: `inset 0 -0.0625rem 0 0 ${Colors.ACTION_BLUE_900}`
borderColor: getSemanticValue('border-info-emphasized'),
boxShadow: `inset 0 -0.0625rem 0 0 ${getSemanticValue('border-info-emphasized')}`
}
}
}
Expand All @@ -49,9 +49,9 @@ const inputVariants = variant({
const BaseInput = styled.input<InternalInputComponentProps>`
margin: 0;
box-sizing: border-box;
background: ${p => (p.inverted ? 'transparent' : Colors.WHITE)};
background: ${p => getSemanticValue(p.inverted ? 'background-transparent' : 'background-primary-default')};
border-radius: 0;
color: ${p => (p.inverted ? Colors.WHITE : Colors.AUTHENTIC_BLUE_900)};
color: ${p => getSemanticValue(p.inverted ? 'text-primaryInverted' : 'text-primary')};
font-size: ${get('fontSizes.2')};
font-family: ${get('fonts.normal')};
transition: box-shadow ${ANIMATION_DURATION}ms, border ${ANIMATION_DURATION}ms;
Expand All @@ -60,27 +60,27 @@ const BaseInput = styled.input<InternalInputComponentProps>`
width: 100%;
&::placeholder {
color: ${p => (p.inverted ? Colors.AUTHENTIC_BLUE_200 : Colors.AUTHENTIC_BLUE_350)};
color: ${p => getSemanticValue(p.inverted ? 'text-secondaryInverted' : 'text-tertiary')};
}
${compose(width, sizeVariant, inputVariants)};
&:disabled {
color: ${p => (p.inverted ? Colors.AUTHENTIC_BLUE_550 : Colors.AUTHENTIC_BLUE_200)};
border-color: ${p => (p.inverted ? Colors.AUTHENTIC_BLUE_550 : Colors.AUTHENTIC_BLUE_200)};
color: ${p => getSemanticValue(p.inverted ? 'text-disabledInverted' : 'text-disabled')};
border-color: ${p => getSemanticValue(p.inverted ? 'border-disabled-inverted' : 'border-disabled-default')};
box-shadow: none;
cursor: not-allowed;
&::placeholder {
color: ${p => (p.inverted ? Colors.AUTHENTIC_BLUE_550 : Colors.AUTHENTIC_BLUE_200)};
color: ${p => getSemanticValue(p.inverted ? 'text-disabledInverted' : 'text-disabled')};
}
}
&:-webkit-autofill,
&:-webkit-autofill:hover,
&:-webkit-autofill:focus,
&:-webkit-autofill:active {
-webkit-text-fill-color: ${p => (p.inverted ? Colors.WHITE : Colors.AUTHENTIC_BLUE_900)};
-webkit-text-fill-color: ${p => getSemanticValue(p.inverted ? 'text-primaryInverted' : 'text-primary')};
transition: background-color 99999999ms ease 99999999ms;
}
`;
Expand Down
32 changes: 17 additions & 15 deletions src/components/Input/BottomLinedInput.ts
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,21 @@
import { FC } from 'react';
import styled, { css } from 'styled-components';
import { variant } from 'styled-system';
import { Colors } from '../../essentials';
import { BaseInput, InternalInputComponentProps } from './BaseInput';
import { activeBottomLinedPosition, BottomLinedInputLabel } from './BottomLinedInputLabel';
import { getSemanticValue } from '../../utils/cssVariables';
import { InputProps } from './InputProps';

const errorStyles = css`
box-shadow: inset 0 -0.0625rem 0 0 ${Colors.NEGATIVE_ORANGE_900};
border-color: ${Colors.NEGATIVE_ORANGE_900};
box-shadow: inset 0 -0.0625rem 0 0 ${getSemanticValue('border-danger-emphasized')};
border-color: ${getSemanticValue('border-danger-emphasized')};
& ~ ${BottomLinedInputLabel} {
color: ${Colors.NEGATIVE_ORANGE_900};
color: ${getSemanticValue('text-dangerInverted')};
}
`;

const sizeVariant = variant({
const sizeVariant = variant<Record<string, unknown>, InputProps['size']>({
prop: 'size',
variants: {
small: {
Expand All @@ -30,28 +31,28 @@ const sizeVariant = variant({

const getLabelColor = ({ hasValue, inverted }: InternalInputComponentProps) => {
if (inverted) {
return Colors.AUTHENTIC_BLUE_200;
return getSemanticValue('text-secondaryInverted');
}

if (hasValue) {
return Colors.AUTHENTIC_BLUE_550;
return getSemanticValue('text-secondary');
}

return Colors.AUTHENTIC_BLUE_350;
return getSemanticValue('text-tertiary');
};

const BottomLinedInput: FC<InternalInputComponentProps> = styled(BaseInput)<InternalInputComponentProps>`
${sizeVariant}
& ~ ${BottomLinedInputLabel} {
${p => (p.hasValue || p.placeholder ? activeBottomLinedPosition(p.size as Pick<InternalInputComponentProps, 'size'>) : '')};
${p => (p.hasValue || p.placeholder ? activeBottomLinedPosition(p.size) : '')};
color: ${getLabelColor};
background: ${p => (p.inverted ? Colors.AUTHENTIC_BLUE_900 : Colors.WHITE)};
background: ${p => getSemanticValue(p.inverted ? 'background-primary-inverted' : 'background-primary-default')};
}
${p => (p.error ? errorStyles : undefined)}
&:disabled {
& ~ ${BottomLinedInputLabel} {
color: ${p => (p.inverted ? Colors.AUTHENTIC_BLUE_550 : Colors.AUTHENTIC_BLUE_200)};
color: ${p => getSemanticValue(p.inverted ? 'text-disabledInverted' : 'text-disabled')};
}
}
Expand All @@ -60,15 +61,16 @@ const BottomLinedInput: FC<InternalInputComponentProps> = styled(BaseInput)<Inte
&:-webkit-autofill:focus,
&:-webkit-autofill:active {
& + ${BottomLinedInputLabel} {
${p => activeBottomLinedPosition(p.size as Pick<InternalInputComponentProps, 'size'>)};
${p => activeBottomLinedPosition(p.size)};
}
}
&:focus:not(:disabled) {
& ~ ${BottomLinedInputLabel} {
${p => activeBottomLinedPosition(p.size as Pick<InternalInputComponentProps, 'size'>)};
color: ${p => (p.inverted ? Colors.WHITE : Colors.ACTION_BLUE_900)};
background: ${p => (p.inverted ? Colors.AUTHENTIC_BLUE_900 : Colors.WHITE)};
${p => activeBottomLinedPosition(p.size)};
color: ${p => getSemanticValue(p.inverted ? 'text-primaryInverted' : 'text-info')};
background: ${p =>
getSemanticValue(p.inverted ? 'background-primary-inverted' : 'background-primary-default')};
}
}
`;
Expand Down
6 changes: 3 additions & 3 deletions src/components/Input/BottomLinedInputLabel.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,16 @@ import styled, { css, Interpolation, ThemeProps } from 'styled-components';
import { variant } from 'styled-system';
import { theme } from '../../essentials/theme';
import { get } from '../../utils/themeGet';
import { InternalInputComponentProps } from './BaseInput';
import { activePositionBaseStyles, BaseInputLabel } from './BaseInputLabel';
import { InputProps } from './InputProps';

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

const sizeVariant = variant({
const sizeVariant = variant<Record<string, unknown>, InputProps['size']>({
prop: 'size',
variants: {
small: {
Expand Down
44 changes: 23 additions & 21 deletions src/components/Input/BoxedInput.ts
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,21 @@
import { FC } from 'react';
import styled, { css } from 'styled-components';
import { variant } from 'styled-system';
import { Colors } from '../../essentials';
import { BaseInput, InternalInputComponentProps } from './BaseInput';
import { activeBoxedPosition, BoxedInputLabel } from './BoxedInputLabel';
import { getSemanticValue } from '../../utils/cssVariables';
import { InputProps } from './InputProps';

const errorStyles = css`
box-shadow: inset 0 0 0 0.0625rem ${Colors.NEGATIVE_ORANGE_900};
border-color: ${Colors.NEGATIVE_ORANGE_900};
box-shadow: inset 0 0 0 0.0625rem ${getSemanticValue('border-danger-emphasized')};
border-color: ${getSemanticValue('border-danger-emphasized')};
& ~ ${BoxedInputLabel} {
color: ${Colors.NEGATIVE_ORANGE_900};
color: ${getSemanticValue('text-dangerInverted')};
}
`;

const sizeVariant = variant({
const sizeVariant = variant<Record<string, unknown>, InputProps['size']>({
prop: 'size',
variants: {
small: {
Expand All @@ -30,32 +31,32 @@ const sizeVariant = variant({

const getLabelColor = ({ hasValue, inverted }: InternalInputComponentProps) => {
if (inverted) {
return Colors.AUTHENTIC_BLUE_200;
return getSemanticValue('text-secondaryInverted');
}

if (hasValue) {
return Colors.AUTHENTIC_BLUE_550;
return getSemanticValue('text-secondary');
}

return Colors.AUTHENTIC_BLUE_350;
return getSemanticValue('text-tertiary');
};

const BoxedInput: FC<InternalInputComponentProps> = styled(BaseInput)<InternalInputComponentProps>`
${sizeVariant}
& + ${BoxedInputLabel} {
${p => (p.hasValue || p.placeholder ? activeBoxedPosition(p.size as Pick<InternalInputComponentProps, 'size'>) : undefined)};
${p => (p.hasValue || p.placeholder ? activeBoxedPosition(p.size) : undefined)};
color: ${getLabelColor};
background: ${p => (p.inverted ? Colors.AUTHENTIC_BLUE_900 : Colors.WHITE)};
background: ${p => getSemanticValue(p.inverted ? 'background-primary-inverted' : 'background-primary-default')};
background: ${p =>
`linear-gradient(0deg, ${p.inverted ? Colors.AUTHENTIC_BLUE_900 : Colors.WHITE} calc(50% + ${
(p.size as Pick<InternalInputComponentProps, 'size'>) === 'small' ? '0.0825rem' : '0.0625rem'
}), transparent 50%)`};
`linear-gradient(0deg, ${getSemanticValue(
p.inverted ? 'background-primary-inverted' : 'background-primary-default'
)} calc(50% + ${p.size === 'small' ? '0.0825rem' : '0.0625rem'}), transparent 50%)`};
}
${p => (p.error ? errorStyles : undefined)}
&:disabled {
& + ${BoxedInputLabel} {
color: ${p => (p.inverted ? Colors.AUTHENTIC_BLUE_550 : Colors.AUTHENTIC_BLUE_200)};
color: ${p => getSemanticValue(p.inverted ? 'text-disabledInverted' : 'text-disabled')};
}
}
Expand All @@ -64,19 +65,20 @@ const BoxedInput: FC<InternalInputComponentProps> = styled(BaseInput)<InternalIn
&:-webkit-autofill:focus,
&:-webkit-autofill:active {
& + ${BoxedInputLabel} {
${p => activeBoxedPosition(p.size as Pick<InternalInputComponentProps, 'size'>)};
${p => activeBoxedPosition(p.size)};
}
}
&:focus:not(:disabled) {
& + ${BoxedInputLabel} {
${p => activeBoxedPosition(p.size as Pick<InternalInputComponentProps, 'size'>)};
color: ${p => (p.inverted ? Colors.WHITE : Colors.ACTION_BLUE_900)};
background: ${p => (p.inverted ? Colors.AUTHENTIC_BLUE_900 : Colors.WHITE)};
${p => activeBoxedPosition(p.size)};
color: ${p => getSemanticValue(p.inverted ? 'text-primaryInverted' : 'text-info')};
background: ${p =>
`linear-gradient(0deg, ${p.inverted ? Colors.AUTHENTIC_BLUE_900 : Colors.WHITE} calc(50% + ${
(p.size as Pick<InternalInputComponentProps, 'size'>) === 'small' ? '0.0825rem' : '0.0625rem'
}), transparent 50%)`};
getSemanticValue(p.inverted ? 'background-primary-inverted' : 'background-primary-default')};
background: ${p =>
`linear-gradient(0deg, ${getSemanticValue(
p.inverted ? 'background-primary-inverted' : 'background-primary-default'
)} calc(50% + ${p.size === 'small' ? '0.0825rem' : '0.0625rem'}), transparent 50%)`};
}
}
`;
Expand Down
6 changes: 3 additions & 3 deletions src/components/Input/BoxedInputLabel.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,17 @@ import styled, { css, Interpolation, ThemeProps } from 'styled-components';
import { variant } from 'styled-system';
import { theme } from '../../essentials/theme';
import { get } from '../../utils/themeGet';
import { InternalInputComponentProps } from './BaseInput';
import { activePositionBaseStyles, BaseInputLabel } from './BaseInputLabel';
import { InputProps } from './InputProps';

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

const sizeVariant = variant({
const sizeVariant = variant<Record<string, unknown>, InputProps['size']>({
prop: 'size',
variants: {
small: {
Expand Down
11 changes: 6 additions & 5 deletions src/essentials/Colors/Colors.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@ export const SemanticColors = {
background: {
primary: {
default: Colors.white,
inverted: Colors.blue.primary[900],
emphasized: Colors.blue.primary[900],
hover: Colors.blue.primary[1100],
disabled: Colors.blue.primary[200],
Expand Down Expand Up @@ -137,12 +138,12 @@ export const SemanticColors = {
},
border: {
primary: {
default: Colors.blue.primary[900],
default: Colors.blue.primary[200],
emphasized: Colors.blue.primary[1100],
inverted: Colors.white,
inverted: Colors.blue.primary[550],
},
secondary: {
default: Colors.blue.primary[200],
default: Colors.blue.primary[50],
inverted: Colors.white,
},
disabled: {
Expand All @@ -162,8 +163,8 @@ export const SemanticColors = {
emphasized: Colors.yellow[900]
},
danger: {
default: Colors.orange[900],
emphasized: Colors.orange[1000],
default: Colors.orange[350],
emphasized: Colors.orange[900],
disabled: Colors.orange[350],
},
},
Expand Down
1 change: 1 addition & 0 deletions src/essentials/Colors/RedesignedColors.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ export const SemanticColors = {
background: {
primary: {
default: Colors.white,
inverted: Colors.blue.primary[900],
emphasized: Colors.blue.primary[900],
hover: Colors.blue.primary[1100],
disabled: Colors.blue.primary[200],
Expand Down
1 change: 1 addition & 0 deletions src/essentials/Colors/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ export interface SemanticColorsSchema {
background: {
primary: {
default: Color,
inverted: Color,
emphasized: Color,
hover: Color,
disabled: Color,
Expand Down

0 comments on commit 3268c02

Please sign in to comment.