@aquera/nile-elements 0.1.38 → 0.1.39-beta-1.1

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

@@ -15,7 +15,7 @@ export const styles = css`
     display: contents;
 
     /* For better DX, we'll reset the margin here so the base part can inherit it */
-    margin: 0;
+    margin: var(--nile-spacing-none);
   }
 
   .alert {
@@ -25,10 +25,10 @@ export const styles = css`
     display: flex;
     align-items: flex-start;
     border: solid 2px 2px;
-    border-radius: 8px;
+    border-radius: var(--nile-radius-md, var(--ng-radius-xl));
     margin: inherit;
-    padding: 16px;
-    gap: 16px;
+    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));
+    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));
     width: max-content;
     min-width: 400px;
   }
@@ -39,8 +39,8 @@ export const styles = css`
   }
 
   .alert__prefix-icon-container {
-    background-color: red;
-    border-radius: 4px;
+    background-color: var(--nile-colors-red-500);
+    border-radius: var(--nile-radius-sm);
     box-sizing: border-box;
     display: flex;
     justify-content: center;
@@ -51,57 +51,57 @@ export const styles = css`
     flex: 0 0 auto;
     display: flex;
     align-items: center;
-    font-size: 10px;
+    font-size: var(--nile-type-scale-1);
   }
 
   .alert--success {
-    border: 1px solid var(--nile-toast-color-border-success);
-    background: var(--nile-toast-color-background-success);
-    box-shadow: var(--nile-toast-color-box-shadow);
+    border: 1px solid var(--nile-toast-color-border-success, var(--ng-colors-border-secondary-alt));
+    background: var(--nile-toast-color-background-success, var(--ng-colors-bg-primary-alt));
+    box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));
   }
 
   .alert--success .alert__prefix-icon-container {
-    background: var(--nile-toast-color-icon-background-color-success);
+    background: var(--nile-toast-color-icon-background-color-success, var(--ng-colors-bg-primary-alt));
   }
 
   .alert--info {
-    border: 1px solid var(--nile-toast-color-border-info);
-    background: var(--nile-toast-color-background-info);
-    box-shadow: var(--nile-toast-color-box-shadow);
+    border: 1px solid var(--nile-toast-color-border-info, var(--ng-colors-border-secondary-alt));
+    background: var(--nile-toast-color-background-info, var(--ng-colors-bg-primary-alt));
+    box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));
   }
 
   .alert--info .alert__prefix-icon-container {
-    background: var(--nile-toast-color-icon-background-color-info);
+    background: var(--nile-toast-color-icon-background-color-info, var(--ng-colors-bg-primary-alt));
   }
 
   .alert--warning {
-    border: 1px solid var(--nile-toast-color-border-warning);
-    background: var(--nile-toast-color-background-warning);
-    box-shadow: var(--nile-toast-color-box-shadow);
+    border: 1px solid var(--nile-toast-color-border-warning, var(--ng-colors-border-secondary-alt));
+    background: var(--nile-toast-color-background-warning, var(--ng-colors-bg-primary-alt));
+    box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));
   }
 
   .alert--warning .alert__prefix-icon-container {
-    background: var(--nile-toast-color-icon-background-color-warning);
+    background: var(--nile-toast-color-icon-background-color-warning, var(--ng-colors-bg-primary-alt));
   }
 
   .alert--error {
-    border: 1px solid var(--nile-toast-color-border-error);
-    background: var(--nile-toast-color-background-error);
-    box-shadow: var(--nile-toast-color-box-shadow);
+    border: 1px solid var(--nile-toast-color-border-error, var(--ng-colors-border-secondary-alt));
+    background: var(--nile-toast-color-background-error, var(--ng-colors-bg-primary-alt));
+    box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));
   }
 
   .alert--error .alert__prefix-icon-container {
-    background: var(--nile-toast-color-icon-background-color-error);
+    background: var(--nile-toast-color-icon-background-color-error, var(--ng-colors-bg-primary-alt));
   }
 
   .alert--gray {
-    border: 1px solid var(--nile-toast-color-border-gray);
-    background: var(--nile-toast-color-background-gray);
-    box-shadow: var(--nile-toast-color-box-shadow);
+    border: 1px solid var(--nile-toast-color-border-gray, var(--ng-colors-border-secondary-alt));
+    background: var(--nile-toast-color-background-gray, var(--ng-colors-bg-primary-alt));
+    box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));
   }
 
   .alert--gray .alert__prefix-icon-container {
-    background: var(--nile-toast-color-icon-background-color-gray);
+    background: var(--nile-toast-color-icon-background-color-gray, var(--ng-colors-bg-primary-alt));
   }
 
   .alert--black {
@@ -121,25 +121,23 @@ export const styles = css`
     align-items: center;
     flex-direction: column;
     align-items: flex-start;
-    font-family: var(--nile-font-family-serif);
-    font-size: 14px;
-    line-height: 20px;
-    color: black;
-    gap:3px;
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-display));
+    font-size: var(--nile-type-scale-3);
+    color: var(--nile-colors-dark-900);
+    gap: var(--nile-spacing-sm, var(--ng-spacing-sm));
   }
 
   .alert__message--title {
-    font-weight: 600;
-    color:var(--nile-colors-dark-900);
+    font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-600));
+    color:var(--nile-colors-dark-900, var(--ng-colors-primary-900));
   }
 
   .alert__message--content {
-    font-weight:400;
-    color:var(--nile-colors-dark-500);
+    font-weight:var(--nile-font-weight-regular, var(--ng-font-weight-400));
+    color:var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
   }
 
   .alert__message--content-only {
-    margin-top: 3px;
   }
 
   .alert__close-button {
@@ -151,14 +149,14 @@ export const styles = css`
   .alert__tags {
     display: flex;
     flex-wrap: wrap;
-    gap: 10px;
-    margin-top: 4px;
+    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    margin-top: var(--nile-spacing-xs, var(--ng-spacing-xs));
   }
 
   .alert__tag {
     height: 24px;
     display: flex;
-    border-radius: 4px;
+    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));
     border: 1px solid var(--nile-colors-neutral-400);
     background: var(--nile-colors-white-base);
   }
