Toad World Blog

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

May 23, 2017 5:33:47 PM by Clarisa Maman Orfali

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.

Status

Block

Text

Background

Border

Normal

u-normal

u-normal-text

u-normal-bg

u-normal-border

Hot

u-hot

u-hot-text

u-hot-bg

u-hot-border

Warning

u-warning

u-warning-text

u-warning-bg

u-warning-border

Danger

u-danger

u-danger-text

u-danger-bg

u-danger-border

Info

u-info

u-info-text

u-info-bg

u-info-border

Success

u-success

u-success-text

u-success-bg

u-success-border

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.

Tags: Oracle

Clarisa Maman Orfali

Written by Clarisa Maman Orfali

Clarisa is a System Engineer with more than 24 years of experience as a developer, teacher, and consultant in Information Technology. She was a Founder and CEO between 2013 to 2020 at ClarTech Solutions, Inc., a consulting firm specializing in Oracle APEX and Open Source technologies. Clarisa entered the world of Oracle technologies in 2009. After a few years, she discovered the power of application development with Oracle Application Express (APEX) and specialized in that area.

Clarisa is from Argentina, and she is living and working in Irvine, California, in the United States. She's also a Co-Founder of the Argentina Oracle User Group (AROUG). In addition, she had actively participated in large and popular events such as the OTN Tour Argentina and Oracle APEX Tour Latin America after called Oracle Developer Tour. She's also authored the first three Spanish books about Oracle Application Express and recorded and published several Online Video Courses.

She has a great passion for Oracle technologies and wants to expand that passion and influence, transferring her knowledge and experience to the entire Latin American and worldwide Oracle communities. You can always contact her through her Twitter account (@Clari707).

Clarisa loves spending time with her family by enjoying outdoor activities with her two adored children, Melanie and Nicolas, as well as hanging out with her friends. Also, she loves traveling with her husband Julio worldwide and to takes new challenges at every moment of her life.