Главная Обзор Помощь
Вход
wiki
/
weseek__growi
зеркало из https://github.com/weseek/growi
2
0
Ответвить 0
Файлы Задачи 0 Вики
Просмотр исходного кода

build halloween theme within preset-themes

Yuki Takei 3 лет назад
Родитель
1a27e95d83
Сommit
018105d2c2
32 измененных файлов с 2844 добавлено и 52 удалено
Разделённый вид Показать статистику Diff
  1. 0 32
      packages/app/src/components/Theme/ThemeHalloween.tsx
  2. 0 1
      packages/preset-themes/client-entry.tsx
  3. 0 6
      packages/preset-themes/index.html
  4. 162 0
      packages/preset-themes/src/_mixins.scss
  5. 40 0
      packages/preset-themes/src/_variables.scss
  6. 60 0
      packages/preset-themes/src/atoms/mixins/_buttons.scss
  7. 5 0
      packages/preset-themes/src/atoms/mixins/_code.scss
  8. 40 0
      packages/preset-themes/src/bootstrap/_apply.scss
  9. 9 0
      packages/preset-themes/src/bootstrap/_init.scss
  10. 174 0
      packages/preset-themes/src/bootstrap/_override.scss
  11. 163 0
      packages/preset-themes/src/bootstrap/_variables.scss
  12. 6 8
      packages/preset-themes/src/halloween.scss
  13. 1 0
      packages/preset-themes/src/halloween.tsx
  14. 0 3
      packages/preset-themes/src/styles/style.scss
  15. 538 0
      packages/preset-themes/src/theme/_apply-colors-dark.scss
  16. 430 0
      packages/preset-themes/src/theme/_apply-colors-light.scss
  17. 697 0
      packages/preset-themes/src/theme/_apply-colors.scss
  18. 29 0
      packages/preset-themes/src/theme/_reboot-bootstrap-border-colors.scss
  19. 21 0
      packages/preset-themes/src/theme/_reboot-bootstrap-buttons.scss
  20. 60 0
      packages/preset-themes/src/theme/_reboot-bootstrap-colors.scss
  21. 37 0
      packages/preset-themes/src/theme/_reboot-bootstrap-dropdown.scss
  22. 51 0
      packages/preset-themes/src/theme/_reboot-bootstrap-nav.scss
  23. 74 0
      packages/preset-themes/src/theme/_reboot-bootstrap-tables.scss
  24. 3 0
      packages/preset-themes/src/theme/_reboot-bootstrap-text.scss
  25. 92 0
      packages/preset-themes/src/theme/_reboot-bootstrap-theme-colors.scss
  26. 15 0
      packages/preset-themes/src/theme/_reboot-toastr-colors.scss
  27. 9 0
      packages/preset-themes/src/theme/mixins/_count-badge.scss
  28. 70 0
      packages/preset-themes/src/theme/mixins/_list-group.scss
  29. 22 0
      packages/preset-themes/src/theme/mixins/_page-editor-mode-manager.scss
  30. 34 0
      packages/preset-themes/src/theme/mixins/_tables.scss
  31. 1 1
      packages/preset-themes/tsconfig.json
  32. 1 1
      packages/preset-themes/vite.config.ts

+ 0 - 32
packages/app/src/components/Theme/ThemeHalloween.tsx
Просмотреть файл 

@@ -1,32 +0,0 @@
 
-import Image from 'next/image';
 
-
 
-import { Themes } from '~/stores/use-next-themes';
 
-
 
-import { ThemeInjector } from './utils/ThemeInjector';
 
-
 
-// import styles from './ThemeHalloween.module.scss';
 
-
 
-export const getBackgroundImageSrc = (colorScheme: Themes): string => {
 
-  switch (colorScheme) {
 
-    default:
 
-      return '/images/themes/halloween/halloween.jpg';
 
-  }
 
-};
 
-
 
-type Props = {
 
-  children: JSX.Element,
 
-  colorScheme?: Themes,
 
-}
 
-
 
-const ThemeHalloween = ({ children, colorScheme }: Props): JSX.Element => {
 
-  const bgImageNode = (
 
-    <>
 
-      {colorScheme != null && (
 
-        <Image alt='background image' src={getBackgroundImageSrc(colorScheme)} layout='fill' quality="100" />
 
-      )}
 
-    </>
 
-  );
 
-  return <ThemeInjector className="theme-halloween" bgImageNode={bgImageNode}>{children}</ThemeInjector>;
 
-};
 
-
 
-export default ThemeHalloween;

+ 0 - 1
packages/preset-themes/client-entry.tsx
Просмотреть файл 

@@ -1 +0,0 @@
 
-import './src/styles/style.scss';

+ 0 - 6
packages/preset-themes/index.html
Просмотреть файл 

@@ -1,6 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-  <body>
 
-    <script type="module" src="/client-entry.tsx"></script>
 
-  </body>
 
-</html>

+ 162 - 0
packages/preset-themes/src/_mixins.scss
Просмотреть файл 

@@ -0,0 +1,162 @@
 
+@use './bootstrap/init' as bs;
 
+
 
+@mixin variable-font-size($basesize) {
 
+  font-size: $basesize * 0.6;
 
+
 
+  @include bs.media-breakpoint-only(sm) {
 
+    font-size: #{$basesize * 0.7};
 
+  }
 
+  @include bs.media-breakpoint-only(md) {
 
+    font-size: #{$basesize * 0.8};
 
+  }
 
+  @include bs.media-breakpoint-only(lg) {
 
+    font-size: #{$basesize * 0.9};
 
+  }
 
+  @include bs.media-breakpoint-up(xl) {
 
+    font-size: $basesize;
 
+  }
 
+}
 
+
 
