// Color
// 取色规则1： 所有使用颜色均需要在色板中选择
// 取色规则2： 除标签等用于功能分类及black,white的取色可以增加透明度(eg: rgba(@devui-white-5,0.3)，其余场景均不允许
// need to run `node scripts/themeable/transfer-sass-var-to-theme-data.js ` when modified

@devui-blue-5: #f2f5fc;
@devui-blue-10: #e9edfa;
@devui-blue-20: #beccfa;
@devui-blue-30: #96adfa;
@devui-blue-40: #7693f5;
@devui-blue-50: #5e7ce0;
@devui-blue-60: #526ecc;
@devui-blue-70: #465eb8;
@devui-blue-80: #3c51a6;
@devui-blue-90: #344899;
@devui-blue-100: #2a3c85;

@devui-sky-5: #ebf6ff;
@devui-sky-10: #d1ebff;
@devui-sky-20: #b8e0ff;
@devui-sky-30: #9ed5ff;
@devui-sky-40: #85caff;
@devui-sky-50: #6cbfff;
@devui-sky-60: #4ea6e6;
@devui-sky-70: #3590cc;
@devui-sky-80: #207ab3;
@devui-sky-90: #0f6999;
@devui-sky-100: #035880;

@devui-green-5: #edfff9;
@devui-green-10: #cffcee;
@devui-green-20: #acf2dc;
@devui-green-30: #8be8cb;
@devui-green-40: #6ddebb;
@devui-green-50: #50d4ab;
@devui-green-60: #3ac295;
@devui-green-70: #27b080;
@devui-green-80: #169e6c;
@devui-green-90: #088c58;
@devui-green-100: #007a45;

@devui-lime-5: #f0ffe6;
@devui-lime-10: #e5ffd4;
@devui-lime-20: #d8fcc0;
@devui-lime-30: #c5f2a7;
@devui-lime-40: #b3e890;
@devui-lime-50: #a6dd82;
@devui-lime-60: #92cc68;
@devui-lime-70: #7eba50;
@devui-lime-80: #6ca83b;
@devui-lime-90: #5e9629;
@devui-lime-100: #518519;

@devui-yellow-5: #fffbf0;
@devui-yellow-10: #fff1c2;
@devui-yellow-20: #ffe794;
@devui-yellow-30: #ffdc66;
@devui-yellow-40: #ffd138;
@devui-yellow-50: #fac20a;
@devui-yellow-60: #e3aa00;
@devui-yellow-70: #cc9600;
@devui-yellow-80: #b58200;
@devui-yellow-90: #9e6f00;
@devui-yellow-100: #875c00;

@devui-orange-5: #fff3e8;
@devui-orange-10: #ffe1c7;
@devui-orange-20: #ffd0a6;
@devui-orange-30: #ffbf85;
@devui-orange-40: #ffad63;
@devui-orange-50: #fa9841;
@devui-orange-60: #e37d29;
@devui-orange-70: #cc6414;
@devui-orange-80: #b54e04;
@devui-orange-90: #9e3f00;
@devui-orange-100: #873400;

@devui-red-5: #ffeeed;
@devui-red-10: #ffd5d4;
@devui-red-20: #ffbcba;
@devui-red-30: #ffa4a1;
@devui-red-40: #ff8b87;
@devui-red-50: #f66f6a;
@devui-red-60: #de504e;
@devui-red-70: #c73636;
@devui-red-80: #b02121;
@devui-red-90: #991111;
@devui-red-100: #820404;

@devui-magenta-5: #ffedf3;
@devui-magenta-10: #ffd4e3;
@devui-magenta-20: #ffbad2;
@devui-magenta-30: #ffa1c2;
@devui-magenta-40: #fc86b0;
@devui-magenta-50: #f3689a;
@devui-magenta-60: #db4d83;
@devui-magenta-70: #c4356e;
@devui-magenta-80: #ad215b;
@devui-magenta-90: #96114d;
@devui-magenta-100: #800440;

@devui-purple-5: #f5f0ff;
@devui-purple-10: #e7d9ff;
@devui-purple-20: #d8c2ff;
@devui-purple-30: #caabff;
@devui-purple-40: #bc94ff;
@devui-purple-50: #a97af8;
@devui-purple-60: #8a5ce0;
@devui-purple-70: #6f42c9;
@devui-purple-80: #572db3;
@devui-purple-90: #3f1a9c;
@devui-purple-100: #2a0c85;

