feat(input): add mixin so it's easier to style and maintain similar components and parent components

[alisonailea]

Related Issue: #7180

Summary

This hands-off input styles to a mixin to style input components.

@include input(); will result in all the styles currently found in #8594

@include input('input-number', 'number'); will result in all the styles from above specific to the input-number component

@include setInputTokens(); will add the input component tokens

@include setInputTokens('filter', 'input'); will add the necessary styles to override the input component from the filter component.

^ results in...

calcite-input {
  --calcite-input-corner-radius: var(--calcite-filter-input-corner-radius);
  --calcite-input-text-color: var(--calcite-filter-input-text-color);
  --calcite-input-border-color: var(--calcite-filter-input-border-color);
  --calcite-input-background-color: var(--calcite-filter-input-background-color);
  --calcite-input-button-background-color: var(
    --calcite-filter-input-button-background-color
  );
  --calcite-input-button-background-color-hover: var(
    --calcite-filter-input-button-background-color-hover
  );
  --calcite-input-button-background-color-active: var(
    --calcite-filter-input-button-background-color-active
  );
  --calcite-input-icon-color: var(--calcite-filter-input-icon-color);
  --calcite-input-button-icon-color-hover: var(
    --calcite-filter-input-button-icon-color-hover
  );
  --calcite-input-prefix-text-color: var(--calcite-filter-input-prefix-text-color);
  --calcite-input-prefix-background-color: var(
    --calcite-filter-input-prefix-background-color
  );
  --calcite-input-suffix-text-color: var(--calcite-filter-input-suffix-text-color);
  --calcite-input-suffix-background-color: var(
    --calcite-filter-input-suffix-background-color
  );
  --calcite-input-placeholder-text-color: var(
    --calcite-filter-input-placeholder-text-color
  );
}

calcite-input[status=invalid] {
  --calcite-input-border-color: var(--calcite-filter-input-border-color);
}

calcite-input:focus {
  --calcite-input-border-color: var(--calcite-filter-input-border-color);
}

calcite-input[read-only] {
  --calcite-input-background-color: var(--calcite-filter-input-background-color);
}

[driskull]

This still doesn't solve the issue that if filter does the following:

calcite-input {
  --calcite-input-corner-radius: var(--calcite-filter-input-corner-radius);
}

The input's corner radius will be set to undefined unless a user explicitly sets it.

Input would need to set a fallback for these values or filter, and any other component that uses input internally would either have to copy the default from input and add it as a fallback. IMO it makes more sense for the fallback to be in the component that is defining the token.