@kirbydesign/designsystem 5.0.10 → 5.0.14

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@kirbydesign/designsystem",
-  "version": "5.0.10",
+  "version": "5.0.14",
   "dependencies": {
     "chart.js": "3.3.2",
     "chartjs-adapter-date-fns": "^2.0.0",
     "chartjs-plugin-annotation": "^1.0.2",
     "chartjs-plugin-datalabels": "^2.0.0",
     "@ionic/angular": "5.5.2",
-    "@kirbydesign/core": "0.0.17",
+    "@kirbydesign/core": "0.0.20",
     "date-fns": "2.21.1",
     "date-fns-tz": "1.1.4",
     "highcharts": "8.0.4",

package/scss/_global-styles.scss

@@ -1,269 +1 @@
-@use "sass:map";
-@use "sass:math";
-@use 'utils';
-@use 'base/ionic';
-@use 'base/typography';
-@use 'base/line-clamp';
-@use 'base/list';
-
-:root {
-  --when-merging-pull-request: 'should run publish workflow';
-}
-
-:root,
-:host {
-  --kirby-font-family: 'Roboto';
-  font-family: var(--kirby-font-family);
-  @each $color, $color-name in utils.$kirby-colors {
-    --kirby-#{$color}: #{$color-name};
-  }
-  @each $color, $color-name in utils.$text-colors {
-    --kirby-text-color-#{$color}: #{$color-name};
-  }
-  --kirby-page-max-width: 1366px;
-  --kirby-statusbar-padding: var(--ion-statusbar-padding);
-  --kirby-safe-area-top: var(--ion-safe-area-top);
-  --kirby-safe-area-right: var(--ion-safe-area-right);
-  --kirby-safe-area-bottom: var(--ion-safe-area-bottom);
-  --kirby-safe-area-left: var(--ion-safe-area-left);
-  --kirby-tab-bar-height: 50px;
-
-  // Prevent iOS tap highlight:
-  -webkit-tap-highlight-color: transparent;
-}
-
-@function get-drawer-additional-padding-top() {
-  $modal-close-button-inner-height: utils.size('l'); // Todo: Move to / get from shared var
-  $modal-close-button-vertical-margin: utils.size('xxxs') * 2; // Todo: Move to / get from shared var
-  $modal-header-vertical-padding: 3px * 2; // 3px defined by Ionic
-  $modal-header-total-height: $modal-close-button-inner-height + $modal-close-button-vertical-margin +
-    $modal-header-vertical-padding;
-  $modal-header-vertical-center: math.round($modal-header-total-height * 0.5);
-  @return $modal-header-vertical-center;
-}
-
-$backdrop-opacity: 0.4;
-
-body.allow-background-scroll {
-  overflow: initial !important;
-}
-
-ion-modal.kirby-overlay {
-  position: fixed;
-
-  // Ensure consistent backdrop on all overlays:
-  &:not(.modal-card) {
-    --backdrop-opacity: #{$backdrop-opacity};
-    ion-backdrop {
-      opacity: var(--backdrop-opacity);
-    }
-  }
-
-  // Ensure consistent backdrop on card style modals, as Ionic 5 only applies --backdrop-opacity to :first-of-type:
-  // See https://github.com/ionic-team/ionic/commit/253cd96164914a803f6bb42ff95ca74880c940d0
-  // and https://github.com/ionic-team/ionic/issues/20800#issuecomment-606670762
-  &.modal-card,
-  &.modal-card:first-of-type {
-    --backdrop-opacity: #{$backdrop-opacity};
-  }
-
-  .modal-shadow {
-    display: none;
-  }
-
-  &.kirby-modal {
-    box-sizing: border-box;
-    --background: var(--kirby-modal-background, #{utils.get-color('background-color')});
-    --border-radius: 0;
-    --height: auto;
-
-    &.kirby-modal-compact {
-      --border-radius: #{utils.$border-radius};
-      --max-width: #{utils.$compact-modal-max-width};
-      text-align: center;
-    }
-
-    &.kirby-drawer {
-      --min-height: #{utils.$drawer-default-height};
-      --kirby-modal-padding-top: calc(var(--kirby-safe-area-top, 0px) + #{utils.size('m')});
-      padding-top: var(--kirby-modal-padding-top);
-      align-items: flex-end;
-
-      &.interact-with-background {
-        &.kirby-modal.kirby-drawer {
-          --kirby-modal-padding-top: 0px;
-        }
-      }
-
-      .modal-wrapper {
-        border-top-left-radius: #{utils.$border-radius};
-        border-top-right-radius: #{utils.$border-radius};
-      }
-    }
-
-    @include utils.media('<medium') {
-      &:not(.kirby-drawer):not(.kirby-modal-compact) {
-        --height: 100%;
-      }
-    }
-
-    &:not(.kirby-modal-compact).kirby-modal-full-height {
-      --height: 100%;
-    }
-
-    &.modal-card:not(.kirby-drawer) {
-      .modal-wrapper {
-        @include utils.media('<medium') {
-          // Reset Ionic Card style height + top border radius:
-          --height: 100%;
-          border-top-left-radius: 0;
-          border-top-right-radius: 0;
-        }
-
-        @include utils.media('>=medium') {
-          // Reset Ionic Card style border radius:
-          border-radius: utils.$border-radius;
-        }
-      }
-    }
-
-    @include utils.media('>=medium') {
-      --width: #{utils.$modal-max-width};
-      --border-radius: #{utils.$border-radius};
-      --box-shadow: #{utils.get-elevation(8)};
-
-      &:not(.kirby-modal-compact) {
-        --max-height: 100%;
-        --kirby-modal-padding-top-base: #{utils.size('xl')};
-        --kirby-modal-padding-top: var(--kirby-modal-padding-top-base);
-        padding-top: var(--kirby-modal-padding-top);
-
-        &:not(.kirby-drawer) {
-          --min-height: #{utils.$modal-default-height};
-          align-items: flex-start;
-
-          &.kirby-modal-small {
-            --min-height: #{map.get(utils.$modal-heights, 's')};
-          }
-          &.kirby-modal-medium {
-            --min-height: #{map.get(utils.$modal-heights, 'm')};
-          }
-          &.kirby-modal-large {
-            --min-height: #{map.get(utils.$modal-heights, 'l')};
-          }
-
-          &.kirby-modal-full-height .modal-wrapper,
-          .modal-wrapper.full-height {
-            border-bottom-left-radius: 0;
-            border-bottom-right-radius: 0;
-          }
-        }
-      }
-
-      &.kirby-drawer {
-        --kirby-modal-padding-top: calc(
-          var(--kirby-modal-padding-top-base) + #{get-drawer-additional-padding-top()}
-        );
-
-        .modal-wrapper {
-          border-bottom-left-radius: 0;
-          border-bottom-right-radius: 0;
-        }
-      }
-    }
-  }
-
-  &.kirby-action-sheet {
-    --background: transparent;
-    --width: 100%;
-    --height: 100%;
-
-    .modal-wrapper {
-      display: flex;
-      justify-content: center;
-      align-items: flex-end;
-      pointer-events: none;
-      --max-width: auto;
-      --max-height: auto;
-    }
-  }
-
-  &.kirby-alert {
-    --background: #{utils.get-color('background-color')};
-    --border-radius: #{utils.$border-radius};
-    --box-shadow: #{utils.get-elevation(8)};
-
-    .modal-wrapper {
-      max-width: utils.$alert-max-width;
-      height: auto;
-      text-align: center;
-    }
-  }
-}
-
-ion-loading.kirby-loading-overlay {
-  --backdrop-opacity: #{utils.$loading-overlay-backdrop-opacity};
-  --ion-backdrop-color: #{utils.get-color('background-color')};
-  .loading-wrapper {
-    --background: transparent;
-  }
-}
-
-.kirby-toast {
-  position: fixed;
-  user-select: none;
-  text-align: center;
-
-  // Set default colors
-  --background: #{utils.get-color('success')};
-  --color: #{utils.get-color('success-contrast')};
-  --button-color: #{utils.get-color('success-contrast')};
-
-  @each $color-name, $color-value in utils.$notification-colors {
-    &.#{$color-name} {
-      --background: #{utils.get-color($color-name)};
-      --color: #{utils.get-color($color-name + '-contrast')};
-      --button-color: #{utils.get-color($color-name + '-contrast')};
-    }
-  }
-}
-
-/*
- * FAB-sheet backdrop
-*/
-.fab-sheet-active {
-  .tabs-inner,
-  ion-router-outlet,
-  .ion-page {
-    overflow: visible;
-    contain: none !important;
-  }
-
-  ion-tab-bar {
-    z-index: -1;
-  }
-}
-
-/*
- * Link-styles (anchor tag with href)
- */
-:link,
-:visited {
-  color: inherit;
-  cursor: pointer;
-  text-decoration: underline;
-}
-
-/*
- * Class to add link-icon to the right of e.g. anchor tag.
- */
-.kirby-external-icon {
-  $icon-scaling-factor: 1.5em;
-  white-space: nowrap;
-  background-image: url('/assets/kirby/icons/svg/link.svg');
-  background-repeat: no-repeat;
-  background-position: right 50%;
-  background-size: $icon-scaling-factor;
-  //place icon to the right of text, with icons own width + the actual spacing
-  padding-right: calc(#{$icon-scaling-factor} + #{utils.size('xxxs')});
-}
+@forward "~@kirbydesign/core/scss/global-styles";

package/scss/_utils.scss

@@ -1 +1 @@
-@forward '~@kirbydesign/core/scss/utils';
+@forward "~@kirbydesign/core/scss/utils";

package/scss/base/_functions.scss

@@ -1,188 +1 @@
-@use "sass:list";
-@use "sass:map";
-@use "sass:math";
-@use "sass:string";
-@use "../themes/colors";
-@use "variables";
-
-@function _get-map-prop($map, $key) {
-  @if map.has-key($map, $key) {
-    @return map.get($map, $key);
-  }
-
-  @error 'Unknown key `#{$key}`.';
-  @return null;
-}
-
-@function size($key: 'm') {
-  $negative: string.index($key, '-') == 1;
-  @if ($negative) {
-    $key: string.slice($key, 2, -1);
-  }
-  $value: _get-map-prop(variables.$sizes, $key);
-  @return if($negative, string.unquote('-' + $value), $value);
-}
-
-@function z($key) {
-  @return _get-map-prop(variables.$z-layers, $key);
-}
-
-@function font-size($key: 'n') {
-  @if ($key == 'display') {
-    @warn 'Display key is deprecated';
-  }
-  @return _get-map-prop(variables.$font-sizes, $key);
-}
-
-@function line-height($key: 'm') {
-  @return _get-map-prop(variables.$line-height, $key);
-}
-
-@function font-weight($key: 'normal') {
-  @return _get-map-prop(variables.$font-weight, $key);
-}
-
-@function icon-font-size($size) {
-  @return map.get(variables.$icon-font-sizes, $size);
-}
-
-@function get-color($variant, $getValueOnly: false, $map: colors.$kirby-colors) {
-  $value: _get-map-prop($map, $variant);
-  @if $getValueOnly == true {
-    @return $value;
-  } @else {
-    @return string.unquote('var(--kirby-' + $variant + ')');
-  }
-}
-
-@function get-text-color($variant) {
-  $value: _get-map-prop(colors.$text-colors, $variant);
-  @return string.unquote('var(--kirby-text-color-' + $variant + ')');
-}
-
-@function get-elevation($value) {
-  @return map.get(variables.$elevations, $value);
-}
-
-@function get-transition-duration($value) {
-  @return map.get(variables.$transition-durations, $value);
-}
-
-@function get-transition-easing($value) {
-  @return map.get(variables.$transition-easings, $value);
-}
-
-@function get-shadow-size($elevation) {
-  $shadow-size: 0;
-  $shadow-list: map.get(variables.$elevations, $elevation);
-  @each $shadow in $shadow-list {
-    $offset-x: math.abs(_get-shadow-value($shadow, 'offset-x'));
-    $offset-y: math.abs(_get-shadow-value($shadow, 'offset-y'));
-    $blur-radius: _get-shadow-value($shadow, 'blur-radius');
-    $spread-radius: _get-shadow-value($shadow, 'spread-radius');
-    $current-shadow-size: math.max($offset-x, $offset-y) + $blur-radius + $spread-radius;
-    $shadow-size: math.max($shadow-size, $current-shadow-size);
-  }
-  @return $shadow-size;
-}
-
-@function _get-shadow-value($shadow, $valuekey) {
-  $shadow-value-map: (
-    'offset-x': 1,
-    'offset-y': 2,
-    'blur-radius': 3,
-    'spread-radius': 4,
-  );
-  $value-index: map.get($shadow-value-map, $valuekey);
-  @return list.nth($shadow, $value-index);
-}
-
-/**
- * Outputs all keys from map as CSS class selector list
- */
-@function keys-to-classes($map) {
-  $classes: ();
-  @each $key in map.keys($map) {
-    $classes: list.append($classes, '.#{$key}', $separator: comma);
-  }
-  @return $classes;
-}
-
-@mixin slotted($selectors...) {
-  ::ng-deep > {
-    #{$selectors} {
-      @content;
-    }
-  }
-}
-
-@mixin theme-background($variant, $text-variant-override: null) {
-  $background-color: null;
-  $text-color: null;
-  @if $variant == transparent {
-    $background-color: transparent;
-    $text-color: get-text-color('black');
-  } @else {
-    $background-color: get-color($variant);
-    $text-color: get-color($variant + '-contrast');
-  }
-  @if ($text-variant-override != null) {
-    $text-color: get-text-color($text-variant-override);
-  }
-  background-color: $background-color;
-  color: $text-color;
-}
-
-/// Only apply the :hover selector and styles if pointer device can hover
-/// (effectively desktop/mouse devices):
-@mixin hover() {
-  @media (hover: hover) {
-    &:hover {
-      @content;
-    }
-  }
-}
-
-// Only apply the :focus selector and styles if pointer device can hover
-// (effectively desktop/mouse devices):
-@mixin focus() {
-  @media (hover: hover) {
-    &:focus {
-      @content;
-    }
-  }
-}
-
-// Only apply the styles on touch devices
-// No check for `hover: none`, as Samsung Galaxy will return false on `hover: none` media query
-@mixin touch() {
-  @media (pointer: coarse) {
-    @content;
-  }
-}
-
-// Only apply the styles on non touch devices
-// (fine pointer and hover):
-@mixin not-touch() {
-  @media (hover: hover) and (pointer: fine) {
-    @content;
-  }
-}
-
-// Ensure minimum click area (default 44 x 44 px)
-// Ignore rounded corners to ensure square click area
-@mixin accessible-target-size($width: variables.$fat-finger-size, $height: $width) {
-  position: relative;
-
-  &::after {
-    content: '';
-    position: absolute;
-    min-height: $height;
-    min-width: $width;
-    width: 100%;
-    height: 100%;
-    transform: translate(-50%, -50%);
-    left: 50%;
-    top: 50%;
-  }
-}
+@forward "~@kirbydesign/core/scss/base/functions";

package/scss/base/_ionic.scss

@@ -1,36 +1 @@
-@use '../base/functions';
-@use '../themes/colors';
-
-/* Core CSS required for Ionic components to work properly */
-@import '~@ionic/angular/css/core.css';
-
-@mixin ionic-color-map($ionic-variant, $kirby-variant: $ionic-variant) {
-  --ion-color-#{$ionic-variant}: var(--kirby-#{$kirby-variant});
-  --ion-color-#{$ionic-variant}-rgb: #{functions.get-color(
-      #{$kirby-variant}-rgb,
-      true,
-      colors.$kirby-colors
-    )};
-  --ion-color-#{$ionic-variant}-contrast: var(--kirby-#{$kirby-variant}-contrast);
-  --ion-color-#{$ionic-variant}-contrast-rgb: #{functions.get-color(
-      #{$kirby-variant}-contrast-rgb,
-      true,
-      colors.$kirby-colors
-    )};
-  --ion-color-#{$ionic-variant}-shade: var(--kirby-#{$kirby-variant}-shade);
-  --ion-color-#{$ionic-variant}-tint: var(--kirby-#{$kirby-variant}-tint);
-}
-
-:root {
-  @include ionic-color-map('primary');
-  @include ionic-color-map('secondary');
-  @include ionic-color-map('tertiary');
-  @include ionic-color-map('success');
-  @include ionic-color-map('warning');
-  @include ionic-color-map('danger');
-  @include ionic-color-map('light');
-  @include ionic-color-map('medium');
-  @include ionic-color-map('dark');
-
-  --ion-font-family: var(--kirby-font-family);
-}
+@forward "~@kirbydesign/core/scss/base/ionic";

package/scss/base/_line-clamp.scss

@@ -1,56 +1 @@
-.kirby-line-clamp {
-  // Needed both for line-clamp support and for fallback solution
-  overflow: hidden;
-
-  // Fallback solution with "explicit ellipsis"
-  // line-height value is expected to be in px unit
-
-  line-height: var(--line-height);
-  max-height: calc(var(--line-clamp) * var(--line-height));
-  position: relative;
-
-  // Ellipsis
-  &::before {
-    content: '…';
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    background-color: var(--kirby-background-color);
-    line-height: var(--line-height);
-    height: var(--line-height);
-  }
-
-  // Cover ellipsis when number of lines is less than or equal to line-clamp value
-  &::after {
-    content: '';
-    position: absolute;
-    right: 0;
-    width: 1em;
-    height: var(--line-height);
-    line-height: var(--line-height);
-    background-color: var(--kirby-background-color);
-  }
-}
-
-// Non-standard line-clamp solution with wide browser support
-// See https://caniuse.com/mdn-css_properties_-webkit-line-clamp
-@supports (-webkit-line-clamp: 1) {
-  .kirby-line-clamp {
-    display: -webkit-box;
-    -webkit-line-clamp: var(--line-clamp, none);
-    -webkit-box-orient: vertical;
-
-    // Work around weird bug by setting visibility
-    // See https://bugs.webkit.org/show_bug.cgi?id=207013
-    // and https://stackoverflow.com/questions/41995229/webkit-line-clamp-does-not-work-on-chrome-unless-i-make-some-unrelated-css-chan
-    visibility: visible;
-
-    // Reset fallback properties that are not needed when support for line-clamp
-    max-height: initial;
-    position: initial;
-    &::before,
-    &::after {
-      display: none;
-    }
-  }
-}
+@forward "~@kirbydesign/core/scss/base/line-clamp";

