torch-glare 1.5.1 → 2.0.0

package/apps/lib/components/Breadcrumb.tsx

@@ -255,7 +255,7 @@ const breadcrumbEllipsisStyles = cva(
         PresentationStyle: [
           "text-content-presentation-global-secondary",
           "hover:bg-background-presentation-action-hover",
-          "hover:text-content-presentation-action-hover",
+          "hover:text-content-presentation-global-primary-inverse",
         ],
         SystemStyle: [
           "text-content-system-global-secondary",

package/apps/lib/components/ButtonGroup.tsx

@@ -120,18 +120,18 @@ const buttonGroupItemStyles = cva(
           "text-content-presentation-action-light-primary",
           "border-border-presentation-action-disabled",
           "hover:bg-background-presentation-action-hover",
-          "hover:text-content-presentation-action-hover",
+          "hover:text-content-presentation-global-primary-inverse",
           "data-[state=on]:bg-background-presentation-action-hover",
-          "data-[state=on]:text-content-presentation-action-hover",
+          "data-[state=on]:text-content-presentation-global-primary-inverse",
         ],
         BorderStyle: [
           "bg-transparent",
           "text-content-presentation-action-light-primary",
           "border-border-presentation-action-disabled",
           "hover:bg-background-presentation-action-hover",
-          "hover:text-content-presentation-action-hover",
+          "hover:text-content-presentation-global-primary-inverse",
           "data-[state=on]:bg-background-presentation-action-hover",
-          "data-[state=on]:text-content-presentation-action-hover",
+          "data-[state=on]:text-content-presentation-global-primary-inverse",
         ],
         SystemStyle: [
           "bg-transparent",

package/apps/lib/components/DropdownMenu.tsx

@@ -292,9 +292,9 @@ export const MenuItemStyles = cva(
           "text-content-presentation-action-light-primary",
           "bg-background-presentation-action-dropdown-primary",
           "hover:bg-background-presentation-action-hover",
-          "hover:text-content-presentation-action-hover",
+          "hover:text-content-presentation-global-primary-inverse",
           "focus:bg-background-presentation-action-hover",
-          "focus:text-content-presentation-action-hover",
+          "focus:text-content-presentation-global-primary-inverse",
           "disabled:text-content-presentation-state-disabled",
           "disabled:bg-white-00",
         ],
@@ -302,15 +302,15 @@ export const MenuItemStyles = cva(
           "text-content-presentation-state-information",
           "hover:bg-background-presentation-state-information-primary",
           "focus:bg-background-presentation-state-information-primary",
-          "focus:text-content-presentation-action-hover",
-          "hover:text-content-presentation-action-hover",
+          "focus:text-content-presentation-global-primary-inverse",
+          "hover:text-content-presentation-global-primary-inverse",
         ],
         Negative: [
           "text-content-presentation-state-negative",
           "hover:bg-background-presentation-state-negative-primary",
-          "hover:text-content-presentation-action-hover",
+          "hover:text-content-presentation-global-primary-inverse",
           "focus:bg-background-presentation-state-negative-primary",
-          "focus:text-content-presentation-action-hover",
+          "focus:text-content-presentation-global-primary-inverse",
           "active:text-content-presentation-state-negative",
         ],
         SystemStyle: [

package/apps/lib/components/FormStepper.tsx

@@ -0,0 +1,302 @@
+"use client";
+
+import React, {
+  forwardRef,
+  HTMLAttributes,
+  ReactNode,
+  createContext,
+  useContext,
+} from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../utils/cn";
+import { Themes } from "../utils/types";
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+type FormStepperType = "default" | "success" | "negative";
+
+// ─── Context ─────────────────────────────────────────────────────────────────
+
+interface FormStepperContextValue {
+  activeStep: number;
+}
+
+const FormStepperContext = createContext<FormStepperContextValue>({
+  activeStep: 0,
+});
+
+const useFormStepperContext = () => useContext(FormStepperContext);
+
+// ─── FormStepper Root ────────────────────────────────────────────────────────
+
+interface FormStepperProps extends HTMLAttributes<HTMLDivElement> {
+  theme?: Themes;
+  activeStep?: number;
+}
+
+const FormStepper = forwardRef<HTMLDivElement, FormStepperProps>(
+  ({ className, theme, activeStep = 0, ...props }, ref) => (
+    <FormStepperContext.Provider value={{ activeStep }}>
+      <div
+        ref={ref}
+        data-theme={theme}
+        className={cn("flex items-center gap-3", className)}
+        {...props}
+      />
+    </FormStepperContext.Provider>
+  ),
+);
+FormStepper.displayName = "FormStepper";
+
+// ─── FormStep (the pill wrapper) ─────────────────────────────────────────────
+
+const formStepStyles = cva(
+  [
+    "group/form-step inline-flex items-center shrink-0",
+    "h-[28px] rounded-full p-[2px]",
+    "transition-all duration-200 ease-in-out",
+    "cursor-pointer select-none outline-none",
+  ],
+  {
+    variants: {
+      // Selection drives the pill background. Hover drives a white bg + soft
+      // shadow for non-selected pills, and a stronger shadow for selected pills.
+      selected: {
+        true: [
+          "bg-[#000000]",
+          "shadow-[0_0_32px_2px_rgba(0,0,0,0.05)]",
+          "hover:shadow-[0_0_32px_2px_rgba(0,0,0,0.2)]",
+        ],
+        false: [
+          "bg-transparent",
+          "hover:bg-[#FFFFFF]",
+          "hover:shadow-[0_0_32px_2px_rgba(0,0,0,0.05)]",
+        ],
+      },
+    },
+    defaultVariants: {
+      selected: false,
+    },
+  },
+);
+
+interface FormStepProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "type"> {
+  index?: number;
+  type?: FormStepperType;
+  selected?: boolean;
+}
+
+const FormStep = forwardRef<HTMLDivElement, FormStepProps>(
+  (
+    { className, index = 0, type = "default", selected, children, ...props },
+    ref,
+  ) => {
+    const { activeStep } = useFormStepperContext();
+    const isSelected = selected ?? index === activeStep;
+
+    return (
+      <div
+        ref={ref}
+        data-selected={isSelected || undefined}
+        data-type={type}
+        className={cn(formStepStyles({ selected: isSelected }), className)}
+        {...props}
+      >
+        {React.Children.map(children, (child) => {
+          if (!React.isValidElement(child)) return child;
+          return React.cloneElement(child as React.ReactElement<any>, {
+            _selected: isSelected,
+            _type: type,
+            _index: index,
+          });
+        })}
+      </div>
+    );
+  },
+);
+FormStep.displayName = "FormStep";
+
+// ─── FormStepIndicator (circle badge) ───────────────────────────────────────
+
+const formStepIndicatorStyles = cva(
+  [
+    "relative inline-flex items-center justify-center shrink-0",
+    "w-[24px] h-[24px] text-[14px]",
+    "rounded-full",
+    "transition-colors duration-200 ease-in-out",
+    "typography-body-medium-medium",
+  ],
+  {
+    variants: {
+      type: {
+        default: ["border-[3px]"],
+        success: ["bg-[#047854] text-[#FFFFFF]", "border border-transparent"],
+        negative: ["bg-[#E30C30] text-[#FFFFFF]", "border border-transparent"],
+      },
+      // Only meaningful for type=default. Selected = filled blue, otherwise
+      // ring color comes from the resting/hover compound variants below.
+      selected: {
+        true: "",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      type: "default",
+      selected: false,
+    },
+    compoundVariants: [
+      // Default type, not selected: gray ring + gray number at rest;
+      // hover (driven by parent .group/form-step) flips ring blue, number black.
+      {
+        type: "default",
+        selected: false,
+        className: [
+          "bg-transparent border-[#A0A0A0] text-[#626467]",
+          "group-hover/form-step:border-[#004699]",
+          "group-hover/form-step:text-[#000000]",
+        ],
+      },
+      // Default type, selected: solid blue fill, white number, no ring color.
+      {
+        type: "default",
+        selected: true,
+        className: ["bg-[#005ECC] border-transparent text-[#FFFFFF]"],
+      },
+    ],
+  },
+);
+
+const formStepIndicatorBadgeStyles = cva(
+  [
+    "absolute -top-[7px]",
+    "w-[15px] h-[15px]",
+    "rounded-full",
+    "inline-flex items-center justify-center",
+    "border border-[#F0F0F0]",
+    "[&_i]:leading-none [&_i]:flex [&_i]:text-[11px]",
+    // LTR: badge top-right; RTL: badge top-left
+    "ltr:right-[-4px] rtl:left-[-4px]",
+  ],
+  {
+    variants: {
+      type: {
+        success: "bg-[#047854] text-[#FFFFFF]",
+        negative: "bg-[#E30C30] text-[#FFFFFF]",
+      },
+    },
+  },
+);
+
+interface FormStepIndicatorProps extends HTMLAttributes<HTMLDivElement> {
+  badgeIcon?: ReactNode;
+  _selected?: boolean;
+  _type?: FormStepperType;
+  _index?: number;
+}
+
+const FormStepIndicator = forwardRef<HTMLDivElement, FormStepIndicatorProps>(
+  (
+    {
+      className,
+      badgeIcon,
+      _selected,
+      _type = "default",
+      _index = 0,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const showBadge = _type === "success" || _type === "negative";
+    const defaultBadgeIcon =
+      _type === "success" ? (
+        <i className="ri-check-line" />
+      ) : (
+        <i className="ri-information-fill" />
+      );
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          formStepIndicatorStyles({ type: _type, selected: !!_selected }),
+          className,
+        )}
+        {...props}
+      >
+        {children ?? _index + 1}
+        {showBadge && (
+          <span
+            className={cn(
+              formStepIndicatorBadgeStyles({
+                type: _type as "success" | "negative",
+              }),
+            )}
+            aria-hidden
+          >
+            {badgeIcon ?? defaultBadgeIcon}
+          </span>
+        )}
+      </div>
+    );
+  },
+);
+FormStepIndicator.displayName = "FormStepIndicator";
+
+// ─── FormStepLabel ──────────────────────────────────────────────────────────
+
+const formStepLabelStyles = cva(
+  [
+    "typography-body-small-medium whitespace-nowrap",
+    "transition-[padding,color] duration-200 ease-in-out",
+    // At rest the label sits 6px from the circle. On hover (parent pill
+    // hovered) the gap grows to 9px — matches figma onHover/onSelect-Hoverd.
+    // The outer edge keeps a constant 12px.
+    "ltr:pl-[6px] ltr:pr-[12px] rtl:pr-[6px] rtl:pl-[12px]",
+    "group-hover/form-step:ltr:pl-[9px] group-hover/form-step:rtl:pr-[9px]",
+  ],
+  {
+    variants: {
+      selected: {
+        true: "text-[#FFFFFF]",
+        false: "text-[#000000]",
+      },
+    },
+    defaultVariants: {
+      selected: false,
+    },
+  },
+);
+
+interface FormStepLabelProps extends HTMLAttributes<HTMLDivElement> {
+  _selected?: boolean;
+  _type?: FormStepperType;
+  _index?: number;
+}
+
+const FormStepLabel = forwardRef<HTMLDivElement, FormStepLabelProps>(
+  ({ className, _selected, _type: _t, _index: _i, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        formStepLabelStyles({ selected: !!_selected }),
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+FormStepLabel.displayName = "FormStepLabel";
+
+// ─── Exports ─────────────────────────────────────────────────────────────────
+
+export {
+  FormStepper,
+  FormStep,
+  FormStepIndicator,
+  FormStepLabel,
+  formStepStyles,
+  formStepIndicatorStyles,
+  formStepLabelStyles,
+};

package/apps/lib/components/ImageAttachment.tsx

@@ -116,7 +116,7 @@ const ExpandableImage = ({ theme, previewSrc, expandLabel, placeholderLabel = "U
                 <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                   <path d="M15.5 3.5L17.8 5.8L14.91 8.67L16.33 10.09L19.2 7.2L21.5 9.5V3.5H15.5ZM3.5 9.5L5.8 7.2L8.67 10.09L10.09 8.67L7.2 5.8L9.5 3.5H3.5V9.5ZM9.5 21.5L7.2 19.2L10.09 16.33L8.67 14.91L5.8 17.8L3.5 15.5V21.5H9.5ZM21.5 15.5L19.2 17.8L16.33 14.91L14.91 16.33L17.8 19.2L15.5 21.5H21.5V15.5Z" fill="#F9F9F9" />
                 </svg>
-                <p className='text-content-presentation-action-hover typography-labels-small-regular max-w-[50px] break-words m-0'>
+                <p className='text-content-presentation-global-primary-inverse typography-labels-small-regular max-w-[50px] break-words m-0'>
                   {expandLabel}
                 </p>
               </button>

package/apps/lib/components/Popover.tsx

@@ -164,9 +164,9 @@ const PopoverItemStyles = cva(
           "text-content-presentation-action-light-primary",
           "bg-background-presentation-action-dropdown-primary",
           "hover:bg-background-presentation-action-hover",
-          "hover:text-content-presentation-action-hover",
+          "hover:text-content-presentation-global-primary-inverse",
           "focus:bg-background-presentation-action-hover",
-          "focus:text-content-presentation-action-hover",
+          "focus:text-content-presentation-global-primary-inverse",
           "disabled:text-content-presentation-state-disabled",
           "disabled:bg-white-00",
         ],
@@ -174,15 +174,15 @@ const PopoverItemStyles = cva(
           "text-content-presentation-state-information",
           "hover:bg-background-presentation-state-information-primary",
           "focus:bg-background-presentation-state-information-primary",
-          "focus:text-content-presentation-action-hover",
-          "hover:text-content-presentation-action-hover",
+          "focus:text-content-presentation-global-primary-inverse",
+          "hover:text-content-presentation-global-primary-inverse",
         ],
         Negative: [
           "text-content-presentation-state-negative",
           "hover:bg-background-presentation-state-negative-primary",
-          "hover:text-content-presentation-action-hover",
+          "hover:text-content-presentation-global-primary-inverse",
           "focus:bg-background-presentation-state-negative-primary",
-          "focus:text-content-presentation-action-hover",
+          "focus:text-content-presentation-global-primary-inverse",
           "active:text-content-presentation-state-negative",
         ],
         SystemStyle: [

package/apps/lib/components/Select.tsx

@@ -286,9 +286,9 @@ const SelectItemStyles = cva(
           "text-content-presentation-action-light-primary",
           "bg-background-presentation-action-dropdown-primary",
           "hover:bg-background-presentation-action-hover",
-          "hover:text-content-presentation-action-hover",
+          "hover:text-content-presentation-global-primary-inverse",
           "focus:bg-background-presentation-action-hover",
-          "focus:text-content-presentation-action-hover",
+          "focus:text-content-presentation-global-primary-inverse",
           "disabled:text-content-presentation-state-disabled",
           "disabled:bg-white-00",
         ],
@@ -296,15 +296,15 @@ const SelectItemStyles = cva(
           "text-content-presentation-state-information",
           "hover:bg-background-presentation-state-information-primary",
           "focus:bg-background-presentation-state-information-primary",
-          "focus:text-content-presentation-action-hover",
-          "hover:text-content-presentation-action-hover",
+          "focus:text-content-presentation-global-primary-inverse",
+          "hover:text-content-presentation-global-primary-inverse",
         ],
         Negative: [
           "text-content-presentation-state-negative",
           "hover:bg-background-presentation-state-negative-primary",
-          "hover:text-content-presentation-action-hover",
+          "hover:text-content-presentation-global-primary-inverse",
           "focus:bg-background-presentation-state-negative-primary",
-          "focus:text-content-presentation-action-hover",
+          "focus:text-content-presentation-global-primary-inverse",
           "active:text-content-presentation-state-negative",
         ],
         SystemStyle: [

package/apps/lib/components/Table.tsx

@@ -1,4 +1,4 @@
-'use client'
+"use client";
 import * as React from "react";
 import { cn } from "../utils/cn";
 import { cva, VariantProps } from "class-variance-authority";
@@ -7,8 +7,6 @@ import { Button } from "./Button";
 import { Checkbox } from "./Checkbox";
 import { useResize } from "../hooks/useResize";
 
-
-
 type TableHeadVariantsProps = VariantProps<typeof tableHeadVariants>;
 
 const Table = React.forwardRef<
@@ -20,9 +18,11 @@ const Table = React.forwardRef<
   <table
     data-theme={theme}
     ref={ref}
-    className={cn("overflow-hidden w-auto [border-collapse:separate] border-spacing-0", className)}
+    className={cn(
+      "overflow-hidden w-auto [border-collapse:separate] border-spacing-0",
+      className,
+    )}
     {...props}
-
   >
     {props.children}
   </table>
@@ -35,10 +35,7 @@ const TableHeader = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <thead
     ref={ref}
-    className={cn(
-      "shadow-[0px_4px_8px_0px_rgba(0,0,0,0.15)]",
-      className
-    )}
+    className={cn("shadow-[0px_4px_8px_0px_rgba(0,0,0,0.15)]", className)}
     {...props}
   />
 ));
@@ -70,29 +67,32 @@ const TableRow = React.forwardRef<
 >(({ className, state = "", ...props }, ref) => (
   <tr
     ref={ref}
-    className={cn([
-      "[&_button]:hover:opacity-100 hover:bg-background-presentation-table-row-hover transition-colors",
-      {
-        "bg-background-presentation-table-row-negative border-border-presentation-badge-red":
-          state === "delete",
-      },
-      {
-        "bg-background-presentation-table-row-information border-border-presentation-badge-navy":
-          state === "update",
-      },
-      {
-        "bg-background-presentation-table-row-success border-border-presentation-badge-green":
-          state === "add",
-      },
-      {
-        "bg-background-presentation-table-row-selected border-t border-[2px] border-border-presentation-table-selected":
-          state === "selected",
-      },
-      {
-        "bg-background-presentation-table-row-hover border-t border-[2px] border-border-presentation-table-dropdown":
-          state === "open",
-      },
-    ], className)}
+    className={cn(
+      [
+        "[&_button]:hover:opacity-100 hover:bg-background-presentation-table-row-hover transition-colors",
+        {
+          "bg-background-presentation-table-row-negative border-border-presentation-badge-red":
+            state === "delete",
+        },
+        {
+          "bg-background-presentation-table-row-information border-border-presentation-badge-navy":
+            state === "update",
+        },
+        {
+          "bg-background-presentation-table-row-success border-border-presentation-badge-green":
+            state === "add",
+        },
+        {
+          "bg-background-presentation-table-row-selected border-t border-[2px] border-border-presentation-table-selected":
+            state === "selected",
+        },
+        {
+          "bg-background-presentation-table-row-hover border-t border-[2px] border-border-presentation-table-dropdown":
+            state === "open",
+        },
+      ],
+      className,
+    )}
     {...props}
   >
     {props.children}
@@ -103,16 +103,16 @@ TableRow.displayName = "TableRow";
 const TableHead = React.forwardRef<
   HTMLTableCellElement,
   React.ThHTMLAttributes<HTMLTableCellElement> &
-  TableHeadVariantsProps &
-  React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    sortType?: "asc" | "desc" | undefined;
-    onSort?: () => void;
-    isDummy?: boolean;
-  }
+    TableHeadVariantsProps &
+    React.ButtonHTMLAttributes<HTMLButtonElement> & {
+      sortType?: "asc" | "desc" | undefined;
+      onSort?: () => void;
+      isDummy?: boolean;
+    }
 >(
   (
     { className, size = "M", disabled, sortType, onSort, isDummy, ...props },
-    forwardedRef
+    forwardedRef,
   ) => {
     const headRef = useRef<any>(null);
     const { width, handleStartResize } = useResize(headRef);
@@ -136,7 +136,7 @@ const TableHead = React.forwardRef<
           className={cn(
             tableHeadVariants({ size, disabled, isDummy }),
             { "min-w-[100px]": !isDummy },
-            className
+            className,
           )}
         >
           <div
@@ -146,10 +146,15 @@ const TableHead = React.forwardRef<
             })}
           >
             {props.children}
-            {isDummy || !onSort ? null : <SortButton onSort={onSort} sortType={sortType} />}
+            {isDummy || !onSort ? null : (
+              <SortButton onSort={onSort} sortType={sortType} />
+            )}
           </div>
         </div>
-        <button disabled={isDummy} className="absolute top-[50%] translate-y-[-50%] right-[-1px] rtl:left-[-1px] rtl:right-[unset] h-[20px] w-[2px] rounded-full bg-border-presentation-action-primary">
+        <button
+          disabled={isDummy}
+          className="absolute top-[50%] translate-y-[-50%] right-[-1px] rtl:left-[-1px] rtl:right-[unset] h-[20px] w-[2px] rounded-full bg-border-presentation-action-primary"
+        >
           <ResizeIcon
             className={cn({ "!opacity-0 cursor-default": isDummy })}
             onMouseDown={handleStartResize}
@@ -158,7 +163,7 @@ const TableHead = React.forwardRef<
         </button>
       </th>
     );
-  }
+  },
 );
 TableHead.displayName = "TableHead";
 
@@ -179,7 +184,7 @@ const TableCell = React.forwardRef<
         "border-r  border-b border-border-presentation-table-header px-1 rtl:border-l rtl:border-r-0",
         "break-all",
       ],
-      className
+      className,
     )}
     {...props}
   >
@@ -189,7 +194,9 @@ const TableCell = React.forwardRef<
         "[mask-image:linear-gradient(to_right,black_0%,black_0%,black_75%,transparent_100%)]",
         "rtl:[mask-image:linear-gradient(to_left,black_0%,black_0%,black_75%,transparent_100%)]",
         "[&:has(input)]:[mask-image:none]",
-        { "min-w-fit justify-center": isDummy }, childrenClassName)}
+        { "min-w-fit justify-center": isDummy },
+        childrenClassName,
+      )}
     >
       {props.children}
     </div>
