kspace-wordpress-theme/scss/_palette.scss

/* --- 00. PALETTE --- */

/*
 * Les définitions globales des couleurs du theme.
 *
 * Elle permettent de définir rapidement à la fois les couleurs
 * de base qui seront utilisée pour tout le theme, mais
 * également celles spécifiques pour certains sujets (liens, texte)
 *
 */

// Couleurs de base du theme :

$color-blue: #268bd2;
$color-violet: #d33682;
$color-red: #dc322f;
$color-orange: #cb4b16;
$color-green: #859900;
$color-skyblue: #2aa198;
$color-dark: #002b36;
$color-light: #fdf6e3;
$color-yellow: #b58900;
$color-grey: #586e75;

$color-dark2: #073642;
$color-light2: #eee8d5;

$color-gray2:    #657b83;
$color-gray3:     #839496;
$color-gray4:     #93a1a1;

$color-primary: $color-violet;
$color-secondary: $color-skyblue;

$color-link: $color-skyblue;
$color-selection: $color-skyblue;
$color-mark: $color-yellow;

$color-font: $color-dark2;
$color-warning: $color-orange;
$color-danger: $color-red;
$color-info: $color-skyblue;
$color-success: $color-green;

@mixin background-color($background-color, $text-color) {
    background-color: $background-color!important;
    color: $text-color;
}

@mixin text-color($text-color) {
    color: $text-color;
}

// Colorize important elements

::selection {
    @include background-color($color-selection, $color-light);
}
::-moz-selection {
    @include background-color($color-selection, $color-light);
}

mark {
    background-color: lighten($color-mark, 30%)
}

blockquote, pre {
    border-color: $color-primary;
}

// Add generic colorizations classes

/* BACKGROUNDS */

.bg {
    &-blue { @include background-color($color-blue, $color-light); }
    &-violet { @include background-color($color-violet, $color-light); }
    &-red { @include background-color($color-red, $color-light); }
    &-orange { @include background-color($color-orange, $color-light); }
    &-green { @include background-color($color-green, $color-light); }
    &-skyblue { @include background-color($color-skyblue, $color-light); }
    &-dark { @include background-color($color-dark, $color-light); }
    &-light { @include background-color($color-light, $color-dark); }
    &-yellow { @include background-color($color-yellow, $color-light); }
    &-grey { @include background-color($color-grey, $color-light); }

    &-primary { @include background-color($color-primary, $color-light); }
    &-secondary { @include background-color($color-secondary, $color-light); }
    &-warning { @include background-color($color-warning, $color-light); }
    &-danger { @include background-color($color-danger, $color-light); }
    &-info { @include background-color($color-info, $color-light); }
    &-success { @include background-color($color-success, $color-light); }
}

  /* TEXT */

.text {
    &-blue { @include text-color($color-blue); }
    &-violet { @include text-color($color-violet); }
    &-red { @include text-color($color-red); }
    &-orange { @include text-color($color-orange); }
    &-green { @include text-color($color-green); }
    &-skyblue { @include text-color($color-skyblue); }
    &-dark { @include text-color($color-dark); }
    &-light { @include text-color($color-light); }
    &-yellow { @include text-color($color-yellow); }
    &-grey { @include text-color($color-grey); }

    &-primary { @include text-color($color-primary); }
    &-secondary { @include text-color($color-secondary); }
    &-warning { @include text-color($color-warning); }
    &-danger { @include text-color($color-danger); }
    &-info { @include text-color($color-info); }
    &-success { @include text-color($color-success); }
}