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

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 (54) hide show
  1. package/README.md +6 -1
  2. package/accordion/index.js +1 -3
  3. package/accordion-item/index.js +1 -3
  4. package/action-group/index.js +1 -3
  5. package/avatar/index.js +51 -0
  6. package/badge/index.js +1 -3
  7. package/banner/index.js +3 -5
  8. package/breadcrumb/index.js +0 -2
  9. package/breadcrumb-item/index.js +1 -3
  10. package/button/index.js +1 -3
  11. package/calendar/index.js +1 -3
  12. package/calendar-event/index.js +1 -3
  13. package/card/index.js +1 -3
  14. package/checkbox/index.js +1 -3
  15. package/dialog/index.js +3 -6
  16. package/divider/index.js +1 -3
  17. package/elevation/index.js +0 -1
  18. package/fab/index.js +1 -3
  19. package/focus/index.js +1 -3
  20. package/header/index.js +1 -3
  21. package/icon/index.js +1 -3
  22. package/index.js +0 -1
  23. package/layout/index.js +1 -3
  24. package/lib/avatar/avatar.d.ts +14 -0
  25. package/lib/avatar/avatar.template.d.ts +4 -0
  26. package/lib/avatar/index.d.ts +3 -0
  27. package/lib/badge/badge.d.ts +1 -1
  28. package/lib/banner/banner.d.ts +1 -1
  29. package/lib/calendar-event/calendar-event.d.ts +1 -1
  30. package/lib/dialog/index.d.ts +1 -1
  31. package/lib/enums.d.ts +1 -1
  32. package/lib/icon/icon.d.ts +1 -1
  33. package/lib/note/note.d.ts +1 -1
  34. package/lib/text-field/text-field.d.ts +2 -9
  35. package/menu/index.js +0 -2
  36. package/nav-disclosure/index.js +1 -3
  37. package/nav-item/index.js +1 -3
  38. package/note/index.js +2 -4
  39. package/package.json +3 -2
  40. package/popup/index.js +0 -1
  41. package/progress/index.js +1 -3
  42. package/progress-ring/index.js +1 -3
  43. package/shared/enums.js +1 -1
  44. package/shared/index2.js +1 -3
  45. package/shared/index3.js +1 -3
  46. package/shared/patterns/form-elements.d.ts +22 -0
  47. package/side-drawer/index.js +1 -3
  48. package/styles/fonts/spezia.css +2 -2
  49. package/styles/themes/dark.css +182 -188
  50. package/styles/themes/light.css +182 -188
  51. package/styles/typography/desktop.css +77 -60
  52. package/text-field/index.js +67 -43
  53. package/tooltip/index.js +1 -3
  54. package/shared/style-inject.es.js +0 -28
