x4js 1.4.2

package/lib/colorpicker.js

@@ -0,0 +1,1457 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @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 } from './component';
+import { CheckBox } from './checkbox';
+import { Dialog } from './dialog';
+import { EvChange } 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';
+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 {
+    m_colorSel;
+    m_colorHue;
+    m_colorAlpha;
+    m_sample;
+    m_selMark;
+    m_hueMark;
+    m_alphaMark;
+    m_baseHSV;
+    m_baseColor;
+    m_transpCk;
+    m_colorEdit;
+    m_palmode;
+    static last_palmode = false;
+    constructor(props) {
+        super(props);
+        this.m_palmode = ColorPicker.last_palmode;
+        this.setDomEvent('contextmenu', (e) => this._showCtx(e));
+    }
+    _showCtx(e) {
+        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) {
+        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, '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) => {
+                Component.setCapture(this, (e) => this._selChange(e));
+            });
+            this.m_colorHue.setDomEvent('mousedown', (ev) => {
+                Component.setCapture(this, (e) => this._hueChange(e));
+            });
+            if (props.hasAlpha) {
+                this.m_colorAlpha.setDomEvent('mousedown', (ev) => {
+                    Component.setCapture(this, (e) => this._alphaChange(e));
+                });
+            }
+            this._updateColor();
+        }
+    }
+    set color(clr) {
+        this.m_baseColor = clr;
+        this.m_baseHSV = Color.toHSV(this.m_baseColor);
+        this._updateColor();
+    }
+    get color() {
+        return this.m_baseColor;
+    }
+    _selChange(ev) {
+        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();
+        }
+    }
+    _hueChange(ev) {
+        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();
+        }
+    }
+    _alphaChange(ev) {
+        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();
+        }
+    }
+    _updateColor(edit = true) {
+        let 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('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();
+    }
+    _change() {
+        this.emit('change', EvChange(this.m_baseColor));
+    }
+}
+export class ColorPickerBox extends Dialog {
+    m_picker;
+    constructor(props) {
+        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));
+            }
+        });
+    }
+    _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) {
+        this.m_picker.color = clr;
+    }
+    get color() {
+        return this.m_picker.color;
+    }
+    /**
+     * display a messagebox
+     */
+    static show(props) {
+        let msg;
+        if (isString(props)) {
+            msg = new ColorPickerBox({ color: new Color(props) });
+        }
+        else {
+            msg = new ColorPickerBox(props);
+        }
+        msg.show();
+        return msg;
+    }
+}
+export class ColorPickerEditor extends HLayout {
+    constructor(props) {
+        super(props);
+        this.mapPropEvents(props, 'change');
+    }
+    render(props) {
+        let color = props.color;
+        let tcolor;
+        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) {
+        this.m_props.color = color;
+        this.update();
+    }
+    get value() {
+        return this.m_props.color;
+    }
+    set custom_colors(v) {
+        this.m_props.cust_colors = v;
+    }
+    _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;
+                    this._change();
+                    this.update();
+                }
+            }
+        });
+        let rc = this.getBoundingRect();
+        dlg.displayAt(rc.left, rc.bottom, 'tl');
+    }
+    _change() {
+        this.emit('change', EvChange(this.m_props.color));
+    }
+    _isTransp(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
+            }
+        ]
+    }
+];