@aquera/nile-elements 0.1.44-beta-1.3 → 0.1.44-beta-1.5

package/package.json

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

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

@@ -50,7 +50,7 @@ export const styles = css`
   .accordian--md{
     --accordian-text-size:var(--nile-type-scale-3 , var(--ng-font-size-text-sm));
     --accordian-heading-padding: var(--nile-spacing-lg , var(--ng-spacing-lg)) var(--nile-spacing-lg , var(--ng-spacing-lg));
-    --accordian-content-padding: var(--nile-spacing-sm , var(--ng-spacing-sm)) var(--nile-spacing-lg , var(--ng-spacing-lg)) var(--nile-spacing-xl , var(--ng-spacing-3xl));
+    --accordian-content-padding: var(--nile-spacing-sm , var(--ng-spacing-sm)) var(--nile-spacing-lg , var(--ng-spacing-lg)) var(--nile-type-scale-5 , var(--ng-spacing-3xl));
     --accordion-font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
   }
 

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

@@ -32,10 +32,8 @@ export const styles = css`
     font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
     font-style: normal;
     font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
-    line-height: var(--nile-line-height-small, var(--ng-font-size-text-xs));
+    line-height: var(--nile-type-scale-5, var(--ng-font-size-text-xs));
     letter-spacing: 0.2px;
-    display: flex;
-    align-items: center;
   }
 
   .badge--primary {

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

@@ -44,8 +44,8 @@ export const styles = css`
     font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-600));
     border-radius: var(--nile-radius-base-standard, var(--ng-radius-md));
     padding: var(--nile-spacing-10px, var(--ng-spacing-md-alt)) var(--nile-spacing-14px, var(--ng-spacing-lg));
-    gap: var(--nile-spacing-sm, var(--ng-spacing-xs));
-    line-height: var(--nile-line-height-small);
+    gap: var(--nile-spacing-5px, var(--ng-spacing-xs));
+    line-height: var(--nile-type-scale-6, var(--ng-spacing-5));
     box-sizing: border-box;
     height: var(--nile-height-40px, var(--ng-height-40px));
   }

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

@@ -168,7 +168,7 @@ export const styles = css`
 
   .checkbox__label {
     display: inline-block;
-    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));
+    line-height: var(--nile-type-scale-3, var(--ng-line-height-text-sm));
     font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
     margin-inline-start: 0.5em;
     user-select: none;

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

@@ -103,7 +103,7 @@ export const styles = css`
 
   .form-control--has-help-text.form-control--radio-group
     .form-control__help-text {
-    margin-top: var(--nile-spacing-xs);
+    margin-top: var(--nile-spacing-xxxsmall);
   }
 
   .input {
@@ -137,20 +137,6 @@ export const styles = css`
     outline:var(--nile-outline-none, var(--ng-private-outline-transparent));
   }
 
-  .input--standard:hover:not(.input--disabled):not(.input--error) {
-    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
-    border: 1px solid var(--nile-colors-dark-900,var(--ng-colors-border-brand));
-    outline: var(--nile-outline-none,var(--ng-nxt-gen-outline));
-  }
-
-  :host([no-outline]) .input--standard:hover {
-    outline: var(--nile-outline-none, var(--ng-outline-none));
-  }
-
-  :host([no-padding]) .input--medium .input__control {
-    padding: 0px !important;
-  }
-
   .input--standard.input--error:hover:not(.input--disabled) {
     border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));
     outline: var(--nile-outline-none, var(--ng-colors-border-error));
