refactor: split theme file

inertia/components/common/dropdown/dropdown_container.tsx

@@ -1,18 +1,21 @@
 import styled from '@emotion/styled';
+import TransitionLayout from '~/components/layouts/_transition_layout';
 
-const DropdownContainer = styled.div<{ show: boolean }>(({ show, theme }) => ({
-  zIndex: 99,
-  position: 'absolute',
-  top: 'calc(100% + 0.5em)',
-  right: 0,
-  minWidth: '175px',
-  backgroundColor: show ? theme.colors.secondary : theme.colors.background,
-  border: `2px solid ${theme.colors.secondary}`,
-  borderRadius: theme.border.radius,
-  boxShadow: theme.colors.boxShadow,
-  display: show ? 'flex' : 'none',
-  flexDirection: 'column',
-  overflow: 'hidden',
-}));
+const DropdownContainer = styled(TransitionLayout)<{ show: boolean }>(
+  ({ show, theme }) => ({
+    zIndex: 99,
+    position: 'absolute',
+    top: 'calc(100% + 0.5em)',
+    right: 0,
+    minWidth: '175px',
+    backgroundColor: show ? theme.colors.secondary : theme.colors.background,
+    border: `2px solid ${theme.colors.secondary}`,
+    borderRadius: theme.border.radius,
+    boxShadow: theme.colors.boxShadow,
+    display: show ? 'flex' : 'none',
+    flexDirection: 'column',
+    overflow: 'hidden',
+  })
+);
 
 export default DropdownContainer;

inertia/components/layouts/_base_layout.tsx

