8292594: Use CSS custom properties for all fonts and colors

Reviewed-by: jjg

Author: hns

src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/toolkit/resources/stylesheet.css

@@ -28,9 +28,10 @@
     --navbar-text-color: #ffffff;
     /* Background color for subnavigation and various headers */
     --subnav-background-color: #dee3e9;
-    /* Background and text colors for highlighted elements */
-    --highlight-background-color: #f8981d;
-    --highlight-text-color: #253441;
+    /* Background and text colors for selected tabs and navigation items */
+    --selected-background-color: #f8981d;
+    --selected-text-color: #253441;
+    --selected-link-color: #1f389c;
     /* Background colors for generated tables */
     --even-row-color: #ffffff;
     --odd-row-color: #eeeeef;
@@ -42,9 +43,22 @@
     /* Snippet colors */
     --snippet-background-color: #ebecee;
     --snippet-text-color: var(--block-text-color);
+    --snippet-highlight-color: #f7c590;
     /* Border colors for structural elements and user defined tables */
     --border-color: #ededed;
     --table-border-color: #000000;
+    /* Search input colors */
+    --search-input-background-color: #ffffff;
+    --search-input-text-color: #000000;
+    --search-input-placeholder-color: #909090;
+    /* Highlight color for active search tag target */
+    --search-tag-highlight-color: #ffff00;
+    /* Adjustments for icon and active background colors of copy-to-clipboard buttons */
+    --copy-icon-brightness: 100%;
+    --copy-button-background-color-active: rgba(168, 168, 176, 0.3);
+    /* Colors for invalid tag notifications */
+    --invalid-tag-background-color: #ffe6e6;
+    --invalid-tag-text-color: #000000;
 }
 /*
  * Styles for individual HTML elements.
@@ -78,9 +92,6 @@ a[href]:hover, a[href]:focus {
     text-decoration:none;
     color:var(--link-color-active);
 }
-a[name] {
-    color:#353833;
-}
 pre {
     font-family:var(--code-font-family);
     font-size:1em;
@@ -180,11 +191,10 @@ button {
     background-color:var(--navbar-background-color);
     color:var(--navbar-text-color);
     float:left;
-    padding:0;
     width:100%;
     clear:right;
     min-height:2.8em;
-    padding-top:10px;
+    padding:10px 0 0 0;
     overflow:hidden;
     font-size:0.857em;
 }
@@ -244,11 +254,11 @@ ul.sub-nav-list li {
     text-transform:uppercase;
 }
 .top-nav a:hover {
-    color:#bb7a2a;
+    color:var(--link-color-active);
 }
 .nav-bar-cell1-rev {
-    background-color:var(--highlight-background-color);
-    color:var(--highlight-text-color);
+    background-color:var(--selected-background-color);
+    color:var(--selected-text-color);
     margin: auto 5px;
 }
 .skip-nav {
@@ -311,7 +321,7 @@ main {
     position:relative;
 }
 dl.notes > dt {
-    font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif;
+    font-family: var(--body-font-family);
     font-size:0.856em;
     font-weight:bold;
     margin:10px 0 0 0;
@@ -366,7 +376,6 @@ ul.summary-list > li {
     line-height:1.4;
 }
 ul.ref-list {
-  margin-left:0;
   padding:0;
   margin:0;
 }
@@ -409,16 +418,14 @@ ul.preview-feature-list {
     position:relative;
     text-align:left;
     background-repeat:no-repeat;
-    color:#253441;
+    color:var(--selected-text-color);
     clear:none;
     overflow:hidden;
-    padding:0;
-    padding-top:10px;
-    padding-left:1px;
+    padding: 10px 0 0 1px;
     margin:0;
 }
 .caption a:link, .caption a:visited {
-    color:#1f389c;
+    color:var(--selected-link-color);
 }
 .caption a:hover,
 .caption a:active {
@@ -430,20 +437,14 @@ ul.preview-feature-list {
     padding:5px 12px 7px 12px;
     display:inline-block;
     float:left;
-    background-color:var(--highlight-background-color);
+    background-color:var(--selected-background-color);
     border: none;
     height:16px;
 }
 div.table-tabs {
     padding:10px 0 0 1px;
     margin:10px 0 0 0;
 }
-div.table-tabs > span {
-    background-color: #EEE;
-    color: #000;
-    border: none;
-    padding: 5px 12px 8px 12px;
-}
 div.table-tabs > button {
     border: none;
     cursor: pointer;
@@ -452,8 +453,8 @@ div.table-tabs > button {
     margin-right: 8px;
 }
 div.table-tabs > .active-table-tab {
-    background: var(--highlight-background-color);
-    color: var(--highlight-text-color);
+    background: var(--selected-background-color);
+    color: var(--selected-text-color);
 }
 div.table-tabs > button.table-tab {
     background: var(--navbar-background-color);
@@ -635,7 +636,8 @@ div.block {
  * Styles for formatting effect.
  */
 .source-line-no {
-    color:green;
+    /* Color of line numbers in source pages can be set via custom property below */
+    color:var(--source-linenumber-color, green);
     padding:0 30px 0 0;
 }
 .block {
@@ -679,8 +681,9 @@ div.block div.deprecation-comment {
 details.invalid-tag, span.invalid-tag {
     font-size:1em;
     font-family:var(--block-font-family);
-    background: #ffe6e6;
-    border: thin solid #000000;
+    color: var(--invalid-tag-text-color);
+    background: var(--invalid-tag-background-color);
+    border: thin solid var(--table-border-color);
     border-radius:2px;
     padding: 2px 4px;
     display:inline-block;
@@ -699,9 +702,9 @@ main, nav, header, footer, section {
  */
 .ui-state-active {
     /* Overrides the color of selection used in jQuery UI */
-    background: var(--highlight-background-color);
-    border: 1px solid var(--highlight-background-color);
-    color: var(--highlight-text-color);
+    background: var(--selected-background-color);
+    border: 1px solid var(--selected-background-color);
+    color: var(--selected-text-color);
 }
 .ui-autocomplete-category {
     font-weight:bold;
@@ -735,14 +738,14 @@ ul.ui-autocomplete li.ui-static-link {
     left:0;
     background: var(--subnav-background-color);
     padding: 5px 0;
-    font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif;
+    font-family: var(--body-font-family);
     font-size: 0.93em;
     font-weight: bolder;
     z-index: 2;
 }
 li.ui-static-link a, li.ui-static-link a:visited {
     text-decoration:none;
-    color:#4A6782;
+    color:var(--link-color);
     float:right;
     margin-right:20px;
 }
@@ -757,6 +760,9 @@ li.ui-static-link a, li.ui-static-link a:visited {
     background-size:13px;
     background-repeat:no-repeat;
     background-position:2px 3px;
+    background-color: var(--search-input-background-color);
+    color: var(--search-input-text-color);
+    border-color: var(--border-color);
     padding-left:20px;
     width: 250px;
     margin: 0;
@@ -779,7 +785,7 @@ li.ui-static-link a, li.ui-static-link a:visited {
     font-size:0;
 }
 ::placeholder {
-    color:#909090;
+    color:var(--search-input-placeholder-color);
     opacity: 1;
 }
 .search-tag-desc-result {
@@ -791,7 +797,7 @@ li.ui-static-link a, li.ui-static-link a:visited {
     font-size:12px;
 }
 .search-tag-result:target {
-    background-color:yellow;
+    background-color:var(--search-tag-highlight-color);
 }
 details.page-search-details {
     display: inline-block;
@@ -923,6 +929,10 @@ button.copy:active {
 button.copy img {
     position: relative;
     background: none;
+    filter: brightness(var(--copy-icon-brightness));
+}
+button.copy:active {
+    background-color: var(--copy-button-background-color-active);
 }
 button.copy span {
     color: var(--body-text-color);
@@ -942,9 +952,6 @@ button.copy-header img {
     height: 0.88em;
     top: 0.1em;
 }
-button.copy-header:active {
-    background-color: rgba(128, 128, 160, 0.2);
-}
 /* search page copy button */
 button#page-search-copy {
     margin-left: 0.4em;
@@ -969,12 +976,6 @@ div.page-search-info:hover button#page-search-copy,
 div.page-search-info:hover button#page-search-copy span {
     opacity: 90%;
 }
-div.page-search-info button#page-search-copy:hover {
-    background-color: rgba(128, 128, 160, 0.2);
-}
-div.page-search-info button#page-search-copy:active {
-    background-color: rgba(128, 128, 160, 0.4);
-}
 /* snippet copy button */
 button.snippet-copy {
     position: absolute;
@@ -1006,9 +1007,6 @@ div.snippet-container:hover button.snippet-copy {
 div.snippet-container button.snippet-copy:hover {
     opacity: 100%;
 }
-button.snippet-copy:active {
-    background-color: rgba(128, 128, 160, 0.2);
-}
 /*
  * Styles for user-provided tables.
  *
@@ -1260,6 +1258,6 @@ pre.snippet .bold {
     font-weight: bold;
 }
 pre.snippet .highlighted {
-    background-color: #f7c590;
+    background-color: var(--snippet-highlight-color);
     border-radius: 10%;
 }

test/langtools/jdk/javadoc/doclet/testStylesheet/TestStylesheet.java

@@ -25,7 +25,7 @@
  * @test
  * @bug      4494033 7028815 7052425 8007338 8023608 8008164 8016549 8072461 8154261 8162363 8160196 8151743 8177417
  *           8175218 8176452 8181215 8182263 8183511 8169819 8183037 8185369 8182765 8196201 8184205 8223378 8241544
- *           8253117 8263528 8289334
+ *           8253117 8263528 8289334 8292594
  * @summary  Run tests on doclet stylesheet.
  * @library  /tools/lib ../../lib
  * @modules jdk.javadoc/jdk.javadoc.internal.tool
@@ -95,12 +95,10 @@ public void test(Path base) {
                         position:relative;
                         text-align:left;
                         background-repeat:no-repeat;
-                        color:#253441;
+                        color:var(--selected-text-color);
                         clear:none;
                         overflow:hidden;
-                        padding:0;
-                        padding-top:10px;
-                        padding-left:1px;
+                        padding: 10px 0 0 1px;
                         margin:0;
                     }""",
                 """
@@ -110,7 +108,7 @@ public void test(Path base) {
                         padding:5px 12px 7px 12px;
                         display:inline-block;
                         float:left;
-                        background-color:var(--highlight-background-color);
+                        background-color:var(--selected-background-color);
                         border: none;
                         height:16px;
                     }""",
@@ -123,8 +121,8 @@ public void test(Path base) {
                         margin-right: 8px;
                     }
                     div.table-tabs > .active-table-tab {
-                        background: var(--highlight-background-color);
-                        color: var(--highlight-text-color);
+                        background: var(--selected-background-color);
+                        color: var(--selected-text-color);
                     }
                     div.table-tabs > button.table-tab {
                         background: var(--navbar-background-color);
@@ -146,7 +144,7 @@ public void test(Path base) {
                 "@import url('resources/fonts/dejavu.css');",
                 """
                     .search-tag-result:target {
-                        background-color:yellow;
+                        background-color:var(--search-tag-highlight-color);
                     }""",
                 """
                     a[href]:hover, a[href]:focus {
@@ -191,7 +189,7 @@ public void test(Path base) {
                     }""",
                 """
                     ::placeholder {
-                        color:#909090;
+                        color:var(--search-input-placeholder-color);
                         opacity: 1;
                     }""");