style: fix background-color on negative disabled buttons (#3141)

sbb-design-systems · Oct 16, 2024 · a66e94a · a66e94a
1 parent 692a72d
commit a66e94a
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 5 deletions.
diff --git a/src/elements/button/common/button-common.scss b/src/elements/button/common/button-common.scss
@@ -82,7 +82,7 @@ $icon-only: ':where([data-slot-names~=icon], [icon-name]):not([data-slot-names~=
 }
 
 :host([negative]) {
-  --sbb-button-color-disabled-background: var(--sbb-color-anthracite);
+  --sbb-button-color-disabled-background: var(--sbb-color-charcoal);
   --sbb-button-color-disabled-text: var(--sbb-color-aluminium);
 }
 

diff --git a/src/elements/button/mini-button-group/mini-button-group.stories.ts b/src/elements/button/mini-button-group/mini-button-group.stories.ts
@@ -31,6 +31,12 @@ const negative: InputType = {
   },
 };
 
+const disabled: InputType = {
+  control: {
+    type: 'boolean',
+  },
+};
+
 const accessibilityLabel: InputType = {
   control: {
     type: 'text',
@@ -40,19 +46,29 @@ const accessibilityLabel: InputType = {
 const defaultArgTypes: ArgTypes = {
   size,
   negative,
+  disabled,
   'accessibility-label': accessibilityLabel,
 };
 
 const defaultArgs: Args = {
   size: size.options![1],
   negative: false,
+  disabled: false,
   'accessibility-label': '',
 };
 
-const Template = (args: Args): TemplateResult =>
+const Template = ({ disabled, ...args }: Args): TemplateResult =>
   html` <sbb-mini-button-group ${sbbSpread(args)}>
-    <sbb-mini-button aria-label="previous" icon-name="chevron-small-left-small"></sbb-mini-button>
-    <sbb-mini-button aria-label="next" icon-name="chevron-small-right-small"></sbb-mini-button>
+    <sbb-mini-button
+      ?disabled=${disabled}
+      aria-label="previous"
+      icon-name="chevron-small-left-small"
+    ></sbb-mini-button>
+    <sbb-mini-button
+      ?disabled=${disabled}
+      aria-label="next"
+      icon-name="chevron-small-right-small"
+    ></sbb-mini-button>
     <sbb-divider orientation="vertical"></sbb-divider>
     <sbb-mini-button aria-label="edit" icon-name="pen-small"></sbb-mini-button>
     <sbb-mini-button aria-label="duplicate" icon-name="copy-small"></sbb-mini-button>
@@ -73,6 +89,12 @@ export const Negative: StoryObj = {
   args: { ...defaultArgs, negative: true },
 };
 
+export const NegativeDisabled: StoryObj = {
+  render: Template,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, negative: true, disabled: true },
+};
+
 export const SizeS: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,

diff --git a/src/elements/core/styles/mixins/buttons.scss b/src/elements/core/styles/mixins/buttons.scss
@@ -85,7 +85,7 @@
   --sbb-button-color-default-background: var(--sbb-color-black-alpha-0);
   --sbb-button-color-hover-background: var(--sbb-color-charcoal);
   --sbb-button-color-active-background: var(--sbb-color-iron);
-  --sbb-button-color-disabled-background: var(--sbb-color-black-alpha-0);
+  --sbb-button-color-disabled-background: var(--sbb-color-charcoal);
   --sbb-button-color-disabled-border: var(--sbb-color-smoke);
   --sbb-button-color-disabled-text: var(--sbb-color-smoke);
 }