@pdfme/ui 3.0.1 → 3.1.0-dev.1

package/src/components/Designer/Canvas/Selecto.tsx

@@ -1,29 +1,42 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import Selecto, { OnDragStart as _OnDragStart, OnSelect as _OnSelect } from 'react-selecto';
 import { SELECTABLE_CLASSNAME } from '../../../constants';
+import { theme } from 'antd';
 
-const _Selecto = ({
-  container,
-  continueSelect,
-  onDragStart,
-  onSelect,
-}: {
+type Props = {
   container: HTMLElement | null;
   continueSelect: boolean;
   onDragStart: (e: _OnDragStart) => void;
   onSelect: (e: _OnSelect) => void;
-}) => (
-  <Selecto
-    selectFromInside={false}
-    selectByClick
-    preventDefault
-    hitRate={0}
-    selectableTargets={[`.${SELECTABLE_CLASSNAME}`]}
-    container={container}
-    continueSelect={continueSelect}
-    onDragStart={onDragStart}
-    onSelect={onSelect}
-  />
-);
+};
+
+const className = 'pdfme-selecto';
+
+const _Selecto = (props: Props) => {
+  const { token } = theme.useToken();
+  useEffect(() => {
+    const containerElement = document.querySelector('.' + className) as HTMLElement | null;
+    if (containerElement) {
+      containerElement.style.backgroundColor = token.colorPrimary;
+      containerElement.style.opacity = '0.75';
+      containerElement.style.borderColor = token.colorPrimaryBorder;
+    }
+  }, [props.container]);
+
+  return (
+    <Selecto
+      className={className}
+      selectFromInside={false}
+      selectByClick
+      preventDefault
+      hitRate={0}
+      selectableTargets={[`.${SELECTABLE_CLASSNAME}`]}
+      container={props.container}
+      continueSelect={props.continueSelect}
+      onDragStart={props.onDragStart}
+      onSelect={props.onSelect}
+    />
+  );
+};
 
 export default _Selecto;

package/src/components/Designer/Canvas/index.tsx

@@ -9,10 +9,11 @@ import React, {
   forwardRef,
   useCallback,
 } from 'react';
+import { theme, Button } from 'antd';
 import { OnDrag, OnResize, OnClick, OnRotate } from 'react-moveable';
 import { ZOOM, SchemaForUI, Size, ChangeSchemas } from '@pdfme/common';
 import { PluginsRegistry } from '../../../contexts';
-import { XMarkIcon } from '@heroicons/react/24/outline';
+import { CloseOutlined } from '@ant-design/icons';
 import { RULER_HEIGHT, SIDEBAR_WIDTH } from '../../../constants';
 import { usePrevious } from '../../../hooks';
 import { uuid, round, flatten } from '../../../helper';
@@ -30,33 +31,33 @@ const isTopLeftResize = (d: string) => d === '-1,-1' || d === '-1,0' || d === '0
 const normalizeRotate = (angle: number) => ((angle % 360) + 360) % 360;
 
 const DeleteButton = ({ activeElements: aes }: { activeElements: HTMLElement[] }) => {
+  const { token } = theme.useToken();
+
+  const size = 26;
   const top = Math.min(...aes.map(({ style }) => fmt4Num(style.top)));
   const left = Math.max(...aes.map(({ style }) => fmt4Num(style.left) + fmt4Num(style.width))) + 10;
 
   return (
-    <button
+    <Button
       id={DELETE_BTN_ID}
       style={{
         position: 'absolute',
         zIndex: 1,
         top,
         left,
+        width: size,
+        height: size,
         padding: 2,
-        height: 24,
-        width: 24,
-        cursor: 'pointer',
-        color: 'white',
-        border: 'none',
-        fontWeight: 'bold',
-        borderRadius: 2,
-        background: 'rgb(68, 170, 255)',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
+        borderRadius: token.borderRadius,
+        color: token.colorWhite,
+        background: token.colorPrimary,
       }}
     >
-      <XMarkIcon style={{ pointerEvents: 'none' }} width={24} height={24} />
-    </button>
+      <CloseOutlined style={{ pointerEvents: 'none' }} />
+    </Button>
   );
 };
 
