Skip to content

Commit 8e15efa

Browse files
castastrophecastastrophe
committed
fix(coach-mark,styles): use latest CSS
1 parent 3fb2b4e commit 8e15efa

12 files changed

+143
-613
lines changed

‎.changeset/brave-crews-win.md

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
'@spectrum-web-components/action-bar': patch
44
'@spectrum-web-components/button-group': patch
55
'@spectrum-web-components/card': patch
6+
'@spectrum-web-components/coachmark': patch
67
'@spectrum-web-components/color-area': patch
78
'@spectrum-web-components/color-loupe': patch
89
'@spectrum-web-components/styles': patch

‎packages/coachmark/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -82,8 +82,8 @@
8282
"@spectrum-web-components/shared": "1.4.0"
8383
},
8484
"devDependencies": {
85-
"@spectrum-css/coachindicator": "3.0.1",
86-
"@spectrum-css/coachmark": "8.0.0-s2-foundations.17"
85+
"@spectrum-css/coachindicator": "4.1.0",
86+
"@spectrum-css/coachmark": "9.1.1"
8787
},
8888
"types": "./src/index.d.ts",
8989
"customElements": "custom-elements.json",

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

-82
Original file line numberDiff line numberDiff line change
@@ -11,85 +11,3 @@ governing permissions and limitations under the License.
1111
*/
1212

1313
/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
14-
:host {
15-
--spectrum-coach-indicator-ring-border-size: var(
16-
--system-coach-indicator-ring-border-size
17-
);
18-
--spectrum-coach-indicator-min-inline-size: var(
19-
--system-coach-indicator-min-inline-size
20-
);
21-
--spectrum-coach-indicator-min-block-size: var(
22-
--system-coach-indicator-min-block-size
23-
);
24-
--spectrum-coach-indicator-inline-size: var(
25-
--system-coach-indicator-inline-size
26-
);
27-
--spectrum-coach-indicator-block-size: var(
28-
--system-coach-indicator-block-size
29-
);
30-
--spectrum-coach-indicator-ring-inline-size: var(
31-
--system-coach-indicator-ring-inline-size
32-
);
33-
--spectrum-coach-indicator-ring-block-size: var(
34-
--system-coach-indicator-ring-block-size
35-
);
36-
--spectrum-coach-indicator-ring-dark-color: var(
37-
--system-coach-indicator-ring-dark-color
38-
);
39-
--spectrum-coach-indicator-ring-light-color: var(
40-
--system-coach-indicator-ring-light-color
41-
);
42-
--spectrum-coach-indicator-top: var(--system-coach-indicator-top);
43-
--spectrum-coach-indicator-left: var(--system-coach-indicator-left);
44-
--spectrum-coach-animation-indicator-ring-duration: var(
45-
--system-coach-indicator-coach-animation-indicator-ring-duration
46-
);
47-
--spectrum-coach-animation-indicator-ring-inner-delay-multiple: var(
48-
--system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple
49-
);
50-
--spectrum-coach-animation-indicator-ring-center-delay-multiple: var(
51-
--system-coach-indicator-coach-animation-indicator-ring-center-delay-multiple
52-
);
53-
--spectrum-coach-animation-indicator-ring-outer-delay-multiple: var(
54-
--system-coach-indicator-coach-animation-indicator-ring-outer-delay-multiple
55-
);
56-
--spectrum-coach-indicator-quiet-animation-ring-inner-delay-multiple: var(
57-
--system-coach-indicator-quiet-animation-ring-inner-delay-multiple
58-
);
59-
--spectrum-coach-indicator-animation-name: var(
60-
--system-coach-indicator-animation-name
61-
);
62-
--spectrum-coach-indicator-inner-animation-delay-multiple: var(
63-
--system-coach-indicator-inner-animation-delay-multiple
64-
);
65-
--spectrum-coach-indicator-animation-keyframe-0-scale: var(
66-
--system-coach-indicator-animation-keyframe-0-scale
67-
);
68-
--spectrum-coach-indicator-animation-keyframe-0-opacity: var(
69-
--system-coach-indicator-animation-keyframe-0-opacity
70-
);
71-
--spectrum-coach-indicator-animation-keyframe-50-scale: var(
72-
--system-coach-indicator-animation-keyframe-50-scale
73-
);
74-
--spectrum-coach-indicator-animation-keyframe-50-opacity: var(
75-
--system-coach-indicator-animation-keyframe-50-opacity
76-
);
77-
--spectrum-coach-indicator-animation-keyframe-100-scale: var(
78-
--system-coach-indicator-animation-keyframe-100-scale
79-
);
80-
--spectrum-coach-indicator-animation-keyframe-100-opacity: var(
81-
--system-coach-indicator-animation-keyframe-100-opacity
82-
);
83-
--spectrum-coach-indicator-quiet-animation-keyframe-0-scale: var(
84-
--system-coach-indicator-quiet-animation-keyframe-0-scale
85-
);
86-
}
87-
88-
:host([quiet]) {
89-
--spectrum-coach-indicator-quiet-ring-diameter-size: var(
90-
--system-coach-indicator-quiet-quiet-ring-diameter-size
91-
);
92-
--spectrum-coach-indicator-animation-name: var(
93-
--system-coach-indicator-quiet-animation-name
94-
);
95-
}

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

