Merge branch 'dev/7.0.x' into feat/137722-refactor-side-contents-design

apps/app/package.json

@@ -68,6 +68,7 @@
     "@elastic/elasticsearch8": "npm:@elastic/elasticsearch@^8.7.0",
     "@godaddy/terminus": "^4.9.0",
     "@google-cloud/storage": "^5.8.5",
+    "@growi/custom-icons": "link:../../packages/custom-icons",
     "@growi/core": "link:../../packages/core",
     "@growi/pluginkit": "link:../../packages/pluginkit",
     "@growi/preset-templates": "link:../../packages/preset-templates",
@@ -174,6 +175,7 @@
     "react-markdown": "^8.0.7",
     "react-multiline-clamp": "^2.0.0",
     "react-scroll": "^1.8.7",
+    "react-stickynode": "^4.1.0",
     "react-syntax-highlighter": "^15.5.0",
     "react-toastify": "^9.1.3",
     "react-use-ripple": "^1.5.2",
@@ -259,7 +261,6 @@
     "react-copy-to-clipboard": "^5.0.1",
     "react-dropzone": "^11.2.4",
     "react-hotkeys": "^2.0.0",
-    "react-stickynode": "^4.1.0",
     "rehype-rewrite": "^3.0.6",
     "replacestream": "^4.0.3",
     "sass": "^1.53.0",

apps/app/src/components/FontFamily/GlobalFonts.tsx

@@ -1,5 +1,6 @@
 import { memo } from 'react';
 
+import { useGrowiCustomIcon } from './use-growi-custom-icons';
 import { useLatoFontFamily } from './use-lato';
 import { useMaterialSymbolsOutlined } from './use-material-symbols-outlined';
 import { useSourceHanCodeJP } from './use-source-han-code-jp';
@@ -8,16 +9,17 @@ import { useSourceHanCodeJP } from './use-source-han-code-jp';
  * Define prefixed by '--grw-font-family'
  */
 export const GlobalFonts = memo((): JSX.Element => {
-
   const latoFontFamily = useLatoFontFamily();
   const sourceHanCodeJPFontFamily = useSourceHanCodeJP();
   const materialSymbolsOutlinedFontFamily = useMaterialSymbolsOutlined();
+  const customSvgFontFamily = useGrowiCustomIcon();
 
   return (
     <>
       {latoFontFamily}
       {sourceHanCodeJPFontFamily}
       {materialSymbolsOutlinedFontFamily}
+      {customSvgFontFamily}
     </>
   );
 });

apps/app/src/components/FontFamily/use-growi-custom-icons.tsx

@@ -0,0 +1,17 @@
+import localFont from 'next/font/local';
+
+import { DefineStyle } from './types';
+
+const growiCustomIconFont = localFont({
+  src: '../../../../../packages/custom-icons/dist/growi-custom-icons.woff2',
+});
+
+export const useGrowiCustomIcon: DefineStyle = () => (
+  <style jsx global>
+    {`
+      :root {
+        --grw-font-family-custom-icon: ${growiCustomIconFont.style.fontFamily};
+      }
+    `}
+  </style>
+);

apps/app/src/components/Me/SidebarCollapsedIcon.jsx

@@ -1,25 +0,0 @@
-import React from 'react';
-
-const SidebarCollapsedIcon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 23 23"
-  >
-    <rect width="23" height="23" fillOpacity="0" />
-    <path d="M20.9,3.9c0.3,0,0.6,0.3,0.6,0.6v13.9c0,0.3-0.3,0.6-0.6,0.6H2.1c-0.3,0-0.6-0.3-0.6-0.6V4.5c0-0.3,0.3-0.6,0.6-0.6H20.9
-      M20.9,2.4H2.1C1,2.4,0,3.4,0,4.5c0,0,0,0,0,0v13.9c0,1.2,1,2.1,2.1,2.1c0,0,0,0,0,0h18.7c1.2,0,2.1-0.9,2.1-2.1c0,0,0,0,0,0V4.5
-      C23,3.4,22,2.4,20.9,2.4C20.9,2.4,20.9,2.4,20.9,2.4z"
-    />
-    <rect x="7.5" y="3.9" width="1.2" height="0.8" />
-    <rect x="7.5" y="15.3" width="1.2" height="1.5" />
-    <rect x="7.5" y="12.3" width="1.2" height="1.5" />
-    <rect x="7.5" y="9.2" width="1.2" height="1.6" />
-    <rect x="7.5" y="6.1" width="1.2" height="1.6" />
-    <rect x="7.5" y="18.4" width="1.2" height="0.8" />
-    <path d="M15.1,14.9c-0.2,0-0.3-0.1-0.4-0.2l-2.8-2.8c-0.2-0.2-0.2-0.6,0-0.8l2.8-2.8c0.2-0.2,0.6-0.2,0.9,0s0.2,0.6,0,0.9l-2.4,2.4
-      l2.4,2.4c0.2,0.2,0.2,0.6,0,0.9C15.4,14.8,15.3,14.9,15.1,14.9z"
-    />
-  </svg>
-);
-
-export default SidebarCollapsedIcon;

