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

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

@@ -16,9 +16,6 @@ export const styles = css`
     position: relative;
     width: auto;
     cursor: pointer;
-    -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));
   }
 
   .button {
@@ -26,28 +23,28 @@ export const styles = css`
     align-items: center;
     justify-content: center;
     border-style: solid;
-    border-width: var(--nile-border-size-1, var(--ng-border-width-1));
+    border-width: 1px;
     font-style: normal;
-    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-family: var(--nile-font-family-serif);
     text-align: center;
     letter-spacing: 0.2px;
     text-decoration: none;
     user-select: none;
     white-space: nowrap;
     vertical-align: middle;
-    transition: var(--nile-transition-duration-default, var(--ng-transition-duration-default)) background-color,
-      var(--nile-transition-duration-default, var(--ng-transition-duration-default)) color,
-      var(--nile-transition-duration-default, var(--ng-transition-duration-default)) border,
-      var(--nile-transition-duration-default, var(--ng-transition-duration-default)) box-shadow;
+    transition: var(--nile-transition-duration-default) background-color,
+      var(--nile-transition-duration-default) color,
+      var(--nile-transition-duration-default) border,
+      var(--nile-transition-duration-default) box-shadow;
     cursor: inherit;
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
-    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));
-    border-radius: var(--nile-radius-base-standard, var(--ng-radius-md));
-    padding: var(--nile-spacing-10px, var(--ng-spacing-md-alt)) var(--nile-spacing-14px, var(--ng-spacing-lg));
-    gap: var(--nile-spacing-5px, var(--ng-spacing-xs));
-    line-height: var(--nile-type-scale-6, var(--ng-spacing-5));
+    font-size: 14px;
+    font-weight: 500;
+    border-radius: var(--nile-radius-base-standard);
+    padding: 10px 14px;
+    gap: 5px;
+    line-height: 20px;
     box-sizing: border-box;
-    height: var(--nile-height-40px, var(--ng-height-40px));
+    height: 40px;
   }
 
   .button::-moz-focus-inner {
@@ -59,8 +56,8 @@ export const styles = css`
   }
 
   .button:focus-visible {
-    outline: var(--nile-outline-5px, --ng-outline-5px) auto var(--ng-colors-bg-brand-solid, -webkit-focus-ring-color);
-    outline-offset: var(--ng-outline-2px, --ng-outline-4px);
+    outline: 5px auto -webkit-focus-ring-color;
+    outline-offset: 2px;
   }
 
   .button--disabled {
@@ -74,158 +71,133 @@ export const styles = css`
 
   /* Primary */
   .button--standard.button--primary {
-    background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));
-    border-color: var(--nile-colors-primary-600, var(--ng-primary-standard));  
-    color: var(--nile-colors-white-base, var(--ng-colors-text-white));
-    box-shadow: var(
-      --nile-textarea-standard-disabled-box-shadow,
-      var(--ng-shadow-xs-skeuomorphic)
-    ); //TODO: fix
+    background-color: var(--nile-colors-primary-600);
+    border-color: var(--nile-colors-primary-600);
+    color: var(--nile-colors-white-base);
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
   }
 
   .button--standard.button--primary:hover:not(.button--disabled) {
-    background-color: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));
-    border-color: var(--nile-colors-primary-700, var(--ng-primary-standard));
-    color: var(--nile-colors-white-base, var(--ng-colors-text-white));
+    background-color: var(--nile-colors-primary-700);
+    border-color: var(--nile-colors-primary-700);
+    color: var(--nile-colors-white-base);
   }
 
   .button--standard.button--primary:active:not(.button--disabled) {
-    background-color: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid));
-    border-color: var(--nile-colors-primary-900, var(--ng-primary-standard));
-    color: var(--nile-colors-white-base, var(--ng-colors-text-white));
+    background-color: var(--nile-colors-primary-700);
+    border-color: var(--nile-colors-primary-900);
+    color: var(--nile-colors-white-base);
+    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--primary.button--disabled {
-    background-color: var(--nile-colors-neutral-700, var(--ng-colors-bg-disabled));
-    border-color: var(--nile-colors-neutral-700, var(--ng-colors-border-disabled-subtle));
-    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));
+    background-color: var(--nile-colors-neutral-700);
+    border-color: var(--nile-colors-neutral-700);
+    color: var(--nile-colors-neutral-500);
     cursor: not-allowed;
