@cortado-holding/colors

Colors

Usage

Run npm i @cortado-holding/colors in your project directory.

Use and optionally configure the Sass module:

@use '@cortado-holding/colors' with (
  $namespace: 'acme',
  $selector: 'body',
  $useDarkMode: false,
  $useDisplayP3: false
);

Use the predefined core colors module:

@use '@cortado-holding/colors/accents';
@use '@cortado-holding/colors/brands';
@use '@cortado-holding/colors/core';
@use '@cortado-holding/colors/gradients';

Use the built-in mixins

Declare your own color palette, optionally with a group name:

$myPalette: (
  'light': (
    'brand': rgb(242 59 34),
  ),
  'dark': (
    'brand': rgb(222 35 19),
  ),
);

:root {
  @include colors.palette($myPalette, 'my-group');
}

Declare multiple colors manually:

@use 'accents' with (
  $useDeclaration: false
);

.light {
  @include colors.colors(map.get(accents.$palette, 'light'), 'accent');
}

.light {
  @include colors.colors(map.get(accents.$palette, 'dark'), 'accent');
}

Declare a single color manually:

:root {
  // RGB color
  @include colors.color('custom-color', rgb(242 59 34));

  // Display P3 color
  @include colors.color('custom-color', rgb(242 59 34), true);
}

Angular Material 2

To tailor a color palette for Angular Material themes, we provide two functions: define-theme (for Angular Material 17 or earlier) and define-theme-v18 (for Angular Material 18 or later). These functions streamline the theme creation process for Angular Material in Cortado projects.

Usage Overview

Both functions require the following parameters:

• Primary color and primary hue
• Accent color and accent hue
• Mode (either light or dark)

The colors should align with Cortado's palette, allowing the following values: pink, red, orange, bright-orange, yellow, green, teal, cyan, blue, dark-blue, violet, deep-violet.

The hue parameter accepts values: 50, 100, 200, up to 900.

Example of use

After ensuring Angular Material is installed, import the required modules:

@use "@angular/material" as mat;
@use "@cortado-holding/colors/angular-material" as angular-material;

Angular Material 17 or Earlier

For Angular Material 17 or earlier, use the define-theme function:

$my-light-theme: angular-material.define-theme(green, 800, blue, 500, light);
$my-dark-theme: angular-material.define-theme(green, 800, blue, 500, dark);

Angular Material 18 or Later

For Angular Material 18 or later, use the define-theme-v18 function:

$my-light-theme: angular-material.define-theme-v18(green, 800, blue, 500, light);
$my-dark-theme: angular-material.define-theme-v18(green, 800, blue, 500, dark);

Applying the Theme

To apply the generated themes:

// Apply the light theme.
@media (prefers-color-scheme: light) {
  @include mat.all-component-themes($my-light-theme);
}

// Apply the dark theme.
@media (prefers-color-scheme: dark) {
  @include mat.all-component-themes($my-dark-theme);
}

This approach provides a consistent experience across Angular Material versions, ensuring compatibility with the chosen library version.