Skip to content

Colors - adjust palette to steps of 9 when addDarkestTint is true #2855

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

Merged
merged 12 commits into from
Dec 20, 2023
116 changes: 114 additions & 2 deletions demo/src/screens/foundationScreens/ColorsScreen.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,11 @@ import {
Icon,
Button,
TextField,
Incubator
Incubator,
ColorPalette,
ColorPickerDialog
} from 'react-native-ui-lib';
import {renderBooleanOption} from '../ExampleScreenPresenter';

const {Toast} = Incubator;

Expand Down Expand Up @@ -42,7 +45,14 @@ class ColorsScreen extends Component {
searchValue: '',
filteredTokens: [],
showToast: false,
message: undefined
message: undefined,
currentColor: Colors.$textPrimary,
showPicker: false,
isDefaultOptions: false,
adjustLightness: false,
adjustSaturation: false,
addDarkestTints: true,
avoidReverseOnDark: true
};

scrollViewRef = React.createRef();
Expand Down Expand Up @@ -281,13 +291,102 @@ class ColorsScreen extends Component {
);
}

/** Color Palette */

showColorPicker = () => {
this.setState({showPicker: true});
};

onValueChange = (color) => {
this.setState({currentColor: color});
};

onSubmit = (color) => {
this.setState({currentColor: color});
};

onDismiss = () => {
this.setState({showPicker: false});
};

setDefaultOptions = () => {
const designKitsOptions = {adjustLightness: false, adjustSaturation: false, addDarkestTints: true, avoidReverseOnDark: true};
const defaultOptions = {adjustLightness: true, adjustSaturation: true, addDarkestTints: false, avoidReverseOnDark: false};
if (this.state.isDefaultOptions) {
this.setState({...designKitsOptions, isDefaultOptions: false});
} else {
this.setState({...defaultOptions, isDefaultOptions: true});
}
};

renderColorPicker = () => {
const {showPicker, currentColor} = this.state;
return (
<ColorPickerDialog
visible={showPicker}
initialColor={currentColor}
key={currentColor}
onDismiss={this.onDismiss}
onSubmit={this.onSubmit}
/>
);
};

renderOptions = () => {
return (
<View padding-20>
{renderBooleanOption.call(this, 'adjustLightness', 'adjustLightness')}
{renderBooleanOption.call(this, 'adjustSaturation', 'adjustSaturation')}
{renderBooleanOption.call(this, 'addDarkestTints', 'addDarkestTints')}
{renderBooleanOption.call(this, 'avoidReverseOnDark', 'avoidReverseOnDark')}
<Button label={this.state.isDefaultOptions ? 'Reset example' : 'Set defaults'} onPress={this.setDefaultOptions}/>
</View>
);
};

renderColorPalette = () => {
const {currentColor, adjustLightness, adjustSaturation, addDarkestTints, avoidReverseOnDark} = this.state;
const paletteOptions = {adjustLightness, adjustSaturation, addDarkestTints, avoidReverseOnDark};
const palette = Colors.generateColorPalette(currentColor, paletteOptions);
return (
<View margin-12 br40 style={{borderWidth: 1}}>
{this.renderOptions()}
<View center row>
<TouchableOpacity
marginH-10
style={[styles.colorBox, {backgroundColor: currentColor}]}
onPress={this.showColorPicker}
/>
<ColorPalette
colors={palette}
value={currentColor}
swatchStyle={styles.swatchStyle}
containerStyle={{marginLeft: -10}}
onValueChange={this.onValueChange}
/>
</View>
</View>
);
};

renderColorPaletteExample = () => {
return (
<>
<Text text50 marginL-20>Generate Color Palette</Text>
{this.renderColorPalette()}
{this.renderColorPicker()}
</>
);
};

