libs/barista-components/icon/src/icon.scss
@import '../../core/src/style/variables';

.dt-icon {
  display: inline-block;
  height: 100%;
  width: 100%;
}

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

.dt-icon.dt-color-main {
  --dt-icon-color: var(--dt-theme-main-default-color);
}
.dt-icon.dt-color-accent {
  --dt-icon-color: var(--dt-accent-default-color);
}
.dt-icon.dt-color-warning {
  --dt-icon-color: var(--dt-warning-default-color);
}
.dt-icon.dt-color-error {
  --dt-icon-color: var(--dt-error-default-color);
}
.dt-icon.dt-color-cta {
  --dt-icon-color: var(--dt-cta-default-color);
}
.dt-icon.dt-color-light {
  --dt-icon-color: #{$white};
}
.dt-icon.dt-color-dark {
  --dt-icon-color: #{$gray-300};
}
.dt-icon.dt-color-critical {
  --dt-icon-color: var(--dt-critical-default-color);
}
.dt-icon.dt-color-recovered {
  --dt-icon-color: var(--dt-recovered-default-color);
}

.dt-theme-dark {
  .dt-icon.dt-color-main,
  .dt-icon.dt-color-accent,
  .dt-icon.dt-color-warning,
  .dt-icon.dt-color-error,
  .dt-icon.dt-color-cta,
  .dt-icon.dt-color-light,
  .dt-icon.dt-color-dark,
  .dt-icon.dt-color-critical,
  .dt-icon.dt-color-recovered {
    --dt-icon-color: #{$white};
  }
}
