refactor: migrate deprecated atlaskit xcss

package.json

@@ -71,6 +71,7 @@
     "@atlaskit/badge": "18.3.3",
     "@atlaskit/button": "23.9.4",
     "@atlaskit/checkbox": "17.3.1",
+    "@atlaskit/css": "^0.19.1",
     "@atlaskit/css-reset": "7.3.11",
     "@atlaskit/form": "15.3.1",
     "@atlaskit/heading": "5.2.19",

src/renderer/components/Sidebar.tsx

@@ -9,7 +9,7 @@ import ListBulletedIcon from '@atlaskit/icon/core/list-bulleted';
 import NotificationIcon from '@atlaskit/icon/core/notification';
 import RefreshIcon from '@atlaskit/icon/core/refresh';
 import SettingsIcon from '@atlaskit/icon/core/settings';
-import { Box, Stack } from '@atlaskit/primitives';
+import { Box, Stack } from '@atlaskit/primitives/compiled';
 import Spinner from '@atlaskit/spinner';
 import Toggle from '@atlaskit/toggle';
 import { token, useThemeObserver } from '@atlaskit/tokens';

src/renderer/components/filters/FilterSection.tsx

@@ -4,7 +4,7 @@ import Badge from '@atlaskit/badge';
 import Checkbox from '@atlaskit/checkbox';
 import Heading from '@atlaskit/heading';
 import { IconTile } from '@atlaskit/icon';
-import { Box, Inline, Stack } from '@atlaskit/primitives';
+import { Box, Inline, Stack } from '@atlaskit/primitives/compiled';
 
 import { AppContext } from '../../context/App';
 

src/renderer/components/layout/EmojiSplash.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 
-import { Box, Stack } from '@atlaskit/primitives';
+import { Box, Stack } from '@atlaskit/primitives/compiled';
 
 import { EmojiText } from '../primitives/EmojiText';
 

src/renderer/components/notifications/AccountNotifications.tsx

@@ -12,6 +12,7 @@ import { useTranslation } from 'react-i18next';
 import Avatar, { AvatarItem } from '@atlaskit/avatar';
 import Badge from '@atlaskit/badge';
 import Button, { IconButton } from '@atlaskit/button/new';
+import { cssMap, cx } from '@atlaskit/css';
 import CrossIcon from '@atlaskit/icon/core/cross';
 import StrokeWeightLargeIcon from '@atlaskit/icon/core/stroke-weight-large';
 import { BitbucketIcon } from '@atlaskit/logo';
@@ -22,7 +23,8 @@ import Modal, {
   ModalTitle,
   ModalTransition,
 } from '@atlaskit/modal-dialog';
-import { Box, Flex, Grid, Inline, Stack, xcss } from '@atlaskit/primitives';
+import { Box, Flex, Grid, Inline, Stack } from '@atlaskit/primitives/compiled';
+import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
 
 import { Constants } from '../../constants';
