448 lines
9.6 KiB
TypeScript
448 lines
9.6 KiB
TypeScript
export const colors = {
|
|
// Primary Colors
|
|
primary: {
|
|
50: "#f0fdf4",
|
|
100: "#dcfce7",
|
|
200: "#bbf7d0",
|
|
300: "#86efac",
|
|
400: "#4ade80",
|
|
500: "#22c55e",
|
|
600: "#16a34a",
|
|
700: "#15803d",
|
|
800: "#166534",
|
|
900: "#14532d",
|
|
950: "#052e16",
|
|
},
|
|
|
|
// Secondary Colors (Blue)
|
|
secondary: {
|
|
50: "#eff6ff",
|
|
100: "#dbeafe",
|
|
200: "#bfdbfe",
|
|
300: "#93c5fd",
|
|
400: "#60a5fa",
|
|
500: "#3b82f6",
|
|
600: "#2563eb",
|
|
700: "#1d4ed8",
|
|
800: "#1e40af",
|
|
900: "#1e3a8a",
|
|
950: "#172554",
|
|
},
|
|
|
|
// Neutral Colors
|
|
neutral: {
|
|
50: "#fafafa",
|
|
100: "#f5f5f5",
|
|
200: "#e5e5e5",
|
|
300: "#d4d4d4",
|
|
400: "#a3a3a3",
|
|
500: "#737373",
|
|
600: "#525252",
|
|
700: "#404040",
|
|
800: "#262626",
|
|
900: "#171717",
|
|
950: "#0a0a0a",
|
|
},
|
|
|
|
// Status Colors
|
|
success: {
|
|
50: "#f0fdf4",
|
|
100: "#dcfce7",
|
|
200: "#bbf7d0",
|
|
300: "#86efac",
|
|
400: "#4ade80",
|
|
500: "#22c55e",
|
|
600: "#16a34a",
|
|
700: "#15803d",
|
|
800: "#166534",
|
|
900: "#14532d",
|
|
},
|
|
|
|
error: {
|
|
50: "#fef2f2",
|
|
100: "#fee2e2",
|
|
200: "#fecaca",
|
|
300: "#fca5a5",
|
|
400: "#f87171",
|
|
500: "#ef4444",
|
|
600: "#dc2626",
|
|
700: "#b91c1c",
|
|
800: "#991b1b",
|
|
900: "#7f1d1d",
|
|
},
|
|
|
|
warning: {
|
|
50: "#fffbeb",
|
|
100: "#fef3c7",
|
|
200: "#fde68a",
|
|
300: "#fcd34d",
|
|
400: "#fbbf24",
|
|
500: "#f59e0b",
|
|
600: "#d97706",
|
|
700: "#b45309",
|
|
800: "#92400e",
|
|
900: "#78350f",
|
|
},
|
|
|
|
info: {
|
|
50: "#eff6ff",
|
|
100: "#dbeafe",
|
|
200: "#bfdbfe",
|
|
300: "#93c5fd",
|
|
400: "#60a5fa",
|
|
500: "#3b82f6",
|
|
600: "#2563eb",
|
|
700: "#1d4ed8",
|
|
800: "#1e40af",
|
|
900: "#1e3a8a",
|
|
},
|
|
|
|
// Teal Colors (Brand accent)
|
|
teal: {
|
|
50: "#f0fdfa",
|
|
100: "#ccfbf1",
|
|
200: "#99f6e4",
|
|
300: "#5eead4",
|
|
400: "#2dd4bf",
|
|
500: "#14b8a6",
|
|
600: "#0d9488",
|
|
700: "#0f766e",
|
|
800: "#115e59",
|
|
900: "#134e4a",
|
|
},
|
|
|
|
// Dark Colors (Brand dark)
|
|
dark: {
|
|
50: "#f8fafc",
|
|
100: "#f1f5f9",
|
|
200: "#e2e8f0",
|
|
300: "#cbd5e1",
|
|
400: "#94a3b8",
|
|
500: "#64748b",
|
|
600: "#475569",
|
|
700: "#334155",
|
|
800: "#1e293b",
|
|
900: "#0f172a",
|
|
950: "#020617",
|
|
},
|
|
|
|
// Login specific colors
|
|
login: {
|
|
primary: "#3aea83",
|
|
darkStart: "#464861",
|
|
darkEnd: "#111628",
|
|
},
|
|
};
|
|
|
|
export const typography = {
|
|
fontFamily: {
|
|
sans: ["Vazirmatn", "Inter", "ui-sans-serif", "system-ui", "sans-serif"],
|
|
mono: ["ui-monospace", "SFMono-Regular", "Consolas", "monospace"],
|
|
},
|
|
|
|
fontSize: {
|
|
xs: ["0.75rem", { lineHeight: "1rem" }],
|
|
sm: ["0.875rem", { lineHeight: "1.25rem" }],
|
|
base: ["1rem", { lineHeight: "1.5rem" }],
|
|
lg: ["1.125rem", { lineHeight: "1.75rem" }],
|
|
xl: ["1.25rem", { lineHeight: "1.75rem" }],
|
|
"2xl": ["1.5rem", { lineHeight: "2rem" }],
|
|
"3xl": ["1.875rem", { lineHeight: "2.25rem" }],
|
|
"4xl": ["2.25rem", { lineHeight: "2.5rem" }],
|
|
"5xl": ["3rem", { lineHeight: "1" }],
|
|
"6xl": ["3.75rem", { lineHeight: "1" }],
|
|
},
|
|
|
|
fontWeight: {
|
|
thin: "100",
|
|
extralight: "200",
|
|
light: "300",
|
|
normal: "400",
|
|
medium: "500",
|
|
semibold: "600",
|
|
bold: "700",
|
|
extrabold: "800",
|
|
black: "900",
|
|
},
|
|
};
|
|
|
|
export const spacing = {
|
|
px: "1px",
|
|
0: "0px",
|
|
0.5: "0.125rem",
|
|
1: "0.25rem",
|
|
1.5: "0.375rem",
|
|
2: "0.5rem",
|
|
2.5: "0.625rem",
|
|
3: "0.75rem",
|
|
3.5: "0.875rem",
|
|
4: "1rem",
|
|
5: "1.25rem",
|
|
6: "1.5rem",
|
|
7: "1.75rem",
|
|
8: "2rem",
|
|
9: "2.25rem",
|
|
10: "2.5rem",
|
|
11: "2.75rem",
|
|
12: "3rem",
|
|
14: "3.5rem",
|
|
16: "4rem",
|
|
20: "5rem",
|
|
24: "6rem",
|
|
28: "7rem",
|
|
32: "8rem",
|
|
36: "9rem",
|
|
40: "10rem",
|
|
44: "11rem",
|
|
48: "12rem",
|
|
52: "13rem",
|
|
56: "14rem",
|
|
60: "15rem",
|
|
64: "16rem",
|
|
72: "18rem",
|
|
80: "20rem",
|
|
96: "24rem",
|
|
};
|
|
|
|
export const borderRadius = {
|
|
none: "0px",
|
|
sm: "0.125rem",
|
|
DEFAULT: "0.25rem",
|
|
md: "0.375rem",
|
|
lg: "0.5rem",
|
|
xl: "0.75rem",
|
|
"2xl": "1rem",
|
|
"3xl": "1.5rem",
|
|
full: "9999px",
|
|
};
|
|
|
|
export const shadows = {
|
|
sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
|
|
DEFAULT: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
|
|
md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
|
|
lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
|
|
xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
|
|
"2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
|
|
inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
|
|
none: "0 0 #0000",
|
|
};
|
|
|
|
export const animations = {
|
|
spin: "spin 1s linear infinite",
|
|
ping: "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite",
|
|
pulse: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
|
|
bounce: "bounce 1s infinite",
|
|
fadeIn: "fadeIn 0.3s ease-in-out",
|
|
fadeOut: "fadeOut 0.3s ease-in-out",
|
|
slideInRight: "slideInRight 0.3s ease-out",
|
|
slideInLeft: "slideInLeft 0.3s ease-out",
|
|
slideUp: "slideUp 0.3s ease-out",
|
|
slideDown: "slideDown 0.3s ease-out",
|
|
};
|
|
|
|
export const breakpoints = {
|
|
sm: "640px",
|
|
md: "768px",
|
|
lg: "1024px",
|
|
xl: "1280px",
|
|
"2xl": "1536px",
|
|
};
|
|
|
|
export const zIndex = {
|
|
auto: "auto",
|
|
0: "0",
|
|
10: "10",
|
|
20: "20",
|
|
30: "30",
|
|
40: "40",
|
|
50: "50",
|
|
dropdown: "1000",
|
|
sticky: "1020",
|
|
fixed: "1030",
|
|
modal: "1040",
|
|
popover: "1050",
|
|
tooltip: "1060",
|
|
toast: "1070",
|
|
};
|
|
|
|
// Component-specific design tokens
|
|
export const components = {
|
|
button: {
|
|
sizes: {
|
|
sm: {
|
|
height: "2rem",
|
|
padding: "0 0.75rem",
|
|
fontSize: "0.875rem",
|
|
},
|
|
md: {
|
|
height: "2.5rem",
|
|
padding: "0 1rem",
|
|
fontSize: "0.875rem",
|
|
},
|
|
lg: {
|
|
height: "3rem",
|
|
padding: "0 1.5rem",
|
|
fontSize: "1rem",
|
|
},
|
|
},
|
|
variants: {
|
|
primary: {
|
|
background: colors.primary[500],
|
|
color: "white",
|
|
hover: colors.primary[600],
|
|
active: colors.primary[700],
|
|
},
|
|
secondary: {
|
|
background: colors.secondary[500],
|
|
color: "white",
|
|
hover: colors.secondary[600],
|
|
active: colors.secondary[700],
|
|
},
|
|
teal: {
|
|
background: colors.teal[500],
|
|
color: colors.dark[900],
|
|
hover: colors.teal[600],
|
|
active: colors.teal[700],
|
|
},
|
|
outline: {
|
|
background: "transparent",
|
|
color: colors.neutral[700],
|
|
border: colors.neutral[300],
|
|
hover: colors.neutral[50],
|
|
},
|
|
ghost: {
|
|
background: "transparent",
|
|
color: colors.neutral[700],
|
|
hover: colors.neutral[100],
|
|
},
|
|
},
|
|
},
|
|
|
|
input: {
|
|
sizes: {
|
|
sm: {
|
|
height: "2rem",
|
|
padding: "0 0.75rem",
|
|
fontSize: "0.875rem",
|
|
},
|
|
md: {
|
|
height: "2.5rem",
|
|
padding: "0 0.75rem",
|
|
fontSize: "0.875rem",
|
|
},
|
|
lg: {
|
|
height: "3rem",
|
|
padding: "0 1rem",
|
|
fontSize: "1rem",
|
|
},
|
|
},
|
|
states: {
|
|
default: {
|
|
border: colors.neutral[300],
|
|
background: "white",
|
|
},
|
|
focus: {
|
|
border: colors.primary[500],
|
|
boxShadow: `0 0 0 3px ${colors.primary[100]}`,
|
|
},
|
|
error: {
|
|
border: colors.error[500],
|
|
boxShadow: `0 0 0 3px ${colors.error[100]}`,
|
|
},
|
|
disabled: {
|
|
background: colors.neutral[100],
|
|
color: colors.neutral[400],
|
|
cursor: "not-allowed",
|
|
},
|
|
},
|
|
},
|
|
|
|
card: {
|
|
default: {
|
|
background: "white",
|
|
border: colors.neutral[200],
|
|
borderRadius: borderRadius.lg,
|
|
boxShadow: shadows.sm,
|
|
padding: spacing[6],
|
|
},
|
|
hover: {
|
|
boxShadow: shadows.md,
|
|
},
|
|
},
|
|
};
|
|
|
|
// RTL-specific adjustments
|
|
export const rtl = {
|
|
marginRight: "marginLeft",
|
|
marginLeft: "marginRight",
|
|
paddingRight: "paddingLeft",
|
|
paddingLeft: "paddingRight",
|
|
right: "left",
|
|
left: "right",
|
|
borderRightWidth: "borderLeftWidth",
|
|
borderLeftWidth: "borderRightWidth",
|
|
borderRightColor: "borderLeftColor",
|
|
borderLeftColor: "borderRightColor",
|
|
};
|
|
|
|
// Theme variants
|
|
export const themes = {
|
|
light: {
|
|
background: colors.neutral[50],
|
|
foreground: colors.neutral[900],
|
|
card: "white",
|
|
cardForeground: colors.neutral[900],
|
|
popover: "white",
|
|
popoverForeground: colors.neutral[900],
|
|
primary: colors.primary[500],
|
|
primaryForeground: "white",
|
|
secondary: colors.neutral[100],
|
|
secondaryForeground: colors.neutral[900],
|
|
muted: colors.neutral[100],
|
|
mutedForeground: colors.neutral[500],
|
|
accent: colors.neutral[100],
|
|
accentForeground: colors.neutral[900],
|
|
destructive: colors.error[500],
|
|
destructiveForeground: "white",
|
|
border: colors.neutral[200],
|
|
input: colors.neutral[200],
|
|
ring: colors.primary[500],
|
|
teal: colors.teal[500],
|
|
tealForeground: colors.dark[900],
|
|
dark: colors.dark[900],
|
|
darkForeground: "white",
|
|
loginPrimary: colors.login.primary,
|
|
loginDarkStart: colors.login.darkStart,
|
|
loginDarkEnd: colors.login.darkEnd,
|
|
},
|
|
|
|
dark: {
|
|
background: colors.dark[950],
|
|
foreground: colors.neutral[50],
|
|
card: colors.dark[900],
|
|
cardForeground: colors.neutral[50],
|
|
popover: colors.dark[900],
|
|
popoverForeground: colors.neutral[50],
|
|
primary: colors.primary[400],
|
|
primaryForeground: colors.neutral[900],
|
|
secondary: colors.neutral[800],
|
|
secondaryForeground: colors.neutral[50],
|
|
muted: colors.neutral[800],
|
|
mutedForeground: colors.neutral[400],
|
|
accent: colors.neutral[800],
|
|
accentForeground: colors.neutral[50],
|
|
destructive: colors.error[400],
|
|
destructiveForeground: colors.neutral[50],
|
|
border: colors.neutral[800],
|
|
input: colors.neutral[800],
|
|
ring: colors.primary[400],
|
|
teal: colors.teal[400],
|
|
tealForeground: colors.dark[50],
|
|
dark: colors.dark[800],
|
|
darkForeground: colors.neutral[50],
|
|
loginPrimary: colors.login.primary,
|
|
loginDarkStart: colors.login.darkStart,
|
|
loginDarkEnd: colors.login.darkEnd,
|
|
},
|
|
};
|