@umbraco-ui/uui-menu-item 1.7.0 → 1.8.0-rc.1

package/custom-elements.json

@@ -211,6 +211,42 @@
         {
           "name": "--uui-menu-item-flat-structure",
           "description": "set to 1 to remove the indentation of the chevron. Use this when you have a flat menu structure"
+        },
+        {
+          "name": "--uui-menu-item-background-color-hover",
+          "description": "background color when hovering"
+        },
+        {
+          "name": "--uui-menu-item-color-hover",
+          "description": "text color when hovering"
+        },
+        {
+          "name": "--uui-menu-item-background-color-active",
+          "description": "background color when active"
+        },
+        {
+          "name": "--uui-menu-item-color-active",
+          "description": "text color when active"
+        },
+        {
+          "name": "--uui-menu-item-background-color-disabled",
+          "description": "background color when disabled"
+        },
+        {
+          "name": "--uui-menu-item-color-disabled",
+          "description": "text color when disabled"
+        },
+        {
+          "name": "--uui-menu-item-background-color-selected",
+          "description": "background color when selected"
+        },
+        {
+          "name": "--uui-menu-item-color-selected",
+          "description": "text color when selected"
+        },
+        {
+          "name": "--uui-menu-item-color-background-selected-hover",
+          "description": "text color when selected"
         }
       ]
     }

package/lib/index.js

@@ -146,32 +146,53 @@ UUIMenuItemElement.styles = [
       :host(:not([active], [selected], [disabled]))
         #menu-item
         #caret-button:hover {
-        background-color: var(--uui-color-surface-emphasis,rgb(250, 250, 250));
+        background-color: var(
+          --uui-menu-item-background-color-hover,
+          var(--uui-color-surface-emphasis,rgb(250, 250, 250))
+        );
       }
       :host(:not([active], [selected], [disabled]))
         #menu-item
         #label-button:hover,
       :host(:not([active], [selected])) #menu-item #caret-button:hover {
