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

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

@@ -4,9 +4,9 @@
  * This source code is licensed under the BSD-3-Clause license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
+ 
 import { css } from 'lit';
-
+ 
 /**
  * Checkbox CSS
  */
@@ -14,50 +14,43 @@ export const styles = css`
   :host {
     display: inline-block;
   }
-
+ 
   :host(.full-width) {
     width: 100%;
   }
-
+ 
   .checkbox {
     position: relative;
     display: inline-flex;
     align-items: top;
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-500));
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));
+    font-weight: 400;
+    color: var(--nile-colors-dark-900);
     vertical-align: middle;
     cursor: pointer;
   }
-
+ 
   .checkbox--medium {
-    --toggle-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    --toggle-size: var(--nile-type-scale-3);
+    font-size: var(--nile-type-scale-3);
   }
-
+ 
   .checkbox__control {
     flex: 0 0 auto;
     position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: var(--nile-type-scale-3, var(--ng-width-4));
-    height: var(--nile-type-scale-3, var(--ng-height-16px));
-    border: solid 1px
-      var(
-        --nile-checkbox-color-border-standard,
-        var(--ng-colors-border-primary)
-      );
-    background-color: var(
-      --nile-checkbox-color-background-standard,
-      var(--ng-colors-bg-primary)
-    );
-    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
+    width: var(--nile-type-scale-3);
+    height: var(--nile-type-scale-3);
+    border: solid 1px var(--nile-checkbox-color-border-standard);
+    background-color: var(--nile-checkbox-color-background-standard);
+    border-radius: 4px;
     transition: var(--nile-transition-duration-default border-color),
       var(--nile-transition-duration-default) background-color,
       var(--nile-transition-duration-default) color,
       var(--nile-transition-duration-default box-shadow);
   }
-
+ 
   .checkbox__input {
     position: absolute;
     opacity: 0;
@@ -65,32 +58,19 @@ export const styles = css`
     margin: 0;
     pointer-events: none;
   }
-
+ 
   /* svg {
       display:none !important;
   } */
-
+ 
   /* Hover */
-  .checkbox:not(.checkbox--checked):not(.checkbox--disabled):not(
-      .checkbox--indeterminate
-    )
+  .checkbox:not(.checkbox--checked):not(.checkbox--disabled)
     .checkbox__control:hover {
-    background: var(
-      --nile-checkbox-color-background-hover,
-      var(--ng-colors-bg-primary)
-    );
-    border: 1px solid
-      var(--nile-checkbox-color-border-hover, var(--ng-colors-border-primary));
-    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));
-    box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring));
-  }
-
-  /* Disabled */
-  .checkbox--disabled {
-    opacity: var(--nile-opacity-30, var(--ng-opacity-100));
-    cursor: not-allowed;
+    background: var(--nile-checkbox-color-background-hover);
+    border: 1px solid var(--nile-checkbox-color-border-hover);
+    border-radius: 4px;
   }
-
+ 
   /* Focus */
   .checkbox:not(.checkbox--checked):not(.checkbox--disabled)
     .checkbox__input:focus-visible
@@ -98,37 +78,22 @@ export const styles = css`
     outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);
     outline-offset: 1px;
   }
-
+ 
   /* Checked/indeterminate */
   .checkbox--checked .checkbox__control,
   .checkbox--indeterminate .checkbox__control {
-    border-color: var(
-      --nile-checkbox-color-border-checked-standard,
-      var(--ng-colors-bg-brand-solid)
-    );
-    background-color: var(
-      --nile-checkbox-color-background-checked-standard,
-      var(--ng-colors-bg-brand-solid)
-    );
-  }
-
+    border-color: var(--nile-checkbox-color-border-checked-standard);
+    background-color: var(--nile-checkbox-color-background-checked-standard);
+  }
+ 
   /* Checked/indeterminate + hover */
   .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,
   .checkbox.checkbox--indeterminate:not(.checkbox--disabled)
     .checkbox__control:hover {
-    background: var(
-      --nile-checkbox-color-background-checked-hover,
-      var(--ng-colors-bg-brand-solid)
-    );
-    /* border: 1px solid var(--nile-checkbox-color-border-checked-hover),
-      var(--ng-colors-border-border-disabled); */
-    box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring));
-  }
-
-  /* .checkbox.checkbox--indeterminate .checkbox_control:hover {
-    border: none;
-  } */
-
+    background: var(--nile-checkbox-color-background-checked-hover);
+    border: 1px solid var(--nile-checkbox-color-border-checked-hover);
+  }
+ 
   /* Checked/indeterminate + focus */
   .checkbox.checkbox--checked:not(.checkbox--disabled)
     .checkbox__input:focus-visible
@@ -136,61 +101,49 @@ export const styles = css`
   .checkbox.checkbox--indeterminate:not(.checkbox--disabled)
     .checkbox__input:focus-visible
     ~ .checkbox__control {
-    outline: solid 3px var(--ng-nile-checkbox-color-outline-standard);
+    outline: solid 3px var(--nile-checkbox-color-outline-standard);
     outline-offset: 1px;
   }
