Saltar al contenido

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 según 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 colores (por ejemplo, primary, danger, ..) y {shade} es un número del 5 al 95 en incrementos de 5, representando 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 van desde 5 (más oscuro) hasta 95 (más claro), aumentando en pasos de 5.

Paletas de colores​

Hay varias paletas de colores integradas, cada una diseñada para casos de uso semántico como branding, mensajes de éxito, advertencias y más. Cada paleta está compuesta de matices y tonos generados dinámicamente basados en tres propiedades clave: hue, saturation, y contrast-threshold.

Paletas disponibles​

  • default: Una paleta neutra 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 un énfasis secundario.
  • gray: Una paleta de escala de grises verdadera, 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 de marca o logotipos y permite una exportación rápida de CSS.

Comportamiento en modo oscuro​

webforJ admite una estrategia de color invertido en modo oscuro. En vez de utilizar paletas de colores 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 convierten en claros y los valores más altos (por ejemplo, --dwc-color-primary-95) se convierten en oscuros. La lógica se invierte para asegurar un contraste y una legibilidad óptimos en todos los fondos.

El código de tu componente permanece igual, independientemente del tema. Por ejemplo:

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

En modo claro, esto da un fondo de tono medio. En modo oscuro, todavía da un tono medio, pero visualmente invertido para funcionar sobre superficies oscuras. Este enfoque evita la duplicación, mantiene tus estilos consistentes y suaviza las transiciones visuales 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% es completamente 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;
}

Tematización de componentes con variables abstractas​

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

Estas variables facilitan la aplicación de temas en todos los componentes sin referirse directamente a valores de color en crudo o muestras. Puedes pensar en ellas como atajos de estilo semántico que reflejan la intención de tu aplicación en lugar de sus detalles de 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 realces secundarios, como enfoque de 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 (utilizado cuando el componente recibe un 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 los 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 papel de ese color como el fondo predeterminado para un componente estilizado como primario.

Cambiar los valores de la paleta en un 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 los 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 hover, enfoque y activos.
--dwc-focus-ring-${name}Sombra del anillo de enfoque cuando el componente recibe el estilo de enfoque visible.

Variante más oscura​

Usado para estados seleccionados o activos—generalmente 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 utilizado 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 pistas visuales menos dominantes. Estos son tonos suaves diseñados para una retroalimentación sutil de interacción.

VariableDescripción
--dwc-color-${name}-lightUna versión más clara del color base. Típicamente utilizado 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 utilizar en estados menos prominentes.

Variante alterna​

Usado para énfasis secundario o realces 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 realces 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);