feat: use Tailwind theming prefixes over custom approach

ably · Nov 19, 2024 · 2ebf07d · 2ebf07d
1 parent 76c079b
commit 2ebf07d
Show file tree

Hide file tree

Showing 15 changed files with 190 additions and 283 deletions.
diff --git a/scripts/compute-colors.ts b/scripts/compute-colors.ts
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/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;
 };
 
@@ -19,23 +21,62 @@ const Icon = ({
   secondaryColor = defaultIconSecondaryColor(name),
   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) => (
+      <svg
+        className={clsx(
+          { [`${color}`]: color },
+          { [`${additionalCSS}`]: additionalCSS },
+          {
+            "hidden dark:block":
+              secondaryColor && secondaryColor === darkSecondaryColor,
+          },
+          {
+            "dark:hidden":
+              secondaryColor && secondaryColor === lightSecondaryColor,
+          },
+        )}
+        style={
+          {
+            width: size,
+            height: size,
+            ...(secondaryColor && {
+              "--ui-icon-secondary-color":
+                convertTailwindClassToVar(lightSecondaryColor),
+            }),
+          } as CSSProperties
+        }
+        {...additionalAttributes}
+      >
+        <use xlinkHref={`#sprite-${name}`} />
+      </svg>
+    ),
+    [
+      name,
+      size,
+      color,
+      additionalCSS,
+      additionalAttributes,
+      lightSecondaryColor,
+      darkSecondaryColor,
+    ],
+  );
+
+  if (darkSecondaryColor) {
+    return (
+      <>
+        {iconSvg(lightSecondaryColor)}
+        {iconSvg(darkSecondaryColor)}
+      </>
+    );
+  } else {
+    return iconSvg();
+  }
+};
 
 export default Icon;
diff --git 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/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 = {