@aquera/nile-elements 0.0.47 → 0.0.48

package/package.json

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

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

@@ -33,32 +33,142 @@ export const styles = css`
   }
 
   .badge--primary {
-    background: #005EA6;
+    background: #005ea6;
   }
 
-  .badge--success {
-    background: #A5F3E1;
+  .badge--normal {
+    background: #e5e9eb;
   }
 
-  .badge--normal {
-    background: #E5E9EB;
+  .badge--info {
+    background: #a5d3f3;
+  }
+
+  /* for v2 */
+  .badge--pink {
+    color: #c11574;
+    border: 1px solid #fcceee;
+    background: #fdf2fa;
+  }
+
+  .badge--orange {
+    color: #b93815;
+    border: 1px solid #f9dbaf;
+    background: #fef6ee;
+  }
+
+  .badge--purple {
+    color: #5925dc;
+    border: 1px solid #d9d6fe;
+    background: #f4f3ff;
+  }
+
+  .badge--indigo {
+    color: #3538cd;
+    border: 1px solid #c7d7fe;
+    background: #eef4ff;
   }
 
+  .badge--blue {
+    color: #175cd3;
+    border: 1px solid #b2ddff;
+    background: #eff8ff;
+  }
+  .badge--blue-light {
+    color: #026aa2;
+    border: 1px solid #b9e6fe;
+    background: #f0f9ff;
+  }
+
+  .badge--gray-blue {
+    color: #363f72;
+    border: 1px solid #d5d9eb;
+    background: #f8f9fc;
+  }
+
+  .badge--success {
+    color: var(--nile-badge-color-font-success);
+    border: var(--nile-badge-color-border-width) solid #abefc6;
+    background: var(--nile-badge-color-background-success);
+  }
   .badge--warning {
-    background: #F3E0A5;
+    color: var(--nile-badge-color-font-warning);
+    border: var(--nile-badge-color-border-width) solid #fedf89;
+    background: var(--nile-badge-color-background-warning);
   }
 
   .badge--error {
-    background: #F3A5AA;
+    color: var(--nile-badge-color-font-error);
+    border: var(--nile-badge-color-border-width) solid #fecdca;
+    background: var(--nile-badge-color-background-error);
   }
 
-  .badge--info {
-    background: #A5D3F3;
+  .badge--brand {
+    color: #005291;
+    border: 1px solid #b5c9e0;
+    background: #eaf0f8;
+  }
+
+  .badge--gray {
+    color: #344054;
+    border: 1px solid #eaecf0;
+    background: #f9fafb;
+  }
+
+  .badge--pink.badge--pill-outline {
+    border: 1px solid #dd2590;
+  }
+
+  .badge--orange.badge--pill-outline {
+    border: 1px solid #e04f16;
+  }
+
+  .badge--purple.badge--pill-outline {
+    border: 1px solid #6938ef;
+  }
+
+  .badge--indigo.badge--pill-outline {
+    border: 1px solid #444ce7;
+  }
+
+  .badge--blue.badge--pill-outline {
+    border: 1px solid #1570ef;
+  }
+
+  .badge--blue-light.badge--pill-outline {
+    border: 1px solid #0086c9;
+  }
+
+  .badge--gray-blue.badge--pill-outline {
+    border: 1px solid #3e4784;
+  }
+
+  .badge--success.badge--pill-outline {
+    border: 1px solid #079455;
+  }
+
+  .badge--warning.badge--pill-outline {
+    border: 1px solid #dc6803;
+  }
+
+  .badge--error.badge--pill-outline {
+    border: 1px solid #d92d20;
+  }
+
+  .badge--brand.badge--pill-outline {
+    border: 1px solid #005ea6;
+  }
+
+  .badge--gray.badge--pill-outline {
+    border: 1px solid #475467;
+  }
+
+  .badge--pill-outline {
+    background: transparent;
   }
 
   .badge--rounded {
     border-radius: 100px;
-    padding: 0 6px;
   }
 `;
 export default [styles];

package/src/nile-badge/nile-badge.ts

