palettes

variable brushes-regular public view code open_in_new

A list of color values to be used as brushes in charts.

$brushes-regular: (
    rgb(157 231 114),
    rgb(139 91 177),
    rgb(109 177 255),
    rgb(154 242 228),
    rgb(238 88 121),
    rgb(115 86 86),
    rgb(247 210 98),
    rgb(168 168 183),
    rgb(224 81 169),
    rgb(248 161 95)
);

A list of color values to be used as color-blind brushes in charts.

$brushes-color-blind: (
    rgb(86 180 233),
    rgb(0 158 115),
    rgb(240 228 68),
    rgb(213 94 0),
    rgb(214 0 254),
    rgb(0 73 159),
    rgb(230 159 0),
    rgb(0 0 0),
    rgb(132 240 223),
    rgb(115 86 86)
);

variable IGrayShades public view code open_in_new

A list consisting of all generated gray shades

$IGrayShades: ('50', '100', '200', '300', '400', '500', '600', '700', '800', '900');

variable IColorShades public view code open_in_new

A list consisting of all generated shades for palette colors

$IColorShades: list.join($IGrayShades, ('A100', 'A200', 'A400', 'A700'));

Requires

variables IGrayShades

variable IPaletteColors public view code open_in_new

All palette colors mapped with corresponding color shades

$IPaletteColors: (
    'primary': $IColorShades,
    'secondary': $IColorShades,
    'gray': $IGrayShades,
    'surface': $IColorShades,
    'info': $IColorShades,
    'success': $IColorShades,
    'warn': $IColorShades,
    'error': $IColorShades,
);

Requires

variable dark-bootstrap-palette public view code open_in_new

Generates the light material palette.

$palette: palette(
    $primary: #0d6efd,
    $secondary: #6c757d,
    $gray: #adb5bd,
    $surface: #212529,
    $info: #0dcaf0,
    $success: #198754,
    $warn: #ffc107,
    $error: #dc3545,
    $variant: 'bootstrap',
);

variable dark-green-palette public view code open_in_new

Generates the light green palette.

$green-palette: palette(
    $primary: #09f,
    $secondary: #72da67,
    $surface: #222,
    $info: #1377d5,
    $success: #4eb862,
    $warn: #fbb13c,
    $error: #ff134a,
);

variable dark-purple-palette public view code open_in_new

Generates the light purple palette.

$purple-palette: palette(
    $primary: #00b4d6,
    $secondary: #514590,
    $surface: #333,
    $info: #1377d5,
    $success: #4eb862,
    $warn: #fbb13c,
    $error: #ff134a,
);

variable dark-fluent-palette public view code open_in_new

Generates the light material palette.

$palette: palette(
    $primary: #0078d4,
    $secondary: #2b88d8,
    $surface: #1b1b1b,
    $info: #1377d5,
    $success: #107c10,
    $warn: #797673,
    $error: #a80000,
    $variant: 'fluent',
);

variable dark-fluent-word-palette public view code open_in_new

Generates the light fluent word palette.

$word-palette: palette(
    $primary: #2b579a,
    $secondary: #2b579a,
    $surface: #1b1b1b,
    $info: #1377d5,
    $success: #107c10,
    $warn: #797673,
    $error: #a80000,
    $variant: 'fluent',
);

variable dark-fluent-excel-palette public view code open_in_new

Generates the dark green palette.

$excel-palette: palette(
    $primary: #217346,
    $secondary: #217346,
    $surface: #1b1b1b,
    $info: #1377d5,
    $success: #107c10,
    $warn: #797673,
    $error: #a80000,
    $variant: 'fluent',
);

variable dark-indigo-palette public view code open_in_new

Generates the light material palette.