@@ -367,7 +353,7 @@ export const styles = css`
 
   .input--small .input__control {
     height: calc(1.875rem);
-    padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-10px, var(--ng-spacing-lg));
+    padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-xsmall, var(--ng-spacing-lg));
   }
 
   .input--small .input__clear {
@@ -379,11 +365,11 @@ export const styles = css`
   }
 
   .input--small .input__prefix::slotted(*) {
-    margin-inline-start: var(--nile-spacing-lg);
+    margin-inline-start: var(--nile-spacing-xsmall, var(--ng-spacing-lg));
   }
 
   .input--small .input__suffix::slotted(*) {
-    margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    margin-inline-end: var(--nile-spacing-xsmall, var(--ng-spacing-lg));
   }
 
   .input--medium {
@@ -433,11 +419,11 @@ export const styles = css`
   }
 
   .input--large .input__prefix::slotted(*) {
-    margin-inline-start: var(--nile-spacing-xl);
+    margin-inline-start: var(--nile-spacing-small, var(--ng-spacing-lg));
   }
 
   .input--large .input__suffix::slotted(*) {
-    margin-inline-end: var(--nile-spacing-xl);
+    margin-inline-end: var(--nile-spacing-small, var(--ng-spacing-lg));
   }
 
   /*
@@ -445,15 +431,15 @@ export const styles = css`
    */
 
   .input--pill.input--small {
-    border-radius:var(--nile-radius-3xl);
+    border-radius:var(--nile-radius-3xl, var(--ng-spacing-lg));
   }
 
   .input--pill.input--medium {
-    border-radius: var(--nile-radius-4xl);
+    border-radius: var(--nile-radius-4xl, var(--ng-spacing-lg));
   }
 
   .input--pill.input--large {
-    border-radius: var(--nile-radius-4xl);
+    border-radius: var(--nile-radius-4xl, var(--ng-spacing-lg));
   }
 
   /*
@@ -525,7 +511,7 @@ export const styles = css`
   }
 
   :host([no-outline]) .input--standard {
-    outline:var(--ng-outline-none);
+    outline: var(--nile-outline-unset, var(--ng-outline-none));
   }
 
   :host([no-border]) .input--standard:hover:not(.input--disabled) {
@@ -563,7 +549,7 @@ export const styles = css`
 
   .input__remove-non-printable {
     color: var(--nile-colors-red-500);
-    margin-left: var(--nile-spacing-md);
+    margin-left: var(--nile-spacing-10px);
     font-size: var(--nile-type-scale-3);
     color: var(--nile-colors-dark-900);
     cursor: pointer;

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

@@ -45,7 +45,7 @@ export const styles = css`
 
   .option--hover:not(.option--current):not(.option--disabled),  :host([aria-selected='true']) .option {
     background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+    color: var(--nile-colors-primary-600, var(--ng-colors-text-primary-900));
     border-radius: var(--nile-radius-none, var(--ng-radius-sm));
   }
 

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

@@ -49,7 +49,7 @@ export const styles = css`
     font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
     font-style: normal;
     font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-500));
-    line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));
+    line-height: var(--nile-spacing-2xl, var(--ng-line-height-text-sm));
     letter-spacing: 0.2px;
   }
 
@@ -360,7 +360,7 @@ export const styles = css`
     align-items: center;
     transition: 250ms rotate ease;
     rotate: 0;
-    margin-inline-start: var(--nile-spacing-3px, var(--ng-spacing-md));
+    margin-inline-start: var(--nile-spacing-xxxsmall, var(--ng-spacing-md));
   }
 
   .select--open .select__expand-icon {

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

@@ -43,7 +43,7 @@ export const styles = css`
     font-size: var(--nile-type-scale-3 , var(--ng-font-size-text-sm));
     height: var(--nile-height-26px , var(--ng-height-auto));
     border: var(--nile-border-size-2, var(--ng-border-width-1)) solid var(--nile-colors-neutral-400 , var(--ng-colors-border-primary));
-    padding: var(--nile-spacing-none , var(--ng-spacing-xs)) var(--nile-spacing-10px , var(--ng-spacing-md));
+    padding: var(--nile-spacing-none , var(--ng-spacing-xs)) var(--nile-spacing-xsmall , var(--ng-spacing-md));
   }
 
   .tag--primary {