remove shared variants

yext · Nov 20, 2024 · 887617c · 887617c
1 parent d626467
commit 887617c
Show file tree

Hide file tree

Showing 5 changed files with 146 additions and 94 deletions.
diff --git a/src/components/puck/Emails.tsx b/src/components/puck/Emails.tsx
@@ -11,17 +11,46 @@ import {
   YextEntityFieldSelector,
   getFontWeightOverrideOptions,
 } from "../../index.js";
-import {
-  colorVariants,
-  fontSizeVariants,
-  fontWeightVariants,
-} from "./variants.js";
 
 const emailsVariants = cva("list-inside font-body-fontFamily", {
   variants: {
-    fontSize: fontSizeVariants,
-    fontWeight: fontWeightVariants,
-    color: colorVariants,
+    fontSize: {
+      default: "text-body-fontSize",
+      xs: "text-xs",
+      sm: "text-sm",
+      medium: "text-base",
+      lg: "text-lg",
+      xl: "text-xl",
+      "2xl": "text-2xl",
+      "3xl": "text-3xl",
+      "4xl": "text-4xl",
+      "5xl": "text-5xl",
+      "6xl": "text-6xl",
+      "7xl": "text-7xl",
+      "8xl": "text-8xl",
+      "9xl": "text-9xl",
+    },
+    fontWeight: {
+      default: "font-body-fontWeight",
+      thin: "font-thin",
+      extralight: "font-extralight",
+      light: "font-light",
+      normal: "font-normal",
+      medium: "font-medium",
+      semibold: "font-semibold",
+      bold: "font-bold",
+      extrabold: "font-extrabold",
+      black: "font-black",
+    },
+    color: {
+      default: "text-body-color",
+      primary: "text-palette-primary",
+      secondary: "text-palette-secondary",
+      accent: "text-palette-accent",
+      text: "text-palette-text",
+      background: "text-palette-background",
+      foreground: "text-palette-foreground",
+    },
   },
   defaultVariants: {
     fontSize: "default",

diff --git a/src/components/puck/atoms/body.tsx b/src/components/puck/atoms/body.tsx
@@ -1,31 +1,60 @@
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { clsx } from "clsx";
-import {
-  fontSizeVariants,
-  fontWeightVariants,
-  colorVariants,
-  transformVariants,
-} from "../variants.ts";
 
 // Define the variants for the body component
-const bodyVariants = cva(
-  "components font-body-fontFamily text-body-fontSize text-body-color",
-  {
-    variants: {
-      fontSize: fontSizeVariants,
-      fontWeight: fontWeightVariants,
-      color: colorVariants,
-      textTransform: transformVariants,
+const bodyVariants = cva("components font-body-fontFamily", {
+  variants: {
+    fontSize: {
+      default: "text-body-fontSize",
+      xs: "text-xs",
+      sm: "text-sm",
+      base: "text-base",
+      lg: "text-lg",
+      xl: "text-xl",
+      "2xl": "text-2xl",
+      "3xl": "text-3xl",
+      "4xl": "text-4xl",
+      "5xl": "text-5xl",
+      "6xl": "text-6xl",
+      "7xl": "text-7xl",
+      "8xl": "text-8xl",
+      "9xl": "text-9xl",
     },
-    defaultVariants: {
-      fontSize: "default",
-      fontWeight: "default",
-      color: "default",
-      textTransform: "none",
+    fontWeight: {
+      default: "font-body-fontWeight",
+      "100": "font-thin",
+      "200": "font-extralight",
+      "300": "font-light",
+      "400": "font-normal",
+      "500": "font-medium",
+      "600": "font-semibold",
+      "700": "font-bold",
+      "800": "font-extrabold",
+      "900": "font-black",
     },
-  }
-);
+    color: {
+      default: "text-body-color",
+      primary: "text-palette-primary",
+      secondary: "text-palette-secondary",
+      accent: "text-palette-accent",
+      text: "text-palette-text",
+      background: "text-palette-background",
+    },
+    textTransform: {
+      none: "",
+      uppercase: "uppercase",
+      lowercase: "lowercase",
+      capitalize: "capitalize",
+    },
+  },
+  defaultVariants: {
+    fontSize: "default",
+    fontWeight: "default",
+    color: "default",
+    textTransform: "none",
+  },
+});
 
 // Omit 'color' from HTMLAttributes<HTMLParagraphElement> to avoid conflict
 export interface BodyProps

diff --git a/src/components/puck/atoms/button.tsx b/src/components/puck/atoms/button.tsx
@@ -2,10 +2,9 @@ import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
 import { clsx } from "clsx";
-import { fontSizeVariants } from "../variants.ts";
 
 const buttonVariants = cva(
-  "py-4 components inline-flex items-center justify-center whitespace-nowrap rounded-button-borderRadius text-button-fontSize font-body-fontFamily font-button-fontWeight ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ",
+  "py-4 components inline-flex items-center justify-center whitespace-nowrap rounded-button-borderRadius font-body-fontFamily font-button-fontWeight ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ",
   {
     variants: {
       variant: {
@@ -19,7 +18,22 @@ const buttonVariants = cva(
         large: "h-11 px-8",
         icon: "h-10 w-10",
       },
-      fontSize: fontSizeVariants,
+      fontSize: {
+        default: "text-button-fontSize",
+        xs: "text-xs",
+        sm: "text-sm",
+        base: "text-base",
+        lg: "text-lg",
+        xl: "text-xl",
+        "2xl": "text-2xl",
+        "3xl": "text-3xl",
+        "4xl": "text-4xl",
+        "5xl": "text-5xl",
+        "6xl": "text-6xl",
+        "7xl": "text-7xl",
+        "8xl": "text-8xl",
+        "9xl": "text-9xl",
+      },
       borderRadius: {
         default: "",
         none: "rounded-none",

diff --git a/src/components/puck/atoms/heading.tsx b/src/components/puck/atoms/heading.tsx
@@ -1,19 +1,51 @@
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
-import {
-  fontSizeVariants,
-  fontWeightVariants,
-  colorVariants,
-  transformVariants,
-} from "../variants.ts";
 
 // Define the variants for the heading component
 const headingVariants = cva("components", {
   variants: {
-    fontSize: fontSizeVariants,
-    weight: fontWeightVariants,
-    color: colorVariants,
-    transform: transformVariants,
+    fontSize: {
+      default: "",
+      xs: "!text-xs",
+      sm: "!text-sm",
+      base: "!text-base",
+      lg: "!text-lg",
+      xl: "!text-xl",
+      "2xl": "!text-2xl",
+      "3xl": "!text-3xl",
+      "4xl": "!text-4xl",
+      "5xl": "!text-5xl",
+      "6xl": "!text-6xl",
+      "7xl": "!text-7xl",
+      "8xl": "!text-8xl",
+      "9xl": "!text-9xl",
+    },
+    weight: {
+      default: "",
+      "100": "!font-thin",
+      "200": "!font-extralight",
+      "300": "!font-light",
+      "400": "!font-normal",
+      "500": "!font-medium",
+      "600": "!font-semibold",
+      "700": "!font-bold",
+      "800": "!font-extrabold",
+      "900": "!font-black",
+    },
+    color: {
+      default: "",
+      primary: "!text-palette-primary",
+      secondary: "!text-palette-secondary",
+      accent: "!text-palette-accent",
+      text: "!text-palette-text",
+      background: "!text-palette-background",
+    },
+    transform: {
+      none: "",
+      uppercase: "uppercase",
+      lowercase: "lowercase",
+      capitalize: "capitalize",
+    },
     level: {
       1: "font-heading1-fontWeight text-heading1-fontSize text-heading1-color font-heading1-fontFamily",
       2: "font-heading2-fontWeight text-heading2-fontSize text-heading2-color font-heading2-fontFamily",

diff --git a/src/components/puck/variants.ts b/src/components/puck/variants.ts