From 45d65d987a338b24f11fb20c9eb864d767465620 Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Wed, 2 Oct 2024 14:46:55 -0700
Subject: [PATCH 01/30] feat(tile): add design tokens

---
 packages/calcite-components/.stylelintrc.cjs  |   1 +
 .../calcite-components/src/components.d.ts    |   4 +
 .../src/components/tile/tile.e2e.ts           |  78 ++++++++++++-
 .../src/components/tile/tile.scss             | 110 ++++++++++++------
 4 files changed, 155 insertions(+), 38 deletions(-)

diff --git a/packages/calcite-components/.stylelintrc.cjs b/packages/calcite-components/.stylelintrc.cjs
index 2e02214db54..f36f9230a75 100644
--- a/packages/calcite-components/.stylelintrc.cjs
+++ b/packages/calcite-components/.stylelintrc.cjs
@@ -6,6 +6,7 @@ const customFunctions = [
   "medium-modular-scale",
   "modular-scale",
   "scale-duration",
+  "scaleDuration",
   "small-modular-scale"
 ];
 // ⚠️ END OF AUTO-GENERATED CODE
diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index 45c00f705de..7da8199359d 100644
--- a/packages/calcite-components/src/components.d.ts
+++ b/packages/calcite-components/src/components.d.ts
@@ -982,6 +982,7 @@ export namespace Components {
         "form": string;
         /**
           * The `id` attribute of the component. When omitted, a globally unique identifier is used.
+          * @deprecated No longer necessary.
          */
         "guid": string;
         /**
@@ -4199,6 +4200,7 @@ export namespace Components {
         "form": string;
         /**
           * The `id` of the component. When omitted, a globally unique identifier is used.
+          * @deprecated No longer necessary.
          */
         "guid": string;
         /**
@@ -8967,6 +8969,7 @@ declare namespace LocalJSX {
         "form"?: string;
         /**
           * The `id` attribute of the component. When omitted, a globally unique identifier is used.
+          * @deprecated No longer necessary.
          */
         "guid"?: string;
         /**
@@ -12368,6 +12371,7 @@ declare namespace LocalJSX {
         "form"?: string;
         /**
           * The `id` of the component. When omitted, a globally unique identifier is used.
+          * @deprecated No longer necessary.
          */
         "guid"?: string;
         /**
diff --git a/packages/calcite-components/src/components/tile/tile.e2e.ts b/packages/calcite-components/src/components/tile/tile.e2e.ts
index 1f7580e132e..920d304cac5 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,68 @@ describe("calcite-tile", () => {
       expect(description).toBeNull();
     });
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      themed(
+        html`
+          <calcite-tile
+            heading="Tile heading lorem ipsum"
+            description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
+            icon="layers"
+            interactive
+            selected
+          >
+          </calcite-tile>
+        `,
+        {
+          "--calcite-tile-background-color": {
+            shadowSelector: `.${CSS.container}`,
+            targetProp: "backgroundColor",
+          },
+          "--calcite-tile-border-color": {
+            shadowSelector: `.${CSS.container}`,
+            targetProp: "outlineColor",
+          },
+          "--calcite-tile-description-text-color": {
+            shadowSelector: `.${CSS.description}`,
+            targetProp: "color",
+          },
+          "--calcite-tile-heading-text-color": {
+            shadowSelector: `.${CSS.heading}`,
+            targetProp: "color",
+          },
+          "--calcite-tile-icon-color": {
+            shadowSelector: "calcite-icon",
+            targetProp: "--calcite-icon-color",
+          },
+        },
+      );
+    });
+    describe("single selection", () => {
+      themed(
+        html`
+          <calcite-tile
+            heading="Tile heading lorem ipsum"
+            description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
+            icon="layers"
+            interactive
+            selection-mode="single"
+          >
+          </calcite-tile>
+        `,
+        {
+          "--calcite-tile-selection-icon-color": {
+            shadowSelector: `calcite-icon.${CSS.selectionIcon}`,
+            targetProp: "--calcite-icon-color",
+          },
+          "--calcite-tile-selection-icon-color-hover": {
+            shadowSelector: `calcite-icon.${CSS.selectionIcon}`,
+            targetProp: "--calcite-icon-color",
+            state: "hover",
+          },
+        },
+      );
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/tile/tile.scss b/packages/calcite-components/src/components/tile/tile.scss
index c9b1f43fedc..51d045ac8f7 100644
--- a/packages/calcite-components/src/components/tile/tile.scss
+++ b/packages/calcite-components/src/components/tile/tile.scss
@@ -7,42 +7,65 @@
  * @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-icon-color: Specifies the icon color in the component.
+ * @prop --calcite-tile-selection-icon-color: Specifies the color of the selection icon in the component.
+ * @prop --calcite-tile-selection-icon-color-hover: Specifies the color of the selection icon in the component on hover.
+ * @prop --calcite-tile-shadow: Specifies the box-shadow of the component.
  */
 
+/** Internal variables
+  * --calcite-internal-tile-border-color
+  * --calcite-internal-tile-description-text-color
+  * --calcite-internal-tile-heading-text-color
+  * --calcite-internal-tile-icon-color
+  * --calcite-internal-tile-outline-color
+  * --calcite-internal-tile-selection-icon-color
+  * --calcite-internal-tile-shadow
+  */
+
 :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);
+  --calcite-internal-tile-border-color: var(--calcite-tile-border-color, var(--calcite-color-border-2));
+  --calcite-internal-tile-description-text-color: var(
+    --calcite-tile-description-text-color,
+    var(--calcite-color-text-3)
+  );
+  --calcite-internal-tile-heading-text-color: var(--calcite-tile-heading-text-color, var(--calcite-color-text-2));
+  --calcite-internal-tile-icon-color: var(--calcite-color-text-3);
 
   box-sizing: border-box;
   display: inline-block;
 }
 
 .container {
-  background-color: var(--calcite-tile-background-color);
+  --calcite-internal-tile-outline-color: var(--calcite-tile-border-color, var(--calcite-internal-tile-border-color));
+  --calcite-internal-tile-select-icon-color: var(--calcite-tile-selection-icon-color, var(--calcite-color-text-3));
+
+  background-color: var(--calcite-tile-background-color, var(--calcite-color-foreground-1));
   block-size: var(--calcite-container-size-content-fluid);
   box-sizing: border-box;
   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-internal-tile-outline-color);
   user-select: none;
+  box-shadow: var(--calcite-tile-shadow, var(--calcite-internal-tile-shadow, none));
+
   &.interactive {
     cursor: pointer;
+
     &:hover,
     &:focus,
     &.selected {
-      outline-color: var(--calcite-color-brand);
+      --calcite-internal-tile-outline-color: var(--calcite-tile-border-color, var(--calcite-color-brand));
+      --calcite-internal-tile-select-icon-color: var(
+        --calcite-tile-selection-icon-color-hover,
+        var(--calcite-color-brand)
+      );
       position: relative;
-      .selection-icon {
-        --calcite-icon-color: var(--calcite-color-brand);
-      }
     }
     &.selected {
       z-index: var(--calcite-z-index);
     }
     &:focus {
-      box-shadow: inset 0 0 0 1px var(--calcite-color-brand);
+      --calcite-internal-tile-shadow: inset 0 0 0 1px var(--calcite-color-brand);
       z-index: var(--calcite-z-index-sticky);
     }
   }
@@ -70,7 +93,7 @@
 }
 
 .heading {
-  color: var(--calcite-tile-heading-text-color);
+  color: var(--calcite-tile-heading-text-color, var(--calcite-internal-tile-heading-text-color));
   font-weight: var(--calcite-font-weight-medium);
   line-height: 1.20313rem;
   overflow-wrap: break-word;
@@ -94,25 +117,31 @@
 }
 
 .description {
-  color: var(--calcite-tile-description-text-color);
+  color: var(--calcite-tile-description-text-color, var(--calcite-internal-tile-description-text-color));
   font-weight: var(--calcite-font-weight-regular);
   overflow-wrap: break-word;
 }
 
+calcite-icon {
+  --calcite-icon-color: var(
+    --calcite-tile-icon-color,
+    var(--calcite-internal-tile-icon-color, var(--calcite-color-text-3))
+  );
+
+  &.selection-icon {
+    --calcite-icon-color: var(--calcite-internal-tile-select-icon-color);
+  }
+}
+
 :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;
   }
 }
@@ -189,6 +218,8 @@
 :host([selection-appearance="border"][layout="horizontal"]),
 :host([selection-appearance="border"][layout="vertical"]) {
   .container.selected:focus::before {
+    --calcite-internal-tile-shadow: inset 0 0 0 1px var(--calcite-color-brand);
+
     block-size: 100%;
     box-shadow: inset 0 0 0 1px var(--calcite-color-brand);
     content: "";
@@ -202,21 +233,28 @@
 
 :host([selection-appearance="border"][layout="horizontal"]) {
   .container.selected {
-    box-shadow: inset 0 -4px 0 0 var(--calcite-color-brand);
+    --calcite-internal-tile-shadow: inset 0 -4px 0 0 var(--calcite-color-brand);
   }
 }
 
 :host([selection-appearance="border"][layout="vertical"]) {
   .container.selected {
-    box-shadow: inset 4px 0 0 0 var(--calcite-color-brand);
+    --calcite-internal-tile-shadow: inset 4px 0 0 0 var(--calcite-color-brand);
+  }
+}
+
+:host([href]:active:not([disabled])) {
+  .container {
+    box-shadow: 0 0 0 3px var(--calcite-tile-border-color);
   }
 }
 
 :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);
+  --calcite-internal-tile-border-color: var(--calcite-color-text-link);
+  --calcite-internal-tile-heading-text-color: var(--calcite-color-text-link);
+  --calcite-internal-tile-icon-color: var(--calcite-color-text-link);
+  --calcite-ui-icon-color: var(--calcite-color-text-link);
   .container {
     position: relative;
     z-index: var(--calcite-z-index);
@@ -225,35 +263,35 @@
 
 :host([href]:active:not([disabled])) {
   .container {
-    box-shadow: 0 0 0 3px var(--calcite-tile-border-color);
+    --calcite-internal-tile-shadow: 0 0 0 3px var(--calcite-tile-border-color);
   }
 }
 
+:host(:hover:not([disabled])),
+:host([active]:not([disabled])) {
+  --calcite-internal-tile-description-text-color: var(--calcite-color-text-2);
+  --calcite-internal-tile-heading-text-color: var(--calcite-color-text-1);
+}
+
 :host([embed]) {
   .container {
-    box-shadow: none;
+    --calcite-internal-tile-shadow: none;
     padding: 0;
   }
 }
 
 :host([selection-mode="none"]) {
   .container {
-    outline-color: var(--calcite-tile-border-color);
+    --calcite-internal-tile-outline-color: var(--calcite-internal-tile-border-color);
+
     &:focus {
-      outline-color: var(--calcite-color-brand);
+      --calcite-internal-tile-outline-color: var(--calcite-color-brand);
       position: relative;
     }
   }
 }
 
 @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(*) {

From c7c4f5e324629807de59df1c09d183478f3513c5 Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Wed, 2 Oct 2024 15:48:15 -0700
Subject: [PATCH 02/30] updating storybook and demo pages for theming examples

---
 .../src/custom-theme.stories.ts               |   5 +-
 .../src/custom-theme/tile.ts                  |  21 ++
 .../src/demos/tile-group.html                 | 265 ++++++++++++++++++
 3 files changed, 290 insertions(+), 1 deletion(-)
 create mode 100644 packages/calcite-components/src/custom-theme/tile.ts

diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts
index 79d3a34c968..d1d80f0435a 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<string, string>, useTestValues = false) =>
           <div>${checkbox}</div>
           ${chips} ${pagination} ${slider}
         </div>
-        <div class="demo-column">${datePicker} ${tabs} ${loader} ${calciteSwitch} ${avatarIcon} ${avatarInitials} ${avatarThumbnail} ${progress} ${handle} ${textArea} ${popover}</div>
+        <div class="demo-column">${datePicker} ${tabs} ${loader} ${calciteSwitch} ${avatarIcon} ${avatarInitials} ${avatarThumbnail} ${progress} ${handle} ${textArea} ${popover} ${tile}</div>
         ${alert}
       </div>
     </div>
@@ -142,6 +143,7 @@ export default {
     ...progressTokens,
     ...inputTokens,
     ...textAreaTokens,
+    ...tileTokens,
   },
 };
 
@@ -169,6 +171,7 @@ export const theming = (): string => {
       ...progressTokens,
       ...inputTokens,
       ...textAreaTokens,
+      ...tileTokens,
     },
     true,
   );
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..fad697cb46d
--- /dev/null
+++ b/packages/calcite-components/src/custom-theme/tile.ts
@@ -0,0 +1,21 @@
+import { html } from "../../support/formatting";
+
+export const tileTokens = {
+  calciteTileBackgroundColor: "",
+  calciteTileBorderColor: "",
+  calciteTileDescriptionTextColor: "",
+  calciteTileHeadingTextColor: "",
+  calciteTileIconColor: "",
+  calciteTileSelectionIconColor: "",
+  calciteTileSelectionIconColorHover: "",
+  calciteTileShadow: "",
+};
+
+export const tile = html`
+  <calcite-tile
+    heading="Tile heading lorem ipsum"
+    description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
+    icon="layers"
+    selected
+  ></calcite-tile>
+`;
diff --git a/packages/calcite-components/src/demos/tile-group.html b/packages/calcite-components/src/demos/tile-group.html
index c139d6c1fe3..dc8818d7f22 100644
--- a/packages/calcite-components/src/demos/tile-group.html
+++ b/packages/calcite-components/src/demos/tile-group.html
@@ -1592,6 +1592,182 @@
         </div>
       </div>
 
