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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odx/ui",
-  "version": "1.0.0-rc.23",
+  "version": "1.0.0-rc.24",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "peerDependencies": {

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

@@ -1,4 +1,4 @@
-@use '@odx/icons/core/utils' as icons;
+@use '@odx/icons/core/core-utils' as icons;
 @use '../../abstract/dimensions';
 @use '../../abstract/typography';
 

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);
 }

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);
 }
 

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/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/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-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) {

package/scss/components/select.component.scss

@@ -4,7 +4,7 @@
 @use '../abstract/typography';
 @use '../abstract/utils';
 
-:root {
+body {
   --odx-select-max-height: 220px;
 }
 

package/scss/components/tooltip.component.scss

@@ -1,6 +1,7 @@
 @use '../abstract/dimensions';
+@use '../abstract/utils';
 
-:root {
+body {
   --odx-tooltip-background-color: var(--blue-800);
   --odx-tooltip-color: var(--odx-c-text-inverse);
   --odx-tooltip-size-small: #{dimensions.get-size(5)};

package/scss/core.scss

@@ -19,6 +19,11 @@ Layout
 @use 'cdk/active-indicator';
 @use 'cdk/connected-overlay';
 
+/*
+  Skeleton
+*/
+@use 'skeleton/skeleton';
+
 /*
   Components
 */

package/scss/skeleton/_skeleton.scss

@@ -0,0 +1,49 @@
+@keyframes skeleton-animation {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0.5;
+  }
+}
+
+.odx-skeleton {
+  background-color: transparent;
+  color: transparent;
+  pointer-events: none;
+  position: relative;
+  user-select: none;
+
+  &::after {
+    animation: skeleton-animation ease-in-out 1s infinite alternate;
+    background-color: var(--gray-200);
+    border-radius: var(--odx-v-border-radius);
+    content: '';
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+
+  &--text::before {
+    content: '\a0';
+  }
+
+  &--short::after {
+    width: 40%;
+  }
+
+  &--center::after {
+    left: 50%;
+    position: absolute;
+    transform: translate(-50%, 0);
+    width: 40%;
+  }
+
+  * {
+    opacity: 0;
+    visibility: hidden;
+  }
+}

package/scss/variables/_color-palettes-dark.scss

@@ -0,0 +1,53 @@
+@use '../abstract/utils';
+
+body {
+  @include utils.dark-theme-selector() {
+    --white: #293642;
+    --white-dark: #060a12;
+    --black: #ffffff;
+
+    --focus-bg: #284e68;
+
+    --white-60: #{rgba(var(--white), 0.6)};
+
+    --gray-50: #2e3d49;
+    --gray-100: #344351;
+    --gray-200: #3e5160;
+    --gray-300: #495e6e;
+    --gray-400: #556c7c;
+    --gray-500: #607a8a;
+    --gray-600: #6d8797;
+    --gray-700: #7d94a1;
+    --gray-800: #e9eef4;
+    --gray-900: #9cacb4;
+
+    --blue-50: #455e85;
+    --blue-100: #043c95;
+    --blue-600: #a8c4f0;
+    --blue-700: #cbe9ff;
+    --blue-700-5: #{rgba(#cbe9ff, 0.1)};
+    --blue-700-10: #{rgba(#cbe9ff, 0.2)};
+    --blue-900: #d5e2f6;
+
+    --cyan-50: #002766;
+    --cyan-100: #003c66;
+    --cyan-200: #00508a;
+    --cyan-300: #0065ad;
+    --cyan-400: #007ad1;
+    --cyan-600: #1fa2ff;
+    --cyan-700: #47b3ff;
+    --cyan-800: #70c4ff;
+    --cyan-900: #9dd7ff;
+
+    --red-00: #4b3138;
+    --red-50: #724956;
+    --red-100: #bc0000;
+    --red-700: #ff9898;
+    --red-800: #ffb4b4;
+    --red-900: #ffe0e3;
+
+    --yellow-50: #5f5439;
+
+    --green-00: #355e54;
+  }
+}

package/scss/variables/_color-palettes.scss

@@ -1,4 +1,4 @@
-:root {
+body {
   --white: #ffffff;
   --black: #00060f;
 

package/scss/variables/_colors-dark.scss

@@ -0,0 +1,43 @@
+@use '../abstract/utils';
+
+body {
+  @include utils.dark-theme-selector() {
+    --odx-c-headline: var(--blue-900);
+
+    --odx-c-text: var(--blue-900);
+    --odx-c-text-inverse: var(--black);
+
+    --odx-c-link-disabled: var(--gray-400);
+
+    --odx-c-error: var(--red-00);
+    --odx-c-error-outline: var(--red-50);
+    --odx-c-error-outline-hover: var(--red-100);
+    --odx-c-error-text: var(--red-700);
+
+    --odx-c-focus: var(--focus-bg);
+    --odx-c-focus-outline: var(--cyan-200);
+    --odx-c-focus-outline-dark: var(--odx-c-focus-outline);
+
+    --odx-c-highlight-text: var(--black);
+
+    --odx-c-primary: var(--blue-900);
+    --odx-c-primary-hover: var(--blue-600);
+    --odx-c-primary-active: var(--blue-200);
+    --odx-c-primary-disabled: var(--odx-c-primary);
+    --odx-c-primary-text: var(--white);
+    --odx-c-primary-text-disabled: var(--blue-300);
+
+    --odx-c-secondary-text-disabled: var(--gray-100);
+
+    --odx-c-highlight-hover: var(--cyan-400);
+    --odx-c-highlight-active: var(--cyan-300);
+    --odx-c-highlight-text-disabled: var(--cyan-200);
+
+    --odx-c-danger-active: var(--red-100);
+    --odx-c-danger-text-disabled: var(--red-50);
+
+    --odx-c-success-text: var(--cyan-50);
+
+    --odx-c-confirmation-text: var(--cyan-50);
+  }
+}

package/scss/variables/_colors.scss

@@ -1,4 +1,4 @@
-:root {
+body {
   --odx-c-headline: var(--blue-700);
 
   --odx-c-text: var(--blue-700);
@@ -22,7 +22,8 @@
   --odx-c-error-warning-text: var(--orange-500);
 
   --odx-c-focus: var(--cyan-500-15);
-  --odx-c-focus-outline: var(--cyan-300);
+  --odx-c-focus-outline: var(--cyan-200);
+  --odx-c-focus-outline-dark: var(--cyan-400);
 
   --odx-c-selected: var(--cyan-500-15);
   --odx-c-selected-hover: var(--cyan-500-20);

package/scss/variables/_controls.scss

@@ -1,4 +1,4 @@
-:root {
+body {
   --odx-control-color: var(--odx-c-text);
   --odx-control-background-color: var(--gray-200);
   --odx-control-outline-color: var(--gray-300);

package/scss/variables/_index.scss

@@ -1,5 +1,7 @@
 @forward 'color-palettes';
+@forward 'color-palettes-dark';
 @forward 'colors';
+@forward 'colors-dark';
 @forward 'controls';
 @forward 'typography';
 @forward 'vertical-rythm';

package/scss/variables/_visuals.scss

@@ -1,4 +1,4 @@
-:root {
+body {
   --odx-v-border-radius: calc(var(--odx-typography-base-size) * 0.375);
   --odx-v-border-radius-controls: calc(var(--odx-typography-base-size) * 0.19);