[FX-5544] Migrate Logo to TailwindCSS

.changeset/quiet-cheetahs-collect.md

@@ -0,0 +1,9 @@
+---
+'@toptal/picasso-logo': major
+'@toptal/picasso': patch
+---
+
+### Logo
+
+- migrate to TailwindCSS, material-ui@4 is no longer required for this package
+- make @toptal/picasso-tailwind-merge a peer dependency

packages/base/Logo/package.json

@@ -23,15 +23,14 @@
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
     "@toptal/picasso-icons": "1.6.0",
-    "@toptal/picasso-utils": "1.0.3",
-    "classnames": "^2.5.1"
+    "@toptal/picasso-utils": "1.0.3"
   },
   "sideEffects": [
     "**/styles.ts",
     "**/styles.js"
   ],
   "peerDependencies": {
-    "@material-ui/core": "4.12.4",
+    "@toptal/picasso-tailwind-merge": "^2.0.0",
     "react": ">=16.12.0 < 19.0.0"
   },
   "exports": {

packages/base/Logo/src/Logo/Logo.tsx

@@ -1,16 +1,14 @@
 import React, { forwardRef } from 'react'
-import cx from 'classnames'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 import type { BaseProps } from '@toptal/picasso-shared'
 import {
   Logo as LogoIcon,
   LogoEmblem as LogoEmblemIcon,
 } from '@toptal/picasso-icons'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
 
-import styles from './styles'
+import { colorClass } from './styles'
 
-type VariantType = 'default' | 'white' | 'black' | 'grey' | 'blue'
+export type VariantType = 'default' | 'white' | 'black' | 'grey' | 'blue'
 
 export interface Props extends BaseProps {
   /** Whether logo should be shown as TT emblem or full word mark */
@@ -19,8 +17,6 @@ export interface Props extends BaseProps {
   variant?: VariantType
 }
 
-const useStyles = makeStyles<Theme>(styles, { name: 'PicassoLogo' })
-
 export const Logo = forwardRef<SVGSVGElement, Props>(function Logo(props, ref) {
   const {
     emblem,
@@ -30,15 +26,16 @@ export const Logo = forwardRef<SVGSVGElement, Props>(function Logo(props, ref) {
     'data-testid': testId,
   } = props
 
-  const classes = useStyles()
-
-  const colorClass = classes[variant]
   const LogoComponent = emblem ? LogoEmblemIcon : LogoIcon
 
   return (
     <LogoComponent
       ref={ref}
-      className={cx(classes.root, colorClass, className)}
+      className={twMerge(
+        'text-[1.875rem] align-baseline',
+        colorClass[variant],
+        className
+      )}
       style={style}
       data-testid={testId}
     />

packages/base/Logo/src/Logo/styles.ts

@@ -1,36 +1,11 @@
-import type { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/core/styles'
+import type { VariantType } from './Logo'
 
-export default ({ palette }: Theme) =>
-  createStyles({
-    root: {
-      fontSize: '1.875rem',
-      verticalAlign: 'baseline',
-    },
-    default: {
-      color: palette.blue.main,
-      '--logo-text-color': palette.common.black,
-      '--logo-emblem-color': palette.blue.main,
-    },
-    blue: {
-      // deprecated backward-compatible variant with default
-      color: palette.blue.main,
-      '--logo-text-color': palette.common.black,
-      '--logo-emblem-color': palette.blue.main,
-    },
-    white: {
-      color: palette.common.white,
-      '--logo-text-color': palette.common.white,
-      '--logo-emblem-color': palette.common.white,
-    },
-    black: {
-      color: palette.common.black,
-      '--logo-text-color': palette.common.black,
-      '--logo-emblem-color': palette.common.black,
-    },
-    grey: {
-      color: palette.grey.darker,
-      '--logo-text-color': palette.grey.darker,
-      '--logo-emblem-color': palette.grey.darker,
-    },
-  })
+export const colorClass: Record<VariantType, string> = {
+  default:
+    'text-blue-500 [--logo-text-color:black] [--logo-emblem-color:#204ECF]',
+  // deprecated backward-compatible variant with default
+  blue: 'text-blue-500 [--logo-text-color:black] [--logo-emblem-color:#204ECF]',
+  white: 'text-white [--logo-text-color:white] [--logo-emblem-color:white]',
+  black: 'text-black [--logo-text-color:black] [--logo-emblem-color:black]',
+  grey: 'text-graphite-800 [--logo-text-color:#262D3D] [--logo-emblem-color:#262D3D]',
+}

packages/base/Logo/tsconfig.json

@@ -2,5 +2,9 @@
   "extends": "../../../tsconfig.base.json",
   "compilerOptions": { "outDir": "dist-package" },
   "include": ["src"],
-  "references": [{ "path": "../Icons" }, { "path": "../Utils" }]
+  "references": [
+    { "path": "../../picasso-tailwind-merge" },
+    { "path": "../Icons" },
+    { "path": "../Utils" }
+  ]
 }

packages/base/Page/src/PageTopBar/__snapshots__/test.tsx.snap

@@ -172,7 +172,7 @@ exports[`Page.TopBar render with link 1`] = `
                 href="https://www.toptal.com"
               >
                 <svg
-                  class="PicassoSvgLogoEmblem-root PicassoLogo-root PicassoLogo-white PicassoTopBar-logoEmblem"
+                  class="PicassoSvgLogoEmblem-root text-[1.875rem] align-baseline text-white [--logo-text [--logo-emblem PicassoTopBar-logoEmblem"
                   style="min-width: 16px; min-height: 16px;"
                   viewBox="0 0 21 30"
                 >
@@ -182,7 +182,7 @@ exports[`Page.TopBar render with link 1`] = `
                   />
                 </svg>
                 <svg
-                  class="PicassoSvgLogo-root PicassoLogo-root PicassoLogo-white PicassoTopBar-logo"
+                  class="PicassoSvgLogo-root text-[1.875rem] align-baseline text-white [--logo-text [--logo-emblem PicassoTopBar-logo"
                   style="min-width: 16px; min-height: 16px;"
                   viewBox="0 0 109 30"
                 >
@@ -293,7 +293,7 @@ exports[`Page.TopBar renders 1`] = `
                 </div>
               </div>
               <svg
-                class="PicassoSvgLogoEmblem-root PicassoLogo-root PicassoLogo-white PicassoTopBar-logoEmblem"
+                class="PicassoSvgLogoEmblem-root text-[1.875rem] align-baseline text-white [--logo-text [--logo-emblem PicassoTopBar-logoEmblem"
                 style="min-width: 16px; min-height: 16px;"
                 viewBox="0 0 21 30"
               >
@@ -303,7 +303,7 @@ exports[`Page.TopBar renders 1`] = `
                 />
               </svg>
               <svg
-                class="PicassoSvgLogo-root PicassoLogo-root PicassoLogo-white PicassoTopBar-logo"
+                class="PicassoSvgLogo-root text-[1.875rem] align-baseline text-white [--logo-text [--logo-emblem PicassoTopBar-logo"
                 style="min-width: 16px; min-height: 16px;"
                 viewBox="0 0 109 30"
               >

packages/base/Page/src/SidebarLogo/__snapshots__/test.tsx.snap

@@ -9,7 +9,7 @@ exports[`SidebarLogo renders 1`] = `
       class="mb-2 ml-8 PicassoSidebarLogo-root"
     >
       <svg
-        class="PicassoSvgLogo-root PicassoLogo-root PicassoLogo-default"
+        class="PicassoSvgLogo-root text-[1.875rem] align-baseline text-blue [--logo-text [--logo-emblem"
         style="min-width: 16px; min-height: 16px;"
         viewBox="0 0 109 30"
       >