131 lines
3.1 KiB
TypeScript
131 lines
3.1 KiB
TypeScript
import * as Colors from "@tamagui/colors";
|
|
import { createThemes, defaultComponentThemes } from "@tamagui/theme-builder";
|
|
|
|
const primaryPalette = [
|
|
"hsl(174, 66%, 97%)",
|
|
"hsl(174, 66%, 93%)",
|
|
"hsl(174, 66%, 87%)",
|
|
"hsl(174, 66%, 78%)",
|
|
"hsl(174, 66%, 68%)",
|
|
"hsl(174, 66%, 60%)",
|
|
"hsl(174, 66%, 53%)",
|
|
"hsl(174, 66%, 48%)",
|
|
"hsl(174, 66%, 40%)",
|
|
"hsl(174, 66%, 33%)",
|
|
"hsl(174, 66%, 21%)",
|
|
"hsl(174, 66%, 12%)",
|
|
];
|
|
|
|
const lightPalette = [
|
|
"hsl(174, 6.6%, 98%)",
|
|
"hsl(174, 6.6%, 96%)",
|
|
"hsl(174, 6.6%, 90%)",
|
|
"hsl(174, 6.6%, 84%)",
|
|
"hsl(174, 6.6%, 65%)",
|
|
"hsl(174, 6.6%, 46%)",
|
|
"hsl(174, 6.6%, 34%)",
|
|
"hsl(174, 6.6%, 26%)",
|
|
"hsl(174, 6.6%, 16%)",
|
|
"hsl(174, 6.6%, 10%)",
|
|
"hsl(174, 6.6%, 8%)",
|
|
"hsl(174, 6.6%, 4%)",
|
|
];
|
|
|
|
const darkPalette = [...lightPalette].reverse();
|
|
|
|
const lightShadows = {
|
|
shadow1: "rgba(0,0,0,0.04)",
|
|
shadow2: "rgba(0,0,0,0.08)",
|
|
shadow3: "rgba(0,0,0,0.16)",
|
|
shadow4: "rgba(0,0,0,0.24)",
|
|
shadow5: "rgba(0,0,0,0.32)",
|
|
shadow6: "rgba(0,0,0,0.4)",
|
|
};
|
|
|
|
const darkShadows = {
|
|
shadow1: "rgba(0,0,0,0.2)",
|
|
shadow2: "rgba(0,0,0,0.3)",
|
|
shadow3: "rgba(0,0,0,0.4)",
|
|
shadow4: "rgba(0,0,0,0.5)",
|
|
shadow5: "rgba(0,0,0,0.6)",
|
|
shadow6: "rgba(0,0,0,0.7)",
|
|
};
|
|
|
|
const builtThemes = createThemes({
|
|
accent: {
|
|
palette: {
|
|
dark: [...primaryPalette].reverse(),
|
|
light: [...primaryPalette].reverse(),
|
|
},
|
|
},
|
|
base: {
|
|
extra: {
|
|
dark: {
|
|
...Colors.greenDark,
|
|
...Colors.redDark,
|
|
...Colors.yellowDark,
|
|
...Colors.grayDark,
|
|
...darkShadows,
|
|
shadowColor: darkShadows.shadow1,
|
|
},
|
|
light: {
|
|
...Colors.green,
|
|
...Colors.red,
|
|
...Colors.yellow,
|
|
...Colors.gray,
|
|
...lightShadows,
|
|
shadowColor: lightShadows.shadow1,
|
|
},
|
|
},
|
|
palette: {
|
|
dark: darkPalette,
|
|
light: lightPalette,
|
|
},
|
|
},
|
|
childrenThemes: {
|
|
error: {
|
|
palette: {
|
|
dark: Object.values(Colors.redDark),
|
|
light: Object.values(Colors.red),
|
|
},
|
|
},
|
|
gray: {
|
|
palette: {
|
|
dark: darkPalette,
|
|
light: lightPalette,
|
|
},
|
|
},
|
|
primary: {
|
|
palette: {
|
|
dark: [...primaryPalette].reverse(),
|
|
light: [...primaryPalette].reverse(),
|
|
},
|
|
},
|
|
success: {
|
|
palette: {
|
|
dark: Object.values(Colors.greenDark),
|
|
light: Object.values(Colors.green),
|
|
},
|
|
},
|
|
warning: {
|
|
palette: {
|
|
dark: Object.values(Colors.yellowDark),
|
|
light: Object.values(Colors.yellow),
|
|
},
|
|
},
|
|
},
|
|
componentThemes: defaultComponentThemes,
|
|
});
|
|
|
|
export type Themes = typeof builtThemes;
|
|
|
|
// the process.env conditional here is optional but saves web client-side bundle
|
|
// size by leaving out themes JS. tamagui automatically hydrates themes from CSS
|
|
// back into JS for you, and the bundler plugins set TAMAGUI_ENVIRONMENT. so
|
|
// long as you are using the Vite, Next, Webpack plugins this should just work,
|
|
// but if not you can just export builtThemes directly as themes:
|
|
export const themes: Themes =
|
|
process.env.TAMAGUI_ENVIRONMENT === "client" && process.env.NODE_ENV === "production"
|
|
? ({} as any)
|
|
: (builtThemes as any);
|