feat(floating-ui): update styling for consistency across components

packages/components/src/components/autocomplete/autocomplete.scss

@@ -104,7 +104,7 @@
   max-block-size: var(--calcite-autocomplete-menu-max-size-y, theme("maxHeight.menu"));
   color: var(--calcite-autocomplete-text-color, var(--calcite-color-text-1));
   background-color: var(--calcite-autocomplete-background-color, var(--calcite-color-foreground-1));
-  border-radius: var(--calcite-autocomplete-corner-radius, var(--calcite-corner-radius-round));
+  border-radius: var(--calcite-autocomplete-corner-radius, var(--calcite-corner-radius-sm));
 }
 
 .content--hidden {

packages/components/src/components/input-time-picker/input-time-picker.scss

@@ -207,7 +207,7 @@ calcite-time-picker {
 }
 
 calcite-popover {
-  --calcite-popover-corner-radius: var(--calcite-input-time-picker-corner-radius, var(--calcite-corner-radius-round));
+  --calcite-popover-corner-radius: var(--calcite-input-time-picker-corner-radius, var(--calcite-corner-radius-sm));
 }
 
 @include includes.form-internal-label();

packages/components/src/components/menu-item/menu-item.e2e.ts

@@ -82,3 +82,225 @@ it("should emit calciteMenuItemSelect event when user select the text area of th
   expect(await getFocusedElementProp(page, "id")).toBe("Nature");
   expect(eventSpy).toHaveReceivedEventTimes(2);
 });