+@mixin expand-editor($editor-margin-top) {
 
+  $header-plus-footer: $editor-margin-top + $grw-editor-navbar-bottom-height;
 
+
 
+  $editor-margin: $header-plus-footer //
 
+    + 25px //   add .btn-open-dropzone height
 
+    + 30px; //  add .navbar-editor height
 
+
 
+  .main {
 
+    width: 100%;
 
+    height: calc(100vh - #{$editor-margin-top});
 
+    margin-top: 0px !important;
 
+
 
+    .grw-container-convertible {
 
+      max-width: unset;
 
+      padding: 0;
 
+      margin: 0;
 
+    }
 
+
 
+    &,
 
+    .content-main,
 
+    .tab-content {
 
+      display: flex;
 
+      flex: 1;
 
+      flex-direction: column;
 
+
 
+      .tab-pane {
 
+        height: calc(100vh - #{$header-plus-footer});
 
+        min-height: calc(100vh - #{$header-plus-footer}); // for IE11
 
+      }
 
+
 
+      #page-editor {
 
+        // right(preview)
 
+        &,
 
+        & > .row,
 
+        .page-editor-preview-container,
 
+        .page-editor-preview-body {
 
+          height: calc(100vh - #{$header-plus-footer});
 
+          min-height: calc(100vh - #{$header-plus-footer}); // for IE11
 
+        }
 
+
 
+        // left(editor)
 
+        .page-editor-editor-container {
 
+          height: calc(100vh - #{$header-plus-footer});
 
+          min-height: calc(100vh - #{$header-plus-footer}); // for IE11
 
+
 
+          .react-codemirror2,
 
+          .CodeMirror,
 
+          .CodeMirror-scroll,
 
+          .textarea-editor {
 
+            height: calc(100vh - #{$editor-margin});
 
+          }
 
+        }
 
+      }
 
+
 
+      #page-editor-with-hackmd {
 
+        &,
 
+        .hackmd-preinit,
 
+        .hackmd-error,
 
+        #iframe-hackmd-container > iframe {
 
+          width: 100%;
 
+          height: calc(100vh - #{$header-plus-footer});
 
+          min-height: calc(100vh - #{$header-plus-footer}); // for IE11
 
+        }
 
+      }
 
+    }
 
+  }
 
+}
 
+
 
+@mixin apply-navigation-transition() {
 
+  transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
 
+  transition-duration: 300ms;
 
+}
 
+
 
+@mixin border-vertical($beforeOrAfter, $borderLength, $zIndex: initial, $isBtnGroup: false) {
 
+  position: relative;
 
+  @if $isBtnGroup {
 
+    &:not(:first-child) {
 
+      margin-left: 0;
 
+      border-left: none;
 
+    }
 
+    &:not(:last-child) {
 
+      border-right: none;
 
+    }
 
+  }
 
+  &:not(:first-child) {
 
+    &::#{$beforeOrAfter} {
 
+      position: absolute;
 
+      top: calc((100% - #{$borderLength}) / 2);
 
+      left: 0;
 
+      z-index: $zIndex;
 
+      width: 100%;
 
+      height: $borderLength;
 
+      margin-left: -0.5px;
 
+      content: '';
 
+      border-left: 1px solid transparent;
 
+      transition: border-color 0.15s ease-in-out;
 
+    }
 
+  }
 
+}
 
+
 
+@keyframes fadeout {
 
+  100% {
 
+    opacity: 0;
 
+  }
 
+}
 
+
 
+@mixin blink-bgcolor($bgcolor) {
 
+  position: relative;
 
+  z-index: 1;
 
+
 
+  &::after {
 
+    position: absolute;
 
+    top: 15%;
 
+    left: 0;
 
+    z-index: -1;
 
+    width: 100%;
 
+    height: 70%;
 
+    content: '';
 
+    background-color: $bgcolor;
 
+    border-radius: 2px;
 
+    animation: fadeout 1s ease-in 1.5s forwards;
 
+  }
 
+}
 
+
 
+@mixin overlay-processing-style($additionalSelector, $contentFontSize: inherit, $contentPadding: inherit) {
 
+  .overlay.#{$additionalSelector} {
 
+    background: rgba(255, 255, 255, 0.5);
 
+    .overlay-content {
 
+      padding: $contentPadding;
 
+      font-size: $contentFontSize;
 
+      color: bs.$gray-700;
 
+      background: rgba(200, 200, 200, 0.5);
 
+    }
 
+  }
 
+}
 
+
 
+@mixin insertSimpleLineIcons($code) {
 
+  &:before {
 
+    margin-right: 0.2em;
 
+    font-family: 'simple-line-icons';
 
+    content: $code;
 
+  }
 
+}

+ 40 - 0
packages/preset-themes/src/_variables.scss
Просмотреть файл 

@@ -0,0 +1,40 @@
 
+//== GROWI Official Color
 
+$growi-green: #74bc46;
 
+$growi-blue: #175fa5;
 
+
 
+//== Marker Color
 
+$grw-marker-yellow: #ff6;
 
+$grw-marker-red: #f6c;
 
+$grw-marker-blue: #6cf;
 
+$grw-marker-cyan: #6ff;
 
+$grw-marker-green: #6f6;
 
+
 
+$font-family-monospace-not-strictly: Monaco, Menlo, Consolas, 'Courier New', MeiryoKe_Gothic, monospace;
 
+
 
+//== Layout
 
+$grw-navbar-height: 52px;
 
+$grw-navbar-border-width: 3.3333px;
 
+// slightly larger than $zindex-sticky
 
+// https://getbootstrap.jp/docs/4.6/layout/overview/#z-index
 
+$grw-navbar-z-index: 1025;
 
+
 
+$grw-subnav-min-height: 95px;
 
+$grw-subnav-min-height-md: 115px;
 
+$grw-subnav-height-on-edit: 95px;
 
+$grw-subnav-height-lg-on-edit: 50px;
 
+
 
+$grw-subnav-search-preview-min-height: 90px;
 
+
 
+$grw-navbar-bottom-height: 48px;
 
+$grw-editor-navbar-bottom-height: 48px;
 
+
 
+$grw-sidebar-nav-width: 64px; // !!DO NOT CHANGE!! 'margin-left' for '.css-teprsg' is hardcoded
 
+
 
+$grw-logo-width: $grw-sidebar-nav-width;
 
+$grw-logomark-width: 36px;
 
+
 
+// fix tab width to 95 pixels
 
+// see also '_editor.scss'
 
+$grw-nav-main-left-tab-width: 95px;
 
+$grw-nav-main-left-tab-width-mobile: 50px;
 
+$grw-nav-main-tab-height: 42px;

+ 60 - 0
packages/preset-themes/src/atoms/mixins/_buttons.scss
Просмотреть файл 

@@ -0,0 +1,60 @@
 
+@use '../../bootstrap/init' as bs;
 
+
 
+@mixin button-svg-icon-variant($background, $hover-background: darken($background, 7.5%), $active-background: darken($background, 10%)) {
 
+  svg {
 
+    fill: color-yiq($background);
 
+  }
 
+
 
+  @include bs.hover() {
 
+    svg {
 
+      fill: color-yiq($hover-background);
 
+    }
 
+  }
 
+
 
+  &:focus,
 
+  &.focus {
 
+    svg {
 
+      fill: color-yiq($hover-background);
 
+    }
 
+  }
 
+
 
+  // Disabled comes first so active can properly restyle
 
+  &.disabled,
 
+  &:disabled {
 
+    svg {
 
+      fill: color-yiq($background);
 
+    }
 
+  }
 
+
 
+  &:not(:disabled):not(.disabled):active,
 
+  &:not(:disabled):not(.disabled).active,
 
+  .show > &.dropdown-toggle {
 
+    svg {
 
+      fill: color-yiq($active-background);
 
+    }
 
+  }
 
+}
 
+
 
+@mixin button-outline-svg-icon-variant($value, $color-hover: $value) {
 
+  svg {
 
+    fill: $value;
 
+  }
 
+  @include bs.hover() {
 
+    svg {
 
+      fill: $color-hover;
 
+    }
 
+  }
 
+  &.disabled,
 
+  &:disabled {
 
+    svg {
 
+      fill: $value;
 
+    }
 
+  }
 
+  &:not(:disabled):not(.disabled):active,
 
+  &:not(:disabled):not(.disabled).active,
 
+  .show > &.dropdown-toggle {
 
+    svg {
 
+      fill: $color-hover;
 
+    }
 
+  }
 
+}

+ 5 - 0
packages/preset-themes/src/atoms/mixins/_code.scss
Просмотреть файл 

@@ -0,0 +1,5 @@
 
+@mixin code-inline-color($color-inline-code,$bgcolor-inline-code, $bordercolor-inline-code) {
 
+  color: $color-inline-code;
 
+  background-color: $bgcolor-inline-code;
 
+  border-color: $bordercolor-inline-code;
 
+}

+ 40 - 0
packages/preset-themes/src/bootstrap/_apply.scss
Просмотреть файл 

@@ -0,0 +1,40 @@
 
+@use 'init' as *;
 
+
 
+// apply bootstrap
 
+@import 'bootstrap/scss/root';
 
+@import 'bootstrap/scss/reboot';
 
+@import 'bootstrap/scss/type';
 
+@import 'bootstrap/scss/images';
 
+@import 'bootstrap/scss/code';
 
+@import 'bootstrap/scss/grid';
 
+@import 'bootstrap/scss/tables';
 
+@import 'bootstrap/scss/forms';
 
+@import 'bootstrap/scss/buttons';
 
+@import 'bootstrap/scss/transitions';
 
+@import 'bootstrap/scss/dropdown';
 
+@import 'bootstrap/scss/button-group';
 
+@import 'bootstrap/scss/input-group';
 
+@import 'bootstrap/scss/custom-forms';
 
+@import 'bootstrap/scss/nav';
 
+@import 'bootstrap/scss/navbar';
 
+@import 'bootstrap/scss/card';
 
+@import 'bootstrap/scss/breadcrumb';
 
+@import 'bootstrap/scss/pagination';
 
+@import 'bootstrap/scss/badge';
 
+@import 'bootstrap/scss/jumbotron';
 
+@import 'bootstrap/scss/alert';
 
+@import 'bootstrap/scss/progress';
 
+@import 'bootstrap/scss/media';
 
+@import 'bootstrap/scss/list-group';
 
+@import 'bootstrap/scss/close';
 
+@import 'bootstrap/scss/toasts';
 
+@import 'bootstrap/scss/modal';
 
+@import 'bootstrap/scss/tooltip';
 
+@import 'bootstrap/scss/popover';
 
+@import 'bootstrap/scss/carousel';
 
+@import 'bootstrap/scss/spinners';
 
+@import 'bootstrap/scss/utilities';
 
+@import 'bootstrap/scss/print';
 
+
 
+// override
 
+@import './override';

+ 9 - 0
packages/preset-themes/src/bootstrap/_init.scss
Просмотреть файл 

@@ -0,0 +1,9 @@
 
+@import './variables';
 
+
 
+@import 'bootstrap/scss/functions';
 
+@import 'bootstrap/scss/variables';
 
+
 
+// merge $colors to $theme-colors
 
+$theme-colors: map-merge($theme-colors, $colors);
 
+
 
+@import 'bootstrap/scss/mixins';

+ 174 - 0
packages/preset-themes/src/bootstrap/_override.scss
Просмотреть файл 

@@ -0,0 +1,174 @@
 
+* {
 
+  outline: none !important;
 
+}
 
+
 
+.container,
 
+.container-sm,
 
+.container-md,
 
+.container-lg,
 
+.container-xl,
 
+.container-fluid {
 
+  @include media-breakpoint-down(xs) {
 
+    padding-right: 10px;
 
+    padding-left: 10px;
 
+  }
 
+  @include media-breakpoint-up(md) {
 
+    padding-right: 30px;
 
+    padding-left: 30px;
 
+  }
 
+}
 
+
 
+h1 {
 
+  font-size: 36px;
 
+  line-height: 48px;
 
+}
 
+
 
+h2 {
 
+  font-size: 24px;
 
+  line-height: 36px;
 
+}
 
+
 
+h3 {
 
+  font-size: 21px;
 
+  line-height: 30px;
 
+}
 
+
 
+h4 {
 
+  font-size: 18px;
 
+  line-height: 22px;
 
+}
 
+
 
+h5 {
 
+  font-size: 16px;
 
+  line-height: 18px;
 
+}
 
+
 
+h6 {
 
+  font-size: 12px;
 
+  line-height: 14px;
 
+}
 
+
 
+// Navs
 
+.nav-tabs {
 
+  .nav-item {
 
+    margin-right: 0.15rem;
 
+    a.active {
 
+      cursor: default;
 
+    }
 
+  }
 
+}
 
+
 
+// Custom Control
 
+.custom-control {
 
+  .custom-control-input,
 
+  .custom-control-input + .custom-control-label {
 
+    cursor: pointer;
 
+  }
 
+}
 
+
 
+// card (substitute panel of bootstrap3)
 
+.card {
 
+  margin-bottom: 20px;
 
+}
 
+
 
+.card-header {
 
+  font-weight: 700;
 
+  text-transform: none;
 
+}
 
+
 
+.card-header:first-child {
 
+}
 
+
 
+// Well (substitute Well of bootstrap3)
 
+.card.well {
 
+  min-height: 20px;
 
+  padding: $card-spacer-y $card-spacer-x;
 
+}
 
+
 
+// Dropdowns
 
+.dropdown-toggle {
 
+  &.btn.disabled {
 
+    pointer-events: auto;
 
+    cursor: not-allowed;
 
+  }
 
+
 
+  // hide caret
 
+  &.dropdown-toggle-no-caret::after {
 
+    content: none;
 
+  }
 
+}
 
+
 
+// Badges
 
+.badge {
 
+  @extend .badge-pill;
 
+}
 
+
 
+//Modals
 
+.modal-open {
 
+  width: 100%;
 
+  padding-right: 0 !important;
 
+}
 
+
 
+.modal-content {
 
+  box-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.1);
 
+}
 
+
 
+.modal-header {
 
+  border-bottom: 1px solid #e5e5e5;
 
+}
 
+
 
+.modal-footer {
 
+  border-top: 1px solid #e5e5e5;
 
+}
 
+
 
+// When fading in the modal, animate it to slide down
 
+.modal.fade .modal-dialog {
 
+  @include transition($modal-transition);
 
+  transform: $modal-fade-transform;
 
+}
 
+
 
+.modal.show .modal-dialog {
 
+  transform: $modal-show-transform;
 
+}
 
+
 
+// When trying to close, animate focus to scale
 
+.modal.modal-static .modal-dialog {
 
+  transform: $modal-scale-transform;
 
+}
 
+
 
+// col-form-label (substitute for control-label of bootstrap3)
 
+.col-form-label {
 
+  text-align: right;
 
+}
 
+
 
+// label
 
+label {
 
+  // add with-no-font-weight class in case you do not want to apply font-weight 700 to label
 
+  :not(.with-no-font-weight) {
 
+    font-weight: 700;
 
+  }
 
+}
 
+
 
+// disabled button (reproduction from bootstrap3.)
 
+// see https://cccabinet.jpn.org/bootstrap4/components/buttons#disabled-state
 
+.btn.disabled,
 
+.btn[disabled],
 
+fieldset[disabled] .btn {
 
+  cursor: not-allowed;
 
+}
 
+
 
+// progress bar
 
+.progress {
 
+  margin-bottom: 18px;
 
+  overflow: hidden;
 
+}
 
+
 
+.text-break {
 
+  word-break: break-word;
 
+  overflow-wrap: break-word;
 
+}
 
+
 
+// prevent tooltip flickering (flashing) on hover
 
+.tooltip {
 
+  pointer-events: none;
 
+}

+ 163 - 0
packages/preset-themes/src/bootstrap/_variables.scss
Просмотреть файл 

@@ -0,0 +1,163 @@
 
+@use '../variables';
 
+
 
+//
 
+// Variables
 
+// --------------------------------------------------
 
+
 
+//== Colors
 
+//
 
+$primary: variables.$growi-blue !default;
 
+$secondary: #6c757d !default;
 
+$info: #009fbb !default;
 
+$success: #00bb83 !default;
 
+$warning: #ffa32b !default;
 
+$danger: #ff0a54 !default;
 
+$light: #e4e7ea !default;
 
+$dark: #343a40 !default;
 
+$gray-50: lighten($light, 7%) !default;
 
+$gray-100: lighten($light, 4%) !default;
 
+$gray-200: $light !default;
 
+$gray-300: darken($light, 5%) !default;
 
+$gray-400: darken($light, 20%) !default;
 
+$gray-500: darken($light, 30%) !default;
 
+$gray-550: lighten($dark, 15%) !default;
 
+$gray-600: lighten($dark, 10%) !default;
 
+$gray-700: lighten($dark, 5%) !default;
 
+$gray-800: $dark !default;
 
+$gray-900: darken($dark, 5%) !default;
 
+$grays: (
 
+  '50': $gray-50,
 
+) !default;
 
+$red: #ff0a54 !default;
 
+
 
+// Options
 
+//
 
+// Quickly modify global styling by enabling or disabling optional features.
 
+
 
+$enable-shadows: true;
 
+
 
+// Grid breakpoints
 
+//
 
+// Define the minimum dimensions at which your layout will change,
 
+// adapting to different screen sizes, for use in media queries.
 
+
 
+$grid-breakpoints: (
 
+  xs: 0,
 
+  sm: 576px,
 
+  md: 768px,
 
+  lg: 992px,
 
+  xl: 1200px,
 
+  xxl: 1480px,
 
+);
 
+
 
+// Grid containers
 
+//
 
+// Define the maximum width of `.container` for different screen sizes.
 
+
 
+$container-max-widths: (
 
+  sm: 540px,
 
+  md: 720px,
 
+  lg: 960px,
 
+  xl: 1140px,
 
+  xxl: 1320px,
 
+);
 
+
 
+//== Typography
 
+//
 
+//## Font, line-height, and color for body text, headings, and more.
 
+$font-family-sans-serif: Lato, -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
 
+$font-family-serif: Georgia, 'Times New Roman', Times, serif;
 
+$font-family-monospace: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
 
+$font-family-base: $font-family-sans-serif;
 
+
 
+$font-size-base: 0.875rem;  // 16px -> 14px
 
+$line-height-base: 1.42857;
 
+
 
+$blockquote-small-color: $gray-500;
 
+
 
+//== Components
 
+//
 
+$border-radius: 4px;
 
+$border-radius-sm: 0;
 
+$border-radius-lg: 8px;
 
+
 
+// Buttons
 
+//
 
+// For each of Bootstrap's buttons, define text, background, and border color.
 
+$btn-link-disabled-color: $gray-500;
 
+$btn-focus-box-shadow: none;
 
+$btn-active-box-shadow: none;
 
+
 
+//== Forms
 
+//
 
+$input-border-color: $gray-300;
 
+$input-placeholder-color: $gray-500;
 
+
 
+$custom-control-indicator-border-color: $gray-400;
 
+$custom-control-label-disabled-color: $gray-500;
 
+$custom-select-disabled-color: $gray-500;
 
+$custom-range-thumb-disabled-bg: $gray-400;
 
+
 
+//== Navs
 
+$nav-link-padding-y: 0.75rem;
 
+$nav-link-padding-x: 1rem;
 
+$nav-link-disabled-color: $gray-500;
 
+
 
+//== Navbar
 
+$navbar-padding-y: 0;
 
+$navbar-brand-padding-y: 0;
 
+$navbar-nav-link-padding-x: 1rem;
 
+
 
+//== Dropdowns
 
+$dropdown-border-radius: $border-radius-lg;
 
+$dropdown-link-disabled-color: $gray-500;
 
+$dropdown-header-color: $gray-500;
 
+$dropdown-box-shadow: 0 0.5rem 0.7rem rgba(black, 0.1);
 
+
 
+//== Popovers
 
+$popover-border-radius: $border-radius;
 
+$popover-box-shadow: 0 0.5rem 0.7rem rgba(black, 0.1);
 
+
 
+//== Pagination
 
+$pagination-disabled-color: $gray-500;
 
+
 
+//== Cards
 
+$card-spacer-y: 7px;
 
+$card-spacer-x: 15px;
 
+
 
+//== Toasts
 
+$toast-header-color: $gray-500;
 
+
 
+//== Modals
 
+$modal-content-border-width: 0;
 
+$modal-content-border-radius: $border-radius-lg;
 
+$modal-header-padding-y: 0.75rem;
 
+$modal-header-padding-x: 1rem;
 
+
 
+//== Alerts
 
+$alert-bg-level: -2;
 
+$alert-border-level: 0;
 
+$alert-color-level: -10;
 
+
 
+//== Progress bar
 
+$progress-height: 4px;
 
+$progress-bg: $gray-100;
 
+$progress-box-shadow: none;
 
+
 
+//== List group
 
+$list-group-disabled-color: $gray-500;
 
+
 
+//==  Figures
 
+$figure-caption-color: $gray-500;
 
+
 
+//==  Breadcrumbs
 
+$breadcrumb-divider-color: $gray-500;
 
+$breadcrumb-active-color: $gray-500;
 
+
 
+//== Code
 
+$pre-color: dummyinvalildcolor; // disable pre color specification with invalid value
 
+
 
+//== Custom Checkbox
 
+$custom-checkbox-indicator-border-radius: 0px;
 
+$custom-control-indicator-focus-box-shadow: none;
 
+$custom-control-indicator-size: 1.2rem;

+ 6 - 8
packages/app/src/components/Theme/ThemeHalloween.global.scss → packages/preset-themes/src/halloween.scss
Просмотреть файл 

@@ -1,6 +1,6 @@
 
-@use '../../styles/variables' as *;
 
-@use '../../styles/bootstrap/variables' as *;
 
-@use '../../styles/theme/mixins/page-editor-mode-manager';
 
+@use './variables' as *;
 
+@use './bootstrap/variables' as *;
 
+@use './theme/mixins/page-editor-mode-manager';
 
 
 $themecolor: #aa4a04;
 
 $themelight: #f0f8ff;
 
@@ -28,9 +28,7 @@ $light: lighten($secondary, 10%);
 
 }
 
 
 
-//== Light Mode
 
-//
 
-:root .theme-halloween {
 
+:root[data-theme] {
 
   // Background colors
 
   $bgcolor-global: #050000;
 
   $bgcolor-inline-code: #1f1f22; //optional
 
@@ -101,8 +99,8 @@ $light: lighten($secondary, 10%);
 
   // admin theme box
 
   $color-theme-color-box: lighten($primary, 20%);
 
 
-  @import '../../styles/theme/apply-colors';
 
-  @import '../../styles/theme/apply-colors-dark';
 
+  @import './theme/apply-colors';
 
+  @import './theme/apply-colors-dark';
 
 
   .grw-navbar {
 
     background-image: url('/images/themes/halloween/halloween-navbar.jpg') !important;

+ 1 - 0
packages/preset-themes/src/halloween.tsx
Просмотреть файл 

@@ -0,0 +1 @@
 
+import './halloween.scss';

+ 0 - 3
packages/preset-themes/src/styles/style.scss
Просмотреть файл 

@@ -1,3 +0,0 @@
 
-:root {
 
-  --primary: #000;
 
-}

+ 538 - 0
packages/preset-themes/src/theme/_apply-colors-dark.scss
Просмотреть файл 

@@ -0,0 +1,538 @@
 
+@use '../variables' as var;
 
+@use '../bootstrap/init' as *;
 
+@use '../atoms/mixins/buttons' as mixins-buttons;
 
+@use './mixins/count-badge';
 
+
 
+// determine optional variables
 
+$color-list: $color-global !default;
 
+$bgcolor-list: $bgcolor-global !default;
 
+$color-list-hover: $color-global !default;
 
+$bgcolor-list-hover: lighten($bgcolor-global, 8%) !default;
 
+$color-list-active: $color-reversal !default;
 
+$bgcolor-list-active: $primary !default;
 
+$bgcolor-subnav: lighten($bgcolor-global, 3%) !default;
 
+$color-table: white !default;
 
+$bgcolor-table: #343a40 !default;
 
+$border-color-table: lighten($bgcolor-table, 7.5%) !default;
 
+$color-table-hover: rgba(white, 0.075) !default;
 
+$bgcolor-table-hover: lighten($bgcolor-table, 7.5%) !default;
 
+$bgcolor-sidebar-list-group: $bgcolor-list !default;
 
+$color-tags: #949494 !default;
 
+$bgcolor-tags: $dark !default;
 
+$border-color-global: $gray-500 !default;
 
+$border-color-toc: $border-color-global !default;
 
+$color-dropdown: $color-global !default;
 
+$bgcolor-dropdown: $bgcolor-global !default;
 
+$color-dropdown-link: $color-global !default;
 
+$color-dropdown-link-hover: $light !default;
 
+$bgcolor-dropdown-link-hover: lighten($bgcolor-global, 15%) !default;
 
+$color-dropdown-link-active: $light !default;
 
+$bgcolor-dropdown-link-active: $primary !default;
 
+
 
+// override bootstrap variables
 
+$text-muted: $gray-550;
 
+$table-dark-color: $color-table;
 
+$table-dark-bg: $bgcolor-table;
 
+$table-dark-border-color: $border-color-table;
 
+$table-dark-hover-color: $color-table-hover;
 
+$table-dark-hover-bg: $bgcolor-table-hover;
 
+$border-color: $border-color-global;
 
+$dropdown-color: $color-dropdown;
 
+$dropdown-bg: $bgcolor-dropdown;
 
+$dropdown-link-color: $color-dropdown-link;
 
+$dropdown-link-hover-color: $color-dropdown-link-hover;
 
+$dropdown-link-hover-bg: $bgcolor-dropdown-link-hover;
 
+$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';
 
+
 
+// List Group
 
+@include override-list-group-item($color-list, $bgcolor-list, $color-list-hover, $bgcolor-list-hover, $color-list-active, $bgcolor-list-active);
 
+
 
+/*
 
+  * Form
 
+  */
 
+input.form-control,
 
+select.form-control,
 
+select.custom-select,
 
+textarea.form-control {
 
+  color: $color-global;
 
+  background-color: darken($bgcolor-global, 5%);
 
+  border-color: $border-color-global;
 
+  &:focus {
 
+    background-color: $bgcolor-global;
 
+  }
 
+  // FIXME: accent color
 
+  // border: 1px solid darken($border, 30%);
 
+}
 
+
 
+.form-control[disabled],
 
+.form-control[readonly] {
 
+  color: lighten($color-global, 10%);
 
+  background-color: lighten($bgcolor-global, 5%);
 
+}
 
+
 
+.input-group > .input-group-prepend > .input-group-text {
 
+  color: theme-color('light');
 
+  background-color: theme-color('secondary');
 
+  border: 1px solid theme-color('secondary');
 
+  border-right: none;
 
+  &.text-muted {
 
+    color: theme-color('light') !important;
 
+  }
 
+}
 
+
 
+.input-group input {
 
+  border-color: $border-color-global;
 
+}
 
+
 
+label.custom-control-label::before {
 
+  background-color: darken($bgcolor-global, 5%);
 
+}
 
+
 
+/*
 
+ * Table
 
+ */
 
+.table {
 
+  @extend .table-dark;
 
+}
 
+
 
+/*
 
+ * Card
 
+ */
 
+.card:not([class*='bg-']):not(.well):not(.card-disabled) {
 
+  @extend .bg-dark;
 
+}
 
+
 
+// [TODO] GW-3219 modify common color of well in dark theme, then remove below css.
 
+.card.well {
 
+  border-color: $secondary;
 
+}
 
+
 
+.card.card-disabled {
 
+  background-color: lighten($dark, 10%);
 
+  border-color: $secondary;
 
+}
 
+
 
+/*
 
+ * Pagination
 
+ */
 
+ul.pagination {
 
+  li.page-item {
 
+    button.page-link {
 
+      @extend .btn-dark;
 
+    }
 
+  }
 
+}
 
+
 
+/*
 
+ * GROWI Login form
 
+ */
 
+.nologin {
 
+  // background color
 
+  $color-gradient: #3c465c;
 
+  background: linear-gradient(45deg, darken($color-gradient, 30%) 0%, hsla(340, 100%, 55%, 0) 70%),
 
+    linear-gradient(135deg, darken(var.$growi-green, 30%) 10%, hsla(225, 95%, 50%, 0) 70%),
 
+    linear-gradient(225deg, darken(var.$growi-blue, 20%) 10%, hsla(140, 90%, 50%, 0) 80%),
 
+    linear-gradient(315deg, darken($color-gradient, 25%) 100%, hsla(35, 95%, 55%, 0) 70%);
 
+
 
+  .noLogin-header {
 
+    background-color: rgba(black, 0.5);
 
+
 
+    .logo {
 
+      background-color: rgba(white, 0);
 
+      fill: rgba(white, 0.5);
 
+    }
 
+
 
+    h1 {
 
+      color: rgba(white, 0.5);
 
+    }
 
+  }
 
+
 
+  .noLogin-dialog {
 
+    background-color: rgba(black, 0.5);
 
+  }
 
+
 
+  .input-group {
 
+    .input-group-text {
 
+      color: darken(white, 30%);
 
+      background-color: rgba($gray-700, 0.7);
 
+    }
 
+
 
+    .form-control {
 
+      color: white;
 
+      background-color: rgba(#505050, 0.7);
 
+      box-shadow: unset;
 
+
 
+      &::placeholder {
 
+        color: darken(white, 30%);
 
+      }
 
+    }
 
+  }
 
+
 
+  .btn-fill {
 
+    .btn-label {
 
+      color: $gray-300;
 
+    }
 
+    .btn-label-text {
 
+      color: $gray-400;
 
+    }
 
+  }
 
+
 
+  .grw-external-auth-form {
 
+    border-color: gray !important;
 
+  }
 
+
 
+  .btn-external-auth-tab {
 
+    @extend .btn-dark;
 
+  }
 
+
 
+  // footer link text
 
+  .link-growi-org {
 
+    color: rgba(white, 0.4);
 
+
 
+    &:hover,
 
+    &.focus {
 
+      color: rgba(white, 0.7);
 
+
 
+      .growi {
 
+        color: darken(var.$growi-green, 5%);
 
+      }
 
+
 
+      .org {
 
+        color: darken(var.$growi-blue, 5%);
 
+      }
 
+    }
 
+  }
 
+}
 
+
 
+/*
 
+ * GROWI subnavigation
 
+ */
 
+.grw-drawer-toggler {
 
+  @extend .btn-dark;
 
+  color: $gray-400;
 
+}
 
+
 
+/*
 
+ * GROWI page list
 
+ */
 
+.page-list {
 
+  .page-list-ul {
 
+    > li {
 
+      > span.page-list-meta {
 
+        color: darken($color-global, 10%);
 
+      }
 
+    }
 
+  }
 
+
 
+  // List group
 
+  .list-group-item {
 
+    &.active {
 
+      background-color: lighten($bgcolor-global, 9%) !important;
 
+    }
 
+    .list-group-item-action:hover {
 
+      background-color: $bgcolor-list-hover;
 
+    }
 
+    .page-list-snippet {
 
+      color: darken($body-color, 10%);
 
+    }
 
+  }
 
+}
 
+
 
+/*
 
+ * GROWI ToC
 
+ */
 
+.revision-toc-content {
 
+  ::marker {
 
+    color: lighten($bgcolor-global, 30%);
 
+  }
 
+}
 
+
 
+/*
 
+ * GROWI subnavigation
 
+ */
 
+.grw-subnav {
 
+  background-color: $bgcolor-subnav;
 
+}
 
+
 
+.grw-subnav-fixed-container .grw-subnav {
 
+  background-color: rgba($bgcolor-subnav, 0.85);
 
+}
 
+
 
+.grw-page-editor-mode-manager {
 
+  .btn-outline-primary {
 
+    &:hover {
 
+      color: $primary;
 
+      background-color: $gray-700;
 
+    }
 
+  }
 
+}
 
+
 
+// Search drop down
 
+#search-typeahead-asynctypeahead {
 
+  background-color: $bgcolor-global;
 
+  .table {
 
+    background-color: transparent;
 
+  }
 
+}
 
+
 
+/*
 
+ * 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);
 
+
 
+  // Pagetree
 
+  .grw-pagetree {
 
+    @include override-list-group-item-for-pagetree(
 
+      $color-sidebar-context,
 
+      lighten($bgcolor-sidebar-context, 8%),
 
+      lighten($bgcolor-sidebar-context, 15%),
 
+      darken($color-sidebar-context, 15%),
 
+      darken($color-sidebar-context, 10%),
 
+      lighten($bgcolor-sidebar-context, 18%),
 
+      lighten($bgcolor-sidebar-context, 24%)
 
+    );
 
+    .grw-pagetree-triangle-btn {
 
+      @include mixins-buttons.button-outline-svg-icon-variant($secondary, $gray-200);
 
+    }
 
+    .btn-page-item-control {
 
+      @include button-outline-variant($gray-500, $gray-500, $secondary, transparent);
 
+      @include hover() {
 
+        background-color: lighten($bgcolor-sidebar-context, 20%);
 
+      }
 
+      &:not(:disabled):not(.disabled):active,
 
+      &:not(:disabled):not(.disabled).active {
 
+        background-color: lighten($bgcolor-sidebar-context, 34%);
 
+      }
 
+      box-shadow: none !important;
 
+    }
 
+  }
 
+  .private-legacy-pages-link {
 
+    &:hover {
 
+      background: $bgcolor-list-hover;
 
+    }
 
+  }
 
+}
 
+
 
+.btn.btn-page-item-control {
 
+  @include button-outline-variant($gray-500, $gray-500, $secondary, transparent);
 
+  @include hover() {
 
+    background-color: $gray-700;
 
+  }
 
+  &:not(:disabled):not(.disabled):active,
 
+  &:not(:disabled):not(.disabled).active {
 
+    color: $gray-200;
 
+    background-color: $gray-600;
 
+  }
 
+  box-shadow: none !important;
 
+}
 
+
 
+/*
 
+ * Popover
 
+ */
 
+.popover {
 
+  background-color: $bgcolor-global;
 
+  border-color: $secondary;
 
+  .popover-header {
 
+    color: $white;
 
+    background-color: $secondary;
 
+    border-color: $secondary;
 
+  }
 
+  .popover-body {
 
+    color: inherit;
 
+  }
 
+
 
+  &.bs-popover-top .arrow {
 
+    &::before {
 
+      border-top-color: $secondary;
 
+    }
 
+
 
+    &::after {
 
+      border-top-color: $bgcolor-global;
 
+    }
 
+  }
 
+  &.bs-popover-bottom .arrow {
 
+    &::before {
 
+      border-bottom-color: $secondary;
 
+    }
 
+
 
+    &::after {
 
+      border-bottom-color: $bgcolor-global;
 
+    }
 
+  }
 
+  &.bs-popover-right .arrow {
 
+    &::before {
 
+      border-right-color: $secondary;
 
+    }
 
+
 
+    &::after {
 
+      border-right-color: $bgcolor-global;
 
+    }
 
+  }
 
+  &.bs-popover-left .arrow {
 
+    &::before {
 
+      border-left-color: $secondary;
 
+    }
 
+
 
+    &::after {
 
+      border-left-color: $bgcolor-global;
 
+    }
 
+  }
 
+}
 
+
 
+/*
 
+ * GROWI Grid Edit Modal
 
+ */
 
+.grw-grid-edit-preview {
 
+  background: $gray-900;
 
+}
 
+
 
+/*
 
+ * Slack
 
+ */
 
+.grw-slack-notification {
 
+  background-color: transparent;
 
+  $color-slack: #4b144c;
 
+
 
+  .form-control {
 
+    background: $bgcolor-global;
 
+  }
 
+
 
+  .custom-control-label {
 
+    &::before {
 
+      background-color: $secondary;
 
+      border-color: transparent;
 
+    }
 
+    &::after {
 
+      background-color: darken($color-slack, 5%);
 
+      background-image: url(/images/icons/slack/slack-logo-dark-off.svg);
 
+    }
 
+  }
 
+
 
+  .custom-control-input:checked ~ .custom-control-label {
 
+    &::before {
 
+      background-color: lighten($color-slack, 10%);
 
+    }
 
+    &::after {
 
+      background-color: darken($color-slack, 5%);
 
+      background-image: url(/images/icons/slack/slack-logo-dark-on.svg);
 
+    }
 
+  }
 
+  .grw-slack-logo svg {
 
+    fill: #dd80de;
 
+  }
 
+
 
+  .grw-btn-slack {
 
+    background-color: black;
 
+    &:focus,
 
+    &:hover {
 
+      background-color: black;
 
+    }
 
+  }
 
+
 
+  .grw-btn-slack-triangle {
 
+    color: $secondary;
 
+  }
 
+}
 
+
 
+/*
 
+ * GROWI HandsontableModal
 
+ */
 
+.grw-hot-modal-navbar {
 
+  background-color: $dark;
 
+}
 
+
 
+.wiki {
 
+  h1 {
 
+    border-color: lighten($border-color-theme, 10%);
 
+  }
 
+  h2 {
 
+    border-color: $border-color-theme;
 
+  }
 
+}
 
+
 
+/*
 
+ * GROWI comment form
 
+ */
 
+.comment-form {
 
+  #slack-mark-black {
 
+    display: none;
 
+  }
 
+}
 
+
 
+.page-comments-row {
 
+  background: $bgcolor-subnav;
 
+}
 
+
 
+/*
 
+ * GROWI 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;
 
+  }
 
+}
 
+
 
+/*
 
+ * admin settings
 
+ */
 
+.admin-setting-header {
 
+  border-color: $border-color-global;
 
+}
 
+
 
+/*
 
+* grw-side-contents
 
+*/
 
+.grw-side-contents-sticky-container {
 
+  .grw-count-badge {
 
+    @include count-badge.count-badge($gray-400, $gray-700);
 
+  }
 
+
 
+  .grw-border-vr {
 
+    border-color: $border-color-toc;
 
+  }
 
+
 
+  .revision-toc {
 
+    border-color: $border-color-toc;
 
+  }
 
+}
 
+
 
+/*
 
+ * drawio
 
+ */
 
+.drawio-viewer {
 
+  border-color: $border-color-global;
 
+}
 
+
 
+/*
 
+ * modal
 
+ */
 
+.grw-modal-head {
 
+  border-color: $border-color-global;
 
+}
 
+
 
+/*
 
+ * skeleton
 
+ */
 
+.grw-skeleton {
 
+  background-color: lighten($bgcolor-subnav, 15%);
 
+}

+ 430 - 0
packages/preset-themes/src/theme/_apply-colors-light.scss
Просмотреть файл 

@@ -0,0 +1,430 @@
 
+@use '../variables' as var;
 
+@use '../bootstrap/init' as *;
 
+@use '../atoms/mixins/buttons' as mixins-buttons;
 
+@use './mixins/count-badge';
 
+
 
+// determine optional variables
 
+$color-list: $color-global !default;
 
+$bgcolor-list: $bgcolor-global !default;
 
+$color-list-hover: $color-global !default;
 
+$bgcolor-list-hover: lighten($primary, 72%) !default;
 
+$bgcolor-list-active: lighten($primary, 65%) !default;
 
+$color-list-active: color-yiq($bgcolor-list-active) !default;
 
+$color-table: $color-global !default;
 
+$bgcolor-table: null !default;
 
+$border-color-table: $gray-200 !default;
 
+$color-table-hover: $color-table !default;
 
+$bgcolor-table-hover: rgba(black, 0.075) !default;
 
+$bgcolor-sidebar-list-group: $bgcolor-list !default;
 
+$color-tags: $secondary !default;
 
+$bgcolor-tags: $gray-200 !default;
 
+$border-color-global: $gray-300 !default;
 
+$border-color-toc: $border-color-global !default;
 
+$color-dropdown: $color-global !default;
 
+$color-dropdown-link: $color-global !default;
 
+$color-dropdown-link-hover: $color-global !default;
 
+$color-dropdown-link-active: $color-reversal !default;
 
+$bgcolor-dropdown-link-active: $primary !default;
 
+
 
+// override bootstrap variables
 
+$text-muted: $gray-500;
 
+$table-color: $color-table;
 
+$table-bg: $bgcolor-table;
 
+$table-border-color: $border-color-table;
 
+$table-hover-color: $color-table-hover;
 
+$table-hover-bg: $bgcolor-table-hover;
 
+$border-color: $border-color-global;
 
+$dropdown-color: $color-dropdown;
 
+$dropdown-link-color: $color-dropdown-link;
 
+$dropdown-link-hover-color: $color-dropdown-link-hover;
 
+$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';
 
+
 
+// List Group
 
+@include override-list-group-item($color-list, $bgcolor-list, $color-list-hover, $bgcolor-list-hover, $color-list-active, $bgcolor-list-active);
 
+
 
+/*
 
+ * Form
 
+ */
 
+.form-control {
 
+  background-color: $bgcolor-global;
 
+}
 
+
 
+.form-control::placeholder {
 
+  color: darken($bgcolor-global, 20%);
 
+}
 
+
 
+.form-control[disabled],
 
+.form-control[readonly] {
 
+  color: lighten($color-global, 10%);
 
+  background-color: darken($bgcolor-global, 5%);
 
+}
 
+
 
+/*
 
+ * card
 
+ */
 
+.card.card-disabled {
 
+  background-color: darken($bgcolor-card, 5%);
 
+  border-color: $gray-200;
 
+}
 
+
 
+/*
 
+ * GROWI Login form
 
+ */
 
+.nologin {
 
+  // background color
 
+  $color-gradient: #3e4d6c;
 
+  background: linear-gradient(45deg, darken($color-gradient, 30%) 0%, hsla(340, 100%, 55%, 0) 70%),
 
+    linear-gradient(135deg, var.$growi-green 10%, hsla(225, 95%, 50%, 0) 70%), linear-gradient(225deg, var.$growi-blue 10%, hsla(140, 90%, 50%, 0) 80%),
 
+    linear-gradient(315deg, darken($color-gradient, 25%) 100%, hsla(35, 95%, 55%, 0) 70%);
 
+
 
+  .noLogin-header {
 
+    background-color: rgba(white, 0.5);
 
+
 
+    .logo {
 
+      background-color: rgba(black, 0);
 
+      fill: rgba(black, 0.5);
 
+    }
 
+
 
+    h1 {
 
+      color: rgba(black, 0.5);
 
+    }
 
+  }
 
+
 
+  .noLogin-dialog {
 
+    background-color: rgba(white, 0.5);
 
+  }
 
+
 
+  .dropdown-with-icon {
 
+    .dropdown-toggle {
 
+      color: white;
 
+      background-color: rgba($gray-600, 0.7);
 
+      box-shadow: unset;
 
+      &:focus {
 
+        color: white;
 
+        background-color: rgba($gray-600, 0.7);
 
+      }
 
+    }
 
+    i {
 
+      color: darken(white, 30%);
 
+      background-color: rgba($gray-700, 0.7);
 
+    }
 
+  }
 
+
 
+  .input-group {
 
+    .input-group-text {
 
+      color: darken(white, 30%);
 
+      background-color: rgba($gray-700, 0.7);
 
+    }
 
+
 
+    .form-control {
 
+      color: white;
 
+      background-color: rgba($gray-600, 0.7);
 
+      box-shadow: unset;
 
+
 
+      &::placeholder {
 
+        color: darken(white, 30%);
 
+      }
 
+    }
 
+  }
 
+
 
+  // footer link text
 
+  .link-growi-org {
 
+    color: rgba(black, 0.4);
 
+
 
+    &:hover,
 
+    &.focus {
 
+      color: black;
 
+
 
+      .growi {
 
+        color: darken(var.$growi-green, 20%);
 
+      }
 
+
 
+      .org {
 
+        color: darken(var.$growi-blue, 15%);
 
+      }
 
+    }
 
+  }
 
+}
 
+
 
+/*
 
+ * GROWI subnavigation
 
+ */
 
+.grw-subnav {
 
+  background-color: $bgcolor-subnav;
 
+}
 
+
 
+.grw-subnav-fixed-container .grw-subnav {
 
+  background-color: rgba($bgcolor-subnav, 0.85);
 
+}
 
+
 
+.grw-page-editor-mode-manager {
 
+  .btn-outline-primary {
 
+    &:hover {
 
+      color: $primary;
 
+      background-color: $gray-200;
 
+    }
 
+  }
 
+}
 
+
 
+.grw-drawer-toggler {
 
+  @extend .btn-light;
 
+  color: $gray-500;
 
+}
 
+
 
+/*
 
+ * 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(
 
+      $color-sidebar-context,
 
+      darken($bgcolor-sidebar-context, 5%),
 
+      darken($bgcolor-sidebar-context, 12%),
 
+      lighten($color-sidebar-context, 10%),
 
+      lighten($color-sidebar-context, 8%),
 
+      darken($bgcolor-sidebar-context, 15%),
 
+      darken($bgcolor-sidebar-context, 24%)
 
+    );
 
+    .grw-pagetree-triangle-btn {
 
+      @include mixins-buttons.button-outline-svg-icon-variant($gray-400, $primary);
 
+    }
 
+  }
 
+  .private-legacy-pages-link {
 
+    &:hover {
 
+      background: $bgcolor-list-hover;
 
+    }
 
+  }
 
+}
 
+
 
+.btn.btn-page-item-control {
 
+  @include button-outline-variant($gray-500, $primary, lighten($primary, 52%), transparent);
 
+  @include hover() {
 
+    background-color: lighten($primary, 58%);
 
+  }
 
+  &:not(:disabled):not(.disabled):active,
 
+  &:not(:disabled):not(.disabled).active {
 
+    color: $primary;
 
+  }
 
+  box-shadow: none !important;
 
+}
 
+
 
+/*
 
+ * GROWI page list
 
+ */
 
+.page-list {
 
+  .page-list-ul {
 
+    > li {
 
+      > span.page-list-meta {
 
+        color: lighten($color-global, 10%);
 
+      }
 
+    }
 
+  }
 
+  // List group
 
+  .list-group-item {
 
+    .page-list-snippet {
 
+      color: lighten($body-color, 10%);
 
+    }
 
+  }
 
+}
 
+
 
+/*
 
+ * GROWI ToC
 
+ */
 
+.revision-toc-content {
 
+  ::marker {
 
+    color: darken($bgcolor-global, 20%);
 
+  }
 
+}
 
+
 
+/*
 
+ * GROWI Editor
 
+ */
 
+.grw-editor-navbar-bottom {
 
+  background-color: $gray-50;
 
+
 
+  #slack-mark-white {
 
+    display: none;
 
+  }
 
+
 
+  .input-group-text {
 
+    margin-right: 1px;
 
+    color: $secondary;
 
+    border-color: $light;
 
+  }
 
+
 
+  .btn.btn-outline-secondary {
 
+    border-color: $border-color;
 
+  }
 
+}
 
+
 
+/*
 
+ * GROWI Link Edit Modal
 
+ */
 
+.link-edit-modal {
 
+  span i {
 
+    color: $gray-400;
 
+  }
 
+}
 
+
 
+/*
 
+ * GROWI Grid Edit Modal
 
+ */
 
+
 
+.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);
 
+    }
 
+  }
 
+  .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);
 
+    }
 
+  }
 