-    box-shadow: none;
   }
 
   .button--standard.button--primary.button--disabled:hover,
   .button--standard.button--primary.button--disabled:active {
-    background-color: var(--nile-colors-neutral-700, var(--ng-colors-bg-disabled));
-    border-color: var(--nile-colors-neutral-700, var(--ng-colors-border-disabled-subtle));
-    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));
+    background-color: var(--nile-colors-neutral-700);
+    border-color: var(--nile-colors-neutral-700);
+    color: var(--nile-colors-neutral-500);
     cursor: not-allowed;
   }
 
-  .button--standard.button--primary:focus-visible:not(.button--disabled) {
-    background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));
-    border-color: var(--nile-colors-primary-600, var(--ng-primary-standard));
-    color: var(--nile-colors-white-base, var(--ng-colors-text-white));
-    box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring-shadow-xs-skeumorphic));
-  }
-
   /*  Secondary */
   .button--standard.button--secondary {
-    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));
-    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));
+    background-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-400);
+    color: var(--nile-colors-dark-900);
   }
 
   .button--standard.button--secondary:hover:not(.button--disabled) {
-    background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary-hover));
-    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));
+    background-color: var(--nile-colors-neutral-500);
+    border-color: var(--nile-colors-neutral-400);
+    color: var(--nile-colors-dark-900);
   }
 
   .button--standard.button--secondary:active:not(.button--disabled) {
-    background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));
-    border-color: var(--nile-colors-neutral-700, var(--ng-colors-border-primary));
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));
+    background-color: var(--nile-colors-neutral-500);
+    border-color: var(--nile-colors-neutral-700);
+    color: var(--nile-colors-dark-900);
   }
 
   .button--standard.button--secondary.button--disabled {
-    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));
-    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));
-    color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));
+    background-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-400);
+    color: var(--nile-colors-dark-500);
     cursor: not-allowed;
   }
 
   .button--standard.button--secondary.button--disabled:hover,
   .button--standard.button--secondary.button--disabled:active {
-    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));
-    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));
-    color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));
+    background-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-400);
+    color: var(--nile-colors-dark-500);
     cursor: not-allowed;
   }
 
-  .button--standard.button--secondary:focus-visible:not(.button--disabled) {
-    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));
-    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));
-    box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring-shadow-xs-skeumorphic));
-  }
-
   /* Tertiary */
   .button--standard.button--tertiary {
-    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
-    border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
+    background-color: var(--nile-colors-white-base);
+    border-color: var(--nile-colors-neutral-500);
+    color: var(--nile-colors-dark-900);
   }
 
   .button--standard.button--tertiary:hover:not(.button--disabled) {
-    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary-hover));
-    border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-hover));
+    background-color: var(--nile-colors-dark-200);
+    border-color: var(--nile-colors-neutral-500);
+    color: var(--nile-colors-dark-900);
   }
 
   .button--standard.button--tertiary:active:not(.button--disabled) {
-    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));
-    border-color: var(--nile-colors-neutral-700, var(--ng-colors-bg-primary));
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
+    background-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-700);
+    color: var(--nile-colors-dark-900);
   }
 
   .button--standard.button--tertiary.button--disabled,
   .button--standard.button--tertiary.button--disabled:hover,
   .button--standard.button--tertiary.button--disabled:active {
-    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
-    border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));
-    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));
+    border-color: var(--nile-colors-neutral-500);
+    background-color: var(--nile-colors-white-base);
+    color: var(--nile-colors-neutral-500);
     cursor: not-allowed;
     box-shadow: none;
   }
 
