review fixes

Jahia · Mar 3, 2025 · 87613ac · 87613ac
1 parent 4ec6793
commit 87613ac
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 17 deletions.
diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
@@ -3,7 +3,6 @@
 @use "../../tokens/spacings/spacings" as *;
 @use "../../globals/variants";
 
-$colors: "default", "accent", "danger";
 $button-size_small: 16px;
 $button-size_medium: 24px;
 $button-size_big: 32px;

diff --git a/src/components/Dropdown/Dropdown.scss b/src/components/Dropdown/Dropdown.scss
@@ -63,15 +63,6 @@
         border: var(--border-selector_active);
     }
 
-    // &:hover {
-    //     color: var(--color-accent);
-    // }
-
-    // &:focus {
-    //     border: var(--border-selector_focus);
-    //     outline: none;
-    // }
-
     &:not(.moonstone-filled) .moonstone-dropdown_label {
         font-style: italic;
         color: var(--color-gray_dark60);

diff --git a/src/globals/_variants.scss b/src/globals/_variants.scss
@@ -27,7 +27,7 @@
     &.moonstone-reverse {
         color: var(--color-light);
 
-        &:focus:not(:disabled),
+        &:focus-visible:not(:disabled),
         &:hover:not(:disabled) {
             color: var(--color-accent_light);
 
@@ -58,15 +58,17 @@
 }
 
 %variant_ghost_accent {
-    @extend %variant_ghost;
+    border: 1px solid transparent;
+
+    background-color: transparent;
 
     color: var(--color-accent);
 
     &:hover:not(:disabled) {
         color: var(--color-accent_dark);
     }
 
-    &:focus:not(:disabled) {
+    &:focus-visible:not(:disabled) {
         color: var(--color-accent_dark);
 
         border-color: var(--color-accent_dark);
@@ -85,7 +87,7 @@
             background-color: var(--color-accent40);
         }
 
-        &:focus:not(:disabled) {
+        &:focus-visible:not(:disabled) {
             color: var(--color-white);
 
             border-color: var(--color-white);
@@ -102,15 +104,18 @@
 }
 
 %variant_ghost_danger {
-    @extend %variant_ghost;
+
+    border: 1px solid transparent;
+
+    background-color: transparent;
 
     color: var(--color-danger);
 
     &:hover:not(:disabled) {
         color: var(--color-danger);
     }
 
-    &:focus:not(:disabled) {
+    &:focus-visible:not(:disabled) {
         color: var(--color-danger);
 
         border-color: var(--color-danger);
@@ -129,7 +134,7 @@
             background-color: var(--color-danger40);
         }
 
-        &:focus:not(:disabled) {
+        &:focus-visible:not(:disabled) {
             color: var(--color-white);
 
             border-color: var(--color-white);