fix(web): resolve theme colors for runtime consumers

Author: divyanshu-iitian

CHANGELOG.md

@@ -8,8 +8,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 
 ### Fixed
-- Applied Tailwind opacity modifiers to CSS-variable theme colors. [#1485](https://github.com/sourcebot-dev/sourcebot/pull/1485)
 - Upgraded `tar` to `^7.5.20`. [#1474](https://github.com/sourcebot-dev/sourcebot/pull/1474)
+- Applied Tailwind opacity modifiers to CSS-variable theme colors. [#1485](https://github.com/sourcebot-dev/sourcebot/pull/1485)
 
 ### Changed
 - Reduced Sentry span sampling to 10% outside development. [#1475](https://github.com/sourcebot-dev/sourcebot/pull/1475)

packages/web/src/tailwind.ts

@@ -1,5 +1,38 @@
 import resolveConfig from 'tailwindcss/resolveConfig';
 import tailwindConfig from '../tailwind.config';
 
-const tailwind = resolveConfig(tailwindConfig);
-export default tailwind;
+// Tailwind substitutes this placeholder only while generating utilities.
+// Runtime consumers need a concrete opaque value instead.
+const resolveRuntimeAlphaValues = <T>(value: T): T => {
+    if (typeof value === 'string') {
+        return value
+            .replaceAll('calc(<alpha-value> * 100%)', '100%')
+            .replaceAll('<alpha-value>', '1') as T;
+    }
+
+    if (Array.isArray(value)) {
+        return value.map(resolveRuntimeAlphaValues) as T;
+    }
+
+    if (value !== null && typeof value === 'object') {
+        return Object.fromEntries(
+            Object.entries(value).map(([key, child]) => [
+                key,
+                resolveRuntimeAlphaValues(child),
+            ]),
+        ) as T;
+    }
+
+    return value;
+};
+
+const resolvedConfig = resolveConfig(tailwindConfig);
+const tailwind = {
+    ...resolvedConfig,
+    theme: {
+        ...resolvedConfig.theme,
+        colors: resolveRuntimeAlphaValues(resolvedConfig.theme.colors),
+    },
+};
+
+export default tailwind;

packages/web/tailwindConfig.test.ts

@@ -2,6 +2,7 @@ import postcss from "postcss";
 import tailwindcss from "tailwindcss";
 import { describe, expect, test } from "vitest";
 
+import tailwind from "./src/tailwind";
 import tailwindConfig from "./tailwind.config";
 
 const compileUtilities = async (classes: string) => {
@@ -34,4 +35,16 @@ describe("Tailwind theme colors", () => {
             "border-color: color-mix(in srgb, var(--border) calc(0.3 * 100%), transparent)",
         );
     });
+
+    test("resolves valid opaque colors for runtime consumers", () => {
+        expect(tailwind.theme.colors.background).toBe(
+            "color-mix(in srgb, var(--background) 100%, transparent)",
+        );
+        expect(tailwind.theme.colors.editor.background).toBe(
+            "color-mix(in srgb, var(--editor-background) 100%, transparent)",
+        );
+        expect(JSON.stringify(tailwind.theme.colors)).not.toContain(
+            "<alpha-value>",
+        );
+    });
 });