refactor: Inline palette examples and simplify default theme

Author: Andrey Okonetchnikov

src/components/PaletteSwatch.md

@@ -3,8 +3,18 @@ Palette swatch renders all color tokens from a palette as defined in [System UI
 It supports arrays
 
 ```jsx harmony
-import theme from "../theme";
-<PaletteSwatch token={"red"} value={theme.colors.red} />;
+const palette = [
+  "#FFCDD2",
+  "#EF9A9A",
+  "#E57373",
+  "#EF5350",
+  "#F44336",
+  "#E53935",
+  "#D32F2F",
+  "#C62828",
+  "#B71C1C"
+];
+<PaletteSwatch token={"red"} value={palette} />;
 ```
 
 as well as object notation:

src/theme.js

@@ -2,26 +2,7 @@ import { modularScale } from "polished";
 
 const scale = value => modularScale(value, "1rem", "goldenSection");
 
-const fontSizes = {
-	xl: scale(2),
-	lg: scale(1),
-	md: scale(0),
-	sm: scale(-0.5),
-	xs: scale(-0.75)
-};
-
 const palette = {
-	red: [
-		"#FFCDD2",
-		"#EF9A9A",
-		"#E57373",
-		"#EF5350",
-		"#F44336",
-		"#E53935",
-		"#D32F2F",
-		"#C62828",
-		"#B71C1C"
-	],
 	slate: {
 		darker: "#11161A",
 		dark: "#1F2932",
@@ -32,7 +13,13 @@ const palette = {
 	}
 };
 export default {
-	fontSizes,
+	fontSizes: {
+		xl: scale(2),
+		lg: scale(1),
+		md: scale(0),
+		sm: scale(-0.5),
+		xs: scale(-0.75)
+	},
 	fonts: {
 		body: "system-ui, sans-serif",
 		heading: '"Avenir Next", sans-serif',
@@ -53,11 +40,8 @@ export default {
 		...palette,
 		text: palette.slate.base,
 		background: palette.slate.lightest,
-		primary: palette.red[8],
+		primary: "#E53935",
 		secondary: palette.slate.lighter,
 		muted: palette.slate.lightest
-	},
-	borders: {
-		thin: `1px solid ${palette.slate.lightest}`
 	}
 };