Color
There are two different colors types for tui applications: 255 colors and 168 colors. These are the same colors used in MS-DOS applications, except the orange color thats was added just for this framework as a plus color. The framework provides many usefull classes to change the color style of the elements. Check the color structure class and the color table below.
These are the base color tables, and can be used for styling texts, borders, hovered effects, etc. Replace <color> markers for the other styles by some color of these tables below.
168 (A8) Colors:
| Class | Rgb | Hex |
|---|---|---|
.black-168 |
0, 0, 0 | #000000 |
.blue-168 |
0, 0, 168 | #0000A8 |
.green-168 |
0, 168, 0 | #00A800 |
.cyan-168 |
0, 168, 168 | #00A8A8 |
.red-168 |
168, 0, 0 | #A80000 |
.purple-168 |
168, 0, 168 | #A800A8 |
.yellow-168 |
168, 168, 0 | #A8A800 |
.white-168 |
168, 168, 168 | #A8A8A8 |
.orange-168 |
168, 86, 0 | #A85600 |
255 (FF) Colors:
| Class | Rgb | Hex |
|---|---|---|
.black-255 |
0, 0, 0 | #000000 |
.blue-255 |
0, 0, 255 | #0000FF |
.green-255 |
0, 255, 0 | #00FF00 |
.cyan-255 |
0, 255, 255 | #00FFFF |
.red-255 |
255, 0, 0 | #FF0000 |
.purple-255 |
255, 0, 255 | #FF00FF |
.yellow-255 |
255, 255, 0 | #FFFF00 |
.white-255 |
255, 255, 255 | #FFFFFF |
.orange-255 |
255, 168, 0 | #FFA800 |
This table shows the quick classes for black and white. It can be used for replace <color> marker too.
| Color | Rgb | Hex |
|---|---|---|
.black |
0, 0, 0 | #000000 |
.white |
255, 255, 255 | #FFFFFF |
The color classes can be used together with suffixes to change other styles.
| Class | Description |
|---|---|
<color> |
Changes the background color |
<color>-text |
Changes the foreground color |
<color>-border |
Changes the border color |
<color>-hover |
Changes the background hovered color |
<color>-text-hover |
Changes the foreground hovered color |
<color>-border-hover |
Changes the border hovered color |
There are theme classes in the framework to be used following a theme. The theme colors can be changed in the variables.scss file and the framework needs to be re-compiled. These classes can be used replacing the <code> marker too, for other styles.
Note: These colors are not used in any component, so, it is just used for theme style pattern.
| Class | Rgb | Hex |
|---|---|---|
.primary |
0, 0, 168 | #0000A8 |
.secondary |
168, 168, 168 | #A8A8A8 |
.success |
0, 168, 0 | #00A800 |
.danger |
168, 0, 0 | #A80000 |
.warning |
168, 168, 0 | #A8A800 |
.info |
0, 168, 168 | #00A8A8 |