feat(style): use common focus mixin

ovh · Jul 29, 2024 · 3484013 · 3484013
1 parent 7ac8d53
commit 3484013
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 5 deletions.
diff --git a/packages/ods/src/style/_button.scss b/packages/ods/src/style/_button.scss
@@ -1,3 +1,5 @@
+@import './focus';
+
 @mixin ods-button($color, $size, $variant) {
   display: inline-flex;
   align-items: center;
@@ -24,8 +26,7 @@
 
   &:not(:disabled) {
     &:focus {
-      outline: solid 2px var(--ods-color-primary-700);
-      outline-offset: 2px;
+      @include ods-focus;
     }
   }
 

diff --git a/packages/ods/src/style/_focus.scss b/packages/ods/src/style/_focus.scss
@@ -0,0 +1,4 @@
+@mixin ods-focus() {
+  outline: var(--ods-outline-style) var(--ods-outline-width) var(--ods-color-primary-700);
+  outline-offset: var(--ods-outline-offset);
+}
diff --git a/packages/ods/src/style/_link.scss b/packages/ods/src/style/_link.scss
@@ -1,3 +1,5 @@
+@import './focus';
+
 @mixin ods-link() {
   display: inline-flex;
   align-items: center;
@@ -18,7 +20,6 @@
   }
 
   &:focus-visible {
-    outline: currentcolor var(--ods-outline-style) var(--ods-outline-width);
-    outline-offset: var(--ods-outline-offset);
+    @include ods-focus;
   }
 }
diff --git a/packages/ods/src/style/index.scss b/packages/ods/src/style/index.scss
@@ -1,5 +1,6 @@
 @forward 'button';
+@forward 'focus';
+@forward 'link';
 @forward 'skeleton';
 @forward 'text';
 @forward 'tooltip';
-@forward 'link';