-
-  .checkbox--disabled .checkbox__control {
-    background-color: var(
-      --nile-checkbox-color-background-standard,
-      var(--ng-colors-bg-disabled-subtle)
-    );
-    border-color: var(
-      --nile-checkbox-color-border-standard,
-      var(--ng-colors-border-disabled)
-    );
-  }
-
+ 
+  /* Disabled */
+  .checkbox--disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+ 
+ 
   .checkbox__label {
     display: inline-block;
-    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    line-height: 14px;
+    font-size: 14px;
     margin-inline-start: 0.5em;
     user-select: none;
-    margin-top: var(--nile-spacing-xxs);
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));
-    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    margin-top: 2px;
+    color: var(--nile-colors-dark-900);
+    font-family: Colfax-regular;
     font-style: normal;
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-500));
+    font-weight: 400;
     letter-spacing: 0.2px;
   }
-
+ 
   :host([required]) .checkbox__label::after {
     content: '*';
     margin-inline-start: -2px;
   }
-
+ 
   .checkbox__checked-icon {
     --nile-svg-stroke: white;
   }
-
+ 
   .checkbox__indeterminate-icon {
     --nile-svg-stroke: white;
   }
-
-  .checkbox--disabled .checkbox__checked-icon,
-  .checkbox--disabled .checkbox__indeterminate-icon {
-    --nile-svg-stroke: var(
-      --ng-colors-border-border-disabled,
-      var(--ng-colors-fg-disabled-subtle)
-    );
-  }
-
+ 
   .checkbox__helptext-icon {
     float: right;
     cursor: pointer;
-    margin-right: var(--nile-spacing-lg);
+    margin-right: 12px;
   }
 `;
-
-export default [styles];
+ 
+export default [styles];

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

@@ -37,18 +37,18 @@ export const styles = css`
   .form-control--has-label .form-control__label {
     display: inline-block;
     color: inherit;
-    margin-bottom: var(--nile-spacing-lg,var( --ng-spacing-sm));
-    color: var(--nile-colors-dark-900,var(--ng-colors-text-secondary-700));
-    font-family: var(--nile-font-family-serif,var( --ng-font-family-body));
-    font-size: var(--nile-type-scale-3,var(--ng-font-size-text-sm));
+    margin-bottom: 12px;
+    color: var(--nile-colors-dark-900);
+    font-family: var(--nile-font-family-serif);
+    font-size: 14px;
     font-style: normal;
-    font-weight: var(--nile-font-weight-regular,var(--ng-font-weight-500));
-    line-height: var(--nile-line-height-xsmall,var( --ng-line-height-text-sm));
+    font-weight: 400;
+    line-height: 14px;
     letter-spacing: 0.2px;
   }
 
   .form-control--has-label.form-control--medium .form-control__label {
-    font-size: var(--nile-type-scale-3,var(--ng-font-size-text-sm));
+    font-size: 14px;
   }
 
   :host([required]) .form-control--has-label .form-control__label::after {
@@ -60,43 +60,41 @@ export const styles = css`
   /* Help text */
   .form-control--has-help-text .form-control__help-text {
     display: block;
-    color: var(--nile-colors-neutral-700,var( --ng-colors-text-primary-900));
-    margin-top: var(--nile-spacing-xxs);
+    color: hsl(240 3.8% 46.1%);
+    margin-top: 0.125rem;
   }
 
   .form-control--has-help-text.form-control--small .form-control__help-text {
-    font-size: var(--nile-type-scale-2,var(--ng-font-size-text-md));
+    font-size: 0.75rem;
   }
 
   .form-control--has-help-text.form-control--medium .form-control__help-text {
-    font-size: var(--nile-type-scale-3,var(--ng-font-size-text-md));
+    font-size: 0.875rem;
   }
 
   .form-control--has-help-text.form-control--large .form-control__help-text {
-    font-size: var(--nile-type-scale-4,var(--ng-font-size-text-md));
+    font-size: 1rem;
   }
 
   .form-control--has-help-text.form-control--radio-group
     .form-control__help-text {
-    margin-top: var(--nile-spacing-xxs);
+    margin-top: 0.25rem;
   }
 
   :host {
     display: block;
-    font-family: var(--nile-font-family-inherit,var(--ng-font-family-body));
+    font-family: inherit;
   }
 
   .nile-chip {
-    padding: var(--nile-spacing-sm,var( --ng-spacing-lg)) var(--nile-spacing-lg,var(--ng-spacing-lg));
-    background-color: var(--nile-colors-white-base,var( --ng-colors-bg-primary));
-    border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));
-    border: solid 1px var(--nile-colors-neutral-500,var(--ng-colors-border-primary));
+    padding: 5px 10px;
+    background-color: var(--nile-colors-white-base);
+    border-radius: 0.25rem;
+    border: solid 1px var(--nile-colors-neutral-500);
     display: flex;
     flex-wrap: wrap;
     width: 100%;
     overflow-x: hidden;
-    gap : var(--ng-spacing-md);
-    align-items: center;
   }
 
   .nile-chip--no-wrap {
@@ -115,45 +113,37 @@ export const styles = css`
   }
 
   .nile-chip--disabled {
-    background: var(--nile-colors-dark-200,var(--ng-colors-bg-disabled-subtle));
-    /* opacity: 0.5; */
+    background-color: hsl(240 4.8% 95.9%);
+    border-color: hsl(240 4.9% 83.9%);
+    opacity: 0.5;
     cursor: not-allowed;
     pointer-events: none;
   }
 
