Skip to content

Commit fb6b7e1

Browse files
author
Rasid Redzic
committed
feat(label): migrate to semantic colors
1 parent f81322e commit fb6b7e1

File tree

4 files changed

+127
-94
lines changed

4 files changed

+127
-94
lines changed

‎src/components/Label/Label.tsx

Lines changed: 31 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import styled from 'styled-components';
22
import { compose, margin, MarginProps, ResponsiveValue, variant } from 'styled-system';
33
import { Text } from '../Text/Text';
4-
import { Colors } from '../../essentials';
54
import { theme } from '../../essentials/theme';
65
import { get } from '../../utils/themeGet';
6+
import { getSemanticValue } from '../../utils/cssVariables';
77

88
interface LabelProps extends MarginProps {
99
/**
@@ -21,59 +21,59 @@ interface LabelProps extends MarginProps {
2121
const normalVariantStyles = variant({
2222
variants: {
2323
default: {
24-
color: Colors.AUTHENTIC_BLUE_900,
25-
borderColor: Colors.AUTHENTIC_BLUE_200,
26-
backgroundColor: Colors.AUTHENTIC_BLUE_50
24+
color: getSemanticValue('text-primary'),
25+
borderColor: getSemanticValue('border-primary-default'),
26+
backgroundColor: getSemanticValue('background-secondary-default')
2727
},
2828
info: {
29-
color: Colors.ACTION_BLUE_900,
30-
borderColor: Colors.ACTION_BLUE_350,
31-
backgroundColor: Colors.ACTION_BLUE_50
29+
color: getSemanticValue('overrides-label-text-link'),
30+
borderColor: getSemanticValue('border-info-default'),
31+
backgroundColor: getSemanticValue('background-info-default')
3232
},
3333
success: {
34-
color: Colors.POSITIVE_GREEN_1000,
35-
borderColor: Colors.POSITIVE_GREEN_350,
36-
backgroundColor: Colors.POSITIVE_GREEN_50
34+
color: getSemanticValue('text-success'),
35+
borderColor: getSemanticValue('border-success-default'),
36+
backgroundColor: getSemanticValue('background-success-default')
3737
},
3838
warning: {
39-
color: Colors.AUTHENTIC_BLUE_900,
40-
borderColor: Colors.ATTENTION_YELLOW_350,
41-
backgroundColor: Colors.ATTENTION_YELLOW_50
39+
color: getSemanticValue('text-primary'),
40+
borderColor: getSemanticValue('border-warning-emphasized'),
41+
backgroundColor: getSemanticValue('background-warning-default')
4242
},
4343
danger: {
44-
color: Colors.NEGATIVE_ORANGE_1000,
45-
borderColor: Colors.NEGATIVE_ORANGE_350,
46-
backgroundColor: Colors.NEGATIVE_ORANGE_50
44+
color: getSemanticValue('text-danger'),
45+
borderColor: getSemanticValue('border-danger-default'),
46+
backgroundColor: getSemanticValue('background-danger-default')
4747
}
4848
}
4949
});
5050

5151
const filledVariantStyles = variant({
5252
variants: {
5353
default: {
54-
color: Colors.WHITE,
55-
borderColor: Colors.AUTHENTIC_BLUE_350,
56-
backgroundColor: Colors.AUTHENTIC_BLUE_350
54+
color: getSemanticValue('text-primaryInverted'),
55+
borderColor: getSemanticValue('border-transparent'),
56+
backgroundColor: getSemanticValue('overrides-label-background-secondary-emphasized')
5757
},
5858
info: {
59-
color: Colors.WHITE,
60-
borderColor: Colors.ACTION_BLUE_900,
61-
backgroundColor: Colors.ACTION_BLUE_900
59+
color: getSemanticValue('text-primaryInverted'),
60+
borderColor: getSemanticValue('border-transparent'),
61+
backgroundColor: getSemanticValue('overrides-label-background-info-emphasized')
6262
},
6363
success: {
64-
color: Colors.WHITE,
65-
borderColor: Colors.POSITIVE_GREEN_900,
66-
backgroundColor: Colors.POSITIVE_GREEN_900
64+
color: getSemanticValue('text-primaryInverted'),
65+
borderColor: getSemanticValue('border-transparent'),
66+
backgroundColor: getSemanticValue('background-success-emphasized')
6767
},
6868
warning: {
69-
color: Colors.AUTHENTIC_BLUE_900,
70-
borderColor: Colors.ATTENTION_YELLOW_900,
71-
backgroundColor: Colors.ATTENTION_YELLOW_900
69+
color: getSemanticValue('text-primary'),
70+
borderColor: getSemanticValue('border-transparent'),
71+
backgroundColor: getSemanticValue('background-warning-emphasized')
7272
},
7373
danger: {
74-
color: Colors.WHITE,
75-
borderColor: Colors.NEGATIVE_ORANGE_900,
76-
backgroundColor: Colors.NEGATIVE_ORANGE_900
74+
color: getSemanticValue('text-primaryInverted'),
75+
borderColor: getSemanticValue('border-transparent'),
76+
backgroundColor: getSemanticValue('background-danger-emphasized')
7777
}
7878
}
7979
});

‎src/essentials/Colors/Colors.ts

Lines changed: 45 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -11,45 +11,45 @@ export const Colors = {
1111
550: 'hsl(210, 16%, 46%)',
1212
350: 'hsl(213, 14%, 66%)',
1313
200: 'hsl(210, 14%, 80%)',
14-
50: 'hsl(220, 12%, 95%)',
14+
50: 'hsl(220, 12%, 95%)'
1515
},
1616
secondary: {
1717
1000: 'hsl(212, 92%, 34%)',
1818
900: 'hsl(212, 92%, 45%)',
1919
350: 'hsl(212, 75%, 78%)',
2020
150: 'hsl(213, 74%, 91%)',
2121
100: 'hsl(211, 74%, 94%)',
22-
50: 'hsl(210, 75%, 97%)',
22+
50: 'hsl(210, 75%, 97%)'
2323
}
2424
},
2525
red: {
2626
1000: 'hsl(352, 92%, 39%)',
27-
900: 'hsl(352, 100%, 52%)',
27+
900: 'hsl(352, 100%, 52%)'
2828
},
2929
magenta: {
3030
1000: 'hsl(302, 100%, 37%)',
3131
900: 'hsl(302, 100%, 50%)',
3232
350: 'hsl(302, 100%, 81%)',
33-
50: 'hsl(300, 100%, 97%)',
33+
50: 'hsl(300, 100%, 97%)'
3434
},
3535
green: {
3636
1000: 'hsl(149, 92%, 24%)',
3737
900: 'hsl(149, 93%, 32%)',
3838
350: 'hsl(149, 44%, 74%)',
39-
50: 'hsl(147, 47%, 96%)',
39+
50: 'hsl(147, 47%, 96%)'
4040
},
4141
yellow: {
4242
900: 'hsl(48, 100%, 50%)',
4343
350: 'hsl(48, 100%, 81%)',
44-
50: 'hsl(47, 100%, 97%)',
44+
50: 'hsl(47, 100%, 97%)'
4545
},
4646
orange: {
4747
1000: 'hsl(21, 96%, 38%)',
4848
900: 'hsl(21, 100%, 51%)',
4949
350: 'hsl(21, 100%, 81%)',
5050
50: 'hsl(21, 100%, 97%)'
5151
},
52-
transparent: 'transparent',
52+
transparent: 'transparent'
5353
} as const;
5454

5555
// AUTHENTIC = primary now
@@ -71,7 +71,7 @@ export const SemanticColors = {
7171
linkHoverInverted: Colors.blue.secondary[50],
7272
danger: Colors.orange[1000],
7373
dangerInverted: Colors.orange[900],
74-
success: Colors.green[900],
74+
success: Colors.green[1000],
7575
warning: Colors.yellow[900],
7676
info: Colors.blue.secondary[900]
7777
},
@@ -81,15 +81,15 @@ export const SemanticColors = {
8181
inverted: Colors.blue.primary[900],
8282
emphasized: Colors.blue.primary[900],
8383
hover: Colors.blue.primary[1100],
84-
disabled: Colors.blue.primary[200],
85-
},
84+
disabled: Colors.blue.primary[200]
85+
},
8686
secondary: {
8787
default: Colors.blue.primary[50],
88-
emphasized: Colors.blue.primary[550],
88+
emphasized: Colors.blue.primary[550]
8989
},
9090
tertiary: {
91-
default:Colors.blue.primary[200],
92-
disabled: Colors.blue.primary[50],
91+
default: Colors.blue.primary[200],
92+
disabled: Colors.blue.primary[50]
9393
},
9494
danger: {
9595
default: Colors.orange[50],
@@ -99,45 +99,45 @@ export const SemanticColors = {
9999
info: {
100100
default: Colors.blue.secondary[50],
101101
emphasized: Colors.blue.secondary[900],
102-
hover: Colors.blue.secondary[350],
102+
hover: Colors.blue.secondary[350]
103103
},
104104
success: {
105105
default: Colors.green[50],
106-
emphasized: Colors.green[900],
106+
emphasized: Colors.green[900]
107107
},
108108
warning: {
109109
default: Colors.yellow[50],
110-
emphasized: Colors.yellow[900],
110+
emphasized: Colors.yellow[900]
111111
},
112112
highlight: Colors.blue.secondary[900],
113-
transparent: Colors.transparent,
113+
transparent: Colors.transparent
114114
},
115115
icon: {
116116
primary: {
117117
default: Colors.blue.primary[900],
118-
inverted: Colors.white,
118+
inverted: Colors.white
119119
},
120120
secondary: {
121121
default: Colors.blue.primary[550],
122122
inverted: Colors.blue.primary[200],
123123
hover: Colors.blue.primary[900],
124-
hoverInverted: Colors.blue.primary[50],
124+
hoverInverted: Colors.blue.primary[50]
125125
},
126126
tertiary: {
127127
default: Colors.blue.primary[350],
128-
inverted: Colors.blue.primary[350],
128+
inverted: Colors.blue.primary[350]
129129
},
130130
disabled: {
131131
default: Colors.blue.primary[200],
132-
inverted: Colors.blue.primary[550],
132+
inverted: Colors.blue.primary[550]
133133
},
134134
action: {
135135
default: Colors.blue.secondary[900],
136-
emphasized: Colors.blue.secondary[1000],
136+
emphasized: Colors.blue.secondary[1000]
137137
},
138138
danger: {
139139
default: Colors.orange[900],
140-
emphasized: Colors.orange[1000],
140+
emphasized: Colors.orange[1000]
141141
},
142142
success: Colors.green[900],
143143
warning: Colors.yellow[900],
@@ -147,26 +147,26 @@ export const SemanticColors = {
147147
primary: {
148148
default: Colors.blue.primary[200],
149149
emphasized: Colors.blue.primary[1100],
150-
inverted: Colors.blue.primary[550],
150+
inverted: Colors.blue.primary[550]
151151
},
152152
secondary: {
153153
default: Colors.blue.primary[50],
154-
inverted: Colors.white,
154+
inverted: Colors.white
155155
},
156156
focus: {
157157
default: Colors.blue.secondary[900]
158158
},
159159
disabled: {
160160
default: Colors.blue.primary[200],
161-
inverted: Colors.blue.primary[550],
161+
inverted: Colors.blue.primary[550]
162162
},
163163
info: {
164164
default: Colors.blue.secondary[350],
165-
emphasized: Colors.blue.secondary[900],
165+
emphasized: Colors.blue.secondary[900]
166166
},
167167
success: {
168168
default: Colors.green[350],
169-
emphasized: Colors.green[900],
169+
emphasized: Colors.green[900]
170170
},
171171
warning: {
172172
default: Colors.yellow[350],
@@ -175,8 +175,23 @@ export const SemanticColors = {
175175
danger: {
176176
default: Colors.orange[350],
177177
emphasized: Colors.orange[900],
178-
disabled: Colors.orange[350],
178+
disabled: Colors.orange[350]
179179
},
180180
transparent: Colors.transparent
181181
},
182-
} satisfies SemanticColorsSchema
182+
overrides: {
183+
label: {
184+
text: {
185+
link: Colors.blue.secondary[900]
186+
},
187+
background: {
188+
secondary: {
189+
emphasized: Colors.blue.primary[550]
190+
},
191+
info: {
192+
emphasized: Colors.blue.secondary[900],
193+
}
194+
}
195+
}
196+
}
197+
} satisfies SemanticColorsSchema;

0 commit comments

Comments
 (0)