From 0ed51181328feb5e60de429f41e6935e9b0c5d62 Mon Sep 17 00:00:00 2001 From: velopert Date: Sun, 30 Jan 2022 02:38:58 +0900 Subject: [PATCH 01/32] Prepares dark theme --- package.json | 2 +- src/GlobalStyles.ts | 24 ++- src/components/main/MainTemplate.tsx | 4 +- src/lib/styles/themes.ts | 81 +++++++++ yarn.lock | 236 +++++++++++++++++++-------- 5 files changed, 278 insertions(+), 69 deletions(-) create mode 100644 src/lib/styles/themes.ts diff --git a/package.json b/package.json index ec999712..be2f60e5 100644 --- a/package.json +++ b/package.json @@ -145,7 +145,7 @@ "snakecase-keys": "^3.1.0", "strip-markdown": "^3.1.1", "style-loader": "1.0.0", - "styled-components": "^4.4.1", + "styled-components": "^5.3.3", "terser-webpack-plugin": "2.2.1", "throttle-debounce": "^2.1.0", "ts-pnp": "1.1.5", diff --git a/src/GlobalStyles.ts b/src/GlobalStyles.ts index 5fc987f9..2cee7aa6 100644 --- a/src/GlobalStyles.ts +++ b/src/GlobalStyles.ts @@ -1,4 +1,5 @@ import { createGlobalStyle } from 'styled-components'; +import { themedPalette, themes } from './lib/styles/themes'; const GlobalStyles = createGlobalStyle` body { @@ -7,8 +8,9 @@ body { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", 나눔고딕, "Nanum Gothic", "Noto Sans KR", "Noto Sans CJK KR", arial, 돋움, Dotum, Tahoma, Geneva, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - color: #212529; + color: ${themedPalette.text1}; box-sizing: border-box; + background: ${themedPalette.bg_page2}; } * { @@ -27,6 +29,26 @@ input, button, textarea { html, body, #root { height: 100%; } + +body { + ${themes.light} + transition: 0.125s all ease-in; +} + +@media (prefers-color-scheme: dark) { + body { + ${themes.dark} + } +} + +body[data-theme='light'] { + ${themes.light}; +} + +body[data-theme='dark'] { + ${themes.dark}; +} + `; export default GlobalStyles; diff --git a/src/components/main/MainTemplate.tsx b/src/components/main/MainTemplate.tsx index 08704cd8..9468698e 100644 --- a/src/components/main/MainTemplate.tsx +++ b/src/components/main/MainTemplate.tsx @@ -1,10 +1,10 @@ import React from 'react'; import styled, { createGlobalStyle } from 'styled-components'; -import palette from '../../lib/styles/palette'; +import { themedPalette } from '../../lib/styles/themes'; const BackgroundStyle = createGlobalStyle` body { - background: ${palette.gray0}; + background: ${themedPalette.bg_page1}; } `; diff --git a/src/lib/styles/themes.ts b/src/lib/styles/themes.ts new file mode 100644 index 00000000..b83c0647 --- /dev/null +++ b/src/lib/styles/themes.ts @@ -0,0 +1,81 @@ +type ThemeVariables = { + bg_page1: string; + bg_page2: string; + bg_element1: string; + bg_element2: string; + bg_element3: string; + bg_element4: string; + text1: string; + text2: string; + text3: string; + text4: string; + border1: string; + border2: string; + border3: string; + border4: string; +}; + +type Theme = 'light' | 'dark'; +type VariableKey = keyof ThemeVariables; +type ThemedPalette = Record; + +const themeVariableSets: Record = { + light: { + bg_page1: '#F8F9FA', + bg_page2: '#FFFFFF', + bg_element1: '#FFFFFF', + bg_element2: '#F8F9FA', + bg_element3: '#FFFFFF', + bg_element4: '#DEE2E6', + text1: '#212529', + text2: '#495057', + text3: '#868E96', + text4: '#CED4DA', + border1: '#343A40', + border2: '#ADB5BD', + border3: '#DEE2E6', + border4: '#F1F3F5', + }, + dark: { + bg_page1: '#121212', + bg_page2: '#121212', + bg_element1: '#1E1E1E', + bg_element2: '#1E1E1E', + bg_element3: '#252525', + bg_element4: '#2E2E2E', + text1: '#ECECEC', + text2: '#D9D9D9', + text3: '#ACACAC', + text4: '#595959', + border1: '#E0E0E0', + border2: '#A0A0A0', + border3: '#4D4D4D', + border4: '#2A2A2A', + }, +}; + +const buildCssVariables = (variables: ThemeVariables) => { + const keys = Object.keys(variables) as (keyof ThemeVariables)[]; + return keys.reduce( + (acc, key) => + acc.concat(`--${key.replace(/_/, '-')}: ${variables[key]};`, '\n'), + '', + ); +}; + +export const themes = { + light: buildCssVariables(themeVariableSets.light), + dark: buildCssVariables(themeVariableSets.dark), +}; + +const cssVar = (name: string) => `var(--${name.replace(/_/, '-')})`; + +const variableKeys = Object.keys(themeVariableSets.light) as VariableKey[]; + +export const themedPalette: Record = variableKeys.reduce( + (acc, current) => { + acc[current] = cssVar(current); + return acc; + }, + {} as ThemedPalette, +); diff --git a/yarn.lock b/yarn.lock index 34ede684..44ae3feb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -56,6 +56,13 @@ dependencies: "@babel/highlight" "^7.0.0" +"@babel/code-frame@^7.16.7": + version "7.16.7" + resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.16.7.tgz#44416b6bd7624b998f5b1af5d470856c40138789" + integrity sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg== + dependencies: + "@babel/highlight" "^7.16.7" + "@babel/core@7.7.4", "@babel/core@^7.1.0", "@babel/core@^7.4.5": version "7.7.4" resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.7.4.tgz#37e864532200cb6b50ee9a4045f5f817840166ab" @@ -76,6 +83,15 @@ semver "^5.4.1" source-map "^0.5.0" +"@babel/generator@^7.16.8": + version "7.16.8" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.16.8.tgz#359d44d966b8cd059d543250ce79596f792f2ebe" + integrity sha512-1ojZwE9+lOXzcWdWmO6TbUzDfqLD39CmEhN8+2cX9XkDo5yW1OpgfejfliysR2AWLpMamTiOiAp/mtroaymhpw== + dependencies: + "@babel/types" "^7.16.8" + jsesc "^2.5.1" + source-map "^0.5.0" + "@babel/generator@^7.4.0", "@babel/generator@^7.7.4": version "7.7.4" resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.7.4.tgz#db651e2840ca9aa66f327dcec1dc5f5fa9611369" @@ -86,7 +102,14 @@ lodash "^4.17.13" source-map "^0.5.0" -"@babel/helper-annotate-as-pure@^7.0.0", "@babel/helper-annotate-as-pure@^7.7.4": +"@babel/helper-annotate-as-pure@^7.16.0": + version "7.16.7" + resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz#bb2339a7534a9c128e3102024c60760a3a7f3862" + integrity sha512-s6t2w/IPQVTAET1HitoowRGXooX8mCgtuP5195wD/QJPV6wYjpujCGF7JuMODVX2ZAJOf1GT6DT9MHEZvLOFSw== + dependencies: + "@babel/types" "^7.16.7" + +"@babel/helper-annotate-as-pure@^7.7.4": version "7.7.4" resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.7.4.tgz#bb3faf1e74b74bd547e867e48f551fa6b098b6ce" integrity sha512-2BQmQgECKzYKFPpiycoF9tlb5HA4lrVyAmLLVK177EcQAqjVLciUb2/R+n1boQ9y5ENV3uz2ZqiNw7QMBBw1Og== @@ -147,6 +170,13 @@ "@babel/types" "^7.7.4" lodash "^4.17.13" +"@babel/helper-environment-visitor@^7.16.7": + version "7.16.7" + resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz#ff484094a839bde9d89cd63cba017d7aae80ecd7" + integrity sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag== + dependencies: + "@babel/types" "^7.16.7" + "@babel/helper-explode-assignable-expression@^7.7.4": version "7.7.4" resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.7.4.tgz#fa700878e008d85dc51ba43e9fb835cddfe05c84" @@ -155,6 +185,15 @@ "@babel/traverse" "^7.7.4" "@babel/types" "^7.7.4" +"@babel/helper-function-name@^7.16.7": + version "7.16.7" + resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.16.7.tgz#f1ec51551fb1c8956bc8dd95f38523b6cf375f8f" + integrity sha512-QfDfEnIUyyBSR3HtrtGECuZ6DAyCkYFp7GHl75vFtTnn6pjKeK0T1DB5lLkFvBea8MdaiUABx3osbgLyInoejA== + dependencies: + "@babel/helper-get-function-arity" "^7.16.7" + "@babel/template" "^7.16.7" + "@babel/types" "^7.16.7" + "@babel/helper-function-name@^7.7.4": version "7.7.4" resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.7.4.tgz#ab6e041e7135d436d8f0a3eca15de5b67a341a2e" @@ -164,6 +203,13 @@ "@babel/template" "^7.7.4" "@babel/types" "^7.7.4" +"@babel/helper-get-function-arity@^7.16.7": + version "7.16.7" + resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.7.tgz#ea08ac753117a669f1508ba06ebcc49156387419" + integrity sha512-flc+RLSOBXzNzVhcLu6ujeHUrD6tANAOU5ojrRx/as+tbzf8+stUCj7+IfRRoAbEZqj/ahXEMsjhOhgeZsrnTw== + dependencies: + "@babel/types" "^7.16.7" + "@babel/helper-get-function-arity@^7.7.4": version "7.7.4" resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.7.4.tgz#cb46348d2f8808e632f0ab048172130e636005f0" @@ -171,6 +217,13 @@ dependencies: "@babel/types" "^7.7.4" +"@babel/helper-hoist-variables@^7.16.7": + version "7.16.7" + resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz#86bcb19a77a509c7b77d0e22323ef588fa58c246" + integrity sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg== + dependencies: + "@babel/types" "^7.16.7" + "@babel/helper-hoist-variables@^7.7.4": version "7.7.4" resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.7.4.tgz#612384e3d823fdfaaf9fce31550fe5d4db0f3d12" @@ -192,6 +245,13 @@ dependencies: "@babel/types" "^7.7.4" +"@babel/helper-module-imports@^7.16.0": + version "7.16.7" + resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz#25612a8091a999704461c8a222d0efec5d091437" + integrity sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg== + dependencies: + "@babel/types" "^7.16.7" + "@babel/helper-module-transforms@^7.7.4": version "7.7.4" resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.7.4.tgz#8d7cdb1e1f8ea3d8c38b067345924ac4f8e0879a" @@ -252,6 +312,13 @@ "@babel/template" "^7.7.4" "@babel/types" "^7.7.4" +"@babel/helper-split-export-declaration@^7.16.7": + version "7.16.7" + resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz#0b648c0c42da9d3920d85ad585f2778620b8726b" + integrity sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw== + dependencies: + "@babel/types" "^7.16.7" + "@babel/helper-split-export-declaration@^7.7.4": version "7.7.4" resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.7.4.tgz#57292af60443c4a3622cf74040ddc28e68336fd8" @@ -259,6 +326,11 @@ dependencies: "@babel/types" "^7.7.4" +"@babel/helper-validator-identifier@^7.16.7": + version "7.16.7" + resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz#e8c602438c4a8195751243da9031d1607d247cad" + integrity sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw== + "@babel/helper-wrap-function@^7.7.4": version "7.7.4" resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.7.4.tgz#37ab7fed5150e22d9d7266e830072c0cdd8baace" @@ -287,11 +359,25 @@ esutils "^2.0.2" js-tokens "^4.0.0" +"@babel/highlight@^7.16.7": + version "7.16.10" + resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.16.10.tgz#744f2eb81579d6eea753c227b0f570ad785aba88" + integrity sha512-5FnTQLSLswEj6IkgVw5KusNUUFY9ZGqe/TRFnP/BKYHYgfh7tc+C7mwiy95/yNP7Dh9x580Vv8r7u7ZfTBFxdw== + dependencies: + "@babel/helper-validator-identifier" "^7.16.7" + chalk "^2.0.0" + js-tokens "^4.0.0" + "@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.4.3", "@babel/parser@^7.7.4": version "7.7.4" resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.7.4.tgz#75ab2d7110c2cf2fa949959afb05fa346d2231bb" integrity sha512-jIwvLO0zCL+O/LmEJQjWA75MQTWwx3c3u2JOTDK5D3/9egrWRRA0/0hk9XXywYnXZVVpzrBYeIQTmhwUaePI9g== +"@babel/parser@^7.16.10", "@babel/parser@^7.16.7": + version "7.16.12" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.16.12.tgz#9474794f9a650cf5e2f892444227f98e28cdf8b6" + integrity sha512-VfaV15po8RiZssrkPweyvbGVSe4x2y+aciFCgn0n0/SJMR22cwofRV1mtnJQYcSB1wUTaA/X1LnA3es66MCO5A== + "@babel/plugin-proposal-async-generator-functions@^7.7.4": version "7.7.4" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.7.4.tgz#0351c5ac0a9e927845fffd5b82af476947b7ce6d" @@ -904,6 +990,15 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/template@^7.16.7": + version "7.16.7" + resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155" + integrity sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w== + dependencies: + "@babel/code-frame" "^7.16.7" + "@babel/parser" "^7.16.7" + "@babel/types" "^7.16.7" + "@babel/template@^7.4.0", "@babel/template@^7.7.4": version "7.7.4" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.7.4.tgz#428a7d9eecffe27deac0a98e23bf8e3675d2a77b" @@ -928,6 +1023,22 @@ globals "^11.1.0" lodash "^4.17.13" +"@babel/traverse@^7.4.5": + version "7.16.10" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.16.10.tgz#448f940defbe95b5a8029975b051f75993e8239f" + integrity sha512-yzuaYXoRJBGMlBhsMJoUW7G1UmSb/eXr/JHYM/MsOJgavJibLwASijW7oXBdw3NQ6T0bW7Ty5P/VarOs9cHmqw== + dependencies: + "@babel/code-frame" "^7.16.7" + "@babel/generator" "^7.16.8" + "@babel/helper-environment-visitor" "^7.16.7" + "@babel/helper-function-name" "^7.16.7" + "@babel/helper-hoist-variables" "^7.16.7" + "@babel/helper-split-export-declaration" "^7.16.7" + "@babel/parser" "^7.16.10" + "@babel/types" "^7.16.8" + debug "^4.1.0" + globals "^11.1.0" + "@babel/types@^7.0.0", "@babel/types@^7.3.0", "@babel/types@^7.4.0", "@babel/types@^7.4.4", "@babel/types@^7.7.4": version "7.7.4" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.7.4.tgz#516570d539e44ddf308c07569c258ff94fde9193" @@ -937,6 +1048,14 @@ lodash "^4.17.13" to-fast-properties "^2.0.0" +"@babel/types@^7.16.7", "@babel/types@^7.16.8": + version "7.16.8" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.16.8.tgz#0ba5da91dd71e0a4e7781a30f22770831062e3c1" + integrity sha512-smN2DQc5s4M7fntyjGtyIPbRJv6wW4rU/94fmYJ7PKQuZkC0qGMHXJbg6sNGt12JmVr4k5YaptI/XtiLJBnmIg== + dependencies: + "@babel/helper-validator-identifier" "^7.16.7" + to-fast-properties "^2.0.0" + "@cnakazawa/watch@^1.0.3": version "1.0.3" resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.3.tgz#099139eaec7ebf07a27c1786a3ff64f39464d2ef" @@ -955,22 +1074,27 @@ resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18" integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg== -"@emotion/is-prop-valid@^0.8.1": - version "0.8.5" - resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.5.tgz#2dda0791f0eafa12b7a0a5b39858405cc7bde983" - integrity sha512-6ZODuZSFofbxSbcxwsFz+6ioPjb0ISJRRPLZ+WIbjcU2IMU0Io+RGQjjaTgOvNQl007KICBm7zXQaYQEC1r6Bg== +"@emotion/is-prop-valid@^0.8.8": + version "0.8.8" + resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a" + integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA== dependencies: - "@emotion/memoize" "0.7.3" + "@emotion/memoize" "0.7.4" -"@emotion/memoize@0.7.3": - version "0.7.3" - resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.3.tgz#5b6b1c11d6a6dddf1f2fc996f74cf3b219644d78" - integrity sha512-2Md9mH6mvo+ygq1trTeVp2uzAKwE2P7In0cRpD/M9Q70aH8L+rxMLbb3JCN2JoSWsV2O+DdFjfbbXoMoLBczow== - -"@emotion/unitless@^0.7.0": +"@emotion/memoize@0.7.4": version "0.7.4" - resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.4.tgz#a87b4b04e5ae14a88d48ebef15015f6b7d1f5677" - integrity sha512-kBa+cDHOR9jpRJ+kcGMsysrls0leukrm68DmFQoMIWQcXdr2cZvyvypWuGYT7U+9kAExUE7+T7r6G3C3A6L8MQ== + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb" + integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw== + +"@emotion/stylis@^0.8.4": + version "0.8.5" + resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04" + integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ== + +"@emotion/unitless@^0.7.4": + version "0.7.5" + resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed" + integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg== "@hapi/address@2.x.x": version "2.1.4" @@ -2817,13 +2941,13 @@ babel-plugin-named-asset-import@^0.3.5: resolved "https://registry.yarnpkg.com/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.5.tgz#d3fa1a7f1f4babd4ed0785b75e2f926df0d70d0d" integrity sha512-sGhfINU+AuMw9oFAdIn/nD5sem3pn/WgxAfDZ//Q3CnF+5uaho7C7shh2rKLk6sKE/XkfmyibghocwKdVjLIKg== -"babel-plugin-styled-components@>= 1": - version "1.10.6" - resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.6.tgz#f8782953751115faf09a9f92431436912c34006b" - integrity sha512-gyQj/Zf1kQti66100PhrCRjI5ldjaze9O0M3emXRPAN80Zsf8+e1thpTpaXJXVHXtaM4/+dJEgZHyS9Its+8SA== +"babel-plugin-styled-components@>= 1.12.0": + version "2.0.2" + resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.2.tgz#0fac11402dc9db73698b55847ab1dc73f5197c54" + integrity sha512-7eG5NE8rChnNTDxa6LQfynwgHTVOYYaHJbUYSlOhk8QBXIQiMBKq4gyfHBBKPrxUcVBXVJL61ihduCpCQbuNbw== dependencies: - "@babel/helper-annotate-as-pure" "^7.0.0" - "@babel/helper-module-imports" "^7.0.0" + "@babel/helper-annotate-as-pure" "^7.16.0" + "@babel/helper-module-imports" "^7.16.0" babel-plugin-syntax-jsx "^6.18.0" lodash "^4.17.11" @@ -4159,14 +4283,14 @@ css-select@^2.0.0: domutils "^1.7.0" nth-check "^1.0.2" -css-to-react-native@^2.2.2: - version "2.3.2" - resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.3.2.tgz#e75e2f8f7aa385b4c3611c52b074b70a002f2e7d" - integrity sha512-VOFaeZA053BqvvvqIA8c9n0+9vFppVBAHCp6JgFTtTMU3Mzi+XnelJ9XC9ul3BqFzZyQ5N+H0SnwsWT2Ebchxw== +css-to-react-native@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756" + integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ== dependencies: camelize "^1.0.0" css-color-keywords "^1.0.0" - postcss-value-parser "^3.3.0" + postcss-value-parser "^4.0.2" css-tree@1.0.0-alpha.37: version "1.0.0-alpha.37" @@ -6383,6 +6507,13 @@ hmac-drbg@^1.0.0: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" +hoist-non-react-statics@^3.0.0: + version "3.3.2" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" + integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== + dependencies: + react-is "^16.7.0" + hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1: version "3.3.1" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#101685d3aff3b23ea213163f6e8e12f4f111e19f" @@ -7190,11 +7321,6 @@ is-typedarray@~1.0.0: resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a" integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo= -is-what@^3.3.1: - version "3.4.0" - resolved "https://registry.yarnpkg.com/is-what/-/is-what-3.4.0.tgz#a9b3fe0c22f52d49efef977f640da44e65a3f866" - integrity sha512-oFdBRuSY9PocqPoUUseDXek4I+A1kWGigZGhuG+7GEkp0tRkek11adc0HbTEVsNvtojV7rp0uhf5LWtGvHzoOQ== - is-whitespace-character@^1.0.0: version "1.0.3" resolved "https://registry.yarnpkg.com/is-whitespace-character/-/is-whitespace-character-1.0.3.tgz#b3ad9546d916d7d3ffa78204bca0c26b56257fac" @@ -8454,7 +8580,7 @@ mem@^4.0.0: mimic-fn "^2.0.0" p-is-promise "^2.0.0" -memoize-one@^5.0.0, memoize-one@^5.1.1: +memoize-one@^5.1.1: version "5.1.1" resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0" integrity sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA== @@ -8475,13 +8601,6 @@ memory-fs@^0.5.0: errno "^0.1.3" readable-stream "^2.0.1" -merge-anything@^2.2.4: - version "2.4.4" - resolved "https://registry.yarnpkg.com/merge-anything/-/merge-anything-2.4.4.tgz#6226b2ac3d3d3fc5fb9e8d23aa400df25f98fdf0" - integrity sha512-l5XlriUDJKQT12bH+rVhAHjwIuXWdAIecGwsYjv2LJo+dA1AeRTmeQS+3QBpO6lEthBMDi2IUMpLC1yyRvGlwQ== - dependencies: - is-what "^3.3.1" - merge-deep@^3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/merge-deep/-/merge-deep-3.0.2.tgz#f39fa100a4f1bd34ff29f7d2bf4508fbb8d83ad2" @@ -10351,7 +10470,7 @@ postcss-unique-selectors@^4.0.1: postcss "^7.0.0" uniqs "^2.0.0" -postcss-value-parser@^3.0.0, postcss-value-parser@^3.3.0, postcss-value-parser@^3.3.1: +postcss-value-parser@^3.0.0, postcss-value-parser@^3.3.1: version "3.3.1" resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281" integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ== @@ -10482,7 +10601,7 @@ prop-types-exact@^1.2.0: object.assign "^4.1.0" reflect.ownkeys "^0.2.0" -prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2: +prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -12480,23 +12599,20 @@ style-to-object@^0.2.1: dependencies: inline-style-parser "0.1.1" -styled-components@^4.4.1: - version "4.4.1" - resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-4.4.1.tgz#e0631e889f01db67df4de576fedaca463f05c2f2" - integrity sha512-RNqj14kYzw++6Sr38n7197xG33ipEOktGElty4I70IKzQF1jzaD1U4xQ+Ny/i03UUhHlC5NWEO+d8olRCDji6g== +styled-components@^5.3.3: + version "5.3.3" + resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.3.tgz#312a3d9a549f4708f0fb0edc829eb34bde032743" + integrity sha512-++4iHwBM7ZN+x6DtPPWkCI4vdtwumQ+inA/DdAsqYd4SVgUKJie5vXyzotA00ttcFdQkCng7zc6grwlfIfw+lw== dependencies: "@babel/helper-module-imports" "^7.0.0" - "@babel/traverse" "^7.0.0" - "@emotion/is-prop-valid" "^0.8.1" - "@emotion/unitless" "^0.7.0" - babel-plugin-styled-components ">= 1" - css-to-react-native "^2.2.2" - memoize-one "^5.0.0" - merge-anything "^2.2.4" - prop-types "^15.5.4" - react-is "^16.6.0" - stylis "^3.5.0" - stylis-rule-sheet "^0.0.10" + "@babel/traverse" "^7.4.5" + "@emotion/is-prop-valid" "^0.8.8" + "@emotion/stylis" "^0.8.4" + "@emotion/unitless" "^0.7.4" + babel-plugin-styled-components ">= 1.12.0" + css-to-react-native "^3.0.0" + hoist-non-react-statics "^3.0.0" + shallowequal "^1.1.0" supports-color "^5.5.0" stylehacks@^4.0.0: @@ -12508,21 +12624,11 @@ stylehacks@^4.0.0: postcss "^7.0.0" postcss-selector-parser "^3.0.0" -stylis-rule-sheet@^0.0.10: - version "0.0.10" - resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430" - integrity sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw== - stylis@3.5.0: version "3.5.0" resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.0.tgz#016fa239663d77f868fef5b67cf201c4b7c701e1" integrity sha512-pP7yXN6dwMzAR29Q0mBrabPCe0/mNO1MSr93bhay+hcZondvMMTpeGyd8nbhYJdyperNT2DRxONQuUGcJr5iPw== -stylis@^3.5.0: - version "3.5.4" - resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe" - integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q== - supports-color@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7" From 601661ec808aaff74729112acc235bc58d81051a Mon Sep 17 00:00:00 2001 From: velopert Date: Sun, 30 Jan 2022 02:56:37 +0900 Subject: [PATCH 02/32] Imports themedPalette where palette is used --- src/components/auth/AuthEmailForm.tsx | 3 +- src/components/auth/AuthEmailSuccess.tsx | 1 + src/components/auth/AuthForm.tsx | 1 + src/components/auth/AuthModal.tsx | 3 +- src/components/auth/AuthSocialButton.tsx | 3 +- src/components/base/HeaderLogo.tsx | 1 + src/components/base/HeaderUserIcon.tsx | 1 + src/components/base/HeaderUserMenuItem.tsx | 3 +- src/components/common/EditRemoveGroup.tsx | 1 + src/components/common/FlatPostCard.tsx | 5 +- src/components/common/FlatPostCardList.tsx | 3 +- src/components/common/HorizontalTab.tsx | 11 +++-- src/components/common/LabelInput.tsx | 7 +-- src/components/common/MarkdownEditor.tsx | 1 + src/components/common/MarkdownRender.tsx | 1 + src/components/common/PopupOKCancel.tsx | 1 + src/components/common/PostCard.tsx | 1 + src/components/common/PrivatePostLabel.tsx | 1 + src/components/common/RequireLogin.tsx | 3 +- src/components/common/SelectableList.tsx | 48 +++++++++---------- src/components/common/Skeleton.tsx | 5 +- src/components/common/SorterButton.tsx | 3 +- src/components/common/SpinnerBlock.tsx | 1 + src/components/common/TagItem.tsx | 3 +- src/components/common/ToggleSwitch.tsx | 6 +-- src/components/common/Typography.tsx | 14 ++++-- src/components/common/UserProfile.tsx | 1 + src/components/error/ErrorScreenTemplate.tsx | 1 + src/components/home/HomeMobileHeadExtra.tsx | 1 + src/components/home/HomeNoticeWidget.tsx | 3 +- src/components/home/HomeRightFooter.tsx | 3 +- src/components/home/HomeTab.tsx | 1 + src/components/home/HomeTagWidget.tsx | 3 +- src/components/home/HomeWidget.tsx | 1 + src/components/home/TimeframePicker.tsx | 3 +- src/components/post/LinkedPostItem.tsx | 13 ++--- src/components/post/MobileLikeButton.tsx | 3 +- src/components/post/PostCommentItem.tsx | 3 +- src/components/post/PostCommentsTemplate.tsx | 1 + src/components/post/PostCommentsWrite.tsx | 1 + src/components/post/PostHead.tsx | 1 + src/components/post/PostLikeShareButtons.tsx | 14 +++--- src/components/post/PostReplies.tsx | 1 + src/components/post/PostSeriesInfo.tsx | 11 +++-- src/components/post/PostTags.tsx | 5 +- src/components/post/PostToc.tsx | 7 +-- src/components/postStats/PostStats.tsx | 3 +- src/components/register/RegisterForm.tsx | 1 + src/components/register/RegisterTemplate.tsx | 1 + src/components/saves/SavedPostItem.tsx | 1 + src/components/saves/SavedPosts.tsx | 12 ++--- src/components/saves/SavesTemplate.tsx | 1 + src/components/search/SearchInput.tsx | 5 +- src/components/search/SearchResultInfo.tsx | 1 + src/components/setting/SettingEditButton.tsx | 1 + src/components/setting/SettingInput.tsx | 3 +- src/components/setting/SettingRow.tsx | 1 + .../setting/SettingSocialInfoRow.tsx | 7 +-- src/components/setting/SettingUserProfile.tsx | 1 + src/components/tags/DetailedTagItem.tsx | 3 +- src/components/tags/TagDetail.tsx | 1 + .../velog/DraggableSeriesPostList.tsx | 9 ++-- src/components/velog/SeriesItem.tsx | 1 + src/components/velog/SeriesList.tsx | 3 +- src/components/velog/SeriesPostItem.tsx | 3 +- src/components/velog/SeriesPostsTemplate.tsx | 1 + .../velog/UserTagHorizontalList.tsx | 5 +- src/components/velog/UserTagVerticalList.tsx | 1 + src/components/velog/VelogAboutContent.tsx | 1 + src/components/velog/VelogTab.tsx | 1 + src/components/write/AddLink.tsx | 1 + src/components/write/MarkdownPreview.tsx | 1 + src/components/write/PublishPreview.tsx | 5 +- .../write/PublishPrivacySetting.tsx | 3 +- .../write/PublishScreenTemplate.tsx | 5 +- src/components/write/PublishSection.tsx | 1 + src/components/write/PublishSeriesCreate.tsx | 5 +- src/components/write/PublishSeriesSection.tsx | 1 + src/components/write/PublishURLSetting.tsx | 1 + src/components/write/QuillEditor.tsx.temp | 1 + src/components/write/TagInput.tsx | 5 +- src/components/write/TitleTextarea.tsx | 1 + src/components/write/Toolbar.tsx | 7 +-- src/components/write/WriteMarkdownEditor.tsx | 18 ++++--- src/containers/post/RelatedPost.tsx | 3 +- src/containers/post/RelatedPostsForGuest.tsx | 1 + src/containers/search/LargeSearchInput.tsx | 1 + src/containers/velog/UserPosts.tsx | 3 +- src/lib/styles/postStyles.ts | 3 +- src/pages/SuccessPage.tsx | 1 + src/pages/readingList/ReadingListPage.tsx | 1 + src/pages/velog/UserPage.tsx | 1 + 92 files changed, 218 insertions(+), 126 deletions(-) diff --git a/src/components/auth/AuthEmailForm.tsx b/src/components/auth/AuthEmailForm.tsx index 87deb1f6..f53728fa 100644 --- a/src/components/auth/AuthEmailForm.tsx +++ b/src/components/auth/AuthEmailForm.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import styled from 'styled-components'; +import { themedPalette } from '../../lib/styles/themes'; import palette from '../../lib/styles/palette'; const AuthEmailFormBlock = styled.form` @@ -62,7 +63,7 @@ const AuthEmailForm: React.FC = ({ }) => { return ( { + onSubmit={(e) => { e.preventDefault(); onSubmit(value); }} diff --git a/src/components/auth/AuthEmailSuccess.tsx b/src/components/auth/AuthEmailSuccess.tsx index 624744c3..9a26160d 100644 --- a/src/components/auth/AuthEmailSuccess.tsx +++ b/src/components/auth/AuthEmailSuccess.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import styled from 'styled-components'; import { MdCheck } from 'react-icons/md'; +import { themedPalette } from '../../lib/styles/themes'; import palette from '../../lib/styles/palette'; const AuthEmailSuccessBlock = styled.div` diff --git a/src/components/auth/AuthForm.tsx b/src/components/auth/AuthForm.tsx index 7d38867e..9acbde98 100644 --- a/src/components/auth/AuthForm.tsx +++ b/src/components/auth/AuthForm.tsx @@ -3,6 +3,7 @@ import styled from 'styled-components'; import useInput from '../../lib/hooks/useInput'; import AuthEmailForm from './AuthEmailForm'; import { AuthMode } from '../../modules/core'; +import { themedPalette } from '../../lib/styles/themes'; import palette from '../../lib/styles/palette'; import AuthSocialButtonGroup from './AuthSocialButtonGroup'; import AuthEmailSuccess from './AuthEmailSuccess'; diff --git a/src/components/auth/AuthModal.tsx b/src/components/auth/AuthModal.tsx index 3c7128e6..c870627d 100644 --- a/src/components/auth/AuthModal.tsx +++ b/src/components/auth/AuthModal.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import styled, { css } from 'styled-components'; import { MdClose } from 'react-icons/md'; import zIndexes from '../../lib/styles/zIndexes'; +import { themedPalette } from '../../lib/styles/themes'; import palette from '../../lib/styles/palette'; import { undrawJoyride } from '../../static/images'; import transitions from '../../lib/styles/transitions'; @@ -28,7 +29,7 @@ const AuthModalBlock = styled.div<{ visible: boolean }>` height: 100%; } - ${props => + ${(props) => props.visible ? css` animation: ${transitions.popInFromBottom} 0.4s forwards ease-in-out; diff --git a/src/components/auth/AuthSocialButton.tsx b/src/components/auth/AuthSocialButton.tsx index f0d899e7..157729f9 100644 --- a/src/components/auth/AuthSocialButton.tsx +++ b/src/components/auth/AuthSocialButton.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import styled, { css } from 'styled-components'; import { FacebookIcon, GoogleIcon, GithubIcon } from '../../static/svg'; +import { themedPalette } from '../../lib/styles/themes'; import palette from '../../lib/styles/palette'; const AuthSocialButtonBlock = styled.a<{ border: boolean }>` @@ -13,7 +14,7 @@ const AuthSocialButtonBlock = styled.a<{ border: boolean }>` outline: none; transition: 0.125s all ease-in; color: white; - ${props => + ${(props) => props.border && css` border: 1px solid ${palette.gray3}; diff --git a/src/components/base/HeaderLogo.tsx b/src/components/base/HeaderLogo.tsx index e90369ba..7923d9d6 100644 --- a/src/components/base/HeaderLogo.tsx +++ b/src/components/base/HeaderLogo.tsx @@ -3,6 +3,7 @@ import styled from 'styled-components'; import { Link } from 'react-router-dom'; import { Logo, VelogIcon } from '../../static/svg'; import { UserLogo } from '../../modules/header'; +import { themedPalette } from '../../lib/styles/themes'; import palette from '../../lib/styles/palette'; import { createFallbackTitle } from '../../lib/utils'; import media from '../../lib/styles/media'; diff --git a/src/components/base/HeaderUserIcon.tsx b/src/components/base/HeaderUserIcon.tsx index 61cd13ea..bebf5335 100644 --- a/src/components/base/HeaderUserIcon.tsx +++ b/src/components/base/HeaderUserIcon.tsx @@ -3,6 +3,7 @@ import styled from 'styled-components'; import { CurrentUser } from '../../lib/graphql/user'; import { MdArrowDropDown } from 'react-icons/md'; import { userThumbnail } from '../../static/images'; +import { themedPalette } from '../../lib/styles/themes'; import palette from '../../lib/styles/palette'; import optimizeImage from '../../lib/optimizeImage'; diff --git a/src/components/base/HeaderUserMenuItem.tsx b/src/components/base/HeaderUserMenuItem.tsx index ef8da664..30e2be69 100644 --- a/src/components/base/HeaderUserMenuItem.tsx +++ b/src/components/base/HeaderUserMenuItem.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import styled from 'styled-components'; import { Link } from 'react-router-dom'; +import { themedPalette } from '../../lib/styles/themes'; import palette from '../../lib/styles/palette'; const WrapperLink = styled(Link)` @@ -16,7 +17,7 @@ const HeaderUserMenuItemBlock = styled.div` font-weight: 500; cursor: pointer; &:hover { - background: ${palette.gray0}; + background: ${themedPalette.bg_element2}; } `; diff --git a/src/components/common/EditRemoveGroup.tsx b/src/components/common/EditRemoveGroup.tsx index f9f56825..f11fc393 100644 --- a/src/components/common/EditRemoveGroup.tsx +++ b/src/components/common/EditRemoveGroup.tsx @@ -1,4 +1,5 @@ import styled from 'styled-components'; +import { themedPalette } from '../../lib/styles/themes'; import palette from '../../lib/styles/palette'; const EditRemoveGroup = styled.div` diff --git a/src/components/common/FlatPostCard.tsx b/src/components/common/FlatPostCard.tsx index 4a0a1e5b..39679a06 100644 --- a/src/components/common/FlatPostCard.tsx +++ b/src/components/common/FlatPostCard.tsx @@ -1,6 +1,7 @@ import React, { useRef } from 'react'; import { Link } from 'react-router-dom'; import styled from 'styled-components'; +import { themedPalette } from '../../lib/styles/themes'; import palette from '../../lib/styles/palette'; import { userThumbnail } from '../../static/images'; import Tag from './TagItem'; @@ -37,7 +38,7 @@ const PostCardBlock = styled.div` height: 3rem; display: block; margin-right: 1rem; - background: ${palette.gray0}; + background: ${themedPalette.bg_element2}; object-fit: cover; border-radius: 1.5rem; box-shadow: 0px 0 8px rgba(0, 0, 0, 0.1); @@ -178,7 +179,7 @@ const FlatPostCard = ({ post, hideUser }: PostCardProps) => {

