feat(ui): add h1–h6 base typography styles by MartinS-git · Pull Request #1746 · cloudoperators/juno

MartinS-git · 2026-06-08T13:00:49Z

Summary

Implement the Juno typography scale (h1–h6) across global.css, theme.css, and FormattedText
Fix ContentHeading to use the base h1 scale instead of overriding it
Fix h1 misuse in UI components: replace semantically incorrect <h1> tags with appropriate elements, resolving both visual regressions and accessibility issues
Expose the typography scale as .juno-h1–.juno-h6 utility classes so non-heading elements can adopt the same styling without duplicating values

Changes

`global.css` — `@layer base`

Added h1–h6 base styles with IBM Plex Sans Bold, rem-based font sizes, and plain CSS numeric line-height values
Each rule also matches a corresponding .juno-h1–.juno-h6 class so non-heading elements (e.g. an element with role="heading") can share the same typography

`theme.css` — `@layer base`

Added matching h1–h6 (and .juno-h1–.juno-h6) styles for consumers using theme.css standalone
Moved into @layer base to respect cascade order (per Copilot review feedback)
Uses var(--font-sans) instead of hardcoded font stack

`FormattedText/formatted-text.css`

Aligned h1–h6 font sizes and line-heights with the typography scale
Fixed h5 font size (1.03rem → 1.125rem)
Added missing h6 style
Removed redundant font-weight and font-style declarations (now inherited from base)

`ContentHeading`

Removed jn:font-bold and jn:text-lg overrides — these were overriding the h1 base style (1.69rem) with the smaller text-lg value (1.125rem)

Component heading fixes (accessibility + visual regression)

Several components used <h1> for UI labels (titles, section headings). After introducing the global h1 base style, these rendered at 27px — unintended. Each was reviewed for correct heading semantics and accessibility:

Component	Before	After	Reason
`Modal`	`<h1>` + `jn:text-xl`	`<h4>` (string title) / `<div role="heading" aria-level={4} class="juno-h4">` (ReactNode title)	Dialog title — `role="dialog"` creates an isolated landmark; heading is correct and referenced via `aria-labelledby`. `<h4>` matches previous visual size. ReactNode titles use a div + `.juno-h4` class to avoid invalid HTML (block elements inside heading elements) while sharing typography with the `<h4>` path.
`Form`	`<h1>` + `jn:text-2xl`	`<h3>`	Form is a named content section; heading is appropriate. `<h3>` matches previous visual size.
`FormSection`	`<h1>` + `jn:text-lg`	`<h4>`	One level below Form (`<h3>`) in the heading hierarchy.
`SignInForm`	`<h1>` + `jn:text-xl`	`<h2>`	Often the primary content of a page; `<h2>` is a safe default for standalone and embedded use.
`Message`	`<h1>`	`<strong>`	Alert title — not a navigable section. Adding it to the heading outline would mislead screen reader users navigating by heading, especially when multiple messages are visible.
`IntroBox`	`<h1>`	`<p>` (bold)	Info box — not a document section. No heading outline entry needed. Bold styling preserved.
`PopupMenu`	`<h1>`	bare text inside `<header>`	Decorative menu section label — polluting the heading outline with dropdown menu internals is incorrect for screen reader navigation.
`ContentHeading`	`<h1>`	`<h1>` (unchanged)	Intentional page-level heading. `<h1>` is semantically correct here.

Changeset

Minor version bump for @cloudoperators/juno-ui-components

Typography Scale

Element	Font	Weight	Size (rem)	Line-height
h1	IBM Plex Sans	700	1.69rem	1.375 (leading-snug)
h2	IBM Plex Sans	700	1.56rem	1.375 (leading-snug)
h3	IBM Plex Sans	700	1.44rem	1.375 (leading-snug)
h4	IBM Plex Sans	700	1.28rem	1.625 (leading-relaxed)
h5	IBM Plex Sans	700	1.125rem	1.625 (leading-relaxed)
h6	IBM Plex Sans	700	1rem	1.5 (leading-normal)

The same scale is also available as .juno-h1–.juno-h6 utility classes for elements that should look like a heading but aren't a heading element.

Closes #1737

changeset-bot · 2026-06-08T13:00:55Z

🦋 Changeset detected

Latest commit: e304ede

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 9 packages

Name	Type
@cloudoperators/juno-ui-components	Minor
@cloudoperators/juno-app-carbon	Patch
@cloudoperators/juno-app-doop	Patch
@cloudoperators/juno-app-example	Patch
@cloudoperators/juno-app-greenhouse	Patch
@cloudoperators/juno-app-heureka	Patch
@cloudoperators/juno-app-supernova	Patch
@cloudoperators/juno-app-template	Patch
@cloudoperators/juno-messages-provider	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2026-06-08T13:02:22Z

