`--color-primary-N` vs tailwind colors via variables

[amery]

Description

nuxt ui incorrectly assumes tailwind colours are literal values and passes through <alpha-value> when generating its --color-primary-N variables. it also forces particular shades (400 and 500) as DEFAULT, how can I disable this feature?

        <style id="nuxt-ui-colors">
            :root {
                --color-primary-50: rgb(var(--md-primary-50) / <alpha-value>);
                --color-primary-100: rgb(var(--md-primary-100) / <alpha-value>);
                --color-primary-200: rgb(var(--md-primary-200) / <alpha-value>);
                --color-primary-300: rgb(var(--md-primary-300) / <alpha-value>);
                --color-primary-400: rgb(var(--md-primary-400) / <alpha-value>);
                --color-primary-500: rgb(var(--md-primary-500) / <alpha-value>);
                --color-primary-600: rgb(var(--md-primary-600) / <alpha-value>);
                --color-primary-700: rgb(var(--md-primary-700) / <alpha-value>);
                --color-primary-800: rgb(var(--md-primary-800) / <alpha-value>);
                --color-primary-900: rgb(var(--md-primary-900) / <alpha-value>);
                --color-primary-950: rgb(var(--md-primary-950) / <alpha-value>);
                --color-primary-DEFAULT: rgb(var(--md-primary) / <alpha-value>);
                --color-primary-DEFAULT: var(--color-primary-500);
                --color-gray-50: rgb(var(--md-neutral-50) / <alpha-value>);
                --color-gray-100: rgb(var(--md-neutral-100) / <alpha-value>);
                --color-gray-200: rgb(var(--md-neutral-200) / <alpha-value>);
                --color-gray-300: rgb(var(--md-neutral-300) / <alpha-value>);
                --color-gray-400: rgb(var(--md-neutral-400) / <alpha-value>);
                --color-gray-500: rgb(var(--md-neutral-500) / <alpha-value>);
                --color-gray-600: rgb(var(--md-neutral-600) / <alpha-value>);
                --color-gray-700: rgb(var(--md-neutral-700) / <alpha-value>);
                --color-gray-800: rgb(var(--md-neutral-800) / <alpha-value>);
                --color-gray-900: rgb(var(--md-neutral-900) / <alpha-value>);
                --color-gray-950: rgb(var(--md-neutral-950) / <alpha-value>);
                --color-gray-DEFAULT: rgb(var(--md-neutral) / <alpha-value>);
            }

            .dark {
                --color-primary-DEFAULT: var(--color-primary-400);
            }
        </style>
        <style id="nuxt-ui-variables">
            :root {
                --header-height: 4rem;
                --ui-background: var(--md-surface);
                --ui-foreground: var(--md-on-surface);
            }

            .dark {
                --ui-background: var(--md-surface);
                --ui-foreground: var(--md-on-surface);
            }
        </style>

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity.

[amery]

is this being considered in v3?

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity.

[zecar]

any fixes?

[amery]

any fixes?

Not even acknowledged 😞

[github-actions[bot]]

Hi! 👋

This issue has been automatically closed due to prolonged inactivity.

We're a small team and can't address every report, but we appreciate your feedback and contributions.

If this issue is still relevant with the latest version of Nuxt UI, please feel free to reopen or create a new issue with updated details.

Thank you for your understanding and support!

— Nuxt UI Team