@vonage/vivid 3.0.0-next.50 → 3.0.0-next.51

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/README.md +3 -1
  2. package/accordion/index.js +1 -1
  3. package/accordion-item/index.js +1 -1
  4. package/action-group/index.js +1 -1
  5. package/badge/index.js +1 -1
  6. package/banner/index.js +3 -3
  7. package/breadcrumb-item/index.js +1 -1
  8. package/button/index.js +1 -1
  9. package/calendar/index.js +1 -1
  10. package/calendar-event/index.js +1 -1
  11. package/card/index.js +1 -1
  12. package/checkbox/index.js +1 -1
  13. package/dialog/index.js +3 -3
  14. package/divider/index.js +1 -1
  15. package/fab/index.js +1 -1
  16. package/focus/index.js +1 -1
  17. package/header/index.js +1 -1
  18. package/icon/index.js +1 -1
  19. package/layout/index.js +1 -1
  20. package/lib/badge/badge.d.ts +1 -1
  21. package/lib/banner/banner.d.ts +1 -1
  22. package/lib/calendar-event/calendar-event.d.ts +1 -1
  23. package/lib/dialog/index.d.ts +1 -1
  24. package/lib/enums.d.ts +1 -1
  25. package/lib/icon/icon.d.ts +1 -1
  26. package/lib/note/note.d.ts +1 -1
  27. package/lib/text-field/text-field.d.ts +2 -9
  28. package/nav-disclosure/index.js +1 -1
  29. package/nav-item/index.js +1 -1
  30. package/note/index.js +2 -2
  31. package/package.json +1 -1
  32. package/progress/index.js +1 -1
  33. package/progress-ring/index.js +1 -1
  34. package/shared/enums.js +1 -1
  35. package/shared/index2.js +1 -1
  36. package/shared/index3.js +1 -1
  37. package/shared/patterns/form-elements.d.ts +22 -0
  38. package/side-drawer/index.js +1 -1
  39. package/styles/fonts/spezia.css +2 -2
  40. package/styles/themes/dark.css +182 -188
  41. package/styles/themes/light.css +182 -188
  42. package/styles/typography/desktop.css +77 -60
  43. package/text-field/index.js +67 -41
  44. package/tooltip/index.js +1 -1
