1
Fork 0
mirror of https://github.com/Steffo99/bluelib.git synced 2025-01-13 21:59:47 +00:00
bluelib/src/components/Bluelib.tsx
2021-08-17 17:45:29 +02:00

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}
/>
)
}