From 4c9e211d842b189ce06642f308b80b735ca5a7cc Mon Sep 17 00:00:00 2001 From: Lupe Camacho Date: Thu, 4 Sep 2025 13:08:37 -0700 Subject: [PATCH 1/9] Add focus outline to dark mode toggle --- README.md | 1 + docs/.vuepress/theme/components/ColorModeSwitch.vue | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 3bcd67b62..1e7c95c18 100644 --- a/README.md +++ b/README.md @@ -29,6 +29,7 @@ The pages served from `docs/` are treated like any other VuePress project, and t ## Local Development ``` +nvm use npm install npm run docs:dev ``` diff --git a/docs/.vuepress/theme/components/ColorModeSwitch.vue b/docs/.vuepress/theme/components/ColorModeSwitch.vue index 145deece6..b99b209db 100644 --- a/docs/.vuepress/theme/components/ColorModeSwitch.vue +++ b/docs/.vuepress/theme/components/ColorModeSwitch.vue @@ -22,7 +22,7 @@ height: 22px; &:focus { - @apply outline-none; + outline: 2px solid var(--link-color-default); } .knob { From 60d0871dfa4cc180e652076387a73b3ab9527310 Mon Sep 17 00:00:00 2001 From: Lupe Camacho Date: Thu, 4 Sep 2025 13:17:20 -0700 Subject: [PATCH 2/9] Remove color from Home link --- docs/.vuepress/theme/components/DocSetPanel.vue | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/.vuepress/theme/components/DocSetPanel.vue b/docs/.vuepress/theme/components/DocSetPanel.vue index 42127ce7b..72562b802 100644 --- a/docs/.vuepress/theme/components/DocSetPanel.vue +++ b/docs/.vuepress/theme/components/DocSetPanel.vue @@ -82,7 +82,6 @@ .home { @apply text-sm relative; - color: #718096; .back { @apply inline-block absolute mr-1 opacity-100; From 72e72667d2ff216dfcadf93d33d03a46b5224556 Mon Sep 17 00:00:00 2001 From: Lupe Camacho Date: Thu, 4 Sep 2025 13:19:43 -0700 Subject: [PATCH 3/9] Update text color in .see-description --- docs/.vuepress/components/See.vue | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/.vuepress/components/See.vue b/docs/.vuepress/components/See.vue index 22e4c64ff..21715a2a3 100644 --- a/docs/.vuepress/components/See.vue +++ b/docs/.vuepress/components/See.vue @@ -88,6 +88,7 @@ export default { } .see-description { - @apply text-sm text-gray-500 mt-1; + @apply text-sm mt-1; + color: var(--text-color-muted); } From bc8ccdb86454eb42b38a0900dbc1aaedbd5603cb Mon Sep 17 00:00:00 2001 From: Lupe Camacho Date: Thu, 4 Sep 2025 13:48:49 -0700 Subject: [PATCH 4/9] Fix on this page padding to account for focus outlines --- docs/.vuepress/theme/components/PostHeading.vue | 4 +++- docs/.vuepress/theme/components/RightBar.vue | 5 ++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/docs/.vuepress/theme/components/PostHeading.vue b/docs/.vuepress/theme/components/PostHeading.vue index 1770678de..edb8c8293 100644 --- a/docs/.vuepress/theme/components/PostHeading.vue +++ b/docs/.vuepress/theme/components/PostHeading.vue @@ -38,7 +38,9 @@ border-color: var(--border-color); } .sidebar-links { - @apply list-none p-0 mx-0 mb-3; + @apply list-none; + margin: 1rem -3px 0.75rem -3px; + padding: 3px; li { @apply list-none; a { diff --git a/docs/.vuepress/theme/components/RightBar.vue b/docs/.vuepress/theme/components/RightBar.vue index 8abad52d9..e925431d1 100644 --- a/docs/.vuepress/theme/components/RightBar.vue +++ b/docs/.vuepress/theme/components/RightBar.vue @@ -49,8 +49,7 @@ export default { @apply w-64 absolute right-0 top-0 bottom-0 hidden; .sidebar-heading { - @apply text-xs mx-0 tracking-wide uppercase; - padding: 0.35rem 0; + @apply text-xs mx-0 p-1 tracking-wide uppercase; border-left: none; } @@ -63,7 +62,7 @@ export default { max-height: calc(100vh - 6.5rem); .sidebar-links { - @apply pb-0; + @apply p-1; max-height: none; } From ea4fe7c52c9899b0d37b0e04c2fed934d7c76efd Mon Sep 17 00:00:00 2001 From: Lupe Camacho Date: Mon, 15 Sep 2025 08:15:22 -0700 Subject: [PATCH 5/9] Add Css property for custom focus outline and use for dark mode toggle --- docs/.vuepress/theme/components/ColorModeSwitch.vue | 2 +- docs/.vuepress/theme/styles/base.pcss | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/.vuepress/theme/components/ColorModeSwitch.vue b/docs/.vuepress/theme/components/ColorModeSwitch.vue index b99b209db..d7d07399a 100644 --- a/docs/.vuepress/theme/components/ColorModeSwitch.vue +++ b/docs/.vuepress/theme/components/ColorModeSwitch.vue @@ -22,7 +22,7 @@ height: 22px; &:focus { - outline: 2px solid var(--link-color-default); + outline: var(--custom-focus-outline); } .knob { diff --git a/docs/.vuepress/theme/styles/base.pcss b/docs/.vuepress/theme/styles/base.pcss index ac1be46d0..36a4b588e 100644 --- a/docs/.vuepress/theme/styles/base.pcss +++ b/docs/.vuepress/theme/styles/base.pcss @@ -23,6 +23,7 @@ --custom-block-bg-color: theme("colors.softer"); --custom-block-border-color: theme("colors.soft"); --craft-red: #e5422b; + --custom-focus-outline: 2px solid var(--link-color-default); /* Code */ --code-color-default: #476582; From fbbb85284266a3c5acf67ea5943c710d3c8e2252 Mon Sep 17 00:00:00 2001 From: Lupe Camacho Date: Mon, 15 Sep 2025 08:28:30 -0700 Subject: [PATCH 6/9] More padding/margin refactoring to sidebar links in post toc --- docs/.vuepress/theme/components/PostHeading.vue | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/docs/.vuepress/theme/components/PostHeading.vue b/docs/.vuepress/theme/components/PostHeading.vue index edb8c8293..15a168199 100644 --- a/docs/.vuepress/theme/components/PostHeading.vue +++ b/docs/.vuepress/theme/components/PostHeading.vue @@ -38,9 +38,12 @@ border-color: var(--border-color); } .sidebar-links { + --padding-x: 3px; + --margin-x: calc(var(--padding-x) * -1); @apply list-none; - margin: 1rem -3px 0.75rem -3px; - padding: 3px; + margin: 1rem var(--margin-x) 0.75rem var(--margin-x); + padding: var(--padding-x); + li { @apply list-none; a { From f975043f15f755dc1dd130106cb4fbdc667bd5af Mon Sep 17 00:00:00 2001 From: Lupe Camacho Date: Mon, 15 Sep 2025 09:12:37 -0700 Subject: [PATCH 7/9] Redo sidebar link margins/padding and do outline-offset instead --- docs/.vuepress/theme/components/DocSetPanel.vue | 1 + docs/.vuepress/theme/components/LeftBar.vue | 6 ++++++ docs/.vuepress/theme/components/PostHeading.vue | 6 +----- docs/.vuepress/theme/components/RightBar.vue | 3 ++- docs/.vuepress/theme/styles/base.pcss | 6 ++++++ 5 files changed, 16 insertions(+), 6 deletions(-) diff --git a/docs/.vuepress/theme/components/DocSetPanel.vue b/docs/.vuepress/theme/components/DocSetPanel.vue index 72562b802..643cdb0d5 100644 --- a/docs/.vuepress/theme/components/DocSetPanel.vue +++ b/docs/.vuepress/theme/components/DocSetPanel.vue @@ -74,6 +74,7 @@ .doc-set-link { @apply block px-4 mt-2 font-medium text-lg; color: var(--doc-set-color); + outline-offset: -2px; .title { color: var(--doc-set-color); diff --git a/docs/.vuepress/theme/components/LeftBar.vue b/docs/.vuepress/theme/components/LeftBar.vue index dbd29972e..1b8763227 100644 --- a/docs/.vuepress/theme/components/LeftBar.vue +++ b/docs/.vuepress/theme/components/LeftBar.vue @@ -81,6 +81,12 @@ /* browser height - approx. .doc-set-panel - #top height - #bottom height */ height: calc(100vh - 93px - 3rem - 3rem); } + + .sidebar-links { + a:focus { + outline-offset: -2px; + } + } } .sidebar-transitioning { diff --git a/docs/.vuepress/theme/components/PostHeading.vue b/docs/.vuepress/theme/components/PostHeading.vue index 15a168199..d4830e37b 100644 --- a/docs/.vuepress/theme/components/PostHeading.vue +++ b/docs/.vuepress/theme/components/PostHeading.vue @@ -38,11 +38,7 @@ border-color: var(--border-color); } .sidebar-links { - --padding-x: 3px; - --margin-x: calc(var(--padding-x) * -1); - @apply list-none; - margin: 1rem var(--margin-x) 0.75rem var(--margin-x); - padding: var(--padding-x); + @apply list-none p-0 mx-0 mb-3; li { @apply list-none; diff --git a/docs/.vuepress/theme/components/RightBar.vue b/docs/.vuepress/theme/components/RightBar.vue index e925431d1..516e49847 100644 --- a/docs/.vuepress/theme/components/RightBar.vue +++ b/docs/.vuepress/theme/components/RightBar.vue @@ -50,6 +50,7 @@ export default { .sidebar-heading { @apply text-xs mx-0 p-1 tracking-wide uppercase; + padding: 0.35rem 0; border-left: none; } @@ -62,7 +63,7 @@ export default { max-height: calc(100vh - 6.5rem); .sidebar-links { - @apply p-1; + @apply pb-0; max-height: none; } diff --git a/docs/.vuepress/theme/styles/base.pcss b/docs/.vuepress/theme/styles/base.pcss index 36a4b588e..3ad25cc72 100644 --- a/docs/.vuepress/theme/styles/base.pcss +++ b/docs/.vuepress/theme/styles/base.pcss @@ -106,3 +106,9 @@ img { font-size: 108%; } } + +.sidebar-links { + a { + outline-offset: -2px; + } +} \ No newline at end of file From 65b8bad9ced08b8a718ef48acc2312d697bba4e5 Mon Sep 17 00:00:00 2001 From: Lupe Camacho Date: Mon, 15 Sep 2025 09:16:42 -0700 Subject: [PATCH 8/9] Add focus outline to voting button --- docs/.vuepress/theme/components/PageFooter.vue | 2 +- docs/.vuepress/theme/components/RightBar.vue | 2 +- docs/.vuepress/theme/styles/base.pcss | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/.vuepress/theme/components/PageFooter.vue b/docs/.vuepress/theme/components/PageFooter.vue index caf4492d3..b51e33ff8 100644 --- a/docs/.vuepress/theme/components/PageFooter.vue +++ b/docs/.vuepress/theme/components/PageFooter.vue @@ -83,7 +83,7 @@ } &:focus { - @apply outline-none; + outline: var(--custom-focus-outline); } &:hover { diff --git a/docs/.vuepress/theme/components/RightBar.vue b/docs/.vuepress/theme/components/RightBar.vue index 516e49847..8abad52d9 100644 --- a/docs/.vuepress/theme/components/RightBar.vue +++ b/docs/.vuepress/theme/components/RightBar.vue @@ -49,7 +49,7 @@ export default { @apply w-64 absolute right-0 top-0 bottom-0 hidden; .sidebar-heading { - @apply text-xs mx-0 p-1 tracking-wide uppercase; + @apply text-xs mx-0 tracking-wide uppercase; padding: 0.35rem 0; border-left: none; } diff --git a/docs/.vuepress/theme/styles/base.pcss b/docs/.vuepress/theme/styles/base.pcss index 3ad25cc72..5b5e5e446 100644 --- a/docs/.vuepress/theme/styles/base.pcss +++ b/docs/.vuepress/theme/styles/base.pcss @@ -111,4 +111,4 @@ img { a { outline-offset: -2px; } -} \ No newline at end of file +} From ed221eb98bec685cded6f5a2eb3d9400b79bee51 Mon Sep 17 00:00:00 2001 From: Lupe Camacho Date: Mon, 15 Sep 2025 09:17:19 -0700 Subject: [PATCH 9/9] Undo new line --- docs/.vuepress/theme/components/PostHeading.vue | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/.vuepress/theme/components/PostHeading.vue b/docs/.vuepress/theme/components/PostHeading.vue index d4830e37b..1770678de 100644 --- a/docs/.vuepress/theme/components/PostHeading.vue +++ b/docs/.vuepress/theme/components/PostHeading.vue @@ -39,7 +39,6 @@ } .sidebar-links { @apply list-none p-0 mx-0 mb-3; - li { @apply list-none; a {