$palette: (
    'primary': (
        '50': #c5cdff,
        '50-contrast': black,
        '100': #a3aff6,
        '100-contrast': black,
        '200': #8293f8,
        '200-contrast': black,
        '300': #7385f4,
        '300-contrast': black,
        '400': #5468d9,
        '400-contrast': black,
        '500': #3f51b5,
        '500-contrast': white,
        '600': #39479c,
        '600-contrast': white,
        '700': #333d83,
        '700-contrast': white,
        '800': #2e3172,
        '800-contrast': white,
        '900': #262851,
        '900-contrast': white,
        'A100': #39479c,
        'A100-contrast': white,
        'A200': #333d83,
        'A200-contrast': white,
        'A400': #2e3172,
        'A400-contrast': white,
        'A700': #262851,
        'A700-contrast': white,
    ),
    'secondary': (
        '50': #c5cdff,
        '50-contrast': black,
        '100': #a3aff6,
        '100-contrast': black,
        '200': #8293f8,
        '200-contrast': black,
        '300': #7385f4,
        '300-contrast': black,
        '400': #5468d9,
        '400-contrast': black,
        '500': #3f51b5,
        '500-contrast': white,
        '600': #39479c,
        '600-contrast': white,
        '700': #333d83,
        '700-contrast': white,
        '800': #2e3172,
        '800-contrast': white,
        '900': #262851,
        '900-contrast': white,
        'A100': #39479c,
        'A100-contrast': white,
        'A200': #333d83,
        'A200-contrast': white,
        'A400': #2e3172,
        'A400-contrast': white,
        'A700': #262851,
        'A700-contrast': white,
    ),
    'gray': (
        '50': #24252c,
        '50-contrast': white,
        '100': #3b3d47,
        '100-contrast': white,
        '200': #545762,
        '200-contrast': white,
        '300': #6c707a,
        '300-contrast': white,
        '400': #9a9da2,
        '400-contrast': black,
        '500': #c3c4c7,
        '500-contrast': black,
        '600': #d6d8dc,
        '600-contrast': black,
        '700': #ebedf2,
        '700-contrast': black,
        '800': #f8f8fa,
        '800-contrast': black,
        '900': #fcfcfd,
        '900-contrast': black,
    ),
    'info': (
        '50': #f1c3ff,
        '50-contrast': black,
        '100': #e89eff,
        '100-contrast': black,
        '200': #dd71ff,
        '200-contrast': black,
        '300': #da64ff,
        '300-contrast': black,
        '400': #bc34d3,
        '400-contrast': white,
        '500': #9c27b0,
        '500-contrast': white,
        '600': #8c16a0,
        '600-contrast': white,
        '700': #7f1192,
        '700-contrast': white,
        '800': #6f0a80,
        '800-contrast': white,
        '900': #5c056b,
        '900-contrast': white,
        'A100': #8c16a0,
        'A100-contrast': white,
        'A200': #7f1192,
        'A200-contrast': white,
        'A400': #6f0a80,
        'A400-contrast': white,
        'A700': #5c056b,
        'A700-contrast': white,
    ),
    'success': (
        '50': #edf3e7,
        '50-contrast': black,
        '100': #d2e2c3,
        '100-contrast': black,
        '200': #b4cf9c,
        '200-contrast': black,
        '300': #95bc74,
        '300-contrast': black,
        '400': #7fad56,
        '400-contrast': black,
        '500': #689f38,
        '500-contrast': black,
        '600': #5a912a,
        '600-contrast': black,
        '700': #4e8222,
        '700-contrast': white,
        '800': #3d7012,
        '800-contrast': white,
        '900': #316109,
        '900-contrast': white,
        'A100': #5a912a,
        'A100-contrast': black,
        'A200': #4e8222,
        'A200-contrast': white,
        'A400': #3d7012,
        'A400-contrast': white,
        'A700': #316109,
        'A700-contrast': white,
    ),
    'warn': (
        '50': #fed7b7,
        '50-contrast': black,
        '100': #ffc696,
        '100-contrast': black,
        '200': #ffad67,
        '200-contrast': black,
        '300': #fb8f32,
        '300-contrast': black,
        '400': #fa7b0e,
        '400-contrast': black,
        '500': #f56b1d,
        '500-contrast': black,
        '600': #f05a2b,
        '600-contrast': black,
        '700': #ec4820,
        '700-contrast': black,
        '800': #df370e,
        '800-contrast': black,
        '900': #d22900,
        '900-contrast': white,
        'A100': #f05a2b,
        'A100-contrast': black,
        'A200': #ec4820,
        'A200-contrast': black,
        'A400': #df370e,
        'A400-contrast': black,
        'A700': #d22900,
        'A700-contrast': white,
    ),
    'error': (
        '50': #ffebf0,
        '50-contrast': black,
        '100': #ffb0b7,
        '100-contrast': black,
        '200': #fc7f8a,
        '200-contrast': black,
        '300': #ec5461,
        '300-contrast': black,
        '400': #dd3544,
        '400-contrast': black,
        '500': #cf1a2b,
        '500-contrast': white,
        '600': #c31223,
        '600-contrast': white,
        '700': #b90415,
        '700-contrast': white,
        '800': #ae0111,
        '800-contrast': white,
        '900': #9f000f,
        '900-contrast': white,
        'A100': #c31223,
        'A100-contrast': white,
        'A200': #b90415,
        'A200-contrast': white,
        'A400': #ae0111,
        'A400-contrast': white,
        'A700': #9f000f,
        'A700-contrast': white,
    ),
    'surface': $surface-shades,
    _meta: (
        variant: 'indigo',
    ),
);

