@lingxiteam/theme-utils 0.2.9 → 0.2.10

package/README.md

@@ -103,6 +103,8 @@ insertLink('12312', 'http://xxx.css', true);
         canEdit: false,
         // 编辑从什么地方支撑这个属性
         extendsKey: 'Form',
+        // 表示这个字段跟随全局主题变量
+        followTheme: '@font-size-base',
       },
     },
     groupsName: '分组名称',
@@ -114,6 +116,10 @@ insertLink('12312', 'http://xxx.css', true);
         fontSize: '14px',
       },
     ],
+    // 是否跟随主题的开关，存在表示当前为跟随
+    followThemes: {
+      '@font-size-base': ['fontSize'],
+    },
     // 根据上面的配置项和下面的模版解析得到最终挂在的 css
     tpl: '.hh { font-size: fontSize}',
     // 如果它被别人继承，并且自己需要自定义样式，如父级自定义样式为 .aa.list{ .item { } } 子级的自定义样式为 .aa.item { }

package/dist/config/Form.js

@@ -731,8 +731,8 @@ export var Form = {
       props: {
         name: '滑动输入条',
         range: false,
-        defaultValue: 0,
-        basicStatus: 1,
+        defaultValue: 50,
+        basicStatus: 4,
         labelCol: 8,
         wrapperCol: 16,
         included: true,

package/dist/h5config/Button.d.ts

@@ -20,6 +20,7 @@ export declare const Button: {
             type: string;
             label: string;
             groupsName: string;
+            followTheme: string;
         };
         borderColor: {
             type: string;
@@ -55,6 +56,9 @@ export declare const Button: {
         paddingValue: string;
         marginValue: string;
     }[];
+    followThemes: {
+        '@primary-color': string[];
+    };
     tpl: string;
     components: ({
         id: string;

package/dist/h5config/Button.js

@@ -19,7 +19,8 @@ export var Button = {
     backgroundColor: {
       type: 'color',
       label: '主题颜色',
-      groupsName: '颜色'
+      groupsName: '颜色',
+      followTheme: '@primary-color'
     },
     borderColor: {
       type: 'color',
@@ -55,6 +56,9 @@ export var Button = {
     paddingValue: '7px 12px 7px 12px',
     marginValue: '0px'
   }],
+  followThemes: {
+    '@primary-color': ['backgroundColor']
+  },
   tpl: "\n  .adm-button{\n    --border-color: borderColor;\n    color: textColor;\n    line-height: lineHeight;\n    font-size: fontSize;\n    border-radius: borderRadius;\n    padding: paddingValue;\n    margin: marginValue;\n  }\n  .adm-button.adm-button-large{\n    font-size: fontSize;\n    padding: paddingValue;\n    margin: marginValue;\n  }\n  .adm-button:not(.adm-button-default){\n    color: #fff;\n  }\n  .adm-button-primary{\n    --color: backgroundColor;\n  }\n  .lcdp-button-type-link{\n    color: backgroundColor;\n  }\n    ",
   components: [{
     id: 'Button_5647878',

package/dist/h5config/DCheckbox.d.ts

@@ -5,11 +5,13 @@ export declare const DCheckbox: {
             type: string;
             label: string;
             groupsName: string;
+            followTheme: string;
         };
         selectBorderRadius: {
             type: string;
             label: string;
             groupsName: string;
+            followTheme: string;
         };
         itemBgColor: {
             type: string;
@@ -123,6 +125,9 @@ export declare const DCheckbox: {
         itemBorderRadius: string;
         itemBgColor: string;
     }[];
+    followThemes: {
+        '@primary-color': string[];
+    };
     tpl: string;
     components: {
         id: string;

package/dist/h5config/DCheckbox.js

@@ -4,12 +4,14 @@ export var DCheckbox = {
     selectBgColor: {
       type: 'color',
       label: '选中背景颜色',
-      groupsName: '背景颜色'
+      groupsName: '背景颜色',
+      followTheme: '@primary-color'
     },
     selectBorderRadius: {
       type: 'color',
       label: '选中边框颜色',
-      groupsName: '边框'
+      groupsName: '边框',
+      followTheme: '@primary-color'
     },
     itemBgColor: {
       type: 'color',
@@ -165,6 +167,9 @@ export var DCheckbox = {
     itemBorderRadius: '#e5e5e5',
     itemBgColor: 'rgba(0,0,0,0)'
   }],
+  followThemes: {
+    '@primary-color': ['selectBorderRadius', 'selectBgColor']
+  },
   tpl: "\n    .lingxiteam-dform-check-box .lingxiteam-dform-box-content .lingxiteam-dform-box-wrapper .lingxiteam-dform-box-botton{\n      background-color: itemBgColor;\n      border-color: itemBorderRadius;\n    }\n     .lingxiteam-dform-check-box .lingxiteam-dform-box-content .lingxiteam-dform-box-wrapper .lingxiteam-dform-box-botton-selectAll-circular{\n      background-color: itemBgColor;\n      border-color: itemBorderRadius;\n    }\n     .lingxiteam-dform-check-box .lingxiteam-dform-box-content .lingxiteam-dform-box-wrapper .lingxiteam-dform-box-botton-selectAll-square{\n      background-color: itemBgColor;\n      border-color: itemBorderRadius;\n    }\n    .lingxiteam-dform-check-box .lingxiteam-dform-box-content .lingxiteam-dform-box-wrapper .lingxiteam-dform-box-botton-checked{\n      background-color: selectBgColor;\n      border-color: selectBorderRadius;\n    }\n     .lingxiteam-dform-check-box .lingxiteam-dform-box-content .lingxiteam-dform-box-wrapper .lingxiteam-dform-box-botton-selectAll-checked{\n      background-color: selectBgColor;\n      border-color: selectBorderRadius;\n    }\n     .lingxiteam-dform-check-box .lingxiteam-dform-box-content .lingxiteam-dform-box-wrapper .lingxiteam-dform-box-botton-selectAll-half-checked{\n      background-color: selectBgColor;\n      border-color: selectBorderRadius;\n    }",
   components: [{
     id: 'DForm_333712',

package/dist/h5config/DformFile.d.ts

@@ -11,6 +11,7 @@ export declare const DformFile: {
             type: string;
             label: string;
             groupsName: string;
+            followTheme: string;
         };
         btnBorderRadius: {
             type: string;
@@ -62,6 +63,9 @@ export declare const DformFile: {
         btnIconColor: string;
         btnBorderRadius: string;
     }[];
+    followThemes: {
+        '@primary-color': string[];
+    };
     tpl: string;
     components: {
         id: string;

package/dist/h5config/DformFile.js

@@ -10,7 +10,8 @@ export var DformFile = {
     btnIconColor: {
       type: 'color',
       label: '上传按钮标题颜色',
-      groupsName: '背景颜色'
+      groupsName: '背景颜色',
+      followTheme: '@primary-color'
     },
     btnBorderRadius: {
       type: 'px',
@@ -80,6 +81,9 @@ export var DformFile = {
     btnIconColor: '#108ee9',
     btnBorderRadius: '100px'
   }],
+  followThemes: {
+    '@primary-color': ['btnIconColor']
+  },
   tpl: ".lcdp-form-item {\n    .lingxiteam-dform-file-extra-btn{\n      border-radius: btnBorderRadius;\n      background: btnBgColor;\n      > span {\n        color: btnIconColor;\n      }\n    }\n  }",
   components: [{
     id: 'DForm_333712',

package/dist/h5config/DformRadio.d.ts

@@ -5,11 +5,13 @@ export declare const DformRadio: {
             type: string;
             label: string;
             groupsName: string;
+            followTheme: string;
         };
         selectBorderRadius: {
             type: string;
             label: string;
             groupsName: string;
+            followTheme: string;
         };
         itemBgColor: {
             type: string;
@@ -123,6 +125,9 @@ export declare const DformRadio: {
         itemBorderRadius: string;
         itemBgColor: string;
     }[];
+    followThemes: {
+        '@primary-color': string[];
+    };
     tpl: string;
     components: {
         id: string;

package/dist/h5config/DformRadio.js

@@ -4,12 +4,14 @@ export var DformRadio = {
     selectBgColor: {
       type: 'color',
       label: '选中背景颜色',
-      groupsName: '背景颜色'
+      groupsName: '背景颜色',
+      followTheme: '@primary-color'
     },
     selectBorderRadius: {
       type: 'color',
       label: '选中边框颜色',
-      groupsName: '边框'
+      groupsName: '边框',
+      followTheme: '@primary-color'
     },
     itemBgColor: {
       type: 'color',
@@ -165,6 +167,9 @@ export var DformRadio = {
     itemBorderRadius: '#e5e5e5',
     itemBgColor: 'rgba(0,0,0,0)'
   }],
+  followThemes: {
+    '@primary-color': ['selectBorderRadius', 'selectBgColor']
+  },
   tpl: "\n    .lingxiteam-dform-radio-button{\n      background-color: itemBgColor;\n      border-color: itemBorderRadius;\n    }\n    .lingxiteam-dform-radio-checked{\n      border-color: selectBorderRadius;\n    }\n    .lingxiteam-dform-radio-inner-button{\n      background-color: selectBgColor;\n    }\n   ",
   components: [{
     id: 'DForm_333712',

package/dist/h5config/DformSwitch.d.ts

@@ -6,6 +6,7 @@ export declare const DformSwitch: {
             type: string;
             label: string;
             groupsName: string;
+            followTheme: string;
         };
         closeColor: {
             type: string;
@@ -64,6 +65,9 @@ export declare const DformSwitch: {
         openColor: string;
         closeColor: string;
     }[];
+    followThemes: {
+        '@primary-color': string[];
+    };
     tpl: string;
     components: {
         id: string;

package/dist/h5config/DformSwitch.js

@@ -5,7 +5,8 @@ export var DformSwitch = {
     openColor: {
       type: 'color',
       label: '开启颜色',
-      groupsName: '文字'
+      groupsName: '文字',
+      followTheme: '@primary-color'
     },
     closeColor: {
       type: 'color',
@@ -82,6 +83,9 @@ export var DformSwitch = {
     openColor: '#108ee9',
     closeColor: '#ddd'
   }],
+  followThemes: {
+    '@primary-color': ['openColor']
+  },
   tpl: ".lcdp-form-item {\n      .adm-switch.adm-switch-checked .adm-switch-checkbox{\n        background: openColor;\n      }\n      .lingxiteam-dform-switch .adm-switch-checkbox{\n        background: closeColor;\n      }\n      .lingxiteam-dform-switch .adm-switch-checkbox::before{\n        background: closeColor;\n      }\n    }\n    ",
   components: [{
     id: 'DForm_333712',

package/dist/h5config/Link.d.ts

@@ -5,6 +5,7 @@ export declare const ALink: {
             type: string;
             label: string;
             groupsName: string;
+            followTheme: string;
         };
     };
     groupsName: string;
@@ -13,6 +14,9 @@ export declare const ALink: {
     defaultValue: {
         textColor: string;
     }[];
+    followThemes: {
+        '@color-link': string[];
+    };
     tpl: string;
     components: {
         id: string;

package/dist/h5config/Link.js

@@ -4,7 +4,8 @@ export var ALink = {
     textColor: {
       type: 'color',
       label: '文本颜色',
-      groupsName: '文字'
+      groupsName: '文字',
+      followTheme: '@color-link'
     }
   },
   groupsName: '基础',
@@ -13,7 +14,10 @@ export var ALink = {
   defaultValue: [{
     textColor: '#108ee9'
   }],
-  tpl: "\n  a{\n    color: textColor;\n  }",
+  followThemes: {
+    '@color-link': ['textColor']
+  },
+  tpl: "\n  a {\n    color: textColor;\n  }\n  a:hover {\n    color: textColor;\n    opacity: 0.6;\n  }",
   components: [{
     id: 'ALink_414643',
     label: '超链接',

package/dist/h5config/StaticTabs.d.ts

@@ -11,6 +11,7 @@ export declare const StaticTabs: {
             type: string;
             label: string;
             groupsName: string;
+            followTheme: string;
         };
         selectBorderRadius: {
             type: string;
@@ -21,6 +22,7 @@ export declare const StaticTabs: {
             type: string;
             label: string;
             groupsName: string;
+            followTheme: string;
         };
         selectFontWeight: {
             type: string;
@@ -70,6 +72,9 @@ export declare const StaticTabs: {
         selectBorderRadius: string;
         bodyBgColor: string;
     }[];
+    followThemes: {
+        '@primary-color': string[];
+    };
     tpl: string;
     components: {
         id: string;

package/dist/h5config/StaticTabs.js

@@ -16,7 +16,8 @@ export var StaticTabs = {
     backgroundColor: {
       type: 'color',
       label: '选项背景颜色',
-      groupsName: '选项'
+      groupsName: '选项',
+      followTheme: '@primary-color'
     },
     selectBorderRadius: {
       type: 'px',
@@ -26,7 +27,8 @@ export var StaticTabs = {
     selectTextColor: {
       type: 'color',
       label: '选中项文本颜色',
-      groupsName: '选中项'
+      groupsName: '选中项',
+      followTheme: '@primary-color'
     },
     selectFontWeight: {
       type: 'select',
@@ -124,6 +126,9 @@ export var StaticTabs = {
     // lineColor: '#108ee9',
   }],
 
+  followThemes: {
+    '@primary-color': ['backgroundColor', 'selectTextColor']
+  },
   tpl: ".use-app-statictabs {\n    .am-tabs-default-bar-content .am-tabs-default-bar-tab-active{\n      background: selectBgColor;\n    color: selectTextColor;\n    position: relative;\n    border-top-left-radius: selectBorderRadius;\n    border-top-right-radius: selectBorderRadius;\n    transform: perspective(200px) rotateX(25deg);\n    transform-origin: top center;\n    font-weight: selectFontWeight;\n    }\n    .am-tabs-default-bar-bottom .am-tabs-default-bar-content, .am-tabs-default-bar-top .am-tabs-default-bar-content{\n      background: backgroundColor;\n    }\n    .am-tabs-bottom, .am-tabs-top{\n      border-radius: selectBorderRadius;\n    }\n    .am-tabs-default-bar-content .am-tabs-default-bar-tab-active::before, .am-tabs-default-bar-content .am-tabs-default-bar-tab-active::after{\n      background: radial-gradient(0.24rem at 0.3rem 0, transparent 0.3rem, selectBgColor 0.23rem);\n    }\n    .am-tabs-default-bar-tab{\n      color: textColor;\n      font-weight: fontWeight;\n      font-size: fontSize;\n    }\n    .am-tabs-pane-wrap {\n      background-color: bodyBgColor;\n    }\n  }\n",
   components: [{
     id: 'StaticTabs_828878',

package/dist/lx-mobile.d.ts

@@ -1,3 +1,15 @@
+export declare const THEME_KEYS_MOBILE_TITLE: {
+    '@primary-color': string;
+    '@border-color-base': string;
+    '@font-size-base': string;
+    '@color-text-base': string;
+    '@color-text-placeholder': string;
+    '@font-size-heading': string;
+    '@button-font-size': string;
+    '@fill-base': string;
+    '@brand-primary-tap': string;
+    '@color-link': string;
+};
 export declare const MOBILE_ASSETS_CSS_TPL: any;
 export declare const mobileExtend: any;
 export declare const MOBILE_ASSETS_COMPONENT_LIST: unknown[];

package/dist/lx-mobile.js

@@ -32,6 +32,18 @@ import { Icon } from "./h5config/Icon";
 import { ALink } from "./h5config/Link";
 import { Card } from "./h5config/Card";
 import { Accordion } from "./h5config/Accordion";
+export var THEME_KEYS_MOBILE_TITLE = {
+  '@primary-color': '主题颜色',
+  '@border-color-base': '边框颜色',
+  '@font-size-base': '主字号',
+  '@color-text-base': '文字基本色',
+  '@color-text-placeholder': '文本框提示色',
+  '@font-size-heading': '标题字号',
+  '@button-font-size': '按钮字体',
+  '@fill-base': '组件背景色',
+  '@brand-primary-tap': '点击背景色',
+  '@color-link': '链接色'
+};
 export var MOBILE_ASSETS_CSS_TPL = {
   Icon: Icon,
   ALink: ALink,

package/dist/lx.d.ts

@@ -1,3 +1,19 @@
+export declare const THEME_KEYS_TITLE: {
+    '@primary-color': string;
+    '@font-size-base': string;
+    '@heading-color': string;
+    '@text-color': string;
+    '@text-color-secondary': string;
+    '@disabled-color': string;
+    '@border-radius-base': string;
+    '@padding': string;
+    '@border-color-base': string;
+    '@box-shadow-base': string;
+    '@link-color': string;
+    '@success-color': string;
+    '@warning-color': string;
+    '@error-color': string;
+};
 export declare const ASSETS_CSS_TPL: any;
 export declare const pcExtend: any;
 export declare const ASSETS_COMPONENT_LIST: unknown[];

package/dist/lx.js

@@ -35,6 +35,22 @@ import { Table } from "./config/Table";
 import { Tag } from "./config/Tag";
 import { Tree } from "./config/Tree";
 import { Description } from "./config/Description";
+export var THEME_KEYS_TITLE = {
+  '@primary-color': '主题颜色',
+  '@font-size-base': '主字号',
+  '@heading-color': '标题色',
+  '@text-color': '主文本色',
+  '@text-color-secondary': '次文本色',
+  '@disabled-color': '失效色',
+  '@border-radius-base': '圆角',
+  '@padding': '边距',
+  '@border-color-base': '边框颜色',
+  '@box-shadow-base': '浮层阴影',
+  '@link-color': '链接色',
+  '@success-color': '成功色',
+  '@warning-color': '警告色',
+  '@error-color': '错误色'
+};
 export var ASSETS_CSS_TPL = {
   Button: Button,
   Container: Container,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lingxiteam/theme-utils",
-  "version": "0.2.9",
+  "version": "0.2.10",
   "description": "",
   "keywords": [],
   "license": "MIT",