package/scss/base/_list.scss

@@ -1,11 +1 @@
-ul,
-ol {
-  margin-inline-start: 0.25em;
-  padding-inline-start: 1em;
-  line-height: 1.5;
-}
-
-li li,
-li + li {
-  margin-block-start: 0.5em;
-}
+@forward "~@kirbydesign/core/scss/base/list";

package/scss/base/_typography.scss

@@ -1,105 +1 @@
-@use "functions";
-
-@import '~@fontsource/roboto/300.css';
-@import '~@fontsource/roboto/400.css';
-@import '~@fontsource/roboto/700.css';
-@import '~@fontsource/roboto/900.css';
-
-h1,
-.h1,
-h2,
-.h2,
-h3,
-.h3,
-h4,
-.h4,
-p,
-.p {
-  margin: 0;
-  margin-bottom: functions.size('s');
-}
-
-kirby-app .page-title {
-  > h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin: 0;
-  }
-}
-
-.kirby-text-display-1 {
-  font-size: functions.font-size('xxxxl');
-  font-weight: functions.font-weight('black');
-  line-height: normal;
-}
-
-.kirby-text-display-2 {
-  font-size: functions.font-size('xxxl');
-  font-weight: functions.font-weight('black');
-  line-height: normal;
-}
-
-.kirby-text-display-3 {
-  font-size: functions.font-size('xxl');
-  font-weight: functions.font-weight('black');
-  line-height: normal;
-}
-
-h1,
-.h1,
-.kirby-text-xlarge {
-  font-size: functions.font-size('xl');
-  font-weight: functions.font-weight('black');
-  line-height: functions.line-height('xl');
-}
-
-h2,
-.h2,
-.kirby-text-large {
-  font-size: functions.font-size('l');
-  font-weight: functions.font-weight('bold');
-  line-height: functions.line-height('l');
-}
-
-h3,
-.h3,
-.kirby-text-medium {
-  font-size: functions.font-size('m');
-  font-weight: functions.font-weight('bold');
-  line-height: functions.line-height('m');
-}
-
-p,
-.p,
-.kirby-text-normal {
-  font-size: functions.font-size('n');
-  line-height: functions.line-height('n');
-}
-
-.kirby-text-small {
-  font-size: functions.font-size('s');
-  line-height: functions.line-height('s');
-}
-
-.kirby-text-small-light {
-  font-size: functions.font-size('s');
-  font-weight: functions.font-weight('light');
-  line-height: functions.line-height('s');
-}
-
-.kirby-text-xsmall {
-  font-size: functions.font-size('xs');
-  line-height: functions.line-height('xs');
-}
-
-.kirby-text-xxsmall {
-  font-size: functions.font-size('xxs');
-  line-height: functions.line-height('xxs');
-}
-
-.kirby-text-bold {
-  font-weight: functions.font-weight('bold');
-}
+@forward "~@kirbydesign/core/scss/base/typography";

