diff --git a/packages/calcite-components/.stylelintrc.cjs b/packages/calcite-components/.stylelintrc.cjs
index 0998dad6911..f36f9230a75 100644
--- a/packages/calcite-components/.stylelintrc.cjs
+++ b/packages/calcite-components/.stylelintrc.cjs
@@ -1,7 +1,14 @@
// @ts-check
// ⚠️ AUTO-GENERATED CODE - DO NOT EDIT
-const customFunctions = [];
+const customFunctions = [
+ "get-trailing-text-input-padding",
+ "medium-modular-scale",
+ "modular-scale",
+ "scale-duration",
+ "scaleDuration",
+ "small-modular-scale"
+];
// ⚠️ END OF AUTO-GENERATED CODE
const scssPatternRules = [
diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index 9dee40c58d4..70288fce667 100644
--- a/packages/calcite-components/src/components.d.ts
+++ b/packages/calcite-components/src/components.d.ts
@@ -9,91 +9,191 @@ import { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Intera
import { RequestedItem } from "./components/accordion/interfaces";
import { IconNameOrString } from "./components/icon/interfaces";
import { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces";
+import { ActionMessages } from "./components/action/assets/action/t9n";
import { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui";
+import { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n";
import { Columns } from "./components/action-group/interfaces";
+import { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n";
+import { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n";
import { AlertDuration, AlertQueue } from "./components/alert/interfaces";
import { NumberingSystem } from "./utils/locale";
+import { AlertMessages } from "./components/alert/assets/alert/t9n";
import { HeadingLevel } from "./components/functional/Heading";
+import { BlockMessages } from "./components/block/assets/block/t9n";
import { BlockSectionToggleDisplay } from "./components/block-section/interfaces";
+import { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n";
import { ButtonAlignment, DropdownIconType } from "./components/button/interfaces";
+import { ButtonMessages } from "./components/button/assets/button/t9n";
+import { CardMessages } from "./components/card/assets/card/t9n";
import { ArrowType, AutoplayType } from "./components/carousel/interfaces";
+import { CarouselMessages } from "./components/carousel/assets/carousel/t9n";
import { MutableValidityState } from "./utils/form";
+import { ChipMessages } from "./components/chip/assets/chip/t9n";
import { ColorValue, InternalColor } from "./components/color-picker/interfaces";
import { Format } from "./components/color-picker/utils";
+import { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n";
import { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces";
+import { ComboboxMessages } from "./components/combobox/assets/combobox/t9n";
+import { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n";
import { HoverRange } from "./utils/date";
import { DateLocaleData } from "./components/date-picker/utils";
+import { DialogMessages } from "./components/dialog/assets/dialog/t9n";
import { DialogPlacement } from "./components/dialog/interfaces";
import { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces";
import { ItemKeyboardEvent } from "./components/dropdown/interfaces";
+import { FilterMessages } from "./components/filter/assets/filter/t9n";
import { FlowItemLikeElement } from "./components/flow/interfaces";
+import { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n";
import { ColorStop, DataSeries } from "./components/graph/interfaces";
+import { HandleMessages } from "./components/handle/assets/handle/t9n";
import { HandleChange, HandleNudge } from "./components/handle/interfaces";
+import { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n";
import { InputPlacement } from "./components/input/interfaces";
+import { InputMessages } from "./components/input/assets/input/t9n";
+import { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n";
+import { InputNumberMessages } from "./components/input-number/assets/input-number/t9n";
+import { InputTextMessages } from "./components/input-text/assets/input-text/t9n";
+import { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n";
+import { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n";
+import { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n";
import { OffsetStyle, TimeZoneMode } from "./components/input-time-zone/interfaces";
import { ListDragDetail } from "./components/list/interfaces";
import { ItemData } from "./components/list-item/interfaces";
+import { ListMessages } from "./components/list/assets/list/t9n";
import { SelectionAppearance } from "./components/list/resources";
+import { ListItemMessages } from "./components/list-item/assets/list-item/t9n";
+import { MenuMessages } from "./components/menu/assets/menu/t9n";
+import { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n";
import { MenuItemCustomEvent } from "./components/menu-item/interfaces";
import { MeterFillType, MeterLabelType } from "./components/meter/interfaces";
+import { ModalMessages } from "./components/modal/assets/modal/t9n";
+import { NoticeMessages } from "./components/notice/assets/notice/t9n";
+import { PaginationMessages } from "./components/pagination/assets/pagination/t9n";
+import { PanelMessages } from "./components/panel/assets/panel/t9n";
import { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic";
import { ICON_TYPES } from "./components/pick-list/resources";
+import { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n";
+import { PopoverMessages } from "./components/popover/assets/popover/t9n";
+import { RatingMessages } from "./components/rating/assets/rating/t9n";
+import { ScrimMessages } from "./components/scrim/assets/scrim/t9n";
import { DisplayMode } from "./components/sheet/interfaces";
import { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces";
+import { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n";
import { DragDetail } from "./utils/sortableComponent";
import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces";
+import { StepperMessages } from "./components/stepper/assets/stepper/t9n";
+import { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n";
import { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces";
+import { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n";
import { Element } from "@stencil/core";
import { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces";
+import { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n";
import { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces";
+import { TableMessages } from "./components/table/assets/table/t9n";
+import { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n";
+import { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n";
+import { TextAreaMessages } from "./components/text-area/assets/text-area/t9n";
import { TileSelectType } from "./components/tile-select/interfaces";
import { TileSelectGroupLayout } from "./components/tile-select-group/interfaces";
+import { TipMessages } from "./components/tip/assets/tip/t9n";
+import { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n";
import { TreeItemSelectDetail } from "./components/tree-item/interfaces";
+import { ValueListMessages } from "./components/value-list/assets/value-list/t9n";
import { ListItemAndHandle } from "./components/value-list-item/interfaces";
export { Alignment, Appearance, CollapseDirection, FlipContext, IconType, InteractionMode, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces";
export { RequestedItem } from "./components/accordion/interfaces";
export { IconNameOrString } from "./components/icon/interfaces";
export { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces";
+export { ActionMessages } from "./components/action/assets/action/t9n";
export { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui";
+export { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n";
export { Columns } from "./components/action-group/interfaces";
+export { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n";
+export { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n";
export { AlertDuration, AlertQueue } from "./components/alert/interfaces";
export { NumberingSystem } from "./utils/locale";
+export { AlertMessages } from "./components/alert/assets/alert/t9n";
export { HeadingLevel } from "./components/functional/Heading";
+export { BlockMessages } from "./components/block/assets/block/t9n";
export { BlockSectionToggleDisplay } from "./components/block-section/interfaces";
+export { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n";
export { ButtonAlignment, DropdownIconType } from "./components/button/interfaces";
+export { ButtonMessages } from "./components/button/assets/button/t9n";
+export { CardMessages } from "./components/card/assets/card/t9n";
export { ArrowType, AutoplayType } from "./components/carousel/interfaces";
+export { CarouselMessages } from "./components/carousel/assets/carousel/t9n";
export { MutableValidityState } from "./utils/form";
+export { ChipMessages } from "./components/chip/assets/chip/t9n";
export { ColorValue, InternalColor } from "./components/color-picker/interfaces";
export { Format } from "./components/color-picker/utils";
+export { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n";
export { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces";
+export { ComboboxMessages } from "./components/combobox/assets/combobox/t9n";
+export { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n";
export { HoverRange } from "./utils/date";
export { DateLocaleData } from "./components/date-picker/utils";
+export { DialogMessages } from "./components/dialog/assets/dialog/t9n";
export { DialogPlacement } from "./components/dialog/interfaces";
export { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces";
export { ItemKeyboardEvent } from "./components/dropdown/interfaces";
+export { FilterMessages } from "./components/filter/assets/filter/t9n";
export { FlowItemLikeElement } from "./components/flow/interfaces";
+export { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n";
export { ColorStop, DataSeries } from "./components/graph/interfaces";
+export { HandleMessages } from "./components/handle/assets/handle/t9n";
export { HandleChange, HandleNudge } from "./components/handle/interfaces";
+export { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n";
export { InputPlacement } from "./components/input/interfaces";
+export { InputMessages } from "./components/input/assets/input/t9n";
+export { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n";
+export { InputNumberMessages } from "./components/input-number/assets/input-number/t9n";
+export { InputTextMessages } from "./components/input-text/assets/input-text/t9n";
+export { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n";
+export { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n";
+export { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n";
export { OffsetStyle, TimeZoneMode } from "./components/input-time-zone/interfaces";
export { ListDragDetail } from "./components/list/interfaces";
export { ItemData } from "./components/list-item/interfaces";
+export { ListMessages } from "./components/list/assets/list/t9n";
export { SelectionAppearance } from "./components/list/resources";
+export { ListItemMessages } from "./components/list-item/assets/list-item/t9n";
+export { MenuMessages } from "./components/menu/assets/menu/t9n";
+export { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n";
export { MenuItemCustomEvent } from "./components/menu-item/interfaces";
export { MeterFillType, MeterLabelType } from "./components/meter/interfaces";
+export { ModalMessages } from "./components/modal/assets/modal/t9n";
+export { NoticeMessages } from "./components/notice/assets/notice/t9n";
+export { PaginationMessages } from "./components/pagination/assets/pagination/t9n";
+export { PanelMessages } from "./components/panel/assets/panel/t9n";
export { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic";
export { ICON_TYPES } from "./components/pick-list/resources";
+export { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n";
+export { PopoverMessages } from "./components/popover/assets/popover/t9n";
+export { RatingMessages } from "./components/rating/assets/rating/t9n";
+export { ScrimMessages } from "./components/scrim/assets/scrim/t9n";
export { DisplayMode } from "./components/sheet/interfaces";
export { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces";
+export { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n";
export { DragDetail } from "./utils/sortableComponent";
export { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces";
+export { StepperMessages } from "./components/stepper/assets/stepper/t9n";
+export { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n";
export { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces";
+export { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n";
export { Element } from "@stencil/core";
export { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces";
+export { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n";
export { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces";
+export { TableMessages } from "./components/table/assets/table/t9n";
+export { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n";
+export { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n";
+export { TextAreaMessages } from "./components/text-area/assets/text-area/t9n";
export { TileSelectType } from "./components/tile-select/interfaces";
export { TileSelectGroupLayout } from "./components/tile-select-group/interfaces";
+export { TipMessages } from "./components/tip/assets/tip/t9n";
+export { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n";
export { TreeItemSelectDetail } from "./components/tree-item/interfaces";
+export { ValueListMessages } from "./components/value-list/assets/value-list/t9n";
export { ListItemAndHandle } from "./components/value-list-item/interfaces";
export namespace Components {
interface CalciteAccordion {
diff --git a/packages/calcite-components/src/components/tile/tile.e2e.ts b/packages/calcite-components/src/components/tile/tile.e2e.ts
index 1f7580e132e..9e319b129a7 100644
--- a/packages/calcite-components/src/components/tile/tile.e2e.ts
+++ b/packages/calcite-components/src/components/tile/tile.e2e.ts
@@ -1,8 +1,18 @@
import { newE2EPage } from "@stencil/core/testing";
-import { accessible, defaults, disabled, focusable, hidden, reflects, renders, slots } from "../../tests/commonTests";
+import {
+ accessible,
+ defaults,
+ disabled,
+ focusable,
+ hidden,
+ reflects,
+ renders,
+ slots,
+ themed,
+} from "../../tests/commonTests";
import { html } from "../../../support/formatting";
import { isElementFocused } from "../../tests/utils";
-import { SLOTS } from "./resources";
+import { CSS, SLOTS } from "./resources";
describe("calcite-tile", () => {
describe("accessibility", () => {
@@ -211,4 +221,341 @@ describe("calcite-tile", () => {
expect(description).toBeNull();
});
});
+
+ describe("theme", () => {
+ describe("default", () => {
+ themed(
+ html`
+
+
+ `,
+ {
+ "--calcite-tile-background-color": {
+ shadowSelector: `.${CSS.container}`,
+ targetProp: "backgroundColor",
+ },
+ "--calcite-tile-border-color": {
+ shadowSelector: `.${CSS.container}`,
+ targetProp: "outlineColor",
+ },
+ "--calcite-tile-corner-radius": {
+ shadowSelector: `.${CSS.container}`,
+ targetProp: "borderRadius",
+ },
+ "--calcite-tile-text-color": {
+ shadowSelector: `.${CSS.container}`,
+ targetProp: "color",
+ },
+ "--calcite-tile-heading-text-color": {
+ shadowSelector: `.${CSS.heading}`,
+ targetProp: "color",
+ },
+ "--calcite-tile-shadow": {
+ selector: `calcite-tile`,
+ targetProp: "boxShadow",
+ },
+ },
+ );
+ });
+ describe("default changing text colors on hover", () => {
+ themed(
+ html`
+
+
+ `,
+ {
+ "--calcite-tile-text-color": {
+ shadowSelector: `.${CSS.container}`,
+ targetProp: "color",
+ state: "hover",
+ },
+ "--calcite-tile-heading-text-color": {
+ shadowSelector: `.${CSS.heading}`,
+ targetProp: "color",
+ state: "hover",
+ },
+ },
+ );
+ });
+ describe("--calcite-tile-text-color", () => {
+ describe("applies to the selection icon", () => {
+ themed(
+ html`
+
+
+ `,
+ {
+ "--calcite-tile-text-color": {
+ shadowSelector: `.${CSS.selectionIcon}`,
+ targetProp: "color",
+ },
+ },
+ );
+ });
+ describe("applies to the icon", () => {
+ themed(
+ html`
+
+
+ `,
+ {
+ "--calcite-tile-text-color": {
+ shadowSelector: `.${CSS.icon}`,
+ targetProp: "color",
+ },
+ },
+ );
+ });
+ });
+ describe("--calcite-tile-accent-color-press", () => {
+ describe("applies to border on hover", () => {
+ themed(
+ html`
+
+
+ `,
+ {
+ "--calcite-tile-accent-color-press": {
+ shadowSelector: `.${CSS.container}`,
+ targetProp: "outlineColor",
+ state: "hover",
+ },
+ },
+ );
+ });
+ describe("applies to selection icon on hover", () => {
+ themed(
+ html`
+
+
+ `,
+ {
+ "--calcite-tile-accent-color-press": {
+ shadowSelector: `.${CSS.selectionIcon}`,
+ targetProp: "outlineColor",
+ state: "hover",
+ },
+ },
+ );
+ });
+ describe("applies to selected item's border", () => {
+ themed(
+ html`
+
+
+ `,
+ {
+ "--calcite-tile-accent-color-press": {
+ shadowSelector: `.${CSS.container}`,
+ targetProp: "outlineColor",
+ },
+ },
+ );
+ });
+ describe("applies to selected item's selection icon", () => {
+ themed(
+ html`
+
+
+ `,
+ {
+ "--calcite-tile-accent-color-press": {
+ shadowSelector: `.${CSS.selectionIcon}`,
+ targetProp: "color",
+ },
+ },
+ );
+ });
+ describe(`applies to selected item's border using selection-appearance="border"`, () => {
+ themed(
+ html`
+
+
+ `,
+ {
+ "--calcite-tile-accent-color-press": {
+ shadowSelector: `.${CSS.container}`,
+ targetProp: "boxShadow",
+ },
+ },
+ );
+ });
+ describe(`selection-mode="none"`, () => {
+ describe("applies --calcite-tile-border-color when idle and selected attribute is present", () => {
+ themed(
+ html`
+
+
+ `,
+ {
+ "--calcite-tile-border-color": {
+ shadowSelector: `.${CSS.container}`,
+ targetProp: "outlineColor",
+ },
+ },
+ );
+ });
+ describe("applies --calcite-tile-border-color when hovered", () => {
+ themed(
+ html`
+
+
+ `,
+ {
+ "--calcite-tile-border-color": {
+ shadowSelector: `.${CSS.container}`,
+ targetProp: "outlineColor",
+ state: "hover",
+ },
+ },
+ );
+ });
+ });
+ });
+ describe("link", () => {
+ describe("--calcite-tile-link-color applies to heading text on hover with --calcite-color-text-link as a fallback", () => {
+ themed(
+ html`
+
+
+ `,
+ {
+ "--calcite-tile-link-color": {
+ shadowSelector: `.${CSS.heading}`,
+ targetProp: "color",
+ state: "hover",
+ },
+ "--calcite-color-text-link": {
+ shadowSelector: `.${CSS.heading}`,
+ targetProp: "color",
+ state: "hover",
+ },
+ },
+ );
+ });
+ describe("--calcite-tile-link-color applies to icon on hover with --calcite-color-text-link as a fallback", () => {
+ themed(
+ html`
+
+
+ `,
+ {
+ "--calcite-tile-link-color": {
+ shadowSelector: `.${CSS.heading}`,
+ targetProp: "color",
+ state: "hover",
+ },
+ "--calcite-color-text-link": {
+ shadowSelector: `.${CSS.icon}`,
+ targetProp: "color",
+ state: "hover",
+ },
+ },
+ );
+ });
+ describe("--calcite-tile-link-color applies to border on hover with --calcite-color-text-link as a fallback", () => {
+ themed(
+ html`
+
+
+ `,
+ {
+ "--calcite-tile-link-color": {
+ shadowSelector: `.${CSS.heading}`,
+ targetProp: "color",
+ state: "hover",
+ },
+ "--calcite-color-text-link": {
+ shadowSelector: `.${CSS.container}`,
+ targetProp: "outlineColor",
+ state: "hover",
+ },
+ },
+ );
+ });
+ });
+ });
});
diff --git a/packages/calcite-components/src/components/tile/tile.scss b/packages/calcite-components/src/components/tile/tile.scss
index c9b1f43fedc..2217e17787c 100644
--- a/packages/calcite-components/src/components/tile/tile.scss
+++ b/packages/calcite-components/src/components/tile/tile.scss
@@ -3,46 +3,53 @@
*
* These properties can be overridden using the component's tag as selector.
*
- * @prop --calcite-tile-background-color: Specifies the background color of the component.
- * @prop --calcite-tile-border-color: Specifies the border color of the component.
- * @prop --calcite-tile-description-text-color: Specifies the description text color of the component.
- * @prop --calcite-tile-heading-text-color: Specifies the heading text color of the component.
+ * @prop --calcite-tile-accent-color-press: When the parent `calcite-tile-group` has a `selectionMode` that is not `"none"`, specifies the color of the component's selection elements, such as the radio, checkbox, and border.
+ * @prop --calcite-tile-background-color: Specifies the component's background color.
+ * @prop --calcite-tile-border-color: Specifies the component's border color.
+ * @prop --calcite-tile-corner-radius: Specifies the component's corner radius.
+ * @prop --calcite-tile-heading-text-color: Specifies the component's `heading` text color.
+ * @prop --calcite-tile-link-color: When `href` is present, specifies the component's link color.
+ * @prop --calcite-tile-shadow: Specifies the shadow around the component.
+ * @prop --calcite-tile-text-color: Specifies the component's `description` and `icon` text color, but not the `heading` text color.
*/
:host {
- --calcite-tile-background-color: var(--calcite-color-foreground-1);
- --calcite-tile-border-color: var(--calcite-color-border-2);
- --calcite-tile-description-text-color: var(--calcite-color-text-3);
- --calcite-tile-heading-text-color: var(--calcite-color-text-2);
- --calcite-icon-color: var(--calcite-color-text-3);
-
+ box-shadow: var(--calcite-tile-shadow, var(--calcite-shadow-none));
box-sizing: border-box;
display: inline-block;
}
.container {
- background-color: var(--calcite-tile-background-color);
+ background-color: var(--calcite-tile-background-color, var(--calcite-color-foreground-1));
block-size: var(--calcite-container-size-content-fluid);
+ border-radius: var(--calcite-tile-corner-radius, var(--calcite-corner-radius));
box-sizing: border-box;
+ color: var(--calcite-tile-text-color, var(--calcite-color-text-3));
inline-size: var(--calcite-container-size-content-fluid);
- outline: var(--calcite-border-width-sm, 1px) solid var(--calcite-tile-border-color);
+ outline: var(--calcite-border-width-sm, 1px) solid var(--calcite-tile-border-color, var(--calcite-color-border-2));
user-select: none;
+
+ .selection-icon {
+ color: var(--calcite-tile-text-color, var(--calcite-color-text-3));
+ }
+
&.interactive {
cursor: pointer;
+
&:hover,
&:focus,
&.selected {
- outline-color: var(--calcite-color-brand);
+ outline-color: var(--calcite-tile-accent-color-press, var(--calcite-color-brand));
position: relative;
.selection-icon {
- --calcite-icon-color: var(--calcite-color-brand);
+ color: var(--calcite-tile-accent-color-press, var(--calcite-color-brand));
}
}
&.selected {
z-index: var(--calcite-z-index);
}
&:focus {
- box-shadow: inset 0 0 0 1px var(--calcite-color-brand);
+ box-shadow: inset 0 0 0 1px var(--calcite-tile-accent-color-press, var(--calcite-color-brand));
z-index: var(--calcite-z-index-sticky);
}
}
@@ -70,12 +77,17 @@
}
.heading {
- color: var(--calcite-tile-heading-text-color);
+ color: var(--calcite-tile-heading-text-color, var(--calcite-color-text-2));
font-weight: var(--calcite-font-weight-medium);
line-height: 1.20313rem;
overflow-wrap: break-word;
}
+.description {
+ font-weight: var(--calcite-font-weight-regular);
+ overflow-wrap: break-word;
+}
+
/* [Deprecated] Use the content-top slot for rendering icon with alignment="center" instead */
.large-visual-deprecated {
align-items: center;
@@ -93,26 +105,15 @@
}
}
-.description {
- color: var(--calcite-tile-description-text-color);
- font-weight: var(--calcite-font-weight-regular);
- overflow-wrap: break-word;
-}
-
:host([alignment="center"]) {
.icon {
align-self: center;
}
- .text-content-container {
- justify-content: center;
- }
.text-content {
text-align: center;
}
slot[name="content-start"]::slotted(*),
- slot[name="content-end"]::slotted(*),
- slot[name="content-top"]::slotted(*),
- slot[name="content-bottom"]::slotted(*) {
+ slot[name="content-end"]::slotted(*) {
align-self: center;
}
}
@@ -190,7 +191,7 @@
:host([selection-appearance="border"][layout="vertical"]) {
.container.selected:focus::before {
block-size: 100%;
- box-shadow: inset 0 0 0 1px var(--calcite-color-brand);
+ box-shadow: inset 0 0 0 1px var(--calcite-tile-accent-color-press, var(--calcite-color-brand));
content: "";
display: block;
inline-size: 100%;
@@ -202,58 +203,67 @@
:host([selection-appearance="border"][layout="horizontal"]) {
.container.selected {
- box-shadow: inset 0 -4px 0 0 var(--calcite-color-brand);
+ box-shadow: inset 0 -4px 0 0 var(--calcite-tile-accent-color-press, var(--calcite-color-brand));
}
}
:host([selection-appearance="border"][layout="vertical"]) {
.container.selected {
- box-shadow: inset 4px 0 0 0 var(--calcite-color-brand);
+ box-shadow: inset 4px 0 0 0 var(--calcite-tile-accent-color-press, var(--calcite-color-brand));
+ }
+}
+
+:host(:hover:not([disabled])),
+:host([active]:not([disabled])) {
+ .heading {
+ color: var(--calcite-tile-heading-text-color, var(--calcite-color-text-1));
+ }
+ .description {
+ color: var(--calcite-tile-text-color, var(--calcite-color-text-2));
}
}
:host([href]:focus:not([disabled])),
:host([href]:hover:not([disabled])) {
- --calcite-tile-border-color: var(--calcite-color-text-link);
- --calcite-tile-heading-text-color: var(--calcite-color-text-link);
- --calcite-icon-color: var(--calcite-color-text-link);
.container {
+ outline-color: var(--calcite-tile-link-color, var(--calcite-color-text-link));
position: relative;
z-index: var(--calcite-z-index);
}
+ .icon {
+ color: var(--calcite-tile-link-color, var(--calcite-color-text-link));
+ }
+ .heading {
+ color: var(--calcite-tile-link-color, var(--calcite-color-text-link));
+ }
}
:host([href]:active:not([disabled])) {
.container {
- box-shadow: 0 0 0 3px var(--calcite-tile-border-color);
+ box-shadow: inset 0 0 0 1px var(--calcite-tile-link-color, var(--calcite-color-text-link));
+ outline-color: var(--calcite-tile-link-color, var(--calcite-color-text-link));
}
}
:host([embed]) {
.container {
- box-shadow: none;
padding: 0;
}
}
:host([selection-mode="none"]) {
.container {
- outline-color: var(--calcite-tile-border-color);
+ &:hover,
+ &.selected {
+ outline-color: var(--calcite-tile-border-color, var(--calcite-color-border-2));
+ }
&:focus {
- outline-color: var(--calcite-color-brand);
- position: relative;
+ outline-color: var(--calcite-tile-accent-color-press, var(--calcite-color-brand));
}
}
}
@include disabled();
-
-:host(:hover:not([disabled])),
-:host([active]:not([disabled])) {
- --calcite-tile-description-text-color: var(--calcite-color-text-2);
- --calcite-tile-heading-text-color: var(--calcite-color-text-1);
-}
-
@include base-component();
::slotted(*) {
diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts
index 7a1aa0767eb..074a384ea5e 100644
--- a/packages/calcite-components/src/custom-theme.stories.ts
+++ b/packages/calcite-components/src/custom-theme.stories.ts
@@ -35,6 +35,7 @@ import { slider } from "./custom-theme/slider";
import { tabs } from "./custom-theme/tabs";
import { textArea, textAreaTokens } from "./custom-theme/text-area";
import { avatarIcon, avatarInitials, avatarThumbnail, avatarTokens } from "./custom-theme/avatar";
+import { tileTokens, tile } from "./custom-theme/tile";
const globalTokens = {
calciteColorBrand: "#007ac2",
@@ -115,7 +116,7 @@ const kitchenSink = (args: Record, useTestValues = false) =>
${checkbox}
${chips} ${pagination} ${slider}
- ${datePicker} ${tabs} ${loader} ${calciteSwitch} ${avatarIcon} ${avatarInitials} ${avatarThumbnail} ${progress} ${handle} ${textArea} ${popover}
+ ${datePicker} ${tabs} ${loader} ${calciteSwitch} ${avatarIcon} ${avatarInitials} ${avatarThumbnail} ${progress} ${handle} ${textArea} ${popover} ${tile}
${alert}
@@ -140,6 +141,7 @@ const componentTokens = {
...progressTokens,
...inputTokens,
...textAreaTokens,
+ ...tileTokens,
};
export default {
diff --git a/packages/calcite-components/src/custom-theme/tile.ts b/packages/calcite-components/src/custom-theme/tile.ts
new file mode 100644
index 00000000000..de91065f42e
--- /dev/null
+++ b/packages/calcite-components/src/custom-theme/tile.ts
@@ -0,0 +1,21 @@
+import { html } from "../../support/formatting";
+
+export const tileTokens = {
+ calciteTileAccentColorPress: "",
+ calciteTileBackgroundColor: "",
+ calciteTileBorderColor: "",
+ calciteTileCornerRadius: "",
+ calciteTileHeadingTextColor: "",
+ calciteTileLinkColor: "",
+ calciteTileShadow: "",
+ calciteTileTextColor: "",
+};
+
+export const tile = html`
+
+`;
diff --git a/packages/calcite-components/src/demos/tile-group.html b/packages/calcite-components/src/demos/tile-group.html
index c139d6c1fe3..7036090ecaa 100644
--- a/packages/calcite-components/src/demos/tile-group.html
+++ b/packages/calcite-components/src/demos/tile-group.html
@@ -1592,6 +1592,181 @@
+
+
+
+
+
themed single
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
themed multiple
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -2389,6 +2564,94 @@
+
+
+
+
+
themed
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+