Merge pull request #8548 from weseek/fix/141467-theme-select-style

fix: Theme select style

apps/app/src/components/Admin/Customize/ThemeColorBox.tsx

@@ -15,26 +15,37 @@ export const ThemeColorBox = (props: Props): JSX.Element => {
     isSelected, metadata, onSelected,
   } = props;
   const {
-    name, bg, topbar, sidebar, accent, isPresetTheme,
+    name, lightBg, darkBg, lightSidebar, darkSidebar, lightIcon, darkIcon, createBtn, isPresetTheme,
   } = metadata;
 
   return (
+    // TODO: Display a primary color border when icon is selected
     <div
       id={`theme-option-${name}`}
       className={`theme-option-container d-flex flex-column align-items-center ${isSelected ? 'active' : ''}`}
       onClick={onSelected}
     >
-      <a id={name} role="button" className={`m-0 ${name} theme-button`}>
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
-          <g>
-            <path d="M -1 -1 L65 -1 L65 65 L-1 65 L-1 -1 Z" fill={bg}></path>
-            <path d="M -1 -1 L65 -1 L65 15 L-1 15 L-1 -1 Z" fill={topbar}></path>
-            <path d="M -1 15 L15 15 L15 65 L-1 65 L-1 15 Z" fill={sidebar}></path>
-            <path d="M 65 45 L65 65 L45 65 L65 45 Z" fill={accent}></path>
-          </g>
+      <a id={name} role="button" className={`m-0 rounded ${name} theme-button`}>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64" className="rounded">
+          <path d="M32.5,0V36.364L64,20.437V0Z" fill={lightBg} />
+          <path d="M32.5,36.364V64H64V20.438Z" fill={darkBg} />
+          <path
+            d="M4.077,20.648,10.164,10.1H22.338l6.087,10.544L22.338,31.19H10.164ZM0,0V52.8l6.436-3.255v-1.8H10L17.189,44.1H6.436V42.044H21.267L32.5,36.364V0Z"
+            fill={lightSidebar}
+          />
+          <path
+            d="M6.436,53.44H26.065V55.5H6.436Zm14.831-11.4h4.8v2.061H17.189L10,47.743H26.065V49.8l-19.629,0v-.259L0,52.8V64H32.5V36.364Z"
+            fill={darkSidebar}
+          />
+          <path d="M22.338,31.19l6.087-10.543L22.338,10.1H10.163L4.077,20.647,10.163,31.19Z" fill={createBtn} />
+          <path d="M6.436,49.543,10,47.742H6.436Z" fill={lightIcon} />
+          <path d="M6.436,44.106H17.189l4.078-2.062H6.436Z" fill={lightIcon} />
+          <path d="M6.436,49.8l19.629,0V47.742H10l-3.561,1.8Z" fill={darkIcon} />
+          <path d="M26.065,44.106V42.044h-4.8L17.19,44.106Z" fill={darkIcon} />
+          <rect width="19.629" height="2.062" transform="translate(6.436 53.439)" fill={darkIcon} />
         </svg>
       </a>
-      <span className="theme-option-name"><b>{ name }</b></span>
+      <span className="theme-option-name mt-2"><b>{ name }</b></span>
       { !isPresetTheme && <span className="theme-option-badge badge bg-primary mt-1">Plugin</span> }
     </div>
   );

packages/core/src/interfaces/growi-theme-metadata.ts

@@ -10,9 +10,12 @@ export type GrowiThemeMetadata = {
   name: string,
   manifestKey: string,
   schemeType: GrowiThemeSchemeType,
-  bg: string,
-  topbar: string,
-  sidebar: string,
-  accent: string,
+  lightBg: string,
+  darkBg: string,
+  lightSidebar: string,
+  darkSidebar: string,
+  lightIcon: string,
+  darkIcon: string,
+  createBtn: string,
   isPresetTheme?: boolean,
 };

packages/preset-themes/src/consts/preset-themes.ts

