chore: separate colors and palette

src/scss/_colors.css

@@ -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)); }
+     }
+ }

src/scss/_palette.scss

@@ -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)); }
-    }
-}

src/scss/style.scss

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