Problem/Motivation

Vartheme BS5 still uses the old fonts, colors, and sizes. It needs to follow the new Varbase Design System 2026 so the theme and its components look consistent and on brand.

Proposed resolution

Configure the theme to use the new typeface (Figtree), the approved color palette, and the new type and spacing scale, so every component picks up the 2026 design automatically.

Remaining tasks

  • ✅ File an issue about this project
  • ✅ Addition/Change/Update/Fix to this project
  • ✅ Testing to ensure no regression
  • ➖ Automated unit/functional testing coverage
  • ➖ Developer Documentation support on feature change/addition
  • ➖ User Guide Documentation support on feature change/addition
  • ➖ UX/UI designer responsibilities
  • ➖ Accessibility and Readability
  • ✅ Code review from 1 Varbase core team member
  • ✅ Full testing and approval
  • ✅ Credit contributors
  • ✅ Review with the product owner
  • ✅ Update Release Notes
  • ✅ Release varbase-11.0.0-alpha3, varbase_starter-1.0.0-alpha2, vartheme_bs5-5.0.0-alpha3

Varbase update type

  • ✅ No Update
  • ➖ Optional Update
  • ➖ Forced Update
  • ➖ Forced Update if Unchanged

User interface changes

  • N/A

API changes

  • N/A

Data model changes

  • N/A

Release notes snippet

  • feat: #3588156 Configuration for new fonts, colors, and sizes (Varbase Design System 2026)
CommentFileSizeAuthor
#12 varbase-design-system--vartheme_bs5--05-00-00.png34.99 KBrajab natshah

Issue fork vartheme_bs5-3588156

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

alamgir.hossain.cse created an issue. See original summary.

alamgir.hossain.cse opened merge request !143

alamgir.hossain.cse’s picture

alamgir.hossain.cse commented
Status: Active » Needs review
alamgir.hossain.cse’s picture

alamgir.hossain.cse commented
Status: Needs review » Active
alamgir.hossain.cse’s picture

alamgir.hossain.cse commented
Status: Active » Needs review

rajab natshah made their first commit to this issue’s fork.

  • rajab natshah committed 41516446 on 5.0.x 
    feat: #3588156 remove leftover inter webform as we switched to figtree
rajab natshah’s picture

rajab natshah
he/him
commented
Title: Configuration for New Theme - Playground » Configuration for new fonts, colors, and sizes
Status: Needs review » Needs work

Please, follow with Typeface from the new Varbase Design System to manage

// Override the default primary font family to Figtree for sans serif.
$font-family-sans-serif: figtree, sans-serif;
// Override the default secondary font family to DM Mono for monospace.
$font-family-monospace: dmmono, monospace;
rajab natshah’s picture

rajab natshah
he/him
commented

Make sure that to update the foundation to follow with
https://www.figma.com/design/RJkuWNHla1P8VYHa5z6dnL/VB---Approved-Styles...
For the Storybook too as we did that for the old design system
https://storybook.demo.varbase.vardot.com/?path=/story/foundation-typogr...

rajab natshah’s picture

rajab natshah
he/him
commented

We have new approved changes in the new Varbase Design System

rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes
StatusFileSize
new varbase-design-system--vartheme_bs5--05-00-00.png34.99 KB

  • rajab natshah committed c52d064e on 5.0.x 
    feat: #3588156 have a yarn theme:build after the change of font to...

  • rajab natshah committed 2f77b662 on 5.0.x 
    feat: #3588156 Style the secondary menu as sitemap in the footer

  • rajab natshah committed 7452123f on 5.0.x 
    feat: #3588156 Blog exposed filter row — horizontal Search / Industry

rajab natshah’s picture

rajab natshah
he/him
commented

I see that you had this fixed in a new issue
#3590794: Change colors and typography as per the new design

rajab natshah’s picture

rajab natshah
he/him
commented
Status: Needs work » Fixed

Closing this issue

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

rajab natshah’s picture

rajab natshah
he/him
commented
Issue tags: +varbase-11.0.0-alpha3, +varbase_starter-1.0.0-alpha2, +vartheme_bs5-5.0.0-alpha3
rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes
rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes
rajab natshah’s picture

rajab natshah
he/him
commented
Assigned: alamgir.hossain.cse » josebc
Status: Closed (fixed) » Needs review
rajab natshah’s picture

rajab natshah
he/him
commented
Assigned: josebc » mohammed j. razem
rajab natshah’s picture

rajab natshah
he/him
commented
Assigned: mohammed j. razem » Unassigned
Status: Needs review » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes

✅ Released vartheme_bs5-5.0.0-alpha3

rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes

✅ Released varbase_starter-1.0.0-alpha2

rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes

✅ Released varbase-11.0.0-alpha3

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.