From a85421b2f882cb35831d053eba911c281f3efb7f Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Tue, 23 Mar 2021 17:37:07 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20Color=20breaking=20outside?=
 =?UTF-8?q?=20the=20styleguide?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                  | 2 +-
 src/components/Color/index.js | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index ac7abd4..1662e62 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "bluelib",
-    "version": "2.1.0",
+    "version": "2.1.1",
     "description": "React components for Bluelib",
     "readme": "README.md",
     "main": "lib/index.js",
diff --git a/src/components/Color/index.js b/src/components/Color/index.js
index e3bda76..e2f1162 100644
--- a/src/components/Color/index.js
+++ b/src/components/Color/index.js
@@ -6,6 +6,8 @@ import color from "color"
 
 
 export default function Color({children, builtin, custom}) {
+    const potentialClassName = useBluelibClassNames(`color-${builtin}`)
+
     if(builtin && custom) {
         throw new Error("<Color> tags may only have one prop between `builtin` and `custom`.")
     }
@@ -14,7 +16,7 @@ export default function Color({children, builtin, custom}) {
     let extraStyle = {};
 
     if(builtin !== undefined) {
-        extraClassName = useBluelibClassNames(`color-${builtin}`)
+        extraClassName = potentialClassName
 
     }
     if(custom !== undefined) {