From 3e79992ca8b16776a32d325a3fcccd43ecaf24fe Mon Sep 17 00:00:00 2001
From: Serhii Bedrytskyi <bedrytskyi@gmail.com>
Date: Mon, 10 Apr 2023 23:35:33 +0300
Subject: [PATCH] feat: add support for static light/dark images for logo
 (#874)

---
 .docs/public/logo-dark.svg       | 15 -----------
 .docs/public/logo-light.svg      | 15 -----------
 assets/css/main.css              | 14 -----------
 components/app/AppHeaderLogo.vue | 43 ++++++++++++++++++++++++--------
 components/app/Logo.vue          |  6 +----
 tokens.config.ts                 | 21 +++++++++++++++-
 6 files changed, 54 insertions(+), 60 deletions(-)
 delete mode 100644 .docs/public/logo-dark.svg
 delete mode 100644 .docs/public/logo-light.svg

diff --git a/.docs/public/logo-dark.svg b/.docs/public/logo-dark.svg
deleted file mode 100644
index 7d2502b4b..000000000
--- a/.docs/public/logo-dark.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<svg width="707" height="169" viewBox="0 0 707 169" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M196.387 36.674h45.549c10.55 0 19.907 1.972 28.072 5.917s14.495 9.54 18.99 16.788c4.495 7.248 6.743 15.734 6.743 25.458 0 9.724-2.248 18.21-6.743 25.458-4.495 7.247-10.825 12.843-18.99 16.788-8.165 3.945-17.522 5.917-28.072 5.917h-45.549V36.674zm44.448 74.584c8.257 0 14.862-2.34 19.816-7.018 5.045-4.679 7.568-11.146 7.568-19.403 0-8.257-2.523-14.724-7.568-19.403-4.954-4.679-11.559-7.018-19.816-7.018h-17.201v52.842h17.201zm105.432 22.98c-7.981 0-15.183-1.651-21.605-4.953-6.421-3.303-11.467-7.89-15.136-13.761-3.578-5.872-5.367-12.523-5.367-19.954 0-7.339 1.789-13.944 5.367-19.815 3.669-5.871 8.669-10.413 14.999-13.623 6.422-3.303 13.669-4.954 21.742-4.954s15.321 1.65 21.742 4.954c6.422 3.21 11.422 7.752 15 13.623 3.577 5.78 5.366 12.385 5.366 19.815 0 7.431-1.789 14.082-5.366 19.954-3.578 5.871-8.578 10.458-15 13.761-6.421 3.302-13.669 4.953-21.742 4.953zm0-20.778c4.587 0 8.348-1.56 11.284-4.679 2.936-3.211 4.403-7.614 4.403-13.21 0-5.505-1.467-9.817-4.403-12.936-2.936-3.119-6.697-4.678-11.284-4.678-4.587 0-8.348 1.56-11.284 4.678-2.936 3.12-4.403 7.431-4.403 12.935 0 5.597 1.467 10 4.403 13.211 2.936 3.119 6.697 4.679 11.284 4.679zm92.338 20.778c-8.257 0-15.642-1.651-22.155-4.953-6.514-3.303-11.605-7.89-15.275-13.761-3.578-5.872-5.367-12.523-5.367-19.954 0-7.43 1.789-14.036 5.367-19.815 3.67-5.871 8.761-10.413 15.275-13.623 6.513-3.303 13.898-4.954 22.155-4.954 8.44 0 15.733 1.834 21.879 5.504 6.147 3.578 10.505 8.578 13.073 15l-20.228 10.32c-3.395-6.697-8.348-10.045-14.862-10.045-4.679 0-8.578 1.56-11.697 4.678-3.027 3.12-4.541 7.431-4.541 12.935 0 5.597 1.514 10 4.541 13.211 3.119 3.119 7.018 4.679 11.697 4.679 6.514 0 11.467-3.349 14.862-10.046l20.228 10.321c-2.568 6.422-6.926 11.467-13.073 15.137-6.146 3.578-13.439 5.366-21.879 5.366zm123.234-75.822V133h-24.907v-7.981c-2.753 3.027-6.055 5.321-9.908 6.88-3.853 1.56-7.936 2.339-12.248 2.339-9.632 0-17.338-2.843-23.118-8.531-5.688-5.688-8.532-14.22-8.532-25.595V58.416h26.146v37.43c0 5.596 1.055 9.678 3.165 12.247 2.11 2.569 5.183 3.853 9.22 3.853 4.128 0 7.477-1.422 10.045-4.266 2.661-2.936 3.991-7.385 3.991-13.348V58.416h26.146zm43.95 75.822a82.948 82.948 0 01-18.44-2.064c-6.055-1.467-10.917-3.348-14.587-5.642l7.844-17.889c3.394 2.11 7.431 3.807 12.11 5.092 4.678 1.192 9.311 1.789 13.898 1.789 4.22 0 7.202-.413 8.945-1.239 1.835-.917 2.752-2.202 2.752-3.853 0-1.651-1.101-2.798-3.303-3.44-2.11-.734-5.504-1.422-10.183-2.064-5.963-.734-11.054-1.697-15.274-2.89-4.129-1.193-7.706-3.394-10.734-6.605-3.027-3.211-4.541-7.706-4.541-13.486 0-4.77 1.422-8.99 4.266-12.66 2.844-3.761 6.972-6.697 12.385-8.807 5.504-2.201 12.063-3.302 19.678-3.302 5.412 0 10.779.55 16.1 1.65 5.321 1.102 9.77 2.661 13.348 4.68l-7.844 17.751c-6.605-3.67-13.76-5.504-21.467-5.504-4.128 0-7.155.504-9.082 1.514-1.926.917-2.89 2.155-2.89 3.715 0 1.743 1.055 2.981 3.165 3.715 2.11.642 5.597 1.33 10.459 2.064 6.146.918 11.238 1.973 15.274 3.165 4.037 1.193 7.523 3.395 10.459 6.606 3.027 3.119 4.541 7.522 4.541 13.21 0 4.679-1.422 8.899-4.266 12.66-2.844 3.67-7.064 6.559-12.66 8.669-5.505 2.11-12.156 3.165-19.953 3.165zm58.583-.275c-3.119 0-5.78-1.055-7.982-3.165-2.201-2.201-3.302-4.954-3.302-8.256 0-3.395 1.055-6.147 3.165-8.257 2.202-2.11 4.908-3.165 8.119-3.165 3.211 0 5.871 1.055 7.981 3.165 2.202 2.11 3.303 4.862 3.303 8.257 0 3.302-1.101 6.055-3.303 8.256-2.202 2.11-4.862 3.165-7.981 3.165z"
-      fill="#000"
-    />
-    <mask id="a" fill="#000">
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M0 73.719C0 33.005 33.005 0 73.719 0c40.714 0 73.719 33.005 73.719 73.719 0 40.714-33.005 73.719-73.719 73.719H0V73.719zm65.749-15.94c8.803 0 15.94 7.137 15.94 15.94s-7.137 15.939-15.94 15.939-15.94-7.136-15.94-15.94c0-8.802 7.137-15.939 15.94-15.939zm63.758 15.94c0-8.803-7.137-15.94-15.94-15.94-8.802 0-15.939 7.137-15.939 15.94s7.137 15.939 15.939 15.939c8.803 0 15.94-7.136 15.94-15.94z" />
-    </mask>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M0 73.719C0 33.005 33.005 0 73.719 0c40.714 0 73.719 33.005 73.719 73.719 0 40.714-33.005 73.719-73.719 73.719H0V73.719zm65.749-15.94c8.803 0 15.94 7.137 15.94 15.94s-7.137 15.939-15.94 15.939-15.94-7.136-15.94-15.94c0-8.802 7.137-15.939 15.94-15.939zm63.758 15.94c0-8.803-7.137-15.94-15.94-15.94-8.802 0-15.939 7.137-15.939 15.94s7.137 15.939 15.939 15.939c8.803 0 15.94-7.136 15.94-15.94z" fill="currentColor" />
-    <path
-      d="M0 147.438h-.527v.526H0v-.526zM73.719-.527C32.714-.527-.527 32.714-.527 73.72H.527C.527 33.296 33.296.527 73.719.527V-.527zm74.245 74.246c0-41.005-33.24-74.246-74.245-74.246V.527c40.423 0 73.192 32.769 73.192 73.192h1.053zm-74.245 74.245c41.005 0 74.245-33.24 74.245-74.245h-1.053c0 40.423-32.769 73.192-73.192 73.192v1.053zm-73.719 0h73.719v-1.053H0v1.053zm-.527-74.245v73.719H.527V73.719H-.527zm82.742 0c0-9.094-7.372-16.466-16.466-16.466v1.053c8.512 0 15.413 6.9 15.413 15.413h1.053zM65.749 90.184c9.094 0 16.466-7.372 16.466-16.465h-1.053c0 8.512-6.9 15.412-15.413 15.412v1.053zM49.283 73.72c0 9.093 7.372 16.465 16.466 16.465v-1.053c-8.512 0-15.413-6.9-15.413-15.412h-1.053zM65.75 57.253c-9.094 0-16.466 7.372-16.466 16.466h1.053c0-8.513 6.9-15.413 15.413-15.413v-1.053zm47.818 1.053c8.513 0 15.413 6.9 15.413 15.413h1.053c0-9.094-7.372-16.466-16.466-16.466v1.053zM98.155 73.719c0-8.513 6.9-15.413 15.412-15.413v-1.053c-9.093 0-16.465 7.372-16.465 16.466h1.053zm15.412 15.412c-8.512 0-15.412-6.9-15.412-15.412h-1.053c0 9.093 7.372 16.465 16.465 16.465v-1.053zM128.98 73.72c0 8.512-6.9 15.412-15.413 15.412v1.053c9.094 0 16.466-7.372 16.466-16.465h-1.053z"
-      fill="#000"
-      mask="url(#a)"
-    />
-  </svg>
diff --git a/.docs/public/logo-light.svg b/.docs/public/logo-light.svg
deleted file mode 100644
index d26a1f1a4..000000000
--- a/.docs/public/logo-light.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<svg width="707" height="169" viewBox="0 0 707 169" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M196.387 36.674h45.549c10.55 0 19.907 1.972 28.072 5.917s14.495 9.54 18.99 16.788c4.495 7.248 6.743 15.734 6.743 25.458 0 9.724-2.248 18.21-6.743 25.458-4.495 7.247-10.825 12.843-18.99 16.788-8.165 3.945-17.522 5.917-28.072 5.917h-45.549V36.674zm44.448 74.584c8.257 0 14.862-2.34 19.816-7.018 5.045-4.679 7.568-11.146 7.568-19.403 0-8.257-2.523-14.724-7.568-19.403-4.954-4.679-11.559-7.018-19.816-7.018h-17.201v52.842h17.201zm105.432 22.98c-7.981 0-15.183-1.651-21.605-4.953-6.421-3.303-11.467-7.89-15.136-13.761-3.578-5.872-5.367-12.523-5.367-19.954 0-7.339 1.789-13.944 5.367-19.815 3.669-5.871 8.669-10.413 14.999-13.623 6.422-3.303 13.669-4.954 21.742-4.954s15.321 1.65 21.742 4.954c6.422 3.21 11.422 7.752 15 13.623 3.577 5.78 5.366 12.385 5.366 19.815 0 7.431-1.789 14.082-5.366 19.954-3.578 5.871-8.578 10.458-15 13.761-6.421 3.302-13.669 4.953-21.742 4.953zm0-20.778c4.587 0 8.348-1.56 11.284-4.679 2.936-3.211 4.403-7.614 4.403-13.21 0-5.505-1.467-9.817-4.403-12.936-2.936-3.119-6.697-4.678-11.284-4.678-4.587 0-8.348 1.56-11.284 4.678-2.936 3.12-4.403 7.431-4.403 12.935 0 5.597 1.467 10 4.403 13.211 2.936 3.119 6.697 4.679 11.284 4.679zm92.338 20.778c-8.257 0-15.642-1.651-22.155-4.953-6.514-3.303-11.605-7.89-15.275-13.761-3.578-5.872-5.367-12.523-5.367-19.954 0-7.43 1.789-14.036 5.367-19.815 3.67-5.871 8.761-10.413 15.275-13.623 6.513-3.303 13.898-4.954 22.155-4.954 8.44 0 15.733 1.834 21.879 5.504 6.147 3.578 10.505 8.578 13.073 15l-20.228 10.32c-3.395-6.697-8.348-10.045-14.862-10.045-4.679 0-8.578 1.56-11.697 4.678-3.027 3.12-4.541 7.431-4.541 12.935 0 5.597 1.514 10 4.541 13.211 3.119 3.119 7.018 4.679 11.697 4.679 6.514 0 11.467-3.349 14.862-10.046l20.228 10.321c-2.568 6.422-6.926 11.467-13.073 15.137-6.146 3.578-13.439 5.366-21.879 5.366zm123.234-75.822V133h-24.907v-7.981c-2.753 3.027-6.055 5.321-9.908 6.88-3.853 1.56-7.936 2.339-12.248 2.339-9.632 0-17.338-2.843-23.118-8.531-5.688-5.688-8.532-14.22-8.532-25.595V58.416h26.146v37.43c0 5.596 1.055 9.678 3.165 12.247 2.11 2.569 5.183 3.853 9.22 3.853 4.128 0 7.477-1.422 10.045-4.266 2.661-2.936 3.991-7.385 3.991-13.348V58.416h26.146zm43.95 75.822a82.948 82.948 0 01-18.44-2.064c-6.055-1.467-10.917-3.348-14.587-5.642l7.844-17.889c3.394 2.11 7.431 3.807 12.11 5.092 4.678 1.192 9.311 1.789 13.898 1.789 4.22 0 7.202-.413 8.945-1.239 1.835-.917 2.752-2.202 2.752-3.853 0-1.651-1.101-2.798-3.303-3.44-2.11-.734-5.504-1.422-10.183-2.064-5.963-.734-11.054-1.697-15.274-2.89-4.129-1.193-7.706-3.394-10.734-6.605-3.027-3.211-4.541-7.706-4.541-13.486 0-4.77 1.422-8.99 4.266-12.66 2.844-3.761 6.972-6.697 12.385-8.807 5.504-2.201 12.063-3.302 19.678-3.302 5.412 0 10.779.55 16.1 1.65 5.321 1.102 9.77 2.661 13.348 4.68l-7.844 17.751c-6.605-3.67-13.76-5.504-21.467-5.504-4.128 0-7.155.504-9.082 1.514-1.926.917-2.89 2.155-2.89 3.715 0 1.743 1.055 2.981 3.165 3.715 2.11.642 5.597 1.33 10.459 2.064 6.146.918 11.238 1.973 15.274 3.165 4.037 1.193 7.523 3.395 10.459 6.606 3.027 3.119 4.541 7.522 4.541 13.21 0 4.679-1.422 8.899-4.266 12.66-2.844 3.67-7.064 6.559-12.66 8.669-5.505 2.11-12.156 3.165-19.953 3.165zm58.583-.275c-3.119 0-5.78-1.055-7.982-3.165-2.201-2.201-3.302-4.954-3.302-8.256 0-3.395 1.055-6.147 3.165-8.257 2.202-2.11 4.908-3.165 8.119-3.165 3.211 0 5.871 1.055 7.981 3.165 2.202 2.11 3.303 4.862 3.303 8.257 0 3.302-1.101 6.055-3.303 8.256-2.202 2.11-4.862 3.165-7.981 3.165z"
-      fill="#fff"
-    />
-    <mask id="a" fill="#fff">
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M0 73.719C0 33.005 33.005 0 73.719 0c40.714 0 73.719 33.005 73.719 73.719 0 40.714-33.005 73.719-73.719 73.719H0V73.719zm65.749-15.94c8.803 0 15.94 7.137 15.94 15.94s-7.137 15.939-15.94 15.939-15.94-7.136-15.94-15.94c0-8.802 7.137-15.939 15.94-15.939zm63.758 15.94c0-8.803-7.137-15.94-15.94-15.94-8.802 0-15.939 7.137-15.939 15.94s7.137 15.939 15.939 15.939c8.803 0 15.94-7.136 15.94-15.94z" />
-    </mask>
-    <path fill="#fff" fill-rule="evenodd" clip-rule="evenodd" d="M0 73.719C0 33.005 33.005 0 73.719 0c40.714 0 73.719 33.005 73.719 73.719 0 40.714-33.005 73.719-73.719 73.719H0V73.719zm65.749-15.94c8.803 0 15.94 7.137 15.94 15.94s-7.137 15.939-15.94 15.939-15.94-7.136-15.94-15.94c0-8.802 7.137-15.939 15.94-15.939zm63.758 15.94c0-8.803-7.137-15.94-15.94-15.94-8.802 0-15.939 7.137-15.939 15.94s7.137 15.939 15.939 15.939c8.803 0 15.94-7.136 15.94-15.94z" />
-    <path
-      d="M0 147.438h-.527v.526H0v-.526zM73.719-.527C32.714-.527-.527 32.714-.527 73.72H.527C.527 33.296 33.296.527 73.719.527V-.527zm74.245 74.246c0-41.005-33.24-74.246-74.245-74.246V.527c40.423 0 73.192 32.769 73.192 73.192h1.053zm-74.245 74.245c41.005 0 74.245-33.24 74.245-74.245h-1.053c0 40.423-32.769 73.192-73.192 73.192v1.053zm-73.719 0h73.719v-1.053H0v1.053zm-.527-74.245v73.719H.527V73.719H-.527zm82.742 0c0-9.094-7.372-16.466-16.466-16.466v1.053c8.512 0 15.413 6.9 15.413 15.413h1.053zM65.749 90.184c9.094 0 16.466-7.372 16.466-16.465h-1.053c0 8.512-6.9 15.412-15.413 15.412v1.053zM49.283 73.72c0 9.093 7.372 16.465 16.466 16.465v-1.053c-8.512 0-15.413-6.9-15.413-15.412h-1.053zM65.75 57.253c-9.094 0-16.466 7.372-16.466 16.466h1.053c0-8.513 6.9-15.413 15.413-15.413v-1.053zm47.818 1.053c8.513 0 15.413 6.9 15.413 15.413h1.053c0-9.094-7.372-16.466-16.466-16.466v1.053zM98.155 73.719c0-8.513 6.9-15.413 15.412-15.413v-1.053c-9.093 0-16.465 7.372-16.465 16.466h1.053zm15.412 15.412c-8.512 0-15.412-6.9-15.412-15.412h-1.053c0 9.093 7.372 16.465 16.465 16.465v-1.053zM128.98 73.72c0 8.512-6.9 15.412-15.413 15.412v1.053c9.094 0 16.466-7.372 16.466-16.465h-1.053z"
-      fill="#fff"
-      mask="url(#a)"
-    />
-  </svg>
diff --git a/assets/css/main.css b/assets/css/main.css
index 1ddeb4d09..00b6a166e 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -1,17 +1,3 @@
-.light-img {
-  display: block;
-  @dark {
-    display: hidden;
-  }
-}
-
-.dark-img {
-  display: hidden;
-  @dark {
-    display: block;
-  }
-}
-
 /* Base */
 
 :root {
diff --git a/components/app/AppHeaderLogo.vue b/components/app/AppHeaderLogo.vue
index 9995a7383..51b3e62f2 100644
--- a/components/app/AppHeaderLogo.vue
+++ b/components/app/AppHeaderLogo.vue
@@ -7,11 +7,17 @@ const title = computed(() => config.value.header?.title || config.value.title)
 <template>
   <NuxtLink class="navbar-logo" to="/" :aria-label="title">
     <!-- Only Logo -->
-    <component :is="logo" v-if="logo && typeof logo === 'string'" />
-    <Logo v-else-if="logo" />
+    <span class="logo" v-if="logo">
+      <component :is="logo" v-if="typeof logo === 'string'" />
+      <template v-else-if="logo.light && logo.dark">
+        <img :src="logo.light" alt="" class="light-img">
+        <img :src="logo.dark" alt="" class="dark-img">
+      </template>
+      <Logo v-else-if="logo" />
+    </span>
 
     <!-- Only title -->
-    <span v-else>
+    <span class="title" v-else>
       {{ title }}
     </span>
   </NuxtLink>
@@ -24,15 +30,32 @@ css({
     alignItems: 'center',
     flex: 'none',
 
-    span: {
-      fontSize: '{fontSize.xl}',
-      fontWeight: '{fontWeight.bold}',
-      color: '{color.gray.900}',
-      '@dark': {
-        color: '{color.gray.100}',
+    '.logo': {
+      height: '{docus.header.logo.height}',
+      width: 'auto',
+      'img, svg': {
+        height: 'inherit',
+      },
+      '.light-img': {
+        display: 'block',
+        '@dark': {
+          display: 'none'
+        }
       },
+      '.dark-img': {
+        display: 'none',
+        '@dark': {
+          display: 'block'
+        }
+      },
+    },
+
+    '.title': {
+      fontSize: '{docus.header.title.fontSize}',
+      fontWeight: '{docus.header.title.fontWeight}',
+      color: '{docus.header.title.color.static}',
       '&:hover': {
-        color: '{color.gray.500}',
+        color: '{docus.header.title.color.hover}',
       }
     }
   }
diff --git a/components/app/Logo.vue b/components/app/Logo.vue
index 01af0aa48..ee124c997 100644
--- a/components/app/Logo.vue
+++ b/components/app/Logo.vue
@@ -55,14 +55,10 @@
 css({
   svg: {
     color: '{color.gray.900}',
-    height: '{space.6}',
-    width: 'auto',
+    height: 'inherit',
     '@dark': {
       color: '{color.gray.100}'
     },
-    '@sm': {
-      height: '{space.7}'
-    }
   }
 })
 </style>
diff --git a/tokens.config.ts b/tokens.config.ts
index 995e28afe..6944496c0 100644
--- a/tokens.config.ts
+++ b/tokens.config.ts
@@ -108,7 +108,26 @@ export default defineTheme({
       },
       fontFamily: '{font.sans}'
     },
-    header: { height: '64px' },
+    header: {
+      height: '64px',
+      logo: {
+        height: {
+          initial: '{space.6}',
+          sm: '{space.7}'
+        }
+      },
+      title: {
+        fontSize: '{fontSize.2xl}', 
+        fontWeight: '{fontWeight.bold}', 
+        color: {
+          static: {
+            initial: '{color.gray.900}', 
+            dark: '{color.gray.100}', 
+          },
+          hover: '{color.primary.500}', 
+        }
+      }
+    },
     footer: { height: { initial: '145px', sm: '100px' }, padding: '{space.4} 0' },
     readableLine: '78ch',
     loadingBar: {