@devui-gray-5: #f5f5f5;
@devui-gray-10: #ebebeb;
@devui-gray-20: #e0e0e0;
@devui-gray-30:  #d1d1d1;
@devui-gray-40: #bdbdbd;
@devui-gray-50: #8a8a8a;
@devui-gray-60: #878787;
@devui-gray-70: #707070;
@devui-gray-80: #5c5c5c;
@devui-gray-90: #474747;
@devui-gray-100: #383838;

@devui-slate-5: #f7f8fa;
@devui-slate-10: #eef0f5;
@devui-slate-20: #dfe1e6;
@devui-slate-30: #d7d8da;
@devui-slate-40: #cfd0d3;
@devui-slate-50: #babbc0;
@devui-slate-60: #9b9fa8;
@devui-slate-70: #71757f;
@devui-slate-80: #575d6c;
@devui-slate-90: #323745;
@devui-slate-100: #252b3a;

@devui-zinc-5: #f7f7f9;
@devui-zinc-10: #f2f2f3;
@devui-zinc-20: #e2e2e6;
@devui-zinc-30: #d5d5db;
@devui-zinc-40: #c7c7d1;
@devui-zinc-50: #aeaebd;
@devui-zinc-60: #9696a3;
@devui-zinc-70: #7a7a85;
@devui-zinc-80: #63636b;
@devui-zinc-90: #494952;
@devui-zinc-100: #37373d;

@devui-dark-gray-5: #16181a;
@devui-dark-gray-10: #202124;
@devui-dark-gray-20: #292a2e;
@devui-dark-gray-30: #2e2f33;
@devui-dark-gray-40: #323338;
@devui-dark-gray-50: #393a3e;
@devui-dark-gray-60: #4e5057;
@devui-dark-gray-70: #696c75;
@devui-dark-gray-80: #868a99;
@devui-dark-gray-90: #acb0bd;
@devui-dark-gray-100: #ced1db;

@devui-dark-slate-5: #0e111a;
@devui-dark-slate-10: #141721;
@devui-dark-slate-20: #1a1e29;
@devui-dark-slate-30: #232633;
@devui-dark-slate-40: #2c303e;
@devui-dark-slate-50: #33384b;
@devui-dark-slate-60: #444b61;
@devui-dark-slate-70: #626a85;
@devui-dark-slate-80: #878ea8;
@devui-dark-slate-90: #a3aac2;
@devui-dark-slate-100: #c1c7db;

@devui-dark-zinc-5: #1a1a1c;
@devui-dark-zinc-10: #212124;
@devui-dark-zinc-20: #28282b;
@devui-dark-zinc-30: #2f2f33;
@devui-dark-zinc-40: #353537;
@devui-dark-zinc-50: #3d3d42;
@devui-dark-zinc-60: #4b4b52;
@devui-dark-zinc-70: #575861;
@devui-dark-zinc-80: #767680;
@devui-dark-zinc-90: #9898a3;
@devui-dark-zinc-100: #b7b7c7;

@devui-white-5: #ffffff;
@devui-black-5: #000000;

// TODO: 非色板变量命名规则待定，暂不开放
// // 字体边框背景的黑，灰色待定

// // Border
// @devui-border-radius-sm: 2px;
// @devui-border-radius-md: 4px;
// @devui-border-radius-lg: 8px;
// @devui-border-radius-100: 100px;

// // Box Shadow
// @devui-shadow-length-sm: 0 1px 4px 0;
// @devui-shadow-length-md: 0 4px 8px 0;
// @devui-shadow-length-lg: 0 8px 16px 0;
// @devui-shadow-length-xl: 0 12px 24px 0;

// @devui-shadow-length-left-sm: -1px 0 4px 0;
// @devui-shadow-length-left-md: -4px 0 8px 0;
// @devui-shadow-length-left-lg: -8px 0 16px 0;
// @devui-shadow-length-left-xl: -12px 0 24px 0;

// @devui-shadow-length-right-sm: 1px 0 4px 0;
// @devui-shadow-length-right-md: 4px 0 8px 0;
// @devui-shadow-length-right-lg: 8px 0 16px 0;
// @devui-shadow-length-right-xl: 12px 0 24px 0;

