钉钉设计标准 uni-app scss

style.js

/* == 钉钉设计标准 == */
module.exports = {
  /* 颜色 color */

  // 文字基本颜色
  common_level1_base_color: '#171a1d', // 主要文字色 标题、正文等文字用色。
  common_level2_base_color: 'rgba(23, 26, 29, .6)', // 次要文字色 辅助文案、描述等文字用色。
  common_level3_base_color: 'rgba(23, 26, 29, .4)', // 描述文字色 描述、脚注等文字用色。
  common_level4_base_color: 'rgba(25, 31, 37, .24)', // 禁用与占位文字色。
  common_link_color: '#317ed0', // 链接文字色。
  common_link_press_color: 'rgba(49, 126, 208, .4)', // 链接点击文字色。
  common_stamp_color: 'rgba(23, 26, 29, .03)', // 水印文字色。

  // 背景颜色
  common_fg_color: '#fff',
  common_fg_z1_color: '#fff',
  common_fg_press_color: '#f3f7fc',
  common_bg_color: '#ebebeb',
  common_bg_z1_color: '#fff',

  // 分割线颜色
  common_line_hard_color: 'hsla(210, 7%, 53%, .24)',
  common_line_light_color: 'hsla(210, 7%, 53%, .16)',

  // 遮罩颜色
  common_overlay_color: 'rgba(0, 0, 0, .16)',
  common_overlay_hover_color: 'rgba(0, 0, 0, .08)',
  common_overlay_press_color: 'rgba(0, 0, 0, .16)',

  // 暗色模式
  common_level1_base_color_dark: '#eef2f8',
  common_level2_base_color_dark: 'rgba(238, 242, 248, .6)',
  common_level3_base_color_dark: 'rgba(238, 242, 248, .4)',
  common_level4_base_color_dark: 'rgba(238, 242, 248, .24)',
  common_link_color_dark: '#3e88d6',
  common_link_press_color_dark: 'rgba(62, 136, 214, .4)',
  common_stamp_color_dark: 'rgba(238, 242, 248, .04)',
  common_fg_color_dark: '#212124',
  common_fg_z1_color_dark: '#333438',
  common_fg_press_color_dark: '#414145',
  common_bg_color_dark: '#171719',
  common_bg_z1_color_dark: '#212124',
  common_line_hard_color_dark: 'hsla(210, 7%, 53%, .24)',
  common_line_light_color_dark: 'hsla(210, 7%, 53%, .16)',
  common_overlay_color_dark: 'rgba(0, 0, 0, .16)',
  common_overlay_hover_color_dark: 'hsla(0, 0%, 100%, .08)',
  common_overlay_press_color_dark: 'hsla(0, 0%, 100%, .16)',

  // 行为相关颜色
  common_primary1_color: '#0089ff', // 主要
  common_primary2_color: 'rgba(0, 137, 255, .48)',
  common_primary3_color: 'rgba(0, 137, 255, .12)',
  common_primary_hover_color: '#007eea',
  common_primary_press_color: '#0070d1',
  common_danger1_color: '#ff5219', // 错误
  common_danger2_color: 'rgba(255, 82, 25, .48)',
  common_danger3_color: 'rgba(255, 82, 25, .12)',
  common_danger_hover_color: '#e84611',
  common_danger_press_color: '#d33f0e',
  common_success1_color: '#00b042', // 成功
  common_success2_color: 'rgba(0, 176, 66, .48)',
  common_success3_color: 'rgba(0, 176, 66, .12)',
  common_success_hover_color: '#00c745',
  common_success_press_color: '#007a2b',
  common_warning1_color: '#ff9200', // 警告
  common_warning2_color: 'rgba(255, 146, 0, .48)',
  common_warning3_color: 'rgba(255, 146, 0, .12)',
  common_warning_hover_color: '#e68200',
  common_warning_press_color: '#cc7400',

  // 扩展颜色
  common_blue1_color: '#0089ff',
  common_blue1_hover_color: '#39a3ff',
  common_blue1_active_color: '#0065d5',
  common_blue2_color: 'rgba(0, 137, 255, .48)',
  common_blue3_color: 'rgba(0, 137, 255, .16)',

  common_red1_color: '#ff5219',
  common_red1_hover_color: '#ff642b',
  common_red1_active_color: '#e41100',
  common_red2_color: 'rgba(255, 82, 25, .48)',
  common_red3_color: 'rgba(255, 82, 25, .12)',

  common_orange1_color: '#ff9200',
  common_orange2_color: 'rgba(255, 146, 0, .48)',
  common_orange3_color: 'rgba(255, 146, 0, .12)',

  common_green1_color: '#00b042',
  common_green2_color: 'rgba(0, 176, 66, .48)',
  common_green3_color: 'rgba(0, 176, 66, .12)',

  common_yellow1_color: '#f4c800',
  common_yellow2_color: 'rgba(244, 200, 0, .48)',
  common_yellow3_color: 'rgba(244, 200, 0, .12)',

  common_purple1_color: '#b963d3',
  common_purple2_color: 'rgba(185, 99, 211, .48)',
  common_purple3_color: 'rgba(185, 99, 211, .12)',

  common_pink1_color: '#ec4589',
  common_pink2_color: 'rgba(236, 69, 137, .48)',
  common_pink3_color: 'rgba(236, 69, 137, .12)',

  common_olive1_color: '#6f9200',
  common_olive2_color: 'rgba(111, 146, 0, .48)',
  common_olive3_color: 'rgba(111, 146, 0, .12)',

  common_gray1_color: '#8e8e93',
  common_gray2_color: '#aeaeb2',
  common_gray3_color: '#c7c7cc',
  common_gray4_color: '#d1d1d6',
  common_gray5_color: '#e5e5ea',
  common_gray6_color: '#f2f2f7',

  /* 圆角 border radiu */
  common_border_radius_s: `${4 * 2}rpx`, // height <= 36
  common_border_radius_m: `${6 * 2}rpx`, // 72 >= height > 36
  common_border_radius_l: `${8 * 2}rpx`, // height > 72
  common_border_radius_auto: '0.16', // height * 0.16

  /* 间距 spacing */
  common_spacing_unit: `${4 * 2}rpx`, // 最小单元，一般不使用
  common_spacing_xs: `${8 * 2}rpx`, // 箭头或描述文字
  common_spacing_s: `${12 * 2}rpx`, // 卡片内容或屏幕左右间距
  common_spacing_m: `${16 * 2}rpx`, // 大多数页面边距/列表分隔
  common_spacing_l: `${24 * 2}rpx`, // 顶部内容为大字的情况/需要大量留白的页面/运营页面
  common_spacing_xl: `${32 * 2}rpx`, // 需要大量留白的页面/运营页面
  common_spacing_xxl: `${64 * 2}rpx`, // 需要大量留白的页面/运营页面

  /* 文字 font */
  common_hypertitle_text_style_font_size: `${32 * 2}rpx`, // 使用在品牌宣发、官网Banner等需要超大显示场景。
  common_hypertitle_text_style_line_height: `${32 * 2 * 1.2}rpx`,
  common_supertitle_text_style_font_size: `${28 * 2}rpx`, // 使用在品牌宣发、官网Banner等需要大标题显示场景。
  common_supertitle_text_style_line_height: `${28 * 2 * 1.2}rpx`,
  common_largetitle_text_style_font_size: `${24 * 2}rpx`, // 使用在品牌宣发、官网Banner等需要大标题显示场景。
  common_largetitle_text_style_line_height: `${24 * 2 * 1.2}rpx`,
  common_h1_text_style_font_size: `${24 * 2}rpx`, // 系统级1级标题。
  common_h1_text_style_line_height: `${24 * 2 * 1.4}rpx`,
  common_h2_text_style_font_size: `${20 * 2}rpx`, // 系统级2级标题。
  common_h2_text_style_line_height: `${20 * 2 * 1.4}rpx`,
  common_h3_text_style_font_size: `${18 * 2}rpx`, // 系统级3级标题。
  common_h3_text_style_line_height: `${18 * 2 * 1.4}rpx`,
  common_h4_text_style_font_size: `${17 * 2}rpx`, // 系统级4级标题。
  common_h4_text_style_line_height: `${17 * 2 * 1.5}rpx`,
  common_h5_text_style_font_size: `${15 * 2}rpx`, // 系统级5级标题。
  common_h5_text_style_line_height: `${15 * 2 * 1.5}rpx`,
  common_h6_text_style_font_size: `${14 * 2}rpx`, // 系统级6级标题。
  common_h6_text_style_line_height: `${14 * 2 * 1.6}rpx`,
  common_body_text_style_font_size: `${17 * 2}rpx`, // 标准默认字体。
  common_body_text_style_line_height: `${17 * 2 * 1.5}rpx`,
  common_paragraph_text_style_font_size: `${15 * 2}rpx`, // 标准默认字体(长文本)。
  common_paragraph_text_style_line_height: `${15 * 2 * 1.6}rpx`,
  common_subhead_text_style_font_size: `${15 * 2}rpx`, // 建议描述性文字',Cell第二行附属信息。
  common_subhead_text_style_line_height: `${15 * 2 * 1.6}rpx`,
  common_description_text_style_font_size: `${14 * 2}rpx`, // 建议描述性文字',Cell第二行附属信息。
  common_description_text_style_line_height: `${14 * 2 * 1.6}rpx`,
  common_footnote_text_style_font_size: `${12 * 2}rpx`, // 建议脚注文字',时间戳等不重要的信息。
  common_footnote_text_style_line_height: `${12 * 2 * 1.6}rpx`,
  common_tiny_text_style_font_size: `${10 * 2}rpx`, // 不重要的小型标注。
  common_tiny_text_style_line_height: `${10 * 2 * 1.6}rpx`,

  /* 阴影 boxshadow */
  common_box_shadow_s__box_shadow: `0rpx ${1 * 2}rpx ${4 * 2}rpx rgba(23, 26, 29, .12)`,
  common_box_shadow_m__box_shadow: `0rpx ${8 * 2}rpx ${24 * 2}rpx rgba(10, 30, 65, .12)`,
  common_box_shadow_l__box_shadow: `0rpx ${12 * 2}rpx ${32 * 2}rpx rgba(10, 30, 65, .2)`,

  /* 动画 motion */
  common_light_motion_duration: '0.2s',
  common_light_motion_timing_function: 'ease-out',
  common_normal_motion_duration: '0.24s',
  common_normal_motion_timing_function: 'cubic-bezier(0.8, 0, 0.68, 0.92)',
  common_hard_motion_duration: '0.36s',
  common_hard_motion_timing_function: 'cubic-bezier(0.66, 0, 0.01, 1)',
};

