Variants Clashing

[clintwood]

Awesome library - thanks!

I'm needing to define multiple colorVariants on core colors like in the example below. As can be seen they are a light and dark variants of core colors accent and primary. These are not to be confused with a light and dark themes - they are unrelated - they are variants on the core theme colors of each theme.

When I build this I get an error Error: Variant light already exists.

I would have expected these to not clash since they are scoped uniquely. I have had a look at the source and notice that class ColorVariant does not consider the scope as part of it's uniqueness, hence the clashes.

As a workaround for now I will move the variant colors into the colors(...) definitions.

const lightTheme = new Theme()
  .name('light')
  .default()
  .assignable()
  .colors({
    'on-accent': '#FFFFFF',
    'accent': '#CB116E',

    'on-primary': '#292929',
    'primary': '#FAFAFA',
  })
  .colorVariant('light', '#FF569C', 'accent')
  .colorVariant('dark', '#940043', 'accent')
  .colorVariant('light', '#FFFFFF', 'primary')
  .colorVariant('dark', '#C7C7C7', 'primary');

[innocenzi]

class ColorVariant does not consider the scope as part of it's uniqueness

Indeed, I didn't think there could be duplicate variant names of the same type. Adding the name of the variable it is attached to would be a solution, I'll look into it.

[innocenzi]

I just published a new release, let me know if it works for you!

[clintwood]

@hawezo Works awesome! Thank you for such a quick turnaround!!

Just one note - from what I can see of the tests in configurations.test.ts it looks like it doesn't include a check for an intersection of the scoping colors argument in colorVariant(...) for the case where they clash - the good news is that your recent implementation does correctly indicate an error which in the case that follows correctly errors with Error: Variant dark already exists. which is expected!

Example of clash not tested but correctly implemented (i.e. works as it should):

  .colors({
    'on-accent': '#FFFFFF',
    'accent': '#CB116E',

    'on-primary': '#292929',
    'primary': '#FAFAFA',
  })
  .colorVariant('light', '#FF569C', 'accent')
  .colorVariant('dark', '#940043', 'accent')
  .colorVariant('light', '#FFFFFF', 'primary')
  .colorVariant('dark', '#C7C7C7', ['accent', 'primary']); // <<<< this