@aquera/nile-elements 0.1.46-beta-1.5 → 0.1.46-beta-1.6

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

@@ -14,6 +14,9 @@ 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 {
@@ -21,28 +24,28 @@ export const styles = css `
     align-items: center;
     justify-content: center;
     border-style: solid;
-    border-width: 1px;
+    border-width: var(--nile-border-size-1, var(--ng-border-width-1));
     font-style: normal;
-    font-family: var(--nile-font-family-serif);
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
     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) background-color,
-      var(--nile-transition-duration-default) color,
-      var(--nile-transition-duration-default) border,
-      var(--nile-transition-duration-default) box-shadow;
+    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;
     cursor: inherit;
-    font-size: 14px;
-    font-weight: 500;
-    border-radius: var(--nile-radius-base-standard);
-    padding: 10px 14px;
-    gap: 5px;
-    line-height: 20px;
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-600));
+    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));
     box-sizing: border-box;
-    height: 40px;
+    height: var(--nile-height-40px, var(--ng-height-40px));
   }
 
   .button::-moz-focus-inner {
@@ -54,8 +57,8 @@ export const styles = css `
   }
 
   .button:focus-visible {
-    outline: 5px auto -webkit-focus-ring-color;
-    outline-offset: 2px;
+    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);
   }
 
   .button--disabled {
@@ -69,133 +72,158 @@ export const styles = css `
 
   /* Primary */
   .button--standard.button--primary {
-    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);
+    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
   }
 
   .button--standard.button--primary:hover:not(.button--disabled) {
-    background-color: var(--nile-colors-primary-700);
-    border-color: var(--nile-colors-primary-700);
-    color: var(--nile-colors-white-base);
+    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));
   }
 
   .button--standard.button--primary:active:not(.button--disabled) {
-    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);
+    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));
   }
 
   .button--standard.button--primary.button--disabled {
-    background-color: var(--nile-colors-neutral-700);
-    border-color: var(--nile-colors-neutral-700);
-    color: var(--nile-colors-neutral-500);
+    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));
     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);
-    border-color: var(--nile-colors-neutral-700);
-    color: var(--nile-colors-neutral-500);
+    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));
     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);
-    border-color: var(--nile-colors-neutral-400);
-    color: var(--nile-colors-dark-900);
+    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));
   }
 
   .button--standard.button--secondary:hover:not(.button--disabled) {
-    background-color: var(--nile-colors-neutral-500);
-    border-color: var(--nile-colors-neutral-400);
-    color: var(--nile-colors-dark-900);
+    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));
   }
 
   .button--standard.button--secondary:active:not(.button--disabled) {
-    background-color: var(--nile-colors-neutral-500);
-    border-color: var(--nile-colors-neutral-700);
-    color: var(--nile-colors-dark-900);
+    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));
   }
 
   .button--standard.button--secondary.button--disabled {
-    background-color: var(--nile-colors-neutral-400);
-    border-color: var(--nile-colors-neutral-400);
-    color: var(--nile-colors-dark-500);
+    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));
     cursor: not-allowed;
   }
 
   .button--standard.button--secondary.button--disabled:hover,
   .button--standard.button--secondary.button--disabled:active {
-    background-color: var(--nile-colors-neutral-400);
-    border-color: var(--nile-colors-neutral-400);
-    color: var(--nile-colors-dark-500);
+    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));
     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);
-    border-color: var(--nile-colors-neutral-500);
-    color: var(--nile-colors-dark-900);
+    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));
   }
 
   .button--standard.button--tertiary:hover:not(.button--disabled) {
-    background-color: var(--nile-colors-dark-200);
-    border-color: var(--nile-colors-neutral-500);
-    color: var(--nile-colors-dark-900);
+    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));
   }
 
   .button--standard.button--tertiary:active:not(.button--disabled) {
-    background-color: var(--nile-colors-neutral-400);
-    border-color: var(--nile-colors-neutral-700);
-    color: var(--nile-colors-dark-900);
+    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));
   }
 
   .button--standard.button--tertiary.button--disabled,
   .button--standard.button--tertiary.button--disabled:hover,
   .button--standard.button--tertiary.button--disabled:active {
-    border-color: var(--nile-colors-neutral-500);
-    background-color: var(--nile-colors-white-base);
-    color: var(--nile-colors-neutral-500);
+    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));
     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);
-    border-color: transparent;
-    color: var(--nile-colors-dark-900);
+    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));
   }
 
   .button--standard.button--ghost:hover:not(.button--disabled) {
-    background-color: var(--nile-colors-dark-200);
-    border-color: transparent;
-    color: var(--nile-colors-dark-900);
+    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));
   }
 
   .button--standard.button--ghost:active:not(.button--disabled) {
-    background-color: var(--nile-colors-neutral-400);
-    border-color: transparent;
-    color: var(--nile-colors-dark-900);
+    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));
   }
 
   .button--standard.button--ghost.button--disabled,
   .button--standard.button--ghost.button--disabled:hover,
   .button--standard.button--ghost.button--disabled:active {
-    border-color: transparent;
-    background-color: var(--nile-colors-white-base);
-    color: var(--nile-colors-neutral-500);
+    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));
     cursor: not-allowed;
     box-shadow: none;
   }
 
+  
+
   /* caution */
   .button--standard.button--caution {
     background-color: var(--nile-colors-red-500);
@@ -211,7 +239,7 @@ export const styles = css `
 
   .button--standard.button--caution:active:not(.button--disabled) {
     background-color: var(--nile-colors-red-700);
-    border-color: #820B0B;
+    border-color: var(--nile-colors-red-700);
     color: var(--nile-colors-white-base);
   }
 
@@ -225,164 +253,168 @@ export const styles = css `
 
   /* destructive */
   .button--standard.button--destructive {
-    background-color: #d92d20;
-    border-color: #d92d20;
-    color: var(--nile-colors-white-base);
-    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    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));
   }
 
   .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);
+    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));
   }
 
   .button--standard.button--destructive:active:not(.button--disabled) {
-    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);
+    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));
   }
   .button--standard.button--destructive:focus-visible:not(.button--disabled) {
-    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);
+    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))
   }
 
   .button--standard.button--destructive.button--disabled {
-    background-color: #f2f4f7;
-    border-color: #eaecf0;
-    color: #98a2b3;
+    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));
     cursor: not-allowed;
+    box-shadow: none;
   }
 
-  .button--standard.button--destructive.button--disabled:hover,
   .button--standard.button--destructive.button--disabled:active {
-    background-color: #f2f4f7;
-    border-color: #eaecf0;
-    color: #98a2b3;
+    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));
     cursor: not-allowed;
   }
 
   /* secondary-Grey */
   .button--standard.button--secondary-grey {
     background-color: var(--nile-colors-white-base);
-    border-color: #d0d5dd;
-    color: #344054;
+    border-color: var(--nile-colors-neutral-500);
+    color: var(--nile-colors-primary-900);
     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;
+    background-color: var(--nile-colors-neutral-100);
+    border-color: var(--nile-colors-neutral-500);
+    color: var(--nile-colors-dark-900);
     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: #d0d5dd;
-    color: #344054;
+    border-color: var(--nile-colors-neutral-500);
+    color: var(--nile-colors-primary-900);
     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;
+    background-color: var(--nile-colors-neutral-400);
     border-color: var(--nile-colors-neutral-700);
-    color: #98a2b3;
+    color: var(--nile-colors-neutral-500);
     cursor: not-allowed;
   }
 
   .button--standard.button--secondary-grey.button--disabled:hover,
   .button--standard.button--secondary-grey.button--disabled:active {
-    background-color: #eaecf0;
+    background-color: var(--nile-colors-neutral-400);
     border-color: var(--nile-colors-neutral-700);
-    color: #98a2b3;
+    color: var(--nile-colors-neutral-500);
     cursor: not-allowed;
   }
 
   /* secondary-blue */
   .button--standard.button--secondary-blue {
     background-color: var(--nile-colors-white-base);
-    border-color: #85aad1;
-    color: #005291;
+    border-color: var(--nile-colors-primary-500);
+    color: var(--nile-colors-primary-700);
     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;
+    background-color: var(--nile-colors-blue-100);
+    border-color: var(--nile-colors-primary-500);
+    color: var(--nile-colors-primary-700);
     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: #85aad1;
-    color: #005291;
+    border-color: var(--nile-colors-primary-500);
+    color: var(--nile-colors-primary-700);
     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: #eaecf0;
-    color: #98a2b3;
+    border-color: var(--nile-colors-neutral-400);
+    color: var(--nile-colors-neutral-500);
     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: #eaecf0;
-    color: #98a2b3;
+    border-color: var(--nile-colors-neutral-400);
+    color: var(--nile-colors-neutral-500);
     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) !important;
+    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-primary-icon)) !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) !important;
+    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-primary-icon-hover)) !important;
   }
   .button--standard.button--primary.button--disabled ::slotted(nile-icon:not([color])) {
-    --nile-svg-fill: var(--nile-colors-neutral-500) !important;
+    --nile-svg-fill: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled-subtle)) !important;
   }
 
   /* Secondary Variant */
   .button--standard.button--secondary ::slotted(nile-icon:not([color])) {
-    --nile-svg-fill: var(--nile-colors-dark-900) !important;
+    --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400)) !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) !important;
+    --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-hover)) !important;
   }
   .button--standard.button--secondary.button--disabled ::slotted(nile-icon:not([color])) {
-    --nile-svg-fill: var(--nile-colors-dark-500) !important;
+    --nile-svg-fill: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled-subtle)) !important;
   }
 
   /* Tertiary Variant */
   .button--standard.button--tertiary ::slotted(nile-icon:not([color])) {
-    --nile-svg-fill: var(--nile-colors-dark-900) !important;
+    --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400)) !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) !important;
+    --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-hover)) !important;
   }
   .button--standard.button--tertiary.button--disabled ::slotted(nile-icon:not([color])) {
-    --nile-svg-fill: var(--nile-colors-neutral-500) !important;
+    --nile-svg-fill: var(--nile-colors-neutral-500, var(--ng-colors-fg-quaternary-400)) !important;
   }
 
   /* Ghost Variant */
@@ -415,16 +447,16 @@ export const styles = css `
 
   /* destructive */
   .button--standard.button--destructive ::slotted(nile-icon:not([color])) {
-    --nile-svg-fill: var(--nile-colors-white-base) !important;
+    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-destructive-primary-icon)) !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) !important;
+    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-destructive-primary-icon-hover)) !important;
   }
   .button--standard.button--destructive.button--disabled ::slotted(nile-icon:not([color])) {
-    --nile-svg-fill: var(--nile-colors-white-base) !important;
+    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-colors-fg-disabled-subtle)) !important;
   }
 
   /*
@@ -537,21 +569,21 @@ export const styles = css `
 
   /* destructive  */
   .button--outline.button--destructive {
-    border-color: #fda29b;
-    color: #b42318;
+    border-color: var(--nile-colors-red-400, var(--ng-colors-effects-focus-ring-error));
+    color: var(--nile-colors-red-700);
     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;
+    border-color: var(--nile-colors-red-400);
+    color: var(--nile-colors-red-700);
+    background-color: var(--nile-colors-red-100);
   }
 
   .button--outline.button--destructive:active:not(.button--disabled) {
-    border-color: #fda29b;
-    color: #b42318;
+    border-color: var(--nile-colors-red-400);
+    color: var(--nile-colors-red-700);
     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);
