changed styling for light theme

kirbydesign · Feb 24, 2025 · a44aa2a · a44aa2a
1 parent bc2d53e
commit a44aa2a
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 8 deletions.
diff --git a/libs/extensions/angular/image-banner/src/image-banner.component.html b/libs/extensions/angular/image-banner/src/image-banner.component.html
@@ -1,12 +1,12 @@
 @if (externalLink) {
-  <kirby-card [themeColor]="backgroundBlur === 'none' ? 'white' : 'dark'">
+  <kirby-card [themeColor]="backgroundBlur === 'dark' ? 'dark' : 'white'">
     <ng-container *ngTemplateOutlet="sharedCardContent"></ng-container>
   </kirby-card>
 }
 
 @if (!externalLink) {
   <kirby-card
-    [themeColor]="backgroundBlur === 'none' ? 'white' : 'dark'"
+    [themeColor]="backgroundBlur === 'dark' ? 'dark' : 'white'"
     (click)="bannerClicked($event)"
   >
     <ng-container *ngTemplateOutlet="sharedCardContent"></ng-container>

diff --git a/libs/extensions/angular/image-banner/src/image-banner.component.scss b/libs/extensions/angular/image-banner/src/image-banner.component.scss
@@ -51,7 +51,7 @@ $container-query-breakpoint: 600px;
   filter: blur($blur-radius);
 }
 
-:host(.white) .blur-image {
+:host(.light) .blur-image {
   filter: blur($blur-radius);
 }
 
@@ -63,20 +63,20 @@ $container-query-breakpoint: 600px;
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: rgba($color: #000, $alpha: 42%);
+    background-color: rgba($color: #000, $alpha: 32%);
     z-index: 1;
   }
 }
 
-:host(.white) .blur-image-wrapper {
+:host(.light) .blur-image-wrapper {
   &::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: rgba($color: #fff, $alpha: 55%);
+    background-color: rgba($color: #fff, $alpha: 45%);
     z-index: 1;
   }
 }

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
@@ -76,7 +76,7 @@ export const LightBackgroundBlur: Story = {
     title: 'Light Background Blur',
     bodyText: 'This is the body text.',
     imagePath: 'assets/images/leaves.jpg',
-    backgroundBlur: 'white',
+    backgroundBlur: 'light',
     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' | 'white' | 'none' = 'dark';
+  backgroundBlur: 'dark' | 'light' | 'none' = 'dark';
 
   /**
    * Emitted every time the banner is activated. The entire banner is interactive, and will be activated by click and keyboard interaction.