@@ -168,26 +166,26 @@ export const styles = css`
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 0 6px;
+    padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-sm, var(--ng-spacing-sm));
 
-    color: var(--nile-colors-dark-900);
-    font-family:  var(--nile-font-family-serif);
-    font-size: 14px;
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
+    font-family:  var(--nile-font-family-serif, var(--ng-font-family-display));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
     font-style: normal;
-    font-weight: 400;
-    line-height: 20px;
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-600));
+    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));
     letter-spacing: 0.2px;
   }
 
   .alert__tag-image {
     height: 24px;
     width: 24px;
-    border-radius: 4px 0 0 4px;
+    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs)) var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-xs, var(--ng-radius-xs));
   }
 
   .alert__prefix-img {
     height: 24px;
-    border-radius: 4px;
+    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));
   }
 
   .alert--no-content{

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

@@ -209,15 +209,15 @@ export class NileToast extends NileElement {
   getIconColorByVariant() {
     switch (this.variant) {
       case 'success':
-        return 'var(--nile-toast-color-icon-color-success)';
+        return 'var(--nile-toast-color-icon-color-success, var(--ng-colors-fg-success-primary))';
       case 'info':
-        return 'var(--nile-toast-color-icon-color-info)';
+        return 'var(--nile-toast-color-icon-color-info, var(--ng-colors-fg-brand-primary-600))';
       case 'warning':
-        return 'var(--nile-toast-color-icon-color-warning)';
+        return 'var(--nile-toast-color-icon-color-warning, var(--ng-colors-fg-warning-primary))';
       case 'error':
-        return 'var(--nile-toast-color-icon-color-error)';
+        return 'var(--nile-toast-color-icon-color-error, var(--ng-colors-fg-error-primary))';
       case 'gray':
-        return 'var(--nile-toast-color-icon-color-gray)';
+        return 'var(--nile-toast-color-icon-color-gray, var(--ng-colors-fg-tertiary-600))';
       case 'black':
         return 'var(--nile-toast-color-icon-color-black)';
     }
@@ -371,7 +371,7 @@ export class NileToast extends NileElement {
                 name="${this.closeIconName}"
                 label="close"
                 size="20"
-                color="var(--nile-colors-neutral-700)"
+                color="var(--nile-colors-neutral-700,var(--ng-colors-fg-quaternary-400))"
                 @click=${this.handleCloseClick}
               ></nile-icon-button>
             `

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

