vanduo-framework 1.1.8

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 (196) hide show
  1. package/LICENSE +35 -0
  2. package/README.md +205 -0
  3. package/css/components/alerts.css +224 -0
  4. package/css/components/avatar.css +275 -0
  5. package/css/components/badges.css +230 -0
  6. package/css/components/breadcrumbs.css +146 -0
  7. package/css/components/button-group.css +82 -0
  8. package/css/components/buttons.css +530 -0
  9. package/css/components/cards.css +304 -0
  10. package/css/components/chips.css +259 -0
  11. package/css/components/code-snippet.css +555 -0
  12. package/css/components/collapsible.css +267 -0
  13. package/css/components/collections.css +253 -0
  14. package/css/components/doc-search.css +464 -0
  15. package/css/components/doc-tabs.css +38 -0
  16. package/css/components/draggable.css +317 -0
  17. package/css/components/dropdown.css +266 -0
  18. package/css/components/footer.css +375 -0
  19. package/css/components/forms.css +1774 -0
  20. package/css/components/image-box.css +279 -0
  21. package/css/components/modals.css +285 -0
  22. package/css/components/navbar.css +530 -0
  23. package/css/components/pagination.css +186 -0
  24. package/css/components/preloader.css +340 -0
  25. package/css/components/progress.css +107 -0
  26. package/css/components/sidenav.css +301 -0
  27. package/css/components/skeleton.css +241 -0
  28. package/css/components/spinner.css +144 -0
  29. package/css/components/tabs.css +327 -0
  30. package/css/components/theme-customizer.css +835 -0
  31. package/css/components/toast.css +357 -0
  32. package/css/components/tooltips.css +270 -0
  33. package/css/core/colors.css +1017 -0
  34. package/css/core/fonts.css +266 -0
  35. package/css/core/grid.css +1699 -0
  36. package/css/core/helpers.css +2202 -0
  37. package/css/core/reset.css +128 -0
  38. package/css/core/tokens.css +213 -0
  39. package/css/core/typography.css +405 -0
  40. package/css/core/vd-aliases.css +47 -0
  41. package/css/effects/parallax.css +113 -0
  42. package/css/icons/icons-all.css +23 -0
  43. package/css/icons/icons.css +25 -0
  44. package/css/utilities/media.css +167 -0
  45. package/css/utilities/print.css +111 -0
  46. package/css/utilities/shadow.css +243 -0
  47. package/css/utilities/table.css +381 -0
  48. package/css/utilities/transforms.css +71 -0
  49. package/css/utilities/transitions.css +87 -0
  50. package/css/vanduo.css +80 -0
  51. package/dist/build-info.json +6 -0
  52. package/dist/fonts/fira-sans/fira-sans-bold.woff2 +0 -0
  53. package/dist/fonts/fira-sans/fira-sans-medium.woff2 +0 -0
  54. package/dist/fonts/fira-sans/fira-sans-regular.woff2 +0 -0
  55. package/dist/fonts/ibm-plex/ibm-plex-sans-bold.woff2 +0 -0
  56. package/dist/fonts/ibm-plex/ibm-plex-sans-medium.woff2 +0 -0
  57. package/dist/fonts/ibm-plex/ibm-plex-sans-regular.woff2 +0 -0
  58. package/dist/fonts/inter/inter-bold.woff2 +0 -0
  59. package/dist/fonts/inter/inter-medium.woff2 +0 -0
  60. package/dist/fonts/inter/inter-regular.woff2 +0 -0
  61. package/dist/fonts/inter/inter-semibold.woff2 +0 -0
  62. package/dist/fonts/jetbrains-mono/jetbrains-mono-bold.woff2 +0 -0
  63. package/dist/fonts/jetbrains-mono/jetbrains-mono-regular.woff2 +0 -0
  64. package/dist/fonts/open-sans/open-sans-bold.woff2 +0 -0
  65. package/dist/fonts/open-sans/open-sans-medium.woff2 +0 -0
  66. package/dist/fonts/open-sans/open-sans-regular.woff2 +0 -0
  67. package/dist/fonts/rubik/rubik-bold.woff2 +0 -0
  68. package/dist/fonts/rubik/rubik-medium.woff2 +0 -0
  69. package/dist/fonts/rubik/rubik-regular.woff2 +0 -0
  70. package/dist/fonts/source-sans/source-sans-bold.woff2 +0 -0
  71. package/dist/fonts/source-sans/source-sans-regular.woff2 +0 -0
  72. package/dist/fonts/source-sans/source-sans-semibold.woff2 +0 -0
  73. package/dist/fonts/titillium-web/titillium-web-bold.woff2 +0 -0
  74. package/dist/fonts/titillium-web/titillium-web-regular.woff2 +0 -0
  75. package/dist/fonts/titillium-web/titillium-web-semibold.woff2 +0 -0
  76. package/dist/fonts/ubuntu/ubuntu-bold.woff2 +0 -0
  77. package/dist/fonts/ubuntu/ubuntu-medium.woff2 +0 -0
  78. package/dist/fonts/ubuntu/ubuntu-regular.woff2 +0 -0
  79. package/dist/icons/phosphor/LICENSE +21 -0
  80. package/dist/icons/phosphor/bold/Phosphor-Bold.ttf +0 -0
  81. package/dist/icons/phosphor/bold/Phosphor-Bold.woff +0 -0
  82. package/dist/icons/phosphor/bold/Phosphor-Bold.woff2 +0 -0
  83. package/dist/icons/phosphor/bold/style.css +4627 -0
  84. package/dist/icons/phosphor/duotone/Phosphor-Duotone.ttf +0 -0
  85. package/dist/icons/phosphor/duotone/Phosphor-Duotone.woff +0 -0
  86. package/dist/icons/phosphor/duotone/Phosphor-Duotone.woff2 +0 -0
  87. package/dist/icons/phosphor/duotone/style.css +12115 -0
  88. package/dist/icons/phosphor/fill/Phosphor-Fill.ttf +0 -0
  89. package/dist/icons/phosphor/fill/Phosphor-Fill.woff +0 -0
  90. package/dist/icons/phosphor/fill/Phosphor-Fill.woff2 +0 -0
  91. package/dist/icons/phosphor/fill/style.css +4627 -0
  92. package/dist/icons/phosphor/light/Phosphor-Light.ttf +0 -0
  93. package/dist/icons/phosphor/light/Phosphor-Light.woff +0 -0
  94. package/dist/icons/phosphor/light/Phosphor-Light.woff2 +0 -0
  95. package/dist/icons/phosphor/light/style.css +4627 -0
  96. package/dist/icons/phosphor/regular/Phosphor.ttf +0 -0
  97. package/dist/icons/phosphor/regular/Phosphor.woff +0 -0
  98. package/dist/icons/phosphor/regular/Phosphor.woff2 +0 -0
  99. package/dist/icons/phosphor/regular/style.css +4627 -0
  100. package/dist/icons/phosphor/thin/Phosphor-Thin.ttf +0 -0
  101. package/dist/icons/phosphor/thin/Phosphor-Thin.woff +0 -0
  102. package/dist/icons/phosphor/thin/Phosphor-Thin.woff2 +0 -0
  103. package/dist/icons/phosphor/thin/style.css +4627 -0
  104. package/dist/vanduo.cjs.js +5569 -0
  105. package/dist/vanduo.cjs.js.map +7 -0
  106. package/dist/vanduo.cjs.min.js +48 -0
  107. package/dist/vanduo.cjs.min.js.map +7 -0
  108. package/dist/vanduo.css +60666 -0
  109. package/dist/vanduo.css.map +1 -0
  110. package/dist/vanduo.esm.js +5548 -0
  111. package/dist/vanduo.esm.js.map +7 -0
  112. package/dist/vanduo.esm.min.js +48 -0
  113. package/dist/vanduo.esm.min.js.map +7 -0
  114. package/dist/vanduo.js +5545 -0
  115. package/dist/vanduo.js.map +7 -0
  116. package/dist/vanduo.min.css +2 -0
  117. package/dist/vanduo.min.css.map +1 -0
  118. package/dist/vanduo.min.js +48 -0
  119. package/dist/vanduo.min.js.map +7 -0
  120. package/fonts/fira-sans/fira-sans-bold.woff2 +0 -0
  121. package/fonts/fira-sans/fira-sans-medium.woff2 +0 -0
  122. package/fonts/fira-sans/fira-sans-regular.woff2 +0 -0
  123. package/fonts/ibm-plex/ibm-plex-sans-bold.woff2 +0 -0
  124. package/fonts/ibm-plex/ibm-plex-sans-medium.woff2 +0 -0
  125. package/fonts/ibm-plex/ibm-plex-sans-regular.woff2 +0 -0
  126. package/fonts/inter/inter-bold.woff2 +0 -0
  127. package/fonts/inter/inter-medium.woff2 +0 -0
  128. package/fonts/inter/inter-regular.woff2 +0 -0
  129. package/fonts/inter/inter-semibold.woff2 +0 -0
  130. package/fonts/jetbrains-mono/jetbrains-mono-bold.woff2 +0 -0
  131. package/fonts/jetbrains-mono/jetbrains-mono-regular.woff2 +0 -0
  132. package/fonts/open-sans/open-sans-bold.woff2 +0 -0
  133. package/fonts/open-sans/open-sans-medium.woff2 +0 -0
  134. package/fonts/open-sans/open-sans-regular.woff2 +0 -0
  135. package/fonts/rubik/rubik-bold.woff2 +0 -0
  136. package/fonts/rubik/rubik-medium.woff2 +0 -0
  137. package/fonts/rubik/rubik-regular.woff2 +0 -0
  138. package/fonts/source-sans/source-sans-bold.woff2 +0 -0
  139. package/fonts/source-sans/source-sans-regular.woff2 +0 -0
  140. package/fonts/source-sans/source-sans-semibold.woff2 +0 -0
  141. package/fonts/titillium-web/titillium-web-bold.woff2 +0 -0
  142. package/fonts/titillium-web/titillium-web-regular.woff2 +0 -0
  143. package/fonts/titillium-web/titillium-web-semibold.woff2 +0 -0
  144. package/fonts/ubuntu/ubuntu-bold.woff2 +0 -0
  145. package/fonts/ubuntu/ubuntu-medium.woff2 +0 -0
  146. package/fonts/ubuntu/ubuntu-regular.woff2 +0 -0
  147. package/icons/phosphor/LICENSE +21 -0
  148. package/icons/phosphor/bold/Phosphor-Bold.ttf +0 -0
  149. package/icons/phosphor/bold/Phosphor-Bold.woff +0 -0
  150. package/icons/phosphor/bold/Phosphor-Bold.woff2 +0 -0
  151. package/icons/phosphor/bold/style.css +4627 -0
  152. package/icons/phosphor/duotone/Phosphor-Duotone.ttf +0 -0
  153. package/icons/phosphor/duotone/Phosphor-Duotone.woff +0 -0
  154. package/icons/phosphor/duotone/Phosphor-Duotone.woff2 +0 -0
  155. package/icons/phosphor/duotone/style.css +12115 -0
  156. package/icons/phosphor/fill/Phosphor-Fill.ttf +0 -0
  157. package/icons/phosphor/fill/Phosphor-Fill.woff +0 -0
  158. package/icons/phosphor/fill/Phosphor-Fill.woff2 +0 -0
  159. package/icons/phosphor/fill/style.css +4627 -0
  160. package/icons/phosphor/light/Phosphor-Light.ttf +0 -0
  161. package/icons/phosphor/light/Phosphor-Light.woff +0 -0
  162. package/icons/phosphor/light/Phosphor-Light.woff2 +0 -0
  163. package/icons/phosphor/light/style.css +4627 -0
  164. package/icons/phosphor/regular/Phosphor.ttf +0 -0
  165. package/icons/phosphor/regular/Phosphor.woff +0 -0
  166. package/icons/phosphor/regular/Phosphor.woff2 +0 -0
  167. package/icons/phosphor/regular/style.css +4627 -0
  168. package/icons/phosphor/thin/Phosphor-Thin.ttf +0 -0
  169. package/icons/phosphor/thin/Phosphor-Thin.woff +0 -0
  170. package/icons/phosphor/thin/Phosphor-Thin.woff2 +0 -0
  171. package/icons/phosphor/thin/style.css +4627 -0
  172. package/js/components/code-snippet.js +639 -0
  173. package/js/components/collapsible.js +226 -0
  174. package/js/components/doc-search.js +936 -0
  175. package/js/components/draggable.js +725 -0
  176. package/js/components/dropdown.js +362 -0
  177. package/js/components/font-switcher.js +253 -0
  178. package/js/components/grid.js +279 -0
  179. package/js/components/image-box.js +372 -0
  180. package/js/components/modals.js +367 -0
  181. package/js/components/navbar.js +264 -0
  182. package/js/components/pagination.js +286 -0
  183. package/js/components/parallax.js +216 -0
  184. package/js/components/preloader.js +183 -0
  185. package/js/components/select.js +444 -0
  186. package/js/components/sidenav.js +303 -0
  187. package/js/components/tabs.js +303 -0
  188. package/js/components/theme-customizer.js +784 -0
  189. package/js/components/theme-switcher.js +183 -0
  190. package/js/components/toast.js +343 -0
  191. package/js/components/tooltips.js +306 -0
  192. package/js/index.js +52 -0
  193. package/js/utils/helpers.js +306 -0
  194. package/js/utils/lifecycle.js +135 -0
  195. package/js/vanduo.js +120 -0
  196. package/package.json +78 -0
