@volverjs/style 0.1.9-beta.7 → 0.1.9-beta.9

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 (44) hide show
  1. package/dist/base.css +1 -1
  2. package/dist/components/vv-alert-group.css +1 -0
  3. package/dist/components/vv-alert.css +1 -1
  4. package/dist/components/vv-dialog.css +1 -1
  5. package/dist/components/vv-dropdown-option.css +1 -1
  6. package/dist/components/vv-input-text.css +1 -1
  7. package/dist/components/vv-select.css +1 -1
  8. package/dist/components/vv-textarea.css +1 -1
  9. package/dist/components.css +1 -1
  10. package/dist/export.css +1 -1
  11. package/dist/props/colors.css +1 -1
  12. package/dist/props/input.css +1 -1
  13. package/dist/props/sizing.css +1 -1
  14. package/dist/props/transitions.css +1 -1
  15. package/dist/props.css +1 -1
  16. package/dist/themes/dark/components.css +1 -1
  17. package/dist/themes/dark/volver.css +1 -1
  18. package/dist/utilities/colors.css +1 -1
  19. package/dist/utilities/sizing.css +1 -1
  20. package/dist/utilities.css +1 -1
  21. package/dist/volver.css +1 -1
  22. package/package.json +19 -19
  23. package/src/_config.scss +1 -1
  24. package/src/components/index.scss +1 -1
  25. package/src/components/{vv-toast.scss → vv-alert-group.scss} +2 -2
  26. package/src/props/transitions.scss +10 -0
  27. package/src/settings/_colors.scss +1 -1
  28. package/src/settings/_index.scss +1 -1
  29. package/src/settings/_input.scss +19 -19
  30. package/src/settings/_sizing.scss +4 -4
  31. package/src/settings/components/_vv-alert-group.scss +174 -0
  32. package/src/settings/components/_vv-alert.scss +297 -67
  33. package/src/settings/components/_vv-dialog.scss +3 -3
  34. package/src/settings/components/_vv-dropdown-option.scss +6 -2
  35. package/src/settings/components/_vv-input-text.scss +2 -2
  36. package/src/settings/components/_vv-select.scss +3 -1
  37. package/src/settings/components/_vv-textarea.scss +2 -2
  38. package/src/themes/dark/components/_vv-alert.scss +22 -0
  39. package/src/themes/dark/components/index.scss +1 -0
  40. package/src/themes/dark/settings/_index.scss +1 -0
  41. package/src/themes/dark/settings/components/_vv-alert.scss +94 -0
  42. package/src/tools/_mixins.scss +1 -1
  43. package/dist/components/vv-toast.css +0 -1
  44. package/src/settings/components/_vv-toast.scss +0 -259
