feat: adds theming homepage (#2007)

* enable theming homepage * remove homepage from non themed path config * update bg page color * update bg page title * adds chiclet dark theme styles * overrides on featured cards * adjust prefooter * adjust cert card body color * update search card styles * adds dark bg * border primary * make it border faint * remove base box shadow, make border primary
hashicorp · Jun 22, 2023 · e4647a2 · e4647a2 · vercel · Jun 22, 2023
1 parent b3dff30
commit e4647a2
Show file tree

Hide file tree

Showing 12 changed files with 120 additions and 13 deletions.
diff --git a/config/base.json b/config/base.json
@@ -30,7 +30,7 @@
 			"/certifications",
 			"/certifications/[slug]"
 		],
-		"non_themed_paths": ["/", "/sign-up"],
+		"non_themed_paths": ["/sign-up"],
 		"datadog_config": {
 			"scriptUrl": "https://www.datadoghq-browser-agent.com/datadog-rum-v4.js",
 			"applicationId": "40a2019f-88ad-4076-ab52-ffd074064eed",

diff --git a/src/components/mobile-menu-container/index.tsx b/src/components/mobile-menu-container/index.tsx
@@ -11,6 +11,7 @@ import { useRouter } from 'next/router'
 
 // Global imports
 import { getUserMenuItems } from 'lib/auth/user'
+import isThemedPath from 'lib/isThemedPath'
 import { useMobileMenu } from 'contexts'
 import useAuthentication from 'hooks/use-authentication'
 import Button from 'components/button'
@@ -46,7 +47,7 @@ const MobileAuthenticationControls = () => {
 		useAuthentication()
 	const showUnauthenticatedUI = !isLoading && !isAuthenticated
 	const { pathname } = useRouter()
-	const shouldRenderThemeSwitcher = pathname !== '/'
+	const shouldRenderThemeSwitcher = isThemedPath(pathname)
 
 	if (!isAuthenticated && !showUnauthenticatedUI) {
 		return null

diff --git a/src/views/homepage/components/chiclets/chiclets.module.css b/src/views/homepage/components/chiclets/chiclets.module.css
@@ -35,6 +35,10 @@
 		line-height: var(--token-typography-display-300-line-height);
 		margin-bottom: 20px;
 	}
+
+	@nest html[data-theme='dark'] & {
+		color: var(--token-color-foreground-strong);
+	}
 }
 
 .navList {
@@ -61,16 +65,16 @@
 	display: block;
 	padding: 1px;
 
-	/* this is --token-surface-mid-box-shadow in dark mode */
-	box-shadow: 0 0 0 1px #b2b6bd26, 0 2px 3px 0 #6168751a,
-		0 8px 16px -10px #61687533;
-
 	&:hover {
 		/* this is --token-surface-high-box-shadow in dark mode */
 		box-shadow: 0 0 0 1px #b2b6bd40, 0 2px 3px 0 #61687526,
 			0 16px 16px -10px #61687533;
 		background: var(--hover-background);
 	}
+
+	@nest html[data-theme='dark'] & {
+		background-color: var(--token-color-border-primary);
+	}
 }
 
 .navListLinkContent {
@@ -91,6 +95,11 @@
 			width: 22px;
 		}
 	}
+
+	@nest html[data-theme='dark'] & {
+		background-color: var(--token-color-foreground-high-contrast);
+		color: var(--token-color-foreground-strong);
+	}
 }
 
 .chicletText {

diff --git a/src/views/homepage/components/featured-content-grid/certifications-featured-card.module.css b/src/views/homepage/components/featured-content-grid/certifications-featured-card.module.css
@@ -71,4 +71,8 @@
 		font-size: var(--token-typography-body-200-font-size);
 		line-height: var(--token-typography-body-200-line-height);
 	}
+
+	@nest html[data-theme='dark'] & {
+		color: var(--token-color-foreground-primary);
+	}
 }
diff --git a/src/views/homepage/components/featured-content-grid/featured-card.module.css b/src/views/homepage/components/featured-content-grid/featured-card.module.css
@@ -5,7 +5,7 @@
 
 .card {
 	background-color: var(--token-color-foreground-strong);
-	color: var(--token-color-palette-neutral-0);
+	color: var(--token-color-foreground-high-contrast);
 	display: flex;
 	flex-direction: column;
 	height: 100%;
@@ -17,14 +17,19 @@
 		gap: 10px;
 		padding-right: 0;
 	}
