@aquera/nile-elements 0.1.35-beta-1.7 → 0.1.35-beta-1.11

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

@@ -22,10 +22,10 @@ export const styles = css`
   /* Label */
   .form-control--has-label .form-control__label {
     display: inline-block;
-    margin-bottom: var(--nile-spacing-lg);
+    margin-bottom: 12px;
     color: var(--nile-textarea-label-color);
     font-family: var(--nile-font-family-serif);
-    font-size: var(--nile-type-scale-3);
+    font-size: 14px;
     font-style: normal;
     font-weight: var(--nile-textarea-label-font-weight);
     line-height: var(--nile-textarea-label-line-height);
@@ -46,23 +46,23 @@ export const styles = css`
   .form-control--has-help-text .form-control__help-text {
     display: block;
     color: var(--nile-colors-dark-500);
-    margin-top: var(--nile-spacing-sm);
+    margin-top: 6px;
   }
 
   /* Error message */
   .form-control__error-message {
     display: block;
     color: var(--nile-colors-red-700);
-    margin-top: var(--nile-spacing-lg);
-    font-size: var(--nile-type-scale-2);
+    margin-top: 12px;
+    font-size: 12px;
     font-style: normal;
-    font-weight: var(--nile-font-weight-regular);
-    line-height: var(--nile-line-height-xsmall);
+    font-weight: 400;
+    line-height: 12px;
     letter-spacing: 0.2px;
   }
 
   .form-control--has-help-text.form-control--medium .form-control__help-text {
-    font-size: var(--nile-type-scale-1);
+    font-size: 10.24px;
   }
 
   /* Host styles */