package/styles/themes/light.css CHANGED
@@ -1,98 +1,99 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Thu, 01 Sep 2022 13:30:09 GMT
4
+ */
5
+ /**
6
+ * Do not edit directly
7
+ * Generated on Thu, 01 Sep 2022 13:30:09 GMT
8
+ */
1
9
  :root, .vvd-theme-main, ::part(vvd-theme-main) {
2
- --vvd-sizing-4px-scale-3xs: 8px;
3
- --vvd-sizing-4px-scale-2xs: 12px;
4
- --vvd-sizing-4px-scale-xs: 16px;
5
- --vvd-sizing-4px-scale-sm: 20px;
6
- --vvd-sizing-4px-scale-md: 24px;
7
- --vvd-sizing-4px-scale-lg: 28px;
8
- --vvd-sizing-4px-scale-xl: 32px;
9
- --vvd-sizing-4px-scale-2xl: 36px;
10
- --vvd-sizing-4px-scale-3xl: 40px;
11
- --vvd-sizing-8px-scale-3xs: 8px;
12
- --vvd-sizing-8px-scale-2xs: 16px;
13
- --vvd-sizing-8px-scale-xs: 24px;
14
- --vvd-sizing-8px-scale-sm: 32px;
15
- --vvd-sizing-8px-scale-md: 40px;
16
- --vvd-sizing-8px-scale-lg: 48px;
17
- --vvd-sizing-8px-scale-xl: 56px;
18
- --vvd-sizing-8px-scale-2xl: 64px;
19
- --vvd-sizing-8px-scale-3xl: 72px;
20
- --vvd-color-surface-0dp: rgba(255, 255, 255, 1);
21
- --vvd-color-surface-2dp: rgba(255, 255, 255, 1);
22
- --vvd-color-surface-4dp: rgba(255, 255, 255, 1);
23
- --vvd-color-surface-8dp: rgba(255, 255, 255, 1);
24
- --vvd-color-surface-12dp: rgba(255, 255, 255, 1);
25
- --vvd-color-surface-16dp: rgba(255, 255, 255, 1);
26
- --vvd-color-surface-24dp: rgba(255, 255, 255, 1);
27
- --vvd-color-canvas: rgb(255,255,255);
28
- --vvd-color-on-canvas: rgb(0,0,0);
29
- --vvd-color-primary: rgb(0,0,0);
30
- --vvd-color-on-primary: rgb(255,255,255);
31
- --vvd-color-neutral: rgb(117,117,117);
32
- --vvd-color-on-neutral: rgb(255,255,255);
33
- --vvd-color-neutral-10: rgb(242,242,242);
34
- --vvd-color-neutral-20: rgb(230,230,230);
35
- --vvd-color-neutral-30: rgb(204,204,204);
36
- --vvd-color-neutral-40: rgb(179,179,179);
37
- --vvd-color-neutral-50: rgb(146,146,146);
38
- --vvd-color-neutral-70: rgb(102,102,102);
39
- --vvd-color-neutral-80: rgb(77,77,77);
40
- --vvd-color-neutral-90: rgb(51,51,51);
41
- --vvd-color-cta: rgb(153,65,255);
42
- --vvd-color-on-cta: rgb(255,255,255);
43
- --vvd-color-cta-10: rgb(245,240,253);
44
- --vvd-color-cta-20: rgb(236,226,250);
45
- --vvd-color-cta-30: rgb(220,193,252);
46
- --vvd-color-cta-70: rgb(135,30,255);
47
- --vvd-color-cta-80: rgb(100,5,209);
48
- --vvd-color-cta-90: rgb(68,2,145);
49
- --vvd-color-success: rgb(28,135,49);
50
- --vvd-color-on-success: rgb(255,255,255);
51
- --vvd-color-success-10: rgb(225,248,229);
52
- --vvd-color-success-20: rgb(207,238,212);
53
- --vvd-color-success-30: rgb(134,224,144);
54
- --vvd-color-success-70: rgb(22,118,41);
55
- --vvd-color-success-80: rgb(21,89,35);
56
- --vvd-color-success-90: rgb(24,58,30);
57
- --vvd-color-alert: rgb(230,29,29);
58
- --vvd-color-on-alert: rgb(255,255,255);
59
- --vvd-color-alert-10: rgb(255,238,242);
60
- --vvd-color-alert-20: rgb(254,223,223);
61
- --vvd-color-alert-30: rgb(255,187,187);
62
- --vvd-color-alert-70: rgb(205,13,13);
63
- --vvd-color-alert-80: rgb(159,2,2);
64
- --vvd-color-alert-90: rgb(110,0,0);
65
- --vvd-color-warning: rgb(250,159,0);
66
- --vvd-color-on-warning: rgb(0,0,0);
67
- --vvd-color-warning-10: rgb(252,245,167);
68
- --vvd-color-warning-20: rgb(253,231,109);
69
- --vvd-color-warning-30: rgb(255,195,33);
70
- --vvd-color-warning-70: rgb(166,76,3);
71
- --vvd-color-warning-80: rgb(128,56,7);
72
- --vvd-color-warning-90: rgb(82,40,1);
73
- --vvd-color-info: rgb(2,118,213);
74
- --vvd-color-on-info: rgb(255,255,255);
75
- --vvd-color-info-10: rgb(232,244,251);
76
- --vvd-color-info-20: rgb(211,233,252);
77
- --vvd-color-info-30: rgb(157,210,254);
78
- --vvd-color-info-70: rgb(14,101,194);
79
- --vvd-color-info-80: rgb(9,74,158);
80
- --vvd-color-info-90: rgb(14,48,109);
81
- --vvd-color-announcement: rgb(214,33,156);
82
- --vvd-color-on-announcement: rgb(255,255,255);
83
- --vvd-color-announcement-10: rgb(255,237,251);
84
- --vvd-color-announcement-20: rgb(255,220,247);
85
- --vvd-color-announcement-30: rgb(248,185,231);
86
- --vvd-color-announcement-70: rgb(187,30,137);
87
- --vvd-color-announcement-80: rgb(143,22,105);
88
- --vvd-color-announcement-90: rgb(98,2,86);
89
- --vvd-shadow-surface-0dp: drop-shadow(1px 0 0 rgba(204, 204, 204, 1)) drop-shadow(0 1px 0 rgba(204, 204, 204, 1)) drop-shadow(0 -1px 0 rgba(204, 204, 204, 1)) drop-shadow(-1px 0 0 rgba(204, 204, 204, 1));
90
- --vvd-shadow-surface-2dp: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.05)) drop-shadow(0 2px 1px rgba(0, 0, 0, 0.05));
91
- --vvd-shadow-surface-4dp: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05)) drop-shadow(0 4px 2px rgba(0, 0, 0, 0.05));
92
- --vvd-shadow-surface-8dp: drop-shadow(0 2px 16px rgba(0, 0, 0, 0.1)) drop-shadow(0 8px 8px rgba(0, 0, 0, 0.05)) drop-shadow(0 4px 4px rgba(0, 0, 0, 0.05));
93
- --vvd-shadow-surface-12dp: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.1)) drop-shadow(0 12px 16px rgba(0, 0, 0, 0.05)) drop-shadow(0 6px 8px rgba(0, 0, 0, 0.05));
94
- --vvd-shadow-surface-16dp: drop-shadow(0 6px 32px rgba(0, 0, 0, 0.1)) drop-shadow(0 16px 24px rgba(0, 0, 0, 0.05)) drop-shadow(0 8px 12px rgba(0, 0, 0, 0.05));
95
- --vvd-shadow-surface-24dp: drop-shadow(0 12px 48px rgba(0, 0, 0, 0.2)) drop-shadow(0 24px 32px rgba(0, 0, 0, 0.05)) drop-shadow(0 12px 16px rgba(0, 0, 0, 0.05));
10
+ --vvd-color-canvas: #ffffff;
11
+ --vvd-color-canvas-text: #000000;
12
+ --vvd-color-neutral-50: #F2F2F2;
13
+ --vvd-color-neutral-100: #E6E6E6;
14
+ --vvd-color-neutral-200: #cccccc;
15
+ --vvd-color-neutral-300: #b3b3b3;
16
+ --vvd-color-neutral-400: #929292;
17
+ --vvd-color-neutral-500: #757575;
18
+ --vvd-color-neutral-600: #666666;
19
+ --vvd-color-neutral-700: #4d4d4d;
20
+ --vvd-color-neutral-800: #333333;
21
+ --vvd-color-neutral-900: #1a1a1a;
22
+ --vvd-color-neutral-950: #0d0d0d;
23
+ --vvd-color-cta-50: #f5f0fd;
24
+ --vvd-color-cta-100: #ece2fa;
25
+ --vvd-color-cta-200: #dcc1fc;
26
+ --vvd-color-cta-300: #cba1fa;
27
+ --vvd-color-cta-400: #b27bf2;
28
+ --vvd-color-cta-500: #9941ff;
29
+ --vvd-color-cta-600: #871eff;
30
+ --vvd-color-cta-700: #6405d1;
31
+ --vvd-color-cta-800: #440291;
32
+ --vvd-color-cta-900: #26044d;
33
+ --vvd-color-warning-50: #FDF5D4;
34
+ --vvd-color-warning-100: #FDEAA0;
35
+ --vvd-color-warning-200: #FACC4B;
36
+ --vvd-color-warning-300: #fa9f00;
37
+ --vvd-color-warning-400: #e07902;
38
+ --vvd-color-warning-500: #be5702;
39
+ --vvd-color-warning-600: #A64C03;
40
+ --vvd-color-warning-700: #893000;
41
+ --vvd-color-warning-800: #522801;
42
+ --vvd-color-warning-900: #2A1502;
43
+ --vvd-color-information-50: #e8f4fb;
44
+ --vvd-color-information-100: #d3e9fc;
45
+ --vvd-color-information-200: #9dd2fe;
46
+ --vvd-color-information-300: #65baff;
47
+ --vvd-color-information-400: #2997f0;
48
+ --vvd-color-information-500: #0276d5;
49
+ --vvd-color-information-600: #0e65c2;
50
+ --vvd-color-information-700: #094a9e;
51
+ --vvd-color-information-800: #0e306d;
52
+ --vvd-color-information-900: #071939;
53
+ --vvd-color-announcement-50: #ffedfb;
54
+ --vvd-color-announcement-100: #ffdcf7;
55
+ --vvd-color-announcement-200: #f8b9e7;
56
+ --vvd-color-announcement-300: #fb8fd8;
57
+ --vvd-color-announcement-400: #e560bb;
58
+ --vvd-color-announcement-500: #d6219c;
59
+ --vvd-color-announcement-600: #bb1e89;
60
+ --vvd-color-announcement-700: #8f1669;
61
+ --vvd-color-announcement-800: #620256;
62
+ --vvd-color-announcement-900: #32082c;
63
+ --vvd-color-alert-50: #ffeef2;
64
+ --vvd-color-alert-100: #fedfdf;
65
+ --vvd-color-alert-200: #ffbbbb;
66
+ --vvd-color-alert-300: #fe9696;
67
+ --vvd-color-alert-400: #f75959;
68
+ --vvd-color-alert-500: #e61d1d;
69
+ --vvd-color-alert-600: #cd0d0d;
70
+ --vvd-color-alert-700: #9f0202;
71
+ --vvd-color-alert-800: #6e0000;
72
+ --vvd-color-alert-900: #3e0004;
73
+ --vvd-color-success-50: #e1f8e5;
74
+ --vvd-color-success-100: #cfeed4;
75
+ --vvd-color-success-200: #86e090;
76
+ --vvd-color-success-300: #53ca6a;
77
+ --vvd-color-success-400: #30a849;
78
+ --vvd-color-success-500: #1c8731;
79
+ --vvd-color-success-600: #167629;
80
+ --vvd-color-success-700: #155923;
81
+ --vvd-color-success-800: #183a1e;
82
+ --vvd-color-success-900: #0a1e11;
83
+ --vvd-color-surface-0dp: #ffffff;
84
+ --vvd-color-surface-2dp: #ffffff;
85
+ --vvd-color-surface-4dp: #ffffff;
86
+ --vvd-color-surface-8dp: #ffffff;
87
+ --vvd-color-surface-12dp: #ffffff;
88
+ --vvd-color-surface-16dp: #ffffff;
89
+ --vvd-color-surface-24dp: #ffffff;
90
+ --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #cccccc) drop-shadow(0px 1px 0px #cccccc) drop-shadow(0px -1px 0px #cccccc) drop-shadow(-1px 0px 0px #cccccc);
91
+ --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #0000001a) drop-shadow(0px 1px 2px #0000000d) drop-shadow(0px 2px 1px #0000000d);
92
+ --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #0000001a) drop-shadow(0px 2px 4px #0000000d) drop-shadow(0px 4px 2px #0000000d);
93
+ --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #0000001a) drop-shadow(0px 8px 8px #0000000d) drop-shadow(0px 4px 4px #0000000d);
94
+ --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #0000001a) drop-shadow(0px 12px 16px #0000000d) drop-shadow(0px 6px 8px #0000000d);
95
+ --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #0000001a) drop-shadow(0px 16px 24px #0000000d) drop-shadow(0px 8px 12px #0000000d);
96
+ --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000033) drop-shadow(0px 24px 32px #0000000d) drop-shadow(0px 12px 16px #0000000d);
96
97
  }