-  .button--standard.button--tertiary:focus-visible:not(.button--disabled) {
-    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
-    border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
-    box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring));
-  }
-
   /* ghost  */
   .button--standard.button--ghost {
-    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
-    border-color: var(--nile-border-color-transparent, var(--ng-colors-bg-primary)) ;
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
+    background-color: var(--nile-colors-white-base);
+    border-color: transparent;
+    color: var(--nile-colors-dark-900);
   }
 
   .button--standard.button--ghost:hover:not(.button--disabled) {
-    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary-hover));
-    border-color:  var(--nile-border-color-transparent,  var(--ng-colors-bg-primary));
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-hover));
+    background-color: var(--nile-colors-dark-200);
+    border-color: transparent;
+    color: var(--nile-colors-dark-900);
   }
 
   .button--standard.button--ghost:active:not(.button--disabled) {
-    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));
-    border-color: var(--nile-border-color-transparent, var(--ng-colors-bg-primary));
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
+    background-color: var(--nile-colors-neutral-400);
+    border-color: transparent;
+    color: var(--nile-colors-dark-900);
   }
 
   .button--standard.button--ghost.button--disabled,
   .button--standard.button--ghost.button--disabled:hover,
   .button--standard.button--ghost.button--disabled:active {
-    border-color: var(--nile-border-color-transparent,var(--ng-colors-bg-primary));
-    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
-    color: var(--nile-colors-neutral-500,var(--ng-colors-fg-disabled));
+    border-color: transparent;
+    background-color: var(--nile-colors-white-base);
+    color: var(--nile-colors-neutral-500);
     cursor: not-allowed;
     box-shadow: none;
   }
 
-  
-
   /* caution */
   .button--standard.button--caution {
     background-color: var(--nile-colors-red-500);
@@ -241,7 +213,7 @@ export const styles = css`
 
   .button--standard.button--caution:active:not(.button--disabled) {
     background-color: var(--nile-colors-red-700);
-    border-color: var(--nile-colors-red-700);
+    border-color: #820B0B;
     color: var(--nile-colors-white-base);
   }
 
@@ -255,168 +227,164 @@ export const styles = css`
 
   /* destructive */
   .button--standard.button--destructive {
-    background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));
-    border-color:  var(--nile-colors-red-500, var(--ng-primary-standard));
-    color: var(--nile-colors-white-base, var(--ng-colors-text-white));
-    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs-skeuomorphic));
+    background-color: #d92d20;
+    border-color: #d92d20;
+    color: var(--nile-colors-white-base);
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
   }
 
   .button--standard.button--destructive:hover:not(.button--disabled) {
-    background-color: var(--nile-colors-red-700, var(--ng-colors-bg-error-solid-hover));
-    border-color: var(--nile-colors-red-700, var(--ng-primary-standard));
-    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs-skeuomorphic));
+    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: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));
-    border-color:  var(--nile-colors-red-500, var(--ng-primary-standard));
-    color: var(--nile-colors-white-base, var(--ng-colors-text-white));
+    background-color: #d92d20;
+    border-color: #d92d20;
+    color: var(--nile-colors-white-base);
+    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: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));
-    border-color:  var(--nile-colors-red-500, var(--ng-primary-standard));
-    color: var(--nile-colors-white-base, var(--ng-colors-text-white));
-    box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring-error-shadow-xs-skeumorphic))
+    background-color: #d92d20;
+    border-color: #d92d20;
+    color: var(--nile-colors-white-base);
+    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: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));
-    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));
-    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));
+    background-color: #f2f4f7;
+    border-color: #eaecf0;
+    color: #98a2b3;
     cursor: not-allowed;
-    box-shadow: none;
   }
 