uni.scss

/* == 钉钉设计标准 == */
/* 颜色 color */
// 行为相关颜色
$common_primary1_color: #0089ff; // 主要
$common_primary2_color: rgba(0, 137, 255, .48);
$common_primary3_color: rgba(0, 137, 255, .12);
$common_primary_hover_color: #007eea;
$common_primary_press_color: #0070d1;
$common_danger1_color: #ff5219; // 错误
$common_danger2_color: rgba(255, 82, 25, .48);
$common_danger3_color: rgba(255, 82, 25, .12);
$common_danger_hover_color: #e84611;
$common_danger_press_color: #d33f0e;
$common_success1_color: #00b042; // 成功
$common_success2_color: rgba(0, 176, 66, .48);
$common_success3_color: rgba(0, 176, 66, .12);
$common_success_hover_color: #00c745;
$common_success_press_color: #007a2b;
$common_warning1_color: #ff9200; // 警告
$common_warning2_color: rgba(255, 146, 0, .48);
$common_warning3_color: rgba(255, 146, 0, .12);
$common_warning_hover_color: #e68200;
$common_warning_press_color: #cc7400;

// 文字基本颜色
$common_level1_base_color: #171a1d; // 主要文字色;标题、正文等文字用色。
$common_level2_base_color: rgba(23, 26, 29, .6); // 次要文字色;辅助文案、描述等文字用色。
$common_level3_base_color: rgba(23, 26, 29, .4); // 描述文字色;描述、脚注等文字用色。
$common_level4_base_color: rgba(25, 31, 37, .24); // 禁用与占位文字色。
$common_link_color: #317ed0; // 链接文字色。
$common_link_press_color: rgba(49, 126, 208, .4); // 链接点击文字色。
$common_stamp_color: rgba(23, 26, 29, .03); // 水印文字色。

