diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..c213efa --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "cSpell.words": ["Mantine"] +} diff --git a/README.md b/README.md index f1b2d3f..f6d5d99 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,6 @@ - +

+ +

Manthemes

A package that has made mantine themes.

diff --git a/package.json b/package.json index df4219d..05823da 100644 --- a/package.json +++ b/package.json @@ -7,8 +7,6 @@ "homepage": "https://github.com/Johnsiras/manthemes#readme", "scripts": { "build": "tsc --build", - "build:clean": "tsc --build --clean", - "build:watch": "tsc --build --watch", "copy": "yarn build && copy /Y package.json dist && copy /Y readme.md dist", "publish": "yarn publish ./dist --tag=latest", "publish:next": "yarn publish ./dist --tag=next" @@ -21,19 +19,16 @@ ], "repository": { "type": "git", - "url": "https://github.com/Johnsiras/manthemes.git" + "url": "https://github.com/manthemes-dev/manthemes.git" }, "bugs": { - "url": "https://github.com/Johnsiras/manthemes/issues" + "url": "https://github.com/manthemes-dev/manthemes/issues" }, "dependencies": { - "@mantine/core": "4.2.9", - "type-fest": "^2.13.1", - "update-notifier": "^6.0.2" + "@mantine/core": "5.2.3", + "type-fest": "^2.19.0" }, "devDependencies": { - "@types/update-notifier": "^6.0.1", - "np": "^7.6.1", "typescript": "^4.7.3" } } diff --git a/src/daisyui/aqua.ts b/src/daisyui/aqua.ts new file mode 100644 index 0000000..ce399f6 --- /dev/null +++ b/src/daisyui/aqua.ts @@ -0,0 +1,128 @@ +import { MantineThemeOverride } from "@mantine/core"; + +export const aqua: MantineThemeOverride = { + colorScheme: "dark", + white: "#c7dbff", + black: "#345da7", + + primaryColor: "neutral", + + colors: { + dark: [ + "#c7dbff", // Default fg + "#92ACDD", + "#83A1D8", + "#7395D3", + "#6489CE", + "#547DC9", + "#4572C4", + "#3B67BA", + "#365FAB", + "#31569B", + ], + + neutral: [ + "#C0DAEC", + "#B0D1E8", + "#A0C7E3", + "#91BEDE", + "#81B5D9", + "#72ABD5", + "#62A2D0", + "#5299CB", + "#4390C7", + "#3885BC", + ], + + cyan: [ + "#B0FAFC", + "#9DF8FB", + "#89F6FA", + "#76F5F9", + "#62F3F8", + "#50F1F7", + "#3CF0F6", + "#29EEF5", + "#15EDF4", + "#0BE2EA", + ], + + grape: [ + "#ECE4F1", + "#E2D7EA", + "#D8CAE3", + "#CEBCDC", + "#C4AFD5", + "#BAA1CE", + "#B094C7", + "#A687C0", + "#9C79B9", + "#936CB2", + ], + + yellow: [ + "#FFF2C2", + "#FFEDAD", + "#FFE999", + "#FFE485", + "#FFE070", + "#FFDC5C", + "#FFD747", + "#FFD333", + "#FFCE1F", + "#FFCA0A", + ], + + blue: [ + "#C7D7FA", + "#B4CAF8", + "#A1BCF7", + "#8FAFF5", + "#7CA2F3", + "#6A95F1", + "#5787EF", + "#447AEE", + "#326DEC", + "#1F5FEA", + ], + + green: [ + "#6FEB9D", + "#5DE991", + "#4BE784", + "#3AE478", + "#28E26C", + "#1DD762", + "#1BC559", + "#18B451", + "#16A249", + "#149041", + ], + + orange: [ + "#FBC688", + "#FBBC74", + "#FBB360", + "#FAA94C", + "#FA9F38", + "#F99624", + "#F98C10", + "#EF8206", + "#DB7706", + "#C76C05", + ], + + red: [ + "#F4B8B8", + "#F1A7A7", + "#EE9696", + "#EB8484", + "#E87373", + "#E56161", + "#E25050", + "#E03E3E", + "#DD2C2C", + "#D32222", + ], + }, +}; diff --git a/src/daisyui/bumblebee.ts b/src/daisyui/bumblebee.ts index 5c32ccf..168160f 100644 --- a/src/daisyui/bumblebee.ts +++ b/src/daisyui/bumblebee.ts @@ -1,15 +1,14 @@ -import { manthemes } from "../utils"; +import { MantineThemeOverride } from "@mantine/core"; -export const bumblebee = manthemes.create({ +export const bumblebee: MantineThemeOverride = { colorScheme: "light", - black: "#1f2937", + black: "#333333", white: "#ffffff", primaryColor: "neutral", - primaryShade: 8, colors: { - dark: [ + neutral: [ "#5454A0", "#4D4D93", "#464686", @@ -18,21 +17,8 @@ export const bumblebee = manthemes.create({ "#31315E", "#2A2A50", "#232343", - "#1C1C35", - "#151528", - ], - - neutral: [ - "#5C5CAD", - "#5252A3", - "#4B4B95", - "#444488", - "#3E3E7A", - "#37376D", - "#30305F", - "#292951", - "#222244", - "#181830", + "#1C1C36", + "#151529", ], orange: [ @@ -74,7 +60,7 @@ export const bumblebee = manthemes.create({ "#181830", ], - info: [ + cyan: [ "#D8F2FE", "#C4ECFD", "#B1E5FC", @@ -87,7 +73,7 @@ export const bumblebee = manthemes.create({ "#26B9F7", ], - success: [ + green: [ "#BCF1DD", "#ABEDD5", "#9BE9CC", @@ -100,7 +86,7 @@ export const bumblebee = manthemes.create({ "#2CC98F", ], - warning: [ + yellow1: [ "#FDEDC3", "#FDE7AF", "#FDE19B", @@ -113,7 +99,7 @@ export const bumblebee = manthemes.create({ "#FAB80F", ], - error: [ + red: [ "#FFFFFF", "#FEEBEB", "#FED8D8", @@ -126,4 +112,4 @@ export const bumblebee = manthemes.create({ "#F75050", ], }, -}); +}; diff --git a/src/daisyui/cupcake.ts b/src/daisyui/cupcake.ts index 5f8b7dc..aef0678 100644 --- a/src/daisyui/cupcake.ts +++ b/src/daisyui/cupcake.ts @@ -1,18 +1,17 @@ -import { manthemes } from "../utils"; +import type { MantineThemeOverride } from "@mantine/core"; -export const cupcake = manthemes.create({ +export const cupcake: MantineThemeOverride = { colorScheme: "light", white: "#faf7f5", black: "#291334", primaryColor: "neutral", - primaryShade: 8, colors: { neutral: [ "#8943B1", "#7E3EA3", - "#673285", + "#723894", "#673285", "#5B2D76", "#502768", @@ -23,6 +22,7 @@ export const cupcake = manthemes.create({ ], primary: [ + "#E1F3F4", "#D2EDEE", "#C3E7E9", "#B4E2E4", @@ -32,7 +32,6 @@ export const cupcake = manthemes.create({ "#78CACE", "#69C4C9", "#5ABEC4", - "#4BB8BE", ], secondary: [ @@ -113,4 +112,4 @@ export const cupcake = manthemes.create({ "#F75050", ], }, -}); +}; diff --git a/src/daisyui/dark.ts b/src/daisyui/dark.ts index c3840bc..3f82bd8 100644 --- a/src/daisyui/dark.ts +++ b/src/daisyui/dark.ts @@ -1,26 +1,25 @@ -import { manthemes } from "../utils"; +import { MantineThemeOverride } from "@mantine/core"; import { defaultDaisyuiColors } from "../utils/defaultColors"; -export const dark = manthemes.create({ +export const dark: MantineThemeOverride = { colorScheme: "dark", + white: "#A6ADBB", black: "#2A303C", - white: "#EBEBEB", primaryColor: "neutral", - primaryShade: 8, colors: { dark: [ - "#6C809D", - "#627693", - "#5A6C87", - "#52627A", - "#49586E", - "#414E62", - "#394456", - "#313A49", - "#29303D", + "#A6ADBB", // Default fg + "#4B566C", + "#434D60", + "#3B4454", + "#333A48", + "#2A303C", "#212630", + "#191D24", + "#111318", + "#08090C", ], neutral: [ @@ -77,6 +76,6 @@ export const dark = manthemes.create({ ...defaultDaisyuiColors, }, -}); +}; export default dark; diff --git a/src/daisyui/dracula.ts b/src/daisyui/dracula.ts index 7fab9a9..b849d28 100644 --- a/src/daisyui/dracula.ts +++ b/src/daisyui/dracula.ts @@ -1,16 +1,15 @@ -import { manthemes } from "../utils"; +import { MantineThemeOverride } from "@mantine/core"; -export const dracula = manthemes.create({ +export const dracula: MantineThemeOverride = { colorScheme: "dark", black: "#282a36", white: "#f8f8f2", primaryColor: "neutral", - primaryShade: 8, colors: { dark: [ - "#676B8E", + "#f8f8f2", // Default fg "#5E6282", "#565A76", "#4D516A", @@ -126,4 +125,4 @@ export const dracula = manthemes.create({ "#FF0A0A", ], }, -}); +}; diff --git a/src/daisyui/index.ts b/src/daisyui/index.ts index d358a94..e72f94a 100644 --- a/src/daisyui/index.ts +++ b/src/daisyui/index.ts @@ -5,3 +5,4 @@ export { dracula } from "./dracula"; export { light } from "./light"; export { synthwave } from "./synthwave"; export { retro } from "./retro"; +export { aqua } from "./aqua"; diff --git a/src/daisyui/light.ts b/src/daisyui/light.ts index 4f8ca7c..2fb8b8d 100644 --- a/src/daisyui/light.ts +++ b/src/daisyui/light.ts @@ -1,7 +1,7 @@ -import { manthemes } from "../utils"; +import { MantineThemeOverride } from "@mantine/core"; import { defaultDaisyuiColors } from "../utils/defaultColors"; -export const light = manthemes.create({ +export const light: MantineThemeOverride = { colorScheme: "light", white: "#ffffff", black: "#1f2937", @@ -77,4 +77,4 @@ export const light = manthemes.create({ ...defaultDaisyuiColors, }, -}); +}; diff --git a/src/daisyui/retro.ts b/src/daisyui/retro.ts index 853f938..dd2316a 100644 --- a/src/daisyui/retro.ts +++ b/src/daisyui/retro.ts @@ -1,12 +1,11 @@ -import { manthemes } from "../utils"; +import { MantineThemeOverride } from "@mantine/core"; -export const retro = manthemes.create({ +export const retro: MantineThemeOverride = { colorScheme: "light", white: "#e4d8b4", black: "#282425", primaryColor: "neutral", - primaryShade: 8, colors: { neutral: [ @@ -113,4 +112,4 @@ export const retro = manthemes.create({ "#D32222", ], }, -}); +}; diff --git a/src/daisyui/synthwave.ts b/src/daisyui/synthwave.ts index 60595ad..d94d334 100644 --- a/src/daisyui/synthwave.ts +++ b/src/daisyui/synthwave.ts @@ -1,16 +1,15 @@ -import { manthemes } from "../utils"; +import { MantineThemeOverride } from "@mantine/core"; -export const synthwave = manthemes.create({ +export const synthwave: MantineThemeOverride = { colorScheme: "dark", black: "#2d1b69", white: "#f9f7fd", primaryColor: "neutral", - primaryShade: 8, colors: { dark: [ - "#785CD6", + "#f9f7fd", // Default fg "#6B4BD2", "#5D3BCE", "#5331C4", @@ -126,4 +125,4 @@ export const synthwave = manthemes.create({ "#DF2A42", ], }, -}); +}; diff --git a/src/index.ts b/src/index.ts index ec19d7a..8ff81b1 100644 --- a/src/index.ts +++ b/src/index.ts @@ -3,11 +3,3 @@ export * as material from "./material"; export * as moonlight from "./moonlight"; export * as nightfox from "./nightfox"; - -// Notifier -import updateNotifier from "update-notifier"; -import pkg from "../package.json"; - -updateNotifier({ - pkg, -}).notify(); diff --git a/src/material/dark.ts b/src/material/dark.ts deleted file mode 100644 index e7b01b5..0000000 --- a/src/material/dark.ts +++ /dev/null @@ -1,103 +0,0 @@ -import { manthemes } from "../utils"; - -export const dark = manthemes.create({ - colorScheme: "dark", - black: "#121212", - white: "#fff", - - primaryColor: "blue", - primaryShade: 8, - - colors: { - dark: [ - "#fafafa", - "#f5f5f5", - "#eeeeee", - "#e0e0e0", - "#bdbdbd", - "#9e9e9e", - "#757575", - "#616161", - "#424242", - "#212121", - ], - - blue: [ - "#e3f2fd", - "#bbdefb", - "#90caf9", - "#64b5f6", - "#42a5f5", - "#2196f3", - "#1e88e5", - "#1976d2", - "#1565c0", - "#0d47a1", - ], - - grape: [ - "#f3e5f5", - "#e1bee7", - "#ce93d8", - "#ba68c8", - "#ab47bc", - "#9c27b0", - "#8e24aa", - "#7b1fa2", - "#6a1b9a", - "#4a148c", - ], - - red: [ - "#ffebee", - "#ffcdd2", - "#ef9a9a", - "#e57373", - "#ef5350", - "#f44336", - "#e53935", - "#d32f2f", - "#c62828", - "#b71c1c", - ], - - orange: [ - "#fff3e0", - "#ffe0b2", - "#ffcc80", - "#ffb74d", - "#ffa726", - "#ff9800", - "#fb8c00", - "#f57c00", - "#ef6c00", - "#e65100", - ], - - cyan: [ - "#e1f5fe", - "#b3e5fc", - "#81d4fa", - "#4fc3f7", - "#29b6f6", - "#03a9f4", - "#039be5", - "#0288d1", - "#0277bd", - "#01579b", - ], - - green: [ - "#e8f5e9", - "#c8e6c9", - "#a5d6a7", - "#81c784", - "#66bb6a", - "#4caf50", - "#43a047", - "#388e3c", - "#2e7d32", - "#1b5e20", - ], - }, -}); diff --git a/src/material/index.ts b/src/material/index.ts deleted file mode 100644 index ca18c4c..0000000 --- a/src/material/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { light } from "./light"; -export { dark } from "./dark"; diff --git a/src/material/light.ts b/src/material/light.ts deleted file mode 100644 index 7b5c9d7..0000000 --- a/src/material/light.ts +++ /dev/null @@ -1,102 +0,0 @@ -import { manthemes } from "../utils"; - -export const light = manthemes.create({ - colorScheme: "light", - black: "#212121", - white: "#fafafa", - - primaryColor: "blue", - - colors: { - dark: [ - "#fafafa", - "#f5f5f5", - "#eeeeee", - "#e0e0e0", - "#bdbdbd", - "#9e9e9e", - "#757575", - "#616161", - "#424242", - "#212121", - ], - - blue: [ - "#e3f2fd", - "#bbdefb", - "#90caf9", - "#64b5f6", - "#42a5f5", - "#2196f3", - "#1e88e5", - "#1976d2", - "#1565c0", - "#0d47a1", - ], - - grape: [ - "#f3e5f5", - "#e1bee7", - "#ce93d8", - "#ba68c8", - "#ab47bc", - "#9c27b0", - "#8e24aa", - "#7b1fa2", - "#6a1b9a", - "#4a148c", - ], - - red: [ - "#ffebee", - "#ffcdd2", - "#ef9a9a", - "#e57373", - "#ef5350", - "#f44336", - "#e53935", - "#d32f2f", - "#c62828", - "#b71c1c", - ], - - orange: [ - "#fff3e0", - "#ffe0b2", - "#ffcc80", - "#ffb74d", - "#ffa726", - "#ff9800", - "#fb8c00", - "#f57c00", - "#ef6c00", - "#e65100", - ], - - cyan: [ - "#e1f5fe", - "#b3e5fc", - "#81d4fa", - "#4fc3f7", - "#29b6f6", - "#03a9f4", - "#039be5", - "#0288d1", - "#0277bd", - "#01579b", - ], - - green: [ - "#e8f5e9", - "#c8e6c9", - "#a5d6a7", - "#81c784", - "#66bb6a", - "#4caf50", - "#43a047", - "#388e3c", - "#2e7d32", - "#1b5e20", - ], - }, -}); diff --git a/src/moonlight.ts b/src/moonlight.ts index 8030f30..06781a3 100644 --- a/src/moonlight.ts +++ b/src/moonlight.ts @@ -1,16 +1,15 @@ -import { manthemes } from "./utils"; +import { MantineThemeOverride } from "@mantine/core"; -export const moonlight = manthemes.create({ +export const moonlight: MantineThemeOverride = { colorScheme: "dark", white: "#e4f3fa", black: "#1B1E2B", primaryColor: "gray", - primaryShade: 8, colors: { dark: [ - "#7476AA", + "#e4f3fa", // Default fg "#4E507E", "#4E507E", "#4E507E", @@ -22,6 +21,8 @@ export const moonlight = manthemes.create({ "#212337", ], + neutral: [], + gray: [ "#D1D5F0", "#C2C8EB", @@ -114,4 +115,4 @@ export const moonlight = manthemes.create({ ], // TODO: Add more colors }, -}); +}; diff --git a/src/nightfox/nightfox.ts b/src/nightfox/nightfox.ts index af03427..c647e40 100644 --- a/src/nightfox/nightfox.ts +++ b/src/nightfox/nightfox.ts @@ -1,16 +1,15 @@ -import { manthemes } from "../utils"; +import { MantineThemeOverride } from "@mantine/core"; -export const nightfox = manthemes.create({ +export const nightfox: MantineThemeOverride = { colorScheme: "dark", black: "#131a24", white: "#cdcecf", - primaryShade: 8, - primaryColor: "yellow", + primaryColor: "red", colors: { dark: [ - "#5477A0", + "#cdcecf", // Default fg "#4D6D93", "#466386", "#3F5978", @@ -22,6 +21,8 @@ export const nightfox = manthemes.create({ "#151D28", ], + neutral: [], + red: [ "#F1D0D8", "#ECC1CC", @@ -60,6 +61,31 @@ export const nightfox = manthemes.create({ "#D9BC6D", "#D5B55D", ], - // WIP + + cyan: [ + "#EFF4FB", + "#DFE9F6", + "#CFDEF2", + "#C0D3ED", + "#B0C8E8", + "#A0BDE3", + "#90B2DF", + "#81A7DA", + "#719CD6", + "#6192D1", + ], + + purple: [ + "#DCD0F1", + "#D1C1EC", + "#C6B1E7", + "#BAA2E2", + "#AF92DD", + "#A382D9", + "#9873D4", + "#8C63CF", + "#8153CA", + "#7544C5", + ], }, -}); +}; diff --git a/src/utils/defaultColors.ts b/src/utils/defaultColors.ts index d0ad489..2578e4c 100644 --- a/src/utils/defaultColors.ts +++ b/src/utils/defaultColors.ts @@ -1,7 +1,8 @@ -import { Colors } from "./mantheme.types"; +import { MantineThemeColors } from "@mantine/core"; +import { PartialDeep } from "type-fest"; // Colors -export const defaultDaisyuiColors: Colors = { +export const defaultDaisyuiColors: PartialDeep = { blue: [ "#D8F2FE", "#C4ECFD", diff --git a/src/utils/error.ts b/src/utils/error.ts new file mode 100644 index 0000000..932d874 --- /dev/null +++ b/src/utils/error.ts @@ -0,0 +1,9 @@ +export class error { + static new(message?: string) { + throw new Error(message); + } + + static type(message?: string) { + throw new TypeError(message); + } +} diff --git a/src/utils/index.ts b/src/utils/index.ts index 6398a49..c7699f2 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -1,2 +1 @@ -export { default as ManTheme } from "./mantheme"; -export { manthemes } from "./mantheme"; +export * from "./manthemes"; diff --git a/src/utils/mantheme.ts b/src/utils/mantheme.ts deleted file mode 100644 index 0b51e5c..0000000 --- a/src/utils/mantheme.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { MantineColor, MantineThemeOverride } from "@mantine/core"; - -export default class Manthemes { - /** - * Create a new theme - * @param props - the props to create - */ - public create(props: MantineThemeOverride) { - if (Object.keys(props).length === 0) { - throw new Error("Props must be specified"); - } - - return Object.assign(this, props); - } - - /** - * Override an existing theme props or create a new one - * @param props - the props to override - * @param theme - The theme (optional) - */ - public override(props: MantineThemeOverride, theme?: any) { - return Object.assign(theme || this, props); - } - - /** - * Get a specified color and return the shades of it - * @param color - the color to specified - * @param theme - The theme (optional) - */ - public getColor(color: MantineColor, theme?: any) { - return ( - theme.colors[color] || (this as MantineThemeOverride).colors?.[color] - ); - } - - /** - * Get the colors of a theme - * @param theme - The theme to retrieve colors (This is optional) - */ - public getColors(theme?: any) { - return (theme || (this as MantineThemeOverride)).colors; - } -} - -export const manthemes = new Manthemes(); diff --git a/src/utils/mantheme.types.ts b/src/utils/mantheme.types.ts deleted file mode 100644 index 1af8da8..0000000 --- a/src/utils/mantheme.types.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { MantineThemeColors, MantineThemeOverride } from "@mantine/core"; -import { PartialDeep } from "type-fest"; - -export type ThemeTypes = "daisyui" | "material" | "bootstrap"; -export type Props = MantineThemeOverride; -export type Colors = PartialDeep; diff --git a/theme.format.js b/theme.format.js deleted file mode 100644 index f64887b..0000000 --- a/theme.format.js +++ /dev/null @@ -1,8 +0,0 @@ -// Import the `ManTheme` class from utils folder -import { ManTheme } from "the_path_of_utils_folder_here"; - -export const myTheme = new ManTheme().create({ - /* Options here */ -}); - -// ---------- and then re-export the theme to index.ts ----------- diff --git a/tsconfig.json b/tsconfig.json index 874b691..99543ac 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -9,9 +9,10 @@ "resolveJsonModule": true, "esModuleInterop": true, "declarationMap": true, - "strict": true, + "strict": false, "skipLibCheck": true, - "outDir": "dist" + "outDir": "dist", + "rootDir": "src" }, "include": ["src/**/*"], "exclude": ["node_modules", "dist"]