diff --git a/.changeset/fair-shoes-teach.md b/.changeset/fair-shoes-teach.md new file mode 100644 index 000000000..2f7d311b8 --- /dev/null +++ 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 index 8add61497..3878c9a3b 100644 --- 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 index f2adac6f1..327f674b4 100644 --- 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,