diff --git a/.eslintrc.json b/.eslintrc.json index a0d11dad4f1..68e8734281a 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -97,6 +97,31 @@ "@typescript-eslint/no-explicit-any": "off", "@typescript-eslint/no-non-null-assertion": "off" } + }, + { + "files": [ + "scripts/build-xaml.ts" + ], + "extends": [ + "plugin:@typescript-eslint/eslint-recommended", + "plugin:@typescript-eslint/recommended" + ], + "parser": "@typescript-eslint/parser", + "plugins": [ + "@typescript-eslint" + ], + "rules": { + "@typescript-eslint/no-empty-function": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "no-cond-assign": "off", + "no-console": "off", + "no-constant-condition": "off", + "indent": "off", + "space-before-function-paren": "off", + "no-case-declarations": "off", + "eqeqeq": "off" + } } ] } diff --git a/.github/workflows/_compile-themes.yml b/.github/workflows/_compile-themes.yml index 5a616284aba..cf5f58b9277 100644 --- a/.github/workflows/_compile-themes.yml +++ b/.github/workflows/_compile-themes.yml @@ -39,6 +39,10 @@ jobs: run: | npm run sass + - name: Build XAML assets + run: | + npm run build:xaml + - name: Build swatch for a11y tests run: | npm run dist:swatches @@ -61,3 +65,14 @@ jobs: with: name: themes path: themes.tar + + - name: Pack XAML Themes + run: | + tar -cf xaml.tar \ + dist/xaml + + - name: Upload xaml + uses: actions/upload-artifact@v3 + with: + name: xaml + path: xaml.tar \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 5df746ff0a4..3711a503512 100644 --- a/package-lock.json +++ b/package-lock.json @@ -41,6 +41,7 @@ "stylelint-config-standard": "^36.0.0", "stylelint-config-standard-scss": "^12.0.0", "stylelint-scss": "^6.0.0", + "ts-node": "^10.9.2", "typescript": "^5.0.3" }, "engines": { @@ -781,6 +782,18 @@ "node": ">=8" } }, + "node_modules/@cspotcode/source-map-support": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz", + "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==", + "dev": true, + "dependencies": { + "@jridgewell/trace-mapping": "0.3.9" + }, + "engines": { + "node": ">=12" + } + }, "node_modules/@csstools/css-parser-algorithms": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.4.0.tgz", @@ -1981,6 +1994,31 @@ "lodash.merge": "^4.6.2" } }, + "node_modules/@jridgewell/resolve-uri": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz", + "integrity": "sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==", + "dev": true, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/sourcemap-codec": { + "version": "1.4.15", + "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz", + "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==", + "dev": true + }, + "node_modules/@jridgewell/trace-mapping": { + "version": "0.3.9", + "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz", + "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==", + "dev": true, + "dependencies": { + "@jridgewell/resolve-uri": "^3.0.3", + "@jridgewell/sourcemap-codec": "^1.4.10" + } + }, "node_modules/@lerna/create": { "version": "8.0.1", "resolved": "https://registry.npmjs.org/@lerna/create/-/create-8.0.1.tgz", @@ -3593,6 +3631,30 @@ "node": ">= 6" } }, + "node_modules/@tsconfig/node10": { + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz", + "integrity": "sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==", + "dev": true + }, + "node_modules/@tsconfig/node12": { + "version": "1.0.11", + "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz", + "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==", + "dev": true + }, + "node_modules/@tsconfig/node14": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz", + "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==", + "dev": true + }, + "node_modules/@tsconfig/node16": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz", + "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==", + "dev": true + }, "node_modules/@tufjs/canonical-json": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@tufjs/canonical-json/-/canonical-json-1.0.0.tgz", @@ -4077,6 +4139,15 @@ "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" } }, + "node_modules/acorn-walk": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.2.tgz", + "integrity": "sha512-cjkyv4OtNCIeqhHrfS81QWXoCBPExR/J62oyEqepVw8WaQeSqpW2uhuLPh1m9eWhDuOo/jUXVTlifvesOWp/4A==", + "dev": true, + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/add-stream": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/add-stream/-/add-stream-1.0.0.tgz", @@ -4326,6 +4397,12 @@ "node": ">= 6" } }, + "node_modules/arg": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz", + "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==", + "dev": true + }, "node_modules/argparse": { "version": "1.0.10", "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", @@ -6603,6 +6680,12 @@ "typescript": ">=4" } }, + "node_modules/create-require": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz", + "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==", + "dev": true + }, "node_modules/cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -7054,6 +7137,15 @@ "node": ">=8" } }, + "node_modules/diff": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz", + "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==", + "dev": true, + "engines": { + "node": ">=0.3.1" + } + }, "node_modules/diff-sequences": { "version": "29.6.3", "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.6.3.tgz", @@ -14565,6 +14657,12 @@ "semver": "bin/semver.js" } }, + "node_modules/make-error": { + "version": "1.3.6", + "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz", + "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==", + "dev": true + }, "node_modules/make-fetch-happen": { "version": "10.2.1", "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-10.2.1.tgz", @@ -23501,6 +23599,49 @@ "typescript": ">=4.2.0" } }, + "node_modules/ts-node": { + "version": "10.9.2", + "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz", + "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==", + "dev": true, + "dependencies": { + "@cspotcode/source-map-support": "^0.8.0", + "@tsconfig/node10": "^1.0.7", + "@tsconfig/node12": "^1.0.7", + "@tsconfig/node14": "^1.0.0", + "@tsconfig/node16": "^1.0.2", + "acorn": "^8.4.1", + "acorn-walk": "^8.1.1", + "arg": "^4.1.0", + "create-require": "^1.1.0", + "diff": "^4.0.1", + "make-error": "^1.1.1", + "v8-compile-cache-lib": "^3.0.1", + "yn": "3.1.1" + }, + "bin": { + "ts-node": "dist/bin.js", + "ts-node-cwd": "dist/bin-cwd.js", + "ts-node-esm": "dist/bin-esm.js", + "ts-node-script": "dist/bin-script.js", + "ts-node-transpile-only": "dist/bin-transpile.js", + "ts-script": "dist/bin-script-deprecated.js" + }, + "peerDependencies": { + "@swc/core": ">=1.2.50", + "@swc/wasm": ">=1.2.50", + "@types/node": "*", + "typescript": ">=2.7" + }, + "peerDependenciesMeta": { + "@swc/core": { + "optional": true + }, + "@swc/wasm": { + "optional": true + } + } + }, "node_modules/tsconfig-paths": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-4.2.0.tgz", @@ -24302,6 +24443,12 @@ "uuid": "dist/bin/uuid" } }, + "node_modules/v8-compile-cache-lib": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz", + "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==", + "dev": true + }, "node_modules/v8flags": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/v8flags/-/v8flags-3.1.3.tgz", @@ -25172,6 +25319,15 @@ "node": ">=12" } }, + "node_modules/yn": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz", + "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==", + "dev": true, + "engines": { + "node": ">=6" + } + }, "node_modules/yocto-queue": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", diff --git a/package.json b/package.json index 8d8b5930325..e0fe1bc1cd4 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ "stylelint-config-standard": "^36.0.0", "stylelint-config-standard-scss": "^12.0.0", "stylelint-scss": "^6.0.0", + "ts-node": "^10.9.2", "typescript": "^5.0.3" }, "peerDependencies": { @@ -71,7 +72,8 @@ "embed-assets": "gulp assets", "create-component": "gulp create-component", "test-contrast": "node ./scripts/test-contrast.mjs", - "test:integrations": "npm run build --prefix integrations" + "test:integrations": "npm run build --prefix integrations", + "build:xaml": "ts-node ./scripts/build-xaml.ts" }, "engines": { "node": "^20" diff --git a/scripts/build-xaml.ts b/scripts/build-xaml.ts new file mode 100644 index 00000000000..99f05815e50 --- /dev/null +++ b/scripts/build-xaml.ts @@ -0,0 +1,405 @@ +import fs from "fs/promises"; +import { resolve, join } from 'path'; + +interface Theme { + theme: string; + swatches: Swatch[]; +} + +interface Swatch { + theme: string; + swatch: string; + previewColors: string[]; +} + +(async () => { + const themesCatalog: Theme[] = []; + + const root = resolve(__dirname, "../"); + + const xamlDist = join(root, "dist", "xaml"); + + await fs.rm(xamlDist, { recursive: true, force: true }); + await fs.mkdir(xamlDist, { recursive: true }); + + const themes = [ "Default", "Bootstrap", "Fluent", "Material" ].map(name => ({ + name, + path: join(root, "packages", name.toLowerCase()) + })); + + for (const { name, path } of themes) { + console.log(name.toUpperCase()); + console.log(underline(name, "=")); + console.log(); + + await fs.mkdir(join(xamlDist, name, "Swatches"), { recursive: true }); + + const themeCatalog: Theme = { + theme: name, + swatches: [] + }; + themesCatalog.push(themeCatalog); + + const _swatchesPath = join(path, "scss", "core", "color-system", "_swatch.scss"); + const _palettesPath = join(path, "scss", "core", "color-system", "_palettes.scss"); + + const paletteMap = await parseKendoPalettesFile(_palettesPath); + + const resourceDictionary = await parseSwatchesAndCreateResourceDictionary(_swatchesPath, name, "Main", paletteMap); + await fs.writeFile(join(xamlDist, name, "Swatches", "Main.xaml"), resourceDictionary); + + // And darkness for all + const resourceDictionaryDark = await parseSwatchesAndCreateResourceDictionary(_swatchesPath, name, "MainDark", paletteMap, lightToDark); + await fs.writeFile(join(xamlDist, name, "Swatches", "Main-Dark.xaml"), resourceDictionaryDark); + } + + // await fs.writeFile( + // join(xamlDist, "catalog.json"), + // JSON.stringify(themesCatalog, null, " ")); + +})().catch(console.error); + +function lightToDark(color: string): string { + const rgb: RGB = rgbFromHEXString(color); + const hsl = rgbToHsl(rgb); + const flippedHSL: HSL = { + hue: hsl.hue, + saturation: hsl.saturation, + luminosity: 1 - hsl.luminosity, // 0.5 - hsl.luminosity + }; + + const flippedRGB = hslToRgb(flippedHSL); + return rgbToHEXString(flippedRGB); +} + +/** + * Convert a single color channel (0 - 255) into double hex digits ("00" to "FF") + */ +function colorHEX(channel: number) { + let hex = Math.round(channel).toString(16); + if (hex.length == 1) { + hex = "0" + hex; + } + return hex.toUpperCase(); +} + +/** + * Parse a "#RRGGBB" string to {@link RGB} structure. + * @param color + */ +function rgbFromHEXString(color: string) { + return { + red: Number.parseInt(color.substring(1, 3), 16), + green: Number.parseInt(color.substring(3, 5), 16), + blue: Number.parseInt(color.substring(5, 7), 16), + }; +} + +/** + * Convert {@link RGB} structure to "#RRGGBB" string + */ +function rgbToHEXString(rgb: RGB): string { + return `#${colorHEX(rgb.red)}${colorHEX(rgb.green)}${colorHEX(rgb.blue)}`; +} + +interface RGB { + /** + * Red component 0 - 255. + */ + red: number; + + /** + * Green component 0 - 255. + */ + green: number; + + /** + * Blue component 0 - 255. + */ + blue: number; +} + +interface HSL { + /** + * Hue, color on a color wheel 0 - 360 degree. + */ + hue: number; + + /** + * Saturation percentage 0 to 1 + */ + saturation: number; + + /** + * Luminosity percentage 0 to 1 + */ + luminosity: number; +} + +function rgbToHsl(rgb: RGB): HSL { + const red = rgb.red / 255.0; + const green = rgb.green / 255.0; + const blue = rgb.blue / 255.0; + + const max = Math.max(Math.max(red, green), blue); + const min = Math.min(Math.min(red, green), blue); + + const delta = max - min; + + let hue = 0.0; + let saturation = 0.0; + let luminosity = 0.0; + + if (delta > 0) { + if (max == red) { + hue = ((green - blue) / delta); + if (hue < 0) { + hue = hue + 6; + } + } if (max == green) { + hue = ((blue - red) / delta) + 2; + } else if (max == blue) { + hue = ((red - green) / delta) + 4; + } + hue = hue * 60; + } + + luminosity = (max + min) / 2.0; + + if (delta != 0) { + saturation = delta / (1 - Math.abs(2 * luminosity - 1)); + } + + return { hue, saturation, luminosity }; +} + +// https://stackoverflow.com/questions/2353211/hsl-to-rgb-color-conversion +function hslToRgb(hsv: HSL): RGB { + const hue = hsv.hue / 360.0; + const { saturation, luminosity } = hsv; + + let red, green, blue; + if (saturation === 0) { + red = luminosity; + green = luminosity; + blue = luminosity; + } else { + const q = luminosity < 0.5 ? luminosity * (1 + saturation) : luminosity + saturation - luminosity * saturation; + const p = 2.0 * luminosity - q; + red = hueToRgb(p, q, hue + 1 / 3); + green = hueToRgb(p, q, hue); + blue = hueToRgb(p, q, hue - 1 / 3); + } + + red *= Math.round(255); + green *= Math.round(255); + blue *= Math.round(255); + + function hueToRgb(p: number, q: number, _t: number): number { + let t = _t; + if (t < 0) { + t += 1; + } + if (t > 1) { + t -= 1; + } + if (t < 1 / 6) { + return p + (q - p) * 6 * t; + } + if (t < 1 / 2) { + return q; + } + if (t < 2 / 3) { + return p + (q - p) * (2 / 3 - t) * 6; + } + + return p; + } + + return { red, green, blue }; +} + +async function parseKendoPalettesFile(_palettesPath: string): Promise<{ [paletteName: string]: { [colorName: string]: string; }; }> { + const paletteMap: { [paletteName: string]: { [colorName: string]: string; }; } = {}; + + const palettes = await fs.readFile(_palettesPath, "utf-8"); + let lastIndex = 0; + + const paletteStartRegEx = /^\$_default-([a-zA-Z-]*)\s*:\s*\(/gm; + + let paletteStart: RegExpExecArray | null; + while (paletteStart = paletteStartRegEx.exec(palettes)) { + const paletteName = "kendo-" + paletteStart[1]; + + paletteMap[paletteName] = {}; + + console.log(`// Palette ${paletteName}`); + console.log(`const ${paletteName} = {`); + + lastIndex = paletteStartRegEx.lastIndex; + + // Read colors for the palette.... + const colorVariableRegEx = /\s*([a-zA-Z0-9-]*)\s*:\s*(#[0-9a-fA-F]*)\s*,?/gym; + const paletteEndRegEx = /\s*\)\s*;/gym; + + while (true) { + colorVariableRegEx.lastIndex = lastIndex; + const colorVariable = colorVariableRegEx.exec(palettes); + if (colorVariable) { + lastIndex = colorVariableRegEx.lastIndex; + const colorKey = colorVariable[1]; + const colorValue = colorVariable[2]; + + paletteMap[paletteName][colorKey] = colorValue; + + console.log(` ${colorKey}: ${colorValue},`); + continue; + } + + paletteEndRegEx.lastIndex = lastIndex; + if (paletteEndRegEx.exec(palettes)) { + console.log(`}\n`); + break; + } + + console.log(`Unexpected character at ${lastIndex}`); + break; + } + } + return paletteMap; +} + +async function parseSwatchesAndCreateResourceDictionary( // eslint-disable-line max-params + _swatchesPath: string, + themeName: string, + swatchName: string, + paletteMap: { [paletteName: string]: { [colorName: string]: string; }; }, + colorFilter: (color: string) => string = (color) => color) { + const swatches = await fs.readFile(_swatchesPath, "utf-8"); + + const defaultColorsStartRegEx = /^\$_default-colors\s*:\s*\(\s*$/mg; + + let rd = ""; + + const defaultColorsStart = defaultColorsStartRegEx.exec(swatches); + if (defaultColorsStart) { + const line = ` + + + + `; + + console.log(line); + rd += line + "\n"; + + let lastIndex = defaultColorsStartRegEx.lastIndex; + + const commentRegEx = /\s*\/\/\s*(.*)\s*$/gym; + const kendoPaletteLookupRegEx = /\s*([a-zA-Z-]*)\s*:\s*(k-map-get|map\.get)\s*\(\s*\$([a-zA-Z-]*)\s*,\s*([a-zA-Z\-0-9]*)\s*\)\s*,/gym; + const filteredPaletteLookupRegEx = /\s*([a-zA-Z-]*)\s*:\s*([a-zA-Z-]*)\s*\(\s*(k-map-get|map\.get)\s*\(\s*\$([a-zA-Z-]*)\s*,\s*([a-zA-Z\-0-9]*)\s*\)\s*(,\s*([.a-zA-Z\-0-9]*))?\)\s*,/gym; + + const endOfMapRegEx = /\s*\)\s*(!default)?\s*;/gym; + + while (true) { + let result: RegExpExecArray | null; + + commentRegEx.lastIndex = lastIndex; + result = commentRegEx.exec(swatches); + if (result) { + lastIndex = commentRegEx.lastIndex; + const comment = result[1].trim(); + + const line = `\n `; + console.log(line); + rd += line + "\n"; + + continue; + } + + kendoPaletteLookupRegEx.lastIndex = lastIndex; + result = kendoPaletteLookupRegEx.exec(swatches); + if (result) { + lastIndex = kendoPaletteLookupRegEx.lastIndex; + const colorKey = result[1].trim(); + const paletteName = result[3].trim(); + const peletteColorKey = result[4].trim(); + + let colorValue = paletteMap[paletteName][peletteColorKey].toUpperCase(); + colorValue = colorFilter(colorValue); + + const line = ` ${colorValue}`; + console.log(line); + rd += line + "\n"; + + continue; + } + + filteredPaletteLookupRegEx.lastIndex = lastIndex; + result = filteredPaletteLookupRegEx.exec(swatches); + if (result) { + lastIndex = filteredPaletteLookupRegEx.lastIndex; + + const colorKey = result[1].trim(); + + const paletteName = result[4].trim(); + const peletteColorKey = result[5].trim(); + + const filterName = result[2].trim(); + const filterArg = result[7]?.trim(); + + let colorValue = paletteMap[paletteName][peletteColorKey].toUpperCase(); + + switch (filterName) { + case "rgba": + if (!filterArg) { + console.log("Expected opacity for rgba filter."); + } + const opacity = Number.parseFloat(filterArg); + const alpha = colorHEX(opacity * 255); + colorValue = (colorValue[0] + alpha + colorValue.substring(1)).toUpperCase(); + break; + default: + console.log(`Unknown filter function: ${filterName}!`); + continue; + } + + colorValue = colorFilter(colorValue); + const line = ` ${colorValue}`; + console.log(line); + rd += line + "\n"; + + continue; + } + + endOfMapRegEx.lastIndex = lastIndex; + result = endOfMapRegEx.exec(swatches); + if (result) { + lastIndex = endOfMapRegEx.lastIndex; + + const line = "\n"; + console.log(line); + rd += line + "\n"; + + break; + } + + console.log("Unexpected character at " + lastIndex); + break; + } + } + return rd; +} + +function kendoToRadColorNaming(name: string): string { + return "Rad" + (name as any).replaceAll(/(^|-)([a-z])/g, (m: any) => m?.[1]?.toUpperCase() ?? m?.[0]?.toUpperCase() ?? "") + "Color"; +} + +function underline(title: string, char: string = "="): string { + let underline = ""; + for (let i = 0; i < title.length; i++) { + underline += char; + } + return underline; +}