migrate some themes

packages/app/src/components/Layout/RawLayout.tsx

@@ -3,7 +3,7 @@ import React, { ReactNode } from 'react';
 import { useTheme } from 'next-themes';
 import Head from 'next/head';
 
-import { ThemeProvider } from '../Theme/ThemeProvider';
+import { ThemeProvider } from '../Theme/utils/ThemeProvider';
 
 type Props = {
   title: string,
@@ -28,7 +28,7 @@ export const RawLayout = ({ children, title, className }: Props): JSX.Element =>
         <meta charSet="utf-8" />
         <meta name="viewport" content="initial-scale=1.0, width=device-width" />
       </Head>
-      <ThemeProvider theme="">
+      <ThemeProvider theme="default">
         <div className={classNames.join(' ')} data-color-scheme={colorScheme}>
           {children}
         </div>

packages/app/src/styles/theme/antarctic.scss → packages/app/src/components/Theme/ThemeAntarctic.module.scss

@@ -1,5 +1,6 @@
-@import '../variables';
-@import '../override-bootstrap-variables';
+@use '../../styles/variables' as *;
+@use '../../styles/bootstrap/variables' as *;
+@use '../../styles/theme/mixins/page-editor-mode-manager';
 
 // == Define Bootstrap theme colors
 //
@@ -43,8 +44,7 @@ $accentcolor: #ffd700;
 
 //== Light Mode
 //
-html[light],
-html[dark] {
+.theme :global {
   $primary: $themecolor;
 
   // Background colors
@@ -110,13 +110,13 @@ html[dark] {
   // admin theme box
   $color-theme-color-box: lighten($themecolor, 20%);
 
-  @import 'apply-colors';
-  @import 'apply-colors-light';
+  @import '../../styles/theme/apply-colors';
+  @import '../../styles/theme/apply-colors-light';
 
   //Button
   .btn-group.grw-page-editor-mode-manager {
     .btn.btn-outline-primary {
-      @include btn-page-editor-mode-manager(darken($primary, 10%), lighten($primary, 55%), lighten($primary, 60%));
+      @include page-editor-mode-manager.btn-page-editor-mode-manager(darken($primary, 10%), lighten($primary, 55%), lighten($primary, 60%));
     }
   }
 

packages/app/src/components/Theme/ThemeAntarctic.tsx

@@ -0,0 +1,8 @@
+import { ThemeInjector } from './utils/ThemeInjector';
+
+import styles from './ThemeAntarctic.module.scss';
+
+const ThemeAntarctic = ({ children }: { children: JSX.Element }): JSX.Element => {
+  return <ThemeInjector className={styles.theme}>{children}</ThemeInjector>;
+};
+export default ThemeAntarctic;

packages/app/src/styles/theme/blackboard.scss → packages/app/src/components/Theme/ThemeBlackboard.module.scss

@@ -1,8 +1,8 @@
-@import '../variables';
-@import '../override-bootstrap-variables';
+@use '../../styles/variables' as *;
+@use '../../styles/bootstrap/variables' as *;
+@use '../../styles/theme/mixins/page-editor-mode-manager';
 
-html[light],
-html[dark] {
+.theme :global {
   // Theme colors
   $themecolor: #da8506;
   $themelight: #223729;
@@ -79,8 +79,8 @@ html[dark] {
   // admin theme box
   $color-theme-color-box: $primary;
 
-  @import 'apply-colors';
-  @import 'apply-colors-dark';
+  @import '../../styles/theme/apply-colors';
+  @import '../../styles/theme/apply-colors-dark';
 
   // Navs
   .nav-tabs {
@@ -108,7 +108,7 @@ html[dark] {
   // Button
   .btn-group.grw-page-editor-mode-manager {
     .btn.btn-outline-primary {
-      @include btn-page-editor-mode-manager(#ffffff, $primary, $primary, darken($primary, 20%));
+      @include page-editor-mode-manager.btn-page-editor-mode-manager(#ffffff, $primary, $primary, darken($primary, 20%));
     }
   }
 }

packages/app/src/components/Theme/ThemeBlackboard.tsx

@@ -0,0 +1,8 @@
+import { ThemeInjector } from './utils/ThemeInjector';
+
+import styles from './ThemeBlackboard.module.scss';
+
+const ThemeBlackboard = ({ children }: { children: JSX.Element }): JSX.Element => {
+  return <ThemeInjector className={styles.theme}>{children}</ThemeInjector>;
+};
+export default ThemeBlackboard;

packages/app/src/styles/theme/christmas.scss → packages/app/src/components/Theme/ThemeChristmas.module.scss

@@ -1,5 +1,6 @@
-@import '../variables';
-@import '../override-bootstrap-variables';
+@use '../../styles/variables' as *;
+@use '../../styles/bootstrap/variables' as *;
+@use '../../styles/theme/mixins/page-editor-mode-manager';
 
 // == Define Bootstrap theme colors
 //
@@ -37,8 +38,7 @@ $color-link-wiki-hover: lighten($color-link-wiki, 15%);
 
 //== Light Mode
 //
-html[light],
-html[dark] {
+.theme :global {
   $primary: #d3c665;
   // Background colors
   $bgcolor-card: $gray-50;
@@ -102,8 +102,8 @@ html[dark] {
   // admin theme box
   $color-theme-color-box: lighten($themecolor, 20%);
 
-  @import 'apply-colors';
-  @import 'apply-colors-light';
+  @import '../../styles/theme/apply-colors';
+  @import '../../styles/theme/apply-colors-light';
 
   // change color of highlighted header in wiki (default: orange)
 
@@ -176,7 +176,7 @@ html[dark] {
   // Button
   .grw-page-editor-mode-manager {
     .btn.btn-outline-primary {
-      @include btn-page-editor-mode-manager(darken($subthemecolor, 15%), lighten($subthemecolor, 35%), lighten($subthemecolor, 45%));
+      @include page-editor-mode-manager.btn-page-editor-mode-manager(darken($subthemecolor, 15%), lighten($subthemecolor, 35%), lighten($subthemecolor, 45%));
     }
   }
 }

packages/app/src/components/Theme/ThemeChristmas.tsx

@@ -0,0 +1,8 @@
+import { ThemeInjector } from './utils/ThemeInjector';
+
+import styles from './ThemeChristmas.module.scss';
+
+const ThemeChristmas = ({ children }: { children: JSX.Element }): JSX.Element => {
+  return <ThemeInjector className={styles.theme}>{children}</ThemeInjector>;
+};
+export default ThemeChristmas;

packages/app/src/components/Theme/ThemeDefault.tsx

@@ -1,5 +1,4 @@
-
-import { ThemeInjector } from './ThemeInjector';
+import { ThemeInjector } from './utils/ThemeInjector';
 
 import styles from './ThemeDefault.module.scss';
 

packages/app/src/components/Theme/ThemeProvider.tsx

@@ -1,15 +0,0 @@
-
-import React from 'react';
-
-import dynamic from 'next/dynamic';
-
-const ThemeDefault = dynamic(() => import('./ThemeDefault'));
-
-type Props = {
-  children: JSX.Element,
-  theme: string,
-}
-
-export const ThemeProvider = ({ theme, children }: Props): JSX.Element => {
-  return <ThemeDefault>{children}</ThemeDefault>;
-};

packages/app/src/components/Theme/utils/ThemeProvider.tsx

@@ -0,0 +1,48 @@
+
+import React from 'react';
+
+import dynamic from 'next/dynamic';
+
+export const GrowiThemes = {
+  DEFAULT: 'default',
+  ANTARCTIC: 'antarctic',
+  BLACKBOARD: 'blackboard',
+  CHRISTMAS: 'christmas',
+  FIRE_RED: 'fire-red',
+  FUTURE: 'future',
+  HALLOWEEN: 'halloween',
+  HUFFLEPUFF: 'hufflepuff',
+  ISLAND: 'island',
+  JADE_GREEN: 'jade-green',
+  KIBELA: 'kibela',
+  MONO_BLUE: 'mono-blue',
+  NATURE: 'nature',
+  SPRING: 'spring',
+  WOOD: 'wood',
+} as const;
+export type GrowiThemes = typeof GrowiThemes[keyof typeof GrowiThemes];
+
+
+const ThemeAntarctic = dynamic(() => import('../ThemeAntarctic'));
+const ThemeBlackboard = dynamic(() => import('../ThemeBlackboard'));
+const ThemeChristmas = dynamic(() => import('../ThemeChristmas'));
+const ThemeDefault = dynamic(() => import('../ThemeDefault'));
+
+
+type Props = {
+  children: JSX.Element,
+  theme: string,
+}
+
+export const ThemeProvider = ({ theme, children }: Props): JSX.Element => {
+  switch (theme) {
+    case GrowiThemes.ANTARCTIC:
+      return <ThemeAntarctic>{children}</ThemeAntarctic>;
+    case GrowiThemes.BLACKBOARD:
+      return <ThemeBlackboard>{children}</ThemeBlackboard>;
+    case GrowiThemes.CHRISTMAS:
+      return <ThemeChristmas>{children}</ThemeChristmas>;
+    default:
+      return <ThemeDefault>{children}</ThemeDefault>;
+  }
+};