package/scss/base/_variables.scss

@@ -1,197 +1 @@
-@use "sass:map";
-@use "sass:math";
-/*
-  SPACINGS
-****************************************************************************/
-$sizes: (
-  xxxl: 56px,
-  xxl: 48px,
-  xl: 40px,
-  l: 32px,
-  m: 24px,
-  s: 16px,
-  xs: 12px,
-  xxs: 8px,
-  xxxs: 4px,
-  xxxxs: 2px,
-) !default;
-
-/*
-  FONT SETTINGS 
-****************************************************************************/
-$font-sizes: (
-  xxxxl: 72px,
-  xxxl: 56px,
-  xxl: 40px,
-  xl: 32px,
-  l: 22px,
-  m: 18px,
-  n: 16px,
-  s: 14px,
-  xs: 12px,
-  xxs: 10px,
-) !default;
-
-$line-height: (
-  // h1:
-    xl: 38px,
-  // h2:
-    l: 28px,
-  // h3:
-    m: 24px,
-  // p - please note: p and h3 share the same line-height, added the sizes to "match" with font-size:
-    n: 24px,
-  // text-small:
-    s: 20px,
-  // text-xsmall:
-    xs: 16px,
-  // text-xxsmall:
-    xxs: 11px
-) !default;
-
-$font-weight: (
-  light: 300,
-  normal: 400,
-  bold: 700,
-  // black will be treated as a named css color if not quoted
-    'black': 900,
-) !default;
-
-/* Icon
-****************************************************************************/
-$icon-font-sizes: (
-  'xs': map.get($sizes, 's'),
-  'sm': map.get($sizes, 'm'),
-  'md': map.get($sizes, 'l'),
-  'lg': map.get($sizes, 'xxxl'),
-) !default;
-
-/*
-  Z - Index overview
-****************************************************************************/
-$z-layers: (
-  default: 1,
-  segmentBadge: 2,
-  avatarBadge: 2,
-  dropdown: 800,
-  popover: 850,
-  modal-overlay: 900,
-  modal: 901,
-  loading-overlay: 1001,
-) !default;
-
-$border-radius: 16px !default;
-$border-radius-round: 999px !default;
-
-/* Breakpoints
-****************************************************************************/
-$breakpoints: (
-  small: 321px,
-  medium: 721px,
-  large: 1025px,
-  xlarge: 60em,
-  xxlarge: 80em,
-) !default;
-
-/* Elevation
-****************************************************************************/
-$elevations: (
-  2: (
-    0 5px 10px -10px rgba(28, 28, 28, 0.3),
-    0 0 5px 0 rgba(28, 28, 28, 0.08),
-  ),
-  4: (
-    0 10px 15px -10px rgba(28, 28, 28, 0.3),
-    0 0 5px 0 rgba(28, 28, 28, 0.08),
-  ),
-  8: (
-    0 20px 30px -15px rgba(28, 28, 28, 0.3),
-    0 0 5px 0 rgba(28, 28, 28, 0.08),
-  ),
-) !default;
-
-/* avatar
-****************************************************************************/
-$avatar-sizes: (
-  xs: 32px,
-  s: 40px,
-  m: 56px,
-  l: 96px,
-) !default;
-
-$avatar-badge-size: 16px;
-
-/* Page
-****************************************************************************/
-$page-content-max-width: 720px;
-
-/* Modal
-****************************************************************************/
-$alert-max-width: 359px;
-$compact-modal-max-width: 359px;
-$modal-max-width: 720px;
-
-$modal-heights: (
-  s: math.floor($modal-max-width * 0.4),
-  m: math.floor($modal-max-width * 0.64),
-  l: math.floor($modal-max-width * 0.8),
-) !default;
-
-$modal-default-height: map.get($modal-heights, 'm');
-$drawer-default-height: map.get($modal-heights, 's');
-
-/* Item
-****************************************************************************/
-$item-heights: (
-  m: 56px,
-  s: 44px,
-  xs: 32px,
-) !default;
-
-/* Dropdown
-****************************************************************************/
-$dropdown-item-height: map.get($item-heights, 's');
-
-/* Button, Checkbox, Page, Radio
-****************************************************************************/
-$fat-finger-size: 44px;
-
-/* Checkbox, Radio
-****************************************************************************/
-$checkbox-radio-sizes: (
-  'xs': map.get($sizes, 'l'),
-  'sm': $fat-finger-size,
-  'md': map.get($sizes, 'xxxl'),
-);
-
-$checkbox-radio-spacing: (
-  'to-edge': map.get($sizes, 's'),
-  'to-label': map.get($sizes, 'xs'),
-);
-
-/* Transitions
-****************************************************************************/
-$soft-keyboard-transition-enter: 250ms ease-out 1ms; // Adding a 1ms delay seems to improve the smoothness on iPhone
-$soft-keyboard-transition-leave: 150ms ease-out;
-
-$transition-durations: (
-  quick: 200ms,
-  short: 300ms,
-  long: 500ms,
-  extra-long: 1000ms,
-);
-
-// Easing function
-$transition-easings: (
-  static: linear,
-  enter: ease-out,
-  exit: ease-in,
-  enter-exit: ease,
-  motion: cubic-bezier(0.25, 0.1, 0.25, 1),
-  modal: (
-    enter: cubic-bezier(0.32, 0.72, 0, 1),
-    exit: cubic-bezier(0.32, 0.72, 0, 1),
-  ),
-);
-
-$loading-overlay-backdrop-opacity: 0.8;
+@forward "~@kirbydesign/core/scss/base/variables";