+
+describe("theme", () => {
+  const menuWithSlottedSubmenuHTML = (layout: Layout): string => html`
+    <calcite-menu layout="${layout}">
+      <calcite-menu-item text="calcite-navigation" href="#calcite-menu">
+        <calcite-menu-item slot="${SLOTS.submenuItem}" text="Slots"></calcite-menu-item>
+        <calcite-menu-item slot="${SLOTS.submenuItem}" text="Css vars"></calcite-menu-item>
+      </calcite-menu-item>
+    </calcite-menu>
+  `;
+
+  describe("slotted submenu", () => {
+    const commonTokens: ComponentTestTokens = {
+      "--calcite-border-width-sm": {
+        selector: "calcite-menu-item",
+        shadowSelector: `.${CSS.dropdownMenuItems}`,
+        targetProp: "borderWidth",
+      },
+      "--calcite-menu-background-color": [
+        {
+          selector: "calcite-menu-item",
+          shadowSelector: `calcite-action`,
+          targetProp: "--calcite-action-background-color-press",
+          state: { press: { attribute: "class", value: CSS.dropdownAction } },
+        },
+        {
+          selector: "calcite-menu-item",
+          shadowSelector: `calcite-action`,
+          targetProp: "--calcite-action-background-color",
+        },
+      ],
+      "--calcite-menu-text-color": {
+        selector: "calcite-menu-item",
+        shadowSelector: `calcite-action`,
+        targetProp: "--calcite-action-text-color",
+      },
+      "--calcite-menu-item-sub-menu-corner-radius": {
+        selector: "calcite-menu-item",
+        shadowSelector: `.${CSS.dropdownMenuItems}`,
+        targetProp: "borderRadius",
+      },
+    };
+
+    describe("horizontal layout", () => {
+      themed(menuWithSlottedSubmenuHTML("horizontal"), {
+        ...commonTokens,
+        "--calcite-menu-item-sub-menu-border-color": {
+          selector: "calcite-menu-item",
+          shadowSelector: `.${CSS.dropdownMenuItems}`,
+          targetProp: "borderColor",
+        },
+      });
+    });
+
+    describe("vertical layout", () => {
+      themed(menuWithSlottedSubmenuHTML("vertical"), {
+        ...commonTokens,
+        "--calcite-menu-item-sub-menu-border-color": {
+          selector: "calcite-menu-item",
+          shadowSelector: `.${CSS.dropdownMenuItems}::after`,
+          targetProp: "borderBlockStartColor",
+        },
+      });
+    });
+  });
+
+  describe("default", () => {
+    const menuHTML = (layout: Layout): string => html`
+      <calcite-menu layout="${layout}">
+        <calcite-menu-item text="Ideas"> </calcite-menu-item>
+      </calcite-menu>
+    `;
+    const tokens: ComponentTestTokens = {
+      "--calcite-menu-text-color": [
+        {
+          selector: "calcite-menu-item",
+          shadowSelector: `.${CSS.content}`,
+          targetProp: "color",
+        },
+        {
+          selector: "calcite-menu-item",
+          shadowSelector: ` .${CSS.content} `,
+          targetProp: "color",
+          state: { press: { attribute: "role", value: `menuitem` } },
+        },
+      ],
+      "--calcite-menu-background-color": [
+        {
+          selector: "calcite-menu-item",
+          shadowSelector: `.${CSS.itemContent}`,
+          targetProp: "backgroundColor",
+        },
+        {
+          selector: "calcite-menu-item",
+          shadowSelector: `.${CSS.content}`,
+          targetProp: "backgroundColor",
+        },
+        {
+          selector: "calcite-menu-item",
+          shadowSelector: `.${CSS.content}`,
+          targetProp: "backgroundColor",
+          state: { press: { attribute: "role", value: `menuitem` } },
+        },
+      ],
+    };
+
+    describe("vertical layout", () => {
+      themed(menuHTML("vertical"), tokens);
+    });
+  });
+
+  describe("active", () => {
+    const activeMenuItemHTML = (layout: Layout): string => html`
+      <calcite-menu layout="${layout}">
+        <calcite-menu-item text="Ideas" active> </calcite-menu-item>
+      </calcite-menu>
+    `;
+    const tokens = (layout: Layout): ComponentTestTokens => {
+      const targetBorderProp = layout === "horizontal" ? "borderBlockEndColor" : "borderInlineEndColor";
+      return {
+        "--calcite-menu-item-accent-color": [
+          {
+            selector: "calcite-menu-item",
+            shadowSelector: `.${CSS.content}`,
+            targetProp: targetBorderProp,
+          },
+          {
+            selector: "calcite-menu-item",
+            shadowSelector: `.${CSS.content}`,
+            targetProp: targetBorderProp,
+            state: "hover",
+          },
+        ],
+      };
+    };
+    describe("horizontal layout", () => {
+      themed(activeMenuItemHTML("horizontal"), tokens("horizontal"));
+    });
+
+    describe("vertical layout", () => {
+      themed(activeMenuItemHTML("vertical"), tokens("vertical"));
+    });
+  });
+
+  describe("icons", () => {
+    const iconMenuItemHTML: string = html` <calcite-menu>
+      <calcite-menu-item text="Ideas" breadcrumb icon-start="layers" icon-end="layers">
+        <calcite-menu-item
+          href="#calcite-navigation-css-vars"
+          icon-start="multiple-variables"
+          slot="${SLOTS.submenuItem}"
+          text="Css vars"
+        ></calcite-menu-item>
+      </calcite-menu-item>
+    </calcite-menu>`;
+
+    const tokens: ComponentTestTokens = {
+      "--calcite-menu-text-color": [
+        {
+          selector: "calcite-menu-item",
+          shadowSelector: `.${CSS.iconStart}`,
+          targetProp: "color",
+        },
+        {
+          selector: "calcite-menu-item",
+          shadowSelector: `.${CSS.iconEnd}`,
+          targetProp: "color",
+        },
+        {
+          selector: "calcite-menu-item",
+          shadowSelector: `.${CSS.iconBreadcrumb}`,
+          targetProp: "color",
+        },
+        {
+          selector: "calcite-menu-item",
+          shadowSelector: `.${CSS.iconDropdown}`,
+          targetProp: "color",
+        },
+      ],
+    };
+    themed(iconMenuItemHTML, tokens);
+  });
+});
+
+describe("deprecated", () => {
+  const iconMenuItemHTML: string = html` <calcite-menu>
+    <calcite-menu-item text="Ideas" breadcrumb icon-start="layers" icon-end="layers">
+      <calcite-menu-item
+        href="#calcite-navigation-css-vars"
+        icon-start="multiple-variables"
+        slot="${SLOTS.submenuItem}"
+        text="Css vars"
+      ></calcite-menu-item>
+    </calcite-menu-item>
+  </calcite-menu>`;
+
+  const tokens: ComponentTestTokens = {
+    "--calcite-ui-icon-color": [
+      {
+        selector: "calcite-menu-item",
+        shadowSelector: `.${CSS.iconStart}`,
+        targetProp: "color",
+      },
+      {
+        selector: "calcite-menu-item",
+        shadowSelector: `.${CSS.iconEnd}`,
+        targetProp: "color",
+      },
+      {
+        selector: "calcite-menu-item",
+        shadowSelector: `.${CSS.iconBreadcrumb}`,
+        targetProp: "color",
+      },
+      {
+        selector: "calcite-menu-item",
+        shadowSelector: `.${CSS.iconDropdown}`,
+        targetProp: "color",
+      },
+    ],
+  };
+  themed(iconMenuItemHTML, tokens);
+});

