Merge pull request #4 from teamleadercrm/colors-hsl

Define colors in HSL values instead of HEX values

.gitignore

@@ -0,0 +1,4 @@
+node_modules
+index.css
+constants.js
+constants.d.ts

.npmignore

@@ -0,0 +1,5 @@
+scripts
+spec
+constants.ts
+.editorconfig
+tsconfig.json

CHANGELOG.md

@@ -10,6 +10,16 @@
 
 ### Fixed
 
+## [1.0.0] - 2023-01-05
+
+### Changed
+
+- 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. ([@lowiebenoot](https://github.com/lowiebenoot)) in ([#4](https://github.com/teamleadercrm/ui/pull/4))
+
 ## [0.3.0] - 2020-05-19
 
 ### Changed

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])`)

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"
+  }
+}

constants.ts

@@ -0,0 +1,17 @@
+import without from "lodash.without";
+import COLOR from "./colors.json";
+
+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;
+export { COLOR };

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": {
@@ -18,5 +18,19 @@
   "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",
+  "devDependencies": {
+    "@types/lodash.without": "^4.4.7",
+    "color-convert": "^2.0.1",
+    "typescript": "^4.9.4"
+  },
+  "scripts": {
+    "build:js": "tsc --declaration",
+    "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"
+  }
 }

scripts/build-css.js

@@ -0,0 +1,37 @@
+const COLOR = require("../colors.json");
+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] = colorConvert.hex.hsl
+    .raw(hex)
+    .map((number) => parseFloat(number.toFixed(2)));
+
+  return `
+  --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));`;
+}
+
+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);
+  });
+});
+
+// "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);

tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "strict": true,
+    "esModuleInterop": true
+  },
+  "include": ["constants.ts"]
+}

yarn.lock

@@ -0,0 +1,37 @@
+# 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==
+
+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:
+    color-name "~1.1.4"
+
+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==
+
+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==