@@ -4,13 +4,13 @@ const { BOTH, LIGHT, DARK } = GrowiThemeSchemeType;
 
 export const PresetThemes = {
   DEFAULT: 'default',
-  ANTARCTIC: 'antarctic',
+  // ANTARCTIC: 'antarctic',
   BLACKBOARD: 'blackboard',
-  CHRISTMAS: 'christmas',
+  // CHRISTMAS: 'christmas',
   FIRE_RED: 'fire-red',
   FUTURE: 'future',
   HALLOWEEN: 'halloween',
-  HUFFLEPUFF: 'hufflepuff',
+  // HUFFLEPUFF: 'hufflepuff',
   ISLAND: 'island',
   JADE_GREEN: 'jade-green',
   KIBELA: 'kibela',
@@ -28,10 +28,13 @@ export const DefaultThemeMetadata: GrowiThemeMetadata = {
   name: PresetThemes.DEFAULT,
   manifestKey: `src/styles/${PresetThemes.DEFAULT}.scss`,
   schemeType: BOTH,
-  bg: '#ffffff',
-  topbar: '#2a2929',
-  sidebar: '#122c55',
-  accent: '#209fd8',
+  lightBg: '#FFFFFF',
+  darkBg: '#1C1A1A',
+  lightSidebar: '#F8F7F7',
+  darkSidebar: '#434240',
+  lightIcon: '#8A8887',
+  darkIcon: '#D1D0CC',
+  createBtn: '#007EB0',
   isPresetTheme: true,
 };
 
@@ -39,39 +42,164 @@ export const PresetThemesMetadatas: GrowiThemeMetadata[] = [
   // support both of light and dark
   DefaultThemeMetadata,
   {
-    name: PresetThemes.MONO_BLUE,     schemeType: BOTH, bg: '#F7FBFD', topbar: '#2a2929', sidebar: '#00587A', accent: '#00587A',
-  }, {
-    name: PresetThemes.HUFFLEPUFF,    schemeType: BOTH, bg: '#EFE2CF', topbar: '#2a2929', sidebar: '#EAAB20', accent: '#993439',
-  }, {
-    name: PresetThemes.FIRE_RED,      schemeType: BOTH, bg: '#FDFDFD', topbar: '#2c2c2c', sidebar: '#BFBFBF', accent: '#EA5532',
+    name: PresetThemes.MONO_BLUE,
+    schemeType: BOTH,
+    lightBg: '#FFFFFF',
+    darkBg: '#16202C',
+    lightSidebar: '#EDFAFD',
+    darkSidebar: '#0A2E53',
+    lightIcon: '#36819C',
+    darkIcon: '#69B0C7',
+    createBtn: '#439CB9',
+  },
+  //  {
+  //   name: PresetThemes.HUFFLEPUFF,
+  //   schemeType: BOTH,
+  //   lightBg: '#FFFEFD',
+  //   darkBg: '#26231E',
+  //   lightSidebar: '#FEEBA5',
+  //   darkSidebar: '#5C4209',
+  //   lightIcon: '#B88512',
+  //   darkIcon: '#EBB845',
+  //   createBtn: '#403C39',
+  // },
+  {
+    name: PresetThemes.FIRE_RED,
+    schemeType: BOTH,
+    lightBg: '#FFFFFF',
+    darkBg: '#120700',
+    lightSidebar: '#FADDD6',
+    darkSidebar: '#5A4F4A',
+    lightIcon: '#94351E',
+    darkIcon: '#EE775B',
+    createBtn: '#EA5532',
   }, {
-    name: PresetThemes.JADE_GREEN,    schemeType: BOTH, bg: '#FDFDFD', topbar: '#2c2c2c', sidebar: '#BFBFBF', accent: '#38B48B',
+    name: PresetThemes.JADE_GREEN,
+    schemeType: BOTH,
+    lightBg: '#FFFFFF',
+    darkBg: '#120700',
+    lightSidebar: '#F1F3F2',
+    darkSidebar: '#4B4E4C',
+    lightIcon: '#3A8F6F',
+    darkIcon: '#5FC2A2',
+    createBtn: '#49B38A',
   }, {
-    name: PresetThemes.CLASSIC,    schemeType: BOTH, bg: '#FDFDFD', topbar: '#E1E9F4', sidebar: '#E1E9F4', accent: '#439FD8',
+    name: PresetThemes.CLASSIC,
+    schemeType: BOTH,
+    lightBg: '#FFFFFF',
+    darkBg: '#151A1F',
+    lightSidebar: '#F0F4FA',
+    darkSidebar: '#29343F',
+    lightIcon: '#53687E',
+    darkIcon: '#869BB1',
+    createBtn: '#3491CB',
   },
   // light only
   {
-    name: PresetThemes.NATURE,        schemeType: LIGHT, bg: '#f9fff3', topbar: '#234136', sidebar: '#118050', accent: '#460039',
-  }, {
-    name: PresetThemes.WOOD,          schemeType: LIGHT, bg: '#fffefb', topbar: '#2a2929', sidebar: '#aaa45f', accent: '#aaa45f',
+    name: PresetThemes.NATURE,
+    schemeType: LIGHT,
+    lightBg: '#FFFFFF',
+    darkBg: '#FAF9F8',
+    lightSidebar: '#EBF9CC',
+    darkSidebar: '#D8F399',
+    lightIcon: '#3F8421',
+    darkIcon: '#1F4210',
+    createBtn: '#4FA529',
   }, {
-    name: PresetThemes.ISLAND,        schemeType: LIGHT, bg: '#cef2ef', topbar: '#2a2929', sidebar: '#0c2a44', accent: 'rgba(183, 226, 219, 1)',
+    name: PresetThemes.WOOD,
+    schemeType: LIGHT,
+    lightBg: '#FFFFF5',
+    darkBg: '#FDFAF0',
+    lightSidebar: '#EAE3D4',
+    darkSidebar: '#DCCBA6',
+    lightIcon: '#86651A',
+    darkIcon: '#43320D',
+    createBtn: '#A77E21',
   }, {
-    name: PresetThemes.CHRISTMAS,     schemeType: LIGHT, bg: '#fffefb', topbar: '#b3000c', sidebar: '#30882c', accent: '#d3c665',
-  }, {
-    name: PresetThemes.ANTARCTIC,     schemeType: LIGHT, bg: '#ffffff', topbar: '#2a2929', sidebar: '#000080', accent: '#fa9913',
-  }, {
-    name: PresetThemes.SPRING,        schemeType: LIGHT, bg: '#ffffff', topbar: '#d3687c', sidebar: '#ffb8c6', accent: '#67a856',
+    name: PresetThemes.ISLAND,
+    schemeType: LIGHT,
+    lightBg: '#FFFFFF',
+    darkBg: '#E8F7FA',
+    lightSidebar: '#F3EEE0',
+    darkSidebar: '#E8DDC0',
+    lightIcon: '#51C2D3',
+    darkIcon: '#204D54',
+    createBtn: '#51C2D3',
+  },
+  //  {
+  //   name: PresetThemes.CHRISTMAS,
+  //   schemeType: LIGHT,
+  //   lightBg: '#212836',
+  //   darkBg: '#323D52',
+  //   lightSidebar: '#2E3E27',
+  //   darkSidebar: '#455D3B',
+  //   lightIcon: '#DC7870',
+  //   darkIcon: '#E7A59F',
+  //   createBtn: '#B90606',
+  // },
+  //  {
+  //   name: PresetThemes.ANTARCTIC,
+  //   schemeType: LIGHT,
+  //   lightBg: '#FAFEFF',
+  //   darkBg: '#E5FAFF',
+  //   lightSidebar: '#EDF4FC',
+  //   darkSidebar: '#DBE9F9',
+  //   lightIcon: '#2631AF',
+  //   darkIcon: '#131857',
+  //   createBtn: '#303DDB',
+  // },
+  {
+    name: PresetThemes.SPRING,
+    schemeType: LIGHT,
+    lightBg: '#FFFFFF',
+    darkBg: '#FFFDF5',
+    lightSidebar: '#FEE7EB',
+    darkSidebar: '#F9CED7',
+    lightIcon: '#D76F7D',
+    darkIcon: '#8A423F',
+    createBtn: '#6ABA55',
   }, {
-    name: PresetThemes.KIBELA,        schemeType: LIGHT, bg: '#f4f5f6', topbar: '#1256a3', sidebar: '#5882fa', accent: '#b5cbf79c',
+    name: PresetThemes.KIBELA,
+    schemeType: LIGHT,
+    lightBg: '#FFFFFF',
+    darkBg: '#F5F5F5',
+    lightSidebar: '#FFFFFF',
+    darkSidebar: '#F5F5F5',
+    lightIcon: '#737373',
+    darkIcon: '#525252',
+    createBtn: '#3080C0',
   },
   // dark only
   {
-    name: PresetThemes.FUTURE,        schemeType: DARK, bg: '#16282d', topbar: '#2a2929', sidebar: '#00b5b7', accent: '#00b5b7',
+    name: PresetThemes.FUTURE,
+    schemeType: DARK,
+    lightBg: '#092627',
+    darkBg: '#1F4C4D',
+    lightSidebar: '#2a2929',
+    darkSidebar: '#27413D',
+    lightIcon: '#3F999B',
+    darkIcon: '#99E5E6',
+    createBtn: '#03A2A8',
   }, {
-    name: PresetThemes.HALLOWEEN,     schemeType: DARK, bg: '#030003', topbar: '#aa4a04', sidebar: '#162b33', accent: '#e9af2b',
+    name: PresetThemes.HALLOWEEN,
+    schemeType: DARK,
+    lightBg: '#240E3E',
+    darkBg: '#2F1155',
+    lightSidebar: '#2F1155',
+    darkSidebar: '#3B136C',
+    lightIcon: '#8C3C03',
+    darkIcon: '#DDB69B',
+    createBtn: '#AA4A04',
   }, {
-    name: PresetThemes.BLACKBOARD,    schemeType: DARK, bg: '#223729', topbar: '#563E23', sidebar: '#7B5932', accent: '#DA8506',
+    name: PresetThemes.BLACKBOARD,
+    schemeType: DARK,
+    lightBg: '#223323',
+    darkBg: '#213E23',
+    lightSidebar: '#1B431C',
+    darkSidebar: '#29652B',
+    lightIcon: '#C89D3B',
+    darkIcon: '#E3CE9D',
+    createBtn: '#BA840A',
   },
 ]
   // fill in missing information

packages/preset-themes/src/interfaces/growi-theme-metadata.ts

@@ -9,9 +9,12 @@ export type GrowiThemeMetadata = {
   name: string,
   manifestKey: string,
   schemeType: GrowiThemeSchemeType,
-  bg: string,
-  topbar: string,
-  sidebar: string,
-  accent: string,
+  lightBg: string,
+  darkBg: string,
+  lightSidebar: string,
+  darkSidebar: string,
+  lightIcon: string,
+  darkIcon: string,
+  createBtn: string,
   isPresetTheme?: boolean,
 };