init push

web/packages/themes/src/black.ts

@@ -0,0 +1,17 @@
+import { PaletteOptions } from '@mui/material';
+
+const blackPalette: PaletteOptions = {
+  mode: 'light',
+  primary: {
+    main: '#21222d',
+    contrastText: '#FFFFFF',
+  },
+  background: {
+    default: '#FFFFFF',
+  },
+  text: {
+    primary: '#000000',
+  },
+};
+
+export default blackPalette;

web/packages/themes/src/blue.ts

@@ -0,0 +1,17 @@
+import { PaletteOptions } from '@mui/material';
+
+const bluePalette: PaletteOptions = {
+  mode: 'light',
+  primary: {
+    main: '#4285F4',
+    contrastText: '#FFFFFF',
+  },
+  background: {
+    default: '#FFFFFF',
+  },
+  text: {
+    primary: '#000000',
+  },
+};
+
+export default bluePalette;

web/packages/themes/src/constants.ts

@@ -0,0 +1,77 @@
+import {
+  bluePalette,
+  greenPalette,
+  orangePalette,
+  blackPalette,
+  deepTealPalette,
+  redPalette,
+  electricBluePalette,
+  darkDeepForestPalette,
+  darkGoldPalette,
+  purplePalette,
+} from './index';
+
+export const THEME_LIST = [
+  {
+    label: '很经典的蓝色',
+    value: 'blue',
+    palette: bluePalette,
+  },
+  {
+    label: '土豪金',
+    value: 'darkGold',
+    palette: darkGoldPalette,
+  },
+  {
+    label: '像草原一样绿',
+    value: 'green',
+    palette: greenPalette,
+  },
+  {
+    label: '基佬紫',
+    value: 'purple',
+    palette: purplePalette,
+  },
+  {
+    label: '灰不拉几的蓝',
+    value: 'deepTeal',
+    palette: deepTealPalette,
+  },
+  {
+    label: '果粒橙',
+    value: 'orange',
+    palette: orangePalette,
+  },
+  {
+    label: '钛合金灰',
+    value: 'black',
+    palette: blackPalette,
+  },
+  {
+    label: '小姑娘喜欢的粉红',
+    value: 'red',
+    palette: redPalette,
+  },
+  {
+    label: '深墨绿',
+    value: 'darkDeepForest',
+    palette: darkDeepForestPalette,
+  },
+  {
+    label: '电光蓝',
+    value: 'electricBlue',
+    palette: electricBluePalette,
+  },
+];
+
+export const THEME_TO_PALETTE = THEME_LIST.reduce(
+  (acc, item) => {
+    acc[item.value] = {
+      value: item.value,
+      label: item.label,
+      palette: item.palette,
+    };
+    return acc;
+  },
+  {} as Record<string, { value: string; label: string; palette: any }>,
+);

web/packages/themes/src/dark.ts

@@ -0,0 +1,67 @@
+import { PaletteOptions } from '@mui/material';
+
+const darkPalette: PaletteOptions = {
+  mode: 'dark',
+  primary: {
+    main: '#6E73FE',
+    contrastText: '#FFFFFF',
+  },
+  error: {
+    main: '#F64E54',
+  },
+  success: {
+    main: '#82DDAF',
+    light: '#AAF27F',
+    dark: '#229A16',
+    contrastText: 'rgba(0,0,0,0.7)',
+  },
+  warning: {
+    main: '#FEA145',
+    light: '#FFE16A',
+    dark: '#B78103',
+    contrastText: 'rgba(0,0,0,0.7)',
+  },
+  info: {
+    main: '#0063FF',
+    light: '#74CAFF',
+    dark: '#0C53B7',
+    contrastText: '#fff',
+  },
+  divider: '#313131',
+  disabled: {
+    main: '#666',
+  },
+  dark: {
+    dark: '#000',
+    main: '#14141B',
+    light: '#202531',
+    contrastText: '#fff',
+  },
+  light: {
+    main: '#fff',
+    contrastText: '#000',
+  },
+  background: {
+    default: '#141923',
+    paper: '#141923',
+    paper2: '#141923',
+    paper3: '#202531',
+    footer: '#242425',
+  },
+  table: {
+    head: {
+      background: '#292929',
+    },
+    cell: {
+      border: '#434343',
+    },
+  },
+  text: {
+    primary: '#FFFFFF',
+    secondary: 'rgba(255, 255, 255, 0.7)',
+    tertiary: 'rgba(255, 255, 255, 0.5)',
+    disabled: 'rgba(255, 255, 255, 0.3)',
+  },
+};
+
+export default darkPalette;

web/packages/themes/src/darkDeepForest.ts

@@ -0,0 +1,17 @@
+import { PaletteOptions } from '@mui/material';
+
+const darkDeepForestPalette: PaletteOptions = {
+  mode: 'dark',
+  primary: {
+    main: '#149173',
+    contrastText: '#FFFFFF',
+  },
+  background: {
+    default: '#1b1b1b',
+  },
+  text: {
+    primary: '#FFFFFF',
+  },
+};
+
+export default darkDeepForestPalette;

web/packages/themes/src/darkGold.ts

@@ -0,0 +1,17 @@
+import { PaletteOptions } from '@mui/material';
+
+const blackPalette: PaletteOptions = {
+  mode: 'dark',
+  primary: {
+    main: '#F4D1B4',
+    contrastText: '#000000',
+  },
+  background: {
+    default: '#171717',
+  },
+  text: {
+    primary: '#FFFFFF',
+  },
+};
+
+export default blackPalette;

