113 lines
2.5 KiB
TypeScript

import type {ConfigColors, Config, ConfigLayout} from "./types";
import {colors} from "@heroui/theme";
// Colors
export const defaultDarkColorWeight = 20;
export const defaultLightColorWeight = 17.5;
export const colorWeight = 17.5;
// Regex
export const floatNumberPattern = /^\d+(\.\d*)?$/;
// Elements ids
export const colorsId = "th-colors";
export const defaultColorsId = "th-default-colors";
export const baseColorsId = "th-base-colors";
export const otherColorsId = "th-other-colors";
export const showcaseId = "th-showcase";
export const contentShowcaseId = "th-content-showcase";
export const contentColorsId = "th-content-colors";
// Local storage
export const configKey = "config";
export const syncThemesKey = "sync-themes";
// Theme configuration
export const initialLightTheme: ConfigColors = {
defaultColor: {
default: "#d4d4d8",
},
baseColor: {
primary: colors.blue[500],
secondary: colors.purple[500],
success: colors.green[500],
warning: colors.yellow[500],
danger: colors.red[500],
},
layoutColor: {
foreground: colors.black,
background: colors.white,
focus: colors.blue[500],
overlay: colors.white,
},
contentColor: {
content1: colors.white,
content2: colors.zinc[100],
content3: colors.zinc[200],
content4: colors.zinc[300],
},
};
export const initialDarkTheme: ConfigColors = {
defaultColor: {
default: colors.zinc[700],
},
baseColor: {
primary: colors.blue[500],
secondary: colors.purple[500],
success: colors.green[500],
warning: colors.yellow[500],
danger: colors.red[500],
},
layoutColor: {
foreground: colors.white,
background: colors.black,
focus: colors.blue[500],
overlay: colors.black,
},
contentColor: {
content1: colors.zinc[900],
content2: colors.zinc[800],
content3: colors.zinc[700],
content4: colors.zinc[600],
},
};
export const initialLayout: ConfigLayout = {
fontSize: {
tiny: "0.75",
small: "0.875",
medium: "1",
large: "1.125",
},
lineHeight: {
tiny: "1",
small: "1.25",
medium: "1.5",
large: "1.75",
},
radius: {
small: "0.5",
medium: "0.75",
large: "0.875",
},
borderWidth: {
small: "1",
medium: "2",
large: "3",
},
otherParams: {
disabledOpacity: "0.5",
dividerWeight: "1",
hoverOpacity: "0.9",
},
};
export const initialConfig: Config = {
name: "heroui",
light: initialLightTheme,
dark: initialDarkTheme,
layout: initialLayout,
};