added transparent layer to themes

kirbydesign · Feb 24, 2025 · d05a832 · d05a832
1 parent 5cf825f
commit d05a832
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 5 deletions.
diff --git a/libs/extensions/angular/image-banner/src/image-banner.component.scss b/libs/extensions/angular/image-banner/src/image-banner.component.scss
@@ -49,12 +49,36 @@ $container-query-breakpoint: 600px;
 
 :host(.dark) .blur-image {
   filter: blur($blur-radius);
-  opacity: 0.45;
 }
 
-:host(.light) .blur-image {
+:host(.white) .blur-image {
   filter: blur($blur-radius);
-  opacity: 0.45;
+}
+
+:host(.dark) .blur-image-wrapper {
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba($color: #000, $alpha: 42%);
+    z-index: 1;
+  }
+}
+
+:host(.white) .blur-image-wrapper {
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba($color: #fff, $alpha: 55%);
+    z-index: 1;
+  }
 }
 
 .blur-image-wrapper {

diff --git a/libs/extensions/angular/image-banner/src/image-banner.component.stories.ts b/libs/extensions/angular/image-banner/src/image-banner.component.stories.ts
@@ -52,7 +52,7 @@ export const LightBackgroundBlur: Story = {
     title: 'Light Background Blur',
     bodyText: 'This is the body text.',
     imagePath: 'assets/images/leaves.jpg',
-    backgroundBlur: 'light',
+    backgroundBlur: 'white',
     actionButtonText: 'Read more',
   },
 };

diff --git a/libs/extensions/angular/image-banner/src/image-banner.component.ts b/libs/extensions/angular/image-banner/src/image-banner.component.ts
@@ -47,7 +47,7 @@ export class ImageBannerComponent {
    */
   @HostBinding('class')
   @Input()
-  backgroundBlur: 'dark' | 'light' | 'none' = 'dark';
+  backgroundBlur: 'dark' | 'white' | 'none' = 'dark';
 
   /**
    * Emitted every time the banner is activated. The entire banner is interactive, and will be activated by click and keyboard interaction.