pacem-less 0.51.4-babbage → 0.51.4-boole

package/package.json

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

package/themebuilder.js

@@ -30,6 +30,10 @@ 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).',
 })
     .help()
     .argv;
@@ -55,7 +59,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 +79,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 = 15;
+const WCAG_DISABLED_CONTRAST = 1.8;
 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) {
@@ -102,9 +112,9 @@ function luminanceColor(baseColor, targetLuminance) {
 }
 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,7 +124,7 @@ 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);
@@ -126,7 +136,7 @@ function colorModule(clr, name, arg2) {
     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 container = isSurfaceColor ? luminanceColor(actualColor, luminanceBackContainer) : contrastColor(actualColor, backgroundModule.base, WCAG_MINIMUM_CONTRAST);
     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 +156,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) => {
@@ -187,8 +195,9 @@ if (!('root' in palette)) {
     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'));
+    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 (!('default' in palette)) {
     for (let name of ['default', 'invert']) {