[gtk/wip/jimmac/focus-ring-solid: 2/2] Adwaita: solid focus rings

[Jakub Steiner <jimmac src gnome org>]

commit 22ab34a2a092a83cbd4e0f6c51df846a0778a07e
Author: Jakub Steiner <jimmac gmail com>
Date:   Tue Mar 19 14:48:16 2019 +0100

    Adwaita: solid focus rings
    
    - FIXME: labels (bit too dominant now)
    - FIXME: switch:on (blue fill merges with outline)
    
    Addresses issue https://gitlab.gnome.org/GNOME/gtk/issues/1424

 gtk/theme/Adwaita/_common.scss           |  7 ++++++-
 gtk/theme/Adwaita/gtk-contained-dark.css | 12 +++++++-----
 gtk/theme/Adwaita/gtk-contained.css      | 12 +++++++-----
 3 files changed, 20 insertions(+), 11 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 213bdedda5..81260a0e08 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -32,7 +32,7 @@ flowboxchild:focus(visible) {
   outline-style: solid;
   outline-offset: -2px;
   outline-width: 2px;
-  -gtk-outline-radius: $button-radius - 2;
+  -gtk-outline-radius: $button-radius;
 }
 
 
@@ -956,6 +956,7 @@ toolbar.inline-toolbar toolbutton:backdrop {
 %linked_middle {
   border-radius: 0;
   border-right-style: none;
+  -gtk-outline-radius: 0;
 }
 
 %linked_left {
@@ -964,6 +965,7 @@ toolbar.inline-toolbar toolbutton:backdrop {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
     border-right-style: none;
+    -gtk-outline-radius: $button_radius 0 0 $button_radius;
 }
 
 %linked_right {
@@ -972,6 +974,7 @@ toolbar.inline-toolbar toolbutton:backdrop {
     border-top-right-radius: $button_radius;
     border-bottom-right-radius: $button_radius;
     border-right-style: solid;
+    -gtk-outline-radius: 0 $button_radius $button_radius 0;
 }
 
 // 1st/last child are at text start/end
@@ -2702,6 +2705,8 @@ switch {
   background-color: $dark_fill;
   text-shadow: 0 1px transparentize(black, 0.9);
 
+  &:dir(ltr),
+  &:dir(rtl) { -gtk-outline-radius: 9999px; } /* specificity bump not to be overriden by %linked */
   &:checked {
     color: $selected_fg_color;
     border-color: $selected_borders_color;
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index b8a5da7f5b..dd772f8034 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -1,6 +1,6 @@
 * { padding: 0; -gtk-secondary-caret-color: #15539e; }
 
-button:focus(visible), checkbutton:focus(visible), radiobutton:focus(visible), switch:focus(visible), 
scale:focus(visible), label:focus(visible), row:focus(visible), flowboxchild:focus(visible) { outline-color: 
#15539e; outline-style: solid; outline-offset: -2px; outline-width: 2px; -gtk-outline-radius: 3px; }
+button:focus(visible), checkbutton:focus(visible), radiobutton:focus(visible), switch:focus(visible), 
scale:focus(visible), label:focus(visible), row:focus(visible), flowboxchild:focus(visible) { outline-color: 
#15539e; outline-style: solid; outline-offset: -2px; outline-width: 2px; -gtk-outline-radius: 5px; }
 
 /*************** Base States * */
 .background { color: #eeeeec; background-color: #353535; }
@@ -436,11 +436,11 @@ button.circular:hover:not(:checked):not(:active):not(:disabled):not(:backdrop) {
 
 .inline-toolbar toolbutton > button:backdrop:disabled:active label, .inline-toolbar toolbutton > 
button:backdrop:disabled:checked label { color: #5b5b5b; }
 
-toolbar.inline-toolbar toolbutton > button.flat, toolbar.inline-toolbar toolbutton:backdrop > button.flat, 
.linked:not(.vertical) > spinbutton:not(.vertical), spinbutton.vertical .linked:not(.vertical) > text, 
.linked:not(.vertical) > entry, .inline-toolbar button, .inline-toolbar button:backdrop, .linked > button, 
.linked > button:hover, .linked > button:active, .linked > button:checked, .linked > button:backdrop, .linked 
> combobox > box > button.combo:dir(ltr), .linked > combobox > box > button.combo:dir(rtl) { border-radius: 
0; border-right-style: none; }
+toolbar.inline-toolbar toolbutton > button.flat, toolbar.inline-toolbar toolbutton:backdrop > button.flat, 
.linked:not(.vertical) > spinbutton:not(.vertical), spinbutton.vertical .linked:not(.vertical) > text, 
.linked:not(.vertical) > entry, .inline-toolbar button, .inline-toolbar button:backdrop, .linked > button, 
.linked > button:hover, .linked > button:active, .linked > button:checked, .linked > button:backdrop, .linked 
> combobox > box > button.combo:dir(ltr), .linked > combobox > box > button.combo:dir(rtl) { border-radius: 
0; border-right-style: none; -gtk-outline-radius: 0; }
 
-.linked:not(.vertical) > spinbutton:dir(ltr):first-child:not(.vertical), spinbutton.vertical 
.linked:not(.vertical) > text:dir(ltr):first-child, .linked:not(.vertical) > entry:dir(ltr):first-child, 
.inline-toolbar button:dir(ltr):first-child, .linked > button:dir(ltr):first-child, toolbar.inline-toolbar 
toolbutton:first-child > button.flat:dir(ltr), toolbar.inline-toolbar toolbutton:backdrop:first-child > 
button.flat:dir(ltr), combobox.linked button:dir(ltr):nth-child(2):dir(rtl), .linked:not(.vertical) > 
combobox:first-child > box > button.combo:dir(ltr), .linked:not(.vertical) > 
spinbutton:dir(rtl):last-child:not(.vertical), spinbutton.vertical .linked:not(.vertical) > 
text:dir(rtl):last-child, .linked:not(.vertical) > entry:dir(rtl):last-child, .inline-toolbar 
button:dir(rtl):last-child, .linked > button:dir(rtl):last-child, toolbar.inline-toolbar 
toolbutton:last-child > button.flat:dir(rtl), toolbar.inline-toolbar toolbutton:backdrop:last-child > 
button.flat:dir(rtl), .l
 inked:no
 t(.vertical) > combobox:last-child > box > button.combo:dir(rtl) { border-top-left-radius: 5px; 
border-bottom-left-radius: 5px; border-top-right-radius: 0; border-bottom-right-radius: 0; 
border-right-style: none; }
+.linked:not(.vertical) > spinbutton:dir(ltr):first-child:not(.vertical), spinbutton.vertical 
.linked:not(.vertical) > text:dir(ltr):first-child, .linked:not(.vertical) > entry:dir(ltr):first-child, 
.inline-toolbar button:dir(ltr):first-child, .linked > button:dir(ltr):first-child, toolbar.inline-toolbar 
toolbutton:first-child > button.flat:dir(ltr), toolbar.inline-toolbar toolbutton:backdrop:first-child > 
button.flat:dir(ltr), combobox.linked button:dir(ltr):nth-child(2):dir(rtl), .linked:not(.vertical) > 
combobox:first-child > box > button.combo:dir(ltr), .linked:not(.vertical) > 
spinbutton:dir(rtl):last-child:not(.vertical), spinbutton.vertical .linked:not(.vertical) > 
text:dir(rtl):last-child, .linked:not(.vertical) > entry:dir(rtl):last-child, .inline-toolbar 
button:dir(rtl):last-child, .linked > button:dir(rtl):last-child, toolbar.inline-toolbar 
toolbutton:last-child > button.flat:dir(rtl), toolbar.inline-toolbar toolbutton:backdrop:last-child > 
button.flat:dir(rtl), .l
 inked:no
 t(.vertical) > combobox:last-child > box > button.combo:dir(rtl) { border-top-left-radius: 5px; 
border-bottom-left-radius: 5px; border-top-right-radius: 0; border-bottom-right-radius: 0; 
border-right-style: none; -gtk-outline-radius: 5px 0 0 5px; }
 
-.linked:not(.vertical) > spinbutton:dir(ltr):last-child:not(.vertical), spinbutton.vertical 
.linked:not(.vertical) > text:dir(ltr):last-child, .linked:not(.vertical) > entry:dir(ltr):last-child, 
.inline-toolbar button:dir(ltr):last-child, .linked > button:dir(ltr):last-child, toolbar.inline-toolbar 
toolbutton:last-child > button.flat:dir(ltr), toolbar.inline-toolbar toolbutton:backdrop:last-child > 
button.flat:dir(ltr), combobox.linked button:dir(ltr):nth-child(2), .linked:not(.vertical) > 
combobox:last-child > box > button.combo:dir(ltr), .linked:not(.vertical) > 
spinbutton:dir(rtl):first-child:not(.vertical), spinbutton.vertical .linked:not(.vertical) > 
text:dir(rtl):first-child, .linked:not(.vertical) > entry:dir(rtl):first-child, .inline-toolbar 
button:dir(rtl):first-child, .linked > button:dir(rtl):first-child, toolbar.inline-toolbar 
toolbutton:first-child > button.flat:dir(rtl), toolbar.inline-toolbar toolbutton:backdrop:first-child > 
button.flat:dir(rtl), combobox.lin
 ked butt
 on:dir(rtl):nth-child(2), .linked:not(.vertical) > combobox:first-child > box > button.combo:dir(rtl) { 
border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 5px; 
border-bottom-right-radius: 5px; border-right-style: solid; }
+.linked:not(.vertical) > spinbutton:dir(ltr):last-child:not(.vertical), spinbutton.vertical 
.linked:not(.vertical) > text:dir(ltr):last-child, .linked:not(.vertical) > entry:dir(ltr):last-child, 
.inline-toolbar button:dir(ltr):last-child, .linked > button:dir(ltr):last-child, toolbar.inline-toolbar 
toolbutton:last-child > button.flat:dir(ltr), toolbar.inline-toolbar toolbutton:backdrop:last-child > 
button.flat:dir(ltr), combobox.linked button:dir(ltr):nth-child(2), .linked:not(.vertical) > 
combobox:last-child > box > button.combo:dir(ltr), .linked:not(.vertical) > 
spinbutton:dir(rtl):first-child:not(.vertical), spinbutton.vertical .linked:not(.vertical) > 
text:dir(rtl):first-child, .linked:not(.vertical) > entry:dir(rtl):first-child, .inline-toolbar 
button:dir(rtl):first-child, .linked > button:dir(rtl):first-child, toolbar.inline-toolbar 
toolbutton:first-child > button.flat:dir(rtl), toolbar.inline-toolbar toolbutton:backdrop:first-child > 
button.flat:dir(rtl), combobox.lin
 ked butt
 on:dir(rtl):nth-child(2), .linked:not(.vertical) > combobox:first-child > box > button.combo:dir(rtl) { 
border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 5px; 
border-bottom-right-radius: 5px; border-right-style: solid; -gtk-outline-radius: 0 5px 5px 0; }
 
 .linked:not(.vertical) > spinbutton:only-child:not(.vertical), spinbutton.vertical .linked:not(.vertical) > 
text:only-child, .linked:not(.vertical) > entry:only-child, .inline-toolbar button:only-child, .linked > 
button:only-child, toolbar.inline-toolbar toolbutton:only-child > button.flat, toolbar.inline-toolbar 
toolbutton:backdrop:only-child > button.flat, .linked:not(.vertical) > combobox:only-child > box > 
button.combo { border-radius: 3px; border-style: solid; }
 
@@ -1093,7 +1093,9 @@ scrollbar.horizontal button.up { -gtk-icon-source: -gtk-icontheme("pan-start-sym
 treeview ~ scrollbar.vertical { border-top: 1px solid #1b1b1b; margin-top: -1px; }
 
 /********** Switch * */
-switch { font-weight: bold; font-size: smaller; outline-offset: -4px; border: 1px solid #1b1b1b; 
border-radius: 14px; color: #eeeeec; background-color: #282828; text-shadow: 0 1px rgba(0, 0, 0, 0.1); /* 
only show i / o for the accessible theme */ }
+switch { font-weight: bold; font-size: smaller; outline-offset: -4px; border: 1px solid #1b1b1b; 
border-radius: 14px; color: #eeeeec; background-color: #282828; text-shadow: 0 1px rgba(0, 0, 0, 0.1); /* 
specificity bump not to be overriden by %linked */ /* only show i / o for the accessible theme */ }
+
+switch:dir(ltr), switch:dir(rtl) { -gtk-outline-radius: 9999px; }
 
 switch:checked { color: #ffffff; border-color: #030c17; background-color: #15539e; text-shadow: 0 1px 
rgba(3, 12, 23, 0.5), 0 0 2px rgba(255, 255, 255, 0.6); }
 
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 9fc8fe869f..3b6b0b69aa 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -1,6 +1,6 @@
 * { padding: 0; -gtk-secondary-caret-color: #3584e4; }
 
-button:focus(visible), checkbutton:focus(visible), radiobutton:focus(visible), switch:focus(visible), 
scale:focus(visible), label:focus(visible), row:focus(visible), flowboxchild:focus(visible) { outline-color: 
#3584e4; outline-style: solid; outline-offset: -2px; outline-width: 2px; -gtk-outline-radius: 3px; }
+button:focus(visible), checkbutton:focus(visible), radiobutton:focus(visible), switch:focus(visible), 
scale:focus(visible), label:focus(visible), row:focus(visible), flowboxchild:focus(visible) { outline-color: 
#3584e4; outline-style: solid; outline-offset: -2px; outline-width: 2px; -gtk-outline-radius: 5px; }
 
 /*************** Base States * */
 .background { color: #2e3436; background-color: #f6f5f4; }
@@ -438,11 +438,11 @@ button.circular:hover:not(:checked):not(:active):not(:disabled):not(:backdrop) {
 
 .inline-toolbar toolbutton > button:backdrop:disabled:active label, .inline-toolbar toolbutton > 
button:backdrop:disabled:checked label { color: #d4cfca; }
 
-toolbar.inline-toolbar toolbutton > button.flat, toolbar.inline-toolbar toolbutton:backdrop > button.flat, 
.linked:not(.vertical) > spinbutton:not(.vertical), spinbutton.vertical .linked:not(.vertical) > text, 
.linked:not(.vertical) > entry, .inline-toolbar button, .inline-toolbar button:backdrop, .linked > button, 
.linked > button:hover, .linked > button:active, .linked > button:checked, .linked > button:backdrop, .linked 
> combobox > box > button.combo:dir(ltr), .linked > combobox > box > button.combo:dir(rtl) { border-radius: 
0; border-right-style: none; }
+toolbar.inline-toolbar toolbutton > button.flat, toolbar.inline-toolbar toolbutton:backdrop > button.flat, 
.linked:not(.vertical) > spinbutton:not(.vertical), spinbutton.vertical .linked:not(.vertical) > text, 
.linked:not(.vertical) > entry, .inline-toolbar button, .inline-toolbar button:backdrop, .linked > button, 
.linked > button:hover, .linked > button:active, .linked > button:checked, .linked > button:backdrop, .linked 
> combobox > box > button.combo:dir(ltr), .linked > combobox > box > button.combo:dir(rtl) { border-radius: 
0; border-right-style: none; -gtk-outline-radius: 0; }
 
-.linked:not(.vertical) > spinbutton:dir(ltr):first-child:not(.vertical), spinbutton.vertical 
.linked:not(.vertical) > text:dir(ltr):first-child, .linked:not(.vertical) > entry:dir(ltr):first-child, 
.inline-toolbar button:dir(ltr):first-child, .linked > button:dir(ltr):first-child, toolbar.inline-toolbar 
toolbutton:first-child > button.flat:dir(ltr), toolbar.inline-toolbar toolbutton:backdrop:first-child > 
button.flat:dir(ltr), combobox.linked button:dir(ltr):nth-child(2):dir(rtl), .linked:not(.vertical) > 
combobox:first-child > box > button.combo:dir(ltr), .linked:not(.vertical) > 
spinbutton:dir(rtl):last-child:not(.vertical), spinbutton.vertical .linked:not(.vertical) > 
text:dir(rtl):last-child, .linked:not(.vertical) > entry:dir(rtl):last-child, .inline-toolbar 
button:dir(rtl):last-child, .linked > button:dir(rtl):last-child, toolbar.inline-toolbar 
toolbutton:last-child > button.flat:dir(rtl), toolbar.inline-toolbar toolbutton:backdrop:last-child > 
button.flat:dir(rtl), .l
 inked:no
 t(.vertical) > combobox:last-child > box > button.combo:dir(rtl) { border-top-left-radius: 5px; 
border-bottom-left-radius: 5px; border-top-right-radius: 0; border-bottom-right-radius: 0; 
border-right-style: none; }
+.linked:not(.vertical) > spinbutton:dir(ltr):first-child:not(.vertical), spinbutton.vertical 
.linked:not(.vertical) > text:dir(ltr):first-child, .linked:not(.vertical) > entry:dir(ltr):first-child, 
.inline-toolbar button:dir(ltr):first-child, .linked > button:dir(ltr):first-child, toolbar.inline-toolbar 
toolbutton:first-child > button.flat:dir(ltr), toolbar.inline-toolbar toolbutton:backdrop:first-child > 
button.flat:dir(ltr), combobox.linked button:dir(ltr):nth-child(2):dir(rtl), .linked:not(.vertical) > 
combobox:first-child > box > button.combo:dir(ltr), .linked:not(.vertical) > 
spinbutton:dir(rtl):last-child:not(.vertical), spinbutton.vertical .linked:not(.vertical) > 
text:dir(rtl):last-child, .linked:not(.vertical) > entry:dir(rtl):last-child, .inline-toolbar 
button:dir(rtl):last-child, .linked > button:dir(rtl):last-child, toolbar.inline-toolbar 
toolbutton:last-child > button.flat:dir(rtl), toolbar.inline-toolbar toolbutton:backdrop:last-child > 
button.flat:dir(rtl), .l
 inked:no
 t(.vertical) > combobox:last-child > box > button.combo:dir(rtl) { border-top-left-radius: 5px; 
border-bottom-left-radius: 5px; border-top-right-radius: 0; border-bottom-right-radius: 0; 
border-right-style: none; -gtk-outline-radius: 5px 0 0 5px; }
 
-.linked:not(.vertical) > spinbutton:dir(ltr):last-child:not(.vertical), spinbutton.vertical 
.linked:not(.vertical) > text:dir(ltr):last-child, .linked:not(.vertical) > entry:dir(ltr):last-child, 
.inline-toolbar button:dir(ltr):last-child, .linked > button:dir(ltr):last-child, toolbar.inline-toolbar 
toolbutton:last-child > button.flat:dir(ltr), toolbar.inline-toolbar toolbutton:backdrop:last-child > 
button.flat:dir(ltr), combobox.linked button:dir(ltr):nth-child(2), .linked:not(.vertical) > 
combobox:last-child > box > button.combo:dir(ltr), .linked:not(.vertical) > 
spinbutton:dir(rtl):first-child:not(.vertical), spinbutton.vertical .linked:not(.vertical) > 
text:dir(rtl):first-child, .linked:not(.vertical) > entry:dir(rtl):first-child, .inline-toolbar 
button:dir(rtl):first-child, .linked > button:dir(rtl):first-child, toolbar.inline-toolbar 
toolbutton:first-child > button.flat:dir(rtl), toolbar.inline-toolbar toolbutton:backdrop:first-child > 
button.flat:dir(rtl), combobox.lin
 ked butt
 on:dir(rtl):nth-child(2), .linked:not(.vertical) > combobox:first-child > box > button.combo:dir(rtl) { 
border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 5px; 
border-bottom-right-radius: 5px; border-right-style: solid; }
+.linked:not(.vertical) > spinbutton:dir(ltr):last-child:not(.vertical), spinbutton.vertical 
.linked:not(.vertical) > text:dir(ltr):last-child, .linked:not(.vertical) > entry:dir(ltr):last-child, 
.inline-toolbar button:dir(ltr):last-child, .linked > button:dir(ltr):last-child, toolbar.inline-toolbar 
toolbutton:last-child > button.flat:dir(ltr), toolbar.inline-toolbar toolbutton:backdrop:last-child > 
button.flat:dir(ltr), combobox.linked button:dir(ltr):nth-child(2), .linked:not(.vertical) > 
combobox:last-child > box > button.combo:dir(ltr), .linked:not(.vertical) > 
spinbutton:dir(rtl):first-child:not(.vertical), spinbutton.vertical .linked:not(.vertical) > 
text:dir(rtl):first-child, .linked:not(.vertical) > entry:dir(rtl):first-child, .inline-toolbar 
button:dir(rtl):first-child, .linked > button:dir(rtl):first-child, toolbar.inline-toolbar 
toolbutton:first-child > button.flat:dir(rtl), toolbar.inline-toolbar toolbutton:backdrop:first-child > 
button.flat:dir(rtl), combobox.lin
 ked butt
 on:dir(rtl):nth-child(2), .linked:not(.vertical) > combobox:first-child > box > button.combo:dir(rtl) { 
border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 5px; 
border-bottom-right-radius: 5px; border-right-style: solid; -gtk-outline-radius: 0 5px 5px 0; }
 
 .linked:not(.vertical) > spinbutton:only-child:not(.vertical), spinbutton.vertical .linked:not(.vertical) > 
text:only-child, .linked:not(.vertical) > entry:only-child, .inline-toolbar button:only-child, .linked > 
button:only-child, toolbar.inline-toolbar toolbutton:only-child > button.flat, toolbar.inline-toolbar 
toolbutton:backdrop:only-child > button.flat, .linked:not(.vertical) > combobox:only-child > box > 
button.combo { border-radius: 3px; border-style: solid; }
 
@@ -1101,7 +1101,9 @@ scrollbar.horizontal button.up { -gtk-icon-source: -gtk-icontheme("pan-start-sym
 treeview ~ scrollbar.vertical { border-top: 1px solid #cdc7c2; margin-top: -1px; }
 
 /********** Switch * */
-switch { font-weight: bold; font-size: smaller; outline-offset: -4px; border: 1px solid #cdc7c2; 
border-radius: 14px; color: #2e3436; background-color: #e1dedb; text-shadow: 0 1px rgba(0, 0, 0, 0.1); /* 
only show i / o for the accessible theme */ }
+switch { font-weight: bold; font-size: smaller; outline-offset: -4px; border: 1px solid #cdc7c2; 
border-radius: 14px; color: #2e3436; background-color: #e1dedb; text-shadow: 0 1px rgba(0, 0, 0, 0.1); /* 
specificity bump not to be overriden by %linked */ /* only show i / o for the accessible theme */ }
+
+switch:dir(ltr), switch:dir(rtl) { -gtk-outline-radius: 9999px; }
 
 switch:checked { color: #ffffff; border-color: #185fb4; background-color: #3584e4; text-shadow: 0 1px 
rgba(24, 95, 180, 0.5), 0 0 2px rgba(255, 255, 255, 0.6); }