@odx/ui 4.9.0 → 4.10.1

package/package.json

@@ -1,15 +1,21 @@
 {
   "name": "@odx/ui",
-  "version": "4.9.0",
+  "version": "4.10.1",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "peerDependencies": {
     "@odx/icons": "*"
   },
+  "devDependencies": {
+    "autoprefixer": "10.4.20",
+    "cssnano": "7.0.6",
+    "postcss-hover-media-feature": "1.0.2",
+    "sass": "1.83.4",
+    "vite": "6.0.11",
+    "vite-plugin-static-copy": "2.2.0"
+  },
   "files": [
     "*.css",
-    "*.woff2",
-    "*.svg",
     "CHANGELOG.md",
     "scss"
   ],

package/scss/_application.scss

@@ -0,0 +1,59 @@
+@use '../abstract/breakpoints';
+@use '../abstract/dimensions';
+@use '../components/icon.component';
+@use './typography';
+
+.odx-app-root,
+.odx-app {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.odx-app-root {
+  height: 100dvh;
+}
+
+.odx-app {
+  flex: 1 1 0;
+}
+
+.odx-app-main,
+.odx-app-page {
+  display: flex;
+  flex: 1 1 auto;
+}
+
+.odx-app-main {
+  flex-direction: row;
+  overflow: hidden;
+}
+
+.odx-app-page {
+  flex-direction: column;
+  max-height: 100%;
+
+  &__content {
+    flex: 1 1 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scroll-behavior: smooth;
+
+    @include dimensions.padding(0.5, (bottom, left, right));
+
+    @include breakpoints.up(phone) {
+      @include dimensions.padding(1, (bottom, left, right));
+      @include dimensions.padding(0.5, top);
+    }
+  }
+}
+
+.odx-app-content {
+  margin: 0 auto;
+  max-width: breakpoints.get-breakpoint-value(desktop);
+  width: 100%;
+
+  &--left-align {
+    margin-left: 0;
+  }
+}

package/scss/_base.scss

@@ -0,0 +1,31 @@
+@use '../abstract/utils';
+
+html,
+body,
+.odx-root {
+  background-color: var(--odx-c-background);
+}
+
+::-webkit-scrollbar {
+  appearance: none;
+  width: var(--odx-v-scrollbar-width);
+}
+
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-thumb {
+  border: 3px solid transparent;
+}
+
+::-webkit-scrollbar-track {
+  background-color: var(--odx-v-scrollbar-track-color);
+}
+
+::-webkit-scrollbar-thumb {
+  background-clip: content-box;
+  background-color: var(--odx-v-scrollbar-thumb-color);
+  border-radius: var(--odx-v-border-radius);
+
+  &:hover {
+    background-color: var(--odx-v-scrollbar-thumb-color-hover);
+  }
+}

package/scss/_breakpoints.scss

@@ -0,0 +1,86 @@
+/* stylelint-disable block-closing-brace-newline-after */
+@use 'sass:list';
+@use 'sass:map';
+
+$breakpoints: (
+  'phone-s': 360px,
+  'phone': 480px,
+  'tablet': 768px,
+  'desktop-s': 960px,
+  'desktop': 1200px,
+) !default;
+
+@function get-breakpoint-names() {
+  @return map.keys($breakpoints);
+}
+
+@function get-breakpoint-value($breakpoint) {
+  @if $breakpoint and not map.has-key($breakpoints, $breakpoint) {
+    @error "Invalid breakpoint, `#{$breakpoint}` doesn't exist.";
+  }
+
+  @return map.get($breakpoints, $breakpoint);
+}
+
+@function _get-next-value($breakpoint) {
+  @if $breakpoint and not map.has-key($breakpoints, $breakpoint) {
+    @error "Invalid breakpoint, `#{$breakpoint}` doesn't exist.";
+  }
+
+  $keys: get-breakpoint-names();
+  $index: list.index($keys, $breakpoint);
+
+  @return if($index < list.length($keys), list.nth($keys, $index + 1), null);
+}
+
+@function _get-min-value($breakpoint) {
+  $value: get-breakpoint-value($breakpoint);
+
+  @return if($value != 0, $value, null);
+}
+
+@function _get-max-value($breakpoint) {
+  $value: get-breakpoint-value($breakpoint);
+
+  @return if($value > 0, $value - 1, null);
+}
+
+@mixin up($breakpoint) {
+  $min: _get-min-value($breakpoint);
+
+  @if $min {
+    @media (min-width: $min) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+@mixin down($breakpoint) {
+  $max: _get-max-value($breakpoint);
+
+  @if $max {
+    @media (max-width: $max) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+@mixin only($breakpoint) {
+  $min: _get-min-value($breakpoint);
+  $next: _get-next-value($breakpoint);
+  $max: _get-max-value($breakpoint);
+
+  @if $min != null and $max != null {
+    @media (min-width: $min) and (max-width: $max) {
+      @content;
+    }
+  } @else if $max == null {
+    @include up($token) {
+      @content;
+    }
+  }
+}

package/scss/_color-palettes-dark.scss

@@ -0,0 +1,53 @@
+@use '../abstract/utils';
+
+@include utils.theme-selector(dark) {
+  --white: #293642;
+  --white-dark: #060a12;
+  --black: #ffffff;
+  --black-20: #{rgba(#000000, 60%)};
+
+  --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-50-5: #{rgba(#455e85, 0.1)};
+  --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/_color-palettes.scss

@@ -0,0 +1,96 @@
+:root {
+  --white: #ffffff;
+  --black: #00060f;
+  --black-20: #{rgba(#000000, 20%)};
+
+  --white-5: #{rgba(#ffffff, 5%)};
+  --white-60: #{rgba(#ffffff, 60%)};
+
+  --gray-50: #f5f7fa;
+  --gray-100: #e9eef4;
+  --gray-200: #dde5ee;
+  --gray-300: #c7d3e0;
+  --gray-400: #b2c1d2;
+  --gray-500: #9eb0c2;
+  --gray-600: #8b9fb1;
+  --gray-700: #798ea0;
+  --gray-800: #697c8c;
+  --gray-900: #5d6a74;
+
+  --blue-50: #d5e2f6;
+  --blue-100: #a8c4f0;
+  --blue-200: #79a5ec;
+  --blue-300: #4786eb;
+  --blue-400: #1f65d7;
+  --blue-500: #0a51c2;
+  --blue-600: #043c95;
+  --blue-700: #002766;
+  --blue-800: #001433;
+  --blue-900: #000205;
+
+  --blue-700-5: #{rgba(#002766, 5%)};
+  --blue-700-10: #{rgba(#002766, 10%)};
+  --blue-700-15: #{rgba(#002766, 15%)};
+  --blue-800-30: #{rgba(#001433, 30%)};
+
+  --cyan-50: #cbe9ff;
+  --cyan-100: #9dd7ff;
+  --cyan-200: #70c4ff;
+  --cyan-300: #47b3ff;
+  --cyan-400: #1fa2ff;
+  --cyan-500: #0091f7;
+  --cyan-600: #007ad1;
+  --cyan-700: #0065ad;
+  --cyan-800: #00508a;
+  --cyan-900: #003c66;
+
+  --cyan-500-5: #{rgba(#0091f7, 5%)};
+  --cyan-500-15: #{rgba(#0091f7, 15%)};
+  --cyan-500-20: #{rgba(#0091f7, 20%)};
+
+  --red-00: #ffe0e3;
+  --red-50: #ffb4b4;
+  --red-100: #ff9898;
+  --red-200: #ff7b7b;
+  --red-300: #ff5c5c;
+  --red-400: #ff2020;
+  --red-500: #f30303;
+  --red-600: #d70202;
+  --red-700: #bc0000;
+  --red-800: #970000;
+  --red-900: #700000;
+
+  --yellow-50: #fffad7;
+  --yellow-100: #fff7b8;
+  --yellow-200: #fff18a;
+  --yellow-300: #ffed72;
+  --yellow-400: #ffea46;
+  --yellow-500: #ffe300;
+  --yellow-600: #e7cc00;
+  --yellow-700: #bea800;
+  --yellow-800: #988600;
+  --yellow-900: #7c6d00;
+
+  --green-00: #d1ffdf;
+  --green-50: #b7ffc6;
+  --green-100: #93ffaa;
+  --green-200: #6aff8b;
+  --green-300: #36ff62;
+  --green-400: #0bf23e;
+  --green-500: #00dd31;
+  --green-600: #00c92c;
+  --green-700: #00aa25;
+  --green-800: #00851d;
+  --green-900: #006616;
+
+  --orange-50: #fff6ed;
+  --orange-100: #ffebd6;
+  --orange-200: #ffd4a8;
+  --orange-300: #ffd4a8;
+  --orange-400: #ffa64d;
+  --orange-500: #ff8f1f;
+  --orange-600: #f57a00;
+  --orange-700: #cc6600;
+  --orange-800: #a35200;
+  --orange-900: #7a3d00;
+}

package/scss/_colors-dark.scss

@@ -0,0 +1,53 @@
+@use '../abstract/utils';
+
+@include utils.theme-selector(dark) {
+  --odx-c-display: var(--blue-900);
+  --odx-c-headline: var(--blue-900); // deprecated. Use --odx-c-display instead
+
+  --odx-c-text: var(--blue-900);
+  --odx-c-text-inverse: var(--black);
+
+  --odx-c-link: var(--cyan-700);
+  --odx-c-link-hover: var(--cyan-800);
+  --odx-c-link-active: var(--cyan-900);
+  --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-800);
+  --odx-c-focus-outline-dark: var(--blue-900);
+
+  --odx-c-ghost-hover: var(--blue-50-5);
+  --odx-c-ghost-text-disabled: var(--gray-400);
+
+  --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-text: var(--white);
+
+  --odx-c-primary-text-disabled: var(--gray-100);
+
+  --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(--gray-100);
+
+  --odx-c-danger-active: var(--red-100);
+  --odx-c-danger-text-disabled: var(--gray-100);
+
+  --odx-c-success-text: var(--cyan-50);
+  --odx-c-success-text-disabled: var(--gray-100);
+
+  --odx-c-confirmation-text: var(--cyan-50);
+  --odx-c-confirmation-text-disabled: var(--gray-100);
+
+  --odx-c-warning-text: var(--cyan-50);
+}

package/scss/_colors.scss

@@ -0,0 +1,98 @@
+:root {
+  --odx-c-display: var(--blue-700);
+  --odx-c-headline: var(--blue-700); // deprecated. Use --odx-c-display instead
+
+  --odx-c-text: var(--blue-700);
+  --odx-c-text-inverse: var(--white);
+  --odx-c-text-disabled: var(--gray-500);
+
+  --odx-c-link: var(--odx-c-highlight);
+  --odx-c-link-hover: var(--odx-c-highlight-hover);
+  --odx-c-link-active: var(--odx-c-highlight-active);
+  --odx-c-link-disabled: var(--odx-c-text-disabled);
+
+  --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-600);
+
+  --odx-c-error-warning: var(--orange-100);
+  --odx-c-error-warning-outline: var(--orange-200);
+  --odx-c-error-warning-outline-hover: var(--orange-300);
+  --odx-c-error-warning-text: var(--orange-500);
+
+  --odx-c-focus: var(--cyan-500-15);
+  --odx-c-focus-outline: var(--cyan-200);
+  --odx-c-focus-outline-dark: var(--blue-700);
+
+  --odx-c-selected-hover: var(--cyan-500-20);
+  --odx-c-selected: var(--cyan-500-15);
+
+  --odx-c-selection: var(--cyan-300);
+
+  --odx-c-backdrop: var(--white-60);
+  --odx-c-backdrop-dark: var(--blue-800-30);
+
+  --odx-c-box-shadow: var(--black-20);
+
+  --odx-c-separator: var(--gray-200);
+
+  --odx-c-background: var(--gray-50);
+  --odx-c-background-content: var(--white);
+
+  --odx-c-highlight: var(--cyan-500);
+  --odx-c-highlight-hover: var(--cyan-600);
+  --odx-c-highlight-active: var(--cyan-700);
+  --odx-c-highlight-disabled: var(--gray-300);
+  --odx-c-highlight-text: var(--odx-c-text-inverse);
+  --odx-c-highlight-text-disabled: var(--gray-700);
+
+  --odx-c-primary: var(--blue-700);
+  --odx-c-primary-hover: var(--blue-800);
+  --odx-c-primary-active: var(--blue-900);
+  --odx-c-primary-disabled: var(--gray-300);
+  --odx-c-primary-text: var(--odx-c-text-inverse);
+  --odx-c-primary-text-disabled: var(--gray-700);
+
+  --odx-c-secondary: var(--gray-300);
+  --odx-c-secondary-hover: var(--gray-400);
+  --odx-c-secondary-active: var(--gray-500);
+  --odx-c-secondary-disabled: var(--gray-300);
+  --odx-c-secondary-text: var(--odx-c-text);
+  --odx-c-secondary-text-disabled: var(--gray-700);
+
+  --odx-c-success: var(--green-500);
+  --odx-c-success-hover: var(--green-600);
+  --odx-c-success-active: var(--green-700);
+  --odx-c-success-disabled: var(--gray-300);
+  --odx-c-success-text: var(--odx-c-text);
+  --odx-c-success-text-disabled: var(--gray-700);
+
+  --odx-c-warning: var(--yellow-500);
+  --odx-c-warning-hover: var(--yellow-600);
+  --odx-c-warning-active: var(--yellow-700);
+  --odx-c-warning-disabled: var(--yellow-500);
+  --odx-c-warning-text: var(--odx-c-text);
+  --odx-c-warning-text-disabled: var(--yellow-800);
+
+  --odx-c-danger: var(--red-500);
+  --odx-c-danger-hover: var(--red-600);
+  --odx-c-danger-active: var(--red-700);
+  --odx-c-danger-disabled: var(--gray-300);
+  --odx-c-danger-text: var(--odx-c-text-inverse);
+  --odx-c-danger-text-disabled: var(--gray-700);
+
+  --odx-c-confirmation: var(--orange-500);
+  --odx-c-confirmation-hover: var(--orange-600);
+  --odx-c-confirmation-active: var(--orange-700);
+  --odx-c-confirmation-disabled: var(--gray-300);
+  --odx-c-confirmation-text: var(--odx-c-text);
+  --odx-c-confirmation-text-disabled: var(--gray-700);
+
+  --odx-c-ghost: transparent;
+  --odx-c-ghost-hover: var(--blue-700-5);
+  --odx-c-ghost-active: var(--cyan-500-15);
+  --odx-c-ghost-disabled: transparent;
+  --odx-c-ghost-text: var(--cyan-500);
+  --odx-c-ghost-text-disabled: var(--gray-500);
+}

package/scss/_content.scss

@@ -0,0 +1,25 @@
+@use './typography' as *;
+@use './text-list' as *;
+@use './description-list' as *;
+
+.odx-content {
+  @for $i from 1 through 6 {
+    h#{$i} {
+      @extend .odx-heading;
+      @extend .odx-heading-#{$i};
+    }
+  }
+
+  p {
+    @extend .odx-text;
+  }
+
+  ol,
+  ul {
+    @extend .odx-text-list;
+  }
+
+  dl {
+    @extend .odx-description-list;
+  }
+}

package/scss/_controls.scss

@@ -0,0 +1,57 @@
+:root {
+  --odx-control-color: var(--odx-c-text);
+  --odx-control-background-color: var(--gray-200);
+  --odx-control-outline-color: var(--gray-300);
+
+  --odx-control-color-hover: var(--odx-c-text);
+  --odx-control-background-color-hover: var(--gray-300);
+  --odx-control-outline-color-hover: var(--gray-400);
+
+  --odx-control-color-selected: var(--odx-c-highlight-text);
+  --odx-control-background-color-selected: var(--odx-c-highlight);
+  --odx-control-outline-color-selected: var(--odx-c-highlight);
+
+  --odx-control-color-disabled: var(--gray-500);
+  --odx-control-background-color-disabled: var(--gray-100);
+  --odx-control-outline-color-disabled: transparent;
+
+  --odx-control-color-readonly: var(--odx-control-color);
+  --odx-control-background-color-readonly: transparent;
+  --odx-control-outline-color-readonly: var(--odx-control-color);
+
+  --odx-control-color-error: var(--odx-c-error-text);
+  --odx-control-background-color-error: var(--odx-c-error);
+  --odx-control-outline-color-error: var(--odx-c-error-outline);
+  --odx-control-outline-color-error-hover: var(--odx-c-error-outline-hover);
+
+  --odx-control-color-warning: var(--odx-c-error-warning-text);
+  --odx-control-background-color-warning: var(--odx-c-error-warning);
+  --odx-control-outline-color-warning: var(--odx-c-error-warning-outline);
+  --odx-control-outline-color-warning-hover: var(--odx-c-error-warning-outline-hover);
+
+  --odx-input-control-color: var(--odx-c-text);
+  --odx-input-control-background-color: var(--gray-100);
+  --odx-input-control-outline-color: var(--gray-200);
+
+  --odx-input-control-color-hover: var(--odx-c-text);
+  --odx-input-control-background-color-hover: var(--gray-200);
+  --odx-input-control-outline-color-hover: var(--gray-300);
+
+  --odx-input-control-color-disabled: var(--gray-500);
+  --odx-input-control-background-color-disabled: var(--gray-50);
+  --odx-input-control-outline-color-disabled: transparent;
+
+  --odx-input-control-color-readonly: var(--odx-control-color);
+  --odx-input-control-background-color-readonly: transparent;
+  --odx-input-control-outline-color-readonly: var(--odx-control-outline-color);
+
+  --odx-input-control-color-error: var(--odx-c-error-text);
+  --odx-input-control-background-color-error: var(--odx-c-error);
+  --odx-input-control-outline-color-error: var(--odx-c-error-outline);
+  --odx-input-control-outline-color-error-hover: var(--odx-c-error-outline-hover);
+
+  --odx-input-control-color-warning: var(--odx-c-error-warning-text);
+  --odx-input-control-background-color-warning: var(--odx-c-error-warning);
+  --odx-input-control-outline-color-warning: var(--odx-c-error-warning-outline);
+  --odx-input-control-outline-color-warning-hover: var(--odx-c-error-warning-outline-hover);
+}

package/scss/_description-list.scss

@@ -0,0 +1,30 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/typography';
+
+.odx-description-list {
+  $gap: dimensions.get-size(math.div(8, 24));
+
+  @include dimensions.margin-y(0.5);
+
+  column-gap: $gap;
+  display: flex;
+  flex: 0 0 100%;
+  flex-wrap: wrap;
+  row-gap: calc(#{$gap} / 2);
+
+  dt,
+  dd {
+    align-items: flex-end;
+    display: inline-flex;
+    flex: 0 0 calc(50% - #{$gap} / 2);
+  }
+
+  dt {
+    @include typography.font-size(-1);
+  }
+
+  dd {
+    @include typography.font-weight(medium);
+  }
+}

package/scss/_dimensions.scss

@@ -0,0 +1,81 @@
+@use 'sass:math';
+
+@function _get-line-height-factor($factor, $line-height-factor) {
+  @if not $line-height-factor {
+    @return $factor;
+  }
+
+  @return $line-height-factor;
+}
+
+@mixin _vertical-rythm-dimension($factor, $line-height-factor, $properties) {
+  $line-height-factor: _get-line-height-factor($factor, $line-height-factor);
+
+  @include margin-y(calc(($factor - $line-height-factor) / 2));
+
+  @each $property in $properties {
+    #{$property}: get-size($line-height-factor);
+  }
+}
+
+@function get-size($factor) {
+  $factor: math.div(math.ceil($factor * 1e4), 1e4);
+
+  @return calc(var(--odx-vertical-rythm-base-size) * $factor);
+}
+
+@mixin margin($factor, $directions: ('top', 'right', 'bottom', 'left')) {
+  @each $side in $directions {
+    margin-#{$side}: get-size($factor);
+  }
+}
+
+@mixin margin-x($factor: 1) {
+  $spacing: calc(var(--odx-vertical-rythm-base-size) * $factor);
+
+  @include margin($factor, ('right', 'left'));
+}
+
+@mixin margin-y($factor: 1) {
+  $spacing: calc(var(--odx-vertical-rythm-base-size) * $factor);
+
+  @include margin($factor, ('top', 'bottom'));
+}
+
+@mixin padding($factor, $directions: ('top', 'right', 'bottom', 'left')) {
+  @each $side in $directions {
+    padding-#{$side}: get-size($factor);
+  }
+}
+
+@mixin padding-x($factor: 1) {
+  $spacing: calc(var(--odx-vertical-rythm-base-size) * $factor);
+
+  @include padding($factor, ('right', 'left'));
+}
+
+@mixin padding-y($factor: 1) {
+  $spacing: calc(var(--odx-vertical-rythm-base-size) * $factor);
+
+  @include padding($factor, ('top', 'bottom'));
+}
+
+@mixin container($factor: 1, $line-height-factor: null) {
+  @include _vertical-rythm-dimension($factor, $line-height-factor, (height, width));
+}
+
+@mixin min-height($factor: 1, $line-height-factor: null) {
+  @include _vertical-rythm-dimension($factor, $line-height-factor, min-height);
+}
+
+@mixin height($factor: 1, $line-height-factor: null) {
+  @include _vertical-rythm-dimension($factor, $line-height-factor, height);
+}
+
+@mixin line-height($factor: 1, $line-height-factor: null) {
+  $line-height-factor: _get-line-height-factor($factor, $line-height-factor);
+
+  @include padding-y(calc(($factor - $line-height-factor) / 2));
+
+  line-height: get-size($line-height-factor);
+}