variable dark-material-palette public view code open_in_new

Generates the light material palette.

$palette: palette(
    $primary: #09f,
    $secondary: #df1b74,
    $surface: #222,
    $info: #1377d5,
    $success: #4eb862,
    $warn: #faa419,
    $error: #ff134a,
    $variant: 'material',
);

variable light-bootstrap-palette public view code open_in_new

Generates the light material palette.

$palette: palette(
    $primary: #0d6efd,
    $secondary: #6c757d,
    $gray: #adb5bd,
    $surface: #f8f9fa,
    $info: #0dcaf0,
    $success: #198754,
    $warn: #ffc107,
    $error: #dc3545,
    $variant: 'bootstrap',
);

variable light-green-palette public view code open_in_new

Generates the light green palette.

$green-palette: palette(
    $primary: #09f,
    $secondary: #72da67,
    $surface: #fff,
    $info: #1377d5,
    $success: #4eb862,
    $warn: #fbb13c,
    $error: #ff134a,
);

variable light-purple-palette public view code open_in_new

Generates the light purple palette.

$purple-palette: palette(
    $primary: #00b4d6,
    $secondary: #514590,
    $surface: #fff,
    $info: #1377d5,
    $success: #4eb862,
    $warn: #fbb13c,
    $error: #ff134a,
);

variable light-fluent-palette public view code open_in_new

Generates the light material palette.

$palette: palette(
    $primary: #0078d4,
    $secondary: #2b88d8,
    $surface: #fff,
    $info: #1377d5,
    $success: #107c10,
    $warn: #797673,
    $error: #a80000,
    $variant: 'fluent',
);

variable light-fluent-word-palette public view code open_in_new

Generates the light fluent word palette.

$word-palette: palette(
    $primary: #2b579a,
    $secondary: #2b579a,
    $surface: #fff,
    $info: #1377d5,
    $success: #107c10,
    $warn: #797673,
    $error: #a80000,
    $variant: 'fluent',
);

variable light-fluent-excel-palette public view code open_in_new

Generates the dark green palette.

$excel-palette: palette(
    $primary: #217346,
    $secondary: #217346,
    $surface: #fff,
    $info: #1377d5,
    $success: #107c10,
    $warn: #797673,
    $error: #a80000,
    $variant: 'fluent',
);

variable light-indigo-palette public view code open_in_new

Generates the light material palette.

