@odx/ui 2.13.1 → 3.0.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @odx/ui
 
+## 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;
@@ -2648,7 +2654,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 +2777,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 +2822,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 +3020,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 +3789,7 @@ body {
   transform: scaleY(-1);
 }
 
-body {
+:root {
   --odx-form-field-hint-color: var(--gray-500);
 }
 
@@ -4121,12 +4129,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);
@@ -4377,13 +4379,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 +4438,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 +4474,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 +4600,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,23 +4668,25 @@ 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);
@@ -5459,7 +5471,7 @@ body[odxTheme=dark], body.odx-theme-dark {
   transform: scaleY(-1);
 }
 
-body {
+:root {
   --odx-select-max-height: 220px;
 }
 
@@ -6424,7 +6436,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.0.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;

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/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/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/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,23 +7,23 @@
 @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);

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/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;
 }