Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat: WDS color bgAssistive (#25406)

Browse Source 
## Description

tl;dr Generative backgrounds for tooltips etc.

Fixes #23986

## Type of change
- New feature (non-breaking change which adds functionality)

## How Has This Been Tested?

- Manual

### Test Plan
Initial POC refinement, no testing necessary

## Checklist:
### Dev activity
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


### QA activity:
- [ ] Test plan has been approved by relevant developers
- [ ] Test plan has been peer reviewed by QA
- [ ] Cypress test cases have been added and approved by either SDET or
manual QA
- [ ] Organized project review call with relevant stakeholders after
Round 1/2 of QA
- [ ] Added Test Plan Approved label after reveiwing all Cypress test
This commit is contained in:
vadim 2023-07-18 18:34:40 +02:00 committed by GitHub
parent 636d89b37b
commit 5945aaa81b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
app/client/packages/design-system/theming/src/color/DarkModeTheme.ts
View File

@ -546,7 +546,17 @@ export class DarkModeTheme implements ColorModeTheme {
}
private get bgAssistive() {
return this.fg.clone();
const color = this.seedColor.clone();
// Background color for assistive UI elements (e.g. tooltip); light to stand out against bg
color.oklch.l = 0.94;
color.oklch.c = 0.03;
if (this.seedIsAchromatic) {
color.oklch.c = 0;
}
return color;
}
/*
@ -574,7 +584,7 @@ export class DarkModeTheme implements ColorModeTheme {
private get fgAccent() {
const color = this.seedColor.clone();
// For light content on dark background APCA contrast is negative. −60 is “The minimum level recommended for content text that is not body, column, or block text. In other words, text you want people to read.” Failure to reach this contrast level is most likely due to low lightness. Lightness and chroma are set to ones that reach the threshold universally irregardless of hue.
// For light content on dark background APCA contrast is negative. −60 is “The minimum level recommended for content text that is not body, column, or block text. In other words, text you want people to read.” Failure to reach this contrast level is most likely due to low lightness. Lightness and chroma are set to ones that reach the threshold universally regardless of hue.
if (this.bg.contrastAPCA(this.seedColor) >= -60) {
if (this.seedIsAchromatic) {
color.oklch.l = 0.79;
@ -712,7 +722,7 @@ export class DarkModeTheme implements ColorModeTheme {
private get bdAccent() {
const color = this.seedColor.clone();
// For light content on dark background APCA contrast is negative. −15 is “The absolute minimum for any non-text that needs to be discernible and differentiable, but does not apply to semantic non-text such as icons”. In practice, thin borders are perceptually too subtle when using this as a threshould. −25 is used as the required minimum instead. Failure to reach this contrast level is most likely due to high lightness. Lightness and chroma are set to ones that reach the threshold universally irregardless of hue.
// For light content on dark background APCA contrast is negative. −15 is “The absolute minimum for any non-text that needs to be discernible and differentiable, but does not apply to semantic non-text such as icons”. In practice, thin borders are perceptually too subtle when using this as a threshould. −25 is used as the required minimum instead. Failure to reach this contrast level is most likely due to high lightness. Lightness and chroma are set to ones that reach the threshold universally regardless of hue.
if (this.bg.contrastAPCA(this.seedColor) >= -25) {
if (this.seedIsAchromatic) {
color.oklch.l = 0.82;

16
app/client/packages/design-system/theming/src/color/LightModeTheme.ts
View File

@ -578,7 +578,17 @@ export class LightModeTheme implements ColorModeTheme {
}
private get bgAssistive() {
return this.fg.clone();
const color = this.seedColor.clone();
// Background color for assistive UI elements (e.g. tooltip); dark to stand out against bg
color.oklch.l = 0.16;
color.oklch.c = 0.07;
if (this.seedIsAchromatic) {
color.oklch.c = 0;
}
return color;
}
/*
@ -606,7 +616,7 @@ export class LightModeTheme implements ColorModeTheme {
private get fgAccent() {
const color = this.seedColor.clone();
// For dark content on light background APCA contrast is positive. 60 is “The minimum level recommended for content text that is not body, column, or block text. In other words, text you want people to read.” Failure to reach this contrast level is most likely due to high lightness. Lightness and chroma are set to ones that reach the threshold universally irregardless of hue.
// For dark content on light background APCA contrast is positive. 60 is “The minimum level recommended for content text that is not body, column, or block text. In other words, text you want people to read.” Failure to reach this contrast level is most likely due to high lightness. Lightness and chroma are set to ones that reach the threshold universally regardless of hue.
if (this.bg.contrastAPCA(this.seedColor) <= 60) {
if (this.seedIsAchromatic) {
color.oklch.l = 0.45;
@ -748,7 +758,7 @@ export class LightModeTheme implements ColorModeTheme {
private get bdAccent() {
const color = this.seedColor.clone();
// For dark content on light background APCA contrast is positive. 15 is “The absolute minimum for any non-text that needs to be discernible and differentiable, but does not apply to semantic non-text such as icons”. In practice, thin borders are perceptually too subtle when using this as a threshould. 25 is used as the required minimum instead. Failure to reach this contrast level is most likely due to high lightness. Lightness and chroma are set to ones that reach the threshold universally irregardless of hue.
// For dark content on light background APCA contrast is positive. 15 is “The absolute minimum for any non-text that needs to be discernible and differentiable, but does not apply to semantic non-text such as icons”. In practice, thin borders are perceptually too subtle when using this as a threshould. 25 is used as the required minimum instead. Failure to reach this contrast level is most likely due to high lightness. Lightness and chroma are set to ones that reach the threshold universally regardless of hue.
if (this.bg.contrastAPCA(this.seedColor) <= 25) {
if (this.seedIsAchromatic) {
color.oklch.l = 0.3;