113 lines
2.5 KiB
SCSS
113 lines
2.5 KiB
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)
|
|
*
|
|
*/
|
|
|
|
$whiteness_value: 0.8;
|
|
|
|
// Couleurs de base du theme :
|
|
|
|
$palette: (
|
|
"blue":#1971c2,
|
|
"violet":#6741d9,
|
|
"red":#e03131,
|
|
"orange":#e8590c,
|
|
"green":#2f9e44,
|
|
"skyblue":#0c8599,
|
|
"dark": #343a40,
|
|
"light":#ffffff,
|
|
"yellow":#ffe066,
|
|
"grey":#adb5bd,
|
|
"dark2":#212529,
|
|
"light2":#f1f3f5);
|
|
|
|
$palette-light: (
|
|
"blue": #a5d8ff,
|
|
"violet":#d0bfff,
|
|
"red":#ffc9c9,
|
|
"orange":#ffd8a8,
|
|
"green":#b2f2bb,
|
|
"skyblue":#99e9f2,
|
|
"yellow":#ffec99,
|
|
"light":#ffffff,
|
|
"grey":#f1f3f5,
|
|
"dark":#adb5bd
|
|
);
|
|
|
|
$semantics: (
|
|
"primary":"red",
|
|
"secondary":"dark",
|
|
"warning":"orange",
|
|
"danger":"red",
|
|
"info":"blue",
|
|
"success":"green",
|
|
"muted":"grey",
|
|
"light":"light",
|
|
"dark":"dark");
|
|
|
|
$helpers: (
|
|
"font":"dark2",
|
|
"font-light":"light",
|
|
"background":"light",
|
|
"background-alt":"light2",
|
|
"link":"red",
|
|
"selection":"blue",
|
|
"mark":"yellow",
|
|
);
|
|
|
|
@function get-color($name) {
|
|
@if map-has-key($helpers, $name) {
|
|
@return map-get($palette, map-get($helpers, $name));
|
|
} @else {
|
|
@if map-has-key($semantics, $name) {
|
|
@return map-get($palette, map-get($semantics, $name));
|
|
} @else {
|
|
@return map-get($palette, $name);
|
|
}
|
|
}
|
|
}
|
|
|
|
@function get-color-light($name) {
|
|
@if map-has-key($helpers, $name) {
|
|
@return map-get($palette-light, map-get($helpers, $name));
|
|
}
|
|
|
|
@else {
|
|
@if map-has-key($semantics, $name) {
|
|
@return map-get($palette-light, map-get($semantics, $name));
|
|
}
|
|
|
|
@else {
|
|
@return map-get($palette-light, $name);
|
|
}
|
|
}
|
|
}
|
|
|
|
// **Couleurs du theme**
|
|
// Ne pas retirer ces couleurs, qui
|
|
// sont essentielle pour que le framework functionne.
|
|
// Pour les modifier, modifier le contenu du tableau $semantics.
|
|
|
|
$color-link: get-color("link");
|
|
$color-selection: get-color("selection");
|
|
$color-mark: get-color("mark");
|
|
$color-font: get-color("font");
|
|
$color-font-light: get-color("font-light");
|
|
|
|
$color-primary: get-color("primary");
|
|
$color-secondary: get-color("secondary");
|
|
$color-warning: get-color("warning");
|
|
$color-danger: get-color("danger");
|
|
$color-info: get-color("info");
|
|
$color-success: get-color("success");
|
|
|
|
$color-muted: get-color("muted");
|
|
|
|
$color-background: get-color("background");
|
|
$color-background-alt: get-color("background-alt");
|