Merge pull request #236 from increments/fix-color-variables

Fix variables colors

Author: makoto-ogata

src/client/components/SidebarArticles.tsx

@@ -110,7 +110,7 @@ const articleSummaryStyle = css({
 
   ...pointerFine({
     "&:hover": {
-      backgroundColor: Colors.gray5,
+      backgroundColor: Colors.gray10,
       cursor: "pointer",
       textDecoration: "none",
     },
@@ -145,7 +145,7 @@ const articlesListItemStyle = css({
 
   ...pointerFine({
     "&:hover": {
-      backgroundColor: Colors.gray5,
+      backgroundColor: Colors.gray10,
       textDecoration: "none",
     },
   }),

src/client/components/SidebarContents.tsx

@@ -654,7 +654,7 @@ const articlesListItemStyle = css({
 
   ...pointerFine({
     "&:hover": {
-      backgroundColor: Colors.gray5,
+      backgroundColor: Colors.gray10,
       textDecoration: "none",
     },
   }),

src/client/lib/variables.ts

@@ -17,71 +17,70 @@ export const Colors = {
   subscribeQuestion: "#5D707C",
 
   // Gray
-  gray0: "var(--color-gray-0)",
-  gray5: "var(--color-gray-5)",
-  gray10: "var(--color-gray-10)",
-  gray20: "var(--color-gray-20)",
-  gray30: "var(--color-gray-30)",
-  gray40: "var(--color-gray-40)",
-  gray50: "var(--color-gray-50)",
-  gray60: "var(--color-gray-60)",
-  gray70: "var(--color-gray-70)",
-  gray80: "var(--color-gray-80)",
-  gray90: "var(--color-gray-90)",
-  gray100: "var(--color-gray-100)",
-  gray110: "var(--color-gray-110)",
+  gray0: "var(--color-gray0)",
+  gray10: "var(--color-gray10)",
+  gray20: "var(--color-gray20)",
+  gray30: "var(--color-gray30)",
+  gray40: "var(--color-gray40)",
+  gray50: "var(--color-gray50)",
+  gray60: "var(--color-gray60)",
+  gray70: "var(--color-gray70)",
+  gray80: "var(--color-gray80)",
+  gray90: "var(--color-gray90)",
+  gray100: "var(--color-gray100)",
+  gray110: "var(--color-gray110)",
 
   // Green
-  green10: "var(--color-green-10)",
-  green20: "var(--color-green-20)",
-  green30: "var(--color-green-30)",
-  green40: "var(--color-green-40)",
-  green50: "var(--color-green-50)",
-  green60: "var(--color-green-60)",
-  green70: "var(--color-green-70)",
-  green80: "var(--color-green-80)",
-  green90: "var(--color-green-90)",
-  green100: "var(--color-green-100)",
-  green110: "var(--color-green-110)",
+  green10: "var(--color-green10)",
+  green20: "var(--color-green20)",
+  green30: "var(--color-green30)",
+  green40: "var(--color-green40)",
+  green50: "var(--color-green50)",
+  green60: "var(--color-green60)",
+  green70: "var(--color-green70)",
+  green80: "var(--color-green80)",
+  green90: "var(--color-green90)",
+  green100: "var(--color-green100)",
+  green110: "var(--color-green110)",
 
   // Yellow
-  yellow10: "var(--color-yellow-10)",
-  yellow20: "var(--color-yellow-20)",
-  yellow30: "var(--color-yellow-30)",
-  yellow40: "var(--color-yellow-40)",
-  yellow50: "var(--color-yellow-50)",
-  yellow60: "var(--color-yellow-60)",
-  yellow70: "var(--color-yellow-70)",
-  yellow80: "var(--color-yellow-80)",
-  yellow90: "var(--color-yellow-90)",
-  yellow100: "var(--color-yellow-100)",
-  yellow110: "var(--color-yellow-110)",
+  yellow10: "var(--color-yellow10)",
+  yellow20: "var(--color-yellow20)",
+  yellow30: "var(--color-yellow30)",
+  yellow40: "var(--color-yellow40)",
+  yellow50: "var(--color-yellow50)",
+  yellow60: "var(--color-yellow60)",
+  yellow70: "var(--color-yellow70)",
+  yellow80: "var(--color-yellow80)",
+  yellow90: "var(--color-yellow90)",
+  yellow100: "var(--color-yellow100)",
+  yellow110: "var(--color-yellow110)",
 
   // Red
-  red10: "var(--color-red-10)",
-  red20: "var(--color-red-20)",
-  red30: "var(--color-red-30)",
-  red40: "var(--color-red-40)",
-  red50: "var(--color-red-50)",
-  red60: "var(--color-red-60)",
-  red70: "var(--color-red-70)",
-  red80: "var(--color-red-80)",
-  red90: "var(--color-red-90)",
-  red100: "var(--color-red-100)",
-  red110: "var(--color-red-110)",
+  red10: "var(--color-red10)",
+  red20: "var(--color-red20)",
+  red30: "var(--color-red30)",
+  red40: "var(--color-red40)",
+  red50: "var(--color-red50)",
+  red60: "var(--color-red60)",
+  red70: "var(--color-red70)",
+  red80: "var(--color-red80)",
+  red90: "var(--color-red90)",
+  red100: "var(--color-red100)",
+  red110: "var(--color-red110)",
 
   // Blue
-  blue10: "var(--color-blue-10)",
-  blue20: "var(--color-blue-20)",
-  blue30: "var(--color-blue-30)",
-  blue40: "var(--color-blue-40)",
-  blue50: "var(--color-blue-50)",
-  blue60: "var(--color-blue-60)",
-  blue70: "var(--color-blue-70)",
-  blue80: "var(--color-blue-80)",
-  blue90: "var(--color-blue-90)",
-  blue100: "var(--color-blue-100)",
-  blue110: "var(--color-blue-110)",
+  blue10: "var(--color-blue10)",
+  blue20: "var(--color-blue20)",
+  blue30: "var(--color-blue30)",
+  blue40: "var(--color-blue40)",
+  blue50: "var(--color-blue50)",
+  blue60: "var(--color-blue60)",
+  blue70: "var(--color-blue70)",
+  blue80: "var(--color-blue80)",
+  blue90: "var(--color-blue90)",
+  blue100: "var(--color-blue100)",
+  blue110: "var(--color-blue110)",
 
   // Base color
   background: "var(--color-background)",

src/client/templates/Main.tsx

@@ -12,7 +12,7 @@ export const Main = ({ children }: Props) => {
 };
 
 const mainStyle = css({
-  backgroundColor: Colors.gray5,
+  backgroundColor: Colors.gray10,
   display: "grid",
   gridTemplateAreas: `
   "sidebar contents"