diff --git a/scss/core/css/variables.css b/scss/core/css/variables.css
index cf4ee826592..745181fcf71 100644
--- a/scss/core/css/variables.css
+++ b/scss/core/css/variables.css
@@ -98,7 +98,7 @@
   --pgn-color-btn-focus-bg-inverse-outline-info: inherit;
   --pgn-color-btn-focus-bg-outline-info: inherit;
   --pgn-color-btn-focus-bg-inverse-outline-dark: inherit;
-  --pgn-color-btn-focus-bg-outline-dark: unset;
+  --pgn-color-btn-focus-bg-outline-dark: inherit;
   --pgn-color-btn-focus-bg-inverse-outline-danger: inherit;
   --pgn-color-btn-focus-bg-outline-danger: inherit;
   --pgn-color-btn-focus-bg-inverse-outline-brand: inherit;
diff --git a/src/CloseButton/CloseButton.scss b/src/CloseButton/CloseButton.scss
index 02150ab03f9..cde16e1bb33 100644
--- a/src/CloseButton/CloseButton.scss
+++ b/src/CloseButton/CloseButton.scss
@@ -29,4 +29,3 @@ button.close {
 a.close.disabled {
   pointer-events: none;
 }
-
diff --git a/src/Code/Code.scss b/src/Code/Code.scss
index fe80fc48644..5eda59702bb 100644
--- a/src/Code/Code.scss
+++ b/src/Code/Code.scss
@@ -45,4 +45,3 @@ pre {
   max-height: var(--pgn-size-code-pre-scrollable-max-height);
   overflow-y: scroll;
 }
-
diff --git a/src/Dropdown/dropdown-bootstrap.scss b/src/Dropdown/dropdown-bootstrap.scss
index 2245d2cfc9c..7337df53a2f 100644
--- a/src/Dropdown/dropdown-bootstrap.scss
+++ b/src/Dropdown/dropdown-bootstrap.scss
@@ -164,7 +164,6 @@
   display: block;
 }
 
