[V4] How to get access to the theme inside framework files or javascript files.

[whitespacecode]

I'm not sure if this functionality is completely gone now?
https://tailwindcss.com/docs/v4-beta#referencing-theme-values-in-js

But is there any way to access the theme in a js file?

We have a vue component that's generating new company brand theme colors depending on the client main color.
I'm not really sure how we can achieve that now since all the theming is done inside the .css file itself?
Here is some of that code

<script lang="ts">
export default {
    computed: {
        brandColor () {
            return Color(useGeneralStore()?.client?.color ?? '#143756');
        },
        graysCSS () {
            let css = '';

            Object.keys(this.brandGrays).forEach(key => {
                css += `--color-brand-gray-${key}: ${this.channels(this.brandGrays[key])};`
            });

            return css;
        },
        styles () {
            return `
                :root {
                    --color-secondary: ${this.channels(this.secondaryColor)};
                    --color-brand-300: ${this.channels(this.brandColor
                        .desaturate(0.25)
                        .lighten(0.15))};
                    --color-brand-400: ${this.channels(this.brandColor
                        .desaturate(0.125)
                        .lighten(0.075))};
                    --color-brand-500: ${this.channels(this.brandColor)};
                    --color-brand-600: ${this.channels(this.brandColor
                        .desaturate(0.25)
                        .darken(0.15))};
                    --color-brand-700: ${this.channels(this.brandColor
                        .desaturate(0.5)
                        .darken(0.3))};
                    ${this.graysCSS}
                }
            `;
        },
    },
    methods: {
        channels(color) {
            return color.rgb().array().join(' ');
        },
        colorIsNeutral (color) {
            return color.saturationl() < 4
                || color.lightness() > 96
                || color.lightness() < 4;
        }
    },
}
</script>
<template>
    <teleport to="head">
        <component :is="'style'" v-html="styles"></component>
    </teleport>
</template>

We could then use those variables in our tailwind.config.js
And also use resolveConfig again inside other components to get the config and the theme and colors..

function withOpacityValue(variable) {
    return ({ opacityValue }) => {
        if (opacityValue === undefined) {
            return `rgb(var(${variable}))`;
        }
        return `rgb(var(${variable}) / ${opacityValue})`;
    }
}

export default {
    content: [
        './resources/views/client.blade.php',
        './resources/views/nova/*.blade.php',
        './resources/scripts/**/*.{vue,js,ts,jsx,tsx}',
    ],
    theme: {
        extend: {
            colors: {
                'primary-300': withOpacityValue('--color-brand-300'),
                'primary-400': withOpacityValue('--color-brand-400'),
                'primary-500': withOpacityValue('--color-brand-500'),
                'primary-600': withOpacityValue('--color-brand-600'),
                'primary-700': withOpacityValue('--color-brand-700'),

                'primary-gray-100': withOpacityValue('--color-brand-gray-100'),
                'primary-gray-200': withOpacityValue('--color-brand-gray-200'),
                'primary-gray-300': withOpacityValue('--color-brand-gray-300'),
                'primary-gray-400': withOpacityValue('--color-brand-gray-400'),
                'primary-gray-500': withOpacityValue('--color-brand-gray-500'),
                'primary-gray-600': withOpacityValue('--color-brand-gray-600'),
                'primary-gray-700': withOpacityValue('--color-brand-gray-700'),
                'primary-gray-800': withOpacityValue('--color-brand-gray-800'),
                'primary-gray-900': withOpacityValue('--color-brand-gray-900'),

                'secondary': withOpacityValue('--color-secondary'),
            },
        },
    },
};