@pacem/pacem-theme-less 1.0.0-amaldi

package/shared.less

@@ -0,0 +1,161 @@
+
+@font_icons_apiurl: e("");
+@font_std_apiurl: e("");
+@font_tech_apiurl: e("");
+@font_main_apiurl: e("");
+@font_btn_apiurl: e("");
+@material_symbols_font: ~"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200";
+
+@palette_colors: green, yellow, brown, red, pink, blue, orange, purple, teal, gray;
+@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;
+    overflow: hidden;
+    -ms-text-overflow: ellipsis;
+    -o-text-overflow: ellipsis;
+    text-overflow: ellipsis;
+    max-width: @max-width;
+}
+
+.Inert() {
+    pointer-events: none !important;
+    display: none !important;
+}
+
+.Blur(@radius) {
+    -webkit-backdrop-filter: blur(@radius);
+    backdrop-filter: blur(@radius);
+}
+
+.Blur(@radius, @bgcolor) {
+    background-color: fade(@bgcolor, 50);
+    .Blur(@radius);
+}
+
+.Grayscale() {
+    filter: grayscale(100%);
+}
+
+/*.Corners(@clr) {
+    .Corners(@clr, 0);
+}
+
+.Corners(@clr, @sz) {
+    .Corners(@clr, @sz, 6px);
+}*/
+
+.Corners(@clr, @roundsz, @defaultsz) {
+    @brd2: rgba(red(@clr), green(@clr), blue(@clr), min(.99, alpha(@clr)));
+    @strk: 2;
+    @render: 'geometricPrecision'; /*'crispEdges';*/
+
+    &when(@roundsz = 0) {
+        // straight corner
+        @sz2: unit(@defaultsz);
+        background-size: unit(@sz2, px);
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='@{sz2}' height='@{sz2}' viewBox='0 0 @{sz2} @{sz2}'%3E%3Cpath shape-rendering='@{render}' stroke='@{brd2}' fill='transparent' stroke-width='@{strk}' d='M0,@{sz2} V0 H@{sz2}'%3E%3C/path%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='@{sz2}' height='@{sz2}' viewBox='0 0 @{sz2} @{sz2}'%3E%3Cpath shape-rendering='@{render}' stroke='@{brd2}' fill='transparent' stroke-width='@{strk}' d='M0,0 H@{sz2} V@{sz2}'%3E%3C/path%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='@{sz2}' height='@{sz2}' viewBox='0 0 @{sz2} @{sz2}'%3E%3Cpath shape-rendering='@{render}' stroke='@{brd2}' fill='transparent' stroke-width='@{strk}' d='M@{sz2},0 V@{sz2} H0'%3E%3C/path%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='@{sz2}' height='@{sz2}' viewBox='0 0 @{sz2} @{sz2}'%3E%3Cpath shape-rendering='@{render}' stroke='@{brd2}' fill='transparent' stroke-width='@{strk}' d='M@{sz2},@{sz2} H0 V0'%3E%3C/path%3E%3C/svg%3E");
+    }
+
+    &when(@roundsz > 0) {
+        // arc
+        @sz2: unit(@roundsz);
+        background-size: unit(@sz2, px);
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='@{sz2}' height='@{sz2}' viewBox='0 0 @{sz2} @{sz2}'%3E%3Cpath shape-rendering='@{render}' stroke='@{brd2}' fill='transparent' stroke-width='@{strk}' d='M0,@{sz2} a@{sz2},@{sz2} 0 0,1 @{sz2},-@{sz2}'%3E%3C/path%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='@{sz2}' height='@{sz2}' viewBox='0 0 @{sz2} @{sz2}'%3E%3Cpath shape-rendering='@{render}' stroke='@{brd2}' fill='transparent' stroke-width='@{strk}' d='M0,0 a@{sz2},@{sz2} 0 0,1 @{sz2},@{sz2}'%3E%3C/path%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='@{sz2}' height='@{sz2}' viewBox='0 0 @{sz2} @{sz2}'%3E%3Cpath shape-rendering='@{render}' stroke='@{brd2}' fill='transparent' stroke-width='@{strk}' d='M@{sz2},0 a@{sz2},@{sz2} 0 0,1 -@{sz2},@{sz2}'%3E%3C/path%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='@{sz2}' height='@{sz2}' viewBox='0 0 @{sz2} @{sz2}'%3E%3Cpath shape-rendering='@{render}' stroke='@{brd2}' fill='transparent' stroke-width='@{strk}' d='M@{sz2},@{sz2} a@{sz2},@{sz2} 0 0,1 -@{sz2},-@{sz2}'%3E%3C/path%3E%3C/svg%3E");
+    }
+
+    background-position: top left, top right, bottom right, bottom left;
+    background-repeat: no-repeat;
+    background-origin: border-box;
+
+    &.corners-safe {
+        // margin to avoid corners disappearing
+        margin: 1px;
+    }
+}
+
+.GradientBorderVertical(@size, @from, @to, @color1, @color2) {
+    border-image: linear-gradient(to bottom, @color1 @from,@color2 @to) @size;
+}
+
+.GradientVertical(@from, @to, @color1, @color2) {
+    background: @color2;
+    background: -moz-linear-gradient(top, @color1 @from, @color2 @to);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(@from,@color1), color-stop(@to,@color2));
+    background: -webkit-linear-gradient(top, @color1 @from,@color2 @to);
+    background: -o-linear-gradient(top, @color1 @from,@color2 @to);
+    background: -ms-linear-gradient(top, @color1 @from,@color2 @to);
+    background: linear-gradient(to bottom, @color1 @from,@color2 @to);
+}
+
+.GradientVertical(@color1, @color2, @img) {
+    background: @color2;
+    background-image: url(@img); /* fallback */
+    background-image: url(@img), -webkit-gradient(linear, left top, left bottom, from(@color1), to(@color2)); /* Saf4+, Chrome */
+    background-image: url(@img), -webkit-linear-gradient(top, @color1, @color2); /* Chrome 10+, Saf5.1+ */
+    background-image: url(@img), -moz-linear-gradient(top, @color1, @color2); /* FF3.6+ */
+    background-image: url(@img), -ms-linear-gradient(top, @color1, @color2); /* IE10 */
+    background-image: url(@img), -o-linear-gradient(top, @color1, @color2); /* Opera 11.10+ */
+    background-image: url(@img), linear-gradient(to bottom, @color1, @color2);
+}
+
+.GradientVertical(@step1, @step2, @step3, @color1, @color2, @color3) {
+    background: @color2;
+    background: -moz-linear-gradient(top, @color1 @step1, @color2 @step2, @color3 @step3);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(@step1,@color1), color-stop(@step2,@color2), color-stop(@step3,@color3));
+    background: -webkit-linear-gradient(top, @color1 @step1,@color2 @step2,@color3 @step3);
+    background: -o-linear-gradient(top, @color1 @step1,@color2 @step2,@color3 @step3);
+    background: -ms-linear-gradient(top, @color1 @step1,@color2 @step2,@color3 @step3);
+    background: linear-gradient(to bottom, @color1 @step1,@color2 @step2,@color3 @step3);
+}
+
+.GradientVertical(@step1, @step2, @step3, @step4, @color1, @color2, @color3, @color4) {
+    background: @color2;
+    background: -moz-linear-gradient(top, @color1 @step1, @color2 @step2, @color3 @step3, @color4 @step4);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(@step1,@color1), color-stop(@step2,@color2), color-stop(@step3,@color3), color-stop(@step4,@color4));
+    background: -webkit-linear-gradient(top, @color1 @step1,@color2 @step2,@color3 @step3,@color4 @step4);
+    background: -o-linear-gradient(top, @color1 @step1,@color2 @step2,@color3 @step3,@color4 @step4);
+    background: -ms-linear-gradient(top, @color1 @step1,@color2 @step2,@color3 @step3,@color4 @step4);
+    background: linear-gradient(to bottom, @color1 @step1,@color2 @step2,@color3 @step3,@color4 @step4);
+}
+
+.GradientVertical(@color1, @color2) {
+    .GradientVertical(0, 100%, @color1, @color2);
+}
+
+.GradientHorizontal(@step1, @step2, @step3, @step4, @color1, @color2, @color3, @color4) {
+    background: @color2;
+    background: -moz-linear-gradient(left, @color1 @step1, @color2 @step2, @color3 @step3, @color4 @step4);
+    background: -webkit-gradient(linear, left top, right top, color-stop(@step1,@color1), color-stop(@step2,@color2), color-stop(@step3,@color3), color-stop(@step4,@color4));
+    background: -webkit-linear-gradient(left, @color1 @step1,@color2 @step2,@color3 @step3,@color4 @step4);
+    background: -o-linear-gradient(left, @color1 @step1,@color2 @step2,@color3 @step3,@color4 @step4);
+    background: -ms-linear-gradient(left, @color1 @step1,@color2 @step2,@color3 @step3,@color4 @step4);
+    background: linear-gradient(to right, @color1 @step1,@color2 @step2,@color3 @step3,@color4 @step4);
+}
+
+.GradientRadial(@from, @to, @color1, @color2) {
+    background: @color1;
+    background: -moz-radial-gradient(center, ellipse cover, @color1 @from, @color2 @to);
+    background: -webkit-gradient(radial, center center, 0, center center, 100%, color-stop(@from,@color1), color-stop(@to,@color2));
+    background: -webkit-radial-gradient(center, ellipse cover, @color1 @from,@color2 @to);
+    background: -o-radial-gradient(center, ellipse cover, @color1 @from,@color2 @to);
+    background: -ms-radial-gradient(center, ellipse cover, @color1 @from,@color2 @to);
+    background: radial-gradient(ellipse at center, @color1 @from,@color2 @to);
+}
+
+.GradientRadial(@from, @to, @color1, @color2, @img) {
+    background-image: url(@img); /* fallback */
+    background-image: url(@img), -moz-radial-gradient(center, ellipse cover, @color1 @from, @color2 @to);
+    background-image: url(@img), -webkit-gradient(radial, center center, 0, center center, 100%, color-stop(@from,@color1), color-stop(@to,@color2));
+    background-image: url(@img), -webkit-radial-gradient(center, ellipse cover, @color1 @from,@color2 @to);
+    background-image: url(@img), -o-radial-gradient(center, ellipse cover, @color1 @from,@color2 @to);
+    background-image: url(@img), -ms-radial-gradient(center, ellipse cover, @color1 @from,@color2 @to);
+    background-image: url(@img), radial-gradient(ellipse at center, @color1 @from,@color2 @to);
+}
+
+.GradientRadialContain( @step1, @step2, @step3, @step4, @step5, @step6,@step7, @step8, @step9, @step10, @color1, @color2, @color3,@color4, @color5, @color6,@color7, @color8, @color9, @color10) {
+    background: radial-gradient(circle closest-side, @color1 @step1, @color2 @step2, @color3 @step3, @color4 @step4, @color5 @step5, @color6 @step6, @color7 @step7, @color8 @step8, @color9 @step9, @color10 @step10);
+}

