replace determine optional variables

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

@@ -10,23 +10,21 @@
 //
 
 // // determine optional variables
-// $border-image-navbar: linear-gradient(to right, $gray-300 0%, $gray-300 100%) !default;
-// $bgcolor-search-top-dropdown: $secondary !default;
-// $bgcolor-sidebar-nav-item-active: darken($bgcolor-sidebar, 10%) !default;
-// $text-shadow-sidebar-nav-item-active: var(--text-shadow-sidebar-nav-item-active,1px 1px 2px var(--primary));
-
+$border-image-navbar: var(--border-image-navbar,linear-gradient(to right, $gray-300 0%, $gray-300 100%));
+$bgcolor-search-top-dropdown: var(--bgcolor-search-top-dropdown,$secondary);
+$bgcolor-sidebar-nav-item-active: var(--bgcolor-sidebar-nav-item-active,hsl(var(--primary-hs),calc(var(--primary-l) - 10%)));
+$text-shadow-sidebar-nav-item-active: var(--text-shadow-sidebar-nav-item-active,1px 1px 2px var(--primary));
 $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: $gray-300 !default;
-// $bordercolor-nav-tabs-hover: $gray-200 $gray-200 $bordercolor-nav-tabs !default;
-// $color-nav-tabs-link-active: $gray-600 !default;
-// $bordercolor-nav-tabs-active: var(--ordercolor-nav-tabs-active,var(--bordercolor-nav-tabs) var(--bordercolor-nav-tabs) var(--bgcolor-global));
-// $color-btn-reload-in-sidebar: $gray-500;
-// $bgcolor-keyword-highlighted: var.$grw-marker-yellow !default;
-// $color-page-list-group-item-meta: var(--color-page-list-group-item-meta,$gray-500);
-// $color-search-page-list-title: var(--color-search-page-list-title,var(--color-global));
+$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));
+$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);
+$color-search-page-list-title: var(--color-search-page-list-title,var(--color-global));
 
 // // override bootstrap variables
 // $body-bg: var(--bgcolor-global);
