regression: replace old css vars with the new design system tokens (#8354)

* chore: replace old css vars

* fix: replace shadow and primary colors

* chore: remove hardcoded colors

packages/ui/src/auth-form/auth-input.tsx

@@ -51,7 +51,7 @@ export function AuthInput({
           <button
             type="button"
             onClick={() => setShowPassword(!showPassword)}
-            className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+            className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
           >
             {showPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
           </button>

packages/ui/src/card/helper.tsx

@@ -21,7 +21,7 @@ export interface ICardProperties {
 const DEFAULT_STYLE = "bg-surface-1 rounded-lg border-[0.5px] border-subtle w-full flex flex-col";
 export const containerStyle: ICardProperties = {
   [ECardVariant.WITHOUT_SHADOW]: "",
-  [ECardVariant.WITH_SHADOW]: "hover:shadow-custom-shadow-4xl duration-300",
+  [ECardVariant.WITH_SHADOW]: "hover:shadow-raised-200 duration-300",
 };
 export const spacings = {
   [ECardSpacing.SM]: "p-4",

packages/ui/src/drag-handle.tsx

@@ -28,8 +28,8 @@ export const DragHandle = forwardRef(function DragHandle(
       }}
       ref={ref}
     >
-      <MoreVertical className="h-3.5 w-3.5 stroke-custom-text-400" />
-      <MoreVertical className="-ml-5 h-3.5 w-3.5 stroke-custom-text-400" />
+      <MoreVertical className="h-3.5 w-3.5 stroke-placeholder" />
+      <MoreVertical className="-ml-5 h-3.5 w-3.5 stroke-placeholder" />
     </button>
   );
 });

packages/ui/src/dropdown/multi-select.tsx

@@ -138,7 +138,7 @@ export function MultiSelectDropdown(props: IMultiSelectDropdown) {
         <Combobox.Options className="fixed z-10" static>
           <div
             className={cn(
-              "my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-custom-shadow-rg focus:outline-none",
+              "my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none",
               optionsContainerClassName
             )}
             ref={setPopperElement}

packages/ui/src/dropdown/single-select.tsx

@@ -137,7 +137,7 @@ export function Dropdown(props: ISingleSelectDropdown) {
         <Combobox.Options className="fixed z-10" static>
           <div
             className={cn(
-              "my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2 text-11 shadow-custom-shadow-rg focus:outline-none",
+              "my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2 text-11 shadow-raised-200 focus:outline-none",
               optionsContainerClassName
             )}
             ref={setPopperElement}

packages/ui/src/form-fields/checkbox.tsx

@@ -67,7 +67,7 @@ const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: R
         className={cn(
           "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-4 p-0.5 pointer-events-none outline-none stroke-white hidden",
           {
-            "stroke-custom-text-400 opacity-40": disabled,
+            "stroke-placeholder opacity-40": disabled,
             block: indeterminate && !checked,
           },
           iconClassName

packages/ui/src/form-fields/input-color-picker.tsx

@@ -88,7 +88,7 @@ export function InputColorPicker(props: InputColorPickerProps) {
             >
               <Popover.Panel>
                 <div
-                  className="z-10 overflow-hidden rounded-sm border border-subtle bg-surface-1 shadow-custom-shadow-rg"
+                  className="z-10 overflow-hidden rounded-sm border border-subtle bg-surface-1 shadow-raised-200"
                   ref={setPopperElement}
                   style={styles.popper}
                   {...attributes.popper}

packages/ui/src/form-fields/textarea.tsx

@@ -37,7 +37,7 @@ const TextArea = React.forwardRef(function TextArea(
       ref={textAreaRef}
       value={value}
       className={cn(
-        "no-scrollbar w-full bg-transparent placeholder-custom-text-400 outline-none",
+        "no-scrollbar w-full bg-transparent placeholder-(--text-color-placeholder) outline-none",
         {
           "rounded-md border-[0.5px] border-subtle": mode === "primary",
           "focus:ring-theme rounded-sm border-none bg-transparent ring-0 transition-all focus:ring-1":

packages/ui/src/popovers/popover-menu.tsx

@@ -29,7 +29,7 @@ export function PopoverMenu<T>(props: TPopoverMenu<T>) {
       button={button}
       disabled={disabled}
       panelClassName={cn(
-        "my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2 text-11 shadow-custom-shadow-rg focus:outline-none",
+        "my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2 text-11 shadow-raised-200 focus:outline-none",
         panelClassName
       )}
       popoverClassName={popoverClassName}

packages/ui/src/spinners/circular-spinner.tsx

@@ -15,7 +15,7 @@ export function Spinner({ height = "32px", width = "32px", className = "" }: ISp
         aria-hidden="true"
         height={height}
         width={width}
-        className={cn("animate-spin fill-custom-primary-100 text-secondary", className)}
+        className={cn("animate-spin fill-accent-primary text-secondary", className)}
         viewBox="0 0 100 101"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"