+  .grw-slack-logo svg {
 
+    fill: #af30b0;
 
+  }
 
+
 
+  .grw-btn-slack {
 
+    background-color: white;
 
+
 
+    &:hover,
 
+    &:focus {
 
+      background-color: white;
 
+    }
 
+  }
 
+
 
+  .grw-btn-slack-triangle {
 
+    color: $secondary;
 
+  }
 
+}
 
+
 
+/*
 
+ * GROWI HandsontableModal
 
+ */
 
+.grw-hot-modal-navbar {
 
+  background-color: $light;
 
+}
 
+
 
+.wiki {
 
+  h1 {
 
+    border-color: $border-color-theme;
 
+  }
 
+  h2 {
 
+    border-color: $border-color-theme;
 
+  }
 
+}
 
+
 
+/*
 
+ * GROWI comment form
 
+ */
 
+.comment-form {
 
+  #slack-mark-white {
 
+    display: none;
 
+  }
 
+}
 
+
 
+.page-comments-row {
 
+  background: $bgcolor-subnav;
 
+}
 
+
 
+/*
 
+ * GROWI 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-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;
 
+  }
 
+}
 
+
 
+/*
 
+ * drawio
 
+ */
 
+.drawio-viewer {
 
+  border-color: $border-color-global;
 
+}
 
