epic-stack
epic-stack copied to clipboard
epicweb-dev
Styling-with-css-variables
Theme switch with CSS Variables.
New users need to re-configure tailwind.config.ts and potentially delete all custom classes in the code base. How should we handle this?
People are definitely going to need to make adjustments to the colors and things. We should just make sure what we generate from the beginning is easy to adjust. They shouldn't have to change class names and instead should just have to change colors. I have mixed feelings about the day and night names. Part of me likes them for how obvious they are, but the other part of me dislikes them because it means they pretty much require applying two versions of colors for light and dark mode whereas I think we could get away with just applying a single version that changes based on light or dark mode.
I'm definitely open to suggestions on this.
I'd much rather do it the CSS vars way so we can use the same custom classes everywhere and configure their values based on theme.
For color classes, I suggest only having the most common use cases: primary, secondary, shades of grey, success, info, warning, danger, and danger muted.
I'm unsure if we need the font size classes, as Tailwind already has them. Why did you add those in particular @kentcdodds?
Everything custom in here is based on the designs made for Rocket Rental. I like the way I have sizes laid out in there so I don't think I want to remove those.
At the moment I've added the CSS Vars and the custom classes that use them. I'll also replace the day/night/accent classes with their single-class equivalents so we can see what that looks like.
Everything custom in here is based on the designs made for Rocket Rental. I like the way I have sizes laid out in there so I don't think I want to remove those.
Yes, I like them too: it's easier to know what classes to apply to which typographic element. I was asking about your reasoning behind them to see if there's anything else to consider, so I could put some documentation on styling together.
I was asking about your reasoning behind them to see if there's anything else to consider, so I could put some documentation on styling together.
That is extremely appreciated. Thank you!
As it stands there's an The `text-muted-200` class does not exist. If `text-muted-200` is a custom class, make sure it is defined within a `@layer` directive. error. I'm not sure why it's showing up: I couldn't catch any code changes I've made or from the commit history that could justify this.
Any idea what's going on?
As it stands there's an
The `text-muted-200` class does not exist. If `text-muted-200` is a custom class, make sure it is defined within a `@layer` directive.error. I'm not sure why it's showing up: I couldn't catch any code changes I've made or from the commit history that could justify this.Any idea what's going on?
Nevermind, had a wrong 'colors' key in tailwind.config.ts 😅
why
package-lock.jsonis here? Because of the install script. Should it not be there? 🤔
All right, it's ready to take a look at.
Some notes:
- I've changed a few styles to accomodate for a streamlined light and dark mode
- A few cases would benefit from higher contrast (like the logos on the homepage)
- Was a bit confused regarding your usage of
accent-pink, so I removed it and gave it what I thought was the brand color (purple). You might want to go back on that maybe.
We could also group all brand colors into a brand key:
export default {
content: ['./app/**/*.{ts,tsx,jsx,js}'],
darkMode: 'class',
theme: {
extend: {
colors: {
background: 'rgb(var(--color-background))',
foreground: 'rgb(var(--color-foreground))',
brand: {
primary: '...',
secondary: '...',
tertiary: '...',
quaternary: '...',
quinary: '...',
// etc
},
// ...
As noted, I'd like to follow the pattern for tailwind config by shadcn which I saw in that video about the preset, bit I don't want to make it a preset because I don't see the value on the extra file for a generator: https://github.com/epicweb-dev/epic-stack/discussions/49#discussioncomment-6186490
I very literally just want to do exactly what this shows for the tailwind integration: https://ui.shadcn.com/docs/installation however I would like to mostly keep the colors we have now as much as reasonable. And I would like those to be hsl values.