Skip to content

Commit 8c945e8

Browse files
vitalyozzavitalyozza
authored
feat(docs): added/updated shadows tokens (#61)
* feat(docs): added/updated shadows tokens * feat(docs): following updates to fix different names for shadows
1 parent 9b01268 commit 8c945e8

File tree

7 files changed

+137
-123
lines changed

7 files changed

+137
-123
lines changed

‎packages/design-tokens/web/components/accordion.json5

+6
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,9 @@
6969
color: { value: '{light.icon.contrast-fade}' }
7070
}
7171
},
72+
header: {
73+
'scroll-shadow': { value: '{shadow.light.overflow-normal-bottom}' }
74+
},
7275
states: {
7376
hover: {
7477
icon: {
@@ -102,6 +105,9 @@
102105
color: { value: '{dark.icon.contrast-fade}' }
103106
}
104107
},
108+
header: {
109+
'scroll-shadow': { value: '{shadow.dark.overflow-normal-bottom}' }
110+
},
105111
states: {
106112
hover: {
107113
icon: {

‎packages/design-tokens/web/components/code-block.json5

+4-4
Original file line numberDiff line numberDiff line change
@@ -298,7 +298,7 @@
298298
},
299299
header: {
300300
background: { value: '{light.background.bg-secondary}' },
301-
shadow: { value: '{shadow.light.overflow-compact-bottom}' }
301+
'scroll-shadow': { value: '{shadow.light.overflow-normal-bottom}' }
302302
},
303303
actionbar: {
304304
'fade-gradient': { value: 'linear-gradient(90deg, transparent, {light.background.bg-secondary})' },
@@ -327,7 +327,7 @@
327327
},
328328
header: {
329329
background: { value: '{light.background.card}' },
330-
shadow: { value: '{shadow.light.overflow-compact-bottom}' }
330+
'scroll-shadow': { value: '{shadow.light.overflow-compact-bottom}' }
331331
},
332332
actionbar: {
333333
'fade-gradient': { value: 'linear-gradient(90deg, transparent, {light.background.card})' },
@@ -567,7 +567,7 @@
567567
},
568568
header: {
569569
background: { value: '{dark.background.bg-secondary}' },
570-
shadow: { value: '{shadow.dark.overflow-compact-bottom}' }
570+
'scroll-shadow': { value: '{shadow.dark.overflow-normal-bottom}' }
571571
},
572572
actionbar: {
573573
'fade-gradient': { value: 'linear-gradient(90deg, transparent, {dark.background.bg-secondary})' },
@@ -596,7 +596,7 @@
596596
},
597597
header: {
598598
background: { value: '{dark.background.card}' },
599-
shadow: { value: '{shadow.dark.overflow-compact-bottom}' }
599+
'scroll-shadow': { value: '{shadow.dark.overflow-normal-bottom}' }
600600
},
601601
actionbar: {
602602
'fade-gradient': { value: 'linear-gradient(90deg, transparent, {dark.background.card})' },

‎packages/design-tokens/web/components/datepicker.json5

+38-38
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,20 @@
66
vertical: { value: '{size.m}' }
77
},
88
border: {
9-
radius: { value: '{size.s}'}
9+
radius: { value: '{size.s}' }
1010
}
1111
},
1212
header: {
1313
padding: {
14-
horizontal: { value: '{size.xxs}'}
14+
horizontal: { value: '{size.xxs}' }
1515
},
1616
margin: {
17-
bottom: { value: '{size.3xs}'}
17+
bottom: { value: '{size.3xs}' }
1818
}
1919
},
2020
grid: {
2121
padding: {
22-
horizontal: { value: '{size.m}'}
22+
horizontal: { value: '{size.m}' }
2323
},
2424
'content-gap': {
2525
vertical: { value: '{size.3xs}' }
@@ -30,60 +30,60 @@
3030
cell: {
3131
padding: {
3232
horizontal: { value: '{size.s}' },
33-
vertical: { value: '{size.s}'}
34-
},
35-
border: {
36-
radius: { value: '{size.s}'}
37-
}
33+
vertical: { value: '{size.s}' }
34+
},
35+
border: {
36+
radius: { value: '{size.s}' }
37+
}
3838
}
3939
}
4040
},
4141
font: {
4242
text: {
43-
"font-size": { value: '{typography.text-normal.font-size}' },
44-
"line-height": { value: '{typography.text-normal.line-height}' },
45-
"letter-spacing": { value: '{typography.text-normal.letter-spacing}' },
46-
"font-weight": { value: '{typography.text-normal.font-weight}' },
47-
"font-family": { value: '{typography.text-normal.font-family}' },
48-
"text-transform": { value: '{typography.text-normal.text-transform}' },
49-
"font-feature-settings": { value: '{typography.text-normal.font-feature-settings}' }
43+
'font-size': { value: '{typography.text-normal.font-size}' },
44+
'line-height': { value: '{typography.text-normal.line-height}' },
45+
'letter-spacing': { value: '{typography.text-normal.letter-spacing}' },
46+
'font-weight': { value: '{typography.text-normal.font-weight}' },
47+
'font-family': { value: '{typography.text-normal.font-family}' },
48+
'text-transform': { value: '{typography.text-normal.text-transform}' },
49+
'font-feature-settings': { value: '{typography.text-normal.font-feature-settings}' }
5050
}
5151
},
5252
light: {
5353
container: {
54-
background: {value: '{light.background.card}'},
55-
'box-shadow': { value: '{shadow.light.popup}' }
54+
background: { value: '{light.background.card}' },
55+
shadow: { value: '{shadow.light.popup}' }
5656
},
5757
header: {
58-
text: {value: '{light.foreground.contrast-tertiary}'},
59-
divider: {value: '{light.line.contrast-less}'}
58+
text: { value: '{light.foreground.contrast-tertiary}' },
59+
divider: { value: '{light.line.contrast-less}' }
6060
},
6161
grid: {
6262
cell: {
6363
default: {
64-
background: {value: 'transparent'},
64+
background: { value: 'transparent' },
6565
text: { value: '{light.foreground.contrast}' }
6666
},
6767
today: {
68-
background: {value: 'transparent'},
68+
background: { value: 'transparent' },
6969
text: { value: '{light.foreground.theme}' }
7070
},
7171
states: {
7272
hover: {
73-
background: {value: '{light.states.background.transparent-hover}'}
73+
background: { value: '{light.states.background.transparent-hover}' }
7474
},
7575
active: {
76-
background: {value: '{light.states.background.transparent-active}'}
76+
background: { value: '{light.states.background.transparent-active}' }
7777
},
7878
selected: {
79-
background: {value: '{light.background.contrast}'},
79+
background: { value: '{light.background.contrast}' },
8080
text: { value: '{light.foreground.white}' }
8181
},
8282
'selected-hover': {
83-
background: {value: '{light.states.background.contrast-active}'}
83+
background: { value: '{light.states.background.contrast-active}' }
8484
},
8585
disabled: {
86-
background: {value: 'transparent'},
86+
background: { value: 'transparent' },
8787
text: { value: '{light.states.foreground.disabled}' }
8888
}
8989
}
@@ -92,39 +92,39 @@
9292
},
9393
dark: {
9494
container: {
95-
background: {value: '{dark.background.card}'},
96-
'box-shadow': { value: '{shadow.dark.popup}' }
95+
background: { value: '{dark.background.card}' },
96+
shadow: { value: '{shadow.dark.popup}' }
9797
},
9898
header: {
99-
text: {value: '{dark.foreground.contrast-tertiary}'},
100-
divider: {value: '{dark.line.contrast-less}'}
99+
text: { value: '{dark.foreground.contrast-tertiary}' },
100+
divider: { value: '{dark.line.contrast-less}' }
101101
},
102102
grid: {
103103
cell: {
104104
default: {
105-
background: {value: 'transparent'},
105+
background: { value: 'transparent' },
106106
text: { value: '{dark.foreground.contrast}' }
107107
},
108108
today: {
109-
background: {value: 'transparent'},
109+
background: { value: 'transparent' },
110110
text: { value: '{dark.foreground.theme}' }
111111
},
112112
states: {
113113
hover: {
114-
background: {value: '{dark.states.background.transparent-hover}'}
114+
background: { value: '{dark.states.background.transparent-hover}' }
115115
},
116116
active: {
117-
background: {value: '{dark.states.background.transparent-active}'}
117+
background: { value: '{dark.states.background.transparent-active}' }
118118
},
119119
selected: {
120-
background: {value: '{dark.background.contrast}'},
120+
background: { value: '{dark.background.contrast}' },
121121
text: { value: '{dark.foreground.on-contrast}' }
122122
},
123123
'selected-hover': {
124-
background: {value: '{dark.states.background.contrast-active}'}
124+
background: { value: '{dark.states.background.contrast-active}' }
125125
},
126126
disabled: {
127-
background: {value: 'transparent'},
127+
background: { value: 'transparent' },
128128
text: { value: '{dark.states.foreground.disabled}' }
129129
}
130130
}

‎packages/design-tokens/web/components/dropdown.json5

+3-3
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
max: { value: '640px' }
88
},
99
padding: {
10-
vertical: { value: '{size.xxs}'}
10+
vertical: { value: '{size.xxs}' }
1111
},
1212
border: {
1313
radius: { value: '{size.s}' }
@@ -17,13 +17,13 @@
1717
light: {
1818
container: {
1919
background: { value: '{light.background.card}' },
20-
'box-shadow': { value: '{shadow.light.popup}'}
20+
shadow: { value: '{shadow.light.popup}' }
2121
}
2222
},
2323
dark: {
2424
container: {
2525
background: { value: '{dark.background.card}' },
26-
'box-shadow': { value: '{shadow.dark.popup}'}
26+
shadow: { value: '{shadow.dark.popup}' }
2727
}
2828
}
2929
}

‎packages/design-tokens/web/components/modal.json5

+23-23
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
{
2-
'modal': {
2+
modal: {
33
size: {
44
small: {
5-
width: { value: '400px'}
5+
width: { value: '400px' }
66
},
77
medium: {
8-
width: { value: '640px'}
8+
width: { value: '640px' }
99
},
1010
large: {
11-
width: { value: '960px'}
11+
width: { value: '960px' }
1212
},
1313
border: {
1414
radius: { value: '{size.s}' }
@@ -17,12 +17,12 @@
1717
padding: {
1818
vertical: { value: '{size.l}' },
1919
left: { value: '{size.xxl}' },
20-
right: { value: '{size.5xl}'}
20+
right: { value: '{size.5xl}' }
2121
}
2222
},
2323
'close-button': {
2424
margin: {
25-
left: { value: '{size.s}'}
25+
left: { value: '{size.s}' }
2626
}
2727
},
2828
content: {
@@ -43,26 +43,26 @@
4343
'content-gap': {
4444
horizontal: { value: '{size.l}' }
4545
}
46-
},
46+
}
4747
},
4848
font: {
4949
header: {
50-
"font-size": { value: '{typography.title.font-size}' },
51-
"line-height": { value: '{typography.title.line-height}' },
52-
"letter-spacing": { value: '{typography.title.letter-spacing}' },
53-
"font-weight": { value: '{typography.title.font-weight}' },
54-
"font-family": { value: '{typography.title.font-family}' },
55-
"text-transform": { value: '{typography.title.text-transform}' },
56-
"font-feature-settings": { value: '{typography.title.font-feature-settings}' }
50+
'font-size': { value: '{typography.title.font-size}' },
51+
'line-height': { value: '{typography.title.line-height}' },
52+
'letter-spacing': { value: '{typography.title.letter-spacing}' },
53+
'font-weight': { value: '{typography.title.font-weight}' },
54+
'font-family': { value: '{typography.title.font-family}' },
55+
'text-transform': { value: '{typography.title.text-transform}' },
56+
'font-feature-settings': { value: '{typography.title.font-feature-settings}' }
5757
},
5858
content: {
59-
"font-size": { value: '{typography.text-normal.font-size}' },
60-
"line-height": { value: '{typography.text-normal.line-height}' },
61-
"letter-spacing": { value: '{typography.text-normal.letter-spacing}' },
62-
"font-weight": { value: '{typography.text-normal.font-weight}' },
63-
"font-family": { value: '{typography.text-normal.font-family}' },
64-
"text-transform": { value: '{typography.text-normal.text-transform}' },
65-
"font-feature-settings": { value: '{typography.text-normal.font-feature-settings}' }
59+
'font-size': { value: '{typography.text-normal.font-size}' },
60+
'line-height': { value: '{typography.text-normal.line-height}' },
61+
'letter-spacing': { value: '{typography.text-normal.letter-spacing}' },
62+
'font-weight': { value: '{typography.text-normal.font-weight}' },
63+
'font-family': { value: '{typography.text-normal.font-family}' },
64+
'text-transform': { value: '{typography.text-normal.text-transform}' },
65+
'font-feature-settings': { value: '{typography.text-normal.font-feature-settings}' }
6666
}
6767
},
6868
light: {
@@ -71,7 +71,7 @@
7171
},
7272
container: {
7373
background: { value: '{light.background.card}' },
74-
'box-shadow': { value: '{shadow.light.overlay}' }
74+
shadow: { value: '{shadow.light.overlay}' }
7575
},
7676
'close-button': {
7777
color: { value: '{light.icon.contrast}' }
@@ -93,7 +93,7 @@
9393
},
9494
container: {
9595
background: { value: '{dark.background.card}' },
96-
'box-shadow': { value: '{shadow.dark.overlay}' }
96+
shadow: { value: '{shadow.dark.overlay}' }
9797
},
9898
'close-button': {
9999
color: { value: '{dark.icon.contrast}' }

0 commit comments

Comments
 (0)