+  .button--standard.button--destructive.button--disabled:hover,
   .button--standard.button--destructive.button--disabled:active {
-    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));
-    border-color: var(--nile-colors-neutral-400, var(--ng-primary-standard));
-    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));
-    cursor: not-allowed;
-  }
-
-  .button--standard.button--destructive.button--disabled:hover {
-    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));
-    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));
-    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));
+    background-color: #f2f4f7;
+    border-color: #eaecf0;
+    color: #98a2b3;
     cursor: not-allowed;
   }
 
   /* secondary-Grey */
   .button--standard.button--secondary-grey {
     background-color: var(--nile-colors-white-base);
-    border-color: var(--nile-colors-neutral-500);
-    color: var(--nile-colors-primary-900);
+    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: var(--nile-colors-neutral-100);
-    border-color: var(--nile-colors-neutral-500);
-    color: var(--nile-colors-dark-900);
+    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: var(--nile-colors-white-base);
-    border-color: var(--nile-colors-neutral-500);
-    color: var(--nile-colors-primary-900);
+    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: var(--nile-colors-neutral-400);
+    background-color: #eaecf0;
     border-color: var(--nile-colors-neutral-700);
-    color: var(--nile-colors-neutral-500);
+    color: #98a2b3;
     cursor: not-allowed;
   }
 
   .button--standard.button--secondary-grey.button--disabled:hover,
   .button--standard.button--secondary-grey.button--disabled:active {
-    background-color: var(--nile-colors-neutral-400);
+    background-color: #eaecf0;
     border-color: var(--nile-colors-neutral-700);
-    color: var(--nile-colors-neutral-500);
+    color: #98a2b3;
     cursor: not-allowed;
   }
 
   /* secondary-blue */
   .button--standard.button--secondary-blue {
     background-color: var(--nile-colors-white-base);
-    border-color: var(--nile-colors-primary-500);
-    color: var(--nile-colors-primary-700);
+    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: var(--nile-colors-blue-100);
-    border-color: var(--nile-colors-primary-500);
-    color: var(--nile-colors-primary-700);
+    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: var(--nile-colors-white-base);
-    border-color: var(--nile-colors-primary-500);
-    color: var(--nile-colors-primary-700);
+    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: var(--nile-colors-white-base);
-    border-color: var(--nile-colors-neutral-400);
-    color: var(--nile-colors-neutral-500);
+    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: var(--nile-colors-white-base);
-    border-color: var(--nile-colors-neutral-400);
-    color: var(--nile-colors-neutral-500);
+    border-color: #eaecf0;
+    color: #98a2b3;
     cursor: not-allowed;
   }
 
   /* Primary Variant - Nile Icon Fill */
   .button--standard.button--primary ::slotted(nile-icon:not([color])) {
-    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-primary-icon)) !important;
+    --nile-svg-fill: var(--nile-colors-white-base) !important;
   }
   .button--standard.button--primary:hover:not(.button--disabled)
     ::slotted(nile-icon:not([color])),
   .button--standard.button--primary:active:not(.button--disabled)
     ::slotted(nile-icon:not([color])) {
-    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-primary-icon-hover)) !important;
+    --nile-svg-fill: var(--nile-colors-white-base) !important;
   }
   .button--standard.button--primary.button--disabled ::slotted(nile-icon:not([color])) {
-    --nile-svg-fill: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled-subtle)) !important;
+    --nile-svg-fill: var(--nile-colors-neutral-500) !important;
   }
 
   /* Secondary Variant */
   .button--standard.button--secondary ::slotted(nile-icon:not([color])) {
-    --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400)) !important;
+    --nile-svg-fill: var(--nile-colors-dark-900) !important;
   }
   .button--standard.button--secondary:hover:not(.button--disabled)
     ::slotted(nile-icon:not([color])),
   .button--standard.button--secondary:active:not(.button--disabled)
     ::slotted(nile-icon:not([color])) {
-    --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-hover)) !important;
+    --nile-svg-fill: var(--nile-colors-dark-900) !important;
   }
   .button--standard.button--secondary.button--disabled ::slotted(nile-icon:not([color])) {
-    --nile-svg-fill: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled-subtle)) !important;
+    --nile-svg-fill: var(--nile-colors-dark-500) !important;
   }
 
   /* Tertiary Variant */
   .button--standard.button--tertiary ::slotted(nile-icon:not([color])) {
-    --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400)) !important;
+    --nile-svg-fill: var(--nile-colors-dark-900) !important;
   }
   .button--standard.button--tertiary:hover:not(.button--disabled)
     ::slotted(nile-icon:not([color])),
   .button--standard.button--tertiary:active:not(.button--disabled)
     ::slotted(nile-icon:not([color])) {
-    --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-hover)) !important;
+    --nile-svg-fill: var(--nile-colors-dark-900) !important;
   }
   .button--standard.button--tertiary.button--disabled ::slotted(nile-icon:not([color])) {
-    --nile-svg-fill: var(--nile-colors-neutral-500, var(--ng-colors-fg-quaternary-400)) !important;
+    --nile-svg-fill: var(--nile-colors-neutral-500) !important;
   }
 
   /* Ghost Variant */