package/theme-empty.less

@@ -0,0 +1,116 @@
+/* #region VARIABLES*/
+
+@grid_cell: 76px;
+@grid_spacing: 24px;
+
+@dark_theme: true;
+@shadows: true;
+@gradients: true;
+@glows: false;
+@border_radius: 0;
+
+@font_weight: 300;
+@font_main: 'PT Sans Narrow', 'Segoe UI Light', Helvetica, sans-serif;
+@font_tech: 'Share Tech Mono', Monotype;
+@font_icons: 'Material Symbols Outlined';
+@font_size: 14px;
+@font_std: 'Roboto Condensed', 'Segoe UI', Helvetica, sans-serif;
+@font_rem_factor: 1; // <- adjustment factor for @font_std vs @font_size
+
+@color_error: #f00;
+@color_error_inv: #fff;
+@color_highlight: #a7f8ab;
+@color_highlight_fore: #000;
+@color_tech: fade( @color_highlight, 60);
+@color_watermark: #c0c0c0;
+@color_light: #fff;
+@color_dark: #000;
+
+/*#endregion*/
+/*#region STD-VARIABLES */
+@color_default: @color_light; // text-color
+@color_default_inv: @color_dark; // contrast color against _default
+@color_background: #1e2336; // background-color
+@color_success: @color_highlight;
+@color_success_inv: darken(@color_success, 50);
+@color_warning: #d5d033;
+@color_warning_inv: darken(@color_warning, 35);
+@color_danger: @color_error;
+@color_danger_inv: @color_error_inv;
+@color_accent: #ff0085;
+@color_accent_inv: @color_light;
+@color_primary: #429bbb;
+@color_primary_inv: @color_light;
+@color_disabled: @color_watermark;
+
+@uppercase_headings: true;
+@uppercase_carousels: @uppercase_headings;
+@uppercase_buttons: @uppercase_headings;
+
+@size_scrollbar: 10px;
+@color_scrollbar_track: rgba(0,0,0,0.0);
+@color_scrollbar_thumb: #262b3e;
+@color_border: fade(@color_default, 10);
+/*#endregion*/
+/*#region BUTTON VARIABLES*/
+@color_button_border_light: fade(@color_light, 33);
+@color_button_border: fade(@color_light, 0);
+@color_button_border_dark: fade(@color_dark, 0);
+@color_button_back: #262b3e;
+@color_button_fore: @color_light;
+@button_hover_percentage: 10;
+@button_fontfamily: @font_std;
+@button_fontsize: 1.1rem * @font_rem_factor;
+/*#endregion*/
+/*#region UI VARIABLES*/
+@color_link: @color_primary;
+// menu
+@menu_link_color: fade(@color_default, 60);
+@menu_link_hover_color: @color_default;
+@menu_link_active_color: @color_primary;
+@menu_link_active_backgroundcolor: fade(@color_default, 5);
+@menu_link_fontfamily: @font_std;
+@menu_link_fontsize: 1rem * @font_rem_factor;
+// balloon
+@balloon_color: #262b3e;
+@balloon_color_contrast: @color_background;
+// calendar/schedule/agenda
+@color_calendarday_hover: fade(@color_default, 5);
+@color_calendarday_focus: fade(@color_primary, 5);
+@color_calendarday_today: fade(@color_primary, 2.5);
+@color_agenda_clock: fade(@color_default, 25);
+@color_event_back: darken(@balloon_color, 5);
+@color_event_fore: @color_default;
+@color_schedule_header: @color_border;
+@color_schedule_subheader: @color_background;
+// suggest
+@color_suggest_border: #1e2336;
+@color_suggest_back: #262b3e;
+@color_suggest_border_light: rgba(255,255,255,0.1);
+@color_suggest_border_dark: rgba(0,0,0,0.25);
+@color_suggest_highlight: #429bbb;
+@color_suggest_focus_back: #429bbb;
+@color_suggest_focus_fore: @color_light;
+@color_suggest_focus_highlight: #1e2336;
+// tab
+@color_tab_highlight: @color_highlight;
+// lightbox
+@color_lightbox_back: fade(@color_dark, 50);
+// map
+@color_map: @color_dark;
+// marquee
+@color_marquee_back: @color_dark;
+@color_marquee_back2: darken(@color_background, 3);
+@color_marquee_fore: @color_default;
+/*#endregion*/
+/*#region SCAFFOLDING_VARIABLES*/
+@color_field_back: #262b3e;
+@color_field_label: #429bbb;
+@border_field_size: 2px;
+@color_input_toggle: @color_primary;
+@color_input_icon: @color_primary;
+/*#endregion*/
+/*#region MIXINS*/
+.Background() {
+    // add your body background here, if any complex...
+}

