[5.4] Error color in field styles with the COMBO type (Update awesomplete.scss)

[korenevskiy]

Steps to reproduce the issue

• Enable dark theme in the admin panel
• In any extension's XML file, add the field

<field name="myeditbox" type="combo" label="FieldCombo">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</field>

• Open the extension's options
• Enter the text "Opt" in the new field "FieldCombo"

Expected result

The tooltip for selection should be dark since the text on it is white, which means the background should be dark.

Actual result

The tooltip has a white background with white text

System information (as much as possible)

Joomla 6.0 Stable

Additional comments

---

After Change

Of course, for a light theme, I would make the color of the stamp lighter, and for a dark theme, the color of the stamp would make it darker. But I decided to use global variable colors without using theme selection conditions.

[richard67]

@korenevskiy Why are you creating a PR for the 5.4-dev branch with a title like "[J6]"?

[brianteeman]

The search suggestions in the front end will also need to be checked as that also uses awesomeplete

[korenevskiy]

The search suggestions in the front end will also need to be checked as that also uses awesomeplete

these styles are not included in the module search.
The search module uses
/media/vendor/awesomplete/css/awesomplete.css
And the Combo field uses a completely different style.
/media/templates/administrator/atum/css/vendor/awesomplete/awesomplete.css

the file
/templates/administrator/atum/scss/vendor/awesomplete/awesomplete.scss
contains text
@import "../../../../../../../../media/vendor/awesomplete/css/awesomplete";
which means that the styles used are the same.
But I made the change as you advised me to make it to the file
/templates/administrator/atum/scss/vendor/awesomplete/awesomplete.scss

instead of making a change to
/media/vendor/awesomplete/css/awesomplete.css
Therefore, PR is not used in the search module.

I checked the working styles of the module with the global amendments.
/media/vendor/awesomplete/css/awesomplete.css

The module style is displayed well and acceptably.
With one exception, the background of the stamp is missing.
In the example screenshots above, the background that is displayed in blue on the Opt labels is not displayed.

I still changed the style so that it could be acceptably displayed both in the Combo box and in the search module, and changed the background color of the mark.

This is what the smart search module looks like.

For my last corrections, I really missed the global variables with color. But still, one color came across, which you can see above in the screenshots.

Answers are required:

1. Will we make changes to the global styles (with the search module) or only the combo field of the admin panel
2. Do I need to add global variables to work with color, or will we accept the color shown by me?

PS background-color: var(--warning-bg-subtle); the color for the mark of the latest screenshots (not added to the PR)

[korenevskiy]

here we need the advice of the author of Cassiopeia

[drmenzelit]

Hi @korenevskiy , thank you for your improvement for the dark mode. I have some suggestions:

• your code is not written as scss, but as css. That should be improved
• I think it is not a good idea to import the awesomplete css and to overwrite it almost completely in the same file. If we want to improve the css of awesomplete to work also in dark mode, we should remove the import and write our own css
• Atum uses Bootstrap which already has definitions for dark mode. For example for the <mark> element. We should stick to the colors used by Atum

Some screenshots

that is how other highlighted (on hover) fields look like:

we are overwriting colors 3 times: