diff --git a/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts b/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts index 36a0a9ebbd9..c56d8984814 100644 --- a/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts +++ b/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts @@ -3,6 +3,9 @@ import { TOOLTIP_OPEN_DELAY_MS, TOOLTIP_CLOSE_DELAY_MS } from "../tooltip/resour import { accessible, defaults, floatingUIOwner, hidden, openClose, renders } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; import { getElementXY, GlobalTestProps } from "../../tests/utils"; +import { ComponentTestTokens, themed } from "../../tests/commonTests/themed"; +import { FloatingCSS } from "../../utils/floating-ui"; +import { CSS } from "./resources"; interface PointerMoveOptions { delay: number; @@ -1078,4 +1081,45 @@ describe("calcite-tooltip", () => { expect(await tooltip1.getProperty("open")).toBe(false); expect(await tooltip2.getProperty("open")).toBe(true); }); + + describe("theme", () => { + const tooltipHTML = html` + +

placement: auto

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore + magna aliqua. +
+ auto + `; + + describe("default", () => { + const tokens: ComponentTestTokens = { + "--calcite-tooltip-background-color": { + shadowSelector: `.${FloatingCSS.animation}`, + targetProp: "backgroundColor", + }, + "--calcite-tooltip-border-color": { + shadowSelector: `.${FloatingCSS.animation}`, + targetProp: "borderColor", + }, + "--calcite-tooltip-corner-radius": { + shadowSelector: `.${CSS.container}`, + targetProp: "borderRadius", + }, + "--calcite-tooltip-shadow": { + shadowSelector: `.${FloatingCSS.animation}`, + targetProp: "boxShadow", + }, + "--calcite-tooltip-text-color": { + shadowSelector: `.${CSS.container}`, + targetProp: "color", + }, + "--calcite-tooltip-z-index": { + selector: "calcite-tooltip", + targetProp: "zIndex", + }, + }; + themed(tooltipHTML, tokens); + }); + }); });