@fesjs/fes-design/es/text/style/index.less

fes-design for PC

@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './mixin.less';

@text-prefix-cls: ~'@{cls-prefix}-text';

@text-color-base: var(--f-text-color);
@text-color-success: var(--f-success-color);
@text-color-info: var(--f-primary-color);
@text-color-warning: var(--f-warning-color);
@text-color-danger: var(--f-danger-color);
@text-color-tag-mark: var(--f-primary-color);

@text-font-size-sm: @font-size-caption;
@text-font-size-lg: @font-size-head;

.@{text-prefix-cls} {
    --f-text-text-color: @text-color-base;
    --f-text-font-size: var(--f-font-size-base);

    .default();
    .text();

    color: var(--f-text-text-color);
    font-size: var(--f-text-font-size);

    &-type--success {
        --f-text-text-color: @text-color-success;
    }
    &-type--info {
        --f-text-text-color: @text-color-info;
    }
    &-type--warning {
        --f-text-text-color: @text-color-warning;
    }
    &-type--danger {
        --f-text-text-color: @text-color-danger;
    }

    &-size--small {
        --f-text-font-size: @text-font-size-sm;
    }
    &-size--large {
        --f-text-font-size: @text-font-size-lg;
    }

    &-text--strong {
        font-weight: @font-weight-medium;
    }
    &-text--italic {
        font-style: italic
    }
    &-tag--mark {
        --f-text-text-color: @text-color-tag-mark;
        background:var(--f-hover-color-light) ;
    }

    &-gradient {
        -webkit-background-clip:text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}