_colors.scss

$white: #fff !default;
$white-50: rgba(255, 255, 255, .5) !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black: #000 !default;
$black-0: rgba(0, 0, 0, 0) !default;
$black-3: rgba(0, 0, 0, .03) !default;
$black-12-5: rgba(0, 0, 0, .125) !default;
$black-15: rgba(0, 0, 0, .15) !default;
$black-25: rgba(0, 0, 0, .25) !default;
$black-50: rgba(0, 0, 0, .5) !default;

$blue: #0071bc !default;
$indigo: #6610f2 !default;
$purple: #6f42c1 !default;
$pink: #d63384 !default;
$red: #dc3545 !default;
$orange: #fd7e14 !default;
$yellow: #ffc107 !default;
$green: #28a745 !default;
$teal: #20c997 !default;
$cyan: #17a2b8 !default;

$semantic-colors: (
  "primary": $blue,
  "secondary": $gray-600,
  "success": $green,
  "info": $cyan,
  "warning": #f0b37e,
  "danger": $red,
  "light": $gray-100,
  "muted": $gray-600,
  "dark": $gray-900,
  "black": black,
  "white": white,
) !default;

@function text-color($value) {
  @return if(lightness($value) > 70, $gray-900, $white);
}

@each $color, $value in $semantic-colors {
  .sd-bg-#{$color} {
    background-color: var(--sd-color-#{$color}) !important;
  }
  .sd-bg-text-#{$color} {
    color: var(--sd-color-#{$color}-text) !important;
  }
  button {
    &.sd-bg-#{$color}:focus,
    &.sd-bg-#{$color}:hover {
      background-color: var(--sd-color-#{$color}-highlight) !important;
    }
  }
  a {
    &.sd-bg-#{$color}:focus,
    &.sd-bg-#{$color}:hover {
      background-color: var(--sd-color-#{$color}-highlight) !important;
    }
  }
}

@each $color, $value in $semantic-colors {
  .sd-text-#{$color}, .sd-text-#{$color} > p {
    color: var(--sd-color-#{$color}) !important;
  }
  a {
    &.sd-text-#{$color}:focus,
    &.sd-text-#{$color}:hover {
      color: var(--sd-color-#{$color}-highlight) !important;
    }
  }
}

@each $color, $value in $semantic-colors {
  .sd-outline-#{$color} {
    border-color: var(--sd-color-#{$color}) !important;
    border-style: solid !important;
    border-width: 1px !important;
  }
  a {
    &.sd-outline-#{$color}:focus,
    &.sd-outline-#{$color}:hover {
      border-color: var(--sd-color-#{$color}-highlight) !important;
    }
  }
}

// transparent color
.sd-bg-transparent {
  background-color: transparent !important;
}
.sd-outline-transparent {
  border-color: transparent !important;
}
.sd-text-transparent {
  color: transparent !important;
}