From df9882e27ed1a38aba40aa2d28ab130087f238c0 Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Tue, 27 Feb 2024 17:11:11 -0600
Subject: [PATCH 01/17] feat(menu, menu-item): add component tokens

---
 .../src/components/menu-item/menu-item.scss   | 120 ++++++++++++------
 1 file changed, 79 insertions(+), 41 deletions(-)

diff --git a/packages/calcite-components/src/components/menu-item/menu-item.scss b/packages/calcite-components/src/components/menu-item/menu-item.scss
index 749bb6c93cf..5fbee1c3904 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.scss
+++ b/packages/calcite-components/src/components/menu-item/menu-item.scss
@@ -1,3 +1,24 @@
+@import "~@esri/calcite-design-tokens/dist/scss/core";
+
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-menu-item-text-color: Specifies the border radius of the component.
+ * @prop --calcite-menu-item-text-color-hover: Specifies the border color of the component.
+ * @prop --calcite-menu-item-text-color-selected: Specifies the border color of week headers.
+ * @prop --calcite-menu-item-text-color-active: Specifies the border color of week headers.
+ * @prop --calcite-menu-item-background-color: Specifies the text color of week headers.
+ * @prop --calcite-menu-item-background-color-hover: Specifies the text color of day.
+ * @prop --calcite-menu-item-background-color-focused: Specifies the text color of day when active.
+ * @prop --calcite-menu-item-background-color-active: Specifies the text color of day when selected.
+ * @prop --calcite-menu-item-active-text-color: Specifies the font size of the day.
+ * @prop --calcite-menu-item-active-border-color: Specifies the background color of the day.
+ * @prop --calcite-menu-item-dropdown-icon-color: Specifies the background color of the day.
+ * @prop --calcite-menu-item-breadcrumb-icon-color: Specifies the background color of the day.
+ */
+
 :host {
   @apply flex
   items-center
@@ -7,21 +28,23 @@
   & .container,
   & .item-content,
   & .content {
-    min-block-size: theme("spacing.12");
+    min-block-size: #{$calcite-size-48};
   }
 }
 
 :host([layout="vertical"]) {
-  @apply w-full;
+  inline-size: #{$calcite-size-relative-100};
 }
 
 :host(:not([layout="vertical"])) {
-  @apply h-full;
+  block-size: #{$calcite-size-relative-100};
 }
 
 .container,
 .item-content {
-  @apply flex flex-row w-full h-full items-stretch;
+  @apply flex flex-row items-stretch;
+  inline-size: #{$calcite-size-relative-100};
+  block-size: #{$calcite-size-relative-100};
 }
 
 .content {
@@ -31,82 +54,91 @@
   justify-center
   cursor-pointer
   outline-none
-  text-0
-  text-color-2
-  box-border
-  bg-foreground-1
-  px-4
-  h-full
-  w-full;
+  box-border;
+  font-size: var(--calcite-font-size-0);
+  color: var(--calcite-menu-item-text-color, var(--calcite-color-text-2));
+  background-color: var(--calcite-menu-item-background-color, var(--calcite-color-foreground-1));
+  inline-size: #{$calcite-size-relative-100};
+  block-size: #{$calcite-size-relative-100};
+  padding: var(--calcite-spacing-xl);
   text-decoration: none;
   border-block-end: theme("spacing[0.5]") solid transparent;
-  padding-block-start: theme("spacing[0.5]");
   &:hover {
-    @apply bg-foreground-2 text-color-2;
+    background-color: var(--calcite-menu-item-background-color-hover, var(--calcite-color-foreground-2));
+    color: var(--calcite-menu-item-text-color-hover, var(--calcite-color-text-2));
   }
   &:focus {
-    @apply bg-foreground-2 text-color-2 focus-inset;
+    @apply focus-inset;
+    background-color: var(--calcite-menu-item-background-color-focus, var(--calcite-color-foreground-2));
+    color: var(--calcite-menu-item-text-color-focus, var(--calcite-color-text-2));
   }
   &:active {
-    @apply bg-foreground-3 text-color-1;
+    background-color: var(--calcite-menu-item-background-color-active, var(--calcite-color-foreground-3));
+    color: var(--calcite-menu-item-text-color-active, var(--calcite-color-text-1));
   }
   & span {
     display: inline-flex;
   }
   &.layout--vertical {
     @apply flex w-full justify-start;
-    padding-block: 1rem;
+    padding-block: var(--calcite-spacing-xl);
     border-block-end: 0;
+    //todo
     border-inline-end: theme("spacing.1") solid transparent;
   }
 }
 
 :host([active]) .content {
-  @apply text-color-1;
-  border-color: var(--calcite-color-brand);
-  .icon {
-    --calcite-ui-icon-color: var(--calcite-color-brand);
-  }
+  color: var(--calcite-menu-item-active-text-color, var(--calcite-color-text-1));
+  border-color: var(--calcite-menu-item-active-border-color, var(--calcite-color-brand));
+  // .icon {
+  //   --calcite-icon-color: var(--calcite-menu-item-dropdown-icon-color, var(--calcite-color-brand));
+  // }
 }
 :host([layout="vertical"]) .content {
-  @apply px-3;
+  padding-inline: var(--calcite-spacing-md);
 }
 
 .icon--start {
-  @apply me-3;
+  margin-inline-end: var(--calcite-spacing-md);
 }
 
 .icon--end {
-  @apply ms-3;
+  margin-inline-start: var(--calcite-spacing-md);
 }
 
 :host([layout="vertical"]) .icon--end {
-  @apply ms-auto ps-3;
+  @apply ms-auto;
+  padding-inline-start: var(--calcite-spacing-md);
 }
 
 .icon--dropdown {
-  @apply ms-auto me-0 ps-2 relative;
+  @apply ms-auto me-0 relative;
   --calcite-ui-icon-color: var(--calcite-color-text-3);
+  --calcite-icon-color: var(--calcite-menu-item-dropdown-icon-color, var(--calcite-color-text-3));
 }
 
 :host([layout="vertical"]) .icon--end ~ .icon--dropdown {
-  @apply ms-3;
+  margin-inline-start: var(--calcite-spacing-md);
 }
 
 :host([layout="vertical"]) .hover-href-icon {
-  @apply ps-2;
+  padding-inline-start: var(--calcite-spacing-sm);
 }
+
 :host([layout="vertical"]) .hover-href-icon ~ .icon--end {
-  @apply ms-2;
+  margin-inline-start: var(--calcite-spacing-sm);
 }
 
 :host([layout="vertical"]) .hover-href-icon ~ .icon--breadcrumb {
-  @apply ms-3;
+  margin-inline-start: var(--calcite-spacing-md);
 }
 
 .icon--breadcrumb {
-  @apply ps-2 me-0;
+  @apply me-0;
+  padding-inline-start: var(--calcite-spacing-sm);
   --calcite-ui-icon-color: var(--calcite-color-text-3);
+  --calcite-icon-color: var(--calcite-menu-item-breadcrumb-icon-color, var(--calcite-color-text-3));
 }
 
 :host([layout="vertical"]) .icon--breadcrumb {
@@ -114,23 +146,26 @@
 }
 
 :host([layout="vertical"]) .icon--breadcrumb ~ .icon--dropdown {
-  @apply ms-2;
+  margin-inline-start: var(--calcite-spacing-sm);
 }
 
 :host([layout="vertical"]) .icon--end ~ .icon--breadcrumb {
-  @apply ms-2;
+  margin-inline-start: var(--calcite-spacing-sm);
 }
 
 :host([breadcrumb]) .content {
-  @apply pe-3;
+  padding-inline-end: var(--calcite-spacing-md);
 }
 