packages/components/src/components/menu-item/menu-item.scss

@@ -22,7 +22,7 @@
 @use "../../styles/includes";
 
 :host {
-  --calcite-internal-menu-item-border: 1px solid
+  --calcite-internal-menu-item-border: var(--calcite-border-width-sm) solid
     var(--calcite-menu-item-sub-menu-border-color, var(--calcite-color-border-3));
 
   @apply flex
@@ -212,7 +212,7 @@
   @apply absolute h-auto flex-col hidden overflow-visible min-w-full;
   box-shadow: var(--calcite-shadow-md);
   border: var(--calcite-internal-menu-item-border);
-  border-radius: var(--calcite-menu-item-sub-menu-corner-radius, var(--calcite-corner-radius));
+  border-radius: var(--calcite-menu-item-sub-menu-corner-radius, var(--calcite-corner-radius-sm));
   inset-block-start: 100%;
   z-index: theme("zIndex.dropdown");
   &.open {

packages/components/src/components/popover/popover.scss

@@ -67,13 +67,12 @@
 }
 
 .position-container .calcite-floating-ui-anim {
-  @apply border
-    border-solid;
-
+  border-style: solid;
+  border-width: var(--calcite-border-width-sm);
   box-shadow: var(--calcite-shadow-md);
   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-corner-radius-round));
+  border-radius: var(--calcite-popover-corner-radius, var(--calcite-corner-radius-sm));
 }
 
 .calcite-floating-ui-arrow {

packages/components/src/components/tooltip/tooltip.scss

@@ -63,18 +63,18 @@
     word-break;
   padding-block: var(--calcite-internal-tooltip-padding-block);
   padding-inline: var(--calcite-internal-tooltip-padding-inline);
-  border-radius: var(--calcite-tooltip-corner-radius, var(--calcite-corner-radius-round));
+  border-radius: var(--calcite-tooltip-corner-radius, var(--calcite-corner-radius-sm));
   color: var(--calcite-tooltip-text-color, var(--calcite-color-text-1));
   text-align: start;
 }
 
 .position-container .calcite-floating-ui-anim {
-  @apply border
-    border-solid;
+  border-style: solid;
+  border-width: var(--calcite-border-width-sm);
   box-shadow: var(--calcite-shadow-md);
   background-color: var(--calcite-tooltip-background-color, var(--calcite-color-foreground-1));
   border-color: var(--calcite-tooltip-border-color, var(--calcite-color-border-3));
-  border-radius: var(--calcite-tooltip-corner-radius, var(--calcite-corner-radius-round));
+  border-radius: var(--calcite-tooltip-corner-radius, var(--calcite-corner-radius-sm));
 }
 
 .calcite-floating-ui-arrow {

packages/components/src/styles/shared/_floating-ui.scss

@@ -12,8 +12,10 @@ $floating-ui-transition-offset: 5px;
     /* stylelint-disable-next-line liberty/use-logical-spec -- explicit position */
     transition-property: inset, left, opacity, display;
     opacity: 0;
+    border: var(--calcite-border-width-sm) solid var(--calcite-color-border-3);
+    border-radius: var(--calcite-corner-radius-sm);
     box-shadow: $floating-ui-shadow;
-    @apply rounded z-default;
+    @apply z-default;
     @include floating-ui-anim-starting-style;
   }
 }
@@ -58,8 +60,10 @@ $floating-ui-transition-offset: 5px;
       transition-property: inset-block-start, left, opacity, display;
       transition-behavior: allow-discrete;
       opacity: 0;
+      border: var(--calcite-border-width-sm) solid var(--calcite-color-border-3);
+      border-radius: var(--calcite-corner-radius-sm);
       box-shadow: $floating-ui-shadow;
-      @apply rounded z-default;
+      @apply z-default;
     }
 
     &[data-placement^="bottom"] .calcite-floating-ui-anim {