El equipo de diseño está en proceso de realizar pequeños pero potentes cambios/ajustes en el tema foundation para alinearlo un poco más con los estándares web modernos. Para ver estos cambios en vivo en meta, únete a este grupo:
https://meta.discourse.org/g/modernized-foundation
Implementaremos este cambio en vivo a través de la nueva función Upcoming Changes disponible en Discourse. Esto permitirá a los propietarios de sitios habilitar los cambios para cualquier grupo que especifiquen, con el fin de probar el despliegue de los cambios sin el temor de posiblemente romper temas o personalizaciones actuales.
¿Qué cambiará?
El encabezado se reduce en altura
Hemos disminuido el tamaño del encabezado junto con algunos de los iconos y el avatar ligeramente para utilizar mejor el espacio en pantalla.
Botones predeterminados
Estamos pasando de un fondo de botón gris predeterminado a un fondo transparente / “secundario” con un borde.
- eliminación del fondo gris
- adición de bordes
- el color del icono coincide con el color del texto
- los botones ahora tienen una altura fija
Botón Crear nuevo tema en la página de lista de temas
Coincidiendo con Horizon y dándole a este un color de fondo “CTA” de tertiary
Eliminación de mucho fondo gris
Lista de temas
- eliminación del borde superior de 3 px de grosor
- disminución del tamaño de fuente de los datos del encabezado de la tabla
- color consistente para los elementos de datos de la tabla
- cambio de valor de color para leer/no leído
- ligero aumento en el grosor de fuente para no leído
Categorías
- alineación a la izquierda del texto
- eliminación del borde izquierdo grueso de color
- insignias ligeramente redondeadas
- borde más delgado en la caja
Barra de navegación
- Las píldoras de navegación en las páginas de lista de temas tendrán la misma altura que los botones en esta zona
- texto e icono de color más oscuro en el kit seleccionado
Barra lateral
- el icono y el texto coinciden con el color
- texto e iconos más oscuros
- fondo “activo” más claro
- mayor grosor de fuente activa
Banner de bienvenida
- espaciado equilibrado
- variables añadidas para una alineación izquierda/derecha/centro más fácil a través de la personalización
- grosor de fuente del encabezado disminuido
- disminución del tamaño de fuente del subtítulo
Calendario
- fondo gris eliminado de los “botones”
- usar gris solo para indicar “activo”
- cambio al estilo de botón “transparente con borde”
Menús desplegables
- relleno añadido al contenedor del menú desplegable
- la altura, el relleno y el espacio ahora coinciden con los elementos de la barra lateral
- unificación de las “listas clicables”
- el borde hereda la variable
--d-border-radius
Nuevas variables
Algunos de los cambios aquí se introducirán a través de variables adicionales añadidas al núcleo.
Alineación del banner de bienvenida
La alineación del banner de bienvenida ahora se podrá cambiar a través de:
// predeterminado
--welcome-banner-text-align: center;
--welcome-banner-search-menu-margin-inline: auto;
// personalizado
--welcome-banner-text-align: left;
--welcome-banner-search-menu-margin-inline: 0 auto;
Altura del botón
Ahora tendremos una altura de botón fija a través de:
// predeterminado
--button-height: var(--space-8);
Suavizado de fuentes
Ya estamos haciendo esto en Horizon, tiene sentido llevarlo a foundation.
// nuevo predeterminado
--webkit-font-smoothing: antialiased;