@@ -103,6 +104,7 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
     paperRefs,
     sidebarOpen,
   } = props;
+  const { token } = theme.useToken();
   const pluginsRegistry = useContext(PluginsRegistry);
 
   const verticalGuides = useRef<GuidesInterface[]>([]);
@@ -258,10 +260,12 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
     );
     const schemaTypes = selectedSchemas.map((s) => s.type);
     const uniqueSchemaTypes = [...new Set(schemaTypes)];
-    const defaultSchemas = Object.values(pluginsRegistry).map(plugin => plugin?.propPanel.defaultSchema)
+    const defaultSchemas = Object.values(pluginsRegistry).map(
+      (plugin) => plugin?.propPanel.defaultSchema
+    );
 
     return uniqueSchemaTypes.every(
-      (type) => defaultSchemas.find(ds => ds.type === type)?.rotate !== undefined
+      (type) => defaultSchemas.find((ds) => ds.type === type)?.rotate !== undefined
     );
   }, [activeElements, pageCursor, schemasList, pluginsRegistry]);
 
@@ -378,7 +382,9 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
               changeSchemas([{ key: 'data', value, schemaId: schema.id }]);
             }}
             stopEditing={() => setEditing(false)}
-            outline={hoveringSchemaId === schema.id ? '1px solid #18a0fb' : '1px dashed #4af'}
+            outline={`1px ${hoveringSchemaId === schema.id ? 'solid' : 'dashed'} ${
+              token.colorPrimary
+            }`}
             scale={scale}
           />
         )}

package/src/components/Designer/Sidebar/DetailView/AlignWidget.tsx

@@ -13,12 +13,21 @@ const svgBaseProp = {
   fill: '#000000',
 };
 
