Skip to content
This repository was archived by the owner on Nov 26, 2024. It is now read-only.

Commit f4092b2

Browse files
Akatori-Designgeorgewrmarshall
Akatori-Design
and
georgewrmarshall
authored
Updated Light Theme Shadows to match Storybook (#195)
* Updated Light Theme Shadows to match Storybook * reverted MD back to 0 2 16 0 * reverted MD back to 0 2 16 0 * renamed primary & danger * fixed danger shadown value to 0 2 8 0 * reverting back to lowercase * Updating descriptions * updating description * Updating tests Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
1 parent 39c7df5 commit f4092b2

File tree

7 files changed

+96
-90
lines changed

7 files changed

+96
-90
lines changed

‎src/figma/tokens.json‎

Lines changed: 64 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -941,67 +941,73 @@
941941
"value": {
942942
"color": "#0000001A",
943943
"type": "dropShadow",
944-
"x": 0,
945-
"y": 2,
946-
"blur": 4,
947-
"spread": 0
944+
"x": "0",
945+
"y": "2",
946+
"blur": "4",
947+
"spread": "0"
948948
},
949-
"type": "boxShadow"
949+
"type": "boxShadow",
950+
"description": "Uses: Cards"
950951
},
951952
"sm": {
952953
"value": {
953954
"color": "#0000001A",
954955
"type": "dropShadow",
955-
"x": 0,
956-
"y": 2,
957-
"blur": 8,
958-
"spread": 0
956+
"x": "0",
957+
"y": "2",
958+
"blur": "8",
959+
"spread": "0"
959960
},
960-
"type": "boxShadow"
961+
"type": "boxShadow",
962+
"description": "Uses: Dropdown, Menus"
961963
},
962964
"md": {
963965
"value": {
966+
"x": "0",
967+
"y": "2",
968+
"blur": "16",
969+
"spread": "0",
964970
"color": "#0000001A",
965-
"type": "dropShadow",
966-
"x": 0,
967-
"y": 2,
968-
"blur": 16,
969-
"spread": 0
971+
"type": "dropShadow"
970972
},
971-
"type": "boxShadow"
973+
"type": "boxShadow",
974+
"description": "Uses: Toast"
972975
},
973976
"lg": {
974977
"value": {
978+
"x": "0",
979+
"y": "2",
980+
"blur": "40",
981+
"spread": "0",
975982
"color": "#0000001A",
976-
"type": "dropShadow",
977-
"x": 0,
978-
"y": 8,
979-
"blur": 40,
980-
"spread": 0
983+
"type": "dropShadow"
981984
},
982-
"type": "boxShadow"
985+
"type": "boxShadow",
986+
"description": "Uses: Modals"
983987
},
984988
"primary": {
985989
"value": {
990+
"x": "0",
991+
"y": "2",
992+
"blur": "8",
993+
"spread": "0",
986994
"color": "#037DD633",
987-
"type": "dropShadow",
988-
"x": 0,
989-
"y": 7,
990-
"blur": 42,
991-
"spread": 0
995+
"type": "dropShadow"
992996
},
993-
"type": "boxShadow"
997+
"type": "boxShadow",
998+
"description": "Uses: ButtonPrimary hover state"
994999
},
9951000
"error": {
9961001
"value": {
1002+
"x": "0",
1003+
"y": "2",
1004+
"blur": "8",
1005+
"spread": "0",
9971006
"color": "#D73A4966",
998-
"type": "dropShadow",
999-
"x": 0,
1000-
"y": 7,
1001-
"blur": 42,
1002-
"spread": 0
1007+
"type": "dropShadow"
10031008
},
1004-
"type": "boxShadow"
1009+
"type": "boxShadow",
1010+
"description": "Uses: ButtonPrimary alert:danger hover state"
10051011
}
10061012
}
10071013
},
@@ -1250,65 +1256,65 @@
12501256
"value": {
12511257
"color": "#00000066",
12521258
"type": "dropShadow",
1253-
"x": 0,
1254-
"y": 2,
1255-
"blur": 4,
1256-
"spread": 0
1259+
"x": "0",
1260+
"y": "2",
1261+
"blur": "4",
1262+
"spread": "0"
12571263
},
12581264
"type": "boxShadow"
12591265
},
12601266
"sm": {
12611267
"value": {
12621268
"color": "#00000066",
12631269
"type": "dropShadow",
1264-
"x": 0,
1265-
"y": 2,
1266-
"blur": 8,
1267-
"spread": 0
1270+
"x": "0",
1271+
"y": "2",
1272+
"blur": "8",
1273+
"spread": "0"
12681274
},
12691275
"type": "boxShadow"
12701276
},
12711277
"md": {
12721278
"value": {
12731279
"color": "#00000066",
12741280
"type": "dropShadow",
1275-
"x": 0,
1276-
"y": 2,
1277-
"blur": 16,
1278-
"spread": 0
1281+
"x": "0",
1282+
"y": "2",
1283+
"blur": "16",
1284+
"spread": "0"
12791285
},
12801286
"type": "boxShadow"
12811287
},
12821288
"lg": {
12831289
"value": {
12841290
"color": "#00000066",
12851291
"type": "dropShadow",
1286-
"x": 0,
1287-
"y": 8,
1288-
"blur": 40,
1289-
"spread": 0
1292+
"x": "0",
1293+
"y": "2",
1294+
"blur": "40",
1295+
"spread": "0"
12901296
},
12911297
"type": "boxShadow"
12921298
},
12931299
"primary": {
12941300
"value": {
12951301
"color": "#1098FC66",
12961302
"type": "dropShadow",
1297-
"x": 0,
1298-
"y": 7,
1299-
"blur": 42,
1300-
"spread": 0
1303+
"x": "0",
1304+
"y": "7",
1305+
"blur": "42",
1306+
"spread": "0"
13011307
},
13021308
"type": "boxShadow"
13031309
},
13041310
"error": {
13051311
"value": {
13061312
"color": "#D73A4966",
13071313
"type": "dropShadow",
1308-
"x": 0,
1309-
"y": 7,
1310-
"blur": 42,
1311-
"spread": 0
1314+
"x": "0",
1315+
"y": "7",
1316+
"blur": "42",
1317+
"spread": "0"
13121318
},
13131319
"type": "boxShadow"
13141320
}

