@odx/ui 1.0.0-rc.22 → 1.0.0-rc.24

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@odx/ui",
-  "version": "1.0.0-rc.22",
+  "version": "1.0.0-rc.24",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
+  "peerDependencies": {
+    "@odx/icons": "*"
+  },
   "files": [
     "*.css",
     "*.woff2",

package/scss/3rdparty/ag-grid/theme.scss

@@ -0,0 +1,220 @@
+@use '@odx/icons/core/core-utils' as icons;
+@use '../../abstract/dimensions';
+@use '../../abstract/typography';
+
+.ag-theme-odx {
+  --ag-border-color: var(--odx-c-seperator);
+  --ag-foreground-color: var(--odx-c-text);
+  --ag-secondary-foreground-color: var(--odx-c-text);
+  --ag-disabled-foreground-color: vara(--odx-c-text-disabled);
+
+  --ag-background-color: var(--odx-c-background-content);
+
+  --ag-font-family: 'Pangea';
+  --ag-font-size: var(--odx-typography-base-size);
+
+  --ag-icon-size: #{typography.get-font-size(1)};
+  --ag-icon-font-family: #{icons.get-font-family()};
+  --ag-icon-font-code-aggregation: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-arrows: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-asc: '#{icons.get-icon-glyph(ascending)}';
+  --ag-icon-font-code-cancel: '#{icons.get-icon-glyph(close)}';
+  --ag-icon-font-code-chart: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-checkbox-checked: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-checkbox-indeterminate: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-checkbox-unchecked: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-color-picker: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-columns: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-contracted: '#{icons.get-icon-glyph(chevron-right)}';
+  --ag-icon-font-code-copy: '#{icons.get-icon-glyph(copy-content)}';
+  --ag-icon-font-code-cut: '#{icons.get-icon-glyph(cut)}';
+  --ag-icon-font-code-cross: '#{icons.get-icon-glyph(close)}';
+  --ag-icon-font-code-csv: '#{icons.get-icon-glyph(file)}';
+  --ag-icon-font-code-desc: '#{icons.get-icon-glyph(descending)}';
+  --ag-icon-font-code-excel: '#{icons.get-icon-glyph(file-excel)}';
+  --ag-icon-font-code-expanded: '#{icons.get-icon-glyph(chevron-left)}';
+  --ag-icon-font-code-eye-slash: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-eye: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-filter: '#{icons.get-icon-glyph(filter)}';
+  --ag-icon-font-code-first: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-grip: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-group: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-last: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-left: '#{icons.get-icon-glyph(arrow-left)}';
+  --ag-icon-font-code-linked: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-loading: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-maximize: '#{icons.get-icon-glyph(maximize)}';
+  --ag-icon-font-code-menu: '#{icons.get-icon-glyph(menu)}';
+  --ag-icon-font-code-minimize: '#{icons.get-icon-glyph(minimize)}';
+  --ag-icon-font-code-next: '#{icons.get-icon-glyph(chevron-right)}';
+  --ag-icon-font-code-none: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-not-allowed: '#{icons.get-icon-glyph(blocked)}';
+  --ag-icon-font-code-paste: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-pin: '#{icons.get-icon-glyph(pin)}';
+  --ag-icon-font-code-pivot: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-previous: '#{icons.get-icon-glyph(chevron-left)}';
+  --ag-icon-font-code-radio-button-off: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-radio-button-on: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-right: '#{icons.get-icon-glyph(arrow-right)}';
+  --ag-icon-font-code-save: '#{icons.get-icon-glyph(save)}';
+  --ag-icon-font-code-small-down: '#{icons.get-icon-glyph(chevron-down)}';
+  --ag-icon-font-code-small-left: '#{icons.get-icon-glyph(chevron-left)}';
+  --ag-icon-font-code-small-right: '#{icons.get-icon-glyph(chevron-right)}';
+  --ag-icon-font-code-small-up: '#{icons.get-icon-glyph(chevron-up)}';
+  --ag-icon-font-code-tick: '#{icons.get-icon-glyph(check)}';
+  --ag-icon-font-code-tree-closed: '#{icons.get-icon-glyph(chevron-right)}';
+  --ag-icon-font-code-tree-indeterminate: '#{icons.get-icon-glyph(minus)}';
+  --ag-icon-font-code-tree-open: '#{icons.get-icon-glyph(chevron-down)}';
+  --ag-icon-font-code-unlinked: '#{icons.get-icon-glyph(placeholder)}';
+
+  --ag-grid-size: #{dimensions.get-size(0.25)};
+  --ag-widget-vertical-spacing: #{dimensions.get-size(0.5)};
+
+  --ag-header-height: #{dimensions.get-size(2)};
+  --ag-row-height: #{dimensions.get-size(2)};
+  --ag-table-line-height: #{dimensions.get-size(1.5)};
+  --ag-list-item-height: #{dimensions.get-size(1.5)};
+
+  input[type='text'] {
+    background: var(--gray-100);
+    border: var(--ag-borders-critical) var(--gray100);
+    border-radius: var(--odx-v-border-radius-controls);
+    font-weight: var(--odx-typography-font-weight-normal);
+    letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
+    line-height: var(--ag-table-line-height);
+    padding-left: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
+    padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
+    vertical-align: middle;
+
+    &::placeholder {
+      color: var(--odx-c-text);
+      opacity: 0.65;
+    }
+  }
+
+  .ag-standard-button {
+    background-color: var(--odx-c-primary);
+    border-radius: var(--odx-v-border-radius-controls);
+    color: var(--odx-c-primary-text);
+    height: calc(var(--odx-vertical-rythm-base-size) * 1.5);
+    min-width: calc(var(--odx-vertical-rythm-base-size) * 3);
+    outline-offset: calc(-1 * var(--odx-v-outline-width-bold));
+    outline-width: var(--odx-v-outline-width-bold);
+    transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+    transition-property: background-color, color, outline;
+  }
+
+  .ag-header {
+    border-bottom: var(--ag-borders-critical) var(--gray-700);
+
+    &-row:not(:first-child) {
+      .ag-header-cell,
+      .ag-header-group-cell.ag-header-group-cell-with-group {
+        border: none;
+      }
+    }
+
+    .ag-cell-label-container {
+      width: fit-content;
+    }
+
+    .ag-floating-filter {
+      .ag-filter-select {
+        .ag-picker-field-wrapper {
+          height: calc(var(--odx-vertical-rythm-base-size) * 1.5);
+        }
+      }
+
+      input[type='text']:disabled {
+        color: var(--odx-c-text);
+        font-weight: var(--odx-typography-font-weight-medium);
+        padding: 0;
+      }
+    }
+
+    .ag-header-cell-text {
+      font-weight: var(--odx-typography-font-weight-medium);
+    }
+
+    .ag-header-cell-label {
+      padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.25);
+    }
+
+    .ag-header-icon {
+      &.ag-header-cell-menu-button {
+        height: calc(var(--odx-vertical-rythm-base-size) * 0.667);
+        width: calc(var(--odx-vertical-rythm-base-size) * 0.667);
+      }
+    }
+  }
+
+  &.ag-popup {
+    [type='text']:focus {
+      border-color: var(--ag-input-border-color);
+      border-radius: var(--odx-v-border-radius);
+      box-shadow: unset;
+    }
+  }
+
+  .ag-radio-button-input-wrapper {
+    align-items: center;
+    background-color: var(--odx-control-background-color);
+    border-radius: 50%;
+    display: flex;
+    flex: 0 0 auto;
+    height: calc(var(--odx-vertical-rythm-base-size) * 0.8334);
+    justify-content: center;
+    margin-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.0834);
+    margin-top: calc(var(--odx-vertical-rythm-base-size) * 0.0834);
+    outline: var(--odx-v-outline-width) solid transparent;
+    outline-color: var(--odx-control-outline-color);
+    outline-offset: calc(-1 * var(--odx-v-outline-width));
+    padding: 1px;
+    transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+    transition-property: background-color, color, outline-color;
+    width: calc(var(--odx-vertical-rythm-base-size) * 0.8334);
+
+    &:hover {
+      background-color: var(--odx-control-background-color-hover);
+      outline-color: var(--odx-control-outline-color-hover);
+    }
+
+    &.ag-checked {
+      background-color: var(--odx-control-background-color-selected);
+      color: var(--odx-control-color-selected);
+      opacity: 1;
+      outline-color: var(--odx-control-outline-color-selected);
+
+      &::after {
+        background-color: var(--odx-control-color-selected);
+        border-radius: 50%;
+        content: '';
+        height: calc(var(--odx-vertical-rythm-base-size) * 0.1667);
+        left: unset;
+        margin-bottom: calc(var(--odx-vertical-rythm-base-size) * 0);
+        margin-top: calc(var(--odx-vertical-rythm-base-size) * 0);
+        top: unset;
+        transform: scale(1);
+        width: calc(var(--odx-vertical-rythm-base-size) * 0.1667);
+      }
+    }
+  }
+
+  .ag-root-wrapper {
+    border: none;
+  }
+
+  .ag-select {
+    .ag-picker-field-display {
+      color: var(--odx-c-text);
+    }
+
+    .ag-picker-field-icon {
+      padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+    }
+  }
+
+  .ag-select-list {
+    color: var(--odx-c-text);
+  }
+}

