Merge branch 'chromatic-sass'

* chromatic-sass:
  EBEAST: cssaux.scss: lcolor(): adjust color to specific perceptible lightness
  EBEAST: cssaux.scss: add lgrey() to create shade from perceptible lightness
  EBEAST: cssaux.scss: add ipow()
  EBEAST: cssaux.scss: add clamp(), contrast-lighten() and contrast-darken()
  EBEAST: cssaux.scss: add asfactor(), darker(), lighter()
  EBEAST: theme.scss: rename (from variables.scss)
  EBEAST: rollup.config.js: use 'node-sass' for Vue SFC
  EBEAST: chromatic-sass: add and utilize chromatic-sass in scss sources
  EBEAST: fix-vue-ccu.diff: add 'sass' option to @vue/component-compiler-utils
	Patch @vue/component-compiler-utils so that the Sass module can be
	configured similar to how rollup-plugin-scss allows it.
	In vuejs/component-compiler-utils#56, the use
	of 'sass' was hardcoded, which prevents use of node-sass features in
	Vue SFCs, like node-sass functions (needed by chromatic-sass).
	Beyond that, due to Sass and CSS providing clashing function names like
	min()/max(), the Dart 'sass' module chokes on the simplest of expressions:
	            * { width: min(2, 3) * 1px; }
  EBEAST: package.json.in: upgrade rollup-plugin-vue

Signed-off-by: Tim Janik <[email protected]>

Author: tim-janik

ebeast/Makefile.mk

@@ -14,7 +14,7 @@ ebeast/all: $>/app/package.json
 # - When DevTools are enabled, Shift+Ctrl+R can initiate a page reload.
 
 # == sources ==