render() {
return (
<>
{this.renderSearch()}
<ScrollView ref={this.scrollViewRef}>
{this.renderDesignTokens()}
{this.renderColors(SYSTEM_COLORS, 'SYSTEM COLORS')}
{this.renderColorPaletteExample()}
</ScrollView>
{this.renderToast()}
</>
Expand All @@ -303,6 +402,19 @@ const styles = StyleSheet.create({
searchField: {
padding: Spacings.s3,
borderRadius: 8
},
colorBox: {
width: 60,
height: 60,
borderWidth: 1,
borderRadius: 30
},
swatchStyle: {
width: 18,
height: 40,
borderRadius: 10,
marginLeft: 4,
marginRight: 4
}
});

Expand Down
182 changes: 119 additions & 63 deletions src/style/__tests__/colors.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,47 +5,51 @@ const SYSTEM_COLORS = ['grey', 'white', 'black'];
const GetColorsByHexOptions = {validColors: SYSTEM_COLORS};

describe('style/Colors', () => {
const logServiceSpy = jest.spyOn(LogService, 'error');
it('should add alpha to hex color value', () => {
expect(uut.rgba(uut.green30, 0.7)).toBe('rgba(0, 168, 126, 0.7)');
expect(uut.rgba(uut.red10, 0.7)).toBe('rgba(213, 39, 18, 0.7)');
expect(uut.rgba(uut.green30, 0.25)).toBe('rgba(0, 168, 126, 0.25)');
// expect(uut.rgba('#ff2442', 0.05)).toBe(`${'#ff2442'}0D`);
// expect(uut.rgba(uut.blue20, 1)).toBe(`${uut.blue20}FF`);
// expect(uut.rgba(uut.blue20)).toBe(`${uut.blue20}FF`);
// expect(uut.rgba(uut.blue20, 2)).toBe(`${uut.blue20}`);
// expect(uut.rgba(uut.blue20, -2)).toBe(`${uut.blue20}`);
// expect(uut.rgba(uut.blue20, '12ddsav')).toBe(`${uut.blue20}`);
});

it('should add alpha to rgb color value', () => {
expect(uut.rgba(101, 200, 136, 0.7)).toBe('rgba(101, 200, 136, 0.7)');
expect(uut.rgba(207, 38, 47, 0.7)).toBe('rgba(207, 38, 47, 0.7)');
expect(uut.rgba(101, 200, 136, 0.25)).toBe('rgba(101, 200, 136, 0.25)');
});

it('should add alpha to 3 digits hex color value', () => {
expect(uut.rgba('#333', 0.7)).toBe('rgba(51, 51, 51, 0.7)');
expect(uut.rgba('#333', 0.1)).toBe('rgba(51, 51, 51, 0.1)');
expect(uut.rgba('#DEF', 0.25)).toBe('rgba(221, 238, 255, 0.25)');
expect(uut.rgba('#F24', 1)).toBe('rgba(255, 34, 68, 1)');
});

it('should handle wrong number of params', () => {
expect(uut.rgba(101, 136, 0.7)).toBe(undefined);
expect(uut.rgba(undefined, 0.2)).toBe(undefined);
expect(logServiceSpy).toHaveBeenNthCalledWith(2, 'Colors.rgba fail due to invalid arguments');
});

it('should handle invalid rgb code', () => {
expect(() => uut.rgba(-12, 128, 136, 0.7)).toThrow(new Error('-12 is invalid rgb code, please use number between 0-255'));
expect(() => uut.rgba(12, 128, 256, 0.7)).toThrow(new Error('256 is invalid rgb code, please use number between 0-255'));
});

it('should handle invalid hex code', () => {
expect(() => uut.rgba('#ff22445', 0.7)).toThrow(new Error('#ff22445 is invalid hex color'));
expect(() => uut.rgba('ff2244', 0.7)).toThrow(new Error('ff2244 is invalid hex color'));
expect(() => uut.rgba('#ff244', 0.7)).toThrow(new Error('#ff244 is invalid hex color'));

describe('rgba', () => {
const logServiceSpy = jest.spyOn(LogService, 'error');

it('should add alpha to hex color value', () => {
expect(uut.rgba(uut.green30, 0.7)).toBe('rgba(0, 168, 126, 0.7)');
expect(uut.rgba(uut.red10, 0.7)).toBe('rgba(213, 39, 18, 0.7)');
expect(uut.rgba(uut.green30, 0.25)).toBe('rgba(0, 168, 126, 0.25)');
// expect(uut.rgba('#ff2442', 0.05)).toBe(`${'#ff2442'}0D`);
// expect(uut.rgba(uut.blue20, 1)).toBe(`${uut.blue20}FF`);
// expect(uut.rgba(uut.blue20)).toBe(`${uut.blue20}FF`);
// expect(uut.rgba(uut.blue20, 2)).toBe(`${uut.blue20}`);
// expect(uut.rgba(uut.blue20, -2)).toBe(`${uut.blue20}`);
// expect(uut.rgba(uut.blue20, '12ddsav')).toBe(`${uut.blue20}`);
});

it('should add alpha to rgb color value', () => {
expect(uut.rgba(101, 200, 136, 0.7)).toBe('rgba(101, 200, 136, 0.7)');
expect(uut.rgba(207, 38, 47, 0.7)).toBe('rgba(207, 38, 47, 0.7)');
expect(uut.rgba(101, 200, 136, 0.25)).toBe('rgba(101, 200, 136, 0.25)');
});

it('should add alpha to 3 digits hex color value', () => {
expect(uut.rgba('#333', 0.7)).toBe('rgba(51, 51, 51, 0.7)');
expect(uut.rgba('#333', 0.1)).toBe('rgba(51, 51, 51, 0.1)');
expect(uut.rgba('#DEF', 0.25)).toBe('rgba(221, 238, 255, 0.25)');
expect(uut.rgba('#F24', 1)).toBe('rgba(255, 34, 68, 1)');
});

it('should handle wrong number of params', () => {
expect(uut.rgba(101, 136, 0.7)).toBe(undefined);
expect(uut.rgba(undefined, 0.2)).toBe(undefined);
expect(logServiceSpy).toHaveBeenNthCalledWith(2, 'Colors.rgba fail due to invalid arguments');
});

it('should handle invalid rgb code', () => {
expect(() => uut.rgba(-12, 128, 136, 0.7)).toThrow(new Error('-12 is invalid rgb code, please use number between 0-255'));
expect(() => uut.rgba(12, 128, 256, 0.7)).toThrow(new Error('256 is invalid rgb code, please use number between 0-255'));
});

it('should handle invalid hex code', () => {
expect(() => uut.rgba('#ff22445', 0.7)).toThrow(new Error('#ff22445 is invalid hex color'));
expect(() => uut.rgba('ff2244', 0.7)).toThrow(new Error('ff2244 is invalid hex color'));
expect(() => uut.rgba('#ff244', 0.7)).toThrow(new Error('#ff244 is invalid hex color'));
});
});

describe('isEmpty', () => {
Expand Down Expand Up @@ -112,38 +116,90 @@ describe('style/Colors', () => {
});

describe('generateColorPalette', () => {
const baseColor = '#3F88C5';
const tints = ['#193852', '#255379', '#316EA1', '#3F88C5', '#66A0D1', '#8DB9DD', '#B5D1E9', '#DCE9F4'];
const baseColorLight = '#DCE9F4';
const tintsLight = ['#1A3851', '#265278', '#326D9F', '#4187C3', '#68A0CF', '#8EB8DC', '#B5D1E8', '#DCE9F4'];
const saturationLevels = [-10, -10, -20, -20, -25, -25, -25, -25, -20, -10];
const tintsSaturationLevels = ['#1E384D', '#2D5271', '#466C8C', '#3F88C5', '#7F9EB8', '#A0B7CB', '#C1D0DD', '#E2E9EE'];
const tintsSaturationLevelsDarkest = ['#162837', '#223F58', '#385770', '#486E90', '#3F88C5', '#7C9CB6', '#9AB2C6', '#B7C9D7', '#D3DFE9', '#F0F5F9'];
const tintsAddDarkestTints = ['#12283B', '#1C405E', '#275881', '#3270A5', '#3F88C5', '#629ED0', '#86B4DA', '#A9CAE5', '#CCDFF0', '#EFF5FA'];

it('should memoize calls for generateColorPalette', () => {
uut.getColorTint('#3F88C5', 20);
uut.getColorTint('#3F88C5', 50);
uut.getColorTint('#3F88C5', 70);
const cachedPalette = uut.generateColorPalette.cache.get('#3F88C5');
uut.getColorTint(baseColor, 20);
uut.getColorTint(baseColor, 50);
uut.getColorTint(baseColor, 70);
const cachedPalette = uut.generateColorPalette.cache.get(baseColor);
expect(cachedPalette).toBeDefined();
expect(cachedPalette.length).toBe(8);
expect(cachedPalette.includes('#3F88C5')).toBe(true);
expect(cachedPalette.includes(baseColor)).toBe(true);
});

it('should generateColorPalette', () => {
const palette = uut.generateColorPalette('#3F88C5');
expect(palette).toEqual(['#193852', '#255379', '#316EA1', '#3F88C5', '#66A0D1', '#8DB9DD', '#B5D1E9', '#DCE9F4']);
it('should generateColorPalette return 8 tints with 10 lightness increment', () => {
const palette = uut.generateColorPalette(baseColor);
expect(palette.length).toBe(8);
expect(palette).toContain(baseColor);
expect(palette).toEqual(tints);
});

it('should generateColorPalette with adjusted saturation', () => {
const palette = uut.generateColorPalette('#FFE5FF');
expect(palette).toEqual(['#661A66', '#8F248F', '#B82EB7', '#D148D1', '#DB71DB', '#E699E6', '#F0C2F0', '#FFE5FF']);
it('should generateColorPalette with adjustLightness option false', () => {
const palette = uut.generateColorPalette(baseColor, {adjustLightness: false});
expect(palette.length).toBe(8);
expect(palette).toContain(baseColor);
expect(palette).toEqual(tints);
});
});

it('should generateColorPalette with avoidReverseOnDark option false not reverse on light mode', () => {
const palette = uut.generateColorPalette('#3F88C5', {avoidReverseOnDark: false});
expect(palette).toEqual(['#193852', '#255379', '#316EA1', '#3F88C5', '#66A0D1', '#8DB9DD', '#B5D1E9', '#DCE9F4']);
});
it('should generateColorPalette with adjustSaturation option false', () => {
const palette = uut.generateColorPalette(baseColorLight, {adjustSaturation: false});
expect(palette.length).toBe(8);
expect(palette).toContain(baseColorLight);
expect(palette).toEqual(tintsLight);
});

it('should generateColorPalette with adjustSaturation option true and saturationLevels 8 array', () => {
const palette = uut.generateColorPalette(baseColor, {adjustSaturation: true, saturationLevels});
expect(palette.length).toBe(8);
expect(palette).toContain(baseColor); // adjusting baseColor tint as well
expect(palette).toEqual(tintsSaturationLevels);
});

it('should generateColorPalette with avoidReverseOnDark option true not reverse on light mode', () => {
const palette = uut.generateColorPalette('#3F88C5', {avoidReverseOnDark: true});
expect(palette).toEqual(['#193852', '#255379', '#316EA1', '#3F88C5', '#66A0D1', '#8DB9DD', '#B5D1E9', '#DCE9F4']);
it('should generateColorPalette with adjustSaturation option true and saturationLevels 10 array and addDarkestTints true', () => {
const options = {adjustSaturation: true, saturationLevels, addDarkestTints: true};
const palette = uut.generateColorPalette(baseColor, options);
expect(palette.length).toBe(10);
expect(palette).toContain(baseColor); // adjusting baseColor tint as well
expect(palette).toEqual(tintsSaturationLevelsDarkest);
});

it('should generateColorPalette with avoidReverseOnDark option false not reverse on light mode (default)', () => {
const palette = uut.generateColorPalette(baseColor, {avoidReverseOnDark: false});
expect(palette.length).toBe(8);
expect(palette).toContain(baseColor);
expect(palette).toEqual(tints);
});

it('should generateColorPalette with avoidReverseOnDark option true not reverse on light mode', () => {
const palette = uut.generateColorPalette(baseColor, {avoidReverseOnDark: true});
expect(palette.length).toBe(8);
expect(palette).toContain(baseColor);
expect(palette).toEqual(tints);
});

it('should generateColorPalette with addDarkestTints option false return 8 tints with 10 lightness increment (default)', () => {
const palette = uut.generateColorPalette(baseColor, {addDarkestTints: false});
expect(palette.length).toBe(8);
expect(palette).toContain(baseColor);
expect(palette).toEqual(tints);
});

it('should generateColorPalette with addDarkestTints option true return 10 tints with 9 lightness increment', () => {
const palette = uut.generateColorPalette(baseColor, {addDarkestTints: true});
expect(palette.length).toBe(10);
expect(palette).toContain(baseColor);
expect(palette).toEqual(tintsAddDarkestTints);
});
});

describe('generateDesignTokens(...)', () => {
describe('generateDesignTokens', () => {
it('should generate design tokens from dark color for light theme', () => {
const primaryColor = '#860D86';
expect(uut.isDark(primaryColor)).toEqual(true);
Expand Down Expand Up @@ -201,7 +257,7 @@ describe('style/Colors', () => {
});
});

describe('isDesignToken(...)', () => {
describe('isDesignToken', () => {
it('should return true if the color passed is design token', () => {
expect(uut.isDesignToken({semantic: ['$textDefault'], toString: () => {}})).toEqual(true);
expect(uut.isDesignToken({resource_paths: ['@color/textNeutral'], toString: () => {}})).toEqual(true);
Expand Down
Loading