@aquera/nile-elements 0.0.1-beta.12 → 0.0.1-beta.13

package/package.json

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

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

@@ -20,27 +20,31 @@ export const styles = css`
 
   .button {
     display: inline-flex;
-    align-items: stretch;
+    align-items: center;
     justify-content: center;
-    width: 100%;
     border-style: solid;
     border-width: 1px;
     font-style: normal;
     font-weight: 400;
-    font-size: var(--nile-font-size-base);
-    line-height: var(--nile-font-size-base);
+    font-family: var(--nile-font-family-serif);
+    font-size: 14px;
     text-align: center;
     letter-spacing: 0.2px;
     text-decoration: none;
     user-select: none;
     white-space: nowrap;
     vertical-align: middle;
-    padding: var(--nile-spacing-one-half-x);
     transition: var(--nile-transition-duration-default) background-color,
       var(--nile-transition-duration-default) color,
       var(--nile-transition-duration-default) border,
       var(--nile-transition-duration-default) box-shadow;
     cursor: inherit;
+    padding: 12px;
+    gap: 12px;
+    border-radius: var(--nile-radius-base-standard);
+    line-height: 14px;
+    box-sizing: border-box;
+    height: 38px;
   }
 
   .button::-moz-focus-inner {
@@ -65,38 +69,27 @@ export const styles = css`
     pointer-events: none;
   }
 
-  .button__prefix,
-  .button__suffix {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    pointer-events: none;
-  }
-  .button__label {
-    display: inline-block;
-  }
-
   .button__label::slotted(nile-icon) {
-    vertical-align: -2px;
+    /* vertical-align: -2px; */
   }
 
   .button--standard.button--secondary {
     background-color: var(--nile-colors-neutral-400);
     border-color: var(--nile-colors-neutral-400);
-    color: var(--nile-colors-neutral-700);
+    color: var(--nile-colors-neutral-900);
   }
 
   .button--standard.button--secondary:hover:not(.button--disabled) {
     background-color: var(--nile-colors-neutral-500);
-    border-color: var(--nile-colors-neutral-500);
+    border : none;
     box-shadow: 0px 4px 8px var(--nile-colors-dark-200);
-    color: var(--nile-colors-neutral-700);
+    color: var(--nile-colors-neutral-900);
   }
 
   .button--standard.button--secondary:active:not(.button--disabled) {
     background-color: var(--nile-colors-neutral-500);
     border-color: var(--nile-colors-neutral-700);
-    color: var(--nile-colors-neutral-700);
+    color: var(--nile-colors-neutral-900);
   }
 
   .button--standard.button--secondary.button--disabled {
@@ -135,17 +128,17 @@ export const styles = css`
   }
 
   .button--standard.button--primary.button--disabled {
-    background-color: var(--nile-colors-primary-600);
-    border-color: var(--nile-colors-primary-600);
-    color: var(--nile-colors-neutral-700);
+    background-color: #777d82;
+    border-color: #777d82;
+    color: #fff;
     cursor: not-allowed;
   }
 
   .button--standard.button--primary.button--disabled:hover,
   .button--standard.button--primary.button--disabled:active {
-    background-color: var(--nile-colors-primary-600);
-    border-color: var(--nile-colors-primary-600);
-    color: var(--nile-colors-neutral-700);
+    background-color: #777d82;
+    border-color: #777d82;
+    color: #fff;
     box-shadow: none;
   }
 
@@ -170,8 +163,8 @@ export const styles = css`
     color: var(--nile-colors-neutral-700);
   }
   .button--standard.button--tertiary.button--disabled {
-    background-color: var(--nile-colors-white-base);
-    border-color: var(--nile-colors-neutral-400);
+    border-color: #e5e9eb;
+    background-color: #fff;
     color: var(--nile-colors-neutral-700);
     cursor: not-allowed;
     box-shadow: none;
@@ -179,8 +172,8 @@ export const styles = css`
 
   .button--standard.button--tertiary.button--disabled:hover,
   .button--standard.button--tertiary.button--disabled:active {
-    background-color: var(--nile-colors-white-base);
-    border-color: var(--nile-colors-neutral-400);
+    border-color: #e5e9eb;
+    background-color: #fff;
     color: var(--nile-colors-neutral-700);
     box-shadow: none;
   }
@@ -203,51 +196,6 @@ export const styles = css`
     color: var(--nile-colors-white-base);
   }
 
