Robin E. R. Davies
356 lines
8.0 KiB
TypeScript
356 lines
8.0 KiB
TypeScript
import { isDarkMode } from "./DarkMode";
|
|
|
|
export const materialColors: { [Name: string]: { [Name: number]: string } } = {
|
|
"grey": {
|
|
50: '#FAFAFA',
|
|
100: '#F5F5F5',
|
|
200: '#EEEEEE',
|
|
300: '#E0E0E0',
|
|
400: '#BDBDBD',
|
|
500: '#9E9E9E',
|
|
600: '#757575',
|
|
700: '#616161',
|
|
800: '#424242',
|
|
900: '#212121'
|
|
},
|
|
"blueGrey": {
|
|
50: '#ECEFF1',
|
|
100: '#CFD8DC',
|
|
200: '#B0BEC5',
|
|
300: '#90A4AE',
|
|
400: '#78909C',
|
|
500: '#607D8B',
|
|
600: '#546E7A',
|
|
700: '#455A64',
|
|
800: '#37474F',
|
|
900: '#263238'
|
|
},
|
|
|
|
"red": {
|
|
50: '#FFEBEE',
|
|
100: '#FFCDD2',
|
|
200: '#EF9A9A',
|
|
300: '#E57373',
|
|
400: '#EF5350',
|
|
500: '#F44336',
|
|
600: '#E53935',
|
|
700: '#D32F2F',
|
|
800: '#C62828',
|
|
900: '#B71C1C',
|
|
// A100: '#FF8A80',
|
|
// A200: '#FF5252',
|
|
// A400: '#FF1744',
|
|
// A700: '#D50000'
|
|
},
|
|
"pink": {
|
|
50: '#FCE4EC',
|
|
100: '#F8BBD0',
|
|
200: '#F48FB1',
|
|
300: '#F06292',
|
|
400: '#EC407A',
|
|
500: '#E91E63',
|
|
600: '#D81B60',
|
|
700: '#C2185B',
|
|
800: '#AD1457',
|
|
900: '#880E4F',
|
|
// A100: '#FF80AB',
|
|
// A200: '#FF4081',
|
|
// A400: '#F50057',
|
|
// A700: '#C51162'
|
|
},
|
|
"purple": {
|
|
50: '#F3E5F5',
|
|
100: '#E1BEE7',
|
|
200: '#CE93D8',
|
|
300: '#BA68C8',
|
|
400: '#AB47BC',
|
|
500: '#9C27B0',
|
|
600: '#8E24AA',
|
|
700: '#7B1FA2',
|
|
800: '#6A1B9A',
|
|
900: '#4A148C',
|
|
// A100: '#EA80FC',
|
|
// A200: '#E040FB',
|
|
// A400: '#D500F9',
|
|
// A700: '#AA00FF'
|
|
},
|
|
"deepPurple": {
|
|
50: '#EDE7F6',
|
|
100: '#D1C4E9',
|
|
200: '#B39DDB',
|
|
300: '#9575CD',
|
|
400: '#7E57C2',
|
|
500: '#673AB7',
|
|
600: '#5E35B1',
|
|
700: '#512DA8',
|
|
800: '#4527A0',
|
|
900: '#311B92',
|
|
// A100: '#B388FF',
|
|
// A200: '#7C4DFF',
|
|
// A400: '#651FFF',
|
|
// A700: '#6200EA'
|
|
},
|
|
"indigo": {
|
|
50: '#E8EAF6',
|
|
100: '#C5CAE9',
|
|
200: '#9FA8DA',
|
|
300: '#7986CB',
|
|
400: '#5C6BC0',
|
|
500: '#3F51B5',
|
|
600: '#3949AB',
|
|
700: '#303F9F',
|
|
800: '#283593',
|
|
900: '#1A237E',
|
|
// A100: '#8C9EFF',
|
|
// A200: '#536DFE',
|
|
// A400: '#3D5AFE',
|
|
// A700: '#304FFE'
|
|
},
|
|
"blue": {
|
|
50: '#E3F2FD',
|
|
100: '#BBDEFB',
|
|
200: '#90CAF9',
|
|
300: '#64B5F6',
|
|
400: '#42A5F5',
|
|
500: '#2196F3',
|
|
600: '#1E88E5',
|
|
700: '#1976D2',
|
|
800: '#1565C0',
|
|
900: '#0D47A1',
|
|
// A100: '#82B1FF',
|
|
// A200: '#448AFF',
|
|
// A400: '#2979FF',
|
|
// A700: '#2962FF'
|
|
},
|
|
"lightBlue": {
|
|
50: '#E1F5FE',
|
|
100: '#B3E5FC',
|
|
200: '#81D4FA',
|
|
300: '#4FC3F7',
|
|
400: '#29B6F6',
|
|
500: '#03A9F4',
|
|
600: '#039BE5',
|
|
700: '#0288D1',
|
|
800: '#0277BD',
|
|
900: '#01579B',
|
|
// A100: '#80D8FF',
|
|
// A200: '#40C4FF',
|
|
// A400: '#00B0FF',
|
|
// A700: '#0091EA'
|
|
},
|
|
"cyan": {
|
|
50: '#E0F7FA',
|
|
100: '#B2EBF2',
|
|
200: '#80DEEA',
|
|
300: '#4DD0E1',
|
|
400: '#26C6DA',
|
|
500: '#00BCD4',
|
|
600: '#00ACC1',
|
|
700: '#0097A7',
|
|
800: '#00838F',
|
|
900: '#006064',
|
|
// A100: '#84FFFF',
|
|
// A200: '#18FFFF',
|
|
// A400: '#00E5FF',
|
|
// A700: '#00B8D4'
|
|
},
|
|
"teal": {
|
|
50: '#E0F2F1',
|
|
100: '#B2DFDB',
|
|
200: '#80CBC4',
|
|
300: '#4DB6AC',
|
|
400: '#26A69A',
|
|
500: '#009688',
|
|
600: '#00897B',
|
|
700: '#00796B',
|
|
800: '#00695C',
|
|
900: '#004D40',
|
|
// A100: '#A7FFEB',
|
|
// A200: '#64FFDA',
|
|
// A400: '#1DE9B6',
|
|
// A700: '#00BFA5'
|
|
},
|
|
"green": {
|
|
50: '#E8F5E9',
|
|
100: '#C8E6C9',
|
|
200: '#A5D6A7',
|
|
300: '#81C784',
|
|
400: '#66BB6A',
|
|
500: '#4CAF50',
|
|
600: '#43A047',
|
|
700: '#388E3C',
|
|
800: '#2E7D32',
|
|
900: '#1B5E20',
|
|
// A100: '#B9F6CA',
|
|
// A200: '#69F0AE',
|
|
// A400: '#00E676',
|
|
// A700: '#00C853'
|
|
},
|
|
"lightGreen": {
|
|
50: '#F1F8E9',
|
|
100: '#DCEDC8',
|
|
200: '#C5E1A5',
|
|
300: '#AED581',
|
|
400: '#9CCC65',
|
|
500: '#8BC34A',
|
|
600: '#7CB342',
|
|
700: '#689F38',
|
|
800: '#558B2F',
|
|
900: '#33691E',
|
|
// A100: '#CCFF90',
|
|
// A200: '#B2FF59',
|
|
// A400: '#76FF03',
|
|
// A700: '#64DD17'
|
|
},
|
|
"lime": {
|
|
50: '#F9FBE7',
|
|
100: '#F0F4C3',
|
|
200: '#E6EE9C',
|
|
300: '#DCE775',
|
|
400: '#D4E157',
|
|
500: '#CDDC39',
|
|
600: '#C0CA33',
|
|
700: '#AFB42B',
|
|
800: '#9E9D24',
|
|
900: '#827717',
|
|
// A100: '#F4FF81',
|
|
// A200: '#EEFF41',
|
|
// A400: '#C6FF00',
|
|
// A700: '#AEEA00'
|
|
},
|
|
"yellow": {
|
|
50: '#FFFDE7',
|
|
100: '#FFF9C4',
|
|
200: '#FFF59D',
|
|
300: '#FFF176',
|
|
400: '#FFEE58',
|
|
500: '#FFEB3B',
|
|
600: '#FDD835',
|
|
700: '#FBC02D',
|
|
800: '#F9A825',
|
|
900: '#F57F17',
|
|
// A100: '#FFFF8D',
|
|
// A200: '#FFFF00',
|
|
// A400: '#FFEA00',
|
|
// A700: '#FFD600'
|
|
},
|
|
"amber": {
|
|
50: '#FFF8E1',
|
|
100: '#FFECB3',
|
|
200: '#FFE082',
|
|
300: '#FFD54F',
|
|
400: '#FFCA28',
|
|
500: '#FFC107',
|
|
600: '#FFB300',
|
|
700: '#FFA000',
|
|
800: '#FF8F00',
|
|
900: '#FF6F00',
|
|
// A100: '#FFE57F',
|
|
// A200: '#FFD740',
|
|
// A400: '#FFC400',
|
|
// A700: '#FFAB00'
|
|
},
|
|
"orange": {
|
|
50: '#FFF3E0',
|
|
100: '#FFE0B2',
|
|
200: '#FFCC80',
|
|
300: '#FFB74D',
|
|
400: '#FFA726',
|
|
500: '#FF9800',
|
|
600: '#FB8C00',
|
|
700: '#F57C00',
|
|
800: '#EF6C00',
|
|
900: '#E65100',
|
|
// A100: '#FFD180',
|
|
// A200: '#FFAB40',
|
|
// A400: '#FF9100',
|
|
// A700: '#FF6D00'
|
|
},
|
|
"deepOrange": {
|
|
50: '#FBE9E7',
|
|
100: '#FFCCBC',
|
|
200: '#FFAB91',
|
|
300: '#FF8A65',
|
|
400: '#FF7043',
|
|
500: '#FF5722',
|
|
600: '#F4511E',
|
|
700: '#E64A19',
|
|
800: '#D84315',
|
|
900: '#BF360C',
|
|
// A100: '#FF9E80',
|
|
// A200: '#FF6E40',
|
|
// A400: '#FF3D00',
|
|
// A700: '#DD2C00'
|
|
},
|
|
"brown": {
|
|
50: '#EFEBE9',
|
|
100: '#D7CCC8',
|
|
200: '#BCAAA4',
|
|
300: '#A1887F',
|
|
400: '#8D6E63',
|
|
500: '#795548',
|
|
600: '#6D4C41',
|
|
700: '#5D4037',
|
|
800: '#4E342E',
|
|
900: '#3E2723'
|
|
}
|
|
};
|
|
|
|
|
|
function makeLabels() {
|
|
let result: string[] = [];
|
|
for (let [key] of Object.entries(materialColors)) {
|
|
result.push(key.toString());
|
|
}
|
|
return result;
|
|
}
|
|
|
|
export const colorKeys: string[] = makeLabels();
|
|
|
|
const darkMode: boolean = isDarkMode();
|
|
|
|
export function getBackgroundColor(colorKey: string): string {
|
|
let list = materialColors[colorKey];
|
|
if (!list) {
|
|
list = materialColors["grey"];
|
|
}
|
|
if (darkMode) {
|
|
if (colorKey === "grey" || colorKey === "yellow")
|
|
{
|
|
return list[900];
|
|
}
|
|
else {
|
|
return list[800];
|
|
}
|
|
} else {
|
|
if (colorKey === "grey")
|
|
{
|
|
return list[200];
|
|
}
|
|
else {
|
|
return list[100];
|
|
}
|
|
}
|
|
}
|
|
|
|
export function getBorderColor(colorKey: string): string {
|
|
let list = materialColors[colorKey];
|
|
if (!list)
|
|
{
|
|
list = materialColors["grey"];
|
|
}
|
|
if (darkMode) {
|
|
if (colorKey === "grey" || colorKey === "yellow")
|
|
{
|
|
return list[300];
|
|
}
|
|
return list[200];
|
|
} else {
|
|
if (colorKey === "grey")
|
|
{
|
|
return list[500];
|
|
}
|
|
return list[400];
|
|
}
|
|
|
|
} |