-  :host([disabled]) nile-tag::part(base) {
-    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
-  }
-
-  :host([disabled]) .nile-chip {
-    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
-  }
-
   .nile-chip:hover:not(.nile-chip--disabled) {
-    background-color: var(--nile-colors-white-base,var(--ng-colors-bg-primary));
-    box-shadow: var(--nile-box-shadow-10,var(--ng-shadow-xs));
-    outline: var(--nile-border-width-1, var(--ng-border-width-1))  var(--nile-border-style-solid, var(--ng-border-style-solid)) var(--nile-outline-none, var(--ng-colors-border-brand))
+    background-color: var(--nile-colors-white-base);
+    box-shadow: 0 0 0 1px hsl(198.6 88.7% 48.4% / 40%);
   }
 
   .nile-chip.nile-chip--focused:not(.nile-chip--disabled) {
-    background-color: var(--nile-colors-white-base,var( --ng-colors-bg-primary));
-    border-color: var(--nile-colors-primary-600,var(--ng-colors-border-brand));
-    box-shadow: var(--nile-box-shadow-10,var(--ng-shadow-xs));
+    background-color: var(--nile-colors-white-base);
+    border-color: var(--nile-colors-primary-600);
+    box-shadow: 0 0 0 1px hsl(198.6 88.7% 48.4% / 40%);
   }
 
   .nile-chip.nile-chip--disabled {
-    background-color: var(--nile-colors-dark-200,var(--ng-colors-bg-disabled-subtle));
-    border-color: var(--nile-colors-neutral-400,var(--ng-colors-border-disabled));
+    background-color: hsl(240 4.8% 95.9%);
+    border-color: hsl(240 4.9% 83.9%);
     opacity: 0.5;
     cursor: not-allowed;
   }
 
   .nile-chip.nile-chip--warning {
-    border-color: var(--nile-colors-yellow-500,var( --ng-componentcolors-utility-warning-500));
+    border-color: var(--nile-colors-yellow-500);
   }
 
   .nile-chip.nile-chip--error {
-    border-color: var(--nile-colors-red-500,var(--ng-colors-border-error));
+    border-color: var(--nile-colors-red-500);
   }
 
   .nile-chip.nile-chip--success {
@@ -164,7 +154,7 @@ export const styles = css`
     flex: 1;
   }
   .nile-chip__tags {
-    margin: var(--nile-spacing-xxs);
+    margin: 0.05rem;
   }
 `;
 

package/src/nile-chip/nile-chip.ts

@@ -57,9 +57,6 @@ export class NileChip extends NileElement {
   /** The input's label. If you need to display HTML, use the `label` slot instead. */
   @property() label = '';
 
-  @property({ type: String }) tagVariant: string = ''; // can be '', 'normal', 'success', etc.
-
-
   /** Adds a clear button when the input is not empty. */
   @property({ type: Boolean }) acceptUserInput = false;
 
@@ -184,8 +181,8 @@ export class NileChip extends NileElement {
                 })}
                 .variant=${this.errorIndexes.includes(index) ? 'error' : 'normal'}
                 @nile-remove=${() => this.handleRemove(tag)}
