(this.activeIndicatorContainerEl = el)}
>
(this.activeIndicatorEl = el as HTMLElement)}
style={indicatorStyle}
/>
diff --git a/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts b/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts
index d9ad2e31879..acd4d233237 100644
--- a/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts
+++ b/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts
@@ -1,5 +1,5 @@
import { newE2EPage, E2EPage, E2EElement } from "@stencil/core/testing";
-import { disabled, HYDRATED_ATTR, renders, hidden } from "../../tests/commonTests";
+import { disabled, HYDRATED_ATTR, renders, hidden, themed } from "../../tests/commonTests";
import { html } from "../../../support/formatting";
import { CSS } from "./resources";
@@ -393,4 +393,77 @@ describe("calcite-tab-title", () => {
).toEqual("0px");
});
});
+
+ describe("theme", () => {
+ describe("default", () => {
+ themed("calcite-tab-title", {
+ "--calcite-tab-title-text-color": {
+ shadowSelector: `.${CSS.container}`,
+ targetProp: "color",
+ },
+ });
+ });
+
+ describe("bordered", () => {
+ themed(html`close me`, {
+ "--calcite-tab-title-background-color": {
+ shadowSelector: `.${CSS.container}`,
+ targetProp: "backgroundColor",
+ state: "hover",
+ },
+ });
+ });
+
+ describe("with icon", () => {
+ themed(html`close me`, {
+ "--calcite-tab-title-icon-color": {
+ shadowSelector: `.${CSS.titleIcon}`,
+ targetProp: "color",
+ },
+ });
+ });
+
+ describe("closable", () => {
+ themed(`close me`, {
+ "--calcite-tab-title-close-button-background-color": {
+ shadowSelector: `.${CSS.closeButton}`,
+ targetProp: "color",
+ },
+ "--calcite-tab-title-close-button-background-color-active": {
+ shadowSelector: `.${CSS.closeButton}`,
+ targetProp: "color",
+ state: "hover",
+ },
+ "--calcite-tab-title-close-button-background-color-focus": {
+ shadowSelector: `.${CSS.closeButton}`,
+ targetProp: "color",
+ state: "hover",
+ },
+ "--calcite-tab-title-close-button-background-color-hover": {
+ shadowSelector: `.${CSS.closeButton}`,
+ targetProp: "color",
+ state: "hover",
+ },
+ "--calcite-tab-title-close-button-icon-color": {
+ shadowSelector: `.${CSS.closeButton}`,
+ targetProp: "color",
+ },
+ "--calcite-tab-title-close-button-icon-color-active": {
+ shadowSelector: `.${CSS.closeButton}`,
+ targetProp: "color",
+ state: "hover",
+ },
+ "--calcite-tab-title-close-button-icon-color-focus": {
+ shadowSelector: `.${CSS.closeButton}`,
+ targetProp: "color",
+ state: "hover",
+ },
+ "--calcite-tab-title-close-button-icon-color-hover": {
+ shadowSelector: `.${CSS.closeButton}`,
+ targetProp: "color",
+ state: "hover",
+ },
+ });
+ });
+ });
});
diff --git a/packages/calcite-components/src/components/tab-title/tab-title.scss b/packages/calcite-components/src/components/tab-title/tab-title.scss
index ac489c0f593..b509bb9fd7c 100644
--- a/packages/calcite-components/src/components/tab-title/tab-title.scss
+++ b/packages/calcite-components/src/components/tab-title/tab-title.scss
@@ -298,8 +298,4 @@
}
}
-calcite-icon {
- // TODO: add sub-component tokens
-}
-
@include base-component();
diff --git a/packages/calcite-components/src/components/tab/tab.e2e.ts b/packages/calcite-components/src/components/tab/tab.e2e.ts
index 1ff8bf0a3de..54da9a19ea4 100644
--- a/packages/calcite-components/src/components/tab/tab.e2e.ts
+++ b/packages/calcite-components/src/components/tab/tab.e2e.ts
@@ -1,4 +1,5 @@
-import { defaults, renders, hidden } from "../../tests/commonTests";
+import { defaults, renders, hidden, themed } from "../../tests/commonTests";
+import { CSS } from "./resources";
describe("calcite-tab", () => {
const tabHtml = "A tab";
@@ -20,4 +21,24 @@ describe("calcite-tab", () => {
{ propertyName: "scale", defaultValue: "m" },
]);
});
+
+ describe("theme", () => {
+ describe("default", () => {
+ themed("calcite-tab", {
+ "--calcite-tab-content-space-y": {
+ shadowSelector: `.${CSS.content}`,
+ targetProp: "paddingBlock",
+ },
+ });
+ });
+
+ describe("deprecated", () => {
+ themed("calcite-tab", {
+ "--calcite-tab-content-block-padding": {
+ shadowSelector: `.${CSS.content}`,
+ targetProp: "paddingBlock",
+ },
+ });
+ });
+ });
});
diff --git a/packages/calcite-components/src/components/tab/tab.scss b/packages/calcite-components/src/components/tab/tab.scss
index 4e6e7162298..528513ec613 100644
--- a/packages/calcite-components/src/components/tab/tab.scss
+++ b/packages/calcite-components/src/components/tab/tab.scss
@@ -24,33 +24,31 @@
.content {
@apply box-border;
+ padding-block: var(
+ --calcite-tab-content-space-y,
+ var(--calcite-tab-content-block-padding, var(--calcite-tab-content-space-y-fallback))
+ );
}
.scale-s {
+ --calcite-tab-content-space-y-fallback: theme("spacing.1");
+
font-size: var(--calcite-font-size-sm);
line-height: 1rem;
-
- .content {
- padding-block: var(--calcite-tab-content-space-y, var(--calcite-tab-content-block-padding, theme("spacing.1")));
- }
}
.scale-m {
+ --calcite-tab-content-space-y-fallback: theme("spacing.2");
+
font-size: var(--calcite-font-size);
line-height: 1rem;
-
- .content {
- padding-block: var(--calcite-tab-content-space-y, var(--calcite-tab-content-block-padding, theme("spacing.2")));
- }
}
.scale-l {
+ --calcite-tab-content-space-y-fallback: theme("spacing.[2.5]");
+
font-size: var(--calcite-font-size-md);
line-height: 1.25rem;
-
- .content {
- padding-block: var(--calcite-tab-content-space-y, var(--calcite-tab-content-block-padding, theme("spacing.[2.5]")));
- }
}
section,
diff --git a/packages/calcite-components/src/components/tabs/resources.ts b/packages/calcite-components/src/components/tabs/resources.ts
index 325745e85ad..62f036fc6d2 100644
--- a/packages/calcite-components/src/components/tabs/resources.ts
+++ b/packages/calcite-components/src/components/tabs/resources.ts
@@ -1,3 +1,7 @@
+export const CSS = {
+ section: "section",
+};
+
export const SLOTS = {
titleGroup: "title-group",
};
diff --git a/packages/calcite-components/src/components/tabs/tabs.e2e.ts b/packages/calcite-components/src/components/tabs/tabs.e2e.ts
index 3f7ec456daa..f87b3ca938e 100644
--- a/packages/calcite-components/src/components/tabs/tabs.e2e.ts
+++ b/packages/calcite-components/src/components/tabs/tabs.e2e.ts
@@ -1,10 +1,11 @@
import { E2EElement, E2EPage, EventSpy, newE2EPage } from "@stencil/core/testing";
import { html } from "../../../support/formatting";
-import { accessible, defaults, hidden, reflects, renders } from "../../tests/commonTests";
+import { accessible, defaults, hidden, reflects, renders, themed } from "../../tests/commonTests";
import { GlobalTestProps } from "../../tests/utils";
import { Scale } from "../interfaces";
import { TabPosition } from "../tabs/interfaces";
import { CSS as TabTitleCSS } from "../tab-title/resources";
+import { CSS } from "./resources";
describe("calcite-tabs", () => {
const tabsContent = html`
@@ -432,4 +433,32 @@ describe("calcite-tabs", () => {
expect(await allTabs[3].isVisible()).toBe(true);
});
});
+
+ describe("theme", () => {
+ describe("default", () => {
+ themed("calcite-tabs", {
+ "--calcite-tabs-border-color": {
+ shadowSelector: `.${CSS.section}`,
+ targetProp: "borderBlockStartColor",
+ },
+ });
+ });
+
+ describe("bordered", () => {
+ themed(html``, {
+ "--calcite-tabs-background-color": {
+ targetProp: "backgroundColor",
+ },
+ "--calcite-tabs-border-color": [
+ {
+ targetProp: "boxShadow",
+ },
+ {
+ shadowSelector: `.${CSS.section}`,
+ targetProp: "borderColor",
+ },
+ ],
+ });
+ });
+ });
});
diff --git a/packages/calcite-components/src/components/tabs/tabs.scss b/packages/calcite-components/src/components/tabs/tabs.scss
index 309e1b93637..702ebd6f371 100644
--- a/packages/calcite-components/src/components/tabs/tabs.scss
+++ b/packages/calcite-components/src/components/tabs/tabs.scss
@@ -52,8 +52,6 @@ section {
@apply flex-col-reverse
border-t-0
border-b;
-
- border-block-start-color: var(--calcite-internal-tabs-border-color);
}
}
diff --git a/packages/calcite-components/src/components/tabs/tabs.tsx b/packages/calcite-components/src/components/tabs/tabs.tsx
index a38b152e680..04249da65dc 100644
--- a/packages/calcite-components/src/components/tabs/tabs.tsx
+++ b/packages/calcite-components/src/components/tabs/tabs.tsx
@@ -2,7 +2,7 @@ import { Component, Element, Fragment, h, Listen, Prop, State, VNode, Watch } fr
import { Scale } from "../interfaces";
import { createObserver } from "../../utils/observers";
import { TabLayout, TabPosition } from "./interfaces";
-import { SLOTS } from "./resources";
+import { CSS, SLOTS } from "./resources";
/**
* @slot - A slot for adding `calcite-tab`s.
@@ -69,7 +69,7 @@ export class Tabs {
return (
-