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

theme: Support accent color

Browse Source 
Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2715>
This commit is contained in:
Alice Mikhaylenko 2024-06-09 18:33:43 +04:00 committed by Marge Bot
parent 0b888fc07f
commit a93cfb94e4
23 changed files with 90 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -65,5 +65,5 @@ $hover_fg_color: if($variant=='light', darken($fg_color,9%), lighten($fg_color,
$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%));
// accent colors
$accent_borders_color: if($variant== 'light', st-darken(-st-accent-color, 15%), st-lighten(-st-accent-color, 15%));

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

@ -117,11 +117,11 @@ stage {
}
%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);}
@include button(normal, $c:-st-accent-color, $tc:-st-accent-fg-color, $style: default);
&:focus { @include button(focus, $c:-st-accent-color, $tc:-st-accent-fg-color, $style: default);}
&:hover { @include button(hover, $c:-st-accent-color, $tc:-st-accent-fg-color, $style: default);}
&:insensitive { @include button(insensitive, $c:-st-accent-color, $tc:-st-accent-fg-color, $style: default);}
&:active { @include button(active, $c:-st-accent-color, $tc:-st-accent-fg-color, $style: default);}
}
// items in popover menus
@ -173,7 +173,7 @@ stage {
border-radius: $base_border_radius;
padding: $base_padding * 1.5 $base_padding * 1.5;
selection-background-color: transparentize($selected_bg_color, 0.7);
selection-background-color: st-transparentize(-st-accent-color, 0.7);
selected-color: $fg_color;
}

14
data/theme/gnome-shell-sass/_default-colors.scss
View File

@ -22,13 +22,9 @@ $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);
$link_color: if($variant == 'light', st-darken(-st-accent-color, 10%), st-lighten(-st-accent-color, 20%));
$link_visited_color: st-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
@ -39,8 +35,8 @@ $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);
$focus_color: -st-accent-color;
$focus_border_color: st-transparentize($focus_color, 0.5);
// High Contrast overrides
@if $contrast == 'high' {
@ -50,5 +46,5 @@ $focus_border_color: transparentize($focus_color, 0.5);
$shadow_color: transparent;
$text_shadow_color: transparent;
// less transparent focus color
$focus_border_color: transparentize($focus_color, 0.2);
$focus_border_color: st-transparentize($focus_color, 0.2);
}

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

@ -16,12 +16,12 @@
// $mc: mix color, defined in High Contrast specific stylesheet
// $mf: mix factor (%), defined in High Contrast specific stylesheet
//
@return mix($c, $mc, $mf);
@return st-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%);
@return st-mix($fc, $bg, 5%);
}
//
@ -165,7 +165,7 @@
//
// mix input colors to get button background color
$button_bg_color: mix($tc, $c, $background_mix_factor);
$button_bg_color: st-mix($tc, $c, $background_mix_factor);
// background color override for card elements
@if $style == 'card' { $button_bg_color: $card_bg_color;}
@ -187,26 +187,26 @@
}
// 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));
$hover_button_bg_color: if($variant == 'light', st-darken($button_bg_color, $hover_factor), st-lighten($button_bg_color, $hover_factor));
$active_button_bg_color: if($variant == 'light', st-darken($button_bg_color, $active_factor), st-lighten($button_bg_color, $active_factor));
$checked_button_bg_color: if($variant == 'light', st-darken($button_bg_color, $checked_factor), st-lighten($button_bg_color, $checked_factor));
$insensitive_button_bg_color: if($variant == 'light', st-lighten($button_bg_color, $insensitive_factor), st-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));
$active_hover_button_bg_color: if($variant == 'light', st-darken($active_button_bg_color, $hover_factor), st-lighten($active_button_bg_color, $hover_factor));
$checked_hover_button_bg_color: if($variant == 'light', st-darken($checked_button_bg_color, $hover_factor), st-lighten($checked_button_bg_color, $hover_factor));
$checked_active_button_bg_color: if($variant == 'light', st-darken($checked_button_bg_color, $active_factor), st-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);
$hover_button_bg_color: st-lighten($button_bg_color, $hover_factor);
$active_button_bg_color: st-lighten($button_bg_color, $active_factor);
$checked_button_bg_color: st-lighten($button_bg_color, $checked_factor);
$insensitive_button_bg_color: st-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);
$active_hover_button_bg_color: st-lighten($active_button_bg_color, $hover_factor);
$checked_hover_button_bg_color: st-lighten($checked_button_bg_color, $hover_factor);
$checked_active_button_bg_color: st-lighten($checked_button_bg_color, $active_factor);
}
// background color override for buttons that use transparency
@ -283,7 +283,7 @@
// insensitive button
@else if $type == 'insensitive' {
$insensitive_button_fg_color: if($variant == 'light', transparentize($tc, .6), transparentize($tc, .5));
$insensitive_button_fg_color: if($variant == 'light', st-transparentize($tc, .6), st-transparentize($tc, .5));
color: $insensitive_button_fg_color;
background-color: $insensitive_button_bg_color;
@ -300,7 +300,7 @@
// use a different focus ring color for default style
@if $style == 'default' {
@include focus_ring($fc:$selected_borders_color);
@include focus_ring($fc:$accent_borders_color);
}
// change background color if style is flat
@if $style == 'flat' {
@ -357,8 +357,8 @@
}
&:drop {
background-color: transparentize($selected_bg_color, .8);
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, .2);
background-color: st-transparentize(-st-accent-color, .8);
box-shadow: inset 0 0 0 2px st-transparentize(-st-accent-color, .2);
}
}

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

