Introduce new attention level designs for button and related theming …

…for card (#2735)

Co-authored-by: mark-drastrup <mark.drastrup@gmail.com>

apps/cookbook/src/app/examples/dropdown-example/examples/attention-level.ts

@@ -2,20 +2,69 @@ import { Component, Input } from '@angular/core';
 
 const config = {
   selector: 'cookbook-dropdown-example-attention-level',
-  template: `<kirby-dropdown
-  [size]="size"
-  placeholder="Dropdown with attention level"
-  attentionLevel="2"
-  [items]="items">
-</kirby-dropdown>`,
+  template: `<kirby-card hasPadding="true" class="attention-levels" [themeColor]="themeColor"> 
+  <kirby-dropdown
+    [size]="size"
+    placeholder="Dropdown with attention level 1"
+    attentionLevel="1"
+    expand="block"
+    usePopover="true"
+    [items]="items">
+    </kirby-dropdown> 
+
+    <kirby-dropdown
+    [size]="size"
+    placeholder="Dropdown with attention level 2"
+    attentionLevel="2"
+    expand="block"
+    usePopover="true"
+    [items]="items">
+  </kirby-dropdown> 
+
+  <kirby-dropdown
+    [size]="size"
+    placeholder="Dropdown with attention level 3"
+    attentionLevel="3"
+    expand="block"
+    usePopover="true"
+    [items]="items">
+  </kirby-dropdown> 
+</kirby-card>
+
+<div>
+<select (change)="onChange($event.target.value)">
+  <option
+    *ngFor="let color of themeColors"
+    value="{{ color }}"
+    [attr.selected]="themeColor === color ? true : null"
+  >
+    Card color: {{ color }}
+  </option>
+</select>
+</div>
+
+<p class="comment small">
+  <em
+    ><strong>Please note</strong>, these examples have <code>usePopover</code> enabled to not be cut off by the card.
+  </em>
+</p>
+`,
 };
 
 @Component({
   selector: config.selector,
   template: config.template,
+  styleUrls: ['./dropdown-examples.shared.scss'],
 })
 export class DropdownExampleAttentionLevelComponent {
   template: string = config.template;
   items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];
+  themeColors = ['light', 'white', 'dark'];
+  themeColor = 'white';
+
   @Input() size: string;
+
+  onChange(value) {
+    this.themeColor = value;
+  }
 }

apps/cookbook/src/app/examples/dropdown-example/examples/dropdown-examples.shared.scss

@@ -0,0 +1,27 @@
+@use 'sass:map';
+@use '@kirbydesign/core/src/scss/utils';
+
+kirby-card {
+  margin-block: utils.size('m');
+
+  &.attention-levels {
+    max-width: map.get(utils.$breakpoints, 'small');
+  }
+
+  kirby-dropdown + kirby-dropdown {
+    margin-top: utils.size('s');
+  }
+}
+
+p {
+  margin-top: utils.size('s');
+}
+
+.comment {
+  font-style: italic;
+  color: utils.get-text-color('semi-dark');
+
+  &.small {
+    font-size: smaller;
+  }
+}

libs/core/src/scss/themes/_colors.scss

