@@ -128,3 +128,19 @@ export const darkModeRTL_TestOnly = (): string => html`
`;
darkModeRTL_TestOnly.parameters = { themes: modesDarkDefault };
+
+export const theming_TestOnly = (): string => html`
+
+ Example Chip
+
+`;
diff --git a/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.e2e.ts b/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.e2e.ts
index 2466e3e2538..e792053eab3 100644
--- a/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.e2e.ts
+++ b/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.e2e.ts
@@ -1,7 +1,8 @@
import { E2EElement, E2EPage, newE2EPage } from "@stencil/core/testing";
-import { accessible, defaults, focusable, hidden, reflects, renders } from "../../tests/commonTests";
+import { accessible, defaults, focusable, hidden, reflects, renders, themed } from "../../tests/commonTests";
import { selectText } from "../../tests/utils";
import { canConvertToHexa, isValidHex, normalizeHex } from "../color-picker/utils";
+import { html } from "../../../support/formatting";
import { CSS } from "./resources";
describe("calcite-color-picker-hex-input", () => {
@@ -572,4 +573,88 @@ describe("calcite-color-picker-hex-input", () => {
});
});
});
+
+ describe("theme", () => {
+ describe("default", () => {
+ themed("calcite-color-picker-hex-input", {
+ "--calcite-color-picker-hex-input-affix-background-color": [
+ {
+ targetProp: "--calcite-input-prefix-background-color",
+ shadowSelector: `.${CSS.hexInput}`,
+ },
+ {
+ targetProp: "--calcite-input-suffix-background-color",
+ shadowSelector: `.${CSS.hexInput}`,
+ },
+ ],
+ "--calcite-color-picker-hex-input-affix-text-color": [
+ {
+ targetProp: "--calcite-input-prefix-text-color",
+ shadowSelector: `.${CSS.hexInput}`,
+ },
+ {
+ targetProp: "--calcite-input-suffix-text-color",
+ shadowSelector: `.${CSS.hexInput}`,
+ },
+ ],
+ "--calcite-color-picker-hex-input-background-color": {
+ targetProp: "--calcite-input-background-color",
+ shadowSelector: `.${CSS.hexInput}`,
+ },
+ "--calcite-color-picker-hex-input-border-color": {
+ targetProp: "--calcite-input-border-color",
+ shadowSelector: `.${CSS.hexInput}`,
+ },
+ "--calcite-color-picker-hex-input-corner-radius": {
+ targetProp: "--calcite-input-corner-radius",
+ shadowSelector: `.${CSS.hexInput}`,
+ },
+ "--calcite-color-picker-hex-input-text-color": {
+ targetProp: "--calcite-input-text-color",
+ shadowSelector: `.${CSS.hexInput}`,
+ },
+ });
+ });
+
+ describe("opacity enabled", () => {
+ themed(html`
`, {
+ "--calcite-color-picker-hex-input-background-color": {
+ targetProp: "--calcite-input-background-color",
+ shadowSelector: `.${CSS.opacityInput}`,
+ },
+ "--calcite-color-picker-hex-input-border-color": {
+ targetProp: "--calcite-input-border-color",
+ shadowSelector: `.${CSS.opacityInput}`,
+ },
+ "--calcite-color-picker-hex-input-corner-radius": {
+ targetProp: "--calcite-input-corner-radius",
+ shadowSelector: `.${CSS.opacityInput}`,
+ },
+ "--calcite-color-picker-hex-input-affix-background-color": [
+ {
+ targetProp: "--calcite-input-prefix-background-color",
+ shadowSelector: `.${CSS.opacityInput}`,
+ },
+ {
+ targetProp: "--calcite-input-suffix-background-color",
+ shadowSelector: `.${CSS.opacityInput}`,
+ },
+ ],
+ "--calcite-color-picker-hex-input-affix-text-color": [
+ {
+ targetProp: "--calcite-input-prefix-text-color",
+ shadowSelector: `.${CSS.opacityInput}`,
+ },
+ {
+ targetProp: "--calcite-input-suffix-text-color",
+ shadowSelector: `.${CSS.opacityInput}`,
+ },
+ ],
+ "--calcite-color-picker-hex-input-text-color": {
+ targetProp: "--calcite-input-text-color",
+ shadowSelector: `.${CSS.opacityInput}`,
+ },
+ });
+ });
+ });
});
diff --git a/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.scss b/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.scss
index 26d02a4ad1b..ee39f43a868 100644
--- a/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.scss
+++ b/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.scss
@@ -1,3 +1,16 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-color-picker-hex-input-affix-background-color: defines the background color of the prefix and suffix of the sub-component.
+ * @prop --calcite-color-picker-hex-input-affix-text-color: defines the text color of the prefix and suffix of the sub-component.
+ * @prop --calcite-color-picker-hex-input-background-color: defines the background color of the input sub-component.
+ * @prop --calcite-color-picker-hex-input-border-color: defines the border color of the input sub-component.
+ * @prop --calcite-color-picker-hex-input-corner-radius: defines the corner radius of the input sub-component.
+ * @prop --calcite-color-picker-hex-input-text-color: defines the text color of the input sub-component.
+*/
+
:host {
@apply block;
}
@@ -32,4 +45,16 @@
}
}
+calcite-input-text,
+calcite-input-number {
+ --calcite-input-suffix-background-color: var(--calcite-color-picker-hex-input-affix-background-color);
+ --calcite-input-suffix-text-color: var(--calcite-color-picker-hex-input-affix-text-color);
+ --calcite-input-prefix-background-color: var(--calcite-color-picker-hex-input-affix-background-color);
+ --calcite-input-prefix-text-color: var(--calcite-color-picker-hex-input-affix-text-color);
+ --calcite-input-text-color: var(--calcite-color-picker-hex-input-text-color);
+ --calcite-input-background-color: var(--calcite-color-picker-hex-input-background-color);
+ --calcite-input-border-color: var(--calcite-color-picker-hex-input-border-color);
+ --calcite-input-corner-radius: var(--calcite-color-picker-hex-input-corner-radius);
+}
+
@include base-component();
diff --git a/packages/calcite-components/src/components/color-picker-swatch/color-picker-swatch.scss b/packages/calcite-components/src/components/color-picker-swatch/color-picker-swatch.scss
index 531bcc3d898..daa78b3d322 100644
--- a/packages/calcite-components/src/components/color-picker-swatch/color-picker-swatch.scss
+++ b/packages/calcite-components/src/components/color-picker-swatch/color-picker-swatch.scss
@@ -1,21 +1,20 @@
-$size-s: 20px;
-$size-m: 24px;
-$size-l: 28px;
-
:host {
@apply relative inline-flex;
+
+ block-size: var(--calcite-internal-color-picker-swatch-size);
+ inline-size: var(--calcite-internal-color-picker-swatch-size);
}
:host([scale="s"]) {
- @apply h-5 w-5;
+ --calcite-internal-color-picker-swatch-size: var(--calcite-size-xl);
}
:host([scale="m"]) {
- @apply h-6 w-6;
+ --calcite-internal-color-picker-swatch-size: var(--calcite-size-xxl);
}
:host([scale="l"]) {
- @apply h-8 w-8;
+ --calcite-internal-color-picker-swatch-size: var(--calcite-size-xxxl);
}
.swatch {
@@ -39,7 +38,7 @@ $size-l: 28px;
}
.checker {
- fill: #cacaca;
+ fill: #{$calcite-color-neutral-blk-050};
}
@include base-component();
diff --git a/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts b/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts
index 2c6536ade0f..700aea3b76f 100644
--- a/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts
+++ b/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts
@@ -1,5 +1,15 @@
import { E2EElement, E2EPage, EventSpy, newE2EPage } from "@stencil/core/testing";
-import { accessible, defaults, hidden, reflects, renders, focusable, disabled, t9n } from "../../tests/commonTests";
+import {
+ accessible,
+ defaults,
+ hidden,
+ reflects,
+ renders,
+ focusable,
+ disabled,
+ t9n,
+ themed,
+} from "../../tests/commonTests";
import {
GlobalTestProps,
selectText,
@@ -2345,4 +2355,168 @@ describe("calcite-color-picker", () => {
});
});
});
+
+ describe("theme", () => {
+ describe("default", () => {
+ themed(`calcite-color-picker`, {
+ "--calcite-color-picker-background-color": {
+ shadowSelector: `.${CSS.container}`,
+ targetProp: "backgroundColor",
+ },
+ "--calcite-color-picker-button-background-color": [
+ {
+ shadowSelector: `.${CSS.deleteColor}`,
+ targetProp: "--calcite-button-background-color",
+ },
+ {
+ shadowSelector: `.${CSS.saveColor}`,
+ targetProp: "--calcite-button-background-color",
+ },
+ ],
+ "--calcite-color-picker-button-background-color-active": [
+ {
+ shadowSelector: `.${CSS.deleteColor}`,
+ targetProp: "--calcite-button-background-color",
+ state: { press: { attribute: "class", value: CSS.deleteColor } },
+ },
+ {
+ shadowSelector: `.${CSS.saveColor}`,
+ targetProp: "--calcite-button-background-color",
+ state: { press: { attribute: "class", value: CSS.saveColor } },
+ },
+ ],
+ "--calcite-color-picker-button-background-color-focus": [
+ {
+ shadowSelector: `.${CSS.deleteColor}`,
+ targetProp: "--calcite-button-background-color",
+ state: { focus: { attribute: "class", value: CSS.deleteColor } },
+ },
+ {
+ shadowSelector: `.${CSS.saveColor}`,
+ targetProp: "--calcite-button-background-color",
+ state: { focus: { attribute: "class", value: CSS.saveColor } },
+ },
+ ],
+ "--calcite-color-picker-button-background-color-hover": [
+ {
+ shadowSelector: `.${CSS.deleteColor}`,
+ targetProp: "--calcite-button-background-color",
+ state: "hover",
+ },
+ {
+ shadowSelector: `.${CSS.saveColor}`,
+ targetProp: "--calcite-button-background-color",
+ state: "hover",
+ },
+ ],
+ "--calcite-color-picker-input-background-color": [
+ {
+ shadowSelector: `.${CSS.channel}`,
+ targetProp: "--calcite-input-background-color",
+ },
+ {
+ shadowSelector: `.${CSS.hexInput}`,
+ targetProp: "--calcite-color-picker-hex-input-background-color",
+ },
+ ],
+ "--calcite-color-picker-input-border-color": [
+ {
+ shadowSelector: `.${CSS.channel}`,
+ targetProp: "--calcite-input-border-color",
+ },
+ {
+ shadowSelector: `.${CSS.hexInput}`,
+ targetProp: "--calcite-color-picker-hex-input-border-color",
+ },
+ ],
+ "--calcite-color-picker-input-corner-radius": [
+ {
+ shadowSelector: `.${CSS.channel}`,
+ targetProp: "--calcite-input-corner-radius",
+ },
+ {
+ shadowSelector: `.${CSS.hexInput}`,
+ targetProp: "--calcite-color-picker-hex-input-corner-radius",
+ },
+ ],
+ "--calcite-color-picker-input-affix-background-color": [
+ {
+ shadowSelector: `.${CSS.hexInput}`,
+ targetProp: "--calcite-color-picker-hex-input-affix-background-color",
+ },
+ {
+ shadowSelector: `.${CSS.channel}`,
+ targetProp: "--calcite-input-suffix-background-color",
+ },
+ {
+ shadowSelector: `.${CSS.hexInput}`,
+ targetProp: "--calcite-color-picker-hex-input-affix-background-color",
+ },
+ ],
+ "--calcite-color-picker-input-affix-text-color": [
+ {
+ shadowSelector: `.${CSS.hexInput}`,
+ targetProp: "--calcite-color-picker-hex-input-affix-text-color",
+ },
+ {
+ shadowSelector: `.${CSS.channel}`,
+ targetProp: "--calcite-input-suffix-text-color",
+ },
+ {
+ shadowSelector: `.${CSS.hexInput}`,
+ targetProp: "--calcite-color-picker-hex-input-affix-text-color",
+ },
+ ],
+ "--calcite-color-picker-input-text-color": [
+ {
+ shadowSelector: `.${CSS.channel}`,
+ targetProp: "--calcite-input-text-color",
+ },
+ {
+ shadowSelector: `.${CSS.hexInput}`,
+ targetProp: "--calcite-color-picker-hex-input-text-color",
+ },
+ ],
+ "--calcite-color-picker-tab-nav-indicator-color": {
+ shadowSelector: `.${CSS.colorModes}`,
+ targetProp: "--calcite-tab-nav-indicator-color",
+ },
+ "--calcite-color-picker-tab-title-text-color": {
+ shadowSelector: `.${CSS.colorMode}`,
+ targetProp: "--calcite-tab-title-text-color",
+ },
+ "--calcite-color-picker-tabs-border-color": {
+ shadowSelector: `.${CSS.colorModeContainer}`,
+ targetProp: "--calcite-tabs-border-color",
+ },
+ "--calcite-color-picker-text-color": [
+ {
+ shadowSelector: `.${CSS.deleteColor}`,
+ targetProp: "--calcite-button-text-color",
+ },
+ {
+ shadowSelector: `.${CSS.saveColor}`,
+ targetProp: "--calcite-button-text-color",
+ },
+ {
+ shadowSelector: `.${CSS.header}`,
+ targetProp: "color",
+ },
+ ],
+ });
+ });
+
+ describe("opacity enabled", () => {
+ themed(html`
`, {
+ "--calcite-color-picker-input-affix-background-color": {
+ shadowSelector: `.${CSS.channel}[data-channel-index="3"]`,
+ targetProp: "--calcite-input-suffix-background-color",
+ },
+ "--calcite-color-picker-input-affix-text-color": {
+ shadowSelector: `.${CSS.channel}[data-channel-index="3"]`,
+ targetProp: "--calcite-input-suffix-text-color",
+ },
+ });
+ });
+ });
});
diff --git a/packages/calcite-components/src/components/color-picker/color-picker.scss b/packages/calcite-components/src/components/color-picker/color-picker.scss
index 0477adc4350..a130a9b87a7 100644
--- a/packages/calcite-components/src/components/color-picker/color-picker.scss
+++ b/packages/calcite-components/src/components/color-picker/color-picker.scss
@@ -1,3 +1,25 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-color-picker-background-color: Specifies the background color of the component.
+ * @prop --calcite-color-picker-button-background-color-active: defines the background color of the button when in a active state in the component.
+ * @prop --calcite-color-picker-button-background-color-focus: defines the background color of the button when in a focus state in the component.
+ * @prop --calcite-color-picker-button-background-color-hover: defines the background color of the button when in a hover state in the component.
+ * @prop --calcite-color-picker-button-corner-radius: defines the corner radius of the button in the component.
+ * @prop --calcite-color-picker-input-affix-background-color: defines the background color of the prefix and suffix of the sub-component.
+ * @prop --calcite-color-picker-input-affix-text-color: defines the text color of the prefix and suffix of the sub-component.
+ * @prop --calcite-color-picker-input-background-color: defines the background color of the input in the component.
+ * @prop --calcite-color-picker-input-border-color: defines the border color of the input in the component.
+ * @prop --calcite-color-picker-input-corner-radius: defines the corner radius of the input in the component.
+ * @prop --calcite-color-picker-input-text-color: defines the text color of the input in the component.
+ * @prop --calcite-color-picker-tab-nav-indicator-color: Specifies the color of the active tab indicator.
+ * @prop --calcite-color-picker-tab-title-text-color: Specifies the text color of the sub-component.
+ * @prop --calcite-color-picker-tabs-border-color: The border color of the sub-component.
+ * @prop --calcite-color-picker-text-color: Specifies the background color of the component.
+ */
+
:host {
@apply text-n2h inline-block font-normal;
}
@@ -5,7 +27,7 @@
@include disabled();
:host([scale="s"]) {
- --calcite-color-picker-spacing: 8px;
+ --calcite-internal-color-picker-space: 8px;
.container {
inline-size: 160px;
@@ -18,7 +40,7 @@
}
:host([scale="m"]) {
- --calcite-color-picker-spacing: 12px;
+ --calcite-internal-color-picker-space: 12px;
.container {
inline-size: 272px;
@@ -26,7 +48,7 @@
}
:host([scale="l"]) {
- --calcite-color-picker-spacing: 16px;
+ --calcite-internal-color-picker-space: 16px;
@apply text-n1h;
@@ -36,7 +58,7 @@
.section {
&:first-of-type {
- padding-block-start: var(--calcite-color-picker-spacing);
+ padding-block-start: var(--calcite-internal-color-picker-space);
}
}
@@ -65,9 +87,9 @@
}
.container {
- @apply bg-foreground-1;
- display: inline-block;
+ background-color: var(--calcite-color-picker-background-color, var(--calcite-color-foreground-1));
border: 1px solid var(--calcite-color-border-1);
+ display: inline-block;
}
.control-and-scope {
@@ -100,23 +122,23 @@
}
.section {
- padding-block: 0 var(--calcite-color-picker-spacing);
- padding-inline: var(--calcite-color-picker-spacing);
+ padding-block: 0 var(--calcite-internal-color-picker-space);
+ padding-inline: var(--calcite-internal-color-picker-space);
&:first-of-type {
- padding-block-start: var(--calcite-color-picker-spacing);
+ padding-block-start: var(--calcite-internal-color-picker-space);
}
}
.sliders {
@apply flex flex-col justify-between;
- margin-inline-start: var(--calcite-color-picker-spacing);
+ margin-inline-start: var(--calcite-internal-color-picker-space);
gap: var(--calcite-spacing-xxs);
}
.preview-and-sliders {
@apply flex items-center;
- padding: var(--calcite-color-picker-spacing);
+ padding: var(--calcite-internal-color-picker-space);
}
.color-hex-options,
@@ -125,14 +147,15 @@
}
.header {
- @apply text-color-1
- flex
+ @apply flex
items-center
justify-between;
+
+ color: var(--calcite-color-picker-text-color, var(--calcite-color-text-1));
}
.color-mode-container {
- padding-block-start: var(--calcite-color-picker-spacing);
+ padding-block-start: var(--calcite-internal-color-picker-space);
}
.channels {
@@ -171,7 +194,7 @@
.saved-colors {
@apply grid gap-2;
- padding-block-start: var(--calcite-color-picker-spacing);
+ padding-block-start: var(--calcite-internal-color-picker-space);
grid-template-columns: repeat(auto-fill, 24px);
}
@@ -195,4 +218,53 @@
}
}
+calcite-button {
+ --calcite-button-corner-radius: var(--calcite-color-picker-button-corner-radius);
+ --calcite-button-text-color: var(--calcite-color-picker-text-color);
+ --calcite-button-background-color: var(--calcite-color-picker-button-background-color);
+ --calcite-button-icon-color: var(--calcite-color-picker-text-color);
+
+ &:hover {
+ --calcite-button-background-color: var(--calcite-color-picker-button-background-color-hover);
+ }
+ &:focus {
+ --calcite-button-background-color: var(--calcite-color-picker-button-background-color-focus);
+ }
+ &:active {
+ --calcite-button-background-color: var(--calcite-color-picker-button-background-color-active);
+ }
+}
+
+calcite-color-picker-hex-input {
+ --calcite-color-picker-hex-input-affix-background-color: var(--calcite-color-picker-input-affix-background-color);
+ --calcite-color-picker-hex-input-affix-text-color: var(--calcite-color-picker-input-affix-text-color);
+ --calcite-color-picker-hex-input-background-color: var(--calcite-color-picker-input-background-color);
+ --calcite-color-picker-hex-input-border-color: var(--calcite-color-picker-input-border-color);
+ --calcite-color-picker-hex-input-corner-radius: var(--calcite-color-picker-input-corner-radius);
+ --calcite-color-picker-hex-input-text-color: var(--calcite-color-picker-input-text-color);
+}
+
+calcite-input-number {
+ --calcite-input-background-color: var(--calcite-color-picker-input-background-color);
+ --calcite-input-border-color: var(--calcite-color-picker-input-border-color);
+ --calcite-input-text-color: var(--calcite-color-picker-input-text-color);
+ --calcite-input-suffix-background-color: var(--calcite-color-picker-input-affix-background-color);
+ --calcite-input-suffix-text-color: var(--calcite-color-picker-input-affix-background-color);
+ --calcite-input-corner-radius: var(--calcite-color-picker-input-corner-radius);
+}
+
+calcite-tabs {
+ --calcite-tabs-background-color: var(--calcite-color-picker-tabs-background-color);
+ --calcite-tabs-border-color: var(--calcite-color-picker-tabs-border-color);
+}
+
+calcite-tab-nav {
+ --calcite-tab-nav-indicator-color: var(--calcite-color-picker-tab-nav-indicator-color);
+}
+
+calcite-tab-title {
+ --calcite-tab-title-background-color: var(--calcite-color-picker-tab-title-background-color);
+ --calcite-tab-title-text-color: var(--calcite-color-picker-tab-title-text-color);
+}
+
@include base-component();
diff --git a/packages/calcite-components/src/components/color-picker/color-picker.tsx b/packages/calcite-components/src/components/color-picker/color-picker.tsx
index cc6f8d9b68d..f934eed5d3f 100644
--- a/packages/calcite-components/src/components/color-picker/color-picker.tsx
+++ b/packages/calcite-components/src/components/color-picker/color-picker.tsx
@@ -888,7 +888,10 @@ export class ColorPicker
-
+
{this.renderChannelsTabTitle("rgb")}
{this.renderChannelsTabTitle("hsv")}
diff --git a/packages/calcite-components/src/components/color-picker/resources.ts b/packages/calcite-components/src/components/color-picker/resources.ts
index a8e090c2b86..150285c3803 100644
--- a/packages/calcite-components/src/components/color-picker/resources.ts
+++ b/packages/calcite-components/src/components/color-picker/resources.ts
@@ -7,6 +7,7 @@ export const CSS = {
colorFieldScope: "scope--color-field",
colorMode: "color-mode",
colorModeContainer: "color-mode-container",
+ colorModes: "color-modes",
container: "container",
control: "control",
controlAndScope: "control-and-scope",
@@ -14,6 +15,7 @@ export const CSS = {
deleteColor: "delete-color",
header: "header",
hexAndChannelsGroup: "hex-and-channels-group",
+ hexInput: "hex-input",
hexOptions: "color-hex-options",
hueScope: "scope--hue",
hueSlider: "hue-slider",
diff --git a/packages/calcite-components/src/components/combobox-item-group/combobox-item-group.e2e.ts b/packages/calcite-components/src/components/combobox-item-group/combobox-item-group.e2e.ts
new file mode 100644
index 00000000000..412fdca4ca7
--- /dev/null
+++ b/packages/calcite-components/src/components/combobox-item-group/combobox-item-group.e2e.ts
@@ -0,0 +1,19 @@
+import { themed } from "../../tests/commonTests";
+import { CSS } from "./resources";
+
+describe("calcite-combobox-item-group", () => {
+ describe("theme", () => {
+ describe("default", () => {
+ themed("calcite-combobox-item-group", {
+ "--calcite-combobox-item-group-border-color": {
+ shadowSelector: `.${CSS.title}`,
+ targetProp: "borderColor",
+ },
+ "--calcite-combobox-item-group-text-color": {
+ shadowSelector: `.${CSS.title}`,
+ targetProp: "color",
+ },
+ });
+ });
+ });
+});
diff --git a/packages/calcite-components/src/components/combobox-item-group/combobox-item-group.scss b/packages/calcite-components/src/components/combobox-item-group/combobox-item-group.scss
index e6caa423287..181a4d71d0b 100644
--- a/packages/calcite-components/src/components/combobox-item-group/combobox-item-group.scss
+++ b/packages/calcite-components/src/components/combobox-item-group/combobox-item-group.scss
@@ -1,22 +1,36 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-combobox-item-group-border-color: defines the border color of a combobox item.
+ * @prop --calcite-combobox-item-group-text-color: defines the text color of a combobox item.
+ */
+
+/*
+ * Internal
+ *
+ * --calcite-internal-combobox-item-group-space-large: defines the block spacing of the combobox-item. Set via the [scale] prop on a combobox-item.
+ * --calcite-internal-combobox-item-group-space-small: defines the inline spacing of the combobox-item. Set via the [scale] prop on a combobox-item.
+ * --calcite-internal-combobox-item-group-depth: defines the depth of the combobox-item in a combobox dropdown list. This is used as a multiplier to determine the inline-start padding of a combobox item.
+ */
+
.scale--s {
@apply text-n2h;
- --calcite-combobox-item-spacing-unit-l: theme("spacing.2");
- --calcite-combobox-item-spacing-unit-s: theme("spacing.1");
- --calcite-combobox-item-spacing-indent: theme("spacing.2");
+ --calcite-internal-combobox-item-group-space-large: theme("spacing.2");
+ --calcite-internal-combobox-item-group-space-small: theme("spacing.1");
}
.scale--m {
@apply text-n1h;
- --calcite-combobox-item-spacing-unit-l: theme("spacing.3");
- --calcite-combobox-item-spacing-unit-s: theme("spacing.2");
- --calcite-combobox-item-spacing-indent: theme("spacing.3");
+ --calcite-internal-combobox-item-group-space-large: theme("spacing.3");
+ --calcite-internal-combobox-item-group-space-small: theme("spacing.2");
}
.scale--l {
@apply text-0h;
- --calcite-combobox-item-spacing-unit-l: theme("spacing.4");
- --calcite-combobox-item-spacing-unit-s: theme("spacing.3");
- --calcite-combobox-item-spacing-indent: theme("spacing.4");
+ --calcite-internal-combobox-item-group-space-large: theme("spacing.4");
+ --calcite-internal-combobox-item-group-space-small: theme("spacing.3");
}
:host,
@@ -30,28 +44,28 @@
}
.label {
- @apply text-color-3 box-border flex w-full min-w-0 max-w-full;
+ @apply box-border flex w-full min-w-0 max-w-full;
}
.title {
- --calcite-combobox-item-indent-value: calc(
- var(--calcite-combobox-item-spacing-indent) * var(--calcite-combobox-item-spacing-indent-multiplier)
+ --calcite-internal-combobox-item-group-space-x: calc(
+ var(--calcite-internal-combobox-item-group-space-large) * var(--calcite-internal-combobox-item-group-depth)
);
border: 0 solid;
- @apply border-b-color-3
- text-color-2
- word-break
+ @apply word-break
block
flex-1
- border-b
font-bold;
- padding-block: var(--calcite-combobox-item-spacing-unit-l);
- padding-inline: var(--calcite-combobox-item-spacing-unit-s);
- margin-inline-start: var(--calcite-combobox-item-indent-value);
+ border-block-end-width: var(--calcite-border-width-sm);
+ border-block-end-color: var(--calcite-combobox-item-group-border-color, var(--calcite-color-border-3));
+ color: var(--calcite-combobox-item-group-text-color, var(--calcite-color-text-2));
+ padding-block: var(--calcite-internal-combobox-item-group-space-large);
+ padding-inline: var(--calcite-internal-combobox-item-group-space-small);
+ margin-inline-start: var(--calcite-internal-combobox-item-group-space-x);
}
::slotted(calcite-combobox-item-group:not([after-empty-group])) {
- padding-block-start: var(--calcite-combobox-item-spacing-unit-l);
+ padding-block-start: var(--calcite-internal-combobox-item-group-space-large);
}
@include base-component();
diff --git a/packages/calcite-components/src/components/combobox-item-group/combobox-item-group.tsx b/packages/calcite-components/src/components/combobox-item-group/combobox-item-group.tsx
index a3d245d6e96..2ee0acc11a9 100644
--- a/packages/calcite-components/src/components/combobox-item-group/combobox-item-group.tsx
+++ b/packages/calcite-components/src/components/combobox-item-group/combobox-item-group.tsx
@@ -80,7 +80,7 @@ export class ComboboxItemGroup {
class={{ [CSS.label]: true }}
id={this.guid}
role="presentation"
- style={{ "--calcite-combobox-item-spacing-indent-multiplier": `${depth}` }}
+ style={{ "--calcite-internal-combobox-item-group-depth": `${depth}` }}
>
{this.label}
diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts b/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts
index 6402ca27746..756b9ff6d39 100644
--- a/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts
+++ b/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts
@@ -1,4 +1,5 @@
-import { disabled, hidden, renders, slots } from "../../tests/commonTests";
+import { disabled, hidden, renders, slots, themed } from "../../tests/commonTests";
+import { CSS } from "./resources";
describe("calcite-combobox-item", () => {
describe("renders", () => {
@@ -16,4 +17,57 @@ describe("calcite-combobox-item", () => {
describe("disabled", () => {
disabled("calcite-combobox-item", { focusTarget: "none" });
});
+
+ describe("theme", () => {
+ describe("default", () => {
+ themed("calcite-combobox-item", {
+ "--calcite-combobox-item-background-color": {
+ shadowSelector: `.${CSS.label}`,
+ targetProp: "backgroundColor",
+ },
+ "--calcite-combobox-item-indicator-color": {
+ shadowSelector: `.${CSS.icon}`,
+ targetProp: "color",
+ },
+ "--calcite-combobox-item-shadow": {
+ shadowSelector: `.${CSS.label}`,
+ targetProp: "boxShadow",
+ },
+ "--calcite-combobox-item-text-color": {
+ shadowSelector: `.${CSS.label}`,
+ targetProp: "color",
+ },
+ });
+ });
+
+ describe("custom icon", () => {
+ themed("test", {
+ "--calcite-combobox-item-icon-color": {
+ shadowSelector: `.${CSS.custom}`,
+ targetProp: "color",
+ },
+ });
+ });
+
+ describe("selected", () => {
+ themed("test", {
+ "--calcite-combobox-item-background-color-active": {
+ shadowSelector: `.${CSS.label}`,
+ targetProp: "color",
+ },
+ "--calcite-combobox-item-text-color-active": {
+ shadowSelector: `.${CSS.label}`,
+ targetProp: "color",
+ },
+ "--calcite-combobox-item-icon-color-active": {
+ shadowSelector: `.${CSS.icon}`,
+ targetProp: "color",
+ },
+ "--calcite-combobox-item-indicator-color-active": {
+ shadowSelector: `.${CSS.iconActive}`,
+ targetProp: "color",
+ },
+ });
+ });
+ });
});
diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.scss b/packages/calcite-components/src/components/combobox-item/combobox-item.scss
index 9c10946cbdd..47eebbafed5 100644
--- a/packages/calcite-components/src/components/combobox-item/combobox-item.scss
+++ b/packages/calcite-components/src/components/combobox-item/combobox-item.scss
@@ -1,37 +1,59 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-combobox-item-background-color-active: defines the background color when the component is active or hovered.
+ * @prop --calcite-combobox-item-background-color: defines the background color of the component
+ * @prop --calcite-combobox-item-icon-color-active: defines the color of a custom icon when the component is active.
+ * @prop --calcite-combobox-item-icon-color: defines the color of a custom icon in the component.
+ * @prop --calcite-combobox-item-indicator-color-active: defines the color of an indicator icon when the component is active.
+ * @prop --calcite-combobox-item-indicator-color: defines the indicator icon color.
+ * @prop --calcite-combobox-item-shadow: defines the shadow of the component.
+ * @prop --calcite-combobox-item-text-color-active: defines the text color when the component is selected, active, or hovered.
+ * @prop --calcite-combobox-item-text-color: defines the text color of the component.
+ */
+
+/*
+ * Internal
+ --calcite-internal-combobox-item-space-large
+ --calcite-internal-combobox-item-space-small
+ --calcite-internal-combobox-item-depth
+ --calcite-internal-combobox-item-selector-icon-size
+ --calcite-internal-combobox-item-space-x: defines the calculated indented space of a grouped combobox-item. Calculated from `--calcite-internal-combobox-item-space-large` and `--calcite-internal-combobox-item-depth`
+ */
+
@include base-component();
.scale--s {
@apply text-n2h;
- --calcite-combobox-item-spacing-unit-l: theme("spacing.2");
- --calcite-combobox-item-spacing-unit-s: theme("spacing.1");
- --calcite-combobox-item-spacing-indent: theme("spacing.2");
- --calcite-combobox-item-selector-icon-size: theme("spacing.4");
+ --calcite-internal-combobox-item-space-large: theme("spacing.2");
+ --calcite-internal-combobox-item-space-small: theme("spacing.1");
+ --calcite-internal-combobox-item-selector-icon-size: theme("spacing.4");
}
.scale--m {
@apply text-n1h;
- --calcite-combobox-item-spacing-unit-l: theme("spacing.3");
- --calcite-combobox-item-spacing-unit-s: theme("spacing.2");
- --calcite-combobox-item-spacing-indent: theme("spacing.3");
- --calcite-combobox-item-selector-icon-size: theme("spacing.4");
+ --calcite-internal-combobox-item-space-large: theme("spacing.3");
+ --calcite-internal-combobox-item-space-small: theme("spacing.2");
+ --calcite-internal-combobox-item-selector-icon-size: theme("spacing.4");
}
.scale--l {
@apply text-0h;
- --calcite-combobox-item-spacing-unit-l: theme("spacing.4");
- --calcite-combobox-item-spacing-unit-s: theme("spacing[2.5]");
- --calcite-combobox-item-spacing-indent: theme("spacing.4");
- --calcite-combobox-item-selector-icon-size: theme("spacing.6");
+ --calcite-internal-combobox-item-space-large: theme("spacing.4");
+ --calcite-internal-combobox-item-space-small: theme("spacing[2.5]");
+ --calcite-internal-combobox-item-selector-icon-size: theme("spacing.6");
}
.container {
- --calcite-combobox-item-indent-value: calc(
- var(--calcite-combobox-item-spacing-indent) * var(--calcite-combobox-item-spacing-indent-multiplier)
+ --calcite-internal-combobox-item-space-x: calc(
+ var(--calcite-internal-combobox-item-space-large) * var(--calcite-internal-combobox-item-depth)
);
}
:host(:focus) {
- @apply shadow-none;
+ box-shadow: var(--calcite-shadow-none);
}
@include disabled();
@@ -47,21 +69,23 @@ ul:focus {
}
.label {
- @apply text-color-3
- focus-base
- relative
- box-border
- flex
- w-full
- min-w-full
- cursor-pointer
- items-center
- no-underline
- duration-150
- ease-in-out;
+ @apply focus-base
+ relative
+ box-border
+ flex
+ cursor-pointer
+ items-center
+ no-underline
+ duration-150
+ ease-in-out;
@include word-break();
- padding-block: var(--calcite-combobox-item-spacing-unit-s);
- padding-inline: var(--calcite-combobox-item-spacing-unit-l);
+ background-color: var(--calcite-combobox-item-background-color, var(--calcite-color-transparent));
+ color: var(--calcite-combobox-item-text-color, var(--calcite-color-text-3));
+ padding-block: var(--calcite-internal-combobox-item-space-small);
+ padding-inline: var(--calcite-internal-combobox-item-space-large);
+ inline-size: var(--calcite-container-size-content-fluid);
+ min-inline-size: var(--calcite-container-size-content-fluid);
+ box-shadow: var(--calcite-combobox-item-shadow, var(--calcite-shadow-none));
}
:host([disabled]) .label {
@@ -70,7 +94,8 @@ ul:focus {
// selected state
.label--selected {
- @apply text-color-1 font-medium;
+ @apply font-medium;
+ color: var(--calcite-combobox-item-text-color-active, var(--calcite-color-text-1));
}
.label--active {
@@ -79,42 +104,41 @@ ul:focus {
.label:hover,
.label:active {
- @apply text-color-1
- bg-foreground-2
- no-underline
- shadow-none;
+ @apply no-underline;
+ background-color: var(--calcite-combobox-item-background-color-active, var(--calcite-color-foreground-2));
+ color: var(--calcite-combobox-item-text-color-active, var(--calcite-color-text-1));
}
.title {
padding-block: 0;
- padding-inline: var(--calcite-combobox-item-spacing-unit-l);
+ padding-inline: var(--calcite-internal-combobox-item-space-large);
}
.icon {
@apply inline-flex
- opacity-0
- duration-150
- ease-in-out;
- color: theme("borderColor.color.1");
+ duration-150
+ ease-in-out;
+ opacity: 0;
+ color: var(--calcite-combobox-item-indicator-color, var(--calcite-color-border-1));
}
.icon--indent {
- padding-inline-start: var(--calcite-combobox-item-indent-value);
+ padding-inline-start: var(--calcite-internal-combobox-item-space-x);
}
.icon--custom {
margin-block-start: -1px;
- padding-inline-start: var(--calcite-combobox-item-spacing-unit-l);
- @apply text-color-3;
+ padding-inline-start: var(--calcite-internal-combobox-item-space-large);
+ color: var(--calcite-combobox-item-icon-color, var(--calcite-color-text-3));
}
.icon--active {
- @apply text-color-1;
+ color: var(--calcite-combobox-item-indicator-color-active, var(--calcite-color-text-1));
}
.icon--dot {
@apply flex justify-center;
- min-inline-size: var(--calcite-combobox-item-selector-icon-size);
+ min-inline-size: var(--calcite-internal-combobox-item-selector-icon-size);
}
.icon--dot::before {
@@ -123,16 +147,16 @@ ul:focus {
}
.label--active .icon {
- @apply opacity-100;
+ opacity: var(--calcite-opacity-full);
}
.label--selected .icon {
- @apply opacity-100;
- color: theme("backgroundColor.brand");
+ opacity: var(--calcite-opacity-full);
+ color: var(--calcite-combobox-item-icon-color-active, var(--calcite-color-brand));
}
:host(:hover[disabled]) .icon {
- @apply opacity-100;
+ opacity: var(--calcite-opacity-full);
}
.filter-match {
diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.tsx b/packages/calcite-components/src/components/combobox-item/combobox-item.tsx
index f65d4d4fb19..8b8b49fbacc 100644
--- a/packages/calcite-components/src/components/combobox-item/combobox-item.tsx
+++ b/packages/calcite-components/src/components/combobox-item/combobox-item.tsx
@@ -257,7 +257,7 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon
{this.renderSelectIndicator(showDot, iconPath)}
diff --git a/packages/calcite-components/src/components/combobox/combobox.e2e.ts b/packages/calcite-components/src/components/combobox/combobox.e2e.ts
index 6b195d744a7..e222ed96333 100644
--- a/packages/calcite-components/src/components/combobox/combobox.e2e.ts
+++ b/packages/calcite-components/src/components/combobox/combobox.e2e.ts
@@ -11,6 +11,7 @@ import {
reflects,
renders,
t9n,
+ themed,
} from "../../tests/commonTests";
import { html } from "../../../support/formatting";
import { CSS as ComboboxItemCSS } from "../combobox-item/resources";
@@ -2286,6 +2287,73 @@ describe("calcite-combobox", () => {
expect(chips.length).toBe(2);
});
+ describe("theme", () => {
+ describe("default", () => {
+ themed(
+ html`
+
+
+
+ `,
+ {
+ "--calcite-combobox-border-color": {
+ shadowSelector: `.${CSS.wrapper}`,
+ targetProp: "borderColor",
+ },
+ "--calcite-combobox-background-color": {
+ shadowSelector: `.${CSS.wrapper}`,
+ targetProp: "backgroundColor",
+ },
+ "--calcite-combobox-text-color": {
+ shadowSelector: `.${CSS.wrapper}`,
+ targetProp: "color",
+ },
+ },
+ );
+ });
+
+ describe("active chip", () => {
+ themed(
+ async () => {
+ const page = await newE2EPage();
+ await page.setContent(`html
+
+
+
+ `);
+ const combobox = await page.find("calcite-combobox");
+
+ await combobox.click();
+ await combobox.press("ArrowLeft");
+ await page.waitForChanges();
+
+ return { page, tag: "calcite-combobox" };
+ },
+ {
+ "--calcite-combobox-chip-background-color-active": {
+ shadowSelector: `.${CSS.chipActive}`,
+ targetProp: "--calcite-chip-background-color",
+ },
+ },
+ );
+ });
+
+ describe("deprecated", () => {
+ themed("calcite-combobox", {
+ "--calcite-combobox-input-height": [
+ {
+ shadowSelector: `.${CSS.input}`,
+ targetProp: "blockSize",
+ },
+ {
+ shadowSelector: `.${CSS.input}`,
+ targetProp: "lineHeight",
+ },
+ ],
+ });
+ });
+ });
+
it("prevents opening a readonly combobox", async () => {
const page = await newE2EPage();
await page.setContent(html`
diff --git a/packages/calcite-components/src/components/combobox/combobox.scss b/packages/calcite-components/src/components/combobox/combobox.scss
index cec2a8608b2..e470f68154d 100644
--- a/packages/calcite-components/src/components/combobox/combobox.scss
+++ b/packages/calcite-components/src/components/combobox/combobox.scss
@@ -3,7 +3,19 @@
*
* These properties can be overridden using the component's tag as selector.
*
- * @prop --calcite-combobox-input-height: Specifies the height of the component's input.
+ * @prop --calcite-combobox-background-color: defines the background color of the component
+ * @prop --calcite-combobox-border-color: defines the border color of the component
+ * @prop --calcite-combobox-chip-background-color-active: defines the background color of a chip sub-component when active
+ * @prop --calcite-combobox-input-height: [Deprecated] Specifies the height of the component's input.
+ * @prop --calcite-combobox-text-color: defines the text color of the component
+ */
+
+/*
+ * Internal
+ --calcite-internal-combobox-space-large
+ --calcite-internal-combobox-space-small
+ --calcite-internal-combobox-height
+ --calcite-internal-combobox-space-y
*/
:host {
@@ -15,56 +27,49 @@
:host([scale="s"]) {
@apply text-n2;
- --calcite-combobox-item-spacing-unit-l: theme("spacing.2");
- --calcite-combobox-item-spacing-unit-s: theme("spacing.1");
- --calcite-combobox-input-height: theme("spacing.4");
- --calcite-internal-combobox-input-margin-block: calc(theme("spacing.1") - theme("borderWidth.DEFAULT"));
-
- .x-button {
- margin-inline: theme("spacing.2");
- }
+ --calcite-internal-combobox-space-large: theme("spacing.2");
+ --calcite-internal-combobox-space-small: theme("spacing.1");
+ --calcite-internal-combobox-height: var(--calcite-combobox-input-height, theme("spacing.4"));
+ --calcite-internal-combobox-space-y: calc(theme("spacing.1") - theme("borderWidth.DEFAULT"));
}
:host([scale="m"]) {
@apply text-n1;
- --calcite-combobox-item-spacing-unit-l: theme("spacing.3");
- --calcite-combobox-item-spacing-unit-s: theme("spacing.2");
- --calcite-combobox-input-height: theme("spacing.4");
- --calcite-internal-combobox-input-margin-block: calc(theme("spacing.2") - theme("borderWidth.DEFAULT"));
-
- .x-button {
- margin-inline-end: theme("spacing.3");
- }
+ --calcite-internal-combobox-space-large: theme("spacing.3");
+ --calcite-internal-combobox-space-small: theme("spacing.2");
+ --calcite-internal-combobox-height: var(--calcite-combobox-input-height, theme("spacing.4"));
+ --calcite-internal-combobox-space-y: calc(theme("spacing.2") - theme("borderWidth.DEFAULT"));
}
:host([scale="l"]) {
@apply text-0;
- --calcite-combobox-item-spacing-unit-l: theme("spacing.4");
- --calcite-combobox-item-spacing-unit-s: theme("spacing.3");
- --calcite-combobox-input-height: theme("spacing.6");
- --calcite-internal-combobox-input-margin-block: calc(theme("spacing[2.5]") - theme("borderWidth.DEFAULT"));
-
- .x-button {
- margin-inline-end: theme("spacing.4");
- }
+ --calcite-internal-combobox-space-large: theme("spacing.4");
+ --calcite-internal-combobox-space-small: theme("spacing.3");
+ --calcite-internal-combobox-height: var(--calcite-combobox-input-height, theme("spacing.6"));
+ --calcite-internal-combobox-space-y: calc(theme("spacing[2.5]") - theme("borderWidth.DEFAULT"));
}
.wrapper {
- @apply bg-foreground-1
- text-color-1
- focus-base
+ @apply focus-base
flex
- border-color-input
border
border-solid;
- padding-block: calc(var(--calcite-combobox-item-spacing-unit-s) / 4);
- padding-inline: var(--calcite-combobox-item-spacing-unit-l);
+ border-color: var(--calcite-combobox-border-color, var(--calcite-color-border-input));
+ background-color: var(--calcite-combobox-background-color, var(--calcite-color-foreground-1));
+ color: var(--calcite-combobox-text-color, var(--calcite-color-text-1));
+ padding-block: calc(var(--calcite-internal-combobox-space-small) / 4);
+ padding-inline: var(--calcite-internal-combobox-space-large);
+}
- &:hover {
- .icon {
- color: var(--calcite-color-text-1);
- }
- }
+.label {
+ @apply pointer-events-none
+ max-w-full
+ flex-auto
+ truncate
+ p-0
+ font-normal;
+ block-size: var(--calcite-internal-combobox-height);
+ line-height: var(--calcite-internal-combobox-height);
}
:host(:focus-within) .wrapper,
@@ -83,16 +88,20 @@
}
:host([status="invalid"]) .wrapper {
- @apply border-color-danger;
+ border-color: var(--calcite-combobox-border-color, var(--calcite-color-status-danger));
}
:host([status="invalid"]:focus-within) .wrapper {
@apply focus-inset-danger;
}
+.x-button {
+ margin-inline-end: var(--calcite-internal-combobox-space-large);
+}
+
.wrapper--single {
padding-block: 0;
- padding-inline: var(--calcite-combobox-item-spacing-unit-l);
+ padding-inline: var(--calcite-internal-combobox-space-large);
@apply cursor-pointer flex-nowrap;
}
@@ -105,8 +114,7 @@
truncate
p-0;
- gap: var(--calcite-combobox-item-spacing-unit-s);
- margin-inline-end: var(--calcite-combobox-item-spacing-unit-s);
+ gap: var(--calcite-internal-combobox-space-small);
&.selection-display-fit,
&.selection-display-single {
@@ -116,19 +124,19 @@
.input {
@apply appearance-none
- bg-transparent
border-none
flex-grow
font-inherit
- text-color-1
text-ellipsis
overflow-hidden
p-0;
+ background-color: var(--calcite-color-transparent);
+ color: var(--calcite-combobox-text-color, var(--calcite-color-text-1));
font-size: inherit;
- block-size: var(--calcite-combobox-input-height);
- line-height: var(--calcite-combobox-input-height);
+ block-size: var(--calcite-internal-combobox-height);
+ line-height: var(--calcite-internal-combobox-height);
inline-size: 100%;
- margin-block-end: var(--calcite-combobox-item-spacing-unit-s);
+ margin-block-end: var(--calcite-internal-combobox-space-small);
min-inline-size: 4.8125rem;
&:focus {
@apply outline-none;
@@ -141,7 +149,7 @@
.input--single {
@apply p-0;
- margin-block: var(--calcite-internal-combobox-input-margin-block);
+ margin-block: var(--calcite-internal-combobox-space-y);
}
.wrapper--active .input-single {
@@ -157,7 +165,7 @@
.input--icon {
padding-block: 0;
- padding-inline: var(--calcite-combobox-item-spacing-unit-l);
+ padding-inline: var(--calcite-internal-combobox-space-large);
}
.input-wrap {
@@ -168,19 +176,8 @@
@apply flex-1 overflow-hidden;
}
-.label {
- @apply pointer-events-none
- max-w-full
- flex-auto
- truncate
- p-0
- font-normal;
- block-size: var(--calcite-combobox-input-height);
- line-height: var(--calcite-combobox-input-height);
-}
-
.label--icon {
- padding-inline: var(--calcite-combobox-item-spacing-unit-l);
+ padding-inline: var(--calcite-internal-combobox-space-large);
}
.icon-end,
@@ -197,8 +194,7 @@
}
.floating-ui-container {
- --calcite-floating-ui-z-index: theme("zIndex.dropdown");
- @include floatingUIContainer();
+ @include floatingUIContainer("var(--calcite-z-index-dropdown)");
@include floatingUIWrapper();
}
@@ -220,9 +216,9 @@
}
.list-container {
- @apply bg-foreground-1
- max-h-menu
+ @apply max-h-menu
overflow-y-auto;
+ background-color: var(--calcite-combobox-background-color, var(--calcite-color-foreground-1));
inline-size: var(--calcite-dropdown-width);
}
@@ -239,12 +235,15 @@ calcite-chip {
}
.chip {
- margin-block: calc(var(--calcite-combobox-item-spacing-unit-s) / 4);
+ margin-block: calc(var(--calcite-internal-combobox-space-small) / 4);
max-inline-size: 100%;
}
.chip--active {
- @apply bg-foreground-3;
+ --calcite-chip-background-color: var(
+ --calcite-combobox-chip-background-color-active,
+ var(--calcite-color-foreground-3)
+ );
}
.chip--invisible {
@@ -260,5 +259,5 @@ calcite-chip {
@include base-component();
::slotted(calcite-combobox-item-group:not(:first-child)) {
- padding-block-start: var(--calcite-combobox-item-spacing-unit-l);
+ padding-block-start: var(--calcite-internal-combobox-space-large);
}
diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx
index a8768d9fa4d..082d38bfede 100644
--- a/packages/calcite-components/src/components/combobox/combobox.tsx
+++ b/packages/calcite-components/src/components/combobox/combobox.tsx
@@ -1401,7 +1401,7 @@ export class Combobox
return this.selectedItems.map((item, i) => {
const chipClasses = {
chip: true,
- "chip--active": activeChipIndex === i,
+ [CSS.chipActive]: activeChipIndex === i,
};
const ancestors = [...getItemAncestors(item)].reverse();
const pathLabel = [...ancestors, item].map((el) => el.textLabel);
@@ -1727,7 +1727,7 @@ export class Combobox
{
describe("renders", () => {
@@ -28,6 +29,93 @@ describe("calcite-date-picker", () => {
});
});
+ describe("theme", () => {
+ const tokens = {
+ "--calcite-date-picker-border-color": {
+ targetProp: "borderColor",
+ },
+ "--calcite-date-picker-corner-radius": [
+ {
+ targetProp: "borderRadius",
+ },
+ {
+ shadowSelector: "calcite-date-picker-month-header",
+ targetProp: "--calcite-date-picker-month-header-corner-radius",
+ },
+ ] as TestSelectToken[],
+ "--calcite-date-picker-day-background-color-hover": {
+ targetProp: "--calcite-date-picker-month-day-background-color-hover",
+ shadowSelector: "calcite-date-picker-month",
+ },
+ "--calcite-date-picker-day-background-color-selected": {
+ shadowSelector: "calcite-date-picker-month",
+ targetProp: "--calcite-date-picker-month-day-background-color-selected",
+ },
+ "--calcite-date-picker-day-background-color": {
+ targetProp: "--calcite-date-picker-month-day-background-color",
+ shadowSelector: "calcite-date-picker-month",
+ },
+
+ "--calcite-date-picker-day-corner-radius": {
+ shadowSelector: "calcite-date-picker-month",
+ targetProp: "--calcite-date-picker-month-day-corner-radius",
+ },
+ "--calcite-date-picker-day-range-background-color-hover": {
+ targetProp: "--calcite-date-picker-month-day-range-background-color-hovered",
+ shadowSelector: "calcite-date-picker-month",
+ },
+ "--calcite-date-picker-day-range-background-color-selected": {
+ targetProp: "--calcite-date-picker-month-day-range-background-color-selected",
+ shadowSelector: "calcite-date-picker-month",
+ },
+ "--calcite-date-picker-day-text-color-hover": {
+ targetProp: "--calcite-date-picker-month-day-text-color-hover",
+ shadowSelector: "calcite-date-picker-month",
+ },
+ "--calcite-date-picker-day-text-color": {
+ shadowSelector: "calcite-date-picker-month",
+ targetProp: "--calcite-date-picker-month-day-text-color",
+ },
+ "--calcite-date-picker-day-text-selected": {
+ shadowSelector: "calcite-date-picker-month",
+ targetProp: "--calcite-date-picker-month-day-text-selected",
+ },
+ "--calcite-date-picker-header-background-color": {
+ shadowSelector: "calcite-date-picker-month-header",
+ targetProp: "--calcite-date-picker-month-header-background-color",
+ },
+ "--calcite-date-picker-header-button-background-color-active": {
+ targetProp: "--calcite-date-picker-month-header-button-background-color-active",
+ shadowSelector: "calcite-date-picker-month-header",
+ },
+ "--calcite-date-picker-header-button-background-color-hover": {
+ targetProp: "--calcite-date-picker-month-header-button-background-color-hover",
+ shadowSelector: "calcite-date-picker-month-header",
+ },
+ "--calcite-date-picker-header-button-background-color": {
+ targetProp: "--calcite-date-picker-month-header-button-background-color",
+ shadowSelector: "calcite-date-picker-month-header",
+ },
+ "--calcite-date-picker-header-button-text-color-hover": {
+ targetProp: "--calcite-date-picker-month-header-button-text-color-hover",
+ shadowSelector: "calcite-date-picker-month-header",
+ },
+ "--calcite-date-picker-header-button-text-color": {
+ targetProp: "--calcite-date-picker-month-header-button-text-color",
+ shadowSelector: "calcite-date-picker-month-header",
+ },
+ "--calcite-date-picker-header-text-color": {
+ targetProp: "--calcite-date-picker-month-header-text-color",
+ shadowSelector: "calcite-date-picker-month-header",
+ },
+ "--calcite-date-picker-week-header-text-color": {
+ targetProp: "--calcite-date-picker-month-week-header-text-color",
+ shadowSelector: "calcite-date-picker-month",
+ },
+ } as const;
+ themed(html`
`, tokens);
+ });
+
const animationDurationInMs = 200;
it("fires a calciteDatePickerChange event when changing year in header", async () => {
diff --git a/packages/calcite-components/src/components/date-picker/date-picker.scss b/packages/calcite-components/src/components/date-picker/date-picker.scss
index c94b0112c41..dbea9524063 100644
--- a/packages/calcite-components/src/components/date-picker/date-picker.scss
+++ b/packages/calcite-components/src/components/date-picker/date-picker.scss
@@ -1,13 +1,40 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-date-picker-border-color: Specifies the border color of the component.
+ * @prop --calcite-date-picker-corner-radius: Specifies the border radius of the component.
+ * @prop --calcite-date-picker-day-background-color-hover: Specifies the background color of the day when hovered.
+ * @prop --calcite-date-picker-day-background-color-selected: Specifies the background color of the day when selected.
+ * @prop --calcite-date-picker-day-background-color: Specifies the background color of the day.
+ * @prop --calcite-date-picker-day-corner-radius: Specifies the corner radius of day.
+ * @prop --calcite-date-picker-day-range-background-color-hover: Specifies the background color of day range when hovered.
+ * @prop --calcite-date-picker-day-range-background-color-selected: Specifies the background color of day range when selected.
+ * @prop --calcite-date-picker-day-text-color-hover: Specifies the text color of day when hovered.
+ * @prop --calcite-date-picker-day-text-color: Specifies the text color of day.
+ * @prop --calcite-date-picker-day-text-selected: Specifies the text color of day when selected.
+ * @prop --calcite-date-picker-week-header-text-color: Specifies the text color of week headers.
+ * @prop --calcite-date-picker-header-background-color: Specifies the background color of month header.
+ * @prop --calcite-date-picker-header-button-background-color-active: Specifies the background color of navigation button of month header when active.
+ * @prop --calcite-date-picker-header-button-background-color-hover: Specifies the background color of navigation button of month header when hovered.
+ * @prop --calcite-date-picker-header-button-background-color: Specifies the background color of navigation button of month header.
+ * @prop --calcite-date-picker-header-button-text-color-hover: Specifies the text color of navigation button of month header when hovered.
+ * @prop --calcite-date-picker-header-button-text-color: Specifies the text color of navigation button of month header.
+ * @prop --calcite-date-picker-header-text-color: Specifies the text color of month header.
+ *
+ */
+
:host {
@extend %component-host;
@apply align-top
- border
- border-color-1
border-solid
inline-block
overflow-visible
- rounded-none
w-auto;
+ border-radius: var(--calcite-date-picker-corner-radius, var(--calcite-corner-radius));
+ border-color: var(--calcite-date-picker-border-color, var(--calcite-color-border-1));
+ border-width: var(--calcite-border-width-sm);
}
:host([scale="s"]) {
@@ -28,4 +55,36 @@
max-inline-size: 600px;
}
+calcite-date-picker-month {
+ --calcite-date-picker-month-week-header-text-color: var(--calcite-date-picker-week-header-text-color);
+ --calcite-date-picker-month-day-text-color: var(--calcite-date-picker-day-text-color);
+ --calcite-date-picker-month-day-text-color-hover: var(--calcite-date-picker-day-text-color-hover);
+ --calcite-date-picker-month-day-text-selected: var(--calcite-date-picker-day-text-selected);
+ --calcite-date-picker-month-day-background-color: var(--calcite-date-picker-day-background-color);
+ --calcite-date-picker-month-day-background-color-hover: var(--calcite-date-picker-day-background-color-hover);
+ --calcite-date-picker-month-day-background-color-selected: var(--calcite-date-picker-day-background-color-selected);
+ --calcite-date-picker-month-day-corner-radius: var(--calcite-date-picker-day-corner-radius);
+ --calcite-date-picker-month-day-range-background-color-selected: var(
+ --calcite-date-picker-day-range-background-color-selected
+ );
+ --calcite-date-picker-month-day-range-background-color-hovered: var(
+ --calcite-date-picker-day-range-background-color-hover
+ );
+}
+
+calcite-date-picker-month-header {
+ --calcite-date-picker-month-header-background-color: var(--calcite-date-picker-header-background-color);
+ --calcite-date-picker-month-header-button-background-color-active: var(
+ --calcite-date-picker-header-button-background-color-active
+ );
+ --calcite-date-picker-month-header-button-background-color-hover: var(
+ --calcite-date-picker-header-button-background-color-hover
+ );
+ --calcite-date-picker-month-header-button-background-color: var(--calcite-date-picker-header-button-background-color);
+ --calcite-date-picker-month-header-button-text-color-hover: var(--calcite-date-picker-header-button-text-color-hover);
+ --calcite-date-picker-month-header-button-text-color: var(--calcite-date-picker-header-button-text-color);
+ --calcite-date-picker-month-header-text-color: var(--calcite-date-picker-header-text-color);
+ --calcite-date-picker-month-header-corner-radius: var(--calcite-date-picker-corner-radius);
+}
+
@include base-component();
diff --git a/packages/calcite-components/src/components/date-picker/date-picker.stories.ts b/packages/calcite-components/src/components/date-picker/date-picker.stories.ts
index 0f034e41de1..78a88716258 100644
--- a/packages/calcite-components/src/components/date-picker/date-picker.stories.ts
+++ b/packages/calcite-components/src/components/date-picker/date-picker.stories.ts
@@ -186,3 +186,21 @@ export const greaterThanMaxWidthAllScales_TestOnly = (): string => html`
`;
+
+export const theming_TestOnly = (): string =>
+ html`
+
`;
diff --git a/packages/calcite-components/src/components/dropdown-group/dropdown-group.e2e.ts b/packages/calcite-components/src/components/dropdown-group/dropdown-group.e2e.ts
index 3d2c6d9086b..45ed327507d 100644
--- a/packages/calcite-components/src/components/dropdown-group/dropdown-group.e2e.ts
+++ b/packages/calcite-components/src/components/dropdown-group/dropdown-group.e2e.ts
@@ -1,6 +1,7 @@
import { newE2EPage } from "@stencil/core/testing";
-import { defaults, hidden, reflects, renders } from "../../tests/commonTests";
+import { defaults, hidden, reflects, renders, themed } from "../../tests/commonTests";
import { html } from "../../../support/formatting";
+import { CSS } from "./resources";
describe("calcite-dropdown-group", () => {
describe("defaults", () => {
@@ -64,4 +65,41 @@ describe("calcite-dropdown-group", () => {
expect(items.length).toBe(3);
items.forEach(async (item) => expect(await item.getProperty("selectionMode")).toBe("none"));
});
+
+ describe("theme", () => {
+ describe("default", () => {
+ themed(html`
`, {
+ "--calcite-dropdown-group-border-color": [
+ {
+ shadowSelector: `.${CSS.title}`,
+ targetProp: "borderColor",
+ },
+ ],
+ "--calcite-dropdown-group-text-color": {
+ shadowSelector: `.${CSS.title}`,
+ targetProp: "color",
+ },
+ });
+ });
+
+ describe("separator", () => {
+ themed(
+ html`
+
+
+
+
+ `,
+ {
+ "--calcite-dropdown-group-border-color": [
+ {
+ selector: "calcite-dropdown-group[group-title^='second']",
+ shadowSelector: `.${CSS.separator}`,
+ targetProp: "backgroundColor",
+ },
+ ],
+ },
+ );
+ });
+ });
});
diff --git a/packages/calcite-components/src/components/dropdown-group/dropdown-group.scss b/packages/calcite-components/src/components/dropdown-group/dropdown-group.scss
index 653ec780df9..55ff9340c15 100644
--- a/packages/calcite-components/src/components/dropdown-group/dropdown-group.scss
+++ b/packages/calcite-components/src/components/dropdown-group/dropdown-group.scss
@@ -1,3 +1,13 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-dropdown-group-border-color: specifies the border color of the component.
+ * @prop --calcite-dropdown-group-text-color: specifies the text color of the component.
+ *
+ */
+
:host {
// we make the host relative, so items can consistently compute their offsetTop based on the group
@apply block relative;
@@ -8,21 +18,22 @@
}
.dropdown-title {
- @apply border-color-3
- text-color-2
- -mb-px
+ @apply -mb-px
block
cursor-default
break-words
- border-0
- border-b
border-solid
font-bold;
+ border-width: var(--calcite-border-width-none);
+ border-block-end-width: var(--calcite-border-width-sm);
+ border-color: var(--calcite-dropdown-group-border-color, var(--calcite-color-border-3));
+ color: var(--calcite-dropdown-group-text-color, var(--calcite-color-text-2));
}
.dropdown-separator {
- @apply block h-px;
- background-color: theme("borderColor.color.3");
+ @apply block;
+ block-size: var(--calcite-size-px);
+ background-color: var(--calcite-dropdown-group-border-color, var(--calcite-color-border-3));
}
:host([scale="s"]) {
diff --git a/packages/calcite-components/src/components/dropdown-group/dropdown-group.tsx b/packages/calcite-components/src/components/dropdown-group/dropdown-group.tsx
index 57fa3a977b8..b794b9e27d5 100644
--- a/packages/calcite-components/src/components/dropdown-group/dropdown-group.tsx
+++ b/packages/calcite-components/src/components/dropdown-group/dropdown-group.tsx
@@ -12,7 +12,7 @@ import {
} from "@stencil/core";
import { Scale, SelectionMode } from "../interfaces";
import { createObserver } from "../../utils/observers";
-import { CSS } from "../dropdown-item/resources";
+import { CSS } from "./resources";
import { RequestedItem } from "./interfaces";
/**
@@ -91,13 +91,13 @@ export class DropdownGroup {
render(): VNode {
const groupTitle = this.groupTitle ? (
-
+
{this.groupTitle}
) : null;
const dropdownSeparator =
- this.groupPosition > 0 ? : null;
+ this.groupPosition > 0 ? : null;
return (
diff --git a/packages/calcite-components/src/components/dropdown-group/resources.ts b/packages/calcite-components/src/components/dropdown-group/resources.ts
new file mode 100644
index 00000000000..b7fb72d477b
--- /dev/null
+++ b/packages/calcite-components/src/components/dropdown-group/resources.ts
@@ -0,0 +1,5 @@
+export const CSS = {
+ container: "container",
+ separator: "dropdown-separator",
+ title: "dropdown-title",
+};
diff --git a/packages/calcite-components/src/components/dropdown-item/dropdown-item.e2e.ts b/packages/calcite-components/src/components/dropdown-item/dropdown-item.e2e.ts
index 3c043d9b2b8..fb2f6c2553c 100644
--- a/packages/calcite-components/src/components/dropdown-item/dropdown-item.e2e.ts
+++ b/packages/calcite-components/src/components/dropdown-item/dropdown-item.e2e.ts
@@ -1,5 +1,8 @@
import { newE2EPage } from "@stencil/core/testing";
import { focusable, renders, hidden, disabled } from "../../tests/commonTests";
+import { themed } from "../../tests/commonTests";
+import { html } from "../../../support/formatting";
+import { CSS } from "./resources";
describe("calcite-dropdown-item", () => {
describe("renders", () => {
@@ -49,4 +52,52 @@ describe("calcite-dropdown-item", () => {
expect(itemChangeSpy).toHaveReceivedEventTimes(3);
});
+
+ describe("theme", () => {
+ describe("default", () => {
+ themed("calcite-dropdown-item", {
+ "--calcite-dropdown-item-background-color": {
+ shadowSelector: `.${CSS.container}`,
+ targetProp: "backgroundColor",
+ },
+ "--calcite-dropdown-item-text-color": {
+ shadowSelector: `.${CSS.container}`,
+ targetProp: "color",
+ },
+ });
+ });
+
+ describe("selected", () => {
+ themed(html``, {
+ "--calcite-dropdown-item-indicator-color": {
+ shadowSelector: `.${CSS.icon}`,
+ targetProp: "--calcite-icon-color",
+ },
+ });
+ });
+
+ describe("with link", () => {
+ themed(html``, {
+ "--calcite-dropdown-item-background-color": {
+ shadowSelector: `.${CSS.link}`,
+ targetProp: "backgroundColor",
+ },
+ });
+ });
+
+ describe("with start/end icon", () => {
+ themed(html``, {
+ "--calcite-dropdown-item-icon-color": [
+ {
+ shadowSelector: `.${CSS.iconStart}`,
+ targetProp: "--calcite-icon-color",
+ },
+ {
+ shadowSelector: `.${CSS.iconEnd}`,
+ targetProp: "--calcite-icon-color",
+ },
+ ],
+ });
+ });
+ });
});
diff --git a/packages/calcite-components/src/components/dropdown-item/dropdown-item.scss b/packages/calcite-components/src/components/dropdown-item/dropdown-item.scss
index 6583657dfbd..ebf28ae90ff 100644
--- a/packages/calcite-components/src/components/dropdown-item/dropdown-item.scss
+++ b/packages/calcite-components/src/components/dropdown-item/dropdown-item.scss
@@ -1,6 +1,17 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-dropdown-item-background-color: Specifies the background color of the component.
+ * @prop --calcite-dropdown-item-icon-color: Specifies the color of an icon in the component.
+ * @prop --calcite-dropdown-item-indicator-color: Specifies the color of the indicator dot on the component.
+ * @prop --calcite-dropdown-item-text-color: Specifies the text color of the component.
+ *
+ */
+
@mixin itemStyling {
- @apply text-color-3
- relative
+ @apply relative
flex
flex-grow
cursor-pointer
@@ -8,6 +19,8 @@
no-underline
duration-150
ease-in-out;
+ color: var(--calcite-dropdown-item-text-color, (--calcite-color-text-3));
+ background-color: var(--calcite-dropdown-item-background-color, transparent);
}
:host {
@@ -91,40 +104,46 @@
@apply focus-inset outline-none;
.container {
- @apply text-color-1 no-underline;
+ @apply no-underline;
+ color: var(--calcite-dropdown-item-text-color, var(--calcite-color-text-1));
}
}
:host(:hover:not([disabled])),
:host(:active:not([disabled])) {
.container {
- @apply bg-foreground-2 text-color-1 no-underline;
+ @apply no-underline;
+ background-color: var(--calcite-dropdown-item-background-color, var(--calcite-color-foreground-2));
+ color: var(--calcite-dropdown-item-text-color, var(--calcite-color-text-1));
}
.dropdown-link {
- @apply text-color-1;
+ color: var(--calcite-dropdown-item-text-color, var(--calcite-color-text-1));
}
}
:host(:active:not([disabled])) .container {
- @apply bg-foreground-3;
+ background-color: var(--calcite-dropdown-item-background-color, var(--calcite-color-foreground-3));
}
:host([selected]) .container:not(.container--none-selection),
:host([selected]) .dropdown-link {
- @apply text-color-1 font-medium;
- & calcite-icon {
- color: theme("backgroundColor.brand");
- }
+ @apply font-medium;
+ color: var(--calcite-dropdown-item-text-color, var(--calcite-color-text-1));
+}
+
+.dropdown-item-icon--start,
+.dropdown-item-icon--end {
+ --calcite-icon-color: var(--calcite-dropdown-item-icon-color, theme("backgroundColor.brand"));
}
:host(:hover:not([disabled])) .dropdown-item-icon {
- color: theme("borderColor.color.1");
+ --calcite-icon-color: var(--calcite-dropdown-item-indicator-color, theme("borderColor.color.1"));
@apply opacity-100;
}
:host([selected]) .dropdown-item-icon {
- color: theme("backgroundColor.brand");
+ --calcite-icon-color: var(--calcite-dropdown-item-indicator-color, theme("backgroundColor.brand"));
@apply opacity-100;
}
diff --git a/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts b/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts
index 1d7029959a0..960fa6c2c64 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts
+++ b/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts
@@ -11,6 +11,7 @@ import {
openClose,
reflects,
renders,
+ themed,
} from "../../tests/commonTests";
import {
createSelectedItemsAsserter,
@@ -18,6 +19,7 @@ import {
isElementFocused,
skipAnimations,
} from "../../tests/utils";
+import { CSS } from "./resources";
describe("calcite-dropdown", () => {
const simpleDropdownHTML = html`
@@ -1309,4 +1311,24 @@ describe("calcite-dropdown", () => {
expect(await isElementFocused(page, "#item-3")).toBe(true);
});
});
+
+ describe("theme", () => {
+ describe("default", () => {
+ themed("calcite-dropdown", {
+ "--calcite-dropdown-background-color": {
+ shadowSelector: `.${CSS.content}`,
+ targetProp: "backgroundColor",
+ },
+ });
+ });
+
+ describe("deprecated", () => {
+ themed("calcite-dropdown", {
+ "--calcite-dropdown-width": {
+ shadowSelector: `.${CSS.content}`,
+ targetProp: "inlineSize",
+ },
+ });
+ });
+ });
});
diff --git a/packages/calcite-components/src/components/dropdown/dropdown.scss b/packages/calcite-components/src/components/dropdown/dropdown.scss
index b65f19f3ea9..67f03cd765e 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.scss
+++ b/packages/calcite-components/src/components/dropdown/dropdown.scss
@@ -3,7 +3,8 @@
*
* These properties can be overridden using the component's tag as selector.
*
- * @prop --calcite-dropdown-width: Specifies the width of the component's wrapper.
+ * @prop --calcite-dropdown-background-color: Specifies the background color of the component.
+ * @prop --calcite-dropdown-width: [Deprecated] Specifies the width of the component's wrapper.
*/
:host {
@@ -12,28 +13,36 @@
@include disabled();
-:host .calcite-dropdown-wrapper {
- --calcite-floating-ui-z-index: theme("zIndex.dropdown");
- @include floatingUIContainer();
+.calcite-dropdown-wrapper {
+ @include floatingUIContainer("var(--calcite-z-index-dropdown)");
@include floatingUIWrapper();
}
-@include floatingUIElemAnim(".calcite-dropdown-wrapper");
+@include floatingUIElemAnim(
+ ".calcite-dropdown-wrapper",
+ null,
+ null,
+ null,
+ null,
+ "#{var(--calcite-dropdown-background-color, var(--calcite-color-foreground-1))}"
+);
+
:host([open]) .calcite-dropdown-wrapper {
@include floatingUIWrapperActive();
}
-:host .calcite-dropdown-content {
- @apply bg-foreground-1
- w-auto
+.calcite-dropdown-content {
+ @apply w-auto
overflow-y-auto
overflow-x-hidden
max-h-menu;
- inline-size: var(--calcite-dropdown-width);
+ inline-size: var(--calcite-dropdown-width, var(--calcite-internal-dropdown-width));
}
+
.calcite-trigger-container {
- @apply relative flex flex-auto h-full;
+ @apply relative flex flex-auto;
@include word-break;
+ block-size: var(--calcite-container-size-content-fluid);
}
@media (forced-colors: active) {
@@ -45,13 +54,13 @@
// width
:host([width-scale="s"]) {
- --calcite-dropdown-width: theme("spacing.48");
+ --calcite-internal-dropdown-width: theme("spacing.48");
}
:host([width-scale="m"]) {
- --calcite-dropdown-width: theme("spacing.56");
+ --calcite-internal-dropdown-width: theme("spacing.56");
}
:host([width-scale="l"]) {
- --calcite-dropdown-width: theme("spacing.64");
+ --calcite-internal-dropdown-width: theme("spacing.64");
}
@include base-component();
diff --git a/packages/calcite-components/src/components/dropdown/dropdown.tsx b/packages/calcite-components/src/components/dropdown/dropdown.tsx
index 3a55d64ff5f..d8ee44ebb0c 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.tsx
+++ b/packages/calcite-components/src/components/dropdown/dropdown.tsx
@@ -44,7 +44,7 @@ import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/open
import { RequestedItem } from "../dropdown-group/interfaces";
import { Scale } from "../interfaces";
import { ItemKeyboardEvent } from "./interfaces";
-import { SLOTS } from "./resources";
+import { CSS, SLOTS } from "./resources";
/**
* @slot - A slot for adding `calcite-dropdown-group` elements. Every `calcite-dropdown-item` must have a parent `calcite-dropdown-group`, even if the `groupTitle` property is not set.
@@ -235,7 +235,7 @@ export class Dropdown
+
{
@@ -146,4 +146,39 @@ describe("calcite-fab", () => {
});
});
});
+
+ describe("theme", () => {
+ describe("default", () => {
+ themed("calcite-fab", {
+ "--calcite-fab-background-color": {
+ shadowSelector: `.${CSS.button}`,
+ targetProp: "--calcite-button-background-color",
+ },
+ "--calcite-fab-border-color": {
+ shadowSelector: `.${CSS.button}`,
+ targetProp: "--calcite-button-border-color",
+ },
+ "--calcite-fab-corner-radius": {
+ shadowSelector: `.${CSS.button}`,
+ targetProp: "--calcite-button-corner-radius",
+ },
+ "--calcite-fab-loader-color": {
+ shadowSelector: `.${CSS.button}`,
+ targetProp: "--calcite-button-loader-color",
+ },
+ "--calcite-fab-shadow": {
+ shadowSelector: `.${CSS.button}`,
+ targetProp: "--calcite-button-shadow",
+ },
+ "--calcite-fab-text-color": {
+ shadowSelector: `.${CSS.button}`,
+ targetProp: "--calcite-button-text-color",
+ },
+ "--calcite-fab-icon-color": {
+ shadowSelector: `.${CSS.button}`,
+ targetProp: "--calcite-button-icon-color",
+ },
+ });
+ });
+ });
});
diff --git a/packages/calcite-components/src/components/fab/fab.scss b/packages/calcite-components/src/components/fab/fab.scss
index ecdf9684fa9..4a2cc1b0863 100755
--- a/packages/calcite-components/src/components/fab/fab.scss
+++ b/packages/calcite-components/src/components/fab/fab.scss
@@ -1,17 +1,59 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-fab-background-color: defines the component's background color.
+ * @prop --calcite-fab-border-color: defines the component's border color.
+ * @prop --calcite-fab-corner-radius: defines the component's corner radius.
+ * @prop --calcite-fab-loader-color: defines the component's loader color.
+ * @prop --calcite-fab-shadow: defines the component's shadow.
+ * @prop --calcite-fab-text-color: defines the component's text color.
+ * @prop --calcite-fab-icon-color: defines the color of an icon in the component.
+ */
+
:host {
@apply flex bg-transparent;
}
+:host(:hover) {
+ calcite-button {
+ --calcite-button-shadow: var(
+ --calcite-fab-shadow,
+ var(--tw-ring-offset-shadow, 0 0 #0000),
+ var(--tw-ring-shadow, 0 0 #0000),
+ var(--calcite-shadow-md)
+ );
+ }
+}
+:host(:active) {
+ calcite-button {
+ --calcite-button-shadow: var(
+ --calcite-fab-shadow-active,
+ var(--tw-ring-offset-shadow, 0 0 #0000),
+ var(--tw-ring-shadow, 0 0 #0000),
+ 0 2px 12px -4px rgba(0, 0, 0, 0.2),
+ 0 2px 4px -2px rgba(0, 0, 0, 0.16)
+ );
+ }
+}
+
@include disabled();
calcite-button {
- @apply shadow-2;
- &:hover {
- @apply shadow-2-lg;
- }
- &:active {
- @apply shadow-2-sm;
- }
+ --calcite-button-background-color: var(--calcite-fab-background-color);
+ --calcite-button-border-color: var(--calcite-fab-border-color);
+ --calcite-button-corner-radius: var(--calcite-fab-corner-radius);
+ --calcite-button-loader-color: var(--calcite-fab-loader-color);
+ --calcite-button-text-color: var(--calcite-fab-text-color);
+ --calcite-button-icon-color: var(--calcite-fab-icon-color);
+ --calcite-button-shadow: var(
+ --calcite-fab-shadow,
+ var(--tw-ring-offset-shadow, 0 0 #0000),
+ var(--tw-ring-shadow, 0 0 #0000),
+ 0 6px 20px -4px rgba(0, 0, 0, 0.1),
+ 0 4px 12px -2px rgba(0, 0, 0, 0.08)
+ );
}
@include base-component();
diff --git a/packages/calcite-components/src/components/filter/filter.e2e.ts b/packages/calcite-components/src/components/filter/filter.e2e.ts
index 45d9961c93e..806652ee01b 100644
--- a/packages/calcite-components/src/components/filter/filter.e2e.ts
+++ b/packages/calcite-components/src/components/filter/filter.e2e.ts
@@ -1,5 +1,15 @@
import { E2EPage, newE2EPage } from "@stencil/core/testing";
-import { accessible, defaults, disabled, focusable, hidden, reflects, renders, t9n } from "../../tests/commonTests";
+import {
+ accessible,
+ defaults,
+ disabled,
+ focusable,
+ hidden,
+ reflects,
+ renders,
+ t9n,
+ themed,
+} from "../../tests/commonTests";
import { CSS as INPUT_CSS } from "../input/resources";
import { DEBOUNCE_TIMEOUT } from "./resources";
@@ -336,4 +346,61 @@ describe("calcite-filter", () => {
describe("translation support", () => {
t9n("calcite-filter");
});
+
+ describe("theme", () => {
+ const tokens = {
+ "--calcite-filter-background-color": {
+ targetProp: "backgroundColor",
+ },
+ "--calcite-filter-input-background-color": {
+ shadowSelector: "calcite-input",
+ targetProp: "--calcite-input-background-color",
+ },
+ "--calcite-filter-input-border-color": {
+ shadowSelector: "calcite-input",
+ targetProp: "--calcite-input-border-color",
+ },
+ "--calcite-filter-input-button-background-color": {
+ shadowSelector: "calcite-input",
+ targetProp: "--calcite-input-button-background-color",
+ },
+ "--calcite-filter-input-button-background-color-hover": {
+ shadowSelector: "calcite-input",
+ targetProp: "--calcite-input-button-background-color-hover",
+ },
+ "--calcite-filter-input-button-border-color": {
+ shadowSelector: "calcite-input",
+ targetProp: "--calcite-input-button-border-color",
+ },
+ "--calcite-filter-input-button-icon-color": {
+ shadowSelector: "calcite-input",
+ targetProp: "--calcite-input-button-icon-color",
+ },
+ "--calcite-filter-input-button-icon-color-active": {
+ shadowSelector: "calcite-input",
+ targetProp: "--calcite-input-button-icon-color-active",
+ },
+ "--calcite-filter-input-button-icon-color-hover": {
+ shadowSelector: "calcite-input",
+ targetProp: "--calcite-input-button-icon-color-hover",
+ },
+ "--calcite-filter-input-corner-radius": {
+ shadowSelector: "calcite-input",
+ targetProp: "--calcite-input-corner-radius",
+ },
+ "--calcite-filter-input-icon-color": {
+ shadowSelector: "calcite-input",
+ targetProp: "--calcite-input-icon-color",
+ },
+ "--calcite-filter-input-placeholder-text-color": {
+ shadowSelector: "calcite-input",
+ targetProp: "--calcite-input-placeholder-text-color",
+ },
+ "--calcite-filter-input-text-color": {
+ shadowSelector: "calcite-input",
+ targetProp: "--calcite-input-text-color",
+ },
+ } as const;
+ themed(`calcite-filter`, tokens);
+ });
});
diff --git a/packages/calcite-components/src/components/filter/filter.scss b/packages/calcite-components/src/components/filter/filter.scss
index bad4129e18a..130d353ade6 100644
--- a/packages/calcite-components/src/components/filter/filter.scss
+++ b/packages/calcite-components/src/components/filter/filter.scss
@@ -1,77 +1,56 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-filter-background-color: Specifies the background color of the filter.
+ * @prop --calcite-filter-input-background-color: defines the background color of the input sub-component.
+ * @prop --calcite-filter-input-border-color: defines the border color of the input sub-component.
+ * @prop --calcite-filter-input-button-background-color: defines the background color of the button in the input sub-component.
+ * @prop --calcite-filter-input-button-background-color-hover: defines the background color of the button when hovered in the input sub-component.
+ * @prop --calcite-filter-input-button-border-color: defines the border color of the button in the input sub-component.
+ * @prop --calcite-filter-input-button-icon-color: defines the icon color of the button in the input sub-component.
+ * @prop --calcite-filter-input-button-icon-color-active: defines the icon color of the button when active in the input sub-component.
+ * @prop --calcite-filter-input-button-icon-color-hover: defines the icon color of the button when hovered in the input sub-component.
+ * @prop --calcite-filter-input-corner-radius: defines the corner radius of the input sub-component.
+ * @prop --calcite-filter-input-icon-color: defines the icon color of the input sub-component.
+ * @prop --calcite-filter-input-placeholder-text-color: defines the placeholder text color of the input sub-component.
+ * @prop --calcite-filter-input-text-color: defines the text color of the input sub-component.
+*/
+
:host {
- @extend %component-host;
- @apply flex w-full;
+ @include base-host();
+ display: flex;
+ background-color: var(--calcite-filter-background-color, var(--calcite-color-foreground-1));
+ inline-size: var(--calcite-container-size-content-fluid);
}
@include disabled();
.container {
- @apply flex w-full p-2;
-}
-
-label {
- @apply relative
- mx-1
- my-0
- flex w-full
- items-center
- overflow-hidden;
-}
-
-input[type="text"] {
- @apply font-inherit
- text-color-1
- text-n2h
- mb-1
- w-full
- border-none
- bg-transparent
- py-1;
- padding-inline-end: theme("spacing.1");
- padding-inline-start: theme("spacing.6");
- transition:
- padding var(--calcite-animation-timing),
- box-shadow var(--calcite-animation-timing);
- &::-ms-clear {
- @apply hidden;
- }
-}
-
-calcite-input {
- @apply w-full;
-}
-
-.search-icon {
- @apply text-color-2
- absolute
- flex;
- inset-inline-start: 0;
- transition:
- inset-inline-start var(--calcite-animation-timing),
- inset-inline-end var(--calcite-animation-timing),
- opacity var(--calcite-animation-timing);
-}
-
-input[type="text"]:focus {
- @apply border-color-brand outline-none;
- padding-inline: theme("padding.1");
- & ~ .search-icon {
- inset-inline-start: calc(theme("spacing.4") * -1);
- @apply opacity-0;
- }
-}
-
-.clear-button {
- @apply text-color-2
- flex
- cursor-pointer
- items-center
- border-0
- bg-transparent;
- &:hover,
- &:focus {
- @apply text-color-1;
- }
+ padding: var(--calcite-spacing-sm);
+ margin-inline: var(--calcite-spacing-xxs);
+ display: flex;
+ inline-size: var(--calcite-container-size-content-fluid);
+ position: relative;
+ overflow: hidden;
+ align-items: center;
+}
+
+.input {
+ inline-size: var(--calcite-container-size-content-fluid);
+ --calcite-input-corner-radius: var(--calcite-filter-input-corner-radius);
+ --calcite-input-text-color: var(--calcite-filter-input-text-color);
+ --calcite-input-border-color: var(--calcite-filter-input-border-color);
+ --calcite-input-background-color: var(--calcite-filter-input-background-color);
+ --calcite-input-button-background-color: var(--calcite-filter-input-button-background-color);
+ --calcite-input-button-background-color-hover: var(--calcite-filter-input-button-background-color-hover);
+ --calcite-input-button-border-color: var(--calcite-filter-input-button-border-color);
+ --calcite-input-icon-color: var(--calcite-filter-input-icon-color);
+ --calcite-input-button-icon-color: var(--calcite-filter-input-button-icon-color);
+ --calcite-input-button-icon-color-active: var(--calcite-filter-input-button-icon-color-active);
+ --calcite-input-button-icon-color-hover: var(--calcite-filter-input-button-icon-color-hover);
+ --calcite-input-placeholder-text-color: var(--calcite-filter-input-placeholder-text-color);
}
@include base-component();
diff --git a/packages/calcite-components/src/components/filter/filter.stories.ts b/packages/calcite-components/src/components/filter/filter.stories.ts
new file mode 100644
index 00000000000..ed8c236833d
--- /dev/null
+++ b/packages/calcite-components/src/components/filter/filter.stories.ts
@@ -0,0 +1,44 @@
+import { modesDarkDefault } from "../../../.storybook/utils";
+import { html } from "../../../support/formatting";
+import readme from "./readme.md";
+
+export default {
+ title: "Components/Filter",
+ parameters: {
+ notes: readme,
+ },
+};
+
+export const simple_TestOnly = (): string => html`
`;
+
+export const placeholder_TestOnly = (): string => html`
`;
+
+export const placeholderRTL_TestOnly = (): string =>
+ html`
`;
+
+export const value_TestOnly = (): string => html`
`;
+
+export const disabled_TestOnly = (): string => html`
`;
+
+export const darkMode_TestOnly = (): string => html`
`;
+
+darkMode_TestOnly.parameters = { modes: modesDarkDefault };
+
+const themeStyles = `
+ --calcite-filter-background-color: red;
+ --calcite-filter-input-corner-radius: 20px;
+ --calcite-filter-input-text-color: blue;
+ --calcite-filter-input-border-color: cyan;
+ --calcite-filter-input-background-color: lightgray;
+ --calcite-filter-input-button-background-color: purple;
+ --calcite-filter-input-button-background-color-hover: pink;
+ --calcite-filter-input-button-border-color: yellow;
+ --calcite-filter-input-icon-color: green;
+ --calcite-filter-input-button-icon-color: orange;
+ --calcite-filter-input-button-icon-color-active: red;
+ --calcite-filter-input-button-icon-color-hover: yellow;
+ --calcite-filter-input-placeholder-text-color: orange;
+`;
+
+export const theming_TestOnly = (): string =>
+ html`
`;
diff --git a/packages/calcite-components/src/components/filter/filter.tsx b/packages/calcite-components/src/components/filter/filter.tsx
index 9635f41daad..912f342976d 100644
--- a/packages/calcite-components/src/components/filter/filter.tsx
+++ b/packages/calcite-components/src/components/filter/filter.tsx
@@ -287,6 +287,7 @@ export class Filter