From 7cd428893de7654cd100d7839191b006cfda00b7 Mon Sep 17 00:00:00 2001 From: Stephanie Elliott Date: Tue, 23 Jun 2026 19:26:13 -1000 Subject: [PATCH 1/2] Align help site styling with marketing pages and improve article contrast --- docs/_sass/_colors.scss | 12 +++++++++--- docs/_sass/_main.scss | 28 +++++++++++++++++----------- docs/_sass/_search-bar.scss | 2 +- 3 files changed, 27 insertions(+), 15 deletions(-) diff --git a/docs/_sass/_colors.scss b/docs/_sass/_colors.scss index ea6d129486fa..14fc24c41c32 100644 --- a/docs/_sass/_colors.scss +++ b/docs/_sass/_colors.scss @@ -1,17 +1,20 @@ :root { --color-text: #002e22; + --color-text-body: #465751; --color-button-text: #FCFBF9; --color-text-supporting: #76847e; --color-icons: #a2a9a3; - --color-borders: #e6e1da; + --color-borders: #ebe6df; --color-highlightBG: #f8f4f0; --color-row-hover: #f2ede7; - --color-appBG: #fcfbf9; + --color-appBG: #faf8f5; + --color-surface: #ffffff; + --color-card-shadow: 0 8px 16px rgba(0, 0, 0, 0.01), 0 3px 6px rgba(0, 0, 0, 0.02); --color-success: #03d47c; --color-accent: #03d47c; --color-link: #0164BF; --color-link-hovered: #0676DE; - --color-button-background: #e6e1da; + --color-button-background: #ebe6df; --color-button-background-hover: #d8d1c7; --color-button-success-background: #03d47c; --color-button-success-background-hover: #00a862; @@ -23,6 +26,7 @@ @media (prefers-color-scheme: dark) { :root { --color-text: #e7ece9; + --color-text-body: #e7ece9; --color-button-text: #E7ECE9; --color-text-supporting: #afbbb0; --color-icons: #8b9c8f; @@ -30,6 +34,8 @@ --color-highlightBG: #072419; --color-row-hover: #0a2e25; --color-appBG: #061b09; + --color-surface: #072419; + --color-card-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.15); --color-success: #03d47c; --color-accent: #03d47c; --color-link: #5ab0ff; diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss index 3b451f020c46..b097b43c32e5 100644 --- a/docs/_sass/_main.scss +++ b/docs/_sass/_main.scss @@ -188,7 +188,7 @@ button, input, select, textarea { - line-height: 1.33; + line-height: 1.4; font-weight: 400; font-family: 'Expensify Neue', 'Helvetica Neue', 'Helvetica', Arial, sans-serif; font-size: 16px; @@ -244,12 +244,9 @@ button { #lhn { position: fixed; - background-color: var(--color-highlightBG); + background-color: var(--color-appBG); box-sizing: border-box; z-index: 1; - border-right-color: var(--color-borders); - border-right-width: 1px; - border-style: solid; width: 100%; height: auto; &.expanded { @@ -360,6 +357,7 @@ button { min-height: 100vh; margin-left: 0; padding: 80px 24px 0px 24px; + background-color: var(--color-appBG); @include breakpoint($breakpoint-tablet) { margin-left: 320px; @@ -387,7 +385,9 @@ button { h1 { &.title { - font-size: 2.25em; + font-size: 36px; + line-height: 1.15; + font-weight: 500; flex: 1; } } @@ -397,6 +397,8 @@ button { } .article { + color: var(--color-text-body); + .hidden { display: none; } @@ -474,9 +476,11 @@ button { } h2 { - font-size: 1.125em; + font-size: 21px; + line-height: 1.33; font-weight: 500; font-family: 'Expensify New Kansas', 'Helvetica Neue', 'Helvetica', Arial, sans-serif; + color: var(--color-text); } h3 { @@ -852,10 +856,12 @@ button { font-weight: 700; cursor: pointer; color: var(--color-text); - background-color: var(--color-highlightBG); + background-color: var(--color-surface); + box-shadow: var(--color-card-shadow); &:hover { - background-color: var(--color-row-hover); + background-color: var(--color-surface); + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.02), 0 3px 6px rgba(0, 0, 0, 0.04); } .row { @@ -1374,7 +1380,7 @@ button { cursor: default; &:hover { - background-color: var(--color-highlightBG); + background-color: var(--color-surface); } .icon { @@ -1579,7 +1585,7 @@ button { border-style: solid; border-width: 1px; border-color: var(--color-borders); - background-color: transparent; + background-color: var(--color-surface); border-radius: 4px; text-align: center; padding: 6px 12px; diff --git a/docs/_sass/_search-bar.scss b/docs/_sass/_search-bar.scss index e0984ceeb31a..f0c61b7311d9 100644 --- a/docs/_sass/_search-bar.scss +++ b/docs/_sass/_search-bar.scss @@ -25,6 +25,7 @@ min-height: 52px; box-sizing: border-box; cursor: text; + background-color: var(--color-surface); &:focus-within { border-color: var(--color-button-success-background); @@ -147,7 +148,6 @@ .lhn-search-input-wrapper { height: 52px; min-height: 52px; - background-color: var(--color-appBG); } .search-no-results, From 9d5cdb8fe84efd3024638d6521625b237fa1d751 Mon Sep 17 00:00:00 2001 From: Stephanie Elliott Date: Tue, 23 Jun 2026 19:49:41 -1000 Subject: [PATCH 2/2] Improve help site article readability and blockquote styling. Add section spacing, heading hierarchy, and a 720px reading width for long-form docs, and scale blockquotes to match body text instead of oversized pull-quote styling. Co-authored-by: Cursor --- docs/_sass/_main.scss | 155 +++++++++++++++++++++++++++++++++++------- 1 file changed, 130 insertions(+), 25 deletions(-) diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss index b097b43c32e5..870b11f5954d 100644 --- a/docs/_sass/_main.scss +++ b/docs/_sass/_main.scss @@ -389,9 +389,14 @@ button { line-height: 1.15; font-weight: 500; flex: 1; + margin-bottom: 0; } } + .article-toc-content.article { + max-width: 720px; + } + h1.homepage-title { font-size: 2.5em; } @@ -399,6 +404,27 @@ button { .article { color: var(--color-text-body); + hr { + background: var(--color-borders); + border: none; + display: block; + width: 100%; + height: 1px; + margin: 48px 0; + } + + p { + padding-bottom: 0; + margin: 0 0 16px 0; + } + + ul, + ol { + margin-top: 0; + margin-bottom: 20px; + padding-bottom: 0; + } + .hidden { display: none; } @@ -415,7 +441,17 @@ button { } li { - padding-bottom: 4px; + padding-bottom: 8px; + + &:last-child { + padding-bottom: 0; + } + } + + li > ul, + li > ol { + margin-top: 8px; + margin-bottom: 0; } ol { @@ -427,7 +463,8 @@ button { } table { - margin-bottom: 20px; + margin-top: 8px; + margin-bottom: 28px; border-radius: 8px; // Box shadow is used here because border-radius and border-collapse don't work together. It leads to double borders. @@ -472,7 +509,18 @@ button { h1, summary { font-size: 1.5em; - padding: 20px 0 12px 0; + margin-top: 40px; + padding: 0 0 12px 0; + + &:first-child { + margin-top: 0; + } + } + + hr + h1, + hr + summary { + margin-top: 0; + padding-top: 0; } h2 { @@ -481,38 +529,86 @@ button { font-weight: 500; font-family: 'Expensify New Kansas', 'Helvetica Neue', 'Helvetica', Arial, sans-serif; color: var(--color-text); + margin-top: 32px; + margin-bottom: 12px; + padding: 0 0 10px 0; + border-bottom: 1px solid var(--color-borders); + } + + h1 + h2, + hr + h1 + h2 { + margin-top: 24px; } h3 { font-size: 1em; font-family: 'Expensify Neue', 'Helvetica Neue', 'Helvetica', Arial, sans-serif; + font-weight: 700; + color: var(--color-text); + margin-top: 24px; + margin-bottom: 8px; + padding: 0; } - h2, - h3 { - margin: 0; - padding: 12px 0 12px 0; + p + h2, + ul + h2, + ol + h2, + table + h2, + pre + h2, + blockquote + h2, + .info + h2, + details + h2 { + margin-top: 40px; + } + + h1 + p, + h2 + p, + h3 + p { + margin-top: 4px; + } + + details { + margin: 12px 0 24px; + } + + pre { + margin-top: 12px; + margin-bottom: 24px; } blockquote { - margin-top: 20px; + margin-top: 16px; margin-bottom: 20px; - padding-top: 20px; - padding-left: 5%; - border-left: 5px solid var(--color-button-background-hover); + padding: 4px 0 4px 16px; + border-left: 4px solid var(--color-borders); + color: var(--color-text-body); + + p { + padding-bottom: 0; + margin: 0 0 8px 0; + font-size: inherit; + font-family: inherit; + line-height: inherit; + opacity: 1; + + &:last-child { + margin-bottom: 0; + } + } + + p:first-child { + font-size: inherit; + font-family: inherit; + font-weight: inherit; + opacity: 1; + } em:before { - content: '\“\a'; - white-space: pre; - font-size: 60px; - line-height: 1em; - color: var(--color-accent); + content: none; } - p:first-child { - font-size: large; - font-family: 'Expensify New Kansas', 'Helvetica Neue', 'Helvetica', Arial, sans-serif; - opacity: 0.8; + strong { + font-weight: 700; } } @@ -523,7 +619,8 @@ button { gap: 20px; border-radius: 12px; padding: 20px; - margin-bottom: 20px; + margin-top: 8px; + margin-bottom: 28px; justify-content: space-between; * > ol, ul { @@ -561,7 +658,8 @@ button { .info { padding: 12px; - margin-bottom: 20px; + margin-top: 8px; + margin-bottom: 24px; border-radius: 8px; background-color: var(--color-highlightBG); color: var(--color-text); @@ -586,7 +684,8 @@ button { .video-container { position: relative; - margin-bottom: 20px; + margin-top: 8px; + margin-bottom: 28px; } .video-js { @@ -1445,7 +1544,9 @@ button { .get-help { flex-wrap: wrap; - margin-top: 40px; + margin-top: 56px; + padding-top: 32px; + border-top: 1px solid var(--color-borders); } .disable-scrollbar { @@ -1560,7 +1661,11 @@ button { .title-platform-tabs { display: flex; justify-content: space-between; - padding-bottom: 20px; + max-width: 720px; + padding-bottom: 24px; + margin-bottom: 32px; + border-bottom: 1px solid var(--color-borders); + h1 { padding: 0; }