kazhnuz/kazhnuz.css
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

chore: separate colors and palette

Browse source
This commit is contained in:
Kazhnuz 2021-07-25 14:21:31 +02:00
parent 059884df48
commit 520ea6aaee
3 changed files with 105 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

103
src/scss/_colors.css Normal file
View file

@ -0,0 +1,103 @@
/* --- 00. COLORS --- */
/*
* La gestion des couleurs dans le theme. Cette partie de la stylesheet est
* automatique et n'a pas besoin d'être modifiée
*/
// FUNCTIONS TO GET MORE EASILY COLORS
@function get-color($name) {
@if map-has-key($semantics, $name) {
@return map-get($palette, map-get($semantics, $name));
} @else {
@return map-get($palette, $name);
}
}
@function list-colors() {
$newmap: map-merge($palette, $semantics);
@return $newmap;
}
@function luminance($color) {
$c_red: red($color);
$c_grn: green($color);
$c_blu: blue($color);
$luminance: $c_red*0.299 + $c_grn*0.587 + $c_blu*0.114;
@return $luminance
}
@function getTextColorFromBackground($background-color) {
@if (luminance($background-color) < 255 * $whiteness_value) {
@return $color-font-light;
} @else {
@return $color-font;
}
}
// Couleurs du theme
$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");
// fonction texte et background
@mixin text-color($text-color) {
color: $text-color;
}
@mixin background-color($background-color) {
background-color: $background-color;
color: getTextColorFromBackground($background-color);
}
// Colorize important elements
// Direct uses of colors
a, a:hover, a:active {
color: $color-link;
}
::selection {
@include background-color($color-selection);
}
::-moz-selection {
@include background-color($color-selection);
}
mark {
background-color: lighten($color-mark, 30%)
}
blockquote, pre {
border-color: $color-primary;
}
.bg {
@each $name, $color in list-colors() {
&-#{$name} { @include background-color(get-color($name)); }
}
}
.text {
@each $name, $color in list-colors() {
&-#{$name} { @include text-color(get-color($name)); }
}
}

97
src/scss/_palette.scss
View file

@ -45,100 +45,3 @@ $semantics: (
"info":"skyblue",
"success":"green",
"muted":"grey");
// FUNCTIONS TO GET MORE EASILY COLORS
@function get-color($name) {
@if map-has-key($semantics, $name) {
@return map-get($palette, map-get($semantics, $name));
} @else {
@return map-get($palette, $name);
}
}
@function list-colors() {
$newmap: map-merge($palette, $semantics);
@return $newmap;
}
@function luminance($color) {
$c_red: red($color);
$c_grn: green($color);
$c_blu: blue($color);
$luminance: $c_red*0.299 + $c_grn*0.587 + $c_blu*0.114;
@return $luminance
}
@function getTextColorFromBackground($background-color) {
@if (luminance($background-color) < 255 * $whiteness_value) {
@return $color-font-light;
} @else {
@return $color-font;
}
}
// Couleurs du theme
$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");
// fonction texte et background
@mixin text-color($text-color) {
color: $text-color;
}
@mixin background-color($background-color) {
background-color: $background-color;
color: getTextColorFromBackground($background-color);
}
// Colorize important elements
// Direct uses of colors
a, a:hover, a:active {
color: $color-link;
}
::selection {
@include background-color($color-selection);
}
::-moz-selection {
@include background-color($color-selection);
}
mark {
background-color: lighten($color-mark, 30%)
}
blockquote, pre {
border-color: $color-primary;
}
.bg {
@each $name, $color in list-colors() {
&-#{$name} { @include background-color(get-color($name)); }
}
}
.text {
@each $name, $color in list-colors() {
&-#{$name} { @include text-color(get-color($name)); }
}
}

2
src/scss/style.scss
View file

@ -18,6 +18,8 @@
@import 'palette';
@import 'colors';
@import 'definitions';
@import 'typography';