⬆ Update to the latest bluelib version

package.json

@@ -1,6 +1,6 @@
 {
     "name": "bluelib",
-    "version": "1.0.0",
+    "version": "1.1.0",
     "description": "React components for Bluelib",
     "main": "lib/index.js",
     "module": "es/index.js",
@@ -21,9 +21,10 @@
         "@matejmazur/react-katex": "^3.1.3",
         "@reach/router": "^1.3.4",
         "classnames": "^2.2.6",
+        "color": "^3.1.3",
         "katex": "^0.12.0",
         "prop-types": "^15.7.2",
-        "react": "^17.0.1",
+        "react": "16.x",
         "react-dom": "^17.0.1",
         "react-syntax-highlighter": "^15.4.3",
         "strip-indent": "^3.0.0"

src/bluelib

@@ -1 +1 @@
-Subproject commit 7faf276e30b9605a9735ec1543710c9fc470e5dc
+Subproject commit b91b9284dcc9825e804c67f55282042b1ed35496

src/components/Box/Readme.md

@@ -7,5 +7,11 @@ import Bluelib from "../Bluelib";
     <Box>
         Ciao!
     </Box>
+    <Box color={"#ff7d7d"}>
+        This is a red box.
+    </Box>
+    <Box color={"rgb(125, 125, 255)"}>
+        This is a blue box.
+    </Box>
 </Bluelib>
 ```

src/components/Box/index.js

@@ -1,11 +1,23 @@
 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}) {
+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()
+    }
+
     return (
-        <section className={useBluelibClassNames("panel panel-box", className)}>
+        <section className={useBluelibClassNames("panel panel-box", className)} style={style}>
             {children}
         </section>
     )

styleguide.config.js

@@ -1,3 +1,5 @@
+const path = require("path")
+
 module.exports = {
     webpackConfig: {
         module: {