-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ governing permissions and limitations under the License.
1111
*/
1212

1313
@import url('./spectrum-coach-indicator.css');
14-
@import url('./coach-indicator-overrides.css');
1514

1615
:host {
1716
display: inline-block;

‎packages/coachmark/src/coachmark-overrides.css

-81
Original file line numberDiff line numberDiff line change
@@ -11,84 +11,3 @@ governing permissions and limitations under the License.
1111
*/
1212

1313
/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
14-
:host {
15-
--spectrum-coachmark-min-width: var(--system-coach-mark-min-width);
16-
--spectrum-coachmark-width: var(--system-coach-mark-width);
17-
--spectrum-coachmark-max-width: var(--system-coach-mark-max-width);
18-
--spectrum-coachmark-media-height: var(--system-coach-mark-media-height);
19-
--spectrum-coachmark-media-min-height: var(
20-
--system-coach-mark-media-min-height
21-
);
22-
--spectrum-coachmark-padding: var(--system-coach-mark-padding);
23-
--spectrum-coachmark-heading-to-action-button: var(
24-
--system-coach-mark-heading-to-action-button
25-
);
26-
--spectrum-coachmark-header-to-body: var(
27-
--system-coach-mark-header-to-body
28-
);
29-
--spectrum-coachmark-body-to-footer: var(
30-
--system-coach-mark-body-to-footer
31-
);
32-
--spectrum-coachmark-title-color: var(--system-coach-mark-title-color);
33-
--spectrum-coachmark-title-font-family: var(
34-
--system-coach-mark-title-font-family
35-
);
36-
--spectrum-coachmark-title-font-style: var(
37-
--system-coach-mark-title-font-style
38-
);
39-
--spectrum-coachmark-title-text-font-weight: var(
40-
--system-coach-mark-title-text-font-weight
41-
);
42-
--spectrum-coachmark-title-font-size: var(
43-
--system-coach-mark-title-font-size
44-
);
45-
--spectrum-coachmark-title-text-line-height: var(
46-
--system-coach-mark-title-text-line-height
47-
);
48-
--spectrum-coachmark-content-font-color: var(
49-
--system-coach-mark-content-font-color
50-
);
51-
--spectrum-coachmark-content-font-weight: var(
52-
--system-coach-mark-content-font-weight
53-
);
54-
--spectrum-coachmark-content-font-family: var(
55-
--system-coach-mark-content-font-family
56-
);
57-
--spectrum-coachmark-content-font-style: var(
58-
--system-coach-mark-content-font-style
59-
);
60-
--spectrum-coachmark-content-line-height: var(
61-
--system-coach-mark-content-line-height
62-
);
63-
--spectrum-coachmark-content-font-size: var(
64-
--system-coach-mark-content-font-size
65-
);
66-
--spectrum-coachmark-step-color: var(--system-coach-mark-step-color);
67-
--spectrum-coachmark-step-font-weight: var(
68-
--system-coach-mark-step-font-weight
69-
);
70-
--spectrum-coachmark-step-font-family: var(
71-
--system-coach-mark-step-font-family
72-
);
73-
--spectrum-coachmark-step-font-style: var(
74-
--system-coach-mark-step-font-style
75-
);
76-
--spectrum-coachmark-step-line-height: var(
77-
--system-coach-mark-step-line-height
78-
);
79-
--spectrum-coachmark-step-font-size: var(
80-
--system-coach-mark-step-font-size
81-
);
82-
--spectrum-coachmark-step-to-bottom: var(
83-
--system-coach-mark-step-to-bottom
84-
);
85-
--spectrum-coachmark-popover-border-width: var(
86-
--system-coach-mark-popover-border-width
87-
);
88-
--spectrum-coachmark-popover-corner-radius: var(
89-
--system-coach-mark-popover-corner-radius
90-
);
91-
--spectrum-coachmark-buttongroup-spacing-horizontal: var(
92-
--system-coach-mark-buttongroup-spacing-horizontal
93-
);
94-
}

‎packages/coachmark/src/coachmark.css

-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ governing permissions and limitations under the License.
1111
*/
1212

1313
@import url('./spectrum-coachmark.css');
14-
@import url('./coachmark-overrides.css');
1514

1615
:host {
1716
/** custom to coachmark should be removed once keys component is developed by CSS **/

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

+49-50
Original file line numberDiff line numberDiff line change
@@ -12,58 +12,74 @@ governing permissions and limitations under the License.
1212

1313
/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
1414
:host {
15+
--spectrum-coach-indicator-ring-border-size: var(--spectrum-border-width-200);
16+
--spectrum-coach-indicator-sizing-multiple: 3;
17+
--spectrum-coach-indicator-ring-diameter-size: var(--mod-coach-indicator-ring-diameter, var(--spectrum-coach-indicator-ring-diameter));
18+
--spectrum-coach-indicator-min-inline-size: calc(var(--spectrum-coach-indicator-ring-diameter-size) * var(--spectrum-coach-indicator-sizing-multiple));
19+
--spectrum-coach-indicator-min-block-size: calc(var(--spectrum-coach-indicator-ring-diameter-size) * var(--spectrum-coach-indicator-sizing-multiple));
20+
--spectrum-coach-indicator-inline-size: var(--mod-coach-indicator-inline-size, var(--spectrum-coach-indicator-min-inline-size));
21+
--spectrum-coach-indicator-block-size: var(--mod-coach-indicator-block-size, var(--spectrum-coach-indicator-min-block-size));
22+
--spectrum-coach-animation-indicator-ring-duration: var(--spectrum-animation-duration-6000);
23+
--spectrum-coach-indicator-animation-keyframe-scale-initial: 1;
24+
--spectrum-coach-indicator-animation-ring-inner-delay-multiple: var(--mod-coach-indicator-inner-animation-delay-multiple, -0.5);
1525
margin: var(--mod-coach-indicator-gap, var(--spectrum-coach-indicator-gap));
1626
min-inline-size: var(--mod-coach-indicator-min-inline-size, var(--spectrum-coach-indicator-min-inline-size));
1727
min-block-size: var(--mod-coach-indicator-min-block-size, var(--spectrum-coach-indicator-min-block-size));
18-
inline-size: var(--mod-coach-indicator-inline-size, var(--spectrum-coach-indicator-inline-size));
19-
block-size: var(--mod-coach-indicator-block-size, var(--spectrum-coach-indicator-block-size));
28+
inline-size: var(--spectrum-coach-indicator-inline-size);
29+
block-size: var(--spectrum-coach-indicator-block-size);
2030
position: relative;
2131
}
2232

2333
:host([quiet]) {
24-
--mod-coach-indicator-min-inline-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size)) * 2.75);
25-
--mod-coach-indicator-min-block-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size)) * 2.75);
26-
--mod-coach-indicator-inline-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size)) * 2.75);
27-
--mod-coach-indicator-block-size: calc(var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size)) * 2.75);
28-
--mod-coach-indicator-ring-inline-size: var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size));
29-
--mod-coach-indicator-ring-block-size: var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter-size));
30-
--mod-coach-indicator-top: calc(var(--mod-coach-indicator-min-inline-size) / 3 - var(--spectrum-coach-indicator-ring-border-size));
31-
--mod-coach-indicator-left: calc(var(--mod-coach-indicator-min-inline-size) / 3 - var(--spectrum-coach-indicator-ring-border-size));
32-
--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));
34+
--spectrum-coach-indicator-animation-keyframe-scale-initial: 0.8;
35+
--spectrum-coach-indicator-sizing-multiple: 2.75;
36+
--spectrum-coach-indicator-ring-diameter-size: var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter));
37+
--spectrum-coach-indicator-animation-ring-inner-delay-multiple: var(--mod-coach-indicator-quiet-animation-ring-inner-delay-multiple, -0.33);
38+
}
39+
40+
:host([static-color='white']) {
41+
--spectrum-coach-indicator-ring-default-color: var(--mod-coach-indicator-ring-light-color, var(--spectrum-white));
42+
}
43+
44+
:host([static-color='black']) {
45+
--spectrum-coach-indicator-ring-default-color: var(--mod-coach-indicator-ring-dark-color, var(--spectrum-black));
46+
}
47+
48+
:host .spectrum-CoachIndicator--staticWhite {
49+
--spectrum-coach-indicator-ring-default-color: var(--spectrum-white);
50+
}
51+
52+
:host .spectrum-CoachIndicator--staticBlack {
53+
--spectrum-coach-indicator-ring-default-color: var(--spectrum-black);
3354
}
3455

