@odx/ui 2.10.0 → 2.10.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 ## 2.9.9
 
+## 2.10.1
+
+### Patch Changes
+
+- a7e1493f: box-shadow color was updated for dark and light theme
+
 ## 2.10.0
 
 ### Minor Changes
@@ -8,6 +14,10 @@
 
 ### Patch Changes
 
+- 0ded821a: border radius for toasts
+
+### Patch Changes
+
 - 469224e8: Update library dependencies
 
 ### Bug Fixes

package/core-theme.css

@@ -5,6 +5,7 @@
 body {
   --white: #ffffff;
   --black: #00060f;
+  --black-20: rgba(0, 0, 0, 0.2);
   --white-5: rgba(255, 255, 255, 0.05);
   --white-60: rgba(255, 255, 255, 0.6);
   --gray-50: #f5f7fa;
@@ -91,6 +92,7 @@ body[odxTheme=dark], body.odx-theme-dark {
   --white: #293642;
   --white-dark: #060a12;
   --black: #ffffff;
+  --black-20: rgba(0, 0, 0, 0.6);
   --focus-bg: #284e68;
   --white-60: rgba(var(--white), 0.6);
   --gray-50: #2e3d49;
@@ -156,7 +158,7 @@ body {
   --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(--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);
@@ -2315,7 +2317,7 @@ html body .odx-fs-italic {
 .odx-dropdown {
   background-color: var(--odx-c-background-content);
   border-radius: var(--odx-v-border-radius);
-  box-shadow: var(--odx-v-box-shadow-layer-2);
+  box-shadow: var(--odx-v-box-shadow-layer-1);
   display: block;
   min-height: inherit;
 }
@@ -2810,7 +2812,7 @@ body[odxTheme=dark], body.odx-theme-dark {
   align-items: center;
   background-color: var(--odx-bar-background-color);
   border-radius: calc(var(--odx-vertical-rythm-base-size) * 0.25);
-  box-shadow: 0 2px 6px rgba(0, 25, 66, 0.5);
+  box-shadow: var(--odx-v-box-shadow-layer-1);
   color: var(--odx-bar-text-color);
   display: inline-flex;
   gap: calc(var(--odx-vertical-rythm-base-size) * 0.5);
@@ -5964,6 +5966,7 @@ body {
 
 .odx-toast-container {
   --odx-toast-outer-offset: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
+  --odx-toast-border-radius: calc(var(--odx-vertical-rythm-base-size) * 0.25);
   display: flex;
   flex-direction: column;
   margin-top: calc(var(--odx-vertical-rythm-base-size) * 0.1667);
@@ -5993,6 +5996,7 @@ body {
   --odx-c-warning: var(--yellow-50);
   --odx-c-danger: var(--red-00);
   --odx-c-success: var(--green-00);
+  border-radius: var(--odx-toast-border-radius);
   box-shadow: var(--odx-v-box-shadow-layer-1);
   display: block;
 }

package/package.json

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

package/scss/components/bar.component.scss

@@ -27,7 +27,7 @@ body {
   align-items: center;
   background-color: var(--odx-bar-background-color);
   border-radius: dimensions.get-size(math.div(6, 24));
-  box-shadow: 0 2px 6px rgb(0 25 66 / 50%);
+  box-shadow: var(--odx-v-box-shadow-layer-1);
   color: var(--odx-bar-text-color);
   display: inline-flex;
   gap: dimensions.get-size(math.div(12, 24));

package/scss/components/dropdown.component.scss

@@ -6,7 +6,7 @@ $dropdown-open-selector: '.odx-dropdown-host[aria-expanded="true"]';
 .odx-dropdown {
   background-color: var(--odx-c-background-content);
   border-radius: var(--odx-v-border-radius);
-  box-shadow: var(--odx-v-box-shadow-layer-2);
+  box-shadow: var(--odx-v-box-shadow-layer-1);
   display: block;
   min-height: inherit;
 

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

@@ -13,6 +13,7 @@
   $variants: default, warning, danger, success;
   $gap: dimensions.get-size(math.div(12, 24));
 
+  border-radius: var(--odx-toast-border-radius);
   box-shadow: var(--odx-v-box-shadow-layer-1);
   display: block;
 

package/scss/components/toast.component.scss

@@ -5,6 +5,7 @@
 
 .odx-toast-container {
   --odx-toast-outer-offset: #{dimensions.get-size(math.div(8, 24))};
+  --odx-toast-border-radius: #{dimensions.get-size(math.div(6, 24))};
 
   display: flex;
   flex-direction: column;

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

@@ -5,6 +5,7 @@ body {
     --white: #293642;
     --white-dark: #060a12;
     --black: #ffffff;
+    --black-20: #{rgba(#000000, 60%)};
 
     --focus-bg: #284e68;
 

package/scss/variables/_color-palettes.scss

@@ -1,6 +1,7 @@
 body {
   --white: #ffffff;
   --black: #00060f;
+  --black-20: #{rgba(#000000, 20%)};
 
   --white-5: #{rgba(#ffffff, 5%)};
   --white-60: #{rgba(#ffffff, 60%)};

package/scss/variables/_colors.scss

@@ -33,7 +33,7 @@ body {
   --odx-c-backdrop: var(--white-60);
   --odx-c-backdrop-dark: var(--blue-800-30);
 
-  --odx-c-box-shadow: var(--blue-800-30);
+  --odx-c-box-shadow: var(--black-20);
 
   --odx-c-separator: var(--gray-200);