feat(input-time-picker): add tokens for toggle icon (#9006)

**Related Issue:** #7180 

## Summary

Adds following tokens in `calcite-input-time-picker` component:

``` 
--calcite-input-time-picker-toggle-icon-color-hover: Specifies the icon color of the toggle when hovered.
--calcite-input-time-picker-toggle-icon-color: Specifies the icon color of the toggle.
```

Related to #8955

packages/calcite-components/src/components/input-time-picker/input-time-picker.scss

@@ -5,27 +5,29 @@
  *
  * @prop --calcite-input-background-color: defines the background color of the component.
  * @prop --calcite-input-border-color: defines the border color of the component.
- * @prop --calcite-input-button-background-color: defines the background color of a button in the component.
  * @prop --calcite-input-button-background-color-hover: defines the background color of a button in the component when it's hovered.
+ * @prop --calcite-input-button-background-color: defines the background color of a button in the component.
  * @prop --calcite-input-button-border-color: defines the border color of a button in the component.
- * @prop --calcite-input-button-icon-color: defines the icon color of a button in the component.
  * @prop --calcite-input-button-icon-color-active: defines the icon color of a button in the component when it's active.
  * @prop --calcite-input-button-icon-color-hover: defines the icon color of a button in the component when it's hovered.
+ * @prop --calcite-input-button-icon-color: defines the icon color of a button in the component.
  * @prop --calcite-input-corner-radius: defines the corner radius of the component.
  * @prop --calcite-input-icon-color:  defines the icon color of the component.
  * @prop --calcite-input-placeholder-text-color: defines the color of placeholder text in the component.
- * @prop --calcite-input-text-color: defines the text color of the component.
- * @prop --calcite-input-time-picker-background-color: defines the background color of the time picker sub component.
- * @prop --calcite-input-time-picker-background-color-hover: defines the background color of the time picker sub component when hovered.
- * @prop --calcite-input-time-picker-background-color-active: defines the background color of the time picker sub component when active.
- * @prop --calcite-input-time-picker-text-color: defines the text color of the time picker sub component.
- * @prop --calcite-input-time-picker-icon-color: defines the icon color of the time picker sub component.
- * @prop --calcite-input-time-picker-box-shadow: defines the box shadow around the numbers inside the open component.
- * @prop --calcite-input-time-picker-box-shadow-focus: defines the box shadow around the numbers inside the open component when focused.
+ * @prop --calcite-input-popover-background-color: defines the background color of the popover sub component.
  * @prop --calcite-input-popover-background-color: defines the background color of the popover sub component.
  * @prop --calcite-input-popover-border-color: defines the border color of the popover sub component.
  * @prop --calcite-input-popover-text-color: defines the text color of the popover sub component.
- * @prop --calcite-input-popover-background-color: defines the background color of the popover sub component.
+ * @prop --calcite-input-text-color: defines the text color of the component.
+ * @prop --calcite-input-time-picker-background-color-active: defines the background color of the time picker sub component when active.
+ * @prop --calcite-input-time-picker-background-color-hover: defines the background color of the time picker sub component when hovered.
+ * @prop --calcite-input-time-picker-background-color: defines the background color of the time picker sub component.
+ * @prop --calcite-input-time-picker-box-shadow-focus: defines the box shadow around the numbers inside the open component when focused.
+ * @prop --calcite-input-time-picker-box-shadow: defines the box shadow around the numbers inside the open component.
+ * @prop --calcite-input-time-picker-icon-color: defines the icon color of the time picker sub component.
+ * @prop --calcite-input-time-picker-text-color: defines the text color of the time picker sub component.
+ * @prop --calcite-input-time-picker-toggle-icon-color-hover: Specifies the icon color of the toggle when hovered.
+ * @prop --calcite-input-time-picker-toggle-icon-color: Specifies the icon color of the toggle.
  */
 
 :host {
@@ -64,12 +66,16 @@
   inset-inline-end: 0;
   inset-block: 0;
   padding-inline: var(--calcite-toggle-spacing);
-  --calcite-ui-icon-color: var(--calcite-color-text-3);
+  & calcite-icon {
+    --calcite-icon-color: var(--calcite-input-time-picker-toggle-icon-color, var(--calcite-color-text-3));
+  }
 }
 
 .input-wrapper:hover .toggle-icon,
 calcite-input-text:focus + .toggle-icon {
-  --calcite-ui-icon-color: var(--calcite-color-text-1);
+  & calcite-icon {
+    --calcite-icon-color: var(--calcite-input-time-picker-toggle-icon-color-hover, var(--calcite-color-text-1));
+  }
 }
 
 calcite-popover {

packages/calcite-components/src/demos/input-time-picker.html

@@ -47,6 +47,8 @@
         --calcite-input-time-picker-icon-color: white;
         --calcite-input-time-picker-box-shadow: inset 0 0 0 2px yellow;
         --calcite-input-time-picker-box-shadow-focus: inset 0 0 0 2px navy;
+        --calcite-input-time-picker-toggle-icon-color-hover: blue;
+        --calcite-input-time-picker-toggle-icon-color: yellow;
       }
     </style>
   </head>