[Bug]: h3 to h6 look like text, headings generally inconsistent across apps

[ChristophWurst]

⚠️ This issue respects the following points: ⚠️

• This is a bug, not a question or a configuration/webserver/proxy issue.
• This issue is not already reported on Github OR Nextcloud Community Forum (I've searched it).
• Nextcloud Server is up to date. See Maintenance and Release Schedule for supported versions.
• I agree to follow Nextcloud's Code of Conduct.

Bug description

h2 isn't great, h3 is bad.

Another example:

Encryption is a h3. It doesn't look like one at all. This makes it super hard to recognize the structure of a text page in Nextcloud, like the settings.

Another one:

Update channel looks like ordinary text. It gives no structure except for the increased spacing.

h1 to h6 all share the same base styling:

server/core/css/styles.scss

Lines 19 to 30 in 375dade

	html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section, main {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	cursor: default;
	scrollbar-color: var(--color-border-dark) transparent;
	scrollbar-width: thin;
	}

. The font weight of h2 is set to bold. The rest stays inherit, which is too light IMO.

server/core/css/apps.scss

Lines 60 to 78 in 375dade

	/* BASE STYLING ------------------------------------------------------------ */
	// no h1 allowed since h1 = logo
	h2 {
	font-weight: bold;
	font-size: 20px;
	margin-bottom: 12px;
	line-height: 30px;
	color: var(--color-text-light);
	}
	h3 {
	font-size: 16px;
	margin: 12px 0;
	color: var(--color-text-light);
	}
	h4 {
	font-size: 14px;
	}

Steps to reproduce

1. Open settings, apps, etc

Expected behavior

Headings that help me recognize the structure of text, paragraphs and sections.

Installation method

None

Nextcloud Server version

master

Operating system

None

PHP engine version

None

Web server

None

Database engine version

None

Is this bug present after an update or on a fresh install?

None

Are you using the Nextcloud Server Encryption module?

None

What user-backends are you using?

• Default user-backend (database)
• LDAP/ Active Directory
• SSO - SAML
• Other

Configuration report

No response

List of activated Apps

No response

Nextcloud Signing status

No response

Nextcloud Logs

No response

Additional info

No response

[ChristophWurst]

Text doesn't have the issue because there is a custom style for h* inside the prosemirror editor.

Talk has custom styles through nextcloud/vue and the richttexteditable

If we make good defaults, prosemirror in text, ckeditor in Mail, richtexteditable in Talk, etc could all look the same.

[ChristophWurst]

@jancborchardt is this something worth standardizing?

[jancborchardt]

Yes, sounds good. Could we standardize them all based on the styles from Text? This this is something I went through and balanced back then.

[ChristophWurst]

Sure! That can be copied into the server styles and nextcloud/vue

[ChristophWurst]

Discussed with other engineering leads. The change is simple but the effects are significant and we are close to the feature freeze of 29. We will therefore move this to after the stable29 branch off.

[susnux]

The change is simple but the effects are significant and we are close to the feature freeze of 29.

Sounds reasonable, so merge after branch off?

[ChristophWurst]

Yes :)