+
 
+/*
 
+ * admin settings
 
+ */
 
+.admin-setting-header {
 
+  border-color: $border-color;
 
+}
 
+
 
+/*
 
+ * modal
 
+ */
 
+.grw-modal-head {
 
+  border-color: $border-color-global;
 
+}
 
+
 
+/*
 
+ * skeleton
 
+ */
 
+.grw-skeleton {
 
+  background-color: darken($bgcolor-subnav, 10%);
 
+}

+ 697 - 0
packages/preset-themes/src/theme/_apply-colors.scss
Просмотреть файл 

@@ -0,0 +1,697 @@
 
+@use '../variables' as var;
 
+@use '../bootstrap/init' as *;
 
+@use '../mixins';
 
+@use './mixins/tables'; // comment out and use _reboot-bootstrap-tables instead -- 2020.05.28 Yuki Takei
 
+@use '../atoms/mixins/code';
 
+
 
+//
 
+//== Apply to Bootstrap
 
+//
 
+
 
+// determine optional variables
 
+$border-image-navbar: linear-gradient(to right, $gray-300 0%, $gray-300 100%) !default;
 
+$bgcolor-search-top-dropdown: $secondary !default;
 
+$bgcolor-sidebar-nav-item-active: darken($bgcolor-sidebar, 10%) !default;
 
