pacem-less 0.51.4-babbage → 0.51.4-cantor

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.51.4-babbage",
+  "version": "0.51.4-cantor",
   "name": "pacem-less",
   "homepage": "https://js.pacem.it",
   "repository": {

package/themebuilder.js

@@ -30,6 +30,14 @@ const argv = yargs
     .option('void', {
     type: 'string',
     description: 'Creates an empty palette file.',
+})
+    .option('mincontrast', {
+    type: 'number',
+    description: 'The minimum WCAG contrast (1 to 21) container-to-background (default 1.5).',
+})
+    .option('maxcontrast', {
+    type: 'number',
+    description: 'The maximum WCAG contrast (1 to 21) default-to-background (default 15).',
 })
     .help()
     .argv;
@@ -55,7 +63,7 @@ function readFile(src) {
     const json = fs.readFileSync(src, 'utf-8');
     return JSON.parse(json);
 }
-const palette = readFile(argv.src) ?? {
+const palette = Object.assign({
     background: '#1e2336',
     primary: '#429bbb',
     secondary: '#5e7881',
@@ -75,24 +83,30 @@ const palette = readFile(argv.src) ?? {
     purple: '#624472',
     teal: '#429bbb',
     gray: '#808080',
-};
-const WCAG_MINIMUM_CONTRAST = 3;
+}, readFile(argv.src) ?? {});
+const WCAG_MINIMUM_CONTRAST = argv.mincontrast ?? 1.5;
 const WCAG_NORMAL_TEXT_CONTRAST = 4.5;
 const WCAG_SAFE_CONTRAST = 7;
-const WCAG_MAX_CONTRAST = 17;
+const WCAG_MAX_CONTRAST = argv.maxcontrast ?? 15;
+const WCAG_DISABLED_CONTRAST = 1.6;
 const SURFACE_LIGHT = .95;
 const SURFACE_DARK = .02;
 const MIN_SATURATION = .175;
 const searchFn = Pacem.Mathematics.DataAnalysis.SearchFunctions.goldenRatio;
+let backgroundModule;
+let rootModule;
 function isColorLight(clr) {
     return Pacem.Colors.luminance(clr) >= .2;
 }
-function contrastColor(baseColor, targetContrast = WCAG_NORMAL_TEXT_CONTRAST) {
+function contrastColor(baseColor, arg1 = baseColor, arg2 = WCAG_NORMAL_TEXT_CONTRAST, arg3 = null) {
+    const benchmarkColor = typeof arg1 === 'object' ? arg1 : baseColor;
+    const targetContrast = typeof arg1 === 'number' ? arg1 : (typeof arg2 === 'number' ? arg2 : WCAG_NORMAL_TEXT_CONTRAST);
+    const preferDark = typeof arg2 === 'boolean' ? arg2 : arg3;
     const { h, s, l, a } = Pacem.Colors.hsl(baseColor);
-    const isDark = !isColorLight(baseColor);
+    const isDark = preferDark ?? !isColorLight(baseColor);
     const min = isDark ? l : 0;
     const max = isDark ? 1 : l;
-    const newL = searchFn(min, max, x => Math.abs(targetContrast - Pacem.Colors.contrastRatio(baseColor, { h, s, l: x, a })));
+    const newL = searchFn(min, max, x => Math.abs(targetContrast - Pacem.Colors.contrastRatio(benchmarkColor, { h, s, l: x, a })));
     return Pacem.Colors.rgb({ h, s, l: newL, a });
 }
 function luminanceColor(baseColor, targetLuminance) {
@@ -100,11 +114,32 @@ function luminanceColor(baseColor, targetLuminance) {
     const newL = searchFn(0, 1, x => Math.abs(targetLuminance - Pacem.Colors.luminance({ h, s, l: x, a })));
     return Pacem.Colors.rgb({ h, s, l: newL, a });
 }
+function invertModule(mod) {
+    return {
+        base: mod.contrast,
+        contrast: mod.base,
+        active: mod.activeContrast,
+        activeContrast: mod.active,
+        emphasis: mod.base,
+        container: mod.containerContrast,
+        containerContrast: mod.container,
+        containerActive: mod.containerActiveContrast,
+        containerActiveContrast: mod.containerActive,
+    };
+}
+function desaturateColor(clr, threshold = MIN_SATURATION) {
+    const { h, s, l, a } = Pacem.Colors.hsl(clr);
+    if (s > threshold) {
+        return Pacem.Colors.rgb({ h, s: threshold, l, a });
+    }
+    else
+        return clr;
+}
 function colorModule(clr, name, arg2) {
     const isDisabled = name === 'disabled';
-    const isSurfaceColor = name === 'root' || name === 'background' || isDisabled;
+    const isSurfaceColor = name === 'root' || name === 'background';
     const isDesaturated = isDisabled || name === 'gray';
-    const forcedContrast = (arg2 && typeof arg2 === 'number') ? arg2 : (isDisabled ? 1.7 : null);
+    const forcedContrast = (arg2 && typeof arg2 === 'number') ? arg2 : (isDisabled ? WCAG_DISABLED_CONTRAST : null);
     const baseContrast = forcedContrast ?? (isSurfaceColor ? WCAG_MAX_CONTRAST : WCAG_SAFE_CONTRAST);
     const contrastClr = arg2 && typeof arg2 === 'object' ? arg2 : null;
     const surfaceLight = name === 'background' ? SURFACE_LIGHT + .015 : SURFACE_LIGHT;
@@ -114,19 +149,19 @@ function colorModule(clr, name, arg2) {
     const lightTargetLuminance = isDisabled ? (surfaceLight - .1) : (isSurfaceColor ? surfaceLight : .333);
     const referenceColor = isColorRight ? clr
         : (isSurfaceColor ? (!darkTheme ? luminanceColor(clr, lightTargetLuminance) : luminanceColor(clr, darkTargetLuminance))
-            : (darkTheme ? luminanceColor(clr, lightTargetLuminance) : luminanceColor(clr, darkTargetLuminance)));
+            : contrastColor(clr, backgroundModule.base, WCAG_NORMAL_TEXT_CONTRAST, darkTheme));
     let actualColor = contrastClr ? clr : referenceColor;
     if (isDesaturated) {
-        const { h, s, l, a } = Pacem.Colors.hsl(actualColor);
-        if (s > MIN_SATURATION) {
-            actualColor = Pacem.Colors.rgb({ h, s: MIN_SATURATION, l, a });
-        }
+        actualColor = desaturateColor(actualColor);
     }
     const luminanceBackContainer = darkTheme ? .075 : .5;
     const luminanceBackActiveOffset = darkTheme ? (isSurfaceColor ? .035 : .1) : (isSurfaceColor ? -.08 : -.06);
     const contrastForeActive = forcedContrast ?? WCAG_SAFE_CONTRAST;
     const contrast = contrastClr ?? contrastColor(actualColor, baseContrast);
-    const container = luminanceColor(actualColor, luminanceBackContainer);
+    const containerTargetContrast = (isDisabled ? Math.min(forcedContrast, .5 * (1 + WCAG_MINIMUM_CONTRAST)) : WCAG_MINIMUM_CONTRAST).roundoff();
+    const containerBenchmarkColor = isSurfaceColor ? actualColor : backgroundModule.base;
+    const container = contrastColor(actualColor, containerBenchmarkColor, containerTargetContrast, !(+isSurfaceColor ^ +darkTheme));
+    console.log(name + ' container yields ' + Pacem.Colors.stringify(container) + ', which should contrast ' + containerTargetContrast + ' with ' + Pacem.Colors.stringify(containerBenchmarkColor));
     const containerContrast = contrastColor(container, isDisabled ? forcedContrast : WCAG_NORMAL_TEXT_CONTRAST);
     const active = isDisabled ? actualColor : luminanceColor(actualColor, Pacem.Colors.luminance(actualColor) + luminanceBackActiveOffset);
     const activeContrast = isDisabled ? contrast : contrastColor(active, contrastForeActive);
@@ -146,8 +181,6 @@ function colorModule(clr, name, arg2) {
     };
 }
 const lessVariables = {};
-let backgroundModule;
-let rootModule;
 const a255 = (x) => Math.round(x * 255);
 const a255s = (c) => `${a255(c.r)}, ${a255(c.g)}, ${a255(c.b)}`;
 const pushLessVariables = (name, mod) => {
@@ -170,47 +203,35 @@ const pushLessVariables = (name, mod) => {
     lessVariables[`@color_${name}_emphasis`] = Pacem.Colors.stringify(mod.emphasis);
     lessVariables[`@color_${name}_emphasis_rgb`] = a255s(mod.emphasis);
 };
+const backgroundColor = Pacem.Colors.parse(palette['background']);
+backgroundModule = colorModule(backgroundColor, 'background');
+pushLessVariables('background', backgroundModule);
+const rootColor = 'root' in palette ? Pacem.Colors.parse(palette['root']) : Pacem.Colors.darken(backgroundModule.base, darkTheme ? .02 : .01);
+rootModule = colorModule(rootColor, 'root');
+pushLessVariables('root', rootModule);
+if ('default' in palette) {
+    const defaultColor = contrastColor(desaturateColor(Pacem.Colors.parse(palette['default'])), rootModule.base, WCAG_MAX_CONTRAST, darkTheme);
+    const defaultModule = colorModule(defaultColor, 'default');
+    pushLessVariables('default', defaultModule);
+}
+else {
+    pushLessVariables('default', invertModule(rootModule));
+}
 for (let name in palette) {
+    if (['default', 'background', 'root'].indexOf(name) >= 0) {
+        continue;
+    }
     const color = Pacem.Colors.parse(palette[name]);
     const mod = colorModule(color, name);
-    if (name === 'background') {
-        backgroundModule = mod;
-    }
-    if (name === 'root') {
-        rootModule = mod;
-    }
     pushLessVariables(name, mod);
 }
-if (!('root' in palette)) {
-    const rootColor = Pacem.Colors.darken(backgroundModule.base, darkTheme ? .02 : .01);
-    rootModule = colorModule(rootColor, 'root');
-    pushLessVariables('root', rootModule);
-}
 if (!('disabled' in palette)) {
-    const disabledColor = darkTheme ? Pacem.Colors.lighten(backgroundModule.base, .04) : Pacem.Colors.darken(backgroundModule.base, .085);
-    pushLessVariables('disabled', colorModule(disabledColor, 'disabled'));
-}
-if (!('default' in palette)) {
-    for (let name of ['default', 'invert']) {
-        lessVariables[`@color_${name}`] = Pacem.Colors.stringify(rootModule.contrast);
-        lessVariables[`@color_${name}_rgb`] = a255s(rootModule.contrast);
-        lessVariables[`@color_${name}_inv`] = Pacem.Colors.stringify(rootModule.base);
-        lessVariables[`@color_${name}_inv_rgb`] = a255s(rootModule.base);
-        lessVariables[`@color_${name}_container`] = Pacem.Colors.stringify(rootModule.containerContrast);
-        lessVariables[`@color_${name}_container_rgb`] = a255s(rootModule.containerContrast);
-        lessVariables[`@color_${name}_container_inv`] = Pacem.Colors.stringify(rootModule.container);
-        lessVariables[`@color_${name}_container_inv_rgb`] = a255s(rootModule.container);
-        lessVariables[`@color_${name}_active`] = Pacem.Colors.stringify(rootModule.activeContrast);
-        lessVariables[`@color_${name}_active_rgb`] = a255s(rootModule.activeContrast);
-        lessVariables[`@color_${name}_active_inv`] = Pacem.Colors.stringify(rootModule.active);
-        lessVariables[`@color_${name}_active_inv_rgb`] = a255s(rootModule.active);
-        lessVariables[`@color_${name}_container_active`] = Pacem.Colors.stringify(rootModule.containerActiveContrast);
-        lessVariables[`@color_${name}_container_active_rgb`] = a255s(rootModule.containerActiveContrast);
-        lessVariables[`@color_${name}_container_active_inv`] = Pacem.Colors.stringify(rootModule.containerActive);
-        lessVariables[`@color_${name}_container_active_inv_rgb`] = a255s(rootModule.containerActive);
-        lessVariables[`@color_${name}_emphasis`] = lessVariables[`@color_${name}`];
-        lessVariables[`@color_${name}_emphasis_rgb`] = lessVariables[`@color_${name}_rgb`];
-    }
+    const disabledColor = contrastColor(backgroundModule.base, WCAG_DISABLED_CONTRAST);
+    const disabledContrastColor = contrastColor(disabledColor, WCAG_DISABLED_CONTRAST * (darkTheme ? 1 : .9), !darkTheme);
+    pushLessVariables('disabled', colorModule(disabledColor, 'disabled', disabledContrastColor));
+}
+if (!('invert' in palette)) {
+    pushLessVariables('invert', invertModule(backgroundModule));
 }
 let lessText = '@palette_prebuilt: true;\r\n';
 for (let name in lessVariables) {