Get rid of some color variables

--text-color-lighten-15-percent
--link-color-lighten-10-percent
--chat-head-color-lighten-50-percent

src/plugins/chatview/styles/chat-head.scss

@@ -23,7 +23,7 @@
             }
 
             .chat-head__desc {
-                color: var(--chat-head-color-lighten-50-percent);
+                color: var(--chat-head-color);
                 font-size: var(--font-size-small);
                 margin: 0;
                 overflow: hidden;

src/shared/chat/message-actions.js

@@ -91,10 +91,9 @@ class MessageActions extends CustomElement {
             <button class="dropdown-item chat-msg__action ${o.button_class}" @click=${o.handler}>
                 <converse-icon
                     class="${o.icon_class}"
-                    color="var(--text-color-lighten-15-percent)"
+                    color="var(--inverse-link-color)"
                     size="1em"
-                ></converse-icon>
-                ${o.i18n_text}
+                ></converse-icon>&nbsp;${o.i18n_text}
             </button>
         `;
     }

src/shared/chat/styles/message-actions.scss

@@ -6,13 +6,13 @@ converse-message-actions {
             min-width: 5rem;
         }
         i {
-            color: var(--text-color-lighten-15-percent);
+            color: var(--inverse-link-color);
             font-size: 70%;
         }
         button {
             border: none;
             background: transparent;
-            color: var(--text-color-lighten-15-percent);
+            color: var(--inverse-link-color);
             padding: 0 0.25em;
         }
         .btn--standalone {

src/shared/modals/templates/user-details.js

@@ -10,10 +10,9 @@ const remove_button = (el) => {
         <button type="button" @click="${ev => el.removeContact(ev)}" class="btn btn-danger remove-contact">
             <converse-icon
                 class="fas fa-trash-alt"
-                color="var(--text-color-lighten-15-percent)"
+                color="var(--inverse-link-color)"
                 size="1em"
-            ></converse-icon>
-            ${i18n_remove_contact}
+            ></converse-icon>&nbsp;${i18n_remove_contact}
         </button>
     `;
 }
@@ -28,10 +27,9 @@ export const tplFooter = (el) => {
             <button type="button" class="btn btn-info refresh-contact" @click=${ev => el.refreshContact(ev)}>
                 <converse-icon
                     class="fa fa-refresh"
-                    color="var(--text-color-lighten-15-percent)"
+                    color="var(--inverse-link-color)"
                     size="1em"
-                ></converse-icon>
-                ${i18n_refresh}</button>
+                ></converse-icon>&nbsp;${i18n_refresh}</button>
             ${ (allow_contact_removal && is_roster_contact) ? remove_button(el) : '' }
         </div>
     `;

src/shared/styles/_core.scss

@@ -233,7 +233,7 @@
 
     .helptext {
         font-size: var(--font-size-tiny);
-        color: var(--text-color-lighten-15-percent);
+        color: var(--comment);
     }
 
     .selected {

src/shared/styles/forms.scss

@@ -118,7 +118,7 @@
                 font-size: 85%;
                 padding-top: 0.5em;
                 a {
-                    color: var(--link-color-lighten-10-percent);
+                    color: var(--link-color);
                 }
                 &.error {
                     color: var(--error-color);

src/shared/styles/messages.scss

@@ -246,7 +246,7 @@
                 .chat-msg__time {
                     padding-left: 0.25em;
                     padding-right: 0.25em;
-                    color: var(--text-color-lighten-15-percent);
+                    color: var(--comment);
                 }
                 .fa-lock {
                     svg {

src/shared/styles/themes/classic.scss

@@ -41,7 +41,6 @@
 
     --dark-link-color: #206485; // $dark-blue
     --inverse-link-color: var(--background);
-    --link-color-lighten-10-percent: #79a5ba; // lighten($light-blue, 10%)
     --link-color: var(--light-blue);
     --link-hover-color: #345566;
 
@@ -54,7 +53,6 @@
     --text-shadow-color: #FAFAFA;
     --text-color: var(--foreground);
     --controlbox-text-color: var(--foreground);
-    --text-color-lighten-15-percent: #8c8c8c; // lighten(#666, 15%)
     --message-author-color: var(--text-color);
     --text-color-invert: var(--background);
 
@@ -72,11 +70,10 @@
     --chat-textarea-disabled-bg-color: #EEE;
     --chat-textarea-height: 60px;
 
-    --chat-correcting-color: var(--chat-head-color-lighten-50-percent);
+    --chat-correcting-color: var(--comment);
     --chat-head-fg-color: var(--background);
     --chat-head-color-dark: var(--dark-green);
     --chat-head-color-darker: #0E763B;
-    --chat-head-color-lighten-50-percent: #e7f7ee; // lighten($green, 50%)
     --chat-head-color: var(--green);
     --chat-head-text-color: var(--background);
     --chat-toolbar-btn-color: var(--green);

src/shared/styles/themes/dracula.scss

@@ -110,7 +110,6 @@
     --chat-head-fg-color: var(--chat-color);
     --chat-head-color-dark: var(--chat-color);
     --chat-head-color-darker: var(--chat-color);
-    --chat-head-color-lighten-50-percent: var(--chat-color);
     --chat-head-color: var(--background);
     --chat-head-text-color: var(--chat-color);
     --chat-toolbar-btn-color: var(--chat-color);
@@ -141,7 +140,6 @@
     --controlbox-text-color: var(--foreground);
     --message-text-color: var(--foreground);
     --text-color: var(--foreground);
-    --text-color-lighten-15-percent: var(--pink);
     --text-color-invert: var(--background);
 
     --message-author-color: var(--purple);