diff --git a/packages/core/scripts/theme-builder/src/theme-variables.ts b/packages/core/scripts/theme-builder/src/theme-variables.ts
index 212f659f37..d7ce7a19fa 100644
--- a/packages/core/scripts/theme-builder/src/theme-variables.ts
+++ b/packages/core/scripts/theme-builder/src/theme-variables.ts
@@ -4,9 +4,6 @@ export const THEME_VARIABLES = [
   {
     property: '--color-primary'
   },
-  {
-    property: '--color-primary-contrast'
-  },
   {
     property: '--color-primary-tint'
   },
@@ -14,10 +11,10 @@ export const THEME_VARIABLES = [
     property: '--color-primary-shade'
   },
   {
-    property: '--color-secondary'
+    property: '--color-primary-contrast'
   },
   {
-    property: '--color-secondary-contrast'
+    property: '--color-secondary'
   },
   {
     property: '--color-secondary-tint'
@@ -26,10 +23,10 @@ export const THEME_VARIABLES = [
     property: '--color-secondary-shade'
   },
   {
-    property: '--color-tertiary'
+    property: '--color-secondary-contrast'
   },
   {
-    property: '--color-tertiary-contrast'
+    property: '--color-tertiary'
   },
   {
     property: '--color-tertiary-tint'
@@ -38,10 +35,10 @@ export const THEME_VARIABLES = [
     property: '--color-tertiary-shade'
   },
   {
-    property: '--color-success'
+    property: '--color-tertiary-contrast'
   },
   {
-    property: '--color-success-contrast'
+    property: '--color-success'
   },
   {
     property: '--color-success-tint'
@@ -50,10 +47,10 @@ export const THEME_VARIABLES = [
     property: '--color-success-shade'
   },
   {
-    property: '--color-warning'
+    property: '--color-success-contrast'
   },
   {
-    property: '--color-warning-contrast'
+    property: '--color-warning'
   },
   {
     property: '--color-warning-tint'
@@ -62,10 +59,10 @@ export const THEME_VARIABLES = [
     property: '--color-warning-shade'
   },
   {
-    property: '--color-danger'
+    property: '--color-warning-contrast'
   },
   {
-    property: '--color-danger-contrast'
+    property: '--color-danger'
   },
   {
     property: '--color-danger-tint'
@@ -74,10 +71,10 @@ export const THEME_VARIABLES = [
     property: '--color-danger-shade'
   },
   {
-    property: '--color-light'
+    property: '--color-danger-contrast'
   },
   {
-    property: '--color-light-contrast'
+    property: '--color-light'
   },
   {
     property: '--color-light-tint'
@@ -86,10 +83,10 @@ export const THEME_VARIABLES = [
     property: '--color-light-shade'
   },
   {
-    property: '--color-medium'
+    property: '--color-light-contrast'
   },
   {
-    property: '--color-medium-contrast'
+    property: '--color-medium'
   },
   {
     property: '--color-medium-tint'
@@ -98,10 +95,10 @@ export const THEME_VARIABLES = [
     property: '--color-medium-shade'
   },
   {
-    property: '--color-dark'
+    property: '--color-medium-contrast'
   },
   {
-    property: '--color-dark-contrast'
+    property: '--color-dark'
   },
   {
     property: '--color-dark-tint'
@@ -109,6 +106,9 @@ export const THEME_VARIABLES = [
   {
     property: '--color-dark-shade'
   },
+  {
+    property: '--color-dark-contrast'
+  },
   {
     property: '--text-color'
   },
@@ -146,7 +146,7 @@ export const THEME_VARIABLES = [
     property: '--backdrop-color'
   },
   {
-    property: '--box-shadow'
+    property: '--box-shadow-color'
   },
 
 ];
diff --git a/packages/core/src/themes/css/default.css b/packages/core/src/themes/css/default.css
index 399c417adb..bbfeaba882 100644
--- a/packages/core/src/themes/css/default.css
+++ b/packages/core/src/themes/css/default.css
@@ -3,41 +3,41 @@
 
 :root {
   --color-primary: #3880ff;
-  --color-primary-contrast: #ffffff;
   --color-primary-tint: #5896ff;
   --color-primary-shade: #135ddf;
+  --color-primary-contrast: #ffffff;
   --color-secondary: #0cd1e8;
-  --color-secondary-contrast: #ffffff;
   --color-secondary-tint: #5de6f6;
   --color-secondary-shade: #00bce0;
+  --color-secondary-contrast: #ffffff;
   --color-tertiary: #7044ff;
-  --color-tertiary-contrast: #ffffff;
   --color-tertiary-tint: #896bff;
   --color-tertiary-shade: #4d16d6;
+  --color-tertiary-contrast: #ffffff;
   --color-success: #10dc60;
-  --color-success-contrast: #ffffff;
   --color-success-tint: #38ec7f;
   --color-success-shade: #00bc4a;
+  --color-success-contrast: #ffffff;
   --color-warning: #ffce00;
-  --color-warning-contrast: #ffffff;
   --color-warning-tint: #ffe05e;
   --color-warning-shade: #f5ad00;
+  --color-warning-contrast: #ffffff;
   --color-danger: #f04141;
-  --color-danger-contrast: #ffffff;
   --color-danger-tint: #ff6464;
   --color-danger-shade: #ca1717;
+  --color-danger-contrast: #ffffff;
   --color-light: #f4f5f8;
-  --color-light-contrast: #000000;
   --color-light-tint: #ffffff;
   --color-light-shade: #e2e4e9;
+  --color-light-contrast: #000000;
   --color-medium: #989aa2;
-  --color-medium-contrast: #000000;
   --color-medium-tint: #c1c4cd;
   --color-medium-shade: #62646a;
+  --color-medium-contrast: #000000;
   --color-dark: #222428;
-  --color-dark-contrast: #ffffff;
   --color-dark-tint: #3f4248;
   --color-dark-shade: #000000;
+  --color-dark-contrast: #ffffff;
   --text-color: #000000;
   --text-color-alt: #898b93;
   --background-color: #ffffff;
@@ -50,5 +50,5 @@
   --item-background-color-alt: #c1c4cd;
   --border-color: #c1c4cd;
   --backdrop-color: #000000;
-  --box-shadow: #000000;
+  --box-shadow-color: #000000;
 }
\ No newline at end of file
diff --git a/packages/core/src/themes/css/oceanic.css b/packages/core/src/themes/css/oceanic.css
index b172ea115e..382dafa203 100644
--- a/packages/core/src/themes/css/oceanic.css
+++ b/packages/core/src/themes/css/oceanic.css
@@ -3,41 +3,41 @@
 
 :root {
   --color-primary: #549ee7;
-  --color-primary-contrast: #ffffff;
   --color-primary-tint: #59aafc;
   --color-primary-shade: #498bce;
+  --color-primary-contrast: #ffffff;
   --color-secondary: #5fb3b3;
-  --color-secondary-contrast: #ffffff;
   --color-secondary-tint: #6ececf;
   --color-secondary-shade: #34a29d;
+  --color-secondary-contrast: #ffffff;
   --color-tertiary: #fac863;
-  --color-tertiary-contrast: #ffffff;
   --color-tertiary-tint: #ffd36a;
   --color-tertiary-shade: #eab30f;
+  --color-tertiary-contrast: #ffffff;
   --color-success: #90d089;
-  --color-success-contrast: #ffffff;
   --color-success-tint: #a1eb9a;
   --color-success-shade: #81bc7b;
+  --color-success-contrast: #ffffff;
   --color-warning: #f99157;
-  --color-warning-contrast: #ffffff;
   --color-warning-tint: #ff9e60;
   --color-warning-shade: #ec8a54;
+  --color-warning-contrast: #ffffff;
   --color-danger: #ec5f67;
-  --color-danger-contrast: #ffffff;
   --color-danger-tint: #ff707b;
   --color-danger-shade: #cb535b;
+  --color-danger-contrast: #ffffff;
   --color-light: #d8dee9;
-  --color-light-contrast: #1b2b34;
   --color-light-tint: #e8edfc;
   --color-light-shade: #b8bcc8;
+  --color-light-contrast: #1b2b34;
   --color-medium: #65737e;
-  --color-medium-contrast: #d8dee9;
   --color-medium-tint: #ff00ff;
   --color-medium-shade: #ff00ff;
+  --color-medium-contrast: #d8dee9;
   --color-dark: #1b2b34;
-  --color-dark-contrast: #d8dee9;
   --color-dark-tint: #ff00ff;
   --color-dark-shade: #ff00ff;
+  --color-dark-contrast: #d8dee9;
   --text-color: #ffffff;
   --text-color-alt: #a7adba;
   --background-color: #1b2b34;
@@ -50,5 +50,5 @@
   --item-background-color-alt: #65737e;
   --border-color: #1b2b34;
   --backdrop-color: #ff00ff;
-  --box-shadow: #ff00ff;
+  --box-shadow-color: #ff00ff;
 }
\ No newline at end of file