New styles in Audio control component

[fcoveram]

Description

As part of design changes introduced in #2113, the Audio control component in Design Library has new styles.

• Small size is removed due to its lack of use.
• Tiny is renamed as Small.
• Extra large is renamed as Large.
• New sizes for each variant
  • Small: 32px, w-8 h-8
  • Medium: 48px, w-12 h-12
  • Large: 64px, w-16 h-16
• New icon sizes for each variant
  • Small: 24px, w-6 h-6
  • Medium: 32px, w-8 h-8
  • Large: 40px, w-10 h-10
• Hover and Focus styles follow the Button style
• Default style has 2px for border radius, although this changes depending on the component context.

Context

The new styles are based on #415 implementation

Figma

Component in Design Library.

[obulat]

This issue is blocked because the design for single result page for Audio also needs to be updated to match the new Audio control component sizes.

[fcoveram]

I'm confused about the blocking reason. The audio single result page was updated in the design file with this new audio control in both Full medium and Full small audio track components inserted in the page.

What I understood from the chat we had @obulat, is that this request creates unintended changes in the following components:

• Row (large, medium, and small)
• Box (large, and medium)
• Global

Therefore, to unblock this request, I need to share an updated version of those audio components by including the audio control requested in this ticket.

Please correct me if I'm wrong.

[obulat]

Sorry, @fcoveram! I was wrong. Your list of what needs to be updated is right:

What I understood from the chat we had https://github.com/obulat, is that this request creates unintended changes in the following components:

Row (large, medium, and small)
Box (large, and medium)
Global