feat: use Tailwind theming prefixes over custom approach

ably · Nov 19, 2024 · 2e652d5 · 2e652d5
1 parent ad48ebb
commit 2e652d5
Show file tree

Hide file tree

Showing 30 changed files with 1,432 additions and 1,768 deletions.
diff --git 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
@@ -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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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">