feat(button): add secondary white variant (#1220)

packages/components/src/components/button/button.css

@@ -17,8 +17,7 @@
   --radius: var(--telekom-radius-standard);
   --transition: all var(--telekom-motion-duration-transition)
     var(--telekom-motion-easing-standard);
-  --box-shadow-focus: 0 0 0 var(--telekom-line-weight-highlight)
-    var(--telekom-color-functional-focus);
+  --color-focus: var(--telekom-color-functional-focus);
   --font-weight: var(--telekom-typography-font-weight-bold);
   --font-size: var(--telekom-typography-font-size-body);
   --line-height: var(--telekom-typography-line-spacing-standard);
@@ -56,6 +55,17 @@
   --border-secondary-active: var(--telekom-color-ui-border-pressed);
   --border-secondary-focus: var(--telekom-color-functional-focus);
 
+  /* variant: secondary white */
+  --border-secondary-white: var(--telekom-color-ui-white);
+  --color-secondary-white: var(--telekom-color-ui-white);
+  --background-secondary-white-hover: var(
+    --telekom-color-ui-state-fill-hovered-inverted
+  );
+  --background-secondary-white-active: var(
+    --telekom-color-ui-state-fill-pressed-inverted
+  );
+  --secondary-white-opacity: 0.5;
+
   /* variant: ghost */
   --radius-ghost: var(--radius);
   --border-width-ghost: var(--telekom-spacing-unit-x025);
@@ -96,7 +106,8 @@
 }
 
 .button:not(.button--disabled):focus {
-  box-shadow: var(--box-shadow-focus);
+  outline: var(--telekom-spacing-unit-x05) solid var(--color-focus);
+  outline-offset: var(--telekom-spacing-unit-x025);
 }
 
 .button.button--icon-before ::slotted(*) {
@@ -200,3 +211,25 @@
 .button--disabled.button--variant-ghost {
   color: var(--color-ghost-disabled);
 }
+
+.button--variant-secondary-white {
+  background: var(--background-secondary);
+  text-align: center;
+  border-radius: var(--radius-secondary);
+  border: var(--border-width-secondary) solid currentColor;
+  color: var(--color-secondary-white);
+  background-color: var(--background-secondary);
+  border-color: var(--border-secondary-white);
+}
+
+.button--variant-secondary-white:not(.button--disabled):hover {
+  background-color: var(--background-secondary-white-hover);
+}
+
+.button--variant-secondary-white:not(.button--disabled):active {
+  background-color: var(--background-secondary-white-active);
+}
+
+.button--disabled.button--variant-secondary-white {
+  opacity: var(--secondary-white-opacity);
+}

packages/storybook-vue/stories/components/button/Button.stories.mdx

@@ -38,7 +38,8 @@ export const Template = (args, { argTypes }) => ({
     ...ScaleButton.props,
   },
   template: `
-    <scale-button
+  <div style="${args.variant === 'secondary-white'? 'background-color: var(--telekom-color-primary-standard); padding: var(--telekom-spacing-unit-x3);' : ''}">
+  <scale-button
       :disabled="disabled"
       :size="size"
       :href="href"
@@ -60,6 +61,7 @@ export const Template = (args, { argTypes }) => ({
       <scale-icon-navigation-right accessibility-title="Next" v-if="icon === 'after'" />
       <scale-icon-navigation-external-link accessibility-title="External link, opens in new tab" v-if="icon === 'external'" />
     </scale-button>
+    </div>
   `,
 });
 
@@ -103,12 +105,9 @@ export const Template = (args, { argTypes }) => ({
   --spacing-x-icon-only: var(--telekom-spacing-unit-x2);
   --min-height: var(--telekom-spacing-unit-x10);
   --radius: var(--telekom-radius-standard);
-  --transition: all var(--telekom-motion-duration-transition) var(
-      --telekom-motion-easing-standard
-    );
-  --box-shadow-focus: 0 0 0 var(--telekom-line-weight-highlight) var(
-      --telekom-color-functional-focus
-    );
+  --transition: all var(--telekom-motion-duration-transition)
+    var(--telekom-motion-easing-standard);
+  --color-focus: var(--telekom-color-functional-focus);
   --font-weight: var(--telekom-typography-font-weight-bold);
   --font-size: var(--telekom-typography-font-size-body);
   --line-height: var(--telekom-typography-line-spacing-standard);
@@ -146,6 +145,17 @@ export const Template = (args, { argTypes }) => ({
   --border-secondary-active: var(--telekom-color-ui-border-pressed);
   --border-secondary-focus: var(--telekom-color-functional-focus);
 
+  /* variant: secondary white */
+  --border-secondary-white: var(--telekom-color-ui-white);
+  --color-secondary-white: var(--telekom-color-ui-white);
+  --background-secondary-white-hover: var(
+    --telekom-color-ui-state-fill-hovered-inverted
+  );
+  --background-secondary-white-active: var(
+    --telekom-color-ui-state-fill-pressed-inverted
+  );
+  --secondary-white-opacity: 0.5;
+
   /* variant: ghost */
   --radius-ghost: var(--radius);
   --border-width-ghost: var(--telekom-spacing-unit-x025);
@@ -178,6 +188,23 @@ For Shadow Parts, please inspect the element's #shadow.
 <scale-button variant="secondary">Label</scale-button>
 ```
 
+## Secondary White
+
+<Canvas withSource="none">
+  <Story
+    name="Secondary White"
+    args={{
+      variant: 'secondary-white',
+    }}
+  >
+      {Template.bind({})}
+  </Story>
+</Canvas>
+
+```html
+<scale-button variant="secondary">Label</scale-button>
+```
+
 ## Disabled
 
 <Canvas withSource="none">

packages/visual-tests/src/button.visual.spec.js

@@ -7,6 +7,7 @@ describe('Button', () => {
       ['standard'],
       ['secondary'],
       ['secondary-disabled'],
+      ['secondary-white'],
       ['disabled'],
       ['with-icon-before'],
       ['with-icon-after'],