Usando los esquema de colores del Tema Universal 42 en nuestros componentes personalizados

El Tema Universal utiliza un conjunto de colores (esquemas) entre los diferentes componentes. Estos colores se pueden agrupar en dos paletas: colores generales y colores con estado.

Colores generales

Los colores generales se utilizan para agregar color a varios componentes de la aplicación como gráficos, cards, carousel y más.

Hay 15 colores primarios que se modifican para convertirse en más claros o más oscuros para crear un total de 45 opciones de color. Podemos personalizar estos colores modificando la paleta de colores dentro de Theme Roller.

Colores Primarios

Colores Primarios – Más Claros

Colores Primarios – Más Oscuros

Colores con Estado

Los colores con estado se utilizan para transmitir significado adicional para un componente de interfaz de usuario dado. Por ejemplo, podemos elegir colorear una alerta de advertencia con un tinte amarillo.

Hay 6 colores con estado: normal, hot, informativo, peligro, advertencia y éxito. Podemos personalizar estos colores modificando los colores de estado dentro de Theme Roller.

Colores con Estado

Utilidades de Colores Generales

Mientras que muchos componentes del Tema Universal hacen uso de estos colores automáticamente, también podemos usarlos en varios componentes personalizados. El Tema Universal proporciona una serie de clases CSS que se pueden utilizar para aplicar esta paleta de colores a cualquier etiqueta HTML.

Reglas CSS del Tema Universal 42:

• Block: u-color-1                  

• Text: u-color-1-text

• Background: u-color-1-bg

• Border: u-color-1-border

La clase u-Color permite definir el esquema del color, hay definidas en el Tema Universal 42 una cantidad de 45 colores diferentes, el cual se definen del 1 al 45.

Por ejemplo, vamos a crear una región de contenido estático, con la plantilla “Blank with Atributes” y en el origen colocamos el siguiente contenido HTML:

<div>

<h1>ORACLE APPLICATION EXPRESS 5.1</h1>

 <h3>Desarrolla</h3>

 <p> Utiliza nuestro moderno, intuitivo y poderoso entorno de desarrollo para construir e
    implantar aplicaciones rápidamente facilitando el desarrollo iterativo.</p>

</div>

Agregamos un Identificador estático llamado “miregiondemo” a la región para darle estilos CSS a la misma.

En propiedades de la página, ingresamos en el sector de “CSS En Línea” las siguientes reglas CSS:

#miregiondemo
div {height:200px;}
h1 {font-size: 2.5em;text-align:center; }
h3 {font-size: 1.5em;text-align:center; }
p {font-size: 1.2em;text-align:center; padding:5px 50px 5px 50px; }

Ingresamos a la Región Demo en propiedades de la región, nos ubicamos en la sección Diseño y colocamos el siguiente CSS en “Clases CSS de Columna”:

dm-ColorBlock u-Color-8-BG--bg u-Color-8-FG--txt

Al ejecutar la página podremos ver que la región toma el color del esquema asociado según el Tema Universal.

Como podemos ver en la imagen de colores primarios el 8 representa el color naranja.

Si por ejemplo usamos este CSS: 

dm-ColorBlock u-Color-10-BG--bg u-color-7-text

Donde el color de fondo es 10 (rosado) y el color del texto es 7 (amarillo).

Utilidades de Colores con Estado

El Tema Universal ofrece 6 colores con estado: normal, hot, informativo, peligro, advertencia y éxito. Estas son las clases CSS que podemos usar para aplicar estos estados a nuestros propios controles de interfaz de usuario.

Para conocer más sobre el Tema Universal les dejo una aplicación de referencia:

https://apex.oracle.com/pls/apex/f?p=42:6000:::NO:::

Gracias a los esquemas de colores predefinidos del Tema Universal podemos hacer eso de ellos en nuestos componentes personalizados.