@@ -64,17 +66,18 @@ export const AccountNotifications: FC<AccountNotificationsProps> = (
   const [isOpen, setIsOpen] = useState(false);
   const openModal = useCallback(() => setIsOpen(true), []);
   const closeModal = useCallback(() => setIsOpen(false), []);
-  const gridStyles = xcss({
-    width: '100%',
-  });
 
-  const closeContainerStyles = xcss({
-    gridArea: 'close',
-  });
+  // const gridStyles = xcss({
+  //   width: '100%',
+  // });
 
-  const titleContainerStyles = xcss({
-    gridArea: 'title',
-  });
+  // const closeContainerStyles = xcss({
+  //   gridArea: 'close',
+  // });
+
+  // const titleContainerStyles = xcss({
+  //   gridArea: 'title',
+  // });
 
   const sortedNotifications = useMemo(
     () => [...notifications].sort((a, b) => a.order - b.order),
@@ -109,19 +112,21 @@ export const AccountNotifications: FC<AccountNotificationsProps> = (
   );
   const ChevronIcon = Chevron.icon;
 
-  const boxStyles = xcss({
-    transitionDuration: '200ms',
+  const styles = cssMap({
+    box: {
+      transitionDuration: '200ms',
 
-    backgroundColor: props.error
-      ? 'color.background.accent.red.subtler'
-      : isLightMode()
-        ? 'color.background.accent.blue.subtler'
-        : 'color.background.accent.gray.subtler',
+      backgroundColor: props.error
+        ? token('color.background.accent.red.subtler')
+        : isLightMode()
+          ? token('color.background.accent.blue.subtler')
+          : token('color.background.accent.gray.subtler'),
 
-    ':hover': {
-      backgroundColor: isLightMode()
-        ? 'color.background.accent.blue.subtler.hovered'
-        : 'color.background.accent.gray.subtler.hovered',
+      '&:hover': {
+        backgroundColor: isLightMode()
+          ? token('color.background.accent.blue.subtler.hovered')
+          : token('color.background.accent.gray.subtler.hovered'),
+      },
     },
   });
 
@@ -132,7 +137,7 @@ export const AccountNotifications: FC<AccountNotificationsProps> = (
         onClick={toggleAccountNotifications}
         paddingBlock="space.050"
         paddingInline="space.100"
-        xcss={boxStyles}
+        xcss={cx(styles.box)}
       >
         <Flex alignItems="center" justifyContent="space-between">
           <Inline alignBlock="center" space="space.100">
@@ -252,10 +257,11 @@ export const AccountNotifications: FC<AccountNotificationsProps> = (
             <ModalHeader>
               <Grid
                 gap="space.200"
-                templateAreas={['title close']}
-                xcss={gridStyles}
+                // templateAreas={['title close']}
+                // xcss={gridStyles}
               >
-                <Flex justifyContent="end" xcss={closeContainerStyles}>
+                <Flex justifyContent="end">
+                  {/* <Flex justifyContent="end" xcss={closeContainerStyles}> */}
                   <IconButton
                     appearance="subtle"
                     icon={CrossIcon}
@@ -264,7 +270,8 @@ export const AccountNotifications: FC<AccountNotificationsProps> = (
                     testId="account-mark-as-read-close"
                   />
                 </Flex>
-                <Flex justifyContent="start" xcss={titleContainerStyles}>
+                <Flex justifyContent="start">
+                  {/* <Flex justifyContent="start" xcss={titleContainerStyles}> */}
                   <ModalTitle appearance="warning">
                     {t('common.are_you_sure')}
                   </ModalTitle>

src/renderer/components/notifications/NotificationRow.tsx

@@ -5,7 +5,7 @@ import Avatar, { type AppearanceType } from '@atlaskit/avatar';
 import AvatarGroup from '@atlaskit/avatar-group';
 import { IconButton } from '@atlaskit/button/new';
 import StrokeWeightLargeIcon from '@atlaskit/icon/core/stroke-weight-large';
-import { Box, Inline, Stack, Text } from '@atlaskit/primitives';
+import { Box, Inline, Stack, Text } from '@atlaskit/primitives/compiled';
 import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
 

src/renderer/components/notifications/ProductNotifications.tsx

@@ -3,8 +3,10 @@ import { useTranslation } from 'react-i18next';
 
 import Badge from '@atlaskit/badge';
 import Button, { IconButton } from '@atlaskit/button/new';
+import { cssMap, cx } from '@atlaskit/css';
 import StrokeWeightLargeIcon from '@atlaskit/icon/core/stroke-weight-large';
-import { Box, Flex, Inline, Stack, xcss } from '@atlaskit/primitives';
+import { Box, Flex, Inline, Stack } from '@atlaskit/primitives/compiled';
+import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
 
 import { AppContext } from '../../context/App';
@@ -40,17 +42,19 @@ export const ProductNotifications: FC<ProductNotificationsProps> = ({
   const Chevron = getChevronDetails(true, showProductNotifications, 'product');
   const ChevronIcon = Chevron.icon;
 
-  const boxStyles = xcss({
-    transitionDuration: '200ms',
+  const styles = cssMap({
+    box: {
+      transitionDuration: '200ms',
 
-    backgroundColor: isLightMode()
-      ? 'color.background.accent.blue.subtlest'
-      : 'color.background.accent.gray.subtlest',
-
-    ':hover': {
       backgroundColor: isLightMode()
-        ? 'color.background.accent.blue.subtlest.hovered'
-        : 'color.background.accent.gray.subtlest.hovered',
+        ? token('color.background.accent.blue.subtlest')
+        : token('color.background.accent.gray.subtlest'),
+
+      '&:hover': {
+        backgroundColor: isLightMode()
+          ? token('color.background.accent.blue.subtlest.hovered')
+          : token('color.background.accent.gray.subtlest.hovered'),
+      },
     },
   });
 
@@ -62,7 +66,7 @@ export const ProductNotifications: FC<ProductNotificationsProps> = ({
         paddingBlock="space.050"
         paddingInlineEnd="space.100"
         paddingInlineStart="space.050"
-        xcss={boxStyles}
+        xcss={cx(styles.box)}
       >
         <Flex alignItems="center" justifyContent="space-between">
           <Tooltip

src/renderer/components/primitives/Footer.tsx

@@ -1,22 +1,26 @@
 import type { FC, ReactNode } from 'react';
 
-import { Box, Flex, xcss } from '@atlaskit/primitives';
+import { cssMap, cx } from '@atlaskit/css';
+import { Box, Flex } from '@atlaskit/primitives/compiled';
+import { token } from '@atlaskit/tokens';
 
 interface FooterProps {
   children: ReactNode;
   justify: 'end' | 'space-between';
 }
 
 export const Footer: FC<FooterProps> = (props: FooterProps) => {
-  const footerBoxStyles = xcss({
-    backgroundColor: 'color.background.accent.gray.subtlest',
+  const styles = cssMap({
+    footerBox: {
+      backgroundColor: token('color.background.accent.gray.subtlest'),
+    },
   });
 
   return (
     <Box
       paddingBlock="space.050"
       paddingInline="space.200"
-      xcss={footerBoxStyles}
+      xcss={cx(styles.footerBox)}
     >
       <Flex justifyContent={props.justify}>{props.children}</Flex>
     </Box>

src/renderer/components/primitives/Header.tsx

@@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom';
 import { IconButton } from '@atlaskit/button/new';
 import Heading from '@atlaskit/heading';
 import ArrowLeftIcon from '@atlaskit/icon/core/arrow-left';
-import { Box, Inline } from '@atlaskit/primitives';
+import { Box, Inline } from '@atlaskit/primitives/compiled';
 import Tooltip from '@atlaskit/tooltip';
 
 import { AppContext } from '../../context/App';

src/renderer/components/settings/AppearanceSettings.tsx

@@ -2,15 +2,16 @@ import { type FC, useCallback, useContext, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { IconButton, SplitButton } from '@atlaskit/button/new';
+import { cssMap, cx } from '@atlaskit/css';
 import Heading from '@atlaskit/heading';
 import RetryIcon from '@atlaskit/icon/core/retry';
 import ZoomInIcon from '@atlaskit/icon/core/zoom-in';
 import ZoomOutIcon from '@atlaskit/icon/core/zoom-out';
-import { Box, Inline, Stack, Text, xcss } from '@atlaskit/primitives';
+import { Box, Inline, Stack, Text } from '@atlaskit/primitives/compiled';
 import { RadioGroup } from '@atlaskit/radio';
 import type { OptionsPropType } from '@atlaskit/radio/dist/types/types';
 import Select from '@atlaskit/select';
-import { setGlobalTheme } from '@atlaskit/tokens';
+import { setGlobalTheme, token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
 
 import { Theme } from '../../../shared/theme';
@@ -38,8 +39,10 @@ export const AppearanceSettings: FC = () => {
 
   const { t } = useTranslation();
 
-  const zoomBoxStyles = xcss({
-    backgroundColor: 'color.background.accent.gray.subtlest',
+  const styles = cssMap({
+    zoomBox: {
+      backgroundColor: token('color.background.accent.gray.subtlest'),
+    },
   });
 
   useEffect(() => {
@@ -124,7 +127,7 @@ export const AppearanceSettings: FC = () => {
           <Text id="zoom-label" weight="medium">
             {t('settings.appearance.zoom')}:
           </Text>
-          <Inline xcss={zoomBoxStyles}>
+          <Inline xcss={cx(styles.zoomBox)}>
             <SplitButton spacing="compact">
               <Inline alignBlock="center">
                 <Box paddingInline="space.150">

src/renderer/components/settings/NotificationSettings.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { Checkbox } from '@atlaskit/checkbox';
 import Heading from '@atlaskit/heading';
 import InlineMessage from '@atlaskit/inline-message';
-import { Inline, Stack } from '@atlaskit/primitives';
+import { Inline, Stack } from '@atlaskit/primitives/compiled';
 
 import { APPLICATION } from '../../../shared/constants';
 

src/renderer/components/settings/SettingsFooter.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import Button, { IconButton } from '@atlaskit/button/new';
 import CrossCircleIcon from '@atlaskit/icon/core/cross-circle';
 import PeopleGroupIcon from '@atlaskit/icon/core/people-group';
-import { Inline } from '@atlaskit/primitives';
+import { Inline } from '@atlaskit/primitives/compiled';
 import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
 

src/renderer/components/settings/SettingsReset.tsx

@@ -10,31 +10,31 @@ import Modal, {
   ModalTitle,
   ModalTransition,
 } from '@atlaskit/modal-dialog';
-import { Flex, Grid, Inline, xcss } from '@atlaskit/primitives';
+import { Flex, Grid, Inline } from '@atlaskit/primitives/compiled';
 
 import { APPLICATION } from '../../../shared/constants';
 
 import { AppContext } from '../../context/App';
 
-const gridStyles = xcss({
-  width: '100%',
-});
-
-const closeContainerStyles = xcss({
-  gridArea: 'close',
-});
-
-const titleContainerStyles = xcss({
-  gridArea: 'title',
-});
-
 export const SettingsReset: FC = () => {
   const { t } = useTranslation();
   const { resetSettings } = useContext(AppContext);
   const [isOpen, setIsOpen] = useState(false);
   const openModal = useCallback(() => setIsOpen(true), []);
   const closeModal = useCallback(() => setIsOpen(false), []);
 
+  // const gridStyles = xcss({
+  //   width: '100%',
+  // });
+
+  // const closeContainerStyles = xcss({
+  //   gridArea: 'close',
+  // });
+
+  // const titleContainerStyles = xcss({
+  //   gridArea: 'title',
+  // });
+
   return (
     <Inline alignInline="center">
       <Button
@@ -52,10 +52,11 @@ export const SettingsReset: FC = () => {
             <ModalHeader>
               <Grid
                 gap="space.200"
-                templateAreas={['title close']}
-                xcss={gridStyles}
+                // templateAreas={['title close']}
+                // xcss={gridStyles}
               >
-                <Flex justifyContent="end" xcss={closeContainerStyles}>
+                <Flex justifyContent="end">
+                  {/* <Flex justifyContent="end" xcss={closeContainerStyles}> */}
                   <IconButton
                     appearance="subtle"
                     icon={CrossIcon}
@@ -64,7 +65,8 @@ export const SettingsReset: FC = () => {
                     testId="settings-reset-close"
                   />
                 </Flex>
-                <Flex justifyContent="start" xcss={titleContainerStyles}>
+                <Flex justifyContent="start">
+                  {/* <Flex justifyContent="start" xcss={titleContainerStyles}> */}
                   <ModalTitle appearance="danger">
                     {t('settings.reset.title')}
                   </ModalTitle>