Barbie pink theme for April 1st (#3071)

Author: norawl

apps/web/public/aprilfools-2026-barbietv.png

@@ -48,7 +48,7 @@ const mapToImageAndName = (item: Group | Company, type: OrganizerType) => (
   <Link
     href={createOrganizerPageUrl(item)}
     key={item.name}
-    className="flex flex-row gap-2 items-center px-3 py-2 rounded-lg border border-gray-200 hover:bg-gray-100 dark:border-stone-700 dark:hover:bg-stone-800"
+    className="flex flex-row gap-2 items-center px-3 py-2 rounded-lg border border-gray-200 hover:bg-gray-100 dark:border-stone-700 dark:hover:bg-stone-800 in-data-[theme=pink]:hover:bg-pink-300 in-data-[theme=pink]:border-pink-300"
   >
     {item.imageUrl && (
       <Image
@@ -199,11 +199,11 @@ const EventContent = ({ event, attendance, parentEvent, parentAttendance, punish
       </div>
 
       <div className="flex flex-1 flex-col gap-8 sm:gap-4 md:min-w-88 lg:min-w-104">
-        <div className="sm:hidden h-1 rounded-full w-full bg-gray-200 dark:bg-stone-700" />
+        <div className="sm:hidden h-1 rounded-full w-full bg-gray-200 dark:bg-stone-700 in-data-[theme=pink]:bg-pink-500" />
         <TimeLocationBox event={event} />
         {attendance !== null && (
           <>
-            <div className="sm:hidden h-1 rounded-full w-full bg-gray-200 dark:bg-stone-700" />
+            <div className="sm:hidden h-1 rounded-full w-full bg-gray-200 dark:bg-stone-700 in-data-[theme=pink]:bg-pink-500" />
 
             <AttendanceCard
               initialAttendance={attendance}

apps/web/public/glitter.mp4

@@ -216,7 +216,7 @@ export const AttendanceCard = ({
   }
 
   return (
-    <section className="flex flex-col gap-4 min-h-[6rem] sm:p-4 sm:rounded-xl sm:border sm:border-gray-200 sm:dark:border-stone-800 sm:dark:bg-stone-800">
+    <section className="flex flex-col gap-4 min-h-[6rem] sm:p-4 sm:rounded-xl sm:border sm:border-gray-200 sm:dark:border-stone-800 sm:dark:bg-stone-800 sm:in-data-[theme=pink]:border-none sm:in-data-[theme=pink]:bg-pink-100">
       <Title element="h2" size="lg">
         Påmelding
       </Title>

apps/web/src/app/arrangementer/[slug]/[eventId]/page.tsx

@@ -26,7 +26,7 @@ export const EventHeader: FC<Props> = ({ event, showDashboardLink }) => {
         tiltMaxAngleX={0.25}
         tiltMaxAngleY={0.25}
         glareMaxOpacity={0.1}
-        className="rounded-xl bg-gray-100 dark:bg-stone-800"
+        className="rounded-xl bg-gray-100 dark:bg-stone-800 in-data-[theme=pink]:bg-pink-100"
       >
         <div className="group relative w-full aspect-video md:aspect-24/9 overflow-hidden rounded-xl">
           {event.imageUrl ? (
@@ -60,7 +60,7 @@ export const EventHeader: FC<Props> = ({ event, showDashboardLink }) => {
             <div className="absolute right-3 top-3 z-10 hidden opacity-0 transition-opacity duration-200 md:block md:group-hover:opacity-100">
               <Button
                 variant="solid"
-                className="p-2 rounded-md bg-black/40 text-white hover:bg-black/50 dark:bg-black/40 dark:hover:bg-black/50"
+                className="p-2 rounded-md bg-black/40 text-white hover:bg-black/50 dark:bg-black/40 dark:hover:bg-black/50 in-data-[theme=pink]:bg-pink-500/40 in-data-[theme=pink]:hover:bg-pink-500/50"
                 onClick={() => setShowFullImage((prev) => !prev)}
                 aria-label={showFullImage ? "Fyll rammen" : "Se hele bildet"}
               >
@@ -86,7 +86,7 @@ export const EventHeader: FC<Props> = ({ event, showDashboardLink }) => {
             target="_blank"
             rel="noopener noreferrer"
             variant="unstyled"
-            className="w-fit p-1.5 bg-blue-100 hover:bg-blue-50 rounded-md transition-colors dark:bg-stone-700 dark:hover:bg-stone-600 gap-1.5"
+            className="w-fit p-1.5 bg-blue-100 hover:bg-blue-50 rounded-md transition-colors dark:bg-stone-700 dark:hover:bg-stone-600 in-data-[theme=pink]:bg-pink-100 in-data-[theme=pink]:hover:bg-pink-300 gap-1.5"
             title="Rediger arrangement"
           >
             <IconEdit className="size-[1.25em] md:w-6 md:h-6" />

apps/web/src/app/arrangementer/components/AttendanceCard/AttendanceCard.tsx

@@ -194,11 +194,11 @@ export const EventList: FC<EventListProps> = ({
 
 const Divider = ({ text }: { text: string }) => (
   <div className="w-full flex flex-row items-center gap-2 sm:-my-1">
-    <span className="grow h-[2px] bg-gray-200 dark:bg-stone-700 rounded-full" />
-    <Text className="text-gray-400 dark:text-stone-600 text-xs uppercase tracking-widest font-medium select-none">
+    <span className="grow h-[2px] bg-gray-200 dark:bg-stone-700 in-data-[theme=pink]:bg-pink-300 rounded-full" />
+    <Text className="text-gray-400 dark:text-stone-600 in-data-[theme=pink]:text-pink-600 text-xs uppercase tracking-widest font-medium select-none">
       {text}
     </Text>
-    <span className="grow h-[2px] bg-gray-200 dark:bg-stone-700 rounded-full" />
+    <span className="grow h-[2px] bg-gray-200 dark:bg-stone-700 in-data-[theme=pink]:bg-pink-300 rounded-full" />
   </div>
 )
 

apps/web/src/app/arrangementer/components/EventHeader.tsx

@@ -13,7 +13,7 @@ export const ActionLink = ({ href, label }: Props) => (
     <TooltipTrigger>
       <Link
         className={clsx(
-          "border border-gray-200 hover:bg-gray-100 dark:border-stone-700 dark:hover:bg-stone-700 p-1.5 rounded-lg flex items-center"
+          "border border-gray-200 hover:bg-gray-100 dark:border-stone-700 dark:hover:bg-stone-700  in-data-[theme=pink]:hover:bg-pink-200 in-data-[theme=pink]:border-pink-300 p-1.5 rounded-lg flex items-center"
         )}
         href={href}
         target="_blank"

apps/web/src/app/arrangementer/components/EventList.tsx

@@ -10,7 +10,7 @@ interface TimeLocationBoxProps {
 
 export const TimeLocationBox: FC<TimeLocationBoxProps> = ({ event }) => {
   return (
-    <section className="flex flex-col gap-4 min-h-24 rounded-lg sm:border sm:border-gray-200 sm:dark:border-stone-800 sm:dark:bg-stone-800 sm:p-4 sm:rounded-xl">
+    <section className="flex flex-col gap-4 min-h-24 rounded-lg sm:border sm:border-gray-200 sm:dark:border-stone-800 sm:dark:bg-stone-800 sm:in-data-[theme=pink]:border-none sm:in-data-[theme=pink]:bg-pink-100 sm:p-4 sm:rounded-xl">
       <Title element="h2">Oppmøte</Title>
       <div className="flex flex-col gap-6 pl-2 sm:pl-0">
         <TimeBox event={event} />

apps/web/src/app/arrangementer/components/TimeLocationBox/ActionLink.tsx

@@ -84,6 +84,7 @@ export const FilterChips = ({
             "bg-blue-100 dark:bg-sky-950",
             "text-blue-900 dark:text-sky-200",
             "hover:bg-blue-200 dark:hover:bg-sky-900",
+            "in-data-[theme=pink]:text-pink-600 in-data-[theme=pink]:hover:text-pink-700 in-data-[theme=pink]:bg-pink-100 in-data-[theme=pink]:hover:bg-pink-300",
             "transition"
           )}
         >
@@ -92,7 +93,12 @@ export const FilterChips = ({
         </button>
       ))}
 
-      <Button onClick={onResetAll} variant="solid" size="sm" className="text-sm rounded-full px-3 py-1.5">
+      <Button
+        onClick={onResetAll}
+        variant="solid"
+        size="sm"
+        className="text-sm rounded-full px-3 py-1.5 in-data-[theme=pink]:text-pink-600 in-data-[theme=pink]:hover:text-pink-700 in-data-[theme=pink]:bg-pink-300 in-data-[theme=pink]:hover:bg-pink-400"
+      >
         Fjern alle
       </Button>
     </div>

apps/web/src/app/arrangementer/components/TimeLocationBox/TimeLocationBox.tsx

@@ -33,13 +33,14 @@ export const GroupFilter = ({ value, onChange, groups }: GroupFilterProps) => {
         className={cn(
           "cursor-pointer w-full flex items-center justify-between gap-2 font-medium text-gray-500",
           "[&[data-state=open]>svg]:rotate-180",
-          "hover:text-gray-900 dark:text-stone-400 dark:hover:text-stone-100 transition-colors"
+          "hover:text-gray-900 dark:text-stone-400 dark:hover:text-stone-100 transition-colors",
+          "in-data-[theme=pink]:text-pink-600 in-data-[theme=pink]:hover:text-pink-700"
         )}
       >
         <div className="flex items-center gap-2 h-5.5">
           <Label className="cursor-pointer">Arrangør</Label>
           {value.length > 0 && (
-            <span className="size-5.5 flex items-center justify-center text-xs bg-blue-100 dark:bg-sky-900 text-blue-900 dark:text-sky-100 rounded-full">
+            <span className="size-5.5 flex items-center justify-center text-xs bg-blue-100 dark:bg-sky-900 in-data-[theme=pink]:bg-pink-100 text-blue-900 dark:text-sky-100 in-data-[theme=pink]:text-pink-600 in-data-[theme=pink]:hover:text-pink-700 rounded-full">
               {value.length}
             </span>
           )}
@@ -54,7 +55,7 @@ export const GroupFilter = ({ value, onChange, groups }: GroupFilterProps) => {
           "data-[state=closed]:animate-collapsible-up"
         )}
       >
-        <div className="relative flex flex-col border border-gray-200 dark:border-stone-700 rounded-xl">
+        <div className="relative flex flex-col border border-gray-200 dark:border-stone-700 in-data-[theme=pink]:border-pink-300 in-data-[theme=pink]:text-pink-600 rounded-xl">
           <div className="relative m-0.5">
             <IconSearch className="w-7 h-full pointer-events-none absolute inset-y-0 left-0 flex items-center justify-center pl-3" />
             <TextInput
@@ -65,7 +66,7 @@ export const GroupFilter = ({ value, onChange, groups }: GroupFilterProps) => {
             />
           </div>
 
-          <div className="flex flex-col gap-1 md:max-h-60 overflow-y-auto p-2 border-t border-gray-200 dark:border-stone-700">
+          <div className="flex flex-col gap-1 md:max-h-60 overflow-y-auto p-2 border-t border-gray-200 dark:border-stone-700 in-data-[theme=pink]:border-pink-300">
             {filtered.map((group) => {
               const isSelected = value.includes(group.slug)
               return (
@@ -76,8 +77,8 @@ export const GroupFilter = ({ value, onChange, groups }: GroupFilterProps) => {
                   className={cn(
                     "flex items-center justify-between px-3 py-2 rounded-md text-sm transition-colors",
                     isSelected
-                      ? "bg-blue-100 dark:bg-sky-900 text-blue-900 dark:text-sky-100"
-                      : "hover:bg-gray-100 dark:hover:bg-stone-800"
+                      ? "bg-blue-100 dark:bg-sky-900 text-blue-900 dark:text-sky-100 in-data-[theme=pink]:bg-pink-100 in-data-[theme=pink]:text-pink-600"
+                      : "hover:bg-gray-100 dark:hover:bg-stone-800 in-data-[theme=pink]:hover:bg-pink-100"
                   )}
                 >
                   <span>{group.abbreviation}</span>