@sofidevo/astro-dynamic-header 5.0.3 → 5.0.5

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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/Header.astro +17 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sofidevo/astro-dynamic-header",
3
- "version": "5.0.3",
3
+ "version": "5.0.5",
4
4
  "description": "A dynamic Astro header component that switches between floating and fullscreen styles",
5
5
  "type": "module",
6
6
  "main": "./src/index.ts",
package/src/Header.astro CHANGED
@@ -34,7 +34,7 @@ export interface Props {
34
34
  * <Header preset="dark" />
35
35
  * ```
36
36
  */
37
- preset?: "light" | "dark" | "auto";
37
+ preset?: "light" | "dark" | "auto" | "none" ;
38
38
 
39
39
  /**
40
40
  * Navigation links, home link, and fine-grained classes for the desktop
@@ -116,7 +116,10 @@ const {
116
116
 
117
117
 
118
118
 
119
- const forcedClass = preset !== "auto" ? `header--force-${preset}` : "";
119
+ let forcedClass = "";
120
+ if (preset !== "none") {
121
+ forcedClass = `header--force-${preset}`;
122
+ }
120
123
  ---
121
124
 
122
125
  <style >
@@ -233,6 +236,16 @@ const forcedClass = preset !== "auto" ? `header--force-${preset}` : "";
233
236
  --text-color: var(--d-text, #ffffff);
234
237
  --accent-color: var(--d-accent, #00ffff);
235
238
  --backdrop-blur: var(--d-blur, blur(20px));
239
+
240
+ }
241
+
242
+ .header.header--force-auto {
243
+ --bg-color: var(--l-bg);
244
+ --bg-color-opaque: var(--l-bg-opaque, rgba(255, 255, 255, 0.748));
245
+ --text-color: var(--l-text, #1a1a1a);
246
+ --accent-color: var(--l-accent, #3e1c71);
247
+ --backdrop-blur: var(--l-blur, blur(20px));
248
+ background-color: var(--bg-color);
236
249
  }
237
250
 
238
251
  /* Forced themes: higher specificity than .header, no !important needed */
@@ -242,6 +255,7 @@ const forcedClass = preset !== "auto" ? `header--force-${preset}` : "";
242
255
  --text-color: var(--d-text, #ffffff);
243
256
  --accent-color: var(--d-accent, #00ffff);
244
257
  --backdrop-blur: var(--d-blur, blur(30px));
258
+ background-color: var(--bg-color);
245
259
  }
246
260
 
247
261
  .header.header--force-light {
@@ -250,6 +264,7 @@ const forcedClass = preset !== "auto" ? `header--force-${preset}` : "";
250
264
  --text-color: var(--l-text, #1a1a1a);
251
265
  --accent-color: var(--l-accent, #3e1c71);
252
266
  --backdrop-blur: var(--l-blur, blur(30px));
267
+ background-color: var(--bg-color);
253
268
  }
254
269
 
255
270
  .header__container {