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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vonage/vivid",
-  "version": "3.0.0-next.49",
+  "version": "3.0.0-next.51",
   "type": "module",
   "module": "./index.esm.js",
   "main": "./index.js",

package/progress/index.js

@@ -8,7 +8,7 @@ import { c as classNames } from '../shared/class-names.js';
 import '../shared/object-keys.js';
 import '../shared/iterators.js';
 
-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-on-canvas);\n}\n.base.connotation-pacific {\n  --_connotation-color-primary: linear-gradient(to right, var(--vvd-color-info-30), var(--vvd-color-cta-70));\n}\n\n.progress {\n  position: relative;\n  display: flex;\n  overflow: hidden;\n  align-items: center;\n  background-color: var(--vvd-color-neutral-20);\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-40);\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-20);\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}";
+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}";
 styleInject(css_248z);
 
 var classof = classofRaw;

package/progress-ring/index.js

@@ -4,7 +4,7 @@ import { B as BaseProgress } from '../shared/base-progress.js';
 import { w as when } from '../shared/when.js';
 import { c as classNames } from '../shared/class-names.js';
 
-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-on-canvas);\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-50);\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}";
+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}";
 styleInject(css_248z);
 
 class ProgressRing extends BaseProgress {}

package/shared/enums.js

@@ -6,7 +6,7 @@ var Connotation;
   Connotation["Success"] = "success";
   Connotation["Alert"] = "alert";
   Connotation["Warning"] = "warning";
-  Connotation["Info"] = "info";
+  Connotation["Information"] = "information";
   Connotation["Announcement"] = "announcement";
 })(Connotation || (Connotation = {}));
 

package/shared/index2.js

@@ -11,7 +11,7 @@ __decorate([attr({
   mode: 'boolean'
 }), __metadata("design:type", Boolean)], Elevation.prototype, "noShadow", void 0);
 
-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-color: 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}";
+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}";
 styleInject(css_248z);
 
 let _ = t => t,

package/shared/index3.js

