Redesign the color palette

HEIGE-PCloud commented 5 months ago

Background

Currently, we have three color themes: light, dark and black. The black theme was added when DoIt was derived from LoveIt due to my dissatisfaction of the dark theme - it's just not dark enough.

This turns out to be not a good idea #654 #1176 and creates a lot of duplication.

Now

The thing we really need is a properly designed color palette that looks nice, has good accessbility, conveys the correct semantics etc. Then it would be relatively easy to integrate that with Tailwind CSS. Hopefully we can make the dark theme better and get rid of the black theme completely.

The problem is that I have no idea how to design a good color palette so I am inclined to just borrow https://primer.style/foundations/primitives/color and make some adjustments on top of it.

Any help or suggestions will be appreciated.

CXwudi commented 5 months ago

I think borrowing the design from GitHub is good. I love GitHub dark theme and personally use Dark dimmed for Night time

kkbt0 commented 4 months ago

Color CSS variables maybe a good idea. Like this https://github.com/alex-shpak/hugo-book/blob/master/assets/themes/_auto.scss This seems to make it easier to expand or delete unnecessary themes. Example:

kkbt0 commented 4 months ago

I have made some attempts, but it has to be said that it is more complicated than expected. I change a color $global-background-color in this commit .

Sass is .single .content kbd { style } . But html template don't have any kbd . This may be for some input box styles in JavaScript.

So we need https://github.com/tailwindlabs/tailwindcss-typography to add style to any vanilla HTML we don’t control.

And this should be able to use SCSS for style overlay.

(But this requires careful verification of the specific effect, ensuring that word spacing, color, and so on are not incorrectly covered by tailwindcss typography. Because I haven't configured the typography font color background yet, some colors have been overwritten by the typography default style now.)

.prose-kbd\:tw-bg-global-background-color :is(:where(kbd):not(:where([class~=tw-not-prose],[class~=tw-not-prose] *))) {
    background-color: var(--global-background-color)
}

This may bring compatibility issues, but most browsers now support .

And .search-dropdown .dropdown-menu class depend on CSS Descendant combinator. Class .dropdown-menu is the style required by autocomplete.min.js .

So we need a custom plugins like this. Ensure that the Tailwindcss style can cover the HTML generated by JavaScript.

https://github.com/tailwindlabs/tailwindcss/discussions/7541 https://play.tailwindcss.com/tWrJX5Rapi

Similarly, DoIt/assets/lib/valine/Valine.scss .v[data-class=v] .vcards .vcard .vcontent.expand:after is also hard to use Tailwindcss color class.

HEIGE-PCloud commented 4 months ago

Thanks for looking into this and raising the challenge. I agree that Tailwind does not work very well with foreign contents, and I don't think we have to move 100% to Tailwind - a mix between Tailwind and SCSS setup may be the best solution here.

I think we can still centralise the color palette using CSS variables, what you've done in https://github.com/kkbt0/DoIt/commit/8db166613b3adebd8242dbf15e110c645087ecb4 is awesome. Then, for elements that directly present in the HTML that we control, we use Tailwind to style their color, and for foreign content, we can keep our SCSS setup like what you have done here https://github.com/HEIGE-PCloud/DoIt/pull/1253/commits/058c62e5c6bcf7de8bb6ccf331a07d5e68d9df80

I think in this way, we have the best of both worlds.

HEIGE-PCloud commented 4 months ago

I think the value of Tailwind mainly reflects in many of the "mostly isolated" components in DoIt. Features like

https://github.com/HEIGE-PCloud/DoIt/blob/a3970ec1af30d027102cd8889701877390d5d8ba/assets/css/_partial/_single/_showcase.scss

https://github.com/HEIGE-PCloud/DoIt/blob/a3970ec1af30d027102cd8889701877390d5d8ba/assets/css/_partial/_single/_sponsor.scss

https://github.com/HEIGE-PCloud/DoIt/blob/a3970ec1af30d027102cd8889701877390d5d8ba/assets/css/_partial/_single/_admonition.scss

can hopefully be decoupled from the central style sheet and made future maintenance easier.

Also, about 90% of our current SCSS bundle is unused on the homepage

I hope by moving to an atomic CSS solution, we can reduce duplications in styles and improve the performance. #1138

HEIGE-PCloud commented 4 months ago

Do you like the new design?

CXwudi commented 4 months ago

That's great job for both of you, It would be great if there is a link where I can check how it looks in the post.

kkbt0 commented 4 months ago

https://github.com/HEIGE-PCloud/DoIt/pull/1253 https://do-dun87dsqt-pclouds-projects.vercel.app/

And now it has a smaller css size.

HEIGE-PCloud / DoIt

Redesign the color palette #1245

Background

Now