97
98
  @supports (color-scheme: light) {
98
99
  :root, .vvd-theme-main, ::part(vvd-theme-main) {
@@ -101,100 +102,93 @@
101
102
  }
102
103
 
103
104
  .vvd-theme-alternate, ::part(vvd-theme-alternate) {
104
- --vvd-sizing-4px-scale-3xs: 8px;
105
- --vvd-sizing-4px-scale-2xs: 12px;
106
- --vvd-sizing-4px-scale-xs: 16px;
107
- --vvd-sizing-4px-scale-sm: 20px;
108
- --vvd-sizing-4px-scale-md: 24px;
109
- --vvd-sizing-4px-scale-lg: 28px;
110
- --vvd-sizing-4px-scale-xl: 32px;
111
- --vvd-sizing-4px-scale-2xl: 36px;
112
- --vvd-sizing-4px-scale-3xl: 40px;
113
- --vvd-sizing-8px-scale-3xs: 8px;
114
- --vvd-sizing-8px-scale-2xs: 16px;
115
- --vvd-sizing-8px-scale-xs: 24px;
116
- --vvd-sizing-8px-scale-sm: 32px;
117
- --vvd-sizing-8px-scale-md: 40px;
118
- --vvd-sizing-8px-scale-lg: 48px;
119
- --vvd-sizing-8px-scale-xl: 56px;
120
- --vvd-sizing-8px-scale-2xl: 64px;
121
- --vvd-sizing-8px-scale-3xl: 72px;
122
- --vvd-color-surface-0dp: rgba(13, 13, 13, 1);
123
- --vvd-color-surface-2dp: rgba(28, 28, 28, 1);
124
- --vvd-color-surface-4dp: rgba(32, 32, 32, 1);
125
- --vvd-color-surface-8dp: rgba(37, 37, 37, 1);
126
- --vvd-color-surface-12dp: rgba(42, 42, 42, 1);
127
- --vvd-color-surface-16dp: rgba(47, 47, 47, 1);
128
- --vvd-color-surface-24dp: rgba(52, 52, 52, 1);
129
- --vvd-color-canvas: rgb(13,13,13);
130
- --vvd-color-on-canvas: rgb(255,255,255);
131
- --vvd-color-primary: rgb(255,255,255);
132
- --vvd-color-on-primary: rgb(0,0,0);
133
- --vvd-color-neutral: rgb(146,146,146);
134
- --vvd-color-on-neutral: rgb(0,0,0);
135
- --vvd-color-neutral-10: rgb(26,26,26);
136
- --vvd-color-neutral-20: rgb(51,51,51);
137
- --vvd-color-neutral-30: rgb(77,77,77);
138
- --vvd-color-neutral-40: rgb(102,102,102);
139
- --vvd-color-neutral-50: rgb(117,117,117);
140
- --vvd-color-neutral-70: rgb(179,179,179);
141
- --vvd-color-neutral-80: rgb(204,204,204);
142
- --vvd-color-neutral-90: rgb(230,230,230);
143
- --vvd-color-cta: rgb(178,123,242);
144
- --vvd-color-on-cta: rgb(0,0,0);
145
- --vvd-color-cta-10: rgb(38,4,77);
146
- --vvd-color-cta-20: rgb(68,2,145);
147
- --vvd-color-cta-30: rgb(100,5,209);
148
- --vvd-color-cta-70: rgb(203,161,250);
149
- --vvd-color-cta-80: rgb(220,193,252);
150
- --vvd-color-cta-90: rgb(236,226,250);
151
- --vvd-color-success: rgb(48,168,73);
152
- --vvd-color-on-success: rgb(0,0,0);
153
- --vvd-color-success-10: rgb(10,30,17);
154
- --vvd-color-success-20: rgb(24,58,30);
155
- --vvd-color-success-30: rgb(21,89,35);
156
- --vvd-color-success-70: rgb(83,202,106);
157
- --vvd-color-success-80: rgb(134,224,144);
158
- --vvd-color-success-90: rgb(207,238,212);
159
- --vvd-color-alert: rgb(247,89,89);
160
- --vvd-color-on-alert: rgb(0,0,0);
161
- --vvd-color-alert-10: rgb(62,0,4);
162
- --vvd-color-alert-20: rgb(110,0,0);
163
- --vvd-color-alert-30: rgb(159,2,2);
164
- --vvd-color-alert-70: rgb(254,150,150);
165
- --vvd-color-alert-80: rgb(255,187,187);
166
- --vvd-color-alert-90: rgb(254,223,223);
167
- --vvd-color-warning: rgb(224,121,2);
168
- --vvd-color-on-warning: rgb(0,0,0);
169
- --vvd-color-warning-10: rgb(42,21,2);
170
- --vvd-color-warning-20: rgb(82,40,1);
171
- --vvd-color-warning-30: rgb(128,56,7);
172
- --vvd-color-warning-70: rgb(250,159,0);
173
- --vvd-color-warning-80: rgb(255,195,33);
174
- --vvd-color-warning-90: rgb(253,231,109);
175
- --vvd-color-info: rgb(41,151,240);
176
- --vvd-color-on-info: rgb(0,0,0);
177
- --vvd-color-info-10: rgb(7,25,57);
178
- --vvd-color-info-20: rgb(14,48,109);
179
- --vvd-color-info-30: rgb(9,74,158);
180
- --vvd-color-info-70: rgb(101,186,255);
181
- --vvd-color-info-80: rgb(157,210,254);
182
- --vvd-color-info-90: rgb(211,233,252);
183
- --vvd-color-announcement: rgb(229,96,187);
184
- --vvd-color-on-announcement: rgb(0,0,0);
185
- --vvd-color-announcement-10: rgb(50,8,44);
186
- --vvd-color-announcement-20: rgb(98,2,86);
187
- --vvd-color-announcement-30: rgb(143,22,105);
188
- --vvd-color-announcement-70: rgb(251,143,216);
189
- --vvd-color-announcement-80: rgb(248,185,231);
190
- --vvd-color-announcement-90: rgb(255,220,247);
191
- --vvd-shadow-surface-0dp: drop-shadow(1px 0 0 rgba(77, 77, 77, 1)) drop-shadow(0 1px 0 rgba(77, 77, 77, 1)) drop-shadow(0 -1px 0 rgba(77, 77, 77, 1)) drop-shadow(-1px 0 0 rgba(77, 77, 77, 1));
192
- --vvd-shadow-surface-2dp: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)) drop-shadow(0 2px 1px rgba(0, 0, 0, 0.25));
193
- --vvd-shadow-surface-4dp: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.25)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
194
- --vvd-shadow-surface-8dp: drop-shadow(0 2px 16px rgba(19, 20, 21, 0.25)) drop-shadow(0 8px 8px rgba(19, 20, 21, 0.25)) drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
195
- --vvd-shadow-surface-12dp: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.25)) drop-shadow(0 12px 16px rgba(0, 0, 0, 0.25)) drop-shadow(0 6px 8px rgba(0, 0, 0, 0.25));
196
- --vvd-shadow-surface-16dp: drop-shadow(0 6px 32px rgba(0, 0, 0, 0.25)) drop-shadow(0 16px 24px rgba(0, 0, 0, 0.25)) drop-shadow(0 8px 12px rgba(0, 0, 0, 0.25));
197
- --vvd-shadow-surface-24dp: drop-shadow(0 12px 48px rgba(0, 0, 0, 0.25)) drop-shadow(0 24px 32px rgba(0, 0, 0, 0.25)) drop-shadow(0 12px 16px rgba(0, 0, 0, 0.25));
105
+ --vvd-color-canvas: #000000;
106
+ --vvd-color-canvas-text: #ffffff;
107
+ --vvd-color-neutral-50: #1a1a1a;
108
+ --vvd-color-neutral-100: #333333;
109
+ --vvd-color-neutral-200: #4d4d4d;
110
+ --vvd-color-neutral-300: #666666;
111
+ --vvd-color-neutral-400: #757575;
112
+ --vvd-color-neutral-500: #929292;
113
+ --vvd-color-neutral-600: #b3b3b3;
114
+ --vvd-color-neutral-700: #cccccc;
115
+ --vvd-color-neutral-800: #E6E6E6;
116
+ --vvd-color-neutral-900: #F2F2F2;
117
+ --vvd-color-neutral-950: #ffffff;
118
+ --vvd-color-cta-50: #26044d;
119
+ --vvd-color-cta-100: #440291;
120
+ --vvd-color-cta-200: #6405d1;
121
+ --vvd-color-cta-300: #871eff;
122
+ --vvd-color-cta-400: #9941ff;
123
+ --vvd-color-cta-500: #b27bf2;
124
+ --vvd-color-cta-600: #cba1fa;
125
+ --vvd-color-cta-700: #dcc1fc;
126
+ --vvd-color-cta-800: #ece2fa;
127
+ --vvd-color-cta-900: #f5f0fd;
128
+ --vvd-color-warning-50: #2A1502;
129
+ --vvd-color-warning-100: #522801;
130
+ --vvd-color-warning-200: #803807;
131
+ --vvd-color-warning-300: #A64C03;
132
+ --vvd-color-warning-400: #be5702;
133
+ --vvd-color-warning-500: #e07902;
134
+ --vvd-color-warning-600: #fa9f00;
135
+ --vvd-color-warning-700: #FACC4B;
136
+ --vvd-color-warning-800: #FDEAA0;
137
+ --vvd-color-warning-900: #FDF5D4;
138
+ --vvd-color-information-50: #071939;
139
+ --vvd-color-information-100: #0e306d;
140
+ --vvd-color-information-200: #094a9e;
141
+ --vvd-color-information-300: #0e65c2;
142
+ --vvd-color-information-400: #0276d5;
143
+ --vvd-color-information-500: #2997f0;
144
+ --vvd-color-information-600: #65baff;
145
+ --vvd-color-information-700: #9dd2fe;
146
+ --vvd-color-information-800: #d3e9fc;
147
+ --vvd-color-information-900: #e8f4fb;
148
+ --vvd-color-announcement-50: #32082c;
149
+ --vvd-color-announcement-100: #620256;
150
+ --vvd-color-announcement-200: #8f1669;
151
+ --vvd-color-announcement-300: #bb1e89;
152
+ --vvd-color-announcement-400: #d6219c;
153
+ --vvd-color-announcement-500: #e560bb;
154
+ --vvd-color-announcement-600: #fb8fd8;
155
+ --vvd-color-announcement-700: #f8b9e7;
156
+ --vvd-color-announcement-800: #ffdcf7;
157
+ --vvd-color-announcement-900: #ffedfb;
158
+ --vvd-color-alert-50: #3e0004;
159
+ --vvd-color-alert-100: #6e0000;
160
+ --vvd-color-alert-200: #9f0202;
161
+ --vvd-color-alert-300: #cd0d0d;
162
+ --vvd-color-alert-400: #e61d1d;
163
+ --vvd-color-alert-500: #f75959;
164
+ --vvd-color-alert-600: #fe9696;
165
+ --vvd-color-alert-700: #ffbbbb;
166
+ --vvd-color-alert-800: #fedfdf;
167
+ --vvd-color-alert-900: #ffeef2;
168
+ --vvd-color-success-50: #0a1e11;
169
+ --vvd-color-success-100: #183a1e;
170
+ --vvd-color-success-200: #155923;
171
+ --vvd-color-success-300: #167629;
172
+ --vvd-color-success-400: #1c8731;
173
+ --vvd-color-success-500: #30a849;
174
+ --vvd-color-success-600: #53ca6a;
175
+ --vvd-color-success-700: #86e090;
176
+ --vvd-color-success-800: #cfeed4;
177
+ --vvd-color-success-900: #e1f8e5;
178
+ --vvd-color-surface-0dp: #0d0d0d;
179
+ --vvd-color-surface-2dp: linear-gradient(#ffffff0f, #ffffff0f), #0d0d0d;
180
+ --vvd-color-surface-4dp: linear-gradient(#ffffff14, #ffffff14), #0d0d0d;
181
+ --vvd-color-surface-8dp: linear-gradient(#ffffff1a, #ffffff1a), #0d0d0d;
182
+ --vvd-color-surface-12dp: linear-gradient(#ffffff1f, #ffffff1f), #0d0d0d;
183
+ --vvd-color-surface-16dp: linear-gradient(#ffffff24, #ffffff24), #0d0d0d;
184
+ --vvd-color-surface-24dp: linear-gradient(#ffffff29, #ffffff29), #0d0d0d;
185
+ --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #cccccc) drop-shadow(0px 1px 0px #cccccc) drop-shadow(0px -1px 0px #cccccc) drop-shadow(-1px 0px 0px #cccccc);
186
+ --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #00000040) drop-shadow(0px 1px 2px #00000040) drop-shadow(0px 2px 1px #00000040);
187
+ --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #00000040) drop-shadow(0px 2px 4px #00000040) drop-shadow(0px 4px 4px #00000040);
188
+ --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #00000040) drop-shadow(0px 8px 8px #00000040) drop-shadow(0px 4px 4px #00000040);
189
+ --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #00000040) drop-shadow(0px 12px 16px #00000040) drop-shadow(0px 6px 8px #00000040);
190
+ --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #00000040) drop-shadow(0px 16px 24px #00000040) drop-shadow(0px 8px 12px #00000040);
191
+ --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000040) drop-shadow(0px 24px 32px #00000040) drop-shadow(0px 12px 16px #00000040);
198
192
  }
199
193
  @supports (color-scheme: dark) {
200
194
  .vvd-theme-alternate, ::part(vvd-theme-alternate) {
package/styles/typography/desktop.css CHANGED
@@ -1,72 +1,89 @@
1
- /*
2
- Do not edit directly
3
- Generated on Wed, 27 Apr 2022 11:58:36 GMT
4
- */
5
- :root.vvd-typography h1, :root.vvd-typography .headline-1 {
6
- font: 500 condensed 66px / 88px SpeziaWebVariable;
7
- letter-spacing: 0px;
8
- text-decoration: none;
9
- text-transform: none;
10
- margin-block: 2.5rem;
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Thu, 01 Sep 2022 13:30:09 GMT
4
+ */
5
+ /**
6
+ * Do not edit directly
7
+ * Generated on Thu, 01 Sep 2022 13:30:09 GMT
8
+ */
9
+ :root {
10
+ --vvd-font-headline: 500 condensed 66px/88px SpeziaCompleteVariableUpright;
11
+ --vvd-font-subtitle: 500 condensed 52px/68px SpeziaCompleteVariableUpright;
12
+ --vvd-font-heading1: 500 condensed 40px/52px SpeziaCompleteVariableUpright;
13
+ --vvd-font-heading2: 500 condensed 32px/44px SpeziaCompleteVariableUpright;
14
+ --vvd-font-heading3: 500 condensed 26px/36px SpeziaCompleteVariableUpright;
15
+ --vvd-font-heading4: 500 condensed 20px/28px SpeziaCompleteVariableUpright;
16
+ --vvd-font-base: 400 ultra-condensed 14px/20px SpeziaCompleteVariableUpright;
17
+ --vvd-font-base-bold: 600 ultra-condensed 14px/20px SpeziaCompleteVariableUpright;
18
+ --vvd-font-base-code: 400 ultra-condensed 14px/20px SpeziaMonoCompleteVariable;
19
+ --vvd-font-base-extended: 400 ultra-condensed 16px/24px SpeziaCompleteVariableUpright;
20
+ --vvd-font-base-extended-bold: 600 ultra-condensed 16px/24px SpeziaCompleteVariableUpright;
21
+ --vvd-font-base-extended-code: 400 ultra-condensed 16px/24px SpeziaMonoCompleteVariable;
22
+ --vvd-font-base-condensed: 400 ultra-condensed 12px/16px SpeziaCompleteVariableUpright;
23
+ --vvd-font-base-condensed-bold: 600 ultra-condensed 12px/16px SpeziaCompleteVariableUpright;
24
+ --vvd-font-base-condensed-code: 400 ultra-condensed 12px/16px SpeziaMonoCompleteVariable;
25
+ font-size: 62.5%;
11
26
  }
12
- :root.vvd-typography h2, :root.vvd-typography .headline-2 {
13
- font: 500 condensed 52px / 68px SpeziaWebVariable;
14
- letter-spacing: 0px;
15
- text-decoration: none;
16
- text-transform: none;
17
- margin-block: 2.5rem;
27
+
28
+ body {
29
+ font-feature-settings: "kern"; /* turns on kerning */
30
+ text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */
31
+ -webkit-font-smoothing: antialiased; /* apply font anti-aliasing for Webkit on OSX */
32
+ -moz-osx-font-smoothing: grayscale; /* apply font anti-aliasing for Firefox on OSX */
33
+ font: var(--vvd-font-base-extended);
34
+ }
35
+
36
+ strong {
37
+ font: var(--vvd-font-base-bold);
38
+ }
39
+
40
+ code {
41
+ font: var(--vvd-font-base-code);
42
+ }
43
+
44
+ .headline {
45
+ font: var(--vvd-font-headline);
46
+ margin-block: 40px;
47
+ }
48
+
49
+ .subtitle {
50
+ font: var(--vvd-font-subtitle);
51
+ margin-block: 40px;
18
52
  }
19
- :root.vvd-typography h3, :root.vvd-typography .subtitle-1 {
20
- font: 500 condensed 26px / 36px SpeziaWebVariable;
21
- letter-spacing: 0px;
22
- text-decoration: none;
23
- text-transform: none;
24
- margin-block: 1.5rem;
53
+
54
+ h1, .heading1 {
55
+ font: var(--vvd-font-heading1);
56
+ margin-block: 32px;
25
57
  }
26
- :root.vvd-typography h4, :root.vvd-typography .subtitle-2 {
27
- font: 500 condensed 20px / 28px SpeziaWebVariable;
28
- letter-spacing: 0px;
29
- text-decoration: none;
30
- text-transform: none;
31
- margin-block: 1.5rem;
58
+
59
+ h2, .heading2 {
60
+ font: var(--vvd-font-heading2);
61
+ margin-block: 32px;
32
62
  }
33
- :root.vvd-typography h5, :root.vvd-typography .title-1 {
34
- font: 500 condensed 40px / 52px SpeziaWebVariable;
35
- letter-spacing: 0px;
36
- text-decoration: none;
37
- text-transform: none;
38
- margin-block: 2rem;
63
+
64
+ h2, .heading3 {
65
+ font: var(--vvd-font-heading3);
66
+ margin-block: 24px;
39
67
  }
40
- :root.vvd-typography h6, :root.vvd-typography .title-2 {
41
- font: 500 condensed 32px / 44px SpeziaWebVariable;
42
- letter-spacing: 0px;
43
- text-decoration: none;
44
- text-transform: none;
45
- margin-block: 2rem;
68
+
69
+ h4, .heading4 {
70
+ font: var(--vvd-font-heading4);
71
+ margin-block: 24px;
46
72
  }
47
- :root.vvd-typography code {
48
- font: 400 ultra-condensed 16px / 24px SpeziaMonoWebVariable;
49
- letter-spacing: 0px;
50
- text-decoration: none;
51
- text-transform: none;
73
+
74
+ code {
75
+ font: var(--vvd-font-base-code);
52
76
  }
53
- :root.vvd-typography body, :root.vvd-typography p {
54
- font: 400 ultra-condensed 16px / 24px SpeziaWebVariable;
55
- letter-spacing: 0px;
56
- text-decoration: none;
57
- text-transform: none;
77
+
78
+ p {
79
+ margin-block: 16px;
58
80
  }
59
- :root.vvd-typography strong {
60
- font: 600 ultra-condensed 16px / 24px SpeziaWebVariable;
61
- letter-spacing: 0px;
62
- text-decoration: none;
63
- text-transform: none;
81
+
82
+ small, figcaption {
83
+ font: var(--vvd-font-base-condensed);
64
84
  }
65
- :root.vvd-typography code {
66
- font: 400 ultra-condensed 16px / 24px SpeziaMonoWebVariable;
67
- letter-spacing: 0px;
68
- text-decoration: none;
69
- text-transform: none;
85
+ small strong, figcaption strong {
86
+ font: var(--vvd-font-base-condensed-bold);
70
87
  }
71
88
 
72
89
  /*# sourceMappingURL=desktop.css.map */