Merge pull request #7168 from weseek/imprv/apply-colors-light-growitoc

imprv:apply-colors-light-until-growitoc

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

@@ -20,7 +20,7 @@ import { registerTransformerForObjectId } from './utils/objectid-transformer';
 
 import '~/styles/style-app.scss';
 import '~/styles/theme/_apply-colors.scss';
-
+import '~/styles/theme/_apply-colors-light.scss';
 
 const isDev = process.env.NODE_ENV === 'development';
 

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

@@ -2,44 +2,48 @@
 @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));
-$bgcolor-list-active: lighten($primary, 65%) !default;
-$color-list-active: color-yiq($bgcolor-list-active) !default;
+$bgcolor-list-hover: var(--bgcolor-list-hover,var(--bgcolor-global));
+$bgcolor-list-active: var(--bgcolor-list-active,var(--primary-65));
+$color-list-active: var(--color-list-active,#{hsl.contrast(var(--primary-65))});
 $color-table: var(--color-table,var(--color-global));
-$bgcolor-table: null !default;
-$border-color-table: $gray-200 !default;
+$bgcolor-table: var(--bgcolor-table,null);
+$border-color-table: var(--border-color-table,#{$gray-200});
 $color-table-hover: var(--color-table-hover,var(--color-table));
-$bgcolor-table-hover: rgba(black, 0.075) !default;
+$bgcolor-table-hover: var(--bgcolor-table-hover,rgba(black, 0.075));
 $bgcolor-sidebar-list-group: var(--bgcolor-sidebar-list-group,var(--bgcolor-list));
-$color-tags: $secondary !default;
-$bgcolor-tags: $gray-200 !default;
-$border-color-global: $gray-300 !default;
-$border-color-toc: $border-color-global !default;
+$color-tags: var(--color-tags,var(--secondary));
+$bgcolor-tags: var(--bgcolor-tags,#{$gray-200});
+$border-color-global: var(--border-color-global,#{$gray-300});
+$border-color-toc: var(--border-color-toc,var(--border-color-global));
 $color-dropdown: var(--color-dropdown,var(--color-global));
+$bgcolor-dropdown: var(--color-dropdown,var(--bgcolor-global));
 $color-dropdown-link: var(--color-dropdown-link,var(--color-global));
 $color-dropdown-link-hover: var(--color-dropdown-link-hover,var(--color-global));
-$color-dropdown-link-active: var(--color-reversal);
-$bgcolor-dropdown-link-active: $primary !default;
-$bgcolor-navbar: var(--bgcolor-navbar,#{$gray-900});
+$color-dropdown-link-active: var(--color-dropdown-link-active,var(--color-reversal));
+$bgcolor-dropdown-link-hover: var(--bgcolor-dropdown-link-hover,hsl.lighten(var(--bgcolor-global),15%));
+$bgcolor-dropdown-link-active: var(--bgcolor-dropdown-link-active,var(--primary));
 
 
 // override bootstrap variables
-$text-muted: $gray-500;
-$table-color: var(--color-table);
+$text-muted: #{$gray-500};
+$table-color: $color-table;
 $table-bg: $bgcolor-table;
 $table-border-color: $border-color-table;
-$table-hover-color: var(--color-table-hover);
+$table-hover-color: $color-table-hover;
 $table-hover-bg: $bgcolor-table-hover;
 $border-color: $border-color-global;
-$dropdown-color: var(--color-dropdown);
-$dropdown-link-color: var(--color-dropdown-link);
-$dropdown-link-hover-color: var(--color-dropdown-link-hover);
-$dropdown-link-active-color: var(--color-dropdown-link-active);
-$dropdown-link-active-bg: var(--bgcolor-dropdown-link-active);
+$dropdown-color: $color-dropdown;
+$dropdown-link-color: $color-dropdown-link;
+$dropdown-link-hover-color: $color-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';
@@ -49,12 +53,12 @@ $dropdown-link-active-bg: var(--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
@@ -64,16 +68,13 @@ $dropdown-link-active-bg: var(--bgcolor-dropdown-link-active);
 }
 
 .form-control::placeholder {
-  --bgcolor-global-darken20: hsl(from var(--bgcolor-global) h s calc(l - 20%));
-  color: var(--bgcolor-global-darken20);
+  color: #{hsl.darken(var(--bgcolor-global), 20%)};
 }
 
 .form-control[disabled],
 .form-control[readonly] {
-  --color-global-light-10:hsl(from var(--color-global) h s calc(l + 10%));
-  --color-global-darken-5:hsl(from var(--color-global) h s calc(l - 5%));
-  color: var(--color-global-light-10);
-  background-color: var(--color-global-darken-5);
+  color: #{hsl.lighten(var(--color-global),10%)};
+  background-color: #{hsl.darken(var(--color-global),5%)};
 }
 
 /*
@@ -81,7 +82,7 @@ $dropdown-link-active-bg: var(--bgcolor-dropdown-link-active);
  */
 .card.card-disabled {
   background-color: var(--background-color);
-  border-color: $gray-200;
+  border-color: #{$gray-200};
 }
 
 /*
@@ -89,10 +90,10 @@ $dropdown-link-active-bg: var(--bgcolor-dropdown-link-active);
  */
 .nologin {
   // background color
-  $color-gradient: #3e4d6c;
-  background: linear-gradient(45deg, darken($color-gradient, 30%) 0%, hsla(340, 100%, 55%, 0) 70%),
-    linear-gradient(135deg, var.$growi-green 10%, hsla(225, 95%, 50%, 0) 70%), linear-gradient(225deg, var.$growi-blue 10%, hsla(140, 90%, 50%, 0) 80%),
-    linear-gradient(315deg, darken($color-gradient, 25%) 100%, hsla(35, 95%, 55%, 0) 70%);
+  --color-gradient: #3e4d6c;
+  background: linear-gradient(45deg, #{hsl.darken(var(--color-gradient), 30%)} 0%, hsla(340, 100%, 55%, 0) 70%),
+    linear-gradient(135deg, #{var.$growi-green} 10%, hsla(225, 95%, 50%, 0) 70%), linear-gradient(225deg, #{var.$growi-blue} 10%, hsla(140, 90%, 50%, 0) 80%),
+    linear-gradient(315deg, #{hsl.darken(var(--color-gradient), 25%)} 100%, hsla(35, 95%, 55%, 0) 70%);
 
   .noLogin-header {
     background-color: rgba(white, 0.5);
@@ -171,36 +172,37 @@ $dropdown-link-active-bg: var(--bgcolor-dropdown-link-active);
 }
 
 .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 {
   .btn-outline-primary {
     &:hover {
-      color: $primary;
-      background-color: $gray-200;
+      color: var(--primary);
+      background-color: #{$gray-200};
     }
   }
 }
 
 .grw-drawer-toggler {
-  @extend .btn-light;
-  color: $gray-500;
+  @include button-variant($light, $light);
+  @include mixins-buttons.button-svg-icon-variant($light, $light);
+  color: #{$gray-500};
+  box-shadow: none !important;
 }
 
 /*
  * GROWI Sidebar
  */
 .grw-sidebar {
-  --bgcolor-sidebar-context: hsl(from var(--primary) h s calc(l + 77%));
   // 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
   );
   // sidebar-centent-bg
   .grw-navigation-wrap {
@@ -209,40 +211,38 @@ $dropdown-link-active-bg: var(--bgcolor-dropdown-link-active);
   }
   // Pagetree
   .grw-pagetree {
-    --bgcolor-sidebar-context-darken5: hsl(from var(--bgcolor-sidebar-context) h s calc(l - 5%));
-    --bgcolor-sidebar-context-darken12: hsl(from var(--bgcolor-sidebar-context) h s calc(l - 12%));
-    --color-sidebar-context-lighten10: hsl(from var(--color-sidebar-context) h s calc(l + 10%));
-    --color-sidebar-context-lighten8: hsl(from var(--color-sidebar-context) h s calc(l + 8%));
-    --bgcolor-sidebar-context-darken12: hsl(from var(--bgcolor-sidebar-context) h s calc(l - 15%));
-    --bgcolor-sidebar-context-darken12: 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-darken5),
-      var(--bgcolor-sidebar-context-darken12),
-      var(--color-sidebar-context-lighten10),
-      var(--color-sidebar-context-lighten8),
-      var(--bgcolor-sidebar-context-darken15),
-      var(--bgcolor-sidebar-context-darken24)
+      #{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, $primary);
+      @include mixins-buttons.button-outline-svg-icon-variant(#{gray-400}, var(--primary));
     }
   }
   .private-legacy-pages-link {
     &:hover {
-      background: var(--bgcolor-list-hover);
+      background: $bgcolor-list-hover;
     }
   }
 }
 
 .btn.btn-page-item-control {
-  @include button-outline-variant($gray-500, $primary, lighten($primary, 52%), transparent);
+  --gray-500: hsl(var(--gray-500-hs),var(--gray-500-l));
+  --gray-500-hs: 210,13%;
+  --gray-500-l: 61%;
+  @include hsl-button.button-outline-variant(var(--gray-500), var(--primary), #{hsl.lighten(var(--primary), 52%)}, transparent);
   @include hover() {
-    background-color: lighten($primary, 58%);
+    background-color: #{hsl.lighten(var(--primary), 58%)};
   }
   &:not(:disabled):not(.disabled):active,
   &:not(:disabled):not(.disabled).active {
-    color: $primary;
+    color: var(--primary);
   }
   box-shadow: none !important;
 }
@@ -251,18 +251,17 @@ $dropdown-link-active-bg: var(--bgcolor-dropdown-link-active);
  * GROWI page list
  */
 .page-list {
-  --color-global-lighten10:hsl(from var(--color-global) h s calc(l + 10%));
   .page-list-ul {
     > li {
       > span.page-list-meta {
-        color: var(--color-global-lighten10);
+        color: #{hsl.lighten(var(--color-global),10%)};
       }
     }
   }
   // List group
   .list-group-item {
     .page-list-snippet {
-      color: var(--color-global-lighten10);
+      color: #{hsl.lighten(var(--color-global),10%)};
     }
   }
 }
@@ -371,10 +370,10 @@ $dropdown-link-active-bg: var(--bgcolor-dropdown-link-active);
 
 .wiki {
   h1 {
-    border-color: $border-color-theme;
+    border-color: var(--border-color-theme);
   }
   h2 {
-    border-color: $border-color-theme;
+    border-color: var(--border-color-theme);
   }
 }
 

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

@@ -19,9 +19,9 @@ $bgcolor-inline-code: var(--bgcolor-inline-code, #{$gray-100});
 $color-inline-code: var(--color-inline-code, #{darken($red, 15%)});
 $bordercolor-inline-code: var(--bordercolor-inline-code, #{$gray-400});
 $bordercolor-nav-tabs: var(--bordercolor-nav-tabs, #{$gray-300});
-$bordercolor-nav-tabs-hover: var(--bordercolor-nav-tabs-hover,#{$gray-200} #{$gray-200} var(--bordercolor-nav-tabs));
-$border-nav-tabs-link-activec: var(--border-nav-tabs-link-active, #{$gray-600});
-$bordercolor-nav-tabs-active: var(--bordercolor-nav-tabs-active,var(--bordercolor-nav-tabs) var(--bordercolor-nav-tabs) var(--bgcolor-global));
+$bordercolor-nav-tabs-hover: var(--bordercolor-nav-tabs-hover,#{$gray-200} #{$gray-200} #{$bordercolor-nav-tabs});
+$border-nav-tabs-link-active: var(--border-nav-tabs-link-active, #{$gray-600});
+$bordercolor-nav-tabs-active: var(--bordercolor-nav-tabs-active,$bordercolor-nav-tabs $bordercolor-nav-tabs var(--bgcolor-global));
 $color-btn-reload-in-sidebar: var(--color-btn-reload-in-sidebar,#{$gray-500});
 $bgcolor-keyword-highlighted: var(--bgcolor-keyword-highlighted,#{var.$grw-marker-yellow});
 $color-page-list-group-item-meta: var(--color-page-list-group-item-meta,#{$gray-500});
@@ -33,11 +33,11 @@ $body-color: var(--color-global);
 $link-color: var(--color-link);
 $link-hover-color: var(--color-link-hover);
 $input-focus-color: var(--color-global);
-$nav-tabs-border-color: var(--bordercolor-nav-tabs);
-$nav-tabs-link-hover-border-color: var(--bordercolor-nav-tabs-hover);
+$nav-tabs-border-color: $bordercolor-nav-tabs;
+$nav-tabs-link-hover-border-color: $bordercolor-nav-tabs-hover;
 $nav-tabs-link-active-color: var(--color-nav-tabs-link-active);
 $nav-tabs-link-active-bg: var(--bgcolor-global);
-$nav-tabs-link-active-border-color: var(--bordercolor-nav-tabs-active);
+$nav-tabs-link-active-border-color: $bordercolor-nav-tabs-active;
 $theme-colors: map-merge($theme-colors, ( primary: $primary ));
 
 @import 'reboot-bootstrap-buttons';
@@ -50,11 +50,11 @@ $theme-colors: map-merge($theme-colors, ( primary: $primary ));
 $color-modal-header: var(--color-modal-header,#{hsl.contrast(var(--primary))});
 
 code:not([class^='language-']) {
-  @include code.code-inline-color(var(--color-inline-code), var(--bgcolor-inline-code), var(--bordercolor-inline-code));
+  @include code.code-inline-color($color-inline-code, $bgcolor-inline-code, $bordercolor-inline-code);
 }
 
 .code-highlighted {
-  border-color: var(--bordercolor-inline-code);
+  border-color: $bordercolor-inline-code;
 }
 
 //
@@ -171,7 +171,7 @@ ul.pagination {
     color: var(--color-link-nabvar);
   }
 
-  border-image: var(--border-image-navbar);
+  border-image: $border-image-navbar;
   border-image-slice: 1;
 
   .grw-app-title {
@@ -236,7 +236,7 @@ ul.pagination {
   .grw-sidebar-nav-primary-container {
     .btn.active {
       i {
-        text-shadow: var(--text-shadow-sidebar-nav-item-active);
+        text-shadow: $text-shadow-sidebar-nav-item-active;
       }
       // fukidashi
       &:after {
@@ -247,7 +247,7 @@ ul.pagination {
 
   .grw-sidebar-content-header {
     .grw-btn-reload {
-      color: var(--color-btn-reload-in-sidebar);
+      color: $color-btn-reload-in-sidebar;
     }
 
     .grw-recent-changes-resize-button {
@@ -327,7 +327,7 @@ ul.pagination {
   .modal-header {
     border-bottom-color: var(--border-color-theme);
     .modal-title {
-      color: var(--color-modal-header);
+      color: $color-modal-header;
     }
     .close {
       color: #{hsl.alpha(var(--primary),50%)};
@@ -437,7 +437,7 @@ ul.pagination {
   }
 
   .highlighted-keyword {
-    background: linear-gradient(transparent 60%, var(--bgcolor-keyword-highlighted) 60%);
+    background: linear-gradient(transparent 60%, $bgcolor-keyword-highlighted 60%);
   }
 
   a {
@@ -480,9 +480,9 @@ ul.pagination {
       }
 
       .page-list-meta {
-        color: var(--color-page-list-group-item-meta);
+        color: $color-page-list-group-item-meta;
         svg {
-          fill: var(--color-page-list-group-item-meta);
+          fill: $color-page-list-group-item-meta;
         }
       }
 
@@ -603,7 +603,7 @@ body.editing-sidebar {
   }
   .page-list {
     .highlighted-keyword {
-      background: linear-gradient(transparent 60%, var(--bgcolor-keyword-highlighted) 60%);
+      background: linear-gradient(transparent 60%, $bgcolor-keyword-highlighted 60%);
     }
   }
 }

packages/app/src/styles/theme/_reboot-bootstrap-buttons.scss

@@ -13,9 +13,9 @@
 
   &:disabled,
   &.disabled {
-    color: var(--color-link-disabled, $gray-500);
+    color: var(--color-link-disabled, #{$gray-500});
     svg {
-      fill: var(--color-link-disabled, $gray-500);
+      fill: var(--color-link-disabled, #{$gray-500});
     }
   }
 }

packages/app/src/styles/theme/_reboot-bootstrap-dropdown.scss

@@ -1,38 +1,37 @@
 @use '../bootstrap/init' as *;
 
 .dropdown-menu {
-  color: $dropdown-color;
+  color: $color-dropdown;
   svg {
-    fill: $dropdown-color;
+    fill: $color-dropdown;
   }
 
-  background-color: $dropdown-bg;
+  background-color: $bgcolor-dropdown;
 }
 
 .dropdown-item {
-  --bgcolor-dropdown-link-hover: hsl(var(--bgcolor-global-hs),calc(var(--bgcolor-global-l) + 15%));
-  color: $dropdown-link-color;
+  color: $color-dropdown-link;
   svg {
-    fill: $dropdown-link-color;
+    fill: $color-dropdown-link;
   }
 
   @include hover-focus() {
-    color: $dropdown-link-hover-color;
+    color: $color-dropdown-link;
     svg {
-      fill: $dropdown-link-hover-color;
+      fill: $color-dropdown-link-hover;
     }
 
-    @include gradient-bg(var(--dropdown-link-hover-bg));
+    @include gradient-bg($bgcolor-dropdown-link-hover);
   }
 
   &:active,
   &.active,
   &:active:hover,
   &.active:hover {
-    color: $dropdown-link-active-color;
-    background-color: $dropdown-link-active-bg;
+    color: $color-dropdown-link-active;
+    background-color:  $bgcolor-dropdown-link-active;
     svg {
-      fill: $dropdown-link-active-color;
+      fill: $color-dropdown-link-active;
     }
   }
 }

packages/app/src/styles/theme/_reboot-bootstrap-tables.scss

@@ -8,37 +8,37 @@
 //
 
 .table {
-  color: $table-color;
-  background-color: $table-bg; // Reset for nesting within parents with `background-color`.
+  color: $color-table;
+  background-color: $bgcolor-table; // Reset for nesting within parents with `background-color`.
 
   th,
   td {
-    border-top-color: $table-border-color;
+    border-top-color: $border-color-table;
   }
 
   thead th {
-    border-bottom-color: $table-border-color;
+    border-bottom-color: $border-color-table;
   }
 
   tbody + tbody {
-    border-top-color: $table-border-color;
+    border-top-color: $border-color-table;
   }
 }
 
 .table-bordered {
-  border-color: $table-border-color;
+  border-color: $border-color-table;
 
   th,
   td {
-    border-color: $table-border-color;
+    border-color: $border-color-table;
   }
 }
 
 .table-hover {
   tbody tr {
     @include hover() {
-      color: $table-hover-color;
-      background-color: $table-hover-bg;
+      color: $color-table-hover;
+      background-color: $bgcolor-table-hover;
     }
   }
 }

packages/app/src/styles/theme/mixins/_hsl-button.scss

@@ -12,14 +12,14 @@
   // @include box-shadow($btn-box-shadow);
 
   @include bs.hover() {
-    color: hsl.contrast($background, $hover-background-darken-degrees);
+    color: hsl.contrast($background);
     @include bs.gradient-bg($hover-background);
     border-color: $hover-border;
   }
 
   &:focus,
   &.focus {
-    color: hsl.contrast($background, $hover-background-darken-degrees);
+    color: hsl.contrast($background);
     @include bs.gradient-bg($hover-background);
     border-color: $hover-border;
     // @if $enable-shadows {
@@ -34,7 +34,7 @@
   &.disabled,
   &:disabled {
     color: hsl.contrast($background);
-    background-color: $background;
+    @include bs.gradient-bg($background);
     border-color: $border;
     // Remove CSS gradients if they're enabled
     @if bs.$enable-gradients {
@@ -42,11 +42,13 @@
     }
   }
 
-  // &:not(:disabled):not(.disabled):active,
-  // &:not(:disabled):not(.disabled).active,
-  // .show > &.dropdown-toggle {
-  //   color: color-yiq($active-background);
-  //   background-color: $active-background;
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active,
+  .show > &.dropdown-toggle {
+    color: hsl.contrast($background);
+    background-color: $hover-background;
+    border-color: $hover-border;
+  }
   //   @if $enable-gradients {
   //     background-image: none; // Remove the gradient for the pressed/active state
   //   }
@@ -62,3 +64,43 @@
   //   }
   // }
 }
+
+// @mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
+@mixin button-outline-variant($color, $color-hover: hsl.contrast($color), $active-background: $color, $active-border: $color) {
+  color: $color;
+  border-color: $color;
+
+  @include bs.hover() {
+    color: $color-hover;
+    background-color: $active-background;
+    border-color: $active-border;
+  }
+
+  // &:focus,
+  // &.focus {
+  //   box-shadow: 0 0 0 bs.$btn-focus-width hsl.alpha($color,50%);
+  // }
+
+  &.disabled,
+  &:disabled {
+    color: $color;
+    background-color: transparent;
+  }
+
+  // &:not(:disabled):not(.disabled):active,
+  // &:not(:disabled):not(.disabled).active,
+  // .show > &.dropdown-toggle {
+  //   color: hsl.contrast($active-background);
+  //   background-color: $active-background;
+  //   border-color: $active-border;
+
+  // &:focus {
+  //   @if $enable-shadows and $btn-active-box-shadow != none {
+  //     @include bs.box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width hsl.alpha($color,50%));
+  //   } @else {
+  //     // Avoid using mixin so we can pass custom focus shadow properly
+  //     box-shadow: 0 0 0 $btn-focus-width hsl.alpha($color,50%);
+  //   }
+  // }
+  // }
+}

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

@@ -21,6 +21,7 @@
   --primary: hsl(var(--primary-hs),var(--primary-l));
   --primary-hs: 216.7,65%;
   --primary-l: 20.2%;
+  --primary-65: hsl(216.7,65%,85.2%);
   --accent: hsl(var(--accent-hs),var(--accent-l));
   --accent-hs: 198.6,74.2%;
   --accent-l: 48.6%;
@@ -32,14 +33,14 @@
   --bgcolor-inline-code: #{$gray-100}; //optional
   --bgcolor-card: #{$gray-50};
   --bgcolor-blinked-section: #{hsl.alpha(var(--primary),90%)};
-  --bgcolor-keyword-highlighted: #{$grw-marker-yellow};
+  // --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-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%;
@@ -50,7 +51,6 @@
   --color-link-wiki-hover: #{hsl.lighten(var(--color-link-wiki),20%)};
   --color-link-nabvar: #{$gray-500};
   --color-inline-code: #{darken($red, 15%)}; // optional
-  --color-modal-header: white;
 
 
   // List Group colors
@@ -58,9 +58,9 @@
   --bgcolor-list: var(--bgcolor-global); // optional
   // --color-list-hover: va(--color-global); // optional
   --bgcolor-list-hover: #{hsl.lighten(var(--bgcolor-global),3%)};// optional
-  // --color-list-active:white ; // optional
-  // $bgcolor-list-active: $primary; // optional
-  --color-page-list-group-item-meta: #{$gray-500};
+  // --color-list-active: white ; // optional
+  // --bgcolor-list-active: var(--primary); // optional
+  // --color-page-list-group-item-meta: #{$gray-500}; // optional
 
   // Table colors
   // --color-table: #; // optional
@@ -99,19 +99,26 @@
   --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: #{$gray-50}; // optional
 
   // Subnavigation
-  --bgcolor-subnav: #{hsl.darken(var(--bgcolor-global),3%)};
+  --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
-  // $color-nav-tabs-link-active: #; //optional
-  // $bordercolor-nav-tabs-hover: # # $bordercolor-nav-tabs; // optional
-  --bordercolor-nav-tabs-active: var(--bordercolor-nav-tabs) var(--bordercolor-nav-tabs) var(--bgcolor-global); // optional
+  // --bordercolor-nav-tabs: #{$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
+  // --color-tags: #; //optional
+  // --bgcolor-tags: #; //optional
 
   // Icon colors
   --color-editor-icons: var(--color-global);
@@ -121,13 +128,13 @@
   --bordercolor-inline-code: #{$gray-400}; // optional
 
   // Dropdown colors
-  --bgcolor-dropdown-link-active: $growi-blue;
+  --bgcolor-dropdown-link-active: #{$growi-blue};
 
   // admin theme box
   --color-theme-color-box: #{hsl.lighten(var(--primary), 20%)};
 
   @import './theme/apply-colors';
-  // @import './theme/apply-colors-light';
+  @import './theme/apply-colors-light';
 
   // Button
   .btn-group.grw-page-editor-mode-manager {
@@ -160,8 +167,8 @@
   --color-global: #{$gray-400};
   --color-global-hs: 0,0%;
   --color-global-l: 74%;
-  $color-reversal: $gray-900;
-  // $color-header: desaturate($primary, 20%);
+  --color-reversal: #{$gray-900};
+  // --color-header: desaturate($primary, 20%);
   --color-link: #7b9ad5;
   --color-link-hs: 219.3,51.7%;
   --color-link-l: 65.9%;
@@ -172,16 +179,14 @@
   --color-link-wiki-hover: #{hsl.lighten(var(--color-link-wiki),10%)};
   --color-link-nabvar: #a7a7a7;
   --color-inline-code: #c7254e; // optional
-  --color-modal-header: black;
 
   // List Group colors
   --color-list: var(--color-global); // optional
-  --bgcolor-list: var(--bgcolor-global); // optional
-  // --color-list-hover: va(--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
-  --color-page-list-group-item-meta: #{$gray-500};
+  // --color-list-active: white ; // optional
+  --bgcolor-list-active: var(--primary); // optional
 
   // Table colors
   // --color-table: #; // optional
@@ -249,7 +254,7 @@
   //Button
   .btn-group.grw-page-editor-mode-manager {
     .btn.btn-outline-primary {
-      @include page-editor-mode-manager.btn-page-editor-mode-manager(lighten($primary, 30%), lighten($primary, 20%), $primary, darken($primary, 20%));
+      @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/theme/_apply-colors-light.scss

@@ -2,43 +2,47 @@
 @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));
-$bgcolor-list-active: lighten($primary, 65%) !default;
-$color-list-active: color-yiq($bgcolor-list-active) !default;
-$color-table: var(--color-table,var(--color-global));
-$bgcolor-table: null !default;
-$border-color-table: $gray-200 !default;
-$color-table-hover: var(--color-table-hover,var(--color-table));
-$bgcolor-table-hover: rgba(black, 0.075) !default;
-$bgcolor-sidebar-list-group: var(--bgcolor-sidebar-list-group,var(--bgcolor-list));
-$color-tags: $secondary !default;
-$bgcolor-tags: $gray-200 !default;
-$border-color-global: $gray-300 !default;
-$border-color-toc: $border-color-global !default;
-$color-dropdown: var(--color-dropdown,var(--color-global));
-$color-dropdown-link: var(--color-dropdown-link,var(--color-global));
-$color-dropdown-link-hover: var(--color-dropdown-link-hover,var(--color-global));
-$color-dropdown-link-active: var(--color-reversal);
-$bgcolor-dropdown-link-active: $primary !default;
+// $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));
+// $bgcolor-list-active: var(--bgcolor-list-active,var(--primary-65));
+// $color-list-active: var(--color-list-active,#{hsl.contrast(var(--primary-65))});
+// $bgcolor-subnav: var(--bgcolor-subnav,#{hsl.darken(var(--bgcolor-global),3%)});
+// $color-table: var(--color-table,var(--color-global));
+// $bgcolor-table: var(--bgcolor-table,null);
+// $border-color-table: var(--border-color-table,#{$gray-200});
+// $color-table-hover: var(--color-table-hover,var(--color-table));
+// $bgcolor-table-hover: var(--bgcolor-table-hover,rgba(black, 0.075));
+// $bgcolor-sidebar-list-group: var(--bgcolor-sidebar-list-group,var(--bgcolor-list));
+// $color-tags: var(--color-tags,var(--secondary));
+// $bgcolor-tags: var(--bgcolor-tags,#{$gray-200});
+// $border-color-global: var(--border-color-global,#{$gray-300});
+// $border-color-toc: var(--border-color-toc,var(--border-color-global));
+// $color-dropdown: var(--color-dropdown,var(--color-global));
+// $color-dropdown-link: var(--color-dropdown-link,var(--color-global));
+// $color-dropdown-link-hover: var(--color-dropdown-link-hover,var(--color-global));
+// $color-dropdown-link-active: var(--color-reversal);
+// $bgcolor-dropdown-link-active: var(--bgcolor-dropdown-link-active,var(--primary));
 
 
 // override bootstrap variables
-$text-muted: $gray-500;
-$table-color: var(--color-table);
-$table-bg: $bgcolor-table;
-$table-border-color: $border-color-table;
-$table-hover-color: var(--color-table-hover);
-$table-hover-bg: $bgcolor-table-hover;
-$border-color: $border-color-global;
-$dropdown-color: var(--color-dropdown);
-$dropdown-link-color: var(--color-dropdown-link);
-$dropdown-link-hover-color: var(--color-dropdown-link-hover);
-$dropdown-link-active-color: var(--color-dropdown-link-active);
-$dropdown-link-active-bg: var(--bgcolor-dropdown-link-active);
+// $text-muted: #{$gray-500};
+// $table-color: $color-table;
+// $table-bg: $bgcolor-table;
+// $table-border-color: $border-color-table;
+// $table-hover-color: $color-table-hover;
+// $table-hover-bg: $bgcolor-table-hover;
+// $border-color: $border-color-global;
+// $dropdown-color: $color-dropdown;
+// $dropdown-link-color: $color-dropdown-link;
+// $dropdown-link-hover-color: $color-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';
@@ -46,217 +50,218 @@ $dropdown-link-active-bg: var(--bgcolor-dropdown-link-active);
 @import './reboot-bootstrap-tables';
 @import './reboot-bootstrap-dropdown';
 
-// 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)
-);
+// // 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
  */
-.form-control {
-  background-color: var(--bgcolor-global);
-}
+// .form-control {
+//   background-color: var(--bgcolor-global);
+// }
 
-.form-control::placeholder {
-  color: hsl(var(--bgcolor-global-hs),calc(var(--bgcolor-global-l) - 20%));
-}
+// .form-control::placeholder {
+//   color: #{hsl.darken(var(--bgcolor-global), 20%)};
+// }
 
-.form-control[disabled],
-.form-control[readonly] {
-  color: hsl(var(--color-global-hs),calc(var(--color-global-l) + 10%));
-  background-color: hsl(var(--color-global-hs),calc(var(--color-global-l) - 5%));
-}
+// .form-control[disabled],
+// .form-control[readonly] {
+//   color: #{hsl.lighten(var(--color-global),10%)};
+//   background-color: #{hsl.darken(var(--color-global),5%)};
+// }
 
 /*
  * card
  */
-.card.card-disabled {
-  background-color: var(--background-color);
-  border-color: $gray-200;
-}
+// .card.card-disabled {
+//   background-color: var(--background-color);
+//   border-color: #{$gray-200};
+// }
 
 /*
  * GROWI Login form
  */
-.nologin {
-  // background color
-  $color-gradient: #3e4d6c;
-  background: linear-gradient(45deg, darken($color-gradient, 30%) 0%, hsla(340, 100%, 55%, 0) 70%),
-    linear-gradient(135deg, var.$growi-green 10%, hsla(225, 95%, 50%, 0) 70%), linear-gradient(225deg, var.$growi-blue 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(white, 0.5);
-
-    .logo {
-      background-color: rgba(black, 0);
-      fill: rgba(black, 0.5);
-    }
-
-    h1 {
-      color: rgba(black, 0.5);
-    }
-  }
-
-  .noLogin-dialog {
-    background-color: rgba(white, 0.5);
-  }
-
-  .dropdown-with-icon {
-    .dropdown-toggle {
-      color: white;
-      background-color: rgba($gray-600, 0.7);
-      box-shadow: unset;
-      &:focus {
-        color: white;
-        background-color: rgba($gray-600, 0.7);
-      }
-    }
-    i {
-      color: darken(white, 30%);
-      background-color: rgba($gray-700, 0.7);
-    }
-  }
-
-  .input-group {
-    .input-group-text {
-      color: darken(white, 30%);
-      background-color: rgba($gray-700, 0.7);
-    }
-
-    .form-control {
-      color: white;
-      background-color: rgba($gray-600, 0.7);
-      box-shadow: unset;
-
-      &::placeholder {
-        color: darken(white, 30%);
-      }
-    }
-  }
-
-  // footer link text
-  .link-growi-org {
-    color: rgba(black, 0.4);
-
-    &:hover,
-    &.focus {
-      color: black;
-
-      .growi {
-        color: darken(var.$growi-green, 20%);
-      }
-
-      .org {
-        color: darken(var.$growi-blue, 15%);
-      }
-    }
-  }
-}
+// .nologin {
+//   // background color
+//   --color-gradient: #3e4d6c;
+//   background: linear-gradient(45deg, #{hsl.darken(var(--color-gradient), 30%)} 0%, hsla(340, 100%, 55%, 0) 70%),
+//     linear-gradient(135deg, #{var.$growi-green} 10%, hsla(225, 95%, 50%, 0) 70%), linear-gradient(225deg, #{var.$growi-blue} 10%, hsla(140, 90%, 50%, 0) 80%),
+//     linear-gradient(315deg, #{hsl.darken(var(--color-gradient), 25%)} 100%, hsla(35, 95%, 55%, 0) 70%);
+
+//   .noLogin-header {
+//     background-color: rgba(white, 0.5);
+
+//     .logo {
+//       background-color: rgba(black, 0);
+//       fill: rgba(black, 0.5);
+//     }
+
+//     h1 {
+//       color: rgba(black, 0.5);
+//     }
+//   }
+
+//   .noLogin-dialog {
+//     background-color: rgba(white, 0.5);
+//   }
+
+//   .dropdown-with-icon {
+//     .dropdown-toggle {
+//       color: white;
+//       background-color: rgba($gray-600, 0.7);
+//       box-shadow: unset;
+//       &:focus {
+//         color: white;
+//         background-color: rgba($gray-600, 0.7);
+//       }
+//     }
+//     i {
+//       color: darken(white, 30%);
+//       background-color: rgba($gray-700, 0.7);
+//     }
+//   }
+
+//   .input-group {
+//     .input-group-text {
+//       color: darken(white, 30%);
+//       background-color: rgba($gray-700, 0.7);
+//     }
+
+//     .form-control {
+//       color: white;
+//       background-color: rgba($gray-600, 0.7);
+//       box-shadow: unset;
+
+//       &::placeholder {
+//         color: darken(white, 30%);
+//       }
+//     }
+//   }
+
+//   // footer link text
+//   .link-growi-org {
+//     color: rgba(black, 0.4);
+
+//     &:hover,
+//     &.focus {
+//       color: black;
+
+//       .growi {
+//         color: darken(var.$growi-green, 20%);
+//       }
+
+//       .org {
+//         color: darken(var.$growi-blue, 15%);
+//       }
+//     }
+//   }
+// }
 
 /*
  * 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: $primary;
-      background-color: $gray-200;
-    }
-  }
-}
-
-.grw-drawer-toggler {
-  @extend .btn-light;
-  color: $gray-500;
-}
+// .grw-subnav {
+//   background-color: var(--bgcolor-subnav);
+// }
+
+// .grw-subnav-fixed-container .grw-subnav {
+//   background-color: #{hsl.alpha(var(--bgcolor-subnav),85%)};
+// }
+
+// .grw-page-editor-mode-manager {
+//   .btn-outline-primary {
+//     &:hover {
+//       color: var(--primary);
+//       background-color: #{$gray-200};
+//     }
+//   }
+// }
+
+// .grw-drawer-toggler {
+//   @extend .btn-light;
+//   color: $gray-500;
+// }
 
 /*
  * GROWI Sidebar
  */
-.grw-sidebar {
-  --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%);
-  // 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)
-  );
-  // sidebar-centent-bg
-  .grw-navigation-wrap {
-    // Drop a shadow on the light theme. The dark theme makes '$ bgcolor-sidebar-context' brighter than the body.
-    box-shadow: 0px 0px 3px rgba(black, 0.24);
-  }
-  // Pagetree
-  .grw-pagetree {
-    @include override-list-group-item-for-pagetree(
-      var(--color-sidebar-context),
-      hsl(var(--bgcolor-sidebar-contexths),calc(var(--bgcolor-sidebar-context-l) - 5%)),
-      hsl(var(--bgcolor-sidebar-context-hs),calc(var(--bgcolor-sidebar-context-l) - 12%)),
-      hsl(var(--color-sidebar-context-hs),calc(var(--color-sidebar-context-l) + 10%)),
-      hsl(var(--color-sidebar-context-hs),calc(var(--color-sidebar-context-l) + 8%)),
-      hsl(var(--bgcolor-sidebar-context-hs),calc(var(--bgcolor-sidebar-context-l) - 15%)),
-      hsl(var(--bgcolor-sidebar-context-h-s),calc(var(--bgcolor-sidebar-context-l) - 24%))
-    );
-    .grw-pagetree-triangle-btn {
-      @include mixins-buttons.button-outline-svg-icon-variant($gray-400, $primary);
-    }
-  }
-  .private-legacy-pages-link {
-    &:hover {
-      background: var(--bgcolor-list-hover);
-    }
-  }
-}
-
-.btn.btn-page-item-control {
-  @include button-outline-variant($gray-500, $primary, lighten($primary, 52%), transparent);
-  @include hover() {
-    background-color: lighten($primary, 58%);
-  }
-  &:not(:disabled):not(.disabled):active,
-  &:not(:disabled):not(.disabled).active {
-    color: $primary;
-  }
-  box-shadow: none !important;
-}
+// .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
+//   );
+//   // sidebar-centent-bg
+//   .grw-navigation-wrap {
+//     // Drop a shadow on the light theme. The dark theme makes '$ bgcolor-sidebar-context' brighter than the body.
+//     box-shadow: 0px 0px 3px rgba(black, 0.24);
+//   }
+//   // Pagetree
+//   .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%)}
+//     );
+
+//     .grw-pagetree-triangle-btn {
+//       @include mixins-buttons.button-outline-svg-icon-variant(#{gray-400}, var(--primary));
+//     }
+//   }
+//   .private-legacy-pages-link {
+//     &:hover {
+//       background: $bgcolor-list-hover;
+//     }
+//   }
+// }
+
+// .btn.btn-page-item-control {
+//   --gray-500: hsl(var(--gray-500-hs),var(--gray-500-l));
+//   --gray-500-hs: 210,13%;
+//   --gray-500-l: 61%;
+//   @include hsl-button.button-outline-variant(var(--gray-500), var(--primary), #{hsl.lighten(var(--primary), 52%)}, transparent);
+//   @include hover() {
+//     background-color: #{hsl.lighten(var(--primary), 58%)};
+//   }
+//   &:not(:disabled):not(.disabled):active,
+//   &:not(:disabled):not(.disabled).active {
+//     color: var(--primary);
+//   }
+//   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 {
-    .page-list-snippet {
-      color: hsl(var(--color-global-hs),calc(var(--color-global-l) + 10%));
-    }
-  }
-}
+// .page-list {
+//   .page-list-ul {
+//     > li {
+//       > span.page-list-meta {
+//         color: #{hsl.lighten(var(--color-global),10%)};
+//       }
+//     }
+//   }
+//   // List group
+//   .list-group-item {
+//     .page-list-snippet {
+//       color: #{hsl.lighten(var(--color-global),10%)};
+//     }
+//   }
+// }
 
 /*
  * GROWI ToC
@@ -361,10 +366,10 @@ $dropdown-link-active-bg: var(--bgcolor-dropdown-link-active);
 
 .wiki {
   h1 {
-    border-color: $border-color-theme;
+    // border-color: $border-color-theme;
   }
   h2 {
-    border-color: $border-color-theme;
+    // border-color: $border-color-theme;
   }
 }
 
@@ -386,8 +391,8 @@ $dropdown-link-active-bg: var(--bgcolor-dropdown-link-active);
  */
 .grw-tag-labels {
   .grw-tag-label {
-    color: $color-tags;
-    background-color: $bgcolor-tags;
+    // color: $color-tags;
+    // background-color: $bgcolor-tags;
   }
 }
 
@@ -396,8 +401,8 @@ $dropdown-link-active-bg: var(--bgcolor-dropdown-link-active);
  */
 .grw-popular-tag-labels {
   .grw-tag-label {
-    color: $color-tags;
-    background-color: $bgcolor-tags;
+    // color: $color-tags;
+    // background-color: $bgcolor-tags;
   }
 }
 
@@ -410,10 +415,10 @@ $dropdown-link-active-bg: var(--bgcolor-dropdown-link-active);
   }
 
   .grw-border-vr {
-    border-color: $border-color-toc;
+    // border-color: $border-color-toc;
   }
   .revision-toc {
-    border-color: $border-color-toc;
+    // border-color: $border-color-toc;
   }
 }
 
@@ -421,7 +426,7 @@ $dropdown-link-active-bg: var(--bgcolor-dropdown-link-active);
  * drawio
  */
 .drawio-viewer {
-  border-color: $border-color-global;
+  // border-color: $border-color-global;
 }
 
 /*
@@ -435,7 +440,7 @@ $dropdown-link-active-bg: var(--bgcolor-dropdown-link-active);
  * modal
  */
 .grw-modal-head {
-  border-color: $border-color-global;
+  // border-color: $border-color-global);
 }
 
 /*

packages/preset-themes/src/styles/theme/_reboot-bootstrap-dropdown.scss

@@ -1,38 +1,37 @@
-@use '../bootstrap/init' as *;
+// @use '../bootstrap/init' as *;
 
-.dropdown-menu {
-  color: $dropdown-color;
-  svg {
-    fill: $dropdown-color;
-  }
+// .dropdown-menu {
+//   color: $color-dropdown;
+//   svg {
+//     fill: $color-dropdown;
+//   }
 
-  background-color: $dropdown-bg;
-}
+//   background-color: $bgcolor-dropdown;
+// }
 
-.dropdown-item {
-  --bgcolor-dropdown-link-hover: hsl(var(--bgcolor-global-hs),calc(var(--bgcolor-global-l) + 15%));
-  color: $dropdown-link-color;
-  svg {
-    fill: $dropdown-link-color;
-  }
+// .dropdown-item {
+//   color: $color-dropdown-link;
+//   svg {
+//     fill: $color-dropdown-link;
+//   }
 
-  @include hover-focus() {
-    color: $dropdown-link-hover-color;
-    svg {
-      fill: $dropdown-link-hover-color;
-    }
+//   @include hover-focus() {
+//     color: $color-dropdown-link;
+//     svg {
+//       fill: $color-dropdown-link-hover;
+//     }
 
-    @include gradient-bg(var(--dropdown-link-hover-bg));
-  }
+//     @include gradient-bg($bgcolor-dropdown-link-hover);
+//   }
 
-  &:active,
-  &.active,
-  &:active:hover,
-  &.active:hover {
-    color: $dropdown-link-active-color;
-    background-color: $dropdown-link-active-bg;
-    svg {
-      fill: $dropdown-link-active-color;
-    }
-  }
-}
+//   &:active,
+//   &.active,
+//   &:active:hover,
+//   &.active:hover {
+//     color: $color-dropdown-link-active;
+//     background-color:  $bgcolor-dropdown-link-active;
+//     svg {
+//       fill: $color-dropdown-link-active;
+//     }
+//   }
+// }

packages/preset-themes/src/styles/theme/_reboot-bootstrap-tables.scss

@@ -7,41 +7,41 @@
 //
 //
 
-.table {
-  color: $table-color;
-  background-color: $table-bg; // Reset for nesting within parents with `background-color`.
+// .table {
+//   color: $color-table;
+//   background-color: $bgcolor-table; // Reset for nesting within parents with `background-color`.
 
-  th,
-  td {
-    border-top-color: $table-border-color;
-  }
+//   th,
+//   td {
+//     border-top-color: $border-color-table;
+//   }
 
-  thead th {
-    border-bottom-color: $table-border-color;
-  }
+//   thead th {
+//     border-bottom-color: $border-color-table;
+//   }
 
-  tbody + tbody {
-    border-top-color: $table-border-color;
-  }
-}
+//   tbody + tbody {
+//     border-top-color: $border-color-table;
+//   }
+// }
 
-.table-bordered {
-  border-color: $table-border-color;
+// .table-bordered {
+//   border-color: $border-color-table;
 
-  th,
-  td {
-    border-color: $table-border-color;
-  }
-}
+//   th,
+//   td {
+//     border-color: $border-color-table;
+//   }
+// }
 
-.table-hover {
-  tbody tr {
-    @include hover() {
-      color: $table-hover-color;
-      background-color: $table-hover-bg;
-    }
-  }
-}
+// .table-hover {
+//   tbody tr {
+//     @include hover() {
+//       color: $color-table-hover;
+//       background-color: $bgcolor-table-hover;
+//     }
+//   }
+// }
 
 .table-dark {
   color: $table-dark-color;

packages/preset-themes/src/styles/theme/mixins/_hsl-button.scss

@@ -12,16 +12,16 @@
   // @include box-shadow($btn-box-shadow);
 
   @include bs.hover() {
-    color: hsl.contrast($background, $hover-background-darken-degrees);
+    color: hsl.contrast($background);
     @include bs.gradient-bg($hover-background);
     border-color: $hover-border;
   }
 
   &:focus,
   &.focus {
-    color: hsl.contrast($background, $hover-background-darken-degrees);
+    color: hsl.contrast($background);
     @include bs.gradient-bg($hover-background);
-    border-color: $hover-border;;
+    border-color: $hover-border;
     // @if $enable-shadows {
     //   @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5));
     // } @else {
@@ -62,3 +62,43 @@
   //   }
   // }
 }
+
+// @mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
+@mixin button-outline-variant($color, $color-hover: hsl.contrast($color), $active-background: $color, $active-border: $color) {
+  color: $color;
+  border-color: $color;
+
+  @include bs.hover() {
+    color: $color-hover;
+    background-color: $active-background;
+    border-color: $active-border;
+  }
+
+  // &:focus,
+  // &.focus {
+  //   box-shadow: 0 0 0 bs.$btn-focus-width hsl.alpha($color,50%);
+  // }
+
+  &.disabled,
+  &:disabled {
+    color: $color;
+    background-color: transparent;
+  }
+
+  // &:not(:disabled):not(.disabled):active,
+  // &:not(:disabled):not(.disabled).active,
+  // .show > &.dropdown-toggle {
+  //   color: hsl.contrast($active-background);
+  //   background-color: $active-background;
+  //   border-color: $active-border;
+
+  // &:focus {
+  //   @if $enable-shadows and $btn-active-box-shadow != none {
+  //     @include bs.box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width hsl.alpha($color,50%));
+  //   } @else {
+  //     // Avoid using mixin so we can pass custom focus shadow properly
+  //     box-shadow: 0 0 0 $btn-focus-width hsl.alpha($color,50%);
+  //   }
+  // }
+  // }
+}

packages/preset-themes/src/styles/theme/mixins/_list-group.scss

@@ -7,7 +7,7 @@
     .list-group-item {
       color: $color;
       background-color: $bgcolor;
-      border-color: $border-color-global;
+      // border-color: $border-color-global;
 
       &.list-group-item-action {
         &:hover {
@@ -29,7 +29,7 @@
   .list-group-item {
     color: $color;
     background-color: transparent;
-    border-color: $border-color-global;
+    // border-color: $border-color-global;
 
     .grw-count-badge {
       @include count-badge.count-badge($btn-color, $bgcolor-hover, 28px);