Merge pull request #8082 from weseek/support/apply-colors-v7

support: Apply colors v7

apps/app/src/components/InAppNotification/InAppNotificationDropdown.tsx

@@ -83,7 +83,7 @@ export const InAppNotificationDropdown = (): JSX.Element => {
 
   return (
     <Dropdown className="notification-wrapper grw-notification-dropdown" isOpen={isOpen} toggle={toggleDropdownHandler} direction="end">
-      <DropdownToggle className="px-3 nav-link border-0 bg-transparent" innerRef={buttonRef}>
+      <DropdownToggle className="px-3" color="primary" innerRef={buttonRef}>
         <i className="icon-bell" /> {badge}
       </DropdownToggle>
       <DropdownMenu end>

apps/app/src/components/PagePresentationModal.module.scss

@@ -21,7 +21,6 @@
     width: 3rem;
     height: 3rem;
     font-size: 1.5rem;
-    color: var(--color-global);
     opacity: 0.3;
   }
 

apps/app/src/components/Sidebar/PageTree/Item.module.scss

@@ -0,0 +1,37 @@
+@use '@growi/core/scss/bootstrap/init' as bs;
+
+// TODO: relocate following styles into PageTreeItem.mdoule.scss after refactoring
+// https://redmine.weseek.co.jp/issues/127544
+.pagetree-item :global {
+  .list-group-item {
+    --bs-list-group-bg: transparent;
+  }
+}
+@include bs.color-mode(light) {
+  .pagetree-item :global {
+    .list-group-item-action {
+      --bs-list-group-action-hover-bg: var(--grw-highlight-200);
+      --bs-list-group-action-active-bg: var(--grw-highlight-400);
+
+      .btn-page-item-control {
+        --bs-btn-bg: transparent;
+        --bs-btn-hover-bg: var(--grw-highlight-400);
+        --bs-btn-active-bg: var(--grw-highlight-600);
+      }
+    }
+  }
+}
+@include bs.color-mode(dark) {
+  .pagetree-item :global {
+    .list-group-item-action {
+      --bs-list-group-action-hover-bg: var(--grw-highlight-800);
+      --bs-list-group-action-active-bg: var(--grw-highlight-800);
+
+      .btn-page-item-control {
+        --bs-btn-bg: transparent;
+        --bs-btn-hover-bg: var(--grw-highlight-700);
+        --bs-btn-active-bg: var(--grw-highlight-800);
+      }
+    }
+  }
+}

apps/app/src/components/Sidebar/PageTree/Item.tsx

@@ -38,6 +38,9 @@ import { PageItemControl } from '../../Common/Dropdown/PageItemControl';
 import { ItemNode } from './ItemNode';
 
 
+import styles from './Item.module.scss';
+
+
 const logger = loggerFactory('growi:cli:Item');
 
 
@@ -424,7 +427,9 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
       id={`pagetree-item-${page._id}`}
       data-testid="grw-pagetree-item-container"
       className={`grw-pagetree-item-container ${isOver ? 'grw-pagetree-is-over' : ''}
-    ${shouldHide ? 'd-none' : ''}`}
+        pagetree-item ${styles['pagetree-item']}
+        ${shouldHide ? 'd-none' : ''}`
+      }
     >
       <li
         ref={(c) => { drag(c); drop(c) }}

apps/app/src/components/Sidebar/Sidebar.module.scss

@@ -218,3 +218,25 @@
     }
   }
 }
+
+
+.grw-sidebar :global {
+  .grw-contextual-navigation {
+    backdrop-filter: blur(20px);
+  }
+}
+@include bs.color-mode(light) {
+  .grw-sidebar :global {
+    .grw-contextual-navigation {
+      background-color: rgba(var(--grw-highlight-100-rgb), .5);
+    }
+  }
+}
+
+@include bs.color-mode(dark) {
+  .grw-sidebar :global {
+    .grw-contextual-navigation {
+      background-color: rgba(var(--grw-highlight-900-rgb), .5);
+    }
+  }
+}

apps/app/src/components/Sidebar/SidebarNav.module.scss

@@ -51,18 +51,19 @@
   .btn {
     width: var.$grw-sidebar-nav-width;
     line-height: 1em;
+    border: 0;
     border-radius: 0;
     box-shadow: none !important;
 
     // icon opacity
     &:not(.active) {
       i {
-        opacity: 0.4;
+        opacity: 0.7;
       }
       &:hover,
       &:focus {
         i {
-          opacity: 0.7;
+          opacity: 0.8;
         }
       }
     }
@@ -89,7 +90,51 @@
       padding: 0.9em;
       i {
         font-size: 1.5em;
+        opacity: 0.4;
       }
     }
   }
 }
+
+
+// == Colors
+.grw-sidebar-nav :global {
+  .btn.btn-primary {
+    --bs-btn-bg: transparent;
+    --bs-btn-active-bg: transparent;
+    --bs-btn-hover-color: var(
+      --grw-sidebar-nav-btn-hover-color,
+      var(
+        --grw-sidebar-nav-btn-color,
+        var(--bs-btn-color)
+      ),
+    );
+    --bs-btn-active-color: var(
+      --grw-sidebar-nav-btn-active-color,
+      var(
+        --grw-sidebar-nav-btn-color,
+        var(--bs-btn-color)
+      ),
+    );
+  }
+}
+@include bs.color-mode(light) {
+  .grw-sidebar-nav :global {
+    background-color: var(--grw-sidebar-nav-bg, var(--grw-highlight-100));
+
+    .btn-primary {
+      --bs-btn-color: var(--grw-sidebar-nav-btn-color, var(--grw-primary-500));
+      --bs-btn-hover-bg: var(--grw-sidebar-nav-btn-hover-bg, var(--grw-highlight-300));
+    }
+  }
+}
+@include bs.color-mode(dark) {
+  .grw-sidebar-nav :global {
+    background-color: var(--grw-sidebar-nav-bg, var(--grw-highlight-900));
+
+    .btn-primary {
+      --bs-btn-color: var(--grw-sidebar-nav-btn-color, var(--grw-primary-400));
+      --bs-btn-hover-bg: var(--grw-sidebar-nav-btn-hover-bg, var(--grw-highlight-700));
+    }
+  }
+}

apps/app/src/pages/_app.page.tsx

@@ -21,7 +21,6 @@ import { registerTransformerForObjectId } from './utils/objectid-transformer';
 import '~/styles/prebuilt/vendor.css';
 import '~/styles/font-icons.scss';
 import '~/styles/style-app.scss';
-import '~/styles/prebuilt/apply-colors.css';
 
 
 const isDev = process.env.NODE_ENV === 'development';

apps/app/src/server/.node-dev.json

@@ -1,3 +1,10 @@
 {
-  "ignore": ["package.json", ".next", "public/static"]
+  "ignore": [
+    "package.json",
+    ".next",
+    "public/static",
+
+    "// ignore watching preset theme updates",
+    "packages/preset-themes/dist/themes/manifest.json"
+  ]
 }

apps/app/src/styles/_variables.scss

@@ -1,7 +1,3 @@
-//== GROWI Official Color
-$growi-green: #74bc46;
-$growi-blue: #175fa5;
-
 //== Marker Color
 $grw-marker-yellow: #ff6;
 $grw-marker-red: #f6c;

apps/app/src/styles/organisms/_wiki.scss

@@ -1,4 +1,4 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
+@use '@growi/core/scss/bootstrap/utilities' as bs;
 
 @use '../variables' as var;
 
@@ -14,6 +14,13 @@
 
   font-size: 16px;
 
+  a {
+    @extend .link-offset-2;
+    @extend .link-underline-opacity-25;
+    @extend .link-underline-opacity-50-hover;
+    text-decoration: underline;
+  }
+
   // @extend .text-break;
   // https://github.com/twbs/bootstrap/blob/v4.6.1/scss/utilities/_text.scss#L65-L68
   word-break: break-word !important; // Deprecated, but avoids issues with flex containers
@@ -285,3 +292,21 @@
     }
   }
 }
+
+
+// == Colors
+.wiki {
+  a {
+    color: rgba(
+      var(--grw-wiki-link-color-rgb, var(--bs-link-color-rgb)),
+      var(--bs-link-opacity, 1)
+    );
+
+    &:hover {
+      color: rgba(
+        var(--grw-wiki-link-hover-color-rgb, var(--bs-link-hover-color-rgb)),
+        var(--bs-link-opacity, 1)
+      );
+    }
+  }
+}

apps/app/vite.styles-prebuilt.config.ts

@@ -7,7 +7,6 @@ export default defineConfig({
     outDir: 'src/styles/prebuilt',
     rollupOptions: {
       input: [
-        '/src/styles/theme/apply-colors.scss',
         '/src/styles/vendor.scss',
       ],
       output: {

packages/core/scss/_growi-official-colors.scss

@@ -0,0 +1,3 @@
+//== GROWI Official Color
+$growi-green: #74bc46;
+$growi-blue: #175fa5;

packages/core/scss/bootstrap/_init-stage-1.scss

@@ -0,0 +1 @@
+@import 'bootstrap/scss/functions';

packages/core/scss/bootstrap/_init-stage-2.scss

@@ -0,0 +1,3 @@
+@import 'bootstrap/scss/maps';
+@import 'bootstrap/scss/mixins';
+@import 'bootstrap/scss/utilities';

packages/core/scss/bootstrap/_init.scss

@@ -1,13 +0,0 @@
-@import 'bootstrap/scss/functions';
-
-@import './variables';
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/variables-dark';
-
-@import 'bootstrap/scss/maps';
-// TODO: activate (https://redmine.weseek.co.jp/issues/128307)
-// merge $colors to $theme-colors
-// $theme-colors: map-merge($theme-colors, $colors);
-
-@import 'bootstrap/scss/mixins';
-@import 'bootstrap/scss/utilities';

packages/core/scss/bootstrap/_variables.scss

@@ -1,34 +1,9 @@
 // TODO: activate (https://redmine.weseek.co.jp/issues/128307)
 
-//
 // Variables
-// --------------------------------------------------
-
-//== Colors
 //
-// $primary: variables.$growi-blue !default;
-// $secondary: #6c757d !default;
-// $info: #009fbb !default;
-// $success: #00bb83 !default;
-// $warning: #ffa32b !default;
-// $danger: #ff0a54 !default;
-// $light: #e4e7ea !default;
-// $dark: #343a40 !default;
-// $gray-50: lighten($light, 7%) !default;
-// $gray-100: lighten($light, 4%) !default;
-// $gray-200: $light !default;
-// $gray-300: darken($light, 5%) !default;
-// $gray-400: darken($light, 20%) !default;
-// $gray-500: darken($light, 30%) !default;
-// $gray-550: lighten($dark, 15%) !default;
-// $gray-600: lighten($dark, 10%) !default;
-// $gray-700: lighten($dark, 5%) !default;
-// $gray-800: $dark !default;
-// $gray-900: darken($dark, 5%) !default;
-// $grays: (
-//   '50': $gray-50,
-// ) !default;
-// $red: #ff0a54 !default;
+// Variables should follow the `$component-state-property-size` formula for
+// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
 
 // Options
 //
@@ -40,7 +15,7 @@
 //
 // Style anchor elements.
 
-// $link-hover-decoration: none !default;
+$link-decoration: none;
 
 // Grid breakpoints
 //

packages/core/scss/bootstrap/init.scss

@@ -0,0 +1,8 @@
+@import './init-stage-1';
+
+@import './theming/variables';
+@import './variables';
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/variables-dark';
+
+@import './init-stage-2';

packages/core/scss/bootstrap/theming/_buttons.scss

@@ -0,0 +1,15 @@
+.btn-primary {
+  @include button-variant($primary, $primary);
+}
+
+.btn-outline-primary {
+  @include button-outline-variant($primary);
+}
+
+.btn-secondary {
+  @include button-variant($secondary, $secondary);
+}
+
+.btn-outline-secondary {
+  @include button-outline-variant($secondary);
+}

packages/core/scss/bootstrap/theming/_list-group.scss

@@ -0,0 +1,4 @@
+.list-group {
+  --#{$prefix}list-group-active-bg: #{$list-group-active-bg};
+  --#{$prefix}list-group-active-border-color: #{$list-group-active-border-color};
+}

packages/core/scss/bootstrap/theming/_pagination.scss

@@ -0,0 +1,5 @@
+.pagination {
+  --#{$prefix}pagination-active-color: #{$pagination-active-color};
+  --#{$prefix}pagination-active-bg: #{$pagination-active-bg};
+  --#{$prefix}pagination-active-border-color: #{$pagination-active-border-color};
+}

packages/core/scss/bootstrap/theming/_progress.scss

@@ -0,0 +1,4 @@
+.progress,
+.progress-stacked {
+  --#{$prefix}progress-bar-bg: #{$progress-bar-bg};
+}

packages/core/scss/bootstrap/theming/_root-dark.scss

@@ -0,0 +1,41 @@
+& {
+  --#{$prefix}body-color: #{$body-color-dark};
+  --#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
+  --#{$prefix}body-bg: #{$body-bg-dark};
+  --#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};
+
+  --#{$prefix}emphasis-color: #{$body-emphasis-color-dark};
+  --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
+
+  --#{$prefix}secondary-color: #{$body-secondary-color-dark};
+  --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
+  --#{$prefix}secondary-bg: #{$body-secondary-bg-dark};
+  --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};
+
+  --#{$prefix}tertiary-color: #{$body-tertiary-color-dark};
+  --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
+  --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
+  --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
+
+  @each $color, $value in $theme-colors-text-dark {
+    --#{$prefix}#{$color}-text-emphasis: #{$value};
+  }
+
+  @each $color, $value in $theme-colors-bg-subtle-dark {
+    --#{$prefix}#{$color}-bg-subtle: #{$value};
+  }
+
+  @each $color, $value in $theme-colors-border-subtle-dark {
+    --#{$prefix}#{$color}-border-subtle: #{$value};
+  }
+
+  --#{$prefix}link-color: #{$link-color-dark};
+  --#{$prefix}link-hover-color: #{$link-hover-color-dark};
+  --#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)};
+  --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
+
+  --#{$prefix}code-color: #{$code-color-dark};
+
+  --#{$prefix}border-color: #{$border-color-dark};
+  --#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
+}

packages/core/scss/bootstrap/theming/_root-light.scss

@@ -0,0 +1,32 @@
+& {
+  // Root and body
+  --#{$prefix}body-color: #{$body-color};
+  --#{$prefix}body-color-rgb: #{to-rgb($body-color)};
+  --#{$prefix}body-bg: #{$body-bg};
+  --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
+
+  --#{$prefix}emphasis-color: #{$body-emphasis-color};
+  --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};
+
+  --#{$prefix}secondary-color: #{$body-secondary-color};
+  --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
+  --#{$prefix}secondary-bg: #{$body-secondary-bg};
+  --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};
+
+  --#{$prefix}tertiary-color: #{$body-tertiary-color};
+  --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
+  --#{$prefix}tertiary-bg: #{$body-tertiary-bg};
+  --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
+
+  --#{$prefix}link-color: #{$link-color};
+  --#{$prefix}link-color-rgb: #{to-rgb($link-color)};
+
+  --#{$prefix}link-hover-color: #{$link-hover-color};
+  --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};
+
+  --#{$prefix}code-color: #{$code-color};
+  --#{$prefix}highlight-bg: #{$mark-bg};
+
+  --#{$prefix}border-color: #{$border-color};
+  --#{$prefix}border-color-translucent: #{$border-color-translucent};
+}

packages/core/scss/bootstrap/theming/_root.scss

@@ -0,0 +1,31 @@
+& {
+  @each $color, $value in $theme-colors {
+    @if $color == 'primary' or $color == 'secondary' {
+      --#{$prefix}#{$color}: #{$value};
+    }
+  }
+
+  @each $color, $value in $theme-colors-rgb {
+    @if $color == 'primary' or $color == 'secondary' {
+      --#{$prefix}#{$color}-rgb: #{$value};
+    }
+  }
+
+  @each $color, $value in $theme-colors-text {
+    @if $color == 'primary' or $color == 'secondary' {
+      --#{$prefix}#{$color}-text-emphasis: #{$value};
+    }
+  }
+
+  @each $color, $value in $theme-colors-bg-subtle {
+    @if $color == 'primary' or $color == 'secondary' {
+      --#{$prefix}#{$color}-bg-subtle: #{$value};
+    }
+  }
+
+  @each $color, $value in $theme-colors-border-subtle {
+    @if $color == 'primary' or $color == 'secondary' {
+      --#{$prefix}#{$color}-border-subtle: #{$value};
+    }
+  }
+}

packages/core/scss/bootstrap/theming/_tables.scss

@@ -0,0 +1,5 @@
+@each $color, $value in $table-variants {
+  @if $color == 'primary' or $color == 'secondary' {
+    @include table-variant($color, $value);
+  }
+}

packages/core/scss/bootstrap/theming/_variables.scss

@@ -0,0 +1,16 @@
+// Variables
+//
+// Variables should follow the `$component-state-property-size` formula for
+// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
+
+// Color system
+
+$gray-100: #d2d0ce !default;
+$gray-200: #c9c7c7 !default;
+$gray-300: #bab8b8 !default;
+$gray-400: #adaaaa !default;
+$gray-500: #9a9898 !default;
+$gray-600: #8a8886 !default;
+$gray-700: #585755 !default;
+$gray-800: #323130 !default;
+$gray-900: #171615 !default;

packages/core/scss/bootstrap/theming/apply.scss

@@ -0,0 +1,5 @@
+@import './tables';
+@import './buttons';
+@import './pagination';
+@import './progress';
+@import './list-group';

packages/core/scss/bootstrap/theming/utils/_color-palette.scss

@@ -0,0 +1,31 @@
+@mixin generate-color-palette($color, $value, $shade-color-ratio: 20%, $tint-color-ratio: 20%, $prefix: 'grw-') {
+  $color-900: shade-color($value, $shade-color-ratio * 4);
+  $color-800: shade-color($value, $shade-color-ratio * 3);
+  $color-700: shade-color($value, $shade-color-ratio * 2);
+  $color-600: shade-color($value, $shade-color-ratio);
+  $color-500: $value;
+  $color-400: tint-color($value, $tint-color-ratio);
+  $color-300: tint-color($value, $tint-color-ratio * 2);
+  $color-200: tint-color($value, $tint-color-ratio * 3);
+  $color-100: tint-color($value, $tint-color-ratio * 4);
+
+  --#{$prefix}#{$color}-900: #{$color-900};
+  --#{$prefix}#{$color}-800: #{$color-800};
+  --#{$prefix}#{$color}-700: #{$color-700};
+  --#{$prefix}#{$color}-600: #{$color-600};
+  --#{$prefix}#{$color}-500: #{$color-500};
+  --#{$prefix}#{$color}-400: #{$color-400};
+  --#{$prefix}#{$color}-300: #{$color-300};
+  --#{$prefix}#{$color}-200: #{$color-200};
+  --#{$prefix}#{$color}-100: #{$color-100};
+
+  --#{$prefix}#{$color}-900-rgb: #{to-rgb($color-900)};
+  --#{$prefix}#{$color}-800-rgb: #{to-rgb($color-800)};
+  --#{$prefix}#{$color}-700-rgb: #{to-rgb($color-700)};
+  --#{$prefix}#{$color}-600-rgb: #{to-rgb($color-600)};
+  --#{$prefix}#{$color}-500-rgb: #{to-rgb($color-500)};
+  --#{$prefix}#{$color}-400-rgb: #{to-rgb($color-400)};
+  --#{$prefix}#{$color}-300-rgb: #{to-rgb($color-300)};
+  --#{$prefix}#{$color}-200-rgb: #{to-rgb($color-200)};
+  --#{$prefix}#{$color}-100-rgb: #{to-rgb($color-100)};
+}

packages/core/scss/bootstrap/utilities.scss

@@ -0,0 +1,4 @@
+@import 'init';
+
+@import 'bootstrap/scss/helpers';
+@import 'bootstrap/scss/utilities/api';

packages/presentation/src/components/Presentation.module.scss

@@ -12,10 +12,10 @@
     }
     .controls {
       bottom: 24px;
-      color: var(--color-global);
+      color: var(--bs-body-color);
     }
     .progress {
-      color: var(--accent);
+      color: var(--bs-primary);
     }
   }
 

packages/preset-themes/package.json

@@ -13,6 +13,7 @@
     "build": "run-p build:*",
     "build:libs": "vite -c vite.libs.config.ts build",
     "build:themes": "vite -c vite.themes.config.ts build",
+    "clean": "shx rm -rf dist",
     "dev": "run-p dev:*",
     "dev:libs": "yarn build:libs --mode dev",
     "dev:themes": "yarn build:themes --mode dev",

packages/preset-themes/src/styles/_variables.scss

@@ -1,26 +0,0 @@
-//== GROWI Official Color
-$growi-green: #74bc46;
-$growi-blue: #175fa5;
-
-//== Marker Color
-$grw-marker-yellow: #ff6;
-$grw-marker-red: #f6c;
-$grw-marker-blue: #6cf;
-$grw-marker-cyan: #6ff;
-$grw-marker-green: #6f6;
-
-//== Layout
-$grw-subnav-min-height: 95px;
-$grw-subnav-min-height-md: 115px;
-$grw-subnav-height-on-edit: 95px;
-$grw-subnav-height-lg-on-edit: 50px;
-
-$grw-subnav-search-preview-min-height: 90px;
-
-$grw-navbar-bottom-height: 48px;
-$grw-editor-navbar-bottom-height: 48px;
-
-$grw-sidebar-nav-width: 64px; // !!DO NOT CHANGE!! 'margin-left' for '.css-teprsg' is hardcoded
-
-$grw-logo-width: $grw-sidebar-nav-width;
-$grw-logomark-width: 36px;

packages/preset-themes/src/styles/default.scss

@@ -1,258 +1,258 @@
 @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;
-
-//== Light Mode
-//
-:root[data-bs-theme='light'] {
-  --primary: hsl(var(--primary-hs),var(--primary-l));
-  --primary-hs: 216.7,65%;
-  --primary-l: 20.2%;
-  --secondary: hsl(var(--secondary-hs),var(--secondary-l));
-  --secondary-hs: 208,7%;
-  --secondary-l: 46%;
-  --accent: hsl(var(--accent-hs),var(--accent-l));
-  --accent-hs: 198.6,74.2%;
-  --accent-l: 48.6%;
-
-  // 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: #{bs.$gray-100};
-  --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: 214.1,60%;
-  --color-global-l: 16.7%;
-  --color-reversal: var(--light);
-  // --color-header: #2b2b2b;
-  --color-link: hsl(var(--color-link-hs),var(--color-link-l));
-  --color-link-hs: 228.4,76.3%;
-  --color-link-l: 41.4%;
-  --color-link-hover: #{hsl.lighten(var(--color-link),20%)};
-  --color-link-wiki: var(--color-link);
-  --color-link-wiki-hs: var(--color-link-hs);
-  --color-link-wiki-l: var(--color-link-l);
-  --color-link-wiki-hover: #{hsl.lighten(var(--color-link-wiki),20%)};
-  --color-link-nabvar: #{bs.$gray-500};
-  --color-inline-code: #{darken(bs.$red, 15%)}; // optional
-
-  // List Group colors
-  --color-list: var(--color-global); // optional
-  --bgcolor-list: var(--bgcolor-global); // optional
-  // --color-list-hover: var(--color-global); // optional
-  --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
-  // --color-page-list-group-item-meta: #{bs.$gray-500}; // optional
-
-  // Table colors
-  // --color-table: #; // optional
-  // --bgcolor-table: #; // optional
-  // --border-color-table: #; // optional
-  // --color-table-hover: #; // optional
-  // --bgcolor-table-hover: #; // optional
-
-  // Navbar
-  --bgcolor-navbar: #{bs.$gray-900};
-  --bgcolor-navbar-h:0;
-  --bgcolor-navbar-s:0%;
-  --bgcolor-navbar-l:12.94%;
-  --bgcolor-navbar-hs: 0,0%;
-  --bgcolor-search-top-dropdown: var(--accent);
-  --bgcolor-search-top-dropdown-hs: var(--accent-hs);
-  --bgcolor-search-top-dropdown-l: var(--accent-l);
-  --border-image-navbar: linear-gradient(to right, #36c9ff 0%, #36c9ff 33%, #7926ff 66%, #ff2eff 100%);
-
-  // Logo colors
-  --bgcolor-logo: var(--bgcolor-navbar);
-  --fillcolor-logo-mark: hsl(var(--bgcolor-navbar-h),calc(var(--bgcolor-navbar-s) - 20%),calc(var(--bgcolor-navbar-l) + 15%));
-
-  // Sidebar
-  --bgcolor-sidebar: var(--primary);
-  --bgcolor-sidebar-hs: var(--primary-hs);
-  --bgcolor-sidebar-l: var(--primary-l);
-  --bgcolor-sidebar-nav-item-active: rgba(black, 0.37); // optional
-  --text-shadow-sidebar-nav-item-active: 0px 0px 10px #0099ff; // optional
-
-  // Sidebar resize button
-  --color-resize-button: var(--color-reversal);
-  --bgcolor-resize-button: var(--accent);
-  --bgcolor-resize-button-hs: var(--accent-hs);
-  --bgcolor-resize-button-l: var(--accent-l);
-  --color-resize-button-hover: var(--color-reversal);
-  --bgcolor-resize-button-hover: #{hsl.lighten(var(--accent), 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.lighten(var(--primary),77%)};
-  --bgcolor-sidebar-context-hs: var(--primary-hs);
-  --bgcolor-sidebar-context-l: calc(var(--primary-l) + 77%);
-
-  // Sidebar list group
-  // --bgcolor-sidebar-list-group: #{bs.$gray-50}; // 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%);
-
-  // Tabs
-  // --bordercolor-nav-tabs: #{bs.$gray-300}; // optional
-  // --color-nav-tabs-link-active: #; //optional
-  // --bordercolor-nav-tabs-hover: # # $bordercolor-nav-tabs; // optional
-  // --bordercolor-nav-tabs-active: # # // optional
-
-  // Tags
-  // --color-tags: #; //optional
-  // --bgcolor-tags: #; //optional
-
-  // Icon colors
-  --color-editor-icons: var(--color-global);
-
-  // Border colors
-  --border-color-theme: #{bs.$gray-400};
-  --bordercolor-inline-code: #{bs.$gray-400}; // optional
-
-  // Dropdown colors
-  --bgcolor-dropdown-link-active: #{var.$growi-blue};
-
-  // admin theme box
-  --color-theme-color-box: #{hsl.lighten(var(--primary), 20%)};
-
-  // Button
-  .btn-group.grw-page-editor-mode-manager {
-    .btn.btn-outline-primary {
-      @include page-editor-mode-manager.btn-page-editor-mode-manager (var(--primary),#{hsl.lighten(var(--primary),65%)}, #{hsl.lighten(var(--primary),70%)});
-    }
-  }
-}
-
-//== Dark Mode
-//
-:root[data-bs-theme='dark'] {
-  --primary: hsl(var(--primary-hs),var(--primary-l));
-  --primary-hs: 216.8,85.1%;
-  --primary-l: 44.7%;
-  --secondary: hsl(var(--secondary-hs),var(--secondary-l));
-  --secondary-hs: 208,7%;
-  --secondary-l: 46%;
-  --accent: hsl(var(--accent-hs),var(--accent-l));
-  --accent-hs: 307,100%;
-  --accent-l: 43%;
-
-  // Background colors
-  --bgcolor-global: hsl(var(--bgcolor-global-hs),var(--bgcolor-global-l));
-  --bgcolor-global-hs: 228,12%;
-  --bgcolor-global-l: 8%;
-  --bgcolor-inline-code: #1f1f22; //optional
-  --bgcolor-card: #{hsl.darken(var(--bgcolor-global),5%)};
-  --bgcolor-blinked-section: #{hsl.alpha(var(--primary), 40%)};
-  --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: 74%;
-  --color-reversal: #{bs.$gray-900};
-  // --color-header: desaturate($primary, 20%);
-  --color-link: hsl(var(--color-link-hs),var(--color-link-l));
-  --color-link-hs: 219.3,51.7%;
-  --color-link-l: 65.9%;
-  --color-link-hover: #{hsl.lighten(var(--color-link),10%)};
-  --color-link-wiki: var(--color-link);
-  --color-link-wiki-hs: var(--color-link-hs);
-  --color-link-wiki-l: var(--color-link-l);
-  --color-link-wiki-hover: #{hsl.lighten(var(--color-link-wiki),10%)};
-  --color-link-nabvar: #a7a7a7;
-  --color-inline-code: #c7254e; // optional
-
-  // List Group colors
-  --color-list: var(--color-global); // optional
-  --bgcolor-list: var(--bgcolor-global); // optional
-  // --color-list-hover: var(--color-global); // optional
-  --bgcolor-list-hover: #{hsl.lighten(var(--bgcolor-global),3%)}; // optional
-  // --color-list-active: white ; // optional
-  // --bgcolor-list-active: var(--primary); // optional
-
-  // Table colors
-  // --color-table: #; // optional
-  // --bgcolor-table: #; // optional
-  // --border-color-table: #; // optional
-  // --color-table-hover: #; // optional
-  // --bgcolor-table-hover: #; // optional
-
-  // Navbar
-  --bgcolor-navbar: #2a2929;
-  --bgcolor-search-top-dropdown: var(--accent);
-  --bgcolor-search-top-dropdown-hs: var(--accent-hs);
-  --bgcolor-search-top-dropdown-l: var(--accent-l);
-  --border-image-navbar: linear-gradient(to right, #44bfe3 0%, #b04aff 50%, #ff1794 100%);
-
-  // Logo colors
-  --bgcolor-logo: var(--bgcolor-navbar);
-  --fillcolor-logo-mark: #{bs.$gray-700};
-
-  // Sidebar
-  --bgcolor-sidebar: hsl(var(--bgcolor-sidebar-hs),var(--bgcolor-sidebar-l));
-  --bgcolor-sidebar-hs: 216.7,65%;
-  --bgcolor-sidebar-l: 20.2%;
-  --bgcolor-sidebar-nav-item-active: rgba(#969494, 0.3); // optional
-  --text-shadow-sidebar-nav-item-active: 0px 0px 10px #0099ff; // optional
-  --bgcolor-sidebar-context: hsl(var(--bgcolor-sidebar-context-hs),var(--bgcolor-sidebar-context-l));
-  --bgcolor-sidebar-context-hs: 228,12%;
-  --bgcolor-sidebar-context-l: 16%;
-  // Sidebar resize button
-  --color-resize-button: white;
-  --bgcolor-resize-button: var(--accent);
-  --color-resize-button-hover: white;
-  --bgcolor-resize-button-hover: #{hsl.darken(var(--accent), 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);
-  // Sidebar list group
-  // --bgcolor-sidebar-list-group: #1c2a3e; // 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) + 4%);
-
-  // Tabs
-  --bordercolor-nav-tabs: #{bs.$gray-700}; // optional
-  // --color-nav-tabs-link-active: #; //optional
-  --bordercolor-nav-tabs-hover: #666 #666 var(--bordercolor-nav-tabs); // optional
-  --bordercolor-nav-tabs-active: var(--bordercolor-nav-tabs) var(--bordercolor-nav-tabs) var(--bgcolor-global); // optional
-
-  // Tags
-  // --color-tags: #; //optional
-  // --bgcolor-tags: #; //optional
-
-  // Icon colors
-  --color-editor-icons: var(--color-global);
-
-  // Border colors
-  --border-color-theme: hsl(var(--border-color-theme-hs),var(--border-color-theme-l));
-  --border-color-theme-hs: 210,13%;
-  --border-color-theme-l: 71%;
-  --bordercolor-inline-code: var(--secondary); // optional
-
-  // admin theme box
-  --color-theme-color-box: var(--primary);
-
-  //Button
-  .btn-group.grw-page-editor-mode-manager {
-    .btn.btn-outline-primary {
-      @include page-editor-mode-manager.btn-page-editor-mode-manager(#{hsl.lighten(var(--primary), 30%)}, #{hsl.lighten(var(--primary), 20%)}, var(--primary), #{hsl.darken(var(--primary), 20%)});
-    }
-  }
-}
+// @use './variables' as var;
+// @use './theme/mixins/page-editor-mode-manager';
+// @use './theme/hsl-functions' as hsl;
+
+// //== Light Mode
+// //
+// :root[data-bs-theme='light'] {
+//   --primary: hsl(var(--primary-hs),var(--primary-l));
+//   --primary-hs: 216.7,65%;
+//   --primary-l: 20.2%;
+//   --secondary: hsl(var(--secondary-hs),var(--secondary-l));
+//   --secondary-hs: 208,7%;
+//   --secondary-l: 46%;
+//   --accent: hsl(var(--accent-hs),var(--accent-l));
+//   --accent-hs: 198.6,74.2%;
+//   --accent-l: 48.6%;
+
+//   // 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: #{bs.$gray-100};
+//   --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: 214.1,60%;
+//   --color-global-l: 16.7%;
+//   --color-reversal: var(--light);
+//   // --color-header: #2b2b2b;
+//   --color-link: hsl(var(--color-link-hs),var(--color-link-l));
+//   --color-link-hs: 228.4,76.3%;
+//   --color-link-l: 41.4%;
+//   --color-link-hover: #{hsl.lighten(var(--color-link),20%)};
+//   --color-link-wiki: var(--color-link);
+//   --color-link-wiki-hs: var(--color-link-hs);
+//   --color-link-wiki-l: var(--color-link-l);
+//   --color-link-wiki-hover: #{hsl.lighten(var(--color-link-wiki),20%)};
+//   --color-link-nabvar: #{bs.$gray-500};
+//   --color-inline-code: #{darken(bs.$red, 15%)}; // optional
+
+//   // List Group colors
+//   --color-list: var(--color-global); // optional
+//   --bgcolor-list: var(--bgcolor-global); // optional
+//   // --color-list-hover: var(--color-global); // optional
+//   --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
+//   // --color-page-list-group-item-meta: #{bs.$gray-500}; // optional
+
+//   // Table colors
+//   // --color-table: #; // optional
+//   // --bgcolor-table: #; // optional
+//   // --border-color-table: #; // optional
+//   // --color-table-hover: #; // optional
+//   // --bgcolor-table-hover: #; // optional
+
+//   // Navbar
+//   --bgcolor-navbar: #{bs.$gray-900};
+//   --bgcolor-navbar-h:0;
+//   --bgcolor-navbar-s:0%;
+//   --bgcolor-navbar-l:12.94%;
+//   --bgcolor-navbar-hs: 0,0%;
+//   --bgcolor-search-top-dropdown: var(--accent);
+//   --bgcolor-search-top-dropdown-hs: var(--accent-hs);
+//   --bgcolor-search-top-dropdown-l: var(--accent-l);
+//   --border-image-navbar: linear-gradient(to right, #36c9ff 0%, #36c9ff 33%, #7926ff 66%, #ff2eff 100%);
+
+//   // Logo colors
+//   --bgcolor-logo: var(--bgcolor-navbar);
+//   --fillcolor-logo-mark: hsl(var(--bgcolor-navbar-h),calc(var(--bgcolor-navbar-s) - 20%),calc(var(--bgcolor-navbar-l) + 15%));
+
+//   // Sidebar
+//   --bgcolor-sidebar: var(--primary);
+//   --bgcolor-sidebar-hs: var(--primary-hs);
+//   --bgcolor-sidebar-l: var(--primary-l);
+//   --bgcolor-sidebar-nav-item-active: rgba(black, 0.37); // optional
+//   --text-shadow-sidebar-nav-item-active: 0px 0px 10px #0099ff; // optional
+
+//   // Sidebar resize button
+//   --color-resize-button: var(--color-reversal);
+//   --bgcolor-resize-button: var(--accent);
+//   --bgcolor-resize-button-hs: var(--accent-hs);
+//   --bgcolor-resize-button-l: var(--accent-l);
+//   --color-resize-button-hover: var(--color-reversal);
+//   --bgcolor-resize-button-hover: #{hsl.lighten(var(--accent), 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.lighten(var(--primary),77%)};
+//   --bgcolor-sidebar-context-hs: var(--primary-hs);
+//   --bgcolor-sidebar-context-l: calc(var(--primary-l) + 77%);
+
+//   // Sidebar list group
+//   // --bgcolor-sidebar-list-group: #{bs.$gray-50}; // 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%);
+
+//   // Tabs
+//   // --bordercolor-nav-tabs: #{bs.$gray-300}; // optional
+//   // --color-nav-tabs-link-active: #; //optional
+//   // --bordercolor-nav-tabs-hover: # # $bordercolor-nav-tabs; // optional
+//   // --bordercolor-nav-tabs-active: # # // optional
+
+//   // Tags
+//   // --color-tags: #; //optional
+//   // --bgcolor-tags: #; //optional
+
+//   // Icon colors
+//   --color-editor-icons: var(--color-global);
+
+//   // Border colors
+//   --border-color-theme: #{bs.$gray-400};
+//   --bordercolor-inline-code: #{bs.$gray-400}; // optional
+
+//   // Dropdown colors
+//   --bgcolor-dropdown-link-active: #{var.$growi-blue};
+
+//   // admin theme box
+//   --color-theme-color-box: #{hsl.lighten(var(--primary), 20%)};
+
+//   // Button
+//   .btn-group.grw-page-editor-mode-manager {
+//     .btn.btn-outline-primary {
+//       @include page-editor-mode-manager.btn-page-editor-mode-manager (var(--primary),#{hsl.lighten(var(--primary),65%)}, #{hsl.lighten(var(--primary),70%)});
+//     }
+//   }
+// }
+
+// //== Dark Mode
+// //
+// :root[data-bs-theme='dark'] {
+//   --primary: hsl(var(--primary-hs),var(--primary-l));
+//   --primary-hs: 216.8,85.1%;
+//   --primary-l: 44.7%;
+//   --secondary: hsl(var(--secondary-hs),var(--secondary-l));
+//   --secondary-hs: 208,7%;
+//   --secondary-l: 46%;
+//   --accent: hsl(var(--accent-hs),var(--accent-l));
+//   --accent-hs: 307,100%;
+//   --accent-l: 43%;
+
+//   // Background colors
+//   --bgcolor-global: hsl(var(--bgcolor-global-hs),var(--bgcolor-global-l));
+//   --bgcolor-global-hs: 228,12%;
+//   --bgcolor-global-l: 8%;
+//   --bgcolor-inline-code: #1f1f22; //optional
+//   --bgcolor-card: #{hsl.darken(var(--bgcolor-global),5%)};
+//   --bgcolor-blinked-section: #{hsl.alpha(var(--primary), 40%)};
+//   --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: 74%;
+//   --color-reversal: #{bs.$gray-900};
+//   // --color-header: desaturate($primary, 20%);
+//   --color-link: hsl(var(--color-link-hs),var(--color-link-l));
+//   --color-link-hs: 219.3,51.7%;
+//   --color-link-l: 65.9%;
+//   --color-link-hover: #{hsl.lighten(var(--color-link),10%)};
+//   --color-link-wiki: var(--color-link);
+//   --color-link-wiki-hs: var(--color-link-hs);
+//   --color-link-wiki-l: var(--color-link-l);
+//   --color-link-wiki-hover: #{hsl.lighten(var(--color-link-wiki),10%)};
+//   --color-link-nabvar: #a7a7a7;
+//   --color-inline-code: #c7254e; // optional
+
+//   // List Group colors
+//   --color-list: var(--color-global); // optional
+//   --bgcolor-list: var(--bgcolor-global); // optional
+//   // --color-list-hover: var(--color-global); // optional
+//   --bgcolor-list-hover: #{hsl.lighten(var(--bgcolor-global),3%)}; // optional
+//   // --color-list-active: white ; // optional
+//   // --bgcolor-list-active: var(--primary); // optional
+
+//   // Table colors
+//   // --color-table: #; // optional
+//   // --bgcolor-table: #; // optional
+//   // --border-color-table: #; // optional
+//   // --color-table-hover: #; // optional
+//   // --bgcolor-table-hover: #; // optional
+
+//   // Navbar
+//   --bgcolor-navbar: #2a2929;
+//   --bgcolor-search-top-dropdown: var(--accent);
+//   --bgcolor-search-top-dropdown-hs: var(--accent-hs);
+//   --bgcolor-search-top-dropdown-l: var(--accent-l);
+//   --border-image-navbar: linear-gradient(to right, #44bfe3 0%, #b04aff 50%, #ff1794 100%);
+
+//   // Logo colors
+//   --bgcolor-logo: var(--bgcolor-navbar);
+//   --fillcolor-logo-mark: #{bs.$gray-700};
+
+//   // Sidebar
+//   --bgcolor-sidebar: hsl(var(--bgcolor-sidebar-hs),var(--bgcolor-sidebar-l));
+//   --bgcolor-sidebar-hs: 216.7,65%;
+//   --bgcolor-sidebar-l: 20.2%;
+//   --bgcolor-sidebar-nav-item-active: rgba(#969494, 0.3); // optional
+//   --text-shadow-sidebar-nav-item-active: 0px 0px 10px #0099ff; // optional
+//   --bgcolor-sidebar-context: hsl(var(--bgcolor-sidebar-context-hs),var(--bgcolor-sidebar-context-l));
+//   --bgcolor-sidebar-context-hs: 228,12%;
+//   --bgcolor-sidebar-context-l: 16%;
+//   // Sidebar resize button
+//   --color-resize-button: white;
+//   --bgcolor-resize-button: var(--accent);
+//   --color-resize-button-hover: white;
+//   --bgcolor-resize-button-hover: #{hsl.darken(var(--accent), 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);
+//   // Sidebar list group
+//   // --bgcolor-sidebar-list-group: #1c2a3e; // 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) + 4%);
+
+//   // Tabs
+//   --bordercolor-nav-tabs: #{bs.$gray-700}; // optional
+//   // --color-nav-tabs-link-active: #; //optional
+//   --bordercolor-nav-tabs-hover: #666 #666 var(--bordercolor-nav-tabs); // optional
+//   --bordercolor-nav-tabs-active: var(--bordercolor-nav-tabs) var(--bordercolor-nav-tabs) var(--bgcolor-global); // optional
+
+//   // Tags
+//   // --color-tags: #; //optional
+//   // --bgcolor-tags: #; //optional
+
+//   // Icon colors
+//   --color-editor-icons: var(--color-global);
+
+//   // Border colors
+//   --border-color-theme: hsl(var(--border-color-theme-hs),var(--border-color-theme-l));
+//   --border-color-theme-hs: 210,13%;
+//   --border-color-theme-l: 71%;
+//   --bordercolor-inline-code: var(--secondary); // optional
+
+//   // admin theme box
+//   --color-theme-color-box: var(--primary);
+
+//   //Button
+//   .btn-group.grw-page-editor-mode-manager {
+//     .btn.btn-outline-primary {
+//       @include page-editor-mode-manager.btn-page-editor-mode-manager(#{hsl.lighten(var(--primary), 30%)}, #{hsl.lighten(var(--primary), 20%)}, var(--primary), #{hsl.darken(var(--primary), 20%)});
+//     }
+//   }
+// }

packages/preset-themes/src/styles/mono-blue.scss

@@ -1,264 +1,340 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
+:root[data-bs-theme='light'] {
+  @import '@growi/core/scss/bootstrap/init-stage-1';
+  @import '@growi/core/scss/bootstrap/theming/variables';
+  @import '@growi/core/scss/bootstrap/theming/utils/color-palette';
 
-@use './variables' as var;
-@use './theme/mixins/page-editor-mode-manager';
-@use './theme/hsl-functions' as hsl;
+  $primary: #409cb9;
+  $secondary: $gray-600;
+  $highlight: #93e3ea;
 
-:root[data-bs-theme='light'] {
-  // Theme colors
-  --primary: hsl(var(--primary-hs),var(--primary-l)) !important;
-  --primary-hs: 197,100%;
-  --primary-l: 24%;
-  --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: 210,14%;
-  --accentcolor-l: 89%;
-
-  // Background colors
-  --bgcolor-global: hsl(var(--bgcolor-global-hs),var(--bgcolor-global-l));
-  --bgcolor-global-hs: 200,60%;
-  --bgcolor-global-l: 98%;
-  --bgcolor-inline-code: #{bs.$gray-100}; //optional
-  --bgcolor-card: #{hsl.darken(var(--bgcolor-global), 5%)};
-  --bgcolor-blinked-section: #{hsl.alpha(var(--primary),10%)};
-  //--bgcolor-keyword-highlighted: #{$grw-marker-yellow};
-
-  // Font colors
-  --color-global: var(--primary);
-  --color-global-hs: var(--primary-hs);
-  --color-global-l: var(--primary-l);
-  --color-reversal: #{bs.$gray-100};
-  --color-link: #{hsl.lighten(var(--primary),5%)};
-  --color-link-hs: var(--primary-hs);
-  --color-link-l: calc(var(--primary-l) + 5%);
-  --color-link-hover: #{hsl.lighten(var(--color-link), 12%)};
-  --color-link-wiki: #{hsl.lighten(var(--primary),20%)};
-  --color-link-wiki-hs: var(--primary-hs);
-  --color-link-wiki-l: calc(var(--primary-l) + 20%);
-  --color-link-wiki-hover: #{hsl.lighten(var(--primary),40%)};
-  --color-link-nabvar: var(--color-reversal);
-  --color-inline-code: #c7254e; // optional
-  --color-search: #c0d6df;
-
-  // List Group colors
-  // --color-list: var(--color-global);
-  --bgcolor-list: transparent;
-  --color-list-hover: var(--color-search);
-  --bgcolor-list-hover: #{hsl.lighten(var(--primary), 70%)};
-  // --color-list-active: var(--color-reversal);
-  // --bgcolor-list-active: var(--primary);
-
-  // Navbar
-  --bgcolor-navbar: hsl(var(--bgcolor-navbar-hs),var(--bgcolor-navbar-l));
-  --bgcolor-navbar-h: 0;
-  --bgcolor-navbar-s: 1%;
-  --bgcolor-navbar-l: 16%;
-  --bgcolor-navbar-hs: 0,1%;
-  --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, #54bafd 0%, #3d98a3 50%, #708b0b 100%);
-
-  // Logo colors
-  --bgcolor-logo: var(--primary);
-  --fillcolor-logo-mark: hsl(var(--bgcolor-navbar-h),calc(var(--bgcolor-navbar-s) - 10%),calc(var(--bgcolor-navbar-l) + 15%));
-
-  // Sidebar
-  --bgcolor-sidebar: var(--primary);
-  --bgcolor-sidebar-hs: var(--primary-hs);
-  --bgcolor-sidebar-l: var(--primary-l);
-
-  // --bgcolor-sidebar-nav-item-active: rgba(#, 0.37); // optional
-  --text-shadow-sidebar-nav-item-active: 0px 0px 10px #0099ff; // optional
-
-  // Sidebar resize button
-  --color-resize-button: var(--color-reversal);
-  --bgcolor-resize-button: hsl(var(--bgcolor-resize-button-hs),var(--bgcolor-resize-button-l));
-  --bgcolor-resize-button-hs: 199,74%;
-  --bgcolor-resize-button-l: 49%;
-  --color-resize-button-hover: var(--color-reversal);
-  --bgcolor-resize-button-hover: #{hsl.lighten(var(--bgcolor-resize-button), 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: 193,100%;
-  --bgcolor-sidebar-context-l: 97%;
-
-  // 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(--accentcolor);
-  --bordercolor-inline-code: #ccc8c8; // optional
-
-  // admin theme box
-  --color-theme-color-box: #{hsl.lighten(var(--primary), 20%)};
-
-  // Navs {
-  .nav-tabs {
-    border-bottom: var(--accentcolor) 1px solid;
-    .nav-link {
-      &:hover {
-        border-color: #{hsl.lighten(var(--accentcolor),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(var(--primary), #{hsl.lighten(var(--primary), 65%)}, #{hsl.lighten(var(--primary), 70%)});
-    }
-  }
+  @include generate-color-palette('primary', $primary);
+  @include generate-color-palette('highlight', $highlight);
+
+  $body-color:                $gray-900;
+  $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/root';
+  @import '@growi/core/scss/bootstrap/theming/root-light';
+  @import '@growi/core/scss/bootstrap/theming/apply';
+
+  --grw-wiki-link-color-rgb: var(--grw-primary-500-rgb);
+  --grw-wiki-link-hover-color-rgb: var(--grw-primary-700-rgb);
 }
 
 :root[data-bs-theme='dark'] {
-  // Theme colors
-  --primary: hsl(var(--primary-hs),var(--primary-l)) !important;
-  --primary-hs: 197,100%;
-  --primary-l: 39%;
-  --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: 203,78%;
-  --accentcolor-l: 35%;
-
-  // Background colors
-  --bgcolor-global: hsl(var(--bgcolor-global-hs),var(--bgcolor-global-l));
-  --bgcolor-global-hs: 203,77%;
-  --bgcolor-global-l: 10%;
-  --bgcolor-navbar: hsl(var(--bgcolor-navbar-hs),var(--bgcolor-navbar-l));
-  --bgcolor-navbar-hs: 201,20%;
-  --bgcolor-navbar-l: 19%;
-  --bgcolor-inline-code: #1f1f22; //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: 180,1%;
-  --color-global-l: 83%;
-  --color-reversal: #{bs.$gray-100};
-  --color-link: hsl(var(--color-link-hs),var(--color-link-l));
-  --color-link-hs: 201,75%;
-  --color-link-l: 77%;
-  --color-link-hover: #{hsl.darken(var(--color-link), 12%)};
-  --color-link-wiki: #{hsl.lighten(var(--primary),20%)};
-  --color-link-wiki-hs: var(--primary-hs);
-  --color-link-wiki-l: calc(var(--primary-l) + 20%);
-  --color-link-wiki-hover: #{hsl.lighten(var(--primary),40%)};
-  --color-link-nabvar: var(--color-reversal);
-  --color-inline-code: #c7254e; // optional
-  --color-search: #000102;
-
-  // List Group colors
-  // --color-list: var(--color-global);
-  --bgcolor-list: transparent;
-  --color-list-hover: #16617d;
-  // --bgcolor-list-hover: #{hsl.lighten(var(--bgcolor-global),3%)}; // optional
-  // --color-list-active: var(--color-reversal);
-  // --bgcolor-list-active: var(--primary);
-
-  // Navbar
-  --bgcolor-navbar: hsl(var(--bgcolor-navbar-hs),var(--bgcolor-navbar-l));
-  --bgcolor-navbar-h: 0;
-  --bgcolor-navbar-s: 1%;
-  --bgcolor-navbar-l: 16%;
-  --bgcolor-navbar-hs:var(--bgcolor-navbar-h),var(--bgcolor-navbar-s);
-  --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, #54bafd 0%, #3d98a3 50%, #708b0b 100%);
-
-  // Logo colors
-  --bgcolor-logo: #13191c;
-  --fillcolor-logo-mark: hsl(var(--bgcolor-navbar-h),calc(var(--bgcolor-navbar-s) - 10%),calc(var(--bgcolor-navbar-l) + 15%));
-  // --fillcolor-logo-mark: #4e5a60;
-
-  // Sidebar
-  --bgcolor-sidebar: hsl(var(--bgcolor-sidebar-hs),var(--bgcolor-sidebar-l));
-  --bgcolor-sidebar-hs: 196,70%;
-  --bgcolor-sidebar-l: 29%;
-  // --bgcolor-sidebar-nav-item-active: rgba(#, 0.3); // optional
-  --text-shadow-sidebar-nav-item-active: 0px 0px 10px #0099ff; // 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
-  --bgcolor-sidebar-context: #{hsl.darken(var(--bgcolor-sidebar), 13%)};
-  --bgcolor-sidebar-context-hs: var(--bgcolor-sidebar-hs);
-  --bgcolor-sidebar-context-l: calc(var(--bgcolor-sidebar-l) - 13%);
-  --color-sidebar-context: var(--color-global);
-  --color-sidebar-context-hs: var(--color-global-hs);
-  --color-sidebar-context-l: var(--color-global-l);
-
-  // 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(--accentcolor);
-  --bordercolor-inline-code: #4d4d4d; // optional
-
-  // admin theme box
-  --color-theme-color-box: var(--primary);
-
-  // Navs
-  .nav-tabs {
-    border-bottom: var(--accentcolor) 1px solid;
-    .nav-link {
-      &:hover {
-        border-color: #{hsl.lighten(var(--accentcolor), 10%)};
-        border-bottom: none;
-      }
-      &.active {
-        color: var(--color-link);
-        background-color: transparent;
-        border-color: var(--accentcolor);
-      }
-    }
-  }
-
-  // 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(#{hsl.lighten(var(--primary), 30%)}, var(--primary), #{hsl.darken(var(--primary), 10%)}, #{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: #439cb9;
+  $secondary: $gray-500;
+  $highlight: #64a9ed;
+
+  @include generate-color-palette('primary', $primary);
+  @include generate-color-palette('highlight', $highlight);
+
+  $body-color-dark:                   $gray-200;
+  $body-bg-dark:                      #16202c;
+
+  $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-300;
+
+  @import 'bootstrap/scss/variables';
+  @import 'bootstrap/scss/variables-dark';
+
+  @import '@growi/core/scss/bootstrap/init-stage-2';
+
+  @import '@growi/core/scss/bootstrap/theming/root';
+  @import '@growi/core/scss/bootstrap/theming/root-dark';
+  @import '@growi/core/scss/bootstrap/theming/apply';
+
+  --grw-wiki-link-color-rgb: var(--grw-primary-500-rgb);
+  --grw-wiki-link-hover-color-rgb: var(--grw-primary-300-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: 197,100%;
+//   --primary-l: 24%;
+//   --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: 210,14%;
+//   --accentcolor-l: 89%;
+
+//   // Background colors
+//   --bgcolor-global: hsl(var(--bgcolor-global-hs),var(--bgcolor-global-l));
+//   --bgcolor-global-hs: 200,60%;
+//   --bgcolor-global-l: 98%;
+//   --bgcolor-inline-code: #{bs.$gray-100}; //optional
+//   --bgcolor-card: #{hsl.darken(var(--bgcolor-global), 5%)};
+//   --bgcolor-blinked-section: #{hsl.alpha(var(--primary),10%)};
+//   //--bgcolor-keyword-highlighted: #{$grw-marker-yellow};
+
+//   // Font colors
+//   --color-global: var(--primary);
+//   --color-global-hs: var(--primary-hs);
+//   --color-global-l: var(--primary-l);
+//   --color-reversal: #{bs.$gray-100};
+//   --color-link: #{hsl.lighten(var(--primary),5%)};
+//   --color-link-hs: var(--primary-hs);
+//   --color-link-l: calc(var(--primary-l) + 5%);
+//   --color-link-hover: #{hsl.lighten(var(--color-link), 12%)};
+//   --color-link-wiki: #{hsl.lighten(var(--primary),20%)};
+//   --color-link-wiki-hs: var(--primary-hs);
+//   --color-link-wiki-l: calc(var(--primary-l) + 20%);
+//   --color-link-wiki-hover: #{hsl.lighten(var(--primary),40%)};
+//   --color-link-nabvar: var(--color-reversal);
+//   --color-inline-code: #c7254e; // optional
+//   --color-search: #c0d6df;
+
+//   // List Group colors
+//   // --color-list: var(--color-global);
+//   --bgcolor-list: transparent;
+//   --color-list-hover: var(--color-search);
+//   --bgcolor-list-hover: #{hsl.lighten(var(--primary), 70%)};
+//   // --color-list-active: var(--color-reversal);
+//   // --bgcolor-list-active: var(--primary);
+
+//   // Navbar
+//   --bgcolor-navbar: hsl(var(--bgcolor-navbar-hs),var(--bgcolor-navbar-l));
+//   --bgcolor-navbar-h: 0;
+//   --bgcolor-navbar-s: 1%;
+//   --bgcolor-navbar-l: 16%;
+//   --bgcolor-navbar-hs: 0,1%;
+//   --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, #54bafd 0%, #3d98a3 50%, #708b0b 100%);
+
+//   // Logo colors
+//   --bgcolor-logo: var(--primary);
+//   --fillcolor-logo-mark: hsl(var(--bgcolor-navbar-h),calc(var(--bgcolor-navbar-s) - 10%),calc(var(--bgcolor-navbar-l) + 15%));
+
+//   // Sidebar
+//   --bgcolor-sidebar: var(--primary);
+//   --bgcolor-sidebar-hs: var(--primary-hs);
+//   --bgcolor-sidebar-l: var(--primary-l);
+
+//   // --bgcolor-sidebar-nav-item-active: rgba(#, 0.37); // optional
+//   --text-shadow-sidebar-nav-item-active: 0px 0px 10px #0099ff; // optional
+
+//   // Sidebar resize button
+//   --color-resize-button: var(--color-reversal);
+//   --bgcolor-resize-button: hsl(var(--bgcolor-resize-button-hs),var(--bgcolor-resize-button-l));
+//   --bgcolor-resize-button-hs: 199,74%;
+//   --bgcolor-resize-button-l: 49%;
+//   --color-resize-button-hover: var(--color-reversal);
+//   --bgcolor-resize-button-hover: #{hsl.lighten(var(--bgcolor-resize-button), 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: 193,100%;
+//   --bgcolor-sidebar-context-l: 97%;
+
+//   // 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(--accentcolor);
+//   --bordercolor-inline-code: #ccc8c8; // optional
+
+//   // admin theme box
+//   --color-theme-color-box: #{hsl.lighten(var(--primary), 20%)};
+
+//   // Navs {
+//   .nav-tabs {
+//     border-bottom: var(--accentcolor) 1px solid;
+//     .nav-link {
+//       &:hover {
+//         border-color: #{hsl.lighten(var(--accentcolor),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(var(--primary), #{hsl.lighten(var(--primary), 65%)}, #{hsl.lighten(var(--primary), 70%)});
+//     }
+//   }
+// }
+
+// :root[data-bs-theme='dark'] {
+//   // Theme colors
+//   --primary: hsl(var(--primary-hs),var(--primary-l)) !important;
+//   --primary-hs: 197,100%;
+//   --primary-l: 39%;
+//   --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: 203,78%;
+//   --accentcolor-l: 35%;
+
+//   // Background colors
+//   --bgcolor-global: hsl(var(--bgcolor-global-hs),var(--bgcolor-global-l));
+//   --bgcolor-global-hs: 203,77%;
+//   --bgcolor-global-l: 10%;
+//   --bgcolor-navbar: hsl(var(--bgcolor-navbar-hs),var(--bgcolor-navbar-l));
+//   --bgcolor-navbar-hs: 201,20%;
+//   --bgcolor-navbar-l: 19%;
+//   --bgcolor-inline-code: #1f1f22; //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: 180,1%;
+//   --color-global-l: 83%;
+//   --color-reversal: #{bs.$gray-100};
+//   --color-link: hsl(var(--color-link-hs),var(--color-link-l));
+//   --color-link-hs: 201,75%;
+//   --color-link-l: 77%;
+//   --color-link-hover: #{hsl.darken(var(--color-link), 12%)};
+//   --color-link-wiki: #{hsl.lighten(var(--primary),20%)};
+//   --color-link-wiki-hs: var(--primary-hs);
+//   --color-link-wiki-l: calc(var(--primary-l) + 20%);
+//   --color-link-wiki-hover: #{hsl.lighten(var(--primary),40%)};
+//   --color-link-nabvar: var(--color-reversal);
+//   --color-inline-code: #c7254e; // optional
+//   --color-search: #000102;
+
+//   // List Group colors
+//   // --color-list: var(--color-global);
+//   --bgcolor-list: transparent;
+//   --color-list-hover: #16617d;
+//   // --bgcolor-list-hover: #{hsl.lighten(var(--bgcolor-global),3%)}; // optional
+//   // --color-list-active: var(--color-reversal);
+//   // --bgcolor-list-active: var(--primary);
+
+//   // Navbar
+//   --bgcolor-navbar: hsl(var(--bgcolor-navbar-hs),var(--bgcolor-navbar-l));
+//   --bgcolor-navbar-h: 0;
+//   --bgcolor-navbar-s: 1%;
+//   --bgcolor-navbar-l: 16%;
+//   --bgcolor-navbar-hs:var(--bgcolor-navbar-h),var(--bgcolor-navbar-s);
+//   --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, #54bafd 0%, #3d98a3 50%, #708b0b 100%);
+
+//   // Logo colors
+//   --bgcolor-logo: #13191c;
+//   --fillcolor-logo-mark: hsl(var(--bgcolor-navbar-h),calc(var(--bgcolor-navbar-s) - 10%),calc(var(--bgcolor-navbar-l) + 15%));
+//   // --fillcolor-logo-mark: #4e5a60;
+
+//   // Sidebar
+//   --bgcolor-sidebar: hsl(var(--bgcolor-sidebar-hs),var(--bgcolor-sidebar-l));
+//   --bgcolor-sidebar-hs: 196,70%;
+//   --bgcolor-sidebar-l: 29%;
+//   // --bgcolor-sidebar-nav-item-active: rgba(#, 0.3); // optional
+//   --text-shadow-sidebar-nav-item-active: 0px 0px 10px #0099ff; // 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
+//   --bgcolor-sidebar-context: #{hsl.darken(var(--bgcolor-sidebar), 13%)};
+//   --bgcolor-sidebar-context-hs: var(--bgcolor-sidebar-hs);
+//   --bgcolor-sidebar-context-l: calc(var(--bgcolor-sidebar-l) - 13%);
+//   --color-sidebar-context: var(--color-global);
+//   --color-sidebar-context-hs: var(--color-global-hs);
+//   --color-sidebar-context-l: var(--color-global-l);
+
+//   // 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(--accentcolor);
+//   --bordercolor-inline-code: #4d4d4d; // optional
+
+//   // admin theme box
+//   --color-theme-color-box: var(--primary);
+
+//   // Navs
+//   .nav-tabs {
+//     border-bottom: var(--accentcolor) 1px solid;
+//     .nav-link {
+//       &:hover {
+//         border-color: #{hsl.lighten(var(--accentcolor), 10%)};
+//         border-bottom: none;
+//       }
+//       &.active {
+//         color: var(--color-link);
+//         background-color: transparent;
+//         border-color: var(--accentcolor);
+//       }
+//     }
+//   }
+
+//   // 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(#{hsl.lighten(var(--primary), 30%)}, var(--primary), #{hsl.darken(var(--primary), 10%)}, #{hsl.darken(var(--primary), 20%)});
+//     }
+//   }
+// }

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

@@ -1,35 +1,37 @@
 import { defineConfig } from 'vite';
 
-const isProd = process.env.NODE_ENV === 'production';
-
 // https://vitejs.dev/config/
-export default defineConfig({
-  build: {
-    outDir: 'dist/themes',
-    manifest: true,
-    rollupOptions: {
-      input: [
-        '/src/styles/antarctic.scss',
-        '/src/styles/blackboard.scss',
-        '/src/styles/christmas.scss',
-        '/src/styles/default.scss',
-        '/src/styles/fire-red.scss',
-        '/src/styles/future.scss',
-        '/src/styles/halloween.scss',
-        '/src/styles/hufflepuff.scss',
-        '/src/styles/island.scss',
-        '/src/styles/jade-green.scss',
-        '/src/styles/kibela.scss',
-        '/src/styles/mono-blue.scss',
-        '/src/styles/nature.scss',
-        '/src/styles/spring.scss',
-        '/src/styles/wood.scss',
-      ],
-      output: {
-        assetFileNames: isProd
-          ? undefined
-          : 'assets/[name].[ext]', // not attach hash
+export default defineConfig(({ mode }) => {
+  const isProd = mode === 'production';
+
+  return {
+    build: {
+      outDir: 'dist/themes',
+      manifest: true,
+      rollupOptions: {
+        input: [
+          // '/src/styles/antarctic.scss',
+          // '/src/styles/blackboard.scss',
+          // '/src/styles/christmas.scss',
+          '/src/styles/default.scss',
+          // '/src/styles/fire-red.scss',
+          // '/src/styles/future.scss',
+          // '/src/styles/halloween.scss',
+          // '/src/styles/hufflepuff.scss',
+          // '/src/styles/island.scss',
+          // '/src/styles/jade-green.scss',
+          // '/src/styles/kibela.scss',
+          '/src/styles/mono-blue.scss',
+          // '/src/styles/nature.scss',
+          // '/src/styles/spring.scss',
+          // '/src/styles/wood.scss',
+        ],
+        output: {
+          assetFileNames: isProd
+            ? undefined
+            : 'assets/[name].[ext]', // not attach hash
+        },
       },
     },
-  },
+  };
 });

turbo.json

@@ -42,7 +42,8 @@
     "@growi/app#styles-prebuilt": {
       "outputs": ["src/styles/prebuilt/**"],
       "inputs": [
-        "src/styles/**/*.scss"
+        "src/styles/**/*.scss",
+        "../../packages/core/scss/**/*.scss"
       ],
       "outputMode": "new-only"
     },