-ebeast/b/vue.inputs	::= $(wildcard ebeast/b/*.vue)
+ebeast/b/vue.inputs	::= $(sort $(wildcard ebeast/b/*.vue))
 ebeast/b/vue.stems	::= $(patsubst ebeast/b/%.vue, %, $(ebeast/b/vue.inputs))
 ebeast/eslint.files	::= $(wildcard ebeast/*.html) $(wildcard ebeast/*.js ebeast/b/*.js)
 ebeast/app.scss.d	::= $(wildcard ebeast/*.scss ebeast/b/*.scss)
@@ -55,7 +55,7 @@ $(filter $>/app/%, $(ebeast/copy.targets)):	$>/app/%:    ebeast/% | $>/app/    ;
 
 # == npm ==
 NPM_INSTALL = npm --prefer-offline install $(if $(PARALLEL_MAKE), --progress=false)
-$>/ebeast/node_modules/npm.done: ebeast/package.json.in	ebeast/fix-scss.diff | $>/ebeast/
+$>/ebeast/node_modules/npm.done: ebeast/package.json.in	ebeast/fix-scss.diff ebeast/fix-vue-ccu.diff | $>/ebeast/
 	$(QGEN)
 	$Q rm -f -r $>/ebeast/node_modules/
 	$Q cp $< $>/ebeast/package.json # avoids dependency on other ebeast/copy.targets
@@ -65,6 +65,7 @@ $>/ebeast/node_modules/npm.done: ebeast/package.json.in	ebeast/fix-scss.diff | $
 	  && find . -name package.json -print0 | xargs -0 sed -r "\|$$PWD|s|^(\s*(\"_where\":\s*)?)\"$$PWD|\1\"/...|" -i
 	@: # Patch broken modules
 	$Q (cd  $>/ebeast/ && patch -p0) < ebeast/fix-scss.diff
+	$Q (cd  $>/ebeast/ && patch -p0) < ebeast/fix-vue-ccu.diff
 	$Q echo >$@
 # provide node_modules/ for use in other makefiles
 NODE_MODULES.bin  ::= $>/ebeast/node_modules/.bin/
@@ -204,7 +205,9 @@ $>/app/assets/Inter-Medium.woff2:			| $>/app/assets/
 $>/app/assets/stylesheets.css: $(ebeast/app.scss.d) $>/app/assets/Inter-Medium.woff2	| $>/ebeast/node_modules/npm.done
 	$(QGEN) # NOTE: scss source and output file locations must be final, because .map is derived from it
 	$Q : # cd $>/app/ && ../ebeast/node_modules/.bin/node-sass app.scss assets/stylesheets.css --source-map true
-	$Q $(NODE_MODULES.bin)/node-sass ebeast/app.scss $>/app/assets/stylesheets.css \
+	$Q $(NODE_MODULES.bin)/node-sass \
+		--functions $(NODE_MODULES.bin)/../chromatic-sass/dist/main.js \
+		ebeast/app.scss $>/app/assets/stylesheets.css \
 		--include-path ebeast/ --include-path $>/ebeast/ --source-map-embed --source-map-contents --source-comments
 $>/app/assets/material-icons.css:			| $>/app/assets/
 	$(QECHO) FETCH material-icons-190326.1.tar.xz

ebeast/app.scss

@@ -1,7 +1,7 @@
 // This Source Code Form is licensed MPL-2.0: http://mozilla.org/MPL/2.0
 
 /* Imports:
- * - app.scss -> b/mixins.scss -> variables.scss -> cssaux.scss
+ * - app.scss -> b/mixins.scss -> theme.scss -> cssaux.scss
  * - app.scss -> scrollbar.scss
  */
 @import 'b/mixins.scss';

ebeast/b/mixins.scss

@@ -1,10 +1,10 @@
 // This Source Code Form is licensed MPL-2.0: http://mozilla.org/MPL/2.0
 
 // == Scss Theme Basics ==
-@import '../variables.scss';
+@import '../theme.scss';
 
 // == Variables ==
-// Only put *!default* definitions here, so `variables.scss` takes precedence.
+// Only put *!default* definitions here, so `theme.scss` takes precedence.
 
 // theme basics
 $b-theme-font-family:		$b-main-font-family;

ebeast/cssaux.scss

@@ -20,3 +20,121 @@ $device-pixel-ratio: var(--device-pixel-ratio);
 @function dppx($n: 1) {
   @return calc(1px * #{$n} / #{$device-pixel-ratio});
 }
+
+/// Clamp `$number` between `$min` and `$max`
+@function clamp($number, $min, $max) {
+  @return min(max($number, $min), $max);
+}
+
+// Raises `$base` to the power of `$exponent` which must be a positive integer
+@function ipow($base, $exponent) {
+  @if not unitless($base) {
+    @error "Error: $base must be unitless:" $base;
+  }
+  @if $exponent < 1 {
+    @return 1;
+  }
+  $val: $base;
+  @while $exponent > 1 {
+    $val: $val * $base;
+    $exponent: $exponent - 1;
+  }
+  @return $val;
+}
+@if ipow(12345, 0) != 1 {
+  @error "FAIL: ipow(12345, 0):" ipow(12345, 0);
+}
+@if ipow(2, 8) != 256 {
+  @error "FAIL: ipow(2, 8) :" ipow(2, 8);
+}
+
+/// Convert a percentage number to a factor within 0…1
+@function asfactor($f) {
+  @if (unit($f) == "%") {
+    $f: $f / 100%;
+  }
+  @return $f;
+}
+
+/// Reduce luminance by a percentage
+@function darker($col, $f: 10%) {
+  // decrease luminance by a percentage, also work around luminance==0 -> 0
+  $lum: max(0.0000001, chromatic-color-luminance($col) * (1 - asfactor($f)));
+  @return chromatic-color-luminance($col, $lum, 'lab');
+}
+
+/// Increase luminance by a percentage
+@function lighter($col, $f: 10%) {
+  // increase luminance by a percentage, also work around luminance==0 -> 0
+  $lum: max(0.0000001, chromatic-color-luminance($col) * (1 + asfactor($f)));
+  @return chromatic-color-luminance($col, $lum, 'lab');
+}
+
+/// Black/grey/white by perceptible lightness (CIE L*)
+// https://en.wikipedia.org/wiki/CIELAB_color_space
+@function lgrey($l: 50%) {
+  @return chromatic-color-set(#ffffff, 'lab.l', 100 * asfactor($l));
+}
+
+/// Adjust color `$col` to a specific perceptible lightness (CIE L*)
+@function lcolor($col, $l: 100%) {
+  @return chromatic-color-set($col, 'lab.l', 100 * asfactor($l));
+}
+
+/// Lighten `$color` until a target contrast ratio is met.
+@function contrast-lighten($color, $targetratio: 1, $pivot: 'SAME') {
+  @if (unit($targetratio) == "%") {
+    $targetratio: $targetratio / 100% * 21;
+  }
+  @if $pivot == 'SAME' {
+    $pivot: $color;
+  }
+  $targetratio: max(1, min(21, $targetratio));
+  $lnext: chromatic-color-luminance($color);
+  $new: $color;
+  $currentratio: chromatic-contrast($pivot, $new);
+  @while $currentratio < $targetratio and $lnext < 1 {
+    $delta: max(0.000379, ($targetratio - $currentratio) / 21 / 2);
+    $lnext: $lnext + $delta;
+    $new: chromatic-color-luminance($color, max(0.0001, $lnext));
+    $currentratio: chromatic-contrast($pivot, $new);
+  }
+  @return $new;
+}
+@if contrast-lighten(#000000, 1.006) != #010101 {
+  @error "FAIL: contrast-lighten(#000000, 1.006):" contrast-lighten(#000000, 1.006);
+}
+@if contrast-lighten(#000000, 1.0075) != #020202 {
+  @error "FAIL: contrast-lighten($start, 1.0075):" contrast-lighten($start, 1.0075);
+}
+@if contrast-lighten(#000000, 20.8) != #fefefe {
+  @error "FAIL: contrast-lighten(#000000, 20.8):" contrast-lighten(#000000, 20.8);
+}
+
+/// Darken `$color` until a target contrast ratio is met.
+@function contrast-darken($color, $targetratio: 1, $pivot: 'SAME') {
+  @if (unit($targetratio) == "%") {
+    $targetratio: $targetratio / 100% * 21;
+  }
+  @if $pivot == 'SAME' {
+    $pivot: $color;
+  }
+  $targetratio: clamp($targetratio, 1, 21);
+  $lnext: chromatic-color-luminance($color);
+  $new: $color;
+  $currentratio: chromatic-contrast($pivot, $new);
+  @while $currentratio < $targetratio and $lnext > 0.00015 {
+    $delta: clamp(($targetratio - $currentratio) / 21 / 2, 0.00045, $lnext * 0.7);
+    $lnext: $lnext - $delta;
+    $new: chromatic-color-luminance($color, max(0.0001, $lnext));
+    $currentratio: chromatic-contrast($pivot, $new);
+  }
+  @return $new;
+}
+@if contrast-darken(#ffffff, 1.007) != #fefefe {
+  @error "FAIL: contrast-darken(#ffffff, 1.007):" contrast-darken(#ffffff, 1.007);
+}
+@if contrast-darken(#ffffff, 20.8) != #010101 {
+  @error "FAIL: contrast-darken(#ffffff, 20.8):" contrast-darken(#ffffff, 20.8);
+  // $s:#fff; $t:contrast-darken($s, 20); @debug $s $t chromatic-contrast($t,$s);
+}

ebeast/fix-vue-ccu.diff

@@ -0,0 +1,7 @@
+--- node_modules/@vue/component-compiler-utils/dist/styleProcessors/index.js.orig	1985-10-26 09:15:00.000000000 +0100
++++ node_modules/@vue/component-compiler-utils/dist/styleProcessors/index.js	2020-06-18 02:53:03.036573830 +0200
+@@ -6,3 +6,3 @@
+     render(source, map, options) {
+-        const nodeSass = require('sass');
++        const nodeSass = options.sass || require('sass');
+         const finalOptions = Object.assign({}, options, {

ebeast/package.json.in

@@ -16,6 +16,7 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^8.0.1",
     "babel-eslint": "^10.1.0",
+    "chromatic-sass": "^0.1.8",
     "eslint": "^5.16.0",
     "eslint-plugin-html": "^5.0.5",
     "eslint-plugin-vue": "^5.2.3",
@@ -24,7 +25,7 @@
     "rollup": "^2.16.1",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-scss": "^2.5.0",
-    "rollup-plugin-vue": "^5.1.4",
+    "rollup-plugin-vue": "^5.1.9",
     "vue-template-compiler": "^2.6.11"
   },
   "scripts": {

ebeast/rollup.config.js

@@ -19,14 +19,19 @@ export default {
       // normalizeComponent needs ./node_modules/vue-runtime-helpers/dist/index.mjs import
       normalizer: "globalThis['vue-runtime-helpers'].normalizeComponent",
       // data: { css: '/* globals... */', }, // increases line numbers in source maps
+      style: { preprocessOptions: {
+	scss: {
+	  sass: require ('node-sass'),           // supports custom functions
+	  // https://github.com/sass/node-sass#options
+	  sourceMapEmbed: true,
+	  outputStyle: 'nested',                 // nested, expanded, compact, compressed
+	  sourceComments: false,
+	  functions: require ("chromatic-sass"), // provide node-sass color functions
+	},
+      }, },
     }),
+    scss (),
     babel(),
-    scss ({
-      // https://github.com/thgh/rollup-plugin-scss#options https://github.com/sass/node-sass#options
-      sourceMapEmbed: true,
-      sourceComments: true,
-      outputStyle: 'nested', // nested, expanded, compact, compressed
-    }),
     resolve(),
   ],
   external: [ './jsbse.js', ],