mirror of
https://github.com/Steffo99/bluelib.git
synced 2025-01-13 21:59:47 +00:00
93 lines
3.4 KiB
TypeScript
93 lines
3.4 KiB
TypeScript
import * as React from "react"
|
|
import * as ReactDOM from "react-dom"
|
|
import * as Types from "../types"
|
|
import * as Colors from "../utils/Colors"
|
|
import Color from "color"
|
|
import mergeClassNames from "classnames"
|
|
import {BaseElement} from "./BaseElement"
|
|
import PaperTheme from "../bluelib/src/targets/paper.module.css"
|
|
import RoyalBlueTheme from "../bluelib/src/targets/royalblue.module.css"
|
|
import HackerTheme from "../bluelib/src/targets/hacker.module.css"
|
|
import SophonTheme from "../bluelib/src/targets/sophon.module.css"
|
|
|
|
|
|
const BuiltinThemes = {
|
|
"paper": PaperTheme,
|
|
"royalblue": RoyalBlueTheme,
|
|
"hacker": HackerTheme,
|
|
"sophon": SophonTheme,
|
|
}
|
|
|
|
|
|
export interface BluelibProps {
|
|
theme: "paper" | "royalblue" | "hacker" | "sophon",
|
|
|
|
backgroundColor?: typeof Color,
|
|
foregroundColor?: typeof Color,
|
|
accentColor?: typeof Color,
|
|
linkColor?: typeof Color,
|
|
brokenColor?: typeof Color,
|
|
visitedColor?: typeof Color,
|
|
downloadColor?: typeof Color,
|
|
redColor?: typeof Color,
|
|
orangeColor?: typeof Color,
|
|
yellowColor?: typeof Color,
|
|
limeColor?: typeof Color,
|
|
cyanColor?: typeof Color,
|
|
blueColor?: typeof Color,
|
|
magentaColor?: typeof Color,
|
|
grayColor?: typeof Color,
|
|
polarity?: number,
|
|
|
|
[props: string]: any,
|
|
}
|
|
|
|
|
|
export function Bluelib({
|
|
theme,
|
|
backgroundColor,
|
|
foregroundColor,
|
|
accentColor,
|
|
linkColor,
|
|
brokenColor,
|
|
visitedColor,
|
|
downloadColor,
|
|
redColor,
|
|
orangeColor,
|
|
yellowColor,
|
|
limeColor,
|
|
cyanColor,
|
|
blueColor,
|
|
magentaColor,
|
|
grayColor,
|
|
polarity,
|
|
...props
|
|
}: BluelibProps): JSX.Element {
|
|
|
|
props.className = mergeClassNames(props.className, BuiltinThemes[theme]["bluelib"])
|
|
|
|
if(backgroundColor) props.style = {...props.style, ...Colors.colorToBluelibStyle("background", backgroundColor)}
|
|
if(foregroundColor) props.style = {...props.style, ...Colors.colorToBluelibStyle("foreground", foregroundColor)}
|
|
if(accentColor) props.style = {...props.style, ...Colors.colorToBluelibStyle("accent", accentColor)}
|
|
if(linkColor) props.style = {...props.style, ...Colors.colorToBluelibStyle("link", linkColor)}
|
|
if(brokenColor) props.style = {...props.style, ...Colors.colorToBluelibStyle("broken", brokenColor)}
|
|
if(visitedColor) props.style = {...props.style, ...Colors.colorToBluelibStyle("visited", visitedColor)}
|
|
if(downloadColor) props.style = {...props.style, ...Colors.colorToBluelibStyle("download", downloadColor)}
|
|
if(redColor) props.style = {...props.style, ...Colors.colorToBluelibStyle("red", redColor)}
|
|
if(orangeColor) props.style = {...props.style, ...Colors.colorToBluelibStyle("orange", orangeColor)}
|
|
if(yellowColor) props.style = {...props.style, ...Colors.colorToBluelibStyle("yellow", yellowColor)}
|
|
if(limeColor) props.style = {...props.style, ...Colors.colorToBluelibStyle("lime", limeColor)}
|
|
if(cyanColor) props.style = {...props.style, ...Colors.colorToBluelibStyle("cyan", cyanColor)}
|
|
if(blueColor) props.style = {...props.style, ...Colors.colorToBluelibStyle("blue", blueColor)}
|
|
if(magentaColor) props.style = {...props.style, ...Colors.colorToBluelibStyle("magenta", magentaColor)}
|
|
if(grayColor) props.style = {...props.style, ...Colors.colorToBluelibStyle("gray", grayColor)}
|
|
if(polarity) props.style["--bluelib-polarity"] = polarity
|
|
|
|
return (
|
|
<BaseElement
|
|
kind={"div"}
|
|
bluelibClassNames={"bluelib"}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|