dnrops
/
gimp
mirror of https://github.com/GNOME/gimp.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

themes: parameterize colors of our Light theme. 

Instead of hardcoding the colors in CSS rules, make variables of them,
with meaningful semantic names. It will help with making consistent
design where a color means something and is reused in several places
(e.g. a color for "hovering" or "selecting").

I add some variants but not too much (e.g. treeviews had even lighter
background, with an inversion of logic, where selected items are on
darker background instead of lighter).
Colors in this theme are mostly the same before and after this commit,
except for a few parts where I felt that having more variants was
detrimental for consistency and maintenance.

As part of the changed colors:

- check and radio buttons' background just reuse the lighter background
  color (as used e.g. in treeviews and entries).
- menus also use this lighter background color with the color inversion
  (same as treeviews) for hovered items.

This commit also brings some improvements to disabled cases:

- Stylize also disabled tree view items (e.g. disabled actions in action
  search were styled the same way as runnable actions).
- Stylize the same way disabled buttons drawn directly or with an image
  widget.

The last use for this change is that it will help to create a dark
variant for the same theme using nearly the same code, hence get
consistent styling.
This commit is contained in:
Jehan 2022-08-20 18:48:29 +02:00
parent c3dca26d1a
commit 05fd811662
1 changed files with 139 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

220
themes/Light/gimp.css
View File

