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

db-ui · Nov 22, 2022 · 5083e91 · 5083e91
1 parent c7cdfca
commit 5083e91
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 0 deletions.
diff --git a/scss/_init.scss b/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)
+		);
+	}
+}
diff --git a/scss/db-ui-base.scss b/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;

diff --git a/tokens/transition.json b/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": {