Replace accent with createBtn

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

@@ -15,7 +15,7 @@ export const ThemeColorBox = (props: Props): JSX.Element => {
     isSelected, metadata, onSelected,
   } = props;
   const {
-    name, bg, topbar, sidebar, accent, isPresetTheme,
+    name, bg, topbar, sidebar, createBtn, isPresetTheme,
   } = metadata;
 
   return (
@@ -38,7 +38,7 @@ export const ThemeColorBox = (props: Props): JSX.Element => {
             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="#434240"
           />
-          <path id="btn" d="M22.338,31.19l6.087-10.543L22.338,10.1H10.163L4.077,20.647,10.163,31.19Z" fill={accent} />
+          <path id="btn" d="M22.338,31.19l6.087-10.543L22.338,10.1H10.163L4.077,20.647,10.163,31.19Z" fill={createBtn} />
           <g id="icon-d">
             <path id="icon-3" d="M6.436,49.8l19.629,0V47.742H10l-3.561,1.8Z" fill="#d1d0cc" />
             <path id="icon-2" d="M26.065,44.106V42.044h-4.8L17.19,44.106Z" fill="#d1d0cc" />

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

@@ -13,6 +13,6 @@ export type GrowiThemeMetadata = {
   bg: string,
   topbar: string,
   sidebar: string,
-  accent: string,
+  createBtn: string,
   isPresetTheme?: boolean,
 };

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

@@ -31,7 +31,7 @@ export const DefaultThemeMetadata: GrowiThemeMetadata = {
   bg: '#ffffff',
   topbar: '#2a2929',
   sidebar: '#122c55',
-  accent: '#209fd8',
+  createBtn: '#007EB0',
   isPresetTheme: true,
 };
 
@@ -39,39 +39,39 @@ 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.MONO_BLUE,     schemeType: BOTH, bg: '#F7FBFD', topbar: '#2a2929', sidebar: '#00587A', createBtn: '#439CB9',
   }, {
-    name: PresetThemes.HUFFLEPUFF,    schemeType: BOTH, bg: '#EFE2CF', topbar: '#2a2929', sidebar: '#EAAB20', accent: '#993439',
+    name: PresetThemes.HUFFLEPUFF,    schemeType: BOTH, bg: '#EFE2CF', topbar: '#2a2929', sidebar: '#EAAB20', createBtn: '#403C39',
   }, {
-    name: PresetThemes.FIRE_RED,      schemeType: BOTH, bg: '#FDFDFD', topbar: '#2c2c2c', sidebar: '#BFBFBF', accent: '#EA5532',
+    name: PresetThemes.FIRE_RED,      schemeType: BOTH, bg: '#FDFDFD', topbar: '#2c2c2c', sidebar: '#BFBFBF', createBtn: '#EA5532',
   }, {
-    name: PresetThemes.JADE_GREEN,    schemeType: BOTH, bg: '#FDFDFD', topbar: '#2c2c2c', sidebar: '#BFBFBF', accent: '#38B48B',
+    name: PresetThemes.JADE_GREEN,    schemeType: BOTH, bg: '#FDFDFD', topbar: '#2c2c2c', sidebar: '#BFBFBF', createBtn: '#49B38A',
   }, {
-    name: PresetThemes.CLASSIC,    schemeType: BOTH, bg: '#FDFDFD', topbar: '#E1E9F4', sidebar: '#E1E9F4', accent: '#439FD8',
+    name: PresetThemes.CLASSIC,    schemeType: BOTH, bg: '#FDFDFD', topbar: '#E1E9F4', sidebar: '#E1E9F4', createBtn: '#3491CB',
   },
   // light only
   {
-    name: PresetThemes.NATURE,        schemeType: LIGHT, bg: '#f9fff3', topbar: '#234136', sidebar: '#118050', accent: '#460039',
+    name: PresetThemes.NATURE,        schemeType: LIGHT, bg: '#f9fff3', topbar: '#234136', sidebar: '#118050', createBtn: '#4FA529',
   }, {
-    name: PresetThemes.WOOD,          schemeType: LIGHT, bg: '#fffefb', topbar: '#2a2929', sidebar: '#aaa45f', accent: '#aaa45f',
+    name: PresetThemes.WOOD,          schemeType: LIGHT, bg: '#fffefb', topbar: '#2a2929', sidebar: '#aaa45f', createBtn: '#A77E21',
   }, {
-    name: PresetThemes.ISLAND,        schemeType: LIGHT, bg: '#cef2ef', topbar: '#2a2929', sidebar: '#0c2a44', accent: 'rgba(183, 226, 219, 1)',
+    name: PresetThemes.ISLAND,        schemeType: LIGHT, bg: '#cef2ef', topbar: '#2a2929', sidebar: '#0c2a44', createBtn: '#51C2D3',
   }, {
-    name: PresetThemes.CHRISTMAS,     schemeType: LIGHT, bg: '#fffefb', topbar: '#b3000c', sidebar: '#30882c', accent: '#d3c665',
+    name: PresetThemes.CHRISTMAS,     schemeType: LIGHT, bg: '#fffefb', topbar: '#b3000c', sidebar: '#30882c', createBtn: '#B90606',
   }, {
-    name: PresetThemes.ANTARCTIC,     schemeType: LIGHT, bg: '#ffffff', topbar: '#2a2929', sidebar: '#000080', accent: '#fa9913',
+    name: PresetThemes.ANTARCTIC,     schemeType: LIGHT, bg: '#ffffff', topbar: '#2a2929', sidebar: '#000080', createBtn: '#303DDB',
   }, {
-    name: PresetThemes.SPRING,        schemeType: LIGHT, bg: '#ffffff', topbar: '#d3687c', sidebar: '#ffb8c6', accent: '#67a856',
+    name: PresetThemes.SPRING,        schemeType: LIGHT, bg: '#ffffff', topbar: '#d3687c', sidebar: '#ffb8c6', createBtn: '#6ABA55',
   }, {
-    name: PresetThemes.KIBELA,        schemeType: LIGHT, bg: '#f4f5f6', topbar: '#1256a3', sidebar: '#5882fa', accent: '#b5cbf79c',
+    name: PresetThemes.KIBELA,        schemeType: LIGHT, bg: '#f4f5f6', topbar: '#1256a3', sidebar: '#5882fa', createBtn: '#3080C0',
   },
   // dark only
   {
-    name: PresetThemes.FUTURE,        schemeType: DARK, bg: '#16282d', topbar: '#2a2929', sidebar: '#00b5b7', accent: '#00b5b7',
+    name: PresetThemes.FUTURE,        schemeType: DARK, bg: '#16282d', topbar: '#2a2929', sidebar: '#00b5b7', createBtn: '#03A2A8',
   }, {
-    name: PresetThemes.HALLOWEEN,     schemeType: DARK, bg: '#030003', topbar: '#aa4a04', sidebar: '#162b33', accent: '#e9af2b',
+    name: PresetThemes.HALLOWEEN,     schemeType: DARK, bg: '#030003', topbar: '#aa4a04', sidebar: '#162b33', createBtn: '#AA4A04',
   }, {
-    name: PresetThemes.BLACKBOARD,    schemeType: DARK, bg: '#223729', topbar: '#563E23', sidebar: '#7B5932', accent: '#DA8506',
+    name: PresetThemes.BLACKBOARD,    schemeType: DARK, bg: '#223729', topbar: '#563E23', sidebar: '#7B5932', createBtn: '#BA840A',
   },
 ]
   // fill in missing information

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

@@ -12,6 +12,6 @@ export type GrowiThemeMetadata = {
   bg: string,
   topbar: string,
   sidebar: string,
-  accent: string,
+  createBtn: string,
   isPresetTheme?: boolean,
 };