// 背景颜色
$common_fg_color: #fff;
$common_fg_z1_color: #fff;
$common_fg_press_color: #f3f7fc;
$common_bg_color: #ebebeb;
$common_bg_z1_color: #fff;

// 分割线颜色
$common_line_hard_color: hsla(210, 7%, 53%, .24);
$common_line_light_color: hsla(210, 7%, 53%, .16);

// 遮罩颜色
$common_overlay_color: rgba(0, 0, 0, .16);
$common_overlay_hover_color: rgba(0, 0, 0, .08);
$common_overlay_press_color: rgba(0, 0, 0, .16);

// 扩展颜色
$common_blue1_color: #0089ff;
$common_blue1_hover_color: #39a3ff;
$common_blue1_active_color: #0065d5;
$common_blue2_color: rgba(0, 137, 255, .48);
$common_blue3_color: rgba(0, 137, 255, .16);

$common_red1_color: #ff5219;
$common_red1_hover_color: #ff642b;
$common_red1_active_color: #e41100;
$common_red2_color: rgba(255, 82, 25, .48);
$common_red3_color: rgba(255, 82, 25, .12);

$common_orange1_color: #ff9200;
$common_orange2_color: rgba(255, 146, 0, .48);
$common_orange3_color: rgba(255, 146, 0, .12);

