RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/palettes below:

Ignite UI Sass Documentation

palettes # 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)
);

# view code open_in_new

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

# view code open_in_new

A list consisting of all generated gray shades

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

# view code open_in_new

A list consisting of all generated shades for palette colors

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

# 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,
);

# 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',
);

# 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,
);

# 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,
);

# 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',
);

# 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',
);

# 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',
);

# 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',
    ),
);

# 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',
);

# 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',
);

# 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,
);

# 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,
);

# 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',
);

# 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',
);

# 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',
);

# 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',
    ),
);

# 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',
);

# view code open_in_new

Same as $light-material-palette.

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

# view code open_in_new

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

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

# 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. # 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. # 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. # 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. # 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.

# 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.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4