+      <!-- themed -->
+      <demo-theme
+        tokens="
+        --calcite-tile-background-color,
+        --calcite-tile-border-color,
+        --calcite-tile-description-text-color,
+        --calcite-tile-heading-text-color,
+        --calcite-tile-icon-color,
+        --calcite-tile-selection-icon-color,
+        --calcite-tile-selection-icon-color-hover,
+        --calcite-tile-shadow"
+      >
+        <!-- themed single -->
+        <div class="parent">
+          <div class="child right-aligned-text">themed single</div>
+          <div class="child">
+            <calcite-tile-group selection-mode="single" scale="s">
+              <calcite-tile
+                heading="Tile heading lorem ipsum"
+                description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
+                icon="layers"
+              ></calcite-tile>
+              <calcite-tile
+                heading="Tile heading lorem ipsum"
+                description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
+                icon="layers"
+                selected
+              ></calcite-tile>
+              <calcite-tile
+                heading="Tile heading lorem ipsum"
+                description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
+                icon="layers"
+              ></calcite-tile>
+              <calcite-tile
+                heading="Tile heading lorem ipsum"
+                description="Iterative approaches to corporate strategy foster collab."
+                icon="layers"
+              ></calcite-tile>
+            </calcite-tile-group>
+          </div>
+          <div class="child">
+            <calcite-tile-group selection-mode="single" scale="m">
+              <calcite-tile
+                heading="Tile heading lorem ipsum"
+                description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
+                icon="layers"
+              ></calcite-tile>
+              <calcite-tile
+                heading="Tile heading lorem ipsum"
+                description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
+                icon="layers"
+                selected
+              ></calcite-tile>
+              <calcite-tile
+                heading="Tile heading lorem ipsum"
+                description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
+                icon="layers"
+              ></calcite-tile>
+              <calcite-tile
+                heading="Tile heading lorem ipsum"
+                description="Iterative approaches to corporate strategy foster collab."
+                icon="layers"
+              ></calcite-tile>
+            </calcite-tile-group>
+          </div>
+          <div class="child">
+            <calcite-tile-group selection-mode="single" scale="l">
+              <calcite-tile
+                heading="Tile heading lorem ipsum"
+                description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
+                icon="layers"
+              ></calcite-tile>
+              <calcite-tile
+                heading="Tile heading lorem ipsum"
+                description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
+                icon="layers"
+                selected
+              ></calcite-tile>
+              <calcite-tile
+                heading="Tile heading lorem ipsum"
+                description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
+                icon="layers"
+              ></calcite-tile>
+              <calcite-tile
+                heading="Tile heading lorem ipsum"
+                description="Iterative approaches to corporate strategy foster collab."
+                icon="layers"
+              ></calcite-tile>
+            </calcite-tile-group>
+          </div>
+        </div>
+
+        <!-- themed Multiple -->
+        <div class="parent">
+          <div class="child right-aligned-text">themed multiple</div>
+          <div class="child">
+            <calcite-tile-group selection-mode="multiple" scale="s">
+              <calcite-tile
+                heading="Tile heading lorem ipsum"
+                description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
+                selected
+                icon="layers"
+              ></calcite-tile>
+              <calcite-tile
+                heading="Tile heading lorem ipsum"
+                description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
+                icon="layers"
+              ></calcite-tile>
+              <calcite-tile
+                heading="Tile heading lorem ipsum"
+                description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
+                selected
+                icon="layers"
+              ></calcite-tile>
+              <calcite-tile
+                heading="Tile heading lorem ipsum"
+                description="Iterative approaches to corporate strategy foster collab."
+                icon="layers"
+              ></calcite-tile>
+            </calcite-tile-group>
+          </div>
+          <div class="child">
+            <calcite-tile-group selection-mode="multiple" scale="m">
+              <calcite-tile
+                heading="Tile heading lorem ipsum"
+                description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
+                selected
+                icon="layers"
+              ></calcite-tile>
+              <calcite-tile
+                heading="Tile heading lorem ipsum"
+                description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
+                icon="layers"
+              ></calcite-tile>
+              <calcite-tile
+                heading="Tile heading lorem ipsum"
+                description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
+                selected
+                icon="layers"
+              ></calcite-tile>
+              <calcite-tile
+                heading="Tile heading lorem ipsum"
+                description="Iterative approaches to corporate strategy foster collab."
+                icon="layers"
+              ></calcite-tile>
+            </calcite-tile-group>
+          </div>
+          <div class="child">
+            <calcite-tile-group selection-mode="multiple" scale="l">
+              <calcite-tile
+                heading="Tile heading lorem ipsum"
+                description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
+                selected
+                icon="layers"
+              ></calcite-tile>
+              <calcite-tile
+                heading="Tile heading lorem ipsum"
+                description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
+                icon="layers"
+              ></calcite-tile>
+              <calcite-tile
+                heading="Tile heading lorem ipsum"
+                description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
+                selected
+                icon="layers"
+              ></calcite-tile>
+              <calcite-tile
+                heading="Tile heading lorem ipsum"
+                description="Iterative approaches to corporate strategy foster collab."
+                icon="layers"
+              ></calcite-tile>
+            </calcite-tile-group>
+          </div>
+        </div>
+      </demo-theme>
+
       <!-- A horizonal line-->
       <hr />
 
@@ -2389,6 +2565,95 @@
           </calcite-tile-group>
         </div>
       </div>
