diff --git a/tailwind.config.js b/tailwind.config.js
index d36409c5a..d73e2f567 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,30 +5,31 @@ module.exports = {
     theme: {
         extend: {
             colors: {
-                'primary-50': 'rgb(var(--primary-50))',
-                'primary-100': 'rgb(var(--primary-100))',
-                'primary-200': 'rgb(var(--primary-200))',
-                'primary-300': 'rgb(var(--primary-300))',
-                'primary-400': 'rgb(var(--primary-400))',
-                'primary-500': 'rgb(var(--primary-500))',
-                'primary-600': 'rgb(var(--primary-600))',
-                'primary-700': 'rgb(var(--primary-700))',
-                'primary-800': 'rgb(var(--primary-800))',
-                'primary-900': 'rgb(var(--primary-900))',
-                'primary-950': 'rgb(var(--primary-950))',
-
-                'surface-0': 'rgb(var(--surface-0))',
-                'surface-50': 'rgb(var(--surface-50))',
-                'surface-100': 'rgb(var(--surface-100))',
-                'surface-200': 'rgb(var(--surface-200))',
-                'surface-300': 'rgb(var(--surface-300))',
-                'surface-400': 'rgb(var(--surface-400))',
-                'surface-500': 'rgb(var(--surface-500))',
-                'surface-600': 'rgb(var(--surface-600))',
-                'surface-700': 'rgb(var(--surface-700))',
-                'surface-800': 'rgb(var(--surface-800))',
-                'surface-900': 'rgb(var(--surface-900))',
-                'surface-950': 'rgb(var(--surface-950))'
+                'primary': 'var(-p-primary-color)',
+                'primary-contrast': 'var(-p-primary-contrast-color)',
+                'primary-50': 'var(--p-primary-50)',
+                'primary-100': 'var(--p-primary-100)',
+                'primary-200': 'var(--p-primary-200)',
+                'primary-300': 'var(--p-primary-300)',
+                'primary-400': 'var(--p-primary-400)',
+                'primary-500': 'var(--p-primary-500)',
+                'primary-600': 'var(--p-primary-600)',
+                'primary-700': 'var(--p-primary-700)',
+                'primary-800': 'var(--p-primary-800)',
+                'primary-900': 'var(--p-primary-900)',
+                'primary-950': 'var(--p-primary-950)',
+                'surface-0': 'var(--p-surface-0)',
+                'surface-50': 'var(--p-surface-50)',
+                'surface-100': 'var(--p-surface-100)',
+                'surface-200': 'var(--p-surface-200)',
+                'surface-300': 'var(--p-surface-300)',
+                'surface-400': 'var(--p-surface-400)',
+                'surface-500': 'var(--p-surface-500)',
+                'surface-600': 'var(--p-surface-600)',
+                'surface-700': 'var(--p-surface-700)',
+                'surface-800': 'var(--p-surface-800)',
+                'surface-900': 'var(--p-surface-900)',
+                'surface-950': 'var(--p-surface-950)'
             }
         }
     },