diff --git a/data/theme/gnome-shell-sass/_colors.scss b/data/theme/gnome-shell-sass/_colors.scss index d2f406b79..8bb3b4b5d 100644 --- a/data/theme/gnome-shell-sass/_colors.scss +++ b/data/theme/gnome-shell-sass/_colors.scss @@ -5,66 +5,70 @@ $is_highcontrast:false; +// base color for light theme $_dark_base_color: desaturate($dark_4, 100%); $base_color: if($variant == 'light', $light_1, $_dark_base_color); $bg_color: if($variant == 'light', $light_2, lighten($base_color, 5%)); -$fg_color: if($variant == 'light', transparentize(black, .2), white); +$fg_color: if($variant == 'light', $_dark_base_color, white); $selected_fg_color: $light_1; $selected_bg_color: $blue_3; $selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 20%)); -$borders_color: if($variant == 'light', transparentize($fg_color, .5), transparentize($fg_color, .9)); -$outer_borders_color: if($variant == 'light', rgba(255,255,255,0.8), lighten($bg_color, 5%)); +$borders_color: if($variant == 'light', transparentize($fg_color, .85), transparentize($fg_color, .9)); +$outer_borders_color: if($variant == 'light', darken($bg_color, 7%), lighten($bg_color, 5%)); $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%)); -$warning_color: if($variant == 'light', $yellow_5, #cd9309); +$warning_color: if($variant == 'light', $yellow_5, $yellow_3); $error_color: if($variant == 'light', $red_3, $red_4); $success_color: if($variant == 'light', $green_4, $green_5); $destructive_color: $error_color; -$osd_fg_color: $light_1; -$osd_bg_color: $_dark_base_color; //hardcoded for both light & dark +// color definitions for OSD elements +$osd_fg_color: if($variant == 'light', $_dark_base_color, $light_1); +$osd_bg_color: if($variant == 'light', $light_3, lighten($_dark_base_color, 5%)); + +// derived osd colors $osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5); -$osd_insensitive_fg_color: if($variant == 'light', mix($osd_fg_color, $osd_bg_color, 80%), mix($osd_fg_color, $osd_bg_color, 70%)); -$osd_borders_color: transparentize(black, 0.3); -$osd_outer_borders_color: transparentize($osd_fg_color, 0.9); +$osd_insensitive_fg_color: mix($osd_fg_color, $osd_bg_color, 70%); +$osd_borders_color: transparentize($osd_fg_color, 0.9); +$osd_outer_borders_color: transparentize($osd_fg_color, 0.98); -$shadow_color: if($variant == 'light', rgba(0,0,0,0.1), rgba(0,0,0,0.2)); +$shadow_color: if($variant == 'light', rgba(0,0,0,.05), rgba(0,0,0,0.2)); -// button -$button_mix_factor: 9%; +// buttons +$button_mix_factor: if($variant == 'light', 12%, 9%); // notifications $bubble_buttons_color: if($variant == 'light', darken($bg_color, 7%), lighten($bg_color, 5%)); -// overview background color -$system_bg_color: $base_color; +// color definitions for system elements (e.g. the overview) +$system_base_color: $_dark_base_color; // always dark +$system_fg_color: $light_2; -//insensitive state derived colors -$insensitive_fg_color: mix($fg_color, $bg_color, 50%); +// derived system colors +$system_bg_color: lighten($system_base_color, 5%); +$system_borders_color: transparentize($system_fg_color, .9); +$system_insensitive_fg_color: mix($system_fg_color, $system_bg_color, 50%); +$system_overlay_bg_color: mix($system_base_color, $system_fg_color, 90%); // for non-transparent items, e.g. dash + +// derived global colors +// insensitive state +$insensitive_fg_color: if($variant == 'light', mix($fg_color, $bg_color, 60%), mix($fg_color, $bg_color, 50%)); $insensitive_bg_color: mix($bg_color, $base_color, 60%); $insensitive_borders_color: mix($borders_color, $base_color, 60%); -//colors for the backdrop state, derived from the main colors. -$backdrop_base_color: if($variant =='light', darken($base_color,1%), lighten($base_color,1%)); -$backdrop_bg_color: $bg_color; -$backdrop_fg_color: mix($fg_color, $backdrop_bg_color, 80%); -$backdrop_insensitive_color: if($variant =='light', darken($backdrop_bg_color,15%), lighten($backdrop_bg_color,15%)); -$backdrop_borders_color: mix($borders_color, $bg_color, 90%); -$backdrop_dark_fill: mix($backdrop_borders_color,$backdrop_bg_color, 35%); - -// derived checked colors +// checked state $checked_bg_color: if($variant=='light', darken($bg_color, 7%), lighten($bg_color, 7%)); $checked_fg_color: if($variant=='light', darken($fg_color, 7%), lighten($fg_color, 7%)); -// derived hover colors -$hover_bg_color: if($variant=='light', darken($bg_color, 3%), lighten($bg_color, 10%)); -$hover_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 10%)); +// hover state +$hover_bg_color: if($variant=='light', darken($bg_color,9%), lighten($bg_color, 10%)); +$hover_fg_color: if($variant=='light', darken($fg_color,9%), lighten($fg_color, 10%)); -// derived active colors -$active_bg_color: if($variant=='light', darken($bg_color, 5%), lighten($bg_color, 12%)); -$active_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 12%)); +// active state +$active_bg_color: if($variant=='light', darken($bg_color, 11%), lighten($bg_color, 12%)); +$active_fg_color: if($variant=='light', darken($fg_color, 11%), lighten($fg_color, 12%)); diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss index 79c96001f..953bee598 100644 --- a/data/theme/gnome-shell-sass/_common.scss +++ b/data/theme/gnome-shell-sass/_common.scss @@ -57,18 +57,6 @@ stage { /* Common Stylings */ -// osd panels -%osd_panel { - color: $osd_fg_color; - background-color: $osd_bg_color; - border: 1px solid $osd_outer_borders_color; - border-radius: 999px; - padding: $base_padding*2; - @if $is_highcontrast { - border: 2px solid $hc_inset_color; - } -} - // icon tiles %tile { border-radius: $base_border_radius * 2; // 16px @@ -77,19 +65,24 @@ stage { border: 2px solid transparent; transition-duration: 200ms; text-align: center; + color: inherit; + @if $is_highcontrast { border-color: $hc_inset_color; } } // normal button styling -%button { +%button_common { border-radius: $base_border_radius; border-style: solid; border-width: 1px; font-weight: bold; padding: $base_padding*.5 $base_padding*4; +} +%button { + @extend %button_common; @include button(normal); &:focus { @include button(focus);} &:hover { @include button(hover);} @@ -111,19 +104,24 @@ stage { // normal entry style -%entry { +%entry_common { border-radius: $base_border_radius; padding: $base_padding*1.5 $base_padding*1.5; - color: $fg_color; selection-background-color: $selected_bg_color; selected-color: $selected_fg_color; - - @include entry(normal); - &:hover { @include entry(hover);} - &:focus { @include entry(focus);} - &:insensitive { @include entry(insensitive);} } +%entry { + @extend %entry_common; + @include entry(normal, $c:$fg_color); + &:hover { @include entry(hover, $c:$fg_color);} + &:focus { @include entry(focus, $c:$fg_color);} + &:insensitive { @include entry(insensitive, $c:$fg_color);} + + StLabel.hint-text { + color: transparentize($fg_color, 0.3); + } +} // buttons in dialogs/notifications // lighter in color and have a greater radius @@ -166,36 +164,21 @@ stage { } } -// buttons on OSD elements -// that are undecorated by default and use OSD colors -%osd_button { - @include button(undecorated); - &:insensitive { @include button(undecorated, $tc:$osd_fg_color, $c:$osd_bg_color);} - &:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color);} - &:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color);} - &:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color);} - &:outlined,&:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color);} -} - - // tooltip %tooltip { - background-color: $osd_bg_color; - color: $osd_fg_color; - border:1px solid $osd_outer_borders_color; + background-color: transparentize(black, 0.1); + color: $light_1; + border-radius: 99px; padding: $base_padding $base_padding * 2; text-align: center; @if $is_highcontrast { - background-color: $osd_bg_color; - color: $osd_fg_color; - border: 1px solid $hc_inset_color; + border-color: $hc_inset_color; } } /* General Typography */ - %large_title { font-weight: 300; @include fontsize(24); @@ -243,3 +226,68 @@ stage { %monospace {font-family: monospace;} %numeric { font-feature-settings: "tnum";} + + +/* OSD Elements */ +%osd_panel { + color: $osd_fg_color; + background-color: $osd_bg_color; + border: 1px solid $osd_outer_borders_color; + border-radius: 999px; + padding: $base_padding*2; + + @if $is_highcontrast { + border: 2px solid $hc_inset_color; + } +} + +// entries +%osd_entry { + @extend %entry_common; + @include entry(normal, $c:$osd_fg_color,); + &:hover { @include entry(hover, $c:$osd_fg_color,);} + &:focus { @include entry(focus, $c:$osd_fg_color,);} + &:insensitive { @include entry(insensitive, $c:$osd_fg_color,);} + + StLabel.hint-text {color: transparentize($osd_fg_color, 0.3); } +} + +// buttons on OSD elements +%osd_button { + @extend %button_common; + @include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color); + &:insensitive { @include button(insensitive, $tc:$osd_fg_color, $c:$osd_bg_color);} + &:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color);} + &:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color);} + &:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color);} + &:outlined,&:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color);} +} + +%osd_button_flat { + @extend %osd_button; + @include button(undecorated); + &:insensitive { @include button(undecorated, $tc:$osd_fg_color, $c:$osd_bg_color);} +} + +/* System Elements */ + +// entries +%system_entry { + @extend %entry_common; + @include entry(normal, $c:$system_fg_color,); + &:hover { @include entry(hover, $c:$system_fg_color,);} + &:focus { @include entry(focus, $c:$system_fg_color,);} + &:insensitive { @include entry(insensitive, $c:$system_fg_color,);} + + StLabel.hint-text { color: transparentize($system_fg_color, 0.3);} +} + +// buttons +%system_button { + @include button(normal, $tc:$system_fg_color, $c:$system_bg_color); + &:insensitive { @include button(insensitive, $tc:$system_fg_color, $c:$system_bg_color);} + &:focus { @include button(focus, $tc:$system_fg_color, $c:$system_bg_color);} + &:hover { @include button(hover, $tc:$system_fg_color, $c:$system_bg_color);} + &:active { @include button(active, $tc:$system_fg_color, $c:$system_bg_color);} + &:outlined,&:checked { @include button(checked, $tc:$system_fg_color, $c:$system_bg_color);} +} diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss index 80d59cb33..a69d38175 100644 --- a/data/theme/gnome-shell-sass/_drawing.scss +++ b/data/theme/gnome-shell-sass/_drawing.scss @@ -23,23 +23,22 @@ @else { box-shadow: $shadow1; } } -// entries -@mixin entry($t, $fc:$selected_bg_color) { +// Text entries +@mixin entry($t, $c) { // // Entries drawing function // // $t: entry type -// $fc: focus color +// $c: text color, used to derive background color of entries // -// possible $t values: -// normal, focus, insensitive +// possible $t values: normal, focus, insensitive // transition-duration: 100ms; @if $t==normal { - background-color: transparentize($fg_color, 0.9); - color: transparentize($fg_color,0.3); + background-color: transparentize($c, 0.85); + color: transparentize($c,0.3); @if $is_highcontrast { box-shadow: inset 0 0 0 1px $hc_inset_color; @@ -47,20 +46,19 @@ } @if $t==focus { - background-color: mix(transparentize($fg_color, 0.8), $selected_bg_color, 95%); - box-shadow: inset 0 0 0 2px $fc; - color: $fg_color; + background-color: mix(transparentize($c, 0.75), $selected_bg_color, 95%); + box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3); + color: $c; &:hover {} } @if $t==hover { - background-color:transparentize($fg_color, 0.8); - color: inherit; + background-color: transparentize($c, 0.75); } @if $t==insensitive { - background-color:transparentize($insensitive_fg_color, 0.8); - color: $insensitive_fg_color; + background-color:transparentize($c, 0.75); + color: transparentize($c, 0.5); } } @@ -162,29 +160,6 @@ } } - // hover button - @else if $t==hover { - color: $tc; - background-color: lighten($button_bg_color, 3%); - @if $is_highcontrast { - box-shadow: inset 0 0 0 1px $hc_inset_color !important; - } - } - - // active button - @else if $t==active { - color: $tc; - background-color: lighten($button_bg_color, 9%); - } - - // checked button - @else if $t==checked { - color: $tc; - background-color: lighten($button_bg_color, 9%); - &:hover { background-color: lighten($button_bg_color, 12%);} - &:active { background-color: lighten($button_bg_color, 15%);} - } - // focused button @if $t==focus { color: $tc; @@ -200,6 +175,39 @@ } } + // hover button + @else if $t==hover { + color: $tc; + background-color: if($variant == 'light', darken($button_bg_color, 3%), lighten($button_bg_color, 3%)); + + @if $is_highcontrast == "true" { + box-shadow: inset 0 0 0 1px lighten($button_inset_color, 3%); + background-color: mix(lighten($button_bg_color, 3%), $button_inset_color, 10%); + } + } + + // active button + @else if $t==active { + color: $tc; + background-color: if($variant == 'light', darken($button_bg_color, 6%), lighten($button_bg_color, 6%)); + @if $is_highcontrast == "true" { + box-shadow: inset 0 0 0 1px lighten($button_inset_color, 6%); + background-color: mix(lighten($button_bg_color, 6%), $button_inset_color, 10%); + } + } + + // checked button + @else if $t==checked { + color: $tc; + background-color: if($variant == 'light', darken($button_bg_color, 9%), lighten($button_bg_color, 9%)); + @if $is_highcontrast == "true" { + box-shadow: inset 0 0 0 1px lighten($button_inset_color, 9%); + background-color: mix(lighten($button_bg_color, 9%), $button_inset_color, 10%); + } + &:hover { background-color: lighten($button_bg_color, 12%);} + &:active { background-color: lighten($button_bg_color, 15%);} + } + // insensitive button @else if $t==insensitive { color: transparentize($tc, 0.5); @@ -274,17 +282,15 @@ // overview icon, dash, app grid @mixin overview_icon($color, $flat: true) { transition-duration: 400ms; - .overview-icon { + .overview-icon { @extend %tile; } @if $flat { .overview-icon { background-color: transparent;} } @else { - .overview-icon { - background-color: transparentize($color, .93); - } + .overview-icon { background-color: transparentize($color, .93); } } - &:hover .overview-icon { background-color: transparentize($color, .9);} + &:hover .overview-icon { background-color: transparentize($color, .87);} &:selected .overview-icon, &:focus .overview-icon { @@ -319,6 +325,12 @@ &:hover {@include button(hover);} &:active {@include button(active);} &:focus {@include button(focus);} + &:insensitive { + @include button(insensitive); + @if $flat { + background-color: transparent; + } + } } // styling for all menuitems in popovers diff --git a/data/theme/gnome-shell-sass/_high-contrast-colors.scss b/data/theme/gnome-shell-sass/_high-contrast-colors.scss index 4d9aafdd7..dc74a7e88 100644 --- a/data/theme/gnome-shell-sass/_high-contrast-colors.scss +++ b/data/theme/gnome-shell-sass/_high-contrast-colors.scss @@ -5,66 +5,70 @@ $is_highcontrast:true; -$base_color: if($variant == 'light', white, black); +$base_color: if($variant == 'light', $light_1, $dark_5); $bg_color: if($variant == 'light', darken($base_color, 10%), lighten($base_color, 10%)); -$fg_color: if($variant == 'light', transparentize(black, .2), white); +$fg_color: if($variant == 'light', transparentize($dark_5, .2), $light_1); -$selected_fg_color: white; +$selected_fg_color: $light_1; $selected_bg_color: $blue_3; - $selected_borders_color: darken($selected_bg_color, 20%); + $borders_color: if($variant == 'light', transparentize($fg_color, .5), transparentize($fg_color, .7)); $outer_borders_color: $borders_color; + $link_color: lighten($selected_bg_color,20%); $link_visited_color: lighten($selected_bg_color,10%); -$warning_color: if($variant == 'light', $yellow_5, #cd9309); +$warning_color: if($variant == 'light', $yellow_5, $yellow_3); $error_color: if($variant == 'light', $red_3, $red_4); $success_color: if($variant == 'light', $green_4, $green_5); $destructive_color: $error_color; -$osd_fg_color: white; +// color definitions for OSD elements +$osd_fg_color: $light_1; $osd_bg_color: $base_color; + +// derived osd colors $osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5); -$osd_insensitive_fg_color: if($variant == 'light', mix($osd_fg_color, $osd_bg_color, 80%), mix($osd_fg_color, $osd_bg_color, 70%)); +$osd_insensitive_fg_color: mix($osd_fg_color, $osd_bg_color, 70%); $osd_borders_color: transparentize($osd_fg_color, 0.8); $osd_outer_borders_color: $osd_borders_color; $shadow_color: rgba(0,0,0,0); -// hc -$hc_inset_color: transparentize($fg_color, 0.7); - // button $button_mix_factor: 20%; // notifications $bubble_buttons_color: if($variant == 'light', darken($bg_color, 7%), lighten($bg_color, 5%)); -// overview background color -$system_bg_color: black; +// color definitions for system elements +$system_base_color: $dark_5; +$system_fg_color: $light_1; -//insensitive state derived colors +// derived system colors +$system_bg_color: lighten($system_base_color, 5%); +$system_borders_color: transparentize($system_fg_color, .9); +$system_insensitive_fg_color: mix($system_fg_color, $system_bg_color, 50%); +$system_overlay_bg_color: mix($system_bg_color, $system_fg_color, 90%); + +// derived global colors +// insensitive state $insensitive_fg_color: mix($fg_color, $bg_color, 50%); $insensitive_bg_color: mix($bg_color, $base_color, 60%); $insensitive_borders_color: $borders_color; -//colors for the backdrop state, derived from the main colors. -$backdrop_base_color: lighten($base_color,1%); -$backdrop_bg_color: $bg_color; -$backdrop_fg_color: mix($fg_color, $backdrop_bg_color, 80%); -$backdrop_insensitive_color: lighten($backdrop_bg_color,15%); -$backdrop_borders_color: mix($borders_color, $bg_color, 90%); -$backdrop_dark_fill: mix($backdrop_borders_color,$backdrop_bg_color, 35%); - -// derived checked colors +// checked state $checked_bg_color: if($variant=='light', darken($bg_color, 12%), lighten($bg_color, 18%)); $checked_fg_color: if($variant=='light', darken($fg_color, 12%), lighten($fg_color, 18%)); -// derived hover colors +// hover state $hover_bg_color: if($variant=='light', darken($bg_color, 8%), lighten($bg_color, 20%)); $hover_fg_color: if($variant=='light', darken($fg_color, 10%), lighten($fg_color, 20%)); -// derived active colors +// active state $active_bg_color: if($variant=='light', darken($bg_color, 10%), lighten($bg_color, 22%)); $active_fg_color: if($variant=='light', darken($fg_color, 10%), lighten($fg_color, 22%)); + +// inset colour for high contrast +$hc_inset_color: transparentize($fg_color, 0.7); diff --git a/data/theme/gnome-shell-sass/widgets/_app-grid.scss b/data/theme/gnome-shell-sass/widgets/_app-grid.scss index 31d43829e..1334a0674 100644 --- a/data/theme/gnome-shell-sass/widgets/_app-grid.scss +++ b/data/theme/gnome-shell-sass/widgets/_app-grid.scss @@ -18,11 +18,12 @@ $app_icon_size: 96px; // Icon tiles in the app grid .app-well-app { - @include overview_icon($osd_fg_color); + @include overview_icon($system_fg_color); .overview-icon { padding: $base_padding*2; border-radius: $base_border_radius*3; + color: $system_fg_color; } .overview-icon.overview-icon-with-label { > StBoxLayout { @@ -33,7 +34,7 @@ $app_icon_size: 96px; // app folders .app-well-app.app-folder { - @include overview_icon($fg_color, $flat: false); + @include overview_icon($system_fg_color, $flat: false); } // expanded folder @@ -62,7 +63,7 @@ $app_icon_size: 96px; } /* FIXME: this is to keep the label in sync with the entry */ - & .folder-name-label { padding: 5px 7px; color: $osd_fg_color; } + & .folder-name-label { padding: 5px 7px; color: $system_fg_color; } & .edit-folder-button { @extend %button; @@ -100,7 +101,7 @@ $app_icon_size: 96px; width: 5px; border-radius:5px; margin-bottom: 8px; - background-color: $osd_fg_color; + background-color: $system_fg_color; } // Rename popup for app folders @@ -130,8 +131,8 @@ $app_icon_size: 96px; // shutdown and other actions in the grid .system-action-icon { - background-color: rgba(0,0,0,0.8); - color: white; + background-color: transparentize($system_fg_color,.9); + color: $system_fg_color; border-radius: 99px; icon-size: $app_icon_size * 0.5; @if $is_highcontrast { @@ -167,11 +168,14 @@ $app_icon_size: 96px; width: 24px; height: 24px; border-radius: 99px; + + > StIcon { color: $system_fg_color;} + @if $is_highcontrast { - @include button(normal, $osd_fg_color, transparentize($osd_bg_color, 0.5)); + @include button(normal, $system_fg_color, transparentize($system_bg_color, 0.5)); } - &:insensitive { @include button(undecorated, $osd_fg_color, transparentize($osd_bg_color, 0.5));} - &:hover { @include button(hover, $osd_fg_color, transparentize($osd_bg_color, 0.5));} - &:active { @include button(active, $osd_fg_color, transparentize($osd_bg_color, 0.5));} + &:insensitive { @include button(undecorated, $system_fg_color, transparentize($system_bg_color, 0.5));} + &:hover { @include button(hover, $system_fg_color, transparentize($system_bg_color, 0.5));} + &:active { @include button(active, $system_fg_color, transparentize($system_bg_color, 0.5));} } diff --git a/data/theme/gnome-shell-sass/widgets/_calendar.scss b/data/theme/gnome-shell-sass/widgets/_calendar.scss index df91dce5f..393221627 100644 --- a/data/theme/gnome-shell-sass/widgets/_calendar.scss +++ b/data/theme/gnome-shell-sass/widgets/_calendar.scss @@ -78,7 +78,7 @@ &:hover {background-color: $hover_bg_color;} &:focus { background-color: mix($bg_color, $selected_bg_color, 80%); - color: $selected_fg_color; + color: inherit; box-shadow:inset 0 0 0 2px transparentize($selected_bg_color, 0.4); } @@ -166,11 +166,11 @@ .events-list { spacing: 2 * $base_padding; + color: $fg_color; } .events-title { @extend %heading; - color: $insensitive_fg_color; margin-bottom: $base_margin; } diff --git a/data/theme/gnome-shell-sass/widgets/_dash.scss b/data/theme/gnome-shell-sass/widgets/_dash.scss index 8f9b5e713..4af0ab0da 100644 --- a/data/theme/gnome-shell-sass/widgets/_dash.scss +++ b/data/theme/gnome-shell-sass/widgets/_dash.scss @@ -1,6 +1,8 @@ /* Dash */ -$dash_background_color: lighten($system_bg_color, 5%); +// uses system colors +$dash_background_color: $system_overlay_bg_color; + $dash_placeholder_size: 32px; $dash_padding: $base_padding*2; // 12px $dash_border_radius: $modal_radius + $dash_padding; @@ -55,10 +57,11 @@ $dash_border_radius: $modal_radius + $dash_padding; } // show apps button - .show-apps { @include overview_icon($osd_fg_color);} + .show-apps { @include overview_icon($system_fg_color);} .show-apps, .app-well-app { padding-bottom: $dash_padding; + color: $system_fg_color; } } @@ -66,7 +69,7 @@ $dash_border_radius: $modal_radius + $dash_padding; .dash-separator { width: 1px; margin: 0 $base_margin; - background-color: $borders_color; + background-color: $system_borders_color; margin-bottom: $dash_padding; @if $is_highcontrast { width: 2px; diff --git a/data/theme/gnome-shell-sass/widgets/_entries.scss b/data/theme/gnome-shell-sass/widgets/_entries.scss index ed65b7876..a10546fa9 100644 --- a/data/theme/gnome-shell-sass/widgets/_entries.scss +++ b/data/theme/gnome-shell-sass/widgets/_entries.scss @@ -16,6 +16,5 @@ StEntry { StLabel.hint-text { margin-left: 2px; - color: transparentize($fg_color, 0.3); } } diff --git a/data/theme/gnome-shell-sass/widgets/_login-lock.scss b/data/theme/gnome-shell-sass/widgets/_login-lock.scss index cc67cb954..212a2d385 100644 --- a/data/theme/gnome-shell-sass/widgets/_login-lock.scss +++ b/data/theme/gnome-shell-sass/widgets/_login-lock.scss @@ -1,5 +1,5 @@ $_gdm_bg: $system_bg_color; -$_gdm_fg: white; +$_gdm_fg: $system_fg_color; $_gdm_dialog_width: 23em; // common style for gdm and lockscreen @@ -19,12 +19,12 @@ $_gdm_dialog_width: 23em; // buttons .login-dialog-button { - @extend .button; &.cancel-button, &.switch-user-button, &.login-dialog-session-list-button { @extend .icon-button; + @extend %system_button; } &.cancel-button { @@ -145,7 +145,9 @@ $_gdm_dialog_width: 23em; width: 26em; } -.login-dialog-prompt-entry {} +.login-dialog-prompt-entry { + @extend %system_entry; +} /* Screen Shield */ diff --git a/data/theme/gnome-shell-sass/widgets/_looking-glass.scss b/data/theme/gnome-shell-sass/widgets/_looking-glass.scss index adcc372d6..f351794de 100644 --- a/data/theme/gnome-shell-sass/widgets/_looking-glass.scss +++ b/data/theme/gnome-shell-sass/widgets/_looking-glass.scss @@ -2,19 +2,21 @@ // Dialog #LookingGlassDialog { - background-color: transparentize($bg_color,0.05); + + @extend %osd_panel; + background-color: transparentize($osd_bg_color,0.02); + color: $osd_fg_color; + border-radius: 0 0 $modal_radius $modal_radius; - border: 1px solid $outer_borders_color; + border-top-width: 0; - color: $fg_color; padding: $base_padding; spacing: $base_padding; box-shadow: 0 2px 4px 0 $shadow_color; @if $is_highcontrast { border: 2px solid $hc_inset_color; - background-color: $bg_color; - border-top-width: 0; + background-color: $osd_bg_color; box-shadow:none; } @@ -26,21 +28,21 @@ spacing: $base_padding; .lg-toolbar-button { + @extend %osd_button; padding: $base_padding $base_padding*2; - @extend %button; & > StIcon { icon-size: $base_icon_size; } } } - .labels { + .labels { spacing: $base_padding; } .notebook-tab { + @extend %osd_button; -natural-hpadding: $base_padding*2; -minimum-hpadding: $base_padding*2; - @extend %button; padding: $base_padding $base_padding*2; } @@ -51,8 +53,8 @@ .lg-dialog { StEntry { + @extend %osd_entry; min-height: 22px; - @extend %entry; } .shell-link { @@ -118,9 +120,9 @@ .lg-debug-flag-button { StLabel { padding: $base_padding, 2 * $base_padding; } - color: $fg_color; - &:hover { color: lighten($fg_color, 20%); } - &:active { color: darken($fg_color, 20%); } + color: $osd_fg_color; + &:hover { color: lighten($osd_fg_color, 20%); } + &:active { color: darken($osd_fg_color, 20%); } } .lg-debug-flags-header { diff --git a/data/theme/gnome-shell-sass/widgets/_message-list.scss b/data/theme/gnome-shell-sass/widgets/_message-list.scss index d0e5d8551..9a9144b80 100644 --- a/data/theme/gnome-shell-sass/widgets/_message-list.scss +++ b/data/theme/gnome-shell-sass/widgets/_message-list.scss @@ -10,9 +10,9 @@ &:ltr {margin-left: 0; margin-right: $base_margin; padding-right: $base_padding; border-right-width: 1px; } &:rtl {margin-right: 0; margin-left: $base_margin; padding-left: $base_padding; border-left-width: 1px; } - .message-list-placeholder { + .message-list-placeholder { @extend %title_2; - color: transparentize($insensitive_fg_color, .5); + color: $insensitive_fg_color; // icon size and color > StIcon { @@ -25,7 +25,7 @@ .message-list-sections { spacing: $base_padding; - margin: 0; + margin: 0; padding-bottom: $base_padding; // to account for scrollbar @@ -117,14 +117,14 @@ // close button .message-close-button { color: $fg_color; - background-color: transparentize($fg_color, 0.9); + background-color: transparentize($fg_color, 0.8); border-radius: 99px; padding: $base_padding - 1px; margin: 1px; - &:hover {background-color: transparentize($fg_color, 0.8);} - &:active {background-color: transparentize($fg_color, 0.9);} + &:hover {background-color: transparentize($fg_color, 0.7);} + &:active {background-color: transparentize($fg_color, 0.8);} - & StIcon { icon-size: $base_icon_size; } + > StIcon { icon-size: $base_icon_size; } } // body @@ -154,7 +154,7 @@ color: $fg_color; } - &:active { + &:active { background-color: lighten($active_bg_color, 5%); color: $fg_color; } @@ -165,7 +165,7 @@ border-color: transparent; } } - + // fix margin for last button &:last-child:ltr { margin-right: $base_margin*3; } &:last-child:rtl { margin-left: $base_margin*3; } diff --git a/data/theme/gnome-shell-sass/widgets/_misc.scss b/data/theme/gnome-shell-sass/widgets/_misc.scss index 0a98d570b..8c127de3b 100644 --- a/data/theme/gnome-shell-sass/widgets/_misc.scss +++ b/data/theme/gnome-shell-sass/widgets/_misc.scss @@ -30,7 +30,7 @@ .flashspot { background-color: white; } // Hidden -.hidden { color: rgba(0,0,0,0);} +.hidden { color: transparent;} // Caps-lock warning .caps-lock-warning-label { diff --git a/data/theme/gnome-shell-sass/widgets/_overview.scss b/data/theme/gnome-shell-sass/widgets/_overview.scss index d8e70eaf2..301875e19 100644 --- a/data/theme/gnome-shell-sass/widgets/_overview.scss +++ b/data/theme/gnome-shell-sass/widgets/_overview.scss @@ -5,7 +5,7 @@ } #overviewGroup { - background-color: $system_bg_color; + background-color: $system_base_color; } .overview-controls { diff --git a/data/theme/gnome-shell-sass/widgets/_panel.scss b/data/theme/gnome-shell-sass/widgets/_panel.scss index 487eb0f5b..650d4fa83 100644 --- a/data/theme/gnome-shell-sass/widgets/_panel.scss +++ b/data/theme/gnome-shell-sass/widgets/_panel.scss @@ -1,8 +1,11 @@ /* Top Bar */ // a.k.a. the panel -$panel_bg_color: #000; -$panel_fg_color: if($variant == 'light', lighten($bg_color, 10%), darken($fg_color, 5%)); +$panel_bg_color: if($variant == 'light', $light_3, $dark_5); +$panel_fg_color: if($variant == 'light', $fg_color, darken($fg_color, 5%)); +$panel_border_color: if($variant == 'light', darken($panel_bg_color, 2%), $panel_bg_color); + +$panel_system_fg_color: $system_fg_color; // always light for lockscreen, overview and other transparent panels $panel_height: 2.2em; $panel_transition_duration: 250ms; // same as the overview transition duration @@ -12,12 +15,17 @@ $panel_transition_duration: 250ms; // same as the overview transition duration height: $panel_height; @extend %numeric; transition-duration: $panel_transition_duration; + box-shadow: inset 0 -1px 0 0 $panel_border_color; // transparent panel on lock & login screens &.unlock-screen, &.login-screen, &:overview { background-color: transparent; + box-shadow: none; + .panel-button { + color: $panel_system_fg_color !important; + } } // panel menus @@ -141,13 +149,13 @@ $panel_transition_duration: 250ms; // same as the overview transition duration &:overview { .panel-button { &:active, &:overview, &:focus, &:checked { - box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.15); + box-shadow: inset 0 0 0 100px transparentize($panel_system_fg_color, 0.85); &.clock-display { box-shadow: none; .clock { - box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.15); + box-shadow: inset 0 0 0 100px transparentize($panel_system_fg_color, 0.85); } } @@ -160,11 +168,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration } &:hover { - box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.10); + box-shadow: inset 0 0 0 100px transparentize($panel_system_fg_color, 0.90); &.clock-display { box-shadow: none; .clock { - box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.10); + box-shadow: inset 0 0 0 100px transparentize($panel_system_fg_color, 0.90); } } @@ -177,11 +185,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration } &:active:hover, &:overview:hover, &:focus:hover, &:checked:hover { - box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.2); + box-shadow: inset 0 0 0 100px transparentize($panel_system_fg_color, 0.8); &.clock-display { box-shadow: none; .clock { - box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.2); + box-shadow: inset 0 0 0 100px transparentize($panel_system_fg_color, 0.8); } } diff --git a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss index d6b4e5a3d..82a5e11aa 100644 --- a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss +++ b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss @@ -91,6 +91,11 @@ .quick-toggle-menu { @include card; + + // override some card styles + background-color: $bg_color !important; + color: $fg_color !important; + border-radius: $base_border_radius*3; padding: $base_padding*2; margin: $base_padding*2 $base_padding*3 0; @@ -108,7 +113,10 @@ padding: 1.5 * $base_padding; background-color: transparentize($fg_color, 0.8); - &.active { background-color: $selected_bg_color;} + &.active { + background-color: $selected_bg_color; + color: $selected_fg_color; + } } & .title { diff --git a/data/theme/gnome-shell-sass/widgets/_screenshot.scss b/data/theme/gnome-shell-sass/widgets/_screenshot.scss index 150f273b4..039d977a3 100644 --- a/data/theme/gnome-shell-sass/widgets/_screenshot.scss +++ b/data/theme/gnome-shell-sass/widgets/_screenshot.scss @@ -33,7 +33,7 @@ $screenshot_ui_button_red: $error_color; } .screenshot-ui-type-button { - @extend %osd_button; + @extend %osd_button_flat; min-width: 48px; padding: $base_padding * 2 $base_padding * 3 !important; border-radius: $screenshot_ui_panel_border_radius - $screenshot_ui_panel_padding; @@ -106,7 +106,7 @@ $screenshot_ui_button_red: $error_color; } .screenshot-ui-show-pointer-button { - @extend %osd_button; + @extend %osd_button_flat; border-radius: 99px; padding: $base_padding * 2 !important; StIcon { icon-size: $base_icon_size;} @@ -129,7 +129,7 @@ $screenshot_ui_button_red: $error_color; .screenshot-ui-area-selector-handle { border-radius: 99px; background-color: white; - box-shadow: 0 1px 3px 2px rgba(0,0,0,0.2); + box-shadow: 0 1px 3px 2px $shadow_color; width: 24px; height: 24px; } diff --git a/data/theme/gnome-shell-sass/widgets/_search-entry.scss b/data/theme/gnome-shell-sass/widgets/_search-entry.scss index 4ae86187f..8b766ba0d 100644 --- a/data/theme/gnome-shell-sass/widgets/_search-entry.scss +++ b/data/theme/gnome-shell-sass/widgets/_search-entry.scss @@ -5,6 +5,8 @@ margin-bottom: $base_padding; width: 24em; + @extend %system_entry; + .search-entry-icon { icon-size: $base_icon_size; margin-top: 2px; // center vertically diff --git a/data/theme/gnome-shell-sass/widgets/_search-results.scss b/data/theme/gnome-shell-sass/widgets/_search-results.scss index b7d72c9b6..b281ba5b5 100644 --- a/data/theme/gnome-shell-sass/widgets/_search-results.scss +++ b/data/theme/gnome-shell-sass/widgets/_search-results.scss @@ -23,22 +23,22 @@ // content .search-section-content { - background-color: lighten($system_bg_color, 5%); + background-color: $system_overlay_bg_color; + color: $system_fg_color; border-radius: $modal_radius*1.5; - box-shadow:inset 0 0 0 1px solid $outer_borders_color; - color: $osd_fg_color; padding: $base_padding*2; margin:0 $base_margin*3; } %search_section_content_item { - @include tile_button($osd_fg_color); + @include tile_button($system_fg_color); border-radius: $base_border_radius+3px; } // "no results" text .search-statustext { @extend %title_1; + color: transparentize($system_fg_color, .2); } .grid-search-results { @@ -64,7 +64,7 @@ // provider labels .list-search-provider-details { width: 120px; - color: $osd_fg_color; + color: $system_fg_color; } } } @@ -91,6 +91,6 @@ // list item description .list-search-result-description { - color: $osd_insensitive_fg_color; + color: $system_insensitive_fg_color; } } diff --git a/data/theme/gnome-shell-sass/widgets/_slider.scss b/data/theme/gnome-shell-sass/widgets/_slider.scss index 500249aa5..40ac34652 100644 --- a/data/theme/gnome-shell-sass/widgets/_slider.scss +++ b/data/theme/gnome-shell-sass/widgets/_slider.scss @@ -5,7 +5,7 @@ $slider_size: 16px; .slider { // slider trough -barlevel-height: 4px; - -barlevel-background-color: if($variant == 'light', transparentize($fg_color, 0.6), transparentize($fg_color, 0.8)); //background of the trough + -barlevel-background-color: transparentize($fg_color, 0.8); //background of the trough -barlevel-border-width: 2px; -barlevel-border-color: transparent; // trough border color // fill style diff --git a/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss b/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss index 5136c3cfe..b7d8353e7 100644 --- a/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss +++ b/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss @@ -24,7 +24,7 @@ $switcher_padding: $base_padding*2; // each item in the list .item-box { - @include tile_button($osd_fg_color); + @include tile_button($fg_color); // override over style so mouse doesn't steal focus &:hover {background: none;} @if $is_highcontrast { diff --git a/data/theme/gnome-shell-sass/widgets/_window-picker.scss b/data/theme/gnome-shell-sass/widgets/_window-picker.scss index 1847250b8..b46366a86 100644 --- a/data/theme/gnome-shell-sass/widgets/_window-picker.scss +++ b/data/theme/gnome-shell-sass/widgets/_window-picker.scss @@ -3,9 +3,9 @@ $window_picker_spacing: $base_padding; // 6px $window_picker_padding: $base_padding * 2; // 12px -$window_thumbnail_label_color: transparentize($osd_bg_color, 0.4); +$window_thumbnail_label_color: transparentize($system_bg_color, 0.4); -$window_close_button_color: transparentize(lighten($osd_bg_color, 7%), .02); +$window_close_button_color: transparentize(lighten($system_bg_color, 7%), .02); $window_close_button_size: 30px; $window_close_button_padding: 3px; @@ -23,7 +23,7 @@ $window_close_button_padding: 3px; // Close button .window-close { background-color: $window_close_button_color; - color: $osd_fg_color; + color: $system_fg_color; border-radius: 99px; box-shadow: 0 2px 4px 0 $shadow_color; padding: $window_close_button_padding; @@ -50,5 +50,5 @@ $window_close_button_padding: 3px; // keep in sync with BACKGROUND_CORNER_RADIUS_PIXELS in workspace.js border-radius: 30px; background-color: $invisible_occluded_bg_color; - box-shadow: 0 4px 16px 4px transparentize(darken($osd_bg_color, 30%), 0.7); + box-shadow: 0 4px 16px 4px $shadow_color; } diff --git a/data/theme/gnome-shell-sass/widgets/_workspace-thumbnails.scss b/data/theme/gnome-shell-sass/widgets/_workspace-thumbnails.scss index ecbbc4113..9e58e921b 100644 --- a/data/theme/gnome-shell-sass/widgets/_workspace-thumbnails.scss +++ b/data/theme/gnome-shell-sass/widgets/_workspace-thumbnails.scss @@ -7,7 +7,7 @@ padding: $base_padding; .workspace-thumbnail { - color: $osd_fg_color; + color: $system_fg_color; background-color: lighten($system_bg_color, 10%); border-radius: $base_border_radius*0.5; border: 1px solid transparent;