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 @@
-
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 @@
-
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)
-
-
+
+
+
+ ![]()
+ ![]()
+
+
+
-
+
{{ title }}
@@ -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}'
- }
}
})
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: {