package/scss/print/_index.scss

@@ -1,3 +1 @@
-@forward 'generic';
-@forward 'elements';
-@forward 'components';
+@forward "~@kirbydesign/core/scss/print";

package/scss/print/components/_index.scss

@@ -1,7 +1 @@
-@forward 'kirby-app';
-@forward 'kirby-fab-sheet';
-@forward 'kirby-list';
-@forward 'kirby-modal-wrapper';
-@forward 'kirby-page';
-@forward 'kirby-router-outlet';
-@forward 'kirby-tab-bar';
+@forward "~@kirbydesign/core/scss/print/components";

package/scss/print/components/_kirby-app.scss

@@ -1,21 +1 @@
-@media print {
-  kirby-app {
-    // Part of making sure you can print more than a single page
-    display: contents !important;
-
-    // Part of making sure you can print more than a single page
-    ion-app {
-      display: contents !important;
-    }
-
-    // Part of making sure you can print more than a single page
-    .ion-page {
-      display: contents !important;
-    }
-
-    // Only print the currently displayed ion-page
-    .ion-page-hidden {
-      display: none !important;
-    }
-  }
-}
+@forward "~@kirbydesign/core/scss/print/components/kirby-app";

package/scss/print/components/_kirby-fab-sheet.scss

@@ -1,5 +1 @@
-@media print {
-  kirby-fab-sheet {
-    display: none !important;
-  }
-}
+@forward "~@kirbydesign/core/scss/print/components/kirby-fab-sheet";

