fix(coach-mark,styles): use latest CSS

Author: castastrophe

.changeset/stale-candies-camp.md

@@ -0,0 +1,6 @@
+---
+'@spectrum-web-components/coachmark': patch
+'@spectrum-web-components/styles': patch
+---
+
+Remove unnecessary system theme references to reduce complexity for components that don't need the additional mapping layer.

packages/coachmark/package.json

@@ -88,8 +88,8 @@
         "@spectrum-web-components/shared": "1.6.0"
     },
     "devDependencies": {
-        "@spectrum-css/coachindicator": "3.0.1",
-        "@spectrum-css/coachmark": "8.0.0-s2-foundations.17"
+        "@spectrum-css/coachindicator": "4.1.0",
+        "@spectrum-css/coachmark": "9.1.1"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

packages/coachmark/src/coach-indicator-overrides.css

@@ -11,35 +11,3 @@ governing permissions and limitations under the License.
 */
 
 /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
-:host {
-    --spectrum-coach-indicator-ring-border-size: var(--system-coach-indicator-ring-border-size);
-    --spectrum-coach-indicator-min-inline-size: var(--system-coach-indicator-min-inline-size);
-    --spectrum-coach-indicator-min-block-size: var(--system-coach-indicator-min-block-size);
-    --spectrum-coach-indicator-inline-size: var(--system-coach-indicator-inline-size);
-    --spectrum-coach-indicator-block-size: var(--system-coach-indicator-block-size);
-    --spectrum-coach-indicator-ring-inline-size: var(--system-coach-indicator-ring-inline-size);
-    --spectrum-coach-indicator-ring-block-size: var(--system-coach-indicator-ring-block-size);
-    --spectrum-coach-indicator-ring-dark-color: var(--system-coach-indicator-ring-dark-color);
-    --spectrum-coach-indicator-ring-light-color: var(--system-coach-indicator-ring-light-color);
-    --spectrum-coach-indicator-top: var(--system-coach-indicator-top);
-    --spectrum-coach-indicator-left: var(--system-coach-indicator-left);
-    --spectrum-coach-animation-indicator-ring-duration: var(--system-coach-indicator-coach-animation-indicator-ring-duration);
-    --spectrum-coach-animation-indicator-ring-inner-delay-multiple: var(--system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple);
-    --spectrum-coach-animation-indicator-ring-center-delay-multiple: var(--system-coach-indicator-coach-animation-indicator-ring-center-delay-multiple);
-    --spectrum-coach-animation-indicator-ring-outer-delay-multiple: var(--system-coach-indicator-coach-animation-indicator-ring-outer-delay-multiple);
-    --spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple: var(--system-coach-indicator-quiet-animation-ring-inner-delay-multiple);
-    --spectrum-coach-indicator-animation-name: var(--system-coach-indicator-animation-name);
-    --spectrum-coach-indicator-inner-animation-delay-multiple: var(--system-coach-indicator-inner-animation-delay-multiple);
-    --spectrum-coach-indicator-animation-keyframe-0-scale: var(--system-coach-indicator-animation-keyframe-0-scale);
-    --spectrum-coach-indicator-animation-keyframe-0-opacity: var(--system-coach-indicator-animation-keyframe-0-opacity);
-    --spectrum-coach-indicator-animation-keyframe-50-scale: var(--system-coach-indicator-animation-keyframe-50-scale);
-    --spectrum-coach-indicator-animation-keyframe-50-opacity: var(--system-coach-indicator-animation-keyframe-50-opacity);
-    --spectrum-coach-indicator-animation-keyframe-100-scale: var(--system-coach-indicator-animation-keyframe-100-scale);
-    --spectrum-coach-indicator-animation-keyframe-100-opacity: var(--system-coach-indicator-animation-keyframe-100-opacity);
-    --spectrum-coach-indicator-quiet-animation-keyframe-0-scale: var(--system-coach-indicator-quiet-animation-keyframe-0-scale);
-}
-
-:host([quiet]) {
-    --spectrum-coach-indicator-quiet-ring-diameter-size: var(--system-coach-indicator-quiet-quiet-ring-diameter-size);
-    --spectrum-coach-indicator-animation-name: var(--system-coach-indicator-quiet-animation-name);
-}

packages/coachmark/src/coach-indicator.css

@@ -11,7 +11,6 @@ governing permissions and limitations under the License.
 */
 
 @import url('./spectrum-coach-indicator.css');
-@import url('./coach-indicator-overrides.css');
 
 :host {
     display: inline-block;

packages/coachmark/src/coachmark-overrides.css

@@ -11,36 +11,3 @@ governing permissions and limitations under the License.
 */
 
 /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
-:host {
-    --spectrum-coachmark-min-width: var(--system-coach-mark-min-width);
-    --spectrum-coachmark-width: var(--system-coach-mark-width);
-    --spectrum-coachmark-max-width: var(--system-coach-mark-max-width);
-    --spectrum-coachmark-media-height: var(--system-coach-mark-media-height);
-    --spectrum-coachmark-media-min-height: var(--system-coach-mark-media-min-height);
-    --spectrum-coachmark-padding: var(--system-coach-mark-padding);
-    --spectrum-coachmark-heading-to-action-button: var(--system-coach-mark-heading-to-action-button);
-    --spectrum-coachmark-header-to-body: var(--system-coach-mark-header-to-body);
-    --spectrum-coachmark-body-to-footer: var(--system-coach-mark-body-to-footer);
-    --spectrum-coachmark-title-color: var(--system-coach-mark-title-color);
-    --spectrum-coachmark-title-font-family: var(--system-coach-mark-title-font-family);
-    --spectrum-coachmark-title-font-style: var(--system-coach-mark-title-font-style);
-    --spectrum-coachmark-title-text-font-weight: var(--system-coach-mark-title-text-font-weight);
-    --spectrum-coachmark-title-font-size: var(--system-coach-mark-title-font-size);
-    --spectrum-coachmark-title-text-line-height: var(--system-coach-mark-title-text-line-height);
-    --spectrum-coachmark-content-font-color: var(--system-coach-mark-content-font-color);
-    --spectrum-coachmark-content-font-weight: var(--system-coach-mark-content-font-weight);
-    --spectrum-coachmark-content-font-family: var(--system-coach-mark-content-font-family);
-    --spectrum-coachmark-content-font-style: var(--system-coach-mark-content-font-style);
-    --spectrum-coachmark-content-line-height: var(--system-coach-mark-content-line-height);
-    --spectrum-coachmark-content-font-size: var(--system-coach-mark-content-font-size);
-    --spectrum-coachmark-step-color: var(--system-coach-mark-step-color);
-    --spectrum-coachmark-step-font-weight: var(--system-coach-mark-step-font-weight);
-    --spectrum-coachmark-step-font-family: var(--system-coach-mark-step-font-family);
-    --spectrum-coachmark-step-font-style: var(--system-coach-mark-step-font-style);
-    --spectrum-coachmark-step-line-height: var(--system-coach-mark-step-line-height);
-    --spectrum-coachmark-step-font-size: var(--system-coach-mark-step-font-size);
-    --spectrum-coachmark-step-to-bottom: var(--system-coach-mark-step-to-bottom);
-    --spectrum-coachmark-popover-border-width: var(--system-coach-mark-popover-border-width);
-    --spectrum-coachmark-popover-corner-radius: var(--system-coach-mark-popover-corner-radius);
-    --spectrum-coachmark-buttongroup-spacing-horizontal: var(--system-coach-mark-buttongroup-spacing-horizontal);
-}

packages/coachmark/src/coachmark.css

@@ -11,7 +11,6 @@ governing permissions and limitations under the License.
 */
 
 @import url('./spectrum-coachmark.css');
-@import url('./coachmark-overrides.css');
 
 :host {
     /** custom to coachmark should be removed once keys component is developed by CSS **/

packages/coachmark/src/spectrum-coach-indicator.css

@@ -12,58 +12,74 @@ governing permissions and limitations under the License.
 
 /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
 :host {
+    --spectrum-coach-indicator-ring-border-size: var(--spectrum-border-width-200);
+    --spectrum-coach-indicator-sizing-multiple: 3;
+    --spectrum-coach-indicator-ring-diameter-size: var(--mod-coach-indicator-ring-diameter, var(--spectrum-coach-indicator-ring-diameter));
+    --spectrum-coach-indicator-min-inline-size: calc(var(--spectrum-coach-indicator-ring-diameter-size) * var(--spectrum-coach-indicator-sizing-multiple));
+    --spectrum-coach-indicator-min-block-size: calc(var(--spectrum-coach-indicator-ring-diameter-size) * var(--spectrum-coach-indicator-sizing-multiple));
+    --spectrum-coach-indicator-inline-size: var(--mod-coach-indicator-inline-size, var(--spectrum-coach-indicator-min-inline-size));
+    --spectrum-coach-indicator-block-size: var(--mod-coach-indicator-block-size, var(--spectrum-coach-indicator-min-block-size));
+    --spectrum-coach-animation-indicator-ring-duration: var(--spectrum-animation-duration-6000);
+    --spectrum-coach-indicator-animation-keyframe-scale-initial: 1;
+    --spectrum-coach-indicator-animation-ring-inner-delay-multiple: var(--mod-coach-indicator-inner-animation-delay-multiple, -0.5);
     margin: var(--mod-coach-indicator-gap, var(--spectrum-coach-indicator-gap));
     min-inline-size: var(--mod-coach-indicator-min-inline-size, var(--spectrum-coach-indicator-min-inline-size));
     min-block-size: var(--mod-coach-indicator-min-block-size, var(--spectrum-coach-indicator-min-block-size));
-    inline-size: var(--mod-coach-indicator-inline-size, var(--spectrum-coach-indicator-inline-size));
-    block-size: var(--mod-coach-indicator-block-size, var(--spectrum-coach-indicator-block-size));
+    inline-size: var(--spectrum-coach-indicator-inline-size);
+    block-size: var(--spectrum-coach-indicator-block-size);
     position: relative;
 }
 
 :host([quiet]) {
-    --mod-coach-indicator-min-inline-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size)) * 2.75);
-    --mod-coach-indicator-min-block-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size)) * 2.75);
-    --mod-coach-indicator-inline-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size)) * 2.75);
-    --mod-coach-indicator-block-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size)) * 2.75);
-    --mod-coach-indicator-ring-inline-size: var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size));
-    --mod-coach-indicator-ring-block-size: var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size));
-    --mod-coach-indicator-top: calc(var(--mod-coach-indicator-min-inline-size) / 3 - var(--spectrum-coach-indicator-ring-border-size));
-    --mod-coach-indicator-left: calc(var(--mod-coach-indicator-min-inline-size) / 3 - var(--spectrum-coach-indicator-ring-border-size));
-    --mod-coach-indicator-inner-animation-delay-multiple: var(--mod-coach-indicator-quiet-animation-ring-inner-delay-multiple, var(--spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple));
+    --spectrum-coach-indicator-animation-keyframe-scale-initial: 0.8;
+    --spectrum-coach-indicator-sizing-multiple: 2.75;
+    --spectrum-coach-indicator-ring-diameter-size: var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter));
+    --spectrum-coach-indicator-animation-ring-inner-delay-multiple: var(--mod-coach-indicator-quiet-animation-ring-inner-delay-multiple, -0.33);
+}
+
+:host([static-color="white"]) {
+    --spectrum-coach-indicator-ring-default-color: var(--mod-coach-indicator-ring-light-color, var(--spectrum-white));
+}
+
+:host([static-color="black"]) {
+    --spectrum-coach-indicator-ring-default-color: var(--mod-coach-indicator-ring-dark-color, var(--spectrum-black));
+}
+
+:host .spectrum-CoachIndicator--staticWhite {
+    --spectrum-coach-indicator-ring-default-color: var(--spectrum-white);
+}
+
+:host .spectrum-CoachIndicator--staticBlack {
+    --spectrum-coach-indicator-ring-default-color: var(--spectrum-black);
 }
 
 .ring {
     border-style: solid;
     border-width: var(--mod-coach-indicator-ring-border-size, var(--spectrum-coach-indicator-ring-border-size));
     border-color: var(--mod-coach-indicator-ring-default-color, var(--spectrum-coach-indicator-ring-default-color));
-    inline-size: var(--mod-coach-indicator-ring-inline-size, var(--spectrum-coach-indicator-ring-inline-size));
-    block-size: var(--mod-coach-indicator-ring-block-size, var(--spectrum-coach-indicator-ring-block-size));
-    animation: var(--mod-coach-indicator-animation-name, var(--spectrum-coach-indicator-animation-name)) var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) linear infinite;
+    inline-size: var(--mod-coach-indicator-ring-inline-size, var(--spectrum-coach-indicator-ring-diameter-size));
+    block-size: var(--mod-coach-indicator-ring-block-size, var(--spectrum-coach-indicator-ring-diameter-size));
+    animation: pulse var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) linear infinite;
+    animation: var(--mod-coach-indicator-animation-name, pulse) var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) linear infinite;
     border-radius: 50%;
     display: block;
     position: absolute;
