refactor: adjust aura color palette, ensure better color contrast (#10520)

Author: jouni

packages/aura/src/palette.css

@@ -1,36 +1,34 @@
 :where(:root),
 :where(:host) {
-  --aura-red: oklch(0.6 0.22 25);
-  --aura-orange: oklch(0.61 0.4 93);
-  --aura-yellow: oklch(0.9 0.36 105);
-  --aura-green: oklch(0.6 0.28 160);
-  --aura-blue: oklch(0.6 0.3 240);
-  --aura-purple: oklch(0.6 0.3 280);
+  --aura-red: oklch(0.59 0.2 25);
+  --aura-orange: oklch(0.61 0.4 90);
+  --aura-yellow: oklch(0.9 0.45 105);
+  --aura-green: oklch(0.6 0.2 150);
+  --aura-blue: oklch(0.61 0.2 260);
+  --aura-purple: oklch(0.58 0.22 290);
 
-  --aura-red-text: color-mix(in srgb, var(--aura-red) calc(70% - 15% * var(--aura-contrast)), var(--vaadin-text-color));
-  --aura-orange-text: color-mix(
-    in srgb,
-    var(--aura-orange) calc(70% - 15% * var(--aura-contrast)),
-    var(--vaadin-text-color)
+  --aura-red-text: light-dark(
+    oklch(from var(--aura-red) min(0.55, 0.35 - 0.05 * var(--aura-contrast) + c * 0.75) calc(c * 0.9) h),
+    oklch(from var(--aura-red) max(0.8, 0.9 + 0.05 * var(--aura-contrast) - c * 0.75) calc(c * 0.9) h)
   );
-  --aura-yellow-text: color-mix(
-    in srgb,
-    var(--aura-yellow) calc(65% - 15% * var(--aura-contrast)),
-    var(--vaadin-text-color)
+  --aura-orange-text: light-dark(
+    oklch(from var(--aura-orange) min(0.55, 0.35 - 0.05 * var(--aura-contrast) + c * 0.75) calc(c * 0.9) h),
+    oklch(from var(--aura-orange) max(0.8, 0.9 + 0.05 * var(--aura-contrast) - c * 0.75) calc(c * 0.9) h)
   );
-  --aura-green-text: color-mix(
-    in srgb,
-    var(--aura-green) calc(70% - 15% * var(--aura-contrast)),
-    var(--vaadin-text-color)
+  --aura-yellow-text: light-dark(
+    oklch(from var(--aura-yellow) min(0.55, 0.35 - 0.05 * var(--aura-contrast) + c * 0.75) calc(c * 0.9) h),
+    oklch(from var(--aura-yellow) max(0.8, 0.9 + 0.05 * var(--aura-contrast) - c * 0.75) calc(c * 0.9) h)
   );
-  --aura-blue-text: color-mix(
-    in srgb,
-    var(--aura-blue) calc(70% - 15% * var(--aura-contrast)),
-    var(--vaadin-text-color)
+  --aura-green-text: light-dark(
+    oklch(from var(--aura-green) min(0.55, 0.35 - 0.05 * var(--aura-contrast) + c * 0.75) calc(c * 0.9) h),
+    oklch(from var(--aura-green) max(0.8, 0.9 + 0.05 * var(--aura-contrast) - c * 0.75) calc(c * 0.9) h)
   );
-  --aura-purple-text: color-mix(
-    in srgb,
-    var(--aura-purple) calc(70% - 15% * var(--aura-contrast)),
-    var(--vaadin-text-color)
+  --aura-blue-text: light-dark(
+    oklch(from var(--aura-blue) min(0.55, 0.35 - 0.05 * var(--aura-contrast) + c * 0.75) calc(c * 0.9) h),
+    oklch(from var(--aura-blue) max(0.8, 0.9 + 0.05 * var(--aura-contrast) - c * 0.75) calc(c * 0.9) h)
+  );
+  --aura-purple-text: light-dark(
+    oklch(from var(--aura-purple) min(0.55, 0.35 - 0.05 * var(--aura-contrast) + c * 0.75) calc(c * 0.9) h),
+    oklch(from var(--aura-purple) max(0.8, 0.9 + 0.05 * var(--aura-contrast) - c * 0.75) calc(c * 0.9) h)
   );
 }