diff --git a/packages/core/scripts/theme-builder/src/components/css-text/css-text.css b/packages/core/scripts/theme-builder/src/components/css-text/css-text.css
index a927db425b..13d60de06c 100644
--- a/packages/core/scripts/theme-builder/src/components/css-text/css-text.css
+++ b/packages/core/scripts/theme-builder/src/components/css-text/css-text.css
@@ -8,7 +8,7 @@ h1 {
 textarea {
   margin: 12px 0 0 0;
   min-width: 300px;
-  height: 550px;
+  height: 640px;
   font-family: Courier New, Courier, monospace;
 }
 
diff --git a/packages/core/scripts/theme-builder/src/components/theme-builder/theme-builder.css b/packages/core/scripts/theme-builder/src/components/theme-builder/theme-builder.css
index e9c7061024..85863334b2 100644
--- a/packages/core/scripts/theme-builder/src/components/theme-builder/theme-builder.css
+++ b/packages/core/scripts/theme-builder/src/components/theme-builder/theme-builder.css
@@ -15,4 +15,6 @@ main > section {
 
 .selector-column {
   max-width: 600px;
+  height: 100%;
+  overflow-y: scroll;
 }
\ No newline at end of file
diff --git a/packages/core/scripts/theme-builder/src/theme-variables.ts b/packages/core/scripts/theme-builder/src/theme-variables.ts
index dcc1491d2d..7f26fbf8a5 100644
--- a/packages/core/scripts/theme-builder/src/theme-variables.ts
+++ b/packages/core/scripts/theme-builder/src/theme-variables.ts
@@ -7,54 +7,108 @@ export const THEME_VARIABLES = [
   {
     property: '--primary-contrast'
   },
+  {
+    property: '--primary-tint'
+  },
+  {
+    property: '--primary-shade'
+  },
   {
     property: '--secondary'
   },
   {
     property: '--secondary-contrast'
   },
+  {
+    property: '--secondary-tint'
+  },
+  {
+    property: '--secondary-shade'
+  },
   {
     property: '--tertiary'
   },
   {
     property: '--tertiary-contrast'
   },
+  {
+    property: '--tertiary-tint'
+  },
+  {
+    property: '--tertiary-shade'
+  },
   {
     property: '--success'
   },
   {
     property: '--success-contrast'
   },
+  {
+    property: '--success-tint'
+  },
+  {
+    property: '--success-shade'
+  },
   {
     property: '--warning'
   },
   {
     property: '--warning-contrast'
   },
+  {
+    property: '--warning-tint'
+  },
+  {
+    property: '--warning-shade'
+  },
   {
     property: '--danger'
   },
   {
     property: '--danger-contrast'
   },
+  {
+    property: '--danger-tint'
+  },
+  {
+    property: '--danger-shade'
+  },
   {
     property: '--light'
   },
   {
     property: '--light-contrast'
   },
+  {
+    property: '--light-tint'
+  },
+  {
+    property: '--light-shade'
+  },
   {
     property: '--medium'
   },
   {
     property: '--medium-contrast'
   },
+  {
+    property: '--medium-tint'
+  },
+  {
+    property: '--medium-shade'
+  },
   {
     property: '--dark'
   },
   {
     property: '--dark-contrast'
   },
+  {
+    property: '--dark-tint'
+  },
+  {
+    property: '--dark-shade'
+  },
   {
     property: '--text-color'
   },