package/LICENSE ADDED
@@ -0,0 +1,35 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2024 Vanduo Framework
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
22
+
23
+ ---
24
+
25
+ Third-Party Licenses:
26
+
27
+ Open Color
28
+ Copyright (c) 2016 Heeyeun Jeong
29
+ MIT License
30
+ https://yeun.github.io/open-color/
31
+
32
+ Phosphor Icons
33
+ Copyright (c) 2020 Phosphor Icons
34
+ MIT License
35
+ https://phosphoricons.com/
package/README.md ADDED
@@ -0,0 +1,205 @@
1
+ # Vanduo Framework v1.1.8
2
+
3
+ **Essential just like water is.**
4
+
5
+ - **Pure HTML, CSS, JS**
6
+ - **No third party dependencies**
7
+ - **Free and open source.**
8
+
9
+ ## Overview
10
+
11
+ A lightweight, pure HTML/CSS/JS framework for designing beautiful static websites. No dependencies, no build tools, just clean and simple code.
12
+
13
+ [**Browse Full Documentation →**]([https://vanduo.dev/#docs](https://vanduo.dev/#docs)
14
+
15
+ ## Features
16
+
17
+ - 🎨 **Pure CSS/JS** - No libraries, no dependencies
18
+ - 🚀 **Lightweight** - Minimal file size, maximum performance
19
+ - 📱 **Responsive** - Mobile-first design approach
20
+ - 🎯 **Utility-First** - Flexible utility classes for rapid development
21
+ - 🧩 **Modular** - Import only what you need
22
+ - ♿ **Accessible** - Built with accessibility in mind (WCAG 2.1 AA)
23
+ - 🌙 **Dark Mode** - Automatic OS preference detection + manual toggle
24
+ - 🎛️ **Theme Customizer** - Real-time color, radius, font, and mode customization
25
+ - 🔍 **SEO-Ready** - Comprehensive meta tags, structured data, and sitemap
26
+
27
+ ---
28
+
29
+ ## Quick Start
30
+
31
+ ### Option 1: CDN (Fastest)
32
+
33
+ Load directly from jsDelivr — no download required:
34
+
35
+ ```html
36
+ <!DOCTYPE html>
37
+ <html lang="en">
38
+ <head>
39
+ <meta charset="UTF-8">
40
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
41
+ <title>My Website</title>
42
+ <!-- Vanduo CSS via CDN -->
43
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Nostromo-618/vanduo-framework@main/dist/vanduo.min.css">
44
+ </head>
45
+ <body>
46
+ <!-- Your content here -->
47
+
48
+ <!-- Vanduo JS via CDN -->
49
+ <script src="https://cdn.jsdelivr.net/gh/Nostromo-618/vanduo-framework@main/dist/vanduo.min.js"></script>
50
+ <script>Vanduo.init();</script>
51
+ </body>
52
+ </html>
53
+ ```
54
+
55
+ **Pin to a specific version** (recommended for production):
56
+ ```html
57
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Nostromo-618/vanduo-framework@v1.1.8/dist/vanduo.min.css">
58
+ <script src="https://cdn.jsdelivr.net/gh/Nostromo-618/vanduo-framework@v1.1.8/dist/vanduo.min.js"></script>
59
+ <script>Vanduo.init();</script>
60
+ ```
61
+
62
+ ### ⚠️ Breaking Changes in v1.1.0
63
+
64
+ **CSS Class Prefixing:** All CSS classes now use the `vd-` prefix to prevent collisions with other frameworks:
65
+ - `.btn` → `.vd-btn`
66
+ - `.container` → `.vd-container`
67
+ - `.card` → `.vd-card`
68
+ - etc.
69
+
70
+ **Manual Initialization:** Framework no longer auto-initializes. Explicitly call `Vanduo.init()` after loading:
71
+ ```html
72
+ <script src="dist/vanduo.min.js"></script>
73
+ <script>Vanduo.init();</script>
74
+ ```
75
+
76
+ For dynamic DOM updates (SPAs), run cleanup before re-init:
77
+ ```html
78
+ <script>
79
+ Vanduo.destroyAll();
80
+ Vanduo.init();
81
+ </script>
82
+ ```
83
+
84
+ See [MIGRATION.md](MIGRATION.md) for complete upgrade guide.
85
+
86
+ ### Option 2: Download
87
+
88
+ [**Download dist/ folder**](https://github.com/Nostromo-618/vanduo-framework/tree/main/dist) and include locally:
89
+
90
+ ```html
91
+ <!DOCTYPE html>
92
+ <html lang="en">
93
+ <head>
94
+ <meta charset="UTF-8">
95
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
96
+ <title>My Website</title>
97
+ <link rel="stylesheet" href="dist/vanduo.min.css">
98
+ </head>
99
+ <body>
100
+ <!-- Your content here -->
101
+
102
+ <script src="dist/vanduo.min.js"></script>
103
+ <script>Vanduo.init();</script>
104
+ </body>
105
+ </html>
106
+ ```
107
+
108
+ The `dist/` folder is **self-contained** (CSS, JS, Fonts, Icons).
109
+
110
+ ### Option 3: Source Files
111
+
112
+ For development or when you need more control, use the unminified source:
113
+
114
+ ```html
115
+ <!DOCTYPE html>
116
+ <html lang="en">
117
+ <head>
118
+ <meta charset="UTF-8">
119
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
120
+ <title>My Website</title>
121
+ <link rel="stylesheet" href="css/vanduo.css">
122
+ </head>
123
+ <body>
124
+ <!-- Your content here -->
125
+
126
+ <script src="js/vanduo.js"></script>
127
+ <script>Vanduo.init();</script>
128
+ </body>
129
+ </html>
130
+ ```
131
+
132
+ ---
133
+
134
+ ## LLM Access
135
+
136
+ This project includes an [`llms.txt`](llms.txt) file — a structured markdown summary designed for AI assistants and LLM-powered code editors. It provides quick access to framework documentation, component references, and usage patterns.
137
+
138
+ ---
139
+
140
+ ## Release Assets (Maintainers)
141
+
142
+ Use the hardened upload script to attach only approved bundle artifacts from `dist/`:
143
+
144
+ ```bash
145
+ pnpm run release:assets -- v1.1.8
146
+ ```
147
+
148
+ Notes:
149
+ - If tag is omitted, it defaults to `v` + version from `package.json`.
150
+ - Use `--dry-run` to preview files without uploading.
151
+
152
+ ---
153
+
154
+ ## Documentation
155
+
156
+ Comprehensive documentation for all components, utilities, and customization options is available at vanduo.dev.
157
+
158
+ [**View Documentation**]([https://vanduo.dev/#docs](https://vanduo.dev/#docs)
159
+
160
+ ### Key Capabilities
161
+
162
+ * **Dark Mode**: Works automatically with system preferences. Can be forced via `data-theme="dark"` on `<html>`.
163
+ * **Theme Customizer**: Built-in runtime tool to change colors, fonts, and radius.
164
+ * **Modular Imports**: Import only specific components (e.g., `css/components/buttons.css`) to keep your site lean.
165
+ * **Icons**: Includes [Phosphor Icons](https://phosphoricons.com) (Regular + Fill weights bundled).
166
+
167
+ ---
168
+
169
+ ## Project Structure
170
+
171
+ ```
172
+ vanduo-framework/
173
+ ├── dist/ # Production ready files (minified)
174
+ ├── css/
175
+ │ ├── vanduo.css # Main framework file (imports all)
176
+ │ ├── core/ # Foundation (colors, typography, grid)
177
+ │ ├── components/ # UI components (buttons, cards, etc)
178
+ │ ├── utilities/ # Utility classes
179
+ │ └── effects/ # Visual effects
180
+ ├── js/
181
+ │ ├── vanduo.js # Main entry point
182
+ │ └── components/ # Component logic
183
+ ├── icons/ # Phosphor Icons
184
+ ├── fonts/ # Web fonts
185
+ └── tests/ # Framework test suite
186
+ ```
187
+
188
+ ## Browser Support
189
+
190
+ - Chrome (last 2 versions)
191
+ - Firefox (last 2 versions)
192
+ - Safari (last 2 versions)
193
+ - Edge (last 2 versions)
194
+
195
+ ## License
196
+
197
+ MIT License - see [LICENSE](LICENSE) file for details.
198
+
199
+ ## Credits
200
+
201
+ - **Color System**: [Open Color](https://yeun.github.io/open-color/) by Heeyeun Jeong (MIT License)
202
+ - **Icons**: [Phosphor Icons](https://phosphoricons.com) (MIT License)
203
+
204
+ ---
205
+ Vanduo Framework - Built with ❤️ for the web.
package/css/components/alerts.css ADDED
@@ -0,0 +1,224 @@
1
+ /**
2
+ * Vanduo Framework - Alerts
3
+ * Alert and notification components for user feedback
4
+ */
5
+
6
+ :root {
7
+ /* Alert Spacing (Fibonacci: 21px/13px, ratio ~ phi) */
8
+ --alert-padding-x: 1.3125rem; /* 21px - fib */
9
+ --alert-padding-y: 0.8125rem; /* 13px - fib */
10
+ --alert-border-radius: var(--btn-border-radius);
11
+ --alert-border-width: 1px;
12
+
13
+ /* Alert Colors */
14
+ --alert-primary-bg: var(--color-primary-alpha-10);
15
+ --alert-primary-border: var(--color-primary);
16
+ --alert-primary-text: var(--color-primary-dark);
17
+
18
+ --alert-success-bg: var(--color-success-alpha-10);
19
+ --alert-success-border: var(--color-success);
20
+ --alert-success-text: var(--color-success-dark);
21
+
22
+ --alert-warning-bg: var(--color-warning-alpha-10);
23
+ --alert-warning-border: var(--color-warning);
24
+ --alert-warning-text: var(--color-warning-dark);
25
+
26
+ --alert-error-bg: var(--color-error-alpha-10);
27
+ --alert-error-border: var(--color-error);
28
+ --alert-error-text: var(--color-error-dark);
29
+
30
+ --alert-info-bg: var(--color-info-alpha-10);
31
+ --alert-info-border: var(--color-info);
32
+ --alert-info-text: var(--color-info-dark);
33
+ }
34
+
35
+ /* Dark Theme Overrides */
36
+ [data-theme="dark"] {
37
+ --alert-primary-text: var(--color-primary-light);
38
+ --alert-success-text: var(--color-success-light);
39
+ --alert-warning-text: var(--color-warning-light);
40
+ --alert-error-text: var(--color-error-light);
41
+ --alert-info-text: var(--color-info-light);
42
+ }
43
+
44
+ @media (prefers-color-scheme: dark) {
45
+ :root:not([data-theme]) {
46
+ --alert-primary-text: var(--color-primary-light);
47
+ --alert-success-text: var(--color-success-light);
48
+ --alert-warning-text: var(--color-warning-light);
49
+ --alert-error-text: var(--color-error-light);
50
+ --alert-info-text: var(--color-info-light);
51
+ }
52
+ }
53
+
54
+ /* Base Alert */
55
+ .vd-alert {
56
+ position: relative;
57
+ padding: var(--alert-padding-y) var(--alert-padding-x);
58
+ margin-bottom: 1rem;
59
+ border: var(--alert-border-width) solid transparent;
60
+ border-radius: var(--alert-border-radius);
61
+ font-size: var(--font-size-base);
62
+ line-height: var(--line-height-normal);
63
+ }
64
+
65
+ /* Alert Variants */
66
+ .vd-alert-primary {
67
+ background-color: var(--alert-primary-bg);
68
+ border-color: var(--alert-primary-border);
69
+ color: var(--alert-primary-text);
70
+ }
71
+
72
+ .vd-alert-success {
73
+ background-color: var(--alert-success-bg);
74
+ border-color: var(--alert-success-border);
75
+ color: var(--alert-success-text);
76
+ }
77
+
78
+ .vd-alert-warning {
79
+ background-color: var(--alert-warning-bg);
80
+ border-color: var(--alert-warning-border);
81
+ color: var(--alert-warning-text);
82
+ }
83
+
84
+ .vd-alert-error,
85
+ .vd-alert-danger {
86
+ background-color: var(--alert-error-bg);
87
+ border-color: var(--alert-error-border);
88
+ color: var(--alert-error-text);
89
+ }
90
+
91
+ .vd-alert-info {
92
+ background-color: var(--alert-info-bg);
93
+ border-color: var(--alert-info-border);
94
+ color: var(--alert-info-text);
95
+ }
96
+
97
+ /* Alert with Icon */
98
+ .vd-alert-icon {
99
+ display: flex;
100
+ align-items: flex-start;
101
+ gap: 0.75rem;
102
+ }
103
+
104
+ .vd-alert-icon > svg,
105
+ .vd-alert-icon > .icon {
106
+ flex-shrink: 0;
107
+ width: 1.25rem;
108
+ height: 1.25rem;
109
+ margin-top: 0.125rem;
110
+ }
111
+
112
+ /* Alert Title */
113
+ .vd-alert-title {
114
+ font-weight: var(--font-weight-semibold);
115
+ margin-bottom: 0.25rem;
116
+ }
117
+
118
+ /* Alert Content */
119
+ .vd-alert-content {
120
+ flex: 1;
121
+ }
122
+
123
+ /* Dismissible Alert */
124
+ .vd-alert-dismissible {
125
+ padding-right: 3rem;
126
+ }
127
+
128
+ .vd-alert-close {
129
+ position: absolute;
130
+ top: 0;
131
+ right: 0;
132
+ padding: var(--alert-padding-y) var(--alert-padding-x);
133
+ background: transparent;
134
+ border: none;
135
+ cursor: pointer;
136
+ opacity: 0.5;
137
+ transition: opacity 0.15s ease;
138
+ color: inherit;
139
+ font-size: 1.25rem;
140
+ line-height: 1;
141
+ }
142
+
143
+ .vd-alert-close:hover {
144
+ opacity: 1;
145
+ }
146
+
147
+ .vd-alert-close:focus {
148
+ outline: 2px solid currentColor;
149
+ outline-offset: 2px;
150
+ }
151
+
152
+ /* Alert Link */
153
+ .vd-alert a,
154
+ .vd-alert-link {
155
+ font-weight: var(--font-weight-semibold);
156
+ color: inherit;
157
+ text-decoration: underline;
158
+ }
159
+
160
+ .vd-alert a:hover,
161
+ .vd-alert-link:hover {
162
+ text-decoration: none;
163
+ }
164
+
165
+ /* Solid Variants (filled background) */
166
+ .vd-alert-solid.vd-alert-primary {
167
+ background-color: var(--color-primary);
168
+ border-color: var(--color-primary);
169
+ color: var(--color-white);
170
+ }
171
+
172
+ .vd-alert-solid.vd-alert-success {
173
+ background-color: var(--color-success);
174
+ border-color: var(--color-success);
175
+ color: var(--color-white);
176
+ }
177
+
178
+ .vd-alert-solid.vd-alert-warning {
179
+ background-color: var(--color-warning);
180
+ border-color: var(--color-warning);
181
+ color: var(--color-gray-900);
182
+ }
183
+
184
+ .vd-alert-solid.vd-alert-error,
185
+ .vd-alert-solid.vd-alert-danger {
186
+ background-color: var(--color-error);
187
+ border-color: var(--color-error);
188
+ color: var(--color-white);
189
+ }
190
+
191
+ .vd-alert-solid.vd-alert-info {
192
+ background-color: var(--color-info);
193
+ border-color: var(--color-info);
194
+ color: var(--color-white);
195
+ }
196
+
197
+ /* Outline Variants */
198
+ .vd-alert-outline {
199
+ background-color: transparent;
200
+ }
201
+
202
+ /* Alert Sizes */
203
+ .vd-alert-sm {
204
+ padding: 0.3125rem 0.5rem; /* 5px 8px - fib pair */
205
+ font-size: var(--font-size-sm);
206
+ }
207
+
208
+ .vd-alert-lg {
209
+ padding: 1.3125rem 2.125rem; /* 21px 34px - fib pair */
210
+ font-size: var(--font-size-lg);
211
+ }
212
+
213
+ /* Alert with Border Left Accent */
214
+ .vd-alert-accent {
215
+ border-left-width: 4px;
216
+ border-radius: 0 var(--alert-border-radius) var(--alert-border-radius) 0;
217
+ }
218
+
219
+ /* Reduced Motion */
220
+ @media (prefers-reduced-motion: reduce) {
221
+ .vd-alert-close {
222
+ transition: none;
223
+ }
224
+ }