Skip to content
This repository was archived by the owner on Mar 25, 2025. It is now read-only.

Commit 352ea5b

Browse files
TiggeTigge
committed
feat: richer palette and default theme
Implements the material palette as a default palette and create a deep purple theme to serve as our default. Theme colors can be generated using any of the palette's base colors.
1 parent 7cb7618 commit 352ea5b

File tree

29 files changed

+1109
-653
lines changed

29 files changed

+1109
-653
lines changed

‎packages/core/src/Button/__snapshots__/index.test.tsx.snap‎

Lines changed: 74 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ exports[`Button primary 1`] = `
3232
padding: 0 16px;
3333
color: rgb(255,255,255);
3434
fill: rgb(255,255,255);
35-
background-color: rgb(82,82,82);
35+
background-color: rgb(103,58,183);
3636
box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16);
3737
}
3838
@@ -41,23 +41,23 @@ exports[`Button primary 1`] = `
4141
}
4242
4343
.c2:hover {
44-
background-color: rgb(61,61,61);
44+
background-color: rgb(69,39,160);
4545
box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16);
4646
}
4747
4848
.c2:focus {
49-
background-color: rgb(82,82,82);
49+
background-color: rgb(103,58,183);
5050
box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16);
51-
border: 2px solid rgb(61,61,61);
51+
border: 2px solid rgb(69,39,160);
5252
}
5353
5454
.c2:active {
55-
background-color: rgb(61,61,61);
56-
box-shadow: 0 0 0 4px rgba(82,82,82,0.24);
55+
background-color: rgb(69,39,160);
56+
box-shadow: 0 0 0 4px rgba(103,58,183,0.24);
5757
}
5858
5959
.c2:disabled {
60-
background-color: rgb(82,82,82);
60+
background-color: rgb(103,58,183);
6161
}
6262
6363
.c3 {
@@ -186,7 +186,7 @@ exports[`Button primary 2`] = `
186186
padding: 0 16px;
187187
color: rgb(255,255,255);
188188
fill: rgb(255,255,255);
189-
background-color: rgb(82,82,82);
189+
background-color: rgb(103,58,183);
190190
box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16);
191191
opacity: 0.48;
192192
cursor: default;
@@ -198,23 +198,23 @@ exports[`Button primary 2`] = `
198198
}
199199
200200
.c2:hover {
201-
background-color: rgb(61,61,61);
201+
background-color: rgb(69,39,160);
202202
box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16);
203203
}
204204
205205
.c2:focus {
206-
background-color: rgb(82,82,82);
206+
background-color: rgb(103,58,183);
207207
box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16);
208-
border: 2px solid rgb(61,61,61);
208+
border: 2px solid rgb(69,39,160);
209209
}
210210
211211
.c2:active {
212-
background-color: rgb(61,61,61);
213-
box-shadow: 0 0 0 4px rgba(82,82,82,0.24);
212+
background-color: rgb(69,39,160);
213+
box-shadow: 0 0 0 4px rgba(103,58,183,0.24);
214214
}
215215
216216
.c2:disabled {
217-
background-color: rgb(82,82,82);
217+
background-color: rgb(103,58,183);
218218
}
219219
220220
.c2:hover,
@@ -833,8 +833,8 @@ exports[`Button secondary 4`] = `
833833
-webkit-transition: all 200ms;
834834
transition: all 200ms;
835835
padding: 0 16px;
836-
color: rgb(82,82,82);
837-
fill: rgb(82,82,82);
836+
color: rgb(103,58,183);
837+
fill: rgb(103,58,183);
838838
background-color: transparent;
839839
opacity: 0.48;
840840
cursor: default;
@@ -846,24 +846,24 @@ exports[`Button secondary 4`] = `
846846
}
847847
848848
.c2:hover {
849-
color: rgb(61,61,61);
850-
background-color: rgba(82,82,82,0.16);
849+
color: rgb(69,39,160);
850+
background-color: rgba(103,58,183,0.16);
851851
}
852852
853853
.c2:focus {
854-
color: rgb(82,82,82);
855-
background-color: rgba(82,82,82,0.16);
854+
color: rgb(103,58,183);
855+
background-color: rgba(103,58,183,0.16);
856856
border: 2px solid transparent;
857857
}
858858
859859
.c2:active {
860-
color: rgb(61,61,61);
861-
background-color: rgba(82,82,82,0.24);
860+
color: rgb(69,39,160);
861+
background-color: rgba(103,58,183,0.24);
862862
}
863863
864864
.c2:disabled {
865-
color: rgb(82,82,82);
866-
fill: rgb(82,82,82);
865+
color: rgb(103,58,183);
866+
fill: rgb(103,58,183);
867867
background-color: transparent;
868868
}
869869
@@ -998,8 +998,8 @@ exports[`Button secondary 5`] = `
998998
-webkit-transition: all 200ms;
999999
transition: all 200ms;
10001000
padding: 0 16px;
1001-
color: rgb(82,82,82);
1002-
fill: rgb(82,82,82);
1001+
color: rgb(103,58,183);
1002+
fill: rgb(103,58,183);
10031003
background-color: transparent;
10041004
opacity: 0.48;
10051005
cursor: default;
@@ -1011,24 +1011,24 @@ exports[`Button secondary 5`] = `
10111011
}
10121012
10131013
.c2:hover {
1014-
color: rgb(61,61,61);
1015-
background-color: rgba(82,82,82,0.16);
1014+
color: rgb(69,39,160);
1015+
background-color: rgba(103,58,183,0.16);
10161016
}
10171017
10181018
.c2:focus {
1019-
color: rgb(82,82,82);
1020-
background-color: rgba(82,82,82,0.16);
1019+
color: rgb(103,58,183);
1020+
background-color: rgba(103,58,183,0.16);
10211021
border: 2px solid transparent;
10221022
}
10231023
10241024
.c2:active {
1025-
color: rgb(61,61,61);
1026-
background-color: rgba(82,82,82,0.24);
1025+
color: rgb(69,39,160);
1026+
background-color: rgba(103,58,183,0.24);
10271027
}
10281028
10291029
.c2:disabled {
1030-
color: rgb(82,82,82);
1031-
fill: rgb(82,82,82);
1030+
color: rgb(103,58,183);
1031+
fill: rgb(103,58,183);
10321032
background-color: transparent;
10331033
}
10341034
@@ -1178,7 +1178,7 @@ exports[`IconButton primary 1`] = `
11781178
padding: 0 16px;
11791179
color: rgb(255,255,255);
11801180
fill: rgb(255,255,255);
1181-
background-color: rgb(82,82,82);
1181+
background-color: rgb(103,58,183);
11821182
box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16);
11831183
}
11841184
@@ -1187,23 +1187,23 @@ exports[`IconButton primary 1`] = `
11871187
}
11881188
11891189
.c2:hover {
1190-
background-color: rgb(61,61,61);
1190+
background-color: rgb(69,39,160);
11911191
box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16);
11921192
}
11931193
11941194
.c2:focus {
1195-
background-color: rgb(82,82,82);
1195+
background-color: rgb(103,58,183);
11961196
box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16);
1197-
border: 2px solid rgb(61,61,61);
1197+
border: 2px solid rgb(69,39,160);
11981198
}
11991199
12001200
.c2:active {
1201-
background-color: rgb(61,61,61);
1202-
box-shadow: 0 0 0 4px rgba(82,82,82,0.24);
1201+
background-color: rgb(69,39,160);
1202+
box-shadow: 0 0 0 4px rgba(103,58,183,0.24);
12031203
}
12041204
12051205
.c2:disabled {
1206-
background-color: rgb(82,82,82);
1206+
background-color: rgb(103,58,183);
12071207
}
12081208
12091209
.c5 {
@@ -1341,7 +1341,7 @@ exports[`IconButton primary 2`] = `
13411341
padding: 0 16px;
13421342
color: rgb(255,255,255);
13431343
fill: rgb(255,255,255);
1344-
background-color: rgb(82,82,82);
1344+
background-color: rgb(103,58,183);
13451345
box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16);
13461346
opacity: 0.48;
13471347
cursor: default;
@@ -1353,23 +1353,23 @@ exports[`IconButton primary 2`] = `
13531353
}
13541354
13551355
.c2:hover {
1356-
background-color: rgb(61,61,61);
1356+
background-color: rgb(69,39,160);
13571357
box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16);
13581358
}
13591359
13601360
.c2:focus {
1361-
background-color: rgb(82,82,82);
1361+
background-color: rgb(103,58,183);
13621362
box-shadow: 0 2px 6px 0 rgba(0,0,0,0.16);
1363-
border: 2px solid rgb(61,61,61);
1363+
border: 2px solid rgb(69,39,160);
13641364
}
13651365
13661366
.c2:active {
1367-
background-color: rgb(61,61,61);
1368-
box-shadow: 0 0 0 4px rgba(82,82,82,0.24);
1367+
background-color: rgb(69,39,160);
1368+
box-shadow: 0 0 0 4px rgba(103,58,183,0.24);
13691369
}
13701370
13711371
.c2:disabled {
1372-
background-color: rgb(82,82,82);
1372+
background-color: rgb(103,58,183);
13731373
}
13741374
13751375
.c2:hover,
@@ -1966,8 +1966,8 @@ exports[`IconButton secondary 3`] = `
19661966
-webkit-transition: all 200ms;
19671967
transition: all 200ms;
19681968
padding: 0 16px;
1969-
color: rgb(82,82,82);
1970-
fill: rgb(82,82,82);
1969+
color: rgb(103,58,183);
1970+
fill: rgb(103,58,183);
19711971
background-color: transparent;
19721972
}
19731973
@@ -1976,24 +1976,24 @@ exports[`IconButton secondary 3`] = `
19761976
}
19771977
19781978
.c2:hover {
1979-
color: rgb(61,61,61);
1980-
background-color: rgba(82,82,82,0.16);
1979+
color: rgb(69,39,160);
1980+
background-color: rgba(103,58,183,0.16);
19811981
}
19821982
19831983
.c2:focus {
1984-
color: rgb(82,82,82);
1985-
background-color: rgba(82,82,82,0.16);
1984+
color: rgb(103,58,183);
1985+
background-color: rgba(103,58,183,0.16);
19861986
border: 2px solid transparent;
19871987
}
19881988
19891989
.c2:active {
1990-
color: rgb(61,61,61);
1991-
background-color: rgba(82,82,82,0.24);
1990+
color: rgb(69,39,160);
1991+
background-color: rgba(103,58,183,0.24);
19921992
}
19931993
19941994
.c2:disabled {
1995-
color: rgb(82,82,82);
1996-
fill: rgb(82,82,82);
1995+
color: rgb(103,58,183);
1996+
fill: rgb(103,58,183);
19971997
background-color: transparent;
19981998
}
19991999
@@ -2023,7 +2023,7 @@ exports[`IconButton secondary 3`] = `
20232023
}
20242024
20252025
.c3:hover .c6 {
2026-
background-color: rgba(82,82,82,0.16);
2026+
background-color: rgba(103,58,183,0.16);
20272027
-webkit-transform: scale(1);
20282028
-ms-transform: scale(1);
20292029
transform: scale(1);
@@ -2035,7 +2035,7 @@ exports[`IconButton secondary 3`] = `
20352035
}
20362036
20372037
.c3:focus .c6 {
2038-
background-color: rgba(82,82,82,0.16);
2038+
background-color: rgba(103,58,183,0.16);
20392039
-webkit-transform: scale(1);
20402040
-ms-transform: scale(1);
20412041
transform: scale(1);
@@ -2046,7 +2046,7 @@ exports[`IconButton secondary 3`] = `
20462046
}
20472047
20482048
.c3:active .c6 {
2049-
background-color: rgba(82,82,82,0.24);
2049+
background-color: rgba(103,58,183,0.24);
20502050
-webkit-transform: scale(1.06);
20512051
-ms-transform: scale(1.06);
20522052
transform: scale(1.06);
@@ -2187,8 +2187,8 @@ exports[`IconButton secondary 4`] = `
21872187
-webkit-transition: all 200ms;
21882188
transition: all 200ms;
21892189
padding: 0 16px;
2190-
color: rgb(82,82,82);
2191-
fill: rgb(82,82,82);
2190+
color: rgb(103,58,183);
2191+
fill: rgb(103,58,183);
21922192
background-color: transparent;
21932193
opacity: 0.48;
21942194
cursor: default;
@@ -2200,24 +2200,24 @@ exports[`IconButton secondary 4`] = `
22002200
}
22012201
22022202
.c2:hover {
2203-
color: rgb(61,61,61);
2204-
background-color: rgba(82,82,82,0.16);
2203+
color: rgb(69,39,160);
2204+
background-color: rgba(103,58,183,0.16);
22052205
}
22062206
22072207
.c2:focus {
2208-
color: rgb(82,82,82);
2209-
background-color: rgba(82,82,82,0.16);
2208+
color: rgb(103,58,183);
2209+
background-color: rgba(103,58,183,0.16);
22102210
border: 2px solid transparent;
22112211
}
22122212
22132213
.c2:active {
2214-
color: rgb(61,61,61);
2215-
background-color: rgba(82,82,82,0.24);
2214+
color: rgb(69,39,160);
2215+
background-color: rgba(103,58,183,0.24);
22162216
}
22172217
22182218
.c2:disabled {
2219-
color: rgb(82,82,82);
2220-
fill: rgb(82,82,82);
2219+
color: rgb(103,58,183);
2220+
fill: rgb(103,58,183);
22212221
background-color: transparent;
22222222
}
22232223
@@ -2254,7 +2254,7 @@ exports[`IconButton secondary 4`] = `
22542254
}
22552255
22562256
.c3:hover .c6 {
2257-
background-color: rgba(82,82,82,0.16);
2257+
background-color: rgba(103,58,183,0.16);
22582258
-webkit-transform: scale(1);
22592259
-ms-transform: scale(1);
22602260
transform: scale(1);
@@ -2266,7 +2266,7 @@ exports[`IconButton secondary 4`] = `
22662266
}
22672267
22682268
.c3:focus .c6 {
2269-
background-color: rgba(82,82,82,0.16);
2269+
background-color: rgba(103,58,183,0.16);
22702270
-webkit-transform: scale(1);
22712271
-ms-transform: scale(1);
22722272
transform: scale(1);
@@ -2277,7 +2277,7 @@ exports[`IconButton secondary 4`] = `
22772277
}
22782278
22792279
.c3:active .c6 {
2280-
background-color: rgba(82,82,82,0.24);
2280+
background-color: rgba(103,58,183,0.24);
22812281
-webkit-transform: scale(1.06);
22822282
-ms-transform: scale(1.06);
22832283
transform: scale(1.06);

0 commit comments

Comments
 (0)