@aquera/nile-elements 1.0.1 → 1.1.0-beta-1.0

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

@@ -4,62 +4,53 @@
  * 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
  */
 export const styles = css`
   :host {
     display: inline-block;
-    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
-
+ 
   :host(.full-width) {
     width: 100%;
   }
-
+ 
   .checkbox {
     position: relative;
     display: inline-flex;
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));
+    align-items: top;
+    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;
@@ -67,31 +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));
-  }
-
-  /* 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
@@ -99,116 +78,72 @@ export const styles = css`
     outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);
     outline-offset: 1px;
   }
-
-  .checkbox--focused .checkbox__control {
-    box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring));
-  }
-
+ 
   /* 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)
-    );
-  }
-
-  /* .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
+    ~ .checkbox__control,
+  .checkbox.checkbox--indeterminate:not(.checkbox--disabled)
+    .checkbox__input:focus-visible
+    ~ .checkbox__control {
+    outline: solid 3px var(--nile-checkbox-color-outline-standard);
+    outline-offset: 1px;
+  }
+ 
+  /* Disabled */
+  .checkbox--disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+ 
  
-
-  .checkbox--disabled .checkbox__control {
-    background-color: var(
-      --nile-checkbox-color-border-checked-standard,
-      var(--ng-colors-bg-disabled-subtle)
-    );
-    border-color: var(
-      --nile-checkbox-color-border-standard,
-      var(--ng-colors-border-disabled)
-    );
-  }
- 
-.checkbox--disabled.checkbox--checked .checkbox__control,
-.checkbox--disabled.checkbox--indeterminate .checkbox__control {
-  background-color: var(
-    --nile-checkbox-color-background-checked-standard,
-    var(--ng-colors-bg-disabled-subtle)
-  );
-  border-color: var(
-    --nile-checkbox-color-border-checked-standard,
-    var(--ng-colors-border-disabled)
-  );
-}
-
- 
-.checkbox--disabled:not(.checkbox--checked):not(.checkbox--indeterminate) .checkbox__control {
-  background-color: transparent;
-  border-color: var(
-    --nile-checkbox-color-border-standard,
-    var(--ng-colors-border-disabled)
-  );
-}
-
   .checkbox__label {
     display: inline-block;
-    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));
+    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-medium));
+    font-weight: 400;
     letter-spacing: 0.2px;
   }
-
+ 
   :host([required]) .checkbox__label::after {
     content: '*';
     margin-inline-start: -2px;
   }
-
+ 
   .checkbox__checked-icon {
     --nile-svg-stroke: white;
-    --nile-svg-stroke-width: var(--nile-icon-stroke-width-1-3, var(--ng-icon-stroke-width-2-5));
   }
-
+ 
   .checkbox__indeterminate-icon {
     --nile-svg-stroke: white;
-    --nile-svg-stroke-width: var(--nile-icon-stroke-width-1-3, var(--ng-icon-stroke-width-2-5));
-  }
-
-  .checkbox--disabled .checkbox__checked-icon,
-  .checkbox--disabled .checkbox__indeterminate-icon {
-    --nile-svg-stroke: var(
-       --nile-checkbox-color-border-standard,
-      var(--ng-colors-fg-disabled-subtle)
-    );
-    --nile-svg-stroke-width: var(--nile-icon-stroke-width-1-3, var(--ng-icon-stroke-width-2-5));
-  }
-
+  }
+ 
   .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-checkbox/nile-checkbox.ts

@@ -231,9 +231,8 @@ export class NileCheckbox extends NileElement {
                   class="checkbox__checked-icon"
                   color="white"
                   library="system"
-                  name="var(--nile-icon-tick, var(--ng-icon-check))"
+                  name="tick"
                   size="12"
-                  method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
                 ></nile-icon>
               `
             : ''}
@@ -244,9 +243,8 @@ export class NileCheckbox extends NileElement {
                   class="checkbox__indeterminate-icon"
                   library="system"
                   color="white"
-                  name="var(--nile-icon-minus, var(--ng-icon-minus))"
+                  name="minus"
                   size="12"
-                  method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
                 ></nile-icon>
               `
             : ''}

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

@@ -13,9 +13,6 @@ import { css } from 'lit';
 export const styles = css`
   :host {
     box-sizing: border-box;
-    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   :host *,
@@ -40,68 +37,64 @@ 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-medium));
-    line-height: var(--nile-type-scale-3,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 {
     content: '*';
     margin-inline-start: -2px;
+    color: undefined;
   }
 
   /* 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-xxxxsmall);
+    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-spacing-xsmall,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-font-size-rem-medium,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-font-size-rem-large,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-xxxsmall);
+    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-5px,var( --ng-spacing-md)) var(--nile-spacing-10px,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(--nile-gap-unset, var(--ng-spacing-md));
-  }
-
-  nile-input::part(base) {
-    padding: 0px !important;
   }
 
   .nile-chip--no-wrap {
@@ -120,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 {
@@ -169,11 +154,7 @@ export const styles = css`
     flex: 1;
   }
   .nile-chip__tags {
-    margin: var(--nile-margin-size-rem-small);
-  }
-
-  nile-auto-complete::part(input) {
-    padding: 0px;
+    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;
 
@@ -193,8 +190,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>
@@ -207,14 +204,11 @@ 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}
-              .noPadding=${true}
-              .disabled=${this.disabled}
               openOnFocus
-              exportparts="options__wrapper, input"
+              exportparts="options__wrapper"
               .placeholder=${this.placeholder}
               @nile-input=${this.handleInputChange}
               @keydown=${this.handleInputKeydown}

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

@@ -14,22 +14,19 @@
  
   :host {
    display: inline-block;
-   -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
     
  }
  
  .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);
@@ -38,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;
  }
  
@@ -51,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 {
@@ -64,4 +61,4 @@
  
  `
  export default [styles];
- 
+ 

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

@@ -17,16 +17,13 @@ export const styles = css`
 
   :host {
     display: block;
-    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   .code__editor__container {
     display: flex;
-    padding: var(--nile-spacing-5px, var(--ng-spacing-none));
-    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;
   }
 
@@ -35,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 {
@@ -51,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: var(--nile-spacing-none, var(--ng-spacing-1-5));
+    right: 0px;
     top: 5px;
     z-index: 1;
-    padding: var(--nile-spacing-5px, var(--ng-spacing-none));
-    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{