+
+      <!-- themed -->
+      <demo-theme
+        tokens="
+        --calcite-tile-background-color,
+        --calcite-tile-border-color,
+        --calcite-tile-description-text-color,
+        --calcite-tile-heading-text-color,
+        --calcite-tile-icon-color,
+        --calcite-tile-selection-icon-color,
+        --calcite-tile-selection-icon-color-hover,
+        --calcite-tile-shadow"
+      >
+        <div class="parent">
+          <div class="child right-aligned-text">themed</div>
+          <div class="child">
+            <calcite-tile-group layout="vertical" selection-mode="single" scale="s">
+              <calcite-tile
+                heading="Tile heading lorem ipsum"
+                description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
+                icon="layers"
+              ></calcite-tile>
+              <calcite-tile
+                heading="Tile heading lorem ipsum"
+                description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
+                icon="layers"
+              ></calcite-tile>
+              <calcite-tile
+                heading="Tile heading lorem ipsum"
+                description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
+                icon="layers"
+              ></calcite-tile>
+              <calcite-tile
+                heading="Tile heading lorem ipsum"
+                description="Iterative approaches to corporate strategy foster collab."
+                icon="layers"
+              ></calcite-tile>
+            </calcite-tile-group>
+          </div>
+          <div class="child">
+            <calcite-tile-group layout="vertical" selection-mode="single" scale="m">
+              <calcite-tile
+                heading="Tile heading lorem ipsum"
+                description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
+                icon="layers"
+              ></calcite-tile>
+              <calcite-tile
+                heading="Tile heading lorem ipsum"
+                description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
+                icon="layers"
+              ></calcite-tile>
+              <calcite-tile
+                heading="Tile heading lorem ipsum"
+                description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
+                icon="layers"
+              ></calcite-tile>
+              <calcite-tile
+                heading="Tile heading lorem ipsum"
+                description="Iterative approaches to corporate strategy foster collab."
+                icon="layers"
+              ></calcite-tile>
+            </calcite-tile-group>
+          </div>
+          <div class="child">
+            <calcite-tile-group layout="vertical" selection-mode="single" scale="l">
+              <calcite-tile
+                heading="Tile heading lorem ipsum"
+                description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
+                icon="layers"
+              ></calcite-tile>
+              <calcite-tile
+                heading="Tile heading lorem ipsum"
+                description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
+                icon="layers"
+              ></calcite-tile>
+              <calcite-tile
+                heading="Tile heading lorem ipsum"
+                description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
+                icon="layers"
+              ></calcite-tile>
+              <calcite-tile
+                heading="Tile heading lorem ipsum"
+                description="Iterative approaches to corporate strategy foster collab."
+                icon="layers"
+              ></calcite-tile>
+            </calcite-tile-group>
+          </div>
+        </div>
+      </demo-theme>
     </demo-dom-swapper>
     <script>
       document.addEventListener("calciteTileGroupSelect", (event) => {

From b8e6d03b2027ec90a8de8ee108cdcaa2da9a13c5 Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Thu, 3 Oct 2024 15:32:05 -0700
Subject: [PATCH 03/30] replacing "description-text-color" with "text-color"
 and adding a "text-color-hover" token to allow both a default and overridable
 hover color.

---
 .../src/components/tile/tile.e2e.ts                 | 13 +++++++++----
 .../src/components/tile/tile.scss                   | 12 ++++--------
 .../calcite-components/src/custom-theme/tile.ts     |  3 ++-
 .../calcite-components/src/demos/tile-group.html    | 10 ++++++----
 4 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/packages/calcite-components/src/components/tile/tile.e2e.ts b/packages/calcite-components/src/components/tile/tile.e2e.ts
index 920d304cac5..56df18b51a5 100644
--- a/packages/calcite-components/src/components/tile/tile.e2e.ts
+++ b/packages/calcite-components/src/components/tile/tile.e2e.ts
@@ -244,10 +244,6 @@ describe("calcite-tile", () => {
             shadowSelector: `.${CSS.container}`,
             targetProp: "outlineColor",
           },
-          "--calcite-tile-description-text-color": {
-            shadowSelector: `.${CSS.description}`,
-            targetProp: "color",
-          },
           "--calcite-tile-heading-text-color": {
             shadowSelector: `.${CSS.heading}`,
             targetProp: "color",
@@ -256,6 +252,15 @@ describe("calcite-tile", () => {
             shadowSelector: "calcite-icon",
             targetProp: "--calcite-icon-color",
           },
+          "--calcite-tile-text-color": {
+            selector: `calcite-tile`,
+            targetProp: "color",
+          },
+          "--calcite-tile-text-color-hover": {
+            selector: `calcite-tile`,
+            targetProp: "color",
+            state: "hover",
+          },
         },
       );
     });
diff --git a/packages/calcite-components/src/components/tile/tile.scss b/packages/calcite-components/src/components/tile/tile.scss
index 51d045ac8f7..55bbfcc0d9c 100644
--- a/packages/calcite-components/src/components/tile/tile.scss
+++ b/packages/calcite-components/src/components/tile/tile.scss
@@ -5,8 +5,9 @@
  *
  * @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-text-color: Specifies the text color of the component.
+ * @prop --calcite-tile-text-color-hover: Specifies the text color of the component on hover.
  * @prop --calcite-tile-icon-color: Specifies the icon color in the component.
  * @prop --calcite-tile-selection-icon-color: Specifies the color of the selection icon in the component.
  * @prop --calcite-tile-selection-icon-color-hover: Specifies the color of the selection icon in the component on hover.
@@ -15,7 +16,6 @@
 
 /** Internal variables
   * --calcite-internal-tile-border-color
-  * --calcite-internal-tile-description-text-color
   * --calcite-internal-tile-heading-text-color
   * --calcite-internal-tile-icon-color
   * --calcite-internal-tile-outline-color
@@ -25,14 +25,11 @@
 
 :host {
   --calcite-internal-tile-border-color: var(--calcite-tile-border-color, var(--calcite-color-border-2));
-  --calcite-internal-tile-description-text-color: var(
-    --calcite-tile-description-text-color,
-    var(--calcite-color-text-3)
-  );
   --calcite-internal-tile-heading-text-color: var(--calcite-tile-heading-text-color, var(--calcite-color-text-2));
   --calcite-internal-tile-icon-color: var(--calcite-color-text-3);
 
   box-sizing: border-box;
+  color: var(--calcite-tile-text-color, var(--calcite-color-text-3));
   display: inline-block;
 }
 
@@ -117,7 +114,6 @@
 }
 
 .description {
-  color: var(--calcite-tile-description-text-color, var(--calcite-internal-tile-description-text-color));
   font-weight: var(--calcite-font-weight-regular);
   overflow-wrap: break-word;
 }
@@ -269,7 +265,7 @@ calcite-icon {
 
 :host(:hover:not([disabled])),
 :host([active]:not([disabled])) {
-  --calcite-internal-tile-description-text-color: var(--calcite-color-text-2);
+  color: var(--calcite-tile-text-color-hover, --calcite-color-text-2);
   --calcite-internal-tile-heading-text-color: var(--calcite-color-text-1);
 }
 
diff --git a/packages/calcite-components/src/custom-theme/tile.ts b/packages/calcite-components/src/custom-theme/tile.ts
index fad697cb46d..0df2b9f2266 100644
--- a/packages/calcite-components/src/custom-theme/tile.ts
+++ b/packages/calcite-components/src/custom-theme/tile.ts
@@ -3,12 +3,13 @@ import { html } from "../../support/formatting";
 export const tileTokens = {
   calciteTileBackgroundColor: "",
   calciteTileBorderColor: "",
-  calciteTileDescriptionTextColor: "",
   calciteTileHeadingTextColor: "",
   calciteTileIconColor: "",
   calciteTileSelectionIconColor: "",
   calciteTileSelectionIconColorHover: "",
   calciteTileShadow: "",
+  calciteTileTextColor: "",
+  calciteTileTextColorHover: "",
 };
 
 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 dc8818d7f22..46f6ff4a51a 100644
--- a/packages/calcite-components/src/demos/tile-group.html
+++ b/packages/calcite-components/src/demos/tile-group.html
@@ -1597,12 +1597,13 @@
         tokens="
         --calcite-tile-background-color,
         --calcite-tile-border-color,
-        --calcite-tile-description-text-color,
         --calcite-tile-heading-text-color,
         --calcite-tile-icon-color,
         --calcite-tile-selection-icon-color,
         --calcite-tile-selection-icon-color-hover,
-        --calcite-tile-shadow"
+        --calcite-tile-shadow,
+        --calcite-tile-text-color,
+        --calcite-tile-text-color-hover"
       >
         <!-- themed single -->
         <div class="parent">
@@ -2571,12 +2572,13 @@
         tokens="
         --calcite-tile-background-color,
         --calcite-tile-border-color,
-        --calcite-tile-description-text-color,
         --calcite-tile-heading-text-color,
         --calcite-tile-icon-color,
         --calcite-tile-selection-icon-color,
         --calcite-tile-selection-icon-color-hover,
-        --calcite-tile-shadow"
+        --calcite-tile-shadow,
+        --calcite-tile-text-color,
+        --calcite-tile-text-color-hover"
       >
         <div class="parent">
           <div class="child right-aligned-text">themed</div>

From 57a92612937396a8e166cdebf83f887e8b16e259 Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Thu, 3 Oct 2024 16:59:55 -0700
Subject: [PATCH 04/30] removing --calcite-tile-text-color-hover since future
 patterns will render this unnecessary and we don't want to ship a token we'll
 have to immediately deprecate

---
 packages/calcite-components/src/components/tile/tile.e2e.ts | 5 -----
 packages/calcite-components/src/components/tile/tile.scss   | 3 +--
 packages/calcite-components/src/demos/tile-group.html       | 6 ++----
 3 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/packages/calcite-components/src/components/tile/tile.e2e.ts b/packages/calcite-components/src/components/tile/tile.e2e.ts
index 56df18b51a5..f62320b6772 100644
--- a/packages/calcite-components/src/components/tile/tile.e2e.ts
+++ b/packages/calcite-components/src/components/tile/tile.e2e.ts
@@ -256,11 +256,6 @@ describe("calcite-tile", () => {
             selector: `calcite-tile`,
             targetProp: "color",
           },
-          "--calcite-tile-text-color-hover": {
-            selector: `calcite-tile`,
-            targetProp: "color",
-            state: "hover",
-          },
         },
       );
     });
diff --git a/packages/calcite-components/src/components/tile/tile.scss b/packages/calcite-components/src/components/tile/tile.scss
index 55bbfcc0d9c..49c634dc7d8 100644
--- a/packages/calcite-components/src/components/tile/tile.scss
+++ b/packages/calcite-components/src/components/tile/tile.scss
@@ -7,7 +7,6 @@
  * @prop --calcite-tile-border-color: Specifies the border color of the component.
  * @prop --calcite-tile-heading-text-color: Specifies the heading text color of the component.
  * @prop --calcite-tile-text-color: Specifies the text color of the component.
- * @prop --calcite-tile-text-color-hover: Specifies the text color of the component on hover.
  * @prop --calcite-tile-icon-color: Specifies the icon color in the component.
  * @prop --calcite-tile-selection-icon-color: Specifies the color of the selection icon in the component.
  * @prop --calcite-tile-selection-icon-color-hover: Specifies the color of the selection icon in the component on hover.
@@ -265,7 +264,7 @@ calcite-icon {
 
 :host(:hover:not([disabled])),
 :host([active]:not([disabled])) {
-  color: var(--calcite-tile-text-color-hover, --calcite-color-text-2);
+  color: var(--calcite-tile-text-color, --calcite-color-text-2);
   --calcite-internal-tile-heading-text-color: var(--calcite-color-text-1);
 }
 
diff --git a/packages/calcite-components/src/demos/tile-group.html b/packages/calcite-components/src/demos/tile-group.html
index 46f6ff4a51a..e227280060a 100644
--- a/packages/calcite-components/src/demos/tile-group.html
+++ b/packages/calcite-components/src/demos/tile-group.html
@@ -1602,8 +1602,7 @@
         --calcite-tile-selection-icon-color,
         --calcite-tile-selection-icon-color-hover,
         --calcite-tile-shadow,
-        --calcite-tile-text-color,
-        --calcite-tile-text-color-hover"
+        --calcite-tile-text-color"
       >
         <!-- themed single -->
         <div class="parent">
@@ -2577,8 +2576,7 @@
         --calcite-tile-selection-icon-color,
         --calcite-tile-selection-icon-color-hover,
         --calcite-tile-shadow,
-        --calcite-tile-text-color,
-        --calcite-tile-text-color-hover"
+        --calcite-tile-text-color"
       >
         <div class="parent">
           <div class="child right-aligned-text">themed</div>

From 55dd86b68f673695906de000be1ab3dd5b378dae Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Fri, 4 Oct 2024 15:11:51 -0700
Subject: [PATCH 05/30] injecting --calcite-tile-border-color into the tile's
 focus selector so that one color token controls both the unfocused and
 focused states

---
 packages/calcite-components/src/components/tile/tile.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/tile/tile.scss b/packages/calcite-components/src/components/tile/tile.scss
index 49c634dc7d8..deafcf1f61c 100644
--- a/packages/calcite-components/src/components/tile/tile.scss
+++ b/packages/calcite-components/src/components/tile/tile.scss
@@ -61,7 +61,7 @@
       z-index: var(--calcite-z-index);
     }
     &:focus {
-      --calcite-internal-tile-shadow: inset 0 0 0 1px var(--calcite-color-brand);
+      --calcite-internal-tile-shadow: inset 0 0 0 1px var(--calcite-tile-border-color, --calcite-color-brand);
       z-index: var(--calcite-z-index-sticky);
     }
   }

From 6fdd1db4254b1415a0aa80e4c5974cf8a231c016 Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Fri, 4 Oct 2024 15:59:19 -0700
Subject: [PATCH 06/30] removing --calcite-tile-shadow because user can just
 set box-shadow directly on a calcite-tile element selector in CSS

---
 packages/calcite-components/src/components/tile/tile.scss | 4 +---
 packages/calcite-components/src/demos/tile-group.html     | 2 --
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/calcite-components/src/components/tile/tile.scss b/packages/calcite-components/src/components/tile/tile.scss
index deafcf1f61c..62f04ddbe8b 100644
--- a/packages/calcite-components/src/components/tile/tile.scss
+++ b/packages/calcite-components/src/components/tile/tile.scss
@@ -10,7 +10,6 @@
  * @prop --calcite-tile-icon-color: Specifies the icon color in the component.
  * @prop --calcite-tile-selection-icon-color: Specifies the color of the selection icon in the component.
  * @prop --calcite-tile-selection-icon-color-hover: Specifies the color of the selection icon in the component on hover.
- * @prop --calcite-tile-shadow: Specifies the box-shadow of the component.
  */
 
 /** Internal variables
@@ -42,7 +41,6 @@
   inline-size: var(--calcite-container-size-content-fluid);
   outline: var(--calcite-border-width-sm, 1px) solid var(--calcite-internal-tile-outline-color);
   user-select: none;
-  box-shadow: var(--calcite-tile-shadow, var(--calcite-internal-tile-shadow, none));
 
   &.interactive {
     cursor: pointer;
@@ -61,7 +59,7 @@
       z-index: var(--calcite-z-index);
     }
     &:focus {
-      --calcite-internal-tile-shadow: inset 0 0 0 1px var(--calcite-tile-border-color, --calcite-color-brand);
+      box-shadow: inset 0 0 0 1px var(--calcite-tile-border-color, --calcite-color-brand);
       z-index: var(--calcite-z-index-sticky);
     }
   }
diff --git a/packages/calcite-components/src/demos/tile-group.html b/packages/calcite-components/src/demos/tile-group.html
index e227280060a..c13db0e4a72 100644
--- a/packages/calcite-components/src/demos/tile-group.html
+++ b/packages/calcite-components/src/demos/tile-group.html
@@ -1601,7 +1601,6 @@
         --calcite-tile-icon-color,
         --calcite-tile-selection-icon-color,
         --calcite-tile-selection-icon-color-hover,
-        --calcite-tile-shadow,
         --calcite-tile-text-color"
       >
         <!-- themed single -->
@@ -2575,7 +2574,6 @@
         --calcite-tile-icon-color,
         --calcite-tile-selection-icon-color,
         --calcite-tile-selection-icon-color-hover,
-        --calcite-tile-shadow,
         --calcite-tile-text-color"
       >
         <div class="parent">

From aa92728ef87f18a386210862235e86cd4ca60bc3 Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Tue, 8 Oct 2024 11:30:55 -0700
Subject: [PATCH 07/30] adding --calcite-tile-shadow

---
 packages/calcite-components/src/components/tile/tile.e2e.ts | 4 ++++
 packages/calcite-components/src/components/tile/tile.scss   | 2 ++
 2 files changed, 6 insertions(+)

diff --git a/packages/calcite-components/src/components/tile/tile.e2e.ts b/packages/calcite-components/src/components/tile/tile.e2e.ts
index f62320b6772..e749fc2551b 100644
--- a/packages/calcite-components/src/components/tile/tile.e2e.ts
+++ b/packages/calcite-components/src/components/tile/tile.e2e.ts
@@ -252,6 +252,10 @@ describe("calcite-tile", () => {
             shadowSelector: "calcite-icon",
             targetProp: "--calcite-icon-color",
           },
+          "--calcite-tile-shadow": {
+            selector: `calcite-tile`,
+            targetProp: "boxShadow",
+          },
           "--calcite-tile-text-color": {
             selector: `calcite-tile`,
             targetProp: "color",
diff --git a/packages/calcite-components/src/components/tile/tile.scss b/packages/calcite-components/src/components/tile/tile.scss
index 62f04ddbe8b..c757683a51b 100644
--- a/packages/calcite-components/src/components/tile/tile.scss
+++ b/packages/calcite-components/src/components/tile/tile.scss
@@ -10,6 +10,7 @@
  * @prop --calcite-tile-icon-color: Specifies the icon color in the component.
  * @prop --calcite-tile-selection-icon-color: Specifies the color of the selection icon in the component.
  * @prop --calcite-tile-selection-icon-color-hover: Specifies the color of the selection icon in the component on hover.
+ * @prop --calcite-tile-shadow: Specifies the shadow around the component.
  */
 
 /** Internal variables
@@ -26,6 +27,7 @@
   --calcite-internal-tile-heading-text-color: var(--calcite-tile-heading-text-color, var(--calcite-color-text-2));
   --calcite-internal-tile-icon-color: var(--calcite-color-text-3);
 
+  box-shadow: var(--calcite-tile-shadow, var(--calcite-shadow-none));
   box-sizing: border-box;
   color: var(--calcite-tile-text-color, var(--calcite-color-text-3));
   display: inline-block;

From 0a9013298ae1d0c4c85a05d83f0cfc82d7a7dab1 Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Wed, 9 Oct 2024 13:10:48 -0700
Subject: [PATCH 08/30] removing --calcite-internal-tile-shadow since it isn't
 used anywhere.  Restoring selection-appearance border selected styles with
 box-shadow rules.

---
 .../src/components/tile/tile.scss              | 18 +++++-------------
 1 file changed, 5 insertions(+), 13 deletions(-)

diff --git a/packages/calcite-components/src/components/tile/tile.scss b/packages/calcite-components/src/components/tile/tile.scss
index c757683a51b..2fbb44c0dcd 100644
--- a/packages/calcite-components/src/components/tile/tile.scss
+++ b/packages/calcite-components/src/components/tile/tile.scss
@@ -6,11 +6,11 @@
  * @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-heading-text-color: Specifies the heading text color of the component.
- * @prop --calcite-tile-text-color: Specifies the text color of the component.
  * @prop --calcite-tile-icon-color: Specifies the icon color in the component.
  * @prop --calcite-tile-selection-icon-color: Specifies the color of the selection icon in the component.
  * @prop --calcite-tile-selection-icon-color-hover: Specifies the color of the selection icon in the component on hover.
  * @prop --calcite-tile-shadow: Specifies the shadow around the component.
+ * @prop --calcite-tile-text-color: Specifies the text color of the component.
  */
 
 /** Internal variables
@@ -19,7 +19,6 @@
   * --calcite-internal-tile-icon-color
   * --calcite-internal-tile-outline-color
   * --calcite-internal-tile-selection-icon-color
-  * --calcite-internal-tile-shadow
   */
 
 :host {
@@ -213,8 +212,6 @@ calcite-icon {
 :host([selection-appearance="border"][layout="horizontal"]),
 :host([selection-appearance="border"][layout="vertical"]) {
   .container.selected:focus::before {
-    --calcite-internal-tile-shadow: inset 0 0 0 1px var(--calcite-color-brand);
-
     block-size: 100%;
     box-shadow: inset 0 0 0 1px var(--calcite-color-brand);
     content: "";
@@ -228,13 +225,15 @@ calcite-icon {
 
 :host([selection-appearance="border"][layout="horizontal"]) {
   .container.selected {
-    --calcite-internal-tile-shadow: inset 0 -4px 0 0 var(--calcite-color-brand);
+    // TODO: Add a component design token here?
+    box-shadow: inset 0 -4px 0 0 var(--calcite-color-brand);
   }
 }
 
 :host([selection-appearance="border"][layout="vertical"]) {
   .container.selected {
-    --calcite-internal-tile-shadow: inset 4px 0 0 0 var(--calcite-color-brand);
+    // TODO: Add a component design token here?
+    box-shadow: inset 4px 0 0 0 var(--calcite-color-brand);
   }
 }
 
@@ -256,12 +255,6 @@ calcite-icon {
   }
 }
 
-:host([href]:active:not([disabled])) {
-  .container {
-    --calcite-internal-tile-shadow: 0 0 0 3px var(--calcite-tile-border-color);
-  }
-}
-
 :host(:hover:not([disabled])),
 :host([active]:not([disabled])) {
   color: var(--calcite-tile-text-color, --calcite-color-text-2);
@@ -270,7 +263,6 @@ calcite-icon {
 
 :host([embed]) {
   .container {
-    --calcite-internal-tile-shadow: none;
     padding: 0;
   }
 }

From f8bb7a7c6baeb88189b287978a1e365d7b8e6fa3 Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Wed, 9 Oct 2024 15:43:01 -0700
Subject: [PATCH 09/30] removing --calcite-internal-tile-outline-color in favor
 of --calcite-internal-tile-border-color and using brand token for hover,
 focus states on borders

---
 .../src/components/tile/tile.scss                   | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/packages/calcite-components/src/components/tile/tile.scss b/packages/calcite-components/src/components/tile/tile.scss
index 2fbb44c0dcd..a131b8e464c 100644
--- a/packages/calcite-components/src/components/tile/tile.scss
+++ b/packages/calcite-components/src/components/tile/tile.scss
@@ -17,7 +17,6 @@
   * --calcite-internal-tile-border-color
   * --calcite-internal-tile-heading-text-color
   * --calcite-internal-tile-icon-color
-  * --calcite-internal-tile-outline-color
   * --calcite-internal-tile-selection-icon-color
   */
 
@@ -33,14 +32,13 @@
 }
 
 .container {
-  --calcite-internal-tile-outline-color: var(--calcite-tile-border-color, var(--calcite-internal-tile-border-color));
   --calcite-internal-tile-select-icon-color: var(--calcite-tile-selection-icon-color, var(--calcite-color-text-3));
 
   background-color: var(--calcite-tile-background-color, var(--calcite-color-foreground-1));
   block-size: var(--calcite-container-size-content-fluid);
   box-sizing: border-box;
   inline-size: var(--calcite-container-size-content-fluid);
-  outline: var(--calcite-border-width-sm, 1px) solid var(--calcite-internal-tile-outline-color);
+  outline: var(--calcite-border-width-sm, 1px) solid var(--calcite-internal-tile-border-color);
   user-select: none;
 
   &.interactive {
@@ -49,7 +47,7 @@
     &:hover,
     &:focus,
     &.selected {
-      --calcite-internal-tile-outline-color: var(--calcite-tile-border-color, var(--calcite-color-brand));
+      outline-color: var(--calcite-color-brand);
       --calcite-internal-tile-select-icon-color: var(
         --calcite-tile-selection-icon-color-hover,
         var(--calcite-color-brand)
@@ -60,7 +58,7 @@
       z-index: var(--calcite-z-index);
     }
     &:focus {
-      box-shadow: inset 0 0 0 1px var(--calcite-tile-border-color, --calcite-color-brand);
+      box-shadow: inset 0 0 0 1px var(--calcite-color-brand);
       z-index: var(--calcite-z-index-sticky);
     }
   }
@@ -269,10 +267,9 @@ calcite-icon {
 
 :host([selection-mode="none"]) {
   .container {
-    --calcite-internal-tile-outline-color: var(--calcite-internal-tile-border-color);
-
+    outline-color: var(--calcite-internal-tile-border-color);
     &:focus {
-      --calcite-internal-tile-outline-color: var(--calcite-color-brand);
+      outline-color: var(--calcite-color-brand);
       position: relative;
     }
   }

From 4f05f78c8bec714feef51b8fd066e7fff5bc4a25 Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Wed, 9 Oct 2024 16:08:45 -0700
Subject: [PATCH 10/30] getting rid of --calcite-internal-tile-border-color

---
 packages/calcite-components/src/components/tile/tile.scss | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/calcite-components/src/components/tile/tile.scss b/packages/calcite-components/src/components/tile/tile.scss
index a131b8e464c..ad6a3f49536 100644
--- a/packages/calcite-components/src/components/tile/tile.scss
+++ b/packages/calcite-components/src/components/tile/tile.scss
@@ -14,14 +14,12 @@
  */
 
 /** Internal variables
-  * --calcite-internal-tile-border-color
   * --calcite-internal-tile-heading-text-color
   * --calcite-internal-tile-icon-color
   * --calcite-internal-tile-selection-icon-color
   */
 
 :host {
-  --calcite-internal-tile-border-color: var(--calcite-tile-border-color, var(--calcite-color-border-2));
   --calcite-internal-tile-heading-text-color: var(--calcite-tile-heading-text-color, var(--calcite-color-text-2));
   --calcite-internal-tile-icon-color: var(--calcite-color-text-3);
 
@@ -38,7 +36,7 @@
   block-size: var(--calcite-container-size-content-fluid);
   box-sizing: border-box;
   inline-size: var(--calcite-container-size-content-fluid);
-  outline: var(--calcite-border-width-sm, 1px) solid var(--calcite-internal-tile-border-color);
+  outline: var(--calcite-border-width-sm, 1px) solid var(--calcite-tile-border-color, var(--calcite-color-border-2));
   user-select: none;
 
   &.interactive {
@@ -243,10 +241,10 @@ calcite-icon {
 
 :host([href]:focus:not([disabled])),
 :host([href]:hover:not([disabled])) {
-  --calcite-internal-tile-border-color: var(--calcite-color-text-link);
   --calcite-internal-tile-heading-text-color: var(--calcite-color-text-link);
   --calcite-internal-tile-icon-color: var(--calcite-color-text-link);
   --calcite-ui-icon-color: var(--calcite-color-text-link);
+  outline-color: var(--calcite-color-text-link);
   .container {
     position: relative;
     z-index: var(--calcite-z-index);
@@ -267,7 +265,7 @@ calcite-icon {
 
 :host([selection-mode="none"]) {
   .container {
-    outline-color: var(--calcite-internal-tile-border-color);
+    outline-color: var(--calcite-tile-border-color, var(--calcite-color-border-2));
     &:focus {
       outline-color: var(--calcite-color-brand);
       position: relative;

From 9718d7bbc55be509c94a2db285014bbb51143b5d Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Wed, 9 Oct 2024 16:48:18 -0700
Subject: [PATCH 11/30] removing --calcite-internal-tile-heading-text-color and
 adding new --calcite-tile-heading-text-color-hover

---
 .../src/components/tile/tile.scss                   | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/calcite-components/src/components/tile/tile.scss b/packages/calcite-components/src/components/tile/tile.scss
index ad6a3f49536..1d801f906eb 100644
--- a/packages/calcite-components/src/components/tile/tile.scss
+++ b/packages/calcite-components/src/components/tile/tile.scss
@@ -6,6 +6,7 @@
  * @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-heading-text-color: Specifies the heading text color of the component.
+ * @prop --calcite-tile-heading-text-color-hover: Specifies the heading text color of the component on hover.
  * @prop --calcite-tile-icon-color: Specifies the icon color in the component.
  * @prop --calcite-tile-selection-icon-color: Specifies the color of the selection icon in the component.
  * @prop --calcite-tile-selection-icon-color-hover: Specifies the color of the selection icon in the component on hover.
@@ -14,13 +15,11 @@
  */
 
 /** Internal variables
-  * --calcite-internal-tile-heading-text-color
   * --calcite-internal-tile-icon-color
   * --calcite-internal-tile-selection-icon-color
   */
 
 :host {
-  --calcite-internal-tile-heading-text-color: var(--calcite-tile-heading-text-color, var(--calcite-color-text-2));
   --calcite-internal-tile-icon-color: var(--calcite-color-text-3);
 
   box-shadow: var(--calcite-tile-shadow, var(--calcite-shadow-none));
@@ -84,7 +83,7 @@
 }
 
 .heading {
-  color: var(--calcite-tile-heading-text-color, var(--calcite-internal-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;
@@ -241,7 +240,6 @@ calcite-icon {
 
 :host([href]:focus:not([disabled])),
 :host([href]:hover:not([disabled])) {
-  --calcite-internal-tile-heading-text-color: var(--calcite-color-text-link);
   --calcite-internal-tile-icon-color: var(--calcite-color-text-link);
   --calcite-ui-icon-color: var(--calcite-color-text-link);
   outline-color: var(--calcite-color-text-link);
@@ -249,12 +247,17 @@ calcite-icon {
     position: relative;
     z-index: var(--calcite-z-index);
   }
+  .heading {
+    color: var(--calcite-color-text-link);
+  }
 }
 
 :host(:hover:not([disabled])),
 :host([active]:not([disabled])) {
   color: var(--calcite-tile-text-color, --calcite-color-text-2);
-  --calcite-internal-tile-heading-text-color: var(--calcite-color-text-1);
+  .heading {
+    color: var(--calcite-tile-heading-text-color-hover, var(--calcite-color-text-1));
+  }
 }
 
 :host([embed]) {

From a7a8ee7f51f5b8ed80930f90dbc77418b113a249 Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Wed, 9 Oct 2024 17:10:20 -0700
Subject: [PATCH 12/30] removing --calcite-internal-tile-icon-color, updating
 to use current way of setting the color of the presentation calcite-icon
 using a direct color property, and adding additional
 --calcite-tile-href-icon-color-hover token that defaults to the link color

---
 .../src/components/tile/tile.scss                 | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/packages/calcite-components/src/components/tile/tile.scss b/packages/calcite-components/src/components/tile/tile.scss
index 1d801f906eb..b7684e272b8 100644
--- a/packages/calcite-components/src/components/tile/tile.scss
+++ b/packages/calcite-components/src/components/tile/tile.scss
@@ -7,6 +7,7 @@
  * @prop --calcite-tile-border-color: Specifies the border color of the component.
  * @prop --calcite-tile-heading-text-color: Specifies the heading text color of the component.
  * @prop --calcite-tile-heading-text-color-hover: Specifies the heading text color of the component on hover.
+ * @prop --calcite-tile-href-icon-color-hover: Specifies the icon color of the component when using a href on hover.
  * @prop --calcite-tile-icon-color: Specifies the icon color in the component.
  * @prop --calcite-tile-selection-icon-color: Specifies the color of the selection icon in the component.
  * @prop --calcite-tile-selection-icon-color-hover: Specifies the color of the selection icon in the component on hover.
@@ -15,13 +16,10 @@
  */
 
 /** Internal variables
-  * --calcite-internal-tile-icon-color
   * --calcite-internal-tile-selection-icon-color
   */
 
 :host {
-  --calcite-internal-tile-icon-color: var(--calcite-color-text-3);
-
   box-shadow: var(--calcite-tile-shadow, var(--calcite-shadow-none));
   box-sizing: border-box;
   color: var(--calcite-tile-text-color, var(--calcite-color-text-3));
@@ -112,11 +110,7 @@
 }
 
 calcite-icon {
-  --calcite-icon-color: var(
-    --calcite-tile-icon-color,
-    var(--calcite-internal-tile-icon-color, var(--calcite-color-text-3))
-  );
-
+  color: var(--calcite-tile-icon-color, var(--calcite-icon-color, var(--calcite-color-text-3)));
   &.selection-icon {
     --calcite-icon-color: var(--calcite-internal-tile-select-icon-color);
   }
@@ -240,9 +234,10 @@ calcite-icon {
 
 :host([href]:focus:not([disabled])),
 :host([href]:hover:not([disabled])) {
-  --calcite-internal-tile-icon-color: var(--calcite-color-text-link);
-  --calcite-ui-icon-color: var(--calcite-color-text-link);
   outline-color: var(--calcite-color-text-link);
+  calcite-icon {
+    color: var(--calcite-tile-href-icon-color-hover, var(--calcite-color-text-link));
+  }
   .container {
     position: relative;
     z-index: var(--calcite-z-index);

From 6f49f28068c6137f5d3d41c69934ca1aec476d98 Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Thu, 10 Oct 2024 11:35:45 -0700
Subject: [PATCH 13/30] removing --calcite-tile-text-color in favor of
 restoring --calcite-tile-description-text-color, syncing up all current css
 properties in tests and demos, commenting out some tests that need fixed in a
 follow-up

---
 .../src/components/tile/tile.e2e.ts           | 29 +++++++++++++++----
 .../src/components/tile/tile.scss             |  5 ++--
 .../src/custom-theme/tile.ts                  |  5 ++--
 .../src/demos/tile-group.html                 |  5 +++-
 4 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/packages/calcite-components/src/components/tile/tile.e2e.ts b/packages/calcite-components/src/components/tile/tile.e2e.ts
index e749fc2551b..92c7269f440 100644
--- a/packages/calcite-components/src/components/tile/tile.e2e.ts
+++ b/packages/calcite-components/src/components/tile/tile.e2e.ts
@@ -244,22 +244,41 @@ describe("calcite-tile", () => {
             shadowSelector: `.${CSS.container}`,
             targetProp: "outlineColor",
           },
+          "--calcite-tile-description-text-color": {
+            shadowSelector: `.${CSS.description}`,
+            targetProp: "color",
+          },
           "--calcite-tile-heading-text-color": {
             shadowSelector: `.${CSS.heading}`,
             targetProp: "color",
           },
+          "--calcite-tile-heading-text-color-hover": {
+            shadowSelector: `.${CSS.heading}`,
+            targetProp: "color",
+            state: "hover",
+          },
+          // "--calcite-tile-href-icon-color-hover": {
+          //   shadowSelector: "calcite-icon",
+          //   targetProp: "color",
+          //   state: "hover",
+          // },
           "--calcite-tile-icon-color": {
             shadowSelector: "calcite-icon",
-            targetProp: "--calcite-icon-color",
+            targetProp: "color",
           },
+          // "--calcite-selection-icon-color": {
+          //   shadowSelector: `.${CSS.container}`,
+          //   targetProp: "--calcite-internal-tile-select-icon-color",
+          // },
+          // "--calcite-selection-icon-color-hover": {
+          //   shadowSelector: `.${CSS.container}`,
+          //   targetProp: "--calcite-internal-tile-select-icon-color",
+          //   state: "hover",
+          // },
           "--calcite-tile-shadow": {
             selector: `calcite-tile`,
             targetProp: "boxShadow",
           },
-          "--calcite-tile-text-color": {
-            selector: `calcite-tile`,
-            targetProp: "color",
-          },
         },
       );
     });
diff --git a/packages/calcite-components/src/components/tile/tile.scss b/packages/calcite-components/src/components/tile/tile.scss
index b7684e272b8..5f1cd9b34ea 100644
--- a/packages/calcite-components/src/components/tile/tile.scss
+++ b/packages/calcite-components/src/components/tile/tile.scss
@@ -5,6 +5,7 @@
  *
  * @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-heading-text-color-hover: Specifies the heading text color of the component on hover.
  * @prop --calcite-tile-href-icon-color-hover: Specifies the icon color of the component when using a href on hover.
@@ -12,7 +13,6 @@
  * @prop --calcite-tile-selection-icon-color: Specifies the color of the selection icon in the component.
  * @prop --calcite-tile-selection-icon-color-hover: Specifies the color of the selection icon in the component on hover.
  * @prop --calcite-tile-shadow: Specifies the shadow around the component.
- * @prop --calcite-tile-text-color: Specifies the text color of the component.
  */
 
 /** Internal variables
@@ -22,7 +22,6 @@
 :host {
   box-shadow: var(--calcite-tile-shadow, var(--calcite-shadow-none));
   box-sizing: border-box;
-  color: var(--calcite-tile-text-color, var(--calcite-color-text-3));
   display: inline-block;
 }
 
@@ -105,6 +104,7 @@
 }
 
 .description {
+  color: var(--calcite-tile-description-text-color, var(--calcite-color-text-3));
   font-weight: var(--calcite-font-weight-regular);
   overflow-wrap: break-word;
 }
@@ -249,7 +249,6 @@ calcite-icon {
 
 :host(:hover:not([disabled])),
 :host([active]:not([disabled])) {
-  color: var(--calcite-tile-text-color, --calcite-color-text-2);
   .heading {
     color: var(--calcite-tile-heading-text-color-hover, var(--calcite-color-text-1));
   }
diff --git a/packages/calcite-components/src/custom-theme/tile.ts b/packages/calcite-components/src/custom-theme/tile.ts
index 0df2b9f2266..2e46bcd3cba 100644
--- a/packages/calcite-components/src/custom-theme/tile.ts
+++ b/packages/calcite-components/src/custom-theme/tile.ts
@@ -3,13 +3,14 @@ import { html } from "../../support/formatting";
 export const tileTokens = {
   calciteTileBackgroundColor: "",
   calciteTileBorderColor: "",
+  calciteTileDescriptionTextColor: "",
   calciteTileHeadingTextColor: "",
+  calciteTileHeadingTextColorHover: "",
+  calciteTileHrefIconColorHover: "",
   calciteTileIconColor: "",
   calciteTileSelectionIconColor: "",
   calciteTileSelectionIconColorHover: "",
   calciteTileShadow: "",
-  calciteTileTextColor: "",
-  calciteTileTextColorHover: "",
 };
 
 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 c13db0e4a72..0d74bd8d994 100644
--- a/packages/calcite-components/src/demos/tile-group.html
+++ b/packages/calcite-components/src/demos/tile-group.html
@@ -1597,11 +1597,14 @@
         tokens="
         --calcite-tile-background-color,
         --calcite-tile-border-color,
+        --calcite-tile-description-text-color,
         --calcite-tile-heading-text-color,
+        --calcite-tile-heading-text-color-hover,
+        --calcite-tile-href-icon-color-hover,
         --calcite-tile-icon-color,
         --calcite-tile-selection-icon-color,
         --calcite-tile-selection-icon-color-hover,
-        --calcite-tile-text-color"
+        --calcite-tile-shadow"
       >
         <!-- themed single -->
         <div class="parent">

From a30b8529bcaed082986d82b26c4ba226e1429a58 Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Thu, 10 Oct 2024 15:32:20 -0700
Subject: [PATCH 14/30] removing last internal variable, adding missing
 --calcite-tile-description-text-color-hover token with correct fallback,
 refactoring icon selectors to use css classes instead of element selectors,
 fixing heading text hover color, updating tests and demos, adding a link
 token test for heading text and icon hover

---
 .../src/components/tile/tile.e2e.ts           | 52 +++++++++------
 .../src/components/tile/tile.scss             | 63 +++++++++----------
 .../src/custom-theme/tile.ts                  |  1 +
 .../src/demos/tile-group.html                 |  7 ++-
 4 files changed, 71 insertions(+), 52 deletions(-)

diff --git a/packages/calcite-components/src/components/tile/tile.e2e.ts b/packages/calcite-components/src/components/tile/tile.e2e.ts
index 92c7269f440..75bda0720a3 100644
--- a/packages/calcite-components/src/components/tile/tile.e2e.ts
+++ b/packages/calcite-components/src/components/tile/tile.e2e.ts
@@ -248,6 +248,11 @@ describe("calcite-tile", () => {
             shadowSelector: `.${CSS.description}`,
             targetProp: "color",
           },
+          "--calcite-tile-description-text-color-hover": {
+            shadowSelector: `.${CSS.description}`,
+            targetProp: "color",
+            state: "hover",
+          },
           "--calcite-tile-heading-text-color": {
             shadowSelector: `.${CSS.heading}`,
             targetProp: "color",
@@ -257,24 +262,10 @@ describe("calcite-tile", () => {
             targetProp: "color",
             state: "hover",
           },
-          // "--calcite-tile-href-icon-color-hover": {
-          //   shadowSelector: "calcite-icon",
-          //   targetProp: "color",
-          //   state: "hover",
-          // },
           "--calcite-tile-icon-color": {
             shadowSelector: "calcite-icon",
             targetProp: "color",
           },
-          // "--calcite-selection-icon-color": {
-          //   shadowSelector: `.${CSS.container}`,
-          //   targetProp: "--calcite-internal-tile-select-icon-color",
-          // },
-          // "--calcite-selection-icon-color-hover": {
-          //   shadowSelector: `.${CSS.container}`,
-          //   targetProp: "--calcite-internal-tile-select-icon-color",
-          //   state: "hover",
-          // },
           "--calcite-tile-shadow": {
             selector: `calcite-tile`,
             targetProp: "boxShadow",
@@ -296,12 +287,37 @@ describe("calcite-tile", () => {
         `,
         {
           "--calcite-tile-selection-icon-color": {
-            shadowSelector: `calcite-icon.${CSS.selectionIcon}`,
-            targetProp: "--calcite-icon-color",
+            shadowSelector: `.${CSS.selectionIcon}`,
+            targetProp: "color",
           },
           "--calcite-tile-selection-icon-color-hover": {
-            shadowSelector: `calcite-icon.${CSS.selectionIcon}`,
-            targetProp: "--calcite-icon-color",
+            shadowSelector: `.${CSS.selectionIcon}`,
+            targetProp: "color",
+            state: "hover",
+          },
+        },
+      );
+    });
+    describe("link", () => {
+      themed(
+        html`
+          <calcite-tile
+            heading="Tile heading lorem ipsum"
+            description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
+            icon="layers"
+            href="#"
+          >
+          </calcite-tile>
+        `,
+        {
+          "--calcite-tile-heading-text-color-hover": {
+            shadowSelector: `.${CSS.heading}`,
+            targetProp: "color",
+            state: "hover",
+          },
+          "--calcite-tile-href-icon-color-hover": {
+            shadowSelector: "calcite-icon",
+            targetProp: "color",
             state: "hover",
           },
         },
diff --git a/packages/calcite-components/src/components/tile/tile.scss b/packages/calcite-components/src/components/tile/tile.scss
index 5f1cd9b34ea..0d9b53a3cdb 100644
--- a/packages/calcite-components/src/components/tile/tile.scss
+++ b/packages/calcite-components/src/components/tile/tile.scss
@@ -6,6 +6,7 @@
  * @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-description-text-color-hover: Specifies the description text color of the component on hover.
  * @prop --calcite-tile-heading-text-color: Specifies the heading text color of the component.
  * @prop --calcite-tile-heading-text-color-hover: Specifies the heading text color of the component on hover.
  * @prop --calcite-tile-href-icon-color-hover: Specifies the icon color of the component when using a href on hover.
@@ -15,10 +16,6 @@
  * @prop --calcite-tile-shadow: Specifies the shadow around the component.
  */
 
-/** Internal variables
-  * --calcite-internal-tile-selection-icon-color
-  */
-
 :host {
   box-shadow: var(--calcite-tile-shadow, var(--calcite-shadow-none));
   box-sizing: border-box;
@@ -26,8 +23,6 @@
 }
 
 .container {
-  --calcite-internal-tile-select-icon-color: var(--calcite-tile-selection-icon-color, var(--calcite-color-text-3));
-
   background-color: var(--calcite-tile-background-color, var(--calcite-color-foreground-1));
   block-size: var(--calcite-container-size-content-fluid);
   box-sizing: border-box;
@@ -35,6 +30,13 @@
   outline: var(--calcite-border-width-sm, 1px) solid var(--calcite-tile-border-color, var(--calcite-color-border-2));
   user-select: none;
 
+  .icon {
+    color: var(--calcite-tile-icon-color, var(--calcite-icon-color, var(--calcite-color-text-3)));
+  }
+  .selection-icon {
+    color: var(--calcite-tile-selection-icon-color, var(--calcite-color-text-3));
+  }
+
   &.interactive {
     cursor: pointer;
 
@@ -42,11 +44,10 @@
     &:focus,
     &.selected {
       outline-color: var(--calcite-color-brand);
-      --calcite-internal-tile-select-icon-color: var(
-        --calcite-tile-selection-icon-color-hover,
-        var(--calcite-color-brand)
-      );
       position: relative;
+      .selection-icon {
+        color: var(--calcite-tile-selection-icon-color-hover, var(--calcite-color-brand));
+      }
     }
     &.selected {
       z-index: var(--calcite-z-index);
@@ -86,6 +87,12 @@
   overflow-wrap: break-word;
 }
 
+.description {
+  color: var(--calcite-tile-description-text-color, var(--calcite-color-text-3));
+  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;
@@ -103,19 +110,6 @@
   }
 }
 
-.description {
-  color: var(--calcite-tile-description-text-color, var(--calcite-color-text-3));
-  font-weight: var(--calcite-font-weight-regular);
-  overflow-wrap: break-word;
-}
-
-calcite-icon {
-  color: var(--calcite-tile-icon-color, var(--calcite-icon-color, var(--calcite-color-text-3)));
-  &.selection-icon {
-    --calcite-icon-color: var(--calcite-internal-tile-select-icon-color);
-  }
-}
-
 :host([alignment="center"]) {
   .icon {
     align-self: center;
@@ -226,6 +220,16 @@ calcite-icon {
   }
 }
 
+:host(:hover:not([disabled])),
+:host([active]:not([disabled])) {
+  .heading {
+    color: var(--calcite-tile-heading-text-color-hover, var(--calcite-color-text-1));
+  }
+  .description {
+    color: var(--calcite-tile-description-text-color-hover, var(--calcite-color-text-2));
+  }
+}
+
 :host([href]:active:not([disabled])) {
   .container {
     box-shadow: 0 0 0 3px var(--calcite-tile-border-color);
@@ -235,22 +239,15 @@ calcite-icon {
 :host([href]:focus:not([disabled])),
 :host([href]:hover:not([disabled])) {
   outline-color: var(--calcite-color-text-link);
-  calcite-icon {
-    color: var(--calcite-tile-href-icon-color-hover, var(--calcite-color-text-link));
-  }
   .container {
     position: relative;
     z-index: var(--calcite-z-index);
   }
-  .heading {
-    color: var(--calcite-color-text-link);
+  .icon {
+    color: var(--calcite-tile-href-icon-color-hover, var(--calcite-color-text-link));
   }
-}
-
-:host(:hover:not([disabled])),
-:host([active]:not([disabled])) {
   .heading {
-    color: var(--calcite-tile-heading-text-color-hover, var(--calcite-color-text-1));
+    color: var(--calcite-tile-heading-text-color-hover, var(--calcite-color-text-link));
   }
 }
 
diff --git a/packages/calcite-components/src/custom-theme/tile.ts b/packages/calcite-components/src/custom-theme/tile.ts
index 2e46bcd3cba..a65ceb5c882 100644
--- a/packages/calcite-components/src/custom-theme/tile.ts
+++ b/packages/calcite-components/src/custom-theme/tile.ts
@@ -4,6 +4,7 @@ export const tileTokens = {
   calciteTileBackgroundColor: "",
   calciteTileBorderColor: "",
   calciteTileDescriptionTextColor: "",
+  calciteTileDescriptionTextColorHover: "",
   calciteTileHeadingTextColor: "",
   calciteTileHeadingTextColorHover: "",
   calciteTileHrefIconColorHover: "",
diff --git a/packages/calcite-components/src/demos/tile-group.html b/packages/calcite-components/src/demos/tile-group.html
index 0d74bd8d994..253c8ccc328 100644
--- a/packages/calcite-components/src/demos/tile-group.html
+++ b/packages/calcite-components/src/demos/tile-group.html
@@ -1598,6 +1598,7 @@
         --calcite-tile-background-color,
         --calcite-tile-border-color,
         --calcite-tile-description-text-color,
+        --calcite-tile-description-text-color-hover,
         --calcite-tile-heading-text-color,
         --calcite-tile-heading-text-color-hover,
         --calcite-tile-href-icon-color-hover,
@@ -2573,11 +2574,15 @@
         tokens="
         --calcite-tile-background-color,
         --calcite-tile-border-color,
+        --calcite-tile-description-text-color,
+        --calcite-tile-description-text-color-hover,
         --calcite-tile-heading-text-color,
+        --calcite-tile-heading-text-color-hover,
+        --calcite-tile-href-icon-color-hover,
         --calcite-tile-icon-color,
         --calcite-tile-selection-icon-color,
         --calcite-tile-selection-icon-color-hover,
-        --calcite-tile-text-color"
+        --calcite-tile-shadow"
       >
         <div class="parent">
           <div class="child right-aligned-text">themed</div>

From 1700b3ecb8103d415eeaba806c6f2aad9049f9b0 Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Thu, 10 Oct 2024 17:04:13 -0700
Subject: [PATCH 15/30] fixing href hover border

---
 packages/calcite-components/src/components/tile/tile.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/tile/tile.scss b/packages/calcite-components/src/components/tile/tile.scss
index 0d9b53a3cdb..edbb4e9479f 100644
--- a/packages/calcite-components/src/components/tile/tile.scss
+++ b/packages/calcite-components/src/components/tile/tile.scss
@@ -238,8 +238,8 @@
 
 :host([href]:focus:not([disabled])),
 :host([href]:hover:not([disabled])) {
-  outline-color: var(--calcite-color-text-link);
   .container {
+    outline-color: var(--calcite-color-text-link);
     position: relative;
     z-index: var(--calcite-z-index);
   }

From 7713208ff38eae43444200e00102e8534af3bba7 Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Fri, 11 Oct 2024 11:15:42 -0700
Subject: [PATCH 16/30] replacing --calcite-tile-selection-icon-color/hover
 tokens with --calcite-tile-selection-color/hover just like Card does.

---
 .../src/components/tile/tile.e2e.ts           | 32 +++++++++++++++++--
 .../src/components/tile/tile.scss             | 14 ++++----
 .../src/custom-theme/tile.ts                  |  4 +--
 .../src/demos/tile-group.html                 |  8 ++---
 4 files changed, 41 insertions(+), 17 deletions(-)

diff --git a/packages/calcite-components/src/components/tile/tile.e2e.ts b/packages/calcite-components/src/components/tile/tile.e2e.ts
index 75bda0720a3..a58a8146461 100644
--- a/packages/calcite-components/src/components/tile/tile.e2e.ts
+++ b/packages/calcite-components/src/components/tile/tile.e2e.ts
@@ -273,7 +273,7 @@ describe("calcite-tile", () => {
         },
       );
     });
-    describe("single selection", () => {
+    describe("single selection with icon", () => {
       themed(
         html`
           <calcite-tile
@@ -286,11 +286,11 @@ describe("calcite-tile", () => {
           </calcite-tile>
         `,
         {
-          "--calcite-tile-selection-icon-color": {
+          "--calcite-tile-selection-color": {
             shadowSelector: `.${CSS.selectionIcon}`,
             targetProp: "color",
           },
-          "--calcite-tile-selection-icon-color-hover": {
+          "--calcite-tile-selection-color-hover": {
             shadowSelector: `.${CSS.selectionIcon}`,
             targetProp: "color",
             state: "hover",
@@ -298,6 +298,32 @@ describe("calcite-tile", () => {
         },
       );
     });
+    // describe("single selection with border appearance", () => {
+    //   themed(
+    //     html`
+    //       <calcite-tile
+    //         heading="Tile heading lorem ipsum"
+    //         description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
+    //         icon="layers"
+    //         interactive
+    //         selection-mode="single"
+    //         selection-appearance="border"
+    //       >
+    //       </calcite-tile>
+    //     `,
+    //     {
+    //       "--calcite-tile-selection-color": {
+    //         shadowSelector: `.${CSS.container}`,
+    //         targetProp: "boxShadow",
+    //       },
+    //       "--calcite-tile-selection-color-hover": {
+    //         shadowSelector: `.${CSS.container}`,
+    //         targetProp: "boxShadow",
+    //         state: "hover",
+    //       },
+    //     },
+    //   );
+    // });
     describe("link", () => {
       themed(
         html`
diff --git a/packages/calcite-components/src/components/tile/tile.scss b/packages/calcite-components/src/components/tile/tile.scss
index edbb4e9479f..2674b9530ee 100644
--- a/packages/calcite-components/src/components/tile/tile.scss
+++ b/packages/calcite-components/src/components/tile/tile.scss
@@ -11,8 +11,8 @@
  * @prop --calcite-tile-heading-text-color-hover: Specifies the heading text color of the component on hover.
  * @prop --calcite-tile-href-icon-color-hover: Specifies the icon color of the component when using a href on hover.
  * @prop --calcite-tile-icon-color: Specifies the icon color in the component.
- * @prop --calcite-tile-selection-icon-color: Specifies the color of the selection icon in the component.
- * @prop --calcite-tile-selection-icon-color-hover: Specifies the color of the selection icon in the component on hover.
+ * @prop --calcite-tile-selection-color: Specifies the color to indicate a component is in a selected state.
+ * @prop --calcite-tile-selection-color-hover: Specifies the color to indicate a component is in a selected state when hovered or focused.
  * @prop --calcite-tile-shadow: Specifies the shadow around the component.
  */
 
@@ -34,7 +34,7 @@
     color: var(--calcite-tile-icon-color, var(--calcite-icon-color, var(--calcite-color-text-3)));
   }
   .selection-icon {
-    color: var(--calcite-tile-selection-icon-color, var(--calcite-color-text-3));
+    color: var(--calcite-tile-selection-color, var(--calcite-color-text-3));
   }
 
   &.interactive {
@@ -46,7 +46,7 @@
       outline-color: var(--calcite-color-brand);
       position: relative;
       .selection-icon {
-        color: var(--calcite-tile-selection-icon-color-hover, var(--calcite-color-brand));
+        color: var(--calcite-tile-selection-color-hover, var(--calcite-color-brand));
       }
     }
     &.selected {
@@ -208,15 +208,13 @@
 
 :host([selection-appearance="border"][layout="horizontal"]) {
   .container.selected {
-    // TODO: Add a component design token here?
-    box-shadow: inset 0 -4px 0 0 var(--calcite-color-brand);
+    box-shadow: inset 0 -4px 0 0 var(--calcite-tile-selection-color, var(--calcite-color-brand));
   }
 }
 
 :host([selection-appearance="border"][layout="vertical"]) {
   .container.selected {
-    // TODO: Add a component design token here?
-    box-shadow: inset 4px 0 0 0 var(--calcite-color-brand);
+    box-shadow: inset 4px 0 0 0 var(--calcite-tile-selection-color, var(--calcite-color-brand));
   }
 }
 
diff --git a/packages/calcite-components/src/custom-theme/tile.ts b/packages/calcite-components/src/custom-theme/tile.ts
index a65ceb5c882..00a36be6ec5 100644
--- a/packages/calcite-components/src/custom-theme/tile.ts
+++ b/packages/calcite-components/src/custom-theme/tile.ts
@@ -9,8 +9,8 @@ export const tileTokens = {
   calciteTileHeadingTextColorHover: "",
   calciteTileHrefIconColorHover: "",
   calciteTileIconColor: "",
-  calciteTileSelectionIconColor: "",
-  calciteTileSelectionIconColorHover: "",
+  calciteTileSelectionColor: "",
+  calciteTileSelectionColorHover: "",
   calciteTileShadow: "",
 };
 
diff --git a/packages/calcite-components/src/demos/tile-group.html b/packages/calcite-components/src/demos/tile-group.html
index 253c8ccc328..1edd5f98a74 100644
--- a/packages/calcite-components/src/demos/tile-group.html
+++ b/packages/calcite-components/src/demos/tile-group.html
@@ -1603,8 +1603,8 @@
         --calcite-tile-heading-text-color-hover,
         --calcite-tile-href-icon-color-hover,
         --calcite-tile-icon-color,
-        --calcite-tile-selection-icon-color,
-        --calcite-tile-selection-icon-color-hover,
+        --calcite-tile-selection-color,
+        --calcite-tile-selection-color-hover,
         --calcite-tile-shadow"
       >
         <!-- themed single -->
@@ -2580,8 +2580,8 @@
         --calcite-tile-heading-text-color-hover,
         --calcite-tile-href-icon-color-hover,
         --calcite-tile-icon-color,
-        --calcite-tile-selection-icon-color,
-        --calcite-tile-selection-icon-color-hover,
+        --calcite-tile-selection-color,
+        --calcite-tile-selection-color-hover,
         --calcite-tile-shadow"
       >
         <div class="parent">

From 0e98c64488e5e3571be908df3ae79c5afbdf8f0d Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Fri, 11 Oct 2024 11:33:59 -0700
Subject: [PATCH 17/30] correcting the assignment of selection colors to use
 the "hover" variable for selected, hover and focus states instead of the base
 one.  This allows for the base color of the selection icon to be controlled
 separately from selected/hover/focus state.  Not sure if this is the right
 thing to do, need to follow up

---
 .../src/components/tile/tile.e2e.ts           | 26 -------------------
 .../src/components/tile/tile.scss             | 14 +++++-----
 2 files changed, 7 insertions(+), 33 deletions(-)

diff --git a/packages/calcite-components/src/components/tile/tile.e2e.ts b/packages/calcite-components/src/components/tile/tile.e2e.ts
index a58a8146461..ca15385fbe6 100644
--- a/packages/calcite-components/src/components/tile/tile.e2e.ts
+++ b/packages/calcite-components/src/components/tile/tile.e2e.ts
@@ -298,32 +298,6 @@ describe("calcite-tile", () => {
         },
       );
     });
-    // describe("single selection with border appearance", () => {
-    //   themed(
-    //     html`
-    //       <calcite-tile
-    //         heading="Tile heading lorem ipsum"
-    //         description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
-    //         icon="layers"
-    //         interactive
-    //         selection-mode="single"
-    //         selection-appearance="border"
-    //       >
-    //       </calcite-tile>
-    //     `,
-    //     {
-    //       "--calcite-tile-selection-color": {
-    //         shadowSelector: `.${CSS.container}`,
-    //         targetProp: "boxShadow",
-    //       },
-    //       "--calcite-tile-selection-color-hover": {
-    //         shadowSelector: `.${CSS.container}`,
-    //         targetProp: "boxShadow",
-    //         state: "hover",
-    //       },
-    //     },
-    //   );
-    // });
     describe("link", () => {
       themed(
         html`
diff --git a/packages/calcite-components/src/components/tile/tile.scss b/packages/calcite-components/src/components/tile/tile.scss
index 2674b9530ee..586b24f201a 100644
--- a/packages/calcite-components/src/components/tile/tile.scss
+++ b/packages/calcite-components/src/components/tile/tile.scss
@@ -11,8 +11,8 @@
  * @prop --calcite-tile-heading-text-color-hover: Specifies the heading text color of the component on hover.
  * @prop --calcite-tile-href-icon-color-hover: Specifies the icon color of the component when using a href on hover.
  * @prop --calcite-tile-icon-color: Specifies the icon color in the component.
- * @prop --calcite-tile-selection-color: Specifies the color to indicate a component is in a selected state.
- * @prop --calcite-tile-selection-color-hover: Specifies the color to indicate a component is in a selected state when hovered or focused.
+ * @prop --calcite-tile-selection-color: Specifies the color of the component's selection indicators (radio, checkbox, border) when using a selection-mode that allows selection.
+ * @prop --calcite-tile-selection-color-hover: Specifies the selected/hover/focus color of the component's selection indicators (radio, checkbox, border) when using a selection-mode that allows selection.
  * @prop --calcite-tile-shadow: Specifies the shadow around the component.
  */
 
@@ -43,7 +43,7 @@
     &:hover,
     &:focus,
     &.selected {
-      outline-color: var(--calcite-color-brand);
+      outline-color: var(--calcite-tile-selection-color-hover, var(--calcite-color-brand));
       position: relative;
       .selection-icon {
         color: var(--calcite-tile-selection-color-hover, var(--calcite-color-brand));
@@ -53,7 +53,7 @@
       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-selection-color-hover, var(--calcite-color-brand));
       z-index: var(--calcite-z-index-sticky);
     }
   }
@@ -196,7 +196,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-selection-color-hover, var(--calcite-color-brand));
     content: "";
     display: block;
     inline-size: 100%;
@@ -208,13 +208,13 @@
 
 :host([selection-appearance="border"][layout="horizontal"]) {
   .container.selected {
-    box-shadow: inset 0 -4px 0 0 var(--calcite-tile-selection-color, var(--calcite-color-brand));
+    box-shadow: inset 0 -4px 0 0 var(--calcite-tile-selection-color-hover, var(--calcite-color-brand));
   }
 }
 
 :host([selection-appearance="border"][layout="vertical"]) {
   .container.selected {
-    box-shadow: inset 4px 0 0 0 var(--calcite-tile-selection-color, var(--calcite-color-brand));
+    box-shadow: inset 4px 0 0 0 var(--calcite-tile-selection-color-hover, var(--calcite-color-brand));
   }
 }
 

From cd6d629123c20991191aeffafaa38b635057f575 Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Fri, 11 Oct 2024 15:17:19 -0700
Subject: [PATCH 18/30] adding more test coverage for uses of selection color. 
 Fixing broken link token test

---
 .../src/components/tile/tile.e2e.ts           | 67 ++++++++++++++++++-
 .../src/components/tile/tile.scss             | 30 ++++-----
 2 files changed, 80 insertions(+), 17 deletions(-)

diff --git a/packages/calcite-components/src/components/tile/tile.e2e.ts b/packages/calcite-components/src/components/tile/tile.e2e.ts
index ca15385fbe6..9107c01347c 100644
--- a/packages/calcite-components/src/components/tile/tile.e2e.ts
+++ b/packages/calcite-components/src/components/tile/tile.e2e.ts
@@ -231,7 +231,6 @@ describe("calcite-tile", () => {
             description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
             icon="layers"
             interactive
-            selected
           >
           </calcite-tile>
         `,
@@ -273,7 +272,7 @@ describe("calcite-tile", () => {
         },
       );
     });
-    describe("single selection with icon", () => {
+    describe("selection color applied to the selection icon", () => {
       themed(
         html`
           <calcite-tile
@@ -298,6 +297,70 @@ describe("calcite-tile", () => {
         },
       );
     });
+    describe("selection color applied to outline on hover", () => {
+      themed(
+        html`
+          <calcite-tile
+            heading="Tile heading lorem ipsum"
+            description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
+            icon="layers"
+            interactive
+            selection-mode="single"
+          >
+          </calcite-tile>
+        `,
+        {
+          "--calcite-tile-selection-color-hover": {
+            shadowSelector: `.${CSS.container}`,
+            targetProp: "outlineColor",
+            state: "hover",
+          },
+        },
+      );
+    });
+    describe("selection color applied to outline on selected item", () => {
+      themed(
+        html`
+          <calcite-tile
+            heading="Tile heading lorem ipsum"
+            description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
+            icon="layers"
+            interactive
+            selection-mode="single"
+            selected
+          >
+          </calcite-tile>
+        `,
+        {
+          "--calcite-tile-selection-color-hover": {
+            shadowSelector: `.${CSS.container}`,
+            targetProp: "outlineColor",
+          },
+        },
+      );
+    });
+    describe(`selection color applied to selected item's border using selection-appearance="border"`, () => {
+      themed(
+        html`
+          <calcite-tile
+            heading="Tile heading lorem ipsum"
+            description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
+            icon="layers"
+            interactive
+            selection-mode="single"
+            selection-appearance="border"
+            selected
+          >
+          </calcite-tile>
+        `,
+        {
+          "--calcite-tile-selection-color-hover": {
+            shadowSelector: `.${CSS.container}`,
+            targetProp: "boxShadow",
+          },
+        },
+      );
+    });
     describe("link", () => {
       themed(
         html`
diff --git a/packages/calcite-components/src/components/tile/tile.scss b/packages/calcite-components/src/components/tile/tile.scss
index 586b24f201a..26e93551ae0 100644
--- a/packages/calcite-components/src/components/tile/tile.scss
+++ b/packages/calcite-components/src/components/tile/tile.scss
@@ -218,6 +218,21 @@
   }
 }
 
+:host([href]:focus:not([disabled])),
+:host([href]:hover:not([disabled])) {
+  .container {
+    outline-color: var(--calcite-color-text-link);
+    position: relative;
+    z-index: var(--calcite-z-index);
+  }
+  .icon {
+    color: var(--calcite-tile-href-icon-color-hover, var(--calcite-color-text-link));
+  }
+  .heading {
+    color: var(--calcite-tile-heading-text-color-hover, var(--calcite-color-text-link));
+  }
+}
+
 :host(:hover:not([disabled])),
 :host([active]:not([disabled])) {
   .heading {
@@ -234,21 +249,6 @@
   }
 }
 
-:host([href]:focus:not([disabled])),
-:host([href]:hover:not([disabled])) {
-  .container {
-    outline-color: var(--calcite-color-text-link);
-    position: relative;
-    z-index: var(--calcite-z-index);
-  }
-  .icon {
-    color: var(--calcite-tile-href-icon-color-hover, var(--calcite-color-text-link));
-  }
-  .heading {
-    color: var(--calcite-tile-heading-text-color-hover, var(--calcite-color-text-link));
-  }
-}
-
 :host([embed]) {
   .container {
     padding: 0;

From 3abb81976a39d5c5327147973bee75ad4a0a54a1 Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Mon, 21 Oct 2024 16:37:36 -0700
Subject: [PATCH 19/30] removing --calcite-tile-description-text-color-hover

---
 .../src/components/tile/tile.e2e.ts           |  5 -----
 .../src/components/tile/tile.scss             | 21 +++++++++----------
 .../src/demos/tile-group.html                 |  2 --
 3 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/packages/calcite-components/src/components/tile/tile.e2e.ts b/packages/calcite-components/src/components/tile/tile.e2e.ts
index 9107c01347c..c07ef0382da 100644
--- a/packages/calcite-components/src/components/tile/tile.e2e.ts
+++ b/packages/calcite-components/src/components/tile/tile.e2e.ts
@@ -247,11 +247,6 @@ describe("calcite-tile", () => {
             shadowSelector: `.${CSS.description}`,
             targetProp: "color",
           },
-          "--calcite-tile-description-text-color-hover": {
-            shadowSelector: `.${CSS.description}`,
-            targetProp: "color",
-            state: "hover",
-          },
           "--calcite-tile-heading-text-color": {
             shadowSelector: `.${CSS.heading}`,
             targetProp: "color",
diff --git a/packages/calcite-components/src/components/tile/tile.scss b/packages/calcite-components/src/components/tile/tile.scss
index 26e93551ae0..e0eabf0f17f 100644
--- a/packages/calcite-components/src/components/tile/tile.scss
+++ b/packages/calcite-components/src/components/tile/tile.scss
@@ -6,7 +6,6 @@
  * @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-description-text-color-hover: Specifies the description text color of the component on hover.
  * @prop --calcite-tile-heading-text-color: Specifies the heading text color of the component.
  * @prop --calcite-tile-heading-text-color-hover: Specifies the heading text color of the component on hover.
  * @prop --calcite-tile-href-icon-color-hover: Specifies the icon color of the component when using a href on hover.
@@ -218,6 +217,16 @@
   }
 }
 
+: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-description-text-color, var(--calcite-color-text-2));
+  }
+}
+
 :host([href]:focus:not([disabled])),
 :host([href]:hover:not([disabled])) {
   .container {
@@ -233,16 +242,6 @@
   }
 }
 
-:host(:hover:not([disabled])),
-:host([active]:not([disabled])) {
-  .heading {
-    color: var(--calcite-tile-heading-text-color-hover, var(--calcite-color-text-1));
-  }
-  .description {
-    color: var(--calcite-tile-description-text-color-hover, var(--calcite-color-text-2));
-  }
-}
-
 :host([href]:active:not([disabled])) {
   .container {
     box-shadow: 0 0 0 3px var(--calcite-tile-border-color);
diff --git a/packages/calcite-components/src/demos/tile-group.html b/packages/calcite-components/src/demos/tile-group.html
index 1edd5f98a74..673ab84b3fb 100644
--- a/packages/calcite-components/src/demos/tile-group.html
+++ b/packages/calcite-components/src/demos/tile-group.html
@@ -1598,7 +1598,6 @@
         --calcite-tile-background-color,
         --calcite-tile-border-color,
         --calcite-tile-description-text-color,
-        --calcite-tile-description-text-color-hover,
         --calcite-tile-heading-text-color,
         --calcite-tile-heading-text-color-hover,
         --calcite-tile-href-icon-color-hover,
@@ -2575,7 +2574,6 @@
         --calcite-tile-background-color,
         --calcite-tile-border-color,
         --calcite-tile-description-text-color,
-        --calcite-tile-description-text-color-hover,
         --calcite-tile-heading-text-color,
         --calcite-tile-heading-text-color-hover,
         --calcite-tile-href-icon-color-hover,

From c28402806f00da508e8f81d712002d282e15b66a Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Mon, 21 Oct 2024 16:49:20 -0700
Subject: [PATCH 20/30] removing --calcite-tile-heading-text-color-hover

---
 .../src/components/tile/tile.e2e.ts           | 37 ++++++++++++++++---
 .../src/components/tile/tile.scss             |  3 +-
 .../src/demos/tile-group.html                 |  2 -
 3 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/packages/calcite-components/src/components/tile/tile.e2e.ts b/packages/calcite-components/src/components/tile/tile.e2e.ts
index c07ef0382da..46a3fd98b36 100644
--- a/packages/calcite-components/src/components/tile/tile.e2e.ts
+++ b/packages/calcite-components/src/components/tile/tile.e2e.ts
@@ -251,11 +251,6 @@ describe("calcite-tile", () => {
             shadowSelector: `.${CSS.heading}`,
             targetProp: "color",
           },
-          "--calcite-tile-heading-text-color-hover": {
-            shadowSelector: `.${CSS.heading}`,
-            targetProp: "color",
-            state: "hover",
-          },
           "--calcite-tile-icon-color": {
             shadowSelector: "calcite-icon",
             targetProp: "color",
@@ -267,6 +262,31 @@ describe("calcite-tile", () => {
         },
       );
     });
+    describe("default changing text colors on hover", () => {
+      themed(
+        html`
+          <calcite-tile
+            heading="Tile heading lorem ipsum"
+            description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
+            icon="layers"
+            interactive
+          >
+          </calcite-tile>
+        `,
+        {
+          "--calcite-tile-description-text-color": {
+            shadowSelector: `.${CSS.description}`,
+            targetProp: "color",
+            state: "hover",
+          },
+          "--calcite-tile-heading-text-color": {
+            shadowSelector: `.${CSS.heading}`,
+            targetProp: "color",
+            state: "hover",
+          },
+        },
+      );
+    });
     describe("selection color applied to the selection icon", () => {
       themed(
         html`
@@ -368,11 +388,16 @@ describe("calcite-tile", () => {
           </calcite-tile>
         `,
         {
-          "--calcite-tile-heading-text-color-hover": {
+          "--calcite-tile-heading-text-color": {
             shadowSelector: `.${CSS.heading}`,
             targetProp: "color",
             state: "hover",
           },
+          "--calcite-tile-description-text-color": {
+            shadowSelector: `.${CSS.description}`,
+            targetProp: "color",
+            state: "hover",
+          },
           "--calcite-tile-href-icon-color-hover": {
             shadowSelector: "calcite-icon",
             targetProp: "color",
diff --git a/packages/calcite-components/src/components/tile/tile.scss b/packages/calcite-components/src/components/tile/tile.scss
index e0eabf0f17f..077ea44624d 100644
--- a/packages/calcite-components/src/components/tile/tile.scss
+++ b/packages/calcite-components/src/components/tile/tile.scss
@@ -7,7 +7,6 @@
  * @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-heading-text-color-hover: Specifies the heading text color of the component on hover.
  * @prop --calcite-tile-href-icon-color-hover: Specifies the icon color of the component when using a href on hover.
  * @prop --calcite-tile-icon-color: Specifies the icon color in the component.
  * @prop --calcite-tile-selection-color: Specifies the color of the component's selection indicators (radio, checkbox, border) when using a selection-mode that allows selection.
@@ -238,7 +237,7 @@
     color: var(--calcite-tile-href-icon-color-hover, var(--calcite-color-text-link));
   }
   .heading {
-    color: var(--calcite-tile-heading-text-color-hover, var(--calcite-color-text-link));
+    color: var(--calcite-tile-heading-text-color, var(--calcite-color-text-link));
   }
 }
 
diff --git a/packages/calcite-components/src/demos/tile-group.html b/packages/calcite-components/src/demos/tile-group.html
index 673ab84b3fb..728b39e911d 100644
--- a/packages/calcite-components/src/demos/tile-group.html
+++ b/packages/calcite-components/src/demos/tile-group.html
@@ -1599,7 +1599,6 @@
         --calcite-tile-border-color,
         --calcite-tile-description-text-color,
         --calcite-tile-heading-text-color,
-        --calcite-tile-heading-text-color-hover,
         --calcite-tile-href-icon-color-hover,
         --calcite-tile-icon-color,
         --calcite-tile-selection-color,
@@ -2575,7 +2574,6 @@
         --calcite-tile-border-color,
         --calcite-tile-description-text-color,
         --calcite-tile-heading-text-color,
-        --calcite-tile-heading-text-color-hover,
         --calcite-tile-href-icon-color-hover,
         --calcite-tile-icon-color,
         --calcite-tile-selection-color,

From 49a7e9fcccc9110c753d9c335fa00cad1fcaf7a3 Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Tue, 22 Oct 2024 11:01:06 -0700
Subject: [PATCH 21/30] removing --calcite-tile-href-icon-color-hover in favor
 of using --calcite-tile-icon-color with an href attribute + hover css
 selector

---
 packages/calcite-components/src/components/tile/tile.e2e.ts | 6 +++---
 packages/calcite-components/src/components/tile/tile.scss   | 3 +--
 packages/calcite-components/src/demos/tile-group.html       | 2 --
 3 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/calcite-components/src/components/tile/tile.e2e.ts b/packages/calcite-components/src/components/tile/tile.e2e.ts
index 46a3fd98b36..ce88c27ae9f 100644
--- a/packages/calcite-components/src/components/tile/tile.e2e.ts
+++ b/packages/calcite-components/src/components/tile/tile.e2e.ts
@@ -252,7 +252,7 @@ describe("calcite-tile", () => {
             targetProp: "color",
           },
           "--calcite-tile-icon-color": {
-            shadowSelector: "calcite-icon",
+            shadowSelector: `.${CSS.icon}`,
             targetProp: "color",
           },
           "--calcite-tile-shadow": {
@@ -398,8 +398,8 @@ describe("calcite-tile", () => {
             targetProp: "color",
             state: "hover",
           },
-          "--calcite-tile-href-icon-color-hover": {
-            shadowSelector: "calcite-icon",
+          "--calcite-tile-icon-color": {
+            shadowSelector: `.${CSS.icon}`,
             targetProp: "color",
             state: "hover",
           },
diff --git a/packages/calcite-components/src/components/tile/tile.scss b/packages/calcite-components/src/components/tile/tile.scss
index 077ea44624d..d0ab3d88684 100644
--- a/packages/calcite-components/src/components/tile/tile.scss
+++ b/packages/calcite-components/src/components/tile/tile.scss
@@ -7,7 +7,6 @@
  * @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-href-icon-color-hover: Specifies the icon color of the component when using a href on hover.
  * @prop --calcite-tile-icon-color: Specifies the icon color in the component.
  * @prop --calcite-tile-selection-color: Specifies the color of the component's selection indicators (radio, checkbox, border) when using a selection-mode that allows selection.
  * @prop --calcite-tile-selection-color-hover: Specifies the selected/hover/focus color of the component's selection indicators (radio, checkbox, border) when using a selection-mode that allows selection.
@@ -234,7 +233,7 @@
     z-index: var(--calcite-z-index);
   }
   .icon {
-    color: var(--calcite-tile-href-icon-color-hover, var(--calcite-color-text-link));
+    color: var(--calcite-tile-icon-color, var(--calcite-color-text-link));
   }
   .heading {
     color: var(--calcite-tile-heading-text-color, var(--calcite-color-text-link));
diff --git a/packages/calcite-components/src/demos/tile-group.html b/packages/calcite-components/src/demos/tile-group.html
index 728b39e911d..d41e012b84c 100644
--- a/packages/calcite-components/src/demos/tile-group.html
+++ b/packages/calcite-components/src/demos/tile-group.html
@@ -1599,7 +1599,6 @@
         --calcite-tile-border-color,
         --calcite-tile-description-text-color,
         --calcite-tile-heading-text-color,
-        --calcite-tile-href-icon-color-hover,
         --calcite-tile-icon-color,
         --calcite-tile-selection-color,
         --calcite-tile-selection-color-hover,
@@ -2574,7 +2573,6 @@
         --calcite-tile-border-color,
         --calcite-tile-description-text-color,
         --calcite-tile-heading-text-color,
-        --calcite-tile-href-icon-color-hover,
         --calcite-tile-icon-color,
         --calcite-tile-selection-color,
         --calcite-tile-selection-color-hover,

From b4b759ea5b8216be34285892af46a4f31753b666 Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Wed, 23 Oct 2024 11:37:18 -0700
Subject: [PATCH 22/30] adding --calcite-tile-corner-radius

---
 .../calcite-components/src/components.d.ts    | 100 ++++++++++++++++++
 .../src/components/tile/tile.e2e.ts           |   4 +
 .../src/components/tile/tile.scss             |   2 +
 3 files changed, 106 insertions(+)

diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index f1aa432bc3b..1368c6f59f9 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 { DateLocaleData } from "./components/date-picker/utils";
 import { HoverRange } from "./utils/date";
+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 { DateLocaleData } from "./components/date-picker/utils";
 export { HoverRange } from "./utils/date";
+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 ce88c27ae9f..fd76c872d42 100644
--- a/packages/calcite-components/src/components/tile/tile.e2e.ts
+++ b/packages/calcite-components/src/components/tile/tile.e2e.ts
@@ -243,6 +243,10 @@ describe("calcite-tile", () => {
             shadowSelector: `.${CSS.container}`,
             targetProp: "outlineColor",
           },
+          "--calcite-tile-corner-radius": {
+            shadowSelector: `.${CSS.container}`,
+            targetProp: "borderRadius",
+          },
           "--calcite-tile-description-text-color": {
             shadowSelector: `.${CSS.description}`,
             targetProp: "color",
diff --git a/packages/calcite-components/src/components/tile/tile.scss b/packages/calcite-components/src/components/tile/tile.scss
index d0ab3d88684..9602c9da1ec 100644
--- a/packages/calcite-components/src/components/tile/tile.scss
+++ b/packages/calcite-components/src/components/tile/tile.scss
@@ -5,6 +5,7 @@
  *
  * @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-corner-radius: Specifies the component's corner radius.
  * @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-icon-color: Specifies the icon color in the component.
@@ -22,6 +23,7 @@
 .container {
   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-sharp));
   box-sizing: border-box;
   inline-size: var(--calcite-container-size-content-fluid);
   outline: var(--calcite-border-width-sm, 1px) solid var(--calcite-tile-border-color, var(--calcite-color-border-2));

From 4122e7c3f055d5e750b8e9a83607f9b4aa71b603 Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Wed, 23 Oct 2024 13:09:44 -0700
Subject: [PATCH 23/30] adding accent-color-press variable, text-color
 variable, removing description-text-color, icon-color and selection-color
 variables based on guidance from Ali

---
 .../src/components/tile/tile.e2e.ts           | 305 +++++++++++-------
 .../src/components/tile/tile.scss             |  29 +-
 .../src/custom-theme/tile.ts                  |  10 +-
 .../src/demos/tile-group.html                 |  14 +-
 4 files changed, 210 insertions(+), 148 deletions(-)

diff --git a/packages/calcite-components/src/components/tile/tile.e2e.ts b/packages/calcite-components/src/components/tile/tile.e2e.ts
index fd76c872d42..de8110b1fc0 100644
--- a/packages/calcite-components/src/components/tile/tile.e2e.ts
+++ b/packages/calcite-components/src/components/tile/tile.e2e.ts
@@ -247,18 +247,14 @@ describe("calcite-tile", () => {
             shadowSelector: `.${CSS.container}`,
             targetProp: "borderRadius",
           },
-          "--calcite-tile-description-text-color": {
-            shadowSelector: `.${CSS.description}`,
+          "--calcite-tile-text-color": {
+            shadowSelector: `.${CSS.container}`,
             targetProp: "color",
           },
           "--calcite-tile-heading-text-color": {
             shadowSelector: `.${CSS.heading}`,
             targetProp: "color",
           },
-          "--calcite-tile-icon-color": {
-            shadowSelector: `.${CSS.icon}`,
-            targetProp: "color",
-          },
           "--calcite-tile-shadow": {
             selector: `calcite-tile`,
             targetProp: "boxShadow",
@@ -278,8 +274,8 @@ describe("calcite-tile", () => {
           </calcite-tile>
         `,
         {
-          "--calcite-tile-description-text-color": {
-            shadowSelector: `.${CSS.description}`,
+          "--calcite-tile-text-color": {
+            shadowSelector: `.${CSS.container}`,
             targetProp: "color",
             state: "hover",
           },
@@ -291,124 +287,201 @@ describe("calcite-tile", () => {
         },
       );
     });
-    describe("selection color applied to the selection icon", () => {
-      themed(
-        html`
-          <calcite-tile
-            heading="Tile heading lorem ipsum"
-            description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
-            icon="layers"
-            interactive
-            selection-mode="single"
-          >
-          </calcite-tile>
-        `,
-        {
-          "--calcite-tile-selection-color": {
-            shadowSelector: `.${CSS.selectionIcon}`,
-            targetProp: "color",
+    describe("--calcite-tile-text-color", () => {
+      describe("applies to the selection icon", () => {
+        themed(
+          html`
+            <calcite-tile
+              heading="Tile heading lorem ipsum"
+              description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
+              icon="layers"
+              interactive
+              selection-mode="single"
+            >
+            </calcite-tile>
+          `,
+          {
+            "--calcite-tile-text-color": {
+              shadowSelector: `.${CSS.selectionIcon}`,
+              targetProp: "color",
+            },
           },
-          "--calcite-tile-selection-color-hover": {
-            shadowSelector: `.${CSS.selectionIcon}`,
-            targetProp: "color",
-            state: "hover",
+        );
+      });
+      describe("applies to the icon", () => {
+        themed(
+          html`
+            <calcite-tile
+              heading="Tile heading lorem ipsum"
+              description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
+              icon="layers"
+              interactive
+            >
+            </calcite-tile>
+          `,
+          {
+            "--calcite-tile-text-color": {
+              shadowSelector: `.${CSS.icon}`,
+              targetProp: "color",
+            },
           },
-        },
-      );
+        );
+      });
     });
-    describe("selection color applied to outline on hover", () => {
-      themed(
-        html`
-          <calcite-tile
-            heading="Tile heading lorem ipsum"
-            description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
-            icon="layers"
-            interactive
-            selection-mode="single"
-          >
-          </calcite-tile>
-        `,
-        {
-          "--calcite-tile-selection-color-hover": {
-            shadowSelector: `.${CSS.container}`,
-            targetProp: "outlineColor",
-            state: "hover",
+    describe("--calcite-tile-accent-color-press", () => {
+      describe("applies to border on hover", () => {
+        themed(
+          html`
+            <calcite-tile
+              heading="Tile heading lorem ipsum"
+              description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
+              icon="layers"
+              interactive
+              selection-mode="single"
+            >
+            </calcite-tile>
+          `,
+          {
+            "--calcite-tile-accent-color-press": {
+              shadowSelector: `.${CSS.container}`,
+              targetProp: "outlineColor",
+              state: "hover",
+            },
           },
-        },
-      );
-    });
-    describe("selection color applied to outline on selected item", () => {
-      themed(
-        html`
-          <calcite-tile
-            heading="Tile heading lorem ipsum"
-            description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
-            icon="layers"
-            interactive
-            selection-mode="single"
-            selected
-          >
-          </calcite-tile>
-        `,
-        {
-          "--calcite-tile-selection-color-hover": {
-            shadowSelector: `.${CSS.container}`,
-            targetProp: "outlineColor",
+        );
+      });
+      describe("applies to selection icon on hover", () => {
+        themed(
+          html`
+            <calcite-tile
+              heading="Tile heading lorem ipsum"
+              description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
+              icon="layers"
+              interactive
+              selection-mode="single"
+            >
+            </calcite-tile>
+          `,
+          {
+            "--calcite-tile-accent-color-press": {
+              shadowSelector: `.${CSS.selectionIcon}`,
+              targetProp: "outlineColor",
+              state: "hover",
+            },
           },
-        },
-      );
-    });
-    describe(`selection color applied to selected item's border using selection-appearance="border"`, () => {
-      themed(
-        html`
-          <calcite-tile
-            heading="Tile heading lorem ipsum"
-            description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
-            icon="layers"
-            interactive
-            selection-mode="single"
-            selection-appearance="border"
-            selected
-          >
-          </calcite-tile>
-        `,
-        {
-          "--calcite-tile-selection-color-hover": {
-            shadowSelector: `.${CSS.container}`,
-            targetProp: "boxShadow",
+        );
+      });
+      describe("applies to selected item's border", () => {
+        themed(
+          html`
+            <calcite-tile
+              heading="Tile heading lorem ipsum"
+              description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
+              icon="layers"
+              interactive
+              selection-mode="single"
+              selected
+            >
+            </calcite-tile>
+          `,
+          {
+            "--calcite-tile-accent-color-press": {
+              shadowSelector: `.${CSS.container}`,
+              targetProp: "outlineColor",
+            },
           },
-        },
-      );
+        );
+      });
+      describe("applies to selected item's selection icon", () => {
+        themed(
+          html`
+            <calcite-tile
+              heading="Tile heading lorem ipsum"
+              description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
+              icon="layers"
+              interactive
+              selection-mode="single"
+              selected
+            >
+            </calcite-tile>
+          `,
+          {
+            "--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
+              heading="Tile heading lorem ipsum"
+              description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
+              icon="layers"
+              interactive
+              selection-mode="single"
+              selection-appearance="border"
+              selected
+            >
+            </calcite-tile>
+          `,
+          {
+            "--calcite-tile-accent-color-press": {
+              shadowSelector: `.${CSS.container}`,
+              targetProp: "boxShadow",
+            },
+          },
+        );
+      });
     });
     describe("link", () => {
-      themed(
-        html`
-          <calcite-tile
-            heading="Tile heading lorem ipsum"
-            description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
-            icon="layers"
-            href="#"
-          >
-          </calcite-tile>
-        `,
-        {
-          "--calcite-tile-heading-text-color": {
-            shadowSelector: `.${CSS.heading}`,
-            targetProp: "color",
-            state: "hover",
+      describe("text colors", () => {
+        themed(
+          html`
+            <calcite-tile
+              heading="Tile heading lorem ipsum"
+              description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
+              icon="layers"
+              href="#"
+            >
+            </calcite-tile>
+          `,
+          {
+            "--calcite-tile-heading-text-color": {
+              shadowSelector: `.${CSS.heading}`,
+              targetProp: "color",
+              state: "hover",
+            },
+            "--calcite-tile-text-color": {
+              shadowSelector: `.${CSS.container}`,
+              targetProp: "color",
+              state: "hover",
+            },
           },
-          "--calcite-tile-description-text-color": {
-            shadowSelector: `.${CSS.description}`,
-            targetProp: "color",
-            state: "hover",
+        );
+      });
+      describe("icon color", () => {
+        themed(
+          html`
+            <calcite-tile
+              heading="Tile heading lorem ipsum"
+              description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
+              icon="layers"
+              href="#"
+            >
+            </calcite-tile>
+          `,
+          {
+            "--calcite-tile-text-color": {
+              shadowSelector: `.${CSS.icon}`,
+              targetProp: "color",
+              state: "hover",
+            },
           },
-          "--calcite-tile-icon-color": {
-            shadowSelector: `.${CSS.icon}`,
-            targetProp: "color",
-            state: "hover",
-          },
-        },
-      );
+        );
+      });
     });
   });
 });
diff --git a/packages/calcite-components/src/components/tile/tile.scss b/packages/calcite-components/src/components/tile/tile.scss
index 9602c9da1ec..0475b8efaaf 100644
--- a/packages/calcite-components/src/components/tile/tile.scss
+++ b/packages/calcite-components/src/components/tile/tile.scss
@@ -3,15 +3,13 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
+ * @prop --calcite-tile-accent-color-press: Specifies the color of the component's selection indicators (radio, checkbox, border).
  * @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-corner-radius: Specifies the component's corner radius.
- * @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-icon-color: Specifies the icon color in the component.
- * @prop --calcite-tile-selection-color: Specifies the color of the component's selection indicators (radio, checkbox, border) when using a selection-mode that allows selection.
- * @prop --calcite-tile-selection-color-hover: Specifies the selected/hover/focus color of the component's selection indicators (radio, checkbox, border) when using a selection-mode that allows selection.
  * @prop --calcite-tile-shadow: Specifies the shadow around the component.
+ * @prop --calcite-tile-text-color: Specifies the text color of the component, which affects description and icon, but not the heading text.
  */
 
 :host {
@@ -25,15 +23,13 @@
   block-size: var(--calcite-container-size-content-fluid);
   border-radius: var(--calcite-tile-corner-radius, var(--calcite-corner-radius-sharp));
   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, var(--calcite-color-border-2));
   user-select: none;
 
-  .icon {
-    color: var(--calcite-tile-icon-color, var(--calcite-icon-color, var(--calcite-color-text-3)));
-  }
   .selection-icon {
-    color: var(--calcite-tile-selection-color, var(--calcite-color-text-3));
+    color: var(--calcite-tile-text-color, var(--calcite-color-text-3));
   }
 
   &.interactive {
@@ -42,17 +38,17 @@
     &:hover,
     &:focus,
     &.selected {
-      outline-color: var(--calcite-tile-selection-color-hover, var(--calcite-color-brand));
+      outline-color: var(--calcite-tile-accent-color-press, var(--calcite-color-brand));
       position: relative;
       .selection-icon {
-        color: var(--calcite-tile-selection-color-hover, 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-tile-selection-color-hover, 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);
     }
   }
@@ -87,7 +83,6 @@
 }
 
 .description {
-  color: var(--calcite-tile-description-text-color, var(--calcite-color-text-3));
   font-weight: var(--calcite-font-weight-regular);
   overflow-wrap: break-word;
 }
@@ -195,7 +190,7 @@
 :host([selection-appearance="border"][layout="vertical"]) {
   .container.selected:focus::before {
     block-size: 100%;
-    box-shadow: inset 0 0 0 1px var(--calcite-tile-selection-color-hover, 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%;
@@ -207,13 +202,13 @@
 
 :host([selection-appearance="border"][layout="horizontal"]) {
   .container.selected {
-    box-shadow: inset 0 -4px 0 0 var(--calcite-tile-selection-color-hover, 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-tile-selection-color-hover, var(--calcite-color-brand));
+    box-shadow: inset 4px 0 0 0 var(--calcite-tile-accent-color-press, var(--calcite-color-brand));
   }
 }
 
@@ -223,7 +218,7 @@
     color: var(--calcite-tile-heading-text-color, var(--calcite-color-text-1));
   }
   .description {
-    color: var(--calcite-tile-description-text-color, var(--calcite-color-text-2));
+    color: var(--calcite-tile-text-color, var(--calcite-color-text-2));
   }
 }
 
@@ -235,7 +230,7 @@
     z-index: var(--calcite-z-index);
   }
   .icon {
-    color: var(--calcite-tile-icon-color, var(--calcite-color-text-link));
+    color: var(--calcite-tile-text-color, var(--calcite-color-text-link));
   }
   .heading {
     color: var(--calcite-tile-heading-text-color, var(--calcite-color-text-link));
diff --git a/packages/calcite-components/src/custom-theme/tile.ts b/packages/calcite-components/src/custom-theme/tile.ts
index 00a36be6ec5..c0d32321912 100644
--- a/packages/calcite-components/src/custom-theme/tile.ts
+++ b/packages/calcite-components/src/custom-theme/tile.ts
@@ -1,17 +1,13 @@
 import { html } from "../../support/formatting";
 
 export const tileTokens = {
+  calciteTileAccentColorPress: "",
   calciteTileBackgroundColor: "",
   calciteTileBorderColor: "",
-  calciteTileDescriptionTextColor: "",
-  calciteTileDescriptionTextColorHover: "",
+  calciteTileCornerRadius: "",
   calciteTileHeadingTextColor: "",
-  calciteTileHeadingTextColorHover: "",
-  calciteTileHrefIconColorHover: "",
-  calciteTileIconColor: "",
-  calciteTileSelectionColor: "",
-  calciteTileSelectionColorHover: "",
   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 d41e012b84c..7036090ecaa 100644
--- a/packages/calcite-components/src/demos/tile-group.html
+++ b/packages/calcite-components/src/demos/tile-group.html
@@ -1595,14 +1595,13 @@
       <!-- themed -->
       <demo-theme
         tokens="
+        --calcite-tile-accent-color-press,
         --calcite-tile-background-color,
         --calcite-tile-border-color,
-        --calcite-tile-description-text-color,
+        --calcite-tile-corner-radius,
         --calcite-tile-heading-text-color,
-        --calcite-tile-icon-color,
-        --calcite-tile-selection-color,
-        --calcite-tile-selection-color-hover,
         --calcite-tile-shadow"
+        --calcite-tile-text-color,
       >
         <!-- themed single -->
         <div class="parent">
@@ -2569,14 +2568,13 @@
       <!-- themed -->
       <demo-theme
         tokens="
+        --calcite-tile-accent-color-press,
         --calcite-tile-background-color,
         --calcite-tile-border-color,
-        --calcite-tile-description-text-color,
+        --calcite-tile-corner-radius,
         --calcite-tile-heading-text-color,
-        --calcite-tile-icon-color,
-        --calcite-tile-selection-color,
-        --calcite-tile-selection-color-hover,
         --calcite-tile-shadow"
+        --calcite-tile-text-color,
       >
         <div class="parent">
           <div class="child right-aligned-text">themed</div>

From 172eb2cafcfe30af553f8a5a86d5076490a464de Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Thu, 24 Oct 2024 14:41:18 -0700
Subject: [PATCH 24/30] fixing selection-mode="none" to match visual matrix

---
 .../src/components/tile/tile.e2e.ts           | 44 +++++++++++++++++++
 .../src/components/tile/tile.scss             |  8 ++--
 2 files changed, 49 insertions(+), 3 deletions(-)

diff --git a/packages/calcite-components/src/components/tile/tile.e2e.ts b/packages/calcite-components/src/components/tile/tile.e2e.ts
index de8110b1fc0..32922af73c7 100644
--- a/packages/calcite-components/src/components/tile/tile.e2e.ts
+++ b/packages/calcite-components/src/components/tile/tile.e2e.ts
@@ -435,6 +435,50 @@ describe("calcite-tile", () => {
           },
         );
       });
+      describe(`selection-mode="none"`, () => {
+        describe("applies --calcite-tile-border-color when idle and selected attribute is present", () => {
+          themed(
+            html`
+              <calcite-tile
+                heading="Tile heading lorem ipsum"
+                description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
+                icon="layers"
+                interactive
+                selection-mode="none"
+                selected
+              >
+              </calcite-tile>
+            `,
+            {
+              "--calcite-tile-border-color": {
+                shadowSelector: `.${CSS.container}`,
+                targetProp: "outlineColor",
+              },
+            },
+          );
+        });
+        describe("applies --calcite-tile-border-color when hovered", () => {
+          themed(
+            html`
+              <calcite-tile
+                heading="Tile heading lorem ipsum"
+                description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
+                icon="layers"
+                interactive
+                selection-mode="none"
+              >
+              </calcite-tile>
+            `,
+            {
+              "--calcite-tile-border-color": {
+                shadowSelector: `.${CSS.container}`,
+                targetProp: "outlineColor",
+                state: "hover",
+              },
+            },
+          );
+        });
+      });
     });
     describe("link", () => {
       describe("text colors", () => {
diff --git a/packages/calcite-components/src/components/tile/tile.scss b/packages/calcite-components/src/components/tile/tile.scss
index 0475b8efaaf..aae4dd56713 100644
--- a/packages/calcite-components/src/components/tile/tile.scss
+++ b/packages/calcite-components/src/components/tile/tile.scss
@@ -251,10 +251,12 @@
 
 :host([selection-mode="none"]) {
   .container {
-    outline-color: var(--calcite-tile-border-color, var(--calcite-color-border-2));
+    &: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));
     }
   }
 }

From 3ea5d9ac2dd4a502969052024de44f99c36d134c Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Thu, 24 Oct 2024 16:21:43 -0700
Subject: [PATCH 25/30] Fixing href styling behavior to match visual matrix

---
 .../src/components/tile/tile.e2e.ts           | 64 ++++++++++++++++++-
 .../src/components/tile/tile.scss             |  3 +-
 2 files changed, 64 insertions(+), 3 deletions(-)

diff --git a/packages/calcite-components/src/components/tile/tile.e2e.ts b/packages/calcite-components/src/components/tile/tile.e2e.ts
index 32922af73c7..3900ceaca65 100644
--- a/packages/calcite-components/src/components/tile/tile.e2e.ts
+++ b/packages/calcite-components/src/components/tile/tile.e2e.ts
@@ -481,7 +481,67 @@ describe("calcite-tile", () => {
       });
     });
     describe("link", () => {
-      describe("text colors", () => {
+      describe("--calcite-color-text-link applies to heading text on hover", () => {
+        themed(
+          html`
+            <calcite-tile
+              heading="Tile heading lorem ipsum"
+              description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
+              icon="layers"
+              href="#"
+            >
+            </calcite-tile>
+          `,
+          {
+            "--calcite-color-text-link": {
+              shadowSelector: `.${CSS.heading}`,
+              targetProp: "color",
+              state: "hover",
+            },
+          },
+        );
+      });
+      describe("--calcite-color-text-link applies to icon on hover", () => {
+        themed(
+          html`
+            <calcite-tile
+              heading="Tile heading lorem ipsum"
+              description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
+              icon="layers"
+              href="#"
+            >
+            </calcite-tile>
+          `,
+          {
+            "--calcite-color-text-link": {
+              shadowSelector: `.${CSS.icon}`,
+              targetProp: "color",
+              state: "hover",
+            },
+          },
+        );
+      });
+      describe("--calcite-color-text-link applies to border on hover", () => {
+        themed(
+          html`
+            <calcite-tile
+              heading="Tile heading lorem ipsum"
+              description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
+              icon="layers"
+              href="#"
+            >
+            </calcite-tile>
+          `,
+          {
+            "--calcite-color-text-link": {
+              shadowSelector: `.${CSS.container}`,
+              targetProp: "outlineColor",
+              state: "hover",
+            },
+          },
+        );
+      });
+      describe("tile text-color tokens apply to heading and description on hover", () => {
         themed(
           html`
             <calcite-tile
@@ -506,7 +566,7 @@ describe("calcite-tile", () => {
           },
         );
       });
-      describe("icon color", () => {
+      describe("tile text-color token applies to icon on hover", () => {
         themed(
           html`
             <calcite-tile
diff --git a/packages/calcite-components/src/components/tile/tile.scss b/packages/calcite-components/src/components/tile/tile.scss
index aae4dd56713..e66e185bd28 100644
--- a/packages/calcite-components/src/components/tile/tile.scss
+++ b/packages/calcite-components/src/components/tile/tile.scss
@@ -239,7 +239,8 @@
 
 :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-color-text-link);
+    outline-color: var(--calcite-color-text-link);
   }
 }
 

From e5a3a974e58f7da2962db1df05d7151a8dd478b1 Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Fri, 25 Oct 2024 11:09:20 -0700
Subject: [PATCH 26/30] adding Kitty's revised property descriptors

---
 .../calcite-components/src/components.d.ts    | 100 ++++++++++++++++++
 .../src/components/tile/tile.scss             |  10 +-
 2 files changed, 105 insertions(+), 5 deletions(-)

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.scss b/packages/calcite-components/src/components/tile/tile.scss
index e66e185bd28..cc01b5fa036 100644
--- a/packages/calcite-components/src/components/tile/tile.scss
+++ b/packages/calcite-components/src/components/tile/tile.scss
@@ -3,13 +3,13 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-tile-accent-color-press: Specifies the color of the component's selection indicators (radio, checkbox, border).
- * @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-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 heading text color of the component.
+ * @prop --calcite-tile-heading-text-color: Specifies the component's `heading` text color.
  * @prop --calcite-tile-shadow: Specifies the shadow around the component.
- * @prop --calcite-tile-text-color: Specifies the text color of the component, which affects description and icon, but not the heading text.
+ * @prop --calcite-tile-text-color: Specifies the component's `description` and `icon` text color, but not the `heading` text color.
  */
 
 :host {

From 3e9390534e29ad1a507705dd651e9f822483b82b Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Fri, 25 Oct 2024 11:49:20 -0700
Subject: [PATCH 27/30] updating fallback to use --calcite-corner-radius

---
 packages/calcite-components/src/components/tile/tile.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/tile/tile.scss b/packages/calcite-components/src/components/tile/tile.scss
index cc01b5fa036..752238c174c 100644
--- a/packages/calcite-components/src/components/tile/tile.scss
+++ b/packages/calcite-components/src/components/tile/tile.scss
@@ -21,7 +21,7 @@
 .container {
   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-sharp));
+  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);

From 0453a375f45c12aca4838c78288de4c8c638a909 Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Fri, 25 Oct 2024 12:21:29 -0700
Subject: [PATCH 28/30] adding --calcite-tile-link-color

---
 .../src/components/tile/tile.e2e.ts           | 60 +++++--------------
 .../src/components/tile/tile.scss             | 11 ++--
 .../src/custom-theme/tile.ts                  |  1 +
 3 files changed, 22 insertions(+), 50 deletions(-)

diff --git a/packages/calcite-components/src/components/tile/tile.e2e.ts b/packages/calcite-components/src/components/tile/tile.e2e.ts
index 3900ceaca65..9e319b129a7 100644
--- a/packages/calcite-components/src/components/tile/tile.e2e.ts
+++ b/packages/calcite-components/src/components/tile/tile.e2e.ts
@@ -481,7 +481,7 @@ describe("calcite-tile", () => {
       });
     });
     describe("link", () => {
-      describe("--calcite-color-text-link applies to heading text on hover", () => {
+      describe("--calcite-tile-link-color applies to heading text on hover with --calcite-color-text-link as a fallback", () => {
         themed(
           html`
             <calcite-tile
@@ -493,55 +493,20 @@ describe("calcite-tile", () => {
             </calcite-tile>
           `,
           {
-            "--calcite-color-text-link": {
+            "--calcite-tile-link-color": {
               shadowSelector: `.${CSS.heading}`,
               targetProp: "color",
               state: "hover",
             },
-          },
-        );
-      });
-      describe("--calcite-color-text-link applies to icon on hover", () => {
-        themed(
-          html`
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
-              icon="layers"
-              href="#"
-            >
-            </calcite-tile>
-          `,
-          {
             "--calcite-color-text-link": {
-              shadowSelector: `.${CSS.icon}`,
+              shadowSelector: `.${CSS.heading}`,
               targetProp: "color",
               state: "hover",
             },
           },
         );
       });
-      describe("--calcite-color-text-link applies to border on hover", () => {
-        themed(
-          html`
-            <calcite-tile
-              heading="Tile heading lorem ipsum"
-              description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
-              icon="layers"
-              href="#"
-            >
-            </calcite-tile>
-          `,
-          {
-            "--calcite-color-text-link": {
-              shadowSelector: `.${CSS.container}`,
-              targetProp: "outlineColor",
-              state: "hover",
-            },
-          },
-        );
-      });
-      describe("tile text-color tokens apply to heading and description on hover", () => {
+      describe("--calcite-tile-link-color applies to icon on hover with --calcite-color-text-link as a fallback", () => {
         themed(
           html`
             <calcite-tile
@@ -553,20 +518,20 @@ describe("calcite-tile", () => {
             </calcite-tile>
           `,
           {
-            "--calcite-tile-heading-text-color": {
+            "--calcite-tile-link-color": {
               shadowSelector: `.${CSS.heading}`,
               targetProp: "color",
               state: "hover",
             },
-            "--calcite-tile-text-color": {
-              shadowSelector: `.${CSS.container}`,
+            "--calcite-color-text-link": {
+              shadowSelector: `.${CSS.icon}`,
               targetProp: "color",
               state: "hover",
             },
           },
         );
       });
-      describe("tile text-color token applies to icon on hover", () => {
+      describe("--calcite-tile-link-color applies to border on hover with --calcite-color-text-link as a fallback", () => {
         themed(
           html`
             <calcite-tile
@@ -578,11 +543,16 @@ describe("calcite-tile", () => {
             </calcite-tile>
           `,
           {
-            "--calcite-tile-text-color": {
-              shadowSelector: `.${CSS.icon}`,
+            "--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 752238c174c..e369af85c22 100644
--- a/packages/calcite-components/src/components/tile/tile.scss
+++ b/packages/calcite-components/src/components/tile/tile.scss
@@ -8,6 +8,7 @@
  * @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 the `href` property exists, specifies the color of the component's link elements, such as the border, icon and heading text.
  * @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.
  */
@@ -225,22 +226,22 @@
 :host([href]:focus:not([disabled])),
 :host([href]:hover:not([disabled])) {
   .container {
-    outline-color: var(--calcite-color-text-link);
+    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-text-color, var(--calcite-color-text-link));
+    color: var(--calcite-tile-link-color, var(--calcite-color-text-link));
   }
   .heading {
-    color: var(--calcite-tile-heading-text-color, var(--calcite-color-text-link));
+    color: var(--calcite-tile-link-color, var(--calcite-color-text-link));
   }
 }
 
 :host([href]:active:not([disabled])) {
   .container {
-    box-shadow: inset 0 0 0 1px var(--calcite-color-text-link);
-    outline-color: var(--calcite-color-text-link);
+    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));
   }
 }
 
diff --git a/packages/calcite-components/src/custom-theme/tile.ts b/packages/calcite-components/src/custom-theme/tile.ts
index c0d32321912..de91065f42e 100644
--- a/packages/calcite-components/src/custom-theme/tile.ts
+++ b/packages/calcite-components/src/custom-theme/tile.ts
@@ -6,6 +6,7 @@ export const tileTokens = {
   calciteTileBorderColor: "",
   calciteTileCornerRadius: "",
   calciteTileHeadingTextColor: "",
+  calciteTileLinkColor: "",
   calciteTileShadow: "",
   calciteTileTextColor: "",
 };

From 8baf0c7c9ac00362745aae482ab537844ce752d6 Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Fri, 25 Oct 2024 12:23:06 -0700
Subject: [PATCH 29/30] updating doc to for link color to indicate state it
 applies to

---
 packages/calcite-components/src/components/tile/tile.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/tile/tile.scss b/packages/calcite-components/src/components/tile/tile.scss
index e369af85c22..6271656aecd 100644
--- a/packages/calcite-components/src/components/tile/tile.scss
+++ b/packages/calcite-components/src/components/tile/tile.scss
@@ -8,7 +8,7 @@
  * @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 the `href` property exists, specifies the color of the component's link elements, such as the border, icon and heading text.
+ * @prop --calcite-tile-link-color: When the `href` property exists, specifies the color of the component's link elements, such as the border, icon and heading text on hover, focus and press.
  * @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.
  */

From 0c9d9aa8a12cef24cd4c4a6c260849b966c10fb5 Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Fri, 25 Oct 2024 13:02:41 -0700
Subject: [PATCH 30/30] adding Kitty's revised tile-link-color description

---
 packages/calcite-components/src/components/tile/tile.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/tile/tile.scss b/packages/calcite-components/src/components/tile/tile.scss
index 6271656aecd..2217e17787c 100644
--- a/packages/calcite-components/src/components/tile/tile.scss
+++ b/packages/calcite-components/src/components/tile/tile.scss
@@ -8,7 +8,7 @@
  * @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 the `href` property exists, specifies the color of the component's link elements, such as the border, icon and heading text on hover, focus and press.
+ * @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.
  */