Saltar al contenido principal

Colors

Abrir en ChatGPT

webforJ proporciona un sistema de color basado en propiedades personalizadas de CSS. Estas variables de color mantienen un estilo visual consistente en toda tu aplicación mientras te brindan control total para personalizar paletas de acuerdo con tus necesidades de diseño.

Puedes hacer referencia a cualquier color utilizando la sintaxis --dwc-color-{palette}-{shade}, donde {palette} es el nombre del grupo de color (por ejemplo, primary, danger, ..) y {shade} es un número de 5 a 95 en incrementos de 5, que representa la claridad del color.

.element {
  background-color: var(--dwc-color-primary-40);
  color: var(--dwc-color-primary-text-40);
}
Escala de valores de sombra

Los valores de sombra varían de 5 (el más oscuro) a 95 (el más claro), aumentando en pasos de 5.

Paletas de color​

Existen varias paletas de color integradas, cada una diseñada para casos de uso semánticos como branding, mensajes de éxito, advertencias y más. Cada paleta se compone de matices y sombras generados dinámicamente basados en tres propiedades clave: hue, saturation y contrast-threshold.

Paletas disponibles​

  • default: Una paleta neutral basada en gris matizada con el color primario, utilizada para la mayoría de los componentes.
  • primary: Representa típicamente el color primario de tu marca.
  • success, warning, danger: Paletas semánticas utilizadas para indicadores de estado apropiados.
  • info: Una paleta complementaria opcional para énfasis secundario.
  • gray: Una paleta realmente en escala de grises, sin matizar.
  • black/white: Valores de color estáticos.

Primary

5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95

Success

5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95

Warning

5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95

Danger

5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95

Info

5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95

Gray

5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95

Default

5
10
15
20
25
30
35
40
45
50
55
60
65
70
75
80
85
90
95

BlackWhite

Black
White

DWC HueCraft

Para simplificar el proceso de generación de paletas compatibles con WCAG para tus aplicaciones webforJ, puedes utilizar la herramienta DWC HueCraft. Soporta la creación de paletas basadas en colores o logotipos de marca y permite una rápida exportación a CSS.

Comportamiento del modo oscuro​

webforJ admite una estrategia de color invertido en el modo oscuro. En lugar de usar paletas de color completamente separadas, invierte la forma en que se interpretan los valores de claridad.

Esto significa que en temas oscuros, los valores de sombra más bajos (por ejemplo, --dwc-color-primary-5) se vuelven claros y los valores más altos (por ejemplo, --dwc-color-primary-95) se vuelven oscuros. La lógica se invierte para asegurar un contraste y legibilidad óptimos en todos los fondos.

Tu código de componente sigue siendo el mismo, independientemente del tema. Por ejemplo:

.button {
  background-color: var(--dwc-color-primary-40);
  color: var(--dwc-color-primary-text-40);
}

En el modo claro, esto proporciona un fondo de tono medio. En el modo oscuro, sigue ofreciendo un tono medio, pero visualmente invertido para funcionar en superficies oscuras. Este enfoque evita la duplicación, mantiene tus estilos consistentes y permite transiciones visuales suaves al cambiar entre temas claros y oscuros.

Variables de configuración de paleta​

Cada paleta se genera en base a las siguientes variables:

VariableDescripción
hueEl ángulo (en grados) en la rueda de color. Los valores sin unidad se interpretan como grados.
saturationUn porcentaje que indica la intensidad del color. 100% está totalmente saturado; 0% es escala de grises.
contrast-thresholdUn valor entre 0 y 100 que determina si el texto debe ser claro u oscuro según la claridad del fondo.

Puedes ajustar una paleta redefiniendo estas variables en tus estilos raíz. Por ejemplo, para modificar la paleta primaria:

:root {
  --dwc-color-primary-h: 225;
  --dwc-color-primary-s: 100%;
  --dwc-color-primary-c: 60;
}

Temas de componentes con variables abstractas​

Para simplificar el estilo y la consistencia entre los componentes, webforJ introduce una capa de abstracción sobre las paletas de color base. Esta capa se basa en variables de tema abstractas - propiedades personalizadas de CSS que se refieren a sombras específicas dentro de una paleta de color.

