diff --git a/_obsolete/packages/.eslintignore b/_obsolete/packages/.eslintignore deleted file mode 100644 index 91224e5de82..00000000000 --- a/_obsolete/packages/.eslintignore +++ /dev/null @@ -1 +0,0 @@ -**/* diff --git a/_obsolete/packages/hackmd/.eslintignore b/_obsolete/packages/hackmd/.eslintignore deleted file mode 100644 index f3e652be545..00000000000 --- a/_obsolete/packages/hackmd/.eslintignore +++ /dev/null @@ -1 +0,0 @@ -/dist/** diff --git a/_obsolete/packages/hackmd/.gitignore b/_obsolete/packages/hackmd/.gitignore deleted file mode 100644 index 9b1c8b133c9..00000000000 --- a/_obsolete/packages/hackmd/.gitignore +++ /dev/null @@ -1 +0,0 @@ -/dist diff --git a/_obsolete/packages/hackmd/package.json b/_obsolete/packages/hackmd/package.json deleted file mode 100644 index 72277050406..00000000000 --- a/_obsolete/packages/hackmd/package.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "name": "@growi/hackmd", - "version": "7.0.0-RC.0", - "description": "GROWI js and css files to use hackmd", - "license": "MIT", - "type": "module", - "main": "dist/index.cjs", - "module": "dist/index.js", - "types": "dist/index.d.ts", - "scripts": { - "build": "vite build", - "clean": "shx rm -rf dist", - "dev": "vite build --mode dev", - "watch": "yarn dev -w --emptyOutDir=false", - "lint:js": "yarn eslint **/*.{js,ts}", - "lint:typecheck": "tsc", - "lint": "npm-run-all -p lint:*", - "version": "yarn version --no-git-tag-version --preid=RC" - }, - "dependencies": {}, - "devDependencies": { - "penpal": "^4.0.0", - "throttle-debounce": "^5.0.0" - } -} diff --git a/_obsolete/packages/hackmd/src/hackmd-agent.js b/_obsolete/packages/hackmd/src/hackmd-agent.js deleted file mode 100644 index 3642b23c024..00000000000 --- a/_obsolete/packages/hackmd/src/hackmd-agent.js +++ /dev/null @@ -1,152 +0,0 @@ -/** - * GROWI agent for HackMD - * - * This file will be transpiled as a single JS - * and should be load from HackMD head via 'routes/hackmd.js' route - * - * USAGE: - * - * - * @author Yuki Takei - */ -import connectToParent from 'penpal/lib/connectToParent'; -import { debounce } from 'throttle-debounce'; - -const DEBUG_PENPAL = false; - -/* eslint-disable no-console */ - -const allowedOrigin = '<%= origin %>'; // will be replaced by ejs - - -/** - * return the value of CodeMirror - */ -function getValueOfCodemirror() { - // get CodeMirror instance - const editor = window.editor; - return editor.doc.getValue(); -} - -/** - * set the specified document to CodeMirror - * @param {string} value - */ -function setValueToCodemirror(value) { - // get CodeMirror instance - const editor = window.editor; - editor.doc.setValue(value); -} - -/** - * set the specified document to CodeMirror on window loaded - * @param {string} value - */ -function setValueToCodemirrorOnInit(newValue) { - if (window.cmClient != null) { - setValueToCodemirror(newValue); - return; - } - - const intervalId = setInterval(() => { - if (window.cmClient != null) { - clearInterval(intervalId); - setValueToCodemirror(newValue); - } - }, 250); - -} - -/** - * postMessage to GROWI to notify body changes - * @param {string} body - */ -function postParentToNotifyBodyChanges(body) { - window.growi.notifyBodyChanges(body); -} -// generate debounced function -const debouncedPostParentToNotifyBodyChanges = debounce(800, postParentToNotifyBodyChanges); - -/** - * postMessage to GROWI to save with shortcut - * @param {string} document - */ -function postParentToSaveWithShortcut(document) { - window.growi.saveWithShortcut(document); -} - -function addEventListenersToCodemirror() { - // get CodeMirror instance - const codemirror = window.CodeMirror; - // get CodeMirror editor instance - const editor = window.editor; - - // e.g. 404 not found - if (codemirror == null || editor == null) { - return; - } - - // == change event - editor.on('change', (cm, change) => { - if (change.origin === 'ignoreHistory') { - // do nothing because this operation triggered by other user - return; - } - debouncedPostParentToNotifyBodyChanges(cm.doc.getValue()); - }); - - // == save event - // Reset save commands and Cmd-S/Ctrl-S shortcuts that initialized by HackMD - codemirror.commands.save = function(cm) { - postParentToSaveWithShortcut(cm.doc.getValue()); - }; - delete editor.options.extraKeys['Cmd-S']; - delete editor.options.extraKeys['Ctrl-S']; -} - -function connectToParentWithPenpal() { - const connection = connectToParent({ - parentOrigin: allowedOrigin, - // Methods child is exposing to parent - methods: { - getValue() { - return getValueOfCodemirror(); - }, - setValue(newValue) { - setValueToCodemirror(newValue); - }, - setValueOnInit(newValue) { - setValueToCodemirrorOnInit(newValue); - }, - }, - debug: DEBUG_PENPAL, - }); - connection.promise - .then((parent) => { - window.growi = parent; - }) - .catch((err) => { - console.log(err); - }); -} - -/** - * main - */ -(function() { - // check HackMD is in iframe - if (window === window.parent) { - console.log('[GROWI] Loading agent for HackMD is not processed because currently not in iframe'); - return; - } - - console.log('[HackMD] Loading GROWI agent for HackMD...'); - - window.addEventListener('load', () => { - addEventListenersToCodemirror(); - }); - - connectToParentWithPenpal(); - - console.log('[HackMD] GROWI agent for HackMD has successfully loaded.'); -}()); diff --git a/_obsolete/packages/hackmd/src/hackmd-styles.ts b/_obsolete/packages/hackmd/src/hackmd-styles.ts deleted file mode 100644 index 3d63f3d21ee..00000000000 --- a/_obsolete/packages/hackmd/src/hackmd-styles.ts +++ /dev/null @@ -1,41 +0,0 @@ -/** - * GROWI styles loader for HackMD - * - * This file will be transpiled as a single JS - * and should be load from HackMD head via 'routes/hackmd.js' route - * - * USAGE: - * - * - * @author Yuki Takei - */ - -/* eslint-disable no-console */ - -const styles = '<%= styles %>'; // will be replaced by ejs - -/** - * Insert link tag to load style file - */ -function insertStyle() { - const element = document.createElement('style'); - element.appendChild(document.createTextNode(unescape(styles))); - document.getElementsByTagName('head')[0].appendChild(element); -} - -/** - * main - */ -(function() { - // check HackMD is in iframe - if (window === window.parent) { - console.log('[GROWI] Loading styles for HackMD is not processed because currently not in iframe'); - return; - } - - console.log('[HackMD] Loading GROWI styles for HackMD...'); - - insertStyle(); - - console.log('[HackMD] GROWI styles for HackMD has successfully loaded.'); -}()); diff --git a/_obsolete/packages/hackmd/src/index.ts b/_obsolete/packages/hackmd/src/index.ts deleted file mode 100644 index 2ba63673d4b..00000000000 --- a/_obsolete/packages/hackmd/src/index.ts +++ /dev/null @@ -1,16 +0,0 @@ -import fs from 'node:fs'; -import path from 'node:path'; - -const isProduction = process.env.NODE_ENV === 'production'; -const dirPath = isProduction ? '.' : '../dist'; -const stylesJSFile = fs.readFileSync(path.resolve(__dirname, `${dirPath}/hackmd-styles.js`)); -const agentJSFile = fs.readFileSync(path.resolve(__dirname, `${dirPath}/hackmd-agent.js`)); -const stylesCSSFile = fs.readFileSync(path.resolve(__dirname, `${dirPath}/style.css`)); - -// export to app as string -const hackmdFiles = { - stylesJS: stylesJSFile.toString(), - agentJS: agentJSFile.toString(), - stylesCSS: stylesCSSFile.toString().replace(/(\r\n|\n|\r)/gm, ''), // https://stackoverflow.com/questions/10805125/how-to-remove-all-line-breaks-from-a-string -}; -export default hackmdFiles; diff --git a/_obsolete/packages/hackmd/src/style.scss b/_obsolete/packages/hackmd/src/style.scss deleted file mode 100644 index 2c1194756d9..00000000000 --- a/_obsolete/packages/hackmd/src/style.scss +++ /dev/null @@ -1,21 +0,0 @@ -.navbar-header { - .navbar-brand { - display: none; - } -} - -.navbar-form { - margin-left: 15px; -} - -.navbar-right { - .ui-new, .ui-publish { - display: none; - } -} - -.CodeMirror pre.CodeMirror-line { - font-family: Osaka-Mono, 'MS Gothic', Monaco, Menlo, Consolas, 'Courier New', monospace; - font-size: 14px; - line-height: 20px; -} diff --git a/_obsolete/packages/hackmd/tsconfig.json b/_obsolete/packages/hackmd/tsconfig.json deleted file mode 100644 index 79854e751fd..00000000000 --- a/_obsolete/packages/hackmd/tsconfig.json +++ /dev/null @@ -1,14 +0,0 @@ -{ - "$schema": "http://json.schemastore.org/tsconfig", - "extends": "../../tsconfig.base.json", - "compilerOptions": { - "isolatedModules": false, - - "baseUrl": ".", - "paths": { - } - }, - "include": [ - "src" - ] -} diff --git a/_obsolete/packages/hackmd/vite.config.js b/_obsolete/packages/hackmd/vite.config.js deleted file mode 100644 index 8398a68f214..00000000000 --- a/_obsolete/packages/hackmd/vite.config.js +++ /dev/null @@ -1,30 +0,0 @@ -import { defineConfig } from 'vite'; -import dts from 'vite-plugin-dts'; - - -// https://vitejs.dev/config/ -export default defineConfig({ - plugins: [ - dts({ copyDtsFiles: true }), - ], - build: { - outDir: 'dist', - lib: { - entry: [ - 'src/index.ts', - 'src/hackmd-styles.ts', - 'src/hackmd-agent.js', - 'src/style.scss', - ], - name: 'hackmd-libs', - formats: ['es', 'cjs'], - }, - rollupOptions: { - external: [ - 'node:fs', - 'node:path', - ], - }, - sourcemap: true, - }, -}); diff --git a/apps/app/_obsolete/src/client/services/side-effects/hackmd-draft-updated.ts b/apps/app/_obsolete/src/client/services/side-effects/hackmd-draft-updated.ts deleted file mode 100644 index 3699fb52f0c..00000000000 --- a/apps/app/_obsolete/src/client/services/side-effects/hackmd-draft-updated.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { useCallback, useEffect } from 'react'; - -import { SocketEventName } from '~/interfaces/websocket'; -import { useIsHackmdDraftUpdatingInRealtime } from '~/stores/hackmd'; -import { useCurrentPageId } from '~/stores/page'; -import { useGlobalSocket } from '~/stores/websocket'; - -export const useHackmdDraftUpdatedEffect = (): void => { - - const { data: currentPageId } = useCurrentPageId(); - const { mutate: mutateIsHackmdDraftUpdatingInRealtime } = useIsHackmdDraftUpdatingInRealtime(); - - const { data: socket } = useGlobalSocket(); - - const setIsHackmdDraftUpdatingInRealtime = useCallback((data) => { - const { s2cMessagePageUpdated } = data; - if (s2cMessagePageUpdated.pageId === currentPageId) { - mutateIsHackmdDraftUpdatingInRealtime(true); - } - }, [currentPageId, mutateIsHackmdDraftUpdatingInRealtime]); - - // listen socket for hackmd saved - useEffect(() => { - - if (socket == null) { return } - - socket.on(SocketEventName.EditingWithHackmd, setIsHackmdDraftUpdatingInRealtime); - - return () => { - socket.off(SocketEventName.EditingWithHackmd, setIsHackmdDraftUpdatingInRealtime); - }; - }, [setIsHackmdDraftUpdatingInRealtime, socket]); -}; diff --git a/apps/app/_obsolete/src/client/util/codemirror/autorefresh.ext.js b/apps/app/_obsolete/src/client/util/codemirror/autorefresh.ext.js deleted file mode 100644 index fc0d32e0fbe..00000000000 --- a/apps/app/_obsolete/src/client/util/codemirror/autorefresh.ext.js +++ /dev/null @@ -1,51 +0,0 @@ -/** - * extends codemirror/addon/display/autorefresh - * - * @author Yuki Takei - * @see https://codemirror.net/addon/display/autorefresh.js - * @see https://github.com/scniro/react-codemirror2/issues/83#issuecomment-398825212 - */ -/* eslint-disable */ - -// CodeMirror, copyright (c) by Marijn Haverbeke and others -// Distributed under an MIT license: http://codemirror.net/LICENSE - -(function(mod) { - mod(require("codemirror")); -})(function(CodeMirror) { - "use strict" - - CodeMirror.defineOption("autoRefresh", false, function(cm, val) { - if (cm.state.autoRefresh) { - stopListening(cm, cm.state.autoRefresh) - cm.state.autoRefresh = null - } - if (val && (val.force || cm.display.wrapper.offsetHeight == 0)) - startListening(cm, cm.state.autoRefresh = {delay: val.delay || 250}) - }) - - function startListening(cm, state) { - function check() { - if (cm.display.wrapper.offsetHeight) { - stopListening(cm, state) - if (cm.display.lastWrapHeight != cm.display.wrapper.clientHeight) - cm.refresh() - } else { - state.timeout = setTimeout(check, state.delay) - } - } - state.timeout = setTimeout(check, state.delay) - state.hurry = function() { - clearTimeout(state.timeout) - state.timeout = setTimeout(check, 50) - } - CodeMirror.on(window, "mouseup", state.hurry) - CodeMirror.on(window, "keyup", state.hurry) - } - - function stopListening(_cm, state) { - clearTimeout(state.timeout) - CodeMirror.off(window, "mouseup", state.hurry) - CodeMirror.off(window, "keyup", state.hurry) - } -}); diff --git a/apps/app/_obsolete/src/client/util/codemirror/drawio-fold.ext.js b/apps/app/_obsolete/src/client/util/codemirror/drawio-fold.ext.js deleted file mode 100644 index 3a39e478c61..00000000000 --- a/apps/app/_obsolete/src/client/util/codemirror/drawio-fold.ext.js +++ /dev/null @@ -1,47 +0,0 @@ -/* eslint-disable */ - -import mdu from '../../../components/PageEditor/MarkdownDrawioUtil.js'; - -(function(mod) { - mod(require("codemirror")); -})(function(CodeMirror) { - "use strict" - - CodeMirror.registerGlobalHelper('fold', 'drawio', function (mode, cm) { - return true; - }, function(cm, start) { - function isBeginningOfDrawio(lineNo) { - let line = cm.getLine(lineNo); - let match = mdu.lineBeginPartOfDrawioRE.exec(line); - if (match) { - return true; - } - return false; - } - function isEndOfDrawio(lineNo) { - let line = cm.getLine(lineNo); - let match = mdu.lineEndPartOfDrawioRE.exec(line); - if (match) { - return true; - } - return false; - } - - let drawio = isBeginningOfDrawio(start.line); - if (drawio === false) { return; } - - let lastLine = cm.lastLine(); - let end = start.line; - while(end < lastLine) { - end += 1; - if (isEndOfDrawio(end)) { - break; - } - } - - return { - from: CodeMirror.Pos(start.line, cm.getLine(start.line).length), - to: CodeMirror.Pos(end, cm.getLine(end).length) - }; - }); -}); diff --git a/apps/app/_obsolete/src/client/util/codemirror/gfm-growi.mode.js b/apps/app/_obsolete/src/client/util/codemirror/gfm-growi.mode.js deleted file mode 100644 index fc1944881df..00000000000 --- a/apps/app/_obsolete/src/client/util/codemirror/gfm-growi.mode.js +++ /dev/null @@ -1,19 +0,0 @@ -// https://discuss.codemirror.net/t/cm-header-margin-padding-height/75/5 -window.CodeMirror.defineMode('gfm-growi', (cmConfig, modeCfg) => { - // based on Markdown (GitHub-flavour) mode - // https://codemirror.net/doc/manual.html#option_mode - // https://codemirror.net/mode/index.html - modeCfg.name = 'gfm'; - modeCfg.highlightFormatting = true; - const mode = window.CodeMirror.getMode(cmConfig, modeCfg); - - const origToken = mode.token; - mode.token = function(stream, state) { - let classes = origToken(stream, state) || ''; - // https://regex101.com/r/Fep0w2/1 - classes = classes.replace(/(^| )header(\S*)/g, '$1header$2 line-grw-cm-header-line'); - return /^\s*$/.test(classes) ? null : classes; - }; - - return mode; -}); diff --git a/apps/app/_obsolete/src/client/util/codemirror/update-display-util.ext.js b/apps/app/_obsolete/src/client/util/codemirror/update-display-util.ext.js deleted file mode 100644 index b23a40a8839..00000000000 --- a/apps/app/_obsolete/src/client/util/codemirror/update-display-util.ext.js +++ /dev/null @@ -1,41 +0,0 @@ -import { sawCollapsedSpans } from 'codemirror/src/line/saw_special_spans'; -import { getLine } from 'codemirror/src/line/utils_line'; -import { heightAtLine, visualLineEndNo, visualLineNo } from 'codemirror/src/line/spans'; -import { DisplayUpdate } from 'codemirror/src/display/update_display'; -import { adjustView } from 'codemirror/src/display/view_tracking'; - -class UpdateDisplayUtil { - - /** - * Transplant 'updateDisplayIfNeeded' method to fix weseek/growi#703 - * - * @see https://github.com/weseek/growi/issues/703 - * @see https://github.com/codemirror/CodeMirror/blob/5.42.0/src/display/update_display.js#L125 - * - * @param {CodeMirror} cm - */ - static forceUpdateViewOffset(cm) { - const doc = cm.doc; - const display = cm.display; - - const update = new DisplayUpdate(cm, cm.getViewport()); - - // Compute a suitable new viewport (from & to) - const end = doc.first + doc.size; - let from = Math.max(update.visible.from - cm.options.viewportMargin, doc.first); - let to = Math.min(end, update.visible.to + cm.options.viewportMargin); - if (display.viewFrom < from && from - display.viewFrom < 20) from = Math.max(doc.first, display.viewFrom); - if (display.viewTo > to && display.viewTo - to < 20) to = Math.min(end, display.viewTo); - if (sawCollapsedSpans) { - from = visualLineNo(cm.doc, from); - to = visualLineEndNo(cm.doc, to); - } - adjustView(cm, from, to); - - display.viewOffset = heightAtLine(getLine(doc, display.viewFrom)); - } - -} - - -export default UpdateDisplayUtil; diff --git a/apps/app/_obsolete/src/components/Navbar/GlobalSearch.module.scss b/apps/app/_obsolete/src/components/Navbar/GlobalSearch.module.scss deleted file mode 100644 index c053fdba5d1..00000000000 --- a/apps/app/_obsolete/src/components/Navbar/GlobalSearch.module.scss +++ /dev/null @@ -1,50 +0,0 @@ -@use '@growi/core/scss/bootstrap/init' as bs; - -// input styles -.grw-global-search :global { - .dropdown-toggle { - min-width: 95px; - padding-left: 1.5rem; - } - - .search-typeahead { - .rbt-menu { - right: 0; - left: auto; - - @include bs.media-breakpoint-up(md) { - right: auto; - left: 0; - } - - @include bs.media-breakpoint-down(sm) { - left: auto !important; - width: 90vw; - } - } - } - - // using react-bootstrap-typeahead - // see: https://github.com/ericgio/react-bootstrap-typeahead - .rbt-input.form-control { - height: 30px; - .rbt-input-wrapper { - margin-left: 8px; - } - } - - .grw-shortcut-key-indicator { - position: absolute; - top: 0; - right: 4px; - - display: flex; - align-items: center; - height: 30px; - - code { - padding-right: 0.4rem; - padding-left: 0.4rem; - } - } -} diff --git a/apps/app/_obsolete/src/components/Navbar/GlobalSearch.tsx b/apps/app/_obsolete/src/components/Navbar/GlobalSearch.tsx deleted file mode 100644 index 4ec8b857584..00000000000 --- a/apps/app/_obsolete/src/components/Navbar/GlobalSearch.tsx +++ /dev/null @@ -1,144 +0,0 @@ -import React, { - useState, useCallback, useRef, useEffect, -} from 'react'; - -import assert from 'assert'; - -import { pathUtils } from '@growi/core/dist/utils'; -import { useTranslation } from 'next-i18next'; -import { useRouter } from 'next/router'; - -import { IFocusable } from '~/client/interfaces/focusable'; -import { useKeywordManager } from '~/client/services/search-operation'; -import { IPageWithSearchMeta } from '~/interfaces/search'; -import { - useIsSearchScopeChildrenAsDefault, useIsSearchServiceReachable, -} from '~/stores/context'; -import { useCurrentPagePath } from '~/stores/page'; -import { useGlobalSearchFormRef } from '~/stores/ui'; - -import SearchForm from '../../../../src/components/SearchForm'; - -import styles from './GlobalSearch.module.scss'; - - -export type GlobalSearchProps = { - dropup?: boolean, -} - -export const GlobalSearch = (props: GlobalSearchProps): JSX.Element => { - const { t } = useTranslation('commons'); - - const { dropup } = props; - - const { returnPathForURL } = pathUtils; - - const router = useRouter(); - - const globalSearchFormRef = useRef(null); - - useGlobalSearchFormRef(globalSearchFormRef); - - const { data: isSearchServiceReachable } = useIsSearchServiceReachable(); - const { data: isSearchScopeChildrenAsDefault } = useIsSearchScopeChildrenAsDefault(); - const { data: currentPagePath } = useCurrentPagePath(); - - const [text, setText] = useState(''); - const [isScopeChildren, setScopeChildren] = useState(isSearchScopeChildrenAsDefault ?? false); - const [isFocused, setFocused] = useState(false); - - const { pushState } = useKeywordManager(); - - useEffect(() => { - setScopeChildren(isSearchScopeChildrenAsDefault); - }, [isSearchScopeChildrenAsDefault]); - - - const gotoPage = useCallback((data: IPageWithSearchMeta[]) => { - assert(data.length > 0); - - const page = data[0].data; // should be single page selected - - // navigate to page - if (page != null) { - router.push(returnPathForURL(page.path, page._id)); - } - }, [returnPathForURL, router]); - - const search = useCallback(() => { - // construct search query - let q = text; - if (isScopeChildren) { - q += ` prefix:${currentPagePath ?? window.location.pathname}`; - } - - pushState(q); - }, [currentPagePath, isScopeChildren, router, text]); - - const scopeLabel = isScopeChildren - ? t('header_search_box.label.This tree') - : t('header_search_box.label.All pages'); - - const isIndicatorShown = !isFocused && (text.length === 0); - - - if (isScopeChildren == null || isSearchServiceReachable == null) { - return <>; - } - - return ( -
-
-
- -
- - -
-
- setFocused(false)} - onFocus={() => setFocused(true)} - onInputChange={text => setText(text)} - onSubmit={search} - /> - { isIndicatorShown && ( - - / - - ) } -
-
- ); -}; diff --git a/apps/app/_obsolete/src/components/Navbar/GrowiNavbar.module.scss b/apps/app/_obsolete/src/components/Navbar/GrowiNavbar.module.scss deleted file mode 100644 index 92f652d44ab..00000000000 --- a/apps/app/_obsolete/src/components/Navbar/GrowiNavbar.module.scss +++ /dev/null @@ -1,114 +0,0 @@ -@use '~/styles/variables' as var; -@use '~/styles/bootstrap/init' as bs; -@use '~/styles/mixins'; - -.grw-navbar :global { - - .confidential { - font-weight: bold; - } - -} - -.grw-navbar :global { - top: #{-1 * var.$grw-navbar-height} !important; - - z-index: var.$grw-navbar-z-index !important; - max-height: var.$grw-navbar-height + var.$grw-navbar-border-width; - border-top: 0; - border-right: 0; - border-bottom: var.$grw-navbar-border-width solid; - border-left: 0; - - .grw-app-title { - @include mixins.variable-font-size(24px); - } - - .grw-navbar-search { - position: absolute; - left: 50%; - transform: translate(-50%, 0%); - } - - .nav-link, - .nav-item.confidential { - display: flex; - align-items: center; - min-height: var.$grw-navbar-height; - padding: 0 1rem; - } - - .nav-link { - &:hover { - background: rgba(0, 0, 0, 0.1); - } - - &:focus { - background: rgba(0, 0, 0, 0); - } - } - .nav-item.confidential { - :not(i) { - @include mixins.variable-font-size(14px); - } - - @include bs.media-breakpoint-only(md) { - max-width: 100px; - } - - max-width: 120px; - max-height: var.$grw-navbar-height; - overflow: hidden; - background: rgba(0, 0, 0, 0.2); - } - - .grw-notification-dropdown { - .dropdown-menu { - max-width: 70vw; - } - } -} - -// layout for GlobalSearch -.grw-navbar :global { - .grw-global-search-container { - // centering on navbar - top: var.$grw-navbar-height / 2; - left: 50vw; - z-index: bs.$zindex-fixed + 1; - transform: translate(-50%, -50%); - - .rbt-input.form-control { - width: 200px; - transition: 0.3s ease-out; - - // focus - &.focus { - width: 300px; - } - - @include bs.media-breakpoint-up(md) { - width: 300px; - } - @include bs.media-breakpoint-up(lg) { - // focus - &.focus { - width: 400px; - } - } - @include bs.media-breakpoint-up(xl) { - width: 350px; - // focus - &.focus { - width: 450px; - } - } - } - } -} - -.grw-notification-badge { - position: absolute; - top: 6px; - right: 3.5px; -} diff --git a/apps/app/_obsolete/src/components/Navbar/GrowiNavbar.tsx b/apps/app/_obsolete/src/components/Navbar/GrowiNavbar.tsx deleted file mode 100644 index fe00ea715ff..00000000000 --- a/apps/app/_obsolete/src/components/Navbar/GrowiNavbar.tsx +++ /dev/null @@ -1,141 +0,0 @@ -import React, { - FC, memo, useMemo, useRef, -} from 'react'; - -import { useTranslation } from 'next-i18next'; -import dynamic from 'next/dynamic'; -import { useRipple } from 'react-use-ripple'; -import { UncontrolledTooltip } from 'reactstrap'; - -import { - useIsSearchPage, useIsGuestUser, useIsReadOnlyUser, useIsSearchServiceConfigured, useAppTitle, useConfidential, -} from '~/stores/context'; -import { usePageCreateModal } from '~/stores/modal'; -import { useCurrentPagePath } from '~/stores/page'; -import { useIsDeviceSmallerThanMd } from '~/stores/ui'; - - -import { GlobalSearchProps } from './GlobalSearch'; - -import styles from './GrowiNavbar.module.scss'; - -const NavbarRight = memo((): JSX.Element => { - const { t } = useTranslation(); - - const { data: currentPagePath } = useCurrentPagePath(); - const { data: isGuestUser } = useIsGuestUser(); - const { data: isReadOnlyUser } = useIsReadOnlyUser(); - - // ripple - const newButtonRef = useRef(null); - useRipple(newButtonRef, { rippleColor: 'rgba(255, 255, 255, 0.3)' }); - - const { open: openCreateModal } = usePageCreateModal(); - - const isAuthenticated = isGuestUser === false; - - const authenticatedNavItem = useMemo(() => { - return ( - <> - {!isReadOnlyUser - && ( -
  • - -
    • - ) - } - - ); - }, [isReadOnlyUser, t, openCreateModal, currentPagePath]); - - const notAuthenticatedNavItem = useMemo(() => { - return ( - <> -
  • Login
    • - - ); - }, []); - - return ( - <> - {isAuthenticated ? authenticatedNavItem : notAuthenticatedNavItem} - - ); -}); -NavbarRight.displayName = 'NavbarRight'; - -type ConfidentialProps = { - confidential?: string, -} -const Confidential: FC = memo((props: ConfidentialProps): JSX.Element => { - const { confidential } = props; - - if (confidential == null || confidential.length === 0) { - return <>; - } - - return ( -
  • - info - - {confidential} - - - {confidential} - -
    • - ); -}); -Confidential.displayName = 'Confidential'; - -type Props = { - isGlobalSearchHidden?: boolean -} - -export const GrowiNavbar = (props: Props): JSX.Element => { - - const { isGlobalSearchHidden } = props; - - const GlobalSearch = dynamic(() => import('./GlobalSearch').then(mod => mod.GlobalSearch), { ssr: false }); - - const { data: appTitle } = useAppTitle(); - const { data: confidential } = useConfidential(); - const { data: isSearchServiceConfigured } = useIsSearchServiceConfigured(); - const { data: isDeviceSmallerThanMd } = useIsDeviceSmallerThanMd(); - const { data: isSearchPage } = useIsSearchPage(); - - return ( - - ); - -}; diff --git a/apps/app/_obsolete/src/components/Navbar/GrowiSubNavigation.module.scss b/apps/app/_obsolete/src/components/Navbar/GrowiSubNavigation.module.scss deleted file mode 100644 index b22443a9101..00000000000 --- a/apps/app/_obsolete/src/components/Navbar/GrowiSubNavigation.module.scss +++ /dev/null @@ -1,103 +0,0 @@ -@use '~/styles/variables' as var; -@use '@growi/core/scss/bootstrap/init' as bs; -@use '~/styles/mixins'; - -%subnav-buttons-height { - height: 40px; -} - -%compact-subnav-buttons-height { - height: 32px; -} - -// https://github.com/css-modules/css-modules/issues/295#issuecomment-404873976 -// workaround to use '&' in global scope -.grw-subnav { - :global { - min-height: var.$grw-subnav-min-height; - padding-top: 8px; - padding-bottom: 8px; - - @include bs.media-breakpoint-up(md) { - min-height: var.$grw-subnav-min-height-md; - } - - h1 { - @include mixins.variable-font-size(32px); - line-height: 1.4em; - } - - .btn-copy { - &:not(:hover):not(:active) { - background-color: transparent !important; - } - opacity: 0.5; - } - - .btn-subscribe { - @extend %subnav-buttons-height; - font-size: 20px; - } - - .btn-like, - .btn-bookmark, - .btn-seen-user { - @extend %subnav-buttons-height; - padding-right: 6px; - padding-left: 8px; - font-size: 20px; - svg { - width: 20px; - height: 20px; - } - } - .total-likes, - .total-bookmarks { - display: flex; - align-items: flex-end; - padding-right: 8px; - padding-left: 6px; - font-size: 14px; - font-weight: bs.$font-weight-bold; - } - .seen-user-count { - padding-right: 6px; - padding-left: 6px; - font-size: 14px; - font-weight: bs.$font-weight-bold; - vertical-align: bottom; - } - - .btn-page-item-control { - height: 40px; - font-size: 16px; - } - - .user-list-popover { - max-width: 200px; - - .user-list-content { - direction: rtl; - - .liker-user-count, - .seen-user-count { - font-size: 12px; - font-weight: bolder; - } - } - .cls-1 { - isolation: isolate; - } - } - } - - &:global { - &:hover { - .btn-copy, - .btn-edit-tags { - // change button opacity - opacity: unset; - } - } - } -} diff --git a/apps/app/_obsolete/src/components/Navbar/GrowiSubNavigation.tsx b/apps/app/_obsolete/src/components/Navbar/GrowiSubNavigation.tsx deleted file mode 100644 index f2fced8894b..00000000000 --- a/apps/app/_obsolete/src/components/Navbar/GrowiSubNavigation.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import React from 'react'; - -import { - EditorMode, useEditorMode, -} from '~/stores/ui'; - -import PagePathNav from '../PagePathNav'; - - -import styles from './GrowiSubNavigation.module.scss'; - - -export type GrowiSubNavigationProps = { - pagePath?: string, - pageId?: string, - isNotFound?: boolean, - isTagLabelsDisabled?: boolean, - tags?: string[], - rightComponent?: React.FunctionComponent, - additionalClasses?: string[], -} - -export const GrowiSubNavigation = (props: GrowiSubNavigationProps): JSX.Element => { - - const { data: editorMode } = useEditorMode(); - - const { - pageId, pagePath, - rightComponent: RightComponent, - additionalClasses = [], - } = props; - - const isViewMode = editorMode === EditorMode.View; - const isEditorMode = !isViewMode; - - return ( -
    - {/* Left side */} -
    -
    - { pagePath != null && ( - - ) } -
    -
    - {/* Right side. */} - { RightComponent && ( - - ) } -
    - ); -}; diff --git a/apps/app/_obsolete/src/components/Navbar/GrowiSubNavigationSwitcher.module.scss b/apps/app/_obsolete/src/components/Navbar/GrowiSubNavigationSwitcher.module.scss deleted file mode 100644 index 3729da3efab..00000000000 --- a/apps/app/_obsolete/src/components/Navbar/GrowiSubNavigationSwitcher.module.scss +++ /dev/null @@ -1,41 +0,0 @@ -@use '~/styles/variables' as var; -@use '@growi/core/scss/bootstrap/init' as bs; - -/* - * Fixed ver - */ -$easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1); - -.grw-subnav-fixed-container { - top: var.$grw-navbar-border-width; - z-index: bs.$zindex-sticky - 5; -} - -/* - * Switching show/hide - */ -.grw-subnav-switcher { - :global { - .grw-subnav-fixed-container { - transition: transform 150ms $easeInOutCubic; - } - - /* - * shadow - */ - .grw-subnav-append-shadow-container { - .grw-subnav { - box-shadow: 0px 0px 6px 3px rgba(black, 0.15); - } - } - } - - &:global { - &.grw-subnav-switcher-hidden { - .grw-subnav-fixed-container { - transition: unset; - transform: translateY(-100%); - } - } - } -} diff --git a/apps/app/_obsolete/src/components/Navbar/GrowiSubNavigationSwitcher.tsx b/apps/app/_obsolete/src/components/Navbar/GrowiSubNavigationSwitcher.tsx deleted file mode 100644 index 8ac8beeb42f..00000000000 --- a/apps/app/_obsolete/src/components/Navbar/GrowiSubNavigationSwitcher.tsx +++ /dev/null @@ -1,97 +0,0 @@ -import React, { - useState, useRef, useEffect, useCallback, -} from 'react'; - -import { debounce } from 'throttle-debounce'; - -import { useSticky } from '~/client/services/side-effects/use-sticky'; -import { useSWRxCurrentPage } from '~/stores/page'; -import { useSidebarCollapsed } from '~/stores/ui'; -import loggerFactory from '~/utils/logger'; - -import GrowiContextualSubNavigation from './GrowiContextualSubNavigation'; - -import styles from './GrowiSubNavigationSwitcher.module.scss'; - -const logger = loggerFactory('growi:cli:GrowiSubNavigationSticky'); - -export type GrowiSubNavigationSwitcherProps = { - isLinkSharingDisabled: boolean, -} - -/** - * GrowiSubNavigation - * - * needs: - * #grw-subnav-fixed-container element - * #grw-subnav-sticky-trigger element - */ -export const GrowiSubNavigationSwitcher = (props: GrowiSubNavigationSwitcherProps): JSX.Element => { - const { isLinkSharingDisabled } = props; - - const { data: currentPage } = useSWRxCurrentPage(); - const { data: isSidebarCollapsed } = useSidebarCollapsed(); - - const [width, setWidth] = useState(0); - - // use more specific type HTMLDivElement for avoid assertion error. - // see: https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement - const fixedContainerRef = useRef(null); - const clientWidth = fixedContainerRef.current?.parentElement?.clientWidth; - - // Get sticky status - const isSticky = useSticky('#grw-subnav-sticky-trigger'); - - // Do not use clientWidth as useCallback deps, resizing events will not work in production builds. - const initWidth = useCallback(() => { - if (fixedContainerRef.current != null && fixedContainerRef.current.parentElement != null) { - // get parent elements width - const { clientWidth } = fixedContainerRef.current.parentElement; - setWidth(clientWidth); - } - }, []); - - // setup effect by resizing event - useEffect(() => { - const resizeHandler = debounce(100, initWidth); - window.addEventListener('resize', resizeHandler); - - // return clean up handler - return () => { - window.removeEventListener('resize', resizeHandler); - }; - }, [initWidth]); - - // update width when sidebar collapsing changed - useEffect(() => { - if (isSidebarCollapsed != null) { - setTimeout(initWidth, 300); - } - }, [isSidebarCollapsed, initWidth]); - - /* - * initialize width. - * Since width is not recalculated at production build first rendering, - * make initWidth execution dependent on clientWidth. - */ - useEffect(() => { - if (clientWidth != null) initWidth(); - }, [initWidth, clientWidth]); - - if (currentPage == null) { - return <>; - } - - return ( -
    -
    - -
    -
    - ); -}; diff --git a/apps/app/_obsolete/src/components/PageEditor/AbstractEditor.tsx b/apps/app/_obsolete/src/components/PageEditor/AbstractEditor.tsx deleted file mode 100644 index 5a8aa8b1645..00000000000 --- a/apps/app/_obsolete/src/components/PageEditor/AbstractEditor.tsx +++ /dev/null @@ -1,144 +0,0 @@ -/* eslint-disable @typescript-eslint/no-unused-vars */ -import React from 'react'; - -import { ICodeMirror } from 'react-codemirror2'; - - -export interface AbstractEditorProps extends ICodeMirror { - value?: string; - isGfmMode?: boolean; - onScrollCursorIntoView?: (line: number) => void; - onSave?: () => Promise; - onPasteFiles?: (event: Event) => void; - onCtrlEnter?: (event: Event) => void; -} - -interface defaultProps { - isGfmMode: true, -} - -export default class AbstractEditor extends React.Component> { - - constructor(props: Readonly) { - super(props); - - this.forceToFocus = this.forceToFocus.bind(this); - this.setCaretLine = this.setCaretLine.bind(this); - this.setScrollTopByLine = this.setScrollTopByLine.bind(this); - - this.getStrFromBol = this.getStrFromBol.bind(this); - this.getStrToEol = this.getStrToEol.bind(this); - this.insertText = this.insertText.bind(this); - this.insertLinebreak = this.insertLinebreak.bind(this); - - this.dispatchSave = this.dispatchSave.bind(this); - } - - public static defaultProps: defaultProps = { - isGfmMode: true, - }; - - forceToFocus(): void {} - - /** - * set new value - */ - setValue(_newValue: string): void {} - - /** - * Enable/Disable GFM mode - * @param {bool} _bool - */ - setGfmMode(_bool: boolean): void {} - - /** - * set caret position of codemirror - * @param {string} number - */ - setCaretLine(_line: number): void {} - - /** - * scroll - * @param {number} _line - */ - setScrollTopByLine(_line: number): void {} - - /** - * return strings from BOL(beginning of line) to current position - */ - getStrFromBol(): Error { - throw new Error('this method should be impelemented in subclass'); - } - - /** - * return strings from current position to EOL(end of line) - */ - getStrToEol(): Error { - throw new Error('this method should be impelemented in subclass'); - } - - /** - * return strings from BOL(beginning of line) to current position - */ - getStrFromBolToSelectedUpperPos(): Error { - throw new Error('this method should be impelemented in subclass'); - } - - /** - * replace Beggining Of Line to current position with param 'text' - * @param {string} _text - */ - replaceBolToCurrentPos(_text: string): Error { - throw new Error('this method should be impelemented in subclass'); - } - - /** - * replace the current line with param 'text' - * @param {string} _text - */ - replaceLine(_text: string): Error { - throw new Error('this method should be impelemented in subclass'); - } - - /** - * insert text - * @param {string} _text - */ - insertText(_text: string): Error { - throw new Error('this method should be impelemented in subclass'); - } - - /** - * insert line break to the current position - */ - insertLinebreak(): void { - this.insertText('\n'); - } - - /** - * dispatch onSave event - */ - dispatchSave(): void { - if (this.props.onSave != null) { - this.props.onSave(); - } - } - - /** - * dispatch onPasteFiles event - * @param {object} event - */ - dispatchPasteFiles(event: Event): void { - if (this.props.onPasteFiles != null) { - this.props.onPasteFiles(event); - } - } - - /** - * returns items(an array of react elements) in navigation bar for editor - */ - getNavbarItems(): null { - return null; - } - -} diff --git a/apps/app/_obsolete/src/components/PageEditor/Editor.module.scss b/apps/app/_obsolete/src/components/PageEditor/Editor.module.scss deleted file mode 100644 index 9030988df91..00000000000 --- a/apps/app/_obsolete/src/components/PageEditor/Editor.module.scss +++ /dev/null @@ -1,50 +0,0 @@ -@use '~/styles/mixins' as ms; -@use '@growi/core/scss/bootstrap/init' as bs; -@use './page-editor-inheritance'; - - -.editor-container :global { - - .btn.btn-open-dropzone { - z-index: 2; - padding-top: 3px; - padding-bottom: 3px; - font-size: small; - border: none; - border-top: 1px dotted bs.$gray-300; - border-bottom: none; - - &:hover, - &:focus { - border-bottom: none; - } - } - - // for Navbar editor - .navbar-editor { - height: page-editor-inheritance.$navbar-editor-height; - padding: 0; - - border-bottom: 1px solid transparent; - - li { - display: inline-block; - i { - font-size: 16px; - } - } - - button { - padding: 0px; - margin: 0 2px; - font-size: 1rem; - line-height: 1; - background-color: transparent; - border: none; - } - - img { - vertical-align: bottom; - } - } -} diff --git a/apps/app/_obsolete/src/components/PageEditor/Editor.tsx b/apps/app/_obsolete/src/components/PageEditor/Editor.tsx deleted file mode 100644 index c5a098ebb5c..00000000000 --- a/apps/app/_obsolete/src/components/PageEditor/Editor.tsx +++ /dev/null @@ -1,365 +0,0 @@ -import type { ForwardRefRenderFunction } from 'react'; -import React, { - useState, useRef, useImperativeHandle, useCallback, forwardRef, - memo, - useEffect, -} from 'react'; - -import type { EditorSettings } from '@growi/editor'; -import Dropzone from 'react-dropzone'; -import { useTranslation } from 'react-i18next'; -import { - Modal, ModalHeader, ModalBody, -} from 'reactstrap'; - -import { toastError, toastSuccess } from '~/client/util/toastr'; -import { useDefaultIndentSize } from '~/stores/context'; -import { useEditorSettings } from '~/stores/editor'; -import { useIsMobile } from '~/stores/ui'; - -import type { IEditorMethods } from '../../interfaces/editor-methods'; - -import type AbstractEditor from './AbstractEditor'; -import { Cheatsheet } from './Cheatsheet'; -// import CodeMirrorEditor from './CodeMirrorEditor'; -import pasteHelper from './PasteHelper'; -import TextAreaEditor from './TextAreaEditor'; - - -import styles from './Editor.module.scss'; - -export type EditorPropsType = { - value?: string, - isGfmMode?: boolean, - noCdn?: boolean, - isUploadable?: boolean, - isUploadAllFileAllowed?: boolean, - onChange?: (newValue: string, isClean?: boolean) => void, - onUpload?: (file) => void, - editorSettings?: EditorSettings, - indentSize?: number, - onDragEnter?: (event: any) => void, - onMarkdownHelpButtonClicked?: () => void, - onAddAttachmentButtonClicked?: () => void, - onScroll?: (line: { line: number }) => void, - onScrollCursorIntoView?: (line: number) => void, - onSave?: () => Promise, - onPasteFiles?: (event: Event) => void, - onCtrlEnter?: (event: Event) => void, - isComment?: boolean, -} - -type DropzoneRef = { - open: () => void -} - -const Editor: ForwardRefRenderFunction = (props, ref): JSX.Element => { - const { - onUpload, isUploadable, isUploadAllFileAllowed, indentSize, isGfmMode = true, - } = props; - - const [dropzoneActive, setDropzoneActive] = useState(false); - const [isUploading, setIsUploading] = useState(false); - const [isCheatsheetModalShown, setIsCheatsheetModalShown] = useState(false); - - const [navBarItems, setNavBarItems] = useState([]); - - const { t } = useTranslation(); - const { data: editorSettings } = useEditorSettings(); - const { data: defaultIndentSize } = useDefaultIndentSize(); - const { data: isMobile } = useIsMobile(); - - const dropzoneRef = useRef(null); - // CodeMirrorEditor ref - const cmEditorRef = useRef>(null); - const taEditorRef = useRef(null); - - const editorSubstance = useCallback(() => { - return isMobile ? taEditorRef.current : cmEditorRef.current; - }, [isMobile]); - - // methods for ref - useImperativeHandle(ref, () => ({ - forceToFocus: () => { - editorSubstance()?.forceToFocus(); - }, - setValue: (newValue: string) => { - editorSubstance()?.setValue(newValue); - }, - setGfmMode: (bool: boolean) => { - editorSubstance()?.setGfmMode(bool); - }, - setCaretLine: (line: number) => { - editorSubstance()?.setCaretLine(line); - }, - setScrollTopByLine: (line: number) => { - editorSubstance()?.setScrollTopByLine(line); - }, - insertText: (text: string) => { - editorSubstance()?.insertText(text); - }, - /** - * remove overlay and set isUploading to false - */ - terminateUploadingState: () => { - setDropzoneActive(false); - setIsUploading(false); - }, - })); - - /** - * dispatch onUpload event - */ - const dispatchUpload = useCallback((files) => { - if (onUpload != null) { - onUpload(files); - } - }, [onUpload]); - - /** - * get acceptable(uploadable) file type - */ - const getAcceptableType = useCallback(() => { - let accept = 'null'; // reject all - if (isUploadable) { - if (!isUploadAllFileAllowed) { - accept = 'image/*'; // image only - } - else { - accept = ''; // allow all - } - } - - return accept; - }, [isUploadable, isUploadAllFileAllowed]); - - const pasteFilesHandler = useCallback((event) => { - const items = event.clipboardData.items || event.clipboardData.files || []; - - // abort if length is not 1 - if (items.length < 1) { - return; - } - - for (let i = 0; i < items.length; i++) { - try { - const file = items[i].getAsFile(); - // check file type (the same process as Dropzone) - if (file != null && pasteHelper.isAcceptableType(file, getAcceptableType())) { - dispatchUpload(file); - setIsUploading(true); - } - } - catch (e) { - toastError(t('toaster.file_upload_failed')); - } - } - }, [dispatchUpload, getAcceptableType, t]); - - const dragEnterHandler = useCallback((event) => { - const dataTransfer = event.dataTransfer; - - // do nothing if contents is not files - if (!dataTransfer.types.includes('Files')) { - return; - } - - setDropzoneActive(true); - }, []); - - const dropHandler = useCallback((accepted) => { - // rejected - if (accepted.length !== 1) { // length should be 0 or 1 because `multiple={false}` is set - setDropzoneActive(false); - return; - } - - const file = accepted[0]; - dispatchUpload(file); - setIsUploading(true); - }, [dispatchUpload]); - - const addAttachmentHandler = useCallback(() => { - if (dropzoneRef.current == null) { return } - dropzoneRef.current.open(); - }, []); - - const getDropzoneClassName = useCallback((isDragAccept: boolean, isDragReject: boolean) => { - let className = 'dropzone'; - if (!isUploadable) { - className += ' dropzone-unuploadable'; - } - else { - className += ' dropzone-uploadable'; - - if (isUploadAllFileAllowed) { - className += ' dropzone-uploadablefile'; - } - } - - // uploading - if (isUploading) { - className += ' dropzone-uploading'; - } - - if (isDragAccept) { - className += ' dropzone-accepted'; - } - - if (isDragReject) { - className += ' dropzone-rejected'; - } - - return className; - }, [isUploadable, isUploading, isUploadAllFileAllowed]); - - const renderDropzoneOverlay = useCallback(() => { - return ( -
    - {isUploading - && ( - -
    - Uploading... -     - ) - } - {!isUploading && } -
    - ); - }, [isUploading]); - - const renderNavbar = () => { - return ( -
    -
      - { navBarItems.map((item, idx) => { - // eslint-disable-next-line react/no-array-index-key - return
    • {item}
      • ; - }) } -
    -
    - ); - }; - - const renderCheatsheetModal = useCallback(() => { - const hideCheatsheetModal = () => { - setIsCheatsheetModalShown(false); - }; - - return ( - - - helpMarkdown help - - - - - - ); - }, [isCheatsheetModalShown]); - - const isReadyToRenderEditor = editorSettings != null; - - // https://redmine.weseek.co.jp/issues/111731 - useEffect(() => { - const editorRef = editorSubstance(); - if (isReadyToRenderEditor && editorRef != null) { - const editorNavBarItems = editorRef.getNavbarItems() ?? []; - setNavBarItems(editorNavBarItems); - } - }, [editorSubstance, isReadyToRenderEditor]); - - if (!isReadyToRenderEditor) { - return <>; - } - - const flexContainer: React.CSSProperties = { - height: '100%', - display: 'flex', - flexDirection: 'column', - }; - - return ( - <> -
    - { setDropzoneActive(false) }} - onDrop={dropHandler} - > - {({ - getRootProps, - getInputProps, - isDragAccept, - isDragReject, - }) => { - return ( -
    - { dropzoneActive && renderDropzoneOverlay() } - - { renderNavbar() } - - {/* for PC */} - { !isMobile && ( - // { setIsCheatsheetModalShown(true) }} - // onAddAttachmentButtonClicked={addAttachmentHandler} - // editorSettings={editorSettings} - // isGfmMode={isGfmMode} - // {...props} - // /> - <> - )} - - {/* for mobile */} - { isMobile && ( - - )} - - -
    - ); - }} -     - - { isUploadable - && ( - - ) - } - - { renderCheatsheetModal() } - -
    - - ); -}; - -export default memo(forwardRef(Editor)); diff --git a/apps/app/_obsolete/src/components/PageEditor/EditorIcon.jsx b/apps/app/_obsolete/src/components/PageEditor/EditorIcon.jsx deleted file mode 100644 index 4c175c6a41f..00000000000 --- a/apps/app/_obsolete/src/components/PageEditor/EditorIcon.jsx +++ /dev/null @@ -1,159 +0,0 @@ -/* eslint-disable max-len */ -import React from 'react'; - -import PropTypes from 'prop-types'; - -const EditorIcon = (props) => { - - switch (props.icon) { - case 'Bold': - return ( - - - - - ); - case 'Italic': - return ( - - - - - ); - case 'Strikethrough': - return ( - - - - - - - ); - case 'Heading': - return ( - - - - - ); - case 'InlineCode': - return ( - - - - - ); - case 'Quote': - return ( - - - - - ); - case 'List': - return ( - - - - - ); - case 'NumberedList': - return ( - - - - - ); - case 'CheckList': - return ( - - - - - ); - case 'Link': - return ( - - - - - ); - case 'Image': - return ( - - - - - ); - case 'Grid': - return ( - - - - - - - - - - - - - - - - - - ); - case 'Table': - return ( - - - - - ); - case 'Drawio': - return ( - - - - - ); - case 'Attachment': - return ( - - - - - ); - case 'Emoji': - return ( - - - - - - - - - - - - ); - case 'Template': - // TODO: fix - return ( - - - - ); - } - - -}; - -EditorIcon.propTypes = { - icon: PropTypes.string.isRequired, -}; - -export default EditorIcon; diff --git a/apps/app/_obsolete/src/components/PageEditor/EmojiPicker.tsx b/apps/app/_obsolete/src/components/PageEditor/EmojiPicker.tsx deleted file mode 100644 index 53c20473ab8..00000000000 --- a/apps/app/_obsolete/src/components/PageEditor/EmojiPicker.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import React, { FC, useCallback } from 'react'; - -import { Picker } from 'emoji-mart'; -import { Modal } from 'reactstrap'; - -import { useNextThemes } from '~/stores/use-next-themes'; - -import EmojiPickerHelper, { getEmojiTranslation } from './EmojiPickerHelper'; - - -import 'emoji-mart/css/emoji-mart.css'; - - -type Props = { - onClose: () => void, - onSelected: (emoji: string) => void, - emojiSearchText: string, - emojiPickerHelper: EmojiPickerHelper, - isOpen: boolean -} - -const EmojiPicker: FC = (props: Props) => { - - const { - onClose, onSelected, emojiSearchText, emojiPickerHelper, isOpen, - } = props; - - const { resolvedTheme } = useNextThemes(); - - // Set search emoji input and trigger search - const searchEmoji = useCallback(() => { - const input = window.document.querySelector('[id^="emoji-mart-search"]') as HTMLInputElement; - const valueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set; - valueSetter?.call(input, emojiSearchText); - const event = new Event('input', { bubbles: true }); - input.dispatchEvent(event); - input.focus(); - }, [emojiSearchText]); - - const selectEmoji = useCallback((emoji) => { - onSelected(emoji); - onClose(); - }, [onClose, onSelected]); - - - const translation = getEmojiTranslation(); - - return ( - - - - ); -}; - -export default EmojiPicker; diff --git a/apps/app/_obsolete/src/components/PageEditor/EmojiPickerHelper.ts b/apps/app/_obsolete/src/components/PageEditor/EmojiPickerHelper.ts deleted file mode 100644 index 4706f67a9cd..00000000000 --- a/apps/app/_obsolete/src/components/PageEditor/EmojiPickerHelper.ts +++ /dev/null @@ -1,116 +0,0 @@ -import { CSSProperties } from 'react'; - -import { Position } from 'codemirror'; -import i18n from 'i18next'; - -// https://regex101.com/r/x5LbOZ/1 -const EMOJI_PATTERN = new RegExp(/^:[a-z0-9-+_]+$/); - -export default class EmojiPickerHelper { - - editor; - - pattern: string; - - constructor(editor) { - this.editor = editor; - } - - setStyle = (): CSSProperties => { - const offset = 20; - const emojiPickerHeight = 420; - const cursorPos = this.editor.cursorCoords(true); - const editorPos = this.editor.getWrapperElement().getBoundingClientRect(); - // Emoji Picker bottom position exceed editor's bottom position - if (cursorPos.bottom + emojiPickerHeight > editorPos.bottom) { - return { - top: editorPos.bottom - emojiPickerHeight, - left: cursorPos.left + offset, - position: 'fixed', - }; - } - return { - top: cursorPos.top + offset, - left: cursorPos.left + offset, - position: 'fixed', - }; - }; - - shouldModeTurnOn = (char: string): Position | null | undefined => { - if (char !== ':') { - return null; - } - - const currentPos = this.editor.getCursor(); - const sc = this.editor.getSearchCursor(':', currentPos, { multiline: false }); - if (sc.findPrevious()) { - return sc.pos.from; - } - }; - - shouldOpen = (startPos: Position): boolean => { - const currentPos = this.editor.getCursor(); - const rangeStr = this.editor.getRange(startPos, currentPos); - - return EMOJI_PATTERN.test(rangeStr); - }; - - getInitialSearchingText = (startPos: Position): void => { - const currentPos = this.editor.getCursor(); - const rangeStr = this.editor.getRange(startPos, currentPos); - - return rangeStr.slice(1); // return without the heading ':' - }; - - addEmoji = (emoji: { colons: string }, startPosToReplace: Position|null): void => { - const currentPos = this.editor.getCursor(); - - const from = startPosToReplace ?? currentPos; - const to = currentPos; - - const doc = this.editor.getDoc(); - doc.replaceRange(`${emoji.colons} `, from, to); - this.editor.focus(); - this.editor.refresh(); - }; - -} - -export const getEmojiTranslation = () => { - - const categories = {}; - [ - 'search', - 'recent', - 'smileys', - 'people', - 'nature', - 'foods', - 'activity', - 'places', - 'objects', - 'symbols', - 'flags', - 'custom', - ].forEach((category) => { - categories[category] = i18n.t(`emoji.categories.${category}`); - }); - - const skintones = {}; - (Array.from(Array(6).keys())).forEach((tone) => { - skintones[tone + 1] = i18n.t(`emoji.skintones.${tone + 1}`); - }); - - const translation = { - search: i18n.t('emoji.search'), - clear: i18n.t('emoji.clear'), - notfound: i18n.t('emoji.notfound'), - skintext: i18n.t('emoji.skintext'), - categories, - categorieslabel: i18n.t('emoji.categorieslabel'), - skintones, - title: i18n.t('emoji.title'), - }; - - return translation; -}; diff --git a/apps/app/_obsolete/src/components/PageEditor/MarkdownLinkUtil.js b/apps/app/_obsolete/src/components/PageEditor/MarkdownLinkUtil.js deleted file mode 100644 index 6b06805aeea..00000000000 --- a/apps/app/_obsolete/src/components/PageEditor/MarkdownLinkUtil.js +++ /dev/null @@ -1,46 +0,0 @@ -import Linker from '@growi/editor/src/services/link-util/Linker'; -/** - * Utility for markdown link - */ -class MarkdownLinkUtil { - - constructor() { - this.getMarkdownLink = this.getMarkdownLink.bind(this); - this.isInLink = this.isInLink.bind(this); - this.replaceFocusedMarkdownLinkWithEditor = this.replaceFocusedMarkdownLinkWithEditor.bind(this); - } - - // return an instance of Linker from cursor position or selected text. - getMarkdownLink(editor) { - if (!this.isInLink(editor)) { - return Linker.fromMarkdownString(editor.getDoc().getSelection()); - } - const curPos = editor.getCursor(); - return Linker.fromLineWithIndex(editor.getDoc().getLine(curPos.line), curPos.ch); - } - - isInLink(editor) { - const curPos = editor.getCursor(); - const { beginningOfLink, endOfLink } = Linker.getBeginningAndEndIndexOfLink(editor.getDoc().getLine(curPos.line), curPos.ch); - return beginningOfLink >= 0 && endOfLink >= 0; - } - - // replace link(link is an instance of Linker) - replaceFocusedMarkdownLinkWithEditor(editor, linkText) { - const curPos = editor.getCursor(); - if (!this.isInLink(editor)) { - editor.getDoc().replaceSelection(linkText); - } - else { - const line = editor.getDoc().getLine(curPos.line); - const { beginningOfLink, endOfLink } = Linker.getBeginningAndEndIndexOfLink(line, curPos.ch); - editor.getDoc().replaceRange(linkText, { line: curPos.line, ch: beginningOfLink }, { line: curPos.line, ch: endOfLink }); - } - } - -} - -// singleton pattern -const instance = new MarkdownLinkUtil(); -Object.freeze(instance); -export default instance; diff --git a/apps/app/_obsolete/src/components/PageEditor/MarkdownTableInterceptor.js b/apps/app/_obsolete/src/components/PageEditor/MarkdownTableInterceptor.js deleted file mode 100644 index 11ca7158230..00000000000 --- a/apps/app/_obsolete/src/components/PageEditor/MarkdownTableInterceptor.js +++ /dev/null @@ -1,95 +0,0 @@ -import { BasicInterceptor } from '@growi/core/dist/utils'; - -import MarkdownTable from '~/client/models/MarkdownTable'; - -import { - getStrFromBot, addRowToMarkdownTable, getStrToEot, isEndOfLine, mergeMarkdownTable, replaceFocusedMarkdownTableWithEditor, - isInTable, emptyLineOfTableRE, -} from '../../../../src/components/PageEditor/markdown-table-util-for-editor'; - -/** - * Interceptor for markdown table - */ -export default class MarkdownTableInterceptor extends BasicInterceptor { - - /** - * @inheritdoc - */ - isInterceptWhen(contextName) { - return ( - contextName === 'preHandleEnter' - ); - } - - /** - * return boolean value whether processable parallel - */ - isProcessableParallel() { - return false; - } - - addRow(cm) { - // get lines all of table from current position to beginning of table - const strFromBot = getStrFromBot(cm); - let table = MarkdownTable.fromMarkdownString(strFromBot); - - addRowToMarkdownTable(table); - - const strToEot = getStrToEot(cm); - const tableBottom = MarkdownTable.fromMarkdownString(strToEot); - if (tableBottom.table.length > 0) { - table = mergeMarkdownTable([table, tableBottom]); - } - - replaceFocusedMarkdownTableWithEditor(cm, table); - } - - reformTable(cm) { - const tableStr = getStrFromBot(cm) + getStrToEot(cm); - const table = MarkdownTable.fromMarkdownString(tableStr); - replaceFocusedMarkdownTableWithEditor(cm, table); - } - - removeRow(editor) { - editor.replaceLine('\n'); - } - - /** - * @inheritdoc - */ - async process(contextName, ...args) { - const context = Object.assign(args[0]); // clone - const editor = context.editor; // AbstractEditor instance - // "autoFormatMarkdownTable" may be undefined, so it is compared to true and converted to bool. - const noIntercept = (context.autoFormatMarkdownTable === false); - - // do nothing if editor is not a CodeMirrorEditor or no intercept - if (editor == null || editor.getCodeMirror() == null || noIntercept) { - return context; - } - - const cm = editor.getCodeMirror(); - - const isLastRow = getStrToEot(cm) === editor.getStrToEol(); - - if (isInTable(cm)) { - // at EOL in the table - if (isEndOfLine(cm)) { - this.addRow(cm); - } - // last empty row - else if (isLastRow && emptyLineOfTableRE.test(editor.getStrFromBol() + editor.getStrToEol())) { - this.removeRow(editor); - } - else { - this.reformTable(cm); - } - - // report to manager that handling was done - context.handlers.push(this.className); - return context; - } - - } - -} diff --git a/apps/app/_obsolete/src/components/PageEditor/PasteHelper.js b/apps/app/_obsolete/src/components/PageEditor/PasteHelper.js deleted file mode 100644 index 2cd0bce777f..00000000000 --- a/apps/app/_obsolete/src/components/PageEditor/PasteHelper.js +++ /dev/null @@ -1,44 +0,0 @@ -import accepts from 'attr-accept'; - -import markdownListUtil from './MarkdownListUtil'; - -class PasteHelper { - - constructor() { - this.pasteText = this.pasteText.bind(this); - } - - /** - * paste text - * @param {any} editor An editor instance of CodeMirror - * @param {any} event - */ - pasteText(editor, event) { - // get data in clipboard - const text = event.clipboardData.getData('text/plain'); - - if (text.length === 0) { - return; - } - - markdownListUtil.pasteText(editor, event, text); - } - - // Firefox versions prior to 53 return a bogus MIME type for every file drag, so dragovers with - /** - * transplanted from react-dropzone - * @see https://github.com/react-dropzone/react-dropzone/blob/master/src/utils/index.js - * - * @param {*} file - * @param {*} accept - */ - isAcceptableType(file, accept) { - return file.type === 'application/x-moz-file' || accepts(file, accept); - } - -} - -// singleton pattern -const instance = new PasteHelper(); -Object.freeze(instance); -export default instance; diff --git a/apps/app/_obsolete/src/components/PageEditor/PreventMarkdownListInterceptor.js b/apps/app/_obsolete/src/components/PageEditor/PreventMarkdownListInterceptor.js deleted file mode 100644 index 0344dea0c14..00000000000 --- a/apps/app/_obsolete/src/components/PageEditor/PreventMarkdownListInterceptor.js +++ /dev/null @@ -1,44 +0,0 @@ -import { BasicInterceptor } from '@growi/core/dist/utils'; - -import mlu from './MarkdownListUtil'; - -export default class PreventMarkdownListInterceptor extends BasicInterceptor { - - /** - * @inheritdoc - */ - isInterceptWhen(contextName) { - return ( - contextName === 'preHandleEnter' - ); - } - - /** - * return boolean value whether processable parallel - */ - isProcessableParallel() { - return false; - } - - /** - * @inheritdoc - */ - process(contextName, ...args) { - const context = Object.assign(args[0]); // clone - const editor = context.editor; // AbstractEditor instance - - // get strings from current position to EOL(end of line) before break the line - const strToEol = editor.getStrToEol(); - if (mlu.indentAndMarkRE.test(strToEol)) { - // newline simply - editor.insertLinebreak(); - - // report to manager that handling was done - context.handlers.push(this.className); - } - - // resolve - return Promise.resolve(context); - } - -} diff --git a/apps/app/_obsolete/src/components/PageEditor/TextAreaEditor.jsx b/apps/app/_obsolete/src/components/PageEditor/TextAreaEditor.jsx deleted file mode 100644 index bbb79ab725b..00000000000 --- a/apps/app/_obsolete/src/components/PageEditor/TextAreaEditor.jsx +++ /dev/null @@ -1,274 +0,0 @@ -import React from 'react'; -// import PropTypes from 'prop-types'; - -import { Input } from 'reactstrap'; - -import InterceptorManager from '~/services/interceptor-manager'; -import loggerFactory from '~/utils/logger'; - - -import AbstractEditor from './AbstractEditor'; -import mlu from './MarkdownListUtil'; -import pasteHelper from './PasteHelper'; -import PreventMarkdownListInterceptor from './PreventMarkdownListInterceptor'; - -export default class TextAreaEditor extends AbstractEditor { - - constructor(props) { - super(props); - this.logger = loggerFactory('growi:PageEditor:TextAreaEditor'); - - this.state = { - value: this.props.value, - isGfmMode: this.props.isGfmMode, - }; - - this.textarea = React.createRef(); - - this.init(); - - this.handleEnterKey = this.handleEnterKey.bind(this); - - this.keyPressHandler = this.keyPressHandler.bind(this); - this.pasteHandler = this.pasteHandler.bind(this); - this.dragEnterHandler = this.dragEnterHandler.bind(this); - } - - init() { - this.interceptorManager = new InterceptorManager(); - this.interceptorManager.addInterceptors([ - new PreventMarkdownListInterceptor(), - ]); - } - - componentDidMount() { - // initialize caret line - this.setCaretLine(0); - - // set event handlers - this.textarea.addEventListener('keypress', this.keyPressHandler); - this.textarea.addEventListener('paste', this.pasteHandler); - this.textarea.addEventListener('dragenter', this.dragEnterHandler); - } - - /** - * @inheritDoc - */ - forceToFocus() { - setTimeout(() => { - this.textarea.focus(); - }, 150); - } - - /** - * @inheritDoc - */ - setValue(newValue) { - this.setState({ value: newValue }); - this.textarea.value = newValue; - } - - /** - * @inheritDoc - */ - setGfmMode(bool) { - this.setState({ - isGfmMode: bool, - }); - } - - /** - * @inheritDoc - */ - setCaretLine(line) { - if (Number.isNaN(line)) { - return; - } - - // scroll to bottom - this.textarea.scrollTop = this.textarea.scrollHeight; - - const lines = this.textarea.value.split('\n').slice(0, line); - /* eslint-disable no-param-reassign, no-return-assign */ - const pos = lines - .map((lineStr) => { return lineStr.length + 1 }) // correct length+1 of each lines - .reduce((a, x) => { return a += x }, 0) // sum - - 1; // -1 - /* eslint-enable no-param-reassign, no-return-assign */ - - this.textarea.setSelectionRange(pos, pos); - } - - /** - * @inheritDoc - */ - setScrollTopByLine(line) { - // do nothing - } - - /** - * @inheritDoc - */ - insertText(text) { - const startPos = this.textarea.selectionStart; - const endPos = this.textarea.selectionEnd; - this.replaceValue(text, startPos, endPos); - } - - /** - * @inheritDoc - */ - getStrFromBol() { - const currentPos = this.textarea.selectionStart; - return this.textarea.value.substring(this.getBolPos(), currentPos); - } - - /** - * @inheritDoc - */ - getStrToEol() { - const currentPos = this.textarea.selectionStart; - return this.textarea.value.substring(currentPos, this.getEolPos()); - } - - /** - * @inheritDoc - */ - getStrFromBolToSelectedUpperPos() { - const startPos = this.textarea.selectionStart; - const endPos = this.textarea.selectionEnd; - const upperPos = (startPos < endPos) ? startPos : endPos; - return this.textarea.value.substring(this.getBolPos(), upperPos); - } - - /** - * @inheritDoc - */ - replaceBolToCurrentPos(text) { - const startPos = this.textarea.selectionStart; - const endPos = this.textarea.selectionEnd; - const lowerPos = (startPos < endPos) ? endPos : startPos; - this.replaceValue(text, this.getBolPos(), lowerPos); - } - - /** - * @inheritDoc - */ - replaceLine(text) { - this.replaceValue(text, this.getBolPos(), this.getEolPos()); - } - - getBolPos() { - const currentPos = this.textarea.selectionStart; - return this.textarea.value.lastIndexOf('\n', currentPos - 1) + 1; - } - - getEolPos() { - const currentPos = this.textarea.selectionStart; - const pos = this.textarea.value.indexOf('\n', currentPos); - if (pos < 0) { // not found but EOF - return this.textarea.value.length; - } - return pos; - } - - replaceValue(text, startPos, endPos) { - // create new value - const value = this.textarea.value; - const newValue = value.substring(0, startPos) + text + value.substring(endPos, value.length); - // calculate new position - const newPos = startPos + text.length; - - this.textarea.value = newValue; - this.textarea.setSelectionRange(newPos, newPos); - } - - /** - * keypress event handler - * @param {string} event - */ - keyPressHandler(event) { - const key = event.key.toLowerCase(); - if (key === 'enter') { - if (event.ctrlKey || event.altKey || event.metaKey) { - return; - } - - this.handleEnterKey(event); - } - } - - /** - * handle ENTER key - * @param {string} event - */ - handleEnterKey(event) { - if (!this.state.isGfmMode) { - return; // do nothing - } - - const context = { - handlers: [], // list of handlers which process enter key - editor: this, - }; - - const interceptorManager = this.interceptorManager; - interceptorManager.process('preHandleEnter', context) - .then(() => { - event.preventDefault(); - if (context.handlers.length === 0) { - mlu.newlineAndIndentContinueMarkdownList(this); - } - }); - } - - /** - * paste event handler - * @param {any} event - */ - pasteHandler(event) { - const types = event.clipboardData.types; - - // files - if (types.includes('Files')) { - event.preventDefault(); - this.dispatchPasteFiles(event); - } - // text - else if (types.includes('text/plain')) { - pasteHelper.pasteText(this, event); - } - } - - dragEnterHandler(event) { - this.dispatchDragEnter(event); - } - - dispatchDragEnter(event) { - if (this.props.onDragEnter != null) { - this.props.onDragEnter(event); - } - } - - render() { - return ( - - { this.textarea = c }} - defaultValue={this.state.value} - onChange={(e) => { - if (this.props.onChange != null) { - this.props.onChange(e.target.value); - } - }} - /> - - ); - } - -} - -TextAreaEditor.propTypes = Object.assign({ -}, AbstractEditor.propTypes); diff --git a/apps/app/_obsolete/src/components/PageEditorByHackmd.tsx b/apps/app/_obsolete/src/components/PageEditorByHackmd.tsx deleted file mode 100644 index 118c1d0b7ad..00000000000 --- a/apps/app/_obsolete/src/components/PageEditorByHackmd.tsx +++ /dev/null @@ -1,521 +0,0 @@ -import React, { - useCallback, useRef, useState, useEffect, useMemo, -} from 'react'; - -import EventEmitter from 'events'; - -import { pathUtils } from '@growi/core/dist/utils'; -import Link from 'next/link'; -import { useRouter } from 'next/router'; -import { useTranslation } from 'react-i18next'; -import urljoin from 'url-join'; - -import { useUpdateStateAfterSave, useSaveOrUpdate } from '~/client/services/page-operation'; -import { apiPost } from '~/client/util/apiv1-client'; -import { toastError, toastSuccess } from '~/client/util/toastr'; -import { IResHackmdIntegrated, IResHackmdDiscard } from '~/interfaces/hackmd'; -import { OptionsToSave } from '~/interfaces/page-operation'; -import { - useCurrentPathname, useHackmdUri, -} from '~/stores/context'; -import { - useIsSlackEnabled, usePageTagsForEditors, useIsEnabledUnsavedWarning, useWaitingSaveProcessing, -} from '~/stores/editor'; -import { - usePageIdOnHackmd, useHasDraftOnHackmd, useRevisionIdHackmdSynced, useIsHackmdDraftUpdatingInRealtime, -} from '~/stores/hackmd'; -import { - useCurrentPagePath, useSWRMUTxCurrentPage, useSWRxCurrentPage, useSWRxTagsInfo, useCurrentPageId, useIsNotFound, -} from '~/stores/page'; -import { mutatePageTree } from '~/stores/page-listing'; -import { useRemoteRevisionId } from '~/stores/remote-latest-page'; -import { - EditorMode, - useEditorMode, useSelectedGrant, -} from '~/stores/ui'; -import loggerFactory from '~/utils/logger'; - -import HackmdEditor from './PageEditorByHackmd/HackmdEditor'; - -const logger = loggerFactory('growi:PageEditorByHackmd'); - - -declare global { - // eslint-disable-next-line vars-on-top, no-var - var globalEmitter: EventEmitter; -} - - -type HackEditorRef = { - getValue: () => Promise -}; - -export const PageEditorByHackmd = (): JSX.Element => { - - const { t } = useTranslation(); - const router = useRouter(); - - const { data: isNotFound } = useIsNotFound(); - const { mutate: mutateWaitingSaveProcessing } = useWaitingSaveProcessing(); - const { data: editorMode, mutate: mutateEditorMode } = useEditorMode(); - const { data: currentPagePath } = useCurrentPagePath(); - const { data: currentPathname } = useCurrentPathname(); - const { data: isSlackEnabled } = useIsSlackEnabled(); - const { data: pageId } = useCurrentPageId(); - const { data: pageTags } = usePageTagsForEditors(pageId); - const { mutate: mutateTagsInfo } = useSWRxTagsInfo(pageId); - const { data: grantData } = useSelectedGrant(); - const { data: hackmdUri } = useHackmdUri(); - const saveOrUpdate = useSaveOrUpdate(); - - const { returnPathForURL } = pathUtils; - - // pageData - const { data: pageData } = useSWRxCurrentPage(); - const { trigger: mutatePageData } = useSWRMUTxCurrentPage(); - const revision = pageData?.revision; - - const [isInitialized, setIsInitialized] = useState(false); - const [isInitializing, setIsInitializing] = useState(false); - // for error - const [hasError, setHasError] = useState(false); - const [errorMessage, setErrorMessage] = useState(''); - const [errorReason, setErrorReason] = useState(''); - - // state from pageContainer - const { data: pageIdOnHackmd, mutate: mutatePageIdOnHackmd } = usePageIdOnHackmd(); - const { data: hasDraftOnHackmd, mutate: mutateHasDraftOnHackmd } = useHasDraftOnHackmd(); - const { data: revisionIdHackmdSynced, mutate: mutateRevisionIdHackmdSynced } = useRevisionIdHackmdSynced(); - const { mutate: mutateIsEnabledUnsavedWarning } = useIsEnabledUnsavedWarning(); - const { data: isHackmdDraftUpdatingInRealtime, mutate: mutateIsHackmdDraftUpdatingInRealtime } = useIsHackmdDraftUpdatingInRealtime(); - const { data: remoteRevisionId, mutate: mutateRemoteRevisionId } = useRemoteRevisionId(); - - const updateStateAfterSave = useUpdateStateAfterSave(pageId); - - const hackmdEditorRef = useRef(null); - - const optionsToSave = useMemo((): OptionsToSave | undefined => { - if (grantData == null) { - return; - } - const userRelatedGrantedGroups = grantData.userRelatedGrantedGroups?.map((group) => { - return { item: group.id, type: group.type }; - }); - const optionsToSave = { - isSlackEnabled: isSlackEnabled ?? false, - slackChannels: '', // set in save method by opts in SavePageControlls.tsx - grant: grantData.grant, - pageTags: pageTags ?? [], - userRelatedGrantUserGroupIds: userRelatedGrantedGroups, - }; - return optionsToSave; - }, [grantData, isSlackEnabled, pageTags]); - - const saveAndReturnToViewHandler = useCallback(async(opts?: {overwriteScopesOfDescendants: boolean}) => { - if (editorMode !== EditorMode.HackMD) { return } - - try { - if (currentPathname == null || revision == null || hackmdEditorRef.current == null || revisionIdHackmdSynced == null || optionsToSave == null) { - throw new Error('Some materials to save are invalid'); - } - - mutateWaitingSaveProcessing(true); - - const options = Object.assign(optionsToSave, opts, { isSyncRevisionToHackmd: true }); - - const markdown = await hackmdEditorRef.current.getValue(); - - const { page } = await saveOrUpdate(markdown, { pageId, path: currentPagePath || currentPathname, revisionId: revisionIdHackmdSynced }, options); - - if (page == null) { - return; - } - if (isNotFound) { - await router.push(`/${page._id}`); - } - else { - updateStateAfterSave?.(); - mutateIsHackmdDraftUpdatingInRealtime(false); - - // to sync revision id with page tree: https://github.com/weseek/growi/pull/7227 - mutatePageTree(); - } - setIsInitialized(false); - mutateEditorMode(EditorMode.View); - } - catch (error) { - logger.error('failed to save', error); - toastError(error.message); - } - finally { - mutateWaitingSaveProcessing(false); - } - - // eslint-disable-next-line max-len - }, [ - pageId, currentPagePath, isNotFound, router, - editorMode, currentPathname, revision, revisionIdHackmdSynced, optionsToSave, - saveOrUpdate, mutateEditorMode, updateStateAfterSave, mutateIsHackmdDraftUpdatingInRealtime, mutateWaitingSaveProcessing, - ]); - - // set handler to save and reload Page - useEffect(() => { - globalEmitter.on('saveAndReturnToView', saveAndReturnToViewHandler); - - return function cleanup() { - globalEmitter.removeListener('saveAndReturnToView', saveAndReturnToViewHandler); - }; - }, [saveAndReturnToViewHandler]); - - const resetInitializedStatusHandler = useCallback(() => { - setIsInitialized(false); - }, []); - - - // set handler to save and reload Page - useEffect(() => { - globalEmitter.on('resetInitializedHackMdStatus', resetInitializedStatusHandler); - - return function cleanup() { - globalEmitter.removeListener('resetInitializedHackMdStatus', resetInitializedStatusHandler); - }; - }, [resetInitializedStatusHandler]); - - useEffect(() => { - // for page translation: https://github.com/weseek/growi/pull/7100 - setIsInitialized(false); - }, [pageId]); - - - const isResume = useCallback(() => { - const isPageExistsOnHackmd = (pageIdOnHackmd != null); - return (isPageExistsOnHackmd && hasDraftOnHackmd) || isHackmdDraftUpdatingInRealtime; - }, [hasDraftOnHackmd, isHackmdDraftUpdatingInRealtime, pageIdOnHackmd]); - - const startToEdit = useCallback(async() => { - - if (hackmdUri == null) { - // do nothing - return; - } - - setIsInitialized(false); - setIsInitializing(true); - - try { - const res = await apiPost('/hackmd.integrate', { pageId }); - - if (!res.ok) { - throw new Error(res.error); - } - - mutatePageIdOnHackmd(res.pageIdOnHackmd); - mutateRevisionIdHackmdSynced(res.revisionIdHackmdSynced); - } - catch (err) { - toastError(err.message); - - setHasError(true); - setErrorMessage('GROWI server failed to connect to HackMD.'); - setErrorReason(err.toString()); - } - - setIsInitialized(true); - setIsInitializing(false); - }, [pageId, hackmdUri, mutatePageIdOnHackmd, mutateRevisionIdHackmdSynced]); - - /** - * Start to edit w/o any api request - */ - const resumeToEdit = useCallback(() => { - setIsInitialized(true); - }, []); - - const discardChanges = useCallback(async() => { - - if (pageId == null) { return } - - try { - const res = await apiPost('/hackmd.discard', { pageId }); - - if (!res.ok) { - throw new Error(res.error); - } - - mutateIsHackmdDraftUpdatingInRealtime(false); - mutateHasDraftOnHackmd(false); - mutatePageIdOnHackmd(res.pageIdOnHackmd); - mutateRemoteRevisionId(res.revisionIdHackmdSynced); - mutateRevisionIdHackmdSynced(res.revisionIdHackmdSynced); - - - } - catch (err) { - logger.error(err); - toastError(err.message); - } - }, [mutateIsHackmdDraftUpdatingInRealtime, mutateHasDraftOnHackmd, mutatePageIdOnHackmd, mutateRevisionIdHackmdSynced, mutateRemoteRevisionId, pageId]); - - /** - * save and update state of containers - * @param {string} markdown - */ - const onSaveWithShortcut = useCallback(async(markdown) => { - try { - mutateWaitingSaveProcessing(true); - - const currentPagePathOrPathname = currentPagePath || currentPathname; - if ( - pageId == null || revisionIdHackmdSynced == null || currentPagePathOrPathname == null || optionsToSave == null - ) { throw new Error('Some materials to save are invalid') } - - const options = Object.assign(optionsToSave, { isSyncRevisionToHackmd: true }); - - const res = await saveOrUpdate(markdown, { pageId, path: currentPagePathOrPathname, revisionId: revisionIdHackmdSynced }, options); - - // update pageData - mutatePageData(res); - - // set updated data - updateStateAfterSave?.(); - mutateTagsInfo(); - - // to sync revision id with page tree: https://github.com/weseek/growi/pull/7227 - mutatePageTree(); - - mutateIsEnabledUnsavedWarning(false); - - logger.debug('success to save'); - - toastSuccess(t('successfully_saved_the_page')); - } - catch (error) { - logger.error('failed to save', error); - toastError(error.message); - } - finally { - mutateWaitingSaveProcessing(false); - } - - // eslint-disable-next-line max-len - }, [ - currentPagePath, currentPathname, pageId, revisionIdHackmdSynced, optionsToSave, - saveOrUpdate, - mutateWaitingSaveProcessing, mutatePageData, updateStateAfterSave, mutateTagsInfo, mutateIsEnabledUnsavedWarning, t, - ]); - - /** - * onChange event of HackmdEditor handler - */ - const hackmdEditorChangeHandler = useCallback(async(body) => { - - if (hackmdUri == null || pageId == null) { - // do nothing - return; - } - - if (revision?.body === body) { - return; - } - - mutateIsEnabledUnsavedWarning(true); - - try { - await apiPost('/hackmd.saveOnHackmd', { pageId }); - } - catch (err) { - logger.error(err); - } - }, [hackmdUri, pageId, revision?.body, mutateIsEnabledUnsavedWarning]); - - const penpalErrorOccuredHandler = useCallback((error) => { - toastError(error.message); - - setHasError(true); - setErrorMessage(t('hackmd.fail_to_connect')); - setErrorReason(error.toString()); - }, [t]); - - const renderPreInitContent = useCallback(() => { - const isPageNotFound = pageId == null; - - let content; - - /* - * HackMD is not setup - */ - if (hackmdUri == null) { - content = ( -
    -

    description { t('hackmd.not_set_up')}

    - {/* eslint-disable-next-line react/no-danger */} -

    -

    - ); - } - - /* - * used HackMD from NotFound Page - */ - else if (isPageNotFound) { - content = ( -
    -

    - description - { t('hackmd.used_for_not_found') } -

    - {/* eslint-disable-next-line react/no-danger */} -

    -

    - ); - } - /* - * Resume to edit or discard changes - */ - else if (isResume()) { - const isHackmdDocumentOutdated = revisionIdHackmdSynced !== remoteRevisionId; - - content = ( -
    -

    description HackMD is READY!

    -

    {t('hackmd.unsaved_draft')}

    - - { isHackmdDocumentOutdated && ( -
    -
    info {t('hackmd.draft_outdated')}
    -
    - {t('hackmd.based_on_revision')}  - { pageData != null && ( - - {revisionIdHackmdSynced?.substr(-8)} - - )} -
    - -
    -
    -
    - ) } - - { !isHackmdDocumentOutdated && ( -
    - -
    - ) } - -
    - -
    - -
    - ); - } - /* - * Start to edit - */ - else { - const isRevisionOutdated = revision?._id !== remoteRevisionId; - - content = ( -
    -

    description HackMD is READY!

    -
    - -
    -

    {t('hackmd.clone_page_content')}

    -
    - ); - } - - return ( -
    - {content} -
    - ); - // eslint-disable-next-line max-len - }, [pageId, hackmdUri, isResume, t, revisionIdHackmdSynced, remoteRevisionId, pageData, returnPathForURL, isInitializing, resumeToEdit, discardChanges, revision?._id, startToEdit]); - - if (editorMode == null || revision == null) { - return <>; - } - - let content; - - // TODO: typescriptize - // using any because ref cann't used between FC and class conponent with type safe - const AnyEditor = HackmdEditor as any; - - if (isInitialized && hackmdUri != null) { - content = ( - { - onSaveWithShortcut(document); - }} - onPenpalErrorOccured={penpalErrorOccuredHandler} - > - - ); - } - else { - content = renderPreInitContent(); - } - - - return ( -
    - - {content} - - { hasError && ( -
    -
    -

    error {t('hackmd.integration_failed')}

    -

    {errorMessage}

    -

    - {errorReason} -

    - {/* eslint-disable-next-line react/no-danger */} -

    -

    -
    - ) } - -
    - ); - -}; diff --git a/apps/app/_obsolete/src/components/PageEditorByHackmd/HackmdEditor.jsx b/apps/app/_obsolete/src/components/PageEditorByHackmd/HackmdEditor.jsx deleted file mode 100644 index 5c01c63a657..00000000000 --- a/apps/app/_obsolete/src/components/PageEditorByHackmd/HackmdEditor.jsx +++ /dev/null @@ -1,115 +0,0 @@ -import React from 'react'; - -import connectToChild from 'penpal/lib/connectToChild'; -import PropTypes from 'prop-types'; - -import loggerFactory from '~/utils/logger'; - - -const DEBUG_PENPAL = false; - -const logger = loggerFactory('growi:HackmdEditor'); - -export default class HackmdEditor extends React.PureComponent { - - constructor(props) { - super(props); - - this.hackmd = null; - - this.initHackmdWithPenpal = this.initHackmdWithPenpal.bind(this); - - this.notifyBodyChangesHandler = this.notifyBodyChangesHandler.bind(this); - this.saveWithShortcutHandler = this.saveWithShortcutHandler.bind(this); - } - - componentDidMount() { - // append iframe with penpal - this.initHackmdWithPenpal(); - } - - async initHackmdWithPenpal() { - const shouldInit = document.getElementById('iframe-hackmd') != null; - if (shouldInit) { - return; - } - - // eslint-disable-next-line @typescript-eslint/no-this-alias - const _this = this; // for in methods scope - const iframe = document.createElement('iframe'); - iframe.src = `${this.props.hackmdUri}/${this.props.pageIdOnHackmd}?both`; - iframe.id = 'iframe-hackmd'; - this.iframeContainer.appendChild(iframe); - - const connection = connectToChild({ - iframe, - methods: { // expose methods to HackMD - notifyBodyChanges(document) { - _this.notifyBodyChangesHandler(document); - }, - saveWithShortcut(document) { - _this.saveWithShortcutHandler(document); - }, - }, - timeout: 15000, - debug: DEBUG_PENPAL, - }); - - try { - const child = await connection.promise; - this.hackmd = child; - if (this.props.initializationMarkdown != null) { - child.setValueOnInit(this.props.initializationMarkdown); - } - } - catch (err) { - logger.error(err); - - if (this.props.onPenpalErrorOccured != null) { - this.props.onPenpalErrorOccured(err); - } - } - } - - /** - * return markdown document of HackMD - * @return {Promise} - */ - getValue() { - return this.hackmd.getValue(); - } - - setValue(newValue) { - this.hackmd.setValue(newValue); - } - - notifyBodyChangesHandler(body) { - // dispatch onChange() when there is difference from 'initializationMarkdown' props - if (this.props.onChange != null && body !== this.props.initializationMarkdown) { - this.props.onChange(body); - } - } - - saveWithShortcutHandler(document) { - if (this.props.onSaveWithShortcut != null) { - this.props.onSaveWithShortcut(document); - } - } - - render() { - return ( - // will be rendered in componentDidMount -
    { this.iframeContainer = c }}>
    - ); - } - -} - -HackmdEditor.propTypes = { - hackmdUri: PropTypes.string.isRequired, - pageIdOnHackmd: PropTypes.string.isRequired, - initializationMarkdown: PropTypes.string, - onChange: PropTypes.func, - onSaveWithShortcut: PropTypes.func, - onPenpalErrorOccured: PropTypes.func, -}; diff --git a/apps/app/_obsolete/src/components/UncontrolledCodeMirror.tsx b/apps/app/_obsolete/src/components/UncontrolledCodeMirror.tsx deleted file mode 100644 index f628338bfc7..00000000000 --- a/apps/app/_obsolete/src/components/UncontrolledCodeMirror.tsx +++ /dev/null @@ -1,101 +0,0 @@ -import React, { - useCallback, useRef, MutableRefObject, -} from 'react'; - -import codemirror, { commands, Editor } from 'codemirror'; -import { type ICodeMirror, UnControlled as CodeMirror } from 'react-codemirror2'; - -declare global { - // eslint-disable-next-line vars-on-top, no-var - var CodeMirror: ICodeMirror; -} - -// set save handler -// CommandActions in @types/codemirror does not include 'save' but actualy exists -// https://codemirror.net/5/doc/manual.html#commands -(commands as any).save = (instance) => { - if (instance.codeMirrorEditor != null) { - instance.codeMirrorEditor.dispatchSave(); - } -}; - -window.CodeMirror = codemirror; -require('codemirror/addon/display/placeholder'); -require('~/client/util/codemirror/gfm-growi.mode'); - -export interface UncontrolledCodeMirrorProps extends ICodeMirror { - value: string; - isGfmMode?: boolean; - lineNumbers?: boolean; - onSave?: () => Promise; - onCtrlEnter?: (event: Event) => void; - onPasteFiles?: (editor: any, event: Event) => void; - onScrollCursorIntoView?: (editor: any, event: Event) => void; -} - -export const UncontrolledCodeMirror = React.forwardRef((props, forwardedRef): JSX.Element => { - - const { - value, lineNumbers, options, - onPasteFiles, onScrollCursorIntoView, - ...rest - } = props; - - const editorRef = useRef(); - - const wrapperRef = useRef(); - - const editorDidMountHandler = useCallback((editor: Editor): void => { - editorRef.current = editor; - if (onPasteFiles != null) { - editor.on('paste', onPasteFiles); - } - if (onScrollCursorIntoView != null) { - editor.on('scrollCursorIntoView', onScrollCursorIntoView); - } - }, [onPasteFiles, onScrollCursorIntoView]); - - const editorWillUnmountHandler = useCallback((): void => { - // workaround to fix editor duplicating by https://github.com/scniro/react-codemirror2/issues/284#issuecomment-1155928554 - if (editorRef.current != null) { - (editorRef.current as any).display.wrapper.remove(); - } - if (wrapperRef.current != null) { - (wrapperRef.current as any).hydrated = false; - } - }, []); - - // default true - const isGfmMode = rest.isGfmMode ?? true; - - return ( - { - // register to wrapperRef - wrapperRef.current = elem; - // register to forwardedRef - if (forwardedRef != null) { - if (typeof forwardedRef === 'function') { - forwardedRef(elem); - } - else { - (forwardedRef as MutableRefObject).current = elem; - } - } - }} - value={value} - options={{ - lineNumbers: lineNumbers ?? true, - mode: isGfmMode ? 'gfm-growi' : undefined, - tabSize: 4, - ...options, - }} - editorDidMount={editorDidMountHandler} - editorWillUnmount={editorWillUnmountHandler} - {...rest} - /> - ); - -}); - -UncontrolledCodeMirror.displayName = 'UncontrolledCodeMirror'; diff --git a/apps/app/_obsolete/src/interfaces/hackmd.ts b/apps/app/_obsolete/src/interfaces/hackmd.ts deleted file mode 100644 index dec8d416000..00000000000 --- a/apps/app/_obsolete/src/interfaces/hackmd.ts +++ /dev/null @@ -1,16 +0,0 @@ - -export interface IResHackmdIntegrated { - ok: boolean, - error?: any, - pageIdOnHackmd?: string, - revisionIdHackmdSynced?: string, - hasDraftOnHackmd?: string -} - -export interface IResHackmdDiscard { - ok: boolean, - error?: any, - pageIdOnHackmd?: string, - revisionIdHackmdSynced?: string, - hasDraftOnHackmd?: string -} diff --git a/apps/app/_obsolete/src/server/routes/hackmd.js b/apps/app/_obsolete/src/server/routes/hackmd.js deleted file mode 100644 index 668ab91b05a..00000000000 --- a/apps/app/_obsolete/src/server/routes/hackmd.js +++ /dev/null @@ -1,346 +0,0 @@ -import * as hackmdFiles from '@growi/hackmd'; - -import loggerFactory from '~/utils/logger'; - -/* eslint-disable no-use-before-define */ - -const logger = loggerFactory('growi:routes:hackmd'); - -const axios = require('axios'); -const ejs = require('ejs'); - -const ApiResponse = require('../util/apiResponse'); - -/** - * @swagger - * - * components: - * schemas: - * Hackmd: - * description: Hackmd - * type: object - * properties: - * pageIdOnHackmd: - * type: string - * description: page ID on HackMD - * example: qLnodHLxT6C3hVEVczvbDQ - * revisionIdHackmdSynced: - * $ref: '#/components/schemas/Revision/properties/_id' - * hasDraftOnHackmd: - * type: boolean - * description: has draft on HackMD - * example: false - */ -module.exports = function(crowi, app) { - const Page = crowi.models.Page; - const pageEvent = crowi.event('page'); - - /** - * GET /_hackmd/load-agent - * - * loadAgent action - * This should be access from HackMD and send agent script - * - * @param {object} req - * @param {object} res - */ - const loadAgent = function(req, res) { - - const origin = crowi.appService.getSiteUrl(); - - // generate definitions to replace - const definitions = { - origin, - }; - - // inject origin to script - const script = ejs.render(hackmdFiles.agentJS, definitions); - - res.set('Content-Type', 'application/javascript'); - res.send(script); - }; - - /** - * GET /_hackmd/load-styles - * - * loadStyles action - * This should be access from HackMD and send script to insert styles - * - * @param {object} req - * @param {object} res - */ - const loadStyles = function(req, res) { - - // generate definitions to replace - const definitions = { - styles: hackmdFiles.stylesCSS, - }; - // inject styles to script - const script = ejs.render(hackmdFiles.stylesJS, definitions); - - res.set('Content-Type', 'application/javascript'); - res.send(script); - }; - - const validateForApi = async function(req, res, next) { - // validate process.env.HACKMD_URI - const hackmdUri = process.env.HACKMD_URI; - if (hackmdUri == null) { - return res.json(ApiResponse.error('HackMD for GROWI has not been setup')); - } - // validate pageId - const pageId = req.body.pageId; - if (pageId == null) { - return res.json(ApiResponse.error('pageId required')); - } - // validate page - const page = await Page.findOne({ _id: pageId }); - if (page == null) { - return res.json(ApiResponse.error(`Page('${pageId}') does not exist`)); - } - - req.page = page; - next(); - }; - - /** - * @swagger - * - * /hackmd.integrate: - * post: - * tags: [Hackmd] - * operationId: integrateHackmd - * summary: /hackmd.integrate - * description: Integrate hackmd - * requestBody: - * content: - * application/json: - * schema: - * properties: - * pageId: - * $ref: '#/components/schemas/Page/properties/_id' - * page: - * $ref: '#/components/schemas/Hackmd' - * responses: - * 200: - * description: Succeeded to integrate HackMD. - * content: - * application/json: - * schema: - * properties: - * ok: - * $ref: '#/components/schemas/V1Response/properties/ok' - * pageIdOnHackmd: - * $ref: '#/components/schemas/Hackmd/properties/pageIdOnHackmd' - * revisionIdHackmdSynced: - * $ref: '#/components/schemas/Hackmd/properties/revisionIdHackmdSynced' - * hasDraftOnHackmd: - * $ref: '#/components/schemas/Hackmd/properties/hasDraftOnHackmd' - * 403: - * $ref: '#/components/responses/403' - * 500: - * $ref: '#/components/responses/500' - */ - /** - * POST /_api/hackmd.integrate - * - * Create page on HackMD and start to integrate - * @param {object} req - * @param {object} res - */ - const integrate = async function(req, res) { - const hackmdUri = process.env.HACKMD_URI_FOR_SERVER || process.env.HACKMD_URI; - let page = req.page; - - const hackmdPageUri = (page.pageIdOnHackmd != null) - ? `${hackmdUri}/${page.pageIdOnHackmd}` - : `${hackmdUri}/new`; - - let hackmdResponse; - try { - // check if page is found or created in HackMD - hackmdResponse = await axios.get(hackmdPageUri, { - maxRedirects: 0, - // validate HTTP status is 200 or 302 or 404 - validateStatus: (status) => { - return status === 200 || status === 302 || status === 404; - }, - }); - } - catch (err) { - logger.error(err); - return res.json(ApiResponse.error(err)); - } - - const { status, headers } = hackmdResponse; - - // validate HackMD/CodiMD/HedgeDoc specific header - if (headers['codimd-version'] == null && headers['hackmd-version'] == null && headers['hedgedoc-version'] == null) { - const message = 'Connecting to a non-HackMD server.'; - logger.error(message); - return res.json(ApiResponse.error(message)); - } - - try { - // when page is not found - if (status === 404) { - // reset registered data - page = await Page.registerHackmdPage(page, undefined); - // re-invoke - return integrate(req, res); - } - - // when redirect - if (status === 302) { - // extract page id on HackMD - const pathnameOnHackmd = new URL(headers.location, hackmdUri).pathname; // e.g. '/NC7bSRraT1CQO1TO7wjCPw' - const pageIdOnHackmd = pathnameOnHackmd.substr(1); // strip the head '/' - - page = await Page.registerHackmdPage(page, pageIdOnHackmd); - } - // when page is found - else { - page = await Page.syncRevisionToHackmd(page); - } - - const data = { - pageIdOnHackmd: page.pageIdOnHackmd, - revisionIdHackmdSynced: page.revisionHackmdSynced, - hasDraftOnHackmd: page.hasDraftOnHackmd, - }; - return res.json(ApiResponse.success(data)); - } - catch (err) { - logger.error(err); - return res.json(ApiResponse.error('Integration with HackMD process failed')); - } - }; - - /** - * @swagger - * - * /hackmd.discard: - * post: - * tags: [Hackmd] - * operationId: discardHackmd - * summary: /hackmd.discard - * description: Discard hackmd - * requestBody: - * content: - * application/json: - * schema: - * properties: - * pageId: - * $ref: '#/components/schemas/Page/properties/_id' - * page: - * $ref: '#/components/schemas/Hackmd' - * responses: - * 200: - * description: Succeeded to integrate HackMD. - * content: - * application/json: - * schema: - * properties: - * ok: - * $ref: '#/components/schemas/V1Response/properties/ok' - * pageIdOnHackmd: - * $ref: '#/components/schemas/Hackmd/properties/pageIdOnHackmd' - * revisionIdHackmdSynced: - * $ref: '#/components/schemas/Hackmd/properties/revisionIdHackmdSynced' - * hasDraftOnHackmd: - * $ref: '#/components/schemas/Hackmd/properties/hasDraftOnHackmd' - * 403: - * $ref: '#/components/responses/403' - * 500: - * $ref: '#/components/responses/500' - */ - /** - * POST /_api/hackmd.discard - * - * Create page on HackMD and start to integrate - * @param {object} req - * @param {object} res - */ - const discard = async function(req, res) { - let page = req.page; - - try { - page = await Page.syncRevisionToHackmd(page); - - const data = { - pageIdOnHackmd: page.pageIdOnHackmd, - revisionIdHackmdSynced: page.revisionHackmdSynced, - hasDraftOnHackmd: page.hasDraftOnHackmd, - }; - return res.json(ApiResponse.success(data)); - } - catch (err) { - logger.error(err); - return res.json(ApiResponse.error('discard process failed')); - } - }; - - /** - * @swagger - * - * /hackmd.saveOnHackmd: - * post: - * tags: [Hackmd] - * operationId: saveOnHackmd - * summary: /hackmd.saveOnHackmd - * description: Receive when save operation triggered on HackMD - * requestBody: - * content: - * application/json: - * schema: - * properties: - * pageId: - * $ref: '#/components/schemas/Page/properties/_id' - * page: - * $ref: '#/components/schemas/Hackmd' - * responses: - * 200: - * description: Succeeded to receive when save operation triggered on HackMD. - * content: - * application/json: - * schema: - * properties: - * ok: - * $ref: '#/components/schemas/V1Response/properties/ok' - * 403: - * $ref: '#/components/responses/403' - * 500: - * $ref: '#/components/responses/500' - */ - /** - * POST /_api/hackmd.saveOnHackmd - * - * receive when save operation triggered on HackMD - * !! This will be invoked many time from many people !! - * - * @param {object} req - * @param {object} res - */ - const saveOnHackmd = async function(req, res) { - const { page, user } = req; - - try { - await Page.updateHasDraftOnHackmd(page, true); - pageEvent.emit('saveOnHackmd', page, user); - return res.json(ApiResponse.success()); - } - catch (err) { - logger.error(err); - return res.json(ApiResponse.error('saveOnHackmd process failed')); - } - }; - - return { - loadAgent, - loadStyles, - validateForApi, - integrate, - discard, - saveOnHackmd, - }; -}; diff --git a/apps/app/_obsolete/src/stores/hackmd.ts b/apps/app/_obsolete/src/stores/hackmd.ts deleted file mode 100644 index 451aba721d8..00000000000 --- a/apps/app/_obsolete/src/stores/hackmd.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { SWRResponse } from 'swr'; - -import { useStaticSWR } from './use-static-swr'; - -type Nullable = T | null; - -export const usePageIdOnHackmd = (initialData?: Nullable): SWRResponse, Error> => { - return useStaticSWR, Error>('pageIdOnHackmd', initialData); -}; - - -export const useHasDraftOnHackmd = (initialData?: Nullable): SWRResponse, Error> => { - return useStaticSWR, Error>('hasDraftOnHackmd', initialData); -}; - -export const useRevisionIdHackmdSynced = (initialData?: Nullable): SWRResponse, Error> => { - return useStaticSWR, Error>('revisionIdHackmdSynced', initialData); -}; - -export const useIsHackmdDraftUpdatingInRealtime = (initialData?: Nullable): SWRResponse, Error> => { - return useStaticSWR, Error>('isHackmdDraftUpdatingInRealtime', initialData); -}; diff --git a/apps/app/_obsolete/src/styles/_override.scss b/apps/app/_obsolete/src/styles/_override.scss deleted file mode 100644 index f7335c2c263..00000000000 --- a/apps/app/_obsolete/src/styles/_override.scss +++ /dev/null @@ -1,170 +0,0 @@ -// TODO: activate (https://redmine.weseek.co.jp/issues/128307) - -// * { -// 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: 18px; -// } - -// // Navs -// .nav-tabs { -// .nav-item { -// margin-right: 0.15rem; -// a.active { -// cursor: default; -// } -// } -// } - -// // Custom Control -// .form-check { -// .form-check-input, -// .form-check-input + .form-check-label { -// cursor: pointer; -// } -// } - -// // card (substitute panel of bootstrap3) -// .card { -// margin-bottom: 20px; -// } - -// .card-header { -// font-weight: 700; -// text-transform: none; -// } - -// .card-header:first-child { -// } - -// .card.custom-card { -// 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; -// } -// } - -// //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; -// } diff --git a/apps/app/_obsolete/src/styles/theme/_hsl-functions.scss b/apps/app/_obsolete/src/styles/theme/_hsl-functions.scss deleted file mode 100644 index ec8088e4d04..00000000000 --- a/apps/app/_obsolete/src/styles/theme/_hsl-functions.scss +++ /dev/null @@ -1,32 +0,0 @@ -@use 'bootstrap/scss/functions' as bs; - -@function contrast($color, $darken-degrees: 0%, $alpha-degrees: 100%) { - $color: bs.str-replace($color, 'var('); - $color: bs.str-replace($color, ')'); - $color-hs: var(#{$color+'-hs'}); - $color-l: var(#{$color+'-l'}); - // @return hsl($color-hs, clamp(10%, calc((100% - $color-l - 51% ) * 1000), 95%)); - @return hsla($color-hs, clamp(10%, calc((100% - $color-l - $darken-degrees - 51% ) * 1000), 95%), $alpha-degrees); -} - -@function lighten($color, $degrees) { - $color: bs.str-replace($color, 'var('); - $color: bs.str-replace($color, ')'); - $color-hs: var(#{$color+'-hs'}); - $color-l: var(#{$color+'-l'}); - @return hsl($color-hs, calc($color-l + $degrees)); -} -@function darken($color, $degrees) { - $color: bs.str-replace($color, 'var('); - $color: bs.str-replace($color, ')'); - $color-hs: var(#{$color+'-hs'}); - $color-l: var(#{$color+'-l'}); - @return hsl($color-hs, calc($color-l - $degrees)); -} -@function alpha($color, $degrees) { - $color: bs.str-replace($color, 'var('); - $color: bs.str-replace($color, ')'); - $color-hs: var(#{$color+'-hs'}); - $color-l: var(#{$color+'-l'}); - @return hsla($color-hs,$color-l,$degrees); -} diff --git a/apps/app/_obsolete/src/styles/theme/_hsl-reboot-bootstrap-theme-colors.scss b/apps/app/_obsolete/src/styles/theme/_hsl-reboot-bootstrap-theme-colors.scss deleted file mode 100644 index 688f48a0bb2..00000000000 --- a/apps/app/_obsolete/src/styles/theme/_hsl-reboot-bootstrap-theme-colors.scss +++ /dev/null @@ -1,108 +0,0 @@ -@use '../bootstrap/init' as *; -@use '../atoms/mixins/buttons' as mixins-buttons; -@use './mixins/hsl-button'; -@use './mixins/hsl-badge'; -@use './hsl-functions' as hsl; - -$hsl-colors: ( - 'primary': var(--primary), - 'secondary': var(--secondary) -); - -@each $color, $value in $hsl-colors { - .bg-#{$color} { - background-color: $value !important; - } -} - -@each $color, $value in $hsl-colors { - .border-#{$color} { - border-color: $value !important; - } -} - -// TODO: hover-focus() dropped in bootstrap v5 -// https://redmine.weseek.co.jp/issues/128307 -// @each $color, $value in $hsl-colors { -// .text-#{$color} { -// color: $value !important; -// @if $emphasized-link-hover-darken-percentage != 0 { -// a { -// @include hover-focus() { -// color: hsl.darken($value, $emphasized-link-hover-darken-percentage) !important; -// } -// } -// } -// } -// } - -@each $color, $value in $hsl-colors { - .btn-#{$color} { - @include hsl-button.button-variant($value, $value); - @include hsl-button.button-svg-icon-variant($value, $value); - box-shadow: none !important; - } -} - -@each $color, $value in $hsl-colors { - .btn-outline-#{$color} { - @include hsl-button.button-outline-variant($value, $value, hsl.alpha($value, 10%), $value); - @include mixins-buttons.button-outline-svg-icon-variant($value, $value); - - &:not(:disabled):not(.disabled):active, - &:not(:disabled):not(.disabled).active { - color: $value; - background-color: hsl.alpha($value, 10%); - 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: hsl.alpha($value, 10%); - border-color: $value; - } -} - -@each $color, $value in $hsl-colors { - .alert-#{$color} { - $alert-color: rgba(white,90%); - $alert-bg-color: hsl.darken($value, calc($alert-bg-level + 0.95) * $theme-color-interval); - $alert-border-color: hsl.darken($value, $alert-border-level * $theme-color-interval); - - color: $alert-color; - @include gradient-bg($alert-bg-color); - border-color: $alert-border-color; - - hr { - border-top-color: hsl.darken($value, calc($alert-border-level + 5) * $theme-color-interval); - } - - .alert-link { - color: hsl.contrast($value); - } - } - - // Alert link - :root, .wiki { - .alert.alert-primary { - a, - a:hover { - color: hsl.darken($value, calc($alert-bg-level - 7.7) * $theme-color-interval); - } - } - } -} - -@each $color, $value in $hsl-colors { - .bg-#{$color} { - @include hsl-badge.badge-variant($value); - } - - a.bg-#{$color} { - @include hsl-badge.badge-variant($value); - } -} diff --git a/apps/app/_obsolete/src/styles/theme/_reboot-bootstrap-border-colors.scss b/apps/app/_obsolete/src/styles/theme/_reboot-bootstrap-border-colors.scss deleted file mode 100644 index c2f728505fb..00000000000 --- a/apps/app/_obsolete/src/styles/theme/_reboot-bootstrap-border-colors.scss +++ /dev/null @@ -1,29 +0,0 @@ -@use '../bootstrap/init' as *; - -// -// Border -// - -.border { - border: $border-width solid $border-color !important; -} - -.border-top { - border-top: $border-width solid $border-color !important; -} - -.border-end { - border-right: $border-width solid $border-color !important; -} - -.border-bottom { - border-bottom: $border-width solid $border-color !important; -} - -.border-start { - border-left: $border-width solid $border-color !important; -} - -.border-info { - border-color: $info !important; -} diff --git a/apps/app/_obsolete/src/styles/theme/_reboot-bootstrap-buttons.scss b/apps/app/_obsolete/src/styles/theme/_reboot-bootstrap-buttons.scss deleted file mode 100644 index a58231c19ef..00000000000 --- a/apps/app/_obsolete/src/styles/theme/_reboot-bootstrap-buttons.scss +++ /dev/null @@ -1,22 +0,0 @@ -.btn-link { - color: var(--color-link); - svg { - fill: var(--color-link); - } - - &:hover { - color: var(--color-link-hover); - svg { - fill: var(--color-link-hover); - } - } - - &:disabled, - &.disabled { - color: var(--color-link-disabled, #{$gray-500}); - svg { - fill: var(--color-link-disabled, #{$gray-500}); - } - } -} - diff --git a/apps/app/_obsolete/src/styles/theme/_reboot-bootstrap-colors.scss b/apps/app/_obsolete/src/styles/theme/_reboot-bootstrap-colors.scss deleted file mode 100644 index 9ded17996ca..00000000000 --- a/apps/app/_obsolete/src/styles/theme/_reboot-bootstrap-colors.scss +++ /dev/null @@ -1,60 +0,0 @@ -// -// -// 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 `` elements. - -html, body { - color: var(--color-global); - background-color: var(--bgcolor-global); // 2 - - svg { - fill: var(--color-global); - } -} - -// Links - -a { - color: var(--color-link); - text-decoration: $link-decoration; - background-color: transparent; // Remove the gray background on active links in IE 10. - - svg { - fill: var(--color-link); - } - - &:hover { - color: var(--color-link-hover); - text-decoration: $link-hover-decoration; - - svg { - fill: var(--color-link-hover); - } - } -} - -// 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; - -// &:hover { -// color: inherit; -// text-decoration: none; -// } -// } diff --git a/apps/app/_obsolete/src/styles/theme/_reboot-bootstrap-dropdown.scss b/apps/app/_obsolete/src/styles/theme/_reboot-bootstrap-dropdown.scss deleted file mode 100644 index 83243cde5fc..00000000000 --- a/apps/app/_obsolete/src/styles/theme/_reboot-bootstrap-dropdown.scss +++ /dev/null @@ -1,38 +0,0 @@ -@use '../bootstrap/init' as *; - -.dropdown-menu { - color: $color-dropdown; - svg { - fill: $color-dropdown; - } - - background-color: $bgcolor-dropdown; -} - -.dropdown-item { - color: $color-dropdown-link; - svg { - fill: $color-dropdown-link; - } - - // TODO: hover-focus() dropped in bootstrap v5 - @include hover-focus() { - color: $color-dropdown-link; - svg { - fill: $color-dropdown-link-hover; - } - - @include gradient-bg($bgcolor-dropdown-link-hover); - } - - &:active, - &.active, - &:active:hover, - &.active:hover { - color: $color-dropdown-link-active; - background-color: $bgcolor-dropdown-link-active; - svg { - fill: $color-dropdown-link-active; - } - } -} diff --git a/apps/app/_obsolete/src/styles/theme/_reboot-bootstrap-nav.scss b/apps/app/_obsolete/src/styles/theme/_reboot-bootstrap-nav.scss deleted file mode 100644 index 2cf9cb71b53..00000000000 --- a/apps/app/_obsolete/src/styles/theme/_reboot-bootstrap-nav.scss +++ /dev/null @@ -1,52 +0,0 @@ -// -// -// 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); - - // TODO: hover-focus() dropped in bootstrap v5 - @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); - } -} diff --git a/apps/app/_obsolete/src/styles/theme/_reboot-bootstrap-tables.scss b/apps/app/_obsolete/src/styles/theme/_reboot-bootstrap-tables.scss deleted file mode 100644 index 375fb75235b..00000000000 --- a/apps/app/_obsolete/src/styles/theme/_reboot-bootstrap-tables.scss +++ /dev/null @@ -1,74 +0,0 @@ -@use '../bootstrap/init' as *; - -// -// -// Apply partially -// https://github.com/twbs/bootstrap/blob/v4.5.0/scss/_tables.scss -// -// - -.table { - color: $color-table; - background-color: $bgcolor-table; // Reset for nesting within parents with `background-color`. - - th, - td { - border-top-color: $border-color-table; - } - - thead th { - border-bottom-color: $border-color-table; - } - - tbody + tbody { - border-top-color: $border-color-table; - } -} - -.table-bordered { - border-color: $border-color-table; - - th, - td { - border-color: $border-color-table; - } -} - -.table-hover { - tbody tr { - &:hover { - color: $color-table-hover; - background-color: $bgcolor-table-hover; - } - } -} - -.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 { - &:hover { - color: $table-dark-hover-color; - background-color: $table-dark-hover-bg; - } - } - } -} diff --git a/apps/app/_obsolete/src/styles/theme/_reboot-bootstrap-text.scss b/apps/app/_obsolete/src/styles/theme/_reboot-bootstrap-text.scss deleted file mode 100644 index 7dddde431aa..00000000000 --- a/apps/app/_obsolete/src/styles/theme/_reboot-bootstrap-text.scss +++ /dev/null @@ -1,3 +0,0 @@ -.text-muted { - color: $text-muted !important; -} diff --git a/apps/app/_obsolete/src/styles/theme/_reboot-bootstrap-theme-colors.scss b/apps/app/_obsolete/src/styles/theme/_reboot-bootstrap-theme-colors.scss deleted file mode 100644 index 5d4f3d14ad6..00000000000 --- a/apps/app/_obsolete/src/styles/theme/_reboot-bootstrap-theme-colors.scss +++ /dev/null @@ -1,103 +0,0 @@ -@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; - } -} - -@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 { - .form-check-#{$theme-color} { - .form-check-label::before { - border-color: $input-border-color; - transition: 0.3s ease-in-out; - } - .form-check-input:checked + .form-check-label::before { - background-color: $color; - border-color: $color; - } - .form-check-input:checked + .form-check-label::after { - color: var(--bgcolor-global); - } - .form-check-input:not(:disabled):active ~ .form-check-label::before { - color: var(--bgcolor-global); - background-color: $color; - border-color: $color; - } - .form-check-input:focus:not(:checked) ~ .form-check-label::before { - color: var(--bgcolor-global); - background-color: var(--bgcolor-global); - border-color: $input-focus-border-color; - } - } -} - -// TODO: activate (https://redmine.weseek.co.jp/issues/128307) -// theme-color-level() dropped in bootstrap v5 -// @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) -// ); -// } -// // Alert link -// :root, .wiki { -// .alert.alert-#{$color} { -// a, -// a:hover { -// color: theme-color-level($color, $alert-color-level - 2); -// } -// } -// } -// } - -@each $color, $value in $theme-colors { - .bg-#{$color} { - @include badge-variant($value); - } - a.bg-#{$color} { - @include badge-variant($value); - } -} diff --git a/apps/app/_obsolete/src/styles/theme/mixins/_count-badge.scss b/apps/app/_obsolete/src/styles/theme/mixins/_count-badge.scss deleted file mode 100644 index 5e605ee0b52..00000000000 --- a/apps/app/_obsolete/src/styles/theme/mixins/_count-badge.scss +++ /dev/null @@ -1,9 +0,0 @@ -@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; -} diff --git a/apps/app/_obsolete/src/styles/theme/mixins/_hsl-badge.scss b/apps/app/_obsolete/src/styles/theme/mixins/_hsl-badge.scss deleted file mode 100644 index cc2c13b902e..00000000000 --- a/apps/app/_obsolete/src/styles/theme/mixins/_hsl-badge.scss +++ /dev/null @@ -1,23 +0,0 @@ -@use '../../bootstrap/init' as bs; -@use '../hsl-functions' as hsl; - -// @mixin badge-variant($bg) { -@mixin badge-variant($bg) { - color: hsl.contrast($bg); - background-color: $bg; - - @at-root a#{&} { - // TODO: hover-focus() dropped in bootstrap v5 - // https://redmine.weseek.co.jp/issues/128307 - // @include bs.hover-focus() { - // color: hsl.contrast($bg); - // background-color: hsl.darken($bg, 10%); - // } - - &:focus, - &.focus { - outline: 0; - // box-shadow: 0 0 0 $badge-focus-width hsl.alpha($bg, 50%); - } - } -} diff --git a/apps/app/_obsolete/src/styles/theme/mixins/_hsl-button.scss b/apps/app/_obsolete/src/styles/theme/mixins/_hsl-button.scss deleted file mode 100644 index 76184bb12df..00000000000 --- a/apps/app/_obsolete/src/styles/theme/mixins/_hsl-button.scss +++ /dev/null @@ -1,146 +0,0 @@ -@use '@growi/core/scss/bootstrap/init' as bs; -@use '../hsl-functions' as hsl; - -// @mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) { -@mixin button-variant($background, $border, $hover-background-darken-degrees: 7.5%, $hover-border-darken-degrees: 10%, $active-background-darken-degrees: 10%, $active-border-darken-degrees: 12.5%) { - $hover-background: hsl.darken($background, $hover-background-darken-degrees); // DO NOT ... twice - $hover-border: hsl.darken($border, $hover-border-darken-degrees); // DO NOT ... twice - - color: hsl.contrast($background); - @include bs.gradient-bg($background); - border-color: $border; - // @include box-shadow($btn-box-shadow); - - &:hover { - color: hsl.contrast($background); - @include bs.gradient-bg($hover-background); - border-color: $hover-border; - } - - &:focus, - &.focus { - color: hsl.contrast($background); - @include bs.gradient-bg($hover-background); - border-color: $hover-border; - // TODO: color-yiq() to color-contrast() - // https://redmine.weseek.co.jp/issues/128307 - // @if $enable-shadows { - // @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5)); - // } @else { - // // Avoid using mixin so we can pass custom focus shadow properly - // box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5); - // } - } - - // // Disabled comes first so active can properly restyle - &.disabled, - &:disabled { - color: hsl.contrast($background); - @include bs.gradient-bg($background); - border-color: $border; - // Remove CSS gradients if they're enabled - @if bs.$enable-gradients { - background-image: none; - } - } - - &:not(:disabled):not(.disabled):active, - &:not(:disabled):not(.disabled).active, - .show > &.dropdown-toggle { - color: hsl.contrast($background); - background-color: $hover-background; - border-color: $hover-border; - } - // @if $enable-gradients { - // background-image: none; // Remove the gradient for the pressed/active state - // } - // border-color: $active-border; - - // TODO: color-yiq() to color-contrast() - // https://redmine.weseek.co.jp/issues/128307 - // &:focus { - // // @if $enable-shadows and $btn-active-box-shadow != none { - // // @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5)); - // // } @else { - // // // Avoid using mixin so we can pass custom focus shadow properly - // // box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5); - // // } - // } - // } -} - -// @mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) { -@mixin button-outline-variant($color, $color-hover: hsl.contrast($color), $active-background: $color, $active-border: $color) { - color: $color; - border-color: $color; - - &:hover { - color: $color-hover; - background-color: $active-background; - border-color: $active-border; - } - - // &:focus, - // &.focus { - // box-shadow: 0 0 0 bs.$btn-focus-width hsl.alpha($color,50%); - // } - - &.disabled, - &:disabled { - color: $color; - background-color: transparent; - } - - // &:not(:disabled):not(.disabled):active, - // &:not(:disabled):not(.disabled).active, - // .show > &.dropdown-toggle { - // color: hsl.contrast($active-background); - // background-color: $active-background; - // border-color: $active-border; - - // &:focus { - // @if $enable-shadows and $btn-active-box-shadow != none { - // @include bs.box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width hsl.alpha($color,50%)); - // } @else { - // // Avoid using mixin so we can pass custom focus shadow properly - // box-shadow: 0 0 0 $btn-focus-width hsl.alpha($color,50%); - // } - // } - // } -} - -// @mixin button-svg-icon-variant($background, $hover-background: darken($background, 7.5%), $active-background: darken($background, 10%)) { -@mixin button-svg-icon-variant($background, $hover-background-darken-degrees: 7.5%, $active-background-darken-degrees: 10%) { - svg { - fill: hsl.contrast($background); - } - - &:hover { - svg { - fill: hsl.contrast($background); - } - } - - &:focus, - &.focus { - svg { - fill: hsl.contrast($background); - } - } - - // Disabled comes first so active can properly restyle - &.disabled, - &:disabled { - svg { - fill: hsl.contrast($background); - } - } - - &:not(:disabled):not(.disabled):active, - &:not(:disabled):not(.disabled).active, - .show > &.dropdown-toggle { - svg { - fill: hsl.contrast($background); - } - } -} diff --git a/apps/app/_obsolete/src/styles/theme/mixins/_list-group.scss b/apps/app/_obsolete/src/styles/theme/mixins/_list-group.scss deleted file mode 100644 index 6856babdff5..00000000000 --- a/apps/app/_obsolete/src/styles/theme/mixins/_list-group.scss +++ /dev/null @@ -1,72 +0,0 @@ -@use '@growi/core/scss/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; - &: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-foldertree-title-anchor { - .grw-sidebar-text-muted { - // color: rgba(desaturate($color, 50%), 0.6); - } - } - } -} diff --git a/apps/app/_obsolete/src/styles/theme/mixins/_page-editor-mode-manager.scss b/apps/app/_obsolete/src/styles/theme/mixins/_page-editor-mode-manager.scss deleted file mode 100644 index f2b69a5c9c4..00000000000 --- a/apps/app/_obsolete/src/styles/theme/mixins/_page-editor-mode-manager.scss +++ /dev/null @@ -1,22 +0,0 @@ -@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; - } - } -} diff --git a/apps/app/package.json b/apps/app/package.json index 8609d5725fd..3eae5196d98 100644 --- a/apps/app/package.json +++ b/apps/app/package.json @@ -246,7 +246,6 @@ "diff2html": "^3.4.35", "downshift": "^8.2.3", "eazy-logger": "^3.1.0", - "emoji-mart": "npm:panta82-emoji-mart@^3.0.1", "eslint-plugin-cypress": "^2.12.1", "eslint-plugin-jest": "^26.5.3", "eslint-plugin-regex": "^1.8.0", diff --git a/apps/app/src/components/Navbar/PageEditorModeManager.module.scss b/apps/app/src/components/Navbar/PageEditorModeManager.module.scss index 204bc511dc5..e89cb02f960 100644 --- a/apps/app/src/components/Navbar/PageEditorModeManager.module.scss +++ b/apps/app/src/components/Navbar/PageEditorModeManager.module.scss @@ -14,8 +14,6 @@ width: 70px; height: 30px; } - - @include mixins.border-vertical('before', 70%, 1, true); } } diff --git a/apps/app/src/components/PageAttachment/DeleteAttachmentModal.tsx b/apps/app/src/components/PageAttachment/DeleteAttachmentModal.tsx index 9d76c5996da..1921404f723 100644 --- a/apps/app/src/components/PageAttachment/DeleteAttachmentModal.tsx +++ b/apps/app/src/components/PageAttachment/DeleteAttachmentModal.tsx @@ -13,6 +13,7 @@ import { toastSuccess, toastError } from '~/client/util/toastr'; import { useDeleteAttachmentModal } from '~/stores/modal'; import loggerFactory from '~/utils/logger'; +import { LoadingSpinner } from '../LoadingSpinner'; import { Username } from '../User/Username'; import styles from './DeleteAttachmentModal.module.scss'; @@ -85,7 +86,7 @@ export const DeleteAttachmentModal: React.FC = () => { const deletingIndicator = useMemo(() => { if (deleting) { - return
    ; + return ; } if (deleteError) { return {deleteError}; diff --git a/apps/app/src/components/ReactMarkdownComponents/Header.module.scss b/apps/app/src/components/ReactMarkdownComponents/Header.module.scss index 7e5699156c6..73e811a8ac3 100644 --- a/apps/app/src/components/ReactMarkdownComponents/Header.module.scss +++ b/apps/app/src/components/ReactMarkdownComponents/Header.module.scss @@ -17,3 +17,28 @@ opacity: 1 !important; } } + +// blink +@keyframes fadeout { + 100% { + opacity: 0; + } +} + +.blink { + position: relative; + z-index: 1; + + &::after { + position: absolute; + top: 15%; + left: 0; + z-index: -1; + width: 100%; + height: 70%; + content: ''; + background-color: var(--bs-highlight-bg); + border-radius: 2px; + animation: fadeout 1s ease-in 1.5s forwards; + } +} diff --git a/apps/app/src/components/ReactMarkdownComponents/Header.tsx b/apps/app/src/components/ReactMarkdownComponents/Header.tsx index 07a1554ef9f..847ec48f52a 100644 --- a/apps/app/src/components/ReactMarkdownComponents/Header.tsx +++ b/apps/app/src/components/ReactMarkdownComponents/Header.tsx @@ -113,7 +113,7 @@ export const Header = (props: HeaderProps): JSX.Element => { const showEditButton = !isGuestUser && !isReadOnlyUser && !isSharedUser && shareLinkId == null; return ( - + {children} link diff --git a/apps/app/src/styles/_mixins.scss b/apps/app/src/styles/_mixins.scss index 955ecac4a8a..0fbbf5e284d 100644 --- a/apps/app/src/styles/_mixins.scss +++ b/apps/app/src/styles/_mixins.scss @@ -1,83 +1,12 @@ -@use '@growi/core/scss/bootstrap/init' as bs; -@use './variables' as var; - @import './mixins/editing'; @import './mixins/fluid-layout'; @import './mixins/share-link'; -@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 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 grw-skeleton-text($font-size, $line-height) { height: $line-height; padding: (($line-height - $font-size) / 2) 0; diff --git a/apps/app/src/styles/_override-rbt.scss b/apps/app/src/styles/_override-rbt.scss deleted file mode 100644 index 8ffe9f73fb4..00000000000 --- a/apps/app/src/styles/_override-rbt.scss +++ /dev/null @@ -1,37 +0,0 @@ -// // TODO: .form-group dropped in bootstrap v5 -// // https://redmine.weseek.co.jp/issues/129103 -// // override react-bootstrap-typeahead styles -// // see: https://github.com/ericgio/react-bootstrap-typeahead -// .form-group:not(.has-error) { -// .rbt-input.form-control { -// // focus -// &.focus { -// border-color: inherit; -// } -// } -// } - -// // TODO: check padding when upgrade react-bootstrap-typeahead v6 -// // .close to .btn-close in bootstrap v5 -// // https://redmine.weseek.co.jp/issues/129103 -// .rbt-input-wrapper { -// .close.rbt-close { -// // default bootstrap .close has padding 0 -// padding: 3px 7px; -// } -// } - -// // hide loading icon -// .rbt-aux { -// display: none; -// } - -// // TODO: .input-group-prepend dropped in bootstrap v5 -// // https://redmine.weseek.co.jp/issues/129103 -// // seamless border for .input-group-prepend -// .input-group-prepend + div { -// .rbt .rbt-input-main { -// border-top-left-radius: 0; -// border-bottom-left-radius: 0; -// } -// } diff --git a/apps/app/src/styles/atoms/_custom_control.scss b/apps/app/src/styles/atoms/_custom_control.scss index a81a50f2fee..413941777a4 100644 --- a/apps/app/src/styles/atoms/_custom_control.scss +++ b/apps/app/src/styles/atoms/_custom_control.scss @@ -1,7 +1,5 @@ @use '@growi/core/scss/bootstrap/init' as *; -// TODO: activate (https://redmine.weseek.co.jp/issues/128307) - $form-check-gutter: .5rem; $form-check-indicator-border-width: 1px; diff --git a/apps/app/src/styles/atoms/_spinners.scss b/apps/app/src/styles/atoms/_spinners.scss deleted file mode 100644 index 06a28b4afc8..00000000000 --- a/apps/app/src/styles/atoms/_spinners.scss +++ /dev/null @@ -1,50 +0,0 @@ -.speeding-wheel { - width: 32px; - height: 32px; - border: 2px solid gray; - border-right-color: transparent; - border-left-color: transparent; - border-radius: 50%; - animation: cssload-spin 425ms infinite linear; -} - -.speeding-wheel-sm { - @extend .speeding-wheel; - width: 16px; - height: 16px; -} - -@keyframes cssload-spin { - 100% { - transform: rotate(360deg); - transform: rotate(360deg); - } -} - -@-o-keyframes cssload-spin { - 100% { - -o-transform: rotate(360deg); - transform: rotate(360deg); - } -} - -@-ms-keyframes cssload-spin { - 100% { - -ms-transform: rotate(360deg); - transform: rotate(360deg); - } -} - -@-webkit-keyframes cssload-spin { - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} - -@-moz-keyframes cssload-spin { - 100% { - -moz-transform: rotate(360deg); - transform: rotate(360deg); - } -} diff --git a/apps/app/src/styles/style-app.scss b/apps/app/src/styles/style-app.scss index 6c98974d73d..24a275b5d06 100644 --- a/apps/app/src/styles/style-app.scss +++ b/apps/app/src/styles/style-app.scss @@ -5,7 +5,6 @@ // atoms @import 'atoms/buttons'; -@import 'atoms/spinners'; @import 'atoms/custom_control'; @import 'atoms/code'; @import 'atoms/tag'; @@ -13,7 +12,6 @@ // molecules @import 'molecules/toastr'; @import 'molecules/list-group-item'; -// @import 'molecules/slack-notification'; // @import 'molecules/duplicated-paths-table.scss'; // organisms @@ -22,11 +20,11 @@ // // growi component @import 'editor'; @import 'fonts'; +@import 'installer'; @import 'layout'; @import 'mirror_mode'; @import 'modal'; @import 'share-link'; -@import 'installer'; /* @@ -84,13 +82,6 @@ } } -// transplant from FontAwesome -.icon-fw { - display: inline-block; - width: 1.4em; - text-align: left; -} - .cmd-key.mac { &:after { content: '⌘'; diff --git a/apps/app/src/styles/vendor.scss b/apps/app/src/styles/vendor.scss index 6861015563f..a8c282d2a8d 100644 --- a/apps/app/src/styles/vendor.scss +++ b/apps/app/src/styles/vendor.scss @@ -2,7 +2,6 @@ // react-bootstrap-typeahead @import 'react-bootstrap-typeahead/css/Typeahead'; -@import './override-rbt'; // SimpleBar @import 'simplebar/dist/simplebar.min.css'; diff --git a/packages/core/scss/bootstrap/_variables.scss b/packages/core/scss/bootstrap/_variables.scss index 44fa716386a..16eef83d278 100644 --- a/packages/core/scss/bootstrap/_variables.scss +++ b/packages/core/scss/bootstrap/_variables.scss @@ -1,5 +1,3 @@ -// TODO: activate (https://redmine.weseek.co.jp/issues/128307) - // Variables // // Variables should follow the `$component-state-property-size` formula for @@ -27,44 +25,12 @@ $warning-border-subtle: mix(#fff, $warning, 70%) !default; $danger-border-subtle: mix(#fff, $danger, 70%) !default; -// Options -// -// Quickly modify global styling by enabling or disabling optional features. - -// $enable-shadows: true; - // Links // // Style anchor elements. $link-decoration: none; -// 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. @@ -73,95 +39,12 @@ $font-family-serif: var(--font-family-serif); $font-family-monospace: var(--font-family-monospace); $font-family-base: $font-family-sans-serif; -// $font-size-base: 0.875rem; // 16px -> 14px -// $line-height-base: 1.42857; - -// $blockquote-footer-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-focus-box-shadow: none; -// $btn-active-box-shadow: none; - -//== Forms -// -// $input-border-color: $gray-300; -// $input-placeholder-color: $gray-500; - -// $form-check-indicator-border-color: $gray-400; -// $form-check-label-disabled-color: $gray-500; -// $form-select-disabled-color: $gray-500; -// $form-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); $dropdown-header-padding-y: 0 !default; -//== 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; $modal-footer-border-width: 0; -//== 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 -// $form-check-indicator-border-radius: 0px; -// $form-check-indicator-focus-box-shadow: none; $form-check-indicator-size: 1.2rem; diff --git a/packages/preset-themes/src/styles/antarctic.scss b/packages/preset-themes/src/styles/antarctic.scss index b70662875ee..e3aceb9d6d4 100644 --- a/packages/preset-themes/src/styles/antarctic.scss +++ b/packages/preset-themes/src/styles/antarctic.scss @@ -40,174 +40,3 @@ 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; -// } -// } diff --git a/packages/preset-themes/src/styles/blackboard.scss b/packages/preset-themes/src/styles/blackboard.scss index 7ff2cdf9571..861c16c9d7f 100644 --- a/packages/preset-themes/src/styles/blackboard.scss +++ b/packages/preset-themes/src/styles/blackboard.scss @@ -39,147 +39,3 @@ 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; - -// :root[data-bs-theme='dark']{ -// // Theme colors -// --primary: hsl(var(--primary-hs),var(--primary-l)) !important; -// --primary-hs: 36,95%; -// --primary-l: 44%; -// --secondary: hsl(var(--secondary-hs),var(--secondary-l)) !important; -// --secondary-hs: 208,7%; -// --secondary-l: 46%; -// --subthemecolor: hsl(var(--subthemecolor-hs),var(--subthemecolor-l)); -// --subthemecolor-hs: 141,25%; -// --subthemecolor-l: 13%; - -// // Background colors -// --bgcolor-global: hsl(var(--bgcolor-global-hs),var(--bgcolor-global-l)); -// --bgcolor-global-hs: 140,24%; -// --bgcolor-global-l: 17%; -// --bgcolor-inline-code: #{bs.$gray-100}; //optional -// --bgcolor-card: #{hsl.darken(var(--bgcolor-global), 5%)}; -// --bgcolor-blinked-section: #{hsl.alpha(var(--primary), 50%)}; -// --bgcolor-keyword-highlighted: #{darken(var.$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: 100%; -// --color-reversal: var(--gray-100); -// --color-link: hsl(var(--color-link-hs),var(--color-link-l)); -// --color-link-hs: 223,100%; -// --color-link-l: 73%; -// --color-link-hover: #{hsl.lighten(var(--color-link), 12%)}; -// --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), 12%)}; -// --color-link-nabvar: var(--color-reversal); -// --color-inline-code: var(--subthemecolor); -// --color-search: $dark; - -// // List Group colors -// // --color-list: var(--color-global); -// --bgcolor-list: transparent; -// --color-list-hover: var(--color-link); -// // --bgcolor-list-hover: #{hsl.lighten(var(--bgcolor-global), 3%); -// // --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: 32,42%; -// --bgcolor-navbar-l: 24%; -// --bgcolor-search-top-dropdown: var(--primary); -// --bgcolor-search-top-dropdown-hs: var(--primary-hs); -// --bgcolor-search-top-dropdown-l: var(--primary-l); -// --border-image-navbar: linear-gradient(to right, #bebebe 0%, #d8d8d8 100%); - -// // Logo colors -// --bgcolor-logo: var(--color-global); -// --fillcolor-logo-mark: var(--color-global); - -// // Sidebar -// --bgcolor-sidebar: hsl(var(--bgcolor-sidebar-hs),var(--bgcolor-sidebar-l)); -// --bgcolor-sidebar-hs: 32,42%; -// --bgcolor-sidebar-l: 34%; -// // 00bgcolor-sidebar-nav-item-active: rgba(#, 0.3); // optional -// --text-shadow-sidebar-nav-item-active: 0px 0px 10px var(--primary); // optional - -// // Sidebar resize button -// --color-resize-button: var(--color-global); -// --bgcolor-resize-button: var(--primary); -// --bgcolor-resize-button-hs: var(--primary-hs); -// --bgcolor-resize-button-l: var(--primary-l); -// --color-resize-button-hover: var(--color-global); -// --bgcolor-resize-button-hover: #{hsl.darken(var(--color-global), 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(--subthemecolor),8%)}; -// --bgcolor-sidebar-context-hs: var(--subthemecolor-hs); -// --bgcolor-sidebar-context-l: calc(var(--subthemecolor-l) + 8%); - -// // Sidebar list group -// // --bgcolor-sidebar-list-group: #; // 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: var(--color-global); -// --bordercolor-inline-code: #4d4d4d; // optional - -// // admin theme box -// --color-theme-color-box: var(--primary); - -// // Navs -// .nav-tabs { -// border-bottom: var(--border-color-theme) 1px solid; -// .nav-link { -// &:hover { -// border-color: #{hsl.lighten(var(--color-global), 10%)}; -// border-bottom: none; -// } -// &.active { -// color: var(--color-link); -// background-color: transparent; -// border-color: var(--border-color-theme); -// } -// } -// } - -// // Table -// .table { -// color: white; -// background-color: var(--bgcolor-global); -// border-color: var(--border-color-theme); -// } - -// // Button -// .btn-group.grw-page-editor-mode-manager { -// .btn.btn-outline-primary { -// @include page-editor-mode-manager.btn-page-editor-mode-manager(#ffffff, var(--primary), var(--primary), #{hsl.darken(var(--primary), 20%)}); -// } -// } -// } diff --git a/packages/preset-themes/src/styles/default.scss b/packages/preset-themes/src/styles/default.scss index 4036671a902..456afe56a5c 100644 --- a/packages/preset-themes/src/styles/default.scss +++ b/packages/preset-themes/src/styles/default.scss @@ -69,260 +69,3 @@ --grw-wiki-link-hover-color-rgb: var(--grw-highlight-400-rgb); --grw-sidebar-nav-btn-color: rgba(var(--grw-highlight-400-rgb), 0.8); } - -// @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)); -// --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: #{bs.$gray-100}; //optional -// --bgcolor-card: #{bs.$gray-100}; -// --bgcolor-blinked-section: #{hsl.alpha(var(--primary),10%)}; -// // --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: #{bs.$gray-500}; -// --color-inline-code: #{darken(bs.$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.darken(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: #{bs.$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: #{bs.$gray-900}; -// --bgcolor-navbar-h:0; -// --bgcolor-navbar-s:0%; -// --bgcolor-navbar-l:12.94%; -// --bgcolor-navbar-hs: 0,0%; -// --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(--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); -// --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: #{bs.$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: #{bs.$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: #{bs.$gray-400}; -// --bordercolor-inline-code: #{bs.$gray-400}; // optional - -// // Dropdown colors -// --bgcolor-dropdown-link-active: #{var.$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-bs-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), 40%)}; -// --bgcolor-keyword-highlighted: #{darken(var.$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: #{bs.$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: #{bs.$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: #{bs.$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%)}); -// } -// } -// } diff --git a/packages/preset-themes/src/styles/fire-red.scss b/packages/preset-themes/src/styles/fire-red.scss index f37225bd2e0..e1c835dff95 100644 --- a/packages/preset-themes/src/styles/fire-red.scss +++ b/packages/preset-themes/src/styles/fire-red.scss @@ -67,278 +67,3 @@ --grw-wiki-link-color-rgb: var(--grw-primary-500-rgb); --grw-wiki-link-hover-color-rgb: var(--grw-primary-400-rgb); } - -// @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; - -// :root[data-bs-theme='light'] { -// // Theme colors -// --primary: hsl(var(--primary-hs),var(--primary-l)) !important; -// --primary-hs: 11,81%; -// --primary-l: 56%; -// --secondary: hsl(var(--secondary-hs),var(--secondary-l)) !important; -// --secondary-hs: 208,7%; -// --secondary-l: 46%; -// --accentcolor: hsl(var(--accentcolor-hs),var(--accentcolor-l)); -// --accentcolor-hs: 0,0%; -// --accentcolor-l: 75%; - -// // 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: #{bs.$gray-100}; //optional -// --bgcolor-card: var(--accentcolor); -// --bgcolor-blinked-section: #{hsl.alpha(var(--primary),10%)}; -// //--bgcolor-keyword-highlighted: #{$grw-marker-yellow}; - -// // Font colors -// --color-global: hsl(var(--color-global-hs),var(--color-global-l)); -// --color-global-hs: 0,0%; -// --color-global-l: 17%; -// --color-reversal: #{bs.$gray-100}; -// --color-link: var(--primary); -// --color-link-hs: var(--primary-hs); -// --color-link-l: var(--primary-l); -// --color-link-hover: #{hsl.lighten(var(--primary), 12%)}; -// --color-link-wiki: var(--primary); -// --color-link-wiki-hs: var(--primary-hs); -// --color-link-wiki-l: var(--primary-l); -// --color-link-wiki-hover: #{hsl.lighten(var(--primary), 12%)}; -// --color-link-nabvar: var(--color-reversal); -// --color-inline-code: #c7254e; // optional -// --color-search: var(--color-global); - -// // List Group colors -// // --color-list: var(--color-global); -// --bgcolor-list: transparent; -// --color-list-hover: var(--color-global); -// --bgcolor-list-hover: #{hsl.darken(var(--bgcolor-global),3%)}; -// // --color-list-active: var(--color-reversal); -// // --bgcolor-list-active: var(--primary); - -// // Navbar -// --bgcolor-navbar: var(--color-global); -// --bgcolor-navbar-hs: var(--color-global-hs); -// --bgcolor-navbar-l: var(--color-global-l); -// --bgcolor-search-top-dropdown: var(--primary); -// --bgcolor-search-top-dropdown-hs: var(--primary-hs); -// --bgcolor-search-top-dropdown-l: var(--primary-l); -// --border-image-navbar: linear-gradient(to right, var(--primary) 0%, #{hsl.darken(var(--primary), 5%)} 100%); - -// // Logo colors -// --bgcolor-logo: var(--bgcolor-global); -// --fillcolor-logo-mark: var(--bgcolor-global); - -// // Sidebar -// --bgcolor-sidebar: var(--accentcolor); -// --bgcolor-sidebar-hs: var(--accentcolor-hs); -// --bgcolor-sidebar-l: var(--accentcolor-l); -// // --bgcolor-sidebar-nav-item-active: rgba(#, 0.37); // optional -// --text-shadow-sidebar-nav-item-active: 0px 0px 10px #ffffff; // optional - -// // Sidebar resize button -// --color-resize-button: #ffffff; -// --bgcolor-resize-button: var(--primary); -// --bgcolor-sidebar-context-hs: var(--primary-hs); -// --bgcolor-sidebar-context-l: var(--primary-l); -// --color-resize-button-hover: var(--color-reversal); -// --bgcolor-resize-button-hover: #{hsl.lighten(var(--primary), 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(var(--bgcolor-sidebar-context-hs),var(--bgcolor-sidebar-context-l)); -// --bgcolor-sidebar-context-hs: 0,0%; -// --bgcolor-sidebar-context-l: 93%; - -// // Sidebar list group -// // --bgcolor-sidebar-list-group: #; // 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: var(--primary); -// --bordercolor-inline-code: #ccc8c8; // optional - -// // admin theme box -// --color-theme-color-box: var(--primary); - -// // Navs { -// .nav-tabs { -// border-bottom: var(--primary) 1px solid; -// .nav-link { -// &:hover { -// border-color: #{hsl.lighten(var(--primary), 10%)}; -// border-bottom: none; -// } -// &.active { -// background-color: transparent; -// } -// } -// } - -// // Button -// .btn-group.grw-page-editor-mode-manager { -// .btn.btn-outline-primary { -// @include page-editor-mode-manager.btn-page-editor-mode-manager(#ffffff, var(--primary), var(--primary), #{hsl.lighten(var(--primary), 20%)}); -// } -// } - -// .grw-global-search .btn-secondary.dropdown-toggle { -// color: white; -// } - -// .btn-primary { -// color:white !important; -// } -// } - -// :root[data-bs-theme='dark'] { -// // Theme colors -// --primary: hsl(var(--primary-hs),var(--primary-l)) !important; -// --primary-hs: 11,81%; -// --primary-l: 56%; -// --secondary: hsl(var(--secondary-hs),var(--secondary-l)) !important; -// --secondary-hs: 208,7%; -// --secondary-l: 46%; -// --accentcolor: hsl(var(--accentcolor-hs),var(--accentcolor-l)); -// --accentcolor-hs: 0,0%; -// --accentcolor-l: 13%; - -// // Background colors -// --bgcolor-global: hsl(var(--bgcolor-global-hs),var(--bgcolor-global-l)); -// --bgcolor-global-hs: 0,0%; -// --bgcolor-global-l: 20%; -// --bgcolor-inline-code: #{bs.$gray-100}; //optional -// --bgcolor-card: #{hsl.darken(var(--bgcolor-global), 5%)}; -// --bgcolor-blinked-section: #{hsl.alpha(var(--primary),50%)}; -// --bgcolor-keyword-highlighted: #{darken(var.$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: 100%; -// --color-reversal: #{bs.$gray-100}; -// --color-link: var(--primary); -// --color-link-hs: var(--primary-hs); -// --color-link-l: var(--primary-l); -// --color-link-hover: #{hsl.lighten(var(--color-link),12%)}; -// --color-link-wiki: var(--primary); -// --color-link-wiki-hs: var(--primary-hs); -// --color-link-wiki-l: var(--primary-l); -// --color-link-wiki-hover: #{hsl.lighten(var(--color-link),12%)}; -// --color-link-nabvar: var(--color-reversal); -// --color-inline-code: #c7254e; // optional -// --color-search: #a7a7a7; - -// // List Group colors -// // --color-list: var(--color-global); -// --bgcolor-list: transparent; -// --color-list-hover: var(--accentcolor); -// // --bgcolor-list-hover: #{hsl.darken(var(--bgcolor-global),3%)};// optional -// // --color-list-active: white ; // optional -// // --bgcolor-list-active: #{hsl.lighten(var(--bgcolor-global),3%)}; // optional - -// // Navbar -// --bgcolor-navbar: hsl(var(--bgcolor-navbar-hs),var(--bgcolor-navbar-l)); -// --bgcolor-navbar-hs: 0,0%; -// --bgcolor-navbar-l: 17%; -// --bgcolor-search-top-dropdown: var(--primary); -// --bgcolor-search-top-dropdown-hs: var(--primary-hs); -// --bgcolor-search-top-dropdown-l: var(--primary-l); -// --border-image-navbar: linear-gradient(to right, #ea5532 0%, #c9171e 100%); - -// // Logo colors -// --bgcolor-logo: var(--color-global); -// --fillcolor-logo-mark: var(--color-global); -// // --fillcolor-logo-mark: #4e5a60; - -// // Sidebar -// --bgcolor-sidebar: var(--accentcolor); -// --bgcolor-sidebar-hs: var(--accentcolor-hs); -// --bgcolor-sidebar-l: var(--accentcolor-l); -// // --bgcolor-sidebar-nav-item-active: rgba(#, 0.3); // optional -// --text-shadow-sidebar-nav-item-active: 0px 0px 10px var(--primary); // optional - -// // Sidebar resize button -// --color-resize-button: var(--color-global); -// --bgcolor-resize-button: var(--primary); -// --bgcolor-resize-button-hs: var(--primary-hs); -// --bgcolor-resize-button-l: var(--primary-l); -// --color-resize-button-hover: var(--color-global); -// --bgcolor-resize-button-hover: #{hsl.darken(var(--primary), 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(var(--bgcolor-sidebar-context-hs),var(--bgcolor-sidebar-context-l)); -// --bgcolor-sidebar-context-hs: 0,2%; -// --bgcolor-sidebar-context-l: 25%; - -// // Sidebar list group -// // --bgcolor-sidebar-list-group: #; // 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: var(--primary); -// --bordercolor-inline-code: #4d4d4d; // optional - -// // admin theme box -// --color-theme-color-box: var(--primary); - -// // Navs -// .nav-tabs { -// border-bottom: var(--primary) 1px solid; -// .nav-link { -// &:hover { -// border-color: #{hsl.lighten(var(--primary), 10%)}; -// border-bottom: none; -// } -// &.active { -// color: var(--primary); -// background-color: transparent; -// border-color: var(--primary); -// } -// } -// } - -// // Table -// .table { -// color: white; -// } - -// // Button -// .btn-group.grw-page-editor-mode-manager { -// .btn.btn-outline-primary { -// @include page-editor-mode-manager.btn-page-editor-mode-manager(#ffffff, var(--primary), var(--primary), #{hsl.darken(var(--primary), 20%)}); -// } -// } - -// .grw-global-search .btn-secondary.dropdown-toggle { -// color: white; -// } - -// .btn-primary { -// color:white !important; -// } - -// } diff --git a/packages/preset-themes/src/styles/future.scss b/packages/preset-themes/src/styles/future.scss index 1594290b197..f4de9751863 100644 --- a/packages/preset-themes/src/styles/future.scss +++ b/packages/preset-themes/src/styles/future.scss @@ -32,143 +32,3 @@ --grw-wiki-link-color-rgb: var(--grw-primary-400-rgb); --grw-wiki-link-hover-color-rgb: var(--grw-primary-300-rgb); } - -// @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; - -// :root[data-bs-theme='dark']{ -// --primary: hsl(var(--primary-hs),var(--primary-l)) !important; -// --primary-hs: 181,100%; -// --primary-l: 36%; -// --secondary: hsl(var(--secondary-hs),var(--secondary-l)) !important; -// --secondary-hs: 208,7%; -// --secondary-l: 46%; -// --themecolor: hsl(var(--themecolor-hs),var(--themecolor-l)); -// --themecolor-hs: 193,34%; -// --themecolor-l: 13%; -// --accentcolor: hsl(var(--accentcolor-hs),var(--accentcolor-l)); -// --accentcolor-hs: 178,100%; -// --accentcolor-l: 50%; - -// // Background colors -// --bgcolor-global: var(--themecolor); -// --bgcolor-global-hs: var(--themecolor-hs); -// --bgcolor-global-l: var(--themecolor-l); -// --bgcolor-inline-code: #1f1f22; //optional -// --bgcolor-card: #{hsl.darken(var(--themecolor), 5%)}; -// --bgcolor-blinked-section: #{hsl.alpha(var(--primary), 40%)}; -// --bgcolor-keyword-highlighted: #{darken(var.$grw-marker-red, 30%)}; - -// // Font colors -// --color-global: #{hsl(var(--color-global-hs),var(--color-global-l))}; -// --color-global-hs: 204,21%; -// --color-global-l: 66%; -// --color-reversal: #{bs.$gray-900}; -// --color-header: var(--color-global); -// --color-link: var(--accentcolor); -// --color-link-hover: #{hsl.lighten(var(--accentcolor), 20%)}; -// --color-link-wiki: var(--accentcolor); -// --color-link-wiki-hover: #{hsl.darken(var(--accentcolor), 5%)}; -// --color-link-nabvar: #a7a7a7; -// --color-inline-code: #c7254e; // optional -// --color-search: var(--primary); - -// // List Group colors -// // --color-list: var(--color-global); -// --bgcolor-list: transparent; -// // --color-list-hover: var(--color-reversal); -// --color-list-active: white; -// --bgcolor-list-active: var(--primary); -// // --color-page-list-group-item-meta: #{$gray-500}; // optional - -// // Table colors -// // --color-table: #; // optional -// --bgcolor-table: #{hsl.darken(var(--themecolor), 3%)}; // optional -// --border-color-table: #{hsl.lighten(var(--themecolor), 10%)};; // optional -// // --color-table-hover: #; // optional -// // --bgcolor-table-hover: #; // optional - -// // Navbar -// --bgcolor-navbar: hsl(var(--bgcolor-navbar-hs),var(--bgcolor-navbar-l)); -// --bgcolor-navbar-hs: 185,93%; -// --bgcolor-navbar-l: 5%; -// --bgcolor-search-top-dropdown: hsl(var(--bgcolor-search-top-dropdown-hs),var(--bgcolor-search-top-dropdown-l)); -// --bgcolor-search-top-dropdown-hs: 181,100%; -// --bgcolor-search-top-dropdown-l: 38%; -// --border-image-navbar: linear-gradient(90deg, #6cfff9 0%, #0034c1 45%, #6cfff9 100%); - -// // Logo colors -// --bgcolor-logo: #{hsl.darken(var(--themecolor), 10%)}; -// --fillcolor-logo-mark: #dedede; - -// // Sidebar -// --bgcolor-sidebar: hsl(var(--bgcolor-sidebar-hs),var(--bgcolor-sidebar-l)); -// --bgcolor-sidebar-hs: 181,81%; -// --bgcolor-sidebar-l: 10%; -// --bgcolor-sidebar-nav-item-active: rgba(#969494, 0.3); // optional -// --text-shadow-sidebar-nav-item-active: 0px 0px 10px #969494; // optional - -// // Sidebar resize button -// --color-resize-button: #0e2329; -// --bgcolor-resize-button: var(--bgcolor-search-top-dropdown); -// --bgcolor-resize-button-hs: var(--bgcolor-search-top-dropdown-hs); -// --bgcolor-resize-button-l: var(--bgcolor-search-top-dropdown-l); -// --color-resize-button-hover: #0e2329; -// --bgcolor-resize-button-hover: #{hsl.lighten(var(--bgcolor-search-top-dropdown), 5%)}; - -// // Sidebar contents -// --color-sidebar-context: hsl(var(--color-sidebar-context-hs),var(--color-sidebar-context-l)); -// --color-sidebar-context-hs: 181,100%; -// --color-sidebar-context-l: 59%; -// --bgcolor-sidebar-context: hsl(var(--bgcolor-sidebar-context-hs),var(--bgcolor-sidebar-context-l)); -// --bgcolor-sidebar-context-hs: 180,45%; -// --bgcolor-sidebar-context-l: 17%; - -// // Sidebar list group -// --bgcolor-sidebar-list-group: #162126; // 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: #4c9eb4; // optional -// // --color-nav-tabs-link-active: #; //optional -// --bordercolor-nav-tabs-hover: #295561 #295561 var(--bordercolor-nav-tabs); // optional -// // --bordercolor-nav-tabs-active: # # var(--bgcolor-global); // optional - -// // Tags -// // --color-tags: #; //optional -// // --bgcolor-tags: #; //optional - -// // Icon colors -// --color-editor-icons: var(--color-global); - -// // Border colors -// --border-color-theme: #407483; -// --bordercolor-inline-code: #4d4d4d; // optional - -// // Dropdown colors -// --bgcolor-dropdown-link-active: #{var.$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(#{hsl.lighten(var(--primary), 10%)}, var(--primary), #{hsl.darken(var(--primary), 10%)}, #{hsl.darken(var(--primary), 20%)}); -// } -// } - -// // headers -// @for $i from 1 through 6 { -// h#{$i} { -// color: white; -// } -// } -// } diff --git a/packages/preset-themes/src/styles/halloween.scss b/packages/preset-themes/src/styles/halloween.scss index bd9ad663028..5590e15cb0e 100644 --- a/packages/preset-themes/src/styles/halloween.scss +++ b/packages/preset-themes/src/styles/halloween.scss @@ -41,144 +41,4 @@ --grw-wiki-link-color-rgb: var(--grw-primary-400-rgb); --grw-wiki-link-hover-color-rgb: var(--grw-primary-300-rgb); - } - -// @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; - -// $bordercolor: #7e0d7e; - -// // colors for overriding bootstrap $theme-colors - - -// .growi:not(.login-page) { -// // add background-image -// .page-editor-preview-container { -// background-image: url('../images/halloween/halloween.jpg'); -// } -// } - - -// :root[data-bs-theme='dark'] { -// --primary: hsl(var(--primary-hs),var(--primary-l)) !important; -// --primary-hs: 25,95%; -// --primary-l: 34%; -// --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: 0,100%; -// --bgcolor-global-l: 1%; -// --bgcolor-inline-code: #1f1f22; //optional -// --bgcolor-card: var(--bgcolor-global); -// --bgcolor-blinked-section: #{hsl.alpha(var(--primary), 40%)}; -// --bgcolor-keyword-highlighted: darkviolet; - -// // Font colors -// --color-global: hsl(var(--color-global-hs),var(--color-global-l)); -// --color-global-hs: 42,81%; -// --color-global-l: 54%; -// --color-reversal: #eeeeee; -// // --color-header: #2b2b2b; -// --color-link: hsl(var(--color-link-hs),var(--color-link-l)); -// --color-link-hs: 262,33%; -// --color-link-l: 69%; -// --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), 20%)}; -// --color-link-nabvar: #a7a7a7; -// --color-inline-code: #c7254e; // optional - -// // List Group colors -// --color-list: #979797; -// --bgcolor-list: transparent; -// --color-list-hover: var(--primary); -// // --bgcolor-list-hover: ; -// // --color-list-active: var(--color-reversal); -// // --bgcolor-list-active: var(--primary); - -// // Search Top -// --color-search: var(--primary); - -// // Navbar -// --bgcolor-navbar: hsl(var(--bgcolor-navbar-hs),var(--bgcolor-navbar-l)); -// --bgcolor-navbar-hs: 180,3%; -// --bgcolor-navbar-l: 93%; -// --bgcolor-search-top-dropdown: var(--primary); -// --bgcolor-search-top-dropdown-hs: var(--primary-hs); -// --bgcolor-search-top-dropdown-l: var(--primary-l); -// --border-image-navbar: linear-gradient(90deg, #e3b7ff 0%, #134774 100%); - -// // Logo colors -// --bgcolor-logo: #{hsl.darken(var(--primary),10%)}; -// --fillcolor-logo-mark: #dedede; - -// // Sidebar -// --bgcolor-sidebar: hsl(var(--bgcolor-sidebar-hs),var(--bgcolor-sidebar-l)); -// --bgcolor-sidebar-hs: 197,40%; -// --bgcolor-sidebar-l: 14%; -// --bgcolor-sidebar-nav-item-active: rgba(#969494, 0.3); // optional -// --text-shadow-sidebar-nav-item-active: 0px 0px 10px #969494; // optional - -// // Sidebar contents -// --color-sidebar-context: hsl(var(--color-sidebar-context-hs),var(--color-sidebar-context-l)); -// --color-sidebar-context-hs: 262,33%; -// --color-sidebar-context-l: 69%; -// --bgcolor-sidebar-context: hsl(var(--bgcolor-sidebar-context-hs),var(--bgcolor-sidebar-context-l)); -// --bgcolor-sidebar-context-hs: 258,17%; -// --bgcolor-sidebar-context-l: 20%; - -// // Sidebar list group -// --bgcolor-sidebar-list-group: #2c2926; // optional - -// // Sidebar resize button -// --color-resize-button: #effcfa; -// --bgcolor-resize-button: var(--primary); -// --bgcolor-resize-button-hs: var(--primary-hs); -// --bgcolor-resize-button-l: var(--primary-l); -// --color-resize-button-hover: #effcfa; -// --bgcolor-resize-button-hover: #{hsl.lighten(var(--primary), 5%)}; - -// // 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%); - -// // Icon colors -// --color-editor-icons: var(--color-global); - -// // Border colors -// --border-color-theme: #{bs.$gray-300}; // former: `$navbar-border: $gray-300;` -// --bordercolor-inline-code: #4d4d4d; // optional - -// // admin theme box -// --color-theme-color-box: #{hsl.lighten(var(--primary), 20%)}; - -// &, body { -// background-image: url('../images/halloween/halloween.jpg'); -// } - -// .grw-navbar { -// background-image: url('../images/halloween/halloween-navbar.jpg') !important; -// } - -// // 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), 35%)}, var(--primary), #{hsl.lighten(var(--primary), 5%)}, #{hsl.darken(var(--primary), 20%)}); -// } -// } - -// // Table -// .table { -// color: var(--color-global); -// } -// } diff --git a/packages/preset-themes/src/styles/hufflepuff.scss b/packages/preset-themes/src/styles/hufflepuff.scss index 83907ed19df..64245059292 100644 --- a/packages/preset-themes/src/styles/hufflepuff.scss +++ b/packages/preset-themes/src/styles/hufflepuff.scss @@ -84,366 +84,3 @@ } } -// @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; - -// // == Define Bootstrap theme colors -// // - -// // colors for overriding bootstrap $theme-colors -// // --info: #; -// // --success: #; -// // --warning: #; -// // --danger: #; -// // --light: #; -// // --dark: #; - -// //== Light Mode -// // -// :root[data-bs-theme='light'] { -// // Theme colors -// --primary: hsl(var(--primary-hs),var(--primary-l)) !important; -// --primary-hs: 41,83%; -// --primary-l: 52%; -// --secondary: hsl(var(--secondary-hs),var(--secondary-l)) !important; -// --secondary-hs: 41,83%; -// --secondary-l: 65%; -// --subthemecolor: hsl(var(--subthemecolor-hs),var(--subthemecolor-l)); -// --subthemecolor-hs: 10,9%; -// --subthemecolor-l: 13%; - -// // Background colors -// --bgcolor-global: hsl(var(--bgcolor-global-hs),var(--bgcolor-global-l)); -// --bgcolor-global-hs: 36,50%; -// --bgcolor-global-l: 97%; -// --bgcolor-inline-code: #{bs.$gray-100}; //optional -// --bgcolor-card: #{bs.$gray-100}; -// --bgcolor-blinked-section: #{hsl.alpha(var(--primary),50%)}; -// --bgcolor-keyword-highlighted: $grw-marker-green; - -// // Font colors -// --color-global: var(--subthemecolor); -// --color-global-hs: var(--subthemecolor-hs); -// --color-global-l: var(--subthemecolor-l); -// --color-reversal: white; -// --color-link: hsl(var(--color-link-hs),var(--color-link-l)); -// --color-link-hs: 357,49%; -// --color-link-l: 40%; -// --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), 10%)}; -// --color-link-nabvar: var(--color-reversal); -// --color-inline-code: #c7254e; // optional - -// // List Group colors -// // --color-list: var(--color-global); -// --bgcolor-list: transparent; -// --color-list-hover: #{hsl.lighten(var(--primary), 10%)}; -// // --bgcolor-list-hover: #{hsl.darken(var(--bgcolor-list), 2%)}; -// // --color-list-active: var(--bgcolor-global); -// // --bgcolor-list-active: var(--color-link); - -// // Navbar -// --bgcolor-navbar: var(--secondary); -// --bgcolor-navbar-hs: var(--secondary-hs); -// --bgcolor-navbar-l: var(--secondary-l); -// --bgcolor-search-top-dropdown: var(--primary); -// --bgcolor-search-top-dropdown-hs: var(--primary-hs); -// --bgcolor-search-top-dropdown-l: var(--primary-l); -// --border-image-navbar: linear-gradient(to right, #90a555 0%, #a84be6 50%, #eaab20 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); - -// // Sidebar resize button -// --color-resize-button: var(--color-reversal); -// --bgcolor-resize-button: var(--subthemecolor); -// --bgcolor-resize-button-hs: var(--subthemecolor-hs); -// --bgcolor-resize-button-l: var(--subthemecolor-l); -// --color-resize-button-hover: var(--color-reversal); -// --bgcolor-resize-button-hover: #{hsl.lighten(var(--bgcolor-resize-button), 10%)}; - -// // Sidebar contents -// --color-sidebar-context: var(--color-link); -// --color-sidebar-context-hs: var(--color-link-hs); -// --color-sidebar-context-l: var(--color-link-l); -// --bgcolor-sidebar-context: #{hsl.darken(var(--bgcolor-global), 2%)}; -// --bgcolor-sidebar-context-hs: var(--bgcolor-global-hs); -// --bgcolor-sidebar-context-l: calc(var(--bgcolor-global-l) - 2%); - -// // Sidebar list group -// --bgcolor-sidebar-list-group: #{hsl.lighten(var(--bgcolor-global), 10%)}; - -// // 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-link); - -// // Border colors -// --border-color-theme: #{hsl.lighten(var(--subthemecolor), 40%)}; -// --bordercolor-inline-code: #ccc8c8; // optional - -// // Dropdown colors -// --bgcolor-dropdown-link-active: #{var.$growi-blue}; - -// // admin theme box -// --color-theme-color-box: #{hsl.darken(var(--primary), 5%)}; - -// &, body { -// background-image: url('../images/hufflepuff/badger-light3.png'); -// background-attachment: fixed; -// background-position: bottom; -// background-size: cover; -// } - -// // Button -// .btn.btn-outline-primary { -// @include page-editor-mode-manager.btn-page-editor-mode-manager(#{hsl.darken(var(--primary), 50%)}, #{hsl.darken(var(--primary), 50%)}, #{hsl.lighten(var(--primary), 20%)}); -// } -// .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), 70%)}, #{hsl.lighten(var(--primary), 5%)}, #{hsl.lighten(var(--primary), 20%)}); -// } -// } - -// .growi:not(.login-page) { -// // add background-image -// .page-editor-preview-container { -// background-image: url('../images/hufflepuff/badger-light3.png'); -// background-attachment: fixed; -// background-position: bottom; -// background-size: cover; -// } -// } - -// // login and register -// .nologin { -// .page-wrapper{ -// background-image: url('../images/hufflepuff/badger-light.png'); -// background-attachment: fixed; -// background-position: bottom; -// background-size: cover; - -// .nologin-header, -// .nologin-dialog { -// background-color: rgba(black, 0.1); -// a.link-switch { -// color: #{hsl.darken(var(--color-global),10%)}; -// } -// } -// .grw-external-auth-form { -// border-color: #993439; -// } -// } -// } - -// .table { -// background-color: var(--bgcolor-global); -// } - -// .card-timeline > .card-header { -// background-color: var(--secondary); -// } - -// .nav.nav-tabs { -// > .nav-item { -// > .nav-link.active { -// color: #231e1d; -// } -// } -// } -// } - -// :root[data-bs-theme='dark'] { -// // Theme colors -// --primary: hsl(var(--primary-hs),var(--primary-l)) !important; -// --primary-hs: 41,83%; -// --primary-l: 62%; -// --secondary: hsl(var(--secondary-hs),var(--secondary-l)) !important; -// --secondary-hs: 41,61%; -// --secondary-l: 36%; -// --subthemecolor: hsl(var(--subthemecolor-hs),var(--subthemecolor-l)); -// --subthemecolor-hs: 10,9%; -// --subthemecolor-l: 13%; -// --accentcolor: hsl(var(--accentcolor-hs),var(--accentcolor-l)); -// --accentcolor-hs: 357,49%; -// --accentcolor-l: 40%; - -// // Background colors -// --bgcolor-global: hsl(var(--bgcolor-global-hs),var(--bgcolor-global-l)); -// --bgcolor-global-hs: 77,6%; -// --bgcolor-global-l: 23%; -// // --bgcolor-navbar: #27343b; -// --bgcolor-inline-code: var(--subthemecolor); -// --bgcolor-card: #{hsl.darken(var(--bgcolor-global), 5%)}; -// --bgcolor-blinked-section: #{hsl.alpha(var(--primary), 50%)}; -// --bgcolor-keyword-highlighted: #{darken(var.$grw-marker-cyan, 40%)}; - -// // Font colors -// --color-global: hsl(var(--color-global-hs),var(--color-global-l)); -// --color-global-hs: 36,50%; -// --color-global-l: 87%; -// --color-reversal: #{bs.$gray-100}; -// --color-link: #{hsl.lighten(var(--primary), 30%)}; -// --color-link-hs: var(--primary-hs); -// --color-link-l: calc(var(--primary-l) + 30%); -// --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: #{hsl.lighten(var(--primary), 50%)}; -// --color-link-nabvar: var(--color-reversal); -// --color-inline-code: #{hsl.lighten(var(--primary), 10%)}; -// // --color-inline-code: #c7254e; // optional -// // --color-search: #000102; - -// // List Group colors -// // --color-list: var(--color-global); -// --bgcolor-list: transparent; -// --color-list-hover: var(--accentcolor); -// // --bgcolor-list-hover: #{hsl.lighten(var(--bgcolor-global), 3%)}; -// // --color-list-active: var(--color-reversal); -// // --bgcolor-list-active: var(--primary); - -// // Navbar -// --bgcolor-navbar: var(--secondary); -// --bgcolor-navbar-hs: var(--secondary-hs); -// --bgcolor-navbar-l: var(--secondary-l); -// --bgcolor-search-top-dropdown: #{hsl.lighten(var(--primary), 10%)}; -// --bgcolor-search-top-dropdown-hs: var(--primary-hs); -// --bgcolor-search-top-dropdown-l: calc(var(--primary-l) + 10%); -// --border-image-navbar: linear-gradient(to right, #90a555 0%, #3d98a3 50%, #eaab20 100%); - -// // Logo colors -// --bgcolor-logo: #13191c; -// --fillcolor-logo-mark: white; - -// // Sidebar -// --bgcolor-sidebar: #{hsl.lighten(var(--primary), 10%)}; -// --bgcolor-sidebar-hs: var(--primary-hs); -// --bgcolor-sidebar-l: calc(var(--primary-l) + 10%); -// // --bgcolor-sidebar-nav-item-active: rgba(#, 0.3); // optional -// --text-shadow-sidebar-nav-item-active: 0px 0px 10px #cc951e; // optional - -// // Sidebar resize button -// --color-resize-button: var(--color-global); -// --bgcolor-resize-button: var(--accentcolor); -// --bgcolor-resize-button-hs: var(--accentcolor-hs); -// --bgcolor-resize-button-l: var(--accentcolor-l); -// --color-resize-button-hover: var(--color-global); -// --bgcolor-resize-button-hover: #{hsl.darken(var(--accentcolor), 7%)}; - -// // Sidebar contents -// --color-sidebar-context: var(--color-link); -// --color-sidebar-context-hs: var(--color-link-hs); -// --color-sidebar-context-l: var(--color-link-l); -// --bgcolor-sidebar-context: #{hsl.lighten(var(--bgcolor-global), 5%)}; -// --bgcolor-sidebar-context-hs: var(--bgcolor-global-hs); -// --bgcolor-sidebar-context-l: calc(var(--bgcolor-global-l) + 5%); - -// // Sidebar list group -// --bgcolor-sidebar-list-group: #{hsl.lighten(var(--subthemecolor), 5%)}; - -// // 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: #{hsl.lighten(var(--primary), 10%)}; - -// // Border colors -// --border-color-theme: #{hsl.darken(var(--primary), 15%)}; -// --bordercolor-inline-code: #4d4d4d; // optional - -// // admin theme box -// --color-theme-color-box: var(--primary); - -// &, body { -// background-image: url('../images/hufflepuff/badger-dark.jpg'); -// background-attachment: fixed; -// background-position: bottom; -// background-size: cover; -// } - -// // Navs -// .nav-tabs { -// border-bottom: var(--border-color-theme) 1px solid; -// .nav-link { -// &:hover { -// border-color: #{hsl.darken(var(--primary), 5%)}; -// border-bottom: none; -// } -// &.active { -// color: var(--color-link); -// background-color: transparent; -// border-color: var(--border-color-theme); -// } -// } -// } - -// // Table -// .table { -// color: white; -// } - -// // Button -// .btn.btn-outline-primary { -// @include page-editor-mode-manager.btn-page-editor-mode-manager(#{hsl.lighten(var(--primary), 40%)}, #{hsl.lighten(var(--primary), 15%)}, #{hsl.darken(var(--primary), 10%)}, #{hsl.darken(var(--primary), 30%)}); -// } -// .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), 40%)}, #{hsl.lighten(var(--primary), 15%)}, #{hsl.darken(var(--primary), 10%)}, #{hsl.darken(var(--primary), 30%)}); -// } -// } - -// .card-timeline > .card-header { -// background-color: var(--accentcolor); -// } - -// .growi:not(.login-page) { -// // add background-image -// .page-editor-preview-container { -// background-image: url('../images/hufflepuff/badger-dark.jpg'); -// background-attachment: fixed; -// background-position: bottom; -// background-size: cover; -// } -// } - -// // login and register -// .nologin { -// .page-wrapper{ -// background-image: url('../images/hufflepuff/badger-light.png'); -// background-attachment: fixed; -// background-position: bottom; -// background-size: cover; -// .nologin-header, -// .nologin-dialog { -// background-color: rgba(black, 0.1); -// } - -// .link-switch { -// color: var(--color-global); -// } - -// .grw-external-auth-form { -// border-color: var(--accentcolor); -// } -// } -// } -// } diff --git a/packages/preset-themes/src/styles/island.scss b/packages/preset-themes/src/styles/island.scss index 67bb32384a8..004f27d3091 100644 --- a/packages/preset-themes/src/styles/island.scss +++ b/packages/preset-themes/src/styles/island.scss @@ -37,174 +37,3 @@ background-attachment: fixed; } } - -// @use '@growi/core/scss/bootstrap/init' as bs; - -// @use './variables' as var; -// @use './theme/mixins/page-editor-mode-manager'; -// @use './atoms/mixins/buttons' as mixins-buttons; -// @use './theme/hsl-functions' as hsl; - -// //== Light Mode -// // -// :root[data-bs-theme='light'] { -// --primary: hsl(var(--primary-hs),var(--primary-l)) !important; -// --primary-hs: 171,33%; -// --primary-l: 69%; -// --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: 170,43%; -// --bgcolor-global-l: 90%; -// --bgcolor-card: #{bs.$gray-100}; -// --bgcolor-inline-code: #{bs.$gray-100}; //optional -// --bgcolor-blinked-section: #{hsl.alpha(var(--primary), 30%)}; -// //--bgcolor-keyword-highlighted: #{$grw-marker-yellow}; - -// // Font colors -// --color-global: hsl(var(--color-global-hs),var(--color-global-l)); -// --color-global-hs: 214,60%; -// --color-global-l: 17%; -// --color-reversal: #eeeeee; -// // --color-header: #2b2b2b; -// --color-link: hsl(var(--color-link-hs),var(--color-link-l)); -// --color-link-hs: 186,31%; -// --color-link-l: 34%; -// --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), 20%)}; -// --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: ; -// --bgcolor-list-hover: #{hsl.darken(var(--bgcolor-global),10%)}; -// --color-list-active: var(--color-global); -// --bgcolor-list-active: var(--primary); - -// // Table colors -// // --color-table: #; // optional -// // --bgcolor-table: #; // optional -// --border-color-table: var(--primary); // optional -// // --color-table-hover: #; // optional -// // --bgcolor-table-hover: #; // optional - -// // Navbar -// --bgcolor-navbar: hsl(var(--bgcolor-navbar-hs),var(--bgcolor-navbar-l)); -// --bgcolor-navbar-hs: 0,2%; -// --bgcolor-navbar-l: 18%; -// --bgcolor-search-top-dropdown: var(--primary); -// --bgcolor-search-top-dropdown-hs: var(--primary-hs); -// --bgcolor-search-top-dropdown-l: var(--primary-l); -// --border-image-navbar: linear-gradient(to right, #5ce4ef 0%, #5953eb 100%); - -// // Logo colors -// --bgcolor-logo: #0d3955; -// --fillcolor-logo-mark: #{lighten(desaturate(bs.$gray-100, 10%), 15%)}; - -// // Sidebar -// --bgcolor-sidebar: hsl(var(--bgcolor-sidebar-hs),var(--bgcolor-sidebar-l)); -// --bgcolor-sidebar-hs: 203,73%; -// --bgcolor-sidebar-l: 19%; -// --bgcolor-sidebar-nav-item-active: rgba(black, 0.37); -// // --bgcolor-sidebar-nav-item-active: rgba(#969494, 0.3); // optional -// --text-shadow-sidebar-nav-item-active: 0px 0px 10px #0099ff; // optional - -// // Sidebar resize button -// --color-resize-button: white; -// --bgcolor-resize-button: var(--primary); -// --bgcolor-resize-button-hs: var(--primary-hs); -// --bgcolor-resize-button-l: var(--primary-l); -// --color-resize-button-hover: white; -// --bgcolor-resize-button-hover: #{hsl.darken(var(--primary),5%)}; - -// // Sidebar contents -// --bgcolor-sidebar-context: hsl(var(--bgcolor-sidebar-context-hs),var(--bgcolor-sidebar-context-l)); -// --bgcolor-sidebar-context-hs: 173,41%; -// --bgcolor-sidebar-context-l: 92%; -// --color-sidebar-context: var(--color-link); -// --color-sidebar-context-hs: var(--color-link-hs); -// --color-sidebar-context-l: var(--color-link-l); - -// // Sidebar list group -// --bgcolor-sidebar-list-group: #eff8f7; // 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: #{bs.$gray-300}; // optional - -// // Icon colors -// --color-editor-icons: var(--color-global); - -// // Border colors -// --border-color-theme: #{bs.$gray-300}; -// --bordercolor-inline-code: #ccc8c8; // optional - -// // Dropdown colors -// --bgcolor-dropdown-link-active: #{var.$growi-blue}; - -// // admin theme box -// --color-theme-color-box: #{hsl.darken(var(--primary), 15%)}; - -// &, body { -// background-image: url('../images/island/island.png'); -// background-attachment: fixed; -// } - -// .rbt-menu { -// background: #{hsl.darken(var(--bgcolor-global), 5%)}; -// } - -// .page-editor-preview-container { -// background-image: url('../images/island/island.png'); -// background-attachment: fixed; -// } - -// // login page -// .nologin { -// background-image: unset !important; -// } - -// // 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), 50%)}, #{hsl.lighten(var(--primary), 5%)}, #{hsl.darken(var(--primary), 5%)}); -// } -// } - -// // Cards -// .admin-bot-card { -// .grw-botcard-title-active { -// color: var(--color-reversal); -// } -// } - -// /* -// * GROWI Sidebar -// */ -// .grw-sidebar { -// // Pagetree -// .grw-pagetree { -// .grw-pagetree-triangle-btn { -// @include mixins-buttons.button-outline-svg-icon-variant(bs.$gray-400, #0d3955); -// } -// } -// // Foldertree -// .grw-foldertree { -// .grw-foldertree-triangle-btn { -// @include mixins-buttons.button-outline-svg-icon-variant(bs.$gray-400, var(--bgcolor-sidebar)); -// } -// } -// } -// } diff --git a/packages/preset-themes/src/styles/jade-green.scss b/packages/preset-themes/src/styles/jade-green.scss index 582dca30e43..3a7849ee00c 100644 --- a/packages/preset-themes/src/styles/jade-green.scss +++ b/packages/preset-themes/src/styles/jade-green.scss @@ -69,261 +69,3 @@ $min-contrast-ratio: 2; --grw-wiki-link-color-rgb: var(--grw-primary-500-rgb); --grw-wiki-link-hover-color-rgb: var(--grw-primary-400-rgb); } - -// @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; - -// :root[data-bs-theme='light'] { -// // Theme colors -// --primary: hsl(var(--primary-hs),var(--primary-l)) !important; -// --primary-hs: 160,53%; -// --primary-l: 46%; -// --secondary-hs: 208,7%; -// --secondary-l: 46%; -// --accentcolor: hsl(var(--accentcolor-hs),var(--accentcolor-l)); -// --accentcolor-hs: 0,0%; -// --accentcolor-l: 75%; - -// // 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: #{bs.$gray-100}; //optional -// --bgcolor-card: var(--accentcolor); -// --bgcolor-blinked-section: #{hsl.alpha(var(--primary),10%)}; -// //--bgcolor-keyword-highlighted: #{$grw-marker-yellow}; - -// // Font colors -// --color-global: hsl(var(--color-global-hs),var(--color-global-l)); -// --color-global-hs: 0,0%; -// --color-global-l: 17%; -// --color-reversal: #{bs.$gray-100}; -// --color-link: var(--primary); -// --color-link-hs: var(--primary-hs); -// --color-link-l: var(--primary-l); -// --color-link-hover: #{hsl.lighten(var(--primary), 12%)}; -// --color-link-wiki: var(--primary); -// --color-link-wiki-hs: var(--primary-hs); -// --color-link-wiki-l: var(--primary-l); -// --color-link-wiki-hover: #{hsl.lighten(var(--primary), 12%)}; -// --color-link-nabvar: var(--color-reversal); -// --color-inline-code: #c7254e; // optional -// --color-search: var(--color-global); - -// // List Group colors -// // --color-list: var(--color-global); -// --bgcolor-list: transparent; -// --color-list-hover: var(--color-global); -// --bgcolor-list-hover: #{hsl.darken(var(--bgcolor-global),3%)}; -// // --color-list-active: var(--color-reversal); -// // --bgcolor-list-active: var(--primary); - -// // Navbar -// --bgcolor-navbar: var(--color-global); -// --bgcolor-navbar-hs: var(--color-global-hs); -// --bgcolor-navbar-l: var(--color-global-l); -// --bgcolor-search-top-dropdown: var(--primary); -// --bgcolor-search-top-dropdown-hs: var(--primary-hs); -// --bgcolor-search-top-dropdown-l: var(--primary-l); -// --border-image-navbar: linear-gradient(to right, var(--primary) 0%, #{hsl.darken(var(--primary), 5%)} 100%); - - -// // Logo colors -// --bgcolor-logo: var(--bgcolor-global); -// --fillcolor-logo-mark: var(--bgcolor-global); - -// // Sidebar -// --bgcolor-sidebar: var(--accentcolor); -// --bgcolor-sidebar-hs: var(--accentcolor-hs); -// --bgcolor-sidebar-l: var(--accentcolor-l); -// // --bgcolor-sidebar-nav-item-active: rgba(#, 0.37); // optional -// --text-shadow-sidebar-nav-item-active: 0px 0px 10px #ffffff; // optional - -// // Sidebar resize button -// --color-resize-button: #ffffff; -// --bgcolor-resize-button: var(--primary); -// --bgcolor-sidebar-context-hs: var(--primary-hs); -// --bgcolor-sidebar-context-l: var(--primary-l); -// --color-resize-button-hover: var(--color-reversal); -// --bgcolor-resize-button-hover: #{hsl.lighten(var(--primary), 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(var(--bgcolor-sidebar-context-hs),var(--bgcolor-sidebar-context-l)); -// --bgcolor-sidebar-context-hs: 0,0%; -// --bgcolor-sidebar-context-l: 93%; - -// // Sidebar list group -// // --bgcolor-sidebar-list-group: #; // 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: var(--primary); -// --bordercolor-inline-code: #ccc8c8; // optional - -// // admin theme box -// --color-theme-color-box: var(--primary); - -// // Navs { -// .nav-tabs { -// border-bottom: var(--primary) 1px solid; -// .nav-link { -// &:hover { -// border-color: #{hsl.lighten(var(--primary), 10%)}; -// border-bottom: none; -// } -// &.active { -// background-color: transparent; -// } -// } -// } - -// // Button -// .btn-group.grw-page-editor-mode-manager { -// .btn.btn-outline-primary { -// @include page-editor-mode-manager.btn-page-editor-mode-manager(#ffffff, var(--primary), var(--primary), #{hsl.lighten(var(--primary), 20%)}); -// } -// } -// } - -// :root[data-bs-theme='dark'] { -// // Theme colors -// --primary: hsl(var(--primary-hs),var(--primary-l)) !important; -// --primary-hs: 160,53%; -// --primary-l: 46%; -// --secondary: hsl(var(--secondary-hs),var(--secondary-l)) !important; -// --secondary-hs: 208,7%; -// --secondary-l: 46%; -// --accentcolor: hsl(var(--accentcolor-hs),var(--accentcolor-l)); -// --accentcolor-hs: 0,0%; -// --accentcolor-l: 13%; - -// // Background colors -// --bgcolor-global: hsl(var(--bgcolor-global-hs),var(--bgcolor-global-l)); -// --bgcolor-global-hs: 0,0%; -// --bgcolor-global-l: 20%; -// --bgcolor-inline-code: #{bs.$gray-100}; //optional -// --bgcolor-card: #{hsl.darken(var(--bgcolor-global), 5%)}; -// --bgcolor-blinked-section: #{hsl.alpha(var(--primary),50%)}; -// --bgcolor-keyword-highlighted: #{darken(var.$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: 100%; -// --color-reversal: #{bs.$gray-100}; -// --color-link: var(--primary); -// --color-link-hs: var(--primary-hs); -// --color-link-l: var(--primary-l); -// --color-link-hover: #{hsl.lighten(var(--color-link),12%)}; -// --color-link-wiki: var(--primary); -// --color-link-wiki-hs: var(--primary-hs); -// --color-link-wiki-l: var(--primary-l); -// --color-link-wiki-hover: #{hsl.lighten(var(--color-link),12%)}; -// --color-link-nabvar: var(--color-reversal); -// --color-inline-code: #c7254e; // optional -// --color-search: #a7a7a7; - -// // List Group colors -// // --color-list: var(--color-global); -// --bgcolor-list: transparent; -// --color-list-hover: var(--accentcolor); -// // --bgcolor-list-hover: #{hsl.darken(var(--bgcolor-global),3%)};// optional -// // --color-list-active: white ; // optional -// // --bgcolor-list-active: #{hsl.lighten(var(--bgcolor-global),3%)}; // optional - -// // Navbar -// --bgcolor-navbar: hsl(var(--bgcolor-navbar-hs),var(--bgcolor-navbar-l)); -// --bgcolor-navbar-hs: 0,0%; -// --bgcolor-navbar-l: 17%; -// --bgcolor-search-top-dropdown: var(--primary); -// --bgcolor-search-top-dropdown-hs: var(--primary-hs); -// --bgcolor-search-top-dropdown-l: var(--primary-l); -// --border-image-navbar: linear-gradient(to right, var(--primary) 0%, #{hsl.darken(var(--primary), 5%)} 100%); - -// // Logo colors -// --bgcolor-logo: var(--color-global); -// --fillcolor-logo-mark: var(--color-global); -// // --fillcolor-logo-mark: #4e5a60; - -// // Sidebar -// --bgcolor-sidebar: var(--accentcolor); -// --bgcolor-sidebar-hs: var(--accentcolor-hs); -// --bgcolor-sidebar-l: var(--accentcolor-l); -// // --bgcolor-sidebar-nav-item-active: rgba(#, 0.3); // optional -// --text-shadow-sidebar-nav-item-active: 0px 0px 10px var(--primary); // optional - -// // Sidebar resize button -// --color-resize-button: var(--color-global); -// --bgcolor-resize-button: var(--primary); -// --bgcolor-resize-button-hs: var(--primary-hs); -// --bgcolor-resize-button-l: var(--primary-l); -// --color-resize-button-hover: var(--color-global); -// --bgcolor-resize-button-hover: #{hsl.darken(var(--primary), 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(var(--bgcolor-sidebar-context-hs),var(--bgcolor-sidebar-context-l)); -// --bgcolor-sidebar-context-hs: 0,2%; -// --bgcolor-sidebar-context-l: 25%; - -// // Sidebar list group -// // --bgcolor-sidebar-list-group: #; // 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: var(--primary); -// --bordercolor-inline-code: #4d4d4d; // optional - -// // admin theme box -// --color-theme-color-box: var(--primary); - -// // Navs -// .nav-tabs { -// border-bottom: var(--primary) 1px solid; -// .nav-link { -// &:hover { -// border-color: #{hsl.lighten(var(--primary), 10%)}; -// border-bottom: none; -// } -// &.active { -// color: var(--primary); -// background-color: transparent; -// border-color: var(--primary); -// } -// } -// } - -// // Table -// .table { -// color: white; -// } - -// // Button -// .btn-group.grw-page-editor-mode-manager { -// .btn.btn-outline-primary { -// @include page-editor-mode-manager.btn-page-editor-mode-manager(#ffffff, var(--primary), var(--primary), #{hsl.darken(var(--primary), 20%)}); -// } -// } -// } diff --git a/packages/preset-themes/src/styles/kibela.scss b/packages/preset-themes/src/styles/kibela.scss index 5907b934456..7c44a4ae8e1 100644 --- a/packages/preset-themes/src/styles/kibela.scss +++ b/packages/preset-themes/src/styles/kibela.scss @@ -32,138 +32,3 @@ --grw-wiki-link-color-rgb: var(--grw-primary-400-rgb); --grw-wiki-link-hover-color-rgb: var(--grw-primary-500-rgb); } - -// @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; - -// :root[data-bs-theme='light']{ -// --primary: hsl(var(--primary-hs),var(--primary-l)) !important; -// --primary-hs: 212,80%; -// --primary-l: 35%; -// --secondary: hsl(var(--secondary-hs),var(--secondary-l)) !important; -// --secondary-hs: 208,7%; -// --secondary-l: 46%; -// --subthemecolor: hsl(var(--subthemecolor-hs),var(--subthemecolor-l)); -// --subthemecolor-hs: 224,94%; -// --subthemecolor-l: 66%; -// --lightthemecolor: hsl(var(--lightthemecolor-hs),var(--lightthemecolor-l)); -// --lightthemecolor-hs: 220,80%; -// --lightthemecolor-l: 84%; - -// // Background colors -// --bgcolor-global: hsl(var(--bgcolor-global-hs),var(--bgcolor-global-l)); -// --bgcolor-global-hs: 210,10%; -// --bgcolor-global-l: 96%; -// --bgcolor-inline-code: #{hsl.lighten(var(--subthemecolor), 70%)}; -// --bgcolor-card: var(--lightthemecolor); -// --bgcolor-blinked-section: #{hsl.alpha(var(--primary),20%)}; -// //--bgcolor-keyword-highlighted: #{$grw-marker-yellow}; - -// // Font colors -// --color-global: hsl(var(--color-global-hs),var(--color-global-l)); -// --color-global-hs: 217,23%; -// --color-global-l: 31%; -// --color-reversal: #{bs.$gray-100}; -// --color-header: var(--primary); -// --color-link: hsl(var(--color-link-hs),var(--color-link-l)); -// --color-link-hs: 224,56%; -// --color-link-l: 55%; -// --color-link-hover: #{hsl.lighten(var(--color-link),12%)}; -// --color-link-wiki: #{hsl.lighten(var(--primary), 20%)}; -// --color-link-wiki-hover: #{hsl.lighten(var(--primary), 40%)}; -// --color-link-nabvar: var(--color-global); -// --color-inline-code: var(--subthemecolor); - -// // List Group colors -// --color-list: var(--color-global); // optional -// --bgcolor-list: var(--bgcolor-global); // optional -// --color-list-hover: var(--color-reversal); -// --color-list-active: var(--color-reversal); -// --bgcolor-list-active: var(--primary); - -// // Navbar -// --bgcolor-navbar: hsl(var(--bgcolor-navbar-hs),var(--bgcolor-navbar-l)); -// --bgcolor-navbar-hs: 0,0%; -// --bgcolor-navbar-l: 100%; -// --bgcolor-search-top-dropdown: var(--primary); -// --bgcolor-search-top-dropdown-hs: var(--primary-hs); -// --bgcolor-search-top-dropdown-l: var(--primary-l); - -// // Logo colors -// --bgcolor-logo: transparent; -// --fillcolor-logo-mark: #{hsl.lighten(var(--primary), 20%)}; - -// // Sidebar -// --bgcolor-sidebar: var(--primary); -// --bgcolor-sidebar-hs: var(--primary-hs); -// --bgcolor-sidebar-l: var(--primary-l); -// --bgcolor-sidebar-context: #{hsl.lighten(var(--primary), 10%)}; - -// // 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: 199,74%; -// --bgcolor-resize-button-l: 49%; -// --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(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: var(--lightthemecolor); -// --thickborder: #5584e1; -// --bordercolor-inline-code: var(--lightthemecolor); - -// // dropdown colors -// --bgcolor-dropdown-link-active: #{var.$growi-blue}; - -// // admin theme box -// --color-theme-color-box: #{hsl.lighten(var(--primary), 20%)}; - -// .main { -// .container, -// .container-sm, -// .container-md, -// .container-lg, -// .container-fluid { -// padding-top: 30px; -// padding-bottom: 30px; -// background-color: white; -// border-radius: 0.35em; -// } -// } - -// .user-page-footer { -// margin-top: 3rem; -// margin-bottom: 3rem; -// background-color: white; -// border-radius: 0.35em; -// } - -// //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), 15%)}, #{hsl.lighten(var(--primary), 45%)}, #{hsl.lighten(var(--primary), 50%)}); -// } -// } -// } diff --git a/packages/preset-themes/src/styles/mono-blue.scss b/packages/preset-themes/src/styles/mono-blue.scss index 58d2d60d189..daabf7316ca 100644 --- a/packages/preset-themes/src/styles/mono-blue.scss +++ b/packages/preset-themes/src/styles/mono-blue.scss @@ -67,268 +67,3 @@ --grw-wiki-link-color-rgb: var(--grw-primary-500-rgb); --grw-wiki-link-hover-color-rgb: var(--grw-primary-300-rgb); } - -// @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; - -// :root[data-bs-theme='light'] { -// // Theme colors -// --primary: hsl(var(--primary-hs),var(--primary-l)) !important; -// --primary-hs: 197,100%; -// --primary-l: 24%; -// --secondary: hsl(var(--secondary-hs),var(--secondary-l)) !important; -// --secondary-hs: 208,7%; -// --secondary-l: 46%; -// --accentcolor: hsl(var(--accentcolor-hs),var(--accentcolor-l)); -// --accentcolor-hs: 210,14%; -// --accentcolor-l: 89%; - -// // Background colors -// --bgcolor-global: hsl(var(--bgcolor-global-hs),var(--bgcolor-global-l)); -// --bgcolor-global-hs: 200,60%; -// --bgcolor-global-l: 98%; -// --bgcolor-inline-code: #{bs.$gray-100}; //optional -// --bgcolor-card: #{hsl.darken(var(--bgcolor-global), 5%)}; -// --bgcolor-blinked-section: #{hsl.alpha(var(--primary),10%)}; -// //--bgcolor-keyword-highlighted: #{$grw-marker-yellow}; - -// // Font colors -// --color-global: var(--primary); -// --color-global-hs: var(--primary-hs); -// --color-global-l: var(--primary-l); -// --color-reversal: #{bs.$gray-100}; -// --color-link: #{hsl.lighten(var(--primary),5%)}; -// --color-link-hs: var(--primary-hs); -// --color-link-l: calc(var(--primary-l) + 5%); -// --color-link-hover: #{hsl.lighten(var(--color-link), 12%)}; -// --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: #{hsl.lighten(var(--primary),40%)}; -// --color-link-nabvar: var(--color-reversal); -// --color-inline-code: #c7254e; // optional -// --color-search: #c0d6df; - -// // List Group colors -// // --color-list: var(--color-global); -// --bgcolor-list: transparent; -// --color-list-hover: var(--color-search); -// --bgcolor-list-hover: #{hsl.lighten(var(--primary), 70%)}; -// // --color-list-active: var(--color-reversal); -// // --bgcolor-list-active: var(--primary); - -// // Navbar -// --bgcolor-navbar: hsl(var(--bgcolor-navbar-hs),var(--bgcolor-navbar-l)); -// --bgcolor-navbar-h: 0; -// --bgcolor-navbar-s: 1%; -// --bgcolor-navbar-l: 16%; -// --bgcolor-navbar-hs: 0,1%; -// --bgcolor-search-top-dropdown: var(--primary); -// --bgcolor-search-top-dropdown-hs: var(--primary-hs); -// --bgcolor-search-top-dropdown-l: var(--primary-l); -// --border-image-navbar: linear-gradient(to right, #54bafd 0%, #3d98a3 50%, #708b0b 100%); - -// // Logo colors -// --bgcolor-logo: var(--primary); -// --fillcolor-logo-mark: hsl(var(--bgcolor-navbar-h),calc(var(--bgcolor-navbar-s) - 10%),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(#, 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: 199,74%; -// --bgcolor-resize-button-l: 49%; -// --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(var(--bgcolor-sidebar-context-hs),var(--bgcolor-sidebar-context-l)); -// --bgcolor-sidebar-context-hs: 193,100%; -// --bgcolor-sidebar-context-l: 97%; - -// // Sidebar list group -// // --bgcolor-sidebar-list-group: #; // 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: var(--accentcolor); -// --bordercolor-inline-code: #ccc8c8; // optional - -// // admin theme box -// --color-theme-color-box: #{hsl.lighten(var(--primary), 20%)}; - -// // Navs { -// .nav-tabs { -// border-bottom: var(--accentcolor) 1px solid; -// .nav-link { -// &:hover { -// border-color: #{hsl.lighten(var(--accentcolor),10%)}; -// border-bottom: none; -// } -// &.active { -// background-color: transparent; -// } -// } -// } -// // 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%)}); -// } -// } -// } - -// :root[data-bs-theme='dark'] { -// // Theme colors -// --primary: hsl(var(--primary-hs),var(--primary-l)) !important; -// --primary-hs: 197,100%; -// --primary-l: 39%; -// --secondary: hsl(var(--secondary-hs),var(--secondary-l)) !important; -// --secondary-hs: 208,7%; -// --secondary-l: 46%; -// --accentcolor: hsl(var(--accentcolor-hs),var(--accentcolor-l)); -// --accentcolor-hs: 203,78%; -// --accentcolor-l: 35%; - -// // Background colors -// --bgcolor-global: hsl(var(--bgcolor-global-hs),var(--bgcolor-global-l)); -// --bgcolor-global-hs: 203,77%; -// --bgcolor-global-l: 10%; -// --bgcolor-navbar: hsl(var(--bgcolor-navbar-hs),var(--bgcolor-navbar-l)); -// --bgcolor-navbar-hs: 201,20%; -// --bgcolor-navbar-l: 19%; -// --bgcolor-inline-code: #1f1f22; //optional -// --bgcolor-card: #{hsl.darken(var(--bgcolor-global), 5%)}; -// --bgcolor-blinked-section: #{hsl.alpha(var(--primary),50%)}; -// --bgcolor-keyword-highlighted: #{darken(var.$grw-marker-red, 30%)}; - -// // Font colors -// --color-global: hsl(var(--color-global-hs),var(--color-global-l)); -// --color-global-hs: 180,1%; -// --color-global-l: 83%; -// --color-reversal: #{bs.$gray-100}; -// --color-link: hsl(var(--color-link-hs),var(--color-link-l)); -// --color-link-hs: 201,75%; -// --color-link-l: 77%; -// --color-link-hover: #{hsl.darken(var(--color-link), 12%)}; -// --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: #{hsl.lighten(var(--primary),40%)}; -// --color-link-nabvar: var(--color-reversal); -// --color-inline-code: #c7254e; // optional -// --color-search: #000102; - -// // List Group colors -// // --color-list: var(--color-global); -// --bgcolor-list: transparent; -// --color-list-hover: #16617d; -// // --bgcolor-list-hover: #{hsl.lighten(var(--bgcolor-global),3%)}; // optional -// // --color-list-active: var(--color-reversal); -// // --bgcolor-list-active: var(--primary); - -// // Navbar -// --bgcolor-navbar: hsl(var(--bgcolor-navbar-hs),var(--bgcolor-navbar-l)); -// --bgcolor-navbar-h: 0; -// --bgcolor-navbar-s: 1%; -// --bgcolor-navbar-l: 16%; -// --bgcolor-navbar-hs:var(--bgcolor-navbar-h),var(--bgcolor-navbar-s); -// --bgcolor-search-top-dropdown: var(--primary); -// --bgcolor-search-top-dropdown-hs: var(--primary-hs); -// --bgcolor-search-top-dropdown-l: var(--primary-l); -// --border-image-navbar: linear-gradient(to right, #54bafd 0%, #3d98a3 50%, #708b0b 100%); - -// // Logo colors -// --bgcolor-logo: #13191c; -// --fillcolor-logo-mark: hsl(var(--bgcolor-navbar-h),calc(var(--bgcolor-navbar-s) - 10%),calc(var(--bgcolor-navbar-l) + 15%)); -// // --fillcolor-logo-mark: #4e5a60; - -// // Sidebar -// --bgcolor-sidebar: hsl(var(--bgcolor-sidebar-hs),var(--bgcolor-sidebar-l)); -// --bgcolor-sidebar-hs: 196,70%; -// --bgcolor-sidebar-l: 29%; -// // --bgcolor-sidebar-nav-item-active: rgba(#, 0.3); // optional -// --text-shadow-sidebar-nav-item-active: 0px 0px 10px #0099ff; // optional - -// // Sidebar resize button -// --color-resize-button: var(--color-global); -// --bgcolor-resize-button: var(--primary); -// --bgcolor-resize-button-hs: var(--primary-hs); -// --bgcolor-resize-button-l: var(--primary-l); -// --color-resize-button-hover: var(--color-global); -// --bgcolor-resize-button-hover: #{hsl.darken(var(--primary), 5%)}; - -// // Sidebar contents -// --bgcolor-sidebar-context: #{hsl.darken(var(--bgcolor-sidebar), 13%)}; -// --bgcolor-sidebar-context-hs: var(--bgcolor-sidebar-hs); -// --bgcolor-sidebar-context-l: calc(var(--bgcolor-sidebar-l) - 13%); -// --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: #; // 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: var(--accentcolor); -// --bordercolor-inline-code: #4d4d4d; // optional - -// // admin theme box -// --color-theme-color-box: var(--primary); - -// // Navs -// .nav-tabs { -// border-bottom: var(--accentcolor) 1px solid; -// .nav-link { -// &:hover { -// border-color: #{hsl.lighten(var(--accentcolor), 10%)}; -// border-bottom: none; -// } -// &.active { -// color: var(--color-link); -// background-color: transparent; -// border-color: var(--accentcolor); -// } -// } -// } - -// // Table -// .table { -// color: white; -// } - -// // 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%)}, var(--primary), #{hsl.darken(var(--primary), 10%)}, #{hsl.darken(var(--primary), 20%)}); -// } -// } -// } diff --git a/packages/preset-themes/src/styles/nature.scss b/packages/preset-themes/src/styles/nature.scss index 570df312738..9c7d9e952ea 100644 --- a/packages/preset-themes/src/styles/nature.scss +++ b/packages/preset-themes/src/styles/nature.scss @@ -32,129 +32,3 @@ --grw-wiki-link-color-rgb: var(--grw-primary-600-rgb); --grw-wiki-link-hover-color-rgb: var(--grw-primary-700-rgb); } - -// @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; - -// .growi:not(.login-page) { -// // add background-image -// .page-editor-preview-container { -// background-attachment: fixed; -// background-position: center center; -// background-size: cover; -// } -// } - -// //== Light Mode -// // -// :root[data-bs-theme='light'] { -// --primary: hsl(var(--primary-hs),var(--primary-l)) !important; -// --primary-hs: 311,100%; -// --primary-l: 14%; -// --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: 0,0%; -// --bgcolor-global-l: 99%; -// --bgcolor-inline-code: #{bs.$gray-100}; //optional -// --bgcolor-card: #f1ffe4; -// --bgcolor-blinked-section: #{hsl.alpha(var(--primary), 10%)}; -// //--bgcolor-keyword-highlighted: #{$grw-marker-yellow}; - -// // Font colors -// --color-global: hsl(var(--color-global-hs),var(--color-global-l)); -// --color-global-hs: 311,100%; -// --color-global-l: 14%; -// --color-reversal: #eeeeee; -// --color-link: hsl(var(--color-link-hs),var(--color-link-l)); -// --color-link-hs: 328,100%; -// --color-link-l: 25%; -// --color-link-hover: #{hsl.lighten(var(--color-link), 20%)}; -// --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: #{hsl.lighten(var(--primary), 40%)}; -// --color-link-nabvar: #a7a7a7; -// --color-inline-code: #c7254e; // optional -// --color-search: white; - -// // Navbar -// --bgcolor-navbar: hsl(var(--bgcolor-navbar-hs),var(--bgcolor-navbar-l)); -// --bgcolor-navbar-hs: 158,30%; -// --bgcolor-navbar-l: 20%; -// --bgcolor-search-top-dropdown: hsl(var(--bgcolor-search-top-dropdown-hs),var(--bgcolor-search-top-dropdown-l)); -// --bgcolor-search-top-dropdown-hs: 115,95%; -// --bgcolor-search-top-dropdown-l: 36%; -// --border-image-navbar: linear-gradient(to right, #5c78ef 0%, #16bc42 50%, #5c78ef 100%); - -// // Logo colors -// --bgcolor-logo: var(--bgcolor-navbar); -// --fillcolor-logo-mark: #{lighten(desaturate(bs.$gray-100, 10%), 15%)}; - -// // Sidebar -// --bgcolor-sidebar: hsl(var(--bgcolor-sidebar-hs),var(--bgcolor-sidebar-l)); -// --bgcolor-sidebar-hs: 158,71%; -// --bgcolor-sidebar-l: 33%; - -// // Sidebar contents -// --color-sidebar-context: hsl(var(--color-sidebar-context-hs),var(--color-sidebar-context-l)); -// --color-sidebar-context-hs: 328,100%; -// --color-sidebar-context-l: 25%; -// --bgcolor-sidebar-context: hsl(var(--bgcolor-sidebar-context-hs),var(--bgcolor-sidebar-context-l)); -// --bgcolor-sidebar-context-hs: 67,31%; -// --bgcolor-sidebar-context-l: 94%; - -// // Sidebar resize button -// --color-resize-button: white; -// --bgcolor-resize-button: hsl(var(--bgcolor-resize-button-hs),var(--bgcolor-resize-button-l)); -// --bgcolor-resize-button-hs: 115,95%; -// --bgcolor-resize-button-l: 36%; -// --color-resize-button-hover: var(--color-reversal); -// --bgcolor-resize-button-hover: #{hsl.lighten(var(--bgcolor-resize-button), 5%)}; - -// // Subnavigation -// --bgcolor-subnav: hsl(var(--bgcolor-subnav-hs),var(--bgcolor-subnav-l)); -// --bgcolor-subnav-hs: 0,0%; -// --bgcolor-subnav-l: 98%; - -// // Icon colors -// --color-editor-icons: var(--color-global); - -// // Border colors -// --border-color-theme: #{bs.$gray-300}; -// --bordercolor-inline-code: #ccc8c8; // optional - -// // Table colors -// --border-color-table: #{bs.$gray-400}; // optional - -// // admin theme box -// --color-theme-color-box: #{hsl.lighten(var(--primary), 20%)}; - -// // Search Top -// .grw-global-search { -// .btn-secondary.dropdown-toggle { -// color: var(--color-search); -// } -// } - -// // Navs -// .nav-tabs .nav-link.active { -// color: var(--color-link) !important; -// &:hover { -// color: var(--color-link-hover) !important; -// } -// } - -// // Button -// .btn-group.grw-page-editor-mode-manager { -// .btn.btn-outline-primary { -// @include page-editor-mode-manager.btn-page-editor-mode-manager(var(--bgcolor-navbar), #{hsl.lighten(var(--bgcolor-navbar), 65%)}, #{hsl.lighten(var(--bgcolor-navbar), 70%)}); -// } -// } -// } diff --git a/packages/preset-themes/src/styles/spring.scss b/packages/preset-themes/src/styles/spring.scss index 3bfb5eb362f..c483559088a 100644 --- a/packages/preset-themes/src/styles/spring.scss +++ b/packages/preset-themes/src/styles/spring.scss @@ -40,198 +40,3 @@ background-size: cover; } } - -// @use '@growi/core/scss/bootstrap/init' as bs; - -// @use './variables' as var; -// @use './theme/mixins/page-editor-mode-manager'; -// @use './theme/mixins/hsl-button'; -// @use './theme/hsl-functions' as hsl; - -// //== Light Mode -// // -// :root[data-bs-theme='light'] { -// --primary: hsl(var(--primary-hs),var(--primary-l)) !important; -// --primary-hs: 348,100%; -// --primary-l: 86%; -// --secondary: hsl(var(--secondary-hs),var(--secondary-l)) !important; -// --secondary-hs: 326,57%; -// --secondary-l: 72%; - -// // 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: #{bs.$gray-100}; //optional -// --bgcolor-card: #{bs.$gray-100}; -// --bgcolor-blinked-section: #{hsl.alpha(var(--primary), 50%)}; -// --bgcolor-keyword-highlighted: #{var.$grw-marker-cyan}; - -// // Font colors -// --color-global: hsl(var(--color-global-hs),var(--color-global-l)); -// --color-global-hs: 0,0%; -// --color-global-l: 0%; -// --color-reversal: white; -// --color-link: hsl(var(--color-link-hs),var(--color-link-l)); -// --color-link-hs: 108,32%; -// --color-link-l: 50%; -// --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), 10%)}; -// --color-link-nabvar: var(--bgcolor-global); -// --color-inline-code: #c7254e; // optional - -// // List Group colors -// // $color-list: $color-global; -// --bgcolor-list: #fff0f5; -// --color-list-hover: #{hsl.lighten(var(--secondary), 20%)}; -// --bgcolor-list-hover: #{darken(#fff0f5, 2%)}; -// --color-list-active: var(--bgcolor-global); -// --bgcolor-list-active: var(--secondary); - -// // Navbar -// --bgcolor-navbar: hsl(var(--bgcolor-navbar-hs),var(--bgcolor-navbar-l)); -// --bgcolor-navbar-hs: 349,55%; -// --bgcolor-navbar-l: 62%; -// --bgcolor-search-top-dropdown: var(--primary); -// --bgcolor-search-top-dropdown-hs: var(--primary-hs); -// --bgcolor-search-top-dropdown-l: var(--primary-l); -// --border-image-navbar: linear-gradient(to right, #cbe682 0%, #4ad6e8 50%, #ea42f0 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); - -// // Sidebar resize button -// --color-resize-button: var(--color-reversal); -// --bgcolor-resize-button: var(--color-link); -// --bgcolor-resize-button-hs: var(--color-link-hs); -// --bgcolor-resize-button-l: var(--color-link-l); -// --color-resize-button-hover: var(--color-reversal); -// --bgcolor-resize-button-hover: #{hsl.lighten(var(--color-link), 5%)}; - -// // Sidebar contents -// --color-sidebar-context: var(--color-link); -// --color-sidebar-context-hs: var(--color-link-hs); -// --color-sidebar-context-l: var(--color-link-l); -// --bgcolor-sidebar-context: hsl(var(--bgcolor-sidebar-context-hs),var(--bgcolor-sidebar-context-l)); -// --bgcolor-sidebar-context-hs: 150,100%; -// --bgcolor-sidebar-context-l: 100%; - -// // 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) + 4%); - -// // Icon colors -// --color-editor-icons: var(--color-global); - -// // Border colors -// --border-color-theme: #{bs.$gray-300}; // former: `$navbar-border: $gray-300;` -// --bordercolor-inline-code: #ccc8c8; // optional - -// // Dropdown colors -// --bgcolor-dropdown-link-active: #{var.$growi-blue}; - -// // admin theme box -// --color-theme-color-box: #{hsl.darken(var(--primary), 20%)}; - -// &, body { -// background-image: url('../images/spring/spring02.svg'); -// background-attachment: fixed; -// background-position: bottom; -// background-size: cover; -// } - -// .grw-navbar { -// border-bottom: var(--secondary) 4px solid; -// } - -// //Button -// // Outline buttons are applyed the accent color to this spring theme cuz the primary is too light and it looks like unable to click them. -// .btn.btn-outline-primary { -// @include hsl-button.button-outline-variant(var(--secondary), var(--secondary), #{hsl.lighten(var(--secondary), 20%)}, var(--secondary)); -// } -// .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), 50%)}, #{hsl.lighten(var(--primary), 5%)}, #{hsl.lighten(var(--primary), 10%)}); -// } -// } - -// .growi:not(.login-page) { -// // add background-image -// .page-editor-preview-container { -// background-image: url('../images/spring/spring02.svg'); -// background-attachment: fixed; -// background-position: bottom; -// background-size: cover; -// } -// } - -// // login and register -// .nologin { -// .page-wrapper{ -// background-color: #fff0f5; -// background-image: url('../images/spring/spring.svg'); -// background-attachment: fixed; -// background-position: bottom; -// background-size: cover; - -// .nologin-header, -// .nologin-dialog { -// background-color: rgba(black, 0.1); -// a.link-switch { -// color: var(--color-global); -// } -// } - -// .grw-external-auth-form { -// border-color: var(--secondary); -// } -// } -// } - -// .table { -// background-color: var(--bgcolor-global); -// } - -// /* -// Cards -// */ -// .card-timeline > .card-header { -// background-color: antiquewhite; -// } - -// .admin-bot-card { -// .grw-botcard-title-active { -// color: var(--color-reversal); -// } -// } - -// h1, -// h2 { -// color: var(--color-link); - -// svg { -// fill: var(--color-link); -// } -// } - -// .nav.nav-tabs { -// > .nav-item { -// > .nav-link.active { -// color: var(--color-link); -// } -// } -// } -// } diff --git a/packages/preset-themes/src/styles/wood.scss b/packages/preset-themes/src/styles/wood.scss index a3e6e5de308..2e54025762b 100644 --- a/packages/preset-themes/src/styles/wood.scss +++ b/packages/preset-themes/src/styles/wood.scss @@ -36,201 +36,3 @@ background-image: url('../images/wood/wood.svg'); } } - -// @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; - -// .growi:not(.login-page) { -// // add background-image -// .page-editor-preview-container { -// background-image: url('../images/wood/wood.jpg'); -// background-attachment: fixed; -// background-position: center center; -// background-size: cover; -// } -// } - -// .growi.login-page { -// .page-wrapper { -// background-image: url('../images/wood/wood.jpg'); -// background-attachment: fixed; -// background-position: center center; -// background-size: cover; -// } -// } - -// //== Light Mode -// // -// :root[data-bs-theme='light'] { -// --primary: hsl(var(--primary-hs),var(--primary-l)) !important; -// --primary-hs: 55,31%; -// --primary-l: 52%; -// --secondary: hsl(var(--secondary-hs),var(--secondary-l)) !important; -// --secondary-hs: 208,7%; -// --secondary-l: 46%; -// --themecolor: hsl(var(--themecolor-hs),var(--themecolor-l)); -// --themecolor-hs: 53,32%; -// --themecolor-l: 60%; - -// // Background colors -// --bgcolor-global: hsl(var(--bgcolor-global-hs),var(--bgcolor-global-l)); -// --bgcolor-global-hs: 0,0%; -// --bgcolor-global-l: 100%; -// --bgcolor-card: #ece8de; -// --bgcolor-blinked-section: #{hsl.alpha(var(--primary),30%)}; -// --bgcolor-keyword-highlighted: #{var.$grw-marker-blue}; - -// // Font colors -// --color-global: hsl(var(--color-global-hs),var(--color-global-l)); -// --color-global-hs: 42,86%; -// --color-global-l: 14%; -// --color-reversal: #fffffc; -// --color-link: hsl(var(--color-link-hs),var(--color-link-l)); -// --color-link-hs: 44,93%; -// --color-link-l: 32%; -// --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), 10%)}; -// --color-link-nabvar: #a7a7a7; -// --color-search: white; - -// // Inline code -// --bgcolor-inline-code: #f5f3ee;; //optional -// // --color-inline-code: # !default; -// --bordercolor-inline-code: var(--themecolor); //optional - -// // List Group colors -// // --color-list: var(--color-global); -// --bgcolor-list: transparent; -// --color-list-hover: #{bs.$gray-100}; -// --bgcolor-list-hover: #{hsl.lighten(var(--primary), 40%)}; -// // --color-list-active: var(--color-reversal); -// --bgcolor-list-active: #{hsl.lighten(var(--primary), 30%)}; - -// // Table colors -// // --color-table: #; // optional -// // --bgcolor-table: #; // optional -// --border-color-table: #{bs.$gray-400}; // optional -// // --color-table-hover: #; // optional -// // --bgcolor-table-hover: #; // optional - -// // Navbar -// --bgcolor-navbar: hsl(var(--bgcolor-navbar-hs),var(--bgcolor-navbar-l)); -// --bgcolor-navbar-hs: 0,1%; -// --bgcolor-navbar-l: 16%; -// --bgcolor-search-top-dropdown: var(--themecolor); -// --bgcolor-search-top-dropdown-hs: var(--themecolor-hs); -// --bgcolor-search-top-dropdown-l: var(--themecolor-l); -// --border-image-navbar: linear-gradient(to right, var(--themecolor) 0%, #{hsl.darken(var(--themecolor), 20%)} 100%); - -// // Logo colors -// --bgcolor-logo: #{hsl.darken(var(--themecolor), 10%)}; -// --fillcolor-logo-mark: #{lighten(desaturate(#b9b177, 50%), 50%)}; // Icon colors -// --color-editor-icons: var(--color-global); - -// // Sidebar -// --bgcolor-sidebar: var(--themecolor); -// --bgcolor-sidebar-hs: var(--themecolor-hs); -// --bgcolor-sidebar-l: var(--themecolor-l); - -// // Sidebar contents -// --color-sidebar-context: hsl(var(--color-sidebar-context-hs),var(--color-sidebar-context-l)); -// --color-sidebar-context-hs: 44,93%; -// --color-sidebar-context-l: 32%; -// --bgcolor-sidebar-context: #{hsl.lighten(var(--themecolor), 38%)}; -// --bgcolor-sidebar-context-hs: var(--themecolor-hs); -// --bgcolor-sidebar-context-l: calc(var(--themecolor-l) + 38%); - -// // Sidebar list group -// --bgcolor-sidebar-list-group: rgba(#f7f5f1, 0.5); - -// // Sidebar resize button -// --color-resize-button: white; -// --bgcolor-resize-button: var(--themecolor); -// --bgcolor-resize-button-hs: var(--themecolor-hs); -// --bgcolor-resize-button-l: var(--themecolor-l); -// --color-resize-button-hover: var(--color-reversal); -// --bgcolor-resize-button-hover: #{hsl.lighten(var(--bgcolor-resize-button), 5%)}; - -// // Border colors -// --border-color-theme: #{bs.$gray-300}; // former: `$navbar-border: $gray-300;` -// --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%)}; - -// // alert -// --color-alert: var(--color-reversal); - -// // 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%); - -// &, body { -// background-image: url('../images/wood/wood.jpg'); -// background-attachment: fixed; -// background-position: 50%; -// background-size: cover; -// } - -// /* -// * Modal -// */ -// .modal-dialog .modal-header.bg-primary { -// background-image: url('../images/wood/wood-navbar.jpg'); -// } - -// // Sidebar -// .grw-sidebar { -// div[data-testid='GlobalNavigation'] { -// background-image: url('../images/wood/wood-navbar.jpg'); - -// button, -// .btn { -// border: none; -// } -// } -// div[data-testid='ContextualNavigation'] { -// > div { -// background-color: rgba(white, 0.6); -// background-image: url('../images/wood/wood-navbar.jpg'); -// background-blend-mode: lighten; -// } -// } -// } - -// // login and register -// .nologin { -// background: unset !important; - -// .page-wrapper{ -// .nologin-header, -// .nologin-dialog { -// background-color: rgba(black, 0.1); -// a.link-switch { -// color: rgba(black, 0.5); -// } -// } - -// .grw-external-auth-form { -// border-color: #aaa; -// } -// } -// } - -// // 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), 30%)}, #{hsl.lighten(var(--primary), 15%)}, #{hsl.lighten(var(--primary), 25%)}); -// } -// } -// }