odoo/odoo#234083

Created by Website, Alay Patel (alap)
Merged at 1b17f420b986cb7f2ab0ed3880355338ed7749d4

Statuses:

label
odoo-dev:saas-18.4-fix-colorpicker-transparency-display-alap
head
9a8746f44dbecc7a8f5c61d23075c71556fc1993
merged
12 hours ago by Website, Benjamin Vray (bvr)
odoo/odoo
saas-18.4 #234083
19.0 #238217 missing statuses missing r+
master

[FIX] web, website: checkered background display in the color presets

Steps to reproduce:
1. Go to website and click edit.
2. Switch to the Theme tab and click on Color Presets.
3. Click on first color preset, then open the background color picker.
4. Switch to gradient tab, select any gradient, and adjust the opacity.
5. Now, click on second color preset, open the background color picker.
6. Switch to the custom tab, select any color, and adjust its opacity.

Issue:
When a gradient is selected (first color preset), the color preset preview area correctly displays a checkered background to indicate transparency. However, when a plain custom color is selected (second color preset), the checkered transparency background is missing from the color preset preview area.

Fix:
Set the value of --PreviewAlphaBg-background-size variable as 32px. Moreover, extended the %o-preview-alpha-background placeholder in the color_picker.scss file to ensure the checkered background is consistently applied for both gradient and custom color selections.

Before After
<img width="363" height="308" alt="image" src="https://github.com/user-attachments/assets/dbb64116-70d6-4475-9d41-90c0b591efcd" /> <img width="363" height="308" alt="image" src="https://github.com/user-attachments/assets/ea8caa90-3518-4219-a980-a2a22f2f427d" />

task-5226064