x4js 1.4.2

package/src/colorpicker.ts

@@ -0,0 +1,1618 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|  
+*  /__/\__\   |_|
+*        
+* @file colorpicker.ts
+* @author Etienne Cochard 
+* @license
+* Copyright (c) 2019-2021 R-libre ingenierie
+*
+* This program is free software; you can redistribute it and/or modify
+* it under the terms of the GNU General Public License as published by
+* the Free Software Foundation; either version 3 of the License, or
+* (at your option) any later version.
+*
+* This program is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+* GNU General Public License for more details.
+*
+* You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
+**/
+
+
+import { Container, Component, ContainerProps, ContainerEventMap } from './component'
+import { CheckBox } from './checkbox'
+import { Dialog, DialogBoxEventMap, DialogProps } from './dialog'
+import { EvChange, EventCallback } from './x4_events'
+import { VLayout, HLayout } from './layout'
+import { Label } from './label'
+import { Color } from './color'
+import { isString, getMousePos, clamp, classNames } from './tools'
+import { TextEdit } from './textedit'
+import { Menu, MenuItem } from './menu'
+
+interface ColorPickerEventMap extends ContainerEventMap {
+	change: EvChange;
+}
+
+export interface ColorPickerProps extends ContainerProps<ColorPickerEventMap> {
+	color: Color;
+	hasAlpha?: boolean;
+}
+
+const pal_colors = {
+	blue: [0x0e5a8a, 0x106ba3, 0x137cbd, 0x2b95d6, 0x48aff0,],
+	green: [0x0a6640, 0x0d8050, 0x0f9960, 0x15b371, 0x3dcc91,],
+	orange: [0xa66321, 0xbf7326, 0xd9822b, 0xf29d49, 0xffb366,],
+	red: [0xa82a2a, 0xc23030, 0xdb3737, 0xf55656, 0xff7373,],
+	vermilion: [0x9e2b0e, 0xb83211, 0xd13913, 0xeb532d, 0xff6e4a,],
+	rose: [0xa82255, 0xc22762, 0xdb2c6f, 0xf5498b, 0xff66a1,],
+	violet: [0x5c255c, 0x752f75, 0x8f398f, 0xa854a8, 0xc274c2,],
+	indigo: [0x5642a6, 0x634dbf, 0x7157d9, 0x9179f2, 0xad99ff,],
+	cobalt: [0x1f4b99, 0x2458b3, 0x2965cc, 0x4580e6, 0x669eff,],
+	turquoise: [0x008075, 0x00998c, 0x00b3a4, 0x14ccbd, 0x2ee6d6,],
+	forest: [0x1d7324, 0x238c2c, 0x29a634, 0x43bf4d, 0x62d96b,],
+	lime: [0x728c23, 0x87a629, 0x9bbf30, 0xb6d94c, 0xd1f26d,],
+	gold: [0xa67908, 0xbf8c0a, 0xd99e0b, 0xf2b824, 0xffc940,],
+	sepia: [0x63411e, 0x7d5125, 0x96622d, 0xb07b46, 0xc99765,],
+	bw: [0x000000, 0x444444, 0x666666, 0xcccccc, 0xffffff,],
+};
+
+
+
+export class ColorPicker extends Container<ColorPickerProps, ColorPickerEventMap> {
+
+	private m_colorSel: Component;
+	private m_colorHue: Component;
+	private m_colorAlpha: Component;
+	private m_sample: Component;
+	private m_selMark: Component;
+	private m_hueMark: Component;
+	private m_alphaMark: Component;
+
+	private m_baseHSV: { h: number, s: number, v: number, a: number };
+	private m_baseColor: Color;
+	private m_transpCk: CheckBox;
+	private m_colorEdit: TextEdit;
+
+	private m_palmode: boolean;
+
+	static last_palmode = false;
+
+	constructor(props: ColorPickerProps) {
+		super(props);
+		this.m_palmode = ColorPicker.last_palmode;
+		this.setDomEvent('contextmenu', (e) => this._showCtx(e));
+	}
+
+	private _showCtx(e: UIEvent) {
+		const menu = new Menu({
+			items: [
+				new MenuItem({
+					text: 'Palette', checked: this.m_palmode, click: () => {
+						this.m_palmode = !this.m_palmode;
+						ColorPicker.last_palmode = this.m_palmode;
+						this.update();
+					}
+				})
+			]
+		})
+
+		let pt = getMousePos(e, true);
+		menu.displayAt(pt.x, pt.y);
+	}
+
+	render(props: ColorPickerProps) {
+
+		this.m_baseColor = props.color;
+		this.m_baseHSV = Color.toHSV(this.m_baseColor);
+
+		if (this.m_palmode) {
+
+			this.addClass("pal-mode");
+
+			let selector = null;
+			let cur = null;
+
+			let main_sel = [];
+			let sub_sel = [];
+
+			const ccolor = this.m_baseColor.value();
+
+			materialColors.forEach(mc => {
+				const color = mc.variations[4].hex;
+				
+				let selected = color === ccolor;
+				if( !selected ) {
+					selected = mc.variations.some( c => {
+						const cc = new Color(c.hex).value();
+						if( cc===ccolor ) {
+							return true;
+						}
+					});
+				}
+
+				let cls = classNames('clr-box xbox', { selected });
+				let el = new Component({ 
+					cls, 
+					style: { backgroundColor: new Color(color).toHex() }, 
+					data: { color, main: mc.variations } 
+				});
+
+				if( selected ) {
+					fillSubs( mc.variations );
+				}
+
+				main_sel.push(el);
+			});
+
+			function fillSubs( colors ) {
+				sub_sel = [];
+				colors.forEach(mc => {
+					let clr = new Color(mc.hex);
+					const selected = clr.value() == ccolor;
+
+					let cls = classNames('hclr-box xbox', { selected });
+					
+					let el = new Component({ 
+						cls, 
+						style: { backgroundColor: clr.toHex(), color: Color.contrastColor(clr).toHex() }, 
+						data: { color: clr.value() } ,
+						content: clr.toHex()
+					});
+
+					sub_sel.push(el);
+
+					if( selected ) {
+						cur = el;
+					}
+				});
+
+				if( selector ) {
+					selector.itemWithId('vsel').setContent( sub_sel );
+				}
+			}
+
+			selector = new VLayout({
+				content: [
+					new HLayout({
+						id: 'hsel',
+						content: main_sel
+					}),
+					new VLayout({
+						id: 'vsel',
+						flex: 1,
+						content: sub_sel
+					})
+				]
+			});
+
+
+			/*
+			let cur = null;
+			const buildCol = ( colors: number[] ) => {
+				
+				const ccolor = this.m_baseColor.value();
+				const els = colors.map( x => {
+					const selected = x==ccolor;
+
+					let cls = classNames( 'clr-box', { selected } );
+					let el = new Component( { cls, style: { backgroundColor: new Color(x).toHex() }, data: { color: x } } );
+
+					if( selected ) {
+						cur = el;
+					}
+					return el;
+				});
+				
+				return new VLayout( {
+					cls: 'vcol',
+					content: els
+				});
+			}
+			
+			let rows = new HLayout( {
+				cls: 'hcol',
+				content: [
+						buildCol( pal_colors.blue ),
+						buildCol( pal_colors.green ),
+						buildCol( pal_colors.orange ),
+						buildCol( pal_colors.red ),
+						buildCol( pal_colors.vermilion ),
+						buildCol( pal_colors.rose ),
+						buildCol( pal_colors.violet ),
+						buildCol( pal_colors.indigo ),
+						buildCol( pal_colors.cobalt ),
+						buildCol( pal_colors.turquoise ),
+						buildCol( pal_colors.forest ),
+						buildCol( pal_colors.lime ),
+						buildCol( pal_colors.gold ),
+						buildCol( pal_colors.sepia ),
+						buildCol( pal_colors.bw ),
+				]
+			});
+			*/
+
+
+			this.m_colorEdit = new TextEdit({
+				cls: 'hexv',
+				value: '',
+				attrs: {
+					spellcheck: false,
+				},
+				change: (ev) => {
+					const clr = new Color(ev.value);
+					if (clr) {
+						this.m_baseColor = clr;
+						this.m_baseHSV = Color.toHSV(clr);
+						this._updateColor(false);
+					}
+				}
+			});
+
+			this.m_transpCk = new CheckBox({
+				cls: 'transp',
+				text: 'transparent',
+				change: (ev) => {
+					this.m_baseHSV.a = ev.value ? 0 : 1;
+					this._updateColor();
+				}
+			});
+
+			this.setContent([selector, this.m_transpCk, this.m_colorEdit]);
+
+			// globally handle click
+
+			selector.setDomEvent('click', (ev) => {
+
+				if (cur) {
+					cur.removeClass('selected');
+					cur = null;
+				}
+
+				let cell = Component.getElement(ev.target as HTMLElement, 'xbox');
+				if (cell) {
+					const subs = cell.getData('main');
+					if( subs ) {
+						fillSubs( subs );
+					}
+					else {
+						const clr = new Color(cell.getData('color'));
+						this.m_baseColor = clr;
+						this.m_baseHSV = Color.toHSV(clr);
+						this._updateColor();
+
+						cur = cell;
+						cell.addClass('selected');
+					}
+				}
+
+			});
+		}
+		else {
+			this.removeClass("pal-mode");
+
+			this.m_selMark = new Component({ cls: 'marker' });
+			this.m_colorSel = new Component({
+				cls: 'sel',
+				content: [
+					new Component({ cls: '@fit light' }),
+					new Component({ cls: '@fit dark' }),
+					this.m_selMark,
+				]
+			});
+
+			this.m_hueMark = new Component({ cls: 'marker' });
+			this.m_colorHue = new Component({
+				cls: 'hue',
+				content: [
+					this.m_hueMark
+				]
+			});
+			this.m_sample = new Component({ cls: 'sample' });
+
+			if (props.hasAlpha) {
+				this.addClass('with-alpha');
+				this.m_alphaMark = new Component({ cls: 'marker' });
+				this.m_colorAlpha = new Component({
+					cls: 'alpha',
+					content: [
+						new Component({ cls: 'bk @fit', ref: 'color' }),
+						this.m_alphaMark
+					]
+				});
+			}
+			else {
+				this.removeClass('with-alpha');
+				this.m_transpCk = new CheckBox({
+					cls: 'transp',
+					text: 'transparent',
+					change: (ev) => {
+						this.m_baseHSV.a = ev.value ? 0 : 1;
+						this._updateColor();
+					}
+				});
+			}
+
+			this.m_colorEdit = new TextEdit({
+				cls: 'hexv',
+				value: '',
+				attrs: {
+					spellcheck: false,
+				},
+				change: (ev) => {
+					const clr = new Color(ev.value);
+					if (clr) {
+						this.m_baseColor = clr;
+						this.m_baseHSV = Color.toHSV(clr);
+						this._updateColor(false);
+					}
+				}
+			});
+
+			this.setContent([
+				this.m_colorSel,
+				this.m_colorHue,
+				this.m_colorAlpha,
+				this.m_transpCk,
+				this.m_colorEdit,
+				this.m_sample,
+			]);
+
+			this.m_colorSel.setDomEvent('mousedown', (ev: MouseEvent) => {
+				Component.setCapture(this, (e) => this._selChange(e));
+			});
+
+			this.m_colorHue.setDomEvent('mousedown', (ev: MouseEvent) => {
+				Component.setCapture(this, (e) => this._hueChange(e));
+			});
+
+			if (props.hasAlpha) {
+				this.m_colorAlpha.setDomEvent('mousedown', (ev: MouseEvent) => {
+					Component.setCapture(this, (e) => this._alphaChange(e));
+				});
+			}
+
+			this._updateColor();
+		}
+	}
+
+	set color(clr: Color) {
+		this.m_baseColor = clr;
+		this.m_baseHSV = Color.toHSV(this.m_baseColor);
+
+		this._updateColor();
+	}
+
+	get color() {
+		return this.m_baseColor;
+	}
+
+	private _selChange(ev: UIEvent) {
+		let pt = getMousePos(ev, true);
+		console.log(pt);
+		let rc = this.m_colorSel.getBoundingRect();
+
+		if (!this.m_props.hasAlpha) {
+			this.m_baseHSV.a = 1;
+		}
+
+		this.m_baseHSV.s = clamp((pt.x - rc.left) / rc.width, 0, 1);
+		this.m_baseHSV.v = 1 - clamp((pt.y - rc.top) / rc.height, 0, 1);
+		this._updateColor();
+
+		if (ev.type == 'mouseup' || ev.type == 'touchend') {
+			Component.releaseCapture();
+		}
+	}
+
+	private _hueChange(ev: UIEvent) {
+		let pt = getMousePos(ev, true);
+		let rc = this.m_colorHue.getBoundingRect();
+
+		this.m_baseHSV.h = clamp((pt.y - rc.top) / rc.height, 0, 1);
+		this._updateColor();
+
+		if (ev.type == 'mouseup' || ev.type == 'touchend') {
+			Component.releaseCapture();
+		}
+	}
+
+	private _alphaChange(ev: UIEvent) {
+		let pt = getMousePos(ev, true);
+		let rc = this.m_colorAlpha.getBoundingRect();
+
+		this.m_baseHSV.a = clamp((pt.x - rc.left) / rc.width, 0, 1);
+		this._updateColor();
+
+		if (ev.type == 'mouseup' || ev.type == 'touchend') {
+			Component.releaseCapture();
+		}
+	}
+
+	private _updateColor(edit = true) {
+
+		let color: Color;
+
+		if (!this.m_palmode) {
+
+			color = Color.fromHSV(this.m_baseHSV.h, 1, 1, 1);
+			this.m_colorSel.setStyleValue('backgroundColor', color.toString());
+
+			color = Color.fromHSV(this.m_baseHSV.h, this.m_baseHSV.s, this.m_baseHSV.v, 1);
+			this.m_sample.setStyleValue('backgroundColor', color.toString());
+
+			if (this.m_props.hasAlpha) {
+				let gradient = `linear-gradient(to right, rgba(0,0,0,0) 0%, ${color.toString()} 100%)`;
+				this.m_colorAlpha.itemWithRef<Component>('color').setStyleValue('backgroundImage', gradient);
+			}
+
+			this.m_selMark.setStyle({
+				left: (this.m_baseHSV.s * 100) + '%',
+				top: (100 - this.m_baseHSV.v * 100) + '%',
+			});
+
+			this.m_hueMark.setStyle({
+				top: (this.m_baseHSV.h * 100) + '%',
+			});
+
+			if (this.m_props.hasAlpha) {
+				this.m_alphaMark.setStyle({
+					left: (this.m_baseHSV.a * 100) + '%',
+				});
+			}
+			else {
+				this.m_transpCk.check = this.m_baseHSV.a == 0;
+			}
+		}
+		else {
+			this.m_transpCk.check = this.m_baseHSV.a == 0;
+		}
+
+		color = Color.fromHSV(this.m_baseHSV.h, this.m_baseHSV.s, this.m_baseHSV.v, this.m_baseHSV.a);
+		this.m_baseColor = color;
+
+		if (edit) {
+			this.m_colorEdit.value = color.alpha() == 1 ? color.toHex() : color.toString()	//color.toHex();
+		}
+
+		this._change();
+	}
+
+	private _change() {
+		this.emit('change', EvChange(this.m_baseColor));
+	}
+}
+
+// :: color dialog ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+
+interface ColorPickerBoxEventMap extends DialogBoxEventMap {
+	change: EvChange;
+}
+
+export interface ColorPickerBoxProps extends DialogProps<ColorPickerBoxEventMap> {
+	color: Color;
+	hasAlpha?: boolean;
+	cust_colors?: Color[];
+
+	change?: EventCallback<EvChange>;	// shortcut to { event: change: ... }
+}
+
+
+export class ColorPickerBox extends Dialog<ColorPickerBoxProps, ColorPickerBoxEventMap>
+{
+	private m_picker: ColorPicker;
+
+	constructor(props: ColorPickerBoxProps) {
+
+		props.icon = undefined;
+		props.buttons = undefined;
+
+		super(props);
+
+		this.mapPropEvents(props, 'change');
+
+		this.m_picker = new ColorPicker({
+			color: props.color,
+			hasAlpha: props.hasAlpha,
+			style: { padding: 8 },
+			width: 250,
+			height: 250,
+		});
+
+		let customs = this._makeCustoms(props.cust_colors);
+
+		this.form.updateContent([
+			new VLayout({
+				content: [
+					this.m_picker,
+					customs
+				]
+			})
+		], ['ok', 'cancel']);
+
+		this.on('btnClick', (ev) => {
+			if (ev.button == 'ok') {
+				this.emit('change', EvChange(this.m_picker.color));
+			}
+		});
+	}
+
+	private _makeCustoms(cc) {
+
+		let custom = null;
+
+		if (cc && cc.length > 0) {
+
+			let els = [];
+
+			for (let i = 0; i < cc.length; i += 8) {
+
+				let lne = [];
+
+				for (let j = 0; j < 8; j++) {
+
+					let idx = i + j,
+						clr = cc[idx];
+
+					lne.push(new Label({
+						cls: 'cust-cc',
+						text: '',
+						flex: 1,
+						style: {
+							backgroundColor: clr ? clr.toString() : 'transparent'
+						},
+						tooltip: clr ? clr.toString() : undefined,
+						dom_events: {
+							click: () => {
+								if (clr) {
+									this.m_picker.color = clr;
+									this.emit('change', EvChange(clr));
+									this.close();
+								}
+							}
+						}
+					}));
+				}
+
+				els.push(new HLayout({ cls: 'line', content: lne }));
+			}
+
+			custom = new VLayout({ cls: 'customs', content: els });
+		}
+
+		return custom;
+	}
+
+	set color(clr: Color) {
+		this.m_picker.color = clr;
+	}
+
+	get color() {
+		return this.m_picker.color;
+	}
+
+	/**
+	 * display a messagebox
+	 */
+
+	static show(props: string | ColorPickerBoxProps): ColorPickerBox {
+
+		let msg;
+
+		if (isString(props)) {
+			msg = new ColorPickerBox({ color: new Color(props) });
+		}
+		else {
+			msg = new ColorPickerBox(props);
+		}
+
+		msg.show();
+		return msg;
+	}
+}
+
+// :: PickerEditor ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+
+export interface ColorPickerEditorProps extends ColorPickerProps {
+	label?: string;
+	labelWidth?: number;
+	cust_colors?: Color[];
+
+	change: EventCallback<EvChange>;
+}
+
+export class ColorPickerEditor extends HLayout<ColorPickerEditorProps, ColorPickerEventMap> {
+
+	constructor(props: ColorPickerEditorProps) {
+		super(props);
+
+		this.mapPropEvents(props, 'change');
+	}
+
+	render(props: ColorPickerEditorProps) {
+
+		let color = props.color;
+		let tcolor: string;
+
+		if (this._isTransp(color)) {
+			color = Color.NONE;
+			tcolor = 'black';
+		}
+		else {
+			tcolor = Color.contrastColor(color).toString();
+		}
+
+		this.setContent([
+			props.label ? new Label({
+				cls: 'label',
+				text: props.label,
+				flex: props.labelWidth < 0 ? -props.labelWidth : undefined,
+				width: props.labelWidth >= 0 ? props.labelWidth : undefined,
+			}) : null,
+			new Label({
+				cls: 'value',
+				flex: 1,
+				text: color.toHex(),
+				style: {
+					backgroundColor: color.toString(),
+					color: tcolor
+				},
+				dom_events: {
+					click: () => this._showPicker()
+				}
+			})
+		]);
+
+		this._setTabIndex(props.tabIndex);
+	}
+
+	set value(color: Color) {
+		this.m_props.color = color;
+		this.update();
+	}
+
+	get value() {
+		return this.m_props.color;
+	}
+
+	set custom_colors(v: Color[]) {
+		this.m_props.cust_colors = v;
+	}
+
+	private _showPicker() {
+		let dlg = new ColorPickerBox({
+			color: this.m_props.color,
+			cust_colors: this.m_props.cust_colors,
+			hasAlpha: this.m_props.hasAlpha,
+			events: {
+				change: (e) => {
+					this.m_props.color = e.value as Color;
+					this._change();
+					this.update();
+				}
+			}
+		});
+
+		let rc = this.getBoundingRect();
+		dlg.displayAt(rc.left, rc.bottom, 'tl');
+	}
+
+	private _change() {
+		this.emit('change', EvChange(this.m_props.color));
+	}
+
+	private _isTransp(color: Color) {
+		return !color.alpha();
+	}
+}
+
+
+// :: Material colors scheme ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
+
+const materialColors = [
+	{
+		color: "Red",
+		variations: [
+			{
+				weight: 50,
+				hex: 0xFFEBEE
+			},
+			{
+				weight: 100,
+				hex: 0xFFCDD2
+			},
+			{
+				weight: 200,
+				hex: 0xEF9A9A
+			},
+			{
+				weight: 300,
+				hex: 0xE57373
+			},
+			{
+				weight: 400,
+				hex: 0xEF5350
+			},
+			{
+				weight: 500,
+				hex: 0xF44336
+			},
+			{
+				weight: 600,
+				hex: 0xE53935
+			},
+			{
+				weight: 700,
+				hex: 0xD32F2F
+			},
+			{
+				weight: 800,
+				hex: 0xC62828
+			},
+			{
+				weight: 900,
+				hex: 0xB71C1C
+			}
+		]
+	},
+	{
+		color: "Pink",
+		variations: [
+			{
+				weight: 50,
+				hex: 0xFCE4EC
+			},
+			{
+				weight: 100,
+				hex: 0xF8BBD0
+			},
+			{
+				weight: 200,
+				hex: 0xF48FB1
+			},
+			{
+				weight: 300,
+				hex: 0xF06292
+			},
+			{
+				weight: 400,
+				hex: 0xEC407A
+			},
+			{
+				weight: 500,
+				hex: 0xE91E63
+			},
+			{
+				weight: 600,
+				hex: 0xD81B60
+			},
+			{
+				weight: 700,
+				hex: 0xC2185B
+			},
+			{
+				weight: 800,
+				hex: 0xAD1457
+			},
+			{
+				weight: 900,
+				hex: 0x880E4F
+			}
+		]
+	},
+	{
+		color: "Purple",
+		variations: [
+			{
+				weight: 50,
+				hex: 0xF3E5F5
+			},
+			{
+				weight: 100,
+				hex: 0xE1BEE7
+			},
+			{
+				weight: 200,
+				hex: 0xCE93D8
+			},
+			{
+				weight: 300,
+				hex: 0xBA68C8
+			},
+			{
+				weight: 400,
+				hex: 0xAB47BC
+			},
+			{
+				weight: 500,
+				hex: 0x9C27B0
+			},
+			{
+				weight: 600,
+				hex: 0x8E24AA
+			},
+			{
+				weight: 700,
+				hex: 0x7B1FA2
+			},
+			{
+				weight: 800,
+				hex: 0x6A1B9A
+			},
+			{
+				weight: 900,
+				hex: 0x4A148C
+			}
+		]
+	},
+	{
+		color: "Deep Purple",
+		variations: [
+			{
+				weight: 50,
+				hex: 0xEDE7F6
+			},
+			{
+				weight: 100,
+				hex: 0xD1C4E9
+			},
+			{
+				weight: 200,
+				hex: 0xB39DDB
+			},
+			{
+				weight: 300,
+				hex: 0x9575CD
+			},
+			{
+				weight: 400,
+				hex: 0x7E57C2
+			},
+			{
+				weight: 500,
+				hex: 0x673AB7
+			},
+			{
+				weight: 600,
+				hex: 0x5E35B1
+			},
+			{
+				weight: 700,
+				hex: 0x512DA8
+			},
+			{
+				weight: 800,
+				hex: 0x4527A0
+			},
+			{
+				weight: 900,
+				hex: 0x311B92
+			}
+		]
+	},
+	{
+		color: "Indigo",
+		variations: [
+			{
+				weight: 50,
+				hex: 0xE8EAF6
+			},
+			{
+				weight: 100,
+				hex: 0xC5CAE9
+			},
+			{
+				weight: 200,
+				hex: 0x9FA8DA
+			},
+			{
+				weight: 300,
+				hex: 0x7986CB
+			},
+			{
+				weight: 400,
+				hex: 0x5C6BC0
+			},
+			{
+				weight: 500,
+				hex: 0x3F51B5
+			},
+			{
+				weight: 600,
+				hex: 0x3949AB
+			},
+			{
+				weight: 700,
+				hex: 0x303F9F
+			},
+			{
+				weight: 800,
+				hex: 0x283593
+			},
+			{
+				weight: 900,
+				hex: 0x1A237E
+			}
+		]
+	},
+	{
+		color: "Blue",
+		variations: [
+			{
+				weight: 50,
+				hex: 0xE3F2FD
+			},
+			{
+				weight: 100,
+				hex: 0xBBDEFB
+			},
+			{
+				weight: 200,
+				hex: 0x90CAF9
+			},
+			{
+				weight: 300,
+				hex: 0x64B5F6
+			},
+			{
+				weight: 400,
+				hex: 0x42A5F5
+			},
+			{
+				weight: 500,
+				hex: 0x2196F3
+			},
+			{
+				weight: 600,
+				hex: 0x1E88E5
+			},
+			{
+				weight: 700,
+				hex: 0x1976D2
+			},
+			{
+				weight: 800,
+				hex: 0x1565C0
+			},
+			{
+				weight: 900,
+				hex: 0x0D47A1
+			}
+		]
+	},
+	{
+		color: "Light Blue",
+		variations: [
+			{
+				weight: 50,
+				hex: 0xE1F5FE
+			},
+			{
+				weight: 100,
+				hex: 0xB3E5FC
+			},
+			{
+				weight: 200,
+				hex: 0x81D4FA
+			},
+			{
+				weight: 300,
+				hex: 0x4FC3F7
+			},
+			{
+				weight: 400,
+				hex: 0x29B6F6
+			},
+			{
+				weight: 500,
+				hex: 0x03A9F4
+			},
+			{
+				weight: 600,
+				hex: 0x039BE5
+			},
+			{
+				weight: 700,
+				hex: 0x0288D1
+			},
+			{
+				weight: 800,
+				hex: 0x0277BD
+			},
+			{
+				weight: 900,
+				hex: 0x01579B
+			}
+		]
+	},
+	{
+		color: "Cyan",
+		variations: [
+			{
+				weight: 50,
+				hex: 0xE0F7FA
+			},
+			{
+				weight: 100,
+				hex: 0xB2EBF2
+			},
+			{
+				weight: 200,
+				hex: 0x80DEEA
+			},
+			{
+				weight: 300,
+				hex: 0x4DD0E1
+			},
+			{
+				weight: 400,
+				hex: 0x26C6DA
+			},
+			{
+				weight: 500,
+				hex: 0x00BCD4
+			},
+			{
+				weight: 600,
+				hex: 0x00ACC1
+			},
+			{
+				weight: 700,
+				hex: 0x0097A7
+			},
+			{
+				weight: 800,
+				hex: 0x00838F
+			},
+			{
+				weight: 900,
+				hex: 0x006064
+			}
+		]
+	},
+	{
+		color: "Teal",
+		variations: [
+			{
+				weight: 50,
+				hex: 0xE0F2F1
+			},
+			{
+				weight: 100,
+				hex: 0xB2DFDB
+			},
+			{
+				weight: 200,
+				hex: 0x80CBC4
+			},
+			{
+				weight: 300,
+				hex: 0x4DB6AC
+			},
+			{
+				weight: 400,
+				hex: 0x26A69A
+			},
+			{
+				weight: 500,
+				hex: 0x009688
+			},
+			{
+				weight: 600,
+				hex: 0x00897B
+			},
+			{
+				weight: 700,
+				hex: 0x00796B
+			},
+			{
+				weight: 800,
+				hex: 0x00695C
+			},
+			{
+				weight: 900,
+				hex: 0x004D40
+			}
+		]
+	},
+	{
+		color: "Green",
+		variations: [
+			{
+				weight: 50,
+				hex: 0xE8F5E9
+			},
+			{
+				weight: 100,
+				hex: 0xC8E6C9
+			},
+			{
+				weight: 200,
+				hex: 0xA5D6A7
+			},
+			{
+				weight: 300,
+				hex: 0x81C784
+			},
+			{
+				weight: 400,
+				hex: 0x66BB6A
+			},
+			{
+				weight: 500,
+				hex: 0x4CAF50
+			},
+			{
+				weight: 600,
+				hex: 0x43A047
+			},
+			{
+				weight: 700,
+				hex: 0x388E3C
+			},
+			{
+				weight: 800,
+				hex: 0x2E7D32
+			},
+			{
+				weight: 900,
+				hex: 0x1B5E20
+			}
+		]
+	},
+	{
+		color: "Light Green",
+		variations: [
+			{
+				weight: 50,
+				hex: 0xF1F8E9
+			},
+			{
+				weight: 100,
+				hex: 0xDCEDC8
+			},
+			{
+				weight: 200,
+				hex: 0xC5E1A5
+			},
+			{
+				weight: 300,
+				hex: 0xAED581
+			},
+			{
+				weight: 400,
+				hex: 0x9CCC65
+			},
+			{
+				weight: 500,
+				hex: 0x8BC34A
+			},
+			{
+				weight: 600,
+				hex: 0x7CB342
+			},
+			{
+				weight: 700,
+				hex: 0x689F38
+			},
+			{
+				weight: 800,
+				hex: 0x558B2F
+			},
+			{
+				weight: 900,
+				hex: 0x33691E
+			}
+		]
+	},
+	{
+		color: "Lime",
+		variations: [
+			{
+				weight: 50,
+				hex: 0xF9FBE7
+			},
+			{
+				weight: 100,
+				hex: 0xF0F4C3
+			},
+			{
+				weight: 200,
+				hex: 0xE6EE9C
+			},
+			{
+				weight: 300,
+				hex: 0xDCE775
+			},
+			{
+				weight: 400,
+				hex: 0xD4E157
+			},
+			{
+				weight: 500,
+				hex: 0xCDDC39
+			},
+			{
+				weight: 600,
+				hex: 0xC0CA33
+			},
+			{
+				weight: 700,
+				hex: 0xAFB42B
+			},
+			{
+				weight: 800,
+				hex: 0x9E9D24
+			},
+			{
+				weight: 900,
+				hex: 0x827717
+			}
+		]
+	},
+	{
+		color: "Yellow",
+		variations: [
+			{
+				weight: 50,
+				hex: 0xFFFDE7
+			},
+			{
+				weight: 100,
+				hex: 0xFFF9C4
+			},
+			{
+				weight: 200,
+				hex: 0xFFF59D
+			},
+			{
+				weight: 300,
+				hex: 0xFFF176
+			},
+			{
+				weight: 400,
+				hex: 0xFFEE58
+			},
+			{
+				weight: 500,
+				hex: 0xFFEB3B
+			},
+			{
+				weight: 600,
+				hex: 0xFDD835
+			},
+			{
+				weight: 700,
+				hex: 0xFBC02D
+			},
+			{
+				weight: 800,
+				hex: 0xF9A825
+			},
+			{
+				weight: 900,
+				hex: 0xF57F17
+			}
+		]
+	},
+	{
+		color: "Amber",
+		variations: [
+			{
+				weight: 50,
+				hex: 0xFFF8E1
+			},
+			{
+				weight: 100,
+				hex: 0xFFECB3
+			},
+			{
+				weight: 200,
+				hex: 0xFFE082
+			},
+			{
+				weight: 300,
+				hex: 0xFFD54F
+			},
+			{
+				weight: 400,
+				hex: 0xFFCA28
+			},
+			{
+				weight: 500,
+				hex: 0xFFC107
+			},
+			{
+				weight: 600,
+				hex: 0xFFB300
+			},
+			{
+				weight: 700,
+				hex: 0xFFA000
+			},
+			{
+				weight: 800,
+				hex: 0xFF8F00
+			},
+			{
+				weight: 900,
+				hex: 0xFF6F00
+			}
+		]
+	},
+	{
+		color: "Orange",
+		variations: [
+			{
+				weight: 50,
+				hex: 0xFFF3E0
+			},
+			{
+				weight: 100,
+				hex: 0xFFE0B2
+			},
+			{
+				weight: 200,
+				hex: 0xFFCC80
+			},
+			{
+				weight: 300,
+				hex: 0xFFB74D
+			},
+			{
+				weight: 400,
+				hex: 0xFFA726
+			},
+			{
+				weight: 500,
+				hex: 0xFF9800
+			},
+			{
+				weight: 600,
+				hex: 0xFB8C00
+			},
+			{
+				weight: 700,
+				hex: 0xF57C00
+			},
+			{
+				weight: 800,
+				hex: 0xEF6C00
+			},
+			{
+				weight: 900,
+				hex: 0xE65100
+			}
+		]
+	},
+	{
+		color: "Deep Orange",
+		variations: [
+			{
+				weight: 50,
+				hex: 0xFBE9E7
+			},
+			{
+				weight: 100,
+				hex: 0xFFCCBC
+			},
+			{
+				weight: 200,
+				hex: 0xFFAB91
+			},
+			{
+				weight: 300,
+				hex: 0xFF8A65
+			},
+			{
+				weight: 400,
+				hex: 0xFF7043
+			},
+			{
+				weight: 500,
+				hex: 0xFF5722
+			},
+			{
+				weight: 600,
+				hex: 0xF4511E
+			},
+			{
+				weight: 700,
+				hex: 0xE64A19
+			},
+			{
+				weight: 800,
+				hex: 0xD84315
+			},
+			{
+				weight: 900,
+				hex: 0xBF360C
+			}
+		]
+	},
+	{
+		color: "Brown",
+		variations: [
+			{
+				weight: 50,
+				hex: 0xEFEBE9
+			},
+			{
+				weight: 100,
+				hex: 0xD7CCC8
+			},
+			{
+				weight: 200,
+				hex: 0xBCAAA4
+			},
+			{
+				weight: 300,
+				hex: 0xA1887F
+			},
+			{
+				weight: 400,
+				hex: 0x8D6E63
+			},
+			{
+				weight: 500,
+				hex: 0x795548
+			},
+			{
+				weight: 600,
+				hex: 0x6D4C41
+			},
+			{
+				weight: 700,
+				hex: 0x5D4037
+			},
+			{
+				weight: 800,
+				hex: 0x4E342E
+			},
+			{
+				weight: 900,
+				hex: 0x3E2723
+			}
+		]
+	},
+	{
+		color: "Grey",
+		variations: [
+			{
+				weight: 50,
+				hex: 0xFAFAFA
+			},
+			{
+				weight: 100,
+				hex: 0xF5F5F5
+			},
+			{
+				weight: 200,
+				hex: 0xEEEEEE
+			},
+			{
+				weight: 300,
+				hex: 0xE0E0E0
+			},
+			{
+				weight: 400,
+				hex: 0xBDBDBD
+			},
+			{
+				weight: 500,
+				hex: 0x9E9E9E
+			},
+			{
+				weight: 600,
+				hex: 0x757575
+			},
+			{
+				weight: 700,
+				hex: 0x616161
+			},
+			{
+				weight: 800,
+				hex: 0x424242
+			},
+			{
+				weight: 900,
+				hex: 0x212121
+			}
+		]
+	},
+	{
+		color: "Blue Grey",
+		variations: [
+			{
+				weight: 50,
+				hex: 0xECEFF1
+			},
+			{
+				weight: 100,
+				hex: 0xCFD8DC
+			},
+			{
+				weight: 200,
+				hex: 0xB0BEC5
+			},
+			{
+				weight: 300,
+				hex: 0x90A4AE
+			},
+			{
+				weight: 400,
+				hex: 0x78909C
+			},
+			{
+				weight: 500,
+				hex: 0x607D8B
+			},
+			{
+				weight: 600,
+				hex: 0x546E7A
+			},
+			{
+				weight: 700,
+				hex: 0x455A64
+			},
+			{
+				weight: 800,
+				hex: 0x37474F
+			},
+			{
+				weight: 900,
+				hex: 0x263238
+			}
+		]
+	},
+	{
+		color: "Grey",
+		variations: [
+			{
+				weight: 50,
+				hex: 0xFFFFFF
+			},
+			{
+				weight: 100,
+				hex: 0xe0e0e0
+			},
+			{
+				weight: 200,
+				hex: 0xc4c4c4
+			},
+			{
+				weight: 300,
+				hex: 0xa8a8a8
+			},
+			{
+				weight: 400,
+				hex: 0x8c8c8c
+			},
+			{
+				weight: 500,
+				hex: 0x707070
+			},
+			{
+				weight: 600,
+				hex: 0x545454
+			},
+			{
+				weight: 700,
+				hex: 0x383838
+			},
+			{
+				weight: 800,
+				hex: 0x1c1c1c
+			},
+			{
+				weight: 900,
+				hex: 0x00000
+			}
+		]
+	}
+];