3fe45e29e4
As the style has grown bigger and more complex, generating the different variants from a common source has been a good decision. However given how intertwined the theme is with gnome-shell itself, relying on a submodule has proven to be quite painful. And as things stand right now, it is going to get worse: - using either pre-generated CSS or generating it at build time is odd, and violates meson's strict separation between source- and build directories; we are therefore considering dropping the CSS and depending on sassc to always generate it at build time - with the migration to gitlab, our workflow shifts decisively towards branches; however there is no support in either git or gitlab for handling two brances of separate repositories consecutively, which gets particularly awkward for branches in a private namespace With those pain points in mind, we will adjust our setup as follows: - remove the submodule from gnome-shell and instead import the sass as subtree - after that, the sass sources can be changed like any other files in the repository, and regular contributors can forget that there was ever anything special about them - whenever we want to update the classic style, we can push the subtree changes and bump gnome-shell-extension's sass submodule In other words: Updating the classic styling will become slightly more painful, but not much and only for me; in return, everyone else can stop fiddling with submodules (and buy me a beer). |
||
---|---|---|
.. | ||
gnome-shell-sass | ||
calendar-arrow-left.svg | ||
calendar-arrow-right.svg | ||
calendar-today.svg | ||
checkbox-focused.svg | ||
checkbox-off-focused.svg | ||
checkbox-off.svg | ||
checkbox.svg | ||
close-window-active.svg | ||
close-window-hover.svg | ||
close-window.svg | ||
close.svg | ||
corner-ripple-ltr.png | ||
corner-ripple-rtl.png | ||
dash-placeholder.svg | ||
filter-selected-ltr.svg | ||
filter-selected-rtl.svg | ||
gnome-shell-high-contrast.css | ||
gnome-shell-high-contrast.scss | ||
gnome-shell.css | ||
gnome-shell.scss | ||
HACKING | ||
logged-in-indicator.svg | ||
meson.build | ||
message-indicator-symbolic.svg | ||
no-events.svg | ||
no-notifications.svg | ||
noise-texture.png | ||
pad-osd.css | ||
page-indicator-active.svg | ||
page-indicator-checked.svg | ||
page-indicator-hover.svg | ||
page-indicator-inactive.svg | ||
parse-sass.sh | ||
process-working.svg | ||
README | ||
running-indicator.svg | ||
source-button-border.svg | ||
summary-counter.svg | ||
toggle-off-hc.svg | ||
toggle-off-intl.svg | ||
toggle-off-us.svg | ||
toggle-on-hc.svg | ||
toggle-on-intl.svg | ||
toggle-on-us.svg | ||
ws-switch-arrow-down.png | ||
ws-switch-arrow-up.png |
Summary ------- * Do not edit the CSS directly, edit the source SCSS files and process them with SASS (running `make` should do that when you have the required software installed, as described below; run `./parse-sass.sh` manually if it doesn't) * Most SASS preprocessors should produce similar results, however the build system integration and 'parse-sass.sh' script use sassc. You should be able to install it with `pkcon install sassc` or your distribution's package manager. 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. 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 from a handful of basics. It is an exact copy of the gtk+ counterpart. Light theme is used for the classic theme and dark is for GNOME3 shell default. _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. 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 make or the ./parse-sass.sh script.