From 8713f9d8788e4c4936fa6b453b7be9d1d0879d66 Mon Sep 17 00:00:00 2001 From: Sam Hewitt Date: Tue, 26 Apr 2022 15:49:41 -0230 Subject: [PATCH] style: High-contrast fixes and color adjustments - 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: --- data/theme/gnome-shell-sass/_colors.scss | 66 ++++++------------- data/theme/gnome-shell-sass/_common.scss | 13 ---- data/theme/gnome-shell-sass/_drawing.scss | 11 ++-- .../_high-contrast-colors.scss | 57 +++++++++++----- data/theme/gnome-shell-sass/_palette.scss | 46 +++++++++++++ .../widgets/_looking-glass.scss | 2 +- .../widgets/_notifications.scss | 2 +- .../gnome-shell-sass/widgets/_popovers.scss | 2 +- 8 files changed, 114 insertions(+), 85 deletions(-) create mode 100644 data/theme/gnome-shell-sass/_palette.scss diff --git a/data/theme/gnome-shell-sass/_colors.scss b/data/theme/gnome-shell-sass/_colors.scss index 7e7aaabe3..0ca123b2a 100644 --- a/data/theme/gnome-shell-sass/_colors.scss +++ b/data/theme/gnome-shell-sass/_colors.scss @@ -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%)); \ No newline at end of file diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss index dbbf79e01..f15c86c31 100644 --- a/data/theme/gnome-shell-sass/_common.scss +++ b/data/theme/gnome-shell-sass/_common.scss @@ -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; diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss index 10c1c3f3f..910eeb533 100644 --- a/data/theme/gnome-shell-sass/_drawing.scss +++ b/data/theme/gnome-shell-sass/_drawing.scss @@ -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); } } diff --git a/data/theme/gnome-shell-sass/_high-contrast-colors.scss b/data/theme/gnome-shell-sass/_high-contrast-colors.scss index 54f6853cf..d418e47ac 100644 --- a/data/theme/gnome-shell-sass/_high-contrast-colors.scss +++ b/data/theme/gnome-shell-sass/_high-contrast-colors.scss @@ -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%)); \ No newline at end of file diff --git a/data/theme/gnome-shell-sass/_palette.scss b/data/theme/gnome-shell-sass/_palette.scss new file mode 100644 index 000000000..78847d95a --- /dev/null +++ b/data/theme/gnome-shell-sass/_palette.scss @@ -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; \ No newline at end of file diff --git a/data/theme/gnome-shell-sass/widgets/_looking-glass.scss b/data/theme/gnome-shell-sass/widgets/_looking-glass.scss index 146cc29c5..00630c332 100644 --- a/data/theme/gnome-shell-sass/widgets/_looking-glass.scss +++ b/data/theme/gnome-shell-sass/widgets/_looking-glass.scss @@ -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; diff --git a/data/theme/gnome-shell-sass/widgets/_notifications.scss b/data/theme/gnome-shell-sass/widgets/_notifications.scss index 7866767ea..86480a874 100644 --- a/data/theme/gnome-shell-sass/widgets/_notifications.scss +++ b/data/theme/gnome-shell-sass/widgets/_notifications.scss @@ -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; diff --git a/data/theme/gnome-shell-sass/widgets/_popovers.scss b/data/theme/gnome-shell-sass/widgets/_popovers.scss index 08ad32461..3a470ef18 100644 --- a/data/theme/gnome-shell-sass/widgets/_popovers.scss +++ b/data/theme/gnome-shell-sass/widgets/_popovers.scss @@ -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; }