Skip to content

Colors (Draft)

Jump to bottom
Dilyana Yarabanova edited this page Aug 10, 2022 · 7 revisions

Color Functions

Palette function

The palette function generates a color palette using the shades function. It accepts eight color parameters for each color in the palette - primary, secondary, surface, gray, info, success, warn, and error, from which only the primary, secondary and surface colors are required to pass as arguments. The last argument stands for the variant of the theme. The function returns a map consisting of color shades for the passed base colors(primary, secondary, gray, etc) from 50 to 900 and 4 accent colors - A100, A200, A400, and A700, generated by the shades function. The gray palette map doesn't contain accent colors.

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

@include palette($my-palette);

Shades function

The shades function generates a palette from a base color. It's used in the palette function to generate all the different shades and accent colors. By passing it the name of the output color palette, the base color, and the list of shades you want to generate, it creates for you a palette with various and cohesive monochromatic colors that you can use. Optionally, you can pass in a surface color as an argument, which can be useful when generating shades of gray.

Shade function

The shade function generates a color shade for a given base color. It's used to create all the color shades in the shades function . It returns a map, containing a list of HSL values and a raw color value.

Color function

The color function retrieves a color from a color palette by passing the source palette map (optional), color name, variant, and opacity (optional) as arguments. It returns the raw color shade or CSS variable reference from the palette.

.my-btn {
    background: color(primary, 200)
}

Contrast-color function

The contrast-color function retrieves a contrast text color from a color palette by passing the source palette map(optional), color name, and variant as arguments. It returns the raw color shade or CSS variable reference from the palette.

.my-btn {
    color: contrast-color(primary, 200)
}

Text-contrast function

The text-contrast function returns a contrast color for a passed color, which can be either black or white or the provided foreground color if it meets the required contrast level. The function accepts three arguments - background, foreground, and contrast(A, AA, or AAA), where the background color is used to return a contrast/foreground color for.

$background: #fff;
$contrast-text: text-contrast($background); // #000

To-opaque function

The to-opaque function mixes two colors to produce an opaque color. It accepts two colors, where usually the first one is transparent and the second one is opaque(white by default) and returns the color representation of the rgba value.

To-hsl function

The to-hsl function returns a comma-separated list of hue, saturation, and lightness values for a given color.

$hsl-list: to-hsl(#000); // (0deg, 0%, 0%)

Contrast function

The contrast function calculates the contrast ratio between two colors - background and foreground. See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests

Luminance function

The luminance function calculates the luminance for a given color. See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests.

Color Mixins

Palette mixin

The palette mixin generates CSS variables for a given palette. It accepts two arguments - the palette and weather contrast colors should be included or not(they're included by default). It basically generates hue, saturation, lightness, and alpha variables for each color and then creates the variants by multiplying these variables by certain values, which you can find in the multipliers.scss file.

//Example for #0D6DFD as primary color

--ig-primary-h: 216deg;
--ig-primary-s: 98%;
--ig-primary-l: 52%;
--ig-primary-a: 1;
...
--ig-primary-400: var(--ig-primary-h), calc(var(--ig-primary-s) * .875), calc(var(--ig-primary-l) * 1.08);
--ig-primary-400-contrast: black;
--ig-primary-500: var(--ig-primary-h), var(--ig-primary-s), var(--ig-primary-l);
--ig-primary-500-contrast: black;
--ig-primary-600: var(--ig-primary-h), calc(var(--ig-primary-s) * 1.26), calc(var(--ig-primary-l) * .89);
--ig-primary-600-contrast: white;
...

Color Types

IGrayShades

IGrayShades is a map that contains all the shades, generated for the gray color in a palette - 50, 100, 200, 300, 400, 500, 600, 700, 800, and 900. There are no accent shades generated for the gray color.

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

IColorShades

IColorShades is a map, consisting of all the shades of the gray that we enumerated above and additional accent shades - A100, A200, A400, and A700.

$IColorShades: map.merge(
    $IGrayShades,
    (
        'A100': '',
        'A200': '',
        'A400': '',
        'A700': '',
    )
);

IPaletteColors

IPaletteColors is a map where all palette colors are mapped with their corresponding color shades.

$IPaletteColors: (
    primary: $IColorShades,
    secondary: $IColorShades,
    gray: $IGrayShades,
    surface: $IColorShades,
    info: $IColorShades,
    success: $IColorShades,
    warn: $IColorShades,
    error: $IColorShades,
);
Clone this wiki locally