[component]: Switch

[Cian77]

Description

Create a HTML/CSS component using the current markup that implements as many features as possible from the new Design. Remove any dependencies on bootstrap for this component. This is done for backwards compatibility reasons. The current structure will eventually be deprecated. These styles will give us the necessary time to come up with a solid input component strategy.

Open issues:

Design:

• New font
• Spacing

Tokens:

• Text

Design

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

Tokens

• Tokens for this component are ready

Tasks

💻 Tasks

Beta Give feedback

1. Review Design (All states present? Possible to implement?)
2. [foundations]: Body base styles #3496
   2 of 3
   good first issue 📦 styles +2
   
3. HTML/CSS implementation
4. Remove all unused scss variables for this element
5. Documentation in Storybook
6. Visual regression tests
7. Design review

[Cian77]

Deleted Switch Group. In this component, we do not have an Error to show.

[oliverschuerch]

@schaertim please assign this ticket to me or @gfellerph, as soon as you have implemented the component (as far as possible).
There are several tasks we need to do before we can finish this component:

• Update focus style structure in Figma, so the focus element has a padding (as it will be interaged on other form controls as well) which we can use as a outline-offset afterwards.
• Reqest some focus outline tokens like stroke-width, stroke-color and stroke-dasharray.

[Vandapanda]

@schaertim Overworked the switch component so that it has a (sometimes invisible) border in every state. Implemented the new focus style, added tokens for Focus border and changed some token names for better understanding. Please let me know if you need something else

[oliverschuerch]

@schaertim do you need anything from my side other than merging the newest tokens to main?