@ -64,8 +64,8 @@ $hover_fg_color: lighten($fg_color, 20%);
$active_bg_color: lighten($bg_color, 22%);
$active_fg_color: lighten($fg_color, 22%);
// selection colors
$selected_borders_color: lighten($selected_bg_color, 30%);
// accent colors
$accent_borders_color: st-lighten(-st-accent-color, 30%);
//
// High Contrast specific definitions

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

@ -3,8 +3,8 @@
width: $ripple_size;
height: $ripple_size;
border-radius: $ripple_size * 0.5; // radius equals the size of the box to give us the curve
background-color: lighten(transparentize($selected_bg_color, 0.7), 30%);
box-shadow: 0 0 2px 2px lighten($selected_bg_color, 20%);
background-color: st-lighten(st-transparentize(-st-accent-color, 0.7), 30%);
box-shadow: 0 0 2px 2px st-lighten(-st-accent-color, 20%);
}
// Pointer accessibility notifications
@ -12,13 +12,13 @@
width: 60px;
height: 60px;
-pie-border-width: 3px;
-pie-border-color: $selected_bg_color;
-pie-background-color: lighten(transparentize($selected_bg_color, 0.7), 40%);
-pie-border-color: -st-accent-color;
-pie-background-color: st-lighten(st-transparentize(-st-accent-color, 0.7), 40%);
}
// Screen zoom/Magnifier
.magnifier-zoom-region {
border: 2px solid $selected_bg_color;
border: 2px solid -st-accent-color;
&.full-screen { border-width: 0; }
}

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

@ -3,7 +3,7 @@
color: $link_color;
&:hover {
color: lighten($link_color, 10%);
color: st-lighten($link_color, 10%);
}
}

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

@ -111,7 +111,7 @@
&.calendar-today {
@extend %default_button;
// override colors above for when today is a weekend
color: $selected_fg_color !important;
color: -st-accent-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
}

14
data/theme/gnome-shell-sass/widgets/_check-box.scss
View File

@ -11,7 +11,7 @@
&:focus StBin {
// Trick due to St limitations. It needs a background to draw a box-shadow
background-color: rgba(0, 0, 0, 0.01);
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, .65);
box-shadow: inset 0 0 0 2px st-transparentize(-st-accent-color, .65);
}
StIcon {
@ -32,18 +32,18 @@
}
&:checked StIcon {
background-color: $selected_bg_color;
color: $selected_fg_color;
background-color: -st-accent-color;
color: -st-accent-fg-color;
border-color: transparent;
}
&:checked:hover StIcon {
background-color: lighten($selected_bg_color, 5%);
color: lighten($selected_fg_color, 5%);
background-color: st-lighten(-st-accent-color, 5%);
color: st-lighten(-st-accent-fg-color, 5%);
}
&:checked:active StIcon {
background-color: darken($selected_bg_color, 7%);
color: darken($selected_fg_color, 7%);
background-color: st-darken(-st-accent-color, 7%);
color: st-darken(-st-accent-fg-color, 7%);
}
}

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

@ -145,8 +145,8 @@
border-radius: $base_border_radius * 2;
&:hover,&:focus { background-color: $hover_bg_color; }
&:active {
background-color: $selected_bg_color;
color: $selected_fg_color;
background-color: -st-accent-color;
color: -st-accent-fg-color;
}
}

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

@ -19,7 +19,7 @@
.candidate-box {
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; }
&:selected { background-color: -st-accent-color; color: -st-accent-fg-color; }
&:hover { background-color: $hover_bg_color; color: $hover_fg_color; }
}

16
data/theme/gnome-shell-sass/widgets/_keyboard.scss
View File

@ -63,17 +63,17 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
// keys that may be latched: ctrl/alt/shift
&:latched {
border-color: lighten($selected_bg_color, 5%);
background-color: $selected_bg_color;
border-color: st-lighten(-st-accent-color, 5%);
background-color: -st-accent-color;
}
}
// enter key is suggested-action
&.enter-key {
@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);}
@include button(normal, $c:-st-accent-color, $tc:-st-accent-fg-color);
&:hover { @include button(hover, $c:-st-accent-color, $tc:-st-accent-fg-color);}
&:active { @include button(active, $c:-st-accent-color, $tc:-st-accent-fg-color);}
&:checked { @include button(checked, $c:-st-accent-color, $tc:-st-accent-fg-color);}
border-radius: $key_border_radius;
color: $osd_fg_color;
}
@ -128,8 +128,8 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
.emoji-panel {
.keyboard-key:latched {
border-color: lighten($selected_bg_color, 5%);
background-color: $selected_bg_color;
border-color: st-lighten(-st-accent-color, 5%);
background-color: -st-accent-color;
}
}

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

