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 coherente a lo largo de tu aplicación mientras te dan control total para personalizar paletas según las necesidades de tu diseño.

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

.element {
  background-color: var(--dwc-color-primary-50);
  color: var(--dwc-color-on-primary-text-50);
}
Escala de Pasos de Sombra

Los valores de paso varían de 5 (más oscuro) a 95 (más claro), aumentando en pasos de 5. El paso 5 es siempre el más oscuro y el paso 95 es siempre el más claro, independientemente del modo claro u oscuro.

Paletas de colores​

DWC configura siete paletas más la paleta black/white, donde cada paleta es un conjunto de variaciones (sombras y matices) de un color semántico.

Paletas disponibles​

  • default: Una paleta neutral teñida con el matiz primario, utilizada para la mayoría de los fondos de componentes, bordes y elementos de interfaz de usuario neutros.
  • 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 para énfasis secundario.
  • gray: Una paleta de escala de grises pura, sin teñir.
  • black/white: Colores dinámicos conscientes del modo que se adaptan al tema actual. El casi negro en modo claro se convierte en casi blanco en modo oscuro, y viceversa.

Semillas de paleta​

Cada paleta se genera a partir de dos variables de semilla: hue y saturation. Establecer estos dos valores genera automáticamente los 19 pasos.

Variable de semillaDescripción
--dwc-color-{name}-hEl ángulo de tono del color semilla (0-360).
--dwc-color-{name}-sEl porcentaje de saturación. 100% es completamente saturado, 0% es completamente desaturado (gris).

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%;
}
VariableValor predeterminado
--dwc-color-primary-h223
--dwc-color-primary-s91%

Anulación directa de semilla​

Cada paleta también expone una variable --dwc-color-{name}-seed. Por defecto, esta se construye a partir de los valores de tono y saturación, pero puedes anularla directamente con cualquier color CSS válido para eludir completamente el sistema de tono/saturación.

:root {
  --dwc-color-primary-seed: #6366f1;
}

Rotación de tono​

El generador de paletas aplica una sutil rotación de tono a través de los pasos para crear paletas de apariencia más natural. Las sombras más oscuras se desplazan ligeramente hacia el calor mientras que las sombras más claras se desplazan ligeramente hacia el frío. Esto imita cómo se comportan realmente los pigmentos y evita que las paletas se vean planas o sintéticas.

VariableValor predeterminadoDescripción
--dwc-color-hue-rotate3Grados de desplazamiento de tono a través de la paleta. Establecer en 0 para desactivarlo.

Variables generadas por paso​

Cada paleta genera 19 pasos (del 5 al 95). Para cada paso, se producen las siguientes variables:

Patrón de VariableDescripción
--dwc-color-{name}-{step}La sombra de la paleta en ese paso.
--dwc-color-{name}-text-{step}Un color de texto seguro en la superficie derivado de ese paso (cumple con WCAG AA).
--dwc-color-on-{name}-text-{step}Color de texto para usar SOBRE la sombra como fondo (cambia automáticamente entre claro/oscuridad).
Accesibilidad

Todos los colores de texto generados cumplen automáticamente con los requisitos de contraste WCAG AA. No necesitas calcular las proporciones de contraste tú mismo.

La fila superior muestra la sombra con su color de on-text (para el texto colocado directamente sobre esa sombra). La fila inferior muestra el color text sobre un fondo de superficie:

Variables generadas adicionales​

Patrón de VariableDescripción
--dwc-color-{name}-tintEl color semilla a 12% de opacidad, para fondos de resaltado sutiles.
--dwc-border-color-{name}Color de borde consciente del modo teñido con el matiz de la paleta.
--dwc-border-color-{name}-emphasisColor de borde consciente del modo más fuerte para estados de hover, foco y activos.
--dwc-focus-ring-{name}Sombra del anillo de enfoque para la paleta.

Colores globales​

Estos son colores conscientes del modo que se adaptan automáticamente a los temas claros y oscuros.

VariableDescripción
--dwc-color-blackCasi negro en modo claro, casi blanco en modo oscuro.
--dwc-color-whiteCasi blanco en modo claro, casi negro en modo oscuro.
--dwc-color-body-textColor de texto predeterminado del cuerpo (usa --dwc-color-black).

Temas de componentes​

DWC abstrae el uso de las paletas disponibles con un conjunto de variables de variación semántica de nivel superior. Los componentes utilizan estas variaciones en lugar de números de pasos en bruto, porque las variaciones se adaptan automáticamente a los modos claros y oscuros.

Las variaciones se dividen en tres grupos: normal, dark, y light.

  1. Las variables normal son el color base, utilizadas para fondos y elementos de interfaz de usuario primarios.
  2. Las variables dark se utilizan principalmente para estados activos/pulsados.
  3. Las variables light se utilizan principalmente para estados hover/foco.
--dwc-color-primary-dark: var(--dwc-color-primary-45)
--dwc-color-primary: var(--dwc-color-primary-50)
--dwc-color-primary-light: var(--dwc-color-primary-55)
--dwc-color-primary-alt: var(--dwc-color-primary-tint)

--dwc-color-primary-text-dark: var(--dwc-color-primary-text-40)
--dwc-color-primary-text: var(--dwc-color-primary-text-45)
--dwc-color-primary-text-light: var(--dwc-color-primary-text-50)

--dwc-color-on-primary-text-dark: var(--dwc-color-on-primary-text-45)
--dwc-color-on-primary-text: var(--dwc-color-on-primary-text-50)
--dwc-color-on-primary-text-light: var(--dwc-color-on-primary-text-55)
--dwc-color-on-primary-text-alt: var(--dwc-color-primary-text)

Referencia de variaciones​

VariableDescripción
--dwc-color-{name}El color base. Utilizado para fondos, rellenos y bordes.
--dwc-color-{name}-darkUna versión más oscura. Utilizada para estados activos/pulsados.
--dwc-color-{name}-lightUna versión más clara. Utilizada para estados de hover/foco.
--dwc-color-{name}-altLa semilla a 12% de opacidad. Utilizada para estados de resaltado sutil.
--dwc-color-{name}-textColor de texto seguro en superficies de aplicación (WCAG AA).
--dwc-color-{name}-text-darkVariación de texto más oscura.
--dwc-color-{name}-text-lightVariación de texto más clara.
--dwc-color-on-{name}-textColor de texto para usar SOBRE --dwc-color-{name} como fondo.
--dwc-color-on-{name}-text-darkColor de texto para usar SOBRE --dwc-color-{name}-dark.
--dwc-color-on-{name}-text-lightColor de texto para usar SOBRE --dwc-color-{name}-light.
--dwc-color-on-{name}-text-altColor de texto para usar SOBRE --dwc-color-{name}-alt.
--dwc-border-color-{name}Color de borde consciente del modo.
--dwc-border-color-{name}-emphasisColor de borde más fuerte consciente del modo.
--dwc-focus-ring-{name}Sombra del anillo de enfoque.