Skip to content

Commit 0f3472b

Browse files
castastrophecastastrophe
committed
fix(coach-mark,styles): use latest CSS
1 parent d61e30e commit 0f3472b

File tree

8 files changed

+65
-292
lines changed

8 files changed

+65
-292
lines changed

‎.changeset/great-hairs-retire.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@spectrum-web-components/coachmark': patch
3+
'@spectrum-web-components/styles': patch
4+
---
5+
6+
Remove unnecessary system theme references to reduce complexity for components that don't need the additional mapping layer.

‎packages/coachmark/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@
8282
"@spectrum-web-components/shared": "1.4.0"
8383
},
8484
"devDependencies": {
85-
"@spectrum-css/coachindicator": "3.0.1",
85+
"@spectrum-css/coachindicator": "4.1.0",
8686
"@spectrum-css/coachmark": "8.0.0-s2-foundations.17"
8787
},
8888
"types": "./src/index.d.ts",

‎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/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
}

‎tools/styles/tokens-v2/system-theme-bridge.css

-51
Original file line numberDiff line numberDiff line change
@@ -829,57 +829,6 @@
829829
--system-close-button-size-m-size: var(--spectrum-component-height-100);
830830
--system-close-button-size-l-size: var(--spectrum-component-height-200);
831831
--system-close-button-size-xl-size: var(--spectrum-component-height-300);
832-
--system-coach-indicator-ring-border-size: var(--spectrum-border-width-200);
833-
--system-coach-indicator-min-inline-size: calc(
834-
var(--spectrum-coach-indicator-ring-diameter) * 3
835-
);
836-
--system-coach-indicator-min-block-size: calc(
837-
var(--spectrum-coach-indicator-ring-diameter) * 3
838-
);
839-
--system-coach-indicator-inline-size: var(
840-
--system-coach-indicator-min-inline-size
841-
);
842-
--system-coach-indicator-block-size: var(
843-
--system-coach-indicator-min-block-size
844-
);
845-
--system-coach-indicator-ring-inline-size: var(
846-
--spectrum-coach-indicator-ring-diameter
847-
);
848-
--system-coach-indicator-ring-block-size: var(
849-
--spectrum-coach-indicator-ring-diameter
850-
);
851-
--system-coach-indicator-ring-dark-color: var(--spectrum-gray-900);
852-
--system-coach-indicator-ring-light-color: var(--spectrum-gray-25);
853-
--system-coach-indicator-top: calc(
854-
var(--system-coach-indicator-block-size) / 3 -
855-
var(--system-coach-indicator-ring-border-size)
856-
);
857-
--system-coach-indicator-left: calc(
858-
var(--system-coach-indicator-inline-size) / 3 -
859-
var(--system-coach-indicator-ring-border-size)
860-
);
861-
--system-coach-indicator-coach-animation-indicator-ring-duration: var(
862-
--spectrum-animation-duration-6000
863-
);
864-
--system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple: -0.5;
865-
--system-coach-indicator-coach-animation-indicator-ring-center-delay-multiple: -0.66;
866-
--system-coach-indicator-coach-animation-indicator-ring-outer-delay-multiple: -1;
867-
--system-coach-indicator-quiet-animation-ring-inner-delay-multiple: -0.33;
868-
--system-coach-indicator-animation-name: pulse;
869-
--system-coach-indicator-inner-animation-delay-multiple: var(
870-
--system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple
871-
);
872-
--system-coach-indicator-animation-keyframe-0-scale: 1;
873-
--system-coach-indicator-animation-keyframe-0-opacity: 0;
874-
--system-coach-indicator-animation-keyframe-50-scale: 1.5;
875-
--system-coach-indicator-animation-keyframe-50-opacity: 1;
876-
--system-coach-indicator-animation-keyframe-100-scale: 2;
877-
--system-coach-indicator-animation-keyframe-100-opacity: 0;
878-
--system-coach-indicator-quiet-animation-keyframe-0-scale: 0.8;
879-
--system-coach-indicator-quiet-quiet-ring-diameter-size: var(
880-
--spectrum-coach-indicator-quiet-ring-diameter
881-
);
882-
--system-coach-indicator-quiet-animation-name: pulse-quiet;
883832
--system-coach-mark-min-width: var(--spectrum-coach-mark-minimum-width);
884833
--system-coach-mark-width: var(--spectrum-coach-mark-width);
885834
--system-coach-mark-max-width: var(--spectrum-coach-mark-maximum-width);

