@odx/ui 2.9.9 → 2.10.1

package/CHANGELOG.md

@@ -1,7 +1,21 @@
-## @odx/ui 2.9.8 (2023-10-25)
-
 ## 2.9.9
 
+## 2.10.1
+
+### Patch Changes
+
+- a7e1493f: box-shadow color was updated for dark and light theme
+
+## 2.10.0
+
+### Minor Changes
+
+- 00afc8a6: Expanded the possibilities of using the Card component
+
+### Patch Changes
+
+- 0ded821a: border radius for toasts
+
 ### Patch Changes
 
 - 469224e8: Update library dependencies

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);
@@ -2982,6 +2984,17 @@ body[odxTheme=dark], body.odx-theme-dark {
   border-radius: 0;
 }
 
+body {
+  --odx-card-avatar-size: 64px;
+  --odx-card-content-vertical-alignment: center;
+}
+@media (min-width: 480px) {
+  body {
+    --odx-card-avatar-size: 128px;
+    --odx-card-content-vertical-alignment: top;
+  }
+}
+
 .odx-card {
   transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
   transition-property: box-shadow, outline-color, color;
@@ -3052,24 +3065,6 @@ body[odxTheme=dark], body.odx-theme-dark {
     gap: calc(var(--odx-vertical-rythm-base-size) * 1);
   }
 }
-.odx-card--launch-tile .odx-avatar, .odx-card--launch-tile-centered .odx-avatar {
-  margin-top: calc(var(--odx-vertical-rythm-base-size) * 0);
-  margin-bottom: calc(var(--odx-vertical-rythm-base-size) * 0);
-  height: calc(var(--odx-vertical-rythm-base-size) * 2.6667);
-  width: calc(var(--odx-vertical-rythm-base-size) * 2.6667);
-  margin-top: calc(var(--odx-vertical-rythm-base-size) * 0.1667);
-  margin-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.1667);
-  flex: 0 0 auto;
-}
-@media (min-width: 480px) {
-  .odx-card--launch-tile .odx-avatar, .odx-card--launch-tile-centered .odx-avatar {
-    margin-top: calc(var(--odx-vertical-rythm-base-size) * 0);
-    margin-bottom: calc(var(--odx-vertical-rythm-base-size) * 0);
-    height: calc(var(--odx-vertical-rythm-base-size) * 5.3334);
-    width: calc(var(--odx-vertical-rythm-base-size) * 5.3334);
-    margin: calc(var(--odx-vertical-rythm-base-size) * 0.1667) auto 0;
-  }
-}
 .odx-card--launch-tile .odx-card__title, .odx-card--launch-tile-centered .odx-card__title {
   font-weight: var(--odx-typography-font-weight-medium);
   letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
@@ -3091,12 +3086,7 @@ body[odxTheme=dark], body.odx-theme-dark {
   display: flex;
   flex: 1;
   flex-direction: column;
-  justify-content: center;
-}
-@media (min-width: 480px) {
-  .odx-card--launch-tile .odx-card__content, .odx-card--launch-tile-centered .odx-card__content {
-    display: block;
-  }
+  justify-content: var(--odx-card-content-vertical-alignment);
 }
 @media (min-width: 480px) {
   .odx-card__content {
@@ -3116,6 +3106,18 @@ body[odxTheme=dark], body.odx-theme-dark {
     gap: calc(var(--odx-vertical-rythm-base-size) * 0.6667);
   }
 }
+.odx-card .odx-avatar {
+  flex: 0 0 auto;
+  height: var(--odx-card-avatar-size);
+  width: var(--odx-card-avatar-size);
+  margin-top: calc(var(--odx-vertical-rythm-base-size) * 0.1667);
+  margin-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.1667);
+}
+@media (min-width: 480px) {
+  .odx-card .odx-avatar {
+    margin: calc(var(--odx-vertical-rythm-base-size) * 0.1667) auto 0;
+  }
+}
 .odx-card__footer {
   padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.5);
   padding-left: calc(var(--odx-vertical-rythm-base-size) * 0.5);
@@ -3138,7 +3140,7 @@ body[odxTheme=dark], body.odx-theme-dark {
 .odx-card__footer .odx-button {
   margin: 0;
 }
-.odx-card .odx-card-menu {
+.odx-card > .odx-action-group {
   margin: 0;
   position: absolute;
   right: 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.9.9",
+  "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/card.component.scss

@@ -5,6 +5,16 @@
 @use '../abstract/typography';
 @use '../abstract/utils';
 
+body {
+  --odx-card-avatar-size: 64px;
+  --odx-card-content-vertical-alignment: center;
+
+  @include breakpoints.up(phone) {
+    --odx-card-avatar-size: 128px;
+    --odx-card-content-vertical-alignment: top;
+  }
+}
+
 .odx-card {
   $root: &;
   $main-padding: dimensions.get-size(math.div(12, 24));
@@ -73,19 +83,6 @@
       }
     }
 
-    .odx-avatar {
-      @include dimensions.container(math.div(64, 24));
-      @include dimensions.margin-y(math.div(4, 24));
-
-      flex: 0 0 auto;
-
-      @include breakpoints.up(phone) {
-        @include dimensions.container(math.div(128, 24));
-
-        margin: dimensions.get-size(math.div(4, 24)) auto 0;
-      }
-    }
-
     #{$root}__title {
       @include typography.font-weight(medium);
 
@@ -108,11 +105,7 @@
       display: flex;
       flex: 1;
       flex-direction: column;
-      justify-content: center;
-
-      @include breakpoints.up(phone) {
-        display: block;
-      }
+      justify-content: var(--odx-card-content-vertical-alignment);
     }
   }
 
@@ -141,6 +134,18 @@
     }
   }
 
+  .odx-avatar {
+    flex: 0 0 auto;
+    height: var(--odx-card-avatar-size);
+    width: var(--odx-card-avatar-size);
+
+    @include dimensions.margin-y(math.div(4, 24));
+
+    @include breakpoints.up(phone) {
+      margin: dimensions.get-size(math.div(4, 24)) auto 0;
+    }
+  }
+
   &__footer {
     @include dimensions.padding-x(0.5);
 
@@ -166,7 +171,7 @@
     }
   }
 
-  .odx-card-menu {
+  > .odx-action-group {
     margin: 0;
     position: absolute;
     right: $main-padding;

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