$common_green1_color: #00b042;
$common_green2_color: rgba(0, 176, 66, .48);
$common_green3_color: rgba(0, 176, 66, .12);

$common_yellow1_color: #f4c800;
$common_yellow2_color: rgba(244, 200, 0, .48);
$common_yellow3_color: rgba(244, 200, 0, .12);

$common_purple1_color: #b963d3;
$common_purple2_color: rgba(185, 99, 211, .48);
$common_purple3_color: rgba(185, 99, 211, .12);

$common_pink1_color: #ec4589;
$common_pink2_color: rgba(236, 69, 137, .48);
$common_pink3_color: rgba(236, 69, 137, .12);

$common_olive1_color: #6f9200;
$common_olive2_color: rgba(111, 146, 0, .48);
$common_olive3_color: rgba(111, 146, 0, .12);

$common_gray1_color: #8e8e93;
$common_gray2_color: #aeaeb2;
$common_gray3_color: #c7c7cc;
$common_gray4_color: #d1d1d6;
$common_gray5_color: #e5e5ea;
$common_gray6_color: #f2f2f7;

/* 圆角 border radiu */
$common_border_radius_s: 4*2rpx; // height <= 36
$common_border_radius_m: 6*2rpx; // 72 >= height > 36
$common_border_radius_l: 8*2rpx; // height > 72
$common_border_radius_auto: 0.16; // height * 0.16

/* 间距 spacing */
$common_spacing_unit: 4*2rpx; // 最小单元，一般不使用
$common_spacing_xs: 8*2rpx; // 箭头或描述文字
$common_spacing_s: 12*2rpx; // 卡片内容或屏幕左右间距
$common_spacing_m: 16*2rpx; // 大多数页面边距/列表分隔
$common_spacing_l: 24*2rpx; // 顶部内容为大字的情况/需要大量留白的页面/运营页面
$common_spacing_xl: 32*2rpx; // 需要大量留白的页面/运营页面
$common_spacing_xxl: 64*2rpx; // 需要大量留白的页面/运营页面