package/scss/print/components/_kirby-list.scss

@@ -1,24 +1 @@
-@media print {
-  ion-item-group {
-    margin-block: 17pt !important;
-  }
-
-  ion-item {
-    --min-height: none !important;
-    --padding-top: 0 !important;
-    --padding-bottom: 0 !important;
-    --inner-padding-top: 0 !important;
-    --inner-padding-bottom: 0 !important;
-    --inner-padding-end: 0 !important;
-  }
-
-  ion-item::part(native),
-  ion-item-divider {
-    padding-inline-start: initial !important;
-    padding-inline-end: initial !important;
-  }
-
-  [ng-reflect-use-virtual-scroll='true'] .viewport {
-    height: auto !important;
-  }
-}
+@forward "~@kirbydesign/core/scss/print/components/kirby-list";

package/scss/print/components/_kirby-modal-wrapper.scss

@@ -1,16 +1 @@
-@media print {
-  kirby-modal-wrapper {
-    // Part of making sure you can print more than a single page
-    display: contents !important;
-
-    ion-content::part(background) {
-      display: none !important;
-    }
-
-    // Part of making sure you can print more than a single page
-    .inner-scroll,
-    ion-content::part(scroll) {
-      display: contents !important;
-    }
-  }
-}
+@forward "~@kirbydesign/core/scss/print/components/kirby-modal-wrapper";

