Merge pull request #546 from ably/adopt-tw-theming

[WEB-4122] 14.9.0 - Adopt TW theming, real SB dark mode, add TS declarations for scripts

.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;
+}
+
+.ui-theme-dark .sb-bar,
+.ui-theme-dark .sb-anchor > p > code {
+  @apply bg-neutral-1200;
+}
+
+.ui-theme-dark .docblock-code-toggle {
+  @apply bg-neutral-1200 text-neutral-000;
+}
+
+.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;
+}
+
+.ui-theme-dark .sbdocs td,
+.ui-theme-dark .sbdocs th {
+  @apply text-neutral-200;
+}
+
+.ui-theme-dark .sbdocs td {
+  @apply !bg-neutral-1100 text-neutral-200;
+}

.storybook/preview.tsx

@@ -52,8 +52,8 @@ const preview = {
         brandImage: brandImage,
       },
       stylePreview: true,
-      darkClass: ["bg-neutral-1300"],
-      lightClass: ["bg-neutral-000"],
+      darkClass: ["ui-theme-dark"],
+      lightClass: ["ui-theme-light"],
     },
   },
   loaders: [mswLoader],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "14.8.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",
@@ -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",
@@ -59,9 +62,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}",

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
   }

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">

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">

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;

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">

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">