feat(popover): add component tokens

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

@@ -1,13 +1,21 @@
 /**
- * CSS Custom Properties
- *
- * These properties can be overridden using the component's tag as selector.
- *
- * @prop --calcite-popover-z-index: Sets the z-index value for the component.
- */
+* CSS Custom Properties
+*
+* These properties can be overridden using the component's tag as selector.
+*
+* @prop --calcite-popover-background-color: Specifies the background color of the component.
+* @prop --calcite-popover-border-color: The border color of the component.
+* @prop --calcite-popover-corner-radius: The start end border radius of the component.
+* @prop --calcite-popover-text-color: The text color of the component.
+* @prop --calcite-popover-z-index: Sets the z-index value for the component.
+*/
 
 :host {
   --calcite-floating-ui-z-index: var(--calcite-popover-z-index, theme("zIndex.popover"));
+  --calcite-popover-background-color: var(--calcite-color-foreground-1);
+  --calcite-popover-border-color: var(--calcite-color-border-3);
+  --calcite-popover-text-color: var(--calcite-color-text-1);
+  --calcite-popover-corner-radius: var(--calcite-border-radius-round);
 }
 
 @include floatingUIHost();
@@ -46,47 +54,52 @@
 }
 
 .calcite-floating-ui-anim {
-  @apply bg-foreground-1
-    border-color-3
-    rounded
-    border
+  @apply border
     border-solid;
+
+  background-color: var(--calcite-popover-background-color);
+  border-color: var(--calcite-popover-border-color);
+  border-radius: var(--calcite-popover-corner-radius);
 }
 
 .arrow::before {
-  outline: 1px solid var(--calcite-color-border-3);
+  outline: 1px solid var(--calcite-popover-border-color);
 }
 
 .header {
-  @apply border-b-color-3
-    flex
+  @apply flex
     flex-auto
     items-stretch
     justify-start
     border-0
     border-b
     border-solid;
+
+  border-block-end-color: var(--calcite-popover-border-color);
 }
 
 .heading {
-  @apply text-color-1
-  word-break
+  @apply word-break
   m-0
   block
   flex-auto
   self-center
   whitespace-normal
   font-medium;
+
+  color: var(--calcite-popover-text-color);
 }
 
 .container {
-  @apply text-color-1
-    relative
+  @apply relative
     flex
     h-full
     flex-row
-    flex-nowrap
-    rounded;
+    flex-nowrap;
+
+  color: var(--calcite-popover-text-color);
+  border-radius: var(--calcite-popover-corner-radius);
+
   &.has-header {
     @apply flex-col;
   }
@@ -105,8 +118,8 @@
 .close-button-container {
   @apply flex overflow-hidden;
   flex: 0 0 auto;
-  border-start-end-radius: theme("borderRadius.DEFAULT");
-  border-end-end-radius: theme("borderRadius.DEFAULT");
+  border-start-end-radius: var(--calcite-popover-corner-radius);
+  border-end-end-radius: var(--calcite-popover-corner-radius);
 }
 
 ::slotted(calcite-panel),