diff --git a/vizro-core/changelog.d/20241119_173819_huong_li_nguyen_remove_variables.md b/vizro-core/changelog.d/20241119_173819_huong_li_nguyen_remove_variables.md
new file mode 100644
index 000000000..89a58b272
--- /dev/null
+++ b/vizro-core/changelog.d/20241119_173819_huong_li_nguyen_remove_variables.md
@@ -0,0 +1,48 @@
+<!--
+A new scriv changelog fragment.
+
+Uncomment the section that is right (remove the HTML comment wrapper).
+-->
+
+<!--
+### Highlights ✨
+
+- A bullet item for the Highlights ✨ category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+
+### Removed
+
+- Removed all CSS variables from `variables.css` and `token_names.css`, replacing them with CSS variables from `vizro-bootstrap.min.css`.
+  Refer to [`vizro-bootstrap.min.css](https://github.com/mckinsey/vizro/blob/main/vizro-core/src/vizro/static/css/vizro-bootstrap.min.css) for the updated CSS variables. ([#886](https://github.com/mckinsey/vizro/pull/886))
+
+<!--
+### Added
+
+- A bullet item for the Added category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Changed
+
+- A bullet item for the Changed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Deprecated
+
+- A bullet item for the Deprecated category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Fixed
+
+- A bullet item for the Fixed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Security
+
+- A bullet item for the Security category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
diff --git a/vizro-core/docs/pages/user-guides/custom-css.md b/vizro-core/docs/pages/user-guides/custom-css.md
index 44e3a3621..8dd7da3c7 100755
--- a/vizro-core/docs/pages/user-guides/custom-css.md
+++ b/vizro-core/docs/pages/user-guides/custom-css.md
@@ -314,6 +314,15 @@ It's essential to understand the relationship between the targeted CSS class or
 
 ## Common examples
 
+### Make your CSS responsive to theme switches with variables
+To ensure your CSS adapts to theme changes, we recommend using CSS variables (`var`) whenever possible. For a
+comprehensive list of available CSS variable names, refer to the
+[Bootstrap documentation](https://getbootstrap.com/docs/5.3/customize/css-variables/). Note that our Vizro Bootstrap
+stylesheet is still under development. While all Bootstrap variables have values assigned, some of these values may
+come from the default Bootstrap theme, which can result in styling that looks different from the intended Vizro design.
+You can also define your own CSS variables, as demonstrated in the example on
+[changing the container background color](#change-the-styling-of-a-container).
+
 ### Turn off page title
 See the example above on [hiding the page title on selected pages](#overwrite-css-for-selected-pages).
 
@@ -380,8 +389,18 @@ To do this, you need to change the container's CSS class. Using the DevTool, as
 !!! example "Style a container"
     === "custom.css"
     ```css
+    /* Assign a variable to the dark and light theme */
+    [data-bs-theme="dark"] {
+        --container-bg-color: #232632;
+    }
+
+    [data-bs-theme="light"] {
+        --container-bg-color: #F5F6F6;
+    }
+
+    /* Use the custom variable var(--container-bg-color) */
     .page-component-container {
-        background: var(--surfaces-bg-card);
+        background: var(--container-bg-color);
         padding: 12px;
     }
     ```
diff --git a/vizro-core/docs/pages/user-guides/custom-tables.md b/vizro-core/docs/pages/user-guides/custom-tables.md
index 8fa5f5252..e990cfbb0 100644
--- a/vizro-core/docs/pages/user-guides/custom-tables.md
+++ b/vizro-core/docs/pages/user-guides/custom-tables.md
@@ -38,10 +38,10 @@ The following examples show a possible version of a custom table. In this case t
             columns = [{"name": i, "id": i} for i in chosen_columns]
             defaults = {
                 "style_as_list_view": True,
-                "style_data": {"border_bottom": "1px solid var(--border-subtle-alpha-01)", "height": "40px"},
+                "style_data": {"border_bottom": "1px solid var(--border-subtleAlpha01)", "height": "40px"},
                 "style_header": {
-                    "border_bottom": "1px solid var(--state-overlays-selected-hover)",
-                    "border_top": "1px solid var(--main-container-bg-color)",
+                    "border_bottom": "1px solid var(--stateOverlays-selectedHover)",
+                    "border_top": "1px solid var(--right-side-bg)",
                     "height": "32px",
                 },
             }
diff --git a/vizro-core/src/vizro/static/css/aggrid.css b/vizro-core/src/vizro/static/css/aggrid.css
index 81d463b9b..286e28d0b 100644
--- a/vizro-core/src/vizro/static/css/aggrid.css
+++ b/vizro-core/src/vizro/static/css/aggrid.css
@@ -1,27 +1,27 @@
 .ag-theme-quartz.ag-theme-vizro,
 .ag-theme-quartz-dark.ag-theme-vizro {
-  --ag-active-color: var(--state-overlays-selected-hover);
-  --ag-background-color: var(--main-container-bg-color);
-  --ag-odd-row-background-color: var(--main-container-bg-color);
+  --ag-active-color: var(--stateOverlays-selectedHover);
+  --ag-background-color: var(--right-side-bg);
+  --ag-odd-row-background-color: var(--right-side-bg);
   --ag-header-foreground-color: var(--text-secondary);
   --ag-data-color: var(--text-primary);
-  --ag-header-background-color: var(--main-container-bg-color);
+  --ag-header-background-color: var(--right-side-bg);
   --ag-icon-font-family: aggridquartz;
-  --ag-icon-size: var(--text-size-02);
+  --ag-icon-size: 0.875rem;
   --ag-row-height: 48px;
   --ag-header-height: 40px;
   --ag-borders: none;
   --ag-border-radius: 0;
   --ag-border-color: transparent;
   --ag-row-border-style: solid;
-  --ag-row-border-color: var(--border-subtle-alpha-01);
+  --ag-row-border-color: var(--border-subtleAlpha01);
   --ag-row-border-width: 1px;
-  --ag-selected-row-background-color: var(--state-overlays-selected);
+  --ag-selected-row-background-color: var(--stateOverlays-selected);
   --ag-checkbox-checked-color: var(--text-primary);
   --ag-header-column-resize-handle-display: block;
   --ag-header-column-resize-handle-height: 30%;
   --ag-header-column-resize-handle-width: 1px;
-  --ag-header-column-resize-handle-color: var(--border-subtle-alpha-02);
+  --ag-header-column-resize-handle-color: var(--border-subtleAlpha02);
   --ag-range-selection-border-color: transparent;
   --ag-input-focus-border-color: transparent;
 }
@@ -29,7 +29,7 @@
 /* Header ------- */
 #dashboard-container .ag-header-row {
   align-items: flex-start;
-  border-bottom: 1px solid var(--border-subtle-alpha-02);
+  border-bottom: 1px solid var(--border-subtleAlpha02);
   display: flex;
 }
 
@@ -37,12 +37,12 @@
   align-items: center;
   display: flex;
   height: 40px;
-  padding: 0 var(--spacing-03);
+  padding: 0 0.75rem;
 }
 
 #dashboard-container .ag-header-cell-text {
   letter-spacing: -0.112px;
-  line-height: var(--spacing-04);
+  line-height: 1rem;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -55,7 +55,7 @@
 
 /* Rows ------- */
 #dashboard-container .ag-cell {
-  padding: 0 var(--spacing-03);
+  padding: 0 0.75rem;
 }
 
 #dashboard-container .ag-cell-focus {
@@ -63,24 +63,24 @@
 }
 
 #dashboard-container .ag-cell-focus:not(.ag-cell-range-selected):focus-within {
-  background: var(--state-overlays-selected);
+  background: var(--stateOverlays-selected);
 }
 
 /* Pop up menu ----- */
 #dashboard-container .ag-menu {
-  background-color: var(--surfaces-bg-02);
-  border: 1px solid var(--border-subtle-alpha-02);
+  background-color: var(--surfaces-bg02);
+  border: 1px solid var(--border-subtleAlpha02);
   color: var(--text-primary);
 }
 
 #dashboard-container .ag-ltr .ag-filter-filter input {
   background-color: var(--field-enabled);
-  box-shadow: var(--box-shadow-elevation-0);
+  box-shadow: var(--elevation-0);
   display: flex;
-  font-size: var(--text-size-02);
-  font-weight: var(--text-weight-regular);
-  letter-spacing: var(--letter-spacing-body-ui-02);
-  line-height: var(--text-size-03);
+  font-size: 0.875rem;
+  font-weight: 400;
+  letter-spacing: -0.112px;
+  line-height: 1rem;
   text-overflow: ellipsis;
 }
 
@@ -89,24 +89,24 @@
   border: none;
   border-radius: 0;
   box-shadow: none;
-  font-size: var(--text-size-02);
+  font-size: 0.875rem;
 }
 
 #dashboard-container .ag-filter-select .ag-picker-field-wrapper {
   background-color: var(--field-enabled);
-  box-shadow: var(--box-shadow-elevation-0);
+  box-shadow: var(--elevation-0);
 }
 
 #dashboard-container .ag-select-list {
   background-color: var(--field-enabled);
-  box-shadow: var(--box-shadow-elevation-0);
+  box-shadow: var(--elevation-0);
   color: var(--text-primary);
-  font-size: var(--text-size-02);
-  line-height: var(--text-size-05);
+  font-size: 0.875rem;
+  line-height: 1.5rem;
 }
 
 #dashboard-container .ag-select-list-item.ag-active-item {
-  background-color: var(--state-overlays-hover);
+  background-color: var(--stateOverlays-hover);
 }
 
 #dashboard-container .ag-radio-button-input-wrapper {
@@ -123,12 +123,12 @@
 
 #dashboard-container .ag-filter-apply-panel {
   justify-content: flex-start;
-  padding: var(--spacing-02) 0 var(--spacing-03) 0;
+  padding: 0.5rem 0 0.75rem;
 }
 
 #dashboard-container .ag-filter-condition {
   justify-content: flex-start;
-  padding: var(--spacing-02) var(--spacing-01);
+  padding: 0.5rem 0.25rem;
 }
 
 /* Scroll Bar */
@@ -157,28 +157,27 @@
   padding-left: 0;
 }
 
-/* Buttons */
 #dashboard-container .ag-standard-button {
   background: var(--fill-active);
   border: none;
   border-radius: 0;
-  box-shadow: var(--box-shadow-elevation-0);
-  color: var(--text-contrast-primary);
-  font-size: var(--text-size-02);
-  font-weight: var(--text-weight-semibold);
+  box-shadow: var(--elevation-0);
+  color: var(--text-primary-inverted);
+  font-size: 0.875rem;
+  font-weight: 600;
   height: 32px;
-  letter-spacing: var(--letter-spacing-body-link-02);
-  line-height: var(--text-size-05);
-  padding: var(--spacing-01) var(--spacing-03);
+  letter-spacing: -0.028px;
+  line-height: 1.5rem;
+  padding: 0.25rem 0.75rem;
   text-transform: none;
 }
 
 #dashboard-container .ag-standard-button:hover {
   background: linear-gradient(
-      var(--state-overlays-contrast-hover),
-      var(--state-overlays-contrast-hover)
+      var(--stateOverlays-hover-inverted),
+      var(--stateOverlays-hover-inverted)
     ),
     var(--fill-active);
-  color: var(--text-contrast-primary);
+  color: var(--text-primary-inverted);
   text-decoration-line: underline;
 }
diff --git a/vizro-core/src/vizro/static/css/bootstrap_overwrites.css b/vizro-core/src/vizro/static/css/bootstrap_overwrites.css
index 59197a251..7e1f16cc1 100644
--- a/vizro-core/src/vizro/static/css/bootstrap_overwrites.css
+++ b/vizro-core/src/vizro/static/css/bootstrap_overwrites.css
@@ -1,5 +1,32 @@
-/* This file contains overwrites, which we want to have as defaults for vizro
-but do not want to take over to `vizro-bootstrap` as these settings might not be generic enough. */
+/* This file contains overwrites, which we want to have as defaults for vizro framework
+but do not want to take over to `vizro-bootstrap` as these settings might not be generic enough
+for a pure Dash app.
+
+All the HEX values starting with --text-code are taken from the Github code highlighting style. */
+[data-bs-theme="dark"] {
+  --dropdown-label-bg: var(--primary-800);
+  --right-side-bg: var(--surfaces-bg03);
+  --text-code-string: #95c2e7;
+  --text-code-keyword: #f4766e;
+  --text-code-meta: #c8ace1;
+  --text-code-type: #f69d50;
+  --text-code-literal: #6bb5fd;
+  --slider-rail-bg: var(--primary-100);
+  --collapse-icon-bg: var(--primary-500);
+}
+
+[data-bs-theme="light"] {
+  --dropdown-label-bg: var(--primary-300);
+  --right-side-bg: var(--surfaces-bg01);
+  --text-code-string: #0a3069;
+  --text-code-keyword: #d12d39;
+  --text-code-meta: #6f42c1;
+  --text-code-type: #f69d50;
+  --text-code-literal: #005cc5;
+  --fill-icon-image-card: invert(64%) sepia(0%) saturate(1375%);
+  --slider-rail-bg: var(--primary-900);
+  --collapse-icon-bg: var(--primary-300);
+}
 
 .card .nav-link {
   height: 100%;
diff --git a/vizro-core/src/vizro/static/css/container.css b/vizro-core/src/vizro/static/css/container.css
deleted file mode 100644
index 6fe15633f..000000000
--- a/vizro-core/src/vizro/static/css/container.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.page-component-container {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
diff --git a/vizro-core/src/vizro/static/css/datepicker.css b/vizro-core/src/vizro/static/css/datepicker.css
index b2d4a4ebb..3e167d5d0 100644
--- a/vizro-core/src/vizro/static/css/datepicker.css
+++ b/vizro-core/src/vizro/static/css/datepicker.css
@@ -1,6 +1,6 @@
 .datepicker .mantine-Input-wrapper {
   font-family: unset;
-  height: var(--spacing-08);
+  height: 2rem;
 }
 
 .datepicker .mantine-DateRangePicker-input,
@@ -8,13 +8,13 @@
   background-color: var(--field-enabled);
   border: none;
   border-radius: 0;
-  box-shadow: var(--box-shadow-elevation-0);
+  box-shadow: var(--elevation-0);
   color: var(--text-secondary);
-  font-size: var(--text-size-02);
-  height: var(--spacing-08);
-  line-height: var(--spacing-04);
-  min-height: var(--spacing-08);
-  padding: 0 var(--spacing-02);
+  font-size: 0.875rem;
+  height: 2rem;
+  line-height: 1rem;
+  min-height: 2rem;
+  padding: 0 0.5rem;
 }
 
 .datepicker .mantine-DateRangePicker-input:hover,
@@ -27,8 +27,8 @@
   background: var(--field-enabled);
   border: none;
   border-radius: 0;
-  box-shadow: var(--box-shadow-elevation-1);
-  padding: var(--spacing-04) 11px; /* 11px otherwise not aligned with controls */
+  box-shadow: var(--elevation-1);
+  padding: 1rem 11px; /* 11px otherwise not aligned with controls */
 }
 
 .datepicker .mantine-UnstyledButton-root {
@@ -39,7 +39,7 @@
 }
 
 .datepicker .mantine-UnstyledButton-root:hover {
-  background: var(--state-overlays-hover);
+  background: var(--stateOverlays-hover);
   color: var(--text-primary);
 }
 
@@ -47,7 +47,7 @@
 .datepicker .mantine-DatePicker-weekday {
   color: var(--text-secondary);
   font-family: unset;
-  padding: var(--spacing-02);
+  padding: 0.5rem;
 }
 
 .datepicker .mantine-DateRangePicker-cell,
@@ -75,7 +75,7 @@
 .datepicker .mantine-DateRangePicker-day:focus-visible,
 .datepicker .mantine-DatePicker-day:hover,
 .datepicker .mantine-DatePicker-day:focus-visible {
-  background: var(--state-overlays-hover);
+  background: var(--stateOverlays-hover);
   border: none;
   color: var(--text-primary);
   outline: none;
@@ -83,7 +83,7 @@
 }
 
 .datepicker .mantine-DateRangePicker-day[data-in-range] {
-  background: var(--state-overlays-selected);
+  background: var(--stateOverlays-selected);
   color: var(--text-primary);
 }
 
@@ -93,8 +93,8 @@
 .datepicker .mantine-DatePicker-day[data-selected],
 .datepicker .mantine-DatePicker-yearPickerControlActive,
 .datepicker .mantine-DatePicker-monthPickerControlActive {
-  background: var(--state-overlays-selected-inverse);
-  color: var(--text-contrast-primary);
+  background: var(--stateOverlays-selected-inverted);
+  color: var(--text-primary-inverted);
   text-decoration: underline;
 }
 
diff --git a/vizro-core/src/vizro/static/css/dropdown.css b/vizro-core/src/vizro/static/css/dropdown.css
index 25d8ef943..1b5b01cad 100644
--- a/vizro-core/src/vizro/static/css/dropdown.css
+++ b/vizro-core/src/vizro/static/css/dropdown.css
@@ -3,8 +3,8 @@
   background-color: var(--field-enabled);
   border: none;
   border-radius: 0;
-  box-shadow: var(--box-shadow-elevation-0);
-  font-size: var(--text-size-02);
+  box-shadow: var(--elevation-0);
+  font-size: 0.875rem;
 }
 
 /* Dropdown menu when clicking on expand arrow */
@@ -12,20 +12,20 @@
   background-color: var(--field-enabled);
   border: none;
   border-radius: 0;
-  box-shadow: var(--box-shadow-elevation-0);
-  font-size: var(--text-size-02);
-  line-height: var(--text-size-05);
+  box-shadow: var(--elevation-0);
+  font-size: 0.875rem;
+  line-height: 1.5rem;
 }
 
 /* Dropdown menu options */
 #dashboard-container .VirtualizedSelectOption {
   color: var(--text-primary);
-  font-weight: var(--text-weight-regular);
+  font-weight: 400;
 }
 
 /* Dropdown menu hover effect */
 #dashboard-container .VirtualizedSelectFocusedOption {
-  background-color: var(--state-overlays-hover);
+  background-color: var(--stateOverlays-hover);
 }
 
 /* Input box for existing values and user input */
@@ -43,7 +43,7 @@
 /* User input */
 #dashboard-container .dash-dropdown .Select-input {
   display: block;
-  height: var(--tag-height);
+  height: 24px;
   margin-left: unset;
 }
 
@@ -58,12 +58,12 @@
 
 /* Border on focus */
 #dashboard-container .is-focused:not(.is-open) > .Select-control {
-  box-shadow: 0 0 0 2px var(--focus-focus) inset;
+  box-shadow: 0 0 0 2px var(--focus) inset;
 }
 
 /* Single-select dropdown only ------------------- */
 #dashboard-container .Select--single .Select-value {
-  padding-left: var(--spacing-02);
+  padding-left: 0.5rem;
 }
 
 .has-value.Select--single > .Select-control .Select-value .Select-value-label,
@@ -78,24 +78,23 @@
 
 /* Tags --------------------------- */
 #dashboard-container .Select--multi .Select-value {
-  background-color: var(--tags-bg-color);
+  background-color: var(--dropdown-label-bg);
   border: 0;
   border-radius: 0;
-  box-shadow: var(--box-shadow-elevation-0);
-  color: var(--tags-text-color);
-  font-size: var(--text-size-02);
-  height: var(--tag-height);
+  box-shadow: var(--elevation-0);
+  color: var(--text-secondary);
+  font-size: 0.875rem;
   height: 100%;
-  letter-spacing: var(--letter-spacing-body-ui-02);
+  letter-spacing: -0.112px;
   margin: 0;
-  padding: 0 var(--spacing-01);
+  padding: 0 0.25rem;
   vertical-align: baseline;
 }
 
 /* Tag: Label */
 #dashboard-container .Select--multi .Select-value-label {
   color: var(--text-primary);
-  line-height: var(--text-size-05);
+  line-height: 1.5rem;
   padding: 0 4px;
 }
 
diff --git a/vizro-core/src/vizro/static/css/layout.css b/vizro-core/src/vizro/static/css/layout.css
index f20e6dddd..996c1108c 100644
--- a/vizro-core/src/vizro/static/css/layout.css
+++ b/vizro-core/src/vizro/static/css/layout.css
@@ -10,24 +10,24 @@
   display: flex;
   flex: 0 0 auto;
   flex-direction: column;
-  gap: var(--spacing-06);
+  gap: 1.5rem;
   overflow: auto;
   padding: 24px 24px 0;
   width: 324px;
 }
 
 #left-side {
-  background-color: var(--surfaces-bg-02);
+  background-color: var(--surfaces-bg02);
   display: flex;
   flex-direction: row;
   height: 100%;
 }
 
 #right-side {
-  background: var(--main-container-bg-color);
+  background: var(--right-side-bg);
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-05);
+  gap: 1.25rem;
   padding: 24px;
   width: 100%;
 }
@@ -42,7 +42,7 @@
 
 #page-header {
   align-items: center;
-  background-color: var(--surfaces-bg-02);
+  background-color: var(--surfaces-bg02);
   display: flex;
   flex-direction: row;
   height: 60px;
@@ -53,12 +53,12 @@
 }
 
 #page-header:not(:empty) {
-  border-bottom: 1px solid var(--border-subtle-alpha-01);
+  border-bottom: 1px solid var(--border-subtleAlpha01);
 }
 
 #page-components {
   overflow: auto;
-  padding-top: var(--spacing-01);
+  padding-top: 0.25rem;
 }
 
 .grid-layout {
@@ -76,13 +76,13 @@
   align-self: stretch;
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-06);
-  padding-bottom: var(--spacing-06);
-  padding-top: var(--spacing-02);
+  gap: 1.5rem;
+  padding-bottom: 1.5rem;
+  padding-top: 0.5rem;
 }
 
 #control-panel:not(:empty) {
-  border-bottom: 1px solid var(--border-subtle-alpha-01);
+  border-bottom: 1px solid var(--border-subtleAlpha01);
 }
 
 .page-error-container {
@@ -125,7 +125,7 @@
 }
 
 #left-sidebar {
-  border-right: 1px solid var(--border-subtle-alpha-01);
+  border-right: 1px solid var(--border-subtleAlpha01);
   display: flex;
   flex-direction: column;
   gap: 40px;
@@ -177,7 +177,7 @@
 }
 
 #collapse-icon.material-symbols-outlined {
-  background-color: var(--tooltip-bg-color);
+  background-color: var(--collapse-icon-bg);
   border-radius: 50%;
   color: var(--text-disabled);
   cursor: pointer;
@@ -185,7 +185,7 @@
 }
 
 #collapse-icon.material-symbols-outlined:hover {
-  color: var(--text-active);
+  color: var(--text-primary);
 }
 
 .collapse-icon-div {
@@ -195,6 +195,12 @@
   width: 0;
 }
 
+.page-component-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
 /* Note: This is only meant as a quick-fix to improve some of the mobile layouts. */
 
 /* Long-term wise this should be replaced by refactoring our CSS code and components to be mobile-compatible. */
diff --git a/vizro-core/src/vizro/static/css/scroll_bar.css b/vizro-core/src/vizro/static/css/scroll_bar.css
index 3c9dc34af..43381bfa6 100644
--- a/vizro-core/src/vizro/static/css/scroll_bar.css
+++ b/vizro-core/src/vizro/static/css/scroll_bar.css
@@ -9,11 +9,11 @@
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: var(--fill-medium-emphasis);
+  background: var(--fill-secondary);
 }
 
 #left-main::-webkit-scrollbar-thumb {
-  border-color: var(--surfaces-bg-02);
+  border-color: var(--surfaces-bg02);
 }
 
 .card::-webkit-scrollbar-thumb,
@@ -23,11 +23,11 @@
 }
 
 #page-components::-webkit-scrollbar-thumb {
-  border-color: var(--main-container-bg-color);
+  border-color: var(--right-side-bg);
 }
 
 .table-container::-webkit-scrollbar-thumb {
-  border-color: var(--main-container-bg-color);
+  border-color: var(--right-side-bg);
 }
 
 /* Can't control thumb color so hover is turned off */
diff --git a/vizro-core/src/vizro/static/css/slider.css b/vizro-core/src/vizro/static/css/slider.css
index c3e936efc..db27caf43 100644
--- a/vizro-core/src/vizro/static/css/slider.css
+++ b/vizro-core/src/vizro/static/css/slider.css
@@ -5,16 +5,16 @@
 
 .rc-slider-rail,
 .rc-slider-track {
-  background-color: var(--slider-background-color);
+  background-color: var(--slider-rail-bg);
   height: 2px;
 }
 
 .rc-slider-track {
-  background-color: var(--fill-on-active);
+  background-color: var(--fill-active);
 }
 
 .rc-slider-dot {
-  background-color: var(--slider-background-color);
+  background-color: var(--slider-rail-bg);
   border: var(--field-enabled);
   bottom: 0;
   height: 6px;
@@ -22,16 +22,16 @@
 }
 
 .rc-slider-dot-active {
-  background-color: var(--fill-on-active);
+  background-color: var(--fill-active);
 }
 
 .rc-slider-handle,
 .rc-slider-handle:hover,
 .rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging,
 .rc-slider-handle-click-focused:focus {
-  background-color: var(--surfaces-bg-01);
-  border: solid 6px var(--fill-on-active);
-  border-color: var(--fill-on-active);
+  background-color: var(--surfaces-bg01);
+  border: solid 6px var(--fill-active);
+  border-color: var(--fill-active);
   border-radius: 100%;
   height: 16px;
   margin: -8px 0 0;
@@ -41,7 +41,7 @@
 
 .rc-slider-handle:hover,
 .rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging {
-  border: solid 4px var(--fill-on-active);
+  border: solid 4px var(--fill-active);
   box-shadow: unset;
   cursor: context-menu;
 }
@@ -51,7 +51,7 @@
 }
 
 .rc-slider-handle:active {
-  border: solid 6px var(--fill-on-active);
+  border: solid 6px var(--fill-active);
   box-shadow: unset;
   cursor: grabbing;
   height: 16px;
@@ -61,14 +61,14 @@
 
 .rc-slider-mark-text {
   color: var(--text-secondary);
-  font-size: var(--text-size-01);
-  line-height: var(--text-size-02);
-  margin-top: var(--spacing-01);
+  font-size: 0.75rem;
+  line-height: 0.875rem;
+  margin-top: 0.25rem;
   min-width: 44px;
 }
 
 .rc-slider-mark-text-active {
-  color: var(--fill-on-active);
+  color: var(--fill-active);
 }
 
 .slider-track-with-marks,
@@ -96,7 +96,7 @@ input.dash-input:invalid {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  line-height: var(--text-size-03);
+  line-height: 1rem;
 }
 
 .slider-label-input label {
@@ -107,24 +107,24 @@ input.dash-input:invalid {
 .slider-text-input-container {
   display: flex;
   flex-direction: row;
-  gap: var(--spacing-01);
-  margin-bottom: var(--spacing-03);
+  gap: 0.25rem;
+  margin-bottom: 0.75rem;
 }
 
 .slider-text-input-field {
   background-color: transparent;
   color: var(--text-secondary);
-  font-size: var(--text-size-02);
+  font-size: 0.875rem;
   max-width: 80px; /* required for Mozilla */
   padding: 0;
   text-align: center;
   text-decoration: underline;
-  text-decoration-color: var(--border-subtle-alpha-01);
+  text-decoration-color: var(--border-subtleAlpha01);
 }
 
 .slider-text-input-range-separator {
   color: var(--text-secondary);
-  font-size: var(--text-size-02);
+  font-size: 0.875rem;
 }
 
 /* To remove number input spin box */
diff --git a/vizro-core/src/vizro/static/css/table.css b/vizro-core/src/vizro/static/css/table.css
index a1fb896f6..e6e876496 100644
--- a/vizro-core/src/vizro/static/css/table.css
+++ b/vizro-core/src/vizro/static/css/table.css
@@ -11,7 +11,7 @@
   .dash-spreadsheet-container
   .dash-spreadsheet-inner
   th {
-  background-color: var(--main-container-bg-color);
+  background-color: var(--right-side-bg);
   color: var(--text-primary);
   padding: 10px 0;
 }
@@ -21,7 +21,7 @@
   .dash-spreadsheet-container
   .dash-spreadsheet-inner
   td {
-  background-color: var(--main-container-bg-color);
+  background-color: var(--right-side-bg);
   color: var(--text-primary);
 }
 
@@ -30,7 +30,7 @@
   .dash-spreadsheet-container
   .dash-spreadsheet-inner
   table {
-  --hover: var(--main-container-bg-color);
+  --hover: var(--right-side-bg);
 
   width: 100%;
 }
diff --git a/vizro-core/src/vizro/static/css/tabs.css b/vizro-core/src/vizro/static/css/tabs.css
index 2e49d1c21..1c4f03ab1 100644
--- a/vizro-core/src/vizro/static/css/tabs.css
+++ b/vizro-core/src/vizro/static/css/tabs.css
@@ -8,7 +8,7 @@
 .tabs-list {
   align-items: flex-start;
   align-self: stretch;
-  border-bottom: 1px solid var(--border-subtle-alpha-01);
+  border-bottom: 1px solid var(--border-subtleAlpha01);
   display: flex;
   flex-wrap: nowrap;
   gap: 16px;
@@ -37,21 +37,22 @@
 
 .tab-title:hover {
   background-color: transparent;
-  border-bottom: 1px solid var(--text-active);
+  border-bottom: 1px solid var(--border-hover);
+  color: var(--text-primaryHover);
 }
 
 .tab-title[data-active] {
-  border-bottom: 1px solid var(--text-active);
-  color: var(--text-active);
+  border-bottom: 1px solid var(--border-selected);
+  color: var(--text-primary);
 }
 
 .tab-title[data-active]:hover {
   background-color: transparent;
-  border-color: 1px solid var(--text-active);
+  border-color: 1px solid var(--border-selected);
 }
 
 .tab-title[data-active] .mantine-Tabs-tabLabel {
-  color: var(--text-active);
+  color: var(--text-primary);
 }
 
 .tab-content > .page-component-container > .container-title {
diff --git a/vizro-core/src/vizro/static/css/toggle.css b/vizro-core/src/vizro/static/css/toggle.css
index 5158e4c16..2759aa182 100644
--- a/vizro-core/src/vizro/static/css/toggle.css
+++ b/vizro-core/src/vizro/static/css/toggle.css
@@ -12,7 +12,7 @@
 }
 
 #dashboard-container .mantine-Switch-track:focus {
-  border: 2px solid var(--focus-focus);
+  border: 2px solid var(--focus);
 }
 
 #dashboard-container .mantine-Switch-input {
@@ -26,14 +26,14 @@
 }
 
 #dashboard-container .mantine-Switch-thumb {
-  background-color: var(--fill-medium-emphasis);
+  background-color: var(--fill-secondary);
   border: none;
   height: 10px;
   width: 10px;
 }
 
 #dashboard-container input:checked + * > .mantine-11dx59s {
-  background: var(--text-contrast-primary);
+  background: var(--text-primary-inverted);
   left: calc(100% - 12px);
 }
 
diff --git a/vizro-core/src/vizro/static/css/token_names.css b/vizro-core/src/vizro/static/css/token_names.css
deleted file mode 100644
index 589269228..000000000
--- a/vizro-core/src/vizro/static/css/token_names.css
+++ /dev/null
@@ -1,89 +0,0 @@
-:root {
-  --primary-dark-100: #333640;
-  --primary-dark-200: #2f323c;
-  --primary-dark-300: #2b2e39;
-  --primary-dark-400: #272a35;
-  --primary-dark-500: #232632;
-  --primary-dark-600: #1f222e;
-  --primary-dark-700: #1b1e2a;
-  --primary-dark-800: #181b26;
-  --primary-dark-900: #141721;
-  --fill-dark-mode-active: rgba(255, 255, 255, 0.88);
-  --surfaces-dark-mode-bg-01: rgba(35, 38, 50, 1);
-  --surfaces-dark-mode-bg-02: rgba(27, 30, 42, 1);
-  --surfaces-dark-mode-bg-03: rgba(20, 23, 33, 1);
-  --surfaces-dark-mode-bg-card: rgba(35, 38, 50, 1);
-  --border-dark-mode-disabled: rgba(255, 255, 255, 0.3);
-  --field-dark-mode-disabled: rgba(240, 241, 242, 1);
-  --fill-dark-mode-disabled: rgba(255, 255, 255, 0.3);
-  --text-dark-mode-disabled: rgba(255, 255, 255, 0.3);
-  --border-dark-mode-enabled: rgba(255, 255, 255, 0.6);
-  --field-dark-mode-enabled: rgba(43, 46, 57, 1);
-  --status-dark-mode-error: rgba(245, 101, 101, 1);
-  --border-dark-mode-hover: rgba(255, 255, 255, 0.88);
-  --field-dark-mode-hover: rgba(55, 58, 68, 1);
-  --fill-dark-mode-hover-selected: rgba(255, 255, 255, 1);
-  --status-dark-mode-information: rgba(0, 180, 255, 1);
-  --fill-dark-mode-medium-emphasis: rgba(255, 255, 255, 0.6);
-  --text-dark-mode-placeholder: rgba(255, 255, 255, 0.38);
-  --text-dark-mode-primary: rgba(255, 255, 255, 0.88);
-  --text-dark-mode-secondary: rgba(255, 255, 255, 0.6);
-  --border-dark-mode-selected: #ffffff;
-  --fill-dark-mode-subtle: rgba(255, 255, 255, 0.1);
-  --border-dark-mode-subtle-alpha-01: rgba(255, 255, 255, 0.1);
-  --border-dark-mode-subtle-alpha-02: rgba(255, 255, 255, 0.16);
-  --status-dark-mode-success: rgba(64, 216, 110, 1);
-  --tags-dark-mode-text-color: rgba(255, 255, 255, 0.6);
-  --status-dark-mode-warning: rgba(255, 193, 7, 1);
-  --primary-light-100: #fafafb;
-  --primary-light-200: #f5f6f6;
-  --primary-light-300: #f2f3f4;
-  --primary-light-400: #ebedee;
-  --primary-light-50: #ffffff;
-  --primary-light-500: #e6e8ea;
-  --primary-light-600: #e2e4e6;
-  --primary-light-700: #dddfe1;
-  --primary-light-800: #d8dadd;
-  --primary-light-900: #d3d6d9;
-  --fill-light-mode-active: rgba(20, 23, 33, 0.88);
-  --surfaces-light-mode-bg-01: rgba(255, 255, 255, 1);
-  --surfaces-light-mode-bg-02: rgba(245, 246, 246, 1);
-  --surfaces-light-mode-bg-03: rgba(230, 232, 234, 1);
-  --surfaces-light-mode-bg-card: rgba(245, 246, 246, 1);
-  --border-light-mode-disabled: rgba(20, 23, 33, 0.3);
-  --field-light-mode-disabled: rgba(240, 241, 242, 1);
-  --fill-light-mode-disabled: rgba(20, 23, 33, 0.3);
-  --text-light-mode-disabled: rgba(20, 23, 33, 0.3);
-  --border-light-mode-enabled: rgba(20, 23, 33, 0.6);
-  --field-light-mode-enabled: rgba(250, 250, 251, 1);
-  --status-light-mode-error: rgba(240, 59, 58, 1);
-  --border-light-mode-hover: rgba(20, 23, 33, 0.88);
-  --field-light-mode-hover: rgba(255, 255, 255, 1);
-  --fill-light-mode-hover-selected: rgba(20, 23, 33, 1);
-  --status-light-mode-information: rgba(0, 158, 255, 1);
-  --fill-light-mode-medium-emphasis: rgba(20, 23, 33, 0.6);
-  --text-light-mode-placeholder: rgba(20, 23, 33, 0.38);
-  --text-light-mode-primary: rgba(20, 23, 33, 0.88);
-  --text-light-mode-secondary: rgba(20, 23, 33, 0.6);
-  --border-light-mode-selected: #141721;
-  --fill-light-mode-subtle: rgba(0, 0, 0, 0.1);
-  --border-light-mode-subtle-alpha-01: rgba(20, 23, 33, 0.1);
-  --border-light-mode-subtle-alpha-02: rgba(20, 23, 33, 0.16);
-  --status-light-mode-success: rgba(38, 191, 86, 1);
-  --tags-light-mode-text-color: rgba(255, 255, 255, 0.6);
-  --status-light-mode-warning: rgba(241, 124, 2, 1);
-  --overlays-on-light-ui-high-contrast: rgba(239, 240, 248, 0.88);
-  --overlays-on-light-ui-medium-contrast: rgba(239, 240, 248, 0.6);
-  --state-overlays-dark-mode-active: rgba(255, 255, 255, 0.08);
-  --state-overlays-dark-mode-enable: rgba(255, 255, 255, 0);
-  --state-overlays-dark-mode-hover: rgba(255, 255, 255, 0.04);
-  --state-overlays-dark-mode-selected: rgba(255, 255, 255, 0.1);
-  --state-overlays-dark-mode-selected-inverse: #ffffff;
-  --state-overlays-dark-mode-selected-hover: rgba(255, 255, 255, 0.16);
-  --state-overlays-light-mode-active: rgba(20, 23, 33, 0.12);
-  --state-overlays-light-mode-enable: rgba(20, 23, 33, 0);
-  --state-overlays-light-mode-hover: rgba(20, 23, 33, 0.06);
-  --state-overlays-light-mode-selected: rgba(20, 23, 33, 0.08);
-  --state-overlays-light-mode-selected-inverse: #141721;
-  --state-overlays-light-mode-selected-hover: rgba(20, 23, 33, 0.24);
-}
diff --git a/vizro-core/src/vizro/static/css/variables.css b/vizro-core/src/vizro/static/css/variables.css
deleted file mode 100644
index 20ebc078c..000000000
--- a/vizro-core/src/vizro/static/css/variables.css
+++ /dev/null
@@ -1,167 +0,0 @@
-/* Add variables here that are the same in dark and light */
-:root {
-  --spacing-01: 4px;
-  --spacing-02: 8px;
-  --spacing-03: 12px;
-  --spacing-04: 16px;
-  --spacing-05: 20px;
-  --spacing-06: 24px;
-  --spacing-07: 28px;
-  --spacing-08: 32px;
-  --tag-height: 24px;
-  --text-size-01: 12px;
-  --text-size-02: 14px;
-  --text-size-03: 16px;
-  --text-size-04: 20px;
-  --text-size-05: 24px;
-  --text-size-06: 28px;
-  --text-size-07: 32px;
-  --letter-spacing-body-edit-01: -0.032px;
-  --letter-spacing-body-edit-02: -0.028px;
-  --letter-spacing-body-link-02: -0.056px;
-  --letter-spacing-body-ui-01: -0.128px;
-  --letter-spacing-body-ui-02: -0.112px;
-  --letter-spacing-heading-h1: -0.096px;
-  --letter-spacing-heading-h4: -0.016px;
-  --letter-spacing-help-text: 0.024px;
-  --text-weight-light: 300;
-  --text-weight-regular: 400;
-  --text-weight-semibold: 600;
-}
-
-/* Ensure dark and light have same list of variables (only color variables) */
-[data-bs-theme="dark"] {
-  --fill-active: var(--fill-dark-mode-active);
-  --text-active: rgba(255, 255, 255, 1);
-  --slider-background-color: #373a44;
-  --surfaces-bg-01: var(--surfaces-dark-mode-bg-01);
-  --surfaces-bg-02: var(--surfaces-dark-mode-bg-02);
-  --surfaces-bg-03: var(--surfaces-dark-mode-bg-03);
-  --surfaces-bg-card: var(--surfaces-dark-mode-bg-card);
-  --tags-bg-color: #181b26;
-  --tooltip-bg-color: var(--primary-dark-500);
-  --main-container-bg-color: rgba(20, 23, 33, 1);
-  --fill-contrast-hover-selected: rgba(20, 23, 33, 1);
-  --text-contrast-primary: rgba(20, 23, 33, 0.88);
-  --border-contrast-selected: rgba(20, 23, 33, 1);
-  --border-disabled: var(--border-dark-mode-disabled);
-  --field-disabled: var(--field-dark-mode-disabled);
-  --text-disabled: var(--text-dark-mode-disabled);
-  --border-enabled: var(--border-dark-mode-enabled);
-  --field-enabled: var(--field-dark-mode-enabled);
-  --status-error: var(--status-dark-mode-error);
-  --focus-focus: rgba(0, 133, 255, 0.6);
-  --status-focus: rgba(0, 133, 255, 0.6);
-  --background-hover: rgba(255, 255, 255, 0.08);
-  --border-hover: var(--border-dark-mode-hover);
-  --field-hover: var(--field-dark-mode-hover);
-  --fill-hover-selected: var(--fill-dark-mode-hover-selected);
-  --status-information: var(--status-dark-mode-information);
-  --fill-medium-emphasis: var(--fill-dark-mode-medium-emphasis);
-  --fill-on-active: rgba(255, 255, 255, 1);
-  --state-overlays-active: var(--state-overlays-dark-mode-active);
-  --state-overlays-contrast-hover: var(--state-overlays-light-mode-hover);
-  --state-overlays-enable: var(--state-overlays-dark-mode-enable);
-  --state-overlays-hover: var(--state-overlays-dark-mode-hover);
-  --state-overlays-selected: var(--state-overlays-dark-mode-selected);
-  --state-overlays-selected-inverse: var(
-    --state-overlays-dark-mode-selected-inverse
-  );
-  --state-overlays-selected-hover: var(
-    --state-overlays-dark-mode-selected-hover
-  );
-  --text-placeholder: var(--text-dark-mode-placeholder);
-  --text-primary: var(--text-dark-mode-primary);
-  --text-secondary: var(--text-dark-mode-secondary);
-  --background-selected: rgba(0, 0, 0, 0.12);
-  --border-selected: var(--border-dark-mode-selected);
-  --box-shadow-elevation-0: 0px 1px 1px 0px rgba(20, 23, 33, 0.12),
-    0px 0px 1px 1px rgba(20, 23, 33, 0.08);
-  --box-shadow-elevation-1: 0px 2px 4px -1px rgba(20, 23, 33, 0.38),
-    0px 1px 2px -1px rgba(20, 23, 33, 0.88);
-  --box-shadow-elevation-card: 0px 2px 2px -1px rgba(20, 23, 33, 0.38),
-    0px 2px 6px -1px rgba(20, 23, 33, 0.16);
-  --box-shadow-elevation-card-hover: 0px 2px 2px 0px rgba(20, 23, 33, 0.24),
-    0px 4px 8px 1px rgba(20, 23, 33, 0.12);
-  --fill-subtle: var(--fill-dark-mode-subtle);
-  --border-subtle-alpha-01: var(--border-dark-mode-subtle-alpha-01);
-  --border-subtle-alpha-02: var(--border-dark-mode-subtle-alpha-02);
-  --status-success: var(--status-dark-mode-success);
-  --tags-text-color: var(--tags-dark-mode-text-color);
-  --status-warning: var(--status-dark-mode-warning);
-  --text-code-string: #95c2e7;
-  --text-code-keyword: #f4766e;
-  --text-code-meta: #c8ace1;
-  --text-code-type: #f69d50;
-  --text-code-literal: #6bb5fd;
-}
-
-[data-bs-theme="light"] {
-  --fill-accordion-button: invert(64%) sepia(0%) saturate(1375%);
-  --fill-active: var(--fill-light-mode-active);
-  --text-active: rgba(20, 23, 33, 1);
-  --slider-background-color: #d3d6d9;
-  --surfaces-bg-01: var(--surfaces-light-mode-bg-01);
-  --surfaces-bg-02: var(--surfaces-light-mode-bg-02);
-  --surfaces-bg-03: var(--surfaces-light-mode-bg-03);
-  --surfaces-bg-card: var(--surfaces-light-mode-bg-card);
-  --tags-bg-color: var(--primary-light-300);
-  --tooltip-bg-color: var(--primary-light-100);
-  --main-container-bg-color: rgba(255, 255, 255, 1);
-  --fill-contrast-hover-selected: rgba(255, 255, 255, 1);
-  --text-contrast-primary: rgba(255, 255, 255, 0.88);
-  --border-contrast-selected: rgba(255, 255, 255, 1);
-  --border-disabled: var(--border-light-mode-disabled);
-  --field-disabled: var(--field-light-mode-disabled);
-  --text-disabled: var(--text-light-mode-disabled);
-  --border-enabled: var(--border-light-mode-enabled);
-  --field-enabled: var(--field-light-mode-enabled);
-  --status-error: var(--status-light-mode-error);
-  --focus-focus: rgba(0, 133, 255, 0.6);
-  --status-focus: rgba(0, 133, 255, 0.6);
-  --background-hover: var(--overlays-on-light-ui-medium-contrast);
-  --border-hover: var(--border-light-mode-hover);
-  --field-hover: var(--field-light-mode-hover);
-  --fill-hover-selected: var(--fill-light-mode-hover-selected);
-  --fill-icon-image-card: invert(64%) sepia(0%) saturate(1375%)
-    hue-rotate(247deg) brightness(95%) contrast(90%);
-  --status-information: var(--status-light-mode-information);
-  --fill-medium-emphasis: var(--fill-light-mode-medium-emphasis);
-  --fill-on-active: rgba(0, 0, 0, 1);
-  --state-overlays-active: var(--state-overlays-light-mode-active);
-  --state-overlays-contrast-hover: var(--state-overlays-dark-mode-hover);
-  --state-overlays-enable: var(--state-overlays-light-mode-enable);
-  --state-overlays-hover: var(--state-overlays-light-mode-hover);
-  --state-overlays-selected: var(--state-overlays-light-mode-selected);
-  --state-overlays-selected-inverse: var(
-    --state-overlays-light-mode-selected-inverse
-  );
-  --state-overlays-selected-hover: var(
-    --state-overlays-light-mode-selected-hover
-  );
-  --text-placeholder: var(--text-light-mode-placeholder);
-  --text-primary: var(--text-light-mode-primary);
-  --text-secondary: var(--text-light-mode-secondary);
-  --background-selected: var(--overlays-on-light-ui-high-contrast);
-  --border-selected: var(--border-light-mode-selected);
-  --box-shadow-elevation-0: 0px 1px 1px 0px rgba(20, 23, 33, 0.12),
-    0px 0px 1px 1px rgba(20, 23, 33, 0.08);
-  --box-shadow-elevation-1: 0px 2px 4px -1px rgba(20, 23, 33, 0.12),
-    0px 1px 2px -1px rgba(20, 23, 33, 0.08);
-  --box-shadow-elevation-card: 0px 1px 1px 0px rgba(20, 23, 33, 0.08),
-    0px 0px 1px 0px rgba(20, 23, 33, 0.38);
-  --box-shadow-elevation-card-hover: 0px 2px 2px 0px rgba(20, 23, 33, 0.24),
-    0px 4px 8px 1px rgba(20, 23, 33, 0.12);
-  --fill-subtle: var(--fill-light-mode-subtle);
-  --border-subtle-alpha-01: var(--border-light-mode-subtle-alpha-01);
-  --border-subtle-alpha-02: var(--border-light-mode-subtle-alpha-02);
-  --status-success: var(--status-light-mode-success);
-  --tags-text-color: var(--tags-light-mode-text-color);
-  --status-warning: var(--status-light-mode-warning);
-  --inverse-color: invert(100%);
-  --text-code-string: #0a3069;
-  --text-code-keyword: #d12d39;
-  --text-code-meta: #6f42c1;
-  --text-code-type: #f69d50;
-  --text-code-literal: #005cc5;
-}
diff --git a/vizro-core/src/vizro/tables/_dash_table.py b/vizro-core/src/vizro/tables/_dash_table.py
index 4335b68ef..f3b93f16b 100644
--- a/vizro-core/src/vizro/tables/_dash_table.py
+++ b/vizro-core/src/vizro/tables/_dash_table.py
@@ -31,17 +31,17 @@ def dash_data_table(data_frame: pd.DataFrame, **kwargs: Any) -> dash_table.DataT
         "columns": [{"name": col, "id": col} for col in data_frame.columns],
         "style_as_list_view": True,
         "style_cell": {"position": "static"},
-        "style_data": {"border_bottom": "1px solid var(--border-subtle-alpha-01)", "height": "40px"},
+        "style_data": {"border_bottom": "1px solid var(--border-subtleAlpha01)", "height": "40px"},
         "style_header": {
-            "border_bottom": "1px solid var(--state-overlays-selected-hover)",
-            "border_top": "1px solid var(--main-container-bg-color)",
+            "border_bottom": "1px solid var(--stateOverlays-selectedHover)",
+            "border_top": "1px solid var(--right-side-bg)",
             "height": "32px",
         },
         "style_data_conditional": [
             {
                 "if": {"state": "active"},
-                "backgroundColor": "var(--state-overlays-selected)",
-                "border": "1px solid var(--state-overlays-selected)",
+                "backgroundColor": "var(--stateOverlays-selected)",
+                "border": "1px solid var(--stateOverlays-selected)",
             }
         ],
     }
diff --git a/vizro-core/tests/unit/vizro/tables/test_dash_table.py b/vizro-core/tests/unit/vizro/tables/test_dash_table.py
index 490610618..d903050cb 100644
--- a/vizro-core/tests/unit/vizro/tables/test_dash_table.py
+++ b/vizro-core/tests/unit/vizro/tables/test_dash_table.py
@@ -36,17 +36,17 @@ def test_dash_data_table(self):
                 data=data_in_table,
                 style_as_list_view=True,
                 style_cell={"position": "static"},
-                style_data={"border_bottom": "1px solid var(--border-subtle-alpha-01)", "height": "40px"},
+                style_data={"border_bottom": "1px solid var(--border-subtleAlpha01)", "height": "40px"},
                 style_header={
-                    "border_bottom": "1px solid var(--state-overlays-selected-hover)",
-                    "border_top": "1px solid var(--main-container-bg-color)",
+                    "border_bottom": "1px solid var(--stateOverlays-selectedHover)",
+                    "border_top": "1px solid var(--right-side-bg)",
                     "height": "32px",
                 },
                 style_data_conditional=[
                     {
                         "if": {"state": "active"},
-                        "backgroundColor": "var(--state-overlays-selected)",
-                        "border": "1px solid var(--state-overlays-selected)",
+                        "backgroundColor": "var(--stateOverlays-selected)",
+                        "border": "1px solid var(--stateOverlays-selected)",
                     }
                 ],
             ),