@odx/ui 5.0.13 → 5.1.0

package/scss/charts/theme.scss

@@ -1,51 +1,17 @@
 @use '../abstract/dimensions';
 @use '../abstract/typography';
 
-:root {
-  --charts-series-aqua-300: #15dcc4;
-  --charts-series-ocean-300: #1cb4d8;
-  --charts-series-sky-300: #3d88e0;
-  --charts-series-indigo-300: #6a53e6;
-  --charts-series-purple-300: #8f32e2;
-  --charts-series-violet-300: #b318d4;
-  --charts-series-berry-300: #ee1b80;
+// Chart theme colors
+@use './colors/color-palettes';
+@use './colors/color-palettes-dark';
 
-  --charts-series-aqua-100: #9af4ea;
-  --charts-series-ocean-100: #a0dcff;
-  --charts-series-sky-100: #a4c2f8;
-  --charts-series-indigo-100: #a99ded;
-  --charts-series-purple-100: #c693f4;
-  --charts-series-violet-100: #e08ff2;
-  --charts-series-berry-100: #f0a7cb;
-
-  --charts-series-aqua-500: #0a786b;
-  --charts-series-ocean-500: #175b68;
-  --charts-series-sky-500: #254084;
-  --charts-series-indigo-500: #3720ae;
-  --charts-series-purple-500: #570f9b;
-  --charts-series-violet-500: #760584;
-  --charts-series-berry-500: #a90857;
-
-  --charts-series-aqua-200: #35eed8;
-  --charts-series-ocean-200: #6ecdff;
-  --charts-series-sky-200: #7aa6fc;
-  --charts-series-indigo-200: #8976f8;
-  --charts-series-purple-200: #a662e7;
-  --charts-series-violet-200: #bf56d1;
-  --charts-series-berry-200: #de599a;
-
-  --charts-series-aqua-400: #09a491;
-  --charts-series-ocean-400: #1c8093;
-  --charts-series-sky-400: #355fad;
-  --charts-series-indigo-400: #523cd2;
-  --charts-series-purple-400: #8f32e2;
-  --charts-series-violet-400: #9a0aaf;
-  --charts-series-berry-400: #cb0b68;
-
-  --charts-border-color: var(--odx-c-separator);
-  --charts-text-color: var(--odx-c-text);
-  --charts-background-color: var(--odx-c-background-content);
-
-  --charts-font-family: var(--odx-typography-font-family);
-  --charts-font-size: var(--odx-typography-base-size);
-}
+// Chart components
+@use './components/circle-chart-table.component';
+@use './components/gantt-chart.component';
+@use './components/line-timeframes-chart.component';
+@use './components/mirror-bar-chart.component';
+@use './components/multi-axis-box-plot.component';
+@use './components/stairs-combo-chart.component';
+@use './components/slider-bar-chart.component';
+@use './components/chart-header.component';
+@use './components/chart-footer.component';

package/scss/circle-chart-table.component.scss

@@ -0,0 +1,46 @@
+.odx-circle-chart-table {
+  $root: &;
+
+  display: block;
+
+  &__container {
+    display: flex;
+    gap: calc(var(--odx-vertical-rythm-base-size) * 1);
+    padding: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+    width: 100%;
+  }
+
+  &__chart {
+    flex: 0 0 auto;
+    height: calc(var(--odx-vertical-rythm-base-size) * 5.375);
+    position: relative;
+    width: calc(var(--odx-vertical-rythm-base-size) * 5.375);
+
+    &-center {
+      left: 50%;
+      position: absolute;
+      text-align: center;
+      top: 50%;
+      transform: translate(-50%, -50%);
+
+      &-main {
+        font-size: calc(var(--odx-typography-base-size) * 1.375);
+        font-weight: var(--odx-typography-font-weight-bold);
+      }
+    }
+  }
+
+  #{$root}__table {
+    flex: 1 1 auto;
+    min-width: 0;
+
+    .color-dot {
+      border-radius: 50%;
+      display: inline-block;
+      height: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+      margin-right: calc(var(--odx-vertical-rythm-base-size) * 0.25);
+      vertical-align: middle;
+      width: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+    }
+  }
+}

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

