22

✏️ Editing: vc_tta-colors.less

/* Colors for TTA
 * ========================== */

// Blue Color
// ------------------------
.vc_tta-make-colors-set(~'vc_tta-color-blue';
@color:             @vc_tta-color-blue;
@background:        @vc_tta-color-blue-bg;
@background-border: @vc_tta-color-blue-bg-border;
@border:            @vc_tta-color-blue-border;
@text:              @vc_tta-color-blue-text;
@contrast:          @vc_tta-color-blue-contrast;
@content:           @vc_tta-color-blue-content;
);

// Turquoise Color
// ------------------------
.vc_tta-make-colors-set(~'vc_tta-color-turquoise';
@color:             @vc_tta-color-turquoise;
@background:        @vc_tta-color-turquoise-bg;
@background-border: @vc_tta-color-turquoise-bg-border;
@border:            @vc_tta-color-turquoise-border;
@text:              @vc_tta-color-turquoise-text;
@contrast:          @vc_tta-color-turquoise-contrast;
@content:           @vc_tta-color-turquoise-content;
);

// Pink Color
// ------------------------
.vc_tta-make-colors-set(~'vc_tta-color-pink';
@color:             @vc_tta-color-pink;
@background:        @vc_tta-color-pink-bg;
@background-border: @vc_tta-color-pink-bg-border;
@border:            @vc_tta-color-pink-border;
@text:              @vc_tta-color-pink-text;
@contrast:          @vc_tta-color-pink-contrast;
@content:           @vc_tta-color-pink-content;
);

// Violet Color
// ------------------------
.vc_tta-make-colors-set(~'vc_tta-color-violet';
@color:             @vc_tta-color-violet;
@background:        @vc_tta-color-violet-bg;
@background-border: @vc_tta-color-violet-bg-border;
@border:            @vc_tta-color-violet-border;
@text:              @vc_tta-color-violet-text;
@contrast:          @vc_tta-color-violet-contrast;
@content:           @vc_tta-color-violet-content;
);

// Peacoc Color
// ------------------------
.vc_tta-make-colors-set(~'vc_tta-color-peacoc';
@color:             @vc_tta-color-peacoc;
@background:        @vc_tta-color-peacoc-bg;
@background-border: @vc_tta-color-peacoc-bg-border;
@border:            @vc_tta-color-peacoc-border;
@text:              @vc_tta-color-peacoc-text;
@contrast:          @vc_tta-color-peacoc-contrast;
@content:           @vc_tta-color-peacoc-content;
);
// chino
.vc_tta-make-colors-set(~'vc_tta-color-chino';
@color:             @vc_tta-color-chino;
@background:        @vc_tta-color-chino-bg;
@background-border: @vc_tta-color-chino-bg-border;
@border:            @vc_tta-color-chino-border;
@text:              @vc_tta-color-chino-text;
@contrast:          @vc_tta-color-chino-contrast;
@content:           @vc_tta-color-chino-content;
);

// Mulled Wine Color
// ------------------------
.vc_tta-make-colors-set(~'vc_tta-color-mulled-wine';
@color:             @vc_tta-color-mulled-wine;
@background:        @vc_tta-color-mulled-wine-bg;
@background-border: @vc_tta-color-mulled-wine-bg-border;
@border:            @vc_tta-color-mulled-wine-border;
@text:              @vc_tta-color-mulled-wine-text;
@contrast:          @vc_tta-color-mulled-wine-contrast;
@content:           @vc_tta-color-mulled-wine-content;
);

// Vista Blue Color
// ------------------------
.vc_tta-make-colors-set(~'vc_tta-color-vista-blue';
@color:             @vc_tta-color-vista-blue;
@background:        @vc_tta-color-vista-blue-bg;
@background-border: @vc_tta-color-vista-blue-bg-border;
@border:            @vc_tta-color-vista-blue-border;
@text:              @vc_tta-color-vista-blue-text;
@contrast:          @vc_tta-color-vista-blue-contrast;
@content:           @vc_tta-color-vista-blue-content;
);

// Orange Color
// ------------------------
.vc_tta-make-colors-set(~'vc_tta-color-orange';
@color:             @vc_tta-color-orange;
@background:        @vc_tta-color-orange-bg;
@background-border: @vc_tta-color-orange-bg-border;
@border:            @vc_tta-color-orange-border;
@text:              @vc_tta-color-orange-text;
@contrast:          @vc_tta-color-orange-contrast;
@content:           @vc_tta-color-orange-content;
);

