Skip to content

Commit d71e73b

Browse files
nlopinnlopin
committed
feat(tag): use css variables for colors
1 parent 1664f57 commit d71e73b

File tree

6 files changed

+40
-31
lines changed

6 files changed

+40
-31
lines changed

‎src/components/Tag/Tag.tsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@ import React, { FC, MouseEvent, PropsWithChildren } from 'react';
22
import styled from 'styled-components';
33
import { margin, MarginProps } from 'styled-system';
44

5-
import { Colors } from '../../essentials';
65
import { theme } from '../../essentials/theme';
76
import { CloseIcon } from '../../icons';
87
import { get } from '../../utils/themeGet';
8+
import { getSemanticValue } from '../../utils/cssVariables';
99
import { Text } from '../Text/Text';
1010

1111
interface TagProps extends MarginProps {
@@ -20,7 +20,7 @@ interface TagProps extends MarginProps {
2020
}
2121

2222
const TagText = styled(Text).attrs({ theme })<Pick<TagProps, 'dismissible'>>`
23-
color: ${Colors.ACTION_BLUE_900};
23+
color: ${getSemanticValue('text-info')};
2424
margin-left: 0.75rem;
2525
margin-right: ${props => (props.dismissible ? '0.25rem' : '0.75rem')};
2626
font-size: ${get('fontSizes.1')};
@@ -40,8 +40,8 @@ const DismissIcon = styled(CloseIcon).attrs({ size: 18 })`
4040

4141
const TagWrapper = styled.div.attrs({ theme })<TagProps>`
4242
box-sizing: border-box;
43-
background-color: ${Colors.ACTION_BLUE_50};
44-
border: solid 0.0625rem ${Colors.ACTION_BLUE_900};
43+
background-color: ${getSemanticValue('background-info-default')};
44+
border: solid 0.0625rem ${getSemanticValue('border-info-emphasized')};
4545
display: inline-flex;
4646
align-items: center;
4747
border-radius: 2rem;
@@ -54,22 +54,22 @@ const TagWrapper = styled.div.attrs({ theme })<TagProps>`
5454
${margin}
5555
5656
&:hover {
57-
background-color: ${Colors.ACTION_BLUE_900};
57+
background-color: ${getSemanticValue('background-info-emphasized')};
5858
5959
> ${TagText} {
60-
color: ${Colors.WHITE};
60+
color: ${getSemanticValue('text-primaryInverted')};
6161
}
6262
6363
> ${DismissIcon} {
64-
color: ${Colors.WHITE};
64+
color: ${getSemanticValue('icon-primary-inverted')};
6565
}
6666
}
6767
`;
6868

6969
const Tag: FC<PropsWithChildren<TagProps>> = ({ children, onDismiss, dismissible = true, ...rest }) => (
7070
<TagWrapper {...rest}>
7171
<TagText dismissible={dismissible}>{children}</TagText>
72-
{dismissible && <DismissIcon data-testid="dismiss-icon" color={Colors.ACTION_BLUE_900} onClick={onDismiss} />}
72+
{dismissible && <DismissIcon data-testid="dismiss-icon" color={getSemanticValue('icon-info')} onClick={onDismiss} />}
7373
</TagWrapper>
7474
);
7575

‎src/essentials/Colors/Colors.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,8 @@ export const SemanticColors = {
7272
danger: Colors.orange[1000],
7373
dangerInverted: Colors.orange[900],
7474
success: Colors.green[900],
75-
warning: Colors.yellow[900]
75+
warning: Colors.yellow[900],
76+
info: Colors.blue.secondary[900]
7677
},
7778
background: {
7879
primary: {
@@ -131,7 +132,8 @@ export const SemanticColors = {
131132
emphasized: Colors.orange[1000],
132133
},
133134
success: Colors.green[900],
134-
warning: Colors.yellow[900]
135+
warning: Colors.yellow[900],
136+
info: Colors.blue.secondary[900]
135137
},
136138
border: {
137139
primary: {

‎src/essentials/Colors/RedesignedColors.ts

+19-19
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export const Colors = {
1616
secondary: {
1717
1000: 'hsla(346, 51%, 33%, 1)',
1818
900: 'hsla(347, 42%, 43%, 1)',
19-
350: 'hsla(347, 42%, 43%, 1)',
19+
350: 'hsla(349, 89%, 76%, 1)',
2020
150: 'hsla(351, 100%, 85%, 1)',
2121
100: 'hsla(352, 100%, 93%, 1)',
2222
50: 'hsla(9, 100%, 96%, 1)',
@@ -52,12 +52,10 @@ export const Colors = {
5252
transparent: 'transparent',
5353
} as const;
5454

55-
// AUTHENTIC = primary now
56-
// ACTION = secondary now
5755
// Semantic Colors Tier (--wave-s-color-...)
5856
export const SemanticColors = {
5957
text: {
60-
primary: Colors.blue.primary[900], // --wave-s-color-text-primary
58+
primary: Colors.blue.primary[900],
6159
primaryInverted: Colors.white,
6260
secondary: Colors.blue.primary[550],
6361
secondaryInverted: Colors.blue.primary[200],
@@ -72,15 +70,16 @@ export const SemanticColors = {
7270
danger: Colors.orange[1000],
7371
dangerInverted: Colors.orange[900],
7472
success: Colors.green[900],
75-
warning: Colors.yellow[900]
73+
warning: Colors.yellow[900],
74+
info: Colors.blue.primary[550],
7675
},
7776
background: {
7877
primary: {
7978
default: Colors.white,
8079
emphasized: Colors.blue.primary[900],
8180
hover: Colors.blue.primary[1100],
8281
disabled: Colors.blue.primary[200],
83-
},
82+
},
8483
secondary: {
8584
default: Colors.blue.primary[50],
8685
emphasized: Colors.blue.primary[550],
@@ -91,13 +90,13 @@ export const SemanticColors = {
9190
hover: Colors.orange[1000]
9291
},
9392
info: {
94-
default: Colors.blue.secondary[50],
95-
emphasized: Colors.blue.secondary[900],
93+
default: Colors.blue.primary[50],
94+
emphasized: Colors.blue.primary[550],
9695
hover: Colors.blue.secondary[350],
9796
},
9897
success: {
9998
default: Colors.green[50],
100-
emphasized: Colors.green[900],
99+
emphasized: Colors.green[900],
101100
},
102101
warning: {
103102
default: Colors.yellow[50],
@@ -111,8 +110,8 @@ export const SemanticColors = {
111110
inverted: Colors.white,
112111
},
113112
secondary: {
114-
default: Colors.blue.primary[550],
115-
inverted: Colors.blue.primary[200],
113+
default: Colors.blue.primary[350],
114+
inverted: Colors.blue.primary[50],
116115
},
117116
tertiary: {
118117
default: Colors.blue.primary[350],
@@ -131,25 +130,26 @@ export const SemanticColors = {
131130
emphasized: Colors.orange[1000],
132131
},
133132
success: Colors.green[900],
134-
warning: Colors.yellow[900]
133+
warning: Colors.yellow[900],
134+
info: Colors.blue.primary[350],
135135
},
136136
border: {
137137
primary: {
138-
default: Colors.blue.primary[900],
138+
default: Colors.blue.primary[200],
139139
emphasized: Colors.blue.primary[1100],
140-
inverted: Colors.white,
140+
inverted: Colors.blue.primary[550],
141141
},
142142
secondary: {
143-
default: Colors.blue.primary[200],
143+
default: Colors.blue.primary[50],
144144
inverted: Colors.white,
145145
},
146146
disabled: {
147147
default: Colors.blue.primary[200],
148148
inverted: Colors.blue.primary[550],
149149
},
150150
info: {
151-
default: Colors.blue.secondary[350],
152-
emphasized: Colors.blue.secondary[900],
151+
default: Colors.blue.primary[200],
152+
emphasized: Colors.blue.primary[550],
153153
},
154154
success: {
155155
default: Colors.green[350],
@@ -160,8 +160,8 @@ export const SemanticColors = {
160160
emphasized: Colors.yellow[900]
161161
},
162162
danger: {
163-
default: Colors.orange[900],
164-
emphasized: Colors.orange[1000],
163+
default: Colors.orange[350],
164+
emphasized: Colors.orange[900],
165165
disabled: Colors.orange[350],
166166
},
167167
},

‎src/essentials/Colors/globalStyles.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { createGlobalStyle } from 'styled-components';
22
import { Colors as ClassicBrandColors, SemanticColors as ClassicSemanticColors } from './Colors';
33
import { Colors as RedesignedBrandColors, SemanticColors as RedesignedSemanticColors } from './RedesignedColors';
4-
import { generateGlobalTierCssVariables, generateSemanticTierCssVariables } from '../../utils/generateCssVariables';
4+
import { generateGlobalTierCssVariables, generateSemanticTierCssVariables } from '../../utils/cssVariables';
55

66
export const ClassicColors = createGlobalStyle`
77
:root {

‎src/essentials/Colors/types.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export interface SemanticColorsSchema {
1919
linkInverted: Color,
2020
linkHover: Color,
2121
linkHoverInverted: Color,
22+
info: Color,
2223
danger: Color,
2324
dangerInverted: Color,
2425
success: Color,
@@ -82,6 +83,7 @@ export interface SemanticColorsSchema {
8283
},
8384
success: Color,
8485
warning: Color,
86+
info: Color,
8587
},
8688
border: {
8789
primary: {
@@ -117,7 +119,8 @@ export interface SemanticColorsSchema {
117119
},
118120
}
119121

120-
export type SemanticCssVariable = `--wave-s-color-${String.Join<List.Required<Object.Paths<SemanticColorsSchema>>, '-'>}`;
122+
export type SemanticCssToken = String.Join<List.Required<Object.Paths<SemanticColorsSchema>>, '-'>
123+
export type SemanticCssVariable = `--wave-s-color-${SemanticCssToken}`;
121124

122125
export type ReadCssVariable = `var(${SemanticCssVariable})` | `var(${SemanticCssVariable}, ${string})`;
123126

‎src/utils/generateCssVariables.ts renamed to ‎src/utils/cssVariables.ts

+4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { ReadCssVariable, SemanticCssToken } from '../essentials/Colors/types';
2+
13
type TokenObject = {
24
[key: string]: string | number | null | undefined | TokenObject;
35
};
@@ -12,3 +14,5 @@ const parseLevel = (tokenObject: TokenObject, path: string[] = [], tier?: string
1214

1315
export const generateGlobalTierCssVariables = (tokens: TokenObject): ReadonlyArray<string> => parseLevel(tokens, ['color'], 'g');
1416
export const generateSemanticTierCssVariables = (tokens: TokenObject): ReadonlyArray<string> => parseLevel(tokens, ['color'], 's');
17+
18+
export const getSemanticValue = (token: SemanticCssToken): ReadCssVariable => `var(--wave-s-color-${token})`

0 commit comments

Comments
 (0)