@@ -0,0 +1,14 @@
+@use '../../abstract/utils';
+
+@include utils.theme-selector(dark) {
+  --odx-charts-series-blue-700: var(--odx-charts-series-blue-100);
+  --odx-charts-series-cyan-700: var(--odx-charts-series-cyan-100);
+  --odx-charts-series-aqua-700: var(--odx-charts-series-aqua-100);
+  --odx-charts-series-ocean-700: var(--odx-charts-series-ocean-100);
+  --odx-charts-series-indigo-700: var(--odx-charts-series-indigo-100);
+  --odx-charts-series-purple-700: var(--odx-charts-series-purple-100);
+  --odx-charts-series-berry-700: var(--odx-charts-series-berry-100);
+  --odx-charts-series-violet-700: var(--odx-charts-series-violet-100);
+  --odx-charts-series-gray-75-dark-700: var(--draeger-cool-gray-15);
+  --odx-charts-series-gray-50-dark-700: var(--draeger-cool-gray-25);
+}

package/scss/colors/_color-palettes.scss

@@ -0,0 +1,44 @@
+:root {
+  --odx-charts-series-blue-500: var(--blue-500);
+  --odx-charts-series-cyan-500: var(--cyan-500);
+  --odx-charts-series-aqua-500: #15dcc4;
+  --odx-charts-series-ocean-500: #1cb4d8;
+  --odx-charts-series-indigo-500: #6a53e6;
+  --odx-charts-series-purple-500: #8f32e2;
+  --odx-charts-series-berry-500: #ee1b80;
+  --odx-charts-series-violet-500: #b318d4;
+  --odx-charts-series-gray-medium-50-500: var(--draeger-cool-gray-50);
+  --odx-charts-series-gray-medium-25-500: var(--draeger-cool-gray-25);
+
+  --odx-charts-series-blue-700: var(--blue-700);
+  --odx-charts-series-cyan-700: var(--cyan-700);
+  --odx-charts-series-aqua-700: #09a491;
+  --odx-charts-series-ocean-700: #1c8093;
+  --odx-charts-series-indigo-700: #523cd2;
+  --odx-charts-series-purple-700: #751fc7;
+  --odx-charts-series-berry-700: #cd0b68;
+  --odx-charts-series-violet-700: #9a0aaf;
+  --odx-charts-series-gray-75-dark-700: var(--draeger-cool-gray-75);
+  --odx-charts-series-gray-50-dark-700: var(--draeger-cool-gray-50);
+
+  --odx-charts-series-blue-100: #a8c4f0;
+  --odx-charts-series-cyan-100: #9dd7ff;
+  --odx-charts-series-aqua-100: #9af4ea;
+  --odx-charts-series-ocean-100: #a0dcff;
+  --odx-charts-series-indigo-100: #a99ded;
+  --odx-charts-series-purple-100: #c693f4;
+  --odx-charts-series-violet-100: #e08ff2;
+  --odx-charts-series-berry-100: #f0a7cb;
+
+  --odx-charts-border-color: var(--odx-c-separator);
+  --odx-charts-text-color: var(--odx-c-text);
+  --odx-charts-background-color: var(--odx-c-background-content);
+
+  --odx-charts-font-family: var(--odx-typography-font-family);
+  --odx-charts-font-size: var(--odx-typography-base-size);
+
+  --draeger-cool-gray-15: #cdd2d7;
+  --draeger-cool-gray-25: #b4b9be;
+  --draeger-cool-gray-50: #878c91;
+  --draeger-cool-gray-75: #5a646e;
+}

package/scss/components/chart-footer.component.scss

@@ -0,0 +1,21 @@
+.odx-chart-footer {
+  align-items: center;
+  display: flex;
+  gap: calc(var(--odx-vertical-rythm-base-size) * 0.75);
+  justify-content: flex-end;
+  padding: calc(var(--odx-vertical-rythm-base-size) * 0.5) 0;
+  width: 100%;
+
+  .legend-item {
+    align-items: center;
+    display: flex;
+    font-size: calc(var(--odx-typography-base-size) * 0.875);
+    gap: calc(var(--odx-vertical-rythm-base-size) * 0.25);
+  }
+
+  .legend-dot {
+    border-radius: 50%;
+    height: calc(var(--odx-vertical-rythm-base-size) * 0.375);
+    width: calc(var(--odx-vertical-rythm-base-size) * 0.375);
+  }
+}

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