/* 文字 font */
$common_hypertitle_text_style_font_size: 32*2rpx; // 使用在品牌宣发、官网Banner等需要超大显示场景。
$common_hypertitle_text_style_line_height: 32*2*1.2rpx;
$common_supertitle_text_style_font_size: 28*2rpx; // 使用在品牌宣发、官网Banner等需要大标题显示场景。
$common_supertitle_text_style_line_height: 28*2*1.2rpx;
$common_largetitle_text_style_font_size: 24*2rpx; // 使用在品牌宣发、官网Banner等需要大标题显示场景。
$common_largetitle_text_style_line_height: 24*2*1.2rpx;
$common_h1_text_style_font_size: 24*2rpx; // 系统级1级标题。
$common_h1_text_style_line_height: 24*2*1.4rpx;
$common_h2_text_style_font_size: 20*2rpx; // 系统级2级标题。
$common_h2_text_style_line_height: 20*2*1.4rpx;
$common_h3_text_style_font_size: 18*2rpx; // 系统级3级标题。
$common_h3_text_style_line_height: 18*2*1.4rpx;
$common_h4_text_style_font_size: 17*2rpx; // 系统级4级标题。
$common_h4_text_style_line_height: 17*2*1.5rpx;
$common_h5_text_style_font_size: 15*2rpx; // 系统级5级标题。
$common_h5_text_style_line_height: 15*2*1.5rpx;
$common_h6_text_style_font_size: 14*2rpx; // 系统级6级标题。
$common_h6_text_style_line_height: 14*2*1.6rpx;
$common_body_text_style_font_size: 17*2rpx; // 标准默认字体。
$common_body_text_style_line_height: 17*2*1.5rpx;
$common_paragraph_text_style_font_size: 15*2rpx; // 标准默认字体(长文本)。
$common_paragraph_text_style_line_height: 15*2*1.6rpx;
$common_subhead_text_style_font_size: 15*2rpx; // 建议描述性文字;Cell第二行附属信息。
$common_subhead_text_style_line_height: 15*2*1.6rpx;
$common_description_text_style_font_size: 14*2rpx; // 建议描述性文字;Cell第二行附属信息。
$common_description_text_style_line_height: 14*2*1.6rpx;
$common_footnote_text_style_font_size: 12*2rpx; // 建议脚注文字;时间戳等不重要的信息。
$common_footnote_text_style_line_height: 12*2*1.6rpx;
$common_tiny_text_style_font_size: 10*2rpx; // 不重要的小型标注。
$common_tiny_text_style_line_height: 10*2*1.6rpx;

/* 阴影 boxshadow */
$common_box_shadow_s_box_shadow: 0rpx 1*2rpx 4*2rpx rgba(23, 26, 29, .12);
$common_box_shadow_m_box_shadow: 0rpx 8*2rpx 24*2rpx rgba(10, 30, 65, .12);
$common_box_shadow_l_box_shadow: 0rpx 12*2rpx 32*2rpx rgba(10, 30, 65, .2);

/* 动画 motion */
$common_light_motion_duration: 0.2s;
$common_light_motion_timing_function: ease-out;
$common_normal_motion_duration: 0.24s;
$common_normal_motion_timing_function: cubic-bezier(0.8, 0, 0.68, 0.92);
$common_hard_motion_duration: 0.36s;
$common_hard_motion_timing_function: cubic-bezier(0.66, 0, 0.01, 1);

/* 深色模式 */
$is_dark: false !default;

