From a917644fad589f28bf66fcc4cd8b34bd5772cdfc Mon Sep 17 00:00:00 2001 From: Sam Hewitt Date: Wed, 10 Jan 2024 22:21:11 -0330 Subject: [PATCH] style: Refactor the button and entry drawing css - use a single button mixin for all buttons with a saner 'style' parameter - rework the entry mixins to be similar to the buttons' - clear out all unused or deprecated mixins - create some drawing functions for focus ring and high contrast inset - replace instances of old mixins with the new Part-of: --- data/theme/gnome-shell-sass/_colors.scss | 6 +- data/theme/gnome-shell-sass/_common.scss | 161 +++--- .../gnome-shell-sass/_default-colors.scss | 17 +- data/theme/gnome-shell-sass/_drawing.scss | 543 ++++++++---------- .../_high-contrast-colors.scss | 5 +- .../gnome-shell-sass/widgets/_app-grid.scss | 30 +- .../gnome-shell-sass/widgets/_buttons.scss | 19 + .../gnome-shell-sass/widgets/_calendar.scss | 21 +- .../theme/gnome-shell-sass/widgets/_dash.scss | 20 +- .../gnome-shell-sass/widgets/_keyboard.scss | 46 +- .../gnome-shell-sass/widgets/_login-lock.scss | 2 +- .../widgets/_looking-glass.scss | 2 +- .../widgets/_message-list.scss | 2 +- .../theme/gnome-shell-sass/widgets/_misc.scss | 2 +- .../widgets/_notifications.scss | 2 +- .../gnome-shell-sass/widgets/_panel.scss | 8 +- .../gnome-shell-sass/widgets/_popovers.scss | 2 +- .../widgets/_quick-settings.scss | 9 +- .../gnome-shell-sass/widgets/_screenshot.scss | 4 +- .../widgets/_search-results.scss | 2 +- .../widgets/_switcher-popup.scss | 2 +- 21 files changed, 436 insertions(+), 469 deletions(-) diff --git a/data/theme/gnome-shell-sass/_colors.scss b/data/theme/gnome-shell-sass/_colors.scss index f56b8dc5c..ffd4e9fc9 100644 --- a/data/theme/gnome-shell-sass/_colors.scss +++ b/data/theme/gnome-shell-sass/_colors.scss @@ -38,9 +38,6 @@ $card_shadow_border_color: if($variant == 'light', transparentize($dark_5, .91), $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%)); - // osd colors $osd_borders_color: transparentize($osd_fg_color, 0.9); $osd_outer_borders_color: transparentize($osd_fg_color, 0.98); @@ -67,3 +64,6 @@ $hover_fg_color: if($variant=='light', darken($fg_color,9%), lighten($fg_color, // active state $active_bg_color: if($variant=='light', darken($bg_color, 11%), lighten($bg_color, 12%)); $active_fg_color: if($variant=='light', darken($fg_color, 11%), lighten($fg_color, 12%)); + +// selection colors +$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), lighten($selected_bg_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 084d4b89c..05fe154dc 100644 --- a/data/theme/gnome-shell-sass/_common.scss +++ b/data/theme/gnome-shell-sass/_common.scss @@ -25,7 +25,7 @@ $cakeisalie: "This stylesheet is generated, DO NOT EDIT"; /* Global Values */ -// Base values of elemetns of the shell in their smallest "unit". +// Base values of elements of the shell in their smallest "unit". // These are used in calculations elsewhere to have elements in proportion $base_font_size: 11pt; // font size $base_padding: 6px; // internal padding of elements @@ -58,6 +58,8 @@ $scalable_icon_size: to_em(16px); $medium_scalable_icon_size: $scalable_icon_size * 1.5; $large_scalable_icon_size: $scalable_icon_size * 2; +// animation definition +$ease_out_quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); // Stage stage { @@ -72,26 +74,17 @@ stage { border-radius: $base_border_radius * 2; padding: $base_padding; spacing: $base_padding; - border-width: 2px; - border-style: solid; - border-color:transparent; - transition-duration: 200ms; text-align: center; - color: inherit; - - @if $contrast == 'high' { - border-color: $hc_inset_color; - } + transition-duration: 100ms; } // common button styling %button_common { border-radius: $base_border_radius; - border-style: solid; - border-width: 1px; - font-weight: bold; padding: $base_padding * .5 $base_padding * 4; - transition-duration: 100ms; + font-weight: bold; + transition: border-width 300ms $ease_out_quad, + box-shadow 300ms $ease_out_quad; } %button { @@ -103,22 +96,36 @@ stage { &:selected, &:active { @include button(active);} &:checked { @include button(checked);} - &.default { @include button(default);} +} - &.flat { - @include button(normal, $flat:true); - &:focus { @include button(focus, $flat:true);} - &:hover { @include button(hover, $flat:true);} - &:insensitive { @include button(insensitive, $flat:true);} - &:selected, - &:active { @include button(active, $flat:true);} - &:checked { @include button(checked, $flat:true);} - &.default { @include button(default, $flat:false);} - } +%flat_button { + @include button(normal, $style: flat); + &:focus { @include button(focus, $style: flat);} + &:hover { @include button(hover, $style: flat);} + &:insensitive { @include button(insensitive, $style: flat);} + &:selected, + &:active { @include button(active, $style: flat);} + &:checked { @include button(checked, $style: flat);} +} + +%default_button { + @include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default); + &:focus { @include button(focus, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);} + &:hover { @include button(hover, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);} + &:insensitive { @include button(insensitive, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);} + &:active { @include button(active, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);} +} + +// items in popover menus +%menuitem { + font-weight: normal; + spacing: $base_padding; + transition-duration: 100ms; + padding: $base_padding * 1.5 $base_padding * 2; } // common style for card elements -%card { +%card_common { border-radius: $base_border_radius * 1.5; padding: $scaled_padding * 2; margin: $base_margin; @@ -126,6 +133,29 @@ stage { box-shadow: 0 1px 2px 0 $card_shadow_color; // bit of a hack here with border since we can't have double box-shadow border: 1px solid $card_shadow_border_color; + + @if $contrast == 'high' { + border-color: transparent; + box-shadow: none; + } +} + +%card { + @extend %card_common; + @include button(normal, $style: card); + &:hover { @include button(hover, $style: card);} + &:active { @include button(active, $style: card);} + &:focus { @include button(focus, $style: card);} + &:insensitive { @include button(insensitive, $style: card);} +} + +%card_flat { + @extend %card_common; + @include button(undecorated, $style: flat); + &:hover { @include button(hover, $style: flat);} + &:active { @include button(active, $style: flat);} + &:focus { @include button(focus, $style: card);} + &:insensitive { @include button(insensitive, $style: card);} } @@ -139,10 +169,10 @@ stage { %entry { @extend %entry_common; - @include entry(normal, $c:$fg_color); - &:hover { @include entry(hover, $c:$fg_color);} - &:focus { @include entry(focus, $c:$fg_color);} - &:insensitive { @include entry(insensitive, $c:$fg_color);} + @include entry(normal); + &:hover { @include entry(hover);} + &:focus { @include entry(focus);} + &:insensitive { @include entry(insensitive);} StLabel.hint-text { color: transparentize($fg_color, 0.3); @@ -155,36 +185,36 @@ stage { padding: $base_padding * 2; font-weight: bold !important; - &:ltr {margin-right: 1px;} - &:rtl {margin-left: 1px;} + // needs a 1px adjustment to fit exactly into the outer radius + $bubble_button_radius: $modal_radius - 1px; - @include button(normal, $c:$bubble_buttons_color); - &:insensitive { @include button(insensitive, $c:$bubble_buttons_color);} - &:focus { @include button(focus, $c:$bubble_buttons_color);} - &:hover { @include button(hover, $c:$bubble_buttons_color);} - &:active { @include button(active, $c:$bubble_buttons_color);} - &:checked { @include button(checked, $c:$bubble_buttons_color);} + @include button(normal, $style: bubble); + &:focus { @include button(focus, $style: bubble);} + &:hover { @include button(hover, $style: bubble);} + &:active { @include button(active, $style: bubble);} + &:checked { @include button(checked, $style: bubble);} + &:insensitive { @include button(insensitive, $style: bubble);} &:first-child:ltr { - border-radius: 0 0 0 $modal_radius; + border-radius: 0 0 0 $bubble_button_radius; } &:last-child:ltr { - border-radius: 0 0 $modal_radius; + border-radius: 0 0 $bubble_button_radius; margin-right: 0 !important; } &:first-child:rtl { - border-radius: 0 0 $modal_radius; + border-radius: 0 0 $bubble_button_radius; } &:last-child:rtl { - border-radius: 0 0 0 $modal_radius; + border-radius: 0 0 0 $bubble_button_radius; margin-left: 0 !important; } &:first-child:last-child { - border-radius: 0 0 $modal_radius $modal_radius; + border-radius: 0 0 $bubble_button_radius $bubble_button_radius; margin-left: 0 !important; margin-right: 0 !important; } @@ -263,20 +293,18 @@ stage { border: 1px solid $osd_outer_borders_color; border-radius: $forced_circular_radius; padding: $base_padding * 2; - border: 2px solid transparent; - @if $contrast == 'high' { - border-color: $hc_inset_color; + @include draw_hc_inset($width: 2px,$border: true); } } // entries %osd_entry { @extend %entry_common; - @include entry(normal, $c:$osd_fg_color,); - &:hover { @include entry(hover, $c:$osd_fg_color);} - &:focus { @include entry(focus, $c:$osd_fg_color);} - &:insensitive { @include entry(insensitive, $c:$osd_fg_color);} + @include entry(normal, $c:$osd_fg_color, $bc:$osd_bg_color, $always_dark: true); + &:hover { @include entry(hover, $c:$osd_fg_color, $bc:$osd_bg_color, $always_dark: true);} + &:focus { @include entry(focus, $c:$osd_fg_color, $bc:$osd_bg_color, $always_dark: true);} + &:insensitive { @include entry(insensitive, $c:$osd_fg_color, $bc:$osd_bg_color, $always_dark: true);} StLabel.hint-text {color: transparentize($osd_fg_color, 0.3); } } @@ -284,18 +312,22 @@ stage { // buttons on OSD elements %osd_button { @extend %button_common; - @include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true); - &:insensitive { @include button(insensitive, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);} - &:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);} - &:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);} - &:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);} - &:outlined,&:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);} + @include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color); + &:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color);} + &:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color);} + &:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color);} + &:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color);} + &:insensitive { @include button(insensitive, $tc:$osd_fg_color, $c:$osd_bg_color);} } %osd_button_flat { - @extend %osd_button; - @include button(undecorated, $osd:true); - &:insensitive { @include button(undecorated, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);} + @extend %button_common; + @include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat); + &:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat);} + &:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat);} + &:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat);} + &:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat);} + &:insensitive { @include button(insensitive, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat);} } /* System Elements */ @@ -303,15 +335,14 @@ stage { // entries %system_entry { @extend %entry_common; - @include entry(normal, $c:$system_fg_color,); - &:hover { @include entry(hover, $c:$system_fg_color);} - &:focus { @include entry(focus, $c:$system_fg_color, $fc:$selected_bg_color);} - &:insensitive { @include entry(insensitive, $c:$system_fg_color);} + @include entry(normal, $c:$system_fg_color, $bc:$system_bg_color, $always_dark: true); + &:hover { @include entry(hover, $c:$system_fg_color, $bc:$system_bg_color, $always_dark: true);} + &:focus { @include entry(focus, $c:$system_fg_color, $bc:$system_bg_color, $always_dark: true);} + &:insensitive { @include entry(insensitive, $c:$system_fg_color, $bc:$system_bg_color, $always_dark: true);} StLabel.hint-text { color: transparentize($system_fg_color, 0.3);} } - // buttons %system_button { @include button(normal, $tc:$system_fg_color, $c:$system_bg_color); @@ -319,5 +350,5 @@ stage { &:focus { @include button(focus, $tc:$system_fg_color, $c:$system_bg_color);} &:hover { @include button(hover, $tc:$system_fg_color, $c:$system_bg_color);} &:active { @include button(active, $tc:$system_fg_color, $c:$system_bg_color);} - &:outlined,&:checked { @include button(checked, $tc:$system_fg_color, $c:$system_bg_color);} + &:checked { @include button(checked, $tc:$system_fg_color, $c:$system_bg_color);} } diff --git a/data/theme/gnome-shell-sass/_default-colors.scss b/data/theme/gnome-shell-sass/_default-colors.scss index 8f276c0ac..72588d8f4 100644 --- a/data/theme/gnome-shell-sass/_default-colors.scss +++ b/data/theme/gnome-shell-sass/_default-colors.scss @@ -23,29 +23,32 @@ $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_bg_color: if($variant == 'light', $blue_4, $blue_3); $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_color: if($variant == 'light', $blue_4, $blue_2); $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); +$background_mix_factor: if($variant == 'light', 12%, 9%); // used to boost the color of backgrounds in different variants +$border_opacity: if($variant == 'light', .85, .9); // change the border opacity in different variants // 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)); +// focus colors +$focus_color: $selected_bg_color; +$focus_border_color: transparentize($focus_color, 0.5); + // 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; + // less transparent focus color + $focus_border_color: transparentize($focus_color, 0.2); } diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss index 649cca3fc..efb5f953f 100644 --- a/data/theme/gnome-shell-sass/_drawing.scss +++ b/data/theme/gnome-shell-sass/_drawing.scss @@ -1,4 +1,6 @@ -// Drawing mixins +// +// Drawing functions +// // Function to convert px values to em @function to_em($input, $base: 16px) { @@ -17,6 +19,33 @@ @return mix($c, $mc, $mf); } +// Function to mix the color and make the focus background +@function focus_bg_color($bg, $fc:$focus_color) { + @return mix($fc, $bg, 5%); +} + +// +// Drawing mixins +// + +// Draw the inset for High Contrast elements +@mixin draw_hc_inset($width: 1px, $fc: $hc_inset_color, $border: false) { + box-shadow: inset 0 0 0 $width $fc; + @if $border { + border: $width solid $fc; + box-shadow: none; + } +} + +// Draw the focus ring +@mixin focus_ring($width: 2px, $fc: $focus_border_color, $border: false) { + box-shadow: inset 0 0 0 $width $fc !important; + @if $border { + border:$width solid $fc !important; + box-shadow: none; + } +} + // 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 @@ -26,384 +55,274 @@ // font-size: round($size) + pt; } -// Text entries -@mixin entry($t, $c, $fc:$selected_bg_color) { -// -// Entries drawing function -// -// $t: entry type -// $c: text color, used to derive background color of entries -// -// possible $t values: normal, focus, insensitive -// - transition-duration: 100ms; +// Text entries drawing function +@mixin entry($type, $c:$fg_color, $bc:$bg_color, $always_dark: false) { + // + // $type: entry type, possible values: normal, focus, hover, insensitive + // $c: text color + // $bc: background color + // $always_dark: override the light theme check to use dark colors, true or false + // - @if $t==normal { - background-color: transparentize($c, 0.85); + // background color + $entry_bg_color: mix($c, $bc, $background_mix_factor); + + // background color adjustment factors + // the % a color is lightened or darkened for button states + $hover_factor: 4%; + $insensitive_factor: 3%; + + // entry state background colors + $hover_entry_bg_color: if($variant == 'light', darken($entry_bg_color, $hover_factor), lighten($entry_bg_color, $hover_factor)); + $insensitive_entry_bg_color: if($variant == 'light', lighten($entry_bg_color, $insensitive_factor), darken($entry_bg_color, $insensitive_factor)); + + // override entry background colours if element is always dark + @if $always_dark { + $hover_entry_bg_color: lighten($entry_bg_color, $hover_factor); + $insensitive_entry_bg_color: darken($entry_bg_color, $insensitive_factor); + } + + @if $contrast == 'high' { + @include draw_hc_inset(); + } + + // normal + @if $type == 'normal' { + background-color: $entry_bg_color; color: transparentize($c,0.3); - - @if $contrast == 'high' { - box-shadow: inset 0 0 0 1px $hc_inset_color; - } } - @if $t==focus { - background-color: mix(transparentize($c, 0.75), $fc, 95%); - box-shadow: inset 0 0 0 2px transparentize($fc, 0.3); + // focus styles + @if $type == 'focus' { + @include focus_ring(); + background-color: focus_bg_color($entry_bg_color); color: $c; - &:hover {} } - @if $t==hover { - background-color: transparentize($c, 0.75); + // hover styles + @if $type == 'hover' { + background-color: $hover_entry_bg_color; + color: $c; } - @if $t==insensitive { - background-color:transparentize($c, 0.75); + // insensitive styles + @if $type == 'insensitive' { + background-color: $insensitive_entry_bg_color; color: transparentize($c, 0.5); } } -// On-screen Keyboard -@mixin keyboard_key($t, $c:$osd_bg_color, $tc:$osd_fg_color) { -// -// Keyboard key drawing function -// -// $t: key type, -// $c: base key color for colored* types -// $tc: optional text color for colored* types -// -// possible $t values: -// normal, hover, active, checked, insensitive, undecorated -// - // normal key - @if $t==normal { - color: $tc; - background-color: lighten($c, 3%); - } - - // focused key - @if $t==focus { - color: $tc; - background-color: mix(lighten($c, 3%), $selected_bg_color, 90%); - box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4); - &:hover { - background-color: mix(lighten($c, 8%), $selected_bg_color, 90%); - box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3); - } - &:active { - background-color: mix(lighten($c, 10%), $selected_bg_color, 90%); - box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3); - } - } - - // hover key - @else if $t==hover { - color: $tc; - background-color: lighten($c, 7%); - } - - // active key - @else if $t==active { - color: $tc; - background-color: lighten($c, 10%); - } - - // checked key - @else if $t==checked { - color: $tc; - background-color: lighten($c, 15%); - } - - // insensitive key - @else if $t==insensitive { - color: $insensitive_fg_color; - background-color: $insensitive_bg_color; - } - - // reset - @else if $t==undecorated { - background-color: transparent; - background-image: none; - } -} - -// // Button drawing function -// -// $t: button type -// -// possible $t values: -// normal, focus, hover, active, checked, insensitive, default, undecorated, -// -// $c: button bg color, derived from bg_color -// $tc: button text color, derived from fg_color -// -// $flat: button has no styling -// $osd: button uses OSD styling -// $card: button uses card styling -// +@mixin button($type, $tc:$fg_color, $c:$bg_color, $style: null, $always_dark: false) { + // + // $type: button type, possible values: + // - normal, focus, hover, active, checked, insensitive, default, undecorated + // $c: button bg color, derived from bg_color + // $tc: button text color, derived from fg_color + // $style: button style, possible values: card, bubble, flat, default + // $always_dark: override the light theme check to use dark colors, true or false + // -@mixin button($t, $tc:$fg_color, $c:$bg_color, $flat: false, $osd: false, $card: false){ - - // background color - $button_bg_color: mix($tc, $c, $button_mix_factor); - - // background color override for OSD elements - @if $osd { - $button_bg_color: transparentize($tc, 0.9); - } + // mix input colors to get button background color + $button_bg_color: mix($tc, $c, $background_mix_factor); // background color override for card elements - @if $card { - $button_bg_color: $card_bg_color; + @if $style == 'card' { $button_bg_color: $card_bg_color;} + // background color override for buttons in notifications + @if $style == 'bubble' { $button_bg_color: if($variant == 'light', darken($button_bg_color, 3%), lighten($button_bg_color, 10%));} + // background color mix override for flat style; the button bg color is the background color input + @if $style == 'flat' { $button_bg_color: $c;} + // background color mix override for default button style + @if $style == 'default' { $button_bg_color: $c;} - @if $contrast == 'high' { - $button_bg_color: hc_color_mix($card_bg_color); - } + // background color adjustment factors + // the % a color is lightened or darkened for button states + $hover_factor: 4%; + $active_factor: 9%; + $checked_factor: 8%; + $insensitive_factor: 3%; + + // flat style overrides + @if $style == 'flat' { + $hover_factor: 7%; // stronger factor in flat style } - // normal button - @if $t==normal { + // button state background colors + $hover_button_bg_color: if($variant == 'light', darken($button_bg_color, $hover_factor), lighten($button_bg_color, $hover_factor)); + $active_button_bg_color: if($variant == 'light', darken($button_bg_color, $active_factor), lighten($button_bg_color, $active_factor)); + $checked_button_bg_color: if($variant == 'light', darken($button_bg_color, $checked_factor), lighten($button_bg_color, $checked_factor)); + $insensitive_button_bg_color: if($variant == 'light', lighten($button_bg_color, $insensitive_factor), darken($button_bg_color, $insensitive_factor)); + + // override button background colours if element is always dark + @if $always_dark { + $hover_button_bg_color: lighten($button_bg_color, $hover_factor); + $active_button_bg_color: lighten($button_bg_color, $active_factor); + $checked_button_bg_color: lighten($button_bg_color, $checked_factor); + $insensitive_button_bg_color: darken($button_bg_color, $insensitive_factor); + } + + // flat style overrides + @if $style == 'flat' { + $insensitive_button_bg_color: $button_bg_color; + } + + // high contrast overrides + @if $contrast == 'high' { + // override button background colors for high contrast + $button_bg_color: hc_color_mix($button_bg_color); + $hover_button_bg_color: hc_color_mix($hover_button_bg_color); + $active_button_bg_color: hc_color_mix($active_button_bg_color); + $checked_button_bg_color: hc_color_mix($checked_button_bg_color); + + // also draw the inset border + @include draw_hc_inset(); + + // duplicate flat bg color for High Contrast + @if $style == 'flat' { + $button_bg_color: $c; + } + + @if $style == 'default' { + @include draw_hc_inset($width:0px); + } + } + + // normal style + @if $type == 'normal' { color: $tc; background-color: $button_bg_color; - @if $flat { - background-color: transparent; - } - @if $contrast == 'high' { - box-shadow: inset 0 0 0 1px $hc_inset_color; - } - } - - // focused button - @if $t==focus { - $focus_bg_color: mix($button_bg_color, $selected_bg_color, 90%); - color: $tc; - background-color: $focus_bg_color; - box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4) !important; - - &:hover { - background-color: if($variant == 'light', darken($focus_bg_color, 3%), lighten($focus_bg_color, 3%)); - box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3) !important; - } - &:active { - background-color: if($variant == 'light', darken($focus_bg_color, 6%), lighten($focus_bg_color, 6%)); - box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3) !important; - } - - // card style - @if $card { - border-color: transparent; - } } // hover button - @else if $t==hover { - $hover_bg_color: if($variant == 'light', darken($button_bg_color, 3%), lighten($button_bg_color, 3%)); + @else if $type == 'hover' { color: $tc; - background-color: $hover_bg_color; - - @if $contrast == 'high' { - background-color: hc_color_mix($hover_bg_color); - } - - // card style - @if $card { - $card_hover_bg_color: mix($tc, $card_bg_color, 4%); - background-color: $card_hover_bg_color; - - @if $contrast == 'high' { - background-color: hc_color_mix($card_hover_bg_color); - } - } + background-color: $hover_button_bg_color; } // active button - @else if $t==active { - $active_bg_color: if($variant == 'light', darken($button_bg_color, 6%), lighten($button_bg_color, 6%)); + @else if $type == 'active' { color: $tc; - background-color: $active_bg_color; - - @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); - } + background-color: $active_button_bg_color; + &:hover { background-color: if($variant == 'light', darken($active_button_bg_color, $hover_factor), lighten($active_button_bg_color, $hover_factor));} + &:focus { + // otherwise use focus bg color mixin + $bg: focus_bg_color($active_button_bg_color); + background-color: $bg; } } // checked button - @else if $t==checked { - $checked_bg_color:if($variant == 'light', darken($button_bg_color, 9%), lighten($button_bg_color, 9%)); + @else if $type == 'checked' { color: $tc; - background-color: $checked_bg_color; - - &:hover { background-color: lighten($checked_bg_color, 12%);} - &:active { background-color: lighten($checked_bg_color, 15%);} - - @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%));} - } + background-color: $checked_button_bg_color; + &:hover { background-color: if($variant == 'light', darken($checked_button_bg_color, $hover_factor), lighten($active_button_bg_color, $hover_factor));} + &:active { background-color: if($variant == 'light', darken($checked_button_bg_color, $active_factor), lighten($active_button_bg_color, $active_factor));} } // insensitive button - @else if $t==insensitive { - color: if($variant == 'light', transparentize($tc, .6), transparentize($tc, .5)); - background-color: if($variant == 'light', transparentize($button_bg_color, .9), transparentize($button_bg_color, .95)); + @else if $type == 'insensitive' { + $insensitive_button_fg_color: if($variant == 'light', transparentize($tc, .6), transparentize($tc, .5)); + color: $insensitive_button_fg_color; + background-color: $insensitive_button_bg_color; + &:hover { background-color: if($variant == 'light', darken($insensitive_button_bg_color, $hover_factor), lighten($insensitive_button_bg_color, $hover_factor));} + // no outline in High Contrast for insensitive buttons @if $contrast == 'high' { - // no border since it isn't sensitive - box-shadow: none; + @include draw_hc_inset($fc:transparent); } } - // default/suggested button - @else if $t==default { - background-color: $selected_bg_color; - color: $selected_fg_color; + // focused button + @else if $type == 'focus' { + color: $tc; + @include focus_ring(); - &:focus { - box-shadow: inset 0 0 0 2px transparentize($selected_fg_color, .4) !important; + // use a different focus ring color for default style + @if $style == 'default' { + @include focus_ring($fc:$selected_borders_color); } - &:hover, &:focus { - background-color: lighten($selected_bg_color, 5%); - color: lighten($selected_fg_color, 5%); + // change background color if style is flat + @if $style == 'flat' { + $button_bg_color: transparentize($button_bg_color, 0.75); } - &:active { - background-color: darken($selected_bg_color, 7%); - color: darken($selected_fg_color, 7%); - } - &:insensitive { - @include button(insensitive); - background-color: transparentize($selected_bg_color, .5); - color: transparentize($selected_fg_color, .5); + + background-color: focus_bg_color($button_bg_color); + + &:hover { + background-color: focus_bg_color($hover_button_bg_color); } } // reset (unstyled button) - @else if $t==undecorated { + @else if $type == 'undecorated' { background-color: transparent; border-color: transparent; box-shadow: none; &:insensitive { - @include button(insensitive); background-color: transparent !important; } } } // Helper mixin for button-like elements with an icon -@mixin tile_button($color, $flat: true) { +@mixin tile_button($fg:$system_fg_color, $bg:$system_bg_color, $raised: false, $system: true) { + // + // $fg: foreground color + // $bg: background color + // + // $raised: uses raised style, true or false + // $system: uses system styles, true or false + // + + @extend %tile; - color: $color; - // focus-color - $fc: mix($selected_bg_color, $color, 90%); - - @if $flat { - background-color: transparent; - &:hover { background-color: transparentize($color, .88);} - &:highlighted, &:focus { - background-color: transparentize($fc, .84); - &:hover { - background-color: transparentize($fc, .68); - } - } + @if $raised { + @include button(normal, $tc:$fg, $c:$bg, $always_dark: $system); + &:focus { @include button(focus, $tc:$fg, $c:$bg, $always_dark: $system);} + &:hover { @include button(hover, $tc:$fg, $c:$bg, $always_dark: $system);} + &:active { @include button(active, $tc:$fg, $c:$bg, $always_dark: $system);} + &:selected, + &:checked { @include button(checked, $tc:$fg, $c:$bg, $always_dark: $system);} + &:insensitive { @include button(insensitive, $tc:$fg, $c:$bg, $always_dark: $system);} } @else { - background-color: transparentize($color, .84); - &:hover { background-color: transparentize($color, .72);} - &:highlighted, &:focus { - background-color: transparentize(mix($fc, $color, 20%), .84); - &:hover { - background-color: transparentize(mix($fc, $color, 20%), .68); - } - } + @include button(normal, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system); + &:focus { @include button(focus, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);} + &:hover { @include button(hover, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);} + &:active { @include button(active, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);} + &:selected, + &:checked { @include button(checked, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);} + &:insensitive { @include button(insensitive, $tc:$fg, $c:$bg, $style: flat, $always_dark: $system);} } - // bit of a hack to have nice high contrast @if $contrast == 'high' { - @if $flat { - &:hover { - box-shadow: inset 999px 0 0 0 transparentize($color, .92); - } - &:highlighted, &:focus { - box-shadow: inset 999px 0 0 0 transparentize($fc, .8); - } - } @else { - box-shadow: inset 999px 0 0 0 transparentize($color, .92); - border-color: transparentize($color, .44); - &:highlighted, &:focus { - box-shadow: inset 999px 0 0 0 transparentize($fc, .8); - } - } + @include draw_hc_inset(); } - &:highlighted, &:focus { - border-color: transparentize($fc, .3); - } - - &:active { - background-color: transparentize($color, .76); - &:focus { - background-color: transparentize($fc, .68); - } - } - - &:selected, - &:checked { - background-color: transparentize($color, .81); - &:active { background-color: transparentize($color, .78);} - &:hover { background-color: transparentize($color, .75);} + &:highlighted { + // brighter background color than other states + $bg: transparentize($fg, 0.8); + @include button(active, $tc:$fg, $c:$bg, $always_dark: $system); } &:drop { - border-color: transparentize($selected_bg_color, .2); background-color: transparentize($selected_bg_color, .8); - } -} - -// styling for elements within popovers that look like notifications -@mixin card($flat: false) { - @extend %card; - - @if $flat { - @include button(undecorated, $card: false); - &:hover {@include button(hover, $card: false);} - &:active {@include button(active, $card: false);} - } @else { - @include button(normal, $card: true); - &:hover {@include button(hover, $card: true);} - &:active {@include button(active, $card: true);} - } - &:focus {@include button(focus, $card: true);} - &:insensitive { - @include button(insensitive, $card: true); + box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, .2); } } // styling for all menuitems in popovers -@mixin menuitem($bg, $flat: true) { +@mixin menuitem($bg, $style: flat) { + + // extend common styles + @extend %menuitem; // lighten the background color always $bg: lighten($bg,5%); - font-weight: normal; - spacing: $base_padding; - transition-duration: 100ms; - padding: $base_padding * 1.5 $base_padding * 2; - - @if $flat { + @if $style == 'flat' { @include button(undecorated); } @else { @include button(normal, $c:$bg); @@ -416,20 +335,19 @@ &:checked {@include button(checked, $c:$bg);} } -// // Panel menu/button drawing function -// -// $bg: background color, derived from $panel_fg_color -// $fg: foreground color, also derived from $panel_fg_color -// -// $flat: if true, the button is filled instead of transparent -// $highlighted_child: if true, applies some special overrides for to a -// child element, see _panel.scss for details -// $child_class: class name of the child element -// - -@mixin panel_button($bg:$panel_fg_color, $fg:$panel_fg_color, $flat: true, $highlighted_child: false, $child_class:"") { +@mixin panel_button($bg:$panel_fg_color, $fg:$panel_fg_color, $style: flat, $highlighted_child: false, $child_class:"") { + // + // $bg: background color, derived from $panel_fg_color + // $fg: foreground color, also derived from $panel_fg_color + // + // $flat: if true, the button is filled instead of transparent + // $highlighted_child: if true, applies some special overrides for to a + // child element, see _panel.scss for details + // $child_class: class name of the child element + // + // common styles transition-duration: 150ms; margin: 3px; border: 1px solid transparent; @@ -437,9 +355,10 @@ font-weight: bold; background-color: transparent; + color: $fg; - @if $flat { + @if $style == 'flat' { box-shadow: none; &:active, &:focus, &:checked { @@ -456,7 +375,7 @@ } @else { background-color: transparentize($bg, 0.2); - @if $contrast == 'high' { + @if $contrast == 'high' { border-color: $hc_inset_color; } @@ -489,7 +408,7 @@ // use box-shadow instead of border @if $contrast == 'high' { - box-shadow: inset 0 0 0 1px $hc_inset_color; + @include draw_hc_inset(); } } diff --git a/data/theme/gnome-shell-sass/_high-contrast-colors.scss b/data/theme/gnome-shell-sass/_high-contrast-colors.scss index df1f18eef..3cc447c22 100644 --- a/data/theme/gnome-shell-sass/_high-contrast-colors.scss +++ b/data/theme/gnome-shell-sass/_high-contrast-colors.scss @@ -37,9 +37,6 @@ $card_shadow_border_color: $card_bg_color; $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; @@ -67,6 +64,8 @@ $hover_fg_color: lighten($fg_color, 20%); $active_bg_color: lighten($bg_color, 22%); $active_fg_color: lighten($fg_color, 22%); +// selection colors +$selected_borders_color: lighten($selected_bg_color, 30%); // // High Contrast specific definitions diff --git a/data/theme/gnome-shell-sass/widgets/_app-grid.scss b/data/theme/gnome-shell-sass/widgets/_app-grid.scss index 2208ca3d1..bdcd98e65 100644 --- a/data/theme/gnome-shell-sass/widgets/_app-grid.scss +++ b/data/theme/gnome-shell-sass/widgets/_app-grid.scss @@ -19,7 +19,7 @@ $app_folder_size: 720px; // items in the app grid and dash .overview-tile { - @include tile_button($system_fg_color); + @include tile_button($bg:$system_base_color); // override the %tile style border-radius: $base_border_radius*3; @@ -38,7 +38,7 @@ $app_folder_size: 720px; // app folders .app-folder { - @include tile_button($system_fg_color, $flat: false); + @include tile_button($bg:$system_base_color, $raised: true); } // Running app indicator (also shown in dash) @@ -47,10 +47,11 @@ $app_folder_size: 720px; width: 5px; border-radius:5px; background-color: $system_fg_color; - margin-bottom: 2px; @if $contrast == 'high' { margin-bottom: 4px; + } @else { + margin-bottom: 2px; } } @@ -66,12 +67,14 @@ $app_folder_size: 720px; border-radius: $modal_radius * 4; background-color: $system_overlay_bg_color; - box-shadow: inset 0 0 0 1px $system_borders_color; - padding: 0 1px; + color: $system_fg_color; @if $contrast == 'high' { padding: 0 2px; box-shadow: inset 0 0 0 2px $hc_inset_color; + } @else { + padding: 0 1px; + box-shadow: inset 0 0 0 1px $system_borders_color; } & .folder-name-container { @@ -84,6 +87,7 @@ $app_folder_size: 720px; } & .folder-name-entry { + @extend %system_entry; width: 12em; } } @@ -91,10 +95,12 @@ $app_folder_size: 720px; & .page-indicators { margin-bottom: $base_padding * 4; } + + & .overview-tile { + @include tile_button($bg:$system_overlay_bg_color); + } } - - // Rename popup for app folders .rename-folder-popup { .rename-folder-popup-item { @@ -166,11 +172,7 @@ $page_indicator_size: 10px; > StIcon { color: $system_fg_color;} - @if $contrast == 'high' { - @include button(normal, $system_fg_color, transparentize($system_bg_color, 0.5)); - } - - &:insensitive { @include button(undecorated, $system_fg_color, transparentize($system_bg_color, 0.5));} - &:hover { @include button(hover, $system_fg_color, transparentize($system_bg_color, 0.5));} - &:active { @include button(active, $system_fg_color, transparentize($system_bg_color, 0.5));} + @include button(normal, $tc:$system_fg_color, $c:$system_base_color, $style: flat); + &:hover { @include button(hover, $tc:$system_fg_color, $c:$system_base_color, $style: flat);} + &:active { @include button(active, $tc:$system_fg_color, $c:$system_base_color, $style: flat);} } diff --git a/data/theme/gnome-shell-sass/widgets/_buttons.scss b/data/theme/gnome-shell-sass/widgets/_buttons.scss index 18db60c91..60fa4d8db 100644 --- a/data/theme/gnome-shell-sass/widgets/_buttons.scss +++ b/data/theme/gnome-shell-sass/widgets/_buttons.scss @@ -4,6 +4,15 @@ @extend %button; // uses scalable value since it's a text element min-height: to_em(22px); + + // default style + &.default { + @extend %default_button; + } + // flat style + &.flat { + @extend %flat_button; + } } .icon-button { @@ -17,4 +26,14 @@ icon-size: $scalable_icon_size; -st-icon-style: symbolic; } + + // default style + &.default { + @extend %default_button; + } + + // flat style + &.flat { + @extend %flat_button; + } } diff --git a/data/theme/gnome-shell-sass/widgets/_calendar.scss b/data/theme/gnome-shell-sass/widgets/_calendar.scss index 91e9504a2..248961dfd 100644 --- a/data/theme/gnome-shell-sass/widgets/_calendar.scss +++ b/data/theme/gnome-shell-sass/widgets/_calendar.scss @@ -15,7 +15,7 @@ /* today button (the date) */ .datemenu-today-button { - @include card($flat: true); + @extend %card_flat; padding: $base_padding * 1.5; // weekday label @@ -31,7 +31,7 @@ /* Calendar */ .calendar { - @include card($flat: true); + @extend %card_flat; margin-top: 0; padding: 0; @@ -47,7 +47,7 @@ // month label .calendar-month-label { @extend %heading; - @extend .button, .flat; + @extend %flat_button; color: $fg_color !important; padding: 8px 0; width: 10em; @@ -67,7 +67,7 @@ .calendar-day { @extend %numeric; @extend %smaller; - @extend .button, .flat; + @extend %flat_button; border-radius: $forced_circular_radius; height: 3em; width: 3em; @@ -92,7 +92,7 @@ } &.calendar-today { - @extend .default; + @extend %default_button; border: none; &.calendar-day-with-events { background-image: url("resource:///org/gnome/shell/theme/calendar-today.svg") !important; // always use light asset with .default style @@ -109,7 +109,7 @@ .calendar-day-heading { @extend %numeric; @extend %smaller; - @extend .button, .flat; + @extend %flat_button; font-weight: bold; text-align: center; margin: $base_margin; @@ -128,17 +128,16 @@ border-radius: $base_border_radius * 0.5; background-color: transparentize($insensitive_fg_color, .8); color: $insensitive_fg_color; - border: 1px solid transparent; @if $contrast == 'high' { - border-color: $hc_inset_color; + @include draw_hc_inset(); } } } /* Events */ .events-button { - @include card; + @extend %card; .events-box { spacing: $base_padding; @@ -163,7 +162,7 @@ /* World clocks */ .world-clocks-button { - @include card; + @extend %card; .world-clocks-grid { spacing-rows: $base_padding; @@ -201,7 +200,7 @@ /* Weather */ .weather-button { - @include card; + @extend %card; .weather-box { spacing: $base_padding + $base_margin; diff --git a/data/theme/gnome-shell-sass/widgets/_dash.scss b/data/theme/gnome-shell-sass/widgets/_dash.scss index 6357c5bdf..255f3abef 100644 --- a/data/theme/gnome-shell-sass/widgets/_dash.scss +++ b/data/theme/gnome-shell-sass/widgets/_dash.scss @@ -16,11 +16,13 @@ $dash_border_radius: $modal_radius + $dash_padding; .dash-background { background-color: $dash_background_color; border-radius: $dash_border_radius; - border: 2px solid transparent; - padding: $dash_padding * 2 $dash_padding; // padding is uneven + padding-top: $dash_padding * 2; + padding-bottom: $dash_padding * 2; + padding-left: $dash_padding + 2px; // padding is uneven and needs hardcoded values + padding-right: $dash_padding + 2px; @if $contrast == 'high' { - border-color: $hc_inset_color; + @include draw_hc_inset($width: 2px); } } @@ -39,17 +41,9 @@ $dash_border_radius: $modal_radius + $dash_padding; height: $dash_placeholder_size; } - // app icons + .show-apps, .overview-tile { - // inherits styles from _app-grid.css - } - - // button to show app grid - .show-apps { - @include tile_button($system_fg_color); - } - - .show-apps, .overview-tile { + @include tile_button($bg:$dash_background_color); margin: $base_margin * 0.5; padding: $base_padding; border-radius: $base_border_radius * 2;} diff --git a/data/theme/gnome-shell-sass/widgets/_keyboard.scss b/data/theme/gnome-shell-sass/widgets/_keyboard.scss index 99d86337a..39e63949f 100644 --- a/data/theme/gnome-shell-sass/widgets/_keyboard.scss +++ b/data/theme/gnome-shell-sass/widgets/_keyboard.scss @@ -40,12 +40,12 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken( border-radius: $key_border_radius; box-shadow: 0 1px 0 0 $shadow_color; - @include keyboard_key(normal, $key_bg_color, $osd_fg_color); + @include button(normal, $c:$key_bg_color, $tc:$osd_fg_color); - &:focus { @include keyboard_key(focus);} - &:hover { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);} - &:active { @include keyboard_key(active, $key_bg_color, $osd_fg_color); } - &:checked { @include keyboard_key(checked, $key_bg_color, $osd_fg_color); } + &:focus { @include button(focus);} + &:hover { @include button(hover, $c:$key_bg_color, $tc:$osd_fg_color);} + &:active { @include button(active, $c:$key_bg_color, $tc:$osd_fg_color); } + &:checked { @include button(checked, $c:$key_bg_color, $tc:$osd_fg_color); } &:grayed { //FIXMEy background-color: darken($bg_color, 3%); @@ -55,10 +55,10 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken( // non-character keys &.default-key { - @include keyboard_key(normal, $default_key_bg_color, $osd_fg_color); - &:hover {@include keyboard_key(hover, $default_key_bg_color, $osd_fg_color);} - &:active { @include keyboard_key(active, $default_key_bg_color, $osd_fg_color);} - &:checked { @include keyboard_key(checked, $default_key_bg_color, $osd_fg_color);} + @include button(normal, $c:$default_key_bg_color, $tc:$osd_fg_color); + &:hover { @include button(hover, $c:$default_key_bg_color, $tc:$osd_fg_color);} + &:active { @include button(active, $c:$default_key_bg_color, $tc:$osd_fg_color);} + &:checked { @include button(checked, $c:$default_key_bg_color, $tc:$osd_fg_color);} border-radius: $key_border_radius; // keys that may be latched: ctrl/alt/shift @@ -70,10 +70,10 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken( // enter key is suggested-action &.enter-key { - @include keyboard_key(normal, $selected_bg_color, $selected_fg_color); - &:hover { @include keyboard_key(hover, $selected_bg_color, $selected_fg_color);} - &:active {@include keyboard_key(active, $selected_bg_color, $selected_fg_color);} - &:checked {@include keyboard_key(checked, $selected_bg_color, $selected_fg_color);} + @include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color); + &:hover { @include button(hover, $c:$selected_bg_color, $tc:$selected_fg_color);} + &:active { @include button(active, $c:$selected_bg_color, $tc:$selected_fg_color);} + &:checked { @include button(checked, $c:$selected_bg_color, $tc:$selected_fg_color);} border-radius: $key_border_radius; color: $osd_fg_color; } @@ -106,12 +106,12 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken( padding: $base_padding; .keyboard-key { - @include keyboard_key(normal, $key_bg_color, $osd_fg_color); + @include button(normal, $c:$key_bg_color, $tc:$osd_fg_color); - &:focus { @include keyboard_key(focus);} - &:hover { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);} - &:active { @include keyboard_key(active, $key_bg_color, $osd_fg_color); } - &:checked { @include keyboard_key(checked, $key_bg_color, $osd_fg_color); } + &:focus { @include button(focus);} + &:hover { @include button(hover, $c:$key_bg_color, $tc:$osd_fg_color);} + &:active { @include button(active, $c:$key_bg_color, $tc:$osd_fg_color); } + &:checked { @include button(checked, $c:$key_bg_color, $tc:$osd_fg_color); } border-radius:$key_border_radius; } @@ -148,11 +148,11 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken( border-radius: 4px; padding: 0px $base_padding * 3; - @include keyboard_key(undecorated, $key_bg_color, $osd_fg_color); + @include button(undecorated, $c:$key_bg_color, $tc:$osd_fg_color); - &:focus { @include keyboard_key(focus);} - &:hover { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);} - &:active { @include keyboard_key(active, $key_bg_color, $osd_fg_color); } - &:checked { @include keyboard_key(checked, $key_bg_color, $osd_fg_color); } + &:focus { @include button(focus);} + &:hover { @include button(hover, $c:$key_bg_color, $tc:$osd_fg_color);} + &:active { @include button(active, $c:$key_bg_color, $tc:$osd_fg_color); } + &:checked { @include button(checked, $c:$key_bg_color, $tc:$osd_fg_color); } } } diff --git a/data/theme/gnome-shell-sass/widgets/_login-lock.scss b/data/theme/gnome-shell-sass/widgets/_login-lock.scss index 36ae39309..899ca6c3c 100644 --- a/data/theme/gnome-shell-sass/widgets/_login-lock.scss +++ b/data/theme/gnome-shell-sass/widgets/_login-lock.scss @@ -157,7 +157,7 @@ $_gdm_dialog_width: 23em; // %system_entry style override to have neutral focus color with wallpaper background .login-dialog-prompt-entry { - &:focus { @include entry(focus, $c:$system_fg_color, $fc:transparentize($system_fg_color, 0.5));} + &:focus { @include entry(focus, $c:$system_fg_color);} } } diff --git a/data/theme/gnome-shell-sass/widgets/_looking-glass.scss b/data/theme/gnome-shell-sass/widgets/_looking-glass.scss index 66d23849a..7b8d90475 100644 --- a/data/theme/gnome-shell-sass/widgets/_looking-glass.scss +++ b/data/theme/gnome-shell-sass/widgets/_looking-glass.scss @@ -97,7 +97,7 @@ } .lg-extension { - @include card; + @extend %card; } .lg-extension-name { diff --git a/data/theme/gnome-shell-sass/widgets/_message-list.scss b/data/theme/gnome-shell-sass/widgets/_message-list.scss index 86401912e..dbc813d49 100644 --- a/data/theme/gnome-shell-sass/widgets/_message-list.scss +++ b/data/theme/gnome-shell-sass/widgets/_message-list.scss @@ -62,7 +62,7 @@ // message bubbles .message { - @include card; + @extend %card; padding: 0 !important; // icon container diff --git a/data/theme/gnome-shell-sass/widgets/_misc.scss b/data/theme/gnome-shell-sass/widgets/_misc.scss index 15ed9cf9f..545924dbc 100644 --- a/data/theme/gnome-shell-sass/widgets/_misc.scss +++ b/data/theme/gnome-shell-sass/widgets/_misc.scss @@ -22,7 +22,7 @@ box-shadow:inset 0 0 0 1px transparentize($osd_fg_color, 0.9); @if $contrast == 'high' { - box-shadow:inset 0 0 0 1px $hc_inset_color; + @include draw_hc_inset(); } } } diff --git a/data/theme/gnome-shell-sass/widgets/_notifications.scss b/data/theme/gnome-shell-sass/widgets/_notifications.scss index d72fee665..9b358cfaa 100644 --- a/data/theme/gnome-shell-sass/widgets/_notifications.scss +++ b/data/theme/gnome-shell-sass/widgets/_notifications.scss @@ -12,7 +12,7 @@ $notification_banner_width: 34em; margin: $base_margin; @if $contrast == 'high' { - border: 1px solid $hc_inset_color; + @include draw_hc_inset(); } .notification-actions { diff --git a/data/theme/gnome-shell-sass/widgets/_panel.scss b/data/theme/gnome-shell-sass/widgets/_panel.scss index 8cbabdb40..d854ed01d 100644 --- a/data/theme/gnome-shell-sass/widgets/_panel.scss +++ b/data/theme/gnome-shell-sass/widgets/_panel.scss @@ -72,11 +72,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration } &.screen-recording-indicator { - @include panel_button($screenshot_ui_button_red, $fg:$_base_color_light, $flat: false); + @include panel_button($screenshot_ui_button_red, $fg:$_base_color_light, $style: null); } &.screen-sharing-indicator { - @include panel_button($privacy_indicator_color, $fg:$_base_color_light, $flat: false); + @include panel_button($privacy_indicator_color, $fg:$_base_color_light, $style: null); } // clock @@ -106,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:$_base_color_light, $flat: false); + @include panel_button($screenshot_ui_button_red, $fg:$_base_color_light, $style: null); } &.screen-sharing-indicator { - @include panel_button($privacy_indicator_color, $fg:$_base_color_light, $flat: false); + @include panel_button($privacy_indicator_color, $fg:$_base_color_light, $style: null); } } } diff --git a/data/theme/gnome-shell-sass/widgets/_popovers.scss b/data/theme/gnome-shell-sass/widgets/_popovers.scss index 818e05fe9..7f3df1ac8 100644 --- a/data/theme/gnome-shell-sass/widgets/_popovers.scss +++ b/data/theme/gnome-shell-sass/widgets/_popovers.scss @@ -83,7 +83,7 @@ $submenu_bg_color: lighten($menu_bg_color, 7%); // submenu specific styles .popup-menu-item { border-radius: 0; - @include menuitem($bg:$submenu_bg_color, $flat:false); + @include menuitem($bg:$submenu_bg_color); border-top-width:0; &:last-child { diff --git a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss index 5b8f812f0..3fa0cdabe 100644 --- a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss +++ b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss @@ -21,7 +21,8 @@ } .quick-toggle { - &:checked { @include button(default, $c:$selected_bg_color); } + background-color: none; + &:checked { @extend %default_button;} & > StBoxLayout { spacing: $base_padding * 1.5; } @@ -62,7 +63,7 @@ border-color: transparentize($fg_color, .75); &:checked { - @include button(default, $c:$selected_bg_color); + @extend %default_button; border-color: $selected_borders_color; } @@ -90,7 +91,7 @@ } .quick-toggle-menu { - @include card; + @extend %card; &:insensitive { // override insensitive style on submenu @@ -170,7 +171,7 @@ .keyboard-brightness-level { spacing: $base_padding; - .button:checked { @include button(default, $c:$selected_bg_color); } + .button:checked { @extend %default_button; } } // background apps diff --git a/data/theme/gnome-shell-sass/widgets/_screenshot.scss b/data/theme/gnome-shell-sass/widgets/_screenshot.scss index d1fb6e5a0..05ecd95c3 100644 --- a/data/theme/gnome-shell-sass/widgets/_screenshot.scss +++ b/data/theme/gnome-shell-sass/widgets/_screenshot.scss @@ -87,7 +87,7 @@ $screenshot_ui_button_red: $red_4; spacing: $base_padding * 0.5; @if $contrast == 'high' { - box-shadow: inset 0 0 0 1px $hc_inset_color; + @include draw_hc_inset(); } } @@ -98,7 +98,7 @@ $screenshot_ui_button_red: $red_4; border-radius: $forced_circular_radius; @if $contrast == 'high' { - box-shadow: inset 0 0 0 1px $hc_inset_color; + @include draw_hc_inset(); } > StIcon { icon-size: $base_icon_size;} diff --git a/data/theme/gnome-shell-sass/widgets/_search-results.scss b/data/theme/gnome-shell-sass/widgets/_search-results.scss index 0b2dcfc02..6f64f7d06 100644 --- a/data/theme/gnome-shell-sass/widgets/_search-results.scss +++ b/data/theme/gnome-shell-sass/widgets/_search-results.scss @@ -36,7 +36,7 @@ } %search_section_content_item { - @include tile_button($system_fg_color); + @include tile_button($bg:$system_overlay_bg_color); border-radius: $base_border_radius * 1.65; } diff --git a/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss b/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss index 9b8305fda..262347237 100644 --- a/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss +++ b/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss @@ -24,7 +24,7 @@ $switcher_radius: $modal_radius + $switcher_padding; // each item in the list .item-box { - @include tile_button($osd_fg_color); + @include tile_button($fg:$osd_fg_color, $bg:$osd_bg_color); // override %tile style so mouse doesn't steal focus &:hover {background: none;} }