@@ -0,0 +1,49 @@
+.odx-chart-header {
+  display: flex;
+  padding: calc(var(--odx-vertical-rythm-base-size) * 0.5) 0;
+  width: 100%;
+
+  .odx-chart-header__actions {
+    display: none;
+    gap: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+    margin-left: auto;
+  }
+}
+
+.odx-chart-header--center {
+  align-items: center;
+  display: flex;
+  gap: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+  justify-content: center;
+  min-height: calc(var(--odx-vertical-rythm-base-size) * 1.5);
+  padding: calc(var(--odx-vertical-rythm-base-size) * 0.5) 0;
+}
+
+.odx-chart-header--split,
+.odx-chart-header--controls,
+.odx-chart-header--toggle,
+.odx-chart-header--textlink {
+  align-items: center;
+  display: flex;
+  gap: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+  justify-content: space-between;
+  min-height: calc(var(--odx-vertical-rythm-base-size) * 1.5);
+  padding: calc(var(--odx-vertical-rythm-base-size) * 0.5) 0;
+
+  .odx-chart-header__actions {
+    align-items: center;
+    display: flex;
+  }
+}
+
+.odx-chart-header--controls {
+  .odx-chart-header__actions form {
+    align-items: center;
+    display: flex;
+    gap: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+
+    .odx-select__trigger {
+      padding: 0 calc(var(--odx-vertical-rythm-base-size) * 0.3);
+    }
+  }
+}

package/scss/components/circle-chart-table.component.scss

@@ -0,0 +1,46 @@
+.odx-circle-chart-table {
+  $root: &;
+
+  display: block;
+
+  &__container {
+    display: flex;
+    gap: calc(var(--odx-vertical-rythm-base-size) * 1);
+    padding: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+    width: 100%;
+  }
+
+  &__chart {
+    flex: 0 0 auto;
+    height: calc(var(--odx-vertical-rythm-base-size) * 5.375);
+    position: relative;
+    width: calc(var(--odx-vertical-rythm-base-size) * 5.375);
+
+    &-center {
+      left: 50%;
+      position: absolute;
+      text-align: center;
+      top: 50%;
+      transform: translate(-50%, -50%);
+
+      &-main {
+        font-size: calc(var(--odx-typography-base-size) * 1.375);
+        font-weight: var(--odx-typography-font-weight-bold);
+      }
+    }
+  }
+
+  #{$root}__table {
+    flex: 1 1 auto;
+    min-width: 0;
+
+    .color-dot {
+      border-radius: 50%;
+      display: inline-block;
+      height: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+      margin-right: calc(var(--odx-vertical-rythm-base-size) * 0.25);
+      vertical-align: middle;
+      width: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+    }
+  }
+}

package/scss/components/gantt-chart.component.scss

@@ -0,0 +1,24 @@
+.odx-gantt-chart {
+  display: flex;
+  flex-direction: column;
+
+  &__line {
+    height: calc(var(--odx-vertical-rythm-base-size) * 5.625);
+    position: relative;
+
+    canvas {
+      height: 100% !important;
+      width: 100% !important;
+    }
+  }
+
+  &__bar {
+    height: calc(var(--odx-vertical-rythm-base-size) * 14.0625);
+    position: relative;
+
+    canvas {
+      height: 100% !important;
+      width: 100% !important;
+    }
+  }
+}

package/scss/components/line-timeframes-chart.component.scss

@@ -0,0 +1,59 @@
+.odx-line-timeframes-chart {
+  .odx-line-timeframes-chart__container {
+    display: flex;
+    gap: calc(var(--odx-vertical-rythm-base-size) * 1);
+    width: 100%;
+  }
+
+  &__chart {
+    flex: 1 0 80%;
+    height: auto;
+    max-width: 80%;
+  }
+
+  &__timeframe {
+    min-width: calc(20% - var(--odx-vertical-rythm-base-size));
+
+    &-title {
+      font-weight: var(--odx-typography-font-weight-bold);
+      margin-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+    }
+
+    &-items {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+    }
+
+    &-item {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--odx-vertical-rythm-base-size) * 0.125);
+
+      &-header {
+        align-items: center;
+        display: flex;
+        gap: calc(var(--odx-vertical-rythm-base-size) * 0.25);
+      }
+
+      &-dot {
+        border-radius: 50%;
+        flex-shrink: 0;
+        height: calc(var(--odx-vertical-rythm-base-size) * 0.3125);
+        width: calc(var(--odx-vertical-rythm-base-size) * 0.3125);
+      }
+
+      &-label {
+        font-size: calc(var(--odx-typography-base-size) * 0.875);
+        line-height: 1.2;
+      }
+
+      &-value {
+        font-size: calc(var(--odx-typography-base-size) * 0.875);
+        font-weight: var(--odx-typography-font-weight-bold);
+        line-height: 1.2;
+        padding-left: calc(var(--odx-vertical-rythm-base-size) * 0.5 + 8px);
+      }
+    }
+  }
+}

