Simpler focus logic

appsmithorg · Sep 28, 2023 · 9466d45 · 9466d45
1 parent 35cfc0f
commit 9466d45
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 36 deletions.
diff --git a/app/client/packages/design-system/theming/src/color/src/DarkModeTheme.ts b/app/client/packages/design-system/theming/src/color/src/DarkModeTheme.ts
@@ -841,30 +841,14 @@ export class DarkModeTheme implements ColorModeTheme {
  }
 
  private get bdFocus() {
- // Keyboard focus outline. Doesn't match the seed to increase contrast
- const color = this.seedColor.clone();
-
- if (this.seedLightness < 0.4) {
- color.oklch.l = 0.4;
- }
-
- if (this.seedLightness > 0.65) {
- color.oklch.l = 0.65;
- }
+ // Keyboard focus outline
+ const color = this.bdAccent.clone();
 
  // Achromatic seeds still produce colorful focus; this is good for accessibility even though it affects visual style
  if (this.seedChroma < 0.12) {
  color.oklch.c = 0.12;
  }
 
- // Green-red color blindness is among the most prevalent, so instead of 180 we're rotating hue by additional 60°
- color.oklch.h -= 240;
-
- // Additional adjustments for red, pinks, magentas
- if ((this.seedHue >= 0 && this.seedHue <= 55) || this.seedHue >= 340) {
- color.oklch.h += 160;
- }
-
  return color;
  }
 

diff --git a/app/client/packages/design-system/theming/src/color/src/LightModeTheme.ts b/app/client/packages/design-system/theming/src/color/src/LightModeTheme.ts
@@ -872,30 +872,14 @@ export class LightModeTheme implements ColorModeTheme {
  }
 
  private get bdFocus() {
- // Keyboard focus outline. Doesn't match the seed to increase contrast
- const color = this.seedColor.clone();
-
- if (this.seedLightness < 0.6) {
- color.oklch.l = 0.6;
- }
-
- if (this.seedLightness > 0.8) {
- color.oklch.l = 0.8;
- }
+ // Keyboard focus outline
+ const color = this.bdAccent.clone();
 
  // Achromatic seeds still produce colorful focus; this is good for accessibility even though it affects visual style
  if (this.seedChroma < 0.15) {
  color.oklch.c = 0.15;
  }
 
- // Green-red color blindness is among the most prevalent, so instead of 180 we're rotating hue by additional 60°
- color.oklch.h -= 240;
-
- // Additional adjustments for red, pinks, magentas
- if ((this.seedHue >= 0 && this.seedHue <= 55) || this.seedHue >= 340) {
- color.oklch.h += 160;
- }
-
  return color;
  }