Remove card mode to align elevation

apps/cookbook/src/app/examples/card-example/card-example.module.ts

@@ -10,6 +10,7 @@ import { CardExampleDisclosureComponent } from './examples/disclosure';
 import { CardExampleColorComponent } from './examples/color';
 import { CardExampleDefaultComponent } from './examples/default';
 import { CardExampleFlagComponent } from './examples/flag';
+import { CardExampleFlatComponent } from './examples/flat';
 
 const COMPONENT_DECLARATIONS = [
   CardExampleComponent,
@@ -18,6 +19,7 @@ const COMPONENT_DECLARATIONS = [
   CardExampleColorComponent,
   CardExampleDisclosureComponent,
   CardExampleBackgroundImageComponent,
+  CardExampleFlatComponent,
 ];
 
 @NgModule({

apps/cookbook/src/app/examples/card-example/examples/flat.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+
+const config = {
+  selector: 'cookbook-card-example-flat',
+  template: `<kirby-card hasPadding="true" flat="true">
+    <strong>A flat card</strong>
+    <p>Use with caution.</p>
+    <p>In general the look and feel of the default card is preferred in most use cases as it elevates the card a bit from the background.
+    But if you need a flat look, here it is!</p>
+</kirby-card>`,
+};
+
+@Component({
+  selector: config.selector,
+  template: config.template,
+  styleUrls: ['./card-example.shared.scss'],
+})
+export class CardExampleFlatComponent {
+  template: string = config.template;
+}

apps/cookbook/src/app/showcase/badge-showcase/badge-showcase.component.html

@@ -30,7 +30,7 @@ <h2>Examples</h2>
 <h3>Badge with numbers</h3>
 <p>Using a badge with a number can be a good way to indicate specific status on an element.</p>
 <p>
-  <kirby-card [mode]="_cardMode" [hasPadding]="_cardHasPadding">
+  <kirby-card [flat]="true" [hasPadding]="_cardHasPadding">
     <cookbook-badge-example-number #badgeExampleNumber></cookbook-badge-example-number>
     <cookbook-example-viewer [html]="badgeExampleNumber.template"> </cookbook-example-viewer>
   </kirby-card>
@@ -41,7 +41,7 @@ <h3>Badge with text</h3>
   Badges can also be used together with a text. Flags might in some cases be a better alternative.
 </p>
 <p>
-  <kirby-card [mode]="_cardMode" [hasPadding]="_cardHasPadding">
+  <kirby-card [flat]="true" [hasPadding]="_cardHasPadding">
     <cookbook-badge-example-text #badgeExampleText></cookbook-badge-example-text>
     <cookbook-example-viewer [html]="badgeExampleText.template"> </cookbook-example-viewer>
   </kirby-card>
@@ -53,7 +53,7 @@ <h3>Badge with icons</h3>
   existence of an associated element (e.g. an attachment).
 </p>
 <p>
-  <kirby-card [mode]="_cardMode" [hasPadding]="_cardHasPadding">
+  <kirby-card [flat]="true" [hasPadding]="_cardHasPadding">
     <cookbook-badge-example-icon #badgeExampleIcon></cookbook-badge-example-icon><br />
     <cookbook-example-viewer [html]="badgeExampleIcon.template"> </cookbook-example-viewer>
   </kirby-card>
@@ -65,7 +65,7 @@ <h3>Small Badges</h3>
   without any content. This can be useful to indicate status on an element.
 </p>
 <p>
-  <kirby-card [mode]="_cardMode" [hasPadding]="_cardHasPadding">
+  <kirby-card [flat]="true" [hasPadding]="_cardHasPadding">
     <cookbook-badge-example-small #badgeExampleSmall></cookbook-badge-example-small>
     <cookbook-example-viewer [html]="badgeExampleSmall.template"> </cookbook-example-viewer>
   </kirby-card>

apps/cookbook/src/app/showcase/badge-showcase/badge-showcase.component.ts

@@ -1,18 +1,16 @@
 import { Component } from '@angular/core';
+import exampleHtml from '../../examples/badge-example/badge-example.component.html?raw';
 import {
   ApiDescriptionProperty,
   ApiDescriptionPropertyColumns,
 } from '~/app/shared/api-description/api-description-properties/api-description-properties.component';
 
-import exampleHtml from '../../examples/badge-example/badge-example.component.html?raw';
-
 @Component({
   selector: 'cookbook-badge-showcase',
   templateUrl: './badge-showcase.component.html',
 })
 export class BadgeShowcaseComponent {
   exampleHtml = exampleHtml;
-  _cardMode = 'flat';
   _cardHasPadding = true;
 
   _properties: ApiDescriptionProperty[] = [

apps/cookbook/src/app/showcase/card-showcase/card-showcase.component.html

@@ -23,6 +23,7 @@ <h2>Default</h2>
 </cookbook-example-viewer>
 
 <h2>State & Disclosure</h2>
+
 <p>
   Whenever a card can be interacted with it is a best practice to also add a disclosure indicator,
   to show that it navigates to a new page, opens a modal or similar.
@@ -84,6 +85,16 @@ <h2>Background image</h2>
   ></cookbook-card-example-background-image>
 </cookbook-example-viewer>
 
+<h2>Flat</h2>
+<p>
+  By default the card has a slightly elevated look with a shadow around its edges. This can be
+  removed by setting the flat input, but be aware that this option should not be used with a card
+  that can be interacted with (clickable, disclosure) as it lacks proper affordance.
+</p>
+<cookbook-example-viewer [html]="flatExample.template">
+  <cookbook-card-example-flat #flatExample></cookbook-card-example-flat>
+</cookbook-example-viewer>
+
 <kirby-divider [hasMargin]="true"></kirby-divider>
 
 <h2>API Description</h2>

apps/cookbook/src/app/showcase/card-showcase/card-showcase.component.ts

@@ -32,11 +32,10 @@ export class CardShowcaseComponent {
       type: ['string'],
     },
     {
-      name: 'mode',
-      description:
-        '(Optional) Sets a custom elevation on the card. Default elevation = 2, flat = 0, highlighted = 4.',
+      name: 'flat',
+      description: '(Optional) Remove elevation on the card. Default elevation = 2, flat = 0.',
       defaultValue: '',
-      type: ['flat', 'highlighted'],
+      type: ['boolean'],
     },
     {
       name: 'hasPadding',

apps/cookbook/src/app/showcase/chart-showcase/chart-showcase.component.html

@@ -17,7 +17,7 @@
   labels, interactions, more complex datasets & custom options.
 </p>
 <p>
-  <kirby-card [mode]="_cardMode" [hasPadding]="_cardHasPadding">
+  <kirby-card [flat]="true" [hasPadding]="_cardHasPadding">
     <cookbook-example-viewer [html]="simpleColumnExample.template">
       <cookbook-chart-example-simple-column
         #simpleColumnExample
@@ -35,7 +35,7 @@ <h3>Column Chart</h3>
 <p>The column chart visualizes data from different categories as rectangles.</p>
 <p>To render a column chart set <code>type</code> to <code>"column"</code>.</p>
 <p>
-  <kirby-card [mode]="_cardMode" [hasPadding]="_cardHasPadding">
+  <kirby-card [flat]="true" [hasPadding]="_cardHasPadding">
     <cookbook-example-viewer [html]="columnExample.template" [ts]="columnExample.codeSnippet">
       <cookbook-chart-example-column #columnExample></cookbook-chart-example-column>
     </cookbook-example-viewer>
@@ -46,7 +46,7 @@ <h3>Bar Chart</h3>
 <p>The bar chart visualizes data from different categories as rectangles along the x-axis.</p>
 <p>To render a bar chart set <code>type</code> to <code>'bar'</code>.</p>
 <p>
-  <kirby-card [mode]="_cardMode" [hasPadding]="_cardHasPadding">
+  <kirby-card [flat]="true" [hasPadding]="_cardHasPadding">
     <cookbook-example-viewer [html]="barExample.template">
       <cookbook-chart-example-bar #barExample></cookbook-chart-example-bar>
     </cookbook-example-viewer>
@@ -57,7 +57,7 @@ <h3>Line Chart</h3>
 <p>The line chart visualizes data from different categories as a line along the x-axis.</p>
 <p>To render a line chart set <code>type</code> to <code>'line'</code>.</p>
 <p>
-  <kirby-card [mode]="_cardMode" [hasPadding]="_cardHasPadding">
+  <kirby-card [flat]="true" [hasPadding]="_cardHasPadding">
     <cookbook-example-viewer [html]="lineExample.template">
       <cookbook-chart-example-line #lineExample></cookbook-chart-example-line>
     </cookbook-example-viewer>
@@ -104,7 +104,7 @@ <h3>Interacting with charts</h3>
   >.
 </p>
 <p>
-  <kirby-card [mode]="_cardMode" [hasPadding]="_cardHasPadding">
+  <kirby-card [flat]="true" [hasPadding]="_cardHasPadding">
     <cookbook-example-viewer
       [html]="interactionExample.template"
       [ts]="interactionExample.codeSnippet"
@@ -117,7 +117,7 @@ <h3>Interacting with charts</h3>
 <h3 id="stacked-bar-and-column-charts">Stacked Bar & column charts</h3>
 <p>Stacked charts can be created using a combination of custom options and datasets.</p>
 <p>
-  <kirby-card [mode]="_cardMode" [hasPadding]="_cardHasPadding">
+  <kirby-card [flat]="true" [hasPadding]="_cardHasPadding">
     <cookbook-example-viewer [html]="stackedExample.template" [ts]="stackedExample.codeSnippet">
       <cookbook-chart-example-column-stacked #stackedExample>
       </cookbook-chart-example-column-stacked>
@@ -153,7 +153,7 @@ <h2><a id="datasets">Datasets</a></h2>
   used to draw a line:
 </p>
 <p>
-  <kirby-card [mode]="_cardMode" [hasPadding]="_cardHasPadding">
+  <kirby-card [flat]="true" [hasPadding]="_cardHasPadding">
     <cookbook-example-viewer
       [html]="multipleDatasetsExample.template"
       [ts]="multipleDatasetsExample.codeSnippet"
@@ -220,7 +220,7 @@ <h2>Annotations</h2>
 </p>
 
 <p>
-  <kirby-card [mode]="_cardMode" [hasPadding]="_cardHasPadding">
+  <kirby-card [flat]="true" [hasPadding]="_cardHasPadding">
     <cookbook-example-viewer
       [html]="annotationsExample.template"
       [ts]="annotationsExample.codeSnippet"
@@ -240,7 +240,7 @@ <h2>Line Chart with fill</h2>
   <a href="https://www.chartjs.org/docs/latest/samples/area/line-datasets.html">Area charts</a>
 </p>
 <p>
-  <kirby-card [mode]="_cardMode" [hasPadding]="_cardHasPadding">
+  <kirby-card [flat]="true" [hasPadding]="_cardHasPadding">
     <cookbook-example-viewer [html]="lineAreaExample.template" [ts]="lineAreaExample.codeSnippet">
       <cookbook-chart-example-area-line #lineAreaExample></cookbook-chart-example-area-line>
     </cookbook-example-viewer>
@@ -301,7 +301,7 @@ <h2>Accessibility</h2>
 </p>
 
 <p>
-  <kirby-card [mode]="_cardMode" [hasPadding]="_cardHasPadding">
+  <kirby-card [flat]="true" [hasPadding]="_cardHasPadding">
     <cookbook-example-viewer
       [html]="accessibilityExample.template"
       [ts]="accessibilityExample.codeSnippet"

apps/cookbook/src/app/showcase/chart-showcase/chart-showcase.component.ts

@@ -10,7 +10,6 @@ import {
   templateUrl: './chart-showcase.component.html',
 })
 export class ChartShowcaseComponent {
-  _cardMode = 'flat';
   _cardHasPadding = true;
   _apiDescriptionProperties: ApiDescriptionProperty[] = [
     {

apps/cookbook/src/app/showcase/item-sliding-showcase/item-sliding-showcase.component.html

@@ -23,7 +23,7 @@ <h3>Simple list with swipe actions</h3>
       when selected. The delete action has been configured to display an icon.
     </p>
 
-    <kirby-card [mode]="_cardMode" [hasPadding]="_cardHasPadding">
+    <kirby-card [flat]="true" [hasPadding]="_cardHasPadding">
       <cookbook-example-viewer [html]="simpleExample.template" [ts]="simpleExample.codeSnippet">
         <cookbook-item-sliding-simple-example #simpleExample></cookbook-item-sliding-simple-example>
       </cookbook-example-viewer>
@@ -36,7 +36,7 @@ <h3>Conditional configuration of swipe actions</h3>
       'delete' swipe action is conditionally disabled on a per item basis, based on whether it is
       deleteable.
     </p>
-    <kirby-card [mode]="_cardMode" [hasPadding]="_cardHasPadding">
+    <kirby-card [flat]="true" [hasPadding]="_cardHasPadding">
       <cookbook-example-viewer
         [html]="conditionalExample.template"
         [ts]="conditionalExample.codeSnippet"

apps/cookbook/src/app/showcase/item-sliding-showcase/item-sliding-showcase.component.ts

@@ -6,7 +6,6 @@ import { ApiDescriptionProperty } from '~/app/shared/api-description/api-descrip
   templateUrl: './item-sliding-showcase.component.html',
 })
 export class ItemSlidingShowcaseComponent {
-  _cardMode = 'flat';
   _cardHasPadding = true;
 
   _inputPropertiesApiDescription: ApiDescriptionProperty[] = [

apps/cookbook/src/app/showcase/stock-chart-showcase/stock-chart-showcase.component.html

@@ -34,7 +34,7 @@
 </small>
 
 <p>
-  <kirby-card [mode]="_cardMode" [hasPadding]="_cardHasPadding">
+  <kirby-card [flat]="true" [hasPadding]="_cardHasPadding">
     <cookbook-example-viewer [html]="stockExample.template" [ts]="stockExample.codeSnippet">
       <cookbook-chart-example-stock #stockExample></cookbook-chart-example-stock>
     </cookbook-example-viewer>
@@ -48,7 +48,7 @@ <h2>Stock Chart with multiple datasets</h2>
   in the data labels will be suffixed with '%' as can be seen on the below example.
 </p>
 <p>
-  <kirby-card [mode]="_cardMode" [hasPadding]="_cardHasPadding">
+  <kirby-card [flat]="true" [hasPadding]="_cardHasPadding">
     <cookbook-example-viewer
       [html]="stockComparisonExample.template"
       [ts]="stockComparisonExample.codeSnippet"

apps/cookbook/src/app/showcase/stock-chart-showcase/stock-chart-showcase.component.ts

@@ -10,7 +10,6 @@ import {
   templateUrl: './stock-chart-showcase.component.html',
 })
 export class StockChartShowcaseComponent {
-  _cardMode = 'flat';
   _cardHasPadding = true;
   _apiDescriptionProperties: ApiDescriptionProperty[] = [
     {

libs/core/src/scss/_global-styles.scss

@@ -60,7 +60,7 @@ ion-modal.kirby-overlay {
     --background: var(--kirby-modal-background, #{utils.get-color('background-color')});
     --border-radius: 0;
     --height: auto;
-    --box-shadow: #{utils.get-elevation(8)};
+    --box-shadow: #{utils.get-elevation(4)};
 
     &.kirby-modal-compact {
       --border-radius: #{utils.$border-radius};
@@ -158,7 +158,7 @@ ion-modal.kirby-overlay {
   &.kirby-alert {
     --background: #{utils.get-color('background-color')};
     --border-radius: #{utils.$border-radius};
-    --box-shadow: #{utils.get-elevation(8)};
+    --box-shadow: #{utils.get-elevation(4)};
     --max-width: #{utils.$alert-max-width};
     --height: auto;
   }

libs/core/src/scss/base/_variables.scss

@@ -98,7 +98,8 @@ $breakpoints: (
 ****************************************************************************/
 $elevations: (
   2: (
-    0 1px 24px 0 rgb(28 28 28 / 4%),
+    0 5px 10px -10px rgb(28 28 28 / 30%),
+    0 0 5px 0 rgb(28 28 28 / 8%),
   ),
   4: (
     0 10px 15px -10px rgb(28 28 28 / 30%),

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

@@ -16,6 +16,11 @@
 
   &.kirby-color-brightness-dark {
     @include themes.apply-dark-theme;
+
+    &[role='button'] {
+      @include interaction-state.apply-hover('xxs', $make-lighter: true);
+      @include interaction-state.apply-active('s', $make-lighter: true);
+    }
   }
 
   @include interaction-state.extend-content {
@@ -48,10 +53,6 @@
     }
   }
 
-  &.highlighted {
-    box-shadow: utils.get-elevation(4);
-  }
-
   &.flat {
     box-shadow: none;
   }
@@ -62,10 +63,6 @@
     @include interaction-state.apply-active('xxs');
     @include interaction-state.apply-focus-visible($shadow: utils.get-elevation(2));
 
-    &.highlighted {
-      @include interaction-state.apply-focus-visible($shadow: utils.get-elevation(4));
-    }
-
     &.interaction-state-make-lighter-and-louder {
       @include interaction-state.apply-hover('xxs', $make-lighter: true);
       @include interaction-state.apply-active('s', $make-lighter: true);

libs/designsystem/card/src/card.component.ts

@@ -46,13 +46,8 @@ export class CardComponent implements OnInit, OnDestroy {
   }
 
   @HostBinding('class.flat')
+  @Input()
   flat: boolean = false;
-  @HostBinding('class.highlighted')
-  highlighted: boolean = false;
-  @Input() set mode(value: 'flat' | 'highlighted') {
-    this.flat = value === 'flat';
-    this.highlighted = value === 'highlighted';
-  }
 
   @HostBinding('class.interaction-state-make-lighter-and-louder')
   @Input()

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

@@ -213,7 +213,7 @@ $button-width: (
     min-width: unset;
 
     &:not(:disabled) {
-      box-shadow: utils.get-elevation(8);
+      box-shadow: utils.get-elevation(4);
     }
   }
 }

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

@@ -78,7 +78,7 @@ $min-screen-width: 375px;
     }
 
     > button {
-      box-shadow: utils.get-elevation(8);
+      box-shadow: utils.get-elevation(4);
     }
   }
 
@@ -112,7 +112,7 @@ kirby-card {
   max-height: $dropdown-max-height;
   margin-block: utils.size('xxxs');
   overflow-y: auto;
-  box-shadow: utils.get-elevation(8);
+  box-shadow: utils.get-elevation(4);
   min-width: $min-screen-width-small - $margin-horizontal-total;
   @include utils.media('>=small') {
     min-width: $min-screen-width - $margin-horizontal-total;

libs/designsystem/src/lib/components/fab-sheet/fab-sheet.component.scss

@@ -22,7 +22,7 @@ ion-fab-button {
 
   // end NOTE
 
-  --box-shadow: #{utils.get-elevation(8)};
+  --box-shadow: #{utils.get-elevation(4)};
 
   @include interaction-state.apply-focus-visible {
     outline: none;