From 7524d4c31d3626ead94236e4fea262a3632a749a Mon Sep 17 00:00:00 2001
From: Lowie Benoot <lowie@teamleader.eu>
Date: Tue, 3 Jan 2023 16:04:45 +0100
Subject: [PATCH 01/23] =?UTF-8?q?=F0=9F=94=A5=20remove=20the=20index.css?=
 =?UTF-8?q?=20file,=20as=20it=20will=20be=20generated=20now?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.css | 46 ----------------------------------------------
 1 file changed, 46 deletions(-)
 delete mode 100644 index.css

diff --git a/index.css b/index.css
deleted file mode 100644
index aeda4ec..0000000
--- a/index.css
+++ /dev/null
@@ -1,46 +0,0 @@
-:root {
-  --color-black: #000000;
-  --color-white: #ffffff;
-
-  --color-teal-lightest: #f0f5fc;
-  --color-teal-light: #c1cede;
-  --color-teal: #64788f;
-  --color-teal-dark: #2a3b4d;
-  --color-teal-darkest: #1a1c20;
-
-  --color-mint-lightest: #f0fafa;
-  --color-mint-light: #57d3d2;
-  --color-mint: #00b2b2;
-  --color-mint-dark: #008a8c;
-  --color-mint-darkest: #004b4d;
-
-  --color-violet-lightest: #f7f7ff;
-  --color-violet-light: #d3d1fe;
-  --color-violet: #928cff;
-  --color-violet-dark: #6961ff;
-  --color-violet-darkest: #130abf;
-
-  --color-ruby-lightest: #fff0ec;
-  --color-ruby-light: #ffbca6;
-  --color-ruby: #ff7040;
-  --color-ruby-dark: #e84b17;
-  --color-ruby-darkest: #992600;
-
-  --color-gold-lightest: #fff6e5;
-  --color-gold-light: #ffda8f;
-  --color-gold: #ffcc66;
-  --color-gold-dark: #ed9e00;
-  --color-gold-darkest: #8f3c00;
-
-  --color-aqua-lightest: #f2f8ff;
-  --color-aqua-light: #cce4ff;
-  --color-aqua: #99c9ff;
-  --color-aqua-dark: #0071f2;
-  --color-aqua-darkest: #004da6;
-
-  --color-neutral-lightest: #ffffff;
-  --color-neutral-light: #f7f7fa;
-  --color-neutral: #e4e4e6;
-  --color-neutral-dark: #c0c0c4;
-  --color-neutral-darkest: #82828c;
-}

From 0dfbbd9b2ac298539c8e6366c4689ac09d4f8ffa Mon Sep 17 00:00:00 2001
From: Lowie Benoot <lowie@teamleader.eu>
Date: Thu, 5 Jan 2023 09:57:35 +0100
Subject: [PATCH 02/23] =?UTF-8?q?=E2=9E=95=20install=20lodash.without?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 39ad0b4..4e6bef3 100644
--- a/package.json
+++ b/package.json
@@ -18,5 +18,8 @@
   "bugs": {
     "url": "https://github.com/teamleadercrm/ui-colors/issues"
   },
-  "homepage": "https://github.com/teamleadercrm/ui-colors#readme"
+  "homepage": "https://github.com/teamleadercrm/ui-colors#readme",
+  "dependencies": {
+    "lodash.without": "^4.4.0"
+  }
 }

From 9100880ce75ea7b984e437e9e1f3f40f06800233 Mon Sep 17 00:00:00 2001
From: Lowie Benoot <lowie@teamleader.eu>
Date: Thu, 5 Jan 2023 09:58:26 +0100
Subject: [PATCH 03/23] =?UTF-8?q?=F0=9F=9A=9A=20add=20the=20constants=20fi?=
 =?UTF-8?q?le?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This file is copied from the @teamleader/ui package. In @teamleader/ui we will import it from this package instead later.
---
 constants.ts | 67 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 67 insertions(+)
 create mode 100644 constants.ts

