@odx/ui 3.5.0 → 3.5.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @odx/ui
 
+## 3.5.2
+
+### Patch Changes
+
+- 209c36a: tooltip font-size updated
+- 7bbcd5c: Updated List item colors and add warning state, danger attribute is deprecated.
+
+## 3.5.1
+
+### Patch Changes
+
+- 16d6965: Fix text overflow in toast item description
+
 ## 3.5.0
 
 ### Minor Changes

package/core-theme.css

@@ -4580,7 +4580,7 @@ html body .odx-fs-italic {
   background-color: var(--odx-c-ghost-hover);
 }
 }
-.odx-list-item--danger+.odx-list-item, .odx-list-item.is-selected+.odx-list-item {
+.odx-list-item--danger+.odx-list-item, .odx-list-item--warning+.odx-list-item, .odx-list-item.is-selected+.odx-list-item {
   --separator-color: transparent !important;
 }
 @media (hover: hover){
@@ -4593,9 +4593,8 @@ html body .odx-fs-italic {
   pointer-events: none;
 }
 .odx-list-item--danger {
-  --odx-c-focus: var(--odx-c-danger);
   --separator-color: transparent !important;
-  background-color: var(--odx-c-danger);
+  background-color: var(--odx-c-danger-active);
   color: var(--odx-c-danger-text);
 }
 @media (hover: hover){
@@ -4603,9 +4602,28 @@ html body .odx-fs-italic {
   background-color: var(--odx-c-danger-hover);
 }
 }
+.odx-list-item--danger:focus-visible {
+  background-color: var(--odx-c-danger-active);
+}
 .odx-list-item--danger.is-disabled {
   color: var(--odx-c-danger-text-disabled);
 }
+.odx-list-item--warning {
+  --separator-color: transparent !important;
+  background-color: var(--odx-c-warning-active);
+  color: var(--odx-c-warning-text);
+}
+@media (hover: hover){
+.odx-list-item--warning:hover:not(.odx-list-item--muted) {
+  background-color: var(--odx-c-warning-hover);
+}
+}
+.odx-list-item--warning:focus-visible {
+  background-color: var(--odx-c-warning-active);
+}
+.odx-list-item--warning.is-disabled {
+  color: var(--odx-c-warning-text-disabled);
+}
 .odx-list-item.is-selected {
   --separator-color: transparent !important;
   background-color: var(--odx-c-selected);
@@ -4616,16 +4634,33 @@ html body .odx-fs-italic {
 }
 }
 .odx-list-item.is-selected.odx-list-item--danger {
-  background-color: var(--odx-c-danger-active);
+  background-color: var(--odx-c-danger);
 }
 @media (hover: hover){
 .odx-list-item.is-selected.odx-list-item--danger:hover:not(.odx-list-item--muted) {
-  background-color: var(--red-800);
+  background-color: var(--odx-c-danger-hover);
 }
 }
 .odx-list-item.is-selected.odx-list-item--danger.is-disabled {
   color: var(--odx-c-danger-text);
 }
+.odx-list-item.is-selected.odx-list-item--danger:focus-visible {
+  background-color: var(--odx-c-danger);
+}
+.odx-list-item.is-selected.odx-list-item--warning {
+  background-color: var(--odx-c-warning);
+}
+@media (hover: hover){
+.odx-list-item.is-selected.odx-list-item--warning:hover:not(.odx-list-item--muted) {
+  background-color: var(--odx-c-warning-hover);
+}
+}
+.odx-list-item.is-selected.odx-list-item--warning.is-disabled {
+  color: var(--odx-c-warning-text);
+}
+.odx-list-item.is-selected.odx-list-item--warning:focus-visible {
+  background-color: var(--odx-c-warning);
+}
 
 :root {
   --odx-loading-spinner-track-stroke-color: var(--blue-700-15);
@@ -6575,6 +6610,7 @@ html body .odx-fs-italic {
 .odx-toast-item__description {
   max-height: calc(var(--odx-vertical-rythm-base-size) * 5);
   overflow: auto;
+  overflow-wrap: break-word;
 }
 .odx-toast-item__close {
   outline: var(--odx-v-outline-width) solid transparent;
@@ -6806,6 +6842,7 @@ html body .odx-fs-italic {
   padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.5);
   padding-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.5);
   padding-left: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+  font-size: calc(var(--odx-typography-base-size) * (1*1/var(--odx-typography-negative-font-scaling-factor)));
   background-color: var(--odx-tooltip-background-color);
   border-radius: var(--odx-v-border-radius);
   color: var(--odx-tooltip-color);

package/package.json

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

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

@@ -7,6 +7,7 @@
 .odx-list-item {
   $root: &;
   $muted-selector: #{$root}--muted;
+  $variants: danger, warning;
 
   --separator-color: var(--odx-c-separator);
 
@@ -56,6 +57,7 @@
   }
 
   &--danger + &,
+  &--warning + &,
   &.is-selected + &,
   &:hover:not(#{$muted-selector}) + & {
     --separator-color: transparent !important;
@@ -66,19 +68,24 @@
     pointer-events: none;
   }
 
-  &--danger {
-    --odx-c-focus: var(--odx-c-danger);
-    --separator-color: transparent !important;
+  @each $variant in $variants {
+    &--#{$variant} {
+      --separator-color: transparent !important;
 
-    background-color: var(--odx-c-danger);
-    color: var(--odx-c-danger-text);
+      background-color: var(--odx-c-#{$variant}-active);
+      color: var(--odx-c-#{$variant}-text);
 
-    &:hover:not(#{$muted-selector}) {
-      background-color: var(--odx-c-danger-hover);
-    }
+      &:hover:not(#{$muted-selector}) {
+        background-color: var(--odx-c-#{$variant}-hover);
+      }
+
+      &:focus-visible {
+        background-color: var(--odx-c-#{$variant}-active);
+      }
 
-    &.is-disabled {
-      color: var(--odx-c-danger-text-disabled);
+      &.is-disabled {
+        color: var(--odx-c-#{$variant}-text-disabled);
+      }
     }
   }
 
@@ -91,15 +98,21 @@
       background-color: var(--odx-c-selected-hover);
     }
 
-    &#{$root}--danger {
-      background-color: var(--odx-c-danger-active);
+    @each $variant in $variants {
+      &#{$root}--#{$variant} {
+        background-color: var(--odx-c-#{$variant});
 
-      &:hover:not(#{$muted-selector}) {
-        background-color: var(--red-800);
-      }
+        &:hover:not(#{$muted-selector}) {
+          background-color: var(--odx-c-#{$variant}-hover);
+        }
 
-      &.is-disabled {
-        color: var(--odx-c-danger-text);
+        &.is-disabled {
+          color: var(--odx-c-#{$variant}-text);
+        }
+
+        &:focus-visible {
+          background-color: var(--odx-c-#{$variant});
+        }
       }
     }
   }

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

@@ -36,6 +36,7 @@
   &__description {
     max-height: dimensions.get-size(5);
     overflow: auto;
+    overflow-wrap: break-word;
   }
 
   &__close {

package/scss/components/tooltip.component.scss

@@ -1,5 +1,6 @@
 @use '../abstract/dimensions';
 @use '../abstract/utils';
+@use '../abstract/typography';
 
 :root {
   --odx-tooltip-background-color: var(--blue-800);
@@ -13,6 +14,7 @@
   $sizes: small, medium, large;
 
   @include dimensions.padding(0.5);
+  @include typography.font-size(-1);
 
   background-color: var(--odx-tooltip-background-color);
   border-radius: var(--odx-v-border-radius);