From 16a9b02c6762e0bb977c0c0265a50ad0a7b59c11 Mon Sep 17 00:00:00 2001 From: Guadalupe Camacho Date: Fri, 7 Aug 2026 15:40:45 -0700 Subject: [PATCH 1/6] Update red color for light and dark modes, remove hover opacity effect --- docs/.vuepress/components/Generator.vue | 23 --------------------- docs/.vuepress/theme/styles/base.pcss | 1 + docs/.vuepress/theme/styles/color-mode.pcss | 2 ++ tailwind.config.js | 2 +- 4 files changed, 4 insertions(+), 24 deletions(-) diff --git a/docs/.vuepress/components/Generator.vue b/docs/.vuepress/components/Generator.vue index fafcf9289..ac1e46edb 100644 --- a/docs/.vuepress/components/Generator.vue +++ b/docs/.vuepress/components/Generator.vue @@ -120,33 +120,10 @@ export default { font-size: 0.8rem; } - .executable { - @apply opacity-50 transition-opacity duration-200; - - .generator:hover & { - @apply opacity-100; - } - } - .make { @apply text-red; } - .component { - @apply opacity-50 transition-opacity duration-200 delay-100; - - .generator:hover & { - @apply opacity-100; - } - } - - .options { - @apply opacity-50 transition-opacity duration-200 delay-200; - - .generator:hover & { - @apply opacity-100; - } - } .copy { @apply absolute top-0 right-0 mt-4 mr-4 uppercase tracking-widest text-xs; } diff --git a/docs/.vuepress/theme/styles/base.pcss b/docs/.vuepress/theme/styles/base.pcss index 44d606aaf..c8ee4027a 100644 --- a/docs/.vuepress/theme/styles/base.pcss +++ b/docs/.vuepress/theme/styles/base.pcss @@ -30,6 +30,7 @@ --black: theme("colors.black"); --custom-focus-outline: 2px solid var(--link-color-default); --active-tab-border-color: (theme("colors.slate")); + --color-red: #C83D28; /* Custom button */ --button-background-color: theme("colors.blue.default"); diff --git a/docs/.vuepress/theme/styles/color-mode.pcss b/docs/.vuepress/theme/styles/color-mode.pcss index b3ca16832..96ecd1c39 100644 --- a/docs/.vuepress/theme/styles/color-mode.pcss +++ b/docs/.vuepress/theme/styles/color-mode.pcss @@ -22,6 +22,7 @@ --code-bg-color: theme("colors.cinder"); --custom-block-bg-color: theme("colors.slate"); --custom-block-border-color: transparent; + --color-red: #D8503B; /* Links */ --link-color-default: theme("colors.blue.lighter"); @@ -69,6 +70,7 @@ --code-bg-color: theme("colors.cinder"); --custom-block-bg-color: theme("colors.slate"); --custom-block-border-color: transparent; + --color-red: #D8503B; /* Links */ --link-color-default: theme("colors.blue.lighter"); diff --git a/tailwind.config.js b/tailwind.config.js index d5f6acb18..670ed33b4 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -22,7 +22,7 @@ module.exports = { "default": "#2963F5", "darker": "#1554F4", }, - red: "#da5a47", + red: "var(--color-red)", cinder: "#131119", green: "#27AB83", "light-slate": "#66778A", From 33b80849b5e0d1c9c79d69eccbbb17d7a9dd0336 Mon Sep 17 00:00:00 2001 From: Guadalupe Camacho Date: Mon, 10 Aug 2026 16:11:57 -0700 Subject: [PATCH 2/6] Add new util for applying tabindex if overflowing, import into browsershot component --- .../theme/global-components/BrowserShot.vue | 15 ++++++++++++++- .../theme/util/apply-tabindex-if-overflowing.js | 10 ++++++++++ docs/.vuepress/theme/util/index.js | 9 +++++---- 3 files changed, 29 insertions(+), 5 deletions(-) create mode 100644 docs/.vuepress/theme/util/apply-tabindex-if-overflowing.js diff --git a/docs/.vuepress/theme/global-components/BrowserShot.vue b/docs/.vuepress/theme/global-components/BrowserShot.vue index 3b68a7162..d0f460725 100644 --- a/docs/.vuepress/theme/global-components/BrowserShot.vue +++ b/docs/.vuepress/theme/global-components/BrowserShot.vue @@ -15,6 +15,7 @@
@@ -150,6 +151,7 @@ diff --git a/docs/.vuepress/theme/util/apply-tabindex-if-overflowing.js b/docs/.vuepress/theme/util/apply-tabindex-if-overflowing.js new file mode 100644 index 000000000..587f456a5 --- /dev/null +++ b/docs/.vuepress/theme/util/apply-tabindex-if-overflowing.js @@ -0,0 +1,10 @@ +export function applyTabindexIfOverflowing(el) { + if (!el) return; + const isOverflowing = el.scrollWidth > el.clientWidth || el.scrollHeight > +el.clientHeight; + if (isOverflowing) { + el.setAttribute('tabindex', '0'); + } else { + el.removeAttribute('tabindex'); + } +} diff --git a/docs/.vuepress/theme/util/index.js b/docs/.vuepress/theme/util/index.js index b09739a71..9339a043f 100644 --- a/docs/.vuepress/theme/util/index.js +++ b/docs/.vuepress/theme/util/index.js @@ -2,6 +2,7 @@ export const hashRE = /#.*$/; export const extRE = /\.(md|html)$/; export const endingSlashRE = /\/$/; export const outboundRE = /^[a-z]+:/i; +import { applyTabindexIfOverflowing } from "./apply-tabindex-if-overflowing"; export function normalize(path) { return decodeURI(path) @@ -631,10 +632,10 @@ function getAnchorHash(path) { * allowing users to focus and scroll them using the keyboard. */ export function makeOverflowingContainersFocusable() { - document.querySelectorAll('pre,.toggle-tip .wrapper,.viewport.limit-height').forEach(el => { - if (el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight) { - el.setAttribute('tabindex', '0'); - } + const containers = document.querySelectorAll('pre,.toggle-tip .wrapper'); + + containers.forEach(el => { + applyTabindexIfOverflowing(el); }); } From ecd76dd292d679c1a7461478a1530f658801e73a Mon Sep 17 00:00:00 2001 From: Guadalupe Camacho Date: Mon, 10 Aug 2026 16:29:45 -0700 Subject: [PATCH 3/6] Adjust ui component color to work on light gray backgrounds, apply special text style to glossary underline --- docs/.vuepress/theme/global-components/InfoHud.vue | 2 +- docs/.vuepress/theme/global-components/Term.vue | 3 ++- docs/.vuepress/theme/styles/base.pcss | 4 ++-- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/docs/.vuepress/theme/global-components/InfoHud.vue b/docs/.vuepress/theme/global-components/InfoHud.vue index 29906f2ca..736fe0eb2 100644 --- a/docs/.vuepress/theme/global-components/InfoHud.vue +++ b/docs/.vuepress/theme/global-components/InfoHud.vue @@ -67,7 +67,7 @@ export default { } .info-circle { - fill: currentColor; + fill: var(--ui-component-color); width: 18px; height: 18px; top: -1px; diff --git a/docs/.vuepress/theme/global-components/Term.vue b/docs/.vuepress/theme/global-components/Term.vue index 764d310ac..4606d6012 100644 --- a/docs/.vuepress/theme/global-components/Term.vue +++ b/docs/.vuepress/theme/global-components/Term.vue @@ -46,7 +46,8 @@ } .glossary-term-link { - text-decoration: none !important; + text-decoration: var(--link-underline-color) dotted underline !important; + font-weight: 500; } .glossary-term-heading { diff --git a/docs/.vuepress/theme/styles/base.pcss b/docs/.vuepress/theme/styles/base.pcss index c8ee4027a..61202c337 100644 --- a/docs/.vuepress/theme/styles/base.pcss +++ b/docs/.vuepress/theme/styles/base.pcss @@ -2,7 +2,7 @@ --text-color: theme("colors.slate"); --text-color-muted: #6D7480; --text-color-inverted: theme("colors.white"); - --ui-component-color: #8491A4; + --ui-component-color: #7F8C9F; --bg-color: theme("colors.white"); --sidebar-bg-color: theme("colors.softer"); --search-bg-color: theme("colors.soft"); @@ -11,7 +11,7 @@ --heading-color: theme("colors.slate"); --link-color-default: theme("colors.blue.default"); --code-link-color: theme("colors.blue.darker"); - --link-underline-color: #5E8BF7; + --link-underline-color: var(--link-color-default); --sidebar-link-color: theme("colors.slate"); --sidebar-active-link-color: theme("colors.blue.default"); --hamburger-color: theme("colors.black"); From ab8cbba9ca39498ce82c6d0621e7cf19fbff38b7 Mon Sep 17 00:00:00 2001 From: Guadalupe Camacho Date: Tue, 11 Aug 2026 10:08:16 -0700 Subject: [PATCH 4/6] Move import above exports --- docs/.vuepress/theme/util/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/.vuepress/theme/util/index.js b/docs/.vuepress/theme/util/index.js index 9339a043f..11d407ce9 100644 --- a/docs/.vuepress/theme/util/index.js +++ b/docs/.vuepress/theme/util/index.js @@ -1,8 +1,8 @@ +import { applyTabindexIfOverflowing } from "./apply-tabindex-if-overflowing"; export const hashRE = /#.*$/; export const extRE = /\.(md|html)$/; export const endingSlashRE = /\/$/; export const outboundRE = /^[a-z]+:/i; -import { applyTabindexIfOverflowing } from "./apply-tabindex-if-overflowing"; export function normalize(path) { return decodeURI(path) From e121e562b16fc90efc629ae374d450d86357c09c Mon Sep 17 00:00:00 2001 From: Guadalupe Camacho Date: Tue, 11 Aug 2026 10:12:45 -0700 Subject: [PATCH 5/6] Go back to currentColor to maintain red on hover --- docs/.vuepress/theme/global-components/InfoHud.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/.vuepress/theme/global-components/InfoHud.vue b/docs/.vuepress/theme/global-components/InfoHud.vue index 736fe0eb2..7f68fc8b8 100644 --- a/docs/.vuepress/theme/global-components/InfoHud.vue +++ b/docs/.vuepress/theme/global-components/InfoHud.vue @@ -47,7 +47,7 @@ export default { } .info-hud .v-popover { - color: #b8c2cc; + color: var(--ui-component-color); display: inline-block; line-height: 0; @@ -67,7 +67,7 @@ export default { } .info-circle { - fill: var(--ui-component-color); + fill: currentColor; width: 18px; height: 18px; top: -1px; From b19c196f7133dddf89818caf214958935b82a3b4 Mon Sep 17 00:00:00 2001 From: Guadalupe Camacho Date: Tue, 11 Aug 2026 10:37:18 -0700 Subject: [PATCH 6/6] Remove part about removing tabindex since we are not observing anymore --- docs/.vuepress/theme/util/apply-tabindex-if-overflowing.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/docs/.vuepress/theme/util/apply-tabindex-if-overflowing.js b/docs/.vuepress/theme/util/apply-tabindex-if-overflowing.js index 587f456a5..e3da1075c 100644 --- a/docs/.vuepress/theme/util/apply-tabindex-if-overflowing.js +++ b/docs/.vuepress/theme/util/apply-tabindex-if-overflowing.js @@ -1,10 +1,8 @@ export function applyTabindexIfOverflowing(el) { if (!el) return; - const isOverflowing = el.scrollWidth > el.clientWidth || el.scrollHeight > -el.clientHeight; + const isOverflowing = el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight; + if (isOverflowing) { el.setAttribute('tabindex', '0'); - } else { - el.removeAttribute('tabindex'); } }