From d0d5951b03d2d936d1970c5e32f5acd54ab68592 Mon Sep 17 00:00:00 2001
From: Adam Sawicki <adamsawicki89@gmail.com>
Date: Mon, 6 Apr 2020 10:59:17 +0200
Subject: [PATCH 1/2] Add aliases to colors palettes

---
 src/components/ColorSwatch.jsx   |  7 ++++++-
 src/components/ColorSwatch.md    |  2 +-
 src/components/PaletteSwatch.jsx | 11 ++++++++---
 src/components/PaletteSwatch.md  | 27 +++++++++++++++++++++++++--
 src/components/Swatches.jsx      | 20 +++++++++++++++++---
 5 files changed, 57 insertions(+), 10 deletions(-)

diff --git a/src/components/ColorSwatch.jsx b/src/components/ColorSwatch.jsx
index f184fdc..24693bc 100644
--- a/src/components/ColorSwatch.jsx
+++ b/src/components/ColorSwatch.jsx
@@ -5,7 +5,7 @@ import { readableColor } from "polished";
 import { Swatch, SwatchToken, SwatchValue } from "../";
 import { tokenPropType, valuePropType } from "../propTypes";
 
-export const ColorSwatch = ({ value, token }) => {
+export const ColorSwatch = ({ value, token, aliases }) => {
 	const color = readableColor(value, "black", "white");
 	return (
 		<Swatch token={token} value={value}>
@@ -18,6 +18,11 @@ export const ColorSwatch = ({ value, token }) => {
 				}}
 			>
 				<SwatchToken color={color}>{token}</SwatchToken>
+				{aliases
+					? (Array.isArray(aliases) ? aliases : [aliases]).map(alias => (
+							<SwatchToken color={color}>{alias}</SwatchToken>
+					  ))
+					: null}
 				<SwatchValue color={color}>{value}</SwatchValue>
 			</div>
 		</Swatch>
diff --git a/src/components/ColorSwatch.md b/src/components/ColorSwatch.md
index 81e0278..4e14f0b 100644
--- a/src/components/ColorSwatch.md
+++ b/src/components/ColorSwatch.md
@@ -1,7 +1,7 @@
 Renders a color swatch with a readable text.
 
 ```jsx harmony
-<ColorSwatch token={"accent"} value={"#C0100F"} />
+<ColorSwatch token={"accent"} aliases={"error"} value={"#C0100F"} />
 ```
 
 When clicked, the value of the token is copied to clipboard.
diff --git a/src/components/PaletteSwatch.jsx b/src/components/PaletteSwatch.jsx
index 5aece04..26e2bce 100644
--- a/src/components/PaletteSwatch.jsx
+++ b/src/components/PaletteSwatch.jsx
@@ -3,12 +3,17 @@ import PropTypes from "prop-types";
 import { Swatches, ColorSwatch } from "../index";
 import { tokenPropType, valuePropType } from "../propTypes";
 
-export const PaletteSwatch = ({ token, value }) => (
-	<Swatches items={value}>
-		{(key, value) => (
+export const PaletteSwatch = ({ token, value, aliasesKey }) => (
+	<Swatches items={value} aliasesKey={aliasesKey}>
+		{(key, value, aliases) => (
 			<ColorSwatch
 				value={value}
 				token={`${token}.${key}`}
+				aliases={
+					Array.isArray(aliases)
+						? aliases.map(alias => `${token}.${alias}`)
+						: aliases && `${token}.${aliases}`
+				}
 				key={`${token}.${key}`}
 			/>
 		)}
diff --git a/src/components/PaletteSwatch.md b/src/components/PaletteSwatch.md
index 705b72f..7aa423f 100644
--- a/src/components/PaletteSwatch.md
+++ b/src/components/PaletteSwatch.md
@@ -14,7 +14,19 @@ const palette = [
   "#C62828",
   "#B71C1C"
 ];
-<PaletteSwatch token={"red"} value={palette} />;
+palette.aliases = [
+  "lightest",
+  "light",
+  "diabled",
+  "inactive",
+  "regular",
+  "hovered",
+  "errorLight",
+  ["error", "failure"],
+  "errorDark"
+];
+
+<PaletteSwatch token={"red"} value={palette} aliasesKey="aliases" />;
 ```
 
 as well as object notation:
@@ -22,5 +34,16 @@ as well as object notation:
 ```jsx harmony
 import theme from "../theme";
 
-<PaletteSwatch token={"slate"} value={theme.colors.slate} />;
+const slate = { ...theme.colors.slate };
+
+slate.aliases = {
+  darker: ["black", "foused"],
+  dark: "active",
+  base: "default",
+  light: "hovered",
+  lighter: "disabled",
+  lightest: "inactive"
+};
+
+<PaletteSwatch token={"slate"} value={slate} aliasesKey="aliases" />;
 ```
diff --git a/src/components/Swatches.jsx b/src/components/Swatches.jsx
index a9a505f..6ebba74 100644
--- a/src/components/Swatches.jsx
+++ b/src/components/Swatches.jsx
@@ -1,11 +1,25 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-const Swatches = ({ items = [], children }) => (
+const Swatches = ({ items = [], aliasesKey, children }) => (
 	<>
 		{Array.isArray(items)
-			? items.map((value, index) => children(index, value))
-			: Object.keys(items).map(key => children(key, items[key]))}
+			? items.map((value, index) =>
+					children(
+						index,
+						value,
+						aliasesKey && items[aliasesKey] ? items[aliasesKey][index] : null
+					)
+			  )
+			: Object.keys(items)
+					.filter(key => key !== aliasesKey)
+					.map(key =>
+						children(
+							key,
+							items[key],
+							aliasesKey && items[aliasesKey] ? items[aliasesKey][key] : null
+						)
+					)}
 	</>
 );
 

From eb310f8b10d0d6f1896e03132ba2d3b847673cdd Mon Sep 17 00:00:00 2001
From: Adam Sawicki <adamsawicki89@gmail.com>
Date: Mon, 6 Apr 2020 14:47:31 +0200
Subject: [PATCH 2/2] Display aliases in colors component

---
 src/components/Colors.jsx       | 19 ++++++++++++++-----
 src/components/Colors.md        |  2 +-
 src/components/PaletteSwatch.md | 17 +++++------------
 src/theme.js                    | 10 +++++++++-
 4 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/src/components/Colors.jsx b/src/components/Colors.jsx
index 617c9d0..342b9ec 100644
--- a/src/components/Colors.jsx
+++ b/src/components/Colors.jsx
@@ -3,7 +3,7 @@ import { Grid, ThemeProvider } from "theme-ui";
 import { omitBy, pickBy, isString } from "lodash";
 import { Swatches, ColorSwatch, PaletteSwatch } from "../index";
 
-export default function Colors({ theme }) {
+export default function Colors({ theme, aliasesKey }) {
 	const gap = 2;
 	const colors = pickBy(theme.colors, isString);
 	const palettes = omitBy(theme.colors, isString);
@@ -19,7 +19,11 @@ export default function Colors({ theme }) {
 								gridTemplateColumns: "repeat(auto-fit, minmax(90px, 1fr))"
 							}}
 						>
-							<PaletteSwatch token={token} value={value} />
+							<PaletteSwatch
+								token={token}
+								value={value}
+								aliasesKey={aliasesKey}
+							/>
 						</Grid>
 					)}
 				</Swatches>
@@ -29,9 +33,14 @@ export default function Colors({ theme }) {
 						gridTemplateColumns: "repeat(auto-fit, minmax(90px, 1fr))"
 					}}
 				>
-					<Swatches theme={theme} items={colors}>
-						{(token, value) => (
-							<ColorSwatch token={token} value={value} key={token} />
+					<Swatches theme={theme} items={colors} aliasesKey={aliasesKey}>
+						{(token, value, aliases) => (
+							<ColorSwatch
+								token={token}
+								value={value}
+								aliases={aliases}
+								key={token}
+							/>
 						)}
 					</Swatches>
 				</Grid>
diff --git a/src/components/Colors.md b/src/components/Colors.md
index fc6db6e..1546e82 100644
--- a/src/components/Colors.md
+++ b/src/components/Colors.md
@@ -1,5 +1,5 @@
 ```jsx harmony
 import theme from "../theme";
 
-<Colors theme={theme} />;
+<Colors theme={theme} aliasesKey={"aliases"} />;
 ```
diff --git a/src/components/PaletteSwatch.md b/src/components/PaletteSwatch.md
index 7aa423f..c60cb8b 100644
--- a/src/components/PaletteSwatch.md
+++ b/src/components/PaletteSwatch.md
@@ -34,16 +34,9 @@ as well as object notation:
 ```jsx harmony
 import theme from "../theme";
 
-const slate = { ...theme.colors.slate };
-
-slate.aliases = {
-  darker: ["black", "foused"],
-  dark: "active",
-  base: "default",
-  light: "hovered",
-  lighter: "disabled",
-  lightest: "inactive"
-};
-
-<PaletteSwatch token={"slate"} value={slate} aliasesKey="aliases" />;
+<PaletteSwatch
+  token={"slate"}
+  value={theme.colors.slate}
+  aliasesKey="aliases"
+/>;
 ```
diff --git a/src/theme.js b/src/theme.js
index a394084..d9c0688 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -9,7 +9,15 @@ const palette = {
 		base: "#2E3D49",
 		light: "#6D7780",
 		lighter: "#B4B9BD",
-		lightest: "#F7F7F8"
+		lightest: "#F7F7F8",
+		aliases: {
+			darker: "foused",
+			dark: "active",
+			base: "default",
+			light: "hovered",
+			lighter: "disabled",
+			lightest: "inactive"
+		}
 	}
 };
 export default {