@@ -52,11 +52,26 @@ export class NileBadge extends NileElement {
     | 'normal'
     | 'warning'
     | 'error'
-    | 'info' = 'normal';
+    | 'info'
+    | 'gray'
+    | 'brand'
+    | 'blue-light'
+    | 'blue'
+    | 'indigo'
+    | 'purple'
+    | 'pink'
+    | 'orange'
+    | 'blue-gray'
+    | 'gray-blue' = 'normal';
 
   /** Draws a pill-style badge with rounded edges. */
   @property({ type: Boolean, reflect: true }) rounded = false;
 
+  //  For setting pill type
+  @property({ reflect: true }) pilltype:
+    | 'pill-color'
+    | 'pill-outline'
+    | 'badge-color'='badge-color';
 
   render() {
     return html`
@@ -64,22 +79,30 @@ export class NileBadge extends NileElement {
         part="base"
         class=${classMap({
           badge: true,
-
-          // Types
           'badge--primary': this.variant === 'primary',
-          'badge--success': this.variant === 'success',
           'badge--normal': this.variant === 'normal',
+          'badge--info': this.variant === 'info',
+          'badge--pink': this.variant === 'pink',
+          'badge--orange': this.variant === 'orange',
+          'badge--purple': this.variant === 'purple',
+          'badge--indigo': this.variant === 'indigo',
+          'badge--blue': this.variant === 'blue',
+          'badge--blue-light': this.variant === 'blue-light',
+          'badge--gray-blue': this.variant === 'gray-blue',
+          'badge--success': this.variant === 'success',
           'badge--warning': this.variant === 'warning',
           'badge--error': this.variant === 'error',
-          'badge--info': this.variant === 'info',
-          'badge--rounded': this.rounded,
+          'badge--brand': this.variant === 'brand',
+          'badge--gray': this.variant === 'gray',
+          'badge--pill-outline': this.pilltype == 'pill-outline',
+          'badge--badge-color': this.pilltype == 'badge-color',
+          'badge--rounded':
+            this.rounded ||
+            this.pilltype == 'pill-outline' ||
+            this.pilltype == 'pill-color',
         })}
       >
-
-
-        <slot  part="content" class="badge__content"></slot>
-
-
+        <slot part="content" class="badge__content"></slot>
       </span>
     `;
   }

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

@@ -42,8 +42,8 @@ export const styles = css`
     justify-content: center;
     width: var(--nile-type-scale-3);
     height: var(--nile-type-scale-3);
-    border: solid 1px var(--nile-colors-neutral-700);
-    background-color: var(--nile-colors-white-base);
+    border: solid 1px var(--nile-checkbox-color-border-standard);
+    background-color: var(--nile-checkbox-color-background-standard);
     border-radius: 4px;
     transition: var(--nile-transition-duration-default border-color),
       var(--nile-transition-duration-default) background-color,
@@ -66,8 +66,8 @@ export const styles = css`
   /* Hover */
   .checkbox:not(.checkbox--checked):not(.checkbox--disabled)
     .checkbox__control:hover {
-    background: var(--nile-colors-primary-100);
-    border: 1px solid var(--nile-colors-primary-600);
+    background: var(--nile-checkbox-color-background-hover);
+    border: 1px solid var(--nile-checkbox-color-border-hover);
     border-radius: 4px;
   }
 
@@ -82,16 +82,16 @@ export const styles = css`
   /* Checked/indeterminate */
   .checkbox--checked .checkbox__control,
   .checkbox--indeterminate .checkbox__control {
-    border-color: var(--nile-colors-primary-600);
-    background-color: var(--nile-colors-primary-600);
+    border-color: var(--nile-checkbox-color-border-checked-standard);
+    background-color: var(--nile-checkbox-color-background-checked-standard);
   }
 
   /* Checked/indeterminate + hover */
   .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,
   .checkbox.checkbox--indeterminate:not(.checkbox--disabled)
     .checkbox__control:hover {
-    background: var(--nile-colors-primary-900);
-    border: 1px solid var(--nile-colors-primary-900);
+    background: var(--nile-checkbox-color-background-checked-hover);
+    border: 1px solid var(--nile-checkbox-color-border-checked-hover);
   }
 
   /* Checked/indeterminate + focus */
@@ -101,15 +101,16 @@ export const styles = css`
   .checkbox.checkbox--indeterminate:not(.checkbox--disabled)
     .checkbox__input:focus-visible
     ~ .checkbox__control {
-    outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);
+    outline: solid 3px var(--nile-checkbox-color-outline-standard);
     outline-offset: 1px;
   }
 
   /* Disabled */
   .checkbox--disabled {
-    opacity: 0.5;
+    opacity: 0.3;
     cursor: not-allowed;
   }
