isa/gnome-shell
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: Light variant fixes and accommodations

Browse Source 
- Fixing things where the wrong colors bleed through or the colors are inconsistent.
- expand colors definitions for system colours
- add overrides to styles for overview and lockscreen
- update drawing functions to better use new colours
- rework entry drawing css

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2515>
This commit is contained in:
Sam Hewitt 2022-10-13 14:21:17 -02:30 committed by Sam Hewitt
parent d7d26e8c59
commit beb77f5824
22 changed files with 299 additions and 203 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
data/theme/gnome-shell-sass/_colors.scss
View File

@ -5,66 +5,70 @@
$is_highcontrast:false; $is_highcontrast:false;
// base color for light theme
$_dark_base_color: desaturate($dark_4, 100%); $_dark_base_color: desaturate($dark_4, 100%);
$base_color: if($variant == 'light', $light_1, $_dark_base_color); $base_color: if($variant == 'light', $light_1, $_dark_base_color);
$bg_color: if($variant == 'light', $light_2, lighten($base_color, 5%)); $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_fg_color: $light_1;
$selected_bg_color: $blue_3; $selected_bg_color: $blue_3;
$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 20%)); $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)); $borders_color: if($variant == 'light', transparentize($fg_color, .85), transparentize($fg_color, .9));
$outer_borders_color: if($variant == 'light', rgba(255,255,255,0.8), lighten($bg_color, 5%)); $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_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%)); $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); $error_color: if($variant == 'light', $red_3, $red_4);
$success_color: if($variant == 'light', $green_4, $green_5); $success_color: if($variant == 'light', $green_4, $green_5);
$destructive_color: $error_color; $destructive_color: $error_color;
$osd_fg_color: $light_1; // color definitions for OSD elements
$osd_bg_color: $_dark_base_color; //hardcoded for both light & dark $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_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(black, 0.3); $osd_borders_color: transparentize($osd_fg_color, 0.9);
$osd_outer_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 // buttons
$button_mix_factor: 9%; $button_mix_factor: if($variant == 'light', 12%, 9%);
// notifications // notifications
$bubble_buttons_color: if($variant == 'light', darken($bg_color, 7%), lighten($bg_color, 5%)); $bubble_buttons_color: if($variant == 'light', darken($bg_color, 7%), lighten($bg_color, 5%));
// overview background color // color definitions for system elements (e.g. the overview)
$system_bg_color: $base_color; $system_base_color: $_dark_base_color; // always dark
$system_fg_color: $light_2;
//insensitive state derived colors // derived system colors
$insensitive_fg_color: mix($fg_color, $bg_color, 50%); $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_bg_color: mix($bg_color, $base_color, 60%);
$insensitive_borders_color: mix($borders_color, $base_color, 60%); $insensitive_borders_color: mix($borders_color, $base_color, 60%);
//colors for the backdrop state, derived from the main colors. // checked state
$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_bg_color: if($variant=='light', darken($bg_color, 7%), lighten($bg_color, 7%)); $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%)); $checked_fg_color: if($variant=='light', darken($fg_color, 7%), lighten($fg_color, 7%));
// derived hover colors // hover state
$hover_bg_color: if($variant=='light', darken($bg_color, 3%), lighten($bg_color, 10%)); $hover_bg_color: if($variant=='light', darken($bg_color,9%), lighten($bg_color, 10%));
$hover_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 10%)); $hover_fg_color: if($variant=='light', darken($fg_color,9%), lighten($fg_color, 10%));
// derived active colors // active state
$active_bg_color: if($variant=='light', darken($bg_color, 5%), lighten($bg_color, 12%)); $active_bg_color: if($variant=='light', darken($bg_color, 11%), lighten($bg_color, 12%));
$active_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 12%)); $active_fg_color: if($variant=='light', darken($fg_color, 11%), lighten($fg_color, 12%));

126
data/theme/gnome-shell-sass/_common.scss
View File

