@aquera/nile-elements 0.0.49 → 0.0.51

package/dist/nile-button/nile-button.css.esm.js

@@ -1,4 +1,4 @@
-import{i as t}from"../index-cd2f9c12.esm.js";const o=t`
+import{i as o}from"../index-cd2f9c12.esm.js";const t=o`
   :host {
     display: inline-block;
     position: relative;
@@ -61,70 +61,86 @@ import{i as t}from"../index-cd2f9c12.esm.js";const o=t`
     /* vertical-align: -2px; */
   }
 
-  .button--standard.button--secondary {
-    background-color: var(--nile-colors-button-secondary);
-    border-color: var(--nile-colors-button-secondary-border);
-    color: var(--nile-colors-button-secondary-text);
-  }
-
-  .button--standard.button--secondary:hover:not(.button--disabled) {
-    background-color: var(--nile-colors-button-secondary-hover);
-    border-color: var(--nile-colors-button-secondary-border);
-    color: var(--nile-colors-button-secondary-text);
-  }
-
-  .button--standard.button--secondary:active:not(.button--disabled) {
-    background-color: var(--nile-colors-button-secondary-pressed);
-    border-color: var(--nile-colors-button-secondary-pressed-border);
-    color: var(--nile-colors-button-secondary-text);
-  }
-
-  .button--standard.button--secondary.button--disabled {
-    background-color: var(--nile-colors-button-secondary-disabled);
-    border-color: var(--nile-colors-button-secondary-disabled-border);
-    color: var(--nile-colors-button-secondary-disabled-text);
-    cursor: not-allowed;
-  }
-
-  .button--standard.button--secondary.button--disabled:hover,
-  .button--standard.button--secondary.button--disabled:active {
-    background-color: var(--nile-colors-button-secondary-disabled);
-    border-color: var(--nile-colors-button-secondary-disabled-border);
-    color: var(--nile-colors-button-secondary-disabled-text);
-    cursor: not-allowed;
-  }
-
   /* Primary */
   .button--standard.button--primary {
     background-color: var(--nile-colors-button-primary);
+    background-color: #005ea6; /*for v2 */
     border-color: var(--nile-colors-button-primary-border);
+    border-color: #005ea6; /*for v2 */
     color: var(--nile-colors-button-primary-text);
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); /*for v2 */
   }
 
   .button--standard.button--primary:hover:not(.button--disabled) {
     background-color: var(--nile-colors-button-primary-hover);
+    background-color: #005291; /*for v2 */
     border-color: var(--nile-colors-button-primary-hover);
+    border-color: #005291; /*for v2 */
     color: var(--nile-colors-button-primary-text);
   }
 
   .button--standard.button--primary:active:not(.button--disabled) {
     background-color: var(--nile-colors-button-primary-pressed);
+    background-color: #005ea6; /*for v2 */
     border-color: var(--nile-colors-button-primary-pressed-border);
+    border-color: #005ea6; /*for v2 */
     color: var(--nile-colors-button-primary-text);
+    box-shadow: 0px 1px 2px 0px rgba(0, 82, 145, 0.1),
+      0px 0px 0px 4px rgba(0, 94, 166, 0.15); /*for v2 */
   }
 
   .button--standard.button--primary.button--disabled {
     background-color: var(--nile-colors-button-primary-disabled);
+    background-color: #f2f4f7; /*for v2 */
     border-color: var(--nile-colors-button-primary-disabled);
+    border-color: #eaecf0; /*for v2 */
     color: var(--nile-colors-button-primary-disabled-text);
+    color: #98a2b3; /*for v2 */
     cursor: not-allowed;
   }
 
   .button--standard.button--primary.button--disabled:hover,
   .button--standard.button--primary.button--disabled:active {
     background-color: var(--nile-colors-button-primary-disabled);
+    background-color: #f2f4f7; /*for v2 */
     border-color: var(--nile-colors-button-primary-disabled);
+    border-color: #eaecf0; /*for v2 */
     color: var(--nile-colors-button-primary-disabled-text);
+    color: #98a2b3; /*for v2 */
+    cursor: not-allowed;
+  }
+
+  /*  Secondary */
+  .button--standard.button--secondary {
+    background-color: var(--nile-colors-button-secondary);
+    border-color: var(--nile-colors-button-secondary-border);
+    color: var(--nile-colors-button-secondary-text);
+  }
+
+  .button--standard.button--secondary:hover:not(.button--disabled) {
+    background-color: var(--nile-colors-button-secondary-hover);
+    border-color: var(--nile-colors-button-secondary-border);
+    color: var(--nile-colors-button-secondary-text);
+  }
+
+  .button--standard.button--secondary:active:not(.button--disabled) {
+    background-color: var(--nile-colors-button-secondary-pressed);
+    border-color: var(--nile-colors-button-secondary-pressed-border);
+    color: var(--nile-colors-button-secondary-text);
+  }
+
+  .button--standard.button--secondary.button--disabled {
+    background-color: var(--nile-colors-button-secondary-disabled);
+    border-color: var(--nile-colors-button-secondary-disabled-border);
+    color: var(--nile-colors-button-secondary-disabled-text);
+    cursor: not-allowed;
+  }
+
+  .button--standard.button--secondary.button--disabled:hover,
+  .button--standard.button--secondary.button--disabled:active {
+    background-color: var(--nile-colors-button-secondary-disabled);
+    border-color: var(--nile-colors-button-secondary-disabled-border);
+    color: var(--nile-colors-button-secondary-disabled-text);
     cursor: not-allowed;
   }
 
@@ -158,7 +174,7 @@ import{i as t}from"../index-cd2f9c12.esm.js";const o=t`
   }
 
   /* ghost  */