package/scss/components/mirror-bar-chart.component.scss

@@ -0,0 +1,34 @@
+.odx-mirror-bar-chart {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--odx-vertical-rythm-base-size) * 1);
+  width: 100%;
+
+  &__title {
+    color: var(--odx-c-text-primary);
+    font-size: var(--odx-typography-base-size);
+    font-weight: var(--odx-typography-font-weight-medium);
+    margin: 0;
+  }
+
+  &__container {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__wrapper {
+    height: calc(var(--odx-vertical-rythm-base-size) * 9.375);
+    position: relative;
+    width: 100%;
+  }
+
+  &__controls {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+  }
+}
+
+.odx-mirror-bar-chart__wrapper:nth-child(2) {
+  height: calc(var(--odx-vertical-rythm-base-size) * 9.375 - 40px);
+}

package/scss/components/multi-axis-box-plot.component.scss

@@ -0,0 +1,49 @@
+.odx-multi-axis-box-plot {
+  &__item {
+    margin-bottom: calc(var(--odx-vertical-rythm-base-size) * 1);
+  }
+
+  &__header {
+    margin-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.25);
+  }
+
+  &__title {
+    align-items: center;
+    display: flex;
+    gap: calc(var(--odx-vertical-rythm-base-size) * 0.25);
+  }
+
+  &__label {
+    font-weight: var(--odx-typography-font-weight-bold);
+  }
+
+  &__value {
+    font-weight: var(--odx-typography-font-weight-normal);
+  }
+
+  &__chart-container {
+    height: calc(var(--odx-vertical-rythm-base-size) * 2.0312);
+    margin: calc(var(--odx-vertical-rythm-base-size) * 0.5) 0;
+    position: relative;
+    z-index: var(--odx-v-layer-1);
+
+    canvas {
+      height: 100% !important;
+      width: 100% !important;
+    }
+  }
+
+  &__color-scale {
+    bottom: calc(var(--odx-vertical-rythm-base-size) * 0.625);
+    height: calc(var(--odx-vertical-rythm-base-size) * 0.125);
+    left: calc(var(--odx-vertical-rythm-base-size) * 0.25);
+    overflow: hidden;
+    position: absolute;
+    width: calc(100% - var(--odx-vertical-rythm-base-size) * 0.3125);
+  }
+
+  &__color-range {
+    height: 100%;
+    position: absolute;
+  }
+}

package/scss/components/slider-bar-chart.component.scss

@@ -0,0 +1,7 @@
+.odx-slider-bar-chart {
+  display: block;
+
+  &__slider {
+    margin-top: var(--odx-vertical-rythm-base-size);
+  }
+}

package/scss/components/stairs-combo-chart.component.scss

@@ -0,0 +1,9 @@
+.odx-stairs-combo-chart {
+  display: block;
+  width: 100%;
+
+  canvas {
+    height: 100% !important;
+    width: 100% !important;
+  }
+}

package/scss/components/toast-item.component.scss

@@ -8,13 +8,16 @@
   --odx-c-warning: var(--yellow-50);
   --odx-c-danger: var(--red-00);
   --odx-c-success: var(--green-00);
+  --odx-c-warning-strong: var(--yellow-500);
+  --odx-c-danger-strong: var(--red-500);
 
   $root: &;
-  $variants: default, warning, danger, success;
+  $variants: default, warning, danger, success, warning-strong, danger-strong;
   $gap: dimensions.get-size(math.div(12, 24));
 
   border-radius: var(--odx-toast-border-radius);
   box-shadow: var(--odx-v-box-shadow-layer-1);
