fix apply-colors-light

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

@@ -9,6 +9,7 @@
 $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-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));
@@ -183,10 +184,10 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
   }
 }
 
-.grw-drawer-toggler {
-  @extend .btn-light;
-  color: $gray-500;
-}
+// .grw-drawer-toggler {
+//   @extend .btn-light;
+//   color: #{$gray-500};
+// }
 
 /*
  * GROWI Sidebar
@@ -217,6 +218,7 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
       #{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));
     }
@@ -366,10 +368,10 @@ $dropdown-link-active-bg: $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/preset-themes/src/styles/default.scss

@@ -40,7 +40,7 @@
   --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%;
@@ -55,11 +55,11 @@
 
   // List Group colors
   --color-list: var(--color-global); // optional
-  // --bgcolor-list: var(--bgcolor-global); // optional
+  --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-list-active: white ; // optional
+  // --bgcolor-list-active: var(--primary); // optional
   // --color-page-list-group-item-meta: #{$gray-500}; // optional
 
   // Table colors
@@ -111,13 +111,14 @@
   --bgcolor-subnav-l: calc(var(--bgcolor-global-l) - 3%);
 
   // Tabs
+  // --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);
@@ -166,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%;
@@ -182,9 +183,9 @@
   // List Group colors
   --color-list: var(--color-global); // optional
   // --bgcolor-list: var(--bgcolor-global); // optional
-  // --color-list-hover: va(--color-global); // optional
+  // --color-list-hover: var(--color-global); // optional
   --bgcolor-list-hover: #{hsl.lighten(var(--bgcolor-global),3%)}; // optional
-  // --color-list-active:white ; // optional
+  // --color-list-active: white ; // optional
   --bgcolor-list-active: var(--primary); // optional
 
   // Table colors
@@ -253,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

@@ -191,42 +191,43 @@
 /*
  * 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
-  // );
-  // 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;
-    }
-  }
-}
+// .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));