From 4112ed8ef90c84abd8649496035764462f344878 Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Thu, 6 Jun 2024 14:37:38 -0700
Subject: [PATCH] fixing border token tests

---
 .../src/components/action/action.e2e.ts       |  2 +-
 .../components/time-picker/time-picker.e2e.ts | 25 ++++++++++++++-----
 .../components/time-picker/time-picker.scss   |  9 +++----
 3 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/packages/calcite-components/src/components/action/action.e2e.ts b/packages/calcite-components/src/components/action/action.e2e.ts
index 787fc4e6e52..4bee2cdfeca 100755
--- a/packages/calcite-components/src/components/action/action.e2e.ts
+++ b/packages/calcite-components/src/components/action/action.e2e.ts
@@ -227,7 +227,7 @@ describe("calcite-action", () => {
         },
         "--calcite-action-indicator-color": {
           shadowSelector: `.${CSS.actionIndicator}::after`,
-          targetProp: "background-color",
+          targetProp: "backgroundColor",
         },
       } as const;
       themed(
diff --git a/packages/calcite-components/src/components/time-picker/time-picker.e2e.ts b/packages/calcite-components/src/components/time-picker/time-picker.e2e.ts
index a68bcedd2a4..98d449a2ba9 100644
--- a/packages/calcite-components/src/components/time-picker/time-picker.e2e.ts
+++ b/packages/calcite-components/src/components/time-picker/time-picker.e2e.ts
@@ -1240,12 +1240,6 @@ describe("calcite-time-picker", () => {
 
   describe("theme", () => {
     const tokens: ComponentTestTokens = {
-      "--calcite-time-picker-text-color": [
-        {
-          targetProp: "color",
-          shadowSelector: `.${CSS.timePicker}`,
-        },
-      ],
       "--calcite-time-picker-background-color": [
         {
           targetProp: "backgroundColor",
@@ -1276,6 +1270,25 @@ describe("calcite-time-picker", () => {
           state: "hover",
         },
       ],
+      "--calcite-time-picker-input-border-focus-color": [
+        {
+          targetProp: "boxShadow",
+          shadowSelector: `.${CSS.input}`,
+          state: "focus",
+        },
+      ],
+      "--calcite-time-picker-shadow": [
+        {
+          targetProp: "boxShadow",
+          shadowSelector: `.${CSS.timePicker}`,
+        },
+      ],
+      "--calcite-time-picker-text-color": [
+        {
+          targetProp: "color",
+          shadowSelector: `.${CSS.timePicker}`,
+        },
+      ],
     };
     themed(`calcite-time-picker`, tokens);
   });
diff --git a/packages/calcite-components/src/components/time-picker/time-picker.scss b/packages/calcite-components/src/components/time-picker/time-picker.scss
index 2fe67d90977..997e6e8a41d 100644
--- a/packages/calcite-components/src/components/time-picker/time-picker.scss
+++ b/packages/calcite-components/src/components/time-picker/time-picker.scss
@@ -9,8 +9,8 @@
  * @prop --calcite-time-picker-icon-color: Specifies the color of the component's icons.
  * @prop --calcite-time-picker-input-border-focus-color: Specifies the color of the border around the number and meridiem inputs when focused.
  * @prop --calcite-time-picker-input-border-hover-color: Specifies the color of the border around the number and meridiem inputs when hovered.
- * @prop --calcite-time-picker-text-color: Specifies the text color of the component.
  * @prop --calcite-time-picker-shadow: Specifies the box-shadow around the component.
+ * @prop --calcite-time-picker-text-color: Specifies the text color of the component.
  */
 :host {
   @apply inline-block;
@@ -77,10 +77,7 @@
     background-color: var(--calcite-time-picker-background-color, var(--calcite-color-foreground-1));
 
     &:hover {
-      box-shadow: var(
-        --calcite-time-picker-input-border-hover-color,
-        inset 0 0 0 2px var(--calcite-color-foreground-2)
-      );
+      box-shadow: inset 0 0 0 2px var(--calcite-time-picker-input-border-hover-color, var(--calcite-color-foreground-2));
       z-index: theme("zIndex.header");
     }
     &:focus,
@@ -90,7 +87,7 @@
     }
     &.inputFocus,
     &:hover.inputFocus {
-      box-shadow: var(--calcite-time-picker-input-border-focus-color, inset 0 0 0 2px var(--calcite-color-brand));
+      box-shadow: inset 0 0 0 2px var(--calcite-time-picker-input-border-focus-color, var(--calcite-color-brand));
       z-index: theme("zIndex.header");
     }
   }