package/dist/components/vv-toast.css DELETED
@@ -1 +0,0 @@
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: var(--opacity-80);--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: var(--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)}:where(.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)}:where(.vv-toast--success .vv-toast__header){background-color:var(--vv-toast-modifier-success-element-header-background-color)}:where(.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)}:where(.vv-toast--success .vv-toast__pie):before{content:"";background-color:var(--vv-toast-modifier-success-element-pie-pseudo-before-background-color)}:where(.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)}:where(.vv-toast--danger .vv-toast__header){background-color:var(--vv-toast-modifier-danger-element-header-background-color)}:where(.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)}:where(.vv-toast--danger .vv-toast__pie):before{content:"";background-color:var(--vv-toast-modifier-danger-element-pie-pseudo-before-background-color)}:where(.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)}:where(.vv-toast--warning .vv-toast__header){background-color:var(--vv-toast-modifier-warning-element-header-background-color)}:where(.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)}:where(.vv-toast--warning .vv-toast__pie):before{content:"";background-color:var(--vv-toast-modifier-warning-element-pie-pseudo-before-background-color)}:where(.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)}:where(.vv-toast--info .vv-toast__header){background-color:var(--vv-toast-modifier-info-element-header-background-color)}:where(.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)}:where(.vv-toast--info .vv-toast__pie):before{content:"";background-color:var(--vv-toast-modifier-info-element-pie-pseudo-before-background-color)}:where(.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)}:where(.vv-toast--accent .vv-toast__header){background-color:var(--vv-toast-modifier-accent-element-header-background-color)}:where(.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)}:where(.vv-toast--accent .vv-toast__pie):before{content:"";background-color:var(--vv-toast-modifier-accent-element-pie-pseudo-before-background-color)}:where(.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)}:where(.vv-toast--brand .vv-toast__header){background-color:var(--vv-toast-modifier-brand-element-header-background-color)}:where(.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)}:where(.vv-toast--brand .vv-toast__pie):before{content:"";background-color:var(--vv-toast-modifier-brand-element-pie-pseudo-before-background-color)}:where(.vv-toast--brand .vv-toast__pie-mask){background-color:var(--vv-toast-modifier-brand-element-pie-mask-background-color)}
package/src/settings/components/_vv-toast.scss DELETED
@@ -1,259 +0,0 @@
1
- $vv-toast: (
2
- --toast-pie-animation-duration: 3s,
3
- position: relative,
4
- display: flex,
5
- flex-direction: column,
6
- overflow: hidden,
7
- border-radius: var(--rounded),
8
- background-color: var(--color-surface),
9
- box-shadow: var(--shadow-lg),
10
- color: var(--color-word-2),
11
- backdrop-filter: none,
12
- border-width: var(--border),
13
- border-style: solid,
14
- border-color: var(--color-gray),
15
- width: clamp(15vw, 20rem, 80vw),
16
- element: (
17
- header: (
18
- display: flex,
19
- overflow: hidden,
20
- align-items: center,
21
- padding: var(--spacing-10),
22
- color: var(--color-white),
23
- background-color: var(--color-gray),
24
- font-size: var(--text-16),
25
- ),
26
- content: (
27
- padding: var(--spacing-10),
28
- background-color: var(--color-surface-2),
29
- flex-grow: 1,
30
- min-height: 0,
31
- overflow: auto,
32
- font-size: var(--text-14),
33
- ),
34
- close: (
35
- position: absolute,
36
- right: var(--spacing-10),
37
- inline-size: 1.1em,
38
- block-size: 1.1em,
39
- cursor: pointer,
40
- border-radius: var(--rounded),
41
- background-image: var(--bg-close),
42
- background-color: var(--color-surface-2),
43
- background-position: center,
44
- background-size: 70% auto,
45
- background-repeat: no-repeat,
46
- ),
47
- pie: (
48
- position: absolute,
49
- display: block,
50
- right: var(--spacing-10),
51
- width: 1.1em,
52
- height: 1.1em,
53
- background-color: var(--color-white),
54
- border: 1px solid var(--color-white),
55
- border-radius: 50%,
56
- overflow: hidden,
57
- opacity: var(--opacity-80),
58
- cursor: pointer,
59
- pseudo: (
60
- before: (
61
- position: absolute,
62
- top: 0,
63
- width: 50%,
64
- height: 100%,
65
- transform-origin: 100% 50%,
66
- background-color: var(--color-gray),
67
- border-radius: 100% 0 0 100% / 50% 0 0 50%,
68
- will-change: transform,
69
- [animation]: spin var(--toast-pie-animation-duration) linear,
70
- ),
71
- after: (
72
- position: absolute,
73
- top: 0,
74
- width: 50%,
75
- height: 100%,
76
- background-color: var(--color-white),
77
- will-change: opacity,
78
- border-radius: 100% 0 0 100% / 50% 0 0 50%,
79
- [animation]: pie-masks var(--toast-pie-animation-duration)
80
- steps(1, end),
81
- opacity: var(--opacity-0),
82
- ),
83
- ),
84
- ),
85
- pie-mask: (
86
- position: absolute,
87
- top: 0,
88
- width: 50%,
89
- height: 100%,
90
- left: 50%,
91
- background-color: var(--color-gray),
92
- will-change: opacity,
93
- [animation]: pie-masks var(--toast-pie-animation-duration)
94
- steps(1, end) reverse,
95
- z-index: 1,
96
- ),
97
- ),
98
- modifier: (
99
- fixed: (
100
- position: fixed,
101
- z-index: var(--z-toast),
102
- ),
103
- top: (
104
- inset-block: var(--spacing-lg) auto,
105
- ),
106
- right: (
107
- inset-inline: auto var(--spacing-lg),
108
- ),
109
- bottom: (
110
- inset-block: auto var(--spacing-lg),
111
- ),
112
- left: (
113
- inset-inline: var(--spacing-lg) auto,
114
- ),
115
- center: (
116
- inset-inline: 50% auto,
117
- transform: translateX(-50%),
118
- ),
119
- dismissable: (
120
- element: (
121
- header: (
122
- padding-right: calc(var(--spacing-10) * 2 + 1.1em),
123
- ),
124
- ),
125
- ),
126
- success: (
127
- border-color: var(--color-success),
128
- element: (
129
- header: (
130
- background-color: var(--color-success),
131
- ),
132
- content: (
133
- border-color: var(--color-success),
134
- background-color: var(--color-surface-success),
135
- ),
136
- pie: (
137
- pseudo: (
138
- before: (
139
- background-color: var(--color-success),
140
- ),
141
- ),
142
- ),
143
- pie-mask: (
144
- background-color: var(--color-success),
145
- ),
146
- ),
147
- ),
148
- danger: (
149
- border-color: var(--color-danger),
150
- element: (
151
- header: (
152
- background-color: var(--color-danger),
153
- ),
154
- content: (
155
- border-color: var(--color-danger),
156
- background-color: var(--color-surface-danger),
157
- ),
158
- pie: (
159
- pseudo: (
160
- before: (
161
- background-color: var(--color-danger),
162
- ),
163
- ),
164
- ),
165
- pie-mask: (
166
- background-color: var(--color-danger),
167
- ),
168
- ),
169
- ),
170
- warning: (
171
- border-color: var(--color-warning-darken-1),
172
- element: (
173
- header: (
174
- background-color: var(--color-warning-darken-1),
175
- ),
176
- content: (
177
- border-color: var(--color-warning),
178
- background-color: var(--color-surface-warning),
179
- ),
180
- pie: (
181
- pseudo: (
182
- before: (
183
- background-color: var(--color-warning),
184
- ),
185
- ),
186
- ),
187
- pie-mask: (
188
- background-color: var(--color-warning),
189
- ),
190
- ),
191
- ),
192
- info: (
193
- border-color: var(--color-info-darken-1),
194
- element: (
195
- header: (
196
- background-color: var(--color-info-darken-1),
197
- ),
198
- content: (
199
- border-color: var(--color-info),
200
- background-color: var(--color-surface-info),
201
- ),
202
- pie: (
203
- pseudo: (
204
- before: (
205
- background-color: var(--color-info-darken-1),
206
- ),
207
- ),
208
- ),
209
- pie-mask: (
210
- background-color: var(--color-info-darken-1),
211
- ),
212
- ),
213
- ),
214
- accent: (
215
- border-color: var(--color-accent),
216
- element: (
217
- header: (
218
- background-color: var(--color-accent),
219
- ),
220
- content: (
221
- border-color: var(--color-accent),
222
- background-color: var(--color-surface-accent),
223
- ),
224
- pie: (
225
- pseudo: (
226
- before: (
227
- background-color: var(--color-accent),
228
- ),
229
- ),
230
- ),
231
- pie-mask: (
232
- background-color: var(--color-accent),
233
- ),
234
- ),
235
- ),
236
- brand: (
237
- border-color: var(--color-brand),
238
- element: (
239
- header: (
240
- background-color: var(--color-brand),
241
- ),
242
- content: (
243
- border-color: var(--color-brand),
244
- background-color: var(--color-surface-brand),
245
- ),
246
- pie: (
247
- pseudo: (
248
- before: (
249
- background-color: var(--color-brand),
250
- ),
251
- ),
252
- ),
253
- pie-mask: (
254
- background-color: var(--color-brand),
255
- ),
256
- ),
257
- ),
258
- ),
259
- ) !default;