@umbraco-ui/uui-menu-item 0.2.1 → 1.0.0-alpha.0

package/lib/index.js

@@ -120,15 +120,61 @@ UUIMenuItemElement.styles = [
 
       #menu-item {
         position: relative;
-
         padding-left: calc(var(--uui-menu-item-indent, 0) * var(--uui-size-4,12px));
-
         display: grid;
         grid-template-columns: var(--uui-size-8,24px) 1fr;
         grid-template-rows: 1fr;
         white-space: nowrap;
       }
 
+      :host(:not([active], [selected], [disabled]))
+        #menu-item
+        #label-button:hover
+        ~ #label-button-background,
+      :host(:not([active], [selected], [disabled]))
+        #menu-item
+        #caret-button:hover {
+        background-color: 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);
+      }
+
+      :host([active]) #label-button,
+      :host([active]) #caret-button {
+        color: var(--uui-color-current-contrast,#1b264f);
+      }
+      :host([active]) #label-button-background {
+        background-color: 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));
+      }
+
+      :host([selected]) #label-button,
+      :host([selected]) #caret-button {
+        color: var(--uui-color-selected-contrast,#fff);
+      }
+      :host([selected]) #label-button-background {
+        background-color: var(--uui-color-selected,#3544b1);
+      }
+      :host([selected]) #label-button:hover ~ #label-button-background,
+      :host([selected]) #caret-button:hover {
+        background-color: var(--uui-color-selected-emphasis,rgb(70, 86, 200));
+      }
+
+      :host([disabled]) #menu-item {
+        color: var(--uui-color-disabled-contrast,#c4c4c4);
+        background-color: var(--uui-color-disabled,#f3f3f5);
+      }
+      :host([disabled]) #label-button {
+        cursor: default;
+      }
+
       button {
         display: inline-flex;
         align-items: center;
@@ -145,9 +191,6 @@ UUIMenuItemElement.styles = [
         min-height: var(--uui-size-12,36px);
         z-index: 1;
       }
-      /* button:hover {
-        color: var(--uui-interface-contrast-hover);
-      } */
 
       #label-button {
         flex-grow: 1;
@@ -182,6 +225,7 @@ UUIMenuItemElement.styles = [
         display: flex;
         align-items: center;
         justify-content: center;
+        color: var(--uui-color-interactive,#1b264f);
       }
 
       #label-button-background {
@@ -191,10 +235,6 @@ UUIMenuItemElement.styles = [
         right: 0;
         bottom: 0;
       }
-      #label-button:hover + #label-button-background,
-      #caret-button:hover ~ #label-button-background {
-        background-color: var(--uui-interface-surface-hover,rgb(250, 250, 250));
-      }
 
       #actions-container {
         opacity: 0;
@@ -227,51 +267,6 @@ UUIMenuItemElement.styles = [
         margin-left: 6px;
       }
 
-      :host([disabled]) {
-        color: var(--uui-interface-surface-contrast-disabled);
-      }
-      :host([disabled]) #label-button-background {
-        background-color: var(--uui-interface-surface-disabled,rgb(228, 228, 228));
-      }
-      :host([disabled]) #label-button:hover + #label-button-background {
-        background-color: var(--uui-interface-surface-disabled,rgb(228, 228, 228));
-      }
-
-      :host([active]) {
-        color: var(--uui-interface-active-contrast,#162335);
-      }
-      :host([active]) #label-button:hover {
-        color: var(--uui-interface-active-contrast-hover,#1b264f);
-      }
-      :host([active]) #label-button-background {
-        background-color: var(--uui-interface-active,#f5c1bc);
-      }
-      :host([active]) #label-button:hover + #label-button-background {
-        background-color: var(--uui-interface-active-hover,#f5c1bc);
-      }
-      :host([active][disabled]) #label-button {
-        color: var(--uui-interface-active-contrast-disabled,rgb(54, 54, 54));
-        background-color: var(--uui-interface-active-disabled,rgb(219, 212, 212));
-      }
-
-      :host([selected]) {
-        color: var(--uui-interface-select-contrast,#fefefe);
-      }
-      :host([selected]) #label-button:hover {
-        color: var(--uui-interface-select-contrast-hover,#fefefe);
-      }
-      :host([selected]) #label-button-background {
-        background-color: var(--uui-interface-select,#3544b1);
-      }
-      :host([selected]) #label-button:hover + #label-button-background,
-      :host([selected]) #caret-button:hover ~ #label-button-background {
-        background-color: var(--uui-interface-select-hover,rgb(70, 86, 200));
-      }
-      :host([selected][disabled]) #label-button {
-        color: var(--uui-interface-select-contrast-disabled,rgb(228, 228, 228));
-        background-color: var(--uui-interface-select-disabled,rgb(87, 87, 87));
-      }
-
       slot:not([name]) {
         position: relative;
         display: block;

package/package.json

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