Merge pull request #599 from Mavrin/use_css_custom_properties_for_colors
Use css custom properties for colors
This commit is contained in:
Umputun
@@ -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'),
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
@@ -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 {
|
||||
|
||||
+7
-7
@@ -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);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
.auth-panel_theme_dark {
|
||||
.auth-panel__user-id {
|
||||
color: #eee;
|
||||
color: var(--color5);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
.auth-panel_theme_light {
|
||||
.auth-panel__user-id {
|
||||
color: #888;
|
||||
color: var(--color13);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
.avatar-icon_default {
|
||||
border: 1px solid #9cdddb;
|
||||
border: 1px solid var(--color40);
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
+2
-2
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
+3
-3
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
.comment-form__control-panel {
|
||||
height: 30px;
|
||||
background-color: #eee;
|
||||
background-color: var(--color5);
|
||||
}
|
||||
|
||||
@@ -4,5 +4,5 @@
|
||||
bottom: 4px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: #ef0000;
|
||||
color: var(--color38);
|
||||
}
|
||||
|
||||
+3
-3
@@ -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);
|
||||
}
|
||||
}
|
||||
+2
-2
@@ -3,9 +3,9 @@
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
color: #0aa;
|
||||
color: var(--color9);
|
||||
|
||||
&:hover {
|
||||
color: #06c5c5;
|
||||
color: var(--color33);
|
||||
}
|
||||
}
|
||||
|
||||
+2
-2
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -3,9 +3,9 @@
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
color: #0aa;
|
||||
color: var(--color9);
|
||||
|
||||
&:hover {
|
||||
color: #06c5c5;
|
||||
color: var(--color33);
|
||||
}
|
||||
}
|
||||
|
||||
+7
-7
@@ -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);
|
||||
}
|
||||
|
||||
+2
-2
@@ -7,9 +7,9 @@
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
color: #0aa;
|
||||
color: var(--color9);
|
||||
|
||||
&:hover {
|
||||
color: #06c5c5;
|
||||
color: var(--color33);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -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 {
|
||||
|
||||
+3
-3
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
.comment__control {
|
||||
margin-right: 8px;
|
||||
color: #8cd4d4;
|
||||
color: var(--color39);
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
}
|
||||
|
||||
.voting__error {
|
||||
color: #9a0000;
|
||||
color: var(--color25);
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
&.comment_theme_light,
|
||||
&.comment_theme_dark {
|
||||
.comment__username {
|
||||
color: #0e7e9d;
|
||||
color: var(--color29);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
}
|
||||
|
||||
.comment__title-link {
|
||||
color: #0e7e9d;
|
||||
color: var(--color29);
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
}
|
||||
|
||||
&_separator {
|
||||
border-bottom: 1px solid #259c9a;
|
||||
border-bottom: 1px solid var(--color15);
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
.dropdown_theme_dark {
|
||||
.dropdown__content {
|
||||
background-color: #22201c;
|
||||
background-color: var(--color8);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
.dropdown_theme_light {
|
||||
.dropdown__content {
|
||||
background-color: #fff;
|
||||
background-color: var(--color6);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
font-family: 'PT Sans', Helvetica, Arial, sans-serif;
|
||||
|
||||
::selection {
|
||||
background: #c6efef;
|
||||
background: var(--color42);
|
||||
}
|
||||
|
||||
&_user-info {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
.settings_theme_dark {
|
||||
.settings__action {
|
||||
&::before {
|
||||
color: #ddd;
|
||||
color: var(--color20);
|
||||
}
|
||||
}
|
||||
|
||||
.settings__blocked-users-username {
|
||||
color: #eee;
|
||||
color: var(--color5);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
.settings_theme_light {
|
||||
.settings__action {
|
||||
&::before {
|
||||
color: #777;
|
||||
color: var(--color10);
|
||||
}
|
||||
}
|
||||
|
||||
.settings__blocked-users-username {
|
||||
color: #888;
|
||||
color: var(--color13);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,5 +4,5 @@
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
color: #888;
|
||||
color: var(--color13);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
.user-info__preloader {
|
||||
margin: 0 auto 18px;
|
||||
color: #888;
|
||||
color: var(--color13);
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
+44
-31
@@ -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 = `
|
||||
<iframe
|
||||
src="${HOST}/web/iframe.html?${query}"
|
||||
width="100%"
|
||||
frameborder="0"
|
||||
allowtransparency="true"
|
||||
scrolling="no"
|
||||
tabindex="0"
|
||||
title="Remark42"
|
||||
style="width: 1px !important; min-width: 100% !important; border: none !important; overflow: hidden !important;"
|
||||
horizontalscrolling="no"
|
||||
verticalscrolling="no"
|
||||
></iframe>
|
||||
`;
|
||||
|
||||
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 = `
|
||||
<iframe
|
||||
src="${HOST}/web/iframe.html?${queryUserInfo}"
|
||||
width="100%"
|
||||
height="100%"
|
||||
frameborder="0"
|
||||
allowtransparency="true"
|
||||
scrolling="no"
|
||||
tabindex="0"
|
||||
title="Remark42"
|
||||
verticalscrolling="no"
|
||||
horizontalscrolling="no"
|
||||
/>`;
|
||||
this.iframe = this.node.querySelector('iframe');
|
||||
const iframe = createFrame({ host: HOST, query: queryUserInfo, height: '100%' });
|
||||
this.node.appendChild(iframe);
|
||||
this.iframe = iframe;
|
||||
this.node.appendChild(this.closeEl);
|
||||
document.body.appendChild(this.style);
|
||||
document.body.appendChild(this.back);
|
||||
@@ -201,6 +211,9 @@ function init(): void {
|
||||
},
|
||||
close() {
|
||||
if (this.node) {
|
||||
if (this.iframe) {
|
||||
this.node.removeChild(this.iframe);
|
||||
}
|
||||
this.onAnimationClose();
|
||||
this.node.removeAttribute('data-animation');
|
||||
}
|
||||
|
||||
@@ -9,6 +9,28 @@
|
||||
if (window.location.search === '?selfClose') {
|
||||
window.close();
|
||||
}
|
||||
(function() {
|
||||
function isCSSVariablesSupported() {
|
||||
if (typeof window === `undefined`) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return window.CSS && window.CSS.supports && window.CSS.supports(`color`, `var(--fake-var)`);
|
||||
}
|
||||
if (isCSSVariablesSupported()) {
|
||||
var name;
|
||||
try {
|
||||
name = JSON.parse(window.name);
|
||||
if (name.__colors__) {
|
||||
const colors = name.__colors__;
|
||||
for (var color in colors) {
|
||||
var root = document.documentElement;
|
||||
root.style.setProperty(color, colors[color]);
|
||||
}
|
||||
}
|
||||
} catch (e) {}
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
<link rel="stylesheet" href="remark.css" />
|
||||
<style>
|
||||
@@ -47,7 +69,9 @@
|
||||
}
|
||||
|
||||
.preloader {
|
||||
/* stylelint-disable-next-line */
|
||||
color: #fff;
|
||||
color: var(--color6, #fff);
|
||||
position: relative;
|
||||
transform: translate3d(0, -10px, 0);
|
||||
animation-delay: -0.16s;
|
||||
@@ -71,7 +95,9 @@
|
||||
|
||||
.preloader_view_iframe {
|
||||
margin: 0 auto;
|
||||
/* stylelint-disable-next-line */
|
||||
color: #888;
|
||||
color: var(--color13, #888);
|
||||
}
|
||||
|
||||
:focus:not(.focus-visible):not(.button) {
|
||||
|
||||
@@ -126,6 +126,9 @@
|
||||
host: window.location.origin,
|
||||
url: 'https://remark42.com/demo/',
|
||||
components: ['embed', 'counter'],
|
||||
// __colors__: {
|
||||
// "--color0": "red",
|
||||
// },
|
||||
theme: theme,
|
||||
// locale: "ru"
|
||||
};
|
||||
|
||||
@@ -9,6 +9,7 @@ module.exports = {
|
||||
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
|
||||
moduleNameMapper: {
|
||||
'\\.module.pcss': `identity-obj-proxy`,
|
||||
'\\.pcss': `identity-obj-proxy`,
|
||||
'\\.scss$': '<rootDir>/app/testUtils/mockStyles.js',
|
||||
'@app/(.*)': '<rootDir>/app/$1',
|
||||
'^react$': 'preact/compat',
|
||||
|
||||
Generated
+178
-25
@@ -2032,6 +2032,15 @@
|
||||
"@types/yargs": "^12.0.9"
|
||||
}
|
||||
},
|
||||
"@mavrin/stylelint-declaration-use-css-custom-properties": {
|
||||
"version": "1.0.0-alpha.1",
|
||||
"resolved": "https://registry.npmjs.org/@mavrin/stylelint-declaration-use-css-custom-properties/-/stylelint-declaration-use-css-custom-properties-1.0.0-alpha.1.tgz",
|
||||
"integrity": "sha512-4XKKr5dMm0SuHPZyKoMBxhun1B2TTOBV712M/XEgeI4GT8gGy1oVLeu3vqRes761K8a4aMJb1c/b0gIGrV9BYA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"css-tree": "^1.0.0-alpha.39"
|
||||
}
|
||||
},
|
||||
"@nodelib/fs.scandir": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz",
|
||||
@@ -5069,13 +5078,27 @@
|
||||
}
|
||||
},
|
||||
"css-tree": {
|
||||
"version": "1.0.0-alpha25",
|
||||
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha25.tgz",
|
||||
"integrity": "sha512-XC6xLW/JqIGirnZuUWHXCHRaAjje2b3OIB0Vj5RIJo6mIi/AdJo30quQl5LxUl0gkXDIrTrFGbMlcZjyFplz1A==",
|
||||
"version": "1.0.0-alpha.39",
|
||||
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.39.tgz",
|
||||
"integrity": "sha512-7UvkEYgBAHRG9Nt980lYxjsTrCyHFN53ky3wVsDkiMdVqylqRt+Zc+jm5qw7/qyOvN2dHSYtX0e4MbCCExSvnA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"mdn-data": "^1.0.0",
|
||||
"source-map": "^0.5.3"
|
||||
"mdn-data": "2.0.6",
|
||||
"source-map": "^0.6.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"mdn-data": {
|
||||
"version": "2.0.6",
|
||||
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.6.tgz",
|
||||
"integrity": "sha512-rQvjv71olwNHgiTbfPZFkJtjNMciWgswYeciZhtvWLO8bmX3TnhyA62I6sTWOyZssWHJJjY6/KiWwqQsWWsqOA==",
|
||||
"dev": true
|
||||
},
|
||||
"source-map": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
||||
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"css-unit-converter": {
|
||||
@@ -5097,12 +5120,36 @@
|
||||
"dev": true
|
||||
},
|
||||
"csso": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/csso/-/csso-3.3.1.tgz",
|
||||
"integrity": "sha512-OjETffCFB/OzwxVL3eF0+5tXOXCMukVO6rEUxlkIhscE1KRObyg+zMrLUbkPn9kxgBrFWicc37Gv5/22dOh5EA==",
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/csso/-/csso-4.0.2.tgz",
|
||||
"integrity": "sha512-kS7/oeNVXkHWxby5tHVxlhjizRCSv8QdU7hB2FpdAibDU8FjTAolhNjKNTiLzXtUrKT6HwClE81yXwEk1309wg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"css-tree": "1.0.0-alpha25"
|
||||
"css-tree": "1.0.0-alpha.37"
|
||||
},
|
||||
"dependencies": {
|
||||
"css-tree": {
|
||||
"version": "1.0.0-alpha.37",
|
||||
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
|
||||
"integrity": "sha512-DMxWJg0rnz7UgxKT0Q1HU/L9BeJI0M6ksor0OgqOnF+aRCDWg/N2641HmVyU9KVIu0OVVWOb2IpC9A+BJRnejg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"mdn-data": "2.0.4",
|
||||
"source-map": "^0.6.1"
|
||||
}
|
||||
},
|
||||
"mdn-data": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
|
||||
"integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==",
|
||||
"dev": true
|
||||
},
|
||||
"source-map": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
||||
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"cssom": {
|
||||
@@ -6762,6 +6809,12 @@
|
||||
"integrity": "sha512-a1hQMktqW9Nmqr5aktAux3JMNqaucxGcjtjWnZLHX7yyPCmlSV3M54nGYbqT8K+0GhF3NBgmJCc3ma+WOgX8Jg==",
|
||||
"dev": true
|
||||
},
|
||||
"flatten": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.3.tgz",
|
||||
"integrity": "sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg==",
|
||||
"dev": true
|
||||
},
|
||||
"flush-write-stream": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz",
|
||||
@@ -8887,6 +8940,15 @@
|
||||
"integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
|
||||
"dev": true
|
||||
},
|
||||
"is-url-superb": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/is-url-superb/-/is-url-superb-3.0.0.tgz",
|
||||
"integrity": "sha512-3faQP+wHCGDQT1qReM5zCPx2mxoal6DzbzquFlCYJLWyy4WPTved33ea2xFbX37z4NoriEwZGIYhFtx8RUB5wQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"url-regex": "^5.0.0"
|
||||
}
|
||||
},
|
||||
"is-whitespace-character": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/is-whitespace-character/-/is-whitespace-character-1.0.4.tgz",
|
||||
@@ -11577,12 +11639,6 @@
|
||||
"unist-util-visit": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"mdn-data": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-1.2.0.tgz",
|
||||
"integrity": "sha512-esDqNvsJB2q5V28+u7NdtdMg6Rmg4khQmAVSjUiX7BY/7haIv0K2yWM43hYp0or+3nvG7+UaTF1JHz31hgU1TA==",
|
||||
"dev": true
|
||||
},
|
||||
"media-typer": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
|
||||
@@ -12946,24 +13002,33 @@
|
||||
}
|
||||
},
|
||||
"postcss-csso": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-csso/-/postcss-csso-3.0.0.tgz",
|
||||
"integrity": "sha512-5yvI9IMIJOofYqmYfn65ZTxxlYZ86jXzDMXwYqltx/kqGsSvHRw4gYkn5e/tCPPIgUeFP5MIhIkA02uoUEZsXA==",
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-csso/-/postcss-csso-4.0.0.tgz",
|
||||
"integrity": "sha512-Yh9Ug0w3+T/LZIh1vGJQY8+hE13yFRHpINoAmgOhvu9lBmG1jyHkAprGHEHlGjWODJzB4DCNBVBb6Cs0QEoglQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"csso": "~3.3.0",
|
||||
"postcss": "^6.0.0"
|
||||
"csso": "^4.0.2"
|
||||
}
|
||||
},
|
||||
"postcss-custom-properties": {
|
||||
"version": "9.0.2",
|
||||
"resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-9.0.2.tgz",
|
||||
"integrity": "sha512-WHaQrEp3gJ6mgxBA4mGJKW6DSVfy2IFnKPFAb2IEulgxGUW8nWp1NkOD/rWR6e2uIuAdnTa0LXSupST7daniAw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"postcss": "^7.0.17",
|
||||
"postcss-values-parser": "^3.0.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"postcss": {
|
||||
"version": "6.0.23",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
|
||||
"integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
|
||||
"version": "7.0.26",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.26.tgz",
|
||||
"integrity": "sha512-IY4oRjpXWYshuTDFxMVkJDtWIk2LhsTlu8bZnbEJA4+bYT16Lvpo8Qv6EvDumhYRgzjZl489pmsY3qVgJQ08nA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"chalk": "^2.4.1",
|
||||
"chalk": "^2.4.2",
|
||||
"source-map": "^0.6.1",
|
||||
"supports-color": "^5.4.0"
|
||||
"supports-color": "^6.1.0"
|
||||
}
|
||||
},
|
||||
"source-map": {
|
||||
@@ -12971,6 +13036,15 @@
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
||||
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
|
||||
"dev": true
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "6.1.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
|
||||
"integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"has-flag": "^3.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -13273,6 +13347,12 @@
|
||||
"postcss-selector-parser": "^5.0.0"
|
||||
}
|
||||
},
|
||||
"postcss-prefixwrap": {
|
||||
"version": "1.13.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-prefixwrap/-/postcss-prefixwrap-1.13.0.tgz",
|
||||
"integrity": "sha512-OMG0zwKCPUyQqxojOYu65P0XvEkioamvO4IW4XX15NPMFr/Z2T98ld7W43bk9Itjg23xHf++xeZ7G4Z0qFUUcA==",
|
||||
"dev": true
|
||||
},
|
||||
"postcss-reporter": {
|
||||
"version": "6.0.1",
|
||||
"resolved": "https://registry.npmjs.org/postcss-reporter/-/postcss-reporter-6.0.1.tgz",
|
||||
@@ -13439,6 +13519,33 @@
|
||||
"integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
|
||||
"dev": true
|
||||
},
|
||||
"postcss-values-parser": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/postcss-values-parser/-/postcss-values-parser-3.1.1.tgz",
|
||||
"integrity": "sha512-p56/Cu9wb8+lck/iOTeuFeSHKEUH1bbWQ03T6N3jDkw+15pV65rMY5pK+OWhVpRn5TIrByS6UVpO3mSqvlhZYA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"color-name": "^1.1.4",
|
||||
"is-number": "^7.0.0",
|
||||
"is-url-superb": "^3.0.0",
|
||||
"postcss": "^7.0.5",
|
||||
"url-regex": "^5.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"color-name": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
|
||||
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
|
||||
"dev": true
|
||||
},
|
||||
"is-number": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
|
||||
"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"postcss-wrap": {
|
||||
"version": "0.0.4",
|
||||
"resolved": "https://registry.npmjs.org/postcss-wrap/-/postcss-wrap-0.0.4.tgz",
|
||||
@@ -16151,6 +16258,28 @@
|
||||
"stylelint-config-recommended": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"stylelint-value-no-unknown-custom-properties": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/stylelint-value-no-unknown-custom-properties/-/stylelint-value-no-unknown-custom-properties-2.0.0.tgz",
|
||||
"integrity": "sha512-iA7pLNBRCrRi35rUpF3bS4zpPWQtk1YxqKC0MhgOvhI1XDciE/FaAQoFgn65vGMEyQ0Q3PPGfWawn7sVd/thXQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"postcss-values-parser": "^2.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"postcss-values-parser": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/postcss-values-parser/-/postcss-values-parser-2.0.1.tgz",
|
||||
"integrity": "sha512-2tLuBsA6P4rYTNKCXYG/71C7j1pU6pK503suYOmn4xYrQIzW+opD+7FAFNuGSdZC/3Qfy334QbeMu7MEb8gOxg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"flatten": "^1.0.2",
|
||||
"indexes-of": "^1.0.1",
|
||||
"uniq": "^1.0.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"sugarss": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/sugarss/-/sugarss-2.0.0.tgz",
|
||||
@@ -16510,6 +16639,12 @@
|
||||
"setimmediate": "^1.0.4"
|
||||
}
|
||||
},
|
||||
"tlds": {
|
||||
"version": "1.207.0",
|
||||
"resolved": "https://registry.npmjs.org/tlds/-/tlds-1.207.0.tgz",
|
||||
"integrity": "sha512-k7d7Q1LqjtAvhtEOs3yN14EabsNO8ZCoY6RESSJDB9lst3bTx3as/m1UuAeCKzYxiyhR1qq72ZPhpSf+qlqiwg==",
|
||||
"dev": true
|
||||
},
|
||||
"tmp": {
|
||||
"version": "0.0.33",
|
||||
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
|
||||
@@ -17099,6 +17234,24 @@
|
||||
"requires-port": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"url-regex": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/url-regex/-/url-regex-5.0.0.tgz",
|
||||
"integrity": "sha512-O08GjTiAFNsSlrUWfqF1jH0H1W3m35ZyadHrGv5krdnmPPoxP27oDTqux/579PtaroiSGm5yma6KT1mHFH6Y/g==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ip-regex": "^4.1.0",
|
||||
"tlds": "^1.203.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"ip-regex": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-4.1.0.tgz",
|
||||
"integrity": "sha512-pKnZpbgCTfH/1NLIlOduP/V+WRXzC2MOz3Qo8xmxk8C5GudJLgK5QyLVXOSWy3ParAH7Eemurl3xjv/WXYFvMA==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"use": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
|
||||
|
||||
@@ -28,6 +28,7 @@
|
||||
"@babel/preset-env": "^7.6.3",
|
||||
"@babel/preset-react": "^7.6.3",
|
||||
"@formatjs/cli": "^1.1.20",
|
||||
"@mavrin/stylelint-declaration-use-css-custom-properties": "1.0.0-alpha.1",
|
||||
"@size-limit/file": "^4.0.1",
|
||||
"@types/cheerio": "^0.22.13",
|
||||
"@types/core-js": "^2.5.2",
|
||||
@@ -72,10 +73,12 @@
|
||||
"node-fetch": "^2.6.0",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"postcss-calc": "^7.0.1",
|
||||
"postcss-csso": "^3.0.0",
|
||||
"postcss-csso": "^4.0.0",
|
||||
"postcss-custom-properties": "^9.0.2",
|
||||
"postcss-for": "^2.1.1",
|
||||
"postcss-loader": "^3.0.0",
|
||||
"postcss-nested": "^4.1.2",
|
||||
"postcss-prefixwrap": "^1.13.0",
|
||||
"postcss-simple-vars": "^5.0.2",
|
||||
"postcss-url": "^8.0.0",
|
||||
"postcss-wrap": "0.0.4",
|
||||
@@ -86,6 +89,7 @@
|
||||
"stylelint": "^13.1.0",
|
||||
"stylelint-config-prettier": "^8.0.1",
|
||||
"stylelint-config-standard": "^20.0.0",
|
||||
"stylelint-value-no-unknown-custom-properties": "^2.0.0",
|
||||
"ts-jest": "^24.1.0",
|
||||
"ts-loader": "^6.2.1",
|
||||
"typescript": "^3.6.4",
|
||||
|
||||
@@ -14,6 +14,7 @@ const publicFolder = path.resolve(__dirname, 'public');
|
||||
const env = process.env.NODE_ENV || 'development';
|
||||
const remarkUrl = process.env.REMARK_URL || 'https://demo.remark42.com';
|
||||
const NODE_ID = 'remark42';
|
||||
const pathToCustomCssProperties = './app/custom-properties.css';
|
||||
|
||||
// let's log some env variables because we can
|
||||
console.log(`NODE_ENV = ${env}`);
|
||||
@@ -49,13 +50,16 @@ const postCssLoader = wrap => ({
|
||||
loader: 'postcss-loader',
|
||||
options: {
|
||||
plugins: [
|
||||
require('postcss-custom-properties')({
|
||||
importFrom: path.resolve(__dirname, pathToCustomCssProperties),
|
||||
}),
|
||||
require('postcss-for'),
|
||||
require('postcss-simple-vars'),
|
||||
require('postcss-nested'),
|
||||
require('postcss-calc'),
|
||||
require('autoprefixer')({ overrideBrowserslist: ['> 1%'] }),
|
||||
require('postcss-url')({ url: 'inline', maxSize: 5 }),
|
||||
wrap ? require('postcss-wrap')({ selector: `#${NODE_ID}` }) : false,
|
||||
wrap ? require('postcss-prefixwrap')(`#${NODE_ID}`, { ignoredSelectors: [':root'] }) : false,
|
||||
require('postcss-csso'),
|
||||
].filter(plugin => plugin),
|
||||
},
|
||||
@@ -71,8 +75,8 @@ module.exports = () => ({
|
||||
entry: {
|
||||
embed: './app/embed.ts',
|
||||
counter: './app/counter.ts',
|
||||
'last-comments': './app/last-comments.tsx',
|
||||
remark: './app/remark.tsx',
|
||||
'last-comments': [pathToCustomCssProperties, './app/last-comments.tsx'],
|
||||
remark: [pathToCustomCssProperties, './app/remark.tsx'],
|
||||
deleteme: './app/deleteme.ts',
|
||||
},
|
||||
output: {
|
||||
@@ -117,7 +121,8 @@ module.exports = () => ({
|
||||
...getExcluded(),
|
||||
},
|
||||
{
|
||||
test: /\.s?css$/,
|
||||
test: /\.(s?css|pcss)$/,
|
||||
exclude: /\.module\.pcss$/,
|
||||
use: [
|
||||
{
|
||||
loader: MiniCssExtractPlugin.loader,
|
||||
|
||||
Reference in New Issue
Block a user