package/scss/print/components/_kirby-page.scss

@@ -1,17 +1 @@
-@media print {
-  kirby-page-actions {
-    display: none !important;
-  }
-
-  ion-header {
-    display: none !important;
-  }
-
-  ion-content {
-    padding: initial !important;
-  }
-
-  .page-title {
-    margin: initial !important;
-  }
-}
+@forward "~@kirbydesign/core/scss/print/components/kirby-page";

package/scss/print/components/_kirby-router-outlet.scss

@@ -1,11 +1 @@
-@media print {
-  kirby-router-outlet {
-    // Part of making sure you can print more than a single page
-    display: contents !important;
-
-    // Part of making sure you can print more than a single page
-    ion-router-outlet {
-      display: contents !important;
-    }
-  }
-}
+@forward "~@kirbydesign/core/scss/print/components/kirby-router-outlet";

package/scss/print/components/_kirby-tab-bar.scss

@@ -1,25 +1 @@
-@media print {
-  kirby-tab-bar {
-    // Part of making sure you can print more than a single page
-    display: contents !important;
-
-    // Part of making sure you can print more than a single page
-    ion-tabs {
-      display: contents !important;
-    }
-
-    ion-tab-bar {
-      display: none !important;
-    }
-
-    ion-content::part(background) {
-      display: none !important;
-    }
-
-    // Part of making sure you can print more than a single page
-    .inner-scroll,
-    ion-content::part(scroll) {
-      display: contents !important;
-    }
-  }
-}
+@forward "~@kirbydesign/core/scss/print/components/kirby-tab-bar";

package/scss/print/elements/_button.scss

@@ -1,6 +1 @@
-@media print {
-  // Buttons do not make much sense on print, but this may be too far reaching
-  button {
-    display: none !important;
-  }
-}
+@forward "~@kirbydesign/core/scss/print/elements/button";

package/scss/print/elements/_index.scss

@@ -1,3 +1 @@
-@forward 'button';
-@forward 'page';
-@forward 'preformatted-text';
+@forward "~@kirbydesign/core/scss/print/elements";

package/scss/print/elements/_page.scss

@@ -1,6 +1 @@
-@media print {
-  html,
-  body {
-    height: auto !important;
-  }
-}
+@forward "~@kirbydesign/core/scss/print/elements/page";

package/scss/print/elements/_preformatted-text.scss

@@ -1,6 +1 @@
-@media print {
-  pre {
-    width: max-content !important;
-    margin: auto !important;
-  }
-}
+@forward "~@kirbydesign/core/scss/print/elements/preformatted-text";

package/scss/print/generic/_colors.scss

@@ -1,9 +1 @@
-@media print {
-  *,
-  ::after,
-  ::after {
-    color: #000 !important;
-    background-color: transparent !important;
-    --background: transparent !important;
-  }
-}
+@forward "~@kirbydesign/core/scss/print/generic/colors";

package/scss/print/generic/_index.scss

@@ -1,4 +1 @@
-@forward 'colors';
-@forward 'page';
-@forward 'reset';
-@forward 'typography';
+@forward "~@kirbydesign/core/scss/print/generic";

package/scss/print/generic/_page.scss

@@ -1,40 +1 @@
-// Generic base print styles
-@media print {
-  @page {
-    margin: 2.54cm;
-    orphans: 4;
-    widows: 3;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    break-after: avoid;
-  }
-
-  blockquote,
-  figure,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  img,
-  ol,
-  p,
-  table,
-  ul,
-  ion-item-group {
-    break-inside: avoid;
-  }
-}
-
-@media print {
-  :root {
-    --kirby-page-max-width: 100%;
-  }
-}
+@forward "~@kirbydesign/core/scss/print/generic/page";

package/scss/print/generic/_reset.scss

@@ -1,12 +1 @@
-// Generic reset
-// This targets *all* elements so be careful which declarations are made
-@media print {
-  *,
-  *::before,
-  *::after {
-    box-shadow: none !important;
-    max-width: none !important;
-    border-radius: 0 !important;
-    contain: initial !important;
-  }
-}
+@forward "~@kirbydesign/core/scss/print/generic/reset";

package/scss/print/generic/_typography.scss