PR Preview Action v1.8.1
🚀 View preview at https://cloudoperators.github.io/juno/pr-preview/pr-1746/
Built to branch `gh-pages` at 2026-06-15 12:18 UTC. Preview will be ready when the GitHub Pages deployment is complete.

Copilot

Pull request overview

Adds the Juno design-system heading typography scale (h1–h6) as base styles in the UI components package, and aligns the FormattedText component’s heading styles to the same sizes/line-heights.

Changes:

Added h1–h6 base typography rules (font-family/weight + size + line-height) in global.css.
Added corresponding heading rules to theme.css and updated FormattedText heading line-heights (including adding h6).
Added a changeset to release the update.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

File	Description
packages/ui-components/src/theme.css	Adds heading typography rules (currently unlayered).
packages/ui-components/src/global.css	Adds h1–h6 base styles in `@layer base` using prefixed Tailwind utilities for line-height.
packages/ui-components/src/components/FormattedText/formatted-text.css	Aligns heading line-heights/sizes to the design-system scale; adds `h6`.
.changeset/typography-scale-headings.md	Declares a minor version bump and describes the typography change.

edda

Please check all components for internal usage of h1 - h6. Now that we define global font-sizes for them, existing places where they were used might look differen. E.g. the title prop in the Message component renders an h1 with bold font. Previously this would render in standard text size but bold. After this change it will have the h1 font-size, which is not intended. It was semantically already a mistake to render an h1 for this, so we'll need to adjust it to something more fitting. Modal titles also use h1, which we probably want to change as well. I'm sure there are others...

Copilot

Pull request overview

Copilot reviewed 13 out of 13 changed files in this pull request and generated 2 comments.

Copilot

Pull request overview

Copilot reviewed 14 out of 14 changed files in this pull request and generated 3 comments.

Implements the Juno typography scale for heading elements h1–h6 in the @layer base section of global.css. Styles follow the defined spec: IBM Plex Sans, weight 700, with rem-based font sizes and leading values aligned to Tailwind's leading-snug (h1–h3), leading-relaxed (h4–h5), and leading-normal (h6). Closes #1737 Signed-off-by: MartinS-git <info@eyepic.de>

Signed-off-by: MartinS-git <info@eyepic.de>

…ies in h1–h6 Signed-off-by: MartinS-git <info@eyepic.de>

Update h1–h6 in formatted-text.css to match the defined typography scale: - Align font-size and line-height with global.css values - Fix h5 font-size (1.03rem → 1.125rem) - Remove redundant font-weight and font-style declarations - Add missing h6 style Closes #1737 Signed-off-by: MartinS-git <info@eyepic.de>

Signed-off-by: MartinS-git <info@eyepic.de>

… theme.css Signed-off-by: MartinS-git <info@eyepic.de>

ContentHeading renders an h1 — now that h1–h6 base styles are defined in @layer base (global.css), the explicit jn:text-lg (1.125rem) was overriding the intended h1 size (1.69rem). Removing both overrides lets the base typography scale apply correctly. Signed-off-by: MartinS-git <info@eyepic.de>

Signed-off-by: MartinS-git <info@eyepic.de>

…al.css h1–h6 Consistent with theme.css and formatted-text.css which also use plain CSS values. Tailwind equivalent noted as comments. Signed-off-by: MartinS-git <info@eyepic.de>

…lues Signed-off-by: MartinS-git <info@eyepic.de>

…ements Resolves accessibility regression caused by the global h1–h6 typography scale: components that used <h1> for UI labels (titles, section headings) now rendered at 27px, which was not intended. Each element was reviewed for correct heading semantics: - Modal: <h1> → <h4>; removed jn:text-xl/font-bold overrides - Form: <h1> → <h3>; removed jn:text-2xl/font-bold overrides - FormSection: <h1> → <h4>; removed jn:text-lg/font-bold overrides - SignInForm: <h1> → <h2>; removed jn:text-xl/font-bold overrides - Message: <h1> → <strong> (alert title, not a navigable section) - IntroBox: <h1> → <p> (info box, no heading outline needed) - PopupMenu: <h1> → <span> (decorative menu section label) - ContentHeading: <h1> unchanged (intentional page-level heading) Signed-off-by: MartinS-git <info@eyepic.de>

Copilot

Pull request overview

Copilot reviewed 14 out of 14 changed files in this pull request and generated 3 comments.

…ct changeset inaccuracies Signed-off-by: MartinS-git <info@eyepic.de>

