fix: Update Colors and Typography layouts. Fine tune theme.

Author: Andrey Okonetchnikov

src/components/ColorSwatch.jsx

@@ -11,18 +11,23 @@ export const ColorSwatch = ({ value, token }) => {
 		"rgba(255, 255, 255, 0.75)"
 	);
 	return (
-		<Swatch
-			token={token}
-			value={value}
-			css={css({
-				p: 3,
-				py: 4,
-				bg: value,
-				overflow: "hidden"
-			})}
-		>
-			<SwatchToken color={color}>{token}</SwatchToken>
-			<SwatchValue color={color}>{value}</SwatchValue>
+		<Swatch token={token} value={value}>
+			<div
+				css={css({
+					py: 5,
+					bg: value
+				})}
+			/>
+			<div
+				css={css({
+					p: 3,
+					bg: value,
+					overflow: "hidden"
+				})}
+			>
+				<SwatchToken color={color}>{token}</SwatchToken>
+				<SwatchValue color={color}>{value}</SwatchValue>
+			</div>
 		</Swatch>
 	);
 };

src/components/Colors.jsx

@@ -13,12 +13,12 @@ export default function Colors({ theme }) {
 			<Stack gap={gap}>
 				<Swatches theme={theme} items={palettes}>
 					{(key, value) => (
-						<Stack gap={0} minWidth={50}>
+						<Stack gap={0} minWidth={100}>
 							<PaletteSwatch token={key} value={value} />
 						</Stack>
 					)}
 				</Swatches>
-				<Stack gap={gap} minWidth={50}>
+				<Stack gap={gap} minWidth={150}>
 					<Swatches theme={theme} items={colors}>
 						{(key, value) => <ColorSwatch token={key} value={value} />}
 					</Swatches>

src/components/SwatchToken.jsx

@@ -7,7 +7,8 @@ function SwatchToken({ color = "text", css: componentCSS, ...rest }) {
 			css={css({
 				m: 0,
 				fontFamily: "body",
-				fontSize: "md",
+				fontSize: "sm",
+				fontWeight: "normal",
 				color,
 				...componentCSS
 			})}

src/components/SwatchValue.jsx

@@ -7,7 +7,7 @@ function SwatchValue({ color = "secondary", css: componentCSS, ...rest }) {
 			css={css({
 				m: 0,
 				fontFamily: "monospace",
-				fontSize: "sm",
+				fontSize: "xs",
 				color,
 				...componentCSS
 			})}

src/components/Typography.jsx

@@ -12,22 +12,25 @@ import {
 export default function Typography({ theme }) {
 	return (
 		<ThemeProvider theme={theme}>
-			<Stack gap={2}>
+			<Stack gap={5}>
 				<Swatches theme={theme} items={theme.fontSizes}>
 					{(token, value) => (
 						<Swatch token={token} value={value}>
-							<Stack gap={4} gridTemplateColumns="minmax(auto, 10rem) 1fr">
-								<div
-									css={css({
-										alignSelf: "center",
-										overflow: "hidden"
-									})}
-								>
-									<SwatchToken>{token}</SwatchToken>
-									<SwatchValue>{value}</SwatchValue>
+							<Stack gap={2}>
+								<div>
+									<SwatchToken css={{ display: "inline-block" }}>
+										{token}
+									</SwatchToken>{" "}
+									<SwatchValue css={{ display: "inline-block" }}>
+										({value})
+									</SwatchValue>
 								</div>
-								<FontSizeSwatch token={token} value={value}>
-									Aa
+								<FontSizeSwatch
+									token={token}
+									value={value}
+									css={css({ color: "text" })}
+								>
+									The quick brown fox jumps over the lazy dog
 								</FontSizeSwatch>
 							</Stack>
 						</Swatch>

src/theme.js

@@ -14,7 +14,7 @@ const palette = {
 };
 export default {
 	fontSizes: {
-		xl: scale(2),
+		xl: scale(3),
 		lg: scale(1),
 		md: scale(0),
 		sm: scale(-0.5),
@@ -41,7 +41,7 @@ export default {
 		text: palette.slate.base,
 		background: palette.slate.lightest,
 		primary: "#E53935",
-		secondary: palette.slate.lighter,
-		muted: palette.slate.lightest
+		secondary: palette.slate.light,
+		muted: palette.slate.lighter
 	}
 };