$palette: (
    'primary': (
        '50': #c5cdff,
        '50-contrast': black,
        '100': #a3aff6,
        '100-contrast': black,
        '200': #8293f8,
        '200-contrast': black,
        '300': #7385f4,
        '300-contrast': black,
        '400': #5468d9,
        '400-contrast': black,
        '500': #3f51b5,
        '500-contrast': white,
        '600': #39479c,
        '600-contrast': white,
        '700': #333d83,
        '700-contrast': white,
        '800': #2e3172,
        '800-contrast': white,
        '900': #262851,
        '900-contrast': white,
        'A100': #39479c,
        'A100-contrast': white,
        'A200': #333d83,
        'A200-contrast': white,
        'A400': #2e3172,
        'A400-contrast': white,
        'A700': #262851,
        'A700-contrast': white,
    ),
    'secondary': (
        '50': #c5cdff,
        '50-contrast': black,
        '100': #a3aff6,
        '100-contrast': black,
        '200': #8293f8,
        '200-contrast': black,
        '300': #7385f4,
        '300-contrast': black,
        '400': #5468d9,
        '400-contrast': black,
        '500': #3f51b5,
        '500-contrast': white,
        '600': #39479c,
        '600-contrast': white,
        '700': #333d83,
        '700-contrast': white,
        '800': #2e3172,
        '800-contrast': white,
        '900': #262851,
        '900-contrast': white,
        'A100': #39479c,
        'A100-contrast': white,
        'A200': #333d83,
        'A200-contrast': white,
        'A400': #2e3172,
        'A400-contrast': white,
        'A700': #262851,
        'A700-contrast': white,
    ),
    'gray': (
        '50': #fcfcfd,
        '50-contrast': black,
        '100': #f8f8fa,
        '100-contrast': black,
        '200': #ebedf2,
        '200-contrast': black,
        '300': #d6d8dc,
        '300-contrast': black,
        '400': #c3c4c7,
        '400-contrast': black,
        '500': #9a9da2,
        '500-contrast': black,
        '600': #6c707a,
        '600-contrast': white,
        '700': #545762,
        '700-contrast': white,
        '800': #3b3d47,
        '800-contrast': white,
        '900': #24252c,
        '900-contrast': white,
    ),
    'info': (
        '50': #f1c3ff,
        '50-contrast': black,
        '100': #e89eff,
        '100-contrast': black,
        '200': #dd71ff,
        '200-contrast': black,
        '300': #da64ff,
        '300-contrast': black,
        '400': #bc34d3,
        '400-contrast': white,
        '500': #9c27b0,
        '500-contrast': white,
        '600': #8c16a0,
        '600-contrast': white,
        '700': #7f1192,
        '700-contrast': white,
        '800': #6f0a80,
        '800-contrast': white,
        '900': #5c056b,
        '900-contrast': white,
        'A100': #8c16a0,
        'A100-contrast': white,
        'A200': #7f1192,
        'A200-contrast': white,
        'A400': #6f0a80,
        'A400-contrast': white,
        'A700': #5c056b,
        'A700-contrast': white,
    ),
    'success': (
        '50': #edf3e7,
        '50-contrast': black,
        '100': #d2e2c3,
        '100-contrast': black,
        '200': #b4cf9c,
        '200-contrast': black,
        '300': #95bc74,
        '300-contrast': black,
        '400': #7fad56,
        '400-contrast': black,
        '500': #689f38,
        '500-contrast': black,
        '600': #5a912a,
        '600-contrast': black,
        '700': #4e8222,
        '700-contrast': white,
        '800': #3d7012,
        '800-contrast': white,
        '900': #316109,
        '900-contrast': white,
        'A100': #5a912a,
        'A100-contrast': black,
        'A200': #4e8222,
        'A200-contrast': white,
        'A400': #3d7012,
        'A400-contrast': white,
        'A700': #316109,
        'A700-contrast': white,
    ),
    'warn': (
        '50': #fed7b7,
        '50-contrast': black,
        '100': #ffc696,
        '100-contrast': black,
        '200': #ffad67,
        '200-contrast': black,
        '300': #fb8f32,
        '300-contrast': black,
        '400': #fa7b0e,
        '400-contrast': black,
        '500': #f56b1d,
        '500-contrast': black,
        '600': #f05a2b,
        '600-contrast': black,
        '700': #ec4820,
        '700-contrast': black,
        '800': #df370e,
        '800-contrast': black,
        '900': #d22900,
        '900-contrast': white,
        'A100': #f05a2b,
        'A100-contrast': black,
        'A200': #ec4820,
        'A200-contrast': black,
        'A400': #df370e,
        'A400-contrast': black,
        'A700': #d22900,
        'A700-contrast': white,
    ),
    'error': (
        '50': #ffebf0,
        '50-contrast': black,
        '100': #ffb0b7,
        '100-contrast': black,
        '200': #fc7f8a,
        '200-contrast': black,
        '300': #ec5461,
        '300-contrast': black,
        '400': #dd3544,
        '400-contrast': black,
        '500': #cf1a2b,
        '500-contrast': white,
        '600': #c31223,
        '600-contrast': white,
        '700': #b90415,
        '700-contrast': white,
        '800': #ae0111,
        '800-contrast': white,
        '900': #9f000f,
        '900-contrast': white,
        'A100': #c31223,
        'A100-contrast': white,
        'A200': #b90415,
        'A200-contrast': white,
        'A400': #ae0111,
        'A400-contrast': white,
        'A700': #9f000f,
        'A700-contrast': white,
    ),
    'surface': $surface-shades,
    _meta: (
        variant: 'indigo',
    ),
);

