ng-devui/styles-var/devui-var.less

DevUI components based on Angular

// 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: #e6eeff;
@devui-blue-10: #cedefd;
@devui-blue-20: #9dbdfc;
@devui-blue-30: #6b9bfa;
@devui-blue-40: #3979f9;
@devui-blue-50: #0a59f7;
@devui-blue-60: #0950de;
@devui-blue-70: #0039bd;
@devui-blue-80: #002794;
@devui-blue-90: #00196b;
@devui-blue-100: #000f42;

@devui-sky-5: #e8fcfd;
@devui-sky-10: #c9f6f9;
@devui-sky-20: #a4ecf1;
@devui-sky-30: #7ddfe7;
@devui-sky-40: #55ccd9;
@devui-sky-50: #2cb8c9;
@devui-sky-60: #1c94a4;
@devui-sky-70: #127180;
@devui-sky-80: #094c57;
@devui-sky-100: #04282f;

@devui-green-5: #e7fbf2;
@devui-green-10: #bcf2db;
@devui-green-20: #8fe5c2;
@devui-green-30: #63d5a8;
@devui-green-40: #36c18d;
@devui-green-50: #09aa71;
@devui-green-60: #058358;
@devui-green-70: #036142;
@devui-green-80: #02422e;
@devui-green-100: #00291d;

@devui-lime-5: #f2fbe9;
@devui-lime-10: #dff4cc;
@devui-lime-20: #c6e9a8;
@devui-lime-30: #a8db81;
@devui-lime-40: #87c859;
@devui-lime-50: #62b42e;
@devui-lime-60: #488e20;
@devui-lime-70: #316614;
@devui-lime-80: #1b3e0a;
@devui-lime-100: #0c2004;

@devui-yellow-5: #fefce0;
@devui-yellow-10: #fdf8b8;
@devui-yellow-20: #fef08a;
@devui-yellow-30: #fde55c;
@devui-yellow-40: #fcd72e;
@devui-yellow-50: #fcc800;
@devui-yellow-60: #d19f00;
@devui-yellow-70: #9e7400;
@devui-yellow-80: #614500;
@devui-yellow-100: #2e1f00;

@devui-orange-5: #fef5e8;
@devui-orange-10: #fde2bd;
@devui-orange-20: #fcce92;
@devui-orange-30: #f9b766;
@devui-orange-40: #f69e39;
@devui-orange-50: #f4840c;
@devui-orange-60: #c76207;
@devui-orange-70: #954304;
@devui-orange-80: #642802;
@devui-orange-100: #3d1601;

@devui-red-5: #fee7e8;
@devui-red-10: #fabdc1;
@devui-red-20: #f59297;
@devui-red-30: #ee696f;
@devui-red-40: #e7434a;
@devui-red-50: #e02128;
@devui-red-60: #c7000b;
@devui-red-70: #850f12;
@devui-red-80: #59080a;
@devui-red-100: #350305;

@devui-magenta-5: #fee5f2;
@devui-magenta-10: #fcc3e0;
@devui-magenta-20: #f99ac7;
@devui-magenta-30: #f470ab;
@devui-magenta-40: #ed448a;
@devui-magenta-50: #e61866;
@devui-magenta-60: #c40054;
@devui-magenta-70: #811439;
@devui-magenta-80: #540d24;
@devui-magenta-100: #330614;

@devui-purple-5: #f7edfe;
@devui-purple-10: #e8cffe;
@devui-purple-20: #d9b1fd;
@devui-purple-30: #cb8efb;
@devui-purple-40: #bf68fa;
@devui-purple-50: #b62bf7;
@devui-purple-60: #8a21bc;
@devui-purple-70: #651b8b;
@devui-purple-80: #520673;
@devui-purple-100: #36004d;

@devui-gray-5: #f3f3f3;
@devui-gray-10: #dfdfdf;
@devui-gray-20: #c9c9c9;
@devui-gray-30: #aeaeae;
@devui-gray-40: #939393;
@devui-gray-50: #777777;
@devui-gray-60: #595959;
@devui-gray-70: #393939;
@devui-gray-80: #2a2a2a;
@devui-gray-90: #191919;
@devui-gray-100: #000000;

@devui-slate-5: #fafafa;
@devui-slate-10: #f5f5f5;
@devui-slate-20: #f0f0f0;
@devui-slate-30: #e6e6e6;
@devui-slate-40: #dbdbdb;
@devui-slate-50: #c2c2c2;
@devui-slate-60: #808080;
@devui-slate-70: #595959;
@devui-slate-80: #333333;
@devui-slate-90: #191919;
@devui-slate-100: #000000;

@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;

// 滚动条宽度
@devui-scrollbar-width: 8px;
@devui-scrollbar-width-sm: 4px;