@@ -1,70 +1 @@
-@media print {
-  :root {
-    --kirby-font-family: 'Roboto', sans-serif;
-    --kirby-font-size-xxlarge: 27pt;
-    --kirby-font-size-xlarge: 22pt;
-    --kirby-font-size-large: 15pt;
-    --kirby-font-size-medium: 12pt;
-    --kirby-font-size-normal: 11pt;
-    --kirby-font-size-small: 9pt;
-    --kirby-line-height-base: 1.4;
-  }
-
-  html {
-    font-size: var(--kirby-font-size-normal) !important;
-    line-height: var(--kirby-line-height-base) !important;
-  }
-
-  // Generic reset
-  // This targets *all* elements so be careful which declarations are made
-  *,
-  *::before,
-  *::after {
-    font-size: inherit !important;
-  }
-
-  pre {
-    font-size: var(--kirby-font-size-small) !important;
-  }
-
-  p {
-    line-height: var(--kirby-line-height-base) !important;
-    margin-block: 1em !important;
-  }
-
-  h1,
-  .h1,
-  .kirby-text-xlarge {
-    font-size: var(--kirby-font-size-xlarge) !important;
-    line-height: initial !important;
-    margin-block: 1em !important;
-  }
-
-  h2,
-  .h2,
-  .kirby-text-large {
-    font-size: var(--kirby-font-size-large) !important;
-    line-height: initial !important;
-    margin-block: 1em !important;
-  }
-
-  h3,
-  .h3,
-  .kirby-text-medium {
-    font-size: var(--kirby-font-size-medium) !important;
-    line-height: initial !important;
-    margin-block: 1em !important;
-  }
-
-  .kirby-text-display-3 {
-    font-size: var(--kirby-font-size-xxlarge) !important;
-    line-height: initial !important;
-    margin-block: 1em !important;
-  }
-
-  h4,
-  h5,
-  h6 {
-    line-height: initial !important;
-  }
-}
+@forward "~@kirbydesign/core/scss/print/generic/typography";

package/scss/themes/_colors.scss

@@ -1,117 +1 @@
-@use "sass:color";
-@use "sass:map";
-$brand-colors: (
-  'primary': #00e89a,
-  'secondary': #005c3c,
-  'tertiary': #01352c,
-) !default;
-
-$notification-colors: (
-  'success': #2cf287,
-  'warning': #ffca3a,
-  'danger': #ff595e,
-);
-
-$system-colors: (
-  'background-color': #f6f6f6,
-  'white': #ffffff,
-  'light': #f2f2f2,
-  'semi-light': #ebebeb,
-  'medium': #d1d1d1,
-  'semi-dark': #8e8e8e,
-  'dark': #353535,
-  'black': #1c1c1c,
-);
-
-$text-colors: (
-  'white': #ffffff,
-  'semi-dark': #707070,
-  'black': #1c1c1c,
-  'danger': #ee0d0d,
-);
-
-$focus-ring-color: rgb(77, 144, 254);
-
-@function getAllColors() {
-  @return map.merge(map.merge($brand-colors, $notification-colors), $system-colors);
-}
-
-$_color-palette: getAllColors();
-
-// TODO Deprecated variable, used to generate colors in some components - don't use it anymore!
-$main-colors: map.remove(
-  $_color-palette,
-  'background-color',
-  'black',
-  'white',
-  'semi-light',
-  'semi-dark'
-);
-
-@function _get-color-contrast($color) {
-  $contrast-light: map.get($system-colors, 'white');
-  $contrast-dark: map.get($system-colors, 'black');
-  $color-brightness: _get-color-brightness($color);
-  @if $color-brightness == 'dark' {
-    @return $contrast-light;
-  } @else {
-    @return $contrast-dark;
-  }
-}
-
-@function _get-color-brightness($color) {
-  $red: color.red($color);
-  $green: color.green($color);
-  $blue: color.blue($color);
-  /*
-    Color brightness is determined by the following formula:
-    ((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000
-  */
-  $color-brightness: (($red * 299) + ($green * 587) + ($blue * 114)) * 0.001;
-  /* The range for color brightness difference is 125 */
-  $color-range: 128;
-
-  @if $color-brightness == 255 {
-    @return 'white';
-  } @else if $color-brightness >= $color-range {
-    @return 'light';
-  } @else {
-    @return 'dark';
-  }
-}
-
-@function _get-tint-value($color, $weight: 10) {
-  @return color.mix(white, $color, $weight);
-}
-
-@function _get-shade-value($color, $weight: 12) {
-  @return color.mix(black, $color, $weight);
-}
-
-@function _get-rgb-values($color) {
-  @return color.red($color), color.green($color), color.blue($color);
-}
-
-@function generate-colors($colors: $_color-palette) {
-  $color-list: ();
-  @each $color-name, $color-value in $colors {
-    $color-list: map.merge(
-      (
-        $color-name: $color-value,
-        #{$color-name}-rgb: #{_get-rgb-values($color-value)},
-        #{$color-name}-contrast: #{_get-color-contrast($color-value)},
-        #{$color-name}-contrast-rgb: #{_get-rgb-values(_get-color-contrast($color-value))},
-        #{$color-name}-shade: #{_get-shade-value($color-value)},
-        #{$color-name}-shade-rgb: #{_get-rgb-values(_get-shade-value($color-value))},
-        #{$color-name}-tint: #{_get-tint-value($color-value)},
-        #{$color-name}-tint-rgb: #{_get-rgb-values(_get-tint-value($color-value))},
-        #{$color-name}-color-brightness: #{_get-color-brightness($color-value)},
-      ),
-      $color-list
-    );
-  }
-  @return $color-list;
-}
-
-$kirby-colors: generate-colors();
-$kirby-text-colors: generate-colors($text-colors);
+@forward "~@kirbydesign/core/scss/themes/colors";