diff --git a/constants.ts b/constants.ts
new file mode 100644
index 0000000..0b81def
--- /dev/null
+++ b/constants.ts
@@ -0,0 +1,67 @@
+import without from "lodash.without";
+
+export const COLOR = {
+  AQUA: {
+    LIGHTEST: "#f2f8ff",
+    LIGHT: "#cce4ff",
+    NORMAL: "#99c9ff",
+    DARK: "#0071f2",
+    DARKEST: "#004da6",
+  },
+  GOLD: {
+    LIGHTEST: "#fff6e5",
+    LIGHT: "#ffda8f",
+    NORMAL: "#ffcc66",
+    DARK: "#ed9e00",
+    DARKEST: "#8f3c00",
+  },
+  NEUTRAL: {
+    LIGHTEST: "#ffffff",
+    LIGHT: "#f7f7fa",
+    NORMAL: "#e4e4e6",
+    DARK: "#c0c0c4",
+    DARKEST: "#82828c",
+  },
+  MINT: {
+    LIGHTEST: "#f0fafa",
+    LIGHT: "#57d3d2",
+    NORMAL: "#00b2b2",
+    DARK: "#008a8c",
+    DARKEST: "#004b4d",
+  },
+  RUBY: {
+    LIGHTEST: "#fff0ec",
+    LIGHT: "#ffbca6",
+    NORMAL: "#ff7040",
+    DARK: "#e84b17",
+    DARKEST: "#992600",
+  },
+  TEAL: {
+    LIGHTEST: "#f0f5fc",
+    LIGHT: "#c1cede",
+    NORMAL: "#64788f",
+    DARK: "#2a3b4d",
+    DARKEST: "#1a1c20",
+  },
+  VIOLET: {
+    LIGHTEST: "#f7f7ff",
+    LIGHT: "#d3d1fe",
+    NORMAL: "#928cff",
+    DARK: "#6961ff",
+    DARKEST: "#130abf",
+  },
+};
+
+export const COLORS = Object.keys(COLOR).map((key) =>
+  key.toLowerCase()
+) as unknown as Lowercase<keyof typeof COLOR>[];
+export const TINTS = Object.keys(COLOR["AQUA"]).map((key) =>
+  key.toLowerCase()
+) as unknown as Lowercase<keyof typeof COLOR["AQUA"]>[];
+
+export const colorsWithout = (colorsToExclude: typeof COLORS) =>
+  without(COLORS, ...colorsToExclude);
+export const tintsWithout = (tintsToExclude: typeof TINTS) =>
+  without(TINTS, ...tintsToExclude);
+
+export default COLOR;

From 07d30ffe7f74fd7ce2e87b7d38852d7a51cd0da8 Mon Sep 17 00:00:00 2001
From: Lowie Benoot <lowie@teamleader.eu>
Date: Thu, 5 Jan 2023 10:01:14 +0100
Subject: [PATCH 04/23] =?UTF-8?q?=E2=9E=95=20install=20typescript?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/package.json b/package.json
index 4e6bef3..f4bc14b 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,9 @@
     "url": "https://github.com/teamleadercrm/ui-colors/issues"
   },
   "homepage": "https://github.com/teamleadercrm/ui-colors#readme",
+  "devDependencies": {
+    "typescript": "^4.9.4"
+  },
   "dependencies": {
     "lodash.without": "^4.4.0"
   }

From 3c25edf0e08a99f0f1ab5fa4499a63bc7597eb61 Mon Sep 17 00:00:00 2001
From: Lowie Benoot <lowie@teamleader.eu>
Date: Thu, 5 Jan 2023 10:01:51 +0100
Subject: [PATCH 05/23] =?UTF-8?q?=E2=9E=95=20install=20types=20for=20lodas?=
 =?UTF-8?q?h.without?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index f4bc14b..1df33de 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
   },
   "homepage": "https://github.com/teamleadercrm/ui-colors#readme",
   "devDependencies": {
+    "@types/lodash.without": "^4.4.7",
     "typescript": "^4.9.4"
   },
   "dependencies": {

From 7b7d425a7fbbc2d4ba2e069235080ec18bc9472a Mon Sep 17 00:00:00 2001
From: Lowie Benoot <lowie@teamleader.eu>
Date: Thu, 5 Jan 2023 10:03:54 +0100
Subject: [PATCH 06/23] =?UTF-8?q?=F0=9F=94=A8=20add=20a=20script=20to=20co?=
 =?UTF-8?q?mpile=20the=20constants=20file?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json  | 3 +++
 tsconfig.json | 7 +++++++
 2 files changed, 10 insertions(+)
 create mode 100644 tsconfig.json

diff --git a/package.json b/package.json
index 1df33de..7a6f2fa 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,9 @@
     "@types/lodash.without": "^4.4.7",
     "typescript": "^4.9.4"
   },
+  "scripts": {
+    "build:js": "tsc",
+  },
   "dependencies": {
     "lodash.without": "^4.4.0"
   }
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..0435269
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "esModuleInterop": true
+  },
+  "include": ["constants.ts"]
+}

