@odx/ui 5.2.3 → 5.2.4

package/scss/toggle-button-group.component.scss

@@ -10,9 +10,8 @@
 
   @include dimensions.height(2, 1.5);
   @include dimensions.padding-x(math.div(6, 24));
-  @include motion.transition(background-color outline-color);
+  @include motion.transition(background-color);
   @include utils.center-content(true);
-  @include utils.with-outline();
 
   border-radius: var(--odx-v-border-radius-controls);
   column-gap: dimensions.get-size(math.div(6, 24));
@@ -20,11 +19,12 @@
   z-index: var(--odx-v-layer-1);
 
   &__indicator {
-    @include utils.with-outline();
+    @include utils.with-outline(var(--odx-v-outline-width-bold));
 
     background-color: var(--odx-c-highlight);
     block-size: dimensions.get-size(math.div(28, 24));
     border-radius: var(--odx-toggle-button-border-radius);
+    outline-width: var(--odx-v-outline-width-bold);
 
     #{$root}.is-disabled & {
       background-color: var(--odx-c-secondary-disabled);
@@ -41,7 +41,8 @@
     }
 
     #{$root}:focus-within:has(:focus-visible) & {
-      outline-color: var(--odx-c-highlight-active);
+      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);
     }
   }
 
@@ -56,8 +57,6 @@
   }
 
   &.is-active {
-    @include utils.focus-state($focus-within: true);
-
     &:not(.is-disabled, .is-readonly):hover {
       background-color: var(--blue-700-5);
     }

package/scss/toggle-button.component.scss

@@ -37,7 +37,7 @@
   }
 
   &__indicator {
-    @include motion.transition(background-color outline-color);
+    @include motion.transition(background-color);
     @include dimensions.padding-x(math.div(1, 3));
     @include utils.vertical-center-content();
 
@@ -53,9 +53,7 @@
     }
 
     #{$root}-group:not(.is-active) & {
-      @include utils.interactive($focus-within: true);
-
-      background-color: var(--blue-700-5);
+      @include utils.focus-state($focus-within: true, $focus-within-selector: 'input');
     }
   }
 

package/scss/variables/_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/variables/_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/variables/_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/wizard-step.component.scss

@@ -19,6 +19,8 @@
   overflow: hidden;
 
   .#{$parent-root}:not(.#{$parent-root}--vertical) & {
+    @include dimensions.padding(math.div(2, 24), 'top');
+
     gap: dimensions.get-size(math.div(8, 24));
     min-width: var(--odx-horizontal-wizard-width);
   }
