Skip to content

Commit bdb496b

Browse files
pimenovolegLeonid KramarovRoman Turov
authored
feat(alert): settings for visual style (#DS-1971) (#4)
* feat(alert): settings for visual style (#DS-1971) * fix: horizontal paddings * fix(alert): change padding bottom of compact alert to fit mockups --------- Co-authored-by: Leonid Kramarov <[email protected]> Co-authored-by: Roman Turov <[email protected]>
1 parent bcf4290 commit bdb496b

File tree

1 file changed

+284
-50
lines changed

1 file changed

+284
-50
lines changed

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

+284-50
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,306 @@
11
{
22
alert: {
33
size: {
4-
container: {
5-
'min-height': { value: '48px'},
6-
'min-weight': { value: '320px'},
7-
'content-gap': {
8-
horizontal: { value: '{size.m}' },
9-
vertical: { value: '{size.xxs}' }
10-
},
11-
border: {
12-
radius: { value: '{size.m}'}
13-
},
14-
padding: {
15-
vertical: { value: '{size.l}' },
16-
horizontal: { value: '{size.xl}' }
17-
}
18-
},
19-
'close-button': {
20-
// отрицательный сдвиг относительно container
21-
margin: {
22-
top: { value: '-{size.s}' },
23-
right: { value: '-{size.m}' }
4+
normal: {
5+
container: {
6+
// удалил мин. высоту. вроде как без нее можно
7+
// 'min-height': { value: '48px'},
8+
// удалил. заменил на токены составных частей (иконка, тайтл). см. ниже
9+
// 'content-gap': {
10+
// horizontal: { value: '{size.m}' },
11+
// vertical: { value: '{size.xxs}' }
12+
// },
13+
border: {
14+
// завести токен для радиуса контейнеров (сейчас 12px алерты, модалки, контейнеры)
15+
radius: { value: '{size.m}'}
16+
},
17+
padding: {
18+
// vertical: { value: '{size.l}' },
19+
// horizontal: { value: '{size.xl}' },
20+
// переделываю структуру, см спеку
21+
top: { value: '0' },
22+
right: { value: '{size.s}' },
23+
bottom: { value: '0' },
24+
left: { value: '{size.s}' },
25+
}
26+
},
27+
// обертка для содержимого (заголовок, текст, кнопки)
28+
content: {
29+
padding: {
30+
top: { value: '{size.l}' },
31+
right: { value: '{size.s}' },
32+
bottom: { value: '{size.l}' },
33+
left: { value: '{size.m}' },
34+
}
35+
},
36+
icon: {
37+
margin: {
38+
top: { value: '{size.l}' },
39+
right: { value: '0' },
40+
bottom: { value: '{size.l}' },
41+
left: { value: '{size.m}' },
42+
// доп. отступ иконки от верхней границы контейнера алерта, когда в алерте есть заголовок
43+
addon: {
44+
title: { value: '{size.3xs}' }
45+
}
46+
}
47+
},
48+
title: {
49+
margin: {
50+
bottom: { value: '{size.xxs}'}
51+
}
52+
},
53+
'close-button': {
54+
// переделал токены. см спеку
55+
margin: {
56+
top: { value: '{size.xxs}' },
57+
left: { value: '{size.3xs}' }
58+
}
59+
},
60+
// не нравится название
61+
'button-stack': {
62+
padding: {
63+
top: { value: '{size.xs}' },
64+
bottom: { value: '{size.3xs}' },
65+
},
66+
// удалить этот гап, тк он зависит от вида кнопок/ссылок, которые дизайнер поставит туда
67+
// возможно, правильно было бы создать компоненты стек кнопок с заливкой, стек прозрачных кнопок, стек ссылок
68+
// а там уже и стандартизировать отступы
69+
// с появлением стеков пропадет разброд и шатание в отступах между кнопками в системе
70+
// примеры, где используются стеки кнопо: футер поповера, модалки, сайдпанели, панель действий над страницей, гридом, список действий-иконок в блоке кода
71+
// 'content-gap': {
72+
// horizontal: { value: '{size.xxs}'}
73+
// }
2474
}
2575
},
26-
'button-stack': {
27-
padding: {
28-
top: { value: '{size.s}' }
76+
compact: {
77+
container: {
78+
// удалил мин. высоту. вроде как без нее можно
79+
// 'min-height': { value: '48px'},
80+
// удалил. заменил на токены составных частей (иконка, тайтл). см. ниже
81+
// 'content-gap': {
82+
// horizontal: { value: '{size.m}' },
83+
// vertical: { value: '{size.xxs}' }
84+
// },
85+
border: {
86+
// завести токен для радиуса контейнеров (сейчас 12px алерты, модалки, контейнеры)
87+
radius: { value: '{size.m}'}
88+
},
89+
padding: {
90+
// vertical: { value: '{size.l}' },
91+
// horizontal: { value: '{size.xl}' },
92+
// переделываю структуру, см спеку
93+
top: { value: '0' },
94+
right: { value: '{size.s}' },
95+
bottom: { value: '0' },
96+
left: { value: '{size.l}' },
97+
}
98+
},
99+
// обертка для содержимого (заголовок, текст, кнопки)
100+
content: {
101+
padding: {
102+
top: { value: '{size.m}' },
103+
right: { value: '0' },
104+
bottom: { value: '{size.m}' },
105+
left: { value: '0' },
106+
}
29107
},
30-
'content-gap': {
31-
horizontal: { value: '{size.xxs}'}
108+
icon: {
109+
margin: {
110+
top: { value: '{size.m}' },
111+
right: { value: '{size.s}' },
112+
// доп. отступ иконки от верхней границы контейнера алерта, когда в алерте есть заголовок
113+
addon: {
114+
title: { value: '{size.3xs}' }
115+
}
116+
}
117+
},
118+
title: {
119+
margin: {
120+
bottom: { value: '{size.3xs}'}
121+
}
122+
},
123+
'close-button': {
124+
// переделал токены. см спеку
125+
margin: {
126+
top: { value: '{size.xxs}' },
127+
left: { value: '{size.3xs}' }
128+
}
129+
},
130+
'button-stack': {
131+
padding: {
132+
top: { value: '{size.xs}' },
133+
bottom: { value: '{size.3xs}' },
134+
},
135+
// удалить этот гап, тк он зависит от вида кнопок/ссылок, которые дизайнер поставит туда
136+
// возможно, правильно было бы создать компоненты стек кнопок с заливкой, стек прозрачных кнопок, стек ссылок
137+
// а там уже и стандартизировать отступы
138+
// с появлением стеков пропадет разброд и шатание в отступах между кнопками в системе
139+
// примеры, где используются стеки кнопо: футер поповера, модалки, сайдпанели, панель действий над страницей, гридом, список действий-иконок в блоке кода
140+
// 'content-gap': {
141+
// horizontal: { value: '{size.xxs}'}
142+
// }
32143
}
33144
}
34145
},
35146
font: {
36-
title: { value: 'subheading' },
37-
text: { value: 'text-normal' },
147+
title: { value: 'subheading' },
148+
'title-compact': { value: 'text-big-strong' },
149+
text: { value: 'text-normal' },
38150
},
39151
'light-color-scheme': {
40-
contrast: {
41-
container: {
42-
background: { value: '{light-color-scheme.background.contrast-fade}' },
43-
title: { value: '{light-color-scheme.foreground.contrast}' },
44-
text: { value: '{light-color-scheme.foreground.contrast}' }
152+
default: {
153+
contrast: {
154+
container: {
155+
background: { value: '{light-color-scheme.background.contrast-fade}' },
156+
title: { value: '{light-color-scheme.foreground.contrast}' },
157+
text: { value: '{light-color-scheme.foreground.contrast}' }
158+
}
159+
},
160+
error: {
161+
container: {
162+
background: { value: '{light-color-scheme.background.contrast-fade}' },
163+
title: { value: '{light-color-scheme.foreground.contrast}' },
164+
text: { value: '{light-color-scheme.foreground.contrast}' }
165+
}
166+
},
167+
warning: {
168+
container: {
169+
background: { value: '{light-color-scheme.background.contrast-fade}' },
170+
title: { value: '{light-color-scheme.foreground.contrast}' },
171+
text: { value: '{light-color-scheme.foreground.contrast}' }
172+
}
173+
},
174+
success: {
175+
container: {
176+
background: { value: '{light-color-scheme.background.contrast-fade}' },
177+
title: { value: '{light-color-scheme.foreground.contrast}' },
178+
text: { value: '{light-color-scheme.foreground.contrast}' }
179+
}
180+
},
181+
theme: {
182+
container: {
183+
background: { value: '{light-color-scheme.background.contrast-fade}' },
184+
title: { value: '{light-color-scheme.foreground.contrast}' },
185+
text: { value: '{light-color-scheme.foreground.contrast}' }
186+
}
45187
}
46188
},
47-
error: {
48-
container: {
49-
background: { value: '{light-color-scheme.background.contrast-fade}' },
50-
title: { value: '{light-color-scheme.foreground.contrast}' },
51-
text: { value: '{light-color-scheme.foreground.contrast}' }
189+
colored: {
190+
contrast: {
191+
container: {
192+
background: { value: '{light-color-scheme.background.contrast-fade}' },
193+
title: { value: '{light-color-scheme.foreground.contrast}' },
194+
text: { value: '{light-color-scheme.foreground.contrast}' }
195+
}
196+
},
197+
error: {
198+
container: {
199+
background: { value: '{light-color-scheme.background.error-fade}' },
200+
title: { value: '{light-color-scheme.foreground.contrast}' },
201+
text: { value: '{light-color-scheme.foreground.contrast}' }
202+
}
203+
},
204+
warning: {
205+
container: {
206+
background: { value: '{light-color-scheme.background.warning-fade}' },
207+
title: { value: '{light-color-scheme.foreground.contrast}' },
208+
text: { value: '{light-color-scheme.foreground.contrast}' }
209+
}
210+
},
211+
success: {
212+
container: {
213+
background: { value: '{light-color-scheme.background.success-fade}' },
214+
title: { value: '{light-color-scheme.foreground.contrast}' },
215+
text: { value: '{light-color-scheme.foreground.contrast}' }
216+
}
217+
},
218+
theme: {
219+
container: {
220+
background: { value: '{light-color-scheme.background.theme-fade}' },
221+
title: { value: '{light-color-scheme.foreground.contrast}' },
222+
text: { value: '{light-color-scheme.foreground.contrast}' }
223+
}
52224
}
53-
}
225+
},
226+
54227
},
55228
'dark-color-scheme': {
56-
contrast: {
57-
container: {
58-
background: { value: '{dark-color-scheme.background.contrast-fade}' },
59-
title: { value: '{dark-color-scheme.foreground.contrast}' },
60-
text: { value: '{dark-color-scheme.foreground.contrast}' }
229+
default: {
230+
contrast: {
231+
container: {
232+
background: { value: '{dark-color-scheme.background.contrast-fade}' },
233+
title: { value: '{dark-color-scheme.foreground.contrast}' },
234+
text: { value: '{dark-color-scheme.foreground.contrast}' }
235+
}
236+
},
237+
error: {
238+
container: {
239+
background: { value: '{dark-color-scheme.background.contrast-fade}' },
240+
title: { value: '{dark-color-scheme.foreground.contrast}' },
241+
text: { value: '{dark-color-scheme.foreground.contrast}' }
242+
}
243+
},
244+
warning: {
245+
container: {
246+
background: { value: '{dark-color-scheme.background.contrast-fade}' },
247+
title: { value: '{dark-color-scheme.foreground.contrast}' },
248+
text: { value: '{dark-color-scheme.foreground.contrast}' }
249+
}
250+
},
251+
success: {
252+
container: {
253+
background: { value: '{dark-color-scheme.background.contrast-fade}' },
254+
title: { value: '{dark-color-scheme.foreground.contrast}' },
255+
text: { value: '{dark-color-scheme.foreground.contrast}' }
256+
}
257+
},
258+
theme: {
259+
container: {
260+
background: { value: '{dark-color-scheme.background.contrast-fade}' },
261+
title: { value: '{dark-color-scheme.foreground.contrast}' },
262+
text: { value: '{dark-color-scheme.foreground.contrast}' }
263+
}
61264
}
62265
},
63-
error: {
64-
container: {
65-
background: { value: '{dark-color-scheme.background.contrast-fade}' },
66-
title: { value: '{dark-color-scheme.foreground.contrast}' },
67-
text: { value: '{dark-color-scheme.foreground.contrast}' }
266+
colored: {
267+
contrast: {
268+
container: {
269+
background: { value: '{dark-color-scheme.background.contrast-fade}' },
270+
title: { value: '{dark-color-scheme.foreground.contrast}' },
271+
text: { value: '{dark-color-scheme.foreground.contrast}' }
272+
}
273+
},
274+
error: {
275+
container: {
276+
background: { value: '{dark-color-scheme.background.error-fade}' },
277+
title: { value: '{dark-color-scheme.foreground.contrast}' },
278+
text: { value: '{dark-color-scheme.foreground.contrast}' }
279+
}
280+
},
281+
warning: {
282+
container: {
283+
background: { value: '{dark-color-scheme.background.warning-fade}' },
284+
title: { value: '{dark-color-scheme.foreground.contrast}' },
285+
text: { value: '{dark-color-scheme.foreground.contrast}' }
286+
}
287+
},
288+
success: {
289+
container: {
290+
background: { value: '{dark-color-scheme.background.success-fade}' },
291+
title: { value: '{dark-color-scheme.foreground.contrast}' },
292+
text: { value: '{dark-color-scheme.foreground.contrast}' }
293+
}
294+
},
295+
theme: {
296+
container: {
297+
background: { value: '{dark-color-scheme.background.theme-fade}' },
298+
title: { value: '{dark-color-scheme.foreground.contrast}' },
299+
text: { value: '{dark-color-scheme.foreground.contrast}' }
300+
}
68301
}
69-
}
70-
}
302+
},
303+
304+
},
71305
}
72306
}

0 commit comments

Comments
 (0)