// Sky Color
// ------------------------
.vc_tta-make-colors-set(~'vc_tta-color-sky';
@color:             @vc_tta-color-sky;
@background:        @vc_tta-color-sky-bg;
@background-border: @vc_tta-color-sky-bg-border;
@border:            @vc_tta-color-sky-border;
@text:              @vc_tta-color-sky-text;
@contrast:          @vc_tta-color-sky-contrast;
@content:           @vc_tta-color-sky-content;
);

// Green Color
// ------------------------
.vc_tta-make-colors-set(~'vc_tta-color-green';
@color:             @vc_tta-color-green;
@background:        @vc_tta-color-green-bg;
@background-border: @vc_tta-color-green-bg-border;
@border:            @vc_tta-color-green-border;
@text:              @vc_tta-color-green-text;
@contrast:          @vc_tta-color-green-contrast;
@content:           @vc_tta-color-green-content;
);

// Juicy Pink Color
// ------------------------
.vc_tta-make-colors-set(~'vc_tta-color-juicy-pink';
@color:             @vc_tta-color-juicy-pink;
@background:        @vc_tta-color-juicy-pink-bg;
@background-border: @vc_tta-color-juicy-pink-bg-border;
@border:            @vc_tta-color-juicy-pink-border;
@text:              @vc_tta-color-juicy-pink-text;
@contrast:          @vc_tta-color-juicy-pink-contrast;
@content:           @vc_tta-color-juicy-pink-content;
);

// Sandy Brown Color
// ------------------------
.vc_tta-make-colors-set(~'vc_tta-color-sandy-brown';
@color:             @vc_tta-color-sandy-brown;
@background:        @vc_tta-color-sandy-brown-bg;
@background-border: @vc_tta-color-sandy-brown-bg-border;
@border:            @vc_tta-color-sandy-brown-border;
@text:              @vc_tta-color-sandy-brown-text;
@contrast:          @vc_tta-color-sandy-brown-contrast;
@content:           @vc_tta-color-sandy-brown-content;
);

// Purple Color
// ------------------------
.vc_tta-make-colors-set(~'vc_tta-color-purple';
@color:             @vc_tta-color-purple;
@background:        @vc_tta-color-purple-bg;
@background-border: @vc_tta-color-purple-bg-border;
@border:            @vc_tta-color-purple-border;
@text:              @vc_tta-color-purple-text;
@contrast:          @vc_tta-color-purple-contrast;
@content:           @vc_tta-color-purple-content;
);

// Black Color
// ------------------------
.vc_tta-make-colors-set(~'vc_tta-color-black';
@color:             @vc_tta-color-black;
@background:        @vc_tta-color-black-bg;
@background-border: @vc_tta-color-black-bg-border;
@border:            @vc_tta-color-black-border;
@text:              @vc_tta-color-black-text;
@contrast:          @vc_tta-color-black-contrast;
@content:           @vc_tta-color-black-content;
);

// Grey Color
// ------------------------
.vc_tta-color-grey {
  // Classic Style
  // ------------------------
  &.vc_tta-style-classic {
    .vc_tta-make-panel-color(
    @border: @vc_tta-common-border-color;
    @border-active: @vc_tta-common-border-color;
    @background: @vc_tta-common-background-color;
    @background-active: @vc_tta-common-background-color;
    @text: @vc_tta-color-grey-contrast;
    @text-active: @vc_tta-color-grey-text;
    );
    .vc_tta-make-tabs-color(
    @border: @vc_tta-color-grey-border;
    @border-active: @vc_tta-color-grey-bg-border;
    @background: @vc_tta-color-grey;
    @background-active: @vc_tta-color-grey-bg;
    @text: @vc_tta-color-grey-contrast;
    @text-active: @vc_tta-color-grey-text;
    );
  }

// Modern Style
  // ------------------------
  &.vc_tta-style-modern {
    .vc_tta-make-panel-color(
    @border: @vc_tta-common-border-color;
    @border-active: @vc_tta-common-border-color;
    @background: @vc_tta-common-background-color;
    @background-active: @vc_tta-common-background-color;
    @text: @vc_tta-color-grey-contrast;
    @text-active: @vc_tta-color-grey-text;
    );
    .vc_tta-make-tabs-color(
    @border: @vc_tta-color-grey-border;
    @border-active: @vc_tta-color-grey-bg-border;
    @background: @vc_tta-color-grey;
    @background-active: @vc_tta-color-grey-bg;
    @text: @vc_tta-color-grey-contrast;
    @text-active: @vc_tta-color-grey-text;
    );
  }

// Outline Style
  // ------------------------
  &.vc_tta-style-outline {
    .vc_tta-make-panel-color(
    @text: @vc_tta-color-grey;
    @text-hover: @vc_tta-color-grey-contrast;
    @text-active: @vc_tta-color-grey;
    @border: @vc_tta-color-grey-border;
    @border-active: @vc_tta-color-grey;
    @background: transparent;
    @background-active: transparent;
    @background-hover: @vc_tta-color-grey;
    );
    .vc_tta-make-tabs-color(
    @text: @vc_tta-color-grey;
    @text-hover: @vc_tta-color-grey-contrast;
    @text-active: @vc_tta-color-grey;
    @border: @vc_tta-color-grey-border;
    @border-active: @vc_tta-color-grey;
    @background: transparent;
    @background-active: transparent;
    @background-hover: @vc_tta-color-grey;
    );
  }

// Flat Style
  // ------------------------
  &.vc_tta-style-flat {
    .vc_tta-make-panel-color(
    @background: @vc_tta-common-background-color;
    @background-active: @vc_tta-common-background-color;
    @text: @vc_tta-color-grey-contrast;
    @text-active: @vc_tta-color-grey-contrast;
    @content-color: @vc_tta-color-grey-contrast;
    );
    .vc_tta-make-tabs-color(
    @background: darken(@vc_tta-color-grey, 3%);
    @background-active: @vc_tta-color-grey;
    @background-hover: darken(@vc_tta-color-grey, 6%);
    @text: @vc_tta-color-grey-contrast;
    @text-active: @vc_tta-color-grey-contrast;
    @content-color: @vc_tta-color-grey-contrast;
    );
  }
}

