docs: update component token description for consistency (#11062)

**Related Issue:** #7180 

## Summary
Provide consistency and alignment in our docs across the design system
for component design tokens, also in alignment with our
#10058 and
#10430. 📚

Also of note, there was an extra `*` in the `navigation logo` [internal
doc](https://next-preview.sites.afd.arcgis.com/calcite-design-system/components/navigation-logo/#styles).

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

@@ -6,30 +6,30 @@
  * @prop --calcite-input-prefix-size: Specifies the component's prefix width, when present.
  * @prop --calcite-input-suffix-size: Specifies the component's suffix width, when present.
  * 
- * @prop --calcite-input-background-color: Specifies the background color of the component.
- * @prop --calcite-input-border-color: Specifies the border color of the component.
- * @prop --calcite-input-corner-radius: Specifies the corner radius of the component.
- * @prop --calcite-input-shadow: Specifies the shadow of the component.
-
- * @prop --calcite-input-icon-color:  Specifies the icon color of the component.
- * @prop --calcite-input-text-color: Specifies the text color of the component.
- * @prop --calcite-input-placeholder-text-color: Specifies the color of placeholder text in the component.
-
- * @prop --calcite-input-actions-background-color: Specifies the background color of Input's `clearable` and `number-button-type` elements.
- * @prop --calcite-input-actions-background-color-hover: Specifies the background color of Input's `clearable` and `number-button-type` elements when hovered.
- * @prop --calcite-input-actions-background-color-press: Specifies the background color of Input's `clearable` and `number-button-type` elements when pressed.
- * @prop --calcite-input-actions-icon-color: Specifies the icon color of Input's `clearable` and `number-button-type` elements.
- * @prop --calcite-input-actions-icon-color-hover: Specifies the icon color of Input's `clearable` and `number-button-type` elements when hovered.
- * @prop --calcite-input-actions-icon-color-press: Specifies the icon color of Input's `clearable` and `number-button-type` elements when pressed.
+ * @prop --calcite-input-background-color: Specifies the component's background color.
+ * @prop --calcite-input-border-color: Specifies the component's border color.
+ * @prop --calcite-input-corner-radius: Specifies the component's corner radius.
+ * @prop --calcite-input-shadow: Specifies the shadow around the component.
+
+ * @prop --calcite-input-icon-color: Specifies the component's icon color.
+ * @prop --calcite-input-text-color: Specifies the component's text color.
+ * @prop --calcite-input-placeholder-text-color: Specifies the component's placeholder text color.
+
+ * @prop --calcite-input-actions-background-color: Specifies the background color of the component's `clearable` and `number-button-type` elements.
+ * @prop --calcite-input-actions-background-color-hover: Specifies the background color of the component's `clearable` and `number-button-type` elements when hovered.
+ * @prop --calcite-input-actions-background-color-press: Specifies the background color of the component's `clearable` and `number-button-type` elements when pressed.
+ * @prop --calcite-input-actions-icon-color: Specifies the icon color of the component's `clearable` and `number-button-type` elements.
+ * @prop --calcite-input-actions-icon-color-hover: Specifies the icon color of the component's `clearable` and `number-button-type` elements when hovered.
+ * @prop --calcite-input-actions-icon-color-press: Specifies the icon color of the component's `clearable` and `number-button-type` elements when pressed.
  
  * @prop --calcite-input-loading-background-color: Specifies the background color of the `loading` element, when present.
  * @prop --calcite-input-loading-fill-color: Specifies the fill color of the `loading` element, when present.
  
- * @prop --calcite-input-prefix-background-color:  Specifies the background color of the component's prefix, when present.
- * @prop --calcite-input-prefix-text-color:  Specifies the text color of the component's prefix, when present.
+ * @prop --calcite-input-prefix-background-color:  Specifies the component's prefix background color, when present.
+ * @prop --calcite-input-prefix-text-color:  Specifies the component's prefix text color, when present.
 
- * @prop --calcite-input-suffix-background-color:  Specifies the background color of the component's suffix, when present.
- * @prop --calcite-input-suffix-text-color:  Specifies the text color of the component's suffix, when present.
+ * @prop --calcite-input-suffix-background-color:  Specifies the component's suffix background color, when present.
+ * @prop --calcite-input-suffix-text-color:  Specifies the component's suffix text color, when present.
  *
  */
 

packages/calcite-components/src/components/list-item/list-item.scss

@@ -8,9 +8,9 @@
  * @prop --calcite-list-background-color: Specifies the component's background color.
  * @prop --calcite-list-border-color: Specifies the component's border color.
  * @prop --calcite-list-content-text-color: Specifies the content color.
- * @prop --calcite-list-description-text-color: Specifies the description color.
+ * @prop --calcite-list-description-text-color: Specifies the `description` color.
  * @prop --calcite-list-icon-color: Specifies the component's icon color.
- * @prop --calcite-list-label-text-color: Specifies the label color.
+ * @prop --calcite-list-label-text-color: Specifies the `label` color.
  * @prop --calcite-list-selection-border-color: Specifies the component's selection border color.
  */
 

packages/calcite-components/src/components/navigation-logo/navigation-logo.scss

@@ -5,7 +5,6 @@
 * @prop --calcite-navigation-background-color: Specifies the component's background color.
 * @prop --calcite-navigation-logo-heading-text-color: Specifies the component's default color for heading text.
 * @prop --calcite-navigation-logo-text-color: Specifies the component's default color for icon and description text.
-*
 */
 
 :host {

packages/calcite-components/src/components/navigation-user/navigation-user.scss

@@ -4,11 +4,11 @@
  * These properties can be overridden using the component's tag as selector.
  *
  * @prop --calcite-navigation-accent-color: Specifies the components's border color when `active`.
- * @prop --calcite-navigation-user-avatar-corner-radius: Specifies the corner radius of avatar.
- * @prop --calcite-navigation-user-avatar-color: Specifies the icon color of avatar.
+ * @prop --calcite-navigation-user-avatar-corner-radius: Specifies the component's avatar corner radius.
+ * @prop --calcite-navigation-user-avatar-color: Specifies the component's avatar icon color.
  * @prop --calcite-navigation-background-color: Specifies the component's background color.
- * @prop --calcite-navigation-user-full-name-text-color: Specifies the component's full name text color.
- * @prop --calcite-navigation-user-name-text-color: Specifies the component's username text color.
+ * @prop --calcite-navigation-user-full-name-text-color: Specifies the component's `fullName` text color.
+ * @prop --calcite-navigation-user-name-text-color: Specifies the component's `username` text color.
  *
  */
 

packages/calcite-components/src/components/navigation/navigation.scss

@@ -5,8 +5,8 @@
  *
  * @prop --calcite-navigation-width: Specifies the width of the component's content area.
  * @prop --calcite-navigation-background: [Deprecated] Use `--calcite-navigation-background-color`. Specifies the background color of the component.
- * @prop --calcite-navigation-background-color: Specifies component's background color.
- * @prop --calcite-navigation-border-color: Specifies the border color of the component.
+ * @prop --calcite-navigation-background-color: Specifies the component's background color.
+ * @prop --calcite-navigation-border-color: Specifies the component's border color.
  */
 
 @include base-component();

packages/calcite-components/src/components/panel/panel.scss

@@ -3,29 +3,29 @@
  *
  * These properties can be overridden using the component's tag as selector.
 
- * @prop --calcite-panel-corner-radius: Specifies the corner radius of the component.
+ * @prop --calcite-panel-corner-radius: Specifies the component's corner radius.
  * @prop --calcite-panel-heading-text-color: Specifies the text color of the component's `heading`.
  * @prop --calcite-panel-description-text-color: Specifies the text color of the component's `description`.
- * @prop --calcite-panel-border-color: Specifies the border color of the component.
+ * @prop --calcite-panel-border-color: Specifies the component's border color.
 
- * @prop --calcite-panel-background-color: Specifies the background color of the component.
- * @prop --calcite-panel-header-background-color: Specifies the background color of the component's footer.
+ * @prop --calcite-panel-background-color: Specifies the component's background color.
+ * @prop --calcite-panel-header-background-color: Specifies the background color of the component's header.
  * @prop --calcite-panel-footer-background-color: Specifies the background color of the component's footer.
 
  * @prop --calcite-panel-space: Specifies the padding of the component's `"unnamed (default)"` slot.
  * @prop --calcite-panel-header-content-space: Specifies the padding of the `"header-content"` slot.
  * @prop --calcite-panel-footer-space: Specifies the padding of the component's footer.
 
- * @prop --calcite-action-background-color: Specifies the background color of the component's `closable`, `collapsible`, and `back` Calcite Action components. Will apply to any slotted Calcite Action components.
- * @prop --calcite-action-background-color-hover: Specifies the background color of the component's `closable`, `collapsible`, and `back` Calcite Action components when hovered. Will apply to any slotted Calcite Action components.
- * @prop --calcite-action-background-color-pressed: Specifies the background color of the component's `closable`, `collapsible`, and `back` Calcite Action components when pressed. Will apply to any slotted Calcite Action components.
- * @prop --calcite-action-text-color-hover: Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` Calcite Action components when hovered. Will apply to any slotted Calcite Action components.
- * @prop --calcite-action-text-color-pressed: Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` Calcite Action components when pressed. Will apply to any slotted Calcite Action components.
- * @prop --calcite-popover-border-color: Specifies the border color of the component's internally rendered Calcite Popover component, which is rendered within a Calcite Action Menu when slotted Calcite Actions are present in the `header-actions-end` slot. Will apply to any slotted Calcite Popover components.
+ * @prop --calcite-action-background-color: Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s. Applies to any slotted `calcite-action`s.
+ * @prop --calcite-action-background-color-hover: Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when hovered. Applies to any slotted `calcite-action`s.
+ * @prop --calcite-action-background-color-pressed: Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when pressed. Applies to any slotted `calcite-action`s.
+ * @prop --calcite-action-text-color-hover: Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when hovered. Applies to any slotted `calcite-action`s.
+ * @prop --calcite-action-text-color-pressed: Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when pressed. Applies to any slotted `calcite-action`s.
+ * @prop --calcite-popover-border-color: Specifies the border color of the component's internally rendered `calcite-popover`, which is rendered within a `calcite-action` menu when slotted `calcite-action`s are present in the `header-actions-end` slot. Applies to any slotted `calcite-popover`s.
 
- * @prop --calcite-panel-content-space: [Deprecated] Specifies the padding of the component's content. Use `--calcite-panel-space` instead.
- * @prop --calcite-panel-footer-padding: [Deprecated] Specifies the padding of the component's footer. Use `--calcite-panel-footer-space` instead.
- * @prop --calcite-panel-header-border-block-end: [Deprecated] Specifies the component header's block end border. Use `--calcite-panel-border-color` instead.
+ * @prop --calcite-panel-content-space: [Deprecated] Use `--calcite-panel-space` instead. Specifies the padding of the component's content.
+ * @prop --calcite-panel-footer-padding: [Deprecated] Use `--calcite-panel-footer-space` instead. Specifies the padding of the component's footer.
+ * @prop --calcite-panel-header-border-block-end: [Deprecated] Use `--calcite-panel-border-color` instead. Specifies the component header's block end border.
  */
 
 :host {

packages/calcite-components/src/components/tooltip/tooltip.scss

@@ -3,11 +3,11 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-tooltip-background-color: Specifies the background color of the component.
- * @prop --calcite-tooltip-border-color: Specifies the border color of the component.
- * @prop --calcite-tooltip-corner-radius: Specifies the corner radius of the component.
- * @prop --calcite-tooltip-text-color: Specifies the text color of the component.
- * @prop --calcite-tooltip-z-index: Sets the z-index value for the component.
+ * @prop --calcite-tooltip-background-color: Specifies the component's background color.
+ * @prop --calcite-tooltip-border-color: Specifies the component's border color.
+ * @prop --calcite-tooltip-corner-radius: Specifies the component's corner radius.
+ * @prop --calcite-tooltip-text-color: Specifies the component's text color.
+ * @prop --calcite-tooltip-z-index: Specifies the z-index value for the component.
  */
 
 :host {