Skip to content

Commit acd07a6

Browse files
castastrophecastastrophe
committed
fix: full update for css packages
1 parent 02af616 commit acd07a6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+1226
-3545
lines changed

‎packages/clear-button/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
"@spectrum-web-components/base": "1.5.0"
5353
},
5454
"devDependencies": {
55-
"@spectrum-css/clearbutton": "7.0.0-s2-foundations.16"
55+
"@spectrum-css/clearbutton": "7.2.0"
5656
},
5757
"types": "./src/index.d.ts",
5858
"customElements": "custom-elements.json",

‎packages/clear-button/src/clear-button-overrides.css

Lines changed: 4 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -24,90 +24,16 @@ governing permissions and limitations under the License.
2424
--spectrum-clear-button-background-color-key-focus: var(
2525
--system-clear-button-background-color-key-focus
2626
);
27-
--spectrum-clear-button-height: var(--system-clear-button-height);
28-
--spectrum-clear-button-width: var(--system-clear-button-width);
29-
--spectrum-clear-button-padding: var(--system-clear-button-padding);
30-
--spectrum-clear-button-icon-color: var(--system-clear-button-icon-color);
31-
--spectrum-clear-button-icon-color-hover: var(
32-
--system-clear-button-icon-color-hover
33-
);
34-
--spectrum-clear-button-icon-color-down: var(
35-
--system-clear-button-icon-color-down
36-
);
37-
--spectrum-clear-button-icon-color-key-focus: var(
38-
--system-clear-button-icon-color-key-focus
39-
);
40-
}
41-
42-
:host([size='s']) {
43-
--spectrum-clear-button-height: var(--system-clear-button-size-s-height);
44-
--spectrum-clear-button-width: var(--system-clear-button-size-s-width);
45-
}
46-
47-
:host([size='l']) {
48-
--spectrum-clear-button-height: var(--system-clear-button-size-l-height);
49-
--spectrum-clear-button-width: var(--system-clear-button-size-l-width);
50-
}
51-
52-
:host([size='xl']) {
53-
--spectrum-clear-button-height: var(--system-clear-button-size-xl-height);
54-
--spectrum-clear-button-width: var(--system-clear-button-size-xl-width);
55-
}
56-
57-
:host .spectrum-ClearButton--quiet {
58-
--spectrum-clear-button-background-color: var(
59-
--system-clear-button-quiet-background-color
60-
);
61-
--spectrum-clear-button-background-color-hover: var(
62-
--system-clear-button-quiet-background-color-hover
63-
);
64-
--spectrum-clear-button-background-color-down: var(
65-
--system-clear-button-quiet-background-color-down
66-
);
67-
--spectrum-clear-button-background-color-key-focus: var(
68-
--system-clear-button-quiet-background-color-key-focus
69-
);
7027
}
7128

72-
:host([variant='overBackground']) {
73-
--spectrum-clear-button-icon-color: var(
74-
--system-clear-button-over-background-icon-color
75-
);
76-
--spectrum-clear-button-icon-color-hover: var(
77-
--system-clear-button-over-background-icon-color-hover
78-
);
79-
--spectrum-clear-button-icon-color-down: var(
80-
--system-clear-button-over-background-icon-color-down
81-
);
82-
--spectrum-clear-button-icon-color-key-focus: var(
83-
--system-clear-button-over-background-icon-color-key-focus
84-
);
85-
--spectrum-clear-button-background-color: var(
86-
--system-clear-button-over-background-background-color
87-
);
29+
:host .spectrum-ClearButton--staticWhite {
8830
--spectrum-clear-button-background-color-hover: var(
89-
--system-clear-button-over-background-background-color-hover
31+
--system-clear-button-static-white-background-color-hover
9032
);
9133
--spectrum-clear-button-background-color-down: var(
92-
--system-clear-button-over-background-background-color-down
34+
--system-clear-button-static-white-background-color-down
9335
);
9436
--spectrum-clear-button-background-color-key-focus: var(
95-
--system-clear-button-over-background-background-color-key-focus
96-
);
97-
}
98-
99-
:host([disabled]),
100-
:host([disabled]) {
101-
--spectrum-clear-button-icon-color: var(
102-
--system-clear-button-disabled-icon-color
103-
);
104-
--spectrum-clear-button-icon-color-hover: var(
105-
--system-clear-button-disabled-icon-color-hover
106-
);
107-
--spectrum-clear-button-icon-color-down: var(
108-
--system-clear-button-disabled-icon-color-down
109-
);
110-
--spectrum-clear-button-background-color: var(
111-
--system-clear-button-disabled-background-color
37+
--system-clear-button-static-white-background-color-key-focus
11238
);
11339
}

‎packages/clear-button/src/spectrum-clear-button.css

Lines changed: 62 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,15 @@ governing permissions and limitations under the License.
1212

1313
/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
1414
:host {
15+
--spectrum-clear-button-height: var(--spectrum-component-height-100);
16+
--spectrum-clear-button-width: var(--spectrum-component-height-100);
17+
--spectrum-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill);
18+
--spectrum-clear-button-icon-color: var(--spectrum-neutral-content-color-default);
19+
--spectrum-clear-button-icon-color-hover: var(--spectrum-neutral-content-color-hover);
20+
--spectrum-clear-button-icon-color-down: var(--spectrum-neutral-content-color-down);
21+
--spectrum-clear-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
1522
block-size: var(--mod-clear-button-height, var(--spectrum-clear-button-height));
1623
inline-size: var(--mod-clear-button-width, var(--spectrum-clear-button-width));
17-
cursor: pointer;
18-
background-color: initial;
1924
background-color: var(--mod-clear-button-background-color, transparent);
2025
padding: var(--mod-clear-button-padding, var(--spectrum-clear-button-padding));
2126
color: var(--mod-clear-button-icon-color, var(--spectrum-clear-button-icon-color));
@@ -24,47 +29,84 @@ governing permissions and limitations under the License.
2429
margin: 0;
2530
}
2631