Copilot

Pull request overview

Copilot reviewed 14 out of 14 changed files in this pull request and generated 2 comments.

Copilot

Pull request overview

Copilot reviewed 14 out of 14 changed files in this pull request and generated 1 comment.

…1.28rem, leading-relaxed, bold) Signed-off-by: MartinS-git <info@eyepic.de>

Copilot

Pull request overview

Copilot reviewed 14 out of 14 changed files in this pull request and generated 1 comment.

…ily consistency with h4 path Signed-off-by: MartinS-git <info@eyepic.de>

…ull consistency Signed-off-by: MartinS-git <info@eyepic.de>

Copilot

Pull request overview

Copilot reviewed 14 out of 14 changed files in this pull request and generated 1 comment.

…prevent invalid HTML Signed-off-by: MartinS-git <info@eyepic.de>

…aphy Extend h1–h6 base rules in global.css and theme.css to also match corresponding .juno-h1–.juno-h6 classes, so non-heading elements (such as the Modal ReactNode-title div with role="heading") can share the same typography. Modal drops its duplicated titlestyles constant and uses the .juno-h4 class on the div path instead. Also rewrites the changeset to describe consumer-facing behavior instead of internal implementation history. Signed-off-by: Esther Schmitz <esther.schmitz@sap.com>

Copilot

Pull request overview

Copilot reviewed 14 out of 14 changed files in this pull request and generated no new comments.

Copilot

Pull request overview

Copilot reviewed 14 out of 14 changed files in this pull request and generated 1 comment.

+        <h4 className="juno-modal-title" id={modalTitleId}>
          {modalTitle}