+$text-shadow-sidebar-nav-item-active: 1px 1px 2px $primary !default;
 
+$bgcolor-inline-code: $gray-100 !default;
 
+$color-inline-code: darken($red, 15%) !default;
 
+$bordercolor-inline-code: $gray-400 !default;
 
+$bordercolor-nav-tabs: $gray-300 !default;
 
+$bordercolor-nav-tabs-hover: $gray-200 $gray-200 $bordercolor-nav-tabs !default;
 
+$color-nav-tabs-link-active: $gray-600 !default;
 
+$bordercolor-nav-tabs-active: $bordercolor-nav-tabs $bordercolor-nav-tabs $bgcolor-global !default;
 
+$color-btn-reload-in-sidebar: $gray-500;
 
+$bgcolor-keyword-highlighted: var.$grw-marker-yellow !default;
 
+$bgcolor-page-list-group-item-active: lighten($primary, 76%) !default;
 
+$color-page-list-group-item-meta: $gray-500 !default;
 
+$color-search-page-list-title: $color-global !default;
 
+$bgcolor-subnav: darken($bgcolor-global, 3%) !default;
 
+
 
+// override bootstrap variables
 
+$body-bg: $bgcolor-global;
 
+$body-color: $color-global;
 
+$link-color: $color-link;
 
+$link-hover-color: $color-link-hover;
 
+$input-focus-color: $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: $bgcolor-global;
 
+$nav-tabs-link-active-border-color: $bordercolor-nav-tabs-active;
 
+$theme-colors: map-merge($theme-colors, ( primary: $primary ));
 
+
 
+@import 'reboot-bootstrap-buttons';
 
