leonardo icon indicating copy to clipboard operation
leonardo copied to clipboard

Typescript : add returned types of generateAdaptiveTheme function

Open KirdesMF opened this issue 4 years ago • 0 comments

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 :

Playground

 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;

KirdesMF avatar Sep 09 '20 15:09 KirdesMF