Skip to content

Commit 3a87a38

Browse files
castastrophecastastrophe
committed
fix(tooltip,styles): use latest CSS
1 parent e19e55f commit 3a87a38

File tree

8 files changed

+45
-194
lines changed

8 files changed

+45
-194
lines changed

‎.changeset/brave-crews-win.md

+1
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
'@spectrum-web-components/split-view': patch
2424
'@spectrum-web-components/styles': patch
2525
'@spectrum-web-components/tags': patch
26+
'@spectrum-web-components/tooltip': patch
2627
'@spectrum-web-components/tray': patch
2728
'@spectrum-web-components/underlay': patch
2829
---

‎packages/tooltip/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@
7474
"@spectrum-web-components/shared": "1.4.0"
7575
},
7676
"devDependencies": {
77-
"@spectrum-css/tooltip": "7.0.0-s2-foundations.15"
77+
"@spectrum-css/tooltip": "7.1.0"
7878
},
7979
"types": "./src/index.d.ts",
8080
"customElements": "custom-elements.json",

‎packages/tooltip/src/spectrum-tooltip.css

+31
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,37 @@ governing permissions and limitations under the License.
3333
transition-delay: var(--mod-overlay-animation-duration-opened, var(--spectrum-animation-duration-0, 0s));
3434
}
3535

36+
#tooltip {
37+
--spectrum-tooltip-animation-duration: var(--spectrum-animation-duration-100);
38+
--spectrum-tooltip-margin: 0px;
39+
--spectrum-tooltip-height: var(--spectrum-component-height-75);
40+
--spectrum-tooltip-max-inline-size: var(--spectrum-tooltip-maximum-width);
41+
--spectrum-tooltip-border-radius: var(--spectrum-corner-radius-100);
42+
--spectrum-tooltip-icon-width: var(--spectrum-workflow-icon-size-50);
43+
--spectrum-tooltip-icon-height: var(--spectrum-workflow-icon-size-50);
44+
--spectrum-tooltip-font-size: var(--spectrum-font-size-75);
45+
--spectrum-tooltip-line-height: var(--spectrum-line-height-100);
46+
--spectrum-tooltip-cjk-line-height: var(--spectrum-cjk-line-height-100);
47+
--spectrum-tooltip-font-weight: var(--spectrum-regular-font-weight);
48+
--spectrum-tooltip-spacing-inline: var(--spectrum-component-edge-to-text-75);
49+
--spectrum-tooltip-spacing-block-start: var(--spectrum-component-top-to-text-75);
50+
--spectrum-tooltip-spacing-block-end: var(--spectrum-component-bottom-to-text-75);
51+
--spectrum-tooltip-icon-spacing-inline-start: var(--spectrum-text-to-visual-75);
52+
--spectrum-tooltip-icon-spacing-inline-end: var(--spectrum-text-to-visual-75);
53+
--spectrum-tooltip-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-75);
54+
--spectrum-tooltip-background-color-informative: var(--spectrum-informative-background-color-default);
55+
--spectrum-tooltip-background-color-positive: var(--spectrum-positive-background-color-default);
56+
--spectrum-tooltip-background-color-negative: var(--spectrum-negative-background-color-default);
57+
--spectrum-tooltip-content-color: var(--spectrum-white);
58+
--spectrum-tooltip-tip-inline-size: var(--spectrum-tooltip-tip-width);
59+
--spectrum-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height);
60+
--spectrum-tooltip-tip-square-size: var(--spectrum-tooltip-tip-inline-size);
61+
--spectrum-tooltip-tip-height-percentage: 50%;
62+
--spectrum-tooltip-tip-antialiasing-inset: 0.5px;
63+
--spectrum-tooltip-pointer-corner-spacing: var(--spectrum-corner-radius-100);
64+
--spectrum-tooltip-background-color-default: var(--spectrum-tooltip-backgound-color-default-neutral);
65+
}
66+
3667
@media (forced-colors: active) {
3768
#tooltip {
3869
border: 1px solid #0000;

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

-54
Original file line numberDiff line numberDiff line change
@@ -15,58 +15,4 @@ governing permissions and limitations under the License.
1515
--spectrum-tooltip-backgound-color-default-neutral: var(
1616
--system-tooltip-backgound-color-default-neutral
1717
);
18-
--spectrum-tooltip-animation-duration: var(
19-
--system-tooltip-animation-duration
20-
);
21-
--spectrum-tooltip-margin: var(--system-tooltip-margin);
22-
--spectrum-tooltip-height: var(--system-tooltip-height);
23-
--spectrum-tooltip-max-inline-size: var(--system-tooltip-max-inline-size);
24-
--spectrum-tooltip-border-radius: var(--system-tooltip-border-radius);
25-
--spectrum-tooltip-icon-width: var(--system-tooltip-icon-width);
26-
--spectrum-tooltip-icon-height: var(--system-tooltip-icon-height);
27-
--spectrum-tooltip-font-size: var(--system-tooltip-font-size);
28-
--spectrum-tooltip-line-height: var(--system-tooltip-line-height);
29-
--spectrum-tooltip-cjk-line-height: var(--system-tooltip-cjk-line-height);
30-
--spectrum-tooltip-font-weight: var(--system-tooltip-font-weight);
31-
--spectrum-tooltip-spacing-inline: var(--system-tooltip-spacing-inline);
32-
--spectrum-tooltip-spacing-block-start: var(
33-
--system-tooltip-spacing-block-start
34-
);
35-
--spectrum-tooltip-spacing-block-end: var(
36-
--system-tooltip-spacing-block-end
37-
);
38-
--spectrum-tooltip-icon-spacing-inline-start: var(
39-
--system-tooltip-icon-spacing-inline-start
40-
);
41-
--spectrum-tooltip-icon-spacing-inline-end: var(
42-
--system-tooltip-icon-spacing-inline-end
43-
);
44-
--spectrum-tooltip-icon-spacing-block-start: var(
45-
--system-tooltip-icon-spacing-block-start
46-
);
47-
--spectrum-tooltip-background-color-informative: var(
48-
--system-tooltip-background-color-informative
49-
);
50-
--spectrum-tooltip-background-color-positive: var(
51-
--system-tooltip-background-color-positive
52-
);
53-
--spectrum-tooltip-background-color-negative: var(
54-
--system-tooltip-background-color-negative
55-
);
56-
--spectrum-tooltip-content-color: var(--system-tooltip-content-color);
57-
--spectrum-tooltip-tip-inline-size: var(--system-tooltip-tip-inline-size);
58-
--spectrum-tooltip-tip-block-size: var(--system-tooltip-tip-block-size);
59-
--spectrum-tooltip-tip-square-size: var(--system-tooltip-tip-square-size);
60-
--spectrum-tooltip-tip-height-percentage: var(
61-
--system-tooltip-tip-height-percentage
62-
);
63-
--spectrum-tooltip-tip-antialiasing-inset: var(
64-
--system-tooltip-tip-antialiasing-inset
65-
);
66-
--spectrum-tooltip-pointer-corner-spacing: var(
67-
--system-tooltip-pointer-corner-spacing
68-
);
69-
--spectrum-tooltip-background-color-default: var(
70-
--system-tooltip-background-color-default
71-
);
7218
}

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

