色彩

色彩体系主要定义了设计中的基础色板。

使用

/* fq-mall 项目中已在 app.scss 全局引入，无需手动引入此文件 */
@import '~@fq/fq-weapp-ui/dist/styles/variables/default';

.xxx {
  color: $color-primary;
}

基础色板

主色系

$color-primary#00B68F

$color-primary-border#CCF0E9

$color-primary-disabled#78CDBA

$color-primary-bg#EBFAF6

$color-primary-gradientlinear-gradient(90deg, #38DA7D 3%, #02B0AA 100%)

绿色系

$color-family-green#52C41A

$color-family-green-bg#F6FFED

$color-family-green-border#D9F7BE

$color-family-green-hover#73D13D

$color-family-green-active#389E0D

蓝色系

$color-family-blue#1677FF

$color-family-blue-bg#E6F7FF

$color-family-blue-border#BAE7FF

$color-family-blue-hover#4096FF

$color-family-blue-active#096DD9

红色系

$color-family-red#FF4D4F

$color-family-red-bg#FFF1F0

$color-family-red-border#FFCCC7

$color-family-red-hover#FF7875

$color-family-red-active#D92D33

$color-family-red-gradientlinear-gradient(135deg, #FD4A39 0%, #FD397E 100%)

$color-family-red-price#FA2B19

$color-family-red-savings#FE3659

橙色系

$color-family-orange#FF8F16

$color-family-orange-light#FF6A00

$color-family-orange-dark#AC5300

$color-family-orange-price#64380B

$color-family-orange-bg#FFF7E6

$color-family-orange-border#FFE7BA

$color-family-orange-hover#FFA940

$color-family-orange-active#D46B08

$color-family-orange-gradientlinear-gradient(180deg, #FFDB66 0%, #FF6040 100%)

$color-family-orange-diagonal-gradientlinear-gradient(141deg, #FC0 -1%, #FF4D00 117%)

黄色系

$color-family-yellow#FFD321

$color-family-yellow-bg#FFF6D3

$color-family-yellow-gradientlinear-gradient(180deg, #FFE56F 0%, #FFD300 100%)

紫色系

$color-family-purple#722ED1

$color-family-purple-bg#F9F0FF

$color-family-purple-border#EFDBFF

$color-family-purple-gradientlinear-gradient(138deg, #9067F4 0%, #6328F3 100%)

功能色板

文本色系

$text-color-base#333

$text-color-base-weak#666

$text-color-secondary#999

$text-color-disabled#BFBFBF

$text-color-white#fff

背景色系

$bg-color#FFF

$bg-color-base#F7F8F9

$bg-color-light#F5F5F5

$bg-color-lighter#EEE

边框色系

$border-color#E6E6E6

$border-color-dark#DDD