@@ -430,9 +428,9 @@ code:not([class^='language-']) {
 //     }
 //   }
 
-//   .highlighted-keyword {
-//     background: linear-gradient(transparent 60%, $bgcolor-keyword-highlighted 60%);
-//   }
+.highlighted-keyword {
+  background: linear-gradient(transparent 60%, var(--bgcolor-keyword-highlighted) 60%);
+}
 
 //   a {
 //     color: var(--color-link-wiki);
@@ -598,11 +596,11 @@ code:not([class^='language-']) {
 //   .search-control {
 //     background-color: var(--bgcolor-global);
 //   }
-//   .page-list {
-//     .highlighted-keyword {
-//       background: linear-gradient(transparent 60%, $bgcolor-keyword-highlighted 60%);
-//     }
-//   }
+.page-list {
+  .highlighted-keyword {
+    background: linear-gradient(transparent 60%, var(--bgcolor-keyword-highlighted) 60%);
+  }
+}
 // }
 
 // /*

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

@@ -81,7 +81,6 @@
   --fillcolor-logo-mark: hsl(var(--bgcolor-navbar-h),calc(var(--bgcolor-navbar-s) - 20%),calc(var(--bgcolor-navbar-l) + 15%));
   // Sidebar
   --bgcolor-sidebar: var(--primary);
-  $bgcolor-sidebar: #122c55;
   --bgcolor-sidebar-hs: var(--primary-hs);
   --bgcolor-sidebar-l: var(--primary-l);
   --bgcolor-sidebar-nav-item-active: rgba(black, 0.37); // optional
@@ -129,7 +128,7 @@
   // Button
   .btn-group.grw-page-editor-mode-manager {
     .btn.btn-outline-primary {
-      @include page-editor-mode-manager.btn-page-editor-mode-manager(primary, lighten($primary, 65%), lighten($primary, 70%));
+      @include page-editor-mode-manager.btn-page-editor-mode-manager(var(--primary),hsl(var(--primary-hs),calc(var(--primary-l) + 65%)), hsl(var(--primary-hs),calc(var(--primary-l) + 70%)));
     }
   }
 }

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

@@ -9,21 +9,22 @@
 //
 
 // determine optional variables
-$border-image-navbar: linear-gradient(to right, $gray-300 0%, $gray-300 100%) !default;
-$bgcolor-search-top-dropdown: $secondary !default;
+// $border-image-navbar: linear-gradient(to right, $gray-300 0%, $gray-300 100%) !default;
+// $bgcolor-search-top-dropdown: $secondary !default;
 // $bgcolor-sidebar-nav-item-active: darken($bgcolor-sidebar, 10%) !default;
-$text-shadow-sidebar-nav-item-active: var(--text-shadow-sidebar-nav-item-active,1px 1px 2px var(--primary));
+// $text-shadow-sidebar-nav-item-active: var(--text-shadow-sidebar-nav-item-active,1px 1px 2px var(--primary));
 // $bgcolor-inline-code: $gray-100 !default;
 // $color-inline-code: darken($red, 15%) !default;
 // $bordercolor-inline-code: $gray-400 !default;
-$bordercolor-nav-tabs: $gray-300 !default;
-$bordercolor-nav-tabs-hover: $gray-200 $gray-200 $bordercolor-nav-tabs !default;
-$color-nav-tabs-link-active: $gray-600 !default;
-$bordercolor-nav-tabs-active: var(--ordercolor-nav-tabs-active,var(--bordercolor-nav-tabs) var(--bordercolor-nav-tabs) var(--bgcolor-global));
-$color-btn-reload-in-sidebar: $gray-500;
-$bgcolor-keyword-highlighted: var.$grw-marker-yellow !default;
-$color-page-list-group-item-meta: var(--color-page-list-group-item-meta,$gray-500);
-$color-search-page-list-title: var(--color-search-page-list-title,var(--color-global));
+// $bordercolor-nav-tabs: $gray-300 !default;
+// $bordercolor-nav-tabs-hover: $gray-200 $gray-200 $bordercolor-nav-tabs !default;
+// $color-nav-tabs-link-active: $gray-600 !default;
+// $bordercolor-nav-tabs-active: var(--bordercolor-nav-tabs-active,var(--bordercolor-nav-tabs) var(--bordercolor-nav-tabs) var(--bgcolor-global));
+// color-btn-reload-in-sidebar: $gray-500;
+// $bgcolor-keyword-highlighted: var.$grw-marker-yellow !default;
+// $color-page-list-group-item-meta: var(--color-page-list-group-item-meta,$gray-500);
+// $color-search-page-list-title: var(--color-search-page-list-title,var(--color-global));
+
 
 // override bootstrap variables
 $body-bg: var(--bgcolor-global);
@@ -31,9 +32,9 @@ $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: $bordercolor-nav-tabs;
-$nav-tabs-link-hover-border-color: $bordercolor-nav-tabs-hover;
-$nav-tabs-link-active-color: $color-nav-tabs-link-active;
+$nav-tabs-border-color: var(--bordercolor-nav-tabs);
+$nav-tabs-link-hover-border-color: var(--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);
 $theme-colors: map-merge($theme-colors, ( primary: $primary ));
@@ -247,7 +248,7 @@ ul.pagination {
 
   .grw-sidebar-content-header {
     .grw-btn-reload {
-      color: $color-btn-reload-in-sidebar;
+      color: var(--color-btn-reload-in-sidebar);
     }
 
     .grw-recent-changes-resize-button {
@@ -436,9 +437,9 @@ ul.pagination {
     }
   }
 
-  .highlighted-keyword {
-    background: linear-gradient(transparent 60%, $bgcolor-keyword-highlighted 60%);
-  }
+  // .highlighted-keyword {
+  //   background: linear-gradient(transparent 60%, $bgcolor-keyword-highlighted 60%);
+  // }
 
   a {
     color: var(--color-link-wiki);
@@ -601,11 +602,11 @@ body.editing-sidebar {
   .search-control {
     background-color: var(--bgcolor-global);
   }
-  .page-list {
-    .highlighted-keyword {
-      background: linear-gradient(transparent 60%, $bgcolor-keyword-highlighted 60%);
-    }
-  }
+  // .page-list {
+  //   .highlighted-keyword {
+  //     background: linear-gradient(transparent 60%, $bgcolor-keyword-highlighted 60%);
+  //   }
+  // }
 }
 
 /*