-44
Original file line numberDiff line numberDiff line change
@@ -2398,50 +2398,6 @@
23982398
--system-tooltip-backgound-color-default-neutral: var(
23992399
--spectrum-neutral-subdued-background-color-default
24002400
);
2401-
--system-tooltip-animation-duration: var(--spectrum-animation-duration-100);
2402-
--system-tooltip-margin: 0px;
2403-
--system-tooltip-height: var(--spectrum-component-height-75);
2404-
--system-tooltip-max-inline-size: var(--spectrum-tooltip-maximum-width);
2405-
--system-tooltip-border-radius: var(--spectrum-corner-radius-100);
2406-
--system-tooltip-icon-width: var(--spectrum-workflow-icon-size-50);
2407-
--system-tooltip-icon-height: var(--spectrum-workflow-icon-size-50);
2408-
--system-tooltip-font-size: var(--spectrum-font-size-75);
2409-
--system-tooltip-line-height: var(--spectrum-line-height-100);
2410-
--system-tooltip-cjk-line-height: var(--spectrum-cjk-line-height-100);
2411-
--system-tooltip-font-weight: var(--spectrum-regular-font-weight);
2412-
--system-tooltip-spacing-inline: var(--spectrum-component-edge-to-text-75);
2413-
--system-tooltip-spacing-block-start: var(
2414-
--spectrum-component-top-to-text-75
2415-
);
2416-
--system-tooltip-spacing-block-end: var(
2417-
--spectrum-component-bottom-to-text-75
2418-
);
2419-
--system-tooltip-icon-spacing-inline-start: var(
2420-
--spectrum-text-to-visual-75
2421-
);
2422-
--system-tooltip-icon-spacing-inline-end: var(--spectrum-text-to-visual-75);
2423-
--system-tooltip-icon-spacing-block-start: var(
2424-
--spectrum-component-top-to-workflow-icon-75
2425-
);
2426-
--system-tooltip-background-color-informative: var(
2427-
--spectrum-informative-background-color-default
2428-
);
2429-
--system-tooltip-background-color-positive: var(
2430-
--spectrum-positive-background-color-default
2431-
);
2432-
--system-tooltip-background-color-negative: var(
2433-
--spectrum-negative-background-color-default
2434-
);
2435-
--system-tooltip-content-color: var(--spectrum-white);
2436-
--system-tooltip-tip-inline-size: var(--spectrum-tooltip-tip-width);
2437-
--system-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height);
2438-
--system-tooltip-tip-square-size: var(--system-tooltip-tip-inline-size);
2439-
--system-tooltip-tip-height-percentage: 50%;
2440-
--system-tooltip-tip-antialiasing-inset: 0.5px;
2441-
--system-tooltip-pointer-corner-spacing: var(--spectrum-corner-radius-100);
2442-
--system-tooltip-background-color-default: var(
2443-
--system-tooltip-backgound-color-default-neutral
2444-
);
24452401
--system-heading-sans-serif-font-family: var(
24462402
--spectrum-sans-font-family-stack
24472403
);

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

