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

style: High-contrast fixes and color adjustments

Browse Source 
- pull in the palette changes to the HC css
- adjust the color definitions for HC
- address some of the problems with hover states in HC
- reworked drawing functions for HC

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2284>
This commit is contained in:
Sam Hewitt 2022-04-26 15:49:41 -02:30 committed by Jakub Steiner
parent afcd58e3ba
commit 8713f9d878
8 changed files with 114 additions and 85 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

@ -1,52 +1,7 @@
// When color definition differs for dark and light variant,
// it gets @if-ed depending on $variant
//GNOME Color Palette
$blue_1: #99c1f1;
$blue_2: #62a0ea;
$blue_3: #3584e4;
$blue_4: #1c71d8;
$blue_5: #1a5fb4;
$green_1: #8ff0a4;
$green_2: #57e389;
$green_3: #33d17a;
$green_4: #2ec27e;
$green_5: #26a269;
$yellow_1: #f9f06b;
$yellow_2: #f8e45c;
$yellow_3: #f6d32d;
$yellow_4: #f5c211;
$yellow_5: #e5a50a;
$orange_1: #ffbe6f;
$orange_2: #ffa348;
$orange_3: #ff7800;
$orange_4: #e66100;
$orange_5: #c64600;
$red_1: #f66151;
$red_2: #ed333b;
$red_3: #e01b24;
$red_4: #c01c28;
$red_5: #a51d2d;
$purple_1: #dc8add;
$purple_2: #c061cb;
$purple_3: #9141ac;
$purple_4: #813d9c;
$purple_5: #613583;
$brown_1: #cdab8f;
$brown_2: #b5835a;
$brown_3: #986a44;
$brown_4: #865e3c;
$brown_5: #63452c;
$light_1: #ffffff;
$light_2: #f6f5f4;
$light_3: #deddda;
$light_4: #c0bfbc;
$light_5: #9a9996;
$dark_1: #77767b;
$dark_2: #5e5c64;
$dark_3: #3d3846;
$dark_4: #241f31;
$dark_5: #000000;
@import '_palette.scss';
$_dark_base_color: darken(desaturate(#241f31, 100%), 2%);
@ -78,6 +33,12 @@ $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));
// cards
$card_bg_color: if($variant == 'light', darken($bg_color, 5%), lighten($bg_color, 2%));
// notifications
$bubble_buttons_color: if($variant == 'light', darken($bg_color, 12%), lighten($bg_color, 10%));
// overview background color
$system_bg_color: $base_color;
@ -93,3 +54,16 @@ $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 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%));
// 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%));
// derived checked colors
$checked_bg_color: if($variant=='light', darken($bg_color, 7%), lighten($bg_color, 15%));
$checked_fg_color: if($variant=='light', darken($fg_color, 7%), lighten($fg_color, 15%));

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

@ -35,18 +35,6 @@ $base_border_radius: 8px;
// radii of things that display over other things, e.g. popovers
$modal_radius: $base_border_radius*2; // 24px
// derived hover colors
$hover_bg_color: if($variant=='light', darken($bg_color, 3%), lighten($bg_color, 4%));
$hover_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 4%));
// derived active colors
$active_bg_color: if($variant=='light', darken($bg_color, 5%), lighten($bg_color, 6%));
$active_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 6%));
// derived checked colors
$checked_bg_color: if($variant=='light', darken($bg_color, 7%), lighten($bg_color, 9%));
$checked_fg_color: if($variant=='light', darken($fg_color, 7%), lighten($fg_color, 9%));
// fonts
$base_font_size: 11;
$text_shadow_color: if($variant == 'light', rgba(255,255,255,0.3), rgba(0,0,0,0.2));
@ -118,7 +106,6 @@ stage {
// lighter in color and have a greater radius
$bubble_button_radius:$base_border_radius*1.25;
$bubble_buttons_color: if($variant == 'light', darken($bg_color, 12%), lighten($bg_color, 7%));
%bubble_button {
padding: $base_padding * 2;

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

@ -129,7 +129,6 @@
}
}
// buttons
// since buttons are all flat an borderless now the mixin is simpler
@ -289,24 +288,24 @@ $button_bg_color: mix($tc, $c, 5%);
@mixin card($flat: false) {
border-radius: $base_border_radius;
margin: $base_margin;
box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
box-shadow: 0 1px 1px 0 $shadow_color;
@if $flat {
@include button(undecorated);
box-shadow: none !important;
} @else {
@include button(normal);
@include button(normal, $c:$card_bg_color);
}
&:focus {
@include button(focus);
@include button(focus, $c:$card_bg_color);
}
&:hover {
@include button(hover);
@include button(hover, $c:$card_bg_color);
}
&:active {
@include button(active);
@include button(active, $c:$card_bg_color);
}
}

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

