@palett/cards
Version:
A color converter
366 lines (343 loc) • 7.82 kB
JavaScript
const Amber = {
base: '#FFC107',
lighten_5: '#FFF8E1',
lighten_4: '#FFECB3',
lighten_3: '#FFE082',
lighten_2: '#FFD54F',
lighten_1: '#FFCA28',
darken_1: '#FFB300',
darken_2: '#FFA000',
darken_3: '#FF8F00',
darken_4: '#FF6F00',
accent_1: '#FFE57F',
accent_2: '#FFD740',
accent_3: '#FFC400',
accent_4: '#FFAB00',
};
const Blue = {
base: '#2196F3',
lighten_5: '#E3F2FD',
lighten_4: '#BBDEFB',
lighten_3: '#90CAF9',
lighten_2: '#64B5F6',
lighten_1: '#42A5F5',
darken_1: '#1E88E5',
darken_2: '#1976D2',
darken_3: '#1565C0',
darken_4: '#0D47A1',
accent_1: '#82B1FF',
accent_2: '#448AFF',
accent_3: '#2979FF',
accent_4: '#2962FF',
};
const Cyan = {
base: '#00BCD4',
lighten_5: '#E0F7FA',
lighten_4: '#B2EBF2',
lighten_3: '#80DEEA',
lighten_2: '#4DD0E1',
lighten_1: '#26C6DA',
darken_1: '#00ACC1',
darken_2: '#0097A7',
darken_3: '#00838F',
darken_4: '#006064',
accent_1: '#84FFFF',
accent_2: '#18FFFF',
accent_3: '#00E5FF',
accent_4: '#00B8D4',
};
const DeepOrange = {
base: '#FF5722',
lighten_5: '#FBE9E7',
lighten_4: '#FFCCBC',
lighten_3: '#FFAB91',
lighten_2: '#FF8A65',
lighten_1: '#FF7043',
darken_1: '#F4511E',
darken_2: '#E64A19',
darken_3: '#D84315',
darken_4: '#BF360C',
accent_1: '#FF9E80',
accent_2: '#FF6E40',
accent_3: '#FF3D00',
accent_4: '#DD2C00',
};
const DeepPurple = {
base: '#673AB7',
lighten_5: '#EDE7F6',
lighten_4: '#D1C4E9',
lighten_3: '#B39DDB',
lighten_2: '#9575CD',
lighten_1: '#7E57C2',
darken_1: '#5E35B1',
darken_2: '#512DA8',
darken_3: '#4527A0',
darken_4: '#311B92',
accent_1: '#B388FF',
accent_2: '#7C4DFF',
accent_3: '#651FFF',
accent_4: '#6200EA',
};
const Green = {
base: '#4CAF50',
lighten_5: '#E8F5E9',
lighten_4: '#C8E6C9',
lighten_3: '#A5D6A7',
lighten_2: '#81C784',
lighten_1: '#66BB6A',
darken_1: '#43A047',
darken_2: '#388E3C',
darken_3: '#2E7D32',
darken_4: '#1B5E20',
accent_1: '#B9F6CA',
accent_2: '#69F0AE',
accent_3: '#00E676',
accent_4: '#00C853',
};
const Indigo = {
base: '#3F51B5',
lighten_5: '#E8EAF6',
lighten_4: '#C5CAE9',
lighten_3: '#9FA8DA',
lighten_2: '#7986CB',
lighten_1: '#5C6BC0',
darken_1: '#3949AB',
darken_2: '#303F9F',
darken_3: '#283593',
darken_4: '#1A237E',
accent_1: '#8C9EFF',
accent_2: '#536DFE',
accent_3: '#3D5AFE',
accent_4: '#304FFE',
};
const LightBlue = {
base: '#03A9F4',
lighten_5: '#E1F5FE',
lighten_4: '#B3E5FC',
lighten_3: '#81D4FA',
lighten_2: '#4FC3F7',
lighten_1: '#29B6F6',
darken_1: '#039BE5',
darken_2: '#0288D1',
darken_3: '#0277BD',
darken_4: '#01579B',
accent_1: '#80D8FF',
accent_2: '#40C4FF',
accent_3: '#00B0FF',
accent_4: '#0091EA',
};
const LightGreen = {
base: '#8BC34A',
lighten_5: '#F1F8E9',
lighten_4: '#DCEDC8',
lighten_3: '#C5E1A5',
lighten_2: '#AED581',
lighten_1: '#9CCC65',
darken_1: '#7CB342',
darken_2: '#689F38',
darken_3: '#558B2F',
darken_4: '#33691E',
accent_1: '#CCFF90',
accent_2: '#B2FF59',
accent_3: '#76FF03',
accent_4: '#64DD17',
};
const Lime = {
base: '#CDDC39',
lighten_5: '#F9FBE7',
lighten_4: '#F0F4C3',
lighten_3: '#E6EE9C',
lighten_2: '#DCE775',
lighten_1: '#D4E157',
darken_1: '#C0CA33',
darken_2: '#AFB42B',
darken_3: '#9E9D24',
darken_4: '#827717',
accent_1: '#F4FF81',
accent_2: '#EEFF41',
accent_3: '#C6FF00',
accent_4: '#AEEA00',
};
const Orange = {
base: '#FF9800',
lighten_5: '#FFF3E0',
lighten_4: '#FFE0B2',
lighten_3: '#FFCC80',
lighten_2: '#FFB74D',
lighten_1: '#FFA726',
darken_1: '#FB8C00',
darken_2: '#F57C00',
darken_3: '#EF6C00',
darken_4: '#E65100',
accent_1: '#FFD180',
accent_2: '#FFAB40',
accent_3: '#FF9100',
accent_4: '#FF6D00',
};
const Pink = {
base: '#E91E63',
lighten_5: '#FCE4EC',
lighten_4: '#F8BBD0',
lighten_3: '#F48FB1',
lighten_2: '#F06292',
lighten_1: '#EC407A',
darken_1: '#D81B60',
darken_2: '#C2185B',
darken_3: '#AD1457',
darken_4: '#880E4F',
accent_1: '#FF80AB',
accent_2: '#FF4081',
accent_3: '#F50057',
accent_4: '#C51162',
};
const Purple = {
base: '#9C27B0',
lighten_5: '#F3E5F5',
lighten_4: '#E1BEE7',
lighten_3: '#CE93D8',
lighten_2: '#BA68C8',
lighten_1: '#AB47BC',
darken_1: '#8E24AA',
darken_2: '#7B1FA2',
darken_3: '#6A1B9A',
darken_4: '#4A148C',
accent_1: '#EA80FC',
accent_2: '#E040FB',
accent_3: '#D500F9',
accent_4: '#AA00FF',
};
const Red = {
base: '#F44336',
lighten_5: '#FFEBEE',
lighten_4: '#FFCDD2',
lighten_3: '#EF9A9A',
lighten_2: '#E57373',
lighten_1: '#EF5350',
darken_1: '#E53935',
darken_2: '#D32F2F',
darken_3: '#C62828',
darken_4: '#B71C1C',
accent_1: '#FF8A80',
accent_2: '#FF5252',
accent_3: '#FF1744',
accent_4: '#D50000',
};
const Teal = {
base: '#009688',
lighten_5: '#E0F2F1',
lighten_4: '#B2DFDB',
lighten_3: '#80CBC4',
lighten_2: '#4DB6AC',
lighten_1: '#26A69A',
darken_1: '#00897B',
darken_2: '#00796B',
darken_3: '#00695C',
darken_4: '#004D40',
accent_1: '#A7FFEB',
accent_2: '#64FFDA',
accent_3: '#1DE9B6',
accent_4: '#00BFA5',
};
const Yellow = {
base: '#FFEB3B',
lighten_5: '#FFFDE7',
lighten_4: '#FFF9C4',
lighten_3: '#FFF59D',
lighten_2: '#FFF176',
lighten_1: '#FFEE58',
darken_1: '#FDD835',
darken_2: '#FBC02D',
darken_3: '#F9A825',
darken_4: '#F57F17',
accent_1: '#FFFF8D',
accent_2: '#FFFF00',
accent_3: '#FFEA00',
accent_4: '#FFD600',
};
const BlueGrey = {
base: '#607D8B',
lighten_5: '#ECEFF1',
lighten_4: '#CFD8DC',
lighten_3: '#B0BEC5',
lighten_2: '#90A4AE',
lighten_1: '#78909C',
darken_1: '#546E7A',
darken_2: '#455A64',
darken_3: '#37474F',
darken_4: '#263238',
accent_1: '#B7C9D1',
accent_2: '#89A5B3',
accent_3: '#6A8EA0',
accent_4: '#547383',
};
const Brown = {
base: '#795548',
lighten_5: '#EFEBE9',
lighten_4: '#D7CCC8',
lighten_3: '#BCAAA4',
lighten_2: '#A1887F',
lighten_1: '#8D6E63',
darken_1: '#6D4C41',
darken_2: '#5D4037',
darken_3: '#4E342E',
darken_4: '#3E2723',
accent_1: '#D2BEB6',
accent_2: '#B59387',
accent_3: '#A27767',
accent_4: '#855F51',
};
const Grey = {
base: '#9E9E9E',
lighten_5: '#FAFAFA',
lighten_4: '#F5F5F5',
lighten_3: '#EEEEEE',
lighten_2: '#E0E0E0',
lighten_1: '#BDBDBD',
darken_1: '#757575',
darken_2: '#616161',
darken_3: '#424242',
darken_4: '#212121',
accent_1: '#C4C4C4',
accent_2: '#9E9E9E',
accent_3: '#858585',
accent_4: '#6B6B6B',
};
/**
* @type {Object.<string,Object<string,Object>>}
* @property {string[]} colors
* @property {string[]} degrees
*/
const Cards = {
red: Red,
pink: Pink,
purple: Purple,
deepPurple: DeepPurple,
indigo: Indigo,
blue: Blue,
lightBlue: LightBlue,
cyan: Cyan,
teal: Teal,
green: Green,
lightGreen: LightGreen,
lime: Lime,
yellow: Yellow,
amber: Amber,
orange: Orange,
deepOrange: DeepOrange,
brown: Brown,
blueGrey: BlueGrey,
grey: Grey,
};
Reflect.defineProperty(Cards, 'colors', {
get() { return Object.keys(Cards) },
enumerable: false,
});
Reflect.defineProperty(Cards, 'degrees', {
get() { for (let color in Cards) return Object.keys(Cards[color]) },
enumerable: false,
});
const Shades = {
black: '#000000',
white: '#FFFFFF',
};
export { Amber, Blue, BlueGrey, Brown, Cards, Cyan, DeepOrange, DeepPurple, Green, Grey, Indigo, LightBlue, LightGreen, Lime, Orange, Pink, Purple, Red, Shades, Teal, Yellow };