feat: add more color themes

jeovazero · Jun 1, 2021 · 4406a97 · 4406a97
1 parent 07c5555
commit 4406a97
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 18 deletions.
diff --git a/src/components/IconButton.tsx b/src/components/IconButton.tsx
@@ -30,7 +30,7 @@ const IconButtonStyled = styled(IconButton)`
   }
   :hover {
     cursor: pointer;
-    background-color: lightpink;
+    background-color: hsl(68,90%,90%);
   }
 `
 

diff --git a/src/components/Keys.tsx b/src/components/Keys.tsx
@@ -24,7 +24,7 @@ const KeysStyled = styled(Keys)`
   flex-direction: column;
   align-items: center;
   font-family: var(--fontFamilyPrimary);
-  color: var(--primaryLight);
+  color: var(--primary);
   transition: color 1.25s ease;
   font-weight: bold;
   .keys__key {

diff --git a/src/tokens.ts b/src/tokens.ts
@@ -3,23 +3,21 @@ export const FONT_FAMILY = {
   secondary: '\'Pattaya\', sans-serif'
 } as const
 
+const lightColorFromHue = (hue: number) => `hsl(${hue}, 74%, 39%)`
+const colorFromHue = (hue: number) => `hsl(${hue}, 79%, 28%)`
+
+const colorTokens = (hue: number) =>
+  ({
+    primary: colorFromHue(hue),
+    primaryLight: lightColorFromHue(hue)
+  }) as const
+
 export const THEME = {
-  purple: {
-    primary: '#560F80',
-    primaryLight: '#781AAE'
-  },
-  red: {
-    primary: 'darkred',
-    primaryLight: 'red'
-  },
-  orange: {
-    primary: 'darkorange',
-    primaryLight: 'orange'
-  },
-  blue: {
-    primary: 'darkblue',
-    primaryLight: 'blue'
-  }
+  green: colorTokens(164),
+  blue: colorTokens(194),
+  purple: colorTokens(278),
+  pink: colorTokens(308),
+  red: colorTokens(338)
 } as const
 
 const isThemeColor = (t: string): t is ThemeColor => t in THEME