search

gcba / estandares

Estándares y lineamientos de experiencia digital
https://gcba.github.io/estandares/
MIT License
16 stars 5 forks source link

Tipografía #244

Open paulajoglar opened 1 year ago

paulajoglar commented 1 year ago

Nombre en Obelisco: tipografía Tipo de componente: estilos

paulajoglar commented 1 year ago

Se crea un branch para trabajar tipografías https://www.figma.com/file/ToGlPBzfp1gKDmaCwKWtXS/branch/zChICIJehQnAA0vGcbks8g/UI-KIT---Obelisco?node-id=618%3A8339&t=tRZo9bLRKvglunet-0

paulajoglar commented 1 year ago

Se modifica nombre de la tipografía. Open sans no corresponde a las variables. Antes Image

Después Image

paulajoglar commented 1 year ago

Se solicita agregar a Storybook las siguientes variables. Se deja imagen sobre el uso de esos estilos.

Image

paulajoglar commented 1 year ago

En que se trabaja:

paulajoglar commented 1 year ago

Se agrega la Nunito regular 18 y 16 como estilo. Se eliminan las variables repetidas. Se reemplaza en las nomenchaturas pequeño por regular.

Falta seguir trabajando con las variables (mobile o desktop) y linkear los estilos a los componentes.

paulajoglar commented 1 year ago

Se crea un branch para la ficha https://www.figma.com/file/Pi8vXNQiMDtCNvV1aTCQX7/branch/JUuKqz2v7TiPjqkaKcii4r/Fichas?node-id=1404-812&t=Zi5eXMDxfmoKBuF2-0

paulajoglar commented 1 year ago

Se definen las siguientes categorías para ordenar los estilos.

Image

victorianastasi commented 1 year ago

Se modifica ficha en Estándares, en rama _fixtypography

paulajoglar commented 1 year ago

Se modificó a 0 el interletrado en todos los estilos tipográficos para mejor su lectura y igualar con el uso que se está dando actualmente en storybook.

marusaad commented 8 months ago

Requerimiento Actualizar todos los estilos tipográficos del sistema de diseño.

Análisis UX & Research Relevamos estilos tipográficos en diseño y desarrollo. Identificamos inconsistencias. Investigamos otros sistemas de diseño y diferentes escalas y formas de nomenclar los estilos tipográficos.

Ideación

Notas de desarrollo

Diehault commented 7 months ago

¡Hola! Actualizo con lo que hemos venido trabajando para tipografía. 🤔

¿En qué etapa nos encontramos?

  1. Definimos la escala con la que vamos a trabajar la tipografía, entendiendo 3 categorías principales: cuerpo (body), titulares (titles) y encabezados (headings). Cada una de las categorías hace referencia al uso que se le da dentro de Obelisco.
  2. Probamos toda la escala con los componentes de Obelisco, para evaluar qué componentes sufren cambios y cuáles no. Los cambios van desde la actualización de la tipografía hasta cambios específicos en componentes.

¿Qué tenemos en "Análisis de componentes 2024"?

¿Cómo queda la nueva escala tipográfica?

Image Image Image

Las descripciones aún están para revisar, lo importante de las imágenes son los tamaños de letra e interlineado, además de los pesos y los formatos que ofrecemos.

¿Cuáles serían los pasos a seguir?

Luego de tener toda esta información validada por ambas partes del sistema de diseño (diseño y desarrollo), podríamos pasar a la implementación de la nueva escala tipográfica y cada uno de los cambios propuestos. Es, otra vez, una instancia donde nos aseguraremos de que todo esté en orden y funcione según las pruebas que hicimos; lo que hay en análisis es un puntapié para lo que viene a futuro, por lo que puede que surjan cambios que no tengamos mapeados.

Diehault commented 7 months ago

¡Hola! Actualizamos con los pesos predeterminados que definimos para cada uno de los tamaños de la nueva escala tipográfica.

Pesos predeterminados

Body

Titles

Headers

Esta información la dejamos asentada en el archivo de "Análisis de componentes 2024" dentro de la página de Tipografía. Como tal, en la escala no señalamos un peso predeterminado porque mostramos todos los pesos como opciones, pero esta definición fue necesaria para que en el Storybook pudiéramos mostrar un peso por defecto para cada tamaño.

Diehault commented 7 months ago

¡Hola! 🥸

