kognise / water.css

A drop-in collection of CSS styles to make simple websites just a little nicer
https://watercss.kognise.dev
MIT License
8.28k stars 479 forks source link

Any unofficial successor going on? #335

Open jimmywarting opened 1 year ago

jimmywarting commented 1 year ago

This project seems to be discontinued. no commits in years. Are there anyone else that maintain a fork that's up to date with newest and greatest?

prologic commented 1 year ago

What's there to improve?

jimmywarting commented 1 year ago

::selection color for instance. it's broken in in chrome that uses experimental flag for instance... i don't like that websites should messes with ::selection or the scrollbar actually. I like my consistent Mac os scrollbars that auto hides and looks good.

i wish it could make use of color-scheme #300 so eg the icons like the calendar on <input type="date"> gets changed. there are many more native html element that can be styled by using color-scheme: dark when prefered dark mode.

the calendar picker for instance will be in dark mode then, and that one is impossible to style with just css or psudo selectors.

there are also plenty of issues / PRs that are not being looked at.

jimmywarting commented 1 year ago

it also generated a very inefficient css variant where it bloated with lots of @media (prefers-color-scheme: dark) everywhere in the final css: https://cdn.jsdelivr.net/npm/water.css@2/out/water.css

91 times to be precise. there should really only be one declaration of @media (prefers-color-scheme: dark) where you override your color variables

and the rest of the css should only use var(--text-color)

just as one example:

dialog {
  background-color: #f7f7f7;
  background-color: var(--background-alt);
  color: #363636;
  color: var(--text-main);
  border: none;
  border-radius: 6px;
  border-color: #dbdbdb;
  border-color: var(--border);
  padding: 10px 30px;
}

@media (prefers-color-scheme: dark) {

  dialog {
  border-color: #526980;
  border-color: var(--border);
  }
}

@media (prefers-color-scheme: dark) {

  dialog {
  color: #dbdbdb;
  color: var(--text-main);
  }
}

@media (prefers-color-scheme: dark) {

  dialog {
  background-color: #1a242f;
  background-color: var(--background-alt);
  }
}
jimmywarting commented 1 year ago

I can understand that it's for supporting older browsers. but i don't thing this overhead is needed anymore.

diomed commented 1 year ago

you should check pico.css

this is clearly abandoned project.