Border Radius in small elements

[yceballost]

Description

Brands with big border radius applying in elements like "images" works bad in small sizes.
https://tinyurl.com/2cylf4jz

Components affected

• Lists
• Accordion
• Stacking group
• Cards asset (squared images)
• Callout
• Community/Blocks/SimpleBlock
• Community/AdvancedDataCard
• .resources/DataCardAdvanced/Footer

Tasks

• Update tokens
• Update specs
• Add to mobile library
• Add to desktop library
• Android ticket
• iOS ticket
• Web ticket

[LucasAlbuquerque0]

I had an idea: One possibility is to use different Variants, creating variants for Cards and another for smaller components such as images. Using the variants is even easier and has fewer sudden changes.
@yceballost

[aweell]

Prop en la imagen

Esta opción la verdad es que me parece la peor de todas y que es una puerta a inconsistencias que evitaría abrir si es posible

Buscar un valor que valga para los dos escenarios

Esto podría ser una solución salomónica al problema, un contra es que haya casos en los que imágenes y containers vayan de la mano, donde se verá un border radius diferente entre ellas y quizás no sea lo mas adecuado?

Utilizar un contexto

Otra idea es que las imágenes que vayan dentro de determinados componentes (como las listas) beban de un contexto que les diga, ahí píntate con un radius mas pequeño.

Esta definición podría venir por token en cada marca o ser un valor fijo para todas

Valor fijo: https://tinyurl.com/ykeap2h3

Problemas de esto:

• Si se utilizan imágenes fuera de los componentes donde se defina que van así, en tamaños pequeños seguirán teniendo el mismo problema.
• El uso de imagenes fuera de los componentes que se haya indicado que el contexto deba aplicar no se verán afectados por este cambio

En principio los componentes a los que debería aplicar son listas, acordeones, footer de la advanced data card y variante imagen squared del stacking group

[LucasAlbuquerque0]

@aweell
The code solution will be when the object is inside a container using an 8px border and 16px outside the default. Correct?
In figma, it will be the creation of two new variables, one for container and another for when it is inside a container, would that be it?

[aweell]

@LucasAlbuquerque0

In Figma depends on what other brands define:

• If the definition differs between brands, a new token and variable will be created for figma and the default image radii will be overrided in the instances of the component image used in the affected components.
• If the same value works for all brands there's no need of a new variable

[yceballost]

PR on going in Mística web

[yceballost]

I took this task. Merged in mobile and desktop in Figma