Merge pull request #8572 from weseek/support/142444-customtheme-antarctic

support: New Antarctic theme

packages/preset-themes/src/consts/preset-themes.ts

@@ -4,7 +4,7 @@ const { BOTH, LIGHT, DARK } = GrowiThemeSchemeType;
 
 export const PresetThemes = {
   DEFAULT: 'default',
-  // ANTARCTIC: 'antarctic',
+  ANTARCTIC: 'antarctic',
   BLACKBOARD: 'blackboard',
   // CHRISTMAS: 'christmas',
   FIRE_RED: 'fire-red',
@@ -137,17 +137,17 @@ export const PresetThemesMetadatas: GrowiThemeMetadata[] = [
   //   darkIcon: '#E7A59F',
   //   createBtn: '#B90606',
   // },
-  //  {
-  //   name: PresetThemes.ANTARCTIC,
-  //   schemeType: LIGHT,
-  //   lightBg: '#FAFEFF',
-  //   darkBg: '#E5FAFF',
-  //   lightSidebar: '#EDF4FC',
-  //   darkSidebar: '#DBE9F9',
-  //   lightIcon: '#2631AF',
-  //   darkIcon: '#131857',
-  //   createBtn: '#303DDB',
-  // },
+  {
+    name: PresetThemes.ANTARCTIC,
+    schemeType: LIGHT,
+    lightBg: '#FAFEFF',
+    darkBg: '#E5FAFF',
+    lightSidebar: '#EDF4FC',
+    darkSidebar: '#DBE9F9',
+    lightIcon: '#2631AF',
+    darkIcon: '#131857',
+    createBtn: '#303DDB',
+  },
   {
     name: PresetThemes.SPRING,
     schemeType: LIGHT,

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

@@ -1,170 +1,213 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
-
-@use './variables' as var;
-@use './theme/mixins/page-editor-mode-manager';
-@use './theme/hsl-functions' as hsl;
-
-//== Light Mode
-//
-:root[data-bs-theme='light'] {
-  --primary: hsl(var(--primary-hs),var(--primary-l)) !important;
-  --primary-hs: 240,100%;
-  --primary-l: 25%;
-  --secondary: hsl(var(--secondary-hs),var(--secondary-l)) !important;
-  --secondary-hs: 208,7%;
-  --secondary-l: 46%;
-
-  // Background colors
-  --bgcolor-global: hsl(var(--bgcolor-global-hs),var(--bgcolor-global-l));
-  --bgcolor-global-hs: 208,100%;
-  --bgcolor-global-l: 97%;
-  --bgcolor-inline-code: #{bs.$gray-100}; //optional
-  --bgcolor-card: #{bs.$gray-100};
-  --bgcolor-blinked-section: #{hsl.alpha(var(--primary), 15%)};
-  --bgcolor-keyword-highlighted: #{var.$grw-marker-yellow};
-
-  // Font colors
-  --color-global: hsl(var(--color-global-hs),var(--color-global-l));
-  --color-global-hs: 0,0%;
-  --color-global-l: 0%;
-  --color-reversal: #eeeeee;
-  // --color-header: #2b2b2b;
-  --color-link: #{hsl.lighten(var(--primary), 20%)};
-  --color-link-hs: var(--primary-hs);
-  --color-link-l: calc(var(--primary-l) + 20%);
-  --color-link-hover: #{hsl.lighten(var(--primary), 40%)};
-  --color-link-wiki: #{hsl.lighten(var(--primary), 20%)};
-  --color-link-wiki-hs: var(--primary-hs);
-  --color-link-wiki-l: calc(var(--primary-l) + 20%);
-  --color-link-wiki-hover: l#{hsl.lighten(var(--primary), 40%)};
-  --color-link-nabvar: var(--color-reversal);
-  --color-inline-code: #c7254e; // optional
-
-  // List Group colors
-  // --color-list: var(--color-global);
-  // --bgcolor-list: var(--bgcolor-global);
-  // --color-list-hover: var(--color-reversal);
-  // --bgcolor-list-hover: ;
-  // --color-list-active: var(--color-reversal);
-  // --bgcolor-list-active: var(--primary);
-
-  // Table colors
-  // --color-table: #; // optional
-  --bgcolor-table: var(--bgcolor-global); // optional
-  // --border-color-table: #; // optional
-  // --color-table-hover: #; // optional
-  // --bgcolor-table-hover: #; // optional
-
-  // Navbar
-  --bgcolor-navbar: hsl(var(--bgcolor-navbar-hs),var(--bgcolor-navbar-l));
-  --bgcolor-navbar-hs: 216,9%;
-  --bgcolor-navbar-l: 23%;
-  --bgcolor-search-top-dropdown: hsl(var(--bgcolor-search-top-dropdown-hs),var(--bgcolor-search-top-dropdown-l));
-  --bgcolor-search-top-dropdown-hs: 35,96%;
-  --bgcolor-search-top-dropdown-l: 53%;
-  --border-image-navbar: linear-gradient(to right, #f6d02e 0%, #f87c00 47%, #f6d02e 100%);
-
-  // Logo colors
-  --bgcolor-logo: var(--bgcolor-navbar);
-  --fillcolor-logo-mark: #{lighten(desaturate(bs.$gray-100, 10%), 15%)};
-
-  // Sidebar
-  --bgcolor-sidebar: var(--primary);
-  --bgcolor-sidebar-hs: var(--primary-hs);
-  --bgcolor-sidebar-l: var(--primary-l);
-  --bgcolor-sidebar-nav-item-active: rgba(black, 0.37); // optional
-  --text-shadow-sidebar-nav-item-active: 0px 0px 10px #0099ff; // optional
-
-  // Sidebar resize button
-  --color-resize-button: var(--color-reversal);
-  --bgcolor-resize-button: hsl(var(--bgcolor-resize-button-hs),var(--bgcolor-resize-button-l));
-  --bgcolor-resize-button-hs: 35,96%;
-  --bgcolor-resize-button-l: 53%;
-  --color-resize-button-hover: var(--color-reversal);
-  --bgcolor-resize-button-hover: #{hsl.lighten(var(--bgcolor-resize-button), 5%)};
-
-  // Sidebar contents
-  --color-sidebar-context: var(--primary);
-  --color-sidebar-context-hs: var(--primary-hs);
-  --color-sidebar-context-l: var(--primary-l);
-  --bgcolor-sidebar-context: hsl(var(--bgcolor-sidebar-context-hs),var(--bgcolor-sidebar-context-l));
-  --bgcolor-sidebar-context-hs: 225,57%;
-  --bgcolor-sidebar-context-l: 97%;
-
-  // Sidebar list group
-  --bgcolor-sidebar-list-group: #fafbff; // optional
-
-  // Subnavigation
-  --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%);
-
-  // Icon colors
-  --color-editor-icons: var(--color-global);
-
-  // Border colors
-  --border-color-theme: #{bs.$gray-400};
-  --border-color-global: #{gray-400};
-  --bordercolor-inline-code: #ccc8c8; // optional
-
-  // Dropdown colors
-  --bgcolor-dropdown-link-active: #{var.$growi-blue};
-
-  // admin theme box
-  --color-theme-color-box: #{hsl.lighten(var(--primary), 20%)};
+:root[data-bs-theme] {
+  @import '@growi/core/scss/bootstrap/init-stage-1';
+  @import '@growi/core/scss/bootstrap/theming/variables';
+  @import '@growi/core/scss/bootstrap/theming/utils/color-palette';
 
-  &, body {
-    background-image: url('../images/antarctic/bg.svg');
-    background-attachment: fixed;
-    background-position: 50%;
-    background-size: cover;
-  }
+  $primary: #303DDB;
+  $highlight: #A6C8F0;
 
-  //Button
-  .btn-group.grw-page-editor-mode-manager {
-    .btn.btn-outline-primary {
-      @include page-editor-mode-manager.btn-page-editor-mode-manager(#{hsl.darken(var(--primary), 10%)}, #{hsl.lighten(var(--primary), 55%)}, #{hsl.lighten(var(--primary), 60%)});
-    }
-  }
+  @include generate-color-palette('primary', $primary, black, white);
+  @include generate-color-palette('highlight', $highlight, black, white);
 
-  .table {
-    background-color:  var(--bgcolor-global);
-  }
+  $body-color:                mix(#A6C8F0, black, 60%);
+  $body-bg:                   #FAFEFF;
 
-  #search-typeahead-asynctypeahead {
-    background-color: var(--bgcolor-global);
-    .table {
-      background-color: transparent;
-    }
-  }
+  $body-secondary-color:      rgba($body-color, .75);
+  $body-secondary-bg:         $gray-200;
 
-  .growi:not(.login-page) {
-    // add background-image
-    .page-editor-preview-container {
-      background-image: url('/images/themes/antarctic/bg.svg');
-      background-attachment: fixed;
-      background-position: center center;
-      background-size: cover;
-    }
-  }
+  $body-tertiary-color:       rgba($body-color, .5);
+  $body-tertiary-bg:          $gray-100;
 
-  .nologin {
-    .page-wrapper {
-      background-image: url('../images/antarctic/topimage.svg');
-      background-attachment: fixed;
-      background-position: center center;
-      background-size: cover;
-
-      .nologin-dialog .link-switch {
-        color: rgba(black, 0.5);
-      }
-      .grw-external-auth-form {
-        border-color: #aaa;
-      }
-    }
-  }
+  $border-color:              $gray-300;
 
-  .grw-navbar {
-    border-bottom: #ffd700 4px solid;
+  $link-color:                $gray-800;
+
+  @import 'bootstrap/scss/variables';
+  @import 'bootstrap/scss/variables-dark';
+
+  @import '@growi/core/scss/bootstrap/init-stage-2';
+
+  @import '@growi/core/scss/bootstrap/theming/apply-light';
+
+  --grw-wiki-link-color-rgb: var(--grw-primary-400-rgb);
+  --grw-wiki-link-hover-color-rgb: var(--grw-primary-600-rgb);
+  --grw-sidebar-nav-btn-color: var(--grw-highlight-600);
+
+  &, body {
+    background-image: url('../images/antarctic/antarctic.svg');
+    background-attachment: fixed;
+    background-position: bottom;
+    background-size: cover;
   }
 }
+
+// @use '@growi/core/scss/bootstrap/init' as bs;
+
+// @use './variables' as var;
+// @use './theme/mixins/page-editor-mode-manager';
+// @use './theme/hsl-functions' as hsl;
+
+// //== Light Mode
+// //
+// :root[data-bs-theme='light'] {
+//   --primary: hsl(var(--primary-hs),var(--primary-l)) !important;
+//   --primary-hs: 240,100%;
+//   --primary-l: 25%;
+//   --secondary: hsl(var(--secondary-hs),var(--secondary-l)) !important;
+//   --secondary-hs: 208,7%;
+//   --secondary-l: 46%;
+
+//   // Background colors
+//   --bgcolor-global: hsl(var(--bgcolor-global-hs),var(--bgcolor-global-l));
+//   --bgcolor-global-hs: 208,100%;
+//   --bgcolor-global-l: 97%;
+//   --bgcolor-inline-code: #{bs.$gray-100}; //optional
+//   --bgcolor-card: #{bs.$gray-100};
+//   --bgcolor-blinked-section: #{hsl.alpha(var(--primary), 15%)};
+//   --bgcolor-keyword-highlighted: #{var.$grw-marker-yellow};
+
+//   // Font colors
+//   --color-global: hsl(var(--color-global-hs),var(--color-global-l));
+//   --color-global-hs: 0,0%;
+//   --color-global-l: 0%;
+//   --color-reversal: #eeeeee;
+//   // --color-header: #2b2b2b;
+//   --color-link: #{hsl.lighten(var(--primary), 20%)};
+//   --color-link-hs: var(--primary-hs);
+//   --color-link-l: calc(var(--primary-l) + 20%);
+//   --color-link-hover: #{hsl.lighten(var(--primary), 40%)};
+//   --color-link-wiki: #{hsl.lighten(var(--primary), 20%)};
+//   --color-link-wiki-hs: var(--primary-hs);
+//   --color-link-wiki-l: calc(var(--primary-l) + 20%);
+//   --color-link-wiki-hover: l#{hsl.lighten(var(--primary), 40%)};
+//   --color-link-nabvar: var(--color-reversal);
+//   --color-inline-code: #c7254e; // optional
+
+//   // List Group colors
+//   // --color-list: var(--color-global);
+//   // --bgcolor-list: var(--bgcolor-global);
+//   // --color-list-hover: var(--color-reversal);
+//   // --bgcolor-list-hover: ;
+//   // --color-list-active: var(--color-reversal);
+//   // --bgcolor-list-active: var(--primary);
+
+//   // Table colors
+//   // --color-table: #; // optional
+//   --bgcolor-table: var(--bgcolor-global); // optional
+//   // --border-color-table: #; // optional
+//   // --color-table-hover: #; // optional
+//   // --bgcolor-table-hover: #; // optional
+
+//   // Navbar
+//   --bgcolor-navbar: hsl(var(--bgcolor-navbar-hs),var(--bgcolor-navbar-l));
+//   --bgcolor-navbar-hs: 216,9%;
+//   --bgcolor-navbar-l: 23%;
+//   --bgcolor-search-top-dropdown: hsl(var(--bgcolor-search-top-dropdown-hs),var(--bgcolor-search-top-dropdown-l));
+//   --bgcolor-search-top-dropdown-hs: 35,96%;
+//   --bgcolor-search-top-dropdown-l: 53%;
+//   --border-image-navbar: linear-gradient(to right, #f6d02e 0%, #f87c00 47%, #f6d02e 100%);
+
+//   // Logo colors
+//   --bgcolor-logo: var(--bgcolor-navbar);
+//   --fillcolor-logo-mark: #{lighten(desaturate(bs.$gray-100, 10%), 15%)};
+
+//   // Sidebar
+//   --bgcolor-sidebar: var(--primary);
+//   --bgcolor-sidebar-hs: var(--primary-hs);
+//   --bgcolor-sidebar-l: var(--primary-l);
+//   --bgcolor-sidebar-nav-item-active: rgba(black, 0.37); // optional
+//   --text-shadow-sidebar-nav-item-active: 0px 0px 10px #0099ff; // optional
+
+//   // Sidebar resize button
+//   --color-resize-button: var(--color-reversal);
+//   --bgcolor-resize-button: hsl(var(--bgcolor-resize-button-hs),var(--bgcolor-resize-button-l));
+//   --bgcolor-resize-button-hs: 35,96%;
+//   --bgcolor-resize-button-l: 53%;
+//   --color-resize-button-hover: var(--color-reversal);
+//   --bgcolor-resize-button-hover: #{hsl.lighten(var(--bgcolor-resize-button), 5%)};
+
+//   // Sidebar contents
+//   --color-sidebar-context: var(--primary);
+//   --color-sidebar-context-hs: var(--primary-hs);
+//   --color-sidebar-context-l: var(--primary-l);
+//   --bgcolor-sidebar-context: hsl(var(--bgcolor-sidebar-context-hs),var(--bgcolor-sidebar-context-l));
+//   --bgcolor-sidebar-context-hs: 225,57%;
+//   --bgcolor-sidebar-context-l: 97%;
+
+//   // Sidebar list group
+//   --bgcolor-sidebar-list-group: #fafbff; // optional
+
+//   // Subnavigation
+//   --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%);
+
+//   // Icon colors
+//   --color-editor-icons: var(--color-global);
+
+//   // Border colors
+//   --border-color-theme: #{bs.$gray-400};
+//   --border-color-global: #{gray-400};
+//   --bordercolor-inline-code: #ccc8c8; // optional
+
+//   // Dropdown colors
+//   --bgcolor-dropdown-link-active: #{var.$growi-blue};
+
+//   // admin theme box
+//   --color-theme-color-box: #{hsl.lighten(var(--primary), 20%)};
+
+//   &, body {
+//     background-image: url('../images/antarctic/bg.svg');
+//     background-attachment: fixed;
+//     background-position: 50%;
+//     background-size: cover;
+//   }
+
+//   //Button
+//   .btn-group.grw-page-editor-mode-manager {
+//     .btn.btn-outline-primary {
+//       @include page-editor-mode-manager.btn-page-editor-mode-manager(#{hsl.darken(var(--primary), 10%)}, #{hsl.lighten(var(--primary), 55%)}, #{hsl.lighten(var(--primary), 60%)});
+//     }
+//   }
+
+//   .table {
+//     background-color:  var(--bgcolor-global);
+//   }
+
+//   #search-typeahead-asynctypeahead {
+//     background-color: var(--bgcolor-global);
+//     .table {
+//       background-color: transparent;
+//     }
+//   }
+
+//   .growi:not(.login-page) {
+//     // add background-image
+//     .page-editor-preview-container {
+//       background-image: url('/images/themes/antarctic/bg.svg');
+//       background-attachment: fixed;
+//       background-position: center center;
+//       background-size: cover;
+//     }
+//   }
+
+//   .nologin {
+//     .page-wrapper {
+//       background-image: url('../images/antarctic/topimage.svg');
+//       background-attachment: fixed;
+//       background-position: center center;
+//       background-size: cover;
+
+//       .nologin-dialog .link-switch {
+//         color: rgba(black, 0.5);
+//       }
+//       .grw-external-auth-form {
+//         border-color: #aaa;
+//       }
+//     }
+//   }
+
+//   .grw-navbar {
+//     border-bottom: #ffd700 4px solid;
+//   }
+// }

packages/preset-themes/vite.themes.config.ts

@@ -10,7 +10,7 @@ export default defineConfig(({ mode }) => {
       manifest: true,
       rollupOptions: {
         input: [
-          // '/src/styles/antarctic.scss',
+          '/src/styles/antarctic.scss',
           '/src/styles/blackboard.scss',
           // '/src/styles/christmas.scss',
           '/src/styles/default.scss',