8289334: Use CSS variables to define fonts and colors

Reviewed-by: jjg
This commit is contained in:
Hannes Wallnöfer 2022-08-18 09:02:16 +00:00
parent 2ee9491a60
commit d5435642f9
11 changed files with 197 additions and 194 deletions
src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets
test/langtools/jdk/javadoc
doclet
AccessH1
checkStylesheetClasses
testDocEncoding
testSearch
testStylesheet
tool/api/basic

@ -302,9 +302,6 @@ public class HtmlDoclet extends AbstractDoclet {
f = DocFile.createFileForOutput(configuration, DocPaths.RESOURCES.resolve(DocPaths.X_IMG)); f = DocFile.createFileForOutput(configuration, DocPaths.RESOURCES.resolve(DocPaths.X_IMG));
f.copyResource(DOCLET_RESOURCES.resolve(DocPaths.X_IMG), true, false); f.copyResource(DOCLET_RESOURCES.resolve(DocPaths.X_IMG), true, false);
copyJqueryFiles(); copyJqueryFiles();
f = DocFile.createFileForOutput(configuration, DocPaths.JQUERY_OVERRIDES_CSS);
f.copyResource(DOCLET_RESOURCES.resolve(DocPaths.JQUERY_OVERRIDES_CSS), true, true);
} }
copyLegalFiles(options.createIndex()); copyLegalFiles(options.createIndex());

@ -328,9 +328,7 @@ public class Head extends Content {
} }
if (index) { if (index) {
// The order of the addStylesheet(...) calls is important
addStylesheet(head, DocPaths.SCRIPT_DIR.resolve(DocPaths.JQUERY_UI_CSS)); addStylesheet(head, DocPaths.SCRIPT_DIR.resolve(DocPaths.JQUERY_UI_CSS));
addStylesheet(head, DocPaths.JQUERY_OVERRIDES_CSS);
} }
} }

@ -1,35 +0,0 @@
/*
* Copyright (c) 2020, 2022, Oracle and/or its affiliates. All rights reserved.
* DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
*
* This code is free software; you can redistribute it and/or modify it
* under the terms of the GNU General Public License version 2 only, as
* published by the Free Software Foundation. Oracle designates this
* particular file as subject to the "Classpath" exception as provided
* by Oracle in the LICENSE file that accompanied this code.
*
* This code is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License
* version 2 for more details (a copy is included in the LICENSE file that
* accompanied this code).
*
* You should have received a copy of the GNU General Public License version
* 2 along with this work; if not, write to the Free Software Foundation,
* Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
*
* Please contact Oracle, 500 Oracle Parkway, Redwood Shores, CA 94065 USA
* or visit www.oracle.com if you need additional information or have any
* questions.
*/
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
/* Overrides the color of selection used in jQuery UI */
background: #F8981D;
border: 1px solid #F8981D;
}

