feat: add focus als general _init.scss (#159)

Author: nmerget

scss/_init.scss

@@ -0,0 +1,24 @@
+@use "variables" as *;
+
+:root {
+	--db-focus-outline-offset: 1px;
+	--db-focus-outline-color: #{$db-colors-information-enabled};
+	--db-focus-outline-transition-duration: #{$db-transition-duration-ultra-fast};
+	--db-focus-outline-size: max(2px, 0.08em);
+}
+
+// Focus styles
+%focus-placeholder,
+:is(a, button, input, textarea, summary) {
+	transition: outline var(--db-focus-outline-transition-duration);
+
+	&:focus-visible {
+		outline: var(--db-focus-outline-size)
+			var(--db-focus-outline-style, solid)
+			var(--db-focus-outline-color, currentColor);
+		outline-offset: var(
+			--db-focus-outline-offset,
+			var(--db-focus-outline-size)
+		);
+	}
+}

scss/db-ui-base.scss

@@ -4,6 +4,7 @@
 @use "variables.global" as *;
 @use "color-placeholder" as *;
 @use "tonality" as *;
+@use "init" as *;
 
 :root {
 	@extend %db-ui-normal;

tokens/transition.json

@@ -4,6 +4,10 @@
 			"fast": {
 				"value": "0.3s",
 				"comment": "Consider this as beta for the moment"
+			},
+			"ultra-fast": {
+				"value": "0.06s",
+				"comment": "Consider this as beta for the moment"
 			}
 		},
 		"emotional": {