From ea73e4f1e92b36ecd1c3889b6f9f29d8ccb41863 Mon Sep 17 00:00:00 2001 From: Sam Hewitt Date: Mon, 8 Jan 2024 14:05:09 -0330 Subject: [PATCH] style: Clean up color definitions and High Contrast - clean out unused colors; add desaturated light color - remove long unused drawing functions; add high contrast color mixin - de-duplicate and move common colors to a default-colors stylesheet - rework how HighContrast is defined; clean up HC cruft - bring over named color defines and other colors from libadwaita - change how panel colors are defined Part-of: --- data/theme/gnome-shell-dark.scss | 1 + data/theme/gnome-shell-high-contrast.scss | 29 +---- data/theme/gnome-shell-light.scss | 1 + data/theme/gnome-shell-sass/_colors.scss | 78 ++++++------- data/theme/gnome-shell-sass/_common.scss | 10 +- .../gnome-shell-sass/_default-colors.scss | 51 ++++++++ data/theme/gnome-shell-sass/_drawing.scss | 77 ++++++------ .../_high-contrast-colors.scss | 110 +++++++++--------- .../gnome-shell-sass/widgets/_app-grid.scss | 9 +- .../theme/gnome-shell-sass/widgets/_base.scss | 9 ++ .../gnome-shell-sass/widgets/_calendar.scss | 5 +- .../theme/gnome-shell-sass/widgets/_dash.scss | 4 +- .../gnome-shell-sass/widgets/_login-lock.scss | 5 +- .../widgets/_looking-glass.scss | 6 +- .../widgets/_message-list.scss | 8 +- .../theme/gnome-shell-sass/widgets/_misc.scss | 3 +- .../widgets/_notifications.scss | 2 +- .../gnome-shell-sass/widgets/_panel.scss | 17 +-- .../gnome-shell-sass/widgets/_popovers.scss | 7 +- .../gnome-shell-sass/widgets/_screenshot.scss | 6 +- .../widgets/_search-results.scss | 7 +- .../gnome-shell-sass/widgets/_switches.scss | 6 + .../widgets/_window-picker.scss | 8 +- .../widgets/_workspace-thumbnails.scss | 2 +- 24 files changed, 245 insertions(+), 216 deletions(-) create mode 100644 data/theme/gnome-shell-sass/_default-colors.scss diff --git a/data/theme/gnome-shell-dark.scss b/data/theme/gnome-shell-dark.scss index 8ee499912..c1a330b9e 100644 --- a/data/theme/gnome-shell-dark.scss +++ b/data/theme/gnome-shell-dark.scss @@ -1,4 +1,5 @@ $variant: 'dark'; +$contrast: 'normal'; @import "gnome-shell-sass/_colors"; //use gtk colors @import "gnome-shell-sass/_drawing"; diff --git a/data/theme/gnome-shell-high-contrast.scss b/data/theme/gnome-shell-high-contrast.scss index 20ce590c4..a4394ddbc 100644 --- a/data/theme/gnome-shell-high-contrast.scss +++ b/data/theme/gnome-shell-high-contrast.scss @@ -1,34 +1,7 @@ $variant: 'dark'; +$contrast: "high"; @import "gnome-shell-sass/_high-contrast-colors"; //use gtk colors @import "gnome-shell-sass/_drawing"; @import "gnome-shell-sass/_common"; @import "gnome-shell-sass/_widgets"; - -.toggle-switch { - background-image: url("resource:///org/gnome/shell/theme/toggle-off-hc.svg"); - &:checked { background-image: url("resource:///org/gnome/shell/theme/toggle-on-hc.svg"); } -} - -//force opaque panel -#panel { - &.login-screen, - &.unlock-screen, - &:overview { - background-color: #000; - } - - .panel-button { - color: #fff !important; - } -} - -//thumbnail app icons no dropshadow and forced color -.window-picker .icon-dropshadow { - icon-shadow: none; - background-color: $osd_bg_color; - padding: $base_padding * 2; - border-radius: $modal_radius; - border: 2px solid $hc_inset_color; - margin: $base_padding * 3; -} diff --git a/data/theme/gnome-shell-light.scss b/data/theme/gnome-shell-light.scss index ae6fce7dd..22b8347ec 100644 --- a/data/theme/gnome-shell-light.scss +++ b/data/theme/gnome-shell-light.scss @@ -1,4 +1,5 @@ $variant: 'light'; +$contrast: 'normal'; @import "gnome-shell-sass/_colors"; //use gtk colors @import "gnome-shell-sass/_drawing"; diff --git a/data/theme/gnome-shell-sass/_colors.scss b/data/theme/gnome-shell-sass/_colors.scss index 8c98d12fb..f56b8dc5c 100644 --- a/data/theme/gnome-shell-sass/_colors.scss +++ b/data/theme/gnome-shell-sass/_colors.scss @@ -1,68 +1,56 @@ -// When color definition differs for dark and light variant, -// it gets @if-ed depending on $variant +// +// Main color definitions +// +// When color definition differs for dark and light variant, it gets @if-ed depending on $variant @import '_palette.scss'; +@import '_default-colors.scss'; -$is_highcontrast:false; -$_dark_base_color: desaturate($dark_4, 100%); // dark base color that is desaturated -$_light_fg_color: $light_1; // always light (white) fg color +// global colors +$base_color: if($variant == 'light', $light_1, $_base_color_dark); +$bg_color: if($variant == 'light', $_base_color_light, lighten($base_color, 5%)); +$fg_color: if($variant == 'light', $_base_color_dark, $light_1); -$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, $_light_fg_color); +// OSD elements +$osd_fg_color: $light_1; +$osd_bg_color: lighten($_base_color_dark, 5%); -$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%)); +// system elements (e.g. the overview) that are always dark +$system_base_color: $_base_color_dark; +$system_fg_color: $_base_color_light; -$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%)); +// panel colors +$panel_bg_color: if($variant == 'light', $_base_color_light, $dark_5); +$panel_fg_color: if($variant == 'light', $_base_color_dark, $light_1); -$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_4, $yellow_3); -$error_color: if($variant == 'light', $red_4, $red_3); -$success_color: if($variant == 'light', $green_4, $green_5); -$destructive_color: $error_color; - -// color definitions for OSD elements -$osd_fg_color: $_light_fg_color; -$osd_bg_color: 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: 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); - -// shadows -$shadow_color: if($variant == 'light', rgba(0,0,0,.05), rgba(0,0,0,0.2)); -$text_shadow_color: if($variant == 'light', rgba(255,255,255,0.3), rgba(0,0,0,0.2)); - -// buttons -$button_mix_factor: if($variant == 'light', 12%, 9%); - -// color definitions for "card" elements +// card elements $card_bg_color: if($variant == 'light', $light_1, lighten($bg_color, 7%)); $card_shadow_color: if($variant == 'light', transparentize($dark_5, .97), transparent); $card_shadow_border_color: if($variant == 'light', transparentize($dark_5, .91), transparent); -// notifications +// +// Derived Colors +// +// colors based on the global defines above + +// borders +$borders_color: transparentize($fg_color, $border_opacity); +$outer_borders_color: if($variant == 'light', darken($bg_color, 7%), lighten($bg_color, 5%)); + +// buttons in notifications $bubble_buttons_color: if($variant == 'light', darken($bg_color, 7%), lighten($bg_color, 5%)); -// color definitions for system elements (e.g. the overview) -$system_base_color: $_dark_base_color; // always dark -$system_fg_color: $light_2; +// osd colors +$osd_borders_color: transparentize($osd_fg_color, 0.9); +$osd_outer_borders_color: transparentize($osd_fg_color, 0.98); -// derived system colors +// 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%); diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss index 194fdcfa4..084d4b89c 100644 --- a/data/theme/gnome-shell-sass/_common.scss +++ b/data/theme/gnome-shell-sass/_common.scss @@ -79,7 +79,7 @@ stage { text-align: center; color: inherit; - @if $is_highcontrast { + @if $contrast == 'high' { border-color: $hc_inset_color; } } @@ -128,6 +128,7 @@ stage { border: 1px solid $card_shadow_border_color; } + // normal entry style %entry_common { border-radius: $base_border_radius; @@ -199,7 +200,7 @@ stage { padding: $base_padding $base_padding * 2; text-align: center; - @if $is_highcontrast { + @if $contrast == 'high' { background-color: black; border-color: $hc_inset_color; } @@ -262,9 +263,10 @@ stage { border: 1px solid $osd_outer_borders_color; border-radius: $forced_circular_radius; padding: $base_padding * 2; + border: 2px solid transparent; - @if $is_highcontrast { - border: 2px solid $hc_inset_color; + @if $contrast == 'high' { + border-color: $hc_inset_color; } } diff --git a/data/theme/gnome-shell-sass/_default-colors.scss b/data/theme/gnome-shell-sass/_default-colors.scss new file mode 100644 index 000000000..8f276c0ac --- /dev/null +++ b/data/theme/gnome-shell-sass/_default-colors.scss @@ -0,0 +1,51 @@ +// Named Colors + +// base colors +$_base_color_dark: desaturate($dark_4, 100%); +$_base_color_light: desaturate($light_2, 100%); + +// colors for destructive elements +$destructive_bg_color: if($variant == 'light', $red_3, $red_4); +$destructive_fg_color: $light_1; +$destructive_color: $destructive_bg_color; + +// colors for levelbars, entries, labels and infobars +$success_bg_color: if($variant == 'light', $green_4, $green_5); +$success_fg_color: $light_1; +$success_color: $success_bg_color; + +$warning_bg_color: if($variant == 'light', $yellow_4, $yellow_3); +$warning_fg_color: transparentize(black, .2); +$warning_color: $success_bg_color; + +$error_bg_color: if($variant == 'light', $red_3, $red_4); +$error_fg_color: $light_1; +$error_color: $error_bg_color; + +// colors for selected or default elements +$selected_bg_color: if($variant == 'light', $blue_3, $blue_4); +$selected_fg_color: $light_1; +$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 20%)); + +// link colors +$link_color: if($variant == 'light', $blue_3, $blue_4); +$link_visited_color: transparentize($link_color, .6); + +// special cased widget definitions +$button_mix_factor: if($variant == 'light', 12%, 9%); +$border_opacity: if($variant == 'light', .85, .9); + +// shadows +$shadow_color: if($variant == 'light', rgba(0,0,0,.05), rgba(0,0,0,0.2)); +$text_shadow_color: if($variant == 'light', rgba(255,255,255,0.3), rgba(0,0,0,0.2)); + +// High Contrast overrides +@if $contrast == 'high' { + // increase border opacity + $border_opacity: .5; + // increase the button mix factor + $button_mix_factor: 20%; + // remove shadows + $shadow_color: transparent; + $text_shadow_color: transparent; +} diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss index ebdc7e4e7..789c3b153 100644 --- a/data/theme/gnome-shell-sass/_drawing.scss +++ b/data/theme/gnome-shell-sass/_drawing.scss @@ -1,12 +1,5 @@ // Drawing mixins -// generic drawing of more complex things - -@function draw_widget_edge($c:$outer_borders_color) { -// outer highlight "used" on most widgets - @return 0 1px $c; -} - // Function to convert px values to em @function to_em($input, $base: 16px) { // multiplied and divided by 1000 to make up for round() shortcoming @@ -14,6 +7,16 @@ @return round($em_value) / 1000 * 1em; } +// Boost the contrast of a color by mixing it with high contrast defined colors +@function hc_color_mix($c, $mc:$hc_mix_color, $mf:$hc_mix_factor) { + // + // $c: input color + // $mc: mix color, defined in High Contrast specific stylesheet + // $mf: mix factor (%), defined in High Contrast specific stylesheet + // + @return mix($c, $mc, $mf); +} + // Mixin to convert provided font size in pt to em units @mixin fontsize($size, $base: 16px, $unit: pt) { // if pt, convert into unitless value with the assumption: 1pt = 1.091px @@ -23,17 +26,6 @@ // font-size: round($size) + pt; } -@mixin draw_shadows($shadow1, $shadow2:none, $shadow3:none, $shadow4:none) { -// -// Helper function to stack up to 4 box-shadows; -// - @if $shadow4!=none { box-shadow: $shadow1, $shadow2, $shadow3, $shadow4; } - @else if $shadow3!=none { box-shadow: $shadow1, $shadow2, $shadow3; } - @else if $shadow2!=none { box-shadow: $shadow1, $shadow2; } - @else { box-shadow: $shadow1; } -} - - // Text entries @mixin entry($t, $c, $fc:$selected_bg_color) { // @@ -50,7 +42,7 @@ background-color: transparentize($c, 0.85); color: transparentize($c,0.3); - @if $is_highcontrast { + @if $contrast == 'high' { box-shadow: inset 0 0 0 1px $hc_inset_color; } } @@ -166,6 +158,10 @@ // background color override for card elements @if $card { $button_bg_color: $card_bg_color; + + @if $contrast == 'high' { + $button_bg_color: hc_color_mix($card_bg_color); + } } // normal button @@ -175,16 +171,9 @@ @if $flat { background-color: transparent; } - @if $is_highcontrast { + @if $contrast == 'high' { box-shadow: inset 0 0 0 1px $hc_inset_color; } - - // card style - @if $card { - @if $is_highcontrast { - background-color: mix($button_bg_color, $hc_inset_color, 50%); - } - } } // focused button @@ -215,8 +204,8 @@ color: $tc; background-color: $hover_bg_color; - @if $is_highcontrast { - background-color: mix($hover_bg_color, $hc_mix_color, 90%); + @if $contrast == 'high' { + background-color: hc_color_mix($hover_bg_color); } // card style @@ -224,8 +213,8 @@ $card_hover_bg_color: mix($tc, $card_bg_color, 4%); background-color: $card_hover_bg_color; - @if $is_highcontrast { - background-color: mix($card_hover_bg_color, $hc_inset_color, 40%); + @if $contrast == 'high' { + background-color: hc_color_mix($card_hover_bg_color); } } } @@ -236,14 +225,18 @@ color: $tc; background-color: $active_bg_color; - @if $is_highcontrast { - background-color: mix($active_bg_color, $hc_mix_color, 90%); + @if $contrast == 'high' { + background-color: hc_color_mix($active_bg_color); } // card style @if $card { $card_active_bg_color: mix($tc, $card_bg_color, 7%); background-color: $card_active_bg_color; + + @if $contrast == 'high' { + background-color: hc_color_mix($card_active_bg_color); + } } } @@ -256,10 +249,10 @@ &:hover { background-color: lighten($checked_bg_color, 12%);} &:active { background-color: lighten($checked_bg_color, 15%);} - @if $is_highcontrast { - background-color: mix($checked_bg_color, $hc_mix_color, 90%); - &:hover { background-color: mix(lighten($checked_bg_color, 12%), $hc_mix_color, 90%);} - &:active { background-color: mix(lighten($checked_bg_color, 15%), $hc_mix_color, 90%);} + @if $contrast == 'high' { + background-color: hc_color_mix($checked_bg_color); + &:hover { background-color: hc_color_mix(lighten($checked_bg_color, 12%));} + &:active { background-color: hc_color_mix(lighten($checked_bg_color, 15%));} } } @@ -268,7 +261,7 @@ color: if($variant == 'light', transparentize($tc, .6), transparentize($tc, .5)); background-color: if($variant == 'light', transparentize($tc, .9), transparentize($tc, .95)); - @if $is_highcontrast { + @if $contrast == 'high' { // no border since it isn't sensitive box-shadow: none; } @@ -339,7 +332,7 @@ } // bit of a hack to have nice high contrast - @if $is_highcontrast { + @if $contrast == 'high' { @if $flat { &:hover { box-shadow: inset 999px 0 0 0 transparentize($color, .92); @@ -463,7 +456,7 @@ } @else { background-color: transparentize($bg, 0.2); - @if $is_highcontrast { + @if $contrast == 'high' { border-color: $hc_inset_color; } @@ -479,7 +472,7 @@ } } - @if $is_highcontrast { + @if $contrast == 'high' { &:hover, &:active, &:focus, &:checked { border-color: $hc_inset_color; } @@ -495,7 +488,7 @@ border-radius: $forced_circular_radius; // use box-shadow instead of border - @if $is_highcontrast { + @if $contrast == 'high' { box-shadow: inset 0 0 0 1px $hc_inset_color; } } diff --git a/data/theme/gnome-shell-sass/_high-contrast-colors.scss b/data/theme/gnome-shell-sass/_high-contrast-colors.scss index 380a163b0..df1f18eef 100644 --- a/data/theme/gnome-shell-sass/_high-contrast-colors.scss +++ b/data/theme/gnome-shell-sass/_high-contrast-colors.scss @@ -1,82 +1,82 @@ -// When color definition differs for dark and light variant, -// it gets @if ed depending on $variant +// +// High Contrast theme definitions +// +// this is an always dark theme, so no 'light' theme conditions @import '_palette.scss'; +@import '_default-colors.scss'; -$is_highcontrast:true; +// global colors +$base_color: $dark_5; +$bg_color: lighten($base_color, 10%); +$fg_color: $light_1; -$_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_fg_color; -$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, $yellow_3); -$error_color: if($variant == 'light', $red_3, $red_4); -$success_color: if($variant == 'light', $green_4, $green_5); -$destructive_color: $error_color; - -// color definitions for OSD elements -$osd_fg_color: $_light_fg_color; +// 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: 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); - -// button -$button_mix_factor: 20%; - -// notifications -$bubble_buttons_color: if($variant == 'light', darken($bg_color, 7%), lighten($bg_color, 5%)); - -// color definitions for card elements -$card_bg_color: if($variant == 'light', $light_1, $bg_color); -$card_shadow_color: transparent; -$card_shadow_border_color: $card_bg_color; - -// color definitions for system elements +// system elements $system_base_color: $dark_5; $system_fg_color: $light_1; -// derived system colors +// panel colors +$panel_bg_color: $dark_5; +$panel_fg_color: $light_1; + +// card elements +$card_bg_color: $bg_color; +$card_shadow_color: transparent; +$card_shadow_border_color: $card_bg_color; + +// +// Derived Colors +// +// colors based on the global defines above + +// borders +$borders_color: transparentize($fg_color, $border_opacity); +$outer_borders_color: $borders_color; + +// buttons in notifications +$bubble_buttons_color: lighten($bg_color, 5%); + +// osd colors +$osd_borders_color: transparentize($osd_fg_color, 0.8); +$osd_outer_borders_color: $osd_borders_color; + +// 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: $fg_color; $insensitive_bg_color: mix($bg_color, $base_color, 60%); $insensitive_borders_color: $borders_color; // 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%)); +$checked_bg_color: lighten($bg_color, 18%); +$checked_fg_color: lighten($fg_color, 18%); // 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%)); +$hover_bg_color: lighten($bg_color, 20%); +$hover_fg_color: lighten($fg_color, 20%); // 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%)); +$active_bg_color: lighten($bg_color, 22%); +$active_fg_color: lighten($fg_color, 22%); -// inset colour for high contrast + +// +// High Contrast specific definitions +// + +// color for outline drawn onto all elements (may be a border or a box-shadow) $hc_inset_color: transparentize($fg_color, 0.6); + +// color used in a mixin in _drawing to boost a color's contrast $hc_mix_color: $light_1; + +// the mix factor used to boost contrast of a color in the above mixin +$hc_mix_factor: 87%; diff --git a/data/theme/gnome-shell-sass/widgets/_app-grid.scss b/data/theme/gnome-shell-sass/widgets/_app-grid.scss index e7efac75f..2208ca3d1 100644 --- a/data/theme/gnome-shell-sass/widgets/_app-grid.scss +++ b/data/theme/gnome-shell-sass/widgets/_app-grid.scss @@ -48,7 +48,8 @@ $app_folder_size: 720px; border-radius:5px; background-color: $system_fg_color; margin-bottom: 2px; - @if $is_highcontrast { + + @if $contrast == 'high' { margin-bottom: 4px; } } @@ -68,7 +69,7 @@ $app_folder_size: 720px; box-shadow: inset 0 0 0 1px $system_borders_color; padding: 0 1px; - @if $is_highcontrast { + @if $contrast == 'high' { padding: 0 2px; box-shadow: inset 0 0 0 2px $hc_inset_color; } @@ -127,7 +128,7 @@ $page_indicator_size: 10px; color: $system_fg_color; border-radius: $forced_circular_radius; icon-size: $app_icon_size * 0.5; - @if $is_highcontrast { + @if $contrast == 'high' { box-shadow: inset 0 0 0 2px $hc_inset_color; } } @@ -165,7 +166,7 @@ $page_indicator_size: 10px; > StIcon { color: $system_fg_color;} - @if $is_highcontrast { + @if $contrast == 'high' { @include button(normal, $system_fg_color, transparentize($system_bg_color, 0.5)); } diff --git a/data/theme/gnome-shell-sass/widgets/_base.scss b/data/theme/gnome-shell-sass/widgets/_base.scss index 69ebb301a..8f9d08e01 100644 --- a/data/theme/gnome-shell-sass/widgets/_base.scss +++ b/data/theme/gnome-shell-sass/widgets/_base.scss @@ -15,4 +15,13 @@ // Dropshadow for large icons .icon-dropshadow { icon-shadow: 0 1px 5px rgba(black, 0.8); + + @if $contrast == 'high' { + icon-shadow: none; + background-color: $osd_bg_color; + padding: $base_padding * 2; + border-radius: $modal_radius; + border: 2px solid $hc_inset_color; + margin: $base_padding * 3; + } } diff --git a/data/theme/gnome-shell-sass/widgets/_calendar.scss b/data/theme/gnome-shell-sass/widgets/_calendar.scss index cf04e6043..28f680a46 100644 --- a/data/theme/gnome-shell-sass/widgets/_calendar.scss +++ b/data/theme/gnome-shell-sass/widgets/_calendar.scss @@ -117,9 +117,10 @@ border-radius: $base_border_radius * 0.5; background-color: transparentize($fg_color, 0.9); color: $insensitive_fg_color; + border: 1px solid transparent; - @if $is_highcontrast { - border:1px solid $hc_inset_color; + @if $contrast == 'high' { + border-color: $hc_inset_color; } } } diff --git a/data/theme/gnome-shell-sass/widgets/_dash.scss b/data/theme/gnome-shell-sass/widgets/_dash.scss index 90a520bcc..6357c5bdf 100644 --- a/data/theme/gnome-shell-sass/widgets/_dash.scss +++ b/data/theme/gnome-shell-sass/widgets/_dash.scss @@ -19,7 +19,7 @@ $dash_border_radius: $modal_radius + $dash_padding; border: 2px solid transparent; padding: $dash_padding * 2 $dash_padding; // padding is uneven - @if $is_highcontrast { + @if $contrast == 'high' { border-color: $hc_inset_color; } } @@ -62,7 +62,7 @@ $dash_border_radius: $modal_radius + $dash_padding; margin-right:$base_margin; background-color: $system_borders_color; - @if $is_highcontrast { + @if $contrast == 'high' { width: 2px; background-color: $hc_inset_color; } diff --git a/data/theme/gnome-shell-sass/widgets/_login-lock.scss b/data/theme/gnome-shell-sass/widgets/_login-lock.scss index feff37d38..36ae39309 100644 --- a/data/theme/gnome-shell-sass/widgets/_login-lock.scss +++ b/data/theme/gnome-shell-sass/widgets/_login-lock.scss @@ -99,9 +99,10 @@ $_gdm_dialog_width: 23em; background-color: transparentize($_gdm_fg, .95); color: $_gdm_fg; - @if $is_highcontrast { - box-shadow:inset 0 0 0 1px $hc_inset_color;; + @if $contrast == 'high' { + box-shadow:inset 0 0 0 1px $hc_inset_color; } + .user-widget .user-icon { border: 4px solid transparent; } diff --git a/data/theme/gnome-shell-sass/widgets/_looking-glass.scss b/data/theme/gnome-shell-sass/widgets/_looking-glass.scss index 37ce4b76e..66d23849a 100644 --- a/data/theme/gnome-shell-sass/widgets/_looking-glass.scss +++ b/data/theme/gnome-shell-sass/widgets/_looking-glass.scss @@ -9,13 +9,13 @@ border-radius: $modal_radius; margin-top: $base_margin; - border-top-width: 0; + border: 2px solid transparent; padding: $base_padding; spacing: $base_padding; box-shadow: 0 2px 4px 0 $shadow_color; - @if $is_highcontrast { - border: 2px solid $hc_inset_color; + @if $contrast == 'high' { + border-color: $hc_inset_color; background-color: $osd_bg_color; box-shadow:none; } diff --git a/data/theme/gnome-shell-sass/widgets/_message-list.scss b/data/theme/gnome-shell-sass/widgets/_message-list.scss index 02cb88137..86401912e 100644 --- a/data/theme/gnome-shell-sass/widgets/_message-list.scss +++ b/data/theme/gnome-shell-sass/widgets/_message-list.scss @@ -142,9 +142,10 @@ margin: $base_padding * 2 0; border-radius: $base_border_radius; color: $fg_color; + border: 1px solid transparent; - @if $is_highcontrast { - border: 1px solid $hc_inset_color; + @if $contrast == 'high' { + border-color: $hc_inset_color; margin: $base_padding * 2 2px; } @@ -161,7 +162,8 @@ &:insensitive { color: lighten($insensitive_fg_color, 5%); - @if $is_highcontrast { + + @if $contrast == 'high' { border-color: transparent; } } diff --git a/data/theme/gnome-shell-sass/widgets/_misc.scss b/data/theme/gnome-shell-sass/widgets/_misc.scss index d681e6eeb..15ed9cf9f 100644 --- a/data/theme/gnome-shell-sass/widgets/_misc.scss +++ b/data/theme/gnome-shell-sass/widgets/_misc.scss @@ -20,7 +20,8 @@ &.user-avatar { box-shadow:inset 0 0 0 1px transparentize($osd_fg_color, 0.9); - @if $is_highcontrast { + + @if $contrast == 'high' { box-shadow:inset 0 0 0 1px $hc_inset_color; } } diff --git a/data/theme/gnome-shell-sass/widgets/_notifications.scss b/data/theme/gnome-shell-sass/widgets/_notifications.scss index 5088969d8..d72fee665 100644 --- a/data/theme/gnome-shell-sass/widgets/_notifications.scss +++ b/data/theme/gnome-shell-sass/widgets/_notifications.scss @@ -11,7 +11,7 @@ $notification_banner_width: 34em; border-radius: $modal_radius; margin: $base_margin; - @if $is_highcontrast { + @if $contrast == 'high' { border: 1px solid $hc_inset_color; } diff --git a/data/theme/gnome-shell-sass/widgets/_panel.scss b/data/theme/gnome-shell-sass/widgets/_panel.scss index 6a5fdc8be..8cbabdb40 100644 --- a/data/theme/gnome-shell-sass/widgets/_panel.scss +++ b/data/theme/gnome-shell-sass/widgets/_panel.scss @@ -3,12 +3,8 @@ $privacy_indicator_color: if($variant == 'light', $orange_4, $orange_3); -$panel_bg_color: if($variant == 'light', $light_3, $dark_5); -$panel_fg_color: $fg_color; -$panel_border_color: if($variant == 'light', darken($panel_bg_color, 2%), $panel_bg_color); - -$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 +$transparent_panel_fg_color: $light_1; // always white for transparent lock screens +$system_panel_fg_color: $system_fg_color; // always light for lockscreen, overview $panel_height: 2.2em; $panel_transition_duration: 250ms; // same as the overview transition duration @@ -19,7 +15,6 @@ $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; // panel menus .panel-button { @@ -77,11 +72,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration } &.screen-recording-indicator { - @include panel_button($screenshot_ui_button_red, $fg:$_light_fg_color, $flat: false); + @include panel_button($screenshot_ui_button_red, $fg:$_base_color_light, $flat: false); } &.screen-sharing-indicator { - @include panel_button($privacy_indicator_color, $fg:$_light_fg_color, $flat: false); + @include panel_button($privacy_indicator_color, $fg:$_base_color_light, $flat: false); } // clock @@ -111,11 +106,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration // unfortunate duplication to keep indicator style in these states .panel-button { &.screen-recording-indicator { - @include panel_button($screenshot_ui_button_red, $fg:$_light_fg_color, $flat: false); + @include panel_button($screenshot_ui_button_red, $fg:$_base_color_light, $flat: false); } &.screen-sharing-indicator { - @include panel_button($privacy_indicator_color, $fg:$_light_fg_color, $flat: false); + @include panel_button($privacy_indicator_color, $fg:$_base_color_light, $flat: false); } } } diff --git a/data/theme/gnome-shell-sass/widgets/_popovers.scss b/data/theme/gnome-shell-sass/widgets/_popovers.scss index 827380afd..818e05fe9 100644 --- a/data/theme/gnome-shell-sass/widgets/_popovers.scss +++ b/data/theme/gnome-shell-sass/widgets/_popovers.scss @@ -40,7 +40,7 @@ $submenu_bg_color: lighten($menu_bg_color, 7%); &:checked { border-radius: $menuitem_border_radius $menuitem_border_radius 0 0 !important; - @if $is_highcontrast { + @if $contrast == 'high' { border: 1px solid $hc_inset_color; border-bottom-width:0; } @@ -74,9 +74,10 @@ $submenu_bg_color: lighten($menu_bg_color, 7%); .popup-sub-menu { border-radius: 0 0 $menuitem_border_radius+1px $menuitem_border_radius+1px; margin-bottom: $base_padding; + border: 1px solid transparent; - @if $is_highcontrast { - border: 1px solid $hc_inset_color; + @if $contrast == 'high' { + border-color: $hc_inset_color; } // submenu specific styles diff --git a/data/theme/gnome-shell-sass/widgets/_screenshot.scss b/data/theme/gnome-shell-sass/widgets/_screenshot.scss index b51236b6f..1535f009f 100644 --- a/data/theme/gnome-shell-sass/widgets/_screenshot.scss +++ b/data/theme/gnome-shell-sass/widgets/_screenshot.scss @@ -2,7 +2,7 @@ $screenshot_ui_panel_padding: $base_padding * 3; $screenshot_ui_panel_border_radius: $modal_radius * 2; -$screenshot_ui_button_red: $error_color; +$screenshot_ui_button_red: $red_4; .screenshot-ui-panel { @extend %osd_panel; @@ -86,7 +86,7 @@ $screenshot_ui_button_red: $error_color; padding: $base_padding * 0.5; spacing: $base_padding * 0.5; - @if $is_highcontrast { + @if $contrast == 'high' { box-shadow: inset 0 0 0 1px $hc_inset_color; } } @@ -97,7 +97,7 @@ $screenshot_ui_button_red: $error_color; background-color: transparent; border-radius: $forced_circular_radius; - @if $is_highcontrast { + @if $contrast == 'high' { box-shadow: inset 0 0 0 1px $hc_inset_color; } diff --git a/data/theme/gnome-shell-sass/widgets/_search-results.scss b/data/theme/gnome-shell-sass/widgets/_search-results.scss index e7b11ed8d..0b2dcfc02 100644 --- a/data/theme/gnome-shell-sass/widgets/_search-results.scss +++ b/data/theme/gnome-shell-sass/widgets/_search-results.scss @@ -29,7 +29,8 @@ padding: $base_padding * 2; margin:0 $base_margin * 3; border: 2px solid transparent; - @if $is_highcontrast { + + @if $contrast == 'high' { border-color: $hc_inset_color; } } @@ -91,7 +92,7 @@ .list-search-result-title { spacing: $base_padding * 2; - @if $is_highcontrast { + @if $contrast == 'high' { font-weight: bold; } } @@ -100,7 +101,7 @@ .list-search-result-description { color: $system_insensitive_fg_color; - @if $is_highcontrast { + @if $contrast == 'high' { color: $system_fg_color; } } diff --git a/data/theme/gnome-shell-sass/widgets/_switches.scss b/data/theme/gnome-shell-sass/widgets/_switches.scss index d6ce671c6..d8a68a7df 100644 --- a/data/theme/gnome-shell-sass/widgets/_switches.scss +++ b/data/theme/gnome-shell-sass/widgets/_switches.scss @@ -13,4 +13,10 @@ $switch_width: 48px; &:checked { background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/toggle-on-light.svg"),url("resource:///org/gnome/shell/theme/toggle-on.svg")); } + + @if $contrast == 'high' { + background-image: url("resource:///org/gnome/shell/theme/toggle-off-hc.svg"); + &:checked { background-image: url("resource:///org/gnome/shell/theme/toggle-on-hc.svg"); } + } + } diff --git a/data/theme/gnome-shell-sass/widgets/_window-picker.scss b/data/theme/gnome-shell-sass/widgets/_window-picker.scss index eb0da331f..c500a0af7 100644 --- a/data/theme/gnome-shell-sass/widgets/_window-picker.scss +++ b/data/theme/gnome-shell-sass/widgets/_window-picker.scss @@ -22,6 +22,11 @@ $window_close_button_color: transparentize(lighten($system_bg_color, 7%), .02); height: $large_icon_size; width: $large_icon_size; transition-duration: 100ms; + border: 2px solid transparent; + + @if $contrast == 'high' { + border-color: $hc_inset_color; + } & StIcon { icon-size: $medium_icon_size; } @@ -33,9 +38,6 @@ $window_close_button_color: transparentize(lighten($system_bg_color, 7%), .02); background-color: lighten($window_close_button_color, 13%); } - @if $is_highcontrast { - border:2px solid $hc_inset_color; - } } .workspace-background { diff --git a/data/theme/gnome-shell-sass/widgets/_workspace-thumbnails.scss b/data/theme/gnome-shell-sass/widgets/_workspace-thumbnails.scss index f8f5a1477..e9b9ceacd 100644 --- a/data/theme/gnome-shell-sass/widgets/_workspace-thumbnails.scss +++ b/data/theme/gnome-shell-sass/widgets/_workspace-thumbnails.scss @@ -12,7 +12,7 @@ border-radius: $base_border_radius * 0.5; border: 1px solid transparent; - @if $is_highcontrast { + @if $contrast == 'high' { border-color: $hc_inset_color; } }