@@ -23,12 +23,12 @@ export const styles = css`
     padding: 0 48px;
     box-sizing: border-box;
     min-height: 64px;
-    line-height: var(--nile-toolbar-line-height);
-    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, var(--nile-colors-white-base));
-    color: var(--nile-toolbar-text-color, rgba(0, 0, 0, 0.87));
+    line-height: var(--nile-toolbar-line-height, var(--ng-line-height-text-xl));
+    font-weight: var(--nile-toolbar-font-weight, var(--ng-font-weight-500));
+    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
+    font-size: var(--nile-toolbar-font-size, var(--ng-font-size-text-xl));
+    background-color: var(--nile-toolbar-background-color, var(--ng-colors-text-primary-on-brand));
+    color: var(--nile-toolbar-text-color, var(--ng-color-base-black));
   }
 `;
 

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

@@ -15,13 +15,13 @@ export const styles = css`
     --max-width: 20rem;
     --hide-delay: 0ms;
     --show-delay: 150ms;
-
+    
     display: contents;
   }
 
   .tooltip {
-    --arrow-size: 6px;
-    --arrow-color: var(--nile-tooltip-color-background);
+    --arrow-size: 5px;
+    --arrow-color: var(--nile-tooltip-color-background, var(--ng-colors-bg-primary-solid));
   }
 
   .tooltip::part(popup) {
@@ -49,15 +49,17 @@ export const styles = css`
     display: block;
     width: max-content;
     max-width: var(--max-width);
-    border-radius: 4px;
-    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: var(--nile-colors-white-base);
+    border-radius: var(--nile-radius-sm, var(--ng-radius-md));
+    background-color: var(--nile-tooltip-color-background, var(--ng-colors-bg-primary-solid));
+    font-size: var(--nile-tooltip-font-size-sm, var(--ng-font-size-text-xs));
+    font-weight: var(--nile-tooltip-font-weight-sm, var(--ng-font-weight-600));
+    line-height: var(--nile-tooltip-line-height-sm, var(--ng-line-height-text-xs));
+    padding: var(--nile-tooltip-padding-y, var(--ng-spacing-md)) var(--nile-tooltip-padding-x, var(--ng-spacing-md));
+    color: var(--nile-colors-white-base, var(--ng-colors-text-white));
     pointer-events: none;
     word-break: break-word;
+    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
+    box-shadow:var(--nile-box-shadow-none, var(--ng-shadow-lg));
   }
 
   .tooltip__body--large {
@@ -67,4 +69,4 @@ export const styles = css`
   }
 `;
 
-export default [styles];
+export default [styles];

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

@@ -321,4 +321,4 @@ declare global {
   interface HTMLElementTagNameMap {
     'nile-tooltip': NileTooltip;
   }
-}
+}

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

