Skip to content
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.

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

Typescript : add returned types of generateAdaptiveTheme function #99

Open
KirdesMF opened this issue Sep 9, 2020 · 0 comments · May be fixed by #102
Open

Typescript : add returned types of generateAdaptiveTheme function #99

KirdesMF opened this issue Sep 9, 2020 · 0 comments · May be fixed by #102
Labels
enhancement New feature or request npm packages Issues related to the leonardo npm packages

Comments

@KirdesMF
Copy link

KirdesMF commented Sep 9, 2020

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 KirdesMF added enhancement New feature or request npm packages Issues related to the leonardo npm packages labels Sep 9, 2020
@fedeci fedeci linked a pull request Sep 12, 2020 that will close this issue
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request npm packages Issues related to the leonardo npm packages
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant