feat: typography updates (#2740)

* Change title treatment to semibold * Change deprecated headline size 3 mapping to s * adjust weight of trailing content and add gap between the label and details * Improve visual hierarchy of group headlines * update values of some tokens * Update ListItem story * Migrate overlooked typography sizes --------- Co-authored-by: Connor Bär <[email protected]>
sumup-oss · Oct 29, 2024 · c15abee · c15abee
1 parent 4a2f1a6
commit c15abee
Show file tree

Hide file tree

Showing 24 changed files with 52 additions and 30 deletions.
diff --git a/.storybook/components/Icons.tsx b/.storybook/components/Icons.tsx
@@ -151,7 +151,7 @@ export function Icons() {
           groupBy(activeIcons, 'category'),
         ).map(([category, items]) => (
           <section key={category} className={classes.category}>
-            <Headline as="h2" size="two" id={slugify(category)}>
+            <Headline as="h2" size="m" id={slugify(category)}>
               {category}
             </Headline>
             <div className={classes.list}>

diff --git a/.storybook/components/Statuses.tsx b/.storybook/components/Statuses.tsx
@@ -63,12 +63,7 @@ export function Status({
         <Badge variant={variant}>{label}</Badge>
       </LinkTo>
       {children && (
-        <Body
-          size="two"
-          as="span"
-          className={classes.description}
-          variant="subtle"
-        >
+        <Body size="s" as="span" className={classes.description} color="subtle">
           {children}
         </Body>
       )}

diff --git a/.storybook/components/Teaser.tsx b/.storybook/components/Teaser.tsx
@@ -27,7 +27,7 @@ interface TeaserProps {
 export function Teaser({ title, children }: TeaserProps) {
   return (
     <Card className={classes.base}>
-      <Headline as="h2" size="three" id={slugify(title)}>
+      <Headline as="h2" size="s" id={slugify(title)}>
         {title}
       </Headline>
 

diff --git a/.storybook/components/Theme.tsx b/.storybook/components/Theme.tsx
@@ -61,7 +61,7 @@ function CopyButton({ name }: { name: CustomPropertyName }) {
   return (
     <Anchor
       style={{ marginLeft: '1rem' }}
-      size="two"
+      size="s"
       onClick={() =>
         navigator.clipboard
           .writeText(name)

diff --git a/packages/circuit-ui/components/Badge/Badge.module.css b/packages/circuit-ui/components/Badge/Badge.module.css
@@ -2,7 +2,7 @@
   display: inline-block;
   padding: 2px var(--cui-spacings-byte);
   font-size: var(--cui-body-s-font-size);
-  font-weight: var(--cui-font-weight-bold);
+  font-weight: var(--cui-font-weight-semibold);
   line-height: var(--cui-body-s-line-height);
   text-align: center;
   letter-spacing: 0.25px;

diff --git a/packages/circuit-ui/components/Button/base.module.css b/packages/circuit-ui/components/Button/base.module.css
@@ -7,7 +7,7 @@
   height: auto;
   margin: 0;
   font-size: var(--cui-body-m-font-size);
-  font-weight: var(--cui-font-weight-bold);
+  font-weight: var(--cui-font-weight-semibold);
   text-align: center;
   text-decoration: none;
   cursor: pointer;

diff --git a/packages/circuit-ui/components/Headline/Headline.mdx b/packages/circuit-ui/components/Headline/Headline.mdx
@@ -51,7 +51,7 @@ Beyond the `<h1>`, heading levels should be nested hierarchically to make them e
 
 Don't skip heading levels: an `<h4>` should not directly follow an `<h2>`.
 
-In contrast, skipping headline _sizes_ and jumping from e.g. `<Headline size="two" as="h2" />` to `<Headline size="four" as="h4" />` does not constitute an accessibility issue, although we recommend keeping sizes visually consistent across pages.
+In contrast, skipping headline _sizes_ and jumping from e.g. `<Headline size="l" as="h2" />` to `<Headline size="s" as="h4" />` does not constitute an accessibility issue, although we recommend keeping sizes visually consistent across pages.
 
 #### Avoid sections without headings
 

diff --git a/packages/circuit-ui/components/Headline/Headline.tsx b/packages/circuit-ui/components/Headline/Headline.tsx
@@ -57,7 +57,7 @@ export interface HeadlineProps extends HTMLAttributes<HTMLHeadingElement> {
 const deprecatedSizeMap: Record<string, string> = {
   'one': 'l',
   'two': 'm',
-  'three': 'm',
+  'three': 's',
   'four': 's',
 };
 

diff --git a/packages/circuit-ui/components/ListItem/ListItem.module.css b/packages/circuit-ui/components/ListItem/ListItem.module.css
@@ -103,6 +103,7 @@ button.base:active {
   display: flex;
   flex: auto;
   flex-direction: column;
+  gap: var(--cui-spacings-bit);
   align-items: flex-start;
   min-width: 0;
 }
@@ -125,6 +126,7 @@ button.base:active {
   display: flex;
   flex: none;
   flex-direction: column;
+  gap: var(--cui-spacings-bit);
   align-items: flex-end;
   align-self: stretch;
   justify-content: center;

diff --git a/packages/circuit-ui/components/ListItem/ListItem.stories.tsx b/packages/circuit-ui/components/ListItem/ListItem.stories.tsx
@@ -67,7 +67,8 @@ const Details = (
     />
     <Body
       size="s"
-      weight="bold"
+      weight="semibold"
+      color="success"
       style={{ marginRight: 'var(--cui-spacings-bit)' }}
     >
       {item.status}

diff --git a/packages/circuit-ui/components/ListItem/ListItem.tsx b/packages/circuit-ui/components/ListItem/ListItem.tsx
@@ -199,7 +199,7 @@ export const ListItem = forwardRef<
             >
               <div className={classes.chevron}>
                 {isString(trailingLabel) ? (
-                  <Body size="m" weight="bold">
+                  <Body size="m" weight="semibold">
                     {trailingLabel}
                   </Body>
                 ) : (

diff --git a/packages/circuit-ui/components/NotificationInline/NotificationInline.tsx b/packages/circuit-ui/components/NotificationInline/NotificationInline.tsx
@@ -163,7 +163,10 @@ export const NotificationInline = forwardRef<
           <span className={utilClasses.hideVisually}>{iconLabel}</span>
           <div className={classes.content}>
             {headline && (
-              <Body weight="bold" as={isString(headline) ? 'h3' : headline.as}>
+              <Body
+                weight="semibold"
+                as={isString(headline) ? 'h3' : headline.as}
+              >
                 {isString(headline) ? headline : headline.label}
               </Body>
             )}

diff --git a/packages/circuit-ui/components/NotificationModal/NotificationModal.tsx b/packages/circuit-ui/components/NotificationModal/NotificationModal.tsx
@@ -151,7 +151,7 @@ export const NotificationModal: ModalComponent<NotificationModalProps> = ({
         </CloseButton>
       )}
       <NotificationImage image={image} />
-      <Headline as="h2" size="m" className={classes.headline}>
+      <Headline as="h2" size="s" className={classes.headline}>
         {headline}
       </Headline>
       {body && <Body>{body}</Body>}

diff --git a/packages/circuit-ui/components/NotificationToast/NotificationToast.tsx b/packages/circuit-ui/components/NotificationToast/NotificationToast.tsx
@@ -123,7 +123,7 @@ export function NotificationToast({
         <span className={utilClasses.hideVisually}>{iconLabel}</span>
         <div className={classes.content}>
           {headline && (
-            <Body weight="bold" as="h3">
+            <Body weight="semibold" as="h3">
               {headline}
             </Body>
           )}

diff --git a/...s/circuit-ui/components/SideNavigation/components/DesktopNavigation/DesktopNavigation.tsx b/...s/circuit-ui/components/SideNavigation/components/DesktopNavigation/DesktopNavigation.tsx
@@ -83,7 +83,7 @@ export function DesktopNavigation({
           aria-label={secondaryNavigationLabel}
         >
           <Skeleton className={classes.headline} as="div">
-            <Headline as="h2" size="m">
+            <Headline as="h2" size="s">
               {activePrimaryLink?.label}
             </Headline>
           </Skeleton>

diff --git a/.../circuit-ui/components/SideNavigation/components/SecondaryLinks/SecondaryLinks.module.css b/.../circuit-ui/components/SideNavigation/components/SecondaryLinks/SecondaryLinks.module.css
@@ -2,6 +2,10 @@
   list-style: none;
 }
 
+.headline {
+  text-transform: uppercase;
+}
+
 .anchor {
   flex-wrap: wrap;
   padding: var(--cui-spacings-mega) var(--cui-spacings-giga);

diff --git a/packages/circuit-ui/components/SideNavigation/components/SecondaryLinks/SecondaryLinks.tsx b/packages/circuit-ui/components/SideNavigation/components/SecondaryLinks/SecondaryLinks.tsx
@@ -24,7 +24,6 @@ import {
   useFocusList,
   type FocusProps,
 } from '../../../../hooks/useFocusList/index.js';
-import { Headline } from '../../../Headline/index.js';
 import { Body } from '../../../Body/index.js';
 import { Badge } from '../../../Badge/index.js';
 import { useComponents } from '../../../ComponentsContext/index.js';
@@ -77,9 +76,15 @@ function SecondaryGroup({
     <li>
       {label && (
         <Skeleton className={classes['group-headline']} as="div">
-          <Headline as="h3" size="s">
+          <Body
+            color="subtle"
+            className={classes.headline}
+            weight="semibold"
+            as="h3"
+            size="s"
+          >
             {label}
-          </Headline>
+          </Body>
         </Skeleton>
       )}
       <ul role="list" className={classes.list}>

diff --git a/packages/circuit-ui/components/Tabs/components/Tab/Tab.module.css b/packages/circuit-ui/components/Tabs/components/Tab/Tab.module.css
@@ -40,6 +40,7 @@
 
 .base[aria-selected="true"] {
   position: relative;
+  font-weight: var(--cui-font-weight-semibold);
   color: var(--cui-fg-normal);
 }
 

diff --git a/packages/circuit-ui/components/TopNavigation/components/UtilityLinks/UtilityLinks.tsx b/packages/circuit-ui/components/TopNavigation/components/UtilityLinks/UtilityLinks.tsx
@@ -87,7 +87,7 @@ function UtilityLink({
         <Icon aria-hidden="true" size="24" />
       </Skeleton>
       <Skeleton>
-        <Body as="span" className={classes.label}>
+        <Body as="span" className={classes.label} weight="semibold">
           {label}
         </Body>
       </Skeleton>

diff --git a/packages/design-tokens/themes/shared.ts b/packages/design-tokens/themes/shared.ts
@@ -78,12 +78,12 @@ export const shared = [
   },
   {
     name: '--cui-font-weight-semibold',
-    value: '550',
+    value: '560',
     type: 'fontWeight',
   },
   {
     name: '--cui-font-weight-bold',
-    value: '650',
+    value: '630',
     type: 'fontWeight',
   },
   /* Letter spacing */
@@ -213,7 +213,7 @@ export const shared = [
   },
   {
     name: '--cui-headline-m-font-size',
-    value: '1.375rem',
+    value: '1.5rem',
     type: 'dimension',
   },
   {

diff --git a/packages/eslint-plugin-circuit-ui/no-renamed-props/index.ts b/packages/eslint-plugin-circuit-ui/no-renamed-props/index.ts
@@ -255,7 +255,7 @@ const configs: (Config & { components: string[] })[] = [
   },
   {
     type: 'values',
-    components: ['Title', 'Display', 'Headline'],
+    components: ['Title', 'Display'],
     prop: 'size',
     values: {
       one: 'l',
@@ -264,6 +264,17 @@ const configs: (Config & { components: string[] })[] = [
       four: 's',
     },
   },
+  {
+    type: 'values',
+    components: ['Headline'],
+    prop: 'size',
+    values: {
+      one: 'l',
+      two: 'm',
+      three: 's',
+      four: 's',
+    },
+  },
   {
     type: 'values',
     components: ['Anchor', 'Body', 'List'],

diff --git a/templates/astro/src/pages/index.astro b/templates/astro/src/pages/index.astro
@@ -7,7 +7,7 @@ const title = 'Welcome to Circuit UI + Astro';
 ---
 
 <Root title={title}>
-  <Display as="h1" size="three">
+  <Display as="h1" size="m">
     {title}
   </Display>
 

diff --git a/templates/nextjs/template/app/page.tsx b/templates/nextjs/template/app/page.tsx
@@ -14,7 +14,7 @@ export default function Page() {
   return (
     <div className={styles.grid}>
       <main className={styles.main}>
-        <Display as="h1" size="three">
+        <Display as="h1" size="m">
           {metadata.title as string}
         </Display>
 

diff --git a/templates/remix/app/routes/_index/route.tsx b/templates/remix/app/routes/_index/route.tsx
@@ -18,7 +18,7 @@ export const meta: MetaFunction = () => [
 export default function Index() {
   return (
     <>
-      <Display as="h1" size="three">
+      <Display as="h1" size="m">
         {title}
       </Display>