[component]: Button

[gfellerph]

Description

Create the button component with tokens and new styles. The button should be backwards compatible with v1, this means that the same selectors should be used to style buttons. In addition to that, style default buttons (buttons without classes) as secondary buttons and submit buttons as primary buttons.

Design

https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=17-163

Tokens

• [x] Tokens for this component are ready

Development

The button should be backwards compatible, therefore the current class selectors should stay the same for the new Design. Additionally, buttons without any classes should be styled as follows:

• <button>Action</button> or <input type="button" value="Action" /> should be displayed as a secondary buttons
• <button type="submit">Submit</button> or <input type="submit" value="Submit" /> should be styled as primary buttons

There are no animated buttons anymore. Remove the animated button styles and create a breaking changeset for these. Also, create an optional migration, because there is no need to update the button html structure, the class btn-animated will not do anything and the span inside does not hurt.

Tasks

### 💻 Tasks
- [x] Review Design (All states present? Possible to implement?)
- [ ] https://github.com/swisspost/design-system/issues/3496
- [x] HTML/CSS implementation
- [x] Variants: Primary, Secondary, Tertiary, Icon only
- [ ] Style buttons without classes according to type
- [x] Remove animated button styles
- [ ] Write optional migration instructions to remove animated buttons from code
- [x] Documentation in Storybook
- [x] Visual regression tests
- [x] Design review

[oliverschuerch]

@Cian77 Could you update the focus styles for the button accordingly to what you did for the text-input?

[oliverschuerch]

@Vandapanda please add the disabled stroke tokens here as well:

• stroke-color
• stroke-width
• stroke-dasharray

[Vandapanda]

@oliverschuerch @gfellerph

Changed focus styles accordingly

Token can be found as

• post-button-primary/secondary/tertiary-disabled-stroke
• post-button-border-width (no changes from enabled to disabled, always has a border just sometimes same color)
• post-button-border-style-disabled

[gfellerph]

See resolution on #3710 for sizing class handling