allow colors other than hsl + fix an issue with text in dark mode

jpmorgan-payments · Mar 13, 2024 · 54c48e4 · 54c48e4
1 parent 2f9b294
commit 54c48e4
Show file tree

Hide file tree

Showing 15 changed files with 287 additions and 186 deletions.
diff --git a/embedded-components/src/components/ui/alert-dialog.tsx b/embedded-components/src/components/ui/alert-dialog.tsx
@@ -43,15 +43,24 @@ const AlertDialogContent = React.forwardRef<
 ));
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 
-const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn('eb-flex eb-flex-col eb-space-y-2 eb-text-center sm:eb-text-left', className)}
+    className={cn(
+      'eb-flex eb-flex-col eb-space-y-2 eb-text-center sm:eb-text-left',
+      className
+    )}
     {...props}
   />
 );
 AlertDialogHeader.displayName = 'AlertDialogHeader';
 
-const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
       'eb-flex eb-flex-col-reverse sm:eb-flex-row sm:eb-justify-end sm:eb-space-x-2',
@@ -68,7 +77,7 @@ const AlertDialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Title
     ref={ref}
-    className={cn('eb-text-lg eb-font-semibold', className)}
+    className={cn('eb-text-foreground eb-text-lg eb-font-semibold', className)}
     {...props}
   />
 ));
@@ -84,13 +93,18 @@ const AlertDialogDescription = React.forwardRef<
     {...props}
   />
 ));
-AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName;
 
 const AlertDialogAction = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Action>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
 >(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
 ));
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
 
@@ -100,7 +114,11 @@ const AlertDialogCancel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Cancel
     ref={ref}
-    className={cn(buttonVariants({ variant: 'outline' }), 'eb-mt-2 sm:eb-mt-0', className)}
+    className={cn(
+      buttonVariants({ variant: 'outline' }),
+      'eb-mt-2 sm:eb-mt-0',
+      className
+    )}
     {...props}
   />
 ));

diff --git a/embedded-components/src/components/ui/alert.tsx b/embedded-components/src/components/ui/alert.tsx
@@ -23,27 +23,43 @@ const Alert = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
 >(({ className, variant, ...props }, ref) => (
-  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
 ));
 Alert.displayName = 'Alert';
 
-const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
-  ({ className, ...props }, ref) => (
-    // eslint-disable-next-line jsx-a11y/heading-has-content
-    <h5
-      ref={ref}
-      className={cn('eb-mb-1 eb-font-medium eb-leading-none eb-tracking-tight', className)}
-      {...props}
-    />
-  )
-);
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  // eslint-disable-next-line jsx-a11y/heading-has-content
+  <h5
+    ref={ref}
+    className={cn(
+      'eb-mb-1 eb-font-medium eb-leading-none eb-tracking-tight',
+      className
+    )}
+    {...props}
+  />
+));
 AlertTitle.displayName = 'AlertTitle';
 
 const AlertDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn('eb-text-sm [&_p]:eb-leading-relaxed', className)} {...props} />
+  <div
+    ref={ref}
+    className={cn(
+      'eb-text-foreground eb-text-sm [&_p]:eb-leading-relaxed',
+      className
+    )}
+    {...props}
+  />
 ));
 AlertDescription.displayName = 'AlertDescription';
 

diff --git a/embedded-components/src/components/ui/badge.tsx b/embedded-components/src/components/ui/badge.tsx
@@ -28,7 +28,9 @@ export interface BadgeProps
     VariantProps<typeof badgeVariants> {}
 
 function Badge({ className, variant, ...props }: BadgeProps) {
-  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
 }
 
 export { Badge, badgeVariants };
diff --git a/embedded-components/src/components/ui/button.tsx b/embedded-components/src/components/ui/button.tsx
@@ -9,11 +9,14 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: 'eb-bg-primary eb-text-primary-foreground hover:eb-bg-primary/90',
-        destructive: 'eb-bg-destructive eb-text-destructive-foreground hover:eb-bg-destructive/90',
+        default:
+          'eb-bg-primary eb-text-primary-foreground hover:eb-bg-primary/90',
+        destructive:
+          'eb-bg-destructive eb-text-destructive-foreground hover:eb-bg-destructive/90',
         outline:
-          'eb-border eb-border-input eb-bg-background hover:eb-bg-accent hover:eb-text-accent-foreground',
-        secondary: 'eb-bg-secondary eb-text-secondary-foreground hover:eb-bg-secondary/80',
+          'eb-border eb-border-input eb-bg-background eb-text-foreground hover:eb-bg-accent hover:eb-text-accent-foreground',
+        secondary:
+          'eb-bg-secondary eb-text-secondary-foreground hover:eb-bg-secondary/80',
         ghost: 'hover:eb-bg-accent hover:eb-text-accent-foreground',
         link: 'eb-text-primary eb-underline-offset-4 hover:eb-underline',
       },
@@ -41,7 +44,11 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : 'button';
     return (
-      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
     );
   }
 );

