Replace Apply to Bootstrap

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

@@ -14,30 +14,30 @@ $border-image-navbar: var(--border-image-navbar,linear-gradient(to right, $gray-
 $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);
+$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-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));
-$color-btn-reload-in-sidebar: var(--color-btn-reload-in-sidebar,$gray-500);
+$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-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);
-// $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-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 ));
+$body-bg: var(--bgcolor-global);
+$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-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 ));
 
 @import 'reboot-bootstrap-buttons';
 @import 'reboot-bootstrap-colors';
@@ -46,7 +46,7 @@ $color-search-page-list-title: var(--color-search-page-list-title,var(--color-gl
 @import 'reboot-toastr-colors';
 
 // // determine variables with　bootstrap function (These variables can be used after importing bootstrap above)
-// $color-modal-header: color-yiq($primary) !default;
+$color-modal-header: var(--color-modal-header,contrast(var(--primary)));
 
 code:not([class^='language-']) {
   @include code.code-inline-color($color-inline-code, $bgcolor-inline-code, $bordercolor-inline-code);
@@ -60,6 +60,15 @@ code:not([class^='language-']) {
 //== Apply to Bootstrap Elements
 //
 
+// Alert link
+// @each $color, $value in $theme-colors {
+//   .alert.alert-#{$color} {
+//     a,
+//     a:hover {
+//       color: theme-color-level($color, $alert-color-level - 2);
+//     }
+//   }
+// }
 
 // // Dropdown
 // .grw-apperance-mode-dropdown {
@@ -312,84 +321,84 @@ code:not([class^='language-']) {
 //   fill: white;
 // }
 
-// /*
-//  * Modal
-//  */
-// .modal {
-//   .modal-header {
-//     border-bottom-color: $border-color-theme;
-//     .modal-title {
-//       color: $color-modal-header;
-//     }
-//     .close {
-//       color: $color-modal-header;
-//       opacity: 0.5;
-//       &:hover {
-//         opacity: 0.9;
-//       }
-//     }
-//   }
-
-//   .modal-content {
-//     background-color: var(--bgcolor-global);
-//   }
+/*
+ * Modal
+ */
+.modal {
+  .modal-header {
+    border-bottom-color: var(--border-color-theme);
+    .modal-title {
+      color: var(--color-modal-header);
+    }
+    .close {
+      color: var(--color-modal-header);
+      opacity: 0.5;
+      &:hover {
+        opacity: 0.9;
+      }
+    }
+  }
 
-//   .modal-footer {
-//     border-top-color: $border-color-theme;
-//   }
-// }
+  .modal-content {
+    background-color: var(--bgcolor-global);
+  }
 
-// .grw-custom-nav-tab {
-//   .nav-item {
-//     &:hover,
-//     &:focus {
-//       background-color: var(--color-link); opacity:0.9;
-//     }
-//     .nav-link {
-//       -webkit-appearance: none;
-//       color: var(--color-link);
-//       svg {
-//         fill: var(--color-link);
-//       }
+  .modal-footer {
+    border-top-color: var(--border-color-theme);
+  }
+}
 
-//       // Disabled state lightens text
-//       &.disabled {
-//         color: $nav-link-disabled-color;
-//         svg {
-//           fill: $nav-link-disabled-color;
-//         }
-//       }
-//     }
-//   }
+.grw-custom-nav-tab {
+  .nav-item {
+    &:hover,
+    &:focus {
+      background-color: var(--color-link); opacity:0.9;
+    }
+    .nav-link {
+      -webkit-appearance: none;
+      color: var(--color-link);
+      svg {
+        fill: var(--color-link);
+      }
+
+      // Disabled state lightens text
+      &.disabled {
+        color: $nav-link-disabled-color;
+        svg {
+          fill: $nav-link-disabled-color;
+        }
+      }
+    }
+  }
 
-//   .grw-nav-slide-hr {
-//     border-color: var(--color-link);
-//   }
-// }
+  .grw-nav-slide-hr {
+    border-color: var(--color-link);
+  }
+}
 
-// .grw-page-accessories-modal {
-//   .modal-header {
-//     .close {
-//       color: $secondary;
-//     }
-//   }
-// }
+.grw-page-accessories-modal {
+  .modal-header {
+    .close {
+      color: $secondary;
+    }
+  }
+}
 
-// /*
-//  * cards
-//  */
-// .card.well {
-//   color: var(--color-global);
-//   background-color: var(--bgcolor-card);
-//   border-color: $light;
-//   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-// }
+/*
+ * cards
+ */
+.card.well {
+  color: var(--color-global);
+  background-color: var(--bgcolor-card);
+  border-color: $light;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+}
 
-// .admin-bot-card {
-//   .grw-botcard-title-active {
-//     color: $gray-200;
-//   }
-// }
+.admin-bot-card {
+  .grw-botcard-title-active {
+    color: $gray-200;
+  }
+}
 
 // /*
 //  * Form Slider
@@ -479,9 +488,8 @@ code:not([class^='language-']) {
 //       }
 
 //       &.list-group-item-action {
-//         --bgcolor-page-list-group-item-active: hsl(from var(--bgcolor-global) h s calc(l + 76%));
 //         &.active {
-//           background-color: var(--bgcolor-page-list-group-item-active);
+//           background-color: hsl(var(--bgcolor-global-hs),calc(var(--bgcolor-global-l) + 76%));
 //           border-left-color: $primary;
 //         }
 //       }
@@ -498,11 +506,11 @@ code:not([class^='language-']) {
 //     background-color: var(--bgcolor-global-darken2);
 
 //     .page-editor-editor-container {
-//       border-right-color: $border-color-theme;
+//       border-right-color: var(--border-color-theme);
 
 //       .navbar-editor {
 //         background-color: var(--bgcolor-global); // same color with active tab
-//         border-bottom-color: $border-color-theme;
+//         border-bottom-color: var(--border-color-theme);
 //       }
 //     }
 

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

@@ -30,7 +30,6 @@
   --bgcolor-global: hsl(var(--bgcolor-global-hs),var(--bgcolor-global-l));
   --bgcolor-global-hs: 0,0%;
   --bgcolor-global-l: 100%;
-  --body-bg: var(--bgcolor-global);
   $bgcolor-inline-code: $gray-100; //optional
   --bgcolor-card: #{$gray-50};
   $bgcolor-blinked-section: rgba($primary, 0.1);
@@ -112,7 +111,7 @@
   --color-editor-icons: var(--color-global);
 
   // Border colors
-  $border-color-theme: $gray-400;
+  --border-color-theme: #{$gray-400};
   $bordercolor-inline-code: $gray-400; // optional
 
   // Dropdown colors
@@ -145,7 +144,6 @@
   --bgcolor-global: #131418;
   --bgcolor-global-hs: 228,11.6%;
   --bgcolor-global-l: 9.4%;
-  --body-bg: var(--bgcolor-global);
   $bgcolor-inline-code: #1f1f22; //optional
   --bgcolor-card: hsl(var(--bgcolor-global-hs),calc(var(--bgcolor-global-l) - 5%));
   $bgcolor-blinked-section: rgba($primary, 0.4);
@@ -158,11 +156,9 @@
   $color-reversal: $gray-900;
   // $color-header: desaturate($primary, 20%);
   --color-link: #7b9ad5;
-  --link-color: var(--color-link);
   --color-link-hs: 219.3,51.7%;
   --color-link-l: 65.9%;
   --color-link-hover: hsl(var(--color-link-hs), calc(var(--color-link-l) + 10%));
-  --link-hover-color: var(--color-link-hover);
   --color-link-wiki: var(--color-link);
   --color-link-wiki-hs: var(--color-link-hs);
   --color-link-wiki-l: var(--color-link-l);
@@ -230,7 +226,7 @@
   --color-editor-icons: var(--color-global);
 
   // Border colors
-  $border-color-theme: $gray-400;
+  --border-color-theme: #{$gray-400};
   $bordercolor-inline-code: $secondary; // optional
 
   // admin theme box

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

@@ -27,22 +27,22 @@
 
 
 // override bootstrap variables
-$body-bg: var(--bgcolor-global);
-$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-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 ));
+// $body-bg: var(--bgcolor-global);
+// $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-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 ));
 
 @import 'reboot-bootstrap-nav';
 
 // determine variables with　bootstrap function (These variables can be used after importing bootstrap above)
-$color-modal-header: color-yiq($primary) !default;
+// $color-modal-header: var(--color-modal-header,contrast(var(--primary)));
 
 // code:not([class^='language-']) {
 //   @include code.code-inline-color($color-inline-code, $bgcolor-inline-code, $bordercolor-inline-code);
@@ -57,14 +57,14 @@ $color-modal-header: color-yiq($primary) !default;
 //
 
 // Alert link
-// @each $color, $value in $theme-colors {
-//   .alert.alert-#{$color} {
-//     a,
-//     a:hover {
-//       color: theme-color-level($color, $alert-color-level - 2);
-//     }
-//   }
-// }
+@each $color, $value in $theme-colors {
+  .alert.alert-#{$color} {
+    a,
+    a:hover {
+      color: theme-color-level($color, $alert-color-level - 2);
+    }
+  }
+}
 
 // Dropdown
 .grw-apperance-mode-dropdown {
@@ -326,12 +326,12 @@ ul.pagination {
  */
 .modal {
   .modal-header {
-    border-bottom-color: $border-color-theme;
+    // border-bottom-color: $border-color-theme;
     .modal-title {
-      color: $color-modal-header;
+      // color: $color-modal-header;
     }
     .close {
-      color: $color-modal-header;
+      // color: $color-modal-header;
       opacity: 0.5;
       &:hover {
         opacity: 0.9;
@@ -344,7 +344,7 @@ ul.pagination {
   }
 
   .modal-footer {
-    border-top-color: $border-color-theme;
+    // border-top-color: $border-color-theme;
   }
 }
 
@@ -505,11 +505,11 @@ ul.pagination {
     background-color: hsl(var(--bgcolor-global-hs),calc(var(--bgcolor-global-l) - 2%));
 
     .page-editor-editor-container {
-      border-right-color: $border-color-theme;
+      // border-right-color: $border-color-theme;
 
       .navbar-editor {
         background-color: var(--bgcolor-global); // same color with active tab
-        border-bottom-color: $border-color-theme;
+        // border-bottom-color: $border-color-theme;
       }
     }
 
@@ -622,7 +622,7 @@ mark.rbt-highlight-text {
  */
 .page-content-footer {
   background-color: hsl(var(--bgcolor-global-hs),calc(var(--bgcolor-global-l) - 2%));
-  border-top-color: $border-color-theme;
+  // border-top-color: $border-color-theme;
 }
 
 /*