@volverjs/style 0.1.2-beta.9 → 0.1.2

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 (180) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +53 -46
  3. package/dist/components/vv-accordion.css +1 -1
  4. package/dist/components/vv-alert.css +1 -0
  5. package/dist/components/vv-avatar.css +1 -0
  6. package/dist/components/vv-badge.css +1 -1
  7. package/dist/components/vv-breadcrumb.css +1 -1
  8. package/dist/components/vv-button-group.css +1 -1
  9. package/dist/components/vv-button.css +1 -1
  10. package/dist/components/vv-card.css +1 -1
  11. package/dist/components/vv-checkbox-group.css +1 -0
  12. package/dist/components/vv-checkbox.css +1 -0
  13. package/dist/components/vv-dialog.css +1 -1
  14. package/dist/components/vv-dropdown.css +1 -1
  15. package/dist/components/vv-input-text.css +1 -1
  16. package/dist/components/vv-nav.css +1 -1
  17. package/dist/components/vv-progress.css +1 -1
  18. package/dist/components/vv-radio-group.css +1 -0
  19. package/dist/components/vv-radio.css +1 -0
  20. package/dist/components/vv-select.css +1 -1
  21. package/dist/components/vv-skeleton.css +1 -0
  22. package/dist/components/vv-tab.css +1 -0
  23. package/dist/components/vv-table.css +1 -1
  24. package/dist/components/vv-text.css +1 -1
  25. package/dist/components/vv-textarea.css +1 -1
  26. package/dist/components/vv-toast.css +1 -0
  27. package/dist/components/vv-tooltip.css +1 -0
  28. package/dist/components.css +1 -1
  29. package/dist/export.css +1 -1
  30. package/dist/props/background.css +1 -1
  31. package/dist/props/breakpoints.css +1 -0
  32. package/dist/props/colors.css +1 -1
  33. package/dist/props/filters.css +1 -1
  34. package/dist/props/input.css +1 -1
  35. package/dist/props/layout.css +1 -1
  36. package/dist/props/spacing.css +1 -1
  37. package/dist/props/transitions.css +1 -0
  38. package/dist/props.css +1 -1
  39. package/dist/themes/dark/components.css +1 -1
  40. package/dist/themes/dark/props.css +1 -1
  41. package/dist/themes/dark/volver.css +1 -1
  42. package/dist/utilities/backgrounds.css +1 -1
  43. package/dist/utilities/borders.css +1 -1
  44. package/dist/utilities/colors.css +1 -1
  45. package/dist/utilities/effects.css +1 -1
  46. package/dist/utilities/filters.css +1 -1
  47. package/dist/utilities/flexbox.css +1 -1
  48. package/dist/utilities/interactivity.css +1 -0
  49. package/dist/utilities/layout.css +1 -1
  50. package/dist/utilities/sizing.css +1 -1
  51. package/dist/utilities/spacing.css +1 -1
  52. package/dist/utilities/transitions.css +1 -0
  53. package/dist/utilities/typography.css +1 -1
  54. package/dist/utilities.css +1 -1
  55. package/dist/volver.css +1 -1
  56. package/package.json +56 -36
  57. package/src/_config.scss +17 -11
  58. package/src/_context.scss +3 -3
  59. package/src/_preflight.scss +308 -247
  60. package/src/components/index.scss +25 -19
  61. package/src/components/vv-accordion.scss +3 -2
  62. package/src/components/vv-alert.scss +13 -0
  63. package/src/components/vv-avatar.scss +13 -0
  64. package/src/components/vv-badge.scss +3 -2
  65. package/src/components/vv-breadcrumb.scss +3 -2
  66. package/src/components/vv-button-group.scss +11 -10
  67. package/src/components/vv-button.scss +5 -8
  68. package/src/components/vv-card.scss +3 -2
  69. package/src/components/vv-checkbox-group.scss +13 -0
  70. package/src/components/{vv-input-checkbox.scss → vv-checkbox.scss} +7 -6
  71. package/src/components/vv-dialog.scss +3 -2
  72. package/src/components/vv-dropdown.scss +3 -2
  73. package/src/components/vv-input-text.scss +6 -5
  74. package/src/components/vv-nav.scss +3 -2
  75. package/src/components/vv-progress.scss +3 -2
  76. package/src/components/vv-radio-group.scss +13 -0
  77. package/src/components/{vv-input-radio.scss → vv-radio.scss} +6 -5
  78. package/src/components/vv-select.scss +6 -5
  79. package/src/components/vv-skeleton.scss +14 -0
  80. package/src/components/vv-tab.scss +13 -0
  81. package/src/components/vv-table.scss +3 -2
  82. package/src/components/vv-text.scss +3 -2
  83. package/src/components/vv-textarea.scss +6 -5
  84. package/src/components/vv-toast.scss +13 -0
  85. package/src/components/vv-tooltip.scss +33 -0
  86. package/src/export.scss +89 -27
  87. package/src/props/background.scss +1 -1
  88. package/src/props/borders.scss +1 -1
  89. package/src/props/breakpoints.scss +15 -0
  90. package/src/props/colors.scss +1 -1
  91. package/src/props/effects.scss +1 -1
  92. package/src/props/filters.scss +2 -1
  93. package/src/props/index.scss +13 -12
  94. package/src/props/input.scss +1 -1
  95. package/src/props/layout.scss +1 -1
  96. package/src/props/media.scss +1 -1
  97. package/src/props/sizing.scss +1 -1
  98. package/src/props/spacing.scss +2 -2
  99. package/src/props/{animation.scss → transitions.scss} +53 -2
  100. package/src/props/typography.scss +2 -2
  101. package/src/settings/_background.scss +6 -1
  102. package/src/settings/_breakpoints.scss +2 -0
  103. package/src/settings/_colors.scss +23 -4
  104. package/src/settings/_effects.scss +47 -2
  105. package/src/settings/_filters.scss +9 -0
  106. package/src/settings/_index.scss +40 -33
  107. package/src/settings/_input.scss +8 -6
  108. package/src/settings/_interactivity.scss +39 -0
  109. package/src/settings/_layout.scss +18 -10
  110. package/src/settings/_spacing.scss +1 -0
  111. package/src/settings/_transitions.scss +44 -0
  112. package/src/settings/components/_vv-accordion.scss +40 -34
  113. package/src/settings/components/_vv-alert.scss +161 -0
  114. package/src/settings/components/_vv-avatar.scss +55 -0
  115. package/src/settings/components/_vv-badge.scss +43 -11
  116. package/src/settings/components/_vv-breadcrumb.scss +23 -15
  117. package/src/settings/components/_vv-button-group.scss +4 -0
  118. package/src/settings/components/_vv-button.scss +30 -25
  119. package/src/settings/components/_vv-card.scss +2 -2
  120. package/src/settings/components/{_vv-input-checkbox-group.scss → _vv-checkbox-group.scss} +2 -1
  121. package/src/settings/components/{_vv-input-checkbox.scss → _vv-checkbox.scss} +46 -11
  122. package/src/settings/components/_vv-dialog.scss +71 -89
  123. package/src/settings/components/_vv-input-text.scss +83 -37
  124. package/src/settings/components/_vv-nav.scss +98 -13
  125. package/src/settings/components/_vv-progress.scss +1 -1
  126. package/src/settings/components/_vv-radio-group.scss +3 -0
  127. package/src/settings/components/{_vv-input-radio.scss → _vv-radio.scss} +33 -4
  128. package/src/settings/components/_vv-select.scss +34 -43
  129. package/src/settings/components/_vv-skeleton.scss +22 -0
  130. package/src/settings/components/_vv-tab.scss +16 -0
  131. package/src/settings/components/_vv-table.scss +8 -1
  132. package/src/settings/components/_vv-text.scss +20 -0
  133. package/src/settings/components/_vv-textarea.scss +49 -24
  134. package/src/settings/components/_vv-toast.scss +259 -0
  135. package/src/settings/components/_vv-tooltip.scss +74 -0
  136. package/src/themes/dark/_context.scss +7 -4
  137. package/src/themes/dark/components/_vv-button.scss +2 -4
  138. package/src/themes/dark/components/index.scss +1 -2
  139. package/src/themes/dark/props/_background.scss +1 -1
  140. package/src/themes/dark/props/_colors.scss +1 -1
  141. package/src/themes/dark/props/_input.scss +15 -0
  142. package/src/themes/dark/props/index.scss +3 -2
  143. package/src/themes/dark/settings/_background.scss +5 -0
  144. package/src/themes/dark/settings/_colors.scss +22 -2
  145. package/src/themes/dark/settings/_index.scss +4 -4
  146. package/src/themes/dark/settings/_input.scss +8 -0
  147. package/src/themes/dark/settings/components/_vv-button.scss +9 -9
  148. package/src/themes/dark/volver.scss +2 -2
  149. package/src/tools/_breakpoints.scss +7 -7
  150. package/src/tools/_functions.scss +95 -37
  151. package/src/tools/_index.scss +3 -3
  152. package/src/tools/_mixins.scss +166 -35
  153. package/src/utilities/backgrounds.scss +15 -8
  154. package/src/utilities/borders.scss +22 -9
  155. package/src/utilities/colors.scss +9 -5
  156. package/src/utilities/effects.scss +23 -5
  157. package/src/utilities/filters.scss +15 -4
  158. package/src/utilities/flexbox.scss +15 -8
  159. package/src/utilities/grid.scss +17 -9
  160. package/src/utilities/index.scss +13 -12
  161. package/src/utilities/interactivity.scss +10 -0
  162. package/src/utilities/layout.scss +35 -23
  163. package/src/utilities/sizing.scss +23 -26
  164. package/src/utilities/spacing.scss +1 -1
  165. package/src/utilities/transitions.scss +47 -0
  166. package/src/utilities/typography.scss +34 -17
  167. package/src/volver.scss +4 -4
  168. package/dist/components/vv-input-checkbox-group.css +0 -1
  169. package/dist/components/vv-input-checkbox.css +0 -1
  170. package/dist/components/vv-input-radio-group.css +0 -1
  171. package/dist/components/vv-input-radio.css +0 -1
  172. package/dist/props/animation.css +0 -1
  173. package/dist/utilities/animation.css +0 -1
  174. package/src/components/vv-input-checkbox-group.scss +0 -12
  175. package/src/components/vv-input-radio-group.scss +0 -12
  176. package/src/settings/_animation.scss +0 -9
  177. package/src/settings/components/_vv-input-radio-group.scss +0 -1
  178. package/src/themes/dark/components/_vv-input-checkbox.scss +0 -24
  179. package/src/themes/dark/settings/components/_vv-input-checkbox.scss +0 -26
  180. package/src/utilities/animation.scss +0 -8
