@aquera/nile-elements 0.1.17 → 0.1.18

package/package.json

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

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

@@ -32,7 +32,7 @@ export const styles = css`
 
   .accordian {
     border-top:solid 1px var(--nile-colors-neutral-500);
-    background-color: #FFFFFF;
+    background-color: var(--nile-colors-white-base);
     overflow-anchor: none;
   }
 

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

@@ -229,7 +229,7 @@ export const styles = css`
   .button--standard.button--destructive {
     background-color: #d92d20;
     border-color: #d92d20;
-    color: #fff;
+    color: var(--nile-colors-white-base);
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
   }
 
@@ -242,14 +242,14 @@ export const styles = css`
   .button--standard.button--destructive:active:not(.button--disabled) {
     background-color: #d92d20;
     border-color: #d92d20;
-    color: #fff;
+    color: var(--nile-colors-white-base);
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
       0px 0px 0px 4px rgba(240, 68, 56, 0.24);
   }
   .button--standard.button--destructive:focus-visible:not(.button--disabled) {
     background-color: #d92d20;
     border-color: #d92d20;
-    color: #fff;
+    color: var(--nile-colors-white-base);
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
       0px 0px 0px 4px rgba(240, 68, 56, 0.24);
   }
@@ -271,7 +271,7 @@ export const styles = css`
 
   /* secondary-Grey */
   .button--standard.button--secondary-grey {
-    background-color: #fff;
+    background-color: var(--nile-colors-white-base);
     border-color: #d0d5dd;
     color: #344054;
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
@@ -285,7 +285,7 @@ export const styles = css`
   }
 
   .button--standard.button--secondary-grey:active:not(.button--disabled) {
-    background-color: #fff;
+    background-color: var(--nile-colors-white-base);
     border-color: #d0d5dd;
     color: #344054;
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
@@ -309,7 +309,7 @@ export const styles = css`
 
   /* secondary-blue */
   .button--standard.button--secondary-blue {
-    background-color: #fff;
+    background-color: var(--nile-colors-white-base);
     border-color: #85aad1;
     color: #005291;
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
@@ -323,7 +323,7 @@ export const styles = css`
   }
 
   .button--standard.button--secondary-blue:active:not(.button--disabled) {
-    background-color: #fff;
+    background-color: var(--nile-colors-white-base);
     border-color: #85aad1;
     color: #005291;
     box-shadow: 0px 1px 2px 0px rgba(0, 82, 145, 0.1),
@@ -331,7 +331,7 @@ export const styles = css`
   }
 
   .button--standard.button--secondary-blue.button--disabled {
-    background-color: #fff;
+    background-color: var(--nile-colors-white-base);
     border-color: #eaecf0;
     color: #98a2b3;
     cursor: not-allowed;
@@ -339,7 +339,7 @@ export const styles = css`
 
   .button--standard.button--secondary-blue.button--disabled:hover,
   .button--standard.button--secondary-blue.button--disabled:active {
-    background-color: #fff;
+    background-color: var(--nile-colors-white-base);
     border-color: #eaecf0;
     color: #98a2b3;
     cursor: not-allowed;
@@ -417,16 +417,16 @@ export const styles = css`
 
   /* destructive */
   .button--standard.button--destructive ::slotted(nile-icon:not([color])) {
-    --nile-svg-fill: #fff !important;
+    --nile-svg-fill: var(--nile-colors-white-base) !important;
   }
   .button--standard.button--destructive:hover:not(.button--disabled)
     ::slotted(nile-icon:not([color])),
   .button--standard.button--caution:active:not(.button--disabled)
     ::slotted(nile-icon:not([color])) {
-    --nile-svg-fill: #fff !important;
+    --nile-svg-fill: var(--nile-colors-white-base) !important;
   }
   .button--standard.button--destructive.button--disabled ::slotted(nile-icon:not([color])) {
-    --nile-svg-fill: #fff !important;
+    --nile-svg-fill: var(--nile-colors-white-base) !important;
   }
 
   /*
@@ -554,7 +554,7 @@ export const styles = css`
   .button--outline.button--destructive:active:not(.button--disabled) {
     border-color: #fda29b;
     color: #b42318;
-    background-color: #fff;
+    background-color: var(--nile-colors-white-base);
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
       0px 0px 0px 4px rgba(240, 68, 56, 0.24);
   }
@@ -563,7 +563,7 @@ export const styles = css`
   .button--outline.button--destructive:focus-visible:not(.button--disabled) {
     border-color: #fda29b;
     color: #b42318;
-    background-color: #fff;
+    background-color: var(--nile-colors-white-base);
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
       0px 0px 0px 4px rgba(240, 68, 56, 0.24);
   }

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

@@ -21,7 +21,7 @@ export const styles = css`
     cursor: pointer;
     border-radius: 4px;
     font-weight: 500;
-    color: #000;
+    color: var(--nile-colors-dark-900);
     text-align: center;
     font-family: var(--nile-font-family-serif);
     font-size: 14px;
@@ -39,7 +39,7 @@ export const styles = css`
   }
 
   .nile-button-toggle:active {
-    background: #e5e9eb;
+    background: var(--nile-colors-neutral-400);
   }
 
   .nile-button-toggle__initial {
@@ -54,7 +54,7 @@ export const styles = css`
   .nile-button-toggle__middle {
     border-width: 1px 1px 1px 0;
     border-style: solid;
-    border-color: #ccc;
+    border-color: var(--nile-colors-neutral-500);
     border-radius: 0;
   }
 

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

@@ -18,8 +18,8 @@ export const styles = css`
     background-color: white;
     border-radius: 8px;
     width: 300px;
-    box-shadow: 0px 8px 8px -4px #10182808;
-    box-shadow: 0px 20px 24px -4px #10182814;
+    box-shadow: 0px 8px 8px -4px var(--nile-colors-neutral-400);
+    box-shadow: 0px 20px 24px -4px var(--nile-colors-dark-100);
   }
 
   .calendar-container {
@@ -97,34 +97,34 @@ export const styles = css`
 	}
 
   .day_date:not(.range-start, .selected-date, .range-end) .current__date__dot{
-		background-color:var(--nile-colors-primary-600,#005EA6);
+		background-color:var(--nile-colors-primary-600);
   }
 
 
   .day_date:hover {
-    background-color: #F9FAFB;
+    background-color: var(--nile-colors-neutral-100);
   }
 
   .filler {
-    color: #7f7f7f;
+    color: var(--nile-colors-dark-500);
     pointer-events: none;
   }
 
   .selected-date {
     color: white;
     border-radius: 4px;
-    background: #005EA6;
+    background: var(--nile-colors-primary-600);
   }
 
   .selected-date:hover {
-    background: #005EA6;
+    background: var(--nile-colors-primary-600);
   }
 
   .selected-date,
   .range-start,
   .range-end {
     border-radius: 4px;
-    background: #005EA6;
+    background: var(--nile-colors-primary-600);
     color: white;
   }
 
@@ -132,45 +132,45 @@ export const styles = css`
   .range-start:hover,
   .range-end:hover,
   .day_date.in-range:hover {
-    background: #005291;
+    background: var(--nile-colors-primary-700);
   }
 
   .range-start.in-range {
-    background: #005EA6;
+    background: var(--nile-colors-primary-600);
     border-radius: 4px 0 0 4px;
     color: white;
   }
 
   .range-end {
-    background: #005EA6;
+    background: var(--nile-colors-primary-600);
     border-radius: 0 4px 4px 0;
     color: white;
   }
 
   .range-middle {
-    background: #005EA6;
+    background: var(--nile-colors-primary-600);
     color: white;
     border-radius: 0;
   }
 
   .day_date.selected {
-    background: #005EA6;
+    background: var(--nile-colors-primary-600);
     color: white;
     border-radius: 4px;
   }
 
   .day_date.in-range:not(.range-start,.range-end, .selected-date) {
-    background: #e5e9eb;
+    background: var(--nile-colors-neutral-400);
   }
 
   .selected-date {
     color: white;
     border-radius: 4px;
-    background: #005EA6;
+    background: var(--nile-colors-primary-600);
   }
 
   .not-allowed{
-    color: #7f7f7f;
+    color: var(--nile-colors-dark-500);
     pointer-events: none;
   }
 
@@ -194,7 +194,7 @@ export const styles = css`
   }
 
   .manual-input-label {
-    color: #7f7f7f;
+    color: var(--nile-colors-dark-500);
     font-family: Colfax-regular;
     font-size: 12px;
     font-weight: 500;
@@ -266,16 +266,16 @@ export const styles = css`
   }
 
   .duration__value:hover{
-    background:#F9FAFB;
+    background: var(--nile-colors-neutral-100);
   }
 
   .duration__value--selected{
-    background-color:#005EA6;
+    background-color:var(--nile-colors-primary-600);
     color: white;
   }
 
   .duration__value--selected:hover{
-    background:#005291;
+    background:var(--nile-colors-primary-700);
   }
 
   nile-input::part(input)::-webkit-inner-spin-button,

package/src/nile-calendar/nile-calendar.test.ts

@@ -84,12 +84,21 @@ describe('NileCalendar', () => {
     const el = await fixture<NileCalendar>(html`<nile-calendar></nile-calendar>`);
     await elementUpdated(el);
   
-    // Get current, next, and previous months
-    const today = new Date();
-    const getMonthName = (date: Date) => date.toLocaleString('default', { month: 'long' });
-    const currMonth = getMonthName(today);
-    const nextMonth = getMonthName(new Date(today.setMonth(today.getMonth() + 1)));
-    const prevMonth = getMonthName(new Date(today.setMonth(today.getMonth() - 2)));
+    function getMonths() {
+      const currentDate = new Date();
+      
+      const previousMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1);
+      const currentMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
+      const nextMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1);
+  
+      return {
+          prevMonth: previousMonth.toLocaleString('default', { month: 'long', year: 'numeric' }).split(' ').at(0),
+          currMonth: currentMonth.toLocaleString('default', { month: 'long', year: 'numeric' }).split(' ').at(0),
+          nextMonth: nextMonth.toLocaleString('default', { month: 'long', year: 'numeric' }).split(' ').at(0)
+      };
+    }
+    const {prevMonth,currMonth,nextMonth}=getMonths()
+    console.log(prevMonth,currMonth,nextMonth)
   
     // Check initial month
     let monthText = el.shadowRoot?.querySelector('div.calendar-header > span')?.textContent;

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

@@ -70,7 +70,7 @@ export const styles = css`
     align-content: center;
     align-items: center;
     padding: 8px 16px;
-    background-color: #f9fafb;
+    background-color: var(--nile-colors-neutral-100);
     height: 40px;
   }
 

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

@@ -88,9 +88,9 @@ export const styles = css`
 
   .nile-chip {
     padding: 5px 10px;
-    background-color: #fff;
+    background-color: var(--nile-colors-white-base);
     border-radius: 0.25rem;
-    border: solid 1px #c7ced4;
+    border: solid 1px var(--nile-colors-neutral-500);
     display: flex;
     flex-wrap: wrap;
     width: 100%;
@@ -121,13 +121,13 @@ export const styles = css`
   }
 
   .nile-chip:hover:not(.nile-chip--disabled) {
-    background-color: #fff;
+    background-color: var(--nile-colors-white-base);
     box-shadow: 0 0 0 1px hsl(198.6 88.7% 48.4% / 40%);
   }
 
   .nile-chip.nile-chip--focused:not(.nile-chip--disabled) {
-    background-color: #fff;
-    border-color: #005ea6;
+    background-color: var(--nile-colors-white-base);
+    border-color: var(--nile-colors-primary-600);
     box-shadow: 0 0 0 1px hsl(198.6 88.7% 48.4% / 40%);
   }
 
@@ -139,15 +139,15 @@ export const styles = css`
   }
 
   .nile-chip.nile-chip--warning {
-    border-color: #e5bf43;
+    border-color: var(--nile-colors-yellow-500);
   }
 
   .nile-chip.nile-chip--error {
-    border-color: #e5434d;
+    border-color: var(--nile-colors-red-500);
   }
 
   .nile-chip.nile-chip--success {
-    border-color: #43e5c0;
+    border-color: var(--nile-colors-green-500);
   }
 
   .nile-chip__auto-complete {

package/src/nile-circular-progressbar/nile-circular-progressbar.css.ts

@@ -23,7 +23,7 @@ export const styles = css`
 
   .progress {
     stroke-width: 2px;
-    stroke: #e5bf43;
+    stroke: var(--nile-colors-yellow-500);
     stroke-linecap: round;
     fill: none;
     transform: rotate(270deg);

package/src/nile-code-editor/nile-code-editor.css.ts

@@ -51,7 +51,7 @@ export const styles = css`
   .expand__icon__container{
     display: none;
     position: absolute;
-    border-radius: 5px;
+    border-radius: var(--nile-radius-base-standard);
     cursor: pointer;
     right: 0px;
     top: 5px;

package/src/nile-content-editor/nile-content-editor.css.ts

@@ -31,7 +31,7 @@ export const styles = css`
     box-sizing: border-box;
     width: 100%;
     padding: 9px;
-    border: 1px solid #c7ced4;
+    border: 1px solid var(--nile-colors-neutral-500);
     border-radius: 4px;
     overflow: auto;
     overflow-x: auto;
@@ -40,7 +40,7 @@ export const styles = css`
     -ms-overflow-style: none;
     cursor: text;
     white-space: nowrap;
-    background-color: #ffffff;
+    background-color: var(--nile-colors-white-base);
     height: 38px;
   }
   .content-editable-input:focus {
@@ -48,7 +48,7 @@ export const styles = css`
   }
 
   .error {
-    border-color: #e5434d;
+    border-color: var(--nile-colors-red-500);
   }
 
   .read-only {
@@ -59,8 +59,8 @@ export const styles = css`
 
   .chips {
     display: inline;
-    background: #e5e9eb;
-    color: #000;
+    background: var(--nile-colors-neutral-400);
+    color: var(--nile-colors-dark-900);
     border-radius: 4px;
     padding: 6px;
     height: 24px;
@@ -80,12 +80,12 @@ export const styles = css`
   }
 
   .chip-error {
-    background: #f3a5aa;
+    background: var(--nile-colors-red-400);
   }
   .nile-options-container {
     box-sizing: border-box;
-    background-color: #ffffff;
-    border: 1px solid #c7ced4;
+    background-color: var(--nile-colors-white-base);
+    border: 1px solid var(--nile-colors-neutral-500);
     overflow: auto;
     max-height: 150px;
   }
@@ -97,7 +97,7 @@ export const styles = css`
   }
 
   .asterik {
-    color: #e5434d;
+    color: var(--nile-colors-red-500);
   }
 
   .no-border {

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

@@ -16,7 +16,7 @@ export const styles = css`
     --header-spacing: 1.25rem;
     --body-spacing: 1.25rem;
     --footer-spacing: 1.25rem;
-    --nile-dialog-remove-icon-color: #000;
+    --nile-dialog-remove-icon-color: var(--nile-colors-dark-900);
     display: contents;
   }
 
@@ -73,9 +73,9 @@ export const styles = css`
     flex: 0 0 auto;
     display: flex;
     padding: 12px 20px;
-    background-color: #fafafa;
+    background-color: var(--nile-colors-neutral-100);
     border-radius: 4px 4px 0 0;
-    border: 1px solid #e5e9eb;
+    border: 1px solid var(--nile-colors-neutral-400);
   }
 
   .dialog__header__text {
@@ -85,7 +85,7 @@ export const styles = css`
     gap: 5px;
     justify-content: center;
     margin: 0;
-    color: #000;
+    color: var(--nile-colors-dark-900);
   }
 
   slot[name="label"] {
@@ -131,7 +131,7 @@ export const styles = css`
     padding: 1.25rem;
     overflow: auto;
     -webkit-overflow-scrolling: touch;
-    border: 1px solid #e5e9eb;
+    border: 1px solid var(--nile-colors-neutral-400);
   }
 
   .dialog__body-noheader {
@@ -142,9 +142,9 @@ export const styles = css`
     flex: 0 0 auto;
     text-align: right;
     padding: 12px 24px;
-    background-color: #fafafa;
+    background-color: var(--nile-colors-neutral-100);
     border-radius: 0 0 4px 4px;
-    border: 1px solid #e5e9eb;
+    border: 1px solid var(--nile-colors-neutral-400);
   }
 
   .dialog__footer ::slotted(nile-button:not(:first-of-type)) {

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

@@ -17,7 +17,7 @@ export const styles = css`
 	}
 
 	.divider {
-		background-color: var(--nile-colors-gray-light-mode-200, #eaecf0);;
+		background-color: var(--nile-colors-gray-light-mode-200);;
 	}
 	
 	.horizontal {

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

@@ -13,7 +13,7 @@ import { css } from 'lit';
 export const styles = css`
   :host {
     box-sizing: border-box;
-    --nile-drawer-remove-icon-color:#000;
+    --nile-drawer-remove-icon-color:var(--nile-colors-dark-900);
   }
 
   :host *,

package/src/nile-empty-state/nile-empty-state.css.ts

@@ -109,14 +109,14 @@ export const styles = css`
     border-radius: 50%;
     display: grid;
     place-items: center;
-    background: #34405466;
+    background: var(--nile-colors-neutral-500);
     position:absolute;
     left: calc(50% - calc(var(--nile-es-icon-size) / 2));
     top:calc(62.5% - calc(var(--nile-es-icon-size) / 2));
   }
 
   .empty-state__body--tonal {
-    background: linear-gradient(180deg, #F9FAFB 0%, #EDF0F3 100%);
+    background: linear-gradient(180deg, var(--nile-colors-neutral-100) 0%, var(--nile-colors-neutral-400) 100%);
     width: 104px;
     height: 104px;
     border-radius: 50%;
@@ -136,7 +136,7 @@ export const styles = css`
     background-color: white;
     display: grid;
     place-items: center;
-    border: 1px solid #EAECF0;
+    border: 1px solid var(--nile-colors-neutral-400);
   }
 
   .empty__state__text-section {
@@ -159,7 +159,7 @@ export const styles = css`
     font-weight: 400;
     line-height: var(--nile-es-subtext-line-height);
     text-align: center;
-    color:#475467;
+    color:var(--nile-colors-dark-500);
     font-style: normal;
   }
 

package/src/nile-error-message/nile-error-message.ts

@@ -63,7 +63,7 @@ export class NileErrorMessage extends LitElement {
           size="14"
           class="nile-error-message__icon"
           part="icon"
-          color="#A4121C"
+          color="var(--nile-colors-red-700)"
         ></nile-icon>
         <span class="nile-error-message__error">${this.errorMessage}</span>
 
@@ -78,7 +78,7 @@ export class NileErrorMessage extends LitElement {
               class="nile-error-message__more-button"
               @click=${this.toggleExpanded}
               >${this.isExpanded ? 'View Less' : 'View More'}
-              <nile-icon color="#005EA6" part="icon" size="14" name="${iconName}"></nile-icon>
+              <nile-icon color="var(--nile-colors-primary-600)" part="icon" size="14" name="${iconName}"></nile-icon>
               </span
             > `:``}
             </div>

package/src/nile-form-error-message/nile-form-error-message.ts

@@ -37,7 +37,7 @@ export class NileFormErrorMessage extends LitElement {
 	public render(): TemplateResult {
 		return html`
       <div class="nile-form-error-message">
-       <nile-icon name="info2" size="14" class="nile-form-error-message__icon" color="#A4121C"> </nile-icon> <slot> </slot>
+       <nile-icon name="info2" size="14" class="nile-form-error-message__icon" color="var(--nile-colors-red-700)"> </nile-icon> <slot> </slot>
         </div>
 			`;
 	}

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

@@ -34,7 +34,7 @@ export const styles = css`
 
 	.hero__container--collapsed{
 		height: 67px;
-		background-color: var(--nile-hero-collapsed-background,#fff);
+		background-color: var(--nile-hero-collapsed-background);
 	}
 
 	.hero__container--expanded{
@@ -48,7 +48,7 @@ export const styles = css`
 		place-items: center;
 		display: grid;
 		border-radius: 8px;
-		border: 1px solid #EAECF0;
+		border: 1px solid var(--nile-colors-neutral-400);
 		background: linear-gradient(180deg, var(--nile-hero-color-icon-bg-from-gradient) 0%, var(--nile-hero-color-icon-bg-to-gradient) 100%);
 	}
 

package/src/nile-hero-header/nile-hero-header.css.ts

@@ -27,7 +27,7 @@ export const styles = css`
 		place-items: center;
 		display: grid;
 		border-radius: 8px;
-		border: 1px solid #EAECF0;
+		border: 1px solid var(--nile-colors-neutral-400);
 		background: linear-gradient(180deg, var(--nile-hero-color-icon-bg-from-gradient) 0%, var(--nile-hero-color-icon-bg-to-gradient) 100%);
 	}
 

package/src/nile-icon/index.ts

@@ -240,7 +240,7 @@ export class NileIcon extends LitElement {
       !this.color
     ) {
       // Case 1: _svg does not have fill color or has fill="inherit" and this.color is not mentioned
-      this.style.setProperty('--nile-svg-fill', `#7F7F7F`);
+      this.style.setProperty('--nile-svg-fill', `var(--nile-colors-dark-500)`);
 
     } else if (this.color) {
       // Case 2: If this.color is mentioned, use it as fill, regardless of _svg color