diff --git a/docker-compose.yml b/docker-compose.yml index 336e439ce..6c3c06dd8 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -146,7 +146,7 @@ services: healthcheck: test: ['CMD', '/bin/sh', '/home/node/app/scripts/server_healthy.sh'] interval: 1s - retries: 30 + retries: 60 tty: true init: true diff --git a/packages/client/app/DefaultPage.jsx b/packages/client/app/DefaultPage.jsx index 8c248003d..81a71053a 100644 --- a/packages/client/app/DefaultPage.jsx +++ b/packages/client/app/DefaultPage.jsx @@ -1,7 +1,5 @@ import Modal from 'react-modal' -import { ThemeProvider } from 'styled-components' -import theme from './theme' import GlobalStyle from './theme/elements/GlobalStyle' import AssetManager from './components/asset-manager/src/AssetManagerPage' @@ -23,10 +21,8 @@ const DefaultPage = () => { - - - - + + diff --git a/packages/client/app/components/NextPageButton/style.jsx b/packages/client/app/components/NextPageButton/style.jsx index fabf786b5..0536bc47f 100644 --- a/packages/client/app/components/NextPageButton/style.jsx +++ b/packages/client/app/components/NextPageButton/style.jsx @@ -1,7 +1,6 @@ import { Link } from 'react-router-dom' import styled from 'styled-components' import { th } from '@coko/client' -import { color } from '../../theme' export const HasNextPage = styled(Link)` align-items: center; @@ -13,9 +12,9 @@ export const HasNextPage = styled(Link)` ` export const NextPageButton = styled.span` - border-bottom: 1px solid ${color.brand1.tint90}; - border-top: 1px solid ${color.brand1.tint90}; - color: ${color.brand1.base}; + border-bottom: 1px solid ${th('color.brand1.tint90')}; + border-top: 1px solid ${th('color.brand1.tint90')}; + color: ${th('color.brand1.base')}; display: flex; flex: 1; font-size: 15px; @@ -28,8 +27,8 @@ export const NextPageButton = styled.span` width: 100%; &:hover { - background: ${color.brand1.tint50}; - color: ${color.brand1.base}; + background: ${th('color.brand1.tint50')}; + color: ${th('color.brand1.base')}; cursor: pointer; } ` diff --git a/packages/client/app/components/asset-manager/src/ui/ActionButton.jsx b/packages/client/app/components/asset-manager/src/ui/ActionButton.jsx index ef314b338..d7566f7a2 100644 --- a/packages/client/app/components/asset-manager/src/ui/ActionButton.jsx +++ b/packages/client/app/components/asset-manager/src/ui/ActionButton.jsx @@ -2,13 +2,12 @@ import styled from 'styled-components' import { th, darken } from '@coko/client' -import { color } from '../../../../theme' const Button = styled.button` align-items: center; - background: ${({ type }) => { + background: ${({ theme, type }) => { if (type === 'primary') { - return color.brand1.base + return theme.color.brand1.base } if (type === 'delete') { @@ -35,13 +34,13 @@ const Button = styled.button` } &:not(:disabled):hover { - background: ${({ type }) => { + background: ${({ theme, type }) => { if (type === 'primary') { - return color.brand1.tint25 + return theme.color.brand1.tint25 } if (type === 'delete') { - return th('colorError') + return theme.colorError } return 'none' diff --git a/packages/client/app/components/asset-manager/src/ui/Button.jsx b/packages/client/app/components/asset-manager/src/ui/Button.jsx index c012de945..d4ab7086a 100644 --- a/packages/client/app/components/asset-manager/src/ui/Button.jsx +++ b/packages/client/app/components/asset-manager/src/ui/Button.jsx @@ -2,14 +2,13 @@ import styled from 'styled-components' import { th } from '@coko/client' -import { color } from '../../../../theme' const Button = styled.button` /* stylelint-disable declaration-no-important */ align-items: center; background: none; border: none; - color: ${color.gray50}; + color: ${th('color.gray50')}; display: flex; font-family: 'Fira Sans Condensed', sans-serif !important; padding: 0; @@ -17,7 +16,7 @@ const Button = styled.button` svg { svg { path { - fill: ${color.gray50}; + fill: ${th('color.gray50')}; } } height: 28px; @@ -25,11 +24,11 @@ const Button = styled.button` } &:disabled { - color: ${color.gray90}; + color: ${th('color.gray90')}; svg { path { - fill: ${color.gray90}; + fill: ${th('color.gray90')}; } } @@ -45,25 +44,23 @@ const Button = styled.button` } &:not(:disabled):hover { - /* background-color: ${color.backgroundC}; */ - color: ${color.brand1.base}; + color: ${th('color.brand1.base')}; svg { path { - fill: ${color.brand1.base}; + fill: ${th('color.brand1.base')}; } } } &:not(:disabled):active { - /* background-color: ${color.gray90}; */ border: none; - color: ${color.brand1.base}; + color: ${th('color.brand1.base')}; outline: none; svg { path { - fill: ${color.brand1.base}; + fill: ${th('color.brand1.base')}; } } } diff --git a/packages/client/app/components/asset-manager/src/ui/FilesTable.jsx b/packages/client/app/components/asset-manager/src/ui/FilesTable.jsx index 058f36d9d..0648ea4f1 100644 --- a/packages/client/app/components/asset-manager/src/ui/FilesTable.jsx +++ b/packages/client/app/components/asset-manager/src/ui/FilesTable.jsx @@ -1,13 +1,12 @@ /* eslint-disable react/prop-types */ -import styled from 'styled-components' +import styled, { useTheme } from 'styled-components' import { th } from '@coko/client' import { indexOf } from 'lodash' import { dateTimeFormatter, fileSizeFormatter } from './helpers' import IconButton from './IconButton' import { Loading } from './Modal' -import { color } from '../../../../theme' const TableWrapper = styled.div` align-items: center; @@ -28,7 +27,7 @@ const TableHead = styled.div` const TableHeadCell = styled.div` align-items: center; - background: ${color.gray90}; + background: ${th('color.gray90')}; display: flex; flex-basis: ${({ width }) => (width ? `${width}%` : '33.33%')}; padding: 8px; @@ -61,19 +60,21 @@ const TableBodyEmpty = styled.div` const TableRow = styled.div` align-items: center; - background: ${({ selected }) => (selected ? color.brand1.base : 'inherit')}; - color: ${({ selected }) => (selected ? color.textReverse : 'inherit')}; + background: ${({ selected, theme }) => + selected ? theme.color.brand1.base : 'inherit'}; + color: ${({ selected, theme }) => + selected ? theme.color.textReverse : 'inherit'}; display: flex; user-select: none; width: 100%; &:nth-child(even) { - background: ${({ selected }) => - selected ? color.brand1.base : color.backgroundC}; + background: ${({ selected, theme }) => + selected ? theme.color.brand1.base : theme.color.backgroundC}; } &:hover { - background: ${color.brand1.base}; + background: ${th('color.brand1.base')}; color: white; } ` @@ -94,17 +95,23 @@ const TableCell = styled.div` text-align: left; ` -const ascIcon = ( - - - -) +const AscIcon = () => { + const theme = useTheme() + return ( + + + + ) +} -const descIcon = ( - - - -) +const DescIcon = () => { + const theme = useTheme() + return ( + + + + ) +} const FilesTable = ({ checkboxColumn, @@ -224,7 +231,7 @@ const FilesTable = ({ {sortable && ( : } onClick={() => { sortingHandler(label) }} diff --git a/packages/client/app/components/asset-manager/src/ui/IconButton.jsx b/packages/client/app/components/asset-manager/src/ui/IconButton.jsx index 6ef44298a..94995f4ac 100644 --- a/packages/client/app/components/asset-manager/src/ui/IconButton.jsx +++ b/packages/client/app/components/asset-manager/src/ui/IconButton.jsx @@ -1,7 +1,7 @@ /* eslint-disable react/prop-types */ import styled from 'styled-components' -import { color } from '../../../../theme' +import { th } from '@coko/client' const Button = styled.button` align-items: center; @@ -26,13 +26,13 @@ const Button = styled.button` &:disabled { svg { - fill: ${color.gray90}; + fill: ${th('color.gray90')}; } } &:not(:disabled):hover { svg { - fill: ${color.brand1.base}; + fill: ${th('color.brand1.base')}; } } ` diff --git a/packages/client/app/components/asset-manager/src/ui/InfoItem.jsx b/packages/client/app/components/asset-manager/src/ui/InfoItem.jsx index 2403609d2..b0ac59a5c 100644 --- a/packages/client/app/components/asset-manager/src/ui/InfoItem.jsx +++ b/packages/client/app/components/asset-manager/src/ui/InfoItem.jsx @@ -8,7 +8,6 @@ import styled from 'styled-components' import { th } from '@coko/client' import { Button, Icons } from './Modal' -import { color } from '../../../../theme' const { saveIcon, editIcon, exitIcon } = Icons @@ -22,7 +21,7 @@ const Input = styled.input` width: 78.2%; &:focus { - border-bottom: 1px dashed ${color.brand1.base}; + border-bottom: 1px dashed ${th('color.brand1.base')}; outline: 0; } diff --git a/packages/client/app/components/asset-manager/src/ui/Loader.jsx b/packages/client/app/components/asset-manager/src/ui/Loader.jsx index 392fb2c37..c5f49c689 100644 --- a/packages/client/app/components/asset-manager/src/ui/Loader.jsx +++ b/packages/client/app/components/asset-manager/src/ui/Loader.jsx @@ -1,6 +1,5 @@ import styled from 'styled-components' import { th } from '@coko/client' -import { color } from '../../../../theme' const StyledSpinner = styled.svg` animation: rotate 1s linear infinite; @@ -10,7 +9,7 @@ const StyledSpinner = styled.svg` & .path { animation: dash 1.5s ease-in-out infinite; - stroke: ${color.brand1.base}; + stroke: ${th('color.brand1.base')}; stroke-linecap: round; } @@ -48,7 +47,7 @@ const Wrapper = styled.div` ` const Label = styled.div` - color: ${color.brand1.base}; + color: ${th('color.brand1.base')}; font-family: ${th('fontHeading')}; font-size: ${th('fontSizeBase')}; line-height: ${th('lineHeightBase')}; diff --git a/packages/client/app/components/asset-manager/src/ui/Modal/Loading.jsx b/packages/client/app/components/asset-manager/src/ui/Modal/Loading.jsx index a4b7d1bde..bc1812566 100644 --- a/packages/client/app/components/asset-manager/src/ui/Modal/Loading.jsx +++ b/packages/client/app/components/asset-manager/src/ui/Modal/Loading.jsx @@ -1,8 +1,7 @@ /* stylelint-disable string-quotes */ import styled from 'styled-components' -import { rotate360 } from '@coko/client' -import { color } from '../../../../../theme' +import { rotate360, th } from '@coko/client' const Wrapper = styled.div` align-items: center; @@ -20,9 +19,9 @@ const SpinnerAnimation = styled.div` &::after { animation: ${rotate360} 1s linear infinite; - border: 5px solid ${color.brand1.base}; - border-color: ${color.brand1.base} transparent ${color.brand1.base} - transparent; + border: 5px solid ${th('color.brand1.base')}; + border-color: ${th('color.brand1.base')} transparent + ${th('color.brand1.base')} transparent; border-radius: 50%; content: ' '; display: block; diff --git a/packages/client/app/components/asset-manager/src/ui/Modal/RootButton.jsx b/packages/client/app/components/asset-manager/src/ui/Modal/RootButton.jsx index 8b597435c..2c2e830be 100644 --- a/packages/client/app/components/asset-manager/src/ui/Modal/RootButton.jsx +++ b/packages/client/app/components/asset-manager/src/ui/Modal/RootButton.jsx @@ -1,12 +1,13 @@ import styled, { css } from 'styled-components' import { th, grid } from '@coko/client' -import { color } from '../../../../../theme' const activeStyles = css` - color: ${({ danger }) => (danger ? th('colorError') : color.brand1.base)}; + color: ${({ danger, theme }) => + danger ? theme.colorError : theme.color.brand1.base}; > i svg { - fill: ${({ danger }) => (danger ? th('colorError') : color.brand1.base)}; + fill: ${({ danger, theme }) => + danger ? theme.colorError : theme.color.brand1.base}; } ` @@ -43,10 +44,12 @@ const RootButton = styled.button.attrs(({ title, type }) => ({ &:hover { background: ${th('colorBackgroundHue')}; - color: ${({ danger }) => (danger ? th('colorError') : color.brand1.base)}; + color: ${({ danger, theme }) => + danger ? theme.colorError : theme.color.brand1.base}; > i svg { - fill: ${({ danger }) => (danger ? th('colorError') : color.brand1.base)}; + fill: ${({ danger, theme }) => + danger ? theme.colorError : theme.color.brand1.base}; transition: all 0.1s ease-in; } } diff --git a/packages/client/app/components/component-ai-assistant/AiPDFDesigner.jsx b/packages/client/app/components/component-ai-assistant/AiPDFDesigner.jsx index f0a983b70..1dc7cb96a 100644 --- a/packages/client/app/components/component-ai-assistant/AiPDFDesigner.jsx +++ b/packages/client/app/components/component-ai-assistant/AiPDFDesigner.jsx @@ -17,6 +17,8 @@ import { } from 'react-feather' import { takeRight } from 'lodash' import { useLazyQuery } from '@apollo/client/react' +import { th } from '@coko/client' + import Editor from './components/Editor' import PromptsInput from './PromptsInput' import { @@ -39,7 +41,6 @@ import ChatBubble from './ChatBubble' import ChatHistory from './ChatHistory' import Checkbox from './components/Checkbox' // import useChatGpt from './hooks/useChatGpt' -import { color } from '../../theme' import { ConfigContext } from '../config/src' import { CHAT_GPT } from '../../queries' @@ -79,10 +80,10 @@ const CssAssistantUi = styled.div` padding: 0; > svg { - stroke: ${color.brand1.base}; + stroke: ${th('color.brand1.base')}; } } - color: ${color.brand1.base}; + color: ${th('color.brand1.base')}; display: flex; gap: 5px; } @@ -97,7 +98,7 @@ const StyledHeading = styled.div` height: fit-content; justify-content: space-between; padding: 0 0 0 10px; - scrollbar-color: ${color.brand1.base}; + scrollbar-color: ${th('color.brand1.base')}; scrollbar-width: thin; width: 100%; ` @@ -131,7 +132,7 @@ const EditorContainer = styled.div` } ::-webkit-scrollbar-thumb { - background: ${color.brand1.base}; + background: ${th('color.brand1.base')}; border-radius: 5px; width: 5px; } @@ -197,7 +198,7 @@ const WindowHeading = styled.div` z-index: 99; svg { - stroke: ${color.brand1.base}; + stroke: ${th('color.brand1.base')}; } > :first-child { @@ -241,7 +242,7 @@ const WindowHeadingControls = styled.span` width: 15px; &:hover { - stroke: ${color.brand1.base}; + stroke: ${th('color.brand1.base')}; } } ` @@ -264,7 +265,7 @@ const OverlayAnimated = styled(LoadingOverlay)` > span { animation: ${p => (p.$loading ? editorLoadingAnim : 'none')} 1.5s infinite; - color: ${color.brand1.base}; + color: ${th('color.brand1.base')}; font-size: 40px; } ` diff --git a/packages/client/app/components/component-ai-assistant/ChatBubble.jsx b/packages/client/app/components/component-ai-assistant/ChatBubble.jsx index 94cfd4059..10a12f369 100644 --- a/packages/client/app/components/component-ai-assistant/ChatBubble.jsx +++ b/packages/client/app/components/component-ai-assistant/ChatBubble.jsx @@ -3,10 +3,10 @@ /* eslint-disable react/prop-types */ import { useContext, useEffect, useState } from 'react' -import styled from 'styled-components' +import styled, { useTheme } from 'styled-components' +import { th } from '@coko/client' import { CssAssistantContext } from './hooks/CssAssistantContext' -import { color } from '../../theme' const Wrapper = styled.span` display: flex; @@ -68,7 +68,7 @@ const Triangle = styled.span` ` const SmallText = styled.strong` - color: ${color.brand1.base}; + color: ${th('color.brand1.base')}; text-decoration: underline; ` @@ -157,6 +157,7 @@ const OptionsTemplate = ({ content }) => { } const ChatBubble = ({ forceHide, icons, hasApiKey }) => { + const theme = useTheme() const { feedback } = useContext(CssAssistantContext) const [hideMessage, setHideMessage] = useState(false) @@ -175,8 +176,8 @@ const ChatBubble = ({ forceHide, icons, hasApiKey }) => { width: '35px', height: '35px', borderRadius: '50%', - backgroundColor: color.brand1.base(), - border: color.brand1.shade50(), + backgroundColor: theme.color.brand1.base(), + border: theme.color.brand1.shade50(), textAlign: 'center', color: '#fff', }} diff --git a/packages/client/app/components/component-ai-assistant/PromptsInput.jsx b/packages/client/app/components/component-ai-assistant/PromptsInput.jsx index 43e408ebe..2083b1a4b 100644 --- a/packages/client/app/components/component-ai-assistant/PromptsInput.jsx +++ b/packages/client/app/components/component-ai-assistant/PromptsInput.jsx @@ -4,16 +4,16 @@ import { useEffect, useContext } from 'react' import styled from 'styled-components' import { debounce } from 'lodash' -import { rotate360 } from '@coko/client' +import { rotate360, th } from '@coko/client' import PropTypes from 'prop-types' + import SendIcon from './SendButton' import { CssAssistantContext } from './hooks/CssAssistantContext' -import { color } from '../../theme' import { callOn } from '../../shared/generalUtils' import { autoResize } from './utils' const StyledForm = styled.form` - --color: ${color.brand1.base}; + --color: ${th('color.brand1.base')}; --color-border: #0004; --font-size: 14px; align-items: center; @@ -53,8 +53,8 @@ const StyledSpinner = styled.div` &::after { animation: ${rotate360} 1s linear infinite; - border: 2px solid ${color.brand1.base}; - border-color: ${color.brand1.base} transparent; + border: 2px solid ${th('color.brand1.base')}; + border-color: ${th('color.brand1.base')} transparent; border-radius: 50%; /* stylelint-disable-next-line string-quotes */ content: ' '; @@ -75,7 +75,7 @@ const SendButton = styled.button` width: 24px; > svg { - fill: ${color.brand1.base}; + fill: ${th('color.brand1.base')}; transform: scale(1.35); } ` diff --git a/packages/client/app/components/component-ai-assistant/SelectionBox.jsx b/packages/client/app/components/component-ai-assistant/SelectionBox.jsx index d95c4283d..505a98e02 100644 --- a/packages/client/app/components/component-ai-assistant/SelectionBox.jsx +++ b/packages/client/app/components/component-ai-assistant/SelectionBox.jsx @@ -2,6 +2,8 @@ import { useContext, useEffect } from 'react' import styled from 'styled-components' +import { th } from '@coko/client' + import { CssAssistantContext } from './hooks/CssAssistantContext' import { cssStringToObject, @@ -9,7 +11,6 @@ import { removeStyleAttribute, setInlineStyle, } from './utils' -import { color } from '../../theme' const backgrounds = { dark: '#0001', @@ -52,7 +53,7 @@ const RelativeContainer = styled.div` z-index: 999; > button { - background: ${color.brand1.shade25}; + background: ${th('color.brand1.shade25')}; border: 1px solid currentcolor; border-radius: 50%; box-shadow: @@ -72,7 +73,7 @@ const RelativeContainer = styled.div` > small { /* background: #00495cb9; */ - background: ${color.brand1.shade25}; + background: ${th('color.brand1.shade25')}; border: 1px solid currentcolor; border-radius: 5px; color: #eee; diff --git a/packages/client/app/components/component-ai-assistant/components/Checkbox.jsx b/packages/client/app/components/component-ai-assistant/components/Checkbox.jsx index bdb4bc5f0..0bcb3a4f1 100644 --- a/packages/client/app/components/component-ai-assistant/components/Checkbox.jsx +++ b/packages/client/app/components/component-ai-assistant/components/Checkbox.jsx @@ -2,7 +2,7 @@ /* eslint-disable react/prop-types */ import styled from 'styled-components' -import { color } from '../../../theme' +import { th } from '@coko/client' const CheckboxContainer = styled.div` align-items: center; @@ -11,7 +11,7 @@ const CheckboxContainer = styled.div` margin-bottom: 4px; input[type='checkbox'] { - accent-color: ${color.brand1.base}; + accent-color: ${th('color.brand1.base')}; background: #eee; border: 1px solid #eee; border-radius: 5px; @@ -24,7 +24,7 @@ const CheckboxContainer = styled.div` } &:hover { - accent-color: ${color.brand1.base}; + accent-color: ${th('color.brand1.base')}; border: none; } } diff --git a/packages/client/app/components/component-avatar/src/style.jsx b/packages/client/app/components/component-avatar/src/style.jsx index 2dc4c7160..bcafbe655 100644 --- a/packages/client/app/components/component-avatar/src/style.jsx +++ b/packages/client/app/components/component-avatar/src/style.jsx @@ -1,12 +1,9 @@ /* eslint-disable no-shadow */ -// @flow -// import theme from 'shared/theme' import styled, { css } from 'styled-components' import { Img as ReactImage } from 'react-image' import { Link } from 'react-router-dom' import { th } from '@coko/client' -import { color } from '../../../theme' // import { ProfileHeaderAction } from '../profile/style' import { MEDIA_BREAK } from '../../layout' @@ -15,7 +12,7 @@ import { MEDIA_BREAK } from '../../layout' export const Container = styled.div` /* stylelint-disable media-query-no-invalid */ - background-color: ${color.backgroundA}; + background-color: ${th('color.backgroundA')}; border: none; border-radius: ${props => props.type === 'community' ? `${props.size / 8}px` : '100%'}; @@ -57,7 +54,7 @@ export const AvatarLink = styled(Link)` // ` export const Img = styled(ReactImage)` - background-color: ${color.backgroundA}; + background-color: ${th('color.backgroundA')}; border-radius: ${props => props.type === 'community' ? `${props.size / 8}px` : '100%'}; display: inline-block; @@ -78,7 +75,7 @@ export const Img = styled(ReactImage)` ` export const FallbackImg = styled.img` - background-color: ${color.brand2.base}; + background-color: ${th('color.brand2.base')}; border-radius: ${props => props.type === 'community' ? `${props.size / 8}px` : '100%'}; display: inline-block; @@ -98,7 +95,7 @@ export const FallbackImg = styled.img` ` export const LoadingImg = styled.div` - background: ${color.brand2.base}; + background: ${th('color.brand2.base')}; border-radius: ${props => props.type === 'community' ? `${props.size / 8}px` : '100%'}; display: inline-block; @@ -122,7 +119,7 @@ export const OnlineIndicator = styled.span` ${props => props.$onlineBorderColor ? props.$onlineBorderColor(props.theme) - : color.textReverse}; + : props.theme.color.textReverse}; border-radius: 5px; bottom: 0; height: 10px; diff --git a/packages/client/app/components/component-chat/src/Action.jsx b/packages/client/app/components/component-chat/src/Action.jsx index 6006ede00..5beb63361 100644 --- a/packages/client/app/components/component-chat/src/Action.jsx +++ b/packages/client/app/components/component-chat/src/Action.jsx @@ -14,10 +14,9 @@ import styled, { css } from 'styled-components' import { th } from '@coko/client' -import { color } from '../../../theme' const common = css` - color: ${color.brand1.base}; + color: ${th('color.brand1.base')}; font: ${th('fontInterface')}; font-size: ${th('fontSizeBase')}; font-weight: ${props => (props.active ? 'bold' : 'normal')}; @@ -28,7 +27,7 @@ const common = css` &:hover, &:active { background: none; - color: ${color.brand1.base}; + color: ${th('color.brand1.base')}; text-decoration: underline; } ` diff --git a/packages/client/app/components/component-chat/src/Chat.jsx b/packages/client/app/components/component-chat/src/Chat.jsx index 123c2640d..6a95c1c53 100644 --- a/packages/client/app/components/component-chat/src/Chat.jsx +++ b/packages/client/app/components/component-chat/src/Chat.jsx @@ -7,7 +7,6 @@ import { th } from '@coko/client' import ChatInput from './SuperChatInput/SuperChatInput' import Messages from './Messages/Messages' import UserActivityTracker from '../../shared/UserActivityTracker' -import color from '../../../theme/color' const ChatInputContainer = styled.div` position: relative; @@ -15,7 +14,7 @@ const ChatInputContainer = styled.div` span.mention-tag { background-color: ${th('colorPrimary')}; border-radius: 4px; - color: ${color.white}; + color: ${th('color.white')}; padding: 2px 4px; } ` diff --git a/packages/client/app/components/component-chat/src/ChatWaxEditor/EditorStyles.jsx b/packages/client/app/components/component-chat/src/ChatWaxEditor/EditorStyles.jsx index baefe3baa..6ee891f8b 100644 --- a/packages/client/app/components/component-chat/src/ChatWaxEditor/EditorStyles.jsx +++ b/packages/client/app/components/component-chat/src/ChatWaxEditor/EditorStyles.jsx @@ -4,7 +4,6 @@ import styled, { css } from 'styled-components' import { th } from '@coko/client' import waxDefaultStyles from './layout/waxDefaultStyles' import EditorElements from './layout/EditorElements' -import { color } from '../../../../theme' // this grid goes around the menu and the editor area beneath it. export const Grid = styled.div` @@ -22,9 +21,9 @@ export const Grid = styled.div` export const Menu = styled.div` align-items: center; - background: ${color.backgroundA}; - border: 1px solid ${color.gray60}; - border-bottom: 1px solid ${color.gray90}; + background: ${th('color.backgroundA')}; + border: 1px solid ${th('color.gray60')}; + border-bottom: 1px solid ${th('color.gray90')}; display: flex; flex-wrap: wrap; font-size: 80%; @@ -81,8 +80,8 @@ export const FullWaxEditorGrid = styled.div` ` export const EditorDiv = styled.div` - background-color: ${color.backgroundA}; - border: 1px solid ${color.gray60}; + background-color: ${th('color.backgroundA')}; + border: 1px solid ${th('color.gray60')}; border-radius: 0 0 ${th('borderRadius')} ${th('borderRadius')}; border-top: none; grid-column-start: editorCol; @@ -135,7 +134,7 @@ export const FullEditorContainer = styled.div` ` export const ReadOnlyEditorDiv = styled.div` - background-color: ${color.backgroundA}; + background-color: ${th('color.backgroundA')}; grid-column-start: editorCol; grid-row-start: editorRow; /* overflow: auto; */ @@ -182,7 +181,7 @@ export const SimpleGrid = styled.div` ` export const SimpleMenu = styled.div` - border-top: 1px solid ${color.gray90}; + border-top: 1px solid ${th('color.gray90')}; display: flex; flex-wrap: wrap; left: -12px; @@ -216,7 +215,7 @@ export const SimpleMenu = styled.div` ` export const SimpleEditorDiv = styled.div` - border: 1px solid ${color.gray60}; + border: 1px solid ${th('color.gray60')}; border-radius: ${th('borderRadius')}; grid-area: editor; margin-top: 8px; @@ -242,7 +241,7 @@ export const SimpleEditorDiv = styled.div` } &:focus-within { - border: 1px solid ${color.brand1.base}; + border: 1px solid ${th('color.brand1.base')}; } .error & { @@ -296,7 +295,7 @@ export const EditorArea = styled.div` export const SideMenu = styled.div` background: ${th('colorBackgroundToolBar')}; /* TODO is this color defined? */ - border-right: ${th('borderWidth')} ${th('borderStyle')} ${color.gray60}; + border-right: ${th('borderWidth')} ${th('borderStyle')} ${th('color.gray60')}; height: calc(100% - 16px); min-width: 250px; ` diff --git a/packages/client/app/components/component-chat/src/ChatWaxEditor/layout/EditorElements.jsx b/packages/client/app/components/component-chat/src/ChatWaxEditor/layout/EditorElements.jsx index 778966a23..ab44b769d 100644 --- a/packages/client/app/components/component-chat/src/ChatWaxEditor/layout/EditorElements.jsx +++ b/packages/client/app/components/component-chat/src/ChatWaxEditor/layout/EditorElements.jsx @@ -1,5 +1,5 @@ import { css } from 'styled-components' -import { color } from '../../../../../theme' +import { th } from '@coko/client' /* All styles regarding ProseMirror surface and elements */ @@ -144,14 +144,14 @@ export default css` /* added for figure weirdness */ figure { - border: 1px solid ${color.brand1.base}; + border: 1px solid ${th('color.brand1.base')}; margin-bottom: 1rem; padding: 1rem; position: relative; } figure::before { - color: ${color.brand1.base}; + color: ${th('color.brand1.base')}; content: 'Figure:'; font-size: 75%; left: 0; @@ -166,14 +166,14 @@ export default css` } figcaption { - border: 1px solid ${color.brand1.base}; + border: 1px solid ${th('color.brand1.base')}; margin-top: 1rem; padding: 1rem; position: relative; } figcaption::before { - color: ${color.brand1.base}; + color: ${th('color.brand1.base')}; content: 'Caption:'; font-size: 75%; left: 0; diff --git a/packages/client/app/components/component-chat/src/EllipsisDropdown.jsx b/packages/client/app/components/component-chat/src/EllipsisDropdown.jsx index 32e53b555..9e3fe61ac 100644 --- a/packages/client/app/components/component-chat/src/EllipsisDropdown.jsx +++ b/packages/client/app/components/component-chat/src/EllipsisDropdown.jsx @@ -5,10 +5,10 @@ import { useEffect, useRef } from 'react' import styled from 'styled-components' -import { color } from '../../../theme' +import { th } from '@coko/client' const DropdownContainer = styled.div` - background-color: ${color.backgroundA}; + background-color: ${th('color.backgroundA')}; box-shadow: 0 4px 6px rgb(0 0 0 / 10%); position: absolute; right: 0; @@ -18,7 +18,7 @@ const DropdownContainer = styled.div` const DropdownItem = styled.div` border: 1px solid #ccc; - color: ${color.text}; + color: ${th('color.text')}; cursor: pointer; font-size: 16px; padding: 8px; diff --git a/packages/client/app/components/component-chat/src/MentionsInput/MentionsInput.jsx b/packages/client/app/components/component-chat/src/MentionsInput/MentionsInput.jsx index 8b29f4bd7..6dfb4c39a 100644 --- a/packages/client/app/components/component-chat/src/MentionsInput/MentionsInput.jsx +++ b/packages/client/app/components/component-chat/src/MentionsInput/MentionsInput.jsx @@ -1,13 +1,14 @@ /* eslint-disable react/prop-types */ import { MentionsInput, Mention } from 'react-mentions' -import { th } from '@coko/client' +import { useTheme } from 'styled-components' + import { MentionsInputStyle } from './style' import MentionSuggestion from './mentionSuggestion' import { theme, hexa } from '../SuperChatInput/style' -import { color } from '../../../../theme' const CustomMentionsInput = props => { + const appliedTheme = useTheme() const { searchUsersCallBack } = props const searchUsers = async () => { @@ -20,7 +21,7 @@ const CustomMentionsInput = props => { autoCapitalize: 'sentences', autoComplete: 'on', autoCorrect: 'on', - background: `${props.networkDisabled ? 'none' : color.backgroundA}`, + background: `${props.networkDisabled ? 'none' : appliedTheme.color.backgroundA}`, fontSize: '16px' /* has to be 16px to avoid zoom on iOS */, fontWeight: 400, lineHeight: 1.4, @@ -37,32 +38,32 @@ const CustomMentionsInput = props => { '&::placeholder': { color: `${ props.networkDisabled - ? hexa(th('colorWarning'), 0.8) - : color.brand2.base() + ? hexa(appliedTheme.colorWarning, 0.8) + : appliedTheme.color.brand2.base }`, }, '&::-webkit-input-placeholder': { color: `${ props.networkDisabled - ? hexa(th('colorWarning'), 0.8) - : color.brand2.base() + ? hexa(appliedTheme.colorWarning, 0.8) + : appliedTheme.color.brand2.base }`, }, '&:-moz-placeholder': { color: `${ props.networkDisabled - ? hexa(th('colorWarning'), 0.8) - : color.brand2.base() + ? hexa(appliedTheme.colorWarning, 0.8) + : appliedTheme.color.brand2.base }`, }, '&:-ms-input-placeholder': { color: `${ props.networkDisabled - ? hexa(th('colorWarning'), 0.8) - : color.brand2.base() + ? hexa(appliedTheme.colorWarning, 0.8) + : appliedTheme.color.brand2.base }`, }, @@ -70,7 +71,7 @@ const CustomMentionsInput = props => { // `${monoStack}`, backgroundColor: `${theme.bg.wash}`, - border: `1px solid ${color.gray60}`, + border: `1px solid ${appliedTheme.color.gray60}`, borderRadius: `2px`, fontSize: `15px`, fontWeight: 500, @@ -79,7 +80,7 @@ const CustomMentionsInput = props => { }, blockquote: { - borderLeft: `4px solid ${color.gray60}`, + borderLeft: `4px solid ${appliedTheme.color.gray60}`, color: `${theme.text.alt}`, lineHeight: 1.5, padding: `4px 12px 4px 16px`, diff --git a/packages/client/app/components/component-chat/src/MentionsInput/style.jsx b/packages/client/app/components/component-chat/src/MentionsInput/style.jsx index b9020491a..a105a26ad 100644 --- a/packages/client/app/components/component-chat/src/MentionsInput/style.jsx +++ b/packages/client/app/components/component-chat/src/MentionsInput/style.jsx @@ -1,8 +1,5 @@ import styled from 'styled-components' import { th } from '@coko/client' -import { color } from '../../../../theme' - -// import theme from 'shared/theme'; import { Truncate } from '../../../../globals' @@ -13,7 +10,9 @@ export const MentionsInputStyle = { export const StyledMentionSuggestion = styled.div` align-items: center; background: ${props => - props.focused ? th('colorBackgroundHue') : th('colorBackground')}; + props.focused + ? props.theme.colorBackgroundHue + : props.theme.colorBackground}; border-bottom: 1px solid ${th('colorBorder')}; display: flex; line-height: 1.3; @@ -27,7 +26,8 @@ export const MentionContent = styled.div` ` export const MentionName = styled.span` - color: ${props => (props.focused ? color.brand1.base : color.text)}; + color: ${props => + props.focused ? props.theme.color.brand1.base : props.theme.color.text}; font-size: 14px; font-weight: 500; margin-left: 12px; @@ -38,7 +38,8 @@ export const MentionName = styled.span` ` export const MentionUsername = styled.span` - color: ${props => (props.focused ? color.brand1.base : th('colorWarning'))}; + color: ${props => + props.focused ? props.theme.color.brand1.base : props.theme.colorWarning}; font-size: 13px; font-weight: 400; margin-left: 12px; diff --git a/packages/client/app/components/component-chat/src/Messages/ChatPostDropdown.jsx b/packages/client/app/components/component-chat/src/Messages/ChatPostDropdown.jsx index 30fca266a..d627c98e8 100644 --- a/packages/client/app/components/component-chat/src/Messages/ChatPostDropdown.jsx +++ b/packages/client/app/components/component-chat/src/Messages/ChatPostDropdown.jsx @@ -7,16 +7,16 @@ import { useState, useRef, useEffect } from 'react' import styled from 'styled-components' import { useMutation } from '@apollo/client/react' import { useTranslation } from 'react-i18next' +import { th } from '@coko/client' import EditMessageModal from './EditMessageModal' import { ConfirmationModal } from '../../../component-modal/src/ConfirmationModal' import { DELETE_MESSAGE, UPDATE_MESSAGE } from '../../../../queries' import { Ellipsis } from './style' -import color from '../../../../theme/color' import IsolatedMessageWithDetails from './IsolatedMessageWithDetails' import { LooseColumn } from '../../../shared' const DropdownContainer = styled.div` - background-color: ${color.backgroundA}; + background-color: ${th('color.backgroundA')}; box-shadow: 0 4px 6px rgb(0 0 0 / 10%); position: absolute; right: 0; @@ -26,7 +26,7 @@ const DropdownContainer = styled.div` ` const DropdownItem = styled.div` - color: ${color.text}; + color: ${th('color.text')}; cursor: pointer; font-size: 16px; font-weight: 400; @@ -34,7 +34,7 @@ const DropdownItem = styled.div` padding: 6px 14px; &:hover { - background-color: ${color.gray97}; + background-color: ${th('color.gray97')}; } ` diff --git a/packages/client/app/components/component-chat/src/Messages/style.jsx b/packages/client/app/components/component-chat/src/Messages/style.jsx index df4ab14b7..a52ff19e7 100644 --- a/packages/client/app/components/component-chat/src/Messages/style.jsx +++ b/packages/client/app/components/component-chat/src/Messages/style.jsx @@ -4,7 +4,6 @@ import styled from 'styled-components' import { th, grid } from '@coko/client' import { MoreVertical } from 'react-feather' -import { color } from '../../../../theme' export { Spinner } from '../../../shared' @@ -40,7 +39,7 @@ export const MessagesGroup = styled.div` span.mention-tag { background-color: ${th('colorPrimary')}; border-radius: 4px; - color: ${color.white}; + color: ${th('color.white')}; padding: 2px 4px; } ` @@ -238,7 +237,7 @@ export const Ellipsis = styled(MoreVertical)` z-index: 999; &:hover { - background-color: ${color.gray90}; + background-color: ${th('color.gray90')}; border-radius: 50%; } diff --git a/packages/client/app/components/component-chat/src/SuperChatInput/EditorMention.jsx b/packages/client/app/components/component-chat/src/SuperChatInput/EditorMention.jsx index c4363cbb7..19d4fa30a 100644 --- a/packages/client/app/components/component-chat/src/SuperChatInput/EditorMention.jsx +++ b/packages/client/app/components/component-chat/src/SuperChatInput/EditorMention.jsx @@ -8,15 +8,15 @@ import { useState } from 'react' import styled from 'styled-components' +import { th } from '@coko/client' import ChatWaxEditor from '../ChatWaxEditor' -import color from '../../../../theme/color' const EditorWrapper = styled.div` position: relative; ` const Suggestions = styled.div` - background-color: ${color.white}; + background-color: ${th('color.white')}; bottom: 34px; margin-top: -74px; min-width: 100px; @@ -35,14 +35,14 @@ const List = styled.ul` /* stylelint-disable-next-line selector-class-pattern */ .mentions__suggestions__item { border-bottom: 1px solid rgb(0 0 0 / 15%); - color: ${color.text}; + color: ${th('color.text')}; cursor: pointer; padding: 5px 15px; } /* stylelint-disable-next-line selector-class-pattern */ .mentions__suggestions__item--focused { - background-color: ${color.gray97}; + background-color: ${th('color.gray97')}; } ` diff --git a/packages/client/app/components/component-chat/src/SuperChatInput/ToolbarButton.jsx b/packages/client/app/components/component-chat/src/SuperChatInput/ToolbarButton.jsx index fa04f33aa..afca7d963 100644 --- a/packages/client/app/components/component-chat/src/SuperChatInput/ToolbarButton.jsx +++ b/packages/client/app/components/component-chat/src/SuperChatInput/ToolbarButton.jsx @@ -1,18 +1,18 @@ /* eslint-disable react/prop-types */ import styled from 'styled-components' -import { grid } from '@coko/client' +import { grid, th } from '@coko/client' import { useTranslation } from 'react-i18next' import { Icon } from '../../../pubsweet' -import { color } from '../../../../theme' const Button = styled.a` align-items: center; - /* background-color: ${color.brand1.base}; */ background-color: ${props => - props.$isTopBarOpen ? color.brand1.base : color.textReverse}; - border: 1px solid ${color.gray50}; + props.$isTopBarOpen + ? props.theme.color.brand1.base + : props.theme.color.textReverse}; + border: 1px solid ${th('color.gray50')}; border-radius: 10px; height: fit-content; margin: ${grid(1)} ${grid(1)} 0 0; @@ -20,11 +20,16 @@ const Button = styled.a` &:hover { background-color: ${props => - props.$isTopBarOpen ? color.brand1.tint25 : color.gray80}; + props.$isTopBarOpen + ? props.theme.color.brand1.tint25 + : props.theme.color.gray80}; } svg { - stroke: ${props => (props.$isTopBarOpen ? color.textReverse : color.text)}; + stroke: ${props => + props.$isTopBarOpen + ? props.theme.color.textReverse + : props.theme.color.text}; width: 0.8em; } ` diff --git a/packages/client/app/components/component-chat/src/SuperChatInput/style.jsx b/packages/client/app/components/component-chat/src/SuperChatInput/style.jsx index 69032be09..f55df3ade 100644 --- a/packages/client/app/components/component-chat/src/SuperChatInput/style.jsx +++ b/packages/client/app/components/component-chat/src/SuperChatInput/style.jsx @@ -163,10 +163,12 @@ export const InputWrapper = styled.div` background: ${props => props.$networkDisabled ? hexa(props.theme.special.default, 0.1) - : th('colorBackground')}; + : props.theme.colorBackground}; border-radius: 10px; color: ${props => - props.$networkDisabled ? th('colorText') : th('colorSecondary')}; + props.$networkDisabled + ? props.theme.colorText + : props.theme.colorSecondary}; display: flex; flex: auto; flex-direction: column; @@ -177,7 +179,9 @@ export const InputWrapper = styled.div` &:hover, &:focus { border-color: ${props => - props.$networkDisabled ? th('borderColor') : th('colorWarning')}; + props.$networkDisabled + ? props.theme.borderColor + : props.theme.colorWarning}; transition: border-color 0.2s ease-in; } diff --git a/packages/client/app/components/component-cms-manager/src/article/ManuscriptMetadata.jsx b/packages/client/app/components/component-cms-manager/src/article/ManuscriptMetadata.jsx index 072d4255a..57fd3c54c 100644 --- a/packages/client/app/components/component-cms-manager/src/article/ManuscriptMetadata.jsx +++ b/packages/client/app/components/component-cms-manager/src/article/ManuscriptMetadata.jsx @@ -1,16 +1,14 @@ /* eslint-disable react/prop-types */ -import styled from 'styled-components' +import styled, { useTheme } from 'styled-components' import { Action, Icon, SectionContent } from '../../../shared' - import { Legend } from '../../../component-submit/src/style' import { SectionRowGrid, Cell, } from '../../../component-review/src/components/style' import ReadonlyFormTemplate from '../../../component-review/src/components/metadata/ReadonlyFormTemplate' -import { color } from '../../../../theme' const FormTemplateStyled = styled.div` max-height: calc(100vh - 150px); @@ -59,6 +57,7 @@ const ManuscriptMetadata = ({ displayShortIdAsIdentifier, formWithSubmissionFieldsOnly, }) => { + const theme = useTheme() return ( Submission metadata @@ -77,7 +76,7 @@ const ManuscriptMetadata = ({ article.reviews - + file-plus @@ -89,7 +88,7 @@ const ManuscriptMetadata = ({ article.decision - + file-plus @@ -105,7 +104,7 @@ const ManuscriptMetadata = ({ cmsLayout.logo copyIncludeFile('logo')}> - + file-plus @@ -117,7 +116,7 @@ const ManuscriptMetadata = ({ cmsLayout.primaryColor - + file-plus @@ -129,7 +128,7 @@ const ManuscriptMetadata = ({ cmsLayout.secondaryColor - + file-plus @@ -144,7 +143,7 @@ const ManuscriptMetadata = ({ top menu copyIncludeFile('menu')}> - + file-plus @@ -156,7 +155,7 @@ const ManuscriptMetadata = ({ Footer menu copyIncludeFile('footer')}> - + file-plus @@ -168,7 +167,7 @@ const ManuscriptMetadata = ({ partners copyIncludeFile('partners')}> - + file-plus diff --git a/packages/client/app/components/component-cms-manager/src/article/article.jsx b/packages/client/app/components/component-cms-manager/src/article/article.jsx index f402265f8..e53ccee99 100644 --- a/packages/client/app/components/component-cms-manager/src/article/article.jsx +++ b/packages/client/app/components/component-cms-manager/src/article/article.jsx @@ -22,7 +22,6 @@ import { FormActionButton } from '../style' import UploadAsset from '../../../component-production/src/components/uploadManager/UploadAsset' import ManuscriptMetadata from './ManuscriptMetadata' -import { color } from '../../../../theme' const FlexRow = styled.div` display: flex; @@ -40,7 +39,7 @@ const StyledManuscript = styled(Manuscript)` ` const ScrollableTabContent = styled.section` - background-color: ${color.backgroundA}; + background-color: ${th('color.backgroundA')}; border-radius: ${th('borderRadius')}; box-shadow: ${({ theme }) => theme.boxShadow.shades[200]}; height: calc(100vh - 108px); diff --git a/packages/client/app/components/component-cms-manager/src/browser/FileBrowser.jsx b/packages/client/app/components/component-cms-manager/src/browser/FileBrowser.jsx index 6164d208e..8069fc049 100644 --- a/packages/client/app/components/component-cms-manager/src/browser/FileBrowser.jsx +++ b/packages/client/app/components/component-cms-manager/src/browser/FileBrowser.jsx @@ -4,22 +4,17 @@ import { useState, useContext } from 'react' import styled from 'styled-components' - import { useTranslation } from 'react-i18next' - import FolderTree from 'react-folder-tree' import 'react-folder-tree/dist/style.css' +import { th } from '@coko/client' import { Link } from '../../../pubsweet' - import ModalMetadataReadOnly from './ModalMetadataReadOnly' - import DeleteIcon from './DeleteIcon' import { Select } from '../../../shared' import { ConfigContext } from '../../../config/src' - import { FormActionButton } from '../style' -import { color } from '../../../../theme' const FolderTreeContainer = styled.div` /* stylelint-disable selector-class-pattern */ @@ -43,25 +38,25 @@ const FolderTreeContainer = styled.div` position: relative; .typeIconContainer svg { - color: ${color.gray60}; - stroke: ${color.gray60}; + color: ${th('color.gray60')}; + stroke: ${th('color.gray60')}; } .displayName { - color: ${color.text}; + color: ${th('color.text')}; &:hover { - color: ${color.brand1.base}; + color: ${th('color.brand1.base')}; } } .caretContainer svg { - color: ${color.gray40}; - stroke: ${color.gray40}; + color: ${th('color.gray40')}; + stroke: ${th('color.gray40')}; &:hover { - color: ${color.brand1.base}; - stroke: ${color.brand1.base}; + color: ${th('color.brand1.base')}; + stroke: ${th('color.brand1.base')}; } } @@ -73,9 +68,9 @@ const FolderTreeContainer = styled.div` right: 0; svg { - color: ${color.brand1.base}; + color: ${th('color.brand1.base')}; height: 1em; - stroke: ${color.brand1.base}; + stroke: ${th('color.brand1.base')}; width: 1em; } @@ -95,7 +90,7 @@ const FolderTreeContainer = styled.div` .editingName { input { - background-color: ${color.brand1.tint70}; + background-color: ${th('color.brand1.tint70')}; font-size: inherit; } @@ -107,8 +102,8 @@ const FolderTreeContainer = styled.div` transform: translate(0, -15%); svg:not(:hover) { - color: ${color.gray40}; - stroke: ${color.gray40}; + color: ${th('color.gray40')}; + stroke: ${th('color.gray40')}; } } } diff --git a/packages/client/app/components/component-cms-manager/src/collection/CollectionList.jsx b/packages/client/app/components/component-cms-manager/src/collection/CollectionList.jsx index c926b4348..b5b839ef3 100644 --- a/packages/client/app/components/component-cms-manager/src/collection/CollectionList.jsx +++ b/packages/client/app/components/component-cms-manager/src/collection/CollectionList.jsx @@ -6,7 +6,6 @@ import styled from 'styled-components' import { grid, th, uuid } from '@coko/client' import { useTranslation } from 'react-i18next' import { cloneDeep, pick, isArray } from 'lodash' -import { color } from '../../../../theme' import CollectionTable from './CollectionTable' import { HeadingCell } from '../../../component-production/src/components/styles' @@ -35,8 +34,8 @@ const CmsHeadStyled = styled.div` export const CollectionsHeading = styled.div` align-items: center; - background-color: ${color.backgroundA}; - border-top: 1px solid ${color.gray90}; + background-color: ${th('color.backgroundA')}; + border-top: 1px solid ${th('color.gray90')}; column-gap: ${grid(2)}; display: flex; flex-direction: row; diff --git a/packages/client/app/components/component-cms-manager/src/editor/EditorStyles.jsx b/packages/client/app/components/component-cms-manager/src/editor/EditorStyles.jsx index 7b0320a34..e28c8bab6 100644 --- a/packages/client/app/components/component-cms-manager/src/editor/EditorStyles.jsx +++ b/packages/client/app/components/component-cms-manager/src/editor/EditorStyles.jsx @@ -4,7 +4,6 @@ import styled from 'styled-components' import { th } from '@coko/client' import waxDefaultStyles from '../../../wax-collab/src/layout/waxDefaultStyles' import EditorElements from '../../../wax-collab/src/layout/EditorElements' -import { color } from '../../../../theme' // this grid goes around the menu and the editor area beneath it. export const Grid = styled.div` @@ -21,7 +20,7 @@ export const Grid = styled.div` export const Menu = styled.div` align-items: center; background: #fff; - border: 1px solid ${color.gray80}; + border: 1px solid ${th('color.gray80')}; display: flex; flex-wrap: wrap; font-size: 12.8px; @@ -53,7 +52,7 @@ export const FullWaxEditorGrid = styled.div` export const EditorDiv = styled.div` background-color: ${th('colorBackground')}; - border: 1px solid ${color.gray80}; + border: 1px solid ${th('color.gray80')}; border-width: 0 1px 1px; grid-column-start: editorCol; grid-row-start: editorRow; diff --git a/packages/client/app/components/component-config-manager/src/ConfigManagerForm.jsx b/packages/client/app/components/component-config-manager/src/ConfigManagerForm.jsx index e30cdc5ae..99925d1ee 100644 --- a/packages/client/app/components/component-config-manager/src/ConfigManagerForm.jsx +++ b/packages/client/app/components/component-config-manager/src/ConfigManagerForm.jsx @@ -10,7 +10,7 @@ import Form from '@rjsf/core' import { useTranslation } from 'react-i18next' import styled, { css } from 'styled-components' import { isEqual } from 'lodash' -import { grid } from '@coko/client' +import { th, grid } from '@coko/client' import { generateSchemas, tabKeyBasedSchema, @@ -26,7 +26,6 @@ import { HiddenTabs, Alert, } from '../../shared' -import { color, space } from '../../../theme' import EmailTemplatesPage from '../../component-email-templates/src/EmailTemplatesPage' import emailTemplatesToSchema from './helpers' import { EmailTemplatesProvider } from '../../component-email-templates/hooks/EmailTemplatesContext' @@ -45,7 +44,7 @@ const StyledContainer = styled(Container)` const StyledSectionContent = styled(SectionContent)` margin: 0; overflow-y: auto; - padding: ${space.g} ${space.g} 0 ${space.g}; + padding: ${th('spacing.g')} ${th('spacing.g')} 0 ${th('spacing.g')}; width: 100%; ` @@ -86,7 +85,7 @@ const Footer = styled.div` padding-top: 0.6rem; > div { - color: ${color.brand1.tint10}; + color: ${th('color.brand1.tint10')}; opacity: ${p => (p.$pending ? 1 : 0)}; padding: 0 0.6rem; transition: opacity 0.2s; @@ -139,7 +138,7 @@ const EmailsTabWrapper = styled(StyledSectionContent)` height: 100%; &:focus-within { - border-color: ${color.gray80}; + border-color: ${th('color.gray80')}; } } ` diff --git a/packages/client/app/components/component-dashboard/src/style.jsx b/packages/client/app/components/component-dashboard/src/style.jsx index 505cba447..ffa78d6a5 100644 --- a/packages/client/app/components/component-dashboard/src/style.jsx +++ b/packages/client/app/components/component-dashboard/src/style.jsx @@ -1,6 +1,5 @@ import styled from 'styled-components' import { th, grid } from '@coko/client' -import { color } from '../../../theme' export { Container, Section, Content } from '../../shared' const Actions = styled.div`` @@ -14,7 +13,7 @@ export { Actions, ActionContainer } const Item = styled.div` display: grid; grid-template-columns: 1fr auto; - margin-bottom: calc(${th('gridUnit') * 4}); + margin-bottom: ${grid(4)}; ` const Header = styled.div` @@ -38,7 +37,7 @@ const Body = styled.div` const Divider = styled.span.attrs(props => ({ children: ` ${props.separator} `, }))` - color: ${color.gray90}; + color: ${th('color.gray90')}; white-space: pre; ` @@ -61,7 +60,7 @@ const Page = styled.div` ` const Heading = styled.div` - color: ${color.brand1.base}; + color: ${th('color.brand1.base')}; font-family: ${th('fontReading')}; font-size: ${th('fontSizeHeading3')}; line-height: ${th('lineHeightHeading3')}; @@ -78,7 +77,7 @@ export const HeadingWithAction = styled.div` export const Placeholder = styled.div.attrs({ 'data-testid': 'placeholder', })` - color: ${color.textPlaceholder}; + color: ${th('color.textPlaceholder')}; display: grid; height: 100%; padding: 4em; @@ -89,7 +88,7 @@ export const Centered = styled.div` ` export const InvitationContent = styled.div` - background: ${color.backgroundA}; + background: ${th('color.backgroundA')}; border-radius: ${th('borderRadius')}; box-shadow: ${th('boxShadow')}; margin-bottom: 1rem; @@ -117,7 +116,7 @@ export const FeedbackForm = styled.div` ` export const DeclinedInfoString = styled.p` - color: ${color.text}; + color: ${th('color.text')}; font-family: ${th('fontWriting')}; font-size: 20px; font-weight: 600; @@ -126,7 +125,7 @@ export const DeclinedInfoString = styled.p` ` export const ErrorMessage = styled.p` - color: ${color.text}; + color: ${th('color.text')}; font-family: ${th('fontWriting')}; font-size: ${th('fontSizeBase')}; margin-bottom: 6px; @@ -136,8 +135,8 @@ export const ErrorMessage = styled.p` export const InvitationContainer = styled.div` background: linear-gradient( 134deg, - ${color.brand1.base}, - ${color.brand1.tint25} + ${th('color.brand1.base')}, + ${th('color.brand1.tint25')} ); display: grid; height: 100vh; @@ -156,7 +155,7 @@ export const ButtonWrapper = styled.div` ` export const SubmitFeedbackNote = styled.p` - color: ${color.gray40}; + color: ${th('color.gray40')}; font-family: ${th('fontWriting')}; font-size: 16px; font-weight: 500; @@ -165,7 +164,7 @@ export const SubmitFeedbackNote = styled.p` ` export const ThankYouString = styled.p` - color: ${color.gray40}; + color: ${th('color.gray40')}; font-family: ${th('fontWriting')}; font-size: 16px; font-weight: 500; @@ -177,7 +176,7 @@ export const FormInput = styled.div` margin-bottom: 20px; textarea { - background: ${color.backgroundC}; + background: ${th('color.backgroundC')}; margin-bottom: 15px; padding: 20px; } diff --git a/packages/client/app/components/component-email-templates/misc/styleds.jsx b/packages/client/app/components/component-email-templates/misc/styleds.jsx index 0d5f014d4..f778ea2bb 100644 --- a/packages/client/app/components/component-email-templates/misc/styleds.jsx +++ b/packages/client/app/components/component-email-templates/misc/styleds.jsx @@ -1,5 +1,5 @@ import styled from 'styled-components' -import { grid } from '@coko/client' +import { th, grid } from '@coko/client' import { EditorForm, EditPageContainer, @@ -9,7 +9,6 @@ import { RightArrow, } from '../../component-cms-manager/src/style' import { ActionButton, Page } from '../../shared' -import { color } from '../../../theme' export const CleanButton = styled.button.attrs({ type: 'button' })` align-items: center; @@ -68,7 +67,8 @@ export const Footer = styled(FlexRow)` // #region EmailTemplatesHeader ----------------------------------------------------------------------- export const Action = styled(CleanButton)` align-items: center; - color: ${p => (p.disabled ? color.gray80 : color.brand1.base)}; + color: ${p => + p.disabled ? p.theme.color.gray80 : p.theme.color.brand1.base}; cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')}; gap: ${grid(1)}; min-width: 0; @@ -102,7 +102,7 @@ export const CreateButton = styled(ActionButton)` ` export const Heading = styled.h3` - color: ${color.gray20}; + color: ${th('color.gray20')}; line-height: 1; margin: 0; ` @@ -118,7 +118,7 @@ export const DescriptionContainer = styled(FlexRow)` ` export const EditedOnLabel = styled.small` - color: ${color.gray20}; + color: ${th('color.gray20')}; line-height: 1.2; padding: ${grid(0.25)} 0 0; ` @@ -189,7 +189,7 @@ export const OptionListItem = styled.li` width: 100%; svg { - fill: ${p => (p.$selected ? color.brand1.base : 'transparent')}; + fill: ${p => (p.$selected ? p.theme.color.brand1.base : 'transparent')}; opacity: 0; transition: opacity 0.3s; } @@ -202,7 +202,7 @@ export const OptionListItem = styled.li` ` export const OptionListItemButton = styled(CleanButton)` - color: ${p => (p.$warning ? color.warning.base : '#555')}; + color: ${p => (p.$warning ? p.theme.color.warning.base : '#555')}; gap: ${grid(1.5)}; width: 100%; diff --git a/packages/client/app/components/component-email-templates/src/EmailTemplates.jsx b/packages/client/app/components/component-email-templates/src/EmailTemplates.jsx index a7df17bec..0bbf457e7 100644 --- a/packages/client/app/components/component-email-templates/src/EmailTemplates.jsx +++ b/packages/client/app/components/component-email-templates/src/EmailTemplates.jsx @@ -1,13 +1,14 @@ -import EmailTemplateContent from './EmailTemplateContent' +import { useTheme } from 'styled-components' +import EmailTemplateContent from './EmailTemplateContent' import EmailTemplatesHeader from './EmailTemplatesHeader' import EmailTemplatesNav from './EmailTemplatesNav' import { ConfirmationModal } from '../../component-modal/src/ConfirmationModal' -import { color } from '../../../theme' import { useEmailTemplatesContext } from '../hooks/EmailTemplatesContext' import { Content, Root } from '../misc/styleds' const EmailTemplates = () => { + const theme = useTheme() const { handleDelete, deleteModalState, t } = useEmailTemplatesContext() return ( @@ -18,7 +19,7 @@ const EmailTemplates = () => { button:not(:last-child) { - border-bottom: 1px solid ${color.brand1.tint70}; + border-bottom: 1px solid ${th('color.brand1.tint70')}; } ` diff --git a/packages/client/app/components/component-email-templates/src/handlebarsAutocomplete/components/Option.jsx b/packages/client/app/components/component-email-templates/src/handlebarsAutocomplete/components/Option.jsx index 1c9cfe0c4..afe7de056 100644 --- a/packages/client/app/components/component-email-templates/src/handlebarsAutocomplete/components/Option.jsx +++ b/packages/client/app/components/component-email-templates/src/handlebarsAutocomplete/components/Option.jsx @@ -2,19 +2,18 @@ import PropTypes from 'prop-types' import styled from 'styled-components' import { grid, th } from '@coko/client' import { keys } from 'lodash' -import { color } from '../../../../../theme' import { FlexRow } from '../../../../component-cms-manager/src/style' import { BRACKETS_TYPES } from '../constants' import { getBrackets, splitAndCapitalize } from '../helpers' // #region styleds ------------------------------------------------------ // Just a idea to have different colors for each form badge (wich colors may need discussion) -const getFormBadgeBg = ({ $form }) => { +const getFormBadgeBg = ({ $form, theme }) => { const colorVariations = { - common: color.gray50, + common: theme.color.gray50, decision: '#d89400', review: '#803c01', - submission: color.brand1.base(), + submission: theme.color.brand1.base, editors: '#c46b28', } @@ -25,7 +24,7 @@ const getFormBadgeBg = ({ $form }) => { const OptionButton = styled.button` background-color: white; border: none; - border-right: 1px solid ${color.brand1.tint70}; + border-right: 1px solid ${th('color.brand1.tint70')}; cursor: pointer; padding: ${grid(1.5)} ${grid(2)}; scroll-snap-align: start; @@ -33,11 +32,11 @@ const OptionButton = styled.button` width: 100%; &:hover { - background-color: ${color.brand1.tint90}; + background-color: ${th('color.brand1.tint90')}; } &[aria-selected='true'] { - background-color: ${color.brand1.tint90}; + background-color: ${th('color.brand1.tint90')}; } ` @@ -59,7 +58,7 @@ const OptionLabel = styled(FlexRow)` } > small { - color: ${color.gray20}; + color: ${th('color.gray20')}; } ` diff --git a/packages/client/app/components/component-email-templates/src/handlebarsAutocomplete/helpers.js b/packages/client/app/components/component-email-templates/src/handlebarsAutocomplete/helpers.js index f43b0371d..e1eb386f3 100644 --- a/packages/client/app/components/component-email-templates/src/handlebarsAutocomplete/helpers.js +++ b/packages/client/app/components/component-email-templates/src/handlebarsAutocomplete/helpers.js @@ -1,14 +1,13 @@ -import { color } from '../../../../theme' import { DROPDOWN_ID } from './constants' const { keys } = Object -export const getFormBadgeBg = form => { +export const getFormBadgeBg = form => props => { const colorVariations = { common: '#f0f0f0', decision: '#fffacb', review: '#ffddc2', - submission: color.brand1.tint90, + submission: props.theme.color.brand1.tint90, editors: '#fae5b4', } diff --git a/packages/client/app/components/component-formbuilder/src/components/FormBuilder.jsx b/packages/client/app/components/component-formbuilder/src/components/FormBuilder.jsx index e50e97a9f..40bc16447 100644 --- a/packages/client/app/components/component-formbuilder/src/components/FormBuilder.jsx +++ b/packages/client/app/components/component-formbuilder/src/components/FormBuilder.jsx @@ -17,7 +17,6 @@ import { Page } from './style' import { DragVerticalIcon } from '../../../shared/Icons' import { ConfirmationModal } from '../../../component-modal/src/ConfirmationModal' import { determineFieldAndComponent } from './config/Elements' -import { color } from '../../../../theme' const FeildWrapper = styled.div` align-items: center; @@ -26,25 +25,25 @@ const FeildWrapper = styled.div` padding: ${grid(0.5)}; &.active { - background-color: ${color.brand1.tint70}; + background-color: ${th('color.brand1.tint70')}; } &:hover svg { - stroke: ${color.brand1.base}; + stroke: ${th('color.brand1.base')}; } ` const Element = styled.div.attrs({ 'data-testid': 'formbuilder-element', })` - background-color: ${color.backgroundB}; + background-color: ${th('color.backgroundB')}; border-radius: ${th('borderRadius')}; display: flex; justify-content: space-between; width: 100%; &.active { - background-color: ${color.brand1.tint70}; + background-color: ${th('color.brand1.tint70')}; } ` @@ -77,7 +76,7 @@ const SmallIcon = withTheme(({ children }) => ( )) const FieldTypeLabel = styled.span` - color: ${color.brand1.tint50}; + color: ${th('color.brand1.tint50')}; font-size: ${th('fontSizeBaseSmall')}; margin-left: 0.5em; ` diff --git a/packages/client/app/components/component-formbuilder/src/components/FormBuilderLayout.jsx b/packages/client/app/components/component-formbuilder/src/components/FormBuilderLayout.jsx index cb8884d6d..2aa0b2538 100644 --- a/packages/client/app/components/component-formbuilder/src/components/FormBuilderLayout.jsx +++ b/packages/client/app/components/component-formbuilder/src/components/FormBuilderLayout.jsx @@ -22,7 +22,6 @@ import { } from '../../../shared' import { ConfirmationModal } from '../../../component-modal/src/ConfirmationModal' import FormSummary from './FormSummary' -import { color } from '../../../../theme' import { ConfigContext } from '../../../config/src' const AddFieldButton = styled(RoundIconButton)` @@ -41,8 +40,8 @@ const UnpaddedIcon = styled(Icon)` vertical-align: text-top; ` -const ControlIcon = withTheme(({ children }) => ( - {children} +const ControlIcon = withTheme(({ children, theme }) => ( + {children} )) const AddFormButton = styled(ActionButton)` diff --git a/packages/client/app/components/component-formbuilder/src/components/FormSummary.jsx b/packages/client/app/components/component-formbuilder/src/components/FormSummary.jsx index 3a5b9f4b0..40587ae17 100644 --- a/packages/client/app/components/component-formbuilder/src/components/FormSummary.jsx +++ b/packages/client/app/components/component-formbuilder/src/components/FormSummary.jsx @@ -1,6 +1,6 @@ /* eslint-disable react/prop-types */ -import styled from 'styled-components' +import styled, { useTheme } from 'styled-components' import { th } from '@coko/client' import { useTranslation } from 'react-i18next' import SimpleWaxEditor from '../../../wax-collab/src/SimpleWaxEditor' @@ -26,12 +26,13 @@ const RightLooseRow = styled(LooseRow)` ` const FormSummary = ({ form, isActive, openFormSettingsDialog }) => { + const theme = useTheme() const { t } = useTranslation() return ( {isActive && ( - + {t('formBuilder.Active')} )} diff --git a/packages/client/app/components/component-formbuilder/src/components/builderComponents/OptionsField.jsx b/packages/client/app/components/component-formbuilder/src/components/builderComponents/OptionsField.jsx index abca147d4..a41cf6872 100644 --- a/packages/client/app/components/component-formbuilder/src/components/builderComponents/OptionsField.jsx +++ b/packages/client/app/components/component-formbuilder/src/components/builderComponents/OptionsField.jsx @@ -10,7 +10,6 @@ import i18next from 'i18next' import { useDropzone } from 'react-dropzone' import { TextField, ValidatedFieldFormik, Button } from '../../../../pubsweet' import { DeleteControl } from '../../../../shared' -import { color } from '../../../../../theme' const Inline = styled.div` display: inline-block; @@ -53,7 +52,7 @@ const LiControlOptions = styled.li` ` const ErrorMessageWrapper = styled.span` - color: ${color.error.base}; + color: ${th('color.error.base')}; display: block; font-size: ${th('fontSizeBaseSmall')}; line-height: ${th('lineHeightBaseSmall')}; diff --git a/packages/client/app/components/component-formbuilder/src/components/style.jsx b/packages/client/app/components/component-formbuilder/src/components/style.jsx index 6abbcbd02..ca9c60547 100644 --- a/packages/client/app/components/component-formbuilder/src/components/style.jsx +++ b/packages/client/app/components/component-formbuilder/src/components/style.jsx @@ -1,7 +1,6 @@ import styled, { css } from 'styled-components' import { th, grid } from '@coko/client' import { Button } from '../../../pubsweet' -import { color } from '../../../../theme' export const Section = styled.div` margin: ${grid(4)} 0; @@ -21,7 +20,7 @@ export const Legend = styled.div` ` const ErrorMessageWrapper = styled.div` - color: ${color.error.base}; + color: ${th('color.error.base')}; font-size: ${th('fontSizeBaseSmall')}; line-height: ${th('lineHeightBaseSmall')}; ` @@ -32,7 +31,7 @@ const Page = styled.div` ` const Heading = styled.div` - color: ${color.brand1.base}; + color: ${th('color.brand1.base')}; font-family: ${th('fontReading')}; font-size: ${th('fontSizeHeading3')}; margin: ${th('gridUnit')} 0; @@ -45,7 +44,7 @@ const UploadContainer = styled.div` ` const DetailText = styled.div` - color: ${color.gray40}; + color: ${th('color.gray40')}; font-family: ${th('fontReading')}; font-size: ${th('fontSizeBaseSmall')}; line-height: ${th('lineHeightBaseSmall')}; @@ -79,7 +78,7 @@ const ButtonWrapper = styled.div` ` const ModalContainer = styled.div` - background: ${color.backgroundA}; + background: ${th('color.backgroundA')}; max-height: calc(100vh - 60px); overflow-y: auto; padding: 20px 24px; @@ -145,7 +144,7 @@ const CommentWrapper = styled.div` ${props => props.commentBelongsToDifferentManuscriptVersion ? css` - color: ${color.gray60}; + color: ${th('color.gray60')}; ` : ``} @@ -154,7 +153,7 @@ const CommentWrapper = styled.div` props.commentBelongsToDifferentManuscriptVersion ? css` /* stylelint-disable-next-line declaration-no-important */ - stroke: ${color.gray60} !important; + stroke: ${th('color.gray60')} !important; ` : ``} } @@ -171,30 +170,30 @@ const ActionWrapper = styled.div` justify-content: flex-end; svg { - stroke: ${color.gray40}; + stroke: ${th('color.gray40')}; } ` const CancelButton = styled(Button)` - background-color: ${color.gray90}; + background-color: ${th('color.gray90')}; padding: 8px; text-decoration: none; &:hover { - background-color: ${color.gray80}; + background-color: ${th('color.gray80')}; } ` const CommentContainer = styled.div` - border-bottom: 1px ${th('borderStyle')} ${color.gray80}; + border-bottom: 1px ${th('borderStyle')} ${th('color.gray80')}; padding-bottom: 25px; p { ${props => props.commentBelongsToDifferentManuscriptVersion ? css` - color: ${color.gray60}; - background-color: ${color.backgroundA}; + color: ${th('color.gray60')}; + background-color: ${th('color.backgroundA')}; ` : ``} } diff --git a/packages/client/app/components/component-frontpage/src/GroupsPage.jsx b/packages/client/app/components/component-frontpage/src/GroupsPage.jsx index 4a833e273..5870587cf 100644 --- a/packages/client/app/components/component-frontpage/src/GroupsPage.jsx +++ b/packages/client/app/components/component-frontpage/src/GroupsPage.jsx @@ -7,10 +7,9 @@ import { th, grid } from '@coko/client' import styled from 'styled-components' import { Spinner, CommsErrorBanner, Select } from '../../shared' import { GET_GROUPS } from '../../../queries' -import { color } from '../../../theme' const Container = styled.div` - background: ${color.gray97}; + background: ${th('color.gray97')}; display: grid; height: 100vh; place-items: center; diff --git a/packages/client/app/components/component-login/src/Login.jsx b/packages/client/app/components/component-login/src/Login.jsx index 72fe6ef64..0ee167d33 100644 --- a/packages/client/app/components/component-login/src/Login.jsx +++ b/packages/client/app/components/component-login/src/Login.jsx @@ -10,7 +10,6 @@ import { th, grid, serverUrl } from '@coko/client' import { Button } from '../../pubsweet' import { ConfigContext } from '../../config/src' import { getQueryStringByName } from '../../../shared/urlUtils' -import { color } from '../../../theme' const getNextUrl = config => { const url = new URL(window.location.href) @@ -54,8 +53,8 @@ const Container = styled.div.attrs({ })` background: linear-gradient( 134deg, - ${color.brand1.base}, - ${color.brand1.tint25} + ${th('color.brand1.base')}, + ${th('color.brand1.tint25')} ); display: grid; height: 100vh; diff --git a/packages/client/app/components/component-manuscripts-table/src/FilterSortHeader.jsx b/packages/client/app/components/component-manuscripts-table/src/FilterSortHeader.jsx index 0ceea9cdc..7f207523c 100644 --- a/packages/client/app/components/component-manuscripts-table/src/FilterSortHeader.jsx +++ b/packages/client/app/components/component-manuscripts-table/src/FilterSortHeader.jsx @@ -3,7 +3,7 @@ import styled from 'styled-components' import Popup from 'reactjs-popup' import { Calendar as FeatherCalendar } from 'react-feather' -import { grid } from '@coko/client' +import { th, grid } from '@coko/client' import { useTranslation } from 'react-i18next' import { Cell, HeadingCell } from './style' import { Select, DateRangeCalendar, SortUp, SortDown } from '../../shared' @@ -11,18 +11,18 @@ import { dateToCompactStringLocal, compactStringToDateLocal, } from '../../../shared/dateUtils' -import { color } from '../../../theme' /* eslint-disable-next-line no-unused-vars */ const CalendarIcon = styled(({ isActive, ...props }) => ( ))` height: ${grid(2)}; - stroke: ${props => (props.isActive ? color.brand1.base : color.gray60)}; + stroke: ${props => + props.isActive ? props.theme.color.brand1.base : props.theme.color.gray60}; width: ${grid(2)}; &:hover { - stroke: ${color.brand1.base}; + stroke: ${th('color.brand1.base')}; } ` diff --git a/packages/client/app/components/component-manuscripts-table/src/cell-components/LabelDropdown.jsx b/packages/client/app/components/component-manuscripts-table/src/cell-components/LabelDropdown.jsx index 9de51fc81..80d989f0a 100644 --- a/packages/client/app/components/component-manuscripts-table/src/cell-components/LabelDropdown.jsx +++ b/packages/client/app/components/component-manuscripts-table/src/cell-components/LabelDropdown.jsx @@ -8,8 +8,9 @@ import { useState, useEffect, useRef } from 'react' import styled from 'styled-components' import { ChevronUp, ChevronDown, X } from 'react-feather' import Color from 'color' +import { th } from '@coko/client' + import { LabelBadge } from '../../../shared' -import { color } from '../../../../theme' const BaseDropdown = styled.div.attrs({ 'data-testid': 'label-dropdown-base-dropdown', @@ -32,7 +33,7 @@ const DropdownElement = styled.div.attrs({ const DropdownMenu = styled.div.attrs({ 'data-testid': 'label-dropdown-menu', })` - background-color: ${color.backgroundA}; + background-color: ${th('color.backgroundA')}; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 2px 2px rgb(0 0 0 / 25%); @@ -71,12 +72,12 @@ const StyledButton = styled.button.attrs({ const DropdownMenuItem = styled.div` background-color: ${({ isSelected }) => - isSelected ? `${color.gray95}` : 'white'}; + isSelected ? `${th('color.gray95')}` : 'white'}; cursor: pointer; padding: 8px; &:hover { - background-color: ${color.gray95}; + background-color: ${th('color.gray95')}; } ` @@ -151,8 +152,8 @@ const LabelDropdown = ({ @@ -161,8 +162,8 @@ const LabelDropdown = ({ @@ -174,8 +175,8 @@ const LabelDropdown = ({ @@ -184,8 +185,8 @@ const LabelDropdown = ({ diff --git a/packages/client/app/components/component-manuscripts-table/src/cell-components/ReviewerItemLinks.jsx b/packages/client/app/components/component-manuscripts-table/src/cell-components/ReviewerItemLinks.jsx index b8bb54eae..747068bf8 100644 --- a/packages/client/app/components/component-manuscripts-table/src/cell-components/ReviewerItemLinks.jsx +++ b/packages/client/app/components/component-manuscripts-table/src/cell-components/ReviewerItemLinks.jsx @@ -3,12 +3,16 @@ import { useNavigate } from 'react-router-dom' import styled from 'styled-components' import { useTranslation } from 'react-i18next' +import { th } from '@coko/client' + import { Action, MediumRow } from '../../../shared' -import { color } from '../../../../theme' import { findReviewerStatus } from './reviewStatusUtils' const Divider = styled.div` - background-image: linear-gradient(${color.brand2.base}, ${color.brand2.base}); + background-image: linear-gradient( + ${th('color.brand2.base')}, + ${th('color.brand2.base')} + ); background-position: center center; background-repeat: no-repeat; background-size: 1px 100%; diff --git a/packages/client/app/components/component-manuscripts-table/src/cell-components/StatusBadge.jsx b/packages/client/app/components/component-manuscripts-table/src/cell-components/StatusBadge.jsx index ee93bd515..ef59e316c 100644 --- a/packages/client/app/components/component-manuscripts-table/src/cell-components/StatusBadge.jsx +++ b/packages/client/app/components/component-manuscripts-table/src/cell-components/StatusBadge.jsx @@ -2,7 +2,6 @@ import styled, { css } from 'styled-components' import { grid, th } from '@coko/client' -import { color } from '../../../../theme' const Status = styled.span` border-radius: 8px; @@ -32,7 +31,7 @@ const NormalStatus = styled(Status)` ${props => props.minimal ? css` - color: ${color.brand1.base}; + color: ${th('color.brand1.base')}; ` : css` background-color: ${th('colorWarning')}; diff --git a/packages/client/app/components/component-manuscripts-table/src/cell-components/SubmitChevron.jsx b/packages/client/app/components/component-manuscripts-table/src/cell-components/SubmitChevron.jsx index 24b791516..0c3f2c85e 100644 --- a/packages/client/app/components/component-manuscripts-table/src/cell-components/SubmitChevron.jsx +++ b/packages/client/app/components/component-manuscripts-table/src/cell-components/SubmitChevron.jsx @@ -1,15 +1,17 @@ /* eslint-disable react/prop-types */ import { Link } from 'react-router-dom' +import { useTheme } from 'styled-components' + import { Icon } from '../../../shared' -import { color } from '../../../../theme' const SubmitChevron = ({ manuscript, urlFrag }) => { + const theme = useTheme() return ( - + chevron_right diff --git a/packages/client/app/components/component-manuscripts-table/src/style.jsx b/packages/client/app/components/component-manuscripts-table/src/style.jsx index 807db326e..1a69cc904 100644 --- a/packages/client/app/components/component-manuscripts-table/src/style.jsx +++ b/packages/client/app/components/component-manuscripts-table/src/style.jsx @@ -2,7 +2,6 @@ import styled, { css } from 'styled-components' import { th, grid } from '@coko/client' import { AlertCircle } from 'react-feather' import { Button, Action } from '../../pubsweet' -import { color } from '../../../theme' export const StyledButton = styled(Button).attrs({ 'data-testid': 'manuscripts-table-styled-button', @@ -59,8 +58,10 @@ export const ManuscriptsRow = styled.div.attrs({ })` align-items: center; background-color: ${props => - props.$archived ? color.warning.tint90 : color.backgroundA}; - border-top: 1px solid ${color.gray90}; + props.$archived + ? props.theme.color.warning.tint90 + : props.theme.color.backgroundA}; + border-top: 1px solid ${th('color.gray90')}; column-gap: ${grid(2)}; display: flex; flex-direction: row; @@ -81,14 +82,14 @@ export const ManuscriptsRow = styled.div.attrs({ export const ClickableManuscriptsRow = styled(ManuscriptsRow).attrs({ 'data-testid': 'clickable-manuscripts-row', })` - color: ${color.text}; + color: ${th('color.text')}; &:hover { - background-color: ${color.backgroundC}; + background-color: ${th('color.backgroundC')}; cursor: pointer; svg { - stroke: ${color.brand1.base}; + stroke: ${th('color.brand1.base')}; } } ` @@ -105,7 +106,9 @@ export const ManuscriptsHeaderRow = styled(ManuscriptsRow).attrs({ })` align-items: baseline; background-color: ${props => - props.$archived ? color.warning.tint70 : color.backgroundB}; + props.$archived + ? props.theme.color.warning.tint70 + : props.theme.color.backgroundB}; font-variant: all-small-caps; line-height: 1.25em; ` @@ -133,7 +136,7 @@ export const HeadingCell = styled(Cell)` ` export const SortArrow = styled.span` - color: ${color.brand1.base}; + color: ${th('color.brand1.base')}; font-size: 70%; margin-left: 0.5em; diff --git a/packages/client/app/components/component-manuscripts/src/Manuscripts.jsx b/packages/client/app/components/component-manuscripts/src/Manuscripts.jsx index b82c9bbcd..d65daf352 100644 --- a/packages/client/app/components/component-manuscripts/src/Manuscripts.jsx +++ b/packages/client/app/components/component-manuscripts/src/Manuscripts.jsx @@ -11,7 +11,6 @@ import 'react-toastify/dist/ReactToastify.css' import { grid } from '@coko/client' import { Checkbox, Dropdown } from '../../pubsweet' -import { color } from '../../../theme' import { validateManuscriptSubmission } from '../../../shared/manuscriptUtils' import { @@ -75,8 +74,12 @@ const DropdownContainer = styled.div.attrs({ width: 100px; button { - background: ${props => (props.disabled ? color.gray90 : color.brand1.base)}; - color: ${props => (props.disabled ? color.gray60 : color.white)}; + background: ${props => + props.disabled + ? props.theme.color.gray90 + : props.theme.color.brand1.base}; + color: ${props => + props.disabled ? props.theme.color.gray60 : props.theme.color.white}; line-height: calc(8px * 2); min-width: calc(8px * 10); padding: 5px 4px; @@ -98,7 +101,8 @@ const DropdownContainer = styled.div.attrs({ svg { height: calc(3 * 6px); margin-top: -5px; - stroke: ${props => (props.disabled ? color.gray60 : color.white)}; + stroke: ${props => + props.disabled ? props.theme.color.gray60 : props.theme.color.white}; width: calc(3 * 6px); } ` diff --git a/packages/client/app/components/component-manuscripts/src/SearchControl.jsx b/packages/client/app/components/component-manuscripts/src/SearchControl.jsx index 9a1933ddb..08721f233 100644 --- a/packages/client/app/components/component-manuscripts/src/SearchControl.jsx +++ b/packages/client/app/components/component-manuscripts/src/SearchControl.jsx @@ -9,7 +9,6 @@ import { X } from 'react-feather' import { th, grid } from '@coko/client' import { useTranslation } from 'react-i18next' import { RoundIconButton } from '../../shared' -import { color } from '../../../theme' const SearchContainer = styled.div` align-items: center; @@ -24,10 +23,10 @@ const InlineTextField = styled.input` // eslint-disable-next-line no-nested-ternary props.isFilteringResults ? props.isShowingCurrentSearch - ? color.brand1.tint50 // Stronger color to indicate this is the current search filtering - : color.brand1.tint70 // Weaker, to indicate there is filtering but the string is no longer representative of it - : color.backgroundA}; - border: 1px solid ${color.gray60}; + ? props.theme.color.brand1.tint50 // Stronger color to indicate this is the current search filtering + : props.theme.color.brand1.tint70 // Weaker, to indicate there is filtering but the string is no longer representative of it + : props.theme.color.backgroundA}; + border: 1px solid ${th('color.gray60')}; border-radius: ${th('borderRadius')}; display: inline; flex: 0 1 40em; @@ -36,7 +35,7 @@ const InlineTextField = styled.input` transition: ${th('transitionDuration')} ${th('transitionTimingFunction')}; &:focus { - border-color: ${color.brand1.base}; + border-color: ${th('color.brand1.base')}; box-shadow: ${th('boxShadow')}; } ` diff --git a/packages/client/app/components/component-manuscripts/src/style.jsx b/packages/client/app/components/component-manuscripts/src/style.jsx index 1c504a963..08fe36b0c 100644 --- a/packages/client/app/components/component-manuscripts/src/style.jsx +++ b/packages/client/app/components/component-manuscripts/src/style.jsx @@ -1,19 +1,19 @@ import styled from 'styled-components' -import { grid } from '@coko/client' +import { th, grid } from '@coko/client' import { Button } from '../../pubsweet' import { Action } from '../../shared' -import theme, { color } from '../../../theme' export const SelectAllField = styled.div` align-items: center; display: flex; - font-size: ${theme.fontSizeBaseSmall}; - line-height: ${theme.lineHeightBaseSmall}; + font-size: ${th('fontSizeBaseSmall')}; + line-height: ${th('lineHeightBaseSmall')}; ` export const SelectedManuscriptsNumber = styled.p.attrs({ 'data-testid': 'selected-manuscripts-number', })` - color: ${props => (props.disabled ? color.gray60 : color.text)}; + color: ${props => + props.disabled ? props.theme.color.gray60 : props.theme.color.text}; font-weight: bold; margin-left: 10px; margin-right: 15px; @@ -40,5 +40,5 @@ export const BulkActionModalButton = styled(Button)` ` export const ViewArchivedAction = styled(Action)` - font-size: ${theme.fontSizeBaseSmall}; + font-size: ${th('fontSizeBaseSmall')}; ` diff --git a/packages/client/app/components/component-menu/styles/menuStyleds.jsx b/packages/client/app/components/component-menu/styles/menuStyleds.jsx index f8da5a0e0..ffaca5561 100644 --- a/packages/client/app/components/component-menu/styles/menuStyleds.jsx +++ b/packages/client/app/components/component-menu/styles/menuStyleds.jsx @@ -2,8 +2,8 @@ import styled from 'styled-components' import { Link } from 'react-router-dom' import { th, grid } from '@coko/client' + import { Icon } from '../../pubsweet' -import { color } from '../../../theme' import { menuStyles } from './styleGlobals' import PinButton from './PinButton' @@ -17,8 +17,8 @@ export const MainNavWrapper = styled.div.attrs({ align-items: center; background: linear-gradient( 134deg, - ${color.brand1.base}, - ${color.brand1.tint25} + ${th('color.brand1.base')}, + ${th('color.brand1.tint25')} ); display: flex; flex-direction: column; @@ -37,7 +37,7 @@ export const ScrollWrapper = styled.div` height: 100%; overflow: hidden auto; position: relative; - scrollbar-color: ${color.brand1.tint50} #fff0; + scrollbar-color: ${th('color.brand1.tint50')} #fff0; scrollbar-width: thin; transition: all var(transition-time); width: 100%; @@ -48,7 +48,7 @@ export const ScrollWrapper = styled.div` } ::-webkit-scrollbar-thumb { - background: ${color.brand1.tint50}; + background: ${th('color.brand1.tint50')}; border-radius: 0.3rem; } @@ -69,7 +69,7 @@ export const NavLinks = styled.div` // #region PinNav export const SectionNavLayoutSettings = styled.div` - background: ${color.brand1.shade10}; + background: ${th('color.brand1.shade10')}; border: none; border-bottom: 1px solid #fff2; height: ${p => (p.$pinned ? '0' : '22px')}; @@ -82,10 +82,10 @@ export const SectionNavLayoutSettings = styled.div` width: 100%; &:hover { - background-color: ${color.brand1.shade15}; + background-color: ${th('color.brand1.shade15')}; * { - color: ${color.brand1.tint70}; + color: ${th('color.brand1.tint70')}; } } ` @@ -93,7 +93,8 @@ export const SectionNavLayoutSettings = styled.div` export const StyledPinButton = styled(PinButton)` background: ${p => (p.$pinned ? '#fff4' : 'transparent')}; border-radius: 4px; - color: ${p => (p.$pinned ? color.brand1.tint90 : color.brand1.tint25)}; + color: ${p => + p.$pinned ? p.theme.color.brand1.tint90 : p.theme.color.brand1.tint25}; max-width: ${p => (p.$menuIsMinimal ? '0' : '100%')}; opacity: ${p => (p.$menuIsMinimal ? '0' : '1')}; overflow: hidden; @@ -115,9 +116,10 @@ export const StyledPinButton = styled(PinButton)` // #region Link export const StyledLink = styled(Link)` - background-color: ${p => (p.$active ? color.brand1.tint70 : 'unset')}; + background-color: ${p => (p.$active ? p.theme.color.brand1.tint70 : 'unset')}; border-radius: 10px; - color: ${p => (p.$active ? color.text : color.textReverse)} !important; + color: ${p => + p.$active ? p.theme.color.text : p.theme.color.textReverse} !important; cursor: pointer; display: flex; font-size: ${th('fontSizeBase')} !important; @@ -145,27 +147,28 @@ export const StyledLink = styled(Link)` } svg { - stroke: ${p => (p.$active ? color.text : color.textReverse)}; + stroke: ${p => + p.$active ? p.theme.color.text : p.theme.color.textReverse}; transition: stroke var(--transition-link-colors); width: 1em; } svg#coar { - color: ${p => (p.$active ? color.text : color.textReverse)}; + color: ${p => (p.$active ? p.theme.color.text : p.theme.color.textReverse)}; transition: color var(--transition-time); } &:hover { - background-color: ${color.brand1.tint70}; - color: ${color.text} !important; - stroke: ${color.text}; + background-color: ${th('color.brand1.tint70')}; + color: ${th('color.text')} !important; + stroke: ${th('color.text')}; svg { - stroke: ${color.text}; + stroke: ${th('color.text')}; } svg#coar { - color: ${color.text}; + color: ${th('color.text')}; } } ` @@ -192,7 +195,7 @@ export const LinkLabel = styled.span` export const StyledIcon = styled(Icon)`` export const AlertIndicator = styled.div` - background: ${color.error.base}; + background: ${th('color.error.base')}; border-radius: 50%; display: flex; height: 10px; @@ -228,7 +231,7 @@ export const SubMenuContainer = styled(NavLinks)` // #region UserNav export const RolesLabel = styled.div` - color: ${color.brand1.tint50}; + color: ${th('color.brand1.tint50')}; font-size: ${th('fontSizeBaseSmaller')}; font-weight: normal; line-height: 1; @@ -240,7 +243,7 @@ export const UserItem = styled(Link).attrs({ })` align-items: end; border-bottom: 1px solid #fff2; - color: ${color.textReverse}; + color: ${th('color.textReverse')}; display: flex; gap: ${p => (p.$expanded ? '16px' : '0')}; overflow: hidden; @@ -250,7 +253,7 @@ export const UserItem = styled(Link).attrs({ width: 100%; &:hover { - color: ${color.textReverse} !important; + color: ${th('color.textReverse')} !important; } ` @@ -282,7 +285,7 @@ export const UserMenuContainer = styled.div` width: 100%; & img { - outline: 4px solid ${color.brand1.base}; + outline: 4px solid ${th('color.brand1.base')}; } ` // #endregion UserNav @@ -294,7 +297,7 @@ export const Root = styled.nav` --transition-link-colors: 0.3s ease; align-items: flex-start; - background: ${color.brand1.base}; + background: ${th('color.brand1.base')}; display: flex; flex-direction: column; font-family: ${th('fontInterface')}, sans-serif !important; diff --git a/packages/client/app/components/component-modal/src/Modal.jsx b/packages/client/app/components/component-modal/src/Modal.jsx index 69d02b2f2..f1d1efd5a 100644 --- a/packages/client/app/components/component-modal/src/Modal.jsx +++ b/packages/client/app/components/component-modal/src/Modal.jsx @@ -5,7 +5,6 @@ import ReactModal from 'react-modal' import styled, { ThemeContext } from 'styled-components' import { th, grid } from '@coko/client' import { Button } from '../../pubsweet' -import { color } from '../../../theme' import { Icon, @@ -15,7 +14,7 @@ import { } from '../../shared' const MainHeader = styled(LooseRowSpacedAlignTop)` - border-bottom: 1.5px solid ${color.gray80}; + border-bottom: 1.5px solid ${th('color.gray80')}; line-height: 22px; padding: ${grid(2)} ${grid(3)}; z-index: 10000; @@ -43,14 +42,14 @@ export const Title = styled.div` ` export const Subtitle = styled.div` - color: ${color.gray50}; + color: ${th('color.gray50')}; font-size: ${th('fontSizeHeading6')}; font-weight: normal; ` const CloseButton = styled(Button)` align-items: center; - background-color: ${color.backgroundA}; + background-color: ${th('color.backgroundA')}; border-radius: 50%; cursor: pointer; display: flex; @@ -61,7 +60,7 @@ const CloseButton = styled(Button)` width: 30px; &:hover { - background-color: ${color.brand1.tint25}; + background-color: ${th('color.brand1.tint25')}; svg { stroke: white; @@ -71,8 +70,8 @@ const CloseButton = styled(Button)` const ButtonPanel = styled.div` align-items: center; - background-color: ${color.backgroundB}; - border-top: 1px solid ${color.gray80}; + background-color: ${th('color.backgroundB')}; + border-top: 1px solid ${th('color.gray80')}; display: flex; flex-direction: row; font-size: 15px; @@ -87,18 +86,18 @@ const ButtonContainer = styled.div` ` const PrimaryActionButton = styled(ActionButton)` - background-color: ${color.brand1.base}; + background-color: ${th('color.brand1.base')}; border-radius: 6px; - color: ${color.textReverse}; + color: ${th('color.textReverse')}; cursor: pointer; margin: 0 5px; ` const SecondaryActionButton = styled(ActionButton)` - background-color: ${color.backgroundA}; - border: 1px solid ${color.black}; + background-color: ${th('color.backgroundA')}; + border: 1px solid ${th('color.black')}; border-radius: 6px; - color: ${color.gray50}; + color: ${th('color.gray50')}; cursor: pointer; ` diff --git a/packages/client/app/components/component-notification-event/components/CustomInputs.jsx b/packages/client/app/components/component-notification-event/components/CustomInputs.jsx index 85ed440e2..5951de83b 100644 --- a/packages/client/app/components/component-notification-event/components/CustomInputs.jsx +++ b/packages/client/app/components/component-notification-event/components/CustomInputs.jsx @@ -9,46 +9,46 @@ import Creatable from 'react-select/creatable' import { ThemeContext } from 'styled-components' import { useTranslation } from 'react-i18next' import { Minus, Plus } from 'react-feather' -import { color } from '../../../theme' + import { useNumber } from '../../../hooks/dataTypeHooks' import { Col, CounterInputWrapper, InputWrapper, Row } from '../misc/styleds' import { T } from '../misc/constants' import { CleanButton } from '../../component-email-templates/misc/styleds' -const styles = th => ({ +const styles = theme => ({ menu: provided => ({ ...provided, - borderRadius: th.borderRadius, + borderRadius: theme.borderRadius, zIndex: 9999, width: '100%', - fontSize: th.fontSizeBaseSmall, + fontSize: theme.fontSizeBaseSmall, marginTop: '4px', }), control: (provided, state) => ({ ...provided, - background: color.gray97, + background: theme.color.gray97, border: !state.selectProps.standalone ? state.isFocused - ? `1px solid ${color.gray70}` - : `1px solid ${color.gray80}` + ? `1px solid ${theme.color.gray70}` + : `1px solid ${theme.color.gray80}` : 'none', boxShadow: !state.selectProps.standalone ? state.isFocused - ? `0 0 0 1px ${color.brand1.base}` + ? `0 0 0 1px ${theme.color.brand1.base}` : 'inset 0px 0px 4px rgb(0 0 0 / 7%)' : state.isFocused - ? `0 0 0 1px ${color.brand1.base}` - : th.boxShadow, + ? `0 0 0 1px ${theme.color.brand1.base}` + : theme.boxShadow, - borderRadius: th.borderRadius, + borderRadius: theme.borderRadius, '&:hover': { - boxShadow: `1px solid ${color.gray70}`, + boxShadow: `1px solid ${theme.color.gray70}`, }, - fontSize: th.fontSizeBaseSmall, - minHeight: `calc(${th.gridUnit} * 5)`, + fontSize: theme.fontSizeBaseSmall, + minHeight: `calc(${theme.gridUnit} * 5)`, div: { - color: color.gray20, + color: theme.color.gray20, }, }), @@ -62,8 +62,8 @@ const styles = th => ({ option: (provided, state) => ({ ...provided, backgroundColor: - state.isFocused || state.isSelected ? color.gray90 : 'white', - color: color.text, + state.isFocused || state.isSelected ? theme.color.gray90 : 'white', + color: theme.color.text, }), }) @@ -79,7 +79,7 @@ export const Select = props => { ...otherProps } = props - const th = useContext(ThemeContext) + const theme = useContext(ThemeContext) const { t } = useTranslation() const [selectedOption, setSelectedOption] = useState(value) @@ -102,7 +102,7 @@ export const Select = props => { } }, [value, isMulti, hasGroupedOptions, options]) - const myStyles = { ...styles(th), ...(customStyles || {}) } + const myStyles = { ...styles(theme), ...(customStyles || {}) } return ( { ...otherProps } = props - const th = useContext(ThemeContext) + const theme = useContext(ThemeContext) const { t } = useTranslation() const [selectedOption, setSelectedOption] = useState(value) @@ -154,7 +154,7 @@ export const CreatableSelect = props => { } }, [value, isMulti, hasGroupedOptions, options]) - const myStyles = { ...styles(th), ...(customStyles || {}) } + const myStyles = { ...styles(theme), ...(customStyles || {}) } return ( { export const CounterInput = ({ options, label, ...rest }) => { const { t } = useTranslation() + const theme = useContext(ThemeContext) const delay = useNumber({ ...options }) const { start } = options const { state: d } = delay const unchangedColor = d === start && '#555' const changedColor = d > start ? 'success' : 'error' - const labelColor = unchangedColor || color[changedColor].base + const labelColor = unchangedColor || theme.color[changedColor].base return ( diff --git a/packages/client/app/components/component-notification-event/components/EditSection.jsx b/packages/client/app/components/component-notification-event/components/EditSection.jsx index 6e34997bf..b5a0ead29 100644 --- a/packages/client/app/components/component-notification-event/components/EditSection.jsx +++ b/packages/client/app/components/component-notification-event/components/EditSection.jsx @@ -1,8 +1,9 @@ /* eslint-disable react/prop-types */ -import styled from 'styled-components' +import styled, { useTheme } from 'styled-components' import { grid } from '@coko/client' import { useTranslation } from 'react-i18next' + import { createDefaultOptions, createOptions } from '../misc/helpers' import { Col, @@ -11,7 +12,6 @@ import { Row, TextInput, } from '../misc/styleds' -import { color } from '../../../theme' import SimpleWaxEditor from '../../wax-collab/src/SimpleWaxEditor' import { objIf } from '../../../shared/generalUtils' import { T } from '../misc/constants' @@ -78,6 +78,7 @@ const EditSection = ({ fieldsStatus, emailTemplates, }) => { + const theme = useTheme() const { t } = useTranslation() const { hasChanged, isValid } = fieldsStatus.state const options = createOptions(recipients, emailTemplates, selected?.ccEmails) @@ -109,8 +110,8 @@ const EditSection = ({ ) const getFieldStatusColor = field => { - if (!isValid[field]) return color.error.base - if (hasChanged[field]) return color.warning.base + if (!isValid[field]) return theme.color.error.base + if (hasChanged[field]) return theme.color.warning.base return '' } diff --git a/packages/client/app/components/component-notification-event/components/EventsList.jsx b/packages/client/app/components/component-notification-event/components/EventsList.jsx index bcaeb88e8..e05176378 100644 --- a/packages/client/app/components/component-notification-event/components/EventsList.jsx +++ b/packages/client/app/components/component-notification-event/components/EventsList.jsx @@ -1,8 +1,8 @@ /* eslint-disable react/prop-types */ import { Clock, Plus, Power, Trash } from 'react-feather' -import styled from 'styled-components' -import { grid } from '@coko/client' +import styled, { useTheme } from 'styled-components' +import { th, grid } from '@coko/client' import { useTranslation } from 'react-i18next' import { useBool, useString } from '../../../hooks/dataTypeHooks' import { @@ -25,7 +25,6 @@ import { import { arrIf } from '../../../shared/generalUtils' import EventListControls from './EventListControls' import { filterEventAndNotifications } from '../misc/helpers' -import { color } from '../../../theme' const Root = styled(Col)` gap: 0; @@ -138,7 +137,7 @@ const ListItemActionsContainer = styled(Row)` const OptionButton = styled(OptionListItemButton)` p { - text-decoration-color: ${color.error.base}; + text-decoration-color: ${th('color.error.base')}; text-decoration-style: double; } ` @@ -151,6 +150,7 @@ const NotificationItem = ({ selected, notification, }) => { + const theme = useTheme() const { t } = useTranslation() const { delay, displayName, event, id, isDefault } = notification const name = displayName || t(T[event]) @@ -187,7 +187,9 @@ const NotificationItem = ({ )} { e.stopPropagation() @@ -211,6 +213,7 @@ const EventsList = ({ handleActivate, selected, }) => { + const theme = useTheme() const { t } = useTranslation() const search = useString() @@ -310,8 +313,8 @@ const EventsList = ({ style={{ strokeWidth: '2px', stroke: sourceIsActive - ? color.success.base - : color.error.base, + ? theme.color.success.base + : theme.color.error.base, }} /> diff --git a/packages/client/app/components/component-notification-event/misc/constants.js b/packages/client/app/components/component-notification-event/misc/constants.js index eab989638..094a016d6 100644 --- a/packages/client/app/components/component-notification-event/misc/constants.js +++ b/packages/client/app/components/component-notification-event/misc/constants.js @@ -1,5 +1,3 @@ -import { color } from '../../../theme' - export const COLLAPSED_STATE_INIT = false export const DRAFT_NOTIFICATION_SHAPE = { @@ -16,13 +14,6 @@ export const DRAFT_NOTIFICATION_SHAPE = { delay: 0, } -export const EVENT_TYPE_COLORS = { - colors: { - email: color.brand1.base(), - default: '#aaa', - }, -} - export const FILTERS_LIST = [ 'all', 'active', diff --git a/packages/client/app/components/component-notification-event/misc/styleds.jsx b/packages/client/app/components/component-notification-event/misc/styleds.jsx index 6e1c4da66..c99067352 100644 --- a/packages/client/app/components/component-notification-event/misc/styleds.jsx +++ b/packages/client/app/components/component-notification-event/misc/styleds.jsx @@ -1,9 +1,9 @@ /* stylelint-disable declaration-no-important */ import { grid, th, theme } from '@coko/client' import styled from 'styled-components' + import { FlexRow } from '../../component-cms-manager/src/style' import { StyledInput } from '../../shared' -import { color } from '../../../theme' import { CleanButton } from '../../component-email-templates/misc/styleds' export const EventEditForm = styled.form` @@ -65,11 +65,11 @@ export const EditSection = styled(Col)` /* stylelint-disable-next-line string-quotes */ &[data-modified='true'] { - color: ${color.warning.base}; + color: ${th('color.warning.base')}; } /* stylelint-disable-next-line string-quotes */ &[data-error='true'] { - color: ${color.error.base}; + color: ${th('color.error.base')}; } } @@ -93,7 +93,7 @@ export const TextInput = styled(StyledInput)` export const Header = styled(Row)` align-items: center; border-bottom: 1px solid #ddd; - color: ${color.brand1.base}; + color: ${th('color.brand1.base')}; height: var(--header-height, 0); padding: 0 ${grid(4)}; @@ -109,7 +109,7 @@ export const Content = styled(FlexRow)` ` export const ActionIcon = styled(CleanButton)` - border: 1px solid ${p => p.$color || color.brand1.base}; + border: 1px solid ${p => p.$color || p.theme.color.brand1.base}; border-radius: ${th('borderRadius')}; filter: ${p => (p.$disabled ? 'grayscale(1)' : 'none')}; padding: ${grid(1)}; @@ -118,12 +118,12 @@ export const ActionIcon = styled(CleanButton)` aspect-ratio: 1 / 1; height: 22px; pointer-events: none; - stroke: ${p => p.$color || color.brand1.base}; + stroke: ${p => p.$color || p.theme.color.brand1.base}; } ` export const CounterInputWrapper = styled(Row)` align-items: center; - border: 1px solid ${p => (p.$changed ? color.warning.base : '#ddd')}; + border: 1px solid ${p => (p.$changed ? p.theme.color.warning.base : '#ddd')}; border-radius: 4px; padding: 7px 10px; @@ -142,8 +142,8 @@ export const CounterInputWrapper = styled(Row)` export const InputWrapper = styled.div` align-items: center; - background: ${color.gray99}; - border: 1px solid ${color.gray80}; + background: ${th('color.gray99')}; + border: 1px solid ${th('color.gray80')}; border-color: ${p => p.$color || '#ddd'}; border-radius: 4px; box-shadow: inset 0 0 4px #0001; @@ -153,14 +153,14 @@ export const InputWrapper = styled.div` width: 100%; &:hover { - border: 1px solid ${color.gray70}; + border: 1px solid ${th('color.gray70')}; outline: none; transition: ${theme.transitionDuration}; } &:active, &:focus-visible { - border: 1px solid ${color.brand1.base}; + border: 1px solid ${th('color.brand1.base')}; outline: none; transition: ${theme.transitionDuration}; } diff --git a/packages/client/app/components/component-production/src/components/PreviousFeedbackSubmissions.jsx b/packages/client/app/components/component-production/src/components/PreviousFeedbackSubmissions.jsx index 402d46224..5a863782c 100644 --- a/packages/client/app/components/component-production/src/components/PreviousFeedbackSubmissions.jsx +++ b/packages/client/app/components/component-production/src/components/PreviousFeedbackSubmissions.jsx @@ -3,13 +3,13 @@ import PropTypes from 'prop-types' import styled from 'styled-components' import { th, grid } from '@coko/client' import { useTranslation } from 'react-i18next' -import { color } from '../../../../theme' + import ReadOnlyAuthorFeedback from '../../../component-author-feedback/src/components/ReadOnlyAuthorFeedback' import { SectionContent, SectionHeader, Title } from '../../../shared' const Info = styled.div` border-radius: ${th('borderRadius')}; - color: ${color.gray5}; + color: ${th('color.gray5')}; font-size: ${th('fontSizeBase')}; margin: ${grid(3)}; padding: ${grid(2)} ${grid(2)}; diff --git a/packages/client/app/components/component-production/src/components/Production.jsx b/packages/client/app/components/component-production/src/components/Production.jsx index bb5187869..396b3cc0b 100644 --- a/packages/client/app/components/component-production/src/components/Production.jsx +++ b/packages/client/app/components/component-production/src/components/Production.jsx @@ -9,6 +9,7 @@ import { useTranslation } from 'react-i18next' import CodeMirror from '@uiw/react-codemirror' import { html } from '@codemirror/lang-html' import { css } from '@codemirror/lang-css' + import { ConfigContext } from '../../../config/src' import ProductionWaxEditor from '../../../wax-collab/src/ProductionWaxEditor' import { DownloadDropdown } from './DownloadDropdown' @@ -27,7 +28,6 @@ import { ControlsContainer } from '../../../component-manuscripts/src/style' import AuthorFeedbackForm from '../../../component-author-feedback/src/components/AuthorFeedbackForm' import UploadAsset from './uploadManager/UploadAsset' import ReadonlyFormTemplate from '../../../component-review/src/components/metadata/ReadonlyFormTemplate' -import { color } from '../../../../theme' import gatherManuscriptVersions from '../../../../shared/manuscript_versions' import PreviousFeedbackSubmissions from './PreviousFeedbackSubmissions' import { CssAssistantProvider } from '../../../component-ai-assistant/hooks/CssAssistantContext' @@ -60,7 +60,7 @@ const StyledManuscript = styled(Manuscript)` ` const ScrollableTabContent = styled.section` - background-color: ${color.backgroundA}; + background-color: ${th('color.backgroundA')}; border-radius: ${th('borderRadius')}; box-shadow: ${({ theme }) => theme.boxShadow.shades[200]}; height: calc(100vh - 108px); @@ -72,7 +72,7 @@ const LabeledTab = styled.div` position: relative; &::before { - background: ${color.brand1.base}; + background: ${th('color.brand1.base')}; border-radius: 5px; color: white; content: 'Beta'; diff --git a/packages/client/app/components/component-production/src/components/VerifyPayloadModal/VerifyPayloadModal.jsx b/packages/client/app/components/component-production/src/components/VerifyPayloadModal/VerifyPayloadModal.jsx index 419dff573..b3dc11a2c 100644 --- a/packages/client/app/components/component-production/src/components/VerifyPayloadModal/VerifyPayloadModal.jsx +++ b/packages/client/app/components/component-production/src/components/VerifyPayloadModal/VerifyPayloadModal.jsx @@ -12,10 +12,10 @@ import ReactCodeMirror from '@uiw/react-codemirror' import { json } from '@codemirror/lang-json' import { grid, th } from '@coko/client' import { isFunction } from 'lodash' + import { Spinner } from '../../../../shared' import { CloseButton, PopUpH2 } from '../styles' import { FlexRow } from '../../../../../globals' -import { color } from '../../../../../theme' import dataciteLogo from '../../../../../../public/datacite-logo-vector.svg' import { Button } from '../../../../pubsweet' import { CHECK_API_PAYLOAD } from '../../../../../queries' @@ -106,7 +106,7 @@ const Root = styled(FlexRow)` const Header = styled(FlexRow)` align-items: center; - background: ${color.brand1.base}; + background: ${th('color.brand1.base')}; justify-content: space-between; padding: ${grid(0.6)} ${grid(1)}; text-transform: uppercase; @@ -185,7 +185,8 @@ const ResultHeader = styled(FlexRow)` width: 100%; p { - color: ${p => (!p.$failure ? color.success.base : color.error.base)}; + color: ${p => + !p.$failure ? p.theme.color.success.base : p.theme.color.error.base}; } ` @@ -227,7 +228,7 @@ const ErrorsList = styled.ul` > li { background: ${th('colorBackground')}; border: 1px solid #ddd; - border-left: ${color.error.base} 5px solid; + border-left: ${th('color.error.base')} 5px solid; padding: ${grid(0.6)} ${grid(1.2)}; } ` diff --git a/packages/client/app/components/component-production/src/components/styles.jsx b/packages/client/app/components/component-production/src/components/styles.jsx index 729107702..2aad6eb80 100644 --- a/packages/client/app/components/component-production/src/components/styles.jsx +++ b/packages/client/app/components/component-production/src/components/styles.jsx @@ -1,8 +1,7 @@ /* stylelint-disable string-quotes */ import styled, { css } from 'styled-components' -import { grid } from '@coko/client' -import { color } from '../../../../theme' +import { th, grid } from '@coko/client' export const Info = styled.span` align-items: center; @@ -29,7 +28,7 @@ export const PopUpTextContainer = styled.div` justify-content: center; & p.linkurl { - background-color: ${color.gray95}; + background-color: ${th('color.gray95')}; border-radius: 2px; max-width: 300px; overflow-x: scroll; @@ -37,7 +36,7 @@ export const PopUpTextContainer = styled.div` white-space: nowrap; & a { - color: ${color.text}; + color: ${th('color.text')}; } } @@ -50,10 +49,10 @@ export const PopUpTextContainer = styled.div` } & button.copybutton { - background-color: ${color.backgroundA}; - border: ${color.brand1.base} solid 1px; + background-color: ${th('color.backgroundA')}; + border: ${th('color.brand1.base')} solid 1px; border-radius: 4px; - color: ${color.brand1.base}; + color: ${th('color.brand1.base')}; cursor: pointer; margin-top: 24px; padding: 12px 16px; @@ -62,17 +61,17 @@ export const PopUpTextContainer = styled.div` user-select: none; &:hover { - border-color: ${color.text}; - color: ${color.text}; + border-color: ${th('color.text')}; + color: ${th('color.text')}; } } ` export const CloseButton = styled.span` align-items: center; - background-color: ${color.brand1.base}; + background-color: ${th('color.brand1.base')}; border-radius: 100%; - color: ${color.textReverse}; + color: ${th('color.textReverse')}; display: inline-flex; height: var(--size); justify-content: center; @@ -119,8 +118,8 @@ export const HeadingCell = styled(Cell)` export const StyledFileRow = styled.div` align-items: center; - background-color: ${color.backgroundA}; - border-top: 1px solid ${color.gray90}; + background-color: ${th('color.backgroundA')}; + border-top: 1px solid ${th('color.gray90')}; column-gap: ${grid(2)}; display: flex; flex-direction: row; diff --git a/packages/client/app/components/component-production/src/components/uploadManager/UploadAsset.jsx b/packages/client/app/components/component-production/src/components/uploadManager/UploadAsset.jsx index dbf1306d0..b81d4cf27 100644 --- a/packages/client/app/components/component-production/src/components/uploadManager/UploadAsset.jsx +++ b/packages/client/app/components/component-production/src/components/uploadManager/UploadAsset.jsx @@ -8,7 +8,6 @@ import styled from 'styled-components' import { grid, th, serverUrl } from '@coko/client' -import { color } from '../../../../../theme' import { convertTimestampToRelativeDateString } from '../../../../../shared/dateUtils' import { Placeholder } from '../../../../component-dashboard/src/style' import { ConfirmationModal } from '../../../../component-modal/src/ConfirmationModal' @@ -44,8 +43,8 @@ export const StyledSectionRow = styled(SectionRow)` export const FilesHeading = styled.div` align-items: center; - background-color: ${color.backgroundA}; - border-top: 1px solid ${color.gray90}; + background-color: ${th('color.backgroundA')}; + border-top: 1px solid ${th('color.gray90')}; column-gap: ${grid(2)}; display: flex; flex-direction: row; diff --git a/packages/client/app/components/component-production/src/components/uploadManager/UploadComponent.jsx b/packages/client/app/components/component-production/src/components/uploadManager/UploadComponent.jsx index 316a69b7c..73796e660 100644 --- a/packages/client/app/components/component-production/src/components/uploadManager/UploadComponent.jsx +++ b/packages/client/app/components/component-production/src/components/uploadManager/UploadComponent.jsx @@ -4,8 +4,8 @@ import { useCallback, useState } from 'react' import { grid } from '@coko/client' import { useDropzone } from 'react-dropzone' -import styled from 'styled-components' -import { color } from '../../../../../theme' +import styled, { useTheme } from 'styled-components' + import { Icon, Spinner } from '../../../../shared' const Message = styled.div` @@ -37,6 +37,7 @@ const DropZoneContainer = styled.div` ` const UploadComponent = ({ uploadAssetsFn, label }) => { + const theme = useTheme() const [showSpinner, setShowSpinner] = useState(false) const onDrop = useCallback(async acceptedFiles => { @@ -53,7 +54,7 @@ const UploadComponent = ({ uploadAssetsFn, label }) => { <> {label} - + file-plus diff --git a/packages/client/app/components/component-published-artifact/components/ArticleArtifactPage.jsx b/packages/client/app/components/component-published-artifact/components/ArticleArtifactPage.jsx index cab485631..bb9a6a2b3 100644 --- a/packages/client/app/components/component-published-artifact/components/ArticleArtifactPage.jsx +++ b/packages/client/app/components/component-published-artifact/components/ArticleArtifactPage.jsx @@ -4,30 +4,30 @@ import PropTypes from 'prop-types' import { sanitize } from 'isomorphic-dompurify' import styled from 'styled-components' import { th } from '@coko/client' -import { color, space } from '../../../theme' import { Spinner, CommsErrorBanner, PlainOrRichText } from '../../shared' import { PUBLISHED_MANUSCRIPT_AND_FORMS } from '../../../queries' const Page = styled.div` - background: ${color.gray60}; + background: ${th('color.gray60')}; height: 100vh; overflow: hidden scroll; width: 100%; ` const Container = styled.div` - background: ${color.gray97}; - border: 1px solid ${color.brand1.shade25}; + background: ${th('color.gray97')}; + border: 1px solid ${th('color.brand1.shade25')}; border-radius: ${th('borderRadius')}; - margin: ${space.g} auto; + margin: ${th('spacing.g')} auto; max-width: 1000px; - padding: ${space.h} ${space.i} ${space.i} ${space.i}; + padding: ${th('spacing.h')} ${th('spacing.i')} ${th('spacing.i')} + ${th('spacing.i')}; width: 90%; & > h1 { - color: ${color.brand1.shade25}; + color: ${th('color.brand1.shade25')}; font-size: 180%; - margin: ${space.e} 0 ${space.f} 0; + margin: ${th('spacing.e')} 0 ${th('spacing.f')} 0; } ` diff --git a/packages/client/app/components/component-reporting/src/Report.jsx b/packages/client/app/components/component-reporting/src/Report.jsx index 2c35eee8f..5027a07df 100644 --- a/packages/client/app/components/component-reporting/src/Report.jsx +++ b/packages/client/app/components/component-reporting/src/Report.jsx @@ -2,18 +2,18 @@ /* eslint-disable react-hooks/rules-of-hooks, react-hooks/purity */ import PropTypes from 'prop-types' -import styled from 'styled-components' +import styled, { useTheme } from 'styled-components' import { forEach, map } from 'lodash' import { th, grid } from '@coko/client' import { Trans, useTranslation } from 'react-i18next' import i18next from 'i18next' + import { Icon } from '../../pubsweet' import DateRangePicker from './DateRangePicker' import SummaryReport from './SummaryReport' import Table from './Table' import SparkBar from './SparkBar' import Tooltip from './Tooltip' -import { color } from '../../../theme' const Page = styled.div` flex: 1 1 100%; @@ -28,7 +28,7 @@ const Select = styled.select` ` const Heading = styled.div` - color: ${color.brand1.base}; + color: ${th('color.brand1.base')}; font-family: ${th('fontReading')}; font-size: ${th('fontSizeHeading3')}; line-height: ${th('lineHeightHeading3')}; @@ -36,12 +36,12 @@ const Heading = styled.div` ` const MinorNote = styled.span` - color: ${color.gray50}; + color: ${th('color.gray50')}; font-size: 80%; ` export const Content = styled.div` - background-color: ${color.backgroundC}; + background-color: ${th('color.backgroundC')}; border-radius: ${th('borderRadius')}; box-shadow: ${th('boxShadow')}; ` @@ -53,12 +53,12 @@ const SelectionLine = styled.div` ` const ReviewNote = styled.div` - color: ${color.gray50}; + color: ${th('color.gray50')}; font-size: ${th('fontSizeBaseSmall')}; line-height: ${th('lineHeightBaseSmall')}; & strong { - color: ${color.text}; + color: ${th('color.text')}; font-weight: normal; } ` @@ -158,7 +158,7 @@ const InProgressIcon = () => { ) } -const getTableDataWithSparkBars = (rows, labelMapper) => { +const getTableDataWithSparkBars = (rows, labelMapper, theme) => { if (rows.length < 1) return [] // Find maximum values in each column (or 0 for non-numeric or negative data) @@ -178,7 +178,7 @@ const getTableDataWithSparkBars = (rows, labelMapper) => { return labelMapper ? labelMapper(val, key) : val return ( { const { t } = useTranslation() + const theme = useTheme() if (reportType === 'Summary') { return ( @@ -284,15 +285,19 @@ const getReport = ( : null, })) - const rows = getTableDataWithSparkBars(data, (val, key) => { - if (['editors', 'authors'].includes(key)) - return val - .map(u => u.username || u.email || u.defaultIdentity.identifier) - .join(', ') - if (key === 'reviews') return renderReviewInfo(val) + const rows = getTableDataWithSparkBars( + data, + (val, key) => { + if (['editors', 'authors'].includes(key)) + return val + .map(u => u.username || u.email || u.defaultIdentity.identifier) + .join(', ') + if (key === 'reviews') return renderReviewInfo(val) - return val - }) + return val + }, + theme, + ) return ( ) } @@ -357,6 +366,7 @@ const getReport = ( /> ) }, + theme, )} /> ) @@ -375,7 +385,11 @@ const getReport = ( { heading: t('msStatus.accepted'), name: 'acceptedCount', width: '7em', flexGrow: 1 }, { heading: t('msStatus.published'), name: 'publishedCount', width: '7em', flexGrow: 1 }, ]} - rows={getTableDataWithSparkBars(getAuthorsData(startDate, endDate))} + rows={getTableDataWithSparkBars( + getAuthorsData(startDate, endDate), + undefined, + theme, + )} /> ) } diff --git a/packages/client/app/components/component-reporting/src/SummaryReport.jsx b/packages/client/app/components/component-reporting/src/SummaryReport.jsx index 06e9bd91f..7cdf6ae34 100644 --- a/packages/client/app/components/component-reporting/src/SummaryReport.jsx +++ b/packages/client/app/components/component-reporting/src/SummaryReport.jsx @@ -3,11 +3,11 @@ import PropTypes from 'prop-types' import Color from 'color' import { th } from '@coko/client' import { Trans, useTranslation } from 'react-i18next' + import CardCollection, { Card } from './CardCollection' import ConcentricStepsChart from './ConcentricStepsChart' import DurationsChart from './DurationsChart' import Tooltip from './Tooltip' -import { color } from '../../../theme' const ChartCard = styled(Card)` align-items: center; @@ -23,7 +23,7 @@ const BigNumbersCard = styled(ChartCard)` ` const CardHeader = styled.div` - color: ${color.brand1.base}; + color: ${th('color.brand1.base')}; font-size: 120%; margin-top: 1em; text-align: center; @@ -44,7 +44,7 @@ const NoteCenter = styled.div` ` const Note = styled.div` - color: ${color.gray50}; + color: ${th('color.gray50')}; font-size: ${th('fontSizeBaseSmall')}; line-height: ${th('lineHeightBaseSmall')}; ` diff --git a/packages/client/app/components/component-reporting/src/TableRow.jsx b/packages/client/app/components/component-reporting/src/TableRow.jsx index 03444fe66..ac9ff8f9d 100644 --- a/packages/client/app/components/component-reporting/src/TableRow.jsx +++ b/packages/client/app/components/component-reporting/src/TableRow.jsx @@ -1,11 +1,11 @@ import styled, { css } from 'styled-components' import PropTypes from 'prop-types' -import { color } from '../../../theme' +import { th } from '@coko/client' const Row = styled.div` align-content: stretch; align-items: stretch; - border: 1px solid ${color.gray80}; + border: 1px solid ${th('color.gray80')}; border-bottom: none; display: flex; flex-direction: row; @@ -19,25 +19,25 @@ const Row = styled.div` ` : css` &:hover { - box-shadow: inset 0 0 4px ${color.brand1.base}; + box-shadow: inset 0 0 4px ${th('color.brand1.base')}; } `} width: 100%; &:last-of-type { - border-bottom: 1px solid ${color.gray80}; + border-bottom: 1px solid ${th('color.gray80')}; } ` const Cell = styled.div` - border-right: 1px solid ${color.gray80}; + border-right: 1px solid ${th('color.gray80')}; flex: ${props => props.flexGrow} 1 ${props => props.width}; ${props => props.isHeading && css` - background-color: ${color.brand1.tint70}; + background-color: ${th('color.brand1.tint70')}; line-height: 120%; `} diff --git a/packages/client/app/components/component-review/src/components/DeclinedReviewer.jsx b/packages/client/app/components/component-review/src/components/DeclinedReviewer.jsx index bf8423d8d..eab76df46 100644 --- a/packages/client/app/components/component-review/src/components/DeclinedReviewer.jsx +++ b/packages/client/app/components/component-review/src/components/DeclinedReviewer.jsx @@ -11,7 +11,6 @@ import { Primary, Secondary } from '../../../shared' import { convertTimestampToRelativeDateString } from '../../../../shared/dateUtils' import { UserAction } from '../../../component-manuscripts-table/src/style' import InviteDeclineModal from './InviteDeclineModal' -import { color } from '../../../../theme' const DeclinedReviewerContainer = styled.div` display: flex; @@ -34,12 +33,12 @@ const Date = styled.div` ` const TextChange = styled.div` - color: ${color.brand2.base}; + color: ${th('color.brand2.base')}; ` const EmailDisplay = styled(Secondary)` align-items: center; - color: ${color.brand2.base}; + color: ${th('color.brand2.base')}; display: flex; margin-left: calc(${th('gridUnit')} * 2); ` diff --git a/packages/client/app/components/component-review/src/components/InviteDeclineModal.jsx b/packages/client/app/components/component-review/src/components/InviteDeclineModal.jsx index 5b93956d9..b251a65e4 100644 --- a/packages/client/app/components/component-review/src/components/InviteDeclineModal.jsx +++ b/packages/client/app/components/component-review/src/components/InviteDeclineModal.jsx @@ -6,7 +6,6 @@ import { convertTimestampToDateString } from '../../../../shared/dateUtils' import { UserAvatar } from '../../../component-avatar/src' import Modal from '../../../component-modal/src/Modal' import { ConfigurableStatus } from '../../../shared' -import { color } from '../../../../theme' const ModalBody = styled.div` display: flex; @@ -67,7 +66,8 @@ const DeclinedBadge = styled(ConfigurableStatus)` ` const TextChange = styled.div` - color: ${props => (props.gray ? color.brand2.base : color.text)}; + color: ${props => + props.gray ? props.theme.color.brand2.base : props.theme.color.text}; padding: 5px; ` diff --git a/packages/client/app/components/component-review/src/components/Publish.jsx b/packages/client/app/components/component-review/src/components/Publish.jsx index 96f4ff85d..b10d59286 100644 --- a/packages/client/app/components/component-review/src/components/Publish.jsx +++ b/packages/client/app/components/component-review/src/components/Publish.jsx @@ -5,14 +5,12 @@ import { useState, useContext } from 'react' import { Trans, useTranslation } from 'react-i18next' import i18next from 'i18next' import styled from 'styled-components' -import { grid } from '@coko/client' - +import { th, grid } from '@coko/client' import { Formik } from 'formik' import { ConfigContext } from '../../../config/src' import { RadioBox } from '../../../component-formbuilder/src/components/builderComponents' import { Legend } from '../../../component-formbuilder/src/components/style' - import { Button, ValidatedFieldFormik } from '../../../pubsweet' import { Title, @@ -21,12 +19,10 @@ import { SectionActionInfo, SectionAction, } from './style' - import { SectionContent } from '../../../shared' import Alert from './publishing/Alert' import PublishingResponse from './publishing/PublishingResponse' import { getLanguages } from '../../../../i18n' -import { color } from '../../../../theme' import { FlexRow } from '../../../../globals' const ActionButtonsWrapper = styled(FlexRow)` @@ -35,21 +31,21 @@ const ActionButtonsWrapper = styled(FlexRow)` const UnpublishButton = styled(Button)` background: #fff; - color: ${color.error.base}; + color: ${th('color.error.base')}; cursor: pointer; - outline: 1px solid ${color.error.base}; + outline: 1px solid ${th('color.error.base')}; &:hover, &:focus, &:active { - background: ${color.error.base}; + background: ${th('color.error.base')}; color: #fff; } ` const PublishButton = styled(Button)` cursor: pointer; - outline: 1px solid ${color.brand1.base}; + outline: 1px solid ${th('color.brand1.base')}; ` const PublishWrapper = styled.div` diff --git a/packages/client/app/components/component-review/src/components/metadata/ReadonlyFormTemplate.jsx b/packages/client/app/components/component-review/src/components/metadata/ReadonlyFormTemplate.jsx index 4aaadd668..023bfc291 100644 --- a/packages/client/app/components/component-review/src/components/metadata/ReadonlyFormTemplate.jsx +++ b/packages/client/app/components/component-review/src/components/metadata/ReadonlyFormTemplate.jsx @@ -2,9 +2,9 @@ import PropTypes from 'prop-types' import { useTranslation } from 'react-i18next' -import styled from 'styled-components' +import styled, { useTheme } from 'styled-components' + import ReadonlyFieldData from './ReadonlyFieldData' -import { color } from '../../../../../theme' import { Title, SectionHeader, @@ -31,6 +31,7 @@ const ReadonlyFormTemplate = ({ copyHandleBarsCode = false, isCollaborativeForm = false, }) => { + const theme = useTheme() const { t } = useTranslation() const isChildrenEmpty = form.children.length === 0 @@ -102,7 +103,7 @@ const ReadonlyFormTemplate = ({ {element.name} {' '} - + file-plus diff --git a/packages/client/app/components/component-review/src/components/review/Review.jsx b/packages/client/app/components/component-review/src/components/review/Review.jsx index a4e3ecc31..ffc87efbc 100644 --- a/packages/client/app/components/component-review/src/components/review/Review.jsx +++ b/packages/client/app/components/component-review/src/components/review/Review.jsx @@ -4,12 +4,13 @@ import { useState } from 'react' import PropTypes from 'prop-types' import styled from 'styled-components' import { useTranslation } from 'react-i18next' +import { th } from '@coko/client' + import { Icon } from '../../../../pubsweet' import ReadonlyFormTemplate from '../metadata/ReadonlyFormTemplate' import { ensureJsonIsParsed } from '../../../../../shared/objectUtils' import { SectionHeader, Title } from '../style' import { LooseRow, SectionContent } from '../../../../shared' -import theme, { color } from '../../../../../theme' const Heading = styled.h4`` @@ -20,16 +21,16 @@ const Container = styled.div` ` const StyledStrong = styled.strong` - color: ${color.gray40}; + color: ${th('color.gray40')}; ` const UnsubmittedBannerBlock = styled.div` - background: ${color.warning.tint50}; + background: ${th('color.warning.tint50')}; border-radius: 8px; - color: ${color.warning.shade50}; - font-size: ${theme.fontSizeBaseSmall}; + color: ${th('color.warning.shade50')}; + font-size: ${th('fontSizeBaseSmall')}; font-style: italic; - line-height: ${theme.lineHeightBaseSmall}; + line-height: ${th('lineHeightBaseSmall')}; padding: 2px 20px; width: fit-content; ` diff --git a/packages/client/app/components/component-review/src/components/reviewPreview/ReviewPreview.jsx b/packages/client/app/components/component-review/src/components/reviewPreview/ReviewPreview.jsx index 3eb328491..cb8f69d43 100644 --- a/packages/client/app/components/component-review/src/components/reviewPreview/ReviewPreview.jsx +++ b/packages/client/app/components/component-review/src/components/reviewPreview/ReviewPreview.jsx @@ -1,10 +1,11 @@ /* eslint-disable react/prop-types */ import PropTypes from 'prop-types' -import styled from 'styled-components' +import styled, { useTheme } from 'styled-components' import { useNavigate } from 'react-router-dom' -import { grid } from '@coko/client' +import { th, grid } from '@coko/client' import { useTranslation } from 'react-i18next' + import ReadonlyFormTemplate from '../metadata/ReadonlyFormTemplate' import { Heading, @@ -13,10 +14,9 @@ import { PlainOrRichText, WidthLimiter, } from '../../../../shared' -import { color } from '../../../../../theme' const Page = styled.div` - background: ${color.backgroundC}; + background: ${th('color.backgroundC')}; height: 100vh; overflow-y: scroll; padding: ${grid(2)}; @@ -25,7 +25,7 @@ const Page = styled.div` const IconLink = styled.div` align-items: center; - color: ${color.brand1.base}; + color: ${th('color.brand1.base')}; cursor: pointer; display: flex; flex-direction: row; @@ -38,6 +38,7 @@ const ReviewPreview = ({ submissionForm, threadedDiscussionProps, }) => { + const theme = useTheme() const navigate = useNavigate() const { t } = useTranslation() return ( @@ -56,7 +57,7 @@ const ReviewPreview = ({ threadedDiscussionProps={threadedDiscussionProps} /> navigate(-1)}> - + arrow-left {t('reviewPreviewPage.Back')} diff --git a/packages/client/app/components/component-review/src/components/reviewers/KanbanCard.jsx b/packages/client/app/components/component-review/src/components/reviewers/KanbanCard.jsx index 9a9174523..ad43431c0 100644 --- a/packages/client/app/components/component-review/src/components/reviewers/KanbanCard.jsx +++ b/packages/client/app/components/component-review/src/components/reviewers/KanbanCard.jsx @@ -6,19 +6,19 @@ import { useState, useContext } from 'react' import { Mail } from 'react-feather' import styled from 'styled-components' import { useTranslation } from 'react-i18next' + import { ConfigContext } from '../../../../config/src' import { isCurrentUserCollaborative } from '../review/util' import { convertTimestampToRelativeDateString } from '../../../../../shared/dateUtils' import { UserAvatar } from '../../../../component-avatar/src' import ReviewDetailsModal from '../../../../component-review-detail-modal/src' -import { color } from '../../../../../theme' import { ColorBadge } from '../../../../shared' const Card = styled.div.attrs({ 'data-testid': 'kanban-card', })` - background-color: ${color.gray97}; - border-bottom: 0.8px solid ${color.gray70}; + background-color: ${th('color.gray97')}; + border-bottom: 0.8px solid ${th('color.gray70')}; border-radius: 8px; display: flex; flex-direction: row; @@ -29,7 +29,7 @@ const Card = styled.div.attrs({ width: 100%; &:hover { - box-shadow: 0 9px 5px -6px ${color.gray70}; + box-shadow: 0 9px 5px -6px ${th('color.gray70')}; cursor: pointer; transition: 0.3s ease; z-index: 1; @@ -48,7 +48,7 @@ const NameDisplay = styled.div` ` const DateDisplay = styled.div` - color: ${color.gray50}; + color: ${th('color.gray50')}; font-size: 12px; line-height: 1.2; ` @@ -63,8 +63,8 @@ const EmailDisplay = styled(DateDisplay)` align-items: center; color: ${props => props.invitationStatus === 'rejected' - ? th('colorError') - : color.brand1.base}; + ? props.theme.colorError + : props.theme.color.brand1.base}; display: flex; margin-top: calc(${th('gridUnit')} / 2); ` diff --git a/packages/client/app/components/component-review/src/components/style.jsx b/packages/client/app/components/component-review/src/components/style.jsx index ab648870a..89cf49b97 100644 --- a/packages/client/app/components/component-review/src/components/style.jsx +++ b/packages/client/app/components/component-review/src/components/style.jsx @@ -1,7 +1,6 @@ import styled, { css } from 'styled-components' import { th, grid } from '@coko/client' import { Button } from '../../../pubsweet' -import theme, { color } from '../../../../theme' import { RoundIconButton } from '../../../shared' export const AdminSection = styled.div` @@ -45,7 +44,7 @@ export const EditorWrapper = styled.div` ` export const FormStatus = styled.div` - color: ${color.brand2.base}; + color: ${th('color.brand2.base')}; line-height: ${grid(5)}; text-align: center; ` @@ -99,12 +98,12 @@ export const Cell = styled.span` ` export const Affiliation = styled.span` - color: ${color.gray40}; + color: ${th('color.gray40')}; margin-left: 0.5em; ` export const Email = styled.span` - color: ${color.brand1.base}; + color: ${th('color.brand1.base')}; margin-left: 1em; ` @@ -138,22 +137,22 @@ export const AssignedAuthorForProofingLogsContainer = styled.div` export const AssignedAuthorForProofingLogsToggle = styled.button` background-color: transparent; border: none; - color: ${color.brand1.base}; - font-size: ${theme.fontSizeBaseSmall}; + color: ${th('color.brand1.base')}; + font-size: ${th('fontSizeBaseSmall')}; padding: 10px; text-decoration: underline; ` export const AssignedAuthorForProofingLogs = styled.div` - color: ${color.text}; - font-size: ${theme.fontSizeBaseSmall}; + color: ${th('color.text')}; + font-size: ${th('fontSizeBaseSmall')}; margin: 10px; text-align: right; ` export const AssignedAuthorForProofingInfo = styled.div` - color: ${color.text}; - font-size: ${theme.fontSizeBaseSmall}; + color: ${th('color.text')}; + font-size: ${th('fontSizeBaseSmall')}; margin: 8px 0; ` diff --git a/packages/client/app/components/component-submit/src/components/AuthorsInput.jsx b/packages/client/app/components/component-submit/src/components/AuthorsInput.jsx index dccc109f1..0e4c96429 100644 --- a/packages/client/app/components/component-submit/src/components/AuthorsInput.jsx +++ b/packages/client/app/components/component-submit/src/components/AuthorsInput.jsx @@ -16,8 +16,6 @@ import { validateAuthor, validateAuthors, } from '../../../../shared/authorsFieldDefinitions' - -import theme, { color } from '../../../../theme' import { FlexRow } from '../../../../globals' import useAuthorsFieldQueries from './hooks/useAuthorsInputQueries' @@ -40,8 +38,8 @@ const Wrapper = styled.div` ` const AuthorContainer = styled.div` - border: 1px solid ${color.gray80}; - border-radius: ${theme.borderRadius}; + border: 1px solid ${th('color.gray80')}; + border-radius: ${th('borderRadius')}; display: flex; ${({ fullWidth }) => (fullWidth ? 'width: 100%' : 'max-width: 1000px')}; padding: ${grid(2)}; diff --git a/packages/client/app/components/component-submit/src/components/LocalContext.jsx b/packages/client/app/components/component-submit/src/components/LocalContext.jsx index 0f9bc8056..37a8b3e31 100644 --- a/packages/client/app/components/component-submit/src/components/LocalContext.jsx +++ b/packages/client/app/components/component-submit/src/components/LocalContext.jsx @@ -4,10 +4,10 @@ import { useQuery } from '@apollo/client/react' import { last } from 'lodash' import styled from 'styled-components' import { grid, th, uuid } from '@coko/client' + import { Spinner } from '../../../shared' import { ConfigContext } from '../../../config/src' import { Button } from '../../../pubsweet' -import { color } from '../../../../theme' import { SubNote } from '../style' import { SEARCH_LOCAL_CONTEXT } from '../../../../queries' @@ -21,7 +21,7 @@ const Input = styled.input` width: 100%; &:focus { - border: 1px solid ${color.brand1.base}; + border: 1px solid ${th('color.brand1.base')}; outline: 0; } @@ -44,7 +44,7 @@ const StyledButton = styled(Button)` ` const TitleLabel = styled.div` - color: ${color.brand1.base}; + color: ${th('color.brand1.base')}; font-size: 24px; margin-bottom: ${grid(1)}; ` @@ -55,7 +55,7 @@ const NoProjectFound = styled.span` ` const LocalContextResultContainer = styled.div` - border: 1px solid ${color.brand1.base}; + border: 1px solid ${th('color.brand1.base')}; display: flex; flex-direction: column; margin-bottom: ${grid(2)}; @@ -69,7 +69,7 @@ const ItemContainer = styled.div` ` const ItemTag = styled.span` - color: ${color.brand1.base}; + color: ${th('color.brand1.base')}; font-weight: 700; white-space: pre; ` diff --git a/packages/client/app/components/component-submit/src/components/MultipleDoi.jsx b/packages/client/app/components/component-submit/src/components/MultipleDoi.jsx index 9e0d268d6..28756d391 100644 --- a/packages/client/app/components/component-submit/src/components/MultipleDoi.jsx +++ b/packages/client/app/components/component-submit/src/components/MultipleDoi.jsx @@ -9,15 +9,13 @@ import { DeleteControl, TextInput } from '../../../shared' import { Button } from '../../../pubsweet' import { fields, validateDoiField } from '../../../../shared/doiFieldDefinition' -import theme from '../../../../theme' - const Doi = styled.div` align-items: flex-start; display: grid; gap: 36px; grid-template-columns: 1fr 1fr; - margin-bottom: ${theme.spacing.f}; - margin-top: ${theme.spacing.e}; + margin-bottom: ${th('spacing.f')}; + margin-top: ${th('spacing.e')}; position: relative; width: 600px; diff --git a/packages/client/app/components/component-submit/src/components/UploadManuscript.jsx b/packages/client/app/components/component-submit/src/components/UploadManuscript.jsx index c32e5cd26..8d7d7515a 100644 --- a/packages/client/app/components/component-submit/src/components/UploadManuscript.jsx +++ b/packages/client/app/components/component-submit/src/components/UploadManuscript.jsx @@ -11,15 +11,14 @@ import { ConfigContext } from '../../../config/src' import { XpubContext } from '../../../xpub-with-context/src' import upload from '../upload' import { Dropzone, Action, Spinner } from '../../../shared' -import { color } from '../../../../theme' -const StatusIcon = withTheme(({ children }) => ( - {children} +const StatusIcon = withTheme(({ children, theme }) => ( + {children} )) const Status = styled.div` align-items: center; - color: ${color.brand1.base}; + color: ${th('color.brand1.base')}; display: inline-flex; margin-top: -2px; ` @@ -113,12 +112,12 @@ const Root = styled.div` &:hover ${StatusIdle} { circle { - fill: ${color.brand1.base}; - stroke: ${color.brand1.base}; + fill: ${th('color.brand1.base')}; + stroke: ${th('color.brand1.base')}; } line { - stroke: ${color.textReverse}; + stroke: ${th('color.textReverse')}; } } ` @@ -136,7 +135,7 @@ const Error = styled.div` ` const Info = styled.div` - color: ${color.brand1.base}; + color: ${th('color.brand1.base')}; font-size: 2em; font-weight: 400; @@ -148,7 +147,7 @@ const Info = styled.div` ` const SubInfo = styled.div` - color: ${color.gray20}; + color: ${th('color.gray20')}; line-height: 32px; text-align: center; ` diff --git a/packages/client/app/components/component-submit/src/style.jsx b/packages/client/app/components/component-submit/src/style.jsx index 71c64cb15..6b8e871d5 100644 --- a/packages/client/app/components/component-submit/src/style.jsx +++ b/packages/client/app/components/component-submit/src/style.jsx @@ -1,6 +1,5 @@ import styled from 'styled-components' import { th, grid } from '@coko/client' -import theme from '../../../theme' export { Container, Content, Heading } from '../../shared' @@ -27,7 +26,7 @@ export const Section = styled.section.attrs(props => ({ export const Legend = styled.div` font-size: ${th('fontSizeBase')}; font-weight: 500; - margin-bottom: ${theme.spacing.e}; + margin-bottom: ${th('spacing.e')}; ` export const SubNote = styled.span` diff --git a/packages/client/app/components/component-task-manager/src/AssigneeDropdown.jsx b/packages/client/app/components/component-task-manager/src/AssigneeDropdown.jsx index b17ac8a25..db8c34e5f 100644 --- a/packages/client/app/components/component-task-manager/src/AssigneeDropdown.jsx +++ b/packages/client/app/components/component-task-manager/src/AssigneeDropdown.jsx @@ -5,8 +5,9 @@ import { useState, useEffect, useCallback } from 'react' import styled from 'styled-components' import { debounce } from 'lodash' import { useTranslation } from 'react-i18next' +import { th } from '@coko/client' + import { Select, TextInput } from '../../shared' -import theme from '../../../theme' import tasksJson from '../../../../config/journal/tasks.json' with { type: 'json' } @@ -20,7 +21,7 @@ const AssigneeCellContainer = styled.div` const BaseAssigneeCell = styled.div` > div > div { - font-size: ${theme.fontSizeBase}; + font-size: ${th('fontSizeBase')}; line-height: 1.25; &:nth-child(2) { diff --git a/packages/client/app/components/component-task-manager/src/DueDateField.jsx b/packages/client/app/components/component-task-manager/src/DueDateField.jsx index 843758a9f..2d9fdf0c0 100644 --- a/packages/client/app/components/component-task-manager/src/DueDateField.jsx +++ b/packages/client/app/components/component-task-manager/src/DueDateField.jsx @@ -5,17 +5,17 @@ import { useContext } from 'react' import styled from 'styled-components' import moment from 'moment-timezone' +import { th } from '@coko/client' import { CompactDetailLabel, MinimalDatePicker } from '../../shared' import { ConfigContext } from '../../config/src' import { transposeFromLocalToTimezone } from '../../../shared/dateUtils' -import theme, { color } from '../../../theme' const BaseDueDateCell = styled.div` align-items: center; /* stylelint-disable-next-line declaration-no-important */ - background: ${color.gray99} !important; - border: 1px solid ${color.gray80}; - border-radius: ${theme.borderRadius}; + background: ${th('color.gray99')} !important; + border: 1px solid ${th('color.gray80')}; + border-radius: ${th('borderRadius')}; box-shadow: inset 0 0 4px rgb(0 0 0 / 7%); display: flex; justify-content: flex-start; @@ -30,13 +30,13 @@ const BaseDueDateCell = styled.div` } button { - color: ${color.gray20}; + color: ${th('color.gray20')}; display: flex; flex-direction: row-reverse; - font-size: ${theme.fontSizeBase}; + font-size: ${th('fontSizeBase')}; justify-content: space-around; letter-spacing: 0.01em; - line-height: ${theme.lineHeightBase}; + line-height: ${th('lineHeightBase')}; width: 100%; svg { diff --git a/packages/client/app/components/component-task-manager/src/StatusDropdown.jsx b/packages/client/app/components/component-task-manager/src/StatusDropdown.jsx index 05c4e2782..3b721753d 100644 --- a/packages/client/app/components/component-task-manager/src/StatusDropdown.jsx +++ b/packages/client/app/components/component-task-manager/src/StatusDropdown.jsx @@ -12,18 +12,19 @@ import { ChevronDown, } from 'react-feather' import { useTranslation } from 'react-i18next' +import { th } from '@coko/client' + import { UPDATE_TASK_STATUS } from '../../../queries' -import theme, { color } from '../../../theme' const StartButton = styled.button` align-items: center; - background: ${color.brand1.base}; + background: ${th('color.brand1.base')}; border-radius: 6px; box-shadow: 0 2px 2px rgb(0 0 0 / 25%); color: white; display: flex; - font-family: ${theme.fontHeading}; - font-size: ${theme.fontSizeBase}; + font-family: ${th('fontHeading')}; + font-size: ${th('fontSizeBase')}; font-style: normal; font-weight: 500; height: 45px; @@ -37,7 +38,7 @@ const StartButton = styled.button` const BaseDropdown = styled(Dropdown)` border-radius: 4px; box-shadow: 0 2px 2px rgb(0 0 0 / 25%); - font-family: ${theme.fontHeading}; + font-family: ${th('fontHeading')}; font-size: 14.5px; font-style: normal; font-weight: 500; @@ -83,16 +84,16 @@ const DropdownLabel = styled.div` ` const InProgressDropdown = styled(BaseDropdown)` - border: 2px solid ${color.gray40}; + border: 2px solid ${th('color.gray40')}; /* stylelint-disable-next-line selector-class-pattern */ .Dropdown-placeholder { - color: ${color.gray40}; + color: ${th('color.gray40')}; } /* stylelint-disable-next-line selector-class-pattern */ .Dropdown-arrow-wrapper > svg { - stroke: ${color.gray40}; + stroke: ${th('color.gray40')}; } ` @@ -111,16 +112,16 @@ const PausedDropdown = styled(BaseDropdown)` ` const DoneDropdown = styled(BaseDropdown)` - border: 2px solid ${color.brand1.base}; + border: 2px solid ${th('color.brand1.base')}; /* stylelint-disable-next-line selector-class-pattern */ .Dropdown-placeholder { - color: ${color.brand1.base}; + color: ${th('color.brand1.base')}; } /* stylelint-disable-next-line selector-class-pattern */ .Dropdown-arrow-wrapper > svg { - stroke: ${color.brand1.base}; + stroke: ${th('color.brand1.base')}; } ` diff --git a/packages/client/app/components/component-task-manager/src/Task.jsx b/packages/client/app/components/component-task-manager/src/Task.jsx index d89050d89..f4f519625 100644 --- a/packages/client/app/components/component-task-manager/src/Task.jsx +++ b/packages/client/app/components/component-task-manager/src/Task.jsx @@ -6,7 +6,7 @@ import { useState, useEffect, useContext, useRef, useCallback } from 'react' import PropTypes from 'prop-types' import moment from 'moment-timezone' -import styled, { css } from 'styled-components' +import styled, { css, useTheme } from 'styled-components' import { useSortable } from '@dnd-kit/sortable' import { CSS } from '@dnd-kit/utilities' import { Circle, CheckCircle, MoreVertical } from 'react-feather' @@ -30,7 +30,6 @@ import DueDateField from './DueDateField' import StatusDropdown from './StatusDropdown' import TaskEditModal from './TaskEditModal' import CounterField from '../../shared/CounterField' -import { color } from '../../../theme' const TaskRow = styled.div` align-items: flex-start; @@ -96,12 +95,12 @@ const Handle = styled.div` const DragIcon = styled(DragVerticalIcon)` height: 20px; - stroke: ${color.gray40}; + stroke: ${th('color.gray40')}; stroke-width: 1.8; width: 20px; &:hover { - stroke: ${color.brand1.base}; + stroke: ${th('color.brand1.base')}; } ` @@ -111,18 +110,18 @@ const Ellipsis = styled(MoreVertical)` width: 20px; &:hover path { - fill: ${color.brand1.base}; + fill: ${th('color.brand1.base')}; } ` const ModalContainer = styled(LooseColumn)` - background-color: ${color.backgroundA}; + background-color: ${th('color.backgroundA')}; padding: ${grid(2.5)} ${grid(3)}; z-index: 10000; ` const ActionDialog = styled.div` - background: ${color.backgroundA}; + background: ${th('color.backgroundA')}; border-radius: 6px; box-shadow: 0 0 8px rgb(0 0 0 / 25%); left: -80px; @@ -147,7 +146,7 @@ const BaseLabel = styled.div` &:hover, &:focus { - background-color: ${color.gray95}; + background-color: ${th('color.gray95')}; } ` @@ -247,6 +246,7 @@ const Task = ({ const dragStyle = { transform: CSS.Transform.toString(transform), transition } + const theme = useTheme() const config = useContext(ConfigContext) const [isConfirmingDelete, setIsConfirmingDelete] = useState(false) const [isEditTaskMetaModal, setIsEditTaskMetaModal] = useState(false) @@ -437,9 +437,9 @@ const Task = ({ } > {isDone ? ( - + ) : ( - + )} )} diff --git a/packages/client/app/components/component-task-manager/src/TaskEditModal.jsx b/packages/client/app/components/component-task-manager/src/TaskEditModal.jsx index cabe4ce67..4fe9a3eff 100644 --- a/packages/client/app/components/component-task-manager/src/TaskEditModal.jsx +++ b/packages/client/app/components/component-task-manager/src/TaskEditModal.jsx @@ -7,7 +7,7 @@ import PropTypes from 'prop-types' import styled from 'styled-components' import { debounce } from 'lodash' import { useTranslation } from 'react-i18next' -import { grid, uuid } from '@coko/client' +import { th, grid, uuid } from '@coko/client' import { ActionButton, TextInput } from '../../shared' import FormWaxEditor from '../../component-formbuilder/src/components/FormWaxEditor' import TaskNotificationDetails from './TaskNotificationDetails' @@ -16,7 +16,6 @@ import DueDateField from './DueDateField' import Modal from '../../component-modal/src/Modal' import SecondaryActionButton from '../../shared/SecondaryActionButton' import CounterField from '../../shared/CounterField' -import theme, { color } from '../../../theme' import { convertTimestampToDateString } from '../../../shared/dateUtils' const TitleCell = styled.div` @@ -57,9 +56,9 @@ const TaskSectionContainer = styled.div` ` const TaskTitle = styled.div` - color: ${color.gray20}; - font-family: ${theme.fontInterface}; - font-size: ${theme.fontSizeBase}; + color: ${th('color.gray20')}; + font-family: ${th('fontInterface')}; + font-size: ${th('fontSizeBase')}; font-style: normal; font-weight: 500; letter-spacing: 0.01em; @@ -106,15 +105,15 @@ const TaskNotificationLogsContainer = styled.div` const NotificationLogsToggle = styled.button` background-color: transparent; border: none; - color: ${color.brand1.base}; - font-size: ${theme.fontSizeBaseSmall}; + color: ${th('color.brand1.base')}; + font-size: ${th('fontSizeBaseSmall')}; padding: 20px 10px; text-decoration: underline; ` const NotificationLogs = styled.div` - color: ${color.brand1.base}; - font-size: ${theme.fontSizeBaseSmall}; + color: ${th('color.brand1.base')}; + font-size: ${th('fontSizeBaseSmall')}; margin: 10px 0; text-align: left; ` diff --git a/packages/client/app/components/component-task-manager/src/TaskNotificationDetails.jsx b/packages/client/app/components/component-task-manager/src/TaskNotificationDetails.jsx index edd30a1a8..b0c5c639e 100644 --- a/packages/client/app/components/component-task-manager/src/TaskNotificationDetails.jsx +++ b/packages/client/app/components/component-task-manager/src/TaskNotificationDetails.jsx @@ -6,12 +6,12 @@ import { useCallback, useContext, useEffect, useState } from 'react' import styled from 'styled-components' import { debounce } from 'lodash' import { useTranslation } from 'react-i18next' +import { th } from '@coko/client' import SelectEmailTemplate from '../../component-review/src/components/emailNotifications/SelectEmailTemplate' import { RoundIconButton, Select, TextInput } from '../../shared' import SecondaryActionButton from '../../shared/SecondaryActionButton' import CounterFieldWithOptions from '../../shared/CounterFieldWithOptions' import CounterField from '../../shared/CounterField' -import theme, { color } from '../../../theme' import { ConfigContext } from '../../config/src' import { ifReviewInviteThenAssignRecipientsAsReviewers } from './notificationUtils' @@ -20,9 +20,9 @@ import tasksJson from '../../../../config/journal/tasks.json' with { type: 'json const { emailNotifications } = tasksJson const TaskTitle = styled.div` - color: ${color.gray20}; + color: ${th('color.gray20')}; font-family: Roboto, sans-serif; - font-size: ${theme.fontSizeBase}; + font-size: ${th('fontSizeBase')}; font-style: normal; font-weight: 500; letter-spacing: 0.01em; @@ -47,7 +47,7 @@ const EmailTemplateFieldContainer = styled(TaskFieldsContainer)` flex: 1 1 15em; div { - font-size: ${theme.fontSizeBase}; + font-size: ${th('fontSizeBase')}; } /* stylelint-disable-next-line no-descending-specificity */ @@ -90,7 +90,7 @@ const RoundIconButtonContainer = styled.div` const NotificationDeadlineCell = styled.div` align-items: center; - color: ${props => (props.disabled ? color.gray60 : 'inherit')}; + color: ${props => (props.disabled ? props.theme.color.gray60 : 'inherit')}; display: flex; height: 45px; @@ -133,7 +133,7 @@ const AssigneeCell = styled.div` /* stylelint-disable-next-line no-descending-specificity */ > div > div { - font-size: ${theme.fontSizeBase}; + font-size: ${th('fontSizeBase')}; line-height: 1.25; /* stylelint-disable-next-line no-descending-specificity */ diff --git a/packages/client/app/components/shared/Action.jsx b/packages/client/app/components/shared/Action.jsx index b65c1b113..951e6ae21 100644 --- a/packages/client/app/components/shared/Action.jsx +++ b/packages/client/app/components/shared/Action.jsx @@ -1,22 +1,21 @@ /* eslint-disable react/prop-types */ import { useState } from 'react' -import styled, { css } from 'styled-components' -import { grid, rotate360 } from '@coko/client' +import styled, { css, useTheme } from 'styled-components' +import { th, grid, rotate360 } from '@coko/client' import { Check, AlertCircle } from 'react-feather' import PropTypes from 'prop-types' import { useNavigate } from 'react-router-dom' -import theme, { color } from '../../theme' const ActionLink = styled.button` background: transparent; border-bottom: 2px solid transparent; - color: ${color.brand1.base}; + color: ${th('color.brand1.base')}; cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')}; display: inline-flex; flex-direction: row; font-size: inherit; - gap: ${theme.spacing.d}; + gap: ${th('spacing.d')}; line-height: inherit; opacity: ${({ disabled }) => (disabled ? '0.5' : '1')}; width: fit-content; @@ -27,7 +26,7 @@ const ActionLink = styled.button` ? '' : css` &:hover { - border-bottom: 2px solid ${color.brand1.base}; + border-bottom: 2px solid ${th('color.brand1.base')}; transition: border-bottom 0.2s; } `} @@ -39,9 +38,9 @@ const Spinner = styled.div` &::after { animation: ${rotate360} 1s linear infinite; - border: 2.5px solid ${color.brand1.base}; - border-color: ${color.brand1.base} transparent ${color.brand1.base} - transparent; + border: 2.5px solid ${th('color.brand1.base')}; + border-color: ${th('color.brand1.base')} transparent + ${th('color.brand1.base')} transparent; border-radius: 50%; box-sizing: border-box; /* stylelint-disable-next-line string-quotes */ @@ -96,6 +95,7 @@ const Action = ({ onClick, title, }) => { + const theme = useTheme() const [resultStatus, setResultStatus] = useState(null) const [isInProgress, setIsInProgress] = useState(false) @@ -118,7 +118,7 @@ const Action = ({ {!isInProgress && resultStatus === 'success' && ( - props.$bgColor || (props.$primary ? color.brand1.base : color.gray90)}; + props.$bgColor || + (props.$primary + ? props.theme.color.brand1.base + : props.theme.color.gray90)}; /* stylelint-disable-next-line color-function-notation, alpha-value-notation */ box-shadow: 0 1px 2px rgb(0 0 0 / 30%); color: ${props => - props.$fgColor || (props.$primary ? color.text : color.textReverse)}; + props.$fgColor || + (props.$primary ? props.theme.color.text : props.theme.color.textReverse)}; ${props => props.onClick @@ -110,7 +113,9 @@ const ActionButton = ({ ) const themeContext = useContext(ThemeContext) - let bgColor = primary ? color.brand1.base() : color.gray90 + let bgColor = primary + ? themeContext.color.brand1.base + : themeContext.color.gray90 if (status === 'failure') bgColor = themeContext.colorWarning else if (col) bgColor = col @@ -119,10 +124,12 @@ const ActionButton = ({ try { isLight = Color(bgColor).isLight() } catch { - bgColor = color.gray90 + bgColor = themeContext.color.gray90 } - const fgColor = isLight ? color.text : color.textReverse + const fgColor = isLight + ? themeContext.color.text + : themeContext.color.textReverse let statusIndicator = null if (status === 'pending') statusIndicator = @@ -172,7 +179,7 @@ const ActionButton = ({ } ActionButton.propTypes = { - /** Primary buttons are styled with color.brand1.base, unless another color is specified */ + /** Primary buttons are styled with th('color.brand1.base'), unless another color is specified */ primary: PropTypes.bool, disabled: PropTypes.bool, onClick: PropTypes.func, diff --git a/packages/client/app/components/shared/Badge.jsx b/packages/client/app/components/shared/Badge.jsx index 850265275..b2390a89e 100644 --- a/packages/client/app/components/shared/Badge.jsx +++ b/packages/client/app/components/shared/Badge.jsx @@ -1,9 +1,9 @@ import PropTypes from 'prop-types' -import styled from 'styled-components' -import { grid, theme } from '@coko/client' +import styled, { useTheme } from 'styled-components' +import { grid } from '@coko/client' import i18next from 'i18next' import { keys } from 'lodash' -import { color } from '../../theme' + import { FlexRow } from '../../globals' const bRadius = '8px' @@ -38,7 +38,8 @@ export const Status = styled.span.attrs({ export const ConfigurableStatus = styled(Status)` background-color: ${p => p.color}; - color: ${p => (p.$lightText ? color.textReverse : color.text)}; + color: ${p => + p.$lightText ? p.theme.color.textReverse : p.theme.color.text}; ` export const safeLabel = status => { @@ -46,18 +47,6 @@ export const safeLabel = status => { return i18next.t(`msStatus.${status}`, unknownFallback) } -const statusColorsMap = { - submitted: [theme.colorWarning, color.warning.shade50], - inProgress: [theme.colorWarning, color.warning.shade50], - underEmbargo: [theme.colorWarning, color.warning.shade50], - published: [theme.colorSuccess, color.textReverse], - completed: [theme.colorSuccess, color.textReverse], - embargoReleased: [theme.colorSuccess, color.textReverse], - unpublished: [theme.colorError, color.textReverse], - rejected: [theme.colorError, color.textReverse], - default: ['#ddd', '#333'], -} - // IDEA: This could be extended to be a prop: an array of objects where each: { [statuskey] : [...array of statuses to override] } // Slightly changes on the component's implementation will be needed though const statusesToOverride = ['evaluated'] @@ -86,13 +75,30 @@ const statusesToOverride = ['evaluated'] export const StatusBadge = ({ status, published: publishedDate = '', - colorMap = statusColorsMap, + colorMap, clickable = false, ...rest }) => { - const safeStatusKey = keys(colorMap).includes(status) ? status : 'default' - const [bg, text] = colorMap[safeStatusKey] - const [publishedBg, publishedText] = colorMap.published + const themeValues = useTheme() + + const defaultColorMap = { + submitted: [themeValues.colorWarning, themeValues.color.warning.shade50], + inProgress: [themeValues.colorWarning, themeValues.color.warning.shade50], + underEmbargo: [themeValues.colorWarning, themeValues.color.warning.shade50], + published: [themeValues.colorSuccess, themeValues.color.textReverse], + completed: [themeValues.colorSuccess, themeValues.color.textReverse], + embargoReleased: [themeValues.colorSuccess, themeValues.color.textReverse], + unpublished: [themeValues.colorError, themeValues.color.textReverse], + rejected: [themeValues.colorError, themeValues.color.textReverse], + default: ['#ddd', '#333'], + } + + const resolvedColorMap = colorMap ?? defaultColorMap + const safeStatusKey = keys(resolvedColorMap).includes(status) + ? status + : 'default' + const [bg, text] = resolvedColorMap[safeStatusKey] + const [publishedBg, publishedText] = resolvedColorMap.published const publishedAndMore = !!publishedDate && status !== 'published' const forceToPublished = statusesToOverride.includes(status) @@ -106,7 +112,7 @@ export const StatusBadge = ({ $bRadius={`${bRadius} 0 0 ${bRadius}`} $pRight={!forceToPublished && grid(1)} $text={publishedText} - $textShadow={publishedText === color.textReverse} + $textShadow={publishedText === themeValues.color.textReverse} > {safeLabel('published')} @@ -119,7 +125,7 @@ export const StatusBadge = ({ } $pLeft={showPublishedStatus && grid(1)} $text={text} - $textShadow={text === color.textReverse} + $textShadow={text === themeValues.color.textReverse} > {safeLabel(status)} diff --git a/packages/client/app/components/shared/Calendar.jsx b/packages/client/app/components/shared/Calendar.jsx index 7b555f845..3610fd6a6 100644 --- a/packages/client/app/components/shared/Calendar.jsx +++ b/packages/client/app/components/shared/Calendar.jsx @@ -4,7 +4,6 @@ import styled, { css } from 'styled-components' import UnstyledCalendar from 'react-calendar' import { th, grid } from '@coko/client' -import { color } from '../../theme' const Calendar = styled(UnstyledCalendar)` /* stylelint-disable selector-class-pattern */ @@ -12,7 +11,7 @@ const Calendar = styled(UnstyledCalendar)` border: none; & .react-calendar__navigation { - background-color: ${color.backgroundC}; + background-color: ${th('color.backgroundC')}; display: flex; font-size: ${th('fontSizeBaseSmall')}; height: ${grid(4)}; @@ -42,20 +41,20 @@ const Calendar = styled(UnstyledCalendar)` } & .react-calendar__tile:disabled.react-calendar__tile--range { - background: ${color.gray90}; - border-bottom: 6px solid ${color.brand1.tint70}; - border-top: 6px solid ${color.brand1.tint70}; + background: ${th('color.gray90')}; + border-bottom: 6px solid ${th('color.brand1.tint70')}; + border-top: 6px solid ${th('color.brand1.tint70')}; padding-bottom: 4px; padding-top: 4px; } & .react-calendar__tile:disabled.react-calendar__tile--rangeStart { - border-left: 6px solid ${color.brand1.tint70}; + border-left: 6px solid ${th('color.brand1.tint70')}; padding-left: 1px; } & .react-calendar__tile:disabled.react-calendar__tile--rangeEnd { - border-right: 6px solid ${color.brand1.tint70}; + border-right: 6px solid ${th('color.brand1.tint70')}; padding-right: 1px; } @@ -65,7 +64,7 @@ const Calendar = styled(UnstyledCalendar)` props.suppressTodayHighlight ? '' : css` - border: 1px solid ${color.brand1.tint25}; + border: 1px solid ${th('color.brand1.tint25')}; `} } @@ -74,29 +73,29 @@ const Calendar = styled(UnstyledCalendar)` } & .react-calendar__tile--active { - background: ${color.brand1.base}; + background: ${th('color.brand1.base')}; color: inherit; } & .react-calendar__tile--hasActive, & .react-calendar__tile--hasActive:focus { - background: ${color.brand1.tint70}; + background: ${th('color.brand1.tint70')}; } & .react-calendar__tile--active:enabled:focus, & .react-calendar__tile--active:enabled:hover, & .react-calendar__tile--hasActive:hover { - background: ${color.brand1.base}; + background: ${th('color.brand1.base')}; } & .react-calendar__tile--range, & .react-calendar__tile--hover { - background: ${color.brand1.tint70}; + background: ${th('color.brand1.tint70')}; border-radius: 0; } & .react-calendar__tile--hover:hover { - background: ${color.brand1.tint70}; + background: ${th('color.brand1.tint70')}; } &.react-calendar__tile--rangeStart:not( diff --git a/packages/client/app/components/shared/Checkbox.jsx b/packages/client/app/components/shared/Checkbox.jsx index 321a9781f..36d1ad487 100644 --- a/packages/client/app/components/shared/Checkbox.jsx +++ b/packages/client/app/components/shared/Checkbox.jsx @@ -1,7 +1,7 @@ /* eslint-disable react/prop-types */ import styled from 'styled-components' -import { color, space } from '../../theme' +import { th } from '@coko/client' const CheckboxContainer = styled.div` align-content: center; @@ -9,27 +9,27 @@ const CheckboxContainer = styled.div` margin-bottom: 4px; input[type='checkbox'] { - accent-color: ${color.brand1.shade25}; - background: ${color.gray97}; - border: 1px solid ${color.gray80}; + accent-color: ${th('color.brand1.shade25')}; + background: ${th('color.gray97')}; + border: 1px solid ${th('color.gray80')}; border-radius: 5px; color: white; padding: 14px 9px; &:active, &:focus-visible { - /* border: 1px solid ${color.gray70}; */ + /* border: 1px solid ${th('color.gray70')}; */ outline: none; } &:hover { - accent-color: ${color.brand1.shade25}; + accent-color: ${th('color.brand1.shade25')}; border: none; } } label { - margin-left: ${space.e}; + margin-left: ${th('spacing.e')}; } ` diff --git a/packages/client/app/components/shared/CheckboxGroup.jsx b/packages/client/app/components/shared/CheckboxGroup.jsx index b6f616efd..99b9abb3e 100644 --- a/packages/client/app/components/shared/CheckboxGroup.jsx +++ b/packages/client/app/components/shared/CheckboxGroup.jsx @@ -1,8 +1,6 @@ /* eslint-disable react/prop-types */ import { Checkbox } from './Checkbox' -/* import styled from 'styled-components' */ -/* import theme from '../../theme' */ export const CheckboxGroup = ({ options, diff --git a/packages/client/app/components/shared/CounterField.jsx b/packages/client/app/components/shared/CounterField.jsx index 838c719ab..92c6b8057 100644 --- a/packages/client/app/components/shared/CounterField.jsx +++ b/packages/client/app/components/shared/CounterField.jsx @@ -4,10 +4,10 @@ /* stylelint-disable alpha-value-notation, color-function-notation */ import { useState, useEffect } from 'react' -import styled from 'styled-components' +import styled, { useTheme } from 'styled-components' import { X as CloseIcon, ChevronUp, ChevronDown } from 'react-feather' import { useTranslation } from 'react-i18next' -import { color } from '../../theme' +import { th } from '@coko/client' const Container = styled.div` display: flex; @@ -16,8 +16,8 @@ const Container = styled.div` const LabelContainer = styled.div` align-items: center; - background: ${color.backgroundA}; - border: 1.5px solid ${color.gray70}; + background: ${th('color.backgroundA')}; + border: 1.5px solid ${th('color.gray70')}; border-radius: 10px; box-shadow: 0 1px 1px rgb(0 0 0 / 25%); display: flex; @@ -40,12 +40,16 @@ const CounterActionContainer = styled.div` cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')}; svg { - color: ${props => (props.disabled ? color.gray60 : color.gray40)}; + color: ${props => + props.disabled ? props.theme.color.gray60 : props.theme.color.gray40}; } &:hover { svg { - stroke: ${props => (props.disabled ? color.gray60 : color.brand1.base)}; + stroke: ${props => + props.disabled + ? props.theme.color.gray60 + : props.theme.color.brand1.base}; } } } @@ -77,6 +81,7 @@ const CounterField = ({ compact = false, disabled = false, }) => { + const theme = useTheme() const [value, setValue] = useState(propsValue) const { t } = useTranslation() @@ -139,7 +144,10 @@ const CounterField = ({ {displayValue} {showResetIcon && ( resetValue()}> - + )} diff --git a/packages/client/app/components/shared/CounterFieldWithOptions.jsx b/packages/client/app/components/shared/CounterFieldWithOptions.jsx index 18f107e5a..250c97f20 100644 --- a/packages/client/app/components/shared/CounterFieldWithOptions.jsx +++ b/packages/client/app/components/shared/CounterFieldWithOptions.jsx @@ -6,7 +6,7 @@ import { useState, useEffect } from 'react' import styled from 'styled-components' import { ChevronUp, ChevronDown } from 'react-feather' -import { color } from '../../theme' +import { th } from '@coko/client' const Container = styled.div` display: flex; @@ -15,8 +15,8 @@ const Container = styled.div` const LabelContainer = styled.div` align-items: center; - background: ${color.backgroundA}; - border: 1.5px solid ${color.gray70}; + background: ${th('color.backgroundA')}; + border: 1.5px solid ${th('color.gray70')}; border-radius: 10px; box-shadow: 0 1px 1px rgb(0 0 0 / 25%); display: flex; @@ -37,12 +37,16 @@ const CounterActionContainer = styled.div` cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')}; svg { - color: ${props => (props.disabled ? color.gray60 : color.gray40)}; + color: ${props => + props.disabled ? props.theme.color.gray60 : props.theme.color.gray40}; } &:hover { svg { - stroke: ${props => (props.disabled ? color.gray60 : color.brand1.base)}; + stroke: ${props => + props.disabled + ? props.theme.color.gray60 + : props.theme.color.brand1.base}; } } } diff --git a/packages/client/app/components/shared/DeleteControl.jsx b/packages/client/app/components/shared/DeleteControl.jsx index 35c6a025f..8c4bdf11a 100644 --- a/packages/client/app/components/shared/DeleteControl.jsx +++ b/packages/client/app/components/shared/DeleteControl.jsx @@ -1,13 +1,13 @@ /* eslint-disable react/prop-types */ import PropTypes from 'prop-types' -import styled from 'styled-components' +import styled, { useTheme } from 'styled-components' +import { th } from '@coko/client' import { Icon } from '../pubsweet' -import { color } from '../../theme' const DeleteButton = styled.button` align-items: center; - background: ${color.brand1.base}; + background: ${th('color.brand1.base')}; border: none; border-radius: 500px; display: inline-flex; @@ -18,18 +18,21 @@ const DeleteButton = styled.button` width: 30px; &:hover { - background-color: ${color.brand1.tint10}; + background-color: ${th('color.brand1.tint10')}; cursor: pointer; } ` -const DeleteControl = ({ onClick, tooltip, iconProps, ...rest }) => ( - - - x - - -) +const DeleteControl = ({ onClick, tooltip, iconProps, ...rest }) => { + const theme = useTheme() + return ( + + + x + + + ) +} DeleteControl.propTypes = { onClick: PropTypes.func.isRequired, diff --git a/packages/client/app/components/shared/ElasticTextInput.jsx b/packages/client/app/components/shared/ElasticTextInput.jsx index 0f36f29ca..2c7ddc3ef 100644 --- a/packages/client/app/components/shared/ElasticTextInput.jsx +++ b/packages/client/app/components/shared/ElasticTextInput.jsx @@ -6,7 +6,6 @@ import ContentEditable from 'react-contenteditable' import { escape } from 'lodash' import styled from 'styled-components' import { th } from '@coko/client' -import { color } from '../../theme' const stripTags = html => { const tempDiv = document.createElement('DIV') @@ -21,7 +20,7 @@ const InputBlock = styled(ContentEditable)` &:focus, &:hover { - outline: 1px solid ${color.brand1.base}; + outline: 1px solid ${th('color.brand1.base')}; } ` diff --git a/packages/client/app/components/shared/FilesUpload.jsx b/packages/client/app/components/shared/FilesUpload.jsx index c248ed25d..ac2c83709 100644 --- a/packages/client/app/components/shared/FilesUpload.jsx +++ b/packages/client/app/components/shared/FilesUpload.jsx @@ -4,16 +4,15 @@ import PropTypes from 'prop-types' import { cloneDeep, get } from 'lodash' import { FieldArray } from 'formik' import { grid, th } from '@coko/client' -import styled from 'styled-components' +import styled, { useTheme } from 'styled-components' import { useTranslation } from 'react-i18next' import UploadingFile from './UploadingFile' import { Dropzone } from './Dropzone' import { Icon } from './Icon' -import { color } from '../../theme' const Root = styled.div` align-items: center; - border: 1px dashed ${color.gray60}; + border: 1px dashed ${th('color.gray60')}; border-radius: ${th('borderRadius')}; display: flex; height: ${grid(8)}; @@ -33,7 +32,8 @@ const Files = styled.div` const Message = styled.div` align-items: center; - color: ${props => (props.disabled ? color.textPlaceholder : 'inherit')}; + color: ${props => + props.disabled ? props.theme.color.textPlaceholder : 'inherit'}; display: flex; justify-content: center; width: 100%; @@ -63,6 +63,7 @@ const DropzoneAndList = ({ }) => { // Disable the input in case we want a single file upload // and a file has already been uploaded + const theme = useTheme() const { t } = useTranslation() const files = cloneDeep(get(values, fieldName) || []) @@ -121,7 +122,7 @@ const DropzoneAndList = ({ ) : ( <> {t('dragndrop.Drag and drop your files here')} - + file-plus diff --git a/packages/client/app/components/shared/General.jsx b/packages/client/app/components/shared/General.jsx index c6c15487f..4ae175fd1 100644 --- a/packages/client/app/components/shared/General.jsx +++ b/packages/client/app/components/shared/General.jsx @@ -1,7 +1,6 @@ import styled from 'styled-components' import { grid, th } from '@coko/client' import { TabsContainer } from './Tabs' -import { color } from '../../theme' export const Section = styled.section.attrs({ 'data-testid': 'section', @@ -10,7 +9,7 @@ export const Section = styled.section.attrs({ ` export const Content = styled.div` - background-color: ${color.backgroundA}; + background-color: ${th('color.backgroundA')}; border-radius: ${th('borderRadius')}; box-shadow: ${th('boxShadow')}; clear: both; @@ -24,7 +23,7 @@ export const ScrollableContent = styled(Content)` ` export const SectionContent = styled(Section)` - background-color: ${color.backgroundA}; + background-color: ${th('color.backgroundA')}; border-radius: ${th('borderRadius')}; box-shadow: ${({ theme }) => theme.boxShadow.shades[200]}; margin-bottom: ${grid(2)}; @@ -59,7 +58,7 @@ export const PaddedContent = styled(Content)` ` export const Container = styled.div` - background: ${color.backgroundC}; + background: ${th('color.backgroundC')}; overflow-y: auto; padding: ${grid(2)}; width: 100%; @@ -73,12 +72,12 @@ export const Title = styled.h2.attrs({ ` export const SectionHeader = styled.div` - border-bottom: 1px solid ${color.gray90}; + border-bottom: 1px solid ${th('color.gray90')}; padding: ${grid(2)} ${grid(3)}; ` export const SectionRow = styled.div` - border-bottom: 1px solid ${color.gray90}; + border-bottom: 1px solid ${th('color.gray90')}; padding: ${grid(2)} ${grid(3)}; ` @@ -90,11 +89,11 @@ export const ClickableSectionRow = styled(SectionRow)` } &:hover { - background-color: ${color.backgroundC}; + background-color: ${th('color.backgroundC')}; cursor: pointer; svg { - stroke: ${color.brand1.base}; + stroke: ${th('color.brand1.base')}; } } ` @@ -123,7 +122,9 @@ const Heading = styled.div.attrs({ 'data-testid': 'general-heading', })` color: ${props => - props.$warning ? color.warning.shade10 : color.brand1.base}; + props.$warning + ? props.theme.color.warning.shade10 + : props.theme.color.brand1.base}; font-family: ${th('fontReading')}; font-size: ${th('fontSizeHeading3')}; line-height: ${th('lineHeightHeading3')}; @@ -162,7 +163,7 @@ export const Columns = styled.div` ` export const Manuscript = styled.div` - background: ${color.gray97}; + background: ${th('color.gray97')}; grid-area: manuscript; height: 100vh; overflow: auto; @@ -170,7 +171,7 @@ export const Manuscript = styled.div` ` export const Chat = styled.div` - border-left: 1px solid ${color.gray90}; + border-left: 1px solid ${th('color.gray90')}; display: flex; grid-area: chat; height: 100vh; diff --git a/packages/client/app/components/shared/HiddenTabs.jsx b/packages/client/app/components/shared/HiddenTabs.jsx index 3394dba75..48af72931 100644 --- a/packages/client/app/components/shared/HiddenTabs.jsx +++ b/packages/client/app/components/shared/HiddenTabs.jsx @@ -7,9 +7,9 @@ import { useContext, useState, useEffect } from 'react' import styled from 'styled-components' import { th, override } from '@coko/client' import { useTranslation } from 'react-i18next' + import { TabsContainer } from './Tabs' import { ConfigContext } from '../config/src' -import { color } from '../../theme' import RoundIconButton from './RoundIconButton' import { safeCall } from '../../shared/generalUtils' @@ -24,7 +24,7 @@ export const Tab = styled.div.attrs(props => ({ 'data-testid': props['data-testid'] || 'hidden-tabs-tab', }))` /* stylelint-disable custom-property-no-missing-var-function */ - --bg-active: ${color.backgroundA}; + --bg-active: ${th('color.backgroundA')}; --bg-inactive: linear-gradient( 180deg, #ececec 0%, @@ -39,7 +39,7 @@ export const Tab = styled.div.attrs(props => ({ props.$active ? '-4px 0 7px -4px rgb(0 0 0 / 10%), 4px 0 7px -4px rgb(0 0 0 / 10%), 0 -4px 7px -4px rgb(0 0 0 / 10%)' : 'none'}; - color: ${color.text}; + color: ${th('color.text')}; cursor: pointer; font-size: ${th('fontSizeBaseSmall')}; font-weight: 500; @@ -51,7 +51,7 @@ export const Tab = styled.div.attrs(props => ({ & > div { border-bottom: 3px solid - ${props => (props.$active ? color.brand1.base : 'none')}; + ${props => (props.$active ? props.theme.color.brand1.base : 'none')}; margin-bottom: -2px; padding-bottom: 4px; } @@ -61,7 +61,8 @@ export const Tab = styled.div.attrs(props => ({ ` export const HiddenTabsContainer = styled(TabsContainer)` - ${props => props.$sticky && `background-color: ${color.backgroundC};`} + ${props => + props.$sticky && `background-color: ${props.theme.color.backgroundC};`} ${props => props.$sticky && 'position: sticky;'} ${props => props.$sticky && 'top: -16px;'} ${props => props.$sticky && 'z-index: 999;'} diff --git a/packages/client/app/components/shared/MinimalButton.jsx b/packages/client/app/components/shared/MinimalButton.jsx index 28e5f5021..ab79e1694 100644 --- a/packages/client/app/components/shared/MinimalButton.jsx +++ b/packages/client/app/components/shared/MinimalButton.jsx @@ -1,14 +1,13 @@ /* eslint-disable react/prop-types */ import styled from 'styled-components' -import { grid } from '@coko/client' -import { color } from '../../theme' +import { th, grid } from '@coko/client' const BareButton = styled.button` align-items: center; background: none; border: none; - color: ${color.gray40}; + color: ${th('color.gray40')}; display: flex; font-family: inherit; font-size: inherit; @@ -20,15 +19,15 @@ const BareButton = styled.button` padding: 0 ${grid(0.5)}; &:hover { - color: ${color.brand1.base}; + color: ${th('color.brand1.base')}; } & svg { - stroke: ${color.gray40}; + stroke: ${th('color.gray40')}; } &:hover svg { - stroke: ${color.brand1.base}; + stroke: ${th('color.brand1.base')}; } ` diff --git a/packages/client/app/components/shared/MinimalNumericUpDown.jsx b/packages/client/app/components/shared/MinimalNumericUpDown.jsx index 97be38599..8e308161e 100644 --- a/packages/client/app/components/shared/MinimalNumericUpDown.jsx +++ b/packages/client/app/components/shared/MinimalNumericUpDown.jsx @@ -8,29 +8,28 @@ import styled, { ThemeContext } from 'styled-components' import { ChevronUp, ChevronDown } from 'react-feather' import { th, grid } from '@coko/client' import { SolidColumn, TightRow } from './Containers' -import { color } from '../../theme' /** Used for both up button and down button */ const UpDownButton = styled.button` align-items: center; background: none; border: none; - color: ${color.gray60}; + color: ${th('color.gray60')}; height: ${grid(2)}; justify-content: center; padding: 0 ${grid(0.5)}; width: ${grid(3)}; &:hover { - color: ${color.brand1.base}; + color: ${th('color.brand1.base')}; } & svg { - stroke: ${color.gray60}; + stroke: ${th('color.gray60')}; } &:hover svg { - stroke: ${color.brand1.base}; + stroke: ${th('color.brand1.base')}; } ` @@ -48,7 +47,7 @@ const Input = styled.input` &:hover, &:focus { - outline: 1px solid ${color.brand1.base}; + outline: 1px solid ${th('color.brand1.base')}; } ` diff --git a/packages/client/app/components/shared/MinimalSelect.jsx b/packages/client/app/components/shared/MinimalSelect.jsx index 51853066f..19f398f07 100644 --- a/packages/client/app/components/shared/MinimalSelect.jsx +++ b/packages/client/app/components/shared/MinimalSelect.jsx @@ -3,9 +3,8 @@ import { useContext } from 'react' import ReactSelect from 'react-select' import { ThemeContext } from 'styled-components' -import { color } from '../../theme' -const styles = th => ({ +const styles = theme => ({ container: provided => ({ ...provided, width: '100%', @@ -28,7 +27,7 @@ const styles = th => ({ }), menu: provided => ({ ...provided, - borderRadius: th.borderRadius, + borderRadius: theme.borderRadius, zIndex: 9999, width: 250, }), @@ -36,8 +35,10 @@ const styles = th => ({ ...provided, background: 'none', border: 'none', - borderRadius: th.borderRadius, - boxShadow: state.isFocused ? `0 0 0 1px ${color.brand1.base()}` : 'none', + borderRadius: theme.borderRadius, + boxShadow: state.isFocused + ? `0 0 0 1px ${theme.color.brand1.base}` + : 'none', minHeight: '0', }), @@ -51,8 +52,10 @@ const styles = th => ({ option: (provided, state) => ({ ...provided, backgroundColor: - state.isFocused || state.isSelected ? color.gray90 : color.backgroundA, - color: color.text, + state.isFocused || state.isSelected + ? theme.color.gray90 + : theme.color.backgroundA, + color: theme.color.text, }), valueContainer: (provided, state) => state.isMulti diff --git a/packages/client/app/components/shared/MinimalTextInput.jsx b/packages/client/app/components/shared/MinimalTextInput.jsx index e2ba3b8c4..fe46164d8 100644 --- a/packages/client/app/components/shared/MinimalTextInput.jsx +++ b/packages/client/app/components/shared/MinimalTextInput.jsx @@ -10,7 +10,6 @@ import { th } from '@coko/client' import { TightRow } from './Containers' import MinimalButton from './MinimalButton' import ElasticTextInput from './ElasticTextInput' -import { color } from '../../theme' const InputRow = styled(TightRow)` & svg { @@ -38,7 +37,7 @@ const Input = styled(ElasticTextInput)` &:hover, &:focus { - outline: 1px solid ${color.brand1.base}; + outline: 1px solid ${th('color.brand1.base')}; } ` diff --git a/packages/client/app/components/shared/RoundIconButton.jsx b/packages/client/app/components/shared/RoundIconButton.jsx index 20501a9eb..1369fa51b 100644 --- a/packages/client/app/components/shared/RoundIconButton.jsx +++ b/packages/client/app/components/shared/RoundIconButton.jsx @@ -2,8 +2,8 @@ import styled, { useTheme } from 'styled-components' import * as icons from 'react-feather' +import { th } from '@coko/client' import ActionButton from './ActionButton' -import { color } from '../../theme' const RoundButton = styled(ActionButton).attrs(props => ({ 'data-testid': props['data-testid'], @@ -21,9 +21,9 @@ const RoundButton = styled(ActionButton).attrs(props => ({ ` const UnreadMessagesCount = styled.div` - background-color: ${color.brand1.base}; + background-color: ${th('color.brand1.base')}; border-radius: 50%; - color: ${color.white}; + color: ${th('color.white')}; font-size: 12px; height: 19px; line-height: 20px; diff --git a/packages/client/app/components/shared/SecondaryActionButton.jsx b/packages/client/app/components/shared/SecondaryActionButton.jsx index 97b9c53a6..9c8d4d409 100644 --- a/packages/client/app/components/shared/SecondaryActionButton.jsx +++ b/packages/client/app/components/shared/SecondaryActionButton.jsx @@ -5,10 +5,9 @@ import PropTypes from 'prop-types' import styled, { ThemeContext } from 'styled-components' import { Check, AlertCircle } from 'react-feather' import { th, grid, rotate360 } from '@coko/client' -import { color } from '../../theme' const BaseButton = styled.button` - border: 2px solid ${color.brand1.base}; + border: 2px solid ${th('color.brand1.base')}; border-radius: ${th('borderRadius')}; font-family: ${th('fontInterface')}; font-size: ${th('fontSizeBase')}; @@ -26,15 +25,15 @@ const BaseButton = styled.button` ` const DisabledButton = styled(BaseButton)` - background-color: ${color.gray90}; - border: 2px solid ${color.gray90}; - color: ${color.gray60}; + background-color: ${th('color.gray90')}; + border: 2px solid ${th('color.gray90')}; + color: ${th('color.gray60')}; ` const Button = styled(BaseButton)` background-color: white; box-shadow: 0 3px 5px 1px rgb(0 0 0 / 20%); - color: ${color.brand1.base}; + color: ${th('color.brand1.base')}; &:hover, &:active, @@ -91,7 +90,7 @@ const SecondaryActionButton = ({ const fgColor = status === 'pending' || status === 'success' - ? color.brand1.base() + ? themeContext.color.brand1.base : themeContext.colorError let statusIndicator = null @@ -147,7 +146,7 @@ const SecondaryActionButton = ({ } SecondaryActionButton.propTypes = { - /** Primary buttons are styled with color.brand1.base, unless another color is specified */ + /** Primary buttons are styled with th('color.brand1.base'), unless another color is specified */ disabled: PropTypes.bool, onClick: PropTypes.func, /** 'pending' will show a spinner; 'success' will show a tick; 'failure' will show a warning icon and change the color to colorWarning */ diff --git a/packages/client/app/components/shared/Select.jsx b/packages/client/app/components/shared/Select.jsx index 04b94cae0..14b19b562 100644 --- a/packages/client/app/components/shared/Select.jsx +++ b/packages/client/app/components/shared/Select.jsx @@ -7,42 +7,41 @@ import PropTypes from 'prop-types' import ReactSelect, { components } from 'react-select' import styled, { ThemeContext } from 'styled-components' import { useTranslation } from 'react-i18next' -import { color } from '../../theme' -const styles = th => ({ +const styles = theme => ({ menu: provided => ({ ...provided, - borderRadius: th.borderRadius, + borderRadius: theme.borderRadius, zIndex: 9999, width: '100%', - fontSize: th.fontSizeBaseSmall, + fontSize: theme.fontSizeBaseSmall, marginTop: '4px', }), control: (provided, state) => ({ ...provided, - background: color.gray97, + background: theme.color.gray97, border: !state.selectProps.standalone ? state.isFocused - ? `1px solid ${color.gray70}` - : `1px solid ${color.gray80}` + ? `1px solid ${theme.color.gray70}` + : `1px solid ${theme.color.gray80}` : 'none', boxShadow: !state.selectProps.standalone ? state.isFocused - ? `0 0 0 1px ${color.brand1.base}` + ? `0 0 0 1px ${theme.color.brand1.base}` : 'inset 0px 0px 4px rgb(0 0 0 / 7%)' : state.isFocused - ? `0 0 0 1px ${color.brand1.base}` - : th.boxShadow, + ? `0 0 0 1px ${theme.color.brand1.base}` + : theme.boxShadow, - borderRadius: th.borderRadius, + borderRadius: theme.borderRadius, '&:hover': { - boxShadow: `1px solid ${color.gray70}`, + boxShadow: `1px solid ${theme.color.gray70}`, }, - fontSize: th.fontSizeBaseSmall, - minHeight: `calc(${th.gridUnit} * 5)`, + fontSize: theme.fontSizeBaseSmall, + minHeight: `calc(${theme.gridUnit} * 5)`, div: { - color: color.gray20, + color: theme.color.gray20, }, }), @@ -56,8 +55,8 @@ const styles = th => ({ option: (provided, state) => ({ ...provided, backgroundColor: - state.isFocused || state.isSelected ? color.gray90 : 'white', - color: color.text, + state.isFocused || state.isSelected ? theme.color.gray90 : 'white', + color: theme.color.text, }), }) @@ -99,7 +98,7 @@ export const Select = props => { ...otherProps } = props - const th = useContext(ThemeContext) + const theme = useContext(ThemeContext) const { t } = useTranslation() const [selectedOption, setSelectedOption] = useState(value) @@ -127,7 +126,7 @@ export const Select = props => { } }, [value, hasGroupedOptions, options]) - const myStyles = { ...styles(th), ...(customStyles || {}) } + const myStyles = { ...styles(theme), ...(customStyles || {}) } return ( div { border-bottom: 3px solid - ${props => (props.$active ? color.brand1.base : 'none')}; + ${props => (props.$active ? props.theme.color.brand1.base : 'none')}; margin-bottom: -2px; padding-bottom: 4px; } @@ -68,7 +67,8 @@ export const TabsContainer = styled.div.attrs({ grid-area: ${props.gridArea}; `}; - ${props => props.sticky && `background-color: ${color.backgroundC};`} + ${props => + props.sticky && `background-color: ${props.theme.color.backgroundC};`} ${props => props.sticky && 'position: sticky;'} ${props => props.sticky && 'top: -16px;'} ${props => props.sticky && 'z-index: 999;'} @@ -88,16 +88,16 @@ const TabContainer = styled.div.attrs({ const HideChatButton = styled.button` align-items: center; /* TODO: add a global style for this */ - background-color: ${color.gray90}; + background-color: ${th('color.gray90')}; border-radius: ${th('borderRadius')}; - color: ${color.text}; + color: ${th('color.text')}; display: flex; float: right; font-size: 16px; padding: 6px 12px; &:hover { - background-color: ${color.gray95}; + background-color: ${th('color.gray95')}; } ` diff --git a/packages/client/app/components/shared/TextInput.jsx b/packages/client/app/components/shared/TextInput.jsx index 148cf9ed2..d6f8e3ed1 100644 --- a/packages/client/app/components/shared/TextInput.jsx +++ b/packages/client/app/components/shared/TextInput.jsx @@ -3,30 +3,30 @@ /* eslint-disable react/prop-types */ import styled from 'styled-components' -import theme, { color } from '../../theme' +import { th } from '@coko/client' export const StyledInput = styled.input.attrs({ 'data-testid': 'text-input', })` - background: ${color.gray99}; - border: 1px solid ${color.gray80}; - border-radius: ${theme.borderRadius}; + background: ${th('color.gray99')}; + border: 1px solid ${th('color.gray80')}; + border-radius: ${th('borderRadius')}; box-shadow: inset 0 0 4px rgb(0 0 0 / 7%); - font-size: ${theme.fontSizeBaseSmall}; + font-size: ${th('fontSizeBaseSmall')}; padding: 14px 9px; width: 100%; &:hover { - border: 1px solid ${color.gray70}; + border: 1px solid ${th('color.gray70')}; outline: none; - transition: ${theme.transitionDuration}; + transition: ${th('transitionDuration')}; } &:active, &:focus-visible { - border: 1px solid ${color.brand1.base}; + border: 1px solid ${th('color.brand1.base')}; outline: none; - transition: ${theme.transitionDuration}; + transition: ${th('transitionDuration')}; } ` diff --git a/packages/client/app/components/shared/UploadingFile.jsx b/packages/client/app/components/shared/UploadingFile.jsx index 871564e2b..da860aec0 100644 --- a/packages/client/app/components/shared/UploadingFile.jsx +++ b/packages/client/app/components/shared/UploadingFile.jsx @@ -4,12 +4,12 @@ import { useState } from 'react' import styled from 'styled-components' import { th, grid } from '@coko/client' import { useTranslation } from 'react-i18next' + import { Action } from '../pubsweet' -import { color } from '../../theme' import { ConfirmationModal } from '../component-modal/src/ConfirmationModal' const Icon = styled.div` - background: ${color.gray90}; + background: ${th('color.gray90')}; height: ${grid(10)}; margin-bottom: ${th('gridUnit')}; opacity: 0.5; @@ -24,8 +24,8 @@ const Icon = styled.div` ` const Extension = styled.div` - background: ${color.gray5}; - color: ${color.textReverse}; + background: ${th('color.gray5')}; + color: ${th('color.textReverse')}; font-size: ${th('fontSizeBaseSmall')}; left: ${grid(2)}; line-height: ${th('lineHeightBaseSmall')}; @@ -37,7 +37,7 @@ const Extension = styled.div` ` const Filename = styled.div` - color: ${color.text}; + color: ${th('color.text')}; font-size: ${th('fontSizeBaseSmall')}; font-style: italic; line-height: ${th('lineHeightBaseSmall')}; @@ -57,12 +57,12 @@ const Uploading = styled.div` const Uploaded = styled(Uploading)` &:hover ${Extension} { - background: ${color.backgroundA}; - color: ${color.brand1.base}; + background: ${th('color.backgroundA')}; + color: ${th('color.brand1.base')}; } &:hover ${Icon} { - background: ${color.brand1.base}; + background: ${th('color.brand1.base')}; opacity: 1; } @@ -75,8 +75,8 @@ const Uploaded = styled(Uploading)` const ErrorWrapper = styled.div` background: ${th('colorError')}; border: calc(${th('borderWidth')} * 2) ${th('borderStyle')} - ${color.textReverse}; - color: ${color.textReverse}; + ${th('color.textReverse')}; + color: ${th('color.textReverse')}; font-size: ${th('fontSizeBaseSmall')}; letter-spacing: 0.01em; line-height: ${th('lineHeightBaseSmall')}; diff --git a/packages/client/app/components/wax-collab/src/CustomWaxToolGroups/CalloutService/components/styles.jsx b/packages/client/app/components/wax-collab/src/CustomWaxToolGroups/CalloutService/components/styles.jsx index 1484704db..7725f026b 100644 --- a/packages/client/app/components/wax-collab/src/CustomWaxToolGroups/CalloutService/components/styles.jsx +++ b/packages/client/app/components/wax-collab/src/CustomWaxToolGroups/CalloutService/components/styles.jsx @@ -1,12 +1,12 @@ import styled from 'styled-components' +import { th } from '@coko/client' import { Button as OriginalButton, Checkbox as OriginalCheckbox, } from '../../../../../pubsweet' -import { color } from '../../../../../../theme' export const Wrapper = styled.span` - background-color: ${color.gray95}; + background-color: ${th('color.gray95')}; user-select: none; ` @@ -29,14 +29,14 @@ export const PopUpWrapper = styled.div` } & > div > h4 { - color: ${color.brand1.base}; + color: ${th('color.brand1.base')}; font-size: 30px; margin: 0; padding: 15px; } & > div > h4 > p { - color: ${color.text}; + color: ${th('color.text')}; font-size: 14px; line-height: 22.4px; margin-top: 6px; @@ -49,7 +49,7 @@ export const PopUpContent = styled.div` ` export const Button = styled(OriginalButton)` - border: 2px solid ${color.brand1.base}; + border: 2px solid ${th('color.brand1.base')}; border-radius: 4px; cursor: pointer; padding: 4px 8px; @@ -58,7 +58,7 @@ export const Button = styled(OriginalButton)` user-select: none; &[type='primary'] { - background-color: ${color.brand1.base}; + background-color: ${th('color.brand1.base')}; color: white; &:hover { @@ -75,20 +75,20 @@ export const Button = styled(OriginalButton)` } &:disabled:hover { - border-color: ${color.brand1.base}; + border-color: ${th('color.brand1.base')}; } ` export const Checkbox = styled(OriginalCheckbox)` - accent-color: ${color.brand1.base}; + accent-color: ${th('color.brand1.base')}; ` export const CalloutOptionWrapper = styled.label` align-items: center; background-color: white; - border-bottom: 1px solid ${color.gray80}; + border-bottom: 1px solid ${th('color.gray80')}; border-radius: 3px; - border-top: 1px solid ${color.gray80}; + border-top: 1px solid ${th('color.gray80')}; cursor: pointer; display: flex; flex-direction: row; @@ -96,15 +96,15 @@ export const CalloutOptionWrapper = styled.label` padding: 10px 16px; & input { - accent-color: ${color.brand1.base}; + accent-color: ${th('color.brand1.base')}; } &.selected { - background-color: ${color.gray95}; + background-color: ${th('color.gray95')}; } &.static { - color: ${color.gray40}; + color: ${th('color.gray40')}; } & > button { @@ -138,7 +138,7 @@ export const StatusBar = styled.p` export const CloseButton = styled.span` align-items: center; - background-color: ${color.brand1.base}; + background-color: ${th('color.brand1.base')}; border-radius: 100%; color: white; cursor: pointer; diff --git a/packages/client/app/components/wax-collab/src/CustomWaxToolGroups/CitationService/components/CitationComponent.jsx b/packages/client/app/components/wax-collab/src/CustomWaxToolGroups/CitationService/components/CitationComponent.jsx index 6fdf5f8fe..2db7a6489 100644 --- a/packages/client/app/components/wax-collab/src/CustomWaxToolGroups/CitationService/components/CitationComponent.jsx +++ b/packages/client/app/components/wax-collab/src/CustomWaxToolGroups/CitationService/components/CitationComponent.jsx @@ -13,7 +13,8 @@ import { import { sanitize } from 'isomorphic-dompurify' import striptags from 'striptags' import { Loader, List, CheckCircle } from 'react-feather' -import { color } from '../../../../../../theme' +import { useTheme } from 'styled-components' + import { Spinner } from '../../../../../shared' import Modal from '../../../../../component-modal/src/Modal' import CitationVersion from './CitationVersion' @@ -67,6 +68,7 @@ const decideStatus = (needsReview, needsValidation) => { } const CitationComponent = ({ node, getPos }) => { + const theme = useTheme() const { pmViews, activeView } = useContext(WaxContext) const { app } = useContext(ApplicationContext) @@ -800,13 +802,17 @@ const CitationComponent = ({ node, getPos }) => { {decideStatus(internalNeedsReview, internalNeedsValidation) === 'checked' && ( - + )} {decideStatus(internalNeedsReview, internalNeedsValidation) === 'needs validation' && ( )} @@ -814,7 +820,7 @@ const CitationComponent = ({ node, getPos }) => { 'needs review' && ( )} diff --git a/packages/client/app/components/wax-collab/src/CustomWaxToolGroups/CitationService/components/styles.jsx b/packages/client/app/components/wax-collab/src/CustomWaxToolGroups/CitationService/components/styles.jsx index b6c132c91..a203cb9f1 100644 --- a/packages/client/app/components/wax-collab/src/CustomWaxToolGroups/CitationService/components/styles.jsx +++ b/packages/client/app/components/wax-collab/src/CustomWaxToolGroups/CitationService/components/styles.jsx @@ -1,9 +1,9 @@ import styled from 'styled-components' +import { th } from '@coko/client' import { Button as OriginalButton, Checkbox as OriginalCheckbox, } from '../../../../../pubsweet' -import { color } from '../../../../../../theme' export const Wrapper = styled.div` display: flex; @@ -12,14 +12,14 @@ export const Wrapper = styled.div` width: 100%; &:hover { - background-color: ${color.gray95}; + background-color: ${th('color.gray95')}; } ` export const StatusContainer = styled.span` align-items: center; align-self: flex-start; - border: 1px solid ${color.gray80}; + border: 1px solid ${th('color.gray80')}; border-radius: 100%; display: inline-flex; justify-content: center; @@ -88,7 +88,7 @@ export const PopUpWrapper = styled.div` } & > div > h4 { - color: ${color.brand1.base}; + color: ${th('color.brand1.base')}; font-size: 30px; margin: 0; padding: 15px; @@ -102,7 +102,7 @@ export const PopUpWrapper = styled.div` ` export const Button = styled(OriginalButton)` - border: 2px solid ${color.brand1.base}; + border: 2px solid ${th('color.brand1.base')}; border-radius: 4px; cursor: pointer; padding: 4px 8px; @@ -111,7 +111,7 @@ export const Button = styled(OriginalButton)` user-select: none; &[type='primary'] { - background-color: ${color.brand1.base}; + background-color: ${th('color.brand1.base')}; color: white; &:hover { @@ -128,20 +128,20 @@ export const Button = styled(OriginalButton)` } &:disabled:hover { - border-color: ${color.brand1.base}; + border-color: ${th('color.brand1.base')}; } ` export const Checkbox = styled(OriginalCheckbox)` - accent-color: ${color.brand1.base}; + accent-color: ${th('color.brand1.base')}; ` export const CitationVersionWrapper = styled.label` align-items: center; background-color: white; - border-bottom: 1px solid ${color.gray80}; + border-bottom: 1px solid ${th('color.gray80')}; border-radius: 3px; - border-top: 1px solid ${color.gray80}; + border-top: 1px solid ${th('color.gray80')}; cursor: pointer; display: flex; flex-direction: row; @@ -149,15 +149,15 @@ export const CitationVersionWrapper = styled.label` padding: 10px 16px; & input { - accent-color: ${color.brand1.base}; + accent-color: ${th('color.brand1.base')}; } &.selected { - background-color: ${color.gray95}; + background-color: ${th('color.gray95')}; } &.static { - color: ${color.gray40}; + color: ${th('color.gray40')}; } & > button { @@ -172,7 +172,7 @@ export const CitationVersionWrapper = styled.label` } & > p > span.tag { - color: ${color.gray40}; + color: ${th('color.gray40')}; } & > div { @@ -214,8 +214,8 @@ export const InputP = styled.p` width: 100%; & > input { - background-color: ${color.gray97}; - border: 1px solid ${color.gray80}; + background-color: ${th('color.gray97')}; + border: 1px solid ${th('color.gray80')}; border-radius: 5px; display: block; padding: 8px 10px; @@ -230,7 +230,7 @@ export const InputP = styled.p` export const CloseButton = styled.span` align-items: center; - background-color: ${color.brand1.base}; + background-color: ${th('color.brand1.base')}; border-radius: 100%; color: white; cursor: pointer; diff --git a/packages/client/app/components/wax-collab/src/CustomWaxToolGroups/JatsSideMenuToolGroupService/Icon.jsx b/packages/client/app/components/wax-collab/src/CustomWaxToolGroups/JatsSideMenuToolGroupService/Icon.jsx index bed523c5e..d8fdcb1c9 100644 --- a/packages/client/app/components/wax-collab/src/CustomWaxToolGroups/JatsSideMenuToolGroupService/Icon.jsx +++ b/packages/client/app/components/wax-collab/src/CustomWaxToolGroups/JatsSideMenuToolGroupService/Icon.jsx @@ -1,7 +1,7 @@ import PropTypes from 'prop-types' import styled from 'styled-components' import { icons } from 'wax-prosemirror-core' -import { color } from '../../../../../theme' +import { th } from '@coko/client' // Source: https://github.com/Coko-Foundation/wax-prosemirror/blob/master/wax-prosemirror-core/src/components/icons/Icon.js // modified to allow more icons, which can be defined like this: https://github.com/Coko-Foundation/wax-prosemirror/blob/master/wax-prosemirror-core/src/components/icons/icons.js @@ -11,14 +11,13 @@ const Svg = styled.svg.attrs(() => ({ xmlns: 'http://www.w3.org/2000/svg', xmlnsXlink: 'http://www.w3.org/1999/xlink', }))` - fill: ${color.gray60}; + fill: ${th('color.gray60')}; height: 24px; vertical-align: top; width: 24px; &.active { - background: ${color.gray90}; - /* fill: ${color.gray30}; */ + background: ${th('color.gray90')}; } ` diff --git a/packages/client/app/components/wax-collab/src/CustomWaxToolGroups/JatsSideMenuToolGroupService/VerticalTabs.jsx b/packages/client/app/components/wax-collab/src/CustomWaxToolGroups/JatsSideMenuToolGroupService/VerticalTabs.jsx index a60388c50..d03b913e8 100644 --- a/packages/client/app/components/wax-collab/src/CustomWaxToolGroups/JatsSideMenuToolGroupService/VerticalTabs.jsx +++ b/packages/client/app/components/wax-collab/src/CustomWaxToolGroups/JatsSideMenuToolGroupService/VerticalTabs.jsx @@ -10,7 +10,6 @@ import { WaxContext } from 'wax-prosemirror-core' import PropTypes from 'prop-types' import styled, { css } from 'styled-components' import Icon from './Icon' -import { color } from '../../../../../theme' // n.b. Henrik's current design is at https://www.figma.com/file/uDxsjgDWxjiof0qSNFLelr/Kotahi-storybook?node-id=6256%3A11486 @@ -45,8 +44,8 @@ const Tabs = styled.div` ` const activeTab = css` - background: ${color.gray90}; - /* box-shadow: 0 0 1px ${color.gray40}; */ + background: ${th('color.gray90')}; + /* box-shadow: 0 0 1px ${th('color.gray40')}; */ margin-bottom: -1px; /* stylelint-disable-next-line declaration-no-important */ opacity: 1 !important; @@ -72,17 +71,17 @@ const Tab = styled.div` } &:hover { - background: ${color.gray90}; + background: ${th('color.gray90')}; & svg { - fill: ${color.gray30}; + fill: ${th('color.gray30')}; } } ` const Content = styled.div` - border-right: 1px solid ${color.gray90}; - border-top: 1px solid ${color.gray90}; + border-right: 1px solid ${th('color.gray90')}; + border-top: 1px solid ${th('color.gray90')}; border-top-right-radius: 4px; height: 100%; width: 100%; @@ -131,7 +130,7 @@ const BlockLevelToolsWrapper = styled.div` const ElementGroup = styled.details` & summary { - color: ${color.gray40}; + color: ${th('color.gray40')}; cursor: pointer; font-size: 14px; font-weight: bold; @@ -167,10 +166,8 @@ const BlockElementWrapper = styled.div` &::before { --circle-width: 5px; - background-color: ${props => - props.color ? th(props.color) : 'transparent'}; - border: 1px solid - ${props => (props.color ? th(props.color) : 'transparent')}; + background-color: ${props => props.color || 'transparent'}; + border: 1px solid ${props => props.color || 'transparent'}; border-radius: 100%; content: ''; display: ${props => (props.color ? 'inline-block' : 'none')}; @@ -183,9 +180,9 @@ const BlockElementWrapper = styled.div` & span { border-bottom: 2px solid - ${props => (props.isActive ? color.gray40 : 'transparent')}; + ${props => (props.isActive ? props.theme.color.gray40 : 'transparent')}; border-top: 2px solid transparent; - color: ${color.gray40}; + color: ${th('color.gray40')}; font-size: 14px; font-weight: ${props => (props.isActive ? 'bold' : 'normal')}; padding: 1px 0; @@ -196,7 +193,7 @@ const BlockElementWrapper = styled.div` background: none !important; & span { - border-bottom-color: ${color.gray40}; + border-bottom-color: ${th('color.gray40')}; font-weight: bold; } } diff --git a/packages/client/app/components/wax-collab/src/FullWaxEditor.jsx b/packages/client/app/components/wax-collab/src/FullWaxEditor.jsx index 0a31126df..553b8589c 100644 --- a/packages/client/app/components/wax-collab/src/FullWaxEditor.jsx +++ b/packages/client/app/components/wax-collab/src/FullWaxEditor.jsx @@ -6,7 +6,7 @@ import { useRef, useState, useEffect, useContext, useCallback } from 'react' import PropTypes from 'prop-types' -import { ThemeProvider } from 'styled-components' +import { ThemeProvider, useTheme } from 'styled-components' import { debounce } from 'lodash' import { Wax } from 'wax-prosemirror-core' import { JournalContext } from '../../xpub-journal' @@ -53,6 +53,7 @@ const FullWaxEditor = ({ ydoc, name, }) => { + const theme = useTheme() const handleAssetManager = () => onAssetManager(manuscriptId) const [config, setConfig] = useState( @@ -112,7 +113,9 @@ const FullWaxEditor = ({ }, [name, wsProvider?.roomname, ydoc?.guid]) return ( - +
{ + const theme = useTheme() const handleAssetManager = () => onAssetManager(manuscriptId) const journal = useContext(JournalContext) @@ -284,7 +285,9 @@ const ProductionWaxEditor = ({ config = yjsConfig(config, { wsProvider, ydoc, yjsType: name }) return ( - +
theme.boxShadow.shades[200]}; display: flex; @@ -325,7 +324,7 @@ export const EditorArea = styled.div` export const SideMenu = styled.div` background: ${th('colorBackgroundToolBar')}; /* TODO is this color defined? */ - border-right: ${th('borderWidth')} ${th('borderStyle')} ${color.gray60}; + border-right: ${th('borderWidth')} ${th('borderStyle')} ${th('color.gray60')}; height: 100%; min-width: 200px; /* We can shrink this now if we want! */ ` diff --git a/packages/client/app/components/wax-collab/src/layout/NotesStyles.jsx b/packages/client/app/components/wax-collab/src/layout/NotesStyles.jsx index 133db19c8..4c0e781a4 100644 --- a/packages/client/app/components/wax-collab/src/layout/NotesStyles.jsx +++ b/packages/client/app/components/wax-collab/src/layout/NotesStyles.jsx @@ -1,11 +1,10 @@ import styled from 'styled-components' -import { grid } from '@coko/client' +import { th, grid } from '@coko/client' import EditorElements from './EditorElements' -import { color } from '../../../../theme' export const NotesAreaContainer = styled.div` /* stylelint-disable selector-class-pattern */ - background: ${color.backgroundA}; + background: ${th('color.backgroundA')}; bottom: ${grid(-2)}; box-shadow: 0 ${grid(-0.3)} ${grid(0.5)} ${grid(-0.2)} gray; display: flex; /* this is so that comments on notes appear beside the notes */ @@ -31,8 +30,8 @@ export const NotesAreaContainer = styled.div` ` export const ReadOnlyNotesAreaContainer = styled.div` - background: ${color.backgroundA}; - border-top: 1px solid ${color.gray90}; + background: ${th('color.backgroundA')}; + border-top: 1px solid ${th('color.gray90')}; grid-column-start: editorCol; grid-row-start: notesRow; width: 100%; @@ -59,7 +58,7 @@ export const NotesContainer = styled.div` ` export const NotesHeading = styled.div` - color: ${color.brand1.base}; + color: ${th('color.brand1.base')}; margin: 3px 7px 3px -25px; text-transform: uppercase; ` diff --git a/packages/client/app/components/wax-collab/src/layout/waxTheme.js b/packages/client/app/components/wax-collab/src/layout/waxTheme.js index 66f11ac18..92fbed325 100644 --- a/packages/client/app/components/wax-collab/src/layout/waxTheme.js +++ b/packages/client/app/components/wax-collab/src/layout/waxTheme.js @@ -1,9 +1,6 @@ -import theme from '../../../../theme' - // NOTE: this overrides the Kotahi default theme! const waxTheme = { - ...theme, gridUnit: '4px', borderRadius: '0', borderWidth: '1px', diff --git a/packages/client/app/pages/Group.page.tsx b/packages/client/app/pages/Group.page.tsx index b7013f5b3..67a90b687 100644 --- a/packages/client/app/pages/Group.page.tsx +++ b/packages/client/app/pages/Group.page.tsx @@ -5,22 +5,12 @@ import { ThemeProvider } from 'styled-components' import { GET_GROUPS } from '../queries' import { reloadTranslationsForGroup } from '../i18n' -import { - setBrandColors, - colorPrimaryDefault, - colorSecondaryDefault, -} from '../theme' +import { validateColor, makeTheme } from '../theme' import { Spinner, PageError } from '../components/shared' import ErrorPageFallback from '../ui/base/ErrorPageFallback' import { ConfigProvider } from '../components/config/src' import { YjsProvider } from '../components/provider-yjs/YjsProvider' import DynamicFavicon from '../dynamicFavicon' -import { validateColor } from '../theme/color' - -type ThemeOverrides = { - colorPrimary?: string - colorSecondary?: string -} const GroupPage = (): ReactNode => { const { groupName } = useParams() @@ -78,17 +68,20 @@ const GroupPage = (): ReactNode => { activeConfig?.flaxSiteUrl, ]) - const groupThemeOverrides: ThemeOverrides = useMemo(() => { - if (!config?.groupIdentity) return {} + const theme = useMemo(() => { + const defaultTheme = makeTheme() + if (!config?.groupIdentity) return defaultTheme const { primaryColor, secondaryColor } = config.groupIdentity const isPrimaryValid = validateColor(primaryColor) const isSecondaryValid = validateColor(secondaryColor) - return { - colorPrimary: isPrimaryValid ? primaryColor : colorPrimaryDefault, - colorSecondary: isSecondaryValid ? secondaryColor : colorSecondaryDefault, + if (!isPrimaryValid || !isSecondaryValid) { + console.error('Primary or secondary is not a valid color value.') + return defaultTheme } + + return makeTheme(primaryColor, secondaryColor) }, [config]) if (loading) return @@ -103,15 +96,9 @@ const GroupPage = (): ReactNode => { window.localStorage.setItem('groupId', currentGroup.id) - // TO DO - refactor colors so that the theme is not bypassed - setBrandColors( - config?.groupIdentity?.primaryColor, - config?.groupIdentity?.secondaryColor, - ) - // TO DO - should yjs provider wrap the whole group? return ( - + diff --git a/packages/client/app/start.js b/packages/client/app/start.js index 8f6db4927..cd43d7ee7 100644 --- a/packages/client/app/start.js +++ b/packages/client/app/start.js @@ -3,7 +3,7 @@ import { setContext } from '@apollo/client/link/context' import { startClient } from '@coko/client' -import theme from './theme' +import { makeTheme } from './theme' import routes from './DefaultPage' import './i18n' @@ -111,4 +111,6 @@ const makeApolloConfig = originalConfig => { } } +const theme = makeTheme() + startClient(routes, theme, { makeApolloConfig }) diff --git a/packages/client/app/theme/color.js b/packages/client/app/theme/color.js deleted file mode 100644 index b3770ff57..000000000 --- a/packages/client/app/theme/color.js +++ /dev/null @@ -1,138 +0,0 @@ -/* eslint-disable new-cap */ - -import Color from 'color' -import lightenBy from '../shared/lightenBy' - -const defaultBrandColor1 = '#2fac66' -const defaultBrandColor2 = '#704f79' - -export const validateColor = colorCode => { - try { - Color(colorCode) - return colorCode - } catch { - console.error(`${colorCode} is not a valid color code`) - return null - } -} - -const validateInstanceConfigColors = (colorCode, fallbackColor) => { - try { - Color(colorCode) - return colorCode - /* eslint-disable-next-line */ - } catch (err) { - return fallbackColor || defaultBrandColor1 - } -} - -let colorBrand1 = defaultBrandColor1 -let colorBrand2 = defaultBrandColor2 - -/** Colors are named with round numbers for ease of use. Actual lightness values may differ. */ -const color = { - black: '#000000', - gray0: '#000000', - gray5: '#111111', // 7%: colorText - gray10: '#191919', // 10% - gray20: '#323232', // 20% - gray30: '#4F4F4F', // 30% - // gray35: '#595959', // 35%: colorTextPlaceholder - gray40: '#666666', // 40%: colorIconPrimary - gray50: '#888888', // 53% - gray60: '#A5A5A5', // 65%: near colorBorder:#AAAAAA - gray70: '#BFBFBF', // 75% - gray80: '#DEDEDE', // 87%: colorContainerBorder - gray90: '#E8E8E8', // 91%: colorFurniture - gray95: '#EEEEEE', // 93% - gray97: '#F8F8F9', // 97% - gray99: '#FCFCFD', // 99% - gray100: '#FFFFFF', - white: '#FFFFFF', - - text: '#111111', - textReverse: '#FFFFFF', - textPlaceholder: '#666666', - - backgroundA: '#FFFFFF', - backgroundB: '#f9fafb', - backgroundC: '#f4f5f7', - - brand1: { - shade50: () => Color(colorBrand1).darken(0.52), - shade25: () => Color(colorBrand1).darken(0.27), - shade15: () => Color(colorBrand1).darken(0.17), - shade10: () => Color(colorBrand1).darken(0.11), - base: () => colorBrand1, - tint10: () => lightenBy(colorBrand1, 0.1), - tint25: () => lightenBy(colorBrand1, 0.26), - tint50: () => lightenBy(colorBrand1, 0.53), - tint70: () => lightenBy(colorBrand1, 0.73), - tint90: () => lightenBy(colorBrand1, 0.93), - }, - brand2: { - shade50: () => Color(colorBrand2).darken(0.52), - shade25: () => Color(colorBrand2).darken(0.27), - shade15: () => Color(colorBrand2).darken(0.17), - shade10: () => Color(colorBrand2).darken(0.11), - base: () => colorBrand2, - tint10: () => lightenBy(colorBrand2, 0.1), - tint25: () => lightenBy(colorBrand2, 0.26), - tint50: () => lightenBy(colorBrand2, 0.53), - tint70: () => lightenBy(colorBrand2, 0.73), - tint90: () => lightenBy(colorBrand2, 0.93), - }, - - success: { - shade50: '#133a0e', - shade25: '#1b5414', - shade15: '#25721c', - shade10: '#2c8a21', - base: '#329a25', - tint10: '#3bb32b', - tint25: '#4fcb3e', - tint50: '#8ddf83', - tint70: '#bcedb6', - tint90: '#e3f8e0', - }, - warning: { - shade50: '#6f3f00', - shade25: '#8e5000', - shade15: '#ae6200', - shade10: '#c56f00', - base: '#e48100', - tint10: '#f69414', - tint25: '#f8ae4c', - tint50: '#f6c88d', - tint70: '#fadfbe', - tint90: '#fdf1df', - }, - error: { - shade50: '#6f1919', - shade25: '#8a1e1e', - shade15: '#a52424', - shade10: '#bf2828', - base: '#d22b2b', - tint10: '#d94747', - tint25: '#e06969', - tint50: '#e88e8e', - tint70: '#f0b4b4', - tint90: '#f8dcdc', - }, - additional: { - blue: '#71AED2', - purple: '#615CCF', - aqua: '#7ED3A6', - green: '#89D46C', - mustard: '#CCD66E', - }, -} - -export const setBrandColors = (color1, color2) => { - colorBrand1 = validateInstanceConfigColors(color1, defaultBrandColor1) - colorBrand2 = validateInstanceConfigColors(color2, defaultBrandColor2) -} - -setBrandColors() - -export default color diff --git a/packages/client/app/theme/elements/Action.jsx b/packages/client/app/theme/elements/Action.jsx index 1a370be5e..965345a7f 100644 --- a/packages/client/app/theme/elements/Action.jsx +++ b/packages/client/app/theme/elements/Action.jsx @@ -2,7 +2,6 @@ import { css } from 'styled-components' import { th } from '@coko/client' -import color from '../color' const underlineFade = css` &::before { @@ -36,7 +35,7 @@ const underlineAnimation = css` } &::before { - background-color: ${color.brand1.base}; + background-color: ${th('color.brand1.base')}; bottom: 0; content: ''; height: 2px; diff --git a/packages/client/app/theme/elements/AppBar.jsx b/packages/client/app/theme/elements/AppBar.jsx index cd4be595f..dc2dbb4b3 100644 --- a/packages/client/app/theme/elements/AppBar.jsx +++ b/packages/client/app/theme/elements/AppBar.jsx @@ -1,5 +1,5 @@ import { css } from 'styled-components' -import color from '../color' +import { th } from '@coko/client' /* To disable underline from Logo @@ -7,7 +7,7 @@ import color from '../color' export default { Root: css` - box-shadow: 0 0 1px ${color.brand1.base}; + box-shadow: 0 0 1px ${th('color.brand1.base')}; margin-bottom: 1px; `, LogoLink: css` diff --git a/packages/client/app/theme/elements/Button.jsx b/packages/client/app/theme/elements/Button.jsx index c47637dbc..294fe6488 100644 --- a/packages/client/app/theme/elements/Button.jsx +++ b/packages/client/app/theme/elements/Button.jsx @@ -1,11 +1,10 @@ import { css } from 'styled-components' import { th } from '@coko/client' -import color from '../color' const secondary = css` background: none; border: none; - color: ${color.brand1.base}; + color: ${th('color.brand1.base')}; padding: 0; text-decoration: underline; @@ -14,12 +13,12 @@ const secondary = css` &:active { background: none; border: none; - color: ${color.brand1.shade25}; + color: ${th('color.brand1.shade25')}; outline: none; } &[disabled] { - color: ${color.gray40}; + color: ${th('color.gray40')}; cursor: default; &:hover { @@ -41,6 +40,6 @@ export default css` &:focus, &:hover { - background-color: ${color.brand1.tint25}; + background-color: ${th('color.brand1.tint25')}; } ` diff --git a/packages/client/app/theme/elements/Checkbox.jsx b/packages/client/app/theme/elements/Checkbox.jsx index 6b2cfadb7..ff6099a23 100644 --- a/packages/client/app/theme/elements/Checkbox.jsx +++ b/packages/client/app/theme/elements/Checkbox.jsx @@ -1,5 +1,5 @@ import { css, keyframes } from 'styled-components' -import color from '../color' +import { th } from '@coko/client' const checking = keyframes` 0% { @@ -25,11 +25,11 @@ const localBorderTwoSize = '1px' export default { Root: css` &:hover span { - color: ${color.brand1.base}; + color: ${th('color.brand1.base')}; &::before { animation: ${checking} 0.5s; - box-shadow: 0 0 0 ${localBorderTwoSize} ${color.brand1.base}; + box-shadow: 0 0 0 ${localBorderTwoSize} ${th('color.brand1.base')}; } } `, diff --git a/packages/client/app/theme/elements/GlobalStyle.jsx b/packages/client/app/theme/elements/GlobalStyle.jsx index 9db3ad9e5..f46dfd6cb 100644 --- a/packages/client/app/theme/elements/GlobalStyle.jsx +++ b/packages/client/app/theme/elements/GlobalStyle.jsx @@ -1,6 +1,5 @@ import { createGlobalStyle } from 'styled-components' import { th } from '@coko/client' -import color from '../color' export default createGlobalStyle` html { @@ -12,9 +11,9 @@ export default createGlobalStyle` } body { - background-color: ${color.backgroundA}; + background-color: ${th('color.backgroundA')}; box-sizing: border-box; - color: ${color.text}; + color: ${th('color.text')}; font-family: ${th('fontInterface')}, sans-serif; font-size: ${th('fontSizeBase')}; height: 100%; @@ -46,7 +45,7 @@ export default createGlobalStyle` } a { - color: ${color.brand1.base}; + color: ${th('color.brand1.base')}; } strong, diff --git a/packages/client/app/theme/elements/Radio.jsx b/packages/client/app/theme/elements/Radio.jsx index e0130bc9e..cdff0be1e 100644 --- a/packages/client/app/theme/elements/Radio.jsx +++ b/packages/client/app/theme/elements/Radio.jsx @@ -2,7 +2,6 @@ import { css, keyframes } from 'styled-components' import { th } from '@coko/client' -import color from '../color' const checking = keyframes` 0% { @@ -26,13 +25,15 @@ export default { Root: css` &:hover { span { - color: ${props => (props.checked ? 'inherit' : color.brand1.base)}; + color: ${props => + props.checked ? 'inherit' : props.theme.color.brand1.base}; &::before { animation-duration: ${th('transitionDuration')}; animation-name: ${props => (props.checked ? 'none' : checking)}; box-shadow: 0 0 0 ${th('borderWidth')} - ${props => (props.checked ? 'currentColor' : color.brand1.base)}; + ${props => + props.checked ? 'currentColor' : props.theme.color.brand1.base}; } } } @@ -48,7 +49,7 @@ export default { border-radius: 50%; box-shadow: 0 0 0 ${th('borderWidth')} currentColor; - color: ${props => (props.color ? props.color : color.text)}; + color: ${props => (props.color ? props.color : props.theme.color.text)}; content: ' '; display: inline-block; height: calc(${th('gridUnit')} * 2); diff --git a/packages/client/app/theme/elements/TextField.jsx b/packages/client/app/theme/elements/TextField.jsx index 583293dc8..d5c064a7e 100644 --- a/packages/client/app/theme/elements/TextField.jsx +++ b/packages/client/app/theme/elements/TextField.jsx @@ -1,6 +1,5 @@ import { css } from 'styled-components' import { th, grid } from '@coko/client' -import color from '../color' export default { Input: css` @@ -41,7 +40,7 @@ export default { case 'error': return props.theme.colorError default: - return color.brand1.base + return props.theme.color.brand1.base } }}; box-shadow: ${th('boxShadow')}; diff --git a/packages/client/app/theme/index.jsx b/packages/client/app/theme/index.jsx index 4b4fe46ad..202a9a81e 100644 --- a/packages/client/app/theme/index.jsx +++ b/packages/client/app/theme/index.jsx @@ -1,4 +1,8 @@ +/* eslint-disable new-cap */ + import { css } from 'styled-components' +import Color from 'color' + import { Action, ActionGroup, @@ -12,9 +16,6 @@ import { Logo, } from './elements' import lightenBy from '../shared/lightenBy' -import color, { setBrandColors as internalSetBrandColors } from './color' -import spacing from './spacing' -import typography from './typography' // Fonts import '@fontsource/roboto/400.css' @@ -23,44 +24,189 @@ import '@fontsource/roboto/700.css' import '@fontsource/roboto/900.css' import '@fontsource/roboto/400-italic.css' -const cokoTheme = { - color, - spacing, - typography, +export const validateColor = colorCode => { + try { + Color(colorCode) + return colorCode + } catch { + console.error(`${colorCode} is not a valid color code`) + return null + } +} + +const defaultBrandColor1 = '#3aae2a' +const defaultBrandColor2 = '#9e9e9e' + +export const makeTheme = ( + colorBrand1 = defaultBrandColor1, + colorBrand2 = defaultBrandColor2, +) => ({ + color: { + black: '#000000', + gray0: '#000000', + gray5: '#111111', // 7%: colorText + gray10: '#191919', // 10% + gray20: '#323232', // 20% + gray30: '#4F4F4F', // 30% + // gray35: '#595959', // 35%: colorTextPlaceholder + gray40: '#666666', // 40%: colorIconPrimary + gray50: '#888888', // 53% + gray60: '#A5A5A5', // 65%: near colorBorder:#AAAAAA + gray70: '#BFBFBF', // 75% + gray80: '#DEDEDE', // 87%: colorContainerBorder + gray90: '#E8E8E8', // 91%: colorFurniture + gray95: '#EEEEEE', // 93% + gray97: '#F8F8F9', // 97% + gray99: '#FCFCFD', // 99% + gray100: '#FFFFFF', + white: '#FFFFFF', + + text: '#111111', + textReverse: '#FFFFFF', + textPlaceholder: '#666666', + + backgroundA: '#FFFFFF', + backgroundB: '#f9fafb', + backgroundC: '#f4f5f7', + + brand1: { + shade50: Color(colorBrand1).darken(0.52), + shade25: Color(colorBrand1).darken(0.27), + shade15: Color(colorBrand1).darken(0.17), + shade10: Color(colorBrand1).darken(0.11), + base: colorBrand1, + tint10: lightenBy(colorBrand1, 0.1), + tint25: lightenBy(colorBrand1, 0.26), + tint50: lightenBy(colorBrand1, 0.53), + tint70: lightenBy(colorBrand1, 0.73), + tint90: lightenBy(colorBrand1, 0.93), + }, + brand2: { + shade50: Color(colorBrand2).darken(0.52), + shade25: Color(colorBrand2).darken(0.27), + shade15: Color(colorBrand2).darken(0.17), + shade10: Color(colorBrand2).darken(0.11), + base: colorBrand2, + tint10: lightenBy(colorBrand2, 0.1), + tint25: lightenBy(colorBrand2, 0.26), + tint50: lightenBy(colorBrand2, 0.53), + tint70: lightenBy(colorBrand2, 0.73), + tint90: lightenBy(colorBrand2, 0.93), + }, + + success: { + shade50: '#133a0e', + shade25: '#1b5414', + shade15: '#25721c', + shade10: '#2c8a21', + base: '#329a25', + tint10: '#3bb32b', + tint25: '#4fcb3e', + tint50: '#8ddf83', + tint70: '#bcedb6', + tint90: '#e3f8e0', + }, + warning: { + shade50: '#6f3f00', + shade25: '#8e5000', + shade15: '#ae6200', + shade10: '#c56f00', + base: '#e48100', + tint10: '#f69414', + tint25: '#f8ae4c', + tint50: '#f6c88d', + tint70: '#fadfbe', + tint90: '#fdf1df', + }, + error: { + shade50: '#6f1919', + shade25: '#8a1e1e', + shade15: '#a52424', + shade10: '#bf2828', + base: '#d22b2b', + tint10: '#d94747', + tint25: '#e06969', + tint50: '#e88e8e', + tint70: '#f0b4b4', + tint90: '#f8dcdc', + }, + additional: { + blue: '#71AED2', + purple: '#615CCF', + aqua: '#7ED3A6', + green: '#89D46C', + mustard: '#CCD66E', + }, + }, + spacing: { + /** 1px */ + a: '1px', + /** 2px */ + b: '2px', + /** 3px */ + c: '3px', + /** 5px */ + d: '5px', + /** 7.5px */ + e: '7.5px', + /** 15px */ + f: '15px', + /** 30px */ + g: '30px', + /** 45px */ + h: '45px', + /** 60px */ + i: '60px', + /** 90px */ + j: '90px', + /** 135px */ + k: '135px', + }, + typography: { + fonts: { + size: { + small: '12px', + small2: '14px', + regular: '16px', + large: '20px', + large2: '30px', + }, + }, + }, /* Colors */ // TODO Deprecate these in favour of definitions in color.js /** @deprecated in favor of color.backgroundA */ - colorBackground: color.backgroundA, + colorBackground: '#FFFFFF', /** @deprecated in favor of color.backgroundB */ - colorSecondaryBackground: color.backgroundB, + colorSecondaryBackground: '#f9fafb', /** @deprecated in favor of color.brand1.base */ - colorPrimary: color.brand1.base(), + colorPrimary: colorBrand1, /** @deprecated in favor of color.brand2.base */ - colorSecondary: color.brand2.base(), + colorSecondary: colorBrand2, /** @deprecated in favor of color.gray90 */ - colorFurniture: color.gray90, + colorFurniture: '#E8E8E8', /** @deprecated in favor of color.gray60 */ - colorBorder: color.gray60, + colorBorder: '#A5A5A5', /** @deprecated in favor of color.backgroundC */ - colorBackgroundHue: color.backgroundC, + colorBackgroundHue: '#f4f5f7', colorSuccess: '#008800', colorError: '#FF2D1A', /** @deprecated in favor of color.text */ - colorText: color.text, + colorText: '#111111', /** @deprecated in favor of color.textReverse */ - colorTextReverse: color.textReverse, + colorTextReverse: '#FFFFFF', /** @deprecated in favor of color.textPlaceholder */ - colorTextPlaceholder: color.textPlaceholder, + colorTextPlaceholder: '#666666', colorWarning: '#ffc107', colorWarningLight: '#fff9ed', colorWarningDark: '#503303', colorSuccessLight: '#d2ffcc', colorSuccessDark: '#17510F', /** @deprecated in favor of color.gray40 */ - colorIconPrimary: color.gray40, + colorIconPrimary: '#666666', /** @deprecated in favor of color.gray80 */ - colorContainerBorder: color.gray80, + colorContainerBorder: '#DEDEDE', /* Text variables */ @@ -197,21 +343,4 @@ const cokoTheme = { `, }, }, -} - -export const colorPrimaryDefault = '#3aae2a' -export const colorSecondaryDefault = '#9e9e9e' - -export const setBrandColors = ( - color1 = colorPrimaryDefault, - color2 = colorSecondaryDefault, -) => { - cokoTheme.colorPrimary = color1 - cokoTheme.colorSecondary = color2 - internalSetBrandColors(color1, color2) -} - -export { color } -export { spacing as space } - -export default cokoTheme +}) diff --git a/packages/client/app/theme/spacing.js b/packages/client/app/theme/spacing.js deleted file mode 100644 index ba8b12520..000000000 --- a/packages/client/app/theme/spacing.js +++ /dev/null @@ -1,28 +0,0 @@ -// TODO : Remove after replacing throghout kotahi - -const spacing = { - /** 1px */ - a: '1px', - /** 2px */ - b: '2px', - /** 3px */ - c: '3px', - /** 5px */ - d: '5px', - /** 7.5px */ - e: '7.5px', - /** 15px */ - f: '15px', - /** 30px */ - g: '30px', - /** 45px */ - h: '45px', - /** 60px */ - i: '60px', - /** 90px */ - j: '90px', - /** 135px */ - k: '135px', -} - -export default spacing diff --git a/packages/client/app/theme/typography.js b/packages/client/app/theme/typography.js deleted file mode 100644 index 73e3c9e1e..000000000 --- a/packages/client/app/theme/typography.js +++ /dev/null @@ -1,13 +0,0 @@ -const typography = { - fonts: { - size: { - small: '12px', - small2: '14px', - regular: '16px', - large: '20px', - large2: '30px', - }, - }, -} - -export default typography diff --git a/packages/client/stories_backup/reporting/CardCollection.stories.jsx b/packages/client/stories_backup/reporting/CardCollection.stories.jsx index fd4c2d88c..7beb766e9 100644 --- a/packages/client/stories_backup/reporting/CardCollection.stories.jsx +++ b/packages/client/stories_backup/reporting/CardCollection.stories.jsx @@ -12,7 +12,6 @@ // getReviewersConcentricBarChartData, // } from './mockReportingData' // import DesignEmbed from '../common/utils' -// import { color } from '../../app/theme' // const Header = styled.div` // color: ${color.brand1.base};