Skip to content

Fix/ loadDesignTokens API #2302

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.

Sign up for GitHub

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

Merged
merged 3 commits into from
Oct 27, 2022
Merged

Fix/ loadDesignTokens API #2302

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b1c7b42
fix loadDesignTokens API
lidord-wix Oct 25, 2022
4f0ae9d
review fixes
lidord-wix Oct 27, 2022
f8dd45d
update generateDesignTokens
lidord-wix Oct 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 20 additions & 20 deletions src/style/__tests__/colors.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,23 +126,23 @@ describe('style/Colors', () => {

describe('generateDesignTokens(...)', () => {
it('should generate design tokens from dark color for light theme', () => {
const chosenColor = '#860D86';
expect(uut.isDark(chosenColor)).toEqual(true);
expect(uut.generateDesignTokens(chosenColor, 'light')).toEqual({
$backgroundPrimaryHeavy: chosenColor,
const primaryColor = '#860D86';
expect(uut.isDark(primaryColor)).toEqual(true);
expect(uut.generateDesignTokens({primaryColor})).toEqual({
$backgroundPrimaryHeavy: primaryColor,
$backgroundPrimaryLight: '#FFFAFF',
$backgroundPrimaryMedium: '#FACCFA',
$iconPrimary: chosenColor,
$iconPrimary: primaryColor,
$iconPrimaryLight: '#F16FF1',
$outlinePrimary: chosenColor,
$textPrimary: chosenColor
$outlinePrimary: primaryColor,
$textPrimary: primaryColor
});
});

it('should generate design tokens from light color for light theme', () => {
const chosenColor = '#E9BEE7';
expect(uut.isDark(chosenColor)).toEqual(false);
expect(uut.generateDesignTokens(chosenColor, 'light')).toEqual({
const primaryColor = '#E9BEE7';
expect(uut.isDark(primaryColor)).toEqual(false);
expect(uut.generateDesignTokens({primaryColor})).toEqual({
$backgroundPrimaryHeavy: '#A4379F',
$backgroundPrimaryLight: '#F6E4F5',
$backgroundPrimaryMedium: '#E9BEE7',
Expand All @@ -154,9 +154,9 @@ describe('style/Colors', () => {
});

it('should generate design tokens from dark color for dark theme', () => {
const chosenColor = '#860D86';
expect(uut.isDark(chosenColor)).toEqual(true);
expect(uut.generateDesignTokens(chosenColor, 'dark')).toEqual({
const primaryColor = '#860D86';
expect(uut.isDark(primaryColor)).toEqual(true);
expect(uut.generateDesignTokens({primaryColor, dark: true})).toEqual({
$backgroundPrimaryHeavy: '#F69DF6',
$backgroundPrimaryLight: '#860D86',
$backgroundPrimaryMedium: '#B512B5',
Expand All @@ -168,16 +168,16 @@ describe('style/Colors', () => {
});

it('should generate design tokens from light color for dark theme', () => {
const chosenColor = '#E9BEE7';
expect(uut.isDark(chosenColor)).toEqual(false);
expect(uut.generateDesignTokens(chosenColor, 'dark')).toEqual({
$backgroundPrimaryHeavy: chosenColor,
const primaryColor = '#E9BEE7';
expect(uut.isDark(primaryColor)).toEqual(false);
expect(uut.generateDesignTokens({primaryColor, dark: true})).toEqual({
$backgroundPrimaryHeavy: primaryColor,
$backgroundPrimaryLight: '#581E55',
$backgroundPrimaryMedium: '#7E2B7A',
$iconPrimary: chosenColor,
$iconPrimary: primaryColor,
$iconPrimaryLight: '#C24CBD',
$outlinePrimary: chosenColor,
$textPrimary: chosenColor
$outlinePrimary: primaryColor,
$textPrimary: primaryColor
});
});
});
Expand Down
41 changes: 11 additions & 30 deletions src/style/colors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,10 +49,10 @@ export class Colors {
* Load light and dark schemes based on generated design tokens
* @param color - palette color
*/
loadDesignTokens(color: string) {
loadDesignTokens({primaryColor}: {primaryColor: string}) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why not make the type a defined type, like export type TokensOptions: {primaryColor: string}, and have a parameter like loadDesignTokens(options: TokensOptions)? Then you can use options?.primaryColor etc.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

this.loadSchemes({
light: this.generateLightModeTokens(color),
dark: this.generateDarkModeTokens(color)
light: this.generateDesignTokens({primaryColor}),
dark: this.generateDesignTokens({primaryColor, dark: true})
});
}

Expand Down Expand Up @@ -220,38 +220,19 @@ export class Colors {
return this.shouldSupportDarkMode && Scheme.getSchemeType() === 'dark' ? _.reverse(palette) : palette;
});

generateDesignTokens(color: string, mode: 'light' | 'dark' = 'light') {
return mode === 'light' ? this.generateLightModeTokens(color) : this.generateDarkModeTokens(color);
}

private generateLightModeTokens(color: string) {
const colorPalette: string[] = this.generatePalette(color);
const color30 = colorPalette[2];
const color50 = colorPalette[4];
const color70 = colorPalette[6];
const color80 = colorPalette[7];

const mainColor = this.isDark(color) ? color : color30;

return {
$backgroundPrimaryHeavy: mainColor,
$backgroundPrimaryLight: color80,
$backgroundPrimaryMedium: color70,
$iconPrimary: mainColor,
$iconPrimaryLight: color50,
$textPrimary: mainColor,
$outlinePrimary: mainColor
};
}

private generateDarkModeTokens(color: string) {
const colorPalette: string[] = _.reverse(this.generatePalette(color));
private generateDesignTokens({primaryColor, dark}: {primaryColor: string; dark?: boolean}) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why the parameter here is an object? This method is private so no worries about changing its signature in the future. The parameters could be simply primaryColor: string and dark: boolean.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

const colorPalette: string[] = dark
? _.reverse(this.generatePalette(primaryColor))
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can generate the palette outside of the condition and reverse the array if it is for a dark palette, this way you save the code duplication

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I actually tried it and found it less readable that generateDesignTokens() will need to get the primaryColor, the palette, and the dark boolean as parameters. it gets all the logic out of the method.
And I think it's not that bad to call it twice since it happens only once when the app starts.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree that the palette should be generated in the method, but you can still do it once and only reverse the array if dark = true. For example:
let colorPalette = this.generatePalette(primaryColor); if (dark) { colorPalette = _.reverse(colorPalette); }

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ohh right!
done

: this.generatePalette(primaryColor);
const color30 = colorPalette[2];
const color50 = colorPalette[4];
const color70 = colorPalette[6];
const color80 = colorPalette[7];

const mainColor = this.isDark(color) ? color30 : color;
let mainColor = this.isDark(primaryColor) ? primaryColor : color30;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same here - check if isDark() once and apply the changes to mainColor if dark is true (instead of checking isDark() twice in this case).

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I rewrote this condition and ended up with this one:

const mainColor = this.isDark(primaryColor) === !!dark ? color30 : primaryColor

because I want to use color30 only if the color is light in light mode or dark in dark mode, but I'm not sure if it makes the code more readable than that:

let mainColor = isPrimaryColorDark ? primaryColor : color30;
if (dark) {
  mainColor = isPrimaryColorDark ? color30 : primaryColor;
}

WDYT?

Copy link
Collaborator

@Inbal-Tish Inbal-Tish Oct 27, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I think this is readable:

const isPrimaryColorDark = this.isDark(primaryColor)
let mainColor = isPrimaryColorDark ? primaryColor : color30;
if (dark) {
  mainColor = isPrimaryColorDark ? color30 : primaryColor;
}

if (dark) {
mainColor = this.isDark(primaryColor) ? color30 : primaryColor;
}

return {
$backgroundPrimaryHeavy: mainColor,
Expand Down