Iniciar sesión

Aplique estilos a formularios de WordPress con variables CSS de Flow

Flow renderiza cada formulario dentro de un Shadow DOM. La interfaz usa componentes de Mantine y expone un conjunto de variables CSS que puede anular para adaptarlas a su marca.

Hay tres formas de personalizar el tema de un formulario:

  • Color primario y paletas personalizadas: en el inspector del bloque Formulario puede elegir un color primario de la paleta de Mantine, definir tonos primarios claros y oscuros e incluso proporcionar sus propios nombres de colores y valores hexadecimales. El plugin generará paletas de 10 tonos a partir de los valores hexadecimales.

  • Modo de color: seleccione el modo claro, oscuro o automático (del sistema). El modo actual se pasa al Shadow DOM mediante un atributo data‑mantine‑color‑scheme.

  • Anulaciones del tema: el bloque Formulario tiene un área de texto Theme Overrides. Todo el CSS que pegue aquí se inyecta en el Shadow DOM del formulario. Este es el lugar para anular tokens de diseño de Mantine (--mantine‑…) o tokens específicos de Flow (--flow‑…).

Además de los tokens del asistente, Flow expone una capa genérica de tokens de bloque para los demás controles del formulario. Esto ofrece a los clientes una interfaz de anulación estable para entradas, botones de opción, casillas, controles deslizantes, valoraciones, campos PIN, conjuntos de campos, bloques contraíbles y botones de acción.

Para los bloques más completos de presentación y contenido, Flow también expone tokens específicos para citas, marcas y resaltados, distintivos, bloques de código, números con formato, contenido oculto, imágenes y elementos de listas con desbordamiento.

Tokens de modales y galerías en el DOM ligero​

Modal de Flow y Galería de Flow no se renderizan dentro de la raíz de sombra del formulario. Anúlalos desde el CSS normal del tema o de la página mediante .wps-flow-modal y .wps-flow-gallery, no desde el área Theme Overrides de un formulario.

Entre los tokens útiles del DOM ligero se incluyen:

  • Estructura del modal: --wps-flow-modal-panel-background, --wps-flow-modal-content-background, --wps-flow-modal-panel-color, --wps-flow-modal-panel-shadow, --wps-flow-modal-backdrop-background
  • Controles del modal: --wps-flow-modal-chrome-background, --wps-flow-modal-chrome-color
  • Galería: --wps-flow-gallery-stage-background, --wps-flow-gallery-nav-background, --wps-flow-gallery-nav-color, --wps-flow-gallery-meta-color

Los envoltorios de las ranuras de encabezado, cuerpo y acciones del modal son transparentes de forma intencionada. La superficie desplazable compartida es .wps-flow-modal__content, por lo que --wps-flow-modal-content-background es la anulación adecuada si quiere un fondo modal continuo que no cubra las capas fijas del encabezado y el pie ni el botón de cierre. El propio envoltorio de controles de la esquina superior derecha permanece transparente; --wps-flow-modal-chrome-background y --wps-flow-modal-chrome-color se aplican a cada botón de cierre o pantalla completa para que esos controles sigan siendo legibles sobre medios oscuros y se perciban como acciones independientes.

.wps-flow-modal {
  --wps-flow-modal-panel-background: #ffffff;
  --wps-flow-modal-content-background: #ffffff;
  --wps-flow-modal-panel-color: #0f172a;
  --wps-flow-modal-chrome-background: #ffffff;
  --wps-flow-modal-chrome-color: #0f172a;
}

.wps-flow-gallery {
  --wps-flow-gallery-stage-background: #0f172a;
  --wps-flow-gallery-nav-background: rgba(15, 23, 42, 0.82);
  --wps-flow-gallery-nav-color: #ffffff;
  --wps-flow-gallery-meta-color: #e2e8f0;
}

Inicio rápido​

Para cambiar las fuentes, los radios y los colores de acento de todos los formularios de Flow del sitio, añade lo siguiente al campo Theme Overrides del formulario. También puede definir estas reglas globalmente en el CSS del tema mediante el selector .smartcloud-flow-shadow-root.

/* Target the flow shadow root */
.smartcloud-flow-shadow-root {
  /* Default text styling */
  --mantine-font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --mantine-font-size-md: 16px;
  --mantine-line-height-md: 1.6;

  /* Radius and spacing */
  --mantine-radius-md: 6px;
  --mantine-spacing-md: 1rem;

  /* Primary colour */
  --mantine-color-blue-6: #0ea5e9;
  --mantine-primary-color-filled: var(--mantine-color-blue-filled);

  /* Generic Flow fields */
  --flow-control-radius: 999px;
  --flow-control-border-color: var(--mantine-color-blue-3);
  --flow-submit-bg: var(--mantine-color-blue-filled);
  --flow-submit-color: white;
  --flow-fieldset-border: 1px solid var(--mantine-color-blue-2);
}

