diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile
index c7b20c90..97b47757 100644
--- a/.devcontainer/Dockerfile
+++ b/.devcontainer/Dockerfile
@@ -1,5 +1,5 @@
 # Update the VARIANT arg in docker-compose.yml to pick a Node version
-FROM mcr.microsoft.com/vscode/devcontainers/typescript-node:20-bookworm
+FROM mcr.microsoft.com/vscode/devcontainers/typescript-node:22-bookworm
 
 # Update args in docker-compose.yaml to set the UID/GID of the "node" user.
 ARG USER_UID=1000
diff --git a/.devcontainer/post-create.sh b/.devcontainer/post-create.sh
index 8a3ccf8c..b7019d6a 100644
--- a/.devcontainer/post-create.sh
+++ b/.devcontainer/post-create.sh
@@ -1,6 +1,7 @@
 sudo chown -R node:node /home/node
 
 curl -fsSL https://bun.sh/install | bash -s "bun-v1.1.38"
+
 git config diff.lockb.textconv bun
 git config diff.lockb.binary true
 
diff --git a/apps/captainofbass.com/src/app/music/page.tsx b/apps/captainofbass.com/src/app/music/page.tsx
index 7c3ca40c..15e85a5b 100644
--- a/apps/captainofbass.com/src/app/music/page.tsx
+++ b/apps/captainofbass.com/src/app/music/page.tsx
@@ -1,12 +1,11 @@
-import dynamic from 'next/dynamic'
+import MusicClient from './pageClient'
 
 import { PageContainer } from '@mikeallisonjs/shared-react-components'
 
-const DynamicMusicClient = dynamic(() => import('./pageClient'), { ssr: false })
 export default function Music() {
   return (
     <PageContainer>
-      <DynamicMusicClient />
+      <MusicClient />
     </PageContainer>
   )
 }