package/styles/themes/dark.css CHANGED
@@ -1,98 +1,99 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Wed, 07 Sep 2022 15:12:22 GMT
4
+ */
5
+ /**
6
+ * Do not edit directly
7
+ * Generated on Wed, 07 Sep 2022 15:12:22 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(13, 13, 13, 1);
21
- --vvd-color-surface-2dp: rgba(28, 28, 28, 1);
22
- --vvd-color-surface-4dp: rgba(32, 32, 32, 1);
23
- --vvd-color-surface-8dp: rgba(37, 37, 37, 1);
24
- --vvd-color-surface-12dp: rgba(42, 42, 42, 1);
25
- --vvd-color-surface-16dp: rgba(47, 47, 47, 1);
26
- --vvd-color-surface-24dp: rgba(52, 52, 52, 1);
27
- --vvd-color-canvas: rgb(13,13,13);
28
- --vvd-color-on-canvas: rgb(255,255,255);
29
- --vvd-color-primary: rgb(255,255,255);
30
- --vvd-color-on-primary: rgb(0,0,0);
31
- --vvd-color-neutral: rgb(146,146,146);
32
- --vvd-color-on-neutral: rgb(0,0,0);
33
- --vvd-color-neutral-10: rgb(26,26,26);
34
- --vvd-color-neutral-20: rgb(51,51,51);
35
- --vvd-color-neutral-30: rgb(77,77,77);
36
- --vvd-color-neutral-40: rgb(102,102,102);
37
- --vvd-color-neutral-50: rgb(117,117,117);
38
- --vvd-color-neutral-70: rgb(179,179,179);
39
- --vvd-color-neutral-80: rgb(204,204,204);
40
- --vvd-color-neutral-90: rgb(230,230,230);
41
- --vvd-color-cta: rgb(178,123,242);
42
- --vvd-color-on-cta: rgb(0,0,0);
43
- --vvd-color-cta-10: rgb(38,4,77);
44
- --vvd-color-cta-20: rgb(68,2,145);
45
- --vvd-color-cta-30: rgb(100,5,209);
46
- --vvd-color-cta-70: rgb(203,161,250);
47
- --vvd-color-cta-80: rgb(220,193,252);
48
- --vvd-color-cta-90: rgb(236,226,250);
49
- --vvd-color-success: rgb(48,168,73);
50
- --vvd-color-on-success: rgb(0,0,0);
51
- --vvd-color-success-10: rgb(10,30,17);
52
- --vvd-color-success-20: rgb(24,58,30);
53
- --vvd-color-success-30: rgb(21,89,35);
54
- --vvd-color-success-70: rgb(83,202,106);
55
- --vvd-color-success-80: rgb(134,224,144);
56
- --vvd-color-success-90: rgb(207,238,212);
57
- --vvd-color-alert: rgb(247,89,89);
58
- --vvd-color-on-alert: rgb(0,0,0);
59
- --vvd-color-alert-10: rgb(62,0,4);
60
- --vvd-color-alert-20: rgb(110,0,0);
61
- --vvd-color-alert-30: rgb(159,2,2);
62
- --vvd-color-alert-70: rgb(254,150,150);
63
- --vvd-color-alert-80: rgb(255,187,187);
64
- --vvd-color-alert-90: rgb(254,223,223);
65
- --vvd-color-warning: rgb(224,121,2);
66
- --vvd-color-on-warning: rgb(0,0,0);
67
- --vvd-color-warning-10: rgb(42,21,2);
68
- --vvd-color-warning-20: rgb(82,40,1);
69
- --vvd-color-warning-30: rgb(128,56,7);
70
- --vvd-color-warning-70: rgb(250,159,0);
71
- --vvd-color-warning-80: rgb(255,195,33);
72
- --vvd-color-warning-90: rgb(253,231,109);
73
- --vvd-color-info: rgb(41,151,240);
74
- --vvd-color-on-info: rgb(0,0,0);
75
- --vvd-color-info-10: rgb(7,25,57);
76
- --vvd-color-info-20: rgb(14,48,109);
77
- --vvd-color-info-30: rgb(9,74,158);
78
- --vvd-color-info-70: rgb(101,186,255);
79
- --vvd-color-info-80: rgb(157,210,254);
80
- --vvd-color-info-90: rgb(211,233,252);
81
- --vvd-color-announcement: rgb(229,96,187);
82
- --vvd-color-on-announcement: rgb(0,0,0);
83
- --vvd-color-announcement-10: rgb(50,8,44);
84
- --vvd-color-announcement-20: rgb(98,2,86);
85
- --vvd-color-announcement-30: rgb(143,22,105);
86
- --vvd-color-announcement-70: rgb(251,143,216);
87
- --vvd-color-announcement-80: rgb(248,185,231);
88
- --vvd-color-announcement-90: rgb(255,220,247);
89
- --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));
90
- --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));
91
- --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));
92
- --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));
93
- --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));
94
- --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));
95
- --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));
10
+ --vvd-color-canvas: #000000;
11
+ --vvd-color-canvas-text: #ffffff;
12
+ --vvd-color-neutral-50: #1a1a1a;
13
+ --vvd-color-neutral-100: #333333;
14
+ --vvd-color-neutral-200: #4d4d4d;
15
+ --vvd-color-neutral-300: #666666;
16
+ --vvd-color-neutral-400: #757575;
17
+ --vvd-color-neutral-500: #929292;
18
+ --vvd-color-neutral-600: #b3b3b3;
19
+ --vvd-color-neutral-700: #cccccc;
20
+ --vvd-color-neutral-800: #E6E6E6;
21
+ --vvd-color-neutral-900: #F2F2F2;
22
+ --vvd-color-neutral-950: #ffffff;
23
+ --vvd-color-cta-50: #26044d;
24
+ --vvd-color-cta-100: #440291;
25
+ --vvd-color-cta-200: #6405d1;
26
+ --vvd-color-cta-300: #871eff;
27
+ --vvd-color-cta-400: #9941ff;
28
+ --vvd-color-cta-500: #b27bf2;
29
+ --vvd-color-cta-600: #cba1fa;
30
+ --vvd-color-cta-700: #dcc1fc;
31
+ --vvd-color-cta-800: #ece2fa;
32
+ --vvd-color-cta-900: #f5f0fd;
33
+ --vvd-color-warning-50: #2A1502;
34
+ --vvd-color-warning-100: #522801;
35
+ --vvd-color-warning-200: #803807;
36
+ --vvd-color-warning-300: #A64C03;
37
+ --vvd-color-warning-400: #be5702;
38
+ --vvd-color-warning-500: #e07902;
39
+ --vvd-color-warning-600: #fa9f00;
40
+ --vvd-color-warning-700: #FACC4B;
41
+ --vvd-color-warning-800: #FDEAA0;
42
+ --vvd-color-warning-900: #FDF5D4;
43
+ --vvd-color-information-50: #071939;
44
+ --vvd-color-information-100: #0e306d;
45
+ --vvd-color-information-200: #094a9e;
46
+ --vvd-color-information-300: #0e65c2;
47
+ --vvd-color-information-400: #0276d5;
48
+ --vvd-color-information-500: #2997f0;
49
+ --vvd-color-information-600: #65baff;
50
+ --vvd-color-information-700: #9dd2fe;
51
+ --vvd-color-information-800: #d3e9fc;
52
+ --vvd-color-information-900: #e8f4fb;
53
+ --vvd-color-announcement-50: #32082c;
54
+ --vvd-color-announcement-100: #620256;
55
+ --vvd-color-announcement-200: #8f1669;
56
+ --vvd-color-announcement-300: #bb1e89;
57
+ --vvd-color-announcement-400: #d6219c;
58
+ --vvd-color-announcement-500: #e560bb;
59
+ --vvd-color-announcement-600: #fb8fd8;
60
+ --vvd-color-announcement-700: #f8b9e7;
61
+ --vvd-color-announcement-800: #ffdcf7;
62
+ --vvd-color-announcement-900: #ffedfb;
63
+ --vvd-color-alert-50: #3e0004;
64
+ --vvd-color-alert-100: #6e0000;
65
+ --vvd-color-alert-200: #9f0202;
66
+ --vvd-color-alert-300: #cd0d0d;
67
+ --vvd-color-alert-400: #e61d1d;
68
+ --vvd-color-alert-500: #f75959;
69
+ --vvd-color-alert-600: #fe9696;
70
+ --vvd-color-alert-700: #ffbbbb;
71
+ --vvd-color-alert-800: #fedfdf;
72
+ --vvd-color-alert-900: #ffeef2;
73
+ --vvd-color-success-50: #0a1e11;
74
+ --vvd-color-success-100: #183a1e;
75
+ --vvd-color-success-200: #155923;
76
+ --vvd-color-success-300: #167629;
77
+ --vvd-color-success-400: #1c8731;
78
+ --vvd-color-success-500: #30a849;
79
+ --vvd-color-success-600: #53ca6a;
80
+ --vvd-color-success-700: #86e090;
81
+ --vvd-color-success-800: #cfeed4;
82
+ --vvd-color-success-900: #e1f8e5;
83
+ --vvd-color-surface-0dp: #0d0d0d;
84
+ --vvd-color-surface-2dp: linear-gradient(#ffffff0f, #ffffff0f), #0d0d0d;
85
+ --vvd-color-surface-4dp: linear-gradient(#ffffff14, #ffffff14), #0d0d0d;
86
+ --vvd-color-surface-8dp: linear-gradient(#ffffff1a, #ffffff1a), #0d0d0d;
87
+ --vvd-color-surface-12dp: linear-gradient(#ffffff1f, #ffffff1f), #0d0d0d;
88
+ --vvd-color-surface-16dp: linear-gradient(#ffffff24, #ffffff24), #0d0d0d;
89
+ --vvd-color-surface-24dp: linear-gradient(#ffffff29, #ffffff29), #0d0d0d;
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 #00000040) drop-shadow(0px 1px 2px #00000040) drop-shadow(0px 2px 1px #00000040);
92
+ --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #00000040) drop-shadow(0px 2px 4px #00000040) drop-shadow(0px 4px 4px #00000040);
93
+ --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #00000040) drop-shadow(0px 8px 8px #00000040) drop-shadow(0px 4px 4px #00000040);
94
+ --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #00000040) drop-shadow(0px 12px 16px #00000040) drop-shadow(0px 6px 8px #00000040);
95
+ --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #00000040) drop-shadow(0px 16px 24px #00000040) drop-shadow(0px 8px 12px #00000040);
96
+ --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000040) drop-shadow(0px 24px 32px #00000040) drop-shadow(0px 12px 16px #00000040);
96
97
  }
97
98
  @supports (color-scheme: dark) {
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(255, 255, 255, 1);
123
- --vvd-color-surface-2dp: rgba(255, 255, 255, 1);
124
- --vvd-color-surface-4dp: rgba(255, 255, 255, 1);
125
- --vvd-color-surface-8dp: rgba(255, 255, 255, 1);
126
- --vvd-color-surface-12dp: rgba(255, 255, 255, 1);
127
- --vvd-color-surface-16dp: rgba(255, 255, 255, 1);
128
- --vvd-color-surface-24dp: rgba(255, 255, 255, 1);
129
- --vvd-color-canvas: rgb(255,255,255);
130
- --vvd-color-on-canvas: rgb(0,0,0);
131
- --vvd-color-primary: rgb(0,0,0);
132
- --vvd-color-on-primary: rgb(255,255,255);
133
- --vvd-color-neutral: rgb(117,117,117);
134
- --vvd-color-on-neutral: rgb(255,255,255);
135
- --vvd-color-neutral-10: rgb(242,242,242);
136
- --vvd-color-neutral-20: rgb(230,230,230);
137
- --vvd-color-neutral-30: rgb(204,204,204);
138
- --vvd-color-neutral-40: rgb(179,179,179);
139
- --vvd-color-neutral-50: rgb(146,146,146);
140
- --vvd-color-neutral-70: rgb(102,102,102);
141
- --vvd-color-neutral-80: rgb(77,77,77);
142
- --vvd-color-neutral-90: rgb(51,51,51);
143
- --vvd-color-cta: rgb(153,65,255);
144
- --vvd-color-on-cta: rgb(255,255,255);
145
- --vvd-color-cta-10: rgb(245,240,253);
146
- --vvd-color-cta-20: rgb(236,226,250);
147
- --vvd-color-cta-30: rgb(220,193,252);
148
- --vvd-color-cta-70: rgb(135,30,255);
149
- --vvd-color-cta-80: rgb(100,5,209);
150
- --vvd-color-cta-90: rgb(68,2,145);
151
- --vvd-color-success: rgb(28,135,49);
152
- --vvd-color-on-success: rgb(255,255,255);
153
- --vvd-color-success-10: rgb(225,248,229);
154
- --vvd-color-success-20: rgb(207,238,212);
155
- --vvd-color-success-30: rgb(134,224,144);
156
- --vvd-color-success-70: rgb(22,118,41);
157
- --vvd-color-success-80: rgb(21,89,35);
158
- --vvd-color-success-90: rgb(24,58,30);
159
- --vvd-color-alert: rgb(230,29,29);
160
- --vvd-color-on-alert: rgb(255,255,255);
161
- --vvd-color-alert-10: rgb(255,238,242);
162
- --vvd-color-alert-20: rgb(254,223,223);
163
- --vvd-color-alert-30: rgb(255,187,187);
164
- --vvd-color-alert-70: rgb(205,13,13);
165
- --vvd-color-alert-80: rgb(159,2,2);
166
- --vvd-color-alert-90: rgb(110,0,0);
167
- --vvd-color-warning: rgb(250,159,0);
168
- --vvd-color-on-warning: rgb(0,0,0);
169
- --vvd-color-warning-10: rgb(252,245,167);
170
- --vvd-color-warning-20: rgb(253,231,109);
171
- --vvd-color-warning-30: rgb(255,195,33);
172
- --vvd-color-warning-70: rgb(166,76,3);
173
- --vvd-color-warning-80: rgb(128,56,7);
174
- --vvd-color-warning-90: rgb(82,40,1);
175
- --vvd-color-info: rgb(2,118,213);
176
- --vvd-color-on-info: rgb(255,255,255);
177
- --vvd-color-info-10: rgb(232,244,251);
178
- --vvd-color-info-20: rgb(211,233,252);
179
- --vvd-color-info-30: rgb(157,210,254);
180
- --vvd-color-info-70: rgb(14,101,194);
181
- --vvd-color-info-80: rgb(9,74,158);
182
- --vvd-color-info-90: rgb(14,48,109);
183
- --vvd-color-announcement: rgb(214,33,156);
184
- --vvd-color-on-announcement: rgb(255,255,255);
185
- --vvd-color-announcement-10: rgb(255,237,251);
186
- --vvd-color-announcement-20: rgb(255,220,247);
187
- --vvd-color-announcement-30: rgb(248,185,231);
188
- --vvd-color-announcement-70: rgb(187,30,137);
189
- --vvd-color-announcement-80: rgb(143,22,105);
190
- --vvd-color-announcement-90: rgb(98,2,86);
191
- --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));
192
- --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));
193
- --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));
194
- --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));
195
- --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));
196
- --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));
197
- --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));
105
+ --vvd-color-canvas: #ffffff;
106
+ --vvd-color-canvas-text: #000000;
107
+ --vvd-color-neutral-50: #F2F2F2;
108
+ --vvd-color-neutral-100: #E6E6E6;
109
+ --vvd-color-neutral-200: #cccccc;
110
+ --vvd-color-neutral-300: #b3b3b3;
111
+ --vvd-color-neutral-400: #929292;
112
+ --vvd-color-neutral-500: #757575;
113
+ --vvd-color-neutral-600: #666666;
114
+ --vvd-color-neutral-700: #4d4d4d;
115
+ --vvd-color-neutral-800: #333333;
116
+ --vvd-color-neutral-900: #1a1a1a;
117
+ --vvd-color-neutral-950: #0d0d0d;
118
+ --vvd-color-cta-50: #f5f0fd;
119
+ --vvd-color-cta-100: #ece2fa;
120
+ --vvd-color-cta-200: #dcc1fc;
121
+ --vvd-color-cta-300: #cba1fa;
122
+ --vvd-color-cta-400: #b27bf2;
123
+ --vvd-color-cta-500: #9941ff;
124
+ --vvd-color-cta-600: #871eff;
125
+ --vvd-color-cta-700: #6405d1;
126
+ --vvd-color-cta-800: #440291;
127
+ --vvd-color-cta-900: #26044d;
128
+ --vvd-color-warning-50: #FDF5D4;
129
+ --vvd-color-warning-100: #FDEAA0;
130
+ --vvd-color-warning-200: #FACC4B;
131
+ --vvd-color-warning-300: #fa9f00;
132
+ --vvd-color-warning-400: #e07902;
133
+ --vvd-color-warning-500: #be5702;
134
+ --vvd-color-warning-600: #A64C03;
135
+ --vvd-color-warning-700: #893000;
136
+ --vvd-color-warning-800: #522801;
137
+ --vvd-color-warning-900: #2A1502;
138
+ --vvd-color-information-50: #e8f4fb;
139
+ --vvd-color-information-100: #d3e9fc;
140
+ --vvd-color-information-200: #9dd2fe;
141
+ --vvd-color-information-300: #65baff;
142
+ --vvd-color-information-400: #2997f0;
143
+ --vvd-color-information-500: #0276d5;
144
+ --vvd-color-information-600: #0e65c2;
145
+ --vvd-color-information-700: #094a9e;
146
+ --vvd-color-information-800: #0e306d;
147
+ --vvd-color-information-900: #071939;
148
+ --vvd-color-announcement-50: #ffedfb;
149
+ --vvd-color-announcement-100: #ffdcf7;
150
+ --vvd-color-announcement-200: #f8b9e7;
151
+ --vvd-color-announcement-300: #fb8fd8;
152
+ --vvd-color-announcement-400: #e560bb;
153
+ --vvd-color-announcement-500: #d6219c;
154
+ --vvd-color-announcement-600: #bb1e89;
155
+ --vvd-color-announcement-700: #8f1669;
156
+ --vvd-color-announcement-800: #620256;
157
+ --vvd-color-announcement-900: #32082c;
158
+ --vvd-color-alert-50: #ffeef2;
159
+ --vvd-color-alert-100: #fedfdf;
160
+ --vvd-color-alert-200: #ffbbbb;
161
+ --vvd-color-alert-300: #fe9696;
162
+ --vvd-color-alert-400: #f75959;
163
+ --vvd-color-alert-500: #e61d1d;
164
+ --vvd-color-alert-600: #cd0d0d;
165
+ --vvd-color-alert-700: #9f0202;
166
+ --vvd-color-alert-800: #6e0000;
167
+ --vvd-color-alert-900: #3e0004;
168
+ --vvd-color-success-50: #e1f8e5;
169
+ --vvd-color-success-100: #cfeed4;
170
+ --vvd-color-success-200: #86e090;
171
+ --vvd-color-success-300: #53ca6a;
172
+ --vvd-color-success-400: #30a849;
173
+ --vvd-color-success-500: #1c8731;
174
+ --vvd-color-success-600: #167629;
175
+ --vvd-color-success-700: #155923;
176
+ --vvd-color-success-800: #183a1e;
177
+ --vvd-color-success-900: #0a1e11;
178
+ --vvd-color-surface-0dp: #ffffff;
179
+ --vvd-color-surface-2dp: #ffffff;
180
+ --vvd-color-surface-4dp: #ffffff;
181
+ --vvd-color-surface-8dp: #ffffff;
182
+ --vvd-color-surface-12dp: #ffffff;
183
+ --vvd-color-surface-16dp: #ffffff;
184
+ --vvd-color-surface-24dp: #ffffff;
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 #0000001a) drop-shadow(0px 1px 2px #0000000d) drop-shadow(0px 2px 1px #0000000d);
187
+ --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #0000001a) drop-shadow(0px 2px 4px #0000000d) drop-shadow(0px 4px 2px #0000000d);
188
+ --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #0000001a) drop-shadow(0px 8px 8px #0000000d) drop-shadow(0px 4px 4px #0000000d);
189
+ --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #0000001a) drop-shadow(0px 12px 16px #0000000d) drop-shadow(0px 6px 8px #0000000d);
190
+ --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #0000001a) drop-shadow(0px 16px 24px #0000000d) drop-shadow(0px 8px 12px #0000000d);
191
+ --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000033) drop-shadow(0px 24px 32px #0000000d) drop-shadow(0px 12px 16px #0000000d);
198
192
  }
199
193
  @supports (color-scheme: light) {
200
194
  .vvd-theme-alternate, ::part(vvd-theme-alternate) {