// White Color
// ------------------------
.vc_tta-color-white {
  // Classic Style
  // ------------------------
  &.vc_tta-style-classic {
    .vc_tta-make-panel-color(
    @border: @vc_tta-color-white-border;
    @border-active: @vc_tta-color-white-border;
    @background: @vc_tta-color-white;
    @background-active: @vc_tta-color-white;
    @text: @vc_tta-color-white-contrast;
    @text-active: @vc_tta-color-white-text;
    );
    .vc_tta-make-tabs-color(
    @border: @vc_tta-color-white-border;
    @border-active: @vc_tta-color-white-bg-border;
    @background: @vc_tta-color-white;
    @background-active: @vc_tta-color-white-bg;
    @text: @vc_tta-color-white-contrast;
    @text-active: @vc_tta-color-white-text;
    );
  }

// Modern Style
  // ------------------------
  &.vc_tta-style-modern {
    .vc_tta-make-panel-color(
    @border: @vc_tta-color-white-border;
    @border-active: @vc_tta-color-white-border;
    @background: @vc_tta-color-white;
    @background-active: @vc_tta-color-white;
    @text: @vc_tta-color-white-contrast;
    @text-active: @vc_tta-color-white-text;
    );
    .vc_tta-make-tabs-color(
    @border: @vc_tta-color-white-border;
    @border-active: @vc_tta-color-white-bg-border;
    @background: @vc_tta-color-white;
    @background-active: @vc_tta-color-white-bg;
    @text: @vc_tta-color-white-contrast;
    @text-active: @vc_tta-color-white-text;
    );
  }

// Outline Style
  // ------------------------
  &.vc_tta-style-outline {
    .vc_tta-make-panel-color(
    @text: @vc_tta-color-white;
    @text-hover: @vc_tta-color-white-contrast;
    @text-active: @vc_tta-color-white;
    @border: @vc_tta-color-white-border;
    @border-active: @vc_tta-color-white;
    @background: transparent;
    @background-active: transparent;
    @background-hover: @vc_tta-color-white;
    );
    .vc_tta-make-tabs-color(
    @text: @vc_tta-color-white;
    @text-hover: @vc_tta-color-white-contrast;
    @text-active: @vc_tta-color-white;
    @border: @vc_tta-color-white-border;
    @border-active: @vc_tta-color-white;
    @background: transparent;
    @background-active: transparent;
    @background-hover: @vc_tta-color-white;
    );
  }

// Flat Style
  // ------------------------
  &.vc_tta-style-flat {
    .vc_tta-make-panel-color(
    @background: darken(@vc_tta-color-white, 2%);
    @background-active: @vc_tta-color-white;
    @background-hover: darken(@vc_tta-color-white, 5%);
    @text: @vc_tta-color-white-contrast;
    @text-active: @vc_tta-color-white-contrast;
    @content-color: @vc_tta-color-white-contrast;
    );
    .vc_tta-make-tabs-color(
    @background: darken(@vc_tta-color-white, 2%);
    @background-active: @vc_tta-color-white;
    @background-hover: darken(@vc_tta-color-white, 5%);
    @text: @vc_tta-color-white-contrast;
    @text-active: @vc_tta-color-white-contrast;
    @content-color: @vc_tta-color-white-contrast;
    );
  }
}

MR SKB