@@ -33,16 +35,14 @@
 
   &__label {
     @include typography.prevent-text-overflow();
-    @include utils.with-outline-bold();
-    @include motion.transition(background-color outline-color);
+    @include utils.with-outline(var(--odx-v-outline-width-bold));
+    @include motion.transition(background-color);
 
     align-self: center;
     border-radius: var(--odx-v-border-radius-controls);
     color: var(--odx-c-text-disabled);
     margin: 0 auto;
-    outline-color: transparent;
-    outline-style: solid;
-    padding: dimensions.get-size(math.div(4, 24));
+    padding: 0 var(--odx-v-outline-width-bold);
     user-select: none;
 
     :is(#{$root}--valid, #{$root}--passed) & {

package/scss/components/launch-tile.component.scss

@@ -1,119 +0,0 @@
-@use 'sass:math';
-@use '../abstract/breakpoints';
-@use '../abstract/dimensions';
-@use '../abstract/motion';
-@use '../abstract/typography';
-@use '../abstract/utils';
-@use './avatar.component' as avatar;
-
-.odx-launch-tile {
-  $root: &;
-  $main-padding: dimensions.get-size(math.div(12, 24));
-
-  @include motion.transition(box-shadow outline-color);
-  @include utils.interactive(false);
-  @include utils.with-outline-bold();
-
-  background-color: var(--odx-c-background-content);
-  behavior: button;
-  border-radius: var(--odx-v-border-radius);
-  display: block;
-  padding: $main-padding;
-  position: relative;
-
-  &:focus-visible,
-  &:hover,
-  &:focus-within:has(:focus-visible) {
-    box-shadow: var(--odx-v-box-shadow-layer-1);
-  }
-
-  &__container {
-    @include dimensions.padding-x(math.div(8, 24));
-    @include dimensions.padding-y(0.5);
-
-    display: flex;
-    gap: dimensions.get-size(math.div(16, 24));
-
-    @include breakpoints.up(phone) {
-      @include dimensions.padding(1, bottom);
-
-      flex-direction: column;
-      gap: dimensions.get-size(math.div(8, 24));
-    }
-  }
-
-  &__content {
-    flex: 1;
-    padding-right: dimensions.get-size(math.div(40, 24));
-
-    @include breakpoints.up(phone) {
-      padding-right: unset;
-      text-align: center;
-    }
-  }
-
-  &__title {
-    @include dimensions.margin-y(math.div(9, 24));
-    @include typography.font-weight(medium);
-
-    font-size: dimensions.get-size(math.div(20, 24));
-    line-height: dimensions.get-size(math.div(30, 24));
-  }
-
-  &__subtitle {
-    color: var(--gray-500);
-  }
-
-  &__title,
-  &__subtitle {
-    @include motion.transition(color);
-
-    display: block;
-
-    #{$root}.is-disabled & {
-      color: var(--odx-c-text-disabled);
-    }
-  }
-
-  &__footer {
-    display: flex;
-    gap: dimensions.get-size(math.div(12, 24));
-    justify-content: flex-end;
-
-    @include breakpoints.up(phone) {
-      justify-content: center;
-      padding-bottom: dimensions.get-size(math.div(12, 24));
-    }
-
-    .odx-button {
-      margin: 0;
-    }
-  }
-
-  .odx-launch-tile-menu {
-    margin: 0;
-    position: absolute;
-    right: $main-padding;
-    top: $main-padding;
-  }
-
-  .odx-avatar {
-    @include avatar.avatar-size(math.div(64, 24), math.div(64, 24), 2, math.div(48, 24));
-    @include dimensions.margin-y(math.div(4, 24));
-
-    flex: 0 0 auto;
-
-    @include breakpoints.up(phone) {
-      @include avatar.avatar-size(math.div(128, 24), math.div(128, 24), 4, math.div(76, 24));
-
-      margin: dimensions.get-size(math.div(4, 24)) auto 0;
-    }
-  }
-
-  &.is-disabled {
-    .odx-avatar {
-      color: var(--odx-c-text-disabled);
-      filter: saturate(0);
-    }
-  }
-}

package/scss/launch-tile.component.scss

@@ -1,119 +0,0 @@
-@use 'sass:math';
-@use '../abstract/breakpoints';
-@use '../abstract/dimensions';
-@use '../abstract/motion';
-@use '../abstract/typography';
-@use '../abstract/utils';
-@use './avatar.component' as avatar;
-
-.odx-launch-tile {
-  $root: &;
-  $main-padding: dimensions.get-size(math.div(12, 24));
-
-  @include motion.transition(box-shadow outline-color);
-  @include utils.interactive(false);
-  @include utils.with-outline-bold();
-
-  background-color: var(--odx-c-background-content);
-  behavior: button;
-  border-radius: var(--odx-v-border-radius);
-  display: block;
-  padding: $main-padding;
-  position: relative;
-
-  &:focus-visible,
-  &:hover,
-  &:focus-within:has(:focus-visible) {
-    box-shadow: var(--odx-v-box-shadow-layer-1);
-  }
-
-  &__container {
-    @include dimensions.padding-x(math.div(8, 24));
-    @include dimensions.padding-y(0.5);
-
-    display: flex;
-    gap: dimensions.get-size(math.div(16, 24));
-
-    @include breakpoints.up(phone) {
-      @include dimensions.padding(1, bottom);
-
-      flex-direction: column;
-      gap: dimensions.get-size(math.div(8, 24));
-    }
-  }
-
-  &__content {
-    flex: 1;
-    padding-right: dimensions.get-size(math.div(40, 24));
-
-    @include breakpoints.up(phone) {
-      padding-right: unset;
-      text-align: center;
-    }
-  }
-
-  &__title {
-    @include dimensions.margin-y(math.div(9, 24));
-    @include typography.font-weight(medium);
-
-    font-size: dimensions.get-size(math.div(20, 24));
-    line-height: dimensions.get-size(math.div(30, 24));
-  }
-
-  &__subtitle {
-    color: var(--gray-500);
-  }
-
-  &__title,
-  &__subtitle {
-    @include motion.transition(color);
-
-    display: block;
-
-    #{$root}.is-disabled & {
-      color: var(--odx-c-text-disabled);
-    }
-  }
-
-  &__footer {
-    display: flex;
-    gap: dimensions.get-size(math.div(12, 24));
-    justify-content: flex-end;
-
-    @include breakpoints.up(phone) {
-      justify-content: center;
-      padding-bottom: dimensions.get-size(math.div(12, 24));
-    }
-
-    .odx-button {
-      margin: 0;
-    }
-  }
-
-  .odx-launch-tile-menu {
-    margin: 0;
-    position: absolute;
-    right: $main-padding;
-    top: $main-padding;
-  }
-
-  .odx-avatar {
-    @include avatar.avatar-size(math.div(64, 24), math.div(64, 24), 2, math.div(48, 24));
-    @include dimensions.margin-y(math.div(4, 24));
-
-    flex: 0 0 auto;
-
-    @include breakpoints.up(phone) {
-      @include avatar.avatar-size(math.div(128, 24), math.div(128, 24), 4, math.div(76, 24));
-
-      margin: dimensions.get-size(math.div(4, 24)) auto 0;
-    }
-  }
-
-  &.is-disabled {
-    .odx-avatar {
-      color: var(--odx-c-text-disabled);
-      filter: saturate(0);
-    }
-  }
-}