Ir al contenido principal
Frutjam logo Frutjam
v2.2.2
Theme

Configuración

Última actualización:

Configure el complemento CSS Tailwind exclusivo de Frutjam CSS. Establezca temas predeterminados, defina tokens de colores personalizados, alterne el sistema de prefijos: no se requiere JavaScript. Valores predeterminados accesibles de WCAG, funciona con Django, HTMX, Laravel y cualquier marco.

Configure el complemento CSS Tailwind exclusivo de Frutjam CSS para que coincida con su proyecto. Establezca temas, defina tokens de colores personalizados, alterne el sistema de prefijos y seleccione componentes: no se requiere JavaScript. Valores predeterminados accesibles de WCAG AA. Funciona con Django, HTMX, Laravel, React y cualquier proyecto Tailwind CSS v4.

Configuración básica

Agregue Frutjam a su archivo CSS usando la directiva @plugin. No se requieren opciones: todo funciona de inmediato.

css 
1
2
@import "tailwindcss";
@plugin "frutjam";

Opciones de complemento

Personaliza Frutjam pasando opciones dentro del bloque @plugin:

css 
1
2
3
4
5
6
7
8
9
@import "tailwindcss";
@plugin "frutjam" {
  prefix: fj;
  reset: true;
  root: :host;
  include: button, card, alert;
  /* or: */
  exclude: table, timeline;
}

prefijo

Agrega un prefijo a todos los nombres de clases de Frutjam para evitar conflictos con su propio CSS.

css 
1
2
3
@plugin "frutjam" {
  prefix: fj;
}
html 
<button class="fj-btn fj-btn-primary">Send mail</button>

El comportamiento del prefijo depende de si también utiliza la opción prefix() de Tailwind:

Sólo prefijo Frutjam

Los nombres de las clases de Frutjam tienen prefijo. Úsalos directamente en HTML.

css 
1
2
3
4
@import "tailwindcss";
@plugin "frutjam" {
  prefix: fj;
}
html 
<button class="fj-btn">Button</button>

Sólo prefijo de viento de cola

El prefix() de Tailwind funciona como una variante: todas las utilidades (incluida la de Frutjam) requieren el prefijo como selector de variantes en HTML.

css 
1
2
@import "tailwindcss" prefix(tw);
@plugin "frutjam";
html 
<button class="tw:btn">Button</button>

Ambos prefijos

Frutjam cambia el nombre de sus clases (por ejemplo, fj-btn) y se requiere el prefijo variante de Tailwind en la parte superior.

css 
1
2
3
4
@import "tailwindcss" prefix(tw);
@plugin "frutjam" {
  prefix: fj;
}
html 
<button class="tw:fj-btn">Button</button>

reiniciar

Controla si Frutjam inyecta reinicios de elementos base (estilos de reinicio). El valor predeterminado es true.

Cuando true, Frutjam restablece el modelo de caja, la tipografía, las listas, los medios y los elementos de formulario, similar a la verificación previa de Tailwind. Cuando false, solo se inyectan los tokens de la variable CSS; los estilos de elementos sin formato se omiten por completo.

Configúrelo en false cuando ya esté usando otro marco CSS (Bootstrap, Bulma, etc.) o su propio reinicio, para evitar conflictos en elementos como *, html, body, h1-h6 y button.

css 
1
2
3
@plugin "frutjam" {
  reset: false;
}

raíz

El selector CSS donde Frutjam registra sus variables token de diseño (--color-primary, --color-base, etc.). El valor predeterminado es :root.

Hay tres valores útiles:

Valorcuando usar
:rootPor defecto. Los tokens están disponibles globalmente en toda la página.
:hostShadow DOM/componentes web. Coloca los tokens dentro del componente para que no se filtren.
Cualquier selector (por ejemplo, #app)Alcanza tokens a un elemento contenedor específico. Útil cuando Frutjam coexiste con otro framework en la misma página.

Predeterminado: tokens globales

css 
1
2
3
@plugin "frutjam" {
  root: :root;
}

Shadow DOM/componentes web

css 
1
2
3
@plugin "frutjam" {
  root: :host;
}

Con alcance a un elemento contenedor

Si otro marco ya controla :root (por ejemplo, Bootstrap establece sus propias variables --bs-* y colores del cuerpo), apunte Frutjam a un elemento contenedor. Esto mueve color, background-color y todas las variables CSS fuera de :root para que solo se apliquen dentro de ese contenedor.

css 
1
2
3
4
5
@plugin "frutjam" {
  prefix: fj;
  reset: false;
  root: #my-app;
}
html 
1
2
3
4
<div id="my-app" data-theme="blueberry">
  <!-- Frutjam components here, Bootstrap outside -->
  <button class="fj-btn fj-btn-primary">Send</button>
</div>

incluir

Cargue solo componentes específicos en lugar de la biblioteca completa. Útil para reducir el tamaño de salida en producción.

css 
1
2
3
@plugin "frutjam" {
  include: button, card, alert, badge;
}

excluir

Cargue todos los componentes excepto los enumerados. Úselo cuando solo necesite eliminar algunos componentes de la compilación completa.

css 
1
2
3
@plugin "frutjam" {
  exclude: table, timeline, chat;
}

Crear un tema personalizado

Para crear su propio tema, simplemente asigne sus valores de color a las variables CSS proporcionadas dentro de un selector [data-theme="your-theme-name"].

1. The "Automatic" Approach (Minimal)

En esta versión, omitimos las variables --color-on-*. Frutjam detecta las variables que faltan y calcula el color de texto óptimo (normalmente alternando entre un valor OKLCH muy claro o muy oscuro) para garantizar que el componente siga siendo accesible y legible.

css 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
@layer theme {
    :is([data-theme="your-theme-name"]) {
        --scheme-color: light;
        --border-radius: 0.25rem;
        --color-base: oklch(1 0 0);
        --color-neutral: oklch(0.15 0 0);
        --color-primary: oklch(51.1% 0.262 276.966);
        --color-secondary: oklch(0.591 0.293 322.896);
        --color-accent: oklch(0.541 0.281 293.009);
        --color-info: oklch(0.685 0.169 237.323);
        --color-success: oklch(0.792 0.209 151.711);
        --color-warning: oklch(0.852 0.199 91.936);
        --color-error: oklch(0.577 0.245 27.325);
    }
}

2. The "Manual" Approach (Full Control)

En esta versión, definimos explícitamente las variables --color-on-*. Esto es ideal cuando tiene pautas de marca específicas (como usar un color blanquecino teñido en lugar de blanco puro) o cuando desea lograr una "ambiente" específica, como una apariencia sofisticada de bajo contraste que aún pasa las comprobaciones de accesibilidad.

css 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@layer theme {
    :is([data-theme="your-theme-name"]) {
        --scheme-color: light;
        --border-radius: 0.25rem;
        --color-base: oklch(1 0 0);
        --color-on-base:oklch(0.22 0 0);
        --color-neutral: oklch(0.15 0 0);
        --color-on-neutral: oklch(1 0 0);
        --color-primary: oklch(51.1% 0.262 276.966);
        --color-on-primary: oklch(96.2% 0.018 272.314);
        --color-secondary: oklch(0.591 0.293 322.896);
        --color-on-secondary: oklch(1 0 0);
        --color-accent: oklch(0.541 0.281 293.009);
        --color-on-accent: oklch(1 0 0);
        --color-info: oklch(0.685 0.169 237.323);
        --color-on-info: oklch(0.15 0 0);
        --color-success: oklch(0.792 0.209 151.711);
        --color-on-success: oklch(0.15 0 0);
        --color-warning: oklch(0.852 0.199 91.936);
        --color-on-warning: oklch(0.15 0 0);
        --color-error: oklch(0.577 0.245 27.325);
        --color-on-error: oklch(1 0 0);
    }
}

Para aplicar su tema personalizado a su proyecto en su HTML, use data-theme="your-theme-name" a un elemento HTML.

html 
1
2
3
<html data-theme="your-theme-name">
 ...
</html>

Los temas se pueden anidar: puede aplicar un tema específico a cualquier sección de su HTML, anulando el tema global de esa área.

html 
1
2
3
4
5
6
7
8
<html data-theme="light">
  <div data-theme="dark">
    This div uses the dark theme.
    <span data-theme="your-custom-theme">
      This span uses the your-custom-theme
    </span>
  </div>
</html>

Lectura adicional