apps/app/src/components/Me/SidebarDockIcon.jsx

@@ -1,20 +0,0 @@
-import React from 'react';
-
-const SidebarDockIcon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 23 23"
-  >
-    <rect width="23" height="23" fillOpacity="0" />
-    <path
-      d="M20.86,3.92a.64.64,0,0,1,.64.63v13.9a.64.64,0,0,1-.64.63H2.14a.64.64,0,0,
-      1-.64-.63V4.55a.64.64,0,0,1,.64-.63H20.86m0-1.5H2.14A2.13,2.13,0,0,0,0,4.55v13.9a2.13,
-      2.13,0,0,0,2.14,2.13H20.86A2.13,2.13,0,0,0,23,18.45V4.55a2.13,2.13,0,0,0-2.14-2.13Z"
-    />
-    <rect x="7.49" y="3.05" width="1.2" height="16.91" />
-  </svg>
-
-);
-
-
-export default SidebarDockIcon;

apps/app/src/components/Me/UISettings.module.scss

@@ -1,6 +1,8 @@
 @use '@growi/core/scss/bootstrap/init' as bs;
 
 .grw-sidebar-mode-icon {
+  display: flex;
+  align-items: center;
   width: 20px;
   height: 20px;
   color: bs.$secondary;

apps/app/src/components/Me/UISettings.tsx

@@ -7,9 +7,6 @@ import { updateUserUISettings } from '~/client/services/user-ui-settings';
 import { toastError, toastSuccess } from '~/client/util/toastr';
 import { useCollapsedContentsOpened, usePreferCollapsedMode, useSidebarMode } from '~/stores/ui';
 
-import SidebarCollapsedIcon from './SidebarCollapsedIcon';
-import SidebarDockIcon from './SidebarDockIcon';
-
 import styles from './UISettings.module.scss';
 
 const IconWithTooltip = ({
@@ -60,9 +57,9 @@ export const UISettings = (): JSX.Element => {
               label="Collapsed"
               additionalClasses={styles['grw-sidebar-mode-icon']}
             >
-              <SidebarCollapsedIcon />
+              <span className="growi-custom-icons">sidebar-collapsed</span>
             </IconWithTooltip>
-            <div className="form-check form-switch ms-2">
+            <div className="form-check form-switch ms-1">
 
               <input
                 id="swSidebarMode"
@@ -74,7 +71,7 @@ export const UISettings = (): JSX.Element => {
               <label className="form-label form-check-label" htmlFor="swSidebarMode"></label>
             </div>
             <IconWithTooltip id="iwt-sidebar-dock" label="Dock" additionalClasses={styles['grw-sidebar-mode-icon']}>
-              <SidebarDockIcon />
+              <span className="growi-custom-icons">sidebar-dock</span>
             </IconWithTooltip>
           </div>
           <div className="ms-2">

apps/app/src/server/service/mail.ts

@@ -199,6 +199,8 @@ class MailService implements S2sMessageHandlable {
     const templateVars = config.vars || {};
     const output = await renderFilePromisified(
       config.template,
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
       templateVars,
     );
 

apps/app/src/styles/_fonts.scss

@@ -21,3 +21,11 @@
     font-variation-settings: 'FILL' 1;
   }
 }
+
+.growi-custom-icons {
+  font-family: var(--grw-font-family-custom-icon);
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+}

packages/custom-icons/.gitignore

@@ -0,0 +1 @@
+/dist

packages/custom-icons/.svgtofontrc

@@ -0,0 +1,7 @@
+{
+  "fontName": "growi-custom-icons",
+  "css": false,
+  "outSVGReact": false,
+  "useNameAsUnicode": true,
+  "className": "growi-custom-icons"
+}

packages/custom-icons/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@growi/custom-icons",
+  "version": "7.0.0-RC.0",
+  "license": "MIT",
+  "scripts": {
+    "build": "svgtofont --sources ./svg --output ./dist",
+    "dev": "svgtofont --sources ./svg --output ./dist"
+  },
+  "devDependencies": {
+    "svgtofont": "^4.1.1"
+  }
+}

packages/custom-icons/svg/sidebar-collapsed.svg

@@ -0,0 +1,19 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 23 23"
+>
+  <rect width="23" height="23" fill="none" />
+  <path d="M20.9,3.9c0.3,0,0.6,0.3,0.6,0.6v13.9c0,0.3-0.3,0.6-0.6,0.6H2.1c-0.3,0-0.6-0.3-0.6-0.6V4.5c0-0.3,0.3-0.6,0.6-0.6H20.9
+    M20.9,2.4H2.1C1,2.4,0,3.4,0,4.5c0,0,0,0,0,0v13.9c0,1.2,1,2.1,2.1,2.1c0,0,0,0,0,0h18.7c1.2,0,2.1-0.9,2.1-2.1c0,0,0,0,0,0V4.5
+    C23,3.4,22,2.4,20.9,2.4C20.9,2.4,20.9,2.4,20.9,2.4z"
+  />
+  <rect x="7.5" y="3.9" width="1.2" height="0.8" />
+  <rect x="7.5" y="15.3" width="1.2" height="1.5" />
+  <rect x="7.5" y="12.3" width="1.2" height="1.5" />
+  <rect x="7.5" y="9.2" width="1.2" height="1.6" />
+  <rect x="7.5" y="6.1" width="1.2" height="1.6" />
+  <rect x="7.5" y="18.4" width="1.2" height="0.8" />
+  <path d="M15.1,14.9c-0.2,0-0.3-0.1-0.4-0.2l-2.8-2.8c-0.2-0.2-0.2-0.6,0-0.8l2.8-2.8c0.2-0.2,0.6-0.2,0.9,0s0.2,0.6,0,0.9l-2.4,2.4
+    l2.4,2.4c0.2,0.2,0.2,0.6,0,0.9C15.4,14.8,15.3,14.9,15.1,14.9z"
+  />
+</svg>

packages/custom-icons/svg/sidebar-dock.svg

@@ -0,0 +1,12 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 23 23"
+>
+  <rect width="23" height="23" fill="none" />
+  <path
+    d="M20.86,3.92a.64.64,0,0,1,.64.63v13.9a.64.64,0,0,1-.64.63H2.14a.64.64,0,0,
+    1-.64-.63V4.55a.64.64,0,0,1,.64-.63H20.86m0-1.5H2.14A2.13,2.13,0,0,0,0,4.55v13.9a2.13,
+    2.13,0,0,0,2.14,2.13H20.86A2.13,2.13,0,0,0,23,18.45V4.55a2.13,2.13,0,0,0-2.14-2.13Z"
+  />
+  <rect x="7.49" y="3.05" width="1.2" height="16.91" />
+</svg>

packages/custom-icons/turbo.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://turbo.build/schema.json",
+  "extends": ["//"],
+  "pipeline": {
+    "build": {
+      "outputs": ["dist/**"],
+      "inputs": ["svg/**"],
+      "outputMode": "new-only"
+    },
+    "dev": {
+      "outputs": ["dist/**"],
+      "inputs": ["svg/**"],
+      "outputMode": "new-only"
+    }
+  }
+}

packages/preset-themes/src/styles/jade-green.scss

@@ -1,257 +1,329 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
-
-@use './variables' as var;
-@use './theme/mixins/page-editor-mode-manager';
-@use './theme/hsl-functions' as hsl;
+$min-contrast-ratio: 2;
 
 :root[data-bs-theme='light'] {
-  // Theme colors
-  --primary: hsl(var(--primary-hs),var(--primary-l)) !important;
-  --primary-hs: 160,53%;
-  --primary-l: 46%;
-  --secondary-hs: 208,7%;
-  --secondary-l: 46%;
-  --accentcolor: hsl(var(--accentcolor-hs),var(--accentcolor-l));
-  --accentcolor-hs: 0,0%;
-  --accentcolor-l: 75%;
-
-  // Background colors
-  --bgcolor-global: hsl(var(--bgcolor-global-hs),var(--bgcolor-global-l));
-  --bgcolor-global-hs: 0,0%;
-  --bgcolor-global-l: 100%;
-  --bgcolor-inline-code: #{bs.$gray-100}; //optional
-  --bgcolor-card: var(--accentcolor);
-  --bgcolor-blinked-section: #{hsl.alpha(var(--primary),10%)};
-  //--bgcolor-keyword-highlighted: #{$grw-marker-yellow};
-
-  // Font colors
-  --color-global: hsl(var(--color-global-hs),var(--color-global-l));
-  --color-global-hs: 0,0%;
-  --color-global-l: 17%;
-  --color-reversal: #{bs.$gray-100};
-  --color-link: var(--primary);
-  --color-link-hs: var(--primary-hs);
-  --color-link-l: var(--primary-l);
-  --color-link-hover: #{hsl.lighten(var(--primary), 12%)};
-  --color-link-wiki: var(--primary);
-  --color-link-wiki-hs: var(--primary-hs);
-  --color-link-wiki-l: var(--primary-l);
-  --color-link-wiki-hover: #{hsl.lighten(var(--primary), 12%)};
-  --color-link-nabvar: var(--color-reversal);
-  --color-inline-code: #c7254e; // optional
-  --color-search: var(--color-global);
-
-  // List Group colors
-  // --color-list: var(--color-global);
-  --bgcolor-list: transparent;
-  --color-list-hover: var(--color-global);
-  --bgcolor-list-hover: #{hsl.darken(var(--bgcolor-global),3%)};
-  // --color-list-active: var(--color-reversal);
-  // --bgcolor-list-active: var(--primary);
-
-  // Navbar
-  --bgcolor-navbar: var(--color-global);
-  --bgcolor-navbar-hs: var(--color-global-hs);
-  --bgcolor-navbar-l: var(--color-global-l);
-  --bgcolor-search-top-dropdown: var(--primary);
-  --bgcolor-search-top-dropdown-hs: var(--primary-hs);
-  --bgcolor-search-top-dropdown-l: var(--primary-l);
-  --border-image-navbar: linear-gradient(to right, var(--primary) 0%, #{hsl.darken(var(--primary), 5%)} 100%);
-
-
-  // Logo colors
-  --bgcolor-logo: var(--bgcolor-global);
-  --fillcolor-logo-mark: var(--bgcolor-global);
-
-  // Sidebar
-  --bgcolor-sidebar: var(--accentcolor);
-  --bgcolor-sidebar-hs: var(--accentcolor-hs);
-  --bgcolor-sidebar-l: var(--accentcolor-l);
-  // --bgcolor-sidebar-nav-item-active: rgba(#, 0.37); // optional
-  --text-shadow-sidebar-nav-item-active: 0px 0px 10px #ffffff; // optional
-
-  // Sidebar resize button
-  --color-resize-button: #ffffff;
-  --bgcolor-resize-button: var(--primary);
-  --bgcolor-sidebar-context-hs: var(--primary-hs);
-  --bgcolor-sidebar-context-l: var(--primary-l);
-  --color-resize-button-hover: var(--color-reversal);
-  --bgcolor-resize-button-hover: #{hsl.lighten(var(--primary), 5%)};
-
-  // Sidebar contents
-  --color-sidebar-context: var(--color-global);
-  --color-sidebar-context-hs: var(--color-global-hs);
-  --color-sidebar-context-l: var(--color-global-l);
-  --bgcolor-sidebar-context: hsl(var(--bgcolor-sidebar-context-hs),var(--bgcolor-sidebar-context-l));
-  --bgcolor-sidebar-context-hs: 0,0%;
-  --bgcolor-sidebar-context-l: 93%;
-
-  // Sidebar list group
-  // --bgcolor-sidebar-list-group: #; // optional
-
-  // Subnavigation
-  --bgcolor-subnav: hsl(var(--bgcolor-subnav-hs),var(--bgcolor-subnav-l));
-  --bgcolor-subnav-hs: var(--bgcolor-global-hs);
-  --bgcolor-subnav-l: calc(var(--bgcolor-global-l) - 3%);
-
-  // Icon colors
-  --color-editor-icons: var(--color-global);
-
-  // Border colors
-  --border-color-theme: var(--primary);
-  --bordercolor-inline-code: #ccc8c8; // optional
-
-  // admin theme box
-  --color-theme-color-box: var(--primary);
-
-  // Navs {
-  .nav-tabs {
-    border-bottom: var(--primary) 1px solid;
-    .nav-link {
-      &:hover {
-        border-color: #{hsl.lighten(var(--primary), 10%)};
-        border-bottom: none;
-      }
-      &.active {
-        background-color: transparent;
-      }
-    }
-  }
-
-  // Button
-  .btn-group.grw-page-editor-mode-manager {
-    .btn.btn-outline-primary {
-      @include page-editor-mode-manager.btn-page-editor-mode-manager(#ffffff, var(--primary), var(--primary), #{hsl.lighten(var(--primary), 20%)});
-    }
-  }
+  @import '@growi/core/scss/bootstrap/init-stage-1';
+  @import '@growi/core/scss/bootstrap/theming/variables';
+  @import '@growi/core/scss/bootstrap/theming/utils/color-palette';
+
+  $primary: #49B38A;
+  $highlight: #BBC3BF;
+
+  @include generate-color-palette('primary', $primary, black, white);
+  @include generate-color-palette('highlight', $highlight, black, white);
+
+  $body-color:                $gray-800;
+  $body-bg:                   white;
+
+  $body-secondary-color:      rgba($body-color, .75);
+  $body-secondary-bg:         $gray-200;
+
+  $body-tertiary-color:       rgba($body-color, .5);
+  $body-tertiary-bg:          $gray-100;
+
+  $border-color:              $gray-300;
+
+  $link-color:                $gray-800;
+
+  @import 'bootstrap/scss/variables';
+  @import 'bootstrap/scss/variables-dark';
+
+  @import '@growi/core/scss/bootstrap/init-stage-2';
+
+  @import '@growi/core/scss/bootstrap/theming/apply-light';
+
+  --grw-wiki-link-color-rgb: var(--grw-primary-700-rgb);
+  --grw-wiki-link-hover-color-rgb: var(--grw-primary-800-rgb);
 }
 
 :root[data-bs-theme='dark'] {
-  // Theme colors
-  --primary: hsl(var(--primary-hs),var(--primary-l)) !important;
-  --primary-hs: 160,53%;
-  --primary-l: 46%;
-  --secondary: hsl(var(--secondary-hs),var(--secondary-l)) !important;
-  --secondary-hs: 208,7%;
-  --secondary-l: 46%;
-  --accentcolor: hsl(var(--accentcolor-hs),var(--accentcolor-l));
-  --accentcolor-hs: 0,0%;
-  --accentcolor-l: 13%;
-
-  // Background colors
-  --bgcolor-global: hsl(var(--bgcolor-global-hs),var(--bgcolor-global-l));
-  --bgcolor-global-hs: 0,0%;
-  --bgcolor-global-l: 20%;
-  --bgcolor-inline-code: #{bs.$gray-100}; //optional
-  --bgcolor-card: #{hsl.darken(var(--bgcolor-global), 5%)};
-  --bgcolor-blinked-section: #{hsl.alpha(var(--primary),50%)};
-  --bgcolor-keyword-highlighted: #{darken(var.$grw-marker-red, 30%)};
-
-  // Font colors
-  --color-global: hsl(var(--color-global-hs),var(--color-global-l));
-  --color-global-hs: 0,0%;
-  --color-global-l: 100%;
-  --color-reversal: #{bs.$gray-100};
-  --color-link: var(--primary);
-  --color-link-hs: var(--primary-hs);
-  --color-link-l: var(--primary-l);
-  --color-link-hover: #{hsl.lighten(var(--color-link),12%)};
-  --color-link-wiki: var(--primary);
-  --color-link-wiki-hs: var(--primary-hs);
-  --color-link-wiki-l: var(--primary-l);
-  --color-link-wiki-hover: #{hsl.lighten(var(--color-link),12%)};
-  --color-link-nabvar: var(--color-reversal);
-  --color-inline-code: #c7254e; // optional
-  --color-search: #a7a7a7;
-
-  // List Group colors
-  // --color-list: var(--color-global);
-  --bgcolor-list: transparent;
-  --color-list-hover: var(--accentcolor);
-  // --bgcolor-list-hover: #{hsl.darken(var(--bgcolor-global),3%)};// optional
-  // --color-list-active: white ; // optional
-  // --bgcolor-list-active: #{hsl.lighten(var(--bgcolor-global),3%)}; // optional
-
-  // Navbar
-  --bgcolor-navbar: hsl(var(--bgcolor-navbar-hs),var(--bgcolor-navbar-l));
-  --bgcolor-navbar-hs: 0,0%;
-  --bgcolor-navbar-l: 17%;
-  --bgcolor-search-top-dropdown: var(--primary);
-  --bgcolor-search-top-dropdown-hs: var(--primary-hs);
-  --bgcolor-search-top-dropdown-l: var(--primary-l);
-  --border-image-navbar: linear-gradient(to right, var(--primary) 0%, #{hsl.darken(var(--primary), 5%)} 100%);
-
-  // Logo colors
-  --bgcolor-logo: var(--color-global);
-  --fillcolor-logo-mark: var(--color-global);
-  // --fillcolor-logo-mark: #4e5a60;
-
-  // Sidebar
-  --bgcolor-sidebar: var(--accentcolor);
-  --bgcolor-sidebar-hs: var(--accentcolor-hs);
-  --bgcolor-sidebar-l: var(--accentcolor-l);
-  // --bgcolor-sidebar-nav-item-active: rgba(#, 0.3); // optional
-  --text-shadow-sidebar-nav-item-active: 0px 0px 10px var(--primary); // optional
-
-  // Sidebar resize button
-  --color-resize-button: var(--color-global);
-  --bgcolor-resize-button: var(--primary);
-  --bgcolor-resize-button-hs: var(--primary-hs);
-  --bgcolor-resize-button-l: var(--primary-l);
-  --color-resize-button-hover: var(--color-global);
-  --bgcolor-resize-button-hover: #{hsl.darken(var(--primary), 5%)};
-
-  // Sidebar contents
-  --color-sidebar-context: var(--color-global);
-  --color-sidebar-context-hs: var(--color-global-hs);
-  --color-sidebar-context-l: var(--color-global-l);
-  --bgcolor-sidebar-context: hsl(var(--bgcolor-sidebar-context-hs),var(--bgcolor-sidebar-context-l));
-  --bgcolor-sidebar-context-hs: 0,2%;
-  --bgcolor-sidebar-context-l: 25%;
-
-  // Sidebar list group
-  // --bgcolor-sidebar-list-group: #; // optional
-
-  // Subnavigation
-  --bgcolor-subnav: hsl(var(--bgcolor-subnav-hs),var(--bgcolor-subnav-l));
-  --bgcolor-subnav-hs: var(--bgcolor-global-hs);
-  --bgcolor-subnav-l: calc(var(--bgcolor-global-l) - 3%);
-
-  // Icon colors
-  --color-editor-icons: var(--color-global);
-
-  // Border colors
-  --border-color-theme: var(--primary);
-  --bordercolor-inline-code: #4d4d4d; // optional
-
-  // admin theme box
-  --color-theme-color-box: var(--primary);
-
-  // Navs
-  .nav-tabs {
-    border-bottom: var(--primary) 1px solid;
-    .nav-link {
-      &:hover {
-        border-color: #{hsl.lighten(var(--primary), 10%)};
-        border-bottom: none;
-      }
-      &.active {
-        color: var(--primary);
-        background-color: transparent;
-        border-color: var(--primary);
-      }
-    }
-  }
-
-  // Table
-  .table {
-    color: white;
-  }
-
-  // Button
-  .btn-group.grw-page-editor-mode-manager {
-    .btn.btn-outline-primary {
-      @include page-editor-mode-manager.btn-page-editor-mode-manager(#ffffff, var(--primary), var(--primary), #{hsl.darken(var(--primary), 20%)});
-    }
-  }
+  @import '@growi/core/scss/bootstrap/init-stage-1';
+  @import '@growi/core/scss/bootstrap/theming/variables';
+  @import '@growi/core/scss/bootstrap/theming/utils/color-palette';
+
+  $primary: #49B38A;
+  $highlight: #BBC3BF;
+
+  @include generate-color-palette('primary', $primary, black, white);
+  @include generate-color-palette('highlight', $highlight, black, white);
+
+  $body-color-dark:                   mix(#BBC3BF, white, 60%);
+  $body-bg-dark:                      $gray-900;
+
+  $body-secondary-color-dark:         rgba($body-color-dark, .75);
+  $body-secondary-bg-dark:            $gray-800;
+
+  $body-tertiary-color-dark:          rgba($body-color-dark, .5);
+  $body-tertiary-bg-dark:             mix($gray-800, $gray-900, 50%);
+
+  $border-color-dark:                 $gray-700;
+
+  $link-color-dark:                   $gray-400;
+
+  @import 'bootstrap/scss/variables';
+  @import 'bootstrap/scss/variables-dark';
+
+  @import '@growi/core/scss/bootstrap/init-stage-2';
+
+  @import '@growi/core/scss/bootstrap/theming/apply-dark';
+
+  --grw-wiki-link-color-rgb: var(--grw-primary-500-rgb);
+  --grw-wiki-link-hover-color-rgb: var(--grw-primary-400-rgb);
 }
+
+// @use '@growi/core/scss/bootstrap/init' as bs;
+
+// @use './variables' as var;
+// @use './theme/mixins/page-editor-mode-manager';
+// @use './theme/hsl-functions' as hsl;
+
+// :root[data-bs-theme='light'] {
+//   // Theme colors
+//   --primary: hsl(var(--primary-hs),var(--primary-l)) !important;
+//   --primary-hs: 160,53%;
+//   --primary-l: 46%;
+//   --secondary-hs: 208,7%;
+//   --secondary-l: 46%;
+//   --accentcolor: hsl(var(--accentcolor-hs),var(--accentcolor-l));
+//   --accentcolor-hs: 0,0%;
+//   --accentcolor-l: 75%;
+
+//   // Background colors
+//   --bgcolor-global: hsl(var(--bgcolor-global-hs),var(--bgcolor-global-l));
+//   --bgcolor-global-hs: 0,0%;
+//   --bgcolor-global-l: 100%;
+//   --bgcolor-inline-code: #{bs.$gray-100}; //optional
+//   --bgcolor-card: var(--accentcolor);
+//   --bgcolor-blinked-section: #{hsl.alpha(var(--primary),10%)};
+//   //--bgcolor-keyword-highlighted: #{$grw-marker-yellow};
+
+//   // Font colors
+//   --color-global: hsl(var(--color-global-hs),var(--color-global-l));
+//   --color-global-hs: 0,0%;
+//   --color-global-l: 17%;
+//   --color-reversal: #{bs.$gray-100};
+//   --color-link: var(--primary);
+//   --color-link-hs: var(--primary-hs);
+//   --color-link-l: var(--primary-l);
+//   --color-link-hover: #{hsl.lighten(var(--primary), 12%)};
+//   --color-link-wiki: var(--primary);
+//   --color-link-wiki-hs: var(--primary-hs);
+//   --color-link-wiki-l: var(--primary-l);
+//   --color-link-wiki-hover: #{hsl.lighten(var(--primary), 12%)};
+//   --color-link-nabvar: var(--color-reversal);
+//   --color-inline-code: #c7254e; // optional
+//   --color-search: var(--color-global);
+
+//   // List Group colors
+//   // --color-list: var(--color-global);
+//   --bgcolor-list: transparent;
+//   --color-list-hover: var(--color-global);
+//   --bgcolor-list-hover: #{hsl.darken(var(--bgcolor-global),3%)};
+//   // --color-list-active: var(--color-reversal);
+//   // --bgcolor-list-active: var(--primary);
+
+//   // Navbar
+//   --bgcolor-navbar: var(--color-global);
+//   --bgcolor-navbar-hs: var(--color-global-hs);
+//   --bgcolor-navbar-l: var(--color-global-l);
+//   --bgcolor-search-top-dropdown: var(--primary);
+//   --bgcolor-search-top-dropdown-hs: var(--primary-hs);
+//   --bgcolor-search-top-dropdown-l: var(--primary-l);
+//   --border-image-navbar: linear-gradient(to right, var(--primary) 0%, #{hsl.darken(var(--primary), 5%)} 100%);
+
+
+//   // Logo colors
+//   --bgcolor-logo: var(--bgcolor-global);
+//   --fillcolor-logo-mark: var(--bgcolor-global);
+
+//   // Sidebar
+//   --bgcolor-sidebar: var(--accentcolor);
+//   --bgcolor-sidebar-hs: var(--accentcolor-hs);
+//   --bgcolor-sidebar-l: var(--accentcolor-l);
+//   // --bgcolor-sidebar-nav-item-active: rgba(#, 0.37); // optional
+//   --text-shadow-sidebar-nav-item-active: 0px 0px 10px #ffffff; // optional
+
+//   // Sidebar resize button
+//   --color-resize-button: #ffffff;
+//   --bgcolor-resize-button: var(--primary);
+//   --bgcolor-sidebar-context-hs: var(--primary-hs);
+//   --bgcolor-sidebar-context-l: var(--primary-l);
+//   --color-resize-button-hover: var(--color-reversal);
+//   --bgcolor-resize-button-hover: #{hsl.lighten(var(--primary), 5%)};
+
+//   // Sidebar contents
+//   --color-sidebar-context: var(--color-global);
+//   --color-sidebar-context-hs: var(--color-global-hs);
+//   --color-sidebar-context-l: var(--color-global-l);
+//   --bgcolor-sidebar-context: hsl(var(--bgcolor-sidebar-context-hs),var(--bgcolor-sidebar-context-l));
+//   --bgcolor-sidebar-context-hs: 0,0%;
+//   --bgcolor-sidebar-context-l: 93%;
+
+//   // Sidebar list group
+//   // --bgcolor-sidebar-list-group: #; // optional
+
+//   // Subnavigation
+//   --bgcolor-subnav: hsl(var(--bgcolor-subnav-hs),var(--bgcolor-subnav-l));
+//   --bgcolor-subnav-hs: var(--bgcolor-global-hs);
+//   --bgcolor-subnav-l: calc(var(--bgcolor-global-l) - 3%);
+
+//   // Icon colors
+//   --color-editor-icons: var(--color-global);
+
+//   // Border colors
+//   --border-color-theme: var(--primary);
+//   --bordercolor-inline-code: #ccc8c8; // optional
+
+//   // admin theme box
+//   --color-theme-color-box: var(--primary);
+
+//   // Navs {
+//   .nav-tabs {
+//     border-bottom: var(--primary) 1px solid;
+//     .nav-link {
+//       &:hover {
+//         border-color: #{hsl.lighten(var(--primary), 10%)};
+//         border-bottom: none;
+//       }
+//       &.active {
+//         background-color: transparent;
+//       }
+//     }
+//   }
+
+//   // Button
+//   .btn-group.grw-page-editor-mode-manager {
+//     .btn.btn-outline-primary {
+//       @include page-editor-mode-manager.btn-page-editor-mode-manager(#ffffff, var(--primary), var(--primary), #{hsl.lighten(var(--primary), 20%)});
+//     }
+//   }
+// }
+
+// :root[data-bs-theme='dark'] {
+//   // Theme colors
+//   --primary: hsl(var(--primary-hs),var(--primary-l)) !important;
+//   --primary-hs: 160,53%;
+//   --primary-l: 46%;
+//   --secondary: hsl(var(--secondary-hs),var(--secondary-l)) !important;
+//   --secondary-hs: 208,7%;
+//   --secondary-l: 46%;
+//   --accentcolor: hsl(var(--accentcolor-hs),var(--accentcolor-l));
+//   --accentcolor-hs: 0,0%;
+//   --accentcolor-l: 13%;
+
+//   // Background colors
+//   --bgcolor-global: hsl(var(--bgcolor-global-hs),var(--bgcolor-global-l));
+//   --bgcolor-global-hs: 0,0%;
+//   --bgcolor-global-l: 20%;
+//   --bgcolor-inline-code: #{bs.$gray-100}; //optional
+//   --bgcolor-card: #{hsl.darken(var(--bgcolor-global), 5%)};
+//   --bgcolor-blinked-section: #{hsl.alpha(var(--primary),50%)};
+//   --bgcolor-keyword-highlighted: #{darken(var.$grw-marker-red, 30%)};
+
+//   // Font colors
+//   --color-global: hsl(var(--color-global-hs),var(--color-global-l));
+//   --color-global-hs: 0,0%;
+//   --color-global-l: 100%;
+//   --color-reversal: #{bs.$gray-100};
+//   --color-link: var(--primary);
+//   --color-link-hs: var(--primary-hs);
+//   --color-link-l: var(--primary-l);
+//   --color-link-hover: #{hsl.lighten(var(--color-link),12%)};
+//   --color-link-wiki: var(--primary);
+//   --color-link-wiki-hs: var(--primary-hs);
+//   --color-link-wiki-l: var(--primary-l);
+//   --color-link-wiki-hover: #{hsl.lighten(var(--color-link),12%)};
+//   --color-link-nabvar: var(--color-reversal);
+//   --color-inline-code: #c7254e; // optional
+//   --color-search: #a7a7a7;
+
+//   // List Group colors
+//   // --color-list: var(--color-global);
+//   --bgcolor-list: transparent;
+//   --color-list-hover: var(--accentcolor);
+//   // --bgcolor-list-hover: #{hsl.darken(var(--bgcolor-global),3%)};// optional
+//   // --color-list-active: white ; // optional
+//   // --bgcolor-list-active: #{hsl.lighten(var(--bgcolor-global),3%)}; // optional
+
+//   // Navbar
+//   --bgcolor-navbar: hsl(var(--bgcolor-navbar-hs),var(--bgcolor-navbar-l));
+//   --bgcolor-navbar-hs: 0,0%;
+//   --bgcolor-navbar-l: 17%;
+//   --bgcolor-search-top-dropdown: var(--primary);
+//   --bgcolor-search-top-dropdown-hs: var(--primary-hs);
+//   --bgcolor-search-top-dropdown-l: var(--primary-l);
+//   --border-image-navbar: linear-gradient(to right, var(--primary) 0%, #{hsl.darken(var(--primary), 5%)} 100%);
+
+//   // Logo colors
+//   --bgcolor-logo: var(--color-global);
+//   --fillcolor-logo-mark: var(--color-global);
+//   // --fillcolor-logo-mark: #4e5a60;
+
+//   // Sidebar
+//   --bgcolor-sidebar: var(--accentcolor);
+//   --bgcolor-sidebar-hs: var(--accentcolor-hs);
+//   --bgcolor-sidebar-l: var(--accentcolor-l);
+//   // --bgcolor-sidebar-nav-item-active: rgba(#, 0.3); // optional
+//   --text-shadow-sidebar-nav-item-active: 0px 0px 10px var(--primary); // optional
+
+//   // Sidebar resize button
+//   --color-resize-button: var(--color-global);
+//   --bgcolor-resize-button: var(--primary);
+//   --bgcolor-resize-button-hs: var(--primary-hs);
+//   --bgcolor-resize-button-l: var(--primary-l);
+//   --color-resize-button-hover: var(--color-global);
+//   --bgcolor-resize-button-hover: #{hsl.darken(var(--primary), 5%)};
+
+//   // Sidebar contents
+//   --color-sidebar-context: var(--color-global);
+//   --color-sidebar-context-hs: var(--color-global-hs);
+//   --color-sidebar-context-l: var(--color-global-l);
+//   --bgcolor-sidebar-context: hsl(var(--bgcolor-sidebar-context-hs),var(--bgcolor-sidebar-context-l));
+//   --bgcolor-sidebar-context-hs: 0,2%;
+//   --bgcolor-sidebar-context-l: 25%;
+
+//   // Sidebar list group
+//   // --bgcolor-sidebar-list-group: #; // optional
+
+//   // Subnavigation
+//   --bgcolor-subnav: hsl(var(--bgcolor-subnav-hs),var(--bgcolor-subnav-l));
+//   --bgcolor-subnav-hs: var(--bgcolor-global-hs);
+//   --bgcolor-subnav-l: calc(var(--bgcolor-global-l) - 3%);
+
+//   // Icon colors
+//   --color-editor-icons: var(--color-global);
+
+//   // Border colors
+//   --border-color-theme: var(--primary);
+//   --bordercolor-inline-code: #4d4d4d; // optional
+
+//   // admin theme box
+//   --color-theme-color-box: var(--primary);
+
+//   // Navs
+//   .nav-tabs {
+//     border-bottom: var(--primary) 1px solid;
+//     .nav-link {
+//       &:hover {
+//         border-color: #{hsl.lighten(var(--primary), 10%)};
+//         border-bottom: none;
+//       }
+//       &.active {
+//         color: var(--primary);
+//         background-color: transparent;
+//         border-color: var(--primary);
+//       }
+//     }
+//   }
+
+//   // Table
+//   .table {
+//     color: white;
+//   }
+
+//   // Button
+//   .btn-group.grw-page-editor-mode-manager {
+//     .btn.btn-outline-primary {
+//       @include page-editor-mode-manager.btn-page-editor-mode-manager(#ffffff, var(--primary), var(--primary), #{hsl.darken(var(--primary), 20%)});
+//     }
+//   }
+// }

packages/preset-themes/vite.themes.config.ts

@@ -19,7 +19,7 @@ export default defineConfig(({ mode }) => {
           // '/src/styles/halloween.scss',
           // '/src/styles/hufflepuff.scss',
           // '/src/styles/island.scss',
-          // '/src/styles/jade-green.scss',
+          '/src/styles/jade-green.scss',
           // '/src/styles/kibela.scss',
           '/src/styles/mono-blue.scss',
           // '/src/styles/nature.scss',