import { ThemeConfig } from "@chakra-ui/react" ; import { createBreakpoints , mode } from "@chakra-ui/theme-tools" ; const fonts = { body : `'Inter', sans-serif` , heading : `'Space Grotesk', monospace` , mono : `'Menlo', monospace` , } ; const breakpoints = createBreakpoints ( { sm : "640px" , md : "768px" , lg : "1024px" , xl : "1280px" , "2xl" : "1536px" , } ) ; const colors = { black : "#000" , white : "#fff" , whiteTheme : { 50 : "rgba(255,255,255,0.25)" , 100 : "#fff" , 200 : "#fff" , 300 : "#fff" , 400 : "#fff" , 500 : "#fff" , 600 : "#fff" , 700 : "#fff" , 800 : "#fff" , 900 : "#fff" , } , rose : { 50 : "#fff1f2" , 100 : "#ffe4e6" , 200 : "#fecdd3" , 300 : "#fda4af" , 400 : "#fb7185" , 500 : "#f43f5e" , 600 : "#e11d48" , 700 : "#be123c" , 800 : "#9f1239" , 900 : "#881337" , } , pink : { 50 : "#fdf2f8" , 100 : "#fce7f3" , 200 : "#fbcfe8" , 300 : "#f9a8d4" , 400 : "#f472b6" , 500 : "#ec4899" , 600 : "#db2777" , 700 : "#be185d" , 800 : "#9d174d" , 900 : "#831843" , } , fuchsia : { 50 : "#fdf4ff" , 100 : "#fae8ff" , 200 : "#f5d0fe" , 300 : "#f0abfc" , 400 : "#e879f9" , 500 : "#d946ef" , 600 : "#c026d3" , 700 : "#a21caf" , 800 : "#86198f" , 900 : "#701a75" , } , purple : { 50 : "#faf5ff" , 100 : "#f3e8ff" , 200 : "#e9d5ff" , 300 : "#d8b4fe" , 400 : "#c084fc" , 500 : "#a855f7" , 600 : "#9333ea" , 700 : "#7e22ce" , 800 : "#6b21a8" , 900 : "#581c87" , } , violet : { 50 : "#f5f3ff" , 100 : "#ede9fe" , 200 : "#ddd6fe" , 300 : "#c4b5fd" , 400 : "#a78bfa" , 500 : "#8b5cf6" , 600 : "#7c3aed" , 700 : "#6d28d9" , 800 : "#5b21b6" , 900 : "#4c1d95" , } , indigo : { 50 : "#ECEEF8" , 100 : "#CACFED" , 200 : "#A8B1E1" , 300 : "#8692D5" , 400 : "#6473C9" , 500 : "#4255BD" , 600 : "#354497" , 700 : "#283371" , 800 : "#1A224C" , 900 : "#0D1126" , } , blue : { 50 : "#eff6ff" , 100 : "#dbeafe" , 200 : "#bfdbfe" , 300 : "#93c5fd" , 400 : "#60a5fa" , 500 : "#3b82f6" , 600 : "#2563eb" , 700 : "#1d4ed8" , 800 : "#1e40af" , 900 : "#1e3a8a" , } , lightBlue : { 50 : "#f0f9ff" , 100 : "#e0f2fe" , 200 : "#bae6fd" , 300 : "#7dd3fc" , 400 : "#38bdf8" , 500 : "#0ea5e9" , 600 : "#0284c7" , 700 : "#0369a1" , 800 : "#075985" , 900 : "#0c4a6e" , } , cyan : { 50 : "#ecfeff" , 100 : "#cffafe" , 200 : "#a5f3fc" , 300 : "#67e8f9" , 400 : "#22d3ee" , 500 : "#06b6d4" , 600 : "#0891b2" , 700 : "#0e7490" , 800 : "#155e75" , 900 : "#164e63" , } , teal : { 50 : "#E6FFFA" , 100 : "#B2F5EA" , 200 : "#81E6D9" , 300 : "#4FD1C5" , 400 : "#38B2AC" , 500 : "#319795" , 600 : "#2C7A7B" , 700 : "#285E61" , 800 : "#234E52" , 900 : "#1D4044" , } , emerald : { 50 : "#ecfdf5" , 100 : "#d1fae5" , 200 : "#a7f3d0" , 300 : "#6ee7b7" , 400 : "#34d399" , 500 : "#10b981" , 600 : "#059669" , 700 : "#047857" , 800 : "#065f46" , 900 : "#064e3b" , } , green : { 50 : "#f0fdf4" , 100 : "#dcfce7" , 200 : "#bbf7d0" , 300 : "#86efac" , 400 : "#4ade80" , 500 : "#22c55e" , 600 : "#16a34a" , 700 : "#15803d" , 800 : "#166534" , 900 : "#14532d" , } , lime : { 50 : "#f7fee7" , 100 : "#ecfccb" , 200 : "#d9f99d" , 300 : "#bef264" , 400 : "#a3e635" , 500 : "#84cc16" , 600 : "#65a30d" , 700 : "#4d7c0f" , 800 : "#3f6212" , 900 : "#365314" , } , yellow : { 50 : "#fefce8" , 100 : "#fef9c3" , 200 : "#fef08a" , 300 : "#fde047" , 400 : "#facc15" , 500 : "#eab308" , 600 : "#ca8a04" , 700 : "#a16207" , 800 : "#854d0e" , 900 : "#713f12" , } , amber : { 50 : "#fffbeb" , 100 : "#fef3c7" , 200 : "#fde68a" , 300 : "#fcd34d" , 400 : "#fbbf24" , 500 : "#f59e0b" , 600 : "#d97706" , 700 : "#b45309" , 800 : "#92400e" , 900 : "#78350f" , } , orange : { 50 : "#fff3e0" , 100 : "#ffe0b2" , 200 : "#ffcc80" , 300 : "#ffb74d" , 400 : "#ffa726" , 500 : "#ff9800" , 600 : "#fb8c00" , 700 : "#f57c00" , 800 : "#ef6c00" , 900 : "#e65100" , a100 : "#ffd180" , a200 : "#ffab40" , a400 : "#ff9100" , a700 : "#ff6d00" , } , red : { 50 : "#fef2f2" , 100 : "#fee2e2" , 200 : "#fecaca" , 300 : "#fca5a5" , 400 : "#f87171" , 500 : "#ef4444" , 600 : "#dc2626" , 700 : "#b91c1c" , 800 : "#991b1b" , 900 : "#7f1d1d" , } , warmGray : { 50 : "#fafaf9" , 100 : "#f5f5f4" , 200 : "#e7e5e4" , 300 : "#d6d3d1" , 400 : "#a8a29e" , 500 : "#78716c" , 600 : "#57534e" , 700 : "#44403c" , 800 : "#292524" , 900 : "#1c1917" , } , trueGray : { 50 : "#fafafa" , 100 : "#f5f5f5" , 200 : "#e5e5e5" , 300 : "#d4d4d4" , 400 : "#a3a3a3" , 500 : "#737373" , 600 : "#525252" , 700 : "#404040" , 800 : "#262626" , 900 : "#171717" , } , gray : { 50 : "#f9fafb" , 100 : "#f3f4f6" , 200 : "#e5e7eb" , 300 : "#d1d5db" , 400 : "#9ca3af" , 500 : "#6b7280" , 600 : "#4b5563" , 700 : "#374151" , 800 : "#1f2937" , 900 : "#111827" , } , blueGray : { 50 : "#f8fafc" , 100 : "#f1f5f9" , 200 : "#e2e8f0" , 300 : "#cbd5e1" , 400 : "#94a3b8" , 500 : "#64748b" , 600 : "#475569" , 700 : "#334155" , 800 : "#1e293b" , 900 : "#0f172a" , } , } ; const shadows = { sm : "0 1px 2px 0 rgba(0, 0, 0, 0.05)" , DEFAULT : "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)" , md : "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)" , lg : "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)" , xl : "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)" , "2xl" : "0 25px 50px -12px rgba(0, 0, 0, 0.25)" , inner : "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)" , none : "none" , } ; const space = { px : "1px" , 0 : "0" , 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" , 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" , } ; const sizes = { ... space , max : "max-content" , min : "min-content" , full : "100%" , "3xs" : "14rem" , "2xs" : "16rem" , xs : "20rem" , sm : "24rem" , md : "28rem" , lg : "32rem" , xl : "36rem" , "2xl" : "42rem" , "3xl" : "48rem" , "4xl" : "56rem" , "5xl" : "64rem" , "6xl" : "72rem" , "7xl" : "80rem" , "8xl" : "90rem" , container : { sm : "640px" , md : "768px" , lg : "1024px" , xl : "1280px" , } , } ; const styles = { global : ( props ) => ( { body : { fontFamily : "body" , color : mode ( "blackAlpha.900" , "whiteAlpha.900" ) ( props ) , bg : mode ( "gray.100" , "gray.800" ) ( props ) , } , } ) , } ; const config = { initialColorMode : "dark" , useSystemColorMode : false , } ; const theme = { fonts , breakpoints , colors , shadows , space , sizes , styles , config } ; export default theme ;