fix(fake-button): updated disabled styles (#2413)

eBay · Aug 21, 2024 · da48437 · da48437
1 parent 108f628
commit da48437
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 1 deletion.
diff --git a/.changeset/fair-shoes-teach.md b/.changeset/fair-shoes-teach.md
@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+fix(fake-button): updated disabled styles
diff --git a/dist/button/button.css b/dist/button/button.css
@@ -39,6 +39,14 @@ button.btn[disabled] {
     );
 }
 
+a.fake-btn:not([href]),
+a.fake-btn[aria-disabled="true"] {
+    color: var(
+        --link-foreground-color-disabled,
+        var(--color-foreground-disabled)
+    );
+}
+
 a.fake-btn--borderless,
 button.btn--borderless {
     border-color: transparent;
@@ -302,6 +310,10 @@ a.fake-btn--primary[aria-disabled="true"] {
         --btn-primary-disabled-border-color,
         var(--color-foreground-disabled)
     );
+    color: var(
+        --btn-primary-foreground-color,
+        var(--color-foreground-on-accent)
+    );
 }
 
 a.fake-btn--secondary,
@@ -433,10 +445,15 @@ button.btn--tertiary:not([disabled], [aria-disabled="true"]):active {
 }
 
 a.fake-btn--tertiary:not([href]),
+a.fake-btn--tertiary[aria-disabled="true"],
 button.btn--tertiary[aria-disabled="true"]:not(
         [aria-live="polite"][aria-disabled="true"]
     ),
 button.btn--tertiary[disabled] {
+    border-color: var(
+        --expand-btn-disabled-border-color,
+        var(--color-stroke-disabled)
+    );
     color: var(
         --btn-tertiary-disabled-foreground-color,
         var(--color-background-disabled)

diff --git a/src/sass/button/button.scss b/src/sass/button/button.scss
@@ -28,6 +28,14 @@ button.btn[aria-disabled="true"] {
     );
 }
 
+a.fake-btn:not([href]),
+a.fake-btn[aria-disabled="true"] {
+    @include color-token(
+        link-foreground-color-disabled,
+        color-foreground-disabled
+    );
+}
+
 button.btn--borderless,
 a.fake-btn--borderless {
     border-color: transparent;
@@ -256,6 +264,10 @@ a.fake-btn--primary[aria-disabled="true"] {
         btn-primary-disabled-border-color,
         color-foreground-disabled
     );
+    @include color-token(
+        btn-primary-foreground-color,
+        color-foreground-on-accent
+    );
 }
 
 button.btn--secondary,
@@ -394,11 +406,16 @@ button.btn--tertiary[disabled],
 button.btn--tertiary[aria-disabled="true"]:not(
         [aria-live="polite"][aria-disabled="true"]
     ),
-a.fake-btn--tertiary:not([href]) {
+a.fake-btn--tertiary:not([href]),
+a.fake-btn--tertiary[aria-disabled="true"] {
     @include color-token(
         btn-tertiary-disabled-foreground-color,
         color-background-disabled
     );
+    @include border-color-token(
+        expand-btn-disabled-border-color,
+        color-stroke-disabled
+    );
 }
 
 button.btn--tertiary.btn--destructive,