Theme

Theme is a collection of variables, functions and mixins all created to streamline colors across our apps.

Sass

// Include default styles without configuration
@forward '@miraidesigns/theme/styles';

// Configure appearance
@use '@miraidesigns/theme' with (
    $variable: value
);

@include theme.styles();

Implementation

All of our colors get saved as CSS3 variables. The styles() mixin takes care of that.
It creates a set of variables for each theme, a light and dark theme.
The $themes map holds the values for both themes. The map keys and CSS3 variables share the same names for ease of access.
I recommend loading this module early in your load order.

Variables

| Name | Default | Description | | ------------------- | --------- | -------------------------------------- | | $brand | blue | Primary brand color | | $complementary | orange | Complementary to the brand color | | $theme | light | Default page theme: light or dark | | $primary-light | #000 | Base text color for the light theme | | $background-light | #fff | Background color for the light theme | | $primary-dark | #fff | Base text color for the dark theme | | $background-dark | #212121 | Background color for the dark theme |

Color

The .color() function is used to lookup values from our $colors map.

a {
    color: theme.color('red'); // #f44336 by default
}

Alternatively, if all you want to access is your $brand or $complementary color, use the function with the same name.

a.logo {
    color: theme.brand(); // Brand color
}

a.links {
    color: theme.complementary(); // Complementary color
}

Prop

The .prop() function uses the $theme variable as its default.

div {
    background-color: theme.prop('background');
}

Otherwise you can supply a second string to lookup a specific theme like .prop('background', 'dark') will try to get the background value from the dark theme.

div {
    background-color: theme.prop('background', 'dark');
}

Color Contrast

The function .color-contrasted() is used to determine if a given color needs light or dark text to meet contrast requirements.
It will take the supplied color like .color-contrasted('red') and then return either white or black. That gets further modified by using our $colors-alpha map and applies subtle opacity changes to make the text and background blend together better without sacrificing readability.

button {
    background-color: theme.color('red');
    color: theme.color-contrasted('red'); // This text will have proper contrast to match the background
}