@ -1,32 +1,43 @@
// When color definition differs for dark and light variant,
// it gets @if ed depending on $variant
$base_color: #222;
$bg_color: #000;
$fg_color: #fff;
@import '_palette.scss';
$base_color: if($variant == 'light', #fff, #000);
$bg_color: $base_color;
$fg_color: if($variant == 'light', transparentize(black, .2), white);
$selected_fg_color: #ffffff;
$selected_bg_color: darken(#4a90d9,20%);
$selected_bg_color: $blue_3;
$selected_borders_color: darken($selected_bg_color, 20%);
$borders_color: darken($bg_color,12%);
$borders_edge: transparentize($fg_color, 0.9);
$borders_color: lighten($bg_color,17%);
$borders_edge: $borders_color;
$link_color: lighten($selected_bg_color,20%);
$link_visited_color: lighten($selected_bg_color,10%);
$warning_color: #f57900;
$error_color: #cc0000;
$success_color: darken(#73d216,10%);
$destructive_color: darken(#ef2929,10%);
$warning_color: if($variant == 'light', $yellow_5, #cd9309);
$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: #eeeeec;
$osd_bg_color: #2e3436;
$osd_borders_color: rgba(0,0,0, 0.7);
$osd_outer_borders_color: rgba(255,255,255, 0.1);
$osd_insensitive_bg_color: mix($osd_fg_color, $osd_bg_color, 10%);
$osd_fg_color: white;
$osd_bg_color: $base_color;
$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: $osd_bg_color;
$osd_outer_borders_color: $osd_bg_color;
$shadow_color: rgba(0,0,0, 0.1);
$system_bg_color: desaturate(#241f31,100%); //neutralize the HIG color
$shadow_color: transparent;
// cards
$card_bg_color: if($variant == 'light', darken($bg_color, 12%), lighten($bg_color, 12%));
// notifications
$bubble_buttons_color: if($variant == 'light', darken($bg_color, 22%), lighten($bg_color, 31%));
// overview background color
$system_bg_color: lighten($base_color, 17%);
//insensitive state derived colors
$insensitive_fg_color: mix($fg_color, $bg_color, 50%);
@ -40,3 +51,15 @@ $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 hover colors
$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_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%));
// derived checked colors
$checked_bg_color: if($variant=='light', darken($bg_color, 12%), lighten($bg_color, 25%));
$checked_fg_color: if($variant=='light', darken($fg_color, 12%), lighten($fg_color, 25%));

46
data/theme/gnome-shell-sass/_palette.scss Normal file
View File

@ -0,0 +1,46 @@
//GNOME Color Palette
$blue_1: #99c1f1;
$blue_2: #62a0ea;
$blue_3: #3584e4;
$blue_4: #1c71d8;
$blue_5: #1a5fb4;
$green_1: #8ff0a4;
$green_2: #57e389;
$green_3: #33d17a;
$green_4: #2ec27e;
$green_5: #26a269;
$yellow_1: #f9f06b;
$yellow_2: #f8e45c;
$yellow_3: #f6d32d;
$yellow_4: #f5c211;
$yellow_5: #e5a50a;
$orange_1: #ffbe6f;
$orange_2: #ffa348;
$orange_3: #ff7800;
$orange_4: #e66100;
$orange_5: #c64600;
$red_1: #f66151;
$red_2: #ed333b;
$red_3: #e01b24;
$red_4: #c01c28;
$red_5: #a51d2d;
$purple_1: #dc8add;
$purple_2: #c061cb;
$purple_3: #9141ac;
$purple_4: #813d9c;
$purple_5: #613583;
$brown_1: #cdab8f;
$brown_2: #b5835a;
$brown_3: #986a44;
$brown_4: #865e3c;
$brown_5: #63452c;
$light_1: #ffffff;
$light_2: #f6f5f4;
$light_3: #deddda;
$light_4: #c0bfbc;
$light_5: #9a9996;
$dark_1: #77767b;
$dark_2: #5e5c64;
$dark_3: #3d3846;
$dark_4: #241f31;
$dark_5: #000000;

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

@ -9,7 +9,7 @@
color: $osd_fg_color;
padding: $base_padding;
spacing: $base_padding;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
box-shadow: 0 2px 4px 0 $shadow_color;
& > #Toolbar {
border: none;

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

@ -8,7 +8,7 @@ $notification_banner_radius: $base_border_radius*1.5;
.notification-banner {
min-height: $notification_banner_height;
width: $notification_banner_width;
box-shadow: 0 2px 4px 2px rgba(0,0,0,0.1);
box-shadow: 0 2px 4px 2px $shadow_color;
border-radius: $notification_banner_radius;
margin: $base_margin;

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

@ -21,7 +21,7 @@
padding: $base_padding;
border-radius: $modal_radius - 2px;
border: 1px solid $borders_edge;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
box-shadow: 0 2px 4px 0 $shadow_color;
background-color: $bg_color;
}