diff --git a/.storybook/application.css b/.storybook/application.css
index 1e82818f7..7bb271778 100644
--- a/.storybook/application.css
+++ b/.storybook/application.css
@@ -34,27 +34,27 @@
@apply bg-neutral-1300;
}
-.sb-show-main.dark .sb-bar,
-.sb-show-main.dark .sb-anchor > p > code {
+.ui-theme-dark .sb-bar,
+.ui-theme-dark .sb-anchor > p > code {
@apply bg-neutral-1200;
}
-.sb-show-main.dark .docblock-code-toggle {
+.ui-theme-dark .docblock-code-toggle {
@apply bg-neutral-1200 text-neutral-000;
}
-.sb-show-main.dark .sbdocs h1,
-.sb-show-main.dark .sb-anchor > h3,
-.sb-show-main.dark .sb-anchor > p,
-.sb-show-main.dark .sb-anchor > p > code {
+.ui-theme-dark .sbdocs-content > *,
+.ui-theme-dark .sb-anchor > h3,
+.ui-theme-dark .sb-anchor > p,
+.ui-theme-dark .sb-anchor > p > code {
@apply text-neutral-000;
}
-.sb-show-main.dark .sbdocs td,
-.sb-show-main.dark .sbdocs th {
+.ui-theme-dark .sbdocs td,
+.ui-theme-dark .sbdocs th {
@apply text-neutral-200;
}
-.sb-show-main.dark .sbdocs td {
- @apply bg-neutral-1100 text-neutral-200;
+.ui-theme-dark .sbdocs td {
+ @apply !bg-neutral-1100 text-neutral-200;
}
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 390e87e5e..96a24aa1c 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -52,8 +52,8 @@ const preview = {
brandImage: brandImage,
},
stylePreview: true,
- darkClass: ["dark"],
- lightClass: ["light"],
+ darkClass: ["ui-theme-dark"],
+ lightClass: ["ui-theme-light"],
},
},
loaders: [mswLoader],
diff --git a/scripts/compute-colors.ts b/scripts/compute-colors.ts
deleted file mode 100644
index 95e8a2511..000000000
--- a/scripts/compute-colors.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import fs from "fs";
-import path from "path";
-import { invertTailwindClassVariant } from "../src/core/styles/colors/utils";
-import { colors, prefixes, variants } from "../src/core/styles/colors/types";
-
-const directoryPath = path.join(__dirname, "../src");
-const outputPath = path.join(
- __dirname,
- "../src/core/styles/colors",
- "computed-colors.json",
-);
-
-const joinedVariants = variants.join("|");
-const joinedPrefixes = prefixes.join("|");
-const joinedColors = colors.join("|");
-const pattern = `themeColor\\("((?:${joinedVariants}-)(${joinedPrefixes})-(${joinedColors})-(000|[1-9]00|1[0-3]00))"\\)`;
-const regex = new RegExp(pattern, "g");
-
-const findStringInFiles = (dir: string) => {
- const results: string[] = [];
-
- const readDirectory = (dir: string) => {
- let files: string[];
- try {
- files = fs.readdirSync(dir);
- } catch (error) {
- console.error(`Error reading directory ${dir}:`, error);
- return;
- }
-
- files.forEach((file) => {
- const filePath = path.join(dir, file);
- let stat;
- try {
- stat = fs.statSync(filePath);
- } catch (error) {
- console.error(`Error accessing ${filePath}:`, error);
- return;
- }
-
- if (stat.isDirectory()) {
- readDirectory(filePath);
- } else if (filePath.endsWith(".tsx")) {
- let content = "";
- try {
- content = fs.readFileSync(filePath, "utf-8");
- const matches = [...content.matchAll(regex)].map((match) => match[1]);
-
- if (matches.length > 0) {
- results.push(...matches);
- }
- } catch (error) {
- console.error(`Error reading file ${filePath}:`, error);
- return;
- }
- }
- });
- };
-
- readDirectory(dir);
- return Array.from(new Set(results)).sort();
-};
-
-const matches = findStringInFiles(directoryPath);
-
-const flippedMatches = matches.map((match) =>
- invertTailwindClassVariant(match),
-);
-
-try {
- const outputDir = path.dirname(outputPath);
- if (!fs.existsSync(outputDir)) {
- fs.mkdirSync(outputDir, { recursive: true });
- }
- fs.writeFileSync(outputPath, JSON.stringify(flippedMatches));
- console.log(
- `🎨 Tailwind theme classes have been computed and written to JSON files.`,
- );
-} catch (error) {
- console.error(`Error persisting computed colors:`, error);
-}
diff --git a/src/core/ContactFooter/__snapshots__/ContactFooter.stories.tsx.snap b/src/core/ContactFooter/__snapshots__/ContactFooter.stories.tsx.snap
index 9678682c5..82458df10 100644
--- a/src/core/ContactFooter/__snapshots__/ContactFooter.stories.tsx.snap
+++ b/src/core/ContactFooter/__snapshots__/ContactFooter.stories.tsx.snap
@@ -6,7 +6,7 @@ exports[`JS Components/Contact Footer Default smoke-test 1`] = `
>