@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.
- package/README.md +3 -1
- package/accordion/index.js +1 -1
- package/accordion-item/index.js +1 -1
- package/action-group/index.js +1 -1
- package/badge/index.js +1 -1
- package/banner/index.js +3 -3
- package/breadcrumb-item/index.js +1 -1
- package/button/index.js +1 -1
- package/calendar/index.js +1 -1
- package/calendar-event/index.js +1 -1
- package/card/index.js +1 -1
- package/checkbox/index.js +1 -1
- package/dialog/index.js +3 -3
- package/divider/index.js +1 -1
- package/fab/index.js +1 -1
- package/focus/index.js +1 -1
- package/header/index.js +1 -1
- package/icon/index.js +1 -1
- package/layout/index.js +1 -1
- package/lib/badge/badge.d.ts +1 -1
- package/lib/banner/banner.d.ts +1 -1
- package/lib/calendar-event/calendar-event.d.ts +1 -1
- package/lib/dialog/index.d.ts +1 -1
- package/lib/enums.d.ts +1 -1
- package/lib/icon/icon.d.ts +1 -1
- package/lib/note/note.d.ts +1 -1
- package/lib/text-field/text-field.d.ts +2 -9
- package/nav-disclosure/index.js +1 -1
- package/nav-item/index.js +1 -1
- package/note/index.js +2 -2
- package/package.json +1 -1
- package/progress/index.js +1 -1
- package/progress-ring/index.js +1 -1
- package/shared/enums.js +1 -1
- package/shared/index2.js +1 -1
- package/shared/index3.js +1 -1
- package/shared/patterns/form-elements.d.ts +22 -0
- package/side-drawer/index.js +1 -1
- package/styles/fonts/spezia.css +2 -2
- package/styles/themes/dark.css +182 -188
- package/styles/themes/light.css +182 -188
- package/styles/typography/desktop.css +77 -60
- package/text-field/index.js +67 -41
- package/tooltip/index.js +1 -1
package/package.json
CHANGED
package/progress/index.js
CHANGED
|
@@ -8,7 +8,7 @@ import { c as classNames } from '../shared/class-names.js';
|
|
|
8
8
|
import '../shared/object-keys.js';
|
|
9
9
|
import '../shared/iterators.js';
|
|
10
10
|
|
|
11
|
-
var css_248z = ".base {\n height: 6px;\n align-items: center;\n margin: 0;\n outline: none;\n}\n.base:not(.connotation-pacific).connotation-cta {\n --_connotation-color-primary: var(--vvd-color-cta);\n}\n.base:not(.connotation-pacific).connotation-alert {\n --_connotation-color-primary: var(--vvd-color-alert);\n}\n.base:not(.connotation-pacific).connotation-success {\n --_connotation-color-primary: var(--vvd-color-success);\n}\n.base:not(.connotation-pacific):not(.connotation-cta, .connotation-alert, .connotation-success) {\n --_connotation-color-primary: var(--vvd-color-
|
|
11
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 01 Sep 2022 13:30:09 GMT\n */\n.base {\n height: 6px;\n align-items: center;\n margin: 0;\n outline: none;\n}\n.base:not(.connotation-pacific).connotation-cta {\n --_connotation-color-primary: var(--vvd-color-cta-500);\n}\n.base:not(.connotation-pacific).connotation-alert {\n --_connotation-color-primary: var(--vvd-color-alert-500);\n}\n.base:not(.connotation-pacific).connotation-success {\n --_connotation-color-primary: var(--vvd-color-success-500);\n}\n.base:not(.connotation-pacific):not(.connotation-cta, .connotation-alert, .connotation-success) {\n --_connotation-color-primary: var(--vvd-color-canvas-text);\n}\n.base.connotation-pacific {\n --_connotation-color-primary: linear-gradient(to right, var(--vvd-color-information-200), var(--vvd-color-cta-600));\n}\n\n.progress {\n position: relative;\n display: flex;\n overflow: hidden;\n align-items: center;\n background-color: var(--vvd-color-neutral-100);\n block-size: 100%;\n inline-size: 100%;\n /* Shape */\n}\n.base:not(.shape-sharp) .progress {\n border-radius: 3px;\n}\n\n.indeterminate {\n display: flex;\n background-color: var(--_connotation-color-primary);\n block-size: 100%;\n border-radius: inherit;\n inline-size: 100%;\n}\n\n.determinate {\n background-color: var(--_connotation-color-primary);\n block-size: 100%;\n border-radius: inherit;\n transition: all 0.2s ease-in-out;\n}\n.connotation-pacific .determinate {\n background-image: var(--_connotation-color-primary);\n}\n.reverse .determinate {\n position: absolute;\n right: 0;\n}\n.paused .determinate {\n background-color: var(--vvd-color-neutral-300);\n}\n\n.indicator-1 {\n animation: indeterminate-1 2s infinite;\n inline-size: 30%;\n}\n\n.indicator-2 {\n animation: indeterminate-2 2s infinite;\n inline-size: 60%;\n}\n\n.indicator-1,\n.indicator-2 {\n position: absolute;\n animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);\n background-color: var(--vvd-color-neutral-100);\n block-size: 100%;\n opacity: 0;\n}\n.connotation-pacific .indicator-1,\n.connotation-pacific .indicator-2 {\n background-image: var(--_connotation-color-primary);\n}\n.paused .indicator-1,\n.paused .indicator-2 {\n animation-play-state: paused;\n background-color: var(--_connotation-color-primary);\n}\n.reverse .indicator-1,\n.reverse .indicator-2 {\n animation-direction: reverse;\n}\n\n@keyframes indeterminate-1 {\n 0% {\n opacity: 1;\n transform: translateX(-100%);\n }\n 70% {\n opacity: 1;\n transform: translateX(300%);\n }\n 70.01% {\n opacity: 0;\n }\n 100% {\n opacity: 0;\n transform: translateX(300%);\n }\n}\n@keyframes indeterminate-2 {\n 0% {\n opacity: 0;\n transform: translateX(-150%);\n }\n 29.99% {\n opacity: 0;\n }\n 30% {\n opacity: 1;\n transform: translateX(-150%);\n }\n 100% {\n opacity: 1;\n transform: translateX(166.66%);\n }\n}";
|
|
12
12
|
styleInject(css_248z);
|
|
13
13
|
|
|
14
14
|
var classof = classofRaw;
|
package/progress-ring/index.js
CHANGED
|
@@ -4,7 +4,7 @@ import { B as BaseProgress } from '../shared/base-progress.js';
|
|
|
4
4
|
import { w as when } from '../shared/when.js';
|
|
5
5
|
import { c as classNames } from '../shared/class-names.js';
|
|
6
6
|
|
|
7
|
-
var css_248z = ".base {\n align-items: center;\n block-size: var(--_density);\n color: var(--_appearance-color-text);\n inline-size: var(--_density);\n outline: none;\n}\n.base.connotation-cta {\n --_connotation-color-primary: var(--vvd-color-cta);\n}\n.base.connotation-alert {\n --_connotation-color-primary: var(--vvd-color-alert);\n}\n.base.connotation-success {\n --_connotation-color-primary: var(--vvd-color-success);\n}\n.base:not(.connotation-cta, .connotation-alert, .connotation-success) {\n --_connotation-color-primary: var(--vvd-color-
|
|
7
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 01 Sep 2022 13:30:09 GMT\n */\n.base {\n align-items: center;\n block-size: var(--_density);\n color: var(--_appearance-color-text);\n inline-size: var(--_density);\n outline: none;\n}\n.base.connotation-cta {\n --_connotation-color-primary: var(--vvd-color-cta-500);\n}\n.base.connotation-alert {\n --_connotation-color-primary: var(--vvd-color-alert-500);\n}\n.base.connotation-success {\n --_connotation-color-primary: var(--vvd-color-success-500);\n}\n.base:not(.connotation-cta, .connotation-alert, .connotation-success) {\n --_connotation-color-primary: var(--vvd-color-canvas-text);\n}\n.base {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: transaprent;\n}\n.base:where(:disabled, .disabled) {\n --_appearance-color-text: var(--vvd-color-neutral-400);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: transaprent;\n}\n.base.density-5 {\n --_density: calc(5 * 4px);\n}\n.base.density-6 {\n --_density: calc(6 * 4px);\n}\n.base.density-7 {\n --_density: calc(7 * 4px);\n}\n.base.density-8 {\n --_density: calc(8 * 4px);\n}\n.base.density-9 {\n --_density: calc(9 * 4px);\n}\n.base.density-11 {\n --_density: calc(11 * 4px);\n}\n.base.density-12 {\n --_density: calc(12 * 4px);\n}\n.base.density-13 {\n --_density: calc(13 * 4px);\n}\n.base:not(.density-5, .density-6, .density-7, .density-8, .density-9, .density-11, .density-12, .density-13) {\n --_density: calc(10 * 4px);\n}\n\n.progress {\n width: 100%;\n height: 100%;\n}\n\n.background {\n fill: none;\n stroke: transparent;\n stroke-width: 2px;\n}\n\n.determinate {\n fill: none;\n stroke: currentColor;\n stroke-linecap: round;\n stroke-width: 2px;\n transform: rotate(-90deg);\n transform-origin: 50% 50%;\n transition: all 0.2s ease-in-out;\n}\n\n.indeterminate-indicator-1 {\n animation: spin-infinite 2s linear infinite;\n fill: none;\n stroke: currentColor;\n stroke-linecap: round;\n stroke-width: 2px;\n transform: rotate(-90deg);\n transform-origin: 50% 50%;\n transition: all 0.2s ease-in-out;\n}\n\n.base.paused .indeterminate-indicator-1 {\n animation-play-state: paused;\n}\n\n@keyframes spin-infinite {\n 0% {\n stroke-dasharray: 0.01px 43.97px;\n transform: rotate(0deg);\n }\n 50% {\n stroke-dasharray: 21.99px 21.99px;\n transform: rotate(450deg);\n }\n 100% {\n stroke-dasharray: 0.01px 43.97px;\n transform: rotate(1080deg);\n }\n}";
|
|
8
8
|
styleInject(css_248z);
|
|
9
9
|
|
|
10
10
|
class ProgressRing extends BaseProgress {}
|
package/shared/enums.js
CHANGED
|
@@ -6,7 +6,7 @@ var Connotation;
|
|
|
6
6
|
Connotation["Success"] = "success";
|
|
7
7
|
Connotation["Alert"] = "alert";
|
|
8
8
|
Connotation["Warning"] = "warning";
|
|
9
|
-
Connotation["
|
|
9
|
+
Connotation["Information"] = "information";
|
|
10
10
|
Connotation["Announcement"] = "announcement";
|
|
11
11
|
})(Connotation || (Connotation = {}));
|
|
12
12
|
|
package/shared/index2.js
CHANGED
|
@@ -11,7 +11,7 @@ __decorate([attr({
|
|
|
11
11
|
mode: 'boolean'
|
|
12
12
|
}), __metadata("design:type", Boolean)], Elevation.prototype, "noShadow", void 0);
|
|
13
13
|
|
|
14
|
-
var css_248z = ":host {\n display: contents;\n}\n\n.control {\n display: contents;\n}\n.control.dp-0 {\n --_elevation-fill: var(--vvd-color-surface-0dp);\n --_elevation-shadow: var(--vvd-shadow-surface-0dp);\n}\n.control.dp-4 {\n --_elevation-fill: var(--vvd-color-surface-4dp);\n --_elevation-shadow: var(--vvd-shadow-surface-4dp);\n}\n.control.dp-8 {\n --_elevation-fill: var(--vvd-color-surface-8dp);\n --_elevation-shadow: var(--vvd-shadow-surface-8dp);\n}\n.control.dp-12 {\n --_elevation-fill: var(--vvd-color-surface-12dp);\n --_elevation-shadow: var(--vvd-shadow-surface-12dp);\n}\n.control.dp-16 {\n --_elevation-fill: var(--vvd-color-surface-16dp);\n --_elevation-shadow: var(--vvd-shadow-surface-16dp);\n}\n.control.dp-24 {\n --_elevation-fill: var(--vvd-color-surface-24dp);\n --_elevation-shadow: var(--vvd-shadow-surface-24dp);\n}\n.control:not(.dp-0, .dp-4, .dp-8, .dp-12, .dp-16, .dp-24) {\n --_elevation-fill: var(--vvd-color-surface-2dp);\n --_elevation-shadow: var(--vvd-shadow-surface-2dp);\n}\n.control ::slotted(*) {\n background
|
|
14
|
+
var css_248z = ":host {\n display: contents;\n}\n\n.control {\n display: contents;\n}\n.control.dp-0 {\n --_elevation-fill: var(--vvd-color-surface-0dp);\n --_elevation-shadow: var(--vvd-shadow-surface-0dp);\n}\n.control.dp-4 {\n --_elevation-fill: var(--vvd-color-surface-4dp);\n --_elevation-shadow: var(--vvd-shadow-surface-4dp);\n}\n.control.dp-8 {\n --_elevation-fill: var(--vvd-color-surface-8dp);\n --_elevation-shadow: var(--vvd-shadow-surface-8dp);\n}\n.control.dp-12 {\n --_elevation-fill: var(--vvd-color-surface-12dp);\n --_elevation-shadow: var(--vvd-shadow-surface-12dp);\n}\n.control.dp-16 {\n --_elevation-fill: var(--vvd-color-surface-16dp);\n --_elevation-shadow: var(--vvd-shadow-surface-16dp);\n}\n.control.dp-24 {\n --_elevation-fill: var(--vvd-color-surface-24dp);\n --_elevation-shadow: var(--vvd-shadow-surface-24dp);\n}\n.control:not(.dp-0, .dp-4, .dp-8, .dp-12, .dp-16, .dp-24) {\n --_elevation-fill: var(--vvd-color-surface-2dp);\n --_elevation-shadow: var(--vvd-shadow-surface-2dp);\n}\n.control ::slotted(*) {\n background: var(--_elevation-fill);\n filter: var(--_elevation-shadow);\n transition: background-color 0.15s linear, filter 0.15s linear;\n}\n.control.no-shadow ::slotted(*) {\n filter: none;\n}";
|
|
15
15
|
styleInject(css_248z);
|
|
16
16
|
|
|
17
17
|
let _ = t => t,
|
package/shared/index3.js
CHANGED
|
@@ -2069,7 +2069,7 @@ __decorate([attr({
|
|
|
2069
2069
|
|
|
2070
2070
|
__decorate([attr, __metadata("design:type", String)], Popup.prototype, "anchor", void 0);
|
|
2071
2071
|
|
|
2072
|
-
var css_248z = ".control {\n background
|
|
2072
|
+
var css_248z = ".control {\n background: var(--vvd-color-surface-4dp);\n border-radius: inherit;\n contain: layout;\n inline-size: -moz-fit-content;\n inline-size: fit-content;\n}\n.control:not(.open) {\n display: none;\n}\n\n.popup-wrapper {\n position: fixed;\n border-radius: 6px;\n}\n\n.popup-content {\n display: grid;\n color: var(--vvd-color-canvas-text); /* neutral-100 */\n}\n.dismissible .popup-content {\n align-content: start;\n grid-template-columns: 1fr auto;\n}\n\n.arrow {\n position: absolute;\n z-index: -1;\n width: 8px;\n height: 8px;\n background: var(--vvd-color-surface-4dp);\n transform: rotate(45deg);\n}\n\n.dismissible-button {\n align-self: flex-start;\n margin-block-start: 4px;\n margin-inline-end: 4px;\n}";
|
|
2073
2073
|
styleInject(css_248z);
|
|
2074
2074
|
|
|
2075
2075
|
let _ = t => t,
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
export interface FormElement {
|
|
2
|
+
charCount: boolean;
|
|
3
|
+
errorValidationMessage: boolean;
|
|
4
|
+
helperText: string;
|
|
5
|
+
label: string;
|
|
6
|
+
userValid: boolean;
|
|
7
|
+
dirtyValue: boolean;
|
|
8
|
+
}
|
|
9
|
+
export declare function formElements<T extends {
|
|
10
|
+
new (...args: any[]): Record<string, any>;
|
|
11
|
+
}>(constructor: T): {
|
|
12
|
+
new (...args: any[]): {
|
|
13
|
+
[x: string]: any;
|
|
14
|
+
label?: string | undefined;
|
|
15
|
+
helperText?: string | undefined;
|
|
16
|
+
charCount: boolean;
|
|
17
|
+
userValid: boolean;
|
|
18
|
+
"__#5749@#blurred": boolean;
|
|
19
|
+
readonly errorValidationMessage: any;
|
|
20
|
+
validate: () => void;
|
|
21
|
+
};
|
|
22
|
+
} & T;
|
package/side-drawer/index.js
CHANGED
|
@@ -34,7 +34,7 @@ __decorate([attr({
|
|
|
34
34
|
mode: 'boolean'
|
|
35
35
|
}), __metadata("design:type", Object)], SideDrawer.prototype, "trailing", void 0);
|
|
36
36
|
|
|
37
|
-
var css_248z = ".control {\n position: fixed;\n z-index: 1;\n background-color: var(--vvd-color-canvas);\n color: var(--vvd-color-
|
|
37
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 01 Sep 2022 13:30:09 GMT\n */\n.control {\n position: fixed;\n z-index: 1;\n background-color: var(--vvd-color-canvas);\n color: var(--vvd-color-canvas-text);\n inline-size: 280px;\n inset-block: 0;\n overflow-y: auto;\n}\n.control.alternate {\n background-color: var(--vvd-color-canvas);\n}\n.control.trailing {\n inset-inline-end: 0;\n}\n.control:not(.open).trailing {\n transform: translateX(100%);\n}\n.control:not(.open):not(.trailing) {\n transform: translateX(-100%);\n}\n.control.open:not(.modal).trailing + .side-drawer-app-content {\n margin-inline-end: var(--side-drawer-app-content-offset, 280px);\n}\n.control.open:not(.modal):not(.trailing) + .side-drawer-app-content {\n margin-inline-start: var(--side-drawer-app-content-offset, 280px);\n}\n@media (prefers-reduced-motion: no-preference) {\n .control {\n transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n }\n}\n\n.scrim {\n background-color: var(--vvd-color-canvas-text);\n opacity: 0.5;\n position: fixed;\n inset: 0;\n}\n.scrim:not(.open) {\n display: none;\n}";
|
|
38
38
|
styleInject(css_248z);
|
|
39
39
|
|
|
40
40
|
let _ = t => t,
|
package/styles/fonts/spezia.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
@font-face {
|
|
2
|
-
font-family:
|
|
2
|
+
font-family: SpeziaCompleteVariableUpright;
|
|
3
3
|
font-stretch: 50% 200%;
|
|
4
4
|
font-weight: 1 1000;
|
|
5
5
|
src: url("SpeziaCompleteVariableUprightWeb.woff") format("woff");
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
src: url("SpeziaCompleteVariableItalicWeb.woff2") format("woff2");
|
|
14
14
|
}
|
|
15
15
|
@font-face {
|
|
16
|
-
font-family:
|
|
16
|
+
font-family: SpeziaMonoCompleteVariable;
|
|
17
17
|
font-stretch: 50% 200%;
|
|
18
18
|
font-weight: 1 1000;
|
|
19
19
|
src: url("SpeziaMonoCompleteVariableWeb.woff") format("woff");
|
package/styles/themes/dark.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-
|
|
3
|
-
--vvd-
|
|
4
|
-
--vvd-
|
|
5
|
-
--vvd-
|
|
6
|
-
--vvd-
|
|
7
|
-
--vvd-
|
|
8
|
-
--vvd-
|
|
9
|
-
--vvd-
|
|
10
|
-
--vvd-
|
|
11
|
-
--vvd-
|
|
12
|
-
--vvd-
|
|
13
|
-
--vvd-
|
|
14
|
-
--vvd-
|
|
15
|
-
--vvd-
|
|
16
|
-
--vvd-
|
|
17
|
-
--vvd-
|
|
18
|
-
--vvd-
|
|
19
|
-
--vvd-
|
|
20
|
-
--vvd-color-
|
|
21
|
-
--vvd-color-
|
|
22
|
-
--vvd-color-
|
|
23
|
-
--vvd-color-
|
|
24
|
-
--vvd-color-
|
|
25
|
-
--vvd-color-
|
|
26
|
-
--vvd-color-
|
|
27
|
-
--vvd-color-
|
|
28
|
-
--vvd-color-
|
|
29
|
-
--vvd-color-
|
|
30
|
-
--vvd-color-
|
|
31
|
-
--vvd-color-
|
|
32
|
-
--vvd-color-
|
|
33
|
-
--vvd-color-
|
|
34
|
-
--vvd-color-
|
|
35
|
-
--vvd-color-
|
|
36
|
-
--vvd-color-
|
|
37
|
-
--vvd-color-
|
|
38
|
-
--vvd-color-
|
|
39
|
-
--vvd-color-
|
|
40
|
-
--vvd-color-
|
|
41
|
-
--vvd-color-
|
|
42
|
-
--vvd-color-
|
|
43
|
-
--vvd-color-
|
|
44
|
-
--vvd-color-
|
|
45
|
-
--vvd-color-
|
|
46
|
-
--vvd-color-
|
|
47
|
-
--vvd-color-
|
|
48
|
-
--vvd-color-
|
|
49
|
-
--vvd-color-
|
|
50
|
-
--vvd-color-
|
|
51
|
-
--vvd-color-
|
|
52
|
-
--vvd-color-
|
|
53
|
-
--vvd-color-
|
|
54
|
-
--vvd-color-
|
|
55
|
-
--vvd-color-
|
|
56
|
-
--vvd-color-
|
|
57
|
-
--vvd-color-alert:
|
|
58
|
-
--vvd-color-
|
|
59
|
-
--vvd-color-alert-
|
|
60
|
-
--vvd-color-alert-
|
|
61
|
-
--vvd-color-alert-
|
|
62
|
-
--vvd-color-alert-
|
|
63
|
-
--vvd-color-alert-
|
|
64
|
-
--vvd-color-alert-
|
|
65
|
-
--vvd-color-
|
|
66
|
-
--vvd-color-
|
|
67
|
-
--vvd-color-
|
|
68
|
-
--vvd-color-
|
|
69
|
-
--vvd-color-
|
|
70
|
-
--vvd-color-
|
|
71
|
-
--vvd-color-
|
|
72
|
-
--vvd-color-
|
|
73
|
-
--vvd-color-
|
|
74
|
-
--vvd-color-
|
|
75
|
-
--vvd-color-
|
|
76
|
-
--vvd-color-
|
|
77
|
-
--vvd-color-
|
|
78
|
-
--vvd-color-
|
|
79
|
-
--vvd-color-
|
|
80
|
-
--vvd-color-
|
|
81
|
-
--vvd-color-
|
|
82
|
-
--vvd-
|
|
83
|
-
--vvd-
|
|
84
|
-
--vvd-
|
|
85
|
-
--vvd-
|
|
86
|
-
--vvd-
|
|
87
|
-
--vvd-
|
|
88
|
-
--vvd-
|
|
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-
|
|
105
|
-
--vvd-
|
|
106
|
-
--vvd-
|
|
107
|
-
--vvd-
|
|
108
|
-
--vvd-
|
|
109
|
-
--vvd-
|
|
110
|
-
--vvd-
|
|
111
|
-
--vvd-
|
|
112
|
-
--vvd-
|
|
113
|
-
--vvd-
|
|
114
|
-
--vvd-
|
|
115
|
-
--vvd-
|
|
116
|
-
--vvd-
|
|
117
|
-
--vvd-
|
|
118
|
-
--vvd-
|
|
119
|
-
--vvd-
|
|
120
|
-
--vvd-
|
|
121
|
-
--vvd-
|
|
122
|
-
--vvd-color-
|
|
123
|
-
--vvd-color-
|
|
124
|
-
--vvd-color-
|
|
125
|
-
--vvd-color-
|
|
126
|
-
--vvd-color-
|
|
127
|
-
--vvd-color-
|
|
128
|
-
--vvd-color-
|
|
129
|
-
--vvd-color-
|
|
130
|
-
--vvd-color-
|
|
131
|
-
--vvd-color-
|
|
132
|
-
--vvd-color-
|
|
133
|
-
--vvd-color-
|
|
134
|
-
--vvd-color-
|
|
135
|
-
--vvd-color-
|
|
136
|
-
--vvd-color-
|
|
137
|
-
--vvd-color-
|
|
138
|
-
--vvd-color-
|
|
139
|
-
--vvd-color-
|
|
140
|
-
--vvd-color-
|
|
141
|
-
--vvd-color-
|
|
142
|
-
--vvd-color-
|
|
143
|
-
--vvd-color-
|
|
144
|
-
--vvd-color-
|
|
145
|
-
--vvd-color-
|
|
146
|
-
--vvd-color-
|
|
147
|
-
--vvd-color-
|
|
148
|
-
--vvd-color-
|
|
149
|
-
--vvd-color-
|
|
150
|
-
--vvd-color-
|
|
151
|
-
--vvd-color-
|
|
152
|
-
--vvd-color-
|
|
153
|
-
--vvd-color-
|
|
154
|
-
--vvd-color-
|
|
155
|
-
--vvd-color-
|
|
156
|
-
--vvd-color-
|
|
157
|
-
--vvd-color-
|
|
158
|
-
--vvd-color-
|
|
159
|
-
--vvd-color-alert:
|
|
160
|
-
--vvd-color-
|
|
161
|
-
--vvd-color-alert-
|
|
162
|
-
--vvd-color-alert-
|
|
163
|
-
--vvd-color-alert-
|
|
164
|
-
--vvd-color-alert-
|
|
165
|
-
--vvd-color-alert-
|
|
166
|
-
--vvd-color-alert-
|
|
167
|
-
--vvd-color-
|
|
168
|
-
--vvd-color-
|
|
169
|
-
--vvd-color-
|
|
170
|
-
--vvd-color-
|
|
171
|
-
--vvd-color-
|
|
172
|
-
--vvd-color-
|
|
173
|
-
--vvd-color-
|
|
174
|
-
--vvd-color-
|
|
175
|
-
--vvd-color-
|
|
176
|
-
--vvd-color-
|
|
177
|
-
--vvd-color-
|
|
178
|
-
--vvd-color-
|
|
179
|
-
--vvd-color-
|
|
180
|
-
--vvd-color-
|
|
181
|
-
--vvd-color-
|
|
182
|
-
--vvd-color-
|
|
183
|
-
--vvd-color-
|
|
184
|
-
--vvd-
|
|
185
|
-
--vvd-
|
|
186
|
-
--vvd-
|
|
187
|
-
--vvd-
|
|
188
|
-
--vvd-
|
|
189
|
-
--vvd-
|
|
190
|
-
--vvd-
|
|
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) {
|