[BITV]: adapt checkboxes colors in normal state on dark theme

[JuliaKirschenheuter]

Waiting for #42287 to be merged and backported

This have to be done for dark theme as well.

Problems:

• Checkboxes
• Radiobuttons
• Checkbox radio switch

Suggestion:

Use --color-primary-element-light-text instead of --color-primary, like:

[szaimen]

I guess the calculation of the colors indeed needs to be different on dark mode compared to light mode in order to fullfill the contrast requirements. Calculation is done in

server/apps/theming/lib/Themes/CommonThemeTrait.php

Lines 41 to 82 in da97e10

	protected function generatePrimaryVariables(string $colorMainBackground, string $colorMainText): array {
	$isBrightColor = $this->util->isBrightColor($colorMainBackground);
	$colorPrimaryElement = $this->util->elementColor($this->primaryColor, $isBrightColor);
	$colorPrimaryLight = $this->util->mix($colorPrimaryElement, $colorMainBackground, -80);
	$colorPrimaryElementLight = $this->util->mix($colorPrimaryElement, $colorMainBackground, -80);
	// primary related colours
	return [
	// invert filter if primary is too bright
	// to be used for legacy reasons only. Use inline
	// svg with proper css variable instead or material
	// design icons.
	// ⚠️ Using 'no' as a value to make sure we specify an
	// invalid one with no fallback. 'unset' could here fallback to some
	// other theme with media queries
	'--primary-invert-if-bright' => $this->util->invertTextColor($this->primaryColor) ? 'invert(100%)' : 'no',
	'--primary-invert-if-dark' => $this->util->invertTextColor($this->primaryColor) ? 'no' : 'invert(100%)',
	'--color-primary' => $this->primaryColor,
	'--color-primary-default' => $this->defaultPrimaryColor,
	'--color-primary-text' => $this->util->invertTextColor($this->primaryColor) ? '#000000' : '#ffffff',
	'--color-primary-hover' => $this->util->mix($this->primaryColor, $colorMainBackground, 60),
	'--color-primary-light' => $colorPrimaryLight,
	'--color-primary-light-text' => $this->util->mix($this->primaryColor, $this->util->invertTextColor($colorPrimaryLight) ? '#000000' : '#ffffff', -20),
	'--color-primary-light-hover' => $this->util->mix($colorPrimaryLight, $colorMainText, 90),
	// used for buttons, inputs...
	'--color-primary-element' => $colorPrimaryElement,
	'--color-primary-element-hover' => $this->util->mix($colorPrimaryElement, $colorMainBackground, 82),
	'--color-primary-element-text' => $this->util->invertTextColor($colorPrimaryElement) ? '#000000' : '#ffffff',
	// mostly used for disabled states
	'--color-primary-element-text-dark' => $this->util->darken($this->util->invertTextColor($colorPrimaryElement) ? '#000000' : '#ffffff', 6),
	// used for hover/focus states
	'--color-primary-element-light' => $colorPrimaryElementLight,
	'--color-primary-element-light-hover' => $this->util->mix($colorPrimaryElementLight, $colorMainText, 90),
	'--color-primary-element-light-text' => $this->util->mix($colorPrimaryElement, $this->util->invertTextColor($colorPrimaryElementLight) ? '#000000' : '#ffffff', -20),
	// to use like this: background-image: var(--gradient-primary-background);
	'--gradient-primary-background' => 'linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%)',
	];
	}

IIRC...

[JuliaKirschenheuter]

Thank you @szaimen!

Do we really need to adjust this colors? It looks to me that i can just use an existing one --color-primary-element-light-text like if is used for text inside of the button:

and then use a dark mode mixin (but not sure if we have it). What do you think?

[szaimen]

Do we really need to adjust this colors? It looks to me that i can just use an existing one --color-primary-element-light-text like if is used for text inside of the button:

and then use a dark mode mixin. What do you think?

I wouldn't say we should do it like this. Better would be to adjust the calculation to work correctly in all, dark and bright mode.

[susnux]

I agree with @szaimen as that is the purpose of the --color-primary-element. To be used for graphical elements and thus should have a high enough contrast

[JuliaKirschenheuter]

checked several components on a dark theme, sometimes there are 3.02:1 but still passing criteria. Seems not to be an issue anymore.

[JuliaKirschenheuter]

seems to be not resolved on activity settings on the table: 2.98:1

[JuliaKirschenheuter]

Dear @nimishavijay

we have 2 problems in a dark theme in combination with --color-primary-element (#00679e):

--color-background-hover -> #212121

--color-main-background -> #171717

You can check it on hovered and normal state:

Could you please provide another colors for us?
Probably related:

https://play.phpsandbox.io/mexitek/phpcolors
#39317
#39391

[susnux]

Might be fixed with #42287

[JuliaKirschenheuter]

fixed by #42287

[JuliaKirschenheuter]

closed #42287