Skip to content

Commit ba34acd

Browse files
pimenovoleglskramarov
pimenovoleg
authored and
lskramarov
committed
feat(toast): toast v2 tokens
1 parent 97efced commit ba34acd

File tree

1 file changed

+113
-24
lines changed

1 file changed

+113
-24
lines changed

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

+113-24
Original file line numberDiff line numberDiff line change
@@ -2,55 +2,103 @@
22
toast: {
33
size: {
44
container: {
5-
'min-height': { value: '48px'},
6-
'width': { value: '360px'},
7-
'content-gap': {
8-
horizontal: { value: '{size.m}' },
9-
vertical: { value: '{size.xxs}' }
10-
},
5+
width: { value: '360px'},
116
border: {
12-
radius: { value: '{size.m}'}
7+
radius: { value: '{size.s}'}
138
},
149
padding: {
15-
vertical: { value: '{size.l}' },
16-
horizontal: { value: '{size.xl}' }
10+
left: { value: '{size.m}' },
11+
right: { value: '{size.m}' },
12+
}
13+
},
14+
// центральная область, в которой расположены текст и кнопки
15+
content: {
16+
padding: {
17+
top: { value: '{size.l}' },
18+
buttom: { value: '{size.l}' },
1719
}
1820
},
21+
caption: {
22+
padding: {
23+
top: { value: '{size.xxs}' },
24+
}
25+
},
26+
icon: {
27+
//обертка вокруг иконик, например захотим поместить иконку в кружок
28+
// сейчас
29+
width: { value: '{size.l}' },
30+
height: { value: '{size.l}' },
31+
margin: {
32+
right: { value: '{size.s}' },
33+
},
34+
'border-radius': { value: '50%' }
35+
},
1936
'close-button': {
20-
// отрицательный сдвиг относительно container
2137
margin: {
22-
top: { value: '-{size.s}' },
23-
right: { value: '-{size.m}' }
38+
top: { value: '{size.m}' },
39+
right: { value: '{size.xxs}' }
2440
}
2541
},
2642
'button-stack': {
2743
padding: {
28-
top: { value: '{size.m}' }
44+
top: { value: '{size.s}' }
2945
},
3046
'content-gap': {
31-
horizontal: { value: '{size.xxs}'}
47+
horizontal: { value: '{size.m}'}
3248
}
3349
}
3450
},
3551
font: {
36-
title: { value: 'subheading' },
37-
text: { value: 'text-normal' }
52+
title: { value: 'text-normal' },
53+
text: { value: 'text-normal' }
3854
},
3955
'light-color-scheme': {
4056
contrast: {
4157
container: {
4258
background: { value: '{light-color-scheme.background.card}' },
4359
title: { value: '{light-color-scheme.foreground.contrast}' },
44-
text: { value: '{light-color-scheme.foreground.contrast}' },
45-
'box-shadow': { value: '0px 2px 8px 0px rgba(0, 0, 0, 0.16)'}
60+
text: { value: '{light-color-scheme.foreground.contrast-secondary}' },
61+
shadow: { value: '0px 2px 8px 0px rgba(0, 0, 0, 0.16)'}
62+
},
63+
icon: {
64+
background: { value: 'none' },
65+
color: { value: '{light-color-scheme.icon.contrast}' },
4666
}
4767
},
4868
error: {
4969
container: {
5070
background: { value: '{light-color-scheme.background.card}' },
5171
title: { value: '{light-color-scheme.foreground.contrast}' },
52-
text: { value: '{light-color-scheme.foreground.contrast}' },
53-
'box-shadow': { value: '0px 2px 8px 0px rgba(0, 0, 0, 0.16)'}
72+
text: { value: '{light-color-scheme.foreground.contrast-secondary}' },
73+
shadow: { value: '0px 2px 8px 0px rgba(0, 0, 0, 0.16)'}
74+
},
75+
icon: {
76+
background: { value: 'none' },
77+
color: { value: '{light-color-scheme.icon.error}' },
78+
}
79+
},
80+
warning: {
81+
container: {
82+
background: { value: '{light-color-scheme.background.card}' },
83+
title: { value: '{light-color-scheme.foreground.contrast}' },
84+
text: { value: '{light-color-scheme.foreground.contrast-secondary}' },
85+
shadow: { value: '0px 2px 8px 0px rgba(0, 0, 0, 0.16)'}
86+
},
87+
icon: {
88+
background: { value: 'none' },
89+
color: { value: '{light-color-scheme.icon.warning}' },
90+
}
91+
},
92+
success: {
93+
container: {
94+
background: { value: '{light-color-scheme.background.card}' },
95+
title: { value: '{light-color-scheme.foreground.contrast}' },
96+
text: { value: '{light-color-scheme.foreground.contrast-secondary}' },
97+
shadow: { value: '0px 2px 8px 0px rgba(0, 0, 0, 0.16)'}
98+
},
99+
icon: {
100+
background: { value: 'none' },
101+
color: { value: '{light-color-scheme.icon.success}' },
54102
}
55103
}
56104
},
@@ -59,18 +107,59 @@
59107
container: {
60108
background: { value: '{dark-color-scheme.background.card}' },
61109
title: { value: '{dark-color-scheme.foreground.contrast}' },
62-
text: { value: '{dark-color-scheme.foreground.contrast}' },
63-
'box-shadow': { value: '0px 2px 8px 0px rgba(0, 0, 0, 0.50)'}
110+
text: { value: '{dark-color-scheme.foreground.contrast-secondary}' },
111+
shadow: { value: '0px 2px 8px 0px rgba(0, 0, 0, 0.16)'}
112+
},
113+
icon: {
114+
background: { value: 'none' },
115+
color: { value: '{dark-color-scheme.icon.contrast}' },
64116
}
65117
},
66118
error: {
67119
container: {
68120
background: { value: '{dark-color-scheme.background.card}' },
69121
title: { value: '{dark-color-scheme.foreground.contrast}' },
70-
text: { value: '{dark-color-scheme.foreground.contrast}' },
71-
'box-shadow': { value: '0px 2px 8px 0px rgba(0, 0, 0, 0.50)'}
122+
text: { value: '{dark-color-scheme.foreground.contrast-secondary}' },
123+
shadow: { value: '0px 2px 8px 0px rgba(0, 0, 0, 0.16)'}
124+
},
125+
icon: {
126+
background: { value: 'none' },
127+
color: { value: '{dark-color-scheme.icon.error}' },
128+
}
129+
},
130+
warning: {
131+
container: {
132+
background: { value: '{dark-color-scheme.background.card}' },
133+
title: { value: '{dark-color-scheme.foreground.contrast}' },
134+
text: { value: '{dark-color-scheme.foreground.contrast-secondary}' },
135+
shadow: { value: '0px 2px 8px 0px rgba(0, 0, 0, 0.16)'}
136+
},
137+
icon: {
138+
background: { value: 'none' },
139+
color: { value: '{dark-color-scheme.icon.warning}' },
140+
}
141+
},
142+
success: {
143+
container: {
144+
background: { value: '{dark-color-scheme.background.card}' },
145+
title: { value: '{dark-color-scheme.foreground.contrast}' },
146+
text: { value: '{dark-color-scheme.foreground.contrast-secondary}' },
147+
shadow: { value: '0px 2px 8px 0px rgba(0, 0, 0, 0.16)'}
148+
},
149+
icon: {
150+
background: { value: 'none' },
151+
color: { value: '{dark-color-scheme.icon.success}' },
72152
}
73153
}
74154
}
155+
},
156+
'toast-stack': {
157+
size: {
158+
margin: {
159+
top: { value: '{size.m}}' },
160+
right: { value: '{size.m}}' }
161+
},
162+
gap: { value: '{size.s}}' }
163+
}
75164
}
76165
}

0 commit comments

Comments
 (0)