fix: update base styles user colors to work in Safari 17 (#10361)

Author: jouni

packages/avatar-group/test/visual/base/screenshots/avatar-group/baseline/color-index.png

@@ -12,36 +12,48 @@ addGlobalThemeStyles(
     @layer vaadin.base {
       :where(html) {
         --_color-count: 10;
-        --_hue-step: calc(360 / var(--_color-count) - 1);
-        --vaadin-user-color-0: var(--vaadin-user-color, #4172d5);
+        --_hue-step: round(360 / var(--_color-count), 1);
+        --vaadin-user-color-0: var(--vaadin-user-color, oklch(0.52 0.2 240));
         --vaadin-user-color-1: oklch(
-          from var(--vaadin-user-color-0) max(0.2, l - 0.1) c calc(h - var(--_hue-step) * 1)
+          from var(--vaadin-user-color-0) calc(0.62 + clamp(-0.15, (0.6201 - l) * 10000, 0.15)) c
+            calc(h - var(--_hue-step) * 2 * var(---_vaadin-safari-17-deg, 1))
         );
         --vaadin-user-color-2: oklch(
-          from var(--vaadin-user-color-0) min(l + 0.1, 0.8) c calc(h - var(--_hue-step) * 2)
+          from var(--vaadin-user-color-0) l c calc(h - var(--_hue-step) * -2 * var(---_vaadin-safari-17-deg, 1))
         );
         --vaadin-user-color-3: oklch(
-          from var(--vaadin-user-color-0) max(0.2, l - 0.1) c calc(h - var(--_hue-step) * 3)
+          from var(--vaadin-user-color-0) calc(0.62 + clamp(-0.15, (0.6201 - l) * 10000, 0.15)) c
+            calc(h - var(--_hue-step) * 0 * var(---_vaadin-safari-17-deg, 1))
         );
         --vaadin-user-color-4: oklch(
-          from var(--vaadin-user-color-0) min(l + 0.1, 0.8) c calc(h - var(--_hue-step) * 4)
+          from var(--vaadin-user-color-0) l c calc(h - var(--_hue-step) * 2 * var(---_vaadin-safari-17-deg, 1))
         );
         --vaadin-user-color-5: oklch(
-          from var(--vaadin-user-color-0) max(0.2, l - 0.1) c calc(h - var(--_hue-step) * 5)
+          from var(--vaadin-user-color-0) calc(0.62 + clamp(-0.15, (0.6201 - l) * 10000, 0.15)) c
+            calc(h - var(--_hue-step) * -2 * var(---_vaadin-safari-17-deg, 1))
         );
         --vaadin-user-color-6: oklch(
-          from var(--vaadin-user-color-0) min(l + 0.1, 0.8) c calc(h - var(--_hue-step) * 6)
+          from var(--vaadin-user-color-0) l c calc(h - var(--_hue-step) * -4 * var(---_vaadin-safari-17-deg, 1))
         );
         --vaadin-user-color-7: oklch(
-          from var(--vaadin-user-color-0) max(0.2, l - 0.1) c calc(h - var(--_hue-step) * 7)
+          from var(--vaadin-user-color-0) calc(0.62 + clamp(-0.15, (0.6201 - l) * 10000, 0.15)) c
+            calc(h - var(--_hue-step) * 4 * var(---_vaadin-safari-17-deg, 1))
         );
         --vaadin-user-color-8: oklch(
-          from var(--vaadin-user-color-0) min(l + 0.1, 0.8) c calc(h - var(--_hue-step) * 8)
+          from var(--vaadin-user-color-0) l c calc(h - var(--_hue-step) * 4 * var(---_vaadin-safari-17-deg, 1))
         );
         --vaadin-user-color-9: oklch(
-          from var(--vaadin-user-color-0) max(0.2, l - 0.1) c calc(h - var(--_hue-step) * 9)
+          from var(--vaadin-user-color-0) calc(0.62 + clamp(-0.15, (0.6201 - l) * 10000, 0.15)) c
+            calc(h - var(--_hue-step) * 6 * var(---_vaadin-safari-17-deg, 1))
         );
       }
+
+      @supports not (color: hsl(0 0 0)) {
+        :where(:root),
+        :where(:host) {
+          ---_vaadin-safari-17-deg: 1deg;
+        }
+      }
     }
   `,
 );