variable light-material-palette public view code open_in_new

Generates the light material palette.

$palette: palette(
    $primary: #09f,
    $secondary: #df1b74,
    $surface: white,
    $info: #1377d5,
    $success: #4eb862,
    $warn: #faa419,
    $error: #ff134a,
    $variant: 'material',
);

variable light-palette public view code open_in_new

Same as $light-material-palette.

$light-palette: palettes.$light-material-palette;

variable dark-palette public view code open_in_new

Same as $dark-material-palette but with modified gray and surface colors.

$dark-palette: palettes.$dark-material-palette;

function palette public view code open_in_new

Generates a color palette.

Example

// Pass the required colors
$my-palette: palette(
  $primary: rebeccapurple,
  $secondary: orange,
  $surface: white,
);

// Include the generated palette colors as CSS variables.
@include palette($my-palette);

Parameters

Name	Type	Default	Description
$primary *	Color	-	The primary color used to generate the primary color palette.
$secondary *	Color	-	The secondary color used to generate the secondary color palette.
$surface *	Color	-	The color used as a background in components.
$gray	Color	null	The color used for generating the grayscale palette.
$info	Color	#1377d5	The information color used throughout the application.
$success	Color	#4eb862	The success color used throughout the application.
$warn	Color	#faa419	The warning color used throughout the application.
$error	Color	#ff134a	The error color used throughout the application.
$variant	String	null	Used internally.

Requires

function shades

function shades public view code open_in_new

Generates color shades for a given color.

Example

$color-name: 'accent';

// Include the generated palette colors as CSS variables.
@include palette(
  (
    #{$color-name}: shades($color-name, #a57865, $IColorShades),
  )
);

Parameters

Name	Type	Default	Description
$name *	String	-	The name of the color.
$color *	Color	-	The base color used to generate the shades.
$shades *	List	-	The list of shade variants.
$surface	Color	null	The surface color. Useful if generating shades of gray.

Requires

function adaptive-contrast

See

variables IColorShades

function color public view code open_in_new

Retrieves a color from a color palette.

Example

Getting a color from the palette

// Without providing a palette
.my-component-1 {
   background: color($color: primary, $variant: 200); // var(--ig-primary-200)
 }

 // With a specific palette
.my-component-2 {
   background: color($my-palette, primary, 200); // #88c0e5
 }

Example

Getting a color with opacity

.my-component-1 {
   background: color($color: primary, $variant: 200, $opacity: 0.5); // hsl(from var(--ig-primary-200) h s l/0.5)
 }

 // With a specific palette
.my-component-2 {
   background: color($my-palette, primary, 200, $opacity: 0.5); // rgba(136, 192, 229, 0.5)
 }

Parameters

Name	Type	Default	Description
$palette	Map	null	The source palette map.
$color	String	primary	The target color from the color palette.
$variant	Number \| String	500	The target color shade from the color palette.
$opacity	Number	null	Optional opacity to apply to the color shade.

function contrast-color public view code open_in_new

Retrieves a contrast color for a given color variant from a color palette. Works similarly to the color function.

Example

without passing a palette

.my-component {
   background: color($color: 'primary', $variant: 200);
   color: contrast-color($color: 'primary', $variant: 200);
 }

Parameters

Name	Type	Default	Description
$palette	Map	null	The source palette map.
$color	String	primary	The target color from the color palette.
$variant	Number \| String	500	The target color shade from the color palette.
$opacity	Number	null	Optional opacity to apply to the color shade.

Requires

function color

function chart-brushes public view code open_in_new

Returns a list of colors to be used as chart brushes. The return value depends on the value of enhanced-accessibility.

See

mixin palette public view code open_in_new

Generates CSS variables for a given palette.

Example

Generate css variables for a palette

$palette: palette($primary: red, $secondary: blue, $gray: #000);
@include palette($palette);

Parameters

Name	Type	Default	Description
$palette *	Map	-	The palette used to generate CSS variables.
$contrast	Boolean	true	Specify if contrast colors should be included.

Ignite UI for Angular

palettes

Requires

Requires

Parameters

Requires

Parameters

Requires

See

Parameters

Parameters

Requires

See

Parameters

Requires