Estas variables facilitan la aplicación de temas en todos los componentes sin referirse directamente a valores de color crudos o muestras. Puedes considerarlas como acortamientos de estilo semántico que reflejan la intención de tu aplicación en lugar de los detalles de su implementación.

Grupos de variables​

Las variables de tema abstractas se organizan en cuatro grupos:

  1. Normal Usado para la apariencia predeterminada, como fondos y texto en componentes inactivos.
  2. Oscuro Usado para estados activos o seleccionados.
  3. Claro Usado para estados de hover y enfoque.
  4. Alt Usado para resaltados secundarios, como el enfoque del teclado o acentos sutiles de UI.

Cada grupo define:

  • Un color de fondo
  • Un color de primer plano (texto)
  • Un color de borde (para estados enfocados/hover/activos)
  • Un anillo de enfoque (usado cuando el componente recibe enfoque visible)

Cada pestaña a continuación muestra las variables abstractas definidas para una paleta específica (primary, success, danger, etc.). Estas variables extraen valores de la paleta subyacente (por ejemplo, --dwc-color-primary-40) y las hacen reutilizables en toda tu aplicación.

Por ejemplo, en lugar de usar directamente --dwc-color-primary-40, puedes aplicar --dwc-color-primary, que abstrae el rol de ese color como el fondo predeterminado para un componente con estilo primario.

Cambiar los valores de la paleta en un solo lugar actualizará el aspecto de todos los componentes que dependen de estas variables abstractas.

Estado normal​

Usado para la apariencia base, neutral de un componente—cuando está inactivo y no se está interactuando con él.

VariableDescripción
--dwc-color-${name}El color de fondo predeterminado. También se utiliza para bordes en muchos componentes.
--dwc-color-on-${name}-textEl color del texto mostrado sobre el fondo predeterminado.
--dwc-color-${name}-textEl color del texto cuando el componente se coloca sobre el fondo de superficie.
--dwc-border-color-${name}Color del borde, utilizado principalmente para estados de hover, enfoque y activos.
--dwc-focus-ring-${name}Sombra del anillo de enfoque cuando el componente recibe estilo de enfoque visible.

Variante más oscura​

Usado para estados seleccionados o activos—normalmente un tono más profundo para un contraste y énfasis más fuertes.

VariableDescripción
--dwc-color-${name}-darkUna versión más oscura del color base. A menudo utilizada para estados presionados o seleccionados.
--dwc-color-on-${name}-text-darkColor del texto cuando se utiliza sobre un fondo oscuro.
--dwc-color-${name}-text-darkUna alternativa de texto ligeramente más oscura cuando se muestra sobre la superficie.

Variante más clara​

Usado para hover, enfoque y señales visuales menos dominantes. Estos son tonos suaves diseñados para una retroalimentación de interacción sutil.

VariableDescripción
--dwc-color-${name}-lightUna versión más clara del color base. Típicamente utilizada para fondos de hover/enfoque.
--dwc-color-on-${name}-text-lightColor del texto cuando se muestra sobre un fondo claro.
--dwc-color-${name}-text-lightUn tono de texto más claro para usar en estados menos prominentes.

Variante alternativa​

Usado para énfasis secundario o resaltados de UI—como contornos de enfoque de navegación por teclado o indicadores auxiliares.

VariableDescripción
--dwc-color-${name}-altUna versión muy clara del color, utilizada principalmente para resaltados o brillos de fondo.
--dwc-color-on-${name}-text-altColor del texto cuando el fondo es el color alternativo (alt).
--dwc-color-default-dark: var(--dwc-color-default-85);
--dwc-color-on-default-text-dark: var(--dwc-color-default-text-85);
--dwc-color-default-text-dark: var(--dwc-color-default-35);

--dwc-color-default: var(--dwc-color-default-90);
--dwc-color-on-default-text: var(--dwc-color-default-text-90);
--dwc-color-default-text: var(--dwc-color-default-40);

--dwc-color-default-light: var(--dwc-color-default-95);
--dwc-color-on-default-text-light: var(--dwc-color-default-text-95);
--dwc-color-default-text-light: var(--dwc-color-default-45);

--dwc-color-default-alt: var(--dwc-color-primary-alt);
--dwc-color-on-default-text-alt: var(--dwc-color-on-primary-text-alt);

--dwc-border-color-default: var(--dwc-border-color-primary);
--dwc-focus-ring-default: var(--dwc-focus-ring-primary);