-  .button--standard.button--ghost{
+  .button--standard.button--ghost {
     background-color: var(--nile-colors-button-tertiary);
     border-color: transparent;
     color: var(--nile-colors-button-tertiary-text);
@@ -172,14 +188,14 @@ import{i as t}from"../index-cd2f9c12.esm.js";const o=t`
 
   .button--standard.button--ghost:active:not(.button--disabled) {
     background-color: var(--nile-colors-button-tertiary-pressed);
-    border-color:transparent;
+    border-color: transparent;
     color: var(--nile-colors-button-tertiary-text);
   }
 
   .button--standard.button--ghost.button--disabled,
   .button--standard.button--ghost.button--disabled:hover,
   .button--standard.button--ghost.button--disabled:active {
-    border-color:transparent;
+    border-color: transparent;
     background-color: var(--nile-colors-button-tertiary-disabled);
     color: var(--nile-colors-button-tertiary-disabled-text);
     cursor: not-allowed;
@@ -213,68 +229,217 @@ import{i as t}from"../index-cd2f9c12.esm.js";const o=t`
     color: var(--nile-colors-button-caution-disabled-text);
   }
 
+  /* destructive */
+  .button--standard.button--destructive {
+    background-color: #d92d20;
+    border-color: #d92d20;
+    color: #fff;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  }
 
-        /* Primary Variant - Nile Icon Fill */
-        .button--standard.button--primary ::slotted(nile-icon) {
-        --nile-svg-fill: var(--nile-colors-button-primary-text) !important;
-      }
-      .button--standard.button--primary:hover:not(.button--disabled) ::slotted(nile-icon),
-      .button--standard.button--primary:active:not(.button--disabled) ::slotted(nile-icon) {
-        --nile-svg-fill: var(--nile-colors-button-primary-text) !important;
-      }
-      .button--standard.button--primary.button--disabled ::slotted(nile-icon) {
-        --nile-svg-fill: var(--nile-colors-button-primary-disabled-text) !important;
-      }
-
-      /* Secondary Variant */
-      .button--standard.button--secondary ::slotted(nile-icon) {
-        --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;
-      }
-      .button--standard.button--secondary:hover:not(.button--disabled) ::slotted(nile-icon),
-      .button--standard.button--secondary:active:not(.button--disabled) ::slotted(nile-icon) {
-        --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;
-      }
-      .button--standard.button--secondary.button--disabled ::slotted(nile-icon) {
-        --nile-svg-fill: var(--nile-colors-button-secondary-disabled-text) !important;
-      }
-
-      /* Tertiary Variant */
-      .button--standard.button--tertiary ::slotted(nile-icon) {
-        --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
-      }
-      .button--standard.button--tertiary:hover:not(.button--disabled) ::slotted(nile-icon),
-      .button--standard.button--tertiary:active:not(.button--disabled) ::slotted(nile-icon) {
-        --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
-      }
-      .button--standard.button--tertiary.button--disabled ::slotted(nile-icon) {
-        --nile-svg-fill: var(--nile-colors-button-tertiary-disabled-text) !important;
-      }
-
-        /* Ghost Variant */
-      .button--standard.button--ghost ::slotted(nile-icon) {
-        --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
-      }
-      .button--standard.button--ghost:hover:not(.button--disabled) ::slotted(nile-icon),
-      .button--standard.button--ghost:active:not(.button--disabled) ::slotted(nile-icon) {
-        --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
-      }
-      .button--standard.button--ghost ::slotted(nile-icon) {
-        --nile-svg-fill: var(--nile-colors-button-tertiary-disabled-text) !important;
-      }
-
-      /* Caution Variant */
-      .button--standard.button--caution ::slotted(nile-icon) {
-        --nile-svg-fill: var(--nile-colors-button-caution-text) !important;
-      }
-      .button--standard.button--caution:hover:not(.button--disabled) ::slotted(nile-icon),
-      .button--standard.button--caution:active:not(.button--disabled) ::slotted(nile-icon) {
-        --nile-svg-fill: var(--nile-colors-button-caution-text) !important;
-      }
-      .button--standard.button--caution.button--disabled ::slotted(nile-icon) {
-        --nile-svg-fill: var(--nile-colors-button-caution-disabled-text) !important;
-      }
-
-    /*
+  .button--standard.button--destructive:hover:not(.button--disabled) {
+    background-color: #b42318;
+    border-color: #b42318;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  }
+
+  .button--standard.button--destructive:active:not(.button--disabled) {
+    background-color: #d92d20;
+    border-color: #d92d20;
+    color: #fff;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
+      0px 0px 0px 4px rgba(240, 68, 56, 0.24);
+  }
+  .button--standard.button--destructive:focus-visible:not(.button--disabled) {
+    background-color: #d92d20;
+    border-color: #d92d20;
+    color: #fff;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
+      0px 0px 0px 4px rgba(240, 68, 56, 0.24);
+  }
+
+  .button--standard.button--destructive.button--disabled {
+    background-color: #f2f4f7;
+    border-color: #eaecf0;
+    color: #98a2b3;
+    cursor: not-allowed;
+  }
+
+  .button--standard.button--destructive.button--disabled:hover,
+  .button--standard.button--destructive.button--disabled:active {
+    background-color: #f2f4f7;
+    border-color: #eaecf0;
+    color: #98a2b3;
+    cursor: not-allowed;
+  }
+
+  /* secondary-Grey */
+  .button--standard.button--secondary-grey {
+    background-color: #fff;
+    border-color: #d0d5dd;
+    color: #344054;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  }
+
+  .button--standard.button--secondary-grey:hover:not(.button--disabled) {
+    background-color: #f9fafb;
+    border-color: #d0d5dd;
+    color: #182230;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  }
+
+  .button--standard.button--secondary-grey:active:not(.button--disabled) {
+    background-color: #fff;
+    border-color: #d0d5dd;
+    color: #344054;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
+      0px 0px 0px 4px rgba(152, 162, 179, 0.14);
+  }
+
+  .button--standard.button--secondary-grey.button--disabled {
+    background-color: #eaecf0;
+    border-color: var(--nile-colors-button-primary-disabled);
+    color: #98a2b3;
+    cursor: not-allowed;
+  }
+
+  .button--standard.button--secondary-grey.button--disabled:hover,
+  .button--standard.button--secondary-grey.button--disabled:active {
+    background-color: #eaecf0;
+    border-color: var(--nile-colors-button-primary-disabled);
+    color: #98a2b3;
+    cursor: not-allowed;
+  }
+
+  /* secondary-blue */
+  .button--standard.button--secondary-blue {
+    background-color: #fff;
+    border-color: #85aad1;
+    color: #005291;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  }
+
+  .button--standard.button--secondary-blue:hover:not(.button--disabled) {
+    background-color: #eaf0f8;
+    border-color: #85aad1;
+    color: #004678;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  }
+
+  .button--standard.button--secondary-blue:active:not(.button--disabled) {
+    background-color: #fff;
+    border-color: #85aad1;
+    color: #005291;
+    box-shadow: 0px 1px 2px 0px rgba(0, 82, 145, 0.1),
+      0px 0px 0px 4px rgba(0, 94, 166, 0.15);
+  }
+
+  .button--standard.button--secondary-blue.button--disabled {
+    background-color: #fff;
+    border-color: #eaecf0;
+    color: #98a2b3;
+    cursor: not-allowed;
+  }
+
+  .button--standard.button--secondary-blue.button--disabled:hover,
+  .button--standard.button--secondary-blue.button--disabled:active {
+    background-color: #fff;
+    border-color: #eaecf0;
+    color: #98a2b3;
+    cursor: not-allowed;
+  }
+
+  /* Primary Variant - Nile Icon Fill */
+  .button--standard.button--primary ::slotted(nile-icon) {
+    --nile-svg-fill: var(--nile-colors-button-primary-text) !important;
+  }
+  .button--standard.button--primary:hover:not(.button--disabled)
+    ::slotted(nile-icon),
+  .button--standard.button--primary:active:not(.button--disabled)
+    ::slotted(nile-icon) {
+    --nile-svg-fill: var(--nile-colors-button-primary-text) !important;
+  }
+  .button--standard.button--primary.button--disabled ::slotted(nile-icon) {
+    --nile-svg-fill: var(--nile-colors-button-primary-disabled-text) !important;
+  }
+
+  /* Secondary Variant */
+  .button--standard.button--secondary ::slotted(nile-icon) {
+    --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;
+  }
+  .button--standard.button--secondary:hover:not(.button--disabled)
+    ::slotted(nile-icon),
+  .button--standard.button--secondary:active:not(.button--disabled)
+    ::slotted(nile-icon) {
+    --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;
+  }
+  .button--standard.button--secondary.button--disabled ::slotted(nile-icon) {
+    --nile-svg-fill: var(
+      --nile-colors-button-secondary-disabled-text
+    ) !important;
+  }
+
+  /* Tertiary Variant */
+  .button--standard.button--tertiary ::slotted(nile-icon) {
+    --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
+  }
+  .button--standard.button--tertiary:hover:not(.button--disabled)
+    ::slotted(nile-icon),
+  .button--standard.button--tertiary:active:not(.button--disabled)
+    ::slotted(nile-icon) {
+    --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
+  }
+  .button--standard.button--tertiary.button--disabled ::slotted(nile-icon) {
+    --nile-svg-fill: var(
+      --nile-colors-button-tertiary-disabled-text
+    ) !important;
+  }
+
+  /* Ghost Variant */
+  .button--standard.button--ghost ::slotted(nile-icon) {
+    --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
+  }
+  .button--standard.button--ghost:hover:not(.button--disabled)
+    ::slotted(nile-icon),
+  .button--standard.button--ghost:active:not(.button--disabled)
+    ::slotted(nile-icon) {
+    --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
+  }
+  .button--standard.button--ghost ::slotted(nile-icon) {
+    --nile-svg-fill: var(
+      --nile-colors-button-tertiary-disabled-text
+    ) !important;
+  }
+
+  /* Caution Variant */
+  .button--standard.button--caution ::slotted(nile-icon) {
+    --nile-svg-fill: var(--nile-colors-button-caution-text) !important;
+  }
+  .button--standard.button--caution:hover:not(.button--disabled)
+    ::slotted(nile-icon),
+  .button--standard.button--caution:active:not(.button--disabled)
+    ::slotted(nile-icon) {
+    --nile-svg-fill: var(--nile-colors-button-caution-text) !important;
+  }
+  .button--standard.button--caution.button--disabled ::slotted(nile-icon) {
+    --nile-svg-fill: var(--nile-colors-button-caution-disabled-text) !important;
+  }
+
+  /* destructive */
+  .button--standard.button--destructive ::slotted(nile-icon) {
+    --nile-svg-fill: #fff !important;
+  }
+  .button--standard.button--destructive:hover:not(.button--disabled)
+    ::slotted(nile-icon),
+  .button--standard.button--caution:active:not(.button--disabled)
+    ::slotted(nile-icon) {
+    --nile-svg-fill: #fff !important;
+  }
+  .button--standard.button--destructive.button--disabled ::slotted(nile-icon) {
+    --nile-svg-fill: #fff !important;
+  }
+
+  /*
    * Outline buttons
    */
 
@@ -376,12 +541,83 @@ import{i as t}from"../index-cd2f9c12.esm.js";const o=t`
     color: var(--nile-colors-white-base);
   }
 
- .button--outline.button--danger:active:not(.button--disabled) {
+  .button--outline.button--danger:active:not(.button--disabled) {
     border-color: var(--nile-colors-red-700);
     background-color: var(--nile-colors-red-700);
     color: var(--nile-colors-white-base);
   }
 
+  /* destructive  */
+  .button--outline.button--destructive {
+    border-color: #fda29b;
+    color: #b42318;
+    box-shadow: 0px;
+  }
+
+  .button--outline.button--destructive:hover:not(.button--disabled),
+  .button--outline.button--destructive.button--checked:not(.button--disabled) {
+    border-color: #fda29b;
+    color: #912018;
+    background-color: #fef3f2;
+  }
+
+  .button--outline.button--destructive:active:not(.button--disabled) {
+    border-color: #fda29b;
+    color: #b42318;
+    background-color: #fff;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
+      0px 0px 0px 4px rgba(240, 68, 56, 0.24);
+  }
+
+  /* destructive - focus-visible */
+  .button--outline.button--destructive:focus-visible:not(.button--disabled) {
+    border-color: #fda29b;
+    color: #b42318;
+    background-color: #fff;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
+      0px 0px 0px 4px rgba(240, 68, 56, 0.24);
+  }
+
+  /* secondary-grey  */
+  .button--outline.button--secondary-grey {
+    box-shadow: 0px;
+  }
+
+  .button--outline.button--secondary-grey:hover:not(.button--disabled),
+  .button--outline.button--secondary-grey.button--checked:not(
+      .button--disabled
+    ) {
+    color: #344054;
+    background-color: #f9fafb;
+  }
+
+  .button--outline.button--secondary-grey:active:not(.button--disabled) {
+    box-shadow: 0px;
+  }
+
+  .button--outline.button--secondary-grey:focus-visible:not(.button--disabled) {
+    box-shadow: 0px;
+  }
+
+  /* secondary-blue  */
+  .button--outline.button--secondary-blue {
+    box-shadow: 0px;
+  }
+
+  .button--outline.button--secondary-blue:hover:not(.button--disabled),
+  .button--outline.button--secondary-blue.button--checked:not(.button--disabled) {
+    color: #004678;
+    background-color: #EAF0F8;
+  }
+
+  .button--outline.button--secondary-blue:active:not(.button--disabled) {
+    box-shadow: 0px;
+  }
+
+  .button--outline.button--secondary-blue:focus-visible:not(.button--disabled) {
+    box-shadow: 0px;
+  }
+  
   @media (forced-colors: active) {
     .button.button--outline.button--checked:not(.button--disabled) {
       outline: solid 2px transparent;
@@ -474,4 +710,8 @@ import{i as t}from"../index-cd2f9c12.esm.js";const o=t`
     pointer-events: none;
   }
 
-`;export{o as s};
+  /* outline with no border */
+  .button--outline.button--hideborder {
+    border: 0px;
+  }
+`;export{t as s};