refactor(module)!: implement design system with CSS variables #2298
Conversation
Deploying ui3 with
|
| Latest commit: |
8620554
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://dda8f4b6.ui-6q2.pages.dev |
| Branch Preview URL: | https://feat-css-variables.ui-6q2.pages.dev |
|
This is really an amazing feat! Dealing with colors currently is confusing and this is the cherry on the cake for v3. |
|
I'm cooking something on top of this PR to handle app config colors through CSS variables as well 😊 This will allow to choose shades for light and dark mode! |
benjamincanac
changed the title
benjamincanac
changed the title
|
Just updated the PR with a full design system and a major refactor of colors on top of the gray, let me know what you think! |
|
Can you elaborate on this? Writing
|
I would refer a three-key "verbose", yet. I would dare to say that it becomes more CSS-esque and easy to remember, even more once this rolls out. Not to mention that there will be your IDE helping with them. The more I look at this PR the more I want to test it in an actual project.... |
|
I want to add that you don't have to use the shortcuts variables, you can use Do you think I should keep the custom Nuxt UI colors as Tailwind CSS colors? |
commit: |
|
Having to open brackets and write a CSS var would become tedious as you typically write a bunch of utility classes per element. I'm not sure if the Tailwind Intellisense provides autocompletion for CSS vars but if it does it certainly would make it easier. With that said I think the current behavior is better. Maybe an opt-in option to add utilities for those variables would be best? Enabling the option would generate |
|
@MuhammadM1998 I can't make an opt-in for this, have you looked at the |
|
We could maybe add an option to define our design system colors as Tailwind CSS colors but there would still be a conflict with the |
|
Do you really think it would be tedious to write |
|
Personally, I would much prefer to write While I do now understand @MuhammadM1998 perspective, I would much prefer being in control. Also considering a number of requests in the ability to define your own utility class colors without hardcoded variables. For those who really want to we could add a doc section explaining how it should be done via Tailwind utilities. This not only improves free of customization, but also establish a proper use of the tools IMO |
|
@benjamincanac That's my opinion yeah maybe do a poll on twitter? 😂 I agree with @sandros94 though, adding a section in the documentation for those who won't like to use the brackets notation would be sufficient as you'll do that once per project anyway. |
|
It is planned, I'll rewrite the entire You can easily define the Nuxt UI colors (design system) as Tailwind CSS colors using the @import "tailwindcss";
@import "@nuxt/ui";
@theme {
--color-primary-50: var(--ui-color-primary-50);
--color-primary-100: var(--ui-color-primary-100);
--color-primary-200: var(--ui-color-primary-200);
--color-primary-300: var(--ui-color-primary-300);
--color-primary-400: var(--ui-color-primary-400);
--color-primary-500: var(--ui-color-primary-500);
--color-primary-600: var(--ui-color-primary-600);
--color-primary-700: var(--ui-color-primary-700);
--color-primary-800: var(--ui-color-primary-800);
--color-primary-900: var(--ui-color-primary-900);
--color-primary-950: var(--ui-color-primary-950);
}This would allow you to use |
benjamincanac
changed the title
Its going to look like Vuetify? Although it helps to create the distinction between Success and Primary. I don't mind. |
Could you elaborate on this? 🤔 |
So Vuetify and Element plus use the blue colors by default. While Shadcn uses Grays by default as primary colors. Nuxt UI is currently green by default, which I like, in line with the Nuxt website and Vue color scheme. export default defineAppConfig({
ui: {
colors: {
primary: 'sky',
secondary: 'indigo',
success: 'green',
info: 'blue',
warning: 'yellow',
error: 'red',
neutral: 'slate'
}
}
})According to this snippet. The new primary color would be |
|
It's an error in the PR description, you have the default colors in the documentation: https://ui3.nuxt.dev/getting-started/theme#colors |
|
I just tried the new design system approach and it's amazing! Had a small problem though with styling the button foreground, currently it defaults to Also I added my colors to @import 'tailwindcss';
@import '@nuxt/ui';
/* My app's design system*/
:root {
--app-font-family: 'Readex Pro', sans-serif;
--app-font-size: 14px;
--app-background: #ffffff;
--app-foreground: #09090b;
--app-primary: #1d5252;
--app-secondary: #f4f4f5;
--app-border: var(--app-secondary);
/* Dark Mode Overrides */
&.dark {
--app-background: #09090b;
--app-foreground: #f5f5f5;
--app-primary: #32ada8;
--app-secondary: #1e1e1e;
}
}
/* Overriding Nuxt UI default to use our design system */
:root {
--font-family-sans: var(--app-font-family);
/* Colors */
--ui-bg: var(--app-background);
--ui-text: var(--app-foreground);
--ui-primary: var(--app-primary);
--ui-secondary: var(--app-secondary);
--ui-border: var(--app-border);
}
/* Declaring our variables as `theme` to add them as utility classes (e.g `text-primary`, `bg-muted`, etc..) */
@theme {
--color-background: var(--app-background);
--color-foreground: var(--app-foreground);
--color-primary: var(--app-primary);
--color-secondary: var(--app-secondary);
--color-border: var(--app-border);
}With the above CSS file, the following works in both light and dark modes <template>
<!-- Automatically uses #1d5252 in light mode and 32ada8 in dark mode -->
<p class="text-primary"> Hello </p>
</template> |
|
The button foreground text defaults to It is how we designed the button: |
|
I've concluded the same after some reviewing. Thanks a lot for this PR really great work 🙏 |
|
hey guys, But that doesn't seem to work in v3 now. Is there an synthax error in my code, or did you change the whole logic? |
|
@philippwienes No this behaves the same as in Not sure it's related but one mistake I see people make is not putting their |
|
Ah nice - thanks for the link. Classic RTFM. |
🔗 Linked issue
Resolves #601
Resolves #870
Resolves #1693
Resolves #1721
Resolves #1833
Resolves #1883
Resolves #2026
Resolves #2027
Resolves #2039
Resolves #2320
❓ Type of change
📚 Description
With this PR, Nuxt UI v3 embraces a full design system for its components. You will now be able to use
primary,secondary,success,info,warning,errorandneutral(renamed fromgray) in thecolorprop of components. For example instead of<UButton color="red" />you will use<UButton color="error" />.Note that we no longer define those aliases as Tailwind CSS colors so you can no longer do
text-primary-500 dark:text-primary-400. This was changed to prevent overriding your Tailwind CSS colors.Each alias will generate CSS variables such as
--ui-color-${color}-${shade}:I noticed that the Nuxt UI theme mostly use
500for light mode and400for dark mode for colors, so now Nuxt UI generates shortcuts that changes for light and dark mode:--ui-${color}.Those CSS variables are now used all across the theme, for example the
Linktheme:This allows you to change which shade is used for each color on light and dark mode:
Now we've handled colors, let's talk about the former
grayalias which is now calledneutral. For a long time, I wanted to implement CSS variables to easily customize the theme without having to override every component in yourapp.config.ts.We used to have
--ui-backgroundand--ui-foregroundvariables in Nuxt UI Pro only but those were only used to change the styles applied on<body>.This PR introduces new CSS variables in Nuxt UI:
The theme of all components has been rewritten to use those variables, here is the
Cardtheme for example:Now you can easily change the background of all your components by overriding those variables in your
app.vuefor example:📝 Checklist