‎src/js/themes/darkTheme/darkTheme.test.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,11 @@ describe('dark Theme', () => {
2020
expect(darkTheme.shadows.size.xs).toStrictEqual({
2121
shadowColor: designTokens.dark.shadows.xs.value.color,
2222
shadowOffset: {
23-
width: designTokens.dark.shadows.xs.value.x,
24-
height: designTokens.dark.shadows.xs.value.y,
23+
width: Number(designTokens.dark.shadows.xs.value.x),
24+
height: Number(designTokens.dark.shadows.xs.value.y),
2525
},
2626
shadowOpacity: 1,
27-
shadowRadius: designTokens.dark.shadows.xs.value.blur,
27+
shadowRadius: Number(designTokens.dark.shadows.xs.value.blur),
2828
});
2929
});
3030
});

‎src/js/themes/darkTheme/shadows.test.ts‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,17 @@ describe('Shadows', () => {
1010
);
1111

1212
expect(shadows.size.xs.shadowOffset.width).toStrictEqual(
13-
designTokens.dark.shadows.xs.value.x,
13+
Number(designTokens.dark.shadows.xs.value.x),
1414
);
1515

1616
expect(shadows.size.xs.shadowOffset.height).toStrictEqual(
17-
designTokens.dark.shadows.xs.value.y,
17+
Number(designTokens.dark.shadows.xs.value.y),
1818
);
1919

2020
expect(shadows.size.xs.shadowOpacity).toStrictEqual(1);
2121

2222
expect(shadows.size.xs.shadowRadius).toStrictEqual(
23-
designTokens.dark.shadows.xs.value.blur,
23+
Number(designTokens.dark.shadows.xs.value.blur),
2424
);
2525
});
2626

