Colors

This package defines a set of SCSS variables for the Torq Design color pallete.

Setup

Installation

Install the colors component in your project using npm.

npm i @torq-design/colors

Import SCSS

Import the SCSS file into your base styling file.

@import "@torq-design/colors/torq-colors";

Make sure your project's SASS compiler is configured to look in the node_modules directory.

Light UI

| Variable | Uses | Value | | :--------------------------- | :---------------------------------- | :------- | | $torq-primary-color | Calls to action, items of importance | #508BE4 | | $torq-background-top | Start to dark background gradient | #F7F9FB | | $torq-background-bottom | End to dark background gradient | #D6DFEC | | $torq-background | Dark page background | linear-gradient(176.98deg, #F7F9FB 0%, #D6DFEC 100%) | | $torq-title-bar-background | Title bar background | #FFFFFF | | $torq-top-bar-background | Top bar background | #F7F7FB | | $torq-card-background | Card background | #FFFFFF | | $torq-outline | Outlines, table borders | #C7D4DD | | $torq-text-color | General purpose text | #2C404C | | $torq-header-text-color | Header text | #202028 | | $torq-subtext-color | Sub-text | #596578 | | $torq-chart-text-color | Chart text | #596578 |

Dark UI

| Variable | Uses | Value | | :--------------------------------- | :---------------------------------- | :------- | | $torq-primary-color | Calls to action, items of importance | #508BE4 | | $torq-dark-background-top | Start to dark background gradient | #1A2633 | | $torq-dark-background-bottom | End to dark background gradient | #101820 | | $torq-dark-background | Dark page background | linear-gradient(185.86deg, #1A2633 0%, #101820 100%) | | $torq-dark-title-bar-background | Title bar background | #151E26 | | $torq-dark-top-bar-background | Top bar background | #1D2E40 | | $torq-dark-card-background | Card background | #1D2E40 | | $torq-dark-outline | Outlines, table borders | #66757F | | $torq-dark-text-color | General purpose text | #FFFFFF | | $torq-dark-header-text-color | Header text | #FFFFFF | | $torq-dark-subtext-color | Sub-text | #A8B5BF | | $torq-dark-chart-text-color | Chart text | #A8B5BF |

Supporting Colors

Supporting colors are the same for both dark and light UI.

Status

| Variable | Value | | :--------------------------------- | :------- | | $torq-status-red | #F34336 | | $torq-status-orange | #FF8B3A | | $torq-status-yellow | #FEC600 | | $torq-status-green | #7FAE1B | | $torq-status-blue | #508BE4 |

Data Visualization

| Variable | Value | | :--------------------------------- | :--------- | | $torq-data-pink | #F97DD8 | | $torq-data-purple | #9150E4 | | $torq-data-cyan | #50CCE4 | | $torq-data-green | #61D883 | | $torq-data-yellow | #E4CB50 | | $torq-data-orange | #E4A350 |