+//TODO
 calcite-action {
   @apply relative h-auto;
   border-inline-start: 1px solid var(--calcite-color-foreground-1);
   &:after {
-    @apply block w-px  absolute -start-px;
+    @apply block absolute;
     content: "";
+    inline-size: var(--calcite-spacing-px);
+    inset-inline-start: calc(-1 * var(--calcite-spacing-px));
     inset-block: theme("spacing.3");
     background-color: var(--calcite-color-border-3);
   }
@@ -142,12 +177,12 @@ calcite-action {
 
 .content:focus ~ calcite-action,
 .content:hover ~ calcite-action {
-  @apply text-color-1;
-  border-inline-start: 1px solid var(--calcite-color-border-3);
+  //@apply text-color-1;
+  //border-inline-start: 1px solid var(--calcite-color-border-3);
 }
 
 .container:hover .dropdown-action {
-  @apply bg-foreground-2;
+  //background-color: var(--calcite-color-foreground-2);
 }
 
 .dropdown-menu-items {
@@ -161,7 +196,7 @@ calcite-action {
   }
   &.nested {
     @apply absolute;
-    inset-block-start: -1px;
+    inset-block-start: calc(-1 * var(--calcite-spacing-px));
     transform: translateX(calc(100% - 2px));
   }
 }
@@ -172,6 +207,7 @@ calcite-action {
 
 .dropdown--vertical.dropdown-menu-items {
   @apply relative rounded-none;
+  border-radius: var(--calcite-corner-radius);
   box-shadow: none;
   inset-block-start: 0;
   transform: none;
@@ -197,13 +233,15 @@ calcite-action {
 }
 
 .hover-href-icon {
-  @apply ms-auto relative end-1 opacity-0;
+  @apply ms-auto relative opacity-0;
+  inset-inline-end: var(--calcite-spacing-xxs);
   transition: all var(--calcite-internal-animation-timing-medium) ease-in-out;
 }
 
 .content:focus .hover-href-icon,
 .content:hover .hover-href-icon {
-  @apply opacity-100 -end-1;
+  opacity: var(--calcite-opacity-full);
+  inset-inline-end: calc(-1 * var(--calcite-spacing-xxs));
 }
 
 @include base-component();

From 41348e777a446d0a8690ddb98bbdf4814f88f860 Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Wed, 28 Feb 2024 11:01:29 -0600
Subject: [PATCH 02/17] update prop descriptions

---
 .../src/components/menu-item/menu-item.scss   | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/calcite-components/src/components/menu-item/menu-item.scss b/packages/calcite-components/src/components/menu-item/menu-item.scss
index 5fbee1c3904..c29dc629313 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.scss
+++ b/packages/calcite-components/src/components/menu-item/menu-item.scss
@@ -5,18 +5,18 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-menu-item-text-color: Specifies the border radius of the component.
- * @prop --calcite-menu-item-text-color-hover: Specifies the border color of the component.
- * @prop --calcite-menu-item-text-color-selected: Specifies the border color of week headers.
- * @prop --calcite-menu-item-text-color-active: Specifies the border color of week headers.
- * @prop --calcite-menu-item-background-color: Specifies the text color of week headers.
- * @prop --calcite-menu-item-background-color-hover: Specifies the text color of day.
- * @prop --calcite-menu-item-background-color-focused: Specifies the text color of day when active.
- * @prop --calcite-menu-item-background-color-active: Specifies the text color of day when selected.
- * @prop --calcite-menu-item-active-text-color: Specifies the font size of the day.
- * @prop --calcite-menu-item-active-border-color: Specifies the background color of the day.
- * @prop --calcite-menu-item-dropdown-icon-color: Specifies the background color of the day.
- * @prop --calcite-menu-item-breadcrumb-icon-color: Specifies the background color of the day.
+ * @prop --calcite-menu-item-text-color: Specifies the text color of the component.
+ * @prop --calcite-menu-item-text-color-hover: Specifies the text color of the component when hover.
+ * @prop --calcite-menu-item-text-color-selected: Specifies the text color of the component when selected.
+ * @prop --calcite-menu-item-text-color-active: Specifies the text color of the component when active.
+ * @prop --calcite-menu-item-background-color: Specifies the background color of the component.
+ * @prop --calcite-menu-item-background-color-hover: Specifies the background color of the component when hover.
+ * @prop --calcite-menu-item-background-color-focused: Specifies the background color of the component when focused.
+ * @prop --calcite-menu-item-background-color-active: Specifies the background color of the component when active.
+ * @prop --calcite-menu-item-active-text-color: Specifies the text color of the component when `active` property is true.
+ * @prop --calcite-menu-item-active-border-color: Specifies the border color of the component when `active` property is true.
+ * @prop --calcite-menu-item-dropdown-icon-color: Specifies the color of the dropdown icon when sub-menu items are slotted.
+ * @prop --calcite-menu-item-breadcrumb-icon-color: Specifies the color of the breadcrumb icon when sub-menu items are slotted.
  */
 
 :host {

From 898dd1abd375d26ab60b9641e969ec81708c3cd1 Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Wed, 28 Feb 2024 18:35:39 -0600
Subject: [PATCH 03/17] add tokens for submenu

---
 .../src/components/menu-item/menu-item.scss   | 47 ++++++++++---------
 1 file changed, 25 insertions(+), 22 deletions(-)

diff --git a/packages/calcite-components/src/components/menu-item/menu-item.scss b/packages/calcite-components/src/components/menu-item/menu-item.scss
index c29dc629313..443b2a834f6 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.scss
+++ b/packages/calcite-components/src/components/menu-item/menu-item.scss
@@ -7,16 +7,15 @@
  *
  * @prop --calcite-menu-item-text-color: Specifies the text color of the component.
  * @prop --calcite-menu-item-text-color-hover: Specifies the text color of the component when hover.
- * @prop --calcite-menu-item-text-color-selected: Specifies the text color of the component when selected.
  * @prop --calcite-menu-item-text-color-active: Specifies the text color of the component when active.
  * @prop --calcite-menu-item-background-color: Specifies the background color of the component.
  * @prop --calcite-menu-item-background-color-hover: Specifies the background color of the component when hover.
- * @prop --calcite-menu-item-background-color-focused: Specifies the background color of the component when focused.
  * @prop --calcite-menu-item-background-color-active: Specifies the background color of the component when active.
- * @prop --calcite-menu-item-active-text-color: Specifies the text color of the component when `active` property is true.
- * @prop --calcite-menu-item-active-border-color: Specifies the border color of the component when `active` property is true.
  * @prop --calcite-menu-item-dropdown-icon-color: Specifies the color of the dropdown icon when sub-menu items are slotted.
+ * @prop --calcite-menu-item-dropdown-icon-color-active: Specifies the color of the dropdown icon when active.
  * @prop --calcite-menu-item-breadcrumb-icon-color: Specifies the color of the breadcrumb icon when sub-menu items are slotted.
+ * @prop --calcite-menu-item-sub-menu-border-color: Specifies the border color of sub-menu.
+ * @porp --calcite-menu-item-sub-menu-background-color: Specifies the background color of sub-menu.
  */
 
 :host {
@@ -72,10 +71,7 @@
     background-color: var(--calcite-menu-item-background-color-focus, var(--calcite-color-foreground-2));
     color: var(--calcite-menu-item-text-color-focus, var(--calcite-color-text-2));
   }
-  &:active {
-    background-color: var(--calcite-menu-item-background-color-active, var(--calcite-color-foreground-3));
-    color: var(--calcite-menu-item-text-color-active, var(--calcite-color-text-1));
-  }
+
   & span {
     display: inline-flex;
   }
@@ -83,18 +79,20 @@
     @apply flex w-full justify-start;
     padding-block: var(--calcite-spacing-xl);
     border-block-end: 0;
-    //todo
     border-inline-end: theme("spacing.1") solid transparent;
   }
 }
 
+.content:active,
 :host([active]) .content {
-  color: var(--calcite-menu-item-active-text-color, var(--calcite-color-text-1));
-  border-color: var(--calcite-menu-item-active-border-color, var(--calcite-color-brand));
-  // .icon {
-  //   --calcite-icon-color: var(--calcite-menu-item-dropdown-icon-color, var(--calcite-color-brand));
-  // }
+  background-color: var(--calcite-menu-item-background-color-active, var(--calcite-color-foreground-3));
+  color: var(--calcite-menu-item-text-color-active, var(--calcite-color-text-1));
+  border-color: var(--calcite-menu-item-border-color-active, var(--calcite-color-brand));
+  .icon {
+    --calcite-icon-color: var(--calcite-menu-item-dropdown-icon-color-active, var(--calcite-color-brand));
+  }
 }
+
 :host([layout="vertical"]) .content {
   padding-inline: var(--calcite-spacing-md);
 }
@@ -175,20 +173,25 @@ calcite-action {
   }
 }
 
+// TODO
+// extends the broder inline of calcite action when hovered on content
 .content:focus ~ calcite-action,
 .content:hover ~ calcite-action {
-  //@apply text-color-1;
-  //border-inline-start: 1px solid var(--calcite-color-border-3);
+  @apply text-color-1;
+  border-inline-start: 1px solid var(--calcite-color-border-3);
 }
 
-.container:hover .dropdown-action {
-  //background-color: var(--calcite-color-foreground-2);
-}
+//do we need this?
+// .container:hover .dropdown-action {
+//   background-color: var(--calcite-color-foreground-2);
+// }
 
 .dropdown-menu-items {
   @apply absolute h-auto flex-col hidden overflow-visible min-w-full;
-  border: 1px solid var(--calcite-color-border-3);
-  background: var(--calcite-color-foreground-1);
+  border-width: var(calcite-spacing-px);
+  border-style: solid;
+  border-color: var(--calcite-menu-item-sub-menu-border-color, var(--calcite-color-border-3));
+  background: var(--calcite-menu-item-sub-menu-background-color, var(--calcite-color-foreground-1));
   inset-block-start: 100%;
   z-index: theme("zIndex.dropdown");
   &.open {
@@ -207,7 +210,7 @@ calcite-action {
 
 .dropdown--vertical.dropdown-menu-items {
   @apply relative rounded-none;
-  border-radius: var(--calcite-corner-radius);
+  border-radius: var(--calcite-menu-item-sub-menu-border-radius, var(--calcite-corner-radius));
   box-shadow: none;
   inset-block-start: 0;
   transform: none;

From 4d0a460bad7f7a9fb6bdb9e44b063174480b1be4 Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Fri, 1 Mar 2024 11:31:09 -0600
Subject: [PATCH 04/17] refactor

---
 .../src/components/menu-item/menu-item.scss    | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/packages/calcite-components/src/components/menu-item/menu-item.scss b/packages/calcite-components/src/components/menu-item/menu-item.scss
index 443b2a834f6..429088ae090 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.scss
+++ b/packages/calcite-components/src/components/menu-item/menu-item.scss
@@ -11,11 +11,9 @@
  * @prop --calcite-menu-item-background-color: Specifies the background color of the component.
  * @prop --calcite-menu-item-background-color-hover: Specifies the background color of the component when hover.
  * @prop --calcite-menu-item-background-color-active: Specifies the background color of the component when active.
- * @prop --calcite-menu-item-dropdown-icon-color: Specifies the color of the dropdown icon when sub-menu items are slotted.
- * @prop --calcite-menu-item-dropdown-icon-color-active: Specifies the color of the dropdown icon when active.
+ * @prop --calcite-menu-item-chevron-icon-color: Specifies the color of the dropdown icon when sub-menu items are slotted.
+ * @prop --calcite-menu-item-chevron-icon-color-active: Specifies the color of the dropdown icon when active.
  * @prop --calcite-menu-item-breadcrumb-icon-color: Specifies the color of the breadcrumb icon when sub-menu items are slotted.
- * @prop --calcite-menu-item-sub-menu-border-color: Specifies the border color of sub-menu.
- * @porp --calcite-menu-item-sub-menu-background-color: Specifies the background color of sub-menu.
  */
 
 :host {
@@ -89,7 +87,7 @@
   color: var(--calcite-menu-item-text-color-active, var(--calcite-color-text-1));
   border-color: var(--calcite-menu-item-border-color-active, var(--calcite-color-brand));
   .icon {
-    --calcite-icon-color: var(--calcite-menu-item-dropdown-icon-color-active, var(--calcite-color-brand));
+    --calcite-icon-color: var(--calcite-menu-item-chevron-icon-color-active, var(--calcite-color-brand));
   }
 }
 
@@ -113,7 +111,7 @@
 .icon--dropdown {
   @apply ms-auto me-0 relative;
   --calcite-ui-icon-color: var(--calcite-color-text-3);
-  --calcite-icon-color: var(--calcite-menu-item-dropdown-icon-color, var(--calcite-color-text-3));
+  --calcite-icon-color: var(--calcite-menu-item-chevron-icon-color, var(--calcite-color-text-3));
 }
 
 :host([layout="vertical"]) .icon--end ~ .icon--dropdown {
@@ -190,8 +188,8 @@ calcite-action {
   @apply absolute h-auto flex-col hidden overflow-visible min-w-full;
   border-width: var(calcite-spacing-px);
   border-style: solid;
-  border-color: var(--calcite-menu-item-sub-menu-border-color, var(--calcite-color-border-3));
-  background: var(--calcite-menu-item-sub-menu-background-color, var(--calcite-color-foreground-1));
+  border-color: var(--calcite-color-border-3);
+  background: var(--calcite-menu-item-background-color);
   inset-block-start: 100%;
   z-index: theme("zIndex.dropdown");
   &.open {
@@ -209,8 +207,8 @@ calcite-action {
 }
 
 .dropdown--vertical.dropdown-menu-items {
-  @apply relative rounded-none;
-  border-radius: var(--calcite-menu-item-sub-menu-border-radius, var(--calcite-corner-radius));
+  @apply relative;
+  border-radius: var(--calcite-corner-radius);
   box-shadow: none;
   inset-block-start: 0;
   transform: none;

From ba9fbc36860b508a652e262449bdcedf2e55333f Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Fri, 1 Mar 2024 16:08:46 -0600
Subject: [PATCH 05/17] add back sub-menu tokens for border-radius &
 border-color

---
 .../src/components/menu-item/menu-item.scss                 | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/calcite-components/src/components/menu-item/menu-item.scss b/packages/calcite-components/src/components/menu-item/menu-item.scss
index 429088ae090..79ac8c2ab9a 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.scss
+++ b/packages/calcite-components/src/components/menu-item/menu-item.scss
@@ -14,6 +14,8 @@
  * @prop --calcite-menu-item-chevron-icon-color: Specifies the color of the dropdown icon when sub-menu items are slotted.
  * @prop --calcite-menu-item-chevron-icon-color-active: Specifies the color of the dropdown icon when active.
  * @prop --calcite-menu-item-breadcrumb-icon-color: Specifies the color of the breadcrumb icon when sub-menu items are slotted.
+ * @prop --calcite-menu-item-sub-menu-border-color: Specifies the border color of sub-menu.
+ * @prop --calcite-menu-item-sub-menu-border-radius: Specifies the border radius of sub-menu.
  */
 
 :host {
@@ -188,7 +190,7 @@ calcite-action {
   @apply absolute h-auto flex-col hidden overflow-visible min-w-full;
   border-width: var(calcite-spacing-px);
   border-style: solid;
-  border-color: var(--calcite-color-border-3);
+  border-color: var(--calcite-menu-item-sub-menu-border-color, var(--calcite-color-border-3));
   background: var(--calcite-menu-item-background-color);
   inset-block-start: 100%;
   z-index: theme("zIndex.dropdown");
@@ -208,7 +210,7 @@ calcite-action {
 
 .dropdown--vertical.dropdown-menu-items {
   @apply relative;
-  border-radius: var(--calcite-corner-radius);
+  border-radius: var(--calcite-menu-item-sub-menu-border-radius, var(--calcite-corner-radius));
   box-shadow: none;
   inset-block-start: 0;
   transform: none;

From 67a3e1a9b6239def27c443b4af21ad94fda96891 Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Fri, 1 Mar 2024 17:14:02 -0600
Subject: [PATCH 06/17] refactor

---
 .../src/components/menu-item/menu-item.scss   | 29 ++++++++-----------
 1 file changed, 12 insertions(+), 17 deletions(-)

diff --git a/packages/calcite-components/src/components/menu-item/menu-item.scss b/packages/calcite-components/src/components/menu-item/menu-item.scss
index 568b2f2f902..9bb3576ff36 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.scss
+++ b/packages/calcite-components/src/components/menu-item/menu-item.scss
@@ -3,22 +3,22 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-menu-item-text-color: Specifies the text color of the component.
- * @prop --calcite-menu-item-text-color-hover: Specifies the text color of the component when hover.
- * @prop --calcite-menu-item-text-color-active: Specifies the text color of the component when active.
- * @prop --calcite-menu-item-background-color: Specifies the background color of the component.
- * @prop --calcite-menu-item-background-color-hover: Specifies the background color of the component when hover.
+ * @prop --calcite-menu-item-action-background-color-active: defines the background color of an action sub-component when active.
+ * @prop --calcite-menu-item-action-background-color-hover: defines the background color of an action sub-component when hovered or focused.
+ * @prop --calcite-menu-item-action-background-color: defines the background color of an action sub-component inside a menu-item.
+ * @prop --calcite-menu-item-action-menu-border-color: The border color of the sub-component.
+ * @prop --calcite-menu-item-action-menu-text-color: The text color of the sub-component.
  * @prop --calcite-menu-item-background-color-active: Specifies the background color of the component when active.
- * @prop --calcite-menu-item-chevron-icon-color: Specifies the color of the dropdown icon when sub-menu items are slotted.
- * @prop --calcite-menu-item-chevron-icon-color-active: Specifies the color of the dropdown icon when active.
+ * @prop --calcite-menu-item-background-color-hover: Specifies the background color of the component when hover.
+ * @prop --calcite-menu-item-background-color: Specifies the background color of the component.
  * @prop --calcite-menu-item-breadcrumb-icon-color: Specifies the color of the breadcrumb icon when sub-menu items are slotted.
+ * @prop --calcite-menu-item-chevron-icon-color-active: Specifies the color of the dropdown icon when active.
+ * @prop --calcite-menu-item-chevron-icon-color: Specifies the color of the dropdown icon when sub-menu items are slotted.
  * @prop --calcite-menu-item-sub-menu-border-color: Specifies the border color of sub-menu.
  * @prop --calcite-menu-item-sub-menu-border-radius: Specifies the border radius of sub-menu.
- * @prop --calcite-menu-item-action-background-color: defines the background color of an action sub-component inside a menu-item.
- * @prop --calcite-menu-item-action-background-color-hover: defines the background color of an action sub-component when hovered or focused.
- * @prop --calcite-menu-item-action-background-color-active: defines the background color of an action sub-component when active.
- * @prop --calcite-menu-item-action-menu-border-color: The border color of the sub-component.
- * @prop --calcite-menu-item-action-menu-text-color: The text color of the sub-component.
+ * @prop --calcite-menu-item-text-color-active: Specifies the text color of the component when active.
+ * @prop --calcite-menu-item-text-color-hover: Specifies the text color of the component when hover.
+ * @prop --calcite-menu-item-text-color: Specifies the text color of the component.
  */
 
 :host {
@@ -195,11 +195,6 @@ calcite-action {
   border-inline-start: 1px solid var(--calcite-color-border-3);
 }
 
-//do we need this?
-// .container:hover .dropdown-action {
-//   background-color: var(--calcite-color-foreground-2);
-// }
-
 .dropdown-menu-items {
   @apply absolute h-auto flex-col hidden overflow-visible min-w-full;
   border-width: var(calcite-spacing-px);

From 4bd904e75c0fcd4f86185f35340d2c62c9cbc9df Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Fri, 1 Mar 2024 17:15:33 -0600
Subject: [PATCH 07/17] clean up

---
 .../calcite-components/src/components/menu-item/menu-item.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/menu-item/menu-item.scss b/packages/calcite-components/src/components/menu-item/menu-item.scss
index 9bb3576ff36..78fe11e512c 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.scss
+++ b/packages/calcite-components/src/components/menu-item/menu-item.scss
@@ -19,6 +19,7 @@
  * @prop --calcite-menu-item-text-color-active: Specifies the text color of the component when active.
  * @prop --calcite-menu-item-text-color-hover: Specifies the text color of the component when hover.
  * @prop --calcite-menu-item-text-color: Specifies the text color of the component.
+ *
  */
 
 :host {
@@ -188,7 +189,7 @@ calcite-action {
 }
 
 // TODO
-// extends the broder inline of calcite action when hovered on content
+// extends the broder block of calcite action when hovered on content
 .content:focus ~ calcite-action,
 .content:hover ~ calcite-action {
   @apply text-color-1;

From 60063364804a1d9ced3e0e3c70cda56b9f2bcc31 Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Tue, 5 Mar 2024 12:53:44 -0600
Subject: [PATCH 08/17] fix regression

---
 .../src/components/menu-item/menu-item.scss            | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/calcite-components/src/components/menu-item/menu-item.scss b/packages/calcite-components/src/components/menu-item/menu-item.scss
index 78fe11e512c..d4f6bb4614d 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.scss
+++ b/packages/calcite-components/src/components/menu-item/menu-item.scss
@@ -6,8 +6,10 @@
  * @prop --calcite-menu-item-action-background-color-active: defines the background color of an action sub-component when active.
  * @prop --calcite-menu-item-action-background-color-hover: defines the background color of an action sub-component when hovered or focused.
  * @prop --calcite-menu-item-action-background-color: defines the background color of an action sub-component inside a menu-item.
+ * @prop --calcite-menu-item-action-border-color: Specifies the border inline start color of an action sub-component.
  * @prop --calcite-menu-item-action-menu-border-color: The border color of the sub-component.
  * @prop --calcite-menu-item-action-menu-text-color: The text color of the sub-component.
+ * @prop --calcite-menu-item-action-text-color: Specifies the text color of an action sub component.
  * @prop --calcite-menu-item-background-color-active: Specifies the background color of the component when active.
  * @prop --calcite-menu-item-background-color-hover: Specifies the background color of the component when hover.
  * @prop --calcite-menu-item-background-color: Specifies the background color of the component.
@@ -19,7 +21,6 @@
  * @prop --calcite-menu-item-text-color-active: Specifies the text color of the component when active.
  * @prop --calcite-menu-item-text-color-hover: Specifies the text color of the component when hover.
  * @prop --calcite-menu-item-text-color: Specifies the text color of the component.
- *
  */
 
 :host {
@@ -63,7 +64,8 @@
   background-color: var(--calcite-menu-item-background-color, var(--calcite-color-foreground-1));
   inline-size: #{$calcite-size-relative-100};
   block-size: #{$calcite-size-relative-100};
-  padding: var(--calcite-spacing-xl);
+  padding-inline: var(--calcite-spacing-xl);
+  padding-block-start: var(--calcite-spacing-base);
   text-decoration: none;
   border-block-end: theme("spacing[0.5]") solid transparent;
   &:hover {
@@ -192,8 +194,8 @@ calcite-action {
 // extends the broder block of calcite action when hovered on content
 .content:focus ~ calcite-action,
 .content:hover ~ calcite-action {
-  @apply text-color-1;
-  border-inline-start: 1px solid var(--calcite-color-border-3);
+  --calcite-action-text-color: var(--calcite-menu-item-action-text-color, var(--calcite-color-text-1));
+  border-inline-start: 1px solid var(--calcite-menu-item-action-border-color, var(--calcite-color-border-3));
 }
 
 .dropdown-menu-items {

From a2cb314536df615151d01e7658e9a46cf7f55645 Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Tue, 5 Mar 2024 15:53:47 -0600
Subject: [PATCH 09/17] add missing pading

---
 .../src/components/menu-item/menu-item.scss                | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/calcite-components/src/components/menu-item/menu-item.scss b/packages/calcite-components/src/components/menu-item/menu-item.scss
index d4f6bb4614d..fd7b71d756b 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.scss
+++ b/packages/calcite-components/src/components/menu-item/menu-item.scss
@@ -118,6 +118,7 @@
 
 .icon--dropdown {
   @apply ms-auto me-0 relative;
+  padding-inline: var(--calcite-spacing-xxs);
   --calcite-ui-icon-color: var(--calcite-color-text-3);
   --calcite-icon-color: var(--calcite-menu-item-chevron-icon-color, var(--calcite-color-text-3));
 }
@@ -161,7 +162,6 @@
   padding-inline-end: var(--calcite-spacing-md);
 }
 
-//TODO
 calcite-action {
   --calcite-action-background-color: var(--calcite-menu-item-action-background-color);
 
@@ -190,7 +190,6 @@ calcite-action {
   }
 }
 
-// TODO
 // extends the broder block of calcite action when hovered on content
 .content:focus ~ calcite-action,
 .content:hover ~ calcite-action {
@@ -200,9 +199,7 @@ calcite-action {
 
 .dropdown-menu-items {
   @apply absolute h-auto flex-col hidden overflow-visible min-w-full;
-  border-width: var(calcite-spacing-px);
-  border-style: solid;
-  border-color: var(--calcite-menu-item-sub-menu-border-color, var(--calcite-color-border-3));
+  border: 1px solid var(--calcite-menu-item-sub-menu-border-color, var(--calcite-color-border-3));
   background: var(--calcite-menu-item-background-color);
   inset-block-start: 100%;
   z-index: theme("zIndex.dropdown");

From faf8809ed0d3aaec3b7c32f4f9d65e487837fa16 Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Tue, 5 Mar 2024 16:28:15 -0600
Subject: [PATCH 10/17] cleanup

---
 .../calcite-components/src/components/menu-item/menu-item.scss  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/menu-item/menu-item.scss b/packages/calcite-components/src/components/menu-item/menu-item.scss
index fd7b71d756b..5198b575e88 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.scss
+++ b/packages/calcite-components/src/components/menu-item/menu-item.scss
@@ -118,7 +118,7 @@
 
 .icon--dropdown {
   @apply ms-auto me-0 relative;
-  padding-inline: var(--calcite-spacing-xxs);
+  padding-inline-start: var(--calcite-spacing-xxs);
   --calcite-ui-icon-color: var(--calcite-color-text-3);
   --calcite-icon-color: var(--calcite-menu-item-chevron-icon-color, var(--calcite-color-text-3));
 }

From 12b246469d921594e70a696c8a19c5b3ea8adec5 Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Tue, 5 Mar 2024 16:37:53 -0600
Subject: [PATCH 11/17] fix more regressions

---
 .../calcite-components/src/components/menu-item/menu-item.scss  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/menu-item/menu-item.scss b/packages/calcite-components/src/components/menu-item/menu-item.scss
index 5198b575e88..6bb136436e4 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.scss
+++ b/packages/calcite-components/src/components/menu-item/menu-item.scss
@@ -118,7 +118,7 @@
 
 .icon--dropdown {
   @apply ms-auto me-0 relative;
-  padding-inline-start: var(--calcite-spacing-xxs);
+  padding-inline-start: var(--calcite-spacing-sm);
   --calcite-ui-icon-color: var(--calcite-color-text-3);
   --calcite-icon-color: var(--calcite-menu-item-chevron-icon-color, var(--calcite-color-text-3));
 }

From 8e54fa95e05ec078ce362ccba1a45cb4a2db0e4a Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Thu, 7 Mar 2024 13:24:25 -0600
Subject: [PATCH 12/17] refactor and remove stateful tokens

---
 .../src/components/menu-item/menu-item.scss   | 33 +++++++------------
 1 file changed, 11 insertions(+), 22 deletions(-)

diff --git a/packages/calcite-components/src/components/menu-item/menu-item.scss b/packages/calcite-components/src/components/menu-item/menu-item.scss
index 6bb136436e4..dcf6c3e0289 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.scss
+++ b/packages/calcite-components/src/components/menu-item/menu-item.scss
@@ -7,19 +7,13 @@
  * @prop --calcite-menu-item-action-background-color-hover: defines the background color of an action sub-component when hovered or focused.
  * @prop --calcite-menu-item-action-background-color: defines the background color of an action sub-component inside a menu-item.
  * @prop --calcite-menu-item-action-border-color: Specifies the border inline start color of an action sub-component.
- * @prop --calcite-menu-item-action-menu-border-color: The border color of the sub-component.
- * @prop --calcite-menu-item-action-menu-text-color: The text color of the sub-component.
  * @prop --calcite-menu-item-action-text-color: Specifies the text color of an action sub component.
- * @prop --calcite-menu-item-background-color-active: Specifies the background color of the component when active.
- * @prop --calcite-menu-item-background-color-hover: Specifies the background color of the component when hover.
  * @prop --calcite-menu-item-background-color: Specifies the background color of the component.
  * @prop --calcite-menu-item-breadcrumb-icon-color: Specifies the color of the breadcrumb icon when sub-menu items are slotted.
  * @prop --calcite-menu-item-chevron-icon-color-active: Specifies the color of the dropdown icon when active.
  * @prop --calcite-menu-item-chevron-icon-color: Specifies the color of the dropdown icon when sub-menu items are slotted.
  * @prop --calcite-menu-item-sub-menu-border-color: Specifies the border color of sub-menu.
- * @prop --calcite-menu-item-sub-menu-border-radius: Specifies the border radius of sub-menu.
- * @prop --calcite-menu-item-text-color-active: Specifies the text color of the component when active.
- * @prop --calcite-menu-item-text-color-hover: Specifies the text color of the component when hover.
+ * @prop --calcite-menu-item-sub-menu-corner-radius: Specifies the border radius of sub-menu.
  * @prop --calcite-menu-item-text-color: Specifies the text color of the component.
  */
 
@@ -59,7 +53,7 @@
   cursor-pointer
   outline-none
   box-border;
-  font-size: var(--calcite-font-size-0);
+  font-size: var(calcite-font-size-md);
   color: var(--calcite-menu-item-text-color, var(--calcite-color-text-2));
   background-color: var(--calcite-menu-item-background-color, var(--calcite-color-foreground-1));
   inline-size: #{$calcite-size-relative-100};
@@ -67,15 +61,15 @@
   padding-inline: var(--calcite-spacing-xl);
   padding-block-start: var(--calcite-spacing-base);
   text-decoration: none;
-  border-block-end: theme("spacing[0.5]") solid transparent;
+  border-block-end: var(--calcite-spacing-base) solid var(--calcite-menu-item-border-color, transparent);
   &:hover {
-    background-color: var(--calcite-menu-item-background-color-hover, var(--calcite-color-foreground-2));
-    color: var(--calcite-menu-item-text-color-hover, var(--calcite-color-text-2));
+    --calcite-menu-item-background-color: var(--calcite-color-foreground-2);
+    --calcite-menu-item-text-color: var(--calcite-color-text-2);
   }
   &:focus {
     @apply focus-inset;
-    background-color: var(--calcite-menu-item-background-color-focus, var(--calcite-color-foreground-2));
-    color: var(--calcite-menu-item-text-color-focus, var(--calcite-color-text-2));
+    --calcite-menu-item-background-color: var(--calcite-color-foreground-2);
+    --calcite-menu-item-text-color: var(--calcite-color-text-2);
   }
 
   & span {
@@ -91,9 +85,9 @@
 
 .content:active,
 :host([active]) .content {
-  background-color: var(--calcite-menu-item-background-color-active, var(--calcite-color-foreground-3));
-  color: var(--calcite-menu-item-text-color-active, var(--calcite-color-text-1));
-  border-color: var(--calcite-menu-item-border-color-active, var(--calcite-color-brand));
+  --calcite-menu-item-background-color: var(--calcite-color-foreground-3);
+  --calcite-menu-item-text-color: var(--calcite-color-text-1);
+  --calcite-menu-item-border-color: var(--calcite-color-brand);
   .icon {
     --calcite-icon-color: var(--calcite-menu-item-chevron-icon-color-active, var(--calcite-color-brand));
   }
@@ -219,7 +213,7 @@ calcite-action {
 
 .dropdown--vertical.dropdown-menu-items {
   @apply relative;
-  border-radius: var(--calcite-menu-item-sub-menu-border-radius, var(--calcite-corner-radius));
+  border-radius: var(--calcite-menu-item-sub-menu-corner-radius, var(--calcite-corner-radius));
   box-shadow: none;
   inset-block-start: 0;
   transform: none;
@@ -256,9 +250,4 @@ calcite-action {
   inset-inline-end: calc(-1 * var(--calcite-spacing-xxs));
 }
 
-calcite-action-menu {
-  --calcite-action-menu-border-color: var(--calcite-menu-item-action-menu-border-color);
-  --calcite-action-menu-text-color: var(--calcite-menu-item-action-menu-text-color);
-}
-
 @include base-component();

From 515aab0ffb1803a9c5bed2b596f73602c4fa5bbf Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Thu, 7 Mar 2024 15:47:02 -0600
Subject: [PATCH 13/17] fix regression

---
 .../src/components/menu-item/menu-item.scss                   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/calcite-components/src/components/menu-item/menu-item.scss b/packages/calcite-components/src/components/menu-item/menu-item.scss
index dcf6c3e0289..e259edb457e 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.scss
+++ b/packages/calcite-components/src/components/menu-item/menu-item.scss
@@ -53,7 +53,7 @@
   cursor-pointer
   outline-none
   box-border;
-  font-size: var(calcite-font-size-md);
+  font-size: var(--calcite-font-size-md);
   color: var(--calcite-menu-item-text-color, var(--calcite-color-text-2));
   background-color: var(--calcite-menu-item-background-color, var(--calcite-color-foreground-1));
   inline-size: #{$calcite-size-relative-100};
@@ -79,7 +79,7 @@
     @apply flex w-full justify-start;
     padding-block: var(--calcite-spacing-xl);
     border-block-end: 0;
-    border-inline-end: theme("spacing.1") solid transparent;
+    border-inline-end: var(--calcite-spacing-xxs) solid var(--calcite-menu-item-border-color, transparent);
   }
 }
 

From b09aa31833b37927b6996b6e66755c893e7c5258 Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Fri, 8 Mar 2024 11:06:58 -0600
Subject: [PATCH 14/17] add back stateful tokens

---
 .../src/components/menu-item/menu-item.scss   | 51 +++++--------------
 1 file changed, 13 insertions(+), 38 deletions(-)

diff --git a/packages/calcite-components/src/components/menu-item/menu-item.scss b/packages/calcite-components/src/components/menu-item/menu-item.scss
index e259edb457e..73d2bad4dca 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.scss
+++ b/packages/calcite-components/src/components/menu-item/menu-item.scss
@@ -7,13 +7,19 @@
  * @prop --calcite-menu-item-action-background-color-hover: defines the background color of an action sub-component when hovered or focused.
  * @prop --calcite-menu-item-action-background-color: defines the background color of an action sub-component inside a menu-item.
  * @prop --calcite-menu-item-action-border-color: Specifies the border inline start color of an action sub-component.
+ * @prop --calcite-menu-item-action-menu-border-color: The border color of the sub-component.
+ * @prop --calcite-menu-item-action-menu-text-color: The text color of the sub-component.
  * @prop --calcite-menu-item-action-text-color: Specifies the text color of an action sub component.
+ * @prop --calcite-menu-item-background-color-active: Specifies the background color of the component when active.
+ * @prop --calcite-menu-item-background-color-hover: Specifies the background color of the component when hover.
  * @prop --calcite-menu-item-background-color: Specifies the background color of the component.
  * @prop --calcite-menu-item-breadcrumb-icon-color: Specifies the color of the breadcrumb icon when sub-menu items are slotted.
  * @prop --calcite-menu-item-chevron-icon-color-active: Specifies the color of the dropdown icon when active.
  * @prop --calcite-menu-item-chevron-icon-color: Specifies the color of the dropdown icon when sub-menu items are slotted.
  * @prop --calcite-menu-item-sub-menu-border-color: Specifies the border color of sub-menu.
  * @prop --calcite-menu-item-sub-menu-corner-radius: Specifies the border radius of sub-menu.
+ * @prop --calcite-menu-item-text-color-active: Specifies the text color of the component when active.
+ * @prop --calcite-menu-item-text-color-hover: Specifies the text color of the component when hover.
  * @prop --calcite-menu-item-text-color: Specifies the text color of the component.
  */
 
@@ -29,22 +35,18 @@
     min-block-size: #{$calcite-size-48};
   }
 }
-
 :host([layout="vertical"]) {
   inline-size: #{$calcite-size-relative-100};
 }
-
 :host(:not([layout="vertical"])) {
   block-size: #{$calcite-size-relative-100};
 }
-
 .container,
 .item-content {
   @apply flex flex-row items-stretch;
   inline-size: #{$calcite-size-relative-100};
   block-size: #{$calcite-size-relative-100};
 }
-
 .content {
   @apply flex
   items-center
@@ -63,13 +65,13 @@
   text-decoration: none;
   border-block-end: var(--calcite-spacing-base) solid var(--calcite-menu-item-border-color, transparent);
   &:hover {
-    --calcite-menu-item-background-color: var(--calcite-color-foreground-2);
-    --calcite-menu-item-text-color: var(--calcite-color-text-2);
+    background-color: var(--calcite-menu-item-background-color-hover, var(--calcite-color-foreground-2));
+    color: var(--calcite-menu-item-text-color-hover, var(--calcite-color-text-2));
   }
   &:focus {
     @apply focus-inset;
-    --calcite-menu-item-background-color: var(--calcite-color-foreground-2);
-    --calcite-menu-item-text-color: var(--calcite-color-text-2);
+    background-color: var(--calcite-menu-item-background-color-focus, var(--calcite-color-foreground-2));
+    color: var(--calcite-menu-item-text-color-focus, var(--calcite-color-text-2));
   }
 
   & span {
@@ -85,80 +87,64 @@
 
 .content:active,
 :host([active]) .content {
-  --calcite-menu-item-background-color: var(--calcite-color-foreground-3);
-  --calcite-menu-item-text-color: var(--calcite-color-text-1);
-  --calcite-menu-item-border-color: var(--calcite-color-brand);
+  background-color: var(--calcite-menu-item-background-color-active, var(--calcite-color-foreground-3));
+  color: var(--calcite-menu-item-text-color-active, var(--calcite-color-text-1));
+  border-color: var(--calcite-menu-item-border-color-active, var(--calcite-color-brand));
   .icon {
     --calcite-icon-color: var(--calcite-menu-item-chevron-icon-color-active, var(--calcite-color-brand));
   }
 }
-
 :host([layout="vertical"]) .content {
   padding-inline: var(--calcite-spacing-md);
 }
-
 .icon--start {
   margin-inline-end: var(--calcite-spacing-md);
 }
-
 .icon--end {
   margin-inline-start: var(--calcite-spacing-md);
 }
-
 :host([layout="vertical"]) .icon--end {
   @apply ms-auto;
   padding-inline-start: var(--calcite-spacing-md);
 }
-
 .icon--dropdown {
   @apply ms-auto me-0 relative;
   padding-inline-start: var(--calcite-spacing-sm);
   --calcite-ui-icon-color: var(--calcite-color-text-3);
   --calcite-icon-color: var(--calcite-menu-item-chevron-icon-color, var(--calcite-color-text-3));
 }
-
 :host([layout="vertical"]) .icon--end ~ .icon--dropdown {
   margin-inline-start: var(--calcite-spacing-md);
 }
-
 :host([layout="vertical"]) .hover-href-icon {
   padding-inline-start: var(--calcite-spacing-sm);
 }
-
 :host([layout="vertical"]) .hover-href-icon ~ .icon--end {
   margin-inline-start: var(--calcite-spacing-sm);
 }
-
 :host([layout="vertical"]) .hover-href-icon ~ .icon--breadcrumb {
   margin-inline-start: var(--calcite-spacing-md);
 }
-
 .icon--breadcrumb {
   @apply me-0;
   padding-inline-start: var(--calcite-spacing-sm);
   --calcite-ui-icon-color: var(--calcite-color-text-3);
   --calcite-icon-color: var(--calcite-menu-item-breadcrumb-icon-color, var(--calcite-color-text-3));
 }
-
 :host([layout="vertical"]) .icon--breadcrumb {
   @apply ms-auto;
 }
-
 :host([layout="vertical"]) .icon--breadcrumb ~ .icon--dropdown {
   margin-inline-start: var(--calcite-spacing-sm);
 }
-
 :host([layout="vertical"]) .icon--end ~ .icon--breadcrumb {
   margin-inline-start: var(--calcite-spacing-sm);
 }
-
 :host([breadcrumb]) .content {
   padding-inline-end: var(--calcite-spacing-md);
 }
-
 calcite-action {
   --calcite-action-background-color: var(--calcite-menu-item-action-background-color);
-
   @apply relative h-auto;
   border-inline-start: 1px solid var(--calcite-color-foreground-1);
   &:after {
@@ -173,24 +159,20 @@ calcite-action {
     @apply h-full;
     inset-block: 0;
   }
-
   &:hover,
   &:focus {
     --calcite-action-background-color: var(--calcite-menu-item-action-background-color-hover);
   }
-
   &:active {
     --calcite-action-background-color: var(--calcite-menu-item-action-background-color-active);
   }
 }
-
 // extends the broder block of calcite action when hovered on content
 .content:focus ~ calcite-action,
 .content:hover ~ calcite-action {
   --calcite-action-text-color: var(--calcite-menu-item-action-text-color, var(--calcite-color-text-1));
   border-inline-start: 1px solid var(--calcite-menu-item-action-border-color, var(--calcite-color-border-3));
 }
-
 .dropdown-menu-items {
   @apply absolute h-auto flex-col hidden overflow-visible min-w-full;
   border: 1px solid var(--calcite-menu-item-sub-menu-border-color, var(--calcite-color-border-3));
@@ -206,7 +188,6 @@ calcite-action {
     transform: translateX(calc(100% - 2px));
   }
 }
-
 .parent--vertical {
   @apply flex-col;
 }
@@ -221,29 +202,23 @@ calcite-action {
     border-inline: 0;
   }
 }
-
 :host([layout="vertical"]:last-of-type) .dropdown-menu-items {
   border-block-end: 0;
 }
-
 :host([slot="submenu-item"]) .parent--vertical {
   @apply ps-6;
 }
-
 .dropdown-menu-items.nested.calcite--rtl {
   transform: translateX(calc(-100% + 2px));
 }
-
 .dropdown--vertical.dropdown-menu-items.nested.calcite--rtl {
   transform: none;
 }
-
 .hover-href-icon {
   @apply ms-auto relative opacity-0;
   inset-inline-end: var(--calcite-spacing-xxs);
   transition: all var(--calcite-internal-animation-timing-medium) ease-in-out;
 }
-
 .content:focus .hover-href-icon,
 .content:hover .hover-href-icon {
   opacity: var(--calcite-opacity-full);

From a89d9687093bc691ad0e0d6a2c769ef0905e93e9 Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Fri, 8 Mar 2024 11:32:45 -0600
Subject: [PATCH 15/17] refactor

---
 .../src/components/menu-item/menu-item.scss              | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/calcite-components/src/components/menu-item/menu-item.scss b/packages/calcite-components/src/components/menu-item/menu-item.scss
index 73d2bad4dca..b168b326b92 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.scss
+++ b/packages/calcite-components/src/components/menu-item/menu-item.scss
@@ -10,6 +10,9 @@
  * @prop --calcite-menu-item-action-menu-border-color: The border color of the sub-component.
  * @prop --calcite-menu-item-action-menu-text-color: The text color of the sub-component.
  * @prop --calcite-menu-item-action-text-color: Specifies the text color of an action sub component.
+ * @prop --calcite-menu-item-active-background-color: Specifies background color of the component when `active` property is `true.
+ * @prop --calcite-menu-item-active-border-color: Specifies border color of the component when `active` property is `true.
+ * @prop --calcite-menu-item-active-text-color: Specifies text color of the component when `active` property is `true.
  * @prop --calcite-menu-item-background-color-active: Specifies the background color of the component when active.
  * @prop --calcite-menu-item-background-color-hover: Specifies the background color of the component when hover.
  * @prop --calcite-menu-item-background-color: Specifies the background color of the component.
@@ -87,9 +90,9 @@
 
 .content:active,
 :host([active]) .content {
-  background-color: var(--calcite-menu-item-background-color-active, var(--calcite-color-foreground-3));
-  color: var(--calcite-menu-item-text-color-active, var(--calcite-color-text-1));
-  border-color: var(--calcite-menu-item-border-color-active, var(--calcite-color-brand));
+  background-color: var(--calcite-menu-item-active-background-color, var(--calcite-color-foreground-3));
+  color: var(--calcite-menu-item-active-text-color, var(--calcite-color-text-1));
+  border-color: var(--calcite-menu-item-active-border-color, var(--calcite-color-brand));
   .icon {
     --calcite-icon-color: var(--calcite-menu-item-chevron-icon-color-active, var(--calcite-color-brand));
   }

From 0b96c1eb60b5ce6b1893d27026db5256c4bd414b Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Mon, 11 Mar 2024 13:20:22 -0500
Subject: [PATCH 16/17] refactor

---
 .../src/components/menu-item/menu-item.scss   | 115 ++++++++++++------
 1 file changed, 75 insertions(+), 40 deletions(-)

diff --git a/packages/calcite-components/src/components/menu-item/menu-item.scss b/packages/calcite-components/src/components/menu-item/menu-item.scss
index b168b326b92..4b592737ec0 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.scss
+++ b/packages/calcite-components/src/components/menu-item/menu-item.scss
@@ -7,22 +7,12 @@
  * @prop --calcite-menu-item-action-background-color-hover: defines the background color of an action sub-component when hovered or focused.
  * @prop --calcite-menu-item-action-background-color: defines the background color of an action sub-component inside a menu-item.
  * @prop --calcite-menu-item-action-border-color: Specifies the border inline start color of an action sub-component.
- * @prop --calcite-menu-item-action-menu-border-color: The border color of the sub-component.
- * @prop --calcite-menu-item-action-menu-text-color: The text color of the sub-component.
  * @prop --calcite-menu-item-action-text-color: Specifies the text color of an action sub component.
- * @prop --calcite-menu-item-active-background-color: Specifies background color of the component when `active` property is `true.
- * @prop --calcite-menu-item-active-border-color: Specifies border color of the component when `active` property is `true.
- * @prop --calcite-menu-item-active-text-color: Specifies text color of the component when `active` property is `true.
- * @prop --calcite-menu-item-background-color-active: Specifies the background color of the component when active.
- * @prop --calcite-menu-item-background-color-hover: Specifies the background color of the component when hover.
  * @prop --calcite-menu-item-background-color: Specifies the background color of the component.
- * @prop --calcite-menu-item-breadcrumb-icon-color: Specifies the color of the breadcrumb icon when sub-menu items are slotted.
- * @prop --calcite-menu-item-chevron-icon-color-active: Specifies the color of the dropdown icon when active.
- * @prop --calcite-menu-item-chevron-icon-color: Specifies the color of the dropdown icon when sub-menu items are slotted.
+ * @prop --calcite-menu-item-border-color: Specifies the border color of the component.
+ * @prop --calcite-menu-item-icon-color: Specifies the color of the icon.
  * @prop --calcite-menu-item-sub-menu-border-color: Specifies the border color of sub-menu.
  * @prop --calcite-menu-item-sub-menu-corner-radius: Specifies the border radius of sub-menu.
- * @prop --calcite-menu-item-text-color-active: Specifies the text color of the component when active.
- * @prop --calcite-menu-item-text-color-hover: Specifies the text color of the component when hover.
  * @prop --calcite-menu-item-text-color: Specifies the text color of the component.
  */
 
@@ -38,18 +28,22 @@
     min-block-size: #{$calcite-size-48};
   }
 }
+
 :host([layout="vertical"]) {
-  inline-size: #{$calcite-size-relative-100};
+  inline-size: var(--calcite-container-size-content-fluid);
 }
+
 :host(:not([layout="vertical"])) {
-  block-size: #{$calcite-size-relative-100};
+  block-size: var(--calcite-container-size-content-fluid);
 }
+
 .container,
 .item-content {
   @apply flex flex-row items-stretch;
-  inline-size: #{$calcite-size-relative-100};
-  block-size: #{$calcite-size-relative-100};
+  inline-size: var(--calcite-container-size-content-fluid);
+  block-size: var(--calcite-container-size-content-fluid);
 }
+
 .content {
   @apply flex
   items-center
@@ -59,24 +53,31 @@
   outline-none
   box-border;
   font-size: var(--calcite-font-size-md);
-  color: var(--calcite-menu-item-text-color, var(--calcite-color-text-2));
-  background-color: var(--calcite-menu-item-background-color, var(--calcite-color-foreground-1));
-  inline-size: #{$calcite-size-relative-100};
-  block-size: #{$calcite-size-relative-100};
+  color: var(--calcite-menu-item-text-color, var(--calcite-internal-menu-item-text-color, var(--calcite-color-text-2)));
+  background-color: var(
+    --calcite-menu-item-background-color,
+    var(--calcite-internal-menu-item-background-color, var(--calcite-color-foreground-1))
+  );
+  inline-size: var(--calcite-container-size-content-fluid);
+  block-size: var(--calcite-container-size-content-fluid);
   padding-inline: var(--calcite-spacing-xl);
   padding-block-start: var(--calcite-spacing-base);
   text-decoration: none;
-  border-block-end: var(--calcite-spacing-base) solid var(--calcite-menu-item-border-color, transparent);
+  border-block-end: var(--calcite-spacing-base) solid
+    var(--calcite-menu-item-border-color, var(--calcite-internal-menu-item-border-color, transparent));
   &:hover {
-    background-color: var(--calcite-menu-item-background-color-hover, var(--calcite-color-foreground-2));
-    color: var(--calcite-menu-item-text-color-hover, var(--calcite-color-text-2));
+    --calcite-internal-menu-item-background-color: var(--calcite-color-foreground-2);
+    --calcite-internal-menu-item-text-color: var(--calcite-color-text-2);
   }
   &:focus {
     @apply focus-inset;
-    background-color: var(--calcite-menu-item-background-color-focus, var(--calcite-color-foreground-2));
-    color: var(--calcite-menu-item-text-color-focus, var(--calcite-color-text-2));
+    --calcite-internal-menu-item-background-color: var(--calcite-color-foreground-2);
+    --calcite-internal-menu-item-text-color: var(--calcite-color-text-2);
+  }
+  &:active {
+    --calcite-internal-menu-item-background-color: var(--calcite-color-foreground-3);
+    --calcite-internal-menu-item-text-color: var(--calcite-color-text-1);
   }
-
   & span {
     display: inline-flex;
   }
@@ -84,68 +85,91 @@
     @apply flex w-full justify-start;
     padding-block: var(--calcite-spacing-xl);
     border-block-end: 0;
-    border-inline-end: var(--calcite-spacing-xxs) solid var(--calcite-menu-item-border-color, transparent);
+    border-inline-end: var(--calcite-spacing-xxs) solid;
+
+    // border-inline-end-color: var(
+    //   --calcite-menu-item-border-color,
+    //   var(--calcite-internal-menu-item-border-color, transparent)
+    // );
   }
 }
 
-.content:active,
+:host([layout="vertical"]) .content {
+  padding-inline: var(--calcite-spacing-md);
+  border-color: var(--calcite-menu-item-border-color, var(--calcite-internal-menu-item-border-color, transparent));
+}
+
 :host([active]) .content {
-  background-color: var(--calcite-menu-item-active-background-color, var(--calcite-color-foreground-3));
-  color: var(--calcite-menu-item-active-text-color, var(--calcite-color-text-1));
-  border-color: var(--calcite-menu-item-active-border-color, var(--calcite-color-brand));
+  --calcite-internal-menu-item-background-color: var(--calcite-color-foreground-3);
+  --calcite-internal-menu-item-text-color: var(--calcite-color-text-1);
+  --calcite-internal-menu-item-border-color: var(--calcite-color-brand);
   .icon {
-    --calcite-icon-color: var(--calcite-menu-item-chevron-icon-color-active, var(--calcite-color-brand));
+    --calcite-internal-menu-item-icon-color: var(--calcite-color-brand);
   }
 }
-:host([layout="vertical"]) .content {
-  padding-inline: var(--calcite-spacing-md);
+
+.icon {
+  --calcite-icon-color: var(
+    --calcite-menu-item-icon-color,
+    var(--calcite-internal-menu-item-icon-color, var(--calcite-color-text-3))
+  );
 }
+
 .icon--start {
   margin-inline-end: var(--calcite-spacing-md);
 }
+
 .icon--end {
   margin-inline-start: var(--calcite-spacing-md);
 }
+
 :host([layout="vertical"]) .icon--end {
   @apply ms-auto;
   padding-inline-start: var(--calcite-spacing-md);
 }
+
 .icon--dropdown {
   @apply ms-auto me-0 relative;
   padding-inline-start: var(--calcite-spacing-sm);
-  --calcite-ui-icon-color: var(--calcite-color-text-3);
-  --calcite-icon-color: var(--calcite-menu-item-chevron-icon-color, var(--calcite-color-text-3));
 }
+
 :host([layout="vertical"]) .icon--end ~ .icon--dropdown {
   margin-inline-start: var(--calcite-spacing-md);
 }
+
 :host([layout="vertical"]) .hover-href-icon {
   padding-inline-start: var(--calcite-spacing-sm);
 }
+
 :host([layout="vertical"]) .hover-href-icon ~ .icon--end {
   margin-inline-start: var(--calcite-spacing-sm);
 }
+
 :host([layout="vertical"]) .hover-href-icon ~ .icon--breadcrumb {
   margin-inline-start: var(--calcite-spacing-md);
 }
+
 .icon--breadcrumb {
   @apply me-0;
   padding-inline-start: var(--calcite-spacing-sm);
-  --calcite-ui-icon-color: var(--calcite-color-text-3);
-  --calcite-icon-color: var(--calcite-menu-item-breadcrumb-icon-color, var(--calcite-color-text-3));
 }
+
 :host([layout="vertical"]) .icon--breadcrumb {
   @apply ms-auto;
 }
+
 :host([layout="vertical"]) .icon--breadcrumb ~ .icon--dropdown {
   margin-inline-start: var(--calcite-spacing-sm);
 }
+
 :host([layout="vertical"]) .icon--end ~ .icon--breadcrumb {
   margin-inline-start: var(--calcite-spacing-sm);
 }
+
 :host([breadcrumb]) .content {
   padding-inline-end: var(--calcite-spacing-md);
 }
+
 calcite-action {
   --calcite-action-background-color: var(--calcite-menu-item-action-background-color);
   @apply relative h-auto;
@@ -156,7 +180,7 @@ calcite-action {
     inline-size: var(--calcite-spacing-px);
     inset-inline-start: calc(-1 * var(--calcite-spacing-px));
     inset-block: theme("spacing.3");
-    background-color: var(--calcite-color-border-3);
+    background-color: var(--calcite-menu-item-action-border-color, var(--calcite-color-border-3));
   }
   &:hover:after {
     @apply h-full;
@@ -170,16 +194,21 @@ calcite-action {
     --calcite-action-background-color: var(--calcite-menu-item-action-background-color-active);
   }
 }
+
 // extends the broder block of calcite action when hovered on content
 .content:focus ~ calcite-action,
 .content:hover ~ calcite-action {
   --calcite-action-text-color: var(--calcite-menu-item-action-text-color, var(--calcite-color-text-1));
   border-inline-start: 1px solid var(--calcite-menu-item-action-border-color, var(--calcite-color-border-3));
 }
+
 .dropdown-menu-items {
   @apply absolute h-auto flex-col hidden overflow-visible min-w-full;
   border: 1px solid var(--calcite-menu-item-sub-menu-border-color, var(--calcite-color-border-3));
-  background: var(--calcite-menu-item-background-color);
+  background: var(
+    --calcite-menu-item-background-color,
+    var(--calcite-internal-menu-item-background-color, var(--calcite-color-foreground-1))
+  );
   inset-block-start: 100%;
   z-index: theme("zIndex.dropdown");
   &.open {
@@ -205,23 +234,29 @@ calcite-action {
     border-inline: 0;
   }
 }
+
 :host([layout="vertical"]:last-of-type) .dropdown-menu-items {
   border-block-end: 0;
 }
+
 :host([slot="submenu-item"]) .parent--vertical {
   @apply ps-6;
 }
+
 .dropdown-menu-items.nested.calcite--rtl {
   transform: translateX(calc(-100% + 2px));
 }
+
 .dropdown--vertical.dropdown-menu-items.nested.calcite--rtl {
   transform: none;
 }
+
 .hover-href-icon {
   @apply ms-auto relative opacity-0;
   inset-inline-end: var(--calcite-spacing-xxs);
   transition: all var(--calcite-internal-animation-timing-medium) ease-in-out;
 }
+
 .content:focus .hover-href-icon,
 .content:hover .hover-href-icon {
   opacity: var(--calcite-opacity-full);

From cd8f986b40561bb1a97228620d58ef071b99c82e Mon Sep 17 00:00:00 2001
From: anveshmekala <anv11827@esri.com>
Date: Mon, 11 Mar 2024 15:39:50 -0500
Subject: [PATCH 17/17] add tests

---
 .../src/components/menu-item/menu-item.scss   | 15 +++----
 .../components/menu-item/menu-item.stories.ts | 42 +++++++++++++++++++
 2 files changed, 50 insertions(+), 7 deletions(-)

diff --git a/packages/calcite-components/src/components/menu-item/menu-item.scss b/packages/calcite-components/src/components/menu-item/menu-item.scss
index 4b592737ec0..93984acaac9 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.scss
+++ b/packages/calcite-components/src/components/menu-item/menu-item.scss
@@ -64,7 +64,10 @@
   padding-block-start: var(--calcite-spacing-base);
   text-decoration: none;
   border-block-end: var(--calcite-spacing-base) solid
-    var(--calcite-menu-item-border-color, var(--calcite-internal-menu-item-border-color, transparent));
+    var(
+      --calcite-menu-item-border-color,
+      var(--calcite-internal-menu-item-border-color, var(--calcite-color-transparent))
+    );
   &:hover {
     --calcite-internal-menu-item-background-color: var(--calcite-color-foreground-2);
     --calcite-internal-menu-item-text-color: var(--calcite-color-text-2);
@@ -86,17 +89,15 @@
     padding-block: var(--calcite-spacing-xl);
     border-block-end: 0;
     border-inline-end: var(--calcite-spacing-xxs) solid;
-
-    // border-inline-end-color: var(
-    //   --calcite-menu-item-border-color,
-    //   var(--calcite-internal-menu-item-border-color, transparent)
-    // );
   }
 }
 
 :host([layout="vertical"]) .content {
   padding-inline: var(--calcite-spacing-md);
-  border-color: var(--calcite-menu-item-border-color, var(--calcite-internal-menu-item-border-color, transparent));
+  border-color: var(
+    --calcite-menu-item-border-color,
+    var(--calcite-internal-menu-item-border-color, var(--calcite-color-transparent))
+  );
 }
 
 :host([active]) .content {
diff --git a/packages/calcite-components/src/components/menu-item/menu-item.stories.ts b/packages/calcite-components/src/components/menu-item/menu-item.stories.ts
index 499e47cb780..5d4c3f9a361 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.stories.ts
+++ b/packages/calcite-components/src/components/menu-item/menu-item.stories.ts
@@ -106,3 +106,45 @@ export const darkModeRTL_TestOnly = (): string =>
     icon-start="layer"
     icon-end="layer"
   />`;
+
+export const theming_TestOnly = (): string => html`
+  <style>
+    calcite-menu-item {
+      --calcite-menu-item-action-background-color: #e5c287;
+      --calcite-menu-item-action-border-color: red;
+      --calcite-menu-item-action-text-color: blue;
+      --calcite-menu-item-background-color: #898121;
+      --calcite-menu-item-text-color: #fda403;
+      --calcite-menu-item-border-color: blue;
+      --calcite-menu-item-icon-color: #e8751a;
+      --calcite-menu-item-sub-menu-border-color: blue;
+      --calcite-menu-item-sub-menu-corner-radius: 99px;
+    }
+    calcite-menu-item[active] {
+      --calcite-menu-item-border-color: red;
+    }
+  </style>
+  <calcite-menu layout="vertical">
+      <calcite-menu-item text="Example item 1" text-enabled></calcite-menu-item>
+      <calcite-menu-item text="Example item 2" text-enabled active></calcite-menu-item>
+      <calcite-menu-item text="Example item 3" text-enabled icon-start="layer" icon-end="layer" breadcrumb open>
+        <calcite-menu-item slot="submenu-item" text="Example submenu item 1" text-enabled></calcite-menu-item>
+        <calcite-menu-item slot="submenu-item" text="Example submenu item 2" text-enabled href="https://esri.com">
+          <calcite-menu-item slot="submenu-item" text="Example submenu item 1" text-enabled></calcite-menu-item>
+        </calcite-menu-item>
+      </calcite-menu-item>
+      <calcite-menu-item text="Example item 4" text-enabled></calcite-menu-item>
+    </calcite-menu>
+    <br></br>
+    <calcite-menu layout="horizontal">
+      <calcite-menu-item text="Example item 1" text-enabled></calcite-menu-item>
+      <calcite-menu-item text="Example item 2" text-enabled active></calcite-menu-item>
+      <calcite-menu-item text="Example item 3" text-enabled icon-start="layer" icon-end="layer" breadcrumb open>
+        <calcite-menu-item slot="submenu-item" text="Example submenu item 1" text-enabled></calcite-menu-item>
+        <calcite-menu-item slot="submenu-item" text="Example submenu item 2" text-enabled href="https://esri.com">
+          <calcite-menu-item slot="submenu-item" text="Example submenu item 1" text-enabled></calcite-menu-item>
+        </calcite-menu-item>
+      </calcite-menu-item>
+      <calcite-menu-item text="Example item 4" text-enabled></calcite-menu-item>
+    </calcite-menu>
+`;