Skip to content

Commit d8e3879

Browse files
tim-janiktim-janik
committed
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 <timj@gnu.org>
2 parents ceeb475 + 73730ff commit d8e3879

8 files changed

+147
-13
lines changed

‎ebeast/Makefile.mk

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ ebeast/all: $>/app/package.json
1414
# - When DevTools are enabled, Shift+Ctrl+R can initiate a page reload.
1515

1616
# == sources ==
17-
ebeast/b/vue.inputs ::= $(wildcard ebeast/b/*.vue)
17+
ebeast/b/vue.inputs ::= $(sort $(wildcard ebeast/b/*.vue))
1818
ebeast/b/vue.stems ::= $(patsubst ebeast/b/%.vue, %, $(ebeast/b/vue.inputs))
1919
ebeast/eslint.files ::= $(wildcard ebeast/*.html) $(wildcard ebeast/*.js ebeast/b/*.js)
2020
ebeast/app.scss.d ::= $(wildcard ebeast/*.scss ebeast/b/*.scss)
@@ -55,7 +55,7 @@ $(filter $>/app/%, $(ebeast/copy.targets)): $>/app/%: ebeast/% | $>/app/ ;
5555

5656
# == npm ==
5757
NPM_INSTALL = npm --prefer-offline install $(if $(PARALLEL_MAKE), --progress=false)
58-
$>/ebeast/node_modules/npm.done: ebeast/package.json.in ebeast/fix-scss.diff | $>/ebeast/
58+
$>/ebeast/node_modules/npm.done: ebeast/package.json.in ebeast/fix-scss.diff ebeast/fix-vue-ccu.diff | $>/ebeast/
5959
$(QGEN)
6060
$Q rm -f -r $>/ebeast/node_modules/
6161
$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 | $
6565
&& find . -name package.json -print0 | xargs -0 sed -r "\|$$PWD|s|^(\s*(\"_where\":\s*)?)\"$$PWD|\1\"/...|" -i
6666
@: # Patch broken modules
6767
$Q (cd $>/ebeast/ && patch -p0) < ebeast/fix-scss.diff
68+
$Q (cd $>/ebeast/ && patch -p0) < ebeast/fix-vue-ccu.diff
6869
$Q echo >$@
6970
# provide node_modules/ for use in other makefiles
7071
NODE_MODULES.bin ::= $>/ebeast/node_modules/.bin/
@@ -204,7 +205,9 @@ $>/app/assets/Inter-Medium.woff2: | $>/app/assets/
204205
$>/app/assets/stylesheets.css: $(ebeast/app.scss.d) $>/app/assets/Inter-Medium.woff2 | $>/ebeast/node_modules/npm.done
205206
$(QGEN) # NOTE: scss source and output file locations must be final, because .map is derived from it
206207
$Q : # cd $>/app/ && ../ebeast/node_modules/.bin/node-sass app.scss assets/stylesheets.css --source-map true
207-
$Q $(NODE_MODULES.bin)/node-sass ebeast/app.scss $>/app/assets/stylesheets.css \
208+
$Q $(NODE_MODULES.bin)/node-sass \
209+
--functions $(NODE_MODULES.bin)/../chromatic-sass/dist/main.js \
210+
ebeast/app.scss $>/app/assets/stylesheets.css \
208211
--include-path ebeast/ --include-path $>/ebeast/ --source-map-embed --source-map-contents --source-comments
209212
$>/app/assets/material-icons.css: | $>/app/assets/
210213
$(QECHO) FETCH material-icons-190326.1.tar.xz

‎ebeast/app.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// This Source Code Form is licensed MPL-2.0: http://mozilla.org/MPL/2.0
22

33
/* Imports:
4-
* - app.scss -> b/mixins.scss -> variables.scss -> cssaux.scss
4+
* - app.scss -> b/mixins.scss -> theme.scss -> cssaux.scss
55
* - app.scss -> scrollbar.scss
66
*/
77
@import 'b/mixins.scss';

‎ebeast/b/mixins.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
// This Source Code Form is licensed MPL-2.0: http://mozilla.org/MPL/2.0
22

33
// == Scss Theme Basics ==
4-
@import '../variables.scss';
4+
@import '../theme.scss';
55

66
// == Variables ==
7-
// Only put *!default* definitions here, so `variables.scss` takes precedence.
7+
// Only put *!default* definitions here, so `theme.scss` takes precedence.
88

99
// theme basics
1010
$b-theme-font-family: $b-main-font-family;

‎ebeast/cssaux.scss

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,3 +20,121 @@ $device-pixel-ratio: var(--device-pixel-ratio);
2020
@function dppx($n: 1) {
2121
@return calc(1px * #{$n} / #{$device-pixel-ratio});
2222
}
23+
24+
/// Clamp `$number` between `$min` and `$max`
25+
@function clamp($number, $min, $max) {
26+
@return min(max($number, $min), $max);
27+
}
28+
29+
// Raises `$base` to the power of `$exponent` which must be a positive integer
30+
@function ipow($base, $exponent) {
31+
@if not unitless($base) {
32+
@error "Error: $base must be unitless:" $base;
33+
}
34+
@if $exponent < 1 {
35+
@return 1;
36+
}
37+
$val: $base;
38+
@while $exponent > 1 {
39+
$val: $val * $base;
40+
$exponent: $exponent - 1;
41+
}
42+
@return $val;
43+
}
44+
@if ipow(12345, 0) != 1 {
45+
@error "FAIL: ipow(12345, 0):" ipow(12345, 0);
46+
}
47+
@if ipow(2, 8) != 256 {
48+
@error "FAIL: ipow(2, 8) :" ipow(2, 8);
49+
}
50+
51+
/// Convert a percentage number to a factor within 0…1
52+
@function asfactor($f) {
53+
@if (unit($f) == "%") {
54+
$f: $f / 100%;
55+
}
56+
@return $f;
57+
}
58+
59+
/// Reduce luminance by a percentage
60+
@function darker($col, $f: 10%) {
61+
// decrease luminance by a percentage, also work around luminance==0 -> 0
62+
$lum: max(0.0000001, chromatic-color-luminance($col) * (1 - asfactor($f)));
63+
@return chromatic-color-luminance($col, $lum, 'lab');
64+
}
65+
66+
/// Increase luminance by a percentage
67+
@function lighter($col, $f: 10%) {
68+
// increase luminance by a percentage, also work around luminance==0 -> 0
69+
$lum: max(0.0000001, chromatic-color-luminance($col) * (1 + asfactor($f)));
70+
@return chromatic-color-luminance($col, $lum, 'lab');
71+
}
72+
73+
/// Black/grey/white by perceptible lightness (CIE L*)
74+
// https://en.wikipedia.org/wiki/CIELAB_color_space
75+
@function lgrey($l: 50%) {
76+
@return chromatic-color-set(#ffffff, 'lab.l', 100 * asfactor($l));
77+
}
78+
79+
/// Adjust color `$col` to a specific perceptible lightness (CIE L*)
80+
@function lcolor($col, $l: 100%) {
81+
@return chromatic-color-set($col, 'lab.l', 100 * asfactor($l));
82+
}
83+
84+
/// Lighten `$color` until a target contrast ratio is met.
85+
@function contrast-lighten($color, $targetratio: 1, $pivot: 'SAME') {
86+
@if (unit($targetratio) == "%") {
87+
$targetratio: $targetratio / 100% * 21;
88+
}
89+
@if $pivot == 'SAME' {
90+
$pivot: $color;
91+
}
92+
$targetratio: max(1, min(21, $targetratio));
93+
$lnext: chromatic-color-luminance($color);
94+
$new: $color;
95+
$currentratio: chromatic-contrast($pivot, $new);
96+
@while $currentratio < $targetratio and $lnext < 1 {
97+
$delta: max(0.000379, ($targetratio - $currentratio) / 21 / 2);
98+
$lnext: $lnext + $delta;
99+
$new: chromatic-color-luminance($color, max(0.0001, $lnext));
100+
$currentratio: chromatic-contrast($pivot, $new);
101+
}
102+
@return $new;
103+
}
104+
@if contrast-lighten(#000000, 1.006) != #010101 {
105+
@error "FAIL: contrast-lighten(#000000, 1.006):" contrast-lighten(#000000, 1.006);
106+
}
107+
@if contrast-lighten(#000000, 1.0075) != #020202 {
108+
@error "FAIL: contrast-lighten($start, 1.0075):" contrast-lighten($start, 1.0075);
109+
}
110+
@if contrast-lighten(#000000, 20.8) != #fefefe {
111+
@error "FAIL: contrast-lighten(#000000, 20.8):" contrast-lighten(#000000, 20.8);
112+
}
113+
114+
/// Darken `$color` until a target contrast ratio is met.
115+
@function contrast-darken($color, $targetratio: 1, $pivot: 'SAME') {
116+
@if (unit($targetratio) == "%") {
117+
$targetratio: $targetratio / 100% * 21;
118+
}
119+
@if $pivot == 'SAME' {
120+
$pivot: $color;
121+
}
122+
$targetratio: clamp($targetratio, 1, 21);
123+
$lnext: chromatic-color-luminance($color);
124+
$new: $color;
125+
$currentratio: chromatic-contrast($pivot, $new);
126+
@while $currentratio < $targetratio and $lnext > 0.00015 {
127+
$delta: clamp(($targetratio - $currentratio) / 21 / 2, 0.00045, $lnext * 0.7);
128+
$lnext: $lnext - $delta;
129+
$new: chromatic-color-luminance($color, max(0.0001, $lnext));
130+
$currentratio: chromatic-contrast($pivot, $new);
131+
}
132+
@return $new;
133+
}
134+
@if contrast-darken(#ffffff, 1.007) != #fefefe {
135+
@error "FAIL: contrast-darken(#ffffff, 1.007):" contrast-darken(#ffffff, 1.007);
136+
}
137+
@if contrast-darken(#ffffff, 20.8) != #010101 {
138+
@error "FAIL: contrast-darken(#ffffff, 20.8):" contrast-darken(#ffffff, 20.8);
139+
// $s:#fff; $t:contrast-darken($s, 20); @debug $s $t chromatic-contrast($t,$s);
140+
}

‎ebeast/fix-vue-ccu.diff

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

‎ebeast/package.json.in

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"@rollup/plugin-json": "^4.1.0",
1717
"@rollup/plugin-node-resolve": "^8.0.1",
1818
"babel-eslint": "^10.1.0",
19+
"chromatic-sass": "^0.1.8",
1920
"eslint": "^5.16.0",
2021
"eslint-plugin-html": "^5.0.5",
2122
"eslint-plugin-vue": "^5.2.3",
@@ -24,7 +25,7 @@
2425
"rollup": "^2.16.1",
2526
"rollup-plugin-babel": "^4.4.0",
2627
"rollup-plugin-scss": "^2.5.0",
27-
"rollup-plugin-vue": "^5.1.4",
28+
"rollup-plugin-vue": "^5.1.9",
2829
"vue-template-compiler": "^2.6.11"
2930
},
3031
"scripts": {

‎ebeast/rollup.config.js

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,19 @@ export default {
1919
// normalizeComponent needs ./node_modules/vue-runtime-helpers/dist/index.mjs import
2020
normalizer: "globalThis['vue-runtime-helpers'].normalizeComponent",
2121
// data: { css: '/* globals... */', }, // increases line numbers in source maps
22+
style: { preprocessOptions: {
23+
scss: {
24+
sass: require ('node-sass'), // supports custom functions
25+
// https://github.com/sass/node-sass#options
26+
sourceMapEmbed: true,
27+
outputStyle: 'nested', // nested, expanded, compact, compressed
28+
sourceComments: false,
29+
functions: require ("chromatic-sass"), // provide node-sass color functions
30+
},
31+
}, },
2232
}),
33+
scss (),
2334
babel(),
24-
scss ({
25-
// https://github.com/thgh/rollup-plugin-scss#options https://github.com/sass/node-sass#options
26-
sourceMapEmbed: true,
27-
sourceComments: true,
28-
outputStyle: 'nested', // nested, expanded, compact, compressed
29-
}),
3035
resolve(),
3136
],
3237
external: [ './jsbse.js', ],

‎ebeast/variables.scss renamed to ‎ebeast/theme.scss

File renamed without changes.

0 commit comments

Comments
 (0)