diff --git a/embedded-components/src/components/ui/calendar.tsx b/embedded-components/src/components/ui/calendar.tsx
@@ -7,16 +7,23 @@ import { buttonVariants } from '@/components/ui/button';
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker>;
 
-function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps) {
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
       className={cn('eb-p-3', className)}
       classNames={{
-        months: 'eb-flex eb-flex-col sm:eb-flex-row eb-space-y-4 sm:eb-space-x-4 sm:eb-space-y-0',
+        months:
+          'eb-flex eb-flex-col sm:eb-flex-row eb-space-y-4 sm:eb-space-x-4 sm:eb-space-y-0',
         month: 'eb-space-y-4',
-        caption: 'eb-flex eb-justify-center eb-pt-1 eb-relative eb-items-center',
-        caption_label: 'eb-text-sm eb-font-medium',
+        caption:
+          'eb-flex eb-justify-center eb-pt-1 eb-relative eb-items-center',
+        caption_label: 'eb-text-foreground eb-text-sm eb-font-medium',
         nav: 'eb-space-x-1 eb-flex eb-items-center',
         nav_button: cn(
           buttonVariants({ variant: 'outline' }),
@@ -26,9 +33,10 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
         nav_button_next: 'eb-absolute eb-right-1',
         table: 'eb-w-full eb-border-collapse eb-space-y-1',
         head_row: 'eb-flex',
-        head_cell: 'eb-text-muted-foreground eb-rounded-md eb-w-9 eb-font-normal eb-text-[0.8rem]',
+        head_cell:
+          'eb-text-muted-foreground eb-rounded-md eb-w-9 eb-font-normal eb-text-[0.8rem]',
         row: 'eb-flex eb-w-full eb-mt-2',
-        cell: 'eb-h-9 eb-w-9 eb-text-center eb-text-sm eb-p-0 eb-relative [&:has([aria-selected].day-range-end)]:eb-rounded-r-md [&:has([aria-selected].day-outside)]:eb-bg-accent/50 [&:has([aria-selected])]:eb-bg-accent first:[&:has([aria-selected])]:eb-rounded-l-md last:[&:has([aria-selected])]:eb-rounded-r-md focus-within:eb-relative focus-within:eb-z-20',
+        cell: 'eb-text-foreground eb-h-9 eb-w-9 eb-text-center eb-text-sm eb-p-0 eb-relative [&:has([aria-selected].day-range-end)]:eb-rounded-r-md [&:has([aria-selected].day-outside)]:eb-bg-accent/50 [&:has([aria-selected])]:eb-bg-accent first:[&:has([aria-selected])]:eb-rounded-l-md last:[&:has([aria-selected])]:eb-rounded-r-md focus-within:eb-relative focus-within:eb-z-20',
         day: cn(
           buttonVariants({ variant: 'ghost' }),
           'eb-h-9 eb-w-9 eb-p-0 eb-font-normal aria-selected:eb-opacity-100'
@@ -40,13 +48,18 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
         day_outside:
           'eb-day-outside eb-text-muted-foreground eb-opacity-50 aria-selected:eb-bg-accent/50 aria-selected:eb-text-muted-foreground aria-selected:eb-opacity-30',
         day_disabled: 'eb-text-muted-foreground eb-opacity-50',
-        day_range_middle: 'aria-selected:eb-bg-accent aria-selected:eb-text-accent-foreground',
+        day_range_middle:
+          'aria-selected:eb-bg-accent aria-selected:eb-text-accent-foreground',
         day_hidden: 'eb-invisible',
         ...classNames,
       }}
       components={{
-        IconLeft: ({ ...iconProps }) => <ChevronLeft className="eb-h-4 eb-w-4" {...iconProps} />,
-        IconRight: ({ ...iconProps }) => <ChevronRight className="eb-h-4 eb-w-4" {...iconProps} />,
+        IconLeft: ({ ...iconProps }) => (
+          <ChevronLeft className="eb-h-4 eb-w-4" {...iconProps} />
+        ),
+        IconRight: ({ ...iconProps }) => (
+          <ChevronRight className="eb-h-4 eb-w-4" {...iconProps} />
+        ),
       }}
       {...props}
     />

diff --git a/embedded-components/src/components/ui/card.tsx b/embedded-components/src/components/ui/card.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from 'react';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
 const Card = React.forwardRef<
   HTMLDivElement,
@@ -9,25 +9,25 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "eb-rounded-lg eb-border eb-bg-card eb-text-card-foreground eb-shadow-sm",
+      'eb-rounded-lg eb-border eb-bg-card eb-text-card-foreground eb-shadow-sm',
       className
     )}
     {...props}
   />
-))
-Card.displayName = "Card"
+));
+Card.displayName = 'Card';
 
 const CardHeader = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("eb-flex eb-flex-col eb-space-y-1.5 eb-p-6", className)}
+    className={cn('eb-flex eb-flex-col eb-space-y-1.5 eb-p-6', className)}
     {...props}
   />
