From 85b676c90caae420e79b6c3aadbeafcf7a06934b Mon Sep 17 00:00:00 2001
From: Jamie Henson <jamie.henson@ably.com>
Date: Mon, 18 Nov 2024 22:16:08 +0000
Subject: [PATCH 1/7] chore: bump version to 14.9.0

---
 package.json | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 3da91365a..dca92dea0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "14.8.0",
+  "version": "14.9.0",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",
@@ -59,9 +59,8 @@
     "build:swc": "swc src/core src/reset -d dist --copy-files --include-dotfiles --strip-leading-paths --config-file .swc --ignore **/*.stories.tsx,**/*.snap",
     "build:tsc": "tsc && node tsc.js && rm -r types",
     "build:cleanup": "mv dist/* . && rm -r dist",
-    "build:colors": "ts-node scripts/compute-colors.ts",
     "build:sprites": "ts-node scripts/generate-sprites.ts",
-    "build": "yarn build:prebuild && yarn build:colors && yarn build:sprites && yarn build:swc && yarn build:tsc && yarn build:cleanup",
+    "build": "yarn build:prebuild && yarn build:sprites && yarn build:swc && yarn build:tsc && yarn build:cleanup",
     "watch": "yarn build:swc -w",
     "format:check": "prettier -c *.{js,ts} src/**/*.{js,ts,tsx}",
     "format:write": "prettier -w *.{js,ts} src/**/*.{js,ts,tsx}",

From a97e2dd74b048fe92c1591df2b12ba2c3a34d6bf Mon Sep 17 00:00:00 2001
From: Jamie Henson <jamie.henson@ably.com>
Date: Mon, 18 Nov 2024 17:29:29 +0000
Subject: [PATCH 2/7] chore: update code text size values

---
 src/core/styles/properties.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/core/styles/properties.css b/src/core/styles/properties.css
index fde0800e7..c1fa135a6 100644
--- a/src/core/styles/properties.css
+++ b/src/core/styles/properties.css
@@ -199,8 +199,8 @@
     --fs-menu2: 0.938rem;
     --fs-menu3: 0.875rem;
     --fs-quote: 1.25rem;
-    --fs-code: 0.938rem;
-    --fs-code2: 0.813rem;
+    --fs-code: 0.813rem;
+    --fs-code2: 0.688rem;
 
     --lh-dense: 1;
     --lh-tight: 1.125;

From b6224b6480023bf40995c523010c95d87f4020bd Mon Sep 17 00:00:00 2001
From: Jamie Henson <jamie.henson@ably.com>
Date: Mon, 18 Nov 2024 17:29:59 +0000
Subject: [PATCH 3/7] fix: add module declarations for scripts folder

---
 tsc.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/tsc.js b/tsc.js
index 6e5a51c1d..236930f56 100644
--- a/tsc.js
+++ b/tsc.js
@@ -64,6 +64,12 @@ dtsFiles.forEach((file) => {
   );
 });
 
+const additionalModules = ["@ably/ui/core/scripts"];
+
+additionalModules.forEach((module) => {
+  fs.appendFileSync(indexPath, `declare module '${module}';\n\n`, "utf8");
+});
+
 console.log(
   `🔬 index.d.ts file has been generated with ${dtsFiles.length} exports.`,
 );

From 634539ac313a54e91c618107f2af1eeaf371dde1 Mon Sep 17 00:00:00 2001
From: Jamie Henson <jamie.henson@ably.com>
Date: Mon, 18 Nov 2024 22:16:59 +0000
Subject: [PATCH 4/7] chore: prepare more fitting dark mode styling for
 Storybook

---
 .storybook/application.css | 30 ++++++++++++++++++++++++++++++
 .storybook/preview.tsx     |  4 ++--
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/.storybook/application.css b/.storybook/application.css
index 37b2d1916..1e82818f7 100644
--- a/.storybook/application.css
+++ b/.storybook/application.css
@@ -28,3 +28,33 @@
     var(--double) var(--double),
     var(--double) var(--double);
 }
+
+.ui-theme-dark,
+.ui-theme-dark .sbdocs {
+  @apply bg-neutral-1300;
+}
+
+.sb-show-main.dark .sb-bar,
+.sb-show-main.dark .sb-anchor > p > code {
+  @apply bg-neutral-1200;
+}
+
+.sb-show-main.dark .docblock-code-toggle {
+  @apply bg-neutral-1200 text-neutral-000;
+}
+
+.sb-show-main.dark .sbdocs h1,
+.sb-show-main.dark .sb-anchor > h3,
+.sb-show-main.dark .sb-anchor > p,
+.sb-show-main.dark .sb-anchor > p > code {
+  @apply text-neutral-000;
+}
+
+.sb-show-main.dark .sbdocs td,
+.sb-show-main.dark .sbdocs th {
+  @apply text-neutral-200;
+}
+
+.sb-show-main.dark .sbdocs td {
+  @apply bg-neutral-1100 text-neutral-200;
+}
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 214641d38..390e87e5e 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -52,8 +52,8 @@ const preview = {
         brandImage: brandImage,
       },
       stylePreview: true,
-      darkClass: ["bg-neutral-1300"],
-      lightClass: ["bg-neutral-000"],
+      darkClass: ["dark"],
+      lightClass: ["light"],
     },
   },
   loaders: [mswLoader],

From 1e9e54ef054c741dd40210c666082b0f56cf7c68 Mon Sep 17 00:00:00 2001
From: Jamie Henson <jamie.henson@ably.com>
Date: Mon, 18 Nov 2024 22:17:53 +0000
Subject: [PATCH 5/7] feat: use Tailwind theming prefixes over custom approach

---
 .storybook/application.css                    |   22 +-
 .storybook/preview.tsx                        |    4 +-
 scripts/compute-colors.ts                     |   81 -
 .../ContactFooter.stories.tsx.snap            |    6 +-
 .../__snapshots__/Expander.stories.tsx.snap   |    2 +-
 src/core/FeaturedLink.tsx                     |    4 +-
 .../FeaturedLink.stories.tsx.snap             |   10 +-
 .../__snapshots__/Footer.stories.tsx.snap     |   12 +-
 src/core/Icon.tsx                             |   97 +-
 src/core/Icon/EncapsulatedIcon.tsx            |   12 +-
 src/core/Icon/Icon.stories.tsx                |   66 +-
 .../Icon/__snapshots__/Icon.stories.tsx.snap  | 1637 +++++++----------
 src/core/Pricing/PricingCards.stories.tsx     |   11 +-
 src/core/Pricing/PricingCards.tsx             |  165 +-
 src/core/Pricing/data.tsx                     |   44 +-
 src/core/Pricing/types.ts                     |    6 +-
 src/core/ProductTile.tsx                      |   61 +-
 src/core/ProductTile/ProductTile.stories.tsx  |    2 +-
 .../ProductTile.stories.tsx.snap              |  206 +--
 .../__snapshots__/Slider.stories.tsx.snap     |   42 +-
 .../__snapshots__/Table.stories.tsx.snap      |   30 +-
 src/core/Tooltip.tsx                          |   12 +-
 .../__snapshots__/Tooltip.stories.tsx.snap    |   24 +-
 src/core/hooks/useTheming.tsx                 |   25 -
 .../__snapshots__/Button.stories.tsx.snap     |   18 +-
 .../__snapshots__/Forms.stories.tsx.snap      |    4 +-
 src/core/styles/colors/Colors.stories.tsx     |   43 +-
 .../__snapshots__/Colors.stories.tsx.snap     |  543 +++---
 src/core/styles/colors/types.ts               |   10 +-
 tailwind.config.js                            |    1 +
 30 files changed, 1430 insertions(+), 1770 deletions(-)
 delete mode 100644 scripts/compute-colors.ts
 delete mode 100644 src/core/hooks/useTheming.tsx

diff --git a/.storybook/application.css b/.storybook/application.css
index 1e82818f7..7bb271778 100644
--- a/.storybook/application.css
+++ b/.storybook/application.css
@@ -34,27 +34,27 @@
   @apply bg-neutral-1300;
 }
 
