515 lines
14 KiB
TypeScript
515 lines
14 KiB
TypeScript
// src/appThemeConfig.ts
|
|
import type { ThemeConfig } from "antd";
|
|
|
|
export const colors = {
|
|
primary: "#FFD633",
|
|
secondary: "linear-gradient(135deg, #00C1D4 0%, #FF5F6D 100%)",
|
|
darkSpace: "linear-gradient(to right, #0F0525, #2A0B45)",
|
|
};
|
|
|
|
export const ProGray1 = "#8a8a8a";
|
|
export const ProGreen = "#03B100";
|
|
export const ProGreen2 = "#52c41a";
|
|
export const ProDraft = "#f36c00";
|
|
export const ProBlack1 = "#181818";
|
|
export const ProBlack2 = "#0a0a0a";
|
|
export const errorColor = "#DC3545";
|
|
export const errorColorDark = "#d9363e";
|
|
export const DisabledColor = "#424242";
|
|
|
|
export const WHITE_COLOR = {
|
|
50: "#e0f1ff",
|
|
100: "#b0d2ff",
|
|
200: "#7fb0ff",
|
|
300: "#4d8bff",
|
|
400: "#1e79fe",
|
|
500: "#1890ff",
|
|
600: "#09237D",
|
|
700: "#004f81",
|
|
800: "#003650",
|
|
900: "#001620",
|
|
borderColor: "#E7EAF3B2",
|
|
primaryColor: "#FFD633",
|
|
primaryColor2: "#09237D",
|
|
whiteColor: "#FFF",
|
|
blackColor: "#000000e0",
|
|
sidebarBg: "#FFFFFF",
|
|
tableBg: "#FFFFFF",
|
|
cardBg: "#FFFFFF",
|
|
headerBg: "#FFFFFF",
|
|
hoverBg: "#F1F5F9",
|
|
activeBg: "#E2E8F0",
|
|
};
|
|
|
|
// Enhanced Dark theme colors with better contrast and modern aesthetics
|
|
export const DARK_COLOR = {
|
|
// Background colors - from darkest to lightest
|
|
50: "#0a0a0a", // Deepest background
|
|
100: "#141414", // Main background
|
|
200: "#1e1e1e", // Elevated background
|
|
300: "#181818", // Card background
|
|
400: "#363636", // Hover background
|
|
500: "#424242", // Active background
|
|
600: "#525252", // Border color
|
|
700: "#6b6b6b", // Secondary text
|
|
800: "#8a8a8a", // Primary text
|
|
900: "#b0b0b0", // Highlight text
|
|
|
|
// Semantic colors
|
|
borderColor: "#363636",
|
|
borderColorLight: "#424242",
|
|
primaryColor: "#FFD633",
|
|
primaryColorHover: "#FFD633",
|
|
primaryColorActive: "#E6B800",
|
|
primaryColor2: "#FFD633",
|
|
|
|
// Background colors
|
|
whiteColor: "#0a0a0a", // Main background
|
|
blackColor: "#ffffff", // Primary text
|
|
sidebarBg: "#141414",
|
|
tableBg: "#1e1e1e",
|
|
headerBg: "#141414",
|
|
hoverBg: "#363636",
|
|
activeBg: "#424242",
|
|
|
|
// Additional semantic colors
|
|
success: "#10b981",
|
|
warning: "#f59e0b",
|
|
error: "#ef4444",
|
|
info: "#3b82f6",
|
|
|
|
// Text colors
|
|
textPrimary: "#ffffff",
|
|
textSecondary: "#b0b0b0",
|
|
textTertiary: "#8a8a8a",
|
|
textQuaternary: "#6b6b6b",
|
|
textDisabled: "#525252",
|
|
|
|
// Overlay colors
|
|
overlayBg: "rgba(0, 0, 0, 0.45)",
|
|
maskBg: "rgba(0, 0, 0, 0.65)",
|
|
|
|
// Shadow colors
|
|
shadowLight: "0 1px 2px 0 rgba(0, 0, 0, 0.3)",
|
|
shadowMedium: "0 4px 6px -1px rgba(0, 0, 0, 0.4)",
|
|
shadowHeavy: "0 10px 15px -3px rgba(0, 0, 0, 0.5)",
|
|
};
|
|
|
|
export const componentBackground = "#f7f7f7";
|
|
export const darkComponentBackground = "#181818";
|
|
|
|
export const SharedThemeVars = {
|
|
borderRadius: 8,
|
|
borderRadiusLG: 8,
|
|
fontWeightStrong: 500,
|
|
colorPrimary: colors.primary,
|
|
fontFamily: "var(--font-roboto)",
|
|
colorLink: colors.primary,
|
|
// colorItemTextSelected: colors.primary // Menu Item Active Item Color
|
|
};
|
|
|
|
export const LightThemeVars = {
|
|
...SharedThemeVars,
|
|
white: componentBackground,
|
|
colorBgElevated: componentBackground,
|
|
colorBgLayout: componentBackground,
|
|
|
|
// ------ Pro colors
|
|
proSiderColor: "#1E5083",
|
|
proHeaderColor: colors.primary,
|
|
};
|
|
|
|
export const DarkThemeVars = {
|
|
...SharedThemeVars,
|
|
white: darkComponentBackground,
|
|
colorBgElevated: DARK_COLOR[200],
|
|
colorBgContainer: DARK_COLOR[300],
|
|
colorBgLayout: darkComponentBackground,
|
|
colorText: DARK_COLOR.textPrimary,
|
|
colorTextSecondary: DARK_COLOR.textSecondary,
|
|
colorTextTertiary: DARK_COLOR.textTertiary,
|
|
colorTextQuaternary: DARK_COLOR.textQuaternary,
|
|
colorBorder: DARK_COLOR.borderColor,
|
|
colorBorderSecondary: DARK_COLOR.borderColorLight,
|
|
|
|
// ------ Pro colors
|
|
proSiderColor: DARK_COLOR[200],
|
|
proHeaderColor: colors.primary,
|
|
};
|
|
|
|
// AntD Theme Configuration
|
|
export const themeConfig: ThemeConfig = {
|
|
token: {
|
|
colorPrimary: colors.primary, // Cosmic purple
|
|
colorLink: "#9d50bb", // Nebula pink
|
|
fontFamily: "var(--font-roboto)",
|
|
borderRadius: 8,
|
|
// Futuristic button styles
|
|
controlHeight: 40,
|
|
colorTextLabel: WHITE_COLOR.blackColor,
|
|
colorBgLayout: componentBackground,
|
|
},
|
|
components: {
|
|
Breadcrumb: {
|
|
linkColor: "rgba(0,0,0,.8)",
|
|
itemColor: "rgba(0,0,0,.8)",
|
|
},
|
|
Button: {
|
|
colorLink: WHITE_COLOR["600"],
|
|
colorLinkActive: WHITE_COLOR["700"],
|
|
colorLinkHover: WHITE_COLOR["300"],
|
|
borderRadius: 1000,
|
|
borderRadiusLG: 1000,
|
|
// defaultShadow: "none",
|
|
},
|
|
Calendar: {
|
|
colorBgContainer: "none",
|
|
},
|
|
Card: {
|
|
colorBgContainer: WHITE_COLOR.cardBg,
|
|
colorBorderSecondary: WHITE_COLOR["borderColor"],
|
|
boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
|
|
padding: 16,
|
|
paddingLG: 16,
|
|
borderRadius: 24,
|
|
borderRadiusLG: 24,
|
|
},
|
|
Carousel: {
|
|
colorBgContainer: WHITE_COLOR["800"],
|
|
dotWidth: 8,
|
|
},
|
|
Rate: {
|
|
colorFillContent: WHITE_COLOR["100"],
|
|
colorText: WHITE_COLOR["600"],
|
|
},
|
|
Segmented: {
|
|
colorBgLayout: WHITE_COLOR["hoverBg"],
|
|
borderRadius: 6,
|
|
colorTextLabel: "#000000",
|
|
},
|
|
Table: {
|
|
borderColor: WHITE_COLOR["100"],
|
|
headerBg: WHITE_COLOR.primaryColor,
|
|
headerColor: WHITE_COLOR.whiteColor,
|
|
rowSelectedBg: WHITE_COLOR.primaryColor,
|
|
cellPaddingBlock: 8,
|
|
colorBgContainer: WHITE_COLOR.tableBg,
|
|
colorFillAlter: WHITE_COLOR.hoverBg,
|
|
},
|
|
Tabs: {
|
|
colorBorderSecondary: WHITE_COLOR["100"],
|
|
},
|
|
Timeline: {
|
|
dotBg: "none",
|
|
},
|
|
Typography: {
|
|
colorLink: WHITE_COLOR["600"],
|
|
colorLinkActive: WHITE_COLOR["700"],
|
|
colorLinkHover: WHITE_COLOR["300"],
|
|
linkHoverDecoration: "underline",
|
|
},
|
|
Drawer: {
|
|
wireframe: true,
|
|
colorSplit: ProGray1,
|
|
lineWidth: 3,
|
|
controlHeightLG: 30,
|
|
},
|
|
Menu: {
|
|
colorItemBg: WHITE_COLOR.sidebarBg,
|
|
colorItemText: WHITE_COLOR["800"],
|
|
colorItemTextSelected: WHITE_COLOR.primaryColor2,
|
|
colorItemBgSelected: WHITE_COLOR.activeBg,
|
|
colorItemBgHover: WHITE_COLOR.hoverBg,
|
|
},
|
|
Layout: {
|
|
headerBg: WHITE_COLOR.headerBg,
|
|
bodyBg: componentBackground,
|
|
},
|
|
Input: {
|
|
borderRadiusLG: 1000,
|
|
|
|
fontSize: 12,
|
|
fontSizeLG: 12,
|
|
},
|
|
InputNumber: {
|
|
borderRadiusLG: 1000,
|
|
fontSize: 12,
|
|
fontSizeLG: 12,
|
|
},
|
|
DatePicker: {
|
|
borderRadiusOuter: 1000,
|
|
borderRadius: 1000,
|
|
},
|
|
Select: {
|
|
borderRadius: 1000,
|
|
multipleItemHeightLG: 32,
|
|
optionSelectedBg: WHITE_COLOR.activeBg,
|
|
},
|
|
},
|
|
};
|
|
|
|
// Enhanced Dark theme configuration
|
|
export const darkThemeConfig: ThemeConfig = {
|
|
token: {
|
|
// Primary colors
|
|
colorPrimary: DARK_COLOR.primaryColor,
|
|
colorPrimaryHover: DARK_COLOR.primaryColorHover,
|
|
colorPrimaryActive: DARK_COLOR.primaryColorActive,
|
|
colorLink: DARK_COLOR.primaryColor,
|
|
colorLinkHover: DARK_COLOR.primaryColorHover,
|
|
colorLinkActive: DARK_COLOR.primaryColorActive,
|
|
|
|
// Typography
|
|
fontFamily: "var(--font-roboto)",
|
|
fontSize: 14,
|
|
fontSizeLG: 16,
|
|
fontSizeSM: 12,
|
|
fontSizeXL: 20,
|
|
|
|
// Spacing and sizing
|
|
borderRadius: 8,
|
|
borderRadiusLG: 8,
|
|
borderRadiusSM: 6,
|
|
controlHeight: 40,
|
|
controlHeightLG: 48,
|
|
controlHeightSM: 32,
|
|
|
|
// Background colors
|
|
colorBgContainer: DARK_COLOR[300],
|
|
colorBgElevated: DARK_COLOR[200],
|
|
colorBgLayout: darkComponentBackground,
|
|
colorBgSpotlight: DARK_COLOR[400],
|
|
colorBgMask: DARK_COLOR.maskBg,
|
|
|
|
// Text colors
|
|
colorText: DARK_COLOR.textPrimary,
|
|
colorTextSecondary: DARK_COLOR.textSecondary,
|
|
colorTextTertiary: DARK_COLOR.textTertiary,
|
|
colorTextQuaternary: DARK_COLOR.textQuaternary,
|
|
colorTextPlaceholder: DARK_COLOR.textDisabled,
|
|
colorTextDisabled: DARK_COLOR.textDisabled,
|
|
colorTextLabel: DARK_COLOR.textSecondary,
|
|
colorTextDescription: DARK_COLOR.textTertiary,
|
|
|
|
// Border colors
|
|
colorBorder: DARK_COLOR.borderColor,
|
|
colorBorderSecondary: DARK_COLOR.borderColorLight,
|
|
|
|
// Fill colors
|
|
colorFill: DARK_COLOR[400],
|
|
colorFillSecondary: DARK_COLOR[500],
|
|
colorFillTertiary: DARK_COLOR[600],
|
|
colorFillQuaternary: DARK_COLOR[700],
|
|
|
|
// Success, warning, error colors
|
|
colorSuccess: DARK_COLOR.success,
|
|
colorWarning: DARK_COLOR.warning,
|
|
colorError: DARK_COLOR.error,
|
|
colorInfo: DARK_COLOR.info,
|
|
|
|
// Shadow
|
|
boxShadow: DARK_COLOR.shadowLight,
|
|
boxShadowSecondary: DARK_COLOR.shadowMedium,
|
|
},
|
|
components: {
|
|
// Layout components
|
|
Layout: {
|
|
headerBg: DARK_COLOR.headerBg,
|
|
siderBg: DARK_COLOR.sidebarBg,
|
|
bodyBg: darkComponentBackground,
|
|
footerBg: DARK_COLOR.headerBg,
|
|
},
|
|
|
|
// Card component
|
|
Card: {
|
|
colorBgContainer: ProBlack2,
|
|
colorBorderSecondary: DARK_COLOR.borderColor,
|
|
boxShadow: DARK_COLOR.shadowLight,
|
|
boxShadowTertiary: DARK_COLOR.shadowMedium,
|
|
padding: 16,
|
|
paddingLG: 20,
|
|
paddingSM: 12,
|
|
borderRadius: 24,
|
|
borderRadiusLG: 24,
|
|
},
|
|
|
|
// Button component
|
|
Button: {
|
|
colorPrimary: DARK_COLOR.primaryColor,
|
|
colorPrimaryHover: DARK_COLOR.primaryColorHover,
|
|
colorPrimaryActive: DARK_COLOR.primaryColorActive,
|
|
colorBgContainer: DARK_COLOR[300],
|
|
colorBorder: DARK_COLOR.borderColor,
|
|
controlHeight: 40,
|
|
controlHeightLG: 48,
|
|
controlHeightSM: 32,
|
|
defaultShadow: "none",
|
|
borderRadius: 1000,
|
|
borderRadiusLG: 1000,
|
|
},
|
|
|
|
// Input components
|
|
Input: {
|
|
colorBgContainer: DARK_COLOR[300],
|
|
colorBorder: DARK_COLOR.borderColor,
|
|
colorText: DARK_COLOR.textPrimary,
|
|
colorTextPlaceholder: DARK_COLOR.textDisabled,
|
|
borderRadiusLG: 1000,
|
|
fontSize: 12,
|
|
fontSizeLG: 12,
|
|
},
|
|
|
|
InputNumber: {
|
|
colorBgContainer: DARK_COLOR[300],
|
|
colorBorder: DARK_COLOR.borderColor,
|
|
colorText: DARK_COLOR.textPrimary,
|
|
borderRadiusLG: 1000,
|
|
fontSize: 12,
|
|
fontSizeLG: 12,
|
|
},
|
|
|
|
// Select component
|
|
Select: {
|
|
colorBgContainer: DARK_COLOR[300],
|
|
colorBgElevated: DARK_COLOR[200],
|
|
colorBorder: DARK_COLOR.borderColor,
|
|
colorText: DARK_COLOR.textPrimary,
|
|
colorTextPlaceholder: DARK_COLOR.textDisabled,
|
|
borderRadius: 1000,
|
|
optionSelectedBg: DARK_COLOR.activeBg,
|
|
},
|
|
|
|
// Menu component
|
|
Menu: {
|
|
colorItemBg: DARK_COLOR.sidebarBg,
|
|
colorItemText: DARK_COLOR.textPrimary,
|
|
colorItemTextSelected: DARK_COLOR.primaryColor,
|
|
colorItemBgSelected: DARK_COLOR.activeBg,
|
|
colorItemBgHover: DARK_COLOR.hoverBg,
|
|
colorSubItemBg: DARK_COLOR[200],
|
|
colorActiveBarWidth: 3,
|
|
colorActiveBarBorderSize: 0,
|
|
},
|
|
|
|
// Table component
|
|
Table: {
|
|
colorBgContainer: DARK_COLOR.tableBg,
|
|
colorFillAlter: DARK_COLOR[200],
|
|
colorFillContent: DARK_COLOR[300],
|
|
colorFillSecondary: DARK_COLOR[400],
|
|
headerBg: DARK_COLOR[400],
|
|
headerColor: DARK_COLOR.textPrimary,
|
|
rowSelectedBg: DARK_COLOR.activeBg,
|
|
rowHoverBg: DARK_COLOR.hoverBg,
|
|
borderColor: DARK_COLOR.borderColor,
|
|
headerSplitColor: DARK_COLOR.borderColor,
|
|
},
|
|
|
|
// Drawer component
|
|
Drawer: {
|
|
colorBgElevated: DARK_COLOR[200],
|
|
colorBgMask: DARK_COLOR.maskBg,
|
|
colorBorder: DARK_COLOR.borderColor,
|
|
colorSplit: DARK_COLOR.borderColor,
|
|
},
|
|
|
|
// Modal component
|
|
Modal: {
|
|
colorBgElevated: DARK_COLOR[200],
|
|
colorBgMask: DARK_COLOR.maskBg,
|
|
colorIcon: DARK_COLOR.textSecondary,
|
|
colorIconHover: DARK_COLOR.textPrimary,
|
|
},
|
|
|
|
// Tabs component
|
|
Tabs: {
|
|
colorBgContainer: DARK_COLOR[300],
|
|
colorBorderSecondary: DARK_COLOR.borderColor,
|
|
colorText: DARK_COLOR.textPrimary,
|
|
colorTextDescription: DARK_COLOR.textSecondary,
|
|
colorPrimary: DARK_COLOR.primaryColor,
|
|
colorPrimaryHover: DARK_COLOR.primaryColorHover,
|
|
colorPrimaryActive: DARK_COLOR.primaryColorActive,
|
|
},
|
|
|
|
// Typography component
|
|
Typography: {
|
|
colorText: DARK_COLOR.textPrimary,
|
|
colorTextSecondary: DARK_COLOR.textSecondary,
|
|
colorTextDescription: DARK_COLOR.textTertiary,
|
|
colorLink: DARK_COLOR.primaryColor,
|
|
colorLinkHover: DARK_COLOR.primaryColorHover,
|
|
colorLinkActive: DARK_COLOR.primaryColorActive,
|
|
},
|
|
|
|
// Breadcrumb component
|
|
Breadcrumb: {
|
|
colorText: DARK_COLOR.textSecondary,
|
|
colorTextDescription: DARK_COLOR.textTertiary,
|
|
linkColor: DARK_COLOR.textSecondary,
|
|
lastItemColor: DARK_COLOR.textPrimary,
|
|
},
|
|
|
|
// Divider component
|
|
Divider: {
|
|
colorSplit: DARK_COLOR.borderColor,
|
|
},
|
|
|
|
// Rate component
|
|
Rate: {
|
|
colorFillContent: DARK_COLOR[400],
|
|
colorText: DARK_COLOR.primaryColor,
|
|
},
|
|
|
|
// Segmented component
|
|
Segmented: {
|
|
colorBgLayout: DARK_COLOR[200],
|
|
colorBgElevated: DARK_COLOR[300],
|
|
colorText: DARK_COLOR.textPrimary,
|
|
colorTextLabel: DARK_COLOR.textPrimary,
|
|
borderRadius: 8,
|
|
},
|
|
|
|
// Calendar component
|
|
Calendar: {
|
|
colorBgContainer: DARK_COLOR[300],
|
|
colorBgElevated: DARK_COLOR[200],
|
|
colorText: DARK_COLOR.textPrimary,
|
|
colorTextSecondary: DARK_COLOR.textSecondary,
|
|
colorBorder: DARK_COLOR.borderColor,
|
|
},
|
|
|
|
// Carousel component
|
|
Carousel: {
|
|
colorBgContainer: DARK_COLOR[400],
|
|
dotWidth: 8,
|
|
dotHeight: 8,
|
|
dotActiveWidth: 24,
|
|
},
|
|
|
|
// Timeline component
|
|
Timeline: {
|
|
colorText: DARK_COLOR.textPrimary,
|
|
colorTextSecondary: DARK_COLOR.textSecondary,
|
|
colorSplit: DARK_COLOR.borderColor,
|
|
},
|
|
|
|
// DatePicker component
|
|
DatePicker: {
|
|
colorBgContainer: DARK_COLOR[300],
|
|
colorBgElevated: DARK_COLOR[200],
|
|
colorBorder: DARK_COLOR.borderColor,
|
|
colorText: DARK_COLOR.textPrimary,
|
|
colorTextPlaceholder: DARK_COLOR.textDisabled,
|
|
borderRadius: 1000,
|
|
},
|
|
},
|
|
};
|
|
|
|
// CSS-in-JS Utilities (For global use)
|
|
export const futuristicStyles = {
|
|
textGradient: `background: ${colors.secondary}; -webkit-background-clip: text; -webkit-text-fill-color: transparent;`,
|
|
glassEffect: `background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1);`,
|
|
darkGlassEffect: `background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1);`,
|
|
};
|