@aquera/nile-elements 0.0.74 → 0.0.75

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

@@ -13,21 +13,22 @@ import { css } from 'lit-element';
 export const styles = css`
   :host {
     display: inline-block;
-    --nile-remove-icon-color: var(--nile-colors-blue-500);
   }
 
   .tag {
     display: flex;
     align-items: center;
-    justify-items: center;
-    text-align: center;
-    gap: 3px;
+    border: solid 2px;
+    line-height: 1;
     white-space: nowrap;
     user-select: none;
     border-radius: 4px;
-    box-sizing: border-box;
-    color: var(--colors-text-text-secondary-700, #344054);
-    font-family: var(--nile-font-family-serif);
+    gap: 6px;
+  }
+
+  .tag__remove::part(base) {
+    color: inherit;
+    padding: 0;
   }
 
   /*
@@ -35,120 +36,101 @@ export const styles = css`
    */
 
   .tag--primary {
-    background: #005ea6;
-    color: #fff;
-    --nile-remove-icon-color: var(--nile-colors-blue-500);
+    background: #005EA6;
+    border-color: #005EA6;
+    border: 2px solid  #005EA6;
+    color: #FFF;
   }
 
   .tag--primary:hover {
-    outline: 2px solid rgba(0, 94, 166, 0.5);
+    border: 2px solid rgba(0, 94, 166, 0.50);
   }
 
-  .tag--primary:active > nile-icon {
+  .tag--primary:active > nile-icon-button {
     color: hsl(200.4 98% 39.4%);
   }
 
   .tag--success {
-    background: #a5f3e1;
+    background: #A5F3E1;
+    border: 2px solid #A5F3E1;
     color: #000;
-    --nile-remove-icon-color: var(--nile-colors-green-500);
   }
 
   .tag--success:hover {
-    outline: 2px solid #43e5c0;
+    border: 2px solid #43E5C0;
   }
 
-  .tag--success:active > nile-icon {
+  .tag--success:active > nile-icon-button {
     color: hsl(142.1 76.2% 36.3%);
   }
 
   .tag--normal {
-    background: #e5e9eb;
+    background: #E5E9EB;
+    border: 2px solid #E5E9EB;
     color: #000;
-    --nile-remove-icon-color: var(--nile-colors-dark-500);
   }
 
   .tag--normal:hover {
-    outline: 2px solid #c7ced4;
+    border: 2px solid #C7CED4;
   }
 
-  .tag--normal:active > nile-icon {
+
+  .tag--normal:active > nile-icon-button {
     color: hsl(240 5.2% 33.9%);
   }
 
   .tag--warning {
-    background: #f3e0a5;
+    background: #F3E0A5;
+    border: 2px solid #F3E0A5;
     color: #000;
-    --nile-remove-icon-color: var(--nile-colors-yellow-500);
   }
 
   .tag--warning:hover {
-    outline: 2px solid #e5bf43;
+    border: 2px solid #E5BF43;
   }
 
-  .tag--warning:active > nile-icon {
+  .tag--warning:active > nile-icon-button {
     color: hsl(32.1 94.6% 43.7%);
   }
 
+
   .tag--error {
-    background: #f3a5aa;
+    background: #F3A5AA;
+    border: 2px solid #F3A5AA;
     color: #000;
-    --nile-remove-icon-color: var(--nile-colors-red-500);
   }
 
   .tag--error:hover {
-    outline: 2px solid #e5434d;
+    border: 2px solid #E5434D;
   }
 
-  .tag--error:active > nile-icon {
+  .tag--error:active > nile-icon-button {
     color: hsl(0 72.2% 50.6%);
   }
 
   .tag--info {
-    background: #a5d3f3;
+    background: #A5D3F3;
+    border: 2px solid #A5D3F3;
     color: #000000;
-    --nile-remove-icon-color: var(--nile-colors-blue-500);
   }
 
   .tag--info:hover {
-    outline: 2px solid #42a3e5;
+    border: 2px solid #42A3E5;
   }
 
-  .tag--info:active > nile-icon {
+  .tag--info:active > nile-icon-button {
     color: hsl(0 72.2% 50.6%);
   }
 
-  .tag--gray {
-    background: var(--nile-tag-gray-background-color);
-    border: 1px solid var(--nile-colors-gray-light-mode-300);
-    color: var(--nile-tag-gray-color);
-    --nile-remove-icon-color: var(--nile-tag-gray-x-color);
-  }
-
-  .tag--gray:hover {
-    background-color: var(--nile-tag-gray-hover-background-color);
-  }
-
-  /* .tag--gray:active > nile-icon {
-    color: #101828;
-  } */
-
-  .tag--small {
-    height: 24px;
-    padding: 3px 8px;
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 18px;
-  }
 
   .tag--medium {
-    height: 24px;
-    padding: 2px 9px;
     font-size: 14px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 20px;
+    height: 26px;
+    padding: 0 0.75rem;
+  }
+
+  .tag__remove {
+    margin-inline-start: 0.5rem;
   }
 
   /*
@@ -159,37 +141,14 @@ export const styles = css`
     border-radius: 9999px;
   }
 
-  .tag__content {
-    display: inline-block;
-  }
-
-  .tag--medium .tag__remove-wrapper {
-    display: inline-flex;
-    justify-content: centre;
-    box-sizing: border-box;
-    height: 16px;
-    width: 16px;
-    padding: 2px;
-  }
+  .tag__prefix {
+  padding: 3px 6px;
+}
 
-  .tag--small .tag__remove-wrapper {
-    display: inline-flex;
-    justify-content: centre;
-    box-sizing: border-box;
-    height: 14px;
-    width: 14px;
-    padding: 2px;
-  }
+ .tag__content {
+  font-size: 14px;
+}
 
-  .tag--removable {
-    padding: 2px 2px 2px 9px;
-  }
-
-  .tag__remove:hover {
-    cursor: pointer;
-    --nile-remove-icon-color: #101828;
-    color: red;
-  }
 `;
 
 export default [styles];

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

@@ -52,8 +52,7 @@ export class NileTag extends NileElement {
     | 'normal'
     | 'warning'
     | 'error'
-    | 'info'
-    | 'gray' = 'normal';
+    | 'info' = 'normal';
 
   /** The tag's size. */
   @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
@@ -67,8 +66,29 @@ export class NileTag extends NileElement {
   private handleRemoveClick() {
     this.emit('nile-remove');
   }
+
+  getCloseButtonColor() {
+    switch (this.variant) {
+      case 'primary':
+        return  '--nile-colors-blue-500'; 
+      case 'success':
+        return '--nile-colors-green-500'; 
+      case 'normal':
+        return '--nile-colors-dark-500'; 
+      case 'warning':
+        return '--nile-colors-yellow-500';
+      case 'error':
+        return '--nile-colors-red-500';
+      case 'info':
+        return '--nile-colors-blue-500';
+      default:
+        return '--nile-colors-dark-500'; 
+    }
+  }
   
+
   render() {
+    const colorVariable = this.getCloseButtonColor();
     return html`
       <span
         part="base"
@@ -82,7 +102,6 @@ export class NileTag extends NileElement {
           'tag--warning': this.variant === 'warning',
           'tag--error': this.variant === 'error',
           'tag--info': this.variant === 'info',
-          'tag--gray': this.variant === 'gray',
 
           // Sizes
           'tag--small': this.size === 'small',
@@ -92,6 +111,7 @@ export class NileTag extends NileElement {
           // Modifiers
           'tag--pill': this.pill,
           'tag--removable': this.removable,
+
         })}
       >
         <slot name="prefix" part="prefix" class="tag__prefix"></slot>
@@ -100,18 +120,17 @@ export class NileTag extends NileElement {
 
         ${this.removable
           ? html`
-          <span class="tag__remove-wrapper">
-              <nile-icon 
-              name="close"
-              part="remove-button"
-              exportparts="base:remove-button__base"
-              class="tag__remove"
-              @click=${this.handleRemoveClick}
-              tabindex="-1"
-              color="var(--nile-remove-icon-color)"
-              size="${this.size === 'small' ? '10' : '12'}"
-              /> </nile-icon>
-          </span>
+              <nile-icon-button
+                part="remove-button"
+                exportparts="base:remove-button__base"
+                name="close"
+                library="system"
+                label="remove"
+                class="tag__remove"
+                @click=${this.handleRemoveClick}
+                tabindex="-1"
+                color="var(${colorVariable})"
+              ></nile-icon-button>
             `
           : ''}
       </span>