@odx/ui 5.5.0 → 6.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odx/ui",
-  "version": "5.5.0",
+  "version": "6.0.1",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "peerDependencies": {
@@ -14,6 +14,9 @@
     "vite": "6.2.4",
     "vite-plugin-static-copy": "2.3.0"
   },
+  "dependencies": {
+    "@odx/design-tokens": "^3.4.0"
+  },
   "files": [
     "*.css",
     "CHANGELOG.md",

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

@@ -86,15 +86,16 @@
   input[class^='ag-'][type='text'] {
     background: var(--gray-100);
     border: var(--ag-borders-critical) var(--gray100);
-    border-radius: var(--odx-v-border-radius-controls);
+    border-radius: var(--odx-border-radius-control);
     font-weight: var(--odx-typography-font-weight-normal);
     letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
     line-height: var(--ag-table-line-height);
     padding-left: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
     padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
+    transition: var(--odx-motion-transition-default);
+    transition-property: background-color;
     vertical-align: middle;
 
-    @include motion.transition(background-color);
     @include utils.with-outline(var(--odx-v-outline-width));
 
     &::placeholder {
@@ -156,13 +157,13 @@
 
   .ag-standard-button {
     background-color: var(--odx-c-primary);
-    border-radius: var(--odx-v-border-radius-controls);
+    border-radius: var(--odx-border-radius-control);
     color: var(--odx-c-primary-text);
     height: calc(var(--odx-vertical-rythm-base-size) * 1.5);
     min-width: calc(var(--odx-vertical-rythm-base-size) * 3);
     outline-offset: calc(-1 * var(--odx-v-outline-width-bold));
     outline-width: var(--odx-v-outline-width-bold);
-    transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+    transition: var(--odx-motion-transition-default);
     transition-property: background-color, color, outline;
   }
 
@@ -252,7 +253,7 @@
     outline-color: var(--odx-control-outline-color);
     outline-offset: calc(-1 * var(--odx-v-outline-width));
     padding: 1px;
-    transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+    transition: var(--odx-motion-transition-default);
     transition-property: background-color, color, outline-color;
     width: calc(var(--odx-vertical-rythm-base-size) * 0.8334);
 
@@ -333,16 +334,17 @@
     $input: '.ag-checkbox-input';
 
     background-color: var(--odx-control-background-color);
-    border-radius: var(--odx-v-border-radius-controls);
+    border-radius: var(--odx-border-radius-control);
     color: var(--odx-control-color-selected);
     flex: 0 0 auto;
     height: dimensions.get-size(math.div(20, 24));
     opacity: 1;
     outline-color: var(--odx-control-outline-color);
     padding: 1px;
+    transition: var(--odx-motion-transition-default);
+    transition-property: background-color, color;
     width: dimensions.get-size(math.div(20, 24));
 
-    @include motion.transition(background-color color);
     @include utils.with-outline(var(--odx-v-outline-width));
 
     &:hover {

package/scss/_application.scss

@@ -1,5 +1,4 @@
 @use '../abstract/breakpoints';
-@use '../abstract/dimensions';
 @use '../components/icon.component';
 @use './typography';
 
@@ -39,13 +38,14 @@
     flex: 1 1 0;
     overflow-x: hidden;
     overflow-y: auto;
+    padding-block-end: var(--odx-spacing-75);
+    padding-inline: var(--odx-spacing-75);
     scroll-behavior: smooth;
 
-    @include dimensions.padding(0.5, (bottom, left, right));
-
     @include breakpoints.up(phone) {
-      @include dimensions.padding(1, (bottom, left, right));
-      @include dimensions.padding(0.5, top);
+      padding-block-end: var(--odx-spacing-150);
+      padding-block-start: var(--odx-spacing-75);
+      padding-inline: var(--odx-spacing-150);
     }
   }
 }

package/scss/_base.scss

@@ -30,7 +30,7 @@ body,
   ::-webkit-scrollbar-thumb {
     background-clip: content-box;
     background-color: var(--odx-v-scrollbar-thumb-color);
-    border-radius: var(--odx-v-border-radius);
+    border-radius: var(--odx-border-radius-md);
 
     &:hover {
       background-color: var(--odx-v-scrollbar-thumb-color-hover);

package/scss/_breakpoints.scss

@@ -30,19 +30,31 @@ $breakpoints: (
   $keys: get-breakpoint-names();
   $index: list.index($keys, $breakpoint);
 
-  @return if($index < list.length($keys), list.nth($keys, $index + 1), null);
+  @if $index < list.length($keys) {
+    @return list.nth($keys, $index + 1);
+  }
+
+  @return null;
 }
 
 @function _get-min-value($breakpoint) {
   $value: get-breakpoint-value($breakpoint);
 
-  @return if($value != 0, $value, null);
+  @if $value != 0 {
+    @return $value;
+  }
+
+  @return null;
 }
 
 @function _get-max-value($breakpoint) {
   $value: get-breakpoint-value($breakpoint);
 
-  @return if($value > 0, $value - 1, null);
+  @if $value > 0 {
+    @return $value - 1;
+  }
+
+  @return null;
 }
 
 @mixin up($breakpoint) {

package/scss/_color-palettes.scss

@@ -1,34 +1,34 @@
 :root {
-  --odx-charts-series-blue-500: var(--blue-500);
-  --odx-charts-series-cyan-500: var(--cyan-500);
-  --odx-charts-series-aqua-500: #15dcc4;
-  --odx-charts-series-ocean-500: #1cb4d8;
-  --odx-charts-series-indigo-500: #6a53e6;
-  --odx-charts-series-purple-500: #8f32e2;
-  --odx-charts-series-berry-500: #ee1b80;
-  --odx-charts-series-violet-500: #b318d4;
-  --odx-charts-series-gray-medium-50-500: var(--draeger-cool-gray-50);
-  --odx-charts-series-gray-medium-25-500: var(--draeger-cool-gray-25);
+  --odx-charts-series-blue-500: var(--odx-color-chart-brand-blue);
+  --odx-charts-series-cyan-500: var(--odx-color-chart-brand-cyan);
+  --odx-charts-series-aqua-500: var(--odx-color-chart-additional-aqua);
+  --odx-charts-series-ocean-500: var(--odx-color-chart-additional-ocean);
+  --odx-charts-series-indigo-500: var(--odx-color-chart-additional-indigo);
+  --odx-charts-series-purple-500: var(--odx-color-chart-additional-purple);
+  --odx-charts-series-berry-500: var(--odx-color-chart-additional-berry);
+  --odx-charts-series-violet-500: var(--odx-color-chart-additional-violet);
+  --odx-charts-series-gray-medium-50-500: var(--odx-color-chart-brand-gray);
+  --odx-charts-series-gray-medium-25-500: var(--odx-color-chart-brand-gray-subtle);
 
-  --odx-charts-series-blue-700: var(--blue-700);
-  --odx-charts-series-cyan-700: var(--cyan-700);
-  --odx-charts-series-aqua-700: #09a491;
-  --odx-charts-series-ocean-700: #1c8093;
-  --odx-charts-series-indigo-700: #523cd2;
-  --odx-charts-series-purple-700: #751fc7;
-  --odx-charts-series-berry-700: #cd0b68;
-  --odx-charts-series-violet-700: #9a0aaf;
-  --odx-charts-series-gray-75-dark-700: var(--draeger-cool-gray-75);
-  --odx-charts-series-gray-50-dark-700: var(--draeger-cool-gray-50);
+  --odx-charts-series-blue-700: var(--odx-color-chart-brand-blue-strong);
+  --odx-charts-series-cyan-700: var(--odx-color-chart-brand-cyan-strong);
+  --odx-charts-series-aqua-700: var(--odx-color-chart-additional-aqua-strong);
+  --odx-charts-series-ocean-700: var(--odx-color-chart-additional-ocean-strong);
+  --odx-charts-series-indigo-700: var(--odx-color-chart-additional-indigo-strong);
+  --odx-charts-series-purple-700: var(--odx-color-chart-additional-purple-strong);
+  --odx-charts-series-berry-700: var(--odx-color-chart-additional-berry-strong);
+  --odx-charts-series-violet-700: var(--odx-color-chart-additional-violet-strong);
+  --odx-charts-series-gray-75-dark-700: var(--odx-color-chart-brand-gray-strong);
+  --odx-charts-series-gray-50-dark-700: var(--odx-color-chart-brand-gray);
 
-  --odx-charts-series-blue-100: #a8c4f0;
-  --odx-charts-series-cyan-100: #9dd7ff;
-  --odx-charts-series-aqua-100: #9af4ea;
-  --odx-charts-series-ocean-100: #a0dcff;
-  --odx-charts-series-indigo-100: #a99ded;
-  --odx-charts-series-purple-100: #c693f4;
-  --odx-charts-series-violet-100: #e08ff2;
-  --odx-charts-series-berry-100: #f0a7cb;
+  --odx-charts-series-blue-100: var(--odx-color-chart-brand-blue-subtle);
+  --odx-charts-series-cyan-100: var(--odx-color-chart-brand-cyan-subtle);
+  --odx-charts-series-aqua-100: var(--odx-color-chart-additional-aqua-subtle);
+  --odx-charts-series-ocean-100: var(--odx-color-chart-additional-ocean-subtle);
+  --odx-charts-series-indigo-100: var(--odx-color-chart-additional-indigo-subtle);
+  --odx-charts-series-purple-100: var(--odx-color-chart-additional-purple-subtle);
+  --odx-charts-series-violet-100: var(--odx-color-chart-additional-violet-subtle);
+  --odx-charts-series-berry-100: var(--odx-color-chart-additional-berry-subtle);
 
   --odx-charts-border-color: var(--odx-c-separator);
   --odx-charts-text-color: var(--odx-c-text);
@@ -37,8 +37,8 @@
   --odx-charts-font-family: var(--odx-typography-font-family);
   --odx-charts-font-size: var(--odx-typography-base-size);
 
-  --draeger-cool-gray-15: #cdd2d7;
-  --draeger-cool-gray-25: #b4b9be;
-  --draeger-cool-gray-50: #878c91;
-  --draeger-cool-gray-75: #5a646e;
+  --draeger-cool-gray-15: var(--odx-palette-coolgray-30);
+  --draeger-cool-gray-25: var(--odx-palette-coolgray-40);
+  --draeger-cool-gray-50: var(--odx-palette-coolgray-70);
+  --draeger-cool-gray-75: var(--odx-palette-coolgray-90);
 }

package/scss/_colors-dark.scss

@@ -1,53 +1,47 @@
 @use '../abstract/utils';
 
 @include utils.theme-selector(dark) {
-  --odx-c-display: var(--blue-900);
-  --odx-c-headline: var(--blue-900); // deprecated. Use --odx-c-display instead
+  --odx-c-display: var(--odx-color-foreground-rest);
 
-  --odx-c-text: var(--blue-900);
-  --odx-c-text-inverse: var(--black);
+  --odx-c-text: var(--odx-color-foreground-rest);
+  --odx-c-text-inverse: var(--odx-color-foreground-inverse);
 
-  // TODO: Change to ODX color palette (without light/dark base colors)
-  --odx-c-link: var(--cyan-900);
-  --odx-c-link-hover: var(--cyan-800);
-  --odx-c-link-active: var(--cyan-700);
-  --odx-c-link-disabled: var(--gray-400);
-  --odx-c-link-visited: var(--blue-900);
+  --odx-c-link: var(--odx-color-foreground-accent-rest);
+  --odx-c-link-hover: var(--odx-color-foreground-accent-hover);
+  --odx-c-link-active: var(--odx-color-foreground-accent-pressed);
+  --odx-c-link-disabled: var(--odx-color-foreground-disabled-rest);
+  --odx-c-link-visited: var(--odx-color-foreground-accent-pressed);
 
-  --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(--odx-color-background-danger-subtle);
+  --odx-c-error-outline: var(--odx-color-stroke-danger-rest);
+  --odx-c-error-outline-hover: var(--odx-color-stroke-danger-hover);
+  --odx-c-error-text: var(--odx-color-foreground-danger-rest);
 
-  --odx-c-focus: var(--focus-bg);
-  --odx-c-focus-outline: var(--cyan-300);
-  --odx-c-focus-outline-dark: var(--blue-900);
+  --odx-c-focus: var(--odx-color-background-transparent-selected);
+  --odx-c-focus-outline: var(--odx-color-stroke-focus-outer);
+  --odx-c-focus-outline-dark: var(--odx-color-stroke-primary-rest);
 
-  --odx-c-ghost-hover: var(--blue-50-5);
-  --odx-c-ghost-text-disabled: var(--gray-400);
+  --odx-c-ghost-hover: var(--odx-color-background-transparent-hover);
+  --odx-c-ghost-text-disabled: var(--odx-color-foreground-disabled-rest);
 
-  --odx-c-highlight-text: var(--black);
+  --odx-c-primary: var(--odx-color-background-primary-rest);
+  --odx-c-primary-hover: var(--odx-color-background-primary-hover);
+  --odx-c-primary-active: var(--odx-color-background-primary-pressed);
 
-  --odx-c-primary: var(--blue-900);
-  --odx-c-primary-hover: var(--blue-600);
-  --odx-c-primary-active: var(--blue-200);
+  --odx-c-primary-text: var(--odx-color-foreground-inverse);
 
-  --odx-c-primary-text: var(--white);
+  --odx-c-primary-text-disabled: var(--odx-color-foreground-disabled-rest);
 
-  --odx-c-primary-text-disabled: var(--gray-100);
+  --odx-c-highlight-hover: var(--odx-color-background-accent-hover);
+  --odx-c-highlight-active: var(--odx-color-background-accent-pressed);
+  --odx-c-highlight-text-disabled: var(--odx-color-foreground-disabled-rest);
 
-  --odx-c-highlight-hover: var(--cyan-400);
-  --odx-c-highlight-active: var(--cyan-300);
-  --odx-c-highlight-text-disabled: var(--gray-100);
+  --odx-c-danger-active: var(--odx-color-background-danger-pressed);
+  --odx-c-danger-text-disabled: var(--odx-color-foreground-disabled-rest);
 
-  --odx-c-danger-active: var(--red-100);
-  --odx-c-danger-text-disabled: var(--gray-100);
+  --odx-c-success-text: var(--odx-color-foreground-rest);
+  --odx-c-success-text-disabled: var(--odx-color-foreground-disabled-rest);
 
-  --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);
+  --odx-c-confirmation-text: var(--odx-color-foreground-rest-static);
+  --odx-c-confirmation-text-disabled: var(--odx-color-foreground-disabled-rest);
 }

package/scss/_colors.scss

@@ -1,100 +1,99 @@
 :root {
-  --odx-c-display: var(--blue-700);
-  --odx-c-headline: var(--blue-700); // deprecated. Use --odx-c-display instead
-
-  --odx-c-text: var(--blue-700);
-  --odx-c-text-inverse: var(--white);
-  --odx-c-text-disabled: var(--gray-500);
-
-  --odx-c-link: var(--cyan-600);
-  --odx-c-link-hover: var(--cyan-700);
-  --odx-c-link-active: var(--cyan-800);
-  --odx-c-link-disabled: var(--gray-500);
-  --odx-c-link-visited: var(--blue-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-600);
-
-  --odx-c-error-warning: var(--orange-100);
-  --odx-c-error-warning-outline: var(--orange-200);
-  --odx-c-error-warning-outline-hover: var(--orange-300);
-  --odx-c-error-warning-text: var(--orange-500);
-
-  --odx-c-focus: var(--cyan-500-15);
-  --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);
-
-  --odx-c-selection: var(--cyan-300);
-
-  --odx-c-backdrop: var(--white-60);
-  --odx-c-backdrop-dark: var(--blue-800-30);
-
-  --odx-c-box-shadow: var(--black-20);
-
-  --odx-c-separator: var(--gray-200);
-
-  --odx-c-background: var(--gray-50);
-  --odx-c-background-content: var(--white);
-
-  --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(--gray-300);
-  --odx-c-highlight-text: var(--odx-c-text-inverse);
-  --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(--gray-300);
-  --odx-c-primary-text: var(--odx-c-text-inverse);
-  --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);
-  --odx-c-secondary-disabled: var(--gray-100);
-  --odx-c-secondary-text: var(--odx-c-text);
-  --odx-c-secondary-text-disabled: var(--gray-300);
-
-  --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(--gray-300);
-  --odx-c-success-text: var(--odx-c-text);
-  --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);
-  --odx-c-warning-disabled: var(--yellow-500);
-  --odx-c-warning-text: var(--odx-c-text);
-  --odx-c-warning-text-disabled: var(--yellow-800);
-
-  --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(--gray-300);
-  --odx-c-danger-text: var(--odx-c-text-inverse);
-  --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(--gray-300);
-  --odx-c-confirmation-text: var(--odx-c-text);
-  --odx-c-confirmation-text-disabled: var(--gray-700);
+  --odx-c-display: var(--odx-color-foreground-rest);
+
+  --odx-c-text: var(--odx-color-foreground-rest);
+  --odx-c-text-inverse: var(--odx-color-foreground-inverse);
+  --odx-c-text-disabled: var(--odx-color-foreground-disabled-rest);
+
+  --odx-c-link: var(--odx-color-foreground-accent-rest);
+  --odx-c-link-hover: var(--odx-color-foreground-accent-hover);
+  --odx-c-link-active: var(--odx-color-foreground-accent-pressed);
+  --odx-c-link-disabled: var(--odx-color-foreground-disabled-rest);
+  --odx-c-link-visited: var(--odx-color-foreground-accent-pressed);
+
+  --odx-c-error: var(--odx-color-background-danger-subtle);
+  --odx-c-error-outline: var(--odx-color-stroke-danger-rest);
+  --odx-c-error-outline-hover: var(--odx-color-stroke-danger-hover);
+  --odx-c-error-text: var(--odx-color-foreground-danger-rest);
+
+  --odx-c-error-warning: var(--odx-color-background-warning-rest);
+  --odx-c-error-warning-outline: var(--odx-color-background-warning-hover);
+  --odx-c-error-warning-outline-hover: var(--odx-color-background-warning-pressed);
+  --odx-c-error-warning-text: var(--odx-color-foreground-rest);
+
+  --odx-c-focus: var(--odx-color-background-transparent-selected);
+  --odx-c-focus-outline: var(--odx-color-stroke-focus-outer);
+  --odx-c-focus-outline-dark: var(--odx-color-stroke-primary-rest);
+  --odx-c-focus-inner: var(--odx-color-stroke-focus-inner);
+
+  --odx-c-selected-hover: var(--odx-color-background-transparent-selected-hover);
+  --odx-c-selected: var(--odx-color-background-transparent-selected);
+
+  --odx-c-selection: var(--odx-color-background-selection);
+
+  --odx-c-backdrop: var(--odx-color-background-transparent-backdrop);
+  --odx-c-backdrop-dark: var(--odx-color-background-transparent-backdrop);
+
+  --odx-c-box-shadow: var(--odx-color-background-transparent-pressed);
+
+  --odx-c-separator: var(--odx-color-stroke-neutral-subtle);
+
+  --odx-c-background: var(--odx-color-background-base);
+  --odx-c-background-content: var(--odx-color-background-level-1);
+
+  --odx-c-highlight: var(--odx-color-background-accent-rest);
+  --odx-c-highlight-hover: var(--odx-color-background-accent-hover);
+  --odx-c-highlight-active: var(--odx-color-background-accent-pressed);
+  --odx-c-highlight-disabled: var(--odx-color-background-disabled-rest);
+  --odx-c-highlight-text: var(--odx-color-foreground-inverse-static);
+  --odx-c-highlight-text-disabled: var(--odx-color-foreground-disabled-rest);
+
+  --odx-c-primary: var(--odx-color-background-primary-rest);
+  --odx-c-primary-hover: var(--odx-color-background-primary-hover);
+  --odx-c-primary-active: var(--odx-color-background-primary-pressed);
+  --odx-c-primary-disabled: var(--odx-color-background-disabled-rest);
+  --odx-c-primary-text: var(--odx-color-foreground-inverse);
+  --odx-c-primary-text-disabled: var(--odx-color-foreground-disabled-rest);
+
+  --odx-c-secondary: var(--odx-color-background-neutral-rest);
+  --odx-c-secondary-hover: var(--odx-color-background-neutral-hover);
+  --odx-c-secondary-active: var(--odx-color-background-neutral-pressed);
+  --odx-c-secondary-disabled: var(--odx-color-background-disabled-rest);
+  --odx-c-secondary-text: var(--odx-color-foreground-rest);
+  --odx-c-secondary-text-disabled: var(--odx-color-foreground-disabled-rest);
+
+  --odx-c-success: var(--odx-color-background-success-rest);
+  --odx-c-success-hover: var(--odx-color-background-success-hover);
+  --odx-c-success-active: var(--odx-color-background-success-pressed);
+  --odx-c-success-disabled: var(--odx-color-background-disabled-rest);
+  --odx-c-success-text: var(--odx-color-foreground-rest);
+  --odx-c-success-text-disabled: var(--odx-color-foreground-disabled-rest);
+
+  --odx-c-warning: var(--odx-color-background-warning-rest);
+  --odx-c-warning-hover: var(--odx-color-background-warning-hover);
+  --odx-c-warning-active: var(--odx-color-background-warning-pressed);
+  --odx-c-warning-disabled: var(--odx-color-background-disabled-warning);
+  --odx-c-warning-text: var(--odx-color-foreground-rest-static);
+  --odx-c-warning-text-disabled: var(--odx-color-foreground-disabled-warning);
+
+  --odx-c-danger: var(--odx-color-background-danger-rest);
+  --odx-c-danger-hover: var(--odx-color-background-danger-hover);
+  --odx-c-danger-active: var(--odx-color-background-danger-pressed);
+  --odx-c-danger-disabled: var(--odx-color-background-disabled-rest);
+  --odx-c-danger-text: var(--odx-color-foreground-inverse-static);
+  --odx-c-danger-text-disabled: var(--odx-color-foreground-disabled-rest);
+
+  --odx-c-confirmation: var(--odx-color-background-confirmation-rest);
+  --odx-c-confirmation-hover: var(--odx-color-background-confirmation-hover);
+  --odx-c-confirmation-active: var(--odx-color-background-confirmation-pressed);
+  --odx-c-confirmation-disabled: var(--odx-color-background-disabled-rest);
+  --odx-c-confirmation-text: var(--odx-color-foreground-rest-static);
+  --odx-c-confirmation-text-disabled: var(--odx-color-foreground-disabled-rest);
 
   --odx-c-ghost: transparent;
-  --odx-c-ghost-hover: var(--blue-700-5);
-  --odx-c-ghost-active: var(--cyan-500-15);
+  --odx-c-ghost-hover: var(--odx-color-background-transparent-hover);
+  --odx-c-ghost-active: var(--odx-color-background-transparent-pressed);
   --odx-c-ghost-disabled: transparent;
-  --odx-c-ghost-text: var(--cyan-500);
-  --odx-c-ghost-text-disabled: var(--gray-500);
+  --odx-c-ghost-text: var(--odx-color-foreground-accent-rest);
+  --odx-c-ghost-text-disabled: var(--odx-color-foreground-disabled-rest);
 }

package/scss/_controls.scss

@@ -1,62 +1,62 @@
 :root {
-  --odx-control-color: var(--odx-c-text);
-  --odx-control-background-color: var(--gray-200);
-  --odx-control-outline-color: var(--gray-300);
+  --odx-control-color: var(--odx-color-foreground-rest);
+  --odx-control-background-color: var(--odx-color-background-control-rest);
+  --odx-control-outline-color: var(--odx-color-stroke-control-rest);
 
-  --odx-control-color-hover: var(--odx-c-text);
-  --odx-control-background-color-hover: var(--gray-300);
-  --odx-control-outline-color-hover: var(--gray-400);
+  --odx-control-color-hover: var(--odx-color-foreground-rest);
+  --odx-control-background-color-hover: var(--odx-color-background-control-hover);
+  --odx-control-outline-color-hover: var(--odx-color-stroke-control-hover);
 
-  --odx-control-color-selected: var(--odx-c-highlight-text);
-  --odx-control-background-color-selected: var(--odx-c-highlight);
-  --odx-control-outline-color-selected: var(--odx-c-highlight);
+  --odx-control-color-selected: var(--odx-color-foreground-inverse);
+  --odx-control-background-color-selected: var(--odx-color-background-control-selected);
+  --odx-control-outline-color-selected: var(--odx-color-stroke-control-selected);
 
-  --odx-control-color-disabled: var(--gray-500);
-  --odx-control-background-color-disabled: var(--gray-100);
-  --odx-control-outline-color-disabled: transparent;
+  --odx-control-color-disabled: var(--odx-color-foreground-disabled-rest);
+  --odx-control-background-color-disabled: var(--odx-color-background-disabled-rest);
+  --odx-control-outline-color-disabled: var(--odx-color-stroke-disabled-rest);
 
-  --odx-control-background-color-disabled-selected: var(--gray-600);
-  --odx-control-color-disabled-selected: var(--gray-200);
+  --odx-control-background-color-disabled-selected: var(--odx-color-background-disabled-selected);
+  --odx-control-color-disabled-selected: var(--odx-color-foreground-disabled-selected);
 
-  --odx-control-color-readonly: var(--odx-control-color);
-  --odx-control-background-color-readonly: transparent;
-  --odx-control-outline-color-readonly: var(--odx-control-color);
+  --odx-control-color-readonly: var(--odx-color-foreground-rest);
+  --odx-control-background-color-readonly: var(--odx-color-background-control-readonly);
+  --odx-control-outline-color-readonly: var(--odx-color-stroke-control-readonly);
 
-  --odx-control-color-error: var(--odx-c-error-text);
-  --odx-control-background-color-error: var(--odx-c-error);
-  --odx-control-outline-color-error: var(--odx-c-error-outline);
-  --odx-control-outline-color-error-hover: var(--odx-c-error-outline-hover);
+  --odx-control-color-error: var(--odx-color-foreground-danger-rest);
+  --odx-control-background-color-error: var(--odx-color-background-danger-rest);
+  --odx-control-outline-color-error: var(--odx-color-stroke-danger-rest);
+  --odx-control-outline-color-error-hover: var(--odx-color-stroke-danger-hover);
 
-  --odx-control-color-warning: var(--odx-c-error-warning-text);
-  --odx-control-background-color-warning: var(--odx-c-error-warning);
-  --odx-control-outline-color-warning: var(--odx-c-error-warning-outline);
-  --odx-control-outline-color-warning-hover: var(--odx-c-error-warning-outline-hover);
+  --odx-control-color-warning: var(--odx-color-foreground-rest);
+  --odx-control-background-color-warning: var(--odx-color-background-warning-rest);
+  --odx-control-outline-color-warning: var(--odx-color-background-warning-hover);
+  --odx-control-outline-color-warning-hover: var(--odx-color-background-warning-pressed);
 
-  --odx-input-control-color: var(--odx-c-text);
-  --odx-input-control-background-color: var(--gray-100);
-  --odx-input-control-outline-color: var(--gray-200);
+  --odx-input-control-color: var(--odx-color-foreground-rest);
+  --odx-input-control-background-color: var(--odx-color-background-control-rest);
+  --odx-input-control-outline-color: var(--odx-color-stroke-control-rest);
 
-  --odx-input-control-color-hover: var(--odx-c-text);
-  --odx-input-control-background-color-hover: var(--gray-200);
-  --odx-input-control-outline-color-hover: var(--gray-300);
+  --odx-input-control-color-hover: var(--odx-color-foreground-rest);
+  --odx-input-control-background-color-hover: var(--odx-color-background-control-hover);
+  --odx-input-control-outline-color-hover: var(--odx-color-stroke-control-hover);
 
-  --odx-input-control-color-disabled: var(--gray-500);
-  --odx-input-control-background-color-disabled: var(--gray-50);
+  --odx-input-control-color-disabled: transparent;
+  --odx-input-control-background-color-disabled: var(--odx-color-background-disabled-rest);
   --odx-input-control-outline-color-disabled: transparent;
 
-  --odx-input-control-background-color-disabled-selected: var(--gray-500);
+  --odx-input-control-background-color-disabled-selected: var(--odx-color-background-disabled-selected);
 
-  --odx-input-control-color-readonly: var(--odx-control-color);
-  --odx-input-control-background-color-readonly: transparent;
-  --odx-input-control-outline-color-readonly: var(--odx-control-outline-color);
+  --odx-input-control-color-readonly: var(--odx-color-foreground-rest);
+  --odx-input-control-background-color-readonly: var(--odx-color-background-control-readonly);
+  --odx-input-control-outline-color-readonly: var(--odx-color-stroke-control-readonly);
 
-  --odx-input-control-color-error: var(--odx-c-error-text);
-  --odx-input-control-background-color-error: var(--odx-c-error);
-  --odx-input-control-outline-color-error: var(--odx-c-error-outline);
-  --odx-input-control-outline-color-error-hover: var(--odx-c-error-outline-hover);
+  --odx-input-control-color-error: var(--odx-color-foreground-danger-rest);
+  --odx-input-control-background-color-error: var(--odx-color-background-control-invalid);
+  --odx-input-control-outline-color-error: var(--odx-color-stroke-danger-rest);
+  --odx-input-control-outline-color-error-hover: var(--odx-color-stroke-danger-hover);
 
-  --odx-input-control-color-warning: var(--odx-c-error-warning-text);
-  --odx-input-control-background-color-warning: var(--odx-c-error-warning);
-  --odx-input-control-outline-color-warning: var(--odx-c-error-warning-outline);
-  --odx-input-control-outline-color-warning-hover: var(--odx-c-error-warning-outline-hover);
+  --odx-input-control-color-warning: var(--odx-color-foreground-rest);
+  --odx-input-control-background-color-warning: var(--odx-color-background-warning-rest);
+  --odx-input-control-outline-color-warning: var(--odx-color-background-warning-hover);
+  --odx-input-control-outline-color-warning-hover: var(--odx-color-background-warning-pressed);
 }