feat: add devui-theme

packages/devui-theme/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

packages/devui-theme/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "devui-theme",
+  "version": "0.0.1",
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "css-vars-ponyfill": "^2.4.7",
+    "enquirejs-ssr": "^2.1.7",
+    "rxjs": "^7.5.4",
+    "vue": "^3.2.25"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^2.2.0",
+    "typescript": "^4.5.4",
+    "vite": "^2.8.0",
+    "vue-tsc": "^0.29.8"
+  }
+}

packages/devui-theme/src/index.ts

@@ -0,0 +1,2 @@
+export * from './theme';
+export * from './theme-collection';

packages/devui-theme/src/styles-var/devui-var.less

@@ -0,0 +1 @@
+// empty file wait to fill in

packages/devui-theme/src/styles-var/devui-var.scss

@@ -0,0 +1,6 @@
+@import './private/color';
+@import './private/font';
+@import './private/shadow';
+@import './private/corner';
+@import './private/animation';
+@import './private/z-index';

packages/devui-theme/src/styles-var/private/_animation.scss

@@ -0,0 +1,9 @@
+$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));

packages/devui-theme/src/styles-var/private/_color.scss

@@ -0,0 +1,100 @@
+// 基础变量
+$devui-global-bg: var(--devui-global-bg, #f3f6f8);                   // 全局带底色背景
+$devui-global-bg-normal: var(--devui-global-bg-normal, #ffffff);     // 全局白色背景
+$devui-base-bg: var(--devui-base-bg, #ffffff);                       // 基础区块背景白色
+$devui-base-bg-dark: var(--devui-base-bg-dark, #333854);             // 基础区块背景深色(固定)
+$devui-brand: var(--devui-brand, #5e7ce0);                           // 品牌色
+$devui-brand-foil: var(--devui-brand-foil, #859bff);                 // 品牌色辅助色、正衬色
+$devui-brand-hover: var(--devui-brand-hover, #7693f5);               // 品牌色高亮色（加亮）
+$devui-brand-active: var(--devui-brand-active, #526ecc);             // 品牌色激活色（加深）
+$devui-brand-active-focus: var(--devui-brand-active-focus, #344899); // 品牌色焦点色（重度加深）
+$devui-contrast: var(--devui-contrast, #c7000b);                     // 品牌色撞色、对比色、反衬色、第二品牌色
+$devui-text: var(--devui-text, #252b3a);                             // 正文文本
+$devui-text-weak: var(--devui-text-weak, #575d6c);                   // 弱化的正文信息（手风琴子项，表头）
+$devui-aide-text: var(--devui-aide-text, #8a8e99);                   // 辅助文本、帮助信息（面包屑）
+$devui-aide-text-stress: var(--devui-aide-text-stress, #575d6c);     // 辅助文本、帮助信息里的强调色
+$devui-placeholder: var(--devui-placeholder, #8a8e99);               // 占位符
+$devui-light-text: var(--devui-light-text, #ffffff);                 // 有色深色背景下字体颜色（固定）
+$devui-dark-text: var(--devui-dark-text, #252b3a);                   // 有色浅色背景下字体颜色（固定）
+$devui-link: var(--devui-link, #526ecc);                             // 链接文本颜色
+$devui-link-active: var(--devui-link-active, #344899);               // 链接文本悬停/激活颜色
+$devui-link-light: var(--devui-link-light, #96adfa);                 // 深色背景下链接文本颜色
+$devui-link-light-active: var(--devui-link-light-active, #beccfa);   // 深色背景下链接文本悬停/激活颜色
+$devui-line: var(--devui-line, #adb0b8);                             // 边框分割线，仅用于边框
+$devui-dividing-line: var(--devui-dividing-line, #dfe1e6);           // 内容分割线，用于内容之间的分割
+$devui-block: var(--devui-block, #ffffff);                           // 大面积的不可折叠区块的背景色（例如顶部导航背景色）
+$devui-area: var(--devui-area, #f8f8f8);                             // 可折叠区块的背景色（展开区域颜色）
+$devui-danger: var(--devui-danger, #f66f6a);                         // 失败、错误、告警
+$devui-warning: var(--devui-warning, #fac20a);                       // 警告、需注意类型提示
+$devui-waiting: var(--devui-waiting, #9faad7);                       // 等待中
+$devui-success: var(--devui-success, #50d4ab);                       // 成功、正确
+$devui-info: var(--devui-info, #5e7ce0);                             // 通知、一般提示、执行中
+$devui-initial: var(--devui-initial, #e9edfa);                       // 初始化、未执行
+$devui-unavailable: var(--devui-unavailable, #f5f5f6);               // 不可用、禁用状态
+$devui-shadow: var(--devui-shadow, rgba(0, 0, 0, 0.2));              // 阴影色
+$devui-light-shadow: var(--devui-light-shadow, rgba(0, 0, 0, 0.1));  // 弱化阴影色
+
+// 图标
+$devui-icon-text: var(--devui-icon-text, #252b3a);                           // 文字图标颜色，同 正文颜色
+$devui-icon-bg: var(--devui-icon-bg, #ffffff);                               // svg图标 背景色
+$devui-icon-fill: var(--devui-icon-fill, #d3d5d9);                           // svg图标 灰色填充色
+$devui-icon-fill-hover: var(--devui-icon-fill-hover, #adb5ce);               // svg图标 灰色填充色悬停反馈色
+$devui-icon-fill-active: var(--devui-icon-fill-active, #5e7ce0);             // svg图标 高亮填充色（激活状态）
+$devui-icon-fill-active-hover: var(--devui-icon-fill-active-hover, #526ecc); // svg图标 高亮填充色悬停反馈色
+// 表单
+$devui-form-control-line: var(--devui-form-control-line, #adb0b8);                           // 表单控件边框色，同 边框分割线
+$devui-form-control-line-hover: var(--devui-form-control-line-hover, #575d6c);               // 表单控件边框悬停反馈色
+$devui-form-control-line-active: var(--devui-form-control-line-active, #5e7ce0);             // 表单控件边框激活色，用于获得焦点
+$devui-form-control-line-active-hover: var(--devui-form-control-line-active-hover, #344899); // 表单控件边框激活色，用于获得焦点且悬停
+// 列表
+$devui-list-item-active-bg: var(--devui-list-item-active-bg, #5e7ce0);                       // 列表类型单选选中背景
+$devui-list-item-active-text: var(--devui-list-item-active-text, #ffffff);                   // 列表类型单选选中背景搭配文本，同 有色深色背景下字体颜色（固定）
+$devui-list-item-active-hover-bg: var(--devui-list-item-active-hover-bg, #526ecc);           // 列表类型单选选中背景悬停反馈色（仅用于分页等）
+$devui-list-item-hover-bg: var(--devui-list-item-hover-bg, #f2f5fc);                         // 列表类型普通选项悬停背景
+$devui-list-item-hover-text: var(--devui-list-item-hover-text, #526ecc);                     // 列表类型普通选项悬停背景搭配文本
+$devui-list-item-selected-bg: var(--devui-list-item-selected-bg, #e9edfa);                   // 列表类型多选被选中的行色，仅用于表格类
+$devui-list-item-strip-bg: var(--devui-list-item-strip-bg, #f2f5fc);                         // 列表类型斑马纹色，仅用于表格类
+// 禁用
+$devui-disabled-bg: var(--devui-disabled-bg, #f5f5f6);     // disabled背景颜色
+$devui-disabled-line: var(--devui-disabled-line, #dfe1e6); // disabled边框颜色
+$devui-disabled-text: var(--devui-disabled-text, #adb0b8); // disabled文字颜色
+$devui-primary-disabled: var(--devui-primary-disabled, #beccfa); //主要按钮disabled状态文字颜色
+$devui-icon-fill-active-disabled: var(--devui-icon-fill-active-disabled, #beccfa);  // svg图标激活状态禁用色
+// 特殊背景色
+$devui-label-bg: var(--devui-label-bg, #eef0f5);                             // 默认标签化选项背景色
+$devui-connected-overlay-bg: var(--devui-connected-overlay-bg, #ffffff);     // 有连接点的弹出菜单层背景色
+$devui-connected-overlay-line: var(--devui-connected-overlay-line, #526ecc); // 有连接点的弹出菜单层边框色
+$devui-fullscreen-overlay-bg: var(--devui-fullscreen-overlay-bg, #ffffff);   // 全屏类型的弹出内容层背景色（模态弹窗）
+$devui-feedback-overlay-bg: var(--devui-feedback-overlay-bg, #464d6e);       // 信息提示反馈类型的漂浮层背景色（toast、popover）
+$devui-feedback-overlay-text: var(--devui-feedback-overlay-text, #dfe1e6);   // 信息提示反馈类型的漂浮层背景色搭配文本色
+$devui-embed-search-bg: var(--devui-embed-search-bg, #f2f5fc);               // 被嵌套的无边框搜索框背景色
+$devui-embed-search-bg-hover: var(--devui-embed-search-bg-hover, #eef0f5);   // 被嵌套的无边框搜索框背景色
+$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, #e9edfa); // datepicker范围中的日期hover的反馈背景色
+
+// 按钮
+$devui-primary: var(--devui-primary, #5e7ce0);                // 主要按钮，同品牌色
+$devui-primary-hover: var(--devui-primary-hover, #7693f5);    // 主要按钮悬停
+$devui-primary-active: var(--devui-primary-active, #344899);  // 主要按钮激活
+
+$devui-contrast-hover: var(--devui-contrast-hover, #d64a52);  // 突出按钮悬停
+$devui-contrast-active: var(--devui-contrast-active, #b12220);// 突出按钮激活
+
+// 状态
+$devui-danger-line: var(--devui-danger-line, #f66f6a);  // 失败边框
+$devui-danger-bg: var(--devui-danger-bg, #ffeeed);      // 失败底色
+
+$devui-warning-line: var(--devui-warning-line, #fa9841);// 警告边框
+$devui-warning-bg: var(--devui-warning-bg, #fff3e8);    // 警告底色
+
+$devui-info-line: var(--devui-info-line, #5e7ce0);      // 通知边框
+$devui-info-bg: var(--devui-info-bg, #f2f5fc);          // 通知底色
+
+$devui-success-line: var(--devui-success-line, #50d4ab);// 成功边框
+$devui-success-bg: var(--devui-success-bg, #edfff9);    // 成功底色
+$devui-primary-line: var(--devui-primary-line, #5e7ce0);// 主要边框
+$devui-primary-bg: var(--devui-primary-bg, #f2f5fc);    // 主要底色
+
+$devui-default-line: var(--devui-default-line, #5e7ce0);// 默认边框
+$devui-default-bg: var(--devui-default-bg, #f3f6f8);    // 默认底色

packages/devui-theme/src/styles-var/private/_corner.scss

@@ -0,0 +1,5 @@
+//圆角变量
+
+$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); //卡片圆角

packages/devui-theme/src/styles-var/private/_font.scss

@@ -0,0 +1,21 @@
+// 字号大小变量
+
+$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;

packages/devui-theme/src/styles-var/private/_shadow.scss

@@ -0,0 +1,12 @@
+//阴影变量
+
+$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-connected-overlay, 0 2px 8px 0); //有连接点的弹出(覆盖)层 (DatePicker Cascader Select TagsInput Pagination的下拉菜单等)
+
+$devui-shadow-length-hover : var(--devui-shadow-length-hover, 0 4px 16px 0); //涉及到hover的地方
+$devui-shadow-length-feedback-overlay : var(--devui-shadow-length-feedback-overlay, 0 4px 16px 0); //信息提示反馈类 (PopOver Tooltip Toast StepsGuide等)
+
+$devui-shadow-length-fullscreen-overlay: var(--devui-shadow-fullscreen-overlay, 0 8px 40px 0); //无连接点的弹出(覆盖)层 (Drawer Modal ImagePreview等)

packages/devui-theme/src/styles-var/private/_variables.scss

@@ -0,0 +1,43 @@
+@import './color';
+@import '../core/font';
+@import '../theme/font';
+
+$text-color: $devui-text;
+$font-family: 'HuaweiFont', 'Helvetica','Arial', 'PingFangSC-Regular', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑','Microsoft JhengHei';
+$font-variant-base: tabular-nums;
+$body-background: $devui-base-bg;
+$devui-font-size: $devui-font-size; // 12px
+// $devui-font-size-modal-title: $devui-font-size-modal-title; // 18px
+$font-size-page-title: $devui-font-size-page-title; // 16px
+// $devui-font-size-card-title: $devui-font-size-card-title; // 14px
+.devui-font-size-base {
+  font-size: $devui-font-size; // 12px
+}
+
+.devui-font-base {
+  @include font-content(); // 12px normal 1.5
+}
+
+.devui-font-size-modal-title {
+  font-size: $devui-font-size-modal-title; // 18px
+}
+
+.devui-font-modal-title {
+  @include font-title($devui-font-size-modal-title); // 18px bold 1.5
+}
+
+.devui-font-size-page-title {
+  font-size: $devui-font-size-page-title; // 16px
+}
+
+.devui-font-page-title {
+  @include font-title(); // 16px bold 1.5
+}
+
+.devui-font-size-secondary-title {
+  font-size: $devui-font-size-card-title; // 14px
+}
+
+.devui-font-secondary-title {
+  @include font-title($devui-font-size-card-title); // 14px bold 1.5
+}

packages/devui-theme/src/styles-var/private/_z-index.scss

@@ -0,0 +1,12 @@
+// 临时层
+// 若存在遮罩，则遮罩基于对应z-index值-1
+$devui-z-index-full-page-overlay: var(--devui-z-index-full-page-overlay, 1080); // 全屏覆盖类元素
+$devui-z-index-dropdown: var(--devui-z-index-dropdown, 1052); // 下拉菜单，dropdown等
+$devui-z-index-pop-up: var(--devui-z-index-pop-up, 1060); // 提示类信息，popover，tooltip等
+$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需小于内容层