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

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

I have tested this item ✅ successfully on 339f3d8

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)

@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).

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

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!).

Font is visually different.

Without PR:

"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"

With PR:

system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"

@Quy which template and what settings?

Sorry it is for Atum using the prebuilt package.

@Quy good catch, should be ok now

Before:

After (color lighter):

Before (shadow):

After (no shadow):

Taking the current snapshot from your branch, the color of the headings in the sampledata module is lighter.

The titles of the modules on the main dashboard don't have a line below them. I noticed it with installed testing sample data at the popular articles module.

rounded corners at buttons and form elements have a bigger radius than before.

rounded corners at buttons and form elements have a bigger radius than before.

This is a change in the BS, in 5.1.3 the radius was defined with:
https://github.com/twbs/bootstrap/blob/1a6fdfae6be09b09eaced8f0e442ca6f7680a61e/scss/_variables.scss#L530-L535
in 5.2.x
https://github.com/twbs/bootstrap/blob/cb021439c683d9805e2864c58095b92d405e9b11/scss/_variables.scss#L494-L501

It seems that they use more breakpoints and align the values accordingly. We could force the old values but doesn't really seem the best way forward

Taking the current snapshot from your branch, the color of the headings in the sampledata module is lighter.
The titles of the modules on the main dashboard don't have a line below them. I noticed it with installed testing sample data at the popular articles module.

This comes again from upstream, I will pass the old values to the local css variables

Sorry with the spam from earlier. I've combined all issues in this comment. This is a full review of frontend, backend and installation. All tested with installed testing sampledata.

Installation

I couldn't see a real difference here.

Backend

• The color of the headings in the sampledata module is lighter.
• The titles of the modules on the main dashboard don't have a line below them. I noticed it at the popular articles module.
• rounded corners at buttons and form elements have a bigger radius than before.
• When editing an article the "Save & Close" button is wider
• there is a gap below the tabs headings when editing an article.
• readonly form inputs are not properly styled. When editing an article, the modified by field should have a grey background, but it looks like all other input fields. The field is correctly set to readonly.
• Looking at the permissions tab in articles, it looks like the thead block doesn't have the thicker line below it or maybe that is a shadow?

Besides these minor issues, the backend looks very good. ?

Frontend (Cassiopeia)

• The header block is narrower
• Here we also have the issue of the changed radius of rounded corners.

Besides these issues, the frontend also looks pretty good. ?

Looking forward to giving this a successfull test. ?

@Hackwar thanks for the testing, let me know if I've got everything:

• The color of the headings in the sampledata module is lighter. FIXED
• The titles of the modules on the main dashboard don't have a line below them. I noticed it at the popular articles module. FIXED
• rounded corners at buttons and form elements have a bigger radius than before. FIXED
• When editing an article the "Save & Close" button is wider: NOT fixed, it's a 1px difference
• there is a gap below the tabs headings when editing an article. FIXED
• readonly form inputs are not properly styled. When editing an article, the modified by field should have a grey background, but it looks like all other input fields. The field is correctly set to readonly. FIXED
• Looking at the permissions tab in articles, it looks like the thead block doesn't have the thicker line below it or maybe that is a shadow? FIXED
• The header block is narrower FIXED
• Here we also have the issue of the changed radius of rounded corners. FIXED

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.

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

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.

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.

I have tested this item ✅ successfully on a65ecd6

@Hackwar the kbd should be fixed with d93370c

A big thank you for the tests here ?

I have tested this item ✅ successfully on a65ecd6

I have tested this item ✅ successfully on a65ecd6

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

Setting to RTC.

RTC

Thank you so much Dimitris @dgrammatiko for this PR.