Configuración

El proveedor de estilos se puede configurar. Los atributos controlan la generación de reglas CSS globales, mientras que los parámetros de objeto establecen el estado inicial del proveedor.

Configuración simple (atributos)

Puedes establecer ajustes simples como atributos del elemento HTMLScript del proveedor de estilos.

• prefijo: prefijo privado para el nombre de la hoja de estilo.
• hidratación: atributo booleano de hidratación que permite al proveedor hidratar los creadores de hojas de estilo en el lado del cliente (desde la versión 3.12.0, la hidratación se gestiona automáticamente).
• modo: modo de generación de selectores BEM (a: atributos de datos, c: clases).
• min: generación de selectores BEM minificados (atributo booleano).
• tema: tema actual que permite usar variables globales del diccionario de tema asociado.
• tamaño (añadido en la versión 3.4.0): sobrescribe la variable global CSS base de tamaño.
• tiempo (añadido en la versión 3.4.0): sobrescribe la variable global CSS base de tiempo.
• ángulo (añadido en la versión 3.5.0): sobrescribe la variable global CSS base de ángulo.

Configuración compleja

La configuración compleja debe pasarse a la función defineProvider o asignarse al campo settings dentro del elemento HTMLScript Style provider.

• bp: puntos de interrupción para consultas de límite de ancho.
• vars: variables globales para cada tema.
• makers: creadores de la hoja de estilos inicial.
• off: desactiva los creadores de la hoja de estilos inicial.
• palette (añadida en la versión 3.4.0): configuración de la paleta de colores que permite personalizar la utilidad palette.
• coef (añadida en la versión 3.5.0): configuración global de coeficientes que permite personalizar la utilidad coef.

La personalización de temas es muy sencilla

Simplemente pase todos sus temas con los valores de las variables requeridas a la configuración vars. Se acepta cualquier anidamiento.

define-provider.ts

import { defineProvider } from 'effcss';

// global vars grouped by theme
const vars = {
    // default variables
    '': {
        colors: {
            main: 'white',
            contrast: 'black'
        }
    },
    // dark theme variables
    dark: {
        colors: {
            main: 'white',
            contrast: 'black'
        }
    },
};

// you should run it before provider HTMLScriptElement connected to DOM
defineProvider({ vars });

main.tsx

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { useStyleProvider } from 'effcss';
import App from './App.tsx';

const consumer = useStyleProvider();
// set dark theme to apply predefined global variables
consumer.theme = 'dark';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
      <App css={consumer} />
  </StrictMode>,
);