libs/barista-components/button/src/_button-theme.scss
.dt-button {
  --dt-button-default-color: #{$turquoise-600};
  --dt-button-hover-color: #{$turquoise-700};
  --dt-button-active-color: #{$turquoise-800};
}

.dt-button.dt-color-warning {
  --dt-button-default-color: var(--dt-warning-default-color);
  --dt-button-hover-color: var(--dt-warning-hover-color);
  --dt-button-active-color: var(--dt-warning-active-color);
}

.dt-button.dt-color-cta {
  --dt-button-default-color: var(--dt-cta-default-color);
  --dt-button-hover-color: var(--dt-cta-hover-color);
  --dt-button-active-color: var(--dt-cta-active-color);
}

////////////////////////////
// Primary Button
////////////////////////////
.dt-button-primary,
a.dt-button-primary,
a.dt-button-primary:visited {
  background: var(--dt-button-default-color);
  border-color: var(--dt-button-default-color);
  color: #ffffff;

  .dt-button-icon .dt-icon svg {
    fill: #ffffff;
  }
}

.dt-button-primary:hover:not([disabled]) {
  background: var(--dt-button-hover-color);
  border-color: var(--dt-button-hover-color);
  color: #ffffff;
}

.dt-button-primary:active:not([disabled]) {
  background: var(--dt-button-active-color);
  border-color: var(--dt-button-active-color);
  color: #ffffff;
}

.dt-button-primary[disabled],
a.dt-button-primary[disabled] {
  background: $disabledcolor;
  border-color: $disabledcolor;
  color: #ffffff;

  .dt-button-icon .dt-icon svg {
    fill: #ffffff;
  }
}

.dt-theme-dark {
  .dt-button-primary,
  a.dt-button-primary:visited,
  .dt-button-primary:hover:not([disabled]),
  .dt-button-primary:active:not([disabled]) {
    border-color: #ffffff;
  }

  .dt-button-primary[disabled],
  a.dt-button-primary[disabled] {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.6);

    .dt-button-icon .dt-icon svg {
      fill: rgba(255, 255, 255, 0.6);
    }
  }
}

////////////////////////////
// Secondary Button
////////////////////////////
.dt-button-secondary,
a.dt-button-secondary,
a.dt-button-secondary:visited {
  background: transparent;
  border-color: var(--dt-button-default-color);
  color: var(--dt-button-default-color);

  .dt-button-icon .dt-icon svg {
    fill: var(--dt-button-default-color);
  }
}
.dt-button-secondary:hover:not([disabled]) {
  background: rgba(255, 255, 255, 0.2);
  border-color: var(--dt-button-hover-color);
  color: var(--dt-button-hover-color);

  .dt-button-icon .dt-icon svg {
    fill: var(--dt-button-hover-color);
  }
}
.dt-button-secondary:active:not([disabled]) {
  background: rgba(255, 255, 255, 0.2);
  border-color: var(--dt-button-active-color);
  color: var(--dt-button-active-color);

  .dt-button-icon .dt-icon svg {
    fill: var(--dt-button-active-color);
  }
}
.dt-button-secondary[disabled] {
  background: #ffffff;
  border-color: $disabledcolor;
  color: $disabledcolor;

  .dt-button-icon .dt-icon svg {
    fill: $disabledcolor;
  }
}

.dt-theme-dark {
  .dt-button-secondary,
  .dt-button-secondary[disabled],
  a.dt-button-secondary:visited {
    background: transparent;
    color: #ffffff;

    .dt-button-icon .dt-icon svg {
      fill: #ffffff;
    }
  }
  .dt-button-secondary:hover:not([disabled]) {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;

    .dt-button-icon .dt-icon svg {
      fill: #ffffff;
    }
  }
  .dt-button-secondary:active:not([disabled]) {
    background: rgba(255, 255, 255, 0.3);
    color: #ffffff;

    .dt-button-icon .dt-icon svg {
      fill: #ffffff;
    }
  }
  .dt-button-secondary[disabled] {
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.6);

    .dt-button-icon .dt-icon svg {
      fill: rgba(255, 255, 255, 0.6);
    }
  }
  .dt-button-secondary,
  a.dt-button-secondary:visited,
  .dt-button-secondary:hover:not([disabled]) {
    border-color: #ffffff;
    color: $gray-100;
  }
  a.dt-button-secondary:visited,
  .dt-button-secondary:active:not([disabled]) {
    border-color: #ffffff;
    color: #ffffff;
  }
}

