Skip to content

Commit

Permalink
Merge pull request #31571 from appsmithorg/release
Browse files Browse the repository at this point in the history 
7th March, 2024 - Daily Promotion
  • Loading branch information
@yatinappsmith
yatinappsmith authored Mar 7, 2024
2 parents 8387ce0 + 825304f commit 65a5f27
Show file tree
Hide file tree
Showing 40 changed files with 547 additions and 285 deletions.
2 changes: 1 addition & 1 deletion .github/config.json
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion app/client/cypress/support/Objects/CommonLocators.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -224,7 +224,7 @@ export class CommonLocators {
_dialogCloseButton = ".ads-v2-modal__content-header-close-button";
_evaluateMsg = ".t--evaluatedPopup-error";
_evalValuePopover = ".t--CodeEditor-evaluatedValue";
_canvas = "[data-testid=widgets-editor]";
_canvas = "[data-testid=t--widgets-editor]";
_enterPreviewMode = "[data-testid='edit-mode']";
_exitPreviewMode = "[data-testid='preview-mode']";
_ds_imageSelector = ".ads-dialog-trigger";
Expand Down
48 changes: 32 additions & 16 deletions app/client/packages/design-system/theming/src/color/src/DarkModeTheme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,10 +145,13 @@ export class DarkModeTheme implements ColorModeTheme {
color.oklch.c = 0;
}

if (!this.seedIsAchromatic) {
color.oklch.c = 0.064;
if (!this.seedIsAchromatic && this.seedIsCold) {
color.oklch.c = 0.029;
}

if (!this.seedIsAchromatic && !this.seedIsCold) {
color.oklch.c = 0.012;
}
return color;
}

Expand Down Expand Up @@ -611,15 +614,15 @@ export class DarkModeTheme implements ColorModeTheme {
private get bgElevation2() {
const color = this.bgElevation1.clone();

color.oklch.l += 0.035;
color.oklch.l += 0.025;

return color;
}

private get bgElevation3() {
const color = this.bgElevation2.clone();

color.oklch.l += 0.04;
color.oklch.l += 0.03;

return color;
}
Expand All @@ -635,8 +638,8 @@ export class DarkModeTheme implements ColorModeTheme {

color.alpha = 0.35;

if (color.oklch.c > 0.08) {
color.oklch.c = 0.08;
if (color.oklch.c > 0.06) {
color.oklch.c = 0.06;
}

return color;
Expand Down Expand Up @@ -672,15 +675,15 @@ export class DarkModeTheme implements ColorModeTheme {
// This ensures harmonious combination with main accents and neutrals.
const color = this.seedColor.clone();

color.oklch.l = 0.965;
color.oklch.l = 0.935;

// If seed color didn't have substantial amount of chroma make sure fg is achromatic.
if (this.seedIsAchromatic) {
color.oklch.c = 0;
}

if (!this.seedIsAchromatic) {
color.oklch.c = 0.024;
color.oklch.c = 0.012;
}

return color;
Expand All @@ -692,7 +695,7 @@ export class DarkModeTheme implements ColorModeTheme {

// 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) {
color.oklch.l = 0.79;
color.oklch.l = 0.82;

if (this.seedIsAchromatic) {
color.oklch.c = 0;
Expand Down Expand Up @@ -800,8 +803,17 @@ export class DarkModeTheme implements ColorModeTheme {
}

// Light and dark derivatives of the seed
tint.oklch.l = 0.94;
shade.oklch.l = 0.27;
tint.oklch.l = 0.92;
shade.oklch.l = 0.23;

// Chroma limits for tint and shade
if (tint.oklch.c >= 0.025) {
tint.oklch.c = 0.025;
}

if (shade.oklch.c >= 0.04) {
shade.oklch.c = 0.04;
}

// Check which of them has better contrast with bgAccent
if (-this.bgAccent.contrastAPCA(tint) < this.bgAccent.contrastAPCA(shade)) {
Expand Down Expand Up @@ -915,16 +927,16 @@ 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 regardless 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 threshold. −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;
color.oklch.l = 0.87;
color.oklch.c = 0;
}

if (!this.seedIsAchromatic) {
color.oklch.l = 0.75;
color.oklch.c = 0.15;
color.oklch.l = 0.84;
color.oklch.c = 0.13;
}
}

Expand All @@ -947,7 +959,7 @@ export class DarkModeTheme implements ColorModeTheme {
// Desatured version of the seed for harmonious combination with backgrounds and accents.
const color = this.bdAccent.clone();

color.oklch.c = 0.035;
color.oklch.c = 0.012;

if (this.seedIsAchromatic) {
color.oklch.c = 0;
Expand All @@ -957,6 +969,10 @@ export class DarkModeTheme implements ColorModeTheme {
color.oklch.l += 0.15;
}

if (this.bg.contrastAPCA(color) <= -25) {
color.oklch.l += 0.09;
}

return color;
}

Expand Down
43 changes: 28 additions & 15 deletions app/client/packages/design-system/theming/src/color/src/LightModeTheme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,16 +141,16 @@ export class LightModeTheme implements ColorModeTheme {
}

if (!this.seedIsVeryLight) {
color.oklch.l = 0.96;
color.oklch.l = 0.97;
}

// Cold colors can have a bit more chroma while staying perceptually neutral
if (this.seedIsCold) {
color.oklch.c = 0.009;
color.oklch.c = 0.002;
}

if (!this.seedIsCold) {
color.oklch.c = 0.007;
color.oklch.c = 0.001;
}

// If initial seed had non-substantial amount of chroma, make sure bg is achromatic.
Expand Down Expand Up @@ -340,11 +340,11 @@ export class LightModeTheme implements ColorModeTheme {
}

if (this.seedIsCold && !this.seedIsAchromatic) {
color.oklch.c = 0.03;
color.oklch.c = 0.002;
}

if (!this.seedIsCold && !this.seedIsAchromatic) {
color.oklch.c = 0.015;
color.oklch.c = 0.001;
}

return color;
Expand Down Expand Up @@ -413,8 +413,8 @@ export class LightModeTheme implements ColorModeTheme {
color.oklch.l = 0.93;
}

if (this.seedChroma > 0.01) {
color.oklch.c = 0.01;
if (this.seedChroma > 0.001) {
color.oklch.c = 0.001;
}

if (this.seedIsAchromatic) {
Expand Down Expand Up @@ -668,6 +668,10 @@ export class LightModeTheme implements ColorModeTheme {

color.oklch.l = 0.3;

if (color.oklch.c >= 0.02) {
color.oklch.c = 0.02;
}

color.alpha = 0.1;

return color;
Expand Down Expand Up @@ -711,7 +715,7 @@ export class LightModeTheme implements ColorModeTheme {
}

if (!this.seedIsAchromatic) {
color.oklch.c = 0.032;
color.oklch.c = 0.006;
}

return color;
Expand Down Expand Up @@ -743,19 +747,19 @@ export class LightModeTheme implements ColorModeTheme {

// Minimal contrast that we set for fgAccent (60) is too low for a gray color
if (this.bg.contrastAPCA(this.fgAccent) < 75) {
color.oklch.l -= 0.1;
color.oklch.l -= 0.2;
}

if (this.seedIsAchromatic) {
color.oklch.c = 0;
}

if (this.seedIsCold && !this.seedIsAchromatic) {
color.oklch.c = 0.05;
color.oklch.c = 0.003;
}

if (!this.seedIsCold && !this.seedIsAchromatic) {
color.oklch.c = 0.015;
color.oklch.c = 0.001;
}

return color;
Expand Down Expand Up @@ -834,6 +838,15 @@ export class LightModeTheme implements ColorModeTheme {
tint.oklch.l = 0.96;
shade.oklch.l = 0.23;

// Chroma limits for tint and shade
if (tint.oklch.c >= 0.015) {
tint.oklch.c = 0.015;
}

if (shade.oklch.c >= 0.03) {
shade.oklch.c = 0.03;
}

// Check which of them has better contrast with bgAccent
if (
-this.bgAccent.contrastAPCA(tint) >= this.bgAccent.contrastAPCA(shade)
Expand Down Expand Up @@ -952,13 +965,13 @@ export class LightModeTheme implements ColorModeTheme {
// 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;
color.oklch.l = 0.25;
color.oklch.c = 0;
}

if (!this.seedIsAchromatic) {
color.oklch.l = 0.55;
color.oklch.c = 0.25;
color.oklch.l = 0.45;
color.oklch.c = 0.15;
}
}

Expand All @@ -981,7 +994,7 @@ export class LightModeTheme implements ColorModeTheme {
// Desatured version of the seed for harmonious combination with backgrounds and accents.
const color = this.bdAccent.clone();

color.oklch.c = 0.035;
color.oklch.c = 0.001;

if (this.seedIsAchromatic) {
color.oklch.c = 0;
Expand Down
Loading

0 comments on commit 65a5f27

Please sign in to comment.