revert: refactor(popover): update token pattern (#8889)

**Related Issue:** #8875 ## Summary Reverts previous pull request which updates the token pattern. Co-authored-by: Matt Driscoll <[email protected]>
Esri · Mar 6, 2024 · c43c280 · c43c280
1 parent 9e1f11a
commit c43c280
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 59 deletions.
diff --git a/packages/calcite-components/src/components/action-menu/action-menu.scss b/packages/calcite-components/src/components/action-menu/action-menu.scss
@@ -37,11 +37,4 @@
   max-h-menu;
 }
 
-calcite-popover {
-  --calcite-popover-background-color: var(--calcite-action-menu-popover-background-color);
-  --calcite-popover-border-color: var(--calcite-action-menu-popover-border-color);
-  --calcite-popover-corner-radius: var(--calcite-action-menu-popover-corner-radius);
-  --calcite-popover-text-color: var(--calcite-action-menu-popover-text-color);
-}
-
 @include base-component();
diff --git a/packages/calcite-components/src/components/popover/popover.scss b/packages/calcite-components/src/components/popover/popover.scss
@@ -1,16 +1,13 @@
 /**
-* 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 corner radius of the component.
-* @prop --calcite-popover-text-color: The text color of the component.
-*/
+ * 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.
+ */
 
 :host {
-  --calcite-floating-ui-z-index: var(--calcite-popover-z-index, var(--calcite-z-index-popup));
+  --calcite-floating-ui-z-index: var(--calcite-popover-z-index, theme("zIndex.popover"));
 }
 
 @include floatingUIHost();
@@ -49,52 +46,47 @@
 }
 
 .calcite-floating-ui-anim {
-  @apply border
+  @apply bg-foreground-1
+    border-color-3
+    rounded
+    border
     border-solid;
-
-  background-color: var(--calcite-popover-background-color, var(--calcite-color-foreground-1));
-  border-color: var(--calcite-popover-border-color, var(--calcite-color-border-3));
-  border-radius: var(--calcite-popover-corner-radius, var(--calcite-border-radius-round));
 }
 
 .arrow::before {
-  outline: 1px solid var(--calcite-popover-border-color, var(--calcite-color-border-3));
+  outline: 1px solid var(--calcite-color-border-3);
 }
 
 .header {
-  @apply flex
+  @apply border-b-color-3
+    flex
     flex-auto
     items-stretch
     justify-start
     border-0
     border-b
     border-solid;
-
-  border-block-end-color: var(--calcite-popover-border-color, var(--calcite-color-border-3));
 }
 
 .heading {
-  @apply word-break
+  @apply text-color-1
+  word-break
   m-0
   block
   flex-auto
   self-center
   whitespace-normal
   font-medium;
-
-  color: var(--calcite-popover-text-color, var(--calcite-color-text-1));
 }
 
 .container {
-  @apply relative
+  @apply text-color-1
+    relative
     flex
     h-full
     flex-row
-    flex-nowrap;
-
-  color: var(--calcite-popover-text-color, var(--calcite-color-text-1));
-  border-radius: var(--calcite-popover-corner-radius, var(--calcite-border-radius-round));
-
+    flex-nowrap
+    rounded;
   &.has-header {
     @apply flex-col;
   }
@@ -113,8 +105,8 @@
 .close-button-container {
   @apply flex overflow-hidden;
   flex: 0 0 auto;
-  border-start-end-radius: var(--calcite-popover-corner-radius, var(--calcite-border-radius-round));
-  border-end-end-radius: var(--calcite-popover-corner-radius, var(--calcite-border-radius-round));
+  border-start-end-radius: theme("borderRadius.DEFAULT");
+  border-end-end-radius: theme("borderRadius.DEFAULT");
 }
 
 ::slotted(calcite-panel),

diff --git a/packages/calcite-components/src/components/popover/popover.stories.ts b/packages/calcite-components/src/components/popover/popover.stories.ts
@@ -195,25 +195,3 @@ export const transparentBG_TestOnly = (): string => html`
     </calcite-popover>
   </div>
 `;
-
-export const themed_TestOnly = (): string => html`
-  <div style="width: 400px;">
-    ${referenceElementHTML}
-    <calcite-popover
-      heading="these 🥨s are making me thirsty"
-      reference-element="reference-element"
-      placement="auto"
-      open
-      closable
-      scale="l"
-      style="
-    --calcite-popover-background-color: #8ec3eb;
-    --calcite-popover-border-color: #db9833;
-    --calcite-popover-corner-radius: 20px;
-    --calcite-popover-text-color: white;
-  "
-    >
-      ${contentHTML}
-    </calcite-popover>
-  </div>
-`;