@ -128,8 +128,8 @@ $_gdm_dialog_width: 25em;
color: darken($_gdm_fg,30%);
&:focus, &:selected {
background-color: $selected_bg_color;
color: $selected_fg_color;
background-color: -st-accent-color;
color: -st-accent-fg-color;
}
}
@ -175,9 +175,9 @@ $_gdm_dialog_width: 25em;
&:logged-in {
// color border for logged-in user
.user-icon {
border-color: $selected_bg_color;
border-color: -st-accent-color;
StIcon {
background-color: transparentize($selected_bg_color, .7);
background-color: st-transparentize(-st-accent-color, .7);
}
}
}
@ -238,7 +238,7 @@ $_gdm_dialog_width: 25em;
StButton#vhandle, StButton#hhandle {
background-color: transparentize($bg_color,0.7);
&:hover, &:focus { background-color: transparentize($bg_color,0.5); }
&:active { background-color: transparentize($selected_bg_color,0.5); }
&:active { background-color: st-transparentize(-st-accent-color,0.5); }
}
}

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

@ -59,8 +59,8 @@
.shell-link {
color: $link_color;
&:hover { color: lighten($link_color, 10%); }
&:active { color: darken($link_color, 10%); }
&:hover { color: st-lighten($link_color, 10%); }
&:active { color: st-darken($link_color, 10%); }
}
.actor-link {

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

@ -56,7 +56,7 @@
border-style: solid;
&:focus {
border-color: transparentize($selected_bg_color, 0.4);
border-color: st-transparentize(-st-accent-color, 0.4);
}
}
}

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

@ -1,7 +1,7 @@
// Rubberband for select-area screenshots
.select-area-rubberband {
background-color: transparentize($selected_bg_color,0.7);
border: 1px solid $selected_bg_color;
background-color: st-transparentize(-st-accent-color,0.7);
border: 1px solid -st-accent-color;
}
// User icon
@ -48,6 +48,6 @@
/* Tiled window previews */
.tile-preview {
background-color: transparentize($selected_bg_color,0.5);
border: 1px solid $selected_bg_color;
background-color: st-transparentize(-st-accent-color,0.5);
border: 1px solid -st-accent-color;
}

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

@ -36,8 +36,8 @@ $osd_levelbar_height:6px;
// Monitor number label
.osd-monitor-label {
background-color: $selected_bg_color;
color: $selected_fg_color;
background-color: -st-accent-color;
color: -st-accent-fg-color;
border-radius: $modal_radius;
font-size: 3em;
font-weight: bold;

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

@ -64,7 +64,7 @@
&:checked {
@extend %default_button;
border-color: $selected_borders_color;
border-color: $accent_borders_color;
}
&:ltr {
@ -119,8 +119,8 @@
background-color: transparentize($fg_color, 0.8);
&.active {
background-color: $selected_bg_color;
color: $selected_fg_color;
background-color: -st-accent-color;
color: -st-accent-fg-color;
}
// draw hc outline

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

@ -168,18 +168,18 @@ $screenshot_ui_button_red: $red_4;
.screenshot-ui-window-selector-window {
&:hover {
.screenshot-ui-window-selector-window-border {
border-color: darken($selected_bg_color, 15%);
border-color: st-darken(-st-accent-color, 15%);
}
}
&:checked {
.screenshot-ui-window-selector-window-border {
border-color: $selected_bg_color;
background-color: transparentize($selected_bg_color, 0.8);
border-color: -st-accent-color;
background-color: st-transparentize(-st-accent-color, 0.8);
}
.screenshot-ui-window-selector-check {
color: $selected_fg_color;
background-color: $selected_bg_color;
color: -st-accent-fg-color;
background-color: -st-accent-color;
}
}
}

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

@ -9,7 +9,7 @@ $slider_size: $scalable_icon_size;
-barlevel-height: 4px;
-barlevel-background-color: transparentize($fg_color, 0.9);
// fill style
-barlevel-active-background-color: $selected_bg_color;
-barlevel-active-background-color: -st-accent-color;
// overfill style (red in this case)
-barlevel-overdrive-color: $destructive_color;
-barlevel-overdrive-separator-width:1px;

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

@ -78,5 +78,5 @@ $switcher_radius: $modal_radius + $switcher_padding;
// Window cycler highlight
.cycler-highlight {
border: 5px solid $selected_bg_color;
border: 5px solid -st-accent-color;
}

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

@ -38,12 +38,12 @@ $switch_handle_size: 20px;
}
&:checked {
background: $selected_bg_color;
color: $selected_fg_color;
background: -st-accent-color;
color: -st-accent-fg-color;
&:hover {
background-color: lighten($selected_bg_color, 5%);
color: lighten($selected_fg_color, 5%);
background-color: st-lighten(-st-accent-color, 5%);
color: st-lighten(-st-accent-fg-color, 5%);
}
.handle {

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

@ -27,6 +27,6 @@
// selected indicator
.workspace-thumbnail-indicator {
border: 3px solid $selected_bg_color;
border: 3px solid -st-accent-color;
border-radius: $base_border_radius;
}