sass: Allow different values depending on toolkits
With same variable names. This is useful especially for the shadow blur, which is calculated differently depending on the toolkits.
roundabout,
created on Saturday, 6 March 2021, 23:35:37 (1615073737),
received on Sunday, 11 May 2025, 13:22:59 (1746969779)
Author identity: nana-4 <hnmaigo@gmail.com>
071e5e4e0b448c9e3a5825135b16afafcb61c017
src/_variables.scss
@@ -1,4 +1,5 @@
$compact: false !default;
$toolkit: "none" !default;
$asset-suffix: if($dark-theme, "-dark", "");
@@ -58,55 +59,44 @@ $transition-shadow: box-shadow $duration $ease-out;
//
// Values are based on:
// https://github.com/material-components/material-components-web/blob/master/packages/mdc-elevation/_variables.scss
// NOTE: GTK 3 shadow blur less than 2px doesn't work properly, see
// https://gitlab.gnome.org/GNOME/gtk/issues/511
// NOTE 2: Compared to the Web rendering, GTK seems to have a bigger blur.
// https://github.com/material-components/material-components-web/blob/master/packages/mdc-elevation/_elevation-theme.scss
$shadow-z1:
// 0 2px (1px * .6) -1px rgba(black, .2),
0 2px 2px -2px rgba(black, .3),
// 0 1px (1px * .6) 0 rgba(black, .14),
0 1px 2px -1px rgba(black, .24),
// 0 1px (3px * .6) 0 rgba(black, .12);
0 1px 2px -.6px rgba(black, .17);
0 2px 1px -1px rgba(black, .2),
0 1px 1px 0 rgba(black, .14),
0 1px 3px 0 rgba(black, .12);
$shadow-z2:
// 0 3px (1px * .6) -2px rgba(black, .2),
0 3px 2px -3px rgba(black, .3),
// 0 2px (2px * .6) 0 rgba(black, .14),
0 2px 2px -1px rgba(black, .24),
0 1px (5px * .6) 0 rgba(black, .12);
0 3px 1px -2px rgba(black, .2),
0 2px 2px 0 rgba(black, .14),
0 1px 5px 0 rgba(black, .12);
$shadow-z3:
// 0 3px (3px * .6) -2px rgba(black, .2),
0 3px 2px -2px rgba(black, .2),
0 3px (4px * .6) 0 rgba(black, .14),
0 1px (8px * .6) 0 rgba(black, .12);
0 3px 3px -2px rgba(black, .2),
0 3px 4px 0 rgba(black, .14),
0 1px 8px 0 rgba(black, .12);
$shadow-z4:
0 2px (4px * .6) -1px rgba(black, .2),
0 4px (5px * .6) 0 rgba(black, .14),
0 1px (10px * .6) 0 rgba(black, .12);
0 2px 4px -1px rgba(black, .2),
0 4px 5px 0 rgba(black, .14),
0 1px 10px 0 rgba(black, .12);
$shadow-z6:
0 3px (5px * .6) -1px rgba(black, .2),
0 6px (10px * .6) 0 rgba(black, .14),
0 1px (18px * .6) 0 rgba(black, .12);
0 3px 5px -1px rgba(black, .2),
0 6px 10px 0 rgba(black, .14),
0 1px 18px 0 rgba(black, .12);
$shadow-z8:
0 5px (5px * .6) -3px rgba(black, .2),
0 8px (10px * .6) 1px rgba(black, .14),
0 3px (14px * .6) 2px rgba(black, .12);
0 5px 5px -3px rgba(black, .2),
0 8px 10px 1px rgba(black, .14),
0 3px 14px 2px rgba(black, .12);
$shadow-z12:
0 7px (8px * .6) -4px rgba(black, .2),
0 12px (17px * .6) 2px rgba(black, .14),
0 5px (22px * .6) 4px rgba(black, .12);
0 7px 8px -4px rgba(black, .2),
0 12px 17px 2px rgba(black, .14),
0 5px 22px 4px rgba(black, .12);
$shadow-z16:
0 8px (10px * .6) -5px rgba(black, .2),
0 16px (24px * .6) 2px rgba(black, .14),
0 6px (30px * .6) 5px rgba(black, .12);
0 8px 10px -5px rgba(black, .2),
0 16px 24px 2px rgba(black, .14),
0 6px 30px 5px rgba(black, .12);
$shadow-z24:
0 11px (15px * .6) -7px rgba(black, .2),
0 24px (38px * .6) 3px rgba(black, .14),
0 9px (46px * .6) 8px rgba(black, .12);
0 11px 15px -7px rgba(black, .2),
0 24px 38px 3px rgba(black, .14),
0 9px 46px 8px rgba(black, .12);
$text-shadow:
0 1px 1px rgba(black, .2),
@@ -117,8 +107,64 @@ $text-shadow:
$icon-shadow-z2:
0 1px 1px rgba(black, .2),
0 2px 2px rgba(black, .14),
0 1px (5px * .6) rgba(black, .12);
0 1px 5px rgba(black, .12);
$icon-shadow-z4:
0 2px 2px rgba(black, .2),
0 4px (5px * .6) rgba(black, .14),
0 1px (10px * .6) rgba(black, .12);
0 2px 3px rgba(black, .2),
0 4px 5px rgba(black, .14),
0 1px 10px rgba(black, .12);
// Note that GTK 3 does not support blur below 2px,
// and its blur is huge compared to web rendering.
// See: https://gitlab.gnome.org/GNOME/gtk/issues/511
@if $toolkit == "gtk3" {
$shadow-z1:
0 2px 2px -2px rgba(black, .3),
0 1px 2px -1px rgba(black, .24),
0 1px 2px -.6px rgba(black, .17);
$shadow-z2:
0 3px 2px -3px rgba(black, .3),
0 2px 2px -1px rgba(black, .24),
0 1px (5px * .6) 0 rgba(black, .12);
$shadow-z3:
0 3px 2px -2px rgba(black, .2),
0 3px (4px * .6) 0 rgba(black, .14),
0 1px (8px * .6) 0 rgba(black, .12);
$shadow-z4:
0 2px (4px * .6) -1px rgba(black, .2),
0 4px (5px * .6) 0 rgba(black, .14),
0 1px (10px * .6) 0 rgba(black, .12);
$shadow-z6:
0 3px (5px * .6) -1px rgba(black, .2),
0 6px (10px * .6) 0 rgba(black, .14),
0 1px (18px * .6) 0 rgba(black, .12);
$shadow-z8:
0 5px (5px * .6) -3px rgba(black, .2),
0 8px (10px * .6) 1px rgba(black, .14),
0 3px (14px * .6) 2px rgba(black, .12);
$shadow-z12:
0 7px (8px * .6) -4px rgba(black, .2),
0 12px (17px * .6) 2px rgba(black, .14),
0 5px (22px * .6) 4px rgba(black, .12);
$shadow-z16:
0 8px (10px * .6) -5px rgba(black, .2),
0 16px (24px * .6) 2px rgba(black, .14),
0 6px (30px * .6) 5px rgba(black, .12);
$shadow-z24:
0 11px (15px * .6) -7px rgba(black, .2),
0 24px (38px * .6) 3px rgba(black, .14),
0 9px (46px * .6) 8px rgba(black, .12);
$text-shadow:
0 1px 1px rgba(black, .2),
0 1px 2px rgba(black, .14),
0 1px 3px rgba(black, .12);
$icon-shadow-z2:
0 1px 1px rgba(black, .2),
0 2px 2px rgba(black, .14),
0 1px (5px * .6) rgba(black, .12);
$icon-shadow-z4:
0 2px 2px rgba(black, .2),
0 4px (5px * .6) rgba(black, .14),
0 1px (10px * .6) rgba(black, .12);
}
src/cinnamon/cinnamon.scss.in
@@ -1,3 +1,4 @@
$toolkit: "st";
$dark-theme: @dark_theme@;
$light-topbar: @light_topbar@;
$compact: @compact@;
src/gnome-shell/gnome-shell.scss.in
@@ -1,3 +1,4 @@
$toolkit: "st";
$dark-theme: @dark_theme@;
$light-topbar: @light_topbar@;
$compact: @compact@;
src/gtk-3.0/gtk-dark.scss.in
@@ -1,3 +1,4 @@
$toolkit: "gtk3";
$dark-theme: true;
$light-topbar: false;
$compact: @compact@;
src/gtk-3.0/gtk.scss.in
@@ -1,3 +1,4 @@
$toolkit: "gtk3";
$dark-theme: @dark_theme@;
$light-topbar: @light_topbar@;
$compact: @compact@;