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

style: Update panel styles to use appropriately contrasty text color

Browse Source 
- new always light fg color definition
- update panel button style to use new fg color
- fixes https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/7270

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3063>
This commit is contained in:
Sam Hewitt 2023-12-18 11:45:28 -03:30 committed by Marge Bot
parent a4a3afc895
commit 54a0c49d32
3 changed files with 50 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,14 +5,14 @@
$is_highcontrast:false;
// base color for light theme
$_dark_base_color: desaturate($dark_4, 100%);
$_dark_base_color: desaturate($dark_4, 100%); // dark base color that is desaturated
$_light_fg_color: $light_1; // always light (white) fg color
$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', $_dark_base_color, white);
$fg_color: if($variant == 'light', $_dark_base_color, $_light_fg_color);
$selected_fg_color: $light_1;
$selected_fg_color: $_light_fg_color;
$selected_bg_color: $blue_3;
$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 20%));
@ -28,7 +28,7 @@ $success_color: if($variant == 'light', $green_4, $green_5);
$destructive_color: $error_color;
// color definitions for OSD elements
$osd_fg_color: $light_1;
$osd_fg_color: $_light_fg_color;
$osd_bg_color: lighten($_dark_base_color, 5%);
// derived osd colors

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

@ -5,11 +5,13 @@
$is_highcontrast:true;
$_light_fg_color: $light_1; // always light (white) fg color
$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($dark_5, .2), $light_1);
$selected_fg_color: $light_1;
$selected_fg_color: $_light_fg_color;
$selected_bg_color: $blue_3;
$selected_borders_color: darken($selected_bg_color, 20%);
@ -25,7 +27,7 @@ $success_color: if($variant == 'light', $green_4, $green_5);
$destructive_color: $error_color;
// color definitions for OSD elements
$osd_fg_color: $light_1;
$osd_fg_color: $_light_fg_color;
$osd_bg_color: $base_color;
// derived osd colors

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

@ -1,13 +1,15 @@
/* Top Bar */
// a.k.a. the panel
$privacy_indicator_color: $orange_3;
$privacy_indicator_color: if($variant == 'light', $orange_4, $orange_3);
$panel_bg_color: if($variant == 'light', $light_3, $dark_5);
$panel_fg_color: if($variant == 'light', $fg_color, darken($fg_color, 5%));
$panel_fg_color: $fg_color;
$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
$transparent_panel_fg_color: $_light_fg_color; // always use brightest text for transparent panels
$system_panel_fg_color: $system_fg_color; // always use system text color for overview
$panel_height: 2.2em;
$panel_transition_duration: 250ms; // same as the overview transition duration
@ -17,7 +19,7 @@ $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;
box-shadow: inset 0 -1px 0 0 $panel_border_color;
// panel menus
.panel-button {
@ -75,11 +77,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
}
&.screen-recording-indicator {
@include panel_button($screenshot_ui_button_red, $fg:$panel_system_fg_color, $flat: false);
@include panel_button($screenshot_ui_button_red, $fg:$_light_fg_color, $flat: false);
}
&.screen-sharing-indicator {
@include panel_button($privacy_indicator_color, $flat: false);
@include panel_button($privacy_indicator_color, $fg:$_light_fg_color, $flat: false);
}
// clock
@ -99,32 +101,50 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
}
}
// transparent panel on lock & login screens
// transparent panel on overview, lock & login screens
&:overview,
&.unlock-screen,
&.login-screen,
&:overview {
&.login-screen {
background-color: transparent;
box-shadow: none;
// unfortunate duplication to keep indicator style in these states
.panel-button {
@include panel_button($panel_system_fg_color, $fg:$panel_system_fg_color);
&.screen-recording-indicator {
@include panel_button($screenshot_ui_button_red, $fg:$_light_fg_color, $flat: false);
}
&.screen-sharing-indicator {
@include panel_button($privacy_indicator_color, $fg:$_light_fg_color, $flat: false);
}
}
}
// use transparent text styles for lock & login screen panels
&.unlock-screen,
&.login-screen {
.panel-button {
@include panel_button($transparent_panel_fg_color, $fg:$transparent_panel_fg_color);
// clock
&.clock-display {
@include panel_button($transparent_panel_fg_color, $fg:$transparent_panel_fg_color, $highlighted_child: true, $child_class:".clock");
}
}
}
// use system text styles for overview panel
&:overview {
.panel-button {
@include panel_button($system_panel_fg_color, $fg:$system_panel_fg_color);
&#panelActivities .workspace-dot {
background-color: $panel_system_fg_color;
background-color: $system_panel_fg_color;
}
// clock
&.clock-display {
@include panel_button($panel_system_fg_color, $fg:$panel_system_fg_color, $highlighted_child: true, $child_class:".clock");
}
// unfortunate duplication so these indicators have styles
&.screen-recording-indicator {
@include panel_button($screenshot_ui_button_red, $fg:$panel_system_fg_color, $flat: false);
}
&.screen-sharing-indicator {
@include panel_button($privacy_indicator_color, $flat: false);
@include panel_button($system_panel_fg_color, $fg:$system_panel_fg_color, $highlighted_child: true, $child_class:".clock");
}
}
}