Merge pull request #7175 from weseek/imprv/apply-colors-light-last

imprv:apply colors light last

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

@@ -14,6 +14,7 @@ $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: var(--bgcolor-table,null);
+$border-color-theme: var(--border-color-theme,#{$gray-400});
 $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));
@@ -21,7 +22,7 @@ $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));
+$border-color-toc: var(--border-color-toc,#{$gray-300});
 $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));
@@ -270,9 +271,8 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
  * GROWI ToC
  */
 .revision-toc-content {
-  --bgcolor-global-darken20: hsl(from var(--bgcolor-global) h s calc(l - 20%));
   ::marker {
-    color: var(--bgcolor-global-darken20);
+    color: #{hsl.darken(var(--bgcolor-global),20%)};
   }
 }
 
@@ -280,7 +280,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;
@@ -288,8 +288,8 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
 
   .input-group-text {
     margin-right: 1px;
-    color: $secondary;
-    border-color: $light;
+    color: var(--secondary);
+    border-color: var(--light);
   }
 
   .btn.btn-outline-secondary {
@@ -302,7 +302,7 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
  */
 .link-edit-modal {
   span i {
-    color: $gray-400;
+    color: #{$gray-400};
   }
 }
 
@@ -311,7 +311,7 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
  */
 
 .grw-grid-edit-preview {
-  background: $gray-100;
+  background: #{$gray-100};
 }
 
 /*
@@ -319,7 +319,9 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
  */
 .grw-slack-notification {
   background-color: white;
-  $color-slack: #4b144c;
+  --color-slack: hsl(var(--color-slack-hs),var(--color-slack-l));
+  --color-slack-hs: 299,58%;
+  --color-slack-l: 19%;
 
   .form-control {
     background: white;
@@ -327,20 +329,20 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
 
   .custom-control-label {
     &::before {
-      background-color: $gray-200;
+      background-color: #{$gray-200};
       border-color: transparent;
     }
     &::after {
       background-color: white;
-      // background-image: url(/images/icons/slack/slack-logo-off.svg); -- should be specified in app -- 2022.12.09 Yuki Takei
+      background-image: url(/images/icons/slack/slack-logo-off.svg);
     }
   }
   .custom-control-input:checked ~ .custom-control-label {
     &::before {
-      background-color: lighten($color-slack, 60%);
+      background-color: #{hsl.lighten(var(--color-slack), 60%)};
     }
     &::after {
-      // background-image: url(/images/icons/slack/slack-logo-on.svg); -- should be specified in app -- 2022.12.09 Yuki Takei
+      background-image: url(/images/icons/slack/slack-logo-on.svg);
     }
   }
   .grw-slack-logo svg {
@@ -357,7 +359,7 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
   }
 
   .grw-btn-slack-triangle {
-    color: $secondary;
+    color: var(--secondary);
   }
 }
 
@@ -365,15 +367,15 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
  * GROWI HandsontableModal
  */
 .grw-hot-modal-navbar {
-  background-color: $light;
+  background-color: var(--light);
 }
 
 .wiki {
   h1 {
-    border-color: var(--border-color-theme);
+    border-color: $border-color-theme;
   }
   h2 {
-    border-color: var(--border-color-theme);
+    border-color: $border-color-theme;
   }
 }
 
@@ -415,7 +417,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 {
@@ -451,7 +453,6 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
  * skeleton
  */
 .grw-skeleton {
-  --bgcolor-subnav-lighten10 : hsl(from var(--bgcolor-subnav) h s calc(l + 10%));
-  background-color: var(--bgcolor-subnav-lighten10);
+  background-color: #{hsl.lighten(var(--bgcolor-navbar),10%)};
 }
 

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

@@ -17,6 +17,7 @@ $bgcolor-sidebar-nav-item-active: var(--bgcolor-sidebar-nav-item-active,#{hsl.da
 $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%)});
+$border-color-theme: var(--border-color-theme,#{$gray-400});
 $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} #{$bordercolor-nav-tabs});
@@ -325,7 +326,7 @@ ul.pagination {
  */
 .modal {
   .modal-header {
-    border-bottom-color: var(--border-color-theme);
+    border-bottom-color: $border-color-theme;
     .modal-title {
       color: $color-modal-header;
     }
@@ -343,7 +344,7 @@ ul.pagination {
   }
 
   .modal-footer {
-    border-top-color: var(--border-color-theme);
+    border-top-color: $border-color-theme;
   }
 }
 
@@ -504,11 +505,11 @@ ul.pagination {
     background-color: #{hsl.darken(var(--bgcolor-global),2%)};
 
     .page-editor-editor-container {
-      border-right-color: var(--border-color-theme);
+      border-right-color: $border-color-theme;
 
       .navbar-editor {
         background-color: var(--bgcolor-global); // same color with active tab
-        border-bottom-color: var(--border-color-theme);
+        border-bottom-color: $border-color-theme;
       }
     }
 
@@ -621,7 +622,7 @@ mark.rbt-highlight-text {
  */
 .page-content-footer {
   background-color: #{hsl.darken(var(--bgcolor-global),2%)};
-  border-top-color: var(--border-color-theme);
+  border-top-color: $border-color-theme;
 }
 
 /*

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

@@ -74,6 +74,7 @@
   --bgcolor-navbar-h:0;
   --bgcolor-navbar-s:0%;
   --bgcolor-navbar-l:12.94%;
+  --bgcolor-navbar-hs:var(--bgcolor-navbar-h),var(--bgcolor-navbar-s);
   --bgcolor-search-top-dropdown: var(--accent);
   --bgcolor-search-top-dropdown-hs: var(--accent-hs);
   --bgcolor-search-top-dropdown-l: var(--accent-l);
@@ -124,7 +125,6 @@
   --color-editor-icons: var(--color-global);
 
   // Border colors
-  --border-color-theme: #{$gray-400};
   --bordercolor-inline-code: #{$gray-400}; // optional
 
   // Dropdown colors
@@ -242,7 +242,6 @@
   --color-editor-icons: var(--color-global);
 
   // Border colors
-  --border-color-theme: #{$gray-400};
   --bordercolor-inline-code: var(--secondary); // optional
 
   // admin theme box

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

@@ -1,9 +1,9 @@
-@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;
+// @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
@@ -44,11 +44,11 @@
 // $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';
+// @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(
@@ -266,187 +266,187 @@
 /*
  * GROWI ToC
  */
-.revision-toc-content {
-  ::marker {
-    color: hsl(var(--bgcolor-global-hs),calc(var(--bgcolor-global-l) - 20%));
-  }
-}
+// .revision-toc-content {
+//   ::marker {
+//     color: #{hsl.darken(var(--bgcolor-global),20%)};
+//   }
+// }
 
 /*
  * GROWI Editor
  */
-.grw-editor-navbar-bottom {
-  background-color: $gray-50;
+// .grw-editor-navbar-bottom {
+//   background-color: #{$gray-50};
 
-  #slack-mark-white {
-    display: none;
-  }
+//   #slack-mark-white {
+//     display: none;
+//   }
 
-  .input-group-text {
-    margin-right: 1px;
-    color: $secondary;
-    border-color: $light;
-  }
+//   .input-group-text {
+//     margin-right: 1px;
+//     color: var(--secondary);
+//     border-color: var(--light);
+//   }
 
-  .btn.btn-outline-secondary {
-    border-color: $border-color;
-  }
-}
+//   .btn.btn-outline-secondary {
+//     border-color: $border-color;
+//   }
+// }
 
 /*
  * GROWI Link Edit Modal
  */
-.link-edit-modal {
-  span i {
-    color: $gray-400;
-  }
-}
+// .link-edit-modal {
+//   span i {
+//     color: #{$gray-400};
+//   }
+// }
 
 /*
  * GROWI Grid Edit Modal
  */
 
-.grw-grid-edit-preview {
-  background: $gray-100;
-}
+// .grw-grid-edit-preview {
+//   background: #{$gray-100};
+// }
 
 /*
  * Slack
  */
-.grw-slack-notification {
-  background-color: white;
-  $color-slack: #4b144c;
-
-  .form-control {
-    background: white;
-  }
-
-  .custom-control-label {
-    &::before {
-      background-color: $gray-200;
-      border-color: transparent;
-    }
-    &::after {
-      background-color: white;
-      // background-image: url(/images/icons/slack/slack-logo-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, 60%);
-    }
-    &::after {
-      // background-image: url(/images/icons/slack/slack-logo-on.svg); -- should be specified in app -- 2022.12.09 Yuki Takei
-    }
-  }
-  .grw-slack-logo svg {
-    fill: #af30b0;
-  }
-
-  .grw-btn-slack {
-    background-color: white;
-
-    &:hover,
-    &:focus {
-      background-color: white;
-    }
-  }
-
-  .grw-btn-slack-triangle {
-    color: $secondary;
-  }
-}
+// .grw-slack-notification {
+//   background-color: white;
+//   --color-slack: #4b144c;
+
+//   .form-control {
+//     background: white;
+//   }
+
+//   .custom-control-label {
+//     &::before {
+//       background-color: #{$gray-200};
+//       border-color: transparent;
+//     }
+//     &::after {
+//       background-color: white;
+//       // background-image: url(/images/icons/slack/slack-logo-off.svg); -- should be specified in app -- 2022.12.09 Yuki Takei
+//     }
+//   }
+//   .custom-control-input:checked ~ .custom-control-label {
+//     &::before {
+//       background-color: #{hsl.lighten(var(--color-slack), 60%)};
+//     }
+//     &::after {
+//       // background-image: url(/images/icons/slack/slack-logo-on.svg); -- should be specified in app -- 2022.12.09 Yuki Takei
+//     }
+//   }
+//   .grw-slack-logo svg {
+//     fill: #af30b0;
+//   }
+
+//   .grw-btn-slack {
+//     background-color: white;
+
+//     &:hover,
+//     &:focus {
+//       background-color: white;
+//     }
+//   }
+
+//   .grw-btn-slack-triangle {
+//     color: var(--secondary);
+//   }
+// }
 
 /*
  * GROWI HandsontableModal
  */
-.grw-hot-modal-navbar {
-  background-color: $light;
-}
-
-.wiki {
-  h1 {
-    // border-color: $border-color-theme;
-  }
-  h2 {
-    // border-color: $border-color-theme;
-  }
-}
+// .grw-hot-modal-navbar {
+//   background-color: var(--light);
+// }
+
+// .wiki {
+//   h1 {
+// border-color: $border-color-theme;
+// }
+// h2 {
+// border-color: $border-color-theme;
+//   }
+// }
 
 /*
  * GROWI comment form
- */
-.comment-form {
-  #slack-mark-white {
-    display: none;
-  }
-}
+//  */
+// .comment-form {
+//   #slack-mark-white {
+//     display: none;
+//   }
+// }
 
-.page-comments-row {
-  background: var(--bgcolor-subnav);
-}
+// .page-comments-row {
+//   background: var(--bgcolor-subnav);
+// }
 
 /*
  * GROWI tags
  */
-.grw-tag-labels {
-  .grw-tag-label {
-    // color: $color-tags;
-    // background-color: $bgcolor-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;
-  }
-}
+// .grw-popular-tag-labels {
+//   .grw-tag-label {
+// color: $color-tags;
+// background-color: $bgcolor-tags;
+//   }
+// }
 
 /*
 * grw-side-contents
 */
-.grw-side-contents-sticky-container {
-  .grw-count-badge {
-    @include count-badge.count-badge($gray-600, $gray-200);
-  }
-
-  .grw-border-vr {
-    // border-color: $border-color-toc;
-  }
-  .revision-toc {
-    // border-color: $border-color-toc;
-  }
-}
+// .grw-side-contents-sticky-container {
+//   .grw-count-badge {
+//     @include count-badge.count-badge(#{$gray-600}, #{$gray-200});
+//   }
+
+//   .grw-border-vr {
+//     border-color: $border-color-toc;
+//   }
+//   .revision-toc {
+//     border-color: $border-color-toc;
+//   }
+// }
 
 /*
  * drawio
  */
-.drawio-viewer {
-  // border-color: $border-color-global;
-}
+// .drawio-viewer {
+//   border-color: $border-color-global;
+// }
 
 /*
  * admin settings
  */
-.admin-setting-header {
-  border-color: $border-color;
-}
+// .admin-setting-header {
+//   border-color: $border-color;
+// }
 
 /*
  * modal
  */
-.grw-modal-head {
-  // border-color: $border-color-global);
-}
+// .grw-modal-head {
+//   border-color: $border-color-global;
+// }
 
 /*
  * skeleton
  */
-.grw-skeleton {
-  background-color: hsl(var(--bgcolor-navbar-h),calc(var(--bgcolor-navbar-s) - 20%),calc(var(--bgcolor-navbar-l) + 10%));
-}
+// .grw-skeleton {
+//   background-color: #{hsl.lighten(var(--bgcolor-navbar),10%)};
+// }