@aquera/nile-elements 0.1.38 → 0.1.39-beta-1.0

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

@@ -23,28 +23,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-sm, var(--ng-spacing-xs));
+    line-height: var(--nile-line-height-small);
     box-sizing: border-box;
-    height: 40px;
+    height: var(--nile-height-40px, var(--ng-height-40px));
   }
 
   .button::-moz-focus-inner {
@@ -56,8 +56,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 {
@@ -71,104 +71,127 @@ 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(--nile-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)
+    );
   }
 
   .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(--nile-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(--nile-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(--nile-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);
@@ -213,7 +236,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);
   }
 
@@ -227,164 +250,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(--nile-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(--nile-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(--nile-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(--nile-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(--nile-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 */
@@ -417,16 +444,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;
   }
 
   /*
@@ -539,21 +566,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);
@@ -561,8 +588,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);
@@ -577,8 +604,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) {
@@ -598,8 +625,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) {
@@ -621,11 +648,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);
   }
 
   /*
@@ -633,8 +660,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 {
@@ -684,7 +711,7 @@ export const styles = css`
   .button--loading nile-spinner {
     --indicator-color: currentColor;
     position: absolute;
-    font-size: 1em;
+    font-size: var(--nile-type-scale-4);
     height: 1em;
     width: 1em;
     top: calc(50% - 0.5em);

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

@@ -24,10 +24,10 @@ export const styles = css`
     color: var(--nile-colors-dark-900);
     text-align: center;
     font-feature-settings: 'clig' off, 'liga' off;
-    font-family: Colfax-regular;
+    font-family: var(--nile-font-family-serif);
     font-size: var(--nile-font-size-base);
     font-style: normal;
-    font-weight: 600;
+    font-weight: var(--nile-font-weight-semi-bold);
     line-height: var(--nile-font-size-base); /* 100% */
     letter-spacing: 0.2px;
   }