// need to run `node scripts/themeable/transfer-sass-var-to-theme-data.js ` when modified
// 基础变量
@devui-global-bg: var(--devui-global-bg, @devui-slate-10); // 全局带底色背景
@devui-glass-morphism-bg: var(--devui-glass-morphism-bg, rgba(245, 246, 248, 0.9)); // 毛玻璃样式背景色
@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-90); // 主要文字，正文文本
@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-60); // 占位符
@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-40); // 边框分割线，仅用于边框
@devui-dividing-line: var(--devui-dividing-line, @devui-slate-20); // 内容分割线，用于内容之间的分割
@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-60); // 成功、正确
@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(0, 0, 0, 0.16)); // 阴影色
@devui-light-shadow: var(--devui-light-shadow, rgba(0, 0, 0, 0.08)); // 弱化阴影色
@devui-connected-overlay-shadow: var(--devui-connected-overlay-shadow, rgba(0, 0, 0, 0.16)); // 下拉菜单类阴影色
@devui-feedback-overlay-shadow: var(--devui-feedback-overlay-shadow, rgba(0, 0, 0, 0.16)); // 信息展示类阴影色
@devui-feedback-overlay-backdrop: var(--devui-feedback-overlay-backdrop, rgba(0, 0, 0, 0.3)); // 弹窗等信息类遮罩层背景色
@devui-feedback-overlay-light-backdrop: var(--devui-feedback-overlay-light-backdrop, rgba(255, 255, 255, 0.6)); // 暗黑主题下加载的遮罩层背景色
@devui-hover-shadow: var(--devui-hover-shadow, rgba(0, 0, 0, 0.16)); // 信息展示类阴影色
@devui-table-column-shadow-color: var(--devui-table-column-shadow-color, rgba(37, 43, 58, 0.08)); // 固定列阴影色

