naive-ui/styles/GradientText.scss

@import './mixins/mixins.scss';
@import './themes/vars.scss';

@mixin gradient-text-type-mixin ($type) {
  @include m($type + '-type') {
    background-image: map-get($--gradient-text-background-image, $type);
  }
}

@include themes-mixin {
  @include b(gradient-text) {
    @include once {
      font-weight: 700;
      font-size: inherit;
      // background-image: $default-text-gradient;
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
    }
    @include gradient-text-type-mixin(default);
    @include gradient-text-type-mixin(success);
    @include gradient-text-type-mixin(warning);
    @include gradient-text-type-mixin(error);
    @include gradient-text-type-mixin(info);

    // &.n-gradient-text--default-type {
    //   background-image: $default-text-gradient;
    //   // -webkit-background-clip: text;
    //   // background-clip: text;
    // }
    // &.n-gradient-text--warning-type {
    //   background-image: $default-text-gradient-warning;
    //   // -webkit-background-clip: text;
    //   // background-clip: text;
    // }
    // &.n-gradient-text--danger-type {
    //   background-image: $default-text-gradient-danger;
    //   // -webkit-background-clip: text;
    //   // background-clip: text;
    // }
    // &.n-gradient-text--success-type {
    //   background-image: $default-text-gradient-success;
    //   // -webkit-background-clip: text;
    //   // background-clip: text;
    // }
  }
}