+@import 'reboot-bootstrap-colors';
 
+@import 'reboot-bootstrap-theme-colors';
 
+@import 'reboot-bootstrap-nav';
 
+@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;
 
+
 
+code:not([class^='language-']) {
 
+  @include code.code-inline-color($color-inline-code, $bgcolor-inline-code, $bordercolor-inline-code);
 
+}
 
+
 
+.code-highlighted {
 
+  border-color: $bordercolor-inline-code;
 
+}
 
+
 
+//
 
+//== 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 {
 
+  .grw-sidebar-mode-icon svg {
 
+    fill: $secondary;
 
+  }
 
+  .grw-color-mode-icon svg {
 
+    fill: $color-global;
 
+  }
 
+  .grw-color-mode-icon-muted svg {
 
+    fill: $secondary;
 
+  }
 
+}
 
+
 
+// Form
 
+.form-control {
 
+  @include form-control-focus();
 
+}
 
+
 
+// Tabs
 
+.nav.nav-tabs .nav-link.active {
 
+  color: $color-link !important;
 
+  background: transparent;
 
+
 
+  &:hover,
 
+  &:focus {
 
+    color: $color-link-hover !important;
 
+  }
 
+}
 
+
 
+// Pagination
 
+ul.pagination {
 
+  li.page-item.disabled {
 
+    button.page-link {
 
+      color: $gray-400;
 
+    }
 
+  }
 
+  li.page-item.active {
 
+    button.page-link {
 
+      color: color-yiq($primary);
 
+      background-color: $primary;
 
+      &:hover,
 
+      &:focus {
 
+        color: color-yiq($primary);
 
+        background-color: $primary;
 
+      }
 
+    }
 
+  }
 
+  li.page-item {
 
+    button.page-link {
 
+      color: $primary;
 
+      border-color: $secondary;
 
+      &:hover,
 
+      &:active,
 
+      &:focus {
 
+        color: $primary;
 
+      }
 
+    }
 
+  }
 
+}
 
+
 
+//
 
+//== Apply to Handsontable
 
+//
 
+.handsontable {
 
+  color: initial;
 
+}
 
+
 
+//
 
+//== Apply to GROWI Elements
 
+//
 
+
 
+.grw-logo {
 
+  // set transition for fill
 
+  svg * {
 
+    transition: fill 0.8s ease-out;
 
+  }
 
+
 
+  svg {
 
+    fill: $fillcolor-logo-mark;
 
+  }
 
+
 
+  &:hover {
 
+    svg {
 
+      .group1 {
 
+        fill: var.$growi-green;
 
+      }
 
+
 
+      .group2 {
 
+        fill: var.$growi-blue;
 
+      }
 
+    }
 
+  }
 
+}
 
+
 
+.grw-navbar {
 
+  background: $bgcolor-navbar;
 
+  .nav-item .nav-link {
 
+    color: $color-link-nabvar;
 
+  }
 
+
 
+  border-image: $border-image-navbar;
 
+  border-image-slice: 1;
 
+
 
+  .grw-app-title {
 
+    color: $fillcolor-logo-mark;
 
+  }
 
+}
 
+
 
+.grw-global-search {
 
+  .btn-secondary.dropdown-toggle {
 
+    @include button-variant($bgcolor-search-top-dropdown, $bgcolor-search-top-dropdown);
 
+  }
 
+
 
+  // for https://youtrack.weseek.co.jp/issue/GW-2603
 
+  .search-typeahead {
 
+    background-color: rgba($bgcolor-global, 0.9);
 
+  }
 
+}
 
+
 
+.grw-sidebar {
 
+  .grw-navigation-resize-button {
 
+    $color-resize-button: $color-global !default;
 
+    $bgcolor-resize-button: white !default;
 
+    $color-resize-button-hover: $color-reversal !default;
 
+    $bgcolor-resize-button-hover: lighten($bgcolor-resize-button, 5%) !default;
 
+
 
+    .hexagon-container svg {
 
+      .background {
 
+        fill: $bgcolor-resize-button;
 
+      }
 
+      .icon {
 
+        fill: $color-resize-button;
 
+      }
 
+    }
 
+    &:hover .hexagon-container svg {
 
+      .background {
 
+        fill: $bgcolor-resize-button-hover;
 
+      }
 
+      .icon {
 
+        fill: $color-resize-button-hover;
 
+      }
 
+    }
 
+  }
 
+  div.grw-global-navigation {
 
+    > div {
 
+      background-color: $bgcolor-sidebar;
 
+    }
 
+  }
 
+  div.grw-contextual-navigation {
 
+    > div {
 
+      color: $color-sidebar-context;
 
+      background-color: $bgcolor-sidebar-context;
 
+    }
 
+  }
 
+
 
+  .grw-sidebar-nav {
 
+    .btn {
 
+      @include button-variant(
 
+        $bgcolor-sidebar,
 
+        $bgcolor-sidebar,
 
+        darken($bgcolor-sidebar, 7.5%),
 
+        darken($bgcolor-sidebar, 10%),
 
+        $bgcolor-sidebar-nav-item-active,
 
+        $bgcolor-sidebar-nav-item-active
 
+      );
 
+    }
 
+  }
 
+  .grw-sidebar-nav-primary-container {
 
+    .btn.active {
 
+      i {
 
+        text-shadow: $text-shadow-sidebar-nav-item-active;
 
+      }
 
+      // fukidashi
 
+      &:after {
 
+        border-right-color: $bgcolor-sidebar-context;
 
+      }
 
+    }
 
+  }
 
+
 
+  .grw-sidebar-content-header {
 
+    .grw-btn-reload {
 
+      color: $color-btn-reload-in-sidebar;
 
+    }
 
+
 
+    .grw-recent-changes-resize-button {
 
+      .custom-control-label::before {
 
+        background-color: $primary;
 
+      }
 
+
 
+      .custom-control-label::after {
 
+        background-color: $bgcolor-global;
 
+      }
 
+
 
+      .custom-control-input:not(:checked) + .custom-control-label::before {
 
+        color: $bgcolor-global;
 
+      }
 
+
 
+      .custom-control-input:checked + .custom-control-label::before {
 
+        color: $bgcolor-global;
 
+        background-color: $primary;
 
+        // border-color: $primary !important;
 
+      }
 
+      .custom-control-input:checked + .custom-control-label::after {
 
+        color: $bgcolor-global;
 
+      }
 
+    }
 
+  }
 
+
 
+  .grw-pagetree {
 
+    .list-group-item {
 
+      .grw-pagetree-title-anchor {
 
+        color: inherit;
 
+      }
 
+    }
 
+  }
 
+  .grw-pagetree-footer {
 
+    .h5.grw-private-legacy-pages-anchor {
 
+      color: inherit;
 
+    }
 
+  }
 
+
 
+  .grw-recent-changes {
 
+    .list-group {
 
+      .list-group-item {
 
+        background-color: transparent;
 
+
 
+        .icon-lock {
 
+          color: $color-link;
 
+        }
 
+
 
+        .grw-recent-changes-item-lower {
 
+          color: $gray-500;
 
+
 
+          svg {
 
+            fill: $gray-500;
 
+          }
 
+        }
 
+      }
 
+    }
 
+  }
 
+}
 
+
 
+/*
 
+ * Icon
 
+ */
 
+.editor-container .navbar-editor svg {
 
+  fill: $color-editor-icons;
 
+}
 
+
 
+// page preview button in link form
 
+.btn-page-preview svg {
 
+  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: $bgcolor-global;
 
+  }
 
+
 
+  .modal-footer {
 
+    border-top-color: $border-color-theme;
 
+  }
 
+}
 
+
 
+.grw-custom-nav-tab {
 
+  .nav-item {
 
+    &:hover,
 
+    &:focus {
 
+      background-color: rgba($color-link, 0.08);
 
+    }
 
+    .nav-link {
 
+      -webkit-appearance: none;
 
+      color: $color-link;
 
+      svg {
 
+        fill: $color-link;
 
+      }
 
+
 
+      // Disabled state lightens text
 
+      &.disabled {
 
+        color: $nav-link-disabled-color;
 
+        svg {
 
+          fill: $nav-link-disabled-color;
 
+        }
 
+      }
 
+    }
 
+  }
 
+
 
+  .grw-nav-slide-hr {
 
+    border-color: $color-link;
 
+  }
 
+}
 
+
 
+.grw-page-accessories-modal {
 
+  .modal-header {
 
+    .close {
 
+      color: $secondary;
 
+    }
 
+  }
 
+}
 
+
 
+/*
 
+ * cards
 
+ */
 
+.card.well {
 
+  color: $color-global;
 
+  background-color: $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;
 
+  }
 
+}
 
+
 
+/*
 
+ * Form Slider
 
+ */
 
+.admin-page {
 
+  span.slider {
 
+    background-color: $gray-300;
 
+
 
+    &:before {
 
+      background-color: white;
 
+    }
 
+  }
 
+
 
+  input:checked + .slider {
 
+    background-color: #007bff;
 
+  }
 
+
 
+  input:focus + .slider {
 
+    box-shadow: 0 0 1px #007bff;
 
+  }
 
+}
 
+
 
+/*
 
+ * GROWI wiki
 
+ */
 
+.wiki {
 
+  h1,
 
+  h2,
 
+  h3,
 
+  h4,
 
+  h5,
 
+  h6,
 
+  h7 {
 
+    &.blink {
 
+      @include mixins.blink-bgcolor($bgcolor-blinked-section);
 
+    }
 
+  }
 
+
 
+  .highlighted-keyword {
 
+    background: linear-gradient(transparent 60%, $bgcolor-keyword-highlighted 60%);
 
+  }
 
+
 
+  a {
 
+    color: $color-link-wiki;
 
+
 
+    &:hover {
 
+      color: $color-link-wiki-hover;
 
+    }
 
+  }
 
+
 
+  // table with handsontable modal button
 
+  .editable-with-handsontable {
 
+    button {
 
+      color: $color-link-wiki;
 
+    }
 
+
 
+    button:hover {
 
+      color: $color-link-wiki-hover;
 
+    }
 
+  }
 
+}
 
+
 
+/*
 
+ * GROWI page-list
 
+ */
 
+.page-list {
 
+  // List group
 
+  .list-group {
 
+    .list-group-item {
 
+      a {
 
+        svg {
 
+          fill: $color-global;
 
+        }
 
+
 
+        @include hover() {
 
+          svg {
 
+            fill: $color-global;
 
+          }
 
+        }
 
+      }
 
+
 
+      .page-list-meta {
 
+        color: $color-page-list-group-item-meta;
 
+        svg {
 
+          fill: $color-page-list-group-item-meta;
 
+        }
 
+      }
 
+
 
+      &.list-group-item-action {
 
+        &.active {
 
+          background-color: $bgcolor-page-list-group-item-active;
 
+          border-left-color: $primary;
 
+        }
 
+      }
 
+    }
 
+  }
 
+}
 
+
 
+/*
 
+ * GROWI Editor
 
+ */
 
+.layout-root.editing {
 
+  .main {
 
+    background-color: darken($bgcolor-global, 2%);
 
+
 
+    .page-editor-editor-container {
 
+      border-right-color: $border-color-theme;
 
+
 
+      .navbar-editor {
 
+        background-color: $bgcolor-global; // same color with active tab
 
+        border-bottom-color: $border-color-theme;
 
+      }
 
+    }
 
+
 
+    .page-editor-preview-container {
 
+      background-color: $bgcolor-global;
 
+    }
 
+  }
 
+}
 
+
 
