feat(input-number): add component tokens (#11961)

**Related Issue:** #7180 

## Summary

Adds the following tokens in input-number component

`--calcite-input-actions-background-color`: Specifies the background
color of the component's `clearable` and `number-button-type` elements.
`--calcite-input-actions-background-color-hover`: Specifies the
background color of the component's `clearable` and `number-button-type`
elements when hovered.
`--calcite-input-actions-background-color-press`: Specifies the
background color of the component's `clearable` and `number-button-type`
elements when pressed.
`--calcite-input-actions-icon-color`: Specifies the icon color of the
component's `clearable` and `number-button-type` elements.
`--calcite-input-actions-icon-color-hover`: Specifies the icon color of
the component's `clearable` and `number-button-type` elements when
hovered.
`--calcite-input-actions-icon-color-press`: Specifies the icon color of
the component's `clearable` and `number-button-type` elements when
pressed.
`--calcite-input-loading-background-color`: Specifies the background
color of the `loading` element.
`--calcite-input-loading-fill-color`: Specifies the fill color of the
`loading` element
`--calcite-input-number-background-color`: Specifies the background
color of the component.
`--calcite-input-number-border-color`: Specifies the border color of the
component.
`--calcite-input-number-corner-radius`: Specifies the border radius of
the component.
`--calcite-input-number-height`: Specifies the height of the component.
`--calcite-input-number-placeholder-text-color`: Specifies the text
color of the placeholder in the component.
`--calcite-input-number-text-color`: Specifies the text color of the
component.
`--calcite-input-number-text-color-focus`: Specifies the text color of
the component when focused.
`--calcite-input-prefix-background-color`: Specifies the background
color of the prefix element.
`--calcite-input-prefix-size`: Specifies the width of the prefix
element.
`--calcite-input-prefix-text-color`: Specifies the text color of the
prefix element.
`--calcite-input-suffix-background-color`: Specifies the background
color of the suffix element.
`--calcite-input-suffix-size`: Specifies the width of the suffix
element.
`--calcite-input-suffix-text-color`: Specifies the text color of the
suffix element.

Author: anveshmekala

packages/calcite-components/src/components/input-number/input-number.e2e.ts

@@ -1959,24 +1959,177 @@ describe("calcite-input-number", () => {
   });
 
   describe("theme", () => {
-    themed(
-      html`
-        <calcite-input-number
-          placeholder="Placeholder text"
-          prefix-text="prefix"
-          suffix-text="suffix"
-        ></calcite-input-number>
-      `,
-      {
-        "--calcite-input-prefix-size": {
-          shadowSelector: `.${CSS.prefix}`,
-          targetProp: "inlineSize",
+    describe("default", () => {
+      themed(
+        html`
+          <calcite-input-number
+            placeholder="Placeholder text"
+            prefix-text="prefix"
+            suffix-text="suffix"
+            value="2"
+            clearable
+            loading
+          ></calcite-input-number>
+        `,
+        {
+          "--calcite-input-actions-background-color": [
+            {
+              shadowSelector: `.${CSS.numberButtonItem}`,
+              targetProp: "backgroundColor",
+            },
+            {
+              shadowSelector: `.${CSS.clearButton}`,
+              targetProp: "backgroundColor",
+            },
+          ],
+          "--calcite-input-actions-background-color-hover": [
+            {
+              shadowSelector: `.${CSS.numberButtonItem}`,
+              targetProp: "backgroundColor",
+              state: "hover",
+            },
+            {
+              shadowSelector: `.${CSS.clearButton}`,
+              targetProp: "backgroundColor",
+              state: "hover",
+            },
+          ],
+          "--calcite-input-actions-background-color-press": [
+            {
+              shadowSelector: `.${CSS.numberButtonItem}`,
+              targetProp: "backgroundColor",
+              state: { press: `calcite-input-number >>> .${CSS.numberButtonItem}` },
+            },
+            {
+              shadowSelector: `.${CSS.clearButton}`,
+              targetProp: "backgroundColor",
+              state: { press: `calcite-input-number >>> .${CSS.clearButton}` },
+            },
+          ],
+          "--calcite-input-actions-icon-color": {
+            shadowSelector: `calcite-icon`,
+            targetProp: "color",
+          },
+          "--calcite-input-actions-icon-color-hover": {
+            shadowSelector: `calcite-icon`,
+            targetProp: "color",
+            state: "hover",
+          },
+          "--calcite-input-loading-background-color": {
+            shadowSelector: `calcite-progress`,
+            targetProp: "--calcite-progress-background-color",
+          },
+          "--calcite-input-loading-fill-color": {
+            shadowSelector: `calcite-progress`,
+            targetProp: "--calcite-progress-fill-color",
+          },
+          "--calcite-input-number-background-color": {
+            shadowSelector: `input`,
+            targetProp: "backgroundColor",
+          },
+          "--calcite-input-number-border-color": [
+            {
+              shadowSelector: `input`,
+              targetProp: "borderColor",
+            },
+            {
+              shadowSelector: `.${CSS.prefix}`,
+              targetProp: "borderColor",
+            },
+            {
+              shadowSelector: `.${CSS.suffix}`,
+              targetProp: "borderColor",
+            },
+            {
+              shadowSelector: `.${CSS.numberButtonItem}`,
+              targetProp: "borderColor",
+            },
+          ],
+          "--calcite-input-number-corner-radius": [
+            {
+              shadowSelector: `.${CSS.prefix}`,
+              targetProp: "borderStartStartRadius",
+            },
+            {
+              shadowSelector: `.${CSS.prefix}`,
+              targetProp: "borderEndStartRadius",
+            },
+            {
+              shadowSelector: `[data-adjustment="up"]`,
+              targetProp: "borderStartEndRadius",
+            },
+            {
+              shadowSelector: `[data-adjustment="down"]`,
+              targetProp: "borderEndEndRadius",
+            },
+          ],
+          "--calcite-input-number-height": [
+            {
+              shadowSelector: `input`,
+              targetProp: "blockSize",
+            },
+            {
+              shadowSelector: `.${CSS.prefix}`,
+              targetProp: "blockSize",
+            },
+            {
+              shadowSelector: `.${CSS.suffix}`,
+              targetProp: "blockSize",
+            },
+            {
+              shadowSelector: `.${CSS.numberButtonWrapper}`,
+              targetProp: "blockSize",
+            },
+          ],
+          "--calcite-input-number-text-color": {
+            shadowSelector: `input`,
+            targetProp: "color",
+          },
+          "--calcite-input-number-text-color-focus": {
+            shadowSelector: `input`,
+            targetProp: "color",
+            state: "focus",
+          },
+          "--calcite-input-prefix-background-color": {
+            shadowSelector: `.${CSS.prefix}`,
+            targetProp: "backgroundColor",
+          },
+          "--calcite-input-prefix-size": {
+            shadowSelector: `.${CSS.prefix}`,
+            targetProp: "inlineSize",
+          },
+          "--calcite-input-prefix-text-color": {
+            shadowSelector: `.${CSS.prefix}`,
+            targetProp: "color",
+          },
+          "--calcite-input-suffix-background-color": {
+            shadowSelector: `.${CSS.suffix}`,
+            targetProp: "backgroundColor",
+          },
+          "--calcite-input-suffix-text-color": {
+            shadowSelector: `.${CSS.suffix}`,
+            targetProp: "color",
+          },
+          "--calcite-input-suffix-size": {
+            shadowSelector: `.${CSS.suffix}`,
+            targetProp: "inlineSize",
+          },
         },
-        "--calcite-input-suffix-size": {
-          shadowSelector: `.${CSS.suffix}`,
-          targetProp: "inlineSize",
+      );
+    });
+
+    describe("readOnly", () => {
+      themed(html` <calcite-input-number read-only></calcite-input-number> `, {
+        "--calcite-input-number-background-color": {
+          shadowSelector: `input`,
+          targetProp: "backgroundColor",
         },
-      },
-    );
+        "--calcite-input-number-text-color-focus": {
+          shadowSelector: `input`,
+          targetProp: "color",
+          state: "focus",
+        },
+      });
+    });
   });
 });