@@ -449,16 +417,16 @@ export const styles = css`
 
   /* destructive */
   .button--standard.button--destructive ::slotted(nile-icon:not([color])) {
-    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-destructive-primary-icon)) !important;
+    --nile-svg-fill: var(--nile-colors-white-base) !important;
   }
   .button--standard.button--destructive:hover:not(.button--disabled)
     ::slotted(nile-icon:not([color])),
   .button--standard.button--caution:active:not(.button--disabled)
     ::slotted(nile-icon:not([color])) {
-    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-destructive-primary-icon-hover)) !important;
+    --nile-svg-fill: var(--nile-colors-white-base) !important;
   }
   .button--standard.button--destructive.button--disabled ::slotted(nile-icon:not([color])) {
-    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-colors-fg-disabled-subtle)) !important;
+    --nile-svg-fill: var(--nile-colors-white-base) !important;
   }
 
   /*
@@ -571,21 +539,21 @@ export const styles = css`
 
   /* destructive  */
   .button--outline.button--destructive {
-    border-color: var(--nile-colors-red-400, var(--ng-colors-effects-focus-ring-error));
-    color: var(--nile-colors-red-700);
+    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: var(--nile-colors-red-400);
-    color: var(--nile-colors-red-700);
-    background-color: var(--nile-colors-red-100);
+    border-color: #fda29b;
+    color: #912018;
+    background-color: #fef3f2;
   }
 
   .button--outline.button--destructive:active:not(.button--disabled) {
-    border-color: var(--nile-colors-red-400);
-    color: var(--nile-colors-red-700);
+    border-color: #fda29b;
+    color: #b42318;
     background-color: var(--nile-colors-white-base);
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
       0px 0px 0px 4px rgba(240, 68, 56, 0.24);
@@ -593,8 +561,8 @@ export const styles = css`
 
   /* destructive - focus-visible */
   .button--outline.button--destructive:focus-visible:not(.button--disabled) {
-    border-color: var(--nile-colors-red-400, var(--ng-colors-effects-focus-ring-error));
-    color: var(--nile-colors-red-700);
+    border-color: #fda29b;
+    color: #b42318;
     background-color: var(--nile-colors-white-base);
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
       0px 0px 0px 4px rgba(240, 68, 56, 0.24);
@@ -609,8 +577,8 @@ export const styles = css`
   .button--outline.button--secondary-grey.button--checked:not(
       .button--disabled
     ) {
-    color: var(--nile-colors-primary-900);
-    background-color: var(--nile-colors-neutral-100);
+    color: #344054;
+    background-color: #f9fafb;
   }
 
   .button--outline.button--secondary-grey:active:not(.button--disabled) {
@@ -630,8 +598,8 @@ export const styles = css`
   .button--outline.button--secondary-blue.button--checked:not(
       .button--disabled
     ) {
-    color: var(--nile-colors-primary-700);
-    background-color: var(--nile-colors-blue-100);
+    color: #004678;
+    background-color: #eaf0f8;
   }
 
   .button--outline.button--secondary-blue:active:not(.button--disabled) {
@@ -653,11 +621,11 @@ export const styles = css`
  */
 
   .button--pill.button--small {
-    border-radius: var(--nile-radius-2xl);
+    border-radius: 24px;
   }
 
   .button--pill.button--medium {
-    border-radius: var(--nile-radius-2xl);
+    border-radius: 32px;
   }
 
   /*
@@ -665,8 +633,8 @@ export const styles = css`
  */
 
   .button--circle {
-    padding-left: var(--nile-spacing-none);
-    padding-right: var(--nile-spacing-none);
+    padding-left: 0;
+    padding-right: 0;
   }
 
   .button--circle.button--small {
@@ -716,7 +684,7 @@ export const styles = css`
   .button--loading nile-spinner {
     --indicator-color: currentColor;
     position: absolute;
-    font-size: var(--nile-type-scale-3);
+    font-size: 1em;
     height: 1em;
     width: 1em;
     top: calc(50% - 0.5em);

package/src/nile-button/nile-button.ts

@@ -367,8 +367,7 @@ export class NileButton extends NileElement implements NileFormControl {
                   part="caret"
                   class="button__caret"
                   color="${variantCaretColors[this.variant]}"
-                  name="var(--nile-icon-arrow-down, var(--ng-icon-chevron-down))"
-                  method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
+                  name="arrowdown"
                 ></nile-icon>
               `
             : ''}
@@ -425,8 +424,7 @@ export class NileButton extends NileElement implements NileFormControl {
                 part="caret"
                 class="button__caret"
                 color="${variantCaretColors[this.variant]}"
-                name="var(--nile-icon-arrow-down, var(--ng-icon-chevron-down))"
-                method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
+                name="arrowdown"
               ></nile-icon>
             `
           : ''}