@@ -30,17 +30,17 @@ describe('Shadows', () => {
3030
);
3131

3232
expect(shadows.size.sm.shadowOffset.width).toStrictEqual(
33-
designTokens.dark.shadows.sm.value.x,
33+
Number(designTokens.dark.shadows.sm.value.x),
3434
);
3535

3636
expect(shadows.size.sm.shadowOffset.height).toStrictEqual(
37-
designTokens.dark.shadows.sm.value.y,
37+
Number(designTokens.dark.shadows.sm.value.y),
3838
);
3939

4040
expect(shadows.size.sm.shadowOpacity).toStrictEqual(1);
4141

4242
expect(shadows.size.sm.shadowRadius).toStrictEqual(
43-
designTokens.dark.shadows.sm.value.blur,
43+
Number(designTokens.dark.shadows.sm.value.blur),
4444
);
4545
});
4646

@@ -50,17 +50,17 @@ describe('Shadows', () => {
5050
);
5151

5252
expect(shadows.size.md.shadowOffset.width).toStrictEqual(
53-
designTokens.dark.shadows.md.value.x,
53+
Number(designTokens.dark.shadows.md.value.x),
5454
);
5555

5656
expect(shadows.size.md.shadowOffset.height).toStrictEqual(
57-
designTokens.dark.shadows.md.value.y,
57+
Number(designTokens.dark.shadows.md.value.y),
5858
);
5959

6060
expect(shadows.size.md.shadowOpacity).toStrictEqual(1);
6161

6262
expect(shadows.size.md.shadowRadius).toStrictEqual(
63-
designTokens.dark.shadows.md.value.blur,
63+
Number(designTokens.dark.shadows.md.value.blur),
6464
);
6565
});
6666

@@ -70,17 +70,17 @@ describe('Shadows', () => {
7070
);
7171

7272
expect(shadows.size.lg.shadowOffset.width).toStrictEqual(
73-
designTokens.dark.shadows.lg.value.x,
73+
Number(designTokens.dark.shadows.lg.value.x),
7474
);
7575

7676
expect(shadows.size.lg.shadowOffset.height).toStrictEqual(
77-
designTokens.dark.shadows.lg.value.y,
77+
Number(designTokens.dark.shadows.lg.value.y),
7878
);
7979

8080
expect(shadows.size.lg.shadowOpacity).toStrictEqual(1);
8181

8282
expect(shadows.size.lg.shadowRadius).toStrictEqual(
83-
designTokens.dark.shadows.lg.value.blur,
83+
Number(designTokens.dark.shadows.lg.value.blur),
8484
);
8585
});
8686
});

‎src/js/themes/darkTheme/shadows.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export const shadows: ThemeShadows = {
3434
shadowColor: colors.shadow.default,
3535
shadowOffset: {
3636
width: 0,
37-
height: 8,
37+
height: 2,
3838
},
3939
shadowOpacity: 1,
4040
shadowRadius: 40,

‎src/js/themes/lightTheme/lightTheme.test.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,11 @@ describe('Light Theme', () => {
2020
expect(lightTheme.shadows.size.xs).toStrictEqual({
2121
shadowColor: designTokens.light.shadows.xs.value.color,
2222
shadowOffset: {
23-
width: designTokens.light.shadows.xs.value.x,
24-
height: designTokens.light.shadows.xs.value.y,
23+
width: Number(designTokens.light.shadows.xs.value.x),
24+
height: Number(designTokens.light.shadows.xs.value.y),
2525
},
2626
shadowOpacity: 1,
27-
shadowRadius: designTokens.light.shadows.xs.value.blur,
27+
shadowRadius: Number(designTokens.light.shadows.xs.value.blur),
2828
});
2929
});
3030
});

0 commit comments

Comments
 (0)