Skip to content

Commit 40b8ff8

Browse files
Mukesh-FNMukesh-FN
committed
feat: upgrading colours & font in wave 2.0 | SUP-49317
1 parent 441a5c4 commit 40b8ff8

File tree

3 files changed

+231
-318
lines changed

3 files changed

+231
-318
lines changed

‎src/essentials/Colors/Colors.ts

Lines changed: 51 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -5,33 +5,7 @@ import { createThemeGlobalStyle } from './globalStyles';
55
export const Colors = {
66
white: 'hsl(0, 0%, 100%)',
77
black: 'hsl(0, 0%, 0%)',
8-
neutral: {
9-
10: 'hsl(0, 0%, 11%)',
10-
20: 'hsl(0, 0%, 19%)',
11-
30: 'hsl(0, 0%, 28%)',
12-
40: 'hsl(0, 0%, 37%)',
13-
50: 'hsl(0, 0%, 47%)',
14-
60: 'hsl(0, 0%, 57%)',
15-
70: 'hsl(0, 0%, 67%)',
16-
80: 'hsl(0, 0%, 78%)',
17-
90: 'hsl(0, 0%, 89%)',
18-
95: 'hsl(0, 0%, 95%)',
19-
97: 'hsl(0, 0%, 98%)',
20-
99: 'hsl(0, 0%, 99%)'
21-
},
228
blue: {
23-
10: 'hsl(214, 77%, 10%)',
24-
20: 'hsl(215, 75%, 20%)',
25-
30: 'hsl(214, 76%, 31%)',
26-
40: 'hsl(214, 75%, 41%)',
27-
50: 'hsl(214, 78%, 51%)',
28-
60: 'hsl(214, 78%, 61%)',
29-
70: 'hsl(214, 79%, 71%)',
30-
80: 'hsl(215, 78%, 80%)',
31-
90: 'hsl(215, 80%, 90%)',
32-
95: 'hsl(215, 76%, 95%)',
33-
97: 'hsl(218, 80%, 98%)',
34-
359
primary: {
3610
1100: 'hsl(211, 100%, 6%)',
3711
900: 'hsl(211, 100%, 12%)',
@@ -45,23 +19,14 @@ export const Colors = {
4519
1000: 'hsl(212, 92%, 34%)',
4620
900: 'hsl(212, 92%, 45%)',
4721
350: 'hsl(212, 75%, 78%)',
48-
150: 'hsl(213, 74%, 91%)',
22+
150: 'hsl(214, 74%, 91%)',
4923
100: 'hsl(211, 74%, 94%)',
50-
50: 'hsl(210, 75%, 97%)'
24+
50: 'hsl(210, 73%, 97%)'
5125
}
5226
},
5327
red: {
54-
10: 'hsl(348, 100%, 13%)',
55-
20: 'hsl(345, 100%, 20%)',
56-
30: 'hsl(344, 100%, 29%)',
57-
40: 'hsl(342, 100%, 37%)',
58-
50: 'hsl(342, 100%, 45%)',
59-
60: 'hsl(352, 100%, 66%)',
60-
70: 'hsl(355, 100%, 76%)',
61-
80: 'hsl(357, 100%, 85%)',
62-
90: 'hsl(0, 100%, 93%)',
63-
95: 'hsl(3, 100%, 96%)',
64-
97: 'hsl(0, 100%, 98%)'
28+
1000: 'hsl(352, 92%, 39%)',
29+
900: 'hsl(352, 100%, 52%)'
6530
},
6631
magenta: {
6732
1000: 'hsl(302, 100%, 37%)',
@@ -73,44 +38,18 @@ export const Colors = {
7338
1000: 'hsl(149, 92%, 24%)',
7439
900: 'hsl(149, 93%, 32%)',
7540
350: 'hsl(149, 44%, 74%)',
76-
77-
10: 'hsl(124, 47%, 7%)',
78-
20: 'hsl(122, 47%, 13%)',
79-
30: 'hsl(124, 48%, 20%)',
80-
40: 'hsl(123, 48%, 26%)',
81-
50: 'hsl(123, 48%, 33%)',
82-
60: 'hsl(123, 27%, 46%)',
83-
70: 'hsl(124, 23%, 60%)',
84-
80: 'hsl(122, 24%, 73%)',
85-
90: 'hsl(124, 24%, 87%)',
86-
95: 'hsl(120, 24%, 93%)',
87-
97: 'hsl(120, 20%, 97%)'
41+
50: 'hsl(144, 50%, 96%)'
8842
},
8943
yellow: {
90-
10: 'hsl(45, 92%, 5%)',
91-
20: 'hsl(45, 95%, 15%)',
92-
30: 'hsl(46, 94%, 25%)',
93-
40: 'hsl(46, 93%, 36%)',
94-
50: 'hsl(46, 94%, 46%)',
95-
60: 'hsl(46, 98%, 51%)',
96-
70: 'hsl(46, 98%, 61%)',
97-
80: 'hsl(46, 97%, 71%)',
98-
90: 'hsl(46, 98%, 80%)',
99-
95: 'hsl(46, 96%, 90%)',
100-
97: 'hsl(46, 100%, 95%)'
44+
900: 'hsl(48, 100%, 50%)',
45+
350: 'hsl(48, 100%, 81%)',
46+
50: 'hsl(48, 100%, 97%)'
10147
},
10248
orange: {
103-
10: 'hsl(32, 92%, 10%)',
104-
20: 'hsl(32, 92%, 20%)',
105-
30: 'hsl(33, 92%, 30%)',
106-
40: 'hsl(32, 92%, 45%)',
107-
50: 'hsl(32, 92%, 50%)',
108-
60: 'hsl(32, 91%, 55%)',
109-
70: 'hsl(32, 91%, 65%)',
110-
80: 'hsl(32, 92%, 75%)',
111-
90: 'hsl(32, 92%, 85%)',
112-
95: 'hsl(32, 92%, 90%)',
113-
97: 'hsl(30, 100%, 96%)'
49+
1000: 'hsl(21, 96%, 38%)',
50+
900: 'hsl(21, 100%, 51%)',
51+
350: 'hsl(21, 100%, 81%)',
52+
50: 'hsl(20, 100%, 97%)'
11453
},
11554
transparent: 'transparent'
11655
} as const;
@@ -153,11 +92,11 @@ export const SemanticColors = {
15392
default: Colors.green[900]
15493
},
15594
warning: {
156-
default: Colors.yellow[60]
95+
default: Colors.yellow[900]
15796
},
15897
danger: {
159-
default: Colors.orange[40],
160-
emphasized: Colors.orange[30]
98+
default: Colors.orange[900],
99+
emphasized: Colors.orange[1000]
161100
}
162101
},
163102
background: {
@@ -191,15 +130,15 @@ export const SemanticColors = {
191130
emphasized: Colors.blue.secondary[900]
192131
},
193132
success: {
194-
default: Colors.green[97]
133+
default: Colors.green[50]
195134
},
196135
warning: {
197-
default: Colors.yellow[97]
136+
default: Colors.yellow[50]
198137
},
199138
danger: {
200-
faded: Colors.orange[97],
201-
default: Colors.orange[40],
202-
emphasized: Colors.orange[30]
139+
faded: Colors.orange[50],
140+
default: Colors.orange[900],
141+
emphasized: Colors.orange[1000]
203142
}
204143
},
205144
surface: {
@@ -219,17 +158,17 @@ export const SemanticColors = {
219158
emphasized: Colors.blue.secondary[900]
220159
},
221160
success: {
222-
default: Colors.green[97],
161+
default: Colors.green[50],
223162
emphasized: Colors.green[900]
224163
},
225164
warning: {
226-
default: Colors.yellow[97],
227-
emphasized: Colors.yellow[60]
165+
default: Colors.yellow[50],
166+
emphasized: Colors.yellow[900]
228167
},
229168
danger: {
230-
faded: Colors.orange[97],
231-
default: Colors.orange[97],
232-
emphasized: Colors.orange[40]
169+
faded: Colors.orange[50],
170+
default: Colors.orange[50],
171+
emphasized: Colors.orange[900]
233172
}
234173
},
235174
backdrop: Colors.blue.primary[900]
@@ -257,18 +196,18 @@ export const SemanticColors = {
257196
default: Colors.green[900]
258197
},
259198
warning: {
260-
banner: Colors.yellow[90],
261-
default: Colors.yellow[60]
199+
banner: Colors.yellow[350],
200+
default: Colors.yellow[900]
262201
},
263202
danger: {
264-
banner: Colors.orange[80],
265-
faded: Colors.orange[80],
266-
default: Colors.orange[40]
203+
banner: Colors.orange[350],
204+
faded: Colors.orange[350],
205+
default: Colors.orange[900]
267206
}
268207
},
269208
logo: {
270-
free: 'hsl(350, 91%, 41%)',
271-
now: 'hsl(350, 91%, 41%)',
209+
free: 'hsl(342, 100%, 45%)',
210+
now: 'hsl(342, 100%, 45%)',
272211
subtitle: Colors.black,
273212
lyft: 'hsl(316, 81%, 56%)'
274213
},
@@ -320,11 +259,11 @@ export const SemanticColorsDarkSchema = {
320259
default: Colors.green[900]
321260
},
322261
warning: {
323-
default: Colors.yellow[60]
262+
default: Colors.yellow[900]
324263
},
325264
danger: {
326-
default: Colors.orange[40],
327-
emphasized: Colors.orange[30]
265+
default: Colors.orange[900],
266+
emphasized: Colors.orange[1000]
328267
}
329268
},
330269
background: {
@@ -358,15 +297,15 @@ export const SemanticColorsDarkSchema = {
358297
emphasized: Colors.blue.secondary[1000]
359298
},
360299
success: {
361-
default: Colors.green[97]
300+
default: Colors.green[50]
362301
},
363302
warning: {
364-
default: Colors.yellow[97]
303+
default: Colors.yellow[50]
365304
},
366305
danger: {
367-
faded: Colors.orange[30],
368-
default: Colors.orange[40],
369-
emphasized: Colors.orange[30]
306+
faded: Colors.orange[1000],
307+
default: Colors.orange[900],
308+
emphasized: Colors.orange[1000]
370309
}
371310
},
372311
surface: {
@@ -391,12 +330,12 @@ export const SemanticColorsDarkSchema = {
391330
},
392331
warning: {
393332
default: Colors.blue.primary[750],
394-
emphasized: Colors.yellow[60]
333+
emphasized: Colors.yellow[900]
395334
},
396335
danger: {
397-
faded: Colors.orange[80],
336+
faded: Colors.orange[350],
398337
default: Colors.blue.primary[750],
399-
emphasized: Colors.red[40]
338+
emphasized: Colors.red[1000]
400339
}
401340
},
402341
backdrop: Colors.blue.primary[50]
@@ -424,20 +363,20 @@ export const SemanticColorsDarkSchema = {
424363
default: Colors.green[900]
425364
},
426365
warning: {
427-
banner: Colors.yellow[90],
428-
default: Colors.yellow[60]
366+
banner: Colors.yellow[350],
367+
default: Colors.yellow[900]
429368
},
430369
danger: {
431-
banner: Colors.orange[80],
432-
faded: Colors.orange[40],
433-
default: Colors.orange[40]
370+
banner: Colors.orange[350],
371+
faded: Colors.orange[900],
372+
default: Colors.orange[900]
434373
}
435374
},
436375
logo: {
437-
free: 'hsl(350, 91%, 41%)',
376+
free: 'hsl(342, 100%, 45%)',
438377
now: Colors.white,
439378
subtitle: Colors.white,
440-
lyft: Colors.white
379+
lyft: 'hsl(316, 81%, 56%)'
441380
},
442381
shadow: {
443382
default: Colors.blue.primary[550]

0 commit comments

Comments
 (0)