-                  removable
-                  ?pill=${this.tagVariant !== 'normal'}
+                removable
+                pill
               >
                 ${tag}
               </nile-tag>
@@ -198,11 +195,9 @@ export class NileChip extends NileElement {
               .filterFunction=${this.filterFunction}
               .renderItemFunction=${this.renderItemFunction}
               .loading="${this.loading}"
-              .value=${this.inputValue} 
+              .value=${this.inputValue}
               ?isDropdownOpen=${this.isDropdownOpen}
               .noBorder=${true}
-              .noOutline=${true}
-              .disabled=${this.disabled}
               openOnFocus
               exportparts="options__wrapper"
               .placeholder=${this.placeholder}
@@ -212,15 +207,6 @@ export class NileChip extends NileElement {
               @nile-complete=${this.handleSelect}
             ></nile-auto-complete>
           </div>
-          <slot
-            name="help-text"
-            part="form-control-help-text"
-            id="help-text"
-            class="form-control__help-text"
-            aria-hidden=${hasHelpText ? 'false' : 'true'}
-          >
-            ${this.helpText}
-          </slot>
         </div>
         ${
           hasHelpText

package/src/nile-circular-progressbar/nile-circular-progressbar.css.ts

@@ -18,15 +18,15 @@
  }
  
  .track {
-   stroke-width: var(--nile-stroke-width-3, var(--ng-stroke-width-6));
-   stroke: var(--nile-circular-progress-bar-track-color-stroke,var(--ng-colors-bg-quaternary));
+   stroke-width: 3px;
+   stroke: var(--nile-circular-progress-bar-track-color-stroke);
    opacity: 0.5;
    fill: none;
  }
  
  .progress {
-   stroke-width: var(--nile-stroke-width-3,var(--ng-stroke-width-6));
-   stroke: var(--nile-circular-progress-bar-progress-color-stroke,var(--ng-colors-fg-brand-primary-600));
+   stroke-width: 3px;
+   stroke: var(--nile-circular-progress-bar-progress-color-stroke);
    stroke-linecap: round;
    fill: none;
    transform: rotate(270deg);
@@ -35,12 +35,12 @@
  }
  
  .circle__text {
-   fill: var(--nile-circular-progress-bar-circle-color-text, var(--ng-colors-text-primary-900));
+   fill: var(--nile-circular-progress-bar-circle-color-text);
    text-align: center;
-   font-size: var(--nile-type-scale-1, var(--ng-font-size-text-sm));
+   font-size: var(--nile-type-scale-1);
    font-style: normal;
-   font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-semibold));
-   line-height: var(--nile-type-scale-1, var(--ng-line-height-text-sm));
+   font-weight: var(--nile-font-weight-regular);
+   line-height: var(--nile-type-scale-1);
    letter-spacing: 0.2px;
  }
  
