define CSS filters for icons in vars (PR #78)

Author: mojavelinux

src/css/doc.css

@@ -130,7 +130,7 @@ h1.page + aside.toc.embedded {
 .doc i.fa {
   display: inline-block;
   background: no-repeat center / 1em 1em;
-  filter: invert(20%);
+  filter: var(--doc-icon-filter);
   hyphens: none;
   font-style: normal;
   height: 1em;
@@ -746,7 +746,7 @@ h1.page + aside.toc.embedded {
 }
 
 .doc .source-toolbox img.copy-icon {
-  filter: invert(50.2%);
+  filter: var(--pre-annotation-icon-filter);
 }
 
 .doc .source-toolbox svg.copy-icon {

src/css/header.css

@@ -183,7 +183,7 @@ body {
 }
 
 .navbar-item .icon img {
-  filter: invert(10%);
+  filter: var(--navbar-menu-icon-filter);
 }
 
 .navbar-item .icon svg {

src/css/nav.css

@@ -229,7 +229,7 @@
 .nav-panel-explore:not(:first-child) .context .version::after {
   content: "";
   background: url(../img/octicons-16.svg#view-chevron-down) no-repeat center right -0.15em / 1em 1em;
-  filter: invert(36.5%); /* NOTE should match --color-gray-70 */
+  filter: var(--nav-muted-icon-filter);
   padding-right: 1.25em;
   margin-right: -0.25rem;
 }

src/css/page-versions.css

@@ -24,7 +24,7 @@
 .page-versions .version-menu-toggle::after {
   content: "";
   background: url(../img/octicons-16.svg#view-chevron-down) no-repeat center right -0.15em / 1em 1em;
-  filter: invert(36.5%); /* NOTE should match --color-gray-70 */
+  filter: var(--toolbar-icon-filter);
   padding-right: 1rem;
 }
 

src/css/toolbar.css

@@ -18,7 +18,7 @@
 
 .nav-toggle {
   background: url(../img/octicons-24.svg#view-file-directory) no-repeat center / 50% 50%;
-  filter: invert(10%); /* NOTE should match --navbar-background */
+  filter: var(--toolbar-primary-icon-filter);
   border: none;
   outline: none;
   line-height: inherit;
@@ -45,7 +45,7 @@
   width: calc(var(--toolbar-height) / 2);
   margin: calc(var(--toolbar-height) / 4);
   margin-right: 0.5rem;
-  filter: invert(10%); /* NOTE should match --navbar-background */
+  filter: var(--toolbar-primary-icon-filter);
 }
 
 .home-link:hover,

src/css/vars.css

@@ -50,19 +50,23 @@
   --navbar-menu-box-shadow: 0 2px 4px rgba(160, 160, 160, 0.15);
   --navbar-menu-background: var(--color-white);
   --navbar-menu-font-color: var(--body-font-color);
+  --navbar-menu-icon-filter: invert(10%); /* matches --color-jet-80 */
   --navbar-menu_hover-background: var(--color-smoke-50);
   /* nav */
   --nav-background: var(--panel-background);
   --nav-border-color: var(--color-gray-10);
   --nav-line-height: 1.35;
   --nav-heading-font-color: var(--color-brand-primary);
   --nav-muted-color: var(--color-gray-70);
+  --nav-muted-icon-filter: invert(36.5%); /* matches --color-gray-70 */
   --nav-panel-divider-color: var(--color-smoke-90);
   --nav-secondary-background: var(--color-smoke-70);
   /* toolbar */
   --toolbar-background: var(--panel-background);
   --toolbar-border-color: var(--panel-border-color);
-  --toolbar-font-color: var(--color-gray-70);
+  --toolbar-font-color: var(--nav-muted-color);
+  --toolbar-icon-filter: var(--nav-muted-icon-filter);
+  --toolbar-primary-icon-filter: var(--navbar-menu-icon-filter);
   --toolbar-muted-color: var(--color-gray-30);
   --page-version-menu-background: var(--color-smoke-70);
   --page-version-missing-font-color: var(--color-gray-30);
@@ -83,6 +87,7 @@
   --doc-font-color: #24292e;
   */
   --doc-font-color: #24262b;
+  --doc-icon-filter: invert(14.5%); /* matches #242424 */
   --doc-font-size: inherit;
   --doc-font-size--desktop: calc(17 / var(--rem-base) * 1rem);
   --doc-line-height: 1.6;
@@ -117,6 +122,7 @@
   --pre-background: var(--panel-background);
   --pre-border-color: var(--panel-border-color);
   --pre-annotation-font-color: var(--color-gray-50);
+  --pre-annotation-icon-filter: invert(50.2%); /* matches --color-gray-50 */
   --quote-background: var(--panel-background);
   --quote-border-color: var(--color-gray-70);
   --quote-font-color: var(--color-gray-70);