mirror of
https://github.com/ful1e5/Bibata_Cursor.git
synced 2025-05-24 20:14:29 -04:00
🌈 Custom colors in Bibata's svg
In previous version, svg's colors replaced by batch proccess.Thats also consume more memory. ColoredSvgGenerator class shrink down to simple function.
This commit is contained in:
parent
6ac32d13f3
commit
af55c59c34
3 changed files with 73 additions and 9 deletions
|
@ -1,5 +1,52 @@
|
||||||
const main = () => {
|
import { Colors } from "./types";
|
||||||
console.log("Bibata Core");
|
|
||||||
|
/**
|
||||||
|
* Default Key Colors for generating colored svg.
|
||||||
|
* base="#00FF00" (Green)
|
||||||
|
* outline="#0000FF" (Blue)
|
||||||
|
* watch.background="#FF0000" (Red)
|
||||||
|
* */
|
||||||
|
const defaultKeyColors: Colors = {
|
||||||
|
base: "#00FF00",
|
||||||
|
outline: "#0000FF",
|
||||||
|
watch: {
|
||||||
|
background: "#FF0000",
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
export { main };
|
/**
|
||||||
|
* Customize colors of svg code.
|
||||||
|
* @param {string} content SVG code.
|
||||||
|
* @param {Colors} colors Customize colors.
|
||||||
|
* @param {Colors} [keys] Colors Key, That was written SVG code.
|
||||||
|
* @returns {string} SVG code with colors.
|
||||||
|
*/
|
||||||
|
const colorSvg = (
|
||||||
|
content: string,
|
||||||
|
colors: Colors,
|
||||||
|
keys: Colors = defaultKeyColors
|
||||||
|
): string => {
|
||||||
|
content = content
|
||||||
|
.replace(new RegExp(keys.base, "ig"), colors.base)
|
||||||
|
.replace(new RegExp(keys.outline, "ig"), colors.outline);
|
||||||
|
|
||||||
|
try {
|
||||||
|
// === trying to replace `watch` color ===
|
||||||
|
|
||||||
|
if (!colors.watch?.background) {
|
||||||
|
throw new Error("");
|
||||||
|
}
|
||||||
|
const { background: b } = colors.watch;
|
||||||
|
content = content.replace(new RegExp(keys.watch!.background, "ig"), b); // Watch Background
|
||||||
|
} catch (error) {
|
||||||
|
// === on error => replace `watch` color as `base` ===
|
||||||
|
|
||||||
|
content = content.replace(
|
||||||
|
new RegExp(keys.watch!.background, "ig"),
|
||||||
|
colors.base
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return content;
|
||||||
|
};
|
||||||
|
|
||||||
|
export { colorSvg };
|
||||||
|
|
20
bitmapper/packages/core/src/types.ts
Normal file
20
bitmapper/packages/core/src/types.ts
Normal file
|
@ -0,0 +1,20 @@
|
||||||
|
/**
|
||||||
|
* Hex Colors in string Format.
|
||||||
|
*
|
||||||
|
* `Example: `"#FFFFFF"
|
||||||
|
*/
|
||||||
|
type HexColor = string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @Colors expect `base`, `outline` & `watch-background` colors in **HexColor** Format.
|
||||||
|
* @default background is `base` color.
|
||||||
|
*/
|
||||||
|
type Colors = {
|
||||||
|
base: HexColor;
|
||||||
|
outline: HexColor;
|
||||||
|
watch?: {
|
||||||
|
background: HexColor;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export { Colors };
|
|
@ -1,8 +1,5 @@
|
||||||
import { main } from "bibata-core";
|
const main = async () => {
|
||||||
|
console.log("Bibata Modern");
|
||||||
const hmm = async () => {
|
|
||||||
main();
|
|
||||||
console.log("Bibata modern");
|
|
||||||
};
|
};
|
||||||
|
|
||||||
hmm();
|
main();
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue