@aquera/nile-elements 0.1.37 → 0.1.38-beta-1.4

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,43 +14,50 @@ export const styles = css`
   :host {
     display: inline-block;
   }
- 
+
   :host(.full-width) {
     width: 100%;
   }
- 
+
   .checkbox {
     position: relative;
     display: inline-flex;
     align-items: top;
-    font-weight: 400;
-    color: var(--nile-colors-dark-900);
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-500));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));
     vertical-align: middle;
     cursor: pointer;
   }
- 
+
   .checkbox--medium {
-    --toggle-size: var(--nile-type-scale-3);
-    font-size: var(--nile-type-scale-3);
+    --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));
   }
- 
+
   .checkbox__control {
     flex: 0 0 auto;
     position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    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;
+    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));
     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;
@@ -58,19 +65,32 @@ export const styles = css`
     margin: 0;
     pointer-events: none;
   }
- 
+
   /* svg {
       display:none !important;
   } */
- 
+
   /* Hover */
-  .checkbox:not(.checkbox--checked):not(.checkbox--disabled)
+  .checkbox:not(.checkbox--checked):not(.checkbox--disabled):not(
+      .checkbox--indeterminate
+    )
     .checkbox__control:hover {
-    background: var(--nile-checkbox-color-background-hover);
-    border: 1px solid var(--nile-checkbox-color-border-hover);
-    border-radius: 4px;
+    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;
   }
- 
+
   /* Focus */
   .checkbox:not(.checkbox--checked):not(.checkbox--disabled)
     .checkbox__input:focus-visible
@@ -78,22 +98,37 @@ 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);
-    background-color: var(--nile-checkbox-color-background-checked-standard);
-  }
- 
+    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)
+    );
+  }
+
   /* 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);
-    border: 1px solid var(--nile-checkbox-color-border-checked-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;
+  } */
+
   /* Checked/indeterminate + focus */
   .checkbox.checkbox--checked:not(.checkbox--disabled)
     .checkbox__input:focus-visible
@@ -101,49 +136,61 @@ export const styles = css`
   .checkbox.checkbox--indeterminate:not(.checkbox--disabled)
     .checkbox__input:focus-visible
     ~ .checkbox__control {
-    outline: solid 3px var(--nile-checkbox-color-outline-standard);
+    outline: solid 3px var(--ng-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-background-standard,
+      var(--ng-colors-bg-disabled-subtle)
+    );
+    border-color: var(
+      --nile-checkbox-color-border-standard,
+      var(--ng-colors-border-disabled)
+    );
+  }
+
   .checkbox__label {
     display: inline-block;
-    line-height: 14px;
-    font-size: 14px;
+    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));
     margin-inline-start: 0.5em;
     user-select: none;
-    margin-top: 2px;
-    color: var(--nile-colors-dark-900);
-    font-family: Colfax-regular;
+    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));
     font-style: normal;
-    font-weight: 400;
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-500));
     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: 12px;
+    margin-right: var(--nile-spacing-lg);
   }
 `;
- 
-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: 12px;
-    color: var(--nile-colors-dark-900);
-    font-family: var(--nile-font-family-serif);
-    font-size: 14px;
+    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));
     font-style: normal;
-    font-weight: 400;
-    line-height: 14px;
+    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));
     letter-spacing: 0.2px;
   }
 
   .form-control--has-label.form-control--medium .form-control__label {
-    font-size: 14px;
+    font-size: var(--nile-type-scale-3,var(--ng-font-size-text-sm));
   }
 
   :host([required]) .form-control--has-label .form-control__label::after {
@@ -60,41 +60,43 @@ export const styles = css`
   /* Help text */
   .form-control--has-help-text .form-control__help-text {
     display: block;
-    color: hsl(240 3.8% 46.1%);
-    margin-top: 0.125rem;
+    color: var(--nile-colors-neutral-700,var( --ng-colors-text-primary-900));
+    margin-top: var(--nile-spacing-xxs);
   }
 
   .form-control--has-help-text.form-control--small .form-control__help-text {
-    font-size: 0.75rem;
+    font-size: var(--nile-type-scale-2,var(--ng-font-size-text-md));
   }
 
   .form-control--has-help-text.form-control--medium .form-control__help-text {
-    font-size: 0.875rem;
+    font-size: var(--nile-type-scale-3,var(--ng-font-size-text-md));
   }
 
   .form-control--has-help-text.form-control--large .form-control__help-text {
-    font-size: 1rem;
+    font-size: var(--nile-type-scale-4,var(--ng-font-size-text-md));
   }
 
   .form-control--has-help-text.form-control--radio-group
     .form-control__help-text {
-    margin-top: 0.25rem;
+    margin-top: var(--nile-spacing-xxs);
   }
 
   :host {
     display: block;
-    font-family: inherit;
+    font-family: var(--nile-font-family-inherit,var(--ng-font-family-body));
   }
 
   .nile-chip {
-    padding: 5px 10px;
-    background-color: var(--nile-colors-white-base);
-    border-radius: 0.25rem;
-    border: solid 1px var(--nile-colors-neutral-500);
+    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));
     display: flex;
     flex-wrap: wrap;
     width: 100%;
     overflow-x: hidden;
+    gap : var(--ng-spacing-md);
+    align-items: center;
   }
 
   .nile-chip--no-wrap {
@@ -113,37 +115,45 @@ export const styles = css`
   }
 
   .nile-chip--disabled {
-    background-color: hsl(240 4.8% 95.9%);
-    border-color: hsl(240 4.9% 83.9%);
-    opacity: 0.5;
+    background: var(--nile-colors-dark-200,var(--ng-colors-bg-disabled-subtle));
+    /* 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);
-    box-shadow: 0 0 0 1px hsl(198.6 88.7% 48.4% / 40%);
+    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))
   }
 
   .nile-chip.nile-chip--focused:not(.nile-chip--disabled) {
-    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%);
+    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));
   }
 
   .nile-chip.nile-chip--disabled {
-    background-color: hsl(240 4.8% 95.9%);
-    border-color: hsl(240 4.9% 83.9%);
+    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));
     opacity: 0.5;
     cursor: not-allowed;
   }
 
   .nile-chip.nile-chip--warning {
-    border-color: var(--nile-colors-yellow-500);
+    border-color: var(--nile-colors-yellow-500,var( --ng-componentcolors-utility-warning-500));
   }
 
   .nile-chip.nile-chip--error {
-    border-color: var(--nile-colors-red-500);
+    border-color: var(--nile-colors-red-500,var(--ng-colors-border-error));
   }
 
   .nile-chip.nile-chip--success {
@@ -154,7 +164,7 @@ export const styles = css`
     flex: 1;
   }
   .nile-chip__tags {
-    margin: 0.05rem;
+    margin: var(--nile-spacing-xxs);
   }
 `;
 

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

@@ -57,6 +57,9 @@ 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;
 
@@ -181,8 +184,8 @@ export class NileChip extends NileElement {
                 })}
                 .variant=${this.errorIndexes.includes(index) ? 'error' : 'normal'}
                 @nile-remove=${() => this.handleRemove(tag)}
-                removable
-                pill
+                  removable
+                  ?pill=${this.tagVariant !== 'normal'}
               >
                 ${tag}
               </nile-tag>
@@ -195,9 +198,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}
+              .disabled=${this.disabled}
               openOnFocus
               exportparts="options__wrapper"
               .placeholder=${this.placeholder}

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

@@ -18,15 +18,15 @@
  }
  
  .track {
-   stroke-width: 3px;
-   stroke: var(--nile-circular-progress-bar-track-color-stroke);
+   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));
    opacity: 0.5;
    fill: none;
  }
  
  .progress {
-   stroke-width: 3px;
-   stroke: var(--nile-circular-progress-bar-progress-color-stroke);
+   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-linecap: round;
    fill: none;
    transform: rotate(270deg);
@@ -35,12 +35,12 @@
  }
  
  .circle__text {
-   fill: var(--nile-circular-progress-bar-circle-color-text);
+   fill: var(--nile-circular-progress-bar-circle-color-text, var(--ng-colors-text-primary-900));
    text-align: center;
-   font-size: var(--nile-type-scale-1);
+   font-size: var(--nile-type-scale-1, var(--ng-font-size-text-sm));
    font-style: normal;
-   font-weight: var(--nile-font-weight-regular);
-   line-height: var(--nile-type-scale-1);
+   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));
    letter-spacing: 0.2px;
  }
  
@@ -48,7 +48,7 @@
    display: flex;
    justify-content: space-between;
    align-items: center;
-   margin-bottom: 4px;
+   margin-bottom: var(--nile-spacing-xs, var(--ng-spacing-xs));
  }
  
  .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: 5px;
-    border-radius: 5px;
-    border: 1px solid rgb(204, 204, 204);
+    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));
     position: relative;
   }
 
@@ -32,7 +32,7 @@ export const styles = css`
   }
 
   .error {
-    border-color: var(--nile-colors-red-500);
+    border-color: var(--nile-colors-red-500, var(--ng-componentcolors-utility-error-600));
   }
 
   .noborder {
@@ -48,16 +48,21 @@ 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);
+    border-radius: var(--nile-radius-base-standard, var(--ng-radius-none));
     cursor: pointer;
     right: 0px;
     top: 5px;
     z-index: 1;
-    padding: 5px;
-    background-color: var(--nile-colors-white-base);
+    padding: var(--nile-spacing-sm, var(--ng-spacing-0));
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
   }
   
   .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: 14px;
+    font-size: var(--nile-type-scale-3);
     overflow: hidden;
   }
 
@@ -30,9 +30,9 @@ export const styles = css`
   .content-editable-input {
     box-sizing: border-box;
     width: 100%;
-    padding: 9px;
+    padding: var(--nile-spacing-md);
     border: 1px solid var(--nile-colors-neutral-500);
-    border-radius: 4px;
+    border-radius: var(--nile-radius-radius-xs);
     overflow: auto;
     overflow-x: auto;
     overflow-anchor: none;
@@ -52,7 +52,7 @@ export const styles = css`
   }
 
   .read-only {
-    background-color: hsl(240 4.8% 95.9%);
+    background-color: var(--nile-colors-dark-200);
     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: 4px;
-    padding: 6px;
+    border-radius: var(--nile-radius-radius-xs);
+    padding: var(--nile-spacing-sm);
     height: 24px;
     line-height: 10px;
-    margin-left: 3px;
+    margin-left: var(--nile-spacing-xs);
     letter-spacing: 0.2px;
   }
 
   .text-area {
     height: 120px;
     overflow: scroll;
-    line-height: 26px;
+    line-height: var(--nile-line-height-medium);
   }
 
   .text-area .chips {
-    padding: 4px 8px;
+    padding: var(--nile-spacing-xs) var(--nile-spacing-md);
   }
 
   .chip-error {
@@ -92,8 +92,8 @@ export const styles = css`
 
   label {
     display: inline-block;
-    margin-bottom: 6px;
-    font-family: 'colfax-medium';
+    margin-bottom: var(--nile-spacing-sm);
+    font-family: var(--nile-font-family-serif-colfax-medium);
   }
 
   .asterik {