pacem-less 0.51.4-abel → 0.51.4-babbage

package/pacem/body.less

@@ -2,8 +2,8 @@
 
 &, body {
     font-family: @font_std;
-    background-color: @color_root_background;
-    color: @color_light;
+    background-color: ~"var(--@{PCSS}-color-root)";// @color_root_background;
+    color:~"var(--@{PCSS}-color-default)";//@color_light;
     font-size: @font_size;
 }
 

package/pacem/pacem.less

@@ -152,7 +152,6 @@ html .@{PCSS}-preloader {
 }
 
 @{shell}:root when (@shell_only = false), (@full_theme = true) {
-
     // fonts
     @import "@{fonts}";
 
@@ -183,6 +182,60 @@ html .@{PCSS}-preloader {
     @_size__11: 11px;
     @_size__12: 12px;
 
+    @_colors: root, background, default, invert, primary, secondary, accent, info, success, warning, danger, error, disabled, green, yellow, brown, red, pink, blue, orange, purple, teal, gray;
+
+    & when (@palette_prebuilt = true) {
+
+        --@{PCSS}-prebuilt: true;
+
+        each(@_colors, {
+
+            @_color_var: ~"color_@{value}";
+            @_color_rgb_var: ~"color_@{value}_rgb";
+            @_color_inv_var: ~"color_@{value}_inv";
+            @_color_inv_rgb_var: ~"color_@{value}_inv_rgb";
+            @_color_container_var: ~"color_@{value}_container";
+            @_color_container_rgb_var: ~"color_@{value}_container_rgb";
+            @_color_container_inv_var: ~"color_@{value}_container_inv";
+            @_color_container_inv_rgb_var: ~"color_@{value}_container_inv_rgb";
+            @_color_active_var: ~"color_@{value}_active";
+            @_color_active_rgb_var: ~"color_@{value}_active_rgb";
+            @_color_active_inv_var: ~"color_@{value}_active_inv";
+            @_color_active_inv_rgb_var: ~"color_@{value}_active_inv_rgb";
+            @_color_container_active_var: ~"color_@{value}_container_active";
+            @_color_container_active_rgb_var: ~"color_@{value}_container_active_rgb";
+            @_color_container_active_inv_var: ~"color_@{value}_container_active_inv";
+            @_color_container_active_inv_rgb_var: ~"color_@{value}_container_active_inv_rgb";
+            @_color_emphasis_var: ~"color_@{value}_emphasis";
+            @_color_emphasis_rgb_var: ~"color_@{value}_emphasis_rgb";
+
+            
+        --@{PCSS}-color-@{value}: @@_color_var;
+        --@{PCSS}-color-@{value}-rgb: @@_color_rgb_var;
+        --@{PCSS}-color-@{value}-inverse: @@_color_inv_var;
+        --@{PCSS}-color-@{value}-inverse-rgb: @@_color_inv_rgb_var;
+            
+        --@{PCSS}-color-@{value}-hover: @@_color_active_var;
+        --@{PCSS}-color-@{value}-hover-rgb: @@_color_active_rgb_var;
+        --@{PCSS}-color-@{value}-inverse-hover: @@_color_active_inv_var;
+        --@{PCSS}-color-@{value}-inverse-hover-rgb: @@_color_active_inv_rgb_var;
+            
+        --@{PCSS}-color-@{value}-emphasis-hover: @@_color_emphasis_var;
+        --@{PCSS}-color-@{value}-emphasis-hover-rgb: @@_color_emphasis_rgb_var;
+
+        --@{PCSS}-color-@{value}-container: @@_color_container_var;
+        --@{PCSS}-color-@{value}-container-rgb: @@_color_container_rgb_var;
+        --@{PCSS}-color-@{value}-container-inverse: @@_color_container_inv_var;
+        --@{PCSS}-color-@{value}-container-inverse-rgb: @@_color_container_inv_rgb_var;
+            
+        --@{PCSS}-color-@{value}-container-hover: @@_color_container_active_var;
+        --@{PCSS}-color-@{value}-container-hover-rgb: @@_color_container_active_rgb_var;
+        --@{PCSS}-color-@{value}-container-inverse-hover: @@_color_container_active_inv_var;
+        --@{PCSS}-color-@{value}-container-inverse-hover-rgb: @@_color_container_active_inv_rgb_var;
+        });
+    }
+
+
     @_dark_cont_amount: 70; // how much black to add (background)
     @_dark_on_amount: 60; // how much white to add (foreground)
     @_dark_cont_amount_hover: 15; // how much white to add (background) hover/focus/active state
@@ -203,6 +256,10 @@ html .@{PCSS}-preloader {
         --@{PCSS}-color-@{key}-rgb: @_r, @_g, @_b;
     }
 
+    & when(@palette_prebuilt = false){
+        
+        --@{PCSS}-prebuilt: false;
+
 @__color_background: @color_background;
 @__color_background_inv: @color_default;
 @__color_root: @color_root_background;
@@ -251,8 +308,6 @@ html .@{PCSS}-preloader {
 @__color_gray: @palette_gray;
 @__color_gray_inv: @palette_gray_inv;
 
-@_colors: root, background, default, invert, primary, secondary, accent, info, success, warning, danger, error, disabled, green, yellow, brown, red, pink, blue, orange, purple, teal, gray;
-
 // basic palette
 each(@_colors, {
         
@@ -289,12 +344,13 @@ each(@_colors, {
         .ChannelizeColor(~"@{value}-container-inverse-hover", @_color_container_inv_hover);
 
     });
-
+}
 --@{PCSS}-color-disabled-button: @color_button_back_disabled;
 .ChannelizeColor(disabled-button, @color_button_back_disabled);
 --@{PCSS}-color-disabled-button-inverse: @color_button_fore_disabled;
 .ChannelizeColor(disabled-button-inverse, @color_button_fore_disabled);
 --@{PCSS}-color-border: @color_border;
+
 // spacing + sizing
 --@{PCSS}-grid-cell: @grid_cell;
 --@{PCSS}-grid-spacing: @grid_spacing;

package/pacem/theme-dark.less

@@ -375,6 +375,9 @@
 @easing_out_back_custom: cubic-bezier(0.0, 1.6, 1.0, 0.8);
 @easing_out_bump: cubic-bezier(0.0, 1.6, 0.0, 1.0);
 
+// programmatically built palette
+@import "palette-dark";
+
 .Background(@clr_bg) {
     .Background();
     background-color: @clr_bg;

package/pacem/theme-light.less

@@ -114,3 +114,6 @@
 /*.FormFieldItemBorders() {
     border: @border_field_size solid;
 }*/
+
+// programmatically built palette
+@import "palette-light";

package/pacem/theme-phousys.less

@@ -45,6 +45,7 @@
 /*#endregion*/
 @color_background: @color_blue;
 @color_root_background: @color_background;
+@color_root: @color_background;
 @color_default: #fff; // @color_light;
 @color_title_inv: #1b2733;
 @color_title: #4fd1d9; // #317396;

package/pacem/ui/dark/loader.less

@@ -209,10 +209,9 @@
     }
 }
 
-.@{PCSS}-preloader{
+.@{PCSS}-preloader {
     // background
-    .GradientRadial(0%, 50%, @color_background, @color_root_background);
-    background-color: @color_root_background;
+    .GradientRadial(0%, 50%, ~"var(--@{PCSS}-color-background)", ~"var(--@{PCSS}-color-root)");
+    background-color: ~"var(--@{PCSS}-color-root)";
     background-size: contain;
-
 }

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.51.4-abel",
+  "version": "0.51.4-babbage",
   "name": "pacem-less",
   "homepage": "https://js.pacem.it",
   "repository": {
@@ -13,6 +13,7 @@
     "README.md",
     "LICENSE",
     "NOTICE",
+    "themebuilder.js",
     "package.json"
   ],
   "author": {

package/shared.less

@@ -10,6 +10,7 @@
 @semantic_colors: root, background, default, invert, primary, secondary, accent, info, success, warning, danger, error, disabled;
 @all_colors: root, background, default, invert, primary, secondary, accent, info, success, warning, danger, error, disabled, green, yellow, brown, red, pink, blue, orange, purple, teal, gray;
 
+@palette_prebuilt: false;
 
 .Ellipsed(@max-width) {
     white-space: nowrap;

package/themebuilder.js

@@ -0,0 +1,224 @@
+const fs = require('fs');
+const vm = require('vm');
+const path = require('path');
+const yargs = require('yargs');
+const argv = yargs
+    .option('theme', {
+    alias: 't',
+    type: 'string',
+    description: 'Theme (dark or light)',
+})
+    .option('name', {
+    alias: 'n',
+    type: 'string',
+    description: 'Theme name',
+})
+    .option('src', {
+    alias: 's',
+    type: 'string',
+    description: 'Palette file containing the color variables in JSON format.',
+})
+    .option('out', {
+    alias: 'o',
+    type: 'string',
+    description: 'Output file (overrides name option).',
+})
+    .option('pacemjs', {
+    type: 'string',
+    description: 'PacemJS javascript files folder.',
+})
+    .option('void', {
+    type: 'string',
+    description: 'Creates an empty palette file.',
+})
+    .help()
+    .argv;
+const darkTheme = argv.theme === 'dark';
+const themeName = argv.name ?? (darkTheme ? 'dark' : 'light');
+function include(filename) {
+    const code = fs.readFileSync(filename, 'utf-8');
+    vm.runInThisContext(code, filename);
+}
+function importScripts(filepath) {
+    include(filepath);
+}
+function absolutePath(relativePath) {
+    return path.join(__dirname, relativePath);
+}
+const pjs = argv.pacemjs ?? absolutePath("../../dist/js");
+importScripts(path.join(pjs, "pacem-foundation.js"));
+importScripts(path.join(pjs, "pacem-numerical.js"));
+function readFile(src) {
+    if (src == null) {
+        return null;
+    }
+    const json = fs.readFileSync(src, 'utf-8');
+    return JSON.parse(json);
+}
+const palette = readFile(argv.src) ?? {
+    background: '#1e2336',
+    primary: '#429bbb',
+    secondary: '#5e7881',
+    accent: '#ff0085',
+    success: '#4dc2b4',
+    warning: '#c5c023',
+    error: '#BF215B',
+    danger: '#fa1f1f',
+    info: '#99d4ff',
+    green: '#1ebb8f',
+    yellow: '#c2b010',
+    brown: '#a6715e',
+    red: '#dd2020',
+    pink: '#ff0085',
+    blue: '#116e8b',
+    orange: '#d46d00',
+    purple: '#624472',
+    teal: '#429bbb',
+    gray: '#808080',
+};
+const WCAG_MINIMUM_CONTRAST = 3;
+const WCAG_NORMAL_TEXT_CONTRAST = 4.5;
+const WCAG_SAFE_CONTRAST = 7;
+const WCAG_MAX_CONTRAST = 17;
+const SURFACE_LIGHT = .95;
+const SURFACE_DARK = .02;
+const MIN_SATURATION = .175;
+const searchFn = Pacem.Mathematics.DataAnalysis.SearchFunctions.goldenRatio;
+function isColorLight(clr) {
+    return Pacem.Colors.luminance(clr) >= .2;
+}
+function contrastColor(baseColor, targetContrast = WCAG_NORMAL_TEXT_CONTRAST) {
+    const { h, s, l, a } = Pacem.Colors.hsl(baseColor);
+    const isDark = !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 })));
+    return Pacem.Colors.rgb({ h, s, l: newL, a });
+}
+function luminanceColor(baseColor, targetLuminance) {
+    const { h, s, a } = Pacem.Colors.hsl(baseColor);
+    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 colorModule(clr, name, arg2) {
+    const isDisabled = name === 'disabled';
+    const isSurfaceColor = name === 'root' || name === 'background' || isDisabled;
+    const isDesaturated = isDisabled || name === 'gray';
+    const forcedContrast = (arg2 && typeof arg2 === 'number') ? arg2 : (isDisabled ? 1.7 : 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;
+    const isColorRight = isSurfaceColor ? (darkTheme ? Pacem.Colors.luminance(clr) <= SURFACE_DARK : Pacem.Colors.luminance(clr) >= surfaceLight)
+        : isColorLight(clr) === darkTheme;
+    const darkTargetLuminance = isDisabled ? (SURFACE_DARK + .02) : (isSurfaceColor ? SURFACE_DARK : .175);
+    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)));
+    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 });
+        }
+    }
+    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 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);
+    const containerActive = isDisabled ? container : luminanceColor(container, Pacem.Colors.luminance(container) + luminanceBackActiveOffset);
+    const containerActiveContrast = contrastColor(containerActive, contrastForeActive);
+    const emphasis = isDesaturated ? Pacem.Colors.lighten(actualColor, .1) : Pacem.Colors.saturate(actualColor, 1.2);
+    return {
+        base: actualColor,
+        contrast,
+        active,
+        activeContrast,
+        containerActive,
+        container,
+        emphasis,
+        containerActiveContrast,
+        containerContrast
+    };
+}
+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) => {
+    lessVariables[`@color_${name}`] = Pacem.Colors.stringify(mod.base);
+    lessVariables[`@color_${name}_rgb`] = a255s(mod.base);
+    lessVariables[`@color_${name}_inv`] = Pacem.Colors.stringify(mod.contrast);
+    lessVariables[`@color_${name}_inv_rgb`] = a255s(mod.contrast);
+    lessVariables[`@color_${name}_container`] = Pacem.Colors.stringify(mod.container);
+    lessVariables[`@color_${name}_container_rgb`] = a255s(mod.container);
+    lessVariables[`@color_${name}_container_inv`] = Pacem.Colors.stringify(mod.containerContrast);
+    lessVariables[`@color_${name}_container_inv_rgb`] = a255s(mod.containerContrast);
+    lessVariables[`@color_${name}_active`] = Pacem.Colors.stringify(mod.active);
+    lessVariables[`@color_${name}_active_rgb`] = a255s(mod.active);
+    lessVariables[`@color_${name}_active_inv`] = Pacem.Colors.stringify(mod.activeContrast);
+    lessVariables[`@color_${name}_active_inv_rgb`] = a255s(mod.activeContrast);
+    lessVariables[`@color_${name}_container_active`] = Pacem.Colors.stringify(mod.containerActive);
+    lessVariables[`@color_${name}_container_active_rgb`] = a255s(mod.containerActive);
+    lessVariables[`@color_${name}_container_active_inv`] = Pacem.Colors.stringify(mod.containerActiveContrast);
+    lessVariables[`@color_${name}_container_active_inv_rgb`] = a255s(mod.containerActiveContrast);
+    lessVariables[`@color_${name}_emphasis`] = Pacem.Colors.stringify(mod.emphasis);
+    lessVariables[`@color_${name}_emphasis_rgb`] = a255s(mod.emphasis);
+};
+for (let name in palette) {
+    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`];
+    }
+}
+let lessText = '@palette_prebuilt: true;\r\n';
+for (let name in lessVariables) {
+    const hex = lessVariables[name];
+    lessText += `${name}: ${hex};\r\n`;
+}
+const target = argv.out ?? absolutePath('./pacem/palette-' + themeName + '.less');
+if (!Pacem.NullChecker.isNull(argv.void)) {
+    lessText = '';
+}
+fs.writeFileSync(target, lessText);