MIZ Color System Documentation

The MIZ framework offers extensive customization options for colors, allowing developers to define their own color palettes and easily use them in their projects. This guide explains how to customize colors using SCSS files.

Core Variables #

MIZ uses three main variables to generate ready-to-use classes:

• $backgrounds: for background colors
• $colors: for text colors
• $borders: for border colors

⚠️ Note: To generate a ready class, the color name must be included in the corresponding variable.

Example: To have .bg-primary-color, `primary` must be listed in $backgrounds.

Defining Color Palettes #

Single Palette Structure

MIZ supports separate color palettes for different themes:

        

            
SCSS

        
        $light-color-palette: (
    primary: #1a73e8,
    on-primary: #ffffff,
    primary-light: #e8f0fe,
    primary-dark: #174ea6,
    on-primary-light: #1a73e8,
    secondary: #f1f3f4,
    on-secondary: #202124,
    secondary-light: #e8eaed
);
$dark-color-palette: (
    primary: #8ab4f8,
    on-primary: #202124,
    primary-light: #334767,
    primary-dark: #1a3c78,
    on-primary-light: #ffffff,
    secondary: #3c4043,
    on-secondary: #e8eaed,
    secondary-light: #5f6368
);
    

Theme Collection

        

            
SCSS

        
        $color-palette: (
    default: $light-color-palette,
    colors: (
        light-palette: $light-color-palette,
        dark-palette: $dark-color-palette
    )
);
    

⚠️ Note: MIZ is themeable, allowing you to create multiple themes with custom color palettes.

Generated Classes #

Based on the main variables, MIZ automatically generates the following classes:

Class Type	Class Format
Background	.bg-<name>-color
Color	.<name>-color
Border	.border-<name>-color

Example:

• If `primary` is in $backgrounds → .bg-primary-color is generated
• If `primary` is in $colors → .text-primary-color is generated

Using Colors in SCSS #

You can directly use colors in SCSS with the get-color() function:

        

            
SCSS

        
        .my-button {
    background-color: get-color(primary);
    color: get-color(on-primary);
    border: 1px solid get-color(border);
}
    

HTML Examples #

Text Color

        

            
HTML

        
        

            
Example element color
        
        <p class="primary-color txt-center">Example element color</p>
    

Background Color

        

            
HTML

        
        

            
Example element background-color
        
        <p class="bg-primary-color txt-center radius-all-small p-2">Example element background-color</p>
    

Border Color

        

            
HTML

        
        

            
Example element border-color
        
        <p class="border-primary-color primary-color bw-4 border-style-solid txt-center radius-all-small p-2">Example element border-color</p>
    

Tips & Best Practices #

• To use a ready class, make sure the desired color is added to $backgrounds, $colors, or $borders.
• Defining a complete palette ensures visual consistency across the project.
• Using get-color() in SCSS simplifies coding and improves maintainability.
• You can create multiple themes with custom palettes, all managed in a unified system.

Summary #

The color system in MIZ is not limited to light and dark palettes. Multiple color palettes can be defined for different themes, and classes are generated automatically based on core variables. These classes can be used directly in HTML and SCSS/CSS.