diff --git a/docs/.vuepress/components/Poi.vue b/docs/.vuepress/components/Poi.vue index ecb7e9856..76a3faf7f 100644 --- a/docs/.vuepress/components/Poi.vue +++ b/docs/.vuepress/components/Poi.vue @@ -76,6 +76,6 @@ export default { } .active { - background-color: theme("colors.blue"); + background-color: theme("colors.blue.default"); } diff --git a/docs/.vuepress/components/See.vue b/docs/.vuepress/components/See.vue index 3c3fa0189..22e4c64ff 100644 --- a/docs/.vuepress/components/See.vue +++ b/docs/.vuepress/components/See.vue @@ -79,7 +79,8 @@ export default { } .see-title { - @apply text-lg font-medium text-blue; + color: var(--link-color-default); + @apply text-lg font-medium; } .see:hover .see-title { diff --git a/docs/.vuepress/sets/craft-cms.js b/docs/.vuepress/sets/craft-cms.js index 85e046195..3db5d5338 100644 --- a/docs/.vuepress/sets/craft-cms.js +++ b/docs/.vuepress/sets/craft-cms.js @@ -203,7 +203,7 @@ module.exports = { "update", "deploy", "upgrade", - "configure", + ["configure", 'Configuration'], ] }, { diff --git a/docs/.vuepress/theme/components/ColorModeSwitch.vue b/docs/.vuepress/theme/components/ColorModeSwitch.vue index 5dd787e2a..145deece6 100644 --- a/docs/.vuepress/theme/components/ColorModeSwitch.vue +++ b/docs/.vuepress/theme/components/ColorModeSwitch.vue @@ -15,6 +15,8 @@ diff --git a/docs/.vuepress/theme/styles/base.pcss b/docs/.vuepress/theme/styles/base.pcss index d4cceaa47..864a47e5b 100644 --- a/docs/.vuepress/theme/styles/base.pcss +++ b/docs/.vuepress/theme/styles/base.pcss @@ -1,13 +1,17 @@ :root { --text-color: theme("colors.slate"); + --text-color-muted: #6D7480; + --ui-component-color: #8491A4; --bg-color: theme("colors.white"); --sidebar-bg-color: theme("colors.softer"); --search-bg-color: theme("colors.soft"); --dl-color: theme("colors.soft-gray"); --medium-zoom-overlay-color: theme("colors.soft"); --heading-color: theme("colors.slate"); + --link-color-default: theme("colors.blue.default"); + --link-underline-color: #5E8BF7; --sidebar-link-color: theme("colors.slate"); - --sidebar-active-link-color: theme("colors.blue"); + --sidebar-active-link-color: theme("colors.blue.default"); --hamburger-color: theme("colors.black"); --tooltip-bg-color: theme("colors.white"); --border-color: #e2e8f0; @@ -50,7 +54,8 @@ body { } a { - @apply text-blue no-underline; + @apply no-underline; + color: var(--link-color-default); } img { diff --git a/docs/.vuepress/theme/styles/color-mode.pcss b/docs/.vuepress/theme/styles/color-mode.pcss index a3161ddf9..e39a7294a 100644 --- a/docs/.vuepress/theme/styles/color-mode.pcss +++ b/docs/.vuepress/theme/styles/color-mode.pcss @@ -1,38 +1,46 @@ /* initial load, no class on html element */ @media (prefers-color-scheme: light) { html:not([class]) { - --bg-color: theme("colors.white"); + --bg-color: theme("colors.white") } } @media (prefers-color-scheme: dark) { html:not([class]) { --text-color: theme("colors.white"); + --text-color-muted: #818EA2; + --ui-component-color: theme("colors.gray.600"); --bg-color: theme("colors.gray.900"); --sidebar-bg-color: rgba(0, 0, 0, 0.1); --search-bg-color: theme("colors.slate"); --dl-color: theme("colors.soft-gray"); --heading-color: theme("colors.gray.100"); - --sidebar-link-color: theme("colors.gray.500"); --border-color: theme("colors.slate"); --doc-set-color: theme("colors.gray.200"); --code-highlight-color: rgba(45, 55, 72, 0.25); --code-bg-color: theme("colors.cinder"); --custom-block-bg-color: theme("colors.slate"); --custom-block-border-color: transparent; + + /* Links */ + --link-color-default: theme("colors.blue.lighter"); + --link-underline-color: var(--link-color-default); + --sidebar-link-color: theme("colors.gray.400"); + --sidebar-active-link-color: var(--link-color-default); } } /* JS-applied, which may differ from browser setting */ .theme-dark { --text-color: theme("colors.white"); + --text-color-muted: #818EA2; + --ui-component-color: theme("colors.gray.600"); --bg-color: theme("colors.gray.900"); --sidebar-bg-color: rgba(0, 0, 0, 0.1); --search-bg-color: theme("colors.slate"); --dl-color: rgba(0, 0, 0, 0.2); --medium-zoom-overlay-color: rgba(23, 29, 40, 1); --heading-color: theme("colors.gray.100"); - --sidebar-link-color: theme("colors.gray.400"); --hamburger-color: theme("colors.white"); --tooltip-bg-color: theme("colors.gray.800"); --border-color: theme("colors.slate"); @@ -42,6 +50,12 @@ --custom-block-bg-color: theme("colors.slate"); --custom-block-border-color: transparent; + /* Links */ + --link-color-default: theme("colors.blue.lighter"); + --link-underline-color: var(--link-color-default); + --sidebar-link-color: theme("colors.gray.400"); + --sidebar-active-link-color: var(--link-color-default); + .link-panel { background-color: var(--border-color); border-color: rgba(255, 255, 255, 0.05); diff --git a/docs/.vuepress/theme/styles/typography.pcss b/docs/.vuepress/theme/styles/typography.pcss index 3ff250382..5969c6d9a 100644 --- a/docs/.vuepress/theme/styles/typography.pcss +++ b/docs/.vuepress/theme/styles/typography.pcss @@ -98,8 +98,12 @@ @apply text-base mb-2; } - a:hover { + p a, + li a { @apply underline; + text-decoration-color: var(--link-underline-color); + text-underline-offset: .15em; + text-decoration-thickness: .075em; } ::selection { diff --git a/docs/5.x/README.md b/docs/5.x/README.md index 9630a6345..ed46f0703 100644 --- a/docs/5.x/README.md +++ b/docs/5.x/README.md @@ -1,5 +1,4 @@ --- -title: Craft CMS 5.x description: Official documentation for Craft CMS 5.x --- diff --git a/docs/5.x/configure.md b/docs/5.x/configure.md index f2051895e..1b2f3f8df 100644 --- a/docs/5.x/configure.md +++ b/docs/5.x/configure.md @@ -1,5 +1,4 @@ --- -title: Configuration description: Set up Craft to work with your team and infrastructure. sidebarDepth: 2 related: diff --git a/tailwind.config.js b/tailwind.config.js index 4ddf35a48..8d6255d91 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -17,7 +17,10 @@ module.exports = { soft: "#f1f5fd", "soft-gray": "#f1f5f8", softer: "#fafbfe", - blue: "#4a7cf6", + blue: { + "lighter": "#86A7F9", + "default": "#2E68F5", + }, red: "#da5a47", cinder: "#131119", green: "#27AB83",