[FINNA-2636] Improve custom theme support

Gruntfile.local.js

@@ -57,96 +57,101 @@ module.exports = function(grunt) {
           dest: 'themes/custom/scss'
         },
       ];
+    const replacements = [
+        // Activate SCSS
+        {
+          pattern: /\/\* #SCSS>/gi,
+          replacement: "/* #SCSS> */",
+          order: -1 // Do before anything else
+        },
+        {
+          pattern: /<#SCSS \*\//gi,
+          replacement: "/* <#SCSS */",
+          order: -1
+        },
+        // Deactivate LESS
+        {
+          pattern: /\/\* #LESS> \*\/.*?\/\* <#LESS \*\//gis,
+          replacement: "",
+          order: -1
+        },
+        { // Change separator in @include statements
+          pattern: /@include ([^\(]+)\(([^\)]+)\);/gi,
+          replacement: function mixinCommas(match, $1, $2) {
+            return '@include ' + $1 + '(' + $2.replace(/;/g, ',') + ');';
+          },
+          order: 4 // after defaults included in less-to-sass
+        },
+        { // Remove unquote
+          pattern: /unquote\("([^"]+)"\)/gi,
+          replacement: function ununquote(match, $1) {
+            return $1;
+          },
+          order: 4
+        },
+        { // Fix tilde literals
+          pattern: /~'(.*?)'/gi,
+          replacement: '$1',
+          order: 4
+        },
+        { // Inline &:extends converted
+          pattern: /&:extend\(([^\)]+?)( all)?\)/gi,
+          replacement: '@extend $1',
+          order: 4
+        },
+        { // Wrap variables in calcs with #{}
+          pattern: /calc\([^;]+/gi,
+          replacement: function calcVariables(match) {
+            return match.replace(/(\$[\w\-]+)/gi, '#{$1}');
+          },
+          order: 4
+        },
+        { // Wrap variables set to css variables with #{}
+          pattern: /(--[\w-:]+:\s*)((\$|darken\(|lighten\()[^;]+)/gi,
+          replacement: '$1#{$2}',
+          order: 5
+        },
+        { // Remove !default from extends (icons.scss)
+          pattern: /@extend ([^;}]+) !default;/gi,
+          replacement: '@extend $1;',
+          order: 6
+        },
+        { // Revert invalid @ => $ changes for css rules:
+          pattern: /\$(supports|container) \(/gi,
+          replacement: '@$1 (',
+          order: 7
+        },
+        { // Revert @if => $if change:
+          pattern: /\$if \(/gi,
+          replacement: '@if (',
+          order: 7
+        },
+        { // Revert @use => $use change:
+          pattern: /\$use '/gi,
+          replacement: "@use '",
+          order: 7
+        },
+        { // Fix comparison:
+          pattern: / ==< /gi,
+          replacement: ' <= ',
+          order: 7
+        },
+      ];
+    if (!grunt.option('no-default')) {
+      replacements.push(
+        { // Add !default (but avoid messing with function params):
+          pattern: /(?<!\(.*)(\$.+):(.+);/g,
+          replacement: '$1:$2 !default;',
+          order: 8
+        }
+      );
+    }
     console.log(themeDir ? "Converting theme " + themeDir : "Converting Finna default themes");
     grunt.config.set('lessToSass', {
      convert: {
         files: files,
         options: {
-          replacements: [
-            // Activate SCSS
-            {
-              pattern: /\/\* #SCSS>/gi,
-              replacement: "/* #SCSS> */",
-              order: -1 // Do before anything else
-            },
-            {
-              pattern: /<#SCSS \*\//gi,
-              replacement: "/* <#SCSS */",
-              order: -1
-            },
-            // Deactivate LESS
-            {
-              pattern: /\/\* #LESS> \*\/.*?\/\* <#LESS \*\//gis,
-              replacement: "",
-              order: -1
-            },
-            { // Change separator in @include statements
-              pattern: /@include ([^\(]+)\(([^\)]+)\);/gi,
-              replacement: function mixinCommas(match, $1, $2) {
-                return '@include ' + $1 + '(' + $2.replace(/;/g, ',') + ');';
-              },
-              order: 4 // after defaults included in less-to-sass
-            },
-            { // Remove unquote
-              pattern: /unquote\("([^"]+)"\)/gi,
-              replacement: function ununquote(match, $1) {
-                return $1;
-              },
-              order: 4
-            },
-            { // Fix tilde literals
-              pattern: /~'(.*?)'/gi,
-              replacement: '$1',
-              order: 4
-            },
-            { // Inline &:extends converted
-              pattern: /&:extend\(([^\)]+?)( all)?\)/gi,
-              replacement: '@extend $1',
-              order: 4
-            },
-            { // Wrap variables in calcs with #{}
-              pattern: /calc\([^;]+/gi,
-              replacement: function calcVariables(match) {
-                return match.replace(/(\$[\w\-]+)/gi, '#{$1}');
-              },
-              order: 4
-            },
-            { // Wrap variables set to css variables with #{}
-              pattern: /(--[\w-:]+:\s*)((\$|darken\(|lighten\()[^;]+)/gi,
-              replacement: '$1#{$2}',
-              order: 5
-            },
-            { // Remove !default from extends (icons.scss)
-              pattern: /@extend ([^;}]+) !default;/gi,
-              replacement: '@extend $1;',
-              order: 6
-            },
-            { // Revert invalid @ => $ changes for css rules:
-              pattern: /\$(supports|container) \(/gi,
-              replacement: '@$1 (',
-              order: 7
-            },
-            { // Revert @if => $if change:
-              pattern: /\$if \(/gi,
-              replacement: '@if (',
-              order: 7
-            },
-            { // Revert @use => $use change:
-              pattern: /\$use '/gi,
-              replacement: "@use '",
-              order: 7
-            },
-            { // Fix comparison:
-              pattern: / ==< /gi,
-              replacement: ' <= ',
-              order: 7
-            },
-            { // Add !default (but avoid messing with function params):
-              pattern: /(?<!\(.*)(\$.+):(.+);/g,
-              replacement: '$1:$2 !default;',
-              order: 8
-            }
-          ]
+          replacements: replacements
         }
       }
     });

themes/custom/less/finna.less

@@ -19,6 +19,9 @@
 // Bootstrap v3.4.1 (loaded via include path to silence warnings from dependencies)
 @import "vendor/bootstrap/bootstrap";
 
+// Finna base variables for improved custom theme SCSS support
+@import "../../finna2/scss/global/base-variables";
+
 // Finna variables
 @import "../../finna2/scss/global/variables";
 

themes/custom/scss/finna.scss

@@ -19,6 +19,9 @@
 // Bootstrap v3.4.1 (loaded via include path to silence warnings from dependencies)
 @import "vendor/bootstrap/bootstrap";
 
+// Finna base variables for improved custom theme SCSS support
+@import "../../finna2/scss/global/base-variables";
+
 // Finna variables
 @import "../../finna2/scss/global/variables";
 

themes/finna2/less/finna.less

@@ -8,6 +8,9 @@
 // Bootstrap v3.4.1
 @import "bootstrap/bootstrap";
 
+// Finna base variables for improved custom theme SCSS support
+@import "global/base-variables";
+
 // Finna variables
 @import "global/variables";
 
@@ -29,6 +32,9 @@
 @import "../../bootstrap3/less/components/keyboard";
 @import "../../bootstrap3/less/components/trees";
 
+// Finna base variables for improved custom theme SCSS support
+@import "global/base-variables";
+
 // Finna variables
 @import "global/bootstrap-variable-overrides";
 @import "global/variables";

themes/finna2/less/global/variables.less

@@ -12,14 +12,6 @@
 @aoe-brand-primary: #ccf5e7;
 @action-link-color: @brand-primary;
 
-// Extra extra small screen / phone (e.g. iPhone 5)
-@screen-xxs: 400px;
-@screen-xxs-min: @screen-xxs;
-@screen-xxs-max: (@screen-xs-min - 1);
-
-@screen-xlg: 1400px;
-@screen-xlg-min: @screen-xlg;
-
 //== Custom Finna styling
 @background-image-url: url('../images/logo_background.jpg');
 @background-image-attachment: scroll;  // set to fixed or scroll (fixed doesnt scoll along with page);
@@ -163,7 +155,6 @@
 
 
 //## Font size, line-height for content pages
-@content-font-size-base: 16px;
 @content-line-height-base: 1.5;
 @content-headings-font-size-h1: floor((@content-font-size-base * 1.777));
 @content-headings-font-size-h2: floor((@content-font-size-base * 1.5));

themes/finna2/scss/finna.scss

@@ -8,6 +8,9 @@
 // Bootstrap v3.4.1
 @import "bootstrap/bootstrap";
 
+// Finna base variables for improved custom theme SCSS support
+@import "global/base-variables";
+
 // Finna variables
 @import "global/variables";
 

themes/finna2/scss/global/variables.scss

@@ -12,14 +12,6 @@ $logo-color: #fff !default;
 $aoe-brand-primary: #ccf5e7 !default;
 $action-link-color: $brand-primary !default;
 
-// Extra extra small screen / phone (e.g. iPhone 5)
-$screen-xxs: 400px !default;
-$screen-xxs-min: $screen-xxs !default;
-$screen-xxs-max: ($screen-xs-min - 1) !default;
-
-$screen-xlg: 1400px !default;
-$screen-xlg-min: $screen-xlg !default;
-
 //== Custom Finna styling
 $background-image-url: url('../images/logo_background.jpg') !default;
 $background-image-attachment: scroll;  // set to fixed or scroll (fixed doesnt scoll along with page) !default;
@@ -163,7 +155,6 @@ $font-size-icon-large: 1.5em !default;
 
 
 //## Font size, line-height for content pages
-$content-font-size-base: 16px !default;
 $content-line-height-base: 1.5 !default;
 $content-headings-font-size-h1: floor(($content-font-size-base * 1.777)) !default;
 $content-headings-font-size-h2: floor(($content-font-size-base * 1.5)) !default;