Fix VBP Associate background and foreground colors with CSS3 variables in SASS with PostCSS

Created on 30 June 2023, over 1 year ago
Updated 10 September 2023, about 1 year ago

Problem/Motivation

  • Having old way to manage VBP color styling
  • On updating to Varbase ~10 colors went out from back-end and front-end
  • Bootstrap 5.3.0 has new set of light and dark variables
@import "./bootstrap-variables";                           // Override Bootstrap 5 variables.
@import "../node_modules/bootstrap/scss/functions";        // Bootstrap functions.
@import "../node_modules/bootstrap/scss/variables";        // Bootstrap variables.
@import "../node_modules/bootstrap/scss/variables-dark";   // Bootstrap dark variables.
@import "../node_modules/bootstrap/scss/maps";             // Bootstrap maps.
@import "../node_modules/bootstrap/scss/mixins";           // Bootstrap mixins.
@import "../node_modules/bootstrap/scss/utilities";        // Bootstrap utilities.

Proposed resolution

  • Change SASS and PostCSS to CSS3 :root and body variables
  • Manage the varbase_bootstrap_paragraphs/vbp-colors library in a better way.
  • Add dependencies for the Varbase Bootstrap Paragraphs default admin styling library.

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
  • ✅ 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 and Update Helper on new feature change/addition
  • ✅ Release Varbase 10.0.0-beta1 , varbase_bootstrap_paragraphs-10.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

  • Issue #3371723 : Fixed VBP Associate background and foreground colors with CSS3 variables in SASS with PostCSS
📌 Task
Status

Fixed

Version

10.0

Component

Code

Created by

🇯🇴Jordan Rajab Natshah Jordan

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024