refactor: provide possibility for a second focus color (#3153)

* refactor: readded focus box-shadow * refactor: provide this property within the Styling API * refactor: simplification as discussed and decided by @leape, @nmerget and myself, we're only providing the Styling API and the offset has a transparent color as a default. --------- Co-authored-by: Nicolas Merget <[email protected]>
db-ui · Sep 11, 2024 · 03079be · 03079be
1 parent 92b271d
commit 03079be
Showing 1 changed file with 2 additions and 1 deletion.
diff --git a/packages/foundations/scss/helpers/_focus.scss b/packages/foundations/scss/helpers/_focus.scss
@@ -2,8 +2,9 @@
 @use "../colors";
 
 %focus-placeholder {
-	outline: #{variables.$db-border-height-2xs} solid #{colors.$db-informational-on-bg-basic-emphasis-80-default};
+	outline: #{variables.$db-border-height-2xs} solid var(--db-focus-outline-color, #{colors.$db-informational-on-bg-basic-emphasis-80-default});
 	outline-offset: variables.$db-border-height-xs;
+	box-shadow: 0 0 0 #{variables.$db-border-height-xs} var(--db-focus-box-shadow-bg-color, transparent);
 
 	&:not([type="radio"], [role="switch"]) {
 		border-radius: variables.$db-border-radius-xs;