@cortado-holding/colors v2.0.4

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

In contrast to Material for Web Components, the implementation of Angular Material necessitates a comprehensive color palette for the development of a tailored theme. Conversely, Material for Web Components mandates solely a primary and secondary color for its theme configuration. Consequently, we have devised a streamlined function designed to expedite and standardize the theme creation process for Angular Material, specifically tailored to the color specifications inherent in Cortado projects.

Synthesis

The designated function for invocation is named "define-theme". The requisite parameters for this function include the primary color, the specified hue for the primary color, the accent color, the desired hue for the accent, and a flag indicating whether the intended palette pertains to light mode or dark mode.

The function exclusively accepts predefined colors in alignment with the current color palette utilized in Cortado's ongoing projects. The permissible values encompass: pink, red, orange, bright-orange, yellow, green, teal, cyan, blue, dark-blue, violet or deep-violet.

Regarding the hue parameter, the allowable values are confined to those encompassed within the color palette, specifically: 50, 100, 200, ... 900.

Concerning the selection between Light mode and Dark mode, only these two parameters are admissible and imperative for the accurate operation of the function.

Example of use

It is presupposed that Angular Material has been previously installed. Initially, it is essential to import the module.

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

Subsequently, you can assign the output of this function to a variable by providing the desired values, as illustrated in the following example:

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

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

To apply the palettes generated by this function for defining your theme in Angular Material, simply follow these step:

// 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);
}