-44
Original file line numberDiff line numberDiff line change
@@ -2416,50 +2416,6 @@
24162416
--system-tooltip-backgound-color-default-neutral: var(
24172417
--spectrum-neutral-background-color-default
24182418
);
2419-
--system-tooltip-animation-duration: var(--spectrum-animation-duration-100);
2420-
--system-tooltip-margin: 0px;
2421-
--system-tooltip-height: var(--spectrum-component-height-75);
2422-
--system-tooltip-max-inline-size: var(--spectrum-tooltip-maximum-width);
2423-
--system-tooltip-border-radius: var(--spectrum-corner-radius-100);
2424-
--system-tooltip-icon-width: var(--spectrum-workflow-icon-size-50);
2425-
--system-tooltip-icon-height: var(--spectrum-workflow-icon-size-50);
2426-
--system-tooltip-font-size: var(--spectrum-font-size-75);
2427-
--system-tooltip-line-height: var(--spectrum-line-height-100);
2428-
--system-tooltip-cjk-line-height: var(--spectrum-cjk-line-height-100);
2429-
--system-tooltip-font-weight: var(--spectrum-regular-font-weight);
2430-
--system-tooltip-spacing-inline: var(--spectrum-component-edge-to-text-75);
2431-
--system-tooltip-spacing-block-start: var(
2432-
--spectrum-component-top-to-text-75
2433-
);
2434-
--system-tooltip-spacing-block-end: var(
2435-
--spectrum-component-bottom-to-text-75
2436-
);
2437-
--system-tooltip-icon-spacing-inline-start: var(
2438-
--spectrum-text-to-visual-75
2439-
);
2440-
--system-tooltip-icon-spacing-inline-end: var(--spectrum-text-to-visual-75);
2441-
--system-tooltip-icon-spacing-block-start: var(
2442-
--spectrum-component-top-to-workflow-icon-75
2443-
);
2444-
--system-tooltip-background-color-informative: var(
2445-
--spectrum-informative-background-color-default
2446-
);
2447-
--system-tooltip-background-color-positive: var(
2448-
--spectrum-positive-background-color-default
2449-
);
2450-
--system-tooltip-background-color-negative: var(
2451-
--spectrum-negative-background-color-default
2452-
);
2453-
--system-tooltip-content-color: var(--spectrum-white);
2454-
--system-tooltip-tip-inline-size: var(--spectrum-tooltip-tip-width);
2455-
--system-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height);
2456-
--system-tooltip-tip-square-size: var(--system-tooltip-tip-inline-size);
2457-
--system-tooltip-tip-height-percentage: 50%;
2458-
--system-tooltip-tip-antialiasing-inset: 0.5px;
2459-
--system-tooltip-pointer-corner-spacing: var(--spectrum-corner-radius-100);
2460-
--system-tooltip-background-color-default: var(
2461-
--system-tooltip-backgound-color-default-neutral
2462-
);
24632419
--system-heading-sans-serif-font-family: var(
24642420
--spectrum-sans-font-family-stack
24652421
);

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

