fix(ci,style): improve asset copying and enhance UI contrast for docs site (#979)

* fix: copy website assets properly in CI
* chore: remove unnecessary footer content
* style: update doc link colors in vars.css for better contrast
* style: refine color variables and update styles for better contrast
* style: update pagination colors for improved visibility
* style: update code highlight and toc colors for contrast
* style: change stroke color in home-o.svg to white

Author: julioest

.github/workflows/ci.yml

@@ -627,6 +627,7 @@ jobs:
           mkdir -p ../../build/website
           cp index.html ../../build/website/index.html
           cp styles.css ../../build/website/styles.css
+          cp -r assets ../../build/website/assets
 
       - name: Generate Antora UI
         working-directory: docs/ui

docs/ui/src/css/custom.css

@@ -68,10 +68,6 @@
   color: var(--navbar-font-color);
 }
 
-.toc.sidebar .toc-menu h3 {
-  color: var(--navbar-font-color);
-}
-
 .breadcrumbs li {
   color: var(--color-white-50);
 }

docs/ui/src/css/doc.css

@@ -753,7 +753,7 @@
 
 .doc .exampleblock > .content,
 .doc details.result > .content {
-  background: var(--example-background);
+  background: var(--pre-background);
   border: 0.25rem solid var(--example-border-color);
   border-radius: 0.5rem;
   padding: 0.75rem;

docs/ui/src/css/highlight.css

@@ -1,86 +1,85 @@
-/*! Adapted from the GitHub style by Vasily Polovnyov <[email protected]> */
-.hljs-comment,
-.hljs-quote {
-  color: #998;
-  font-style: italic;
+/* atom one dark theme */
+pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1em;
 }
 
-.hljs-keyword,
-.hljs-selector-tag,
-.hljs-subst {
-  color: #333;
-  font-weight: var(--monospace-font-weight-bold);
+code.hljs {
+  padding: 3px 5px;
 }
 
-.hljs-number,
-.hljs-literal,
-.hljs-variable,
-.hljs-template-variable,
-.hljs-tag .hljs-attr {
-  color: #008080;
+.hljs {
+  color: #abb2bf;
+  background: #282c34;
 }
 
-.hljs-string,
-.hljs-doctag {
-  color: #d14;
+.hljs-comment,
+.hljs-quote {
+  color: #5c6370;
+  font-style: italic;
 }
 
-.hljs-title,
-.hljs-section,
-.hljs-selector-id {
-  color: #900;
-  font-weight: var(--monospace-font-weight-bold);
+.hljs-doctag,
+.hljs-formula,
+.hljs-keyword {
+  color: #c678dd;
 }
 
+.hljs-deletion,
+.hljs-name,
+.hljs-section,
+.hljs-selector-tag,
 .hljs-subst {
-  font-weight: normal;
+  color: #e06c75;
 }
 
-.hljs-type,
-.hljs-class .hljs-title {
-  color: #458;
-  font-weight: var(--monospace-font-weight-bold);
+.hljs-literal {
+  color: #56b6c2;
 }
 
-.hljs-tag,
-.hljs-name,
-.hljs-attribute {
-  color: #000080;
-  font-weight: normal;
+.hljs-addition,
+.hljs-attribute,
+.hljs-meta .hljs-string,
+.hljs-regexp,
+.hljs-string {
+  color: #98c379;
 }
 
-.hljs-regexp,
-.hljs-link {
-  color: #009926;
+.hljs-attr,
+.hljs-number,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-pseudo,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable {
+  color: #d19a66;
 }
 
+.hljs-bullet,
+.hljs-link,
+.hljs-meta,
+.hljs-selector-id,
 .hljs-symbol,
-.hljs-bullet {
-  color: #990073;
+.hljs-title {
+  color: #61aeee;
 }
 
 .hljs-built_in,
-.hljs-builtin-name {
-  color: #0086b3;
-}
-
-.hljs-meta {
-  color: #999;
-  font-weight: var(--monospace-font-weight-bold);
-}
-
-.hljs-deletion {
-  background: #fdd;
-}
-
-.hljs-addition {
-  background: #dfd;
+.hljs-class .hljs-title,
+.hljs-title.class_ {
+  color: #e6c07b;
 }
 
 .hljs-emphasis {
   font-style: italic;
 }
 
 .hljs-strong {
-  font-weight: var(--monospace-font-weight-bold);
+  font-weight: 700;
+}
+
+.hljs-link {
+  text-decoration: underline;
 }

docs/ui/src/css/pagination.css

@@ -23,7 +23,7 @@ nav.pagination .next {
 }
 
 nav.pagination span::before {
-  color: var(--toolbar-muted-color);
+  color: var(--color-white-50);
   font-size: 0.75em;
   padding-bottom: 0.1em;
 }
@@ -37,14 +37,15 @@ nav.pagination .next::before {
 }
 
 nav.pagination a {
+  color: var(--color-white);
   font-weight: var(--body-font-weight-bold);
   line-height: 1.3;
   position: relative;
 }
 
 nav.pagination a::before,
 nav.pagination a::after {
-  color: var(--toolbar-muted-color);
+  color: var(--color-white-50);
   font-weight: normal;
   font-size: 1.5em;
   line-height: 0.75;

docs/ui/src/css/toc.css

@@ -72,7 +72,7 @@
 }
 
 .toc .toc-menu a {
-  color: inherit;
+  color: var(--color-white-75);
   border-left: 2px solid var(--toc-border-color);
   display: inline-block;
   padding: 0.25rem 0 0.25rem 0.5rem;
@@ -85,14 +85,14 @@
 }
 
 .toc .toc-menu a:hover {
-  color: var(--link-font-color);
+  color: var(--color-white);
 }
 
 .toc .toc-menu a.is-active {
-  border-left-color: var(--link-font-color);
+  border-left-color: var(--color-white);
   color: var(--doc-font-color);
 }
 
 .sidebar.toc .toc-menu a:focus {
-  background: var(--panel-background);
+  background: var(--color-black-20);
 }

docs/ui/src/css/vars.css

@@ -2,6 +2,8 @@
   /* colors */
   --color-white: rgba(255, 255, 255, 1);
   --color-white-50: rgba(255, 255, 255, 0.5);
+  --color-white-75: rgba(255, 255, 255, 0.75);
+  --color-white-15: rgba(255, 255, 255, 0.15);
   --color-smoke-10: rgba(254, 254, 254, 0.95);
   --color-smoke-30: rgba(250, 250, 250, 0.9);
   --color-smoke-50: rgba(245, 245, 245, 0.85);
@@ -18,6 +20,8 @@
   --color-jet-70: rgba(34, 34, 34, 0.3);
   --color-jet-80: rgba(25, 25, 25, 0.25);
   --color-black: rgba(0, 0, 0, 0.2);
+  --color-black-75: rgba(0, 0, 0, 0.75);
+  --color-black-15: rgba(0, 0, 0, 0.15);
   /* fonts */
   --rem-base: 18; /* used to compute rem value from desired pixel value (e.g., calc(18 / var(--rem-base) * 1rem) = 18px) */
   --body-font-size: 1.0625em; /* 17px */
@@ -31,7 +35,7 @@
   --monospace-font-weight-bold: 600;
   /* base */
   --body-background: var(--color-white);
-  --panel-background: var(--color-smoke-30);
+  --panel-background: var(--color-black-75);
   --panel-border-color: var(--color-smoke-90);
   --scrollbar-track-color: var(--color-smoke-30);
   --scrollbar-thumb-color: var(--color-gray-10);
@@ -84,42 +88,42 @@
   --heading-font-weight: normal;
   --alt-heading-font-weight: var(--body-font-weight-bold);
   --section-divider-color: var(--panel-border-color);
-  --link-font-color: #1565c0;
-  --link_hover-font-color: #104d92;
+  --link-font-color: #ffc;
+  --link_hover-font-color: #fff5b3;
   --link_unresolved-font-color: var(--important-color);
   --abstract-background: var(--color-smoke-70);
   --abstract-font-color: var(--color-jet-20);
   --abstract-border-color: var(--panel-border-color);
-  --admonition-background: var(--panel-background);
+  --admonition-background: var(--color-white-15);
   --admonition-label-font-weight: var(--body-font-weight-bold);
-  --caption-font-color: var(--color-gray-70);
+  --caption-font-color: var(--color-white-50);
   --caption-font-style: italic;
   --caption-font-weight: var(--body-font-weight-bold);
-  --code-background: var(--panel-background);
-  --code-font-color: var(--body-font-color);
+  --code-background: var(--color-black-15);
+  --code-font-color: var(--color-white);
   --example-background: var(--color-white);
   --example-border-color: var(--color-gray-70);
   --kbd-background: var(--panel-background);
   --kbd-border-color: var(--color-gray-10);
-  --pre-background: var(--panel-background);
+  --pre-background: rgb(40, 44, 52);
   --pre-border-color: var(--panel-border-color);
   --pre-annotation-font-color: var(--color-gray-50);
   --quote-background: var(--panel-background);
   --quote-border-color: var(--color-gray-70);
-  --quote-font-color: var(--color-gray-70);
+  --quote-font-color: var(--color-white-50);
   --quote-attribution-font-color: var(--color-gray-40);
-  --sidebar-background: var(--color-smoke-90);
+  --sidebar-background: var(--color-black-15);
   --table-border-color: var(--panel-border-color);
   --table-stripe-background: var(--panel-background);
   --table-footer-background:
     linear-gradient(
       to bottom,
-      var(--color-smoke-70) 0%,
-      var(--color-white) 100%
+      var(--color-black-15) 0%,
+      var(--color-black-15) 100%
     );
   /* toc */
   --toc-font-color: var(--nav-muted-color);
-  --toc-heading-font-color: var(--doc-font-color);
+  --toc-heading-font-color: var(--color-white);
   --toc-border-color: var(--panel-border-color);
   --toc-line-height: 1.2;
   /* footer */

docs/ui/src/img/home-o.svg

@@ -1,2 +1 @@
-{{> footer-content}}
 {{> footer-scripts}}