Use libsass/sassc instead of Ruby/Sass
as with upstream Adwaita
by roundabout, Tuesday, 4 April 2017, 13:06:56 (1491311216), pushed by roundabout, Sunday, 11 May 2025, 13:22:08 (1746969728)
Author identity: nana-4 <hnmaigo@gmail.com>
d026f4ed698a8db32503d390c78ab5a2ab9e2303
.gitignore
@@ -1,4 +1 @@
.sass-cache
*.css.map
Gemfile.lock
*.pem
Gemfile
@@ -1,2 +0,0 @@
source 'https://rubygems.org'
gem "sass", "~> 3.4.0"
HACKING.md
@@ -1,27 +1,26 @@
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)
- Do not edit the CSS directly, edit the source SCSS files and run `./parse-sass.sh`
- To be able to use the latest/adequate version of sass, install ruby, gem, sass & bundle.
On Fedora 25, this is done with `sudo dnf install rubygems && gem install bundle && bundle install`
from the same directory this `HACKING.md` resides in.
- To be able to use the latest/adequate version of sass, install `sassc`
How to tweak the theme
----------------------
Flat-Plat is a complex theme, so to keep it maintainable it's written and processed in SASS.
Flat-Plat is a complex theme, so to keep it maintainable it's written and
processed in SASS.
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.
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-public.scss`
@@ -29,25 +28,25 @@ right place for a drive by stylesheet fix:
- `_drawing.scss`
drawing helper mixings/functions to allow easier definition of widget drawing under
specific context. This is why Flat-Plat isn't 15000 LOC.
drawing helper mixings/functions to allow easier definition of widget drawing
under specific context. This is why Flat-Plat isn't 15000 LOC.
- `_common.scss`
actual definitions of style for each widget. This is where you are likely to add/remove your changes.
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, run the `./parse-sass.sh` script.
How to change the assets color
------------------------------
To keep it maintainable SVG files are basically edited on text-based.
So if you just want to change the SVG assets color, I recommend using a **text editor** instead of **Inkscape**.
But please note that in some cases Inkscape is needed to render PNG assets.
So if you just want to change the SVG assets color, I recommend using a
**text editor** instead of **Inkscape**. But please note that in some cases
Inkscape is needed to render PNG assets.
Here is an example to change the _accent color_:
parse-sass.sh
@@ -1,3 +1,16 @@
#!/bin/sh
bundle exec sass --update --sourcemap=none .
for color in '' '-dark' '-light' ; do
sassc src/gtk-3.0/3.18/gtk${color}.{scss,css}
for size in '' '-compact' ; do
for version in '3.20' '3.22' ; do
sassc src/gtk-3.0/${version}/gtk${color}${size}.{scss,css}
done
# This gnome-shell theme can skip versions '3.20' & '2.22'
for version in '3.18' '3.24' ; do
sassc src/gnome-shell/${version}/gnome-shell${color}${size}.{scss,css}
done
done
done