518 lines
14 KiB
TypeScript
518 lines
14 KiB
TypeScript
// src/appThemeConfig.ts
|
|
import type { ThemeConfig } from "antd";
|
|
|
|
export const colors = {
|
|
primary: "#CC9300",
|
|
secondary: "linear-gradient(135deg, #00C1D4 0%, #FF5F6D 100%)",
|
|
darkSpace: "linear-gradient(to right, #0F0525, #2A0B45)",
|
|
};
|
|
|
|
export const ProGray1 = "#434E5C";
|
|
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 lightColors = {
|
|
50: "#e0f1ff",
|
|
100: "#b0d2ff",
|
|
200: "#7fb0ff",
|
|
300: "#4d8bff",
|
|
400: "#1e79fe",
|
|
500: "#1890ff",
|
|
600: "#09237D",
|
|
700: "#004f81",
|
|
800: "#003650",
|
|
900: "#001620",
|
|
borderColor: "#E7EAF3B2",
|
|
primaryColor: "#FFC600",
|
|
secondaryColor: "#09237D",
|
|
whiteColor: "#FFF",
|
|
blackColor: "#000000e0",
|
|
hoverBg: "#F1F5F9",
|
|
activeBg: "#E2E8F0",
|
|
|
|
bgColor: "#f7f7f7",
|
|
secondaryBgColor: "#ffffff",
|
|
fgColor: "#181818",
|
|
secondaryFgColor: "#0a0a0a",
|
|
};
|
|
|
|
// Enhanced Dark theme colors with better contrast and modern aesthetics
|
|
export const darkColors = {
|
|
// 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: "#FFC600",
|
|
primaryColorHover: "#FFD633",
|
|
primaryColorActive: "#E6B800",
|
|
secondaryColor: "#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)",
|
|
|
|
bgColor: "#181818",
|
|
fgColor: "#f7f7f7",
|
|
secondaryBgColor: "#0a0a0a",
|
|
secondaryFgColor: "#ffffff",
|
|
|
|
// 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 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: lightColors.bgColor,
|
|
colorBgElevated: lightColors.bgColor,
|
|
colorBgLayout: lightColors.bgColor,
|
|
|
|
// ------ Pro colors
|
|
proSiderColor: "#1E5083",
|
|
proHeaderColor: colors.primary,
|
|
};
|
|
|
|
export const DarkThemeVars = {
|
|
...SharedThemeVars,
|
|
white: darkColors.bgColor,
|
|
colorBgElevated: darkColors[200],
|
|
colorBgContainer: darkColors[300],
|
|
colorBgLayout: darkColors.bgColor,
|
|
colorText: darkColors.textPrimary,
|
|
colorTextSecondary: darkColors.textSecondary,
|
|
colorTextTertiary: darkColors.textTertiary,
|
|
colorTextQuaternary: darkColors.textQuaternary,
|
|
colorBorder: darkColors.borderColor,
|
|
colorBorderSecondary: darkColors.borderColorLight,
|
|
|
|
// ------ Pro colors
|
|
proSiderColor: darkColors[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: lightColors.blackColor,
|
|
colorBgLayout: lightColors.bgColor,
|
|
},
|
|
components: {
|
|
Breadcrumb: {
|
|
linkColor: "rgba(0,0,0,.8)",
|
|
itemColor: "rgba(0,0,0,.8)",
|
|
},
|
|
Button: {
|
|
colorLink: lightColors["600"],
|
|
colorLinkActive: lightColors["700"],
|
|
colorLinkHover: lightColors["300"],
|
|
borderRadius: 1000,
|
|
borderRadiusLG: 1000,
|
|
// defaultShadow: "none",
|
|
},
|
|
Calendar: {
|
|
colorBgContainer: "none",
|
|
},
|
|
Card: {
|
|
colorBgContainer: lightColors.whiteColor,
|
|
colorBorderSecondary: lightColors["borderColor"],
|
|
boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
|
|
padding: 16,
|
|
paddingLG: 16,
|
|
borderRadius: 24,
|
|
borderRadiusLG: 24,
|
|
},
|
|
Carousel: {
|
|
colorBgContainer: lightColors["800"],
|
|
dotWidth: 8,
|
|
},
|
|
Rate: {
|
|
colorFillContent: lightColors["100"],
|
|
colorText: lightColors["600"],
|
|
},
|
|
Segmented: {
|
|
colorBgLayout: lightColors["hoverBg"],
|
|
borderRadius: 6,
|
|
colorTextLabel: "#000000",
|
|
},
|
|
Table: {
|
|
borderColor: lightColors["100"],
|
|
headerBg: lightColors.primaryColor,
|
|
headerColor: lightColors.whiteColor,
|
|
rowSelectedBg: lightColors.primaryColor,
|
|
cellPaddingBlock: 8,
|
|
colorBgContainer: lightColors.whiteColor,
|
|
colorFillAlter: lightColors.hoverBg,
|
|
},
|
|
Tabs: {
|
|
colorBorderSecondary: lightColors["100"],
|
|
},
|
|
Timeline: {
|
|
dotBg: "none",
|
|
},
|
|
Typography: {
|
|
colorLink: lightColors["600"],
|
|
colorLinkActive: lightColors["700"],
|
|
colorLinkHover: lightColors["300"],
|
|
linkHoverDecoration: "underline",
|
|
},
|
|
Drawer: {
|
|
wireframe: true,
|
|
colorSplit: ProGray1,
|
|
lineWidth: 3,
|
|
controlHeightLG: 30,
|
|
},
|
|
Menu: {
|
|
colorItemBg: lightColors.whiteColor,
|
|
colorItemText: lightColors["800"],
|
|
colorItemTextSelected: lightColors.secondaryColor,
|
|
colorItemBgSelected: lightColors.activeBg,
|
|
colorItemBgHover: lightColors.hoverBg,
|
|
},
|
|
Layout: {
|
|
headerBg: lightColors.whiteColor,
|
|
bodyBg: lightColors.bgColor,
|
|
},
|
|
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: lightColors.activeBg,
|
|
},
|
|
},
|
|
};
|
|
|
|
// Enhanced Dark theme configuration
|
|
export const darkThemeConfig: ThemeConfig = {
|
|
token: {
|
|
// Primary colors
|
|
colorPrimary: darkColors.primaryColor,
|
|
colorPrimaryHover: darkColors.primaryColorHover,
|
|
colorPrimaryActive: darkColors.primaryColorActive,
|
|
colorLink: darkColors.primaryColor,
|
|
colorLinkHover: darkColors.primaryColorHover,
|
|
colorLinkActive: darkColors.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: darkColors[300],
|
|
colorBgElevated: darkColors[200],
|
|
colorBgLayout: darkColors.bgColor,
|
|
colorBgSpotlight: darkColors[400],
|
|
colorBgMask: darkColors.maskBg,
|
|
|
|
// Text colors
|
|
colorText: darkColors.textPrimary,
|
|
colorTextSecondary: darkColors.textSecondary,
|
|
colorTextTertiary: darkColors.textTertiary,
|
|
colorTextQuaternary: darkColors.textQuaternary,
|
|
colorTextPlaceholder: darkColors.textDisabled,
|
|
colorTextDisabled: darkColors.textDisabled,
|
|
colorTextLabel: darkColors.textSecondary,
|
|
colorTextDescription: darkColors.textTertiary,
|
|
|
|
// Border colors
|
|
colorBorder: darkColors.borderColor,
|
|
colorBorderSecondary: darkColors.borderColorLight,
|
|
|
|
// Fill colors
|
|
colorFill: darkColors[400],
|
|
colorFillSecondary: darkColors[500],
|
|
colorFillTertiary: darkColors[600],
|
|
colorFillQuaternary: darkColors[700],
|
|
|
|
// Success, warning, error colors
|
|
colorSuccess: darkColors.success,
|
|
colorWarning: darkColors.warning,
|
|
colorError: darkColors.error,
|
|
colorInfo: darkColors.info,
|
|
|
|
// Shadow
|
|
boxShadow: darkColors.shadowLight,
|
|
boxShadowSecondary: darkColors.shadowMedium,
|
|
},
|
|
components: {
|
|
// Layout components
|
|
Layout: {
|
|
headerBg: darkColors.headerBg,
|
|
siderBg: darkColors.sidebarBg,
|
|
bodyBg: darkColors.bgColor,
|
|
footerBg: darkColors.headerBg,
|
|
},
|
|
|
|
// Card component
|
|
Card: {
|
|
colorBgContainer: ProBlack2,
|
|
colorBorderSecondary: darkColors.borderColor,
|
|
boxShadow: darkColors.shadowLight,
|
|
boxShadowTertiary: darkColors.shadowMedium,
|
|
padding: 16,
|
|
paddingLG: 20,
|
|
paddingSM: 12,
|
|
borderRadius: 24,
|
|
borderRadiusLG: 24,
|
|
},
|
|
|
|
// Button component
|
|
Button: {
|
|
colorPrimary: darkColors.primaryColor,
|
|
colorPrimaryHover: darkColors.primaryColorHover,
|
|
colorPrimaryActive: darkColors.primaryColorActive,
|
|
colorBgContainer: darkColors[300],
|
|
colorBorder: darkColors.borderColor,
|
|
controlHeight: 40,
|
|
controlHeightLG: 48,
|
|
controlHeightSM: 32,
|
|
defaultShadow: "none",
|
|
borderRadius: 1000,
|
|
borderRadiusLG: 1000,
|
|
},
|
|
|
|
// Input components
|
|
Input: {
|
|
colorBgContainer: darkColors[300],
|
|
colorBorder: darkColors.borderColor,
|
|
colorText: darkColors.textPrimary,
|
|
colorTextPlaceholder: darkColors.textDisabled,
|
|
borderRadiusLG: 1000,
|
|
fontSize: 12,
|
|
fontSizeLG: 12,
|
|
},
|
|
|
|
InputNumber: {
|
|
colorBgContainer: darkColors[300],
|
|
colorBorder: darkColors.borderColor,
|
|
colorText: darkColors.textPrimary,
|
|
borderRadiusLG: 1000,
|
|
fontSize: 12,
|
|
fontSizeLG: 12,
|
|
},
|
|
|
|
// Select component
|
|
Select: {
|
|
colorBgContainer: darkColors[300],
|
|
colorBgElevated: darkColors[200],
|
|
colorBorder: darkColors.borderColor,
|
|
colorText: darkColors.textPrimary,
|
|
colorTextPlaceholder: darkColors.textDisabled,
|
|
borderRadius: 1000,
|
|
optionSelectedBg: darkColors.activeBg,
|
|
},
|
|
|
|
// Menu component
|
|
Menu: {
|
|
colorItemBg: darkColors.sidebarBg,
|
|
colorItemText: darkColors.textPrimary,
|
|
colorItemTextSelected: darkColors.primaryColor,
|
|
colorItemBgSelected: darkColors.activeBg,
|
|
colorItemBgHover: darkColors.hoverBg,
|
|
colorSubItemBg: darkColors[200],
|
|
colorActiveBarWidth: 3,
|
|
colorActiveBarBorderSize: 0,
|
|
},
|
|
|
|
// Table component
|
|
Table: {
|
|
colorBgContainer: darkColors.tableBg,
|
|
colorFillAlter: darkColors[200],
|
|
colorFillContent: darkColors[300],
|
|
colorFillSecondary: darkColors[400],
|
|
headerBg: darkColors[400],
|
|
headerColor: darkColors.textPrimary,
|
|
rowSelectedBg: darkColors.activeBg,
|
|
rowHoverBg: darkColors.hoverBg,
|
|
borderColor: darkColors.borderColor,
|
|
headerSplitColor: darkColors.borderColor,
|
|
},
|
|
|
|
// Drawer component
|
|
Drawer: {
|
|
colorBgElevated: darkColors[200],
|
|
colorBgMask: darkColors.maskBg,
|
|
colorBorder: darkColors.borderColor,
|
|
colorSplit: darkColors.borderColor,
|
|
},
|
|
|
|
// Modal component
|
|
Modal: {
|
|
colorBgElevated: darkColors[200],
|
|
colorBgMask: darkColors.maskBg,
|
|
colorIcon: darkColors.textSecondary,
|
|
colorIconHover: darkColors.textPrimary,
|
|
},
|
|
|
|
// Tabs component
|
|
Tabs: {
|
|
colorBgContainer: darkColors[300],
|
|
colorBorderSecondary: darkColors.borderColor,
|
|
colorText: darkColors.textPrimary,
|
|
colorTextDescription: darkColors.textSecondary,
|
|
colorPrimary: darkColors.primaryColor,
|
|
colorPrimaryHover: darkColors.primaryColorHover,
|
|
colorPrimaryActive: darkColors.primaryColorActive,
|
|
},
|
|
|
|
// Typography component
|
|
Typography: {
|
|
colorText: darkColors.textPrimary,
|
|
colorTextSecondary: darkColors.textSecondary,
|
|
colorTextDescription: darkColors.textTertiary,
|
|
colorLink: darkColors.primaryColor,
|
|
colorLinkHover: darkColors.primaryColorHover,
|
|
colorLinkActive: darkColors.primaryColorActive,
|
|
},
|
|
|
|
// Breadcrumb component
|
|
Breadcrumb: {
|
|
colorText: darkColors.textSecondary,
|
|
colorTextDescription: darkColors.textTertiary,
|
|
linkColor: darkColors.textSecondary,
|
|
lastItemColor: darkColors.textPrimary,
|
|
},
|
|
|
|
// Divider component
|
|
Divider: {
|
|
colorSplit: darkColors.borderColor,
|
|
},
|
|
|
|
// Rate component
|
|
Rate: {
|
|
colorFillContent: darkColors[400],
|
|
colorText: darkColors.primaryColor,
|
|
},
|
|
|
|
// Segmented component
|
|
Segmented: {
|
|
colorBgLayout: darkColors[200],
|
|
colorBgElevated: darkColors[300],
|
|
colorText: darkColors.textPrimary,
|
|
colorTextLabel: darkColors.textPrimary,
|
|
borderRadius: 8,
|
|
},
|
|
|
|
// Calendar component
|
|
Calendar: {
|
|
colorBgContainer: darkColors[300],
|
|
colorBgElevated: darkColors[200],
|
|
colorText: darkColors.textPrimary,
|
|
colorTextSecondary: darkColors.textSecondary,
|
|
colorBorder: darkColors.borderColor,
|
|
},
|
|
|
|
// Carousel component
|
|
Carousel: {
|
|
colorBgContainer: darkColors[400],
|
|
dotWidth: 8,
|
|
dotHeight: 8,
|
|
dotActiveWidth: 24,
|
|
},
|
|
|
|
// Timeline component
|
|
Timeline: {
|
|
colorText: darkColors.textPrimary,
|
|
colorTextSecondary: darkColors.textSecondary,
|
|
colorSplit: darkColors.borderColor,
|
|
},
|
|
|
|
// DatePicker component
|
|
DatePicker: {
|
|
colorBgContainer: darkColors[300],
|
|
colorBgElevated: darkColors[200],
|
|
colorBorder: darkColors.borderColor,
|
|
colorText: darkColors.textPrimary,
|
|
colorTextPlaceholder: darkColors.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);`,
|
|
};
|