AuroraMiddleware/gtk2
1
0
Fork 0
forked from AuroraMiddleware/gtk
Code Issues Pull Requests Projects Releases Wiki Activity

Rebuild CSS on all SCSS file changes

Browse Source 
Adwaita and HighContrast CSS should be rebuild every time one of their
dependent files change, not just the main entry point.

https://bugzilla.gnome.org/show_bug.cgi?id=780041
This commit is contained in:
Emmanuele Bassi 2017-04-01 16:10:18 +01:00
parent 94db94a78b
commit f6cbd076dd
7 changed files with 33 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
gtk/Makefile.am
View File

@ -1284,20 +1284,16 @@ gesture_sources = \
gesture/gesture-two-finger-swipe-right-symbolic.svg
adwaita_theme_scss = \
theme/Adwaita/_colors-public.scss \
theme/Adwaita/_colors.scss \
theme/Adwaita/_colors-public.scss \
theme/Adwaita/_common.scss \
theme/Adwaita/_drawing.scss \
theme/Adwaita/gtk-contained-dark.scss \
theme/Adwaita/gtk-contained.scss \
$()
highcontrast_theme_scss = \
theme/HighContrast/_colors.scss \
theme/HighContrast/_common.scss \
theme/HighContrast/_drawing.scss \
theme/HighContrast/gtk-contained-inverse.scss \
theme/HighContrast/gtk-contained.scss \
$()
if REBUILD_SCSS
@ -1308,16 +1304,16 @@ scss_verbose = $(scss_verbose_@AM_V@)
scss_verbose_ = $(scss_verbose_@AM_DEFAULT_V@)
scss_verbose_0 = @echo " SCSS $@";
theme/Adwaita/gtk-contained.css: $(top_srcdir)/gtk/theme/Adwaita/gtk-contained.scss
theme/Adwaita/gtk-contained.css: $(top_srcdir)/gtk/theme/Adwaita/gtk-contained.scss $(adwaita_theme_scss)
$(scss_verbose) $(MKDIR_P) $(dir $@) && $(SASSC) -a $< $@ || rm -f $@
theme/Adwaita/gtk-contained-dark.css: $(top_srcdir)/gtk/theme/Adwaita/gtk-contained-dark.scss
theme/Adwaita/gtk-contained-dark.css: $(top_srcdir)/gtk/theme/Adwaita/gtk-contained-dark.scss $(adwaita_theme_scss)
$(scss_verbose) $(MKDIR_P) $(dir $@) && $(SASSC) -a $< $@ || rm -f $@
theme/HighContrast/gtk-contained.css: $(top_srcdir)/gtk/theme/HighContrast/gtk-contained.scss
theme/HighContrast/gtk-contained.css: $(top_srcdir)/gtk/theme/HighContrast/gtk-contained.scss $(highcontrast_theme_scss)
$(scss_verbose) $(MKDIR_P) $(dir $@) && $(SASSC) -a $< $@ || rm -f $@
theme/HighContrast/gtk-contained-inverse.css: $(top_srcdir)/gtk/theme/HighContrast/gtk-contained-inverse.scss
theme/HighContrast/gtk-contained-inverse.css: $(top_srcdir)/gtk/theme/HighContrast/gtk-contained-inverse.scss $(highcontrast_theme_scss)
$(scss_verbose) $(MKDIR_P) $(dir $@) && $(SASSC) -a $< $@ || rm -f $@
endif # REBUILD_SCSS
@ -1326,6 +1322,8 @@ theme_sources = \
theme/win32/gtk.css \
theme/win32/gtk-win32-base.css \
$(adwaita_theme_scss) \
theme/Adwaita/gtk-contained.scss \
theme/Adwaita/gtk-contained-dark.scss \
theme/Adwaita/assets.txt \
theme/Adwaita/assets.svg \
theme/Adwaita/README \
@ -1334,6 +1332,8 @@ theme_sources = \
theme/Adwaita/gtk.css \
theme/Adwaita/gtk-dark.css \
$(highcontrast_theme_scss) \
theme/HighContrast/gtk-contained.scss \
theme/HighContrast/gtk-contained-inverse.scss \
theme/HighContrast/gtk-contained.css \
theme/HighContrast/gtk-contained-inverse.css \
theme/HighContrast/gtk.css \

2
gtk/theme/Adwaita/Gemfile
View File

@ -1,2 +0,0 @@
source 'https://rubygems.org'
gem "sass", "~> 3.4.0"

47
gtk/theme/Adwaita/README
View File