@@ -14,11 +14,13 @@ $notification-colors: (
 $system-colors: (
   'background-color': #f6f6f6,
   'white': #fff,
+  'white-overlay': rgb(255 255 255 / 15%),
   'light': #f2f2f2,
   'semi-light': #ebebeb,
   'medium': #d1d1d1,
   'semi-dark': #8e8e8e,
   'dark': #353535,
+  'dark-overlay': rgb(28 28 28 / 6%),
   'black': #1c1c1c,
 );
 $text-colors: (

libs/core/src/scss/themes/_component-themes.scss

@@ -0,0 +1,17 @@
+@use '../utils';
+
+@mixin apply-dark-theme {
+  --kirby-interactive-element-background-color: #{utils.get-color('white-overlay')};
+  --kirby-interactive-element-color: #{utils.get-color('white')};
+}
+
+@mixin apply-white-theme {
+  --kirby-interactive-element-background-color: #{utils.get-color('dark-overlay')};
+  --kirby-interactive-element-color: #{utils.get-color('black')};
+}
+
+@mixin apply-light-theme {
+  --kirby-interactive-element-background-color: #{utils.get-color('white')};
+  --kirby-interactive-element-color: #{utils.get-color('white-contrast')};
+  --kirby-interactive-elevation: #{utils.get-elevation(2)};
+}

libs/core/src/scss/themes/_index.scss

@@ -0,0 +1 @@
+@forward 'component-themes';

libs/designsystem/card/src/card.component.scss

@@ -1,12 +1,23 @@
 @use '@kirbydesign/core/src/scss/interaction-state';
 @use '@kirbydesign/core/src/scss/utils';
+@use '@kirbydesign/core/src/scss/themes';
 
 :host {
   --kirby-card-main-background-color: #{utils.get-color('white')};
   --kirby-card-main-color: #{utils.get-color('white-contrast')};
   --kirby-card-footer-background-color: #{utils.get-color('white')};
   --kirby-card-footer-color: #{utils.get-color('white-contrast')};
 
+  @include themes.apply-white-theme;
+
+  &.kirby-color-brightness-light {
+    @include themes.apply-light-theme;
+  }
+
+  &.kirby-color-brightness-dark {
+    @include themes.apply-dark-theme;
+  }
+
   @include interaction-state.extend-content {
     display: inherit;
     flex-direction: inherit;

libs/designsystem/src/lib/components/avatar/avatar.component.spec.ts

@@ -184,8 +184,12 @@ describe('AvatarComponent', () => {
 
   describe(`when rendering Avatar with themeColor`, () => {
     const colors = [
-      ...ColorHelper.mainColors,
+      ...ColorHelper.notificationColors,
+      ...ColorHelper.brandColors,
+      DesignTokenHelper.getColor('medium'),
       DesignTokenHelper.getColor('white'),
+      DesignTokenHelper.getColor('dark'),
+      DesignTokenHelper.getColor('light'),
       DesignTokenHelper.getColor('semi-light'),
     ];
     colors.forEach((color) => {

libs/designsystem/src/lib/components/button/button.component.integration.spec.ts

@@ -97,15 +97,6 @@ describe('ButtonComponent in Kirby Page', () => {
       });
     });
 
-    it('should render with transparent border', async () => {
-      await TestHelper.whenReady(ionToolbar);
-      expect(actionButtonInHeader).toHaveComputedStyle({
-        'border-width': '1px',
-        'border-style': 'solid',
-        'border-color': 'transparent',
-      });
-    });
-
     it('should render with correct size', () => {
       expect(actionButtonInHeader).toHaveComputedStyle({
         width: 'auto',
@@ -136,7 +127,7 @@ describe('ButtonComponent in Kirby Page', () => {
     it('should render with correct background-color', async () => {
       await TestHelper.whenReady(ionContent);
       expect(actionButtonInPage).toHaveComputedStyle({
-        'background-color': 'transparent',
+        'background-color': getColor('white'),
       });
     });
 
@@ -146,15 +137,6 @@ describe('ButtonComponent in Kirby Page', () => {
         color: getColor('white', 'contrast'),
       });
     });
-
-    it('should render with transparent border', async () => {
-      await TestHelper.whenReady(ionContent);
-      expect(actionButtonInPage).toHaveComputedStyle({
-        'border-width': '1px',
-        'border-style': 'solid',
-        'border-color': getColor('medium'),
-      });
-    });
   });
 
   describe('inside Page Title', () => {
@@ -177,15 +159,6 @@ describe('ButtonComponent in Kirby Page', () => {
       });
     });
 
-    it('should render with transparent border', async () => {
-      await TestHelper.whenReady(ionContent);
-      expect(normalButtonInPage).toHaveComputedStyle({
-        'border-width': '1px',
-        'border-style': 'solid',
-        'border-color': 'transparent',
-      });
-    });
-
     it('should render with correct color', async () => {
       await TestHelper.whenReady(ionContent);
       expect(normalButtonInPage).toHaveComputedStyle({

libs/designsystem/src/lib/components/button/button.component.scss

@@ -61,7 +61,8 @@ $button-width: (
 @mixin button-no-decoration {
   --kirby-button-background-color: transparent;
   --kirby-button-color: #{utils.get-color('black')};
-  --kirby-button-border-color: transparent;
+
+  box-shadow: none;
 
   @include interaction-state.apply-hover;
   @include interaction-state.apply-active('s');
@@ -83,31 +84,30 @@ $button-width: (
   --kirby-button-background-color: #{utils.get-color('black')};
   --kirby-button-color: #{utils.get-color('black-contrast')};
 
-  @include interaction-state.apply-hover('l', $make-lighter: true);
-  @include interaction-state.apply-active('xxxl', $make-lighter: true);
+  @include interaction-state.apply-hover('s', $make-lighter: true);
+  @include interaction-state.apply-active('m', $make-lighter: true);
 }
 
 @mixin button-attentionlevel3 {
-  // Expect canvas underneath to be a light color
-  --kirby-button-background-color: transparent;
-  --kirby-button-color: #{utils.get-color('black')};
-  --kirby-button-border-color: #{utils.get-color('medium')};
+  --kirby-button-background-color: var(
+    --kirby-interactive-element-background-color,
+    #{utils.get-color('white')}
+  );
+  --kirby-button-color: var(--kirby-interactive-element-color, #{utils.get-color('black')});
 
-  @include interaction-state.apply-hover('xxxs');
-  @include interaction-state.apply-active('xxs');
+  @include interaction-state.apply-hover('xs');
+  @include interaction-state.apply-active('s');
 }
 
 :host {
-  $border-width: 1px;
-
   --kirby-button-padding-left: #{utils.size('m')};
   --kirby-button-padding-right: #{utils.size('m')};
 
   @include utils.accessible-target-size;
   @include interaction-state.apply-focus-visible;
-  @include interaction-state.initialize-layer($border-width);
-  @include interaction-state.apply-hover;
-  @include interaction-state.apply-active('s');
+  @include interaction-state.initialize-layer;
+  @include interaction-state.apply-hover('xxxs');
+  @include interaction-state.apply-active;
   @include interaction-state.extend-content {
     display: inherit;
     width: inherit;
@@ -120,6 +120,7 @@ $button-width: (
   font-family: var(--kirby-font-family);
   background-color: var(--kirby-button-background-color, initial);
   color: var(--kirby-button-color, inherit);
+  box-shadow: var(--kirby-interactive-elevation);
   border-radius: utils.$border-radius-round;
   box-sizing: border-box; // Ensure border is not added to button height
   display: inline-flex;
@@ -141,9 +142,7 @@ $button-width: (
   // Outline is applied on button border instead,
   // to keep the rounded shape:
   outline: none;
-  border-width: $border-width;
-  border-style: solid;
-  border-color: var(--kirby-button-border-color, transparent);
+  border: none;
 
   &.no-margin {
     margin: 0;
@@ -206,28 +205,6 @@ $button-width: (
     pointer-events: none;
   }
 
-  :host-context(.kirby-color-brightness-dark) {
-    &.no-decoration {
-      --kirby-button-color: #{utils.get-color('white')};
-    }
-
-    &.attention-level2 {
-      --kirby-button-background-color: #{utils.get-color('white')};
-      --kirby-button-color: #{utils.get-color('white-contrast')};
-
-      @include interaction-state.apply-hover;
-      @include interaction-state.apply-active('s');
-    }
-
-    &.attention-level3 {
-      --kirby-button-border-color: #{utils.get-color('white')};
-      --kirby-button-color: #{utils.get-color('white')};
-
-      @include interaction-state.apply-hover('xs', $make-lighter: true);
-      @include interaction-state.apply-active('m', $make-lighter: true);
-    }
-  }
-
   &.floating {
     $fab-size: 64px;
 
@@ -241,37 +218,40 @@ $button-width: (
   }
 }
 
-:host-context(kirby-item)[slot='end'] {
-  margin-inline-start: utils.size('s');
-}
-
-:host-context(kirby-alert).ok-btn {
-  --kirby-button-background-color: #{utils.get-color('success')};
-  --kirby-button-color: #{utils.get-color('success-contrast')};
-}
+:host-context(.kirby-color-brightness-dark) {
+  &.no-decoration {
+    --kirby-button-color: #{utils.get-color('white')};
 
-:host-context(kirby-dropdown) {
-  justify-content: space-between;
+    @include interaction-state.apply-hover('xs', $make-lighter: true);
+    @include interaction-state.apply-active('m', $make-lighter: true);
+  }
 
   &.attention-level2 {
     --kirby-button-background-color: #{utils.get-color('white')};
     --kirby-button-color: #{utils.get-color('white-contrast')};
 
-    @include interaction-state.apply-hover('xxxs');
-    @include interaction-state.apply-active('xxs');
+    @include interaction-state.apply-hover;
+    @include interaction-state.apply-active('s');
+  }
 
-    box-shadow: utils.get-elevation(2);
+  &.attention-level3 {
+    @include interaction-state.apply-hover('xxxs', $make-lighter: true);
+    @include interaction-state.apply-active('xxs', $make-lighter: true);
   }
 }
 
-:host-context(kirby-action-sheet) {
-  &.attention-level2 {
-    --kirby-button-background-color: #{utils.get-color('white')};
-    --kirby-button-color: #{utils.get-color('white-contrast')};
+:host-context(kirby-item)[slot='end'] {
+  margin-inline-start: utils.size('s');
+}
 
-    @include interaction-state.apply-hover;
-    @include interaction-state.apply-active;
-  }
+:host-context(kirby-alert).ok-btn {
+  --kirby-button-background-color: #{utils.get-color('success')};
+  --kirby-button-color: #{utils.get-color('success-contrast')};
+}
+
+:host-context(kirby-dropdown) {
+  // place arrow-icon in dropdown correctly
+  justify-content: space-between;
 }
 
 // Temp fix for https://github.com/angular/angular-cli/issues/13854#issuecomment-470831308