Merge branch 'dev/7.0.x' into feat/130149-able-to-show-header-in-editor

apps/app/src/components/Navbar/GrowiContextualSubNavigation.tsx

@@ -52,7 +52,7 @@ const AuthorInfoSkeleton = () => <Skeleton additionalClass={`${AuthorInfoStyles[
 
 
 const PageEditorModeManager = dynamic(
-  () => import('./PageEditorModeManager'),
+  () => import('./PageEditorModeManager').then(mod => mod.PageEditorModeManager),
   { ssr: false, loading: () => <Skeleton additionalClass={`${PageEditorModeManagerStyles['grw-page-editor-mode-manager-skeleton']}`} /> },
 );
 // TODO: If enable skeleton, we get hydration error when create a page from PageCreateModal
@@ -395,9 +395,9 @@ const GrowiContextualSubNavigation = (props: GrowiContextualSubNavigationProps):
             )}
             {isAbleToChangeEditorMode && (
               <PageEditorModeManager
-                onPageEditorModeButtonClicked={viewType => mutateEditorMode(viewType)}
-                isBtnDisabled={!!isGuestUser || !!isReadOnlyUser}
                 editorMode={editorMode}
+                isBtnDisabled={!!isGuestUser || !!isReadOnlyUser}
+                onPageEditorModeButtonClicked={viewType => mutateEditorMode(viewType)}
               />
             )}
           </div>

apps/app/src/components/Navbar/PageEditorModeManager.module.scss

@@ -2,29 +2,50 @@
 @use '@growi/core/scss/bootstrap/init' as bs;
 @use '~/styles/mixins';
 
-$btn-line-height: 1.2rem;
-
 .grw-page-editor-mode-manager :global {
   .btn {
+    --bs-btn-font-size: 13px;
+
     width: 70px;
+
     white-space: nowrap;
 
     @include mixins.border-vertical('before', 70%, 1, true);
-
-    &.view-button,
-    &.edit-button {
-      line-height: $btn-line-height;
-      .grw-page-editor-mode-manager-icon {
-        @include bs.media-breakpoint-down(sm) {
-          font-size: 1.2rem;
-        }
+    .grw-page-editor-mode-manager-icon {
+      @include bs.media-breakpoint-down(sm) {
+        font-size: 16px;
       }
     }
   }
 }
 
 .grw-page-editor-mode-manager-skeleton :global {
+  width: 139px;
+  height: calc(var(--bs-btn-line-height) + bs.$btn-padding-y*2 + bs.$btn-border-width*2);
+}
+
+// == Colors
+@include bs.color-mode(light) {
+  .grw-page-editor-mode-manager :global {
+    .btn-outline-primary {
+      --bs-btn-border-width: 2px;
 
-  width: 213px;
-  height: calc($btn-line-height + bs.$btn-padding-y*2 + bs.$btn-border-width*2);
+      --bs-btn-color: var(--grw-page-editor-mode-manager-btn-color, var(--grw-primary-600));
+      --bs-btn-border-color: var(--grw-page-editor-mode-manager-btn-border-color, var(--grw-primary-100));
+      --bs-btn-hover-color: var(--grw-page-editor-mode-manager-btn-hover-color, var(--grw-primary-600));
+      --bs-btn-hover-bg: var(--grw-page-editor-mode-manager-btn-bg, var(--grw-primary-100));
+      --bs-btn-hover-border-color: var(--grw-page-editor-mode-manager-btn-hover-border-color, var(--grw-primary-100));
+      --bs-btn-active-color: var(--grw-page-editor-mode-manager-btn-active-color, var(--grw-primary-600));
+      --bs-btn-active-bg: var(--grw-page-editor-mode-manager-btn-bg, var(--grw-primary-100));
+      --bs-btn-active-border-color: var(--grw-page-editor-mode-manager-btn-active-border-color, var(--grw-primary-100));
+    }
+  }
+}
+@include bs.color-mode(dark) {
+  .grw-page-editor-mode-manager :global {
+    .btn-outline-primary {
+      --bs-btn-color: var(--grw-page-editor-mode-manager-btn-color, var(--grw-primary-400));
+      --bs-btn-hover-bg: var(--grw-page-editor-mode-manager-btn-bg, var(--grw-primary-900));
+    }
+  }
 }

apps/app/src/components/Navbar/PageEditorModeManager.jsx → apps/app/src/components/Navbar/PageEditorModeManager.tsx

@@ -1,18 +1,27 @@
-import React, { useCallback } from 'react';
+import React, { type ReactNode, useCallback } from 'react';
 
 import { useTranslation } from 'next-i18next';
-import PropTypes from 'prop-types';
 
 import { EditorMode, useIsDeviceSmallerThanMd } from '~/stores/ui';
 
 import styles from './PageEditorModeManager.module.scss';
 
-/* eslint-disable react/prop-types */
-const PageEditorModeButtonWrapper = React.memo(({
-  editorMode, isBtnDisabled, onClick, targetMode, icon, label, id,
-}) => {
-  const classNames = [`btn btn-outline-primary ${targetMode}-button px-1`];
-  if (editorMode === targetMode) {
+
+type PageEditorModeButtonProps = {
+  currentEditorMode: EditorMode,
+  editorMode: EditorMode,
+  icon: ReactNode,
+  label: ReactNode,
+  isBtnDisabled?: boolean,
+  onClick?: (mode: EditorMode) => void,
+}
+const PageEditorModeButton = React.memo((props: PageEditorModeButtonProps) => {
+  const {
+    currentEditorMode, isBtnDisabled, editorMode, icon, label, onClick,
+  } = props;
+
+  const classNames = ['btn btn-outline-primary px-1'];
+  if (currentEditorMode === editorMode) {
     classNames.push('active');
   }
   if (isBtnDisabled) {
@@ -23,9 +32,8 @@ const PageEditorModeButtonWrapper = React.memo(({
     <button
       type="button"
       className={classNames.join(' ')}
-      onClick={() => { onClick(targetMode) }}
-      id={id}
-      data-testid={`${targetMode}-button`}
+      onClick={() => onClick?.(editorMode)}
+      data-testid={`${editorMode}-button`}
     >
       <span className="d-flex flex-column flex-md-row justify-content-center">
         <span className="grw-page-editor-mode-manager-icon me-md-1">{icon}</span>
@@ -34,20 +42,25 @@ const PageEditorModeButtonWrapper = React.memo(({
     </button>
   );
 });
-/* eslint-enable react/prop-types */
 
-PageEditorModeButtonWrapper.displayName = 'PageEditorModeButtonWrapper';
+type Props = {
+  editorMode: EditorMode | undefined,
+  onPageEditorModeButtonClicked?: (editorMode: EditorMode) => void,
+  isBtnDisabled?: boolean,
+}
 
-function PageEditorModeManager(props) {
+export const PageEditorModeManager = (props: Props): JSX.Element => {
   const {
-    editorMode, onPageEditorModeButtonClicked, isBtnDisabled,
+    editorMode = EditorMode.View,
+    isBtnDisabled,
+    onPageEditorModeButtonClicked,
   } = props;
 
   const { t } = useTranslation();
   const { data: isDeviceSmallerThanMd } = useIsDeviceSmallerThanMd();
 
   const pageEditorModeButtonClickedHandler = useCallback((viewType) => {
-    if (isBtnDisabled) {
+    if (isBtnDisabled ?? false) {
       return;
     }
     if (onPageEditorModeButtonClicked != null) {
@@ -64,21 +77,21 @@ function PageEditorModeManager(props) {
         id="grw-page-editor-mode-manager"
       >
         {(!isDeviceSmallerThanMd || editorMode !== EditorMode.View) && (
-          <PageEditorModeButtonWrapper
-            editorMode={editorMode}
+          <PageEditorModeButton
+            currentEditorMode={editorMode}
+            editorMode={EditorMode.View}
             isBtnDisabled={isBtnDisabled}
             onClick={pageEditorModeButtonClickedHandler}
-            targetMode={EditorMode.View}
             icon={<i className="icon-control-play" />}
             label={t('view')}
           />
         )}
         {(!isDeviceSmallerThanMd || editorMode === EditorMode.View) && (
-          <PageEditorModeButtonWrapper
-            editorMode={editorMode}
+          <PageEditorModeButton
+            currentEditorMode={editorMode}
+            editorMode={EditorMode.Editor}
             isBtnDisabled={isBtnDisabled}
             onClick={pageEditorModeButtonClickedHandler}
-            targetMode={EditorMode.Editor}
             icon={<i className="icon-note" />}
             label={t('Edit')}
           />
@@ -87,16 +100,4 @@ function PageEditorModeManager(props) {
     </>
   );
 
-}
-
-PageEditorModeManager.propTypes = {
-  onPageEditorModeButtonClicked: PropTypes.func,
-  isBtnDisabled: PropTypes.bool,
-  editorMode: PropTypes.string,
 };
-
-PageEditorModeManager.defaultProps = {
-  isBtnDisabled: false,
-};
-
-export default PageEditorModeManager;

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

@@ -2,21 +2,13 @@
 
 // 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);
+        --bs-btn-hover-bg: var(--grw-primary-300);
+        --bs-btn-active-bg: var(--grw-primary-400);
       }
     }
   }
@@ -24,13 +16,10 @@
 @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);
+        --bs-btn-hover-bg: var(--grw-primary-700);
+        --bs-btn-active-bg: var(--grw-primary-800);
       }
     }
   }

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

@@ -218,11 +218,6 @@
 
 .grw-sidebar :global {
   .grw-contextual-navigation {
-    --bs-heading-color: var(--bs-tertiary-color);
-    --bs-body-color: var(--bs-secondary-color);
-    --bs-link-color-rgb: var(--bs-secondary-color-rgb);
-    --bs-link-opacity: .75;
-
     backdrop-filter: blur(20px);
   }
 }
@@ -242,7 +237,7 @@
     --bs-border-color: var(--grw-highlight-800);
 
     .grw-contextual-navigation {
-      background-color: rgba(var(--grw-highlight-900-rgb), .5);
+      background-color: rgba(var(--grw-highlight-800-rgb), .5);
     }
   }
 }

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

@@ -0,0 +1,14 @@
+@use '@growi/core/scss/bootstrap/init' as bs;
+
+.grw-sidebar-contents :global {
+
+  --bs-heading-color: var(--bs-tertiary-color);
+  --bs-body-color: var(--bs-secondary-color);
+  --bs-link-color-rgb: var(--bs-secondary-color-rgb);
+  --bs-link-opacity: .75;
+
+  .list-group-item {
+    --bs-list-group-bg: transparent;
+  }
+
+}

apps/app/src/components/Sidebar/SidebarContents.tsx

@@ -9,6 +9,9 @@ import { PageTree } from './PageTree';
 import { RecentChanges } from './RecentChanges';
 import Tag from './Tag';
 
+import styles from './SidebarContents.module.scss';
+
+
 export const SidebarContents = memo(() => {
   const { data: currentSidebarContents } = useCurrentSidebarContents();
 
@@ -31,7 +34,9 @@ export const SidebarContents = memo(() => {
   }
 
   return (
-    <Contents />
+    <div className={`grw-sidebar-contents ${styles['grw-sidebar-contents']}`}>
+      <Contents />
+    </div>
   );
 });
 SidebarContents.displayName = 'SidebarContents';

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

@@ -124,7 +124,7 @@
 }
 @include bs.color-mode(dark) {
   .grw-sidebar-nav :global {
-    background-color: var(--grw-sidebar-nav-bg, var(--grw-highlight-900));
+    background-color: var(--grw-sidebar-nav-bg, var(--grw-highlight-800));
 
     .btn-primary {
       --bs-btn-color: var(--grw-sidebar-nav-btn-color, var(--grw-primary-400));

apps/app/src/styles/molecules/_list-group-item.scss

@@ -0,0 +1,14 @@
+@use '@growi/core/scss/bootstrap/init' as bs;
+
+@include bs.color-mode(light) {
+  .list-group-item-action {
+    --bs-list-group-action-hover-bg: var(--grw-primary-200);
+    --bs-list-group-action-active-bg: var(--grw-primary-400);
+  }
+}
+@include bs.color-mode(dark) {
+  .list-group-item-action {
+    --bs-list-group-action-hover-bg: var(--grw-primary-800);
+    --bs-list-group-action-active-bg: var(--grw-primary-800);
+  }
+}

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

@@ -16,9 +16,7 @@
 
   a {
     @extend .link-offset-2;
-    @extend .link-underline-opacity-25;
-    @extend .link-underline-opacity-50-hover;
-    text-decoration: underline;
+    text-decoration-line: underline;
   }
 
   // @extend .text-break;
@@ -297,10 +295,13 @@
 // == Colors
 .wiki {
   a {
-    color: rgba(
-      var(--grw-wiki-link-color-rgb, var(--bs-link-color-rgb)),
-      var(--bs-link-opacity, 1)
-    );
+    @extend .link-underline-opacity-25;
+    @extend .link-underline-opacity-100-hover;
+
+    $color-rgb: var(--grw-wiki-link-color-rgb, var(--bs-link-color-rgb));
+
+    color: rgba($color-rgb, var(--bs-link-opacity, 1));
+    text-decoration-color: rgba($color-rgb, var(--bs-link-underline-opacity, 1));
 
     &:hover {
       color: rgba(

apps/app/src/styles/style-app.scss

@@ -10,6 +10,7 @@
 
 // molecules
 @import 'molecules/toastr';
+@import 'molecules/list-group-item';
 // @import 'molecules/slack-notification';
 // @import 'molecules/duplicated-paths-table.scss';
 

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

@@ -5,12 +5,16 @@
 
 // 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;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #6c757d !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+
+// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
+// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
+$min-contrast-ratio: 3 !default;

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

@@ -1,31 +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);
+@mixin generate-color-palette($color-id, $color-value, $shade-color: black, $tint-color: white, $shade-color-ratio: 20%, $tint-color-ratio: 20%, $prefix: 'grw-') {
+  $color-900: mix($shade-color, $color-value, $shade-color-ratio * 4);
+  $color-800: mix($shade-color, $color-value, $shade-color-ratio * 3);
+  $color-700: mix($shade-color, $color-value, $shade-color-ratio * 2);
+  $color-600: mix($shade-color, $color-value, $shade-color-ratio);
+  $color-500: $color-value;
+  $color-400: mix($tint-color, $color-value, $tint-color-ratio);
+  $color-300: mix($tint-color, $color-value, $tint-color-ratio * 2);
+  $color-200: mix($tint-color, $color-value, $tint-color-ratio * 3);
+  $color-100: mix($tint-color, $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-id}-900: #{$color-900};
+  --#{$prefix}#{$color-id}-800: #{$color-800};
+  --#{$prefix}#{$color-id}-700: #{$color-700};
+  --#{$prefix}#{$color-id}-600: #{$color-600};
+  --#{$prefix}#{$color-id}-500: #{$color-500};
+  --#{$prefix}#{$color-id}-400: #{$color-400};
+  --#{$prefix}#{$color-id}-300: #{$color-300};
+  --#{$prefix}#{$color-id}-200: #{$color-200};
+  --#{$prefix}#{$color-id}-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)};
+  --#{$prefix}#{$color-id}-900-rgb: #{to-rgb($color-900)};
+  --#{$prefix}#{$color-id}-800-rgb: #{to-rgb($color-800)};
+  --#{$prefix}#{$color-id}-700-rgb: #{to-rgb($color-700)};
+  --#{$prefix}#{$color-id}-600-rgb: #{to-rgb($color-600)};
+  --#{$prefix}#{$color-id}-500-rgb: #{to-rgb($color-500)};
+  --#{$prefix}#{$color-id}-400-rgb: #{to-rgb($color-400)};
+  --#{$prefix}#{$color-id}-300-rgb: #{to-rgb($color-300)};
+  --#{$prefix}#{$color-id}-200-rgb: #{to-rgb($color-200)};
+  --#{$prefix}#{$color-id}-100-rgb: #{to-rgb($color-100)};
 }

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

@@ -3,14 +3,13 @@
   @import '@growi/core/scss/bootstrap/theming/variables';
   @import '@growi/core/scss/bootstrap/theming/utils/color-palette';
 
-  $primary: #409cb9;
-  $secondary: $gray-600;
+  $primary: #439cb9;
   $highlight: #93e3ea;
 
-  @include generate-color-palette('primary', $primary);
-  @include generate-color-palette('highlight', $highlight);
+  @include generate-color-palette('primary', $primary, #021529, white);
+  @include generate-color-palette('highlight', $highlight, black, #edffff);
 
-  $body-color:                $gray-900;
+  $body-color:                $gray-700;
   $body-bg:                   white;
 
   $body-secondary-color:      rgba($body-color, .75);
@@ -42,13 +41,12 @@
   @import '@growi/core/scss/bootstrap/theming/utils/color-palette';
 
   $primary: #439cb9;
-  $secondary: $gray-500;
-  $highlight: #64a9ed;
+  $highlight: #166cc0;
 
-  @include generate-color-palette('primary', $primary);
-  @include generate-color-palette('highlight', $highlight);
+  @include generate-color-palette('primary', $primary, #021529, white);
+  @include generate-color-palette('highlight', $highlight, black, white);
 
-  $body-color-dark:                   $gray-200;
+  $body-color-dark:                   $gray-400;
   $body-bg-dark:                      #16202c;
 
   $body-secondary-color-dark:         rgba($body-color-dark, .75);
@@ -59,7 +57,7 @@
 
   $border-color-dark:                 $gray-700;
 
-  $link-color-dark:                   $gray-300;
+  $link-color-dark:                   $gray-400;
 
   @import 'bootstrap/scss/variables';
   @import 'bootstrap/scss/variables-dark';