@odx/ui 3.10.0 → 4.0.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @odx/ui
 
+## 4.0.1
+
+### Patch Changes
+
+- 0a9f0be: new outline colors for focus state
+
+## 4.0.0
+
+### Major Changes
+
+- 295f120: Warning variant for buttons removed, new colors for buttons disable state
+
 ## 3.10.0
 
 ### Minor Changes

package/core-theme.css

@@ -153,8 +153,7 @@
   --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(--cyan-400);
-  --odx-c-ghost-hover: var(--blue-700-5);
+  --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);
@@ -167,15 +166,15 @@
   --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(--odx-c-highlight);
+  --odx-c-highlight-disabled: var(--gray-300);
   --odx-c-highlight-text: var(--odx-c-text-inverse);
-  --odx-c-highlight-text-disabled: var(--cyan-800);
+  --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(--odx-c-primary);
+  --odx-c-primary-disabled: var(--gray-300);
   --odx-c-primary-text: var(--odx-c-text-inverse);
-  --odx-c-primary-text-disabled: var(--blue-400);
+  --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);
@@ -185,9 +184,9 @@
   --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(--green-500);
+  --odx-c-success-disabled: var(--gray-300);
   --odx-c-success-text: var(--odx-c-text);
-  --odx-c-success-text-disabled: var(--green-800);
+  --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);
@@ -197,15 +196,21 @@
   --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(--red-500);
+  --odx-c-danger-disabled: var(--gray-300);
   --odx-c-danger-text: var(--odx-c-text-inverse);
-  --odx-c-danger-text-disabled: var(--red-800);
+  --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(--orange-500);
+  --odx-c-confirmation-disabled: var(--gray-300);
   --odx-c-confirmation-text: var(--odx-c-text);
-  --odx-c-confirmation-text-disabled: var(--orange-800);
+  --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);
 }
 
 :root:has([odxTheme=dark]),
@@ -222,24 +227,26 @@
   --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-200);
-  --odx-c-focus-outline-dark: var(--odx-c-focus-outline);
+  --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-disabled: var(--odx-c-primary);
   --odx-c-primary-text: var(--white);
-  --odx-c-primary-text-disabled: var(--blue-300);
+  --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(--cyan-200);
+  --odx-c-highlight-text-disabled: var(--gray-100);
   --odx-c-danger-active: var(--red-100);
-  --odx-c-danger-text-disabled: var(--red-50);
+  --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);
 }
 
@@ -2640,43 +2647,21 @@ html body .odx-fs-italic {
   background-color: var(--odx-c-confirmation-disabled);
   color: var(--odx-c-confirmation-text-disabled);
 }
-.odx-button--warning {
-  background-color: var(--odx-c-warning);
-  color: var(--odx-c-warning-text);
-}
-@media (hover: hover){
-.odx-button--warning:hover {
-  background-color: var(--odx-c-warning-hover);
-}
-}
-.odx-button--warning.odx-dropdown-host[aria-expanded=true], .odx-button--warning.is-active, .odx-button--warning:active {
-  background-color: var(--odx-c-warning-active);
-}
-.odx-button--warning:disabled, .odx-button--warning.is-disabled {
-  background-color: var(--odx-c-warning-disabled);
-  color: var(--odx-c-warning-text-disabled);
-}
 .odx-button--ghost, .odx-main-menu__close, .odx-main-menu-button, .odx-action-group > .odx-button:not(.odx-button--primary, .odx-button--success, .odx-button--danger, .odx-button--confirmation, .odx-auth-sign-in) {
-  outline: var(--odx-v-outline-width) solid transparent;
-  outline-offset: calc(-1 * var(--odx-v-outline-width));
-  background-color: transparent;
-  color: var(--odx-c-link);
+  background-color: var(--odx-c-ghost);
+  color: var(--odx-c-ghost-text);
 }
 @media (hover: hover){
 .odx-button--ghost:hover, .odx-main-menu__close:hover, .odx-main-menu-button:hover, .odx-action-group>.odx-button:hover:not(.odx-button--primary,.odx-button--success,.odx-button--danger,.odx-button--confirmation,.odx-auth-sign-in) {
-  background-color: var(--blue-700-5);
-  color: var(--odx-c-link-hover);
+  background-color: var(--odx-c-ghost-hover);
 }
 }
