styling update

- more consistent tag design
- moved some colors to theming.ts

source/src/components/PostCard.tsx

@@ -40,8 +40,8 @@ const StyledTitle = styled.h1`
 const StyledMetaContainer = styled.small`
 	color: ${(props) =>
 		theming.theme(props.theme.currentTheme, {
-			light: "#555",
-			dark: "#CCC",
+			light: theming.light.color2,
+			dark: theming.dark.color2,
 		})};
 `
 

source/src/components/Tag.tsx

@@ -9,11 +9,14 @@ import theming from "../styles/theming"
 const StyledTag = styled.div`
 	text-align: center;
 
-	padding: 0 0.8rem 0.1rem 0.8rem;
+	margin-right: 0.8rem;
 	border-radius: 10px;
 
-	background-color: ${theming.color.linkColor};
-	color: white;
+	color: ${(props) =>
+		theming.theme(props.theme.currentTheme, {
+			light: theming.light.color2,
+			dark: theming.dark.color2,
+		})};
 `
 
 interface Props {

source/src/styles/theming.ts

@@ -13,7 +13,7 @@ function theme(
 	return values[currentTheme]
 }
 
-export default {
+const theming = {
 	theme: theme,
 	font: {
 		regular: "'Noto Sans KR', sans-serif",
@@ -38,6 +38,7 @@ export default {
 		backgroundColor2: "#2F3136",
 		color0: "#FFFFFF",
 		color1: "#EEEEEE",
+		color2: "#CCC",
 	},
 	light: {
 		backgroundColor0: "#FFFFFF",
@@ -45,6 +46,7 @@ export default {
 		backgroundColor2: "#DDDDDD",
 		color0: "#000000",
 		color1: "#111111",
+		color2: "#555",
 	},
 	styles: {
 		hoverCard: css`
@@ -76,6 +78,7 @@ export default {
 					light: "white",
 					dark: "#202225",
 				})};
+
 			&:hover {
 				background-color: ${(props) =>
 					theme(props.theme.currentTheme, {
@@ -86,3 +89,5 @@ export default {
 		`,
 	},
 }
+
+export default theming