chore: WDS color cleanup (#25848)

Closes #25035

app/client/packages/design-system/theming/src/color/ColorsAccessor.ts

@@ -11,6 +11,18 @@ export class ColorsAccessor {
     return this;
   }
 
+  get lightness() {
+    return this.color.oklch.l;
+  }
+
+  get chroma() {
+    return this.color.oklch.c;
+  }
+
+  get hue() {
+    return this.color.oklch.h;
+  }
+
   /* Lightness */
   get isVeryDark() {
     return this.color.oklch.l < 0.3;
@@ -25,19 +37,11 @@ export class ColorsAccessor {
     return this.color.oklch.c < 0.04;
   }
 
-  get isColorful() {
-    return this.color.oklch.c > 0.136;
-  }
-
   /* Hue */
   get isCold() {
     return this.color.oklch.h >= 120 && this.color.oklch.h <= 300;
   }
 
-  get isBlue() {
-    return this.color.oklch.h >= 230 && this.color.oklch.h <= 270;
-  }
-
   get isGreen() {
     return this.color.oklch.h >= 116 && this.color.oklch.h <= 165;
   }
@@ -49,16 +53,4 @@ export class ColorsAccessor {
   get isRed() {
     return this.color.oklch.h >= 5 && this.color.oklch.h <= 49;
   }
-
-  get lightness() {
-    return this.color.oklch.l;
-  }
-
-  get chroma() {
-    return this.color.oklch.c;
-  }
-
-  get hue() {
-    return this.color.oklch.h;
-  }
 }

app/client/packages/design-system/theming/src/color/types.ts

@@ -11,6 +11,12 @@ export interface ColorModeTheme {
     bgAccentActive: string;
     bgAccentSubtleHover: string;
     bgAccentSubtleActive: string;
+    bgAssistive: string;
+    bgNeutral: string;
+    bgNeutralHover: string;
+    bgNeutralActive: string;
+    bgNeutralSubtleHover: string;
+    bgNeutralSubtleActive: string;
     bgPositive: string;
     bgPositiveHover: string;
     bgPositiveActive: string;
@@ -26,34 +32,36 @@ export interface ColorModeTheme {
     bgWarningActive: string;
     bgWarningSubtleHover: string;
     bgWarningSubtleActive: string;
-    bgNeutral: string;
-    bgNeutralHover: string;
-    bgNeutralActive: string;
-    bgNeutralSubtleHover: string;
-    bgNeutralSubtleActive: string;
     // fg
     fg: string;
     fgAccent: string;
-    fgNegative: string;
     fgNeutral: string;
     fgPositive: string;
+    fgNegative: string;
     fgWarning: string;
+    // fg on bg*
     fgOnAccent: string;
+    fgOnAssistive: string;
     fgOnNeutral: string;
     fgOnPositive: string;
-    fgOnWarning: string;
     fgOnNegative: string;
-    fgOnAssistive: string;
+    fgOnWarning: string;
     // bd
     bdAccent: string;
     bdFocus: string;
-    bdNegative: string;
-    bdNegativeHover: string;
     bdNeutral: string;
     bdNeutralHover: string;
     bdPositive: string;
     bdPositiveHover: string;
+    bdNegative: string;
+    bdNegativeHover: string;
     bdWarning: string;
     bdWarningHover: string;
+    // bd on bg*
+    bdOnAccent: string;
+    bdOnNeutral: string;
+    bdOnPositive: string;
+    bdOnNegative: string;
+    bdOnWarning: string;
   };
 }