+
+	@nest html[data-theme='dark'] & {
+		background-color: var(--token-color-foreground-high-contrast);
+		color: var(--token-color-foreground-strong);
+	}
 }
 
 .learnMoreCtaContainer {
 	align-self: flex-end;
 }
 
 .learnMoreCta {
-	color: var(--token-color-palette-neutral-0);
+	color: inherit;
 	gap: 6px;
 	padding-right: 4px;
 

diff --git a/src/views/homepage/components/featured-content-grid/search-featured-card.module.css b/src/views/homepage/components/featured-content-grid/search-featured-card.module.css
@@ -21,6 +21,11 @@
 		background-image: url('../../img/search-card-graphic.svg');
 		background-position-x: 1rem;
 	}
+
+	@nest html[data-theme='dark'] & {
+		background-color: var(--token-color-foreground-high-contrast);
+		color: var(--token-color-foreground-strong);
+	}
 }
 
 .heading {
@@ -42,6 +47,10 @@
 		font-size: var(--token-typography-display-300-font-size);
 		line-height: var(--token-typography-display-300-line-height);
 	}
+
+	@nest html[data-theme='dark'] & {
+		color: var(--token-color-foreground-strong);
+	}
 }
 
 .description {
@@ -51,6 +60,10 @@
 	& span {
 		display: block;
 	}
+
+	@nest html[data-theme='dark'] & {
+		color: var(--token-color-foreground-primary);
+	}
 }
 
 .carousel {
@@ -193,6 +206,11 @@
 		align-items: flex-start;
 		flex-direction: column;
 	}
+
+	@nest html[data-theme='dark'] & {
+		background-color: var(--token-color-foreground-high-contrast);
+		color: var(--token-color-foreground-strong);
+	}
 }
 
 .buttonText {

diff --git a/src/views/homepage/components/page-title/page-title.module.css b/src/views/homepage/components/page-title/page-title.module.css
@@ -29,26 +29,33 @@
  * https://stackoverflow.com/a/28592238
  */
 .line1 {
+	--bg-gradient-base: var(--token-color-foreground-high-contrast);
+
 	background: linear-gradient(
 			90deg,
 			rgba(136, 143, 255, 0.46) 9.03%,
 			rgba(223, 255, 199, 0.57) 41.12%,
 			rgba(255, 177, 80, 0.31) 61.68%
 		),
-		linear-gradient(
-			var(--token-color-foreground-high-contrast),
-			var(--token-color-foreground-high-contrast)
-		);
+		linear-gradient(var(--bg-gradient-base), var(--bg-gradient-base));
 	background-clip: text;
 	color: transparent;
 	display: block;
 	font-weight: var(--token-typography-font-weight-bold);
 	width: fit-content;
+
+	@nest html[data-theme='dark'] & {
+		--bg-gradient-base: var(--token-color-foreground-strong);
+	}
 }
 
 .line2 {
 	color: var(--token-color-foreground-high-contrast);
 	display: block;
 	font-weight: var(--token-typography-font-weight-semibold);
 	width: fit-content;
+
+	@nest html[data-theme='dark'] & {
+		color: var(--token-color-foreground-strong);
+	}
 }
diff --git a/src/views/homepage/components/pre-footer/index.tsx b/src/views/homepage/components/pre-footer/index.tsx
@@ -54,6 +54,7 @@ function PreFooter({ heading, description, actions }: PreFooterProps) {
 											{action.heading}
 										</Heading>
 										<StandaloneLink
+											className={s.actionsDescription}
 											color="secondary"
 											href={action.link}
 											icon={<IconExternalLink16 />}

diff --git a/src/views/homepage/components/pre-footer/pre-footer.module.css b/src/views/homepage/components/pre-footer/pre-footer.module.css
@@ -22,6 +22,7 @@
 
 .content {
 	grid-column: 1 / -1;
+	color: var(--token-color-foreground-strong);
 
 	@media (--dev-dot-tablet-up) {
 		grid-column: 1 / 7;
@@ -57,4 +58,9 @@
 
 .actionsHeading {
 	margin-bottom: 8px;
+	color: var(--token-color-foreground-strong);
+}
+
+.actionsDescription {
+	color: var(--token-color-foreground-primary);
 }
diff --git a/src/views/homepage/homepage.module.css b/src/views/homepage/homepage.module.css
@@ -37,6 +37,11 @@
 		background-position-x: -550px;
 		background-position-y: -30px;
 	}
+
+	@nest html[data-theme='dark'] & {
+		background-color: var(--token-color-page-primary);
+		background-image: url('./img/background-dark.svg');
+	}
 }
 
 .limitedWidthContainer {

diff --git a/src/views/homepage/img/background-dark.svg b/src/views/homepage/img/background-dark.svg
diff --git a/src/views/homepage/index.tsx b/src/views/homepage/index.tsx
@@ -64,6 +64,5 @@ function HomePageView(): ReactElement {
  */
 HomePageView.contentType = 'tutorials'
 HomePageView.layout = BaseNewLayout
-HomePageView.theme = GlobalThemeOption.light
 
 export default HomePageView