umputun#5 use css custom properties instead of color constant

Mavrin · Mar 5, 2020 · be6aa83 · be6aa83
1 parent b22cd5f
commit be6aa83
Show file tree

Hide file tree

Showing 56 changed files with 496 additions and 231 deletions.
diff --git 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/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,16 +13,16 @@
 
 .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;
   font-weight: normal;
   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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/...pp/components/comment-form/__button/_type/_preview/comment-form__button_type_preview.scss b/...pp/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/...tend/app/components/comment-form/__button/_type/_send/comment-form__button_type_send.scss b/...tend/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
@@ -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
@@ -4,5 +4,5 @@
   bottom: 4px;
   font-size: 10px;
   font-weight: 700;
-  color: #ef0000;
+  color: var(--color38);
 }
diff --git a/...ent-form/__field/comment-form__field.scss → ...ent-form/__field/comment-form__field.pcss b/...ent-form/__field/comment-form__field.scss → ...ent-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
@@ -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
@@ -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
@@ -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/...nd/app/components/comment-form/__subscribe-by-email/comment-form__subscribe-by-email.scss b/...nd/app/components/comment-form/__subscribe-by-email/comment-form__subscribe-by-email.scss
@@ -35,16 +35,16 @@
 
 .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;
   font-weight: normal;
   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
@@ -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
@@ -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);
   }
 }