📦 Flowtitude FDS. correccion de errores y mejoras en el componente de botones
El componente de botones ya no necesita modificarse para adaptar colores o espaciado. Todo se configura desde flowtitude.css con nuevos tokens: color de texto independiente en primary y secondary, fondo/borde/texto configurables en outline, y padding global en em.
Padding en em
Las variantes de tamaño (xs, sm, lg, xl) ya no definen su propio padding. Al estar en em, el padding base escala automáticamente con el font-size de cada variante.
Outline configurable
Fondo, borde y texto ahora son tokens independientes. Por defecto border: currentColor, así el borde sigue al color del texto sin configuración extra.
Accesibilidad en botones
Se añade :focus-visible con outline en primary-500. El foco solo se muestra en navegación por teclado, no con ratón.
Mejoras en block-bleed
Se revisa y mejora la implementación de la clase block-bleed para mayor robustez en distintos contextos de layout.
Corrección de utilidades
Se corrigen errores menores en algunas clases de utilidad.
Grises unificados a neutral
Todo el sistema usa ahora la escala neutral de Tailwind. Se elimina el uso mixto de zinc.
Hola.
Me dispongo a empezar una nueva web y quisiera saber si esta versión de configuración incluye las pequeñas modificaciones que hemos estado comentando, tanto en proyectos anteriores míos como de otros miembros de la comunidad.
Gracias.
Luis Muñoz Se supone que si, en concreto puedes dirme alguna que pueda revisar para verificar? pero es la que uso yo
Angel Julian No recuerdo bien ahora... de lo último fueron los botones que el hover está con color secundario y lo ibas a pasar a un gris, o aun tono de primario (aportación de Martín).
Si va saliendo algo te lo diré...
Luis Muñoz Ah vale lo de la semana pasada, lo de los colore s no lo he revisado, pero el tema es que no puedes borrar cosas sin revisar el resto. puedes modificar loq ue quieras y añadir también, pero el sistema esta absado en dos colores corporativos, lo cual no obliga a usarlos, y en la compilación tampoco afecta.
Angel Julian Otra cosa... todos los enlaces aparecen subrayados.
Conforme me vayan saliendo, voy añadiendo.
FDS no aplica text-decoration por defecto en los enlaces, así que probablemente sea el navegador. Si usas un navegador con estilos por defecto activos, cualquier sin estilos explícitos mostrará el subrayado. Revisa en DevTools cuál es el estilo que se está aplicando realmente.
Recuerda lo de los tamaños de las tipografías que comentamos que no se ven en todos los navegadores. Hoy me ha llamado un cliente quejándose de esto mismo. A ver si podemos corregirlo.
Gracias.
Luis Muñoz Si esta tarde lo dejo listo y te aviso
Angel Julian Como hemos comentado, después de instalar la nueva configuración de Flowtitude FDS seguía con problemas de carga de stilos en Safari
He creado un archivo en theme/safari-test.css que carga después de flowtitude con esta configuración, y el problema se resuelve:
/ file: theme/safari-test.css /
@layer base {
:root {
/ Tipografía estable para Safari /
--ft-text-base: clamp(1rem, 0.98rem + 0.15vw, 1.05rem);
--ft-text-lg: clamp(1.08rem, 1rem + 0.2vw, 1.18rem);
--ft-text-xl: clamp(1.2rem, 1.05rem + 0.35vw, 1.4rem);
--ft-text-2xl: clamp(1.4rem, 1.15rem + 0.6vw, 1.8rem);
--ft-text-3xl: clamp(1.7rem, 1.3rem + 1vw, 2.3rem);
--ft-text-4xl: clamp(2rem, 1.5rem + 1.5vw, 3rem);
--ft-text-5xl: clamp(2.4rem, 1.8rem + 2vw, 3.8rem);
--ft-text-6xl: clamp(2.8rem, 2rem + 2.5vw, 4.8rem);
--ft-text-7xl: clamp(3.2rem, 2.2rem + 3vw, 5.8rem);
--ft-text-8xl: clamp(3.8rem, 2.5rem + 4vw, 6.8rem);
--ft-text-9xl: clamp(4.2rem, 2.8rem + 5vw, 7.5rem);
/ Espaciados estables para Safari /
--ft-spacing-fluid-xs: clamp(0.3rem, 0.25rem + 0.25vw, 0.67rem);
--ft-spacing-fluid-sm: clamp(0.4rem, 0.3rem + 0.45vw, 1rem);
--ft-spacing-fluid-md: clamp(0.5rem, 0.3rem + 0.9vw, 1.5rem);
--ft-spacing-fluid-lg: clamp(0.65rem, 0.35rem + 1.5vw, 2.25rem);
--ft-spacing-fluid-xl: clamp(0.85rem, 0.4rem + 2.4vw, 3.375rem);
--ft-spacing-fluid-2xl: clamp(1.1rem, 0.45rem + 4vw, 5.06rem);
--ft-spacing-inner: clamp(0.15rem, 0.1rem + 0.2vw, 0.33rem);
--ft-spacing-content: clamp(0.3rem, 0.2rem + 0.35vw, 0.75rem);
--ft-spacing-stack: clamp(0.4rem, 0.25rem + 0.5vw, 1rem);
--ft-spacing-block: clamp(0.5rem, 0.3rem + 0.9vw, 1.5rem);
--ft-spacing-columns: clamp(0.75rem, 0.4rem + 1.6vw, 2.25rem);
--ft-spacing-section: clamp(2.5rem, 1rem + 6vw, 10rem);
--ft-spacing-hero: clamp(5rem, 2rem + 13vw, 22rem);
--ft-padding-content-y-half: clamp(1.25rem, 0.5rem + 3vw, 5rem);
--ft-container: min(var(--container-7xl, 80rem), 90%);
}
}
Cómo se abre el archivo fds-core.-1.1.1.windpress para obtener los archivos de manera independiente?
El archivo .windpress es un ZIP renombrado. Puedes abrirlo de dos formas:
-
Cambia la extensión de .windpress a .zip y extráelo con tu gestor de archivos o herramienta favorita.
-
Si usas macOS o Linux, también puedes extraerlo directamente desde terminal con
unzip fds-core-1.1.1.windpress -d carpeta-fds.
Dentro encontrarás los tokens CSS y los archivos de componentes listos para usar.
Angel Julian He instalado la nueva versión desde cero en un nuevo proyecto, y en algunos navegadores (tal vez más antiguos) sigue sin coger las clases. Tengo instalado WindPress Fix 1.3.0
Luis Muñoz Cuando quiera lo vemso, creo que es un tema de Bricks, de las variables que guarda
Angel Julian Cuando puedas. Mira como se ve en Google Chrome y en Safari (sin estilos)
Luis Muñoz mañana lo vemos en un ratito...