package/themebuilder.js

@@ -0,0 +1,290 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import yargs from 'yargs';
+import { hideBin } from 'yargs/helpers';
+import { Colors, NullChecker } from '@pacem/pacem-foundation';
+import { Mathematics } from '@pacem/pacem-numerical';
+const argv = yargs(hideBin(process.argv))
+    .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('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).',
+})
+    .option('contrast', {
+    type: 'number',
+    description: 'The minimim WCAG contrast (1 to 21) solid color-to-background (default 4.5).',
+})
+    .help()
+    .argv;
+const darkTheme = argv.theme === 'dark';
+const themeName = argv.name ?? (darkTheme ? 'dark' : 'light');
+function absolutePath(relativePath) {
+    return path.join(import.meta.dirname, relativePath);
+}
+function readFile(src) {
+    if (src == null) {
+        return null;
+    }
+    const json = fs.readFileSync(src, 'utf-8');
+    return JSON.parse(json);
+}
+const palette = Object.assign({
+    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',
+}, readFile(argv.src) ?? {});
+const WCAG_MINIMUM_CONTRAST = argv.mincontrast ?? 1.5;
+const WCAG_NORMAL_TEXT_CONTRAST = 4.5;
+const WCAG_NORMAL_COLOR_CONTRAST = argv.contrast ?? WCAG_NORMAL_TEXT_CONTRAST;
+const WCAG_SAFE_CONTRAST = 7;
+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 = Mathematics.DataAnalysis.SearchFunctions.goldenRatio;
+let backgroundModule;
+let rootModule;
+function isColorLight(clr) {
+    return Colors.luminance(clr) >= .2;
+}
+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 lighterColor = typeof arg2 === 'boolean' ? arg2 : arg3;
+    const { h, s, l, a } = Colors.hsl(baseColor);
+    const isDark = lighterColor ?? !isColorLight(baseColor);
+    const min = isDark ? l : 0;
+    const max = isDark ? 1 : l;
+    const newL = searchFn(min, max, x => Math.abs(targetContrast - Colors.contrastRatio(benchmarkColor, { h, s, l: x, a })).roundoff());
+    return Colors.rgb({ h, s, l: newL, a });
+}
+function luminanceColor(baseColor, targetLuminance) {
+    const { h, s, a } = Colors.hsl(baseColor);
+    const newL = searchFn(0, 1, x => Math.abs(targetLuminance - Colors.luminance({ h, s, l: x, a })));
+    return 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 } = Colors.hsl(clr);
+    if (s > threshold) {
+        return Colors.rgb({ h, s: threshold, l, a });
+    }
+    else
+        return clr;
+}
+function colorModuleBackground(clr, name, arg2) {
+    const forcedContrast = (arg2 && typeof arg2 === 'number') ? arg2 : null;
+    const baseContrast = forcedContrast ?? WCAG_MAX_CONTRAST;
+    const contrastClr = arg2 && typeof arg2 === 'object' ? arg2 : null;
+    const surfaceLight = name === 'background' ? SURFACE_LIGHT + .015 : SURFACE_LIGHT;
+    const isColorRight = (darkTheme ? Colors.luminance(clr) <= SURFACE_DARK : Colors.luminance(clr) >= surfaceLight);
+    const darkTargetLuminance = SURFACE_DARK;
+    const lightTargetLuminance = surfaceLight;
+    const referenceColor = isColorRight ? clr
+        : (!darkTheme ? luminanceColor(clr, lightTargetLuminance) : luminanceColor(clr, darkTargetLuminance));
+    let actualColor = contrastClr ? clr : referenceColor;
+    const luminanceBackActiveOffset = darkTheme ? .035 : -.08;
+    const contrastForeActive = forcedContrast ?? WCAG_SAFE_CONTRAST;
+    const contrast = contrastClr ?? contrastColor(actualColor, baseContrast);
+    const containerTargetContrast = WCAG_MINIMUM_CONTRAST;
+    const containerBenchmarkColor = actualColor;
+    const container = contrastColor(actualColor, containerBenchmarkColor, containerTargetContrast, darkTheme);
+    const containerContrast = contrastColor(container, WCAG_NORMAL_TEXT_CONTRAST);
+    const active = luminanceColor(actualColor, Colors.luminance(actualColor) + luminanceBackActiveOffset);
+    const activeContrast = contrastColor(active, contrastForeActive);
+    const containerActive = luminanceColor(container, Colors.luminance(container) + luminanceBackActiveOffset);
+    const containerActiveContrast = contrastColor(containerActive, contrastForeActive);
+    const emphasis = Colors.saturate(actualColor, 1.2);
+    return {
+        base: actualColor,
+        contrast,
+        active,
+        activeContrast,
+        containerActive,
+        container,
+        emphasis,
+        containerActiveContrast,
+        containerContrast
+    };
+}
+function colorModuleDisabled(clr) {
+    const baseContrast = Math.min(WCAG_MINIMUM_CONTRAST, WCAG_DISABLED_CONTRAST);
+    const containerBenchmarkColor = backgroundModule.base;
+    const preferBaseWithLighterColor = darkTheme;
+    const preferContrastWithLighterColor = !preferBaseWithLighterColor;
+    const referenceColor = contrastColor(clr, containerBenchmarkColor, 1);
+    const actualColor = contrastColor(desaturateColor(referenceColor), containerBenchmarkColor, baseContrast, preferBaseWithLighterColor);
+    const luminanceBackActiveOffset = darkTheme ? .1 : -.06;
+    const contrast = contrastColor(actualColor, baseContrast, preferContrastWithLighterColor);
+    const containerTargetContrast = 1.1;
+    const container = contrastColor(actualColor, containerBenchmarkColor, containerTargetContrast, preferContrastWithLighterColor);
+    const containerContrast = contrastColor(container, baseContrast, preferBaseWithLighterColor);
+    const active = luminanceColor(actualColor, Colors.luminance(actualColor) + luminanceBackActiveOffset);
+    const activeContrast = contrastColor(active, baseContrast, preferContrastWithLighterColor);
+    const containerActive = luminanceColor(container, Colors.luminance(container) + luminanceBackActiveOffset);
+    const containerActiveContrast = contrastColor(containerActive, baseContrast);
+    const emphasis = Colors.lighten(actualColor, .1);
+    return {
+        base: actualColor,
+        contrast,
+        active,
+        activeContrast,
+        containerActive,
+        container,
+        emphasis,
+        containerActiveContrast,
+        containerContrast
+    };
+}
+function colorModule(clr, name, arg2) {
+    const isDesaturated = name === 'gray';
+    const forcedContrast = (arg2 && typeof arg2 === 'number') ? arg2 : null;
+    const baseContrast = forcedContrast ?? WCAG_SAFE_CONTRAST;
+    const contrastClr = arg2 && typeof arg2 === 'object' ? arg2 : null;
+    const isColorRight = isColorLight(clr) === darkTheme && Colors.contrastRatio(clr, backgroundModule.base) >= WCAG_NORMAL_COLOR_CONTRAST;
+    const referenceColor = isColorRight ? clr
+        : contrastColor(clr, backgroundModule.base, WCAG_NORMAL_COLOR_CONTRAST, darkTheme);
+    let actualColor = contrastClr ? clr : referenceColor;
+    if (isDesaturated) {
+        actualColor = desaturateColor(actualColor);
+    }
+    const luminanceBackActiveOffset = darkTheme ? .1 : -.06;
+    const contrastForeActive = forcedContrast ?? WCAG_SAFE_CONTRAST;
+    const contrast = contrastClr ?? contrastColor(actualColor, baseContrast, !darkTheme);
+    const containerTargetContrast = WCAG_MINIMUM_CONTRAST;
+    const containerBenchmarkColor = backgroundModule.base;
+    const container = contrastColor(actualColor, containerBenchmarkColor, containerTargetContrast, !darkTheme);
+    const containerContrast = contrastColor(container, WCAG_NORMAL_TEXT_CONTRAST, darkTheme);
+    const active = luminanceColor(actualColor, Colors.luminance(actualColor) + luminanceBackActiveOffset);
+    const activeContrast = contrastColor(active, contrastForeActive, !darkTheme);
+    const containerActive = luminanceColor(container, Colors.luminance(container) + luminanceBackActiveOffset);
+    const containerActiveContrast = contrastColor(containerActive, contrastForeActive, darkTheme);
+    const emphasis = isDesaturated ? Colors.lighten(actualColor, .1) : Colors.saturate(actualColor, 1.2);
+    return {
+        base: actualColor,
+        contrast,
+        active,
+        activeContrast,
+        containerActive,
+        container,
+        emphasis,
+        containerActiveContrast,
+        containerContrast
+    };
+}
+const lessVariables = {};
+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}`] = Colors.stringify(mod.base);
+    lessVariables[`@color_${name}_rgb`] = a255s(mod.base);
+    lessVariables[`@color_${name}_inv`] = Colors.stringify(mod.contrast);
+    lessVariables[`@color_${name}_inv_rgb`] = a255s(mod.contrast);
+    lessVariables[`@color_${name}_container`] = Colors.stringify(mod.container);
+    lessVariables[`@color_${name}_container_rgb`] = a255s(mod.container);
+    lessVariables[`@color_${name}_container_inv`] = Colors.stringify(mod.containerContrast);
+    lessVariables[`@color_${name}_container_inv_rgb`] = a255s(mod.containerContrast);
+    lessVariables[`@color_${name}_active`] = Colors.stringify(mod.active);
+    lessVariables[`@color_${name}_active_rgb`] = a255s(mod.active);
+    lessVariables[`@color_${name}_active_inv`] = Colors.stringify(mod.activeContrast);
+    lessVariables[`@color_${name}_active_inv_rgb`] = a255s(mod.activeContrast);
+    lessVariables[`@color_${name}_container_active`] = Colors.stringify(mod.containerActive);
+    lessVariables[`@color_${name}_container_active_rgb`] = a255s(mod.containerActive);
+    lessVariables[`@color_${name}_container_active_inv`] = Colors.stringify(mod.containerActiveContrast);
+    lessVariables[`@color_${name}_container_active_inv_rgb`] = a255s(mod.containerActiveContrast);
+    lessVariables[`@color_${name}_emphasis`] = Colors.stringify(mod.emphasis);
+    lessVariables[`@color_${name}_emphasis_rgb`] = a255s(mod.emphasis);
+};
+const backgroundColor = Colors.parse(palette['background']);
+backgroundModule = colorModuleBackground(backgroundColor, 'background');
+pushLessVariables('background', backgroundModule);
+const rootColor = 'root' in palette ? Colors.parse(palette['root']) : Colors.darken(backgroundModule.base, darkTheme ? .02 : .01);
+rootModule = colorModuleBackground(rootColor, 'root');
+pushLessVariables('root', rootModule);
+if ('default' in palette) {
+    const defaultColor = contrastColor(Colors.parse(palette['default']), rootModule.base, WCAG_MAX_CONTRAST, darkTheme);
+    const defaultModule = colorModule(defaultColor, 'default');
+    pushLessVariables('default', defaultModule);
+}
+else {
+    pushLessVariables('default', invertModule(rootModule));
+}
+const disabledColor = ('disabled' in palette) ? Colors.parse(palette['disabled']) : backgroundModule.base;
+pushLessVariables('disabled', colorModuleDisabled(disabledColor));
+for (let name in palette) {
+    if (['default', 'background', 'root', 'disabled'].indexOf(name) >= 0) {
+        continue;
+    }
+    const color = Colors.parse(palette[name]);
+    const mod = colorModule(color, name);
+    pushLessVariables(name, mod);
+}
+if (!('invert' in palette)) {
+    pushLessVariables('invert', invertModule(backgroundModule));
+}
+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 (!NullChecker.isNull(argv.void)) {
+    lessText = '';
+}
+fs.writeFileSync(target, lessText);