index.scss

//
// Name:         siimple-colors
// Description:  A color palette for UI design
// License:      https://github.com/siimple/siimple-colors/blob/master/LICENSE
// Repository:   https://github.com/siimple/siimple-colors
//

//Import all variables, mixins and functions
@import "./scss/palette.scss";
@import "./scss/functions.scss";
@import "./scss/colors.scss";

//CSS Color variables
:root {
    @each $color, $list in $siimple-colors {
        //Base color
        #{--siimple}-#{$color}: #{siimple-color-base($color)};
        @each $color-id, $color-hex in $list {
            @if $color-id != "base" {
                #{--siimple}-#{$color}-#{$color-id}: #{$color-hex};
            }
        }
    }
    //White color
    #{--siimple-white}: #{$siimple-white};
}

//Colors styles
.siimple {
    @each $color, $list in $siimple-colors {
        //Base text color
        &--color-#{$color} {
            color: siimple-color-base($color);
        }
        // Base background color
        &--bg-#{$color} {
            background-color: siimple-color-base($color);
        }
        //Each color in the palette
        @each $color-id, $color-hex in $list {
            @if $color-id != "base" {
                &--color-#{$color}-#{$color-id} {
                    color: $color-hex;
                }
                &--bg-#{$color}-#{$color-id} {
                    background-color: $color-hex;
                }
            }
        }
    }
    //White color for text and background
    &--color-white {
        color: $siimple-white;
    }
    &--bg-white {
        background-color: $siimple-white;
    }
}