docs(README): information about migration to emotion

README.md

@@ -84,6 +84,69 @@ This is a problem that occurred after the last update of Storybook and related p
 
 **Be sure not to commit changes to this file along with other changes made to components.**
 
+## Styling the components aka migration to `@emotion`
+We are transitioning our design system components from SCSS to `@emotion` for styling. This change aims to enhance maintainability, improve performance, and provide a more seamless styling approach within React.
+
+### What Changes?
+Styles previously written in `.scss` files are now defined using Emotion’s css API.
+Components no longer import `.scss` files but instead define styles within `styles.ts` files.
+
+### How to Use the Updated Components?
+You don’t need to make significant changes in consuming applications—components will still expose the same props. However, if you were relying on SCSS class names for custom overrides, you might need to adjust your approach using Emotion’s className prop or theme overrides.
+
+### Example: Before & After
+
+#### Before
+```tsx
+import styles from './Accordion.module.scss';
+...
+className: cx(styles[`${baseClass}__label`], {
+  [styles[`${baseClass}__label--promo`]]: isPromo,
+}),
+...
+```
+```scss
+...
+&__label {
+  margin: 0;
+  padding: var(--spacing-5) var(--spacing-12) var(--spacing-5)
+    var(--spacing-5);
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &--promo {
+    padding: var(--spacing-6) var(--spacing-12) var(--spacing-6)
+      var(--spacing-6);
+  }
+}
+...
+```
+
+#### After
+```tsx
+import * as styles from './styles';
+...
+className: styles.label(isPromo),
+...
+```
+```tsx
+export const label = (isPromo?: boolean) => css`
+  margin: 0;
+  ${isPromo
+    ? `
+    padding: var(${SpacingToken.Spacing6}) var(${SpacingToken.Spacing12}) var(${SpacingToken.Spacing6}) var(${SpacingToken.Spacing6});
+  `
+    : `
+    padding: var(${SpacingToken.Spacing5}) var(${SpacingToken.Spacing12}) var(${SpacingToken.Spacing5}) var(${SpacingToken.Spacing5});
+  `}
+  &:hover {
+    cursor: pointer;
+  }
+`;
+```
+
 ## Contributing
 
 The guide that describes the contribution process is available [here](./docs/CONTRIBUTION.md).