‎tools/styles/tokens/express/system-theme-bridge.css

-51
Original file line numberDiff line numberDiff line change
@@ -845,57 +845,6 @@
845845
--system-close-button-size-m-size: var(--spectrum-component-height-100);
846846
--system-close-button-size-l-size: var(--spectrum-component-height-200);
847847
--system-close-button-size-xl-size: var(--spectrum-component-height-300);
848-
--system-coach-indicator-ring-border-size: var(--spectrum-border-width-200);
849-
--system-coach-indicator-min-inline-size: calc(
850-
var(--spectrum-coach-indicator-ring-diameter) * 3
851-
);
852-
--system-coach-indicator-min-block-size: calc(
853-
var(--spectrum-coach-indicator-ring-diameter) * 3
854-
);
855-
--system-coach-indicator-inline-size: var(
856-
--system-coach-indicator-min-inline-size
857-
);
858-
--system-coach-indicator-block-size: var(
859-
--system-coach-indicator-min-block-size
860-
);
861-
--system-coach-indicator-ring-inline-size: var(
862-
--spectrum-coach-indicator-ring-diameter
863-
);
864-
--system-coach-indicator-ring-block-size: var(
865-
--spectrum-coach-indicator-ring-diameter
866-
);
867-
--system-coach-indicator-ring-dark-color: var(--spectrum-gray-900);
868-
--system-coach-indicator-ring-light-color: var(--spectrum-gray-50);
869-
--system-coach-indicator-top: calc(
870-
var(--system-coach-indicator-block-size) / 3 -
871-
var(--system-coach-indicator-ring-border-size)
872-
);
873-
--system-coach-indicator-left: calc(
874-
var(--system-coach-indicator-inline-size) / 3 -
875-
var(--system-coach-indicator-ring-border-size)
876-
);
877-
--system-coach-indicator-coach-animation-indicator-ring-duration: var(
878-
--spectrum-animation-duration-6000
879-
);
880-
--system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple: -0.5;
881-
--system-coach-indicator-coach-animation-indicator-ring-center-delay-multiple: -0.66;
882-
--system-coach-indicator-coach-animation-indicator-ring-outer-delay-multiple: -1;
883-
--system-coach-indicator-quiet-animation-ring-inner-delay-multiple: -0.33;
884-
--system-coach-indicator-animation-name: pulse;
885-
--system-coach-indicator-inner-animation-delay-multiple: var(
886-
--system-coach-indicator-coach-animation-indicator-ring-inner-delay-multiple
887-
);
888-
--system-coach-indicator-animation-keyframe-0-scale: 1;
889-
--system-coach-indicator-animation-keyframe-0-opacity: 0;
890-
--system-coach-indicator-animation-keyframe-50-scale: 1.5;
891-
--system-coach-indicator-animation-keyframe-50-opacity: 1;
892-
--system-coach-indicator-animation-keyframe-100-scale: 2;
893-
--system-coach-indicator-animation-keyframe-100-opacity: 0;
894-
--system-coach-indicator-quiet-animation-keyframe-0-scale: 0.8;
895-
--system-coach-indicator-quiet-quiet-ring-diameter-size: var(
896-
--spectrum-coach-indicator-quiet-ring-diameter
897-
);
898-
--system-coach-indicator-quiet-animation-name: pulse-quiet;
899848
--system-coach-mark-min-width: var(--spectrum-coach-mark-minimum-width);
900849
--system-coach-mark-width: var(--spectrum-coach-mark-width);
901850
--system-coach-mark-max-width: var(--spectrum-coach-mark-maximum-width);

0 commit comments

Comments
 (0)