[4.3] Upgrade to Bootstrap 5.2

[dgrammatiko]

Pull Request for Issue # .

Summary of Changes

• Atum

• Installation

• Cassiopeia

Testing Instructions

Check that all 3 templates (installation/Atum/Cassiopeia) don't have any visual of functional regression

Actual result BEFORE applying this Pull Request

Expected result AFTER applying this Pull Request

Link to documentations

Please select:

• Documentation link for docs.joomla.org:

• No documentation changes for docs.joomla.org needed

• Pull Request link for manual.joomla.org:

• No documentation changes for manual.joomla.org needed

For the Bootstrap changes refer to the Bootstrap Docs

[brianteeman]

Tested that it compiles correctly

Tested cassiopeia and atum and the main (only one so far) difference is the colours.

You can see this on the typography page in the sample data with cassiopeia

Before w/BS5.1

After w/BS5.2

You can see this easily on the category list page in Atum

Before w/BS5.1

After w/BS5.2

[alikon]

i've done some testing, install , front, back etc
i was unable to discover glitch

[alikon]

I have tested this item ✅ successfully on 339f3d8

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/39379.}

[brianteeman]

found another color issue in the admin as seen on the hits column
badge bg-info calculated color is rgb (13, 202, 240)

before the calculated color was rgb(42, 105, 184)

[dgrammatiko]

@brianteeman I manually patched the colour but I left a TODO comment in the variables.scss to investigate why the rgb colour is different (I have a bad flu the last few days so not very easy to do anything meaningful).

[brianteeman]

ok - i actually had the same problem on my own template last night. took me ages to work out that info-rgb was numbers only

[Quy]

[dgrammatiko]

A short explanation for the last few lines added on both templates:

• Bootstrap 5.2 is creating an rgb (numerical only) css var for each of the main colours (primary, secondary, info, etc)
• These values are used from the utilities to create the borders, text color and some background-colors
• looks like this:

.border-primary {
  --border-opacity: 1;
  border-color: rgba(var(--primary-rgb), var(--border-opacity)) !important;
}

• since all the opacity values are 1 we can simply use the original var(--primary) instead of building the value at run time, so the previous is the same as:

.border-primary {
  border-color:var(--primary-rgb) !important;
}

Only side effect is that you cannot change the opacity and somehow affect those values anymore (you couldn't anyway before 5.2!).

[Hackwar]

Backend

• Dashboard: While the lines are now present, the line below the title of the sample data module is too thick, while the line below the table header of the latest action module is not thick enough.
• On list views (article list view) there is a line above the table header which is missing here and the line below the table header is too thin.

Frontend (Cassiopeia)

• The header block is now wider than before and menu and title are jumping slightly apart and to the right.

The "Save & Close" button now looks right. It was very different before. Idk what happened.

[dgrammatiko]

the line below the title of the sample data module is too thick Fixed

while the line below the table header of the latest action module is not thick enough.

Both 4.2 and this PR have the same CSS rule here:

.table thead {
    border-bottom: 2px solid #dee2e6;
}

On list views (article list view) there is a line above the table header which is missing here and the line below the table header is too thin. FIXED

The header block is now wider than before and menu and title are jumping slightly apart and to the right. FIXED

[Hackwar]

I've updated the branch to the latest changes in 4.3-dev. Going to check this again now.

Regarding the line: I'm just comparing a default 4.3-dev with your branch it that looks different there.

[Hackwar]

Ok, it is almost all fixed. 😉 The CSS for kbd-tags is different and seems to be smaller. I could live with that if that is the default of BS. You can see that on the backend dashboard at the bottom with the keyboard shortcuts.

Anyway, I'm giving this a thumbs up.

[Hackwar]

I have tested this item ✅ successfully on a65ecd6

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/39379.}

[dgrammatiko]

@Hackwar the kbd should be fixed with d93370c

A big thank you for the tests here 👍

[Hackwar]

I have tested this item ✅ successfully on a65ecd6

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/39379.}

[laoneo]

I have tested this item ✅ successfully on a65ecd6

Tested it with a couple of extensions like DPCalendar or Akeeba backup

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/39379.}

[Hackwar]

Setting to RTC.

[Quy]

RTC

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/39379.}

[obuisard]

Thank you so much Dimitris @dgrammatiko for this PR.