Initial commit
This commit is contained in:
517
src/ThemeConstants.ts
Normal file
517
src/ThemeConstants.ts
Normal file
@@ -0,0 +1,517 @@
|
||||
// src/appThemeConfig.ts
|
||||
import type { ThemeConfig } from "antd";
|
||||
|
||||
export const colors = {
|
||||
primary: "#FFC600",
|
||||
secondary: "linear-gradient(135deg, #00C1D4 0%, #FF5F6D 100%)",
|
||||
darkSpace: "linear-gradient(to right, #0F0525, #2A0B45)",
|
||||
};
|
||||
|
||||
export const ProGray1 = "#f7f9fa";
|
||||
export const ProGray2 = "#F1F1F1";
|
||||
export const ProGray3 = "#edf0f2"; // for modal header background
|
||||
export const ProGray4 = "#DCDCDC"; // lines color
|
||||
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 COLOR = {
|
||||
50: "#e0f1ff",
|
||||
100: "#b0d2ff",
|
||||
200: "#7fb0ff",
|
||||
300: "#4d8bff",
|
||||
400: "#1e79fe",
|
||||
500: "#1890ff",
|
||||
600: "#09237D",
|
||||
700: "#004f81",
|
||||
800: "#003650",
|
||||
900: "#001620",
|
||||
borderColor: "#E7EAF3B2",
|
||||
primaryColor: "#FFC600",
|
||||
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: "#FFC600",
|
||||
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: COLOR.blackColor,
|
||||
colorBgLayout: componentBackground,
|
||||
},
|
||||
components: {
|
||||
Breadcrumb: {
|
||||
linkColor: "rgba(0,0,0,.8)",
|
||||
itemColor: "rgba(0,0,0,.8)",
|
||||
},
|
||||
Button: {
|
||||
colorLink: COLOR["600"],
|
||||
colorLinkActive: COLOR["700"],
|
||||
colorLinkHover: COLOR["300"],
|
||||
borderRadius: 1000,
|
||||
borderRadiusLG: 1000,
|
||||
// defaultShadow: "none",
|
||||
},
|
||||
Calendar: {
|
||||
colorBgContainer: "none",
|
||||
},
|
||||
Card: {
|
||||
colorBgContainer: COLOR.cardBg,
|
||||
colorBorderSecondary: COLOR["borderColor"],
|
||||
boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
|
||||
padding: 16,
|
||||
paddingLG: 16,
|
||||
borderRadius: 24,
|
||||
borderRadiusLG: 24,
|
||||
},
|
||||
Carousel: {
|
||||
colorBgContainer: COLOR["800"],
|
||||
dotWidth: 8,
|
||||
},
|
||||
Rate: {
|
||||
colorFillContent: COLOR["100"],
|
||||
colorText: COLOR["600"],
|
||||
},
|
||||
Segmented: {
|
||||
colorBgLayout: COLOR["100"],
|
||||
borderRadius: 6,
|
||||
colorTextLabel: "#000000",
|
||||
},
|
||||
Table: {
|
||||
borderColor: COLOR["100"],
|
||||
headerBg: COLOR.primaryColor,
|
||||
headerColor: COLOR.whiteColor,
|
||||
rowSelectedBg: COLOR.primaryColor,
|
||||
cellPaddingBlock: 8,
|
||||
colorBgContainer: COLOR.tableBg,
|
||||
colorFillAlter: COLOR.hoverBg,
|
||||
},
|
||||
Tabs: {
|
||||
colorBorderSecondary: COLOR["100"],
|
||||
},
|
||||
Timeline: {
|
||||
dotBg: "none",
|
||||
},
|
||||
Typography: {
|
||||
colorLink: COLOR["600"],
|
||||
colorLinkActive: COLOR["700"],
|
||||
colorLinkHover: COLOR["300"],
|
||||
linkHoverDecoration: "underline",
|
||||
},
|
||||
Drawer: {
|
||||
wireframe: true,
|
||||
colorSplit: ProGray4,
|
||||
lineWidth: 3,
|
||||
controlHeightLG: 30,
|
||||
},
|
||||
Menu: {
|
||||
colorItemBg: COLOR.sidebarBg,
|
||||
colorItemText: COLOR["800"],
|
||||
colorItemTextSelected: COLOR.primaryColor2,
|
||||
colorItemBgSelected: COLOR.activeBg,
|
||||
colorItemBgHover: COLOR.hoverBg,
|
||||
},
|
||||
Layout: {
|
||||
headerBg: 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,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// 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,
|
||||
borderRadius: 8,
|
||||
borderRadiusLG: 8,
|
||||
borderRadiusSM: 6,
|
||||
controlHeight: 40,
|
||||
controlHeightLG: 48,
|
||||
controlHeightSM: 32,
|
||||
defaultShadow: "none",
|
||||
},
|
||||
|
||||
// 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,
|
||||
},
|
||||
|
||||
// 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);`,
|
||||
};
|
||||
Reference in New Issue
Block a user