-        </h1>
+        </h4>
      )
    }
    return (
-      <div className={`juno-modal-title ${titlestyles}`} id={modalTitleId}>
+      <div className="juno-modal-title juno-h4" role="heading" aria-level={4} id={modalTitleId}>
        {modalTitle}


MartinS-git marked this pull request as ready for review June 8, 2026 13:57

MartinS-git requested review from a team and franzheidl as code owners June 8, 2026 13:57

Copilot AI review requested due to automatic review settings June 8, 2026 13:57

Copilot started reviewing on behalf of MartinS-git June 8, 2026 13:58 View session

Copilot AI reviewed Jun 8, 2026

View reviewed changes

Comment thread packages/ui-components/src/theme.css Outdated

MartinS-git force-pushed the headline-definitions branch from 464f38f to e2a926b Compare June 10, 2026 10:03

edda requested changes Jun 10, 2026

View reviewed changes

TilmanHaupt mentioned this pull request Jun 10, 2026

feat(portal): show domain name on project cards cobaltcore-dev/aurora-dashboard#898

Merged

6 tasks

MartinS-git force-pushed the headline-definitions branch from d26ce8c to 883acee Compare June 11, 2026 06:02

MartinS-git requested a review from Copilot June 11, 2026 08:49

Copilot started reviewing on behalf of MartinS-git June 11, 2026 08:49 View session

Copilot AI reviewed Jun 11, 2026

View reviewed changes

Comment thread packages/ui-components/src/components/Modal/Modal.component.tsx

Comment thread packages/ui-components/src/components/SignInForm/SignInForm.test.tsx

MartinS-git requested a review from Copilot June 11, 2026 09:26

Copilot started reviewing on behalf of MartinS-git June 11, 2026 09:26 View session

Copilot AI reviewed Jun 11, 2026

View reviewed changes

Comment thread packages/ui-components/src/components/Modal/Modal.component.tsx

Comment thread packages/ui-components/src/global.css Outdated

Comment thread packages/ui-components/src/theme.css Outdated

TilmanHaupt assigned MartinS-git Jun 11, 2026

MartinS-git added 11 commits June 12, 2026 14:13

feat(ui): add h1–h6 base typography styles to theme.css

6c58a32

Signed-off-by: MartinS-git <info@eyepic.de>

refactor(ui): replace line-height values with Tailwind leading utilit…

26d2e58

…ies in h1–h6 Signed-off-by: MartinS-git <info@eyepic.de>

chore: add changeset for typography scale headings

72c66a4

Signed-off-by: MartinS-git <info@eyepic.de>

refactor(ui): move h1–h6 into @layer base and use var(--font-sans) in…

1d6fc70

… theme.css Signed-off-by: MartinS-git <info@eyepic.de>

chore: update changeset with full list of typography changes

90adb97

Signed-off-by: MartinS-git <info@eyepic.de>

refactor(ui): replace @apply leading utilities with plain CSS in glob…

7aac887

…al.css h1–h6 Consistent with theme.css and formatted-text.css which also use plain CSS values. Tailwind equivalent noted as comments. Signed-off-by: MartinS-git <info@eyepic.de>

chore(ui): remove Tailwind utility comments from h1–h6 line-height va…

314d330

…lues Signed-off-by: MartinS-git <info@eyepic.de>

Copilot started reviewing on behalf of MartinS-git June 12, 2026 12:14 View session

Copilot AI reviewed Jun 12, 2026

View reviewed changes

Comment thread packages/ui-components/src/components/Modal/Modal.component.tsx

Comment thread .changeset/typography-scale-headings.md Outdated

Comment thread .changeset/typography-scale-headings.md Outdated

fix(ui): add typography styles to Modal ReactNode title div and corre…

4af9079

…ct changeset inaccuracies Signed-off-by: MartinS-git <info@eyepic.de>

MartinS-git requested a review from Copilot June 12, 2026 12:48

Copilot started reviewing on behalf of MartinS-git June 12, 2026 12:48 View session

Copilot AI reviewed Jun 12, 2026

View reviewed changes

Comment thread packages/ui-components/src/components/Modal/Modal.component.tsx

Comment thread packages/ui-components/src/global.css Outdated

MartinS-git requested a review from Copilot June 12, 2026 12:54

Copilot started reviewing on behalf of MartinS-git June 12, 2026 12:54 View session

Copilot AI reviewed Jun 12, 2026

View reviewed changes

Comment thread packages/ui-components/src/components/Modal/Modal.component.tsx

fix(ui): align Modal ReactNode title typography with h4 base styles (…

f2aaa3f

…1.28rem, leading-relaxed, bold) Signed-off-by: MartinS-git <info@eyepic.de>

MartinS-git requested a review from Copilot June 12, 2026 13:05

Copilot started reviewing on behalf of MartinS-git June 12, 2026 13:05 View session

Copilot AI reviewed Jun 12, 2026

View reviewed changes

Comment thread packages/ui-components/src/components/Modal/Modal.component.tsx Outdated

MartinS-git added 2 commits June 12, 2026 15:14

fix(ui): add jn:font-sans to Modal ReactNode titlestyles for font-fam…

c7eb1ab

…ily consistency with h4 path Signed-off-by: MartinS-git <info@eyepic.de>

fix(ui): apply titlestyles to both h4 and div Modal title paths for f…

77631d9

…ull consistency Signed-off-by: MartinS-git <info@eyepic.de>

MartinS-git requested a review from Copilot June 12, 2026 13:17

Copilot started reviewing on behalf of MartinS-git June 12, 2026 13:17 View session

Copilot AI reviewed Jun 12, 2026

View reviewed changes

Comment thread packages/ui-components/src/components/PopupMenu/PopupMenu.component.tsx Outdated

fix(ui): remove redundant span wrapper in PopupMenuSectionHeading to …

05747d1

…prevent invalid HTML Signed-off-by: MartinS-git <info@eyepic.de>

hodanoori previously approved these changes Jun 12, 2026

View reviewed changes

edda dismissed hodanoori’s stale review via e304ede June 15, 2026 12:15

MartinS-git requested review from Copilot, edda and hodanoori June 15, 2026 12:25

Copilot started reviewing on behalf of MartinS-git June 15, 2026 12:26 View session

Copilot AI reviewed Jun 15, 2026

View reviewed changes

MartinS-git requested a review from Copilot June 15, 2026 12:32

Copilot started reviewing on behalf of MartinS-git June 15, 2026 12:33 View session

Copilot AI reviewed Jun 15, 2026

View reviewed changes

Conversation

MartinS-git commented Jun 8, 2026 • edited by edda Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

global.css — @layer base

theme.css — @layer base

FormattedText/formatted-text.css

ContentHeading

Component heading fixes (accessibility + visual regression)

Changeset

Typography Scale

Uh oh!

changeset-bot Bot commented Jun 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions Bot commented Jun 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Built to branch gh-pages at 2026-06-15 12:18 UTC. Preview will be ready when the GitHub Pages deployment is complete.

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

edda left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Reviewers

MartinS-git commented Jun 8, 2026 •

edited by edda

Loading

`global.css` — `@layer base`

`theme.css` — `@layer base`

`FormattedText/formatted-text.css`

`ContentHeading`

changeset-bot Bot commented Jun 8, 2026 •

edited

Loading

github-actions Bot commented Jun 8, 2026 •

edited

Loading

Built to branch `gh-pages` at 2026-06-15 12:18 UTC.
Preview will be ready when the GitHub Pages deployment is complete.