From 7e4d12d8d0f73f98dd7dd7041da95123902b3a6f Mon Sep 17 00:00:00 2001
From: Michael Klein <michael@firstiwaslike.com>
Date: Tue, 25 Oct 2022 14:03:11 +0200
Subject: [PATCH] Disable custom color utilities based on hds colors

We want to use the utility classes that HDS provides instead.
---
 ui/packages/consul-ui/tailwind.config.js | 39 ++----------------------
 1 file changed, 2 insertions(+), 37 deletions(-)

diff --git a/ui/packages/consul-ui/tailwind.config.js b/ui/packages/consul-ui/tailwind.config.js
index 69ae42f3e4..1b9f46ec4c 100644
--- a/ui/packages/consul-ui/tailwind.config.js
+++ b/ui/packages/consul-ui/tailwind.config.js
@@ -1,44 +1,9 @@
-/**
- * A function that parses the `tokens.css`-file from `@hashicorp/design-system-tokens`
- * and creates a map out of it that can be used to build up a color configuration
- * in `tailwind.config.js`.
- *
- * @param {string} tokensPath - The path to `tokens.css` from `@hashicorp/design-system-tokens`
- * @returns { { [string]: string } } An object that contains color names as keys and color values as values.
- */
-function colorMapFromTokens(tokensPath) {
-  const css = require('css');
-  const path = require('path');
-  const fs = require('fs');
-
-  const hdsTokensPath = path.join(__dirname, tokensPath);
-
-  const tokensFile = fs.readFileSync(hdsTokensPath, {
-    encoding: 'utf8',
-    flag: 'r',
-  });
-
-  const ast = css.parse(tokensFile);
-  const rootVars = ast.stylesheet.rules.filter((r) => r.type !== 'comment')[0];
-
-  // filter out all colors and then create a map out of them
-  const vars = rootVars.declarations.filter((d) => d.type !== 'comment');
-  const colorPropertyNameCleanupRegex = /^--token-color-(palette-)?/;
-  const colors = vars.filter((d) => d.property.match(/^--token-color-/));
-
-  return colors.reduce((acc, d) => {
-    acc[d.property.replace(colorPropertyNameCleanupRegex, 'hds-')] = d.value;
-    return acc;
-  }, {});
-}
-
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['../**/*.{html.js,hbs,mdx}'],
   theme: {
-    colors: colorMapFromTokens(
-      '../../node_modules/@hashicorp/design-system-tokens/dist/products/css/tokens.css'
-    ),
+    // disable all color utilities - we want to use HDS instead
+    colors: {},
     extend: {},
   },
   plugins: [],