File size: 2,356 Bytes
ee9fcd0 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | import { heroui } from "@heroui/react";
export default heroui({
defaultTheme: "dark",
layout: {
radius: {
small: "5px",
large: "20px",
},
},
themes: {
dark: {
colors: {
primary: "#4465DB",
// Map HeroUI's zinc-based semantic colours to our cool-grey palette.
// This ensures every HeroUI component that uses bg-default, bg-content*,
// etc. stays within the same colour family as the rest of the UI.
background: {
DEFAULT: "#0B0E14", // cool-grey-950 — app shell base
foreground: "#F7F9FC", // cool-grey-50
},
foreground: {
DEFAULT: "#C3CDDC", // cool-grey-300 — primary readable text
"50": "#05070A", // cool-grey-975
"100": "#0B0E14", // cool-grey-950
"200": "#21252F", // cool-grey-925
"300": "#2C313F", // cool-grey-900
"400": "#383F50", // cool-grey-800
"500": "#4B5468", // cool-grey-700
"600": "#626D82", // cool-grey-600
"700": "#7E8A9E", // cool-grey-500
"800": "#A3B0C4", // cool-grey-400
"900": "#C3CDDC", // cool-grey-300
},
// Surface layers: panel → card → inner card → inset
content1: { DEFAULT: "#21252F", foreground: "#EEF2F7" }, // cool-grey-925 / 100
content2: { DEFAULT: "#2C313F", foreground: "#DCE3EE" }, // cool-grey-900 / 200
content3: { DEFAULT: "#383F50", foreground: "#C3CDDC" }, // cool-grey-800 / 300
content4: { DEFAULT: "#4B5468", foreground: "#A3B0C4" }, // cool-grey-700 / 400
focus: {
DEFAULT: "#ffffff", // white focus ring — visible on all dark surfaces
},
default: {
"50": "#05070A", // cool-grey-975
"100": "#0B0E14", // cool-grey-950
"200": "#21252F", // cool-grey-925
"300": "#2C313F", // cool-grey-900
"400": "#383F50", // cool-grey-800
"500": "#4B5468", // cool-grey-700
"600": "#626D82", // cool-grey-600
"700": "#7E8A9E", // cool-grey-500
"800": "#A3B0C4", // cool-grey-400
"900": "#C3CDDC", // cool-grey-300
DEFAULT: "#383F50", // cool-grey-800 — hover/selected tint
foreground: "#F7F9FC", // cool-grey-50 — text on default bg
},
},
},
},
});
|