✨ Implement the new coloring system

package-lock.json

@@ -1,13 +1,13 @@
 {
     "name": "bluelib",
-    "version": "1.0.0",
+    "version": "1.1.1",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
         "": {
             "name": "bluelib",
-            "version": "1.0.0",
-            "license": "MIT",
+            "version": "1.1.1",
+            "license": "AGPL-3.0-or-later",
             "dependencies": {
                 "@babel/preset-env": "^7.12.11",
                 "@babel/preset-react": "^7.12.10",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "bluelib",
-    "version": "1.1.1",
+    "version": "2.0.0",
     "description": "React components for Bluelib",
     "readme": "README.md",
     "main": "lib/index.js",

src/components/Align/index.js

@@ -3,9 +3,9 @@ import PropTypes from "prop-types";
 import useBluelibClassNames from "../../hooks/useBluelibClassNames";
 
 
-export default function Align({children, className, value}) {
+export default function Align({children, className, value, ...props}) {
     return (
-        <div className={useBluelibClassNames(`align-${value}`, className)}>
+        <div className={useBluelibClassNames(`align-${value}`, className)} {...props}>
             {children}
         </div>
     )

src/components/Anchor/index.js

@@ -3,9 +3,9 @@ import useBluelibClassNames from "../../hooks/useBluelibClassNames";
 import PropTypes from "prop-types";
 
 
-export default function Anchor({children, className, href}) {
+export default function Anchor({children, className, href, ...props}) {
     return (
-        <a className={useBluelibClassNames(`element-anchor`, className)} href={href}>
+        <a className={useBluelibClassNames(`element-anchor`, className)} href={href} {...props}>
             {children}
         </a>
     )

src/components/Aside/index.js

@@ -3,9 +3,9 @@ import useBluelibClassNames from "../../hooks/useBluelibClassNames";
 import PropTypes from "prop-types";
 
 
-export default function Aside({children, className}) {
+export default function Aside({children, className, ...props}) {
     return (
-        <aside className={useBluelibClassNames("panel panel-box panel-aside", className)}>
+        <aside className={useBluelibClassNames("panel panel-box panel-aside", className)} {...props}>
             {children}
         </aside>
     )

src/components/BaseLink/index.js

@@ -4,13 +4,13 @@ import PropTypes from "prop-types";
 import { Link, useMatch } from "@reach/router"
 
 
-export default function BaseLink({children, className, href, disabled}) {
+export default function BaseLink({children, className, href, disabled, ...props}) {
     const locationMatch = useMatch(href);
 
     const activeClassNames = useBluelibClassNames("style-bold", className);
     if(locationMatch) {
         return (
-            <span className={activeClassNames}>
+            <span className={activeClassNames} {...props}>
                 {children}
             </span>
         )
@@ -19,7 +19,7 @@ export default function BaseLink({children, className, href, disabled}) {
     const disabledClassNames = useBluelibClassNames("element-anchor status-disabled", className);
     if(disabled) {
         return (
-            <span className={disabledClassNames}>
+            <span className={disabledClassNames} {...props}>
                 {children}
             </span>
         )
@@ -27,7 +27,7 @@ export default function BaseLink({children, className, href, disabled}) {
 
     const enabledClassNames = useBluelibClassNames("element-anchor", className)
     return (
-        <Link to={href} className={enabledClassNames}>
+        <Link to={href} className={enabledClassNames} {...props}>
             {children}
         </Link>
     )

src/components/Blockquote/index.js

@@ -3,9 +3,9 @@ import useBluelibClassNames from "../../hooks/useBluelibClassNames";
 import PropTypes from "prop-types";
 
 
-export default function Blockquote({children, className}) {
+export default function Blockquote({children, className, ...props}) {
     return (
-        <blockquote className={useBluelibClassNames("panel panel-box panel-blockquote", className)}>
+        <blockquote className={useBluelibClassNames("panel panel-box panel-blockquote", className)} {...props}>
             {children}
         </blockquote>
     )

src/components/Bold/index.js

@@ -3,9 +3,9 @@ import useBluelibClassNames from "../../hooks/useBluelibClassNames";
 import PropTypes from "prop-types";
 
 
-export default function Bold({children, className}) {
+export default function Bold({children, className, ...props}) {
     return (
-        <b className={useBluelibClassNames("style-bold", className)}>
+        <b className={useBluelibClassNames("style-bold", className)} {...props}>
             {children}
         </b>
     )

src/components/Box/index.js

@@ -1,23 +1,11 @@
 import React from "react";
 import useBluelibClassNames from "../../hooks/useBluelibClassNames";
 import PropTypes from "prop-types";
-import Color from "color";
-import {isString} from "../../utils"
 
 
-export default function Box({children, className, color}) {
-    let style = {}
-    if(color !== undefined) {
-        if(isString(color)) {
-            color = new Color(color)
-        }
-        style["--bluelib-color-r"] = color.red()
-        style["--bluelib-color-g"] = color.green()
-        style["--bluelib-color-b"] = color.blue()
-    }
-
+export default function Box({children, className, ...props}) {
     return (
-        <section className={useBluelibClassNames("panel panel-box", className)} style={style}>
+        <section className={useBluelibClassNames("panel panel-box", className)} {...props}>
             {children}
         </section>
     )

src/components/Code/index.js

@@ -5,7 +5,7 @@ import ContextCodeSkin from "../../contexts/ContextCodeSkin";
 import stripIndent from "strip-indent";
 
 
-export default function Code({children, style, language, skin}) {
+export default function Code({children, style, language, skin, ...props}) {
     let ctxLanguage = useContext(ContextCodeLanguage);
     let ctxSkin = useContext(ContextCodeSkin);
 
@@ -14,6 +14,7 @@ export default function Code({children, style, language, skin}) {
             language={language ?? ctxLanguage}
             style={skin ?? ctxSkin}
             customStyle={style}
+            {...props}
         >
             {stripIndent(children).trim()}
         </SyntaxHighlighter>

src/components/Color/Readme.md

@@ -1,52 +1,43 @@
-Change the **color** of the contained text to one of the seven presets.
+Change the **bluelib color** of the contained elements.
 
-The color is chosen through the `value` prop. The options are:
-- `red`
-- `orange`
-- `yellow`
-- `lime`
-- `cyan`
-- `blue`
-- `magenta`
+The color can chosen through either the `builtin` prop or the `custom` prop. 
 
+By using the `builtin` prop, the color will automatically adapt itself to the theme. Possible builtin colors are:
+- `"red"`
+- `"orange"`
+- `"yellow"`
+- `"lime"`
+- `"cyan"`
+- `"blue"`
+- `"magenta"`
+- `"gray"`
+
+By using the `custom` prop, the color will be the same for all themes, but you will be able to specify any color.
 
 ```jsx
 import Bluelib from "../Bluelib";
+import Box from "../Box";
 
 <Bluelib>
     <div>
-        <Color value={"red"}>
-            Red
+        <Color builtin={"red"}>
+            <span>
+                Red
+            </span>
         </Color>
     </div>
     <div>
-        <Color value={"orange"}>
-            Orange
+        <Color builtin={"orange"}>
+            <Box>
+                Orange
+            </Box>
         </Color>
     </div>
     <div>
-        <Color value={"yellow"}>
-            Yellow
-        </Color>
-    </div>
-    <div>
-        <Color value={"lime"}>
-            Lime
-        </Color>
-    </div>
-    <div>
-        <Color value={"cyan"}>
-            Cyan
-        </Color>
-    </div>
-    <div>
-        <Color value={"blue"}>
-            Blue
-        </Color>
-    </div>
-    <div>
-        <Color value={"magenta"}>
-            Magenta
+        <Color custom={"#ffff00"}>
+            <Box>
+                Custom yellow
+            </Box>
         </Color>
     </div>
 </Bluelib>

src/components/Color/index.js

@@ -1,19 +1,51 @@
-import React from "react";
+import React, {Fragment} from "react"
 import useBluelibClassNames from "../../hooks/useBluelibClassNames";
 import PropTypes from "prop-types";
+import classNames from "classnames"
+import color from "color"
 
 
-export default function Color({children, className, value}) {
+export default function Color({children, builtin, custom}) {
+    if(builtin && custom) {
+        throw new Error("<Color> tags may only have one prop between `builtin` and `custom`.")
+    }
+
+    let extraClassName = "";
+    let extraStyle = {};
+
+    if(builtin !== undefined) {
+        extraClassName = useBluelibClassNames(`color-${builtin}`)
+
+    }
+    if(custom !== undefined) {
+        let c = color(custom);
+        extraStyle["--bluelib-color-r"] = c.red()
+        extraStyle["--bluelib-color-g"] = c.green()
+        extraStyle["--bluelib-color-b"] = c.blue()
+    }
+
+    console.log(`Builtin: ${builtin} → ${extraClassName}\nCustom: ${custom} → ${JSON.stringify(extraStyle)}`)
+
+    children = React.Children.map(children, child => {
+        if(!child.props) {
+            return child;
+        }
+        return React.cloneElement(child, {
+            className: classNames(child.props.className, extraClassName),
+            style: {...child.props.style, ...extraStyle},
+        })
+    })
+
     return (
-        <span className={useBluelibClassNames(`color-${value}`, className)}>
+        <Fragment>
             {children}
-        </span>
+        </Fragment>
     )
 }
 
 
 Color.propTypes = {
     children: PropTypes.node,
-    className: PropTypes.string,
-    value: PropTypes.oneOf(["red", "orange", "yellow", "lime", "cyan", "blue", "magenta", "gray"]),
+    builtin: PropTypes.oneOf(["red", "orange", "yellow", "lime", "cyan", "blue", "magenta", "gray"]),
+    custom: PropTypes.string,
 }

src/components/Help/index.js

@@ -3,9 +3,9 @@ import useBluelibClassNames from "../../hooks/useBluelibClassNames";
 import PropTypes from "prop-types";
 
 
-export default function Help({children, className, text}) {
+export default function Help({children, className, text, ...props}) {
     return (
-        <abbr className={useBluelibClassNames("status-hoverable", className)} title={text}>
+        <abbr className={useBluelibClassNames("status-hoverable", className)} title={text} {...props}>
             {children}
         </abbr>
     )

src/components/Italic/index.js

@@ -3,9 +3,9 @@ import useBluelibClassNames from "../../hooks/useBluelibClassNames";
 import PropTypes from "prop-types";
 
 
-export default function Italic({children, className}) {
+export default function Italic({children, className, ...props}) {
     return (
-        <i className={useBluelibClassNames("style-italic", className)}>
+        <i className={useBluelibClassNames("style-italic", className)} {...props}>
             {children}
         </i>
     )

src/components/LatexMath/index.js

@@ -4,9 +4,9 @@ import TeX from '@matejmazur/react-katex';
 import PropTypes from "prop-types";
 
 
-export default function LatexMath({children, block}) {
+export default function LatexMath({children, block, ...props}) {
     return (
-        <TeX math={children} block={block}/>
+        <TeX math={children} block={block} {...props}/>
     )
 }
 

src/components/ListItem/index.js

@@ -3,9 +3,9 @@ import useBluelibClassNames from "../../hooks/useBluelibClassNames";
 import PropTypes from "prop-types";
 
 
-export default function ListItem({children, className}) {
+export default function ListItem({children, className, ...props}) {
     return (
-        <li className={useBluelibClassNames("element-list-item", className)}>
+        <li className={useBluelibClassNames("element-list-item", className)} {...props}>
             {children}
         </li>
     )

src/components/Main/index.js

@@ -3,9 +3,9 @@ import useBluelibClassNames from "../../hooks/useBluelibClassNames";
 import PropTypes from "prop-types";
 
 
-export default function Main({children, className}) {
+export default function Main({children, className, ...props}) {
     return (
-        <main className={useBluelibClassNames("container-main", className)}>
+        <main className={useBluelibClassNames("container-main", className)} {...props}>
             {children}
         </main>
     )

src/components/Paragraph/index.js

@@ -3,9 +3,9 @@ import useBluelibClassNames from "../../hooks/useBluelibClassNames";
 import PropTypes from "prop-types";
 
 
-export default function Paragraph({children, className}) {
+export default function Paragraph({children, className, ...props}) {
     return (
-        <p className={useBluelibClassNames("element-paragraph", className)}>
+        <p className={useBluelibClassNames("element-paragraph", className)} {...props}>
             {children}
         </p>
     )

src/components/Separator/index.js

@@ -3,9 +3,9 @@ import useBluelibClassNames from "../../hooks/useBluelibClassNames";
 import PropTypes from "prop-types";
 
 
-export default function Separator({className}) {
+export default function Separator({className, ...props}) {
     return (
-        <hr className={useBluelibClassNames("element-separator", className)}/>
+        <hr className={useBluelibClassNames("element-separator", className)} {...props}/>
     )
 }
 

src/components/Size/index.js

@@ -3,9 +3,9 @@ import useBluelibClassNames from "../../hooks/useBluelibClassNames";
 import PropTypes from "prop-types";
 
 
-export default function Size({children, className, value}) {
+export default function Size({children, className, value, ...props}) {
     return (
-        <span className={useBluelibClassNames(`size-${value}`, className)}>
+        <span className={useBluelibClassNames(`size-${value}`, className)} {...props}>
             {children}
         </span>
     )

src/components/Split/index.js

@@ -3,9 +3,9 @@ import useBluelibClassNames from "../../hooks/useBluelibClassNames";
 import PropTypes from "prop-types";
 
 
-export default function Split({children, className}) {
+export default function Split({children, className, ...props}) {
     return (
-        <div className={useBluelibClassNames("panel panel-split", className)}>
+        <div className={useBluelibClassNames("panel panel-split", className)} {...props}>
             {children}
         </div>
     )

src/components/Spoiler/index.js

@@ -3,9 +3,9 @@ import useBluelibClassNames from "../../hooks/useBluelibClassNames";
 import PropTypes from "prop-types";
 
 
-export default function Spoiler({children, className}) {
+export default function Spoiler({children, className, ...props}) {
     return (
-        <div className={useBluelibClassNames("spoiler", className)}>
+        <div className={useBluelibClassNames("spoiler", className)} {...props}>
             {children}
         </div>
     )

src/components/Strike/index.js

@@ -3,9 +3,9 @@ import useBluelibClassNames from "../../hooks/useBluelibClassNames";
 import PropTypes from "prop-types";
 
 
-export default function Strike({children, className}) {
+export default function Strike({children, className, ...props}) {
     return (
-        <span className={useBluelibClassNames("style-strike", className)}>
+        <span className={useBluelibClassNames("style-strike", className)} {...props}>
             {children}
         </span>
     )

src/components/Title/index.js

@@ -3,9 +3,9 @@ import useBluelibClassNames from "../../hooks/useBluelibClassNames";
 import PropTypes from "prop-types";
 
 
-export default function Title({children, className, size}) {
+export default function Title({children, className, size, ...props}) {
     return (
-        <div className={useBluelibClassNames(`element-title size-${size}`, className)}>
+        <div className={useBluelibClassNames(`element-title size-${size}`, className)} {...props}>
             {children}
         </div>
     )

src/components/Underline/index.js

@@ -3,9 +3,9 @@ import useBluelibClassNames from "../../hooks/useBluelibClassNames";
 import PropTypes from "prop-types";
 
 
-export default function Underline({children, className}) {
+export default function Underline({children, className, ...props}) {
     return (
-        <u className={useBluelibClassNames("style-underline", className)}>
+        <u className={useBluelibClassNames("style-underline", className)} {...props}>
             {children}
         </u>
     )

src/components/VisualLog/index.js

@@ -20,8 +20,10 @@ const EMOJIS = {
 
 export default function VisualLog({children, level}) {
     return (
-        <Color value={COLORS[level]}>
-            {EMOJIS[level]} {children}
+        <Color builtin={COLORS[level]}>
+            <span>
+                {EMOJIS[level]} {children}
+            </span>
         </Color>
     )
 }