Make the stripes green and fix dark mode

Author: hasparus

src/app/conf/2025/code-of-conduct/page.tsx

@@ -7,9 +7,9 @@ import { Button } from "@/app/conf/_design-system/button"
 
 import { NavbarPlaceholder } from "../components/navbar"
 import "../resources/prose.css"
+import { Hero, HeroStripes } from "../components/hero"
 
 import markdown from "./code-of-conduct.mdx?raw"
-import { Hero } from "../components/hero"
 
 export const metadata: Metadata = {
   title: "Code of Conduct | GraphQLConf 2025",
@@ -18,11 +18,18 @@ export const metadata: Metadata = {
 export default function ResourcesPage() {
   return (
     <>
-      <NavbarPlaceholder className="top-0 bg-neu-100 before:bg-white/30 dark:bg-neu-0 dark:before:bg-blk/40" />
+      <NavbarPlaceholder className="top-0 bg-neu-100 before:bg-white/30 dark:bg-[#181A12] dark:before:bg-blk/40" />
       <Hero
         pageName="Code of conduct"
         subtitle="The Linux Foundation"
         colorScheme="neutral"
+        stripes={
+          <HeroStripes
+            className="-scale-x-100 dark:data-[loaded=true]:opacity-80"
+            evenClassName="bg-[linear-gradient(180deg,hsl(var(--color-sec-light))_0%,hsl(319deg_100%_90%_/_0.2)_100%)] dark:bg-[linear-gradient(180deg,hsl(var(--color-sec-dark))_0%,hsl(var(--color-neu-100))_100%)]"
+            oddClassName="bg-[linear-gradient(180deg,hsl(319deg_100%_90%_/_0.2)_0%,hsl(var(--color-sec-base))_100%)] dark:bg-[linear-gradient(180deg,hsl(var(--color-sec-dark))_0%,hsl(var(--color-neu-0))_100%)]"
+          />
+        }
       >
         <Button
           href="https://events.linuxfoundation.org/about/code-of-conduct/"
@@ -56,7 +63,7 @@ export default function ResourcesPage() {
                     {...props}
                     className={clsx(
                       props.className,
-                      "gql-prose-inner -mx-4 w-fit border border-neu-300 bg-neu-50 p-4 xl:my-4",
+                      "gql-prose-inner -mx-4 w-fit border border-neu-300 bg-neu-50 p-4 dark:border-neu-100 dark:bg-neu-50/50 xl:my-4",
                     )}
                   />
                 )

src/app/conf/2025/components/hero/index.tsx

@@ -1,3 +1,5 @@
+import { ReactNode } from "react"
+
 import { CalendarIcon } from "@/app/conf/_design-system/pixelarticons/calendar-icon"
 import { PinIcon } from "@/app/conf/_design-system/pixelarticons/pin-icon"
 
@@ -6,12 +8,17 @@ import GraphQLFoundationWordmark from "../../assets/graphql-foundation-wordmark.
 import { ImageLoaded } from "../image-loaded"
 import blurBean from "./blur-bean-cropped.webp"
 import clsx from "clsx"
+import {
+  StripesDecoration,
+  StripesDecorationProps,
+} from "@/app/conf/_design-system/stripes-decoration"
 
 export type HeroProps = {
   pageName?: string
   children: React.ReactNode
   bottom?: React.ReactNode
   colorScheme?: "primary" | "neutral"
+  stripes?: ReactNode
 } & (
   | { year: string | number; subtitle?: never }
   | { year?: never; subtitle: string }
@@ -23,19 +30,21 @@ export function Hero(props: HeroProps) {
   return (
     <article
       className={clsx(
-        "gql-conf-navbar-strip relative isolate flex flex-col justify-center selection:bg-blk/40 before:bg-white/30 dark:bg-pri-darker dark:text-neu-900 dark:selection:bg-white/40 before:dark:bg-blk/40",
-        colorScheme === "primary" ? "bg-pri-base text-neu-0" : "bg-neu-100",
+        "gql-conf-navbar-strip relative isolate flex flex-col justify-center selection:bg-blk/40 before:bg-white/30 before:dark:bg-blk/40",
+        colorScheme === "primary"
+          ? "bg-pri-base text-neu-0 dark:bg-pri-darker dark:text-neu-900 dark:selection:bg-white/40"
+          : "bg-neu-100 dark:bg-neu-50/25",
       )}
     >
       <article className="relative">
-        <HeroStripes />
+        {props.stripes || <HeroStripes />}
         <div className="gql-conf-container mx-auto flex max-w-full flex-col gap-12 overflow-hidden p-4 pt-6 sm:p-8 sm:pt-12 md:gap-12 md:bg-left md:p-12 lg:px-24 lg:pb-16 lg:pt-24">
           <div className="flex gap-10 max-md:flex-col md:justify-between">
             {props.pageName ? (
               <div>
                 <span
                   className={clsx(
-                    "typography-h3",
+                    "typography-body-lg lg:typography-h3",
                     colorScheme === "primary"
                       ? "text-sec-base"
                       : "text-pri-base",
@@ -92,40 +101,31 @@ export function HeroDateAndLocation() {
   )
 }
 
-const maskEven =
-  "repeating-linear-gradient(to right, transparent, transparent 12px, black 12px, black 24px)"
-const maskOdd =
-  "repeating-linear-gradient(to right, black, black 12px, transparent 12px, transparent 24px)"
-
-export function HeroStripes() {
+export interface HeroStripesProps extends StripesDecorationProps {
+  className?: string
+}
+export function HeroStripes({ className, ...rest }: HeroStripesProps) {
   return (
     <ImageLoaded
       role="presentation"
       image={blurBean}
-      className="pointer-events-none absolute inset-x-0 bottom-[-385px] top-[-203px] -z-10 translate-y-12 opacity-0 transition duration-[400ms] ease-linear [mask-size:100%_50%] data-[loaded=true]:translate-y-0 data-[loaded=true]:opacity-100 sm:[mask-size:125%] xl:[mask-size:100%]"
+      className={clsx(
+        "pointer-events-none absolute inset-x-0 bottom-[-385px] top-[-203px] -z-10 translate-y-12 opacity-0 transition duration-[400ms] ease-linear [mask-size:100%_50%] data-[loaded=true]:translate-y-0 data-[loaded=true]:opacity-100 sm:[mask-size:125%] xl:[mask-size:100%]",
+        className,
+      )}
       style={{
         maskImage: `url(${blurBean.src})`,
         WebkitMaskImage: `url(${blurBean.src})`,
-        // maskSize: "100%", // todo: (very low priority) need the newly exported full blur bean with rotation to match the mobile design 1-1
         maskRepeat: "no-repeat",
         WebkitMaskRepeat: "no-repeat",
         maskPosition: "center",
         WebkitMaskPosition: "center",
       }}
     >
-      <div
-        className="absolute inset-0 bg-[linear-gradient(180deg,hsl(var(--color-pri-light))_0%,hsl(319deg_100%_90%_/_0.2)_100%)] dark:bg-[linear-gradient(180deg,hsl(var(--color-pri-dark))_0%,hsl(319_100%_20%_/_1)_100%)]"
-        style={{
-          maskImage: maskEven,
-          WebkitMaskImage: maskEven,
-        }}
-      />
-      <div
-        className="absolute inset-0 bg-[linear-gradient(180deg,hsl(319deg_100%_90%_/_0.2)_0%,hsl(var(--color-pri-base))_100%)] dark:bg-[linear-gradient(180deg,hsl(319_100%_30%_/_1)_0%,hsl(var(--color-pri-dark))_100%)]"
-        style={{
-          maskImage: maskOdd,
-          WebkitMaskImage: maskOdd,
-        }}
+      <StripesDecoration
+        evenClassName="bg-[linear-gradient(180deg,hsl(var(--color-pri-light))_0%,hsl(319deg_100%_90%_/_0.2)_100%)] dark:bg-[linear-gradient(180deg,hsl(var(--color-pri-dark))_0%,hsl(319_100%_20%_/_1)_100%)]"
+        oddClassName="bg-[linear-gradient(180deg,hsl(319deg_100%_90%_/_0.2)_0%,hsl(var(--color-pri-base))_100%)] dark:bg-[linear-gradient(180deg,hsl(319_100%_30%_/_1)_0%,hsl(var(--color-pri-dark))_100%)]"
+        {...rest}
       />
     </ImageLoaded>
   )