-.sb-show-main.dark .sb-bar,
-.sb-show-main.dark .sb-anchor > p > code {
+.ui-theme-dark .sb-bar,
+.ui-theme-dark .sb-anchor > p > code {
   @apply bg-neutral-1200;
 }
 
-.sb-show-main.dark .docblock-code-toggle {
+.ui-theme-dark .docblock-code-toggle {
   @apply bg-neutral-1200 text-neutral-000;
 }
 
-.sb-show-main.dark .sbdocs h1,
-.sb-show-main.dark .sb-anchor > h3,
-.sb-show-main.dark .sb-anchor > p,
-.sb-show-main.dark .sb-anchor > p > code {
+.ui-theme-dark .sbdocs-content > *,
+.ui-theme-dark .sb-anchor > h3,
+.ui-theme-dark .sb-anchor > p,
+.ui-theme-dark .sb-anchor > p > code {
   @apply text-neutral-000;
 }
 
-.sb-show-main.dark .sbdocs td,
-.sb-show-main.dark .sbdocs th {
+.ui-theme-dark .sbdocs td,
+.ui-theme-dark .sbdocs th {
   @apply text-neutral-200;
 }
 
-.sb-show-main.dark .sbdocs td {
-  @apply bg-neutral-1100 text-neutral-200;
+.ui-theme-dark .sbdocs td {
+  @apply !bg-neutral-1100 text-neutral-200;
 }
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 390e87e5e..96a24aa1c 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -52,8 +52,8 @@ const preview = {
         brandImage: brandImage,
       },
       stylePreview: true,
-      darkClass: ["dark"],
-      lightClass: ["light"],
+      darkClass: ["ui-theme-dark"],
+      lightClass: ["ui-theme-light"],
     },
   },
   loaders: [mswLoader],
diff --git a/scripts/compute-colors.ts b/scripts/compute-colors.ts
deleted file mode 100644
index 95e8a2511..000000000
--- a/scripts/compute-colors.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import fs from "fs";
-import path from "path";
-import { invertTailwindClassVariant } from "../src/core/styles/colors/utils";
-import { colors, prefixes, variants } from "../src/core/styles/colors/types";
-
-const directoryPath = path.join(__dirname, "../src");
-const outputPath = path.join(
-  __dirname,
-  "../src/core/styles/colors",
-  "computed-colors.json",
-);
-
-const joinedVariants = variants.join("|");
-const joinedPrefixes = prefixes.join("|");
-const joinedColors = colors.join("|");
-const pattern = `themeColor\\("((?:${joinedVariants}-)(${joinedPrefixes})-(${joinedColors})-(000|[1-9]00|1[0-3]00))"\\)`;
-const regex = new RegExp(pattern, "g");
-
-const findStringInFiles = (dir: string) => {
-  const results: string[] = [];
-
-  const readDirectory = (dir: string) => {
-    let files: string[];
-    try {
-      files = fs.readdirSync(dir);
-    } catch (error) {
-      console.error(`Error reading directory ${dir}:`, error);
-      return;
-    }
-
-    files.forEach((file) => {
-      const filePath = path.join(dir, file);
-      let stat;
-      try {
-        stat = fs.statSync(filePath);
-      } catch (error) {
-        console.error(`Error accessing ${filePath}:`, error);
-        return;
-      }
-
-      if (stat.isDirectory()) {
-        readDirectory(filePath);
-      } else if (filePath.endsWith(".tsx")) {
-        let content = "";
-        try {
-          content = fs.readFileSync(filePath, "utf-8");
-          const matches = [...content.matchAll(regex)].map((match) => match[1]);
-
-          if (matches.length > 0) {
-            results.push(...matches);
-          }
-        } catch (error) {
-          console.error(`Error reading file ${filePath}:`, error);
-          return;
-        }
-      }
-    });
-  };
-
-  readDirectory(dir);
-  return Array.from(new Set(results)).sort();
-};
-
-const matches = findStringInFiles(directoryPath);
-
-const flippedMatches = matches.map((match) =>
-  invertTailwindClassVariant(match),
-);
-
-try {
-  const outputDir = path.dirname(outputPath);
-  if (!fs.existsSync(outputDir)) {
-    fs.mkdirSync(outputDir, { recursive: true });
-  }
-  fs.writeFileSync(outputPath, JSON.stringify(flippedMatches));
-  console.log(
-    `🎨 Tailwind theme classes have been computed and written to JSON files.`,
-  );
-} catch (error) {
-  console.error(`Error persisting computed colors:`, error);
-}
diff --git a/src/core/ContactFooter/__snapshots__/ContactFooter.stories.tsx.snap b/src/core/ContactFooter/__snapshots__/ContactFooter.stories.tsx.snap
index 9678682c5..82458df10 100644
--- a/src/core/ContactFooter/__snapshots__/ContactFooter.stories.tsx.snap
+++ b/src/core/ContactFooter/__snapshots__/ContactFooter.stories.tsx.snap
@@ -6,7 +6,7 @@ exports[`JS Components/Contact Footer Default smoke-test 1`] = `
 >
   <div class="w-full bp-lg max-w-screen-xl mx-auto py-64 grid grid-cols-1 md:grid-cols-3 ui-grid-gap ui-grid-px">
     <div class="ui-contact-footer-box">
-      <svg class=" block mb-16"
+      <svg class="block mb-16"
            style="width: 3rem; height: 3rem;"
       >
         <use xlink:href="#sprite-icon-display-live-chat">
@@ -31,7 +31,7 @@ exports[`JS Components/Contact Footer Default smoke-test 1`] = `
       </button>
     </div>
     <div class="ui-contact-footer-box">
-      <svg class=" block mb-16"
+      <svg class="block mb-16"
            style="width: 3rem; height: 3rem;"
       >
         <use xlink:href="#sprite-icon-display-call-mobile">
@@ -58,7 +58,7 @@ exports[`JS Components/Contact Footer Default smoke-test 1`] = `
       </div>
     </div>
     <div class="ui-contact-footer-box">
-      <svg class=" block mb-16"
+      <svg class="block mb-16"
            style="width: 3rem; height: 3rem;"
       >
         <use xlink:href="#sprite-icon-display-tech-account-comms">
diff --git a/src/core/Expander/__snapshots__/Expander.stories.tsx.snap b/src/core/Expander/__snapshots__/Expander.stories.tsx.snap
index 4e68d52d9..673fc874d 100644
--- a/src/core/Expander/__snapshots__/Expander.stories.tsx.snap
+++ b/src/core/Expander/__snapshots__/Expander.stories.tsx.snap
@@ -311,7 +311,7 @@ exports[`JS Components/Expander OverriddenControls play-test 1`] = `
 >
   <span class="flex items-center gap-8">
     Away with you, knave.
-    <svg class="text-pink-500 "
+    <svg class="text-pink-500"
          style="width: 24px; height: 24px;"
     >
       <use xlink:href="#sprite-icon-gui-warning">
diff --git a/src/core/FeaturedLink.tsx b/src/core/FeaturedLink.tsx
index a3c946ba2..8ca468985 100644
--- a/src/core/FeaturedLink.tsx
+++ b/src/core/FeaturedLink.tsx
@@ -1,13 +1,13 @@
 import React, { CSSProperties, ReactNode } from "react";
 
 import Icon from "./Icon";
-import { ColorClass } from "./styles/colors/types";
+import { ColorClass, ColorThemeSet } from "./styles/colors/types";
 
 type FeaturedLinkProps = {
   url: string;
   children: ReactNode;
   textSize?: string;
-  iconColor?: ColorClass;
+  iconColor?: ColorClass | ColorThemeSet;
   flush?: boolean;
   reverse?: boolean;
   additionalCSS?: string;
diff --git a/src/core/FeaturedLink/__snapshots__/FeaturedLink.stories.tsx.snap b/src/core/FeaturedLink/__snapshots__/FeaturedLink.stories.tsx.snap
index fd12cdfdd..aae203bdb 100644
--- a/src/core/FeaturedLink/__snapshots__/FeaturedLink.stories.tsx.snap
+++ b/src/core/FeaturedLink/__snapshots__/FeaturedLink.stories.tsx.snap
@@ -6,7 +6,7 @@ exports[`JS Components/Featured Link Default smoke-test 1`] = `
    style="--featured-link-icon-size: var(--fs-p2);"
 >
   Featured link
-  <svg class=" align-middle ml-8 relative -top-1 -left-4 transition-[left] group-hover/featured-link:left-0"
+  <svg class="align-middle ml-8 relative -top-1 -left-4 transition-[left] group-hover/featured-link:left-0"
        style="width: calc(var(--featured-link-icon-size) * 1.25); height: calc(var(--featured-link-icon-size) * 1.25);"
   >
     <use xlink:href="#sprite-icon-gui-link-arrow">
@@ -21,7 +21,7 @@ exports[`JS Components/Featured Link Disabled smoke-test 1`] = `
    style="--featured-link-icon-size: var(--fs-p2);"
 >
   Featured link
-  <svg class=" align-middle ml-8 relative -top-1 -left-4 transition-[left] "
+  <svg class="align-middle ml-8 relative -top-1 -left-4 transition-[left] "
        style="width: calc(var(--featured-link-icon-size) * 1.25); height: calc(var(--featured-link-icon-size) * 1.25);"
   >
     <use xlink:href="#sprite-icon-gui-link-arrow">
@@ -36,7 +36,7 @@ exports[`JS Components/Featured Link Large smoke-test 1`] = `
    style="--featured-link-icon-size: var(--fs-p1);"
 >
   Featured link
-  <svg class=" align-middle ml-8 relative -top-1 -left-4 transition-[left] group-hover/featured-link:left-0"
+  <svg class="align-middle ml-8 relative -top-1 -left-4 transition-[left] group-hover/featured-link:left-0"
        style="width: calc(var(--featured-link-icon-size) * 1.25); height: calc(var(--featured-link-icon-size) * 1.25);"
   >
     <use xlink:href="#sprite-icon-gui-link-arrow">
@@ -65,7 +65,7 @@ exports[`JS Components/Featured Link Reverse smoke-test 1`] = `
    class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group/featured-link ui-text-p2 py-8 "
    style="--featured-link-icon-size: var(--fs-p2);"
 >
-  <svg class=" align-middle mr-8 relative -top-1 -right-4 transition-[right] group-hover/featured-link:right-0 transform rotate-180"
+  <svg class="align-middle mr-8 relative -top-1 -right-4 transition-[right] group-hover/featured-link:right-0 transform rotate-180"
        style="width: calc(var(--featured-link-icon-size) * 1.25); height: calc(var(--featured-link-icon-size) * 1.25);"
   >
     <use xlink:href="#sprite-icon-gui-link-arrow">
@@ -81,7 +81,7 @@ exports[`JS Components/Featured Link Small smoke-test 1`] = `
    style="--featured-link-icon-size: var(--fs-p3);"
 >
   Featured link
-  <svg class=" align-middle ml-8 relative -top-1 -left-4 transition-[left] group-hover/featured-link:left-0"
+  <svg class="align-middle ml-8 relative -top-1 -left-4 transition-[left] group-hover/featured-link:left-0"
        style="width: calc(var(--featured-link-icon-size) * 1.25); height: calc(var(--featured-link-icon-size) * 1.25);"
   >
     <use xlink:href="#sprite-icon-gui-link-arrow">
diff --git a/src/core/Footer/__snapshots__/Footer.stories.tsx.snap b/src/core/Footer/__snapshots__/Footer.stories.tsx.snap
index 0b6c5f6fd..91fcadf5f 100644
--- a/src/core/Footer/__snapshots__/Footer.stories.tsx.snap
+++ b/src/core/Footer/__snapshots__/Footer.stories.tsx.snap
@@ -312,7 +312,7 @@ exports[`JS Components/Footer Default smoke-test 1`] = `
                href="https://twitter.com/ablyrealtime"
                title="Ably on X"
             >
-              <svg class=" "
+              <svg class
                    style="width: 1.5rem; height: 1.5rem;"
               >
                 <use xlink:href="#sprite-icon-social-x">
@@ -323,7 +323,7 @@ exports[`JS Components/Footer Default smoke-test 1`] = `
                href="https://www.linkedin.com/company/ably-realtime"
                title="Ably on LinkedIn"
             >
-              <svg class=" "
+              <svg class
                    style="width: 1.5rem; height: 1.5rem;"
               >
                 <use xlink:href="#sprite-icon-social-linkedin">
@@ -334,7 +334,7 @@ exports[`JS Components/Footer Default smoke-test 1`] = `
                href="https://github.com/ably/"
                title="Ably on Github"
             >
-              <svg class=" "
+              <svg class
                    style="width: 1.5rem; height: 1.5rem;"
               >
                 <use xlink:href="#sprite-icon-social-github">
@@ -345,7 +345,7 @@ exports[`JS Components/Footer Default smoke-test 1`] = `
                href="https://discord.gg/jwBPhEZ9g5"
                title="Ably on Discord"
             >
-              <svg class=" "
+              <svg class
                    style="width: 1.5rem; height: 1.5rem;"
               >
                 <use xlink:href="#sprite-icon-social-discord">
@@ -360,7 +360,7 @@ exports[`JS Components/Footer Default smoke-test 1`] = `
                class="h-24 text-cool-black hover:text-icon-glassdoor"
                title="Ably reviews on glassdoor"
             >
-              <svg class=" "
+              <svg class
                    style="width: 1.5rem; height: 1.5rem;"
               >
                 <use xlink:href="#sprite-icon-social-glassdoor">
@@ -388,7 +388,7 @@ exports[`JS Components/Footer Default smoke-test 1`] = `
              href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
              title="Ably reviews on glassdoor"
           >
-            <svg class=" "
+            <svg class
                  style="width: 1.5rem; height: 1.5rem;"
             >
               <use xlink:href="#sprite-icon-social-glassdoor">
diff --git a/src/core/Icon.tsx b/src/core/Icon.tsx
index 7bc8f1592..38291019a 100644
--- a/src/core/Icon.tsx
+++ b/src/core/Icon.tsx
@@ -1,14 +1,16 @@
-import React, { CSSProperties } from "react";
+import React, { CSSProperties, useCallback } from "react";
+import clsx from "clsx";
+
 import { defaultIconSecondaryColor } from "./Icon/secondary-colors";
 import { IconName, IconSize } from "./Icon/types";
-import { ColorClass } from "./styles/colors/types";
+import { ColorClass, ColorThemeSet } from "./styles/colors/types";
 import { convertTailwindClassToVar } from "./styles/colors/utils";
 
 export type IconProps = {
   name: IconName;
   size?: IconSize;
-  color?: ColorClass;
-  secondaryColor?: ColorClass;
+  color?: ColorClass | ColorThemeSet;
+  secondaryColor?: ColorClass | ColorThemeSet;
   additionalCSS?: string;
 };
 
@@ -16,26 +18,75 @@ const Icon = ({
   name,
   size = "0.75rem",
   color,
-  secondaryColor = defaultIconSecondaryColor(name),
+  secondaryColor,
   additionalCSS = "",
   ...additionalAttributes
-}: IconProps) => (
-  <svg
-    className={`${color ?? ""} ${additionalCSS}`}
-    style={
-      {
-        width: size,
-        height: size,
-        ...(secondaryColor && {
-          "--ui-icon-secondary-color":
-            convertTailwindClassToVar(secondaryColor),
-        }),
-      } as CSSProperties
-    }
-    {...additionalAttributes}
-  >
-    <use xlinkHref={`#sprite-${name}`} />
-  </svg>
-);
+}: IconProps) => {
+  const [lightSecondaryColor, darkSecondaryColor] = (
+    secondaryColor ?? ""
+  ).split(" dark:") as [ColorClass, ColorClass | undefined];
+
+  const iconSvg = useCallback(
+    (secondaryColor?: ColorClass, isDark?: boolean, isThemed?: boolean) => {
+      let secondaryColorValue;
+      if (secondaryColor) {
+        secondaryColorValue = convertTailwindClassToVar(secondaryColor);
+      } else if (defaultIconSecondaryColor(name)) {
+        secondaryColorValue = convertTailwindClassToVar(
+          defaultIconSecondaryColor(name),
+        );
+      }
+
+      return (
+        <svg
+          className={clsx(
+            { [`${color}`]: color },
+            { [`${additionalCSS}`]: additionalCSS },
+            {
+              "hidden dark:block": secondaryColor && !isDark && isThemed,
+            },
+            {
+              "dark:hidden": secondaryColor && isDark && isThemed,
+            },
+          )}
+          style={
+            {
+              width: size,
+              height: size,
+              ...(secondaryColorValue && {
+                "--ui-icon-secondary-color": secondaryColorValue,
+              }),
+            } as CSSProperties
+          }
+          {...additionalAttributes}
+        >
+          <use xlinkHref={`#sprite-${name}`} />
+        </svg>
+      );
+    },
+    [
+      name,
+      size,
+      color,
+      additionalCSS,
+      additionalAttributes,
+      lightSecondaryColor,
+      darkSecondaryColor,
+    ],
+  );
+
+  if (lightSecondaryColor && darkSecondaryColor) {
+    return (
+      <>
+        {iconSvg(lightSecondaryColor, false, !!darkSecondaryColor)}
+        {iconSvg(darkSecondaryColor, true, true)}
+      </>
+    );
+  } else if (lightSecondaryColor) {
+    return iconSvg(lightSecondaryColor, false, !!darkSecondaryColor);
+  } else {
+    return iconSvg();
+  }
+};
 
 export default Icon;
diff --git a/src/core/Icon/EncapsulatedIcon.tsx b/src/core/Icon/EncapsulatedIcon.tsx
index 0e2b7976c..9f55f6565 100644
--- a/src/core/Icon/EncapsulatedIcon.tsx
+++ b/src/core/Icon/EncapsulatedIcon.tsx
@@ -1,11 +1,8 @@
 import React from "react";
 import Icon, { IconProps } from "../Icon";
-import useTheming from "../hooks/useTheming";
-import { Theme } from "../styles/colors/types";
 import { IconSize } from "./types";
 
 type EncapsulatedIconProps = {
-  theme?: Theme;
   className?: string;
   innerClassName?: string;
   iconSize?: IconSize;
@@ -15,17 +12,12 @@ const ICON_SIZE_REDUCTION = 12;
 const ICON_HEIGHT_REDUCTION = 2;
 
 const EncapsulatedIcon = ({
-  theme = "dark",
   size = "40px",
   iconSize,
   className,
   innerClassName,
   ...iconProps
 }: EncapsulatedIconProps) => {
-  const { themeColor } = useTheming({
-    baseTheme: "dark",
-    theme,
-  });
   let computedIconSize = size,
     computedIconHeight = size;
 
@@ -43,11 +35,11 @@ const EncapsulatedIcon = ({
 
   return (
     <div
-      className={`p-1 rounded-lg ${theme === "light" ? "bg-gradient-to-t" : "bg-gradient-to-b"} ${themeColor("from-neutral-900")} ${className ?? ""}`}
+      className={`p-1 rounded-lg bg-gradient-to-t dark:bg-gradient-to-b ${className ?? "from-neutral-400 dark:from-neutral-900"}`}
       style={{ width: size, height: size }}
     >
       <div
-        className={`flex items-center justify-center rounded-lg ${themeColor("bg-neutral-1100")} ${innerClassName ?? ""}`}
+        className={`flex items-center justify-center rounded-lg ${innerClassName ?? "bg-neutral-200 dark:bg-neutral-1100"}`}
         style={{ height: computedIconHeight }}
       >
         <Icon size={computedIconSize} {...iconProps} />
diff --git a/src/core/Icon/Icon.stories.tsx b/src/core/Icon/Icon.stories.tsx
index dbd454ad0..a7daad380 100644
--- a/src/core/Icon/Icon.stories.tsx
+++ b/src/core/Icon/Icon.stories.tsx
@@ -3,7 +3,6 @@ import Icon from "../Icon";
 import EncapsulatedIcon from "./EncapsulatedIcon";
 import loadIcons from "../icons";
 import { IconName, iconNames } from "./types";
-import { Theme } from "../styles/colors/types";
 
 export default {
   title: "JS Components/Icon",
@@ -14,25 +13,23 @@ export default {
   tags: ["autodocs"],
 };
 
-const renderIcons = (
-  iconSet: IconName[],
-  encapsulated?: boolean,
-  theme?: Theme,
-) => {
+const renderIcons = (iconSet: IconName[], encapsulated?: boolean) => {
   loadIcons();
 
   return (
     <div className="grid grid-cols-2 sm:grid-cols-4 ui-grid-gap max-w-screen-lg mb-64">
       {iconSet.map((icon) => (
         <div
-          className="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12"
+          className="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg"
           key={icon}
         >
-          <code className="ui-text-code mb-8 block">{icon}</code>
+          <code className="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
+            {icon}
+          </code>
           <div className="border inline-flex flex-0">
             <div className="flex pi-checkered-bg">
               {encapsulated ? (
-                <EncapsulatedIcon name={icon} theme={theme ?? "dark"} />
+                <EncapsulatedIcon name={icon} />
               ) : (
                 <Icon
                   name={icon}
@@ -69,14 +66,10 @@ export const ProductIcons = {
   render: () => renderIcons([...iconNames.product]),
 };
 
-export const DarkEncapsulatedIcons = {
+export const EncapsulatedIcons = {
   render: () => renderIcons([...iconNames.product], true),
 };
 
-export const LightEncapsulatedIcons = {
-  render: () => renderIcons([...iconNames.product], true, "light"),
-};
-
 export const OtherIcons = {
   render: () => renderIcons([...iconNames.other]),
 };
@@ -84,24 +77,45 @@ export const OtherIcons = {
 export const IconWithSecondaryColor = {
   render: () => (
     <div className="flex items-center justify-center p-16 gap-24">
-      <Icon
-        name="icon-gui-check-circled-fill"
-        color="text-active-orange"
-        size="1.5rem"
-      />
-      <Icon
-        name="icon-gui-check-circled-fill"
-        color="text-active-orange"
-        secondaryColor="text-neutral-1300"
-        size="1.5rem"
-      />
+      <div className="flex gap-24">
+        <h4 className="ui-text-h4 text-neutral-1300 dark:text-neutral-000">
+          Non-themed:
+        </h4>
+        <Icon
+          name="icon-gui-check-circled-fill"
+          color="text-orange-600"
+          size="1.5rem"
+        />
+        <Icon
+          name="icon-gui-check-circled-fill"
+          color="text-orange-600"
+          secondaryColor="text-neutral-1300"
+          size="1.5rem"
+        />
+      </div>
+      <div className="flex gap-24">
+        <h4 className="ui-text-h4 text-neutral-1300 dark:text-neutral-000">
+          Themed:
+        </h4>
+        <Icon
+          name="icon-gui-check-circled-fill"
+          color="text-orange-600"
+          size="1.5rem"
+        />
+        <Icon
+          name="icon-gui-check-circled-fill"
+          color="text-orange-200 dark:text-orange-1000"
+          secondaryColor="text-orange-600 dark:text-orange-600"
+          size="1.5rem"
+        />
+      </div>
     </div>
   ),
   parameters: {
     docs: {
       description: {
         story:
-          "By setting the `secondaryColor` prop, you can change the color of the icon's secondary elements, if supported in the underlying SVG. You can set either a CSS variable directly, or use a Tailwind class.\n\nThe right-hand icon here (`icon-gui-check-circled-fill`) has this property applied, resulting in it having a dark checkmark.\n\nTo add support to an existing SVG, replace a `fill` attribute value with `var(--ui-icon-secondary-color)`.",
+          "By setting the `secondaryColor` prop, you can change the color of the icon's secondary elements, if supported in the underlying SVG. You can set either a CSS variable directly, or use a Tailwind class.\n\nThe right-hand icon here (`icon-gui-check-circled-fill`) has this property applied, resulting in it having a dark checkmark in the non-themed case, and inverted colors in the themed case.\n\nTo add support to an existing SVG, replace a `fill` attribute value with `var(--ui-icon-secondary-color)`.",
       },
     },
   },
diff --git a/src/core/Icon/__snapshots__/Icon.stories.tsx.snap b/src/core/Icon/__snapshots__/Icon.stories.tsx.snap
index b8fa0de23..ca85aea62 100644
--- a/src/core/Icon/__snapshots__/Icon.stories.tsx.snap
+++ b/src/core/Icon/__snapshots__/Icon.stories.tsx.snap
@@ -1,290 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`JS Components/Icon DarkEncapsulatedIcons smoke-test 1`] = `
-<div class="grid grid-cols-2 sm:grid-cols-4 ui-grid-gap max-w-screen-lg mb-64">
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
-      icon-product-asset-tracking-mono
-    </code>
-    <div class="border inline-flex flex-0">
-      <div class="flex pi-checkered-bg">
-        <div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
-             style="width: 40px; height: 40px;"
-        >
-          <div class="flex items-center justify-center rounded-lg bg-neutral-1100 "
-               style="height: 38px;"
-          >
-            <svg class=" "
-                 style="width: 28px; height: 28px;"
-            >
-              <use xlink:href="#sprite-icon-product-asset-tracking-mono">
-              </use>
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
-      icon-product-asset-tracking
-    </code>
-    <div class="border inline-flex flex-0">
-      <div class="flex pi-checkered-bg">
-        <div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
-             style="width: 40px; height: 40px;"
-        >
-          <div class="flex items-center justify-center rounded-lg bg-neutral-1100 "
-               style="height: 38px;"
-          >
-            <svg class=" "
-                 style="width: 28px; height: 28px;"
-            >
-              <use xlink:href="#sprite-icon-product-asset-tracking">
-              </use>
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
-      icon-product-chat-mono
-    </code>
-    <div class="border inline-flex flex-0">
-      <div class="flex pi-checkered-bg">
-        <div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
-             style="width: 40px; height: 40px;"
-        >
-          <div class="flex items-center justify-center rounded-lg bg-neutral-1100 "
-               style="height: 38px;"
-          >
-            <svg class=" "
-                 style="width: 28px; height: 28px;"
-            >
-              <use xlink:href="#sprite-icon-product-chat-mono">
-              </use>
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
-      icon-product-chat
-    </code>
-    <div class="border inline-flex flex-0">
-      <div class="flex pi-checkered-bg">
-        <div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
-             style="width: 40px; height: 40px;"
-        >
-          <div class="flex items-center justify-center rounded-lg bg-neutral-1100 "
-               style="height: 38px;"
-          >
-            <svg class=" "
-                 style="width: 28px; height: 28px;"
-            >
-              <use xlink:href="#sprite-icon-product-chat">
-              </use>
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
-      icon-product-liveobjects
-    </code>
-    <div class="border inline-flex flex-0">
-      <div class="flex pi-checkered-bg">
-        <div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
-             style="width: 40px; height: 40px;"
-        >
-          <div class="flex items-center justify-center rounded-lg bg-neutral-1100 "
-               style="height: 38px;"
-          >
-            <svg class=" "
-                 style="width: 28px; height: 28px;"
-            >
-              <use xlink:href="#sprite-icon-product-liveobjects">
-              </use>
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
-      icon-product-livesync-mono
-    </code>
-    <div class="border inline-flex flex-0">
-      <div class="flex pi-checkered-bg">
-        <div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
-             style="width: 40px; height: 40px;"
-        >
-          <div class="flex items-center justify-center rounded-lg bg-neutral-1100 "
-               style="height: 38px;"
-          >
-            <svg class=" "
-                 style="width: 28px; height: 28px;"
-            >
-              <use xlink:href="#sprite-icon-product-livesync-mono">
-              </use>
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
-      icon-product-livesync
-    </code>
-    <div class="border inline-flex flex-0">
-      <div class="flex pi-checkered-bg">
-        <div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
-             style="width: 40px; height: 40px;"
-        >
-          <div class="flex items-center justify-center rounded-lg bg-neutral-1100 "
-               style="height: 38px;"
-          >
-            <svg class=" "
-                 style="width: 28px; height: 28px;"
-            >
-              <use xlink:href="#sprite-icon-product-livesync">
-              </use>
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
-      icon-product-platform-mono
-    </code>
-    <div class="border inline-flex flex-0">
-      <div class="flex pi-checkered-bg">
-        <div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
-             style="width: 40px; height: 40px;"
-        >
-          <div class="flex items-center justify-center rounded-lg bg-neutral-1100 "
-               style="height: 38px;"
-          >
-            <svg class=" "
-                 style="width: 28px; height: 28px;"
-            >
-              <use xlink:href="#sprite-icon-product-platform-mono">
-              </use>
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
-      icon-product-pubsub-mono
-    </code>
-    <div class="border inline-flex flex-0">
-      <div class="flex pi-checkered-bg">
-        <div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
-             style="width: 40px; height: 40px;"
-        >
-          <div class="flex items-center justify-center rounded-lg bg-neutral-1100 "
-               style="height: 38px;"
-          >
-            <svg class=" "
-                 style="width: 28px; height: 28px;"
-            >
-              <use xlink:href="#sprite-icon-product-pubsub-mono">
-              </use>
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
-      icon-product-pubsub
-    </code>
-    <div class="border inline-flex flex-0">
-      <div class="flex pi-checkered-bg">
-        <div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
-             style="width: 40px; height: 40px;"
-        >
-          <div class="flex items-center justify-center rounded-lg bg-neutral-1100 "
-               style="height: 38px;"
-          >
-            <svg class=" "
-                 style="width: 28px; height: 28px;"
-            >
-              <use xlink:href="#sprite-icon-product-pubsub">
-              </use>
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
-      icon-product-spaces-mono
-    </code>
-    <div class="border inline-flex flex-0">
-      <div class="flex pi-checkered-bg">
-        <div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
-             style="width: 40px; height: 40px;"
-        >
-          <div class="flex items-center justify-center rounded-lg bg-neutral-1100 "
-               style="height: 38px;"
-          >
-            <svg class=" "
-                 style="width: 28px; height: 28px;"
-            >
-              <use xlink:href="#sprite-icon-product-spaces-mono">
-              </use>
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
-      icon-product-spaces
-    </code>
-    <div class="border inline-flex flex-0">
-      <div class="flex pi-checkered-bg">
-        <div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
-             style="width: 40px; height: 40px;"
-        >
-          <div class="flex items-center justify-center rounded-lg bg-neutral-1100 "
-               style="height: 38px;"
-          >
-            <svg class=" "
-                 style="width: 28px; height: 28px;"
-            >
-              <use xlink:href="#sprite-icon-product-spaces">
-              </use>
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
 <div class="grid grid-cols-2 sm:grid-cols-4 ui-grid-gap max-w-screen-lg mb-64">
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-48hrs
     </code>
     <div class="border inline-flex flex-0">
@@ -298,8 +17,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-ably-channels
     </code>
     <div class="border inline-flex flex-0">
@@ -313,8 +32,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-about-ably-col
     </code>
     <div class="border inline-flex flex-0">
@@ -328,8 +47,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-api-keys
     </code>
     <div class="border inline-flex flex-0">
@@ -343,8 +62,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-api
     </code>
     <div class="border inline-flex flex-0">
@@ -358,8 +77,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-architectural-guidance
     </code>
     <div class="border inline-flex flex-0">
@@ -373,8 +92,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-asset-tracking-col
     </code>
     <div class="border inline-flex flex-0">
@@ -388,8 +107,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-authentication
     </code>
     <div class="border inline-flex flex-0">
@@ -403,8 +122,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-avatar-stack
     </code>
     <div class="border inline-flex flex-0">
@@ -418,8 +137,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-browser
     </code>
     <div class="border inline-flex flex-0">
@@ -433,8 +152,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-calendar
     </code>
     <div class="border inline-flex flex-0">
@@ -448,8 +167,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-call-mobile
     </code>
     <div class="border inline-flex flex-0">
@@ -463,8 +182,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-careers-col
     </code>
     <div class="border inline-flex flex-0">
@@ -478,8 +197,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-case-studies-col
     </code>
     <div class="border inline-flex flex-0">
@@ -493,8 +212,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-chat-col
     </code>
     <div class="border inline-flex flex-0">
@@ -508,8 +227,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-chat-mono
     </code>
     <div class="border inline-flex flex-0">
@@ -523,8 +242,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-chat-stack-col
     </code>
     <div class="border inline-flex flex-0">
@@ -538,8 +257,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-chat-stack
     </code>
     <div class="border inline-flex flex-0">
@@ -553,8 +272,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-cloud-servers
     </code>
     <div class="border inline-flex flex-0">
@@ -568,8 +287,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-compare-tech-col
     </code>
     <div class="border inline-flex flex-0">
@@ -583,8 +302,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-connection-state-recovery
     </code>
     <div class="border inline-flex flex-0">
@@ -598,8 +317,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-consumer-groups
     </code>
     <div class="border inline-flex flex-0">
@@ -613,8 +332,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-custom-cname
     </code>
     <div class="border inline-flex flex-0">
@@ -628,8 +347,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-custom
     </code>
     <div class="border inline-flex flex-0">
@@ -643,8 +362,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-customers-col
     </code>
     <div class="border inline-flex flex-0">
@@ -658,8 +377,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-data-broadcast-col
     </code>
     <div class="border inline-flex flex-0">
@@ -673,8 +392,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-data-broadcast-mono
     </code>
     <div class="border inline-flex flex-0">
@@ -688,8 +407,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-data-synchronization-col
     </code>
     <div class="border inline-flex flex-0">
@@ -703,8 +422,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-dedicated-cluster
     </code>
     <div class="border inline-flex flex-0">
@@ -718,8 +437,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-deltas
     </code>
     <div class="border inline-flex flex-0">
@@ -733,8 +452,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-docs-col
     </code>
     <div class="border inline-flex flex-0">
@@ -748,8 +467,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-documentation
     </code>
     <div class="border inline-flex flex-0">
@@ -763,8 +482,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-dynamic-channel-groups
     </code>
     <div class="border inline-flex flex-0">
@@ -778,8 +497,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-edge-network
     </code>
     <div class="border inline-flex flex-0">
@@ -793,8 +512,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-elasticity
     </code>
     <div class="border inline-flex flex-0">
@@ -808,8 +527,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-equalisers-mono
     </code>
     <div class="border inline-flex flex-0">
@@ -823,8 +542,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-events-col
     </code>
     <div class="border inline-flex flex-0">
@@ -838,8 +557,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-exactly-once-delivery
     </code>
     <div class="border inline-flex flex-0">
@@ -853,8 +572,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-examples-col
     </code>
     <div class="border inline-flex flex-0">
@@ -868,8 +587,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-fan-out
     </code>
     <div class="border inline-flex flex-0">
@@ -883,8 +602,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-firehose
     </code>
     <div class="border inline-flex flex-0">
@@ -898,8 +617,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-gdpr
     </code>
     <div class="border inline-flex flex-0">
@@ -913,8 +632,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-general-comms
     </code>
     <div class="border inline-flex flex-0">
@@ -928,8 +647,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-granular-permissions
     </code>
     <div class="border inline-flex flex-0">
@@ -943,8 +662,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-hipaa-mono
     </code>
     <div class="border inline-flex flex-0">
@@ -958,8 +677,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-hipaa
     </code>
     <div class="border inline-flex flex-0">
@@ -973,8 +692,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-history
     </code>
     <div class="border inline-flex flex-0">
@@ -988,8 +707,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-integrations-col
     </code>
     <div class="border inline-flex flex-0">
@@ -1003,8 +722,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-integrations
     </code>
     <div class="border inline-flex flex-0">
@@ -1018,8 +737,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-it-support-access
     </code>
     <div class="border inline-flex flex-0">
@@ -1033,8 +752,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-it-support-helpdesk
     </code>
     <div class="border inline-flex flex-0">
@@ -1048,8 +767,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-kafka-at-the-edge-col
     </code>
     <div class="border inline-flex flex-0">
@@ -1063,8 +782,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-laptop
     </code>
     <div class="border inline-flex flex-0">
@@ -1078,8 +797,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-lightbulb-col
     </code>
     <div class="border inline-flex flex-0">
@@ -1093,8 +812,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-live-chat
     </code>
     <div class="border inline-flex flex-0">
@@ -1108,8 +827,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-live-updates-results-metrics-col
     </code>
     <div class="border inline-flex flex-0">
@@ -1123,8 +842,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-map-pin
     </code>
     <div class="border inline-flex flex-0">
@@ -1138,8 +857,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-message-batching
     </code>
     <div class="border inline-flex flex-0">
@@ -1153,8 +872,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-message-persistence
     </code>
     <div class="border inline-flex flex-0">
@@ -1168,8 +887,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-message-queues
     </code>
     <div class="border inline-flex flex-0">
@@ -1183,8 +902,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-message
     </code>
     <div class="border inline-flex flex-0">
@@ -1198,8 +917,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-multi-user-spaces-col
     </code>
     <div class="border inline-flex flex-0">
@@ -1213,8 +932,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-observe-analytics
     </code>
     <div class="border inline-flex flex-0">
@@ -1228,8 +947,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-padlock-closed
     </code>
     <div class="border inline-flex flex-0">
@@ -1243,8 +962,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-platform
     </code>
     <div class="border inline-flex flex-0">
@@ -1258,8 +977,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-play
     </code>
     <div class="border inline-flex flex-0">
@@ -1273,8 +992,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-premium-support
     </code>
     <div class="border inline-flex flex-0">
@@ -1288,8 +1007,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-privacy-shield-framework
     </code>
     <div class="border inline-flex flex-0">
@@ -1303,8 +1022,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-private-link
     </code>
     <div class="border inline-flex flex-0">
@@ -1318,8 +1037,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-push-notifications-col
     </code>
     <div class="border inline-flex flex-0">
@@ -1333,8 +1052,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-push-notifications-mono
     </code>
     <div class="border inline-flex flex-0">
@@ -1348,8 +1067,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-push-notifications
     </code>
     <div class="border inline-flex flex-0">
@@ -1363,8 +1082,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-quickstart-guides-col
     </code>
     <div class="border inline-flex flex-0">
@@ -1378,8 +1097,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-resources-col
     </code>
     <div class="border inline-flex flex-0">
@@ -1393,8 +1112,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-rewind
     </code>
     <div class="border inline-flex flex-0">
@@ -1408,8 +1127,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-sdks-col
     </code>
     <div class="border inline-flex flex-0">
@@ -1423,8 +1142,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-send-received-messages
     </code>
     <div class="border inline-flex flex-0">
@@ -1438,8 +1157,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-servers
     </code>
     <div class="border inline-flex flex-0">
@@ -1453,8 +1172,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-shopping-cart
     </code>
     <div class="border inline-flex flex-0">
@@ -1468,8 +1187,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-sla
     </code>
     <div class="border inline-flex flex-0">
@@ -1483,8 +1202,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-soc2-type2-mono
     </code>
     <div class="border inline-flex flex-0">
@@ -1498,8 +1217,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-soc2-type2
     </code>
     <div class="border inline-flex flex-0">
@@ -1513,8 +1232,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-subscription-filters
     </code>
     <div class="border inline-flex flex-0">
@@ -1528,8 +1247,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-support-chat-mono
     </code>
     <div class="border inline-flex flex-0">
@@ -1543,8 +1262,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-system-metadata
     </code>
     <div class="border inline-flex flex-0">
@@ -1558,8 +1277,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-tech-account-comms
     </code>
     <div class="border inline-flex flex-0">
@@ -1573,8 +1292,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-tutorials-demos-col
     </code>
     <div class="border inline-flex flex-0">
@@ -1588,8 +1307,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-virtual-events-col
     </code>
     <div class="border inline-flex flex-0">
@@ -1603,8 +1322,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-display-virtual-events
     </code>
     <div class="border inline-flex flex-0">
@@ -1621,41 +1340,322 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
 </div>
 `;
 
-exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
+exports[`JS Components/Icon EncapsulatedIcons smoke-test 1`] = `
 <div class="grid grid-cols-2 sm:grid-cols-4 ui-grid-gap max-w-screen-lg mb-64">
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
-      icon-gui-ably-badge
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
+      icon-product-asset-tracking-mono
     </code>
     <div class="border inline-flex flex-0">
       <div class="flex pi-checkered-bg">
-        <svg class="text-cool-black hover:text-active-orange"
-             style="width: 1.5rem; height: 1.5rem;"
+        <div class="p-1 rounded-lg bg-gradient-to-t dark:bg-gradient-to-b from-neutral-400 dark:from-neutral-900"
+             style="width: 40px; height: 40px;"
         >
-          <use xlink:href="#sprite-icon-gui-ably-badge">
-          </use>
-        </svg>
+          <div class="flex items-center justify-center rounded-lg bg-neutral-200 dark:bg-neutral-1100"
+               style="height: 38px;"
+          >
+            <svg class
+                 style="width: 28px; height: 28px;"
+            >
+              <use xlink:href="#sprite-icon-product-asset-tracking-mono">
+              </use>
+            </svg>
+          </div>
+        </div>
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
-      icon-gui-arrow-bidirectional-horizontal
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
+      icon-product-asset-tracking
     </code>
     <div class="border inline-flex flex-0">
       <div class="flex pi-checkered-bg">
-        <svg class="text-cool-black hover:text-active-orange"
-             style="width: 1.5rem; height: 1.5rem;"
+        <div class="p-1 rounded-lg bg-gradient-to-t dark:bg-gradient-to-b from-neutral-400 dark:from-neutral-900"
+             style="width: 40px; height: 40px;"
         >
-          <use xlink:href="#sprite-icon-gui-arrow-bidirectional-horizontal">
-          </use>
-        </svg>
+          <div class="flex items-center justify-center rounded-lg bg-neutral-200 dark:bg-neutral-1100"
+               style="height: 38px;"
+          >
+            <svg class
+                 style="width: 28px; height: 28px;"
+            >
+              <use xlink:href="#sprite-icon-product-asset-tracking">
+              </use>
+            </svg>
+          </div>
+        </div>
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
-      icon-gui-arrow-bidirectional-vertical
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
+      icon-product-chat-mono
+    </code>
+    <div class="border inline-flex flex-0">
+      <div class="flex pi-checkered-bg">
+        <div class="p-1 rounded-lg bg-gradient-to-t dark:bg-gradient-to-b from-neutral-400 dark:from-neutral-900"
+             style="width: 40px; height: 40px;"
+        >
+          <div class="flex items-center justify-center rounded-lg bg-neutral-200 dark:bg-neutral-1100"
+               style="height: 38px;"
+          >
+            <svg class
+                 style="width: 28px; height: 28px;"
+            >
+              <use xlink:href="#sprite-icon-product-chat-mono">
+              </use>
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
+      icon-product-chat
+    </code>
+    <div class="border inline-flex flex-0">
+      <div class="flex pi-checkered-bg">
+        <div class="p-1 rounded-lg bg-gradient-to-t dark:bg-gradient-to-b from-neutral-400 dark:from-neutral-900"
+             style="width: 40px; height: 40px;"
+        >
+          <div class="flex items-center justify-center rounded-lg bg-neutral-200 dark:bg-neutral-1100"
+               style="height: 38px;"
+          >
+            <svg class
+                 style="width: 28px; height: 28px;"
+            >
+              <use xlink:href="#sprite-icon-product-chat">
+              </use>
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
+      icon-product-liveobjects
+    </code>
+    <div class="border inline-flex flex-0">
+      <div class="flex pi-checkered-bg">
+        <div class="p-1 rounded-lg bg-gradient-to-t dark:bg-gradient-to-b from-neutral-400 dark:from-neutral-900"
+             style="width: 40px; height: 40px;"
+        >
+          <div class="flex items-center justify-center rounded-lg bg-neutral-200 dark:bg-neutral-1100"
+               style="height: 38px;"
+          >
+            <svg class
+                 style="width: 28px; height: 28px;"
+            >
+              <use xlink:href="#sprite-icon-product-liveobjects">
+              </use>
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
+      icon-product-livesync-mono
+    </code>
+    <div class="border inline-flex flex-0">
+      <div class="flex pi-checkered-bg">
+        <div class="p-1 rounded-lg bg-gradient-to-t dark:bg-gradient-to-b from-neutral-400 dark:from-neutral-900"
+             style="width: 40px; height: 40px;"
+        >
+          <div class="flex items-center justify-center rounded-lg bg-neutral-200 dark:bg-neutral-1100"
+               style="height: 38px;"
+          >
+            <svg class
+                 style="width: 28px; height: 28px;"
+            >
+              <use xlink:href="#sprite-icon-product-livesync-mono">
+              </use>
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
+      icon-product-livesync
+    </code>
+    <div class="border inline-flex flex-0">
+      <div class="flex pi-checkered-bg">
+        <div class="p-1 rounded-lg bg-gradient-to-t dark:bg-gradient-to-b from-neutral-400 dark:from-neutral-900"
+             style="width: 40px; height: 40px;"
+        >
+          <div class="flex items-center justify-center rounded-lg bg-neutral-200 dark:bg-neutral-1100"
+               style="height: 38px;"
+          >
+            <svg class
+                 style="width: 28px; height: 28px;"
+            >
+              <use xlink:href="#sprite-icon-product-livesync">
+              </use>
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
+      icon-product-platform-mono
+    </code>
+    <div class="border inline-flex flex-0">
+      <div class="flex pi-checkered-bg">
+        <div class="p-1 rounded-lg bg-gradient-to-t dark:bg-gradient-to-b from-neutral-400 dark:from-neutral-900"
+             style="width: 40px; height: 40px;"
+        >
+          <div class="flex items-center justify-center rounded-lg bg-neutral-200 dark:bg-neutral-1100"
+               style="height: 38px;"
+          >
+            <svg class
+                 style="width: 28px; height: 28px;"
+            >
+              <use xlink:href="#sprite-icon-product-platform-mono">
+              </use>
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
+      icon-product-pubsub-mono
+    </code>
+    <div class="border inline-flex flex-0">
+      <div class="flex pi-checkered-bg">
+        <div class="p-1 rounded-lg bg-gradient-to-t dark:bg-gradient-to-b from-neutral-400 dark:from-neutral-900"
+             style="width: 40px; height: 40px;"
+        >
+          <div class="flex items-center justify-center rounded-lg bg-neutral-200 dark:bg-neutral-1100"
+               style="height: 38px;"
+          >
+            <svg class
+                 style="width: 28px; height: 28px;"
+            >
+              <use xlink:href="#sprite-icon-product-pubsub-mono">
+              </use>
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
+      icon-product-pubsub
+    </code>
+    <div class="border inline-flex flex-0">
+      <div class="flex pi-checkered-bg">
+        <div class="p-1 rounded-lg bg-gradient-to-t dark:bg-gradient-to-b from-neutral-400 dark:from-neutral-900"
+             style="width: 40px; height: 40px;"
+        >
+          <div class="flex items-center justify-center rounded-lg bg-neutral-200 dark:bg-neutral-1100"
+               style="height: 38px;"
+          >
+            <svg class
+                 style="width: 28px; height: 28px;"
+            >
+              <use xlink:href="#sprite-icon-product-pubsub">
+              </use>
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
+      icon-product-spaces-mono
+    </code>
+    <div class="border inline-flex flex-0">
+      <div class="flex pi-checkered-bg">
+        <div class="p-1 rounded-lg bg-gradient-to-t dark:bg-gradient-to-b from-neutral-400 dark:from-neutral-900"
+             style="width: 40px; height: 40px;"
+        >
+          <div class="flex items-center justify-center rounded-lg bg-neutral-200 dark:bg-neutral-1100"
+               style="height: 38px;"
+          >
+            <svg class
+                 style="width: 28px; height: 28px;"
+            >
+              <use xlink:href="#sprite-icon-product-spaces-mono">
+              </use>
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
+      icon-product-spaces
+    </code>
+    <div class="border inline-flex flex-0">
+      <div class="flex pi-checkered-bg">
+        <div class="p-1 rounded-lg bg-gradient-to-t dark:bg-gradient-to-b from-neutral-400 dark:from-neutral-900"
+             style="width: 40px; height: 40px;"
+        >
+          <div class="flex items-center justify-center rounded-lg bg-neutral-200 dark:bg-neutral-1100"
+               style="height: 38px;"
+          >
+            <svg class
+                 style="width: 28px; height: 28px;"
+            >
+              <use xlink:href="#sprite-icon-product-spaces">
+              </use>
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
+<div class="grid grid-cols-2 sm:grid-cols-4 ui-grid-gap max-w-screen-lg mb-64">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
+      icon-gui-ably-badge
+    </code>
+    <div class="border inline-flex flex-0">
+      <div class="flex pi-checkered-bg">
+        <svg class="text-cool-black hover:text-active-orange"
+             style="width: 1.5rem; height: 1.5rem;"
+        >
+          <use xlink:href="#sprite-icon-gui-ably-badge">
+          </use>
+        </svg>
+      </div>
+    </div>
+  </div>
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
+      icon-gui-arrow-bidirectional-horizontal
+    </code>
+    <div class="border inline-flex flex-0">
+      <div class="flex pi-checkered-bg">
+        <svg class="text-cool-black hover:text-active-orange"
+             style="width: 1.5rem; height: 1.5rem;"
+        >
+          <use xlink:href="#sprite-icon-gui-arrow-bidirectional-horizontal">
+          </use>
+        </svg>
+      </div>
+    </div>
+  </div>
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
+      icon-gui-arrow-bidirectional-vertical
     </code>
     <div class="border inline-flex flex-0">
       <div class="flex pi-checkered-bg">
@@ -1668,8 +1668,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-gui-arrow-down
     </code>
     <div class="border inline-flex flex-0">
@@ -1683,8 +1683,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-gui-arrow-left
     </code>
     <div class="border inline-flex flex-0">
@@ -1698,8 +1698,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-gui-arrow-right
     </code>
     <div class="border inline-flex flex-0">
@@ -1713,8 +1713,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-gui-arrow-up
     </code>
     <div class="border inline-flex flex-0">
@@ -1728,8 +1728,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-gui-burger-menu
     </code>
     <div class="border inline-flex flex-0">
@@ -1743,8 +1743,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-gui-check-circled-fill-black
     </code>
     <div class="border inline-flex flex-0">
@@ -1758,8 +1758,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-gui-check-circled-fill
     </code>
     <div class="border inline-flex flex-0">
@@ -1773,8 +1773,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-gui-check-circled
     </code>
     <div class="border inline-flex flex-0">
@@ -1788,8 +1788,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-gui-checklist-checked
     </code>
     <div class="border inline-flex flex-0">
@@ -1803,8 +1803,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-gui-chevron-down
     </code>
     <div class="border inline-flex flex-0">
@@ -1818,8 +1818,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-gui-chevron-up
     </code>
     <div class="border inline-flex flex-0">
@@ -1833,8 +1833,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-gui-clock
     </code>
     <div class="border inline-flex flex-0">
@@ -1848,8 +1848,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-gui-close
     </code>
     <div class="border inline-flex flex-0">
@@ -1863,8 +1863,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-gui-copy
     </code>
     <div class="border inline-flex flex-0">
@@ -1878,8 +1878,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-gui-cross-circled-fill
     </code>
     <div class="border inline-flex flex-0">
@@ -1893,8 +1893,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-gui-cross-circled
     </code>
     <div class="border inline-flex flex-0">
@@ -1908,8 +1908,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-gui-dash-circled
     </code>
     <div class="border inline-flex flex-0">
@@ -1923,8 +1923,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-gui-disclosure-arrow
     </code>
     <div class="border inline-flex flex-0">
@@ -1938,8 +1938,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-gui-document-generic
     </code>
     <div class="border inline-flex flex-0">
@@ -1953,8 +1953,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-gui-enlarge
     </code>
     <div class="border inline-flex flex-0">
@@ -1968,8 +1968,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-gui-external-link
     </code>
     <div class="border inline-flex flex-0">
@@ -1983,8 +1983,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-gui-filter-flow-step-1
     </code>
     <div class="border inline-flex flex-0">
@@ -1998,8 +1998,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-gui-filter-flow-step-2
     </code>
     <div class="border inline-flex flex-0">
@@ -2013,8 +2013,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-gui-filter-flow-step-3
     </code>
     <div class="border inline-flex flex-0">
@@ -2028,8 +2028,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-gui-hand
     </code>
     <div class="border inline-flex flex-0">
@@ -2043,8 +2043,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-gui-history
     </code>
     <div class="border inline-flex flex-0">
@@ -2058,8 +2058,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-gui-info
     </code>
     <div class="border inline-flex flex-0">
@@ -2073,8 +2073,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-gui-link-arrow
     </code>
     <div class="border inline-flex flex-0">
@@ -2088,8 +2088,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-gui-link
     </code>
     <div class="border inline-flex flex-0">
@@ -2103,8 +2103,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-gui-live-chat
     </code>
     <div class="border inline-flex flex-0">
@@ -2118,8 +2118,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-gui-minus
     </code>
     <div class="border inline-flex flex-0">
@@ -2133,8 +2133,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-gui-partial
     </code>
     <div class="border inline-flex flex-0">
@@ -2148,8 +2148,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-gui-plus
     </code>
     <div class="border inline-flex flex-0">
@@ -2163,8 +2163,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-gui-quote-marks-solid
     </code>
     <div class="border inline-flex flex-0">
@@ -2178,8 +2178,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-gui-refresh
     </code>
     <div class="border inline-flex flex-0">
@@ -2193,8 +2193,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-gui-resources
     </code>
     <div class="border inline-flex flex-0">
@@ -2208,8 +2208,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-gui-search
     </code>
     <div class="border inline-flex flex-0">
@@ -2223,8 +2223,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-gui-tick
     </code>
     <div class="border inline-flex flex-0">
@@ -2238,8 +2238,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-gui-warning-fill
     </code>
     <div class="border inline-flex flex-0">
@@ -2253,8 +2253,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-gui-warning
     </code>
     <div class="border inline-flex flex-0">
@@ -2273,306 +2273,53 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
 
 exports[`JS Components/Icon IconWithSecondaryColor smoke-test 1`] = `
 <div class="flex items-center justify-center p-16 gap-24">
-  <svg class="text-active-orange "
-       style="width: 1.5rem; height: 1.5rem; --ui-icon-secondary-color: var(--color-white);"
-  >
-    <use xlink:href="#sprite-icon-gui-check-circled-fill">
-    </use>
-  </svg>
-  <svg class="text-active-orange "
-       style="width: 1.5rem; height: 1.5rem; --ui-icon-secondary-color: var(--color-neutral-1300);"
-  >
-    <use xlink:href="#sprite-icon-gui-check-circled-fill">
-    </use>
-  </svg>
-</div>
-`;
-
-exports[`JS Components/Icon LightEncapsulatedIcons smoke-test 1`] = `
-<div class="grid grid-cols-2 sm:grid-cols-4 ui-grid-gap max-w-screen-lg mb-64">
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
-      icon-product-asset-tracking-mono
-    </code>
-    <div class="border inline-flex flex-0">
-      <div class="flex pi-checkered-bg">
-        <div class="p-1 rounded-lg bg-gradient-to-t from-neutral-400 "
-             style="width: 40px; height: 40px;"
-        >
-          <div class="flex items-center justify-center rounded-lg bg-neutral-200 "
-               style="height: 38px;"
-          >
-            <svg class=" "
-                 style="width: 28px; height: 28px;"
-            >
-              <use xlink:href="#sprite-icon-product-asset-tracking-mono">
-              </use>
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
-      icon-product-asset-tracking
-    </code>
-    <div class="border inline-flex flex-0">
-      <div class="flex pi-checkered-bg">
-        <div class="p-1 rounded-lg bg-gradient-to-t from-neutral-400 "
-             style="width: 40px; height: 40px;"
-        >
-          <div class="flex items-center justify-center rounded-lg bg-neutral-200 "
-               style="height: 38px;"
-          >
-            <svg class=" "
-                 style="width: 28px; height: 28px;"
-            >
-              <use xlink:href="#sprite-icon-product-asset-tracking">
-              </use>
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
-      icon-product-chat-mono
-    </code>
-    <div class="border inline-flex flex-0">
-      <div class="flex pi-checkered-bg">
-        <div class="p-1 rounded-lg bg-gradient-to-t from-neutral-400 "
-             style="width: 40px; height: 40px;"
-        >
-          <div class="flex items-center justify-center rounded-lg bg-neutral-200 "
-               style="height: 38px;"
-          >
-            <svg class=" "
-                 style="width: 28px; height: 28px;"
-            >
-              <use xlink:href="#sprite-icon-product-chat-mono">
-              </use>
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
-      icon-product-chat
-    </code>
-    <div class="border inline-flex flex-0">
-      <div class="flex pi-checkered-bg">
-        <div class="p-1 rounded-lg bg-gradient-to-t from-neutral-400 "
-             style="width: 40px; height: 40px;"
-        >
-          <div class="flex items-center justify-center rounded-lg bg-neutral-200 "
-               style="height: 38px;"
-          >
-            <svg class=" "
-                 style="width: 28px; height: 28px;"
-            >
-              <use xlink:href="#sprite-icon-product-chat">
-              </use>
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
-      icon-product-liveobjects
-    </code>
-    <div class="border inline-flex flex-0">
-      <div class="flex pi-checkered-bg">
-        <div class="p-1 rounded-lg bg-gradient-to-t from-neutral-400 "
-             style="width: 40px; height: 40px;"
-        >
-          <div class="flex items-center justify-center rounded-lg bg-neutral-200 "
-               style="height: 38px;"
-          >
-            <svg class=" "
-                 style="width: 28px; height: 28px;"
-            >
-              <use xlink:href="#sprite-icon-product-liveobjects">
-              </use>
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
-      icon-product-livesync-mono
-    </code>
-    <div class="border inline-flex flex-0">
-      <div class="flex pi-checkered-bg">
-        <div class="p-1 rounded-lg bg-gradient-to-t from-neutral-400 "
-             style="width: 40px; height: 40px;"
-        >
-          <div class="flex items-center justify-center rounded-lg bg-neutral-200 "
-               style="height: 38px;"
-          >
-            <svg class=" "
-                 style="width: 28px; height: 28px;"
-            >
-              <use xlink:href="#sprite-icon-product-livesync-mono">
-              </use>
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
-      icon-product-livesync
-    </code>
-    <div class="border inline-flex flex-0">
-      <div class="flex pi-checkered-bg">
-        <div class="p-1 rounded-lg bg-gradient-to-t from-neutral-400 "
-             style="width: 40px; height: 40px;"
-        >
-          <div class="flex items-center justify-center rounded-lg bg-neutral-200 "
-               style="height: 38px;"
-          >
-            <svg class=" "
-                 style="width: 28px; height: 28px;"
-            >
-              <use xlink:href="#sprite-icon-product-livesync">
-              </use>
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
-      icon-product-platform-mono
-    </code>
-    <div class="border inline-flex flex-0">
-      <div class="flex pi-checkered-bg">
-        <div class="p-1 rounded-lg bg-gradient-to-t from-neutral-400 "
-             style="width: 40px; height: 40px;"
-        >
-          <div class="flex items-center justify-center rounded-lg bg-neutral-200 "
-               style="height: 38px;"
-          >
-            <svg class=" "
-                 style="width: 28px; height: 28px;"
-            >
-              <use xlink:href="#sprite-icon-product-platform-mono">
-              </use>
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
-      icon-product-pubsub-mono
-    </code>
-    <div class="border inline-flex flex-0">
-      <div class="flex pi-checkered-bg">
-        <div class="p-1 rounded-lg bg-gradient-to-t from-neutral-400 "
-             style="width: 40px; height: 40px;"
-        >
-          <div class="flex items-center justify-center rounded-lg bg-neutral-200 "
-               style="height: 38px;"
-          >
-            <svg class=" "
-                 style="width: 28px; height: 28px;"
-            >
-              <use xlink:href="#sprite-icon-product-pubsub-mono">
-              </use>
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
-      icon-product-pubsub
-    </code>
-    <div class="border inline-flex flex-0">
-      <div class="flex pi-checkered-bg">
-        <div class="p-1 rounded-lg bg-gradient-to-t from-neutral-400 "
-             style="width: 40px; height: 40px;"
-        >
-          <div class="flex items-center justify-center rounded-lg bg-neutral-200 "
-               style="height: 38px;"
-          >
-            <svg class=" "
-                 style="width: 28px; height: 28px;"
-            >
-              <use xlink:href="#sprite-icon-product-pubsub">
-              </use>
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
-      icon-product-spaces-mono
-    </code>
-    <div class="border inline-flex flex-0">
-      <div class="flex pi-checkered-bg">
-        <div class="p-1 rounded-lg bg-gradient-to-t from-neutral-400 "
-             style="width: 40px; height: 40px;"
-        >
-          <div class="flex items-center justify-center rounded-lg bg-neutral-200 "
-               style="height: 38px;"
-          >
-            <svg class=" "
-                 style="width: 28px; height: 28px;"
-            >
-              <use xlink:href="#sprite-icon-product-spaces-mono">
-              </use>
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
-      icon-product-spaces
-    </code>
-    <div class="border inline-flex flex-0">
-      <div class="flex pi-checkered-bg">
-        <div class="p-1 rounded-lg bg-gradient-to-t from-neutral-400 "
-             style="width: 40px; height: 40px;"
-        >
-          <div class="flex items-center justify-center rounded-lg bg-neutral-200 "
-               style="height: 38px;"
-          >
-            <svg class=" "
-                 style="width: 28px; height: 28px;"
-            >
-              <use xlink:href="#sprite-icon-product-spaces">
-              </use>
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
+  <div class="flex gap-24">
+    <h4 class="ui-text-h4 text-neutral-1300 dark:text-neutral-000">
+      Non-themed:
+    </h4>
+    <svg class="text-orange-600"
+         style="width: 1.5rem; height: 1.5rem; --ui-icon-secondary-color: var(--color-white);"
+    >
+      <use xlink:href="#sprite-icon-gui-check-circled-fill">
+      </use>
+    </svg>
+    <svg class="text-orange-600"
+         style="width: 1.5rem; height: 1.5rem; --ui-icon-secondary-color: var(--color-neutral-1300);"
+    >
+      <use xlink:href="#sprite-icon-gui-check-circled-fill">
+      </use>
+    </svg>
+  </div>
+  <div class="flex gap-24">
+    <h4 class="ui-text-h4 text-neutral-1300 dark:text-neutral-000">
+      Themed:
+    </h4>
+    <svg class="text-orange-600"
+         style="width: 1.5rem; height: 1.5rem; --ui-icon-secondary-color: var(--color-white);"
+    >
+      <use xlink:href="#sprite-icon-gui-check-circled-fill">
+      </use>
+    </svg>
+    <svg class="text-orange-200 dark:text-orange-1000 hidden dark:block"
+         style="width: 1.5rem; height: 1.5rem; --ui-icon-secondary-color: var(--color-orange-600);"
+    >
+      <use xlink:href="#sprite-icon-gui-check-circled-fill">
+      </use>
+    </svg>
+    <svg class="text-orange-200 dark:text-orange-1000 dark:hidden"
+         style="width: 1.5rem; height: 1.5rem; --ui-icon-secondary-color: var(--color-orange-600);"
+    >
+      <use xlink:href="#sprite-icon-gui-check-circled-fill">
+      </use>
+    </svg>
   </div>
 </div>
 `;
 
 exports[`JS Components/Icon OtherIcons smoke-test 1`] = `
 <div class="grid grid-cols-2 sm:grid-cols-4 ui-grid-gap max-w-screen-lg mb-64">
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-other-quote
     </code>
     <div class="border inline-flex flex-0">
@@ -2591,8 +2338,8 @@ exports[`JS Components/Icon OtherIcons smoke-test 1`] = `
 
 exports[`JS Components/Icon ProductIcons smoke-test 1`] = `
 <div class="grid grid-cols-2 sm:grid-cols-4 ui-grid-gap max-w-screen-lg mb-64">
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-product-asset-tracking-mono
     </code>
     <div class="border inline-flex flex-0">
@@ -2606,8 +2353,8 @@ exports[`JS Components/Icon ProductIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-product-asset-tracking
     </code>
     <div class="border inline-flex flex-0">
@@ -2621,8 +2368,8 @@ exports[`JS Components/Icon ProductIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-product-chat-mono
     </code>
     <div class="border inline-flex flex-0">
@@ -2636,8 +2383,8 @@ exports[`JS Components/Icon ProductIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-product-chat
     </code>
     <div class="border inline-flex flex-0">
@@ -2651,8 +2398,8 @@ exports[`JS Components/Icon ProductIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-product-liveobjects
     </code>
     <div class="border inline-flex flex-0">
@@ -2666,8 +2413,8 @@ exports[`JS Components/Icon ProductIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-product-livesync-mono
     </code>
     <div class="border inline-flex flex-0">
@@ -2681,8 +2428,8 @@ exports[`JS Components/Icon ProductIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-product-livesync
     </code>
     <div class="border inline-flex flex-0">
@@ -2696,8 +2443,8 @@ exports[`JS Components/Icon ProductIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-product-platform-mono
     </code>
     <div class="border inline-flex flex-0">
@@ -2711,8 +2458,8 @@ exports[`JS Components/Icon ProductIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-product-pubsub-mono
     </code>
     <div class="border inline-flex flex-0">
@@ -2726,8 +2473,8 @@ exports[`JS Components/Icon ProductIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-product-pubsub
     </code>
     <div class="border inline-flex flex-0">
@@ -2741,8 +2488,8 @@ exports[`JS Components/Icon ProductIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-product-spaces-mono
     </code>
     <div class="border inline-flex flex-0">
@@ -2756,8 +2503,8 @@ exports[`JS Components/Icon ProductIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-product-spaces
     </code>
     <div class="border inline-flex flex-0">
@@ -2776,8 +2523,8 @@ exports[`JS Components/Icon ProductIcons smoke-test 1`] = `
 
 exports[`JS Components/Icon SocialIcons smoke-test 1`] = `
 <div class="grid grid-cols-2 sm:grid-cols-4 ui-grid-gap max-w-screen-lg mb-64">
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-social-discord
     </code>
     <div class="border inline-flex flex-0">
@@ -2791,8 +2538,8 @@ exports[`JS Components/Icon SocialIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-social-facebook
     </code>
     <div class="border inline-flex flex-0">
@@ -2806,8 +2553,8 @@ exports[`JS Components/Icon SocialIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-social-github
     </code>
     <div class="border inline-flex flex-0">
@@ -2821,8 +2568,8 @@ exports[`JS Components/Icon SocialIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-social-glassdoor
     </code>
     <div class="border inline-flex flex-0">
@@ -2836,8 +2583,8 @@ exports[`JS Components/Icon SocialIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-social-google
     </code>
     <div class="border inline-flex flex-0">
@@ -2851,8 +2598,8 @@ exports[`JS Components/Icon SocialIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-social-linkedin
     </code>
     <div class="border inline-flex flex-0">
@@ -2866,8 +2613,8 @@ exports[`JS Components/Icon SocialIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-social-stackoverflow
     </code>
     <div class="border inline-flex flex-0">
@@ -2881,8 +2628,8 @@ exports[`JS Components/Icon SocialIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-social-twitter
     </code>
     <div class="border inline-flex flex-0">
@@ -2896,8 +2643,8 @@ exports[`JS Components/Icon SocialIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-social-x
     </code>
     <div class="border inline-flex flex-0">
@@ -2911,8 +2658,8 @@ exports[`JS Components/Icon SocialIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-social-youtube
     </code>
     <div class="border inline-flex flex-0">
@@ -2931,8 +2678,8 @@ exports[`JS Components/Icon SocialIcons smoke-test 1`] = `
 
 exports[`JS Components/Icon TechIcons smoke-test 1`] = `
 <div class="grid grid-cols-2 sm:grid-cols-4 ui-grid-gap max-w-screen-lg mb-64">
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-tech-amqp10
     </code>
     <div class="border inline-flex flex-0">
@@ -2946,8 +2693,8 @@ exports[`JS Components/Icon TechIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-tech-apache-kafka
     </code>
     <div class="border inline-flex flex-0">
@@ -2961,8 +2708,8 @@ exports[`JS Components/Icon TechIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-tech-apachepulsar
     </code>
     <div class="border inline-flex flex-0">
@@ -2976,8 +2723,8 @@ exports[`JS Components/Icon TechIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-tech-awskinesis
     </code>
     <div class="border inline-flex flex-0">
@@ -2991,8 +2738,8 @@ exports[`JS Components/Icon TechIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-tech-awslambda
     </code>
     <div class="border inline-flex flex-0">
@@ -3006,8 +2753,8 @@ exports[`JS Components/Icon TechIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-tech-awssqs
     </code>
     <div class="border inline-flex flex-0">
@@ -3021,8 +2768,8 @@ exports[`JS Components/Icon TechIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-tech-azureservicebus
     </code>
     <div class="border inline-flex flex-0">
@@ -3036,8 +2783,8 @@ exports[`JS Components/Icon TechIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-tech-cloudflareworkers
     </code>
     <div class="border inline-flex flex-0">
@@ -3051,8 +2798,8 @@ exports[`JS Components/Icon TechIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-tech-csharp
     </code>
     <div class="border inline-flex flex-0">
@@ -3066,8 +2813,8 @@ exports[`JS Components/Icon TechIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-tech-flutter
     </code>
     <div class="border inline-flex flex-0">
@@ -3081,8 +2828,8 @@ exports[`JS Components/Icon TechIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-tech-gcloudfunctions
     </code>
     <div class="border inline-flex flex-0">
@@ -3096,8 +2843,8 @@ exports[`JS Components/Icon TechIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-tech-go
     </code>
     <div class="border inline-flex flex-0">
@@ -3111,8 +2858,8 @@ exports[`JS Components/Icon TechIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-tech-ifttt
     </code>
     <div class="border inline-flex flex-0">
@@ -3126,8 +2873,8 @@ exports[`JS Components/Icon TechIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-tech-java
     </code>
     <div class="border inline-flex flex-0">
@@ -3141,8 +2888,8 @@ exports[`JS Components/Icon TechIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-tech-javascript
     </code>
     <div class="border inline-flex flex-0">
@@ -3156,8 +2903,8 @@ exports[`JS Components/Icon TechIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-tech-net
     </code>
     <div class="border inline-flex flex-0">
@@ -3171,8 +2918,8 @@ exports[`JS Components/Icon TechIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-tech-objectivec
     </code>
     <div class="border inline-flex flex-0">
@@ -3186,8 +2933,8 @@ exports[`JS Components/Icon TechIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-tech-php
     </code>
     <div class="border inline-flex flex-0">
@@ -3201,8 +2948,8 @@ exports[`JS Components/Icon TechIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-tech-python
     </code>
     <div class="border inline-flex flex-0">
@@ -3216,8 +2963,8 @@ exports[`JS Components/Icon TechIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-tech-react
     </code>
     <div class="border inline-flex flex-0">
@@ -3231,8 +2978,8 @@ exports[`JS Components/Icon TechIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-tech-ruby
     </code>
     <div class="border inline-flex flex-0">
@@ -3246,8 +2993,8 @@ exports[`JS Components/Icon TechIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-tech-swift
     </code>
     <div class="border inline-flex flex-0">
@@ -3261,8 +3008,8 @@ exports[`JS Components/Icon TechIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-tech-terraform
     </code>
     <div class="border inline-flex flex-0">
@@ -3276,8 +3023,8 @@ exports[`JS Components/Icon TechIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
-  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
-    <code class="ui-text-code mb-8 block">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-tech-zapier
     </code>
     <div class="border inline-flex flex-0">
diff --git a/src/core/Pricing/PricingCards.stories.tsx b/src/core/Pricing/PricingCards.stories.tsx
index 31df67ac4..8407e95c5 100644
--- a/src/core/Pricing/PricingCards.stories.tsx
+++ b/src/core/Pricing/PricingCards.stories.tsx
@@ -18,14 +18,9 @@ export default {
 };
 
 const Template = ({ data, delimiter }: PricingCardsProps) => (
-  <>
-    <div className="bg-gradient-to-r from-blue-800 to-pink-800 p-32">
-      <PricingCards data={data} theme="dark" delimiter={delimiter} />
-    </div>
-    <div className="p-32">
-      <PricingCards data={data} theme="light" delimiter={delimiter} />
-    </div>
-  </>
+  <div className="dark:bg-gradient-to-r dark:from-blue-800 dark:to-pink-800 p-32">
+    <PricingCards data={data} delimiter={delimiter} />
+  </div>
 );
 
 export const Plans = {
diff --git a/src/core/Pricing/PricingCards.tsx b/src/core/Pricing/PricingCards.tsx
index 0a2cc963f..83c4a01fb 100644
--- a/src/core/Pricing/PricingCards.tsx
+++ b/src/core/Pricing/PricingCards.tsx
@@ -1,38 +1,18 @@
 import React, { Fragment, useEffect, useRef, useState } from "react";
+import clsx from "clsx";
 import throttle from "lodash.throttle";
 import type { PricingDataFeature } from "./types";
-import { ColorClass, Theme } from "../styles/colors/types";
 import Icon from "../Icon";
 import FeaturedLink from "../FeaturedLink";
 import { IconName } from "../Icon/types";
 import Tooltip from "../Tooltip";
-import useTheming from "../hooks/useTheming";
-
-/**
-  Pricing hack to get all the themes loaded
-
-  themeColor("text-orange-600")
-  themeColor("text-orange-1000")
-  themeColor("text-neutral-000")
-  themeColor("text-neutral-500")
-  themeColor("text-neutral-600")
-  themeColor("text-neutral-700")
-  themeColor("text-neutral-1000")
-  themeColor("text-blue-400")
-  themeColor("text-blue-800")
- */
 
 export type PricingCardsProps = {
   data: PricingDataFeature[];
-  theme?: Theme;
   delimiter?: IconName | "blank";
 };
 
-const PricingCards = ({
-  data,
-  theme = "dark",
-  delimiter,
-}: PricingCardsProps) => {
+const PricingCards = ({ data, delimiter }: PricingCardsProps) => {
   const descriptionsRef = useRef<(HTMLSpanElement | null)[]>([]);
   const [descriptionHeight, setDescriptionHeight] = useState<number>(0);
 
@@ -59,21 +39,19 @@ const PricingCards = ({
     };
   }, []);
 
-  const { themeColor } = useTheming({
-    baseTheme: "dark",
-    theme,
-  });
-
   const delimiterColumn = (index: number) =>
     delimiter && index % 2 === 1 ? (
       <div
-        className={`flex items-center justify-center w-full @[920px]:w-20 ${delimiter !== "blank" ? "m-8" : ""}`}
+        className={clsx(
+          "flex items-center justify-center w-full @[920px]:w-20",
+          { "m-8": delimiter !== "blank" },
+        )}
       >
         {delimiter !== "blank" ? (
           <Icon
             name={delimiter}
             size="20px"
-            additionalCSS={themeColor("text-neutral-500")}
+            additionalCSS={"text-neutral-800 dark:text-neutral-500"}
           />
         ) : null}
       </div>
@@ -85,18 +63,24 @@ const PricingCards = ({
   };
 
   const borderClasses = (color?: "neutral" | "blue" | "orange") => {
-    const classes: Record<string, { border: ColorClass; bg: ColorClass }> = {
+    const classes: Record<
+      string,
+      {
+        border: string;
+        bg: string;
+      }
+    > = {
       neutral: {
-        border: themeColor("border-neutral-700"),
-        bg: themeColor("bg-neutral-700"),
+        border: "border-neutral-600 dark:border-neutral-700",
+        bg: "border-neutral-600 dark:bg-neutral-700",
       },
       blue: {
-        border: themeColor("border-blue-600"),
-        bg: themeColor("bg-blue-600"),
+        border: "border-blue-400 dark:border-blue-600",
+        bg: "bg-blue-400 dark:bg-blue-600",
       },
       orange: {
-        border: themeColor("border-orange-600"),
-        bg: themeColor("bg-orange-600"),
+        border: "border-orange-600 dark:border-orange-600",
+        bg: "bg-orange-600 dark:bg-orange-600",
       },
     };
 
@@ -113,41 +97,59 @@ const PricingCards = ({
       }
     >
       <div
-        className={`${delimiter ? gridRules.delimited : gridRules.nonDelimited} gap-8`}
+        className={clsx(
+          "gap-8",
+          delimiter ? gridRules.delimited : gridRules.nonDelimited,
+        )}
       >
         {data.map(
           ({ title, description, price, cta, sections, border }, index) => (
             <Fragment key={title.content}>
               {delimiterColumn(index)}
               <div
-                className={`relative border ${borderClasses(border?.color)?.border ?? themeColor("border-neutral-1100")} ${border?.style ?? ""} flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group ${delimiter ? "@[520px]:flex-row @[920px]:flex-col" : ""} min-w-[272px] backdrop-blur`}
+                className={clsx(
+                  "relative border flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group min-w-[272px] backdrop-blur",
+                  borderClasses(border?.color)?.border ??
+                    "border-neutral-200 dark:border-neutral-1100",
+                  border?.style,
+                  { "@[520px]:flex-row @[920px]:flex-col": delimiter },
+                )}
                 data-testid={
                   delimiter ? "delimited-pricing-card" : "pricing-card"
                 }
               >
                 {border ? (
                   <div
-                    className={`flex items-center absolute z-10 -top-12 self-center font-semibold uppercase font-sans text-white ${borderClasses(border?.color)?.border} ${borderClasses(border?.color)?.bg} h-24 text-[11px] px-[10px] py-2 rounded-2xl select-none tracking-widen-0.1`}
+                    className={clsx(
+                      "flex items-center absolute z-10 -top-12 self-center font-semibold uppercase text-neutral-000 font-sans h-24 text-[11px] px-[10px] py-2 rounded-2xl select-none tracking-widen-0.1",
+                      borderClasses(border?.color)?.border,
+                      borderClasses(border?.color)?.bg,
+                    )}
                   >
                     {border.text}
                   </div>
                 ) : null}
                 <div
-                  className={`absolute z-0 top-0 left-0 w-full h-full rounded-2xl ${themeColor("bg-neutral-1300")} ${!delimiter ? `${themeColor("group-hover:bg-neutral-1200")} group-hover:opacity-100` : ""} transition-[colors,opacity] opacity-25`}
+                  className={clsx(
+                    "absolute z-0 top-0 left-0 w-full h-full rounded-2xl bg-neutral-000 dark:bg-neutral-1300 transition-[colors,opacity] opacity-25",
+                    {
+                      "group-hover:bg-neutral-100 dark:group-hover:bg-neutral-1200 group-hover:opacity-100":
+                        !delimiter,
+                    },
+                  )}
                 ></div>
                 <div
-                  className={`relative z-10 flex flex-col gap-24 ${delimiter ? "@[520px]:flex-1 @[920px]:flex-none" : ""}`}
+                  className={clsx(`relative z-10 flex flex-col gap-24`, {
+                    "@[520px]:flex-1 @[920px]:flex-none": delimiter,
+                  })}
                 >
                   <div>
                     <div className="flex items-center mb-12">
-                      <p
-                        className={`${title.className ?? ""} ${themeColor(title.color ?? "text-neutral-000")}`}
-                      >
+                      <p className={clsx(title.className, title.color)}>
                         {title.content}
                       </p>
                       {title.tooltip ? (
                         <Tooltip
-                          theme={theme}
                           interactive={typeof title.tooltip !== "string"}
                         >
                           {title.tooltip}
@@ -155,7 +157,11 @@ const PricingCards = ({
                       ) : null}
                     </div>
                     <p
-                      className={`ui-text-p1 ${description.className ?? ""} ${themeColor(description.color ?? "text-neutral-000")} min-h-[20px]`}
+                      className={clsx(
+                        "ui-text-p1 min-h-[20px]",
+                        description.className,
+                        description.color,
+                      )}
                       style={{ height: descriptionHeight }}
                     >
                       <span ref={(el) => (descriptionsRef.current[index] = el)}>
@@ -164,23 +170,26 @@ const PricingCards = ({
                     </p>
                   </div>
                   <div
-                    className={`flex items-end gap-8 ${delimiter ? "@[520px]:flex-col @[520px]:items-start @[920px]:flex-row @[920px]:items-end" : ""}`}
+                    className={clsx("flex items-end gap-8", {
+                      "@[520px]:flex-col @[520px]:items-start @[920px]:flex-row @[920px]:items-end":
+                        delimiter,
+                    })}
                   >
-                    <p
-                      className={`ui-text-title font-medium tracking-tight leading-none ${themeColor("text-neutral-000")}`}
-                    >
+                    <p className="ui-text-title font-medium tracking-tight leading-none text-neutral-1300 dark:text-neutral-000">
                       {price.amount}
                     </p>
-                    <div
-                      className={`ui-text-p3 ${themeColor("text-neutral-000")}`}
-                    >
+                    <div className="ui-text-p3 text-neutral-1300 dark:text-neutral-000">
                       {price.content}
                     </div>
                   </div>
                   {cta ? (
                     <div className="group">
                       <FeaturedLink
-                        additionalCSS={`text-center ui-btn ${themeColor("bg-neutral-000")} ${themeColor("text-neutral-1300")} hover:text-neutral-000 px-24 !py-12 ${cta.className ?? ""} cursor-pointer`}
+                        additionalCSS={clsx(
+                          "text-center px-24 !py-12 hover:text-neutral-000 cursor-pointer",
+                          cta.className ??
+                            "ui-btn bg-neutral-1300 dark:bg-neutral-000 text-neutral-000 dark:text-neutral-1300",
+                        )}
                         url={cta.url}
                         onClick={cta.onClick}
                         disabled={cta.disabled}
@@ -190,31 +199,40 @@ const PricingCards = ({
                     </div>
                   ) : delimiter ? null : (
                     <div className="flex items-center justify-center h-48 w-full">
-                      <hr
-                        className={`${themeColor("border-neutral-800")} w-64`}
-                      />
+                      <hr className="border-neutral-500 dark:border-neutral-800 w-64" />
                     </div>
                   )}
                 </div>
                 <div className="flex-1 flex flex-col gap-24 relative z-10">
                   {sections.map(({ title, items, listItemColors, cta }) => (
                     <div key={title} className="flex flex-col gap-12">
-                      <p
-                        className={`${themeColor("text-neutral-500")} font-mono uppercase text-overline2 tracking-[0.16em]`}
-                      >
+                      <p className="text-neutral-800 dark:text-neutral-500 font-mono uppercase text-overline2 tracking-[0.16em]">
                         {title}
                       </p>
-                      <div className={delimiter ? "" : "flex flex-col gap-4"}>
+                      <div
+                        className={clsx({ "flex flex-col gap-4": !delimiter })}
+                      >
                         {items.map((item, index) =>
                           Array.isArray(item) ? (
                             <div
                               key={item[0]}
-                              className={`flex justify-between gap-16 px-8 -mx-8 ${index === 0 ? "py-8" : "py-4"} ${index > 0 && index % 2 === 0 ? `${themeColor("bg-blue-900")} rounded-md` : ""}`}
+                              className={clsx(
+                                "flex justify-between gap-16 px-8 -mx-8",
+                                index === 0 ? "py-8" : "py-4",
+                                index > 0 && index % 2 === 0
+                                  ? "bg-blue-100 dark:bg-blue-900 rounded-md"
+                                  : "",
+                              )}
                             >
                               {item.map((subItem, subIndex) => (
                                 <span
                                   key={subItem}
-                                  className={`ui-text-p3 ${index === 0 ? "font-bold" : "font-medium"} ${themeColor("text-neutral-300")} ${subIndex % 2 === 1 ? "text-right" : ""}`}
+                                  className={clsx(
+                                    "ui-text-p3",
+                                    index === 0 ? "font-bold" : "font-medium",
+                                    "text-neutral-1000 dark:text-neutral-300",
+                                    subIndex % 2 === 1 ? "text-right" : "",
+                                  )}
                                 >
                                   {subItem}
                                 </span>
@@ -225,16 +243,17 @@ const PricingCards = ({
                               {listItemColors ? (
                                 <Icon
                                   name="icon-gui-check-circled-fill"
-                                  color={themeColor(listItemColors.background)}
-                                  secondaryColor={themeColor(
-                                    listItemColors.foreground,
-                                  )}
+                                  color={listItemColors.background}
+                                  secondaryColor={listItemColors.foreground}
                                   size="16px"
                                   additionalCSS="mt-2"
                                 />
                               ) : null}
                               <div
-                                className={`flex-1 ${listItemColors ? "ui-text-p3" : "ui-text-p2"} font-medium ${themeColor("text-neutral-300")}`}
+                                className={clsx(
+                                  `flex-1 font-medium text-neutral-1000 dark:text-neutral-300`,
+                                  listItemColors ? "ui-text-p3" : "ui-text-p2",
+                                )}
                               >
                                 {item}
                               </div>
@@ -246,17 +265,13 @@ const PricingCards = ({
                         <div className="relative -mx-24 flex items-center h-40 overflow-x-hidden">
                           <FeaturedLink
                             url={cta.url}
-                            additionalCSS={`absolute translate-x-24 sm:-translate-x-[120px] sm:opacity-0 sm:group-hover:translate-x-24 duration-300 delay-0 sm:group-hover:delay-100 sm:group-hover:opacity-100 transition-[transform,opacity] font-medium ui-text-p3 ${themeColor("text-neutral-500")} hover:${themeColor("text-neutral-000")} cursor-pointer`}
+                            additionalCSS="absolute translate-x-24 sm:-translate-x-[120px] sm:opacity-0 sm:group-hover:translate-x-24 duration-300 delay-0 sm:group-hover:delay-100 sm:group-hover:opacity-100 transition-[transform,opacity] font-medium ui-text-p3 dark:text-neutral-500 dark:hover:text-neutral-000 cursor-pointer"
                             onClick={cta.onClick}
-                            iconColor={themeColor(
-                              listItemColors?.foreground ?? "text-neutral-000",
-                            )}
+                            iconColor={listItemColors?.foreground}
                           >
                             {cta.text}
                           </FeaturedLink>
-                          <div
-                            className={`absolute hidden sm:block sm:translate-x-24 sm:opacity-100 sm:group-hover:translate-x-[120px] sm:group-hover:opacity-0 duration-200 delay-100 sm:group-hover:delay-0 transition-[transform,opacity] leading-6 tracking-widen-0.15 font-light text-p3 ${themeColor("text-neutral-800")}`}
-                          >
+                          <div className="absolute hidden sm:block sm:translate-x-24 sm:opacity-100 sm:group-hover:translate-x-[120px] sm:group-hover:opacity-0 duration-200 delay-100 sm:group-hover:delay-0 transition-[transform,opacity] leading-6 tracking-widen-0.15 font-light text-p3 text-neutral-500 dark:text-neutral-800">
                             •••
                           </div>
                         </div>
diff --git a/src/core/Pricing/data.tsx b/src/core/Pricing/data.tsx
index 8f83e70b7..d40152b7e 100644
--- a/src/core/Pricing/data.tsx
+++ b/src/core/Pricing/data.tsx
@@ -6,12 +6,12 @@ export const planData: PricingDataFeature[] = [
     title: {
       content: "Free",
       className: "font-mono text-p3 uppercase font-extrabold tracking-[0.16em]",
-      color: "text-neutral-700",
+      color: "text-neutral-600 dark:text-neutral-700",
     },
     description: {
       content: "Build a proof of concept.",
       className: "ui-text-p1",
-      color: "text-neutral-500",
+      color: "text-neutral-800 dark:text-neutral-500",
     },
     price: { amount: "$0" },
     cta: { text: "Start for free", url: "/sign-up" },
@@ -29,8 +29,8 @@ export const planData: PricingDataFeature[] = [
         title: "Includes",
         items: ["Community & email support (best effort)", "No commitment"],
         listItemColors: {
-          foreground: "text-neutral-600",
-          background: "text-neutral-1000",
+          foreground: "text-neutral-700 dark:text-neutral-600",
+          background: "text-neutral-300 dark:text-neutral-1000",
         },
         cta: {
           text: "See all features",
@@ -43,12 +43,12 @@ export const planData: PricingDataFeature[] = [
     title: {
       content: "Standard",
       className: "font-mono text-p3 uppercase font-extrabold tracking-[0.16em]",
-      color: "text-neutral-000",
+      color: "text-neutral-1300 dark:text-neutral-000",
     },
     description: {
       content: "Roll-out into production.",
       className: "ui-text-p1",
-      color: "text-neutral-500",
+      color: "text-neutral-800 dark:text-neutral-500",
     },
     price: {
       amount: "$29",
@@ -83,8 +83,8 @@ export const planData: PricingDataFeature[] = [
         title: "Includes",
         items: ["1 day email support SLA", "Uptime SLO"],
         listItemColors: {
-          foreground: "text-blue-400",
-          background: "text-blue-800",
+          foreground: "text-blue-600 dark:text-blue-400",
+          background: "text-blue-200 dark:text-blue-800",
         },
         cta: {
           text: "See all features",
@@ -97,12 +97,12 @@ export const planData: PricingDataFeature[] = [
     title: {
       content: "Pro",
       className: "font-mono text-p3 uppercase font-extrabold tracking-[0.16em]",
-      color: "text-neutral-000",
+      color: "text-neutral-1300 dark:text-neutral-000",
     },
     description: {
       content: "Scale with confidence.",
       className: "ui-text-p1",
-      color: "text-neutral-500",
+      color: "text-neutral-800 dark:text-neutral-500",
     },
     price: {
       amount: "$399",
@@ -134,8 +134,8 @@ export const planData: PricingDataFeature[] = [
         title: "Includes",
         items: ["2 hour support SLA", "Uptime SLO"],
         listItemColors: {
-          foreground: "text-blue-400",
-          background: "text-blue-800",
+          foreground: "text-blue-600 dark:text-blue-400",
+          background: "text-blue-200 dark:text-blue-800",
         },
         cta: {
           text: "See all features",
@@ -154,13 +154,13 @@ export const planData: PricingDataFeature[] = [
     description: {
       content: "Deliver without limits.",
       className: "ui-text-p1",
-      color: "text-neutral-500",
+      color: "text-neutral-800 dark:text-neutral-500",
     },
     price: { amount: "Custom" },
     cta: {
       text: "Contact us",
       url: "/contact",
-      className: "ui-btn-alt text-white",
+      className: "ui-btn-alt text-neutral-000",
     },
     sections: [
       {
@@ -181,8 +181,8 @@ export const planData: PricingDataFeature[] = [
           "CNAME, SSO, & more",
         ],
         listItemColors: {
-          foreground: "text-orange-600",
-          background: "text-orange-1000",
+          foreground: "text-orange-600 dark:text-orange-600",
+          background: "text-orange-200 dark:text-orange-1000",
         },
         cta: {
           text: "See all features",
@@ -198,13 +198,13 @@ export const consumptionData: PricingDataFeature[] = [
     title: {
       content: "Messages",
       className: "ui-text-h3",
-      color: "text-neutral-000",
+      color: "text-neutral-1300 dark:text-neutral-000",
     },
     description: {
       content:
         "Messages contain the data that a client is communicating, such as the contents of a chat message.",
       className: "ui-text-p3",
-      color: "text-neutral-600",
+      color: "text-neutral-700 dark:text-neutral-600",
     },
     price: { amount: "$2.50", content: "/ million" },
     sections: [
@@ -226,7 +226,7 @@ export const consumptionData: PricingDataFeature[] = [
     title: {
       content: "Channels",
       className: "ui-text-h3",
-      color: "text-neutral-000",
+      color: "text-neutral-1300 dark:text-neutral-000",
       tooltip: (
         <p>
           We charge you for the amount of time a channel is active in our
@@ -239,7 +239,7 @@ export const consumptionData: PricingDataFeature[] = [
       content:
         "Channels are used to route messages from publishers to subscribers. Channels are billed by the minute when actively being used by a connected client.",
       className: "ui-text-p3",
-      color: "text-neutral-600",
+      color: "text-neutral-700 dark:text-neutral-600",
     },
     price: { amount: "$1.00", content: "/ million mins" },
     sections: [
@@ -261,7 +261,7 @@ export const consumptionData: PricingDataFeature[] = [
     title: {
       content: "Connections",
       className: "ui-text-h3",
-      color: "text-neutral-000",
+      color: "text-neutral-1300 dark:text-neutral-000",
       tooltip: (
         <p>
           We charge you for the amount of time devices are connected to our
@@ -274,7 +274,7 @@ export const consumptionData: PricingDataFeature[] = [
       content:
         "Clients establish and maintain a connection to the Ably service, typically over WebSockets.",
       className: "ui-text-p3",
-      color: "text-neutral-600",
+      color: "text-neutral-700 dark:text-neutral-600",
     },
     price: { amount: "$1.00", content: "/ million mins" },
     sections: [
diff --git a/src/core/Pricing/types.ts b/src/core/Pricing/types.ts
index 028970fbf..c25a668c1 100644
--- a/src/core/Pricing/types.ts
+++ b/src/core/Pricing/types.ts
@@ -1,10 +1,10 @@
 import { ReactNode } from "react";
-import { ColorClass } from "../styles/colors/types";
+import { ColorClass, ColorThemeSet } from "../styles/colors/types";
 
 type PricingDataHeader = {
   content: string;
   className?: string;
-  color?: ColorClass;
+  color?: ColorClass | ColorThemeSet;
   tooltip?: string | ReactNode;
 };
 
@@ -19,7 +19,7 @@ type PricingDataFeatureCta = {
 export type PricingDataFeatureSection = {
   title: string;
   items: string[] | string[][];
-  listItemColors?: { foreground: ColorClass; background: ColorClass };
+  listItemColors?: { foreground: ColorThemeSet; background: ColorThemeSet };
   cta?: PricingDataFeatureCta;
 };
 
diff --git a/src/core/ProductTile.tsx b/src/core/ProductTile.tsx
index bf7b58801..80d753683 100644
--- a/src/core/ProductTile.tsx
+++ b/src/core/ProductTile.tsx
@@ -1,8 +1,8 @@
 import React from "react";
+import clsx from "clsx";
 import EncapsulatedIcon from "./Icon/EncapsulatedIcon";
 import FeaturedLink from "./FeaturedLink";
 import { ProductName, products } from "./ProductTile/data";
-import useTheming from "./hooks/useTheming";
 
 type ProductTileProps = {
   name: ProductName;
@@ -19,31 +19,62 @@ const ProductTile = ({
   className,
   onClick,
 }: ProductTileProps) => {
-  const { themeColor } = useTheming({
-    baseTheme: "dark",
-    theme: selected ? "light" : "dark",
-  });
   const { icon, label, description, link, unavailable } = products[name] ?? {};
 
   return (
     <div
-      className={`rounded-lg p-12 flex flex-col gap-8 transition-colors ${themeColor("bg-neutral-1200")} ${selected ? "" : "hover:bg-neutral-1100"} ${className ?? ""}`}
+      className={clsx(
+        "rounded-lg p-12 flex flex-col gap-8 transition-colors",
+        { "bg-neutral-1200 dark:bg-neutral-100": selected },
+        {
+          "bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100":
+            !selected,
+        },
+        { [`${className}`]: className },
+      )}
       onClick={onClick}
     >
       <div className="flex gap-12 items-center">
         {icon ? (
-          <EncapsulatedIcon name={icon} theme={selected ? "light" : "dark"} />
+          <EncapsulatedIcon
+            name={icon}
+            className={
+              selected
+                ? "from-neutral-900 dark:from-neutral-400"
+                : "from-neutral-400 dark:from-neutral-900"
+            }
+            innerClassName={
+              selected
+                ? "bg-neutral-1100 dark:bg-neutral-200"
+                : "bg-neutral-200 dark:bg-neutral-1100"
+            }
+          />
         ) : null}
         <div
-          className={`flex ${unavailable ? "flex-row items-center gap-4" : "flex-col justify-center"} `}
+          className={clsx(
+            "flex",
+            { "flex-row items-center gap-4": unavailable },
+            { "flex-col justify-center": !unavailable },
+          )}
         >
           <p
-            className={`${unavailable ? "ui-text-p2" : "ui-text-p3"} ${themeColor("text-neutral-300")} font-medium`}
+            className={clsx(
+              "font-medium",
+              { "text-neutral-300 dark:text-neutral-1000": selected },
+              { "text-neutral-1000 dark:text-neutral-300": !selected },
+              { "ui-text-p2": unavailable },
+              { "ui-text-p3": !unavailable },
+            )}
           >
             Ably{" "}
           </p>
           <p
-            className={`ui-text-p2 ${themeColor("text-neutral-000")} font-bold ${unavailable ? "" : "mt-[-3px]"}`}
+            className={clsx(
+              "ui-text-p2 font-bold",
+              { "text-neutral-000 dark:text-neutral-1300": selected },
+              { "text-neutral-1300 dark:text-neutral-000": !selected },
+              { "mt-[-3px]": !unavailable },
+            )}
           >
             {label}
           </p>
@@ -51,19 +82,23 @@ const ProductTile = ({
       </div>
       {unavailable ? (
         <div className="-mt-8">
-          <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">
+          <div className="table-cell font-sans bg-neutral-300 dark: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-500"} font-medium leading-snug`}
+        className={clsx(
+          "ui-text-p3 font-medium leading-snug",
+          { "text-neutral-300 dark:text-neutral-1000": selected },
+          { "text-neutral-800 dark:text-neutral-500": !selected },
+        )}
       >
         {description}
       </p>
       {selected && link ? (
         <FeaturedLink
-          additionalCSS={`ui-btn-secondary bg-transparent hover:bg-transparent w-full hover:text-neutral-1300 mt-8 text-center inline-block ${themeColor("text-neutral-000")}`}
+          additionalCSS="ui-btn-secondary bg-transparent hover:bg-transparent w-full hover:text-neutral-1300 mt-8 text-center inline-block text-neutral-000 dark:text-neutral-1300"
           iconColor="text-orange-600"
           url={link}
         >
diff --git a/src/core/ProductTile/ProductTile.stories.tsx b/src/core/ProductTile/ProductTile.stories.tsx
index cdcb1cbf1..60a70eea9 100644
--- a/src/core/ProductTile/ProductTile.stories.tsx
+++ b/src/core/ProductTile/ProductTile.stories.tsx
@@ -53,7 +53,7 @@ export const ProductTileWithOverriddenStylesAndClick = {
     <ProductTile
       key="pubsub"
       name="pubsub"
-      className="bg-pink-800 hover:bg-pink-600 cursor-pointer"
+      className="bg-pink-200 dark:bg-pink-800 hover:bg-pink-600 dark:hover:bg-pink-400 cursor-pointer"
       onClick={() => alert("yo congrats on the click")}
     />
   ),
diff --git a/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap b/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap
index 9c637e15b..6b38004dc 100644
--- a/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap
+++ b/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap
@@ -1,15 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`JS Components/Product Tile ProductTileWithOverriddenStylesAndClick smoke-test 1`] = `
-<div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100 bg-pink-800 hover:bg-pink-600 cursor-pointer">
+<div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100 bg-pink-200 dark:bg-pink-800 hover:bg-pink-600 dark:hover:bg-pink-400 cursor-pointer">
   <div class="flex gap-12 items-center">
-    <div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
+    <div class="p-1 rounded-lg bg-gradient-to-t dark:bg-gradient-to-b from-neutral-400 dark:from-neutral-900"
          style="width: 40px; height: 40px;"
     >
-      <div class="flex items-center justify-center rounded-lg bg-neutral-1100 "
+      <div class="flex items-center justify-center rounded-lg bg-neutral-200 dark:bg-neutral-1100"
            style="height: 38px;"
       >
-        <svg class=" "
+        <svg class
              style="width: 28px; height: 28px;"
         >
           <use xlink:href="#sprite-icon-product-pubsub">
@@ -17,16 +17,16 @@ exports[`JS Components/Product Tile ProductTileWithOverriddenStylesAndClick smok
         </svg>
       </div>
     </div>
-    <div class="flex flex-col justify-center ">
-      <p class="ui-text-p3 text-neutral-300 font-medium">
+    <div class="flex flex-col justify-center">
+      <p class="font-medium text-neutral-1000 dark:text-neutral-300 ui-text-p3">
         Ably
       </p>
-      <p class="ui-text-p2 text-neutral-000 font-bold mt-[-3px]">
+      <p class="ui-text-p2 font-bold text-neutral-1300 dark:text-neutral-000 mt-[-3px]">
         PubSub
       </p>
     </div>
   </div>
-  <p class="ui-text-p3 text-neutral-500 font-medium leading-snug">
+  <p class="ui-text-p3 font-medium leading-snug text-neutral-800 dark:text-neutral-500">
     Low-level APIs to build any realtime experience
   </p>
 </div>
@@ -34,15 +34,15 @@ exports[`JS Components/Product Tile ProductTileWithOverriddenStylesAndClick smok
 
 exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
 <div class="grid sm:grid-cols-3 gap-32">
-  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100 ">
+  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100">
     <div class="flex gap-12 items-center">
-      <div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
+      <div class="p-1 rounded-lg bg-gradient-to-t dark:bg-gradient-to-b from-neutral-400 dark:from-neutral-900"
            style="width: 40px; height: 40px;"
       >
-        <div class="flex items-center justify-center rounded-lg bg-neutral-1100 "
+        <div class="flex items-center justify-center rounded-lg bg-neutral-200 dark:bg-neutral-1100"
              style="height: 38px;"
         >
-          <svg class=" "
+          <svg class
                style="width: 28px; height: 28px;"
           >
             <use xlink:href="#sprite-icon-product-pubsub">
@@ -50,28 +50,28 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
           </svg>
         </div>
       </div>
-      <div class="flex flex-col justify-center ">
-        <p class="ui-text-p3 text-neutral-300 font-medium">
+      <div class="flex flex-col justify-center">
+        <p class="font-medium text-neutral-1000 dark:text-neutral-300 ui-text-p3">
           Ably
         </p>
-        <p class="ui-text-p2 text-neutral-000 font-bold mt-[-3px]">
+        <p class="ui-text-p2 font-bold text-neutral-1300 dark:text-neutral-000 mt-[-3px]">
           PubSub
         </p>
       </div>
     </div>
-    <p class="ui-text-p3 text-neutral-500 font-medium leading-snug">
+    <p class="ui-text-p3 font-medium leading-snug text-neutral-800 dark:text-neutral-500">
       Low-level APIs to build any realtime experience
     </p>
   </div>
-  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100 ">
+  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100">
     <div class="flex gap-12 items-center">
-      <div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
+      <div class="p-1 rounded-lg bg-gradient-to-t dark:bg-gradient-to-b from-neutral-400 dark:from-neutral-900"
            style="width: 40px; height: 40px;"
       >
-        <div class="flex items-center justify-center rounded-lg bg-neutral-1100 "
+        <div class="flex items-center justify-center rounded-lg bg-neutral-200 dark:bg-neutral-1100"
              style="height: 38px;"
         >
-          <svg class=" "
+          <svg class
                style="width: 28px; height: 28px;"
           >
             <use xlink:href="#sprite-icon-product-chat">
@@ -79,28 +79,28 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
           </svg>
         </div>
       </div>
-      <div class="flex flex-col justify-center ">
-        <p class="ui-text-p3 text-neutral-300 font-medium">
+      <div class="flex flex-col justify-center">
+        <p class="font-medium text-neutral-1000 dark:text-neutral-300 ui-text-p3">
           Ably
         </p>
-        <p class="ui-text-p2 text-neutral-000 font-bold mt-[-3px]">
+        <p class="ui-text-p2 font-bold text-neutral-1300 dark:text-neutral-000 mt-[-3px]">
           Chat
         </p>
       </div>
     </div>
-    <p class="ui-text-p3 text-neutral-500 font-medium leading-snug">
+    <p class="ui-text-p3 font-medium leading-snug text-neutral-800 dark:text-neutral-500">
       Rapidly build chat features and roll-out at scale
     </p>
   </div>
-  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100 ">
+  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100">
     <div class="flex gap-12 items-center">
-      <div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
+      <div class="p-1 rounded-lg bg-gradient-to-t dark:bg-gradient-to-b from-neutral-400 dark:from-neutral-900"
            style="width: 40px; height: 40px;"
       >
-        <div class="flex items-center justify-center rounded-lg bg-neutral-1100 "
+        <div class="flex items-center justify-center rounded-lg bg-neutral-200 dark:bg-neutral-1100"
              style="height: 38px;"
         >
-          <svg class=" "
+          <svg class
                style="width: 28px; height: 28px;"
           >
             <use xlink:href="#sprite-icon-product-spaces">
@@ -108,28 +108,28 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
           </svg>
         </div>
       </div>
-      <div class="flex flex-col justify-center ">
-        <p class="ui-text-p3 text-neutral-300 font-medium">
+      <div class="flex flex-col justify-center">
+        <p class="font-medium text-neutral-1000 dark:text-neutral-300 ui-text-p3">
           Ably
         </p>
-        <p class="ui-text-p2 text-neutral-000 font-bold mt-[-3px]">
+        <p class="ui-text-p2 font-bold text-neutral-1300 dark:text-neutral-000 mt-[-3px]">
           Spaces
         </p>
       </div>
     </div>
-    <p class="ui-text-p3 text-neutral-500 font-medium leading-snug">
+    <p class="ui-text-p3 font-medium leading-snug text-neutral-800 dark:text-neutral-500">
       Create collaborative environments in a few lines of code
     </p>
   </div>
-  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100 ">
+  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100">
     <div class="flex gap-12 items-center">
-      <div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
+      <div class="p-1 rounded-lg bg-gradient-to-t dark:bg-gradient-to-b from-neutral-400 dark:from-neutral-900"
            style="width: 40px; height: 40px;"
       >
-        <div class="flex items-center justify-center rounded-lg bg-neutral-1100 "
+        <div class="flex items-center justify-center rounded-lg bg-neutral-200 dark:bg-neutral-1100"
              style="height: 38px;"
         >
-          <svg class=" "
+          <svg class
                style="width: 28px; height: 28px;"
           >
             <use xlink:href="#sprite-icon-product-livesync">
@@ -137,28 +137,28 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
           </svg>
         </div>
       </div>
-      <div class="flex flex-col justify-center ">
-        <p class="ui-text-p3 text-neutral-300 font-medium">
+      <div class="flex flex-col justify-center">
+        <p class="font-medium text-neutral-1000 dark:text-neutral-300 ui-text-p3">
           Ably
         </p>
-        <p class="ui-text-p2 text-neutral-000 font-bold mt-[-3px]">
+        <p class="ui-text-p2 font-bold text-neutral-1300 dark:text-neutral-000 mt-[-3px]">
           LiveSync
         </p>
       </div>
     </div>
-    <p class="ui-text-p3 text-neutral-500 font-medium leading-snug">
+    <p class="ui-text-p3 font-medium leading-snug text-neutral-800 dark:text-neutral-500">
       Sync database changes with frontend clients
     </p>
   </div>
-  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100 ">
+  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100">
     <div class="flex gap-12 items-center">
-      <div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
+      <div class="p-1 rounded-lg bg-gradient-to-t dark:bg-gradient-to-b from-neutral-400 dark:from-neutral-900"
            style="width: 40px; height: 40px;"
       >
-        <div class="flex items-center justify-center rounded-lg bg-neutral-1100 "
+        <div class="flex items-center justify-center rounded-lg bg-neutral-200 dark:bg-neutral-1100"
              style="height: 38px;"
         >
-          <svg class=" "
+          <svg class
                style="width: 28px; height: 28px;"
           >
             <use xlink:href="#sprite-icon-product-asset-tracking">
@@ -166,36 +166,36 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
           </svg>
         </div>
       </div>
-      <div class="flex flex-col justify-center ">
-        <p class="ui-text-p3 text-neutral-300 font-medium">
+      <div class="flex flex-col justify-center">
+        <p class="font-medium text-neutral-1000 dark:text-neutral-300 ui-text-p3">
           Ably
         </p>
-        <p class="ui-text-p2 text-neutral-000 font-bold mt-[-3px]">
+        <p class="ui-text-p2 font-bold text-neutral-1300 dark:text-neutral-000 mt-[-3px]">
           Asset Tracking
         </p>
       </div>
     </div>
-    <p class="ui-text-p3 text-neutral-500 font-medium leading-snug">
+    <p class="ui-text-p3 font-medium leading-snug text-neutral-800 dark:text-neutral-500">
       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="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100">
     <div class="flex gap-12 items-center">
-      <div class="flex flex-row items-center gap-4 ">
-        <p class="ui-text-p2 text-neutral-300 font-medium">
+      <div class="flex flex-row items-center gap-4">
+        <p class="font-medium text-neutral-1000 dark:text-neutral-300 ui-text-p2">
           Ably
         </p>
-        <p class="ui-text-p2 text-neutral-000 font-bold ">
+        <p class="ui-text-p2 font-bold text-neutral-1300 dark:text-neutral-000">
           LiveObjects
         </p>
       </div>
     </div>
     <div class="-mt-8">
-      <div class="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">
+      <div class="table-cell font-sans bg-neutral-300 dark: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>
-    <p class="ui-text-p3 text-neutral-500 font-medium leading-snug">
+    <p class="ui-text-p3 font-medium leading-snug text-neutral-800 dark:text-neutral-500">
       Sync application state across multiple devices
     </p>
   </div>
@@ -204,15 +204,15 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
 
 exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
 <div class="grid grid-cols-3 gap-32">
-  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-100  ">
+  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 dark:bg-neutral-100">
     <div class="flex gap-12 items-center">
-      <div class="p-1 rounded-lg bg-gradient-to-t from-neutral-400 "
+      <div class="p-1 rounded-lg bg-gradient-to-t dark:bg-gradient-to-b from-neutral-900 dark:from-neutral-400"
            style="width: 40px; height: 40px;"
       >
-        <div class="flex items-center justify-center rounded-lg bg-neutral-200 "
+        <div class="flex items-center justify-center rounded-lg bg-neutral-1100 dark:bg-neutral-200"
              style="height: 38px;"
         >
-          <svg class=" "
+          <svg class
                style="width: 28px; height: 28px;"
           >
             <use xlink:href="#sprite-icon-product-pubsub">
@@ -220,20 +220,20 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
           </svg>
         </div>
       </div>
-      <div class="flex flex-col justify-center ">
-        <p class="ui-text-p3 text-neutral-1000 font-medium">
+      <div class="flex flex-col justify-center">
+        <p class="font-medium text-neutral-300 dark:text-neutral-1000 ui-text-p3">
           Ably
         </p>
-        <p class="ui-text-p2 text-neutral-1300 font-bold mt-[-3px]">
+        <p class="ui-text-p2 font-bold text-neutral-000 dark:text-neutral-1300 mt-[-3px]">
           PubSub
         </p>
       </div>
     </div>
-    <p class="ui-text-p3 text-neutral-1000 font-medium leading-snug">
+    <p class="ui-text-p3 font-medium leading-snug text-neutral-300 dark:text-neutral-1000">
       Low-level APIs to build any realtime experience
     </p>
     <a href="/docs/products/channels"
-       class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group/featured-link ui-text-p2 py-8 ui-btn-secondary bg-transparent hover:bg-transparent w-full hover:text-neutral-1300 mt-8 text-center inline-block text-neutral-1300"
+       class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group/featured-link ui-text-p2 py-8 ui-btn-secondary bg-transparent hover:bg-transparent w-full hover:text-neutral-1300 mt-8 text-center inline-block text-neutral-000 dark:text-neutral-1300"
        style="--featured-link-icon-size: var(--fs-p2);"
     >
       View docs
@@ -245,15 +245,15 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
       </svg>
     </a>
   </div>
-  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100 ">
+  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100">
     <div class="flex gap-12 items-center">
-      <div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
+      <div class="p-1 rounded-lg bg-gradient-to-t dark:bg-gradient-to-b from-neutral-400 dark:from-neutral-900"
            style="width: 40px; height: 40px;"
       >
-        <div class="flex items-center justify-center rounded-lg bg-neutral-1100 "
+        <div class="flex items-center justify-center rounded-lg bg-neutral-200 dark:bg-neutral-1100"
              style="height: 38px;"
         >
-          <svg class=" "
+          <svg class
                style="width: 28px; height: 28px;"
           >
             <use xlink:href="#sprite-icon-product-chat">
@@ -261,28 +261,28 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
           </svg>
         </div>
       </div>
-      <div class="flex flex-col justify-center ">
-        <p class="ui-text-p3 text-neutral-300 font-medium">
+      <div class="flex flex-col justify-center">
+        <p class="font-medium text-neutral-1000 dark:text-neutral-300 ui-text-p3">
           Ably
         </p>
-        <p class="ui-text-p2 text-neutral-000 font-bold mt-[-3px]">
+        <p class="ui-text-p2 font-bold text-neutral-1300 dark:text-neutral-000 mt-[-3px]">
           Chat
         </p>
       </div>
     </div>
-    <p class="ui-text-p3 text-neutral-500 font-medium leading-snug">
+    <p class="ui-text-p3 font-medium leading-snug text-neutral-800 dark:text-neutral-500">
       Rapidly build chat features and roll-out at scale
     </p>
   </div>
-  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-100  ">
+  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 dark:bg-neutral-100">
     <div class="flex gap-12 items-center">
-      <div class="p-1 rounded-lg bg-gradient-to-t from-neutral-400 "
+      <div class="p-1 rounded-lg bg-gradient-to-t dark:bg-gradient-to-b from-neutral-900 dark:from-neutral-400"
            style="width: 40px; height: 40px;"
       >
-        <div class="flex items-center justify-center rounded-lg bg-neutral-200 "
+        <div class="flex items-center justify-center rounded-lg bg-neutral-1100 dark:bg-neutral-200"
              style="height: 38px;"
         >
-          <svg class=" "
+          <svg class
                style="width: 28px; height: 28px;"
           >
             <use xlink:href="#sprite-icon-product-spaces">
@@ -290,20 +290,20 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
           </svg>
         </div>
       </div>
-      <div class="flex flex-col justify-center ">
-        <p class="ui-text-p3 text-neutral-1000 font-medium">
+      <div class="flex flex-col justify-center">
+        <p class="font-medium text-neutral-300 dark:text-neutral-1000 ui-text-p3">
           Ably
         </p>
-        <p class="ui-text-p2 text-neutral-1300 font-bold mt-[-3px]">
+        <p class="ui-text-p2 font-bold text-neutral-000 dark:text-neutral-1300 mt-[-3px]">
           Spaces
         </p>
       </div>
     </div>
-    <p class="ui-text-p3 text-neutral-1000 font-medium leading-snug">
+    <p class="ui-text-p3 font-medium leading-snug text-neutral-300 dark:text-neutral-1000">
       Create collaborative environments in a few lines of code
     </p>
     <a href="/docs/products/spaces"
-       class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group/featured-link ui-text-p2 py-8 ui-btn-secondary bg-transparent hover:bg-transparent w-full hover:text-neutral-1300 mt-8 text-center inline-block text-neutral-1300"
+       class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group/featured-link ui-text-p2 py-8 ui-btn-secondary bg-transparent hover:bg-transparent w-full hover:text-neutral-1300 mt-8 text-center inline-block text-neutral-000 dark:text-neutral-1300"
        style="--featured-link-icon-size: var(--fs-p2);"
     >
       Explore
@@ -315,15 +315,15 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
       </svg>
     </a>
   </div>
-  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100 ">
+  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100">
     <div class="flex gap-12 items-center">
-      <div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
+      <div class="p-1 rounded-lg bg-gradient-to-t dark:bg-gradient-to-b from-neutral-400 dark:from-neutral-900"
            style="width: 40px; height: 40px;"
       >
-        <div class="flex items-center justify-center rounded-lg bg-neutral-1100 "
+        <div class="flex items-center justify-center rounded-lg bg-neutral-200 dark:bg-neutral-1100"
              style="height: 38px;"
         >
-          <svg class=" "
+          <svg class
                style="width: 28px; height: 28px;"
           >
             <use xlink:href="#sprite-icon-product-livesync">
@@ -331,28 +331,28 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
           </svg>
         </div>
       </div>
-      <div class="flex flex-col justify-center ">
-        <p class="ui-text-p3 text-neutral-300 font-medium">
+      <div class="flex flex-col justify-center">
+        <p class="font-medium text-neutral-1000 dark:text-neutral-300 ui-text-p3">
           Ably
         </p>
-        <p class="ui-text-p2 text-neutral-000 font-bold mt-[-3px]">
+        <p class="ui-text-p2 font-bold text-neutral-1300 dark:text-neutral-000 mt-[-3px]">
           LiveSync
         </p>
       </div>
     </div>
-    <p class="ui-text-p3 text-neutral-500 font-medium leading-snug">
+    <p class="ui-text-p3 font-medium leading-snug text-neutral-800 dark:text-neutral-500">
       Sync database changes with frontend clients
     </p>
   </div>
-  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-100  ">
+  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 dark:bg-neutral-100">
     <div class="flex gap-12 items-center">
-      <div class="p-1 rounded-lg bg-gradient-to-t from-neutral-400 "
+      <div class="p-1 rounded-lg bg-gradient-to-t dark:bg-gradient-to-b from-neutral-900 dark:from-neutral-400"
            style="width: 40px; height: 40px;"
       >
-        <div class="flex items-center justify-center rounded-lg bg-neutral-200 "
+        <div class="flex items-center justify-center rounded-lg bg-neutral-1100 dark:bg-neutral-200"
              style="height: 38px;"
         >
-          <svg class=" "
+          <svg class
                style="width: 28px; height: 28px;"
           >
             <use xlink:href="#sprite-icon-product-asset-tracking">
@@ -360,20 +360,20 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
           </svg>
         </div>
       </div>
-      <div class="flex flex-col justify-center ">
-        <p class="ui-text-p3 text-neutral-1000 font-medium">
+      <div class="flex flex-col justify-center">
+        <p class="font-medium text-neutral-300 dark:text-neutral-1000 ui-text-p3">
           Ably
         </p>
-        <p class="ui-text-p2 text-neutral-1300 font-bold mt-[-3px]">
+        <p class="ui-text-p2 font-bold text-neutral-000 dark:text-neutral-1300 mt-[-3px]">
           Asset Tracking
         </p>
       </div>
     </div>
-    <p class="ui-text-p3 text-neutral-1000 font-medium leading-snug">
+    <p class="ui-text-p3 font-medium leading-snug text-neutral-300 dark:text-neutral-1000">
       Simple APIs to build realtime tracking applications
     </p>
     <a href="/docs/products/asset-tracking"
-       class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group/featured-link ui-text-p2 py-8 ui-btn-secondary bg-transparent hover:bg-transparent w-full hover:text-neutral-1300 mt-8 text-center inline-block text-neutral-1300"
+       class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group/featured-link ui-text-p2 py-8 ui-btn-secondary bg-transparent hover:bg-transparent w-full hover:text-neutral-1300 mt-8 text-center inline-block text-neutral-000 dark:text-neutral-1300"
        style="--featured-link-icon-size: var(--fs-p2);"
     >
       Explore
@@ -385,23 +385,23 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
       </svg>
     </a>
   </div>
-  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100 ">
+  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100">
     <div class="flex gap-12 items-center">
-      <div class="flex flex-row items-center gap-4 ">
-        <p class="ui-text-p2 text-neutral-300 font-medium">
+      <div class="flex flex-row items-center gap-4">
+        <p class="font-medium text-neutral-1000 dark:text-neutral-300 ui-text-p2">
           Ably
         </p>
-        <p class="ui-text-p2 text-neutral-000 font-bold ">
+        <p class="ui-text-p2 font-bold text-neutral-1300 dark:text-neutral-000">
           LiveObjects
         </p>
       </div>
     </div>
     <div class="-mt-8">
-      <div class="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">
+      <div class="table-cell font-sans bg-neutral-300 dark: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>
-    <p class="ui-text-p3 text-neutral-500 font-medium leading-snug">
+    <p class="ui-text-p3 font-medium leading-snug text-neutral-800 dark:text-neutral-500">
       Sync application state across multiple devices
     </p>
   </div>
diff --git a/src/core/Slider/__snapshots__/Slider.stories.tsx.snap b/src/core/Slider/__snapshots__/Slider.stories.tsx.snap
index ade9273f2..f313ec89a 100644
--- a/src/core/Slider/__snapshots__/Slider.stories.tsx.snap
+++ b/src/core/Slider/__snapshots__/Slider.stories.tsx.snap
@@ -44,7 +44,7 @@ exports[`JS Components/Slider FloatingControlPosition smoke-test 1`] = `
                  class="ui-btn self-start"
               >
                 Read case study
-                <svg class=" ml-4"
+                <svg class="ml-4"
                      style="width: 1.25rem; height: 1.25rem;"
                 >
                   <use xlink:href="#sprite-icon-gui-arrow-right">
@@ -97,7 +97,7 @@ exports[`JS Components/Slider FloatingControlPosition smoke-test 1`] = `
                  class="ui-btn self-start"
               >
                 Read case study
-                <svg class=" ml-4"
+                <svg class="ml-4"
                      style="width: 1.25rem; height: 1.25rem;"
                 >
                   <use xlink:href="#sprite-icon-gui-arrow-right">
@@ -150,7 +150,7 @@ exports[`JS Components/Slider FloatingControlPosition smoke-test 1`] = `
                  class="ui-btn self-start"
               >
                 Read case study
-                <svg class=" ml-4"
+                <svg class="ml-4"
                      style="width: 1.25rem; height: 1.25rem;"
                 >
                   <use xlink:href="#sprite-icon-gui-arrow-right">
@@ -171,7 +171,7 @@ exports[`JS Components/Slider FloatingControlPosition smoke-test 1`] = `
     <button class="hidden sm:flex w-48 h-48 pointer-events-auto rounded border border-mid-grey hover:border-active-orange flex justify-center items-center ui-icon-cta ui-icon-cta-left">
       <div class="ui-icon-cta-holder flex w-48">
         <div class="w-full h-full flex-shrink-0 flex items-center justify-center">
-          <svg class=" "
+          <svg class
                style="width: 1.5rem; height: 1.5rem;"
           >
             <use xlink:href="#sprite-icon-gui-arrow-left">
@@ -179,7 +179,7 @@ exports[`JS Components/Slider FloatingControlPosition smoke-test 1`] = `
           </svg>
         </div>
         <div class="w-full h-full flex-shrink-0 flex items-center justify-center">
-          <svg class=" "
+          <svg class
                style="width: 1.5rem; height: 1.5rem;"
           >
             <use xlink:href="#sprite-icon-gui-arrow-left">
@@ -205,7 +205,7 @@ exports[`JS Components/Slider FloatingControlPosition smoke-test 1`] = `
     <button class="hidden sm:flex w-48 h-48 pointer-events-auto rounded border border-mid-grey hover:border-active-orange justify-center items-center ui-icon-cta ui-icon-cta-right">
       <div class="ui-icon-cta-holder flex w-48">
         <div class="w-full h-full flex-shrink-0 flex items-center justify-center">
-          <svg class=" "
+          <svg class
                style="width: 1.5rem; height: 1.5rem;"
           >
             <use xlink:href="#sprite-icon-gui-arrow-right">
@@ -213,7 +213,7 @@ exports[`JS Components/Slider FloatingControlPosition smoke-test 1`] = `
           </svg>
         </div>
         <div class="w-full h-full flex-shrink-0 flex items-center justify-center">
-          <svg class=" "
+          <svg class
                style="width: 1.5rem; height: 1.5rem;"
           >
             <use xlink:href="#sprite-icon-gui-arrow-right">
@@ -270,7 +270,7 @@ exports[`JS Components/Slider InlineControlPosition smoke-test 1`] = `
                  class="ui-btn self-start"
               >
                 Read case study
-                <svg class=" ml-4"
+                <svg class="ml-4"
                      style="width: 1.25rem; height: 1.25rem;"
                 >
                   <use xlink:href="#sprite-icon-gui-arrow-right">
@@ -323,7 +323,7 @@ exports[`JS Components/Slider InlineControlPosition smoke-test 1`] = `
                  class="ui-btn self-start"
               >
                 Read case study
-                <svg class=" ml-4"
+                <svg class="ml-4"
                      style="width: 1.25rem; height: 1.25rem;"
                 >
                   <use xlink:href="#sprite-icon-gui-arrow-right">
@@ -376,7 +376,7 @@ exports[`JS Components/Slider InlineControlPosition smoke-test 1`] = `
                  class="ui-btn self-start"
               >
                 Read case study
-                <svg class=" ml-4"
+                <svg class="ml-4"
                      style="width: 1.25rem; height: 1.25rem;"
                 >
                   <use xlink:href="#sprite-icon-gui-arrow-right">
@@ -397,7 +397,7 @@ exports[`JS Components/Slider InlineControlPosition smoke-test 1`] = `
     <button class="w-32 h-32 pointer-events-auto rounded border border-mid-grey hover:border-active-orange flex justify-center items-center ui-icon-cta ui-icon-cta-left">
       <div class="ui-icon-cta-holder flex w-48">
         <div class="w-full h-full flex-shrink-0 flex items-center justify-center">
-          <svg class=" "
+          <svg class
                style="width: 1.5rem; height: 1.5rem;"
           >
             <use xlink:href="#sprite-icon-gui-arrow-left">
@@ -405,7 +405,7 @@ exports[`JS Components/Slider InlineControlPosition smoke-test 1`] = `
           </svg>
         </div>
         <div class="w-full h-full flex-shrink-0 flex items-center justify-center">
-          <svg class=" "
+          <svg class
                style="width: 1.5rem; height: 1.5rem;"
           >
             <use xlink:href="#sprite-icon-gui-arrow-left">
@@ -431,7 +431,7 @@ exports[`JS Components/Slider InlineControlPosition smoke-test 1`] = `
     <button class="w-32 h-32 pointer-events-auto rounded border border-mid-grey hover:border-active-orange justify-center items-center ui-icon-cta ui-icon-cta-right">
       <div class="ui-icon-cta-holder flex w-48">
         <div class="w-full h-full flex-shrink-0 flex items-center justify-center">
-          <svg class=" "
+          <svg class
                style="width: 1.5rem; height: 1.5rem;"
           >
             <use xlink:href="#sprite-icon-gui-arrow-right">
@@ -439,7 +439,7 @@ exports[`JS Components/Slider InlineControlPosition smoke-test 1`] = `
           </svg>
         </div>
         <div class="w-full h-full flex-shrink-0 flex items-center justify-center">
-          <svg class=" "
+          <svg class
                style="width: 1.5rem; height: 1.5rem;"
           >
             <use xlink:href="#sprite-icon-gui-arrow-right">
@@ -496,7 +496,7 @@ exports[`JS Components/Slider WithoutIntervalIndicator smoke-test 1`] = `
                  class="ui-btn self-start"
               >
                 Read case study
-                <svg class=" ml-4"
+                <svg class="ml-4"
                      style="width: 1.25rem; height: 1.25rem;"
                 >
                   <use xlink:href="#sprite-icon-gui-arrow-right">
@@ -549,7 +549,7 @@ exports[`JS Components/Slider WithoutIntervalIndicator smoke-test 1`] = `
                  class="ui-btn self-start"
               >
                 Read case study
-                <svg class=" ml-4"
+                <svg class="ml-4"
                      style="width: 1.25rem; height: 1.25rem;"
                 >
                   <use xlink:href="#sprite-icon-gui-arrow-right">
@@ -602,7 +602,7 @@ exports[`JS Components/Slider WithoutIntervalIndicator smoke-test 1`] = `
                  class="ui-btn self-start"
               >
                 Read case study
-                <svg class=" ml-4"
+                <svg class="ml-4"
                      style="width: 1.25rem; height: 1.25rem;"
                 >
                   <use xlink:href="#sprite-icon-gui-arrow-right">
@@ -623,7 +623,7 @@ exports[`JS Components/Slider WithoutIntervalIndicator smoke-test 1`] = `
     <button class="hidden sm:flex w-48 h-48 pointer-events-auto rounded border border-mid-grey hover:border-active-orange flex justify-center items-center ui-icon-cta ui-icon-cta-left">
       <div class="ui-icon-cta-holder flex w-48">
         <div class="w-full h-full flex-shrink-0 flex items-center justify-center">
-          <svg class=" "
+          <svg class
                style="width: 1.5rem; height: 1.5rem;"
           >
             <use xlink:href="#sprite-icon-gui-arrow-left">
@@ -631,7 +631,7 @@ exports[`JS Components/Slider WithoutIntervalIndicator smoke-test 1`] = `
           </svg>
         </div>
         <div class="w-full h-full flex-shrink-0 flex items-center justify-center">
-          <svg class=" "
+          <svg class
                style="width: 1.5rem; height: 1.5rem;"
           >
             <use xlink:href="#sprite-icon-gui-arrow-left">
@@ -673,7 +673,7 @@ exports[`JS Components/Slider WithoutIntervalIndicator smoke-test 1`] = `
     <button class="hidden sm:flex w-48 h-48 pointer-events-auto rounded border border-mid-grey hover:border-active-orange justify-center items-center ui-icon-cta ui-icon-cta-right">
       <div class="ui-icon-cta-holder flex w-48">
         <div class="w-full h-full flex-shrink-0 flex items-center justify-center">
-          <svg class=" "
+          <svg class
                style="width: 1.5rem; height: 1.5rem;"
           >
             <use xlink:href="#sprite-icon-gui-arrow-right">
@@ -681,7 +681,7 @@ exports[`JS Components/Slider WithoutIntervalIndicator smoke-test 1`] = `
           </svg>
         </div>
         <div class="w-full h-full flex-shrink-0 flex items-center justify-center">
-          <svg class=" "
+          <svg class
                style="width: 1.5rem; height: 1.5rem;"
           >
             <use xlink:href="#sprite-icon-gui-arrow-right">
diff --git a/src/core/Table/__snapshots__/Table.stories.tsx.snap b/src/core/Table/__snapshots__/Table.stories.tsx.snap
index 37894cec1..55b1b6366 100644
--- a/src/core/Table/__snapshots__/Table.stories.tsx.snap
+++ b/src/core/Table/__snapshots__/Table.stories.tsx.snap
@@ -68,7 +68,7 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = `
                     aria-describedby="tooltip"
                     class="p-0 relative focus:outline-none h-[1rem] "
             >
-              <svg class="text-neutral-500 "
+              <svg class="text-neutral-800 dark:text-neutral-500"
                    style="width: 1rem; height: 1rem;"
               >
                 <use xlink:href="#sprite-icon-gui-info">
@@ -148,7 +148,7 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = `
                     aria-describedby="tooltip"
                     class="p-0 relative focus:outline-none h-[1rem] "
             >
-              <svg class="text-neutral-500 "
+              <svg class="text-neutral-800 dark:text-neutral-500"
                    style="width: 1rem; height: 1rem;"
               >
                 <use xlink:href="#sprite-icon-gui-info">
@@ -228,7 +228,7 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = `
                     aria-describedby="tooltip"
                     class="p-0 relative focus:outline-none h-[1rem] "
             >
-              <svg class="text-neutral-500 "
+              <svg class="text-neutral-800 dark:text-neutral-500"
                    style="width: 1rem; height: 1rem;"
               >
                 <use xlink:href="#sprite-icon-gui-info">
@@ -308,7 +308,7 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = `
                     aria-describedby="tooltip"
                     class="p-0 relative focus:outline-none h-[1rem] "
             >
-              <svg class="text-neutral-500 "
+              <svg class="text-neutral-800 dark:text-neutral-500"
                    style="width: 1rem; height: 1rem;"
               >
                 <use xlink:href="#sprite-icon-gui-info">
@@ -388,7 +388,7 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = `
                     aria-describedby="tooltip"
                     class="p-0 relative focus:outline-none h-[1rem] "
             >
-              <svg class="text-neutral-500 "
+              <svg class="text-neutral-800 dark:text-neutral-500"
                    style="width: 1rem; height: 1rem;"
               >
                 <use xlink:href="#sprite-icon-gui-info">
@@ -479,7 +479,7 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = `
                     aria-describedby="tooltip"
                     class="p-0 relative focus:outline-none h-[1rem] "
             >
-              <svg class="text-neutral-500 "
+              <svg class="text-neutral-800 dark:text-neutral-500"
                    style="width: 1rem; height: 1rem;"
               >
                 <use xlink:href="#sprite-icon-gui-info">
@@ -559,7 +559,7 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = `
                     aria-describedby="tooltip"
                     class="p-0 relative focus:outline-none h-[1rem] "
             >
-              <svg class="text-neutral-500 "
+              <svg class="text-neutral-800 dark:text-neutral-500"
                    style="width: 1rem; height: 1rem;"
               >
                 <use xlink:href="#sprite-icon-gui-info">
@@ -639,7 +639,7 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = `
                     aria-describedby="tooltip"
                     class="p-0 relative focus:outline-none h-[1rem] "
             >
-              <svg class="text-neutral-500 "
+              <svg class="text-neutral-800 dark:text-neutral-500"
                    style="width: 1rem; height: 1rem;"
               >
                 <use xlink:href="#sprite-icon-gui-info">
@@ -719,7 +719,7 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = `
                     aria-describedby="tooltip"
                     class="p-0 relative focus:outline-none h-[1rem] "
             >
-              <svg class="text-neutral-500 "
+              <svg class="text-neutral-800 dark:text-neutral-500"
                    style="width: 1rem; height: 1rem;"
               >
                 <use xlink:href="#sprite-icon-gui-info">
@@ -799,7 +799,7 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = `
                     aria-describedby="tooltip"
                     class="p-0 relative focus:outline-none h-[1rem] "
             >
-              <svg class="text-neutral-500 "
+              <svg class="text-neutral-800 dark:text-neutral-500"
                    style="width: 1rem; height: 1rem;"
               >
                 <use xlink:href="#sprite-icon-gui-info">
@@ -890,7 +890,7 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = `
                     aria-describedby="tooltip"
                     class="p-0 relative focus:outline-none h-[1rem] "
             >
-              <svg class="text-neutral-500 "
+              <svg class="text-neutral-800 dark:text-neutral-500"
                    style="width: 1rem; height: 1rem;"
               >
                 <use xlink:href="#sprite-icon-gui-info">
@@ -970,7 +970,7 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = `
                     aria-describedby="tooltip"
                     class="p-0 relative focus:outline-none h-[1rem] "
             >
-              <svg class="text-neutral-500 "
+              <svg class="text-neutral-800 dark:text-neutral-500"
                    style="width: 1rem; height: 1rem;"
               >
                 <use xlink:href="#sprite-icon-gui-info">
@@ -1050,7 +1050,7 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = `
                     aria-describedby="tooltip"
                     class="p-0 relative focus:outline-none h-[1rem] "
             >
-              <svg class="text-neutral-500 "
+              <svg class="text-neutral-800 dark:text-neutral-500"
                    style="width: 1rem; height: 1rem;"
               >
                 <use xlink:href="#sprite-icon-gui-info">
@@ -1130,7 +1130,7 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = `
                     aria-describedby="tooltip"
                     class="p-0 relative focus:outline-none h-[1rem] "
             >
-              <svg class="text-neutral-500 "
+              <svg class="text-neutral-800 dark:text-neutral-500"
                    style="width: 1rem; height: 1rem;"
               >
                 <use xlink:href="#sprite-icon-gui-info">
@@ -1210,7 +1210,7 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = `
                     aria-describedby="tooltip"
                     class="p-0 relative focus:outline-none h-[1rem] "
             >
-              <svg class="text-neutral-500 "
+              <svg class="text-neutral-800 dark:text-neutral-500"
                    style="width: 1rem; height: 1rem;"
               >
                 <use xlink:href="#sprite-icon-gui-info">
diff --git a/src/core/Tooltip.tsx b/src/core/Tooltip.tsx
index e0c5951f7..5493158be 100644
--- a/src/core/Tooltip.tsx
+++ b/src/core/Tooltip.tsx
@@ -11,14 +11,11 @@ import React, {
 } from "react";
 import { createPortal } from "react-dom";
 import Icon from "./Icon";
-import useTheming from "./hooks/useTheming";
-import { Theme } from "./styles/colors/types";
 
 type TooltipProps = {
   triggerElement?: ReactNode;
   triggerProps?: ButtonHTMLAttributes<HTMLButtonElement>;
   tooltipProps?: HTMLAttributes<HTMLDivElement>;
-  theme?: Theme;
   interactive?: boolean;
 } & HTMLAttributes<HTMLDivElement>;
 
@@ -27,7 +24,6 @@ const Tooltip = ({
   triggerElement,
   triggerProps,
   tooltipProps,
-  theme = "dark",
   interactive = false,
   ...rest
 }: PropsWithChildren<TooltipProps>) => {
@@ -38,10 +34,6 @@ const Tooltip = ({
   const reference = useRef<HTMLButtonElement>(null);
   const floating = useRef<HTMLDivElement>(null);
   const fadeOutTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-  const { themeColor } = useTheming({
-    baseTheme: "light",
-    theme,
-  });
 
   useEffect(() => {
     if (open) {
@@ -166,7 +158,7 @@ const Tooltip = ({
         {triggerElement ?? (
           <Icon
             name="icon-gui-info"
-            color={`${themeColor("text-neutral-800")}`}
+            color="text-neutral-800 dark:text-neutral-500"
             size="1rem"
           />
         )}
@@ -187,7 +179,7 @@ const Tooltip = ({
                 boxShadow: "4px 4px 15px rgba(0, 0, 0, 0.2)",
               }}
               {...tooltipProps}
-              className={`${themeColor("bg-neutral-1000")} ${themeColor("text-neutral-200")} ui-text-p3 font-medium p-16 ${interactive ? "" : "pointer-events-none"} rounded-lg absolute ${
+              className={`bg-neutral-1000 dark:bg-neutral-300 text-neutral-200 dark:text-neutral-1000 ui-text-p3 font-medium p-16 ${interactive ? "" : "pointer-events-none"} rounded-lg absolute ${
                 tooltipProps?.className ?? ""
               } ${fadeOut ? "animate-[tooltipExit_0.25s_ease-in-out]" : "animate-[tooltipEntry_0.25s_ease-in-out]"}`}
             >
diff --git a/src/core/Tooltip/__snapshots__/Tooltip.stories.tsx.snap b/src/core/Tooltip/__snapshots__/Tooltip.stories.tsx.snap
index b50df246d..6c15e7f08 100644
--- a/src/core/Tooltip/__snapshots__/Tooltip.stories.tsx.snap
+++ b/src/core/Tooltip/__snapshots__/Tooltip.stories.tsx.snap
@@ -14,7 +14,7 @@ exports[`JS Components/Tooltip Central smoke-test 1`] = `
               aria-describedby="tooltip"
               class="p-0 relative focus:outline-none h-[1rem] "
       >
-        <svg class="text-neutral-500 "
+        <svg class="text-neutral-800 dark:text-neutral-500"
              style="width: 1rem; height: 1rem;"
         >
           <use xlink:href="#sprite-icon-gui-info">
@@ -24,12 +24,14 @@ exports[`JS Components/Tooltip Central smoke-test 1`] = `
     </div>
   </div>
   <div class="w-256 h-256 flex items-center justify-center m-24 border mx-auto rounded-lg">
-    <div class="inline-flex ml-8 ">
+    <div theme="light"
+         class="inline-flex ml-8 "
+    >
       <button type="button"
               aria-describedby="tooltip"
               class="p-0 relative focus:outline-none h-[1rem] "
       >
-        <svg class="text-neutral-800 "
+        <svg class="text-neutral-800 dark:text-neutral-500"
              style="width: 1rem; height: 1rem;"
         >
           <use xlink:href="#sprite-icon-gui-info">
@@ -55,7 +57,7 @@ exports[`JS Components/Tooltip Interactive smoke-test 1`] = `
               aria-describedby="tooltip"
               class="p-0 relative focus:outline-none h-[1rem] "
       >
-        <svg class="text-neutral-500 "
+        <svg class="text-neutral-800 dark:text-neutral-500"
              style="width: 1rem; height: 1rem;"
         >
           <use xlink:href="#sprite-icon-gui-info">
@@ -65,12 +67,14 @@ exports[`JS Components/Tooltip Interactive smoke-test 1`] = `
     </div>
   </div>
   <div class="w-256 h-256 flex items-center justify-center m-24 border mx-auto rounded-lg">
-    <div class="inline-flex ml-8 ">
+    <div theme="light"
+         class="inline-flex ml-8 "
+    >
       <button type="button"
               aria-describedby="tooltip"
               class="p-0 relative focus:outline-none h-[1rem] "
       >
-        <svg class="text-neutral-800 "
+        <svg class="text-neutral-800 dark:text-neutral-500"
              style="width: 1rem; height: 1rem;"
         >
           <use xlink:href="#sprite-icon-gui-info">
@@ -96,7 +100,7 @@ exports[`JS Components/Tooltip LeftBound smoke-test 1`] = `
               aria-describedby="tooltip"
               class="p-0 relative focus:outline-none h-[1rem] "
       >
-        <svg class="text-neutral-500 "
+        <svg class="text-neutral-800 dark:text-neutral-500"
              style="width: 1rem; height: 1rem;"
         >
           <use xlink:href="#sprite-icon-gui-info">
@@ -106,12 +110,14 @@ exports[`JS Components/Tooltip LeftBound smoke-test 1`] = `
     </div>
   </div>
   <div class="w-256 h-256 flex items-center m-24 border mx-auto rounded-lg">
-    <div class="inline-flex ml-8 ">
+    <div theme="light"
+         class="inline-flex ml-8 "
+    >
       <button type="button"
               aria-describedby="tooltip"
               class="p-0 relative focus:outline-none h-[1rem] "
       >
-        <svg class="text-neutral-800 "
+        <svg class="text-neutral-800 dark:text-neutral-500"
              style="width: 1rem; height: 1rem;"
         >
           <use xlink:href="#sprite-icon-gui-info">
diff --git a/src/core/hooks/useTheming.tsx b/src/core/hooks/useTheming.tsx
deleted file mode 100644
index 8c8befaef..000000000
--- a/src/core/hooks/useTheming.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { useCallback } from "react";
-import { ColorClass, Theme } from "../styles/colors/types";
-import { invertTailwindClassVariant } from "../styles/colors/utils";
-
-type UseThemingProps = {
-  baseTheme?: Theme;
-  theme?: Theme;
-};
-
-const useTheming = ({
-  baseTheme = "dark",
-  theme = "dark",
-}: UseThemingProps) => {
-  const themeColor = useCallback(
-    (color: ColorClass) =>
-      theme === baseTheme ? color : invertTailwindClassVariant(color),
-    [baseTheme, theme],
-  );
-
-  return {
-    themeColor,
-  };
-};
-
-export default useTheming;
diff --git a/src/core/styles/__snapshots__/Button.stories.tsx.snap b/src/core/styles/__snapshots__/Button.stories.tsx.snap
index f4f8f7e41..9c3423b17 100644
--- a/src/core/styles/__snapshots__/Button.stories.tsx.snap
+++ b/src/core/styles/__snapshots__/Button.stories.tsx.snap
@@ -10,7 +10,7 @@ exports[`CSS/Button ExtraSmall smoke-test 1`] = `
   <button type="button"
           class="ui-btn p-btn-xsmall text-btn4"
   >
-    <svg class=" ui-btn-icon-xsmall"
+    <svg class="ui-btn-icon-xsmall"
          style="width: 1rem; height: 1rem;"
     >
       <use xlink:href="#sprite-icon-gui-search">
@@ -68,7 +68,7 @@ exports[`CSS/Button Large smoke-test 1`] = `
   <button type="button"
           class="ui-btn p-btn-large text-btn1"
   >
-    <svg class=" ui-btn-icon"
+    <svg class="ui-btn-icon"
          style="width: 1rem; height: 1rem;"
     >
       <use xlink:href="#sprite-icon-gui-search">
@@ -116,7 +116,7 @@ exports[`CSS/Button Small smoke-test 1`] = `
   <button type="button"
           class="ui-btn p-btn-small text-btn3"
   >
-    <svg class=" ui-btn-icon-small"
+    <svg class="ui-btn-icon-small"
          style="width: 1rem; height: 1rem;"
     >
       <use xlink:href="#sprite-icon-gui-search">
@@ -180,7 +180,7 @@ exports[`CSS/Button WithIcons smoke-test 1`] = `
   <button type="button"
           class="ui-btn"
   >
-    <svg class=" ui-btn-icon"
+    <svg class="ui-btn-icon"
          style="width: 1rem; height: 1rem;"
     >
       <use xlink:href="#sprite-icon-gui-search">
@@ -191,7 +191,7 @@ exports[`CSS/Button WithIcons smoke-test 1`] = `
   <button type="button"
           class="ui-btn-alt"
   >
-    <svg class=" ui-btn-icon"
+    <svg class="ui-btn-icon"
          style="width: 1rem; height: 1rem;"
     >
       <use xlink:href="#sprite-icon-gui-search">
@@ -202,7 +202,7 @@ exports[`CSS/Button WithIcons smoke-test 1`] = `
   <button type="button"
           class="ui-btn-secondary"
   >
-    <svg class=" ui-btn-icon"
+    <svg class="ui-btn-icon"
          style="width: 1rem; height: 1rem;"
     >
       <use xlink:href="#sprite-icon-gui-search">
@@ -214,7 +214,7 @@ exports[`CSS/Button WithIcons smoke-test 1`] = `
           class="ui-btn"
           disabled
   >
-    <svg class=" ui-btn-icon"
+    <svg class="ui-btn-icon"
          style="width: 1rem; height: 1rem;"
     >
       <use xlink:href="#sprite-icon-gui-search">
@@ -226,7 +226,7 @@ exports[`CSS/Button WithIcons smoke-test 1`] = `
           class="ui-btn-alt"
           disabled
   >
-    <svg class=" ui-btn-icon"
+    <svg class="ui-btn-icon"
          style="width: 1rem; height: 1rem;"
     >
       <use xlink:href="#sprite-icon-gui-search">
@@ -238,7 +238,7 @@ exports[`CSS/Button WithIcons smoke-test 1`] = `
           class="ui-btn-secondary"
           disabled
   >
-    <svg class=" ui-btn-icon"
+    <svg class="ui-btn-icon"
          style="width: 1rem; height: 1rem;"
     >
       <use xlink:href="#sprite-icon-gui-search">
diff --git a/src/core/styles/__snapshots__/Forms.stories.tsx.snap b/src/core/styles/__snapshots__/Forms.stories.tsx.snap
index 91675344e..6413ac64f 100644
--- a/src/core/styles/__snapshots__/Forms.stories.tsx.snap
+++ b/src/core/styles/__snapshots__/Forms.stories.tsx.snap
@@ -17,7 +17,7 @@ exports[`CSS/Forms Checkboxes smoke-test 1`] = `
       <div data-ui-checkbox-styled
            class="ui-checkbox-styled"
       >
-        <svg class=" ui-checkbox-styled-tick"
+        <svg class="ui-checkbox-styled-tick"
              style="width: 1rem; height: 1rem;"
         >
           <use xlink:href="#sprite-icon-gui-tick">
@@ -47,7 +47,7 @@ exports[`CSS/Forms Checkboxes smoke-test 1`] = `
       <div data-ui-checkbox-styled
            class="ui-checkbox-styled"
       >
-        <svg class=" ui-checkbox-styled-tick"
+        <svg class="ui-checkbox-styled-tick"
              style="width: 1rem; height: 1rem;"
         >
           <use xlink:href="#sprite-icon-gui-tick">
diff --git a/src/core/styles/colors/Colors.stories.tsx b/src/core/styles/colors/Colors.stories.tsx
index 40eb1fbc1..84babbb31 100644
--- a/src/core/styles/colors/Colors.stories.tsx
+++ b/src/core/styles/colors/Colors.stories.tsx
@@ -1,7 +1,5 @@
 import React from "react";
 import { colorRoles } from "./types";
-import Icon from "../../Icon";
-import useTheming from "../../hooks/useTheming";
 
 export default {
   title: "CSS/Colors",
@@ -18,11 +16,13 @@ const colorSet = (colors, useClass = "") =>
         style={{ backgroundColor: useClass ? `` : `var(--color-${color})` }}
       />
       <div className="p-12 flex flex-col flex-1">
-        <p className="ui-text-p2 font-semibold flex-1">{color}</p>
-        <p className="ui-text-p3 font-normal text-neutral-800">
+        <p className="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
+          {color}
+        </p>
+        <p className="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
           {varToValues(color)[0]}
         </p>
-        <p className="ui-text-p3 text-[12px] font-normal text-neutral-800">
+        <p className="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
           {varToValues(color)[1]}
         </p>
       </div>
@@ -102,36 +102,3 @@ export const GUIColors = {
     },
   },
 };
-
-export const DynamicTheming = {
-  render: () => {
-    const { themeColor } = useTheming({
-      baseTheme: "dark",
-      theme: "light",
-    });
-
-    return (
-      <div className="flex items-center">
-        <div className="flex flex-wrap gap-24">
-          {colorSet(["orange-300"], "bg-orange-300")}
-        </div>
-        <Icon
-          name="icon-gui-arrow-right"
-          size="48px"
-          additionalCSS="m-16"
-        ></Icon>
-        <div className="flex flex-wrap gap-24">
-          {colorSet(["orange-900"], themeColor("bg-orange-300"))}
-        </div>
-      </div>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "We can generate alternatives for a color based on the theme. To do this, pull in the `useTheming` hook and access the `themeColor` function - passing in `baseTheme` and `theme` when you call the hook to provide the context for `themeColor`. Then, wrap any Tailwind color class in `themeColor` to conditionally generate the alternative color, if the target theme differs from the base theme. Any new classes will be generated and fed into Tailwind at build time.",
-      },
-    },
-  },
-};
diff --git a/src/core/styles/colors/__snapshots__/Colors.stories.tsx.snap b/src/core/styles/colors/__snapshots__/Colors.stories.tsx.snap
index 30118d8b1..98adf862e 100644
--- a/src/core/styles/colors/__snapshots__/Colors.stories.tsx.snap
+++ b/src/core/styles/colors/__snapshots__/Colors.stories.tsx.snap
@@ -1,50 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CSS/Colors DynamicTheming smoke-test 1`] = `
-<div class="flex items-center">
-  <div class="flex flex-wrap gap-24">
-    <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-      <div class="h-[100px] rounded-t-lg bg-orange-300">
-      </div>
-      <div class="p-12 flex flex-col flex-1">
-        <p class="ui-text-p2 font-semibold flex-1">
-          orange-300
-        </p>
-        <p class="ui-text-p3 font-normal text-neutral-800">
-          #ffc4ae
-        </p>
-        <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
-          rgb(255, 196, 174)
-        </p>
-      </div>
-    </div>
-  </div>
-  <svg class=" m-16"
-       style="width: 48px; height: 48px;"
-  >
-    <use xlink:href="#sprite-icon-gui-arrow-right">
-    </use>
-  </svg>
-  <div class="flex flex-wrap gap-24">
-    <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
-      <div class="h-[100px] rounded-t-lg bg-orange-900">
-      </div>
-      <div class="p-12 flex flex-col flex-1">
-        <p class="ui-text-p2 font-semibold flex-1">
-          orange-900
-        </p>
-        <p class="ui-text-p3 font-normal text-neutral-800">
-          #b82202
-        </p>
-        <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
-          rgb(184, 34, 2)
-        </p>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`CSS/Colors GUIColors smoke-test 1`] = `
 <div class="flex flex-wrap gap-24">
   <div class="rounded-lg w-128 ui-shadow-lg-soft flex flex-col">
@@ -53,13 +8,13 @@ exports[`CSS/Colors GUIColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         gui-blue-default-light
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #006edc
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(0, 110, 220)
       </p>
     </div>
@@ -70,13 +25,13 @@ exports[`CSS/Colors GUIColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         gui-blue-hover-light
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #0862b9
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(8, 98, 185)
       </p>
     </div>
@@ -87,13 +42,13 @@ exports[`CSS/Colors GUIColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         gui-blue-active-light
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #074095
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(7, 64, 149)
       </p>
     </div>
@@ -104,13 +59,13 @@ exports[`CSS/Colors GUIColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         gui-blue-default-dark
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #4da6ff
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(77, 166, 255)
       </p>
     </div>
@@ -121,13 +76,13 @@ exports[`CSS/Colors GUIColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         gui-blue-hover-dark
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #2894ff
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(40, 148, 255)
       </p>
     </div>
@@ -138,13 +93,13 @@ exports[`CSS/Colors GUIColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         gui-blue-active-dark
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #0080ff
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(0, 128, 255)
       </p>
     </div>
@@ -155,13 +110,13 @@ exports[`CSS/Colors GUIColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         gui-blue-focus
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #80b9f2
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(128, 185, 242)
       </p>
     </div>
@@ -172,13 +127,13 @@ exports[`CSS/Colors GUIColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         gui-unavailable
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #a8a8a8
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(168, 168, 168)
       </p>
     </div>
@@ -189,13 +144,13 @@ exports[`CSS/Colors GUIColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         gui-success-green
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #11cb24
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(17, 203, 36)
       </p>
     </div>
@@ -206,13 +161,13 @@ exports[`CSS/Colors GUIColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         gui-error-red
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #fb0c0c
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(251, 12, 12)
       </p>
     </div>
@@ -223,13 +178,13 @@ exports[`CSS/Colors GUIColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         gui-focus
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #80b9f2
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(128, 185, 242)
       </p>
     </div>
@@ -240,13 +195,13 @@ exports[`CSS/Colors GUIColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         gui-focus-outline
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #80b9f2
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(128, 185, 242)
       </p>
     </div>
@@ -257,13 +212,13 @@ exports[`CSS/Colors GUIColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         gui-visited
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #4887c2
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(72, 135, 194)
       </p>
     </div>
@@ -279,13 +234,13 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         neutral-000
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #ffffff
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(255, 255, 255)
       </p>
     </div>
@@ -296,13 +251,13 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         neutral-100
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #f6f8fa
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(246, 248, 250)
       </p>
     </div>
@@ -313,13 +268,13 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         neutral-200
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #eef1f6
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(238, 241, 246)
       </p>
     </div>
@@ -330,13 +285,13 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         neutral-300
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #e6eaf0
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(230, 234, 240)
       </p>
     </div>
@@ -347,13 +302,13 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         neutral-400
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #e2e7ef
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(226, 231, 239)
       </p>
     </div>
@@ -364,13 +319,13 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         neutral-500
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #c6ced9
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(198, 206, 217)
       </p>
     </div>
@@ -381,13 +336,13 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         neutral-600
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #adb6c2
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(173, 182, 194)
       </p>
     </div>
@@ -398,13 +353,13 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         neutral-700
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #89929f
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(137, 146, 159)
       </p>
     </div>
@@ -415,13 +370,13 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         neutral-800
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #667085
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(102, 112, 133)
       </p>
     </div>
@@ -432,13 +387,13 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         neutral-900
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #39414e
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(57, 65, 78)
       </p>
     </div>
@@ -449,13 +404,13 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         neutral-1000
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #2b303b
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(43, 48, 59)
       </p>
     </div>
@@ -466,13 +421,13 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         neutral-1100
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #202531
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(32, 37, 49)
       </p>
     </div>
@@ -483,13 +438,13 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         neutral-1200
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #141924
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(20, 25, 36)
       </p>
     </div>
@@ -500,13 +455,13 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         neutral-1300
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #03020d
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(3, 2, 13)
       </p>
     </div>
@@ -522,13 +477,13 @@ exports[`CSS/Colors OrangeColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         orange-100
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #fff5f1
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(255, 245, 241)
       </p>
     </div>
@@ -539,13 +494,13 @@ exports[`CSS/Colors OrangeColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         orange-200
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #ffe3d8
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(255, 227, 216)
       </p>
     </div>
@@ -556,13 +511,13 @@ exports[`CSS/Colors OrangeColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         orange-300
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #ffc4ae
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(255, 196, 174)
       </p>
     </div>
@@ -573,13 +528,13 @@ exports[`CSS/Colors OrangeColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         orange-400
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #ff9c79
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(255, 156, 121)
       </p>
     </div>
@@ -590,13 +545,13 @@ exports[`CSS/Colors OrangeColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         orange-500
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #ff723f
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(255, 114, 63)
       </p>
     </div>
@@ -607,13 +562,13 @@ exports[`CSS/Colors OrangeColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         orange-600
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #ff5416
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(255, 84, 22)
       </p>
     </div>
@@ -624,13 +579,13 @@ exports[`CSS/Colors OrangeColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         orange-700
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #ff2739
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(255, 39, 57)
       </p>
     </div>
@@ -641,13 +596,13 @@ exports[`CSS/Colors OrangeColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         orange-800
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #e40000
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(228, 0, 0)
       </p>
     </div>
@@ -658,13 +613,13 @@ exports[`CSS/Colors OrangeColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         orange-900
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #b82202
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(184, 34, 2)
       </p>
     </div>
@@ -675,13 +630,13 @@ exports[`CSS/Colors OrangeColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         orange-1000
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #751500
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(117, 21, 0)
       </p>
     </div>
@@ -692,13 +647,13 @@ exports[`CSS/Colors OrangeColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         orange-1100
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #2a0b00
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(42, 11, 0)
       </p>
     </div>
@@ -714,13 +669,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         yellow-100
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #fffbef
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(255, 251, 239)
       </p>
     </div>
@@ -731,13 +686,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         yellow-200
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #fff0ba
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(255, 240, 186)
       </p>
     </div>
@@ -748,13 +703,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         yellow-300
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #ffe27c
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(255, 226, 124)
       </p>
     </div>
@@ -765,13 +720,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         yellow-400
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #ffd43d
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(255, 212, 61)
       </p>
     </div>
@@ -782,13 +737,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         yellow-500
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #f8c100
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(248, 193, 0)
       </p>
     </div>
@@ -799,13 +754,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         yellow-600
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #e8a700
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(232, 167, 0)
       </p>
     </div>
@@ -816,13 +771,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         yellow-700
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #ac8600
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(172, 134, 0)
       </p>
     </div>
@@ -833,13 +788,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         yellow-800
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #654f00
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(101, 79, 0)
       </p>
     </div>
@@ -850,13 +805,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         yellow-900
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #291c01
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(41, 28, 1)
       </p>
     </div>
@@ -867,13 +822,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         green-100
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #f1fff1
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(241, 255, 241)
       </p>
     </div>
@@ -884,13 +839,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         green-200
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #b8ffbb
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(184, 255, 187)
       </p>
     </div>
@@ -901,13 +856,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         green-300
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #80ff85
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(128, 255, 133)
       </p>
     </div>
@@ -918,13 +873,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         green-400
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #08ff13
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(8, 255, 19)
       </p>
     </div>
@@ -935,13 +890,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         green-500
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #00e80b
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(0, 232, 11)
       </p>
     </div>
@@ -952,13 +907,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         green-600
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #00c008
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(0, 192, 8)
       </p>
     </div>
@@ -969,13 +924,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         green-700
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #008e06
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(0, 142, 6)
       </p>
     </div>
@@ -986,13 +941,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         green-800
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #005303
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(0, 83, 3)
       </p>
     </div>
@@ -1003,13 +958,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         green-900
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #002a02
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(0, 42, 2)
       </p>
     </div>
@@ -1020,13 +975,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         blue-100
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #f1fbff
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(241, 251, 255)
       </p>
     </div>
@@ -1037,13 +992,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         blue-200
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #b8eaff
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(184, 234, 255)
       </p>
     </div>
@@ -1054,13 +1009,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         blue-300
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #80d9ff
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(128, 217, 255)
       </p>
     </div>
@@ -1071,13 +1026,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         blue-400
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #4ad4ff
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(74, 212, 255)
       </p>
     </div>
@@ -1088,13 +1043,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         blue-500
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #2cc0ff
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(44, 192, 255)
       </p>
     </div>
@@ -1105,13 +1060,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         blue-600
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #00a5ec
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(0, 165, 236)
       </p>
     </div>
@@ -1122,13 +1077,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         blue-700
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #0284cd
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(2, 132, 205)
       </p>
     </div>
@@ -1139,13 +1094,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         blue-800
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #004b75
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(0, 75, 117)
       </p>
     </div>
@@ -1156,13 +1111,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         blue-900
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #001b2a
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(0, 27, 42)
       </p>
     </div>
@@ -1173,13 +1128,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         violet-100
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #f7f2fe
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(247, 242, 254)
       </p>
     </div>
@@ -1190,13 +1145,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         violet-200
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #d8bcfb
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(216, 188, 251)
       </p>
     </div>
@@ -1207,13 +1162,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         violet-300
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #b986f8
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(185, 134, 248)
       </p>
     </div>
@@ -1224,13 +1179,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         violet-400
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #9951f5
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(153, 81, 245)
       </p>
     </div>
@@ -1241,13 +1196,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         violet-500
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #7a1bf2
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(122, 27, 242)
       </p>
     </div>
@@ -1258,13 +1213,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         violet-600
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #5f0bc9
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(95, 11, 201)
       </p>
     </div>
@@ -1275,13 +1230,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         violet-700
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #460894
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(70, 8, 148)
       </p>
     </div>
@@ -1292,13 +1247,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         violet-800
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #2d055e
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(45, 5, 94)
       </p>
     </div>
@@ -1309,13 +1264,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         violet-900
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #130228
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(19, 2, 40)
       </p>
     </div>
@@ -1326,13 +1281,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         pink-100
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #fff1fc
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(255, 241, 252)
       </p>
     </div>
@@ -1343,13 +1298,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         pink-200
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #ffb8f1
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(255, 184, 241)
       </p>
     </div>
@@ -1360,13 +1315,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         pink-300
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #ff80e6
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(255, 128, 230)
       </p>
     </div>
@@ -1377,13 +1332,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         pink-400
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #ff47db
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(255, 71, 219)
       </p>
     </div>
@@ -1394,13 +1349,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         pink-500
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #ff17d2
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(255, 23, 210)
       </p>
     </div>
@@ -1411,13 +1366,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         pink-600
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #d400ab
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(212, 0, 171)
       </p>
     </div>
@@ -1428,13 +1383,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         pink-700
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #9c007e
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(156, 0, 126)
       </p>
     </div>
@@ -1445,13 +1400,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         pink-800
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #630050
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(99, 0, 80)
       </p>
     </div>
@@ -1462,13 +1417,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = `
     >
     </div>
     <div class="p-12 flex flex-col flex-1">
-      <p class="ui-text-p2 font-semibold flex-1">
+      <p class="ui-text-p2 font-semibold flex-1 text-neutral-1000 dark:text-neutral-300">
         pink-900
       </p>
-      <p class="ui-text-p3 font-normal text-neutral-800">
+      <p class="ui-text-p3 font-normal text-neutral-800 dark:text-neutral-500">
         #2a0022
       </p>
-      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800">
+      <p class="ui-text-p3 text-[12px] font-normal text-neutral-800 dark:text-neutral-500">
         rgb(42, 0, 34)
       </p>
     </div>
diff --git a/src/core/styles/colors/types.ts b/src/core/styles/colors/types.ts
index 6214a5a06..405114ed8 100644
--- a/src/core/styles/colors/types.ts
+++ b/src/core/styles/colors/types.ts
@@ -5,13 +5,7 @@ export type ColorName =
   | (typeof guiColors)[number]
   | (typeof aliasedColors)[number];
 
-export const variants = [
-  "",
-  "hover:",
-  "focus:",
-  "group-hover:",
-  "group-focus:",
-] as const;
+export const variants = ["", "dark:"] as const;
 
 type ColorClassVariants = (typeof variants)[number];
 
@@ -36,6 +30,8 @@ export type Theme = "light" | "dark";
 export type ColorClass =
   `${ColorClassVariants}${ColorClassPrefixes}-${ColorName}`;
 
+export type ColorThemeSet = `${string} dark:${string}`;
+
 export const neutralColors = [
   "neutral-000",
   "neutral-100",
diff --git a/tailwind.config.js b/tailwind.config.js
index 284927569..bf970b0a4 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,7 @@
 module.exports = {
   content: ["./src/**/*.{js,ts,tsx,stories.tsx,json}"],
   safelist: [{ pattern: /^hljs.*/ }],
+  darkMode: ["selector", ".ui-theme-dark"],
   theme: {
     screens: {
       // CSS custom properties can't be used in media queries

From 4cf104cceffba3b7ae85879ade17a2b298806892 Mon Sep 17 00:00:00 2001
From: Jamie Henson <jamie.henson@ably.com>
Date: Tue, 19 Nov 2024 13:57:48 +0000
Subject: [PATCH 6/7] chore: automate generation of MSW file

---
 package.json                |  3 +++
 public/mockServiceWorker.js | 15 ++++++++++++---
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index dca92dea0..aaf07af33 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,9 @@
     "index.d.ts"
   ],
   "types": "index.d.ts",
+  "msw": {
+    "workerDirectory": "./public"
+  },
   "devDependencies": {
     "@storybook/addon-a11y": "^8.4.0",
     "@storybook/addon-essentials": "^8.4.0",
diff --git a/public/mockServiceWorker.js b/public/mockServiceWorker.js
index cbd28e53a..8c13930ac 100644
--- a/public/mockServiceWorker.js
+++ b/public/mockServiceWorker.js
@@ -8,8 +8,8 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.3.4'
-const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
+const PACKAGE_VERSION = '2.6.1'
+const INTEGRITY_CHECKSUM = '07a8241b182f8a246a7cd39894799a9e'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
 
@@ -62,7 +62,12 @@ self.addEventListener('message', async function (event) {
 
       sendToClient(client, {
         type: 'MOCKING_ENABLED',
-        payload: true,
+        payload: {
+          client: {
+            id: client.id,
+            frameType: client.frameType,
+          },
+        },
       })
       break
     }
@@ -155,6 +160,10 @@ async function handleRequest(event, requestId) {
 async function resolveMainClient(event) {
   const client = await self.clients.get(event.clientId)
 
+  if (activeClientIds.has(event.clientId)) {
+    return client
+  }
+
   if (client?.frameType === 'top-level') {
     return client
   }

From fad769c1f7620fe7703fbe813adecc09c27213c5 Mon Sep 17 00:00:00 2001
From: Jamie Henson <jamie.henson@ably.com>
Date: Wed, 20 Nov 2024 13:27:00 +0000
Subject: [PATCH 7/7] Publish v14.9.0-dev.4cf104c

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index aaf07af33..293649efb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "14.9.0",
+  "version": "14.9.0-dev.4cf104c",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",