D17154: Go back to SCSS

Alexander Kernozhitsky

2018-11-25 12:38:55 UTC

gepardo created this revision.
Herald added a project: Plasma.
Herald added a subscriber: plasma-devel.
gepardo requested review of this revision.

REVISION SUMMARY
As it was explained in https://phabricator.kde.org/D16365,

Further potential steps in the same direction of saving code would be going back to SASS

This patch tries to go back to SCSS sources with backporting all the fixes made in Breeze-gtk recently. As a base, I used this repository: https://github.com/dirruk1/gnome-breeze. But it's outdated, so I walked through the commit history of breeze-gtk and ported all the changes here. The script for building the theme was ported to Python3, and shell scripts now use POSIX sh instead of bash. Also I fixed some inconsistences between Qt and GTK Breeze themes. For example, Breeze-Qt colorscheme was updated a little (in Plasma 5.12, as far as I remember), but the GTK theme was updated only partially; now the colors are synchronized. Both GTK-3.18 and GTK-3.20 versions work fine for me; many things were also fixed for GTK 3.18.

For building the theme, ruby-sass (or more lightweght sassc) is required. Also the theme can be patched to allow changing the colorscheme in System Settings (though, rebuilding the theme with sassc is required for this). The original repository (https://github.com/dirruk1/gnome-breeze) had also named-colors branch that allowed using named colors and changing the colorscheme without rebuilding; but I couldn't get this working.

Because both Breeze-gtk and Breese-dark-gtk are now built from sources, there will be no more inconsistences between them. Rebuilding these themes can be done using rebuild-theme.sh.

TEST PLAN
I do not know how to test this automatically. But I am using this version of Breeze-GTK for several months (I am not using many GTK+ applications, though). Also checked it on gtk3-widget-factory; it seems to work fine.

GTK2 version was tested on Gimp, but it is mostly unchanged.

For differences between https://github.com/dirruk1/gnome-breeze and this version, you can see my GitHub repo where I worked on this patch: https://github.com/alex65536/gnome-breeze/tree/breeze-gtk-merge.

REPOSITORY
R98 Breeze for Gtk

BRANCH
breeze-gtk-sass (branched from master)

REVISION DETAIL
https://phabricator.kde.org/D17154

AFFECTED FILES
Breeze-dark-gtk/gtk-2.0/widgets/default
Breeze-dark-gtk/gtk-2.0/widgets/scrollbar
Breeze-dark-gtk/gtk-3.0/gtk.css
Breeze-dark-gtk/gtk-3.18/gtk.css
Breeze-dark-gtk/gtk-3.20/gtk.css
Breeze-gtk/assets/arrow-down-insensitive.png
Breeze-gtk/assets/arrow-down.png
Breeze-gtk/assets/arrow-left-insensitive.png
Breeze-gtk/assets/arrow-left.png
Breeze-gtk/assets/arrow-right-insensitive.png
Breeze-gtk/assets/arrow-right.png
Breeze-gtk/assets/arrow-small-down-insensitive.png
Breeze-gtk/assets/arrow-small-down.png
Breeze-gtk/assets/arrow-small-left-insensitive.png
Breeze-gtk/assets/arrow-small-left.png
Breeze-gtk/assets/arrow-small-right-insensitive.png
Breeze-gtk/assets/arrow-small-right.png
Breeze-gtk/assets/arrow-small-up-insensitive.png
Breeze-gtk/assets/arrow-small-up.png
Breeze-gtk/assets/arrow-up-insensitive.png
Breeze-gtk/assets/arrow-up.png
Breeze-gtk/assets/button-insensitive.png
Breeze-gtk/assets/button.png
Breeze-gtk/assets/check-checked-backdrop-insensitive.png
Breeze-gtk/assets/check-checked-backdrop-***@2.png
Breeze-gtk/assets/check-checked-backdrop.png
Breeze-gtk/assets/check-checked-***@2.png
Breeze-gtk/assets/check-checked-insensitive.png
Breeze-gtk/assets/check-checked-***@2.png
Breeze-gtk/assets/check-mixed-backdrop-insensitive.png
Breeze-gtk/assets/check-mixed-backdrop-***@2.png
Breeze-gtk/assets/check-mixed-backdrop.png
Breeze-gtk/assets/check-mixed-***@2.png
Breeze-gtk/assets/check-mixed-insensitive.png
Breeze-gtk/assets/check-mixed-***@2.png
Breeze-gtk/assets/check-selectionmode-checked-backdrop-insensitive.png
Breeze-gtk/assets/check-selectionmode-checked-backdrop-***@2.png
Breeze-gtk/assets/check-selectionmode-checked-backdrop.png
Breeze-gtk/assets/check-selectionmode-checked-***@2.png
Breeze-gtk/assets/check-selectionmode-checked-insensitive.png
Breeze-gtk/assets/check-selectionmode-checked-***@2.png
Breeze-gtk/assets/check-selectionmode-unchecked-backdrop-insensitive.png
Breeze-gtk/assets/check-selectionmode-unchecked-backdrop-***@2.png
Breeze-gtk/assets/check-selectionmode-unchecked-backdrop.png
Breeze-gtk/assets/check-selectionmode-unchecked-***@2.png
Breeze-gtk/assets/check-selectionmode-unchecked-insensitive.png
Breeze-gtk/assets/check-selectionmode-unchecked-***@2.png
Breeze-gtk/assets/check-selectionmode-unchecked.png
Breeze-gtk/assets/check-selectionmode-***@2.png
Breeze-gtk/assets/check-unchecked-backdrop-insensitive.png
Breeze-gtk/assets/check-unchecked-backdrop-***@2.png
Breeze-gtk/assets/check-unchecked-backdrop.png
Breeze-gtk/assets/check-unchecked-***@2.png
Breeze-gtk/assets/check-unchecked-insensitive.png
Breeze-gtk/assets/check-unchecked-***@2.png
Breeze-gtk/assets/check-unchecked.png
Breeze-gtk/assets/check-***@2.png
Breeze-gtk/assets/combo-entry-button-insensitive.png
Breeze-gtk/assets/combo-entry-button.png
Breeze-gtk/assets/combo-entry-insensitive.png
Breeze-gtk/assets/combo-entry.png
Breeze-gtk/assets/entry-insensitive.png
Breeze-gtk/assets/entry.png
Breeze-gtk/assets/frame-gap-end.png
Breeze-gtk/assets/frame-gap-start.png
Breeze-gtk/assets/frame.png
Breeze-gtk/assets/line-h.png
Breeze-gtk/assets/line-v.png
Breeze-gtk/assets/menu-arrow-insensitive.png
Breeze-gtk/assets/menu-arrow-selected.png
Breeze-gtk/assets/menu-arrow.png
Breeze-gtk/assets/notebook-frame-bottom.png
Breeze-gtk/assets/notebook-frame-right.png
Breeze-gtk/assets/notebook-frame-top.png
Breeze-gtk/assets/progressbar-trough.png
Breeze-gtk/assets/radio-checked-backdrop-insensitive.png
Breeze-gtk/assets/radio-checked-backdrop-***@2.png
Breeze-gtk/assets/radio-checked-backdrop.png
Breeze-gtk/assets/radio-checked-***@2.png
Breeze-gtk/assets/radio-checked-insensitive.png
Breeze-gtk/assets/radio-checked-***@2.png
Breeze-gtk/assets/radio-mixed-backdrop-insensitive.png
Breeze-gtk/assets/radio-mixed-backdrop-***@2.png
Breeze-gtk/assets/radio-mixed-backdrop.png
Breeze-gtk/assets/radio-mixed-***@2.png
Breeze-gtk/assets/radio-mixed-insensitive.png
Breeze-gtk/assets/radio-mixed-***@2.png
Breeze-gtk/assets/radio-unchecked-backdrop-insensitive.png
Breeze-gtk/assets/radio-unchecked-backdrop-***@2.png
Breeze-gtk/assets/radio-unchecked-backdrop.png
Breeze-gtk/assets/radio-unchecked-***@2.png
Breeze-gtk/assets/radio-unchecked-insensitive.png
Breeze-gtk/assets/radio-unchecked-***@2.png
Breeze-gtk/assets/radio-unchecked.png
Breeze-gtk/assets/radio-***@2.png
Breeze-gtk/assets/scale-slider-insensitive.png
Breeze-gtk/assets/scale-slider.png
Breeze-gtk/assets/scale-trough-horizontal.png
Breeze-gtk/assets/scale-trough-vertical.png
Breeze-gtk/assets/scrollbar-trough-horizontal.png
Breeze-gtk/assets/scrollbar-trough-***@2.png
Breeze-gtk/assets/scrollbar-trough-vertical.png
Breeze-gtk/assets/scrollbar-trough-***@2.png
Breeze-gtk/assets/spinbutton-down-insensitive.png
Breeze-gtk/assets/spinbutton-down-rtl-insensitive.png
Breeze-gtk/assets/spinbutton-down-rtl.png
Breeze-gtk/assets/spinbutton-down.png
Breeze-gtk/assets/spinbutton-up-insensitive.png
Breeze-gtk/assets/spinbutton-up-rtl-insensitive.png
Breeze-gtk/assets/spinbutton-up-rtl.png
Breeze-gtk/assets/spinbutton-up.png
Breeze-gtk/assets/tab-bottom-active.png
Breeze-gtk/assets/tab-bottom-inactive.png
Breeze-gtk/assets/tab-left-active.png
Breeze-gtk/assets/tab-left-inactive.png
Breeze-gtk/assets/tab-right-active.png
Breeze-gtk/assets/tab-right-inactive.png
Breeze-gtk/assets/tab-top-active.png
Breeze-gtk/assets/tab-top-inactive.png
Breeze-gtk/assets/titlebutton-close-backdrop.png
Breeze-gtk/assets/titlebutton-close-***@2.png
Breeze-gtk/assets/titlebutton-close.png
Breeze-gtk/assets/titlebutton-***@2.png
Breeze-gtk/assets/titlebutton-maximize-active-backdrop.png
Breeze-gtk/assets/titlebutton-maximize-active-***@2.png
Breeze-gtk/assets/titlebutton-maximize-active.png
Breeze-gtk/assets/titlebutton-maximize-***@2.png
Breeze-gtk/assets/titlebutton-maximize-backdrop.png
Breeze-gtk/assets/titlebutton-maximize-***@2.png
Breeze-gtk/assets/titlebutton-maximize-hover-backdrop.png
Breeze-gtk/assets/titlebutton-maximize-hover-***@2.png
Breeze-gtk/assets/titlebutton-maximize-hover.png
Breeze-gtk/assets/titlebutton-maximize-***@2.png
Breeze-gtk/assets/titlebutton-maximize-maximized-active-backdrop.png
Breeze-gtk/assets/titlebutton-maximize-maximized-active-***@2.png
Breeze-gtk/assets/titlebutton-maximize-maximized-active.png
Breeze-gtk/assets/titlebutton-maximize-maximized-***@2.png
Breeze-gtk/assets/titlebutton-maximize-maximized-backdrop.png
Breeze-gtk/assets/titlebutton-maximize-maximized-***@2.png
Breeze-gtk/assets/titlebutton-maximize-maximized-hover-backdrop.png
Breeze-gtk/assets/titlebutton-maximize-maximized-hover-***@2.png
Breeze-gtk/assets/titlebutton-maximize-maximized-hover.png
Breeze-gtk/assets/titlebutton-maximize-maximized-***@2.png
Breeze-gtk/assets/titlebutton-maximize-maximized.png
Breeze-gtk/assets/titlebutton-maximize-***@2.png
Breeze-gtk/assets/titlebutton-maximize.png
Breeze-gtk/assets/titlebutton-***@2.png
Breeze-gtk/assets/titlebutton-minimize-active-backdrop.png
Breeze-gtk/assets/titlebutton-minimize-active-***@2.png
Breeze-gtk/assets/titlebutton-minimize-active.png
Breeze-gtk/assets/titlebutton-minimize-***@2.png
Breeze-gtk/assets/titlebutton-minimize-backdrop.png
Breeze-gtk/assets/titlebutton-minimize-***@2.png
Breeze-gtk/assets/titlebutton-minimize-hover-backdrop.png
Breeze-gtk/assets/titlebutton-minimize-hover-***@2.png
Breeze-gtk/assets/titlebutton-minimize-hover.png
Breeze-gtk/assets/titlebutton-minimize-***@2.png
Breeze-gtk/assets/titlebutton-minimize.png
Breeze-gtk/assets/titlebutton-***@2.png
Breeze-gtk/assets/togglebutton-insensitive.png
Breeze-gtk/assets/togglebutton.png
Breeze-gtk/assets/toolbutton-toggled.png
Breeze-gtk/assets/tree-header.png
Breeze-gtk/gtk-2.0/gtkrc
Breeze-gtk/gtk-2.0/widgets/default
Breeze-gtk/gtk-3.0/gtk.css
Breeze-gtk/gtk-3.18/gtk-dark.css
Breeze-gtk/gtk-3.18/gtk.css
Breeze-gtk/gtk-3.20/common.css
Breeze-gtk/gtk-3.20/gtk-dark.css
Breeze-gtk/gtk-3.20/gtk.css
TODO
generate_theme.py
rebuild-theme.sh
src/_colors.scss
src/_functions.scss
src/_global.scss
src/build_theme.sh
src/gtk2/gtkrc
src/gtk2/widgets/buttons
src/gtk2/widgets/default
src/gtk2/widgets/entry
src/gtk2/widgets/menu
src/gtk2/widgets/misc
src/gtk2/widgets/notebook
src/gtk2/widgets/progressbar
src/gtk2/widgets/range
src/gtk2/widgets/scrollbar
src/gtk2/widgets/styles
src/gtk2/widgets/toolbar
src/gtk318/gtk.scss
src/gtk318/widgets/_app_notifications.scss
src/gtk318/widgets/_base.scss
src/gtk318/widgets/_button.scss
src/gtk318/widgets/_calendar.scss
src/gtk318/widgets/_checkboxes.scss
src/gtk318/widgets/_color_chooser.scss
src/gtk318/widgets/_dialogs.scss
src/gtk318/widgets/_entry.scss
src/gtk318/widgets/_headerbar.scss
src/gtk318/widgets/_infobar.scss
src/gtk318/widgets/_link.scss
src/gtk318/widgets/_lists.scss
src/gtk318/widgets/_menus.scss
src/gtk318/widgets/_misc.scss
src/gtk318/widgets/_notebook.scss
src/gtk318/widgets/_overshoot.scss
src/gtk318/widgets/_pathbar.scss
src/gtk318/widgets/_progressbar.scss
src/gtk318/widgets/_scale.scss
src/gtk318/widgets/_scrollbar.scss
src/gtk318/widgets/_sidebar.scss
src/gtk318/widgets/_spinbutton.scss
src/gtk318/widgets/_switch.scss
src/gtk318/widgets/_toolbar.scss
src/gtk318/widgets/_tooltips.scss
src/gtk318/widgets/_treeview.scss
src/gtk318/widgets/_window_decorations.scss
src/gtk320/gtk.scss
src/gtk320/widgets/_app_notifications.scss
src/gtk320/widgets/_base.scss
src/gtk320/widgets/_button.scss
src/gtk320/widgets/_calendar.scss
src/gtk320/widgets/_checkboxes.scss
src/gtk320/widgets/_color_chooser.scss
src/gtk320/widgets/_dialogs.scss
src/gtk320/widgets/_entry.scss
src/gtk320/widgets/_headerbar.scss
src/gtk320/widgets/_infobar.scss
src/gtk320/widgets/_link.scss
src/gtk320/widgets/_lists.scss
src/gtk320/widgets/_menus.scss
src/gtk320/widgets/_misc.scss
src/gtk320/widgets/_notebook.scss
src/gtk320/widgets/_overshoot.scss
src/gtk320/widgets/_pathbar.scss
src/gtk320/widgets/_progressbar.scss
src/gtk320/widgets/_scale.scss
src/gtk320/widgets/_scrollbar.scss
src/gtk320/widgets/_sidebar.scss
src/gtk320/widgets/_spinbutton.scss
src/gtk320/widgets/_switch.scss
src/gtk320/widgets/_toolbar.scss
src/gtk320/widgets/_tooltips.scss
src/gtk320/widgets/_treeview.scss
src/gtk320/widgets/_window_decorations.scss
src/render_assets.py

To: gepardo
Cc: plasma-devel, ragreen, Pitel, ZrenBot, lesliezhai, ali-mohamed, jensreuterberg, abetts, sebas, apol, mart