From 0d88cff006a90cb4b22245adc3f6621c1563c303 Mon Sep 17 00:00:00 2001 From: Kevin MacMartin Date: Mon, 25 Mar 2024 13:34:36 -0400 Subject: [PATCH] Update the theme against gnome 46.0 --- gnome-shell-dark-laptop.scss | 1 + gnome-shell-dark.scss | 1 + gnome-shell-sass/_colors.scss | 77 +- gnome-shell-sass/_common.scss | 265 +- gnome-shell-sass/_default-colors.scss | 54 + gnome-shell-sass/_drawing.scss | 658 ++-- gnome-shell-sass/_high-contrast-colors.scss | 105 +- gnome-shell-sass/_widgets.scss | 1 - gnome-shell-sass/widgets/_app-grid.scss | 163 +- gnome-shell-sass/widgets/_base.scss | 13 +- gnome-shell-sass/widgets/_buttons.scss | 34 +- gnome-shell-sass/widgets/_calendar.scss | 324 +- gnome-shell-sass/widgets/_dash.scss | 141 +- gnome-shell-sass/widgets/_dialogs.scss | 40 +- gnome-shell-sass/widgets/_entries.scss | 10 +- gnome-shell-sass/widgets/_hotplug.scss | 10 - gnome-shell-sass/widgets/_ibus-popup.scss | 6 +- gnome-shell-sass/widgets/_keyboard.scss | 67 +- gnome-shell-sass/widgets/_login-lock.scss | 300 +- gnome-shell-sass/widgets/_looking-glass.scss | 19 +- gnome-shell-sass/widgets/_message-list.scss | 200 +- gnome-shell-sass/widgets/_misc.scss | 16 +- gnome-shell-sass/widgets/_notifications.scss | 47 +- gnome-shell-sass/widgets/_osd.scss | 32 +- gnome-shell-sass/widgets/_overview.scss | 2 +- gnome-shell-sass/widgets/_panel.scss | 109 +- gnome-shell-sass/widgets/_popovers.scss | 25 +- gnome-shell-sass/widgets/_quick-settings.scss | 113 +- gnome-shell-sass/widgets/_screenshot.scss | 88 +- gnome-shell-sass/widgets/_search-entry.scss | 8 +- gnome-shell-sass/widgets/_search-results.scss | 36 +- gnome-shell-sass/widgets/_slider.scss | 9 +- gnome-shell-sass/widgets/_switcher-popup.scss | 22 +- gnome-shell-sass/widgets/_switches.scss | 6 +- gnome-shell-sass/widgets/_window-picker.scss | 28 +- .../widgets/_workspace-switcher.scss | 2 +- .../widgets/_workspace-thumbnails.scss | 4 +- meson.build | 1 - patches/gnome-45.0-dark-theme.patch | 265 ++ patches/gnome-46.0-dark-theme.patch | 250 ++ process-working-dark.svg | 1 + process-working-light.svg | 1 + process-working.svg | 3084 ----------------- toggle-off-hc.svg | 1 - toggle-off-light.svg | 2 +- toggle-off.svg | 2 +- toggle-on-hc.svg | 1 - toggle-on-light.svg | 2 +- toggle-on.svg | 2 +- 49 files changed, 2222 insertions(+), 4426 deletions(-) create mode 100644 gnome-shell-sass/_default-colors.scss delete mode 100644 gnome-shell-sass/widgets/_hotplug.scss create mode 100644 patches/gnome-45.0-dark-theme.patch create mode 100644 patches/gnome-46.0-dark-theme.patch create mode 100644 process-working-dark.svg create mode 100644 process-working-light.svg delete mode 100644 process-working.svg delete mode 100644 toggle-off-hc.svg delete mode 100644 toggle-on-hc.svg diff --git a/gnome-shell-dark-laptop.scss b/gnome-shell-dark-laptop.scss index e603503..61925f9 100644 --- a/gnome-shell-dark-laptop.scss +++ b/gnome-shell-dark-laptop.scss @@ -1,4 +1,5 @@ $variant: 'dark'; +$contrast: 'normal'; $laptop: true; @import "gnome-shell-sass/_colors"; //use gtk colors diff --git a/gnome-shell-dark.scss b/gnome-shell-dark.scss index 4bf68e2..294ac64 100644 --- a/gnome-shell-dark.scss +++ b/gnome-shell-dark.scss @@ -1,4 +1,5 @@ $variant: 'dark'; +$contrast: 'normal'; $laptop: false; @import "gnome-shell-sass/_colors"; //use gtk colors diff --git a/gnome-shell-sass/_colors.scss b/gnome-shell-sass/_colors.scss index ebb9a01..9a5450a 100644 --- a/gnome-shell-sass/_colors.scss +++ b/gnome-shell-sass/_colors.scss @@ -1,61 +1,53 @@ -// 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; -// base color for light theme -$_dark_base_color: desaturate($dark_4, 100%); +// 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, white); +// OSD elements +$osd_fg_color: $light_1; +$osd_bg_color: lighten($_base_color_dark, 5%); -$selected_fg_color: $light_1; -$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)); +// panel colors +$panel_bg_color: if($variant == 'light', $_base_color_light, $dark_4); +$panel_fg_color: if($variant == 'light', $_base_color_dark, $light_1); + +// 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); + +// +// 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%)); -$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_1; -$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 colors $osd_borders_color: transparentize($osd_fg_color, 0.9); $osd_outer_borders_color: transparentize($osd_fg_color, 0.98); -$shadow_color: if($variant == 'light', rgba(0,0,0,.05), rgba(0,0,0,0.2)); - -// buttons -$button_mix_factor: if($variant == 'light', 12%, 9%); - -// 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; - -// 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%); @@ -72,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%)); diff --git a/gnome-shell-sass/_common.scss b/gnome-shell-sass/_common.scss index 5b117ea..adb8b70 100644 --- a/gnome-shell-sass/_common.scss +++ b/gnome-shell-sass/_common.scss @@ -25,29 +25,41 @@ $cakeisalie: "This stylesheet is generated, DO NOT EDIT"; /* Global Values */ -// padding, margin and spacing -$base_padding: 6px; -$base_margin: 4px; +// 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 +$base_margin: 4px; // margin between elements +$base_border_radius: 8px; // radii on all elements -// border radii -$base_border_radius: 8px; +// Radius used to make sure elements that have rounded corners stay as such. +// This is a workaround for 50% not working. +$forced_circular_radius: 999px; // radii of things that display over other things, e.g. popovers -$modal_radius: $base_border_radius*2; // 24px +$modal_radius: $base_border_radius * 2; // Chroma key to flag when a background-color is always occluded, not visible. // This allows any box-shadow behind it to be rendered more efficiently by // omitting the middle rectangle. $invisible_occluded_bg_color: rgba(3,2,1,0); -// fonts -$base_font_size: 11; -$text_shadow_color: if($variant == 'light', rgba(255,255,255,0.3), rgba(0,0,0,0.2)); +// Fixed icon sizes +$base_icon_size: 16px; +$medium_icon_size: $base_icon_size * 1.5; // 24px +$large_icon_size: $base_icon_size * 2; // 32px -// icons -$base_icon_size: 1.09em; -$large_icon_size: $base_icon_size*2; // 32px -// $base_icon_size: 16px; +// Scaled values +// Used in elements that follow text scaling factors +$scaled_padding: to_em(6px); // same as $base_padding + +// Used for symbolic icons that scale +$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 { @@ -56,29 +68,31 @@ stage { } /* Common Stylings */ +%reset { + background: none; + box-shadow: none; + border: none; + border-radius: 0; + padding: 0; + margin: 0; +} // icon tiles %tile { - border-radius: $base_border_radius * 2; // 16px + border-radius: $base_border_radius * 2; padding: $base_padding; spacing: $base_padding; - border: 2px solid transparent; - transition-duration: 200ms; text-align: center; - color: inherit; - - @if $is_highcontrast { - border-color: $hc_inset_color; - } + transition-duration: 100ms; } -// normal button styling +// common button styling %button_common { border-radius: $base_border_radius; - border-style: solid; - border-width: 1px; + padding: $base_padding * .5 $base_padding * 4; font-weight: bold; - padding: $base_padding*.5 $base_padding*4; + transition: border-width 300ms $ease_out_quad, + box-shadow 300ms $ease_out_quad; } %button { @@ -90,35 +104,84 @@ 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_common { + border-radius: $base_border_radius * 1.5; + padding: $scaled_padding * 2; + margin: $base_margin; + background-color: $card_bg_color; + 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; + border: 1px solid transparent !important; // override of the button style needed here + @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);} +} + // normal entry style %entry_common { border-radius: $base_border_radius; - padding: $base_padding*1.5 $base_padding*1.5; + padding: $base_padding * 1.5 $base_padding * 1.5; selection-background-color: $selected_bg_color; selected-color: $selected_fg_color; } %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); @@ -134,33 +197,36 @@ stage { &:ltr {margin-right: 1px;} &:rtl {margin-left: 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);} + // needs a 1px adjustment to fit exactly into the outer radius + $bubble_button_radius: $modal_radius - 1px; + + @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; } @@ -172,11 +238,11 @@ stage { border: 1px solid transparentize($light_1, 0.9); color: $light_1; - border-radius: 99px; + border-radius: $forced_circular_radius; padding: $base_padding $base_padding * 2; text-align: center; - @if $is_highcontrast { + @if $contrast == 'high' { background-color: black; border-color: $hc_inset_color; } @@ -185,47 +251,47 @@ stage { /* General Typography */ %large_title { font-weight: 300; - @include fontsize(24); + @include fontsize(24pt); } %title_1 { font-weight: 800; - @include fontsize(20); + @include fontsize(20pt); } %title_2 { font-weight: 800; - @include fontsize(15); + @include fontsize(15pt); } %title_3 { font-weight: 700; - @include fontsize(15); + @include fontsize(15pt); } %title_4 { font-weight: 700; - @include fontsize(13); + @include fontsize(13pt); } %heading { font-weight: 700; - @include fontsize(11); + @include fontsize(11pt); } %caption_heading { font-weight: 700; - @include fontsize(9); + @include fontsize(9pt); } %caption { font-weight: 400; - @include fontsize(9); + @include fontsize(9pt); } %smaller { font-weight: 400; - @include fontsize(8); + @include fontsize(8pt); } %monospace {font-family: monospace;} @@ -237,21 +303,20 @@ stage { color: $osd_fg_color; background-color: $osd_bg_color; border: 1px solid $osd_outer_borders_color; - border-radius: 999px; - padding: $base_padding*2; - - @if $is_highcontrast { - border: 2px solid $hc_inset_color; + border-radius: $forced_circular_radius; + padding: $base_padding * 2; + @if $contrast == 'high' { + @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); } } @@ -259,18 +324,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, $always_dark: true); + &:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color, $always_dark: true);} + &:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color, $always_dark: true);} + &:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color, $always_dark: true);} + &:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color, $always_dark: true);} + &:insensitive { @include button(insensitive, $tc:$osd_fg_color, $c:$osd_bg_color, $always_dark: true);} } %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, $always_dark: true); + &:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat, $always_dark: true);} + &:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat, $always_dark: true);} + &:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat, $always_dark: true);} + &:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat, $always_dark: true);} + &:insensitive { @include button(insensitive, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat, $always_dark: true);} } /* System Elements */ @@ -278,15 +347,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); @@ -294,5 +362,30 @@ 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);} } + +/* Lockscreen Elements */ + +// buttons +%lockscreen_button { + @extend %button_common; + @include button(normal, $tc:$system_fg_color, $style: lockscreen); + &:focus { @include button(focus, $tc:$system_fg_color, $style: lockscreen);} + &:hover { @include button(hover, $tc:$system_fg_color, $style: lockscreen);} + &:active { @include button(active, $tc:$system_fg_color, $style: lockscreen);} + &:checked { @include button(checked, $tc:$system_fg_color, $style: lockscreen);} + &:insensitive { @include button(insensitive, $tc:$system_fg_color, $style: lockscreen);} +} + +// entries +%lockscreen_entry { + @extend %entry_common; + @include entry(normal, $c:$system_fg_color, $style: lockscreen, $always_dark: true); + &:hover { @include entry(hover, $c:$system_fg_color, $style: lockscreen, $always_dark: true);} + &:focus { @include entry(focus, $c:$system_fg_color, $style: lockscreen, $always_dark: true);} + &:insensitive { @include entry(insensitive, $c:$system_fg_color, $style: lockscreen, $always_dark: true);} + + StLabel.hint-text { color: transparentize($system_fg_color, 0.3);} +} + diff --git a/gnome-shell-sass/_default-colors.scss b/gnome-shell-sass/_default-colors.scss new file mode 100644 index 0000000..6c70087 --- /dev/null +++ b/gnome-shell-sass/_default-colors.scss @@ -0,0 +1,54 @@ +// 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: $warning_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_4, $blue_3); +$selected_fg_color: $light_1; + +// link colors +$link_color: if($variant == 'light', $blue_4, $blue_2); +$link_visited_color: transparentize($link_color, .6); + +// special cased widget definitions +$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; + // remove shadows + $shadow_color: transparent; + $text_shadow_color: transparent; + // less transparent focus color + $focus_border_color: transparentize($focus_color, 0.2); +} diff --git a/gnome-shell-sass/_drawing.scss b/gnome-shell-sass/_drawing.scss index d9d6db9..dd6f8a8 100644 --- a/gnome-shell-sass/_drawing.scss +++ b/gnome-shell-sass/_drawing.scss @@ -1,355 +1,378 @@ +// +// Drawing functions +// + +// Function to convert px values to em +@function to_em($input, $base: 16px) { + // multiplied and divided by 1000 to make up for round() shortcoming + $em_value: ($input / $base) * 1.091 * 1000; + @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); +} + +// 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 +// -// generic drawing of more complex things +// Draw the inset for High Contrast elements +@mixin draw_hc_inset($width: 1px, $ic: $hc_inset_color, $border: false, $no_inset: false) { + // + // $width width of the inset, in pixels + // $ic color of the inset + // + // $border if true, use a border instead of a box-shadow to draw inset + // $no_inset if true, override the mixin to not draw an iset + // -@function draw_widget_edge($c:$outer_borders_color) { -// outer highlight "used" on most widgets - @return 0 1px $c; + box-shadow: inset 0 0 0 $width $ic; + + // draw inset as border + @if $border { + border: $width solid $ic; + box-shadow: none; + } + + // don't draw an inset at all + @if $no_inset { + box-shadow: none; + border: none; + } } -// provide font size in rem, with px fallback -@mixin fontsize($size: 24, $base: 16) { - font-size: round($size) + pt; - //font-size: ($size / $base) * 1rem; +// 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 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; } +// 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 + $adjusted_size: if($unit == pt, $size * 1.091, $size) * 1000; + $rounded_size: round($adjusted_size / $base) / 1000; + font-size: $rounded_size * 1em; + // font-size: round($size) + pt; } +// Function to fill the background of a panel button +@mixin panel_button_fill($bg) { + // use a box-shadow to fill the background + // this is done because panel buttons use a transparent border to fake padding + box-shadow: inset 0 0 0 100px $bg; +} -// 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, $style: null, $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); - color: transparentize($c,0.3); + // entry colors + $entry_fg_color: $c; + $entry_bg_color: mix($c, $bc, $background_mix_factor); + $entry_focus_color: $focus_color; - @if $is_highcontrast { - box-shadow: inset 0 0 0 1px $hc_inset_color; + // entry color overrides for lockscreen style + @if $style == 'lockscreen' { + $entry_bg_color: transparentize($c, .9); + $entry_focus_color: transparentize($entry_fg_color, 0.6); + @if $contrast == 'high' { + $entry_focus_color: transparentize($entry_fg_color, 0.3); } } - @if $t==focus { - background-color: mix(transparentize($c, 0.75), $fc, 95%); - box-shadow: inset 0 0 0 2px transparentize($fc, 0.3); - color: $c; - &:hover {} + // 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 $t==hover { - background-color: transparentize($c, 0.75); + @if $contrast == 'high' { + @include draw_hc_inset(); } - @if $t==insensitive { - background-color:transparentize($c, 0.75); - 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, insensitive, insensitive-active, -// backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active, -// osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated -// - - // normal key - @if $t==normal { - color: $tc; - background-color: lighten($c, 3%); + // normal + @if $type == 'normal' { + background-color: $entry_bg_color; + color: transparentize($c, 0.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); + // focus styles + @if $type == 'focus' { + @include focus_ring(); + background-color: focus_bg_color($entry_bg_color); + color: $entry_fg_color; + + // lockscreen style + @if $style == 'lockscreen' { + @include focus_ring($fc:$entry_focus_color); + background-color: focus_bg_color($entry_bg_color, $fc:$entry_focus_color); } } - // hover key - @else if $t==hover { - color: $tc; - background-color: lighten($c, 7%); + // hover styles + @if $type == 'hover' { + background-color: $hover_entry_bg_color; + color: $entry_fg_color; } - // 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; + // insensitive styles + @if $type == 'insensitive' { + background-color: $insensitive_entry_bg_color; + color: transparentize($entry_fg_color, 0.5); } } -// + // Button drawing function -// -// $t: button type, -// $c: base button colors, derived from fg_color -// $tc: base button colors, derived from fg_color -// -// possible $t values: -// normal, hover, active, insensitive, insensitive-active, -// backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active, -// osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated -// -// since buttons are all flat an borderless now the mixin is simpler +@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) { + // mix input colors to get button background color + $button_bg_color: mix($tc, $c, $background_mix_factor); - $button_bg_color: mix($tc, $c, $button_mix_factor); - transition-duration: 100ms; + // background color override for card elements + @if $style == 'card' { $button_bg_color: $card_bg_color;} + // 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 $osd { - $button_bg_color: transparentize($tc, 0.9); + // 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 base 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)); + + // button extended state background colors + $active_hover_button_bg_color: if($variant == 'light', darken($active_button_bg_color, $hover_factor), lighten($active_button_bg_color, $hover_factor)); + $checked_hover_button_bg_color: if($variant == 'light', darken($checked_button_bg_color, $hover_factor), lighten($checked_button_bg_color, $hover_factor)); + $checked_active_button_bg_color: if($variant == 'light', darken($checked_button_bg_color, $active_factor), lighten($checked_button_bg_color, $active_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); + // extended + $active_hover_button_bg_color: lighten($active_button_bg_color, $hover_factor); + $checked_hover_button_bg_color: lighten($checked_button_bg_color, $hover_factor); + $checked_active_button_bg_color: lighten($checked_button_bg_color, $active_factor); + } + + // background color override for buttons that use transparency + // styles: notification bubbles, lockscreen + @if $style == 'bubble' or $style == 'lockscreen' { + $button_bg_color: transparentize($tc, .9); + $hover_button_bg_color: transparentize($tc, .87); + $active_button_bg_color: transparentize($tc, .84); + $active_hover_button_bg_color: transparentize($tc, .81); + } + + // 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($no_inset: true); + } + } + + // normal style + @if $type == 'normal' { color: $tc; background-color: $button_bg_color; - @if $flat { - background-color: transparent; - } - @if $is_highcontrast { - box-shadow: inset 0 0 0 1px $hc_inset_color; - } - } - // focused button - @if $t==focus { - color: $tc; - background-color: mix($button_bg_color, $selected_bg_color, 90%); - box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4) !important; - &:hover { - background-color: mix(lighten($button_bg_color, 3%), $selected_bg_color, 90%); - box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3) !important; - } - &:active { - background-color: mix(lighten($button_bg_color, 6%), $selected_bg_color, 90%); - box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3) !important; + // no inset in High Contrast when the style is flat + @if $style == 'flat' and $contrast == 'high' { + @include draw_hc_inset($no_inset: true); } } // hover button - @else if $t==hover { + @else if $type == 'hover' { color: $tc; - background-color: if($variant == 'light', darken($button_bg_color, 3%), lighten($button_bg_color, 3%)); - - @if $is_highcontrast == "true" { - box-shadow: inset 0 0 0 1px lighten($button_inset_color, 3%); - background-color: mix(lighten($button_bg_color, 3%), $button_inset_color, 10%); - } + background-color: $hover_button_bg_color; } // active button - @else if $t==active { + @else if $type == 'active' { color: $tc; - background-color: if($variant == 'light', darken($button_bg_color, 6%), lighten($button_bg_color, 6%)); - @if $is_highcontrast == "true" { - box-shadow: inset 0 0 0 1px lighten($button_inset_color, 6%); - background-color: mix(lighten($button_bg_color, 6%), $button_inset_color, 10%); + background-color: $active_button_bg_color; + &:hover { background-color: $active_hover_button_bg_color;} + &:focus { + // otherwise use focus bg color mixin + $bg: focus_bg_color($active_button_bg_color); + background-color: $bg; } } // checked button - @else if $t==checked { + @else if $type == 'checked' { color: $tc; - background-color: if($variant == 'light', darken($button_bg_color, 9%), lighten($button_bg_color, 9%)); - @if $is_highcontrast == "true" { - box-shadow: inset 0 0 0 1px lighten($button_inset_color, 9%); - background-color: mix(lighten($button_bg_color, 9%), $button_inset_color, 10%); - } - &:hover { background-color: lighten($button_bg_color, 12%);} - &:active { background-color: lighten($button_bg_color, 15%);} + background-color: $checked_button_bg_color; + &:hover { background-color: $checked_hover_button_bg_color;} + &:active { background-color: $checked_active_button_bg_color;} } // insensitive button - @else if $t==insensitive { - color: if($variant == 'light', transparentize($tc, .6), transparentize($tc, .5)); - background-color: if($variant == 'light', transparentize($tc, .9), transparentize($tc, .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; - // default/suggested button - @else if $t==default { - background-color: $selected_bg_color; - color: $selected_fg_color; - - &:focus { - box-shadow: inset 0 0 0 2px transparentize($selected_fg_color, .4) !important; - } - &:hover, &:focus { - background-color: lighten($selected_bg_color, 5%); - color: lighten($selected_fg_color, 5%); - } - &: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); + // no outline in High Contrast for insensitive buttons + @if $contrast == 'high' { + @include draw_hc_inset($no_inset: true); } } - // reset - @else if $t==undecorated { + // focused button + @else if $type == 'focus' { + color: $tc; + @include focus_ring(); + + // use a different focus ring color for default style + @if $style == 'default' { + @include focus_ring($fc:$selected_borders_color); + } + // change background color if style is flat + @if $style == 'flat' { + $button_bg_color: transparentize($button_bg_color, 0.75); + } + + background-color: focus_bg_color($button_bg_color); + + &:hover { + background-color: focus_bg_color($hover_button_bg_color); + } + } + + // reset (unstyled button) + @else if $type == 'undecorated' { background-color: transparent; - background-color: none; + border-color: transparent; box-shadow: none; + &:insensitive { - @include button(insensitive); - background-color: transparent; + background-color: transparent !important; } } } -// tile -@mixin tile_button($color, $flat: true) { +// Helper mixin for button-like elements with an icon +@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; - @if $flat { - background-color: transparent; + + @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);} + &:highlighted,&: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); - @if $is_highcontrast { - box-shadow: inset 999px 0 0 0 transparentize($color, .2); // bit of a hack - } - } - &:hover { background-color: transparentize($color, .9);} - &:selected, &:focus { - background-color: transparentize($color, .87); - &:hover { background-color: transparentize($color, .84);} - &:active { background-color: transparentize($color, .87);} - } - &:active { background-color: transparentize($color, .84);} - &:outlined, &:checked { - background-color: transparentize($color, .81); - &:active { background-color: transparentize($color, .78);} - &:hover { background-color: transparentize($color, .75);} + @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);} + &:highlighted,&: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);} } + &:drop { - border: 2px solid transparentize($selected_bg_color, .2); //already 2px transparent so no jumping background-color: transparentize($selected_bg_color, .8); - } -} - -// overview icon, dash, app grid -@mixin overview_icon($color, $flat: true) { - transition-duration: 400ms; - .overview-icon { - @extend %tile; - } - @if $flat { - .overview-icon { background-color: transparent;} - } @else { - .overview-icon { background-color: transparentize($color, .93); } - } - &:hover .overview-icon { background-color: transparentize($color, .87);} - - &:selected .overview-icon, - &:focus .overview-icon { - background-color: transparentize($color, .87); - &:hover .overview-icon { background-color: transparentize($color, .84);} - &:active .overview-icon { background-color: transparentize($color, .87);} - } - &:active .overview-icon { background-color: transparentize($color, .84);} - &:outlined .overview-icon, - &:checked .overview-icon { - background-color: transparentize($color, .81); - &:active .overview-icon { background-color: transparentize($color, .78);} - &:hover .overview-icon { background-color: transparentize($color, .75);} - } - &:drop .overview-icon { - border: 2px solid transparentize($selected_bg_color, .2); //already 2px transparent so no jumping - background-color: transparentize($selected_bg_color, .8); - } -} - -// styling for elements within popovers that look like notifications -@mixin card($flat: false) { - border-radius: $base_border_radius*1.5; - margin: $base_margin; - - @if $flat { - @include button(undecorated); - box-shadow: none !important; - } @else { - @include button(normal); - } - &:hover {@include button(hover);} - &:active {@include button(active);} - &:focus {@include button(focus);} - &:insensitive { - @include button(insensitive); - @if $flat { - background-color: transparent; - } + 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); - box-shadow: none !important; } @else { @include button(normal, $c:$bg); } @@ -359,85 +382,84 @@ } &:active {@include button(active, $c:$bg);} &:checked {@include button(checked, $c:$bg);} + &:insensitive {@include button(insensitive, $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:"", $border_radius: 3px) { +@mixin panel_button($bg:$panel_fg_color, $fg:$panel_fg_color, $style: null, $highlighted_child: false, $child_class:"", $border_radius: 3px) { + // + // $bg: background color, derived from $panel_fg_color + // $fg: foreground color, also derived from $panel_fg_color + // $style: can be set to 'filled' if button uses a colored background + // + // $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 + // transition-duration: 150ms; border: 3px solid transparent; + background-color: transparent; border-radius: $border_radius; font-weight: bold; - background-color: transparent; color: $fg; - @if $flat { - box-shadow: none; + // background fill defines + $fill: transparent; + $hover_fill: transparentize($fg, .83); + $active_fill: transparentize($fg, .72); + $active_hover_fill: transparentize($fg, .68); - &:active, &:focus, &:checked { - box-shadow: inset 0 0 0 100px transparentize($fg, 0.75); - &:hover { - box-shadow: inset 0 0 0 100px transparentize($fg, 0.65); - } - } + @if $style == 'filled' { + $fill: $bg; + $hover_fill: if($variant == 'light', darken($bg, 5%), lighten($bg, 5%)); + $active_fill: if($variant == 'light', darken($bg, 9%), lighten($bg, 9%)); + $active_hover_fill: if($variant == 'light', darken($bg, 11%), lighten($bg, 11%)); + } - &:hover { - box-shadow: inset 0 0 0 100px transparentize($fg, 0.8); - } + @include panel_button_fill($fill); - } @else { - box-shadow: inset 0 0 0 100px transparentize($bg, 0.2); + &:focus, &:hover { + @include panel_button_fill($hover_fill); + } - &:active, &:focus, &:checked { - box-shadow: inset 0 0 0 100px $bg; - &:hover { - box-shadow: inset 0 0 0 100px transparentize($bg, 0.05); - } - } + &:active, &:checked { + @include panel_button_fill($active_fill); - &:hover { - box-shadow: inset 0 0 0 100px transparentize($bg, 0.1); + &:hover{ + @include panel_button_fill($active_hover_fill); } } // some overrides to style a child element @if $highlighted_child { - box-shadow: none !important; + // remove the common styles from the parent + background: none !important; + box-shadow: none !important; + border: none !important; + + // add them to the child #{$child_class} { transition-duration: 150ms; border: 3px solid transparent; border-radius: $border_radius; } - &:active, &:focus, &:checked { - box-shadow: none !important; - + &:focus, &:hover { #{$child_class} { - box-shadow: inset 0 0 0 100px transparentize($fg, 0.75); - - &:hover { - box-shadow: inset 0 0 0 100px transparentize($fg, 0.65) !important; - } + @include panel_button_fill($hover_fill); } } - &:hover { - box-shadow: none !important; + &:active, &:checked { #{$child_class} { - box-shadow: inset 0 0 0 100px transparentize($fg, 0.8); + @include panel_button_fill($active_fill); + + &:hover { + @include panel_button_fill($active_hover_fill); + } } } } diff --git a/gnome-shell-sass/_high-contrast-colors.scss b/gnome-shell-sass/_high-contrast-colors.scss index dc74a7e..3cc447c 100644 --- a/gnome-shell-sass/_high-contrast-colors.scss +++ b/gnome-shell-sass/_high-contrast-colors.scss @@ -1,74 +1,81 @@ -// 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; -$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_1; -$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 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 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; + +// 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: mix($fg_color, $bg_color, 50%); +$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 -$hc_inset_color: transparentize($fg_color, 0.7); +// selection colors +$selected_borders_color: lighten($selected_bg_color, 30%); + +// +// 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/gnome-shell-sass/_widgets.scss b/gnome-shell-sass/_widgets.scss index ee16a71..9eac62d 100644 --- a/gnome-shell-sass/_widgets.scss +++ b/gnome-shell-sass/_widgets.scss @@ -21,7 +21,6 @@ @import 'widgets/ibus-popup'; // Notifications @import 'widgets/notifications'; -@import 'widgets/hotplug'; // Dialogs @import 'widgets/dialogs'; // OSDs diff --git a/gnome-shell-sass/widgets/_app-grid.scss b/gnome-shell-sass/widgets/_app-grid.scss index 3c8eda4..fcada18 100644 --- a/gnome-shell-sass/widgets/_app-grid.scss +++ b/gnome-shell-sass/widgets/_app-grid.scss @@ -1,13 +1,14 @@ /* App Grid */ $app_icon_size: 96px; +$app_folder_size: 720px; // app icons .icon-grid { row-spacing: $base_padding * 2; column-spacing: $base_padding * 2; - max-row-spacing: $base_padding * 7; - max-column-spacing: $base_padding * 7; + max-row-spacing: $base_padding * 6; + max-column-spacing: $base_padding * 6; page-padding-top: $base_padding * 4; page-padding-bottom: $base_padding * 4; page-padding-left: $base_padding * 3; @@ -16,41 +17,69 @@ $app_icon_size: 96px; /* App Icons */ -// Icon tiles in the app grid -.app-well-app { - @include overview_icon($system_fg_color); +// items in the app grid and dash +.overview-tile { + @include tile_button($bg:$system_base_color); + // override the %tile style + border-radius: $base_border_radius*3; + padding: $base_padding * 2; + + // the icon itself .overview-icon { - padding: $base_padding*2; - border-radius: $base_border_radius*3; - color: $system_fg_color; - } - .overview-icon.overview-icon-with-label { - > StBoxLayout { - spacing: $base_padding; + // item with a label + &.overview-icon-with-label { + > StBoxLayout { + spacing: $base_padding; + } } } } // app folders -.app-well-app.app-folder { - @include overview_icon($system_fg_color, $flat: false); +.app-folder { + @include tile_button($bg:$system_base_color, $raised: true); } -// expanded folder -.app-folder-dialog { - border-radius: $modal_radius*4; - background-color: $system_overlay_bg_color; - padding: $base_padding*2; - box-shadow:inset 0 0 0 1px $system_borders_color; +// Running app indicator (also shown in dash) +.app-grid-running-dot { + height: 5px; + width: 5px; + border-radius:5px; + background-color: $system_fg_color; - @if $is_highcontrast { - box-shadow:inset 0 0 0 2px $hc_inset_color; + @if $contrast == 'high' { + margin-bottom: 4px; + } @else { + margin-bottom: 2px; + } +} + +.app-folder-dialog-container { + // pad the top with panel height so the folder doesn't overlap the panel on smaller resolutions + padding-top: $panel_height; +} + +// Expanded app folder dialog +.app-folder-dialog { + width: $app_folder_size; + height: $app_folder_size; + + border-radius: $modal_radius * 4; + background-color: $system_overlay_bg_color; + 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 { - padding: 24px 36px 0; - spacing: 12px; + padding: $base_padding * 4 $base_padding * 6; + padding-bottom: 0; & .folder-name-label, & .folder-name-entry { @@ -58,50 +87,30 @@ $app_icon_size: 96px; } & .folder-name-entry { + @extend %system_entry; width: 12em; - color: $system_fg_color !important; - } - - /* FIXME: this is to keep the label in sync with the entry */ - & .folder-name-label { padding: 5px 7px; color: $system_fg_color; } - - & .edit-folder-button { - @extend %button; - padding: 0; - width: 36px; - height: 36px; - border-radius: 99px; - & > StIcon { icon-size: $base_icon_size } } } - & .icon-grid { - row-spacing: $base_padding * 2; - column-spacing: $base_padding * 5; - page-padding-top: 0; - page-padding-bottom: 0; - page-padding-left: 0; - page-padding-right: 0; + & .icon-button { + @include button(normal, $tc:$system_fg_color, $c:$system_overlay_bg_color, $always_dark: true); + &:hover { @include button(hover, $tc:$system_fg_color, $c:$system_overlay_bg_color, $always_dark: true);} + &:active { @include button(active, $tc:$system_fg_color, $c:$system_overlay_bg_color, $always_dark: true);} } & .page-indicators { - margin-bottom: 18px; + margin-bottom: $base_padding * 4; } -} -.app-folder-dialog-container { - padding: $base_padding*2; - width: 720px; - height: 720px; -} + & .page-navigation-arrow { + @include button(normal, $tc:$system_fg_color, $c:$system_overlay_bg_color, $style: flat, $always_dark: true); + &:hover { @include button(hover, $tc:$system_fg_color, $c:$system_overlay_bg_color, $style: flat, $always_dark: true);} + &:active { @include button(active, $tc:$system_fg_color, $c:$system_overlay_bg_color, $style: flat, $always_dark: true);} + } -// Running app indicator (also shown in dash) -.app-well-app-running-dot { - height: 5px; - width: 5px; - border-radius:5px; - margin-bottom: 8px; - background-color: $system_fg_color; + & .overview-tile { + @include tile_button($bg:$system_overlay_bg_color); + } } // Rename popup for app folders @@ -113,15 +122,16 @@ $app_icon_size: 96px; } // App Grid pagination indicators +$page_indicator_size: 10px; .page-indicator { padding: $base_padding $base_padding * 2 0; transition-duration:400ms; .page-indicator-icon { - width: 10px; - height: 10px; - border-radius: 10px; // the same as height&width - background-color: white; + width: $page_indicator_size; + height: $page_indicator_size; + border-radius: $forced_circular_radius; + background-color: $system_fg_color; transition-duration: 400ms; } } @@ -134,13 +144,14 @@ $app_icon_size: 96px; .system-action-icon { background-color: transparentize($system_fg_color,.9); color: $system_fg_color; - border-radius: 99px; + 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; } } +// page navigation .page-navigation-hint { &.dnd { background: rgba(255, 255, 255, 0.1); @@ -151,7 +162,7 @@ $app_icon_size: 96px; background-gradient-start: rgba(255, 255, 255, 0.05); background-gradient-end: transparent; background-gradient-direction: horizontal; - border-radius: $modal_radius*1.5 0px 0px $modal_radius*1.5; + border-radius: $modal_radius * 1.5 0px 0px $modal_radius * 1.5; } &.previous:ltr, @@ -159,25 +170,21 @@ $app_icon_size: 96px; background-gradient-start: transparent; background-gradient-end: rgba(255, 255, 255, 0.05); background-gradient-direction: horizontal; - border-radius: 0px $modal_radius*1.5 $modal_radius*1.5 0px; + border-radius: 0px $modal_radius * 1.5 $modal_radius * 1.5 0px; } } .page-navigation-arrow { - margin: 6px; - padding: 18px; - width: 24px; - height: 24px; - border-radius: 99px; + margin: $base_padding; + padding: $base_padding * 3; + width: $medium_icon_size; + height: $medium_icon_size; + border-radius: $forced_circular_radius; transition-duration: 100ms; > StIcon { color: $system_fg_color;} - @if $is_highcontrast { - @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, $always_dark: true); + &:hover { @include button(hover, $tc:$system_fg_color, $c:$system_base_color, $style: flat, $always_dark: true);} + &:active { @include button(active, $tc:$system_fg_color, $c:$system_base_color, $style: flat, $always_dark: true);} } diff --git a/gnome-shell-sass/widgets/_base.scss b/gnome-shell-sass/widgets/_base.scss index 69ebb30..7d6f280 100644 --- a/gnome-shell-sass/widgets/_base.scss +++ b/gnome-shell-sass/widgets/_base.scss @@ -9,10 +9,19 @@ // Outline for low res icons .lowres-icon { - icon-shadow: 0 1px 2px rgba(black, 0.3); + icon-shadow: 0 1px 2px rgba(black, 0.2); } // Dropshadow for large icons .icon-dropshadow { - icon-shadow: 0 1px 5px rgba(black, 0.8); + icon-shadow: 0 2px 4px rgba(black, 0.4); + + @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/gnome-shell-sass/widgets/_buttons.scss b/gnome-shell-sass/widgets/_buttons.scss index 84d2316..60fa4d8 100644 --- a/gnome-shell-sass/widgets/_buttons.scss +++ b/gnome-shell-sass/widgets/_buttons.scss @@ -1,19 +1,39 @@ /* Buttons */ .button { - @extend %button; // that's it - min-height: 22px; + @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 { - @extend .button; // same style as buttons + @extend %button; - border-radius: 99px; - padding: $base_padding*2; - min-height: 16px; + border-radius: $forced_circular_radius; // is circular + padding: $scaled_padding * 2; + min-height: $scalable_icon_size; StIcon { - icon-size: $base_icon_size; + icon-size: $scalable_icon_size; -st-icon-style: symbolic; } + + // default style + &.default { + @extend %default_button; + } + + // flat style + &.flat { + @extend %flat_button; + } } diff --git a/gnome-shell-sass/widgets/_calendar.scss b/gnome-shell-sass/widgets/_calendar.scss index fc054da..f34e591 100644 --- a/gnome-shell-sass/widgets/_calendar.scss +++ b/gnome-shell-sass/widgets/_calendar.scss @@ -2,25 +2,31 @@ // overall menu #calendarArea { - padding: $base_padding - 2px; + padding: $base_margin; } -// Calendar menu side column +.datemenu-popover { + border-radius: $base_border_radius * 1.5 + $base_padding * 3; +} + +// calendar menu side column .datemenu-calendar-column { spacing: $base_padding; - &:ltr {padding-left: $base_padding;} - &:rtl {padding-right: $base_padding;} - .datemenu-displays-box {spacing: $base_padding;} + &:ltr { margin-left: $base_padding;} + &:rtl { margin-right: $base_padding;} + .datemenu-displays-box { + spacing: $base_padding; + } } -/* today button (the date) */ +// today button (the date) .datemenu-today-button { - @include card(flat); + @extend %card_flat; padding: $base_padding * 1.5; // weekday label .day-label { - @extend %heading; + font-weight: bold; } // date label @@ -29,10 +35,11 @@ } } -/* Calendar */ +// the mini calendar .calendar { - @include card(flat); + @extend %card_flat; margin-top: 0; + padding: 0; // month header .calendar-month-header { @@ -40,23 +47,25 @@ // prev/next month icons .calendar-change-month-back StIcon, .calendar-change-month-forward StIcon { - icon-size: $base_icon_size; + icon-size: $scalable_icon_size; } // month label .calendar-month-label { @extend %heading; + @extend %flat_button; + color: $fg_color !important; padding: 8px 0; + width: 10em; + border-radius: $forced_circular_radius; + text-align: center; } .pager-button { - @extend .button, .flat; - padding: 0 !important; - height: 32px; - width: 32px; - margin: 2px; - border-radius: $base_border_radius; - transition-duration: 100ms; + @extend .icon-button, .flat; + height: 2.6em; + width: 2.6em; + padding: 0; } } @@ -64,41 +73,48 @@ .calendar-day { @extend %numeric; @extend %smaller; - @extend .button, .flat; - - border-radius: 99px; - height: 3em !important; - width: 3em !important; + @extend %flat_button; + border-radius: $forced_circular_radius; + height: 3em; + width: 3em; margin: 2px; - padding: 0 !important; - font-weight: 600; + padding: 0; + font-weight: bold; text-align: center; - transition-duration: 100ms; - - // day of week heading - &.calendar-day-heading { - background-color: transparent; - color: $insensitive_fg_color; - height: 0.93em !important; // force heading to be smaller height - padding-top: $base_padding !important; - margin-bottom: 0; - border-radius: 9px; - } &.calendar-weekday {} &.calendar-weekend { color: $insensitive_fg_color; + @if $contrast == 'high' { + font-style: italic; + } } &.calendar-other-month { - color: transparentize($insensitive_fg_color, 0.7) !important; + color: transparentize($fg_color, 0.5); font-weight: normal; + + &.calendar-weekend { + color: transparentize($fg_color, 0.5); + @if $contrast == 'high' { + color: $fg_color; + } + } + + @if $contrast == 'high' { + color: $fg_color; + font-style: italic; // differentiate with a font-style instead of text color + } } &.calendar-today { - @extend .button, .default; - color: $selected_fg_color; /* override weekends */ + @extend %default_button; + // override colors above for when today is a weekend + color: $selected_fg_color !important; + &.calendar-day-with-events { + background-image: url("resource:///org/gnome/shell/theme/calendar-today.svg") !important; // always use light asset with .default style + } } &.calendar-day-with-events { @@ -107,129 +123,165 @@ } } + // day of week heading + .calendar-day-heading { + @extend %numeric; + @extend %smaller; + @extend %flat_button; + font-weight: bold; + text-align: center; + margin: $base_margin; + padding: $base_padding * 0.5 $base_padding; + border-radius: $base_border_radius; + } + // week number style .calendar-week-number { - @include fontsize($base_font_size - 4); + @extend %smaller; font-weight: bold; font-feature-settings: "tnum"; text-align: center; - margin: 6px; + margin: $base_padding; padding: 0 $base_padding; - border-radius: 3px; - background-color: transparentize($fg_color, 0.9); + border-radius: $base_border_radius * 0.5; + background-color: transparentize($insensitive_fg_color, .8); color: $insensitive_fg_color; + } +} - @if $is_highcontrast { - border:1px solid $hc_inset_color; +// common style for the date menu widgets +.events-button, +.world-clocks-button, +.weather-button { + @extend %card; +} + +// events +.events-button { + + .events-box { + + // event title + .events-title { + @extend %heading; + color: $insensitive_fg_color; + padding-bottom: $base_padding; + } + + // list of events + .events-list { + spacing: $base_padding; + + // container for an event + .event-box { + spacing: $base_padding; + border-radius: $base_border_radius; + + .event-summary { + @extend %heading; + } + + .event-time { + @extend %numeric; + @extend %caption; + color: $insensitive_fg_color; + } + } + + .event-placeholder { + color: $insensitive_fg_color; + font-style: italic; + } } } } -/* Events */ -.events-button { - @include card; - padding: $base_padding * 2; - - .events-box { - spacing: $base_padding; - } - - .events-list { - spacing: 2 * $base_padding; - color: $fg_color; - } - - .events-title { - @extend %heading; - margin-bottom: $base_margin; - } - - .event-time { - @extend %numeric; - @extend %caption; - color: $insensitive_fg_color; - } -} - -/* World clocks */ +// world clocks .world-clocks-button { - @include card; - padding: $base_padding * 2; - - .world-clocks-grid { - spacing-rows: $base_padding; - spacing-columns: $base_padding * 2; - } // title .world-clocks-header { @extend %heading; color: $insensitive_fg_color; - } - // city label - .world-clocks-city { - color: $fg_color; - } - - // timezone time - .world-clocks-time { - @extend %heading; - @extend %numeric; - color: $fg_color; - - &:ltr {text-align: right;} - &:rtl {text-align: left;} - } - - // timezone offset label - .world-clocks-timezone { - @extend %numeric; - @extend %caption; - color: $insensitive_fg_color; - } -} - -/* Weather */ -.weather-button { - @include card; - padding: $base_padding * 2; - - .weather-box { - spacing: $base_padding + $base_margin; - } - - .weather-header-box { - spacing: $base_padding; - } - - .weather-header { - color: $insensitive_fg_color; - @extend %heading; - - &.location { - font-weight: normal; + // change style when no world clocks are configured + &.no-world-clocks { + color: $fg_color; } } - .weather-grid { + // clocks + .world-clocks-grid { spacing-rows: $base_padding; spacing-columns: $base_padding * 2; - } - .weather-forecast-time { - @extend %numeric; - @extend %caption; - color: darken($fg_color,30%); - padding-top: 0.2em; - padding-bottom: 0.4em; - } + // city label + .world-clocks-city { + } - .weather-forecast-icon { - icon-size: $large_icon_size; - } + // timezone time + .world-clocks-time { + @extend %numeric; + font-weight: bold; - .weather-forecast-temp { - @extend %heading; + &:ltr {text-align: right;} + &:rtl {text-align: left;} + } + + // timezone offset label + .world-clocks-timezone { + @extend %numeric; + @extend %caption; + color: $insensitive_fg_color; + } + } +} + +// weather +.weather-button { + + .weather-box { + spacing: $base_padding; + + // header + .weather-header-box { + spacing: $base_padding; + + .weather-header { + @extend %heading; + color: $insensitive_fg_color; + + // change style when no location is configured + &.no-location { + color: $fg_color; + } + + &.location { + font-weight: normal; + } + } + } + + // weather items + .weather-grid { + spacing-rows: $base_padding; + spacing-columns: $base_padding * 2; + + .weather-forecast-time { + @extend %numeric; + @include fontsize(10pt); + padding-top: 0.2em; + padding-bottom: 0.4em; + } + .weather-forecast-icon { + icon-size: $large_scalable_icon_size; + margin-bottom: $base_margin; + } + + .weather-forecast-temp { + @extend %numeric; + font-weight: bold; + } + } } } diff --git a/gnome-shell-sass/widgets/_dash.scss b/gnome-shell-sass/widgets/_dash.scss index 4af0ab0..db378ca 100644 --- a/gnome-shell-sass/widgets/_dash.scss +++ b/gnome-shell-sass/widgets/_dash.scss @@ -4,75 +4,92 @@ $dash_background_color: $system_overlay_bg_color; $dash_placeholder_size: 32px; -$dash_padding: $base_padding*2; // 12px +$dash_padding: $base_padding * 2; +$dash_edge_offset: $base_margin * 3; $dash_border_radius: $modal_radius + $dash_padding; +$dash_spacing: $base_margin * 0.5; // container for the dash #dash { - @extend %caption; - margin-top: $dash_padding; + margin-top: $dash_edge_offset; - .placeholder { - // background-image: url("resource:///org/gnome/shell/theme/dash-placeholder.svg"); - background-image:none; - background-size: contain; - height: $dash_placeholder_size; - } - - .empty-dash-drop-target { - width: $dash_placeholder_size; - height: $dash_placeholder_size; - } - - // Running app indicator (also shown in app grid) - .app-well-app-running-dot { - margin-bottom: 14px; // hardcoded - } -} - -// background of the dash behind app icons -.dash-background { - background-color: $dash_background_color; - border-radius: $dash_border_radius; - padding: $dash_padding; - spacing: $base_padding; - margin-bottom: $dash_padding; - - @if $is_highcontrast { - border: 2px solid $hc_inset_color; - box-shadow:none; - } -} - -// items on the dash -.dash-item-container { - > * {margin: 0 2px;} - &:ltr{&:first-child {margin-left: 0;}} - &:rtl{&:first-child {margin-right: 0;}} - - // each app item on the dash - .app-well-app .overview-icon { - padding: $base_padding; - border-radius: $base_border_radius*2; - } - - // show apps button - .show-apps { @include overview_icon($system_fg_color);} - - .show-apps, .app-well-app { + // background behind item container + .dash-background { + background-color: $dash_background_color; + border-radius: $dash_border_radius; + padding-top: $dash_padding; padding-bottom: $dash_padding; - color: $system_fg_color; - } -} + padding-left: $dash_padding - $dash_spacing; // subtract the margins added to .overview-tile below + padding-right: $dash_padding - $dash_spacing; -// separator between favourites and running apps -.dash-separator { - width: 1px; - margin: 0 $base_margin; - background-color: $system_borders_color; - margin-bottom: $dash_padding; - @if $is_highcontrast { - width: 2px; + @if $contrast == 'high' { + @include draw_hc_inset($width: 2px); + } + } + + // items on the dash + .dash-item-container { + + .placeholder { + // background-image: url("resource:///org/gnome/shell/theme/dash-placeholder.svg"); + background-image: none; + background-size: contain; + height: $dash_placeholder_size; + } + + .empty-dash-drop-target { + width: $dash_placeholder_size; + height: $dash_placeholder_size; + } + + // IMPORTANT: items on the dash need to extend to the edge to be adequate click targets + // as such the %tile style is overriden and button styles are applied to the child class .overview-icon + .show-apps, + .overview-tile { + // remove styles + @extend %reset; + + margin: 0 $dash_spacing; + padding-bottom: $dash_edge_offset; // align with other items + + $fg:$system_fg_color; + $bg:$dash_background_color; + + .overview-icon { + @extend %tile; + @include button(normal, $tc:$fg, $c:$bg, $style: flat, $always_dark: true); + } + + &:focus .overview-icon { @include button(focus, $tc:$fg, $c:$bg, $style: flat, $always_dark: true);} + &:hover .overview-icon { @include button(hover, $tc:$fg, $c:$bg, $style: flat, $always_dark: true);} + &:active .overview-icon { @include button(active, $tc:$fg, $c:$bg, $style: flat, $always_dark: true);} + &:checked .overview-icon { @include button(checked, $tc:$fg, $c:$bg, $style: flat, $always_dark: true);} + } + + // running app dot + .app-grid-running-dot { + // manually position the dot within the dash item + margin-bottom: $dash_padding + $dash_edge_offset - 3px; // 3px = size of dot (5px) subtracted from its translationY from appDisplay.js + } + } + + // separator between pinned and running apps + .dash-separator { + width: 1px; + margin-left:$base_margin; + margin-right:$base_margin; + background-color: $system_borders_color; + + @if $contrast == 'high' { + width: 2px; + background-color: $hc_inset_color; + } + } + + // make sure all dash components have same margin from screen edge + .dash-separator, + .dash-background { + margin-bottom: $dash_edge_offset; } } diff --git a/gnome-shell-sass/widgets/_dialogs.scss b/gnome-shell-sass/widgets/_dialogs.scss index 98b3b8c..48bb9c0 100644 --- a/gnome-shell-sass/widgets/_dialogs.scss +++ b/gnome-shell-sass/widgets/_dialogs.scss @@ -10,8 +10,8 @@ box-shadow: inset 0 0 0 1px $outer_borders_color; .modal-dialog-content-box { - margin: 32px 40px; - spacing: 32px; + margin: $base_margin * 8 $base_margin * 10; + spacing: $base_margin * 8; max-width: 28em; } @@ -32,7 +32,7 @@ /* Message Dialog */ .message-dialog-content { - spacing: 18px; + spacing: $base_padding * 3; .message-dialog-title { text-align: center; @@ -45,7 +45,7 @@ /* Dialog List */ .dialog-list { - spacing: 18px; + spacing: $base_padding * 3; .dialog-list-title { text-align: center; @@ -71,8 +71,8 @@ /* Run Dialog */ .run-dialog { .modal-dialog-content-box { - margin-top: 24px; - margin-bottom: 14px; + margin-top: $base_padding * 4; + margin-bottom: $base_padding * 2; } .run-dialog-entry { width: 20em; } .run-dialog-description { @@ -88,25 +88,25 @@ width: 28em; .modal-dialog-content-box { - margin-bottom: 24px; + margin-bottom: $base_margin * 6; } } .prompt-dialog-password-grid { - spacing-rows: 8px; - spacing-columns: 4px; + spacing-rows: $base_margin * 2; + spacing-columns: $base_margin; .prompt-dialog-password-entry { width: auto; // 4px (spacing) + 16px (spinner-width) - &:ltr { margin-left: 20px; } - &:rtl { margin-right: 20px; } + &:ltr { margin-left: $base_margin+$base_icon_size; } + &:rtl { margin-right: $base_margin+$base_icon_size; } } } .prompt-dialog-password-layout { - spacing: 8px; + spacing: $base_margin * 2; } .prompt-dialog-password-entry { @@ -129,30 +129,30 @@ .polkit-dialog-user-layout { text-align: center; - spacing: 8px; - margin-bottom: 6px; + spacing: $base_margin * 2; + margin-bottom: $base_padding; .polkit-dialog-user-root-label { color: $warning_color; } } /* Audio selection dialog */ .audio-device-selection-dialog { - .modal-dialog-content-box { margin-bottom: 28px; } - .audio-selection-box { spacing: 20px; } + .modal-dialog-content-box { margin-bottom: $base_margin * 7; } + .audio-selection-box { spacing: $base_margin * 5; } } .audio-selection-device { - border-radius: $base_border_radius*2; + border-radius: $base_border_radius * 2; &:hover,&:focus { background-color: $hover_bg_color; } - &:active { + &:active { background-color: $selected_bg_color; color: $selected_fg_color; } } .audio-selection-device-box { - padding: 20px; - spacing: 20px; + padding: $base_margin * 5; + spacing: $base_margin * 5; } .audio-selection-device-icon { diff --git a/gnome-shell-sass/widgets/_entries.scss b/gnome-shell-sass/widgets/_entries.scss index a10546f..41e10f7 100644 --- a/gnome-shell-sass/widgets/_entries.scss +++ b/gnome-shell-sass/widgets/_entries.scss @@ -4,17 +4,17 @@ StEntry { @extend %entry; StIcon.capslock-warning { - icon-size: $base_icon_size; + icon-size: $scalable_icon_size; warning-color: $warning_color; - padding: 0 4px; + padding: 0 $base_margin; } StIcon.peek-password { - icon-size: $base_icon_size; - padding: 0 4px; + icon-size: $scalable_icon_size; + padding: 0 $base_margin; } StLabel.hint-text { - margin-left: 2px; + margin-left: $base_margin * 0.5; } } diff --git a/gnome-shell-sass/widgets/_hotplug.scss b/gnome-shell-sass/widgets/_hotplug.scss deleted file mode 100644 index acd0265..0000000 --- a/gnome-shell-sass/widgets/_hotplug.scss +++ /dev/null @@ -1,10 +0,0 @@ -// hotplug - -.hotplug-notification-item { - @extend %bubble_button; -} - -.hotplug-notification-item-icon { - icon-size: 24px; - padding: 0 4px; -} diff --git a/gnome-shell-sass/widgets/_ibus-popup.scss b/gnome-shell-sass/widgets/_ibus-popup.scss index 8cbaa95..c1c0cfa 100644 --- a/gnome-shell-sass/widgets/_ibus-popup.scss +++ b/gnome-shell-sass/widgets/_ibus-popup.scss @@ -17,7 +17,7 @@ } .candidate-box { - padding: $base_padding $base_padding*2 $base_padding $base_padding*2; + padding: $base_padding $base_padding * 2 $base_padding $base_padding * 2; border-radius: $base_border_radius; &:selected { background-color: $selected_bg_color; color: $selected_fg_color; } &:hover { background-color: $hover_bg_color; color: $hover_fg_color; } @@ -25,8 +25,8 @@ .candidate-page-button-box { height: 2em; - .vertical & { padding-top: $base_padding*2; } - .horizontal & { padding-left: $base_padding*2; } + .vertical & { padding-top: $base_padding * 2; } + .horizontal & { padding-left: $base_padding * 2; } } .candidate-page-button { diff --git a/gnome-shell-sass/widgets/_keyboard.scss b/gnome-shell-sass/widgets/_keyboard.scss index 1dc6b95..39e6394 100644 --- a/gnome-shell-sass/widgets/_keyboard.scss +++ b/gnome-shell-sass/widgets/_keyboard.scss @@ -1,7 +1,7 @@ /* On-screen Keyboard */ $key_size: 1.2em; -$key_border_radius: $base_border_radius + 4px; // 12px +$key_border_radius: $base_border_radius * 1.25; $key_bg_color: darken($osd_fg_color, 70%); // $default_key_bg_color: darken($key_bg_color, 4%); $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken($key_bg_color, 10%)); @@ -31,8 +31,7 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken( // the keys .keyboard-key { - - @include fontsize($base_font_size + 5); + @include fontsize($base_font_size + 5pt); font-weight: bold; min-height: $key_size; min-width: $key_size; @@ -41,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%); @@ -56,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 @@ -71,18 +70,18 @@ $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; } &.shift-key-lowercase {} - + // pressed shift has different style - &.shift-key-uppercase { + &.shift-key-uppercase { background-color: lighten($key_bg_color, 20%); color: $osd_bg_color; &:hover { @@ -92,12 +91,12 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken( } // size of icons on keys - StIcon { icon-size: 24px; } + StIcon { icon-size: $medium_icon_size; } } // long press on a key popup .keyboard-subkeys { - -arrow-border-radius: $base_border_radius*2; + -arrow-border-radius: $base_border_radius * 2; -arrow-background-color: $osd_bg_color; -arrow-border-width: 1px; -arrow-border-color: lighten($osd_bg_color, 9%); @@ -107,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; } @@ -136,24 +135,24 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken( // suggestions .word-suggestions { - @include fontsize($base_font_size + 1); + @extend %title_4; spacing: 12px; min-height: 17pt; - padding: $base_padding*2; + padding: $base_padding * 2; color: $osd_fg_color; // each suggestion StButton { margin: 0 3px; min-width: 32px; - border-radius: $base_border_radius - 2px; - padding: 0px $base_padding*3; + 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/gnome-shell-sass/widgets/_login-lock.scss b/gnome-shell-sass/widgets/_login-lock.scss index 8677ae7..4dc9aec 100644 --- a/gnome-shell-sass/widgets/_login-lock.scss +++ b/gnome-shell-sass/widgets/_login-lock.scss @@ -1,23 +1,32 @@ -$_gdm_bg: $system_bg_color; +$_gdm_bg: $system_base_color; $_gdm_fg: $system_fg_color; -$_gdm_dialog_width: 23em; +$_gdm_dialog_width: 25em; -// common style for gdm and lockscreen +// common style for login and lockscreen .login-dialog, .unlock-dialog { + color: $_gdm_fg; .caps-lock-warning-label, .login-dialog-message-warning { color: $_gdm_fg; } + + .login-dialog-prompt-layout { + width: $_gdm_dialog_width; + spacing: $base_padding * 1.5; + } } -/* Login Dialog */ +// GDM Login Dialog +// uses dark grey system styles .login-dialog { - background-color: $_gdm_bg; + .login-dialog-prompt-entry { + @extend %system_entry; + } } -// buttons +// buttons on login screen .login-dialog-button { &.cancel-button, @@ -28,50 +37,89 @@ $_gdm_dialog_width: 23em; } &.cancel-button { - padding: $base_padding*1.5; + padding: $base_padding * 1.5; } } .login-dialog-button-box { - width: $_gdm_dialog_width; - spacing: $base_padding*2; + spacing: $base_padding * 2; +} + +.conflicting-session-dialog-content { + spacing: 20px; + + .conflicting-session-dialog-title { + text-align: center; + @extend %title_2; + margin-bottom: 5px; + } + + .conflicting-session-dialog-desc { + text-align: center; + } + + .conflicting-session-dialog-desc-warning { + text-align: center; + color: $warning_color; + } } .login-dialog-logo-bin { - margin:3em 0; + margin: 3em 0; +} + +.login-dialog-banner-view { + max-width: $_gdm_dialog_width; + + .login-dialog-banner { + color: darken($_gdm_fg,10%); + } +} + +.login-dialog-message { + text-align: center; +} + +.login-dialog-user-selection-box { + // padding to ensure the box doesn't overlap the panel + padding-top: 4em; + padding-bottom: 8em; } -.login-dialog-banner { color: darken($_gdm_fg,10%); } -.login-dialog-banner-view { max-width: $_gdm_dialog_width; } -.login-dialog-message { text-align: center; } -.login-dialog-user-selection-box { padding: 100px 0px; } .login-dialog-not-listed-label { - @include fontsize($base_font_size); - font-weight: bold; - color: darken($_gdm_fg,30%); - padding: $base_padding*2; - - .login-dialog-not-listed-button:focus &, - .login-dialog-not-listed-button:hover & { - color: $_gdm_fg; - } - .login-dialog-not-listed-button:focus & { - text-decoration: underline; - } + @extend %heading; + padding: $base_padding; +} + +.login-dialog-not-listed-button { + // use button styling + @extend %button_common; + @include button(normal, $tc:$_gdm_fg, $c:$_gdm_bg, $style: flat, $always_dark: true); + &:focus { @include button(focus, $tc:$_gdm_fg, $c:$_gdm_bg, $style: flat, $always_dark: true);} + &:hover { @include button(hover, $tc:$_gdm_fg, $c:$_gdm_bg, $style: flat, $always_dark: true);} + &:active { @include button(active, $tc:$_gdm_fg, $c:$_gdm_bg, $style: flat, $always_dark: true);} + + padding: 0 $base_padding; + margin: $base_padding; +} + +// Authentication methods list +.login-dialog-auth-list-view { + -st-vfade-offset: 3em; } -.login-dialog-auth-list-view { -st-vfade-offset: 1em; } .login-dialog-auth-list { - spacing: 6px; + spacing: $base_padding; margin-left: 2em; } + .login-dialog-auth-list-title { margin-left: 2em; } .login-dialog-auth-list-item { - border-radius: $base_border_radius*2; - padding: 4px; + border-radius: $base_border_radius * 2; + padding: $base_margin; color: darken($_gdm_fg,30%); &:focus, &:selected { @@ -81,84 +129,69 @@ $_gdm_dialog_width: 23em; } .login-dialog-auth-list-label { - @include fontsize($base_font_size + 2); - font-weight: bold; - padding-left: 15px; - - &:ltr { padding-left: 14px; text-align: left; } - &:rtl { padding-right: 14px; text-align: right; } + @extend %title_4; + &:ltr { padding-left: $base_padding * 2.5; text-align: left; } + &:rtl { padding-right: $base_padding * 2.5; text-align: right; } } -.login-dialog-user-list-view { -st-vfade-offset: 1em; } -.login-dialog-user-list { - spacing: 12px; +// User list +.login-dialog-user-list-view { width: $_gdm_dialog_width; + -st-vfade-offset: 3em; - .login-dialog-user-list-item { - border-radius: $base_border_radius + 4px; - padding: $base_padding; - background-color: transparentize($_gdm_fg, .95); - color: $_gdm_fg; + .login-dialog-user-list { + margin: 0 $base_margin * 2; // margin to account for scrollbar + spacing: $base_padding * 2; - @if $is_highcontrast { - box-shadow:inset 0 0 0 1px $hc_inset_color;; - } - .user-widget .user-icon { - border: 4px solid transparent; - } + .login-dialog-user-list-item { + // use button styling + @extend %button_common; + @include button(normal, $tc:$_gdm_fg, $c:$system_base_color, $always_dark: true); + &:selected, + &:focus { @include button(focus, $tc:$_gdm_fg, $c:$system_base_color, $always_dark: true);} + &:hover { @include button(hover, $tc:$_gdm_fg, $c:$system_base_color, $always_dark: true);} + &:active { @include button(active, $tc:$_gdm_fg, $c:$system_base_color, $always_dark: true);} - .login-dialog-timed-login-indicator { - height: 2px; - margin-top: 6px; - background-color: darken($_gdm_fg, 30%); - } + border-radius: $modal_radius; + padding: $base_padding * 1.5; - &:focus .login-dialog-timed-login-indicator { background-color: $selected_fg_color; } - } + // create border for indicating logged in user + .user-icon { + border: 2px solid transparent; + } - &:expanded .login-dialog-user-list-item { - transition-duration: 300ms; - transition-timing-function: ease; + .login-dialog-timed-login-indicator { + height: 2px; + margin-top: $base_padding; + background-color: transparentize($_gdm_fg, .3); + } - &:hover { - background-color: transparentize($_gdm_fg, .9); - color: $_gdm_fg; - } - - &:selected { - background-color: $selected_bg_color; - color: $selected_fg_color; - &:hover { background-color: lighten($selected_bg_color,5%); } - } - - &:logged-in { - .user-widget .user-icon { - border-color: $selected_bg_color; + &:logged-in { + // color border for logged-in user + .user-icon { + border-color: $selected_bg_color; + StIcon { + background-color: transparentize($selected_bg_color, .7); + } + } } } } } -.login-dialog-prompt-layout { - spacing: $base_padding*2; - width: 26em; -} - -.login-dialog-prompt-entry { - @extend %system_entry; -} - - -/* Screen Shield */ -// a.k.a. the lockscreen - +// Screen Shield +// a.k.a. the lockscreen, uses transparent styles .unlock-dialog { background-color: transparent; - // %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));} + @extend %lockscreen_entry; + } + + .button, + .icon-button { + @extend %lockscreen_button; } } @@ -178,7 +211,7 @@ $_gdm_dialog_width: 23em; .unlock-dialog-clock-time { @extend %numeric; - @include fontsize(72); + @include fontsize(72pt); font-weight: 200; } @@ -189,8 +222,8 @@ $_gdm_dialog_width: 23em; .unlock-dialog-clock-hint { margin-top: 2em; - padding: $base_padding $base_padding*3; - border-radius: $base_border_radius*2; + padding: $base_padding $base_padding * 3; + border-radius: $base_border_radius * 2; font-weight: bold; } } @@ -205,8 +238,8 @@ $_gdm_dialog_width: 23em; } .unlock-dialog-notifications-container { - margin: 12px; - spacing: 6px; + margin: $base_margin * 3; + spacing: $base_padding; width: $_gdm_dialog_width; background-color: transparent; @@ -217,7 +250,7 @@ $_gdm_dialog_width: 23em; .notification, .unlock-dialog-notification-source { - padding: 12px 16px; + padding: $base_margin * 3 $base_margin * 4; border: none; background-color: transparentize($_gdm_fg,0.9); color: $_gdm_fg; @@ -227,63 +260,70 @@ $_gdm_dialog_width: 23em; } } +.unlock-dialog-notification-icon { + icon-size: $large_icon_size; +} + .unlock-dialog-notification-label { - padding-left: 12px; + padding-left: $base_padding * 2; padding-right: 0; - &:rtl { padding-right: 12px; padding-left: 0; } + &:rtl { padding-right: $base_padding * 2; padding-left: 0; } } .unlock-dialog-notification-count-text { font-weight: bold; - padding: 0 12px; + padding: 0 $base_padding * 2; color: $_gdm_fg; - background-color: transparentize($_gdm_fg, 0.9); - border-radius: 99px; + background-color: transparentize($_gdm_fg, .9); + border-radius: $forced_circular_radius; } -// User Widget -.user-widget { +.login-dialog, +.unlock-dialog { - .user-widget-label { - color: $_gdm_fg; - } + // User Widget + .user-widget { - // layout of the user list - &.horizontal { - spacing: $base_padding*3; + // common .user-widget-label { - @extend %title_3; + color: $_gdm_fg; } .user-icon { - & StIcon { - padding: 12px; - icon-size: $base_icon_size*2; - width: $base_icon_size*3; - height: $base_icon_size*3; - background-color: transparentize($_gdm_fg, 0.9); + background-color: transparentize($_gdm_fg, .87); + color: $_gdm_fg; + + @if $contrast == 'high' { + background-color: transparentize($_gdm_fg, .7); + box-shadow:inset 0 0 0 1px $hc_inset_color; } } - } - // layout of the login prompt - &.vertical { - spacing: $base_padding*4; - - .user-widget-label { - @extend %title_1; - text-align: center; - margin-bottom: .75em; + // layout of the user list + &.horizontal { + spacing: $base_padding * 3; + .user-widget-label { + @extend %title_3; + } } - .user-icon { - icon-size: $base_icon_size*10; + // layout of the login prompt + &.vertical { + spacing: $base_padding * 4; - & StIcon { - padding: 32px; - icon-size: $base_icon_size*4; - background-color: transparentize($_gdm_fg, 0.9); + .user-widget-label { + @extend %title_1; + text-align: center; + margin-bottom: .75em; + } + + .user-icon { + icon-size: $base_icon_size * 10; + + & StIcon { + padding: $base_padding * 4; + } } } } diff --git a/gnome-shell-sass/widgets/_looking-glass.scss b/gnome-shell-sass/widgets/_looking-glass.scss index 7cd81e4..7b8d904 100644 --- a/gnome-shell-sass/widgets/_looking-glass.scss +++ b/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; } @@ -29,7 +29,7 @@ .lg-toolbar-button { @extend %osd_button; - padding: $base_padding $base_padding*2; + padding: $base_padding $base_padding * 2; & > StIcon { icon-size: $base_icon_size; } } @@ -41,9 +41,9 @@ .notebook-tab { @extend %osd_button; - -natural-hpadding: $base_padding*2; - -minimum-hpadding: $base_padding*2; - padding: $base_padding $base_padding*2; + -natural-hpadding: $base_padding * 2; + -minimum-hpadding: $base_padding * 2; + padding: $base_padding $base_padding * 2; } StBoxLayout#EvalBox { padding: 4px; spacing: $base_padding; padding: $base_padding; } @@ -54,7 +54,7 @@ StEntry { @extend %osd_entry; - min-height: 22px; + min-height: to_em(22px); } .shell-link { @@ -97,8 +97,7 @@ } .lg-extension { - padding: $base_padding*2; - @include card; + @extend %card; } .lg-extension-name { diff --git a/gnome-shell-sass/widgets/_message-list.scss b/gnome-shell-sass/widgets/_message-list.scss index 9a9144b..2b3fd61 100644 --- a/gnome-shell-sass/widgets/_message-list.scss +++ b/gnome-shell-sass/widgets/_message-list.scss @@ -12,36 +12,37 @@ .message-list-placeholder { @extend %title_2; - color: $insensitive_fg_color; - + color: transparentize($fg_color, .75); + @if $contrast == 'high' { + color: transparentize($fg_color, .5); + } // icon size and color > StIcon { - icon-size: $base_icon_size*3; // 48px - margin-bottom: $base_margin*3; + icon-size: 96px; // non-em asset size + margin-bottom: $base_margin * 3; -st-icon-style: symbolic; } } } .message-list-sections { - spacing: $base_padding; - margin: 0; - padding-bottom: $base_padding; - // to account for scrollbar &:ltr {margin-right: $base_margin * 3; } &:rtl {margin-left: $base_margin * 3;} + + spacing: $base_padding * 2; } .message-list-section, .message-list-section-list { - spacing: $base_padding; + spacing: $base_padding * 2; } // do-not-disturb + clear button .message-list-controls { // NOTE: remove the padding if notification_bubble could remove margin for drop shadow - padding: $base_padding; + padding: $base_padding * 2; + padding-bottom: $base_padding; spacing: $base_padding; @extend %heading; @@ -62,73 +63,112 @@ // message bubbles .message { - @include card; + @extend %card; + padding: 0; + margin: 0; + border-radius: $modal_radius; - // icon container - .message-icon-bin { - padding: ($base_padding * 3); + // subtract side padding to accommodate the close button's border + &:ltr { padding-right:-2px; }; + &:rtl { padding-left:-2px; }; - &:ltr {padding-right:$base_padding;} - &:rtl {padding-left:$base_padding;} + // message header + .message-header { + padding: 0 $scaled_padding; + margin: $base_padding; + margin-bottom: 0; + spacing: $base_padding; + color: $insensitive_fg_color; - // icon size and color - > StIcon { - icon-size: $large_icon_size; // 32px + // header source icon + .message-source-icon { + icon-size: $scalable_icon_size; // 16px -st-icon-style: symbolic; } - // fallback - > .fallback-app-icon { - width: $base_icon_size; - height: $base_icon_size; + // box that contains the source icon, source name and timestamp of the message + .message-header-content { + spacing: $base_padding; + min-height: to_em(24px); + padding-bottom: $base_padding; + + // header source title + .message-source-title { + font-weight: bold; + } + + // Time label + .event-time { + @extend %caption; + color: $insensitive_fg_color; + // Add bottom padding to align the app name with the time horizontally + padding-bottom: to_em(1px); + + &:ltr { text-align: right }; + &:rtl { text-align: left }; + } + } + + // buttons in the message header + .message-expand-button, + .message-close-button { + @extend .icon-button; + color: $fg_color; + background-color: transparentize($fg_color, .9); + padding: 4px; + &:hover { background-color: transparentize($fg_color, .81);} + &:active, + &:active:hover { background-color: transparentize($fg_color, .76);} + &:insensitive { background-color: transparentize($fg_color, .93);} + } + + .message-expand-button { + padding: 6px; + &:ltr { margin-right: $base_padding; } + &:rtl { margin-left: $base_padding; } } } - // content - .message-content { - spacing: 4px; - padding: ($base_padding*1.5); - margin-bottom: $base_margin*2; - } + // container for message contents + .message-box { + padding: $base_padding; + margin: $base_padding; + margin-top: 0; + spacing: $base_padding; - // title - .message-title { - font-weight: bold; - /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */ - padding-top: 0.57em; - } + // icon of the message + .message-icon { + &:ltr { margin-right:$base_padding;} + &:rtl { margin-left:$base_padding;} - // secondary container in title box - .message-secondary-bin { - padding: 0 $base_margin * 2; + // icon size and color + icon-size: $base_icon_size * 3; // 48px + -st-icon-style: symbolic; - // notification time stamp - > .event-time { - color: transparentize($fg_color, 0.5); - @include fontsize($base_font_size - 2); - /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */ - padding-bottom: 0.13em; + &.message-themed-icon { + border-radius: $forced_circular_radius; // is circular + background-color: transparentize($fg_color, 0.8); + icon-size: $base_icon_size; + min-width: $base_icon_size * 3; + min-height: $base_icon_size * 3; + } + } - &:ltr { text-align: right }; - &:rtl { text-align: left }; + // If the header isn't displayed we need more top margin + &:first-child { + margin-top: $base_padding * 2; + } + + // text of the message + .message-content { + spacing: $base_margin; + + // message title + .message-title { + font-weight: bold; + } } } - - // close button - .message-close-button { - color: $fg_color; - background-color: transparentize($fg_color, 0.8); - border-radius: 99px; - padding: $base_padding - 1px; - margin: 1px; - &:hover {background-color: transparentize($fg_color, 0.7);} - &:active {background-color: transparentize($fg_color, 0.8);} - - > StIcon { icon-size: $base_icon_size; } - } - - // body - .message-body {color: darken($fg_color, 10%);} } // URLs in messages @@ -138,14 +178,14 @@ /* Media Controls */ .message-media-control { - padding: 0 $base_padding*3; - margin: $base_padding*2 0; + padding: 0 $base_padding * 3; border-radius: $base_border_radius; color: $fg_color; + border: 1px solid transparent; - @if $is_highcontrast { - border: 1px solid $hc_inset_color; - margin: $base_padding*2 2px; + @if $contrast == 'high' { + border-color: $hc_inset_color; + margin: $base_padding * 2 2px; } // colors are lightened since the media controls are in a card @@ -161,30 +201,22 @@ &:insensitive { color: lighten($insensitive_fg_color, 5%); - @if $is_highcontrast { + + @if $contrast == 'high' { border-color: transparent; } } - // fix margin for last button - &:last-child:ltr { margin-right: $base_margin*3; } - &:last-child:rtl { margin-left: $base_margin*3; } - & StIcon { icon-size: $base_icon_size; } } -// album-art -.media-message-cover-icon { - icon-size: $base_icon_size*3 !important; // 48px - border-radius: $base_border_radius; +.media-message { + // album-art + .message-icon { + border-radius: $base_border_radius !important; - // when there is no artwork - &.fallback { - color: darken($fg_color, 17%); - background-color: $bg_color; - border: 1px solid transparent; - border-radius: $base_border_radius; - icon-size: $large_icon_size !important; // 32px - padding: ($base_padding*2 + 2); // 16px + &.message-themed-icon { + icon-size: $large_icon_size !important; // 32px + } } } diff --git a/gnome-shell-sass/widgets/_misc.scss b/gnome-shell-sass/widgets/_misc.scss index 8c127de..35f9dc9 100644 --- a/gnome-shell-sass/widgets/_misc.scss +++ b/gnome-shell-sass/widgets/_misc.scss @@ -7,21 +7,21 @@ // User icon .user-icon { background-size: contain; + border-radius: $forced_circular_radius; + icon-size: $base_icon_size * 4; + + background-color: transparentize($osd_fg_color,0.95); color: $osd_fg_color; - border-radius: 99px; - icon-size: $base_icon_size * 4; // 64px & StIcon { - background-color: transparentize($osd_fg_color,0.95); - border-radius: 99px; - padding: $base_padding * 2 ; // 12px - width: $base_icon_size * 2.5; height: $base_icon_size * 2.5; // 40px; + padding: $base_padding * 2; } &.user-avatar { box-shadow:inset 0 0 0 1px transparentize($osd_fg_color, 0.9); - @if $is_highcontrast { - box-shadow:inset 0 0 0 1px $hc_inset_color; + + @if $contrast == 'high' { + @include draw_hc_inset(); } } } diff --git a/gnome-shell-sass/widgets/_notifications.scss b/gnome-shell-sass/widgets/_notifications.scss index edf66c8..0601425 100644 --- a/gnome-shell-sass/widgets/_notifications.scss +++ b/gnome-shell-sass/widgets/_notifications.scss @@ -11,50 +11,15 @@ $notification_banner_width: 34em; border-radius: $modal_radius; margin: $base_margin; - .notification-actions { - spacing: 0; - } - - .notification-button { - @extend %bubble_button; + @if $contrast == 'high' { + @include draw_hc_inset(); } } -// counter -.summary-source-counter { - font-size: $base_font_size - 1pt; - font-weight: bold; - height: 1.6em; - width: 1.6em; - -shell-counter-overlap-x: 3px; - -shell-counter-overlap-y: 3px; - background-color: $selected_bg_color; - color: $selected_fg_color; - border: 2px solid $fg_color; - box-shadow: 0 2px 2px rgba(0,0,0,0.5); - border-radius: 0.9em; // should be 0.8 but whatever; wish I could do 50%; +.notification-buttons-bin { + spacing: 0; } -// chat bubbles -.chat-body { spacing: 5px; } -.chat-response { margin: 5px; } -.chat-log-message { color: darken($fg_color,10%); } -.chat-new-group { padding-top: 1em; } -.chat-received { - padding-left: 4px; - &:rtl { padding-left: 0px; padding-right: 4px; } -} - -.chat-sent { - padding-left: 18pt; - color: lighten($fg_color, 15%); - &:rtl { padding-left: 0; padding-right: 18pt; } -} - -.chat-meta-message { - padding-left: 4px; - @include fontsize($base_font_size - 2); - font-weight: bold; - color: lighten($fg_color,18%); - &:rtl { padding-left: 0; padding-right: 4px; } +.notification-button { + @extend %bubble_button; } diff --git a/gnome-shell-sass/widgets/_osd.scss b/gnome-shell-sass/widgets/_osd.scss index a8d1a55..55cf44a 100644 --- a/gnome-shell-sass/widgets/_osd.scss +++ b/gnome-shell-sass/widgets/_osd.scss @@ -7,43 +7,45 @@ $osd_levelbar_height:6px; @extend %heading; text-align: center; font-weight: bold; - spacing: $base_padding * 2; // 12px + spacing: $base_padding * 2; padding: $base_padding * 2 $base_padding * 3; - & > * { spacing: 8px; } + & > * { spacing: $base_margin * 2; } margin-bottom: 4em; - StIcon { icon-size:$large_icon_size;} + StIcon { icon-size: $large_icon_size;} StLabel { - &:ltr { margin-right: 6px; } - &:rtl { margin-left: 6px; } + &:ltr { margin-right: $base_padding; } + &:rtl { margin-left: $base_padding; } } .level { - margin-bottom: 4px; - &:first-child { margin-bottom: 0px; } + margin-bottom: $base_margin; + &:first-child { margin-bottom: 0; } - height: $osd_levelbar_height; - min-width:$base_icon_size * 10; + min-width: 160px; -barlevel-height: $osd_levelbar_height; -barlevel-background-color: transparentize($osd_fg_color, if($variant=='light', 0.7, 0.9)); -barlevel-active-background-color: $osd_fg_color; -barlevel-overdrive-color: $destructive_color; - -barlevel-overdrive-separator-width: 3px; - &:ltr { margin-right: 6px; } - &:rtl { margin-left: 6px; } + -barlevel-overdrive-separator-width: $base_padding * 0.5; + &:ltr { margin-right: $base_padding; } + &:rtl { margin-left: $base_padding; } } } // Monitor number label -.osd-monitor-label { - @extend %osd_panel; +.osd-monitor-label { + background-color: $selected_bg_color; + color: $selected_fg_color; border-radius: $modal_radius; font-size: 3em; font-weight: bold; + font-feature-settings: "tnum"; margin: $base_margin * 3; + padding: $base_padding * 2; text-align: center; - min-width: 1.3em; + min-width: 1.5em; } /* Pad OSD */ diff --git a/gnome-shell-sass/widgets/_overview.scss b/gnome-shell-sass/widgets/_overview.scss index 301875e..117213e 100644 --- a/gnome-shell-sass/widgets/_overview.scss +++ b/gnome-shell-sass/widgets/_overview.scss @@ -9,5 +9,5 @@ } .overview-controls { - padding-bottom: 32px; + padding-bottom: $base_margin * 8; } diff --git a/gnome-shell-sass/widgets/_panel.scss b/gnome-shell-sass/widgets/_panel.scss index 1ad3a18..9b455a0 100644 --- a/gnome-shell-sass/widgets/_panel.scss +++ b/gnome-shell-sass/widgets/_panel.scss @@ -1,13 +1,12 @@ /* Top Bar */ // a.k.a. the panel -$privacy_indicator_color: $red_3; +$privacy_indicator_color: if($variant == 'light', $orange_4, $red_3); +$recording_indicator_color: $red_3; -$panel_bg_color: if($variant == 'light', $light_3, $dark_4); -$panel_fg_color: if($variant == 'light', $fg_color, darken($fg_color, 5%)); -$panel_border_color: if($variant == 'light', darken($panel_bg_color, 2%), $panel_bg_color); +$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_system_fg_color: $system_fg_color; // always light for lockscreen, overview and other transparent panels $panel_height: 2.2em; $panel_transition_duration: 250ms; // same as the overview transition duration @@ -17,44 +16,49 @@ $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 { - @include panel_button($bg: $panel_fg_color, $border_radius: 3px); + @include panel_button(); -natural-hpadding: 6px; -minimum-hpadding: 4px; // status area icons .system-status-icon { - icon-size: $base_icon_size; - padding: ($base_padding - 1px) 0px ($base_padding - 1px) 0px; + icon-size: $scalable_icon_size; + padding: 0; margin: 0 $base_margin; } - .panel-status-indicators-box .system-status-icon, - .panel-status-menu-box .system-status-icon { - margin: 0; - } - // app menu icon .app-menu-icon { -st-icon-style: symbolic; // dimensions of the icon are hardcoded } + // reduce margin between icons in combined menu + .panel-status-menu-box, + .panel-status-indicators-box { + spacing: $base_margin; + + > .system-status-icon { + padding: 0; + } + } + &#panelActivities { -natural-hpadding: 10px; -minimum-hpadding: 8px; & StBoxLayout { + padding: 0 $scaled_padding * 0.5; // use em padding to keep proportion spacing: 5px; } & .workspace-dot { - border-radius: 999px; - min-width: 8px; - min-height: 8px; + border-radius: $forced_circular_radius; + min-width: $scalable_icon_size * 0.5; + min-height: $scalable_icon_size * 0.5; background-color: $panel_fg_color; } } @@ -63,11 +67,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration &.screen-recording-indicator, &.screen-sharing-indicator { StBoxLayout { - spacing: $base_padding; + spacing: $scaled_padding; } StIcon { - icon-size: $base_icon_size; + icon-size: $scalable_icon_size; &:first-child { margin-left: 3px; @@ -76,11 +80,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration } &.screen-recording-indicator { - @include panel_button($screenshot_ui_button_red, $flat: false); + @include panel_button($bg:$recording_indicator_color, $fg:$_base_color_light, $style: filled); } &.screen-sharing-indicator { - @include panel_button($privacy_indicator_color, $flat: false); + @include panel_button($bg:$privacy_indicator_color, $fg:$_base_color_light, $style: filled); } // clock @@ -88,7 +92,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration // The clock display needs to have the background on .clock because // we want to exclude the do-not-disturb indicator from the background // see _drawing.scss for override details - @include panel_button($highlighted_child: true, $child_class:".clock", $border_radius: 3px); + @include panel_button($highlighted_child: true, $child_class: '.clock'); -natural-hpadding: 0px; -minimum-hpadding: 0px; padding-left: 0px; @@ -97,45 +101,66 @@ $panel_transition_duration: 250ms; // same as the overview transition duration .clock { // the highlighted child } + + .messages-indicator { + icon-size: $scalable_icon_size; + } } } - // transparent panel on lock & login screens + // transparent panel on overview, lock & login screens + &:overview, &.unlock-screen, - &.login-screen, - &:overview { + &.login-screen { background-color: transparent; - box-shadow: none; + // unfortunate duplication to keep indicator style in these states .panel-button { - @include panel_button($panel_system_fg_color, $fg:$panel_system_fg_color, $border_radius: 3px); + &.screen-recording-indicator { + @include panel_button($bg:$recording_indicator_color, $fg:$_base_color_light, $style: filled); + } + + &.screen-sharing-indicator { + @include panel_button($bg:$privacy_indicator_color, $fg:$_base_color_light, $style: filled); + } + } + } + + // use transparent text styles for lock & login screen panels + &.unlock-screen, + &.login-screen { + .panel-button { + @include panel_button($fg:$transparent_panel_fg_color); + + // clock + &.clock-display { + @include panel_button($fg:$transparent_panel_fg_color, $highlighted_child: true, $child_class: '.clock'); + } + } + } + + // use system text styles for overview panel + &:overview { + .panel-button { + @include panel_button($fg:$system_panel_fg_color); &#panelActivities .workspace-dot { - background-color: $panel_system_fg_color; + background-color: $system_panel_fg_color; } // clock &.clock-display { - @include panel_button($panel_system_fg_color, $fg:$panel_system_fg_color, $highlighted_child: true, $child_class:".clock"); - } - - // unfortunate duplication so these indicators have styles - &.screen-recording-indicator { - @include panel_button($screenshot_ui_button_red, $flat: false); - } - - &.screen-sharing-indicator { - @include panel_button($privacy_indicator_color, $flat: false); + @include panel_button($fg:$system_panel_fg_color, $highlighted_child: true, $child_class: '.clock'); } } } .panel-status-indicators-box { - spacing: 2px; padding-right: 2px; padding-left: 3px; } + .panel-status-indicators-box, .panel-status-menu-box { spacing: 2px; } @@ -158,13 +183,13 @@ $panel_transition_duration: 250ms; // same as the overview transition duration // App Menu #appMenu { - spacing: $base_padding; + spacing: $scaled_padding; .label-shadow { color: transparent; } } #appMenu .panel-status-menu-box { - padding: 0 $base_padding; - spacing: $base_padding; + padding: 0 $scaled_padding; + spacing: $scaled_padding; } diff --git a/gnome-shell-sass/widgets/_popovers.scss b/gnome-shell-sass/widgets/_popovers.scss index a6ed06d..7f3df1a 100644 --- a/gnome-shell-sass/widgets/_popovers.scss +++ b/gnome-shell-sass/widgets/_popovers.scss @@ -2,13 +2,13 @@ $menu_bg_color: $bg_color; $menuitem_bg_color: lighten($menu_bg_color, 4%); -$menuitem_border_radius: $base_border_radius*1.5; +$menuitem_border_radius: $base_border_radius * 1.5; $submenu_bg_color: lighten($menu_bg_color, 7%); // the popover itself .popup-menu-boxpointer { - -arrow-rise: $base_margin+2px; // distance from the panel & screen edge + -arrow-rise: $base_padding; // distance from the panel & screen edge } // container of the popover menu @@ -26,7 +26,7 @@ $submenu_bg_color: lighten($menu_bg_color, 7%); .popup-menu-content { padding: $base_padding; background-color: $bg_color; - border-radius: $modal_radius*1.25; + border-radius: $modal_radius * 1.25; border: 1px solid $outer_borders_color; box-shadow: 0 2px 4px 0 $shadow_color; } @@ -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; } @@ -67,22 +67,23 @@ $submenu_bg_color: lighten($menu_bg_color, 7%); // symbolic icons in popover .popup-menu-arrow, .popup-menu-icon { - icon-size: 16px !important; // for some reason the variable doesn't work here + icon-size: $scalable_icon_size; } // popover submenus .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 .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 { @@ -103,8 +104,8 @@ $submenu_bg_color: lighten($menu_bg_color, 7%); // container for radio and check boxes .popup-menu-ornament { - icon-size: $base_icon_size !important; - width: $base_icon_size; + icon-size: $scalable_icon_size !important; + width: $scalable_icon_size; } // separator @@ -144,8 +145,8 @@ $submenu_bg_color: lighten($menu_bg_color, 7%); // "Open Windows" label > StLabel { @extend %caption_heading; - &:ltr {margin-right: $base_margin*2;} - &:rtl {margin-left: $base_margin*2;} + &:ltr {margin-right: $base_margin * 2;} + &:rtl {margin-left: $base_margin * 2;} } } } diff --git a/gnome-shell-sass/widgets/_quick-settings.scss b/gnome-shell-sass/widgets/_quick-settings.scss index 9189ac8..c43081b 100644 --- a/gnome-shell-sass/widgets/_quick-settings.scss +++ b/gnome-shell-sass/widgets/_quick-settings.scss @@ -1,45 +1,46 @@ .quick-settings { - padding: $base_padding*3; - border-radius: $modal_radius*2.25; + padding: $base_padding * 3; + border-radius: $modal_radius * 2.25; .icon-button, .button { - padding: $base_padding*1.75; + padding: $base_padding * 1.75; } } .quick-settings-grid { - spacing-rows: $base_padding*2; - spacing-columns: $base_padding*2; + spacing-rows: $base_padding * 2; + spacing-columns: $base_padding * 2; } .quick-toggle, .quick-menu-toggle { - border-radius: 99px; + border-radius: $forced_circular_radius; min-width: 12em; max-width: 12em; - min-height: 48px; + min-height: $scalable_icon_size * 3; // use icon size so the button scales border:none; } .quick-toggle { - &:checked { @include button(default, $c:$selected_bg_color); } + background-color: none; + &:checked { @extend %default_button;} - & > StBoxLayout { spacing: $base_padding*1.5; } + & > StBoxLayout { spacing: $base_padding * 1.5; } /* Move padding into the box; this is to allow menu arrows to extend to the border */ &.button { padding: 0; } - & > StBoxLayout { padding: 0 $base_padding*2; } - &:ltr > StBoxLayout { padding-left: $base_padding*2.5; } - &:rtl > StBoxLayout { padding-right: $base_padding*2.5; } + & > StBoxLayout { padding: 0 $base_padding * 2; } + &:ltr > StBoxLayout { padding-left: $base_padding * 2.5; } + &:rtl > StBoxLayout { padding-right: $base_padding * 2.5; } .quick-toggle-title { font-weight: bold; } & StBoxLayout > .quick-toggle-subtitle { + @extend %caption; font-weight: normal; - font-size: 12px; } - .quick-toggle-icon { icon-size: $base_icon_size; } + .quick-toggle-icon { icon-size: $scalable_icon_size; } } .quick-menu-toggle { @@ -47,31 +48,31 @@ min-width: auto; max-width: auto; - &:ltr { border-radius: 99px 0 0 99px; } - &:ltr > StBoxLayout { padding-right: $base_padding*1.5; } - &:rtl { border-radius: 0 99px 99px 0; } - &:rtr > StBoxLayout { padding-left: $base_padding*1.5; } + &:ltr { border-radius: $forced_circular_radius 0 0 $forced_circular_radius; } + &:ltr > StBoxLayout { padding-right: $scaled_padding * 1.5; } + &:rtl { border-radius: 0 $forced_circular_radius $forced_circular_radius 0; } + &:rtr > StBoxLayout { padding-left: $scaled_padding * 1.5; } - &:ltr:last-child { border-radius: 99px; } - &:rtl:last-child { border-radius: 99px; } + &:ltr:last-child { border-radius: $forced_circular_radius; } + &:rtl:last-child { border-radius: $forced_circular_radius; } } & .quick-toggle-arrow { - padding: $base_padding $base_padding*1.75; + padding: $scaled_padding $scaled_padding * 1.75; border-width: 0; border-color: transparentize($fg_color, .75); &:checked { - @include button(default, $c:$selected_bg_color); + @extend %default_button; border-color: $selected_borders_color; } &:ltr { - border-radius: 0 99px 99px 0; + border-radius: 0 $forced_circular_radius $forced_circular_radius 0; border-left-width: 1px; } &:rtl { - border-radius: 99px 0 0 99px; + border-radius: $forced_circular_radius 0 0 $forced_circular_radius; border-right-width: 1px; } } @@ -84,33 +85,36 @@ .slider-bin { &:focus {@include button(focus);} - min-height: 16px; // slider size padding: $base_padding; - border-radius: 99px; + border-radius: $forced_circular_radius; } } .quick-toggle-menu { - @include card; + @extend %card; - // override some card styles - background-color: $bg_color !important; - color: $fg_color !important; + &:insensitive { + // override insensitive style on submenu + @include button(normal); + } - border-radius: $base_border_radius*3; - padding: $base_padding*2; - margin: $base_padding*2 $base_padding*3 0; + border-radius: $base_border_radius * 3; - .popup-menu-item > StIcon { -st-icon-style: symbolic; } + margin: $base_padding * 2 $base_padding * 3 0; + + .popup-menu-item > StIcon { + -st-icon-style: symbolic; + icon-size: $scalable_icon_size; + } & .header { - spacing-rows: 0.5 * $base_padding; - spacing-columns: $base_padding*2; - padding-bottom: 2 * $base_padding; + spacing-rows: $base_padding * 0.5; + spacing-columns: $base_padding * 2; + padding-bottom: $base_padding * 2; & .icon { - icon-size: $base_icon_size*1.5; // a non-standard symbolic size but ok - border-radius: 999px; + icon-size: $medium_scalable_icon_size; + border-radius: $forced_circular_radius; padding: 1.5 * $base_padding; background-color: transparentize($fg_color, 0.8); @@ -118,6 +122,14 @@ background-color: $selected_bg_color; color: $selected_fg_color; } + + // draw hc outline + @if $contrast == 'high' { + @include draw_hc_inset(); + &.active { + @include draw_hc_inset($no_inset: true); + } + } } & .title { @@ -134,7 +146,7 @@ } .quick-settings-system-item { - & > StBoxLayout { spacing: 2 * $base_padding; } + & > StBoxLayout { spacing: $base_padding * 2; } & .power-item { min-height: 0; @@ -148,7 +160,7 @@ } .nm-network-item { - .wireless-secure-icon { icon-size: 0.5 * $base_icon_size; } + .wireless-secure-icon { icon-size: $scalable_icon_size * 0.5; } // half-size symbolic } .bt-device-item { @@ -164,23 +176,19 @@ .device-subtitle { color: transparentize($fg_color, 0.5); } -.keyboard-brightness-item .slider { - min-height: 16px; -} - .keyboard-brightness-level { spacing: $base_padding; - .button:checked { @include button(default, $c:$selected_bg_color); } + .button:checked { @extend %default_button; } } // background apps .background-apps-quick-toggle { - min-height: 40px; + min-height: to_em(40px); background-color: transparent; - & StIcon { icon-size: $base_icon_size !important; } + & StIcon { icon-size: $scalable_icon_size !important; } } .background-app-item { @@ -190,9 +198,14 @@ icon-size: $large_icon_size !important; -st-icon-style: regular !important; } - & .close-button { - @extend .icon-button; + & .icon-button { padding: $base_padding; + + // override some background colors since it's a button on an already styled background + // FIXME: may need a generic drawing method for button in menu item in future + background-color: transparentize($fg_color, 0.87); + &:hover { background-color: transparentize($fg_color, 0.78);} + &:active { background-color: transparentize($fg_color, 0.69);} } & .spinner { padding: $base_padding; diff --git a/gnome-shell-sass/widgets/_screenshot.scss b/gnome-shell-sass/widgets/_screenshot.scss index 69edb05..05ecd95 100644 --- a/gnome-shell-sass/widgets/_screenshot.scss +++ b/gnome-shell-sass/widgets/_screenshot.scss @@ -1,24 +1,15 @@ // Screenshot UI -.icon-label-button-container { - spacing: $base_padding; - @extend %caption; - StIcon { icon-size: 32px;} -} - -$screenshot_ui_panel_padding: $base_padding*3; -$screenshot_ui_shot_cast_margin: 21px; -$screenshot_ui_panel_border_radius: $modal_radius + $screenshot_ui_shot_cast_margin; -$screenshot_ui_shot_cast_spacing: 3px; - -$screenshot_ui_button_red: $error_color; +$screenshot_ui_panel_padding: $base_padding * 3; +$screenshot_ui_panel_border_radius: $modal_radius * 2; +$screenshot_ui_button_red: $red_4; .screenshot-ui-panel { @extend %osd_panel; border-radius: $screenshot_ui_panel_border_radius; padding: $screenshot_ui_panel_padding; // Reduce the bottom padding a little to accommodate the large capture button. - padding-bottom: $screenshot_ui_panel_padding - 6px; + padding-bottom: $screenshot_ui_panel_padding - $base_padding; margin-bottom: 4em; spacing: $base_padding * 2; } @@ -26,36 +17,43 @@ $screenshot_ui_button_red: $error_color; .screenshot-ui-close-button { @extend .window-close; // copy window close button padding: $base_padding !important; // but with more padding - margin-top: 12px; + margin-top: $base_margin * 3; box-shadow: 0 2px 4px 0 $shadow_color; - &.left { margin-left: 12px;} - &.right { margin-right: 12px;} + &.left { margin-left: $base_margin * 3;} + &.right { margin-right: $base_margin * 3;} } .screenshot-ui-type-button { @extend %osd_button_flat; min-width: 48px; - padding: $base_padding * 2 $base_padding * 3 !important; + padding: $base_padding * 2 $base_padding * 3; border-radius: $screenshot_ui_panel_border_radius - $screenshot_ui_panel_padding; + + .icon-label-button-container { + @extend %caption; + spacing: $scaled_padding; + + > StIcon { icon-size: $large_icon_size;} + } } .screenshot-ui-capture-button { - width: 36px; - height: 36px; - border-radius: 99px; + width: $large_icon_size; + height: $large_icon_size; + border-radius: $forced_circular_radius; border: 4px $osd_fg_color; - padding: 4px; + padding: $base_margin; .screenshot-ui-capture-button-circle { background-color: $osd_fg_color; transition-duration: 200ms; &:hover, &:focus { background-color: $hover_bg_color;} - border-radius: 99px; + border-radius: $forced_circular_radius; } &:hover, &:focus { .screenshot-ui-capture-button-circle { - background-color: darken($osd_fg_color, 15%); + background-color: darken($osd_fg_color, 20%); } } @@ -84,32 +82,36 @@ $screenshot_ui_button_red: $error_color; .screenshot-ui-shot-cast-container { background-color: transparentize($osd_fg_color,0.9); - border-radius: $modal_radius; - padding: $screenshot_ui_shot_cast_spacing; - spacing: $screenshot_ui_shot_cast_spacing; + border-radius: $forced_circular_radius; + padding: $base_padding * 0.5; + spacing: $base_padding * 0.5; - &:ltr { margin-left: $screenshot_ui_shot_cast_margin - $screenshot_ui_panel_padding;} - &:rtl { margin-right: $screenshot_ui_shot_cast_margin - $screenshot_ui_panel_padding;} + @if $contrast == 'high' { + @include draw_hc_inset(); + } } +// non-standard button style .screenshot-ui-shot-cast-button { - padding: $base_padding $base_padding*2; + padding: $base_padding $base_padding * 2; background-color: transparent; + border-radius: $forced_circular_radius; + + @if $contrast == 'high' { + @include draw_hc_inset(); + } + + > StIcon { icon-size: $base_icon_size;} + &:hover, &:focus { background-color: transparentize($osd_fg_color, 0.8);} &:active { background-color: transparentize($osd_fg_color, .5);} &:checked { background-color: $osd_fg_color; color: $osd_bg_color;} &:insensitive { color: transparentize($osd_fg_color, 0.5);} - - border-radius: $modal_radius - $screenshot_ui_shot_cast_spacing; - - StIcon { icon-size: $base_icon_size;} } .screenshot-ui-show-pointer-button { @extend %osd_button_flat; - border-radius: 99px; - padding: $base_padding * 2 !important; - StIcon { icon-size: $base_icon_size;} + @extend .icon-button; } .screenshot-ui-area-indicator-shade { @@ -127,15 +129,15 @@ $screenshot_ui_button_red: $error_color; } .screenshot-ui-area-selector-handle { - border-radius: 99px; + border-radius: $forced_circular_radius; background-color: white; box-shadow: 0 1px 3px 2px $shadow_color; - width: 24px; - height: 24px; + width: $medium_icon_size; + height: $medium_icon_size; } .screenshot-ui-window-selector { - background-color: $system_bg_color; + background-color: $system_base_color; .screenshot-ui-window-selector-window-container { margin: 100px; @@ -158,9 +160,9 @@ $screenshot_ui_button_red: $error_color; .screenshot-ui-window-selector-check { transition-duration: 200ms; color: transparent; - border-radius: 99px; + border-radius: $forced_circular_radius; border-width: 12px; - icon-size: 24px; + icon-size: $medium_icon_size; } .screenshot-ui-window-selector-window { @@ -197,5 +199,5 @@ $screenshot_ui_button_red: $error_color; .screenshot-ui-tooltip { @extend %tooltip; text-align: center; - -y-offset: 24px; + -y-offset: $base_margin * 6; } diff --git a/gnome-shell-sass/widgets/_search-entry.scss b/gnome-shell-sass/widgets/_search-entry.scss index 8b766ba..1f24d3c 100644 --- a/gnome-shell-sass/widgets/_search-entry.scss +++ b/gnome-shell-sass/widgets/_search-entry.scss @@ -1,15 +1,15 @@ // Search entry .search-entry { - border-radius: 99px; - margin-top: $base_padding*2; + border-radius: $forced_circular_radius; + margin-top: $base_padding * 2; margin-bottom: $base_padding; width: 24em; @extend %system_entry; .search-entry-icon { - icon-size: $base_icon_size; + icon-size: $scalable_icon_size; margin-top: 2px; // center vertically - padding: 0 4px; + padding: 0 $base_margin; } } diff --git a/gnome-shell-sass/widgets/_search-results.scss b/gnome-shell-sass/widgets/_search-results.scss index b281ba5..568dbbd 100644 --- a/gnome-shell-sass/widgets/_search-results.scss +++ b/gnome-shell-sass/widgets/_search-results.scss @@ -6,17 +6,17 @@ } #searchResultsContent { - max-width: 1072px; + max-width: 1044px; } // search results sections "the boxes" .search-section { // This should be equal to #searchResultsContent spacing - spacing: $base_padding*3; + spacing: $base_padding * 3; // separator (unstyled) .search-section-separator { - height: $base_margin*2; // use it as a spacer + height: $base_margin * 2; // use it as a spacer background-color: transparent; } } @@ -25,14 +25,19 @@ .search-section-content { background-color: $system_overlay_bg_color; color: $system_fg_color; - border-radius: $modal_radius*1.5; - padding: $base_padding*2; - margin:0 $base_margin*3; + border-radius: $modal_radius * 1.5; + padding: $base_padding * 2; + margin:0 $base_margin * 3; + border: 2px solid transparent; + + @if $contrast == 'high' { + border-color: $hc_inset_color; + } } %search_section_content_item { - @include tile_button($system_fg_color); - border-radius: $base_border_radius+3px; + @include tile_button($bg:$system_overlay_bg_color); + border-radius: $base_border_radius * 1.65; } // "no results" text @@ -42,13 +47,13 @@ } .grid-search-results { - spacing: $base_padding*5; - margin:0 $base_margin*3; + spacing: $base_padding * 5; + margin:0 $base_margin * 3; } // Search results with icons .grid-search-result { - @extend .app-well-app; + @extend .overview-tile; } // search result provider @@ -86,11 +91,18 @@ // list item title (with leading icon) .list-search-result-title { spacing: $base_padding * 2; - // font-weight: bold; + + @if $contrast == 'high' { + font-weight: bold; + } } // list item description .list-search-result-description { color: $system_insensitive_fg_color; + + @if $contrast == 'high' { + color: $system_fg_color; + } } } diff --git a/gnome-shell-sass/widgets/_slider.scss b/gnome-shell-sass/widgets/_slider.scss index 40ac346..f708582 100644 --- a/gnome-shell-sass/widgets/_slider.scss +++ b/gnome-shell-sass/widgets/_slider.scss @@ -1,12 +1,12 @@ /* Slider */ -$slider_size: 16px; +$slider_size: $scalable_icon_size; .slider { // slider trough -barlevel-height: 4px; -barlevel-background-color: transparentize($fg_color, 0.8); //background of the trough - -barlevel-border-width: 2px; + -barlevel-border-width: 2px; -barlevel-border-color: transparent; // trough border color // fill style -barlevel-active-background-color: $selected_bg_color; @@ -19,4 +19,9 @@ $slider_size: 16px; -slider-handle-radius: $slider_size * 0.5; // half the size of the size -slider-handle-border-width: 0; -slider-handle-border-color: transparent; // because 0 width + + // hc style + @if $contrast == 'high' { + -barlevel-background-color: transparentize($fg_color, 0.6); + } } diff --git a/gnome-shell-sass/widgets/_switcher-popup.scss b/gnome-shell-sass/widgets/_switcher-popup.scss index 5136c3c..bf534b0 100644 --- a/gnome-shell-sass/widgets/_switcher-popup.scss +++ b/gnome-shell-sass/widgets/_switcher-popup.scss @@ -1,8 +1,8 @@ /* App Switcher */ // same as dash -$switcher_padding: $base_padding*2; - +$switcher_padding: $base_padding * 2; +$switcher_radius: $modal_radius + $switcher_padding; // the full screen container of the switcher .switcher-popup { @@ -14,7 +14,7 @@ $switcher_padding: $base_padding*2; .switcher-list { @extend %osd_panel; padding: $switcher_padding; - border-radius: $modal_radius+$switcher_padding; + border-radius: $switcher_radius; box-shadow: 0 8px 8px 0 $shadow_color; // container for items in list @@ -24,11 +24,19 @@ $switcher_padding: $base_padding*2; // each item in the list .item-box { - @include tile_button($osd_fg_color); - // override over style so mouse doesn't steal focus + @include tile_button($fg:$osd_fg_color, $bg:$osd_bg_color); + // override %tile style so mouse doesn't steal focus &:hover {background: none;} - @if $is_highcontrast { - box-shadow: inset 0 0 0 999px transparentize($hc_inset_color,0.2); + + // brighter than normal selected style + &:selected { + background-color: transparentize($osd_fg_color, 0.8); + } + + @if $contrast == 'high' { + &:selected { + background-color: transparentize($osd_fg_color, 0.7); + } } } diff --git a/gnome-shell-sass/widgets/_switches.scss b/gnome-shell-sass/widgets/_switches.scss index b6d8fe8..ef8a7b6 100644 --- a/gnome-shell-sass/widgets/_switches.scss +++ b/gnome-shell-sass/widgets/_switches.scss @@ -2,7 +2,7 @@ // these are equal to the size of the SVG assets $switch_height: 26px; -$switch_width: 48px; +$switch_width: 46px; .toggle-switch { color: $fg_color; @@ -10,7 +10,9 @@ $switch_width: 48px; width: $switch_width; background-size: contain; background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/toggle-off-light.svg"),url("resource:///org/gnome/shell/theme/toggle-off.svg")); - &:checked { + &: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")); } + + & StIcon {icon-size: $base_icon_size;} } diff --git a/gnome-shell-sass/widgets/_window-picker.scss b/gnome-shell-sass/widgets/_window-picker.scss index b46366a..c500a0a 100644 --- a/gnome-shell-sass/widgets/_window-picker.scss +++ b/gnome-shell-sass/widgets/_window-picker.scss @@ -1,18 +1,10 @@ /* Window Picker */ - -$window_picker_spacing: $base_padding; // 6px -$window_picker_padding: $base_padding * 2; // 12px - -$window_thumbnail_label_color: transparentize($system_bg_color, 0.4); - $window_close_button_color: transparentize(lighten($system_bg_color, 7%), .02); -$window_close_button_size: 30px; -$window_close_button_padding: 3px; // Window picker .window-picker { // Space between window thumbnails - spacing: $window_picker_spacing; + spacing: $base_padding; } // Window titles @@ -24,14 +16,19 @@ $window_close_button_padding: 3px; .window-close { background-color: $window_close_button_color; color: $system_fg_color; - border-radius: 99px; + border-radius: $forced_circular_radius; box-shadow: 0 2px 4px 0 $shadow_color; - padding: $window_close_button_padding; - height: $window_close_button_size; - width: $window_close_button_size; + padding: $base_padding * 0.5; + height: $large_icon_size; + width: $large_icon_size; transition-duration: 100ms; + border: 2px solid transparent; - & StIcon { icon-size: 24px; } // uses non standard icon size + @if $contrast == 'high' { + border-color: $hc_inset_color; + } + + & StIcon { icon-size: $medium_icon_size; } &:hover { background-color: lighten($window_close_button_color, 7%); @@ -41,9 +38,6 @@ $window_close_button_padding: 3px; background-color: lighten($window_close_button_color, 13%); } - @if $is_highcontrast { - border:2px solid $outer_borders_color; - } } .workspace-background { diff --git a/gnome-shell-sass/widgets/_workspace-switcher.scss b/gnome-shell-sass/widgets/_workspace-switcher.scss index f06130b..f3e069f 100644 --- a/gnome-shell-sass/widgets/_workspace-switcher.scss +++ b/gnome-shell-sass/widgets/_workspace-switcher.scss @@ -1,6 +1,6 @@ /* Workspace Switcher */ -$ws_indicator_height: $large_icon_size; +$ws_indicator_height: 48px; $ws_dot_active: $ws_indicator_height / 3; $ws_dot_inactive: $ws_indicator_height / 6; diff --git a/gnome-shell-sass/widgets/_workspace-thumbnails.scss b/gnome-shell-sass/widgets/_workspace-thumbnails.scss index 9e58e92..e9b9cea 100644 --- a/gnome-shell-sass/widgets/_workspace-thumbnails.scss +++ b/gnome-shell-sass/widgets/_workspace-thumbnails.scss @@ -9,10 +9,10 @@ .workspace-thumbnail { color: $system_fg_color; background-color: lighten($system_bg_color, 10%); - border-radius: $base_border_radius*0.5; + border-radius: $base_border_radius * 0.5; border: 1px solid transparent; - @if $is_highcontrast { + @if $contrast == 'high' { border-color: $hc_inset_color; } } diff --git a/meson.build b/meson.build index 0d28efd..8d01ae8 100644 --- a/meson.build +++ b/meson.build @@ -17,7 +17,6 @@ theme_sources = files([ 'gnome-shell-sass/widgets/_dash.scss', 'gnome-shell-sass/widgets/_dialogs.scss', 'gnome-shell-sass/widgets/_entries.scss', - 'gnome-shell-sass/widgets/_hotplug.scss', 'gnome-shell-sass/widgets/_ibus-popup.scss', 'gnome-shell-sass/widgets/_keyboard.scss', 'gnome-shell-sass/widgets/_login-lock.scss', diff --git a/patches/gnome-45.0-dark-theme.patch b/patches/gnome-45.0-dark-theme.patch new file mode 100644 index 0000000..35163ad --- /dev/null +++ b/patches/gnome-45.0-dark-theme.patch @@ -0,0 +1,265 @@ +From de447719bc49c92bb8f1a04115e4533b2430a524 Mon Sep 17 00:00:00 2001 +From: Kevin MacMartin +Date: Mon, 25 Mar 2024 13:06:47 -0400 +Subject: [PATCH] Dark theme + +--- + ...ight.scss => gnome-shell-dark-laptop.scss} | 3 +- + data/theme/gnome-shell-dark.scss | 2 + + data/theme/gnome-shell-high-contrast.scss | 33 ------------- + data/theme/gnome-shell-sass/_drawing.scss | 6 +-- + data/theme/gnome-shell-sass/_palette.scss | 10 ++-- + .../widgets/_corner-ripple.scss | 2 +- + .../gnome-shell-sass/widgets/_panel.scss | 49 ++++++++++++++----- + 7 files changed, 50 insertions(+), 55 deletions(-) + rename data/theme/{gnome-shell-light.scss => gnome-shell-dark-laptop.scss} (83%) + delete mode 100644 data/theme/gnome-shell-high-contrast.scss + +diff --git a/data/theme/gnome-shell-light.scss b/data/theme/gnome-shell-dark-laptop.scss +similarity index 83% +rename from data/theme/gnome-shell-light.scss +rename to data/theme/gnome-shell-dark-laptop.scss +index ae6fce7dd..e603503f6 100644 +--- a/data/theme/gnome-shell-light.scss ++++ b/data/theme/gnome-shell-dark-laptop.scss +@@ -1,5 +1,6 @@ +-$variant: 'light'; ++$variant: 'dark'; + ++$laptop: true; + @import "gnome-shell-sass/_colors"; //use gtk colors + @import "gnome-shell-sass/_drawing"; + @import "gnome-shell-sass/_common"; +diff --git a/data/theme/gnome-shell-dark.scss b/data/theme/gnome-shell-dark.scss +index 8ee499912..294ac6463 100644 +--- a/data/theme/gnome-shell-dark.scss ++++ b/data/theme/gnome-shell-dark.scss +@@ -1,5 +1,7 @@ + $variant: 'dark'; ++$contrast: 'normal'; + ++$laptop: false; + @import "gnome-shell-sass/_colors"; //use gtk colors + @import "gnome-shell-sass/_drawing"; + @import "gnome-shell-sass/_common"; +diff --git a/data/theme/gnome-shell-high-contrast.scss b/data/theme/gnome-shell-high-contrast.scss +deleted file mode 100644 +index 00f247e73..000000000 +--- a/data/theme/gnome-shell-high-contrast.scss ++++ /dev/null +@@ -1,33 +0,0 @@ +-$variant: 'dark'; +- +-@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 { width: 48px; } +-.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; +-} +diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss +index 85f16fb3c..d9d6db986 100644 +--- a/data/theme/gnome-shell-sass/_drawing.scss ++++ b/data/theme/gnome-shell-sass/_drawing.scss +@@ -373,11 +373,11 @@ + // $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, $flat: true, $highlighted_child: false, $child_class:"", $border_radius: 3px) { + + transition-duration: 150ms; + border: 3px solid transparent; +- border-radius: 99px; ++ border-radius: $border_radius; + + font-weight: bold; + background-color: transparent; +@@ -419,7 +419,7 @@ + #{$child_class} { + transition-duration: 150ms; + border: 3px solid transparent; +- border-radius: 99px; ++ border-radius: $border_radius; + } + + &:active, &:focus, &:checked { +diff --git a/data/theme/gnome-shell-sass/_palette.scss b/data/theme/gnome-shell-sass/_palette.scss +index 78847d95a..8627513c6 100644 +--- a/data/theme/gnome-shell-sass/_palette.scss ++++ b/data/theme/gnome-shell-sass/_palette.scss +@@ -39,8 +39,8 @@ $light_2: #f6f5f4; + $light_3: #deddda; + $light_4: #c0bfbc; + $light_5: #9a9996; +-$dark_1: #77767b; +-$dark_2: #5e5c64; +-$dark_3: #3d3846; +-$dark_4: #241f31; +-$dark_5: #000000; +\ No newline at end of file ++$dark_1: #777777; ++$dark_2: #5e5e5e; ++$dark_3: #3d3d3d; ++$dark_4: #242424; ++$dark_5: #000000; +diff --git a/data/theme/gnome-shell-sass/widgets/_corner-ripple.scss b/data/theme/gnome-shell-sass/widgets/_corner-ripple.scss +index 9aff43174..1760edaee 100644 +--- a/data/theme/gnome-shell-sass/widgets/_corner-ripple.scss ++++ b/data/theme/gnome-shell-sass/widgets/_corner-ripple.scss +@@ -3,7 +3,7 @@ + $ripple_size: 50px; + + .ripple-box { +- background-color: rgba(255,255,255,0.2); ++ background-color: rgba(0,0,0,0); + box-shadow: 0 0 2px 2px rgba(255,255,255,0.2); + // plus + 2px for the border (box-shadow) + width: $ripple_size + 2px; +diff --git a/data/theme/gnome-shell-sass/widgets/_panel.scss b/data/theme/gnome-shell-sass/widgets/_panel.scss +index f19c7c76e..1ad3a18d5 100644 +--- a/data/theme/gnome-shell-sass/widgets/_panel.scss ++++ b/data/theme/gnome-shell-sass/widgets/_panel.scss +@@ -1,9 +1,9 @@ + /* Top Bar */ + // a.k.a. the panel + +-$privacy_indicator_color: $orange_3; ++$privacy_indicator_color: $red_3; + +-$panel_bg_color: if($variant == 'light', $light_3, $dark_5); ++$panel_bg_color: if($variant == 'light', $light_3, $dark_4); + $panel_fg_color: if($variant == 'light', $fg_color, darken($fg_color, 5%)); + $panel_border_color: if($variant == 'light', darken($panel_bg_color, 2%), $panel_bg_color); + +@@ -21,14 +21,14 @@ $panel_transition_duration: 250ms; // same as the overview transition duration + + // panel menus + .panel-button { +- @include panel_button($panel_fg_color); +- -natural-hpadding: $base_padding * 2; +- -minimum-hpadding: $base_padding; ++ @include panel_button($bg: $panel_fg_color, $border_radius: 3px); ++ -natural-hpadding: 6px; ++ -minimum-hpadding: 4px; + + // status area icons + .system-status-icon { + icon-size: $base_icon_size; +- padding: $base_padding - 1px; ++ padding: ($base_padding - 1px) 0px ($base_padding - 1px) 0px; + margin: 0 $base_margin; + } + +@@ -44,7 +44,8 @@ $panel_transition_duration: 250ms; // same as the overview transition duration + } + + &#panelActivities { +- -natural-hpadding: $base_padding * 2.5; ++ -natural-hpadding: 10px; ++ -minimum-hpadding: 8px; + + & StBoxLayout { + spacing: 5px; +@@ -67,6 +68,10 @@ $panel_transition_duration: 250ms; // same as the overview transition duration + + StIcon { + icon-size: $base_icon_size; ++ ++ &:first-child { ++ margin-left: 3px; ++ } + } + } + +@@ -83,7 +88,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration + // The clock display needs to have the background on .clock because + // we want to exclude the do-not-disturb indicator from the background + // see _drawing.scss for override details +- @include panel_button($highlighted_child: true, $child_class:".clock"); ++ @include panel_button($highlighted_child: true, $child_class:".clock", $border_radius: 3px); ++ -natural-hpadding: 0px; ++ -minimum-hpadding: 0px; ++ padding-left: 0px; ++ padding-right: 0px; + + .clock { + // the highlighted child +@@ -99,7 +108,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration + box-shadow: none; + + .panel-button { +- @include panel_button($panel_system_fg_color, $fg:$panel_system_fg_color); ++ @include panel_button($panel_system_fg_color, $fg:$panel_system_fg_color, $border_radius: 3px); + + &#panelActivities .workspace-dot { + background-color: $panel_system_fg_color; +@@ -121,14 +130,26 @@ $panel_transition_duration: 250ms; // same as the overview transition duration + } + } + +- .panel-status-indicators-box, ++ .panel-status-indicators-box { ++ spacing: 2px; ++ padding-right: 2px; ++ padding-left: 3px; ++ } ++ + .panel-status-menu-box { + spacing: 2px; + } + + // spacing between power icon and (optional) percentage label + .power-status.panel-status-indicators-box { ++ padding-left: 0px; + spacing: 0; ++ ++ @if $laptop { ++ margin-bottom: 2px; ++ } @else { ++ margin-left: 2px; ++ } + } + + // important privacy related indicators +@@ -151,7 +172,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration + .clock-display-box { + spacing: 2px; + .clock { +- padding-left: $base_padding * 2; +- padding-right: $base_padding * 2; ++ padding-left: 8px; ++ padding-right: 8px; ++ } ++ ++ StIcon:last-child { ++ margin-right: 3px; + } + } +-- +2.44.0 + diff --git a/patches/gnome-46.0-dark-theme.patch b/patches/gnome-46.0-dark-theme.patch new file mode 100644 index 0000000..0eecf0c --- /dev/null +++ b/patches/gnome-46.0-dark-theme.patch @@ -0,0 +1,250 @@ +From 7698d02e99c01afc6451ec13dca730c1f0e100a1 Mon Sep 17 00:00:00 2001 +From: Kevin MacMartin +Date: Mon, 25 Mar 2024 13:32:44 -0400 +Subject: [PATCH] Dark theme + +--- + ...ight.scss => gnome-shell-dark-laptop.scss} | 3 +- + data/theme/gnome-shell-dark.scss | 1 + + data/theme/gnome-shell-high-contrast.scss | 7 ---- + data/theme/gnome-shell-sass/_colors.scss | 4 +- + data/theme/gnome-shell-sass/_drawing.scss | 6 +-- + data/theme/gnome-shell-sass/_palette.scss | 10 ++--- + .../widgets/_corner-ripple.scss | 2 +- + .../gnome-shell-sass/widgets/_panel.scss | 41 +++++++++++++++---- + 8 files changed, 48 insertions(+), 26 deletions(-) + rename data/theme/{gnome-shell-light.scss => gnome-shell-dark-laptop.scss} (84%) + delete mode 100644 data/theme/gnome-shell-high-contrast.scss + +diff --git a/data/theme/gnome-shell-light.scss b/data/theme/gnome-shell-dark-laptop.scss +similarity index 84% +rename from data/theme/gnome-shell-light.scss +rename to data/theme/gnome-shell-dark-laptop.scss +index 22b8347..61925f9 100644 +--- a/data/theme/gnome-shell-light.scss ++++ b/data/theme/gnome-shell-dark-laptop.scss +@@ -1,6 +1,7 @@ +-$variant: 'light'; ++$variant: 'dark'; + $contrast: 'normal'; + ++$laptop: true; + @import "gnome-shell-sass/_colors"; //use gtk colors + @import "gnome-shell-sass/_drawing"; + @import "gnome-shell-sass/_common"; +diff --git a/data/theme/gnome-shell-dark.scss b/data/theme/gnome-shell-dark.scss +index c1a330b..294ac64 100644 +--- a/data/theme/gnome-shell-dark.scss ++++ b/data/theme/gnome-shell-dark.scss +@@ -1,6 +1,7 @@ + $variant: 'dark'; + $contrast: 'normal'; + ++$laptop: false; + @import "gnome-shell-sass/_colors"; //use gtk colors + @import "gnome-shell-sass/_drawing"; + @import "gnome-shell-sass/_common"; +diff --git a/data/theme/gnome-shell-high-contrast.scss b/data/theme/gnome-shell-high-contrast.scss +deleted file mode 100644 +index a4394dd..0000000 +--- a/data/theme/gnome-shell-high-contrast.scss ++++ /dev/null +@@ -1,7 +0,0 @@ +-$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"; +diff --git a/data/theme/gnome-shell-sass/_colors.scss b/data/theme/gnome-shell-sass/_colors.scss +index ffd4e9f..9a5450a 100644 +--- a/data/theme/gnome-shell-sass/_colors.scss ++++ b/data/theme/gnome-shell-sass/_colors.scss +@@ -21,7 +21,7 @@ $system_base_color: $_base_color_dark; + $system_fg_color: $_base_color_light; + + // panel colors +-$panel_bg_color: if($variant == 'light', $_base_color_light, $dark_5); ++$panel_bg_color: if($variant == 'light', $_base_color_light, $dark_4); + $panel_fg_color: if($variant == 'light', $_base_color_dark, $light_1); + + // card elements +@@ -66,4 +66,4 @@ $active_bg_color: if($variant=='light', darken($bg_color, 11%), lighten($bg_colo + $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 ++$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), lighten($selected_bg_color, 15%)); +diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss +index 5d56d4c..dd6f8a8 100644 +--- a/data/theme/gnome-shell-sass/_drawing.scss ++++ b/data/theme/gnome-shell-sass/_drawing.scss +@@ -386,7 +386,7 @@ + } + + // Panel menu/button drawing function +-@mixin panel_button($bg:$panel_fg_color, $fg:$panel_fg_color, $style: null, $highlighted_child: false, $child_class:"") { ++@mixin panel_button($bg:$panel_fg_color, $fg:$panel_fg_color, $style: null, $highlighted_child: false, $child_class:"", $border_radius: 3px) { + // + // $bg: background color, derived from $panel_fg_color + // $fg: foreground color, also derived from $panel_fg_color +@@ -400,7 +400,7 @@ + transition-duration: 150ms; + border: 3px solid transparent; + background-color: transparent; +- border-radius: $forced_circular_radius; ++ border-radius: $border_radius; + + font-weight: bold; + color: $fg; +@@ -444,7 +444,7 @@ + #{$child_class} { + transition-duration: 150ms; + border: 3px solid transparent; +- border-radius: $forced_circular_radius; ++ border-radius: $border_radius; + } + + &:focus, &:hover { +diff --git a/data/theme/gnome-shell-sass/_palette.scss b/data/theme/gnome-shell-sass/_palette.scss +index 78847d9..8627513 100644 +--- a/data/theme/gnome-shell-sass/_palette.scss ++++ b/data/theme/gnome-shell-sass/_palette.scss +@@ -39,8 +39,8 @@ $light_2: #f6f5f4; + $light_3: #deddda; + $light_4: #c0bfbc; + $light_5: #9a9996; +-$dark_1: #77767b; +-$dark_2: #5e5c64; +-$dark_3: #3d3846; +-$dark_4: #241f31; +-$dark_5: #000000; +\ No newline at end of file ++$dark_1: #777777; ++$dark_2: #5e5e5e; ++$dark_3: #3d3d3d; ++$dark_4: #242424; ++$dark_5: #000000; +diff --git a/data/theme/gnome-shell-sass/widgets/_corner-ripple.scss b/data/theme/gnome-shell-sass/widgets/_corner-ripple.scss +index 9aff431..1760eda 100644 +--- a/data/theme/gnome-shell-sass/widgets/_corner-ripple.scss ++++ b/data/theme/gnome-shell-sass/widgets/_corner-ripple.scss +@@ -3,7 +3,7 @@ + $ripple_size: 50px; + + .ripple-box { +- background-color: rgba(255,255,255,0.2); ++ background-color: rgba(0,0,0,0); + box-shadow: 0 0 2px 2px rgba(255,255,255,0.2); + // plus + 2px for the border (box-shadow) + width: $ripple_size + 2px; +diff --git a/data/theme/gnome-shell-sass/widgets/_panel.scss b/data/theme/gnome-shell-sass/widgets/_panel.scss +index 2a29eee..9b455a0 100644 +--- a/data/theme/gnome-shell-sass/widgets/_panel.scss ++++ b/data/theme/gnome-shell-sass/widgets/_panel.scss +@@ -1,8 +1,8 @@ + /* Top Bar */ + // a.k.a. the panel + +-$privacy_indicator_color: if($variant == 'light', $orange_4, $orange_3); +-$recording_indicator_color: $red_4; ++$privacy_indicator_color: if($variant == 'light', $orange_4, $red_3); ++$recording_indicator_color: $red_3; + + $transparent_panel_fg_color: $light_1; // always white for transparent lock screens + $system_panel_fg_color: $system_fg_color; // always light for lockscreen, overview +@@ -20,13 +20,13 @@ $panel_transition_duration: 250ms; // same as the overview transition duration + // panel menus + .panel-button { + @include panel_button(); +- -natural-hpadding: $base_padding * 2; +- -minimum-hpadding: $base_padding; ++ -natural-hpadding: 6px; ++ -minimum-hpadding: 4px; + + // status area icons + .system-status-icon { + icon-size: $scalable_icon_size; +- padding: 0 $base_padding; ++ padding: 0; + margin: 0 $base_margin; + } + +@@ -47,6 +47,9 @@ $panel_transition_duration: 250ms; // same as the overview transition duration + } + + &#panelActivities { ++ -natural-hpadding: 10px; ++ -minimum-hpadding: 8px; ++ + & StBoxLayout { + padding: 0 $scaled_padding * 0.5; // use em padding to keep proportion + spacing: 5px; +@@ -69,6 +72,10 @@ $panel_transition_duration: 250ms; // same as the overview transition duration + + StIcon { + icon-size: $scalable_icon_size; ++ ++ &:first-child { ++ margin-left: 3px; ++ } + } + } + +@@ -86,6 +93,10 @@ $panel_transition_duration: 250ms; // same as the overview transition duration + // we want to exclude the do-not-disturb indicator from the background + // see _drawing.scss for override details + @include panel_button($highlighted_child: true, $child_class: '.clock'); ++ -natural-hpadding: 0px; ++ -minimum-hpadding: 0px; ++ padding-left: 0px; ++ padding-right: 0px; + + .clock { + // the highlighted child +@@ -144,6 +155,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration + } + } + ++ .panel-status-indicators-box { ++ padding-right: 2px; ++ padding-left: 3px; ++ } ++ + .panel-status-indicators-box, + .panel-status-menu-box { + spacing: 2px; +@@ -151,7 +167,14 @@ $panel_transition_duration: 250ms; // same as the overview transition duration + + // spacing between power icon and (optional) percentage label + .power-status.panel-status-indicators-box { ++ padding-left: 0px; + spacing: 0; ++ ++ @if $laptop { ++ margin-bottom: 2px; ++ } @else { ++ margin-left: 2px; ++ } + } + + // important privacy related indicators +@@ -174,7 +197,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration + .clock-display-box { + spacing: 2px; + .clock { +- padding-left: $scaled_padding * 2; +- padding-right: $scaled_padding * 2; ++ padding-left: 8px; ++ padding-right: 8px; ++ } ++ ++ StIcon:last-child { ++ margin-right: 3px; + } + } +-- +2.44.0 + diff --git a/process-working-dark.svg b/process-working-dark.svg new file mode 100644 index 0000000..6c7ad64 --- /dev/null +++ b/process-working-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/process-working-light.svg b/process-working-light.svg new file mode 100644 index 0000000..903edde --- /dev/null +++ b/process-working-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/process-working.svg b/process-working.svg deleted file mode 100644 index 920a67d..0000000 --- a/process-working.svg +++ /dev/null @@ -1,3084 +0,0 @@ - - - - - - - - image/svg+xml - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/toggle-off-hc.svg b/toggle-off-hc.svg deleted file mode 100644 index 2652800..0000000 --- a/toggle-off-hc.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/toggle-off-light.svg b/toggle-off-light.svg index 14cb424..aa2385b 100644 --- a/toggle-off-light.svg +++ b/toggle-off-light.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/toggle-off.svg b/toggle-off.svg index 323f73b..43cb59f 100644 --- a/toggle-off.svg +++ b/toggle-off.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/toggle-on-hc.svg b/toggle-on-hc.svg deleted file mode 100644 index 2d553c6..0000000 --- a/toggle-on-hc.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/toggle-on-light.svg b/toggle-on-light.svg index f3dbf31..778f922 100644 --- a/toggle-on-light.svg +++ b/toggle-on-light.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/toggle-on.svg b/toggle-on.svg index 215760f..43c221e 100644 --- a/toggle-on.svg +++ b/toggle-on.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file