package/scss/abstract/_typography.scss

@@ -1,16 +1,20 @@
 @use 'sass:math';
 @use 'utils';
 
+@function get-font-size($size: 1) {
+  @if $size < 0 {
+    @return calc(var(--odx-typography-base-size) * utils.css-pow(var(--odx-typography-negative-font-scaling-factor), $size));
+  } @else {
+    @return calc(var(--odx-typography-base-size) * utils.css-pow(var(--odx-typography-positive-font-scaling-factor), $size));
+  }
+}
+
 @mixin font-size($size: 1) {
   @if math.round($size) != $size {
     @error '$size must me an integer';
   }
 
-  @if $size < 0 {
-    font-size: calc(var(--odx-typography-base-size) * utils.css-pow(var(--odx-typography-negative-font-scaling-factor), $size));
-  } @else {
-    font-size: calc(var(--odx-typography-base-size) * utils.css-pow(var(--odx-typography-positive-font-scaling-factor), $size));
-  }
+  font-size: get-font-size($size);
 }
 
 @mixin font-weight($value: normal) {

package/scss/abstract/_utils.scss

@@ -122,3 +122,10 @@
   pointer-events: none;
   user-select: none;
 }
+
+@mixin dark-theme-selector() {
+  &[odxTheme='dark'],
+  &.odx-theme-dark {
+    @content;
+  }
+}

