Merge branch 'wip/exalm/accent-color' into 'main'

Support accent color

See merge request GNOME/gnome-shell!2715
This commit is contained in:
Alice Mikhaylenko 2024-06-20 13:18:15 +00:00
commit f6232ecbb3
29 changed files with 481 additions and 105 deletions

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

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
@ -172,8 +172,9 @@ stage {
%entry_common {
border-radius: $base_border_radius;
padding: $base_padding * 1.5 $base_padding * 1.5;
selection-background-color: $selected_bg_color;
selected-color: $selected_fg_color;
selection-background-color: st-transparentize(-st-accent-color, 0.7);
selected-color: $fg_color;
}
%entry {

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

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

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

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

View file

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

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
}

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

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

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

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

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

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 {

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

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

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;

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

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

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;

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

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 {

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

View file

@ -28,7 +28,7 @@ gjs_req = '>= 1.73.1'
gtk_req = '>= 4.0'
mutter_req = '>= 46.0'
polkit_req = '>= 0.100'
schemas_req = '>= 46.beta'
schemas_req = '>= 47.alpha'
systemd_req = '>= 246'
ibus_req = '>= 1.5.19'
gnome_desktop_req = '>= 40'

View file

@ -33,6 +33,7 @@
#define KEY_DRAG_THRESHOLD "drag-threshold"
#define KEY_FONT_NAME "font-name"
#define KEY_COLOR_SCHEME "color-scheme"
#define KEY_ACCENT_COLOR "accent-color"
#define KEY_HIGH_CONTRAST "high-contrast"
#define KEY_GTK_ICON_THEME "icon-theme"
#define KEY_MAGNIFIER_ACTIVE "screen-magnifier-enabled"
@ -45,6 +46,7 @@ enum {
PROP_DRAG_THRESHOLD,
PROP_FONT_NAME,
PROP_COLOR_SCHEME,
PROP_ACCENT_COLOR,
PROP_HIGH_CONTRAST,
PROP_GTK_ICON_THEME,
PROP_MAGNIFIER_ACTIVE,
@ -75,6 +77,7 @@ struct _StSettings
gint drag_threshold;
double slow_down_factor;
StSystemColorScheme color_scheme;
StSystemAccentColor accent_color;
};
G_DEFINE_TYPE (StSettings, st_settings, G_TYPE_OBJECT)
@ -192,6 +195,9 @@ st_settings_get_property (GObject *object,
case PROP_COLOR_SCHEME:
g_value_set_enum (value, settings->color_scheme);
break;
case PROP_ACCENT_COLOR:
g_value_set_enum (value, settings->accent_color);
break;
case PROP_MAGNIFIER_ACTIVE:
g_value_set_boolean (value, settings->magnifier_active);
break;
@ -294,6 +300,18 @@ st_settings_class_init (StSettingsClass *klass)
ST_SYSTEM_COLOR_SCHEME_DEFAULT,
ST_PARAM_READABLE);
/**
* StSettings:accent-color:
*
* The current accent color.
*/
props[PROP_ACCENT_COLOR] = g_param_spec_enum ("accent-color",
"accent color",
"accent color",
ST_TYPE_SYSTEM_ACCENT_COLOR,
ST_SYSTEM_ACCENT_COLOR_BLUE,
ST_PARAM_READABLE);
/**
* StSettings:magnifier-active:
*
@ -364,6 +382,11 @@ on_interface_settings_changed (GSettings *g_settings,
g_object_notify_by_pspec (G_OBJECT (settings),
props[PROP_COLOR_SCHEME]);
}
else if (g_str_equal (key, KEY_ACCENT_COLOR))
{
settings->accent_color = g_settings_get_enum (g_settings, key);
g_object_notify_by_pspec (G_OBJECT (settings), props[PROP_ACCENT_COLOR]);
}
}
static void
@ -447,6 +470,8 @@ st_settings_init (StSettings *settings)
KEY_GTK_ICON_THEME);
settings->color_scheme = g_settings_get_enum (settings->interface_settings,
KEY_COLOR_SCHEME);
settings->accent_color = g_settings_get_enum (settings->interface_settings,
KEY_ACCENT_COLOR);
settings->drag_threshold = g_settings_get_int (settings->mouse_settings,
KEY_DRAG_THRESHOLD);
settings->magnifier_active = g_settings_get_boolean (settings->a11y_applications_settings,

View file

@ -35,6 +35,18 @@ typedef enum {
ST_SYSTEM_COLOR_SCHEME_PREFER_LIGHT = G_DESKTOP_COLOR_SCHEME_PREFER_LIGHT,
} StSystemColorScheme;
typedef enum {
ST_SYSTEM_ACCENT_COLOR_BLUE = G_DESKTOP_ACCENT_COLOR_BLUE,
ST_SYSTEM_ACCENT_COLOR_TEAL = G_DESKTOP_ACCENT_COLOR_TEAL,
ST_SYSTEM_ACCENT_COLOR_GREEN = G_DESKTOP_ACCENT_COLOR_GREEN,
ST_SYSTEM_ACCENT_COLOR_YELLOW = G_DESKTOP_ACCENT_COLOR_YELLOW,
ST_SYSTEM_ACCENT_COLOR_ORANGE = G_DESKTOP_ACCENT_COLOR_ORANGE,
ST_SYSTEM_ACCENT_COLOR_RED = G_DESKTOP_ACCENT_COLOR_RED,
ST_SYSTEM_ACCENT_COLOR_PINK = G_DESKTOP_ACCENT_COLOR_PINK,
ST_SYSTEM_ACCENT_COLOR_PURPLE = G_DESKTOP_ACCENT_COLOR_PURPLE,
ST_SYSTEM_ACCENT_COLOR_SLATE = G_DESKTOP_ACCENT_COLOR_SLATE,
} StSystemAccentColor;
#define ST_TYPE_SETTINGS (st_settings_get_type ())
G_DECLARE_FINAL_TYPE (StSettings, st_settings, ST, SETTINGS, GObject)

View file

@ -28,10 +28,25 @@
#include "st-theme-context.h"
#include "st-theme-node-private.h"
#define ACCENT_COLOR_BLUE "#3584e4"
#define ACCENT_COLOR_TEAL "#2190a4"
#define ACCENT_COLOR_GREEN "#3a944a"
#define ACCENT_COLOR_YELLOW "#c88800"
#define ACCENT_COLOR_ORANGE "#ed5b00"
#define ACCENT_COLOR_RED "#e62d42"
#define ACCENT_COLOR_PINK "#d56199"
#define ACCENT_COLOR_PURPLE "#9141ac"
#define ACCENT_COLOR_SLATE "#6f8396"
#define ACCENT_FG_COLOR "#ffffff"
struct _StThemeContext {
GObject parent;
PangoFontDescription *font;
CoglColor accent_color;
CoglColor accent_fg_color;
StThemeNode *root_node;
StTheme *theme;
@ -68,6 +83,7 @@ static PangoFontDescription *get_interface_font_description (void);
static void on_font_name_changed (StSettings *settings,
GParamSpec *pspec,
StThemeContext *context);
static void update_accent_colors (StThemeContext *context);
static void on_icon_theme_changed (StTextureCache *cache,
StThemeContext *context);
static void st_theme_context_changed (StThemeContext *context);
@ -102,6 +118,9 @@ st_theme_context_finalize (GObject *object)
g_signal_handlers_disconnect_by_func (st_settings_get (),
(gpointer) on_font_name_changed,
context);
g_signal_handlers_disconnect_by_func (st_settings_get (),
(gpointer) update_accent_colors,
context);
g_signal_handlers_disconnect_by_func (st_texture_cache_get_default (),
(gpointer) on_icon_theme_changed,
context);
@ -171,6 +190,10 @@ st_theme_context_init (StThemeContext *context)
"notify::font-name",
G_CALLBACK (on_font_name_changed),
context);
g_signal_connect_swapped (st_settings_get (),
"notify::accent-color",
G_CALLBACK (update_accent_colors),
context);
g_signal_connect (st_texture_cache_get_default (),
"icon-theme-changed",
G_CALLBACK (on_icon_theme_changed),
@ -184,6 +207,8 @@ st_theme_context_init (StThemeContext *context)
(GEqualFunc) st_theme_node_equal,
g_object_unref, NULL);
context->scale_factor = 1;
update_accent_colors (context);
}
static void
@ -254,6 +279,61 @@ get_interface_font_description (void)
return pango_font_description_from_string (font_name);
}
static void
update_accent_colors (StThemeContext *context)
{
StSettings *settings = st_settings_get ();
StSystemAccentColor accent_color;
g_object_get (settings, "accent-color", &accent_color, NULL);
switch (accent_color)
{
case ST_SYSTEM_ACCENT_COLOR_BLUE:
cogl_color_from_string (&context->accent_color, ACCENT_COLOR_BLUE);
break;
case ST_SYSTEM_ACCENT_COLOR_TEAL:
cogl_color_from_string (&context->accent_color, ACCENT_COLOR_TEAL);
break;
case ST_SYSTEM_ACCENT_COLOR_GREEN:
cogl_color_from_string (&context->accent_color, ACCENT_COLOR_GREEN);
break;
case ST_SYSTEM_ACCENT_COLOR_YELLOW:
cogl_color_from_string (&context->accent_color, ACCENT_COLOR_YELLOW);
break;
case ST_SYSTEM_ACCENT_COLOR_ORANGE:
cogl_color_from_string (&context->accent_color, ACCENT_COLOR_ORANGE);
break;
case ST_SYSTEM_ACCENT_COLOR_RED:
cogl_color_from_string (&context->accent_color, ACCENT_COLOR_RED);
break;
case ST_SYSTEM_ACCENT_COLOR_PINK:
cogl_color_from_string (&context->accent_color, ACCENT_COLOR_PINK);
break;
case ST_SYSTEM_ACCENT_COLOR_PURPLE:
cogl_color_from_string (&context->accent_color, ACCENT_COLOR_PURPLE);
break;
case ST_SYSTEM_ACCENT_COLOR_SLATE:
cogl_color_from_string (&context->accent_color, ACCENT_COLOR_SLATE);
break;
default:
g_assert_not_reached ();
}
cogl_color_from_string (&context->accent_fg_color, ACCENT_FG_COLOR);
st_theme_context_changed (context);
}
static void
on_stage_destroy (ClutterStage *stage)
{
@ -431,6 +511,28 @@ st_theme_context_get_font (StThemeContext *context)
return context->font;
}
/**
* st_theme_context_get_accent_color:
* @context: a #StThemeContext
* @color: (out) (nullable): the accent color
* @fg_color: (out) (nullable): the foreground accent color
*
* Gets the current accent color for the theme context.
*/
void
st_theme_context_get_accent_color (StThemeContext *context,
CoglColor *color,
CoglColor *fg_color)
{
g_return_if_fail (ST_IS_THEME_CONTEXT (context));
if (color)
memcpy (color, &context->accent_color, sizeof (CoglColor));
if (fg_color)
memcpy (fg_color, &context->accent_fg_color, sizeof (CoglColor));
}
/**
* st_theme_context_get_root_node:
* @context: a #StThemeContext

View file

@ -45,18 +45,22 @@ G_DECLARE_FINAL_TYPE (StThemeContext, st_theme_context,
StThemeContext *st_theme_context_new (void);
StThemeContext *st_theme_context_get_for_stage (ClutterStage *stage);
void st_theme_context_set_theme (StThemeContext *context,
StTheme *theme);
StTheme * st_theme_context_get_theme (StThemeContext *context);
void st_theme_context_set_theme (StThemeContext *context,
StTheme *theme);
StTheme * st_theme_context_get_theme (StThemeContext *context);
void st_theme_context_set_font (StThemeContext *context,
const PangoFontDescription *font);
const PangoFontDescription *st_theme_context_get_font (StThemeContext *context);
void st_theme_context_set_font (StThemeContext *context,
const PangoFontDescription *font);
const PangoFontDescription *st_theme_context_get_font (StThemeContext *context);
StThemeNode * st_theme_context_get_root_node (StThemeContext *context);
void st_theme_context_get_accent_color (StThemeContext *context,
CoglColor *color,
CoglColor *fg_color);
StThemeNode * st_theme_context_intern_node (StThemeContext *context,
StThemeNode *node);
StThemeNode * st_theme_context_get_root_node (StThemeContext *context);
StThemeNode * st_theme_context_intern_node (StThemeContext *context,
StThemeNode *node);
int st_theme_context_get_scale_factor (StThemeContext *context);

View file

@ -502,6 +502,20 @@ term_is_transparent (CRTerm *term)
strcmp (term->content.str->stryng->str, "transparent") == 0);
}
static gboolean
term_is_accent_color (CRTerm *term)
{
return (term->type == TERM_IDENT &&
strcmp (term->content.str->stryng->str, "-st-accent-color") == 0);
}
static gboolean
term_is_accent_fg_color (CRTerm *term)
{
return (term->type == TERM_IDENT &&
strcmp (term->content.str->stryng->str, "-st-accent-fg-color") == 0);
}
static int
color_component_from_double (double component)
{
@ -594,6 +608,180 @@ get_color_from_rgba_term (CRTerm *term,
return VALUE_FOUND;
}
static GetFromTermResult get_color_from_term (StThemeNode *node,
CRTerm *term,
CoglColor *color);
static GetFromTermResult
get_color_from_transparentize_term (StThemeNode *node,
CRTerm *term,
CoglColor *color)
{
CRTerm *color_arg = term->ext_content.func_param;
CRTerm *amount_arg = color_arg->next;
CoglColor base_color;
CRNum *amount_num;
double amount;
if (!color_arg || !amount_arg)
return VALUE_NOT_FOUND;
if (get_color_from_term (node, color_arg, &base_color) != VALUE_FOUND)
return VALUE_NOT_FOUND;
if (amount_arg->type != TERM_NUMBER)
return VALUE_NOT_FOUND;
amount_num = amount_arg->content.num;
if (amount_num->type == NUM_PERCENTAGE)
amount = amount_num->val / 100;
else if (amount_num->type == NUM_GENERIC)
amount = amount_num->val;
else
return VALUE_NOT_FOUND;
color->red = base_color.red;
color->green = base_color.green;
color->blue = base_color.blue;
color->alpha = CLAMP (base_color.alpha - amount * 255, 0, 255);
return VALUE_FOUND;
}
#define LERP(a, b, t) (a + (b - a) * t)
static GetFromTermResult
get_color_from_mix_term (StThemeNode *node,
CRTerm *term,
CoglColor *color)
{
CRTerm *color1_arg = term->ext_content.func_param;
CRTerm *color2_arg = color1_arg->next;
CRTerm *factor_arg = color2_arg->next;
CoglColor color1, color2;
CRNum *factor_num;
double factor;
if (!color1_arg || !color2_arg || !factor_arg)
return VALUE_NOT_FOUND;
if (get_color_from_term (node, color1_arg, &color1) != VALUE_FOUND ||
get_color_from_term (node, color2_arg, &color2) != VALUE_FOUND)
return VALUE_NOT_FOUND;
if (factor_arg->type != TERM_NUMBER)
return VALUE_NOT_FOUND;
factor_num = factor_arg->content.num;
if (factor_num->type == NUM_PERCENTAGE)
factor = factor_num->val / 100;
else if (factor_num->type == NUM_GENERIC)
factor = factor_num->val;
else
return VALUE_NOT_FOUND;
/* SCSS mix() inverts the factor for some reason */
factor = 1 - factor;
color->alpha = CLAMP (LERP (color1.alpha, color2.alpha, factor), 0, 255);
if (color->alpha == 0)
{
color->red = color->green = color->blue = 0;
}
else
{
color->red = CLAMP (LERP (color1.red * color1.alpha, color2.red * color2.alpha, factor) / color->alpha, 0, 255);
color->green = CLAMP (LERP (color1.green * color1.alpha, color2.green * color2.alpha, factor) / color->alpha, 0, 255);
color->blue = CLAMP (LERP (color1.blue * color1.alpha, color2.blue * color2.alpha, factor) / color->alpha, 0, 255);
}
return VALUE_FOUND;
}
static GetFromTermResult
get_color_from_lighten_term (StThemeNode *node,
CRTerm *term,
CoglColor *color)
{
CRTerm *color_arg = term->ext_content.func_param;
CRTerm *factor_arg = color_arg->next;
CoglColor base_color;
CRNum *factor_num;
double factor;
float hue, luminance, saturation;
if (!color_arg || !factor_arg)
return VALUE_NOT_FOUND;
if (get_color_from_term (node, color_arg, &base_color) != VALUE_FOUND)
return VALUE_NOT_FOUND;
if (factor_arg->type != TERM_NUMBER)
return VALUE_NOT_FOUND;
factor_num = factor_arg->content.num;
if (factor_num->type == NUM_PERCENTAGE)
factor = factor_num->val / 100;
else if (factor_num->type == NUM_GENERIC)
factor = factor_num->val;
else
return VALUE_NOT_FOUND;
cogl_color_to_hsl (&base_color, &hue, &saturation, &luminance);
luminance = CLAMP (luminance + factor, 0, 1);
cogl_color_init_from_hsl (color, hue, saturation, luminance);
color->alpha = base_color.alpha;
return VALUE_FOUND;
}
static GetFromTermResult
get_color_from_darken_term (StThemeNode *node,
CRTerm *term,
CoglColor *color)
{
CRTerm *color_arg = term->ext_content.func_param;
CRTerm *factor_arg = color_arg->next;
CoglColor base_color;
CRNum *factor_num;
double factor;
float hue, luminance, saturation;
if (!color_arg || !factor_arg)
return VALUE_NOT_FOUND;
if (get_color_from_term (node, color_arg, &base_color) != VALUE_FOUND)
return VALUE_NOT_FOUND;
if (factor_arg->type != TERM_NUMBER)
return VALUE_NOT_FOUND;
factor_num = factor_arg->content.num;
if (factor_num->type == NUM_PERCENTAGE)
factor = factor_num->val / 100;
else if (factor_num->type == NUM_GENERIC)
factor = factor_num->val;
else
return VALUE_NOT_FOUND;
cogl_color_to_hsl (&base_color, &hue, &saturation, &luminance);
color->alpha = base_color.alpha;
luminance = CLAMP (luminance - factor, 0, 1);
cogl_color_init_from_hsl (color, hue, saturation, luminance);
color->alpha = base_color.alpha;
return VALUE_FOUND;
}
static GetFromTermResult
get_color_from_term (StThemeNode *node,
CRTerm *term,
@ -614,6 +802,18 @@ get_color_from_term (StThemeNode *node,
*color = TRANSPARENT_COLOR;
return VALUE_FOUND;
}
/* St-specific extension: -st-accent-color */
else if (term_is_accent_color (term))
{
st_theme_context_get_accent_color (node->context, color, NULL);
return VALUE_FOUND;
}
/* St-specific extension: -st-accent-fg-color */
else if (term_is_accent_fg_color (term))
{
st_theme_context_get_accent_color (node->context, NULL, color);
return VALUE_FOUND;
}
/* rgba () colors - a CSS3 addition, are not supported by libcroco,
* but they are parsed as a "function", so we can emulate the
* functionality.
@ -626,6 +826,42 @@ get_color_from_term (StThemeNode *node,
{
return get_color_from_rgba_term (term, color);
}
/* St-specific extension: st-transparentize() */
else if (term->type == TERM_FUNCTION &&
term->content.str &&
term->content.str->stryng &&
term->content.str->stryng->str &&
strcmp (term->content.str->stryng->str, "st-transparentize") == 0)
{
return get_color_from_transparentize_term (node, term, color);
}
/* St-specific extension: st-mix() */
else if (term->type == TERM_FUNCTION &&
term->content.str &&
term->content.str->stryng &&
term->content.str->stryng->str &&
strcmp (term->content.str->stryng->str, "st-mix") == 0)
{
return get_color_from_mix_term (node, term, color);
}
/* St-specific extension: st-lighten() */
else if (term->type == TERM_FUNCTION &&
term->content.str &&
term->content.str->stryng &&
term->content.str->stryng->str &&
strcmp (term->content.str->stryng->str, "st-lighten") == 0)
{
return get_color_from_lighten_term (node, term, color);
}
/* St-specific extension: st-darken() */
else if (term->type == TERM_FUNCTION &&
term->content.str &&
term->content.str->stryng &&
term->content.str->stryng->str &&
strcmp (term->content.str->stryng->str, "st-darken") == 0)
{
return get_color_from_darken_term (node, term, color);
}
status = cr_rgb_set_from_term (&rgb, term);
if (status != CR_OK)