From 0fec6454f3c71f12c801dc33afa9e6dcdecc8c91 Mon Sep 17 00:00:00 2001
From: Andre Luiz Rabello <andre.luiz_r@hotmail.com>
Date: Thu, 17 Dec 2020 17:11:01 +0000
Subject: [PATCH] feat(core)!: add ods- prefix to all tokens (#103)

closes #102
---
 docs/_core/borders/intro.story.tsx            |   2 +-
 docs/_core/colors/intro.story.tsx             |   2 +-
 examples/custom-themes/src/tokens.scss        |  16 +-
 examples/html-css-js-parcel/src/app.css       |   4 +-
 examples/html-css-js/index.css                |   4 +-
 examples/html-css/index.css                   |   4 +-
 packages/core/README.md                       |   2 +-
 .../helpers/border-radius/border-radius.scss  |   2 +-
 .../border-radius/border-radius.spec.ts       |   2 +-
 .../helpers/border-radius/border-radius.ts    |   4 +-
 packages/core/src/helpers/color/color.scss    |   4 +-
 packages/core/src/helpers/color/color.spec.ts |   6 +-
 packages/core/src/helpers/color/color.ts      |   8 +-
 packages/core/src/theme/themes/day.scss       | 133 ++++++++--------
 packages/core/src/theme/themes/night.scss     | 133 ++++++++--------
 packages/core/src/theme/tokens.scss           | 146 +++++++++---------
 .../react/src/icon/icon.react.stories.tsx     |   2 +-
 17 files changed, 238 insertions(+), 236 deletions(-)

diff --git a/docs/_core/borders/intro.story.tsx b/docs/_core/borders/intro.story.tsx
index 08646c156..2322cf795 100644
--- a/docs/_core/borders/intro.story.tsx
+++ b/docs/_core/borders/intro.story.tsx
@@ -12,7 +12,7 @@ export const Intro = () => (
       language="css"
       code={`
         .box {
-          border-radius: var(--border-radius-medium);
+          border-radius: var(--ods-border-radius-medium);
         }
       `}
       format
diff --git a/docs/_core/colors/intro.story.tsx b/docs/_core/colors/intro.story.tsx
index c0832bc4d..35be9ac6c 100644
--- a/docs/_core/colors/intro.story.tsx
+++ b/docs/_core/colors/intro.story.tsx
@@ -20,7 +20,7 @@ export const Intro = () => (
       language="css"
       code={`
         .text {
-          color: var(--color-content-main);
+          color: var(--ods-color-content-main);
         }
       `}
       format
diff --git a/examples/custom-themes/src/tokens.scss b/examples/custom-themes/src/tokens.scss
index 7c46dbd5b..22266bd49 100644
--- a/examples/custom-themes/src/tokens.scss
+++ b/examples/custom-themes/src/tokens.scss
@@ -1,10 +1,10 @@
 @mixin tokens() {
-  --color-primary-700: 245, 124, 0;
-  --color-primary-600: 251, 140, 0;
-  --color-primary-500: 255, 152, 0;
-  --color-primary-400: 255, 167, 38;
-  --color-primary-300: 255, 183, 77;
-  --color-primary-200: 255, 204, 128;
-  --color-primary-100: 255, 224, 178;
-  --color-primary-050: 255, 243, 224;
+  --ods-color-primary-700: 245, 124, 0;
+  --ods-color-primary-600: 251, 140, 0;
+  --ods-color-primary-500: 255, 152, 0;
+  --ods-color-primary-400: 255, 167, 38;
+  --ods-color-primary-300: 255, 183, 77;
+  --ods-color-primary-200: 255, 204, 128;
+  --ods-color-primary-100: 255, 224, 178;
+  --ods-color-primary-050: 255, 243, 224;
 }
diff --git a/examples/html-css-js-parcel/src/app.css b/examples/html-css-js-parcel/src/app.css
index 9b6d2db17..613b57ed1 100644
--- a/examples/html-css-js-parcel/src/app.css
+++ b/examples/html-css-js-parcel/src/app.css
@@ -7,11 +7,11 @@
 }
 
 .raised {
-  box-shadow: 0 2px 4px rgba(var(--color-neutral-900), 0.3);
+  box-shadow: 0 2px 4px rgba(var(--ods-color-neutral-900), 0.3);
 }
 
 .round {
-  border-radius: var(--border-radius-full);
+  border-radius: var(--ods-border-radius-full);
 }
 
 .icon {
diff --git a/examples/html-css-js/index.css b/examples/html-css-js/index.css
index e97a7ca55..120fffeac 100644
--- a/examples/html-css-js/index.css
+++ b/examples/html-css-js/index.css
@@ -17,11 +17,11 @@ body {
 }
 
 .raised {
-  box-shadow: 0 2px 4px rgba(var(--color-neutral-900), 0.3);
+  box-shadow: 0 2px 4px rgba(var(--ods-color-neutral-900), 0.3);
 }
 
 .round {
-  border-radius: var(--border-radius-full);
+  border-radius: var(--ods-border-radius-full);
 }
 
 .icon {
diff --git a/examples/html-css/index.css b/examples/html-css/index.css
index e97a7ca55..120fffeac 100644
--- a/examples/html-css/index.css
+++ b/examples/html-css/index.css
@@ -17,11 +17,11 @@ body {
 }
 
 .raised {
-  box-shadow: 0 2px 4px rgba(var(--color-neutral-900), 0.3);
+  box-shadow: 0 2px 4px rgba(var(--ods-color-neutral-900), 0.3);
 }
 
 .round {
-  border-radius: var(--border-radius-full);
+  border-radius: var(--ods-border-radius-full);
 }
 
 .icon {
diff --git a/packages/core/README.md b/packages/core/README.md
index 4220b9098..05bcffd4c 100644
--- a/packages/core/README.md
+++ b/packages/core/README.md
@@ -161,7 +161,7 @@ For example, if you'd like a round button, you can create a CSS modifier class u
 
 ```css
 .ods-button.round {
-  border-radius: var(--border-radius-full);
+  border-radius: var(--ods-border-radius-full);
 }
 ```
 
diff --git a/packages/core/src/helpers/border-radius/border-radius.scss b/packages/core/src/helpers/border-radius/border-radius.scss
index eb1ac7c75..7ca551098 100644
--- a/packages/core/src/helpers/border-radius/border-radius.scss
+++ b/packages/core/src/helpers/border-radius/border-radius.scss
@@ -5,5 +5,5 @@ $allowed-sizes: ('small', 'medium', 'large', 'full');
     @error '$size must be one of (#{$allowed-sizes})';
   }
 
-  @return var(--border-radius-#{$size});
+  @return var(--ods-border-radius-#{$size});
 }
diff --git a/packages/core/src/helpers/border-radius/border-radius.spec.ts b/packages/core/src/helpers/border-radius/border-radius.spec.ts
index 9f8d91af3..26b1a912c 100644
--- a/packages/core/src/helpers/border-radius/border-radius.spec.ts
+++ b/packages/core/src/helpers/border-radius/border-radius.spec.ts
@@ -5,6 +5,6 @@ describe('borderRadius', () => {
   it('should return the correct CSS variable', () => {
     const size = 'medium';
 
-    expect(borderRadius(size)).toBe(`var(--border-radius-${size})`);
+    expect(borderRadius(size)).toBe(`var(--ods-border-radius-${size})`);
   });
 });
diff --git a/packages/core/src/helpers/border-radius/border-radius.ts b/packages/core/src/helpers/border-radius/border-radius.ts
index 8bd3708a6..3ecdfb704 100644
--- a/packages/core/src/helpers/border-radius/border-radius.ts
+++ b/packages/core/src/helpers/border-radius/border-radius.ts
@@ -3,10 +3,10 @@
  *
  * @example
  * borderRadius('medium');
- * // 'var(--border-radius-medium)'
+ * // 'var(--ods-border-radius-medium)'
  */
 export function borderRadius(size: BorderRadius) {
-  return `var(--border-radius-${size})`;
+  return `var(--ods-border-radius-${size})`;
 }
 
 export type BorderRadius = 'small' | 'medium' | 'large' | 'full';
diff --git a/packages/core/src/helpers/color/color.scss b/packages/core/src/helpers/color/color.scss
index 2660f815c..9b1d4c972 100644
--- a/packages/core/src/helpers/color/color.scss
+++ b/packages/core/src/helpers/color/color.scss
@@ -141,10 +141,10 @@ $aliases: (
 
 @function color($name, $alpha: 1) {
   @if index($aliases, $name) {
-    @return rgba(var(--color-#{$name}));
+    @return rgba(var(--ods-color-#{$name}));
   }
   @if index($palette, $name) {
-    @return rgba(var(--color-#{$name}), #{$alpha});
+    @return rgba(var(--ods-color-#{$name}), #{$alpha});
   }
 
   @error 'Color token not supported: #{$name}';
diff --git a/packages/core/src/helpers/color/color.spec.ts b/packages/core/src/helpers/color/color.spec.ts
index c76a7723e..b51a9ee7e 100644
--- a/packages/core/src/helpers/color/color.spec.ts
+++ b/packages/core/src/helpers/color/color.spec.ts
@@ -6,7 +6,7 @@ describe('color', () => {
     it('should return the correct rgba value', () => {
       const name = 'content-main';
 
-      expect(color(name)).toBe(`rgba(var(--color-${name}))`);
+      expect(color(name)).toBe(`rgba(var(--ods-color-${name}))`);
     });
   });
 
@@ -16,14 +16,14 @@ describe('color', () => {
       const opacity = 0.5;
 
       expect(color(name, opacity)).toBe(
-        `rgba(var(--color-${name}), ${opacity})`
+        `rgba(var(--ods-color-${name}), ${opacity})`
       );
     });
 
     it('should work without opacity', () => {
       const name = 'primary-500';
 
-      expect(color(name)).toBe(`rgba(var(--color-${name}))`);
+      expect(color(name)).toBe(`rgba(var(--ods-color-${name}))`);
     });
   });
 });
diff --git a/packages/core/src/helpers/color/color.ts b/packages/core/src/helpers/color/color.ts
index e22de37f9..621aa49c3 100644
--- a/packages/core/src/helpers/color/color.ts
+++ b/packages/core/src/helpers/color/color.ts
@@ -5,7 +5,7 @@
  *
  * @example
  * color('content-main');
- * // 'rgba(var(--color-content-main))'
+ * // 'rgba(var(--ods-color-content-main))'
  */
 export function color(name: Color): string;
 /**
@@ -17,14 +17,14 @@ export function color(name: Color): string;
  *
  * @example
  * color('primary-500', 0.5);
- * // 'rgba(var(--color-primary-500), 0.5)'
+ * // 'rgba(var(--ods-color-primary-500), 0.5)'
  */
 export function color(name: Palette, opacity?: number): string;
 
 export function color(name: Color, opacity?: number): string {
   return opacity
-    ? `rgba(var(--color-${name}), ${opacity})`
-    : `rgba(var(--color-${name}))`;
+    ? `rgba(var(--ods-color-${name}), ${opacity})`
+    : `rgba(var(--ods-color-${name}))`;
 }
 
 export type Color = ContentColor | BackgroundColor | BorderColor | Palette;
diff --git a/packages/core/src/theme/themes/day.scss b/packages/core/src/theme/themes/day.scss
index 2657beba6..7a1cf08e6 100644
--- a/packages/core/src/theme/themes/day.scss
+++ b/packages/core/src/theme/themes/day.scss
@@ -2,74 +2,75 @@
 
 // ...$types: 'class' | 'raw';
 @mixin day($types...) {
+  // prettier-ignore
   @include castor.theme('day', $types...) {
-    --color-content-main: var(--color-neutral-800), 1;
-    --color-content-secondary: var(--color-neutral-700), 1;
-    --color-content-action: var(--color-primary-500), 1;
-    --color-content-placeholder: var(--color-neutral-600), 1;
-    --color-content-disabled: var(--color-neutral-600), 1;
-    --color-content-link: var(--color-primary-500), 1;
-    --color-content-link-hover: var(--color-primary-600), 1;
-    --color-content-link-visited: var(--color-accent-3-600), 1;
-    --color-content-negative: var(--color-error-500), 1;
-    --color-content-warning: var(--color-warning-600), 1;
-    --color-content-positive: var(--color-success-500), 1;
-    --color-content-info: var(--color-info-500), 1;
-    --color-content-logo: var(--color-primary-500), 1;
-    --color-content-inverse-main: var(--color-neutral-200), 1;
-    --color-content-inverse-secondary: var(--color-neutral-400), 1;
-    --color-content-on-action: var(--color-neutral-200), 1;
-    --color-content-on-inverse-action: var(--color-primary-500), 1;
-    --color-content-always-light: var(--color-neutral-200), 1;
-    --color-content-always-dark: var(--color-neutral-800), 1;
+    --ods-color-content-main: var(--ods-color-neutral-800), 1;
+    --ods-color-content-secondary: var(--ods-color-neutral-700), 1;
+    --ods-color-content-action: var(--ods-color-primary-500), 1;
+    --ods-color-content-placeholder: var(--ods-color-neutral-600), 1;
+    --ods-color-content-disabled: var(--ods-color-neutral-600), 1;
+    --ods-color-content-link: var(--ods-color-primary-500), 1;
+    --ods-color-content-link-hover: var(--ods-color-primary-600), 1;
+    --ods-color-content-link-visited: var(--ods-color-accent-3-600), 1;
+    --ods-color-content-negative: var(--ods-color-error-500), 1;
+    --ods-color-content-warning: var(--ods-color-warning-600), 1;
+    --ods-color-content-positive: var(--ods-color-success-500), 1;
+    --ods-color-content-info: var(--ods-color-info-500), 1;
+    --ods-color-content-logo: var(--ods-color-primary-500), 1;
+    --ods-color-content-inverse-main: var(--ods-color-neutral-200), 1;
+    --ods-color-content-inverse-secondary: var(--ods-color-neutral-400), 1;
+    --ods-color-content-on-action: var(--ods-color-neutral-200), 1;
+    --ods-color-content-on-inverse-action: var(--ods-color-primary-500), 1;
+    --ods-color-content-always-light: var(--ods-color-neutral-200), 1;
+    --ods-color-content-always-dark: var(--ods-color-neutral-800), 1;
 
-    --color-background-main: var(--color-neutral-200), 1;
-    --color-background-surface: var(--color-neutral-050), 1;
-    --color-background-surface-alt: var(--color-neutral-300), 1;
-    --color-background-action: var(--color-primary-500), 1;
-    --color-background-action-hover: var(--color-primary-400), 1;
-    --color-background-action-active: var(--color-primary-600), 1;
-    --color-background-action-subtle: var(--color-primary-500), 0.1;
-    --color-background-action-subtle-hover: var(--color-primary-500), 0.05;
-    --color-background-disabled: var(--color-neutral-300), 1;
-    --color-background-negative: var(--color-error-500), 1;
-    --color-background-negative-hover: var(--color-error-400), 1;
-    --color-background-negative-active: var(--color-error-600), 1;
-    --color-background-negative-subtle: var(--color-error-500), 0.1;
-    --color-background-negative-subtle-hover: var(--color-error-500), 0.05;
-    --color-background-warning: var(--color-warning-400), 1;
-    --color-background-warning-subtle: var(--color-warning-400), 0.1;
-    --color-background-positive: var(--color-success-400), 1;
-    --color-background-positive-subtle: var(--color-success-400), 0.1;
-    --color-background-info: var(--color-info-500), 1;
-    --color-background-info-subtle: var(--color-info-500), 0.1;
-    --color-background-input: var(--color-neutral-050), 1;
-    --color-background-input-selected: var(--color-primary-500), 1;
-    --color-background-overlay: var(--color-neutral-black), 0.8;
-    --color-background-overlay-subtle: var(--color-neutral-black), 0.5;
-    --color-background-inverse-main: var(--color-neutral-900), 1;
-    --color-background-inverse-surface: var(--color-neutral-800), 1;
-    --color-background-inverse-action: var(--color-neutral-white), 1;
+    --ods-color-background-main: var(--ods-color-neutral-200), 1;
+    --ods-color-background-surface: var(--ods-color-neutral-050), 1;
+    --ods-color-background-surface-alt: var(--ods-color-neutral-300), 1;
+    --ods-color-background-action: var(--ods-color-primary-500), 1;
+    --ods-color-background-action-hover: var(--ods-color-primary-400), 1;
+    --ods-color-background-action-active: var(--ods-color-primary-600), 1;
+    --ods-color-background-action-subtle: var(--ods-color-primary-500), 0.1;
+    --ods-color-background-action-subtle-hover: var(--ods-color-primary-500), 0.05;
+    --ods-color-background-disabled: var(--ods-color-neutral-300), 1;
+    --ods-color-background-negative: var(--ods-color-error-500), 1;
+    --ods-color-background-negative-hover: var(--ods-color-error-400), 1;
+    --ods-color-background-negative-active: var(--ods-color-error-600), 1;
+    --ods-color-background-negative-subtle: var(--ods-color-error-500), 0.1;
+    --ods-color-background-negative-subtle-hover: var(--ods-color-error-500), 0.05;
+    --ods-color-background-warning: var(--ods-color-warning-400), 1;
+    --ods-color-background-warning-subtle: var(--ods-color-warning-400), 0.1;
+    --ods-color-background-positive: var(--ods-color-success-400), 1;
+    --ods-color-background-positive-subtle: var(--ods-color-success-400), 0.1;
+    --ods-color-background-info: var(--ods-color-info-500), 1;
+    --ods-color-background-info-subtle: var(--ods-color-info-500), 0.1;
+    --ods-color-background-input: var(--ods-color-neutral-050), 1;
+    --ods-color-background-input-selected: var(--ods-color-primary-500), 1;
+    --ods-color-background-overlay: var(--ods-color-neutral-black), 0.8;
+    --ods-color-background-overlay-subtle: var(--ods-color-neutral-black), 0.5;
+    --ods-color-background-inverse-main: var(--ods-color-neutral-900), 1;
+    --ods-color-background-inverse-surface: var(--ods-color-neutral-800), 1;
+    --ods-color-background-inverse-action: var(--ods-color-neutral-white), 1;
 
-    --color-border-separator: var(--color-neutral-300), 1;
-    --color-border-input: var(--color-neutral-600), 1;
-    --color-border-input-hover: var(--color-neutral-700), 1;
-    --color-border-action: var(--color-primary-500), 1;
-    --color-border-action-hover: var(--color-primary-400), 1;
-    --color-border-action-subtle: var(--color-primary-200), 1;
-    --color-border-disabled: var(--color-neutral-300), 1;
-    --color-border-negative: var(--color-error-500), 1;
-    --color-border-negative-subtle: var(--color-error-200), 1;
-    --color-border-warning: var(--color-warning-400), 1;
-    --color-border-warning-subtle: var(--color-warning-muted-300), 1;
-    --color-border-positive: var(--color-success-500), 1;
-    --color-border-positive-subtle: var(--color-success-muted-300), 1;
-    --color-border-info: var(--color-info-500), 1;
-    --color-border-info-subtle: var(--color-info-200), 1;
-    --color-border-input-selected: var(--color-primary-500), 1;
-    --color-border-focus-inner: var(--color-neutral-white), 1;
-    --color-border-action-focus: var(--color-primary-600), 1;
-    --color-border-negative-focus: var(--color-error-600), 1;
-    --color-border-inverse-action: var(--color-neutral-white), 1;
+    --ods-color-border-separator: var(--ods-color-neutral-300), 1;
+    --ods-color-border-input: var(--ods-color-neutral-600), 1;
+    --ods-color-border-input-hover: var(--ods-color-neutral-700), 1;
+    --ods-color-border-action: var(--ods-color-primary-500), 1;
+    --ods-color-border-action-hover: var(--ods-color-primary-400), 1;
+    --ods-color-border-action-subtle: var(--ods-color-primary-200), 1;
+    --ods-color-border-disabled: var(--ods-color-neutral-300), 1;
+    --ods-color-border-negative: var(--ods-color-error-500), 1;
+    --ods-color-border-negative-subtle: var(--ods-color-error-200), 1;
+    --ods-color-border-warning: var(--ods-color-warning-400), 1;
+    --ods-color-border-warning-subtle: var(--ods-color-warning-muted-300), 1;
+    --ods-color-border-positive: var(--ods-color-success-500), 1;
+    --ods-color-border-positive-subtle: var(--ods-color-success-muted-300), 1;
+    --ods-color-border-info: var(--ods-color-info-500), 1;
+    --ods-color-border-info-subtle: var(--ods-color-info-200), 1;
+    --ods-color-border-input-selected: var(--ods-color-primary-500), 1;
+    --ods-color-border-focus-inner: var(--ods-color-neutral-white), 1;
+    --ods-color-border-action-focus: var(--ods-color-primary-600), 1;
+    --ods-color-border-negative-focus: var(--ods-color-error-600), 1;
+    --ods-color-border-inverse-action: var(--ods-color-neutral-white), 1;
   }
 }
diff --git a/packages/core/src/theme/themes/night.scss b/packages/core/src/theme/themes/night.scss
index b97a795e7..4e2c83357 100644
--- a/packages/core/src/theme/themes/night.scss
+++ b/packages/core/src/theme/themes/night.scss
@@ -2,74 +2,75 @@
 
 // ...$types: 'class' | 'raw';
 @mixin night($types...) {
+  // prettier-ignore
   @include castor.theme('night', $types...) {
-    --color-content-main: var(--color-neutral-200), 1;
-    --color-content-secondary: var(--color-neutral-500), 1;
-    --color-content-action: var(--color-neutral-200), 1;
-    --color-content-placeholder: var(--color-neutral-600), 1;
-    --color-content-disabled: var(--color-neutral-600), 1;
-    --color-content-link: var(--color-info-muted-300), 1;
-    --color-content-link-hover: var(--color-primary-100), 1;
-    --color-content-link-visited: var(--color-accent-3-400), 1;
-    --color-content-negative: var(--color-error-200), 1;
-    --color-content-warning: var(--color-warning-vivid-300), 1;
-    --color-content-positive: var(--color-success-vivid-300), 1;
-    --color-content-info: var(--color-info-muted-300), 1;
-    --color-content-logo: var(--color-neutral-white), 1;
-    --color-content-inverse-main: var(--color-neutral-800), 1;
-    --color-content-inverse-secondary: var(--color-neutral-700), 1;
-    --color-content-on-action: var(--color-primary-500), 1;
-    --color-content-on-inverse-action: var(--color-neutral-200), 1;
-    --color-content-always-light: var(--color-neutral-200), 1;
-    --color-content-always-dark: var(--color-neutral-800), 1;
+    --ods-color-content-main: var(--ods-color-neutral-200), 1;
+    --ods-color-content-secondary: var(--ods-color-neutral-500), 1;
+    --ods-color-content-action: var(--ods-color-neutral-200), 1;
+    --ods-color-content-placeholder: var(--ods-color-neutral-600), 1;
+    --ods-color-content-disabled: var(--ods-color-neutral-600), 1;
+    --ods-color-content-link: var(--ods-color-info-muted-300), 1;
+    --ods-color-content-link-hover: var(--ods-color-primary-100), 1;
+    --ods-color-content-link-visited: var(--ods-color-accent-3-400), 1;
+    --ods-color-content-negative: var(--ods-color-error-200), 1;
+    --ods-color-content-warning: var(--ods-color-warning-vivid-300), 1;
+    --ods-color-content-positive: var(--ods-color-success-vivid-300), 1;
+    --ods-color-content-info: var(--ods-color-info-muted-300), 1;
+    --ods-color-content-logo: var(--ods-color-neutral-white), 1;
+    --ods-color-content-inverse-main: var(--ods-color-neutral-800), 1;
+    --ods-color-content-inverse-secondary: var(--ods-color-neutral-700), 1;
+    --ods-color-content-on-action: var(--ods-color-primary-500), 1;
+    --ods-color-content-on-inverse-action: var(--ods-color-neutral-200), 1;
+    --ods-color-content-always-light: var(--ods-color-neutral-200), 1;
+    --ods-color-content-always-dark: var(--ods-color-neutral-800), 1;
 
-    --color-background-main: var(--color-neutral-900), 1;
-    --color-background-surface: var(--color-neutral-800), 1;
-    --color-background-surface-alt: var(--color-neutral-700), 1;
-    --color-background-action: var(--color-neutral-200), 1;
-    --color-background-action-hover: var(--color-primary-100), 1;
-    --color-background-action-active: var(--color-primary-200), 1;
-    --color-background-action-subtle: var(--color-primary-300), 0.2;
-    --color-background-action-subtle-hover: var(--color-primary-300), 0.1;
-    --color-background-disabled: var(--color-neutral-700), 1;
-    --color-background-negative: var(--color-error-500), 1;
-    --color-background-negative-hover: var(--color-error-300), 1;
-    --color-background-negative-active: var(--color-error-600), 1;
-    --color-background-negative-subtle: var(--color-error-muted-500), 0.3;
-    --color-background-negative-subtle-hover: var(--color-error-muted-500), 0.2;
-    --color-background-warning: var(--color-warning-400), 1;
-    --color-background-warning-subtle: var(--color-warning-300), 0.2;
-    --color-background-positive: var(--color-success-400), 1;
-    --color-background-positive-subtle: var(--color-success-200), 0.2;
-    --color-background-info: var(--color-info-400), 1;
-    --color-background-info-subtle: var(--color-info-300), 0.2;
-    --color-background-input: var(--color-neutral-900), 1;
-    --color-background-input-selected: var(--color-neutral-200), 1;
-    --color-background-overlay: var(--color-neutral-black), 0.8;
-    --color-background-overlay-subtle: var(--color-neutral-black), 0.5;
-    --color-background-inverse-main: var(--color-neutral-200), 1;
-    --color-background-inverse-surface: var(--color-neutral-050), 1;
-    --color-background-inverse-action: var(--color-primary-500), 1;
+    --ods-color-background-main: var(--ods-color-neutral-900), 1;
+    --ods-color-background-surface: var(--ods-color-neutral-800), 1;
+    --ods-color-background-surface-alt: var(--ods-color-neutral-700), 1;
+    --ods-color-background-action: var(--ods-color-neutral-200), 1;
+    --ods-color-background-action-hover: var(--ods-color-primary-100), 1;
+    --ods-color-background-action-active: var(--ods-color-primary-200), 1;
+    --ods-color-background-action-subtle: var(--ods-color-primary-300), 0.2;
+    --ods-color-background-action-subtle-hover: var(--ods-color-primary-300), 0.1;
+    --ods-color-background-disabled: var(--ods-color-neutral-700), 1;
+    --ods-color-background-negative: var(--ods-color-error-500), 1;
+    --ods-color-background-negative-hover: var(--ods-color-error-300), 1;
+    --ods-color-background-negative-active: var(--ods-color-error-600), 1;
+    --ods-color-background-negative-subtle: var(--ods-color-error-muted-500), 0.3;
+    --ods-color-background-negative-subtle-hover: var(--ods-color-error-muted-500), 0.2;
+    --ods-color-background-warning: var(--ods-color-warning-400), 1;
+    --ods-color-background-warning-subtle: var(--ods-color-warning-300), 0.2;
+    --ods-color-background-positive: var(--ods-color-success-400), 1;
+    --ods-color-background-positive-subtle: var(--ods-color-success-200), 0.2;
+    --ods-color-background-info: var(--ods-color-info-400), 1;
+    --ods-color-background-info-subtle: var(--ods-color-info-300), 0.2;
+    --ods-color-background-input: var(--ods-color-neutral-900), 1;
+    --ods-color-background-input-selected: var(--ods-color-neutral-200), 1;
+    --ods-color-background-overlay: var(--ods-color-neutral-black), 0.8;
+    --ods-color-background-overlay-subtle: var(--ods-color-neutral-black), 0.5;
+    --ods-color-background-inverse-main: var(--ods-color-neutral-200), 1;
+    --ods-color-background-inverse-surface: var(--ods-color-neutral-050), 1;
+    --ods-color-background-inverse-action: var(--ods-color-primary-500), 1;
 
-    --color-border-separator: var(--color-neutral-900), 1;
-    --color-border-input: var(--color-neutral-700), 1;
-    --color-border-input-hover: var(--color-neutral-600), 1;
-    --color-border-action: var(--color-neutral-700), 1;
-    --color-border-action-hover: var(--color-neutral-600), 1;
-    --color-border-action-subtle: var(--color-primary-muted-600), 1;
-    --color-border-disabled: var(--color-neutral-700), 1;
-    --color-border-negative: var(--color-error-400), 1;
-    --color-border-negative-subtle: var(--color-error-muted-500), 1;
-    --color-border-warning: var(--color-warning-400), 1;
-    --color-border-warning-subtle: var(--color-warning-muted-500), 1;
-    --color-border-positive: var(--color-success-400), 1;
-    --color-border-positive-subtle: var(--color-success-muted-500), 1;
-    --color-border-info: var(--color-info-400), 1;
-    --color-border-info-subtle: var(--color-info-muted-600), 1;
-    --color-border-input-selected: var(--color-neutral-200), 1;
-    --color-border-focus-inner: var(--color-neutral-900), 1;
-    --color-border-action-focus: var(--color-primary-200), 1;
-    --color-border-negative-focus: var(--color-error-400), 1;
-    --color-border-inverse-action: var(--color-primary-500), 1;
+    --ods-color-border-separator: var(--ods-color-neutral-900), 1;
+    --ods-color-border-input: var(--ods-color-neutral-700), 1;
+    --ods-color-border-input-hover: var(--ods-color-neutral-600), 1;
+    --ods-color-border-action: var(--ods-color-neutral-700), 1;
+    --ods-color-border-action-hover: var(--ods-color-neutral-600), 1;
+    --ods-color-border-action-subtle: var(--ods-color-primary-muted-600), 1;
+    --ods-color-border-disabled: var(--ods-color-neutral-700), 1;
+    --ods-color-border-negative: var(--ods-color-error-400), 1;
+    --ods-color-border-negative-subtle: var(--ods-color-error-muted-500), 1;
+    --ods-color-border-warning: var(--ods-color-warning-400), 1;
+    --ods-color-border-warning-subtle: var(--ods-color-warning-muted-500), 1;
+    --ods-color-border-positive: var(--ods-color-success-400), 1;
+    --ods-color-border-positive-subtle: var(--ods-color-success-muted-500), 1;
+    --ods-color-border-info: var(--ods-color-info-400), 1;
+    --ods-color-border-info-subtle: var(--ods-color-info-muted-600), 1;
+    --ods-color-border-input-selected: var(--ods-color-neutral-200), 1;
+    --ods-color-border-focus-inner: var(--ods-color-neutral-900), 1;
+    --ods-color-border-action-focus: var(--ods-color-primary-200), 1;
+    --ods-color-border-negative-focus: var(--ods-color-error-400), 1;
+    --ods-color-border-inverse-action: var(--ods-color-primary-500), 1;
   }
 }
diff --git a/packages/core/src/theme/tokens.scss b/packages/core/src/theme/tokens.scss
index 25236a259..3fd8e3552 100644
--- a/packages/core/src/theme/tokens.scss
+++ b/packages/core/src/theme/tokens.scss
@@ -1,76 +1,76 @@
 @mixin tokens() {
-  --border-radius-small: 2px;
-  --border-radius-medium: 4px;
-  --border-radius-large: 8px;
-  --border-radius-full: 100vw;
+  --ods-border-radius-small: 2px;
+  --ods-border-radius-medium: 4px;
+  --ods-border-radius-large: 8px;
+  --ods-border-radius-full: 100vw;
 
-  --color-neutral-900: 30, 30, 36;
-  --color-neutral-800: 43, 45, 51;
-  --color-neutral-700: 99, 102, 112;
-  --color-neutral-600: 162, 168, 179;
-  --color-neutral-500: 180, 186, 197;
-  --color-neutral-400: 213, 218, 224;
-  --color-neutral-300: 233, 236, 240;
-  --color-neutral-200: 247, 249, 250;
-  --color-neutral-050: 252, 252, 253;
-  --color-neutral-white: 255, 255, 255;
-  --color-neutral-black: 0, 0, 0;
-  --color-primary-700: 28, 19, 101;
-  --color-primary-600: 35, 42, 173;
-  --color-primary-500: 54, 64, 245;
-  --color-primary-400: 92, 108, 255;
-  --color-primary-300: 130, 143, 255;
-  --color-primary-200: 189, 195, 255;
-  --color-primary-100: 235, 237, 255;
-  --color-primary-050: 245, 246, 255;
-  --color-primary-muted-600: 101, 105, 160;
-  --color-primary-muted-300: 149, 185, 255;
-  --color-accent-1-600: 255, 100, 100;
-  --color-accent-1-500: 255, 137, 125;
-  --color-accent-1-400: 255, 172, 163;
-  --color-accent-2-600: 249, 178, 20;
-  --color-accent-2-500: 255, 221, 84;
-  --color-accent-2-400: 255, 236, 112;
-  --color-accent-3-600: 129, 35, 173;
-  --color-accent-3-500: 175, 95, 239;
-  --color-accent-3-400: 222, 189, 255;
-  --color-success-600: 0, 107, 36;
-  --color-success-500: 5, 125, 39;
-  --color-success-400: 21, 179, 18;
-  --color-success-300: 81, 209, 123;
-  --color-success-200: 157, 239, 184;
-  --color-success-100: 203, 248, 218;
-  --color-success-050: 236, 253, 241;
-  --color-success-vivid-300: 145, 232, 123;
-  --color-success-muted-500: 108, 137, 94;
-  --color-success-muted-300: 137, 211, 163;
-  --color-info-700: 28, 19, 101;
-  --color-info-600: 35, 42, 173;
-  --color-info-500: 54, 64, 245;
-  --color-info-400: 92, 108, 255;
-  --color-info-300: 130, 143, 255;
-  --color-info-200: 189, 195, 255;
-  --color-info-100: 235, 237, 255;
-  --color-info-050: 245, 246, 255;
-  --color-info-muted-600: 101, 105, 160;
-  --color-info-muted-300: 149, 185, 255;
-  --color-warning-600: 158, 75, 8;
-  --color-warning-500: 196, 107, 4;
-  --color-warning-400: 227, 133, 25;
-  --color-warning-300: 251, 194, 127;
-  --color-warning-200: 250, 218, 181;
-  --color-warning-100: 253, 237, 219;
-  --color-warning-050: 255, 245, 235;
-  --color-warning-vivid-300: 253, 168, 70;
-  --color-warning-muted-500: 150, 125, 96;
-  --color-warning-muted-300: 235, 193, 144;
-  --color-error-600: 170, 0, 0;
-  --color-error-500: 195, 47, 47;
-  --color-error-400: 245, 78, 78;
-  --color-error-300: 252, 123, 123;
-  --color-error-200: 255, 185, 185;
-  --color-error-100: 252, 229, 229;
-  --color-error-050: 255, 246, 246;
-  --color-error-muted-500: 152, 93, 97;
-  --color-error-muted-300: 239, 169, 169;
+  --ods-color-neutral-900: 30, 30, 36;
+  --ods-color-neutral-800: 43, 45, 51;
+  --ods-color-neutral-700: 99, 102, 112;
+  --ods-color-neutral-600: 162, 168, 179;
+  --ods-color-neutral-500: 180, 186, 197;
+  --ods-color-neutral-400: 213, 218, 224;
+  --ods-color-neutral-300: 233, 236, 240;
+  --ods-color-neutral-200: 247, 249, 250;
+  --ods-color-neutral-050: 252, 252, 253;
+  --ods-color-neutral-white: 255, 255, 255;
+  --ods-color-neutral-black: 0, 0, 0;
+  --ods-color-primary-700: 28, 19, 101;
+  --ods-color-primary-600: 35, 42, 173;
+  --ods-color-primary-500: 54, 64, 245;
+  --ods-color-primary-400: 92, 108, 255;
+  --ods-color-primary-300: 130, 143, 255;
+  --ods-color-primary-200: 189, 195, 255;
+  --ods-color-primary-100: 235, 237, 255;
+  --ods-color-primary-050: 245, 246, 255;
+  --ods-color-primary-muted-600: 101, 105, 160;
+  --ods-color-primary-muted-300: 149, 185, 255;
+  --ods-color-accent-1-600: 255, 100, 100;
+  --ods-color-accent-1-500: 255, 137, 125;
+  --ods-color-accent-1-400: 255, 172, 163;
+  --ods-color-accent-2-600: 249, 178, 20;
+  --ods-color-accent-2-500: 255, 221, 84;
+  --ods-color-accent-2-400: 255, 236, 112;
+  --ods-color-accent-3-600: 129, 35, 173;
+  --ods-color-accent-3-500: 175, 95, 239;
+  --ods-color-accent-3-400: 222, 189, 255;
+  --ods-color-success-600: 0, 107, 36;
+  --ods-color-success-500: 5, 125, 39;
+  --ods-color-success-400: 21, 179, 18;
+  --ods-color-success-300: 81, 209, 123;
+  --ods-color-success-200: 157, 239, 184;
+  --ods-color-success-100: 203, 248, 218;
+  --ods-color-success-050: 236, 253, 241;
+  --ods-color-success-vivid-300: 145, 232, 123;
+  --ods-color-success-muted-500: 108, 137, 94;
+  --ods-color-success-muted-300: 137, 211, 163;
+  --ods-color-info-700: 28, 19, 101;
+  --ods-color-info-600: 35, 42, 173;
+  --ods-color-info-500: 54, 64, 245;
+  --ods-color-info-400: 92, 108, 255;
+  --ods-color-info-300: 130, 143, 255;
+  --ods-color-info-200: 189, 195, 255;
+  --ods-color-info-100: 235, 237, 255;
+  --ods-color-info-050: 245, 246, 255;
+  --ods-color-info-muted-600: 101, 105, 160;
+  --ods-color-info-muted-300: 149, 185, 255;
+  --ods-color-warning-600: 158, 75, 8;
+  --ods-color-warning-500: 196, 107, 4;
+  --ods-color-warning-400: 227, 133, 25;
+  --ods-color-warning-300: 251, 194, 127;
+  --ods-color-warning-200: 250, 218, 181;
+  --ods-color-warning-100: 253, 237, 219;
+  --ods-color-warning-050: 255, 245, 235;
+  --ods-color-warning-vivid-300: 253, 168, 70;
+  --ods-color-warning-muted-500: 150, 125, 96;
+  --ods-color-warning-muted-300: 235, 193, 144;
+  --ods-color-error-600: 170, 0, 0;
+  --ods-color-error-500: 195, 47, 47;
+  --ods-color-error-400: 245, 78, 78;
+  --ods-color-error-300: 252, 123, 123;
+  --ods-color-error-200: 255, 185, 185;
+  --ods-color-error-100: 252, 229, 229;
+  --ods-color-error-050: 255, 246, 246;
+  --ods-color-error-muted-500: 152, 93, 97;
+  --ods-color-error-muted-300: 239, 169, 169;
 }
diff --git a/packages/react/src/icon/icon.react.stories.tsx b/packages/react/src/icon/icon.react.stories.tsx
index 622b40114..f10bab8fe 100644
--- a/packages/react/src/icon/icon.react.stories.tsx
+++ b/packages/react/src/icon/icon.react.stories.tsx
@@ -5,7 +5,7 @@ import { Meta, omit, Story, storyOf, tokens } from '../../../../docs';
 import { Icon, IconProps } from './icon.react';
 
 const colors = Object.keys(tokens).reduce((accumulator, name) => {
-  const [, color] = name.match(/^--color-([a-z0-9-]+)$/) ?? [];
+  const [, color] = name.match(/^--ods-color-([a-z0-9-]+)$/) ?? [];
   return color ? [...accumulator, color] : accumulator;
 }, []) as Color[];