From 87613ac5b22ee849c02aae2f7e244a808d844c4e Mon Sep 17 00:00:00 2001
From: Eevolee <eevee4224@gmail.com>
Date: Mon, 3 Mar 2025 14:58:01 +0100
Subject: [PATCH] review fixes

---
 src/components/Button/Button.scss     |  1 -
 src/components/Dropdown/Dropdown.scss |  9 ---------
 src/globals/_variants.scss            | 19 ++++++++++++-------
 3 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
index 9eb9cdf9..df3e5a07 100644
--- 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
index e47d74bc..5eda4b7b 100644
--- 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
index 5a8c94b2..e009b484 100644
--- 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,7 +58,9 @@
 }
 
 %variant_ghost_accent {
-    @extend %variant_ghost;
+    border: 1px solid transparent;
+
+    background-color: transparent;
 
     color: var(--color-accent);
 
@@ -66,7 +68,7 @@
         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,7 +104,10 @@
 }
 
 %variant_ghost_danger {
-    @extend %variant_ghost;
+
+    border: 1px solid transparent;
+
+    background-color: transparent;
 
     color: var(--color-danger);
 
@@ -110,7 +115,7 @@
         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);