-))
-CardHeader.displayName = "CardHeader"
+));
+CardHeader.displayName = 'CardHeader';
 
 const CardTitle = React.forwardRef<
   HTMLParagraphElement,
@@ -36,44 +36,51 @@ const CardTitle = React.forwardRef<
   <h3
     ref={ref}
     className={cn(
-      "eb-text-2xl eb-font-semibold eb-leading-none eb-tracking-tight",
+      'eb-text-foreground eb-text-2xl eb-font-semibold eb-leading-none eb-tracking-tight',
       className
     )}
     {...props}
   />
-))
-CardTitle.displayName = "CardTitle"
+));
+CardTitle.displayName = 'CardTitle';
 
 const CardDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
   <p
     ref={ref}
-    className={cn("eb-text-sm eb-text-muted-foreground", className)}
+    className={cn('eb-text-sm eb-text-muted-foreground', className)}
     {...props}
   />
-))
-CardDescription.displayName = "CardDescription"
+));
+CardDescription.displayName = 'CardDescription';
 
 const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("eb-p-6 eb-pt-0", className)} {...props} />
-))
-CardContent.displayName = "CardContent"
+  <div ref={ref} className={cn('eb-p-6 eb-pt-0', className)} {...props} />
+));
+CardContent.displayName = 'CardContent';
 
 const CardFooter = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("eb-flex eb-items-center eb-p-6 eb-pt-0", className)}
+    className={cn('eb-flex eb-items-center eb-p-6 eb-pt-0', className)}
     {...props}
   />
-))
-CardFooter.displayName = "CardFooter"
+));
+CardFooter.displayName = 'CardFooter';
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};
diff --git a/embedded-components/src/components/ui/dialog.tsx b/embedded-components/src/components/ui/dialog.tsx
@@ -42,7 +42,7 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="eb-absolute eb-right-4 eb-top-4 eb-rounded-sm eb-opacity-70 eb-ring-offset-background eb-transition-opacity hover:eb-opacity-100 focus:eb-outline-none focus:eb-ring-2 focus:eb-ring-ring focus:eb-ring-offset-2 disabled:eb-pointer-events-none data-[state=open]:eb-bg-accent data-[state=open]:eb-text-muted-foreground">
+      <DialogPrimitive.Close className="eb-absolute eb-right-4 eb-top-4 eb-rounded-sm eb-opacity-70 eb-ring-offset-background eb-transition-opacity hover:eb-opacity-100 focus:eb-outline-none focus:eb-ring-2 focus:eb-ring-ring focus:eb-ring-offset-2 disabled:eb-pointer-events-none eb-text-foreground data-[state=open]:eb-bg-accent data-[state=open]:eb-text-muted-foreground">
         <X className="eb-h-4 eb-w-4" />
         <span className="eb-sr-only">Close</span>
       </DialogPrimitive.Close>
@@ -57,7 +57,7 @@ const DialogHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      'eb-flex eb-flex-col eb-space-y-1.5 eb-text-center sm:eb-text-left',
+      'eb-flex eb-flex-col eb-space-y-1.5 eb-text-foreground eb-text-center sm:eb-text-left',
       className
     )}
     {...props}
@@ -86,7 +86,7 @@ const DialogTitle = React.forwardRef<
   <DialogPrimitive.Title
     ref={ref}
     className={cn(
-      'eb-text-lg eb-font-semibold eb-leading-none eb-tracking-tight',
+      'eb-text-foreground eb-text-lg eb-font-semibold eb-leading-none eb-tracking-tight',
       className
     )}
     {...props}

diff --git a/embedded-components/src/components/ui/input.tsx b/embedded-components/src/components/ui/input.tsx
@@ -2,15 +2,16 @@ import * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, type, ...props }, ref) => {
     return (
       <input
         type={type}
         className={cn(
-          'eb-flex eb-h-10 eb-w-full eb-rounded-md eb-border eb-border-input eb-bg-background eb-px-3 eb-py-2 eb-text-sm eb-ring-offset-background file:eb-border-0 file:eb-bg-transparent file:eb-text-sm file:eb-font-medium placeholder:eb-text-muted-foreground focus-visible:eb-outline-none focus-visible:eb-ring-2 focus-visible:eb-ring-ring focus-visible:eb-ring-offset-2 disabled:eb-cursor-not-allowed disabled:eb-opacity-50',
+          'eb-flex eb-h-10 eb-w-full eb-rounded-md eb-border eb-border-input eb-bg-background eb-px-3 eb-py-2 eb-text-foreground eb-text-sm eb-ring-offset-background file:eb-border-0 file:eb-bg-transparent file:eb-text-sm file:eb-font-medium placeholder:eb-text-muted-foreground focus-visible:eb-outline-none focus-visible:eb-ring-2 focus-visible:eb-ring-ring focus-visible:eb-ring-offset-2 disabled:eb-cursor-not-allowed disabled:eb-opacity-50',
           className
         )}
         ref={ref}