fix apply-colors-dark

packages/app/src/styles/theme/_apply-colors-dark.scss

@@ -2,47 +2,50 @@
 @use '../bootstrap/init' as *;
 @use '../atoms/mixins/buttons' as mixins-buttons;
 @use './mixins/count-badge';
+@use './mixins/hsl-button';
+@use './hsl-functions' as hsl;
 
 // determine optional variables
 $color-list: var(--color-list,var(--color-global));
 $bgcolor-list: var(--bgcolor-list,var(--bgcolor-global));
 $color-list-hover: var(--color-list-hover,var(--color-global));
-$color-list-active: $color-reversal !default;
+$color-list-active: var(--color-list-active,var(--color-reversal));
+$bgcolor-list-hover: var(--bgcolor-list-hover,var(--bgcolor-global));
 $bgcolor-list-active: var(--bgcolor-list-active,var(--primary));
 $bgcolor-subnav: var(--bgcolor-subnav);
 $color-table: var(--color-table,white);
-$bgcolor-table: #343a40 !default;
-$border-color-table: lighten($bgcolor-table, 7.5%) !default;
-$color-table-hover: rgba(white, 0.075) !default;
-$bgcolor-table-hover: lighten($bgcolor-table, 7.5%) !default;
+$bgcolor-table: var(--bgcolor-table,#343a40);
+$border-color-table: var(--border-color-table,hsl.lighten(var(--bgcolor-table),7.5%),lighten(#343a40, 7.5%));
+$color-table-hover: var(--color-table-hover,rgba(white, 0.075));
+$bgcolor-table-hover: var(--bgcolor-table-hover,hsl.lighten(var(--bgcolor-table),7.5%),lighten(#343a40, 7.5%));
 $bgcolor-sidebar-list-group: var(--bgcolor-sidebar-list-group,var(--bgcolor-list));
-$color-tags: #949494 !default;
-$bgcolor-tags: $dark !default;
-$border-color-global: $gray-500 !default;
-$border-color-toc: $border-color-global !default;
+$color-tags: var(--color-tags,#949494);
+$bgcolor-tags: var(--bgcolor-tags,var(--dark));
+$border-color-global: var(--border-color-global,#{$gray-500});
+$border-color-toc: var(--border-color-toc,$border-color-global);
 $color-dropdown: var(--color-dropdown,var(--color-global));
 $bgcolor-dropdown: var(--bgcolor-dropdown,var(--bgcolor-global));
 $color-dropdown-link: var(--color-dropdown-link,var(--color-global));
-$color-dropdown-link-hover: $light !default;
-$bgcolor-dropdown-link-hover: var(--bgcolor-dropdown-link-hover);
-$color-dropdown-link-active: $light !default;
+$color-dropdown-link-hover: var(--color-dropdown-link-hover,var(--light));
+$bgcolor-dropdown-link-hover: var(--bgcolor-dropdown-link-hover,var(--primary));
+$color-dropdown-link-active: var(--color-dropdown-link-active,var(--light));
 $bgcolor-dropdown-link-active: var(--bgcolor-dropdown-link-active,var(--primary));
 
 // override bootstrap variables
 $text-muted: $gray-550;
-$table-dark-color: var(--color-table);
+$table-dark-color: $color-table;
 $table-dark-bg: $bgcolor-table;
 $table-dark-border-color: $border-color-table;
-$table-dark-hover-color: var(--color-table-hover);
+$table-dark-hover-color: $color-table-hover;
 $table-dark-hover-bg: $bgcolor-table-hover;
 $border-color: $border-color-global;
-$dropdown-color: var(--color-dropdown);
-$dropdown-bg: var(--bgcolor-dropdown);
-$dropdown-link-color: var(--color-dropdown-link);
-$dropdown-link-hover-color: var(--color-dropdown-link-hover);
-$dropdown-link-hover-bg: var(--bgcolor-dropdown-link-hover);
-$dropdown-link-active-color: var(--color-dropdown-link-active);
-$dropdown-link-active-bg: bar(--bgcolor-dropdown-link-active);
+$dropdown-color: $color-dropdown;
+$dropdown-bg: $bgcolor-dropdown;
+$dropdown-link-color: $color-dropdown-link;
+$dropdown-link-hover-color: $color-dropdown-link-hover;
+$dropdown-link-hover-bg: $bgcolor-dropdown-link-hover;
+$dropdown-link-active-color: $color-dropdown-link-active;
+$dropdown-link-active-bg: $bgcolor-dropdown-link-active;
 
 @import './mixins/list-group';
 @import './reboot-bootstrap-text';
@@ -52,12 +55,12 @@ $dropdown-link-active-bg: bar(--bgcolor-dropdown-link-active);
 
 // List Group
 @include override-list-group-item(
-  var(--color-list),
-  var(--bgcolor-sidebar-list-group),
-  var(--color-list-hover),
-  var(--bgcolor-list-hover),
-  var(--color-list-active),
-  var(--bgcolor-list-active)
+  $color-list,
+  $bgcolor-sidebar-list-group,
+  $color-list-hover,
+  $bgcolor-list-hover,
+  $color-list-active,
+  $bgcolor-list-active
 );
 /*
   * Form
@@ -66,9 +69,8 @@ input.form-control,
 select.form-control,
 select.custom-select,
 textarea.form-control {
-  --bgcolor-global-darken5: hsl(from var(--bgcolor-global) h s calc(l - 5%));
   color: var(--color-global);
-  background-color: var(--bgcolor-global-darken5);
+  background-color: hsl.darken(var(--bgcolor-global), 5%);
   border-color: $border-color-global;
   &:focus {
     background-color: var(--bgcolor-global);
@@ -79,10 +81,8 @@ textarea.form-control {
 
 .form-control[disabled],
 .form-control[readonly] {
-  --color-global-light-10:hsl(from var(--color-global) h s calc(l + 10%));
-  --color-global-light-5:hsl(from var(--color-global) h s calc(l + 5%));
-  color: var(--color-global-light-10);
-  background-color: var(--color-global-light-5);
+  color: hsl.lighten(var(--color-global),10%);
+  background-color: hsl.lighten(var(--color-global),5%);
 }
 
 .input-group > .input-group-prepend > .input-group-text {
@@ -100,8 +100,7 @@ textarea.form-control {
 }
 
 label.custom-control-label::before {
-  --bgcolor-global-darken5: hsl(from var(--bgcolor-global) h s calc(l - 5%));
-  background-color: var(--bgcolor-global-darken5);
+  background-color: hsl.darken(var(--bgcolor-global),5%);
 }
 
 /*
@@ -114,18 +113,18 @@ label.custom-control-label::before {
 /*
  * Card
  */
-.card:not([class*='bg-']):not(.well):not(.card-disabled) {
-  @extend .bg-dark;
-}
+// .card:not([class*='bg-']):not(.well):not(.card-disabled) {
+//   @extend .bg-dark;
+// }
 
 // [TODO] GW-3219 modify common color of well in dark theme, then remove below css.
 .card.well {
-  border-color: $secondary;
+  border-color: var(--secondary);
 }
 
 .card.card-disabled {
   background-color: lighten($dark, 10%);
-  border-color: $secondary;
+  border-color: var(--secondary);
 }
 
 /*
@@ -134,7 +133,9 @@ label.custom-control-label::before {
 ul.pagination {
   li.page-item {
     button.page-link {
-      @extend .btn-dark;
+      @include button-variant($dark, $dark);
+      @include mixins-buttons.button-svg-icon-variant($dark, $dark);
+      box-shadow: none !important;
     }
   }
 }
@@ -198,7 +199,9 @@ ul.pagination {
   }
 
   .btn-external-auth-tab {
-    @extend .btn-dark;
+    @include button-variant($dark, $dark);
+    @include mixins-buttons.button-svg-icon-variant($dark, $dark);
+    box-shadow: none !important;
   }
 
   // footer link text
@@ -224,20 +227,21 @@ ul.pagination {
  * GROWI subnavigation
  */
 .grw-drawer-toggler {
-  @extend .btn-dark;
-  color: $gray-400;
+  @include button-variant($dark, $dark);
+  @include mixins-buttons.button-svg-icon-variant($dark, $dark);
+  color: #{$gray-400};
+  box-shadow: none !important;
+
 }
 
 /*
  * GROWI page list
  */
 .page-list {
-  --color-global-darken10: hsl(from var(--color-global) h s calc(l - 10%));
-  --color-global-darken9: hsl(from var(--color-global) h s calc(l - 9%));
   .page-list-ul {
     > li {
       > span.page-list-meta {
-        color: var(--color-global-darken10);
+        color: hsl.darken(var(--color-global),10%);
       }
     }
   }
@@ -245,13 +249,13 @@ ul.pagination {
   // List group
   .list-group-item {
     &.active {
-      background-color: var(--color-global-darken9);
+      background-color: hsl.darken(var(--color-global),10%);
     }
     .list-group-item-action:hover {
       background-color: var(--bgcolor-list-hover);
     }
     .page-list-snippet {
-      color: var(--color-global-darken10);
+      color: hsl.darken(var(--color-global),10%);
     }
   }
 }
@@ -260,9 +264,8 @@ ul.pagination {
  * GROWI ToC
  */
 .revision-toc-content {
-  --color-global-lighten30: hsl(from var(--color-global) h s calc(l + 30%));
   ::marker {
-    color: var(--color-global-lighten30);
+    color: hsl.lighten(var(--color-global),30%);
   }
 }
 
@@ -274,7 +277,7 @@ ul.pagination {
 }
 
 .grw-subnav-fixed-container .grw-subnav {
-  background-color: var(--bgcolor-subnav); opacity:0.85;
+  background-color: hsl.alpha(var(--bgcolor-subnav),15%);
 }
 
 .grw-page-editor-mode-manager {
@@ -300,41 +303,35 @@ ul.pagination {
 .grw-sidebar {
   // List
   @include override-list-group-item(
-    var(--color-list),
-    var(--bgcolor-sidebar-list-group),
-    var(--color-list-hover),
-    var(--bgcolor-list-hover),
-    var(--color-list-active),
-    var(--bgcolor-list-active)
+    $color-list,
+    $bgcolor-sidebar-list-group,
+    $color-list-hover,
+    $bgcolor-list-hover,
+    $color-list-active,
+    $bgcolor-list-active
   );
   // Pagetree
   .grw-pagetree {
-    --bgcolor-sidebar-context-lighten8: hsl(from var(--bgcolor-sidebar-context) h s calc(l + 8%));
-    --bgcolor-sidebar-context-lighten15: hsl(from var(--bgcolor-sidebar-context) h s calc(l + 15%));
-    --color-sidebar-context-darken15: hsl(from var(--bgcolor-sidebar-context) h s calc(l - 15%));
-    --color-sidebar-context-darken10: hsl(from var(--bgcolor-sidebar-context) h s calc(l - 10%));
-    --bgcolor-sidebar-context-lighten18: hsl(from var(--bgcolor-sidebar-context) h s calc(l + 18%));
-    --bgcolor-sidebar-context-lighten24: hsl(from var(--bgcolor-sidebar-context) h s calc(l + 24%));
     @include override-list-group-item-for-pagetree(
       var(--color-sidebar-context),
-      var(--bgcolor-sidebar-context-lighten8),
-      var(--bgcolor-sidebar-context-lighten15),
-      var(--color-sidebar-context-darken15),
-      var(--color-sidebar-context-darken10),
-      var(--bgcolor-sidebar-context-lighten18),
-      var(--bgcolor-sidebar-context-lighten24)
+      hsl.lighten(var(--bgcolor-sidebar-context),8%),
+      hsl.lighten(var(--bgcolor-sidebar-context),15%),
+      hsl.darken(var(--color-sidebar-context),15%),
+      hsl.darken(var(--color-sidebar-context),10%),
+      hsl.lighten(var(--bgcolor-sidebar-context),18%),
+      hsl.lighten(var(--bgcolor-sidebar-context),24%)
     );
     .grw-pagetree-triangle-btn {
-      @include mixins-buttons.button-outline-svg-icon-variant($secondary, $gray-200);
+      @include mixins-buttons.button-outline-svg-icon-variant(var(--secondary), $gray-200);
     }
     .btn-page-item-control {
-      @include button-outline-variant($gray-500, $gray-500, $secondary, transparent);
+      @include hsl-button.button-outline-variant($gray-500, $gray-500, var(--secondary), transparent);
       @include hover() {
-        background-color: var(--bgcolor-sidebar-context-lighten20);
+        background-color: hsl.lighten(var(--bgcolor-sidebar-context),20%);
       }
       &:not(:disabled):not(.disabled):active,
       &:not(:disabled):not(.disabled).active {
-        background-color: var(--bgcolor-sidebar-context-lighten34);
+        background-color: hsl.lighten(var(--bgcolor-sidebar-context),34%);
       }
       box-shadow: none !important;
     }
@@ -347,7 +344,7 @@ ul.pagination {
 }
 
 .btn.btn-page-item-control {
-  @include button-outline-variant($gray-500, $gray-500, $secondary, transparent);
+  @include hsl-button.button-outline-variant($gray-500, $gray-500, var(--secondary), transparent);
   @include hover() {
     background-color: $gray-700;
   }
@@ -364,11 +361,11 @@ ul.pagination {
  */
 .popover {
   background-color: var(--bgcolor-global);
-  border-color: $secondary;
+  border-color: var(--secondary);
   .popover-header {
-    color: $white;
-    background-color: $secondary;
-    border-color: $secondary;
+    color: white;
+    background-color: var(--secondary);
+    border-color: var(--secondary);
   }
   .popover-body {
     color: inherit;
@@ -376,7 +373,7 @@ ul.pagination {
 
   &.bs-popover-top .arrow {
     &::before {
-      border-top-color: $secondary;
+      border-top-color: var(--secondary);
     }
 
     &::after {
@@ -385,7 +382,7 @@ ul.pagination {
   }
   &.bs-popover-bottom .arrow {
     &::before {
-      border-bottom-color: $secondary;
+      border-bottom-color: var(--secondary);
     }
 
     &::after {
@@ -394,7 +391,7 @@ ul.pagination {
   }
   &.bs-popover-right .arrow {
     &::before {
-      border-right-color: $secondary;
+      border-right-color: var(--secondary);
     }
 
     &::after {
@@ -403,7 +400,7 @@ ul.pagination {
   }
   &.bs-popover-left .arrow {
     &::before {
-      border-left-color: $secondary;
+      border-left-color: var(--secondary);
     }
 
     &::after {
@@ -432,12 +429,12 @@ ul.pagination {
 
   .custom-control-label {
     &::before {
-      background-color: $secondary;
+      background-color: var(--secondary);
       border-color: transparent;
     }
     &::after {
       background-color: darken($color-slack, 5%);
-      // background-image: url(/images/icons/slack/slack-logo-dark-off.svg); -- should be specified in app -- 2022.12.09 Yuki Takei
+      background-image: url(/images/icons/slack/slack-logo-dark-off.svg);
     }
   }
 
@@ -447,7 +444,7 @@ ul.pagination {
     }
     &::after {
       background-color: darken($color-slack, 5%);
-      // background-image: url(/images/icons/slack/slack-logo-dark-on.svg); -- should be specified in app -- 2022.12.09 Yuki Takei
+      background-image: url(/images/icons/slack/slack-logo-dark-on.svg);
     }
   }
   .grw-slack-logo svg {
@@ -463,7 +460,7 @@ ul.pagination {
   }
 
   .grw-btn-slack-triangle {
-    color: $secondary;
+    color: var(--secondary);
   }
 }
 
@@ -471,15 +468,15 @@ ul.pagination {
  * GROWI HandsontableModal
  */
 .grw-hot-modal-navbar {
-  background-color: $dark;
+  background-color: var(--dark);
 }
 
 .wiki {
   h1 {
-    border-color: lighten($border-color-theme, 10%);
+    border-color: hsl.lighten(var(--border-color-theme),10%);
   }
   h2 {
-    border-color: $border-color-theme;
+    border-color: var(--border-color-theme);
   }
 }
 

packages/app/src/styles/theme/_apply-colors-light.scss

@@ -82,7 +82,7 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
  */
 .card.card-disabled {
   background-color: var(--background-color);
-  border-color: #{$gray-200};
+  border-color: $gray-200;
 }
 
 /*
@@ -179,7 +179,7 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
   .btn-outline-primary {
     &:hover {
       color: var(--primary);
-      background-color: #{$gray-200};
+      background-color: $gray-200;
     }
   }
 }
@@ -187,7 +187,7 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
 .grw-drawer-toggler {
   @include button-variant($light, $light);
   @include mixins-buttons.button-svg-icon-variant($light, $light);
-  color: #{$gray-500};
+  color: $gray-500;
   box-shadow: none !important;
 }
 
@@ -213,16 +213,16 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
   .grw-pagetree {
     @include override-list-group-item-for-pagetree(
       var(--color-sidebar-context),
-      #{hsl.darken(var(--bgcolor-sidebar-context),5%)},
-      #{hsl.darken(var(--bgcolor-sidebar-context),12%)},
-      #{hsl.lighten(var(--color-sidebar-context),10%)},
-      #{hsl.lighten(var(--color-sidebar-context),8%)},
-      #{hsl.darken(var(--bgcolor-sidebar-context),15%)},
-      #{hsl.darken(var(--bgcolor-sidebar-context),24%)}
+      hsl.darken(var(--bgcolor-sidebar-context),5%),
+      hsl.darken(var(--bgcolor-sidebar-context),12%),
+      hsl.lighten(var(--color-sidebar-context),10%),
+      hsl.lighten(var(--color-sidebar-context),8%),
+      hsl.darken(var(--bgcolor-sidebar-context),15%),
+      hsl.darken(var(--bgcolor-sidebar-context),24%)
     );
 
     .grw-pagetree-triangle-btn {
-      @include mixins-buttons.button-outline-svg-icon-variant(#{gray-400}, var(--primary));
+      @include mixins-buttons.button-outline-svg-icon-variant($gray-400, var(--primary));
     }
   }
   .private-legacy-pages-link {
@@ -279,7 +279,7 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
  * GROWI Editor
  */
 .grw-editor-navbar-bottom {
-  background-color: #{$gray-50};
+  background-color: $gray-50;
 
   #slack-mark-white {
     display: none;
@@ -301,7 +301,7 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
  */
 .link-edit-modal {
   span i {
-    color: #{$gray-400};
+    color: $gray-400;
   }
 }
 
@@ -310,7 +310,7 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
  */
 
 .grw-grid-edit-preview {
-  background: #{$gray-100};
+  background: $gray-100;
 }
 
 /*
@@ -318,9 +318,7 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
  */
 .grw-slack-notification {
   background-color: white;
-  --color-slack: hsl(var(--color-slack-hs),var(--color-slack-l));
-  --color-slack-hs: 299,58%;
-  --color-slack-l: 19%;
+  $color-slack: #4b144c;
 
   .form-control {
     background: white;
@@ -328,7 +326,7 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
 
   .custom-control-label {
     &::before {
-      background-color: #{$gray-200};
+      background-color: $gray-200;
       border-color: transparent;
     }
     &::after {
@@ -338,7 +336,7 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
   }
   .custom-control-input:checked ~ .custom-control-label {
     &::before {
-      background-color: #{hsl.lighten(var(--color-slack), 60%)};
+      background-color: lighten($color-slack, 60%);
     }
     &::after {
       background-image: url(/images/icons/slack/slack-logo-on.svg);
@@ -416,7 +414,7 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
 */
 .grw-side-contents-sticky-container {
   .grw-count-badge {
-    @include count-badge.count-badge(#{$gray-600}, #{$gray-200});
+    @include count-badge.count-badge($gray-600, $gray-200);
   }
 
   .grw-border-vr {

packages/app/src/styles/theme/_apply-colors.scss

@@ -104,16 +104,16 @@ code:not([class^='language-']) {
 ul.pagination {
   li.page-item.disabled {
     button.page-link {
-      color: #{$gray-400};
+      color: $gray-400;
     }
   }
   li.page-item.active {
     button.page-link {
-      color: #{hsl.contrast(var(--primary))};
+      color: hsl.contrast(var(--primary));
       background-color: var(--primary);
       &:hover,
       &:focus {
-        color: #{hsl.contrast(var(--primary))};
+        color: hsl.contrast(var(--primary));
         background-color: var(--primary);
       }
     }
@@ -155,11 +155,11 @@ ul.pagination {
   &:hover {
     svg {
       .group1 {
-        fill: #{var.$growi-green};
+        fill: var.$growi-green;
       }
 
       .group2 {
-        fill: #{var.$growi-blue};
+        fill: var.$growi-blue;
       }
     }
   }
@@ -186,12 +186,12 @@ ul.pagination {
 
   // for https://youtrack.weseek.co.jp/issue/GW-2603
   .search-typeahead {
-    background-color: #{hsl.alpha(var(--bgcolor-global),10%)};
+    background-color: hsl.alpha(var(--bgcolor-global),10%);
   }
 }
 
 .grw-sidebar {
-  $color-resize-button: var(--color-resize-button--,var(--color-global));
+  $color-resize-button: var(--color-resize-button,var(--color-global));
   $bgcolor-resize-button: var(--bgcolor-resize-button,white);
   $color-resize-button-hover: var(--color-resize-button-hover,var(--color-reversal));
   $bgcolor-resize-button-hover: var(--bgcolor-resize-button-hover,#{hsl.lighten(var(--bgcolor-resize-button), 5%)});
@@ -240,7 +240,7 @@ ul.pagination {
       }
       // fukidashi
       &:after {
-        border-right-color: var(--bgcolor-sidebar-context);
+        border-right-color: var(--bgcolor-sidebar-context) !important;
       }
     }
   }
@@ -297,10 +297,10 @@ ul.pagination {
         }
 
         .grw-recent-changes-item-lower {
-          color: #{$gray-500};
+          color: $gray-500;
 
           svg {
-            fill: #{$gray-500};
+            fill: $gray-500;
           }
         }
       }
@@ -330,7 +330,7 @@ ul.pagination {
       color: $color-modal-header;
     }
     .close {
-      color: #{hsl.alpha(var(--primary),50%)};
+      color: hsl.alpha(var(--primary),50%);
 
       &:hover {
         opacity: 0.9;
@@ -351,7 +351,7 @@ ul.pagination {
   .nav-item {
     &:hover,
     &:focus {
-      background-color: #{hsl.alpha(var(--color-link),10%)};
+      background-color: hsl.alpha(var(--color-link),10%);
     }
     .nav-link {
       -webkit-appearance: none;
@@ -395,7 +395,7 @@ ul.pagination {
 
 .admin-bot-card {
   .grw-botcard-title-active {
-    color: #{$gray-200};
+    color: $gray-200;
   }
 }
 
@@ -404,7 +404,7 @@ ul.pagination {
  */
 .admin-page {
   span.slider {
-    background-color: #{$gray-300};
+    background-color: $gray-300;
 
     &:before {
       background-color: white;
@@ -488,7 +488,7 @@ ul.pagination {
 
       &.list-group-item-action {
         &.active {
-          background-color: #{hsl.lighten(var(--bgcolor-global),76%)};
+          background-color: hsl.lighten(var(--bgcolor-global),76%);
           border-left-color: var(--primary);
         }
       }
@@ -501,7 +501,7 @@ ul.pagination {
  */
 .layout-root.editing {
   .main {
-    background-color: #{hsl.darken(var(--bgcolor-global),2%)};
+    background-color: hsl.darken(var(--bgcolor-global),2%);
 
     .page-editor-editor-container {
       border-right-color: var(--border-color-theme);
@@ -543,7 +543,7 @@ body.editing-sidebar {
 }
 
 .grid-preview-col-0 {
-  background: #{var.$growi-blue};
+  background: var.$growi-blue;
 }
 
 .grid-preview-col-1 {
@@ -555,7 +555,7 @@ body.editing-sidebar {
 }
 
 .grid-preview-col-3 {
-  background: #{var.$growi-green};
+  background: var.$growi-green;
 }
 
 /*
@@ -584,8 +584,8 @@ body.editing-sidebar {
     .nav.nav-tabs {
       > li > a.active {
         background: transparent;
-        border-bottom: solid 1px #{hsl.darken(var(--bgcolor-global),4%)};
-        border-bottom-color: #{hsl.darken(var(--bgcolor-global),4%)};
+        border-bottom: solid 1px hsl.darken(var(--bgcolor-global),4%);
+        border-bottom-color: hsl.darken(var(--bgcolor-global),4%);
       }
     }
   }
@@ -620,7 +620,7 @@ mark.rbt-highlight-text {
  * GROWI page content footer
  */
 .page-content-footer {
-  background-color: #{hsl.darken(var(--bgcolor-global),2%)};
+  background-color: hsl.darken(var(--bgcolor-global),2%);
   border-top-color: var(--border-color-theme);
 }
 
@@ -658,11 +658,11 @@ mark.rbt-highlight-text {
 
 .grw-fab {
   .btn-create-page {
-    fill: #{hsl.contrast(var(--primary))};
+    fill: hsl.contrast(var(--primary)) !important;
   }
 
   .btn-scroll-to-top {
-    fill: #{$gray-900};
+    fill: $gray-900;
   }
 }
 

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

@@ -89,6 +89,7 @@
   --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);
@@ -96,6 +97,7 @@
   --bgcolor-resize-button-l: var(--accent-l);
   --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);
@@ -103,6 +105,7 @@
   --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: #{$gray-50}; // optional
 
@@ -150,7 +153,7 @@
 :root[data-theme='dark'] {
   --primary: hsl(var(--primary-hs),var(--primary-l));
   --primary-hs: 216.8,85.1%;
-  --prymary-l: 44.7;
+  --primary-l: 44.7%;
   --accent: hsl(var(--accent-hs),var(--accent-l));
   --accent-hs: 307,100%;
   --accent-l: 43%;
@@ -208,11 +211,14 @@
   --fillcolor-logo-mark: #{$gray-700};
 
   // Sidebar
-  --bgcolor-sidebar: hsl(var(--bgcolor-sidebar-hs),var(---gcolor-sidebar-l));
+  --bgcolor-sidebar: hsl(var(--bgcolor-sidebar-hs),var(--bgcolor-sidebar-l));
   --bgcolor-sidebar-hs: 216.7,65%;
-  --bgcolor-sidebar-l: 33.3%;
+  --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);
@@ -226,7 +232,9 @@
   --bgcolor-sidebar-list-group: #1c2a3e; // optional
 
   // Subnavigation
-  --bgcolor-subnav: --bgcolor-list-hover: #{hsl.lighten(var(--bgcolor-global),3%)};  // optional
+  --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: #{$gray-700}; // optional

packages/preset-themes/src/styles/theme/_apply-colors-dark.scss

@@ -1,561 +1,558 @@
-@use '../variables' as var;
-@use '../bootstrap/init' as *;
-@use '../atoms/mixins/buttons' as mixins-buttons;
-@use './mixins/count-badge';
-@use './mixins/hsl-button';
-@use './hsl-functions' as hsl;
-
-// determine optional variables
-$color-list: var(--color-list,var(--color-global));
-$bgcolor-list: var(--bgcolor-list,var(--bgcolor-global));
-$color-list-hover: var(--color-list-hover,var(--color-global));
-$color-list-active: var(--color-list-active,var(--color-reversal));
-$bgcolor-list-hover: var(--bgcolor-list-hover,var(--bgcolor-global));
-$bgcolor-list-active: var(--bgcolor-list-active,var(--primary));
-$bgcolor-subnav: var(--bgcolor-subnav);
-$color-table: var(--color-table,white);
-$bgcolor-table: var(--bgcolor-table,#343a40);
-$border-color-table: var(--border-color-table,hsl.lighten(var(--bgcolor-table),7.5%),lighten(#343a40, 7.5%));
-$color-table-hover: var(--color-table-hover,rgba(white, 0.075));
-$bgcolor-table-hover: var(--bgcolor-table-hover,hsl.lighten(var(--bgcolor-table),7.5%),lighten(#343a40, 7.5%));
-$bgcolor-sidebar-list-group: var(--bgcolor-sidebar-list-group,var(--bgcolor-list));
-$color-tags: var(--color-tags,#949494);
-$bgcolor-tags: var(--bgcolor-tags,var(--dark));
-$border-color-global: var(--border-color-global,#{$gray-500});
-$border-color-toc: var(--border-color-toc,$border-color-global);
-$color-dropdown: var(--color-dropdown,var(--color-global));
-$bgcolor-dropdown: var(--bgcolor-dropdown,var(--bgcolor-global));
-$color-dropdown-link: var(--color-dropdown-link,var(--color-global));
-$color-dropdown-link-hover: var(--color-dropdown-link-hover,var(--light));
-$bgcolor-dropdown-link-hover: var(--bgcolor-dropdown-link-hover,var(--primary));
-$color-dropdown-link-active: var(--color-dropdown-link-active,var(--light));
-$bgcolor-dropdown-link-active: var(--bgcolor-dropdown-link-active,var(--primary));
-
-// override bootstrap variables
-$text-muted: $gray-550;
-$table-dark-color: $color-table;
-$table-dark-bg: $bgcolor-table;
-$table-dark-border-color: $border-color-table;
-$table-dark-hover-color: $color-table-hover;
-$table-dark-hover-bg: $bgcolor-table-hover;
-$border-color: $border-color-global;
-$dropdown-color: $color-dropdown;
-$dropdown-bg: $bgcolor-dropdown;
-$dropdown-link-color: $color-dropdown-link;
-$dropdown-link-hover-color: $color-dropdown-link-hover;
-$dropdown-link-hover-bg: $bgcolor-dropdown-link-hover;
-$dropdown-link-active-color: $color-dropdown-link-active;
-$dropdown-link-active-bg: $bgcolor-dropdown-link-active;
-
-@import './mixins/list-group';
-@import './reboot-bootstrap-text';
-@import './reboot-bootstrap-border-colors';
-@import './reboot-bootstrap-tables';
-@import './reboot-bootstrap-dropdown';
-
-// List Group
-@include override-list-group-item(
-  $color-list,
-  $bgcolor-sidebar-list-group,
-  $color-list-hover,
-  $bgcolor-list-hover,
-  $color-list-active,
-  $bgcolor-list-active
-);
-/*
-  * Form
-  */
-input.form-control,
-select.form-control,
-select.custom-select,
-textarea.form-control {
-  color: var(--color-global);
-  background-color: #{hsl.darken(var(--bgcolor-global), 5%)};
-  border-color: $border-color-global;
-  &:focus {
-    background-color: var(--bgcolor-global);
-  }
-  // FIXME: accent color
-  // border: 1px solid darken($border, 30%);
-}
-
-.form-control[disabled],
-.form-control[readonly] {
-  color: #{hsl.lighten(var(--color-global),10%)};
-  background-color: #{hsl.lighten(var(--color-global),5%)};
-}
-
-.input-group > .input-group-prepend > .input-group-text {
-  color: theme-color('light');
-  background-color: theme-color('secondary');
-  border: 1px solid theme-color('secondary');
-  border-right: none;
-  &.text-muted {
-    color: theme-color('light') !important;
-  }
-}
-
-.input-group input {
-  border-color: $border-color-global;
-}
-
-label.custom-control-label::before {
-  background-color: #{hsl.darken(var(--bgcolor-global),5%)};
-}
-
-/*
- * Table
- */
-.table {
-  @extend .table-dark;
-}
-
-/*
- * Card
- */
+// @use '../variables' as var;
+// @use '../bootstrap/init' as *;
+// @use '../atoms/mixins/buttons' as mixins-buttons;
+// @use './mixins/count-badge';
+// @use './mixins/hsl-button';
+// @use './hsl-functions' as hsl;
+
+// // determine optional variables
+// $color-list: var(--color-list,var(--color-global));
+// $bgcolor-list: var(--bgcolor-list,var(--bgcolor-global));
+// $color-list-hover: var(--color-list-hover,var(--color-global));
+// $color-list-active: var(--color-list-active,var(--color-reversal));
+// $bgcolor-list-hover: var(--bgcolor-list-hover,var(--bgcolor-global));
+// $bgcolor-list-active: var(--bgcolor-list-active,var(--primary));
+// $bgcolor-subnav: var(--bgcolor-subnav);
+// $color-table: var(--color-table,white);
+// $bgcolor-table: var(--bgcolor-table,#343a40);
+// $border-color-table: var(--border-color-table,hsl.lighten(var(--bgcolor-table),7.5%),lighten(#343a40, 7.5%));
+// $color-table-hover: var(--color-table-hover,rgba(white, 0.075));
+// $bgcolor-table-hover: var(--bgcolor-table-hover,hsl.lighten(var(--bgcolor-table),7.5%),lighten(#343a40, 7.5%));
+// $bgcolor-sidebar-list-group: var(--bgcolor-sidebar-list-group,var(--bgcolor-list));
+// $color-tags: var(--color-tags,#949494);
+// $bgcolor-tags: var(--bgcolor-tags,var(--dark));
+// $border-color-global: var(--border-color-global,#{$gray-500});
+// $border-color-toc: var(--border-color-toc,$border-color-global);
+// $color-dropdown: var(--color-dropdown,var(--color-global));
+// $bgcolor-dropdown: var(--bgcolor-dropdown,var(--bgcolor-global));
+// $color-dropdown-link: var(--color-dropdown-link,var(--color-global));
+// $color-dropdown-link-hover: var(--color-dropdown-link-hover,var(--light));
+// $bgcolor-dropdown-link-hover: var(--bgcolor-dropdown-link-hover,var(--primary));
+// $color-dropdown-link-active: var(--color-dropdown-link-active,var(--light));
+// $bgcolor-dropdown-link-active: var(--bgcolor-dropdown-link-active,var(--primary));
+
+// // override bootstrap variables
+// $text-muted: $gray-550;
+// $table-dark-color: $color-table;
+// $table-dark-bg: $bgcolor-table;
+// $table-dark-border-color: $border-color-table;
+// $table-dark-hover-color: $color-table-hover;
+// $table-dark-hover-bg: $bgcolor-table-hover;
+// $border-color: $border-color-global;
+// $dropdown-color: $color-dropdown;
+// $dropdown-bg: $bgcolor-dropdown;
+// $dropdown-link-color: $color-dropdown-link;
+// $dropdown-link-hover-color: $color-dropdown-link-hover;
+// $dropdown-link-hover-bg: $bgcolor-dropdown-link-hover;
+// $dropdown-link-active-color: $color-dropdown-link-active;
+// $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
+
+// @import './mixins/list-group';
+// @import './reboot-bootstrap-text';
+// @import './reboot-bootstrap-border-colors';
+// @import './reboot-bootstrap-tables';
+// @import './reboot-bootstrap-dropdown';
+
+// // List Group
+// @include override-list-group-item(
+//   $color-list,
+//   $bgcolor-sidebar-list-group,
+//   $color-list-hover,
+//   $bgcolor-list-hover,
+//   $color-list-active,
+//   $bgcolor-list-active
+// );
+// /*
+//   * Form
+//   */
+// input.form-control,
+// select.form-control,
+// select.custom-select,
+// textarea.form-control {
+//   color: var(--color-global);
+//   background-color: hsl.darken(var(--bgcolor-global), 5%);
+//   border-color: $border-color-global;
+//   &:focus {
+//     background-color: var(--bgcolor-global);
+//   }
+//   // FIXME: accent color
+//   // border: 1px solid darken($border, 30%);
+// }
+
+// .form-control[disabled],
+// .form-control[readonly] {
+//   color: hsl.lighten(var(--color-global),10%);
+//   background-color: hsl.lighten(var(--color-global),5%);
+// }
+
+// .input-group > .input-group-prepend > .input-group-text {
+//   color: theme-color('light');
+//   background-color: theme-color('secondary');
+//   border: 1px solid theme-color('secondary');
+//   border-right: none;
+//   &.text-muted {
+//     color: theme-color('light') !important;
+//   }
+// }
+
+// .input-group input {
+//   border-color: $border-color-global;
+// }
+
+// label.custom-control-label::before {
+//   background-color: hsl.darken(var(--bgcolor-global),5%);
+// }
+
+// /*
+//  * Table
+//  */
+// .table {
+//   @extend .table-dark;
+// }
+
+// /*
+//  * Card
+//  */
 // .card:not([class*='bg-']):not(.well):not(.card-disabled) {
-//   @extend .bg-dark;
-// }
-
-// [TODO] GW-3219 modify common color of well in dark theme, then remove below css.
-.card.well {
-  border-color: var(--secondary);
-}
-
-.card.card-disabled {
-  background-color: lighten($dark, 10%);
-  border-color: var(--secondary);
-}
-
-/*
- * Pagination
- */
-ul.pagination {
-  li.page-item {
-    button.page-link {
-      @include button-variant($dark, $dark);
-      @include mixins-buttons.button-svg-icon-variant($dark, $dark);
-      box-shadow: none !important;
-    }
-  }
-}
-
-/*
- * GROWI Login form
- */
-.nologin {
-  // background color
-  $color-gradient: #3c465c;
-  background: linear-gradient(45deg, darken($color-gradient, 30%) 0%, hsla(340, 100%, 55%, 0) 70%),
-    linear-gradient(135deg, darken(var.$growi-green, 30%) 10%, hsla(225, 95%, 50%, 0) 70%),
-    linear-gradient(225deg, darken(var.$growi-blue, 20%) 10%, hsla(140, 90%, 50%, 0) 80%),
-    linear-gradient(315deg, darken($color-gradient, 25%) 100%, hsla(35, 95%, 55%, 0) 70%);
-
-  .noLogin-header {
-    background-color: rgba(black, 0.5);
-
-    .logo {
-      background-color: rgba(white, 0);
-      fill: rgba(white, 0.5);
-    }
-
-    h1 {
-      color: rgba(white, 0.5);
-    }
-  }
-
-  .noLogin-dialog {
-    background-color: rgba(black, 0.5);
-  }
-
-  .input-group {
-    .input-group-text {
-      color: darken(white, 30%);
-      background-color: rgba($gray-700, 0.7);
-    }
-
-    .form-control {
-      color: white;
-      background-color: rgba(#505050, 0.7);
-      box-shadow: unset;
-
-      &::placeholder {
-        color: darken(white, 30%);
-      }
-    }
-  }
-
-  .btn-fill {
-    .btn-label {
-      color: $gray-300;
-    }
-    .btn-label-text {
-      color: $gray-400;
-    }
-  }
-
-  .grw-external-auth-form {
-    border-color: gray !important;
-  }
-
-  .btn-external-auth-tab {
-    @include button-variant($dark, $dark);
-    @include mixins-buttons.button-svg-icon-variant($dark, $dark);
-    box-shadow: none !important;
-  }
-
-  // footer link text
-  .link-growi-org {
-    color: rgba(white, 0.4);
-
-    &:hover,
-    &.focus {
-      color: rgba(white, 0.7);
-
-      .growi {
-        color: darken(var.$growi-green, 5%);
-      }
-
-      .org {
-        color: darken(var.$growi-blue, 5%);
-      }
-    }
-  }
-}
-
-/*
- * GROWI subnavigation
- */
-.grw-drawer-toggler {
-  @include button-variant($dark, $dark);
-  @include mixins-buttons.button-svg-icon-variant($dark, $dark);
-  color: #{$gray-400};
-  box-shadow: none !important;
-
-}
-
-/*
- * GROWI page list
- */
-.page-list {
-  .page-list-ul {
-    > li {
-      > span.page-list-meta {
-        color: hsl(var(--color-global-hs),calc(var(--color-global-l) - 10%));
-      }
-    }
-  }
-
-  // List group
-  .list-group-item {
-    &.active {
-      background-color: hsl(var(--color-global-hs),calc(var(--color-global-l) - 10%));
-    }
-    .list-group-item-action:hover {
-      background-color: var(--bgcolor-list-hover);
-    }
-    .page-list-snippet {
-      color: hsl(var(--color-global-hs),calc(var(--color-global-l) - 10%));
-    }
-  }
-}
-
-/*
- * GROWI ToC
- */
-.revision-toc-content {
-  ::marker {
-    color: hsl(var(--color-global-hs),calc(var(--color-global-l) + 30%));
-  }
-}
-
-/*
- * GROWI subnavigation
- */
-.grw-subnav {
-  background-color: var(--bgcolor-subnav);
-}
-
-.grw-subnav-fixed-container .grw-subnav {
-  background-color: var(--bgcolor-subnav); opacity:0.85;
-}
-
-.grw-page-editor-mode-manager {
-  .btn-outline-primary {
-    &:hover {
-      color: var(--primary);
-      background-color: $gray-700;
-    }
-  }
-}
-
-// Search drop down
-#search-typeahead-asynctypeahead {
-  background-color: var(--bgcolor-global);
-  .table {
-    background-color: transparent;
-  }
-}
-
-/*
- * GROWI Sidebar
- */
-.grw-sidebar {
-  // List
-  @include override-list-group-item(
-    var(--color-list),
-    var(--bgcolor-sidebar-list-group),
-    var(--color-list-hover),
-    var(--bgcolor-list-hover),
-    var(--color-list-active),
-    var(--bgcolor-list-active)
-  );
-  // Pagetree
-  .grw-pagetree {
-    --bgcolor-sidebar-context: hsl(var(--primary-hs),calc(var(--primary-l) + 77%));
-    --bgcolor-sidebar-context-hs: var(--primary-hs);
-    --bgcolor-sidebar-context-l: calc(var(--primary-l) + 77%);
-    @include override-list-group-item-for-pagetree(
-      var(--color-sidebar-context),
-      hsl(var(--bgcolor-sidebar-context-hs),calc(var(--bgcolor-sidebar-context-l) + 8%)),
-      hsl(var(--bgcolor-sidebar-context-hs),calc(var(--bgcolor-sidebar-context-l) + 15%)),
-      hsl(var(--color-sidebar-context-hs),calc(var(--color-sidebar-context-l) - 15%)),
-      hsl(var(--color-sidebar-context-hs),calc(var(--color-sidebar-context-l) - 10%)),
-      hsl(var(--bgcolor-sidebar-context-hs),calc(var(--bgcolor-sidebar-context-l) + 18%)),
-      hsl(var(--bgcolor-sidebar-context-hs),calc(var(--bgcolor-sidebar-context-l) + 24%))
-    );
-    .grw-pagetree-triangle-btn {
-      @include mixins-buttons.button-outline-svg-icon-variant($secondary, $gray-200);
-    }
-    .btn-page-item-control {
-      @include button-outline-variant($gray-500, $gray-500, $secondary, transparent);
-      @include hover() {
-        background-color: var(--bgcolor-sidebar-context-lighten20);
-      }
-      &:not(:disabled):not(.disabled):active,
-      &:not(:disabled):not(.disabled).active {
-        background-color: var(--bgcolor-sidebar-context-lighten34);
-      }
-      box-shadow: none !important;
-    }
-  }
-  .private-legacy-pages-link {
-    &:hover {
-      background: var(--bgcolor-list-hover);
-    }
-  }
-}
-
-.btn.btn-page-item-control {
-  @include button-outline-variant($gray-500, $gray-500, $secondary, transparent);
-  @include hover() {
-    background-color: $gray-700;
-  }
-  &:not(:disabled):not(.disabled):active,
-  &:not(:disabled):not(.disabled).active {
-    color: $gray-200;
-    background-color: $gray-600;
-  }
-  box-shadow: none !important;
-}
-
-/*
- * Popover
- */
-.popover {
-  background-color: var(--bgcolor-global);
-  border-color: $secondary;
-  .popover-header {
-    color: $white;
-    background-color: $secondary;
-    border-color: $secondary;
-  }
-  .popover-body {
-    color: inherit;
-  }
-
-  &.bs-popover-top .arrow {
-    &::before {
-      border-top-color: $secondary;
-    }
-
-    &::after {
-      border-top-color: var(--bgcolor-global);
-    }
-  }
-  &.bs-popover-bottom .arrow {
-    &::before {
-      border-bottom-color: $secondary;
-    }
-
-    &::after {
-      border-bottom-color: var(--bgcolor-global);
-    }
-  }
-  &.bs-popover-right .arrow {
-    &::before {
-      border-right-color: $secondary;
-    }
-
-    &::after {
-      border-right-color: var(--bgcolor-global);
-    }
-  }
-  &.bs-popover-left .arrow {
-    &::before {
-      border-left-color: $secondary;
-    }
-
-    &::after {
-      border-left-color: var(--bgcolor-global);
-    }
-  }
-}
-
-/*
- * GROWI Grid Edit Modal
- */
-.grw-grid-edit-preview {
-  background: $gray-900;
-}
-
-/*
- * Slack
- */
-.grw-slack-notification {
-  background-color: transparent;
-  $color-slack: #4b144c;
-
-  .form-control {
-    background: var(--bgcolor-global);
-  }
-
-  .custom-control-label {
-    &::before {
-      background-color: $secondary;
-      border-color: transparent;
-    }
-    &::after {
-      background-color: darken($color-slack, 5%);
-      // background-image: url(/images/icons/slack/slack-logo-dark-off.svg); -- should be specified in app -- 2022.12.09 Yuki Takei
-    }
-  }
-
-  .custom-control-input:checked ~ .custom-control-label {
-    &::before {
-      background-color: lighten($color-slack, 10%);
-    }
-    &::after {
-      background-color: darken($color-slack, 5%);
-      // background-image: url(/images/icons/slack/slack-logo-dark-on.svg); -- should be specified in app -- 2022.12.09 Yuki Takei
-    }
-  }
-  .grw-slack-logo svg {
-    fill: #dd80de;
-  }
-
-  .grw-btn-slack {
-    background-color: black;
-    &:focus,
-    &:hover {
-      background-color: black;
-    }
-  }
-
-  .grw-btn-slack-triangle {
-    color: $secondary;
-  }
-}
-
-/*
- * GROWI HandsontableModal
- */
-.grw-hot-modal-navbar {
-  background-color: $dark;
-}
-
-.wiki {
-  h1 {
-    border-color: #{hsl.lighten(var(--border-color-theme),10%)};
-  }
-  h2 {
-    border-color: var(--border-color-theme);
-  }
-}
-
-/*
- * GROWI comment form
- */
-.comment-form {
-  #slack-mark-black {
-    display: none;
-  }
-}
-
-.page-comments-row {
-  background: var(--bgcolor-subnav);
-}
-
-/*
- * GROWI tags
- */
-.grw-tag-labels {
-  .grw-tag-label {
-    color: $color-tags;
-    background-color: $bgcolor-tags;
-  }
-}
-
-/*
- * GROWI popular tags
- */
-.grw-popular-tag-labels {
-  .grw-tag-label {
-    color: $color-tags;
-    background-color: $bgcolor-tags;
-  }
-}
-
-/*
- * admin settings
- */
-.admin-setting-header {
-  border-color: $border-color-global;
-}
-
-/*
-* grw-side-contents
-*/
-.grw-side-contents-sticky-container {
-  .grw-count-badge {
-    @include count-badge.count-badge($gray-400, $gray-700);
-  }
-
-  .grw-border-vr {
-    border-color: $border-color-toc;
-  }
-
-  .revision-toc {
-    border-color: $border-color-toc;
-  }
-}
-
-/*
- * drawio
- */
-.drawio-viewer {
-  border-color: $border-color-global;
-}
-
-/*
- * modal
- */
-.grw-modal-head {
-  border-color: $border-color-global;
-}
-
-/*
- * skeleton
- */
-.grw-skeleton {
-}
+//   @include bg-variant('.bg-dark', $dark);
+// }
+
+// // [TODO] GW-3219 modify common color of well in dark theme, then remove below css.
+// .card.well {
+//   border-color: var(--secondary);
+// }
+
+// .card.card-disabled {
+//   background-color: lighten($dark, 10%);
+//   border-color: var(--secondary);
+// }
+
+// /*
+//  * Pagination
+//  */
+// ul.pagination {
+//   li.page-item {
+//     button.page-link {
+//       @include button-variant($dark, $dark);
+//       @include mixins-buttons.button-svg-icon-variant($dark, $dark);
+//       box-shadow: none !important;
+//     }
+//   }
+// }
+
+// /*
+//  * GROWI Login form
+//  */
+// .nologin {
+//   // background color
+//   $color-gradient: #3c465c;
+//   background: linear-gradient(45deg, darken($color-gradient, 30%) 0%, hsla(340, 100%, 55%, 0) 70%),
+//     linear-gradient(135deg, darken(var.$growi-green, 30%) 10%, hsla(225, 95%, 50%, 0) 70%),
+//     linear-gradient(225deg, darken(var.$growi-blue, 20%) 10%, hsla(140, 90%, 50%, 0) 80%),
+//     linear-gradient(315deg, darken($color-gradient, 25%) 100%, hsla(35, 95%, 55%, 0) 70%);
+
+//   .noLogin-header {
+//     background-color: rgba(black, 0.5);
+
+//     .logo {
+//       background-color: rgba(white, 0);
+//       fill: rgba(white, 0.5);
+//     }
+
+//     h1 {
+//       color: rgba(white, 0.5);
+//     }
+//   }
+
+//   .noLogin-dialog {
+//     background-color: rgba(black, 0.5);
+//   }
+
+//   .input-group {
+//     .input-group-text {
+//       color: darken(white, 30%);
+//       background-color: rgba($gray-700, 0.7);
+//     }
+
+//     .form-control {
+//       color: white;
+//       background-color: rgba(#505050, 0.7);
+//       box-shadow: unset;
+
+//       &::placeholder {
+//         color: darken(white, 30%);
+//       }
+//     }
+//   }
+
+//   .btn-fill {
+//     .btn-label {
+//       color: $gray-300;
+//     }
+//     .btn-label-text {
+//       color: $gray-400;
+//     }
+//   }
+
+//   .grw-external-auth-form {
+//     border-color: gray !important;
+//   }
+
+//   .btn-external-auth-tab {
+//     @include button-variant($dark, $dark);
+//     @include mixins-buttons.button-svg-icon-variant($dark, $dark);
+//     box-shadow: none !important;
+//   }
+
+//   // footer link text
+//   .link-growi-org {
+//     color: rgba(white, 0.4);
+
+//     &:hover,
+//     &.focus {
+//       color: rgba(white, 0.7);
+
+//       .growi {
+//         color: darken(var.$growi-green, 5%);
+//       }
+
+//       .org {
+//         color: darken(var.$growi-blue, 5%);
+//       }
+//     }
+//   }
+// }
+
+// /*
+//  * GROWI subnavigation
+//  */
+// .grw-drawer-toggler {
+//   @include button-variant($dark, $dark);
+//   @include mixins-buttons.button-svg-icon-variant($dark, $dark);
+//   color: #{$gray-400};
+//   box-shadow: none !important;
+
+// }
+
+// /*
+//  * GROWI page list
+//  */
+// .page-list {
+//   .page-list-ul {
+//     > li {
+//       > span.page-list-meta {
+//         color: hsl.darken(var(--color-global),10%);
+//       }
+//     }
+//   }
+
+//   // List group
+//   .list-group-item {
+//     &.active {
+//       background-color: hsl.darken(var(--color-global),10%);
+//     }
+//     .list-group-item-action:hover {
+//       background-color: var(--bgcolor-list-hover);
+//     }
+//     .page-list-snippet {
+//       color: hsl.darken(var(--color-global),10%);
+//     }
+//   }
+// }
+
+// /*
+//  * GROWI ToC
+//  */
+// .revision-toc-content {
+//   ::marker {
+//     color: hsl.lighten(var(--color-global),30%);
+//   }
+// }
+
+// /*
+//  * GROWI subnavigation
+//  */
+// .grw-subnav {
+//   background-color: var(--bgcolor-subnav);
+// }
+
+// .grw-subnav-fixed-container .grw-subnav {
+//   background-color: hsl.alpha(var(--bgcolor-subnav),15%);
+// }
+
+// .grw-page-editor-mode-manager {
+//   .btn-outline-primary {
+//     &:hover {
+//       color: var(--primary);
+//       background-color: $gray-700;
+//     }
+//   }
+// }
+
+// // Search drop down
+// #search-typeahead-asynctypeahead {
+//   background-color: var(--bgcolor-global);
+//   .table {
+//     background-color: transparent;
+//   }
+// }
+
+// /*
+//  * GROWI Sidebar
+//  */
+// .grw-sidebar {
+//   // List
+//   @include override-list-group-item(
+//     $color-list,
+//     $bgcolor-sidebar-list-group,
+//     $color-list-hover,
+//     $bgcolor-list-hover,
+//     $color-list-active,
+//     $bgcolor-list-active
+//   );
+//   // Pagetree
+//   .grw-pagetree {
+//     @include override-list-group-item-for-pagetree(
+//       var(--color-sidebar-context),
+//       hsl.lighten(var(--bgcolor-sidebar-context),8%),
+//       hsl.lighten(var(--bgcolor-sidebar-context),15%),
+//       hsl.darken(var(--color-sidebar-context),15%),
+//       hsl.darken(var(--color-sidebar-context),10%),
+//       hsl.lighten(var(--bgcolor-sidebar-context),18%),
+//       hsl.lighten(var(--bgcolor-sidebar-context),24%)
+//     );
+//     .grw-pagetree-triangle-btn {
+//       @include mixins-buttons.button-outline-svg-icon-variant(var(--secondary), $gray-200);
+//     }
+//     .btn-page-item-control {
+//       @include hsl-button.button-outline-variant($gray-500, $gray-500, var(--secondary), transparent);
+//       @include hover() {
+//         background-color: hsl.lighten(var(--bgcolor-sidebar-context),20%);
+//       }
+//       &:not(:disabled):not(.disabled):active,
+//       &:not(:disabled):not(.disabled).active {
+//         background-color: hsl.lighten(var(--bgcolor-sidebar-context),34%);
+//       }
+//       box-shadow: none !important;
+//     }
+//   }
+//   .private-legacy-pages-link {
+//     &:hover {
+//       background: var(--bgcolor-list-hover);
+//     }
+//   }
+// }
+
+// .btn.btn-page-item-control {
+//   @include hsl-button.button-outline-variant($gray-500, $gray-500, var(--secondary), transparent);
+//   @include hover() {
+//     background-color: $gray-700;
+//   }
+//   &:not(:disabled):not(.disabled):active,
+//   &:not(:disabled):not(.disabled).active {
+//     color: $gray-200;
+//     background-color: $gray-600;
+//   }
+//   box-shadow: none !important;
+// }
+
+// /*
+//  * Popover
+//  */
+// .popover {
+//   background-color: var(--bgcolor-global);
+//   border-color: var(--secondary);
+//   .popover-header {
+//     color: white;
+//     background-color: var(--secondary);
+//     border-color: var(--secondary);
+//   }
+//   .popover-body {
+//     color: inherit;
+//   }
+
+//   &.bs-popover-top .arrow {
+//     &::before {
+//       border-top-color: var(--secondary);
+//     }
+
+//     &::after {
+//       border-top-color: var(--bgcolor-global);
+//     }
+//   }
+//   &.bs-popover-bottom .arrow {
+//     &::before {
+//       border-bottom-color: var(--secondary);
+//     }
+
+//     &::after {
+//       border-bottom-color: var(--bgcolor-global);
+//     }
+//   }
+//   &.bs-popover-right .arrow {
+//     &::before {
+//       border-right-color: var(--secondary);
+//     }
+
+//     &::after {
+//       border-right-color: var(--bgcolor-global);
+//     }
+//   }
+//   &.bs-popover-left .arrow {
+//     &::before {
+//       border-left-color: var(--secondary);
+//     }
+
+//     &::after {
+//       border-left-color: var(--bgcolor-global);
+//     }
+//   }
+// }
+
+// /*
+//  * GROWI Grid Edit Modal
+//  */
+// .grw-grid-edit-preview {
+//   background: $gray-900;
+// }
+
+// /*
+//  * Slack
+//  */
+// .grw-slack-notification {
+//   background-color: transparent;
+//   $color-slack: #4b144c;
+
+//   .form-control {
+//     background: var(--bgcolor-global);
+//   }
+
+//   .custom-control-label {
+//     &::before {
+//       background-color: var(--secondary);
+//       border-color: transparent;
+//     }
+//     &::after {
+//       background-color: darken($color-slack, 5%);
+//       // background-image: url(/images/icons/slack/slack-logo-dark-off.svg); -- should be specified in app -- 2022.12.09 Yuki Takei
+//     }
+//   }
+
+//   .custom-control-input:checked ~ .custom-control-label {
+//     &::before {
+//       background-color: lighten($color-slack, 10%);
+//     }
+//     &::after {
+//       background-color: darken($color-slack, 5%);
+//       // background-image: url(/images/icons/slack/slack-logo-dark-on.svg); -- should be specified in app -- 2022.12.09 Yuki Takei
+//     }
+//   }
+//   .grw-slack-logo svg {
+//     fill: #dd80de;
+//   }
+
+//   .grw-btn-slack {
+//     background-color: black;
+//     &:focus,
+//     &:hover {
+//       background-color: black;
+//     }
+//   }
+
+//   .grw-btn-slack-triangle {
+//     color: var(--secondary);
+//   }
+// }
+
+// /*
+//  * GROWI HandsontableModal
+//  */
+// .grw-hot-modal-navbar {
+//   background-color: var(--dark);
+// }
+
+// .wiki {
+//   h1 {
+//     border-color: hsl.lighten(var(--border-color-theme),10%);
+//   }
+//   h2 {
+//     border-color: var(--border-color-theme);
+//   }
+// }
+
+// /*
+//  * GROWI comment form
+//  */
+// .comment-form {
+//   #slack-mark-black {
+//     display: none;
+//   }
+// }
+
+// .page-comments-row {
+//   background: var(--bgcolor-subnav);
+// }
+
+// /*
+//  * GROWI tags
+//  */
+// .grw-tag-labels {
+//   .grw-tag-label {
+//     color: $color-tags;
+//     background-color: $bgcolor-tags;
+//   }
+// }
+
+// /*
+//  * GROWI popular tags
+//  */
+// .grw-popular-tag-labels {
+//   .grw-tag-label {
+//     color: $color-tags;
+//     background-color: $bgcolor-tags;
+//   }
+// }
+
+// /*
+//  * admin settings
+//  */
+// .admin-setting-header {
+//   border-color: $border-color-global;
+// }
+
+// /*
+// * grw-side-contents
+// */
+// .grw-side-contents-sticky-container {
+//   .grw-count-badge {
+//     @include count-badge.count-badge($gray-400, $gray-700);
+//   }
+
+//   .grw-border-vr {
+//     border-color: $border-color-toc;
+//   }
+
+//   .revision-toc {
+//     border-color: $border-color-toc;
+//   }
+// }
+
+// /*
+//  * drawio
+//  */
+// .drawio-viewer {
+//   border-color: $border-color-global;
+// }
+
+// /*
+//  * modal
+//  */
+// .grw-modal-head {
+//   border-color: $border-color-global;
+// }
+
+// /*
+//  * skeleton
+//  */
+// .grw-skeleton {
+// }