Skip to content

feat: Semantic font weights for interactive elements#8469

Open
kra-mo wants to merge 1 commit intomainfrom
feat/semantic-font-weights
Open

feat: Semantic font weights for interactive elements#8469
kra-mo wants to merge 1 commit intomainfrom
feat/semantic-font-weights

Conversation

@kra-mo
Copy link
Copy Markdown
Member

@kra-mo kra-mo commented Apr 24, 2026

All general text should now be weight 400, interactive controls 500, and headings 600. Also added variables, as suggested by @ShGKme.

Depends on nextcloud/server#59899

☑️ Resolves

🖼️ Screenshots

🏚️ Before 🏡 After
image image

🏁 Checklist

  • ⛑️ Tests are included or are not applicable
  • 📘 Component documentation has been extended, updated or is not applicable
  • 2️⃣ Backport to stable8 for maintained Vue 2 version or not applicable

@kra-mo kra-mo requested a review from ShGKme April 24, 2026 13:10
@codecov
Copy link
Copy Markdown

codecov Bot commented Apr 24, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 54.55%. Comparing base (0aadabf) to head (26567e9).
⚠️ Report is 26 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #8469      +/-   ##
==========================================
+ Coverage   54.47%   54.55%   +0.07%     
==========================================
  Files         105      106       +1     
  Lines        3411     3439      +28     
  Branches      996     1003       +7     
==========================================
+ Hits         1858     1876      +18     
- Misses       1313     1322       +9     
- Partials      240      241       +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@kra-mo kra-mo force-pushed the feat/semantic-font-weights branch from c91b01d to 6cf9f39 Compare April 24, 2026 13:15
Copy link
Copy Markdown
Contributor

@ShGKme ShGKme left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In addition to the library, we have some global styles for interactive elements, for example:
https://github.com/nextcloud/server/blob/stable33/core/css/inputs.scss

And (barely used) global utils like this:
https://github.com/nextcloud/server/blob/stable33/core/css/global.scss#L75-L77

Comment thread styleguide/assets/default.css Outdated
Comment thread src/assets/action.scss Outdated
@kra-mo kra-mo force-pushed the feat/semantic-font-weights branch 3 times, most recently from 2efc512 to 7ee7ca5 Compare April 24, 2026 14:01
kra-mo added a commit to nextcloud/server that referenced this pull request Apr 24, 2026
kra-mo added a commit to nextcloud/server that referenced this pull request Apr 24, 2026
Comment thread src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue Outdated
Copy link
Copy Markdown
Contributor

@susnux susnux left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

keep old behavior

Comment thread src/assets/action.scss Outdated
Comment thread src/assets/action.scss
Comment thread src/assets/NcAppNavigationItem.scss Outdated
Comment thread src/components/NcAppSidebar/NcAppSidebarTabsButton.vue Outdated
Comment thread src/components/NcButton/NcButton.vue Outdated
Comment thread src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue
Comment thread src/components/NcFormBox/NcFormBoxItem.vue Outdated
Comment thread src/components/NcFormBox/NcFormBoxItem.vue
Comment thread src/components/NcNoteCard/NcNoteCard.vue Outdated
Comment thread src/components/NcRadioGroupButton/NcRadioGroupButton.vue Outdated
@kra-mo kra-mo force-pushed the feat/semantic-font-weights branch 3 times, most recently from e81b926 to a257744 Compare April 28, 2026 07:34
@kra-mo
Copy link
Copy Markdown
Member Author

kra-mo commented Apr 28, 2026

Ok, I also kept the old values in what were previously removals. It should always use the previous values when variables are not available now, thanks for the help @susnux @ShGKme

@kra-mo kra-mo requested review from ShGKme and susnux April 28, 2026 07:36
@jancborchardt jancborchardt added design Design, UX, interface and interaction design enhancement New feature or request labels Apr 28, 2026
Copy link
Copy Markdown
Contributor

@jancborchardt jancborchardt left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very nice improvement, 👍 design-wise! :)

Copy link
Copy Markdown
Contributor

@ShGKme ShGKme left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some fallback values are missing.
Because the variable is not available in older versions, it is better to always have a fallback, even if it is the same value.

Comment thread src/assets/action.scss Outdated
Comment thread src/assets/NcAppNavigationItem.scss Outdated
Comment thread src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue Outdated
Comment thread src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue Outdated
Comment thread src/components/NcFormBox/NcFormBoxItem.vue Outdated
Comment thread src/components/NcFormBox/NcFormBoxItem.vue Outdated
@ShGKme ShGKme added this to the 9.7.0 milestone Apr 28, 2026
@ShGKme
Copy link
Copy Markdown
Contributor

ShGKme commented Apr 28, 2026

/backport to stable8

kra-mo added a commit to nextcloud/server that referenced this pull request Apr 28, 2026
kra-mo added a commit to nextcloud/server that referenced this pull request Apr 28, 2026
@kra-mo kra-mo force-pushed the feat/semantic-font-weights branch 2 times, most recently from a0eadf3 to 7d2d033 Compare April 28, 2026 12:14
@Antreesy Antreesy modified the milestones: 9.7.0, 9.7.1 Apr 30, 2026
Resolves #8083

All general text should now be weight 400,
interactive controls 500, and headings 600.
Also added variables, as suggested by @ShGKme.

Signed-off-by: kramo <git@kramo.page>
@kra-mo kra-mo force-pushed the feat/semantic-font-weights branch from 7d2d033 to 26567e9 Compare May 1, 2026 14:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backport-request design Design, UX, interface and interaction design enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Use font-weight 500 for interactive controls

5 participants