diff --git a/frontend/.stylelintrc.js b/frontend/.stylelintrc.js index 3ca09a25..279d95e3 100644 --- a/frontend/.stylelintrc.js +++ b/frontend/.stylelintrc.js @@ -1,5 +1,7 @@ +const path = require('path'); module.exports = { extends: ['stylelint-config-standard', 'stylelint-config-prettier'], + plugins: ['stylelint-value-no-unknown-custom-properties', '@mavrin/stylelint-declaration-use-css-custom-properties'], rules: { 'max-empty-lines': 1, 'rule-empty-line-before': [ @@ -9,5 +11,16 @@ module.exports = { ignore: ['after-comment'], }, ], + 'mavrin/stylelint-declaration-use-css-custom-properties': { + cssDefinitions: ['color'], + ignoreProperties: ['/^\\$/'], + ignoreValues: ['/\\$/', 'transparent', '-webkit-focus-ring-color', 'currentColor'], + }, + 'csstools/value-no-unknown-custom-properties': [ + true, + { + importFrom: path.resolve(__dirname, './app/custom-properties.css'), + }, + ], }, }; diff --git a/frontend/app/common/config-types.ts b/frontend/app/common/config-types.ts index 5ee93b5b..37f83280 100644 --- a/frontend/app/common/config-types.ts +++ b/frontend/app/common/config-types.ts @@ -17,6 +17,8 @@ export interface CommentsConfig { page_title?: string; node?: string; locale?: string; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + __colors__?: any; } export interface LastCommentsConfig { diff --git a/frontend/app/components/auth-panel/__email-login-form/auth-panel__email-login-form.scss b/frontend/app/components/auth-panel/__email-login-form/auth-panel__email-login-form.scss index eff516cf..1ed6fa62 100644 --- a/frontend/app/components/auth-panel/__email-login-form/auth-panel__email-login-form.scss +++ b/frontend/app/components/auth-panel/__email-login-form/auth-panel__email-login-form.scss @@ -13,7 +13,7 @@ .auth-panel-email-login-form__token-input { resize: vertical; - border: 1px solid #c4c4c4; + border: 1px solid var(--color31); padding: 4px; font-family: inherit; font-size: 0.8em; @@ -21,8 +21,8 @@ line-height: 1.5; &:focus { - box-shadow: 0 0 0 2px rgba(37, 156, 154, 0.4); - border-color: #259c9a; + box-shadow: 0 0 0 2px var(--color47); + border-color: var(--color15); outline: none; } } @@ -51,11 +51,11 @@ } .auth-panel-email-login-form_theme_dark .auth-panel-email-login-form__error { - background: #672323; - color: #f98989; + background: var(--color28); + color: var(--color27); } .auth-panel-email-login-form_theme_light .auth-panel-email-login-form__error { - background: #ffd7d7; - color: #9a0000; + background: var(--color26); + color: var(--color25); } diff --git a/frontend/app/components/auth-panel/_theme/_dark/auth-panel_theme_dark.scss b/frontend/app/components/auth-panel/_theme/_dark/auth-panel_theme_dark.scss index 69f97941..54f008f1 100644 --- a/frontend/app/components/auth-panel/_theme/_dark/auth-panel_theme_dark.scss +++ b/frontend/app/components/auth-panel/_theme/_dark/auth-panel_theme_dark.scss @@ -1,5 +1,5 @@ .auth-panel_theme_dark { .auth-panel__user-id { - color: #eee; + color: var(--color5); } } diff --git a/frontend/app/components/auth-panel/_theme/_light/auth-panel_theme_light.scss b/frontend/app/components/auth-panel/_theme/_light/auth-panel_theme_light.scss index d73c59b8..5258740b 100644 --- a/frontend/app/components/auth-panel/_theme/_light/auth-panel_theme_light.scss +++ b/frontend/app/components/auth-panel/_theme/_light/auth-panel_theme_light.scss @@ -1,5 +1,5 @@ .auth-panel_theme_light { .auth-panel__user-id { - color: #888; + color: var(--color13); } } diff --git a/frontend/app/components/avatar-icon/_default/avatar-icon_default.scss b/frontend/app/components/avatar-icon/_default/avatar-icon_default.scss index a781240e..8f6525ea 100644 --- a/frontend/app/components/avatar-icon/_default/avatar-icon_default.scss +++ b/frontend/app/components/avatar-icon/_default/avatar-icon_default.scss @@ -1,3 +1,3 @@ .avatar-icon_default { - border: 1px solid #9cdddb; + border: 1px solid var(--color40); } diff --git a/frontend/app/components/button/_kind/_link/button_kind_link.scss b/frontend/app/components/button/_kind/_link/button_kind_link.scss index 829729f8..efc59116 100644 --- a/frontend/app/components/button/_kind/_link/button_kind_link.scss +++ b/frontend/app/components/button/_kind/_link/button_kind_link.scss @@ -1,14 +1,14 @@ .button_kind_link { background: transparent; font-weight: bold; - color: #0aa; + color: var(--color9); &:hover { - color: #06c5c5; + color: var(--color33); } &:disabled, &:hover:disabled { - color: #0aa; + color: var(--color9); } } diff --git a/frontend/app/components/button/_kind/_primary/button_kind_primary.scss b/frontend/app/components/button/_kind/_primary/button_kind_primary.scss index 87c539f5..d8e4efbf 100644 --- a/frontend/app/components/button/_kind/_primary/button_kind_primary.scss +++ b/frontend/app/components/button/_kind/_primary/button_kind_primary.scss @@ -1,12 +1,12 @@ .button_kind_primary { - background: #259c9a; - color: #fff; + background: var(--color15); + color: var(--color6); &:hover { - background: #06c5c5; + background: var(--color33); } &:hover:disabled { - background: #259c9a; + background: var(--color15); } } diff --git a/frontend/app/components/button/_kind/_secondary/button_kind_secondary.scss b/frontend/app/components/button/_kind/_secondary/button_kind_secondary.scss index b46c2c4d..902122a7 100644 --- a/frontend/app/components/button/_kind/_secondary/button_kind_secondary.scss +++ b/frontend/app/components/button/_kind/_secondary/button_kind_secondary.scss @@ -1,8 +1,8 @@ .button_kind_secondary { - background: #fff; + background: var(--color6); color: inherit; &:hover { - box-shadow: inset 0 0 0 2px #06c5c5; + box-shadow: inset 0 0 0 2px var(--color33); } } diff --git a/frontend/app/components/button/_theme/_dark/button_theme_dark.scss b/frontend/app/components/button/_theme/_dark/button_theme_dark.scss index 063a1283..798c2fdd 100644 --- a/frontend/app/components/button/_theme/_dark/button_theme_dark.scss +++ b/frontend/app/components/button/_theme/_dark/button_theme_dark.scss @@ -1,11 +1,11 @@ .button_theme_dark.button_kind_secondary { - background: #22201c; - color: #ddd; + background: var(--color8); + color: var(--color20); } .button_theme_dark.button_kind_link { &:disabled, &:hover:disabled { - color: #fff; + color: var(--color6); } } diff --git a/frontend/app/components/button/button.scss b/frontend/app/components/button/button.scss index eb5f7275..e4dba6a6 100644 --- a/frontend/app/components/button/button.scss +++ b/frontend/app/components/button/button.scss @@ -10,7 +10,7 @@ white-space: nowrap; &:focus { - box-shadow: 0 0 0 2px rgba(37, 156, 154, 0.4); + box-shadow: 0 0 0 2px var(--color47); outline: none; } diff --git a/frontend/app/components/comment-form/__button/_type/_preview/comment-form__button_type_preview.scss b/frontend/app/components/comment-form/__button/_type/_preview/comment-form__button_type_preview.scss index 8c7e5425..38c2c5db 100644 --- a/frontend/app/components/comment-form/__button/_type/_preview/comment-form__button_type_preview.scss +++ b/frontend/app/components/comment-form/__button/_type/_preview/comment-form__button_type_preview.scss @@ -1,7 +1,7 @@ .comment-form__button_type_preview { &:hover, &:focus { - box-shadow: inset 0 0 0 2px #0aa; - color: #099; + box-shadow: inset 0 0 0 2px var(--color9); + color: var(--color17); } } diff --git a/frontend/app/components/comment-form/__button/_type/_send/comment-form__button_type_send.scss b/frontend/app/components/comment-form/__button/_type/_send/comment-form__button_type_send.scss index 32727828..3aa28810 100644 --- a/frontend/app/components/comment-form/__button/_type/_send/comment-form__button_type_send.scss +++ b/frontend/app/components/comment-form/__button/_type/_send/comment-form__button_type_send.scss @@ -1,9 +1,9 @@ .comment-form__button_type_send { - background: #259c9a; - color: #fff; + background: var(--color15); + color: var(--color6); &:hover, &:focus { - background: #0aa; + background: var(--color9); } } diff --git a/frontend/app/components/comment-form/__control-panel/comment-form__control-panel.scss b/frontend/app/components/comment-form/__control-panel/comment-form__control-panel.scss index 194f7bde..90eaf41e 100644 --- a/frontend/app/components/comment-form/__control-panel/comment-form__control-panel.scss +++ b/frontend/app/components/comment-form/__control-panel/comment-form__control-panel.scss @@ -1,4 +1,4 @@ .comment-form__control-panel { height: 30px; - background-color: #eee; + background-color: var(--color5); } diff --git a/frontend/app/components/comment-form/__counter/comment-form__counter.scss b/frontend/app/components/comment-form/__counter/comment-form__counter.scss index 23f5eb21..eb4f98cb 100644 --- a/frontend/app/components/comment-form/__counter/comment-form__counter.scss +++ b/frontend/app/components/comment-form/__counter/comment-form__counter.scss @@ -4,5 +4,5 @@ bottom: 4px; font-size: 10px; font-weight: 700; - color: #ef0000; + color: var(--color38); } diff --git a/frontend/app/components/comment-form/__field/comment-form__field.scss b/frontend/app/components/comment-form/__field/comment-form__field.pcss similarity index 86% rename from frontend/app/components/comment-form/__field/comment-form__field.scss rename to frontend/app/components/comment-form/__field/comment-form__field.pcss index 37a21647..255123db 100644 --- a/frontend/app/components/comment-form/__field/comment-form__field.scss +++ b/frontend/app/components/comment-form/__field/comment-form__field.pcss @@ -20,12 +20,12 @@ transform: translateZ(0); /* let's try to fix blinking in Safari, again */ &:focus { - box-shadow: 0 0 0 2px rgba(37, 156, 154, 0.4); - border-color: #259c9a; + box-shadow: 0 0 0 2px var(--color47); + border-color: var(--color15); outline: none; } &:disabled { - color: #777; + color: var(--color10); } } diff --git a/frontend/app/components/comment-form/__markdown-link/comment-form__markdown-link.scss b/frontend/app/components/comment-form/__markdown-link/comment-form__markdown-link.scss index 268e85c0..4b8ce247 100644 --- a/frontend/app/components/comment-form/__markdown-link/comment-form__markdown-link.scss +++ b/frontend/app/components/comment-form/__markdown-link/comment-form__markdown-link.scss @@ -3,9 +3,9 @@ white-space: nowrap; text-decoration: none; cursor: pointer; - color: #0aa; + color: var(--color9); &:hover { - color: #06c5c5; + color: var(--color33); } } diff --git a/frontend/app/components/comment-form/__markdown-toolbar/comment-form__markdown-toolbar.scss b/frontend/app/components/comment-form/__markdown-toolbar/comment-form__markdown-toolbar.scss index 729aa27f..32a04772 100644 --- a/frontend/app/components/comment-form/__markdown-toolbar/comment-form__markdown-toolbar.scss +++ b/frontend/app/components/comment-form/__markdown-toolbar/comment-form__markdown-toolbar.scss @@ -14,13 +14,13 @@ .comment-form__toolbar-item { background: none; border: 0; - color: #586069; + color: var(--color37); display: block; float: left; padding: 4px 5px; &:hover { - color: #0aa; + color: var(--color9); } } diff --git a/frontend/app/components/comment-form/__rss-link/comment-form__rss-link.scss b/frontend/app/components/comment-form/__rss-link/comment-form__rss-link.scss index 39ddb646..0c906976 100644 --- a/frontend/app/components/comment-form/__rss-link/comment-form__rss-link.scss +++ b/frontend/app/components/comment-form/__rss-link/comment-form__rss-link.scss @@ -3,9 +3,9 @@ white-space: nowrap; text-decoration: none; cursor: pointer; - color: #0aa; + color: var(--color9); &:hover { - color: #06c5c5; + color: var(--color33); } } diff --git a/frontend/app/components/comment-form/__subscribe-by-email/comment-form__subscribe-by-email.scss b/frontend/app/components/comment-form/__subscribe-by-email/comment-form__subscribe-by-email.scss index 5184dc15..3a997e89 100644 --- a/frontend/app/components/comment-form/__subscribe-by-email/comment-form__subscribe-by-email.scss +++ b/frontend/app/components/comment-form/__subscribe-by-email/comment-form__subscribe-by-email.scss @@ -35,7 +35,7 @@ .comment-form__subscribe-by-email__token-input { resize: vertical; - border: 1px solid #c4c4c4; + border: 1px solid var(--color31); padding: 4px; font-family: inherit; font-size: 0.8em; @@ -43,8 +43,8 @@ line-height: 1.5; &:focus { - box-shadow: 0 0 0 2px rgba(37, 156, 154, 0.4); - border-color: #259c9a; + box-shadow: 0 0 0 2px var(--color47); + border-color: var(--color15); outline: none; } } @@ -56,11 +56,11 @@ } .comment-form__subscribe-by-email_theme_dark .comment-form__subscribe-by-email__error { - background: #672323; - color: #f98989; + background: var(--color28); + color: var(--color27); } .comment-form__subscribe-by-email_theme_light .comment-form__subscribe-by-email__error { - background: #ffd7d7; - color: #9a0000; + background: var(--color26); + color: var(--color25); } diff --git a/frontend/app/components/comment-form/__subscribe-by-rss/comment-form__subscribe-by-rss.scss b/frontend/app/components/comment-form/__subscribe-by-rss/comment-form__subscribe-by-rss.scss index f2df87cb..979102d7 100644 --- a/frontend/app/components/comment-form/__subscribe-by-rss/comment-form__subscribe-by-rss.scss +++ b/frontend/app/components/comment-form/__subscribe-by-rss/comment-form__subscribe-by-rss.scss @@ -7,9 +7,9 @@ white-space: nowrap; text-decoration: none; cursor: pointer; - color: #0aa; + color: var(--color9); &:hover { - color: #06c5c5; + color: var(--color33); } } diff --git a/frontend/app/components/comment-form/_theme/_dark/comment-form_theme_dark.scss b/frontend/app/components/comment-form/_theme/_dark/comment-form_theme_dark.scss index a47aac22..317bf788 100644 --- a/frontend/app/components/comment-form/_theme/_dark/comment-form_theme_dark.scss +++ b/frontend/app/components/comment-form/_theme/_dark/comment-form_theme_dark.scss @@ -1,50 +1,50 @@ .comment-form_theme_dark { - border-color: #333; - background: #22201c; /* try to fix textarea blinking in Safari */ + border-color: var(--color7); + background: var(--color8); /* try to fix textarea blinking in Safari */ .comment-form__actions { - background: #333; + background: var(--color7); } .comment-form__button_type_preview { - background: #22201c; - color: #ddd; + background: var(--color8); + color: var(--color20); } .comment-form__button_type_send { - color: #ddd; + color: var(--color20); } .comment-form__error { - border-top: 8px solid #333; - background: #672323; - color: #f98989; + border-top: 8px solid var(--color7); + background: var(--color28); + color: var(--color27); } .comment-form__field { - background: #22201c; - color: #eee; + background: var(--color8); + color: var(--color5); } .comment-form__preview { - border-color: #22201c; - background: #22201c; - color: #ddd; + border-color: var(--color8); + background: var(--color8); + color: var(--color20); } .comment-form__preview-wrapper { - background: #333; + background: var(--color7); } .comment-form__toolbar-item { - color: #ddd; + color: var(--color20); &:hover { - color: #0aa; + color: var(--color9); } } .comment-form__control-panel { - background-color: #333; + background-color: var(--color7); } } diff --git a/frontend/app/components/comment-form/_theme/_light/comment-form_theme_light.scss b/frontend/app/components/comment-form/_theme/_light/comment-form_theme_light.scss index f3104b5f..e5b896f5 100644 --- a/frontend/app/components/comment-form/_theme/_light/comment-form_theme_light.scss +++ b/frontend/app/components/comment-form/_theme/_light/comment-form_theme_light.scss @@ -1,38 +1,38 @@ .comment-form_theme_light { - border-color: #eee; - background: #fff; /* try to fix textarea blinking in Safari */ + border-color: var(--color5); + background: var(--color6); /* try to fix textarea blinking in Safari */ .comment-form__actions { - background: #eee; + background: var(--color5); } .comment-form__button_type_preview { - background: #fff; - color: #000; + background: var(--color6); + color: var(--color0); } .comment-form__button_type_send { - color: #fff; + color: var(--color6); } .comment-form__error { - border-top: 8px solid #eee; - background: #ffd7d7; - color: #9a0000; + border-top: 8px solid var(--color5); + background: var(--color26); + color: var(--color25); } .comment-form__field { - background: #fff; - color: #000; + background: var(--color6); + color: var(--color0); } .comment-form__preview { - border-color: #eee; - background: #fff; - color: #333; + border-color: var(--color5); + background: var(--color6); + color: var(--color7); } .comment-form__preview-wrapper { - background: #eee; + background: var(--color5); } } diff --git a/frontend/app/components/comment-form/index.ts b/frontend/app/components/comment-form/index.ts index 112a9a66..112de9b2 100644 --- a/frontend/app/components/comment-form/index.ts +++ b/frontend/app/components/comment-form/index.ts @@ -13,7 +13,7 @@ import './__button/_type/_send/comment-form__button_type_send.scss'; import './__control-panel/comment-form__control-panel.scss'; import './__counter/comment-form__counter.scss'; import './__error/comment-form__error.scss'; -import './__field/comment-form__field.scss'; +import './__field/comment-form__field.pcss'; import './__field-wrapper/comment-form__field-wrapper.scss'; import './__preview/comment-form__preview.scss'; import './__preview-wrapper/comment-form__preview-wrapper.scss'; diff --git a/frontend/app/components/comment-form/text-expander.module.pcss b/frontend/app/components/comment-form/text-expander.module.pcss index 12d258b6..ef64448f 100644 --- a/frontend/app/components/comment-form/text-expander.module.pcss +++ b/frontend/app/components/comment-form/text-expander.module.pcss @@ -8,16 +8,16 @@ margin: 24px 0 0; list-style: none; cursor: pointer; - background: #fff; - border: 1px solid #dfe2e5; + background: var(--color6); + border: 1px solid var(--color16); border-radius: 3px; - box-shadow: 0 1px 5px rgba(27, 31, 35, 0.15); + box-shadow: 0 1px 5px var(--color46); } .suggesterDark { - background: #22201c; - color: #ddd; - border: 1px solid #333; + background: var(--color8); + color: var(--color20); + border: 1px solid var(--color7); } .suggesterItem { @@ -25,18 +25,18 @@ padding: 4px 8px; font-size: 14px; font-weight: 600; - border-bottom: 1px solid #dfe2e5; + border-bottom: 1px solid var(--color16); } .suggesterItemDark { - border-bottom: 1px solid #333; + border-bottom: 1px solid var(--color7); } .suggesterItem:hover, .suggesterItem[aria-selected='true'] { - color: #fff; + color: var(--color6); text-decoration: none; - background-color: rgba(37, 156, 154, 0.6); + background-color: var(--color48); } .suggesterItem:first-child { diff --git a/frontend/app/components/comment/__action/_type/_collapse/comment__action_type_collapse.scss b/frontend/app/components/comment/__action/_type/_collapse/comment__action_type_collapse.scss index 0a1e80f4..f35968a2 100644 --- a/frontend/app/components/comment/__action/_type/_collapse/comment__action_type_collapse.scss +++ b/frontend/app/components/comment/__action/_type/_collapse/comment__action_type_collapse.scss @@ -14,13 +14,13 @@ cursor: pointer; &:hover { - border-color: #0aa; - color: #0aa; + border-color: var(--color9); + color: var(--color9); } &.comment__action_selected { &:hover { - background: #0aa; + background: var(--color9); } } } diff --git a/frontend/app/components/comment/__control/comment__control.scss b/frontend/app/components/comment/__control/comment__control.scss index 3996951c..117446b4 100644 --- a/frontend/app/components/comment/__control/comment__control.scss +++ b/frontend/app/components/comment/__control/comment__control.scss @@ -1,6 +1,6 @@ .comment__control { margin-right: 8px; - color: #8cd4d4; + color: var(--color39); &:last-child { margin-right: 0; diff --git a/frontend/app/components/comment/__vote/comment__vote.scss b/frontend/app/components/comment/__vote/comment__vote.scss index 813609c6..c03f8497 100644 --- a/frontend/app/components/comment/__vote/comment__vote.scss +++ b/frontend/app/components/comment/__vote/comment__vote.scss @@ -11,7 +11,7 @@ } .voting__error { - color: #9a0000; + color: var(--color25); text-align: right; font-size: 14px; line-height: 1; diff --git a/frontend/app/components/comment/_theme/_dark/comment_theme_dark.scss b/frontend/app/components/comment/_theme/_dark/comment_theme_dark.scss index 0f523f69..fa0dafd1 100644 --- a/frontend/app/components/comment/_theme/_dark/comment_theme_dark.scss +++ b/frontend/app/components/comment/_theme/_dark/comment_theme_dark.scss @@ -1,23 +1,23 @@ .comment_theme_dark { .comment__action_type_collapse { - border-color: #555; - color: #555; + border-color: var(--color34); + color: var(--color34); &.comment__action_selected { - background: #555; - color: #22201c; + background: var(--color34); + color: var(--color8); } } .comment__action_type_delete, .comment__action_type_edit { - color: #6a6a6a; + color: var(--color14); } .comment__action { + .comment__controls { &::before { - color: #eee; + color: var(--color5); } } } @@ -26,72 +26,72 @@ &, &:hover, &:focus { - color: #999; + color: var(--color11); } } .comment__edit-timer { - color: #a6a6a6; + color: var(--color32); + .comment__controls { &::before { - color: #eee; + color: var(--color5); } } } .comment__score { - color: #c4c4c4; + color: var(--color31); } .comment__score_view_negative { - color: #cc0606; + color: var(--color30); } .comment__score_view_positive { - color: #259e06; + color: var(--color12); } .comment__status { - color: #999; + color: var(--color11); } .comment__time { - color: #999; + color: var(--color11); } .comment__user-id { - color: #888; + color: var(--color13); } .comment__username { - color: #777; + color: var(--color10); } &.comment_editing { .comment__input { - border-color: #333; + border-color: var(--color7); } @media (-moz-touch-enabled: 1) and (max-width: 768px), (pointer: coarse) and (max-width: 768px) { - border-color: #333; + border-color: var(--color7); } } &.comment_replying { .comment__input { - border-color: #333; + border-color: var(--color7); } @media (-moz-touch-enabled: 1) and (max-width: 768px), (pointer: coarse) and (max-width: 768px) { - border-color: #333; + border-color: var(--color7); } } &.comment_view_preview { .comment__info { &::after { - color: #777; + color: var(--color10); } } } diff --git a/frontend/app/components/comment/_theme/_light/comment_theme_light.scss b/frontend/app/components/comment/_theme/_light/comment_theme_light.scss index 7bb6456b..3fe6489b 100644 --- a/frontend/app/components/comment/_theme/_light/comment_theme_light.scss +++ b/frontend/app/components/comment/_theme/_light/comment_theme_light.scss @@ -1,23 +1,23 @@ .comment_theme_light { .comment__action_type_collapse { - border-color: #ddd; - color: #ddd; + border-color: var(--color20); + color: var(--color20); &.comment__action_selected { - background: #ddd; - color: #fff; + background: var(--color20); + color: var(--color6); } } .comment__action_type_delete, .comment__action_type_edit { - color: #a6a6a6; + color: var(--color32); } .comment__action { + .comment__controls { &::before { - color: #777; + color: var(--color10); } } } @@ -26,72 +26,72 @@ &, &:hover, &:focus { - color: #999; + color: var(--color11); } } .comment__edit-timer { - color: #a6a6a6; + color: var(--color32); + .comment__controls { &::before { - color: #777; + color: var(--color10); } } } .comment__score { - color: #c4c4c4; + color: var(--color31); } .comment__score_view_negative { - color: #cc0606; + color: var(--color30); } .comment__score_view_positive { - color: #259e06; + color: var(--color12); } .comment__status { - color: #999; + color: var(--color11); } .comment__time { - color: #999; + color: var(--color11); } .comment__user-id { - color: #888; + color: var(--color13); } .comment__username { - color: #777; + color: var(--color10); } &.comment_editing { .comment__input { - border-color: #eee; + border-color: var(--color5); } @media (-moz-touch-enabled: 1) and (max-width: 768px), (pointer: coarse) and (max-width: 768px) { - border-color: #eee; + border-color: var(--color5); } } &.comment_replying { .comment__input { - border-color: #eee; + border-color: var(--color5); } @media (-moz-touch-enabled: 1) and (max-width: 768px), (pointer: coarse) and (max-width: 768px) { - border-color: #eee; + border-color: var(--color5); } } &.comment_view_preview { .comment__info { &::after { - color: #777; + color: var(--color10); } } } diff --git a/frontend/app/components/comment/_view/_admin/comment_view_admin.scss b/frontend/app/components/comment/_view/_admin/comment_view_admin.scss index f9c15152..96fb14e8 100644 --- a/frontend/app/components/comment/_view/_admin/comment_view_admin.scss +++ b/frontend/app/components/comment/_view/_admin/comment_view_admin.scss @@ -3,7 +3,7 @@ &.comment_theme_light, &.comment_theme_dark { .comment__username { - color: #0e7e9d; + color: var(--color29); } } } diff --git a/frontend/app/components/comment/_view/_preview/comment_view_preview.scss b/frontend/app/components/comment/_view/_preview/comment_view_preview.scss index 7d1e0419..2864f7a7 100644 --- a/frontend/app/components/comment/_view/_preview/comment_view_preview.scss +++ b/frontend/app/components/comment/_view/_preview/comment_view_preview.scss @@ -9,11 +9,11 @@ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - color: #0aa; + color: var(--color9); } .comment__title-link { - color: #0aa; + color: var(--color9); text-decoration: none; &:hover { @@ -25,7 +25,7 @@ display: inline; padding-right: 0; font-weight: 700; - color: #777; + color: var(--color10); &::after { content: ' '; @@ -33,7 +33,7 @@ } .comment__username { - color: #0aa; + color: var(--color9); } .comment__text { diff --git a/frontend/app/components/comment/_view/_user/comment_view_user.scss b/frontend/app/components/comment/_view/_user/comment_view_user.scss index 74c2acf4..264575a8 100644 --- a/frontend/app/components/comment/_view/_user/comment_view_user.scss +++ b/frontend/app/components/comment/_view/_user/comment_view_user.scss @@ -15,7 +15,7 @@ } .comment__title-link { - color: #0e7e9d; + color: var(--color29); font-weight: bold; text-decoration: none; text-overflow: ellipsis; diff --git a/frontend/app/components/dropdown/__content/dropdown__content.scss b/frontend/app/components/dropdown/__content/dropdown__content.scss index b920969d..61a00461 100644 --- a/frontend/app/components/dropdown/__content/dropdown__content.scss +++ b/frontend/app/components/dropdown/__content/dropdown__content.scss @@ -8,7 +8,7 @@ transform: translate(-0.5em, 5px); min-width: 120px; max-width: 260px; - border: 2px solid #259c9a; + border: 2px solid var(--color15); border-radius: 3px; padding: 0 0 5px; } diff --git a/frontend/app/components/dropdown/__item/dropdown__item.scss b/frontend/app/components/dropdown/__item/dropdown__item.scss index 486850f6..01b73758 100644 --- a/frontend/app/components/dropdown/__item/dropdown__item.scss +++ b/frontend/app/components/dropdown/__item/dropdown__item.scss @@ -8,7 +8,7 @@ } &_separator { - border-bottom: 1px solid #259c9a; + border-bottom: 1px solid var(--color15); margin-bottom: 5px; } } diff --git a/frontend/app/components/dropdown/_theme/_dark/dropdown_theme_dark.scss b/frontend/app/components/dropdown/_theme/_dark/dropdown_theme_dark.scss index b24b8fa1..ee84e194 100644 --- a/frontend/app/components/dropdown/_theme/_dark/dropdown_theme_dark.scss +++ b/frontend/app/components/dropdown/_theme/_dark/dropdown_theme_dark.scss @@ -1,5 +1,5 @@ .dropdown_theme_dark { .dropdown__content { - background-color: #22201c; + background-color: var(--color8); } } diff --git a/frontend/app/components/dropdown/_theme/_light/dropdown_theme_light.scss b/frontend/app/components/dropdown/_theme/_light/dropdown_theme_light.scss index 0a1474e3..1c57c9aa 100644 --- a/frontend/app/components/dropdown/_theme/_light/dropdown_theme_light.scss +++ b/frontend/app/components/dropdown/_theme/_light/dropdown_theme_light.scss @@ -1,5 +1,5 @@ .dropdown_theme_light { .dropdown__content { - background-color: #fff; + background-color: var(--color6); } } diff --git a/frontend/app/components/input/input.scss b/frontend/app/components/input/input.scss index 78ea6a37..2e798f55 100644 --- a/frontend/app/components/input/input.scss +++ b/frontend/app/components/input/input.scss @@ -2,12 +2,12 @@ font-size: 16px; font-family: inherit; padding: 4px 8px; - border: 1px solid #c4c4c4; + border: 1px solid var(--color31); margin: 0; &:focus { - box-shadow: 0 0 0 2px rgba(37, 156, 154, 0.4); - border-color: #259c9a; + box-shadow: 0 0 0 2px var(--color47); + border-color: var(--color15); outline: none; } } diff --git a/frontend/app/components/raw-content/_theme/_dark/raw-content_theme_dark.scss b/frontend/app/components/raw-content/_theme/_dark/raw-content_theme_dark.scss index 82ae2e89..50acc7e2 100644 --- a/frontend/app/components/raw-content/_theme/_dark/raw-content_theme_dark.scss +++ b/frontend/app/components/raw-content/_theme/_dark/raw-content_theme_dark.scss @@ -1,24 +1,24 @@ .raw-content_theme_dark { blockquote { - border-left-color: rgba(255, 255, 255, 0.3); + border-left-color: var(--color44); } table { th, td { - border: 1px solid #313133; + border: 1px solid var(--color24); } tr { - background-color: #22201c; + background-color: var(--color8); &:nth-child(2n) { - background-color: #393734; + background-color: var(--color23); } } } hr { - border-color: #2d2d2c; + border-color: var(--color22); } } diff --git a/frontend/app/components/raw-content/_theme/_light/raw-content_theme_light.scss b/frontend/app/components/raw-content/_theme/_light/raw-content_theme_light.scss index dc651f7d..33a897a6 100644 --- a/frontend/app/components/raw-content/_theme/_light/raw-content_theme_light.scss +++ b/frontend/app/components/raw-content/_theme/_light/raw-content_theme_light.scss @@ -1,24 +1,24 @@ .raw-content_theme_light { blockquote { - border-left-color: rgba(0, 0, 0, 0.1); + border-left-color: var(--color45); } table { th, td { - border: 1px solid #dfe2e5; + border: 1px solid var(--color16); } tr { - background-color: #fff; + background-color: var(--color6); &:nth-child(2n) { - background-color: #f6f8fa; + background-color: var(--color21); } } } hr { - border-color: #f6f8fa; + border-color: var(--color21); } } diff --git a/frontend/app/components/raw-content/raw-content.scss b/frontend/app/components/raw-content/raw-content.scss index 4f7afe08..73a1c69f 100644 --- a/frontend/app/components/raw-content/raw-content.scss +++ b/frontend/app/components/raw-content/raw-content.scss @@ -1,15 +1,4 @@ .raw-content { - --chroma-bg: rgba(0, 0, 0, 0.05); - --chroma-base: #586e75; - --chroma-c: #7d7d7d; - --chroma-01: #589000; - --chroma-02: #cb4b16; - --chroma-03: #268bd2; - --chroma-04: #2aa198; - --chroma-05: #859900; - --chroma-06: #d33682; - --chroma-07: #00aee2; - .root_theme_dark & { --chroma-bg: rgba(255, 255, 255, 0.1); --chroma-base: #93a1a1; @@ -44,10 +33,10 @@ } a { - color: #0aa; + color: var(--color9); &:hover { - color: #06c5c5; + color: var(--color33); text-decoration: none; } } @@ -90,7 +79,7 @@ } tr { - border-top: 1px solid #b7dddd; + border-top: 1px solid var(--color43); } } diff --git a/frontend/app/components/root/_theme/_dark/root_theme_dark.scss b/frontend/app/components/root/_theme/_dark/root_theme_dark.scss index dcb8bfd6..daf785e3 100644 --- a/frontend/app/components/root/_theme/_dark/root_theme_dark.scss +++ b/frontend/app/components/root/_theme/_dark/root_theme_dark.scss @@ -1,19 +1,19 @@ .root_theme_dark { - color: #ddd; + color: var(--color20); .root__copyright { - color: #aaa; + color: var(--color1); } .root__copyright-link { - color: #aaa; + color: var(--color1); } .root__pinned-comment { - border-bottom-color: #383838; + border-bottom-color: var(--color18); } .root__pinned-comments { - background: #404040; + background: var(--color19); } } diff --git a/frontend/app/components/root/_theme/_light/root_theme_light.scss b/frontend/app/components/root/_theme/_light/root_theme_light.scss index f5eb56b2..e691a898 100644 --- a/frontend/app/components/root/_theme/_light/root_theme_light.scss +++ b/frontend/app/components/root/_theme/_light/root_theme_light.scss @@ -1,19 +1,19 @@ .root_theme_light { - color: #000; + color: var(--color0); .root__copyright { - color: #aaa; + color: var(--color1); } .root__copyright-link { - color: #aaa; + color: var(--color1); } .root__pinned-comment { - border-bottom-color: #e2efef; + border-bottom-color: var(--color3); } .root__pinned-comments { - background: #edf6f7; + background: var(--color4); } } diff --git a/frontend/app/components/root/root.scss b/frontend/app/components/root/root.scss index 635b3e68..a7ed3dd7 100644 --- a/frontend/app/components/root/root.scss +++ b/frontend/app/components/root/root.scss @@ -3,7 +3,7 @@ font-family: 'PT Sans', Helvetica, Arial, sans-serif; ::selection { - background: #c6efef; + background: var(--color42); } &_user-info { diff --git a/frontend/app/components/settings/__action/settings__action.scss b/frontend/app/components/settings/__action/settings__action.scss index 2e256e14..b4e3f917 100644 --- a/frontend/app/components/settings/__action/settings__action.scss +++ b/frontend/app/components/settings/__action/settings__action.scss @@ -1,11 +1,11 @@ .settings__action { margin-left: 8px; font-weight: 700; - color: #0aa; + color: var(--color9); cursor: pointer; &:hover { - color: #06c5c5; + color: var(--color33); } &::before { diff --git a/frontend/app/components/settings/_theme/_dark/settings_theme_dark.scss b/frontend/app/components/settings/_theme/_dark/settings_theme_dark.scss index f818ffeb..4e533e76 100644 --- a/frontend/app/components/settings/_theme/_dark/settings_theme_dark.scss +++ b/frontend/app/components/settings/_theme/_dark/settings_theme_dark.scss @@ -1,11 +1,11 @@ .settings_theme_dark { .settings__action { &::before { - color: #ddd; + color: var(--color20); } } .settings__blocked-users-username { - color: #eee; + color: var(--color5); } } diff --git a/frontend/app/components/settings/_theme/_light/settings_theme_light.scss b/frontend/app/components/settings/_theme/_light/settings_theme_light.scss index f9540ebd..15ca7eab 100644 --- a/frontend/app/components/settings/_theme/_light/settings_theme_light.scss +++ b/frontend/app/components/settings/_theme/_light/settings_theme_light.scss @@ -1,11 +1,11 @@ .settings_theme_light { .settings__action { &::before { - color: #777; + color: var(--color10); } } .settings__blocked-users-username { - color: #888; + color: var(--color13); } } diff --git a/frontend/app/components/thread/__collapse/thread__collapse.scss b/frontend/app/components/thread/__collapse/thread__collapse.scss index 0e7eb28b..4e3cbd8b 100644 --- a/frontend/app/components/thread/__collapse/thread__collapse.scss +++ b/frontend/app/components/thread/__collapse/thread__collapse.scss @@ -12,13 +12,13 @@ position: absolute; left: 5px; top: 0; - border-left: 1px dotted #d9d9d9; + border-left: 1px dotted var(--color35); height: 100%; } &:hover::after { transform: translateX(-1px); - border-left: 3px solid #777; + border-left: 3px solid var(--color10); z-index: 10; } } diff --git a/frontend/app/components/thread/_theme_dark/thread_theme_dark.scss b/frontend/app/components/thread/_theme_dark/thread_theme_dark.scss index 6b04340f..0a1a85da 100644 --- a/frontend/app/components/thread/_theme_dark/thread_theme_dark.scss +++ b/frontend/app/components/thread/_theme_dark/thread_theme_dark.scss @@ -1,11 +1,11 @@ .thread_theme_dark { .thread__collapse { &::after { - border-color: #505050; + border-color: var(--color36); } &:hover::after { - border-color: #fff; + border-color: var(--color6); } } } diff --git a/frontend/app/components/user-info/__id/user-info__id.scss b/frontend/app/components/user-info/__id/user-info__id.scss index 346f7252..ce057b95 100644 --- a/frontend/app/components/user-info/__id/user-info__id.scss +++ b/frontend/app/components/user-info/__id/user-info__id.scss @@ -4,5 +4,5 @@ font-size: 14px; font-weight: 400; line-height: 18px; - color: #888; + color: var(--color13); } diff --git a/frontend/app/components/user-info/__preloader/user-info__preloader.scss b/frontend/app/components/user-info/__preloader/user-info__preloader.scss index 3dae5aed..f1b7ccb1 100644 --- a/frontend/app/components/user-info/__preloader/user-info__preloader.scss +++ b/frontend/app/components/user-info/__preloader/user-info__preloader.scss @@ -1,4 +1,4 @@ .user-info__preloader { margin: 0 auto 18px; - color: #888; + color: var(--color13); } diff --git a/frontend/app/components/user-info/user-info.scss b/frontend/app/components/user-info/user-info.scss index 09cbf4f7..eabb8b0f 100644 --- a/frontend/app/components/user-info/user-info.scss +++ b/frontend/app/components/user-info/user-info.scss @@ -9,7 +9,7 @@ box-sizing: border-box; width: 100%; padding: 10px; - border: 1px solid #efefef; + border: 1px solid var(--color41); border-radius: 2px; - background: #fff; + background: var(--color6); } diff --git a/frontend/app/custom-properties.css b/frontend/app/custom-properties.css new file mode 100644 index 00000000..c23000b9 --- /dev/null +++ b/frontend/app/custom-properties.css @@ -0,0 +1,62 @@ +:root { + --color0: #000; + --color1: #aaa; + --color3: #e2efef; + --color4: #edf6f7; + --color5: #eee; + --color6: #fff; + --color7: #333; + --color8: #22201c; + --color9: #0aa; + --color10: #777; + --color11: #999; + --color12: #259e06; + --color13: #888; + --color14: #6a6a6a; + --color15: #259c9a; + --color16: #dfe2e5; + --color17: #099; + --color18: #383838; + --color19: #404040; + --color20: #ddd; + --color21: #f6f8fa; + --color22: #2d2d2c; + --color23: #393734; + --color24: #313133; + --color25: #9a0000; + --color26: #ffd7d7; + --color27: #f98989; + --color28: #672323; + --color29: #0e7e9d; + --color30: #cc0606; + --color31: #c4c4c4; + --color32: #a6a6a6; + --color33: #06c5c5; + --color34: #555; + --color35: #d9d9d9; + --color36: #505050; + --color37: #586069; + --color38: #ef0000; + --color39: #8cd4d4; + --color40: #9cdddb; + --color41: #efefef; + --color42: #c6efef; + --color43: #b7dddd; + --color44: rgba(255, 255, 255, 0.3); + --color45: rgba(0, 0, 0, 0.1); + --color46: rgba(27, 31, 35, 0.15); + --color47: rgba(37, 156, 154, 0.4); + --color48: rgba(37, 156, 154, 0.6); + + /* code-highlight */ + --chroma-bg: rgba(0, 0, 0, 0.05); + --chroma-base: #586e75; + --chroma-c: #7d7d7d; + --chroma-01: #589000; + --chroma-02: #cb4b16; + --chroma-03: #268bd2; + --chroma-04: #2aa198; + --chroma-05: #859900; + --chroma-06: #d33682; + --chroma-07: #00aee2; +} diff --git a/frontend/app/embed.ts b/frontend/app/embed.ts index a29007d6..73c3ec64 100644 --- a/frontend/app/embed.ts +++ b/frontend/app/embed.ts @@ -19,6 +19,38 @@ function removeDomNode(node: HTMLElement | null) { } } +function createFrame({ + host, + query, + height, + __colors__ = {}, +}: { + host: string; + query: string; + height?: string; + __colors__?: any; +}) { + const iframe = document.createElement('iframe'); + iframe.src = `${host}/web/iframe.html?${query}`; + iframe.name = JSON.stringify({ __colors__ }); + iframe.setAttribute('width', '100%'); + if (height) { + iframe.setAttribute('height', height); + } + iframe.setAttribute('frameborder', '0'); + iframe.setAttribute('allowtransparency', 'true'); + iframe.setAttribute('scrolling', 'no'); + iframe.setAttribute('tabindex', '0'); + iframe.setAttribute('title', 'Remark42'); + iframe.setAttribute('horizontalscrolling', 'no'); + iframe.setAttribute('verticalscrolling', 'no'); + iframe.setAttribute( + 'style', + 'width: 1px !important; min-width: 100% !important; border: none !important; overflow: hidden !important;' + ); + return iframe; +} + function init(): void { const node = document.getElementById(remark_config.node || NODE_ID); @@ -45,25 +77,14 @@ function init(): void { (window as any).REMARK42.changeTheme = changeTheme; const query = Object.keys(remark_config) - .map((key: any) => `${encodeURIComponent(key)}=${encodeURIComponent((remark_config as any)[key])}`) + .filter((key: any) => key !== `__colors__`) + .map((key: any) => { + return `${encodeURIComponent(key)}=${encodeURIComponent((remark_config as any)[key])}`; + }) .join('&'); + const iframe = createFrame({ host: HOST, query, __colors__: remark_config.__colors__ }); - node.innerHTML = ` - - `; - - const iframe = node.getElementsByTagName('iframe')[0]; + node.appendChild(iframe); window.addEventListener('message', receiveMessages); window.addEventListener('hashchange', postHashToIframe); @@ -174,20 +195,9 @@ function init(): void { query + '&page=user-info&' + `&id=${user.id}&name=${user.name}&picture=${user.picture || ''}&isDefaultPicture=${user.isDefaultPicture || 0}`; - this.node.innerHTML = ` -