@ -1,36 +1,37 @@
Summary
-------
* Do not edit the CSS directly, edit the source SCSS files and process them with SASS (run
`./parse-sass.sh` when you have the required software installed, as described below)
* To be able to use the latest/adequate version of sass, install ruby, gem, sass & bundle.
On Fedora F20, this is done with `sudo dnf install rubygems && gem install bundle && bundle install`
from the same directory this README resides in.
* Do not edit the CSS directly, edit the source SCSS files
* To be able to use the latest/adequate version of sass, install sassc
* The configure script will detect whether or not you have sassc installed;
if you do, it will regenerate the CSS every time you modify the SCSS files.
How to tweak the theme
----------------------
Adwaita is a complex theme, so to keep it maintainable it's written and processed in SASS. The
generated CSS is then transformed into a gresource file during gtk build and used at runtime in a
non-legible or editable form.
Adwaita is a complex theme, so to keep it maintainable it's written and
processed in SASS. The generated CSS is then transformed into a gresource file
during gtk build and used at runtime in a non-legible or editable form.
It is very likely your change will happen in the _common.scss file. That's where all the widget
selectors are defined. Here's a rundown of the "supporting" stylesheets, that are unlikely to be the
right place for a drive by stylesheet fix:
It is very likely your change will happen in the _common.scss file. That's where
all the widget selectors are defined. Here's a rundown of the "supporting"
stylesheets, that are unlikely to be the right place for a drive by stylesheet
fix:
_colors.scss - global color definitions. We keep the number of defined colors to a necessary minimum,
most colors are derived form a handful of basics. It covers both the light variant and
the dark variant.
_colors.scss - global color definitions. We keep the number of defined
colors to a necessary minimum, most colors are derived
from a handful of basics. It covers both the light variant
and the dark variant.
_colors-public.scss - SCSS colors exported through gtk to allow for 3rd party apps color mixing.
_colors-public.scss - SCSS colors exported through gtk to allow for 3rd party
apps color mixing.
_drawing.scss - drawing helper mixings/functions to allow easier definition of widget drawing under
specific context. This is why Adwaita isn't 15000 LOC.
_drawing.scss - drawing helper mixings/functions to allow easier
definition of widget drawing under specific context. This
is why Adwaita isn't 15000 LOC.
_common.scss - actual definitions of style for each widget. This is where you are likely to add/remove
your changes.
_common.scss - actual definitions of style for each widget. This is
where you are likely to add/remove your changes.
You can read about SASS at http://sass-lang.com/documentation/. Once you make your changes to the
_common.scss file, you can either run the ./parse-sass.sh script or keep SASS watching for changes as you
edit. This is done by running `bundle exec sass --watch --sourcemap=none .` If sass is out of date, or is
missing, you can install it with `bundle install`.
You can read about SASS at http://sass-lang.com/documentation/. Once you make
your changes to the _common.scss file, GTK+ will rebuild the CSS files.

3
gtk/theme/Adwaita/parse-sass.sh
View File

@ -1,3 +0,0 @@
#!/bin/sh
bundle exec sass --update --sourcemap=none .

34
gtk/theme/Adwaita/render-assets.sh
View File

@ -1,34 +0,0 @@
#! /bin/bash
INKSCAPE="/usr/bin/inkscape"
OPTIPNG="/usr/bin/optipng"
SRC_FILE="assets.svg"
ASSETS_DIR="assets"
INDEX="assets.txt"
for i in `cat $INDEX`
do
if [ -f $ASSETS_DIR/$i.png ]; then
echo $ASSETS_DIR/$i.png exists.
else
echo
echo Rendering $ASSETS_DIR/$i.png
$INKSCAPE --export-id=$i \
--export-id-only \
--export-png=$ASSETS_DIR/$i.png $SRC_FILE >/dev/null #\
# && $OPTIPNG -o7 --quiet $ASSETS_DIR/$i.png
fi
if [ -f $ASSETS_DIR/$i@2.png ]; then
echo $ASSETS_DIR/$i@2.png exists.
else
echo
echo Rendering $ASSETS_DIR/$i@2.png
$INKSCAPE --export-id=$i \
--export-dpi=180 \
--export-id-only \
--export-png=$ASSETS_DIR/$i@2.png $SRC_FILE >/dev/null #\
# && $OPTIPNG -o7 --quiet $ASSETS_DIR/$i@2.png
fi
done
exit 0

2
gtk/theme/HighContrast/Gemfile
View File

@ -1,2 +0,0 @@
source 'https://rubygems.org'
gem "sass", "~> 3.4.0"

3
gtk/theme/HighContrast/parse-sass.sh
View File

@ -1,3 +0,0 @@
#!/bin/sh
bundle exec sass --update --sourcemap=none .