fix(button): outline hover state fixed (#187)

* fix(button): outline hover state fixed * docs: remove pseudo hover states at button Co-authored-by: Levent Anil Ozen <[email protected]>
Trendyol · Aug 12, 2022 · e03125f · e03125f
1 parent c24540d
commit e03125f
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 16 deletions.
diff --git a/src/components/button/bl-button.css b/src/components/button/bl-button.css
@@ -5,7 +5,7 @@
 
   --bl-button-main-color: var(--bl-color-primary);
   --bl-button-main-hover-color: var(--bl-color-primary-hover);
-  --bl-button-content-color: #fff;
+  --bl-button-content-color: var(--bl-color-primary-background);
   --bl-button-bg-color: var(--bl-button-main-color);
   --bl-button-border-color: var(--bl-button-main-color);
   --bl-button-padding-vertical: var(--bl-size-2xs);
@@ -91,16 +91,6 @@
   --bl-button-main-hover-color: var(--bl-color-danger-hover);
 }
 
-:host([text]) {
-  --bl-button-content-color: var(--bl-button-main-color);
-  --bl-button-border-color: transparent;
-  --bl-button-bg-color: transparent;
-}
-
-:host([text]) .button {
-  text-decoration: underline;
-}
-
 :host([disabled]) {
   cursor: not-allowed;
 
@@ -115,16 +105,26 @@
   text-decoration: none;
 }
 
-:host([outline]) {
+:host([text]) {
+  --bl-button-content-color: var(--bl-button-main-color);
+  --bl-button-border-color: transparent;
   --bl-button-bg-color: transparent;
 }
 
-:host([outline]:not(:hover):not([disabled])) {
+:host([text]) .button {
+  text-decoration: underline;
+}
+
+:host([outline]) {
+  --bl-button-bg-color: transparent;
   --bl-button-content-color: var(--bl-button-main-color);
 }
 
-:host([text]:not([disabled])) .button:hover {
+:host([outline]:hover:not([disabled])) {
+  --bl-button-content-color: var(--bl-color-primary-background);
+  --bl-button-bg-color: var(--bl-button-main-hover-color);
+}
+
+:host([text]:hover:not([disabled])) {
   --bl-button-content-color: var(--bl-button-main-hover-color);
-  --bl-button-border-color: transparent;
-  --bl-button-bg-color: transparent;
 }
diff --git a/src/components/button/bl-button.stories.mdx b/src/components/button/bl-button.stories.mdx
@@ -201,6 +201,7 @@ We have 2 types of disabled buttons: **Contained** and **Text**. Disable version
   </Story>
 </Canvas>
 
+
 ## Reference
 
 <ArgsTable of="bl-button" />