Como análisis a lo que conversamos durante la weekly del día martes 09/04, compartimos el siguiente mensaje por Discord con el equipo de Obelisco a través del canal de Experiencia Digital:

¡Holi! Les actualizamos con lo último que conversamos sobre tipografía en la weekly.

1. Sobre Tipografía en Storybook Les compartimos algunos links de sistemas de diseño que incluyen cosas sobre Tipografía en su Storybook y otros que no incluyen nada. También, incluimos URLs de sistemas de diseño gubernamentales para que vean la parte de desarrollo de los estilos (GOV.UK, Helsinki, Italia -que tiene Bootstrap-, USWDS).

Links de sistemas de diseño gubernamentales

Stoybooks que no incluyen estilos

Stoybooks que incluyen estilos

2. Cosas que negociaríamos

  • Listas ordenadas y desornadas, que muestran hoy día dentro de Tipografía en Storybook, como "Listas nativas" o "Listas HTML".
  • Marks/utilities/transformaciones (?) Para ponerlos como "Personalización de párrafo".

(#) ¿Qué contiene?

<strong> = bold. <em> = itálica/énfasis. <small> = texto más chico (no sabemos por qué). <mark> = resaltado con color (¿cómo funciona? ¿Tenemos que elegir nosotros el color?). <sup> = superíndice. <sub> = subíndice. <kbd> = letras para teclado (como atajos o letras individuales).

3. Cosas que no negociaríamos

  • Display headings: no es algo que queramos disponibilizar ahora. En Bootstrap aclara:

When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.

Hoy en día no contamos con esta necesidad, por lo que incluir los display implica sugerir un uso no enmarcado dentro de la escala tipográfica, con buenas y malas prácticas, además de ejemplos de uso. No consideramos correcto incluirlo solo porque está como posibilidad.

(#) ¿Qué contiene color utilities en texto?

.text-primary .text-primary-emphasis .text-secondary .text-secondary-emphasis .text-success .text-success-emphasis .text-danger .text-danger-emphasis .text-warning .text-warning-emphasis .text-info .text-info-emphasis .text-light .text-light-emphasis .text-dark .text-dark-emphasis .text-body .text-body-emphasis .text-body-secondary .text-body-tertiary .text-black .text-white .text-black-50 .text-white-50

Acá el foco del problema está en la accesibilidad. Habría que hacer pruebas de color para cada una de estas "utilidades" y ver cuándo se usarían. Tendríamos que investigar más sobre el contexto de uso; entendemos que el "danger" y el "success", como semánticos, pueden ir en un input, pero los demás no sabemos bien a qué se aplicarían, salvo que están únicamente como posibilidad. Además, los textos de "warning" y "warming-emphasis" no serían accesibles por ser naranjas, por ejemplo. Pensamos que no estaría bueno concebirlos como aislados, sino verlos un poco más a fondo y relacionarlos a una función que cumplan dentro de nuestro sistema de diseño.

davisLjr commented 7 months ago

Según lo charlado en la reunión del viernes 12/04,

Se llegó a la conclusión de que la nomenclatura de "transformaciones", "listas ordenadas y desordenadas" puede ser cambiada para mantener una armonía entre UI-KIT y Storybook.

En cuanto a las clases display y color, se realiza la propuesta de la creación de documentación disponible en Storybook con el detalle de las clases que vienen de Bootstrap y también las propias de Obelisco, de manera que éstas no estén encapsuladas en un componente, sino que sean independientes y estén disponibles para casos donde estas lleguen a ser necesitadas por los desarrolladores o diseñadores.

De igual forma, la invitación es que la decisión sea investigada y tomada por los gerentes operativos y subgerentes operativos de Diseño - Desarrollo. Para poder continuar manteniendo buenas prácticas en UI-KIT y en Storybook a nivel desarrollo.

marusaad commented 1 week ago

📢 Nuevo requerimiento

Qué

Actualizar los estilos de color del componente aplicando las variables correspondientes a la v2 de Obelisco.

Por qué

Porque posiciona al sistema en un nivel de calidad superior al cumplir con los criterios de accesibilidad de la WCAG, y facilita la adopción, la personalización y la escalabilidad a nivel global.

Quién lo va a trabajar

Diseñadores

Quién lo va a revisar

PM + SGOs

Criterios de aceptación

✏️ Notas

Actualizamos los colores de la plantilla de la page del estilo en el UI Kit con las nuevas variables de Obelisco v2.