Skip to content

Revert "Colors - adjust palette to steps of 9 when addDarkestTint is … #2860

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

Closed
wants to merge 1 commit into from
Closed

Revert "Colors - adjust palette to steps of 9 when addDarkestTint is … #2860

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
116 changes: 2 additions & 114 deletions demo/src/screens/foundationScreens/ColorsScreen.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,8 @@ import {
Icon,
Button,
TextField,
Incubator,
ColorPalette,
ColorPickerDialog
Incubator
} from 'react-native-ui-lib';
import {renderBooleanOption} from '../ExampleScreenPresenter';

const {Toast} = Incubator;

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

scrollViewRef = React.createRef();
Expand Down Expand Up @@ -291,102 +281,13 @@ 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 @@ -402,19 +303,6 @@ 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: 63 additions & 119 deletions src/style/__tests__/colors.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,51 +5,47 @@ const SYSTEM_COLORS = ['grey', 'white', 'black'];
const GetColorsByHexOptions = {validColors: SYSTEM_COLORS};

describe('style/Colors', () => {

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'));
});
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 @@ -116,90 +112,38 @@ 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(baseColor, 20);
uut.getColorTint(baseColor, 50);
uut.getColorTint(baseColor, 70);
const cachedPalette = uut.generateColorPalette.cache.get(baseColor);
uut.getColorTint('#3F88C5', 20);
uut.getColorTint('#3F88C5', 50);
uut.getColorTint('#3F88C5', 70);
const cachedPalette = uut.generateColorPalette.cache.get('#3F88C5');
expect(cachedPalette).toBeDefined();
expect(cachedPalette.includes(baseColor)).toBe(true);
});

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 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 adjustSaturation option false', () => {
const palette = uut.generateColorPalette(baseColorLight, {adjustSaturation: false});
expect(palette.length).toBe(8);
expect(palette).toContain(baseColorLight);
expect(palette).toEqual(tintsLight);
expect(cachedPalette.length).toBe(8);
expect(cachedPalette.includes('#3F88C5')).toBe(true);
});

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', () => {
const palette = uut.generateColorPalette('#3F88C5');
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 adjusted saturation', () => {
const palette = uut.generateColorPalette('#FFE5FF');
expect(palette).toEqual(['#661A66', '#8F248F', '#B82EB7', '#D148D1', '#DB71DB', '#E699E6', '#F0C2F0', '#FFE5FF']);
});
});

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 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 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);
});
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']);
});

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 @@ -257,7 +201,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