From 69d9c0875b1b6cef75f2412087930fe9ddac867b Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Sun, 31 Dec 2023 11:35:02 +0300 Subject: [PATCH] Unified link colors for accessibility and easier maintenance --- api-generator/build-apidoc.js | 8 +- assets/styles/layout/_doc.scss | 37 +- assets/styles/layout/_footer.scss | 2 +- assets/styles/layout/_mixins.scss | 12 + assets/styles/layout/_sidebar.scss | 12 +- .../styles/layout/variables/main/_dark.scss | 2 + .../styles/layout/variables/main/_light.scss | 2 + components/doc/DocApiTable.vue | 2 +- doc/common/apidoc/index.json | 406 +++++++++--------- doc/introduction/OverviewDoc.vue | 9 +- doc/introduction/PassThroughDoc.vue | 2 +- doc/introduction/SupportDoc.vue | 7 +- pages/bootstrap/index.vue | 2 +- pages/bulma/index.vue | 2 +- pages/icons/index.vue | 2 +- pages/introduction/index.vue | 2 +- pages/roadmap/index.vue | 4 +- pages/support/index.vue | 6 +- pages/team/index.vue | 7 +- pages/uikit/index.vue | 8 +- pages/unocss/index.vue | 5 +- 21 files changed, 272 insertions(+), 267 deletions(-) diff --git a/api-generator/build-apidoc.js b/api-generator/build-apidoc.js index 3a9d1413e..7f4257db1 100644 --- a/api-generator/build-apidoc.js +++ b/api-generator/build-apidoc.js @@ -395,18 +395,18 @@ if (project) { child.type?.declaration?.signatures[0]?.parameters.map((param, index) => { if (index !== 0) functionParameters += `, `; - functionParameters += `${param.name}: ${param.type?.name}`; + functionParameters += `${param.name}: ${param.type?.name}`; }); if (child.type?.declaration?.signatures[0]?.comment?.getTag('@deprecated')?.content[0]?.text) { - type += `\t ${child.name}: (${functionParameters}) ⇒ ${child.type?.declaration?.signatures[0]?.type?.name}, // ${child.type?.declaration?.signatures[0]?.comment.summary[0]?.text}\n`; + type += `\t ${child.name}: (${functionParameters}) ⇒ ${child.type?.declaration?.signatures[0]?.type?.name}, // ${child.type?.declaration?.signatures[0]?.comment.summary[0]?.text}\n`; } else { - type += `\t ${child.name}: (${functionParameters}) ⇒ ${child.type?.declaration?.signatures[0]?.type?.name}, // ${child.type?.declaration?.signatures[0]?.comment.summary[0]?.text}\n`; + type += `\t ${child.name}: (${functionParameters}) ⇒ ${child.type?.declaration?.signatures[0]?.type?.name}, // ${child.type?.declaration?.signatures[0]?.comment.summary[0]?.text}\n`; } } else { const childType = child.type.elementType ? child.type.elementType.name : child.type.name; - type += ` \t ${child.name}: ${childType}, // ${child.comment?.summary[0]?.text}\n `; + type += ` \t ${child.name}: ${childType}, // ${child.comment?.summary[0]?.text}\n `; } } }); diff --git a/assets/styles/layout/_doc.scss b/assets/styles/layout/_doc.scss index 7705eca21..a7c30bcff 100644 --- a/assets/styles/layout/_doc.scss +++ b/assets/styles/layout/_doc.scss @@ -50,8 +50,8 @@ &.doc-tabmenu-active { button { - border-bottom-color: var(--primary-color); - color: var(--primary-color); + border-bottom-color: var(--primary-color-default); + color: var(--primary-color-default); } } } @@ -80,16 +80,24 @@ font-size: 1.125rem; color: var(--surface-900); margin: 0; + + a { + @include doc-link(); + } } } +.doc-link { + @include doc-link(); +} + .doc-section-label { display: flex; align-items: center; scroll-margin-top: 6.5rem; > a { - color: var(--primary-color); + color: var(--primary-color-default); opacity: 0.7; margin-left: 1rem; display: none; @@ -125,15 +133,7 @@ } a { - color: var(--primary-color); - font-weight: 500; - transition: all .2s; - border-radius: var(--border-radius); - @include focus-visible(); - - &:hover { - text-decoration: underline; - } + @include doc-link(); } } @@ -197,10 +197,10 @@ &.active-navbar-item { > .navbar-item-content { - border-color: var(--primary-color); + border-color: var(--primary-color-default); .px-link { - color: var(--primary-color); + color: var(--primary-color-default); } } } @@ -312,14 +312,14 @@ scroll-margin-top: 6.5rem; &:first-child { - color: var(--primary-color); + color: var(--primary-color-default); font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace; font-weight: 600; } .doc-option-type { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace; - color: var(--primary-500); + color: var(--primary-color-default); font-weight: 500; .doc-option-type-options-container { @@ -355,7 +355,7 @@ position: absolute; top: 0; right: -1.5rem; - color: var(--primary-color); + color: var(--primary-color-default); opacity: 0.7; display: none; transition: opacity 0.3s, colors 0.3s; @@ -389,12 +389,11 @@ .doc-option-parameter-name { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace; - color: var(--primary-700); } .doc-option-parameter-type { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace; - color: var(--primary-500); + color: var(--primary-color-default); } .doc-option-params { diff --git a/assets/styles/layout/_footer.scss b/assets/styles/layout/_footer.scss index 0eb285db1..141453f6e 100644 --- a/assets/styles/layout/_footer.scss +++ b/assets/styles/layout/_footer.scss @@ -10,7 +10,7 @@ border-top: 1px solid var(--surface-border); a { - color: var(--primary-color); + color: var(--primary-color-default); font-weight: 700; transition: all .3s; border-radius: var(--border-radius); diff --git a/assets/styles/layout/_mixins.scss b/assets/styles/layout/_mixins.scss index 2c088ffad..44bd391be 100644 --- a/assets/styles/layout/_mixins.scss +++ b/assets/styles/layout/_mixins.scss @@ -4,4 +4,16 @@ outline-offset: 0; box-shadow: $type var(--focus-ring); } +} + +@mixin doc-link() { + color: var(--primary-color-default); + font-weight: 500; + transition: all .2s; + border-radius: var(--border-radius); + @include focus-visible(); + + &:hover { + text-decoration: underline; + } } \ No newline at end of file diff --git a/assets/styles/layout/_sidebar.scss b/assets/styles/layout/_sidebar.scss index d512bb175..14c8ddd74 100644 --- a/assets/styles/layout/_sidebar.scss +++ b/assets/styles/layout/_sidebar.scss @@ -67,7 +67,7 @@ &:hover { .menu-icon { i { - color: var(--primary-color); + color: var(--primary-color-default); } } @@ -77,11 +77,11 @@ } &.router-link-active { - color: var(--primary-color); + color: var(--primary-color-default); > .menu-icon { i { - color: var(--primary-color); + color: var(--primary-color-default); } } } @@ -117,8 +117,8 @@ } &.router-link-active { - color: var(--primary-color); - border-left-color: var(--primary-color); + color: var(--primary-color-default); + border-left-color: var(--primary-color-default); } } @@ -127,8 +127,6 @@ padding: 0; } - - &:has(.menu-child-category) { margin-top: 1rem; } diff --git a/assets/styles/layout/variables/main/_dark.scss b/assets/styles/layout/variables/main/_dark.scss index 45fb4f58f..6ee9f4868 100644 --- a/assets/styles/layout/variables/main/_dark.scss +++ b/assets/styles/layout/variables/main/_dark.scss @@ -1,4 +1,6 @@ .layout-dark { + --primary-color-default:var(--primary-400); + --primary-color-inverse-default:var(--gray-900); --topbar-sticky-bg:rgba(0,0,0,.3); --card-border: 0 none; --card-bg: var(--surface-card); diff --git a/assets/styles/layout/variables/main/_light.scss b/assets/styles/layout/variables/main/_light.scss index a978140db..6b52456bf 100644 --- a/assets/styles/layout/variables/main/_light.scss +++ b/assets/styles/layout/variables/main/_light.scss @@ -1,4 +1,6 @@ .layout-light { + --primary-color-default:var(--primary-600); + --primary-color-inverse-default:var(--surface-0); --topbar-sticky-bg:rgba(255,255,255,.7); --card-border: 1px solid var(--surface-border); --card-bg: var(--surface-card); diff --git a/components/doc/DocApiTable.vue b/components/doc/DocApiTable.vue index b0e7d61f9..69e652684 100644 --- a/components/doc/DocApiTable.vue +++ b/components/doc/DocApiTable.vue @@ -43,7 +43,7 @@