package/scss/assets/icons.css.hbs

@@ -0,0 +1,23 @@
+@font-face {
+  font-display: block;
+  font-family: "{{ name }}";
+  src: {{{ fontSrc }}};
+}
+
+.{{prefix}}::before,
+[class^="{{prefix}}-"]::before,
+[class*=" {{prefix}}-"]::before {
+  font-family: {{ name }} !important;
+  font-style: normal;
+  font-weight: normal !important;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  vertical-align: top;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+{{# each codepoints }}
+.{{ ../prefix }}-{{ @key }}::before { content: "\\{{ codepoint this }}"; }
+{{/ each }}

package/scss/components/area-header.component.scss

@@ -6,7 +6,7 @@
 @use 'avatar.component';
 @use '../layout/typography' as *;
 
-:root {
+body {
   --odx-area-header-title-color: var(--odx-c-headline);
   --odx-area-header-subtitle-color: var(--odx-c-headline);
 }
@@ -22,6 +22,11 @@
   &__container {
     column-gap: dimensions.get-size(math.div(20, 24));
     display: flex;
+
+    .odx-navigation-back {
+      @include dimensions.margin(-0.75, right);
+      @include dimensions.margin(math.div(5, 24), top);
+    }
   }
 
   * {

package/scss/components/badge.component.scss

@@ -3,7 +3,7 @@
 @use '../abstract/utils';
 @use '../abstract/typography';
 
-:root {
+body {
   --odx-badge-contrast-color: var(--odx-c-background-content);
 }
 
@@ -21,7 +21,7 @@
   min-width: $badge-size;
   outline: 1px solid transparent;
   vertical-align: middle;
-  z-index: 9999;
+  z-index: var(--odx-v-layer-1);
 
   &,
   &--highlight {

package/scss/components/bar.component.scss

@@ -5,12 +5,19 @@
 @use '../abstract/motion';
 @use './dropdown.component' as dropdown;
 
-:root {
+body {
   --odx-bar-background-color: var(--cyan-500);
   --odx-bar-background-color-hover: var(--cyan-600);
   --odx-bar-background-color-active: var(--cyan-700);
   --odx-bar-text-color: var(--white);
   --odx-bar-text-color-disabled: var(--cyan-700);
+
+  @include utils.dark-theme-selector() {
+    --odx-bar-background-color-hover: var(--cyan-400);
+    --odx-bar-background-color-active: var(--cyan-300);
+    --odx-bar-text-color: var(--black);
+    --odx-bar-text-color-disabled: var(--cyan-200);
+  }
 }
 
 .odx-bar {

package/scss/components/breadcrumbs.component.scss

@@ -17,6 +17,10 @@
 
       color: var(--odx-c-text);
     }
+
+    &:visited {
+      color: var(--odx-c-link);
+    }
   }
 
   .odx-icon {

package/scss/components/button-group.component.scss

@@ -34,7 +34,7 @@
     }
   }
 
-  &:not(:first-child, :last-child) {
+  &:not(:first-of-type, :last-of-type) {
     border-radius: 0;
   }
 }

package/scss/components/button.component.scss

@@ -66,7 +66,7 @@
   }
 
   &--highlight:focus-visible {
-    outline-color: var(--blue-400);
+    outline-color: var(--odx-c-focus-outline-dark);
   }
 
   @each $variant in $variants {

package/scss/components/card.component.scss

@@ -134,6 +134,8 @@
   }
 
   &__footer {
+    @include dimensions.padding-x(0.5);
+
     display: flex;
     gap: dimensions.get-size(math.div(12, 24));
     justify-content: flex-end;

package/scss/components/form-field.component.scss

@@ -8,7 +8,7 @@ $form-field-label-height: math.div(20, 24);
 $form-field-hint-height: math.div(16, 24);
 $form-field-inner-padding: math.div(8, 24);
 
-:root {
+body {
   --odx-form-field-hint-color: var(--gray-500);
 }
 

package/scss/components/icon.component.scss

@@ -8,12 +8,8 @@ $icon-sizes: (small math.div(16, 24) 1, large math.div(32, 24) 2, xlarge math.di
   @include dimensions.container(1);
   @include utils.center-content(true);
 
-  direction: ltr;
+  flex: 0 0 auto;
   font-size: dimensions.get-size(1);
-  text-rendering: auto;
-  text-transform: none;
-  user-select: none;
-  white-space: nowrap;
 
   @each $size, $size_factor, $factor in $icon-sizes {
     &--#{$size} {
@@ -27,9 +23,9 @@ $icon-sizes: (small math.div(16, 24) 1, large math.div(32, 24) 2, xlarge math.di
     @include dimensions.margin-y(0);
 
     font-size: inherit;
-    height: auto;
+    height: 0.8em;
     line-height: inherit;
-    vertical-align: -0.15em;
-    width: auto;
+    vertical-align: super;
+    width: 0.8em;
   }
 }

package/scss/components/link.component.scss

@@ -1,6 +1,14 @@
 @use '../abstract/motion';
 @use '../abstract/utils';
 
+body {
+  @include utils.dark-theme-selector() {
+    --odx-c-link: var(--cyan-700);
+    --odx-c-link-hover: var(--cyan-800);
+    --odx-c-link-active: var(--cyan-900);
+  }
+}
+
 .odx-link {
   @include motion.transition(color background-color outline);
   @include utils.interactive();

package/scss/components/loading-spinner.component.scss

@@ -2,6 +2,17 @@
 @use '../abstract/motion';
 @use '../abstract/utils';
 
+body {
+  --odx-loading-spinner-track-stroke-color: var(--blue-700-15);
+
+  @include utils.dark-theme-selector() {
+    .odx-button {
+      --odx-loading-spinner-track-stroke-color: var(--blue-700-15);
+    }
+    --odx-loading-spinner-track-stroke-color: var(--gray-200);
+  }
+}
+
 .odx-loading-spinner {
   $root: &;
 
@@ -35,7 +46,7 @@
     z-index: var(--odx-v-layer-3);
 
     &__track {
-      stroke: var(--blue-700-15);
+      stroke: var(--odx-loading-spinner-track-stroke-color);
     }
   }
 

package/scss/components/logo.component.scss

@@ -1,8 +1,13 @@
 @use '../abstract/dimensions';
+@use '../abstract/utils';
 
-:root {
+body {
   --odx-logo-color: var(--odx-c-primary);
   --odx-logo-color-inverse: var(--odx-c-text-inverse);
+
+  @include utils.dark-theme-selector() {
+    --odx-logo-color: var(--odx-c-text-inverse);
+  }
 }
 
 .odx-logo {

package/scss/components/main-menu-button.component.scss

@@ -4,4 +4,8 @@
   @extend .odx-button--ghost;
 
   color: inherit;
+
+  &:hover {
+    color: inherit;
+  }
 }

package/scss/components/main-menu-item.component.scss

@@ -4,12 +4,17 @@
 @use '../abstract/utils';
 @use '../abstract/typography';
 
-:root {
+body {
   --odx-main-menu-item-background-color: transparent;
   --odx-main-menu-item-background-color-hover: var(--white-5);
   --odx-main-menu-item-background-color-active: var(--odx-c-focus);
   --odx-main-menu-item-text-color: inherit;
   --odx-main-menu-item-text-color-disabled: var(--odx-c-primary-text-disabled);
+
+  @include utils.dark-theme-selector() {
+    --odx-main-menu-item-background-color-active: var(--cyan-500-15);
+    --odx-main-menu-item-text-color-disabled: var(--blue-500);
+  }
 }
 
 .odx-main-menu-item {
@@ -44,4 +49,8 @@
     @include dimensions.margin(math.div(1, 3), right);
     @include dimensions.margin(math.div(-1, 3), left);
   }
+
+  &:focus-visible {
+    background-color: var(--odx-main-menu-item-background-color-active);
+  }
 }

package/scss/components/main-menu.component.scss

@@ -7,12 +7,18 @@
 @use 'main-menu-button.component';
 @use 'main-menu-item.component';
 
-:root {
+body {
   --odx-main-menu-max-width: 100dvw;
   --odx-main-menu-background-color: var(--odx-c-primary);
   --odx-main-menu-text-color: var(--odx-c-primary-text);
   --odx-main-menu-highlight-color: var(--odx-c-highlight);
 
+  @include utils.dark-theme-selector() {
+    --odx-main-menu-background-color: var(--blue-800);
+    --odx-main-menu-text-color: var(--black);
+    --odx-main-menu-highlight-color: var(--cyan-500);
+  }
+
   @include breakpoints.up(phone) {
     --odx-main-menu-max-width: min(100dvw, 384px);
   }

package/scss/components/mainfilter-group.component.scss

@@ -1,5 +1,20 @@
 @use 'sass:math';
 @use '../abstract/dimensions';
+@use '../abstract/typography';
+@use '../abstract/utils';
+
+body {
+  @include utils.dark-theme-selector() {
+    .odx-mainfilter-group {
+      --odx-input-control-outline-color: var(--blue-900);
+      --odx-input-control-outline-color-hover: var(--blue-900);
+      --odx-c-highlight: var(--blue-900);
+      --odx-c-highlight-text: var(--white);
+      --odx-c-focus-outline: var(--cyan-800);
+      --odx-c-focus: var(--focus-bg);
+    }
+  }
+}
 
 .odx-mainfilter-group {
   --odx-input-control-background-color: var(--gray-50);
@@ -15,8 +30,19 @@
   --odx-c-highlight-active: var(--odx-c-focus-outline);
 
   .odx-form-field {
+    flex: 0;
     position: relative;
 
+    &__control {
+      .odx-form-field-control {
+        min-width: dimensions.get-size(math.div(150, 24));
+
+        &.odx-spinbox {
+          min-width: dimensions.get-size(math.div(172, 24));
+        }
+      }
+    }
+
     &__label {
       margin-top: 0;
       position: absolute;
@@ -48,7 +74,11 @@
   }
 
   .odx-button {
+    margin-top: calc(var(--odx-vertical-rythm-base-size) * 0.8334);
+    outline-offset: -1px;
     outline-width: var(--odx-v-outline-width);
+    overflow: visible;
+    position: relative;
 
     &:not(:focus-visible) {
       outline-color: var(--odx-input-control-outline-color);
@@ -57,6 +87,37 @@
     &:focus-visible {
       background-color: var(--odx-c-focus);
     }
+
+    &::before {
+      @include dimensions.padding-x(math.div(3, 24));
+      @include dimensions.padding-y(math.div(2, 24));
+      @include typography.prevent-text-overflow();
+
+      background-color: var(--odx-input-control-background-color);
+      border-radius: var(--odx-v-border-radius-controls);
+      content: attr(label);
+      display: inline-block;
+      font-size: dimensions.get-size(math.div(10, 24));
+      font-weight: var(--odx-typography-font-weight-normal);
+      line-height: 1;
+      margin-top: 0;
+      position: absolute;
+      right: dimensions.get-size(math.div(8, 24));
+      top: dimensions.get-size(math.div(-7, 24));
+      z-index: 1;
+    }
+  }
+
+  .odx-spinbox {
+    .odx-spinbox__action {
+      &:hover {
+        border-color: var(--odx-input-control-outline-color);
+      }
+
+      &:active {
+        background-color: var(--odx-c-secondary-active);
+      }
+    }
   }
 
   .odx-toggle-button-group {

package/scss/components/modal.component.scss

@@ -10,6 +10,7 @@ $modal-padding: math.div(12, 24);
   --odx-modal-margin-y: #{dimensions.get-size(2)};
   --odx-modal-margin-x: #{dimensions.get-size(math.div(8, 24))};
   --odx-modal-max-width: #{dimensions.get-size(20)};
+  --odx-modal-margin-bottom: #{dimensions.get-size(0.5)};
 
   $root: &;
 
@@ -27,6 +28,7 @@ $modal-padding: math.div(12, 24);
   @include breakpoints.up(phone) {
     --odx-modal-margin-y: #{dimensions.get-size(3)};
     --odx-modal-margin-x: #{dimensions.get-size(1)};
+    --odx-modal-margin-bottom: #{dimensions.get-size(1)};
   }
 
   &--sidesheet {
@@ -43,7 +45,7 @@ $modal-padding: math.div(12, 24);
     display: flex;
     flex-direction: column;
     margin: var(--odx-modal-margin-y) auto 0;
-    max-height: calc(100% - var(--odx-modal-margin-y));
+    max-height: calc(100% - var(--odx-modal-margin-y) - var(--odx-modal-margin-bottom));
     min-height: dimensions.get-size(7);
     width: min(var(--odx-modal-max-width), calc(100% - 2 * var(--odx-modal-margin-x)));
 
@@ -62,7 +64,7 @@ $modal-padding: math.div(12, 24);
     #{$root}--sidesheet & {
       height: 100%;
       left: unset;
-      max-height: calc(100% - var(--odx-modal-margin-y) - #{dimensions.get-size(0.5)});
+      max-height: calc(100% - var(--odx-modal-margin-y) - var(--odx-modal-margin-bottom));
       right: 0;
 
       @include breakpoints.up(phone) {