diff --git a/apps/captainssounds.com/next-env.d.ts b/apps/captainssounds.com/next-env.d.ts
index 40c3d680..1b3be084 100644
--- a/apps/captainssounds.com/next-env.d.ts
+++ b/apps/captainssounds.com/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/apps/captainssounds.com/src/app/error.tsx b/apps/captainssounds.com/src/app/error.tsx
index 6f3c781a..ca49c3ab 100644
--- a/apps/captainssounds.com/src/app/error.tsx
+++ b/apps/captainssounds.com/src/app/error.tsx
@@ -25,6 +25,7 @@ export default function Error({
       </p>
       <button
         className="mx-auto mt-4 flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white hover:opacity-90"
+        type="button"
         onClick={() => reset()}
       >
         Try Again
diff --git a/apps/captainssounds.com/src/components/carousel.tsx b/apps/captainssounds.com/src/components/carousel.tsx
deleted file mode 100644
index c6608b1c..00000000
--- a/apps/captainssounds.com/src/components/carousel.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import Link from 'next/link'
-
-import { getCollectionProducts } from '../lib/shopify'
-
-import { GridTileImage } from './grid/tile'
-
-export async function Carousel() {
-  // Collections that start with `hidden-*` are hidden from the search page.
-  const products = await getCollectionProducts({
-    collection: 'frontpage'
-  })
-
-  if (!products?.length) return null
-
-  // Purposefully duplicating products to make the carousel loop and not run out of products on wide screens.
-  const carouselProducts = [...products, ...products, ...products]
-
-  return (
-    <div className=" w-full overflow-x-auto pb-6 pt-1">
-      <ul className="animate-carousel flex gap-4">
-        {carouselProducts.map((product, i) => (
-          <li
-            key={`${product.handle}${i}`}
-            className="relative aspect-square h-[30vh] max-h-[275px] w-2/3 max-w-[475px] flex-none md:w-1/3"
-          >
-            <Link
-              href={`/product/${product.handle}`}
-              className="relative h-full w-full"
-            >
-              <GridTileImage
-                alt={product.title}
-                label={{
-                  title: product.title,
-                  amount: product.priceRange.maxVariantPrice.amount,
-                  currencyCode: product.priceRange.maxVariantPrice.currencyCode
-                }}
-                src={product.featuredImage?.url}
-                fill
-                sizes="(min-width: 1024px) 25vw, (min-width: 768px) 33vw, 50vw"
-              />
-            </Link>
-          </li>
-        ))}
-      </ul>
-    </div>
-  )
-}
diff --git a/apps/captainssounds.com/src/components/collections.tsx b/apps/captainssounds.com/src/components/collections.tsx
deleted file mode 100644
index 24fc10df..00000000
--- a/apps/captainssounds.com/src/components/collections.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import clsx from 'clsx'
-import { Suspense } from 'react'
-
-import { db } from '../lib/drizzle'
-
-import FilterList from './filterList'
-
-async function CollectionList() {
-  const categories = await db.query.category.findMany({
-    where: (category, { eq }) => eq(category.inNavigation, true),
-    orderBy: (category, { asc }) => [asc(category.order)]
-  })
-  const collections = [
-    {
-      title: 'Home',
-      path: '/'
-    },
-    ...categories.map((category) => ({
-      title: category.name,
-      path: `/search/${category.id}`
-    })),
-    {
-      title: 'All',
-      path: '/search'
-    }
-  ]
-  return <FilterList list={collections} title="" />
-}
-
-const skeleton = 'mb-3 h-4 w-5/6 animate-pulse rounded'
-const activeAndTitles = 'bg-neutral-800 dark:bg-neutral-300'
-const items = 'bg-neutral-400 dark:bg-neutral-700'
-
-export default function Collections() {
-  return (
-    <Suspense
-      fallback={
-        <div className="col-span-2 hidden h-[400px] w-full flex-none py-4 lg:block">
-          <div className={clsx(skeleton, activeAndTitles)} />
-          <div className={clsx(skeleton, activeAndTitles)} />
-          <div className={clsx(skeleton, items)} />
-          <div className={clsx(skeleton, items)} />
-          <div className={clsx(skeleton, items)} />
-          <div className={clsx(skeleton, items)} />
-          <div className={clsx(skeleton, items)} />
-          <div className={clsx(skeleton, items)} />
-          <div className={clsx(skeleton, items)} />
-          <div className={clsx(skeleton, items)} />
-        </div>
-      }
-    >
-      <CollectionList />
-    </Suspense>
-  )
-}
diff --git a/apps/captainssounds.com/src/components/navbar/index.tsx b/apps/captainssounds.com/src/components/navbar/index.tsx
index 5ec38195..28af42d6 100644
--- a/apps/captainssounds.com/src/components/navbar/index.tsx
+++ b/apps/captainssounds.com/src/components/navbar/index.tsx
@@ -2,12 +2,9 @@ import { SignInButton, SignedIn, SignedOut } from '@clerk/nextjs'
 
 import Image from 'next/image'
 import Link from 'next/link'
-import { Suspense } from 'react'
 
 import { UserButton } from '../userButton'
 
-import Search, { SearchSkeleton } from './search'
-
 export default async function Navbar() {
   return (
     <>
diff --git a/apps/captainssounds.com/src/components/navbar/mobileMenu.tsx b/apps/captainssounds.com/src/components/navbar/mobileMenu.tsx
index 48ac1ce0..1315d655 100644
--- a/apps/captainssounds.com/src/components/navbar/mobileMenu.tsx
+++ b/apps/captainssounds.com/src/components/navbar/mobileMenu.tsx
@@ -63,6 +63,7 @@ export default function MobileMenu() {
               <div className="p-4">
                 <button
                   className="mb-4 flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors dark:border-neutral-700 dark:text-white"
+                  type="button"
                   onClick={closeMobileMenu}
                   aria-label="Close mobile menu"
                 >
diff --git a/apps/captainssounds.com/src/components/product/gallery.tsx b/apps/captainssounds.com/src/components/product/gallery.tsx
deleted file mode 100644
index c2ae22ea..00000000
--- a/apps/captainssounds.com/src/components/product/gallery.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-'use client'
-
-import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline'
-import Image from 'next/image'
-import Link from 'next/link'
-import { usePathname, useSearchParams } from 'next/navigation'
-
-import { createUrl } from '../../lib/utils'
-import { GridTileImage } from '../grid/tile'
-
-export function Gallery({
-  images
-}: {
-  images: { src: string; altText: string }[]
-}) {
-  const pathname = usePathname()
-  const searchParams = useSearchParams()
-  const imageSearchParam = searchParams.get('image')
-  const imageIndex = imageSearchParam ? Number.parseInt(imageSearchParam) : 0
-
-  const nextSearchParams = new URLSearchParams(searchParams.toString())
-  const nextImageIndex = imageIndex + 1 < images.length ? imageIndex + 1 : 0
-  nextSearchParams.set('image', nextImageIndex.toString())
-  const nextUrl = createUrl(pathname, nextSearchParams)
-
-  const previousSearchParams = new URLSearchParams(searchParams.toString())
-  const previousImageIndex =
-    imageIndex === 0 ? images.length - 1 : imageIndex - 1
-  previousSearchParams.set('image', previousImageIndex.toString())
-  const previousUrl = createUrl(pathname, previousSearchParams)
-
-  const buttonClassName =
-    'h-full px-6 transition-all ease-in-out hover:scale-110 hover:text-black dark:hover:text-white flex items-center justify-center'
-
-  return (
-    <>
-      <div className="relative aspect-square h-full max-h-[550px] w-full overflow-hidden">
-        {images[imageIndex] && (
-          <Image
-            className="h-full w-full object-contain"
-            fill
-            sizes="(min-width: 1024px) 66vw, 100vw"
-            alt={images[imageIndex]?.altText as string}
-            src={images[imageIndex]?.src as string}
-            priority={true}
-          />
-        )}
-
-        {images.length > 1 ? (
-          <div className="absolute bottom-[15%] flex w-full justify-center">
-            <div className="mx-auto flex h-11 items-center rounded-full border border-white bg-neutral-50/80 text-neutral-500 backdrop-blur dark:border-black dark:bg-neutral-900/80">
-              <Link
-                aria-label="Previous product image"
-                href={previousUrl}
-                className={buttonClassName}
-                scroll={false}
-              >
-                <ArrowLeftIcon className="h-5" />
-              </Link>
-              <div className="mx-1 h-6 w-px bg-neutral-500" />
-              <Link
-                aria-label="Next product image"
-                href={nextUrl}
-                className={buttonClassName}
-                scroll={false}
-              >
-                <ArrowRightIcon className="h-5" />
-              </Link>
-            </div>
-          </div>
-        ) : null}
-      </div>
-
-      {images.length > 1 ? (
-        <ul className="my-12 flex items-center justify-center gap-2 overflow-auto py-1 lg:mb-0">
-          {images.map((image, index) => {
-            const isActive = index === imageIndex
-            const imageSearchParams = new URLSearchParams(
-              searchParams.toString()
-            )
-
-            imageSearchParams.set('image', index.toString())
-
-            return (
-              <li key={image.src} className="h-20 w-20">
-                <Link
-                  aria-label="Enlarge product image"
-                  href={createUrl(pathname, imageSearchParams)}
-                  scroll={false}
-                  className="h-full w-full"
-                >
-                  <GridTileImage
-                    alt={image.altText}
-                    src={image.src}
-                    width={80}
-                    height={80}
-                    active={isActive}
-                  />
-                </Link>
-              </li>
-            )
-          })}
-        </ul>
-      ) : null}
-    </>
-  )
-}
diff --git a/apps/captainssounds.com/src/components/product/productDescription.tsx b/apps/captainssounds.com/src/components/product/productDescription.tsx
deleted file mode 100644
index 06c62157..00000000
--- a/apps/captainssounds.com/src/components/product/productDescription.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { Suspense } from 'react'
-
-import type { Product } from '../../lib/shopify/types'
-import { AddToCart } from '../cart/addToCart'
-import Price from '../price'
-import Prose from '../prose'
-
-import { VariantSelector } from './variantSelector'
-
-export function ProductDescription({ product }: { product: Product }) {
-  return (
-    <>
-      <div className="mb-6 flex flex-col border-b pb-6 dark:border-neutral-700">
-        <h1 className="mb-2 text-5xl font-medium">{product.title}</h1>
-        <div className="mr-auto w-auto rounded-full bg-blue-600 p-2 text-sm text-white">
-          <Price
-            amount={product.priceRange.maxVariantPrice.amount}
-            currencyCode={product.priceRange.maxVariantPrice.currencyCode}
-          />
-        </div>
-      </div>
-      <Suspense fallback={null}>
-        <VariantSelector
-          options={product.options}
-          variants={product.variants}
-        />
-      </Suspense>
-
-      {product.descriptionHtml ? (
-        <Prose
-          className="mb-6 text-sm leading-tight dark:text-white/[60%]"
-          html={product.descriptionHtml}
-        />
-      ) : null}
-
-      <Suspense fallback={null}>
-        <AddToCart
-          variants={product.variants}
-          availableForSale={product.availableForSale}
-        />
-      </Suspense>
-    </>
-  )
-}
diff --git a/apps/captainssounds.com/src/components/product/variantSelector.tsx b/apps/captainssounds.com/src/components/product/variantSelector.tsx
deleted file mode 100644
index a67f6c1a..00000000
--- a/apps/captainssounds.com/src/components/product/variantSelector.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-'use client'
-
-import clsx from 'clsx'
-import { usePathname, useRouter, useSearchParams } from 'next/navigation'
-
-import type { ProductOption, ProductVariant } from '../../lib/shopify/types'
-import { createUrl } from '../../lib/utils'
-
-type Combination = {
-  id: string
-  availableForSale: boolean
-  [key: string]: string | boolean // ie. { color: 'Red', size: 'Large', ... }
-}
-
-export function VariantSelector({
-  options,
-  variants
-}: {
-  options: ProductOption[]
-  variants: ProductVariant[]
-}) {
-  const router = useRouter()
-  const pathname = usePathname()
-  const searchParams = useSearchParams()
-  const hasNoOptionsOrJustOneOption =
-    !options.length || (options.length === 1 && options[0]?.values.length === 1)
-
-  if (hasNoOptionsOrJustOneOption) {
-    return null
-  }
-
-  const combinations: Combination[] = variants.map((variant) => ({
-    id: variant.id,
-    availableForSale: variant.availableForSale,
-    ...variant.selectedOptions.reduce(
-      (accumulator: Record<string, string>, option) => {
-        accumulator[option.name.toLowerCase()] = option.value
-        return accumulator
-      },
-      {}
-    )
-  }))
-
-  return options.map((option) => (
-    <dl className="mb-8" key={option.id}>
-      <dt className="mb-4 text-sm uppercase tracking-wide">{option.name}</dt>
-      <dd className="flex flex-wrap gap-3">
-        {option.values.map((value) => {
-          const optionNameLowerCase = option.name.toLowerCase()
-
-          // Base option params on current params so we can preserve any other param state in the url.
-          const optionSearchParams = new URLSearchParams(
-            searchParams.toString()
-          )
-
-          // Update the option params using the current option to reflect how the url *would* change,
-          // if the option was clicked.
-          optionSearchParams.set(optionNameLowerCase, value)
-          const optionUrl = createUrl(pathname, optionSearchParams)
-
-          // In order to determine if an option is available for sale, we need to:
-          //
-          // 1. Filter out all other param state
-          // 2. Filter out invalid options
-          // 3. Check if the option combination is available for sale
-          //
-          // This is the "magic" that will cross check possible variant combinations and preemptively
-          // disable combinations that are not available. For example, if the color gray is only available in size medium,
-          // then all other sizes should be disabled.
-          const filtered = Array.from(optionSearchParams.entries()).filter(
-            ([key, value]) =>
-              options.find(
-                (option) =>
-                  option.name.toLowerCase() === key &&
-                  option.values.includes(value)
-              )
-          )
-          const isAvailableForSale = combinations.find((combination) =>
-            filtered.every(
-              ([key, value]) =>
-                combination[key] === value && combination.availableForSale
-            )
-          )
-
-          // The option is active if it's in the url params.
-          const isActive = searchParams.get(optionNameLowerCase) === value
-
-          return (
-            <button
-              key={value}
-              aria-disabled={!isAvailableForSale}
-              disabled={!isAvailableForSale}
-              onClick={() => {
-                router.replace(optionUrl, { scroll: false })
-              }}
-              title={`${option.name} ${value}${!isAvailableForSale ? ' (Out of Stock)' : ''}`}
-              className={clsx(
-                'flex min-w-[48px] items-center justify-center rounded-full border bg-neutral-100 px-2 py-1 text-sm dark:border-neutral-800 dark:bg-neutral-900',
-                {
-                  'cursor-default ring-2 ring-blue-600': isActive,
-                  'ring-1 ring-transparent transition duration-300 ease-in-out hover:scale-110 hover:ring-blue-600 ':
-                    !isActive && isAvailableForSale,
-                  'relative z-10 cursor-not-allowed overflow-hidden bg-neutral-100 text-neutral-500 ring-1 ring-neutral-300 before:absolute before:inset-x-0 before:-z-10 before:h-px before:-rotate-45 before:bg-neutral-300 before:transition-transform dark:bg-neutral-900 dark:text-neutral-400 dark:ring-neutral-700 before:dark:bg-neutral-700':
-                    !isAvailableForSale
-                }
-              )}
-            >
-              {value}
-            </button>
-          )
-        })}
-      </dd>
-    </dl>
-  ))
-}
diff --git a/apps/captainssounds.com/src/components/productGridItems.tsx b/apps/captainssounds.com/src/components/productGridItems.tsx
deleted file mode 100644
index 3a3140d8..00000000
--- a/apps/captainssounds.com/src/components/productGridItems.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import Link from 'next/link'
-
-import type { Product } from '../lib/shopify/types'
-
-import Grid from './grid'
-import { GridTileImage } from './grid/tile'
-
-export default function ProductGridItems({
-  products
-}: {
-  products: Product[]
-}) {
-  return (
-    <>
-      {products.map((product) => (
-        <Grid.Item key={product.handle} className="animate-fadeIn">
-          <Link
-            className="relative inline-block h-full w-full"
-            href={`/product/${product.handle}`}
-          >
-            <GridTileImage
-              alt={product.title}
-              label={{
-                title: product.title,
-                amount: product.priceRange.maxVariantPrice.amount,
-                currencyCode: product.priceRange.maxVariantPrice.currencyCode
-              }}
-              src={product.featuredImage?.url}
-              fill
-              sizes="(min-width: 768px) 33vw, (min-width: 640px) 50vw, 100vw"
-            />
-          </Link>
-        </Grid.Item>
-      ))}
-    </>
-  )
-}
diff --git a/apps/mikeallisonjs.com/next-env.d.ts b/apps/mikeallisonjs.com/next-env.d.ts
index 4f11a03d..1b3be084 100644
--- a/apps/mikeallisonjs.com/next-env.d.ts
+++ b/apps/mikeallisonjs.com/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/bun.lockb b/bun.lockb
index 3e48211b..81a59d29 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index a57fd002..6e7bfcc1 100644
--- a/package.json
+++ b/package.json
@@ -54,8 +54,8 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-toggle": "^1.1.0",
     "@react-email/components": "^0.0.31",
-    "@sentry/nextjs": "^8.12.0",
-    "@sentry/utils": "^8.12.0",
+    "@sentry/nextjs": "^8.47.0",
+    "@sentry/utils": "^8.47.0",
     "@stripe/react-stripe-js": "^3.0.0",
     "@stripe/stripe-js": "^5.0.0",
     "@tabler/icons-react": "^3.6.0",
@@ -63,16 +63,14 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "drizzle-orm": "^0.38.0",
-    "flowbite": "^2.3.0",
-    "flowbite-react": "^0.10.0",
     "form-data": "^4.0.0",
     "framer-motion": "^11.2.11",
     "geist": "^1.3.0",
     "lucide-react": "^0.469.0",
     "mailgun.js": "^10.2.1",
-    "next": "14.2.21",
+    "next": "15.1.2",
     "next-themes": "^0.4.0",
-    "posthog-js": "^1.138.0",
+    "posthog-js": "^1.203.1",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "react-email": "^3.0.0",
diff --git a/packages/shared-react-components/src/musicPlayer/context.tsx b/packages/shared-react-components/src/musicPlayer/context.tsx
index fc6d229b..19c58e5d 100644
--- a/packages/shared-react-components/src/musicPlayer/context.tsx
+++ b/packages/shared-react-components/src/musicPlayer/context.tsx
@@ -18,7 +18,7 @@ export function MusicPlayerProvider({
   children,
   ...props
 }: Partial<MusicPlayerProviderProps>) {
-  const storeRef = useRef<MusicStore>()
+  const storeRef = useRef<MusicStore>(null)
   if (!storeRef.current) {
     storeRef.current = createMusicStore(props)
   }
diff --git a/packages/shared-react-components/src/musicPlayer/player.tsx b/packages/shared-react-components/src/musicPlayer/player.tsx
index 758e62bf..280d1cde 100644
--- a/packages/shared-react-components/src/musicPlayer/player.tsx
+++ b/packages/shared-react-components/src/musicPlayer/player.tsx
@@ -4,7 +4,7 @@ import { useEffect, useRef } from 'react'
 
 import { cn } from '@mikeallisonjs/shared-react-lib'
 
-import { Drawer, DrawerContent } from '../drawer'
+import { Drawer, DrawerContent, DrawerTitle } from '../drawer'
 
 import { useMusicPlayerContext } from './context'
 import Controls from './controls'
@@ -123,6 +123,7 @@ export default function Player({
         modal={false}
       >
         <DrawerContent className={cn('z-20 md:z-0 md:pb-[62px]', className)}>
+          <DrawerTitle>Playlist</DrawerTitle>
           <div className="flex pt-2 md:hidden">
             <div
               className={cn(
diff --git a/packages/shared-react-components/src/pastEvents.tsx b/packages/shared-react-components/src/pastEvents.tsx
index 2ad3f127..3d7d5088 100644
--- a/packages/shared-react-components/src/pastEvents.tsx
+++ b/packages/shared-react-components/src/pastEvents.tsx
@@ -3,7 +3,7 @@
 import Image from 'next/image'
 import { useState } from 'react'
 
-import { Dialog, DialogContent } from './dialog'
+import { Dialog, DialogContent, DialogTitle } from './dialog'
 
 type PastEventsProps = {
   images: string[]
@@ -47,6 +47,7 @@ export default function PastEvents({ images }: PastEventsProps) {
       </div>
       <Dialog open={selectedImage != null} onOpenChange={handleOpenChanged}>
         <DialogContent className="z-50 min-h-[calc(100vh-140px)] min-w-[100vw]">
+          <DialogTitle>Image</DialogTitle>
           {selectedImage && (
             <Image
               src={`/images/flyers/${selectedImage}`}
diff --git a/packages/shared-react-lib/src/shadcnUtils/tailwind.config.ts b/packages/shared-react-lib/src/shadcnUtils/tailwind.config.ts
index c0e7355f..2c937895 100644
--- a/packages/shared-react-lib/src/shadcnUtils/tailwind.config.ts
+++ b/packages/shared-react-lib/src/shadcnUtils/tailwind.config.ts
@@ -85,7 +85,7 @@ export const tailwindConfig = {
       }
     }
   },
-  plugins: [TailwindAnimate, addVariablesForColors, require('flowbite/plugin')]
+  plugins: [TailwindAnimate, addVariablesForColors]
 }
 
 function addVariablesForColors({