diff --git a/src/browser/components/DataTables.jsx b/src/browser/components/DataTables.jsx index 68f1c23d998..3cff086d8a9 100644 --- a/src/browser/components/DataTables.jsx +++ b/src/browser/components/DataTables.jsx @@ -25,7 +25,8 @@ export const StyledTable = styled.table` margin-bottom: 0 ` export const StyledBodyTr = styled.tr` - background-color: #fff + background-color: ${props => props.theme.secondaryBackground}; + color: ${props => props.theme.secondaryText}; ` export const StyledTh = styled.th` text-align: left @@ -43,12 +44,12 @@ export const StyledTd = styled.td` ` export const StyledJsonPre = styled.pre` - background-color: #eee; + background-color: ${props => props.theme.preBackground}; -webkit-border-radius: 5px; border-radius: 5px; margin: 20px 10px; border-bottom: none; - color: #666; + color: ${props => props.theme.preText}; line-height: 26px; padding: 2px 10px; max-width: 320px; diff --git a/src/browser/components/Tables.jsx b/src/browser/components/Tables.jsx index 689069a892b..fedcca6c046 100644 --- a/src/browser/components/Tables.jsx +++ b/src/browser/components/Tables.jsx @@ -23,20 +23,21 @@ import styled from 'styled-components' const StyledTable = styled.table` border-radius: 4px; margin: 0 15px 20px 15px; - background-color: #fff; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05); box-shadow: 0 1px 1px rgba(0,0,0,.05); ` const StyledTr = styled.tr` padding: 10px 15px; border: 1px solid #ddd; + background-color: ${props => props.theme.secondaryBackground}; + color: ${props => props.theme.secondaryText}; ` const StyledTh = styled.th` font-size: 18px; -webkit-column-span: all; column-span: all; text-align: left; - background-color: #f5f5f5; + background-color: ${props => props.theme.secondaryBackground}; border-color: #ddd; padding: 10px 15px ` diff --git a/src/browser/components/Text.jsx b/src/browser/components/Text.jsx new file mode 100644 index 00000000000..8764100dece --- /dev/null +++ b/src/browser/components/Text.jsx @@ -0,0 +1,29 @@ +/* + * Copyright (c) 2002-2017 "Neo Technology," + * Network Engine for Objects in Lund AB [http://neotechnology.com] + * + * This file is part of Neo4j. + * + * Neo4j is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +import styled from 'styled-components' + +export const Lead = styled.p` + font-weight: 300; + font-size: 15px; + line-height: 22px; + font-family: ${props => props.theme.primaryFontFamily}; + color: ${props => props.theme.headerText}; +` diff --git a/src/browser/components/buttons/index.jsx b/src/browser/components/buttons/index.jsx index c162910d464..ce512cb0019 100644 --- a/src/browser/components/buttons/index.jsx +++ b/src/browser/components/buttons/index.jsx @@ -108,23 +108,23 @@ export const NavigationButtonContainer = styled.li` ` const StyledFormButton = styled.button` - color: ${props => props.theme.primaryText}; - background-color: #fff; + color: ${props => props.theme.secondaryButtonText}; + background-color: ${props => props.theme.secondaryButtonBackground}; + border: ${props => props.theme.secondaryButtonBorder}; + font-family: ${props => props.theme.primaryFontFamily}; padding: 6px 12px; - border-color: #ccc; font-weight: 400; font-size: 14px; - font-family: ${props => props.theme.primaryFontFamily}; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; - border: ${props => props.theme.formButtonBorder}; border-radius: 4px; line-height: 20px; &:hover { - background-color: ${props => props.theme.formButtonBackgroundHover}; - border: ${props => props.theme.formButtonBorderHover} + background-color: ${props => props.theme.secondaryButtonBackgroundHover}; + color: ${props => props.theme.secondaryButtonTextHover}; + border: ${props => props.theme.secondaryButtonBorderHover}; } ` @@ -183,13 +183,15 @@ const StyledCypherFrameButton = styled.li` text-align: center; &:hover { background-color: ${props => props.theme.secondaryButtonBackgroundHover}; - color: ${props => props.theme.editorBarBackground}; + color: ${props => props.theme.secondaryButtonTextHover}; + fill: ${props => props.theme.secondaryButtonTextHover}; text-decoration: none; } ` const StyledSelectedCypherFrameButton = styled(StyledCypherFrameButton)` background-color: ${props => props.theme.secondaryButtonBackgroundHover}; - color: ${props => props.theme.editorBarBackground}; + color: ${props => props.theme.secondaryButtonTextHover}; + fill: ${props => props.theme.secondaryButtonTextHover}; ` export const FrameButton = (props) => { const {pressed, children, ...rest} = props @@ -199,7 +201,6 @@ const StyledFrameButton = styled.li` color: ${props => props.theme.secondaryButtonText}; background-color: transparent; border-left: ${props => props.theme.inFrameBorder}; - border-right: ${props => props.theme.inFrameBorder}; height: ${dim.frameTitlebarHeight}px; width: 41px; cursor: pointer; @@ -209,15 +210,15 @@ const StyledFrameButton = styled.li` display: inline-block; &:hover { background-color: ${props => props.theme.secondaryButtonBackgroundHover}; - color: ${props => props.theme.secondaryBackground}; - fill: ${props => props.theme.secondaryBackground}; + color: ${props => props.theme.secondaryButtonTextHover}; + fill: ${props => props.theme.secondaryButtonTextHover}; text-decoration: none; } ` const StyledFrameButtonPressed = styled(StyledFrameButton)` background-color: ${props => props.theme.secondaryButtonBackgroundHover}; - color: ${props => props.theme.secondaryBackground}; - fill: ${props => props.theme.secondaryBackground}; + color: ${props => props.theme.secondaryButtonTextHover}; + fill: ${props => props.theme.secondaryButtonTextHover}; ` export const DefaultA = styled.a` color: ${props => props.theme.secondaryButtonText}; diff --git a/src/browser/modules/App/styled.jsx b/src/browser/modules/App/styled.jsx index 501b108675d..ae9b00375e4 100644 --- a/src/browser/modules/App/styled.jsx +++ b/src/browser/modules/App/styled.jsx @@ -49,10 +49,11 @@ export const StyledBody = styled.div` export const StyledMainWrapper = styled.div` flex: auto; - background-color: #D2D5DA; overflow: auto; padding: 0; z-index: 1; height: auto; width: 0; + background-color: ${props => props.theme.primaryBackground}; + color: ${props => props.theme.primaryText}; ` diff --git a/src/browser/modules/D3Visualization/components/styled.jsx b/src/browser/modules/D3Visualization/components/styled.jsx index 08607df8c98..d644fd783e0 100644 --- a/src/browser/modules/D3Visualization/components/styled.jsx +++ b/src/browser/modules/D3Visualization/components/styled.jsx @@ -24,6 +24,20 @@ export const legendRowHeight = 32 export const inspectorFooterContractedHeight = 22 const pMarginTop = 6 +// Themes is here because the colors are unique to this component +const getColor = (theme, name) => { + const themes = { + normal: { + svgBackground: '#f9fbfd' + }, + dark: { + svgBackground: '#5a6070' + } + } + if (themes[theme] === undefined) theme = 'normal' + return themes[theme][name] || '' +} + export const StyledSvgWrapper = styled.div` line-height: 0; height: 100%; @@ -31,7 +45,7 @@ export const StyledSvgWrapper = styled.div` > svg { height: 100%; width: 100%; - background-color: #f9fbfd; + background-color: ${props => getColor(props.theme.name, 'svgBackground')}; .node { cursor: pointer; > .ring { @@ -181,10 +195,10 @@ export const StyledStatusBarWrapper = styled.div` export const StyledStatusBar = styled.div` min-height: 39px; line-height: 39px; - color: #788185; + color: ${props => props.theme.secondaryText}; font-size: 13px; position: relative; - background-color: #fff; + background-color: ${props => props.theme.secondaryBackground}; white-space: nowrap; overflow: hidden; border-top: 1px solid #e6e9ef; @@ -256,7 +270,7 @@ export const StyledLegendRow = styled.div` } ` export const StyledLegend = styled.div` - background-color: #eef1f8; + background-color: ${props => props.theme.secondaryBackground}; margin-top: -${(legendRowHeight * 2) + 1}px; &.one-row { margin-top: -${legendRowHeight}px; diff --git a/src/browser/modules/Editor/styled.jsx b/src/browser/modules/Editor/styled.jsx index e58ab4e259c..194902b5cc5 100644 --- a/src/browser/modules/Editor/styled.jsx +++ b/src/browser/modules/Editor/styled.jsx @@ -59,7 +59,11 @@ const BaseEditorWrapper = styled.div` padding: ${editorPadding}px; background-color: ${props => props.theme.editorBarBackground}; font-family: Monaco,"Courier New",Terminal,monospace; - min-Height: ${props => Math.max(dim.editorbarHeight, props.minHeight + editorPadding * 2)}px + min-Height: ${props => Math.max(dim.editorbarHeight, props.minHeight + editorPadding * 2)}px; + .CodeMirror { + background-color: ${props => props.theme.editorBackground} !important; + color: ${props => props.theme.editorCommandColor}; + } ` export const EditorWrapper = styled(BaseEditorWrapper)` diff --git a/src/browser/modules/Guides/Slide.jsx b/src/browser/modules/Guides/Slide.jsx index b4c5bc2147c..e7145675c83 100644 --- a/src/browser/modules/Guides/Slide.jsx +++ b/src/browser/modules/Guides/Slide.jsx @@ -19,8 +19,10 @@ */ import styles from './style.css' +import { StyledSlide } from './styled.jsx' + const Slide = ({html}) => { - return (
) + return () } export default Slide diff --git a/src/browser/modules/Guides/styled.jsx b/src/browser/modules/Guides/styled.jsx index 963ccd78b94..1c7b81644da 100644 --- a/src/browser/modules/Guides/styled.jsx +++ b/src/browser/modules/Guides/styled.jsx @@ -62,3 +62,41 @@ export const CarouselIndicatorActive = styled(CarouselIndicator)` export const StyledUl = styled.ul` margin: 15px; ` + +export const StyledSlide = styled.div` + color: ${props => props.theme.primaryText}; + & p.lead, .title, .subtitle, .content > p, .table-help { + color: ${props => props.theme.primaryText} !important; + } + & a { + color: ${props => props.theme.link}; + text-decoration: ${props => props.theme.name === 'dark' ? 'underline' : 'none'}; + } + & kbd { + color: ${props => props.theme.primaryBackground} !important; /* inverted */ + background-color: ${props => props.theme.primaryText} !important; + } + & .content > pre { + background-color: ${props => props.theme.secondaryBackground}; + color: ${props => props.theme.preText}; + } + & pre.runnable { + background-color: ${props => props.theme.preBackground}; + color: ${props => props.theme.preText}; + } + & pre.content { + background-color: ${props => props.theme.secondaryBackground}; + color: ${props => props.theme.preText}; + } + & a[help-topic], a[play-topic], a[server-topic], a[exec-topic] { + background-color: ${props => props.theme.topicBackground} !important; + color: ${props => props.theme.topicText} !important; + } + & button [help-topic], button [play-topic], button [server-topic], button [exec-topic] { + background-color: ${props => props.theme.primaryButtonBackground}; + color: ${props => props.theme.primaryButtonText}; + } + .code { + background-color: transparent; + } +` diff --git a/src/browser/modules/Main/styled.jsx b/src/browser/modules/Main/styled.jsx index 448bd42e985..762881077bc 100644 --- a/src/browser/modules/Main/styled.jsx +++ b/src/browser/modules/Main/styled.jsx @@ -37,7 +37,6 @@ export const StyledMain = styled.div` flex: 0 0 auto; display: flex; flex-direction: column; - background-color: #D2D5DA; min-width: 0; position: relative; height: 100vh; diff --git a/src/browser/modules/Sidebar/Settings.jsx b/src/browser/modules/Sidebar/Settings.jsx index e4b62917cf7..22948887fdf 100644 --- a/src/browser/modules/Sidebar/Settings.jsx +++ b/src/browser/modules/Sidebar/Settings.jsx @@ -33,7 +33,7 @@ const visualSettings = theme: { displayName: 'Theme', type: 'radio', - options: ['normal', 'outline'] + options: ['normal', 'outline', 'dark'] } }, { diff --git a/src/browser/modules/Stream/Auth/ChangePasswordFrame.jsx b/src/browser/modules/Stream/Auth/ChangePasswordFrame.jsx index 91133e3af54..e6783dfe02a 100644 --- a/src/browser/modules/Stream/Auth/ChangePasswordFrame.jsx +++ b/src/browser/modules/Stream/Auth/ChangePasswordFrame.jsx @@ -24,7 +24,8 @@ import ConnectionForm from './ConnectionForm' import FrameTemplate from '../FrameTemplate' import FrameError from '../FrameError' import Render from 'browser-components/Render' -import {H3} from 'browser-components/headers' +import { H3 } from 'browser-components/headers' +import { Lead } from 'browser-components/Text' import { StyledConnectionFrame, StyledConnectionAside, @@ -73,10 +74,10 @@ export class ChangePasswordFrame extends Component {