32+
:host([size='s']) {
33+
--spectrum-clear-button-height: var(--spectrum-component-height-75);
34+
--spectrum-clear-button-width: var(--spectrum-component-height-75);
35+
}
36+
37+
:host([size='l']) {
38+
--spectrum-clear-button-height: var(--spectrum-component-height-200);
39+
--spectrum-clear-button-width: var(--spectrum-component-height-200);
40+
}
41+
42+
:host([size='xl']) {
43+
--spectrum-clear-button-height: var(--spectrum-component-height-300);
44+
--spectrum-clear-button-width: var(--spectrum-component-height-300);
45+
}
46+
47+
:host .spectrum-ClearButton--quiet {
48+
--mod-clear-button-background-color: transparent;
49+
--mod-clear-button-background-color-hover: transparent;
50+
--mod-clear-button-background-color-down: transparent;
51+
--mod-clear-button-background-color-key-focus: transparent;
52+
}
53+
54+
:host .spectrum-ClearButton--staticWhite {
55+
--mod-clear-button-icon-color: var(--spectrum-white);
56+
--mod-clear-button-icon-color-hover: var(--spectrum-white);
57+
--mod-clear-button-icon-color-down: var(--spectrum-white);
58+
--mod-clear-button-icon-color-key-focus: var(--spectrum-white);
59+
--mod-clear-button-icon-color-disabled: var(--spectrum-disabled-static-white-content-color);
60+
--mod-clear-button-background-color: transparent;
61+
}
62+
63+
:host([disabled]),
64+
:host([disabled]) {
65+
--mod-clear-button-icon-color: var(--mod-clear-button-icon-color-disabled, var(--spectrum-disabled-content-color));
66+
--mod-clear-button-icon-color-hover: var(--spectrum-disabled-content-color);
67+
--mod-clear-button-icon-color-down: var(--spectrum-disabled-content-color);
68+
--mod-clear-button-background-color: var(--mod-clear-button-background-color-disabled, transparent);
69+
}
70+
71+
:host:not(:disabled) {
72+
cursor: pointer;
73+
}
74+
2775
.icon {
2876
margin-block: 0;
2977
margin-inline: auto;
3078
}
3179

3280
@media (hover: hover) {
33-
:host(:hover) {
81+
:host:not(:disabled):hover {
3482
color: var(--highcontrast-clear-button-icon-color-hover, var(--mod-clear-button-icon-color-hover, var(--spectrum-clear-button-icon-color-hover)));
3583
}
3684

37-
:host(:hover) .fill {
85+
:host:not(:disabled):hover .fill {
3886
background-color: var(--mod-clear-button-background-color-hover, var(--spectrum-clear-button-background-color-hover));
3987
}
4088
}
4189

42-
:host(:is(:active, [active])) {
90+
:host(:is(:active, [active])):not(:disabled) {
4391
color: var(--mod-clear-button-icon-color-down, var(--spectrum-clear-button-icon-color-down));
4492
}
4593

46-
:host(:is(:active, [active])) .fill {
94+
:host(:is(:active, [active])):not(:disabled) .fill {
4795
background-color: var(--mod-clear-button-background-color-down, var(--spectrum-clear-button-background-color-down));
4896
}
4997

50-
:host([focus-within]) .js-focus-within,
51-
:host(:focus-visible),
52-
:host:focus-within,
53-
:host([focus-within]) .js-focus-within {
98+
:host:not(:disabled):focus-visible,
99+
:host:not(:disabled):focus-within {
54100
color: var(--mod-clear-button-icon-color-key-focus, var(--spectrum-clear-button-icon-color-key-focus));
55101
}
56102

57-
:host([focus-within]) .js-focus-within .fill,
58-
:host(:focus-visible) .fill,
59-
:host:focus-within .fill,
60-
:host([focus-within]) .js-focus-within .fill {
103+
:host:not(:disabled):focus-visible .fill,
104+
:host:not(:disabled):focus-within .fill {
61105
background-color: var(--mod-clear-button-background-color-key-focus, var(--spectrum-clear-button-background-color-key-focus));
62106
}
63107

64-
:host([disabled]),
65-
:host([disabled]) {
66-
--spectrum-clear-button-icon-color: var(--mod-clear-button-icon-color-disabled, var(--spectrum-disabled-content-color));
67-
--spectrum-clear-button-background-color: var(--mod-clear-button-background-color-disabled, transparent);
108+
.spectrum-ClearButton-icon {
109+
color: inherit;
68110
}
69111

70112
.fill {
@@ -77,7 +119,8 @@ governing permissions and limitations under the License.
77119
display: flex;
78120
}
79121

80-
:host([variant='overBackground']:focus-visible) {
122+
:host([variant='overBackground']:focus-visible),
123+
.spectrum-ClearButton--staticWhite:focus-visible {
81124
outline: none;
82125
}
83126

‎packages/coachmark/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -88,8 +88,8 @@
8888
"@spectrum-web-components/shared": "1.5.0"
8989
},
9090
"devDependencies": {
91-
"@spectrum-css/coachindicator": "3.0.0-s2-foundations.16",
92-
"@spectrum-css/coachmark": "8.0.0-s2-foundations.17"
91+
"@spectrum-css/coachindicator": "4.1.0",
92+
"@spectrum-css/coachmark": "9.1.1"
9393
},
9494
"types": "./src/index.d.ts",
9595
"customElements": "custom-elements.json",

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

Lines changed: 0 additions & 82 deletions
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-
}

0 commit comments

Comments
 (0)