// 图标
@devui-icon-text: var(--devui-icon-text, @devui-slate-60); // 文字图标颜色
@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-60); // svg弱化图标 灰色填充色
@devui-icon-fill-hover: var(--devui-icon-fill-hover, @devui-slate-90); // svg图标 灰色填充色悬停反馈色
@devui-icon-fill-active: var(--devui-icon-fill-active, @devui-slate-90); // 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-50); // svg图标 面型图标颜色
@devui-shape-icon-fill-hover: var(--devui-shape-icon-fill-hover, @devui-slate-60); // svg图标 面型图标悬浮色
@devui-shape-icon-fill-active: var(--devui-shape-icon-fill-active, @devui-slate-60); // svg图标 面型图标激活色
@devui-shape-icon-fill-disabled: var(--devui-shape-icon-fill-disabled, @devui-slate-20); // svg图标 面型图标激活色
// 表单
@devui-form-control-line: var(--devui-form-control-line, @devui-slate-40); // 表单控件边框色，同 边框分割线
@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-interactive-outline: var(--devui-form-control-interactive-outline, rgba(94, 124, 224, 0.08)); // 表单控件边框激活色的外框阴影色
@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-10); // 列表类型单选选中背景
@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-10); // 列表类型单选选中背景悬停反馈色（仅用于分页等）
@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-10); // 列表类型多选被选中的行色，仅用于表格类
@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-30); // disabled边框颜色
@devui-disabled-text: var(--devui-disabled-text, @devui-slate-50); // 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-slate-20); // 默认标签化选项背景色
@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, @devui-slate-80); // 信息提示反馈类型的漂浮层背景色（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的反馈背景色, glow模式下的外层涟漪
@devui-gray-form-control-bg: var(--devui-gray-form-control-bg, @devui-slate-10); // 灰色模式输入框默认背景色
@devui-gray-form-control-hover-bg: var(--devui-gray-form-control-hover-bg, @devui-gray-10); // 灰色模式输入框hover背景色
@devui-nav-expand-bg: var(--devui-nav-expand-bg, #fbfbfc); //菜单展开区域背景色

// 按钮
@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, #cc272a); // 突出按钮悬停
@devui-contrast-active: var(--devui-contrast-active, #78080e); // 突出按钮激活

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

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

@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-success-text: var(--devui-success-text, @devui-green-70); // 警告文字色

@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-h1-title: var(--devui-font-size-h1-title, 28px);
@devui-font-size-h2-title: var(--devui-font-size-h2-title, 24px);
@devui-font-size-h3-title: var(--devui-font-size-h3-title, 20px);
@devui-font-size-h4-title: var(--devui-font-size-h4-title, 18px);
@devui-font-size-h5-title: var(--devui-font-size-h5-title, 16px);

@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: var(--devui-font-title-weight, bold); //标题文字粗细
@devui-font-content-weight: var(--devui-font-content-weight, normal); //内容文字粗细
@devui-line-height-base: var(--devui-line-height-base, 1.5); //规范行高

//阴影变量

@devui-shadow-length-base: var(--devui-shadow-length-base, 0 1px 6px 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 12px 0); //有连接点的弹出(覆盖)层 (DatePicker Cascader Select TagsInput Pagination的下拉菜单等)

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

@devui-shadow-length-fullscreen-overlay: var(--devui-shadow-length-fullscreen-overlay, 0 16px 48px 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需小于内容层

  /* stylelint-disable */
:export {
  devui-global-bg: @devui-global-bg;
  devui-glass-morphism-bg: @devui-glass-morphism-bg;
  devui-global-bg-normal: @devui-global-bg-normal;
  devui-base-bg: @devui-base-bg;
  devui-base-bg-dark: @devui-base-bg-dark;
  devui-brand: @devui-brand;
  devui-brand-foil: @devui-brand-foil;
  devui-brand-hover: @devui-brand-hover;
  devui-brand-active: @devui-brand-active;
  devui-brand-active-focus: @devui-brand-active-focus;
  devui-contrast: @devui-contrast;
  devui-text: @devui-text;
  devui-text-weak: @devui-text-weak;
  devui-aide-text: @devui-aide-text;
  devui-aide-text-hover: @devui-aide-text-hover;
  devui-aide-text-stress: @devui-aide-text-stress;
  devui-placeholder: @devui-placeholder;
  devui-light-text: @devui-light-text;
  devui-dark-text: @devui-dark-text;
  devui-link: @devui-link;
  devui-link-active: @devui-link-active;
  devui-link-light: @devui-link-light;
  devui-link-light-active: @devui-link-light-active;
  devui-line: @devui-line;
  devui-dividing-line: @devui-dividing-line;
  devui-block: @devui-block;
  devui-area: @devui-area;
  devui-danger: @devui-danger;
  devui-warning: @devui-warning;
  devui-waiting: @devui-waiting;
  devui-success: @devui-success;
  devui-info: @devui-info;
  devui-initial: @devui-initial;
  devui-unavailable: @devui-unavailable;
  devui-shadow: @devui-shadow;
  devui-light-shadow: @devui-light-shadow;
  devui-connected-overlay-shadow: @devui-connected-overlay-shadow;
  devui-feedback-overlay-shadow: @devui-feedback-overlay-shadow;
  devui-feedback-overlay-backdrop: @devui-feedback-overlay-backdrop;
  devui-hover-shadow: @devui-hover-shadow;
  devui-table-column-shadow-color: @devui-table-column-shadow-color;
  devui-icon-text: @devui-icon-text;
  devui-icon-bg: @devui-icon-bg;
  devui-icon-fill: @devui-icon-fill;
  devui-icon-fill-weak: @devui-icon-fill-weak;
  devui-icon-fill-hover: @devui-icon-fill-hover;
  devui-icon-fill-active: @devui-icon-fill-active;
  devui-icon-fill-active-hover: @devui-icon-fill-active-hover;
  devui-shape-icon-fill: @devui-shape-icon-fill;
  devui-shape-icon-fill-hover: @devui-shape-icon-fill-hover;
  devui-shape-icon-fill-active: @devui-shape-icon-fill-active;
  devui-shape-icon-fill-disabled: @devui-shape-icon-fill-disabled;
  devui-form-control-line: @devui-form-control-line;
  devui-form-control-bg: @devui-form-control-bg;
  devui-form-control-line-hover: @devui-form-control-line-hover;
  devui-form-control-line-active: @devui-form-control-line-active;
  devui-form-control-interactive-outline: @devui-form-control-interactive-outline;
  devui-form-control-line-active-hover: @devui-form-control-line-active-hover;
  devui-list-item-active-bg: @devui-list-item-active-bg;
  devui-list-item-active-text: @devui-list-item-active-text;
  devui-list-item-active-hover-bg: @devui-list-item-active-hover-bg;
  devui-list-item-hover-bg: @devui-list-item-hover-bg;
  devui-list-item-hover-text: @devui-list-item-hover-text;
  devui-list-item-selected-bg: @devui-list-item-selected-bg;
  devui-list-item-strip-bg: @devui-list-item-strip-bg;
  devui-disabled-bg: @devui-disabled-bg;
  devui-disabled-line: @devui-disabled-line;
  devui-disabled-text: @devui-disabled-text;
  devui-primary-disabled: @devui-primary-disabled;
  devui-icon-fill-active-disabled: @devui-icon-fill-active-disabled;
  devui-label-bg: @devui-label-bg;
  devui-connected-overlay-bg: @devui-connected-overlay-bg;
  devui-connected-overlay-line: @devui-connected-overlay-line;
  devui-fullscreen-overlay-bg: @devui-fullscreen-overlay-bg;
  devui-feedback-overlay-bg: @devui-feedback-overlay-bg;
  devui-feedback-overlay-text: @devui-feedback-overlay-text;
  devui-embed-search-bg: @devui-embed-search-bg;
  devui-embed-search-bg-hover: @devui-embed-search-bg-hover;
  devui-float-block-shadow: @devui-float-block-shadow;
  devui-highlight-overlay: @devui-highlight-overlay;
  devui-range-item-hover-bg: @devui-range-item-hover-bg;
  devui-gray-form-control-bg: @devui-gray-form-control-bg;
  devui-gray-form-control-hover-bg: @devui-gray-form-control-hover-bg;
  devui-nav-expand-bg: @devui-nav-expand-bg;
  devui-primary: @devui-primary;
  devui-primary-hover: @devui-primary-hover;
  devui-primary-active: @devui-primary-active;
  devui-contrast-hover: @devui-contrast-hover;
  devui-contrast-active: @devui-contrast-active;
  devui-danger-line: @devui-danger-line;
  devui-danger-bg: @devui-danger-bg;
  devui-danger-text: @devui-danger-text;
  devui-warning-line: @devui-warning-line;
  devui-warning-bg: @devui-warning-bg;
  devui-warning-text: @devui-warning-text;
  devui-info-line: @devui-info-line;
  devui-info-bg: @devui-info-bg;
  devui-success-line: @devui-success-line;
  devui-success-bg: @devui-success-bg;
  devui-success-text: @devui-success-text;
  devui-primary-line: @devui-primary-line;
  devui-primary-bg: @devui-primary-bg;
  devui-default-line: @devui-default-line;
  devui-default-bg: @devui-default-bg;
  devui-animation-ease-in-smooth: @devui-animation-ease-in-smooth;
  devui-animation-duration-slow: @devui-animation-duration-slow;
  devui-animation-duration-base: @devui-animation-duration-base;
  devui-animation-duration-fast: @devui-animation-duration-fast;
  devui-animation-ease-in: @devui-animation-ease-in;
  devui-animation-ease-out: @devui-animation-ease-out;
  devui-animation-ease-in-out: @devui-animation-ease-in-out;
  devui-animation-ease-in-out-smooth: @devui-animation-ease-in-out-smooth;
  devui-animation-linear: @devui-animation-linear;
  devui-border-radius: @devui-border-radius;
  devui-border-radius-feedback: @devui-border-radius-feedback;
  devui-border-radius-card: @devui-border-radius-card;
  devui-border-radius-full: @devui-border-radius-full;
  devui-font-size: @devui-font-size;
  devui-font-size-card-title: @devui-font-size-card-title;
  devui-font-size-page-title: @devui-font-size-page-title;
  devui-font-size-modal-title: @devui-font-size-modal-title;
  devui-font-size-price: @devui-font-size-price;
  devui-font-size-data-overview: @devui-font-size-data-overview;
  devui-font-size-h1-title: @devui-font-size-h1-title;
  devui-font-size-h2-title: @devui-font-size-h2-title;
  devui-font-size-h3-title: @devui-font-size-h3-title;
  devui-font-size-h4-title: @devui-font-size-h4-title;
  devui-font-size-h5-title: @devui-font-size-h5-title;
  devui-font-size-icon: @devui-font-size-icon;
  devui-font-size-sm: @devui-font-size-sm;
  devui-font-size-md: @devui-font-size-md;
  devui-font-size-lg: @devui-font-size-lg;
  devui-font-title-weight: @devui-font-title-weight;
  devui-font-content-weight: @devui-font-content-weight;
  devui-line-height-base: @devui-line-height-base;
  devui-shadow-length-base: @devui-shadow-length-base;
  devui-shadow-length-slide-left: @devui-shadow-length-slide-left;
  devui-shadow-length-slide-right: @devui-shadow-length-slide-right;
  devui-shadow-length-connected-overlay: @devui-shadow-length-connected-overlay;
  devui-shadow-length-hover: @devui-shadow-length-hover;
  devui-shadow-length-feedback-overlay: @devui-shadow-length-feedback-overlay;
  devui-shadow-length-fullscreen-overlay: @devui-shadow-length-fullscreen-overlay;
  devui-z-index-full-page-overlay: @devui-z-index-full-page-overlay;
  devui-z-index-pop-up: @devui-z-index-pop-up;
  devui-z-index-dropdown: @devui-z-index-dropdown;
  devui-z-index-modal: @devui-z-index-modal;
  devui-z-index-drawer: @devui-z-index-drawer;
  devui-z-index-framework: @devui-z-index-framework;
}