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

style: Clean up color definitions and High Contrast

Browse Source 
- 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: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3097>
This commit is contained in:
Sam Hewitt 2024-01-08 14:05:09 -03:30 committed by Jakub Steiner
parent 129fe3a07e
commit ea73e4f1e9
24 changed files with 245 additions and 216 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
data/theme/gnome-shell-dark.scss
View File

@ -1,4 +1,5 @@
$variant: 'dark';
$contrast: 'normal';
@import "gnome-shell-sass/_colors"; //use gtk colors
@import "gnome-shell-sass/_drawing";

29
data/theme/gnome-shell-high-contrast.scss
View File

@ -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;
}

1
data/theme/gnome-shell-light.scss
View File

@ -1,4 +1,5 @@
$variant: 'light';
$contrast: 'normal';
@import "gnome-shell-sass/_colors"; //use gtk colors
@import "gnome-shell-sass/_drawing";

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

@ -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%);

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

@ -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;
}
}

51
data/theme/gnome-shell-sass/_default-colors.scss Normal file
View File

@ -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;
}

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

@ -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;
}
}

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

@ -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%;

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

@ -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));
}

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

@ -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;
}
}

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

@ -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;
}
}
}

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

@ -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;
}

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

@ -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;
}

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

@ -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;
}

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

@ -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;
}
}

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

@ -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;
}
}

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

@ -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;
}

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

@ -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);
}
}
}

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

@ -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

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

@ -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;
}

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

@ -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;
}
}

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

@ -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"); }
}
}

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

@ -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 {

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

@ -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;
}
}