// // Font Size
// @devui-font-size-xl: 18px;
// @devui-font-size-2xl: 20px;
// @devui-font-size-3xl: 24px;
// @devui-font-size-4xl: 28px;
// @devui-font-size-5xl: 36px;

// // ZIndex
// @devui-z-index-1080: 1080;
// @devui-z-index-1060: 1060;
// @devui-z-index-1050: 1050;
// @devui-z-index-1040: 1040;
// @devui-z-index-1030: 1030;
// @devui-z-index-1020: 1020;
// @devui-z-index-1010: 1010;
// @devui-z-index-1000: 1000;


// need to run `node scripts/themeable/transfer-sass-var-to-theme-data.js ` when modified
// 基础变量
@devui-global-bg: var(--devui-global-bg, @devui-zinc-5); // 全局带底色背景
@devui-global-bg-normal: var(--devui-global-bg-normal, @devui-white-5); // 全局白色背景
@devui-base-bg: var(--devui-base-bg, @devui-white-5); // 基础区块背景白色
@devui-base-bg-dark: var(--devui-base-bg-dark, @devui-slate-100); // 基础区块背景深色(固定)
@devui-brand: var(--devui-brand, @devui-blue-50); // 品牌色
@devui-brand-foil: var(--devui-brand-foil, @devui-zinc-10); // 品牌色辅助色、正衬色
@devui-brand-hover: var(--devui-brand-hover, @devui-blue-40); // 品牌色高亮色（加亮）
@devui-brand-active: var(--devui-brand-active, @devui-blue-60); // 品牌色激活色（加深）
@devui-brand-active-focus: var(--devui-brand-active-focus, @devui-blue-90); // 品牌色焦点色（重度加深）
@devui-contrast: var(--devui-contrast, #c7000b); // 品牌色撞色、对比色、反衬色、第二品牌色
@devui-text: var(--devui-text, @devui-slate-100); // 正文文本
@devui-text-weak: var(--devui-text-weak, @devui-slate-80); // 弱化的正文信息（手风琴子项，表头）
@devui-aide-text: var(--devui-aide-text, @devui-slate-70); // 辅助文本、帮助信息（面包屑）
@devui-aide-text-hover: var(--devui-aide-text-hover, @devui-slate-100);       // 辅助文本悬浮色，用于标签文本悬浮等场景
@devui-aide-text-stress: var(--devui-aide-text-stress, @devui-slate-80); // 辅助文本、帮助信息里的强调色
@devui-placeholder: var(--devui-placeholder, @devui-slate-50); // 占位符
@devui-light-text: var(--devui-light-text, @devui-white-5); // 有色深色背景下字体颜色（固定）
@devui-dark-text: var(--devui-dark-text, @devui-slate-100); // 有色浅色背景下字体颜色（固定）
@devui-link: var(--devui-link, @devui-blue-60); // 链接文本颜色
@devui-link-active: var(--devui-link-active, @devui-blue-60); // 链接文本悬停/激活颜色
@devui-link-light: var(--devui-link-light, @devui-blue-30); // 深色背景下链接文本颜色
@devui-link-light-active: var(--devui-link-light-active, @devui-blue-20); // 深色背景下链接文本悬停/激活颜色
@devui-line: var(--devui-line, @devui-slate-30); // 边框分割线，仅用于边框
@devui-dividing-line: var(--devui-dividing-line, @devui-zinc-10); // 内容分割线，用于内容之间的分割
@devui-block: var(--devui-block, @devui-white-5); // 大面积的不可折叠区块的背景色（例如顶部导航背景色）
@devui-area: var(--devui-area, @devui-gray-5); // 可折叠区块的背景色（展开区域颜色）
@devui-danger: var(--devui-danger, @devui-red-50); // 失败、错误、告警
@devui-warning: var(--devui-warning, @devui-yellow-50); // 警告、需注意类型提示
@devui-waiting: var(--devui-waiting, @devui-blue-20); // 等待中
@devui-success: var(--devui-success, @devui-green-50); // 成功、正确
@devui-info: var(--devui-info, @devui-blue-50); // 通知、一般提示、执行中
@devui-initial: var(--devui-initial, @devui-blue-10); // 初始化、未执行
@devui-unavailable: var(--devui-unavailable, @devui-gray-5); // 不可用、禁用状态
@devui-shadow: var(--devui-shadow, rgba(37, 43, 58, 0.2)); // 阴影色
@devui-light-shadow: var(--devui-light-shadow, rgba(37, 43, 58, 0.1)); // 弱化阴影色
@devui-connected-overlay-shadow: var(--devui-connected-overlay-shadow, rgba(37, 43, 58, 0.12)); // 下拉菜单类阴影色
@devui-feedback-overlay-shadow: var(--devui-feedback-overlay-shadow, rgba(37, 43, 58, 0.16)); // 信息展示类阴影色

// 图标
@devui-icon-text: var(--devui-icon-text, @devui-slate-70); // 文字图标颜色
@devui-icon-bg: var(--devui-icon-bg, @devui-white-5); // svg图标 背景色
@devui-icon-fill: var(--devui-icon-fill, @devui-slate-70); // svg图标 灰色填充色
@devui-icon-fill-weak:var(--devui-icon-fill-weak, @devui-slate-50);// svg弱化图标 灰色填充色
@devui-icon-fill-hover: var(--devui-icon-fill-hover, @devui-slate-100); // svg图标 灰色填充色悬停反馈色
@devui-icon-fill-active: var(--devui-icon-fill-active, @devui-slate-100); // svg图标 高亮填充色（激活状态）
@devui-icon-fill-active-hover: var(--devui-icon-fill-active-hover, @devui-slate-100); // svg图标 高亮填充色悬停反馈色
@devui-shape-icon-fill: var(--devui-shape-icon-fill, @devui-slate-30);   // svg图标 面型图标颜色
@devui-shape-icon-fill-hover: var(--devui-shape-icon-fill-hover, @devui-slate-50); // svg图标 面型图标悬浮色
@devui-shape-icon-fill-active: var(--devui-shape-icon-fill-active, @devui-slate-50); // svg图标 面型图标激活色
@devui-shape-icon-fill-disabled: var(--devui-shape-icon-fill-disabled, @devui-gray-5); // svg图标 面型图标激活色
// 表单
@devui-form-control-line: var(--devui-form-control-line, @devui-slate-30); // 表单控件边框色，同 边框分割线
@devui-form-control-bg: var(--devui-form-control-bg, @devui-white-5); // 表单控件背景色
@devui-form-control-line-hover: var(--devui-form-control-line-hover, @devui-slate-60); // 表单控件边框悬停反馈色
@devui-form-control-line-active: var(--devui-form-control-line-active, @devui-blue-50); // 表单控件边框激活色，用于获得焦点
@devui-form-control-line-active-hover: var(--devui-form-control-line-active-hover, @devui-blue-90); // 表单控件边框激活色，用于获得焦点且悬停
// 列表
@devui-list-item-active-bg: var(--devui-list-item-active-bg, @devui-blue-5); // 列表类型单选选中背景
@devui-list-item-active-text: var(--devui-list-item-active-text, @devui-slate-100); // 列表类型单选选中背景搭配文本，同 有色深色背景下字体颜色（固定）
@devui-list-item-active-hover-bg: var(--devui-list-item-active-hover-bg, @devui-blue-5); // 列表类型单选选中背景悬停反馈色（仅用于分页等）
@devui-list-item-hover-bg: var(--devui-list-item-hover-bg, @devui-zinc-10); // 列表类型普通选项悬停背景
@devui-list-item-hover-text: var(--devui-list-item-hover-text, @devui-slate-100); // 列表类型普通选项悬停背景搭配文本
@devui-list-item-selected-bg: var(--devui-list-item-selected-bg, @devui-blue-5); // 列表类型多选被选中的行色，仅用于表格类
@devui-list-item-strip-bg: var(--devui-list-item-strip-bg, @devui-blue-5); // 列表类型斑马纹色，仅用于表格类
// 禁用
@devui-disabled-bg: var(--devui-disabled-bg, @devui-gray-5); // disabled背景颜色
@devui-disabled-line: var(--devui-disabled-line, @devui-slate-20); // disabled边框颜色
@devui-disabled-text: var(--devui-disabled-text, @devui-slate-40); // disabled文字颜色
@devui-primary-disabled: var(--devui-primary-disabled, @devui-blue-20); //主要按钮disabled状态文字颜色
@devui-icon-fill-active-disabled: var(--devui-icon-fill-active-disabled, @devui-blue-20); // svg图标激活状态禁用色
// 特殊背景色
@devui-label-bg: var(--devui-label-bg, @devui-blue-10); // 默认标签化选项背景色
@devui-connected-overlay-bg: var(--devui-connected-overlay-bg, @devui-white-5); // 有连接点的弹出菜单层背景色
@devui-connected-overlay-line: var(--devui-connected-overlay-line, @devui-blue-60); // 有连接点的弹出菜单层边框色
@devui-fullscreen-overlay-bg: var(--devui-fullscreen-overlay-bg, @devui-white-5); // 全屏类型的弹出内容层背景色（模态弹窗）
@devui-feedback-overlay-bg: var(--devui-feedback-overlay-bg, #464d6e); // 信息提示反馈类型的漂浮层背景色（toast、popover）
@devui-feedback-overlay-text: var(--devui-feedback-overlay-text, @devui-slate-20); // 信息提示反馈类型的漂浮层背景色搭配文本色
@devui-embed-search-bg: var(--devui-embed-search-bg, @devui-zinc-10); // 被嵌套的无边框搜索框背景色
@devui-embed-search-bg-hover: var(--devui-embed-search-bg-hover, @devui-slate-10); // 被嵌套的无边框搜索框背景色
@devui-float-block-shadow: var(--devui-float-block-shadow, rgba(94, 124, 224, 0.3)); // 特殊浮层背景色（待修正）
@devui-highlight-overlay: var(--devui-highlight-overlay, rgba(255, 255, 255, 0.8)); // 局部半透明全局浮层背景色（比如底部）
@devui-range-item-hover-bg: var(--devui-range-item-hover-bg, @devui-blue-10); // datepicker范围中的日期hover的反馈背景色

// 按钮
@devui-primary: var(--devui-primary, @devui-blue-50); // 主要按钮，同品牌色
@devui-primary-hover: var(--devui-primary-hover, @devui-blue-40); // 主要按钮悬停
@devui-primary-active: var(--devui-primary-active, @devui-blue-90); // 主要按钮激活

@devui-contrast-hover: var(--devui-contrast-hover, #d64a52); // 突出按钮悬停
@devui-contrast-active: var(--devui-contrast-active, #b12220); // 突出按钮激活

// 状态
@devui-danger-line: var(--devui-danger-line, @devui-red-50); // 失败边框
@devui-danger-bg: var(--devui-danger-bg, @devui-red-10); // 失败底色

@devui-warning-line: var(--devui-warning-line, @devui-orange-50); // 警告边框
@devui-warning-bg: var(--devui-warning-bg, @devui-orange-10); // 警告底色

@devui-info-line: var(--devui-info-line, @devui-blue-50); // 通知边框
@devui-info-bg: var(--devui-info-bg, @devui-blue-10); // 通知底色

@devui-success-line: var(--devui-success-line, @devui-green-50); // 成功边框
@devui-success-bg: var(--devui-success-bg, @devui-green-10); // 成功底色
@devui-primary-line: var(--devui-primary-line, @devui-blue-50); // 主要边框
@devui-primary-bg: var(--devui-primary-bg, @devui-blue-5); // 主要底色

@devui-default-line: var(--devui-default-line, @devui-blue-50); // 默认边框
@devui-default-bg: var(--devui-default-bg, @devui-slate-5); // 默认底色

// 字号大小变量

@devui-font-size: var(--devui-font-size, 12px); //正文、卡片副标题
@devui-font-size-card-title: var(--devui-font-size-card-title, 14px); //卡片标题
@devui-font-size-page-title: var(--devui-font-size-page-title, 16px); //页面标题
@devui-font-size-modal-title: var(--devui-font-size-modal-title, 18px); //弹窗标题、数字
@devui-font-size-price: var(--devui-font-size-price, 20px); //购买价格
@devui-font-size-data-overview: var(--devui-font-size-data-overview, 24px); //数据总览

@devui-font-size-icon: var(--devui-font-size-icon, 16px);     //图标大小
@devui-font-size-sm: var(--devui-font-size-sm, 12px);  //当组件size为'sm'时使用此字号大小
@devui-font-size-md: var(--devui-font-size-md, 12px);  //当组件size为''时使用此字号大小
@devui-font-size-lg: var(--devui-font-size-lg, 14px);  //当组件size为'lg'时使用此字号大小

@devui-font-title-weight: bold; //标题文字粗细
@devui-font-content-weight: normal; //内容文字粗细
@devui-line-height-base: 1.5; //规范行高

@font-title-weight: bold;
@font-content-weight: normal;
@line-height-base: 1.5;

//阴影变量

@devui-shadow-length-base: var(--devui-shadow-length-base, 0 1px 4px 0); //直接铺陈在页面上方的元素 (card等)

@devui-shadow-length-slide-left: var(--devui-shadow-length-slide-left, -2px 0 8px 0); //向左滑动时出现在右侧边缘的阴影 (dataTable固定右侧列向左滑动)
@devui-shadow-length-slide-right: var(--devui-shadow-length-slide-right, 2px 0 8px 0); //向右滑动时出现在左侧边缘的阴影 (dataTable固定左侧列向右滑动)
@devui-shadow-length-connected-overlay: var(--devui-shadow-length-connected-overlay, 0 4px 8px 0); //有连接点的弹出(覆盖)层 (DatePicker Cascader Select TagsInput Pagination的下拉菜单等)

@devui-shadow-length-hover: var(--devui-shadow-length-hover, 0 8px 16px 0); //涉及到hover的地方
@devui-shadow-length-feedback-overlay: var(--devui-shadow-length-feedback-overlay, 0 8px 16px 0); //信息提示反馈类 (PopOver Tooltip Toast StepsGuide等)

@devui-shadow-length-fullscreen-overlay: var(--devui-shadow-length-fullscreen-overlay, 0 12px 24px 0); //无连接点的弹出(覆盖)层 (Drawer Modal ImagePreview等)

@devui-border-radius: var(--devui-border-radius, 2px); //一般圆角
@devui-border-radius-feedback: var(--devui-border-radius-feedback, 4px); //反馈类圆角
@devui-border-radius-card: var(--devui-border-radius-card, 6px); //卡片圆角
@devui-border-radius-full: var(--devui-border-radius-full, 100px); //暂不对外开放，用于开关，进度条等组件的圆角自适应宽高

@devui-animation-ease-in-smooth: var(--devui-animation-ease-in-smooth, cubic-bezier(0.645, 0.045, 0.355, 1));// 命名与实际曲线不符，待废弃

@devui-animation-duration-slow: var(--devui-animation-duration-slow, 300ms);
@devui-animation-duration-base: var(--devui-animation-duration-base, 200ms);
@devui-animation-duration-fast: var(--devui-animation-duration-fast, 100ms);

@devui-animation-ease-in: var(--devui-animation-ease-in, cubic-bezier(0.5, 0, 0.84, 0.25));
@devui-animation-ease-out: var(--devui-animation-ease-out, cubic-bezier(0.16, 0.75, 0.5, 1));
@devui-animation-ease-in-out: var(--devui-animation-ease-in-out, cubic-bezier(0.5, 0.05, 0.5, 0.95));
@devui-animation-ease-in-out-smooth: var(--devui-animation-ease-in-out-smooth, cubic-bezier(0.645, 0.045, 0.355, 1));
@devui-animation-linear: var(--devui-animation-linear, cubic-bezier(0, 0, 1, 1));

// 临时层
// 若存在遮罩，则遮罩基于对应z-index值-1
@devui-z-index-full-page-overlay: var(--devui-z-index-full-page-overlay, 1080); // 全屏覆盖类元素
@devui-z-index-pop-up: var(--devui-z-index-pop-up, 1060); // 提示类信息，popover，tooltip等
@devui-z-index-dropdown: var(--devui-z-index-dropdown, 1052); // 下拉菜单，dropdown等, 兼容, 取值待重新定义
@devui-z-index-modal: var(--devui-z-index-modal, 1050);// 弹窗,
@devui-z-index-drawer: var(--devui-z-index-drawer, 1040);// 抽屉板
@devui-z-index-framework: var(--devui-z-index-framework, 1000);// 框架类元素，header,sideMenu等

// 内容层，根据需要设置，zIndex需小于临时层

// 背景层，根据需要设置，zIndex需小于内容层