3556
.ring {
3657
border-style: solid;
3758
border-width: var(--mod-coach-indicator-ring-border-size, var(--spectrum-coach-indicator-ring-border-size));
3859
border-color: var(--mod-coach-indicator-ring-default-color, var(--spectrum-coach-indicator-ring-default-color));
39-
inline-size: var(--mod-coach-indicator-ring-inline-size, var(--spectrum-coach-indicator-ring-inline-size));
40-
block-size: var(--mod-coach-indicator-ring-block-size, var(--spectrum-coach-indicator-ring-block-size));
41-
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;
60+
inline-size: var(--mod-coach-indicator-ring-inline-size, var(--spectrum-coach-indicator-ring-diameter-size));
61+
block-size: var(--mod-coach-indicator-ring-block-size, var(--spectrum-coach-indicator-ring-diameter-size));
62+
animation: pulse var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) linear infinite;
63+
animation: var(--mod-coach-indicator-animation-name, pulse) var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) linear infinite;
4264
border-radius: 50%;
4365
display: block;
4466
position: absolute;
45-
inset-block-start: var(--mod-coach-indicator-top, var(--spectrum-coach-indicator-top));
46-
inset-inline-start: var(--mod-coach-indicator-left, var(--spectrum-coach-indicator-left));
67+
inset-block-start: var(--mod-coach-indicator-top, calc(var(--spectrum-coach-indicator-block-size) / 3 - var(--spectrum-coach-indicator-ring-border-size)));
68+
inset-inline-start: var(--mod-coach-indicator-left, calc(var(--spectrum-coach-indicator-inline-size) / 3 - var(--spectrum-coach-indicator-ring-border-size)));
4769
}
4870

