From d59dc12f1e7b60c83cacc67ffe389109888a1685 Mon Sep 17 00:00:00 2001 From: Lam Nguyen Date: Wed, 20 Aug 2025 11:07:55 -0700 Subject: [PATCH 1/5] Coveo: Fix clipping on sidebar + touch up colors --- assets/css/v2/style.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index 0ae54c69..c8449c95 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -700,8 +700,11 @@ ol li:last-child { .sidebar__search { display: unset; - width: calc(var(--sidebar-width) - 4rem); - margin-inline-start: 1rem; + width: calc(var(--sidebar-width)); + --atomic-primary: oklch(var(--color-brand)); /* Adjust the primary color */ + --atomic-ring-primary: oklch(var(--color-brand) / 0.4); /* Adjust the focus color */ + margin-block-start: 0.5rem; + padding-inline: 0.5rem; } } } From b3aed0f820677295a2df03f4cd961532ab01f8c2 Mon Sep 17 00:00:00 2001 From: Lam Nguyen Date: Wed, 20 Aug 2025 11:23:23 -0700 Subject: [PATCH 2/5] Coveo: Refactor variables --- assets/css/v2/style.css | 21 +++++++++++++-------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index c8449c95..5d0f7d8a 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -9,6 +9,19 @@ box-sizing: border-box; } +/* Coveo color overrides */ +/* More info: https://docs.coveo.com/en/atomic/latest/usage/themes-and-visual-customization/ */ +* { + --atomic-primary: oklch(var(--color-brand)); /* Adjust the primary color */ + --atomic-ring-primary: oklch(var(--color-brand) / 0.4); /* Adjust the focus color */ + --atomic-primary-light: oklch(var(--color-brand)); + + /* Remove round corners */ + --atomic-border-radius-lg: 0; + --atomic-border-radius-md: 0; + --atomic-border-radius: 0; +} + /* Prevent font size inflation */ html { -moz-text-size-adjust: none; @@ -701,8 +714,6 @@ ol li:last-child { .sidebar__search { display: unset; width: calc(var(--sidebar-width)); - --atomic-primary: oklch(var(--color-brand)); /* Adjust the primary color */ - --atomic-ring-primary: oklch(var(--color-brand) / 0.4); /* Adjust the focus color */ margin-block-start: 0.5rem; padding-inline: 0.5rem; } @@ -1038,12 +1049,6 @@ atomic-search-interface#search-v2 { display: inline-block !important; width: 95vw; grid-column: 1 / -1; - --atomic-primary: oklch(var(--color-brand)); - --atomic-primary-ring: oklch(var(--color-brand)); - --atomic-primary-light: oklch(var(--color-brand)); - --atomic-border-radius-lg: 0; - --atomic-border-radius-md: 0; - --atomic-border-radius: 0; --atomic-font-family: var(--font-family); atomic-search-box { From 7d3692bc5ce91b9e95181ddb88ebeca8859a0715 Mon Sep 17 00:00:00 2001 From: Lam Nguyen Date: Thu, 21 Aug 2025 12:20:41 -0700 Subject: [PATCH 3/5] Coveo: Added search on homepage + fixed mobile renderings --- assets/css/v2/style.css | 27 +++++++++++++++++++++++++-- 1 file changed, 25 insertions(+), 2 deletions(-) diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index 5d0f7d8a..0e11302d 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -499,6 +499,8 @@ ol li:last-child { display: flex; flex-direction: row; justify-content: space-around; + flex-wrap: wrap; + column-gap: 2rem; align-items: center; width: 100%; @@ -509,7 +511,7 @@ ol li:last-child { .header__search { display: block; - width: 14rem; + width: auto; } .header__product-selector { @@ -734,6 +736,14 @@ ol li:last-child { } } + .grid-container { + &:has(.homepage) { + .header-container .header__search { + display: block; + } + } + } + .header__product-selector { display: none; } @@ -829,7 +839,7 @@ nav { .homepage-section { display: grid; - grid-template-columns: repeat(auto-fit, minmax(120px, 500px)); + grid-template-columns: repeat(auto-fit, minmax(0, 500px)); gap: 1.5rem; justify-content: center; @@ -1163,6 +1173,19 @@ body:not(:has(.main-layout)) header atomic-search-interface { } } +@media (max-width: 568px) { + /* Remove the set height to push the search to new line */ + .grid-container { + grid-template-rows: auto 1fr auto; + } + + /* Change the order of the search when wrapping to new line on header */ + .header__search { + order: 2; + padding-block: 1rem; + } +} + /* MARK: Product Selector */ From fedf06143db25c1b5fafb14056d05fa874ff7527 Mon Sep 17 00:00:00 2001 From: Lam Nguyen Date: Thu, 21 Aug 2025 12:26:14 -0700 Subject: [PATCH 4/5] Coveo: Make font-size consistent on searchbar --- assets/css/v2/style.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index 0e11302d..9eb0e514 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -1148,6 +1148,11 @@ atomic-search-interface#search-standalone-header { border-color: oklch(var(--color-foreground)); } + &::part(textarea) { + /* Override Coveo's use of --atomic-text-lg (equal to 1rem) */ + font-size: var(--atomic-text-base); + } + &::part(suggestions-wrapper) { border-radius: 0; border-color: oklch(var(--color-foreground)); From 97b0161479f8ad5c90ca6fd00408b188eb77660e Mon Sep 17 00:00:00 2001 From: Lam Nguyen Date: Fri, 22 Aug 2025 09:29:03 -0700 Subject: [PATCH 5/5] Cards: Fixed styling on search --- assets/css/v2/style.css | 32 +++++++++++--------------------- 1 file changed, 11 insertions(+), 21 deletions(-) diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index 9eb0e514..15ca1432 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -9,19 +9,6 @@ box-sizing: border-box; } -/* Coveo color overrides */ -/* More info: https://docs.coveo.com/en/atomic/latest/usage/themes-and-visual-customization/ */ -* { - --atomic-primary: oklch(var(--color-brand)); /* Adjust the primary color */ - --atomic-ring-primary: oklch(var(--color-brand) / 0.4); /* Adjust the focus color */ - --atomic-primary-light: oklch(var(--color-brand)); - - /* Remove round corners */ - --atomic-border-radius-lg: 0; - --atomic-border-radius-md: 0; - --atomic-border-radius: 0; -} - /* Prevent font size inflation */ html { -moz-text-size-adjust: none; @@ -143,6 +130,17 @@ textarea:not([rows]) { } :root { + /* Coveo color overrides */ + /* More info: https://docs.coveo.com/en/atomic/latest/usage/themes-and-visual-customization/ */ + --atomic-primary: oklch(var(--color-brand)) !important; /* Adjust the primary color */ + --atomic-ring-primary: oklch(var(--color-brand) / 0.4) !important; /* Adjust the focus color */ + --atomic-primary-light: oklch(var(--color-brand)) !important; + + /* Remove round corners */ + --atomic-border-radius-lg: 0 !important; + --atomic-border-radius-md: 0 !important; + --atomic-border-radius: 0 !important; + /* webfonts */ font-family: var(--font-family); font-feature-settings: @@ -476,10 +474,6 @@ ol li:last-child { .sidebar { display: none; } - - .header__logo { - display: unset; - } } .header { @@ -1159,10 +1153,6 @@ atomic-search-interface#search-standalone-header { width: calc(100% + 2px); margin-inline-start: -1px; } - - &::part(submit-button-wrapper) { - --atomic-primary: var(--atomic-neutral-dark); - } } }