-    inset-block-start: var(--mod-coach-indicator-top, var(--spectrum-coach-indicator-top));
-    inset-inline-start: var(--mod-coach-indicator-left, var(--spectrum-coach-indicator-left));
+    inset-block-start: var(--mod-coach-indicator-top, calc(var(--spectrum-coach-indicator-block-size) / 3 - var(--spectrum-coach-indicator-ring-border-size)));
+    inset-inline-start: var(--mod-coach-indicator-left, calc(var(--spectrum-coach-indicator-inline-size) / 3 - var(--spectrum-coach-indicator-ring-border-size)));
 }
 
 .ring:first-child {
-    animation-delay: calc(var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) * var(--mod-coach-indicator-inner-animation-delay-multiple, var(--spectrum-coach-indicator-inner-animation-delay-multiple)));
+    animation-delay: calc(var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) * var(--spectrum-coach-indicator-animation-ring-inner-delay-multiple));
 }
 
 .ring:nth-child(2) {
-    animation-delay: calc(var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) * var(--mod-coach-animation-indicator-ring-center-delay-multiple, var(--spectrum-coach-animation-indicator-ring-center-delay-multiple)));
+    animation-delay: calc(var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) * -0.66);
+    animation-delay: calc(var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) * var(--mod-coach-animation-indicator-ring-center-delay-multiple, -0.66));
 }
 
 .ring:nth-child(3) {
-    animation-delay: calc(var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) * var(--mod-coach-animation-indicator-ring-outer-delay-multiple, var(--spectrum-coach-animation-indicator-ring-outer-delay-multiple)));
-}
-
-:host([static-color="white"]) .ring {
-    border-color: var(--mod-coach-indicator-ring-light-color, var(--spectrum-coach-indicator-ring-light-color));
-}
-
-:host([static-color="black"]) .ring {
-    border-color: var(--mod-coach-indicator-ring-dark-color, var(--spectrum-coach-indicator-ring-dark-color));
+    animation-delay: calc(var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) * -1);
+    animation-delay: calc(var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) * var(--mod-coach-animation-indicator-ring-outer-delay-multiple, -1));
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -74,34 +90,17 @@ governing permissions and limitations under the License.
 
 @keyframes pulse {
     0% {
-        transform: scale(var(--spectrum-coach-indicator-animation-keyframe-0-scale));
-        opacity: var(--spectrum-coach-indicator-animation-keyframe-0-opacity);
-    }
-
-    50% {
-        transform: scale(var(--spectrum-coach-indicator-animation-keyframe-50-scale));
-        opacity: var(--spectrum-coach-indicator-animation-keyframe-50-opacity);
-    }
-
-    to {
-        transform: scale(var(--spectrum-coach-indicator-animation-keyframe-100-scale));
-        opacity: var(--spectrum-coach-indicator-animation-keyframe-100-opacity);
-    }
-}
-
-@keyframes pulse-quiet {
-    0% {
-        transform: scale(var(--spectrum-coach-indicator-quiet-animation-keyframe-0-scale));
-        opacity: var(--spectrum-coach-indicator-animation-keyframe-0-opacity);
+        transform: scale(var(--spectrum-coach-indicator-animation-keyframe-scale-initial));
+        opacity: 0;
     }
 
     50% {
-        transform: scale(var(--spectrum-coach-indicator-animation-keyframe-50-scale));
-        opacity: var(--spectrum-coach-indicator-animation-keyframe-50-opacity);
+        opacity: 1;
+        transform: scale(1.5);
     }
 
     to {
-        transform: scale(var(--spectrum-coach-indicator-animation-keyframe-100-scale));
-        opacity: var(--spectrum-coach-indicator-animation-keyframe-100-opacity);
+        opacity: 0;
+        transform: scale(2);
     }
 }