@@ -7,7 +7,6 @@ import DarkThemeContextProvider from '~/contexts/dark_theme_context';
 export default function BaseLayout({ children }: { children: ReactNode }) {
   const { i18n } = useTranslation();
   dayjs.locale(i18n.language);
-  console.log('a');
   return (
     <DarkThemeContextProvider key="a">
       <ContextThemeProvider>{children}</ContextThemeProvider>

inertia/components/layouts/_theme_layout.tsx

@@ -1,7 +1,8 @@
 import { Global, ThemeProvider, css, useTheme } from '@emotion/react';
 import { ReactNode } from 'react';
 import useDarkTheme from '~/hooks/use_dark_theme';
-import { darkTheme, lightTheme } from '~/styles/theme';
+import { darkTheme } from '~/styles/themes/dark_theme';
+import { lightTheme } from '~/styles/themes/light_theme';
 
 export default function ContextThemeProvider({
   children,

inertia/styles/border.ts

@@ -0,0 +1,5 @@
+import { Theme } from '@emotion/react';
+
+export const border: Theme['border'] = {
+  radius: '3px',
+};

inertia/styles/common_colors.ts

@@ -0,0 +1,9 @@
+export const primaryColor = '#3f88c5';
+export const primaryDarkColor = '#005aa5';
+
+export const lightestBlue = '#d3e8fa';
+export const lightBlue = '#82c5fede';
+export const darkBlue = primaryDarkColor;
+export const darkestBlue = '#1f2937';
+
+export const lightRed = '#FF5A5A';

inertia/styles/media_queries.ts

@@ -0,0 +1,10 @@
+import { Theme } from '@emotion/react';
+
+export const media: Theme['media'] = {
+  mobile: '768px',
+  tablet: '1024px',
+  small_desktop: '1280px',
+  medium_desktop: '1440px',
+  large_desktop: '1920px',
+  xlarge_desktop: '2560px',
+};

inertia/styles/theme.ts

@@ -1,95 +0,0 @@
-import { Theme } from '@emotion/react';
-import { rgba } from '~/lib/color';
-
-export const primaryColor = '#3f88c5';
-export const primaryDarkColor = '#005aa5';
-
-const lightestBlue = '#d3e8fa';
-const lightBlue = '#82c5fede';
-const darkBlue = primaryDarkColor;
-const darkestBlue = '#1f2937';
-
-const lightRed = '#FF5A5A';
-
-const border: Theme['border'] = {
-  radius: '3px',
-};
-
-const media: Theme['media'] = {
-  mobile: '768px',
-  tablet: '1024px',
-  small_desktop: '1280px',
-  medium_desktop: '1440px',
-  large_desktop: '1920px',
-  xlarge_desktop: '2560px',
-};
-
-const transition: Theme['transition'] = {
-  delay: '0.15s',
-};
-
-export const lightTheme: Theme = {
-  colors: {
-    font: '#333',
-    background: '#f0eef6',
-    primary: primaryColor,
-    secondary: '#fff',
-
-    black: '#333',
-    white: '#ffffff',
-
-    lightGrey: '#dadce0',
-    grey: '#888888',
-
-    lightestBlue,
-    lightBlue,
-    blue: primaryColor,
-    darkBlue,
-    darkestBlue,
-
-    green: 'green',
-
-    lightRed,
-
-    yellow: '#FF8A08',
-
-    boxShadow: `0 0 1em 0 ${rgba('#aaa', 0.4)}`,
-  },
-
-  border,
-  media,
-  transition,
-};
-
-export const darkTheme: Theme = {
-  colors: {
-    font: '#f0eef6',
-    background: '#222831',
-    primary: '#4fadfc',
-    secondary: '#323a47',
-
-    black: '#333',
-    white: '#ffffff',
-
-    lightGrey: '#323a47',
-    grey: '#999999',
-
-    lightestBlue,
-    lightBlue,
-    blue: '#4fadfc',
-    darkBlue,
-    darkestBlue,
-
-    green: '#09b909',
-
-    lightRed,
-
-    yellow: '#ffc107',
-
-    boxShadow: `0 0 1em 0 ${rgba('#111', 0.4)}`,
-  },
-
-  border,
-  media,
-  transition,
-};

inertia/styles/themes/dark_theme.ts

@@ -0,0 +1,45 @@
+import { Theme } from '@emotion/react';
+import { rgba } from '~/lib/color';
+import { border } from '~/styles/border';
+import {
+  darkBlue,
+  darkestBlue,
+  lightBlue,
+  lightRed,
+  lightestBlue,
+} from '~/styles/common_colors';
+import { media } from '~/styles/media_queries';
+import { transition } from '~/styles/transition';
+
+export const darkTheme: Theme = {
+  colors: {
+    font: '#f0eef6',
+    background: '#222831',
+    primary: '#4fadfc',
+    secondary: '#323a47',
+
+    black: '#333',
+    white: '#ffffff',
+
+    lightGrey: '#323a47',
+    grey: '#999999',
+
+    lightestBlue,
+    lightBlue,
+    blue: '#4fadfc',
+    darkBlue,
+    darkestBlue,
+
+    green: '#09b909',
+
+    lightRed,
+
+    yellow: '#ffc107',
+
+    boxShadow: `0 0 1em 0 ${rgba('#111', 0.4)}`,
+  },
+
+  border,
+  media,
+  transition,
+};

inertia/styles/themes/light_theme.ts

@@ -0,0 +1,46 @@
+import { Theme } from '@emotion/react';
+import { rgba } from '~/lib/color';
+import { border } from '~/styles/border';
+import {
+  darkBlue,
+  darkestBlue,
+  lightBlue,
+  lightRed,
+  lightestBlue,
+  primaryColor,
+} from '~/styles/common_colors';
+import { media } from '~/styles/media_queries';
+import { transition } from '~/styles/transition';
+
+export const lightTheme: Theme = {
+  colors: {
+    font: '#333',
+    background: '#f0eef6',
+    primary: primaryColor,
+    secondary: '#fff',
+
+    black: '#333',
+    white: '#ffffff',
+
+    lightGrey: '#dadce0',
+    grey: '#888888',
+
+    lightestBlue,
+    lightBlue,
+    blue: primaryColor,
+    darkBlue,
+    darkestBlue,
+
+    green: 'green',
+
+    lightRed,
+
+    yellow: '#FF8A08',
+
+    boxShadow: `0 0 1em 0 ${rgba('#aaa', 0.4)}`,
+  },
+
+  border,
+  media,
+  transition,
+};

inertia/styles/transition.ts

@@ -0,0 +1,5 @@
+import { Theme } from '@emotion/react';
+
+export const transition: Theme['transition'] = {
+  delay: '0.15s',
+};