-44
Original file line numberDiff line numberDiff line change
@@ -2420,50 +2420,6 @@
24202420
--system-tooltip-backgound-color-default-neutral: var(
24212421
--spectrum-neutral-subdued-background-color-default
24222422
);
2423-
--system-tooltip-animation-duration: var(--spectrum-animation-duration-100);
2424-
--system-tooltip-margin: 0px;
2425-
--system-tooltip-height: var(--spectrum-component-height-75);
2426-
--system-tooltip-max-inline-size: var(--spectrum-tooltip-maximum-width);
2427-
--system-tooltip-border-radius: var(--spectrum-corner-radius-100);
2428-
--system-tooltip-icon-width: var(--spectrum-workflow-icon-size-50);
2429-
--system-tooltip-icon-height: var(--spectrum-workflow-icon-size-50);
2430-
--system-tooltip-font-size: var(--spectrum-font-size-75);
2431-
--system-tooltip-line-height: var(--spectrum-line-height-100);
2432-
--system-tooltip-cjk-line-height: var(--spectrum-cjk-line-height-100);
2433-
--system-tooltip-font-weight: var(--spectrum-regular-font-weight);
2434-
--system-tooltip-spacing-inline: var(--spectrum-component-edge-to-text-75);
2435-
--system-tooltip-spacing-block-start: var(
2436-
--spectrum-component-top-to-text-75
2437-
);
2438-
--system-tooltip-spacing-block-end: var(
2439-
--spectrum-component-bottom-to-text-75
2440-
);
2441-
--system-tooltip-icon-spacing-inline-start: var(
2442-
--spectrum-text-to-visual-75
2443-
);
2444-
--system-tooltip-icon-spacing-inline-end: var(--spectrum-text-to-visual-75);
2445-
--system-tooltip-icon-spacing-block-start: var(
2446-
--spectrum-component-top-to-workflow-icon-75
2447-
);
2448-
--system-tooltip-background-color-informative: var(
2449-
--spectrum-informative-background-color-default
2450-
);
2451-
--system-tooltip-background-color-positive: var(
2452-
--spectrum-positive-background-color-default
2453-
);
2454-
--system-tooltip-background-color-negative: var(
2455-
--spectrum-negative-background-color-default
2456-
);
2457-
--system-tooltip-content-color: var(--spectrum-white);
2458-
--system-tooltip-tip-inline-size: var(--spectrum-tooltip-tip-width);
2459-
--system-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height);
2460-
--system-tooltip-tip-square-size: var(--system-tooltip-tip-inline-size);
2461-
--system-tooltip-tip-height-percentage: 50%;
2462-
--system-tooltip-tip-antialiasing-inset: 0.5px;
2463-
--system-tooltip-pointer-corner-spacing: var(--spectrum-corner-radius-100);
2464-
--system-tooltip-background-color-default: var(
2465-
--system-tooltip-backgound-color-default-neutral
2466-
);
24672423
--system-heading-sans-serif-font-family: var(
24682424
--spectrum-sans-font-family-stack
24692425
);

‎yarn.lock

+12-7
Original file line numberDiff line numberDiff line change
@@ -7777,13 +7777,18 @@ __metadata:
77777777
languageName: node
77787778
linkType: hard
77797779

7780-
"@spectrum-css/tooltip@npm:7.0.0-s2-foundations.15":
7781-
version: 7.0.0-s2-foundations.15
7782-
resolution: "@spectrum-css/tooltip@npm:7.0.0-s2-foundations.15"
7780+
"@spectrum-css/tooltip@npm:7.1.0":
7781+
version: 7.1.0
7782+
resolution: "@spectrum-css/tooltip@npm:7.1.0"
77837783
peerDependencies:
7784-
"@spectrum-css/icon": ">=7"
7785-
"@spectrum-css/tokens": ">=14"
7786-
checksum: 10c0/9ff18b52abba9eed53507869c777e85bdfc78e0fe4a99cbe639538c9ed8434f7e2e1b1af725396bd3c6bbd5067b1196c644e31e2b613c874350cef2f8133e977
7784+
"@spectrum-css/icon": ">=9.0.0 <10.0.0"
7785+
"@spectrum-css/tokens": ">=16.0.0 <17.0.0"
7786+
peerDependenciesMeta:
7787+
"@spectrum-css/icon":
7788+
optional: true
7789+
"@spectrum-css/tokens":
7790+
optional: true
7791+
checksum: 10c0/96541bbe65300a4f0d7c0696424ac8f1dbe6f7f58a8a912cb9c62bd5599496c33ffdb8b343db6cbd8bd6141655b5061de8db7b90b8f990cb96dd047a6c8665cc
77877792
languageName: node
77887793
linkType: hard
77897794

@@ -8879,7 +8884,7 @@ __metadata:
88798884
version: 0.0.0-use.local
88808885
resolution: "@spectrum-web-components/tooltip@workspace:packages/tooltip"
88818886
dependencies:
8882-
"@spectrum-css/tooltip": "npm:7.0.0-s2-foundations.15"
8887+
"@spectrum-css/tooltip": "npm:7.1.0"
88838888
"@spectrum-web-components/base": "npm:1.4.0"
88848889
"@spectrum-web-components/overlay": "npm:1.4.0"
88858890
"@spectrum-web-components/reactive-controllers": "npm:1.4.0"

0 commit comments

Comments
 (0)