nutui/src/styles/variable.scss

// ---- color ---- 这是之前在用的颜色，后续开发中使用新的色值
$primary-color: #f0250f !default;
$normal-color: #848484 !default;
$link-color: $primary-color !default;
$link-hover-color: mix($link-color, #000, 80%) !default;
$title-color: #2d2d2d !default;
$text-color: #848484 !default;
$light-color: #f6f6f6 !default;
$dark-color: #dadada !default;

// v3.0 主要色值
// ---- 主色调color ----
$primary-color-jd-red: #E1251B !default; // 京东红，主要用于对外C端产品。
$primary-color-jc-blue: #3C6EF0 !default; // 京牛蓝，主要用于对内B端产品。
// ---- 辅助color ----
$assist-color-green: #26A872 !default; // 常用于成功信息/成功icon，或者卡片标签
$assist-color-orange: #FF6E4C !default; // 常用于警告信息/警告icon，或者卡片标签
$assist-color-yellow: #FFBA12 !default; // 常用于提示信息/提示icon，或者卡片标签
$assist-color-blue: #2CA6E1 !default; // 冷链蓝，主要用于京东冷链相关产品，也可以用于卡片标签或页面其他元素
$assist-color-purple: #6236FF !default; 
$assist-color-gray: #7C7A8A !default; // 常用于卡片标签或页面其他元素
$assist-color-light-gray: #D9D9D9 !default; // 常用于弱标签背景色
// ---- 文本color ----
$text-black-1: #323232 !default; // 重要文字颜色，用于Narbar等大标题
$text-black-2: #646464 !default; // 普通文字颜色，用于段落、表单标题、列表内容等
$text-black-3: #969696 !default; // 辅助文字，用于次要信息
$text-black-4: #C8C8C8 !default; // 一般文字，用于提示性文字
$text-jd-red: #E1251B !default; // 用于报错文字颜色
// ---- 背景/分割线color ----
$body-background-color: #F7F7F7 !default; // 用于页面整体背景
$split-line-color: #E6E6E6 !default; // 用于分割线，按钮描边,1px
$disabled-bg-color: #DCDCDC !default; // 用于按钮置灰
// ---- v3.0 常用字号 ----
$font-size-title-large: 20px; // 用于标题类文字
$font-size-title-normal: 18px; // 用于全局操作类文字
$font-size-body-large: 17px; // 常用字号，用于需要强调的文字信息
$font-size-body-normal: 16px; // 最常用的正文字号
$font-size-body-small: 14px; // 常用字号，用于较弱的文字信息
$font-size-display-large: 14px; // 常用于辅助说明文字
$font-size-display-normal: 13px; // 常用字号，用于解释信息
$font-size-display-small: 12px; // 常用于标签信息展示


// ---- base ----
$body-background: #f6f6f6 !default;
$mask-bg: rgba(0, 0, 0, 0.5) !default;
$font-family: PingHei, 'Lucida Grande', 'Lucida Sans Unicode', STHeiti, Helvetica, Arial, Verdana, 'sans-serif', 'PingHei-light', SimHei, 'Droid Sans' !default;
$font-size-base: 14px !default;
$font-size-small: 12px !default;
$font-size-large: 16px !default;
$line-height-base: 1.5 !default;
$border-radius-base: 8px !default;
$border-radius-small: 3px !default;
$border-radius-large: 50px !default;
// ---- Animation ----
$animation-duration: 0.25s !default;
$transition-duration: 0.2s !default;
$transition-duration-fast: 0.2s !default;
$transition-duration-slow: 0.4s !default;
$animation-timing-fun: cubic-bezier(0.55, 0.085, 0.68, 0.53) !default;
$ease-in-out: cubic-bezier(0.445, 0.05, 0.55, 0.95);
$ease-out: cubic-bezier(0.895, 0.03, 0.685, 0.22);
// ---- Border color ----
$border-color-base: $dark-color !default;
$border-color-dark: #ababab !default;
$border-width-base: 1px !default;
$border-style-base: solid !default;
$border-color-active: $primary-color !default;
// ---- Disabled ----
$disabled-color: #f6f6f6 !default;
$disabled-bg: #dadada !default;
$disabled-primary-bg: #eb8a7e !default;
// ---- Shadow ----
$shadow-color: rgba(0, 0, 0, 0.15) !default;
$shadow-up: 0 -2px 8px $shadow-color !default;
$shadow-down: 0 2px 8px $shadow-color !default;
$shadow-left: -2px 0 8px $shadow-color !default;
$shadow-right: 2px 0 8px $shadow-color !default;
$shadow-base: $shadow-down !default;
// ---- Buttons ----
$btn-font-weight: normal !default;
$btn-border-radius-base: 8px !default;
$btn-border-radius-small: 3px !default;
$btn-border-radius-large: 50px !default;
$btn-height-small: 30px !default;
$btn-height-big: 40px !default;
$btn-icon-height-small: 12px !default;
$btn-icon-height-big: 16px !default;
$btn-menu-icon-height: 20px !default;
$btn-menu-height: 50px !default;
$btn-primary-color: #fff !default;
$btn-primary-bg: $primary-color !default;
$btn-gradient-color: #fff !default;
$btn-gradient-start-color: #ff4f18;
$btn-gradient-end-color: #f20000;
$btn-gradient-bg: linear-gradient(315deg, $btn-gradient-start-color 0%, $btn-gradient-end-color 100%) !default;
$btn-gradient-active-bg: linear-gradient(315deg, darken($btn-gradient-start-color, 10%) 0%, darken($btn-gradient-end-color, 10%) 100%) !default;
$btn-default-color: $normal-color !default;
$btn-default-bg: #fff !default;
$btn-default-border: $border-color-dark !default;
$btn-active-color: #fff !default;
$btn-active-bg: $primary-color !default;
$btn-active-border: 􏰅􏴦􏵘􏵑􏱱􏵘􏴦$primary-color !default;
$btn-disable-color: $disabled-color !default;
$btn-disable-bg: $disabled-bg !default;
$btn-disable-border: $disabled-color !default;
$btn-icon-margin: 5px;
$btn-label-light-bg: rgba(240, 37, 15, 0.05);
// ---- z-index ----
$zindex-mask: 9998 !default;
$zindex-actionsheet: 10001 !default;
$zindex-dialog: 10000 !default;
$zindex-picker: 10050 !default;
// ---- Assets path ----
$assetsPath: '../../assets' !default;
// ---- Stepper ----
$stepper-color: #333 !default;
$stepperbar-width: 11px !default;
$stepperbar-color: #333 !default;