Cook-uni

外观

颜色说明 ​

经过大量调试和研究，得出一套专有的调色板，在各个组件内部，使用统一的配色，为您的产品带来统一又鲜明的视觉效果。

主题色 ​

primary，success，danger，warning，info是cook-uni的主题色，他们给人在视觉感受上分别对应于蓝色，绿色，红色，黄色，灰色。 而他们又有对应的dark和light状态，分别表示加深和变浅的对应颜色。

主色 ​

蓝色作为cook-uni主色调，表示一种鲜明，积极的态度。

primary
primary-light-1
primary-light-2
primary-light-3
primary-light-4
primary-light-5
primary-light-6
primary-light-7
primary-light-8
primary-light-9

对应scss变量：

scss
// 主色
$color-primary: #409eff;

辅助色 ​

除了主色外的场景色，需要在不同的场景中使用，如绿色代表成功，红色代表错误，黄色代表警示。

success
success-light-1
success-light-2
success-light-3
success-light-4
success-light-5
success-light-6
success-light-7
success-light-8
success-light-9
danger
danger-light-1
danger-light-2
danger-light-3
danger-light-4
danger-light-5
danger-light-6
danger-light-7
danger-light-8
danger-light-9
warning
warning-light-1
warning-light-2
warning-light-3
warning-light-4
warning-light-5
warning-light-6
warning-light-7
warning-light-8
warning-light-9
info
info-light-1
info-light-2
info-light-3
info-light-4
info-light-5
info-light-6
info-light-7
info-light-8
info-light-9

对应scss变量：

scss
// 辅助色
$color-success: #67c23a;
$color-warning: #F7940C;
$color-danger: #f56c6c;
$color-info: #909399;

扩展主色 ​

扩展主色通过设置scss变量$colors实现，它是一个颜色列表。

scss
// uni.scss

$colors: (
    'myColor': #F7940C,
);

@import "@/uni_modules/cook-uni/variables.scss";

扩展后使用：

vue
<template>
    <view class="c-bg-myColor"></view>
    <text class="c-t-myColor">文本</text>
    <c-btn type="myColor" text="按钮" /></c-btn>
    <c-box c-class="c-bdr c-bdr-myColor"></c-box>
</template>

文字色 ​

cook-uni提供4种不同的文本色main，regular，secondary，placeholder，分别表示主要文本色，常规文本色，次级文本色，占位符文本色。

main
regular
secondary
placeholder

文本色存放在scss变量$text-colors中，可通过$text-color变量统一设置：

scss
// 统一设置
$text-color: #303133;

// 单独设置
$text-colors: (
    'main': $text-color,
    'regular': mix($color-white, $text-color, 23),
    'secondary': mix($color-white, $text-color, 46),
    'placeholder': mix($color-white, $text-color, 70)
);

设置或扩展文本色：

scss
// uni.scss
$text-colors: (
    // 设置文本色
    'placeholder': #999,

    // 扩展文本色
    // 扩展后使用<view class="c-t-customText"></view>
    'customText': #DCDCDC,
);

@import "@/uni_modules/cook-uni/variables.scss";

背景色 ​

cook-uni默认提供5种不同层级的背景色base，light，lighter，dark，darker。

base
light
lighter
dark
darker

背景色存放在scss变量$bg-colors中，可通过$bg-color变量统一设置：

scss
// 统一设置
$bg-color: #F8F8F8;

// 单独设置
$text-colors: (
    'base': $bg-color,
    'darker': mix($color-black, $bg-color, 1.5),
    'dark': mix($color-black, $bg-color, 1),
    'light': mix($color-white, $bg-color, 30),
    'lighter': mix($color-white, $bg-color, 50)
);

设置或扩展背景色，请参考“文本色”。

边框色 ​

cook-uni默认提供5种不同层级的边框色base，light，lighter，dark，darker。

base
light
lighter
dark
darker

边框色存放在scss变量$bdr-colors中，可通过$bdr-color变量统一设置：

scss
// 统一设置
$bdr-color: #dcdfe6;

// 单独设置
$bdr-colors: (
    'base': $bdr-color,
    'darker': mix($color-black, $bdr-color, 6.8),
    'dark': mix($color-black, $bdr-color, 3.5),
    'light': mix($color-white, $bdr-color, 23.5),
    'lighter': mix($color-white, $bdr-color, 42),
);

设置或扩展边框色，请参考“文本色”。

使用 ​

边框、背景、文本等工具类皆可以使用主题色，组件上同样，如：

vue
<template>
    <c-page bgColor="c-bg-success">
        <c-btn type="primary" text="主色按钮" />
        <c-btn type="primary-light-9" text="主色按钮" />
        <c-btn type="primary-dark-5" text="主色按钮" />

        <c-alert type="primary" text="主色提示" />

        <c-text text="文本" color="c-t-danger" />
    </c-page>
</template>