From 7b608afff9035bb4ed95c2448d7653534e20c421 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Danielle=20For=C3=A9?= Date: Fri, 28 Mar 2025 11:45:27 -0700 Subject: [PATCH 1/3] Styles/Controls: prototype focus styles --- lib/Styles/Common/_controls.scss | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/lib/Styles/Common/_controls.scss b/lib/Styles/Common/_controls.scss index 6240e1358..a00abe5e2 100644 --- a/lib/Styles/Common/_controls.scss +++ b/lib/Styles/Common/_controls.scss @@ -19,5 +19,29 @@ scale-color($highlight_color, $alpha: -70%) ); } + + // FIXME: replace with accent color when we merge https://github.com/elementary/granite/pull/704 + &:focus { + @if $color-scheme == "light" { + border-color: #{'@BLUEBERRY_500'}; + outline-color: #{'alpha(@BLUEBERRY_500, 0.3)'}; + } @else { + border-color: #{'@BLUEBERRY_900'}; + outline-color: #{'alpha(@BLUEBERRY_300, 0.3)'}; + } + + outline-width: rem(2px); + outline-style: solid; + + animation: unfocus 600ms easing() 1s 1; + animation-fill-mode: forwards; + } + + @keyframes unfocus { + to { + border-color: $border-color; + outline-width: 0; + } + } } From f80e23e161e7245e402e12d77a031424dbe261ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Danielle=20For=C3=A9?= Date: Sat, 29 Mar 2025 22:05:15 -0700 Subject: [PATCH 2/3] Turns out GTK handles this automagically --- lib/Styles/Common/_controls.scss | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/lib/Styles/Common/_controls.scss b/lib/Styles/Common/_controls.scss index a00abe5e2..59d20dd4d 100644 --- a/lib/Styles/Common/_controls.scss +++ b/lib/Styles/Common/_controls.scss @@ -21,7 +21,7 @@ } // FIXME: replace with accent color when we merge https://github.com/elementary/granite/pull/704 - &:focus { + &:focus-visible { @if $color-scheme == "light" { border-color: #{'@BLUEBERRY_500'}; outline-color: #{'alpha(@BLUEBERRY_500, 0.3)'}; @@ -32,16 +32,6 @@ outline-width: rem(2px); outline-style: solid; - - animation: unfocus 600ms easing() 1s 1; - animation-fill-mode: forwards; - } - - @keyframes unfocus { - to { - border-color: $border-color; - outline-width: 0; - } } } From b7b8253a83b9bff8cb265b85e9a7738bda2aab7a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Danielle=20For=C3=A9?= Date: Sat, 29 Mar 2025 22:23:57 -0700 Subject: [PATCH 3/3] Fix some outline stuff --- lib/Styles/Common/_controls.scss | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/lib/Styles/Common/_controls.scss b/lib/Styles/Common/_controls.scss index 59d20dd4d..25c9e5c0e 100644 --- a/lib/Styles/Common/_controls.scss +++ b/lib/Styles/Common/_controls.scss @@ -22,16 +22,16 @@ // FIXME: replace with accent color when we merge https://github.com/elementary/granite/pull/704 &:focus-visible { + outline-color: #{'alpha(@BLUEBERRY_500, 0.5)'}; + outline-style: solid; + @if $color-scheme == "light" { - border-color: #{'@BLUEBERRY_500'}; - outline-color: #{'alpha(@BLUEBERRY_500, 0.3)'}; + outline-offset: -1px; + outline-width: calc(#{rem(2px)} + 1px); } @else { - border-color: #{'@BLUEBERRY_900'}; - outline-color: #{'alpha(@BLUEBERRY_300, 0.3)'}; + outline-offset: 0; + outline-width: 2px; } - - outline-width: rem(2px); - outline-style: solid; } }