-        color: var(--uui-color-interactive-emphasis,#3544b1);
+        color: var(
+          --uui-menu-item-color-hover,
+          var(--uui-color-interactive-emphasis,#3544b1)
+        );
       }
 
       /** Active */
       :host([active]) #label-button,
       :host([active]) #caret-button {
-        color: var(--uui-color-current-contrast,#1b264f);
+        color: var(
+          --uui-menu-item-color-active,
+          var(--uui-color-current-contrast,#1b264f)
+        );
       }
       :host([active]) #label-button-background {
-        background-color: var(--uui-color-current,#f5c1bc);
+        background-color: var(
+          --uui-menu-item-background-color-active,
+          var(--uui-color-current,#f5c1bc)
+        );
       }
       :host([active]) #label-button:hover ~ #label-button-background,
       :host([active]) #caret-button:hover {
-        background-color: var(--uui-color-current-emphasis,rgb(248, 214, 211));
+        background-color: var(
+          --uui-menu-item-background-color-active-hover,
+          var(--uui-color-current-emphasis,rgb(248, 214, 211))
+        );
       }
 
       /** Disabled */
       :host([disabled]) #menu-item {
-        color: var(--uui-color-disabled-contrast,#c4c4c4);
-        background-color: var(--uui-color-disabled,#f3f3f5);
+        color: var(
+          --uui-menu-item-color-disabled,
+          var(--uui-color-disabled-contrast,#c4c4c4)
+        );
+        background-color: var(
+          --uui-menu-item-background-color-disabled,
+          var(--uui-color-disabled,#f3f3f5)
+        );
       }
 
       /** Selected */
@@ -179,11 +200,17 @@ UUIMenuItemElement.styles = [
         #label-button,
       :host([selected]:not([select-mode='highlight'], [disabled]))
         #caret-button {
-        color: var(--uui-color-selected-contrast,#fff);
+        color: var(
+          --uui-menu-item-color-selected,
+          var(--uui-color-selected-contrast,#fff)
+        );
       }
       :host([selected]:not([select-mode='highlight'], [disabled]))
         #label-button-background {
-        background-color: var(--uui-color-selected,#3544b1);
+        background-color: var(
+          --uui-menu-item-background-color-selected,
+          var(--uui-color-selected,#3544b1)
+        );
       }
       /** Selected, not highlight mode */
       :host([selected]:not([select-mode='highlight'], [disabled]))
@@ -191,7 +218,10 @@ UUIMenuItemElement.styles = [
         ~ #label-button-background,
       :host([selected]:not([select-mode='highlight'], [disabled]))
         #caret-button:hover {
-        background-color: var(--uui-color-selected-emphasis,rgb(70, 86, 200));
+        background-color: var(
+          --uui-menu-item-background-color-selected-hover,
+          var(--uui-color-selected-emphasis,rgb(70, 86, 200))
+        );
       }
 
       /** highlight mode, default */
@@ -200,7 +230,10 @@ UUIMenuItemElement.styles = [
         #label-button:hover
         ~ #label-button-background {
         border-radius: var(--uui-border-radius,3px);
-        background-color: var(--uui-color-surface-emphasis,rgb(250, 250, 250));
+        background-color: var(
+          --uui-menu-item-background-color-highlight,
+          var(--uui-color-surface-emphasis,rgb(250, 250, 250))
+        );
       }
 
       /** highlight mode, active */
@@ -216,7 +249,10 @@ UUIMenuItemElement.styles = [
         #label-button:hover
         ~ #label-button-background {
         border-radius: var(--uui-border-radius,3px);
-        background-color: var(--uui-color-current-emphasis,rgb(248, 214, 211));
+        background-color: var(
+          --uui-menu-item-background-color-highlight-active-selected,
+          var(--uui-color-current-emphasis,rgb(248, 214, 211))
+        );
       }
 
       /** highlight mode, selected */
@@ -226,12 +262,18 @@ UUIMenuItemElement.styles = [
       :host([select-mode='highlight'][selected]:not([disabled]))
         #menu-item
         #caret-button {
-        color: var(--uui-color-interactive,#1b264f);
+        color: var(
+          --uui-menu-item-color-highlight-selected,
+          var(--uui-color-interactive,#1b264f)
+        );
       }
       :host([select-mode='highlight'][selectable][selected]:not([disabled]))
         #menu-item
         #label-button:hover {
-        color: var(--uui-color-interactive-emphasis,#3544b1);
+        color: var(
+          --uui-menu-item-background-color-highlight-selectable-selected,
+          var(--uui-color-interactive-emphasis,#3544b1)
+        );
       }
 
       /** highlight mode, selected, selectable caret hover */
@@ -239,8 +281,14 @@ UUIMenuItemElement.styles = [
         #menu-item
         #caret-button:hover {
         border-radius: var(--uui-border-radius,3px);
-        background-color: var(--uui-color-surface-emphasis,rgb(250, 250, 250));
-        color: var(--uui-color-interactive-emphasis,#3544b1);
+        background-color: var(
+          --uui-menu-item-background-color-highlight-selectable-selected,
+          var(--uui-color-surface-emphasis,rgb(250, 250, 250))
+        );
+        color: var(
+          --uui-menu-item-color-highlight-selectable-selected,
+          var(--uui-color-interactive-emphasis,#3544b1)
+        );
       }
 
       /** Highlight borders */
@@ -252,7 +300,8 @@ UUIMenuItemElement.styles = [
         position: absolute;
         content: '';
         inset: 1px;
-        border: 2px solid var(--uui-color-selected,#3544b1);
+        border: 2px solid
+          var(--uui-menu-item-border-color-highlight, var(--uui-color-selected,#3544b1));
         opacity: 0;
       }
 
@@ -264,7 +313,8 @@ UUIMenuItemElement.styles = [
         position: absolute;
         content: '';
         inset: 1px 0 1px 1px;
-        border: 2px solid var(--uui-color-selected,#3544b1);
+        border: 2px solid
+          var(--uui-menu-item-border-color-highlight, var(--uui-color-selected,#3544b1));
         border-right: none;
       }
 
@@ -326,6 +376,7 @@ UUIMenuItemElement.styles = [
         color: currentColor;
         min-height: var(--uui-size-12,36px);
         z-index: 1;
+        font-weight: inherit;
       }
 
       #label-button .label {
@@ -353,6 +404,7 @@ UUIMenuItemElement.styles = [
         left: 0;
         right: 0;
         bottom: 0;
+        border-radius: var(--uui-menu-item-border-radius, 0px);
       }
 
       #actions-container {

package/lib/uui-menu-item.element.d.ts

@@ -4,6 +4,15 @@ declare const UUIMenuItemElement_base: (new (...args: any[]) => import("@umbraco
  *  @element uui-menu-item
  *  @cssprop --uui-menu-item-indent - set indentation of the menu items
  *  @cssprop --uui-menu-item-flat-structure - set to 1 to remove the indentation of the chevron. Use this when you have a flat menu structure
+ *  @cssprop --uui-menu-item-background-color-hover - background color when hovering
+ *  @cssprop --uui-menu-item-color-hover - text color when hovering
+ *  @cssprop --uui-menu-item-background-color-active - background color when active
+ *  @cssprop --uui-menu-item-color-active - text color when active
+ *  @cssprop --uui-menu-item-background-color-disabled - background color when disabled
+ *  @cssprop --uui-menu-item-color-disabled - text color when disabled
+ *   @cssprop --uui-menu-item-background-color-selected - background color when selected
+ *  @cssprop --uui-menu-item-color-selected - text color when selected
+ *  @cssprop --uui-menu-item-color-background-selected-hover - text color when selected
  *  @fires {UUIMenuItemEvent} show-children - fires when the expand icon is clicked to show nested menu items
  *  @fires {UUIMenuItemEvent} hide-children - fires when the expend icon is clicked to hide nested menu items
  *  @fires {UUIMenuItemEvent} click-label - fires when the label is clicked

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-menu-item",
-  "version": "1.7.0",
+  "version": "1.8.0-rc.1",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,9 +30,9 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.7.0",
-    "@umbraco-ui/uui-loader-bar": "1.7.0",
-    "@umbraco-ui/uui-symbol-expand": "1.7.0"
+    "@umbraco-ui/uui-base": "1.8.0-rc.0",
+    "@umbraco-ui/uui-loader-bar": "1.8.0-rc.0",
+    "@umbraco-ui/uui-symbol-expand": "1.8.0-rc.0"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build && rollup -c rollup.config.js",
@@ -43,5 +43,5 @@
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-menu-item",
-  "gitHead": "1f139dc2b4ed9ba7b9fb1af5e934589d7c4d8f06"
+  "gitHead": "0bb90095d63ffffb02f46691bb83568512dafefe"
 }