Skip to content

Allow specifying a modified theme color #954

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

Allow specifying a modified theme color #954

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 39 additions & 7 deletions src/core-interfaces.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,39 @@ 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 interface ModifiedThemeColor {
baseColor: HexColor | ThemeColor

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
}
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'
Expand Down Expand Up @@ -1016,7 +1048,7 @@ export interface OptsChartGridLine {
* Gridline color (hex)
* @example 'FF3399'
*/
color?: HexColor
color?: Color
/**
* Gridline size (points)
*/
Expand All @@ -1038,15 +1070,15 @@ export interface IChartPropsBase {
*/
axisPos?: 'b' | 'l' | 'r' | 't'
border?: BorderProps
chartColors?: HexColor[]
chartColors?: Color[]
/**
* opacity (0.0 - 1.0)
* @example 0.5 // 50% opaque
*/
chartColorsOpacity?: number
dataBorder?: BorderProps
displayBlanksAs?: string
fill?: HexColor
fill?: Color
invertedColors?: string
lang?: string
layout?: PositionProps
Expand Down Expand Up @@ -1096,7 +1128,7 @@ export interface IChartPropsAxisCat {
catAxisMinVal?: number
catAxisOrientation?: 'minMax'
catAxisTitle?: string
catAxisTitleColor?: string
catAxisTitleColor?: Color
catAxisTitleFontFace?: string
catAxisTitleFontSize?: number
catAxisTitleRotate?: number
Expand Down Expand Up @@ -1175,7 +1207,7 @@ export interface IChartPropsAxisVal {
valAxisMinVal?: number
valAxisOrientation?: 'minMax'
valAxisTitle?: string
valAxisTitleColor?: string
valAxisTitleColor?: Color
valAxisTitleFontFace?: string
valAxisTitleFontSize?: number
valAxisTitleRotate?: number
Expand Down Expand Up @@ -1267,7 +1299,7 @@ export interface IChartPropsTitle extends TextBaseProps {
title?: string
titleAlign?: string
titleBold?: boolean
titleColor?: string
titleColor?: Color
titleFontFace?: string
titleFontSize?: number
titlePos?: { x: number; y: number }
Expand Down
63 changes: 59 additions & 4 deletions src/gen-utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
*/

import { EMU, REGEX_HEX_COLOR, DEF_FONT_COLOR, ONEPT, SchemeColor, SCHEME_COLORS } from './core-enums'
import { IChartOpts, PresLayout, TextGlowProps, PresSlide, ShapeFillProps, Color, ShapeLineProps } from './core-interfaces'
import { IChartOpts, PresLayout, TextGlowProps, PresSlide, ShapeFillProps, Color, ShapeLineProps, ModifiedThemeColor } from './core-interfaces'

/**
* Convert string percentages to number relative to slide size
Expand Down Expand Up @@ -134,16 +134,68 @@ 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
}

/**
* Create either a `a:schemeClr` - (scheme color) or `a:srgbClr` (hexa representation).
* @param {string|SCHEME_COLORS} colorStr - hexa representation (eg. "FFFF00") or a scheme color constant (eg. pptx.SchemeColor.ACCENT1)
* @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 {
export function createColorElement(colorInput: string | SCHEME_COLORS | ModifiedThemeColor, innerElements?: string): string {
let colorStr = typeof colorInput === 'object' ? colorInput.baseColor : colorInput
let colorVal = (colorStr || '').replace('#', '')
let isHexaRgb = REGEX_HEX_COLOR.test(colorVal)

if (typeof colorInput == 'object') {
innerElements = (innerElements || '') + handleModifiedColorProps(colorInput)
}

if (
!isHexaRgb &&
colorVal !== SchemeColor.background1 &&
Expand Down Expand Up @@ -195,13 +247,16 @@ export function createGlowElement(options: TextGlowProps, defaults: TextGlowProp
*/
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 {
else if ('baseColor' in props) {
internalElements = handleModifiedColorProps(props)
colorVal = props.baseColor
} else {
if (props.type) fillType = props.type
if (props.color) colorVal = props.color
if (props.alpha) internalElements += `<a:alpha val="${Math.round((100 - props.alpha) * 1000)}"/>` // DEPRECATED: @deprecated v3.3.0
Expand Down
46 changes: 39 additions & 7 deletions types/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -898,7 +898,39 @@ 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 interface ModifiedThemeColor {
baseColor: HexColor | ThemeColor

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
}
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'
Expand Down Expand Up @@ -1793,7 +1825,7 @@ declare namespace PptxGenJS {
* Gridline color (hex)
* @example 'FF3399'
*/
color?: HexColor
color?: Color
/**
* Gridline size (points)
*/
Expand All @@ -1814,15 +1846,15 @@ declare namespace PptxGenJS {
*/
axisPos?: 'b' | 'l' | 'r' | 't'
border?: BorderProps
chartColors?: HexColor[]
chartColors?: Color[]
/**
* opacity (0.0 - 1.0)
* @example 0.5 // 50% opaque
*/
chartColorsOpacity?: number
dataBorder?: BorderProps
displayBlanksAs?: string
fill?: HexColor
fill?: Color
invertedColors?: string
lang?: string
layout?: PositionProps
Expand Down Expand Up @@ -1872,7 +1904,7 @@ declare namespace PptxGenJS {
catAxisMinVal?: number
catAxisOrientation?: 'minMax'
catAxisTitle?: string
catAxisTitleColor?: string
catAxisTitleColor?: Color
catAxisTitleFontFace?: string
catAxisTitleFontSize?: number
catAxisTitleRotate?: number
Expand Down Expand Up @@ -1951,7 +1983,7 @@ declare namespace PptxGenJS {
valAxisMinVal?: number
valAxisOrientation?: 'minMax'
valAxisTitle?: string
valAxisTitleColor?: string
valAxisTitleColor?: Color
valAxisTitleFontFace?: string
valAxisTitleFontSize?: number
valAxisTitleRotate?: number
Expand Down Expand Up @@ -2043,7 +2075,7 @@ declare namespace PptxGenJS {
title?: string
titleAlign?: string
titleBold?: boolean
titleColor?: string
titleColor?: Color
titleFontFace?: string
titleFontSize?: number
titlePos?: { x: number; y: number }
Expand Down