+/*
 
+ * Preview for editing /Sidebar
 
+ */
 
+body.editing-sidebar {
 
+  .page-editor-preview-body {
 
+    color: $color-sidebar-context;
 
+    background-color: $bgcolor-sidebar-context;
 
+  }
 
+}
 
+
 
+/*
 
+ * GROWI Grid Edit Modal
 
+ */
 
+.grw-grid-edit-preview {
 
+  .desktop-preview,
 
+  .tablet-preview,
 
+  .mobile-preview {
 
+    background: $bgcolor-global;
 
+  }
 
+  .grid-edit-border-for-each-cols {
 
+    border: 2px solid $bgcolor-global;
 
+  }
 
+}
 
+
 
+.grid-preview-col-0 {
 
+  background: var.$growi-blue;
 
+}
 
+
 
+.grid-preview-col-1 {
 
+  background: $info;
 
+}
 
+
 
+.grid-preview-col-2 {
 
+  background: $success;
 
+}
 
+
 
+.grid-preview-col-3 {
 
+  background: var.$growi-green;
 
+}
 
+
 
+/*
 
+ * GROWI comment
 
+ */
 
+.page-comment-meta .page-comment-revision svg {
 
+  fill: $color-link;
 
+
 
+  &:hover {
 
+    fill: $color-link-hover;
 
+  }
 
+}
 
+
 
+/*
 
+ * GROWI comment form
 
+ */
 
+.page-comments {
 
+  .page-comment .page-comment-main,
 
+  .page-comment-form .comment-form-main {
 
+    background-color: $bgcolor-global;
 
+
 
+    &:before {
 
+      border-right-color: $bgcolor-global;
 
+    }
 
+
 
+    .nav.nav-tabs {
 
+      > li > a.active {
 
+        background: transparent;
 
+        border-bottom: solid 1px darken($bgcolor-global, 4%);
 
+        border-bottom-color: darken($bgcolor-global, 4%);
 
+      }
 
+    }
 
+  }
 
+}
 
+
 
+/*
 
+ * GROWI search result
 
+ */
 
+.search-result-base {
 
+  .grw-search-page-nav {
 
+    background-color: $bgcolor-subnav;
 
+  }
 
+  .search-control {
 
+    background-color: $bgcolor-global;
 
+  }
 
+  .page-list {
 
+    .highlighted-keyword {
 
+      background: linear-gradient(transparent 60%, $bgcolor-keyword-highlighted 60%);
 
+    }
 
+  }
 
+}
 
+
 
+/*
 
+ * react bootstrap typeahead
 
+ */
 
+mark.rbt-highlight-text {
 
+  // Temporarily the highlight color is black
 
+  color: black;
 
+}
 
+
 
+/*
 
+ * GROWI page content footer
 
+ */
 
+.page-content-footer {
 
+  background-color: darken($bgcolor-global, 2%);
 
+  border-top-color: $border-color-theme;
 
+}
 
+
 
+/*
 
+ * GROWI admin page #layoutOptions #themeOptions
 
+ */
 
+.admin-page {
 
+  #layoutOptions {
 
+    .customize-layout-card {
 
+      &.border-active {
 
+        border-color: $color-theme-color-box;
 
+      }
 
+    }
 
+  }
 
+
 
+  #themeOptions {
 
+    .theme-option-container.active {
 
+      .theme-option-name {
 
+        color: $color-global;
 
+      }
 
+      a {
 
+        background-color: $color-theme-color-box;
 
+        border-color: $color-theme-color-box;
 
+      }
 
+    }
 
+  }
 
+}
 
+
 
+/*
 
+ * HackMd
 
+ */
 
+.bg-box {
 
+  background-color: $bgcolor-global;
 
+}
 
+
 
+.grw-fab {
 
+  .btn-create-page {
 
+    fill: color-yiq($primary);
 
+  }
 
+
 
+  .btn-scroll-to-top {
 
+    fill: $gray-900;
 
+  }
 
+}
 
+
 
+/*
 
+  Slack Integration
 
+*/
 
+.selecting-bot-type {
 
+  .bot-type-disc {
 
+    width: 20px;
 
+  }
 
+}
 
+
 
+/*
 
+  In App Notification
 
+*/
 
+.grw-unopend-notification {
 
+  width: 7px;
 
+  height: 7px;
 
+  background-color: $primary;
 
+}
 
+
 
+/*
 
+Emoji picker modal
 
+*/
 
+.emoji-picker-modal {
 
+  background-color: transparent !important;
 
+}

+ 29 - 0
packages/preset-themes/src/theme/_reboot-bootstrap-border-colors.scss
Просмотреть файл 

@@ -0,0 +1,29 @@
 
+@use '../bootstrap/init' as *;
 
+
 
+//
 
+// Border
 
+//
 
+
 
+.border {
 
+  border: $border-width solid $border-color !important;
 
+}
 
+
 
+.border-top {
 
+  border-top: $border-width solid $border-color !important;
 
+}
 
+
 
+.border-right {
 
+  border-right: $border-width solid $border-color !important;
 
+}
 
+
 
+.border-bottom {
 
+  border-bottom: $border-width solid $border-color !important;
 
+}
 
+
 
+.border-left {
 
+  border-left: $border-width solid $border-color !important;
 
+}
 
+
 
+.border-info {
 
+  border-color: $info !important;
 
+}

+ 21 - 0
packages/preset-themes/src/theme/_reboot-bootstrap-buttons.scss
Просмотреть файл 

@@ -0,0 +1,21 @@
 
+.btn-link {
 
+  color: $link-color;
 
+  svg {
 
+    fill: $link-color;
 
+  }
 
+
 
+  @include hover() {
 
+    color: $link-hover-color;
 
+    svg {
 
+      fill: $link-hover-color;
 
+    }
 
+  }
 
+
 
+  &:disabled,
 
+  &.disabled {
 
+    color: $btn-link-disabled-color;
 
+    svg {
 
+      fill: $btn-link-disabled-color;
 
+    }
 
+  }
 
+}

+ 60 - 0
packages/preset-themes/src/theme/_reboot-bootstrap-colors.scss
Просмотреть файл 

@@ -0,0 +1,60 @@
 
+//
 
+//
 
+// Apply partially
 
+//   https://github.com/twbs/bootstrap/blob/v4.5.0/scss/_reboot.scss
 
+//
 
+//
 
+
 
+// stylelint-disable at-rule-no-vendor-prefix, declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
 
+
 
+// Body
 
+//
 
+// 1. Remove the margin in all browsers.
 
+// 2. As a best practice, apply a default `background-color`.
 
+// 3. Set an explicit initial text-align value so that we can later use
 
+//    the `inherit` value on things like `<th>` elements.
 
+
 
+& {
 
+  color: $body-color;
 
+  background-color: $body-bg; // 2
 
+
 
+  svg {
 
+    fill: $body-color;
 
+  }
 
+}
 
+
 
+// Links
 
+
 
+a {
 
+  color: $link-color;
 
+  text-decoration: $link-decoration;
 
+  background-color: transparent; // Remove the gray background on active links in IE 10.
 
+
 
+  svg {
 
+    fill: $link-color;
 
+  }
 
+
 
+  @include hover() {
 
+    color: $link-hover-color;
 
+    text-decoration: $link-hover-decoration;
 
+
 
+    svg {
 
+      fill: $link-hover-color;
 
+    }
 
+  }
 
+}
 
+
 
+// And undo these styles for placeholder links/named anchors (without href).
 
+// It would be more straightforward to just use a[href] in previous block, but that
 
+// causes specificity issues in many other styles that are too complex to fix.
 
+// See https://github.com/twbs/bootstrap/issues/19402
 
+
 
+// a:not([href]) {
 
+//   color: inherit;
 
+//   text-decoration: none;
 
+
 
+//   @include hover() {
 
+//     color: inherit;
 
+//     text-decoration: none;
 
+//   }
 
+// }

+ 37 - 0
packages/preset-themes/src/theme/_reboot-bootstrap-dropdown.scss
Просмотреть файл 

@@ -0,0 +1,37 @@
 
+@use '../bootstrap/init' as *;
 
+
 
+.dropdown-menu {
 
+  color: $dropdown-color;
 
+  svg {
 
+    fill: $dropdown-color;
 
+  }
 
+
 
+  background-color: $dropdown-bg;
 
+}
 
+
 
+.dropdown-item {
 
+  color: $dropdown-link-color;
 
+  svg {
 
+    fill: $dropdown-link-color;
 
+  }
 
+
 
+  @include hover-focus() {
 
+    color: $dropdown-link-hover-color;
 
+    svg {
 
+      fill: $dropdown-link-hover-color;
 
+    }
 
+
 
+    @include gradient-bg($dropdown-link-hover-bg);
 
+  }
 
+
 
+  &:active,
 
+  &.active,
 
+  &:active:hover,
 
+  &.active:hover {
 
+    color: $dropdown-link-active-color;
 
+    background-color: $dropdown-link-active-bg;
 
+    svg {
 
+      fill: $dropdown-link-active-color;
 
+    }
 
+  }
 
+}

+ 51 - 0
packages/preset-themes/src/theme/_reboot-bootstrap-nav.scss
Просмотреть файл 

@@ -0,0 +1,51 @@
 
+//
 
+//
 
+// Apply partially
 
+//   https://github.com/twbs/bootstrap/blob/v4.5.0/scss/_nav.scss
 
+//
 
+//
 
+
 
+.nav-link {
 
+  // Disabled state lightens text
 
+  &.disabled {
 
+    color: $nav-link-disabled-color;
 
+    svg {
 
+      fill: $nav-link-disabled-color;
 
+    }
 
+  }
 
+}
 
+
 
+//
 
+// Tabs
 
+//
 
+
 
+.nav-tabs {
 
+  border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
 
+
 
+  .nav-link {
 
+    border: $nav-tabs-border-width solid transparent;
 
+    @include border-top-radius($nav-tabs-border-radius);
 
+
 
+    @include hover-focus() {
 
+      border-color: $nav-tabs-link-hover-border-color;
 
+    }
 
+
 
+    &.disabled {
 
+      color: $nav-link-disabled-color;
 
+      background-color: transparent;
 
+      border-color: transparent;
 
+    }
 
+  }
 
+
 
+  .nav-link.active,
 
+  .nav-item.show .nav-link {
 
+    color: $nav-tabs-link-active-color;
 
+    background-color: $nav-tabs-link-active-bg;
 
+    border-color: $nav-tabs-link-active-border-color;
 
+  }
 
+
 
+  .dropdown-menu {
 
+    // Remove the top rounded corners here since there is a hard edge above the menu
 
+    @include border-top-radius(0);
 
+  }
 
+}

+ 74 - 0
packages/preset-themes/src/theme/_reboot-bootstrap-tables.scss
Просмотреть файл 

@@ -0,0 +1,74 @@
 
+@use '../bootstrap/init' as *;
 
+
 
+//
 
+//
 
+// Apply partially
 
+//   https://github.com/twbs/bootstrap/blob/v4.5.0/scss/_tables.scss
 
+//
 
+//
 
+
 
+.table {
 
+  color: $table-color;
 
+  background-color: $table-bg; // Reset for nesting within parents with `background-color`.
 
+
 
+  th,
 
+  td {
 
+    border-top-color: $table-border-color;
 
+  }
 
+
 
+  thead th {
 
+    border-bottom-color: $table-border-color;
 
+  }
 
+
 
+  tbody + tbody {
 
+    border-top-color: $table-border-color;
 
+  }
 
+}
 
+
 
