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

@use './variables' as *;
@use './bootstrap/variables' as *;
@use './theme/mixins/page-editor-mode-manager';
@use './theme/hsl-functions' as hsl;

// == Define Bootstrap theme colors
//

// colors for overriding bootstrap $theme-colors
// --secondary: #;
// --info: #;
// --success: #;
// --warning: #;
// --danger: #;
// --light: #;
// --dark: #;

//== Light Mode
//
:root[data-theme='light'] {
  --primary: hsl(var(--primary-hs),var(--primary-l));
  --primary-hs: 216.7,65%;
  --primary-l: 20.2%;
  --secondary: hsl(var(--secondary-hs),var(--secondary-l));
  --secondary-hs: 208,7%;
  --secondary-l: 46%;
  --accent: hsl(var(--accent-hs),var(--accent-l));
  --accent-hs: 198.6,74.2%;
  --accent-l: 48.6%;

  // Background colors
  --bgcolor-global: hsl(var(--bgcolor-global-hs),var(--bgcolor-global-l));
  --bgcolor-global-hs: 0,0%;
  --bgcolor-global-l: 100%;
  --bgcolor-inline-code: #{$gray-100}; //optional
  --bgcolor-card: #{$gray-50};
  --bgcolor-blinked-section: #{hsl.alpha(var(--primary),90%)};
  // --bgcolor-keyword-highlighted: #{$grw-marker-yellow};

  // Font colors
  --color-global: hsl(var(--color-global-hs),var(--color-global-l));
  --color-global-hs: 214.1,60%;
  --color-global-l: 16.7%;
  --color-reversal: var(--light);
  // --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%;
  --color-link-hover: #{hsl.lighten(var(--color-link),20%)};
  --color-link-wiki: var(--color-link);
  --color-link-wiki-hs: var(--color-link-hs);
  --color-link-wiki-l: var(--color-link-l);
  --color-link-wiki-hover: #{hsl.lighten(var(--color-link-wiki),20%)};
  --color-link-nabvar: #{$gray-500};
  --color-inline-code: #{darken($red, 15%)}; // optional


  // List Group colors
  --color-list: var(--color-global); // optional
  --bgcolor-list: var(--bgcolor-global); // optional
  // --color-list-hover: var(--color-global); // optional
  --bgcolor-list-hover: #{hsl.lighten(var(--bgcolor-global),3%)};// optional
  // --color-list-active: white ; // optional
  --bgcolor-list-active: #{hsl.lighten(var(--bgcolor-global),3%)}; // optional
  // --color-page-list-group-item-meta: #{$gray-500}; // optional

  // Table colors
  // --color-table: #; // optional
  // --bgcolor-table: #; // optional
  // --border-color-table: #; // optional
  // --color-table-hover: #; // optional
  // --bgcolor-table-hover: #; // optional

  // Navbar
  --bgcolor-navbar: #{$gray-900};
  --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);
  --border-image-navbar: linear-gradient(to right, #36c9ff 0%, #36c9ff 33%, #7926ff 66%, #ff2eff 100%);

  // Logo colors
  --bgcolor-logo: var(--bgcolor-navbar);
  --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-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: var(--accent);
  --bgcolor-resize-button-hs: var(--accent-hs);
  --bgcolor-resize-button-l: var(--accent-l);
  --color-resize-button-hover: var(--color-reversal);
  --bgcolor-resize-button-hover: #{hsl.lighten(var(--bgcolor-resize-button), 5%)};

  // Sidebar contents
  --color-sidebar-context: var(--color-global);
  --color-sidebar-context-hs: var(--color-global-hs);
  --color-sidebar-context-l: var(--color-global-l);
  --bgcolor-sidebar-context: #{hsl.lighten(var(--primary),77%)};
  --bgcolor-sidebar-context-hs: var(--primary-hs);
  --bgcolor-sidebar-context-l: calc(var(--primary-l) + 77%);

  // Sidebar list group
  --bgcolor-sidebar-list-group: #{$gray-50}; // 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%);

  // 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

  // Icon colors
  --color-editor-icons: var(--color-global);

  // Border colors
  --border-color-theme: #{$gray-400};
  --bordercolor-inline-code: #{$gray-400}; // optional

  // Dropdown colors
  --bgcolor-dropdown-link-active: #{$growi-blue};

  // admin theme box
  --color-theme-color-box: #{hsl.lighten(var(--primary), 20%)};

  // Button
  .btn-group.grw-page-editor-mode-manager {
    .btn.btn-outline-primary {
      @include page-editor-mode-manager.btn-page-editor-mode-manager (var(--primary),#{hsl.lighten(var(--primary),65%)}, #{hsl.lighten(var(--primary),70%)});
    }
  }
}

//== Dark Mode
//
:root[data-theme='dark'] {
  --primary: hsl(var(--primary-hs),var(--primary-l));
  --primary-hs: 216.8,85.1%;
  --primary-l: 44.7%;
  --secondary: hsl(var(--secondary-hs),var(--secondary-l));
  --secondary-hs: 208,7%;
  --secondary-l: 46%;
  --accent: hsl(var(--accent-hs),var(--accent-l));
  --accent-hs: 307,100%;
  --accent-l: 43%;

  // Background colors
  --bgcolor-global: hsl(var(--bgcolor-global-hs),var(--bgcolor-global-l));
  --bgcolor-global-hs: 228,12%;
  --bgcolor-global-l: 8%;
  --bgcolor-inline-code: #1f1f22; //optional
  --bgcolor-card: #{hsl.darken(var(--bgcolor-global),5%)};
  --bgcolor-blinked-section: #{hsl.alpha(var(--primary), 60%)};
  --bgcolor-keyword-highlighted: #{darken($grw-marker-red, 30%)};

  // Font colors
  --color-global: hsl(var(--color-global-hs),var(--color-global-l));
  --color-global-hs: 0,0%;
  --color-global-l: 74%;
  --color-reversal: #{$gray-900};
  // --color-header: desaturate($primary, 20%);
  --color-link: hsl(var(--color-link-hs),var(--color-link-l));
  --color-link-hs: 219.3,51.7%;
  --color-link-l: 65.9%;
  --color-link-hover: #{hsl.lighten(var(--color-link),10%)};
  --color-link-wiki: var(--color-link);
  --color-link-wiki-hs: var(--color-link-hs);
  --color-link-wiki-l: var(--color-link-l);
  --color-link-wiki-hover: #{hsl.lighten(var(--color-link-wiki),10%)};
  --color-link-nabvar: #a7a7a7;
  --color-inline-code: #c7254e; // optional

  // List Group colors
  --color-list: var(--color-global); // optional
  --bgcolor-list: var(--bgcolor-global); // optional
  // --color-list-hover: var(--color-global); // optional
  --bgcolor-list-hover: #{hsl.lighten(var(--bgcolor-global),3%)}; // optional
  // --color-list-active: white ; // optional
  --bgcolor-list-active: var(--primary); // optional

  // Table colors
  // --color-table: #; // optional
  // --bgcolor-table: #; // optional
  // --border-color-table: #; // optional
  // --color-table-hover: #; // optional
  // --bgcolor-table-hover: #; // optional

  // Navbar
  --bgcolor-navbar: #2a2929;
  --bgcolor-search-top-dropdown: var(--accent);
  --bgcolor-search-top-dropdown-hs: var(--accent-hs);
  --bgcolor-search-top-dropdown-l: var(--accent-l);
  --border-image-navbar: linear-gradient(to right, #44bfe3 0%, #b04aff 50%, #ff1794 100%);

  // Logo colors
  --bgcolor-logo: var(--bgcolor-navbar);
  --fillcolor-logo-mark: #{$gray-700};

  // Sidebar
  --bgcolor-sidebar: hsl(var(--bgcolor-sidebar-hs),var(--bgcolor-sidebar-l));
  --bgcolor-sidebar-hs: 216.7,65%;
  --bgcolor-sidebar-l: 20.2%;
  --bgcolor-sidebar-nav-item-active: rgba(#969494, 0.3); // optional
  --text-shadow-sidebar-nav-item-active: 0px 0px 10px #0099ff; // optional
  --bgcolor-sidebar-context: hsl(var(--bgcolor-sidebar-context-hs),var(--bgcolor-sidebar-context-l));
  --bgcolor-sidebar-context-hs: 228,12%;
  --bgcolor-sidebar-context-l: 16%;
  // Sidebar resize button
  --color-resize-button: white;
  --bgcolor-resize-button: var(--accent);
  --color-resize-button-hover: white;
  --bgcolor-resize-button-hover: #{hsl.darken(var(--accent), 5%)};
  // Sidebar contents
  --color-sidebar-context: var(--color-global);
  --color-sidebar-context-hs: var(--color-global-hs);
  --color-sidebar-context-l: var(--color-global-l);
  // Sidebar list group
  --bgcolor-sidebar-list-group: #1c2a3e; // 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) + 4%);

  // Tabs
  --bordercolor-nav-tabs: #{$gray-700}; // optional
  // --color-nav-tabs-link-active: #; //optional
  --bordercolor-nav-tabs-hover: #666 #666 var(--bordercolor-nav-tabs); // optional
  --bordercolor-nav-tabs-active: var(--bordercolor-nav-tabs) var(--bordercolor-nav-tabs) var(--bgcolor-global); // optional

  // Tags
  // --color-tags: #; //optional
  // --bgcolor-tags: #; //optional

  // Icon colors
  --color-editor-icons: var(--color-global);

  // Border colors
  --border-color-theme: hsl(var(--border-color-theme-hs),var(--border-color-theme-l));
  --border-color-theme-hs: 210,13%;
  --border-color-theme-l: 71%;
  --bordercolor-inline-code: var(--secondary); // optional

  // admin theme box
  --color-theme-color-box: var(--primary);

  //Button
  .btn-group.grw-page-editor-mode-manager {
    .btn.btn-outline-primary {
      @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%)});
    }
  }
}