From 03079be8d1386ed86cb0493218fc8c7101021c60 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>
Date: Wed, 11 Sep 2024 15:01:59 +0200
Subject: [PATCH] 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 <104347736+nmerget@users.noreply.github.com>
---
 packages/foundations/scss/helpers/_focus.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/foundations/scss/helpers/_focus.scss b/packages/foundations/scss/helpers/_focus.scss
index 6eb9d3cc715..3b9e357247b 100644
--- 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;