-.odx-button--ghost:active, .odx-main-menu__close:active, .odx-main-menu-button:active, .odx-action-group > .odx-button:active:not(.odx-button--primary, .odx-button--success, .odx-button--danger, .odx-button--confirmation, .odx-auth-sign-in) {
-  color: var(--odx-c-link-active);
-}
-.odx-button--ghost.odx-dropdown-host[aria-expanded=true], .odx-dropdown-host[aria-expanded=true].odx-main-menu__close, .odx-dropdown-host[aria-expanded=true].odx-main-menu-button, .odx-action-group > .odx-dropdown-host[aria-expanded=true].odx-button:not(.odx-button--primary, .odx-button--success, .odx-button--danger, .odx-button--confirmation, .odx-auth-sign-in), .odx-button--ghost.is-active, .is-active.odx-main-menu__close, .is-active.odx-main-menu-button, .odx-action-group > .is-active.odx-button:not(.odx-button--primary, .odx-button--success, .odx-button--danger, .odx-button--confirmation, .odx-auth-sign-in), .odx-button--ghost:focus-visible, .odx-main-menu__close:focus-visible, .odx-main-menu-button:focus-visible, .odx-action-group > .odx-button:focus-visible:not(.odx-button--primary, .odx-button--success, .odx-button--danger, .odx-button--confirmation, .odx-auth-sign-in), .odx-button--ghost:active, .odx-main-menu__close:active, .odx-main-menu-button:active, .odx-action-group > .odx-button:active:not(.odx-button--primary, .odx-button--success, .odx-button--danger, .odx-button--confirmation, .odx-auth-sign-in) {
-  background-color: var(--odx-c-focus);
+.odx-button--ghost.odx-dropdown-host[aria-expanded=true], .odx-dropdown-host[aria-expanded=true].odx-main-menu__close, .odx-dropdown-host[aria-expanded=true].odx-main-menu-button, .odx-action-group > .odx-dropdown-host[aria-expanded=true].odx-button:not(.odx-button--primary, .odx-button--success, .odx-button--danger, .odx-button--confirmation, .odx-auth-sign-in), .odx-button--ghost.is-active, .is-active.odx-main-menu__close, .is-active.odx-main-menu-button, .odx-action-group > .is-active.odx-button:not(.odx-button--primary, .odx-button--success, .odx-button--danger, .odx-button--confirmation, .odx-auth-sign-in), .odx-button--ghost:active, .odx-main-menu__close:active, .odx-main-menu-button:active, .odx-action-group > .odx-button:active:not(.odx-button--primary, .odx-button--success, .odx-button--danger, .odx-button--confirmation, .odx-auth-sign-in) {
+  background-color: var(--odx-c-ghost-active);
 }
 .odx-button--ghost:disabled, .odx-main-menu__close:disabled, .odx-main-menu-button:disabled, .odx-action-group > .odx-button:disabled:not(.odx-button--primary, .odx-button--success, .odx-button--danger, .odx-button--confirmation, .odx-auth-sign-in), .odx-button--ghost.is-disabled, .is-disabled.odx-main-menu__close, .is-disabled.odx-main-menu-button, .odx-action-group > .is-disabled.odx-button:not(.odx-button--primary, .odx-button--success, .odx-button--danger, .odx-button--confirmation, .odx-auth-sign-in) {
-  background-color: transparent;
-  color: var(--odx-c-link-disabled);
+  background-color: var(--odx-c-ghost-disabled);
+  color: var(--odx-c-ghost-text-disabled);
 }
 .odx-button--small {
   margin-top: calc(var(--odx-vertical-rythm-base-size) * 0);
@@ -3733,6 +3718,18 @@ html body .odx-fs-italic {
   border-radius: 50%;
   margin: 0;
 }
+.odx-chip--warning .odx-chip__action {
+  background-color: var(--odx-c-warning);
+  color: var(--odx-c-warning-text);
+}
+@media (hover: hover){
+.odx-chip--warning .odx-chip__action:hover {
+  background-color: var(--odx-c-warning-hover);
+}
+}
+.odx-chip--warning .odx-chip__action.is-active, .odx-chip--warning .odx-chip__action:active {
+  background-color: var(--odx-c-warning-active);
+}
 .odx-chip--small {
   padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
   padding-left: calc(var(--odx-vertical-rythm-base-size) * 0.3334);

package/package.json

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

package/scss/components/button.component.scss

@@ -10,7 +10,7 @@
 @use 'icon.component';
 
 .odx-button {
-  $variants: secondary, primary, highlight, success, danger, confirmation, warning;
+  $variants: secondary, primary, highlight, success, danger, confirmation, ghost;
   $icon-margin: 0.25;
 
   @extend .odx-button--secondary;
@@ -94,35 +94,6 @@
     }
   }
 
-  &--ghost {
-    @include utils.with-outline();
-
-    background-color: transparent;
-    color: var(--odx-c-link);
-
-    &:hover {
-      background-color: var(--blue-700-5);
-      color: var(--odx-c-link-hover);
-    }
-
-    &:active {
-      color: var(--odx-c-link-active);
-    }
-
-    &#{dropdown.$dropdown-open-selector},
-    &.is-active,
-    &:focus-visible,
-    &:active {
-      background-color: var(--odx-c-focus);
-    }
-
-    &:disabled,
-    &.is-disabled {
-      background-color: transparent;
-      color: var(--odx-c-link-disabled);
-    }
-  }
-
   &--small {
     $icon-margin: math.div(1, 8);
 

package/scss/components/chip.component.scss

@@ -27,6 +27,20 @@ $variants: secondary, highlight, success, danger, warning, confirmation;
 
     border-radius: 50%;
     margin: 0;
+
+    #{$root}--warning & {
+      background-color: var(--odx-c-warning);
+      color: var(--odx-c-warning-text);
+
+      &:hover {
+        background-color: var(--odx-c-warning-hover);
+      }
+
+      &.is-active,
+      &:active {
+        background-color: var(--odx-c-warning-active);
+      }
+    }
   }
 
   @each $size, $size-factor, $font-size-factor in $sizes {

package/scss/variables/_colors-dark.scss

@@ -17,32 +17,36 @@
   --odx-c-error-text: var(--red-700);
 
   --odx-c-focus: var(--focus-bg);
-  --odx-c-focus-outline: var(--cyan-200);
-  --odx-c-focus-outline-dark: var(--odx-c-focus-outline);
+  --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-disabled: var(--odx-c-primary);
+
   --odx-c-primary-text: var(--white);
-  --odx-c-primary-text-disabled: var(--blue-300);
+
+  --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(--cyan-200);
+  --odx-c-highlight-text-disabled: var(--gray-100);
 
   --odx-c-danger-active: var(--red-100);
-  --odx-c-danger-text-disabled: var(--red-50);
+  --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/variables/_colors.scss

@@ -22,9 +22,8 @@
 
   --odx-c-focus: var(--cyan-500-15);
   --odx-c-focus-outline: var(--cyan-200);
-  --odx-c-focus-outline-dark: var(--cyan-400);
+  --odx-c-focus-outline-dark: var(--blue-700);
 
-  --odx-c-ghost-hover: var(--blue-700-5);
   --odx-c-selected-hover: var(--cyan-500-20);
   --odx-c-selected: var(--cyan-500-15);
 
@@ -43,16 +42,16 @@
   --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(--odx-c-highlight);
+  --odx-c-highlight-disabled: var(--gray-300);
   --odx-c-highlight-text: var(--odx-c-text-inverse);
-  --odx-c-highlight-text-disabled: var(--cyan-800);
+  --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(--odx-c-primary);
+  --odx-c-primary-disabled: var(--gray-300);
   --odx-c-primary-text: var(--odx-c-text-inverse);
-  --odx-c-primary-text-disabled: var(--blue-400);
+  --odx-c-primary-text-disabled: var(--gray-700);
 
   --odx-c-secondary: var(--gray-300);
   --odx-c-secondary-hover: var(--gray-400);
@@ -64,9 +63,9 @@
   --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(--green-500);
+  --odx-c-success-disabled: var(--gray-300);
   --odx-c-success-text: var(--odx-c-text);
-  --odx-c-success-text-disabled: var(--green-800);
+  --odx-c-success-text-disabled: var(--gray-700);
 
   --odx-c-warning: var(--yellow-500);
   --odx-c-warning-hover: var(--yellow-600);
@@ -78,14 +77,21 @@
   --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(--red-500);
+  --odx-c-danger-disabled: var(--gray-300);
   --odx-c-danger-text: var(--odx-c-text-inverse);
-  --odx-c-danger-text-disabled: var(--red-800);
+  --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(--orange-500);
+  --odx-c-confirmation-disabled: var(--gray-300);
   --odx-c-confirmation-text: var(--odx-c-text);
-  --odx-c-confirmation-text-disabled: var(--orange-800);
+  --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);
 }