OudsTheme: specify Material Shapes from border radius tokens

[paulinea]

Description

The aim of this issue is to study and implement the mapping between Android Material Shapes and border radius tokens. This should help to be consistent between OUDS and Material (non OUDS) components used in the same application.

Material surfaces can be displayed in different shapes. Shapes direct attention, identify components, communicate state, and express brand.

The shape scale defines the style of container corners, offering a range of roundedness from square to fully circular.

There are different sizes of shapes:

• Extra Small
• Small
• Medium
• Large
• Extra Large

Note that shapes None and Full are omitted as None is a RectangleShape and Full is a CircleShape.

By default, every component is mapped to one of the seven shape styles.

Taken from Material Design :

Shape style	Component
None	Banners, Bottom app bars, Full-screen dialogs, Lists, Navigation bars, Navigation rails, Progress indicators, Search view (full-screen), Side sheets (docked), Tabs, Top app bars
Extra Small	Autocomplete menu, Select menu, Snackbars, Standard menu, Text fields
Small	Chips, Rich tooltip
Medium	Cards, Small FABs
Large	Extended FABs, FABs, Navigation drawers
Extra Large	Bottom sheets (docked), Dialogs, Floating sheets, Large FABs, Search view (docked), Time picker, Time input
Full	Badge, Buttons, Icon buttons, Sliders, Switches, Search bar

Study

• [ ] With the help of designers, attribute a radius semantic token to each shape style for OUDS default theme

Implementation

• [ ] Link Material Shapes to chosen radius semantic tokens
• [ ] Shapes values can be overridden by themes
• [ ] Test Material components default behavior (OUDS theme shapes should be applied)

[paulinea]

After a discussion with Maxime, we decided not to map Material shapes to border radius tokens.