@@ -48,7 +48,7 @@
    display: flex;
    justify-content: space-between;
    align-items: center;
-   margin-bottom: var(--nile-spacing-xs, var(--ng-spacing-xs));
+   margin-bottom: 4px;
  }
  
  .nile-progress-bar__message {
@@ -61,4 +61,4 @@
  
  `
  export default [styles];
- 
+ 

package/src/nile-code-editor/nile-code-editor.css.ts

@@ -21,9 +21,9 @@ export const styles = css`
 
   .code__editor__container {
     display: flex;
-    padding: var(--nile-spacing-sm, var(--ng-spacing-0));
-    border-radius: var(--nile-radius-sm, var(--ng-radius-md));
-    border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));
+    padding: 5px;
+    border-radius: 5px;
+    border: 1px solid rgb(204, 204, 204);
     position: relative;
   }
 
@@ -32,7 +32,7 @@ export const styles = css`
   }
 
   .error {
-    border-color: var(--nile-colors-red-500, var(--ng-componentcolors-utility-error-600));
+    border-color: var(--nile-colors-red-500);
   }
 
   .noborder {
@@ -48,21 +48,16 @@ export const styles = css`
     outline: none;
   }
 
-  .cm-gutters{
-   border-top-left-radius:var(--nile-spacing-spacing-none, var(--ng-radius-md));
-   border-bottom-left-radius:var(--nile-spacing-spacing-none, var(--ng-radius-md));
-  }
-
   .expand__icon__container{
     display: none;
     position: absolute;
-    border-radius: var(--nile-radius-base-standard, var(--ng-radius-none));
+    border-radius: var(--nile-radius-base-standard);
     cursor: pointer;
     right: 0px;
     top: 5px;
     z-index: 1;
-    padding: var(--nile-spacing-sm, var(--ng-spacing-0));
-    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    padding: 5px;
+    background-color: var(--nile-colors-white-base);
   }
   
   .code__editor__container:hover > .expand__icon__container{

package/src/nile-content-editor/nile-content-editor.css.ts

@@ -13,7 +13,7 @@ import { css } from 'lit';
 export const styles = css`
   :host {
     box-sizing: border-box;
-    font-size: var(--nile-type-scale-3);
+    font-size: 14px;
     overflow: hidden;
   }
 
@@ -30,9 +30,9 @@ export const styles = css`
   .content-editable-input {
     box-sizing: border-box;
     width: 100%;
-    padding: var(--nile-spacing-md);
+    padding: 9px;
     border: 1px solid var(--nile-colors-neutral-500);
-    border-radius: var(--nile-radius-radius-xs);
+    border-radius: 4px;
     overflow: auto;
     overflow-x: auto;
     overflow-anchor: none;
@@ -52,7 +52,7 @@ export const styles = css`
   }
 
   .read-only {
-    background-color: var(--nile-colors-dark-200);
+    background-color: hsl(240 4.8% 95.9%);
     opacity: 0.5;
     cursor: not-allowed;
   }
@@ -61,22 +61,22 @@ export const styles = css`
     display: inline;
     background: var(--nile-colors-neutral-400);
     color: var(--nile-colors-dark-900);
-    border-radius: var(--nile-radius-radius-xs);
-    padding: var(--nile-spacing-sm);
+    border-radius: 4px;
+    padding: 6px;
     height: 24px;
     line-height: 10px;
-    margin-left: var(--nile-spacing-xs);
+    margin-left: 3px;
     letter-spacing: 0.2px;
   }
 
   .text-area {
     height: 120px;
     overflow: scroll;
-    line-height: var(--nile-line-height-medium);
+    line-height: 26px;
   }
 
   .text-area .chips {
-    padding: var(--nile-spacing-xs) var(--nile-spacing-md);
+    padding: 4px 8px;
   }
 
   .chip-error {
@@ -92,8 +92,8 @@ export const styles = css`
 
   label {
     display: inline-block;
-    margin-bottom: var(--nile-spacing-sm);
-    font-family: var(--nile-font-family-serif-colfax-medium);
+    margin-bottom: 6px;
+    font-family: 'colfax-medium';
   }
 
   .asterik {