refactor: rename and move safari 17 workaround custom property (#10514)

Author: jouni

packages/component-base/src/styles/style-props.js

@@ -120,6 +120,12 @@ addGlobalThemeStyles(
         --safe-area-inset-left: env(safe-area-inset-left, 0px);
       }
 
+      @supports not (color: hsl(0 0 0)) {
+        :where(html) {
+          --_vaadin-safari-17-deg: 1deg;
+        }
+      }
+
       @media (forced-colors: active) {
         html {
           --vaadin-background-color: Canvas;

packages/component-base/src/styles/user-colors.js

@@ -16,44 +16,37 @@ addGlobalThemeStyles(
         --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) 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))
+            calc(h - var(--_hue-step) * 2 * var(--_vaadin-safari-17-deg, 1))
         );
         --vaadin-user-color-2: oklch(
-          from var(--vaadin-user-color-0) l c calc(h - var(--_hue-step) * -2 * var(---_vaadin-safari-17-deg, 1))
+          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) 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))
+            calc(h - var(--_hue-step) * 0 * var(--_vaadin-safari-17-deg, 1))
         );
         --vaadin-user-color-4: oklch(
-          from var(--vaadin-user-color-0) l c calc(h - var(--_hue-step) * 2 * var(---_vaadin-safari-17-deg, 1))
+          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) 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))
+            calc(h - var(--_hue-step) * -2 * var(--_vaadin-safari-17-deg, 1))
         );
         --vaadin-user-color-6: oklch(
-          from var(--vaadin-user-color-0) l c calc(h - var(--_hue-step) * -4 * var(---_vaadin-safari-17-deg, 1))
+          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) 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))
+            calc(h - var(--_hue-step) * 4 * var(--_vaadin-safari-17-deg, 1))
         );
         --vaadin-user-color-8: oklch(
-          from var(--vaadin-user-color-0) l c calc(h - var(--_hue-step) * 4 * var(---_vaadin-safari-17-deg, 1))
+          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) 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))
+            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;
-        }
-      }
     }
   `,
 );