{post.short_description}

- {post.tags.map(tag => ( + {post.tags.map((tag) => ( ))}
diff --git a/src/components/common/FlatPostCardList.tsx b/src/components/common/FlatPostCardList.tsx index 4d6cc919..bdc7ceba 100644 --- a/src/components/common/FlatPostCardList.tsx +++ b/src/components/common/FlatPostCardList.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import styled from 'styled-components'; import PostCard, { PostCardSkeleton } from './FlatPostCard'; import { PartialPost } from '../../lib/graphql/post'; +import { themedPalette } from '../../lib/styles/themes'; import palette from '../../lib/styles/palette'; const PostCardListBlock = styled.div``; @@ -14,7 +15,7 @@ interface PostCardListProps { const PostCardList: React.FC = ({ posts, hideUser }) => { return ( - {posts.map(post => ( + {posts.map((post) => ( ))} diff --git a/src/components/common/HorizontalTab.tsx b/src/components/common/HorizontalTab.tsx index 895a8d19..e8779bbe 100644 --- a/src/components/common/HorizontalTab.tsx +++ b/src/components/common/HorizontalTab.tsx @@ -1,6 +1,7 @@ import React from 'react'; import styled, { css } from 'styled-components'; import { Link } from 'react-router-dom'; +import { themedPalette } from '../../lib/styles/themes'; import palette from '../../lib/styles/palette'; import { useSpring, animated } from 'react-spring'; import media from '../../lib/styles/media'; @@ -23,7 +24,7 @@ function HorizontalTab({ theme, }: HorizontalTabProps) { const activeIndex = React.Children.toArray(children).findIndex( - tab => tab.props.name === activeTab, + (tab) => tab.props.name === activeTab, ); const ratio = 100 / children.length; @@ -40,7 +41,7 @@ function HorizontalTab({ return (
- {React.Children.map(children, tab => { + {React.Children.map(children, (tab) => { return React.cloneElement(tab, { active: tab.props.name === activeTab, width: `${tabWidth}rem`, @@ -87,7 +88,7 @@ TabItem.defaultProps = { const Block = styled.div<{ align: 'center' | 'left' }>` display: flex; - ${props => + ${(props) => props.align === 'center' && css` justify-content: center; @@ -104,7 +105,7 @@ const Indicator = styled(animated.div)<{ theme: 'teal' | 'gray' }>` position: absolute; bottom: 0px; background: ${palette.teal5}; - ${props => + ${(props) => props.theme === 'gray' && css` background: ${palette.gray8}; @@ -129,7 +130,7 @@ const StyledLink = styled(Link)<{ &.active { font-weight: bold; color: ${palette.teal5}; - ${props => + ${(props) => props.theme === 'gray' && css` color: ${palette.gray8}; diff --git a/src/components/common/LabelInput.tsx b/src/components/common/LabelInput.tsx index 0cac9fc4..84fa08e5 100644 --- a/src/components/common/LabelInput.tsx +++ b/src/components/common/LabelInput.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import styled, { css } from 'styled-components'; +import { themedPalette } from '../../lib/styles/themes'; import palette from '../../lib/styles/palette'; import { MdLockOutline } from 'react-icons/md'; import media from '../../lib/styles/media'; @@ -15,7 +16,7 @@ const LabelInputBlock = styled.div<{ focus: boolean }>` color: ${palette.gray9}; margin-bottom: 1rem; transition: all 0.125s ease-in; - ${props => + ${(props) => props.focus && css` color: ${palette.teal7}; @@ -33,7 +34,7 @@ const LabelInputBlock = styled.div<{ focus: boolean }>` width: 100%; color: ${palette.gray7}; transition: all 0.125s ease-in; - ${props => + ${(props) => props.focus && css` color: ${palette.teal7}; @@ -54,7 +55,7 @@ const LabelInputBlock = styled.div<{ focus: boolean }>` border-bottom: 1px solid ${palette.gray7}; display: flex; align-items: center; - ${props => + ${(props) => props.focus && css` border-color: ${palette.teal7}; diff --git a/src/components/common/MarkdownEditor.tsx b/src/components/common/MarkdownEditor.tsx index 4f428fdf..f2b27e76 100644 --- a/src/components/common/MarkdownEditor.tsx +++ b/src/components/common/MarkdownEditor.tsx @@ -3,6 +3,7 @@ import styled from 'styled-components'; import CodeMirror, { EditorFromTextArea, Editor } from 'codemirror'; import './atom-one-light.css'; import 'codemirror/lib/codemirror.css'; +import { themedPalette } from '../../lib/styles/themes'; import palette from '../../lib/styles/palette'; import 'codemirror/mode/markdown/markdown'; import 'codemirror/addon/display/placeholder'; diff --git a/src/components/common/MarkdownRender.tsx b/src/components/common/MarkdownRender.tsx index 2c0207c6..144cc47f 100644 --- a/src/components/common/MarkdownRender.tsx +++ b/src/components/common/MarkdownRender.tsx @@ -13,6 +13,7 @@ import media from '../../lib/styles/media'; import parse from 'html-react-parser'; import { throttle } from 'throttle-debounce'; import sanitize from 'sanitize-html'; +import { themedPalette } from '../../lib/styles/themes'; import palette from '../../lib/styles/palette'; import math from 'remark-math'; import remark2rehype from 'remark-rehype'; diff --git a/src/components/common/PopupOKCancel.tsx b/src/components/common/PopupOKCancel.tsx index 3b40218d..cb147151 100644 --- a/src/components/common/PopupOKCancel.tsx +++ b/src/components/common/PopupOKCancel.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import styled from 'styled-components'; import PopupBase from './PopupBase'; import Button from './Button'; +import { themedPalette } from '../../lib/styles/themes'; import palette from '../../lib/styles/palette'; const PopupOKCancelBlock = styled.div` diff --git a/src/components/common/PostCard.tsx b/src/components/common/PostCard.tsx index 053dcbb7..a1e9bdbe 100644 --- a/src/components/common/PostCard.tsx +++ b/src/components/common/PostCard.tsx @@ -2,6 +2,7 @@ import React, { useRef } from 'react'; import styled, { css } from 'styled-components'; import RatioImage from './RatioImage'; import { ellipsis } from '../../lib/styles/utils'; +import { themedPalette } from '../../lib/styles/themes'; import palette from '../../lib/styles/palette'; import { LikeIcon } from '../../static/svg'; import { PartialPost } from '../../lib/graphql/post'; diff --git a/src/components/common/PrivatePostLabel.tsx b/src/components/common/PrivatePostLabel.tsx index 8a786217..4cfe6e9d 100644 --- a/src/components/common/PrivatePostLabel.tsx +++ b/src/components/common/PrivatePostLabel.tsx @@ -1,5 +1,6 @@ import React from 'react'; import styled from 'styled-components'; +import { themedPalette } from '../../lib/styles/themes'; import palette from '../../lib/styles/palette'; import { LockIcon } from '../../static/svg'; diff --git a/src/components/common/RequireLogin.tsx b/src/components/common/RequireLogin.tsx index 82cdbc0a..d8b357cc 100644 --- a/src/components/common/RequireLogin.tsx +++ b/src/components/common/RequireLogin.tsx @@ -3,6 +3,7 @@ import { undrawLogin } from '../../static/images'; import styled, { css } from 'styled-components'; import Button from './Button'; import useRequireLogin from '../../lib/hooks/useRequireLogin'; +import { themedPalette } from '../../lib/styles/themes'; import palette from '../../lib/styles/palette'; import media from '../../lib/styles/media'; @@ -44,7 +45,7 @@ const Block = styled.div<{ hasMargin?: boolean }>` font-size: 1.25rem; } } - ${props => + ${(props) => props.hasMargin && css` margin-top: 10rem; diff --git a/src/components/common/SelectableList.tsx b/src/components/common/SelectableList.tsx index d1a638f1..5bc95636 100644 --- a/src/components/common/SelectableList.tsx +++ b/src/components/common/SelectableList.tsx @@ -1,5 +1,6 @@ import React from 'react'; import styled, { css } from 'styled-components'; +import { themedPalette } from '../../lib/styles/themes'; import palette from '../../lib/styles/palette'; const SelectableListBlock = styled.ul` @@ -17,7 +18,7 @@ const ListItem = styled.li<{ active: boolean }>` color: ${palette.gray7}; border-bottom: 1px solid ${palette.gray2}; - ${props => + ${(props) => props.active && css` background: ${palette.teal6}; @@ -35,28 +36,27 @@ export interface SelectableListProps { onChangeId: (id: any) => void; } -const SelectableList: React.ComponentType< - SelectableListProps -> = React.forwardRef( - ( - { list, selectedId, className, onChangeId }: SelectableListProps, - ref: React.Ref, - ) => { - return ( - - {list.map(item => ( - onChangeId(item.id)} - > - {item.text} - - ))} - - ); - }, -); +const SelectableList: React.ComponentType = + React.forwardRef( + ( + { list, selectedId, className, onChangeId }: SelectableListProps, + ref: React.Ref, + ) => { + return ( + + {list.map((item) => ( + onChangeId(item.id)} + > + {item.text} + + ))} + + ); + }, + ); export default SelectableList; diff --git a/src/components/common/Skeleton.tsx b/src/components/common/Skeleton.tsx index e0f01c35..fff7e128 100644 --- a/src/components/common/Skeleton.tsx +++ b/src/components/common/Skeleton.tsx @@ -1,5 +1,6 @@ import React from 'react'; import styled, { keyframes, css } from 'styled-components'; +import { themedPalette } from '../../lib/styles/themes'; import palette from '../../lib/styles/palette'; export type SkeletonProps = { @@ -52,7 +53,7 @@ const Block = styled.span<{ noSpacing?: boolean; circle?: boolean }>` border-radius: 4px; height: 1em; - ${props => + ${(props) => !props.noSpacing && css` & + & { @@ -60,7 +61,7 @@ const Block = styled.span<{ noSpacing?: boolean; circle?: boolean }>` } `} - ${props => + ${(props) => props.circle && css` border-radius: 50%; diff --git a/src/components/common/SorterButton.tsx b/src/components/common/SorterButton.tsx index 22baa0ef..ca4db249 100644 --- a/src/components/common/SorterButton.tsx +++ b/src/components/common/SorterButton.tsx @@ -1,6 +1,7 @@ import React from 'react'; import styled from 'styled-components'; import { MdKeyboardArrowUp } from 'react-icons/md'; +import { themedPalette } from '../../lib/styles/themes'; import palette from '../../lib/styles/palette'; const StyledButton = styled.button` @@ -15,7 +16,7 @@ const StyledButton = styled.button` border: none; outline: none; &:hover { - background: ${palette.gray0}; + background: ${themedPalette.bg_element2}; } &:focus { box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.12); diff --git a/src/components/common/SpinnerBlock.tsx b/src/components/common/SpinnerBlock.tsx index 872fbcbf..a23ecf6d 100644 --- a/src/components/common/SpinnerBlock.tsx +++ b/src/components/common/SpinnerBlock.tsx @@ -1,5 +1,6 @@ import React from 'react'; import styled from 'styled-components'; +import { themedPalette } from '../../lib/styles/themes'; import palette from '../../lib/styles/palette'; function SpinnerBlock() { diff --git a/src/components/common/TagItem.tsx b/src/components/common/TagItem.tsx index 2d6a5791..04031ff2 100644 --- a/src/components/common/TagItem.tsx +++ b/src/components/common/TagItem.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import styled, { css } from 'styled-components'; +import { themedPalette } from '../../lib/styles/themes'; import palette from '../../lib/styles/palette'; import { Link } from 'react-router-dom'; import { escapeForUrl } from '../../lib/utils'; @@ -49,7 +50,7 @@ const TagDiv = styled.div` const TagLink = styled(Link)` ${tagStyle} &:hover { - background: ${palette.gray0}; + background: ${themedPalette.bg_element2}; } `; diff --git a/src/components/common/ToggleSwitch.tsx b/src/components/common/ToggleSwitch.tsx index 140fe10e..30c7dbb6 100644 --- a/src/components/common/ToggleSwitch.tsx +++ b/src/components/common/ToggleSwitch.tsx @@ -1,9 +1,9 @@ import React, { useState, useEffect, useRef } from 'react'; import styled, { css } from 'styled-components'; +import { themedPalette } from '../../lib/styles/themes'; import palette from '../../lib/styles/palette'; import { useSpring, animated } from 'react-spring'; - export type ToggleSwitchProps = { name?: string; value: boolean; @@ -27,7 +27,7 @@ function ToggleSwitch({ value, name, onChange }: ToggleSwitchProps) { }); const toggle = () => { - setLocalValue(v => !v); + setLocalValue((v) => !v); }; useEffect(() => { @@ -63,7 +63,7 @@ const Block = styled.div<{ active: boolean }>` transition: 0.125s all ease-in; border-radius: 1.125rem; padding: 0.125rem; - ${props => + ${(props) => props.active && css` background: ${palette.teal5}; diff --git a/src/components/common/Typography.tsx b/src/components/common/Typography.tsx index dd1becb8..c35d0007 100644 --- a/src/components/common/Typography.tsx +++ b/src/components/common/Typography.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import styled from 'styled-components'; +import { themedPalette } from '../../lib/styles/themes'; import palette from '../../lib/styles/palette'; import media from '../../lib/styles/media'; @@ -10,7 +11,9 @@ const TypographyBlock = styled.div` letter-spacing: -0.004em; word-break: keep-all; word-wrap: break-word; - ul, ol, p { + ul, + ol, + p { /* ${media.xxlarge} { color: ${palette.gray8}; font-weight: 300; @@ -20,8 +23,8 @@ const TypographyBlock = styled.div` font-weight: 400; } code { - background: rgba(27,31,35,.05); - padding: .2em .4em; + background: rgba(27, 31, 35, 0.05); + padding: 0.2em 0.4em; font-size: 85%; border-radius: 3px; } @@ -129,13 +132,14 @@ const TypographyBlock = styled.div` border-left: 4px solid ${palette.teal5}; border-top-right-radius: 4px; border-bottom-right-radius: 4px; - background: ${palette.gray0}; + background: ${themedPalette.bg_element2}; margin-left: 0; margin-right: 0; padding: 1rem; padding-left: 2rem; color: ${palette.gray9}; - ul, ol { + ul, + ol { padding-left: 1rem; } *:first-child { diff --git a/src/components/common/UserProfile.tsx b/src/components/common/UserProfile.tsx index 3fb44e2c..ffdfe9c3 100644 --- a/src/components/common/UserProfile.tsx +++ b/src/components/common/UserProfile.tsx @@ -1,5 +1,6 @@ import React, { CSSProperties, useState, useRef } from 'react'; import styled from 'styled-components'; +import { themedPalette } from '../../lib/styles/themes'; import palette from '../../lib/styles/palette'; import { GithubIcon, diff --git a/src/components/error/ErrorScreenTemplate.tsx b/src/components/error/ErrorScreenTemplate.tsx index c413eed9..442d5adc 100644 --- a/src/components/error/ErrorScreenTemplate.tsx +++ b/src/components/error/ErrorScreenTemplate.tsx @@ -1,6 +1,7 @@ import React from 'react'; import styled from 'styled-components'; import media from '../../lib/styles/media'; +import { themedPalette } from '../../lib/styles/themes'; import palette from '../../lib/styles/palette'; import Button from '../common/Button'; diff --git a/src/components/home/HomeMobileHeadExtra.tsx b/src/components/home/HomeMobileHeadExtra.tsx index 1edb7796..b9ab07ab 100644 --- a/src/components/home/HomeMobileHeadExtra.tsx +++ b/src/components/home/HomeMobileHeadExtra.tsx @@ -1,5 +1,6 @@ import React from 'react'; import styled from 'styled-components'; +import { themedPalette } from '../../lib/styles/themes'; import palette from '../../lib/styles/palette'; import { Link } from 'react-router-dom'; import { useTransition, animated } from 'react-spring'; diff --git a/src/components/home/HomeNoticeWidget.tsx b/src/components/home/HomeNoticeWidget.tsx index e6c9f8a7..db33c66b 100644 --- a/src/components/home/HomeNoticeWidget.tsx +++ b/src/components/home/HomeNoticeWidget.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import styled from 'styled-components'; +import { themedPalette } from '../../lib/styles/themes'; import palette from '../../lib/styles/palette'; import HomeWidget from './HomeWidget'; import { Link } from 'react-router-dom'; @@ -19,7 +20,7 @@ const HomeNoticeWidget: React.FC = ({ posts }) => { {posts.length === 0 &&
공지사항이 없습니다.
} {posts.length > 0 && (