@odx/ui 5.2.3 → 5.2.4

package/package.json

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

package/scss/3rdparty/ag-grid/theme.scss

@@ -94,8 +94,8 @@
     padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
     vertical-align: middle;
 
-    @include motion.transition(background-color outline-color);
-    @include utils.with-outline();
+    @include motion.transition(background-color);
+    @include utils.with-outline(var(--odx-v-outline-width));
 
     &::placeholder {
       color: var(--odx-c-text);
@@ -258,8 +258,8 @@
     padding: 1px;
     width: dimensions.get-size(math.div(20, 24));
 
-    @include motion.transition(background-color color outline-color);
-    @include utils.with-outline();
+    @include motion.transition(background-color color);
+    @include utils.with-outline(var(--odx-v-outline-width));
 
     &:hover {
       background-color: var(--odx-control-background-color-hover);

package/scss/_colors-dark.scss

@@ -20,7 +20,7 @@
   --odx-c-error-text: var(--red-700);
 
   --odx-c-focus: var(--focus-bg);
-  --odx-c-focus-outline: var(--cyan-800);
+  --odx-c-focus-outline: var(--cyan-300);
   --odx-c-focus-outline-dark: var(--blue-900);
 
   --odx-c-ghost-hover: var(--blue-50-5);

package/scss/_colors.scss

@@ -23,8 +23,9 @@
   --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: var(--cyan-600);
   --odx-c-focus-outline-dark: var(--blue-700);
+  --odx-c-focus-inner: var(--white);
 
   --odx-c-selected-hover: var(--cyan-500-20);
   --odx-c-selected: var(--cyan-500-15);

package/scss/_utils.scss

@@ -64,18 +64,19 @@
   width: 1px;
 }
 
-@mixin _focus-styles($with-background) {
-  outline-color: var(--odx-c-focus-outline);
-
-  @if $with-background {
-    &,
-    &:hover {
-      background-color: var(--odx-c-focus);
-    }
+@mixin _focus-styles($with-box-shadow) {
+  @if $with-box-shadow {
+    box-shadow: inset 0 0 0 calc(var(--odx-v-outline-width-bold) + var(--odx-v-outline-box-shadow-width)) var(--odx-c-focus-inner);
   }
+
+  outline-color: var(--odx-c-focus-outline);
+  outline-offset: calc(-1 * var(--odx-v-outline-width-bold));
+  outline-width: var(--odx-v-outline-width-bold);
 }
 
-@mixin focus-state($with-background: true, $focus-within: false, $focus-within-selector: null) {
+@mixin focus-state($with-box-shadow: true, $focus-within: false, $focus-within-selector: null) {
+  @include with-outline();
+
   @if $focus-within {
     @if $focus-within-selector {
       $focus-within-selector: '#{$focus-within-selector}:focus-visible';
@@ -84,30 +85,26 @@
     }
 
     &:focus-within:has(#{$focus-within-selector}) {
-      @include _focus-styles($with-background);
+      @include _focus-styles($with-box-shadow);
       @content;
     }
   } @else {
     &:focus-visible {
-      @include _focus-styles($with-background);
+      @include _focus-styles($with-box-shadow);
       @content;
     }
   }
 }
 
-@mixin with-outline {
-  outline: var(--odx-v-outline-width) solid transparent;
-  outline-offset: calc(-1 * var(--odx-v-outline-width));
-}
+@mixin with-outline($width: var(--odx-v-outline-width-bold)) {
+  outline: $width solid transparent;
+  outline-offset: calc(-1 * #{$width});
 
-@mixin with-outline-bold {
-  outline-offset: calc(-1 * var(--odx-v-outline-width-bold));
-  outline-width: var(--odx-v-outline-width-bold);
+  @content;
 }
 
-@mixin interactive($with-background: true, $focus-within: false) {
-  @include with-outline();
-  @include focus-state($with-background, $focus-within);
+@mixin interactive($with-box-shadow: true, $focus-within: false) {
+  @include focus-state($with-box-shadow, $focus-within);
 
   cursor: pointer;
   user-select: none;

package/scss/_visuals.scss

@@ -19,6 +19,7 @@
   --odx-v-transition-easing-fn: ease;
   --odx-v-outline-width: 1px;
   --odx-v-outline-width-bold: 2px;
+  --odx-v-outline-box-shadow-width: 1px;
 
   --odx-v-scrollbar-track-color: transparent;
   --odx-v-scrollbar-thumb-color: var(--gray-600);

package/scss/abstract/_utils.scss

@@ -64,18 +64,19 @@
   width: 1px;
 }
 
-@mixin _focus-styles($with-background) {
-  outline-color: var(--odx-c-focus-outline);
-
-  @if $with-background {
-    &,
-    &:hover {
-      background-color: var(--odx-c-focus);
-    }
+@mixin _focus-styles($with-box-shadow) {
+  @if $with-box-shadow {
+    box-shadow: inset 0 0 0 calc(var(--odx-v-outline-width-bold) + var(--odx-v-outline-box-shadow-width)) var(--odx-c-focus-inner);
   }
+
+  outline-color: var(--odx-c-focus-outline);
+  outline-offset: calc(-1 * var(--odx-v-outline-width-bold));
+  outline-width: var(--odx-v-outline-width-bold);
 }
 
-@mixin focus-state($with-background: true, $focus-within: false, $focus-within-selector: null) {
+@mixin focus-state($with-box-shadow: true, $focus-within: false, $focus-within-selector: null) {
+  @include with-outline();
+
   @if $focus-within {
     @if $focus-within-selector {
       $focus-within-selector: '#{$focus-within-selector}:focus-visible';
@@ -84,30 +85,26 @@
     }
 
     &:focus-within:has(#{$focus-within-selector}) {
-      @include _focus-styles($with-background);
+      @include _focus-styles($with-box-shadow);
       @content;
     }
   } @else {
     &:focus-visible {
-      @include _focus-styles($with-background);
+      @include _focus-styles($with-box-shadow);
       @content;
     }
   }
 }
 
-@mixin with-outline {
-  outline: var(--odx-v-outline-width) solid transparent;
-  outline-offset: calc(-1 * var(--odx-v-outline-width));
-}
+@mixin with-outline($width: var(--odx-v-outline-width-bold)) {
+  outline: $width solid transparent;
+  outline-offset: calc(-1 * #{$width});
 
-@mixin with-outline-bold {
-  outline-offset: calc(-1 * var(--odx-v-outline-width-bold));
-  outline-width: var(--odx-v-outline-width-bold);
+  @content;
 }
 
-@mixin interactive($with-background: true, $focus-within: false) {
-  @include with-outline();
-  @include focus-state($with-background, $focus-within);
+@mixin interactive($with-box-shadow: true, $focus-within: false) {
+  @include focus-state($with-box-shadow, $focus-within);
 
   cursor: pointer;
   user-select: none;

package/scss/accordion-item.component.scss

@@ -17,8 +17,8 @@
   &__panel {
     @include dimensions.padding-x(math.div(8, 24));
     @include dimensions.line-height(1.5, 1);
-    @include motion.transition(background-color outline-color);
-    @include utils.interactive(true);
+    @include motion.transition(background-color);
+    @include utils.interactive();
 
     border-radius: var(--odx-v-border-radius-controls);
     display: grid;

package/scss/action-group.component.scss

@@ -21,9 +21,5 @@
     &:hover {
       color: var(--odx-c-text);
     }
-
-    &:focus-visible {
-      outline-color: var(--odx-c-focus-outline);
-    }
   }
 }

package/scss/ag-grid/theme.scss

@@ -94,8 +94,8 @@
     padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
     vertical-align: middle;
 
-    @include motion.transition(background-color outline-color);
-    @include utils.with-outline();
+    @include motion.transition(background-color);
+    @include utils.with-outline(var(--odx-v-outline-width));
 
     &::placeholder {
       color: var(--odx-c-text);
@@ -258,8 +258,8 @@
     padding: 1px;
     width: dimensions.get-size(math.div(20, 24));
 
-    @include motion.transition(background-color color outline-color);
-    @include utils.with-outline();
+    @include motion.transition(background-color color);
+    @include utils.with-outline(var(--odx-v-outline-width));
 
     &:hover {
       background-color: var(--odx-control-background-color-hover);

package/scss/anchor-navigation.component.scss

@@ -34,12 +34,10 @@
     .odx-link {
       @include dimensions.padding-x(math.div(12, 24));
       @include dimensions.padding-y(math.div(6, 24));
-      @include utils.interactive($with-background: false);
+      @include utils.interactive();
 
       color: var(--odx-c-text);
       display: flex;
-      outline-offset: calc(var(--odx-v-outline-width-bold) * -1);
-      outline-width: var(--odx-v-outline-width-bold);
 
       &:not(:empty) {
         gap: dimensions.get-size(math.div(4, 24));
@@ -49,10 +47,6 @@
         background-color: var(--odx-c-selected);
       }
 
-      &:focus-visible {
-        background-color: unset;
-      }
-
       &:hover {
         color: var(--odx-c-text);
         text-decoration: none;

package/scss/bar.component.scss

@@ -34,10 +34,8 @@
   width: max-content;
 
   &-button {
-    $button: &;
-
-    @include motion.transition(background-color color outline);
-    @include utils.with-outline-bold();
+    @include motion.transition(background-color color);
+    @include utils.interactive();
 
     align-items: center;
     background-color: var(--odx-bar-background-color);
@@ -45,8 +43,6 @@
     display: inline-flex;
     font-size: dimensions.get-size(math.div(4, 3));
     height: dimensions.get-size(math.div(36, 24));
-    outline-color: transparent;
-    outline-style: solid;
 
     &:hover {
       background-color: var(--odx-bar-background-color-hover);
@@ -57,10 +53,6 @@
       background-color: var(--odx-bar-background-color-active);
     }
 
-    &:focus-visible {
-      outline-color: var(--odx-bar-background-color-active);
-    }
-
     &--default {
       @include dimensions.padding-x(math.div(28, 24));
     }

package/scss/button.component.scss

@@ -16,12 +16,11 @@
   @extend .odx-button--secondary;
   @include dimensions.height(2, 1.5);
   @include dimensions.padding-x(2 * $icon-margin);
-  @include motion.transition(background-color color outline);
+  @include motion.transition(background-color color);
   @include typography.font-size(0);
   @include typography.font-weight(medium);
   @include utils.center-content(true);
-  @include utils.interactive($with-background: false);
-  @include utils.with-outline-bold();
+  @include utils.interactive();
 
   appearance: none;
   border-radius: var(--odx-v-border-radius-controls);
@@ -67,10 +66,6 @@
     }
   }
 
-  &--highlight:focus-visible {
-    outline-color: var(--odx-c-focus-outline-dark);
-  }
-
   @each $variant in $variants {
     &--#{$variant} {
       background-color: var(--odx-c-#{$variant});

package/scss/calendar.component.scss

@@ -17,7 +17,7 @@
   }
 
   &-header {
-    @include motion.transition(background-color outline-color color border-radius);
+    @include motion.transition(background-color color border-radius);
     @include utils.vertical-center-content();
     @include typography.font-weight(normal);
 
@@ -38,14 +38,12 @@
 
   &-cell {
     @include dimensions.container(1.5);
-    @include motion.transition(background-color outline-color color border-radius);
-    @include utils.interactive(false);
-    @include utils.with-outline-bold();
+    @include motion.transition(background-color color border-radius box-shadow);
+    @include utils.interactive();
     @include typography.font-weight(normal);
 
     border-radius: var(--odx-v-border-radius-controls);
     cursor: pointer;
-    outline-color: transparent;
     position: relative;
     text-align: center;
     vertical-align: middle;
@@ -104,8 +102,6 @@
     }
 
     #{$root}-cell {
-      border-radius: 0;
-
       &--is-current::after {
         @include dimensions.container(1);
         @include dimensions.margin(0.25);

package/scss/card.component.scss

@@ -24,12 +24,12 @@
 
   $main-padding: var(--odx-card-main-padding);
 
-  @include motion.transition(box-shadow outline-color color);
-  @include utils.interactive(false);
-  @include utils.with-outline-bold();
+  @include motion.transition(box-shadow color border-color);
+  @include utils.interactive();
 
   background-color: var(--odx-c-background-content);
   behavior: button;
+  border: var(--odx-v-outline-width-bold) solid transparent;
   border-radius: var(--odx-v-border-radius);
   display: block;
   padding: $main-padding;

package/scss/checkbox.component.scss

@@ -22,9 +22,8 @@
 
   &__label {
     @include dimensions.line-height(1);
-    @include motion.transition(background-color color outline-color);
+    @include motion.transition(background-color color);
     @include typography.font-size(0);
-    @include utils.interactive($focus-within: true);
 
     border-radius: var(--odx-v-border-radius-controls);
     color: inherit;
@@ -49,15 +48,19 @@
 
   &__indicator {
     @include dimensions.container(1, math.div(20, 24));
-    @include motion.transition(background-color color outline-color);
+    @include motion.transition(background-color color);
     @include utils.center-content(true);
-    @include utils.with-outline();
+
+    @include utils.with-outline() {
+      outline-offset: var(--odx-v-outline-width-bold);
+    }
 
     background-color: var(--odx-control-background-color);
+    border: var(--odx-v-outline-width) solid var(--odx-control-outline-color);
     border-radius: var(--odx-v-border-radius-controls);
+    box-shadow: 0 0 0 var(--odx-v-outline-width-bold) transparent;
     color: var(--odx-control-color-selected);
     flex: 0 0 auto;
-    outline-color: var(--odx-control-outline-color);
     padding: 1px;
 
     > .odx-icon {
@@ -72,14 +75,14 @@
 
     #{$root}:hover & {
       background-color: var(--odx-control-background-color-hover);
-      outline-color: var(--odx-control-outline-color-hover);
+      border-color: var(--odx-control-outline-color-hover);
     }
 
     #{$root}.is-active &,
     #{$root}__input:indeterminate ~ &,
     #{$root}__input:checked ~ & {
       background-color: var(--odx-control-background-color-selected);
-      outline-color: var(--odx-control-outline-color-selected);
+      border-color: var(--odx-control-outline-color-selected);
 
       > .odx-icon {
         opacity: 1;
@@ -98,19 +101,24 @@
     }
 
     #{$root}.has-error:hover & {
-      outline-color: var(--odx-control-outline-color-error-hover);
+      border-color: var(--odx-control-outline-color-error-hover);
     }
 
     #{$root}.is-disabled & {
       background-color: var(--odx-control-background-color-disabled);
+      border-color: var(--odx-control-outline-color-disabled);
       color: var(--odx-control-color-disabled);
-      outline-color: var(--odx-control-outline-color-disabled);
     }
 
     #{$root}.is-readonly & {
       background-color: var(--odx-control-background-color-readonly);
+      border-color: var(--odx-control-outline-color-readonly);
       color: var(--odx-control-color-readonly);
-      outline-color: var(--odx-control-outline-color-readonly);
+    }
+
+    #{$root}:focus-within:has(:focus-visible) & {
+      outline-color: var(--odx-c-focus-outline);
+      outline-offset: var(--odx-v-outline-box-shadow-width);
     }
   }
 

package/scss/chip.component.scss

@@ -18,17 +18,26 @@ $variants: secondary, highlight, success, danger, warning, confirmation;
   min-width: dimensions.get-size(math.div(32, 24));
   user-select: none;
 
+  &:not(#{$root}--secondary) {
+    --odx-c-focus-inner: transparent;
+  }
+
   &__content {
     @include typography.prevent-text-overflow();
   }
 
   &__action {
     @include utils.center-content();
-    @include motion.transition(background-color color outline);
+    @include motion.transition(background-color color);
 
     border-radius: 50%;
     margin: 0;
 
+    &:focus-visible {
+      box-shadow: 0 0 0 var(--odx-v-outline-box-shadow-width) var(--odx-c-focus-inner);
+      outline-offset: var(--odx-v-outline-box-shadow-width);
+    }
+
     #{$root}--warning & {
       background-color: var(--odx-c-warning);
       color: var(--odx-c-warning-text);

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

@@ -17,8 +17,8 @@
   &__panel {
     @include dimensions.padding-x(math.div(8, 24));
     @include dimensions.line-height(1.5, 1);
-    @include motion.transition(background-color outline-color);
-    @include utils.interactive(true);
+    @include motion.transition(background-color);
+    @include utils.interactive();
 
     border-radius: var(--odx-v-border-radius-controls);
     display: grid;

package/scss/components/action-group.component.scss

@@ -21,9 +21,5 @@
     &:hover {
       color: var(--odx-c-text);
     }
-
-    &:focus-visible {
-      outline-color: var(--odx-c-focus-outline);
-    }
   }
 }

package/scss/components/anchor-navigation.component.scss

@@ -34,12 +34,10 @@
     .odx-link {
       @include dimensions.padding-x(math.div(12, 24));
       @include dimensions.padding-y(math.div(6, 24));
-      @include utils.interactive($with-background: false);
+      @include utils.interactive();
 
       color: var(--odx-c-text);
       display: flex;
-      outline-offset: calc(var(--odx-v-outline-width-bold) * -1);
-      outline-width: var(--odx-v-outline-width-bold);
 
       &:not(:empty) {
         gap: dimensions.get-size(math.div(4, 24));
@@ -49,10 +47,6 @@
         background-color: var(--odx-c-selected);
       }
 
-      &:focus-visible {
-        background-color: unset;
-      }
-
       &:hover {
         color: var(--odx-c-text);
         text-decoration: none;

package/scss/components/bar.component.scss

@@ -34,10 +34,8 @@
   width: max-content;
 
   &-button {
-    $button: &;
-
-    @include motion.transition(background-color color outline);
-    @include utils.with-outline-bold();
+    @include motion.transition(background-color color);
+    @include utils.interactive();
 
     align-items: center;
     background-color: var(--odx-bar-background-color);
@@ -45,8 +43,6 @@
     display: inline-flex;
     font-size: dimensions.get-size(math.div(4, 3));
     height: dimensions.get-size(math.div(36, 24));
-    outline-color: transparent;
-    outline-style: solid;
 
     &:hover {
       background-color: var(--odx-bar-background-color-hover);
@@ -57,10 +53,6 @@
       background-color: var(--odx-bar-background-color-active);
     }
 
-    &:focus-visible {
-      outline-color: var(--odx-bar-background-color-active);
-    }
-
     &--default {
       @include dimensions.padding-x(math.div(28, 24));
     }

package/scss/components/button.component.scss

@@ -16,12 +16,11 @@
   @extend .odx-button--secondary;
   @include dimensions.height(2, 1.5);
   @include dimensions.padding-x(2 * $icon-margin);
-  @include motion.transition(background-color color outline);
+  @include motion.transition(background-color color);
   @include typography.font-size(0);
   @include typography.font-weight(medium);
   @include utils.center-content(true);
-  @include utils.interactive($with-background: false);
-  @include utils.with-outline-bold();
+  @include utils.interactive();
 
   appearance: none;
   border-radius: var(--odx-v-border-radius-controls);
@@ -67,10 +66,6 @@
     }
   }
 
-  &--highlight:focus-visible {
-    outline-color: var(--odx-c-focus-outline-dark);
-  }
-
   @each $variant in $variants {
     &--#{$variant} {
       background-color: var(--odx-c-#{$variant});

package/scss/components/calendar.component.scss

@@ -17,7 +17,7 @@
   }
 
   &-header {
-    @include motion.transition(background-color outline-color color border-radius);
+    @include motion.transition(background-color color border-radius);
     @include utils.vertical-center-content();
     @include typography.font-weight(normal);
 
@@ -38,14 +38,12 @@
 
   &-cell {
     @include dimensions.container(1.5);
-    @include motion.transition(background-color outline-color color border-radius);
-    @include utils.interactive(false);
-    @include utils.with-outline-bold();
+    @include motion.transition(background-color color border-radius box-shadow);
+    @include utils.interactive();
     @include typography.font-weight(normal);
 
     border-radius: var(--odx-v-border-radius-controls);
     cursor: pointer;
-    outline-color: transparent;
     position: relative;
     text-align: center;
     vertical-align: middle;
@@ -104,8 +102,6 @@
     }
 
     #{$root}-cell {
-      border-radius: 0;
-
       &--is-current::after {
         @include dimensions.container(1);
         @include dimensions.margin(0.25);

package/scss/components/card.component.scss

@@ -24,12 +24,12 @@
 
   $main-padding: var(--odx-card-main-padding);
 
-  @include motion.transition(box-shadow outline-color color);
-  @include utils.interactive(false);
-  @include utils.with-outline-bold();
+  @include motion.transition(box-shadow color border-color);
+  @include utils.interactive();
 
   background-color: var(--odx-c-background-content);
   behavior: button;
+  border: var(--odx-v-outline-width-bold) solid transparent;
   border-radius: var(--odx-v-border-radius);
   display: block;
   padding: $main-padding;