@ -57,18 +57,6 @@ stage {
/* Common Stylings */ /* 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 // icon tiles
%tile { %tile {
border-radius: $base_border_radius * 2; // 16px border-radius: $base_border_radius * 2; // 16px
@ -77,19 +65,24 @@ stage {
border: 2px solid transparent; border: 2px solid transparent;
transition-duration: 200ms; transition-duration: 200ms;
text-align: center; text-align: center;
color: inherit;
@if $is_highcontrast { @if $is_highcontrast {
border-color: $hc_inset_color; border-color: $hc_inset_color;
} }
} }
// normal button styling // normal button styling
%button { %button_common {
border-radius: $base_border_radius; border-radius: $base_border_radius;
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
font-weight: bold; font-weight: bold;
padding: $base_padding*.5 $base_padding*4; padding: $base_padding*.5 $base_padding*4;
}
%button {
@extend %button_common;
@include button(normal); @include button(normal);
&:focus { @include button(focus);} &:focus { @include button(focus);}
&:hover { @include button(hover);} &:hover { @include button(hover);}
@ -111,19 +104,24 @@ stage {
// normal entry style // normal entry style
%entry { %entry_common {
border-radius: $base_border_radius; border-radius: $base_border_radius;
padding: $base_padding*1.5 $base_padding*1.5; padding: $base_padding*1.5 $base_padding*1.5;
color: $fg_color;
selection-background-color: $selected_bg_color; selection-background-color: $selected_bg_color;
selected-color: $selected_fg_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 // buttons in dialogs/notifications
// lighter in color and have a greater radius // 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
%tooltip { %tooltip {
background-color: $osd_bg_color; background-color: transparentize(black, 0.1);
color: $osd_fg_color; color: $light_1;
border:1px solid $osd_outer_borders_color;
border-radius: 99px; border-radius: 99px;
padding: $base_padding $base_padding * 2; padding: $base_padding $base_padding * 2;
text-align: center; text-align: center;
@if $is_highcontrast { @if $is_highcontrast {
background-color: $osd_bg_color; border-color: $hc_inset_color;
color: $osd_fg_color;
border: 1px solid $hc_inset_color;
} }
} }
/* General Typography */ /* General Typography */
%large_title { %large_title {
font-weight: 300; font-weight: 300;
@include fontsize(24); @include fontsize(24);
@ -243,3 +226,68 @@ stage {
%monospace {font-family: monospace;} %monospace {font-family: monospace;}
%numeric { font-feature-settings: "tnum";} %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);}
}

96
data/theme/gnome-shell-sass/_drawing.scss
View File

@ -23,23 +23,22 @@
@else { box-shadow: $shadow1; } @else { box-shadow: $shadow1; }
} }
// entries
@mixin entry($t, $fc:$selected_bg_color) { // Text entries
@mixin entry($t, $c) {
// //
// Entries drawing function // Entries drawing function
// //
// $t: entry type // $t: entry type
// $fc: focus color // $c: text color, used to derive background color of entries
// //
// possible $t values: // possible $t values: normal, focus, insensitive
// normal, focus, insensitive
// //
transition-duration: 100ms; transition-duration: 100ms;
@if $t==normal { @if $t==normal {
background-color: transparentize($fg_color, 0.9); background-color: transparentize($c, 0.85);
color: transparentize($fg_color,0.3); color: transparentize($c,0.3);
@if $is_highcontrast { @if $is_highcontrast {
box-shadow: inset 0 0 0 1px $hc_inset_color; box-shadow: inset 0 0 0 1px $hc_inset_color;
@ -47,20 +46,19 @@
} }
@if $t==focus { @if $t==focus {
background-color: mix(transparentize($fg_color, 0.8), $selected_bg_color, 95%); background-color: mix(transparentize($c, 0.75), $selected_bg_color, 95%);
box-shadow: inset 0 0 0 2px $fc; box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3);
color: $fg_color; color: $c;
&:hover {} &:hover {}
} }
@if $t==hover { @if $t==hover {
background-color:transparentize($fg_color, 0.8); background-color: transparentize($c, 0.75);
color: inherit;
} }
@if $t==insensitive { @if $t==insensitive {
background-color:transparentize($insensitive_fg_color, 0.8); background-color:transparentize($c, 0.75);
color: $insensitive_fg_color; 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 // focused button
@if $t==focus { @if $t==focus {
color: $tc; 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 // insensitive button
@else if $t==insensitive { @else if $t==insensitive {
color: transparentize($tc, 0.5); color: transparentize($tc, 0.5);
@ -274,17 +282,15 @@
// overview icon, dash, app grid // overview icon, dash, app grid
@mixin overview_icon($color, $flat: true) { @mixin overview_icon($color, $flat: true) {
transition-duration: 400ms; transition-duration: 400ms;
.overview-icon { .overview-icon {
@extend %tile; @extend %tile;
} }
@if $flat { @if $flat {
.overview-icon { background-color: transparent;} .overview-icon { background-color: transparent;}
} @else { } @else {
.overview-icon { .overview-icon { background-color: transparentize($color, .93); }
background-color: transparentize($color, .93);
}
} }
&:hover .overview-icon { background-color: transparentize($color, .9);} &:hover .overview-icon { background-color: transparentize($color, .87);}
&:selected .overview-icon, &:selected .overview-icon,
&:focus .overview-icon { &:focus .overview-icon {
@ -319,6 +325,12 @@
&:hover {@include button(hover);} &:hover {@include button(hover);}
&:active {@include button(active);} &:active {@include button(active);}
&:focus {@include button(focus);} &:focus {@include button(focus);}
&:insensitive {
@include button(insensitive);
@if $flat {
background-color: transparent;
}
}
} }
// styling for all menuitems in popovers // styling for all menuitems in popovers

52
data/theme/gnome-shell-sass/_high-contrast-colors.scss
View File

@ -5,66 +5,70 @@
$is_highcontrast:true; $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%)); $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_bg_color: $blue_3;
$selected_borders_color: darken($selected_bg_color, 20%); $selected_borders_color: darken($selected_bg_color, 20%);
$borders_color: if($variant == 'light', transparentize($fg_color, .5), transparentize($fg_color, .7)); $borders_color: if($variant == 'light', transparentize($fg_color, .5), transparentize($fg_color, .7));
$outer_borders_color: $borders_color; $outer_borders_color: $borders_color;
$link_color: lighten($selected_bg_color,20%); $link_color: lighten($selected_bg_color,20%);
$link_visited_color: lighten($selected_bg_color,10%); $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); $error_color: if($variant == 'light', $red_3, $red_4);
$success_color: if($variant == 'light', $green_4, $green_5); $success_color: if($variant == 'light', $green_4, $green_5);
$destructive_color: $error_color; $destructive_color: $error_color;
$osd_fg_color: white; // color definitions for OSD elements
$osd_fg_color: $light_1;
$osd_bg_color: $base_color; $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_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_borders_color: transparentize($osd_fg_color, 0.8);
$osd_outer_borders_color: $osd_borders_color; $osd_outer_borders_color: $osd_borders_color;
$shadow_color: rgba(0,0,0,0); $shadow_color: rgba(0,0,0,0);
// hc
$hc_inset_color: transparentize($fg_color, 0.7);
// button // button
$button_mix_factor: 20%; $button_mix_factor: 20%;
// notifications // notifications
$bubble_buttons_color: if($variant == 'light', darken($bg_color, 7%), lighten($bg_color, 5%)); $bubble_buttons_color: if($variant == 'light', darken($bg_color, 7%), lighten($bg_color, 5%));
// overview background color // color definitions for system elements
$system_bg_color: black; $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_fg_color: mix($fg_color, $bg_color, 50%);
$insensitive_bg_color: mix($bg_color, $base_color, 60%); $insensitive_bg_color: mix($bg_color, $base_color, 60%);
$insensitive_borders_color: $borders_color; $insensitive_borders_color: $borders_color;
//colors for the backdrop state, derived from the main colors. // checked state
$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_bg_color: if($variant=='light', darken($bg_color, 12%), lighten($bg_color, 18%)); $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%)); $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_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%)); $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_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%)); $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);

24
data/theme/gnome-shell-sass/widgets/_app-grid.scss
View File

@ -18,11 +18,12 @@ $app_icon_size: 96px;
// Icon tiles in the app grid // Icon tiles in the app grid
.app-well-app { .app-well-app {
@include overview_icon($osd_fg_color); @include overview_icon($system_fg_color);
.overview-icon { .overview-icon {
padding: $base_padding*2; padding: $base_padding*2;
border-radius: $base_border_radius*3; border-radius: $base_border_radius*3;
color: $system_fg_color;
} }
.overview-icon.overview-icon-with-label { .overview-icon.overview-icon-with-label {
> StBoxLayout { > StBoxLayout {
@ -33,7 +34,7 @@ $app_icon_size: 96px;
// app folders // app folders
.app-well-app.app-folder { .app-well-app.app-folder {
@include overview_icon($fg_color, $flat: false); @include overview_icon($system_fg_color, $flat: false);
} }
// expanded folder // expanded folder
@ -62,7 +63,7 @@ $app_icon_size: 96px;
} }
/* FIXME: this is to keep the label in sync with the entry */ /* 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 { & .edit-folder-button {
@extend %button; @extend %button;
@ -100,7 +101,7 @@ $app_icon_size: 96px;
width: 5px; width: 5px;
border-radius:5px; border-radius:5px;
margin-bottom: 8px; margin-bottom: 8px;
background-color: $osd_fg_color; background-color: $system_fg_color;
} }
// Rename popup for app folders // Rename popup for app folders
@ -130,8 +131,8 @@ $app_icon_size: 96px;
// shutdown and other actions in the grid // shutdown and other actions in the grid
.system-action-icon { .system-action-icon {
background-color: rgba(0,0,0,0.8); background-color: transparentize($system_fg_color,.9);
color: white; color: $system_fg_color;
border-radius: 99px; border-radius: 99px;
icon-size: $app_icon_size * 0.5; icon-size: $app_icon_size * 0.5;
@if $is_highcontrast { @if $is_highcontrast {
@ -167,11 +168,14 @@ $app_icon_size: 96px;
width: 24px; width: 24px;
height: 24px; height: 24px;
border-radius: 99px; border-radius: 99px;
> StIcon { color: $system_fg_color;}
@if $is_highcontrast { @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));} &:insensitive { @include button(undecorated, $system_fg_color, transparentize($system_bg_color, 0.5));}
&:hover { @include button(hover, $osd_fg_color, transparentize($osd_bg_color, 0.5));} &:hover { @include button(hover, $system_fg_color, transparentize($system_bg_color, 0.5));}
&:active { @include button(active, $osd_fg_color, transparentize($osd_bg_color, 0.5));} &:active { @include button(active, $system_fg_color, transparentize($system_bg_color, 0.5));}
} }

4
data/theme/gnome-shell-sass/widgets/_calendar.scss
View File

@ -78,7 +78,7 @@
&:hover {background-color: $hover_bg_color;} &:hover {background-color: $hover_bg_color;}
&:focus { &:focus {
background-color: mix($bg_color, $selected_bg_color, 80%); 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); box-shadow:inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
} }
@ -166,11 +166,11 @@
.events-list { .events-list {
spacing: 2 * $base_padding; spacing: 2 * $base_padding;
color: $fg_color;
} }
.events-title { .events-title {
@extend %heading; @extend %heading;
color: $insensitive_fg_color;
margin-bottom: $base_margin; margin-bottom: $base_margin;
} }

9
data/theme/gnome-shell-sass/widgets/_dash.scss
View File

@ -1,6 +1,8 @@
/* Dash */ /* Dash */
$dash_background_color: lighten($system_bg_color, 5%); // uses system colors
$dash_background_color: $system_overlay_bg_color;
$dash_placeholder_size: 32px; $dash_placeholder_size: 32px;
$dash_padding: $base_padding*2; // 12px $dash_padding: $base_padding*2; // 12px
$dash_border_radius: $modal_radius + $dash_padding; $dash_border_radius: $modal_radius + $dash_padding;
@ -55,10 +57,11 @@ $dash_border_radius: $modal_radius + $dash_padding;
} }
// show apps button // show apps button
.show-apps { @include overview_icon($osd_fg_color);} .show-apps { @include overview_icon($system_fg_color);}
.show-apps, .app-well-app { .show-apps, .app-well-app {
padding-bottom: $dash_padding; padding-bottom: $dash_padding;
color: $system_fg_color;
} }
} }
@ -66,7 +69,7 @@ $dash_border_radius: $modal_radius + $dash_padding;
.dash-separator { .dash-separator {
width: 1px; width: 1px;
margin: 0 $base_margin; margin: 0 $base_margin;
background-color: $borders_color; background-color: $system_borders_color;
margin-bottom: $dash_padding; margin-bottom: $dash_padding;
@if $is_highcontrast { @if $is_highcontrast {
width: 2px; width: 2px;

1
data/theme/gnome-shell-sass/widgets/_entries.scss
View File

@ -16,6 +16,5 @@ StEntry {
StLabel.hint-text { StLabel.hint-text {
margin-left: 2px; margin-left: 2px;
color: transparentize($fg_color, 0.3);
} }
} }

8
data/theme/gnome-shell-sass/widgets/_login-lock.scss
View File

@ -1,5 +1,5 @@
$_gdm_bg: $system_bg_color; $_gdm_bg: $system_bg_color;
$_gdm_fg: white; $_gdm_fg: $system_fg_color;
$_gdm_dialog_width: 23em; $_gdm_dialog_width: 23em;
// common style for gdm and lockscreen // common style for gdm and lockscreen
@ -19,12 +19,12 @@ $_gdm_dialog_width: 23em;
// buttons // buttons
.login-dialog-button { .login-dialog-button {
@extend .button;
&.cancel-button, &.cancel-button,
&.switch-user-button, &.switch-user-button,
&.login-dialog-session-list-button { &.login-dialog-session-list-button {
@extend .icon-button; @extend .icon-button;
@extend %system_button;
} }
&.cancel-button { &.cancel-button {
@ -145,7 +145,9 @@ $_gdm_dialog_width: 23em;
width: 26em; width: 26em;
} }
.login-dialog-prompt-entry {} .login-dialog-prompt-entry {
@extend %system_entry;
}
/* Screen Shield */ /* Screen Shield */

26
data/theme/gnome-shell-sass/widgets/_looking-glass.scss
View File

@ -2,19 +2,21 @@
// Dialog // Dialog
#LookingGlassDialog { #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-radius: 0 0 $modal_radius $modal_radius;
border: 1px solid $outer_borders_color;
border-top-width: 0; border-top-width: 0;
color: $fg_color;
padding: $base_padding; padding: $base_padding;
spacing: $base_padding; spacing: $base_padding;
box-shadow: 0 2px 4px 0 $shadow_color; box-shadow: 0 2px 4px 0 $shadow_color;
@if $is_highcontrast { @if $is_highcontrast {
border: 2px solid $hc_inset_color; border: 2px solid $hc_inset_color;
background-color: $bg_color; background-color: $osd_bg_color;
border-top-width: 0;
box-shadow:none; box-shadow:none;
} }
@ -26,21 +28,21 @@
spacing: $base_padding; spacing: $base_padding;
.lg-toolbar-button { .lg-toolbar-button {
@extend %osd_button;
padding: $base_padding $base_padding*2; padding: $base_padding $base_padding*2;
@extend %button;
& > StIcon { icon-size: $base_icon_size; } & > StIcon { icon-size: $base_icon_size; }
} }
} }
.labels { .labels {
spacing: $base_padding; spacing: $base_padding;
} }
.notebook-tab { .notebook-tab {
@extend %osd_button;
-natural-hpadding: $base_padding*2; -natural-hpadding: $base_padding*2;
-minimum-hpadding: $base_padding*2; -minimum-hpadding: $base_padding*2;
@extend %button;
padding: $base_padding $base_padding*2; padding: $base_padding $base_padding*2;
} }
@ -51,8 +53,8 @@
.lg-dialog { .lg-dialog {
StEntry { StEntry {
@extend %osd_entry;
min-height: 22px; min-height: 22px;
@extend %entry;
} }
.shell-link { .shell-link {
@ -118,9 +120,9 @@
.lg-debug-flag-button { .lg-debug-flag-button {
StLabel { padding: $base_padding, 2 * $base_padding; } StLabel { padding: $base_padding, 2 * $base_padding; }
color: $fg_color; color: $osd_fg_color;
&:hover { color: lighten($fg_color, 20%); } &:hover { color: lighten($osd_fg_color, 20%); }
&:active { color: darken($fg_color, 20%); } &:active { color: darken($osd_fg_color, 20%); }
} }
.lg-debug-flags-header { .lg-debug-flags-header {

18
data/theme/gnome-shell-sass/widgets/_message-list.scss
View File

@ -10,9 +10,9 @@
&:ltr {margin-left: 0; margin-right: $base_margin; padding-right: $base_padding; border-right-width: 1px; } &: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; } &: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; @extend %title_2;
color: transparentize($insensitive_fg_color, .5); color: $insensitive_fg_color;
// icon size and color // icon size and color
> StIcon { > StIcon {
@ -25,7 +25,7 @@
.message-list-sections { .message-list-sections {
spacing: $base_padding; spacing: $base_padding;
margin: 0; margin: 0;
padding-bottom: $base_padding; padding-bottom: $base_padding;
// to account for scrollbar // to account for scrollbar
@ -117,14 +117,14 @@
// close button // close button
.message-close-button { .message-close-button {
color: $fg_color; color: $fg_color;
background-color: transparentize($fg_color, 0.9); background-color: transparentize($fg_color, 0.8);
border-radius: 99px; border-radius: 99px;
padding: $base_padding - 1px; padding: $base_padding - 1px;
margin: 1px; margin: 1px;
&:hover {background-color: transparentize($fg_color, 0.8);} &:hover {background-color: transparentize($fg_color, 0.7);}
&:active {background-color: transparentize($fg_color, 0.9);} &:active {background-color: transparentize($fg_color, 0.8);}
& StIcon { icon-size: $base_icon_size; } > StIcon { icon-size: $base_icon_size; }
} }
// body // body
@ -154,7 +154,7 @@
color: $fg_color; color: $fg_color;
} }
&:active { &:active {
background-color: lighten($active_bg_color, 5%); background-color: lighten($active_bg_color, 5%);
color: $fg_color; color: $fg_color;
} }
@ -165,7 +165,7 @@
border-color: transparent; border-color: transparent;
} }
} }
// fix margin for last button // fix margin for last button
&:last-child:ltr { margin-right: $base_margin*3; } &:last-child:ltr { margin-right: $base_margin*3; }
&:last-child:rtl { margin-left: $base_margin*3; } &:last-child:rtl { margin-left: $base_margin*3; }

2
data/theme/gnome-shell-sass/widgets/_misc.scss
View File

@ -30,7 +30,7 @@
.flashspot { background-color: white; } .flashspot { background-color: white; }
// Hidden // Hidden
.hidden { color: rgba(0,0,0,0);} .hidden { color: transparent;}
// Caps-lock warning // Caps-lock warning
.caps-lock-warning-label { .caps-lock-warning-label {

2
data/theme/gnome-shell-sass/widgets/_overview.scss
View File

@ -5,7 +5,7 @@
} }
#overviewGroup { #overviewGroup {
background-color: $system_bg_color; background-color: $system_base_color;
} }
.overview-controls { .overview-controls {

24
data/theme/gnome-shell-sass/widgets/_panel.scss
View File

@ -1,8 +1,11 @@
/* Top Bar */ /* Top Bar */
// a.k.a. the panel // a.k.a. the panel
$panel_bg_color: #000; $panel_bg_color: if($variant == 'light', $light_3, $dark_5);
$panel_fg_color: if($variant == 'light', lighten($bg_color, 10%), darken($fg_color, 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_height: 2.2em;
$panel_transition_duration: 250ms; // same as the overview transition duration $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; height: $panel_height;
@extend %numeric; @extend %numeric;
transition-duration: $panel_transition_duration; transition-duration: $panel_transition_duration;
box-shadow: inset 0 -1px 0 0 $panel_border_color;
// transparent panel on lock & login screens // transparent panel on lock & login screens
&.unlock-screen, &.unlock-screen,
&.login-screen, &.login-screen,
&:overview { &:overview {
background-color: transparent; background-color: transparent;
box-shadow: none;
.panel-button {
color: $panel_system_fg_color !important;
}
} }
// panel menus // panel menus
@ -141,13 +149,13 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
&:overview { &:overview {
.panel-button { .panel-button {
&:active, &:overview, &:focus, &:checked { &: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 { &.clock-display {
box-shadow: none; box-shadow: none;
.clock { .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 { &: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 { &.clock-display {
box-shadow: none; box-shadow: none;
.clock { .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 { &: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 { &.clock-display {
box-shadow: none; box-shadow: none;
.clock { .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);
} }
} }

10
data/theme/gnome-shell-sass/widgets/_quick-settings.scss
View File

@ -91,6 +91,11 @@
.quick-toggle-menu { .quick-toggle-menu {
@include card; @include card;
// override some card styles
background-color: $bg_color !important;
color: $fg_color !important;
border-radius: $base_border_radius*3; border-radius: $base_border_radius*3;
padding: $base_padding*2; padding: $base_padding*2;
margin: $base_padding*2 $base_padding*3 0; margin: $base_padding*2 $base_padding*3 0;
@ -108,7 +113,10 @@
padding: 1.5 * $base_padding; padding: 1.5 * $base_padding;
background-color: transparentize($fg_color, 0.8); background-color: transparentize($fg_color, 0.8);
&.active { background-color: $selected_bg_color;} &.active {
background-color: $selected_bg_color;
color: $selected_fg_color;
}
} }
& .title { & .title {

6
data/theme/gnome-shell-sass/widgets/_screenshot.scss
View File

@ -33,7 +33,7 @@ $screenshot_ui_button_red: $error_color;
} }
.screenshot-ui-type-button { .screenshot-ui-type-button {
@extend %osd_button; @extend %osd_button_flat;
min-width: 48px; min-width: 48px;
padding: $base_padding * 2 $base_padding * 3 !important; padding: $base_padding * 2 $base_padding * 3 !important;
border-radius: $screenshot_ui_panel_border_radius - $screenshot_ui_panel_padding; 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 { .screenshot-ui-show-pointer-button {
@extend %osd_button; @extend %osd_button_flat;
border-radius: 99px; border-radius: 99px;
padding: $base_padding * 2 !important; padding: $base_padding * 2 !important;
StIcon { icon-size: $base_icon_size;} StIcon { icon-size: $base_icon_size;}
@ -129,7 +129,7 @@ $screenshot_ui_button_red: $error_color;
.screenshot-ui-area-selector-handle { .screenshot-ui-area-selector-handle {
border-radius: 99px; border-radius: 99px;
background-color: white; 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; width: 24px;
height: 24px; height: 24px;
} }

2
data/theme/gnome-shell-sass/widgets/_search-entry.scss
View File

@ -5,6 +5,8 @@
margin-bottom: $base_padding; margin-bottom: $base_padding;
width: 24em; width: 24em;
@extend %system_entry;
.search-entry-icon { .search-entry-icon {
icon-size: $base_icon_size; icon-size: $base_icon_size;
margin-top: 2px; // center vertically margin-top: 2px; // center vertically

12
data/theme/gnome-shell-sass/widgets/_search-results.scss
View File

@ -23,22 +23,22 @@
// content // content
.search-section-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; 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; padding: $base_padding*2;
margin:0 $base_margin*3; margin:0 $base_margin*3;
} }
%search_section_content_item { %search_section_content_item {
@include tile_button($osd_fg_color); @include tile_button($system_fg_color);
border-radius: $base_border_radius+3px; border-radius: $base_border_radius+3px;
} }
// "no results" text // "no results" text
.search-statustext { .search-statustext {
@extend %title_1; @extend %title_1;
color: transparentize($system_fg_color, .2);
} }
.grid-search-results { .grid-search-results {
@ -64,7 +64,7 @@
// provider labels // provider labels
.list-search-provider-details { .list-search-provider-details {
width: 120px; width: 120px;
color: $osd_fg_color; color: $system_fg_color;
} }
} }
} }
@ -91,6 +91,6 @@
// list item description // list item description
.list-search-result-description { .list-search-result-description {
color: $osd_insensitive_fg_color; color: $system_insensitive_fg_color;
} }
} }

2
data/theme/gnome-shell-sass/widgets/_slider.scss
View File

@ -5,7 +5,7 @@ $slider_size: 16px;
.slider { .slider {
// slider trough // slider trough
-barlevel-height: 4px; -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-width: 2px;
-barlevel-border-color: transparent; // trough border color -barlevel-border-color: transparent; // trough border color
// fill style // fill style

2
data/theme/gnome-shell-sass/widgets/_switcher-popup.scss
View File

@ -24,7 +24,7 @@ $switcher_padding: $base_padding*2;
// each item in the list // each item in the list
.item-box { .item-box {
@include tile_button($osd_fg_color); @include tile_button($fg_color);
// override over style so mouse doesn't steal focus // override over style so mouse doesn't steal focus
&:hover {background: none;} &:hover {background: none;}
@if $is_highcontrast { @if $is_highcontrast {

8
data/theme/gnome-shell-sass/widgets/_window-picker.scss
View File

@ -3,9 +3,9 @@
$window_picker_spacing: $base_padding; // 6px $window_picker_spacing: $base_padding; // 6px
$window_picker_padding: $base_padding * 2; // 12px $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_size: 30px;
$window_close_button_padding: 3px; $window_close_button_padding: 3px;
@ -23,7 +23,7 @@ $window_close_button_padding: 3px;
// Close button // Close button
.window-close { .window-close {
background-color: $window_close_button_color; background-color: $window_close_button_color;
color: $osd_fg_color; color: $system_fg_color;
border-radius: 99px; border-radius: 99px;
box-shadow: 0 2px 4px 0 $shadow_color; box-shadow: 0 2px 4px 0 $shadow_color;
padding: $window_close_button_padding; 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 // keep in sync with BACKGROUND_CORNER_RADIUS_PIXELS in workspace.js
border-radius: 30px; border-radius: 30px;
background-color: $invisible_occluded_bg_color; 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;
} }

2
data/theme/gnome-shell-sass/widgets/_workspace-thumbnails.scss
View File

@ -7,7 +7,7 @@
padding: $base_padding; padding: $base_padding;
.workspace-thumbnail { .workspace-thumbnail {
color: $osd_fg_color; color: $system_fg_color;
background-color: lighten($system_bg_color, 10%); background-color: lighten($system_bg_color, 10%);
border-radius: $base_border_radius*0.5; border-radius: $base_border_radius*0.5;
border: 1px solid transparent; border: 1px solid transparent;