@@ -34,7 +34,7 @@ export const styles = css`
     --indent-guide-offset: 0;
     --indent-guide-style: solid;
     --indent-guide-width: 0;
-    --indent-size: 1.25rem;
+    --indent-size: var(--nile-spacing-2xl);
 
     display: block;
     isolation: isolate;

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

@@ -36,7 +36,7 @@ export const styles = css`
   }
 
   slot:not([name])::slotted(nile-icon) {
-    margin-inline-end: 0.5rem;
+    margin-inline-end: var(--nile-spacing-md);
   }
 
   .tree-item {
@@ -57,8 +57,8 @@ export const styles = css`
   .tree-item__checkbox,
   .tree-item__label {
     font-family: var(--nile-font-family-serif);
-    font-size: 16px;
-    font-weight: 400;
+    font-size: var(--nile-type-scale-4);
+    font-weight: var(--nile-font-weight-regular);
   }
 
   .tree-item__checkbox::part(base) {
@@ -78,7 +78,7 @@ export const styles = css`
     justify-content: center;
     box-sizing: content-box;
     color: var(--nile-colors-neutral-500);
-    padding: 0.5rem;
+    padding: var(--nile-spacing-md);
     width: 1rem;
     height: 1rem;
     flex-shrink: 0;

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

@@ -26,29 +26,29 @@ export const styles = css`
 	}
 
 	.stepper__item--sm {
-		--item-spacing: var(--nile-spacing-spacing-md);
-		--stepper-item-title-size:12px;
-		--stepper-item-subtitle-size:10.24px;
-		--stepper-item-text-line-height:16px;
+		--item-spacing: var(--nile-spacing-md, var(--ng-spacing-md));
+		--stepper-item-title-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
+		--stepper-item-subtitle-size: var(--nile-type-scale-1,var(--ng-font-size-text-sm));
+		--stepper-item-text-line-height:var(--nile-line-height-xsmall,var(--ng-line-height-text-sm));
 		--circle-height:18px;
 	}
 
 	.stepper__item--lg {
-		--item-spacing: var(--nile-spacing-spacing-md);
-		--stepper-item-title-size:14px;
-		--stepper-item-subtitle-size:12px;
-		--stepper-item-text-line-height:18px;
-		--circle-height:22px;
+		--item-spacing: var(--nile-spacing-md, var(--ng-spacing-md));
+		--stepper-item-title-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
+		--stepper-item-subtitle-size: var(--nile-type-scale-2, var(--ng-font-size-text-md));
+		--stepper-item-text-line-height:var(--nile-line-height-small, var(--ng-line-height-text-md));
+		--circle-height: 22px;
 	}
 
 	.stepper__item--xl {
-		--item-spacing: var(--nile-spacing-spacing-lg);
-		--stepper-item-title-size:16px;
-		--stepper-item-subtitle-size:14px;
-		--stepper-item-text-line-height:24px;
+		--item-spacing: var(--nile-type-scale-2, var(--ng-spacing-2xl));
+		--stepper-item-title-size: var( --nile-type-scale-4, var(--ng-font-size-text-md));
+		--stepper-item-subtitle-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
+		--stepper-item-text-line-height:var(--nile-line-height-medium, var(--ng-line-height-text-lg));
 		--circle-height:26px;
 	}
-	
+
 	.stepper-item__connector-content{
 		display: flex;
 		flex-direction: column;
@@ -57,24 +57,32 @@ export const styles = css`
 	.stepper__item__bulletin {
 		display:grid;
 		place-content:center;
+		
+		margin-top: var(--nile-spacing-one-half-x, var(--ng-spacing-none));
+		margin-bottom: var(--nile-spacing-one-half-x, var(--ng-spacing-none));
 	}
 
-	.stepper__item__bulletin {
-		margin-top:3px;
-		margin-bottom:3px;
+	.stepper__item--selected .stepper-item__connector-content{
+		margin-left: var(--nile-spacing-none, calc( var(--ng-spacing-xxs) * -1 ))
+	}
+
+	.stepper__item--selected .stepper__item__bulletin{
+		padding: 1px;
+		border: 1px solid var(--ng-colors-effects-focus-ring);
+		border-radius: 50%;
 	}
 
 	.stepper__bulletin--dot {
 		width: var(--circle-height);
 		aspect-ratio: 1 / 1;
 		border-radius: 50%;
-		background: radial-gradient(var(--nile-colors-neutral-500) var(--bulletin--dot--seperation), var(--nile-colors-dark-200) var(--bulletin--dot--seperation));
-		border: var(--lines-thickness) solid var(--nile-colors-neutral-500);
+		background: radial-gradient(var(--nile-colors-neutral-500, var(--ng-colors-border-secondary)) var(--bulletin--dot--seperation), var(--nile-colors-dark-200, var(--ng-colors-bg-primary)) var(--bulletin--dot--seperation));
+		border: var(--lines-thickness) solid var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));
 	}
 
 	.stepper__bulletin__dot--active{
-		background: radial-gradient(var(--nile-colors-white-base) var(--bulletin--dot--seperation), var(--nile-colors-primary-600) var(--bulletin--dot--seperation));
-		border: var(--lines-thickness) solid var(--nile-colors-primary-500);
+		background: radial-gradient(var(--nile-colors-white-base, var(--ng-colors-bg-primary)) var(--bulletin--dot--seperation), var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid)) var(--bulletin--dot--seperation));
+		border: var(--lines-thickness) solid var(--nile-colors-primary-500,var(--ng-colors-bg-brand-solid));
 		width: calc( var(--circle-height) + calc( var(--lines-thickness) * 2 ) );
 	}
 