-const AlignWidget = ({
-  activeElements,
-  changeSchemas,
-  schemas,
-  pageSize,
-}: PropPanelWidgetProps) => {
+const createSvgIcon = (path: JSX.Element) => (
+  <svg {...svgBaseProp}>
+    <rect fill="none" height="24" width="24" />
+    {path}
+  </svg>
+);
+
+const createButtonConfig = (id: string, path: JSX.Element, onClick: () => void) => ({
+  id,
+  icon: createSvgIcon(path),
+  onClick,
+});
+
+const AlignWidget = (props: PropPanelWidgetProps) => {
+  const { activeElements, changeSchemas, schemas, pageSize, schema } = props;
   const align = (type: 'left' | 'center' | 'right' | 'top' | 'middle' | 'bottom') => {
     const ids = activeElements.map((ae) => ae.id);
     const ass = schemas.filter((s) => ids.includes(s.id));
@@ -79,92 +88,47 @@ const AlignWidget = ({
       })
     );
   };
-
-  const layoutBtns: { id: string; icon: any; onClick: () => void }[] = [
-    {
-      id: 'left',
-      icon: (
-        <svg {...svgBaseProp}>
-          <rect fill="none" height="24" width="24" />
-          <path d="M4,22H2V2h2V22z M22,7H6v3h16V7z M16,14H6v3h10V14z" />
-        </svg>
-      ),
-      onClick: () => align('left'),
-    },
-    {
-      id: 'center',
-      icon: (
-        <svg {...svgBaseProp}>
-          <rect fill="none" height="24" width="24" />
-          <polygon points="11,2 13,2 13,7 21,7 21,10 13,10 13,14 18,14 18,17 13,17 13,22 11,22 11,17 6,17 6,14 11,14 11,10 3,10 3,7 11,7" />
-        </svg>
-      ),
-      onClick: () => align('center'),
-    },
-    {
-      id: 'right',
-      icon: (
-        <svg {...svgBaseProp}>
-          <rect fill="none" height="24" width="24" />
-          <path d="M20,2h2v20h-2V2z M2,10h16V7H2V10z M8,17h10v-3H8V17z" />
-        </svg>
-      ),
-      onClick: () => align('right'),
-    },
-    {
-      id: 'top',
-      icon: (
-        <svg {...svgBaseProp}>
-          <rect fill="none" height="24" width="24" />
-          <path d="M22,2v2H2V2H22z M7,22h3V6H7V22z M14,16h3V6h-3V16z" />
-        </svg>
-      ),
-      onClick: () => align('top'),
-    },
-    {
-      id: 'middle',
-      icon: (
-        <svg {...svgBaseProp}>
-          <rect fill="none" height="24" width="24" />
-          <polygon points="22,11 17,11 17,6 14,6 14,11 10,11 10,3 7,3 7,11 1.84,11 1.84,13 7,13 7,21 10,21 10,13 14,13 14,18 17,18 17,13 22,13" />
-        </svg>
-      ),
-      onClick: () => align('middle'),
-    },
-    {
-      id: 'bottom',
-      icon: (
-        <svg {...svgBaseProp}>
-          <rect fill="none" height="24" width="24" />
-          <path d="M22,22H2v-2h20V22z M10,2H7v16h3V2z M17,8h-3v10h3V8z" />
-        </svg>
-      ),
-      onClick: () => align('bottom'),
-    },
-    {
-      id: 'vertical',
-      icon: (
-        <svg {...svgBaseProp}>
-          <rect fill="none" height="24" width="24" />
-          <path d="M22,2v2H2V2H22z M7,10.5v3h10v-3H7z M2,20v2h20v-2H2z" />
-        </svg>
-      ),
-      onClick: () => distribute('vertical'),
-    },
-    {
-      id: 'horizontal',
-      icon: (
-        <svg {...svgBaseProp}>
-          <rect fill="none" height="24" width="24" />
-          <path d="M4,22H2V2h2V22z M22,2h-2v20h2V2z M13.5,7h-3v10h3V7z" />
-        </svg>
-      ),
-      onClick: () => distribute('horizontal'),
-    },
+  const layoutBtns = [
+    createButtonConfig('left', <path d="M4,22H2V2h2V22z M22,7H6v3h16V7z M16,14H6v3h10V14z" />, () =>
+      align('left')
+    ),
+    createButtonConfig(
+      'center',
+      <polygon points="11,2 13,2 13,7 21,7 21,10 13,10 13,14 18,14 18,17 13,17 13,22 11,22 11,17 6,17 6,14 11,14 11,10 3,10 3,7 11,7" />,
+      () => align('center')
+    ),
+    createButtonConfig(
+      'right',
+      <path d="M20,2h2v20h-2V2z M2,10h16V7H2V10z M8,17h10v-3H8V17z" />,
+      () => align('right')
+    ),
+    createButtonConfig('top', <path d="M22,2v2H2V2H22z M7,22h3V6H7V22z M14,16h3V6h-3V16z" />, () =>
+      align('top')
+    ),
+    createButtonConfig(
+      'middle',
+      <polygon points="22,11 17,11 17,6 14,6 14,11 10,11 10,3 7,3 7,11 1.84,11 1.84,13 7,13 7,21 10,21 10,13 14,13 14,18 17,18 17,13 22,13" />,
+      () => align('middle')
+    ),
+    createButtonConfig(
+      'bottom',
+      <path d="M22,22H2v-2h20V22z M10,2H7v16h3V2z M17,8h-3v10h3V8z" />,
+      () => align('bottom')
+    ),
+    createButtonConfig(
+      'vertical',
+      <path d="M22,2v2H2V2H22z M7,10.5v3h10v-3H7z M2,20v2h20v-2H2z" />,
+      () => distribute('vertical')
+    ),
+    createButtonConfig(
+      'horizontal',
+      <path d="M4,22H2V2h2V22z M22,2h-2v20h2V2z M13.5,7h-3v10h3V7z" />,
+      () => distribute('horizontal')
+    ),
   ];
 
   return (
-    <Form.Item label="Align">
+    <Form.Item label={schema.title}>
       <Button.Group>
         {layoutBtns.map((btn) => (
           <Button

package/src/components/Designer/Sidebar/DetailView/index.tsx

@@ -1,14 +1,16 @@
 import FormRender, { useForm } from 'form-render';
 import React, { useContext, useEffect, useState } from 'react';
-import type { SchemaForUI, PropPanelWidgetProps, PropPanelSchema } from '@pdfme/common';
+import type { Dict, SchemaForUI, PropPanelWidgetProps, PropPanelSchema } from '@pdfme/common';
 import type { SidebarProps } from '../../../../types';
-import { Bars3Icon } from '@heroicons/react/20/solid';
+import { MenuOutlined } from '@ant-design/icons';
 import { I18nContext, PluginsRegistry, OptionsContext } from '../../../../contexts';
-import { RULER_HEIGHT } from '../../../../constants';
-import Divider from '../../../Divider';
+import { getSidebarContentHeight } from '../../../../helper';
+import { theme, Typography, Button, Divider } from 'antd';
 import AlignWidget from './AlignWidget';
 import WidgetRenderer from './WidgetRenderer';
 
+const { Text } = Typography;
+
 const DetailView = (
   props: Pick<
     SidebarProps,
@@ -17,6 +19,8 @@ const DetailView = (
     activeSchema: SchemaForUI;
   }
 ) => {
+  const { token } = theme.useToken();
+
   const { size, changeSchemas, deselectSchema, activeSchema, activeElements } = props;
   const form = useForm();
 
@@ -31,18 +35,27 @@ const DetailView = (
   useEffect(() => {
     const newWidgets: typeof widgets = {
       AlignWidget: (p) => <AlignWidget {...p} {...props} options={options} />,
-      Divider,
+      Divider: () => (
+        <Divider style={{ marginTop: token.marginXS, marginBottom: token.marginXS }} />
+      ),
     };
     for (const plugin of Object.values(pluginsRegistry)) {
       const widgets = plugin?.propPanel.widgets || {};
       Object.entries(widgets).forEach(([widgetKey, widgetValue]) => {
         newWidgets[widgetKey] = (p) => (
-          <WidgetRenderer {...p} {...props} options={options} widget={widgetValue} />
+          <WidgetRenderer
+            {...p}
+            {...props}
+            options={options}
+            theme={token}
+            i18n={i18n as (key: keyof Dict | string) => string}
+            widget={widgetValue}
+          />
         );
       });
     }
     setWidgets(newWidgets);
-  }, [activeSchema, activeElements, pluginsRegistry]);
+  }, [activeSchema, activeElements, pluginsRegistry, JSON.stringify(options)]);
 
   useEffect(() => {
     form.setValues({ ...activeSchema });
@@ -76,7 +89,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
     column: 2,
     properties: {
       type: {
-        title: 'Type',
+        title: i18n('type'),
         type: 'string',
         widget: 'select',
         props: {
@@ -86,9 +99,9 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
           })),
         },
       },
-      key: { title: 'Name', type: 'string', widget: 'input' },
+      key: { title: i18n('fieldName'), type: 'string', widget: 'input' },
       '-': { type: 'void', widget: 'Divider', cellSpan: 2 },
-      align: { title: 'Align', type: 'void', widget: 'AlignWidget', cellSpan: 2 },
+      align: { title: i18n('align'), type: 'void', widget: 'AlignWidget', cellSpan: 2 },
       position: {
         type: 'object',
         widget: 'card',
@@ -97,10 +110,10 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
           y: { title: 'Y', type: 'number', widget: 'inputNumber' },
         },
       },
-      width: { title: 'Width', type: 'number', widget: 'inputNumber', span: 8 },
-      height: { title: 'Height', type: 'number', widget: 'inputNumber', span: 8 },
+      width: { title: i18n('width'), type: 'number', widget: 'inputNumber', span: 8 },
+      height: { title: i18n('height'), type: 'number', widget: 'inputNumber', span: 8 },
       rotate: {
-        title: 'Rotate',
+        title: i18n('rotate'),
         type: 'number',
         widget: 'inputNumber',
         span: 8,
@@ -112,7 +125,13 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
   };
 
   if (typeof activePropPanelSchema === 'function') {
-    const apps = activePropPanelSchema({ ...props, options }) || {};
+    const apps =
+      activePropPanelSchema({
+        ...props,
+        options,
+        theme: token,
+        i18n: i18n as (key: keyof Dict | string) => string,
+      }) || {};
     propPanelSchema.properties = {
       ...propPanelSchema.properties,
       ...(Object.keys(apps).length === 0
@@ -134,36 +153,28 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
   return (
     <div>
       <div style={{ height: 40, display: 'flex', alignItems: 'center' }}>
-        <span
+        <Button
           style={{
             position: 'absolute',
-            top: '0.85rem',
             zIndex: 100,
-            border: 'none',
-            borderRadius: 2,
-            padding: '0.5rem',
-            cursor: 'pointer',
-            background: '#eee',
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
-            maxWidth: 30,
-            maxHeight: 30,
           }}
           onClick={deselectSchema}
-        >
-          <Bars3Icon width={15} height={15} />
-        </span>
-        <span style={{ textAlign: 'center', width: '100%', fontWeight: 'bold' }}>
+          icon={<MenuOutlined />}
+        />
+        <Text strong style={{ textAlign: 'center', width: '100%' }}>
           {i18n('editField')}
-        </span>
+        </Text>
       </div>
-      <Divider />
+      <Divider style={{ marginTop: token.marginXS, marginBottom: token.marginXS }} />
       <div
         style={{
-          height: size.height - RULER_HEIGHT - RULER_HEIGHT / 2 - 145,
+          height: getSidebarContentHeight(size.height),
           overflowY: 'auto',
           overflowX: 'hidden',
+          borderBottom: `1px solid ${token.colorSplit}`,
         }}
       >
         <FormRender

package/src/components/Designer/Sidebar/ListView/Item.tsx

@@ -1,7 +1,10 @@
 import React, { useEffect, useContext } from 'react';
 import { DraggableSyntheticListeners } from '@dnd-kit/core';
 import { I18nContext } from '../../../../contexts';
-import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
+import { HolderOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
+import { Button, Typography } from 'antd';
+
+const { Text } = Typography;
 
 interface Props {
   value: React.ReactNode;
@@ -60,6 +63,7 @@ const Item = React.memo(
       return (
         <li
           style={{
+            marginTop: 10,
             transition,
             transform: `translate(${x}px, ${y}px) scale(${scaleX}, ${scaleY})`,
           }}
@@ -67,40 +71,47 @@ const Item = React.memo(
           onMouseLeave={onMouseLeave}
           ref={ref}
         >
-          <div style={{ display: 'flex', alignItems: 'center', ...style }} {...props}>
-            <button
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              cursor: 'pointer',
+              ...style,
+            }}
+            {...props}
+            onClick={() => onClick && onClick()}
+          >
+            <Button
               {...listeners}
-              style={{ padding: '0.5rem', background: 'none', border: 'none', display: 'flex' }}
-            >
-              <object style={{ cursor: 'grab', marginTop: 6 }} width={15}>
-                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="16" height="16">
-                  <path d="M10 13a1 1 0 100-2 1 1 0 000 2zm-4 0a1 1 0 100-2 1 1 0 000 2zm1-5a1 1 0 11-2 0 1 1 0 012 0zm3 1a1 1 0 100-2 1 1 0 000 2zm1-5a1 1 0 11-2 0 1 1 0 012 0zM6 5a1 1 0 100-2 1 1 0 000 2z"></path>
-                </svg>
-              </object>
-            </button>
-            <div
               style={{
-                width: '100%',
-                padding: '0.5rem',
-                paddingLeft: 0,
-                cursor: 'pointer',
+                display: 'flex',
+                alignItems: 'center',
+                background: 'none',
+                boxShadow: 'none',
+                border: 'none',
+                paddingLeft: '0.25rem',
+              }}
+              icon={<HolderOutlined style={{ cursor: 'grab' }} />}
+            />
+            <Text
+              style={{
                 overflow: 'hidden',
                 whiteSpace: 'nowrap',
                 textOverflow: 'ellipsis',
+                width: '100%',
               }}
               title={title || ''}
-              onClick={() => onClick && onClick()}
             >
               {status === undefined ? (
                 value
               ) : (
                 <span style={{ display: 'flex', alignItems: 'center' }}>
-                  <ExclamationTriangleIcon width={15} style={{ marginRight: '0.5rem' }} />
+                  <ExclamationCircleOutlined width={15} style={{ marginRight: '0.5rem' }} />
                   {status === 'is-warning' ? i18n('noKeyName') : value}
                   {status === 'is-danger' ? i18n('notUniq') : ''}
                 </span>
               )}
-            </div>
+            </Text>
           </div>
         </li>
       );

package/src/components/Designer/Sidebar/ListView/SelectableSortableContainer.tsx

@@ -19,14 +19,17 @@ import { SchemaForUI } from '@pdfme/common';
 import type { SidebarProps } from '../../../../types';
 import Item from './Item';
 import SelectableSortableItem from './SelectableSortableItem';
+import { theme } from 'antd';
 
 const SelectableSortableContainer = (
   props: Pick<
     SidebarProps,
-    'schemas' | 'onEdit' | 'onSortEnd' | 'height' | 'hoveringSchemaId' | 'onChangeHoveringSchemaId'
+    'schemas' | 'onEdit' | 'onSortEnd' | 'hoveringSchemaId' | 'onChangeHoveringSchemaId'
   >
 ) => {
-  const { schemas, onEdit, onSortEnd, height, hoveringSchemaId, onChangeHoveringSchemaId } = props;
+  const { token } = theme.useToken();
+
+  const { schemas, onEdit, onSortEnd, hoveringSchemaId, onChangeHoveringSchemaId } = props;
   const [selectedSchemas, setSelectedSchemas] = useState<SchemaForUI[]>([]);
   const [dragOverlaydItems, setClonedItems] = useState<SchemaForUI[] | null>(null);
   const [activeId, setActiveId] = useState<string | null>(null);
@@ -107,7 +110,7 @@ const SelectableSortableContainer = (
       }}
     >
       <>
-        <div style={{ height, overflowY: 'auto' }}>
+        <div style={{ height: '100%', overflowY: 'auto' }}>
           <SortableContext items={schemas} strategy={verticalListSortingStrategy}>
             <ul style={{ margin: 0, padding: 0, listStyle: 'none', borderRadius: 5 }}>
               {schemas.map((schema) => (
@@ -115,7 +118,7 @@ const SelectableSortableContainer = (
                   key={schema.id}
                   style={{
                     border: `1px solid ${
-                      schema.id === hoveringSchemaId ? '#18a0fb' : 'transparent'
+                      schema.id === hoveringSchemaId ? token.colorPrimary : 'transparent'
                     }`,
                   }}
                   schema={schema}
@@ -137,7 +140,7 @@ const SelectableSortableContainer = (
                 <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
                   <Item
                     value={schemas.find((schema) => schema.id === activeId)!.key}
-                    style={{ color: '#fff', background: '#18a0fb' }}
+                    style={{ background: token.colorPrimary }}
                     dragOverlay
                   />
                 </ul>
@@ -148,7 +151,7 @@ const SelectableSortableContainer = (
                       <Item
                         key={item.id}
                         value={item.key}
-                        style={{ color: '#fff', background: '#18a0fb' }}
+                        style={{ background: token.colorPrimary }}
                         dragOverlay
                       />
                     ))}

package/src/components/Designer/Sidebar/ListView/SelectableSortableItem.tsx

@@ -4,6 +4,7 @@ import { SchemaForUI } from '@pdfme/common';
 import { I18nContext } from '../../../../contexts';
 import Item from './Item';
 import { useMountStatus } from '../../../../hooks';
+import { theme } from 'antd';
 
 interface Props {
   isSelected: boolean;
@@ -25,6 +26,8 @@ const SelectableSortableItem = ({
   onMouseEnter,
   onMouseLeave,
 }: Props) => {
+  const { token } = theme.useToken();
+
   const i18n = useContext(I18nContext);
   const { setNodeRef, listeners, isDragging, isSorting, transform, transition } = useSortable({
     id: schema.id,
@@ -52,7 +55,7 @@ const SelectableSortableItem = ({
   }
 
   const selectedStyle = isSelected
-    ? { color: '#fff', background: '#18a0fb', opacity: isSorting || isDragging ? 0.5 : 1 }
+    ? { background: token.colorPrimary, opacity: isSorting || isDragging ? 0.5 : 1 }
     : ({} as React.CSSProperties);
 
   return (