+  
 
   .checkbox__label {
     display: inline-block;

package/src/nile-icon/icons/svg/edit-1.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfNTY0MV8xMTI5MCkiPjxwYXRoIGQ9Ik03LjMzMzI1IDIuNjY2MTdINC41MzMyNUMzLjQxMzE1IDIuNjY2MTcgMi44NTMwOSAyLjY2NjE3IDIuNDI1MjcgMi44ODQxNUMyLjA0ODk1IDMuMDc1OSAxLjc0Mjk5IDMuMzgxODYgMS41NTEyNCAzLjc1ODE5QzEuMzMzMjUgNC4xODYwMSAxLjMzMzI1IDQuNzQ2MDYgMS4zMzMyNSA1Ljg2NjE3VjExLjQ2NjJDMS4zMzMyNSAxMi41ODYzIDEuMzMzMjUgMTMuMTQ2MyAxLjU1MTI0IDEzLjU3NDFDMS43NDI5OSAxMy45NTA1IDIuMDQ4OTUgMTQuMjU2NCAyLjQyNTI3IDE0LjQ0ODJDMi44NTMwOSAxNC42NjYyIDMuNDEzMTUgMTQuNjY2MiA0LjUzMzI1IDE0LjY2NjJIMTAuMTMzM0MxMS4yNTM0IDE0LjY2NjIgMTEuODEzNCAxNC42NjYyIDEyLjI0MTIgMTQuNDQ4MkMxMi42MTc2IDE0LjI1NjQgMTIuOTIzNSAxMy45NTA1IDEzLjExNTMgMTMuNTc0MUMxMy4zMzMzIDEzLjE0NjMgMTMuMzMzMyAxMi41ODYzIDEzLjMzMzMgMTEuNDY2MlY4LjY2NjE3TTUuMzMzMjMgMTAuNjY2Mkg2LjQ0OTZDNi43NzU3MiAxMC42NjYyIDYuOTM4NzggMTAuNjY2MiA3LjA5MjIzIDEwLjYyOTNDNy4yMjgyOCAxMC41OTY3IDcuMzU4MzQgMTAuNTQyOCA3LjQ3NzYzIDEwLjQ2OTdDNy42MTIxOSAxMC4zODcyIDcuNzI3NDkgMTAuMjcxOSA3Ljk1ODA5IDEwLjA0MTNMMTQuMzMzMyAzLjY2NjE3QzE0Ljg4NTUgMy4xMTM4OCAxNC44ODU1IDIuMjE4NDUgMTQuMzMzMyAxLjY2NjE3QzEzLjc4MSAxLjExMzg4IDEyLjg4NTUgMS4xMTM4OCAxMi4zMzMzIDEuNjY2MTdMNS45NTgwOCA4LjA0MTMzQzUuNzI3NDcgOC4yNzE5MyA1LjYxMjE3IDguMzg3MjMgNS41Mjk3MSA4LjUyMTc5QzUuNDU2NjEgOC42NDEwOCA1LjQwMjc0IDguNzcxMTQgNS4zNzAwNyA4LjkwNzE5QzUuMzMzMjMgOS4wNjA2NCA1LjMzMzIzIDkuMjIzNyA1LjMzMzIzIDkuNTQ5ODJWMTAuNjY2MloiIHN0cm9rZT0iIzY2NzA4NSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImNsaXAwXzU2NDFfMTEyOTAiPjxyZWN0IHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0id2hpdGUiLz48L2NsaXBQYXRoPjwvZGVmcz48L3N2Zz4=";

package/src/nile-icon/icons/svg/index.ts

@@ -118,6 +118,7 @@ export { default as drag } from './drag';
 export { default as draglist } from './draglist';
 export { default as droparrow } from './droparrow';
 export { default as dropdown } from './dropdown';
+export { default as edit1 } from './edit-1';
 export { default as editpencil } from './edit-pencil';
 export { default as editwrite } from './edit-write';
 export { default as else } from './else';
@@ -221,6 +222,7 @@ export { default as js } from './js';
 export { default as kill } from './kill';
 export { default as laptop01 } from './laptop-01';
 export { default as layersthree01 } from './layers-three-01';
+export { default as layersthree02 } from './layers-three-02';
 export { default as leftarrow } from './leftarrow';
 export { default as leftpointarrow } from './leftpointarrow';
 export { default as lifebuoy01 } from './life-buoy-01';
@@ -348,6 +350,7 @@ export { default as sendescalation } from './sendescalation';
 export { default as sendprompt } from './sendprompt';
 export { default as sendreminder } from './sendreminder';
 export { default as setting } from './setting';
+export { default as settings02 } from './settings-02';
 export { default as settings1 } from './settings-1';
 export { default as settings } from './settings';
 export { default as shape } from './shape';
@@ -382,6 +385,7 @@ export { default as thumsup } from './thumsup';
 export { default as tick } from './tick';
 export { default as timeupdate } from './timeupdate';
 export { default as timezone } from './timezone';
+export { default as trash01 } from './trash-01';
 export { default as trashnofill } from './trash-no-fill';
 export { default as trash } from './trash';
 export { default as trigger } from './trigger';
@@ -415,6 +419,7 @@ export { default as userremovegroup } from './userremovegroup';
 export { default as users01 } from './users-01';
 export { default as users02 } from './users-02';
 export { default as usersplus } from './users-plus';
+export { default as usersup } from './users-up';
 export { default as users } from './users';
 export { default as userupdate } from './userupdate';
 export { default as validationexpression } from './validationexpression';

package/src/nile-icon/icons/svg/layers-three-02.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfNTYyOV8xNDE2MSkiPjxwYXRoIGQ9Ik0xLjMzNTk0IDguMDAwMzdMNy43NjQwOSAxMS4yMTQ0QzcuODUxNTUgMTEuMjU4MiA3Ljg5NTI3IDExLjI4IDcuOTQxMTQgMTEuMjg4NkM3Ljk4MTc2IDExLjI5NjMgOC4wMjM0NSAxMS4yOTYzIDguMDY0MDcgMTEuMjg4NkM4LjEwOTk0IDExLjI4IDguMTUzNjYgMTEuMjU4MiA4LjI0MTEyIDExLjIxNDRMMTQuNjY5MyA4LjAwMDM3TTEuMzM1OTQgMTEuMzMzN0w3Ljc2NDA5IDE0LjU0NzhDNy44NTE1NSAxNC41OTE1IDcuODk1MjcgMTQuNjEzNCA3Ljk0MTE0IDE0LjYyMkM3Ljk4MTc2IDE0LjYyOTYgOC4wMjM0NSAxNC42Mjk2IDguMDY0MDcgMTQuNjIyQzguMTA5OTQgMTQuNjEzNCA4LjE1MzY2IDE0LjU5MTUgOC4yNDExMiAxNC41NDc4TDE0LjY2OTMgMTEuMzMzN00xLjMzNTk0IDQuNjY3MDRMNy43NjQwOSAxLjQ1Mjk2QzcuODUxNTUgMS40MDkyMyA3Ljg5NTI3IDEuMzg3MzcgNy45NDExNCAxLjM3ODc2QzcuOTgxNzYgMS4zNzExNCA4LjAyMzQ1IDEuMzcxMTQgOC4wNjQwNyAxLjM3ODc2QzguMTA5OTQgMS4zODczNyA4LjE1MzY2IDEuNDA5MjMgOC4yNDExMiAxLjQ1Mjk2TDE0LjY2OTMgNC42NjcwNEw4LjI0MTEyIDcuODgxMTFDOC4xNTM2NiA3LjkyNDg0IDguMTA5OTQgNy45NDY3IDguMDY0MDcgNy45NTUzMUM4LjAyMzQ1IDcuOTYyOTMgNy45ODE3NiA3Ljk2MjkzIDcuOTQxMTQgNy45NTUzMUM3Ljg5NTI3IDcuOTQ2NyA3Ljg1MTU1IDcuOTI0ODQgNy43NjQwOSA3Ljg4MTExTDEuMzM1OTQgNC42NjcwNFoiIHN0cm9rZT0iIzM0NDA1NCIgc3Ryb2tlLXdpZHRoPSIxLjYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImNsaXAwXzU2MjlfMTQxNjEiPjxyZWN0IHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0id2hpdGUiLz48L2NsaXBQYXRoPjwvZGVmcz48L3N2Zz4=";

package/src/nile-icon/icons/svg/settings-02.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMiA1LjMzMzk4TDEwIDUuMzMzOTlNMTAgNS4zMzM5OUMxMCA2LjQzODU1IDEwLjg5NTQgNy4zMzM5OCAxMiA3LjMzMzk4QzEzLjEwNDYgNy4zMzM5OCAxNCA2LjQzODU1IDE0IDUuMzMzOThDMTQgNC4yMjk0MSAxMy4xMDQ2IDMuMzMzOTggMTIgMy4zMzM5OEMxMC44OTU0IDMuMzMzOTggMTAgNC4yMjk0MiAxMCA1LjMzMzk5Wk02IDEwLjY2NzNMMTQgMTAuNjY3M002IDEwLjY2NzNDNiAxMS43NzE5IDUuMTA0NTcgMTIuNjY3MyA0IDEyLjY2NzNDMi44OTU0MyAxMi42NjczIDIgMTEuNzcxOSAyIDEwLjY2NzNDMiA5LjU2Mjc1IDIuODk1NDMgOC42NjczMiA0IDguNjY3MzJDNS4xMDQ1NyA4LjY2NzMyIDYgOS41NjI3NSA2IDEwLjY2NzNaIiBzdHJva2U9IiM0NzU0NjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==";

package/src/nile-icon/icons/svg/trash-01.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNiAySDEwTTIgNEgxNE0xMi42NjY3IDRMMTIuMTk5MSAxMS4wMTI5QzEyLjEyOSAxMi4wNjUgMTIuMDkzOSAxMi41OTExIDExLjg2NjcgMTIuOTlDMTEuNjY2NiAxMy4zNDEyIDExLjM2NDggMTMuNjIzNSAxMS4wMDExIDEzLjc5OThDMTAuNTg4IDE0IDEwLjA2MDcgMTQgOS4wMDYyMyAxNEg2Ljk5Mzc3QzUuOTM5MjcgMTQgNS40MTIwMiAxNCA0Ljk5ODg5IDEzLjc5OThDNC42MzUxNyAxMy42MjM1IDQuMzMzMzkgMTMuMzQxMiA0LjEzMzMyIDEyLjk5QzMuOTA2MDcgMTIuNTkxMSAzLjg3MSAxMi4wNjUgMy44MDA4NiAxMS4wMTI5TDMuMzMzMzMgNCIgc3Ryb2tlPSIjNjY3MDg1IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+";

package/src/nile-icon/icons/svg/users-up.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAuNjY2NyAxMkwxMi42NjY3IDEwTTEyLjY2NjcgMTBMMTQuNjY2NyAxMk0xMi42NjY3IDEwVjE0TTEwLjMzMzQgMi4xOTM4NEMxMS4zMTA3IDIuNTg5NDMgMTIgMy41NDc1NCAxMiA0LjY2NjY3QzEyIDUuNzg1NzkgMTEuMzEwNyA2Ljc0MzkgMTAuMzMzNCA3LjEzOTQ5TTguMDAwMDQgMTBINS4zMzMzN0M0LjA5MDg2IDEwIDMuNDY5NjEgMTAgMi45Nzk1NSAxMC4yMDNDMi4zMjYxNCAxMC40NzM2IDEuODA3MDEgMTAuOTkyOCAxLjUzNjM2IDExLjY0NjJDMS4zMzMzNyAxMi4xMzYyIDEuMzMzMzcgMTIuNzU3NSAxLjMzMzM3IDE0TTkuMDAwMDQgNC42NjY2N0M5LjAwMDA0IDYuMTM5NDMgNy44MDYxMyA3LjMzMzMzIDYuMzMzMzcgNy4zMzMzM0M0Ljg2MDYxIDcuMzMzMzMgMy42NjY3MSA2LjEzOTQzIDMuNjY2NzEgNC42NjY2N0MzLjY2NjcxIDMuMTkzOTEgNC44NjA2MSAyIDYuMzMzMzcgMkM3LjgwNjEzIDIgOS4wMDAwNCAzLjE5MzkxIDkuMDAwMDQgNC42NjY2N1oiIHN0cm9rZT0iIzQ3NTQ2NyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+";

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

@@ -17,10 +17,13 @@ export const styles = css`
     background: hsl(0, 0%, 100%);
     border: solid 1px hsl(240 5.9% 90%);
     border-radius: 0.25rem;
-    padding: 12px 9px;
     overflow: auto;
     overscroll-behavior: none;
   }
+  
+  .search__wrapper {
+    padding: 12px 9px;
+  }
 
   ::slotted(nile-divider) {
     --spacing: 0.5rem;

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

@@ -185,18 +185,20 @@ export class NileMenu extends NileElement {
     return html`
       <div>
         ${this.searchEnabled
-          ? html` <nile-input
-              size="medium"
-              clearable
-              style=${this.searchWidth
-                ? `width: ${this.searchWidth}px;`
-                : 'width: 100%;'}
-              .value=${this.searchValue}
-              placeholder="Search..."
-              @nile-input=${this.handleSearchChange}
-            >
-              <nile-icon name="search" slot="suffix"> </nile-icon>
-            </nile-input>`
+          ? html`<div class="search__wrapper">
+              <nile-input
+                size="medium"
+                clearable
+                style=${this.searchWidth
+                  ? `width: ${this.searchWidth}px;`
+                  : 'width: 100%;'}
+                .value=${this.searchValue}
+                placeholder="Search..."
+                @nile-input=${this.handleSearchChange}
+              >
+                <nile-icon name="search" slot="suffix"> </nile-icon>
+              </nile-input>
+            </div>`
           : html``}
         ${this.showNoResults
           ? html` <nile-menu-item>${this.noResultsMessage}</nile-menu-item> `

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

@@ -1,18 +1,16 @@
 /**
-* Copyright Aquera Inc 2023
-*
-* This source code is licensed under the BSD-3-Clause license found in the
-* LICENSE file in the root directory of this source tree.
-*/
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 
-import {css} from 'lit-element';
+import { css } from 'lit-element';
 
 /**
  * Radio CSS
  */
 export const styles = css`
-
-
   :host {
     display: block;
   }
@@ -40,10 +38,10 @@ export const styles = css`
 
   .radio__checked-icon {
     display: inline-flex;
-    width: 9px;
-    height: 9px;
+    width: var(--nile-radio-inner-width);
+    height: var(--nile-radio-inner-width);
     border-radius: 50%;
-    background: var(--nile-colors-primary-600);
+    background: var(--nile-radio-checked-icon-background);
   }
 
   .radio__control {
@@ -52,14 +50,16 @@ export const styles = css`
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: var(--nile-type-scale-3);
-    height: var(--nile-type-scale-3);
-    border: solid 1px var(--nile-colors-neutral-700);
+    width: var(--nile-radio-outer-width);
+    height: var(--nile-radio-outer-height);
+    border: solid 1px var(--nile-radio-outer-border-color);
     border-radius: 50%;
-    background-color: var(--nile-colors-white-base);
+    background-color: var(--nile-radio-outer-background-color);
     color: transparent;
-    transition: var(--nile-transition-duration-default) border-color, var(--nile-transition-duration-default) background-color,
-    var(--nile-transition-duration-default) color, var(--nile-transition-duration-default) box-shadow;
+    transition: var(--nile-transition-duration-default) border-color,
+      var(--nile-transition-duration-default) background-color,
+      var(--nile-transition-duration-default) color,
+      var(--nile-transition-duration-default) box-shadow;
   }
 
   .radio__input {
@@ -72,26 +72,26 @@ export const styles = css`
 
   /* Hover */
   .radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {
-    border: 1px solid var(--nile-colors-primary-600);
-    background: var(--nile-colors-primary-100);
+    border: 1px solid var(--nile-radio-hover-border-color);
+    background: var(--nile-radio-hover-background-color);
   }
 
   /* Checked */
   .radio--checked .radio__control {
     color: var(--nile-colors-primary-600);
-    border: 1px solid var(--nile-colors-primary-600);
-    background-color: var(--nile-colors-white-base);
+    border: 1px solid var(--nile-radio-checked-border-color);
+    background-color: var(--nile-radio-checked-background-color);
   }
 
   /* Checked + hover */
   .radio.radio--checked:not(.radio--disabled) .radio__control:hover {
-    border: 1px solid var(--nile-colors-primary-900);
-    background-color: var(--nile-colors-white-base);
+    border: 1px solid var(--nile-radio-checked-hover-border-color);
+    background-color: var(--nile-radio-checked-hover-background-color); 
   }
 
   /* Checked + hover */
   .radio__checked-icon:hover {
-    background-color: var(--nile-colors-primary-900);
+    background-color: var(--nile-radio-checked-hover-icon-background-color);
   }
 
   /* Checked + focus */
@@ -104,7 +104,15 @@ export const styles = css`
   .radio--disabled {
     opacity: 0.5;
     cursor: not-allowed;
-    border-color: 1px solid var(--nile-colors-neutral-500);
+  }
+
+  .radio--disabled .radio__checked-icon {
+    background-color:#D0D5DD; // for v2
+  }
+
+  .radio--disabled .radio__control {
+    background-color:#F9FAFB;
+    border: 1px solid #D0D5DD;
   }
 
   /* When the control isn't checked, hide the circle for Windows High Contrast mode a11y */
@@ -124,6 +132,6 @@ export const styles = css`
   .radio__label_border {
     padding: 0.75rem;
     border-radius: 4px;
-    border: 1px solid var(--Neutral-Normal, #E5E9EB);
+    border: 1px solid var(--Neutral-Normal, #e5e9eb);
   }
 `;

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

@@ -20,7 +20,7 @@ export default css`
     margin-right: 6px;
     font-size: 14px;
     color: var(--nile-colors-dark-900);
-    font-family:var(--nile-font-family-serif);
+    font-family: var(--nile-font-family-serif);
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
@@ -41,7 +41,7 @@ export default css`
     left: 0;
     right: 0;
     bottom: 0;
-    background: var(--nile-colors-neutral-500);
+    background-color: var(--nile-slide-toggle-color-background-inactive);
     transition: 0.4s;
     border-radius: 34px;
   }
@@ -53,17 +53,17 @@ export default css`
     width: 12px;
     bottom: 2px;
     left: 2px;
-    background-color: var(--nile-colors-white-base);
+    background-color: var(--nile-slide-toggle-color-indicator);
     transition: 0.4s;
     border-radius: 50%;
   }
 
   .nile-slide-toggle__switch input:checked + .nile-slide-toggle__slider {
-    background-color: var(--nile-colors-primary-600);
+    background-color: var(--nile-slide-toggle-color-background-active);
   }
 
   .nile-slide-toggle__switch input:focus + .nile-slide-toggle__slider {
-    box-shadow: 0 0 1px var(--nile-colors-primary-600);
+    box-shadow: 0 0 1px var(--nile-slide-toggle-color-background-active);
   }
 
   .nile-slide-toggle__switch input:checked + .nile-slide-toggle__slider:before {

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

@@ -50,20 +50,20 @@ export const styles = css`
     width: max-content;
     max-width: var(--max-width);
     border-radius: 0.25rem;
-    background-color: hsl(240 3.7% 15.9%);
-    font-size: 10.24px;
-    font-weight: 400;
-    line-height: 10.24px;
+    background-color: var(--nile-tooltip-color-background);
+    font-size:var(--nile-tooltip-font-size-sm);
+    font-weight:var( --nile-tooltip-font-weight-sm);
+    line-height:var(--nile-tooltip-line-height-sm);
+    padding: var(--nile-tooltip-padding-y) var(--nile-tooltip-padding-x);
     color: hsl(0, 0%, 100%);
-    padding: 0.25rem 0.5rem;
     pointer-events: none;
     word-break: break-word;
   }
 
   .tooltip__body--large {
-    font-size: 12px;
-    line-height: 12px;
-    font-weight: 500;
+    font-size: var(--nile-tooltip-font-size-lg);
+    line-height: var(--nile-tooltip-line-height-lg);
+    font-weight: var(--nile-tooltip-font-weight-lg);
   }
 `;