From 79b393d5489e4f6d739158efe030fb73d5f68863 Mon Sep 17 00:00:00 2001 From: Kazumasa Yokomizo Date: Thu, 12 Dec 2019 17:07:30 +0900 Subject: [PATCH 01/13] Add themes --- src/components/App.tsx | 18 +++++---- src/lib/styled/themes/dark.ts | 64 ++++++++++++++++++++++++++++++++ src/lib/styled/themes/default.ts | 37 +++++++++--------- 3 files changed, 92 insertions(+), 27 deletions(-) create mode 100644 src/lib/styled/themes/dark.ts diff --git a/src/components/App.tsx b/src/components/App.tsx index 3a61c1de81..0504a27217 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -4,6 +4,7 @@ import Router from './Router' import GlobalStyle from './GlobalStyle' import { ThemeProvider } from 'styled-components' import { defaultTheme } from '../lib/styled/themes/default' +import { darkTheme } from '../lib/styled/themes/dark' import { StyledAppContainer } from './styled' import ContextMenu from './ContextMenu' import Dialog from './Dialog/Dialog' @@ -16,14 +17,12 @@ import '../lib/i18n' import '../lib/analytics' import CodeMirrorStyle from './CodeMirrorStyle' import { useGeneralStatus } from '../lib/generalStatus' - const App = () => { const { initialize, initialized } = useDb() useEffect(() => { initialize() }, [initialize]) - const { toggleClosed } = usePreferences() - + const { toggleClosed, preferences } = usePreferences() const keyboardHandler = useMemo(() => { return (event: KeyboardEvent) => { switch (event.key) { @@ -35,7 +34,6 @@ const App = () => { } }, [toggleClosed]) useGlobalKeyDownHandler(keyboardHandler) - const { generalStatus, setGeneralStatus } = useGeneralStatus() const updateSideBarWidth = useCallback( (leftWidth: number) => { @@ -45,9 +43,8 @@ const App = () => { }, [setGeneralStatus] ) - return ( - + { event.preventDefault() @@ -72,5 +69,12 @@ const App = () => { ) } - +function selectTheme(theme: string) { + switch (theme) { + case 'dark': + return darkTheme + default: + return defaultTheme + } +} export default App diff --git a/src/lib/styled/themes/dark.ts b/src/lib/styled/themes/dark.ts new file mode 100644 index 0000000000..04ba13dd90 --- /dev/null +++ b/src/lib/styled/themes/dark.ts @@ -0,0 +1,64 @@ +import { BaseTheme } from './types' + +const textColor = '#333' +const deemedTextColor = '#999' +const inverseTextColor = '#FFF' +const backgroundColor = '#FFF' +const alternativeBackgroundColor = '#F8F8F8' +const activeColor = '#63AEFC' +const borderColor = '#E5E5E5' + +const base1Color = '#2c2d30' +const base2Color = '#1e2022' +const primaryColor = '#03C588' +const light70Color = 'rgba(255,255,255,0.7)' +const light30Color = 'rgba(255,255,255,0.3)' +const light12Color = 'rgba(255,255,255,0.12)' +const light100Color = '#FFF' + +export const darkTheme: BaseTheme = { + colors: { + text: textColor, + deemedText: deemedTextColor, + inverseText: inverseTextColor, + background: backgroundColor, + alternativeBackground: alternativeBackgroundColor, + active: activeColor, + border: borderColor + }, + fontSize: 15, + fontFamily: `-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Fira sans', Roboto, Helvetica, + Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'`, + + // General + textColor: light100Color, + uiTextColor: light70Color, + activeUiTextColor: light100Color, + disabledUiTextColor: light30Color, + + primaryColor: primaryColor, + borderColor: light12Color, + iconColor: light30Color, + activeIconColor: light70Color, + backgroundColor: base1Color, + secondaryBackgroundColor: base2Color, + activeBackgroundColor: base2Color, + shadow: '0 2px 24px rgba(0,0,0,0.5)', + + scrollBarTrackColor: base2Color, + scrollBarThumbColor: light12Color, + + // SideBar + sideBarBackgroundColor: base1Color, + sideBarTextColor: light70Color, + sideBarSecondaryTextColor: light30Color, + + // Button + primaryButtonLabelColor: light100Color, + primaryButtonBackgroundColor: primaryColor, + secondaryButtonLabelColor: light100Color, + secondaryButtonBackgroundColor: 'transparent', + + // Input + inputBackground: light12Color +} diff --git a/src/lib/styled/themes/default.ts b/src/lib/styled/themes/default.ts index 6759f74f73..eca92102d9 100644 --- a/src/lib/styled/themes/default.ts +++ b/src/lib/styled/themes/default.ts @@ -11,14 +11,11 @@ const borderColor = '#E5E5E5' const base1Color = '#2c2d30' const base2Color = '#1e2022' const primaryColor = '#03C588' -// const dark87Color = 'rgba(0,0,0,0.87)' -// const dark54Color = 'rgba(0,0,0,0.54)' -// const dark26Color = 'rgba(0,0,0,0.26)' +const dark87Color = 'rgba(0,0,0,0.87)' +const dark54Color = 'rgba(0,0,0,0.54)' +const dark26Color = 'rgba(0,0,0,0.26)' // const dark12Color = 'rgba(0,0,0,0.12' -const light70Color = 'rgba(255,255,255,0.7)' -const light30Color = 'rgba(255,255,255,0.3)' -const light12Color = 'rgba(255,255,255,0.12)' -const light100Color = '#FFF' +const dark100Color = '#000' export const defaultTheme: BaseTheme = { colors: { @@ -35,34 +32,34 @@ export const defaultTheme: BaseTheme = { Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'`, // General - textColor: light100Color, - uiTextColor: light70Color, - activeUiTextColor: light100Color, - disabledUiTextColor: light30Color, + textColor: dark100Color, + uiTextColor: dark87Color, + activeUiTextColor: dark100Color, + disabledUiTextColor: dark54Color, primaryColor: primaryColor, - borderColor: light12Color, - iconColor: light30Color, - activeIconColor: light70Color, + borderColor: dark26Color, + iconColor: dark54Color, + activeIconColor: dark87Color, backgroundColor: base1Color, secondaryBackgroundColor: base2Color, activeBackgroundColor: base2Color, shadow: '0 2px 24px rgba(0,0,0,0.5)', scrollBarTrackColor: base2Color, - scrollBarThumbColor: light12Color, + scrollBarThumbColor: dark26Color, // SideBar sideBarBackgroundColor: base1Color, - sideBarTextColor: light70Color, - sideBarSecondaryTextColor: light30Color, + sideBarTextColor: dark87Color, + sideBarSecondaryTextColor: dark54Color, // Button - primaryButtonLabelColor: light100Color, + primaryButtonLabelColor: dark100Color, primaryButtonBackgroundColor: primaryColor, - secondaryButtonLabelColor: light100Color, + secondaryButtonLabelColor: dark100Color, secondaryButtonBackgroundColor: 'transparent', // Input - inputBackground: light12Color + inputBackground: dark26Color } From e5d703a936669197d67b270385c9fd12505cea48 Mon Sep 17 00:00:00 2001 From: Elle Kasai Date: Thu, 12 Dec 2019 17:46:51 +0900 Subject: [PATCH 02/13] Set Up --- package-lock.json | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/package-lock.json b/package-lock.json index cd8681d10d..c3c523786e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2143,7 +2143,7 @@ }, "@types/relateurl": { "version": "0.2.28", - "resolved": "http://registry.npmjs.org/@types/relateurl/-/relateurl-0.2.28.tgz", + "resolved": "https://registry.npmjs.org/@types/relateurl/-/relateurl-0.2.28.tgz", "integrity": "sha1-a9p9uGU/piZD9e5p6facEaOS46Y=", "dev": true }, @@ -2539,7 +2539,7 @@ }, "abstract-leveldown": { "version": "2.4.1", - "resolved": "http://registry.npmjs.org/abstract-leveldown/-/abstract-leveldown-2.4.1.tgz", + "resolved": "https://registry.npmjs.org/abstract-leveldown/-/abstract-leveldown-2.4.1.tgz", "integrity": "sha1-s7/tuITraToSd18MVenwpCDM7mQ=", "requires": { "xtend": "~4.0.0" @@ -3608,7 +3608,7 @@ }, "browserify-aes": { "version": "1.2.0", - "resolved": "http://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz", + "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz", "integrity": "sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==", "dev": true, "requires": { @@ -3645,7 +3645,7 @@ }, "browserify-rsa": { "version": "4.0.1", - "resolved": "http://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz", + "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz", "integrity": "sha1-IeCr+vbyApzy+vsTNWenAdQTVSQ=", "dev": true, "requires": { @@ -3699,7 +3699,7 @@ }, "buffer": { "version": "4.9.1", - "resolved": "http://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz", + "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz", "integrity": "sha1-bRu2AbB6TvztlwlBMgkwJ8lbwpg=", "requires": { "base64-js": "^1.0.2", @@ -4651,7 +4651,7 @@ }, "create-hash": { "version": "1.2.0", - "resolved": "http://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz", + "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz", "integrity": "sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==", "dev": true, "requires": { @@ -4664,7 +4664,7 @@ }, "create-hmac": { "version": "1.1.7", - "resolved": "http://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz", + "resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz", "integrity": "sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==", "dev": true, "requires": { @@ -5242,7 +5242,7 @@ }, "diffie-hellman": { "version": "5.0.3", - "resolved": "http://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz", + "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz", "integrity": "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==", "dev": true, "requires": { @@ -10602,7 +10602,7 @@ }, "media-typer": { "version": "0.3.0", - "resolved": "http://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", + "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=", "dev": true }, @@ -10991,7 +10991,7 @@ }, "mkdirp": { "version": "0.5.1", - "resolved": "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "requires": { "minimist": "0.0.8" @@ -13873,7 +13873,7 @@ }, "safe-regex": { "version": "1.1.0", - "resolved": "http://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz", + "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz", "integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=", "dev": true, "requires": { @@ -13905,7 +13905,7 @@ "dependencies": { "minimist": { "version": "1.2.0", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", + "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", "dev": true } @@ -14133,7 +14133,7 @@ }, "sha.js": { "version": "2.4.11", - "resolved": "http://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz", + "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz", "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==", "dev": true, "requires": { @@ -14807,7 +14807,7 @@ }, "strip-eof": { "version": "1.0.0", - "resolved": "http://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz", + "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz", "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=", "dev": true }, From 8920e1a87335837e7e0dcf68c1b749e6b0bb14a2 Mon Sep 17 00:00:00 2001 From: Elle Kasai Date: Thu, 12 Dec 2019 20:11:18 +0900 Subject: [PATCH 03/13] Set Up Themes --- src/lib/styled/themes/dark.ts | 28 ++++++-------- src/lib/styled/themes/default.ts | 63 ++++++++++++++++---------------- src/lib/styled/themes/light.ts | 59 ++++++++++++++++++++++++++++++ 3 files changed, 101 insertions(+), 49 deletions(-) create mode 100644 src/lib/styled/themes/light.ts diff --git a/src/lib/styled/themes/dark.ts b/src/lib/styled/themes/dark.ts index 04ba13dd90..0bf64f9392 100644 --- a/src/lib/styled/themes/dark.ts +++ b/src/lib/styled/themes/dark.ts @@ -1,16 +1,10 @@ import { BaseTheme } from './types' -const textColor = '#333' -const deemedTextColor = '#999' -const inverseTextColor = '#FFF' -const backgroundColor = '#FFF' -const alternativeBackgroundColor = '#F8F8F8' -const activeColor = '#63AEFC' -const borderColor = '#E5E5E5' - const base1Color = '#2c2d30' const base2Color = '#1e2022' const primaryColor = '#03C588' + +const dark26Color = 'rgba(0,0,0,0.26)' const light70Color = 'rgba(255,255,255,0.7)' const light30Color = 'rgba(255,255,255,0.3)' const light12Color = 'rgba(255,255,255,0.12)' @@ -18,13 +12,13 @@ const light100Color = '#FFF' export const darkTheme: BaseTheme = { colors: { - text: textColor, - deemedText: deemedTextColor, - inverseText: inverseTextColor, - background: backgroundColor, - alternativeBackground: alternativeBackgroundColor, - active: activeColor, - border: borderColor + text: light70Color, + deemedText: light30Color, + inverseText: light100Color, + background: light100Color, + alternativeBackground: light12Color, + active: primaryColor, + border: dark26Color }, fontSize: 15, fontFamily: `-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Fira sans', Roboto, Helvetica, @@ -37,13 +31,13 @@ export const darkTheme: BaseTheme = { disabledUiTextColor: light30Color, primaryColor: primaryColor, - borderColor: light12Color, + borderColor: dark26Color, iconColor: light30Color, activeIconColor: light70Color, backgroundColor: base1Color, secondaryBackgroundColor: base2Color, activeBackgroundColor: base2Color, - shadow: '0 2px 24px rgba(0,0,0,0.5)', + shadow: '0 3px 5px rgba(0,0,0,0.1)', scrollBarTrackColor: base2Color, scrollBarThumbColor: light12Color, diff --git a/src/lib/styled/themes/default.ts b/src/lib/styled/themes/default.ts index eca92102d9..7a21c18516 100644 --- a/src/lib/styled/themes/default.ts +++ b/src/lib/styled/themes/default.ts @@ -1,65 +1,64 @@ import { BaseTheme } from './types' -const textColor = '#333' -const deemedTextColor = '#999' -const inverseTextColor = '#FFF' -const backgroundColor = '#FFF' -const alternativeBackgroundColor = '#F8F8F8' -const activeColor = '#63AEFC' -const borderColor = '#E5E5E5' - -const base1Color = '#2c2d30' -const base2Color = '#1e2022' +const base1Color = '#ECECEC' +const base2Color = '#F9F9F9' +const base3Color = '#2c2d30' const primaryColor = '#03C588' + const dark87Color = 'rgba(0,0,0,0.87)' const dark54Color = 'rgba(0,0,0,0.54)' const dark26Color = 'rgba(0,0,0,0.26)' -// const dark12Color = 'rgba(0,0,0,0.12' +const dark12Color = 'rgba(0,0,0,0.12)' const dark100Color = '#000' +const light100Color = '#FFF' +const light70Color = 'rgba(255,255,255,0.7)' +const light30Color = 'rgba(255,255,255,0.3)' +const light12Color = 'rgba(255,255,255,0.12)' + export const defaultTheme: BaseTheme = { colors: { - text: textColor, - deemedText: deemedTextColor, - inverseText: inverseTextColor, - background: backgroundColor, - alternativeBackground: alternativeBackgroundColor, - active: activeColor, - border: borderColor + text: dark87Color, + deemedText: dark26Color, + inverseText: light100Color, + background: base1Color, + alternativeBackground: base2Color, + active: primaryColor, + border: dark12Color }, fontSize: 15, fontFamily: `-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Fira sans', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'`, // General - textColor: dark100Color, - uiTextColor: dark87Color, + textColor: dark87Color, + uiTextColor: dark54Color, activeUiTextColor: dark100Color, - disabledUiTextColor: dark54Color, + disabledUiTextColor: dark26Color, primaryColor: primaryColor, - borderColor: dark26Color, - iconColor: dark54Color, - activeIconColor: dark87Color, + borderColor: dark12Color, + iconColor: dark26Color, + activeIconColor: dark54Color, backgroundColor: base1Color, secondaryBackgroundColor: base2Color, - activeBackgroundColor: base2Color, - shadow: '0 2px 24px rgba(0,0,0,0.5)', + activeBackgroundColor: light12Color, + shadow: '0 3px 5px rgba(0,0,0,0.1)', scrollBarTrackColor: base2Color, - scrollBarThumbColor: dark26Color, + scrollBarThumbColor: dark12Color, // SideBar - sideBarBackgroundColor: base1Color, - sideBarTextColor: dark87Color, - sideBarSecondaryTextColor: dark54Color, + sideBarBackgroundColor: base3Color, + sideBarTextColor: light70Color, + sideBarSecondaryTextColor: light30Color, // Button - primaryButtonLabelColor: dark100Color, + primaryButtonLabelColor: light100Color, primaryButtonBackgroundColor: primaryColor, secondaryButtonLabelColor: dark100Color, secondaryButtonBackgroundColor: 'transparent', // Input - inputBackground: dark26Color + inputBackground: dark12Color } diff --git a/src/lib/styled/themes/light.ts b/src/lib/styled/themes/light.ts new file mode 100644 index 0000000000..5f9a53c610 --- /dev/null +++ b/src/lib/styled/themes/light.ts @@ -0,0 +1,59 @@ +import { BaseTheme } from './types' + +const base1Color = '#ECECEC' +const base2Color = '#F9F9F9' +const primaryColor = '#03C588' + +const dark87Color = 'rgba(0,0,0,0.87)' +const dark54Color = 'rgba(0,0,0,0.54)' +const dark26Color = 'rgba(0,0,0,0.26)' +const dark12Color = 'rgba(0,0,0,0.12)' +const dark100Color = '#000' +const light100Color = '#FFF' + +export const lightTheme: BaseTheme = { + colors: { + text: dark87Color, + deemedText: dark26Color, + inverseText: light100Color, + background: base1Color, + alternativeBackground: base2Color, + active: primaryColor, + border: dark12Color + }, + fontSize: 15, + fontFamily: `-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Fira sans', Roboto, Helvetica, + Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'`, + + // General + textColor: dark87Color, + uiTextColor: dark54Color, + activeUiTextColor: dark100Color, + disabledUiTextColor: dark26Color, + + primaryColor: primaryColor, + borderColor: dark12Color, + iconColor: dark26Color, + activeIconColor: dark54Color, + backgroundColor: base1Color, + secondaryBackgroundColor: base2Color, + activeBackgroundColor: base2Color, + shadow: '0 3px 5px rgba(0,0,0,0.1)', + + scrollBarTrackColor: base2Color, + scrollBarThumbColor: dark12Color, + + // SideBar + sideBarBackgroundColor: base1Color, + sideBarTextColor: dark54Color, + sideBarSecondaryTextColor: dark26Color, + + // Button + primaryButtonLabelColor: light100Color, + primaryButtonBackgroundColor: primaryColor, + secondaryButtonLabelColor: dark100Color, + secondaryButtonBackgroundColor: 'transparent', + + // Input + inputBackground: dark12Color +} From 8456b905254ee41e3c69b656741fb7e3ea5371b3 Mon Sep 17 00:00:00 2001 From: Elle Kasai Date: Thu, 12 Dec 2019 20:12:47 +0900 Subject: [PATCH 04/13] Added & Modified Style Functions --- src/lib/styled/styleFunctions.ts | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/lib/styled/styleFunctions.ts b/src/lib/styled/styleFunctions.ts index 38dac1cf3f..8ee9cba056 100644 --- a/src/lib/styled/styleFunctions.ts +++ b/src/lib/styled/styleFunctions.ts @@ -13,6 +13,9 @@ export const secondaryBackgroundColor = ({ theme }: StyledProps) => export const activeBackgroundColor = ({ theme }: StyledProps) => `background-color: ${theme.activeBackgroundColor};` +export const sideBarBackgroundColor = ({ theme }: StyledProps) => + `background-color: ${theme.sideBarBackgroundColor};` + export const iconColor = ({ theme }: StyledProps) => `color: ${theme.iconColor}; &:hover, &:focus { @@ -40,6 +43,12 @@ transition: 200ms color; color: ${theme.disabledUiTextColor}; }` +export const sideBarTextColor = ({ theme }: StyledProps) => + `color: ${theme.sideBarTextColor};` + +export const sideBarSecondaryTextColor = ({ theme }: StyledProps) => + `color: ${theme.sideBarSecondaryTextColor};` + export const borderColor = ({ theme }: StyledProps) => `border-color: ${theme.borderColor};` @@ -73,7 +82,7 @@ color: ${theme.textColor}; export const primaryButtonStyle = ({ theme }: StyledProps) => `border: none; background-color: ${theme.primaryColor}; -color: ${theme.textColor}; +color: ${theme.primaryButtonLabelColor}; font-size: 13px; &:focus { box-shadow: 0 0 0 2px ${theme.primaryColor}; @@ -82,7 +91,7 @@ font-size: 13px; export const secondaryButtonStyle = ({ theme }: StyledProps) => `border: none; background-color: ${theme.inputBackground}; -color: ${theme.textColor}; +color: ${theme.secondaryButtonLabelColor}; font-size: 13px; &:focus { box-shadow: 0 0 0 2px ${theme.primaryColor}; From 0072e0b96b94a0c9a287d15a86c4d0d8d758dc81 Mon Sep 17 00:00:00 2001 From: Elle Kasai Date: Thu, 12 Dec 2019 20:14:18 +0900 Subject: [PATCH 05/13] Modified Side Nav --- src/components/SideNavigator/SideNavigatorItem.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/SideNavigator/SideNavigatorItem.tsx b/src/components/SideNavigator/SideNavigatorItem.tsx index 3678970ac2..cae80fc2fa 100644 --- a/src/components/SideNavigator/SideNavigatorItem.tsx +++ b/src/components/SideNavigator/SideNavigatorItem.tsx @@ -4,7 +4,8 @@ import styled from '../../lib/styled' import Icon from '../atoms/Icon' import { mdiChevronDown, mdiChevronRight } from '@mdi/js' import { - uiTextColor, + sideBarTextColor, + sideBarSecondaryTextColor, activeBackgroundColor } from '../../lib/styled/styleFunctions' import MdiIcon from '@mdi/react' @@ -40,7 +41,7 @@ const FoldButton = styled.button` margin-right: 3px; border-radius: 2px; top: 2px; - ${uiTextColor} + ${sideBarSecondaryTextColor} &:focus { box-shadow: none; } @@ -54,16 +55,17 @@ const ClickableContainer = styled.button` align-items: center; width: 100%; - color: ${({ theme }) => theme.uiTextColor}; + ${sideBarTextColor} &:hover, &:focus, &:active, &.active { - color: ${({ theme }) => theme.activeUiTextColor}; + ${sideBarTextColor} } .icon { margin-right: 4px; + ${sideBarSecondaryTextColor} } ` From 207cafae84fd0630da16f9d48f713f039cd9ec07 Mon Sep 17 00:00:00 2001 From: Elle Kasai Date: Thu, 12 Dec 2019 20:14:51 +0900 Subject: [PATCH 06/13] Modified Side Nav --- src/components/SideNavigator/SideNavigator.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/SideNavigator/SideNavigator.tsx b/src/components/SideNavigator/SideNavigator.tsx index fbc1d575ca..2c8a5cc291 100644 --- a/src/components/SideNavigator/SideNavigator.tsx +++ b/src/components/SideNavigator/SideNavigator.tsx @@ -17,9 +17,9 @@ import { useDialog, DialogIconTypes } from '../../lib/dialog' import { useContextMenu, MenuTypes } from '../../lib/contextMenu' import { usePreferences } from '../../lib/preferences' import { - backgroundColor, - iconColor, - textColor + sideBarBackgroundColor, + sideBarTextColor, + sideBarSecondaryTextColor } from '../../lib/styled/styleFunctions' import SideNavigatorItem from './SideNavigatorItem' import { useGeneralStatus } from '../../lib/generalStatus' @@ -34,14 +34,14 @@ const Description = styled.nav` margin-left: 5px; margin-bottom: 10px; font-size: 18px; - color: ${textColor}; + ${sideBarTextColor} ` const StyledSideNavContainer = styled.nav` display: flex; flex-direction: column; height: 100%; - ${backgroundColor} + ${sideBarBackgroundColor} .topControl { height: 50px; display: flex; @@ -53,7 +53,7 @@ const StyledSideNavContainer = styled.nav` height: 50px; background-color: transparent; border: none; - ${iconColor} + ${sideBarSecondaryTextColor} font-size: 24px; } } From 56ac40f5400db94c50210a303906a704ce3e695b Mon Sep 17 00:00:00 2001 From: Elle Kasai Date: Thu, 12 Dec 2019 20:15:23 +0900 Subject: [PATCH 07/13] Adjusted Conrtol Color & Position --- src/components/SideNavigator/ControlButton.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/SideNavigator/ControlButton.tsx b/src/components/SideNavigator/ControlButton.tsx index 58d785bf73..698422360d 100644 --- a/src/components/SideNavigator/ControlButton.tsx +++ b/src/components/SideNavigator/ControlButton.tsx @@ -1,7 +1,7 @@ import React from 'react' import styled from '../../lib/styled' import Icon from '../atoms/Icon' -import { uiTextColor } from '../../lib/styled/styleFunctions' +import { sideBarTextColor, sideBarSecondaryTextColor } from '../../lib/styled/styleFunctions' const StyledButton = styled.button` width: 30px; @@ -13,9 +13,13 @@ const StyledButton = styled.button` top: 2px; font-size: 20px; cursor: pointer; - ${uiTextColor} - &:focus { + ${sideBarSecondaryTextColor} + &:hover, &:active, &:focus { box-shadow: none; + ${sideBarTextColor} + } + svg { + vertical-align: middle; } ` From fa37dd737a00e07aeb73c0205c59c1ab22202a70 Mon Sep 17 00:00:00 2001 From: Elle Kasai Date: Thu, 12 Dec 2019 20:15:47 +0900 Subject: [PATCH 08/13] Adjusted Width of the Input & Select --- src/components/PreferencesModal/styled.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/PreferencesModal/styled.tsx b/src/components/PreferencesModal/styled.tsx index fa6e55d55b..b3a0adfed6 100644 --- a/src/components/PreferencesModal/styled.tsx +++ b/src/components/PreferencesModal/styled.tsx @@ -36,6 +36,7 @@ export const SectionControl = styled.div` export const SectionSelect = styled.select` ${selectStyle} padding: 0 16px; + width: 200px; height: 40px; border-radius: 2px; @@ -66,6 +67,7 @@ export const SectionSecondaryButton = styled.button` export const SectionInput = styled.input` ${inputStyle} padding: 0 16px; + width: 200px; height: 40px; border-radius: 2px; ` From e38bd026a5c8bba1e4ff73afd9be4dcf09c4b4f8 Mon Sep 17 00:00:00 2001 From: Elle Kasai Date: Thu, 12 Dec 2019 20:16:07 +0900 Subject: [PATCH 09/13] Added Tiny Space --- src/components/PreferencesModal/EditorTab.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PreferencesModal/EditorTab.tsx b/src/components/PreferencesModal/EditorTab.tsx index f3bd930178..06be842b8d 100644 --- a/src/components/PreferencesModal/EditorTab.tsx +++ b/src/components/PreferencesModal/EditorTab.tsx @@ -152,7 +152,7 @@ const EditorTab = () => { value={fontSize} onChange={updateFontSize} />{' '} - px +  px
From a28f63954f7aba965eaab007c94641002cb4a9e2 Mon Sep 17 00:00:00 2001 From: Elle Kasai Date: Thu, 12 Dec 2019 20:16:30 +0900 Subject: [PATCH 10/13] Adjusted Icon Colors --- src/components/NotePage/NoteList/NoteList.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/NotePage/NoteList/NoteList.tsx b/src/components/NotePage/NoteList/NoteList.tsx index d61dff50bb..f7ecc70a05 100644 --- a/src/components/NotePage/NoteList/NoteList.tsx +++ b/src/components/NotePage/NoteList/NoteList.tsx @@ -7,7 +7,7 @@ import Icon from '../../atoms/Icon' import { borderBottom, inputStyle, - uiTextColor + iconColor } from '../../../lib/styled/styleFunctions' export const StyledNoteListContainer = styled.div` @@ -43,6 +43,7 @@ export const StyledNoteListContainer = styled.div` font-size: 20px; z-index: 0; pointer-events: none; + ${iconColor} } .input { position: relative; @@ -59,7 +60,7 @@ export const StyledNoteListContainer = styled.div` font-size: 24px; background: transparent; border: none; - ${uiTextColor} + ${iconColor} } ` From 127c8dc129147d137e6880d978035266b6efa17e Mon Sep 17 00:00:00 2001 From: Elle Kasai Date: Thu, 12 Dec 2019 20:16:53 +0900 Subject: [PATCH 11/13] Added Light Theme --- src/components/App.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/App.tsx b/src/components/App.tsx index 0504a27217..1f11d204f3 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -5,6 +5,7 @@ import GlobalStyle from './GlobalStyle' import { ThemeProvider } from 'styled-components' import { defaultTheme } from '../lib/styled/themes/default' import { darkTheme } from '../lib/styled/themes/dark' +import { lightTheme } from '../lib/styled/themes/light' import { StyledAppContainer } from './styled' import ContextMenu from './ContextMenu' import Dialog from './Dialog/Dialog' @@ -73,6 +74,8 @@ function selectTheme(theme: string) { switch (theme) { case 'dark': return darkTheme + case 'light': + return lightTheme default: return defaultTheme } From 5bf7ef725c66ed975f1c70f3df1a90d0b08bc5c5 Mon Sep 17 00:00:00 2001 From: Elle Kasai Date: Thu, 12 Dec 2019 20:48:53 +0900 Subject: [PATCH 12/13] Added Sepia Theme --- src/components/App.tsx | 3 + .../PreferencesModal/GeneralTab.tsx | 4 +- src/lib/i18n/enUS.ts | 2 +- src/lib/i18n/ja.ts | 2 +- src/lib/preferences/types.ts | 2 +- src/lib/styled/themes/sepia.ts | 62 +++++++++++++++++++ 6 files changed, 70 insertions(+), 5 deletions(-) create mode 100644 src/lib/styled/themes/sepia.ts diff --git a/src/components/App.tsx b/src/components/App.tsx index 80451f3ee1..dfecfa5e77 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -6,6 +6,7 @@ import { ThemeProvider } from 'styled-components' import { defaultTheme } from '../lib/styled/themes/default' import { darkTheme } from '../lib/styled/themes/dark' import { lightTheme } from '../lib/styled/themes/light' +import { sepiaTheme } from '../lib/styled/themes/sepia' import { StyledAppContainer } from './styled' import ContextMenu from './ContextMenu' import Dialog from './Dialog/Dialog' @@ -79,6 +80,8 @@ function selectTheme(theme: string) { return darkTheme case 'light': return lightTheme + case 'sepia': + return sepiaTheme default: return defaultTheme } diff --git a/src/components/PreferencesModal/GeneralTab.tsx b/src/components/PreferencesModal/GeneralTab.tsx index a4d1855631..2d9bc6676c 100644 --- a/src/components/PreferencesModal/GeneralTab.tsx +++ b/src/components/PreferencesModal/GeneralTab.tsx @@ -117,8 +117,8 @@ const GeneralTab = () => { - diff --git a/src/lib/i18n/enUS.ts b/src/lib/i18n/enUS.ts index f4462b7021..e135328e8d 100644 --- a/src/lib/i18n/enUS.ts +++ b/src/lib/i18n/enUS.ts @@ -10,7 +10,7 @@ export default { 'preferences.auto': 'Auto', 'preferences.light': 'Light', 'preferences.dark': 'Dark', - 'preferences.solarizedDark': 'Solarized Dark', + 'preferences.sepia': 'Sepia', 'preferences.noteSorting': 'Note Sorting', 'preferences.dateUpdated': 'Date Updated', 'preferences.dateCreated': 'Date Created', diff --git a/src/lib/i18n/ja.ts b/src/lib/i18n/ja.ts index 951fb17c77..9288b77374 100644 --- a/src/lib/i18n/ja.ts +++ b/src/lib/i18n/ja.ts @@ -10,7 +10,7 @@ export default { 'preferences.auto': '自動', 'preferences.light': 'ライト', 'preferences.dark': 'ダーク', - 'preferences.solarizedDark': 'Solarized Dark', + 'preferences.sepia': 'セピア', 'preferences.noteSorting': 'ノート整列', 'preferences.dateUpdated': 'アプデート順', 'preferences.dateCreated': '生成順', diff --git a/src/lib/preferences/types.ts b/src/lib/preferences/types.ts index 156b2db66c..1bb8a0a0ce 100644 --- a/src/lib/preferences/types.ts +++ b/src/lib/preferences/types.ts @@ -1,6 +1,6 @@ import { User } from '../accounts' -export type GeneralThemeOptions = 'auto' | 'light' | 'dark' | 'solarized-dark' +export type GeneralThemeOptions = 'auto' | 'light' | 'dark' | 'sepia' export type GeneralLanguageOptions = 'en-US' | 'ja' export type GeneralNoteSortingOptions = | 'date-updated' diff --git a/src/lib/styled/themes/sepia.ts b/src/lib/styled/themes/sepia.ts new file mode 100644 index 0000000000..b9a192d061 --- /dev/null +++ b/src/lib/styled/themes/sepia.ts @@ -0,0 +1,62 @@ +import { BaseTheme } from './types' + +const base1Color = '#fdf6e4' +const base2Color = '#efe8d6' +const base3Color = '#393733' +const primaryColor = '#03C588' + +const dark54Color = 'rgba(0,0,0,0.54)' +const dark26Color = 'rgba(0,0,0,0.26)' +const dark12Color = 'rgba(0,0,0,0.12)' + +const light100Color = '#FFF' +const light70Color = 'rgba(255,255,255,0.7)' +const light30Color = 'rgba(255,255,255,0.3)' +const light12Color = 'rgba(255,255,255,0.12)' + +export const sepiaTheme: BaseTheme = { + colors: { + text: base3Color, + deemedText: dark26Color, + inverseText: light100Color, + background: base1Color, + alternativeBackground: base2Color, + active: primaryColor, + border: dark12Color + }, + fontSize: 15, + fontFamily: `-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Fira sans', Roboto, Helvetica, + Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'`, + + // General + textColor: base3Color, + uiTextColor: base3Color, + activeUiTextColor: base3Color, + disabledUiTextColor: dark26Color, + + primaryColor: primaryColor, + borderColor: dark12Color, + iconColor: dark26Color, + activeIconColor: dark54Color, + backgroundColor: base1Color, + secondaryBackgroundColor: base2Color, + activeBackgroundColor: light12Color, + shadow: '0 3px 5px rgba(0,0,0,0.1)', + + scrollBarTrackColor: base2Color, + scrollBarThumbColor: dark12Color, + + // SideBar + sideBarBackgroundColor: base3Color, + sideBarTextColor: light70Color, + sideBarSecondaryTextColor: light30Color, + + // Button + primaryButtonLabelColor: light100Color, + primaryButtonBackgroundColor: primaryColor, + secondaryButtonLabelColor: base3Color, + secondaryButtonBackgroundColor: 'transparent', + + // Input + inputBackground: dark12Color +} From 638e4c3504c8041cef6477400052756a09387b82 Mon Sep 17 00:00:00 2001 From: Elle Kasai Date: Thu, 12 Dec 2019 21:04:34 +0900 Subject: [PATCH 13/13] Made It One Line --- src/components/PreferencesModal/GeneralTab.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/PreferencesModal/GeneralTab.tsx b/src/components/PreferencesModal/GeneralTab.tsx index 2d9bc6676c..4851891548 100644 --- a/src/components/PreferencesModal/GeneralTab.tsx +++ b/src/components/PreferencesModal/GeneralTab.tsx @@ -117,9 +117,7 @@ const GeneralTab = () => { - +