@odx/ui 5.5.0 → 6.0.1

package/scss/variables/_color-palettes.scss

@@ -1,96 +1,117 @@
 :root {
-  --white: #ffffff;
-  --black: #00060f;
-  --black-20: #{rgba(#000000, 20%)};
+  --white: var(--odx-palette-white);
+  --black: var(--odx-palette-black);
+  --black-20: var(--odx-color-background-transparent-backdrop);
 
-  --white-5: #{rgba(#ffffff, 5%)};
-  --white-60: #{rgba(#ffffff, 60%)};
+  --white-5: var(--odx-palette-white-05);
+  --white-60: var(--odx-palette-white-60);
 
-  --gray-50: #f5f7fa;
-  --gray-100: #e9eef4;
-  --gray-200: #dde5ee;
-  --gray-300: #c7d3e0;
-  --gray-400: #b2c1d2;
-  --gray-500: #9eb0c2;
-  --gray-600: #8b9fb1;
-  --gray-700: #798ea0;
-  --gray-800: #697c8c;
-  --gray-900: #5d6a74;
+  --gray-50: var(--odx-palette-coolgray-00);
+  --gray-100: var(--odx-palette-coolgray-10);
+  --gray-200: var(--odx-palette-coolgray-20);
+  --gray-300: var(--odx-palette-coolgray-30);
+  --gray-400: var(--odx-palette-coolgray-40);
+  --gray-500: var(--odx-palette-coolgray-50);
+  --gray-600: var(--odx-palette-coolgray-60);
+  --gray-700: var(--odx-palette-coolgray-70);
+  --gray-800: var(--odx-palette-coolgray-80);
+  --gray-900: var(--odx-palette-coolgray-90);
 
-  --blue-50: #d5e2f6;
-  --blue-100: #a8c4f0;
-  --blue-200: #79a5ec;
-  --blue-300: #4786eb;
-  --blue-400: #1f65d7;
-  --blue-500: #0a51c2;
-  --blue-600: #043c95;
-  --blue-700: #002766;
-  --blue-800: #001433;
-  --blue-900: #000205;
+  --blue-50: var(--odx-palette-blue-10);
+  --blue-100: var(--odx-palette-blue-20);
+  --blue-200: var(--odx-palette-blue-30);
+  --blue-300: var(--odx-palette-blue-40);
+  --blue-400: var(--odx-palette-blue-50);
+  --blue-500: var(--odx-palette-blue-60);
+  --blue-600: var(--odx-palette-blue-70);
+  --blue-700: var(--odx-palette-blue-80);
+  --blue-800: var(--odx-palette-blue-90);
+  --blue-900: var(--odx-palette-blue-100);
 
-  --blue-700-5: #{rgba(#002766, 5%)};
-  --blue-700-10: #{rgba(#002766, 10%)};
-  --blue-700-15: #{rgba(#002766, 15%)};
-  --blue-800-30: #{rgba(#001433, 30%)};
+  --blue-700-5: var(--odx-palette-blue-80-5);
+  --blue-700-10: var(--odx-palette-blue-80-15);
+  --blue-700-15: var(--odx-palette-blue-80-15);
+  --blue-800-30: var(--odx-palette-blue-100-30);
 
-  --cyan-50: #cbe9ff;
-  --cyan-100: #9dd7ff;
-  --cyan-200: #70c4ff;
-  --cyan-300: #47b3ff;
-  --cyan-400: #1fa2ff;
-  --cyan-500: #0091f7;
-  --cyan-600: #0077cc;
-  --cyan-700: #0065ad;
-  --cyan-800: #00508a;
-  --cyan-900: #003c66;
+  --cyan-50: var(--odx-palette-cyan-10);
+  --cyan-100: var(--odx-palette-cyan-20);
+  --cyan-200: var(--odx-palette-cyan-30);
+  --cyan-300: var(--odx-palette-cyan-40);
+  --cyan-400: var(--odx-palette-cyan-50);
+  --cyan-500: var(--odx-palette-cyan-60);
+  --cyan-600: var(--odx-palette-cyan-70);
+  --cyan-700: var(--odx-palette-cyan-80);
+  --cyan-800: var(--odx-palette-cyan-90);
+  --cyan-900: var(--odx-palette-cyan-100);
 
-  --cyan-500-5: #{rgba(#0091f7, 5%)};
-  --cyan-500-15: #{rgba(#0091f7, 15%)};
-  --cyan-500-20: #{rgba(#0091f7, 20%)};
+  --cyan-500-5: var(--odx-palette-cyan-60-15);
+  --cyan-500-15: var(--odx-palette-cyan-60-15);
+  --cyan-500-20: var(--odx-palette-cyan-60-20);
 
-  --red-00: #ffe0e3;
-  --red-50: #ffb4b4;
-  --red-100: #ff9898;
-  --red-200: #ff7b7b;
-  --red-300: #ff5c5c;
-  --red-400: #ff2020;
-  --red-500: #f30303;
-  --red-600: #d70202;
-  --red-700: #bc0000;
-  --red-800: #970000;
-  --red-900: #700000;
+  --red-00: var(--odx-palette-red-00);
+  --red-50: var(--odx-palette-red-10);
+  --red-100: var(--odx-palette-red-20);
+  --red-200: var(--odx-palette-red-30);
+  --red-300: var(--odx-palette-red-40);
+  --red-400: var(--odx-palette-red-50);
+  --red-500: var(--odx-palette-red-60);
+  --red-600: var(--odx-palette-red-70);
+  --red-700: var(--odx-palette-red-80);
+  --red-800: var(--odx-palette-red-90);
+  --red-900: var(--odx-palette-red-100);
 
-  --yellow-50: #fffad7;
-  --yellow-100: #fff7b8;
-  --yellow-200: #fff18a;
-  --yellow-300: #ffed72;
-  --yellow-400: #ffea46;
-  --yellow-500: #ffe300;
-  --yellow-600: #e7cc00;
-  --yellow-700: #bea800;
-  --yellow-800: #988600;
-  --yellow-900: #7c6d00;
+  --yellow-50: var(--odx-palette-yellow-00);
+  --yellow-100: var(--odx-palette-yellow-10);
+  --yellow-200: var(--odx-palette-yellow-20);
+  --yellow-300: var(--odx-palette-yellow-30);
+  --yellow-400: var(--odx-palette-yellow-40);
+  --yellow-500: var(--odx-palette-yellow-50);
+  --yellow-600: var(--odx-palette-yellow-60);
+  --yellow-700: var(--odx-palette-yellow-70);
+  --yellow-800: var(--odx-palette-yellow-80);
+  --yellow-900: var(--odx-palette-yellow-90);
 
-  --green-00: #d1ffdf;
-  --green-50: #b7ffc6;
-  --green-100: #93ffaa;
-  --green-200: #6aff8b;
-  --green-300: #36ff62;
-  --green-400: #0bf23e;
-  --green-500: #00dd31;
-  --green-600: #00c92c;
-  --green-700: #00aa25;
-  --green-800: #00851d;
-  --green-900: #006616;
+  --green-00: var(--odx-palette-green-00);
+  --green-50: var(--odx-palette-green-10);
+  --green-100: var(--odx-palette-green-20);
+  --green-200: var(--odx-palette-green-30);
+  --green-300: var(--odx-palette-green-40);
+  --green-400: var(--odx-palette-green-50);
+  --green-500: var(--odx-palette-green-60);
+  --green-600: var(--odx-palette-green-70);
+  --green-700: var(--odx-palette-green-80);
+  --green-800: var(--odx-palette-green-90);
+  --green-900: var(--odx-palette-green-100);
 
-  --orange-50: #fff6ed;
-  --orange-100: #ffebd6;
-  --orange-200: #ffd4a8;
-  --orange-300: #ffd4a8;
-  --orange-400: #ffa64d;
-  --orange-500: #ff8f1f;
-  --orange-600: #f57a00;
-  --orange-700: #cc6600;
-  --orange-800: #a35200;
-  --orange-900: #7a3d00;
+  --orange-50: var(--odx-palette-orange-00);
+  --orange-100: var(--odx-palette-orange-10);
+  --orange-200: var(--odx-palette-orange-20);
+  --orange-300: var(--odx-palette-orange-30);
+  --orange-400: var(--odx-palette-orange-40);
+  --orange-500: var(--odx-palette-orange-50);
+  --orange-600: var(--odx-palette-orange-60);
+  --orange-700: var(--odx-palette-orange-70);
+  --orange-800: var(--odx-palette-orange-80);
+  --orange-900: var(--odx-palette-orange-90);
+}
+
+[odxTheme] {
+  background-color: var(--odx-color-background-base);
+  color: var(--odx-color-foreground-rest);
+}
+
+[odxTheme='light'] {
+  color-scheme: light;
+
+  * {
+    color-scheme: light;
+  }
+}
+
+[odxTheme='dark'] {
+  color-scheme: dark;
+
+  * {
+    color-scheme: dark;
+  }
 }

