Skip to content

Typescript : add returned types of generateAdaptiveTheme function #99

@KirdesMF

Description

@KirdesMF

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;

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requestnpm packagesIssues related to the leonardo npm packages

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions