@volverjs/style 0.1.2-beta.10 → 0.1.2-beta.11

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 (18) hide show
  1. package/dist/components/vv-alert.css +1 -0
  2. package/dist/components.css +1 -1
  3. package/dist/themes/dark/components.css +1 -1
  4. package/dist/themes/dark/volver.css +1 -1
  5. package/dist/volver.css +1 -1
  6. package/package.json +3 -1
  7. package/src/_config.scss +8 -7
  8. package/src/components/index.scss +8 -7
  9. package/src/components/vv-alert.scss +12 -0
  10. package/src/settings/_index.scss +8 -7
  11. package/src/settings/components/_vv-alert.scss +148 -0
  12. package/src/themes/dark/components/_vv-alert.scss +22 -0
  13. package/src/themes/dark/components/_vv-button.scss +1 -3
  14. package/src/themes/dark/components/_vv-input-checkbox.scss +1 -3
  15. package/src/themes/dark/components/index.scss +1 -0
  16. package/src/themes/dark/settings/_index.scss +1 -0
  17. package/src/themes/dark/settings/components/_vv-alert.scss +80 -0
  18. package/src/tools/_mixins.scss +10 -7
package/dist/themes/dark/components.css CHANGED
@@ -1 +1 @@
1
- @media (prefers-color-scheme: dark){:where(:host,:root,.theme):not(.theme--light){--vv-button-modifier-primary-border-color: var(--color-gray-lighten-3);--vv-button-modifier-primary-background: var(--color-gray-lighten-3);--vv-button-modifier-primary-state-focus-visible-outline: var(--spacing-px) solid var(--color-gray);--vv-button-modifier-primary-state-hover-background: var(--color-gray-lighten-2);--vv-button-modifier-primary-state-hover-border-color: var(--color-gray-lighten-2);--vv-button-modifier-primary-state-active-background: var(--color-gray-lighten-1);--vv-button-modifier-primary-state-active-border-color: var(--color-gray-lighten-1);--vv-button-modifier-secondary-border-color: var(--color-gray-darken-1);--vv-button-modifier-secondary-background: var(--color-gray-darken-3);--vv-button-modifier-secondary-text-shadow: 0 1px 0 var(--color-gray-darken-5);--vv-button-modifier-secondary-state-focus-visible-outline: var(--spacing-px) solid var(--color-gray);--vv-button-modifier-secondary-state-hover-background: var(--color-gray-darken-4);--vv-button-modifier-secondary-state-active-background: var(--color-gray-darken-5);--vv-button-modifier-ghost-background: transparent;--vv-button-modifier-ghost-border-color: transparent;--vv-button-modifier-ghost-color: var(--color-gray-lighten-2);--vv-button-modifier-ghost-text-shadow: 0 1px 0 var(--color-gray-darken-4);--vv-button-modifier-ghost-state-focus-visible-outline: var(--spacing-px) solid var(--color-gray);--vv-button-modifier-ghost-state-focus-visible-outline-offset: 0;--vv-button-modifier-ghost-state-hover-background: var(--color-gray-darken-4);--vv-button-modifier-ghost-state-active-background: var(--color-gray-darken-5);--vv-button-modifier-text-text-shadow: 0 1px 0 var(--color-gray-darken-5)}}:where(.theme.theme--dark){--vv-button-modifier-primary-border-color: var(--color-gray-lighten-3);--vv-button-modifier-primary-background: var(--color-gray-lighten-3);--vv-button-modifier-primary-state-focus-visible-outline: var(--spacing-px) solid var(--color-gray);--vv-button-modifier-primary-state-hover-background: var(--color-gray-lighten-2);--vv-button-modifier-primary-state-hover-border-color: var(--color-gray-lighten-2);--vv-button-modifier-primary-state-active-background: var(--color-gray-lighten-1);--vv-button-modifier-primary-state-active-border-color: var(--color-gray-lighten-1);--vv-button-modifier-secondary-border-color: var(--color-gray-darken-1);--vv-button-modifier-secondary-background: var(--color-gray-darken-3);--vv-button-modifier-secondary-text-shadow: 0 1px 0 var(--color-gray-darken-5);--vv-button-modifier-secondary-state-focus-visible-outline: var(--spacing-px) solid var(--color-gray);--vv-button-modifier-secondary-state-hover-background: var(--color-gray-darken-4);--vv-button-modifier-secondary-state-active-background: var(--color-gray-darken-5);--vv-button-modifier-ghost-background: transparent;--vv-button-modifier-ghost-border-color: transparent;--vv-button-modifier-ghost-color: var(--color-gray-lighten-2);--vv-button-modifier-ghost-text-shadow: 0 1px 0 var(--color-gray-darken-4);--vv-button-modifier-ghost-state-focus-visible-outline: var(--spacing-px) solid var(--color-gray);--vv-button-modifier-ghost-state-focus-visible-outline-offset: 0;--vv-button-modifier-ghost-state-hover-background: var(--color-gray-darken-4);--vv-button-modifier-ghost-state-active-background: var(--color-gray-darken-5);--vv-button-modifier-text-text-shadow: 0 1px 0 var(--color-gray-darken-5)}@media (prefers-color-scheme: dark){:where(:host,:root,.theme):not(.theme--light){--vv-input-checkbox-element-input-state-checked-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(211, 217, 222)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--vv-input-checkbox-modifier-partial-element-input-state-checked-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(211, 217, 222)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E")}}:where(.theme.theme--dark){--vv-input-checkbox-element-input-state-checked-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(211, 217, 222)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--vv-input-checkbox-modifier-partial-element-input-state-checked-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(211, 217, 222)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E")}
1
+ @media (prefers-color-scheme: dark){:where(:host,:root,.theme):not(.theme--light){--vv-alert-modifier-success-background-color: hsl(var(--color-success-hue), var(--color-success-saturation), 10%);--vv-alert-modifier-success-element-icon-color: var(--color-success);--vv-alert-modifier-success-element-title-color: var(--color-success);--vv-alert-modifier-danger-background-color: hsl(var(--color-danger-hue), var(--color-danger-saturation), 10%);--vv-alert-modifier-danger-element-icon-color: var(--color-danger);--vv-alert-modifier-danger-element-title-color: var(--color-danger);--vv-alert-modifier-warning-background-color: hsl(var(--color-warning-hue), var(--color-warning-saturation), 10%);--vv-alert-modifier-warning-element-icon-color: var(--color-warning);--vv-alert-modifier-warning-element-title-color: var(--color-warning);--vv-alert-modifier-info-background-color: hsl(var(--color-info-hue), var(--color-info-saturation), 10%);--vv-alert-modifier-info-element-icon-color: var(--color-info);--vv-alert-modifier-info-element-title-color: var(--color-info);--vv-alert-modifier-accent-background-color: hsl(var(--color-accent-hue), var(--color-accent-saturation), 10%);--vv-alert-modifier-accent-element-icon-color: var(--color-accent);--vv-alert-modifier-accent-element-title-color: var(--color-accent);--vv-alert-modifier-brand-background-color: hsl(var(--color-brand-hue), var(--color-brand-saturation), 10%);--vv-alert-modifier-brand-element-icon-color: var(--color-brand);--vv-alert-modifier-brand-element-title-color: var(--color-brand)}}:where(.theme.theme--dark){--vv-alert-modifier-success-background-color: hsl(var(--color-success-hue), var(--color-success-saturation), 10%);--vv-alert-modifier-success-element-icon-color: var(--color-success);--vv-alert-modifier-success-element-title-color: var(--color-success);--vv-alert-modifier-danger-background-color: hsl(var(--color-danger-hue), var(--color-danger-saturation), 10%);--vv-alert-modifier-danger-element-icon-color: var(--color-danger);--vv-alert-modifier-danger-element-title-color: var(--color-danger);--vv-alert-modifier-warning-background-color: hsl(var(--color-warning-hue), var(--color-warning-saturation), 10%);--vv-alert-modifier-warning-element-icon-color: var(--color-warning);--vv-alert-modifier-warning-element-title-color: var(--color-warning);--vv-alert-modifier-info-background-color: hsl(var(--color-info-hue), var(--color-info-saturation), 10%);--vv-alert-modifier-info-element-icon-color: var(--color-info);--vv-alert-modifier-info-element-title-color: var(--color-info);--vv-alert-modifier-accent-background-color: hsl(var(--color-accent-hue), var(--color-accent-saturation), 10%);--vv-alert-modifier-accent-element-icon-color: var(--color-accent);--vv-alert-modifier-accent-element-title-color: var(--color-accent);--vv-alert-modifier-brand-background-color: hsl(var(--color-brand-hue), var(--color-brand-saturation), 10%);--vv-alert-modifier-brand-element-icon-color: var(--color-brand);--vv-alert-modifier-brand-element-title-color: var(--color-brand)}@media (prefers-color-scheme: dark){:where(:host,:root,.theme):not(.theme--light){--vv-button-modifier-primary-border-color: var(--color-gray-lighten-3);--vv-button-modifier-primary-background: var(--color-gray-lighten-3);--vv-button-modifier-primary-state-focus-visible-outline: var(--spacing-px) solid var(--color-gray);--vv-button-modifier-primary-state-hover-background: var(--color-gray-lighten-2);--vv-button-modifier-primary-state-hover-border-color: var(--color-gray-lighten-2);--vv-button-modifier-primary-state-active-background: var(--color-gray-lighten-1);--vv-button-modifier-primary-state-active-border-color: var(--color-gray-lighten-1);--vv-button-modifier-secondary-border-color: var(--color-gray-darken-1);--vv-button-modifier-secondary-background: var(--color-gray-darken-3);--vv-button-modifier-secondary-text-shadow: 0 1px 0 var(--color-gray-darken-5);--vv-button-modifier-secondary-state-focus-visible-outline: var(--spacing-px) solid var(--color-gray);--vv-button-modifier-secondary-state-hover-background: var(--color-gray-darken-4);--vv-button-modifier-secondary-state-active-background: var(--color-gray-darken-5);--vv-button-modifier-ghost-background: transparent;--vv-button-modifier-ghost-border-color: transparent;--vv-button-modifier-ghost-color: var(--color-gray-lighten-2);--vv-button-modifier-ghost-text-shadow: 0 1px 0 var(--color-gray-darken-4);--vv-button-modifier-ghost-state-focus-visible-outline: var(--spacing-px) solid var(--color-gray);--vv-button-modifier-ghost-state-focus-visible-outline-offset: 0;--vv-button-modifier-ghost-state-hover-background: var(--color-gray-darken-4);--vv-button-modifier-ghost-state-active-background: var(--color-gray-darken-5);--vv-button-modifier-text-text-shadow: 0 1px 0 var(--color-gray-darken-5)}}:where(.theme.theme--dark){--vv-button-modifier-primary-border-color: var(--color-gray-lighten-3);--vv-button-modifier-primary-background: var(--color-gray-lighten-3);--vv-button-modifier-primary-state-focus-visible-outline: var(--spacing-px) solid var(--color-gray);--vv-button-modifier-primary-state-hover-background: var(--color-gray-lighten-2);--vv-button-modifier-primary-state-hover-border-color: var(--color-gray-lighten-2);--vv-button-modifier-primary-state-active-background: var(--color-gray-lighten-1);--vv-button-modifier-primary-state-active-border-color: var(--color-gray-lighten-1);--vv-button-modifier-secondary-border-color: var(--color-gray-darken-1);--vv-button-modifier-secondary-background: var(--color-gray-darken-3);--vv-button-modifier-secondary-text-shadow: 0 1px 0 var(--color-gray-darken-5);--vv-button-modifier-secondary-state-focus-visible-outline: var(--spacing-px) solid var(--color-gray);--vv-button-modifier-secondary-state-hover-background: var(--color-gray-darken-4);--vv-button-modifier-secondary-state-active-background: var(--color-gray-darken-5);--vv-button-modifier-ghost-background: transparent;--vv-button-modifier-ghost-border-color: transparent;--vv-button-modifier-ghost-color: var(--color-gray-lighten-2);--vv-button-modifier-ghost-text-shadow: 0 1px 0 var(--color-gray-darken-4);--vv-button-modifier-ghost-state-focus-visible-outline: var(--spacing-px) solid var(--color-gray);--vv-button-modifier-ghost-state-focus-visible-outline-offset: 0;--vv-button-modifier-ghost-state-hover-background: var(--color-gray-darken-4);--vv-button-modifier-ghost-state-active-background: var(--color-gray-darken-5);--vv-button-modifier-text-text-shadow: 0 1px 0 var(--color-gray-darken-5)}@media (prefers-color-scheme: dark){:where(:host,:root,.theme):not(.theme--light){--vv-input-checkbox-element-input-state-checked-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(211, 217, 222)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--vv-input-checkbox-modifier-partial-element-input-state-checked-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(211, 217, 222)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E")}}:where(.theme.theme--dark){--vv-input-checkbox-element-input-state-checked-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(211, 217, 222)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--vv-input-checkbox-modifier-partial-element-input-state-checked-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(211, 217, 222)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E")}
package/dist/themes/dark/volver.css CHANGED
@@ -1 +1 @@
1
- @media (prefers-color-scheme: dark){:where(:host,:root,.theme):not(.theme--light){--bg-none: none;--bg-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(211, 217, 222)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--bg-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(51 65 85 / 0.25)'%3E%3Cpath d='M0 .5H31.5V32'/%3E%3C/svg%3E");--bg-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(211, 217, 222)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--bg-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(211, 217, 222)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E")}}:where(.theme.theme--dark){--bg-none: none;--bg-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(211, 217, 222)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--bg-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(51 65 85 / 0.25)'%3E%3Cpath d='M0 .5H31.5V32'/%3E%3C/svg%3E");--bg-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(211, 217, 222)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--bg-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(211, 217, 222)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E")}@media (prefers-color-scheme: dark){:where(:host,:root,.theme):not(.theme--light){--color-scheme: dark;--color-word-hue: 209.8378378378deg;--color-word-saturation: 15%;--color-word-lightness: 85%;--color-word: hsla(var(--color-word-hue) var(--color-word-saturation) var(--color-word-lightness)/1);--color-word-1: hsl(var(--color-word-hue), var(--color-word-saturation), 72.25%);--color-word-2: hsl(var(--color-word-hue), var(--color-word-saturation), 59.5%);--color-word-3: hsl(var(--color-word-hue), var(--color-word-saturation), 46.75%);--color-word-4: hsl(var(--color-word-hue), var(--color-word-saturation), 34%);--color-word-5: hsl(var(--color-word-hue), var(--color-word-saturation), 21.25%);--color-surface-hue: 209.8378378378deg;--color-surface-saturation: 10%;--color-surface-lightness: 5%;--color-surface: hsla(var(--color-surface-hue) var(--color-surface-saturation) var(--color-surface-lightness)/1);--color-surface-1: hsl(var(--color-surface-hue), var(--color-surface-saturation), 9.75%);--color-surface-2: hsl(var(--color-surface-hue), var(--color-surface-saturation), 14.5%);--color-surface-3: hsl(var(--color-surface-hue), var(--color-surface-saturation), 19.25%);--color-surface-4: hsl(var(--color-surface-hue), var(--color-surface-saturation), 24%);--color-surface-5: hsl(var(--color-surface-hue), var(--color-surface-saturation), 28.75%);--color-alpha-hue: 0deg;--color-alpha-saturation: 0%;--color-alpha-lightness: 100%;--color-alpha: hsla(var(--color-alpha-hue) var(--color-alpha-saturation) var(--color-alpha-lightness)/0);--color-alpha-1: hsla(var(--color-alpha-hue) var(--color-alpha-saturation) var(--color-alpha-lightness)/5%);--color-alpha-2: hsla(var(--color-alpha-hue) var(--color-alpha-saturation) var(--color-alpha-lightness)/10%);--color-alpha-3: hsla(var(--color-alpha-hue) var(--color-alpha-saturation) var(--color-alpha-lightness)/15%);--color-alpha-4: hsla(var(--color-alpha-hue) var(--color-alpha-saturation) var(--color-alpha-lightness)/20%);--color-alpha-5: hsla(var(--color-alpha-hue) var(--color-alpha-saturation) var(--color-alpha-lightness)/25%)}}:where(.theme.theme--dark){--color-scheme: dark;--color-word-hue: 209.8378378378deg;--color-word-saturation: 15%;--color-word-lightness: 85%;--color-word: hsla(var(--color-word-hue) var(--color-word-saturation) var(--color-word-lightness)/1);--color-word-1: hsl(var(--color-word-hue), var(--color-word-saturation), 72.25%);--color-word-2: hsl(var(--color-word-hue), var(--color-word-saturation), 59.5%);--color-word-3: hsl(var(--color-word-hue), var(--color-word-saturation), 46.75%);--color-word-4: hsl(var(--color-word-hue), var(--color-word-saturation), 34%);--color-word-5: hsl(var(--color-word-hue), var(--color-word-saturation), 21.25%);--color-surface-hue: 209.8378378378deg;--color-surface-saturation: 10%;--color-surface-lightness: 5%;--color-surface: hsla(var(--color-surface-hue) var(--color-surface-saturation) var(--color-surface-lightness)/1);--color-surface-1: hsl(var(--color-surface-hue), var(--color-surface-saturation), 9.75%);--color-surface-2: hsl(var(--color-surface-hue), var(--color-surface-saturation), 14.5%);--color-surface-3: hsl(var(--color-surface-hue), var(--color-surface-saturation), 19.25%);--color-surface-4: hsl(var(--color-surface-hue), var(--color-surface-saturation), 24%);--color-surface-5: hsl(var(--color-surface-hue), var(--color-surface-saturation), 28.75%);--color-alpha-hue: 0deg;--color-alpha-saturation: 0%;--color-alpha-lightness: 100%;--color-alpha: hsla(var(--color-alpha-hue) var(--color-alpha-saturation) var(--color-alpha-lightness)/0);--color-alpha-1: hsla(var(--color-alpha-hue) var(--color-alpha-saturation) var(--color-alpha-lightness)/5%);--color-alpha-2: hsla(var(--color-alpha-hue) var(--color-alpha-saturation) var(--color-alpha-lightness)/10%);--color-alpha-3: hsla(var(--color-alpha-hue) var(--color-alpha-saturation) var(--color-alpha-lightness)/15%);--color-alpha-4: hsla(var(--color-alpha-hue) var(--color-alpha-saturation) var(--color-alpha-lightness)/20%);--color-alpha-5: hsla(var(--color-alpha-hue) var(--color-alpha-saturation) var(--color-alpha-lightness)/25%)}@media (prefers-color-scheme: dark){:where(:host,:root,.theme):not(.theme--light){--vv-button-modifier-primary-border-color: var(--color-gray-lighten-3);--vv-button-modifier-primary-background: var(--color-gray-lighten-3);--vv-button-modifier-primary-state-focus-visible-outline: var(--spacing-px) solid var(--color-gray);--vv-button-modifier-primary-state-hover-background: var(--color-gray-lighten-2);--vv-button-modifier-primary-state-hover-border-color: var(--color-gray-lighten-2);--vv-button-modifier-primary-state-active-background: var(--color-gray-lighten-1);--vv-button-modifier-primary-state-active-border-color: var(--color-gray-lighten-1);--vv-button-modifier-secondary-border-color: var(--color-gray-darken-1);--vv-button-modifier-secondary-background: var(--color-gray-darken-3);--vv-button-modifier-secondary-text-shadow: 0 1px 0 var(--color-gray-darken-5);--vv-button-modifier-secondary-state-focus-visible-outline: var(--spacing-px) solid var(--color-gray);--vv-button-modifier-secondary-state-hover-background: var(--color-gray-darken-4);--vv-button-modifier-secondary-state-active-background: var(--color-gray-darken-5);--vv-button-modifier-ghost-background: transparent;--vv-button-modifier-ghost-border-color: transparent;--vv-button-modifier-ghost-color: var(--color-gray-lighten-2);--vv-button-modifier-ghost-text-shadow: 0 1px 0 var(--color-gray-darken-4);--vv-button-modifier-ghost-state-focus-visible-outline: var(--spacing-px) solid var(--color-gray);--vv-button-modifier-ghost-state-focus-visible-outline-offset: 0;--vv-button-modifier-ghost-state-hover-background: var(--color-gray-darken-4);--vv-button-modifier-ghost-state-active-background: var(--color-gray-darken-5);--vv-button-modifier-text-text-shadow: 0 1px 0 var(--color-gray-darken-5)}}:where(.theme.theme--dark){--vv-button-modifier-primary-border-color: var(--color-gray-lighten-3);--vv-button-modifier-primary-background: var(--color-gray-lighten-3);--vv-button-modifier-primary-state-focus-visible-outline: var(--spacing-px) solid var(--color-gray);--vv-button-modifier-primary-state-hover-background: var(--color-gray-lighten-2);--vv-button-modifier-primary-state-hover-border-color: var(--color-gray-lighten-2);--vv-button-modifier-primary-state-active-background: var(--color-gray-lighten-1);--vv-button-modifier-primary-state-active-border-color: var(--color-gray-lighten-1);--vv-button-modifier-secondary-border-color: var(--color-gray-darken-1);--vv-button-modifier-secondary-background: var(--color-gray-darken-3);--vv-button-modifier-secondary-text-shadow: 0 1px 0 var(--color-gray-darken-5);--vv-button-modifier-secondary-state-focus-visible-outline: var(--spacing-px) solid var(--color-gray);--vv-button-modifier-secondary-state-hover-background: var(--color-gray-darken-4);--vv-button-modifier-secondary-state-active-background: var(--color-gray-darken-5);--vv-button-modifier-ghost-background: transparent;--vv-button-modifier-ghost-border-color: transparent;--vv-button-modifier-ghost-color: var(--color-gray-lighten-2);--vv-button-modifier-ghost-text-shadow: 0 1px 0 var(--color-gray-darken-4);--vv-button-modifier-ghost-state-focus-visible-outline: var(--spacing-px) solid var(--color-gray);--vv-button-modifier-ghost-state-focus-visible-outline-offset: 0;--vv-button-modifier-ghost-state-hover-background: var(--color-gray-darken-4);--vv-button-modifier-ghost-state-active-background: var(--color-gray-darken-5);--vv-button-modifier-text-text-shadow: 0 1px 0 var(--color-gray-darken-5)}@media (prefers-color-scheme: dark){:where(:host,:root,.theme):not(.theme--light){--vv-input-checkbox-element-input-state-checked-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(211, 217, 222)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--vv-input-checkbox-modifier-partial-element-input-state-checked-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(211, 217, 222)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E")}}:where(.theme.theme--dark){--vv-input-checkbox-element-input-state-checked-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(211, 217, 222)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--vv-input-checkbox-modifier-partial-element-input-state-checked-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(211, 217, 222)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E")}
1
+ @media (prefers-color-scheme: dark){:where(:host,:root,.theme):not(.theme--light){--bg-none: none;--bg-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(211, 217, 222)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--bg-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(51 65 85 / 0.25)'%3E%3Cpath d='M0 .5H31.5V32'/%3E%3C/svg%3E");--bg-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(211, 217, 222)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--bg-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(211, 217, 222)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E")}}:where(.theme.theme--dark){--bg-none: none;--bg-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(211, 217, 222)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--bg-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(51 65 85 / 0.25)'%3E%3Cpath d='M0 .5H31.5V32'/%3E%3C/svg%3E");--bg-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(211, 217, 222)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--bg-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(211, 217, 222)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E")}@media (prefers-color-scheme: dark){:where(:host,:root,.theme):not(.theme--light){--color-scheme: dark;--color-word-hue: 209.8378378378deg;--color-word-saturation: 15%;--color-word-lightness: 85%;--color-word: hsla(var(--color-word-hue) var(--color-word-saturation) var(--color-word-lightness)/1);--color-word-1: hsl(var(--color-word-hue), var(--color-word-saturation), 72.25%);--color-word-2: hsl(var(--color-word-hue), var(--color-word-saturation), 59.5%);--color-word-3: hsl(var(--color-word-hue), var(--color-word-saturation), 46.75%);--color-word-4: hsl(var(--color-word-hue), var(--color-word-saturation), 34%);--color-word-5: hsl(var(--color-word-hue), var(--color-word-saturation), 21.25%);--color-surface-hue: 209.8378378378deg;--color-surface-saturation: 10%;--color-surface-lightness: 5%;--color-surface: hsla(var(--color-surface-hue) var(--color-surface-saturation) var(--color-surface-lightness)/1);--color-surface-1: hsl(var(--color-surface-hue), var(--color-surface-saturation), 9.75%);--color-surface-2: hsl(var(--color-surface-hue), var(--color-surface-saturation), 14.5%);--color-surface-3: hsl(var(--color-surface-hue), var(--color-surface-saturation), 19.25%);--color-surface-4: hsl(var(--color-surface-hue), var(--color-surface-saturation), 24%);--color-surface-5: hsl(var(--color-surface-hue), var(--color-surface-saturation), 28.75%);--color-alpha-hue: 0deg;--color-alpha-saturation: 0%;--color-alpha-lightness: 100%;--color-alpha: hsla(var(--color-alpha-hue) var(--color-alpha-saturation) var(--color-alpha-lightness)/0);--color-alpha-1: hsla(var(--color-alpha-hue) var(--color-alpha-saturation) var(--color-alpha-lightness)/5%);--color-alpha-2: hsla(var(--color-alpha-hue) var(--color-alpha-saturation) var(--color-alpha-lightness)/10%);--color-alpha-3: hsla(var(--color-alpha-hue) var(--color-alpha-saturation) var(--color-alpha-lightness)/15%);--color-alpha-4: hsla(var(--color-alpha-hue) var(--color-alpha-saturation) var(--color-alpha-lightness)/20%);--color-alpha-5: hsla(var(--color-alpha-hue) var(--color-alpha-saturation) var(--color-alpha-lightness)/25%)}}:where(.theme.theme--dark){--color-scheme: dark;--color-word-hue: 209.8378378378deg;--color-word-saturation: 15%;--color-word-lightness: 85%;--color-word: hsla(var(--color-word-hue) var(--color-word-saturation) var(--color-word-lightness)/1);--color-word-1: hsl(var(--color-word-hue), var(--color-word-saturation), 72.25%);--color-word-2: hsl(var(--color-word-hue), var(--color-word-saturation), 59.5%);--color-word-3: hsl(var(--color-word-hue), var(--color-word-saturation), 46.75%);--color-word-4: hsl(var(--color-word-hue), var(--color-word-saturation), 34%);--color-word-5: hsl(var(--color-word-hue), var(--color-word-saturation), 21.25%);--color-surface-hue: 209.8378378378deg;--color-surface-saturation: 10%;--color-surface-lightness: 5%;--color-surface: hsla(var(--color-surface-hue) var(--color-surface-saturation) var(--color-surface-lightness)/1);--color-surface-1: hsl(var(--color-surface-hue), var(--color-surface-saturation), 9.75%);--color-surface-2: hsl(var(--color-surface-hue), var(--color-surface-saturation), 14.5%);--color-surface-3: hsl(var(--color-surface-hue), var(--color-surface-saturation), 19.25%);--color-surface-4: hsl(var(--color-surface-hue), var(--color-surface-saturation), 24%);--color-surface-5: hsl(var(--color-surface-hue), var(--color-surface-saturation), 28.75%);--color-alpha-hue: 0deg;--color-alpha-saturation: 0%;--color-alpha-lightness: 100%;--color-alpha: hsla(var(--color-alpha-hue) var(--color-alpha-saturation) var(--color-alpha-lightness)/0);--color-alpha-1: hsla(var(--color-alpha-hue) var(--color-alpha-saturation) var(--color-alpha-lightness)/5%);--color-alpha-2: hsla(var(--color-alpha-hue) var(--color-alpha-saturation) var(--color-alpha-lightness)/10%);--color-alpha-3: hsla(var(--color-alpha-hue) var(--color-alpha-saturation) var(--color-alpha-lightness)/15%);--color-alpha-4: hsla(var(--color-alpha-hue) var(--color-alpha-saturation) var(--color-alpha-lightness)/20%);--color-alpha-5: hsla(var(--color-alpha-hue) var(--color-alpha-saturation) var(--color-alpha-lightness)/25%)}@media (prefers-color-scheme: dark){:where(:host,:root,.theme):not(.theme--light){--vv-alert-modifier-success-background-color: hsl(var(--color-success-hue), var(--color-success-saturation), 10%);--vv-alert-modifier-success-element-icon-color: var(--color-success);--vv-alert-modifier-success-element-title-color: var(--color-success);--vv-alert-modifier-danger-background-color: hsl(var(--color-danger-hue), var(--color-danger-saturation), 10%);--vv-alert-modifier-danger-element-icon-color: var(--color-danger);--vv-alert-modifier-danger-element-title-color: var(--color-danger);--vv-alert-modifier-warning-background-color: hsl(var(--color-warning-hue), var(--color-warning-saturation), 10%);--vv-alert-modifier-warning-element-icon-color: var(--color-warning);--vv-alert-modifier-warning-element-title-color: var(--color-warning);--vv-alert-modifier-info-background-color: hsl(var(--color-info-hue), var(--color-info-saturation), 10%);--vv-alert-modifier-info-element-icon-color: var(--color-info);--vv-alert-modifier-info-element-title-color: var(--color-info);--vv-alert-modifier-accent-background-color: hsl(var(--color-accent-hue), var(--color-accent-saturation), 10%);--vv-alert-modifier-accent-element-icon-color: var(--color-accent);--vv-alert-modifier-accent-element-title-color: var(--color-accent);--vv-alert-modifier-brand-background-color: hsl(var(--color-brand-hue), var(--color-brand-saturation), 10%);--vv-alert-modifier-brand-element-icon-color: var(--color-brand);--vv-alert-modifier-brand-element-title-color: var(--color-brand)}}:where(.theme.theme--dark){--vv-alert-modifier-success-background-color: hsl(var(--color-success-hue), var(--color-success-saturation), 10%);--vv-alert-modifier-success-element-icon-color: var(--color-success);--vv-alert-modifier-success-element-title-color: var(--color-success);--vv-alert-modifier-danger-background-color: hsl(var(--color-danger-hue), var(--color-danger-saturation), 10%);--vv-alert-modifier-danger-element-icon-color: var(--color-danger);--vv-alert-modifier-danger-element-title-color: var(--color-danger);--vv-alert-modifier-warning-background-color: hsl(var(--color-warning-hue), var(--color-warning-saturation), 10%);--vv-alert-modifier-warning-element-icon-color: var(--color-warning);--vv-alert-modifier-warning-element-title-color: var(--color-warning);--vv-alert-modifier-info-background-color: hsl(var(--color-info-hue), var(--color-info-saturation), 10%);--vv-alert-modifier-info-element-icon-color: var(--color-info);--vv-alert-modifier-info-element-title-color: var(--color-info);--vv-alert-modifier-accent-background-color: hsl(var(--color-accent-hue), var(--color-accent-saturation), 10%);--vv-alert-modifier-accent-element-icon-color: var(--color-accent);--vv-alert-modifier-accent-element-title-color: var(--color-accent);--vv-alert-modifier-brand-background-color: hsl(var(--color-brand-hue), var(--color-brand-saturation), 10%);--vv-alert-modifier-brand-element-icon-color: var(--color-brand);--vv-alert-modifier-brand-element-title-color: var(--color-brand)}@media (prefers-color-scheme: dark){:where(:host,:root,.theme):not(.theme--light){--vv-button-modifier-primary-border-color: var(--color-gray-lighten-3);--vv-button-modifier-primary-background: var(--color-gray-lighten-3);--vv-button-modifier-primary-state-focus-visible-outline: var(--spacing-px) solid var(--color-gray);--vv-button-modifier-primary-state-hover-background: var(--color-gray-lighten-2);--vv-button-modifier-primary-state-hover-border-color: var(--color-gray-lighten-2);--vv-button-modifier-primary-state-active-background: var(--color-gray-lighten-1);--vv-button-modifier-primary-state-active-border-color: var(--color-gray-lighten-1);--vv-button-modifier-secondary-border-color: var(--color-gray-darken-1);--vv-button-modifier-secondary-background: var(--color-gray-darken-3);--vv-button-modifier-secondary-text-shadow: 0 1px 0 var(--color-gray-darken-5);--vv-button-modifier-secondary-state-focus-visible-outline: var(--spacing-px) solid var(--color-gray);--vv-button-modifier-secondary-state-hover-background: var(--color-gray-darken-4);--vv-button-modifier-secondary-state-active-background: var(--color-gray-darken-5);--vv-button-modifier-ghost-background: transparent;--vv-button-modifier-ghost-border-color: transparent;--vv-button-modifier-ghost-color: var(--color-gray-lighten-2);--vv-button-modifier-ghost-text-shadow: 0 1px 0 var(--color-gray-darken-4);--vv-button-modifier-ghost-state-focus-visible-outline: var(--spacing-px) solid var(--color-gray);--vv-button-modifier-ghost-state-focus-visible-outline-offset: 0;--vv-button-modifier-ghost-state-hover-background: var(--color-gray-darken-4);--vv-button-modifier-ghost-state-active-background: var(--color-gray-darken-5);--vv-button-modifier-text-text-shadow: 0 1px 0 var(--color-gray-darken-5)}}:where(.theme.theme--dark){--vv-button-modifier-primary-border-color: var(--color-gray-lighten-3);--vv-button-modifier-primary-background: var(--color-gray-lighten-3);--vv-button-modifier-primary-state-focus-visible-outline: var(--spacing-px) solid var(--color-gray);--vv-button-modifier-primary-state-hover-background: var(--color-gray-lighten-2);--vv-button-modifier-primary-state-hover-border-color: var(--color-gray-lighten-2);--vv-button-modifier-primary-state-active-background: var(--color-gray-lighten-1);--vv-button-modifier-primary-state-active-border-color: var(--color-gray-lighten-1);--vv-button-modifier-secondary-border-color: var(--color-gray-darken-1);--vv-button-modifier-secondary-background: var(--color-gray-darken-3);--vv-button-modifier-secondary-text-shadow: 0 1px 0 var(--color-gray-darken-5);--vv-button-modifier-secondary-state-focus-visible-outline: var(--spacing-px) solid var(--color-gray);--vv-button-modifier-secondary-state-hover-background: var(--color-gray-darken-4);--vv-button-modifier-secondary-state-active-background: var(--color-gray-darken-5);--vv-button-modifier-ghost-background: transparent;--vv-button-modifier-ghost-border-color: transparent;--vv-button-modifier-ghost-color: var(--color-gray-lighten-2);--vv-button-modifier-ghost-text-shadow: 0 1px 0 var(--color-gray-darken-4);--vv-button-modifier-ghost-state-focus-visible-outline: var(--spacing-px) solid var(--color-gray);--vv-button-modifier-ghost-state-focus-visible-outline-offset: 0;--vv-button-modifier-ghost-state-hover-background: var(--color-gray-darken-4);--vv-button-modifier-ghost-state-active-background: var(--color-gray-darken-5);--vv-button-modifier-text-text-shadow: 0 1px 0 var(--color-gray-darken-5)}@media (prefers-color-scheme: dark){:where(:host,:root,.theme):not(.theme--light){--vv-input-checkbox-element-input-state-checked-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(211, 217, 222)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--vv-input-checkbox-modifier-partial-element-input-state-checked-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(211, 217, 222)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E")}}:where(.theme.theme--dark){--vv-input-checkbox-element-input-state-checked-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(211, 217, 222)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--vv-input-checkbox-modifier-partial-element-input-state-checked-background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(211, 217, 222)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E")}