@@ -82,15 +90,15 @@ export const styles = css`
 		display:grid;
 		place-content:center;
 		width: var(--circle-height);
-		border: var(--lines-thickness) solid var(--nile-colors-primary-600);
+		border: var(--lines-thickness) solid var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));
 		aspect-ratio: 1 / 1;
 		border-radius: 50%;
-		background-color:var(--nile-colors-primary-600);
+		background-color:var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));
 		overflow:hidden;
 	}
 	
 	.stepper__bulletin__icon--active {
-		border: var(--lines-thickness) solid var(--nile-colors-primary-500);
+		border: var(--lines-thickness) solid var(--nile-colors-primary-500,var(--ng-colors-border-brand));
 		width: calc(var(--circle-height) + calc( var(--lines-thickness) * 2));
 	}
 
@@ -104,10 +112,10 @@ export const styles = css`
 
 	.stepper__item__line{
 		height:100%;
-		border-left: var(--lines-thickness) solid var(--nile-colors-neutral-500);
+		border-left: var(--lines-thickness) solid var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));
 	}
 	.stepper__item__line--active{
-		border-left: var(--lines-thickness) solid var(--nile-colors-primary-600);
+		border-left: var(--lines-thickness) solid var(--nile-colors-primary-600, var(--ng-colors-border-brand-alt));
 	}
 
 	.stepper__item__content{
@@ -116,11 +124,11 @@ export const styles = css`
 		justify-content:start;
 	}
 	.stepper__content__title {
-		color:var(--nile-colors-dark-900);
+		color:var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));
 		font-size: var(--stepper-item-title-size);
 		line-height: var(--stepper-item-text-line-height);
-		font-family: var(--nile-font-family-medium);
-		font-weight: 400;
+		font-family: var(--nile-font-family-medium, var(--ng-font-family-body));
+		font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
 	}
 
 	.stepper__content__title--alone{
@@ -132,21 +140,21 @@ export const styles = css`
 	}
 
 	.stepper__content__title--active{
-		color:var(--nile-colors-primary-600);
-		font-weight: 600;
+		color:var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));
+		font-weight: var(--nile-font-weight-semi-bold,var(--ng-font-weight-semi-bold));
 	}
 
 	.stepper__content__subtitle {
-		color:var(--nile-colors-dark-500);
+		color:var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
 		font-size: var(--stepper-item-subtitle-size);
 		line-height: var(--stepper-item-text-line-height);
-		font-family: var( --nile-font-family-sans-serif);
-		font-weight: 400;
+		font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
+		font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
 	}
 
 	.stepper__content__subtitle--active{
-		color:var(--nile-colors-primary-600);
+		color:var(--nile-colors-primary-600, var(--ng-colors-text-brand-tertiary-600));
 	}
 `;
 
-export default [styles];
+export default [styles];