ZkSync Ignite: Homepage

src/components/primitives/Text.tsx

@@ -2,52 +2,43 @@ import { tv } from "tailwind-variants";
 import { mergeClass } from "../../utils/css";
 import type { Component, Styled } from "../../utils/types";
 
-export const textStyles = tv({
-  base: "font-text text-[clamp(15px,0.4167vw+0.78125rem,20px)]",
-  variants: {
-    look: {
-      base: "text-main-11",
-      soft: "text-main-11",
-      bold: "text-main-12",
-      tint: "text-accent-12",
-      hype: "text-accent-11",
+export const textStyles = tv(
+  {
+    base: "font-text text-[clamp(15px,0.4167vw+0.78125rem,20px)]",
+    variants: {
+      look: {
+        base: "text-main-11",
+        soft: "text-main-11",
+        bold: "text-main-12",
+        tint: "text-accent-12",
+        hype: "text-accent-11",
+      },
+      size: {
+        xs: "text-xs",
+        sm: "text-sm",
+        md: "text-base",
+        lg: "text-lg",
+        xl: "text-xl",
+        display1: "font-title font-bold leading-tight italic uppercase !text-[clamp(44px,5vw+0.875rem,104px)]",
+        1: "font-title font-bold italic leading-none !text-[clamp(44px,4.333vw+1.125rem,96px)]",
+        2: "font-title font-bold leading-none italic !text-[clamp(38px,0.667vw+2.125rem,46px)]",
+        3: "font-title font-bold leading-none italic !text-[clamp(26px,0.667vw+1.375rem,34px)]",
+        4: "font-title font-bold leading-[1.18] !text-[clamp(18px,0.667vw+0.875rem,26px)]",
+        5: "font-title font-bold leading-normal !text-[clamp(15px,0.25vw+0.84375rem,18px)] uppercase tracking-[1.6px] ",
+        6: "font-title !text-sm",
+      },
+      interactable: {
+        true: "cursor-pointer select-none",
+        false: "",
+      },
     },
-    size: {
-      xs: "text-xs",
-      sm: "text-sm",
-      md: "text-base",
-      lg: "text-lg",
-      xl: "text-xl",
-      display1: "font-title font-bold leading-tight italic uppercase !text-[clamp(44px,5vw+0.875rem,104px)]",
-      1: "font-title !text-3xl",
-      2: "font-title font-bold leading-none italic !text-[clamp(38px,0.667vw+2.125rem,46px)]",
-      3: "font-title font-bold leading-none italic !text-[clamp(26px,0.667vw+1.375rem,34px)]",
-      4: "font-title font-bold leading-[1.18] !text-[clamp(18px,0.667vw+0.875rem,26px)]",
-      5: "font-title font-bold leading-none !text-[clamp(15px,0.25vw+0.84375rem,18px)] uppercase tracking-[0.8px] ",
-      6: "font-title !text-sm",
-    },
-    interactable: {
-      true: "cursor-pointer select-none",
-      false: "",
-    },
-  },
-  defaultVariants: {
-    size: "md",
-    look: "base",
-    interactable: false,
-  },
-  compoundVariants: [
-    { look: "soft", interactable: true, class: "hover:text-main-12" },
-    {
+    defaultVariants: {
       look: "base",
-      interactable: true,
-      class: "hover:text-main-12 active:text-main-11",
+      size: "md",
     },
-    { look: "bold", interactable: true, class: "hover:text-main-12" },
-    { look: "tint", interactable: true, class: "hover:text-main-12" },
-    { look: "hype", interactable: true, class: "hover:text-main-12" },
-  ],
-});
+  },
+  { twMerge: false },
+);
 
 export type TextProps = Component<Styled<typeof textStyles> & { bold?: boolean }, HTMLParagraphElement>;
 

src/components/primitives/Title.tsx

@@ -1,6 +1,6 @@
-import clsx from "clsx";
 import { forwardRef } from "react";
 import { tv } from "tailwind-variants";
+import { mergeClass } from "../../utils/css";
 import type { Component, Styled } from "../../utils/types";
 import { textStyles } from "./Text";
 
@@ -40,15 +40,15 @@ const Title = forwardRef<HTMLHeadingElement, TitleProps>(function Title(
 
   switch (h) {
     case 1:
-      return <h1 ref={ref} className={clsx(titleStyles({ look, size }), className)} children={" "} {...props} />;
+      return <h1 ref={ref} className={mergeClass(titleStyles({ look, size }), className)} children={" "} {...props} />;
     case 2:
-      return <h2 ref={ref} className={clsx(titleStyles({ look, size }), className)} children={" "} {...props} />;
+      return <h2 ref={ref} className={mergeClass(titleStyles({ look, size }), className)} children={" "} {...props} />;
     case 3:
-      return <h3 ref={ref} className={clsx(titleStyles({ look, size }), className)} children={" "} {...props} />;
+      return <h3 ref={ref} className={mergeClass(titleStyles({ look, size }), className)} children={" "} {...props} />;
     case 4:
-      return <h4 ref={ref} className={clsx(titleStyles({ look, size }), className)} children={" "} {...props} />;
+      return <h4 ref={ref} className={mergeClass(titleStyles({ look, size }), className)} children={" "} {...props} />;
     case 5:
-      return <h5 ref={ref} className={clsx(titleStyles({ look, size }), className)} children={" "} {...props} />;
+      return <h5 ref={ref} className={mergeClass(titleStyles({ look, size }), className)} children={" "} {...props} />;
     default:
       break;
   }

src/theming/coloring.ts

@@ -53,11 +53,22 @@ export function extractColorScale(theme: Coloring) {
     }),
   );
 
-  const extract = ({ accentScale: accent, grayScale: main, background }: typeof darkOutput | typeof lightOutput) => ({
-    accent,
-    main,
-    background,
-  });
+  const extract = ({ accentScale: accent, grayScale: main, background }: typeof darkOutput | typeof lightOutput) => {
+    // Convert background color to RGB components
+    const getRGB = (color: string) => {
+      const hex = color.replace("#", "");
+      const r = Number.parseInt(hex.substring(0, 2), 16);
+      const g = Number.parseInt(hex.substring(2, 4), 16);
+      const b = Number.parseInt(hex.substring(4, 6), 16);
+      return `${r} ${g} ${b}`;
+    };
+
+    return {
+      accent,
+      main,
+      background: getRGB(background),
+    };
+  };
 
   return [extract(darkOutput), extract(lightOutput)] satisfies [ReturnType<typeof extract>, ReturnType<typeof extract>];
 }

src/theming/tailwind.ts

@@ -9,7 +9,7 @@ export function generateVariableAssigners(): TailwindConfig["theme"] {
   return {
     colors: {
       main: { 0: "transparent", ...generateColorScale("main") },
-      background: "var(--background)",
+      background: "rgb(var(--background) / <alpha-value>)",
       accent: { 0: "transparent", ...generateColorScale("accent") },
     },
     borderRadius: generateRadiusScale("radius"),