@odx/ui 2.13.1 → 3.1.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @odx/ui
 
+## 3.1.0
+
+### Minor Changes
+
+- e9ca1be: Added `muted` state to list item component
+
+### Patch Changes
+
+- c618486: Fixed z-layer stacking issues
+
+  Fixed over position calculation by using CSS variables
+
+  WithTabIndex directive now applies tabindex correctly
+
+  Fixed various linting errors
+
+- a62275c: Reduce buffer size of used `shareReplay` operators in order to reduce runtime memory consumption
+
+## 3.0.0
+
+### Major Changes
+
+- 229c36c: Move variable definitions from body into :root to apply scrollbar styles correctly
+
+### Patch Changes
+
+- 1666126: Move each connected overlay into it's own z-layer
+
 ## 2.13.1
 
 ### Patch Changes

package/charts-theme.css

@@ -1,7 +1,7 @@
 /*!**************************************************************************************************************************************************************************************************!*\
   !*** css ../../node_modules/css-loader/dist/cjs.js!../../node_modules/postcss-loader/dist/cjs.js!../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./src/charts/theme.scss ***!
   \**************************************************************************************************************************************************************************************************/
-body {
+:root {
   --charts-series-aqua-300: #15dcc4;
   --charts-series-ocean-300: #1cb4d8;
   --charts-series-sky-300: #3d88e0;

package/core-theme.css

@@ -2,7 +2,7 @@
   !*** css ../../node_modules/css-loader/dist/cjs.js!../../node_modules/postcss-loader/dist/cjs.js!../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./src/core.scss ***!
   \******************************************************************************************************************************************************************************************/
 @charset "UTF-8";
-body {
+:root {
   --white: #ffffff;
   --black: #00060f;
   --black-20: rgba(0, 0, 0, 0.2);
@@ -88,7 +88,8 @@ body {
   --orange-900: #7a3d00;
 }
 
-body[odxTheme=dark], body.odx-theme-dark {
+:root:has([odxTheme=dark]),
+:root:has(.odx-theme-dark) {
   --white: #293642;
   --white-dark: #060a12;
   --black: #ffffff;
@@ -132,7 +133,7 @@ body[odxTheme=dark], body.odx-theme-dark {
   --green-00: #355e54;
 }
 
-body {
+:root {
   --odx-c-headline: var(--blue-700);
   --odx-c-text: var(--blue-700);
   --odx-c-text-inverse: var(--white);
@@ -206,10 +207,14 @@ body {
   --odx-c-confirmation-text-disabled: var(--orange-800);
 }
 
-body[odxTheme=dark], body.odx-theme-dark {
+:root:has([odxTheme=dark]),
+:root:has(.odx-theme-dark) {
   --odx-c-headline: var(--blue-900);
   --odx-c-text: var(--blue-900);
   --odx-c-text-inverse: var(--black);
+  --odx-c-link: var(--cyan-700);
+  --odx-c-link-hover: var(--cyan-800);
+  --odx-c-link-active: var(--cyan-900);
   --odx-c-link-disabled: var(--gray-400);
   --odx-c-error: var(--red-00);
   --odx-c-error-outline: var(--red-50);
@@ -236,7 +241,7 @@ body[odxTheme=dark], body.odx-theme-dark {
   --odx-c-confirmation-text: var(--cyan-50);
 }
 
-body {
+:root {
   --odx-control-color: var(--odx-c-text);
   --odx-control-background-color: var(--gray-200);
   --odx-control-outline-color: var(--gray-300);
@@ -306,7 +311,7 @@ body {
   --odx-vertical-rythm-base-size: calc(var(--odx-typography-base-line-height) * var(--odx-typography-base-size));
 }
 
-body {
+:root {
   --odx-v-border-radius: calc(var(--odx-typography-base-size) * 0.375);
   --odx-v-border-radius-controls: calc(var(--odx-typography-base-size) * 0.19);
   --odx-v-backdrop-blur: 3px;
@@ -324,6 +329,7 @@ body {
   --odx-v-scrollbar-track-color: transparent;
   --odx-v-scrollbar-thumb-color: var(--gray-600);
   --odx-v-scrollbar-thumb-color-hover: var(--gray-700);
+  --odx-v-scrollbar-width: 12px;
 }
 
 /* http://meyerweb.com/eric/tools/css/reset/
@@ -500,14 +506,10 @@ body,
   background-color: var(--odx-c-background);
 }
 
-* {
-  scrollbar-color: var(--odx-v-scrollbar-thumb-color) var(--odx-v-scrollbar-track-color);
-}
-
 ::-webkit-scrollbar {
   -webkit-appearance: none;
           appearance: none;
-  width: 12px;
+  width: var(--odx-v-scrollbar-width);
 }
 
 ::-webkit-scrollbar-track,
@@ -2047,6 +2049,10 @@ html body .odx-fs-italic {
   opacity: 1;
 }
 
+:root {
+  --odx-cdk-connected-overlay-current-z-layer: 0;
+}
+
 .odx-cdk-connected-overlay {
   transition-delay: 0ms;
   transition-duration: var(--odx-v-transition-duration);
@@ -2054,7 +2060,7 @@ html body .odx-fs-italic {
   transition-timing-function: var(--odx-v-transition-easing-fn);
   display: block;
   position: fixed;
-  z-index: var(--odx-v-layer-4);
+  z-index: calc(var(--odx-v-layer-4) + var(--odx-cdk-connected-overlay-current-z-layer, 0));
 }
 .odx-cdk-connected-overlay.is-hidden {
   opacity: 0;
@@ -2062,11 +2068,15 @@ html body .odx-fs-italic {
 }
 .odx-cdk-connected-overlay__content {
   left: 0 !important;
+  max-height: var(--odx-cdk-connected-overlay-max-height-modified, var(--odx-cdk-connected-overlay-max-height, unset));
+  max-width: var(--odx-cdk-connected-overlay-max-width-modified, var(--odx-cdk-connected-overlay-max-width, unset));
+  min-height: var(--odx-cdk-connected-overlay-min-height-modified, var(--odx-cdk-connected-overlay-min-height, unset));
+  min-width: var(--odx-cdk-connected-overlay-min-width-modified, var(--odx-cdk-connected-overlay-min-width, unset));
   position: relative !important;
   top: 0 !important;
 }
 .odx-cdk-connected-overlay__content > * {
-  max-height: inherit;
+  max-height: var(--odx-cdk-connected-overlay-max-height, inherit);
 }
 
 .odx-cdk-connected-overlay-arrow {
@@ -2324,15 +2334,15 @@ html body .odx-fs-italic {
   border-radius: var(--odx-v-border-radius);
   box-shadow: var(--odx-v-box-shadow-layer-1);
   display: block;
-  min-height: inherit;
+  min-height: var(--odx-cdk-connected-overlay-min-height, inherit);
 }
 .odx-dropdown__inner {
   padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.5);
   padding-left: calc(var(--odx-vertical-rythm-base-size) * 0.5);
   border-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.5) solid transparent;
   border-top: calc(var(--odx-vertical-rythm-base-size) * 0.5) solid transparent;
-  max-height: inherit;
-  min-height: inherit;
+  max-height: var(--odx-cdk-connected-overlay-max-height, inherit);
+  min-height: var(--odx-cdk-connected-overlay-min-height, inherit);
   overflow: auto;
   overscroll-behavior: contain;
 }
@@ -2648,7 +2658,7 @@ html body .odx-fs-italic {
   outline-color: var(--odx-c-focus-outline);
 }
 
-body {
+:root {
   --odx-area-header-title-color: var(--odx-c-headline);
   --odx-area-header-subtitle-color: var(--odx-c-headline);
 }
@@ -2771,7 +2781,7 @@ body {
   min-height: calc(var(--odx-vertical-rythm-base-size) * 1.5);
 }
 
-body {
+:root {
   --odx-badge-contrast-color: var(--odx-c-background-content);
 }
 
@@ -2816,14 +2826,16 @@ body {
   margin: calc(calc(var(--odx-vertical-rythm-base-size) * 0.6667) / -2);
 }
 
-body {
+:root {
   --odx-bar-background-color: var(--cyan-500);
   --odx-bar-background-color-hover: var(--cyan-600);
   --odx-bar-background-color-active: var(--cyan-700);
   --odx-bar-text-color: var(--white);
   --odx-bar-text-color-disabled: var(--cyan-700);
 }
-body[odxTheme=dark], body.odx-theme-dark {
+
+:root:has([odxTheme=dark]),
+:root:has(.odx-theme-dark) {
   --odx-bar-background-color-hover: var(--cyan-400);
   --odx-bar-background-color-active: var(--cyan-300);
   --odx-bar-text-color: var(--black);
@@ -3012,12 +3024,12 @@ body[odxTheme=dark], body.odx-theme-dark {
   border-radius: 0;
 }
 
-body {
+:root {
   --odx-card-avatar-size: 64px;
   --odx-card-content-vertical-alignment: center;
 }
 @media (min-width: 480px) {
-  body {
+  :root {
     --odx-card-avatar-size: 128px;
     --odx-card-content-vertical-alignment: top;
   }
@@ -3781,7 +3793,7 @@ body {
   transform: scaleY(-1);
 }
 
-body {
+:root {
   --odx-form-field-hint-color: var(--gray-500);
 }
 
@@ -4079,12 +4091,12 @@ body {
   margin-right: calc(var(--odx-vertical-rythm-base-size) * 0.5);
   padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.5);
 }
-.odx-header:has(.odx-title, .odx-header__title) > .odx-logo {
+.odx-header:has(> .odx-title, > .odx-header__title) > .odx-logo {
   display: none;
   margin-right: calc(var(--odx-vertical-rythm-base-size) * 0.5);
 }
 @media (min-width: 768px) {
-  .odx-header:has(.odx-title, .odx-header__title) > .odx-logo {
+  .odx-header:has(> .odx-title, > .odx-header__title) > .odx-logo {
     display: block;
   }
 }
@@ -4121,12 +4133,6 @@ body {
   overflow: hidden;
 }
 
-body[odxTheme=dark], body.odx-theme-dark {
-  --odx-c-link: var(--cyan-700);
-  --odx-c-link-hover: var(--cyan-800);
-  --odx-c-link-active: var(--cyan-900);
-}
-
 .odx-link {
   transition-delay: 0ms;
   transition-duration: var(--odx-v-transition-duration);
@@ -4301,8 +4307,11 @@ body[odxTheme=dark], body.odx-theme-dark {
 .odx-list-item > [odxListItemSuffix] {
   margin-left: auto;
 }
-.odx-list-item:not(.is-disabled) {
-  cursor: pointer;
+.odx-list-item.odx-list-item--muted {
+  cursor: default;
+  -webkit-user-select: text;
+     -moz-user-select: text;
+          user-select: text;
 }
 .odx-list-item::before {
   transition-delay: 0ms;
@@ -4317,16 +4326,16 @@ body[odxTheme=dark], body.odx-theme-dark {
   top: 0;
   width: calc(100% - calc(var(--odx-vertical-rythm-base-size) * 0.6667));
 }
-.odx-list-item:focus-visible {
+.odx-list-item:focus-visible:not(.odx-list-item--muted) {
   --separator-color: transparent !important;
 }
 @media (hover: hover){
-.odx-list-item:hover {
+.odx-list-item:hover:not(.odx-list-item--muted) {
   --separator-color: transparent !important;
 }
 }
 @media (hover: hover){
-.odx-list-item:hover {
+.odx-list-item:hover:not(.odx-list-item--muted) {
   background-color: var(--odx-c-ghost-hover);
 }
 }
@@ -4334,7 +4343,7 @@ body[odxTheme=dark], body.odx-theme-dark {
   --separator-color: transparent !important;
 }
 @media (hover: hover){
-.odx-list-item:hover+.odx-list-item {
+.odx-list-item:hover:not(.odx-list-item--muted)+.odx-list-item {
   --separator-color: transparent !important;
 }
 }
@@ -4349,7 +4358,7 @@ body[odxTheme=dark], body.odx-theme-dark {
   color: var(--odx-c-danger-text);
 }
 @media (hover: hover){
-.odx-list-item--danger:hover {
+.odx-list-item--danger:hover:not(.odx-list-item--muted) {
   background-color: var(--odx-c-danger-hover);
 }
 }
@@ -4361,7 +4370,7 @@ body[odxTheme=dark], body.odx-theme-dark {
   background-color: var(--odx-c-selected);
 }
 @media (hover: hover){
-.odx-list-item.is-selected:hover {
+.odx-list-item.is-selected:hover:not(.odx-list-item--muted) {
   background-color: var(--odx-c-selected-hover);
 }
 }
@@ -4369,7 +4378,7 @@ body[odxTheme=dark], body.odx-theme-dark {
   background-color: var(--odx-c-danger-active);
 }
 @media (hover: hover){
-.odx-list-item.is-selected.odx-list-item--danger:hover {
+.odx-list-item.is-selected.odx-list-item--danger:hover:not(.odx-list-item--muted) {
   background-color: var(--red-800);
 }
 }
@@ -4377,13 +4386,16 @@ body[odxTheme=dark], body.odx-theme-dark {
   color: var(--odx-c-danger-text);
 }
 
-body {
+:root {
   --odx-loading-spinner-track-stroke-color: var(--blue-700-15);
 }
-body[odxTheme=dark], body.odx-theme-dark {
+
+:root:has([odxTheme=dark]),
+:root:has(.odx-theme-dark) {
   --odx-loading-spinner-track-stroke-color: var(--gray-200);
 }
-body[odxTheme=dark] .odx-button, body.odx-theme-dark .odx-button {
+:root:has([odxTheme=dark]) .odx-button,
+:root:has(.odx-theme-dark) .odx-button {
   --odx-loading-spinner-track-stroke-color: var(--blue-700-15);
 }
 
@@ -4433,11 +4445,13 @@ body[odxTheme=dark] .odx-button, body.odx-theme-dark .odx-button {
           user-select: none;
 }
 
-body {
+:root {
   --odx-logo-color: var(--odx-c-primary);
   --odx-logo-color-inverse: var(--odx-c-text-inverse);
 }
-body[odxTheme=dark], body.odx-theme-dark {
+
+:root:has([odxTheme=dark]),
+:root:has(.odx-theme-dark) {
   --odx-logo-color: var(--odx-c-text-inverse);
 }
 
@@ -4467,7 +4481,8 @@ body[odxTheme=dark], body.odx-theme-dark {
   height: calc(var(--odx-vertical-rythm-base-size) * 2.5);
 }
 
-body[odxTheme=dark] .odx-mainfilter-group, body.odx-theme-dark .odx-mainfilter-group {
+:root:has([odxTheme=dark]) .odx-mainfilter-group,
+:root:has(.odx-theme-dark) .odx-mainfilter-group {
   --odx-input-control-outline-color: var(--blue-900);
   --odx-input-control-outline-color-hover: var(--blue-900);
   --odx-c-highlight: var(--blue-900);
@@ -4592,14 +4607,16 @@ body[odxTheme=dark] .odx-mainfilter-group, body.odx-theme-dark .odx-mainfilter-g
 }
 }
 
-body {
+:root {
   --odx-main-menu-item-background-color: transparent;
   --odx-main-menu-item-background-color-hover: var(--white-5);
   --odx-main-menu-item-background-color-active: var(--odx-c-focus);
   --odx-main-menu-item-text-color: inherit;
   --odx-main-menu-item-text-color-disabled: var(--odx-c-primary-text-disabled);
 }
-body[odxTheme=dark], body.odx-theme-dark {
+
+:root:has([odxTheme=dark]),
+:root:has(.odx-theme-dark) {
   --odx-main-menu-item-background-color-active: var(--cyan-500-15);
   --odx-main-menu-item-text-color-disabled: var(--blue-500);
 }
@@ -4658,27 +4675,29 @@ body[odxTheme=dark], body.odx-theme-dark {
   background-color: var(--odx-main-menu-item-background-color-active);
 }
 
-body {
+:root {
   --odx-main-menu-max-width: 100dvw;
   --odx-main-menu-background-color: var(--odx-c-primary);
   --odx-main-menu-text-color: var(--odx-c-primary-text);
   --odx-main-menu-highlight-color: var(--odx-c-highlight);
 }
-body[odxTheme=dark], body.odx-theme-dark {
-  --odx-main-menu-background-color: var(--blue-800);
-  --odx-main-menu-text-color: var(--black);
-  --odx-main-menu-highlight-color: var(--cyan-500);
-}
 @media (min-width: 480px) {
-  body {
+  :root {
     --odx-main-menu-max-width: min(100dvw, 384px);
   }
 }
 
+:root:has([odxTheme=dark]),
+:root:has(.odx-theme-dark) {
+  --odx-main-menu-background-color: var(--blue-800);
+  --odx-main-menu-text-color: var(--black);
+  --odx-main-menu-highlight-color: var(--cyan-500);
+}
+
 .odx-main-menu {
   --odx-area-header-title-color: var(--odx-main-menu-highlight-color);
   --odx-area-header-subtitle-color: var(--odx-c-text-inverse);
-  z-index: var(--odx-v-layer-5);
+  z-index: var(--odx-v-layer-6);
 }
 .odx-main-menu__inner {
   background-color: var(--odx-main-menu-background-color);
@@ -4838,7 +4857,7 @@ body[odxTheme=dark], body.odx-theme-dark {
   position: fixed;
   top: 0;
   width: 100dvw;
-  z-index: var(--odx-v-layer-4);
+  z-index: var(--odx-v-layer-5);
 }
 @media (min-width: 480px) {
   .odx-modal {
@@ -5459,7 +5478,7 @@ body[odxTheme=dark], body.odx-theme-dark {
   transform: scaleY(-1);
 }
 
-body {
+:root {
   --odx-select-max-height: 220px;
 }
 
@@ -6424,7 +6443,7 @@ body {
 }
 }
 
-body {
+:root {
   --odx-tooltip-background-color: var(--blue-800);
   --odx-tooltip-color: var(--odx-c-text-inverse);
   --odx-tooltip-size-small: calc(var(--odx-vertical-rythm-base-size) * 5);

package/package.json

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

package/scss/abstract/_utils.scss

@@ -123,9 +123,9 @@
   pointer-events: none;
 }
 
-@mixin dark-theme-selector() {
-  &[odxTheme='dark'],
-  &.odx-theme-dark {
+@mixin theme-selector($theme: dark) {
+  :root:has([odxTheme='#{$theme}']),
+  :root:has(.odx-theme-#{$theme}) {
     @content;
   }
 }

package/scss/cdk/connected-overlay.scss

@@ -4,12 +4,16 @@
 @use '../abstract/typography';
 @use '../abstract/utils';
 
+:root {
+  --odx-cdk-connected-overlay-current-z-layer: 0;
+}
+
 .odx-cdk-connected-overlay {
   @include motion.transition(opacity visibility);
 
   display: block;
   position: fixed;
-  z-index: var(--odx-v-layer-4);
+  z-index: calc(var(--odx-v-layer-4) + var(--odx-cdk-connected-overlay-current-z-layer, 0));
 
   &.is-hidden {
     opacity: 0;
@@ -18,11 +22,15 @@
 
   &__content {
     left: 0 !important;
+    max-height: var(--odx-cdk-connected-overlay-max-height-modified, var(--odx-cdk-connected-overlay-max-height, unset));
+    max-width: var(--odx-cdk-connected-overlay-max-width-modified, var(--odx-cdk-connected-overlay-max-width, unset));
+    min-height: var(--odx-cdk-connected-overlay-min-height-modified, var(--odx-cdk-connected-overlay-min-height, unset));
+    min-width: var(--odx-cdk-connected-overlay-min-width-modified, var(--odx-cdk-connected-overlay-min-width, unset));
     position: relative !important;
     top: 0 !important;
 
     > * {
-      max-height: inherit;
+      max-height: var(--odx-cdk-connected-overlay-max-height, inherit);
     }
   }
 }

package/scss/charts/theme.scss

@@ -1,7 +1,7 @@
 @use '../abstract/dimensions';
 @use '../abstract/typography';
 
-body {
+:root {
   --charts-series-aqua-300: #15dcc4;
   --charts-series-ocean-300: #1cb4d8;
   --charts-series-sky-300: #3d88e0;

package/scss/components/area-header.component.scss

@@ -6,7 +6,7 @@
 @use 'avatar.component';
 @use '../layout/typography' as *;
 
-body {
+:root {
   --odx-area-header-title-color: var(--odx-c-headline);
   --odx-area-header-subtitle-color: var(--odx-c-headline);
 }

package/scss/components/badge.component.scss

@@ -3,7 +3,7 @@
 @use '../abstract/utils';
 @use '../abstract/typography';
 
-body {
+:root {
   --odx-badge-contrast-color: var(--odx-c-background-content);
 }
 

package/scss/components/bar.component.scss

@@ -5,19 +5,19 @@
 @use '../abstract/motion';
 @use './dropdown.component' as dropdown;
 
-body {
+:root {
   --odx-bar-background-color: var(--cyan-500);
   --odx-bar-background-color-hover: var(--cyan-600);
   --odx-bar-background-color-active: var(--cyan-700);
   --odx-bar-text-color: var(--white);
   --odx-bar-text-color-disabled: var(--cyan-700);
+}
 
-  @include utils.dark-theme-selector() {
-    --odx-bar-background-color-hover: var(--cyan-400);
-    --odx-bar-background-color-active: var(--cyan-300);
-    --odx-bar-text-color: var(--black);
-    --odx-bar-text-color-disabled: var(--cyan-200);
-  }
+@include utils.theme-selector(dark) {
+  --odx-bar-background-color-hover: var(--cyan-400);
+  --odx-bar-background-color-active: var(--cyan-300);
+  --odx-bar-text-color: var(--black);
+  --odx-bar-text-color-disabled: var(--cyan-200);
 }
 
 .odx-bar {

package/scss/components/card.component.scss

@@ -5,7 +5,7 @@
 @use '../abstract/typography';
 @use '../abstract/utils';
 
-body {
+:root {
   --odx-card-avatar-size: 64px;
   --odx-card-content-vertical-alignment: center;
 

package/scss/components/dropdown.component.scss

@@ -8,15 +8,15 @@ $dropdown-open-selector: '.odx-dropdown-host[aria-expanded="true"]';
   border-radius: var(--odx-v-border-radius);
   box-shadow: var(--odx-v-box-shadow-layer-1);
   display: block;
-  min-height: inherit;
+  min-height: var(--odx-cdk-connected-overlay-min-height, inherit);
 
   &__inner {
     @include dimensions.padding-x(0.5);
 
     border-bottom: dimensions.get-size(0.5) solid transparent;
     border-top: dimensions.get-size(0.5) solid transparent;
-    max-height: inherit;
-    min-height: inherit;
+    max-height: var(--odx-cdk-connected-overlay-max-height, inherit);
+    min-height: var(--odx-cdk-connected-overlay-min-height, inherit);
     overflow: auto;
     overscroll-behavior: contain;
   }

package/scss/components/form-field.component.scss

@@ -8,7 +8,7 @@ $form-field-label-height: math.div(20, 24);
 $form-field-hint-height: math.div(16, 24);
 $form-field-inner-padding: math.div(8, 24);
 
-body {
+:root {
   --odx-form-field-hint-color: var(--gray-500);
 }
 

package/scss/components/header.component.scss

@@ -35,7 +35,7 @@
     padding-right: dimensions.get-size(0.5);
   }
 
-  &:has(.odx-title) > .odx-logo {
+  &:has(> .odx-title) > .odx-logo {
     display: none;
     margin-right: dimensions.get-size(0.5);
 

package/scss/components/link.component.scss

@@ -1,14 +1,6 @@
 @use '../abstract/motion';
 @use '../abstract/utils';
 
-body {
-  @include utils.dark-theme-selector() {
-    --odx-c-link: var(--cyan-700);
-    --odx-c-link-hover: var(--cyan-800);
-    --odx-c-link-active: var(--cyan-900);
-  }
-}
-
 .odx-link {
   @include motion.transition(color background-color outline);
   @include utils.interactive();

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

@@ -6,6 +6,7 @@
 
 .odx-list-item {
   $root: &;
+  $muted-selector: #{$root}--muted;
 
   --separator-color: var(--odx-c-separator);
 
@@ -26,8 +27,9 @@
     margin-left: auto;
   }
 
-  &:not(.is-disabled) {
-    cursor: pointer;
+  &#{$muted-selector} {
+    cursor: default;
+    user-select: text;
   }
 
   &::before {
@@ -44,16 +46,18 @@
 
   &:hover,
   &:focus-visible {
-    --separator-color: transparent !important;
+    &:not(#{$muted-selector}) {
+      --separator-color: transparent !important;
+    }
   }
 
-  &:hover {
+  &:hover:not(#{$muted-selector}) {
     background-color: var(--odx-c-ghost-hover);
   }
 
   &--danger + &,
   &.is-selected + &,
-  &:hover + & {
+  &:hover:not(#{$muted-selector}) + & {
     --separator-color: transparent !important;
   }
 
@@ -69,7 +73,7 @@
     background-color: var(--odx-c-danger);
     color: var(--odx-c-danger-text);
 
-    &:hover {
+    &:hover:not(#{$muted-selector}) {
       background-color: var(--odx-c-danger-hover);
     }
 
@@ -83,14 +87,14 @@
 
     background-color: var(--odx-c-selected);
 
-    &:hover {
+    &:hover:not(#{$muted-selector}) {
       background-color: var(--odx-c-selected-hover);
     }
 
     &#{$root}--danger {
       background-color: var(--odx-c-danger-active);
 
-      &:hover {
+      &:hover:not(#{$muted-selector}) {
         background-color: var(--red-800);
       }
 

package/scss/components/loading-spinner.component.scss

@@ -2,14 +2,15 @@
 @use '../abstract/motion';
 @use '../abstract/utils';
 
-body {
+:root {
   --odx-loading-spinner-track-stroke-color: var(--blue-700-15);
+}
 
-  @include utils.dark-theme-selector() {
-    .odx-button {
-      --odx-loading-spinner-track-stroke-color: var(--blue-700-15);
-    }
-    --odx-loading-spinner-track-stroke-color: var(--gray-200);
+@include utils.theme-selector(dark) {
+  --odx-loading-spinner-track-stroke-color: var(--gray-200);
+
+  .odx-button {
+    --odx-loading-spinner-track-stroke-color: var(--blue-700-15);
   }
 }
 

package/scss/components/logo.component.scss

@@ -1,13 +1,13 @@
 @use '../abstract/dimensions';
 @use '../abstract/utils';
 
-body {
+:root {
   --odx-logo-color: var(--odx-c-primary);
   --odx-logo-color-inverse: var(--odx-c-text-inverse);
+}
 
-  @include utils.dark-theme-selector() {
-    --odx-logo-color: var(--odx-c-text-inverse);
-  }
+@include utils.theme-selector(dark) {
+  --odx-logo-color: var(--odx-c-text-inverse);
 }
 
 .odx-logo {

package/scss/components/main-menu-item.component.scss

@@ -4,17 +4,17 @@
 @use '../abstract/utils';
 @use '../abstract/typography';
 
-body {
+:root {
   --odx-main-menu-item-background-color: transparent;
   --odx-main-menu-item-background-color-hover: var(--white-5);
   --odx-main-menu-item-background-color-active: var(--odx-c-focus);
   --odx-main-menu-item-text-color: inherit;
   --odx-main-menu-item-text-color-disabled: var(--odx-c-primary-text-disabled);
+}
 
-  @include utils.dark-theme-selector() {
-    --odx-main-menu-item-background-color-active: var(--cyan-500-15);
-    --odx-main-menu-item-text-color-disabled: var(--blue-500);
-  }
+@include utils.theme-selector(dark) {
+  --odx-main-menu-item-background-color-active: var(--cyan-500-15);
+  --odx-main-menu-item-text-color-disabled: var(--blue-500);
 }
 
 .odx-main-menu-item {

package/scss/components/main-menu.component.scss

@@ -7,28 +7,28 @@
 @use 'main-menu-button.component';
 @use 'main-menu-item.component';
 
-body {
+:root {
   --odx-main-menu-max-width: 100dvw;
   --odx-main-menu-background-color: var(--odx-c-primary);
   --odx-main-menu-text-color: var(--odx-c-primary-text);
   --odx-main-menu-highlight-color: var(--odx-c-highlight);
 
-  @include utils.dark-theme-selector() {
-    --odx-main-menu-background-color: var(--blue-800);
-    --odx-main-menu-text-color: var(--black);
-    --odx-main-menu-highlight-color: var(--cyan-500);
-  }
-
   @include breakpoints.up(phone) {
     --odx-main-menu-max-width: min(100dvw, 384px);
   }
 }
 
+@include utils.theme-selector(dark) {
+  --odx-main-menu-background-color: var(--blue-800);
+  --odx-main-menu-text-color: var(--black);
+  --odx-main-menu-highlight-color: var(--cyan-500);
+}
+
 .odx-main-menu {
   --odx-area-header-title-color: var(--odx-main-menu-highlight-color);
   --odx-area-header-subtitle-color: var(--odx-c-text-inverse);
 
-  z-index: var(--odx-v-layer-5);
+  z-index: var(--odx-v-layer-6);
 
   &__inner {
     background-color: var(--odx-main-menu-background-color);

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

@@ -3,16 +3,14 @@
 @use '../abstract/typography';
 @use '../abstract/utils';
 
-body {
-  @include utils.dark-theme-selector() {
-    .odx-mainfilter-group {
-      --odx-input-control-outline-color: var(--blue-900);
-      --odx-input-control-outline-color-hover: var(--blue-900);
-      --odx-c-highlight: var(--blue-900);
-      --odx-c-highlight-text: var(--white);
-      --odx-c-focus-outline: var(--cyan-800);
-      --odx-c-focus: var(--focus-bg);
-    }
+@include utils.theme-selector(dark) {
+  .odx-mainfilter-group {
+    --odx-input-control-outline-color: var(--blue-900);
+    --odx-input-control-outline-color-hover: var(--blue-900);
+    --odx-c-highlight: var(--blue-900);
+    --odx-c-highlight-text: var(--white);
+    --odx-c-focus-outline: var(--cyan-800);
+    --odx-c-focus: var(--focus-bg);
   }
 }
 

package/scss/components/modal.component.scss

@@ -23,7 +23,7 @@ $modal-padding: math.div(12, 24);
   position: fixed;
   top: 0;
   width: 100dvw;
-  z-index: var(--odx-v-layer-4);
+  z-index: var(--odx-v-layer-5);
 
   @include breakpoints.up(phone) {
     --odx-modal-margin-y: #{dimensions.get-size(3)};

package/scss/components/select.component.scss

@@ -4,7 +4,7 @@
 @use '../abstract/typography';
 @use '../abstract/utils';
 
-body {
+:root {
   --odx-select-max-height: 220px;
 }
 

package/scss/components/tooltip.component.scss

@@ -1,7 +1,7 @@
 @use '../abstract/dimensions';
 @use '../abstract/utils';
 
-body {
+:root {
   --odx-tooltip-background-color: var(--blue-800);
   --odx-tooltip-color: var(--odx-c-text-inverse);
   --odx-tooltip-size-small: #{dimensions.get-size(5)};

package/scss/layout/_base.scss

@@ -6,13 +6,9 @@ body,
   background-color: var(--odx-c-background);
 }
 
-* {
-  scrollbar-color: var(--odx-v-scrollbar-thumb-color) var(--odx-v-scrollbar-track-color);
-}
-
 ::-webkit-scrollbar {
   appearance: none;
-  width: 12px;
+  width: var(--odx-v-scrollbar-width);
 }
 
 ::-webkit-scrollbar-track,

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

@@ -1,55 +1,53 @@
 @use '../abstract/utils';
 
-body {
-  @include utils.dark-theme-selector() {
-    --white: #293642;
-    --white-dark: #060a12;
-    --black: #ffffff;
-    --black-20: #{rgba(#000000, 60%)};
-
-    --focus-bg: #284e68;
-
-    --white-60: #{rgba(var(--white), 0.6)};
-
-    --gray-50: #2e3d49;
-    --gray-100: #344351;
-    --gray-200: #3e5160;
-    --gray-300: #495e6e;
-    --gray-400: #556c7c;
-    --gray-500: #607a8a;
-    --gray-600: #6d8797;
-    --gray-700: #7d94a1;
-    --gray-800: #e9eef4;
-    --gray-900: #9cacb4;
-
-    --blue-50: #455e85;
-    --blue-50-5: #{rgba(#455e85, 0.1)};
-    --blue-100: #043c95;
-    --blue-600: #a8c4f0;
-    --blue-700: #cbe9ff;
-    --blue-700-5: #{rgba(#cbe9ff, 0.1)};
-    --blue-700-10: #{rgba(#cbe9ff, 0.2)};
-    --blue-900: #d5e2f6;
-
-    --cyan-50: #002766;
-    --cyan-100: #003c66;
-    --cyan-200: #00508a;
-    --cyan-300: #0065ad;
-    --cyan-400: #007ad1;
-    --cyan-600: #1fa2ff;
-    --cyan-700: #47b3ff;
-    --cyan-800: #70c4ff;
-    --cyan-900: #9dd7ff;
-
-    --red-00: #4b3138;
-    --red-50: #724956;
-    --red-100: #bc0000;
-    --red-700: #ff9898;
-    --red-800: #ffb4b4;
-    --red-900: #ffe0e3;
-
-    --yellow-50: #5f5439;
-
-    --green-00: #355e54;
-  }
+@include utils.theme-selector(dark) {
+  --white: #293642;
+  --white-dark: #060a12;
+  --black: #ffffff;
+  --black-20: #{rgba(#000000, 60%)};
+
+  --focus-bg: #284e68;
+
+  --white-60: #{rgba(var(--white), 0.6)};
+
+  --gray-50: #2e3d49;
+  --gray-100: #344351;
+  --gray-200: #3e5160;
+  --gray-300: #495e6e;
+  --gray-400: #556c7c;
+  --gray-500: #607a8a;
+  --gray-600: #6d8797;
+  --gray-700: #7d94a1;
+  --gray-800: #e9eef4;
+  --gray-900: #9cacb4;
+
+  --blue-50: #455e85;
+  --blue-50-5: #{rgba(#455e85, 0.1)};
+  --blue-100: #043c95;
+  --blue-600: #a8c4f0;
+  --blue-700: #cbe9ff;
+  --blue-700-5: #{rgba(#cbe9ff, 0.1)};
+  --blue-700-10: #{rgba(#cbe9ff, 0.2)};
+  --blue-900: #d5e2f6;
+
+  --cyan-50: #002766;
+  --cyan-100: #003c66;
+  --cyan-200: #00508a;
+  --cyan-300: #0065ad;
+  --cyan-400: #007ad1;
+  --cyan-600: #1fa2ff;
+  --cyan-700: #47b3ff;
+  --cyan-800: #70c4ff;
+  --cyan-900: #9dd7ff;
+
+  --red-00: #4b3138;
+  --red-50: #724956;
+  --red-100: #bc0000;
+  --red-700: #ff9898;
+  --red-800: #ffb4b4;
+  --red-900: #ffe0e3;
+
+  --yellow-50: #5f5439;
+
+  --green-00: #355e54;
 }

package/scss/variables/_color-palettes.scss

@@ -1,4 +1,4 @@
-body {
+:root {
   --white: #ffffff;
   --black: #00060f;
   --black-20: #{rgba(#000000, 20%)};

package/scss/variables/_colors-dark.scss

@@ -1,45 +1,46 @@
 @use '../abstract/utils';
 
-body {
-  @include utils.dark-theme-selector() {
-    --odx-c-headline: var(--blue-900);
+@include utils.theme-selector(dark) {
+  --odx-c-headline: var(--blue-900);
 
-    --odx-c-text: var(--blue-900);
-    --odx-c-text-inverse: var(--black);
+  --odx-c-text: var(--blue-900);
+  --odx-c-text-inverse: var(--black);
 
-    --odx-c-link-disabled: var(--gray-400);
+  --odx-c-link: var(--cyan-700);
+  --odx-c-link-hover: var(--cyan-800);
+  --odx-c-link-active: var(--cyan-900);
+  --odx-c-link-disabled: var(--gray-400);
 
-    --odx-c-error: var(--red-00);
-    --odx-c-error-outline: var(--red-50);
-    --odx-c-error-outline-hover: var(--red-100);
-    --odx-c-error-text: var(--red-700);
+  --odx-c-error: var(--red-00);
+  --odx-c-error-outline: var(--red-50);
+  --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: var(--focus-bg);
+  --odx-c-focus-outline: var(--cyan-200);
+  --odx-c-focus-outline-dark: var(--odx-c-focus-outline);
 
-    --odx-c-ghost-hover: var(--blue-50-5);
+  --odx-c-ghost-hover: var(--blue-50-5);
 
-    --odx-c-highlight-text: var(--black);
+  --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: 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-secondary-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-hover: var(--cyan-400);
+  --odx-c-highlight-active: var(--cyan-300);
+  --odx-c-highlight-text-disabled: var(--cyan-200);
 
-    --odx-c-danger-active: var(--red-100);
-    --odx-c-danger-text-disabled: var(--red-50);
+  --odx-c-danger-active: var(--red-100);
+  --odx-c-danger-text-disabled: var(--red-50);
 
-    --odx-c-success-text: var(--cyan-50);
+  --odx-c-success-text: var(--cyan-50);
 
-    --odx-c-confirmation-text: var(--cyan-50);
-  }
+  --odx-c-confirmation-text: var(--cyan-50);
 }

package/scss/variables/_colors.scss

@@ -1,4 +1,4 @@
-body {
+:root {
   --odx-c-headline: var(--blue-700);
 
   --odx-c-text: var(--blue-700);

package/scss/variables/_controls.scss

@@ -1,4 +1,4 @@
-body {
+:root {
   --odx-control-color: var(--odx-c-text);
   --odx-control-background-color: var(--gray-200);
   --odx-control-outline-color: var(--gray-300);

package/scss/variables/_visuals.scss

@@ -1,4 +1,4 @@
-body {
+:root {
   --odx-v-border-radius: calc(var(--odx-typography-base-size) * 0.375);
   --odx-v-border-radius-controls: calc(var(--odx-typography-base-size) * 0.19);
 
@@ -21,4 +21,5 @@ body {
   --odx-v-scrollbar-track-color: transparent;
   --odx-v-scrollbar-thumb-color: var(--gray-600);
   --odx-v-scrollbar-thumb-color-hover: var(--gray-700);
+  --odx-v-scrollbar-width: 12px;
 }