-
 .dropdown-header {
   display: block;
   padding: var(--pgn-spacing-dropdown-padding-header);
diff --git a/www/gatsby-node.js b/www/gatsby-node.js
index 323b36da0be..24d9ddc025f 100644
--- a/www/gatsby-node.js
+++ b/www/gatsby-node.js
@@ -12,7 +12,6 @@ const css = require('css');
 
 const fs = require('fs');
 const { INSIGHTS_PAGES } = require('./src/config');
-const { getThemesSCSSVariables, processComponentSCSSVariables } = require('./theme-utils');
 
 exports.onCreateWebpackConfig = ({ actions }) => {
   actions.setWebpackConfig({
@@ -97,14 +96,10 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
   // Create component detail pages.
   const components = result.data.allMdx.edges;
 
-  const themesSCSSVariables = await getThemesSCSSVariables();
-
   // you'll call `createPage` for each result
   // eslint-disable-next-line no-restricted-syntax
   for (const { node } of components) {
     const componentDir = node.slug.split('/')[0];
-    const variablesPath = path.resolve(__dirname, `../src/${componentDir}/_variables.scss`);
-    let scssVariablesData = {};
     const cssVariablesData = [];
 
     const pathToComponents = fs.readdirSync(`../src/${componentDir}`);
@@ -122,11 +117,6 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
       }
     });
 
-    if (fs.existsSync(variablesPath)) {
-      // eslint-disable-next-line no-await-in-loop
-      scssVariablesData = await processComponentSCSSVariables(variablesPath, themesSCSSVariables);
-    }
-
     createPage({
       // This is the slug you created before
       // (or `node.frontmatter.slug`)
@@ -136,7 +126,7 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
       // You can use the values in this context in
       // our page layout component
       context: {
-        id: node.id, components: node.frontmatter.components || [], scssVariablesData, cssVariablesData,
+        id: node.id, components: node.frontmatter.components || [], cssVariablesData,
       },
     });
   }
diff --git a/www/src/templates/component-page-template.tsx b/www/src/templates/component-page-template.tsx
index 1e4c5b8b2e9..eb1e84cc49c 100644
--- a/www/src/templates/component-page-template.tsx
+++ b/www/src/templates/component-page-template.tsx
@@ -87,7 +87,7 @@ export default function PageTemplate({
 
   const getTocData = () => {
     const tableOfContents = JSON.parse(JSON.stringify(mdx.tableOfContents));
-    if (cssVariablesData.length && !tableOfContents.items?.includes()) {
+    if (cssVariablesData?.length && !tableOfContents.items?.includes()) {
       tableOfContents.items?.push({
         title: cssVariablesTitle,
         url: `#${cssVariablesUrl}`,
diff --git a/www/theme-utils.js b/www/theme-utils.js
deleted file mode 100644
index 7d349c63e17..00000000000
--- a/www/theme-utils.js
+++ /dev/null
@@ -1,138 +0,0 @@
-/**
- * This module contains utilities functions
- * which deal with displaying multiple themes on docs site.
- */
-
-const path = require('path');
-const fs = require('fs');
-const readline = require('readline');
-const { THEMES } = require('./theme-config');
-
-/**
- * Parses SCSS variables stylesheet into JS object of the form {variable: value}
- *
- * @async
- * @param {string} pathToVariables - path to the stylesheet, relative to the node_modules of www project
- * @returns {Promise<Object>} - object populated with stylesheet data
- */
-async function parseSCSSIntoObject(pathToVariables) {
-  const fileStream = fs.createReadStream(pathToVariables);
-  const parsedValues = {};
-
-  const rl = readline.createInterface({
-    input: fileStream,
-    crlfDelay: Infinity,
-  });
-
-  // value of a SCSS variable can span multiple lines unfortunately...
-  // to cover such cases we introduce local variables to store data while
-  // we iterate over lines in the stylesheet
-  let currentVariable = '';
-  let currentValue = '';
-
-  // eslint-disable-next-line no-restricted-syntax
-  for await (const line of rl) {
-    // we encountered new variable
-    if (line.startsWith('$')) {
-      // save stored data about prev variable to resulting object
-      if (currentVariable && currentValue) {
-        parsedValues[currentVariable] = currentValue;
-      }
-      [currentVariable, ...currentValue] = line.split(':');
-      currentValue = `${currentValue.join(':')}\n`;
-    } else {
-      const cleanLine = line.trim();
-      if (cleanLine && !cleanLine.startsWith('//')) {
-        // if the line is not blank and not a comment,
-        // consider it a continuation of the value of the current variable
-        currentValue += `${line}\n`;
-      }
-    }
-  }
-
-  parsedValues[currentVariable] = currentValue;
-
-  return parsedValues;
-}
-
-/**
- * Generates JS object that contains data about SCSS variables of each theme
- *
- * @async
- * @returns {Promise<Object>} - object populated with SCSS variables for each theme
- */
-async function getThemesSCSSVariables() {
-  const themeSCSSVariables = {};
-
-  // eslint-disable-next-line no-restricted-syntax
-  for (const { id, pathToVariables } of THEMES) {
-    if (pathToVariables) {
-      // eslint-disable-next-line no-await-in-loop
-      themeSCSSVariables[id] = await parseSCSSIntoObject(path.resolve(__dirname, 'node_modules', pathToVariables));
-    } else {
-      themeSCSSVariables[id] = {};
-    }
-  }
-
-  return themeSCSSVariables;
-}
-
-/**
- * Generates content of a component's SCSS variables file for each theme.
- *
- * @async
- * @param {string} pathToStylesheet - full path to the stylesheet of the component
- * @param {Object} themesData - object that contains data about SCSS variables for each theme
- * @returns {Promise<{Object}>} - object with computed stylesheet for each theme
- */
-async function processComponentSCSSVariables(pathToStylesheet, themesData) {
-  const scssVariablesData = Object.fromEntries(THEMES.map(({ id }) => [id, '']));
-  const fileStream = fs.createReadStream(pathToStylesheet);
-
-  const rl = readline.createInterface({
-    input: fileStream,
-    crlfDelay: Infinity,
-  });
-
-  let currentVar = '';
-  let currentValue = '';
-
-  /**
-   * Computes current variable's value for each theme and saves it.
-   */
-  function processVariable() {
-    THEMES.forEach(({ id }) => {
-      if (currentVar in themesData[id]) {
-        scssVariablesData[id] += `${currentVar}: ${themesData[id][currentVar]}`;
-      } else {
-        scssVariablesData[id] += `${currentVar}: ${currentValue}`;
-      }
-    });
-  }
-
-  // eslint-disable-next-line no-restricted-syntax
-  for await (const line of rl) {
-    if (line.startsWith('$')) {
-      if (currentVar && currentValue) {
-        processVariable();
-      }
-      [currentVar, ...currentValue] = line.split(':');
-      currentValue = `${currentValue.join(':')}\n`;
-    } else {
-      const cleanLine = line.trim();
-      if (cleanLine && !cleanLine.startsWith('//')) {
-        currentValue += `${line}\n`;
-      }
-    }
-  }
-
-  // last variable was not covered by the loop
-  processVariable();
-
-  return scssVariablesData;
-}
-
-module.exports = {
-  getThemesSCSSVariables,
-  processComponentSCSSVariables,
-};