npm package: @iodp/material-color-constants
Description: A common SASS style sheet which generates a light and dark theme and allows access to the associated color values. For use in IODP applications
Author: menzelr
Latest version: 1.0.12

This package contains a shared style sheet which can be used by IODP applications to create a light and dark theme and access associated colors.   

To include this style sheet in your application without the use of the @iodp/geodesc-theme pacakge, you must include it in the styles section of the project's angular.json file like so:  

"projects": {  
&nbsp;&nbsp;&nbsp;&nbsp;...  
&nbsp;&nbsp;&nbsp;&nbsp;"architect": {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"build": {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"styles": [  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"src/styles.scss",  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"node_modules/@iodp/material-color-constants/color-constants.scss"  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;],  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...  
&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;...  
}  

You must also include an app-specific color palette file located at src/app-palette.scss. The contents of this file should look like the following:  

@import '~@angular/material/theming';  

$mat-primary-palette: $mat-green;  

The $mat-green value should be changed to the appropriate pre-defined Angular Matrial palette value (for a list, see https://material.io/design/color/the-color-system.html#tools-for-picking-colors). Alternatively, you can define a custom palette like so:  

$mat-primary-palette: (  
&nbsp;&nbsp;&nbsp;&nbsp;50 : #E4EEE9,  
&nbsp;&nbsp;&nbsp;&nbsp;100 : #BCD5C8,  
&nbsp;&nbsp;&nbsp;&nbsp;200 : #90B9A3,  
&nbsp;&nbsp;&nbsp;&nbsp;300 : #649D7E,  
&nbsp;&nbsp;&nbsp;&nbsp;400 : #428862,  
&nbsp;&nbsp;&nbsp;&nbsp;500 : #217346,  
&nbsp;&nbsp;&nbsp;&nbsp;600 : #1D6B3F,  
&nbsp;&nbsp;&nbsp;&nbsp;700 : #186037,  
&nbsp;&nbsp;&nbsp;&nbsp;800 : #14562F,  
&nbsp;&nbsp;&nbsp;&nbsp;900 : #0B4320,  
&nbsp;&nbsp;&nbsp;&nbsp;A100 : #7BFFA5,  
&nbsp;&nbsp;&nbsp;&nbsp;A200 : #48FF83,  
&nbsp;&nbsp;&nbsp;&nbsp;A400 : #15FF60,  
&nbsp;&nbsp;&nbsp;&nbsp;A700 : #00FB50,  
&nbsp;&nbsp;&nbsp;&nbsp;contrast: (  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;50 : #000000,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;100 : #000000,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;200 : #000000,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;300 : #000000,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;400 : #ffffff,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;500 : #ffffff,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;600 : #ffffff,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;700 : #ffffff,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;800 : #ffffff,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;900 : #ffffff,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;A100 : #000000,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;A200 : #000000,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;A400 : #000000,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;A700 : #000000,  
&nbsp;&nbsp;&nbsp;&nbsp;)  
);

To access values from this style sheet at the component level, include the following above all other lines in the component-level style sheet:

@use '~@iodp/material-color-constants/color-constants' as *;

Importing this package will allow access to the following sass variables:  

$mat-warn-palette: $mat-red;  
 
$primary-color: mat-palette($mat-primary-palette, 500);  
$accent-color: mat-palette($mat-primary-palette, A400);  
$warn-color: mat-palette($mat-warn-palette, 500);  
 
$light-theme: mat-light-theme($primary-color, $accent-color, $warn-color);  
$dark-theme:  mat-dark-theme($primary-color, $accent-color, $warn-color);  
 
// COLOR CONSTANTS  
$primary50:  mat-color($mat-primary-palette, 50);  
$primary100: mat-color($mat-primary-palette, 100);  
$primary200: mat-color($mat-primary-palette, 200);  
$primary300: mat-color($mat-primary-palette, 300);  
$primary400: mat-color($mat-primary-palette, 400);  
$primary500: mat-color($mat-primary-palette, 500);  
$primary600: mat-color($mat-primary-palette, 600);  
$primary700: mat-color($mat-primary-palette, 700);  
$primary800: mat-color($mat-primary-palette, 800);  
$primary900: mat-color($mat-primary-palette, 900);  
$accent100:  mat-color($mat-primary-palette, A100);  
$accent200:  mat-color($mat-primary-palette, A200);  
$accent400:  mat-color($mat-primary-palette, A400);  
$accent700:  mat-color($mat-primary-palette, A700);  
$warn50:     mat-color($mat-warn-palette, 50);  
$warn100:    mat-color($mat-warn-palette, 100);  
$warn200:    mat-color($mat-warn-palette, 200);  
$warn300:    mat-color($mat-warn-palette, 300);  
$warn400:    mat-color($mat-warn-palette, 400);  
$warn500:    mat-color($mat-warn-palette, 500);  
$warn600:    mat-color($mat-warn-palette, 600);  
$warn700:    mat-color($mat-warn-palette, 700);  
$warn800:    mat-color($mat-warn-palette, 800);  
$warn900:    mat-color($mat-warn-palette, 900);  

// CONTRAST CONSTANTS (for fonts, etc.)  
$primary50contrast:  mat-contrast($mat-primary-palette, 50);  
$primary100contrast: mat-contrast($mat-primary-palette, 100);  
$primary200contrast: mat-contrast($mat-primary-palette, 200);  
$primary300contrast: mat-contrast($mat-primary-palette, 300);  
$primary400contrast: mat-contrast($mat-primary-palette, 400);  
$primary500contrast: mat-contrast($mat-primary-palette, 500);  
$primary600contrast: mat-contrast($mat-primary-palette, 600);  
$primary700contrast: mat-contrast($mat-primary-palette, 700);  
$primary800contrast: mat-contrast($mat-primary-palette, 800);  
$primary900contrast: mat-contrast($mat-primary-palette, 900);  
$accent100contrast:  mat-contrast($mat-primary-palette, A100);  
$accent200contrast:  mat-contrast($mat-primary-palette, A200);  
$accent400contrast:  mat-contrast($mat-primary-palette, A400);  
$accent700contrast:  mat-contrast($mat-primary-palette, A700);  
$warn50contrast:     mat-contrast($mat-warn-palette, 50);  
$warn100contrast:    mat-contrast($mat-warn-palette, 100);  
$warn200contrast:    mat-contrast($mat-warn-palette, 200);  
$warn300contrast:    mat-contrast($mat-warn-palette, 300);  
$warn400contrast:    mat-contrast($mat-warn-palette, 400);  
$warn500contrast:    mat-contrast($mat-warn-palette, 500);  
$warn600contrast:    mat-contrast($mat-warn-palette, 600);  
$warn700contrast:    mat-contrast($mat-warn-palette, 700);  
$warn800contrast:    mat-contrast($mat-warn-palette, 800);  
$warn900contrast:    mat-contrast($mat-warn-palette, 900);  

// Material theme constants
$page-grey-light: #fafafa;
$page-grey-dark: #303030;
$section-grey-light: #fafafa;
$section-grey-dark: #303030;
$card-grey-light: #ffffff;
$card-grey-dark: #424242;
$sidenav-grey: #413F3D;
$light-grey: lightgrey;
$grey: grey;
$dark-grey: dimgrey;