package/scss/variables/_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/variables/_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/variables/_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);
 }

package/scss/variables/_typography.scss

@@ -1,14 +1,11 @@
 @use '../abstract/breakpoints';
 
 :root {
-  --odx-typography-font-family: 'Draeger Pangea Text', 'Arial', sans-serif;
-  --odx-typography-base-size: 1.6rem; // clamp(1.4rem, 0.667vw + 1rem, 1.6rem);
-  --odx-typography-base-line-height: 1.5;
-  --odx-typography-font-weight-normal: 400;
+  --odx-typography-font-family: var(--odx-typography-font-family-base), 'Arial', sans-serif;
+  --odx-typography-base-size: var(--odx-typography-font-size-base);
+  --odx-typography-base-line-height: var(--odx-typography-line-height-base);
   --odx-typography-font-weight-normal-letter-spacing: 0;
-  --odx-typography-font-weight-medium: 500;
   --odx-typography-font-weight-medium-letter-spacing: -0.19px;
-  --odx-typography-font-weight-semibold: 600;
   --odx-typography-font-weight-semibold-letter-spacing: 0;
   --odx-typography-font-weight-bold: var(--odx-typography-font-weight-semibold);
   --odx-typography-font-weight-bold-letter-spacing: var(--odx-typography-font-weight-semibold-letter-spacing);

package/scss/variables/_vertical-rythm.scss

@@ -1,3 +1,3 @@
 :root {
-  --odx-vertical-rythm-base-size: calc(var(--odx-typography-base-line-height) * var(--odx-typography-base-size));
+  --odx-vertical-rythm-base-size: var(--odx-typography-base-line-height);
 }