WIP - Plugin to override default template colors

* Adds a new core plugin to override default template colors
  * Adds a new hook when plugin settings are saved
(`save_plugin_parameters`)
  * Use CSS native variables for main colors instead of SASS variables
  * Disable SASS sort order rules due to a bug in the plugin

Fixes #1312

.dev/.sasslintrc

@@ -2,9 +2,11 @@ options:
   max-warnings: 0
 rules:
   property-sort-order:
-    - 1
-    -
-      order: 'concentric'
+    - 0
+# Sort order rule does not work with CSS variables: https://github.com/sasstools/sass-lint/issues/1161
+#    - 1
+#    -
+#      order: 'concentric'
   no-important:
     - 0
   no-vendor-prefixes:

.gitignore

@@ -28,6 +28,7 @@ phpdoc.xml
 
 # User plugin configuration
 plugins/*/config.php
+plugins/default_colors/default_colors.css
 
 # HTML documentation
 doc/html/

assets/default/scss/shaarli.scss

@@ -25,9 +25,15 @@ $warning-text: #97600d;
 $form-input-border: #d8d8d8;
 $form-input-background: #eee;
 
+:root {
+  --main-color: #{$main-green};
+  --background-color: #{$background-color};
+  --dark-main-color: #{$dark-green};
+}
+
 // General
 body {
-  background: $background-color;
+  background: var(--background-color);
 }
 
 .strong {
@@ -143,7 +149,7 @@ body,
 }
 
 .pure-alert-success {
-  background-color: $main-green;
+  background-color: var(--main-color);
 }
 
 .pure-alert-warning {
@@ -169,7 +175,7 @@ body,
   top: 0;
   transition: max-height .5s;
   z-index: 999;
-  background: $main-green;
+  background: var(--main-color);
   width: 100%;
   // Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919
   max-height: 45px;
@@ -322,7 +328,7 @@ body,
   button {
     border: 0;
     border-radius: 2px;
-    background-color: $main-green;
+    background-color: var(--main-color);
     padding: 4px 8px 6px;
     color: $almost-white;
   }
@@ -358,7 +364,7 @@ body,
 .search-tagcloud {
   button {
     &:hover {
-      color: $background-color;
+      color: var(--background-color);
     }
   }
 }
@@ -389,7 +395,7 @@ body,
   position: fixed;
   visibility: hidden;
   z-index: 999;
-  background: $main-green;
+  background: var(--main-color);
   padding: 5px 0;
   width: 100%;
   height: 30px;
@@ -411,7 +417,7 @@ body,
     margin: 0 0 5px;
     border: 1px solid $almost-white;
     border-radius: 2px;
-    background: $main-green;
+    background: var(--main-color);
     padding: 4px 0;
     width: 100px;
     height: 28px;
@@ -419,7 +425,7 @@ body,
 
     &:hover {
       background: $almost-white;
-      color: $main-green;
+      color: var(--main-color);
     }
   }
 
@@ -558,7 +564,7 @@ body,
   }
 
   .filter-on {
-    background: $main-green;
+    background: var(--main-color);
     color: $light-green;
   }
 
@@ -697,7 +703,7 @@ body,
 
       &:visited {
         .linklist-link {
-          color: $dark-green;
+          color: var(--dark-main-color);
         }
       }
 
@@ -708,7 +714,7 @@ body,
   }
 
   .linklist-link {
-    color: $main-green;
+    color: var(--main-color);
     font-size: 1.1em;
 
     &:hover {
@@ -783,14 +789,14 @@ body,
 
   a {
     text-decoration: none;
-    color: $main-green;
+    color: var(--main-color);
 
     &:hover {
       color: $dark-grey;
     }
 
     &:visited {
-      color: $dark-green;
+      color: var(--dark-main-color);
     }
   }
 }
@@ -888,7 +894,7 @@ body,
   &::before {
     display: block;
     margin: 10px auto;
-    background: linear-gradient(to right, $background-color, $dark-grey, $background-color);
+    background: linear-gradient(to right, var(--background-color), $dark-grey, var(--background-color));
     width: 80%;
     height: 1px;
     content: '';
@@ -917,7 +923,7 @@ body,
   margin: 15px 5px;
   border: 0;
   box-shadow: 1px 1px 1px $form-input-border, -1px -1px 6px $form-input-border, -1px 1px 2px $form-input-border, 1px -1px 2px $form-input-border;
-  background: $main-green;
+  background: var(--main-color);
   min-width: 150px;
   height: 35px;
   vertical-align: center;
@@ -941,7 +947,7 @@ body,
     padding: 10px 0;
     width: 100%;
     text-align: center;
-    color: $main-green;
+    color: var(--main-color);
   }
 
   .window-subtitle {
@@ -950,7 +956,7 @@ body,
 
   a {
     text-decoration: none;
-    color: $main-green;
+    color: var(--main-color);
     font-weight: bold;
 
     &.button {
@@ -1278,7 +1284,7 @@ form {
 
   .pure-button {
     &:hover {
-      background-color: $main-green;
+      background-color: var(--main-color);
       background-image: none;
       color: $almost-white;
     }
@@ -1362,7 +1368,7 @@ form {
   }
 
   .validate-rename-tag {
-    color: $main-green;
+    color: var(--main-color);
   }
 }
 
@@ -1458,7 +1464,7 @@ form {
     &::after {
       display: block;
       margin: 10px auto;
-      background: linear-gradient(to right, $background-color, $dark-grey, $background-color);
+      background: linear-gradient(to right, var(--background-color), $dark-grey, var(--background-color));
       width: 90%;
       height: 1px;
       content: '';
@@ -1508,14 +1514,14 @@ form {
 .daily-entry-description {
   a {
     text-decoration: none;
-    color: $main-green;
+    color: var(--main-color);
 
     &:hover {
       text-shadow: 1px 1px $background-linklist-info;
     }
 
     &:visited {
-      color: $dark-green;
+      color: var(--dark-main-color);
     }
   }
 }
@@ -1572,12 +1578,12 @@ form {
 }
 
 .pure-button-shaarli {
-  background-color: $main-green;
+  background-color: var(--main-color);
 }
 
 .progressbar {
   border-radius: 6px;
-  background-color: $main-green;
+  background-color: var(--main-color);
   padding: 1px;
 
   > div {
@@ -1586,8 +1592,8 @@ form {
       -45deg,
       $almost-white,
       $almost-white 6px,
-      $background-color 6px,
-      $background-color 12px
+      var(--background-color) 6px,
+      var(--background-color) 12px
     );
     width: 0%;
     height: 10px;

index.php

@@ -1567,6 +1567,7 @@ function renderPage($conf, $pluginManager, $LINKSDB, $history, $sessionManager,
     if ($targetPage == Router::$PAGE_SAVE_PLUGINSADMIN) {
         try {
             if (isset($_POST['parameters_form'])) {
+                $pluginManager->executeHooks('save_plugin_parameters', $_POST);
                 unset($_POST['parameters_form']);
                 foreach ($_POST as $param => $value) {
                     $conf->set('plugins.'. $param, escape($value));

plugins/default_colors/default_colors.css.template

@@ -0,0 +1,3 @@
+:root {
+  %s
+}

plugins/default_colors/default_colors.meta

@@ -0,0 +1,5 @@
+description="Override default theme colors. Use any CSS valid color."
+parameters="DEFAULT_COLORS_MAIN;DEFAULT_COLORS_BACKGROUND;DEFAULT_COLORS_DARK_MAIN"
+parameter.DEFAULT_COLORS_MAIN="Main color (navbar green)"
+parameter.DEFAULT_COLORS_BACKGROUND="Background color (light grey)"
+parameter.DEFAULT_COLORS_DARK_MAIN="Dark main color (e.g. visited links)"

plugins/default_colors/default_colors.php

@@ -0,0 +1,68 @@
+<?php
+
+/**
+ * Plugin default_colors.
+ *
+ * Allow users to easily overrides colors of the default theme.
+ */
+
+use Shaarli\Plugin\PluginManager;
+
+const DEFAULT_COLORS_PLACEHOLDERS = [
+    'DEFAULT_COLORS_MAIN',
+    'DEFAULT_COLORS_BACKGROUND',
+    'DEFAULT_COLORS_DARK_MAIN',
+];
+
+/**
+ * When plugin parameters are saved
+ */
+function hook_default_colors_save_plugin_parameters($data)
+{
+    $file = PluginManager::$PLUGINS_PATH . '/default_colors/default_colors.css';
+    $template = file_get_contents(PluginManager::$PLUGINS_PATH . '/default_colors/default_colors.css.template');
+    $content = '';
+    foreach (DEFAULT_COLORS_PLACEHOLDERS as $rule) {
+        $content .= ! empty($data[$rule])
+            ? default_colors_format_css_rule($data, $rule) .';'. PHP_EOL
+            : '';
+    }
+    file_put_contents($file, sprintf($template, $content));
+    return $data;
+}
+
+/**
+ * When linklist is displayed, include isso CSS file.
+ *
+ * @param array $data - header data.
+ *
+ * @return mixed - header data with isso CSS file added.
+ */
+function hook_default_colors_render_includes($data)
+{
+    $file = PluginManager::$PLUGINS_PATH . '/default_colors/default_colors.css';
+    if (file_exists($file )) {
+        $data['css_files'][] = $file ;
+    }
+
+    return $data;
+}
+
+/**
+ * This function is never called, but contains translation calls for GNU gettext extraction.
+ */
+function default_colors_translation()
+{
+    // meta
+    t('Override default theme colors. Use any CSS valid color.');
+    t('Main color (navbar green)');
+    t('Background color (light grey)');
+    t('Dark main color (e.g. visited links)');
+}
+
+function default_colors_format_css_rule($data, $parameter)
+{
+    $key = str_replace('DEFAULT_COLORS_', '', $parameter);
+    $key = str_replace('_', '-', strtolower($key)) .'-color';
+    return '  --'. $key .': '. $data[$parameter];
+}