allow to define theme colors and modify them

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pptxgenjs",
-  "version": "3.13.0-beta.1",
+  "version": "3.13.0-beta.3",
   "author": {
     "name": "Brent Ely",
     "url": "https://github.com/gitbrent/"

src/core-interfaces.ts

@@ -70,7 +70,7 @@ export interface BackgroundProps extends DataOrPathProps, ShapeFillProps {
 	 * Color (hex format)
 	 * @deprecated v3.6.0 - use `ShapeFillProps` instead
 	 */
-	fill?: HexColor
+	fill?: Color
 
 	/**
 	 * source URL
@@ -84,11 +84,45 @@ export interface BackgroundProps extends DataOrPathProps, ShapeFillProps {
  */
 export type HexColor = string
 export type ThemeColor = 'tx1' | 'tx2' | 'bg1' | 'bg2' | 'accent1' | 'accent2' | 'accent3' | 'accent4' | 'accent5' | 'accent6'
-export type Color = HexColor | ThemeColor
+export type Color = HexColor | ThemeColor | ModifiedThemeColor
 export type Margin = number | [number, number, number, number]
 export type HAlign = 'left' | 'center' | 'right' | 'justify'
 export type VAlign = 'top' | 'middle' | 'bottom'
 
+export interface ModifiedThemeColor {
+	baseColor: HexColor | ThemeColor
+	/**
+	 * - number 0-100
+	 */
+	alpha?: number
+	alphaMod?: number
+	alphaOff?: number
+	blue?: number
+	blueMod?: number
+	blueOff?: number
+	green?: number
+	greenMod?: number
+	greenOff?: number
+	red?: number
+	redMod?: number
+	redOff?: number
+	hue?: number
+	hueMod?: number
+	hueOff?: number
+	lum?: number
+	lumMod?: number
+	lumOff?: number
+	sat?: number
+	satMod?: number
+	satOff?: number
+	shade?: number
+	tint?: number
+	comp?: boolean
+	gray?: boolean
+	inv?: boolean
+	gamma?: boolean
+}
+
 // used by charts, shape, text
 export interface BorderProps {
 	/**
@@ -471,6 +505,12 @@ export interface ThemeProps {
 	 * @default 'Calibri'
 	 */
 	bodyFontFace?: string
+	/**
+	 * Theme hex colors in following order: Text/Background - Dark 1, Text/Background - Light 1, Text/Background - Dark 2, Text/Background - Light 2, Accent 1, Accent 2, Accent 3, Accent 4, Accent 5, Accent 6, Hyperlink, Followed Hyperlink
+	 * @example '['000000', 'FFFFFF', '44546A', 'E7E6E6', '4472C4', 'ED7D31', 'A5A5A5', 'FFC000', '5B9BD5', '70AD47', '0563C1', '954F72']'
+	 * @default '['000000', 'FFFFFF', '44546A', 'E7E6E6', '4472C4', 'ED7D31', 'A5A5A5', 'FFC000', '5B9BD5', '70AD47', '0563C1', '954F72']'
+	 */
+	themeColors?: string[]
 }
 
 // image / media ==================================================================================
@@ -1193,7 +1233,7 @@ export interface OptsChartGridLine {
 	 * Gridline color (hex)
 	 * @example 'FF3399'
 	 */
-	color?: HexColor
+	color?: Color
 	/**
 	 * Gridline size (points)
 	 */
@@ -1237,15 +1277,15 @@ export interface IChartPropsBase {
 	 * Axis position
 	 */
 	axisPos?: 'b' | 'l' | 'r' | 't'
-	chartColors?: HexColor[]
+	chartColors?: Color[]
 	/**
 	 * opacity (0 - 100)
 	 * @example 50 // 50% opaque
 	 */
 	chartColorsOpacity?: number
 	dataBorder?: BorderProps
 	displayBlanksAs?: string
-	invertedColors?: HexColor[]
+	invertedColors?: Color[]
 	lang?: string
 	layout?: PositionProps
 	shadow?: ShadowProps
@@ -1320,7 +1360,7 @@ export interface IChartPropsBase {
 	/**
 	 * @deprecated v3.11.0 - use `plotArea.fill`
 	 */
-	fill?: HexColor
+	fill?: Color
 }
 export interface IChartPropsAxisCat {
 	/**
@@ -1830,7 +1870,7 @@ export interface PresSlide extends SlideBaseProps {
 	 * @example 'FF3399'
 	 * @default '000000' (DEF_FONT_COLOR)
 	 */
-	color?: HexColor
+	color?: Color
 	/**
 	 * Whether slide is hidden
 	 * @default false

src/gen-charts.ts

@@ -926,14 +926,11 @@ function makeChartType (chartType: CHART_NAME, data: IOptsChartData[], opts: ICh
 						if (opts.lineSize === 0) {
 							strXml += '<a:ln><a:noFill/></a:ln>'
 						} else if (chartType === CHART_TYPE.BAR) {
-							strXml += '<a:solidFill>'
-							strXml += '  <a:srgbClr val="' + arrColors[index % arrColors.length] + '"/>'
-							strXml += '</a:solidFill>'
+							strXml += "<a:solidFill>".concat(createColorElement(arrColors[index % arrColors.length]), "</a:solidFill>");
+
 						} else {
 							strXml += '<a:ln>'
-							strXml += '  <a:solidFill>'
-							strXml += '   <a:srgbClr val="' + arrColors[index % arrColors.length] + '"/>'
-							strXml += '  </a:solidFill>'
+							strXml += "  <a:solidFill>".concat(createColorElement(arrColors[index % arrColors.length]), "  </a:solidFill>");
 							strXml += '</a:ln>'
 						}
 						strXml += createShadowElement(opts.shadow, DEF_SHAPE_SHADOW)

src/gen-utils.ts

@@ -3,7 +3,7 @@
  */
 
 import { EMU, REGEX_HEX_COLOR, DEF_FONT_COLOR, ONEPT, SchemeColor, SCHEME_COLORS } from './core-enums'
-import { PresLayout, TextGlowProps, PresSlide, ShapeFillProps, Color, ShapeLineProps, Coord, ShadowProps } from './core-interfaces'
+import { PresLayout, TextGlowProps, PresSlide, ShapeFillProps, Color, ShapeLineProps, Coord, ShadowProps, ModifiedThemeColor } from './core-interfaces'
 
 /**
  * Translates any type of `x`/`y`/`w`/`h` prop to EMU
@@ -120,6 +120,53 @@ export function rgbToHex (r: number, g: number, b: number): string {
 	return (componentToHex(r) + componentToHex(g) + componentToHex(b)).toUpperCase()
 }
 
+const percentColorModifiers = [
+	'alpha',
+	'alphaMod',
+	'alphaOff',
+	'blue',
+	'blueMod',
+	'blueOff',
+	'green',
+	'greenMod',
+	'greenOff',
+	'red',
+	'redMod',
+	'redOff',
+	'hue',
+	'hueMod',
+	'hueOff',
+	'lum',
+	'lumMod',
+	'lumOff',
+	'sat',
+	'satMod',
+	'satOff',
+	'shade',
+	'tint',
+]
+
+const flagColorModifiers = ['comp', 'gray', 'inv', 'gamma']
+
+function handleModifiedColorProps(color: ModifiedThemeColor): string {
+	let output = ''
+
+	for (let modifier of percentColorModifiers) {
+		let modifierValue = color[modifier]
+		if (modifierValue !== undefined) {
+			output += `<a:${modifier} val="${Math.round(modifierValue * 1000)}"/>`
+		}
+	}
+
+	for (let modifier of flagColorModifiers) {
+		if (color[modifier]) {
+			output += `<a:${modifier}/>`
+		}
+	}
+
+	return output
+}
+
 /**  TODO: FUTURE: TODO-4.0:
  * @date 2022-04-10
  * @tldr this s/b a private method with all current calls switched to `genXmlColorSelection()`
@@ -133,8 +180,14 @@ export function rgbToHex (r: number, g: number, b: number): string {
  * @param {string} innerElements - additional elements that adjust the color and are enclosed by the color element
  * @returns {string} XML string
  */
-export function createColorElement (colorStr: string | SCHEME_COLORS, innerElements?: string): string {
-	let colorVal = (colorStr || '').replace('#', '')
+export function createColorElement (colorInput: string | SCHEME_COLORS | ModifiedThemeColor, innerElements?: string): string {
+	let colorStr = typeof colorInput === 'object' ? colorInput.baseColor : colorInput
+	colorStr =  typeof colorStr === 'string' ? colorStr : '#FFFFFF'
+	let colorVal = (colorStr || '').replace('#', '');
+
+	if (typeof colorInput == 'object') {
+		innerElements = (innerElements || '') + handleModifiedColorProps(colorInput)
+	}
 
 	if (
 		!REGEX_HEX_COLOR.test(colorVal) &&
@@ -187,12 +240,16 @@ export function createGlowElement (options: TextGlowProps, defaults: TextGlowPro
  */
 export function genXmlColorSelection (props: Color | ShapeFillProps | ShapeLineProps): string {
 	let fillType = 'solid'
-	let colorVal = ''
+	let colorVal: string | ModifiedThemeColor = ''
 	let internalElements = ''
 	let outText = ''
 
 	if (props) {
 		if (typeof props === 'string') colorVal = props
+		else if ('baseColor' in props) {
+			internalElements = handleModifiedColorProps(props)
+			colorVal = props.baseColor
+		}
 		else {
 			if (props.type) fillType = props.type
 			if (props.color) colorVal = props.color

types/index.d.ts

@@ -899,7 +899,7 @@ declare namespace PptxGenJS {
 		 * Color (hex format)
 		 * @deprecated v3.6.0 - use `ShapeFillProps` instead
 		 */
-		fill?: HexColor
+		fill?: Color
 
 		/**
 		 * source URL
@@ -913,11 +913,45 @@ declare namespace PptxGenJS {
 	 */
 	export type HexColor = string
 	export type ThemeColor = 'tx1' | 'tx2' | 'bg1' | 'bg2' | 'accent1' | 'accent2' | 'accent3' | 'accent4' | 'accent5' | 'accent6'
-	export type Color = HexColor | ThemeColor
+	export type Color = HexColor | ThemeColor | ModifiedThemeColor
 	export type Margin = number | [number, number, number, number]
 	export type HAlign = 'left' | 'center' | 'right' | 'justify'
 	export type VAlign = 'top' | 'middle' | 'bottom'
 
+	export interface ModifiedThemeColor {
+		baseColor: HexColor | ThemeColor
+		/**
+		 * - number 0-100
+		 */
+		alpha?: number
+		alphaMod?: number
+		alphaOff?: number
+		blue?: number
+		blueMod?: number
+		blueOff?: number
+		green?: number
+		greenMod?: number
+		greenOff?: number
+		red?: number
+		redMod?: number
+		redOff?: number
+		hue?: number
+		hueMod?: number
+		hueOff?: number
+		lum?: number
+		lumMod?: number
+		lumOff?: number
+		sat?: number
+		satMod?: number
+		satOff?: number
+		shade?: number
+		tint?: number
+		comp?: boolean
+		gray?: boolean
+		inv?: boolean
+		gamma?: boolean
+	}
+
 	// used by charts, shape, text
 	export interface BorderProps {
 		/**
@@ -1300,6 +1334,11 @@ declare namespace PptxGenJS {
 		 * @default 'Calibri'
 		 */
 		bodyFontFace?: string
+		/**
+	 	 * Theme hex colors in following order: Text/Background - Dark 1, Text/Background - Light 1, Text/Background - Dark 2, Text/Background - Light 2, Accent 1, Accent 2, Accent 3, Accent 4, Accent 5, Accent 6, Hyperlink, Followed Hyperlink
+	 	 * @example and default['000000', 'FFFFFF', '44546A', 'E7E6E6', '4472C4', 'ED7D31', 'A5A5A5', 'FFC000', '5B9BD5', '70AD47', '0563C1', '954F72']
+	 	 */
+		themeColors?: string[]
 	}
 
 	// image / media ==================================================================================
@@ -1992,7 +2031,7 @@ declare namespace PptxGenJS {
 		 * Gridline color (hex)
 		 * @example 'FF3399'
 		 */
-		color?: HexColor
+		color?: Color
 		/**
 		 * Gridline size (points)
 		 */
@@ -2036,15 +2075,15 @@ declare namespace PptxGenJS {
 		 * Axis position
 		 */
 		axisPos?: 'b' | 'l' | 'r' | 't'
-		chartColors?: HexColor[]
+		chartColors?: Color[]
 		/**
 		 * opacity (0 - 100)
 		 * @example 50 // 50% opaque
 		 */
 		chartColorsOpacity?: number
 		dataBorder?: BorderProps
 		displayBlanksAs?: string
-		invertedColors?: HexColor[]
+		invertedColors?: Color[]
 		lang?: string
 		layout?: PositionProps
 		shadow?: ShadowProps
@@ -2119,7 +2158,7 @@ declare namespace PptxGenJS {
 		/**
 		 * @deprecated v3.11.0 - use `plotArea.fill`
 		 */
-		fill?: HexColor
+		fill?: Color
 	}
 	export interface IChartPropsAxisCat {
 		/**
@@ -2550,7 +2589,7 @@ declare namespace PptxGenJS {
 		 * @example 'FF3399'
 		 * @default '000000' (DEF_FONT_COLOR)
 		 */
-		color?: HexColor
+		color?: Color
 		/**
 		 * Whether slide is hidden
 		 * @default false