From f86da147ff846a896a906971d3f71ac6d4167fbd Mon Sep 17 00:00:00 2001
From: Jamie Henson <jamie.henson@ably.com>
Date: Thu, 19 Sep 2024 12:43:55 +0100
Subject: [PATCH] chore: add theming to ProductTile

---
 src/core/ProductTile.tsx                      | 27 ++++----
 .../ProductTile.stories.tsx.snap              | 66 +++++++++----------
 src/core/ProductTile/data.ts                  | 10 +--
 3 files changed, 54 insertions(+), 49 deletions(-)

diff --git a/src/core/ProductTile.tsx b/src/core/ProductTile.tsx
index e0653de03..2c3fb134f 100644
--- a/src/core/ProductTile.tsx
+++ b/src/core/ProductTile.tsx
@@ -1,7 +1,9 @@
 import React from "react";
-import Icon from "./Icon";
+import EncapsulatedIcon from "./Icon/EncapsulatedIcon";
 import FeaturedLink from "./FeaturedLink";
 import { ProductName, products } from "./ProductTile/data";
+import { ColorClass } from "./styles/colors/types";
+import { determineThemeColor } from "./styles/colors/utils";
 
 type ProductTileProps = {
   name: ProductName;
@@ -20,23 +22,28 @@ const ProductTile = ({
 }: ProductTileProps) => {
   const { icon, label, description, link, unavailable } = products[name] ?? {};
 
+  const t = (color: ColorClass) =>
+    determineThemeColor("dark", selected ? "light" : "dark", color);
+
   return (
     <div
-      className={`rounded-lg p-12 flex flex-col gap-8 transition-colors ${selected ? "bg-neutral-300" : "bg-neutral-1200 hover:bg-neutral-1100"} ${className ?? ""}`}
+      className={`rounded-lg p-12 flex flex-col gap-8 transition-colors ${t("bg-neutral-1200")} ${selected ? "" : "hover:bg-neutral-1100"} ${className ?? ""}`}
       onClick={onClick}
     >
-      <div className="flex gap-12">
-        {icon ? <Icon name={icon} size="48" /> : null}
+      <div className="flex gap-12 items-center">
+        {icon ? (
+          <EncapsulatedIcon name={icon} theme={selected ? "light" : "dark"} />
+        ) : null}
         <div
           className={`flex ${unavailable ? "flex-row items-center gap-4" : "flex-col justify-center"} `}
         >
           <p
-            className={`${unavailable ? "ui-text-p2" : "ui-text-p3"} ${selected ? "text-neutral-800" : "text-neutral-500"} font-medium`}
+            className={`${unavailable ? "ui-text-p2" : "ui-text-p3"} ${t("text-neutral-300")} font-medium`}
           >
             Ably{" "}
           </p>
           <p
-            className={`ui-text-p2 ${selected ? "text-neutral-1300" : "text-neutral-300"} font-bold ${unavailable ? "" : "mt-[-3px]"}`}
+            className={`ui-text-p2 ${t("text-neutral-000")} font-bold ${unavailable ? "" : "mt-[-3px]"}`}
           >
             {label}
           </p>
@@ -44,21 +51,19 @@ const ProductTile = ({
       </div>
       {unavailable ? (
         <div className="-mt-8">
-          <div className="table-cell bg-neutral-1000 rounded-full px-6 py-2 text-neutral-600 tracking-tighten-0.015 font-bold text-[8px] leading-snug">
+          <div className="table-cell font-sans bg-neutral-1000 rounded-full px-6 py-2 text-gui-unavailable tracking-tighten-0.015 font-bold text-[8px] leading-snug">
             COMING SOON
           </div>
         </div>
       ) : null}
       <p
-        className={`ui-text-p3 ${selected ? "text-neutral-1000" : "text-neutral-700"} font-medium leading-snug`}
+        className={`ui-text-p3 ${selected ? "text-neutral-1000" : "text-neutral-500"} font-medium leading-snug`}
       >
         {description}
       </p>
       {selected && link ? (
         <FeaturedLink
-          additionalCSS={`ui-btn-secondary w-full hover:text-neutral-1300 mt-8 text-center inline-block ${
-            selected ? "text-neutral-1300" : "text-white"
-          }`}
+          additionalCSS={`ui-btn-secondary bg-transparent hover:bg-transparent w-full hover:text-neutral-1300 mt-8 text-center inline-block ${t("text-neutral-000")}`}
           iconColor="text-orange-600"
           url={link}
         >
diff --git a/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap b/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap
index 24770ab7a..9118fd954 100644
--- a/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap
+++ b/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap
@@ -10,15 +10,15 @@ exports[`JS Components/Product Tile ProductTileWithOverriddenStylesAndClick smok
       </use>
     </svg>
     <div class="flex flex-col justify-center ">
-      <p class="ui-text-p3 text-neutral-500 font-medium">
+      <p class="ui-text-p3 text-neutral-300 font-medium">
         Ably
       </p>
-      <p class="ui-text-p2 text-neutral-300 font-bold mt-[-3px]">
+      <p class="ui-text-p2 text-neutral-000 font-bold mt-[-3px]">
         PubSub
       </p>
     </div>
   </div>
-  <p class="ui-text-p3 text-neutral-700 font-medium leading-snug">
+  <p class="ui-text-p3 text-neutral-500 font-medium leading-snug">
     Low-level APIs to build any realtime experience
   </p>
 </div>
@@ -35,15 +35,15 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
         </use>
       </svg>
       <div class="flex flex-col justify-center ">
-        <p class="ui-text-p3 text-neutral-500 font-medium">
+        <p class="ui-text-p3 text-neutral-300 font-medium">
           Ably
         </p>
-        <p class="ui-text-p2 text-neutral-300 font-bold mt-[-3px]">
+        <p class="ui-text-p2 text-neutral-000 font-bold mt-[-3px]">
           PubSub
         </p>
       </div>
     </div>
-    <p class="ui-text-p3 text-neutral-700 font-medium leading-snug">
+    <p class="ui-text-p3 text-neutral-500 font-medium leading-snug">
       Low-level APIs to build any realtime experience
     </p>
   </div>
@@ -56,15 +56,15 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
         </use>
       </svg>
       <div class="flex flex-col justify-center ">
-        <p class="ui-text-p3 text-neutral-500 font-medium">
+        <p class="ui-text-p3 text-neutral-300 font-medium">
           Ably
         </p>
-        <p class="ui-text-p2 text-neutral-300 font-bold mt-[-3px]">
+        <p class="ui-text-p2 text-neutral-000 font-bold mt-[-3px]">
           Chat
         </p>
       </div>
     </div>
-    <p class="ui-text-p3 text-neutral-700 font-medium leading-snug">
+    <p class="ui-text-p3 text-neutral-500 font-medium leading-snug">
       Rapidly build chat features and roll-out at scale
     </p>
   </div>
@@ -77,15 +77,15 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
         </use>
       </svg>
       <div class="flex flex-col justify-center ">
-        <p class="ui-text-p3 text-neutral-500 font-medium">
+        <p class="ui-text-p3 text-neutral-300 font-medium">
           Ably
         </p>
-        <p class="ui-text-p2 text-neutral-300 font-bold mt-[-3px]">
+        <p class="ui-text-p2 text-neutral-000 font-bold mt-[-3px]">
           Spaces
         </p>
       </div>
     </div>
-    <p class="ui-text-p3 text-neutral-700 font-medium leading-snug">
+    <p class="ui-text-p3 text-neutral-500 font-medium leading-snug">
       Create collaborative environments in a few lines of code
     </p>
   </div>
@@ -98,15 +98,15 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
         </use>
       </svg>
       <div class="flex flex-col justify-center ">
-        <p class="ui-text-p3 text-neutral-500 font-medium">
+        <p class="ui-text-p3 text-neutral-300 font-medium">
           Ably
         </p>
-        <p class="ui-text-p2 text-neutral-300 font-bold mt-[-3px]">
+        <p class="ui-text-p2 text-neutral-000 font-bold mt-[-3px]">
           LiveSync
         </p>
       </div>
     </div>
-    <p class="ui-text-p3 text-neutral-700 font-medium leading-snug">
+    <p class="ui-text-p3 text-neutral-500 font-medium leading-snug">
       Sync database changes with frontend clients
     </p>
   </div>
@@ -119,25 +119,25 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
         </use>
       </svg>
       <div class="flex flex-col justify-center ">
-        <p class="ui-text-p3 text-neutral-500 font-medium">
+        <p class="ui-text-p3 text-neutral-300 font-medium">
           Ably
         </p>
-        <p class="ui-text-p2 text-neutral-300 font-bold mt-[-3px]">
+        <p class="ui-text-p2 text-neutral-000 font-bold mt-[-3px]">
           Asset Tracking
         </p>
       </div>
     </div>
-    <p class="ui-text-p3 text-neutral-700 font-medium leading-snug">
+    <p class="ui-text-p3 text-neutral-500 font-medium leading-snug">
       Simple APIs to build realtime tracking applications
     </p>
   </div>
   <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100 ">
     <div class="flex gap-12">
       <div class="flex flex-row items-center gap-4 ">
-        <p class="ui-text-p2 text-neutral-500 font-medium">
+        <p class="ui-text-p2 text-neutral-300 font-medium">
           Ably
         </p>
-        <p class="ui-text-p2 text-neutral-300 font-bold ">
+        <p class="ui-text-p2 text-neutral-000 font-bold ">
           LiveObjects
         </p>
       </div>
@@ -147,7 +147,7 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
         COMING SOON
       </div>
     </div>
-    <p class="ui-text-p3 text-neutral-700 font-medium leading-snug">
+    <p class="ui-text-p3 text-neutral-500 font-medium leading-snug">
       Sync application state across multiple devices
     </p>
   </div>
@@ -165,7 +165,7 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
         </use>
       </svg>
       <div class="flex flex-col justify-center ">
-        <p class="ui-text-p3 text-neutral-800 font-medium">
+        <p class="ui-text-p3 text-neutral-1000 font-medium">
           Ably
         </p>
         <p class="ui-text-p2 text-neutral-1300 font-bold mt-[-3px]">
@@ -198,15 +198,15 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
         </use>
       </svg>
       <div class="flex flex-col justify-center ">
-        <p class="ui-text-p3 text-neutral-500 font-medium">
+        <p class="ui-text-p3 text-neutral-300 font-medium">
           Ably
         </p>
-        <p class="ui-text-p2 text-neutral-300 font-bold mt-[-3px]">
+        <p class="ui-text-p2 text-neutral-000 font-bold mt-[-3px]">
           Chat
         </p>
       </div>
     </div>
-    <p class="ui-text-p3 text-neutral-700 font-medium leading-snug">
+    <p class="ui-text-p3 text-neutral-500 font-medium leading-snug">
       Rapidly build chat features and roll-out at scale
     </p>
   </div>
@@ -219,7 +219,7 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
         </use>
       </svg>
       <div class="flex flex-col justify-center ">
-        <p class="ui-text-p3 text-neutral-800 font-medium">
+        <p class="ui-text-p3 text-neutral-1000 font-medium">
           Ably
         </p>
         <p class="ui-text-p2 text-neutral-1300 font-bold mt-[-3px]">
@@ -252,15 +252,15 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
         </use>
       </svg>
       <div class="flex flex-col justify-center ">
-        <p class="ui-text-p3 text-neutral-500 font-medium">
+        <p class="ui-text-p3 text-neutral-300 font-medium">
           Ably
         </p>
-        <p class="ui-text-p2 text-neutral-300 font-bold mt-[-3px]">
+        <p class="ui-text-p2 text-neutral-000 font-bold mt-[-3px]">
           LiveSync
         </p>
       </div>
     </div>
-    <p class="ui-text-p3 text-neutral-700 font-medium leading-snug">
+    <p class="ui-text-p3 text-neutral-500 font-medium leading-snug">
       Sync database changes with frontend clients
     </p>
   </div>
@@ -273,7 +273,7 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
         </use>
       </svg>
       <div class="flex flex-col justify-center ">
-        <p class="ui-text-p3 text-neutral-800 font-medium">
+        <p class="ui-text-p3 text-neutral-1000 font-medium">
           Ably
         </p>
         <p class="ui-text-p2 text-neutral-1300 font-bold mt-[-3px]">
@@ -300,10 +300,10 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
   <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100 ">
     <div class="flex gap-12">
       <div class="flex flex-row items-center gap-4 ">
-        <p class="ui-text-p2 text-neutral-500 font-medium">
+        <p class="ui-text-p2 text-neutral-300 font-medium">
           Ably
         </p>
-        <p class="ui-text-p2 text-neutral-300 font-bold ">
+        <p class="ui-text-p2 text-neutral-000 font-bold ">
           LiveObjects
         </p>
       </div>
@@ -313,7 +313,7 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
         COMING SOON
       </div>
     </div>
-    <p class="ui-text-p3 text-neutral-700 font-medium leading-snug">
+    <p class="ui-text-p3 text-neutral-500 font-medium leading-snug">
       Sync application state across multiple devices
     </p>
   </div>
diff --git a/src/core/ProductTile/data.ts b/src/core/ProductTile/data.ts
index 185aa8cb9..6b75c00a2 100644
--- a/src/core/ProductTile/data.ts
+++ b/src/core/ProductTile/data.ts
@@ -23,31 +23,31 @@ export const products: Products = {
   pubsub: {
     label: "PubSub",
     description: "Low-level APIs to build any realtime experience",
-    icon: "icon-product-pubsub-encapsulated",
+    icon: "icon-product-pubsub",
     link: "/docs/products/channels",
   },
   chat: {
     label: "Chat",
     description: "Rapidly build chat features and roll-out at scale",
-    icon: "icon-product-chat-encapsulated",
+    icon: "icon-product-chat",
     link: "/docs/products/chat",
   },
   spaces: {
     label: "Spaces",
     description: "Create collaborative environments in a few lines of code",
-    icon: "icon-product-spaces-encapsulated",
+    icon: "icon-product-spaces",
     link: "/docs/products/spaces",
   },
   liveSync: {
     label: "LiveSync",
     description: "Sync database changes with frontend clients",
-    icon: "icon-product-livesync-encapsulated",
+    icon: "icon-product-livesync",
     link: "/docs/products/livesync",
   },
   assetTracking: {
     label: "Asset Tracking",
     description: "Simple APIs to build realtime tracking applications",
-    icon: "icon-product-asset-tracking-encapsulated",
+    icon: "icon-product-asset-tracking",
     link: "/docs/products/asset-tracking",
   },
   liveObjects: {