-  .button--standard.button--tertiary.button--disabled {
-    background-color: var(--nile-colors-neutral-100);
-    border-color: var(--nile-colors-neutral-100);
-    color: var(--nile-colors-neutral-400);
-    cursor: not-allowed;
-    box-shadow: none;
-  }
-
-  .button--standard.button--tertiary.button--disabled:hover,
-  .button--standard.button--tertiary.button--disabled:active {
-    background-color: var(--nile-colors-neutral-100);
-    border-color: var(--nile-colors-neutral-100);
-    color: var(--nile-colors-neutral-400);
-    box-shadow: none;
-  }
-
-  /*
- * Size modifiers
- */
-
-  .button--small {
-    height: auto;
-    min-height: 24px;
-    font-size: 0.875rem;
-    line-height: calc(24px - var(--nile-spacing-one-half-x) * 2);
-    border-radius: var(--nile-radius-base-standard);
-  }
-
-  .button--medium {
-    height: auto;
-    min-height: 38px;
-    font-size: 0.875rem;
-    line-height: calc(38px - var(--nile-spacing-one-half-x) * 2);
-    font-size: var(--nile-font-size-base);
-    border-radius: var(--nile-radius-base-standard);
-  }
-
-  .button--large {
-    height: auto;
-    min-height: 40px;
-    font-size: 1rem;
-    line-height: calc(40px - var(--nile-spacing-one-half-x) * 2);
-    border-radius: 6px;
-  }
-
   /*
  * Pill modifier
  */
@@ -260,10 +208,6 @@ export const styles = css`
     border-radius: 32px;
   }
 
-  .button--pill.button--large {
-    border-radius: 40px;
-  }
-
   /*
  * Circle modifier
  */
@@ -285,12 +229,6 @@ export const styles = css`
     border-radius: 50%;
   }
 
-  .button--circle.button--large {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-  }
-
   .button--circle .button__prefix,
   .button--circle .button__suffix,
   .button--circle .button__caret {
@@ -343,80 +281,4 @@ export const styles = css`
     translate: 50% -50%;
     pointer-events: none;
   }
-
-  .button--rtl ::slotted(nile-badge) {
-    right: auto;
-    left: 0;
-    translate: -50% -50%;
-  }
-
-  /*
- * Button spacing
- */
-
-  .button--has-label.button--small .button__label {
-    padding: 0 var(--nile-spacing-one-half-x);
-  }
-
-  .button--has-label.button--medium .button__label {
-    padding: 0 var(--nile-spacing-2-x);
-  }
-
-  .button--has-label.button--large .button__label {
-    padding: 0 var(--nile-spacing-3-x);
-  }
-
-  .button--has-prefix.button--small {
-    padding-inline-start: var(--nile-spacing-one-half-x);
-  }
-
-  .button--has-prefix.button--small .button__label {
-    padding-inline-start: var(--nile-spacing-one-half-x);
-  }
-
-  .button--has-prefix.button--medium {
-    padding-inline-start: var(--nile-spacing-2-x);
-  }
-
-  .button--has-prefix.button--medium .button__label {
-    padding-inline-start: var(--nile-spacing-2-x);
-  }
-
-  .button--has-prefix.button--large {
-    padding-inline-start: var(--nile-spacing-2-x);
-  }
-
-  .button--has-prefix.button--large .button__label {
-    padding-inline-start: var(--nile-spacing-2-x);
-  }
-
-  .button--has-suffix.button--small,
-  .button--caret.button--small {
-    padding-inline-end: var(--nile-spacing-one-half-x);
-  }
-
-  .button--has-suffix.button--small .button__label,
-  .button--caret.button--small .button__label {
-    padding-inline-end: var(--nile-spacing-one-half-x);
-  }
-
-  .button--has-suffix.button--medium,
-  .button--caret.button--medium {
-    padding-inline-end: var(--nile-spacing-2-x);
-  }
-
-  .button--has-suffix.button--medium .button__label,
-  .button--caret.button--medium .button__label {
-    padding-inline-end: var(--nile-spacing-2-x);
-  }
-
-  .button--has-suffix.button--large,
-  .button--caret.button--large {
-    padding-inline-end: var(--nile-spacing-2-x);
-  }
-
-  .button--has-suffix.button--large .button__label,
-  .button--caret.button--large .button__label {
-    padding-inline-end: var(--nile-spacing-2-x);
-  }
 `;

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

@@ -65,7 +65,7 @@ export class NileButton extends NileElement implements NileFormControl {
   @property({ reflect: true }) variant: 'primary' | 'secondary' | 'tertiary' | 'caution'  = 'primary';
 
   /** The button's size. */
-  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
+  @property({ reflect: true }) size:  'medium' = 'medium';
 
   /** Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior. */
   @property({ type: Boolean, reflect: true }) caret = false;
@@ -290,9 +290,7 @@ export class NileButton extends NileElement implements NileFormControl {
           'button--secondary': this.variant === 'secondary',
           'button--tertiary': this.variant === 'tertiary',
           'button--caution': this.variant === 'caution',
-          'button--small': this.size === 'small',
           'button--medium': this.size === 'medium',
-          'button--large': this.size === 'large',
           'button--caret': this.caret,
           'button--circle': this.circle,
           'button--disabled': this.disabled,

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

@@ -27,11 +27,11 @@ export const styles = css`
   .form-control--has-label .form-control__label {
     display: inline-block;
     color: inherit;
-    margin-bottom: 0.125rem;
+    margin-bottom: 12px;
   }
 
   .form-control--has-label.form-control--small .form-control__label {
-    font-size: 0.875rem;
+    font-size: 14px;
   }
 
   .form-control--has-label.form-control--medium .form-control__label {