qdouze-bludit-theme/scss/definitions/_palette.scss
2024-04-10 20:54:20 +02:00

113 lines
2.5 KiB
SCSS
Executable file

/* --- 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":#e9ecef);
$palette-light: (
"blue": #d0ebff,
"violet":#e5dbff,
"red":#ffe3e3,
"orange":#ffe8cc,
"green":#d3f9d8,
"skyblue":#c5f6fa,
"yellow":#fff3bf,
"light":#ffffff,
"grey":#f1f3f5,
"dark":#ced4da
);
$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");