add bg-opacity to background + h1 size

AngleProtocol · Dec 17, 2024 · ab182d6 · ab182d6
1 parent 826ff4b
commit ab182d6
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 43 deletions.
diff --git a/src/components/primitives/Button.tsx b/src/components/primitives/Button.tsx
@@ -29,7 +29,7 @@ export const buttonStyles = tv(
       size: "md",
     },
   },
-  { twMerge: false },
+  { twMerge: false }
 );
 
 type ButtonStyleProps = VariantProps<typeof buttonStyles>;
@@ -70,7 +70,13 @@ export default function Button({
         target="_blank"
         rel="noopener noreferrer"
         onClick={() => window.open(to, "_blank", "noopener noreferrer")}
-        className={mergeClass(styleProps, styleBold, className, disabled && "disabled")}>
+        className={mergeClass(
+          styleProps,
+          styleBold,
+          className,
+          disabled && "disabled"
+        )}
+      >
         {children}
       </a>
     );
@@ -81,11 +87,17 @@ export default function Button({
         <Link
           prefetch="intent"
           to={to}
-          className={mergeClass(styleProps, styleBold, className, disabled && "disabled")}
+          className={mergeClass(
+            styleProps,
+            styleBold,
+            className,
+            disabled && "disabled"
+          )}
           {...(external && {
             target: "_blank",
             rel: "noopener noreferrer",
-          })}>
+          })}
+        >
           {children}
         </Link>
       </EventBlocker>
@@ -95,10 +107,16 @@ export default function Button({
   return (
     <button
       style={themeVars}
-      className={mergeClass(styleProps, styleBold, className, disabled && "disabled")}
+      className={mergeClass(
+        styleProps,
+        styleBold,
+        className,
+        disabled && "disabled"
+      )}
       type="button"
       disabled={disabled}
-      {...props}>
+      {...props}
+    >
       {children}
     </button>
   );

diff --git a/src/components/primitives/Text.tsx b/src/components/primitives/Text.tsx
@@ -2,23 +2,45 @@ 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)]",
+      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)]",
@@ -31,27 +53,32 @@ export const textStyles = tv({
       false: "",
     },
   },
-  defaultVariants: {
-    size: "md",
-    look: "base",
-    interactable: false,
-  },
-  compoundVariants: [
-    { look: "soft", interactable: true, class: "hover:text-main-12" },
-    {
-      look: "base",
-      interactable: true,
-      class: "hover:text-main-12 active:text-main-11",
-    },
-    { 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>;
+export type TextProps = Component<
+  Styled<typeof textStyles> & { bold?: boolean },
+  HTMLParagraphElement
+>;
 
-export default function Text({ look, size, style, bold, interactable, className, ...props }: TextProps) {
+export default function Text({
+  look,
+  size,
+  style,
+  bold,
+  interactable,
+  className,
+  ...props
+}: TextProps) {
   const styleBold = bold ? "font-bold" : "";
-  return <p className={mergeClass(textStyles({ look, size, interactable }), styleBold, className)} {...props} />;
+  return (
+    <p
+      className={mergeClass(
+        textStyles({ look, size, interactable }),
+        styleBold,
+        className
+      )}
+      {...props}
+    />
+  );
 }
diff --git a/src/components/primitives/Title.tsx b/src/components/primitives/Title.tsx
@@ -3,6 +3,7 @@ import { forwardRef } from "react";
 import { tv } from "tailwind-variants";
 import type { Component, Styled } from "../../utils/types";
 import { textStyles } from "./Text";
+import { mergeClass } from "../../utils/css";
 
 export const titleStyles = tv(
   {
@@ -21,7 +22,7 @@ export const titleStyles = tv(
       look: "base",
     },
   },
-  { twMerge: false },
+  { twMerge: false }
 );
 
 export type TitleProps = Component<

diff --git a/src/theming/coloring.ts b/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 = parseInt(hex.substring(0, 2), 16);
+      const g = parseInt(hex.substring(2, 4), 16);
+      const b = 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>];
 }

diff --git a/src/theming/tailwind.ts b/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"),