From 38551bc981e81a52ef4d43018d556e42f7b45bb3 Mon Sep 17 00:00:00 2001
From: Lowie Benoot <lowie@teamleader.eu>
Date: Thu, 5 Jan 2023 10:04:26 +0100
Subject: [PATCH 07/23] =?UTF-8?q?=E2=9E=95=20install=20hex-to-hsl?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index 7a6f2fa..58f55e2 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
   "homepage": "https://github.com/teamleadercrm/ui-colors#readme",
   "devDependencies": {
     "@types/lodash.without": "^4.4.7",
+    "hex-to-hsl": "^1.0.2",
     "typescript": "^4.9.4"
   },
   "scripts": {

From e1c1e51ef33de298b2045ec508b4bf328b811eea Mon Sep 17 00:00:00 2001
From: Lowie Benoot <lowie@teamleader.eu>
Date: Thu, 5 Jan 2023 10:07:06 +0100
Subject: [PATCH 08/23] =?UTF-8?q?=F0=9F=94=A8=20add=20script=20to=20build?=
 =?UTF-8?q?=20the=20css=20file=20based=20on=20the=20color=20map=20from=20t?=
 =?UTF-8?q?he=20constants?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json         |  1 +
 scripts/build-css.js | 28 ++++++++++++++++++++++++++++
 2 files changed, 29 insertions(+)
 create mode 100644 scripts/build-css.js

diff --git a/package.json b/package.json
index 58f55e2..2ac8ab8 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
   },
   "scripts": {
     "build:js": "tsc",
+    "build:css": "node scripts/build-css.js",
   },
   "dependencies": {
     "lodash.without": "^4.4.0"
diff --git a/scripts/build-css.js b/scripts/build-css.js
new file mode 100644
index 0000000..3fd2de8
--- /dev/null
+++ b/scripts/build-css.js
@@ -0,0 +1,28 @@
+const COLOR = require("../constants").COLOR;
+const hexToHsl = require("hex-to-hsl");
+const fs = require("fs");
+
+function getColorCSS(color, tint, hex) {
+  const name = !tint || tint === "normal" ? color : `${color}-${tint}`;
+  const [h, s, l] = hexToHsl(hex);
+
+  return `
+  --color-${name}-hsl-h: ${h};
+  --color-${name}-hsl-s: ${s}%;
+  --color-${name}-hsl-l: ${l}%;
+  --color-${name}: hsl(var(--color-${name}-hsl-h), var(--color-${name}-hsl-s), var(--color-${name}-hsl-l));`;
+}
+
+let css = ":root {";
+
+Object.keys(COLOR).forEach((color) => {
+  Object.keys(COLOR[color]).forEach((tint) => {
+    const hex = COLOR[color][tint];
+    css += getColorCSS(color.toLowerCase(), tint.toLowerCase(), hex);
+  });
+});
+css += getColorCSS("black", null, "#000");
+css += getColorCSS("white", null, "#000");
+css += "\n}";
+
+fs.writeFileSync("index.css", css);

From 81039c52d0647694be886f0215534d2c9e6cb535 Mon Sep 17 00:00:00 2001
From: Lowie Benoot <lowie@teamleader.eu>
Date: Thu, 5 Jan 2023 10:07:47 +0100
Subject: [PATCH 09/23] =?UTF-8?q?=F0=9F=94=A8=20add=20build=20script=20for?=
 =?UTF-8?q?=20building=20the=20npm=20package?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/package.json b/package.json
index 2ac8ab8..45e35ec 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,8 @@
   "scripts": {
     "build:js": "tsc",
     "build:css": "node scripts/build-css.js",
+    "build": "yarn run build:js && yarn run build:css",
+    "prepublishOnly": "yarn build"
   },
   "dependencies": {
     "lodash.without": "^4.4.0"

From ae5b5681cf175c898520e44e881803b778107ff0 Mon Sep 17 00:00:00 2001
From: Lowie Benoot <lowie@teamleader.eu>
Date: Thu, 5 Jan 2023 10:08:15 +0100
Subject: [PATCH 10/23] =?UTF-8?q?=F0=9F=99=88=20add=20.gitignore=20file?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 .gitignore

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..88b84e7
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+index.css
+constants.js

From ca65348a0520043d64217dc7a1e6f130ec28cf4f Mon Sep 17 00:00:00 2001
From: Lowie Benoot <lowie@teamleader.eu>
Date: Thu, 5 Jan 2023 10:08:28 +0100
Subject: [PATCH 11/23] =?UTF-8?q?=F0=9F=99=88=20add=20.npmignore=20file?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .npmignore | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .npmignore

diff --git a/.npmignore b/.npmignore
new file mode 100644
index 0000000..4632d7e
--- /dev/null
+++ b/.npmignore
@@ -0,0 +1,5 @@
+scripts
+spec
+constants.ts
+.editorconfig
+tsconfig.json

From fad6ac085a8fce3fd18e308d7ef146e09289f965 Mon Sep 17 00:00:00 2001
From: Lowie Benoot <lowie@teamleader.eu>
Date: Thu, 5 Jan 2023 10:09:10 +0100
Subject: [PATCH 12/23] =?UTF-8?q?=F0=9F=93=A6=EF=B8=8F=20use=20yarn=20lock?=
 =?UTF-8?q?=20file=20instead=20of=20npm=20lock=20file=20now?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json |  5 -----
 yarn.lock         | 43 +++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 43 insertions(+), 5 deletions(-)
 delete mode 100644 package-lock.json
 create mode 100644 yarn.lock

diff --git a/package-lock.json b/package-lock.json
deleted file mode 100644
index fc91c1a..0000000
--- a/package-lock.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "name": "@teamleader/ui-colors",
-  "version": "0.0.3",
-  "lockfileVersion": 1
-}
diff --git a/yarn.lock b/yarn.lock
new file mode 100644
index 0000000..2577816
--- /dev/null
+++ b/yarn.lock
@@ -0,0 +1,43 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@types/lodash.without@^4.4.7":
+  version "4.4.7"
+  resolved "https://registry.yarnpkg.com/@types/lodash.without/-/lodash.without-4.4.7.tgz#e1c68ec4610b50de44d5a962ba2ab4c032f43ff8"
+  integrity sha512-T5Tfz45ZNn5YyFz8lFdsEN8os5T7BEXGuMCRSzmDavxUGwSOX2ijaOkjicnNlL/l6Hrs6UJPIsHebch3gLnpJg==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash@*":
+  version "4.14.191"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.191.tgz#09511e7f7cba275acd8b419ddac8da9a6a79e2fa"
+  integrity sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==
+
+hex-to-hsl@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/hex-to-hsl/-/hex-to-hsl-1.0.2.tgz#d5c59ece00178444e821c8fc58a430afc09831c2"
+  integrity sha512-7E2WDAXDNb51Ezc+/MyXOt/NbKgk4LPtEHpUBU0McJVF1seFxUhiOQyf9Sv/5NwTQntsEqzevCsv/Y6chOFLvg==
+  dependencies:
+    hex-to-rgb "^1.0.1"
+    rgb-to-hsl "0.0.2"
+
+hex-to-rgb@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/hex-to-rgb/-/hex-to-rgb-1.0.1.tgz#100b9df126b32f2762adf8486be68c65ef8ed2a4"
+  integrity sha512-2GsESdjpJIrRL8I7iPOp0r0wczJBk++Q/zFrviNaTRPWMIgk5bPqDmKPUvRHN0SZrYT9N1e+xZU1niYJ6QxzMg==
+
+lodash.without@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.without/-/lodash.without-4.4.0.tgz#3cd4574a00b67bae373a94b748772640507b7aac"
+  integrity sha512-M3MefBwfDhgKgINVuBJCO1YR3+gf6s9HNJsIiZ/Ru77Ws6uTb9eBuvrkpzO+9iLoAaRodGuq7tyrPCx+74QYGQ==
+
+rgb-to-hsl@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/rgb-to-hsl/-/rgb-to-hsl-0.0.2.tgz#36f9fc286376b90acc457e699005b4cb42d350ec"
+  integrity sha512-92EhT0XUmmC1APQj5NKl3LoNPtZsDBzivTjZAikFuADreIQgqLnJgnnP5gY/mf52UqglAwVDAD/0arY9N35KFg==
+
+typescript@^4.9.4:
+  version "4.9.4"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.4.tgz#a2a3d2756c079abda241d75f149df9d561091e78"
+  integrity sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==

From e433fcc347dc270e7d26bf59300c5c3f5b9af698 Mon Sep 17 00:00:00 2001
From: Lowie Benoot <lowie@teamleader.eu>
Date: Thu, 5 Jan 2023 10:09:44 +0100
Subject: [PATCH 13/23] =?UTF-8?q?=F0=9F=94=96=20bump=20version?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 45e35ec..8e46364 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@teamleader/ui-colors",
   "private": false,
-  "version": "0.3.0",
+  "version": "1.0.0",
   "description": "Teamleader UI colors",
   "main": "index.css",
   "repository": {

From d2e4db17fb6ce5eae4d367f100def34d6917ead6 Mon Sep 17 00:00:00 2001
From: Lowie Benoot <lowie@teamleader.eu>
Date: Thu, 5 Jan 2023 10:46:38 +0100
Subject: [PATCH 14/23] =?UTF-8?q?=F0=9F=93=9D=20Write=20a=20README?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 111 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 111 insertions(+)
 create mode 100644 README.md

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..28f1b6a
--- /dev/null
+++ b/README.md
@@ -0,0 +1,111 @@
+# Teamleader UI Colors
+
+Teamleader UI colors is a package that defines the colors that we use in our UI package and projects.
+The colors are defined as CSS variables and as a JavaScript map (with some helpers).
+
+Our colors are
+* aqua
+* gold
+* neutral
+* mint
+* ruby
+* teal
+* violet
+
+For each color there are 5 tints.
+* lightest
+* light
+* normal
+* dark
+* darkest
+
+## Usage
+
+### install
+
+```
+yarn add @teamleader/ui-colors
+```
+or
+```
+npm install @teamleader/ui-colors
+```
+
+### CSS
+
+Import the css file in your css
+
+```css
+@import '@teamleader/ui-colors';
+```
+
+The available color variables are
+
+```css
+--color-aqua-lightest
+--color-aqua-light
+--color-aqua
+--color-aqua-dark
+--color-aqua-darkest
+--color-gold-lightest
+--color-gold-light
+--color-gold
+--color-gold-dark
+--color-gold-darkest
+--color-neutral-lightest
+--color-neutral-light
+--color-neutral
+--color-neutral-dark
+--color-neutral-darkest
+--color-mint-lightest
+--color-mint-light
+--color-mint
+--color-mint-dark
+--color-mint-darkest
+--color-ruby-lightest
+--color-ruby-light
+--color-ruby
+--color-ruby-dark
+--color-ruby-darkest
+--color-teal-lightest
+--color-teal-light
+--color-teal
+--color-teal-dark
+--color-teal-darkest
+--color-violet-lightest
+--color-violet-light
+--color-violet
+--color-violet-dark
+--color-violet-darkest
+--color-black
+--color-white
+```
+
+The colors are defined as hsl values. For each color the h, s an l value are also available as separate variables. This way you can do color calculations on them with native css (instead of using postcss-color plugin for example). Some examples:
+
+lighten(12%)
+```css
+hsl(var(--color-ruby-hsl-h), var(--color-ruby-hsl-s), calc(var(--color-ruby-hsl-l) - 12%))
+```
+
+tint(64%)
+```css
+hsl(calc(var(--color-ruby-h) / 1), calc(var(--color-ruby-s) / 1), calc(var(--color-ruby-l) * 1.64))
+```
+
+
+### JavaScript
+
+```js
+import { COLOR, COLORS, TINTS, colorsWithout, tintsWithout } from '@teamleader/ui-colors/constants';
+```
+
+`COLOR`: an object that contains the colors as hex values (e.g. `COLOR.MINT.DARKEST`).
+
+`COLORS`: an array with the color names (`['aqua', 'gold', 'neutral', 'mint', 'ruby', 'teal', 'violet']`).
+
+`TINTS`: an array with the tint names (`['lightest', 'light', 'normal', 'dark', 'darkest']`).
+
+`colorsWithout`: a function to get an array of colors without a given array of colors (`colorsWithout(['neutral', 'violet])`)
+
+`tintsWithout`: a function to get an array of tints without a given array of tints (`tintsWithout(['light', 'lightest])`)

From d44903d6e3fa7c5cc6d2c44f3a6bd390dc49a9e5 Mon Sep 17 00:00:00 2001
From: Lowie Benoot <lowie@teamleader.eu>
Date: Thu, 5 Jan 2023 12:00:21 +0100
Subject: [PATCH 15/23] =?UTF-8?q?=F0=9F=93=9D=20update=20changelog?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index da1f81a..bd342d1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,16 @@
 
 ### Fixed
 
+## [1.0.0] - 2023-01-05
+
+### Changed
+
+- colors are defined in HSL values instead of HEX values. ([@owiebenoot](https://github.com/owiebenoot)) in ([#4](https://github.com/teamleadercrm/ui/pull/4))
+
+### Added
+
+- colors can be imported in JavaScript/TypeScript as well now. ([@owiebenoot](https://github.com/owiebenoot)) in ([#4](https://github.com/teamleadercrm/ui/pull/4))
+
 ## [0.3.0] - 2020-05-19
 
 ### Changed

From 7e000364dc483628a16233dfe1b0236c6a231230 Mon Sep 17 00:00:00 2001
From: Lowie Benoot <lowie@teamleader.eu>
Date: Thu, 5 Jan 2023 13:27:51 +0100
Subject: [PATCH 16/23] =?UTF-8?q?=F0=9F=90=9B=20use=20the=20correct=20hex?=
 =?UTF-8?q?=20value=20for=20white?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 scripts/build-css.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/build-css.js b/scripts/build-css.js
index 3fd2de8..ed13cf8 100644
--- a/scripts/build-css.js
+++ b/scripts/build-css.js
@@ -22,7 +22,7 @@ Object.keys(COLOR).forEach((color) => {
   });
 });
 css += getColorCSS("black", null, "#000");
-css += getColorCSS("white", null, "#000");
+css += getColorCSS("white", null, "#fff");
 css += "\n}";
 
 fs.writeFileSync("index.css", css);

From 4458d63a3ec2a5bf5b46f0d06a8313959b42f11a Mon Sep 17 00:00:00 2001
From: Lowie Benoot <lowie@teamleader.eu>
Date: Thu, 5 Jan 2023 13:28:57 +0100
Subject: [PATCH 17/23] =?UTF-8?q?=F0=9F=93=9D=20fix=20capitals=20and=20nam?=
 =?UTF-8?q?e=20in=20changelog?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bd342d1..39ee666 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,11 +14,11 @@
 
 ### Changed
 
-- colors are defined in HSL values instead of HEX values. ([@owiebenoot](https://github.com/owiebenoot)) in ([#4](https://github.com/teamleadercrm/ui/pull/4))
+- Colors are defined in HSL values instead of HEX values. ([@lowiebenoot](https://github.com/lowiebenoot)) in ([#4](https://github.com/teamleadercrm/ui/pull/4))
 
 ### Added
 
-- colors can be imported in JavaScript/TypeScript as well now. ([@owiebenoot](https://github.com/owiebenoot)) in ([#4](https://github.com/teamleadercrm/ui/pull/4))
+- Colors can be imported in JavaScript/TypeScript as well now. ([@lowiebenoot](https://github.com/lowiebenoot)) in ([#4](https://github.com/teamleadercrm/ui/pull/4))
 
 ## [0.3.0] - 2020-05-19
 

From 2f62ac27ea17d44c7fc1260c1da5e7c7c80db586 Mon Sep 17 00:00:00 2001
From: Lowie Benoot <lowie@teamleader.eu>
Date: Thu, 5 Jan 2023 16:30:23 +0100
Subject: [PATCH 18/23] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20use=20a=20different?=
 =?UTF-8?q?=20color=20conversion=20package=20that=20can=20give=20us=20prec?=
 =?UTF-8?q?ise=20values.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The other package was giving us rounded values, which was actually changing the colors. We round them ourselves to 2 decimals now, which gives the same colors.
---
 package.json         |  2 +-
 scripts/build-css.js |  6 ++++--
 yarn.lock            | 24 +++++++++---------------
 3 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/package.json b/package.json
index 8e46364..58b4103 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
   "homepage": "https://github.com/teamleadercrm/ui-colors#readme",
   "devDependencies": {
     "@types/lodash.without": "^4.4.7",
-    "hex-to-hsl": "^1.0.2",
+    "color-convert": "^2.0.1",
     "typescript": "^4.9.4"
   },
   "scripts": {
diff --git a/scripts/build-css.js b/scripts/build-css.js
index ed13cf8..c7d8cff 100644
--- a/scripts/build-css.js
+++ b/scripts/build-css.js
@@ -1,10 +1,12 @@
 const COLOR = require("../constants").COLOR;
-const hexToHsl = require("hex-to-hsl");
+const colorConvert = require("color-convert");
 const fs = require("fs");
 
 function getColorCSS(color, tint, hex) {
   const name = !tint || tint === "normal" ? color : `${color}-${tint}`;
-  const [h, s, l] = hexToHsl(hex);
+  const [h, s, l] = colorConvert.hex.hsl
+    .raw(hex)
+    .map((number) => parseFloat(number.toFixed(2)));
 
   return `
   --color-${name}-hsl-h: ${h};
diff --git a/yarn.lock b/yarn.lock
index 2577816..b4cb4d7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14,29 +14,23 @@
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.191.tgz#09511e7f7cba275acd8b419ddac8da9a6a79e2fa"
   integrity sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==
 
-hex-to-hsl@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/hex-to-hsl/-/hex-to-hsl-1.0.2.tgz#d5c59ece00178444e821c8fc58a430afc09831c2"
-  integrity sha512-7E2WDAXDNb51Ezc+/MyXOt/NbKgk4LPtEHpUBU0McJVF1seFxUhiOQyf9Sv/5NwTQntsEqzevCsv/Y6chOFLvg==
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
   dependencies:
-    hex-to-rgb "^1.0.1"
-    rgb-to-hsl "0.0.2"
+    color-name "~1.1.4"
 
-hex-to-rgb@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/hex-to-rgb/-/hex-to-rgb-1.0.1.tgz#100b9df126b32f2762adf8486be68c65ef8ed2a4"
-  integrity sha512-2GsESdjpJIrRL8I7iPOp0r0wczJBk++Q/zFrviNaTRPWMIgk5bPqDmKPUvRHN0SZrYT9N1e+xZU1niYJ6QxzMg==
+color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
 lodash.without@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.without/-/lodash.without-4.4.0.tgz#3cd4574a00b67bae373a94b748772640507b7aac"
   integrity sha512-M3MefBwfDhgKgINVuBJCO1YR3+gf6s9HNJsIiZ/Ru77Ws6uTb9eBuvrkpzO+9iLoAaRodGuq7tyrPCx+74QYGQ==
 
-rgb-to-hsl@0.0.2:
-  version "0.0.2"
-  resolved "https://registry.yarnpkg.com/rgb-to-hsl/-/rgb-to-hsl-0.0.2.tgz#36f9fc286376b90acc457e699005b4cb42d350ec"
-  integrity sha512-92EhT0XUmmC1APQj5NKl3LoNPtZsDBzivTjZAikFuADreIQgqLnJgnnP5gY/mf52UqglAwVDAD/0arY9N35KFg==
-
 typescript@^4.9.4:
   version "4.9.4"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.4.tgz#a2a3d2756c079abda241d75f149df9d561091e78"

From f1d02456db1475596322dbc6a144c73bcd2d137e Mon Sep 17 00:00:00 2001
From: Lowie Benoot <lowie@teamleader.eu>
Date: Fri, 6 Jan 2023 11:20:11 +0100
Subject: [PATCH 19/23] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20import=20the=20color?=
 =?UTF-8?q?s=20from=20a=20json=20file?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This way we don't have to import the whole ts file in our node script, which doesn't work very well if you compile it to an esmodule
---
 colors.json          | 51 +++++++++++++++++++++++++++++++++++++++++
 constants.ts         | 54 ++------------------------------------------
 scripts/build-css.js |  2 +-
 tsconfig.json        |  2 ++
 4 files changed, 56 insertions(+), 53 deletions(-)
 create mode 100644 colors.json

diff --git a/colors.json b/colors.json
new file mode 100644
index 0000000..26a1b10
--- /dev/null
+++ b/colors.json
@@ -0,0 +1,51 @@
+{
+  "AQUA": {
+    "LIGHTEST": "#f2f8ff",
+    "LIGHT": "#cce4ff",
+    "NORMAL": "#99c9ff",
+    "DARK": "#0071f2",
+    "DARKEST": "#004da6"
+  },
+  "GOLD": {
+    "LIGHTEST": "#fff6e5",
+    "LIGHT": "#ffda8f",
+    "NORMAL": "#ffcc66",
+    "DARK": "#ed9e00",
+    "DARKEST": "#8f3c00"
+  },
+  "NEUTRAL": {
+    "LIGHTEST": "#ffffff",
+    "LIGHT": "#f7f7fa",
+    "NORMAL": "#e4e4e6",
+    "DARK": "#c0c0c4",
+    "DARKEST": "#82828c"
+  },
+  "MINT": {
+    "LIGHTEST": "#f0fafa",
+    "LIGHT": "#57d3d2",
+    "NORMAL": "#00b2b2",
+    "DARK": "#008a8c",
+    "DARKEST": "#004b4d"
+  },
+  "RUBY": {
+    "LIGHTEST": "#fff0ec",
+    "LIGHT": "#ffbca6",
+    "NORMAL": "#ff7040",
+    "DARK": "#e84b17",
+    "DARKEST": "#992600"
+  },
+  "TEAL": {
+    "LIGHTEST": "#f0f5fc",
+    "LIGHT": "#c1cede",
+    "NORMAL": "#64788f",
+    "DARK": "#2a3b4d",
+    "DARKEST": "#1a1c20"
+  },
+  "VIOLET": {
+    "LIGHTEST": "#f7f7ff",
+    "LIGHT": "#d3d1fe",
+    "NORMAL": "#928cff",
+    "DARK": "#6961ff",
+    "DARKEST": "#130abf"
+  }
+}
diff --git a/constants.ts b/constants.ts
index 0b81def..9288887 100644
--- a/constants.ts
+++ b/constants.ts
@@ -1,56 +1,5 @@
 import without from "lodash.without";
-
-export const COLOR = {
-  AQUA: {
-    LIGHTEST: "#f2f8ff",
-    LIGHT: "#cce4ff",
-    NORMAL: "#99c9ff",
-    DARK: "#0071f2",
-    DARKEST: "#004da6",
-  },
-  GOLD: {
-    LIGHTEST: "#fff6e5",
-    LIGHT: "#ffda8f",
-    NORMAL: "#ffcc66",
-    DARK: "#ed9e00",
-    DARKEST: "#8f3c00",
-  },
-  NEUTRAL: {
-    LIGHTEST: "#ffffff",
-    LIGHT: "#f7f7fa",
-    NORMAL: "#e4e4e6",
-    DARK: "#c0c0c4",
-    DARKEST: "#82828c",
-  },
-  MINT: {
-    LIGHTEST: "#f0fafa",
-    LIGHT: "#57d3d2",
-    NORMAL: "#00b2b2",
-    DARK: "#008a8c",
-    DARKEST: "#004b4d",
-  },
-  RUBY: {
-    LIGHTEST: "#fff0ec",
-    LIGHT: "#ffbca6",
-    NORMAL: "#ff7040",
-    DARK: "#e84b17",
-    DARKEST: "#992600",
-  },
-  TEAL: {
-    LIGHTEST: "#f0f5fc",
-    LIGHT: "#c1cede",
-    NORMAL: "#64788f",
-    DARK: "#2a3b4d",
-    DARKEST: "#1a1c20",
-  },
-  VIOLET: {
-    LIGHTEST: "#f7f7ff",
-    LIGHT: "#d3d1fe",
-    NORMAL: "#928cff",
-    DARK: "#6961ff",
-    DARKEST: "#130abf",
-  },
-};
+import COLOR from "./colors.json";
 
 export const COLORS = Object.keys(COLOR).map((key) =>
   key.toLowerCase()
@@ -65,3 +14,4 @@ export const tintsWithout = (tintsToExclude: typeof TINTS) =>
   without(TINTS, ...tintsToExclude);
 
 export default COLOR;
+export { COLOR };
diff --git a/scripts/build-css.js b/scripts/build-css.js
index c7d8cff..9c72d09 100644
--- a/scripts/build-css.js
+++ b/scripts/build-css.js
@@ -1,4 +1,4 @@
-const COLOR = require("../constants").COLOR;
+const COLOR = require("../colors.json");
 const colorConvert = require("color-convert");
 const fs = require("fs");
 
diff --git a/tsconfig.json b/tsconfig.json
index 0435269..78a251f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,5 +1,7 @@
 {
   "compilerOptions": {
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
     "strict": true,
     "esModuleInterop": true
   },

From 05da5109dc46407f0cab3c1c171cba5137368f73 Mon Sep 17 00:00:00 2001
From: Lowie Benoot <lowie@teamleader.eu>
Date: Fri, 6 Jan 2023 11:22:25 +0100
Subject: [PATCH 20/23] =?UTF-8?q?=F0=9F=94=A8=20build=20as=20an=20esmodule?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 tsconfig.json | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/tsconfig.json b/tsconfig.json
index 78a251f..29f329b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,5 +1,7 @@
 {
   "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "strict": true,

From 96b7f779b695650fa5815aca33e8d2d4e3906523 Mon Sep 17 00:00:00 2001
From: Lowie Benoot <lowie@teamleader.eu>
Date: Fri, 6 Jan 2023 11:22:54 +0100
Subject: [PATCH 21/23] =?UTF-8?q?=F0=9F=8F=B7=EF=B8=8F=20output=20type=20d?=
 =?UTF-8?q?eclaration?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore   | 1 +
 package.json | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 88b84e7..9c27e2a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 node_modules
 index.css
 constants.js
+constants.d.ts
diff --git a/package.json b/package.json
index 58b4103..2753ede 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
     "typescript": "^4.9.4"
   },
   "scripts": {
-    "build:js": "tsc",
+    "build:js": "tsc --declaration",
     "build:css": "node scripts/build-css.js",
     "build": "yarn run build:js && yarn run build:css",
     "prepublishOnly": "yarn build"

From 1e94a170056193a74974ba5406d071d778664c80 Mon Sep 17 00:00:00 2001
From: Lowie Benoot <lowie@teamleader.eu>
Date: Fri, 6 Jan 2023 11:23:57 +0100
Subject: [PATCH 22/23] =?UTF-8?q?=E2=9C=A8=20add=20marketing=20colors=20to?=
 =?UTF-8?q?=20css=20as=20well?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 scripts/build-css.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/scripts/build-css.js b/scripts/build-css.js
index 9c72d09..528f89e 100644
--- a/scripts/build-css.js
+++ b/scripts/build-css.js
@@ -23,8 +23,15 @@ Object.keys(COLOR).forEach((color) => {
     css += getColorCSS(color.toLowerCase(), tint.toLowerCase(), hex);
   });
 });
+
+// "secretly" adding some extra colors that are not really documented, but that we're using anyways.
 css += getColorCSS("black", null, "#000");
 css += getColorCSS("white", null, "#fff");
+css += getColorCSS("marketing-violet", "lightest", "#e9e8ff");
+css += getColorCSS("marketing-violet", "light", "#d3d1fe");
+css += getColorCSS("marketing-violet", null, "#4f1fff");
+css += getColorCSS("marketing-violet", "dark", "#2800b8");
+
 css += "\n}";
 
 fs.writeFileSync("index.css", css);

From 7361aa291d2219705b8907e0c67f5be30e65e2ef Mon Sep 17 00:00:00 2001
From: Lowie Benoot <lowie@teamleader.eu>
Date: Fri, 6 Jan 2023 11:27:23 +0100
Subject: [PATCH 23/23] =?UTF-8?q?=F0=9F=90=9B=20don't=20use=20decimals=20f?=
 =?UTF-8?q?or=20the=20h=20value=20of=20the=20hsl=20colors?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The postcss-color plugin can't handle this. We actually want to get rid of this plugin but let's fix this anyway to to avoid having issues with it. Most colors stay the same anyway, and the ones that change are only slightly different that it's not even visible to the eye.
---
 scripts/build-css.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/build-css.js b/scripts/build-css.js
index 528f89e..9e7b162 100644
--- a/scripts/build-css.js
+++ b/scripts/build-css.js
@@ -9,7 +9,7 @@ function getColorCSS(color, tint, hex) {
     .map((number) => parseFloat(number.toFixed(2)));
 
   return `
-  --color-${name}-hsl-h: ${h};
+  --color-${name}-hsl-h: ${Math.round(h)};
   --color-${name}-hsl-s: ${s}%;
   --color-${name}-hsl-l: ${l}%;
   --color-${name}: hsl(var(--color-${name}-hsl-h), var(--color-${name}-hsl-s), var(--color-${name}-hsl-l));`;