@aquera/nile-elements 0.1.17 → 0.1.18

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

@@ -36,10 +36,10 @@ export const styles = css`
    */
 
   .tag--primary {
-    background: #005EA6;
-    border-color: #005EA6;
-    border: 2px solid  #005EA6;
-    color: #FFF;
+    background: var(--nile-colors-primary-600);
+    border-color: var(--nile-colors-primary-600);
+    border: 2px solid  var(--nile-colors-primary-600);
+    color: var(--nile-colors-white-base);
   }
 
   .tag--primary:hover {
@@ -51,13 +51,13 @@ export const styles = css`
   }
 
   .tag--success {
-    background: #A5F3E1;
-    border: 2px solid #A5F3E1;
-    color: #000;
+    background: var(--nile-colors-green-400);
+    border: 2px solid var(--nile-colors-green-400);
+    color: var(--nile-colors-dark-900);
   }
 
   .tag--success:hover {
-    border: 2px solid #43E5C0;
+    border: 2px solid var(--nile-colors-green-500);
   }
 
   .tag--success:active > nile-icon-button {
@@ -65,13 +65,13 @@ export const styles = css`
   }
 
   .tag--normal {
-    background: #E5E9EB;
-    border: 2px solid #E5E9EB;
-    color: #000;
+    background: var(--nile-colors-neutral-400);
+    border: 2px solid var(--nile-colors-neutral-400);
+    color: var(--nile-colors-dark-900);
   }
 
   .tag--normal:hover {
-    border: 2px solid #C7CED4;
+    border: 2px solid var(--nile-colors-neutral-500);
   }
 
 
@@ -80,13 +80,13 @@ export const styles = css`
   }
 
   .tag--warning {
-    background: #F3E0A5;
-    border: 2px solid #F3E0A5;
-    color: #000;
+    background: var(--nile-colors-yellow-400);
+    border: 2px solid var(--nile-colors-yellow-400);
+    color: var(--nile-colors-dark-900);
   }
 
   .tag--warning:hover {
-    border: 2px solid #E5BF43;
+    border: 2px solid var(--nile-colors-yellow-500);
   }
 
   .tag--warning:active > nile-icon-button {
@@ -95,13 +95,13 @@ export const styles = css`
 
 
   .tag--error {
-    background: #F3A5AA;
-    border: 2px solid #F3A5AA;
-    color: #000;
+    background: var(--nile-colors-red-400);
+    border: 2px solid var(--nile-colors-red-400);
+    color: var(--nile-colors-dark-900);
   }
 
   .tag--error:hover {
-    border: 2px solid #E5434D;
+    border: 2px solid var(--nile-colors-red-500);
   }
 
   .tag--error:active > nile-icon-button {
@@ -109,13 +109,13 @@ export const styles = css`
   }
 
   .tag--info {
-    background: #A5D3F3;
-    border: 2px solid #A5D3F3;
-    color: #000000;
+    background: var(--nile-colors-blue-400);
+    border: 2px solid var(--nile-colors-blue-400);
+    color: var(--nile-colors-dark-900);
   }
 
   .tag--info:hover {
-    border: 2px solid #42A3E5;
+    border: 2px solid var(--nile-colors-blue-500);
   }
 
   .tag--info:active > nile-icon-button {

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

@@ -39,7 +39,7 @@ export const styles = css`
   :host([required]) .form-control--has-label .form-control__label::after {
     content: '*';
     margin-inline-start: -2px;
-    color: #a4121c;
+    color: var( --nile-colors-red-700);
   }
 
   /* Help text */
@@ -110,7 +110,7 @@ export const styles = css`
 
   .textarea--standard.textarea--focused:not(.textarea--disabled)
     .textarea__control {
-    color: #000000;
+    color: var(--nile-colors-dark-900);
   }
 
   .textarea--standard.textarea--disabled {
@@ -196,12 +196,12 @@ export const styles = css`
   }
 
   .textarea--standard.textarea--destructive {
-    border-color: #fda29b;
+    border-color: var(--nile-colors-red-400);
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
   }
 
   .textarea--standard.textarea--destructive.textarea--focused {
-    border-color: #fda29b;
+    border-color: var(--nile-colors-red-400);
     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-toast/nile-toast.css.ts

@@ -130,12 +130,12 @@ export const styles = css`
 
   .alert__message--title {
     font-weight: 600;
-    color:#344054;
+    color:var(--nile-colors-dark-900);
   }
 
   .alert__message--content {
     font-weight:400;
-    color:#475467;
+    color:var(--nile-colors-dark-500);
   }
 
   .alert__message--content-only {

package/src/nile-toast/nile-toast.ts

@@ -371,7 +371,7 @@ export class NileToast extends NileElement {
                 name="${this.closeIconName}"
                 label="close"
                 size="20"
-                color="#98A2B3"
+                color="var(--nile-colors-neutral-700)"
                 @click=${this.handleCloseClick}
               ></nile-icon-button>
             `

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

@@ -27,7 +27,7 @@ export const styles = css`
     font-weight: var(--nile-toolbar-font-weight);
     font-family: var(--nile-font-family-sans-serif);
     font-size: var(--nile-toolbar-font-size);
-    background-color: var(--nile-toolbar-background-color, #FFFFFF);
+    background-color: var(--nile-toolbar-background-color, var(--nile-colors-white-base));
     color: var(--nile-toolbar-text-color, rgba(0, 0, 0, 0.87));
   }
 `;

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

@@ -55,7 +55,7 @@ export const styles = css`
     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: #ffffff;
+    color: var(--nile-colors-white-base);
     pointer-events: none;
     word-break: break-word;
   }

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

@@ -16,7 +16,7 @@ export const styles = css`
 
   .introjs-tooltip {
     background-color: var(--nile-tour-background-color, #1978B8);
-    color: var(--nile-tour-text-color, #fff);
+    color: var(--nile-tour-text-color, var(--nile-colors-white-base));
     width: 300px;
     max-width: 300px;
     border-radius: 4px;
@@ -28,7 +28,7 @@ export const styles = css`
   }
 
   .introjs-tooltip-title {
-    color: #ffffff;
+    color: var(--nile-colors-white-base);
     font-size: 16px;
     font-style: normal;
     font-weight: 500;
@@ -43,7 +43,7 @@ export const styles = css`
   }
 
   .introjs-tooltiptext {
-    color: #ffffff;
+    color: var(--nile-colors-white-base);
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
@@ -92,14 +92,14 @@ export const styles = css`
     transform: rotate(0);
     clip-path: inset(0px 1px 0px 0px);
     left: -13.5px;
-    border-right-color: var(--nile-tour-background-color, #fff) !important;
+    border-right-color: var(--nile-tour-background-color, var(--nile-colors-white-base)) !important;
   }
 
   .introjs-arrow.right-bottom {
     right: -12px;
     transform: rotate(180deg);
     clip-path: inset(0px 3px 0px 0px);
-    border-left-color: var(--nile-tour-background-color, #fff) !important;
+    border-left-color: var(--nile-tour-background-color, var(--nile-colors-white-base)) !important;
   }
 
   .introjs-arrow.top-middle {
@@ -113,7 +113,7 @@ export const styles = css`
   .introjs-button {
     background: none;
     border: none;
-    color: var(--nile-tour-text-color, #fff);
+    color: var(--nile-tour-text-color, var(--nile-colors-white-base));
     font-size: 14px;
     padding: 0;
     cursor: pointer;
@@ -131,7 +131,7 @@ export const styles = css`
   .introjs-button:hover {
     background: none;
     border: none;
-    color: var(--nile-tour-text-color, #fff);
+    color: var(--nile-tour-text-color, var(--nile-colors-white-base));
     font-size: 14px;
     padding: 0;
     cursor: pointer;
@@ -147,7 +147,7 @@ export const styles = css`
   .introjs-button:focus {
     background: none;
     border: none;
-    color: var(--nile-tour-text-color, #fff);
+    color: var(--nile-tour-text-color, var(--nile-colors-white-base));
     font-size: 14px;
     padding: 0;
     cursor: pointer;

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

@@ -30,7 +30,7 @@ export const styles = css`
      * These are actually used by tree item, but we define them here so they can more easily be set and all tree items
      * stay consistent.
      */
-    --indent-guide-color: #F5F7F7;
+    --indent-guide-color: var(--nile-colors-dark-200);
     --indent-guide-offset: 0;
     --indent-guide-style: solid;
     --indent-guide-width: 0;

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

@@ -44,7 +44,7 @@ export const styles = css`
     display: flex;
     align-items: stretch;
     flex-direction: column;
-    color: #777D82;
+    color: var(--nile-colors-neutral-700);
     cursor: pointer;
     user-select: none;
   }
@@ -77,7 +77,7 @@ export const styles = css`
     align-items: center;
     justify-content: center;
     box-sizing: content-box;
-    color: #C7CED4;
+    color: var(--nile-colors-neutral-500);
     padding: 0.5rem;
     width: 1rem;
     height: 1rem;
@@ -123,18 +123,18 @@ export const styles = css`
   }
 
   :host(:focus-visible) .tree-item__item {
-    outline: solid 3px #C7CED4;
+    outline: solid 3px var(--nile-colors-neutral-500);
     outline-offset: 1px;
     z-index: 2;
   }
 
   :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {
-    background-color: #eaecf0;
-    border-inline-start-color: #035da6;
+    background-color: var(--nile-colors-neutral-700);
+    border-inline-start-color: var(--nile-colors-primary-700);
   }
 
   :host(:not([aria-disabled='true'])) .tree-item__expand-button {
-    color: #777D82;
+    color: var(--nile-colors-neutral-700);
   }
 
   .tree-item__label {

package/src/nile-vertical-stepper-item/nile-vertical-stepper-item.css.ts

@@ -61,23 +61,23 @@ export const styles = css`
 		width: var(--circle-height);
 		aspect-ratio: 1 / 1;
 		border-radius: 50%;
-		background: radial-gradient(var(--nile-colors-gray-light-mode-300, #d0d5dd) var(--bulletin--dot--seperation), var(--nile-colors-gray-neutral-50, #f9fafb) var(--bulletin--dot--seperation));
-		border: 2px solid var(--nile-colors-gray-light-mode-200, #eaecf0);
+		background: radial-gradient(var(--nile-colors-gray-light-mode-300) var(--bulletin--dot--seperation), var(--nile-colors-gray-neutral-50) var(--bulletin--dot--seperation));
+		border: 2px solid var(--nile-colors-gray-light-mode-200);
 	}
 
 	.stepper__bulletin__dot--active{
-		background: radial-gradient(#fff var(--bulletin--dot--seperation), var(--nile-colors-primary-600, #005EA6) var(--bulletin--dot--seperation));
-		border: 2px solid #85AAD18A;
+		background: radial-gradient(var(--nile-colors-white-base) var(--bulletin--dot--seperation), var(--nile-colors-primary-600) var(--bulletin--dot--seperation));
+		border: 2px solid var(--nile-colors-primary-400);
 	}
 
 	.stepper__bulletin--icon {
 		display:grid;
 		place-content:center;
 		width: var(--circle-height);
-		border: 2px solid var(--nile-colors-primary-600, #005EA6);
+		border: 2px solid var(--nile-colors-primary-600);
 		aspect-ratio: 1 / 1;
 		border-radius: 50%;
-		background-color:var(--nile-colors-primary-600, #005EA6);
+		background-color:var(--nile-colors-primary-600);
 		overflow:hidden;
 	}
 
@@ -91,10 +91,10 @@ export const styles = css`
 
 	.stepper__item__line{
 		height:100%;
-		border-left: 2px solid var(--nile-colors-primary-600, #005EA6);
+		border-left: 2px solid var(--nile-colors-primary-600);
 	}
 	.stepper__item__line--active{
-		border-left: 2px solid var(--nile-colors-primary-600, #005EA6);
+		border-left: 2px solid var(--nile-colors-primary-600);
 	}
 
 	.stepper__item__content{
@@ -103,7 +103,7 @@ export const styles = css`
 		justify-content:start;
 	}
 	.stepper__content__title {
-		color:var(--nile-colors-gray-light-mode-700, #344054);
+		color:var(--nile-colors-gray-light-mode-700);
 		font-size: var(--stepper-item-title-size);
 		line-height: var(--stepper-item-text-line-height);
 		font-family: var(--nile-font-family-medium);
@@ -111,11 +111,11 @@ export const styles = css`
 	}
 
 	.stepper__content__title--active{
-		color:var(--nile-colors-primary-700, #005291);
+		color:var(--nile-colors-primary-700);
 	}
 
 	.stepper__content__subtitle {
-		color:var(--nile-colors-gray-light-mode-600, #475467);
+		color:var(--nile-colors-gray-light-mode-600);
 		font-size: var(--stepper-item-subtitle-size);
 		line-height: var(--stepper-item-text-line-height);
 		font-family: var( --nile-font-family-sans-serif);
@@ -123,7 +123,7 @@ export const styles = css`
 	}
 
 	.stepper__content__subtitle--active{
-		color:var(--nile-colors-primary-600, #005EA6);
+		color:var(--nile-colors-primary-600);
 	}
 `;