Merge branch 'focus-outline-v2-77074'

* focus-outline-v2-77074:
  Add compiled code
  Colors: separate out blue and blue-light color, so we can use blue for the focused color and blue-light for the tag color. See #77074
  Add compiled code
  Focus: fix focus style for indeterminate checkboxes. See #77074
  Add compiled code
  Focus: remove obsolete mixin. See #77074
  Add compiled code
  Fix code style.
  List-View: make focus style the same as for buttons and inputs. See #77074
  Focus: make focus style customizable by using CSS variables, e.g. for tab or panel buttons. See #77074
  Checkbox: fix focus style when checkbox is active. See #77074
  Buttons: clearly distinguish focus and hover styles. See #77074
  Focus Outline: optimize focus outline to make it more visible, add the same style for list-view rows on focus. See #77074

Author: Stefanie Hein

public/cui_fylr.css

@@ -76,7 +76,8 @@ $grays: map.merge(
 	$grays
 );
 
-$blue:    #6bb2bb !default;
+$blue:    #0261f8 !default;
+$blue-light: #8bceec !default;
 $indigo:  #6610f2 !default;
 $purple:  #6f42c1 !default;
 $pink:    #b64b7c !default;
@@ -94,6 +95,7 @@ $colors: () !default;
 $colors: map.merge(
 	(
 		'blue':       $blue,
+		'blue-light': $blue-light,
 		'indigo':     $indigo,
 		'purple':     $purple,
 		'pink':       $pink,
@@ -121,7 +123,7 @@ $danger-bg-light: 	color.adjust($danger, $lightness: 39%) !default;
 $light:         	$gray-100 !default;
 $dark:          	$gray-800 !default;
 $muted:         	$gray-600 !default; // used in field-label, block description, empty label
-$focused:    		$cyan !default;
+$focused:    		$blue !default;
 $disabled:      	$muted !default;
 
 $disabled-opacity: 		0.5 !default;
@@ -318,9 +320,11 @@ $hr-border-color:   	rgb($gray-400, 0.5) !default; // make sure hr is visible on
 $hr-border-color-dark:  $dark !default;
 $hr-border-width:   	1px !default;
 
-$component-focus-shadow-color: rgb($focused, 0.25) !default;
-$component-focus-shadow: inset 0 0 0 2px $component-focus-shadow-color !default;
-$component-focus-border-color: 	rgb($focused, 0.5) !default;
+$component-focus-shadow-color: $focused !default;
+$component-focus-shadow: 
+	inset 0 0 0 var(--focus-shadow-outer-width, 2px) var(--focus-shadow-outer-color, #{$component-focus-shadow-color}), 
+	inset 0 0 0 var(--focus-shadow-inner-width, 4px) var(--focus-shadow-inner-color, #{$white}) !default;
+$component-focus-border-color: 	$focused !default;
 
 $component-selected-border-width: 1px !default;
 $component-selected-border-color: var(--brand-color, #{$primary}) !default;

src/scss/themes/fylr/_variables.scss

@@ -153,10 +153,12 @@
 			@include input-focus();
 		}
 
-		&.cui-active {
+		&.cui-active,
+		&.cui-indeterminate {
 			> .cui-button-visual > .cui-button-left span,
 			> .cui-button-visual > .cui-button-left i {
 				background-color: $focused; // make more prominent
+				box-shadow: none !important;
 			}
 		}
 	}

src/scss/themes/fylr/components/_checkbox.scss

@@ -1,5 +1,6 @@
 @use '../variables' as *;
 @use '../mixins/clickable' as *;
+@use '../mixins/list-view' as *;
 @use '../mixins/list-view-use-css-grid-layout' as *;
 @use '../mixins/pane' as *;
 
@@ -185,8 +186,7 @@
 
 	// be careful to apply a default select state, it's probably best to do this contextually in the theme
 	&.cui-selected,
-	&.cui-selected:hover,
-	&.cui-selected:focus {
+	&.cui-selected:hover {
 		> .cui-lv-tr {
 			box-shadow: inset 0 0 0 var(--list-view-selected-row-border-width) var(--list-view-selected-row-border-color);
 			background-color: var(--list-view-selected-row-background);
@@ -209,12 +209,18 @@
 	}
 
 	&.cui-row-invalid,
-	&.cui-row-invalid:hover,
-	&.cui-row-invalid:focus {
+	&.cui-row-invalid:hover {
 		> .cui-lv-tr {
 			background-color: var(--list-view-invalid-row-background);
 		}
 	}
+
+	&.cui-row-invalid:focus {
+		> .cui-lv-tr {
+			// todo: do wee need a different focus style here ?
+			// background-color: var(--list-view-invalid-row-background);
+		}
+	}
 }
 
 // * Special Header Row
@@ -427,12 +433,17 @@
 .cui-lv-tree-node--is-branch {
 	@include clickable();
 
-	&:hover,
-	&:focus {
+	&:hover {
 		> .cui-lv-tr {
 			background-color: var(--list-view-hover-row-background);
 		}
 	}
+
+	&:focus-visible {
+		> .cui-lv-tr {
+			@include list-view-row-focus();
+		}
+	}
 }
 
 // Special case, when there is a single column in the quadrant-2 that contains only the drag handle

src/scss/themes/fylr/components/_list-view.scss

@@ -73,6 +73,13 @@
 			}
 		}
 
+		&:focus {
+			.cui-button-visual {
+			    --focus-shadow-outer-width: 3px;
+			    --focus-shadow-inner-width: 5px;
+			}
+		}
+
 		&.cui-active {
 			.cui-button-visual {
 				color: var(--btn-color-active, #{$body-color});

src/scss/themes/fylr/components/_panel.scss

@@ -175,15 +175,6 @@
 				color: var(--btn-color-active, #{$tabs-active-color});
 			}
 		}
-
-		&:focus {
-			.cui-button-visual {
-				// add custom focus style
-				background-color: rgb($focused, 0.05);
-				color: var(--btn-color-active, #{$tabs-active-color});
-				box-shadow: $btn-focus-shadow !important;
-			}
-		}
 	}
 
 	// * Overflow Button
@@ -209,8 +200,7 @@
 			}
 		}
 
-		&:hover,
-		&:focus {
+		&:hover {
 			.cui-button-visual {
 				background-color: $tabs-overflow-button-background-hover;
 				color: $tabs-overflow-button-color-hover;
@@ -274,6 +264,16 @@
 						border-bottom: 1px solid var(--tabs-active-border-color, $tabs-active-border-color);
 					}
 				}
+
+				&:focus {
+					.cui-button-visual {
+						--tabs-active-border-color: #{$component-focus-shadow-color};
+						--focus-shadow-outer-width: 3px;
+						--focus-shadow-inner-width: 5px;
+
+						border-radius: $btn-border-radius;
+					}
+				}
 
 				&.cui-active {
 					.cui-button-visual {

src/scss/themes/fylr/components/_tabs.scss

@@ -196,8 +196,7 @@
 	}
 
 	&:not(.cui-disabled) {
-		&:hover,
-		&:focus {
+		&:hover {
 			.cui-button-visual {
 				color: var(--btn-color-hover, #{$color-hover});
 				background-color: var(--btn-background-hover, #{$background-hover});
@@ -207,7 +206,7 @@
 		&:focus {
 			outline: none;
 
-			.cui-button-visual {
+			> .cui-button-visual {
 				@include button-focus();
 			}
 		}
@@ -329,6 +328,10 @@
 		&:hover {
 			--btn-border-color: #{$btn-inverted-hover-border-color};
 		}
+
+		&:focus {
+			--focus-shadow-inner-color: transparent;
+		}
 	}
 }
 
@@ -444,6 +447,12 @@
 				box-shadow: none; // reset from button-color()
 			}
 		}
+
+		&:focus {
+			.cui-button-visual {
+				--btn-border-width: 1px;
+			}
+		}
 	}
 }
 

src/scss/themes/fylr/mixins/_buttons.scss

@@ -18,6 +18,27 @@
 	}
 }
 
+@mixin list-view-row-focus() {
+	position: relative;
+	
+	&::after {
+		content: '';
+		display: block;
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		pointer-events: none;
+		
+		@include button-focus();
+
+		border-radius: $btn-border-radius;
+		border-width: 1px;
+		border-style: solid; 
+	}
+}
+
 @mixin list-view-no-border() {
 	// border
 	--list-view-border-width: 0;