@torq-design/colors NPM

Colors

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

Install the colors component in your project using npm.

npm i @torq-design/colors

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.

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`

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 are the same for both dark and light UI.

5 years ago

5 years ago