diff --git a/scss/_init.scss b/scss/_init.scss new file mode 100644 index 000000000..f42bfc83b --- /dev/null +++ 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 index c0f884ff9..7ab532d00 100644 --- 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 index 16228876c..b9307dce1 100644 --- 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": {