+.table-bordered {
 
+  border-color: $table-border-color;
 
+
 
+  th,
 
+  td {
 
+    border-color: $table-border-color;
 
+  }
 
+}
 
+
 
+.table-hover {
 
+  tbody tr {
 
+    @include hover() {
 
+      color: $table-hover-color;
 
+      background-color: $table-hover-bg;
 
+    }
 
+  }
 
+}
 
+
 
+.table-dark {
 
+  color: $table-dark-color;
 
+  background-color: $table-dark-bg;
 
+
 
+  th,
 
+  td,
 
+  thead th {
 
+    border-color: $table-dark-border-color;
 
+  }
 
+
 
+  &.table-bordered {
 
+    border: 0;
 
+  }
 
+
 
+  &.table-striped {
 
+    tbody tr:nth-of-type(#{$table-striped-order}) {
 
+      background-color: $table-dark-accent-bg;
 
+    }
 
+  }
 
+
 
+  &.table-hover {
 
+    tbody tr {
 
+      @include hover() {
 
+        color: $table-dark-hover-color;
 
+        background-color: $table-dark-hover-bg;
 
+      }
 
+    }
 
+  }
 
+}

+ 3 - 0
packages/preset-themes/src/theme/_reboot-bootstrap-text.scss
Просмотреть файл 

@@ -0,0 +1,3 @@
 
+.text-muted {
 
+  color: $text-muted !important;
 
+}

+ 92 - 0
packages/preset-themes/src/theme/_reboot-bootstrap-theme-colors.scss
Просмотреть файл 

@@ -0,0 +1,92 @@
 
+@use '../bootstrap/init' as *;
 
+@use '../atoms/mixins/buttons' as mixins-buttons;
 
+
 
+@each $color, $value in $theme-colors {
 
+  @include bg-variant('.bg-#{$color}', $value);
 
+}
 
+
 
+@each $color, $value in $theme-colors {
 
+  .border-#{$color} {
 
+    border-color: $value !important;
 
+  }
 
+}
 
+
 
+@each $color, $value in $theme-colors {
 
+  @include text-emphasis-variant('.text-#{$color}', $value, true);
 
+}
 
+
 
+@each $color, $value in $theme-colors {
 
+  .btn-#{$color} {
 
+    @include button-variant($value, $value);
 
+    @include mixins-buttons.button-svg-icon-variant($value, $value);
 
+    box-shadow: none !important;
 
+  }
 
+}
 
+
 
+@each $color, $value in $theme-colors {
 
+  .btn-outline-#{$color} {
 
+    @include button-outline-variant($value, $color-hover: $value, $active-background: rgba($value, 0.1), $active-border: $value);
 
+    @include mixins-buttons.button-outline-svg-icon-variant($value, $color-hover: $value);
 
+
 
+    &:not(:disabled):not(.disabled):active,
 
+    &:not(:disabled):not(.disabled).active {
 
+      color: $value;
 
+      background-color: rgba($value, 0.1);
 
+      border-color: $value;
 
+    }
 
+
 
+    box-shadow: none !important;
 
+  }
 
+
 
+  // separate style: https://github.com/weseek/growi/pull/6804
 
+  .show > .btn-outline-#{$color}.dropdown-toggle {
 
+    color: $value;
 
+    background-color: rgba($value, 0.1);
 
+    border-color: $value;
 
+  }
 
+}
 
+
 
+@each $theme-color, $color in $theme-colors {
 
+  .custom-checkbox-#{$theme-color} {
 
+    .custom-control-label::before {
 
+      border-color: $input-border-color;
 
+      transition: 0.3s ease-in-out;
 
+    }
 
+    .custom-control-input:checked + .custom-control-label::before {
 
+      background-color: $color;
 
+      border-color: $color;
 
+    }
 
+    .custom-control-input:checked + .custom-control-label::after {
 
+      color: $bgcolor-global;
 
+    }
 
+    .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
 
+      color: $bgcolor-global;
 
+      background-color: $color;
 
+      border-color: $color;
 
+    }
 
+    .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
 
+      color: $bgcolor-global;
 
+      background-color: $bgcolor-global;
 
+      border-color: $input-focus-border-color;
 
+    }
 
+  }
 
+}
 
+
 
+@each $color, $value in $theme-colors {
 
+  .alert-#{$color} {
 
+    @include alert-variant(
 
+      theme-color-level($color, $alert-bg-level),
 
+      theme-color-level($color, $alert-border-level),
 
+      theme-color-level($color, $alert-color-level)
 
+    );
 
+  }
 
+}
 
+
 
+@each $color, $value in $theme-colors {
 
+  .badge-#{$color} {
 
+    @include badge-variant($value);
 
+  }
 
+  a.badge-#{$color} {
 
+    @include badge-variant($value);
 
+  }
 
+}

+ 15 - 0
packages/preset-themes/src/theme/_reboot-toastr-colors.scss
Просмотреть файл 

@@ -0,0 +1,15 @@
 
+.toast-success {
 
+  background-color: $success;
 
+}
 
+
 
+.toast-error {
 
+  background-color: $danger;
 
+}
 
+
 
+.toast-info {
 
+  background-color: $info;
 
+}
 
+
 
+.toast-warning {
 
+  background-color: $warning;
 
+}

+ 9 - 0
packages/preset-themes/src/theme/mixins/_count-badge.scss
Просмотреть файл 

@@ -0,0 +1,9 @@
 
+@mixin count-badge($color, $bg-color, $min-width: initial) {
 
+  min-width: $min-width;
 
+  padding: 0.1rem 0.5rem;
 
+  font-family: var(--font-family-monospace);
 
+  font-size: 12px;
 
+  font-weight: 500;
 
+  color: $color;
 
+  background-color: $bg-color;
 
+}

+ 70 - 0
packages/preset-themes/src/theme/mixins/_list-group.scss
Просмотреть файл 

@@ -0,0 +1,70 @@
 
+@use '../../bootstrap/init' as bs;
 
+@use '../../mixins';
 
+@use './count-badge';
 
+
 
+@mixin override-list-group-item($color, $bgcolor, $color-hover: $color, $bgcolor-hover: $bgcolor, $color-active: $color, $bgcolor-active: $bgcolor) {
 
+  .list-group {
 
+    .list-group-item {
 
+      color: $color;
 
+      background-color: $bgcolor;
 
+      border-color: $border-color-global;
 
+
 
+      &.list-group-item-action {
 
+        &:hover {
 
+          background-color: $bgcolor-hover;
 
+        }
 
+        &.active {
 
+          color: $color-active;
 
+          background-color: $bgcolor-active;
 
+        }
 
+      }
 
+    }
 
+  }
 
+}
 
+
 
+@mixin override-list-group-item-for-pagetree($color, $bgcolor-hover, $bgcolor-active, $btn-color, $btn-color-hover, $btn-bgcolor-hover, $btn-bgcolor-active) {
 
+  .grw-pagetree-is-over {
 
+    background: $bgcolor-hover;
 
+  }
 
+  .list-group-item {
 
+    color: $color;
 
+    background-color: transparent;
 
+    border-color: $border-color-global;
 
+
 
+    .grw-count-badge {
 
+      @include count-badge.count-badge($btn-color, $bgcolor-hover, 28px);
 
+    }
 
+
 
+    .btn.btn-page-item-control {
 
+      color: $btn-color;
 
+      background-color: transparent;
 
+      @include bs.hover() {
 
+        color: $btn-color-hover;
 
+        background-color: $btn-bgcolor-hover;
 
+      }
 
+      &:not(:disabled):not(.disabled):active,
 
+      &:not(:disabled):not(.disabled).active {
 
+        color: $btn-color-hover;
 
+        background-color: $btn-bgcolor-active;
 
+      }
 
+    }
 
+
 
+    &.grw-pagetree-current-page-item {
 
+      background: $bgcolor-hover;
 
+    }
 
+
 
+    &.list-group-item-action {
 
+      &:hover {
 
+        background-color: $bgcolor-hover;
 
+      }
 
+      &:active {
 
+        background-color: $bgcolor-active;
 
+      }
 
+    }
 
+    .grw-pagetree-title-anchor {
 
+      .grw-sidebar-text-muted {
 
+        color: rgba(desaturate($color, 50%), 0.6);
 
+      }
 
+    }
 
+  }
 
+}

+ 22 - 0
packages/preset-themes/src/theme/mixins/_page-editor-mode-manager.scss
Просмотреть файл 

@@ -0,0 +1,22 @@
 
+@mixin btn-page-editor-mode-manager($textColor, $borderColor, $bgColorHoverAndActive, $bgColor: white) {
 
+  color: $textColor;
 
+  background-color: $bgColor;
 
+  border-color: $borderColor;
 
+
 
+  &:not(:first-child) {
 
+    &::before {
 
+      border-left-color: $borderColor;
 
+    }
 
+  }
 
+
 
+  &:hover,
 
+  &:active,
 
+  &.active {
 
+    color: $textColor;
 
+    background-color: $bgColorHoverAndActive;
 
+    border-color: $borderColor;
 
+    &::after {
 
+      border-color: $bgColorHoverAndActive;
 
+    }
 
+  }
 
+}

+ 34 - 0
packages/preset-themes/src/theme/mixins/_tables.scss
Просмотреть файл 

@@ -0,0 +1,34 @@
 
+//== Table
 
+// $table-variants: (
 
+//   'light': $light,
 
+//   'dark': $dark,
 
+// );
 
+
 
+// remove when master version is released
 
+// show https://github.com/twbs/bootstrap/blob/28cb1ff2b23253293601c51aff434c39b461025e/scss/mixins/_table-variants.scss
 
+// @mixin table-variant($state, $background) {
 
+//   .table-#{$state} {
 
+//     $table-hover-bg-factor: 0.075 !default;
 
+//     $table-striped-bg-factor: 0.05 !default;
 
+//     $body-bg: $white !default;
 
+//     $table-active-bg-factor: 0.1 !default;
 
+//     $table-border-factor: 0.1 !default;
 
+
 
+//     $color: color-contrast(mix(rgba($background, 1), $body-bg, opacity($background) * 100));
 
+//     $color: gray;
 
+//     $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
 
+//     $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
 
+//     $active-bg: mix($color, $background, percentage($table-active-bg-factor));
 
+
 
+//     --bs-table-bg: #{$background};
 
+//     --bs-table-striped-bg: #{$striped-bg};
 
+//     --bs-table-striped-color: #{color-contrast($striped-bg)};
 
+//     --bs-table-active-bg: #{$active-bg};
 
+//     --bs-table-active-color: #{color-contrast($active-bg)};
 
+//     --bs-table-hover-bg: #{$hover-bg};
 
+//     --bs-table-hover-color: #{color-contrast($hover-bg)};
 
+
 
+//     color: $color;
 
+//     border-color: mix($color, $background, percentage($table-border-factor));
 
+//   }
 
+// }

+ 1 - 1
packages/preset-themes/tsconfig.json
Просмотреть файл 

@@ -16,6 +16,6 @@
 
     "noEmit": true,
 
     "jsx": "react-jsx"
 
   },
 
-  "include": ["src", "client-entry.tsx"],
 
+  "include": ["src"],
 
   "references": [{ "path": "./tsconfig.node.json" }]
 
 }

+ 1 - 1
packages/preset-themes/vite.config.ts
Просмотреть файл 

@@ -5,7 +5,7 @@ export default defineConfig({
 
   build: {
 
     manifest: true,
 
     rollupOptions: {
 
-      input: ['/client-entry.tsx'],
 
+      input: ['/src/halloween.tsx'],
 
     },
 
   },
 
 });