Lerking/gtk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Blue outlines / focus rings

Browse Source 
- introduce two new colors: $focus_border_color for focused / outlined elements and $_coloured_focus_border_color for focused / outlined elements with a colored background color, like suggested/destructive buttons or selected elements
- set outline / focus color, offset and style accordingly for all widgets
- adapt entry focus color
This commit is contained in:
frederik.feichtmeier
2020-04-04 20:18:42 +02:00
committed by Jakub Steiner
parent ba05787a06
commit dfd4eef39e
3 changed files with 78 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
gtk/theme/Adwaita/_colors.scss
View File

@@ -76,3 +76,5 @@ $progress_border_color: $selected_borders_color;
$checkradio_bg_color: if($variant == 'light', $selected_bg_color, lighten($selected_bg_color,10%));
$checkradio_fg_color: $selected_fg_color;
$checkradio_borders_color: if($variant == 'light', darken($checkradio_bg_color,20%), darken($checkradio_bg_color,40%));
$focus_border_color: transparentize(#3584e4, 0.3);
$coloured_focus_border_color: transparentize(white, 0.3);

98
gtk/theme/Adwaita/_common.scss
View File

@@ -11,32 +11,6 @@ $menu_radius: 5px;
$window_radius: $button_radius + 3;
$popover_radius: $button_radius + 4;
button:focus(visible),
checkbutton:focus(visible),
radiobutton:focus(visible),
switch:focus(visible),
label:focus(visible),
row:focus(visible),
flowboxchild:focus(visible) {
// We use the outline properties to signal the focus properties
// to the adwaita engine: using real CSS properties is faster,
// and we don't use any outlines for now.
outline-color: gtkalpha(currentColor, 0.3);
outline-style: dashed;
outline-offset: -3px;
outline-width: 1px;
}
// Widgets that draw their focus indicator outset and not inset
scale:focus(visible) > trough {
outline-color: gtkalpha(currentColor, 0.3);
outline-style: dashed;
outline-offset: 2px;
outline-width: 1px;
}
/***************
* Base States *
***************/
@@ -64,6 +38,78 @@ dnd {
-gtk-icon-size: 32px;
}
/*********
* Outlines *
********/
label:focus(visible),
row:focus(visible),
flowboxchild:focus(visible) {
// We use the outline properties to signal the focus properties
// to the adwaita engine: using real CSS properties is faster,
// and we don't use any outlines for now.
outline-color: $focus_border_color;
outline-style: solid;
outline-offset: -1px;
outline-width: 2px;
:selected & { outline-color: $coloured_focus_border_color; }
}
// Widgets that draw their focus indicator outset and not inset
scale:focus(visible) > trough {
outline-color: $focus_border_color;
outline-style: solid;
outline-offset: 10px;
outline-width: 2px;
}
button:focus(visible), modelbutton:focus(visible) {
outline-color: $focus_border_color;
outline-style: solid;
outline-offset: -2px;
outline-width: 2px;
row:selected & { outline-color: $coloured_focus_border_color; }
&.suggested-action, &.destructive-action { &, &:hover, &:active { outline-color: $coloured_focus_border_color; } }
}
// Draw the "outline" around the whole switch not the slider
switch:focus(visible) {
&, &:hover { slider { outline-color: transparent; } }
&:focus {
box-shadow: 0 0 0 3px if($variant=='light', lighten(opacify($focus_border_color, 1), 20%), $focus_border_color);
}
row:selected & { outline-color: $coloured_focus_border_color; }
}
checkbutton:focus(visible),
radiobutton:focus(visible) {
outline-color: $focus_border_color;
outline-style: solid;
outline-offset: 1px;
outline-width: 2px;
row:selected & , treeview:selected & { outline-color: $coloured_focus_border_color; }
}
row:focus(visible) {
outline-color: $focus_border_color;
outline-offset: -2px;
outline-style: solid;
&:selected {
outline-color: $coloured_focus_border_color;
}
}
treeview:focus(visible) {
outline-color: $focus_border_color;
outline-style: solid;
&:selected {
outline-color: $coloured_focus_border_color;
}
}
/*
These wildcard seems unavoidable, need to investigate.
Wildcards are bad and troublesome, use them with care,

17
gtk/theme/Adwaita/_drawing.scss
View File

@@ -22,14 +22,13 @@
}
// entries
@function entry_focus_border($fc:$selected_bg_color) {
@if $variant == 'light' { @return $fc; }
@else { @return if($fc==$selected_bg_color, $selected_borders_color, darken($fc, 35%)); }
@function entry_focus_border($fc:$focus_border_color) {
@return $fc;
}
@function entry_focus_shadow($fc:$selected_bg_color) { @return inset 0 0 0 1px $fc; }
@function entry_focus_shadow($fc:$focus_border_color) { @return inset 0 0 0 1px $fc; }
@mixin entry($t, $fc:$selected_bg_color, $edge: none) {
@mixin entry($t, $fc:$focus_border_color, $edge: none) {
//
// Entries drawing function
//
@@ -198,7 +197,6 @@
// normal button
//
color: $tc;
outline-color: transparentize($tc, 0.7);
border-color: if($c != $bg_color, _border_color($c), $borders_color);
border-bottom-color: if($c != $bg_color, _border_color($c, true), $alt_borders_color);
$button_fill: if($variant == 'light', linear-gradient(to top, darken($c, 4%) 2px, $c),
@@ -213,7 +211,6 @@
// hovered button
//
color: $tc;
outline-color: transparentize($tc, 0.7);
border-color: if($c != $bg_color, _border_color($c), $borders_color);
border-bottom-color: if($c != $bg_color, _border_color($c, true), $alt_borders_color);
@if $variant == 'light' {
@@ -234,7 +231,6 @@
// normal button alternative look
//
color: $tc;
outline-color: transparentize($tc, 0.7);
border-color: if($c != $bg_color, _border_color($c, true), $alt_borders_color);
@include _button_text_shadow($tc, $c);
@if $variant == 'light' {
@@ -254,7 +250,6 @@
// hovered button alternative look
//
color: $tc;
outline-color: transparentize($tc, 0.7);
border-color: if($c != $bg_color, _border_color($c, true), $alt_borders_color);
@if $variant == 'light' {
$button_fill: linear-gradient(to bottom, lighten($c, 9%) 10%, lighten($c, 4%) 90%) !global;
@@ -274,7 +269,6 @@
// pushed button
//
color: $tc;
outline-color: transparentize($tc, 0.7);
border-color: if($c != $bg_color, _border_color($c), $borders_color);
$button_fill: if($variant == 'light', image(darken($c, 14%)), image(darken($c, 9%))) !global;
background-image: $button_fill;
@@ -396,7 +390,6 @@
box-shadow: inset 0 1px transparentize(white, 0.9);
text-shadow: none;
-gtk-icon-shadow: none;
outline-color: transparentize($osd_fg_color, 0.7);
}
@else if $t==osd-hover {
@@ -414,7 +407,6 @@
box-shadow: inset 0 1px transparentize(white, 0.9);
text-shadow: none;
-gtk-icon-shadow: none;
outline-color: transparentize($osd_fg_color, 0.7);
}
@else if $t==osd-active {
@@ -432,7 +424,6 @@
box-shadow: none;
text-shadow: none;
-gtk-icon-shadow: none;
outline-color: transparentize($osd_fg_color, 0.7);
}
@else if $t==osd-insensitive {