/* Wizard specific tweaks */
.flow-wizard-container {
  --flow-wizard-gap: 1.5rem;
  --flow-wizard-border-radius: var(--mantine-radius-md);
}

.flow-wizard-title {
  --flow-wizard-title-size: 1.5rem;
  --flow-wizard-title-weight: 700;
}

.flow-wizard-next-button {
  --flow-wizard-next-bg: var(--mantine-color-blue-filled);
  --flow-wizard-next-color: white;
}

.flow-block__pin {
  --flow-pin-input-size: 3rem;
}

.flow-block__collapse {
  --flow-collapse-toggle-radius: 999px;
}

.flow-block__display-blockquote {
  --flow-blockquote-accent: var(--mantine-color-blue-6);
  --flow-blockquote-bg: color-mix(
    in srgb,
    var(--mantine-color-blue-6) 10%,
    white
  );
}

.flow-block__display-badge {
  --flow-badge-padding: 0.4rem 0.85rem;
}

.flow-block__table {
  --flow-table-header-bg: color-mix(in srgb, #0f172a 6%, white);
  --flow-table-border-color: color-mix(in srgb, #0f172a 14%, white);
}

.flow-block__timeline {
  --flow-timeline-accent: var(--mantine-color-blue-6);
}

.flow-block__overflow-list {
  --flow-overflow-item-bg: var(--mantine-color-blue-0);
}

Pegue este CSS en el campo Theme Overrides para ver los cambios inmediatamente. Use sus propios nombres y valores de colores para adaptar el formulario a su marca.

Tokens de diseño de Mantine​

Mantine expone muchas variables CSS para espaciado, radio, tipografía, colores, sombras e índices z. Flow hereda estas variables dentro de su Shadow DOM. Algunos tokens útiles son:

  • Espaciado: --mantine-spacing-xs, --mantine-spacing-sm, --mantine-spacing-md, --mantine-spacing-lg, --mantine-spacing-xl.
  • Radio: --mantine-radius-xs, --mantine-radius-sm, --mantine-radius-md, --mantine-radius-lg, --mantine-radius-xl.
  • Fuentes e interlineado: --mantine-font-family, --mantine-font-size-sm, --mantine-font-size-md, --mantine-line-height-sm, --mantine-line-height-md.
  • Sombras: --mantine-shadow-xs, --mantine-shadow-sm, --mantine-shadow-md, etc.
  • Colores: --mantine-color-gray-0 … --mantine-color-gray-9, --mantine-color-blue-0 … --mantine-color-blue-9, además de otros colores con nombre. Cuando elige un color primario, las variables --mantine-primary-color-* se actualizan automáticamente.

Consulte la lista de variables CSS de Mantine para obtener una referencia completa.

Tokens del asistente de Flow​

Los formularios de varios pasos de Flow usan un componente de asistente. Puede personalizar su diseño y sus colores mediante los tokens --flow‑wizard‑…, limitados al elemento correspondiente. Entre los tokens importantes se incluyen:

  • Contenedor: --flow-wizard-gap (espaciado entre secciones), --flow-wizard-border-radius, --flow-wizard-padding.
  • Encabezado: --flow-wizard-header-spacing, --flow-wizard-title-color, --flow-wizard-title-size, --flow-wizard-title-weight.
  • Progreso: --flow-wizard-progress-margin, --flow-wizard-bar-height, --flow-wizard-bar-color, --flow-wizard-bar-bg.
  • Indicador de pasos: --flow-wizard-stepper-gap, --flow-wizard-numbers-gap, --flow-wizard-number-size, --flow-wizard-number-active-bg, --flow-wizard-number-inactive-bg, --flow-wizard-number-active-color, --flow-wizard-number-inactive-color.
  • Contenido del paso: --flow-wizard-step-gap, --flow-wizard-step-padding, --flow-wizard-step-title-color, --flow-wizard-step-title-size, --flow-wizard-step-title-weight, --flow-wizard-step-desc-color, --flow-wizard-step-desc-size, --flow-wizard-fields-gap.
  • Controles: --flow-wizard-controls-gap, --flow-wizard-controls-margin, --flow-wizard-controls-padding, --flow-wizard-controls-border-top.
  • Botones: --flow-wizard-prev-color, --flow-wizard-prev-bg, --flow-wizard-prev-border, --flow-wizard-next-color, --flow-wizard-next-bg.

Defina estas variables en el CSS de Theme Overrides para ajustar el aspecto del asistente. Por ejemplo, para ampliar los números de los pasos y cambiar el color activo:

.flow-wizard-step-number {
  --flow-wizard-number-size: 40px;
  --flow-wizard-number-active-bg: var(--mantine-color-green-6);
  --flow-wizard-number-active-color: white;
}

Tokens de campos de Flow​

Los bloques normales de Flow también exponen variables CSS para que pueda aplicar estilos a las partes del formulario ajenas al asistente con el mismo enfoque basado en tokens.

  • Campos generales: --flow-field-gap, --flow-field-padding, --flow-field-radius, --flow-field-bg, --flow-field-border, --flow-field-shadow.
  • Etiquetas y mensajes: --flow-field-label-color, --flow-field-label-size, --flow-field-label-weight, --flow-field-description-color, --flow-field-description-size, --flow-field-error-color, --flow-field-error-size, --flow-field-caption-color, --flow-field-caption-size.
  • Controles de entrada: --flow-control-min-height, --flow-control-radius, --flow-control-bg, --flow-control-border-width, --flow-control-border-color, --flow-control-color, --flow-control-placeholder-color, --flow-control-padding-inline, --flow-control-padding-block, --flow-control-focus-border-color, --flow-control-focus-shadow, --flow-control-disabled-opacity.
  • Controles de elección: --flow-choice-size, --flow-choice-color, --flow-choice-label-color.
  • Controles deslizantes: --flow-slider-track-size, --flow-slider-track-bg, --flow-slider-bar-color, --flow-slider-thumb-size, --flow-slider-thumb-bg, --flow-slider-thumb-border.
  • PIN y valoración: --flow-pin-gap, --flow-pin-input-size, --flow-rating-size, --flow-rating-active-color, --flow-rating-inactive-color.
  • Conjuntos de campos y bloques contraíbles: --flow-fieldset-border, --flow-fieldset-radius, --flow-fieldset-padding, --flow-fieldset-legend-color, --flow-collapse-toggle-bg, --flow-collapse-toggle-border, --flow-collapse-toggle-radius, --flow-collapse-toggle-padding, --flow-collapse-toggle-color.
  • Botones de acción: --flow-action-button-radius, --flow-action-button-padding, --flow-submit-bg, --flow-submit-color, --flow-submit-border, --flow-save-draft-bg, --flow-save-draft-color, --flow-save-draft-border.
  • Bloques de presentación y contenido: --flow-display-text-color, --flow-display-text-weight, --flow-display-text-line-height, --flow-display-title-color, --flow-display-title-weight, --flow-display-title-line-height, --flow-display-title-letter-spacing, --flow-blockquote-bg, --flow-blockquote-accent, --flow-blockquote-color, --flow-blockquote-radius, --flow-blockquote-padding, --flow-blockquote-gap, --flow-blockquote-border-width, --flow-blockquote-icon-size, --flow-blockquote-text-style, --flow-blockquote-cite-color, --flow-blockquote-cite-size, --flow-mark-bg, --flow-mark-color, --flow-mark-radius, --flow-mark-padding, --flow-highlight-bg, --flow-highlight-color, --flow-highlight-radius, --flow-highlight-padding, --flow-badge-padding, --flow-badge-circle-padding, --flow-badge-font-size, --flow-badge-font-weight, --flow-badge-letter-spacing, --flow-badge-text-transform, --flow-code-inline-bg, --flow-code-inline-color, --flow-code-block-bg, --flow-code-block-color, --flow-code-radius, --flow-code-padding, --flow-code-block-padding, --flow-number-color, --flow-number-weight, --flow-number-font-variant, --flow-spoiler-toggle-color, --flow-spoiler-content-color, --flow-image-radius, --flow-image-caption-color, --flow-image-caption-size, --flow-list-color, --flow-list-marker-color, --flow-list-padding-start, --flow-list-item-gap, --flow-table-color, --flow-table-border-color, --flow-table-cell-border-color, --flow-table-striped-bg, --flow-table-header-bg, --flow-table-header-color, --flow-table-header-weight, --flow-table-cell-color, --flow-table-caption-color, --flow-table-caption-padding-bottom, --flow-table-cell-padding-inline, --flow-table-cell-padding-block, --flow-timeline-color, --flow-timeline-gap, --flow-timeline-item-gap, --flow-timeline-content-gap, --flow-timeline-accent, --flow-timeline-line-opacity, --flow-timeline-bullet-color, --flow-timeline-bullet-weight, --flow-timeline-title-color, --flow-timeline-title-weight, --flow-overflow-item-bg, --flow-overflow-item-border, --flow-overflow-item-color, --flow-overflow-item-gap, --flow-overflow-item-radius, --flow-overflow-item-padding, --flow-overflow-item-shadow, --flow-overflow-summary-cursor, --flow-overflow-summary-font-weight, --flow-overflow-summary-letter-spacing.
  • Sugerencias de IA: --flow-ai-suggestions-border-thickness, --flow-ai-suggestions-border-stops, --flow-ai-suggestions-border-speed.
  • Metadatos del envío y utilidades del estado de éxito: --flow-submission-meta-bg, --flow-submission-meta-border, --flow-submission-meta-radius, --flow-submission-meta-padding, --flow-submission-meta-gap, --flow-submission-meta-label-color, --flow-submission-meta-value-color, --flow-submission-meta-value-font, --flow-submission-meta-copy-bg, --flow-submission-meta-copy-border, --flow-submission-meta-copy-color, --flow-submission-meta-shadow.

Estos tokens actúan como valores predeterminados del tema. Si un bloque establece explícitamente el color, el radio u otras propiedades similares en el editor, el ajuste específico del bloque puede seguir teniendo prioridad sobre el token.

Si quiere limitar las anulaciones a un tipo de bloque concreto, Flow añade clases estables alrededor de cada bloque del entorno de ejecución:

  • Bloques de entrada: .flow-block__text, .flow-block__textarea, .flow-block__select, .flow-block__number, .flow-block__password, .flow-block__date
  • Bloques de elección: .flow-block__checkbox, .flow-block__radio, .flow-block__switch
  • Otros campos: .flow-block__pin, .flow-block__slider, .flow-block__rangeslider, .flow-block__rating, .flow-block__file, .flow-block__tags
  • Contenedores y acciones: .flow-block__fieldset, .flow-block__collapse, .flow-block__submit, .flow-block__save-draft
  • Bloques de presentación y contenido: .flow-block__display-text, .flow-block__display-title, .flow-block__display-blockquote, .flow-block__display-mark, .flow-block__display-highlight, .flow-block__display-badge, .flow-block__display-code, .flow-block__display-number-formatter, .flow-block__display-spoiler, .flow-block__display-image, .flow-block__list, .flow-block__list-item, .flow-block__table, .flow-block__table-row, .flow-block__table-th, .flow-block__table-td, .flow-block__timeline, .flow-block__timeline-item, .flow-block__overflow-list, .flow-block__overflow-list-item
  • Interfaces de IA y respuesta: .flow-ai-suggestions, .flow-ai-suggestions-border, .flow-submission-meta

Estos envoltorios .flow-block__* son la interfaz estable para los temas. El control o botón interactivo de Mantine suele residir un nivel más abajo y consumir allí el token --flow-*, por lo que conviene establecer los tokens en el envoltorio en vez de seleccionar clases auxiliares internas.

Los diseños de estado de éxito reutilizan las interfaces de estilo de botones de acción y metadatos del envío. Por tanto, la mayor parte de los estilos de la pantalla de confirmación se puede aplicar mediante los tokens de botones de acción y las anulaciones de .flow-submission-meta, sin variables independientes exclusivas del estado de éxito.

Por ejemplo, para aplicar un estilo de marca más intenso solo al botón de envío y a los campos PIN:

.flow-block__submit {
  --flow-submit-bg: var(--mantine-color-green-6);
  --flow-submit-color: white;
}

.flow-block__pin {
  --flow-pin-input-size: 3rem;
  --flow-control-radius: 12px;
}

Recetas de temas para copiar y pegar​

Estos preajustes sirven como punto de partida para proyectos de clientes. Pegue cualquiera de ellos en el campo Theme Overrides y ajuste después los tokens de colores y espaciado según sea necesario.

SaaS redondeado​

Úselo si quiere un aspecto de aplicación suave y moderno, con controles redondeados y una acción principal más destacada.

.smartcloud-flow-shadow-root {
  --mantine-font-family: Inter, system-ui, sans-serif;
  --mantine-radius-md: 14px;
  --mantine-spacing-md: 1rem;
  --mantine-color-blue-6: #2563eb;
  --mantine-primary-color-filled: var(--mantine-color-blue-filled);

  --flow-control-radius: 14px;
  --flow-control-border-color: var(--mantine-color-blue-2);
  --flow-control-focus-border-color: var(--mantine-color-blue-5);
  --flow-control-focus-shadow: 0 0 0 3px rgb(37 99 235 / 0.12);

  --flow-submit-bg: linear-gradient(135deg, #2563eb, #1d4ed8);
  --flow-submit-color: white;
  --flow-action-button-radius: 14px;

  --flow-wizard-number-active-bg: #2563eb;
  --flow-wizard-next-bg: linear-gradient(135deg, #2563eb, #1d4ed8);
}

Minimalista clínico​

Úselo para formularios sanitarios, legales o administrativos en los que la claridad sea más importante que la expresión de la marca.

.smartcloud-flow-shadow-root {
  --mantine-font-family: system-ui, sans-serif;
  --mantine-radius-md: 6px;
  --mantine-spacing-md: 0.875rem;

  --flow-field-gap: 0.375rem;
  --flow-control-radius: 6px;
  --flow-control-bg: #ffffff;
  --flow-control-border-color: #cbd5e1;
  --flow-control-focus-border-color: #0f172a;
  --flow-control-focus-shadow: 0 0 0 1px #0f172a;

  --flow-field-description-color: #475569;
  --flow-field-error-color: #b91c1c;

  --flow-fieldset-border: 1px solid #cbd5e1;
  --flow-collapse-toggle-border: 1px solid #cbd5e1;

  --flow-submit-bg: #0f172a;
  --flow-submit-color: #ffffff;
  --flow-save-draft-border: 1px solid #cbd5e1;
}

Marca intensa​

Úselo si el formulario debe reflejar visiblemente la marca del cliente en vez de integrarse en los controles de la página.

.smartcloud-flow-shadow-root {
  --mantine-font-family: "Space Grotesk", system-ui, sans-serif;
  --mantine-radius-md: 10px;
  --mantine-color-pink-6: #e11d48;
  --mantine-primary-color-filled: var(--mantine-color-pink-filled);

  --flow-control-radius: 10px;
  --flow-control-border-width: 2px;
  --flow-control-border-color: #fecdd3;
  --flow-control-focus-border-color: #e11d48;
  --flow-control-focus-shadow: 0 0 0 3px rgb(225 29 72 / 0.18);

  --flow-choice-color: #e11d48;
  --flow-slider-bar-color: #e11d48;
  --flow-slider-thumb-border: 2px solid #e11d48;
  --flow-rating-active-color: #e11d48;

  --flow-submit-bg: #e11d48;
  --flow-submit-color: #ffffff;

  --flow-wizard-number-active-bg: #e11d48;
  --flow-wizard-next-bg: #e11d48;
}

Contraste oscuro​

Úselo cuando el formulario se encuentre en un diseño oscuro y necesite más contraste sin tener que cambiar manualmente el estilo de cada componente.

.smartcloud-flow-shadow-root[data-mantine-color-scheme="dark"] {
  --mantine-color-body: #0f172a;
  --mantine-color-text: #e5e7eb;

  --flow-field-description-color: #94a3b8;
  --flow-control-bg: #111827;
  --flow-control-color: #f8fafc;
  --flow-control-border-color: #334155;
  --flow-control-placeholder-color: #64748b;
  --flow-control-focus-border-color: #38bdf8;
  --flow-control-focus-shadow: 0 0 0 3px rgb(56 189 248 / 0.18);

  --flow-fieldset-border: 1px solid #334155;
  --flow-collapse-toggle-bg: #111827;
  --flow-collapse-toggle-border: 1px solid #334155;

  --flow-submit-bg: #38bdf8;
  --flow-submit-color: #0f172a;
  --flow-save-draft-color: #e5e7eb;
  --flow-save-draft-border: 1px solid #475569;

  --flow-wizard-bar-bg: #334155;
  --flow-wizard-number-inactive-bg: #1e293b;
  --flow-wizard-number-inactive-color: #cbd5e1;
  --flow-wizard-next-bg: #38bdf8;
  --flow-wizard-next-color: #0f172a;
}

Prácticas recomendadas​

  • Limite las anulaciones de Theme Overrides a .smartcloud-flow-shadow-root para que solo afecten a las interfaces de Flow.
  • Use variables de Mantine para que los colores y el espaciado se mantengan coherentes en los modos claro y oscuro.
  • Cuando defina colores personalizados mediante el campo Colours del bloque Formulario, elige nombres únicos (por ejemplo, brand) y úsalos en las anulaciones (--mantine-color-brand-6).
  • Pruebe las anulaciones tanto en modo claro como oscuro. Use el atributo data-mantine-color-scheme en .smartcloud-flow-shadow-root para establecer o detectar el modo.