[DON'T MERGE] feat: update workbench header styles

packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.styles.ts

@@ -1,46 +1,40 @@
 import { css } from 'emotion';
 import tokens from '@contentful/f36-tokens';
 
-export const getWorkbenchHeaderStyles = (hasBackButton = false) => ({
+export const getWorkbenchHeaderStyles = () => ({
   workbenchHeader: css([
     {
       display: 'flex',
       alignItems: 'center',
       flexShrink: 0,
       width: '100%',
-      height: '70px',
-      padding: `0 ${tokens.spacingL}`,
-      borderBottom: `1px solid ${tokens.gray300}`,
-      backgroundColor: tokens.gray100,
+      height: '56px',
+      padding: `${tokens.spacingM} ${tokens.spacingXs}`,
+      borderBottom: `1px solid ${tokens.gray200}`,
+      backgroundColor: tokens.colorWhite,
       zIndex: tokens.zIndexWorkbenchHeader,
       boxSizing: 'border-box',
     },
-    hasBackButton && { paddingLeft: 0 },
   ]),
   flexGrow: css({
     flexGrow: 1,
   }),
+  title: css({
+    color: tokens.gray900,
+  }),
   description: css({
-    color: tokens.gray700,
+    color: tokens.gray500,
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
     overflow: 'hidden',
     flexGrow: 1,
   }),
-  backButton: css({
-    borderRight: `1px solid ${tokens.gray200}`,
-    marginRight: tokens.spacingM,
-    borderRadius: 0,
-    height: '100%',
-    '& svg': {
-      fill: tokens.gray400,
-    },
-    '&:focus': {
-      boxShadow: `inset ${tokens.glowPrimary}`,
-    },
-    // This overwrite is necessary because the transparent button hover and the workbench header have the same bg color
-    '&:hover': {
-      backgroundColor: tokens.gray200,
-    },
+  separator: css({
+    backgroundColor: tokens.gray200,
+    height: '16px',
+    width: '1px',
+    display: 'inline',
+    transform: 'rotate3d(0, 0, 1, 18deg)',
+    margin: `0 ${tokens.spacing2Xs}`,
   }),
 });

packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.tsx

@@ -4,10 +4,10 @@ import React, {
   type ReactNode,
 } from 'react';
 import { cx } from 'emotion';
-import { Box, type CommonProps } from '@contentful/f36-core';
-import { Heading, Paragraph } from '@contentful/f36-typography';
+import { Flex, type CommonProps } from '@contentful/f36-core';
+import { Paragraph, Subheading } from '@contentful/f36-typography';
 import type { IconComponent } from '@contentful/f36-icon';
-import { ChevronLeftIcon } from '@contentful/f36-icons';
+import { ArrowBackwardIcon } from '@contentful/f36-icons';
 import { IconButton } from '@contentful/f36-button';
 
 import { getWorkbenchHeaderStyles } from './WorkbenchHeader.styles';
@@ -35,7 +35,7 @@ export const WorkbenchHeader = ({
   testId = 'cf-ui-workbench-header',
 }: WorkbenchHeaderProps) => {
   const hasBackButton = Boolean(onBack);
-  const styles = getWorkbenchHeaderStyles(hasBackButton);
+  const styles = getWorkbenchHeaderStyles();
   const iconComponent =
     Icon === undefined ? null : isValidElement(Icon) ? Icon : <Icon />;
 
@@ -47,6 +47,7 @@ export const WorkbenchHeader = ({
         <Paragraph
           className={styles.description}
           marginBottom="none"
+          marginLeft="spacingS"
           marginRight="spacingM"
         >
           {description}
@@ -62,33 +63,36 @@ export const WorkbenchHeader = ({
       data-test-id={testId}
     >
       {hasBackButton && (
-        <IconButton
-          aria-label="Back"
-          testId="workbench-back-btn"
-          variant="transparent"
-          className={styles.backButton}
-          onClick={() => onBack()}
-          icon={<ChevronLeftIcon size="large" variant="muted" />}
-        />
+        <>
+          <IconButton
+            aria-label="Back"
+            testId="workbench-back-btn"
+            variant="transparent"
+            onClick={() => onBack()}
+            size="small"
+            icon={<ArrowBackwardIcon variant="muted" />}
+          />
+          <div className={styles.separator} />
+        </>
       )}
 
-      {Icon && (
-        <Box marginRight="spacingM" display="inline-flex">
-          {iconComponent}
-        </Box>
-      )}
+      <Flex
+        alignItems="center"
+        flexGrow={!description ? '1' : '0'}
+        gap="spacingXs"
+        marginLeft="spacingS"
+        marginRight="spacingS"
+      >
+        {Icon && iconComponent}
 
-      {typeof title === 'string' ? (
-        <Heading
-          className={!description && styles.flexGrow}
-          marginBottom="none"
-          marginRight="spacingM"
-        >
-          {title}
-        </Heading>
-      ) : (
-        title
-      )}
+        {typeof title === 'string' ? (
+          <Subheading className={styles.title} marginBottom="none">
+            {title}
+          </Subheading>
+        ) : (
+          title
+        )}
+      </Flex>
 
       {description && renderDescription(description)}
 

packages/components/workbench/stories/Workbench.stories.tsx

@@ -302,7 +302,7 @@ export const HeaderOverview = () => {
             title={
               <Flex alignItems="center" gap="spacingXs">
                 <Heading marginBottom="none">Page title</Heading>{' '}
-                <HelpCircleIcon />
+                <HelpCircleIcon size="tiny" />
               </Flex>
             }
           />
@@ -315,7 +315,7 @@ export const HeaderOverview = () => {
 
           <Workbench.Header
             title="Page title"
-            description={<HelpCircleIcon variant="muted" />}
+            description={<HelpCircleIcon variant="muted" size="tiny" />}
           />
         </span>