fix: Color swatch should have same height. Do not wrap long values

Author: Andrey Okonetchnikov

src/components/ColorSwatch.jsx

@@ -12,15 +12,10 @@ export const ColorSwatch = ({ value, token }) => {
 	);
 	return (
 		<Swatch token={token} value={value}>
-			<div
-				css={css({
-					py: 5,
-					bg: value
-				})}
-			/>
 			<div
 				css={css({
 					p: 3,
+					pt: 6,
 					bg: value,
 					overflow: "hidden"
 				})}

src/components/SwatchValue.jsx

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