diff --git a/.storybook/components/Icons.tsx b/.storybook/components/Icons.tsx index 7ccff88ad9..d25a475a10 100644 --- a/.storybook/components/Icons.tsx +++ b/.storybook/components/Icons.tsx @@ -151,7 +151,7 @@ export function Icons() { groupBy(activeIcons, 'category'), ).map(([category, items]) => (
- + {category}
diff --git a/.storybook/components/Statuses.tsx b/.storybook/components/Statuses.tsx index d7543c79a6..1f88645d3f 100644 --- a/.storybook/components/Statuses.tsx +++ b/.storybook/components/Statuses.tsx @@ -63,12 +63,7 @@ export function Status({ {label} {children && ( - + {children} )} diff --git a/.storybook/components/Teaser.tsx b/.storybook/components/Teaser.tsx index ce4fa3d2a9..0ae90d1484 100644 --- a/.storybook/components/Teaser.tsx +++ b/.storybook/components/Teaser.tsx @@ -27,7 +27,7 @@ interface TeaserProps { export function Teaser({ title, children }: TeaserProps) { return ( - + {title} diff --git a/.storybook/components/Theme.tsx b/.storybook/components/Theme.tsx index 4e03facd15..0636df2b8a 100644 --- a/.storybook/components/Theme.tsx +++ b/.storybook/components/Theme.tsx @@ -61,7 +61,7 @@ function CopyButton({ name }: { name: CustomPropertyName }) { return ( navigator.clipboard .writeText(name) diff --git a/packages/circuit-ui/components/Badge/Badge.module.css b/packages/circuit-ui/components/Badge/Badge.module.css index 90edd749b6..f62bcc66b1 100644 --- 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 index c36f133904..3207d497cd 100644 --- 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 index 4de1756f33..c4bc814b4d 100644 --- a/packages/circuit-ui/components/Headline/Headline.mdx +++ b/packages/circuit-ui/components/Headline/Headline.mdx @@ -51,7 +51,7 @@ Beyond the `

`, heading levels should be nested hierarchically to make them e Don't skip heading levels: an `

` should not directly follow an `

`. -In contrast, skipping headline _sizes_ and jumping from e.g. `` to `` 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. `` to `` 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 index 1da5d60152..d80ce67454 100644 --- 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 { const deprecatedSizeMap: Record = { '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 index 2d566f2b32..19382ff502 100644 --- 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 index a600c5e95b..70cd91f5d0 100644 --- a/packages/circuit-ui/components/ListItem/ListItem.stories.tsx +++ b/packages/circuit-ui/components/ListItem/ListItem.stories.tsx @@ -67,7 +67,8 @@ const Details = ( /> {item.status} diff --git a/packages/circuit-ui/components/ListItem/ListItem.tsx b/packages/circuit-ui/components/ListItem/ListItem.tsx index d41b869f51..f3b742c09c 100644 --- a/packages/circuit-ui/components/ListItem/ListItem.tsx +++ b/packages/circuit-ui/components/ListItem/ListItem.tsx @@ -199,7 +199,7 @@ export const ListItem = forwardRef< >
{isString(trailingLabel) ? ( - + {trailingLabel} ) : ( diff --git a/packages/circuit-ui/components/NotificationInline/NotificationInline.tsx b/packages/circuit-ui/components/NotificationInline/NotificationInline.tsx index d1029c3fa3..1506f06a8e 100644 --- a/packages/circuit-ui/components/NotificationInline/NotificationInline.tsx +++ b/packages/circuit-ui/components/NotificationInline/NotificationInline.tsx @@ -163,7 +163,10 @@ export const NotificationInline = forwardRef< {iconLabel}
{headline && ( - + {isString(headline) ? headline : headline.label} )} diff --git a/packages/circuit-ui/components/NotificationModal/NotificationModal.tsx b/packages/circuit-ui/components/NotificationModal/NotificationModal.tsx index 3f91ce1cdf..9127440b71 100644 --- a/packages/circuit-ui/components/NotificationModal/NotificationModal.tsx +++ b/packages/circuit-ui/components/NotificationModal/NotificationModal.tsx @@ -151,7 +151,7 @@ export const NotificationModal: ModalComponent = ({ )} - + {headline} {body && {body}} diff --git a/packages/circuit-ui/components/NotificationToast/NotificationToast.tsx b/packages/circuit-ui/components/NotificationToast/NotificationToast.tsx index 17613d0688..230ef324cd 100644 --- a/packages/circuit-ui/components/NotificationToast/NotificationToast.tsx +++ b/packages/circuit-ui/components/NotificationToast/NotificationToast.tsx @@ -123,7 +123,7 @@ export function NotificationToast({ {iconLabel}
{headline && ( - + {headline} )} diff --git a/packages/circuit-ui/components/SideNavigation/components/DesktopNavigation/DesktopNavigation.tsx b/packages/circuit-ui/components/SideNavigation/components/DesktopNavigation/DesktopNavigation.tsx index 040b1e8167..55ca04b4eb 100644 --- a/packages/circuit-ui/components/SideNavigation/components/DesktopNavigation/DesktopNavigation.tsx +++ b/packages/circuit-ui/components/SideNavigation/components/DesktopNavigation/DesktopNavigation.tsx @@ -83,7 +83,7 @@ export function DesktopNavigation({ aria-label={secondaryNavigationLabel} > - + {activePrimaryLink?.label} diff --git a/packages/circuit-ui/components/SideNavigation/components/SecondaryLinks/SecondaryLinks.module.css b/packages/circuit-ui/components/SideNavigation/components/SecondaryLinks/SecondaryLinks.module.css index 4e0368a7a5..a9aac7ead4 100644 --- a/packages/circuit-ui/components/SideNavigation/components/SecondaryLinks/SecondaryLinks.module.css +++ b/packages/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 index 3b98f9b32b..4d3a450db2 100644 --- 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({
  • {label && ( - + {label} - + )}
      diff --git a/packages/circuit-ui/components/Tabs/components/Tab/Tab.module.css b/packages/circuit-ui/components/Tabs/components/Tab/Tab.module.css index 23c574344c..5cc0bb68a8 100644 --- 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 index 22afb04b0b..264b1dbca8 100644 --- 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({