magic-vue2-designer/src/assets/layout/color-layout.less

#### 介绍

// 定义生成的方法
.color-define-all(@attr) {
  // 黑色
  &-black {
    @{attr}: #000000;
  }
  // 白色
  &-white {
    @{attr}: #ffffff;
  }
  // 灰色
  &-gray {
    @{attr}: rgba(0, 0, 0, 0.25);
  }
  // 粉色
  &-pink {
    @{attr}: #c41d7f;
    &-thin {
      @{attr}: #ffadd2;
    }
    &-light {
      @{attr}: #fff0f6;
    }
  }
  // 红色
  &-red {
    @{attr}: #ff4d4f;
    &-thin {
      @{attr}: #ffa39e;
    }
    &-light {
      @{attr}: #fff1f0;
    }
  }
  // 橘色
  &-orange {
    @{attr}: #d46b08;
    &-thin {
      @{attr}: #ffd591;
    }
    &-light {
      @{attr}: #fff7e6;
    }
  }
  // 绿色
  &-green {
    @{attr}: #389e0d;
    &-thin {
      @{attr}: #b7eb8f;
    }
    &-light {
      @{attr}: #f6ffed;
    }
  }
  // 青色
  &-cyan {
    @{attr}: #08979c;
    &-thin {
      @{attr}: #87e8de;
    }
    &-light {
      @{attr}: #e6fffb;
    }
  }
  // 蓝色
  &-blue {
    @{attr}: #096dd9;
    &-thin {
      @{attr}: #91d5ff;
    }
    &-light {
      @{attr}: #e6f7ff;
    }
  }
  // 绿色
  &-purple {
    @{attr}: #531dab;
    &-thin {
      @{attr}: #d3adf7;
    }
    &-light {
      @{attr}: #f9f0ff;
    }
  }
}
// 背景颜色
.bg-color {
  .color-define-all(background-color);
}
// 字体颜色
.text-color {
  .color-define-all(color);
}
// 边框颜色
.border-color {
  .color-define-all(border-color);
}