feat(popover): add component tokens

[Elijbet]

Related Issue: #7180

Summary

Adds the following component tokens:

--calcite-popover-background-color
--calcite-popover-border-color
--calcite-popover-corner-radius
--calcite-popover-font-size
--calcite-popover-text-color
--calcite-popover-z-index

[github-actions]

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

[alisonailea]

My mistake here. We're keeping z-index an -internal- variable for now.

[alisonailea]

Related to above. This can be replaced with the following,

--calcite-floating-ui-z-index: var(--calcite-z-index-popup);

[alisonailea]

One small thing for non-breaking changes on the z-index. Looks good 🎉

[alisonailea]

for non-breaking changes I just realized this should be

--calcite-floating-ui-z-index: var(--calcite-popover-z-index, var(--calcite-z-index-popup));

[driskull]

@Elijbet @alisonailea shouldn't these be converted to tokens?

:host([scale="s"]) {
  .heading {
    @apply text-n1-wrap
    px-3
    py-2;
  }
}

:host([scale="m"]) {
  .heading {
    @apply text-0-wrap
    px-4
    py-3;
  }
}

:host([scale="l"]) {
  .heading {
    @apply text-1-wrap
    px-5
    py-4;
  }
}

[alisonailea]

@Elijbet @alisonailea shouldn't these be converted to tokens?

No. We don't want to expose font size and padding as component tokens in most cases at the moment.

[driskull]

What about border width?

 @apply border
    border-solid;

or height?

 @apply h-full;

[driskull]

Should we add a story for testing this? I notice the popover tail isn't being themed properly.