web/packages/themes/src/deepTeal.ts

@@ -0,0 +1,17 @@
+import { PaletteOptions } from '@mui/material';
+
+const deepTealPalette: PaletteOptions = {
+  mode: 'light',
+  primary: {
+    main: '#006397',
+    contrastText: '#FFFFFF',
+  },
+  background: {
+    default: '#FFFFFF',
+  },
+  text: {
+    primary: '#1a1c1e',
+  },
+};
+
+export default deepTealPalette;

web/packages/themes/src/electricBlue.ts

@@ -0,0 +1,17 @@
+import { PaletteOptions } from '@mui/material';
+
+const electricBluePalette: PaletteOptions = {
+  mode: 'dark',
+  primary: {
+    main: '#5877FE',
+    contrastText: '#FFFFFF',
+  },
+  background: {
+    default: '#0C0C13',
+  },
+  text: {
+    primary: '#C9D3EE',
+  },
+};
+
+export default electricBluePalette;

web/packages/themes/src/green.ts

@@ -0,0 +1,17 @@
+import { PaletteOptions } from '@mui/material';
+
+const greenPalette: PaletteOptions = {
+  mode: 'light',
+  primary: {
+    main: '#50A892',
+    contrastText: '#FFFFFF',
+  },
+  background: {
+    default: '#FFFFFF',
+  },
+  text: {
+    primary: '#000000',
+  },
+};
+
+export default greenPalette;

web/packages/themes/src/index.ts

@@ -0,0 +1,12 @@
+export { default as darkPalette } from './dark';
+export { default as lightPalette } from './light';
+export { default as bluePalette } from './blue';
+export { default as orangePalette } from './orange';
+export { default as greenPalette } from './green';
+export { default as blackPalette } from './black';
+export { default as deepTealPalette } from './deepTeal';
+export { default as redPalette } from './red';
+export { default as darkDeepForestPalette } from './darkDeepForest';
+export { default as electricBluePalette } from './electricBlue';
+export { default as darkGoldPalette } from './darkGold';
+export { default as purplePalette } from './purple';

web/packages/themes/src/light.ts

@@ -0,0 +1,66 @@
+import { PaletteOptions } from '@mui/material';
+
+const lightPalette: PaletteOptions = {
+  primary: {
+    main: '#3248F2',
+    contrastText: '#fff',
+  },
+  error: {
+    main: '#F64E54',
+  },
+  success: {
+    main: '#82DDAF',
+    light: '#AAF27F',
+    dark: '#229A16',
+    contrastText: 'rgba(0,0,0,0.7)',
+  },
+  warning: {
+    main: '#FEA145',
+    light: '#FFE16A',
+    dark: '#B78103',
+    contrastText: 'rgba(0,0,0,0.7)',
+  },
+  info: {
+    main: '#0063FF',
+    light: '#74CAFF',
+    dark: '#0C53B7',
+    contrastText: '#fff',
+  },
+  divider: '#ECEEF1',
+  dark: {
+    dark: '#000',
+    main: '#14141B',
+    light: '#20232A',
+    contrastText: '#fff',
+  },
+  light: {
+    main: '#fff',
+    contrastText: '#000',
+  },
+  disabled: {
+    main: '#666',
+  },
+  background: {
+    default: '#FFFFFF',
+    paper: '#FFFFFF',
+    paper2: '#F1F2F8',
+    paper3: '#F8F9FA',
+    footer: '#14141B',
+  },
+  text: {
+    primary: '#171c19',
+    secondary: '#3f4441',
+    tertiary: '#717572',
+    disabled: '#6e7781',
+  },
+  table: {
+    head: {
+      background: '#f2f3f5',
+    },
+    cell: {
+      border: '#dee0e3',
+    },
+  },
+};
+
+export default lightPalette;

web/packages/themes/src/orange.ts

@@ -0,0 +1,17 @@
+import { PaletteOptions } from '@mui/material';
+
+const orangePalette: PaletteOptions = {
+  mode: 'light',
+  primary: {
+    main: '#F97316',
+    contrastText: '#FFFFFF',
+  },
+  background: {
+    default: '#FFFFFF',
+  },
+  text: {
+    primary: '#1c1917',
+  },
+};
+
+export default orangePalette;

web/packages/themes/src/purple.ts

@@ -0,0 +1,17 @@
+import { PaletteOptions } from '@mui/material';
+
+const bluePalette: PaletteOptions = {
+  mode: 'light',
+  primary: {
+    main: '#5e4fd8',
+    contrastText: '#FFFFFF',
+  },
+  background: {
+    default: '#F6F5FA',
+  },
+  text: {
+    primary: '#0e0c23',
+  },
+};
+
+export default bluePalette;

web/packages/themes/src/red.ts

@@ -0,0 +1,17 @@
+import { PaletteOptions } from '@mui/material';
+
+const redPalette: PaletteOptions = {
+  mode: 'light',
+  primary: {
+    main: '#FF2442',
+    contrastText: '#FFFFFF',
+  },
+  background: {
+    default: '#FFFFFF',
+  },
+  text: {
+    primary: '#000000',
+  },
+};
+
+export default redPalette;