leonardo
leonardo copied to clipboard
Typescript : add returned types of generateAdaptiveTheme function
Description
It would be nice to be able to type the returned theme array from generateAdaptiveTheme
and this will lead to modify the declaration function of generateAdaptiveTheme
// index.d.ts
// AdaptiveTheme type
type AdaptiveTheme = (brightness: number, constrast: number) => Adaptive | ({
background: string
} | {
name: string,
values: {
name: string,
contrast: number,
value: string
}[]
})[];
// index.d.ts
// declaration function
function generateAdaptiveTheme({
colorScales,
baseScale,
brightness,
contrast,
output
}: {
colorScales: NamedColorScale[],
baseScale: string,
brightness?: number,
contrast?: number,
output?: Colorspace,
}): AdaptiveTheme | never;
Why do you need this feature?
for example, a css variables settings :
function setCSSVariables(theme: ReturnedTheme) {
let ROOT = {} as Record<string, string>;
for (const obj of theme) {
if ('values' in obj) {
for (const scheme of obj.values) {
ROOT[`--${scheme.name}`] = scheme.value;
}
} else {
ROOT[`--background`] = obj.background;
}
}
return ROOT;
}
Leonardo package and version
"@adobe/leonardo-contrast-colors": "^1.0.0-alpha.8"
Additional context
Here is maybe a solution :
type Background = { background: string };
type Scheme = {
name: string;
values: {
name: string;
contrast: number;
value: string;
}[];
};
type ReturnedTheme = (Background | Scheme)[];
type AdaptiveTheme = (brightness: number, constrast?: number) => ReturnedTheme
type GenerateTheme<T> = {
brightness?: T;
colorScales: NamedColorScale[];
baseScale: string;
contrast?: number;
output?: Colorspace;
};
declare function generateAdaptiveTheme<T>({
brightness: T,
...rest
}: GenerateTheme<T>): T extends number ? ReturnedTheme : AdaptiveTheme;