////////////////////////////
// Nested Buttons
////////////////////////////
.dt-button-nested {
  .dt-button-icon .dt-icon svg {
    fill: var(--dt-button-default-color);
  }
}
.dt-button-nested:hover:not([disabled]) {
  .dt-button-icon .dt-icon svg {
    fill: var(--dt-button-hover-color);
  }
}
.dt-button-nested:active:not([disabled]) {
  .dt-button-icon .dt-icon svg {
    fill: var(--dt-button-active-color);
  }
}
.dt-button-nested[disabled] {
  .dt-button-icon .dt-icon svg {
    fill: $disabledcolor;
  }
}

.dt-theme-dark {
  .dt-button-nested,
  .dt-button-nested:hover:not([disabled]),
  .dt-button-nested:active:not([disabled]) {
    .dt-button-icon .dt-icon svg {
      fill: #ffffff;
    }
  }
  .dt-button-nested:hover:not([disabled]) {
    background: rgba(255, 255, 255, 0.2);
  }
  .dt-button-nested:active:not([disabled]) {
    background: rgba(255, 255, 255, 0.3);
  }
  .dt-button-nested[disabled] {
    .dt-button-icon .dt-icon svg {
      fill: rgba(255, 255, 255, 0.6);
    }
  }
}

////////////////////////////
// Warning & Cta Buttons
////////////////////////////

.dt-color-warning.dt-button-secondary,
.dt-color-cta.dt-button-secondary {
  background: transparent;
  border-color: var(--dt-button-default-color);
  color: var(--dt-button-default-color);

  .dt-button-icon .dt-icon svg {
    fill: var(--dt-button-default-color);
  }
}
.dt-color-warning.dt-button-secondary:hover:not([disabled]),
.dt-color-cta.dt-button-secondary:hover:not([disabled]) {
  background: $gray-100;
  border-color: var(--dt-button-hover-color);
  color: var(--dt-button-hover-color);

  .dt-button-icon .dt-icon svg {
    fill: var(--dt-button-hover-color);
  }
}
.dt-color-warning.dt-button-secondary:active:not([disabled]),
.dt-color-cta.dt-button-secondary:active:not([disabled]) {
  background: $gray-100;
  border-color: var(--dt-button-active-color);
  color: var(--dt-button-active-color);

  .dt-button-icon .dt-icon svg {
    fill: var(--dt-button-active-color);
  }
}

.dt-theme-dark {
  .dt-color-cta.dt-button-secondary,
  .dt-color-cta.dt-button-secondary[disabled],
  .dt-color-warning.dt-button-secondary,
  .dt-color-warning.dt-button-secondary[disabled] {
    background: transparent;
    color: #ffffff;

    .dt-button-icon .dt-icon svg {
      fill: #ffffff;
    }
  }
  .dt-color-cta.dt-button-secondary:hover:not([disabled]),
  .dt-color-warning.dt-button-secondary:hover:not([disabled]) {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;

    .dt-button-icon .dt-icon svg {
      fill: #ffffff;
    }
  }
  .dt-color-cta.dt-button-secondary:active:not([disabled]),
  .dt-color-warning.dt-button-secondary:active:not([disabled]) {
    background: rgba(255, 255, 255, 0.3);
    color: #ffffff;

    .dt-button-icon .dt-icon svg {
      fill: #ffffff;
    }
  }
  .dt-color-cta.dt-button-secondary[disabled],
  .dt-color-warning.dt-button-secondary[disabled] {
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.6);

    .dt-button-icon .dt-icon svg {
      fill: rgba(255, 255, 255, 0.6);
    }
  }
}