4971
.ring:first-child {
50-
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)));
72+
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));
5173
}
5274

5375
.ring:nth-child(2) {
54-
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)));
76+
animation-delay: calc(var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) * -0.66);
77+
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));
5578
}
5679

5780
.ring:nth-child(3) {
58-
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)));
59-
}
60-
61-
:host([static-color='white']) .ring {
62-
border-color: var(--mod-coach-indicator-ring-light-color, var(--spectrum-coach-indicator-ring-light-color));
63-
}
64-
65-
:host([static-color='black']) .ring {
66-
border-color: var(--mod-coach-indicator-ring-dark-color, var(--spectrum-coach-indicator-ring-dark-color));
81+
animation-delay: calc(var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) * -1);
82+
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));
6783
}
6884

6985
@media (prefers-reduced-motion: reduce) {
@@ -74,34 +90,17 @@ governing permissions and limitations under the License.
7490

7591
@keyframes pulse {
7692
0% {
77-
transform: scale(var(--spectrum-coach-indicator-animation-keyframe-0-scale));
78-
opacity: var(--spectrum-coach-indicator-animation-keyframe-0-opacity);
79-
}
80-
81-
50% {
82-
transform: scale(var(--spectrum-coach-indicator-animation-keyframe-50-scale));
83-
opacity: var(--spectrum-coach-indicator-animation-keyframe-50-opacity);
84-
}
85-
86-
to {
87-
transform: scale(var(--spectrum-coach-indicator-animation-keyframe-100-scale));
88-
opacity: var(--spectrum-coach-indicator-animation-keyframe-100-opacity);
89-
}
90-
}
91-
92-
@keyframes pulse-quiet {
93-
0% {
94-
transform: scale(var(--spectrum-coach-indicator-quiet-animation-keyframe-0-scale));
95-
opacity: var(--spectrum-coach-indicator-animation-keyframe-0-opacity);
93+
transform: scale(var(--spectrum-coach-indicator-animation-keyframe-scale-initial));
94+
opacity: 0;
9695
}
9796

9897
50% {
99-
transform: scale(var(--spectrum-coach-indicator-animation-keyframe-50-scale));
100-
opacity: var(--spectrum-coach-indicator-animation-keyframe-50-opacity);
98+
opacity: 1;
99+
transform: scale(1.5);
101100
}
102101

103102
to {
104-
transform: scale(var(--spectrum-coach-indicator-animation-keyframe-100-scale));
105-
opacity: var(--spectrum-coach-indicator-animation-keyframe-100-opacity);
103+
opacity: 0;
104+
transform: scale(2);
106105
}
107106
}

0 commit comments

Comments
 (0)