@if $is_dark {
  // 文字基本颜色
  $common_level1_base_color: #eef2f8;
  $common_level2_base_color: rgba(238, 242, 248, .6);
  $common_level3_base_color: rgba(238, 242, 248, .4);
  $common_level4_base_color: rgba(238, 242, 248, .24);
  $common_link_color: #3e88d6;
  $common_link_press_color: rgba(62, 136, 214, .4);
  $common_stamp_color: rgba(238, 242, 248, .04);

  // 背景颜色
  $common_fg_color: #212124;
  $common_fg_z1_color: #333438;
  $common_fg_press_color: #414145;
  $common_bg_color: #171719;
  $common_bg_z1_color: #212124;

  // 分割线颜色
  $common_line_hard_color: hsla(210, 7%, 53%, .24);
  $common_line_light_color: hsla(210, 7%, 53%, .16);

  // 遮罩颜色
  $common_overlay_color: rgba(0, 0, 0, .16);
  $common_overlay_hover_color: hsla(0, 0%, 100%, .08);
  $common_overlay_press_color: hsla(0, 0%, 100%, .16);
}

/**
* 这里是uni-app内置的常用样式变量
*
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
*
*/

/**
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
*
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
*/

/* 颜色变量 */

/* 行为相关颜色 */
$uni-color-primary: $common_primary1_color;
$uni-color-success: $common_success1_color;
$uni-color-warning: $common_warning1_color;
$uni-color-error: $common_danger1_color;

/* 文字基本颜色 */
$uni-text-color: $common_level1_base_color; // 基本色
$uni-text-color-inverse: $common_level1_base_color; // 反色
$uni-text-color-grey: $common_level2_base_color; // 辅助灰色，如加载更多的提示信息
$uni-text-color-placeholder: $common_level3_base_color;
$uni-text-color-disable: $common_level4_base_color;

/* 背景颜色 */
$uni-bg-color: $common_fg_color;
$uni-bg-color-grey: $common_bg_color;
$uni-bg-color-hover: $common_fg_press_color; // 点击状态颜色$common_danger1_color
$uni-bg-color-mask: $common_overlay_color; // 遮罩颜色

/* 边框颜色 */
$uni-border-color: $common_line_light_color;

/* 尺寸变量 */

/* 文字尺寸 */
$uni-font-size-sm: $common_description_text_style_font_size;
$uni-font-size-base: $common_body_text_style_font_size;
$uni-font-size-lg: $common_h1_text_style_font_size;

/* 图片尺寸 */
$uni-img-size-sm: 24*2rpx;
$uni-img-size-base: 32*2rpx;
$uni-img-size-lg: 48*2rpx;

/* Border Radius */
$uni-border-radius-sm: $common_border_radius_s;
$uni-border-radius-base: $common_border_radius_m;
$uni-border-radius-lg: $common_border_radius_l;
$uni-border-radius-circle: $common_border_radius_auto;

/* 水平间距 */
$uni-spacing-row-sm: $common_spacing_unit;
$uni-spacing-row-base: $common_spacing_xs;
$uni-spacing-row-lg: $common_spacing_s;

/* 垂直间距 */
$uni-spacing-col-sm: $common_spacing_unit;
$uni-spacing-col-base: $common_spacing_xs;
$uni-spacing-col-lg: $common_spacing_s;

/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度

/* 文章场景相关 */
$uni-color-title: $common_level1_base_color; // 文章标题颜色
$uni-font-size-title: $common_h4_text_style_font_size;
$uni-color-subtitle: $common_level2_base_color; // 二级标题颜色
$uni-font-size-subtitle: $common_h5_text_style_font_size;
$uni-color-paragraph: $common_level1_base_color; // 文章段落颜色
$uni-font-size-paragraph: $common_paragraph_text_style_font_size;

vue.config.js

const style = require('./src/style');

const styleAdditionalData = Object.keys(style).map((k) => `$${k}: ${style[k]};`).join('\n');

module.exports = {
  transpileDependencies: ['@dcloudio/uni-ui'],
  chainWebpack: webpackConfig => {
    const oneOfsMap = webpackConfig.module.rule('scss').oneOfs.store
    oneOfsMap.forEach(item => {
      item
        .use('sass-loader')
        .tap(options => {
          if (!options.sassOptions) {
            options.sassOptions = {}
          }
          options.additionalData = styleAdditionalData + '\n' + options.additionalData
          return options
        })
    })
  },
}