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": {
    ...
    "architect": {
        "build": {
            ...
            "styles": [
                "src/styles.scss",
                "node_modules/@iodp/material-color-constants/color-constants.scss"
            ],
            ...
        }
        ...
    }
    ...
}

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: (
    50 : #E4EEE9,
    100 : #BCD5C8,
    200 : #90B9A3,
    300 : #649D7E,
    400 : #428862,
    500 : #217346,
    600 : #1D6B3F,
    700 : #186037,
    800 : #14562F,
    900 : #0B4320,
    A100 : #7BFFA5,
    A200 : #48FF83,
    A400 : #15FF60,
    A700 : #00FB50,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #ffffff,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);

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;