1.2.0 • Published 3 years ago
trplanex v1.2.0
trplanex
My personal component library.
Colors and theming
These are the SASS variables you can modify to achieve your unique theming. The themes are stored in src/styles/themes/
.
Main colors
Mostly used for emphasizing visual elements.
// Primary color (buttons, links)
$primary: $purple-500;
$primary-light: $purple-400;
$primary-dark: $purple-600;
// Danger color
$danger: $red-500;
$danger-light: $red-400;
$danger-dark: $red-600;
Typography
Colors used for typography.
// The main text color
$text-color: $gray-200;
// Color used for emphasizin text (h1-h6, ...)
$emphasis-text-color: white;
// The colors of the navigation links in the unfocused state
$nav-link-color: $gray-400;
// Hover color of the navigation links
$nav-link-hover: white;
Background
Used for backgrounds of various elements.
// The color of the page
$main-bg-color: $gray-800;
// Dark variant of the background color
$main-bg-dark: lighten($main-bg-color, 2%);
// Used for contrasting emphasized elements on the background color
$main-bg-contrast: $gray-100;
// Color used for backgrounds of "raised" elements
$box-bg: $gray-600;