Password change

- Enter your current password and the new twice to change your password. + Enter your current password and the new twice to change your password. - Password change successful + Password change successful diff --git a/src/browser/modules/Stream/Auth/ConnectionFrame.jsx b/src/browser/modules/Stream/Auth/ConnectionFrame.jsx index 2e42223b2d0..29dcfe51965 100644 --- a/src/browser/modules/Stream/Auth/ConnectionFrame.jsx +++ b/src/browser/modules/Stream/Auth/ConnectionFrame.jsx @@ -24,6 +24,8 @@ import FrameTemplate from '../FrameTemplate' import ConnectionForm from './ConnectionForm' import FrameError from '../FrameError' import {H3} from 'browser-components/headers' +import { Lead } from 'browser-components/Text' + import Render from 'browser-components/Render' import { StyledConnectionFrame, @@ -53,16 +55,16 @@ export class ConnectionFrame extends Component { - +

Connect to Neo4j

- Database access requires an authenticated connection. - + Database access requires an authenticated connection. +
- +

Connected to Neo4j

- Nice to meet you. - + Nice to meet you. +
diff --git a/src/browser/modules/Stream/Auth/DisconnectFrame.jsx b/src/browser/modules/Stream/Auth/DisconnectFrame.jsx index 96477376d3c..866aa80af04 100644 --- a/src/browser/modules/Stream/Auth/DisconnectFrame.jsx +++ b/src/browser/modules/Stream/Auth/DisconnectFrame.jsx @@ -20,7 +20,8 @@ import FrameTemplate from '../FrameTemplate' import { StyledConnectionFrame, StyledConnectionAside } from './styled' -import {H3} from 'browser-components/headers' +import { H3 } from 'browser-components/headers' +import { Lead } from 'browser-components/Text' import Render from 'browser-components/Render' const Disconnect = ({frame, activeConnectionData}) => { @@ -31,16 +32,20 @@ const Disconnect = ({frame, activeConnectionData}) => { - +

Connected

- {'You\'re still connected'} - + + You're still connected + +
- +

Disconnected

- You are disconnected from the server - + + You are disconnected from the server + +
diff --git a/src/browser/modules/Stream/HistoryFrame.jsx b/src/browser/modules/Stream/HistoryFrame.jsx index 551cf975fdc..cd9ac905216 100644 --- a/src/browser/modules/Stream/HistoryFrame.jsx +++ b/src/browser/modules/Stream/HistoryFrame.jsx @@ -21,10 +21,9 @@ import { withBus } from 'preact-suber' import * as editor from 'shared/modules/editor/editorDuck' import FrameTemplate from './FrameTemplate' +import { StyledHistoryList } from './styled' import HistoryRow from './HistoryRow' -import styles from './style_history.css' - export const HistoryFrame = (props) => { const {frame, bus} = props const onHistoryClick = (cmd) => { @@ -36,7 +35,7 @@ export const HistoryFrame = (props) => { return ( {historyRows}} + contents={{historyRows}} /> ) } diff --git a/src/browser/modules/Stream/HistoryRow.jsx b/src/browser/modules/Stream/HistoryRow.jsx index 230db33af56..f1f37b08172 100644 --- a/src/browser/modules/Stream/HistoryRow.jsx +++ b/src/browser/modules/Stream/HistoryRow.jsx @@ -18,7 +18,9 @@ * along with this program. If not, see . */ +import { StyledHistoryRow } from './styled' + const HistoryRow = ({entry, handleEntryClick}) => { - return
  • handleEntryClick(entry)}>{entry}
    • + return handleEntryClick(entry)}>{entry} } export default HistoryRow diff --git a/src/browser/modules/Stream/Views/CodeView.jsx b/src/browser/modules/Stream/Views/CodeView.jsx index aa50fe057f0..3a4c9fb2ac2 100644 --- a/src/browser/modules/Stream/Views/CodeView.jsx +++ b/src/browser/modules/Stream/Views/CodeView.jsx @@ -18,35 +18,34 @@ * along with this program. If not, see . */ -import style from './code_style.css' -import { PaddedDiv } from '../styled' +import { PaddedDiv, StyledTable, StyledTBody, StyledAlteringTr, StyledStrongTd, StyledTd } from '../styled' const CodeView = ({request, query, style: displayStyle}) => { if (request.status !== 'success') return null return ( - - - - - - - - - - - - - - - - - - - -
    Server version{request.result.summary.server.version}
    Server address{request.result.summary.server.address}
    Query{query}
    Response + + + + Server version + {request.result.summary.server.version} + + + Server address + {request.result.summary.server.address} + + + Query + {query} + + + Response + 
    {JSON.stringify(request.result.records, null, 2)}
    -
    + + + +     ) } diff --git a/src/browser/modules/Stream/Views/code_style.css b/src/browser/modules/Stream/Views/code_style.css deleted file mode 100644 index 83f1c5bc46a..00000000000 --- a/src/browser/modules/Stream/Views/code_style.css +++ /dev/null @@ -1,12 +0,0 @@ -.altRows tr:nth-child(even) { - background-color: #ddd -} - -.altRows td:first-child { - vertical-align: top; - width: 170px; -} - -.bold { - font-weight: bold; -} diff --git a/src/browser/modules/Stream/style_history.css b/src/browser/modules/Stream/style_history.css deleted file mode 100644 index 0f9abdbad94..00000000000 --- a/src/browser/modules/Stream/style_history.css +++ /dev/null @@ -1,12 +0,0 @@ -.history-list { - list-style: none; - li { - border: 1px solid black; - margin: 10px; - padding: 10px; - cursor: pointer; - } - li:hover { - background-color: #ddd - } -} diff --git a/src/browser/modules/Stream/styled.jsx b/src/browser/modules/Stream/styled.jsx index 225e9c38da9..1a2f0c5f974 100644 --- a/src/browser/modules/Stream/styled.jsx +++ b/src/browser/modules/Stream/styled.jsx @@ -48,7 +48,7 @@ const rollDownAnimation = keyframes` // Frames export const StyledFrame = styled.article` width: auto; - background-color: #fff; + background-color: ${props => props.theme.secondaryBackground}; box-shadow: 0 1px 4px rgba(0,0,0,.1); animation: ${rollDownAnimation} .2s linear; border: ${props => props.theme.frameBorder}; @@ -132,10 +132,12 @@ export const FrameTitlebarButtonSection = styled.ul` padding-left: 0; margin: 0; margin-left: auto; + color: ${props => props.theme.secondaryButtonText}; ` export const StyledFrameCommand = styled.label` font-family: ${props => props.theme.editorFont}; + color: ${props => props.theme.secondaryButtonText}; font-size: 1.2em; line-height: 2.2em; margin: 3px 5px 3px 15px; @@ -228,7 +230,8 @@ export const StyledPreformattedArea = styled.pre` margin: 0; background: none; border: none; - background-color: #f5f5f5; + background-color: ${props => props.theme.primaryBackground}; + color: ${props => props.theme.preText}; ` export const ErrorText = styled.span` @@ -244,10 +247,10 @@ export const StyledStatsBarContainer = styled.div` export const StyledStatsBar = styled.div` min-height: 39px; line-height: 39px; - color: #788185; + color: ${props => props.theme.secondaryText}; font-size: 13px; position: relative; - background-color: #fff; + background-color: ${props => props.theme.secondaryBackground}; white-space: nowrap; overflow: hidden; padding-left: 24px; @@ -272,7 +275,6 @@ export const DropdownButton = styled.li` color: ${props => props.theme.secondaryButtonText}; background-color: transparent; border-left: ${props => props.theme.inFrameBorder}; - border-right: ${props => props.theme.inFrameBorder}; height: ${dim.frameTitlebarHeight}px; width: 41px; cursor: pointer; @@ -282,8 +284,8 @@ export const DropdownButton = styled.li` float: left; &:hover { background-color: ${props => props.theme.secondaryButtonBackgroundHover}; - color: ${props => props.theme.secondaryBackground}; - fill: ${props => props.theme.secondaryBackground}; + color: ${props => props.theme.secondaryButtonTextHover}; + fill: ${props => props.theme.secondaryButtonTextHover}; text-decoration: none; } display: inline-block; @@ -301,8 +303,8 @@ export const DropdownList = styled.ul` export const DropdownContent = styled.li` display: none; position: absolute; - background-color: #ffffff; - color: #262626; + background-color: ${props => props.theme.secondaryBackground}; + color: ${props => props.theme.secondaryButtonText}; width: 100px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); border-radius: 6px; @@ -312,14 +314,14 @@ export const DropdownContent = styled.li` ` export const DropdownItem = styled.a` - background-color: #ffffff; - color: #262626; + background-color: ${props => props.theme.secondaryBackground}; + color: ${props => props.theme.secondaryButtonText}; width: 100%; display: inline-block; &:hover { - color: #262626; + color: ${props => props.theme.secondaryButtonTextHover}; text-decoration: none; - background-color: #f5f5f5; + background-color: ${props => props.theme.secondaryButtonBackgroundHover}; } ` @@ -389,3 +391,41 @@ export const StyledWidthSlider = styled.input` outline: none; } ` + +export const StyledTable = styled.table` + margin-top: 30px; +` + +export const StyledTBody = styled.tbody` + & td:first-child { + vertical-align: top; + width: 170px; + } +` + +export const StyledAlteringTr = styled.tr` + &:nth-child(even) { + background-color: ${props => props.theme.alteringTableRowBackground}; + } +` + +export const StyledStrongTd = styled.td` + font-weight: bold; +` + +export const StyledTd = styled.td` +` + +export const StyledHistoryList = styled.ul` + list-style: none; +` + +export const StyledHistoryRow = styled.li` + border: 1px solid black; + margin: 10px; + padding: 10px; + cursor: pointer; + &:hover { + background-color: ${props => props.theme.primaryBackground}; + } +` diff --git a/src/browser/styles/themes.js b/src/browser/styles/themes.js index 9528286a87a..45b9a991577 100644 --- a/src/browser/styles/themes.js +++ b/src/browser/styles/themes.js @@ -19,25 +19,34 @@ */ export const base = { + name: 'base', // Text colors primaryText: '#333', - secondaryText: '#fff', + secondaryText: '#717172', headerText: '#333', asideText: '#666', link: '#428BCA', linkHover: '#5dade2', + editorCommandColor: '#333', + topicText: '#428BCA', + preText: '#333', // Backgrounds - primaryBackground: '#eee', + primaryBackground: '#D2D5DA', secondaryBackground: '#fff', editorBarBackground: '#EFEFF4', + editorBackground: '#fff', drawerBackground: '#30333a', + topicBackground: '#f8f8f8', + preBackground: '#f5f5f5', + alteringTableRowBackground: '#f5f5f5', // Fonts primaryFontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif', drawerHeaderFontFamily: "'Open Sans', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif", streamlineFontFamily: 'streamline', editorFont: '"Inconsolata", "Monaco", "Lucida Console", Courier, monospace;', + // Headers primaryHeaderText: '#fff', @@ -48,33 +57,77 @@ export const base = { auth: '#428BCA', // Buttons - primaryButtonText: '', - primaryButtonBackground: '', + primaryButtonText: '#fff', + primaryButtonBackground: '#008cc1', secondaryButtonText: '#717172', secondaryButtonBorder: '1px solid #717172', secondaryButtonBackground: 'transparent', - secondaryButtonTextHover: '#40454F', + secondaryButtonTextHover: '#fff', secondaryButtonBorderHover: '1px solid #717172', secondaryButtonBackgroundHover: '#717172', formButtonBorder: '1px solid #ccc', formButtonBorderHover: '1px solid ##adadad', formButtonBackgroundHover: '#e6e6e6', - // Frame + // Borders frameBorder: 'none', inFrameBorder: '1px solid #e6e9ef', + topicBorder: '1px solid #dadada', + + // Frame frameSidebarBackground: '#F8F9FB', frameTitlebarText: '#717172' } export const normal = { - ...base + ...base, + name: 'normal' } export const outline = { ...base, + name: 'outline', primaryText: '#000', secondaryText: '#000', frameBorder: '1px solid #000', - inFrameBorder: '1px solid #000' + inFrameBorder: '1px solid #000', + topicBorder: '1px solid #000' +} + +export const dark = { + ...base, + name: 'dark', + + primaryText: '#f4f4f4', + secondaryText: '#eee', + headerText: '#f4f4f4', + primaryHeaderText: '#f4f4f4', + editorCommandColor: '#1abc9c', + link: '#f4f4f4', + topicText: '#fff', + preText: '#fff', + + // Backgrounds + primaryBackground: '#282c32', + secondaryBackground: '#5a6070', + editorBarBackground: '#5a6070', + editorBackground: '#282c32', + drawerBackground: '#30333a', + frameSidebarBackground: '#5a6070', + topicBackground: 'transparent', + preBackground: '#282c32', + alteringTableRowBackground: '#282c32', + + // Buttons + primaryButtonText: '#fff', + primaryButtonBackground: '#008cc1', + secondaryButtonText: '#f4f4f4', + secondaryButtonBorder: '1px solid #717172', + secondaryButtonBackground: 'transparent', + secondaryButtonTextHover: '#f4f4f4', + secondaryButtonBorderHover: '1px solid #717172', + secondaryButtonBackgroundHover: '#282c32', + + // Borders + inFrameBorder: '1px solid #f4f4f4' }