Commit Graph

12 Commits

Author SHA1 Message Date
evazion
1c1d784547 css: rework color scheme to use new color palette.
Add a new color palette and rework all site colors (both light mode and dark mode) to
use the new palette.

This ensures that colors are used consistently, from a carefully designed color palette,
instead of being chosen at random.

Before, colors in light mode were chosen on an ad-hoc basis, which resulted in a lot of
random colors and inconsistent design.

The new palette has 7 hues: red, orange, yellow, green, blue, azure (a lighter blue), and
purple. There's also a greyscale. Each hue has 10 shades of brightness, which (including
grey) gives us 80 total colors.

Colors are named like this:

    var(--red-0);    /* very light red */
    var(--red-2);    /* light red */
    var(--red-5);    /* medium red */
    var(--red-7);    /* dark red */
    var(--red-9);    /* very dark red */
    var(--green-7);  /* dark green */
    var(--blue-5);   /* medium blue */
    var(--purple-3); /* light purple */
                     /* etc */

The color palette is designed to meet the following criteria:

* To have close equivalents to the main colors used in the old color scheme,
  especially tag colors, so that changes to major colors are minimized.
* To produce a set of colors that can be used as as main text colors, as background
  colors, and as accent colors, both in light mode and dark mode.
* To ensure that colors at the same brightness level have the same perceived brightness.
  Green-4, blue-4, red-4, purple-4, etc should all have the same brightness and contrast
  ratios. This way colors look balanced. This is actually a difficult problem, because human
  color perception is non-linear, so you can't just scale brightness values linearly.

There's a color palette test page at https://danbooru.donmai/static/colors

Notable changes to colors in light mode:

* Username colors are the same as tag colors.
* Copyright tags are a deeper purple.
* Builders are a deeper purple (fixes #4626).
* Moderators are green.
* Gold users are orange.
* Parent borders are a darker green.
* Child borders are a darker orange.
* Unsaved notes have a thicker red border.
* Selected notes have a thicker blue (not green) border.
2021-02-22 02:32:49 -06:00
evazion
44cbce9855 css: factor out fonts to css variables. 2020-08-16 15:01:28 -05:00
evazion
b9c869f3e4 css: fix stylelint issues. 2019-10-02 01:52:24 -05:00
evazion
c86a24743a css: add more variables for dark mode.
Add some more variables that will be needed for dark mode.
2019-09-19 04:26:47 -05:00
evazion
9359797a00 css: refactor <button> and <input> element styling.
* Style <button> and <input> elements explicitly instead of relying on browser defaults.
* Style jquery ui buttons the same way as regular buttons.
* Add color variables so we can restyle form inputs in dark mode.
2019-09-19 02:18:23 -05:00
evazion
c325bfa199 css: factor out colors from main css (#4158). 2019-09-17 00:28:41 -05:00
Albert Yi
4fe7f5eff9 restyling 2019-01-23 17:40:58 -08:00
evazion
600b17cd9f Fix #3961: Tags in dialog boxes sometimes colored incorrectly
Fix rules so that the `.ui-widget-content .category-0 a` rule for tags
overrides the `.ui-widget-content a` rule for normal links.
2018-11-24 10:55:38 -06:00
evazion
7ecf6f1ba2 Fix link colors inside dialogs, autocomplete.
ref: f9f0da054, https://github.com/r888888888/danbooru/issues/3791#issuecomment-410378703.
2018-09-05 23:48:51 -05:00
Albert Yi
f9f0da0543 fix link colors in notices 2018-09-05 14:04:46 -07:00
Albert Yi
6fde3c20cf fixes for #3791 2018-07-31 16:44:55 -07:00
Albert Yi
6fa0ae2cf1 Migrate assets to use Webpacker 2018-07-27 15:24:05 -07:00