@@ -559,8 +591,8 @@ export const styles = css `
 
   /* destructive - focus-visible */
   .button--outline.button--destructive:focus-visible:not(.button--disabled) {
-    border-color: #fda29b;
-    color: #b42318;
+    border-color: var(--nile-colors-red-400, var(--ng-colors-effects-focus-ring-error));
+    color: var(--nile-colors-red-700);
     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);
@@ -575,8 +607,8 @@ export const styles = css `
   .button--outline.button--secondary-grey.button--checked:not(
       .button--disabled
     ) {
-    color: #344054;
-    background-color: #f9fafb;
+    color: var(--nile-colors-primary-900);
+    background-color: var(--nile-colors-neutral-100);
   }
 
   .button--outline.button--secondary-grey:active:not(.button--disabled) {
@@ -596,8 +628,8 @@ export const styles = css `
   .button--outline.button--secondary-blue.button--checked:not(
       .button--disabled
     ) {
-    color: #004678;
-    background-color: #eaf0f8;
+    color: var(--nile-colors-primary-700);
+    background-color: var(--nile-colors-blue-100);
   }
 
   .button--outline.button--secondary-blue:active:not(.button--disabled) {
@@ -619,11 +651,11 @@ export const styles = css `
  */
 
   .button--pill.button--small {
-    border-radius: 24px;
+    border-radius: var(--nile-radius-2xl);
   }
 
   .button--pill.button--medium {
-    border-radius: 32px;
+    border-radius: var(--nile-radius-2xl);
   }
 
   /*
@@ -631,8 +663,8 @@ export const styles = css `
  */
 
   .button--circle {
-    padding-left: 0;
-    padding-right: 0;
+    padding-left: var(--nile-spacing-none);
+    padding-right: var(--nile-spacing-none);
   }
 
   .button--circle.button--small {
@@ -682,7 +714,7 @@ export const styles = css `
   .button--loading nile-spinner {
     --indicator-color: currentColor;
     position: absolute;
-    font-size: 1em;
+    font-size: var(--nile-type-scale-3);
     height: 1em;
     width: 1em;
     top: calc(50% - 0.5em);