@@ -78,7 +78,7 @@ export const styles = css`
     width: 100%;
     letter-spacing: 0.5px;
     vertical-align: middle;
-    border-radius: var(--nile-radius-sm);
+    border-radius: var(--nile-radius-base-standard);
     transition: 0.3s color, 0.3s border, 0.3s box-shadow, 0.3s background-color;
     cursor: text;
     min-height: 12px;
@@ -94,12 +94,12 @@ export const styles = css`
   .textarea--standard:hover:not(.textarea--disabled) {
     background-color: var(--nile-colors-white-base);
     border-color: var(--nile-textarea-standard-hover-border-color);
-    border-radius: var(--nile-radius-sm);
+    border-radius: var(--nile-radius-base-standard);
   }
 
   .textarea--standard:hover:not(.textarea--disabled) .textarea__control {
     border-color: var(--nile-colors-dark-900);
-    border-radius: var(--nile-radius-sm);
+    border-radius: var(--nile-radius-base-standard);
   }
 
   .textarea--standard.textarea--focused:not(.textarea--disabled) {
@@ -132,11 +132,11 @@ export const styles = css`
   /* Textarea control styles */
   .textarea__control {
     flex: 1 1 auto;
-    font-family: var(--nile-font-family-serif);
-    font-size: var(--nile-type-scale-3);
+    font-family: Colfax-regular;
+    font-size: 14px;
     font-style: normal;
-    font-weight: var(--nile-font-weight-regular);
-    line-height: var(--nile-line-height-xsmall); /* 100% */
+    font-weight: 400;
+    line-height: 14px; /* 100% */
     letter-spacing: 0.2px;
     color: var(--nile-colors-dark-900);
     border: none;
@@ -207,31 +207,31 @@ export const styles = css`
   }
 
   .input__non-printable {
-    border-radius: var(--nile-radius-sm);
+    border-radius: 4px;
     max-width: 400px;
     background-color: var(--nile-colors-white-base);
     border: 1px solid var(--nile-colors-red-500);
     color: var(--nile-colors-red-500);
-    padding: var(--nile-spacing-lg);
-    font-size: var(--nile-type-scale-2);
+    padding: 10px;
+    font-size: 12px;
     max-height: 300px;
     overflow-y: scroll;
-    line-height: var(--nile-line-height-xsmall);
+    line-height: 16px;
   }
 
   .input__remove-non-printable {
     color: var(--nile-colors-red-500);
-    margin-left: var(--nile-spacing-lg);
-    font-size: var(--nile-type-scale-3);
+    margin-left: 10px;
+    font-size: 14px;
     color: var(--nile-colors-dark-900);
     cursor: pointer;
   }
 
   .input__srtiked-text-container {
-    margin-top: var(--nile-spacing-xs);
+    margin-top: 4px;
     color: var(--nile-colors-dark-900);
     word-wrap: break-all;
-    line-height: var(--nile-line-height-xsmall);
+    line-height: 16px;
   }
 
   .input__srtiked-text {

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: var(--nile-spacing-none);
+    margin: 0;
   }
 
   .alert {
@@ -25,10 +25,10 @@ export const styles = css`
     display: flex;
     align-items: flex-start;
     border: solid 2px 2px;
-    border-radius: var(--nile-radius-md);
+    border-radius: 8px;
     margin: inherit;
-    padding: var(--nile-spacing-xl);
-    gap: var(--nile-spacing-xl);
+    padding: 16px;
+    gap: 16px;
     width: max-content;
     min-width: 400px;
   }
@@ -39,8 +39,8 @@ export const styles = css`
   }
 
   .alert__prefix-icon-container {
-    background-color: var(--nile-colors-red-500);
-    border-radius: var(--nile-radius-sm);
+    background-color: red;
+    border-radius: 4px;
     box-sizing: border-box;
     display: flex;
     justify-content: center;
@@ -51,7 +51,7 @@ export const styles = css`
     flex: 0 0 auto;
     display: flex;
     align-items: center;
-    font-size: var(--nile-type-scale-1);
+    font-size: 10px;
   }
 
   .alert--success {
@@ -122,22 +122,24 @@ export const styles = css`
     flex-direction: column;
     align-items: flex-start;
     font-family: var(--nile-font-family-serif);
-    font-size: var(--nile-type-scale-3);
-    color: var(--nile-colors-dark-900);
-    gap: var(--nile-spacing-sm);
+    font-size: 14px;
+    line-height: 20px;
+    color: black;
+    gap:3px;
   }
 
   .alert__message--title {
-    font-weight: var(--nile-font-weight-semi-bold);
+    font-weight: 600;
     color:var(--nile-colors-dark-900);
   }
 
   .alert__message--content {
-    font-weight:var(--nile-font-weight-regular);
+    font-weight:400;
     color:var(--nile-colors-dark-500);
   }
 
   .alert__message--content-only {
+    margin-top: 3px;
   }
 
   .alert__close-button {
@@ -149,14 +151,14 @@ export const styles = css`
   .alert__tags {
     display: flex;
     flex-wrap: wrap;
-    gap: var(--nile-spacing-lg);
-    margin-top: var(--nile-spacing-xs);
+    gap: 10px;
+    margin-top: 4px;
   }
 
   .alert__tag {
     height: 24px;
     display: flex;
-    border-radius: var(--nile-radius-sm);
+    border-radius: 4px;
     border: 1px solid var(--nile-colors-neutral-400);
     background: var(--nile-colors-white-base);
   }
@@ -166,26 +168,26 @@ export const styles = css`
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: var(--nile-spacing-none) var(--nile-spacing-sm);
+    padding: 0 6px;
 
     color: var(--nile-colors-dark-900);
     font-family:  var(--nile-font-family-serif);
-    font-size: var(--nile-type-scale-3);
+    font-size: 14px;
     font-style: normal;
-    font-weight: var(--nile-font-weight-regular);
-    line-height: var(--nile-line-height-xsmall);
+    font-weight: 400;
+    line-height: 20px;
     letter-spacing: 0.2px;
   }
 
   .alert__tag-image {
     height: 24px;
     width: 24px;
-    border-radius: var(--nile-radius-radius-xs) var(--nile-radius-radius-none) var(--nile-radius-radius-none) var(--nile-radius-radius-xs);
+    border-radius: 4px 0 0 4px;
   }
 
   .alert__prefix-img {
     height: 24px;
-    border-radius: var(--nile-radius-sm);
+    border-radius: 4px;
   }
 
   .alert--no-content{

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

@@ -20,12 +20,12 @@ export const styles = css`
     .tooltip {
       position: fixed;
       z-index: 1000;
-      background-color: var(--nile-tooltip-color-background);
-      color: var(--nile-colors-white-base);
-      padding: var(--nile-spacing-lg);
-      border-radius: var(--nile-radius-sm);
-      font-size: var(--nile-tooltip-font-size-sm);
-      line-height: var(--nile-tooltip-line-height-sm);
+      background-color: var(--nile-tooltip-color-background, #333);
+      color: var(--nile-colors-white-base, #fff);
+      padding: 6px 10px;
+      border-radius: 4px;
+      font-size: var(--nile-tooltip-font-size-sm, 14px);
+      line-height: var(--nile-tooltip-line-height-sm, 1.5);
       opacity: 0;
       transition: opacity 0.2s, transform 0.2s;
       pointer-events: none;

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: var(--nile-spacing-2xl);
+    --indent-size: 1.25rem;
 
     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: var(--nile-spacing-md);
+    margin-inline-end: 0.5rem;
   }
 
   .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: var(--nile-type-scale-4);
-    font-weight: var(--nile-font-weight-regular);
+    font-size: 16px;
+    font-weight: 400;
   }
 
   .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: var(--nile-spacing-md);
+    padding: 0.5rem;
     width: 1rem;
     height: 1rem;
     flex-shrink: 0;

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

@@ -27,24 +27,24 @@ export const styles = css`
 
 	.stepper__item--sm {
 		--item-spacing: var(--nile-spacing-spacing-md);
-		--stepper-item-title-size: var(--nile-type-scale-2);
-		--stepper-item-subtitle-size: var(--nile-type-scale-1);
+		--stepper-item-title-size:12px;
+		--stepper-item-subtitle-size:10.24px;
 		--stepper-item-text-line-height:16px;
 		--circle-height:18px;
 	}
 
 	.stepper__item--lg {
 		--item-spacing: var(--nile-spacing-spacing-md);
-		--stepper-item-title-size: var(--nile-type-scale-3);
-		--stepper-item-subtitle-size: var(--nile-type-scale-2);
+		--stepper-item-title-size:14px;
+		--stepper-item-subtitle-size:12px;
 		--stepper-item-text-line-height:18px;
 		--circle-height:22px;
 	}
 
 	.stepper__item--xl {
 		--item-spacing: var(--nile-spacing-spacing-lg);
-		--stepper-item-title-size: var(--nile-type-scale-4);
-		--stepper-item-subtitle-size: var(--nile-type-scale-3);
+		--stepper-item-title-size:16px;
+		--stepper-item-subtitle-size:14px;
 		--stepper-item-text-line-height:24px;
 		--circle-height:26px;
 	}
@@ -120,7 +120,7 @@ export const styles = css`
 		font-size: var(--stepper-item-title-size);
 		line-height: var(--stepper-item-text-line-height);
 		font-family: var(--nile-font-family-medium);
-		font-weight: var(--nile-font-weight-regular);
+		font-weight: 400;
 	}
 
 	.stepper__content__title--alone{
@@ -133,7 +133,7 @@ export const styles = css`
 
 	.stepper__content__title--active{
 		color:var(--nile-colors-primary-600);
-		font-weight: var(--nile-font-weight-semi-bold);
+		font-weight: 600;
 	}
 
 	.stepper__content__subtitle {
@@ -141,7 +141,7 @@ export const styles = css`
 		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: var(--nile-font-weight-regular);
+		font-weight: 400;
 	}
 
 	.stepper__content__subtitle--active{
@@ -149,4 +149,4 @@ export const styles = css`
 	}
 `;
 
-export default [styles];
+export default [styles];

package/vscode-html-custom-data.json

@@ -1407,7 +1407,7 @@
     },
     {
       "name": "nile-filter-chip",
-      "description": "Nile filter-chip component.\n\nEvents:\n\n  * `nile-close` {`CustomEvent<{ text: string; extraCount: number; }>`} - \n\n  * `nile-click` {`CustomEvent<{ text: string; extraCount: number; }>`} - \n\nAttributes:\n\n  * `label` {`string`} - \n\n  * `text` {`string`} - \n\n  * `extraCount` {`number`} - \n\n  * `editable` {`boolean`} - \n\n  * `closable` {`boolean`} - \n\n  * `icon` {`string`} - \n\n  * `removeIcon` {`string`} - \n\nProperties:\n\n  * `label` {`string`} - \n\n  * `text` {`string`} - \n\n  * `extraCount` {`number`} - \n\n  * `editable` {`boolean`} - \n\n  * `closable` {`boolean`} - \n\n  * `icon` {`string`} - \n\n  * `removeIcon` {`string`} - \n\n  * `activeChips` {`NileFilterChip[]`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile filter-chip component.\n\nEvents:\n\n  * `nile-close` {`CustomEvent<{ text: string; viewMoreCount: number; }>`} - \n\n  * `nile-click` {`CustomEvent<{ text: string; viewMoreCount: number; }>`} - \n\nAttributes:\n\n  * `label` {`string`} - \n\n  * `text` {`string`} - \n\n  * `viewMoreCount` {`number`} - \n\n  * `editable` {`boolean`} - \n\n  * `closable` {`boolean`} - \n\n  * `icon` {`string`} - \n\n  * `removeIcon` {`string`} - \n\n  * `active` {`boolean`} - \n\nProperties:\n\n  * `label` {`string`} - \n\n  * `text` {`string`} - \n\n  * `viewMoreCount` {`number`} - \n\n  * `editable` {`boolean`} - \n\n  * `closable` {`boolean`} - \n\n  * `icon` {`string`} - \n\n  * `removeIcon` {`string`} - \n\n  * `active` {`boolean`} - \n\n  * `activeChips` {`NileFilterChip[]`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "label",
@@ -1418,8 +1418,8 @@
           "description": "`text` {`string`} - \n\nProperty: text\n\nDefault: "
         },
         {
-          "name": "extraCount",
-          "description": "`extraCount` {`number`} - \n\nProperty: extraCount\n\nDefault: 0"
+          "name": "viewMoreCount",
+          "description": "`viewMoreCount` {`number`} - \n\nProperty: viewMoreCount\n\nDefault: 0"
         },
         {
           "name": "editable",
@@ -1439,13 +1439,18 @@
           "name": "removeIcon",
           "description": "`removeIcon` {`string`} - \n\nProperty: removeIcon\n\nDefault: "
         },
+        {
+          "name": "active",
+          "description": "`active` {`boolean`} - \n\nProperty: active\n\nDefault: false",
+          "valueSet": "v"
+        },
         {
           "name": "onnile-close",
-          "description": "`nile-close` {`CustomEvent<{ text: string; extraCount: number; }>`} - "
+          "description": "`nile-close` {`CustomEvent<{ text: string; viewMoreCount: number; }>`} - "
         },
         {
           "name": "onnile-click",
-          "description": "`nile-click` {`CustomEvent<{ text: string; extraCount: number; }>`} - "
+          "description": "`nile-click` {`CustomEvent<{ text: string; viewMoreCount: number; }>`} - "
         }
       ]
     },