package/dist/components/vv-toast.css ADDED
@@ -0,0 +1 @@
1
+ :where(:host,:root,.theme){--vv-toast-position: relative;--vv-toast-display: flex;--vv-toast-flex-direction: column;--vv-toast-overflow: hidden;--vv-toast-border-radius: var(--rounded);--vv-toast-background-color: var(--color-surface);--vv-toast-box-shadow: var(--shadow-lg);--vv-toast-color: var(--color-word-2);--vv-toast-backdrop-filter: none;--vv-toast-border-width: var(--border);--vv-toast-border-style: solid;--vv-toast-border-color: var(--color-gray);--vv-toast-width: max(15vw, min(20rem, 80vw));--vv-toast-element-header-display: flex;--vv-toast-element-header-overflow: hidden;--vv-toast-element-header-align-items: center;--vv-toast-element-header-padding: var(--spacing-10);--vv-toast-element-header-color: var(--color-white);--vv-toast-element-header-background-color: var(--color-gray);--vv-toast-element-header-font-size: var(--text-16);--vv-toast-element-content-padding: var(--spacing-10);--vv-toast-element-content-background-color: var(--color-surface-2);--vv-toast-element-content-flex-grow: 1;--vv-toast-element-content-min-height: 0;--vv-toast-element-content-overflow: auto;--vv-toast-element-content-font-size: var(--text-14);--vv-toast-element-close-position: absolute;--vv-toast-element-close-right: var(--spacing-10);--vv-toast-element-close-inline-size: 1.1em;--vv-toast-element-close-block-size: 1.1em;--vv-toast-element-close-cursor: pointer;--vv-toast-element-close-border-radius: var(--rounded);--vv-toast-element-close-background-image: var(--bg-close);--vv-toast-element-close-background-color: var(--color-surface-2);--vv-toast-element-close-background-position: center;--vv-toast-element-close-background-size: 70% auto;--vv-toast-element-close-background-repeat: no-repeat;--vv-toast-element-pie-position: absolute;--vv-toast-element-pie-display: block;--vv-toast-element-pie-right: var(--spacing-10);--vv-toast-element-pie-width: 1.1em;--vv-toast-element-pie-height: 1.1em;--vv-toast-element-pie-background-color: var(--color-white);--vv-toast-element-pie-border: 1px solid var(--color-white);--vv-toast-element-pie-border-radius: 50%;--vv-toast-element-pie-overflow: hidden;--vv-toast-element-pie-opacity: .8;--vv-toast-element-pie-cursor: pointer;--vv-toast-element-pie-pseudo-before-position: absolute;--vv-toast-element-pie-pseudo-before-top: 0;--vv-toast-element-pie-pseudo-before-width: 50%;--vv-toast-element-pie-pseudo-before-height: 100%;--vv-toast-element-pie-pseudo-before-transform-origin: 100% 50%;--vv-toast-element-pie-pseudo-before-background-color: var(--color-gray);--vv-toast-element-pie-pseudo-before-border-radius: 100% 0 0 100%/50% 0 0 50%;--vv-toast-element-pie-pseudo-before-will-change: transform;--vv-toast-element-pie-pseudo-after-position: absolute;--vv-toast-element-pie-pseudo-after-top: 0;--vv-toast-element-pie-pseudo-after-width: 50%;--vv-toast-element-pie-pseudo-after-height: 100%;--vv-toast-element-pie-pseudo-after-background-color: var(--color-white);--vv-toast-element-pie-pseudo-after-will-change: opacity;--vv-toast-element-pie-pseudo-after-border-radius: 100% 0 0 100%/50% 0 0 50%;--vv-toast-element-pie-pseudo-after-opacity: 0;--vv-toast-element-pie-mask-position: absolute;--vv-toast-element-pie-mask-top: 0;--vv-toast-element-pie-mask-width: 50%;--vv-toast-element-pie-mask-height: 100%;--vv-toast-element-pie-mask-left: 50%;--vv-toast-element-pie-mask-background-color: var(--color-gray);--vv-toast-element-pie-mask-will-change: opacity;--vv-toast-element-pie-mask-z-index: 1;--vv-toast-modifier-fixed-position: fixed;--vv-toast-modifier-fixed-z-index: var(--z-toast);--vv-toast-modifier-top-inset-block: var(--spacing-lg) auto;--vv-toast-modifier-right-inset-inline: auto var(--spacing-lg);--vv-toast-modifier-bottom-inset-block: auto var(--spacing-lg);--vv-toast-modifier-left-inset-inline: var(--spacing-lg) auto;--vv-toast-modifier-center-inset-inline: 50% auto;--vv-toast-modifier-center-transform: translateX(-50%);--vv-toast-modifier-dismissable-element-header-padding-right: calc(var(--spacing-10) * 2 + 1.1em);--vv-toast-modifier-success-border-color: var(--color-success);--vv-toast-modifier-success-element-header-background-color: var(--color-success);--vv-toast-modifier-success-element-content-border-color: var(--color-success);--vv-toast-modifier-success-element-content-background-color: var(--color-surface-success);--vv-toast-modifier-success-element-pie-pseudo-before-background-color: var(--color-success);--vv-toast-modifier-success-element-pie-mask-background-color: var(--color-success);--vv-toast-modifier-danger-border-color: var(--color-danger);--vv-toast-modifier-danger-element-header-background-color: var(--color-danger);--vv-toast-modifier-danger-element-content-border-color: var(--color-danger);--vv-toast-modifier-danger-element-content-background-color: var(--color-surface-danger);--vv-toast-modifier-danger-element-pie-pseudo-before-background-color: var(--color-danger);--vv-toast-modifier-danger-element-pie-mask-background-color: var(--color-danger);--vv-toast-modifier-warning-border-color: var(--color-warning-darken-1);--vv-toast-modifier-warning-element-header-background-color: var(--color-warning-darken-1);--vv-toast-modifier-warning-element-content-border-color: var(--color-warning);--vv-toast-modifier-warning-element-content-background-color: var(--color-surface-warning);--vv-toast-modifier-warning-element-pie-pseudo-before-background-color: var(--color-warning);--vv-toast-modifier-warning-element-pie-mask-background-color: var(--color-warning);--vv-toast-modifier-info-border-color: var(--color-info-darken-1);--vv-toast-modifier-info-element-header-background-color: var(--color-info-darken-1);--vv-toast-modifier-info-element-content-border-color: var(--color-info);--vv-toast-modifier-info-element-content-background-color: var(--color-surface-info);--vv-toast-modifier-info-element-pie-pseudo-before-background-color: var(--color-info-darken-1);--vv-toast-modifier-info-element-pie-mask-background-color: var(--color-info-darken-1);--vv-toast-modifier-accent-border-color: var(--color-accent);--vv-toast-modifier-accent-element-header-background-color: var(--color-accent);--vv-toast-modifier-accent-element-content-border-color: var(--color-accent);--vv-toast-modifier-accent-element-content-background-color: var(--color-surface-accent);--vv-toast-modifier-accent-element-pie-pseudo-before-background-color: var(--color-accent);--vv-toast-modifier-accent-element-pie-mask-background-color: var(--color-accent);--vv-toast-modifier-brand-border-color: var(--color-brand);--vv-toast-modifier-brand-element-header-background-color: var(--color-brand);--vv-toast-modifier-brand-element-content-border-color: var(--color-brand);--vv-toast-modifier-brand-element-content-background-color: var(--color-surface-brand);--vv-toast-modifier-brand-element-pie-pseudo-before-background-color: var(--color-brand);--vv-toast-modifier-brand-element-pie-mask-background-color: var(--color-brand)}:where(.vv-toast){--toast-pie-animation-duration: 3s;position:var(--vv-toast-position);display:var(--vv-toast-display);flex-direction:var(--vv-toast-flex-direction);overflow:var(--vv-toast-overflow);border-radius:var(--vv-toast-border-radius);background-color:var(--vv-toast-background-color);box-shadow:var(--vv-toast-box-shadow);color:var(--vv-toast-color);-webkit-backdrop-filter:var(--vv-toast-backdrop-filter);backdrop-filter:var(--vv-toast-backdrop-filter);border-width:var(--vv-toast-border-width);border-style:var(--vv-toast-border-style);border-color:var(--vv-toast-border-color);width:var(--vv-toast-width)}:where(.vv-toast__header){display:var(--vv-toast-element-header-display);overflow:var(--vv-toast-element-header-overflow);align-items:var(--vv-toast-element-header-align-items);padding:var(--vv-toast-element-header-padding);color:var(--vv-toast-element-header-color);background-color:var(--vv-toast-element-header-background-color);font-size:var(--vv-toast-element-header-font-size)}:where(.vv-toast__content){padding:var(--vv-toast-element-content-padding);background-color:var(--vv-toast-element-content-background-color);flex-grow:var(--vv-toast-element-content-flex-grow);min-height:var(--vv-toast-element-content-min-height);overflow:var(--vv-toast-element-content-overflow);font-size:var(--vv-toast-element-content-font-size)}:where(.vv-toast__close){position:var(--vv-toast-element-close-position);right:var(--vv-toast-element-close-right);inline-size:var(--vv-toast-element-close-inline-size);block-size:var(--vv-toast-element-close-block-size);cursor:var(--vv-toast-element-close-cursor);border-radius:var(--vv-toast-element-close-border-radius);background-image:var(--vv-toast-element-close-background-image);background-color:var(--vv-toast-element-close-background-color);background-position:var(--vv-toast-element-close-background-position);background-size:var(--vv-toast-element-close-background-size);background-repeat:var(--vv-toast-element-close-background-repeat)}:where(.vv-toast__pie){position:var(--vv-toast-element-pie-position);display:var(--vv-toast-element-pie-display);right:var(--vv-toast-element-pie-right);width:var(--vv-toast-element-pie-width);height:var(--vv-toast-element-pie-height);background-color:var(--vv-toast-element-pie-background-color);border:var(--vv-toast-element-pie-border);border-radius:var(--vv-toast-element-pie-border-radius);overflow:var(--vv-toast-element-pie-overflow);opacity:var(--vv-toast-element-pie-opacity);cursor:var(--vv-toast-element-pie-cursor)}:where(.vv-toast__pie):before{content:"";position:var(--vv-toast-element-pie-pseudo-before-position);top:var(--vv-toast-element-pie-pseudo-before-top);width:var(--vv-toast-element-pie-pseudo-before-width);height:var(--vv-toast-element-pie-pseudo-before-height);transform-origin:var(--vv-toast-element-pie-pseudo-before-transform-origin);background-color:var(--vv-toast-element-pie-pseudo-before-background-color);border-radius:var(--vv-toast-element-pie-pseudo-before-border-radius);will-change:var(--vv-toast-element-pie-pseudo-before-will-change);animation:spin var(--toast-pie-animation-duration) linear}:where(.vv-toast__pie):after{content:"";position:var(--vv-toast-element-pie-pseudo-after-position);top:var(--vv-toast-element-pie-pseudo-after-top);width:var(--vv-toast-element-pie-pseudo-after-width);height:var(--vv-toast-element-pie-pseudo-after-height);background-color:var(--vv-toast-element-pie-pseudo-after-background-color);will-change:var(--vv-toast-element-pie-pseudo-after-will-change);border-radius:var(--vv-toast-element-pie-pseudo-after-border-radius);animation:pie-masks var(--toast-pie-animation-duration) steps(1,end);opacity:var(--vv-toast-element-pie-pseudo-after-opacity)}:where(.vv-toast__pie-mask){position:var(--vv-toast-element-pie-mask-position);top:var(--vv-toast-element-pie-mask-top);width:var(--vv-toast-element-pie-mask-width);height:var(--vv-toast-element-pie-mask-height);left:var(--vv-toast-element-pie-mask-left);background-color:var(--vv-toast-element-pie-mask-background-color);will-change:var(--vv-toast-element-pie-mask-will-change);animation:pie-masks var(--toast-pie-animation-duration) steps(1,end) reverse;z-index:var(--vv-toast-element-pie-mask-z-index)}:where(.vv-toast--fixed.vv-toast){--vv-toast-position: var(--vv-toast-modifier-fixed-position);z-index:var(--vv-toast-modifier-fixed-z-index)}:where(.vv-toast--top.vv-toast){inset-block:var(--vv-toast-modifier-top-inset-block)}:where(.vv-toast--right.vv-toast){inset-inline:var(--vv-toast-modifier-right-inset-inline)}:where(.vv-toast--bottom.vv-toast){inset-block:var(--vv-toast-modifier-bottom-inset-block)}:where(.vv-toast--left.vv-toast){inset-inline:var(--vv-toast-modifier-left-inset-inline)}:where(.vv-toast--center.vv-toast){inset-inline:var(--vv-toast-modifier-center-inset-inline);transform:var(--vv-toast-modifier-center-transform)}.vv-toast--dismissable .vv-toast__header{padding-right:var(--vv-toast-modifier-dismissable-element-header-padding-right)}:where(.vv-toast--success.vv-toast){--vv-toast-border-color: var(--vv-toast-modifier-success-border-color)}.vv-toast--success .vv-toast__header{background-color:var(--vv-toast-modifier-success-element-header-background-color)}.vv-toast--success .vv-toast__content{border-color:var(--vv-toast-modifier-success-element-content-border-color);background-color:var(--vv-toast-modifier-success-element-content-background-color)}.vv-toast--success .vv-toast__pie:before{content:"";background-color:var(--vv-toast-modifier-success-element-pie-pseudo-before-background-color)}.vv-toast--success .vv-toast__pie-mask{background-color:var(--vv-toast-modifier-success-element-pie-mask-background-color)}:where(.vv-toast--danger.vv-toast){--vv-toast-border-color: var(--vv-toast-modifier-danger-border-color)}.vv-toast--danger .vv-toast__header{background-color:var(--vv-toast-modifier-danger-element-header-background-color)}.vv-toast--danger .vv-toast__content{border-color:var(--vv-toast-modifier-danger-element-content-border-color);background-color:var(--vv-toast-modifier-danger-element-content-background-color)}.vv-toast--danger .vv-toast__pie:before{content:"";background-color:var(--vv-toast-modifier-danger-element-pie-pseudo-before-background-color)}.vv-toast--danger .vv-toast__pie-mask{background-color:var(--vv-toast-modifier-danger-element-pie-mask-background-color)}:where(.vv-toast--warning.vv-toast){--vv-toast-border-color: var(--vv-toast-modifier-warning-border-color)}.vv-toast--warning .vv-toast__header{background-color:var(--vv-toast-modifier-warning-element-header-background-color)}.vv-toast--warning .vv-toast__content{border-color:var(--vv-toast-modifier-warning-element-content-border-color);background-color:var(--vv-toast-modifier-warning-element-content-background-color)}.vv-toast--warning .vv-toast__pie:before{content:"";background-color:var(--vv-toast-modifier-warning-element-pie-pseudo-before-background-color)}.vv-toast--warning .vv-toast__pie-mask{background-color:var(--vv-toast-modifier-warning-element-pie-mask-background-color)}:where(.vv-toast--info.vv-toast){--vv-toast-border-color: var(--vv-toast-modifier-info-border-color)}.vv-toast--info .vv-toast__header{background-color:var(--vv-toast-modifier-info-element-header-background-color)}.vv-toast--info .vv-toast__content{border-color:var(--vv-toast-modifier-info-element-content-border-color);background-color:var(--vv-toast-modifier-info-element-content-background-color)}.vv-toast--info .vv-toast__pie:before{content:"";background-color:var(--vv-toast-modifier-info-element-pie-pseudo-before-background-color)}.vv-toast--info .vv-toast__pie-mask{background-color:var(--vv-toast-modifier-info-element-pie-mask-background-color)}:where(.vv-toast--accent.vv-toast){--vv-toast-border-color: var(--vv-toast-modifier-accent-border-color)}.vv-toast--accent .vv-toast__header{background-color:var(--vv-toast-modifier-accent-element-header-background-color)}.vv-toast--accent .vv-toast__content{border-color:var(--vv-toast-modifier-accent-element-content-border-color);background-color:var(--vv-toast-modifier-accent-element-content-background-color)}.vv-toast--accent .vv-toast__pie:before{content:"";background-color:var(--vv-toast-modifier-accent-element-pie-pseudo-before-background-color)}.vv-toast--accent .vv-toast__pie-mask{background-color:var(--vv-toast-modifier-accent-element-pie-mask-background-color)}:where(.vv-toast--brand.vv-toast){--vv-toast-border-color: var(--vv-toast-modifier-brand-border-color)}.vv-toast--brand .vv-toast__header{background-color:var(--vv-toast-modifier-brand-element-header-background-color)}.vv-toast--brand .vv-toast__content{border-color:var(--vv-toast-modifier-brand-element-content-border-color);background-color:var(--vv-toast-modifier-brand-element-content-background-color)}.vv-toast--brand .vv-toast__pie:before{content:"";background-color:var(--vv-toast-modifier-brand-element-pie-pseudo-before-background-color)}.vv-toast--brand .vv-toast__pie-mask{background-color:var(--vv-toast-modifier-brand-element-pie-mask-background-color)}
package/dist/components/vv-tooltip.css ADDED
@@ -0,0 +1 @@
1
+ :where(:host,:root,.theme){--vv-tooltip-opacity: 0;--vv-tooltip-display: block;--vv-tooltip-position: absolute;--vv-tooltip-inset-inline: 100% auto;--vv-tooltip-top: 50%;--vv-tooltip-transform: translate(var(--spacing-10), -50%);--vv-tooltip-z-index: var(--z-tooltip);--vv-tooltip-inline-size: max-content;--vv-tooltip-max-inline-size: 25ch;--vv-tooltip-border-radius: var(--rounded-md);--vv-tooltip-padding: var(--spacing-4) var(--spacing-sm);--vv-tooltip-background: var(--color-gray-darken-4);--vv-tooltip-font-size: var(--text-12);--vv-tooltip-font-weight: var(--font-normal);--vv-tooltip-color: var(--color-gray-lighten-5);--vv-tooltip-text-align: center;--vv-tooltip-box-shadow: var(--shadow-md);--vv-tooltip-will-change: opacity;--vv-tooltip-transition: var(--transition-opacity);--vv-tooltip-pseudo-after-position: absolute;--vv-tooltip-pseudo-after-z-index: -1;--vv-tooltip-pseudo-after-inset-inline: 0 auto;--vv-tooltip-pseudo-after-inset-block: 50% auto;--vv-tooltip-pseudo-after-transform: translate(-100%, -50%);--vv-tooltip-pseudo-after-border-width: var(--spacing-8);--vv-tooltip-pseudo-after-border-style: solid;--vv-tooltip-pseudo-after-border-color: transparent var(--color-gray-darken-4) transparent transparent;--vv-tooltip-modifier-visible-opacity: 1;--vv-tooltip-modifier-top-inset-inline: 50% 0;--vv-tooltip-modifier-top-inset-block: auto 100%;--vv-tooltip-modifier-top-transform: translate(-50%, calc(var(--spacing-10) * -1));--vv-tooltip-modifier-top-pseudo-after-inset-inline: 50% auto;--vv-tooltip-modifier-top-pseudo-after-inset-block: 100% auto;--vv-tooltip-modifier-top-pseudo-after-transform: translate(-50%, 0) rotate(-90deg);--vv-tooltip-modifier-bottom-inset-inline: 50% 0;--vv-tooltip-modifier-bottom-inset-block: 100% auto;--vv-tooltip-modifier-bottom-transform: translate(-50%, var(--spacing-10));--vv-tooltip-modifier-bottom-pseudo-after-inset-inline: 50% auto;--vv-tooltip-modifier-bottom-pseudo-after-inset-block: 0 auto;--vv-tooltip-modifier-bottom-pseudo-after-transform: translate(-50%, -100%) rotate(90deg);--vv-tooltip-modifier-left-inset-inline: auto 100%;--vv-tooltip-modifier-left-transform: translate(calc(var(--spacing-10) * -1), -50%);--vv-tooltip-modifier-left-pseudo-after-position: absolute;--vv-tooltip-modifier-left-pseudo-after-inset-inline: auto 0;--vv-tooltip-modifier-left-pseudo-after-transform: translate(100%, -50%) rotate(180deg)}:where(.vv-tooltip){opacity:var(--vv-tooltip-opacity);display:var(--vv-tooltip-display);position:var(--vv-tooltip-position);inset-inline:var(--vv-tooltip-inset-inline);top:var(--vv-tooltip-top);transform:var(--vv-tooltip-transform);z-index:var(--vv-tooltip-z-index);inline-size:var(--vv-tooltip-inline-size);max-inline-size:var(--vv-tooltip-max-inline-size);border-radius:var(--vv-tooltip-border-radius);padding:var(--vv-tooltip-padding);background:var(--vv-tooltip-background);font-size:var(--vv-tooltip-font-size);font-weight:var(--vv-tooltip-font-weight);color:var(--vv-tooltip-color);text-align:var(--vv-tooltip-text-align);box-shadow:var(--vv-tooltip-box-shadow);will-change:var(--vv-tooltip-will-change);transition:var(--vv-tooltip-transition)}:where(.vv-tooltip):after{content:"";position:var(--vv-tooltip-pseudo-after-position);z-index:var(--vv-tooltip-pseudo-after-z-index);inset-inline:var(--vv-tooltip-pseudo-after-inset-inline);inset-block:var(--vv-tooltip-pseudo-after-inset-block);transform:var(--vv-tooltip-pseudo-after-transform);border-width:var(--vv-tooltip-pseudo-after-border-width);border-style:var(--vv-tooltip-pseudo-after-border-style);border-color:var(--vv-tooltip-pseudo-after-border-color)}:where(*:has(> .vv-tooltip)):hover,:where(*:has(> .vv-tooltip)):focus-visible,:where(*:has(> .vv-tooltip)).hover,:where(*:has(> .vv-tooltip)).focus-visible,:where(.vv-tooltip--visible.vv-tooltip){--vv-tooltip-opacity: var(--vv-tooltip-modifier-visible-opacity)}:where(.vv-tooltip--top.vv-tooltip){--vv-tooltip-inset-inline: var(--vv-tooltip-modifier-top-inset-inline);inset-block:var(--vv-tooltip-modifier-top-inset-block);--vv-tooltip-transform: var(--vv-tooltip-modifier-top-transform)}:where(.vv-tooltip--top.vv-tooltip):after{--vv-tooltip-pseudo-after-inset-inline: var(--vv-tooltip-modifier-top-pseudo-after-inset-inline);--vv-tooltip-pseudo-after-inset-block: var(--vv-tooltip-modifier-top-pseudo-after-inset-block);--vv-tooltip-pseudo-after-transform: var(--vv-tooltip-modifier-top-pseudo-after-transform)}:where(.vv-tooltip--bottom.vv-tooltip){--vv-tooltip-inset-inline: var(--vv-tooltip-modifier-bottom-inset-inline);inset-block:var(--vv-tooltip-modifier-bottom-inset-block);--vv-tooltip-transform: var(--vv-tooltip-modifier-bottom-transform)}:where(.vv-tooltip--bottom.vv-tooltip):after{--vv-tooltip-pseudo-after-inset-inline: var(--vv-tooltip-modifier-bottom-pseudo-after-inset-inline);--vv-tooltip-pseudo-after-inset-block: var(--vv-tooltip-modifier-bottom-pseudo-after-inset-block);--vv-tooltip-pseudo-after-transform: var(--vv-tooltip-modifier-bottom-pseudo-after-transform)}:where(.vv-tooltip--left.vv-tooltip){--vv-tooltip-inset-inline: var(--vv-tooltip-modifier-left-inset-inline);--vv-tooltip-transform: var(--vv-tooltip-modifier-left-transform)}:where(.vv-tooltip--left.vv-tooltip):after{--vv-tooltip-pseudo-after-position: var(--vv-tooltip-modifier-left-pseudo-after-position);--vv-tooltip-pseudo-after-inset-inline: var(--vv-tooltip-modifier-left-pseudo-after-inset-inline);--vv-tooltip-pseudo-after-transform: var(--vv-tooltip-modifier-left-pseudo-after-transform)}:where(*:has(.vv-tooltip)){position:relative}