@aquera/nile-elements 1.8.8 → 1.8.9

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.8.8",
+  "version": "1.8.9",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-button-toggle/nile-button-toggle.css.ts

@@ -41,7 +41,7 @@ export const styles = css`
   }
 
   .nile-button-toggle:hover {
-    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));
+    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary-hover));
   }
 
   .nile-button-toggle:active {
@@ -73,13 +73,13 @@ export const styles = css`
   }
 
   .nile-button-toggle__active {
-    background-color: var( --nile-colors-neutral-500, var(--ng-colors-bg-primary-hover) );
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));
+    background-color: var( --nile-colors-neutral-500, var(--ng-colors-bg-brand-primary) );
+    color: var(--nile-colors-dark-900, var(--ng-colors-bg-brand-solid));
   }
 
   .nile-button-toggle__active:hover {
-    background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary-hover));
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));
+    background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-brand-primary));
+    color: var(--nile-colors-dark-900, var(--ng-colors-bg-brand-solid));
   }
 
   .nile-button-toggle__disabled {

package/src/nile-filter-chip/nile-filter-chip.css.ts

@@ -41,14 +41,14 @@ export const styles = css`
   }
 
   .chip:hover {
-    background-color: var(--nile-filter-chip-hover-background, var(--ng-colors-bg-primary-hover));
+    background-color: var(--nile-filter-chip-hover-background, var(--ng-colors-bg-secondary-hover));
   }
  .chip:active {
-  background-color: var(--nile-filter-chip-active-background, var(--ng-colors-bg-active));
+  background-color: var(--nile-filter-chip-active-background, var(--ng-colors-bg-brand-primary));
   border-color: var(--nile-filter-chip-active-border-color-stroke);
 }
 :host([active]) .chip {
-  background-color: var(--nile-filter-chip-active-background, var(--ng-colors-bg-active));
+  background-color: var(--nile-filter-chip-active-background, var(--ng-colors-bg-brand-primary));
   border-color: var(--nile-filter-chip-active-border-color-stroke);
 }
 

package/src/nile-list-item/nile-list-item.css.ts

@@ -27,7 +27,13 @@ export const styles = css`
   }
 
   :host(:hover) {
-    background-color: var(--nile-colors-neutral-400, var( --ng-colors-bg-brand-primary)); /* Change background color on hover */
+    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-secondary-hover)); /* Change background color on hover */
+  }
+
+  :host([selected]),
+  :host([active]) {
+    background-color: var(--ng-colors-bg-brand-primary); /* Selection background */
+    color: var(--ng-colors-bg-brand-solid); /* Selection text and elements */
   }
 
   .preffix__icon {

package/src/nile-menu-item/nile-menu-item.css.ts

@@ -54,8 +54,8 @@ export const styles = css`
   }
 
   .menu-item.menu-item--active {
-    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));
-    color: var(--nile-colors-primary-600, var(--ng-colors-text-primary-900));
+    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));
+    color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));
   }
 
   .menu-item.menu-item--disabled {
@@ -94,13 +94,13 @@ export const styles = css`
   }
 
   :host(:hover:not([active], [aria-disabled='true'], :focus-visible)) .menu-item {
-    background-color: var(--nile-colors-neutral-100,var(--ng-colors-bg-primary-hover));
+    background-color: var(--nile-colors-neutral-100,var(--ng-colors-bg-secondary-hover));
     color: var(--nile-colors-dark-900,var(--ng-colors-text-secondary-hover));
   }
 
   :host([active]:hover:not([aria-disabled='true'], :focus-visible)) .menu-item {
-    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));
-    color: var(--nile-colors-primary-600, var(--ng-colors-text-primary-900));
+    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));
+    color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));
   }
 
   :host(:focus-visible) .menu-item {

package/src/nile-option/nile-option.css.ts

@@ -47,15 +47,15 @@ export const styles = css`
   }
 
   .option--hover:not(.option--current):not(.option--disabled) {
-    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));
+    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-secondary-hover));
     color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
     border-radius: var(--nile-radius-none, var(--ng-radius-sm));
   }
 
   .option--current,
   .option--current.option--disabled {
-    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));
-    color: var(--nile-colors-primary-600, var(--ng-colors-text-primary-900));
+    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));
+    color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));
     opacity: 1;
     border-radius: var(--nile-radius-none, var(--ng-radius-sm));
   }