@ -9,27 +9,82 @@
@import url("../System/gimp.css"); @import url("../System/gimp.css");
/* Basic foreground, background and border colors. */
@define-color fg-color black;
@define-color bg-color rgb(235,235,235);
@define-color border-color rgb(220,220,220);
/********* Variants for foreground colors *********/
/* In places where we want not as strongly contrasted text. */
@define-color dimmed-fg-color rgb(100,100,100);
/* Disabled items, such as disabled actions in menus. */
@define-color disabled-fg-color rgb(110,110,110);
/* Disabled buttons are dimmed even more (text needs to still be
* readable, but buttons design are usually enough. */
@define-color disabled-button-color rgb(200,200,200);
/********* Variants for background colors *********/
/* Background color for hovered items to "stick out". */
@define-color hover-color rgb(250,250,250);
/* Background color when we want widgets-in-widgets to differenciate. It
* will usually be "less extreme", i.e. darker on a light theme, or
* lighter on a dark theme.
*/
@define-color widget-bg-color rgb(220,220,220);
/* Color for selected items, in particular when their usual background
* color is @widget-bg-color or @bg-color. It will usually be ligher on
* a light theme, or darker on a dark theme.
*/
@define-color selected-color rgb(250,250,250);
/* Background color more extreme in the theme tendency, i.e. darker on a
* dark theme, ligther on a light theme. */
@define-color extreme-bg-color rgb(250,250,250);
/* Color for a selected item to "stick out" when @extreme-bg-color is
* used. It will usually be darker than @bg-color on a light theme,
* ligher on a dark theme.
*/
@define-color extreme-selected-color rgb(220,220,220);
/********* Variants for border colors *********/
@define-color strong-border-color rgb(200,200,200);
@define-color stronger-border-color rgb(185,185,185);
/********* Colors for special cases *********/
@define-color scrollbar-slider-color rgb(110,110,110);
@define-color scrollbar-trough-color rgb(250,250,250);
@define-color ruler-color rgba(220,220,220,0.3);
* { * {
/* Default text color; needed for e.g. the Prefs dialog title area, /* Default text color; needed for e.g. the Prefs dialog title area,
* which doesn't have any more specific way to style it. * which doesn't have any more specific way to style it.
*/ */
color: black; color: @fg-color;
} }
#image-menubar, GtkImageMenuItem { #image-menubar, GtkImageMenuItem {
background-color: rgb(235,235,235); background-color: @bg-color;
color: black; color: @fg-color;
} }
/* TreeViews, e.g. in a file picker or the Prefs dialog */ /* TreeViews, e.g. in a file picker or the Prefs dialog */
.view { .view {
background-color: rgb(250,250,250); background-color: @extreme-bg-color;
color: black; color: @fg-color;
} }
.view:selected { .view:selected {
background-color: rgb(220,220,220); background-color: @extreme-selected-color;
color: black; color: @fg-color;
}
.view:disabled {
color: @disabled-fg-color;
} }
/* The main image window before it has an image in it, /* The main image window before it has an image in it,
@ -38,39 +93,39 @@
* background-color and background here are ignored. * background-color and background here are ignored.
*/ */
GimpDisplayShell, GimpDock, .dialog-action-box, .dialog-vbox { GimpDisplayShell, GimpDock, .dialog-action-box, .dialog-vbox {
color: rgb(100,100,100); color: @dimmed-fg-color;
} }
/* Foreground color for the big Wilber in the empty image window. /* Foreground color for the big Wilber in the empty image window.
* Again, background-color and background here are ignored. * Again, background-color and background here are ignored.
*/ */
#gimp-canvas { #gimp-canvas {
color: rgb(100,100,100); color: @dimmed-fg-color;
} }
/* GtkTextView */ /* GtkTextView */
textview text, textview { textview text, textview {
background-color: rgba (184, 184, 184, 0.5); background-color: rgba (184, 184, 184, 0.5);
color: black; color: @fg-color;
} }
/* End GtkTextView */ /* End GtkTextView */
combobox window.popup, combobox window { combobox window.popup, combobox window {
background-image: none; background-image: none;
background-color: rgb(220,220,220); background-color: @widget-bg-color;
color: black; color: @fg-color;
} }
combobox box, combobox box.linked, combobox button { combobox box, combobox box.linked, combobox button {
background-color: rgb(235,235,235); background-color: @bg-color;
color: black; color: @fg-color;
background-image: none; background-image: none;
border-color: rgb(185,185,185); border-color: @stronger-border-color;
} }
/* Get rid of the outline around all tabs in the gimpcolordialog */ /* Get rid of the outline around all tabs in the gimpcolordialog */
GimpColorNotebook .frame { GimpColorNotebook .frame {
border-color: rgb(235,235,235); border-color: @bg-color;
} }
/* Color history buttons in the color chooser. /* Color history buttons in the color chooser.
@ -78,18 +133,18 @@ GimpColorNotebook .frame {
* but not the + button; GimpColorSelection gets both. * but not the + button; GimpColorSelection gets both.
*/ */
GimpColorSelection button { GimpColorSelection button {
background: rgb(220,220,220); background: @widget-bg-color;
border: 1px solid rgb(185,185,185); border: 1px solid @stronger-border-color;
color: black; color: @fg-color;
} }
GimpColorSelection button:hover { GimpColorSelection button:hover {
background: rgb(250,250,250); background: @hover-color;
} }
/* The tabs above the color selector */ /* The tabs above the color selector */
notebook stack { notebook stack {
background-color: rgb(235,235,235); background-color: @bg-color;
} }
/* Use this to make a border or padding around each tab */ /* Use this to make a border or padding around each tab */
@ -97,23 +152,23 @@ notebook header tabs tab {
padding: 1px; padding: 1px;
margin-left: 2px; margin-left: 2px;
margin-right: 2px; margin-right: 2px;
border: 1px solid rgb(200,200,200); border: 1px solid @strong-border-color;
} }
/* The underline for selected tabs */ /* The underline for selected tabs */
notebook header tabs tab:checked { notebook header tabs tab:checked {
background-color: rgb(190,190,190); background-color: @selected-color;
box-shadow: 0 -4px rgb(180, 180, 180) inset; box-shadow: 0 -4px @stronger-border-color inset;
} }
notebook header tabs tab:hover { notebook header tabs tab:hover {
background-color: rgb(250,250,250); background-color: @hover-color;
} }
/* The background of many dialogs, e.g. Preferences and gimpcolordialog */ /* The background of many dialogs, e.g. Preferences and gimpcolordialog */
.vertical { .vertical {
color: black; color: @fg-color;
background-color: rgb(235,235,235); background-color: @bg-color;
background-image: none; background-image: none;
} }
@ -121,8 +176,8 @@ notebook header tabs tab:hover {
* Also, unexpectedly, controls the prefs "Reload Current Theme" button content. * Also, unexpectedly, controls the prefs "Reload Current Theme" button content.
*/ */
.horizontal { .horizontal {
color: black; color: @fg-color;
background-color: rgb(235,235,235); background-color: @bg-color;
} }
/* Text buttons, e.g. the main buttons at the bottoms of dialogs, /* Text buttons, e.g. the main buttons at the bottoms of dialogs,
@ -130,18 +185,18 @@ notebook header tabs tab:hover {
* where they're inside a GimpColorSelection * where they're inside a GimpColorSelection
*/ */
.text-button { .text-button {
color: black; color: @fg-color;
background-color: rgb(235,235,235); background-color: @bg-color;
background-image: none; background-image: none;
font-weight: normal; font-weight: normal;
} }
.text-button:hover { .text-button:hover {
background-color: rgb(250,250,250); background-color: @hover-color;
} }
.text-button:checked { .text-button:checked {
background-color: rgb(250,250,250); background-color: @selected-color;
font-weight: bold; font-weight: bold;
} }
@ -150,31 +205,31 @@ notebook header tabs tab:hover {
*/ */
button .flat { button .flat {
background-color: rgb(235,235,235); background-color: @bg-color;
color: black; color: @fg-color;
} }
.flat:checked { .flat:checked {
background: rgb(240,240,240); background: @selected-color;
} }
.flat:hover { .flat:hover {
background: rgb(250,250,250); background: @selected-color;
} }
/* Color the toolbox Wilber icon */ /* Color the toolbox Wilber icon */
GimpDock frame:first-child:not(label) { GimpDock frame:first-child:not(label) {
color: rgb(100,100,100); color: @dimmed-fg-color;
} }
/* Fix an issue with a few labels in the toolbox /* Fix an issue with a few labels in the toolbox
* having their colors overwritten with Wilber's * having their colors overwritten with Wilber's
*/ */
GimpDock frame:first-child label { GimpDock frame:first-child label {
color: black; color: @fg-color;
} }
scrollbar { scrollbar {
background-color: rgb(235,235,235); background-color: @bg-color;
} }
/* /*
@ -183,46 +238,47 @@ https://stackoverflow.com/questions/52414202/gtkscrolledwindow-how-to-always-sho
Doesn't seem to work here, though. Doesn't seem to work here, though.
*/ */
scrollbar trough { scrollbar trough {
background: rgb(250,250,250); background: @scrollbar-trough-color;
} }
scrollbar slider { scrollbar slider {
background: rgb(110,110,110); background: @scrollbar-slider-color;
border: 2px solid rgb(220,220,220); border: 2px solid @border-color;
} }
/* Removes black border around scrolled windows */ /* Removes black border around scrolled windows */
scrolledwindow viewport grid { scrolledwindow viewport grid {
border-radius: 1px; border-radius: 1px;
border: 0px solid rgb(235,235,235); border: 0px solid @bg-color;
} }
notebook header { notebook header {
background-color: rgb(235,235,235); background-color: @bg-color;
} }
GimpRuler { GimpRuler {
background-color: rgba(220,220,220, 0.3); background-color: @ruler-color;
} }
entry { entry {
background-color: rgb(250,250,250); background-color: @extreme-bg-color;
color: black; color: @fg-color;
} }
entry selection { entry selection {
background: rgb(220,220,220); background: @extreme-selected-color;
} }
paned separator { paned separator {
background-image: none; background-image: none;
color: rgb(220,220,220); color: @border-color;
background-color: rgb(220,220,220); background-color: @border-color;
} }
.view button { .view button {
background-color: rgb(245,245,245); background-color: @bg-color;
color: black; border-color: @border-color;
color: @fg-color;
} }
button { button {
@ -230,8 +286,9 @@ button {
text-shadow: 0 0; text-shadow: 0 0;
} }
button:disabled { /* Handle both buttons drawn directly and drawn with an icon. */
color: rgb(200,200,200); button:disabled, button:disabled image {
color: @disabled-button-color;
} }
/* Spinbuttons: there are two kinds: /* Spinbuttons: there are two kinds:
@ -249,11 +306,11 @@ button:disabled {
spinbutton, entry { spinbutton, entry {
/* Borders are a bit darker, but not too dark. */ /* Borders are a bit darker, but not too dark. */
border-color: rgb(200,200,200); border-color: @strong-border-color;
} }
GimpSpinScale entry progress { GimpSpinScale entry progress {
background-color: rgb(220,220,220); background-color: @extreme-selected-color;
border-width: 0px; border-width: 0px;
border-radius: 3px; border-radius: 3px;
} }
@ -261,20 +318,20 @@ GimpSpinScale entry progress {
/* Checkboxes */ /* Checkboxes */
checkbutton check { checkbutton check {
background-image: none; background-image: none;
background-color: rgb(240,240,240); background-color: @extreme-bg-color;
border: 1px solid rgb(185,185,185); border: 1px solid @stronger-border-color;
} }
checkbutton check:checked { checkbutton check:checked {
color: black; color: @fg-color;
} }
/* Some plugins have radio buttons, e.g. Fractal Explorer */ /* Some plugins have radio buttons, e.g. Fractal Explorer */
radio { radio {
background-image: none; background-image: none;
background-color: rgb(240, 240, 240); background-color: @extreme-bg-color;
border: 1px solid rgb(185,185,185); border: 1px solid @stronger-border-color;
color: black; color: @fg-color;
} }
/* Removes "blurred" effect from tooltip label */ /* Removes "blurred" effect from tooltip label */
@ -284,7 +341,8 @@ tooltip {
/* The border around a tooltip */ /* The border around a tooltip */
.background { .background {
background-color: rgb(220,220,220); background-color: @border-color;
border: 1px;
} }
/* The border around a frame */ /* The border around a frame */
@ -294,36 +352,36 @@ border {
/* For dropdown menus (e.g. "px" when creating a new image */ /* For dropdown menus (e.g. "px" when creating a new image */
#gtk-combobox-popup-menu { #gtk-combobox-popup-menu {
background-color: rgb(235,235,235); background-color: @bg-color;
color: black; color: @fg-color;
} }
/* Top menu items */ /* Top menu items */
/* The top menu item itself: File, Edit ... */ /* The top menu item itself: File, Edit ... */
menuitem menuitem { menuitem menuitem {
color: black; color: @fg-color;
background: rgb(240,240,240); background: @extreme-bg-color;
} }
/* A top (File, Edit) menubar item when its menu is expanded. */ /* A top (File, Edit) menubar item when its menu is expanded. */
menubar > menuitem:hover { menubar > menuitem:hover {
color: black; color: @fg-color;
background: rgb(250,250,250); background: @extreme-selected-color;
} }
menubar *:disabled { menubar *:disabled {
color: rgb(110,110,110); color: @disabled-fg-color;
} }
menuitem *:hover { menuitem *:hover {
color: black; color: @fg-color;
background: rgb(250,250,250); background: @extreme-selected-color;
} }
/* "Add Tab" menu in dockable dialog */ /* "Add Tab" menu in dockable dialog */
menu { menu {
background-color: rgb (235, 235, 235); background-color: @bg-color;
} }
/* Fixes issue with top menu label not changing /* Fixes issue with top menu label not changing
@ -339,38 +397,38 @@ menu box {
* The color of the buttons themselves comes from somewhere else. * The color of the buttons themselves comes from somewhere else.
*/ */
.sidebar-row, .sidebar-row * { .sidebar-row, .sidebar-row * {
background-color: rgb(220,220,220); background-color: @widget-bg-color;
} }
.sidebar-row:selected, .sidebar-row:selected * { .sidebar-row:selected, .sidebar-row:selected * {
background-color: rgb(250,250,250); background-color: @selected-color;
} }
.sidebar-row:hover, .sidebar-row:hover * { .sidebar-row:hover, .sidebar-row:hover * {
background-color: rgb(235,235,235); background-color: @bg-color;
} }
/* Header bar */ /* Header bar */
headerbar { headerbar {
background-color: rgb(235,235,235); background-color: @bg-color;
background-image: none; background-image: none;
} }
headerbar:backdrop { headerbar:backdrop {
background-image: linear-gradient(to top, rgb(225,225,225), rgb(245,245,245)); background-image: linear-gradient(to top, @widget-bg-color, @extreme-bg-color);
} }
/* GtkListBox widgets */ /* GtkListBox widgets */
list { list {
background-color: rgb(235,235,235); background-color: @bg-color;
} }
/* GtkSwitch buttons */ /* GtkSwitch buttons */
switch { switch {
background-color: rgb(235,235,235); background-color: @bg-color;
} }
/* The switch button is quite hard to understand without color IMO. So /* The switch button is quite hard to understand without color IMO. So