From 21c87cc1d6c471420be3662eab24ee80bd42e7da Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Mon, 12 Jan 2026 18:52:52 +0000 Subject: [PATCH] Fix disabled state on Button Signed-off-by: Charles de Dreuille --- .changeset/chilly-maps-heal.md | 5 ++ .storybook/themes/spotify.css | 11 ++-- .../src/components/Button/Button.module.css | 17 +++--- .../src/components/Button/Button.stories.tsx | 60 ------------------- packages/ui/src/css/tokens.css | 8 +-- 5 files changed, 22 insertions(+), 79 deletions(-) create mode 100644 .changeset/chilly-maps-heal.md diff --git a/.changeset/chilly-maps-heal.md b/.changeset/chilly-maps-heal.md new file mode 100644 index 0000000000..f4f583c9ee --- /dev/null +++ b/.changeset/chilly-maps-heal.md @@ -0,0 +1,5 @@ +--- +'@backstage/ui': patch +--- + +Fixes disabled state in primary and secondary buttons in Backstage UI. diff --git a/.storybook/themes/spotify.css b/.storybook/themes/spotify.css index db3a0ca16c..352c633a15 100644 --- a/.storybook/themes/spotify.css +++ b/.storybook/themes/spotify.css @@ -219,11 +219,12 @@ --bui-bg-solid: #1ed760; --bui-bg-solid-hover: #3be477; --bui-bg-solid-pressed: #1abc54; - --bui-bg-solid-disabled: var(--bui-gray-2); + --bui-bg-solid-disabled: #0f6c30; --bui-fg-primary: var(--bui-black); --bui-fg-secondary: var(--bui-gray-7); --bui-fg-solid: var(--bui-black); + --bui-fg-solid-disabled: #62ab7c; --bui-border: var(--bui-gray-3); --bui-border-hover: rgba(0, 0, 0, 0.3); @@ -246,14 +247,12 @@ [data-theme-mode='dark'][data-theme-name='spotify'] { --bui-bg-surface-0: var(--bui-black); + --bui-bg-solid: #1ed760; --bui-bg-solid-hover: #3be477; --bui-bg-solid-pressed: #1abc54; --bui-bg-solid-disabled: #0f6c30; - --bui-bg-tint: #242424; - --bui-bg-tint-hover: #202020; - --bui-bg-tint-pressed: #292929; - --bui-bg-tint-disabled: rgba(255, 255, 255, 0.8); + --bui-bg-danger: #3b1219; --bui-bg-warning: #302008; --bui-bg-success: #132d21; @@ -264,7 +263,7 @@ --bui-fg-link-hover: var(--bui-white); --bui-fg-disabled: var(--bui-gray-5); --bui-fg-solid: var(--bui-black); - --bui-fg-solid-disabled: #083618; + --bui-fg-solid-disabled: #072f15; --bui-fg-tint: var(--bui-white); --bui-fg-tint-disabled: var(--bui-gray-5); --bui-fg-danger: #e22b2b; diff --git a/packages/ui/src/components/Button/Button.module.css b/packages/ui/src/components/Button/Button.module.css index 16d4b8be6c..0787b7e760 100644 --- a/packages/ui/src/components/Button/Button.module.css +++ b/packages/ui/src/components/Button/Button.module.css @@ -71,23 +71,23 @@ color: var(--bui-fg-primary); background-color: var(--bui-bg-neutral-on-surface-0); - &:hover { + &:hover:not([data-disabled='true']):not([data-loading='true']) { background-color: var(--bui-bg-neutral-on-surface-0-hover); transition: background-color 150ms ease; } - &:active { + &:active:not([data-disabled='true']):not([data-loading='true']) { background-color: var(--bui-bg-neutral-on-surface-0-pressed); } &[data-on-surface='1'] { background-color: var(--bui-bg-neutral-on-surface-1); - &:hover { + &:hover:not([data-disabled='true']):not([data-loading='true']) { background-color: var(--bui-bg-neutral-on-surface-1-hover); } - &:active { + &:active:not([data-disabled='true']):not([data-loading='true']) { background-color: var(--bui-bg-neutral-on-surface-1-pressed); } } @@ -95,11 +95,11 @@ &[data-on-surface='2'] { background-color: var(--bui-bg-neutral-on-surface-2); - &:hover { + &:hover:not([data-disabled='true']):not([data-loading='true']) { background-color: var(--bui-bg-neutral-on-surface-2-hover); } - &:active { + &:active:not([data-disabled='true']):not([data-loading='true']) { background-color: var(--bui-bg-neutral-on-surface-2-pressed); } } @@ -107,11 +107,11 @@ &[data-on-surface='3'] { background-color: var(--bui-bg-neutral-on-surface-3); - &:hover { + &:hover:not([data-disabled='true']):not([data-loading='true']) { background-color: var(--bui-bg-neutral-on-surface-3-hover); } - &:active { + &:active:not([data-disabled='true']):not([data-loading='true']) { background-color: var(--bui-bg-neutral-on-surface-3-pressed); } } @@ -124,7 +124,6 @@ &[data-disabled='true'], &[data-loading='true'] { - box-shadow: inset 0 0 0 1px var(--bui-border-disabled); color: var(--bui-fg-disabled); } } diff --git a/packages/ui/src/components/Button/Button.stories.tsx b/packages/ui/src/components/Button/Button.stories.tsx index 3ddc937314..3f6cf3f95e 100644 --- a/packages/ui/src/components/Button/Button.stories.tsx +++ b/packages/ui/src/components/Button/Button.stories.tsx @@ -212,66 +212,6 @@ export const Responsive = meta.story({ const variants = ['primary', 'secondary'] as const; const sizes = ['small', 'medium'] as const; -export const Playground = meta.story({ - args: { - children: 'Button', - }, - render: () => ( - - {variants.map(variant => ( - - {variant} - {sizes.map(size => ( - - - - - - - - - - ))} - - ))} - - ), -}); - export const Loading = meta.story({ render: () => { const [isLoading, setIsLoading] = useState(false); diff --git a/packages/ui/src/css/tokens.css b/packages/ui/src/css/tokens.css index 37ce1edfec..6a4a783d96 100644 --- a/packages/ui/src/css/tokens.css +++ b/packages/ui/src/css/tokens.css @@ -90,7 +90,7 @@ --bui-bg-solid: #1f5493; --bui-bg-solid-hover: #163a66; --bui-bg-solid-pressed: #0f2b4e; - --bui-bg-solid-disabled: #ebebeb; + --bui-bg-solid-disabled: #163a66; /* Neutral background colors */ --bui-bg-neutral-on-surface-0: oklch(0% 0 0 / 6%); @@ -125,7 +125,7 @@ --bui-fg-link-hover: #1f2d5c; --bui-fg-disabled: #9e9e9e; --bui-fg-solid: var(--bui-white); - --bui-fg-solid-disabled: #9c9c9c; + --bui-fg-solid-disabled: #98a8bc; --bui-fg-tint: #1f5493; --bui-fg-tint-disabled: var(--bui-gray-5); --bui-fg-danger: #e22b2b; @@ -171,7 +171,7 @@ --bui-bg-solid: #9cc9ff; --bui-bg-solid-hover: #83b9fd; --bui-bg-solid-pressed: #83b9fd; - --bui-bg-solid-disabled: #222222; + --bui-bg-solid-disabled: #1b3d68; /* Neutral background colors */ --bui-bg-neutral-on-surface-0: oklch(100% 0 0 / 10%); @@ -206,7 +206,7 @@ --bui-fg-link-hover: #7eb5f7; --bui-fg-disabled: var(--bui-gray-7); --bui-fg-solid: #101821; - --bui-fg-solid-disabled: var(--bui-gray-5); + --bui-fg-solid-disabled: #6191cc; --bui-fg-tint: #9cc9ff; --bui-fg-tint-disabled: var(--bui-gray-5); --bui-fg-danger: #e22b2b;