Created
August 2, 2021 16:50
-
-
Save chroline/6256f6ca9db5d147683445d65c00d7e8 to your computer and use it in GitHub Desktop.
Chakra UI theme for my projects
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { createBreakpoints } from "@chakra-ui/theme-tools"; | |
const fonts = { | |
body: `'Inter', sans-serif`, | |
heading: `'Inter', sans-serif`, | |
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 theme = { fonts, breakpoints, colors, shadows, space, sizes }; | |
export default theme; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment