From 04b0f86433a3e45dd661f07707075866777f8f95 Mon Sep 17 00:00:00 2001 From: Jakub Steiner Date: Mon, 27 May 2019 16:03:40 +0200 Subject: [PATCH] theme: use light theme for popovers Make shell mimic Adwaita gtk. FIXME: - switches - buttons - modal dialogs https://gitlab.gnome.org/GNOME/gnome-shell/issues/1045 --- data/theme/gnome-shell-high-contrast.scss | 2 + data/theme/gnome-shell-sass/_colors.scss | 2 + data/theme/gnome-shell-sass/_common.scss | 18 +- data/theme/gnome-shell-sass/_drawing.scss | 286 ++++++++++++++---- .../_high-contrast-colors.scss | 2 + data/theme/gnome-shell.scss | 2 +- 6 files changed, 249 insertions(+), 63 deletions(-) diff --git a/data/theme/gnome-shell-high-contrast.scss b/data/theme/gnome-shell-high-contrast.scss index 23279caf3..4ac340c92 100644 --- a/data/theme/gnome-shell-high-contrast.scss +++ b/data/theme/gnome-shell-high-contrast.scss @@ -1,3 +1,5 @@ +$variant: 'light'; + @import "gnome-shell-sass/_high-contrast-colors"; //use gtk colors @import "gnome-shell-sass/_drawing"; @import "gnome-shell-sass/_common"; diff --git a/data/theme/gnome-shell-sass/_colors.scss b/data/theme/gnome-shell-sass/_colors.scss index 0a851f3a4..5ba0fb6e0 100644 --- a/data/theme/gnome-shell-sass/_colors.scss +++ b/data/theme/gnome-shell-sass/_colors.scss @@ -11,6 +11,7 @@ $selected_bg_color: if($variant == 'light', #3584e4, darken(#3584e4, 20%)); $selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 30%)); $borders_color: if($variant == 'light', darken($bg_color, 18%), darken($bg_color, 10%)); $borders_edge: if($variant == 'light', transparentize(white, 0.2), transparentize($fg_color, 0.93)); +$alt_borders_color: if($variant == 'light', darken($bg_color, 24%), darken($bg_color, 18%)); $link_color: if($variant == 'light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 20%)); $link_visited_color: if($variant == 'light', darken($selected_bg_color, 20%), lighten($selected_bg_color, 10%)); $top_hilight: $borders_edge; @@ -24,6 +25,7 @@ $osd_fg_color: #eeeeec; $osd_bg_color: #2e3436; $osd_borders_color: transparentize(black, 0.3); $osd_outer_borders_color: transparentize(white, 0.9); +$shadow_color: transparentize(black, 0.9); $tooltip_borders_color: $osd_outer_borders_color; diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss index 64cc612aa..1b975eeec 100644 --- a/data/theme/gnome-shell-sass/_common.scss +++ b/data/theme/gnome-shell-sass/_common.scss @@ -1012,8 +1012,11 @@ StScrollBar { } .message-list-clear-button.button { - background-color: transparent; - &:hover,&:focus { background-color: lighten($bg_color,5%); } + @include button(normal); + &:insensitive { @include button(insensitive); } + &:hover { @include button(hover); } + &:focus { @include button(focus); } + &:active { @include button(active); } margin: 1.5em 1.5em 0; } @@ -1537,12 +1540,12 @@ StScrollBar { width: 34em; margin: 5px; border-radius: 6px; - color: $_bubble_fg_color; - background-color: $_bubble_bg_color; + color: $fg_color; + background-color: $bg_color; border: 1px solid $borders_color; - //box-shadow: 0 1px 4px black; - &:hover { background-color: $_bubble_bg_color; } - &:focus { background-color: $_bubble_bg_color; } + box-shadow: 0 1px 4px black; + //&:hover { background-color: $bg_color; } + //&:focus { background-color: $bg_color; } .notification-icon { padding: 5px; } .notification-content { padding: 5px; spacing: 5px; } @@ -1557,7 +1560,6 @@ StScrollBar { background-color: darken($_bubble_bg_color,5%); &:first-child { border-radius: 0 0 0 6px; } &:last-child { border-radius: 0 0 6px 0; } - &:hover, &focus { background-color: darken($_bubble_bg_color,2%); } } } .summary-source-counter { diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss index 7ac18b1bb..882ba8f7f 100644 --- a/data/theme/gnome-shell-sass/_drawing.scss +++ b/data/theme/gnome-shell-sass/_drawing.scss @@ -111,7 +111,59 @@ } } -@mixin button($t, $c:$osd_bg_color, $tc:$fg_color, $edge: $borders_edge) { +@function _border_color($c, $darker: false) { + @if $darker == true { @return darken($c, 20%); } + @else { @return darken($c, 10%); } +} + +@function _text_shadow_color ($tc: $fg_color, $bg: $bg_color) { +// +// calculate the color of text shadows +// +// $tc is the text color +// $bg is the background color +// + $_lbg: lightness($bg)/100%; + @if lightness($tc)<50% { @return transparentize(white, 1-$_lbg/($_lbg*1.3)); } + @else { @return transparentize(black, $_lbg*0.8); } +} + +@function _button_hilight_color($c) { +// +// calculate the right top hilight color for buttons +// +// $c: base color; +// + @if lightness($c)>95% { @return white; } + @else if lightness($c)>90% { @return transparentize(white, 0.2); } + @else if lightness($c)>80% { @return transparentize(white, 0.5); } + @else if lightness($c)>50% { @return transparentize(white, 0.8); } + @else if lightness($c)>40% { @return transparentize(white, 0.9); } + @else { @return transparentize(white, 0.98); } +} + +@mixin _button_text_shadow ($tc:$fg_color, $bg:$bg_color) { +// +// helper function for the text emboss effect +// +// $tc is the optional text color, not the shadow color +// +// TODO: this functions needs a way to deal with special cases +// + + $_shadow: _text_shadow_color($tc, $bg); + + @if lightness($tc)<50% { + text-shadow: 0 1px $_shadow; + -gtk-icon-shadow: 0 1px $_shadow; + } + @else { + text-shadow: 0 -1px $_shadow; + -gtk-icon-shadow: 0 -1px $_shadow; + } +} + +@mixin button($t, $c:$bg_color, $tc:$fg_color, $edge: none) { // // Button drawing function // @@ -126,96 +178,222 @@ // backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active, // osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated // - +// This mixin sets the $button_fill global variable which containts the button background-image +// $_hilight_color: _button_hilight_color($c); $_button_edge: if($edge == none, none, _widget_edge($edge)); $_blank_edge: if($edge == none, none, _widget_edge(transparentize($edge,1))); - + $_button_shadow: 0 1px 2px transparentize($shadow_color, 0.03); @if $t==normal { // // normal button // - $_bg: if($c!=$osd_bg_color, transparentize($c, 0.5), - $osd_bg_color); - - color: $osd_fg_color; - background-color: $_bg; - border-color: $osd_borders_color; - box-shadow: inset 0 1px lighten($osd_bg_color,10%); - text-shadow: 0 1px black; - icon-shadow: 0 1px black; - } - @if $t==focus { - // - // focused button - // - $_bg: if($c!=$osd_bg_color, transparentize($c, 0.3), - lighten($osd_bg_color,3%)); - - color: $osd_fg_color; - text-shadow: 0 1px black; - icon-shadow: 0 1px black; - box-shadow: inset 0px 0px 0px 1px $selected_bg_color; + color: $tc; + outline-color: transparentize($tc, 0.7); + border-color: if($c != $bg_color, _border_color($c), $borders_color); + border-bottom-color: if($c != $bg_color, _border_color($c, true), $alt_borders_color); + $button_fill: if($variant == 'light', linear-gradient(to top, darken($c, 4%) 2px, $c), + linear-gradient(to top, darken($c,1%) 2px, $c)) !global; + background-image: $button_fill; + @include _button_text_shadow($tc, $c); + @include _shadows(inset 0 1px $_hilight_color, $_button_edge, $_button_shadow); } @else if $t==hover { // - // active osd button + // hovered button // - $_bg: if($c!=$osd_bg_color, transparentize($c, 0.3), - lighten($osd_bg_color,3%)); - - color: white; - border-color: $osd_borders_color; - background-color: $_bg; - box-shadow: inset 0 1px lighten($osd_bg_color,20%); - text-shadow: 0 1px black; - icon-shadow: 0 1px black; - + color: $tc; + outline-color: transparentize($tc, 0.7); + border-color: if($c != $bg_color, _border_color($c), $borders_color); + border-bottom-color: if($c != $bg_color, _border_color($c, true), $alt_borders_color); + @if $variant == 'light' { + $button_fill: linear-gradient(to top, $c, lighten($c, 1%) 1px) !global; + @include _button_text_shadow($tc, lighten($c, 6%)); + @include _shadows(inset 0 1px _button_hilight_color(lighten($c, 6%)), $_button_edge, $_button_shadow); + } + @else { + $button_fill: linear-gradient(to top, darken($c,1%), lighten($c, 1%) 1px) !global; + @include _button_text_shadow($tc,lighten($c, 6%)); + @include _shadows(inset 0 1px _button_hilight_color(darken($c, 2%)), $_button_edge, $_button_shadow); + } + background-image: $button_fill; } + + @if $t==normal-alt { + // + // normal button alternative look + // + color: $tc; + outline-color: transparentize($tc, 0.7); + border-color: if($c != $bg_color, _border_color($c, true), $alt_borders_color); + @include _button_text_shadow($tc, $c); + @if $variant == 'light' { + background-image: linear-gradient(to bottom, lighten($c, 5%) 20%, $c 90%); + @include _shadows(inset 0 1px _button_hilight_color(lighten($c, 6%)), + $_button_edge, $_button_shadow); + } + @else { + background-image: linear-gradient(to bottom, darken($c, 3%) 20%, darken($c, 6%) 90%); + @include _shadows(inset 0 1px $_hilight_color, + $_button_edge, $_button_shadow); + } + } + + @else if $t==hover-alt { + // + // hovered button alternative look + // + color: $tc; + outline-color: transparentize($tc, 0.7); + border-color: if($c != $bg_color, _border_color($c, true), $alt_borders_color); + @if $variant == 'light' { + $button_fill: linear-gradient(to bottom, lighten($c, 9%) 10%, lighten($c, 4%) 90%) !global; + @include _shadows(inset 0 1px _button_hilight_color(lighten($c, 6%)), + $_button_edge, $_button_shadow); + } + @else { + $button_fill: linear-gradient(to bottom, $c 20%, darken($c, 4%) 90%) !global; + @include _shadows(inset 0 1px $_hilight_color, + $_button_edge, $_button_shadow); + } + background-image: $button_fill; + } + @else if $t==active { // + // pushed button + // + color: $tc; + outline-color: transparentize($tc, 0.7); + border-color: if($c != $bg_color, _border_color($c), $borders_color); + $button_fill: if($variant == 'light', image(darken($c, 14%)), image(darken($c, 9%))) !global; + background-image: $button_fill; + @include _shadows(inset 0 1px transparentize($_hilight_color, 1), $_button_edge); + + text-shadow: none; + -gtk-icon-shadow: none; + } + + @else if $t==insensitive { + // + // insensitive button + // + $_bg: if($c != $bg_color, mix($c, $base_color, 85%), $insensitive_bg_color); + + label, & { color: if($tc != $fg_color, mix($tc, $_bg, 50%), $insensitive_fg_color); } + + border-color: if($c != $bg_color, _border_color($c), $insensitive_borders_color); + $button_fill: image($_bg) !global; + background-image: $button_fill; + text-shadow: none; + -gtk-icon-shadow: none; + // white with 0 alpha to avoid an ugly transition, since no color means + // black with 0 alpha + @include _shadows(inset 0 1px transparentize(white, 1), $_button_edge); + } + + @else if $t==insensitive-active { + // + // insensitive pushed button + // + $_bg: if($variant == 'light', darken(mix($c, $base_color, 85%), 8%), darken(mix($c, $base_color, 85%), 6%)); + $_bc: if($c != $bg_color, _border_color($c), $insensitive_borders_color); + + label, & { color: if($c != $bg_color, mix($tc, $_bg, 60%), $insensitive_fg_color); } + + border-color: $_bc; + $button_fill: image($_bg) !global; + background-image: $button_fill; + // white with 0 alpha to avoid an ugly transition, since no color means + // black with 0 alpha + @include _shadows(inset 0 1px transparentize(white, 1), $_button_edge); + } + + + @else if $t==osd { + // + // normal osd button + // + $_bg: if($c != $bg_color, transparentize($c, 0.5), $osd_bg_color); + + color: $osd_fg_color; + border-color: $osd_borders_color; + background-color: transparent; + $button_fill: image($_bg) !global; + background-image: $button_fill; + background-clip: padding-box; + box-shadow: inset 0 1px transparentize(white, 0.9); + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; + outline-color: transparentize($osd_fg_color, 0.7); + } + + @else if $t==osd-hover { + // // active osd button // - $_bg: if($c!=$bg_color, $c, $osd_borders_color); + $_bg: if($c != $bg_color, transparentize($c, 0.3), lighten($osd_bg_color, 12%)); color: white; border-color: $osd_borders_color; - background-color: $selected_bg_color; - // This should be none, but it's creating some issues with borders, so to - // workaround it for now, use inset wich goes through a different code path. - // see https://bugzilla.gnome.org/show_bug.cgi?id=752934 - box-shadow: inset 0 0 black; - text-shadow: none; - icon-shadow: none; + background-color: transparent; + $button_fill: image($_bg) !global; + background-image: $button_fill; + background-clip: padding-box; + box-shadow: inset 0 1px transparentize(white, 0.9); + text-shadow: 0 1px black; + -gtk-icon-shadow: 0 1px black; + outline-color: transparentize($osd_fg_color, 0.7); } - @else if $t==insensitive { + + @else if $t==osd-active { + // + // active osd button + // + $_bg: if($c != $bg_color, $c, $osd_borders_color); + + color: white; + border-color: $osd_borders_color; + background-color: transparent; + $button_fill: image($_bg) !global; + background-image: $button_fill; + background-clip: padding-box; + box-shadow: none; + text-shadow: none; + -gtk-icon-shadow: none; + outline-color: transparentize($osd_fg_color, 0.7); + } + + @else if $t==osd-insensitive { // // insensitive osd button // - $_bg: transparentize(mix($insensitive_fg_color,$osd_bg_color,20%),0.3); - - color: $insensitive_fg_color; + color: $osd_insensitive_fg_color; border-color: $osd_borders_color; - background-color: $_bg; + background-color: transparent; + $button_fill: image($osd_insensitive_bg_color) !global; + background-image: $button_fill; + background-clip: padding-box; box-shadow: none; text-shadow: none; - icon-shadow: none; + -gtk-icon-shadow: none; } + + @else if $t==undecorated { // // reset // border-color: transparent; background-color: transparent; - background-image: none; + $button_fill: none !global; + background-image: $button_fill; - @include _shadows(inset 0 1px transparentize(white,1), - $_blank_edge); + @include _shadows(inset 0 1px transparentize(white, 1), $_blank_edge); text-shadow: none; - icon-shadow: none; + -gtk-icon-shadow: none; } } - diff --git a/data/theme/gnome-shell-sass/_high-contrast-colors.scss b/data/theme/gnome-shell-sass/_high-contrast-colors.scss index af1e52f0c..24e146e3a 100644 --- a/data/theme/gnome-shell-sass/_high-contrast-colors.scss +++ b/data/theme/gnome-shell-sass/_high-contrast-colors.scss @@ -10,6 +10,7 @@ $selected_fg_color: #ffffff; $selected_bg_color: darken(#4a90d9,20%); $selected_borders_color: darken($selected_bg_color, 20%); $borders_color: darken($bg_color,12%); +$alt_borders_color: darken($bg_color,12%); $borders_edge: transparentize($fg_color, 0.9); $link_color: lighten($selected_bg_color,20%); $link_visited_color: lighten($selected_bg_color,10%); @@ -24,6 +25,7 @@ $osd_fg_color: #eeeeec; $osd_bg_color: #2e3436; $osd_borders_color: transparentize(black, 0.3); $osd_outer_borders_color: transparentize(white, 0.9); +$shadow_color: rgba(0,0,0,0); $tooltip_borders_color: $osd_outer_borders_color; diff --git a/data/theme/gnome-shell.scss b/data/theme/gnome-shell.scss index 3def5896c..62237fd5d 100644 --- a/data/theme/gnome-shell.scss +++ b/data/theme/gnome-shell.scss @@ -1,4 +1,4 @@ -$variant: 'dark'; +$variant: 'light'; @import "gnome-shell-sass/_colors"; //use gtk colors @import "gnome-shell-sass/_drawing";