@@ -2069,7 +2069,7 @@ __decorate([attr({
 
 __decorate([attr, __metadata("design:type", String)], Popup.prototype, "anchor", void 0);
 
-var css_248z = ".control {\n  background-color: 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-on-canvas); /* 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-color: 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}";
+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}";
 styleInject(css_248z);
 
 let _ = t => t,

package/shared/patterns/form-elements.d.ts

@@ -0,0 +1,22 @@
+export interface FormElement {
+    charCount: boolean;
+    errorValidationMessage: boolean;
+    helperText: string;
+    label: string;
+    userValid: boolean;
+    dirtyValue: boolean;
+}
+export declare function formElements<T extends {
+    new (...args: any[]): Record<string, any>;
+}>(constructor: T): {
+    new (...args: any[]): {
+        [x: string]: any;
+        label?: string | undefined;
+        helperText?: string | undefined;
+        charCount: boolean;
+        userValid: boolean;
+        "__#5749@#blurred": boolean;
+        readonly errorValidationMessage: any;
+        validate: () => void;
+    };
+} & T;

package/side-drawer/index.js

@@ -34,7 +34,7 @@ __decorate([attr({
   mode: 'boolean'
 }), __metadata("design:type", Object)], SideDrawer.prototype, "trailing", void 0);
 
-var css_248z = ".control {\n  position: fixed;\n  z-index: 1;\n  background-color: var(--vvd-color-canvas);\n  color: var(--vvd-color-on-canvas);\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-on-canvas);\n  opacity: 0.5;\n  position: fixed;\n  inset: 0;\n}\n.scrim:not(.open) {\n  display: none;\n}";
+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}";
 styleInject(css_248z);
 
 let _ = t => t,

package/styles/fonts/spezia.css

@@ -1,23 +1,23 @@
-:root {
-  --vvd-font-family-spezia: SpeziaWebVariable;
-  --vvd-font-family-spezia-mono: SpeziaMonoWebVariable;
+@font-face {
+  font-family: SpeziaCompleteVariableUpright;
+  font-stretch: 50% 200%;
+  font-weight: 1 1000;
+  src: url("SpeziaCompleteVariableUprightWeb.woff") format("woff");
+  src: url("SpeziaCompleteVariableUprightWeb.woff2") format("woff2");
 }
-
 @font-face {
-  font-display: block;
-  font-family: SpeziaWebVariable;
+  font-family: SpeziaCompleteVariableItalic;
   font-stretch: 50% 200%;
-  font-style: normal;
   font-weight: 1 1000;
-  src: url("https://fonts.resources.vonage.com/fonts/v1/Spezia_Web_Complete_Upright.woff2") format("woff2-variations");
+  src: url("SpeziaCompleteVariableItalicWeb.woff") format("woff");
+  src: url("SpeziaCompleteVariableItalicWeb.woff2") format("woff2");
 }
 @font-face {
-  font-display: block;
-  font-family: SpeziaMonoWebVariable;
+  font-family: SpeziaMonoCompleteVariable;
   font-stretch: 50% 200%;
-  font-style: normal;
   font-weight: 1 1000;
-  src: url("https://fonts.resources.vonage.com/fonts/v1/Spezia_Web_Monospace_Complete.woff2") format("woff2-variations");
+  src: url("SpeziaMonoCompleteVariableWeb.woff") format("woff");
+  src: url("SpeziaMonoCompleteVariableWeb.woff2") format("woff2");
 }
 
 /*# sourceMappingURL=spezia.css.map */

package/styles/themes/dark.css

@@ -1,98 +1,99 @@
+/**
+ * Do not edit directly
+ * Generated on Thu, 01 Sep 2022 13:30:09 GMT
+ */
+/**
+ * Do not edit directly
+ * Generated on Thu, 01 Sep 2022 13:30:09 GMT
+ */
 :root, .vvd-theme-main, ::part(vvd-theme-main) {
-  --vvd-sizing-4px-scale-3xs: 8px;
-  --vvd-sizing-4px-scale-2xs: 12px;
-  --vvd-sizing-4px-scale-xs: 16px;
-  --vvd-sizing-4px-scale-sm: 20px;
-  --vvd-sizing-4px-scale-md: 24px;
-  --vvd-sizing-4px-scale-lg: 28px;
-  --vvd-sizing-4px-scale-xl: 32px;
-  --vvd-sizing-4px-scale-2xl: 36px;
-  --vvd-sizing-4px-scale-3xl: 40px;
-  --vvd-sizing-8px-scale-3xs: 8px;
-  --vvd-sizing-8px-scale-2xs: 16px;
-  --vvd-sizing-8px-scale-xs: 24px;
-  --vvd-sizing-8px-scale-sm: 32px;
-  --vvd-sizing-8px-scale-md: 40px;
-  --vvd-sizing-8px-scale-lg: 48px;
-  --vvd-sizing-8px-scale-xl: 56px;
-  --vvd-sizing-8px-scale-2xl: 64px;
-  --vvd-sizing-8px-scale-3xl: 72px;
-  --vvd-color-surface-0dp: rgba(13, 13, 13, 1);
-  --vvd-color-surface-2dp: rgba(28, 28, 28, 1);
-  --vvd-color-surface-4dp: rgba(32, 32, 32, 1);
-  --vvd-color-surface-8dp: rgba(37, 37, 37, 1);
-  --vvd-color-surface-12dp: rgba(42, 42, 42, 1);
-  --vvd-color-surface-16dp: rgba(47, 47, 47, 1);
-  --vvd-color-surface-24dp: rgba(52, 52, 52, 1);
-  --vvd-color-canvas: rgb(13,13,13);
-  --vvd-color-on-canvas: rgb(255,255,255);
-  --vvd-color-primary: rgb(255,255,255);
-  --vvd-color-on-primary: rgb(0,0,0);
-  --vvd-color-neutral: rgb(146,146,146);
-  --vvd-color-on-neutral: rgb(0,0,0);
-  --vvd-color-neutral-10: rgb(26,26,26);
-  --vvd-color-neutral-20: rgb(51,51,51);
-  --vvd-color-neutral-30: rgb(77,77,77);
-  --vvd-color-neutral-40: rgb(102,102,102);
-  --vvd-color-neutral-50: rgb(117,117,117);
-  --vvd-color-neutral-70: rgb(179,179,179);
-  --vvd-color-neutral-80: rgb(204,204,204);
-  --vvd-color-neutral-90: rgb(230,230,230);
-  --vvd-color-cta: rgb(178,123,242);
-  --vvd-color-on-cta: rgb(0,0,0);
-  --vvd-color-cta-10: rgb(38,4,77);
-  --vvd-color-cta-20: rgb(68,2,145);
-  --vvd-color-cta-30: rgb(100,5,209);
-  --vvd-color-cta-70: rgb(203,161,250);
-  --vvd-color-cta-80: rgb(220,193,252);
-  --vvd-color-cta-90: rgb(236,226,250);
-  --vvd-color-success: rgb(48,168,73);
-  --vvd-color-on-success: rgb(0,0,0);
-  --vvd-color-success-10: rgb(10,30,17);
-  --vvd-color-success-20: rgb(24,58,30);
-  --vvd-color-success-30: rgb(21,89,35);
-  --vvd-color-success-70: rgb(83,202,106);
-  --vvd-color-success-80: rgb(134,224,144);
-  --vvd-color-success-90: rgb(207,238,212);
-  --vvd-color-alert: rgb(247,89,89);
-  --vvd-color-on-alert: rgb(0,0,0);
-  --vvd-color-alert-10: rgb(62,0,4);
-  --vvd-color-alert-20: rgb(110,0,0);
-  --vvd-color-alert-30: rgb(159,2,2);
-  --vvd-color-alert-70: rgb(254,150,150);
-  --vvd-color-alert-80: rgb(255,187,187);
-  --vvd-color-alert-90: rgb(254,223,223);
-  --vvd-color-warning: rgb(224,121,2);
-  --vvd-color-on-warning: rgb(0,0,0);
-  --vvd-color-warning-10: rgb(42,21,2);
-  --vvd-color-warning-20: rgb(82,40,1);
-  --vvd-color-warning-30: rgb(128,56,7);
-  --vvd-color-warning-70: rgb(250,159,0);
-  --vvd-color-warning-80: rgb(255,195,33);
-  --vvd-color-warning-90: rgb(253,231,109);
-  --vvd-color-info: rgb(41,151,240);
-  --vvd-color-on-info: rgb(0,0,0);
-  --vvd-color-info-10: rgb(7,25,57);
-  --vvd-color-info-20: rgb(14,48,109);
-  --vvd-color-info-30: rgb(9,74,158);
-  --vvd-color-info-70: rgb(101,186,255);
-  --vvd-color-info-80: rgb(157,210,254);
-  --vvd-color-info-90: rgb(211,233,252);
-  --vvd-color-announcement: rgb(229,96,187);
-  --vvd-color-on-announcement: rgb(0,0,0);
-  --vvd-color-announcement-10: rgb(50,8,44);
-  --vvd-color-announcement-20: rgb(98,2,86);
-  --vvd-color-announcement-30: rgb(143,22,105);
-  --vvd-color-announcement-70: rgb(251,143,216);
-  --vvd-color-announcement-80: rgb(248,185,231);
-  --vvd-color-announcement-90: rgb(255,220,247);
-  --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));
-  --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));
-  --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));
-  --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));
-  --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));
-  --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));
-  --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));
+  --vvd-color-canvas: #000000;
+  --vvd-color-canvas-text: #ffffff;
+  --vvd-color-neutral-50: #1a1a1a;
+  --vvd-color-neutral-100: #333333;
+  --vvd-color-neutral-200: #4d4d4d;
+  --vvd-color-neutral-300: #666666;
+  --vvd-color-neutral-400: #757575;
+  --vvd-color-neutral-500: #929292;
+  --vvd-color-neutral-600: #b3b3b3;
+  --vvd-color-neutral-700: #cccccc;
+  --vvd-color-neutral-800: #E6E6E6;
+  --vvd-color-neutral-900: #F2F2F2;
+  --vvd-color-neutral-950: #ffffff;
+  --vvd-color-cta-50: #26044d;
+  --vvd-color-cta-100: #440291;
+  --vvd-color-cta-200: #6405d1;
+  --vvd-color-cta-300: #871eff;
+  --vvd-color-cta-400: #9941ff;
+  --vvd-color-cta-500: #b27bf2;
+  --vvd-color-cta-600: #cba1fa;
+  --vvd-color-cta-700: #dcc1fc;
+  --vvd-color-cta-800: #ece2fa;
+  --vvd-color-cta-900: #f5f0fd;
+  --vvd-color-warning-50: #2A1502;
+  --vvd-color-warning-100: #522801;
+  --vvd-color-warning-200: #803807;
+  --vvd-color-warning-300: #A64C03;
+  --vvd-color-warning-400: #be5702;
+  --vvd-color-warning-500: #e07902;
+  --vvd-color-warning-600: #fa9f00;
+  --vvd-color-warning-700: #FACC4B;
+  --vvd-color-warning-800: #FDEAA0;
+  --vvd-color-warning-900: #FDF5D4;
+  --vvd-color-information-50: #071939;
+  --vvd-color-information-100: #0e306d;
+  --vvd-color-information-200: #094a9e;
+  --vvd-color-information-300: #0e65c2;
+  --vvd-color-information-400: #0276d5;
+  --vvd-color-information-500: #2997f0;
+  --vvd-color-information-600: #65baff;
+  --vvd-color-information-700: #9dd2fe;
+  --vvd-color-information-800: #d3e9fc;
+  --vvd-color-information-900: #e8f4fb;
+  --vvd-color-announcement-50: #32082c;
+  --vvd-color-announcement-100: #620256;
+  --vvd-color-announcement-200: #8f1669;
+  --vvd-color-announcement-300: #bb1e89;
+  --vvd-color-announcement-400: #d6219c;
+  --vvd-color-announcement-500: #e560bb;
+  --vvd-color-announcement-600: #fb8fd8;
+  --vvd-color-announcement-700: #f8b9e7;
+  --vvd-color-announcement-800: #ffdcf7;
+  --vvd-color-announcement-900: #ffedfb;
+  --vvd-color-alert-50: #3e0004;
+  --vvd-color-alert-100: #6e0000;
+  --vvd-color-alert-200: #9f0202;
+  --vvd-color-alert-300: #cd0d0d;
+  --vvd-color-alert-400: #e61d1d;
+  --vvd-color-alert-500: #f75959;
+  --vvd-color-alert-600: #fe9696;
+  --vvd-color-alert-700: #ffbbbb;
+  --vvd-color-alert-800: #fedfdf;
+  --vvd-color-alert-900: #ffeef2;
+  --vvd-color-success-50: #0a1e11;
+  --vvd-color-success-100: #183a1e;
+  --vvd-color-success-200: #155923;
+  --vvd-color-success-300: #167629;
+  --vvd-color-success-400: #1c8731;
+  --vvd-color-success-500: #30a849;
+  --vvd-color-success-600: #53ca6a;
+  --vvd-color-success-700: #86e090;
+  --vvd-color-success-800: #cfeed4;
+  --vvd-color-success-900: #e1f8e5;
+  --vvd-color-surface-0dp: #0d0d0d;
+  --vvd-color-surface-2dp: linear-gradient(#ffffff0f, #ffffff0f), #0d0d0d;
+  --vvd-color-surface-4dp: linear-gradient(#ffffff14, #ffffff14), #0d0d0d;
+  --vvd-color-surface-8dp: linear-gradient(#ffffff1a, #ffffff1a), #0d0d0d;
+  --vvd-color-surface-12dp: linear-gradient(#ffffff1f, #ffffff1f), #0d0d0d;
+  --vvd-color-surface-16dp: linear-gradient(#ffffff24, #ffffff24), #0d0d0d;
+  --vvd-color-surface-24dp: linear-gradient(#ffffff29, #ffffff29), #0d0d0d;
+  --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);
+  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #00000040) drop-shadow(0px 1px 2px #00000040) drop-shadow(0px 2px 1px #00000040);
+  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #00000040) drop-shadow(0px 2px 4px #00000040) drop-shadow(0px 4px 4px #00000040);
+  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #00000040) drop-shadow(0px 8px 8px #00000040) drop-shadow(0px 4px 4px #00000040);
+  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #00000040) drop-shadow(0px 12px 16px #00000040) drop-shadow(0px 6px 8px #00000040);
+  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #00000040) drop-shadow(0px 16px 24px #00000040) drop-shadow(0px 8px 12px #00000040);
+  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000040) drop-shadow(0px 24px 32px #00000040) drop-shadow(0px 12px 16px #00000040);
 }
 @supports (color-scheme: dark) {
   :root, .vvd-theme-main, ::part(vvd-theme-main) {
@@ -101,100 +102,93 @@
 }
 
 .vvd-theme-alternate, ::part(vvd-theme-alternate) {
-  --vvd-sizing-4px-scale-3xs: 8px;
-  --vvd-sizing-4px-scale-2xs: 12px;
-  --vvd-sizing-4px-scale-xs: 16px;
-  --vvd-sizing-4px-scale-sm: 20px;
-  --vvd-sizing-4px-scale-md: 24px;
-  --vvd-sizing-4px-scale-lg: 28px;
-  --vvd-sizing-4px-scale-xl: 32px;
-  --vvd-sizing-4px-scale-2xl: 36px;
-  --vvd-sizing-4px-scale-3xl: 40px;
-  --vvd-sizing-8px-scale-3xs: 8px;
-  --vvd-sizing-8px-scale-2xs: 16px;
-  --vvd-sizing-8px-scale-xs: 24px;
-  --vvd-sizing-8px-scale-sm: 32px;
-  --vvd-sizing-8px-scale-md: 40px;
-  --vvd-sizing-8px-scale-lg: 48px;
-  --vvd-sizing-8px-scale-xl: 56px;
-  --vvd-sizing-8px-scale-2xl: 64px;
-  --vvd-sizing-8px-scale-3xl: 72px;
-  --vvd-color-surface-0dp: rgba(255, 255, 255, 1);
-  --vvd-color-surface-2dp: rgba(255, 255, 255, 1);
-  --vvd-color-surface-4dp: rgba(255, 255, 255, 1);
-  --vvd-color-surface-8dp: rgba(255, 255, 255, 1);
-  --vvd-color-surface-12dp: rgba(255, 255, 255, 1);
-  --vvd-color-surface-16dp: rgba(255, 255, 255, 1);
-  --vvd-color-surface-24dp: rgba(255, 255, 255, 1);
-  --vvd-color-canvas: rgb(255,255,255);
-  --vvd-color-on-canvas: rgb(0,0,0);
-  --vvd-color-primary: rgb(0,0,0);
-  --vvd-color-on-primary: rgb(255,255,255);
-  --vvd-color-neutral: rgb(117,117,117);
-  --vvd-color-on-neutral: rgb(255,255,255);
-  --vvd-color-neutral-10: rgb(242,242,242);
-  --vvd-color-neutral-20: rgb(230,230,230);
-  --vvd-color-neutral-30: rgb(204,204,204);
-  --vvd-color-neutral-40: rgb(179,179,179);
-  --vvd-color-neutral-50: rgb(146,146,146);
-  --vvd-color-neutral-70: rgb(102,102,102);
-  --vvd-color-neutral-80: rgb(77,77,77);
-  --vvd-color-neutral-90: rgb(51,51,51);
-  --vvd-color-cta: rgb(153,65,255);
-  --vvd-color-on-cta: rgb(255,255,255);
-  --vvd-color-cta-10: rgb(245,240,253);
-  --vvd-color-cta-20: rgb(236,226,250);
-  --vvd-color-cta-30: rgb(220,193,252);
-  --vvd-color-cta-70: rgb(135,30,255);
-  --vvd-color-cta-80: rgb(100,5,209);
-  --vvd-color-cta-90: rgb(68,2,145);
-  --vvd-color-success: rgb(28,135,49);
-  --vvd-color-on-success: rgb(255,255,255);
-  --vvd-color-success-10: rgb(225,248,229);
-  --vvd-color-success-20: rgb(207,238,212);
-  --vvd-color-success-30: rgb(134,224,144);
-  --vvd-color-success-70: rgb(22,118,41);
-  --vvd-color-success-80: rgb(21,89,35);
-  --vvd-color-success-90: rgb(24,58,30);
-  --vvd-color-alert: rgb(230,29,29);
-  --vvd-color-on-alert: rgb(255,255,255);
-  --vvd-color-alert-10: rgb(255,238,242);
-  --vvd-color-alert-20: rgb(254,223,223);
-  --vvd-color-alert-30: rgb(255,187,187);
-  --vvd-color-alert-70: rgb(205,13,13);
-  --vvd-color-alert-80: rgb(159,2,2);
-  --vvd-color-alert-90: rgb(110,0,0);
-  --vvd-color-warning: rgb(250,159,0);
-  --vvd-color-on-warning: rgb(0,0,0);
-  --vvd-color-warning-10: rgb(252,245,167);
-  --vvd-color-warning-20: rgb(253,231,109);
-  --vvd-color-warning-30: rgb(255,195,33);
-  --vvd-color-warning-70: rgb(166,76,3);
-  --vvd-color-warning-80: rgb(128,56,7);
-  --vvd-color-warning-90: rgb(82,40,1);
-  --vvd-color-info: rgb(2,118,213);
-  --vvd-color-on-info: rgb(255,255,255);
-  --vvd-color-info-10: rgb(232,244,251);
-  --vvd-color-info-20: rgb(211,233,252);
-  --vvd-color-info-30: rgb(157,210,254);
-  --vvd-color-info-70: rgb(14,101,194);
-  --vvd-color-info-80: rgb(9,74,158);
-  --vvd-color-info-90: rgb(14,48,109);
-  --vvd-color-announcement: rgb(214,33,156);
-  --vvd-color-on-announcement: rgb(255,255,255);
-  --vvd-color-announcement-10: rgb(255,237,251);
-  --vvd-color-announcement-20: rgb(255,220,247);
-  --vvd-color-announcement-30: rgb(248,185,231);
-  --vvd-color-announcement-70: rgb(187,30,137);
-  --vvd-color-announcement-80: rgb(143,22,105);
-  --vvd-color-announcement-90: rgb(98,2,86);
-  --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));
-  --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));
-  --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));
-  --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));
-  --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));
-  --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));
-  --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));
+  --vvd-color-canvas: #ffffff;
+  --vvd-color-canvas-text: #000000;
+  --vvd-color-neutral-50: #F2F2F2;
+  --vvd-color-neutral-100: #E6E6E6;
+  --vvd-color-neutral-200: #cccccc;
+  --vvd-color-neutral-300: #b3b3b3;
+  --vvd-color-neutral-400: #929292;
+  --vvd-color-neutral-500: #757575;
+  --vvd-color-neutral-600: #666666;
+  --vvd-color-neutral-700: #4d4d4d;
+  --vvd-color-neutral-800: #333333;
+  --vvd-color-neutral-900: #1a1a1a;
+  --vvd-color-neutral-950: #0d0d0d;
+  --vvd-color-cta-50: #f5f0fd;
+  --vvd-color-cta-100: #ece2fa;
+  --vvd-color-cta-200: #dcc1fc;
+  --vvd-color-cta-300: #cba1fa;
+  --vvd-color-cta-400: #b27bf2;
+  --vvd-color-cta-500: #9941ff;
+  --vvd-color-cta-600: #871eff;
+  --vvd-color-cta-700: #6405d1;
+  --vvd-color-cta-800: #440291;
+  --vvd-color-cta-900: #26044d;
+  --vvd-color-warning-50: #FDF5D4;
+  --vvd-color-warning-100: #FDEAA0;
+  --vvd-color-warning-200: #FACC4B;
+  --vvd-color-warning-300: #fa9f00;
+  --vvd-color-warning-400: #e07902;
+  --vvd-color-warning-500: #be5702;
+  --vvd-color-warning-600: #A64C03;
+  --vvd-color-warning-700: #893000;
+  --vvd-color-warning-800: #522801;
+  --vvd-color-warning-900: #2A1502;
+  --vvd-color-information-50: #e8f4fb;
+  --vvd-color-information-100: #d3e9fc;
+  --vvd-color-information-200: #9dd2fe;
+  --vvd-color-information-300: #65baff;
+  --vvd-color-information-400: #2997f0;
+  --vvd-color-information-500: #0276d5;
+  --vvd-color-information-600: #0e65c2;
+  --vvd-color-information-700: #094a9e;
+  --vvd-color-information-800: #0e306d;
+  --vvd-color-information-900: #071939;
+  --vvd-color-announcement-50: #ffedfb;
+  --vvd-color-announcement-100: #ffdcf7;
+  --vvd-color-announcement-200: #f8b9e7;
+  --vvd-color-announcement-300: #fb8fd8;
+  --vvd-color-announcement-400: #e560bb;
+  --vvd-color-announcement-500: #d6219c;
+  --vvd-color-announcement-600: #bb1e89;
+  --vvd-color-announcement-700: #8f1669;
+  --vvd-color-announcement-800: #620256;
+  --vvd-color-announcement-900: #32082c;
+  --vvd-color-alert-50: #ffeef2;
+  --vvd-color-alert-100: #fedfdf;
+  --vvd-color-alert-200: #ffbbbb;
+  --vvd-color-alert-300: #fe9696;
+  --vvd-color-alert-400: #f75959;
+  --vvd-color-alert-500: #e61d1d;
+  --vvd-color-alert-600: #cd0d0d;
+  --vvd-color-alert-700: #9f0202;
+  --vvd-color-alert-800: #6e0000;
+  --vvd-color-alert-900: #3e0004;
+  --vvd-color-success-50: #e1f8e5;
+  --vvd-color-success-100: #cfeed4;
+  --vvd-color-success-200: #86e090;
+  --vvd-color-success-300: #53ca6a;
+  --vvd-color-success-400: #30a849;
+  --vvd-color-success-500: #1c8731;
+  --vvd-color-success-600: #167629;
+  --vvd-color-success-700: #155923;
+  --vvd-color-success-800: #183a1e;
+  --vvd-color-success-900: #0a1e11;
+  --vvd-color-surface-0dp: #ffffff;
+  --vvd-color-surface-2dp: #ffffff;
+  --vvd-color-surface-4dp: #ffffff;
+  --vvd-color-surface-8dp: #ffffff;
+  --vvd-color-surface-12dp: #ffffff;
+  --vvd-color-surface-16dp: #ffffff;
+  --vvd-color-surface-24dp: #ffffff;
+  --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);
+  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #0000001a) drop-shadow(0px 1px 2px #0000000d) drop-shadow(0px 2px 1px #0000000d);
+  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #0000001a) drop-shadow(0px 2px 4px #0000000d) drop-shadow(0px 4px 2px #0000000d);
+  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #0000001a) drop-shadow(0px 8px 8px #0000000d) drop-shadow(0px 4px 4px #0000000d);
+  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #0000001a) drop-shadow(0px 12px 16px #0000000d) drop-shadow(0px 6px 8px #0000000d);
+  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #0000001a) drop-shadow(0px 16px 24px #0000000d) drop-shadow(0px 8px 12px #0000000d);
+  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000033) drop-shadow(0px 24px 32px #0000000d) drop-shadow(0px 12px 16px #0000000d);
 }
 @supports (color-scheme: light) {
   .vvd-theme-alternate, ::part(vvd-theme-alternate) {