+  color: var(--odx-c-text);
   display: block;
 
   &__content {
@@ -43,6 +46,7 @@
     @include utils.interactive(true);
 
     background-color: transparent;
+    color: var(--odx-c-text);
     margin: 0;
     margin-right: calc(#{$gap} / -2);
     margin-top: calc(#{$gap} / -2);
@@ -66,7 +70,7 @@
   }
 
   &--danger {
-    --odx-c-text: var(--red-700);
+    --odx-c-text: var(--odx-c-error-text);
     --odx-v-scrollbar-thumb-color: var(--odx-c-text);
     --odx-v-scrollbar-thumb-color-hover: var(--red-800);
 
@@ -76,4 +80,18 @@
       color: inherit;
     }
   }
+
+  &--danger-strong {
+    --odx-c-text: var(--white);
+
+    :root:has([odxTheme='dark'], .odx-theme-dark) & {
+      --odx-c-text: var(--black);
+    }
+  }
+
+  &--warning-strong {
+    :root:has([odxTheme='dark'], .odx-theme-dark) & {
+      --odx-c-text: var(--white);
+    }
+  }
 }

package/scss/components/toast.component.scss

@@ -9,7 +9,6 @@
 
   background-color: transparent;
   border: none;
-  color: var(--odx-c-text);
   display: flex;
   flex-direction: column;
   margin: #{dimensions.get-size(math.div(4, 24))} var(--odx-toast-outer-offset) auto auto;

package/scss/gantt-chart.component.scss

@@ -0,0 +1,24 @@
+.odx-gantt-chart {
+  display: flex;
+  flex-direction: column;
+
+  &__line {
+    height: calc(var(--odx-vertical-rythm-base-size) * 5.625);
+    position: relative;
+
+    canvas {
+      height: 100% !important;
+      width: 100% !important;
+    }
+  }
+
+  &__bar {
+    height: calc(var(--odx-vertical-rythm-base-size) * 14.0625);
+    position: relative;
+
+    canvas {
+      height: 100% !important;
+      width: 100% !important;
+    }
+  }
+}

package/scss/line-timeframes-chart.component.scss

@@ -0,0 +1,59 @@
+.odx-line-timeframes-chart {
+  .odx-line-timeframes-chart__container {
+    display: flex;
+    gap: calc(var(--odx-vertical-rythm-base-size) * 1);
+    width: 100%;
+  }
+
+  &__chart {
+    flex: 1 0 80%;
+    height: auto;
+    max-width: 80%;
+  }
+
+  &__timeframe {
+    min-width: calc(20% - var(--odx-vertical-rythm-base-size));
+
+    &-title {
+      font-weight: var(--odx-typography-font-weight-bold);
+      margin-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+    }
+
+    &-items {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+    }
+
+    &-item {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--odx-vertical-rythm-base-size) * 0.125);
+
+      &-header {
+        align-items: center;
+        display: flex;
+        gap: calc(var(--odx-vertical-rythm-base-size) * 0.25);
+      }
+
+      &-dot {
+        border-radius: 50%;
+        flex-shrink: 0;
+        height: calc(var(--odx-vertical-rythm-base-size) * 0.3125);
+        width: calc(var(--odx-vertical-rythm-base-size) * 0.3125);
+      }
+
+      &-label {
+        font-size: calc(var(--odx-typography-base-size) * 0.875);
+        line-height: 1.2;
+      }
+
+      &-value {
+        font-size: calc(var(--odx-typography-base-size) * 0.875);
+        font-weight: var(--odx-typography-font-weight-bold);
+        line-height: 1.2;
+        padding-left: calc(var(--odx-vertical-rythm-base-size) * 0.5 + 8px);
+      }
+    }
+  }
+}

package/scss/mirror-bar-chart.component.scss

@@ -0,0 +1,34 @@
+.odx-mirror-bar-chart {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--odx-vertical-rythm-base-size) * 1);
+  width: 100%;
+
+  &__title {
+    color: var(--odx-c-text-primary);
+    font-size: var(--odx-typography-base-size);
+    font-weight: var(--odx-typography-font-weight-medium);
+    margin: 0;
+  }
+
+  &__container {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__wrapper {
+    height: calc(var(--odx-vertical-rythm-base-size) * 9.375);
+    position: relative;
+    width: 100%;
+  }
+
+  &__controls {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+  }
+}
+
+.odx-mirror-bar-chart__wrapper:nth-child(2) {
+  height: calc(var(--odx-vertical-rythm-base-size) * 9.375 - 40px);
+}