@@ -230,15 +237,11 @@ const TableFooterButton = React.forwardRef<
   }>
 >(({ children, className, ...props }, ref) => {
   return (
-    <TableRow
-      className={cn(
-        "h-[40px] overflow-hidden",
-        className
-      )}
-    >
+    <TableRow className={cn("h-[40px] overflow-hidden", className)}>
       <TableCell
         className={
-          "border-t-2 border-b-2 border-transparent hover:border-border-presentation-table-action-hover  hover:bg-background-presentation-table-acton-hover"}
+          "border-t-2 border-b-2 border-transparent hover:border-border-presentation-table-action-hover  hover:bg-background-presentation-table-acton-hover"
+        }
         colSpan={100}
       >
         <button
@@ -246,16 +249,17 @@ const TableFooterButton = React.forwardRef<
           {...props}
           className={cn(
             "overflow-hidden w-full flex items-center justify-start gap-2 typography-body-medium-semibold [&_i]:text-[20px]",
-            className
+            className,
           )}
-        >{children}</button>
+        >
+          {children}
+        </button>
       </TableCell>
     </TableRow>
   );
 });
 TableFooterButton.displayName = "TableFooterButton";
 
-
 const SubTableButton = ({
   isActive,
   className,
@@ -273,7 +277,7 @@ const SubTableButton = ({
           "hover:bg-transparent hover:text-black focus:bg-transparent focus:text-black active:bg-transparent active:text-black":
             dummy,
         },
-        className
+        className,
       )}
       variant={"PrimeStyle"}
       buttonType={"icon"}
@@ -283,7 +287,7 @@ const SubTableButton = ({
           "ri-arrow-right-s-line",
           "rtl:rotate-180",
           "transition-transform duration-200",
-          { "rotate-90": isActive }
+          { "rotate-90": isActive },
         )}
       ></i>
     </Button>
@@ -308,7 +312,10 @@ const ResizeIcon = (props: any) => {
   return (
     <svg
       {...props}
-      className={cn("z-50 cursor-col-resize absolute top-[50%] right-[50%] translate-x-[50%] translate-y-[-50%] opacity-0 hover:opacity-100 transition-opacity duration-200", props.className)}
+      className={cn(
+        "z-50 cursor-col-resize absolute top-[50%] right-[50%] translate-x-[50%] translate-y-[-50%] opacity-0 hover:opacity-100 transition-opacity duration-200",
+        props.className,
+      )}
       width="8"
       height="32"
       viewBox="0 0 8 40"
@@ -351,9 +358,6 @@ const SortButton = ({
   );
 };
 
-
-
-
 const tableHeadVariants = cva(
   [
     "text-content-presentation-global-primary",
@@ -365,7 +369,7 @@ const tableHeadVariants = cva(
     "text-start",
     "bg-transparent",
     "hover:bg-background-presentation-action-hover",
-    "hover:text-content-presentation-action-hover",
+    "hover:text-content-presentation-global-hover",
     "transition-[background-color,color]",
     "duration-200",
     "rounded-[3px]",
@@ -394,5 +398,5 @@ const tableHeadVariants = cva(
         size: "M",
       },
     },
-  }
-);
+  },
+);

package/apps/lib/components/Toggle.tsx

@@ -37,19 +37,19 @@ const toggleVariants = cva(
                 "bg-background-presentation-action-secondary",
                 "text-content-presentation-action-light-primary",
                 "hover:bg-background-presentation-action-hover",
-                "hover:text-content-presentation-action-hover",
+                "hover:text-content-presentation-global-primary-inverse",
                 "focus:lg:focus:md:border lg:focus:md:border-border-presentation-state-focus", // Focus style only for medium screens and above
-                "active:bg-background-presentation-action-hover active:text-content-presentation-action-hover",
-                "data-[state=on]:bg-background-presentation-action-hover data-[state=on]:text-content-presentation-action-hover",
+                "active:bg-background-presentation-action-hover active:text-content-presentation-global-primary-inverse",
+                "data-[state=on]:bg-background-presentation-action-hover data-[state=on]:text-content-presentation-global-primary-inverse",
             ],
             BlueSecStyle: [
                 "bg-background-presentation-action-secondary",
                 "text-content-presentation-action-light-primary",
                 "hover:bg-background-presentation-state-information-primary",
-                "hover:text-content-presentation-action-hover",
+                "hover:text-content-presentation-global-primary-inverse",
                 "focus:lg:border focus:lg:border-border-presentation-state-focus",
-                "active:bg-background-presentation-state-information-primary active:text-content-presentation-action-hover",
-                "data-[state=on]:bg-background-presentation-state-information-primary data-[state=on]:text-content-presentation-action-hover",
+                "active:bg-background-presentation-state-information-primary active:text-content-presentation-global-primary-inverse",
+                "data-[state=on]:bg-background-presentation-state-information-primary data-[state=on]:text-content-presentation-global-primary-inverse",
             ],
             YelSecStyle: [
                 "bg-background-presentation-action-secondary",
@@ -64,22 +64,22 @@ const toggleVariants = cva(
                 "bg-background-presentation-action-secondary",
                 "text-content-presentation-action-light-primary",
                 "hover:bg-background-presentation-state-negative-primary",
-                "hover:text-content-presentation-action-hover",
+                "hover:text-content-presentation-global-primary-inverse",
                 "focus:lg:border focus:lg:border-border-presentation-state-focus",
-                "active:bg-background-presentation-state-negative-primary active:text-content-presentation-action-hover",
-                "data-[state=on]:bg-background-presentation-state-negative-primary data-[state=on]:text-content-presentation-action-hover",
+                "active:bg-background-presentation-state-negative-primary active:text-content-presentation-global-primary-inverse",
+                "data-[state=on]:bg-background-presentation-state-negative-primary data-[state=on]:text-content-presentation-global-primary-inverse",
             ],
             BorderStyle: [
                 "text-content-presentation-action-light-primary",
                 "border border-border-presentation-action-disabled",
                 "bg-background-presentation-action-borderstyle",
                 "hover:bg-background-presentation-action-hover",
-                "hover:text-content-presentation-action-hover",
+                "hover:text-content-presentation-global-primary-inverse",
                 "focus:lg:border focus:lg:border-border-presentation-state-focus",
                 "focus:lg:text-content-presentation-action-light-primary",
-                "focus:hover:lg:text-content-presentation-action-hover",
-                "active:bg-background-presentation-action-hover active:text-content-presentation-action-hover",
-                "data-[state=on]:bg-background-presentation-action-hover data-[state=on]:text-content-presentation-action-hover",
+                "focus:hover:lg:text-content-presentation-global-primary-inverse",
+                "active:bg-background-presentation-action-hover active:text-content-presentation-global-primary-inverse",
+                "data-[state=on]:bg-background-presentation-action-hover data-[state=on]:text-content-presentation-global-primary-inverse",
             ],
             PrimeContStyle: [
                 "text-content-presentation-action-light-primary",

package/apps/lib/components/ToggleButton.tsx

@@ -29,29 +29,29 @@ const toggleButtonStyles = cva(
           "bg-background-presentation-action-secondary",
           "text-content-presentation-action-light-primary",
           "hover:bg-background-presentation-action-hover",
-          "hover:text-content-presentation-action-hover",
+          "hover:text-content-presentation-global-primary-inverse",
           "focus-visible:ring-2 focus-visible:ring-border-presentation-state-focus",
           "data-[state=on]:bg-background-presentation-action-hover",
-          "data-[state=on]:text-content-presentation-action-hover",
+          "data-[state=on]:text-content-presentation-global-primary-inverse",
         ],
         BlueSecStyle: [
           "bg-background-presentation-action-secondary",
           "text-content-presentation-action-light-primary",
           "hover:bg-background-presentation-state-information-primary",
-          "hover:text-content-presentation-action-hover",
+          "hover:text-content-presentation-global-primary-inverse",
           "focus-visible:ring-2 focus-visible:ring-border-presentation-state-focus",
           "data-[state=on]:bg-background-presentation-state-information-primary",
-          "data-[state=on]:text-content-presentation-action-hover",
+          "data-[state=on]:text-content-presentation-global-primary-inverse",
         ],
         BorderStyle: [
           "bg-background-presentation-action-borderstyle",
           "text-content-presentation-action-light-primary",
           "border-border-presentation-action-disabled",
           "hover:bg-background-presentation-action-hover",
-          "hover:text-content-presentation-action-hover",
+          "hover:text-content-presentation-global-primary-inverse",
           "focus-visible:ring-2 focus-visible:ring-border-presentation-state-focus",
           "data-[state=on]:bg-background-presentation-action-hover",
-          "data-[state=on]:text-content-presentation-action-hover",
+          "data-[state=on]:text-content-presentation-global-primary-inverse",
         ],
         PrimeContStyle: [
           "bg-transparent",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "torch-glare",
-  "version": "1.5.1",
+  "version": "2.0.0",
   "type": "module",
   "license": "MIT",
   "files": [