@ -4,18 +4,59 @@
@import url('resources/fonts/dejavu.css'); @import url('resources/fonts/dejavu.css');
/*
* These CSS custom properties (variables) define the core color and font
* properties used in this stylesheet.
*/
:root {
/* body, block and code fonts */
--body-font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif;
--block-font-family: 'DejaVu Serif', Georgia, "Times New Roman", Times, serif;
--code-font-family: 'DejaVu Sans Mono', monospace;
/* Base font sizes for body and code elements */
--body-font-size: 14px;
--code-font-size: 14px;
/* Text colors for body and block elements */
--body-text-color: #353833;
--block-text-color: #474747;
/* Background colors for various structural elements */
--body-background-color: #ffffff;
--section-background-color: #f8f8f8;
--detail-background-color: #ffffff;
/* Colors for navigation bar and table captions */
--navbar-background-color: #4D7A97;
--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 colors for generated tables */
--even-row-color: #ffffff;
--odd-row-color: #eeeeef;
/* Text color for page title */
--title-color: #2c4557;
/* Text colors for links */
--link-color: #4A6782;
--link-color-active: #bb7a2a;
/* Snippet colors */
--snippet-background-color: #ebecee;
--snippet-text-color: var(--block-text-color);
/* Border colors for structural elements and user defined tables */
--border-color: #ededed;
--table-border-color: #000000;
}
/* /*
* Styles for individual HTML elements. * Styles for individual HTML elements.
* *
* These are styles that are specific to individual HTML elements. Changing them affects the style of a particular * These are styles that are specific to individual HTML elements. Changing them affects the style of a particular
* HTML element throughout the page. * HTML element throughout the page.
*/ */
body { body {
background-color:#ffffff; background-color:var(--body-background-color);
color:#353833; color:var(--body-text-color);
font-family:'DejaVu Sans', Arial, Helvetica, sans-serif; font-family:var(--body-font-family);
font-size:14px; font-size:var(--body-font-size);
margin:0; margin:0;
padding:0; padding:0;
height:100%; height:100%;
@ -31,36 +72,36 @@ iframe {
} }
a:link, a:visited { a:link, a:visited {
text-decoration:none; text-decoration:none;
color:#4A6782; color:var(--link-color);
} }
a[href]:hover, a[href]:focus { a[href]:hover, a[href]:focus {
text-decoration:none; text-decoration:none;
color:#bb7a2a; color:var(--link-color-active);
} }
a[name] { a[name] {
color:#353833; color:#353833;
} }
pre { pre {
font-family:'DejaVu Sans Mono', monospace; font-family:var(--code-font-family);
font-size:14px; font-size:1em;
} }
h1 { h1 {
font-size:20px; font-size:1.428em;
} }
h2 { h2 {
font-size:18px; font-size:1.285em;
} }
h3 { h3 {
font-size:16px; font-size:1.14em;
} }
h4 { h4 {
font-size:15px; font-size:1.072em;
} }
h5 { h5 {
font-size:14px; font-size:1.001em;
} }
h6 { h6 {
font-size:13px; font-size:0.93em;
} }
/* Disable font boosting for selected elements */ /* Disable font boosting for selected elements */
h1, h2, h3, h4, h5, h6, div.member-signature { h1, h2, h3, h4, h5, h6, div.member-signature {
@ -70,23 +111,23 @@ ul {
list-style-type:disc; list-style-type:disc;
} }
code, tt { code, tt {
font-family:'DejaVu Sans Mono', monospace; font-family:var(--code-font-family);
} }
:not(h1, h2, h3, h4, h5, h6) > code, :not(h1, h2, h3, h4, h5, h6) > code,
:not(h1, h2, h3, h4, h5, h6) > tt { :not(h1, h2, h3, h4, h5, h6) > tt {
font-size:14px; font-size:var(--code-font-size);
padding-top:4px; padding-top:4px;
margin-top:8px; margin-top:8px;
line-height:1.4em; line-height:1.4em;
} }
dt code { dt code {
font-family:'DejaVu Sans Mono', monospace; font-family:var(--code-font-family);
font-size:14px; font-size:1em;
padding-top:4px; padding-top:4px;
} }
.summary-table dt code { .summary-table dt code {
font-family:'DejaVu Sans Mono', monospace; font-family:var(--code-font-family);
font-size:14px; font-size:1em;
vertical-align:top; vertical-align:top;
padding-top:4px; padding-top:4px;
} }
@ -94,8 +135,8 @@ sup {
font-size:8px; font-size:8px;
} }
button { button {
font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; font-family: var(--body-font-family);
font-size: 14px; font-size: 1em;
} }
/* /*
* Styles for HTML generated by javadoc. * Styles for HTML generated by javadoc.
@ -109,7 +150,7 @@ button {
.about-language { .about-language {
float:right; float:right;
padding:0 21px 8px 8px; padding:0 21px 8px 8px;
font-size:11px; font-size:0.915em;
margin-top:-9px; margin-top:-9px;
height:2.9em; height:2.9em;
} }
@ -136,8 +177,8 @@ button {
} }
} }
.top-nav { .top-nav {
background-color:#4D7A97; background-color:var(--navbar-background-color);
color:#FFFFFF; color:var(--navbar-text-color);
float:left; float:left;
padding:0; padding:0;
width:100%; width:100%;
@ -145,7 +186,7 @@ button {
min-height:2.8em; min-height:2.8em;
padding-top:10px; padding-top:10px;
overflow:hidden; overflow:hidden;
font-size:12px; font-size:0.857em;
} }
button#navbar-toggle-button { button#navbar-toggle-button {
display:none; display:none;
@ -154,11 +195,11 @@ ul.sub-nav-list-small {
display: none; display: none;
} }
.sub-nav { .sub-nav {
background-color:#dee3e9; background-color:var(--subnav-background-color);
float:left; float:left;
width:100%; width:100%;
overflow:hidden; overflow:hidden;
font-size:12px; font-size:0.857em;
} }
.sub-nav div { .sub-nav div {
clear:left; clear:left;
@ -198,7 +239,7 @@ ul.sub-nav-list li {
float:left; float:left;
} }
.top-nav a:link, .top-nav a:active, .top-nav a:visited { .top-nav a:link, .top-nav a:active, .top-nav a:visited {
color:#ffffff; color:var(--navbar-text-color);
text-decoration:none; text-decoration:none;
text-transform:uppercase; text-transform:uppercase;
} }
@ -206,8 +247,8 @@ ul.sub-nav-list li {
color:#bb7a2a; color:#bb7a2a;
} }
.nav-bar-cell1-rev { .nav-bar-cell1-rev {
background-color:#F8981D; background-color:var(--highlight-background-color);
color:#253441; color:var(--highlight-text-color);
margin: auto 5px; margin: auto 5px;
} }
.skip-nav { .skip-nav {
@ -228,7 +269,7 @@ ul.sub-nav-list li {
* Styles for page header. * Styles for page header.
*/ */
.title { .title {
color:#2c4557; color:var(--title-color);
margin:10px 0; margin:10px 0;
} }
.sub-title { .sub-title {
@ -240,15 +281,15 @@ ul.sub-nav-list li {
} }
.header ul li { .header ul li {
list-style:none; list-style:none;
font-size:13px; font-size:0.93em;
} }
/* /*
* Styles for headings. * Styles for headings.
*/ */
body.class-declaration-page .summary h2, body.class-declaration-page .summary h2,
body.class-declaration-page .details h2, body.class-declaration-page .details h2,
body.class-use-page h2, body.class-use-page h2,
body.module-declaration-page .block-list h2 { body.module-declaration-page .block-list h2 {
font-style: italic; font-style: italic;
padding:0; padding:0;
margin:15px 0; margin:15px 0;
@ -256,8 +297,8 @@ body.module-declaration-page .block-list h2 {
body.class-declaration-page .summary h3, body.class-declaration-page .summary h3,
body.class-declaration-page .details h3, body.class-declaration-page .details h3,
body.class-declaration-page .summary .inherited-list h2 { body.class-declaration-page .summary .inherited-list h2 {
background-color:#dee3e9; background-color:var(--subnav-background-color);
border:1px solid #d0d9e0; border:1px solid var(--border-color);
margin:0 0 6px -8px; margin:0 0 6px -8px;
padding:7px 5px; padding:7px 5px;
} }
@ -271,15 +312,15 @@ main {
} }
dl.notes > dt { dl.notes > dt {
font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif;
font-size:12px; font-size:0.856em;
font-weight:bold; font-weight:bold;
margin:10px 0 0 0; margin:10px 0 0 0;
color:#4E4E4E; color:var(--body-text-color);
} }
dl.notes > dd { dl.notes > dd {
margin:5px 10px 10px 0; margin:5px 10px 10px 0;
font-size:14px; font-size:1em;
font-family:'DejaVu Serif', Georgia, "Times New Roman", Times, serif; font-family:var(--block-font-family)
} }
dl.name-value > dt { dl.name-value > dt {
margin-left:1px; margin-left:1px;
@ -346,9 +387,8 @@ ul.see-list-long li:not(:last-child):after {
.summary-table, .details-table { .summary-table, .details-table {
width:100%; width:100%;
border-spacing:0; border-spacing:0;
border-left:1px solid #EEE; border:1px solid var(--border-color);
border-right:1px solid #EEE; border-top:0;
border-bottom:1px solid #EEE;
padding:0; padding:0;
} }
.caption { .caption {
@ -368,7 +408,7 @@ ul.see-list-long li:not(:last-child):after {
} }
.caption a:hover, .caption a:hover,
.caption a:active { .caption a:active {
color:#FFFFFF; color:var(--navbar-text-color);
} }
.caption span { .caption span {
font-weight:bold; font-weight:bold;
@ -376,7 +416,7 @@ ul.see-list-long li:not(:last-child):after {
padding:5px 12px 7px 12px; padding:5px 12px 7px 12px;
display:inline-block; display:inline-block;
float:left; float:left;
background-color:#F8981D; background-color:var(--highlight-background-color);
border: none; border: none;
height:16px; height:16px;
} }
@ -391,19 +431,19 @@ div.table-tabs > span {
padding: 5px 12px 8px 12px; padding: 5px 12px 8px 12px;
} }
div.table-tabs > button { div.table-tabs > button {
border: none; border: none;
cursor: pointer; cursor: pointer;
padding: 5px 12px 7px 12px; padding: 5px 12px 7px 12px;
font-weight: bold; font-weight: bold;
margin-right: 8px; margin-right: 8px;
} }
div.table-tabs > .active-table-tab { div.table-tabs > .active-table-tab {
background: #F8981D; background: var(--highlight-background-color);
color: #253441; color: var(--highlight-text-color);
} }
div.table-tabs > button.table-tab { div.table-tabs > button.table-tab {
background: #4D7A97; background: var(--navbar-background-color);
color: #FFFFFF; color: var(--navbar-text-color);
} }
.two-column-search-results { .two-column-search-results {
display: grid; display: grid;
@ -481,7 +521,7 @@ div.checkboxes > label > input {
padding-bottom:3px; padding-bottom:3px;
} }
.table-header { .table-header {
background:#dee3e9; background:var(--subnav-background-color);
font-weight: bold; font-weight: bold;
} }
/* Sortable table columns */ /* Sortable table columns */
@ -514,10 +554,10 @@ div.checkboxes > label > input {
<path d="M10.101 86.392l52.917 52.917 52.917-52.917" style="opacity:.75;"/></svg>'); <path d="M10.101 86.392l52.917 52.917 52.917-52.917" style="opacity:.75;"/></svg>');
} }
.col-first, .col-first { .col-first, .col-first {
font-size:13px; font-size:0.93em;
} }
.col-second, .col-second, .col-last, .col-constructor-name, .col-summary-item-name, .col-last { .col-second, .col-second, .col-last, .col-constructor-name, .col-summary-item-name, .col-last {
font-size:13px; font-size:0.93em;
} }
.col-first, .col-second, .col-constructor-name { .col-first, .col-second, .col-constructor-name {
vertical-align:top; vertical-align:top;
@ -535,17 +575,17 @@ div.checkboxes > label > input {
font-weight:bold; font-weight:bold;
} }
.even-row-color, .even-row-color .table-header { .even-row-color, .even-row-color .table-header {
background-color:#FFFFFF; background-color:var(--even-row-color);
} }
.odd-row-color, .odd-row-color .table-header { .odd-row-color, .odd-row-color .table-header {
background-color:#EEEEEF; background-color:var(--odd-row-color);
} }
/* /*
* Styles for contents. * Styles for contents.
*/ */
div.block { div.block {
font-size:14px; font-size:var(--body-font-size);
font-family:'DejaVu Serif', Georgia, "Times New Roman", Times, serif; font-family:var(--block-font-family);
} }
.col-last div { .col-last div {
padding-top:0; padding-top:0;
@ -557,8 +597,8 @@ div.block {
.package-signature, .package-signature,
.type-signature, .type-signature,
.member-signature { .member-signature {
font-family:'DejaVu Sans Mono', monospace; font-family:var(--code-font-family);
font-size:14px; font-size:1em;
margin:14px 0; margin:14px 0;
white-space: pre-wrap; white-space: pre-wrap;
} }
@ -587,7 +627,7 @@ div.block {
.block { .block {
display:block; display:block;
margin:0 10px 5px 0; margin:0 10px 5px 0;
color:#474747; color:var(--block-text-color);
} }
.deprecated-label, .description-from-type-label, .implementation-label, .member-name-link, .deprecated-label, .description-from-type-label, .implementation-label, .member-name-link,
.module-label-in-package, .module-label-in-type, .package-label-in-type, .module-label-in-package, .module-label-in-type, .package-label-in-type,
@ -598,8 +638,8 @@ div.block {
font-style:italic; font-style:italic;
} }
.deprecation-block { .deprecation-block {
font-size:14px; font-size:1em;
font-family:'DejaVu Serif', Georgia, "Times New Roman", Times, serif; font-family:var(--block-font-family);
border-style:solid; border-style:solid;
border-width:thin; border-width:thin;
border-radius:10px; border-radius:10px;
@ -609,8 +649,8 @@ div.block {
display:inline-block; display:inline-block;
} }
.preview-block { .preview-block {
font-size:14px; font-size:1em;
font-family:'DejaVu Serif', Georgia, "Times New Roman", Times, serif; font-family:var(--block-font-family);
border-style:solid; border-style:solid;
border-width:thin; border-width:thin;
border-radius:10px; border-radius:10px;
@ -623,8 +663,8 @@ div.block div.deprecation-comment {
font-style:normal; font-style:normal;
} }
details.invalid-tag, span.invalid-tag { details.invalid-tag, span.invalid-tag {
font-size:14px; font-size:1em;
font-family:'DejaVu Serif', Georgia, "Times New Roman", Times, serif; font-family:var(--block-font-family);
background: #ffe6e6; background: #ffe6e6;
border: thin solid #000000; border: thin solid #000000;
border-radius:2px; border-radius:2px;
@ -643,12 +683,18 @@ main, nav, header, footer, section {
/* /*
* Styles for javadoc search. * Styles for javadoc search.
*/ */
.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);
}
.ui-autocomplete-category { .ui-autocomplete-category {
font-weight:bold; font-weight:bold;
font-size:15px; font-size:15px;
padding:7px 0 7px 3px; padding:7px 0 7px 3px;
background-color:#4D7A97; background-color:var(--navbar-background-color);
color:#FFFFFF; color:var(--navbar-text-color);
} }
.ui-autocomplete { .ui-autocomplete {
max-height:85%; max-height:85%;
@ -662,7 +708,7 @@ main, nav, header, footer, section {
ul.ui-autocomplete { ul.ui-autocomplete {
position:fixed; position:fixed;
z-index:1; z-index:1;
background-color: #FFFFFF; background-color: var(--body-background-color);
} }
ul.ui-autocomplete li { ul.ui-autocomplete li {
float:left; float:left;
@ -673,10 +719,10 @@ ul.ui-autocomplete li.ui-static-link {
position:sticky; position:sticky;
bottom:0; bottom:0;
left:0; left:0;
background: #dee3e9; background: var(--subnav-background-color);
padding: 5px 0; padding: 5px 0;
font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif;
font-size: 13px; font-size: 0.93em;
font-weight: bolder; font-weight: bolder;
z-index: 2; z-index: 2;
} }
@ -737,7 +783,7 @@ details.page-search-details {
display: inline-block; display: inline-block;
} }
div#result-container { div#result-container {
font-size: 14px; font-size: 1em;
} }
div#result-container a.search-result-link { div#result-container a.search-result-link {
padding: 0; padding: 0;
@ -748,24 +794,24 @@ div#result-container a.search-result-link {
font-weight:bolder; font-weight:bolder;
} }
.page-search-info { .page-search-info {
background-color: #f5f8ff; background-color: var(--subnav-background-color);
border-radius: 3px; border-radius: 3px;
border: 0 solid #b9c8d3; border: 0 solid var(--border-color);
padding: 0 8px; padding: 0 8px;
overflow: hidden; overflow: hidden;
height: 0; height: 0;
transition: all 0.2s ease; transition: all 0.2s ease;
} }
div.table-tabs > button.table-tab { div.table-tabs > button.table-tab {
background: #4D7A97; background: var(--navbar-background-color);
color: #FFFFFF; color: var(--navbar-text-color);
} }
.page-search-header { .page-search-header {
padding: 5px 12px 7px 12px; padding: 5px 12px 7px 12px;
font-weight: bold; font-weight: bold;
margin-right: 3px; margin-right: 3px;
background-color:#4D7A97; background-color:var(--navbar-background-color);
color:#ffffff; color:var(--navbar-text-color);
display: inline-block; display: inline-block;
} }
button.page-search-header { button.page-search-header {
@ -792,13 +838,13 @@ section.class-description {
} }
.summary section[class$="-summary"], .details section[class$="-details"], .summary section[class$="-summary"], .details section[class$="-details"],
.class-uses .detail, .serialized-class-details { .class-uses .detail, .serialized-class-details {
padding: 0px 20px 5px 10px; padding: 0 20px 5px 10px;
border: 1px solid #ededed; border: 1px solid var(--border-color);
background-color: #f8f8f8; background-color: var(--section-background-color);
} }
.inherited-list, section[class$="-details"] .detail { .inherited-list, section[class$="-details"] .detail {
padding:0 0 5px 8px; padding:0 0 5px 8px;
background-color:#ffffff; background-color:var(--detail-background-color);
border:none; border:none;
} }
.vertical-separator { .vertical-separator {
@ -865,21 +911,21 @@ button.copy img {
background: none; background: none;
} }
button.copy span { button.copy span {
color: #303030; color: var(--body-text-color);
position: relative; position: relative;
top: -0.1em; top: -0.1em;
transition: all 0.1s; transition: all 0.1s;
font-size: 85%; font-size: 0.76rem;
line-height: 1.2em; line-height: 1.2em;
} }
/* header/section copy button */ /* header/section copy button */
button.copy-header { button.copy-header {
margin: 0 0.2em; margin: 0 0.2em;
padding: 0 4px; padding: 0 4px;
height: 1.35em; height: 1.16em;
} }
button.copy-header img { button.copy-header img {
height: 1em; height: 0.88em;
top: 0.1em; top: 0.1em;
} }
button.copy-header:active { button.copy-header:active {
@ -898,7 +944,7 @@ button#page-search-copy img {
top: 0.15em; top: 0.15em;
} }
button#page-search-copy span { button#page-search-copy span {
color: #000000; color: var(--body-text-color);
content: attr(aria-label); content: attr(aria-label);
line-height: 1.2em; line-height: 1.2em;
padding: 0.2em; padding: 0.2em;
@ -910,10 +956,10 @@ div.page-search-info:hover button#page-search-copy span {
opacity: 90%; opacity: 90%;
} }
div.page-search-info button#page-search-copy:hover { div.page-search-info button#page-search-copy:hover {
background-color: #dfe6f1; background-color: rgba(128, 128, 160, 0.2);
} }
div.page-search-info button#page-search-copy:active { div.page-search-info button#page-search-copy:active {
background-color: #cfdbee; background-color: rgba(128, 128, 160, 0.4);
} }
/* snippet copy button */ /* snippet copy button */
button.snippet-copy { button.snippet-copy {
@ -947,7 +993,7 @@ div.snippet-container button.snippet-copy:hover {
opacity: 100%; opacity: 100%;
} }
button.snippet-copy:active { button.snippet-copy:active {
background: #d3d3d3; background-color: rgba(128, 128, 160, 0.2);
} }
/* /*
* Styles for user-provided tables. * Styles for user-provided tables.
@ -995,34 +1041,34 @@ table.borderless > thead > tr, table.borderless > tbody > tr, table.borderless >
} }
table.plain { table.plain {
border-collapse: collapse; border-collapse: collapse;
border: 1px solid black; border: 1px solid var(--table-border-color);
} }
table.plain > thead > tr, table.plain > tbody tr, table.plain > tr { table.plain > thead > tr, table.plain > tbody tr, table.plain > tr {
background-color: transparent; background-color: transparent;
} }
table.plain > thead > tr > th, table.plain > tbody > tr > th, table.plain > tr > th, table.plain > thead > tr > th, table.plain > tbody > tr > th, table.plain > tr > th,
table.plain > thead > tr > td, table.plain > tbody > tr > td, table.plain > tr > td { table.plain > thead > tr > td, table.plain > tbody > tr > td, table.plain > tr > td {
border: 1px solid black; border: 1px solid var(--table-border-color);
} }
table.striped { table.striped {
border-collapse: collapse; border-collapse: collapse;
border: 1px solid black; border: 1px solid var(--table-border-color);
} }
table.striped > thead { table.striped > thead {
background-color: #E3E3E3; background-color: var(--subnav-background-color);
} }
table.striped > thead > tr > th, table.striped > thead > tr > td { table.striped > thead > tr > th, table.striped > thead > tr > td {
border: 1px solid black; border: 1px solid var(--table-border-color);
} }
table.striped > tbody > tr:nth-child(even) { table.striped > tbody > tr:nth-child(even) {
background-color: #EEE background-color: var(--odd-row-color)
} }
table.striped > tbody > tr:nth-child(odd) { table.striped > tbody > tr:nth-child(odd) {
background-color: #FFF background-color: var(--even-row-color)
} }
table.striped > tbody > tr > th, table.striped > tbody > tr > td { table.striped > tbody > tr > th, table.striped > tbody > tr > td {
border-left: 1px solid black; border-left: 1px solid var(--table-border-color);
border-right: 1px solid black; border-right: 1px solid var(--table-border-color);
} }
table.striped > tbody > tr > th { table.striped > tbody > tr > th {
font-weight: normal; font-weight: normal;
@ -1059,8 +1105,8 @@ table.striped > tbody > tr > th {
width: 50%; width: 50%;
float: right; float: right;
clear: right; clear: right;
background-color: #dee3e9; background-color: var(--subnav-background-color);
color: #353833; color: var(--body-text-color);
margin: 6px 0 0 0; margin: 6px 0 0 0;
padding: 0; padding: 0;
} }
@ -1068,10 +1114,10 @@ table.striped > tbody > tr > th {
padding-left: 20px; padding-left: 20px;
} }
ul.sub-nav-list-small a:link, ul.sub-nav-list-small a:visited { ul.sub-nav-list-small a:link, ul.sub-nav-list-small a:visited {
color:#4A6782; color:var(--link-color);
} }
ul.sub-nav-list-small a:hover { ul.sub-nav-list-small a:hover {
color:#bb7a2a; color:var(--link-color-active);
} }
ul.sub-nav-list-small li { ul.sub-nav-list-small li {
list-style:none; list-style:none;
@ -1110,7 +1156,7 @@ table.striped > tbody > tr > th {
margin: 1px 0 4px 0; margin: 1px 0 4px 0;
border-radius: 2px; border-radius: 2px;
transition: all 0.1s; transition: all 0.1s;
background-color: #ffffff; background-color: var(--navbar-text-color);
} }
button#navbar-toggle-button.expanded span.nav-bar-toggle-icon:nth-child(1) { button#navbar-toggle-button.expanded span.nav-bar-toggle-icon:nth-child(1) {
transform: rotate(45deg); transform: rotate(45deg);
@ -1174,7 +1220,8 @@ table.striped > tbody > tr > th {
} }
pre.snippet { pre.snippet {
background-color: #ebecee; background-color: var(--snippet-background-color);
color: var(--snippet-text-color);
padding: 10px; padding: 10px;
margin: 12px 0; margin: 12px 0;
overflow: auto; overflow: auto;

@ -94,9 +94,6 @@ public class DocPaths {
/** The name of the copy-to-clipboard icon file. */ /** The name of the copy-to-clipboard icon file. */
public static final DocPath CLIPBOARD_SVG = DocPath.create("copy.svg"); public static final DocPath CLIPBOARD_SVG = DocPath.create("copy.svg");
/** The name of the stylesheet file overriding jQuery UI stylesheet. */
public static final DocPath JQUERY_OVERRIDES_CSS = DocPath.create("jquery-ui.overrides.css");
/** The name of the default jQuery javascript file. */ /** The name of the default jQuery javascript file. */
public static final DocPath JQUERY_JS = DocPath.create("jquery-3.6.0.min.js"); public static final DocPath JQUERY_JS = DocPath.create("jquery-3.6.0.min.js");

@ -51,9 +51,10 @@ public class AccessH1 extends JavadocTester {
// Test the style sheet // Test the style sheet
checkOutput("stylesheet.css", true, checkOutput("stylesheet.css", true,
"h1 {\n" """
+ " font-size:20px;\n" h1 {
+ "}"); font-size:1.428em;
}""");
// Test the doc title in the overview page // Test the doc title in the overview page
checkOutput("index.html", true, checkOutput("index.html", true,

@ -137,7 +137,7 @@ public class CheckStylesheetClasses {
// used in search.js and search-page.js; may be worth documenting in HtmlStyle // used in search.js and search-page.js; may be worth documenting in HtmlStyle
removeAll(styleSheetNames, "result-highlight", "result-item", "copy-header", removeAll(styleSheetNames, "result-highlight", "result-item", "copy-header",
"search-tag-desc-result", "search-tag-holder-result", "page-search-header", "search-tag-desc-result", "search-tag-holder-result", "page-search-header",
"ui-autocomplete", "ui-autocomplete-category", "expanded", "ui-autocomplete", "ui-autocomplete-category", "ui-state-active", "expanded",
"search-result-link", "two-column-search-results", "ui-static-link"); "search-result-link", "two-column-search-results", "ui-static-link");
// very JDK specific // very JDK specific

@ -58,8 +58,8 @@ public class TestDocEncoding extends JavadocTester {
checkOutput("stylesheet.css", true, checkOutput("stylesheet.css", true,
""" """
body { body {
background-color:#ffffff;"""); background-color:var(--body-background-color);""");
// reset the charset, for a negative test, that the -docencoding // reset the charset, for a negative test, that the -docencoding
// was effective and that the output is not in UTF-8. // was effective and that the output is not in UTF-8.
@ -67,7 +67,7 @@ public class TestDocEncoding extends JavadocTester {
checkOutput("stylesheet.css", false, checkOutput("stylesheet.css", false,
""" """
body { body {
background-color:#ffffff;"""); background-color:var(--page-bg-color);""");
} }
} }

@ -695,7 +695,6 @@ public class TestSearch extends JavadocTester {
void checkJqueryAndImageFiles(boolean expectedOutput) { void checkJqueryAndImageFiles(boolean expectedOutput) {
checkFiles(expectedOutput, checkFiles(expectedOutput,
"search.js", "search.js",
"jquery-ui.overrides.css",
"script-dir/jquery-3.6.0.min.js", "script-dir/jquery-3.6.0.min.js",
"script-dir/jquery-ui.min.js", "script-dir/jquery-ui.min.js",
"script-dir/jquery-ui.min.css", "script-dir/jquery-ui.min.css",

@ -25,7 +25,7 @@
* @test * @test
* @bug 4494033 7028815 7052425 8007338 8023608 8008164 8016549 8072461 8154261 8162363 8160196 8151743 8177417 * @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 * 8175218 8176452 8181215 8182263 8183511 8169819 8183037 8185369 8182765 8196201 8184205 8223378 8241544
* 8253117 8263528 * 8253117 8263528 8289334
* @summary Run tests on doclet stylesheet. * @summary Run tests on doclet stylesheet.
* @library /tools/lib ../../lib * @library /tools/lib ../../lib
* @modules jdk.javadoc/jdk.javadoc.internal.tool * @modules jdk.javadoc/jdk.javadoc.internal.tool
@ -68,10 +68,10 @@ public class TestStylesheet extends JavadocTester {
checkOutput("stylesheet.css", true, checkOutput("stylesheet.css", true,
""" """
body { body {
background-color:#ffffff; background-color:var(--body-background-color);
color:#353833; color:var(--body-text-color);
font-family:'DejaVu Sans', Arial, Helvetica, sans-serif; font-family:var(--body-font-family);
font-size:14px; font-size:var(--body-font-size);
margin:0; margin:0;
padding:0; padding:0;
height:100%; height:100%;
@ -86,9 +86,10 @@ public class TestStylesheet extends JavadocTester {
overflow-y:scroll; overflow-y:scroll;
border:none; border:none;
}""", }""",
"ul {\n" """
+ " list-style-type:disc;\n" ul {
+ "}", list-style-type:disc;
}""",
""" """
.caption { .caption {
position:relative; position:relative;
@ -103,31 +104,31 @@ public class TestStylesheet extends JavadocTester {
margin:0; margin:0;
}""", }""",
""" """
.caption span { .caption span {
font-weight:bold; font-weight:bold;
white-space:nowrap; white-space:nowrap;
padding:5px 12px 7px 12px; padding:5px 12px 7px 12px;
display:inline-block; display:inline-block;
float:left; float:left;
background-color:#F8981D; background-color:var(--highlight-background-color);
border: none; border: none;
height:16px; height:16px;
}""", }""",
""" """
div.table-tabs > button { div.table-tabs > button {
border: none; border: none;
cursor: pointer; cursor: pointer;
padding: 5px 12px 7px 12px; padding: 5px 12px 7px 12px;
font-weight: bold; font-weight: bold;
margin-right: 8px; margin-right: 8px;
} }
div.table-tabs > .active-table-tab { div.table-tabs > .active-table-tab {
background: #F8981D; background: var(--highlight-background-color);
color: #253441; color: var(--highlight-text-color);
} }
div.table-tabs > button.table-tab { div.table-tabs > button.table-tab {
background: #4D7A97; background: var(--navbar-background-color);
color: #FFFFFF; color: var(--navbar-text-color);
}""", }""",
// Test the formatting styles for proper content display in use and constant values pages. // Test the formatting styles for proper content display in use and constant values pages.
""" """
@ -150,7 +151,7 @@ public class TestStylesheet extends JavadocTester {
""" """
a[href]:hover, a[href]:focus { a[href]:hover, a[href]:focus {
text-decoration:none; text-decoration:none;
color:#bb7a2a; color:var(--link-color-active);
}""", }""",
""" """
.col-first a:link, .col-first a:visited, .col-first a:link, .col-first a:visited,
@ -163,8 +164,8 @@ public class TestStylesheet extends JavadocTester {
}""", }""",
""" """
.deprecation-block { .deprecation-block {
font-size:14px; font-size:1em;
font-family:'DejaVu Serif', Georgia, "Times New Roman", Times, serif; font-family:var(--block-font-family);
border-style:solid; border-style:solid;
border-width:thin; border-width:thin;
border-radius:10px; border-radius:10px;

@ -218,7 +218,6 @@ class APITest {
"resources/x.png", "resources/x.png",
"script.js", "script.js",
"search.js", "search.js",
"jquery-ui.overrides.css",
"stylesheet.css", "stylesheet.css",
"tag-search-index.js", "tag-search-index.js",
"type-search-index.js" "type-search-index.js"
@ -232,7 +231,6 @@ class APITest {
&& !s.equals("search.js") && !s.equals("search.js")
&& !s.equals("search.html") && !s.equals("search.html")
&& !s.equals("search-page.js") && !s.equals("search-page.js")
&& !s.equals("jquery-ui.overrides.css")
&& !s.equals("allclasses-index.html") && !s.equals("allclasses-index.html")
&& !s.equals("allpackages-index.html") && !s.equals("allpackages-index.html")
&& !s.equals("system-properties.html")) && !s.equals("system-properties.html"))