diff --git a/.gitignore b/.gitignore index fbd59c073..2e4fce9bd 100644 --- a/.gitignore +++ b/.gitignore @@ -14,6 +14,8 @@ _site node_modules /dist /lib +**/esm +**/lib /sdk /public /gh-pages @@ -26,6 +28,7 @@ node_modules /npm /mock/cfc/cfc.zip .rollup.cache +/theme-npm dist tsconfig.tsbuildinfo diff --git a/package.json b/package.json index b515077da..e6b48ef10 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,8 @@ "packages/amis-ui", "packages/amis", "packages/amis-editor-core", - "packages/amis-editor" + "packages/amis-editor", + "packages/amis-theme-editor-helper" ], "scripts": { "fis3-serve": "fis3 server start --www ./public --port 8888 --no-daemon --no-browse", @@ -86,7 +87,7 @@ "magic-string": "^0.26.7", "marked": "^4.2.1", "monaco-editor": "0.30.1", - "plugin-react-i18n": "1.0.1", + "plugin-react-i18n": "1.0.4", "postcss-scss": "^4.0.6", "prismjs": "^1.29.0", "react": "^18.2.0", diff --git a/packages/amis-editor-core/package.json b/packages/amis-editor-core/package.json index 07e3ad8ef..6c2195b85 100644 --- a/packages/amis-editor-core/package.json +++ b/packages/amis-editor-core/package.json @@ -47,6 +47,7 @@ "static" ], "dependencies": { + "amis-theme-editor-helper": "*", "axios": "0.21.1", "deep-diff": "1.0.2", "json-ast-comments": "^1.1.0", diff --git a/packages/amis-editor-core/tsconfig.json b/packages/amis-editor-core/tsconfig.json index 29513f699..216821ea1 100644 --- a/packages/amis-editor-core/tsconfig.json +++ b/packages/amis-editor-core/tsconfig.json @@ -10,5 +10,5 @@ ] }, "include": ["src/**/*"], - "references": [{"path": "../amis"}] + "references": [{"path": "../amis"}, {"path": "../amis-theme-editor-helper"}] } diff --git a/packages/amis-editor/examples/Editor.tsx b/packages/amis-editor/examples/Editor.tsx index 3ce289b8f..81534814f 100644 --- a/packages/amis-editor/examples/Editor.tsx +++ b/packages/amis-editor/examples/Editor.tsx @@ -6,7 +6,7 @@ import {currentLocale} from 'i18n-runtime'; import {Portal} from 'react-overlays'; import {Icon} from './icons/index'; import LayoutList from './layout/index'; -import themeConfig from 'amis-theme-editor-helper/lib/systemTheme/cxd'; +import {cxdData} from 'amis-theme-editor-helper'; // 测试组织属性配置面板的国际化，可以放开如下注释 // import './renderer/InputTextI18n'; @@ -14,7 +14,7 @@ import themeConfig from 'amis-theme-editor-helper/lib/systemTheme/cxd'; // import './utils/overwriteSchemaTpl'; // const i18nEnabled = true; const i18nEnabled = false; -setThemeConfig(themeConfig); +setThemeConfig(cxdData); const schema = { type: 'page', diff --git a/packages/amis-editor/package.json b/packages/amis-editor/package.json index 63f9a759f..da516c8a0 100644 --- a/packages/amis-editor/package.json +++ b/packages/amis-editor/package.json @@ -42,8 +42,8 @@ "dependencies": { "@webcomponents/webcomponentsjs": "^2.6.0", "amis-editor-core": "*", + "amis-theme-editor-helper": "*", "amis-postcss": "1.0.0", - "amis-theme-editor": "*", "i18n-runtime": "*", "lodash": "^4.17.15", "mobx-state-tree": "^3.17.3" @@ -102,8 +102,8 @@ "amis": "*", "amis-core": "*", "amis-formula": "*", - "amis-theme-editor": "*", "amis-ui": "*", + "amis-theme-editor-helper": "*", "i18n-runtime": "*", "react": ">=16.8.6", "react-dom": ">=16.8.6" diff --git a/packages/amis-editor/src/index.tsx b/packages/amis-editor/src/index.tsx index c7079d37d..095d71ce0 100644 --- a/packages/amis-editor/src/index.tsx +++ b/packages/amis-editor/src/index.tsx @@ -51,16 +51,7 @@ import './renderer/InputRangeValueControl'; import './renderer/FunctionEditorControl'; import './renderer/ListItemControl'; -import 'amis-theme-editor/lib/locale/zh-CN'; -import 'amis-theme-editor/lib/locale/en-US'; -import 'amis-theme-editor/lib/renderers/Border'; -import 'amis-theme-editor/lib/renderers/ColorPicker'; -import 'amis-theme-editor/lib/renderers/Font'; -import 'amis-theme-editor/lib/renderers/PaddingAndMargin'; -import 'amis-theme-editor/lib/renderers/Radius'; -import 'amis-theme-editor/lib/renderers/Shadow'; -import 'amis-theme-editor/lib/renderers/Size'; -import 'amis-theme-editor/lib/renderers.css'; +import 'amis-theme-editor-helper'; export * from './component/BaseControl'; export * from './icons/index'; diff --git a/packages/amis-editor/tsconfig.json b/packages/amis-editor/tsconfig.json index 61d348c43..ec5708072 100644 --- a/packages/amis-editor/tsconfig.json +++ b/packages/amis-editor/tsconfig.json @@ -10,5 +10,9 @@ ] }, "include": ["src/**/*"], - "references": [{"path": "../amis"}, {"path": "../amis-editor-core"}] + "references": [ + {"path": "../amis"}, + {"path": "../amis-editor-core"}, + {"path": "../amis-theme-editor-helper"} + ] } diff --git a/packages/amis-theme-editor-helper/i18nConfig.js b/packages/amis-theme-editor-helper/i18nConfig.js new file mode 100644 index 000000000..ae811dddf --- /dev/null +++ b/packages/amis-theme-editor-helper/i18nConfig.js @@ -0,0 +1,35 @@ +module.exports = { + entry: { + dir: './src' + }, + file: { + test: /.*(ts|tsx|js|jsx)$/ + }, + includes: ['src/renderers'], + importInfo: { + source: 'i18n-runtime', + imported: 'i18n', + local: '_i18n' + }, + i18nModule: 'i18n-runtime', + languages: [ + { + name: 'en-US', + path: './src/locale' + }, + { + name: 'zh-CN', + path: './src/locale' + } + ], + output: { + fileName: 'theme-editor-i18n', + fileExtension: 'xlsx', + path: './' + }, + translate: { + appId: '', + key: '', + host: 'http://api.fanyi.baidu.com' + } +}; diff --git a/packages/amis-theme-editor-helper/package.json b/packages/amis-theme-editor-helper/package.json new file mode 100644 index 000000000..32046fcbf --- /dev/null +++ b/packages/amis-theme-editor-helper/package.json @@ -0,0 +1,69 @@ +{ + "name": "amis-theme-editor-helper", + "version": "2.0.22-beta.9", + "description": "amis主题编辑器通用方法", + "main": "lib/index.js", + "module": "esm/index.js", + "types": "lib/index.d.ts", + "scripts": { + "test": "echo \"Error: no test specified\"", + "build": "npm run clean-dist && NODE_ENV=production rollup -c ", + "clean-dist": "rimraf lib/** esm/**", + "i18n:update": "npx i18n update --config=./i18nConfig.js", + "i18n:translate": "npx i18n translate --config=./i18nConfig.js --l=en-US", + "i18n:merge": "npx i18n merge --config=./i18nConfig.js --l=en-US" + }, + "keywords": [ + "amis", + "theme-editor-helper" + ], + "author": "@fex", + "license": "ISC", + "files": [ + "lib", + "esm" + ], + "lint-staged": { + "{src,scss,examples}/**/**/*.{js,jsx,ts,tsx,scss,json}": [ + "prettier --write" + ] + }, + "dependencies": { + "react": "^18.2.0", + "react-color": "^2.19.3", + "react-dom": "^18.2.0" + }, + "devDependencies": { + "@rollup/plugin-url": "^7.0.0", + "@svgr/rollup": "^6.4.0", + "@types/async": "^2.0.45", + "@types/classnames": "^2.2.3", + "@types/codemirror": "^5.60.5", + "@types/deep-diff": "^1.0.0", + "@types/history": "^4.6.0", + "@types/hoist-non-react-statics": "^3.0.1", + "@types/lodash": "^4.14.76", + "@types/node": "^14.0.24", + "@types/react": "^18.0.24", + "@types/react-dom": "^18.0.8", + "@rollup/plugin-commonjs": "^22.0.0", + "@rollup/plugin-json": "^4.1.0", + "@rollup/plugin-node-resolve": "^13.3.0", + "@rollup/plugin-typescript": "^8.3.2", + "rollup": "^2.73.0", + "rollup-plugin-auto-external": "^2.0.0", + "rollup-plugin-license": "^2.7.0", + "@types/react-color": "^3.0.6", + "tslib": "^2.3.1", + "typescript": "^4.6.4", + "sass": "^1.49.7", + "sass-loader": "^12.5.0", + "style-loader": "^3.2.1" + }, + "peerDependencies": { + "amis": "*", + "amis-core": "*", + "amis-ui": "*", + "i18n-runtime": "*" + } +} \ No newline at end of file diff --git a/packages/amis-theme-editor-helper/rollup.config.js b/packages/amis-theme-editor-helper/rollup.config.js new file mode 100644 index 000000000..ec931e3f5 --- /dev/null +++ b/packages/amis-theme-editor-helper/rollup.config.js @@ -0,0 +1,149 @@ +// rollup.config.js +import commonjs from '@rollup/plugin-commonjs'; +import json from '@rollup/plugin-json'; +import resolve from '@rollup/plugin-node-resolve'; +import typescript from '@rollup/plugin-typescript'; +import license from 'rollup-plugin-license'; +import autoExternal from 'rollup-plugin-auto-external'; +import postcss from 'rollup-plugin-postcss'; +import { + name, + version, + author, + main, + module, + dependencies +} from './package.json'; +import path from 'path'; +import svgr from '@svgr/rollup'; +import fs from 'fs'; +import i18nPlugin from 'plugin-react-i18n'; + +const i18nConfig = require('./i18nConfig'); + +const settings = { + globals: {} +}; + +const external = id => + new RegExp( + `^(?:${Object.keys(dependencies ?? {}) + .concat(fs.readdirSync(path.join(__dirname, '../../node_modules'))) + .map(value => + value.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&').replace(/-/g, '\\x2d') + ) + .join('|')})` + ).test(id); +const input = ['./src/index.ts']; + +export default [ + { + input, + + output: [ + { + ...settings, + dir: path.dirname(main), + format: 'cjs', + exports: 'named', + preserveModulesRoot: './src', + preserveModules: true // Keep directory structure and files + } + ], + external, + plugins: getPlugins('cjs') + }, + { + input, + + output: [ + { + ...settings, + dir: path.dirname(module), + format: 'esm', + exports: 'named', + preserveModulesRoot: './src', + preserveModules: true // Keep directory structure and files + } + ], + external, + plugins: getPlugins('esm') + } +]; + +function transpileDynamicImportForCJS(options) { + return { + name: 'transpile-dynamic-import-for-cjs', + renderDynamicImport({format, targetModuleId}) { + if (format !== 'cjs') { + return null; + } + + return { + left: 'Promise.resolve().then(function() {return new Promise(function(fullfill) {require([', + right: + '], function(mod) {fullfill(require("tslib").__importStar(mod))})})})' + }; + + // return { + // left: 'Promise.resolve().then(function() {return new Promise(function(fullfill) {require.ensure([', + // right: + // '], function(r) {fullfill(_interopDefaultLegacy(r("' + + // targetModuleId + + // '")))})})})' + // }; + } + }; +} + +function getPlugins(format = 'esm') { + const typeScriptOptions = { + typescript: require('typescript'), + sourceMap: false, + outputToFilesystem: true, + ...(format === 'esm' + ? { + compilerOptions: { + rootDir: './src', + outDir: path.dirname(module) + } + } + : { + compilerOptions: { + rootDir: './src', + outDir: path.dirname(main) + } + }) + }; + + return [ + i18nPlugin(i18nConfig), + typescript(typeScriptOptions), + svgr({ + svgProps: { + className: 'icon' + }, + prettier: false, + dimensions: false + }), + transpileDynamicImportForCJS(), + autoExternal(), + json(), + postcss({ + minimize: true + }), + resolve({ + jsnext: true, + main: true + }), + commonjs({ + sourceMap: false + }), + license({ + banner: ` + ${name} v${version} + Copyright 2018<%= moment().format('YYYY') > 2018 ? '-' + moment().format('YYYY') : null %> ${author} + ` + }) + ]; +} diff --git a/packages/amis-theme-editor-helper/src/helper/ColorGenerator.ts b/packages/amis-theme-editor-helper/src/helper/ColorGenerator.ts new file mode 100644 index 000000000..a6d2f22dd --- /dev/null +++ b/packages/amis-theme-editor-helper/src/helper/ColorGenerator.ts @@ -0,0 +1,458 @@ +type ResColor = {hex: string; hsv: number[]}[]; + +export class ColorGenerator { + color = ''; + //十六进制颜色值的正则表达式 + reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/; + constructor(color: string) { + this.setPrimaryColor(color); + } + /** + * 生成衍生色 + */ + getDerivedColor() { + const rgb = ColorGenerator.hexToRgb(this.color); + const [h, s, v] = ColorGenerator.rgbToHsv(rgb); + const scolors: ResColor = []; + const wcolors: ResColor = []; + const hsvCorrection = (hsv: number[]) => { + let h = hsv[0], + s = hsv[1], + v = hsv[2]; + if (s < 10) { + s = 10; + } + return ColorGenerator.hsvCorrection([h, s, v]); + }; + for (let i = 0; i < 4; i++) { + const index = i + 1; + let sh, ss, sv; + if (h > 60 && h < 300) { + // 冷色 + sh = h + index * 2; + ss = s + index * 5; + sv = v - index * 15; + } else { + // 暖色 + sh = h - index * 2; + ss = s + index * 5; + sv = v - index * 15; + } + const shsv = hsvCorrection([sh, ss, sv]); + const srgb = ColorGenerator.hsvToRgb(shsv); + const shex = ColorGenerator.rgbToHex(srgb); + + scolors.push({hex: shex, hsv: shsv}); + } + for (let i = 0; i < 5; i++) { + const index = i + 1; + let wh, ws, wv; + if (h > 60 && h < 300) { + // 冷色 + wh = h - index * 1; + ws = s - index * (s / 5); + wv = v + index * 5; + } else { + // 暖色 + wh = h + index * 1; + ws = s - index * (s / 5); + wv = v + index * (100 - v) * 5; + } + const whsv = hsvCorrection([wh, ws, wv]); + const wrgb = ColorGenerator.hsvToRgb(whsv); + const whex = ColorGenerator.rgbToHex(wrgb); + + wcolors.push({hex: whex, hsv: whsv}); + } + return [ + ...scolors.reverse(), + {hex: this.color, hsv: [h, s, v]}, + ...wcolors + ]; + } + /** + * 生成中性色 + */ + getNeutralColor() { + const rgb = ColorGenerator.hexToRgb(this.color); + const [h, ,] = ColorGenerator.rgbToHsv(rgb); + const S = [65, 45, 25, 10, 6, 4, 2, 1, 1, 1, 0]; + const V = [8, 15, 25, 40, 55, 75, 85, 92, 96, 98, 100]; + const colors: ResColor = []; + for (let i = 0; i < 11; i++) { + const newHsv = ColorGenerator.hsvCorrection([h, S[i], V[i]]); + const newRgb = ColorGenerator.hsvToRgb(newHsv); + const newHex = ColorGenerator.rgbToHex(newRgb); + colors.push({hex: newHex, hsv: newHsv}); + } + return colors; + } + /** + * 生成功能色 + */ + getFunctionalColor() { + const rgb = ColorGenerator.hexToRgb(this.color); + const [h, s, v] = ColorGenerator.rgbToHsv(rgb); + const errorH = {a: 375.06, b: 0.6, c: 134.93, d: 353.95}; + const warnH = {a: 217.7, b: -0.02, c: 514460.59, d: -118.56}; + const successH = {a: 130.48, b: -0.24, c: 0.00066}; + + const errorS = {a: 95.12, b: 2.34, c: 72.07, d: 69.59}; + const warnS = {a: 95.1, b: 0.53, c: 74.9, d: 66.82}; + const successS = {a: 100.5, b: -6.41, c: 80.99, d: 65.5}; + + const errorV = {a: 100.21, b: -16.63, c: 89.6, d: 83}; + const warnV = {a: 270.03, b: -0.1, c: 1.18, d: -103.6}; + const successV = {a: 81.5, b: -6.31, c: 91.2, d: 64.5}; + + const hs = [ + [ + h === 0 ? 0 : ColorGenerator.functionY(h, errorH) - 3, + ColorGenerator.functionY(s, errorS) - 5, + ColorGenerator.functionY(s, errorV) + 7 + ], + [ + ColorGenerator.functionY(h + 1, warnH) - 7, + ColorGenerator.functionY(s + 1, warnS) + 5, + ColorGenerator.functionY(s + 1, warnV) - 23 + ], + [ + Math.round(successH.a + successH.b * h + successH.c * h * h), + ColorGenerator.functionY(s, successS) + 4, + ColorGenerator.functionY(s, successV) + 4 + ] + ]; + const colors = hs.map(hsv => { + hsv = ColorGenerator.hsvCorrection(hsv); + const newRgb = ColorGenerator.hsvToRgb(hsv); + const hex = ColorGenerator.rgbToHex(newRgb); + return {hex, hsv}; + }); + return colors; + } + + /** + * 生成数据色 + */ + getDataColor() { + const colors = ColorGenerator.getColorPalette(this.color); + const color1 = [ + colors[0], + colors[4], + colors[8], + colors[12], + colors[16], + colors[20], + colors[23] + ]; + const color2 = [ + colors[0], + colors[5], + colors[10], + colors[15], + colors[19], + colors[23], + colors[3] + ]; + const color3 = [ + colors[0], + colors[1], + colors[2], + colors[3], + colors[4], + colors[5], + colors[6] + ]; + + return [color1, color2, color3]; + } + + setPrimaryColor(color: string) { + if (this.reg.test(color)) { + this.color = color; + } else { + throw new Error('请传入十六进制色值'); + } + } + static hexToRgb(hexColor: string) { + if (hexColor.length === 4) { + let hexColorNew = '#'; + for (let i = 1; i < 4; i += 1) { + hexColorNew += hexColor + .slice(i, i + 1) + .concat(hexColor.slice(i, i + 1)); + } + hexColor = hexColorNew; + } + //处理六位的颜色值 + const hexColorChange: number[] = []; + for (let i = 1; i < 7; i += 2) { + hexColorChange.push(parseInt('0x' + hexColor.slice(i, i + 2))); + } + return hexColorChange; + } + static rgbToHex(rgb: number[]) { + const r = rgb[0], + g = rgb[1], + b = rgb[2]; + const hexr = r.toString(16).padStart(2, '0'); + const hexg = g.toString(16).padStart(2, '0'); + const hexb = b.toString(16).padStart(2, '0'); + return '#' + hexr + hexg + hexb; + } + static rgbToHsv(rgb: number[]) { + let r = rgb[0], + g = rgb[1], + b = rgb[2]; + r = r / 255; + g = g / 255; + b = b / 255; + let h = 0, + s, + v; + const min = Math.min(r, g, b); + const max = (v = Math.max(r, g, b)); + const difference = max - min; + + if (max == min) { + h = 0; + } else { + switch (max) { + case r: + h = (g - b) / difference + (g < b ? 6 : 0); + break; + case g: + h = 2 + (b - r) / difference; + break; + case b: + h = 4 + (r - g) / difference; + break; + } + h = Math.round(h * 60); + } + if (max == 0) { + s = 0; + } else { + s = 1 - min / max; + } + s = Math.round(s * 100); + v = Math.round(v * 100); + return [h, s, v]; + } + static hsvToRgb(hsv: number[]) { + let h = hsv[0], + s = hsv[1], + v = hsv[2]; + s = s / 100; + v = v / 100; + let r = 0, + g = 0, + b = 0; + const i = Math.floor((h / 60) % 6); + const f = h / 60 - i; + const p = v * (1 - s); + const q = v * (1 - f * s); + const t = v * (1 - (1 - f) * s); + switch (i) { + case 0: + r = v; + g = t; + b = p; + break; + case 1: + r = q; + g = v; + b = p; + break; + case 2: + r = p; + g = v; + b = t; + break; + case 3: + r = p; + g = q; + b = v; + break; + case 4: + r = t; + g = p; + b = v; + break; + case 5: + r = v; + g = p; + b = q; + break; + default: + break; + } + r = this.rgbCorrection(Math.round(r * 255.0)); + g = this.rgbCorrection(Math.round(g * 255.0)); + b = this.rgbCorrection(Math.round(b * 255.0)); + return [r, g, b]; + } + static hsvCorrection(hsv: number[]) { + let h = hsv[0], + s = hsv[1], + v = hsv[2]; + if (h < 0) { + h = 360 + h; + } + if (h >= 360) { + h = h - 360; + } + if (s < 0) { + s = 0; + } + if (s > 100) { + s = 100; + } + if (v < 0) { + v = 0; + } + if (v > 100) { + v = 100; + } + return [h, s, v]; + } + static rgbCorrection(value: number) { + if (value < 0) { + return 0; + } + if (value > 255) { + return 255; + } + return value; + } + static functionY( + x: number, + coefficient: {a: number; b: number; c: number; d: number} + ) { + const {a, b, c, d} = coefficient; + const res = (a - d) / (1 + Math.pow(x / c, b)) + d; + return Math.round(res); + } + static isLightColor(color: string) { + const rgb = ColorGenerator.hexToRgb(color); + const hsv = ColorGenerator.rgbToHsv(rgb); + return hsv[1] < 20 && hsv[2] > 90; + } + static getFontColor(color: string | undefined) { + if (!color) { + return '#fff'; + } + return ColorGenerator.isLightColor(color) ? '#5C5F66' : '#fff'; + } + + static computedLight(R: number, G: number, B: number) { + const gray = 0.299 * R + 0.587 * G + 0.114 * B; + return {gray, light: (gray / 255) * 100}; + } + + static getColorPalette(color: string, vv: number = 0) { + let rgb = ColorGenerator.hexToRgb(color); + let [h, s, v] = ColorGenerator.rgbToHsv(rgb); + const newColors = []; + + // 原色的灰色模型 + let {gray, light: mainLight} = ColorGenerator.computedLight( + rgb[0], + rgb[1], + rgb[2] + ); + + newColors.push({ + rgb: rgb, + hsv: [h, s, v], + gray, + light: mainLight, + checkedRgb: rgb, + checkedColor: ColorGenerator.rgbToHex(rgb), + checkedGray: gray, + checkedLight: mainLight + }); + + /** 基础校正 */ + + // // 降低亮度 + // if (mainLight > 55) { + // mainLight = mainLight / 2; + // } + + // // 提高饱和度 + // if (s < 70) { + // s = 70 + 70 - s; + // } + + // // 提高饱和度 + // if (v < 70) { + // v = 70 + 70 - v; + // } + + /** ***** */ + + for (let i = 1; i < 24; i++) { + const newH = (h + 15 * i) % 360; + const newRgb = ColorGenerator.hsvToRgb([newH, s, v]); + // 灰度关系 + let {gray, light} = ColorGenerator.computedLight( + newRgb[0], + newRgb[1], + newRgb[2] + ); + + const newColor = { + rgb: rgb, + hsv: [h, s, v], + gray, + light, + checkedRgb: rgb, + checkedColor: ColorGenerator.rgbToHex(rgb), + checkedGray: gray, + checkedLight: light + }; + + let checkedS = s; + let checkedV = v; + // 灰色校正 + let checkedRgb = newRgb; + + // 降低饱和度 + while (mainLight > light && checkedS > 0) { + checkedS--; + checkedRgb = ColorGenerator.hsvToRgb([newH, checkedS, checkedV]); + const {gray: checkedGray, light: checkedLight} = + ColorGenerator.computedLight( + checkedRgb[0], + checkedRgb[1], + checkedRgb[2] + ); + + light = checkedLight; + gray = checkedGray; + } + // 降低明度 + while (mainLight < light && checkedV > 0) { + checkedV--; + checkedRgb = ColorGenerator.hsvToRgb([newH, checkedS, checkedV]); + const {gray: checkedGray, light: checkedLight} = + ColorGenerator.computedLight( + checkedRgb[0], + checkedRgb[1], + checkedRgb[2] + ); + + light = checkedLight; + gray = checkedGray; + } + newColor.checkedLight = light; + newColor.checkedGray = gray; + newColor.checkedRgb = checkedRgb; + newColor.checkedColor = ColorGenerator.rgbToHex(checkedRgb); + newColors.push(newColor); + } + + return newColors; + } +} diff --git a/packages/amis-theme-editor-helper/src/helper/ParseThemeData.ts b/packages/amis-theme-editor-helper/src/helper/ParseThemeData.ts new file mode 100644 index 000000000..a02854a26 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/helper/ParseThemeData.ts @@ -0,0 +1,299 @@ +import type {PlainObject, ThemeDefinition} from './declares'; + +export class ParseThemeData { + style: string[] = []; + class: string[] = []; + data: ThemeDefinition; + scope: string[]; + theme: string; + constructor(data: ThemeDefinition, scope: string[]) { + this.data = data; + this.scope = scope; + this.theme = data.config.key; + } + + generator() { + const {global, component} = this.data; + const {colors, fonts, borders, sizes, shadows} = global; + this.parseColor(colors); + this.parseFont(fonts); + this.parseGlobalCommon(borders); + this.parseGlobalCommon(sizes); + this.parseSizesBase(sizes); + this.parseShadows(shadows); + for (let key in component) { + if (key === 'button1') { + this.parseButton(component['button1']); + } else if (key === 'inputRating') { + this.parseInputRating(component['inputRating']); + } else { + this.parseComponentCommon(component[key]); + } + } + } + + getStyle() { + return this.getCssVariable() + this.getCustomClass(); + } + + getCssVariable() { + return `${this.scope.join(', ')}{${this.style.join(';')};}\n`; + } + + getCustomClass() { + return `${this.class.join('\n')}`; + } + + /** + * 获取自定义样式，需要使用less或scss编译后使用 + */ + getCustomStyle() { + const customStyle = this.data?.customStyle?.style || ''; + return customStyle; + } + + /** + * 装载css变量 + */ + cssFormat(key: string, value: string) { + if (!value) { + return; + } + this.style.push(`${key}: ${value}`); + } + + /** + * 装载class + */ + classFormat(classname: string, value: string) { + // 自定义的不需要在命名空间下了 + this.class.push(`${classname}{${value}}`); + } + + /** + * 解析全局颜色 + */ + parseColor(colors: any) { + this.cssFormat('--colors-neutral-fill-none', 'translate'); + for (let key in colors) { + const color = colors[key]; + if (key !== 'brand') { + color.body.forEach((item: any) => { + const prefix = item.token; + for (let colorKey in item.body) { + if (colorKey === 'colors') { + item.body.colors.forEach((color: any) => { + this.cssFormat(color.token, color.color); + }); + } else if (!Array.isArray(item.body[colorKey])) { + this.cssFormat(prefix + colorKey, item.body[colorKey]); + } + } + }); + } else { + const prefix = color.token; + for (let colorKey in color.body) { + if (colorKey === 'colors') { + color.body.colors.forEach((color: any) => { + this.cssFormat(color.token, color.color); + }); + } else if (!Array.isArray(color.body[colorKey])) { + this.cssFormat(prefix + colorKey, color.body[colorKey]); + } + } + } + } + } + /** + * 解析全局字体 + */ + parseFont(fonts: any) { + for (let key in fonts) { + const font = fonts[key]; + if (key === 'base') { + let family = ''; + font.body.forEach((item: any, index: number) => { + family += item.value || ''; + if (index !== font.body.length - 1) { + family += ', '; + } + }); + this.cssFormat(font.token, family); + } else { + font.body.forEach((item: any) => { + this.cssFormat(item.token, item.value); + }); + } + } + } + // 解析基础尺寸 + parseSizesBase(item: any) { + const reg = /\d+(\.\d+)?/; + const unitReg = /[^\d\.]+/; + const start = parseFloat(item.size.start.match(reg)[0]); + const base = item.size.base; + const unit = item.size.start.match(unitReg)[0]; + for (let i = 0; i < 50; i++) { + this.cssFormat(`--sizes-base-${i + 1}`, start + i * base + unit); + } + } + /** + * 解析全局样式通用 + */ + parseGlobalCommon(items: any) { + for (let key in items) { + const item = items[key]; + item.body.forEach((i: any) => { + this.cssFormat(i.token, i.value); + }); + } + } + /** + * 解析阴影样式 + */ + parseShadows(items: any) { + const item = items.shadow; + item.body.forEach((i: any) => { + const shadowStyle = i.value.map( + (shadow: any) => + `${shadow.inset ? 'inset' : ''} ${shadow.x} ${shadow.y} ${ + shadow.blur + } ${shadow.spread} ${shadow.color}` + ); + this.cssFormat(i.token, shadowStyle.join(', ')); + }); + } + + /** + * 设置组件样式 + */ + setComponentStyle(key: string, token: string, value: string | PlainObject) { + if (typeof value === 'string') { + this.cssFormat(token + key, value); + } else { + if (key.indexOf('padding-and-margin') > -1) { + for (let k in value) { + this.cssFormat( + token + key.replace('padding-and-margin', '') + k, + value[k] + ); + } + } else if (key.indexOf('size') > -1) { + for (let k in value) { + this.cssFormat(token + key.replace('size', '') + k, value[k]); + } + } else if (key.indexOf('font') > -1) { + for (let k in value) { + this.cssFormat(token + key.replace('font', '') + k, value[k]); + } + } else if (key.indexOf('border') > -1) { + for (let k in value) { + this.cssFormat(token + key.replace('border', '') + k, value[k]); + } + } else { + for (let k in value) { + this.cssFormat(`${token}${k}`, value[k]); + } + } + } + } + /** + * 解析Button + */ + parseButton(button: any) { + const {type, size} = button; + const setButtonCssValue = (token: string, body: any) => { + for (let key in body) { + const data = body[key]; + this.setComponentStyle(key, token, data); + } + }; + for (let item of type) { + ['default', 'hover', 'active', 'disabled'].forEach(state => { + setButtonCssValue(item[state].token, item[state].body); + }); + if (item.custom) { + const fontType = item.type; + const style = (state: string) => + [ + `color: var(--button-${fontType}-${state}-font-color)`, + `background: var(--button-${fontType}-${state}-bg-color)`, + `box-shadow: var(--button-${fontType}-${state}-shadow)`, + `border-width: var(--button-${fontType}-${state}-top-border-width) var(--button-${fontType}-${state}-right-border-width) var(--button-${fontType}-${state}-bottom-border-width) var(--button-${fontType}-${state}-left-border-width)`, + `border-color: var(--button-${fontType}-${state}-top-border-color) var(--button-${fontType}-${state}-right-border-color) var(--button-${fontType}-${state}-bottom-border-color) var(--button-${fontType}-${state}-left-border-color)`, + `border-style: var(--button-${fontType}-${state}-top-border-style) var(--button-${fontType}-${state}-right-border-style) var(--button-${fontType}-${state}-bottom-border-style) var(--button-${fontType}-${state}-left-border-style)` + ].join(';'); + + this.classFormat(`.cxd-Button--${fontType}`, `${style('default')}`); + this.classFormat( + `.cxd-Button--${fontType}:not(:disabled):not(.is-disabled):hover`, + `${style('hover')}` + ); + this.classFormat( + `.cxd-Button--${fontType}:not(:disabled):not(.is-disabled):hover:active`, + `${style('active')}` + ); + } + } + for (let item of size) { + setButtonCssValue(item.token, item.body); + if (item.custom) { + const fontType = item.type; + this.classFormat( + `.cxd-Button--size-${fontType}`, + [ + `font-size: var(--button-size-${fontType}-fonSize)`, + `font-weight: var(--button-size-${fontType}-fontWeight)`, + `line-height: var(--button-size-${fontType}-lineHeight)`, + `min-width: var(--button-size-${fontType}-minWidth)`, + `height: var(--button-size-${fontType}-height)`, + `border-radius: var(--button-size-${fontType}-top-right-border-radius) var(--button-size-${fontType}-top-left-border-radius) var(--button-size-${fontType}-bottom-right-border-radius) var(--button-size-${fontType}-bottom-left-border-radius)`, + `padding: var(--button-size-${fontType}-paddingTop) var(--button-size-${fontType}-paddingRight) var(--button-size-${fontType}-paddingBottom) var(--button-size-${fontType}-paddingLeft)`, + `margin: var(--button-size-${fontType}-marginTop) var(--button-size-${fontType}-marginRight) var(--button-size-${fontType}-marginBottom) var(--button-size-${fontType}-marginLeft)` + ].join(';') + ); + } + } + } + + /** + * 解析Tranfer + */ + parseTransfer(transfer: any) { + for (let typeKey in transfer) { + const token = transfer[typeKey].token; + const body = transfer[typeKey].body; + for (let key in body) { + this.setComponentStyle(key, token, body[key]); + } + } + } + + /** + * 解析inputRating + */ + parseInputRating(inputRating: any) { + const data = JSON.parse(JSON.stringify(inputRating)); + const colors = data.activeColors; + this.cssFormat('--Rating-colors', `'${JSON.stringify(colors)}'`); + delete data.activeColors; + this.parseComponentCommon(data); + } + + // 解析组件通用方法 + parseComponentCommon(component: any) { + if (component.token) { + // 有token时结束递归 + const token = component.token; + for (let key in component.body) { + this.setComponentStyle(key, token, component.body[key]); + } + } else { + for (let key in component) { + if (typeof component[key] === 'object') { + this.parseComponentCommon(component[key]); + } + } + } + } +} diff --git a/packages/amis-theme-editor-helper/src/helper/declares.ts b/packages/amis-theme-editor-helper/src/helper/declares.ts new file mode 100644 index 000000000..dbf4a8d33 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/helper/declares.ts @@ -0,0 +1,163 @@ +export interface Colors { + main?: string; + none?: string; + colors: { + label: string; + token: string; + color: string; + index: number; + }[]; + common: { + label: string; + id: string; + color: number; + }[]; +} + +export interface Font { + label: string; + token: string; + value?: string | number; + body?: {value: string | number}[]; +} + +export interface Border { + label: string; + token: string; + disabled?: boolean; + value: string; +} + +export interface Size { + label: string; + disabled?: boolean; + token: string; + value: string; +} + +export interface ShadowData { + inset: boolean; + x: string; + y: string; + blur: string; + spread: string; + color: string; +} + +export interface Shadow { + label: string; + token: string; + disabled?: boolean; + value: ShadowData[]; +} + +export interface ThemeDefinition { + version?: string; + config: { + name: string; + key: string; + description: string; + }; + global: { + colors: { + brand: { + token: string; + label: string; + body: Colors; + }; + neutral: { + token: string; + label: string; + body: { + token: string; + label: string; + body: Colors; + }[]; + }; + func: { + token: string; + label: string; + body: { + token: string; + label: string; + body: Colors; + }[]; + }; + data?: { + label: string; + body: { + label: string; + token: string; + colors: {value: string}[]; + custom?: boolean; + }[]; + }; + }; + fonts: { + base: { + label: string; + token: string; + body: {value: string}[]; + }; + size: { + label: string; + token: string; + body: Font[]; + }; + lineHeight: { + label: string; + token: string; + body: Font[]; + }; + weight: { + label: string; + token: string; + body: Font[]; + }; + }; + borders: { + width: { + label: string; + token: string; + body: Border[]; + }; + style: { + label: string; + token: string; + body: Border[]; + }; + radius: { + label: string; + token: string; + body: Border[]; + }; + }; + sizes: { + size: { + label: string; + token: string; + base: number; + body: Size[]; + start: string; + }; + }; + shadows: { + shadow: { + label: string; + token: string; + body: Shadow[]; + }; + }; + }; + component: { + [x: string]: any; + }; + customStyle?: { + [css: string]: string; + }; + icons?: any; +} + +export interface PlainObject { + [propsName: string]: any; +} diff --git a/packages/amis-theme-editor-helper/src/helper/getGlobalData.ts b/packages/amis-theme-editor-helper/src/helper/getGlobalData.ts new file mode 100644 index 000000000..f357bfa8a --- /dev/null +++ b/packages/amis-theme-editor-helper/src/helper/getGlobalData.ts @@ -0,0 +1,202 @@ +import type {Colors, PlainObject, ThemeDefinition} from './declares'; +const COLORLABELMAP: PlainObject = { + main: '主色', + default: '常规', + active: '点击', + hover: '悬浮', + bg: '背景', + strong: '强调/正文标题', + lessStrong: '次强调/正文标题', + info: '次要信息', + disabledInfo: '置灰信息', + border: '描边/分割线', + cardBg: '卡片背景色', + none: '透明' +}; + +interface Options { + show?: boolean; + label: string; + value: string; + realValue?: any; + children?: Options[]; +} + +export interface GlobalData { + colorOptions?: Options[]; + fontFamilyOptions?: Options[]; + fontSizeOptions?: Options[]; + lineHeightOptions?: Options[]; + fontWeightOptions?: Options[]; + borderRadiusOptions?: Options[]; + borderWidthOptions?: Options[]; + borderStyleOptions?: Options[]; + sizesOptions?: Options[]; + shadowOptions?: Options[]; +} + +export function getGlobalData(data: ThemeDefinition | undefined): GlobalData { + if (!data || !data.global) { + return {}; + } + const {colors, fonts, borders, sizes, shadows} = data.global; + + const colorOptions: Options[] = []; + const fontFamilyOptions: Options[] = []; + const fontSizeOptions: Options[] = []; + const fontWeightOptions: Options[] = []; + const lineHeightOptions: Options[] = []; + const borderRadiusOptions: Options[] = []; + const borderWidthOptions: Options[] = []; + const borderStyleOptions: Options[] = []; + const sizesOptions: Options[] = []; + const shadowOptions: Options[] = []; + + // 解析颜色 + function getGlobalColors(item: {label: string; token: string; body: Colors}) { + const children: Options[] = []; + item.body.common.forEach((common, i: number) => { + children.push({ + label: common.label, + value: `var(${item.token}${common.color + 1})`, + realValue: item.body.colors[common.color].color + }); + }); + // if (item.token === '--colors-neutral-fill-') { + // children.push({ + // label: COLORLABELMAP['none'], + // value: `var(${item.token}none)` + // }); + // } + return { + label: item.label, + value: item.token, + children: children + }; + } + + colorOptions.push({ + label: '品牌色', + value: 'brand', + children: [getGlobalColors(colors.brand)] + }); + + const neutralColors: any = { + label: '中性色', + value: 'neutral', + children: [] + }; + colors.neutral.body.forEach((color, i: number) => { + neutralColors.children.push(getGlobalColors(color)); + }); + colorOptions.push(neutralColors); + const funcColors: any = { + label: '辅助色', + value: 'neutral', + children: [] + }; + colors.func.body.forEach((color, i: number) => { + funcColors.children.push(getGlobalColors(color)); + }); + colorOptions.push(funcColors); + + // 解析文字 + for (let k in fonts) { + let key = k as 'base' | 'size' | 'lineHeight' | 'weight'; + const options = { + size: fontSizeOptions, + lineHeight: lineHeightOptions, + weight: fontWeightOptions + }; + const children: {label: string; value: string; realValue: string}[] = []; + if (key !== 'base') { + fonts[key].body.forEach((font, i: number) => { + children.push({ + label: `${font.label}(${font.value})`, + value: `var(${font.token})`, + realValue: `${font.value}` + }); + }); + options[key].push(...children); + } else { + fonts['base'].body.forEach((font, i: number) => { + children.push({ + label: font.value, + value: font.value, + realValue: font.value + }); + }); + fontFamilyOptions.push(...children); + } + } + + // 解析边框 + for (let k in borders) { + let key = k as 'width' | 'style' | 'radius'; + const options = { + width: borderWidthOptions, + style: borderStyleOptions, + radius: borderRadiusOptions + }; + const children: Options[] = []; + borders[key].body.forEach((border, i: number) => { + children.push({ + label: + key === 'style' ? border.label : `${border.label}(${border.value})`, + realValue: border.value, + value: `var(${border.token})` + }); + }); + options[key].push(...children); + } + + // 解析常用尺寸 + sizes.size.body.forEach(size => { + sizesOptions.push({ + label: `${size.label}(${size.value})`, + value: `var(${size.token})`, + realValue: size.value + }); + }); + + // 解析扩展尺寸 + const baseSizeStart = sizes.size.start; + const baseSizeStartNumber = parseFloat(baseSizeStart); + const baseSizeStartUnit = baseSizeStart.replace( + baseSizeStartNumber.toString(), + '' + ); + const baseSizeBase = sizes.size.base; + + for (let i = 1; i <= 50; i++) { + const realValue = + (i - 1) * baseSizeBase + baseSizeStartNumber + baseSizeStartUnit; + sizesOptions.push({ + label: `尺寸${i}(${realValue})`, + value: `var(--sizes-base-${i})`, + realValue + }); + } + + // 解析阴影 + shadows.shadow.body.forEach(shadow => { + shadowOptions.push({ + label: shadow.label, + value: `var(${shadow.token})`, + realValue: shadow.value + }); + }); + + return { + colorOptions, + fontFamilyOptions, + fontSizeOptions, + lineHeightOptions, + fontWeightOptions, + borderRadiusOptions, + borderWidthOptions, + borderStyleOptions, + sizesOptions, + shadowOptions + }; +} diff --git a/packages/amis-theme-editor-helper/src/helper/styleHelper.ts b/packages/amis-theme-editor-helper/src/helper/styleHelper.ts new file mode 100644 index 000000000..a4228358c --- /dev/null +++ b/packages/amis-theme-editor-helper/src/helper/styleHelper.ts @@ -0,0 +1,72 @@ +import type {PlainObject} from './declares'; + +const styleMap: PlainObject = { + border: ['border-top', 'border-right', 'border-left', 'border-bottom'] +}; + +export function styleBorder(style: CSSStyleDeclaration) { + const styleList = styleMap.border; + const data: PlainObject = {}; + for (const item of styleList) { + const values = style.getPropertyValue(item); + const [border, position] = item.split('-'); + const [borderWidth, borderStyle, ...borderColor] = values.split(' '); + data[`${position}-${border}-width`] = borderWidth; + data[`${position}-${border}-style`] = borderStyle; + data[`${position}-${border}-color`] = borderColor.join(''); + } + return data; +} + +export function styleBackground(style: CSSStyleDeclaration) { + const image = style.getPropertyPriority('background-image'); + let data = image; + if (image === 'none') { + data = style.getPropertyValue('background-color'); + } + return data; +} + +export function getStyleById(id: string, name?: string) { + if (!name) { + return null; + } + let dom: any = document.getElementsByName(id); + if (dom.length === 0) { + return null; + } + dom = dom[0]; + + const list = name.split('.'); + name = list[list.length - 1]; + const [styleName] = name.split(':'); + const style = getComputedStyle(dom); + let data: any = {}; + switch (styleName) { + case 'border': + data = styleBorder(style); + break; + case 'color': + data = style.getPropertyValue('color'); + break; + case 'background': + data = styleBackground(style); + break; + } + return data; +} + +export function getCssVarByName( + name: string, + className: string = '.ThemeEditor-body-content-item-content' +): string { + name = name?.replace('var', '').replace('(', '').replace(')', ''); + try { + const res = getComputedStyle( + document.querySelector(className)! + ).getPropertyValue(name); + return res; + } catch (error) { + return ''; + } +} diff --git a/packages/amis-theme-editor-helper/src/helper/styleOperation.ts b/packages/amis-theme-editor-helper/src/helper/styleOperation.ts new file mode 100644 index 000000000..411179dfc --- /dev/null +++ b/packages/amis-theme-editor-helper/src/helper/styleOperation.ts @@ -0,0 +1,21 @@ +export function findOrCreactStyle(id: string) { + let varStyleTag = document.getElementById(id); + if (!varStyleTag) { + varStyleTag = document.createElement('style'); + varStyleTag.id = id; + document.body.appendChild(varStyleTag); + } + return varStyleTag; +} + +export function insertStyle(style: string, id: string) { + const varStyleTag = findOrCreactStyle(id); + // bca-disable-line + varStyleTag.innerHTML = style; +} + +export function addStyle(style: string, id: string) { + const varStyleTag = findOrCreactStyle(id); + // bca-disable-line + varStyleTag.innerHTML += style; +} diff --git a/packages/amis-theme-editor-helper/src/icons/add-button.svg b/packages/amis-theme-editor-helper/src/icons/add-button.svg new file mode 100644 index 000000000..823e62af8 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/icons/add-button.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/amis-theme-editor-helper/src/icons/checkbox-check.svg b/packages/amis-theme-editor-helper/src/icons/checkbox-check.svg new file mode 100644 index 000000000..1e2e53086 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/icons/checkbox-check.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/packages/amis-theme-editor-helper/src/icons/checkbox.svg b/packages/amis-theme-editor-helper/src/icons/checkbox.svg new file mode 100644 index 000000000..33a789af6 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/icons/checkbox.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/packages/amis-theme-editor-helper/src/icons/code.svg b/packages/amis-theme-editor-helper/src/icons/code.svg new file mode 100644 index 000000000..ab70ed864 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/icons/code.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/amis-theme-editor-helper/src/icons/color-picker-img-active.svg b/packages/amis-theme-editor-helper/src/icons/color-picker-img-active.svg new file mode 100644 index 000000000..994ffbc41 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/icons/color-picker-img-active.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/packages/amis-theme-editor-helper/src/icons/color-picker-img.svg b/packages/amis-theme-editor-helper/src/icons/color-picker-img.svg new file mode 100644 index 000000000..85c7eda9b --- /dev/null +++ b/packages/amis-theme-editor-helper/src/icons/color-picker-img.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/packages/amis-theme-editor-helper/src/icons/component.svg b/packages/amis-theme-editor-helper/src/icons/component.svg new file mode 100644 index 000000000..8fd023305 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/icons/component.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/amis-theme-editor-helper/src/icons/custom.svg b/packages/amis-theme-editor-helper/src/icons/custom.svg new file mode 100644 index 000000000..2dc1ca5be --- /dev/null +++ b/packages/amis-theme-editor-helper/src/icons/custom.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/amis-theme-editor-helper/src/icons/delete-button.svg b/packages/amis-theme-editor-helper/src/icons/delete-button.svg new file mode 100644 index 000000000..e466083d2 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/icons/delete-button.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/amis-theme-editor-helper/src/icons/global.svg b/packages/amis-theme-editor-helper/src/icons/global.svg new file mode 100644 index 000000000..bc67e48b1 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/icons/global.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/amis-theme-editor-helper/src/icons/index.tsx b/packages/amis-theme-editor-helper/src/icons/index.tsx new file mode 100644 index 000000000..31342671a --- /dev/null +++ b/packages/amis-theme-editor-helper/src/icons/index.tsx @@ -0,0 +1,54 @@ +import {registerIcon, Icon} from 'amis'; + +import CheckboxCheck from './checkbox-check.svg'; +import Checkbox from './checkbox.svg'; +import Code from './code.svg'; +import Component from './component.svg'; +import Global from './global.svg'; +import Custom from './custom.svg'; +import Lock from './lock.svg'; +import Unlock from './unlock.svg'; +import Italic from './italic.svg'; +import Underline from './underline.svg'; +import LineThrough from './line-through.svg'; +import textLeft from './text-left.svg'; +import textCenter from './text-center.svg'; +import textRight from './text-right.svg'; +import textJustify from './text-justify.svg'; +import verticalTop from './vertical-top.svg'; +import verticalMiddle from './vertical-middle.svg'; +import verticalBottom from './vertical-bottom.svg'; + +registerIcon('checkbox-check', CheckboxCheck); +registerIcon('checkbox', Checkbox); +registerIcon('code', Code); +registerIcon('component', Component); +registerIcon('global', Global); +registerIcon('custom', Custom); +registerIcon('lock', Lock); +registerIcon('unlock', Unlock); +registerIcon('italic', Italic); +registerIcon('underline', Underline); +registerIcon('line-through', LineThrough); +registerIcon('text-align-left', textLeft); +registerIcon('text-align-center', textCenter); +registerIcon('text-align-right', textRight); +registerIcon('text-align-justify', textJustify); +registerIcon('vertical-align-top', verticalTop); +registerIcon('vertical-align-middle', verticalMiddle); +registerIcon('vertical-align-bottom', verticalBottom); + +import AddButton from './add-button.svg'; +registerIcon('add-button', AddButton); + +import DeleteButton from './delete-button.svg'; +registerIcon('delete-button', DeleteButton); + +// 颜色选择器 +import ColorPickerImg from './color-picker-img.svg'; +import ColorPickerImgActive from './color-picker-img-active.svg'; + +registerIcon('color-picker-img', ColorPickerImg); +registerIcon('color-picker-img-active', ColorPickerImgActive); + +export {Icon}; diff --git a/packages/amis-theme-editor-helper/src/icons/italic.svg b/packages/amis-theme-editor-helper/src/icons/italic.svg new file mode 100644 index 000000000..56c7e62ed --- /dev/null +++ b/packages/amis-theme-editor-helper/src/icons/italic.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/amis-theme-editor-helper/src/icons/line-through.svg b/packages/amis-theme-editor-helper/src/icons/line-through.svg new file mode 100644 index 000000000..af74c3305 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/icons/line-through.svg @@ -0,0 +1,16 @@ + + + + + + + + S + + + + + + + + \ No newline at end of file diff --git a/packages/amis-theme-editor-helper/src/icons/lock.svg b/packages/amis-theme-editor-helper/src/icons/lock.svg new file mode 100644 index 000000000..e4bdfe25d --- /dev/null +++ b/packages/amis-theme-editor-helper/src/icons/lock.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/amis-theme-editor-helper/src/icons/text-center.svg b/packages/amis-theme-editor-helper/src/icons/text-center.svg new file mode 100644 index 000000000..33c1c6c73 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/icons/text-center.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/amis-theme-editor-helper/src/icons/text-justify.svg b/packages/amis-theme-editor-helper/src/icons/text-justify.svg new file mode 100644 index 000000000..bd9ae8512 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/icons/text-justify.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/amis-theme-editor-helper/src/icons/text-left.svg b/packages/amis-theme-editor-helper/src/icons/text-left.svg new file mode 100644 index 000000000..f6a39dbbf --- /dev/null +++ b/packages/amis-theme-editor-helper/src/icons/text-left.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/amis-theme-editor-helper/src/icons/text-right.svg b/packages/amis-theme-editor-helper/src/icons/text-right.svg new file mode 100644 index 000000000..c9f38c75e --- /dev/null +++ b/packages/amis-theme-editor-helper/src/icons/text-right.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/amis-theme-editor-helper/src/icons/underline.svg b/packages/amis-theme-editor-helper/src/icons/underline.svg new file mode 100644 index 000000000..fdd0bcb35 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/icons/underline.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/amis-theme-editor-helper/src/icons/unlock.svg b/packages/amis-theme-editor-helper/src/icons/unlock.svg new file mode 100644 index 000000000..7e806b28c --- /dev/null +++ b/packages/amis-theme-editor-helper/src/icons/unlock.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/amis-theme-editor-helper/src/icons/vertical-bottom.svg b/packages/amis-theme-editor-helper/src/icons/vertical-bottom.svg new file mode 100644 index 000000000..d98351839 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/icons/vertical-bottom.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/amis-theme-editor-helper/src/icons/vertical-middle.svg b/packages/amis-theme-editor-helper/src/icons/vertical-middle.svg new file mode 100644 index 000000000..e40935277 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/icons/vertical-middle.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/amis-theme-editor-helper/src/icons/vertical-top.svg b/packages/amis-theme-editor-helper/src/icons/vertical-top.svg new file mode 100644 index 000000000..8cc8166a2 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/icons/vertical-top.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/amis-theme-editor-helper/src/index.ts b/packages/amis-theme-editor-helper/src/index.ts new file mode 100644 index 000000000..4f0c461d6 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/index.ts @@ -0,0 +1,10 @@ +export * from './helper/ColorGenerator'; +export * from './helper/ParseThemeData'; +export * from './helper/declares'; +export * from './helper/getGlobalData'; +export * from './helper/styleOperation'; +export * from './systemTheme/index'; +export * from './helper/styleHelper'; +export * from './renderers/index'; +import './locale/index'; +import './style/index.scss'; diff --git a/packages/amis-theme-editor-helper/src/locale/en-US.ts b/packages/amis-theme-editor-helper/src/locale/en-US.ts new file mode 100644 index 000000000..39a146e88 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/locale/en-US.ts @@ -0,0 +1,233 @@ +import {extendLocale} from 'i18n-runtime'; + +extendLocale('en-US', { + '8f6ea8f1a35f96ba401e4fce9ddeb4b0': + 'Please pass in the hexadecimal color value', + 'fbae87bcc352f6933541fb77a07418ed': 'Primary color', + '22b777e6fcb613b8ba83ced9594cd07e': 'Ordinary', + '4363c17ebb346b646af55bd8c8075915': 'Click', + '062d0b688adb10f3af5ebc2fd2667f1c': 'Floating', + '8e1b944f4389bdaab6f11d5bc83190c8': 'Background', + 'd5fa0ac3fb033291acadd025db40cf8c': 'Highlight/text title', + '7835fd1dece3cf3750cb0db039b2ae73': 'Sub-highlight/text title', + 'b97ef9fe546e82e4b5f84661006a8ca7': 'Secondary information', + '54c155a9c985b0244666f36abe342b7a': 'Gray information', + '8318e9299a55c306333b4a2a43dbb6e2': 'Stroke/Divide Line', + '9f83cbd8f26e028346ecb459c4be9c01': 'Card background color', + '1110ba0bda5a251c55247f122e923848': 'transparent', + '2b250fe214bc8b93fb78d795a47d7a6c': 'Brand color', + 'af09bd51b66a26d8db3119e95b5d28fe': 'Neutral color', + 'b6c3e2dcf4053e5f24d15b63a29f5afd': 'Auxiliary color', + 'a2de03c5b7ec653d8eadaeeb9043d41a': 'Size {{@1}} ({{@2}})', + 'cc4c575642609fbf059a5df81eb86bfc': 'Solid line', + '61f6f4fc0b806ac9d41ad0792e6155f6': 'Dashed line', + 'b1e0ebac23ed95807ecc566da3ffab48': 'Dotted line', + 'd81bb206a889656035b929cd8bb1ef10': 'nothing', + 'e0dfa25ebceabddb2180720d36d4c3b6': 'border-top ', + 'a8b0c20416853bda54120bf19477ad11': 'whole', + 'a80a25b59908402cf7ee31a07d0e7739': 'border-left ', + '57463587977a534f7859eb9d7c536629': 'border-right ', + '154d5216e42c916884431f0eea951999': 'bottom', + 'a4f758412c3797290c957544c56db443': 'Inherit General', + 'd8a4e8cdc29e9aa576e669ed165892c9': 'Configure separately', + 'aa05fd09a619ddbf07d8d903e6d32c5e': 'currency', + 'ee5841a88da34c5a0e0515c4d863752a': 'Transparent', + '517c1de3f9f069c1c33003ec8d75c3da': 'Enter color values or name search', + 'd6a80fc3f53d0b11e5f96a538b096c06': 'Color not matched', + 'c7706039e8ad85969df13ce3458d199a': 'Gradient angle', + '21f3929a4484e6e992af64ec1dd3a576': 'Original size', + '0f1fd39145bad43e18f81337e0144c8c': 'Full of', + 'e0d76824dfe5e09c7068b44f605266d2': 'appropriate', + 'e39d3b7a3600d9327221a637f910fc0b': 'stretching', + 'e1ff2c83c09f2dc6cc74ae02ab6b8222': 'Tile', + '7ddd9dbf373f760acfd63778469b5c4b': 'Horizontal tiling', + '4ab931e0f709f9b493e660156925a113': 'Tile Vertically', + '61a87a021904dc65995e99d4c476cb21': 'Image position', + '7778401c65bfef9c0ad4d543e3b5b310': 'Common Colors', + '769d88e425e03120b83ee4ed6b9d588e': 'complete', + '95b351c86267f3aedf89520959bce689': 'edit', + 'ec8baa57611b5a89a37b31c7432a01d7': 'Click on the color above to add', + 'a1c76c6e1bd796959e536718e04d10ca': 'Theme Colors', + '255f442c4a1b92624a6e96541202a0be': 'Custom Colors', + '879f4e7bd863a00f77d30f05076ac6cb': '1.3x', + '4905c69b940b0d94cf8aec83bc8dcc83': '1.5x', + '268c43e529c54fb458397b9c13351a67': '1.7x', + 'efb399e557c1f444ba215c8e2dbfb891': 'Bold Simplified', + '4e9edbb054a1fc52fe2012ff8cb3b20e': 'Blackbody Complex', + 'bd8e7ebd31bd804a20986f7dd3739900': 'Holly Black Simplified Chinese', + 'd55a1b98030839c3ce3606d7d2c80235': 'Pingfang Hong Kong', + 'c9045965fa0fbf29323518d79c9da0f1': 'Ping Fang Jian', + 'c1ef096e25d96c451fd39c172b3f569a': 'Pingfang Fanfan', + '09e4d5659a11cf8a55f59e867b30ab75': 'Song typeface - Simplified Chinese', + '56d3dcaab79fe10dfbc4b80f0d9d72a4': 'Song typeface complex', + '2c1605abdc63ac897a76aeba5dcf36a4': 'Chinese Bold', + 'db37a0bd2e60503e939e8eee02511550': 'Chinese Song typeface', + '81d6da77d656c6a9c3cbd795ae4444ea': 'italic', + 'f6f8ea0815881fe9a4aa9352a7fe2299': 'Underline', + 'a120a873412470089bec1dfd1b581fc9': 'Strikethrough', + '413f48cc71f71083ce532a86e3efdc21': 'Align Left', + '56c17ba6a56c01706ae00a31611deb03': 'Align Center', + 'fd8e9572cc6bf87653c4d8f8b8dd0db9': 'Align Right', + 'da1b972efb29f850b50e219ad4d98ba5': 'Align Both Ends', + '2af8c8235ae57c6a7486883f86701ab3': 'Top alignment', + '8bc0ba58bf73b03668ca9b6a74c99f89': 'align vertical center', + 'a6d154c4db5068074e32863821c450e1': 'Bottom ', + '9c07532d0c9acfecfc4ec2eb265c3e03': 'character', + 'c988dd65ce45c335db5c4354eec7c110': 'Word weight', + '17169fd8c2ffa82c4e1d08e7267725f4': 'Row height', + '8456bc40d48da5af833f1c63385e9879': 'font', + 'df68a5dc8f8847179b7afdf943f80796': 'Upper left corner', + 'e717b4ae480e7c073fd5a44647a7f0da': 'Upper right corner', + '2a97dfb2d236c87c41fd588f006111dc': 'Lower left corner', + '1c9bc9dab33944e953412f8b22cb024a': 'Lower right corner', + '9cf15d01ed2846c4104d1607836bbe79': 'Shadow preview', + 'f1d4ff50f3828f9b73412e7d94e6dd6e': 'custom', + '803205e38834280d9e6a75993ac00764': 'shadow', + '6f9c7d7109f2b4b5a759359a455201e9': 'No Shadow', + '26db990dad6d76c6725375b24c0941e1': 'Shadow layer', + 'b24a723b73f96ab3340fe9502370ee13': 'Inner Shadow', + '92d393c2ae53f424856479d090de718f': 'External genitalia shadow', + '203bab8001257b60e1aed951a0939393': 'vague', + '2dc90225b8033d17c41b08f39fa42de2': 'extend', + '48110cb1579623335cf6a1e2327e5af1': 'Lock Scale', + '17399f02e23b5f5b9b3dedee03a2d538': 'Unlock', + 'a2b62974f4d7564bb68b570116f25a10': 'Minimum width', + 'e4e625f8f933ccfd0fe44a41fb02655f': 'Extended Configuration', + '3e42b9d1f06cd5ad39c37d93fd98329d': 'Imitate Antd', + '00a42062d24846499934cf5c753aedfe': 'Platform preset themes', + '1c61673194f8543ead4128ce52a79f5f': 'Basic font', + '94d322455c11e7666f5448ce1c4c14cd': 'Operations Title - Large', + 'e291cdc6b012b1ed5b8243fdaa44c204': 'Operations Title - Medium', + 'd20e34eb25d164b3a868e12b710b9a27': 'Operations Title - Small', + '701a94041742976d6f5ebf2450b60ed2': 'Title - Large', + 'cae9d44e7f6bb7fc305ed3ed97d420a9': 'Title - Middle', + '39a7ffed69e7f163bb0b163af441a4a3': 'Title - Small', + '15d1505fc16b73315b2a0e2a923743b6': 'Body General Large', + '64de1d8e51342a0de719f676a8ae5d15': 'Body General Small', + 'deefca7e66ebaac1ed4f27655961286c': 'Watermark Text', + 'fc55aff8c7e01416e93ac218d98b3b74': 'Font size', + 'f72ce9ad683cc82e0eab557ffc9c67a0': 'Extra small', + '23ecf42cada8bf2715792d718544d107': 'minimum', + '391b8fa9c747a1799353ab856e666ad5': 'small', + 'fd6e80f1e0199d6ecc3ee81ae04aa9ef': 'normal', + 'aed1dfbc31703955e64806b799b67645': 'in', + 'ab18e30c0dc4093ceeda8961fac3d1f4': 'large', + '973d9d0bcdbcdbec6de879c1572c2300': 'maximum', + '3386da5f56fac758ed0f18e024ecb943': 'Extra large', + 'c8339fd2a85af4ba66084d28df808de4': 'size', + '82832013777f9ec3a3406c0f771ddbc1': 'Failure Color', + '07d5f1fb5d239633dc4b2ddce27b52de': 'Warning color', + 'd2775b9d4d00a2ca7414635618c6e802': 'Success Color', + 'd3770b4e046c533df1946eb5a2763a54': 'Link Color', + '6b5040281083fce17fd3e8006d9a7cc3': 'Prompt color', + 'cf4d9e177b415e58c29371b9b22f3390': 'Other colors', + '4b4dc05ed0aa65da0abdb8cb92ae1fb3': 'Auxiliary instructions', + '710ad08b11419332713360d2750cd707': 'Disabled', + '35796bb8ca4342a4390dfb3c464bebb4': 'Pure white text', + 'ca746b1ff10193a3ce20878dec04a733': 'characters', + '2a03e7cc0afd5fc3519cd06bf59b538f': 'Pure white filling', + 'da3cfffa69723748fecfc8e964b7996e': 'Light/Disable Background', + '8c47ecd40d7f739e308567de89accd56': 'Division line', + '40fab37fcc50ecd7d9a570a24757a503': 'Deep/gray bottom suspension', + '756e44b36d4d962cef2732db02aefdd1': 'filling', + 'b37c14c49311fc0cd3288af9925808c8': 'shallow', + '21ac5a493ae8ab9bba043ca126433ca9': 'deep', + 'fa7132688004917a89ed807b5be00d27': 'heavy', + '84fe608676a8fe47637b824434cb225d': 'line', + '328215447d0e128a845729dab5ce9837': 'Data color', + '18c63459a2c069022c7790430f761214': 'default', + 'e7c37575b8b33fca7c8e94f712aa2385': 'classical', + 'fb2936372e13759bd6a6e113fcbafb68': 'transition', + '39003734d1d700d5bd97bf1e7a2fcf73': 'style', + '48d67284c554350eea37fc8762e447a1': 'Medium thick', + '804c19b95172c55f1796babbbb770899': 'Extra thick', + 'fb0af8105da1f0f57ce265340239a376': 'thickness', + 'c121ed6712e8231da4e3803e6eaf703c': 'Fillet 1', + 'ae15c0d31ae01fcea65b7e483f1b942d': 'Fillet 2', + '829fbc73be5187c3f3d4e403e8cbecbc': 'Fillet 3', + 'a797a13eef06c6b3ea2d52f60d216259': 'Fillet 4', + 'c02a7a69675e7cf1abeae6d279670471': 'Fillet 5', + 'f4276b865c626bb67ac41013c6da0317': 'Fillet 6', + '0103eb2d3dca70270d1a74e9ec987ac9': 'fillet', + 'efababbf5f440be0e19e40f4369b5ac1': 'Shadow sm', + '658cd4f2239e0d04e596ec1f65d5f9df': 'Shadow MD', + '940e477cb0b6a7a847862db402b79c07': 'Shadow lg', + '9ed233fc6677d73b458d45b250ecc3a1': 'Shadow xl', + 'c08787dc714fd5d7b2a1217b3d4afe8d': 'Shadow 2xl', + 'b3bb412da3c93f51b935c5df4759b7a6': 'Default General', + '77602d53a9b948cb43c9affb46ea4a6f': 'Default levitation', + '62c5ed2938e91f0589e6333d9c5c124f': 'Default click', + 'b3dad626b64ac5063c6a1e88f8a88322': 'Disabled by default', + '00dc03d70dd2321afa1c18b2186e7e2b': 'main', + 'bde770827b9137ddb3eb676878af9709': 'secondary', + '9a5e272968e173fb42c66a56eb93e4a7': 'enhance', + 'd8c7e04c8e2be23dd3b81a31db6e04f1': 'information', + '330363dfc524cff2488f2ebde0500896': 'success', + '900c70fa5f7dbc014e6f762d5e0e885c': 'warning', + '540f84ddc0883866b229f71c2844199a': 'danger', + '48d0a09bdd5fe7e89f0a445b0ffdf14f': 'Light color', + '41e8e8b9935c9ee4e88b06643a2d5b81': 'Dark color', + 'bfe68d5844f8e54602760e18f45954f7': 'link', + 'eadd05ba6a99ca43492efe5dad7325ad': 'secondary', + 'b6453aea1848b65a9a76cccca94715ec': 'Basic configuration', + 'c3e817974de836e80c95cc6ce5718eff': 'Search box', + '829abe5a8dcd0579a340d20636b59276': 'grouping', + 'd58ba4b5e94680fcb08300e176502fb8': 'Tabular form', + '7600db82433e763d16e3f1e91aa4ab80': 'Tree form', + 'd2fedacfc0f313fcc5d0a24d4d6d81db': 'Cascade selection', + '09bbfb387dce6201df1ccef2aab161a6': 'Clearable', + '94621f44f98c996e49d5b214aebefffc': 'word count ', + '56f40e132c8369340439255fa1073070': 'Single line input box', + '8685115115e4f8c8daf97a31528721ff': 'Multiline input box', + '57d14839d1098d99811f44d68dd0957e': 'Prefix/Suffix', + '055293fb3cf2b1fcbc60317a2ae6916a': 'Password input box', + '67b958a2d172f2b3474629f9f6724109': 'Additional components', + '97d07614380da93d257f9fbf81aa56fb': 'text', + 'e1371d733ff347664655629011b4130f': 'Basic Style', + '6d609769ad11b37dd509ec06362f0b73': 'Enhanced version', + '3e08fbf3806981c18666fff59718c85c': 'With unit selection', + 'ec1323a8ba34dd36b33e4e6baf22f076': 'Unit selector', + 'f99484b21ba7a64a748c60b52ea0401e': 'Column display', + 'd58a55bceec7591f43232e958928ed10': 'shut', + '8493205602379573013b8d3335981175': 'open', + '911bafa046cd76ecbc80ae199bd4a6e8': 'Switch Description', + 'fb090c01ee012eac2bb26751aeb5a3c4': 'Switch status text', + 'c4b07f2e6b60c5752a70551ff77ccedf': 'Default state', + 'db98f889ce6bc235e66bd4b2a788d137': 'check box', + '5ef69f62dc668c1a3e68b51c50a2530a': 'icon', + '6bfb9bb2218ff32b6139e98bc93707c0': 'Image upload', + '443f46c76ebe6ec4eb502f95c451e4b0': 'Multiple Choice', + '73e0299c2fb3a564af0a7cff42540542': 'Group mode', + '0e2eeb150583b23ed4234d58b81c18e4': 'Table Mode', + 'c2981042c21c8b5fa4451337d484d7db': 'Tree mode', + 'df011658c33f610e9b9d3302909a7f2b': 'range', + '4092ed98e9035652d4c9ca9441701ed7': 'basic', + '3fea7ca76cdece641436d7ab0d02ab1b': 'state', + '528c13332418466dba644a1bde0d1fdd': 'Punctate', + 'eedfc4d3b93ca4831e94efa2ac3be6f8': 'Simple mode', + '0796ba76b4b553687e5ffaeb78512ccb': 'basis', + '035692d6fc368765e391602aad0bf39a': 'Add Icon', + 'ea15ae2b7fba76c83eec6d0986d15197': 'option', + 'b05a75d95e71561fccc84306c95388e0': 'Popup Options', + '02d9819ddaaaeb1b7b22b12608c7e5ca': 'prompt', + '19de37513f3cb55919d32c0d559a0559': 'Small size', + '8aa7e04f48d51d5cd37ca94866187904': 'Normal size', + '21814e10b7abc9e05e6fc3b505b34844': 'Large size', + '2009e3d873e6f5e0978b1e123692c024': 'Facial labels', + '8cc6e3e65831f4e034d2a9ce6c68863a': 'Linear label', + '507d869237db8b0c47b07bdf824d4ae2': 'Status label', + '01f2895cef02a670e0268e1f97ee9445': 'Color status', + 'a465db53b8c98f42caa15ca5662f9c90': 'direction', + '533fbb06156c17f0040128567708d23e': 'Configure different states', + '240210b3088bcbea7588047000e89d9e': 'Default Style', + '16a20243f9b741c08216dc9548de2968': 'whole', + '3bdd08adab6ea90b9164b20a0e4151ac': 'describe', + '3fca5e5be30a99b8ca5e14173773f47c': 'Picture Item', + '32c65d8d7431e76029678ec7bb73a5ab': 'title', + 'e84ef1c5e5128107492f6813fa9a396b': 'Custom Columns', + '1f23b9dd74b629ba5bfd5eaf8e2f498d': 'Large size', + 'c0215e2abf0fe27597acba2be64f6993': 'Small size', + '93dee976f68681ec6950380d757d8c18': 'Multiple selection mode', + '9be232c5cffa019aab21bd631ff23462': 'Yunshe', + '1dfba2e7e2df2efc4a25f4f2adcba25e': 'System preset theme' +}); diff --git a/packages/amis-theme-editor-helper/src/locale/index.ts b/packages/amis-theme-editor-helper/src/locale/index.ts new file mode 100644 index 000000000..8cde39a27 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/locale/index.ts @@ -0,0 +1,2 @@ +import './en-US'; +import './zh-CN'; diff --git a/packages/amis-theme-editor-helper/src/locale/zh-CN.ts b/packages/amis-theme-editor-helper/src/locale/zh-CN.ts new file mode 100644 index 000000000..c522428a8 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/locale/zh-CN.ts @@ -0,0 +1,232 @@ +import {extendLocale} from 'i18n-runtime'; + +extendLocale('zh-CN', { + '8f6ea8f1a35f96ba401e4fce9ddeb4b0': '请传入十六进制色值', + 'fbae87bcc352f6933541fb77a07418ed': '主色', + '22b777e6fcb613b8ba83ced9594cd07e': '常规', + '4363c17ebb346b646af55bd8c8075915': '点击', + '062d0b688adb10f3af5ebc2fd2667f1c': '悬浮', + '8e1b944f4389bdaab6f11d5bc83190c8': '背景', + 'd5fa0ac3fb033291acadd025db40cf8c': '强调/正文标题', + '7835fd1dece3cf3750cb0db039b2ae73': '次强调/正文标题', + 'b97ef9fe546e82e4b5f84661006a8ca7': '次要信息', + '54c155a9c985b0244666f36abe342b7a': '置灰信息', + '8318e9299a55c306333b4a2a43dbb6e2': '描边/分割线', + '9f83cbd8f26e028346ecb459c4be9c01': '卡片背景色', + '1110ba0bda5a251c55247f122e923848': '透明', + '2b250fe214bc8b93fb78d795a47d7a6c': '品牌色', + 'af09bd51b66a26d8db3119e95b5d28fe': '中性色', + 'b6c3e2dcf4053e5f24d15b63a29f5afd': '辅助色', + 'a2de03c5b7ec653d8eadaeeb9043d41a': '尺寸{{@1}}({{@2}})', + 'cc4c575642609fbf059a5df81eb86bfc': '实线', + '61f6f4fc0b806ac9d41ad0792e6155f6': '虚线', + 'b1e0ebac23ed95807ecc566da3ffab48': '点线', + 'd81bb206a889656035b929cd8bb1ef10': '无', + 'e0dfa25ebceabddb2180720d36d4c3b6': '上边框', + 'a8b0c20416853bda54120bf19477ad11': '全部', + 'a80a25b59908402cf7ee31a07d0e7739': '左边框', + '57463587977a534f7859eb9d7c536629': '右边框', + '154d5216e42c916884431f0eea951999': '下边框', + 'a4f758412c3797290c957544c56db443': '继承常规', + 'd8a4e8cdc29e9aa576e669ed165892c9': '分别配置', + 'aa05fd09a619ddbf07d8d903e6d32c5e': '通用', + 'ee5841a88da34c5a0e0515c4d863752a': '透明-transparent', + '517c1de3f9f069c1c33003ec8d75c3da': '输入色值或名称搜索', + 'd6a80fc3f53d0b11e5f96a538b096c06': '未匹配到颜色', + 'c7706039e8ad85969df13ce3458d199a': '渐变角度', + '21f3929a4484e6e992af64ec1dd3a576': '原始尺寸', + '0f1fd39145bad43e18f81337e0144c8c': '充满', + 'e0d76824dfe5e09c7068b44f605266d2': '合适', + 'e39d3b7a3600d9327221a637f910fc0b': '拉伸', + 'e1ff2c83c09f2dc6cc74ae02ab6b8222': '平铺', + '7ddd9dbf373f760acfd63778469b5c4b': '横向平铺', + '4ab931e0f709f9b493e660156925a113': '纵向平铺', + '61a87a021904dc65995e99d4c476cb21': '图片位置', + '7778401c65bfef9c0ad4d543e3b5b310': '常用颜色', + '769d88e425e03120b83ee4ed6b9d588e': '完成', + '95b351c86267f3aedf89520959bce689': '编辑', + 'ec8baa57611b5a89a37b31c7432a01d7': '点击上方颜色添加', + 'a1c76c6e1bd796959e536718e04d10ca': '主题颜色', + '255f442c4a1b92624a6e96541202a0be': '自定义颜色', + '879f4e7bd863a00f77d30f05076ac6cb': '1.3倍', + '4905c69b940b0d94cf8aec83bc8dcc83': '1.5倍', + '268c43e529c54fb458397b9c13351a67': '1.7倍', + 'efb399e557c1f444ba215c8e2dbfb891': '黑体-简', + '4e9edbb054a1fc52fe2012ff8cb3b20e': '黑体-繁', + 'bd8e7ebd31bd804a20986f7dd3739900': '冬青黑体简体中文', + 'd55a1b98030839c3ce3606d7d2c80235': '苹方-港', + 'c9045965fa0fbf29323518d79c9da0f1': '苹方-简', + 'c1ef096e25d96c451fd39c172b3f569a': '苹方-繁', + '09e4d5659a11cf8a55f59e867b30ab75': '宋体-简', + '56d3dcaab79fe10dfbc4b80f0d9d72a4': '宋体-繁', + '2c1605abdc63ac897a76aeba5dcf36a4': '华文黑体', + 'db37a0bd2e60503e939e8eee02511550': '华文宋体', + '81d6da77d656c6a9c3cbd795ae4444ea': '斜体', + 'f6f8ea0815881fe9a4aa9352a7fe2299': '下划线', + 'a120a873412470089bec1dfd1b581fc9': '删除线', + '413f48cc71f71083ce532a86e3efdc21': '左对齐', + '56c17ba6a56c01706ae00a31611deb03': '居中对齐', + 'fd8e9572cc6bf87653c4d8f8b8dd0db9': '右对齐', + 'da1b972efb29f850b50e219ad4d98ba5': '两端对齐', + '2af8c8235ae57c6a7486883f86701ab3': '顶对齐', + '8bc0ba58bf73b03668ca9b6a74c99f89': '垂直居中对齐', + 'a6d154c4db5068074e32863821c450e1': '底对齐', + '9c07532d0c9acfecfc4ec2eb265c3e03': '字符', + 'c988dd65ce45c335db5c4354eec7c110': '字重', + '17169fd8c2ffa82c4e1d08e7267725f4': '行高', + '8456bc40d48da5af833f1c63385e9879': '字体', + 'df68a5dc8f8847179b7afdf943f80796': '左上角', + 'e717b4ae480e7c073fd5a44647a7f0da': '右上角', + '2a97dfb2d236c87c41fd588f006111dc': '左下角', + '1c9bc9dab33944e953412f8b22cb024a': '右下角', + '9cf15d01ed2846c4104d1607836bbe79': '阴影预览', + 'f1d4ff50f3828f9b73412e7d94e6dd6e': '自定义', + '803205e38834280d9e6a75993ac00764': '阴影', + '6f9c7d7109f2b4b5a759359a455201e9': '无阴影', + '26db990dad6d76c6725375b24c0941e1': '阴影层', + 'b24a723b73f96ab3340fe9502370ee13': '内阴影', + '92d393c2ae53f424856479d090de718f': '外阴影', + '203bab8001257b60e1aed951a0939393': '模糊', + '2dc90225b8033d17c41b08f39fa42de2': '扩展', + '48110cb1579623335cf6a1e2327e5af1': '锁定比例', + '17399f02e23b5f5b9b3dedee03a2d538': '解除锁定', + 'a2b62974f4d7564bb68b570116f25a10': '最小宽度', + 'e4e625f8f933ccfd0fe44a41fb02655f': '扩展配置', + '3e42b9d1f06cd5ad39c37d93fd98329d': '仿Antd', + '00a42062d24846499934cf5c753aedfe': '平台预设主题', + '1c61673194f8543ead4128ce52a79f5f': '基础字体', + '94d322455c11e7666f5448ce1c4c14cd': '运营标题-大', + 'e291cdc6b012b1ed5b8243fdaa44c204': '运营标题-中', + 'd20e34eb25d164b3a868e12b710b9a27': '运营标题-小', + '701a94041742976d6f5ebf2450b60ed2': '标题-大', + 'cae9d44e7f6bb7fc305ed3ed97d420a9': '标题-中', + '39a7ffed69e7f163bb0b163af441a4a3': '标题-小', + '15d1505fc16b73315b2a0e2a923743b6': '正文-常规-大', + '64de1d8e51342a0de719f676a8ae5d15': '正文-常规-小', + 'deefca7e66ebaac1ed4f27655961286c': '水印文字', + 'fc55aff8c7e01416e93ac218d98b3b74': '字号', + 'f72ce9ad683cc82e0eab557ffc9c67a0': '特小', + '23ecf42cada8bf2715792d718544d107': '极小', + '391b8fa9c747a1799353ab856e666ad5': '小', + 'fd6e80f1e0199d6ecc3ee81ae04aa9ef': '正常', + 'aed1dfbc31703955e64806b799b67645': '中', + 'ab18e30c0dc4093ceeda8961fac3d1f4': '大', + '973d9d0bcdbcdbec6de879c1572c2300': '极大', + '3386da5f56fac758ed0f18e024ecb943': '特大', + 'c8339fd2a85af4ba66084d28df808de4': '尺寸', + '82832013777f9ec3a3406c0f771ddbc1': '失败色', + '07d5f1fb5d239633dc4b2ddce27b52de': '警告色', + 'd2775b9d4d00a2ca7414635618c6e802': '成功色', + 'd3770b4e046c533df1946eb5a2763a54': '链接色', + '6b5040281083fce17fd3e8006d9a7cc3': '提示色', + 'cf4d9e177b415e58c29371b9b22f3390': '其他色', + '4b4dc05ed0aa65da0abdb8cb92ae1fb3': '辅助说明', + '710ad08b11419332713360d2750cd707': '禁用', + '35796bb8ca4342a4390dfb3c464bebb4': '纯白文字', + 'ca746b1ff10193a3ce20878dec04a733': '文字', + '2a03e7cc0afd5fc3519cd06bf59b538f': '纯白填充', + 'da3cfffa69723748fecfc8e964b7996e': '浅/禁用背景', + '8c47ecd40d7f739e308567de89accd56': '分割线', + '40fab37fcc50ecd7d9a570a24757a503': '深/灰底悬浮', + '756e44b36d4d962cef2732db02aefdd1': '填充', + 'b37c14c49311fc0cd3288af9925808c8': '浅', + '21ac5a493ae8ab9bba043ca126433ca9': '深', + 'fa7132688004917a89ed807b5be00d27': '重', + '84fe608676a8fe47637b824434cb225d': '线条', + '328215447d0e128a845729dab5ce9837': '数据色', + '18c63459a2c069022c7790430f761214': '默认', + 'e7c37575b8b33fca7c8e94f712aa2385': '经典', + 'fb2936372e13759bd6a6e113fcbafb68': '过渡', + '39003734d1d700d5bd97bf1e7a2fcf73': '样式', + '48d67284c554350eea37fc8762e447a1': '中粗', + '804c19b95172c55f1796babbbb770899': '特粗', + 'fb0af8105da1f0f57ce265340239a376': '粗细', + 'c121ed6712e8231da4e3803e6eaf703c': '圆角1', + 'ae15c0d31ae01fcea65b7e483f1b942d': '圆角2', + '829fbc73be5187c3f3d4e403e8cbecbc': '圆角3', + 'a797a13eef06c6b3ea2d52f60d216259': '圆角4', + 'c02a7a69675e7cf1abeae6d279670471': '圆角5', + 'f4276b865c626bb67ac41013c6da0317': '圆角6', + '0103eb2d3dca70270d1a74e9ec987ac9': '圆角', + 'efababbf5f440be0e19e40f4369b5ac1': '阴影sm', + '658cd4f2239e0d04e596ec1f65d5f9df': '阴影md', + '940e477cb0b6a7a847862db402b79c07': '阴影lg', + '9ed233fc6677d73b458d45b250ecc3a1': '阴影xl', + 'c08787dc714fd5d7b2a1217b3d4afe8d': '阴影2xl', + 'b3bb412da3c93f51b935c5df4759b7a6': '默认常规', + '77602d53a9b948cb43c9affb46ea4a6f': '默认悬浮', + '62c5ed2938e91f0589e6333d9c5c124f': '默认点击', + 'b3dad626b64ac5063c6a1e88f8a88322': '默认禁用', + '00dc03d70dd2321afa1c18b2186e7e2b': '主要', + 'bde770827b9137ddb3eb676878af9709': '次要', + '9a5e272968e173fb42c66a56eb93e4a7': '增强', + 'd8c7e04c8e2be23dd3b81a31db6e04f1': '信息', + '330363dfc524cff2488f2ebde0500896': '成功', + '900c70fa5f7dbc014e6f762d5e0e885c': '警告', + '540f84ddc0883866b229f71c2844199a': '危险', + '48d0a09bdd5fe7e89f0a445b0ffdf14f': '浅色', + '41e8e8b9935c9ee4e88b06643a2d5b81': '深色', + 'bfe68d5844f8e54602760e18f45954f7': '链接', + 'eadd05ba6a99ca43492efe5dad7325ad': '中等', + 'b6453aea1848b65a9a76cccca94715ec': '基础配置', + 'c3e817974de836e80c95cc6ce5718eff': '搜索框', + '829abe5a8dcd0579a340d20636b59276': '分组', + 'd58ba4b5e94680fcb08300e176502fb8': '表格形式', + '7600db82433e763d16e3f1e91aa4ab80': '树形式', + 'd2fedacfc0f313fcc5d0a24d4d6d81db': '级联选择', + '09bbfb387dce6201df1ccef2aab161a6': '可清除', + '94621f44f98c996e49d5b214aebefffc': '字数统计', + '56f40e132c8369340439255fa1073070': '单行输入框', + '8685115115e4f8c8daf97a31528721ff': '多行输入框', + '57d14839d1098d99811f44d68dd0957e': '前缀/后缀', + '055293fb3cf2b1fcbc60317a2ae6916a': '密码输入框', + '67b958a2d172f2b3474629f9f6724109': '附加组件', + '97d07614380da93d257f9fbf81aa56fb': '文本', + 'e1371d733ff347664655629011b4130f': '基础样式', + '6d609769ad11b37dd509ec06362f0b73': '加强版', + '3e08fbf3806981c18666fff59718c85c': '带单位选择', + 'ec1323a8ba34dd36b33e4e6baf22f076': '单位选择器', + 'f99484b21ba7a64a748c60b52ea0401e': '列显示', + 'd58a55bceec7591f43232e958928ed10': '关', + '8493205602379573013b8d3335981175': '开', + '911bafa046cd76ecbc80ae199bd4a6e8': '开关说明', + 'fb090c01ee012eac2bb26751aeb5a3c4': '开关状态文本', + 'c4b07f2e6b60c5752a70551ff77ccedf': '默认态', + 'db98f889ce6bc235e66bd4b2a788d137': '复选框', + '5ef69f62dc668c1a3e68b51c50a2530a': '图标', + '6bfb9bb2218ff32b6139e98bc93707c0': '图片上传', + '443f46c76ebe6ec4eb502f95c451e4b0': '多选', + '73e0299c2fb3a564af0a7cff42540542': '分组模式', + '0e2eeb150583b23ed4234d58b81c18e4': '表格模式', + 'c2981042c21c8b5fa4451337d484d7db': '树模式', + 'df011658c33f610e9b9d3302909a7f2b': '范围', + '4092ed98e9035652d4c9ca9441701ed7': '基本', + '3fea7ca76cdece641436d7ab0d02ab1b': '状态', + '528c13332418466dba644a1bde0d1fdd': '点状', + 'eedfc4d3b93ca4831e94efa2ac3be6f8': '简单模式', + '0796ba76b4b553687e5ffaeb78512ccb': '基础', + '035692d6fc368765e391602aad0bf39a': '添加图标', + 'ea15ae2b7fba76c83eec6d0986d15197': '选项', + 'b05a75d95e71561fccc84306c95388e0': '弹窗选项', + '02d9819ddaaaeb1b7b22b12608c7e5ca': '提示', + '19de37513f3cb55919d32c0d559a0559': 'small尺寸', + '8aa7e04f48d51d5cd37ca94866187904': 'normal尺寸', + '21814e10b7abc9e05e6fc3b505b34844': 'large尺寸', + '2009e3d873e6f5e0978b1e123692c024': '面性标签', + '8cc6e3e65831f4e034d2a9ce6c68863a': '线性标签', + '507d869237db8b0c47b07bdf824d4ae2': '状态标签', + '01f2895cef02a670e0268e1f97ee9445': '颜色状态', + 'a465db53b8c98f42caa15ca5662f9c90': '方向', + '533fbb06156c17f0040128567708d23e': '配置 不同状态', + '240210b3088bcbea7588047000e89d9e': '默认样式', + '16a20243f9b741c08216dc9548de2968': '整体', + '3bdd08adab6ea90b9164b20a0e4151ac': '描述', + '3fca5e5be30a99b8ca5e14173773f47c': '图片项', + '32c65d8d7431e76029678ec7bb73a5ab': '标题', + 'e84ef1c5e5128107492f6813fa9a396b': '自定义列', + '1f23b9dd74b629ba5bfd5eaf8e2f498d': '尺寸大', + 'c0215e2abf0fe27597acba2be64f6993': '尺寸小', + '93dee976f68681ec6950380d757d8c18': '多选模式', + '9be232c5cffa019aab21bd631ff23462': '云舍', + '1dfba2e7e2df2efc4a25f4f2adcba25e': '系统预设主题' +}); diff --git a/packages/amis-theme-editor-helper/src/renderers/Border.tsx b/packages/amis-theme-editor-helper/src/renderers/Border.tsx new file mode 100644 index 000000000..02e73365f --- /dev/null +++ b/packages/amis-theme-editor-helper/src/renderers/Border.tsx @@ -0,0 +1,343 @@ +/** + * @file 边框 + * @description 边框设置 + */ + +import cx from 'classnames'; +import React, {useEffect, useState} from 'react'; +import {FormItem} from 'amis-core'; +import type {FormControlProps} from 'amis-core'; +import cloneDeep from 'lodash/cloneDeep'; +import {Select} from 'amis-ui'; +import ColorPicker from './ColorPicker'; +import ThemeSelect from './ThemeSelect'; +import {i18n as _i18n} from 'i18n-runtime'; +import { + getValueByPath, + getInheritValue, + formatInheritData, + setInheritData +} from '../util'; + +interface BorderProps { + custom?: boolean; + needColorCustom?: boolean; +} + +interface Options { + label: string; + value: string; + realValue?: any; + parent?: boolean; +} + +const defaultStyleOptions = [ + { + label: '实线', + value: 'solid', + realValue: 'solid' + }, + { + label: '虚线', + value: 'dashed', + realValue: 'dashed' + }, + { + label: '点线', + value: 'dotted', + realValue: 'dotted' + } +]; + +const defaultBorderWidthOptions = [ + { + value: 'none', + label: '无', + realValue: 'none' + }, + { + value: '1px', + label: '1px', + realValue: '1px' + }, + { + value: '2px', + label: '2px', + realValue: '2px' + }, + { + value: '4px', + label: '4px', + realValue: '4px' + } +]; + +const borderItems = [ + { + item: 'top', + tip: '上边框' + }, + { + item: 'all', + tip: '全部' + }, + { + item: 'left', + tip: '左边框' + }, + { + item: 'right', + tip: '右边框' + }, + { + item: 'bottom', + tip: '下边框' + } +]; + +function BoxBorder(props: BorderProps & FormControlProps) { + const { + onChange, + value = {}, + data, + custom, + label, + needColorCustom, + state, + editorThemePath + } = props; + const [borderWidthOptions, setBorderWidthOptions] = useState( + cloneDeep( + props.borderWidthOptions || + data.borderWidthOptions || + defaultBorderWidthOptions + ) + ); + const [borderStyleOptions, setBorderStyleOptions] = useState( + cloneDeep( + props.borderStyleOptions || data.borderStyleOptions || defaultStyleOptions + ) + ); + const [colorOptions, setColorOptions] = useState( + cloneDeep(props.colorOptions || data.colorOptions) + ); + const [borderType, setBorderType] = useState('all'); + const editorDefaultValue = formatData(getValueByPath(editorThemePath, data)); + const editorInheritValue = getInheritValue(editorThemePath, data); + const borderData = formatData(value || {}); + + useEffect(() => { + if (state && state !== 'default') { + const type = borderType === 'all' ? 'top' : borderType; + const styleOptions = cloneDeep(borderStyleOptions); + if (styleOptions[0].parent) { + styleOptions[0].value = editorThemePath + ? 'inherit' + : `var(${data.default.token}${type}-border-style)`; + styleOptions[0].realValue = '继承常规'; + } else { + styleOptions.unshift({ + label: '继承常规', + value: editorThemePath + ? 'inherit' + : `var(${data?.default?.token}${type}-border-style)`, + parent: true, + realValue: '继承常规' + }); + } + setBorderStyleOptions(styleOptions); + } + }, [borderType]); + + function formatData(sourceData: any) { + if (!sourceData) { + return null; + } + + const data = formatInheritData(cloneDeep(sourceData)); + + const fn = (type: string) => { + if ( + data[`top-border-${type}`] === data[`right-border-${type}`] && + data[`right-border-${type}`] === data[`bottom-border-${type}`] && + data[`bottom-border-${type}`] === data[`left-border-${type}`] + ) { + data[`all-border-${type}`] = data[`top-border-${type}`]; + } else { + data[`all-border-${type}`] = 'custom'; + } + }; + fn('width'); + fn('style'); + fn('color'); + return data; + } + + function getLabel(value?: string, option?: any) { + if (value === 'inherit') { + return '继承常规'; + } + const res = option?.find((item: any) => item.value === value); + if (res) { + return res.label; + } + return value; + } + + function getKey(field: string) { + return `${borderType}-border-${field}`; + } + + function changeType(value: string) { + setBorderType(value); + } + + function changeItem(key: string) { + return (val: string | undefined) => { + let field = getKey(key); + + if (val === 'custom') { + return; + } + + let changeValue = {}; + + if (borderType === 'all') { + let newValue: Record = {}; + + // 过滤掉all + let items = borderItems.filter(position => position?.item !== 'all'); + items.forEach(item => { + let itemKey = `${item.item}-border-${key}`; + newValue[itemKey] = val; + }); + changeValue = { + ...value, + ...newValue + }; + } else { + changeValue = { + ...value, + [field]: val + }; + } + + onChange(setInheritData(changeValue, editorInheritValue)); + }; + } + + return ( +
+ {label ?
{label}
: null} +
+ {custom ? ( +
+ {borderItems.map(item => { + let valueKey = `border-${item.item}`; + return ( +
changeType(item.item)} + > + +
+ ); + })} +
+ ) : ( +
+ )} + +
+ changeItem('width')(value)} + itemName={`${ + borderType === 'all' ? 'top' : borderType + }-border-width`} + state={state} + inheritValue={editorThemePath ? 'inherit' : ''} + placeholder={editorDefaultValue?.[getKey('width')]} + /> +
+ { + if (image && res?.value) { + onChange( + `url(${image}) ${POSITION_MAP[position]} / ${res.value} ${color}` + ); + } + }} + /> + { + onChange(`url(${image}) ${POSITION_MAP[value]} / ${mode} ${color}`); + }} + /> + { + onChange( + `url(${image}) ${POSITION_MAP[position]} / ${mode} ${value}` + ); + }} + /> +
+
+ ); +} + +function ImagePosition({value, onChange}: {value: number; onChange: Function}) { + const positionMap = Array.from(Array(9).keys()); + const [show, setShow] = useState(false); + const target = useRef(null); + function close() { + setShow(false); + } + function positionChange(value: number) { + onChange(value); + } + return ( + <> +
{ + setShow(true); + }} + > + {positionMap.map(position => ( +
+ ))} +
+ + +
+
图片位置
+
+ {positionMap.map(position => ( +
{ + positionChange(position); + }} + >
+ ))} +
+
+ + + + ); +} + +function ImageColor(props: any) { + const {value, onChange, themeList, subTabList} = props; + const [show, setShow] = useState(false); + const [tab, setTab] = useState(0); + const target = useRef(null); + function close() { + setShow(false); + } + function handleTab(value: number) { + setTab(value); + } + + useEffect(() => { + if (~value.indexOf('var')) { + setTab(0); + } else { + setTab(1); + } + }, [value]); + return ( + <> +
{ + setShow(true); + }} + >
+ + +
+
+
+ {subTabList.map((item: any) => ( +
{ + handleTab(item.id); + }} + key={item.id} + > + {item.name} +
+ ))} +
+ {tab === 0 ? ( + { + onChange(value); + close(); + }} + value={value} + /> + ) : null} + {tab === 1 ? ( + + ) : null} +
+
+ + + + ); +} + +/** + * 最近颜色列表 + */ +function PresetColors(props: { + themeList: GlobalData['colorOptions']; + onChange: (color: string) => void; + onRef: any; + needGradient?: boolean; + needImage?: boolean; + needTheme?: boolean; // 主题色 + needCustom?: boolean; // 自定义颜色 +}) { + interface Color { + title?: string; + color: string; + } + interface PresetColors { + colors: Color[]; + linearGradient: Color[]; + img: Color[]; + } + const { + themeList, + onChange, + onRef, + needGradient, + needImage, + needTheme, + needCustom + } = props; + const [colors, setColors] = useState({ + colors: [], + linearGradient: [], + img: [] + }); + const [edit, setEdit] = useState(false); + + function setPresetColor(value: string) { + if (!value) { + return; + } + const presetColors = cloneDeep(colors); + if (!!~value.indexOf('linear-gradient')) { + if ( + presetColors.linearGradient.length < 8 && + !colors.linearGradient.find(n => n.color === value) + ) { + presetColors.linearGradient.unshift({ + color: value, + title: value + }); + } + } else if (!!~value.indexOf('url')) { + // 图片不加入最近颜色列表 + return; + // if ( + // presetColors.img.length < 8 && + // !colors.img.find(n => n.color === value) + // ) { + // presetColors.img.unshift({ + // color: value, + // title: value + // }); + // } + } else if ( + presetColors.colors.length < 8 && + !colors.colors.find(n => n.color === value) + ) { + let title; + if (value.indexOf('var(') === 0) { + title = findColor(value, themeList).label; + } + presetColors.colors.unshift({ + color: value, + title + }); + } + localStorage.setItem('presetColors', JSON.stringify(presetColors)); + setColors(presetColors); + } + + useImperativeHandle(onRef, () => ({ + setPresetColor: debounce(setPresetColor, 500) + })); + + useEffect(() => { + let presetColors; + try { + presetColors = JSON.parse(localStorage.getItem('presetColors') || ''); + } catch (e) { + presetColors = { + colors: [], + linearGradient: [], + img: [] + }; + } + + setColors(presetColors); + }, []); + + function getColorsLen(colors: PresetColors) { + return ( + colors.colors.length + colors.linearGradient.length + colors.img.length + ); + } + + function colorClick(color: string, index: number, type: keyof typeof colors) { + if (edit) { + const newColors = cloneDeep(colors); + newColors[type].splice(index, 1); + setColors(newColors); + localStorage.setItem('presetColors', JSON.stringify(newColors)); + if (getColorsLen(newColors) === 0) { + setEdit(false); + } + } else { + onChange(color); + } + } + + return ( +
+
+ 常用颜色 + {getColorsLen(colors) > 0 ? ( + { + setEdit(!edit); + }} + > + {edit ? '完成' : '编辑'} + + ) : null} +
+
+ {getColorsLen(colors) > 0 ? ( + Object.keys(colors).map((key: keyof typeof colors) => { + if (!needGradient && key === 'linearGradient') { + return null; + } + if (!needImage && key === 'img') { + return null; + } + if (!needTheme && !needCustom && key === 'colors') { + return null; + } + return colors[key].length > 0 ? ( +
+ {colors[key].map((color, index) => { + return ( +
{color.title || color.color}
+ }} + key={color.color} + container={document.body} + > +
{ + colorClick(color.color, index, key); + }} + > +
+
+ + ); + })} +
+ ) : null; + }) + ) : ( + + 点击上方颜色添加 + + )} +
+
+ ); +} + +function ColorSelect(props: ColorSelectProps) { + const { + show, + target, + themeList, + onChange, + close, + value, + needGradient, + needImage, + needTheme, + needCustom + } = props; + const [tab, setTab] = useState('color'); + const [subTab, setSubTab] = useState(0); + const presetColorRef = useRef(); + + const tabMap: any = { + color: {name: 'color'} + }; + if (needGradient) { + tabMap['gradient'] = {name: 'gradient'}; + } + if (needImage) { + tabMap['img'] = { + name: 'img', + icon: , + activeIcon: + }; + } + const subTabList: any[] = [ + needTheme && + themeList && + themeList.length > 0 && {name: '主题颜色', parent: 'color', id: 0}, + needCustom && {name: '自定义颜色', parent: 'color', id: 1} + ].filter(n => n); + + function setSubTabCheck() { + if ( + needTheme && + value.indexOf('#') !== 0 && + value.indexOf('rgba') !== 0 && + subTabList.find(item => item.id === 0) + ) { + setSubTab(0); + } else if (needCustom && subTabList.find(item => item.id === 1)) { + setSubTab(1); + } + } + + useEffect(() => { + if ( + needTheme && + (value?.indexOf('var') === 0 || value === 'transparent' || !value) && + subTabList.find(item => item.id === 0) + ) { + setTab('color'); + setSubTab(0); + } else if (needGradient && value?.indexOf('linear-gradient') === 0) { + setTab('gradient'); + } else if (needImage && value?.indexOf('url') === 0) { + setTab('img'); + } else if (needCustom && subTabList.find(item => item.id === 1)) { + setTab('color'); + setSubTab(1); + } + }, [show]); + + useEffect(() => { + if (needTheme) { + setSubTab(0); + } else if (needCustom) { + setSubTab(1); + } + }, [needCustom, needTheme]); + + function colorOnChange(value: string) { + onChange(value); + presetColorRef.current?.setPresetColor(value); + } + + function renderSubTab() { + const list = subTabList.filter(item => item.parent === tab); + if (list.length > 0) { + return ( +
+ {list.map((item: any) => ( +
setSubTab(item.id)} + > + {item.name} +
+ ))} +
+ ); + } else { + return null; + } + } + + return ( + + +
+ {Object.keys(tabMap).length > 1 ? ( +
+ {Object.keys(tabMap).map(key => ( +
{ + setTab(key); + setSubTabCheck(); + }} + > + {tab === key ? tabMap[key].activeIcon : tabMap[key].icon} +
+ ))} +
+ ) : null} + + {renderSubTab()} +
+ {tab === 'color' ? ( +
+ {subTab === 0 ? ( + + ) : null} + {subTab === 1 ? ( + + ) : null} +
+ ) : null} + {tab === 'gradient' ? ( + + ) : null} + {tab === 'img' ? ( + + ) : null} + +
+
+ + + ); +} + +function ColorPicker(props: ColorPickerProps) { + const { + value, + options, + data, + onChange, + labelMode, + needGradient, + needImage, + needTheme, + needCustom, + placeholder, + disabled, + readOnly + } = props; + let themeList = options; + if (typeof options === 'string') { + themeList = resolveVariableAndFilter(options, data, '| raw'); + } + + const container = useRef(null); + const target = useRef(null); + + const [color, setColor] = useState(value); + const [show, setShow] = useState(false); + + function colorSelectHandler() { + !disabled && setShow(!show); + } + + function handleClean(event: any) { + setColor(undefined); + onChange(undefined); + event.preventDefault(); + event.stopPropagation(); + } + + useEffect(() => { + setColor(value); + }, [value]); + + return ( +
+
+
+ {findColor(color || placeholder, themeList).value ? ( + ( +
{findColor(color || placeholder, themeList).label}
+ ) + }} + > +
+ + ) : ( +
+ )} +
+ {labelMode === 'input' ? ( + <> +
+ {color ? ( +
{findColor(color, themeList).label}
+ ) : ( +
+ {findColor(placeholder, themeList)?.label || placeholder} +
+ )} +
+ {value && !disabled && !readOnly ? ( + + + + ) : null} + + + + + + ) : null} +
+ { + setShow(false); + }} + container={container} + target={target} + themeList={themeList} + onChange={onChange} + /> +
+ ); +} + +function ColorPickerControl(props: ColorPickerControlProps) { + const editorDefaultValue = getValueByPath( + props.editorThemePath || '', + props.data + ); + const value = formatInheritData(props.value) || editorDefaultValue; + + return ( + <> + + + ); +} + +export default ColorPicker; + +@FormItem({ + type: 'amis-theme-color-picker', + strictMode: false, + renderLabel: true +}) +export class ColorPickerRenderer extends React.Component { + render() { + return ( + + ); + } +} diff --git a/packages/amis-theme-editor-helper/src/renderers/Font.tsx b/packages/amis-theme-editor-helper/src/renderers/Font.tsx new file mode 100644 index 000000000..5309c7082 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/renderers/Font.tsx @@ -0,0 +1,1150 @@ +/** + * @file Font.tsx + * @description 设置文字 + */ + +import React, {useEffect} from 'react'; +import {FormItem} from 'amis-core'; +import type {FormControlProps} from 'amis-core'; +import {Icon as ThemeIcon} from '../icons/index'; +import cx from 'classnames'; +import {TooltipWrapper} from 'amis-ui'; +import ColorPicker from './ColorPicker'; +import cloneDeep from 'lodash/cloneDeep'; +import assign from 'lodash/assign'; +import {ThemeWrapperHeader} from './ThemeWrapper'; +import ThemeSelect from './ThemeSelect'; +import { + getValueByPath, + getInheritValue, + formatInheritData, + setInheritData +} from '../util'; + +interface FontEditorProps extends FormControlProps {} + +interface SizeDataProps { + 'font-family'?: string; + 'fontSize'?: string; + 'fontWeight'?: string; + 'lineHeight'?: string; + 'color'?: string; + 'font-style'?: string; + 'text-decoration'?: string; + 'text-align'?: string; + 'vertical-align'?: string; +} + +interface OptionProps { + label: string; + type: keyof SizeDataProps; + value: string; +} + +const defaultFontSize = [ + '12px', + '14px', + '16px', + '18px', + '20px', + '22px', + '24px', + '26px', + '28px', + '30px', + '32px', + '34px', + '36px', + '38px', + '40px' +].map(n => ({value: n, label: n, realValue: n})); + +const defaultFontWeight = [ + '100', + '200', + '300', + '400', + '500', + '600', + '700', + '800', + '900' +].map(n => ({value: n, label: n, realValue: n})); + +const defaultlineHeight = [ + { + label: '1.3倍', + value: '1.3', + realValue: '1.3' + }, + { + label: '1.5倍', + value: '1.5', + realValue: '1.5' + }, + { + label: '1.7倍', + value: '1.7', + realValue: '1.7' + } +]; + +const SYSTEM_FONT_FAMILY = [ + { + label: 'Academy Engraved LET', + value: 'Academy Engraved LET' + }, + { + label: 'Al Bayan', + value: 'Al Bayan' + }, + { + label: 'Al Nile', + value: 'Al Nile' + }, + { + label: 'Al Tarikh', + value: 'Al Tarikh' + }, + { + label: 'American Typewriter', + value: 'American Typewriter' + }, + { + label: 'Andale Mono', + value: 'Andale Mono' + }, + { + label: 'Apple Braille', + value: 'Apple Braille' + }, + { + label: 'Apple Chancery', + value: 'Apple Chancery' + }, + { + label: 'Apple Color Emoji', + value: 'Apple Color Emoji' + }, + { + label: 'Apple SD Gothic Neo', + value: 'Apple SD Gothic Neo' + }, + { + label: 'Apple Symbols', + value: 'Apple Symbols' + }, + { + label: 'AppleGothic', + value: 'AppleGothic' + }, + { + label: 'AppleMyungjo', + value: 'AppleMyungjo' + }, + { + label: 'Arial', + value: 'Arial' + }, + { + label: 'Arial Black', + value: 'Arial Black' + }, + { + label: 'Arial Hebrew', + value: 'Arial Hebrew' + }, + { + label: 'Arial Hebrew Scholar', + value: 'Arial Hebrew Scholar' + }, + { + label: 'Arial Narrow', + value: 'Arial Narrow' + }, + { + label: 'Arial Rounded MT Bold', + value: 'Arial Rounded MT Bold' + }, + { + label: 'Arial Unicode MS', + value: 'Arial Unicode MS' + }, + { + label: 'Avenir', + value: 'Avenir' + }, + { + label: 'Avenir Next', + value: 'Avenir Next' + }, + { + label: 'Avenir Next Condensed', + value: 'Avenir Next Condensed' + }, + { + label: 'Ayuthaya', + value: 'Ayuthaya' + }, + { + label: 'Baghdad', + value: 'Baghdad' + }, + { + label: 'Bangla MN', + value: 'Bangla MN' + }, + { + label: 'Bangla Sangam MN', + value: 'Bangla Sangam MN' + }, + { + label: 'Baskerville', + value: 'Baskerville' + }, + { + label: 'Beirut', + value: 'Beirut' + }, + { + label: 'Big Caslon', + value: 'Big Caslon' + }, + { + label: 'Bodoni 72', + value: 'Bodoni 72' + }, + { + label: 'Bodoni 72 Oldstyle', + value: 'Bodoni 72 Oldstyle' + }, + { + label: 'Bodoni 72 Smallcaps', + value: 'Bodoni 72 Smallcaps' + }, + { + label: 'Bodoni Ornaments', + value: 'Bodoni Ornaments' + }, + { + label: 'Bradley Hand', + value: 'Bradley Hand' + }, + { + label: 'Brush Script MT', + value: 'Brush Script MT' + }, + { + label: 'Chalkboard', + value: 'Chalkboard' + }, + { + label: 'Chalkboard SE', + value: 'Chalkboard SE' + }, + { + label: 'Chalkduster', + value: 'Chalkduster' + }, + { + label: 'Charter', + value: 'Charter' + }, + { + label: 'Cochin', + value: 'Cochin' + }, + { + label: 'Comic Sans MS', + value: 'Comic Sans MS' + }, + { + label: 'Copperplate', + value: 'Copperplate' + }, + { + label: 'Corsiva Hebrew', + value: 'Corsiva Hebrew' + }, + { + label: 'Courier New', + value: 'Courier New' + }, + { + label: 'Damascus', + value: 'Damascus' + }, + { + label: 'DecoType Naskh', + value: 'DecoType Naskh' + }, + { + label: 'Devanagari MT', + value: 'Devanagari MT' + }, + { + label: 'Devanagari Sangam MN', + value: 'Devanagari Sangam MN' + }, + { + label: 'Didot', + value: 'Didot' + }, + { + label: 'DIN Alternate', + value: 'DIN Alternate' + }, + { + label: 'DIN Condensed', + value: 'DIN Condensed' + }, + { + label: 'Diwan Kufi', + value: 'Diwan Kufi' + }, + { + label: 'Diwan Thuluth', + value: 'Diwan Thuluth' + }, + { + label: 'Euphemia UCAS', + value: 'Euphemia UCAS' + }, + { + label: 'Farah', + value: 'Farah' + }, + { + label: 'Farisi', + value: 'Farisi' + }, + { + label: 'Futura', + value: 'Futura' + }, + { + label: 'Galvji', + value: 'Galvji' + }, + { + label: 'GB18030 Bitmap', + value: 'GB18030 Bitmap' + }, + { + label: 'Geeza Pro', + value: 'Geeza Pro' + }, + { + label: 'Geneva', + value: 'Geneva' + }, + { + label: 'Georgia', + value: 'Georgia' + }, + { + label: 'Gill Sans', + value: 'Gill Sans' + }, + { + label: 'Grantha Sangam MN', + value: 'Grantha Sangam MN' + }, + { + label: 'Gujarati MT', + value: 'Gujarati MT' + }, + { + label: 'Gujarati Sangam MN', + value: 'Gujarati Sangam MN' + }, + { + label: 'Gurmukhi MN', + value: 'Gurmukhi MN' + }, + { + label: 'Gurmukhi MT', + value: 'Gurmukhi MT' + }, + { + label: 'Gurmukhi Sangam MN', + value: 'Gurmukhi Sangam MN' + }, + { + label: '黑体-简', + value: '黑体-简' + }, + { + label: '黑体-繁', + value: '黑体-繁' + }, + { + label: 'Helvetica', + value: 'Helvetica' + }, + { + label: 'Helvetica Neue', + value: 'Helvetica Neue' + }, + { + label: 'Herculanum', + value: 'Herculanum' + }, + { + label: 'Hiragino Maru Gothic ProN', + value: 'Hiragino Maru Gothic ProN' + }, + { + label: 'Hiragino Mincho ProN', + value: 'Hiragino Mincho ProN' + }, + { + label: 'Hiragino Sans', + value: 'Hiragino Sans' + }, + { + label: '冬青黑体简体中文', + value: '冬青黑体简体中文' + }, + { + label: 'Hoefler Text', + value: 'Hoefler Text' + }, + { + label: 'Impact', + value: 'Impact' + }, + { + label: 'InaiMathi', + value: 'InaiMathi' + }, + { + label: 'ITF Devanagari', + value: 'ITF Devanagari' + }, + { + label: 'ITF Devanagari Marathi', + value: 'ITF Devanagari Marathi' + }, + { + label: 'Kailasa', + value: 'Kailasa' + }, + { + label: 'Kannada MN', + value: 'Kannada MN' + }, + { + label: 'Kannada Sangam MN', + value: 'Kannada Sangam MN' + }, + { + label: 'Kefa', + value: 'Kefa' + }, + { + label: 'Khmer MN', + value: 'Khmer MN' + }, + { + label: 'Khmer Sangam MN', + value: 'Khmer Sangam MN' + }, + { + label: 'Kohinoor Bangla', + value: 'Kohinoor Bangla' + }, + { + label: 'Kohinoor Devanagari', + value: 'Kohinoor Devanagari' + }, + { + label: 'Kohinoor Gujarati', + value: 'Kohinoor Gujarati' + }, + { + label: 'Kohinoor Telugu', + value: 'Kohinoor Telugu' + }, + { + label: 'Kokonor', + value: 'Kokonor' + }, + { + label: 'Krungthep', + value: 'Krungthep' + }, + { + label: 'KufiStandardGK', + value: 'KufiStandardGK' + }, + { + label: 'Lao MN', + value: 'Lao MN' + }, + { + label: 'Lao Sangam MN', + value: 'Lao Sangam MN' + }, + { + label: 'Lucida Grande', + value: 'Lucida Grande' + }, + { + label: 'Luminari', + value: 'Luminari' + }, + { + label: 'Malayalam MN', + value: 'Malayalam MN' + }, + { + label: 'Malayalam Sangam MN', + value: 'Malayalam Sangam MN' + }, + { + label: 'Marker Felt', + value: 'Marker Felt' + }, + { + label: 'Menlo', + value: 'Menlo' + }, + { + label: 'Microsoft Sans Serif', + value: 'Microsoft Sans Serif' + }, + { + label: 'Mishafi', + value: 'Mishafi' + }, + { + label: 'Mishafi Gold', + value: 'Mishafi Gold' + }, + { + label: 'Monaco', + value: 'Monaco' + }, + { + label: 'Mshtakan', + value: 'Mshtakan' + }, + { + label: 'Mukta Mahee', + value: 'Mukta Mahee' + }, + { + label: 'Muna', + value: 'Muna' + }, + { + label: 'Myanmar MN', + value: 'Myanmar MN' + }, + { + label: 'Myanmar Sangam MN', + value: 'Myanmar Sangam MN' + }, + { + label: 'Nadeem', + value: 'Nadeem' + }, + { + label: 'New Peninim MT', + value: 'New Peninim MT' + }, + { + label: 'Noteworthy', + value: 'Noteworthy' + }, + { + label: 'Noto Nastaliq Urdu', + value: 'Noto Nastaliq Urdu' + }, + { + label: 'Noto Sans Kannada', + value: 'Noto Sans Kannada' + }, + { + label: 'Noto Sans Myanmar', + value: 'Noto Sans Myanmar' + }, + { + label: 'Noto Sans Oriya', + value: 'Noto Sans Oriya' + }, + { + label: 'Noto Serif Myanman', + value: 'Noto Serif Myanman' + }, + { + label: 'Optima', + value: 'Optima' + }, + { + label: 'Oriya MN', + value: 'Oriya MN' + }, + { + label: 'Oriya Sangam MN', + value: 'Oriya Sangam MN' + }, + { + label: 'Palatino', + value: 'Palatino' + }, + { + label: 'Papyrus', + value: 'Papyrus' + }, + { + label: 'Party LET', + value: 'Party LET' + }, + { + label: 'Phosphate', + value: 'Phosphate' + }, + { + label: '苹方-港', + value: '苹方-港' + }, + { + label: '苹方-简', + value: '苹方-简' + }, + { + label: '苹方-繁', + value: '苹方-繁' + }, + { + label: 'Plantagenet Cherokee', + value: 'Plantagenet Cherokee' + }, + { + label: 'PT Mono', + value: 'PT Mono' + }, + { + label: 'PT Sans', + value: 'PT Sans' + }, + { + label: 'PT Sans Caption', + value: 'PT Sans Caption' + }, + { + label: 'PT Sans Narrow', + value: 'PT Sans Narrow' + }, + { + label: 'PT Serif', + value: 'PT Serif' + }, + { + label: 'PT Serif Caption', + value: 'PT Serif Caption' + }, + { + label: 'Raanana', + value: 'Raanana' + }, + { + label: 'Rockwell', + value: 'Rockwell' + }, + { + label: 'Sana', + value: 'Sana' + }, + { + label: 'Sathu', + value: 'Sathu' + }, + { + label: 'Savoye LET', + value: 'Savoye LET' + }, + { + label: 'Shree Devanagari 714', + value: 'Shree Devanagari 714' + }, + { + label: 'SignPainter', + value: 'SignPainter' + }, + { + label: 'Silom', + value: 'Silom' + }, + { + label: 'Sinhala MN', + value: 'Sinhala MN' + }, + { + label: 'Sinhala Sangam MN', + value: 'Sinhala Sangam MN' + }, + { + label: 'Skia', + value: 'Skia' + }, + { + label: 'Snell Roundhand', + value: 'Snell Roundhand' + }, + { + label: '宋体-简', + value: '宋体-简' + }, + { + label: '宋体-繁', + value: '宋体-繁' + }, + { + label: '华文黑体', + value: '华文黑体' + }, + { + label: 'STIXGeneral', + value: 'STIXGeneral' + }, + { + label: 'STIXIntegralsD', + value: 'STIXIntegralsD' + }, + { + label: 'STIXIntegralsSm', + value: 'STIXIntegralsSm' + }, + { + label: 'STIXIntegralsUp', + value: 'STIXIntegralsUp' + }, + { + label: 'STIXIntegralsUpD', + value: 'STIXIntegralsUpD' + }, + { + label: 'STIXIntegralsUpSm', + value: 'STIXIntegralsUpSm' + }, + { + label: 'STIXNonUnicode', + value: 'STIXNonUnicode' + }, + { + label: 'STIXSizeFiveSym', + value: 'STIXSizeFiveSym' + }, + { + label: 'STIXSizeFourSym', + value: 'STIXSizeFourSym' + }, + { + label: 'STIXSizeOneSym', + value: 'STIXSizeOneSym' + }, + { + label: 'STIXSizeThreeSym', + value: 'STIXSizeThreeSym' + }, + { + label: 'STIXSizeTwoSym', + value: 'STIXSizeTwoSym' + }, + { + label: 'STIXVariants', + value: 'STIXVariants' + }, + { + label: '华文宋体', + value: '华文宋体' + }, + { + label: 'Sukhumvit Set', + value: 'Sukhumvit Set' + }, + { + label: 'Symbol', + value: 'Symbol' + }, + { + label: 'Tahoma', + value: 'Tahoma' + }, + { + label: 'Tamil MN', + value: 'Tamil MN' + }, + { + label: 'Tamil Sangam MN', + value: 'Tamil Sangam MN' + }, + { + label: 'Telugu MN', + value: 'Telugu MN' + }, + { + label: 'Teluau nasmln', + value: 'Teluau nasmln' + }, + { + label: 'Thonburi', + value: 'Thonburi' + }, + { + label: 'Times New Roman', + value: 'Times New Roman' + }, + { + label: 'Trattatello', + value: 'Trattatello' + }, + { + label: 'Trebuchet MS', + value: 'Trebuchet MS' + }, + { + label: 'Verdana', + value: 'Verdana' + }, + { + label: 'Waseem', + value: 'Waseem' + }, + { + label: 'Webdings', + value: 'Webdings' + }, + { + label: 'Wingdings', + value: 'Wingdings' + }, + { + label: 'Wingdings 2', + value: 'Wingdings 2' + }, + { + label: 'Wingdings 3', + value: 'Wingdings 3' + }, + { + label: 'Zapf Dingbats', + value: 'Zapf Dingbats' + }, + { + label: 'Zapfino', + value: 'Zapfino' + } +]; + +const fontStyleOptions: OptionProps[] = [ + { + label: '斜体', + type: 'font-style', + value: 'italic' + }, + { + label: '下划线', + type: 'text-decoration', + value: 'underline' + }, + { + label: '删除线', + type: 'text-decoration', + value: 'line-through' + } +]; +const textAlignOptions: OptionProps[] = [ + { + label: '左对齐', + type: 'text-align', + value: 'left' + }, + { + label: '居中对齐', + type: 'text-align', + value: 'center' + }, + { + label: '右对齐', + type: 'text-align', + value: 'right' + }, + { + label: '两端对齐', + type: 'text-align', + value: 'justify' + } +]; + +const verticalAlignOptions: OptionProps[] = [ + { + label: '顶对齐', + type: 'vertical-align', + value: 'top' + }, + { + label: '垂直居中对齐', + type: 'vertical-align', + value: 'middle' + }, + { + label: '底对齐', + type: 'vertical-align', + value: 'bottom' + } +]; + +function FontEditor(props: FontEditorProps) { + const { + state, + data, + title, + label, + value, + onChange, + hideColor, + hideFontSize, + hideFontWeight, + hideLineHeight, + hideFontFamily, + hasSenior = true, + hasVertical = true, + fontStyle = true, + textAlign = true, + needColorCustom = false, + colorOptions = data.colorOptions, + fontSizeOptions = data.fontSizeOptions || defaultFontSize, + fontWeightOptions = data.fontWeightOptions || defaultFontWeight, + lineHeightOptions = data.lineHeightOptions || defaultlineHeight, + fontFamilyOptions = data.fontFamilyOptions || SYSTEM_FONT_FAMILY, + editorThemePath + } = props; + + const alignOptions = hasVertical + ? [...textAlignOptions, ...verticalAlignOptions] + : textAlignOptions; + + const [open, toggleOpen] = React.useState(true); + const [senior, toggleSenior] = React.useState(false); + const editorDefaultValue = getValueByPath(editorThemePath, data); + const editorInheritValue = getInheritValue(editorThemePath, data); + + const [sizeData, setSizeData] = React.useState( + assign({}, formatInheritData(value)) + ); + + useEffect(() => { + const timer = setTimeout(() => { + if (value) { + setSizeData(assign({}, formatInheritData(value))); + } + }, 100); + return () => clearTimeout(timer); + }, [value]); + + function handleEdit(value: string | undefined, type: keyof SizeDataProps) { + const data = cloneDeep(sizeData); + if ( + [ + 'font-style', + 'text-decoration', + 'text-align', + 'vertical-align' + ].includes(type) && + data[type] === value // 这些属性是点击事件，所以如果第二次点击说明是要取消当前的选中状态 + ) { + data[type] = undefined; + } else { + data[type] = value; + } + setSizeData(data); + onChange(setInheritData(data, editorInheritValue)); + } + + function getLabel(value?: string, option?: any) { + if (value === 'inherit') { + return '继承常规'; + } + const res = option?.find((item: any) => item.value === value); + if (res) { + return res.label; + } + return value; + } + + return ( +
+ + {open && ( +
+
+ {!hideColor && ( +
+ { + handleEdit(value, 'color'); + }} + itemName="color" + state={state} + placeholder={editorDefaultValue?.color} + editorInheritValue={editorInheritValue?.color} + /> +
+ )} + {!hideFontSize && ( +
+ { + handleEdit(value, 'fontSize'); + }} + itemName="fontSize" + menuTpl="label" + state={state} + inheritValue={editorThemePath ? 'inherit' : ''} + placeholder={editorDefaultValue?.fontSize} + /> +
+ )} +
+
+ {!hideFontWeight && ( +
+ { + handleEdit(value, 'fontWeight'); + }} + itemName="fontWeight" + menuTpl="label" + state={state} + inheritValue={editorThemePath ? 'inherit' : ''} + placeholder={editorDefaultValue?.fontWeight} + /> + {(!hideLineHeight || !hideFontFamily) && ( +
字重
+ )} +
+ )} + {!hideLineHeight && ( +
+ { + handleEdit(value, 'lineHeight'); + }} + itemName="lineHeight" + menuTpl="label" + state={state} + inheritValue={editorThemePath ? 'inherit' : ''} + placeholder={editorDefaultValue?.lineHeight} + /> +
行高
+
+ )} + {!hideFontFamily && ( +
+ { + handleEdit(value, 'font-family'); + }} + itemName="fontFamily" + menuTpl="label" + state={state} + inheritValue={editorThemePath ? 'inherit' : ''} + /> +
字体
+
+ )} +
+ {senior && fontStyle && ( +
+ {fontStyleOptions.map((item, index) => ( + +
+ handleEdit(item.value, item.type)} + /> +
+ + ))} +
+ )} + {senior && textAlign && ( +
+ {alignOptions.map((item, index) => ( + +
+ handleEdit(item.value, item.type)} + /> +
+ + ))} +
+ )} +
+ )} +
+ ); +} + +@FormItem({ + type: 'amis-theme-font-editor', + strictMode: false, + renderLabel: false +}) +export class FontEditorRenderer extends React.Component { + render() { + return ; + } +} diff --git a/packages/amis-theme-editor-helper/src/renderers/PaddingAndMargin.tsx b/packages/amis-theme-editor-helper/src/renderers/PaddingAndMargin.tsx new file mode 100644 index 000000000..c7e4e131d --- /dev/null +++ b/packages/amis-theme-editor-helper/src/renderers/PaddingAndMargin.tsx @@ -0,0 +1,329 @@ +/** + * 主题内外边距 + */ + +import {FormItem} from 'amis-core'; +import type {FormControlProps} from 'amis-core'; +import {Overlay, PopOver} from 'amis-ui'; +import React, {useEffect, useState} from 'react'; +import cx from 'classnames'; +import cloneDeep from 'lodash/cloneDeep'; +import ThemeSelect from './ThemeSelect'; +import { + getValueByPath, + getInheritValue, + formatInheritData, + setInheritData +} from '../util'; + +interface PaddingAndMarginProps extends FormControlProps { + custom: boolean; +} + +function PaddingAndMarginDialog(props: PaddingAndMarginProps) { + const { + onChange, + value, + data, + custom, + label, + options, + hideMargin, + hidePadding, + state, + editorThemePath + } = props; + const [type, setType] = useState('all'); + const [customRef, setCustomRef] = useState(null); + const [customShow, setCustomShow] = useState(false); + const [customIndex, setCustomIndex] = useState(0); + const [customKey, setCustomKey] = useState('marginTop'); + const [isPaddingInherit, setIsPaddingInherit] = useState(false); + const [isMarginInherit, setIsMarginInherit] = useState(false); + + const LABELS = [ + {value: 'marginTop'}, + {value: 'marginRight'}, + {value: 'marginBottom'}, + {value: 'marginLeft'}, + {value: 'paddingTop'}, + {value: 'paddingRight'}, + {value: 'paddingBottom'}, + {value: 'paddingLeft'} + ].filter(n => { + if (hideMargin) { + return !!~n.value.indexOf('padding'); + } else if (hidePadding) { + return !!~n.value.indexOf('margin'); + } else { + return n; + } + }); + + const editorDefaultValue = formatData(getValueByPath(editorThemePath, data)); + const editorInheritValue = getInheritValue(editorThemePath, data); + const spaceData = formatData(value || {}); + const optionsData = options || data.sizesOptions || []; + + function formatData(sourceData: any) { + if (!sourceData) { + return null; + } + + const data = formatInheritData(cloneDeep(sourceData)); + if ( + data?.marginTop === data?.marginRight && + data?.marginRight === data?.marginBottom && + data?.marginBottom === data?.marginLeft + ) { + data.margin = data?.marginTop; + } else { + data.margin = 'custom'; + } + if ( + data?.paddingTop === data?.paddingRight && + data?.paddingRight === data?.paddingBottom && + data?.paddingBottom === data?.paddingLeft + ) { + data.padding = data?.paddingTop; + } else { + data.padding = 'custom'; + } + return data; + } + + function onSpaceChange(position: number | string) { + return (value: string | undefined) => { + const res = cloneDeep(spaceData); + delete res.margin; + delete res.padding; + if (value === 'custom') { + return; + } + + if (position === 'margin-all') { + if (value?.includes('all')) { + const defaultToken = (key: string) => + `var(${data.default.token}${key})`; + res.marginTop = defaultToken('marginTop'); + res.marginRight = defaultToken('marginRight'); + res.marginBottom = defaultToken('marginBottom'); + res.marginLeft = defaultToken('marginLeft'); + } else { + res.marginTop = value; + res.marginRight = value; + res.marginBottom = value; + res.marginLeft = value; + } + } else if (position === 'padding-all') { + if (value?.includes('all')) { + const defaultToken = (key: string) => + `var(${data.default.token}${key})`; + res.paddingTop = defaultToken('paddingTop'); + res.paddingRight = defaultToken('paddingRight'); + res.paddingBottom = defaultToken('paddingBottom'); + res.paddingLeft = defaultToken('paddingLeft'); + } else { + res.paddingTop = value; + res.paddingRight = value; + res.paddingBottom = value; + res.paddingLeft = value; + } + } else if (typeof position === 'number') { + const label = LABELS[position].value; + res[label] = value; + if (label.includes('padding')) { + setIsPaddingInherit(false); + } else { + setIsMarginInherit(false); + } + } + onChange(setInheritData(res, editorInheritValue)); + }; + } + + function findRealValue(value: string) { + return ( + optionsData.find((item: any) => item.value === value)?.realValue || value + ); + } + + function handleCustomClick(e: React.MouseEvent, index: number, key: string) { + setCustomShow(true); + setCustomRef(e.currentTarget); + setCustomIndex(index); + setCustomKey(key); + } + + useEffect(() => { + if (state && state !== 'default' && value) { + if ( + value['paddingTop']?.includes('default-paddingTop') && + value['paddingBottom']?.includes('default-paddingBottom') && + value['paddingRight']?.includes('default-paddingRight') && + value['paddingLeft']?.includes('default-paddingLeft') + ) { + setIsPaddingInherit(true); + } + if ( + value['marginTop']?.includes('default-marginTop') && + value['marginBottom']?.includes('default-marginBottom') && + value['marginRight']?.includes('default-marginRight') && + value['marginLeft']?.includes('default-marginLeft') + ) { + setIsMarginInherit(true); + } + } + }, [value]); + + useEffect(() => { + if (spaceData.margin === 'custom' || spaceData.padding === 'custom') { + setType('custom'); + } + }, []); + + return ( +
+ {label ? ( +
{label}
+ ) : null} +
+
+
setType('all')} + >
+ {custom ? ( +
setType('custom')} + > +
+
+
+ ) : null} +
+ {type === 'all' ? ( + <> + {!hideMargin && ( +
+ +
Margin
+
+ )} + {!hidePadding && ( +
+ +
+ Padding +
+
+ )} + + ) : null} +
+ {type !== 'all' ? ( +
+ {LABELS.map((item, index) => { + return ( +
handleCustomClick(e, index, item.value)} + > +
+ {findRealValue( + spaceData[item.value] || editorDefaultValue?.[item.value] + ) || '-'} +
+
+ ); + })} + + setCustomShow(false)}> +
+ +
+ + +
+ ) : null} +
+ ); +} + +@FormItem({ + type: 'amis-theme-padding-and-margin', + strictMode: false, + renderLabel: false +}) +export default class PaddingAndMarginDialogRender extends React.Component { + render() { + return ( + + ); + } +} diff --git a/packages/amis-theme-editor-helper/src/renderers/Radius.tsx b/packages/amis-theme-editor-helper/src/renderers/Radius.tsx new file mode 100644 index 000000000..6b088296c --- /dev/null +++ b/packages/amis-theme-editor-helper/src/renderers/Radius.tsx @@ -0,0 +1,248 @@ +/** + * @file 圆角 + * @description 圆角设置 + */ + +import cx from 'classnames'; +import React, {useEffect, useState} from 'react'; +import {FormItem, RendererProps, resolveVariableAndFilter} from 'amis-core'; +import type {FormControlProps} from 'amis-core'; +import cloneDeep from 'lodash/cloneDeep'; +import ThemeSelect from './ThemeSelect'; +import { + getValueByPath, + getInheritValue, + formatInheritData, + setInheritData +} from '../util'; + +interface RadiusProps { + custom: boolean; +} + +const radiusItems = [ + { + item: 'top-left', + tip: '左上角' + }, + { + item: 'top-right', + tip: '右上角' + }, + { + item: 'bottom-left', + tip: '左下角' + }, + { + item: 'bottom-right', + tip: '右下角' + } +]; + +function BoxRadius(props: RadiusProps & RendererProps) { + const { + onChange, + value = {}, + data, + custom, + label, + borderRadiusOptions, + state, + editorThemePath + } = props; + + let options = cloneDeep(borderRadiusOptions || data.borderRadiusOptions); + + if (typeof borderRadiusOptions === 'string') { + options = resolveVariableAndFilter(borderRadiusOptions, data, '| raw'); + } + const [radiusType, setRadiusType] = useState('all'); + const [isInherit, setIsInherit] = useState(false); + + const editorDefaultValue = formatData(getValueByPath(editorThemePath, data)); + const editorInheritValue = getInheritValue(editorThemePath, data); + const borderData = formatData(value || {}); + + function formatData(sourceData: any) { + if (!sourceData) { + return null; + } + + const data = formatInheritData(cloneDeep(sourceData)); + if ( + data[`top-right-border-radius`] === data[`top-left-border-radius`] && + data[`top-left-border-radius`] === data[`bottom-right-border-radius`] && + data[`bottom-right-border-radius`] === data[`bottom-left-border-radius`] + ) { + data[`all-border-radius`] = data[`top-right-border-radius`]; + } else { + data[`all-border-radius`] = 'custom'; + } + return data; + } + + function getKey(type: string) { + return `${type}-border-radius`; + } + + function changeItem(type: string) { + return (val: string) => { + let field = getKey(type); + + if (val === 'custom') { + return; + } + + let changeValue = {}; + if (type === 'all') { + let newValue: Record = {}; + const items = radiusItems; + items.forEach(item => { + let itemKey = `${item.item}-border-radius`; + if ( + state && + state !== 'default' && + val?.includes('all-border-radius') + ) { + const defaultToken = (key: string) => + `var(${data.default.token}${key})`; + newValue[itemKey] = defaultToken(itemKey); + } else { + newValue[itemKey] = val; + } + }); + changeValue = { + ...value, + ...newValue + }; + } else { + changeValue = { + ...value, + [field]: val + }; + } + onChange(setInheritData(changeValue, editorInheritValue)); + setIsInherit(false); + }; + } + + useEffect(() => { + if (state && state !== 'default') { + if ( + value['top-left-border-radius']?.includes( + 'default-top-left-border-radius' + ) && + value['top-right-border-radius']?.includes( + 'default-top-right-border-radius' + ) && + value['bottom-left-border-radius']?.includes( + 'default-bottom-left-border-radius' + ) && + value['bottom-right-border-radius']?.includes( + 'default-bottom-right-border-radius' + ) + ) { + setIsInherit(true); + } + } + }, [value]); + + useEffect(() => { + if (borderData['all-border-radius'] === 'custom') { + setRadiusType('custom'); + } + }, []); + + return ( +
+ {label ?
{label}
: null} +
+
+
setRadiusType('all')} + >
+ {custom ? ( +
setRadiusType('custom')} + >
+ ) : null} +
+ +
+ +
+
+
+ {radiusType === 'custom' + ? radiusItems.map(item => { + const position = item.item; + return ( +
+ +
+
+ ); + }) + : null} +
+
+ ); +} + +@FormItem({ + type: 'amis-theme-radius', + strictMode: false, + renderLabel: false +}) +export class RadiusRenderer extends React.Component { + render() { + return ; + } +} diff --git a/packages/amis-theme-editor-helper/src/renderers/Shadow.tsx b/packages/amis-theme-editor-helper/src/renderers/Shadow.tsx new file mode 100644 index 000000000..52658a66e --- /dev/null +++ b/packages/amis-theme-editor-helper/src/renderers/Shadow.tsx @@ -0,0 +1,447 @@ +/** + * @file Shadow.tsx + * @description 设置阴影 + */ + +import React from 'react'; +import {observer} from 'mobx-react'; +import cx from 'classnames'; +import {FormItem, PlainObject, render} from 'amis-core'; +import type {FormControlProps} from 'amis-core'; +import type {ShadowData} from '../helper/declares'; +import {NumberInput, Overlay, PopOver, Select} from 'amis-ui'; +import cloneDeep from 'lodash/cloneDeep'; +import find from 'lodash/find'; +import isEqual from 'lodash/isEqual'; +import {ThemeWrapperHeader} from './ThemeWrapper'; +import ColorPicker from './ColorPicker'; +import {Icon as ThemeIcon} from '../icons/index'; +import {getValueByPath, getInheritValue, setInheritData} from '../util'; + +interface ShadowEditorProps extends FormControlProps {} + +interface ShadowViewProps { + show: boolean; + target: any; + name: string; + value: string[]; + close: () => void; +} + +interface ShadowOption { + label?: string; + value?: string; + realValue: ShadowData[]; +} + +function ShadowView(props: ShadowViewProps) { + const {show, target, name, value, close} = props; + + return ( + + +
+
阴影预览
+
+
+
+
+
{name}
+
+ {value?.map((shadow: string, index: number) => ( +
+ {shadow} +
+ ))} +
+
+
+ + + ); +} + +function ShadowEditor(props: ShadowEditorProps) { + const { + data, + onChange, + value, + hasSenior, + options, + colorOptions, + state, + itemName, + editorThemePath + } = props; + const target = React.useRef(null); + const [open, toggleOpen] = React.useState(true); + const [senior, toggleSenior] = React.useState(false); + const [show, toggleViewShow] = React.useState(false); + + const customShadow = { + label: '自定义', + value: 'custom', + realValue: [ + { + inset: false, + x: '0px', + y: '0px', + blur: '0px', + spread: '0px', + color: 'transparent' + } + ], + visible: false + }; + const shadowOptions = options + ? [...options, customShadow] + : [...cloneDeep(data.shadowOptions || []), customShadow]; + + if (state && state !== 'default') { + shadowOptions.unshift({ + value: editorThemePath ? 'inherit' : `var(${data.default.token}shadow)`, + label: '继承常规', + realValue: editorThemePath + ? ['继承常规'] + : [`var(${data.default.token}${itemName})`] + }); + } + const editorDefaultValue = getValueByPath(editorThemePath, data); + const editorInheritValue = getInheritValue(editorThemePath, data); + const defaultValue = value + ? (value.indexOf('inherit:') > -1 && 'inherit') || + find(cloneDeep(shadowOptions), item => item.value === value) || + formateCustomValue(value) + : null; + + const [shadowData, setShadowData] = React.useState( + defaultValue + ); + + React.useEffect(() => { + if ( + defaultValue && + (!shadowData || defaultValue.value !== shadowData.value) + ) { + setShadowData(defaultValue); + } + }, [defaultValue]); + + function formateCustomValue(value: string) { + const color: PlainObject = {}; + let colorIndex = 0; + value = value.trim().replace(/((rgba|rgb|var)\(.*?\))|(#.{6})/g, $1 => { + const key = '$' + colorIndex; + colorIndex++; + color[key] = $1; + return key; + }); + const realValue = value.split(',').map((item: string) => { + let inset = false; + if (item.includes('inset')) { + inset = true; + item = item.replace('inset', ''); + } + item = item.trim(); + const css = item.split(' '); + return { + inset, + x: css[0], + y: css[1], + blur: css[2], + spread: css[3], + color: color[css[4]] + }; + }); + return { + label: '自定义', + value: 'custom', + realValue + }; + } + + function formatRealValue(value?: ShadowData[]) { + if (!value) { + return {value: '', source: []}; + } + const res = value.map((shadow: ShadowData) => { + return `${shadow.inset ? 'inset' : ''} ${shadow.x || ''} ${ + shadow.y || '' + } ${shadow.blur || ''} ${shadow.spread || ''} ${ + shadow.color || 'transparent' + }`; + }); + return {value: res.join(', '), source: res}; + } + + function onShadowSelect(value: string) { + if (value === 'custom') { + return; + } + if (value) { + const findItem = find(shadowOptions, item => item.value === value); + if (findItem?.value) { + setShadowData(findItem); + onChange(setInheritData(findItem.value, editorInheritValue)); + } + } else { + setShadowData(undefined); + onChange(undefined); + } + } + + function changeToCustom(shadowData: ShadowOption) { + if (!shadowData.value) { + return shadowData; + } + const findItem = find( + shadowOptions, + item => item.value === shadowData.value + ); + if (!isEqual(shadowData.realValue, findItem.realValue)) { + return { + ...shadowData, + label: '自定义', + value: 'custom' + }; + } + return shadowData; + } + + function handleAdd(inset: boolean) { + const newData = changeToCustom({ + ...(shadowData || { + label: '自定义', + value: 'custom' + }), + realValue: [ + ...(shadowData?.realValue || []), + { + inset, + x: '0px', + y: '0px', + blur: '0px', + spread: '0px', + color: 'transparent' + } + ] + }); + setShadowData(newData); + onChange(formatRealValue(newData.realValue).value); + } + + function handleDelete(index: number) { + if (shadowData!.realValue.length === 1) { + return; + } + let data = cloneDeep(shadowData); + data!.realValue.splice(index, 1); + const newData = changeToCustom(data!); + setShadowData(newData); + onChange(formatRealValue(newData.realValue).value); + } + + function handleEdit(value: string, type: keyof ShadowData, index: number) { + if (type !== 'color') { + value += 'px'; + } + (shadowData!.realValue[index][type] as string) = value; + const newData = changeToCustom(shadowData!); + setShadowData(newData); + onChange(formatRealValue(newData.realValue).value); + } + + // 数据格式化 + const formatter = (value: string | number) => { + return value + 'px'; + }; + + // 还原数据 + const parser = (value: string) => { + return parseFloat(value); + }; + + return ( +
+ + {open && ( +
+
+
toggleViewShow(true)} + onMouseOut={() => toggleViewShow(false)} + > +
+
+ { + toggleViewShow(false); + }} + name={shadowData?.label || '无阴影'} + value={formatRealValue(shadowData?.realValue).source} + /> +
+ +
+ )} + + setShowOptions(false)}> +
+ {options?.map(item => { + return ( +
onSelectValue(item)} + className={cx( + currentItem?.value === item.value && + 'ThemeSelectContent-input-select-item--active' + )} + > + {item.html || item.label} +
+ ); + })} +
+ + + + ); +} + +function ThemeSelect(props: ThemeSelectProps) { + const { + data, + value: originValue, + options: originOptions, + extraUnit = ['px', 'rem', '%'], + disabled, + state, + itemName, + inheritValue, + isEditorTpl + } = props; + const themeSelect = useRef(null); + const [options, setOptions] = React.useState(getOptions()); + function getOptions() { + const list = cloneDeep( + typeof originOptions === 'string' + ? resolveVariableAndFilter(originOptions, data, '| raw') + : isEditorTpl && !originOptions + ? data?.sizesOptions || [] + : originOptions || [] + ); + + if ( + state && + state !== 'default' && + list[0] && + list[0].value !== `var(${data?.default?.token}${itemName})` + ) { + const name = isEditorTpl + ? 'inherit' + : `var(${data?.default?.token}${itemName})`; + list.unshift({ + label: '继承常规', + value: inheritValue || name, + realValue: '继承常规' + }); + } + return list; + } + useEffect(() => { + setOptions(getOptions()); + }, [originOptions]); + + return ( +
+ +
+ ); +} + +export default ThemeSelect; + +@FormItem({ + type: 'amis-theme-select', + strictMode: false, + renderLabel: true +}) +export class ThemeSelectRenderer extends React.Component { + render() { + return ; + } +} diff --git a/packages/amis-theme-editor-helper/src/renderers/ThemeWrapper.tsx b/packages/amis-theme-editor-helper/src/renderers/ThemeWrapper.tsx new file mode 100644 index 000000000..59b9ae68f --- /dev/null +++ b/packages/amis-theme-editor-helper/src/renderers/ThemeWrapper.tsx @@ -0,0 +1,115 @@ +/** + * @file ThemeWrapper.tsx + * @description 收缩展开容器 + */ + +import React from 'react'; +import {render, Renderer} from 'amis'; +import {Icon as ThemeIcon} from '../icons/index'; +import cx from 'classnames'; +import type {FormControlProps} from 'amis-core'; +import {pick} from 'lodash'; +import {TooltipWrapper} from 'amis-ui'; + +interface ThemeWrapperProps { + hasSenior?: boolean; + hasOpen?: boolean; + senior?: boolean; + toggleSenior?: (value: boolean) => void; + open?: boolean; + toggleOpen?: (value: boolean) => void; + title?: string; +} + +interface ThemeWrapperControlProps extends FormControlProps { + hasSenior?: boolean; + title?: string; + body?: any; + seniorBody?: any; +} + +export function ThemeWrapperHeader(props: ThemeWrapperProps) { + const {hasSenior, hasOpen, senior, toggleSenior, open, toggleOpen, title} = + props; + + return ( +
+
+
{title}
+
+ {hasSenior && ( + + toggleSenior && toggleSenior(!senior)} + /> + + )} + {hasOpen && ( + toggleOpen && toggleOpen(!open)} + /> + )} +
+
+
+ ); +} + +function ThemeWrapperControl(props: ThemeWrapperControlProps) { + const {hasSenior = false, hasOpen = false, body, seniorBody, title} = props; + const [open, toggleOpen] = React.useState(true); + const [senior, toggleSenior] = React.useState(false); + const bodyProps = pick(props, [ + 'data', + 'formMode', + 'formLabelAlign', + 'formLabelWidth', + 'formHorizontal', + 'onChange' + ]); + + return ( +
+ {title || title === '' ? ( + + ) : null} +
+ {body ? render(body, bodyProps) : null} +
+ {seniorBody ? render(seniorBody, bodyProps) : null} +
+
+
+ ); +} + +@Renderer({ + type: 'amis-theme-wrapper' +}) +export default class ThemeWrapperRenderer extends React.Component { + render() { + return ; + } +} diff --git a/packages/amis-theme-editor-helper/src/renderers/index.tsx b/packages/amis-theme-editor-helper/src/renderers/index.tsx new file mode 100644 index 000000000..3ee13a64f --- /dev/null +++ b/packages/amis-theme-editor-helper/src/renderers/index.tsx @@ -0,0 +1,8 @@ +import './PaddingAndMargin'; +import './Border'; +import './Radius'; +import './ColorPicker'; +import './Size'; +import './Font'; +import './Shadow'; +import './ThemeWrapper'; diff --git a/packages/amis-theme-editor-helper/src/style/_border.scss b/packages/amis-theme-editor-helper/src/style/_border.scss new file mode 100644 index 000000000..33e4f627c --- /dev/null +++ b/packages/amis-theme-editor-helper/src/style/_border.scss @@ -0,0 +1,181 @@ +.Theme-Border { + &-label { + margin-bottom: px2rem(10px); + color: #5c5f66; + font-size: 12px; + } + &-content { + display: flex; + justify-content: space-between; + } + &-all { + background: #f7f7f9; + border-radius: 4px; + height: px2rem(32px); + display: inline-flex; + align-items: center; + justify-content: center; + flex: 0 0 px2rem(32px); + + &:after { + content: ''; + height: px2rem(14px); + width: px2rem(14px); + display: block; + border: 2px solid #2468f2; + } + } + &-items { + position: relative; + width: px2rem(72px); + height: px2rem(72px); + background: #f7f7f9; + border-radius: px2rem(4px); + .Theme-Border-item { + position: absolute; + cursor: pointer; + height: px2rem(14px); + width: px2rem(14px); + } + .Theme-Border-item--all { + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + border: 2px solid #5c5f66; + } + .Theme-Border-item--right { + right: px2rem(7px); + top: 50%; + transform: translateY(-50%); + border: 2px solid #d4d6d9; + &:after { + content: ''; + display: block; + height: px2rem(14px); + width: 2px; + background: #5c5f66; + position: absolute; + right: -2px; + top: -2px; + } + } + .Theme-Border-item--left { + left: px2rem(7px); + top: 50%; + transform: translateY(-50%); + border: 2px solid #d4d6d9; + &:after { + content: ''; + display: block; + height: px2rem(14px); + width: 2px; + background: #5c5f66; + position: absolute; + left: -2px; + top: -2px; + } + } + .Theme-Border-item--top { + top: px2rem(7px); + left: 50%; + transform: translate(-50%); + border: 2px solid #d4d6d9; + &:after { + content: ''; + display: block; + width: px2rem(14px); + height: 2px; + background: #5c5f66; + position: absolute; + right: -2px; + top: -2px; + } + } + .Theme-Border-item--bottom { + bottom: px2rem(7px); + left: 50%; + transform: translate(-50%); + border: 2px solid #d4d6d9; + &:after { + content: ''; + display: block; + width: px2rem(14px); + height: 2px; + background: #5c5f66; + position: absolute; + right: -2px; + bottom: -2px; + } + } + .Theme-Border-item--active.Theme-Border-item--all { + border: 2px solid #2468f2; + } + .Theme-Border-item--active { + &:after { + background: #2468f2; + } + } + } + &-settings { + flex: 1; + margin-left: px2rem(16px); + .cxd-Form-item { + margin-bottom: 0; + } + .theme-select { + margin-bottom: px2rem(8px); + } + &-style-color { + display: flex; + justify-content: space-between; + .cxd-Select { + flex: 1; + margin-right: px2rem(4px); + } + } + } + + &-settings-width { + width: 100%; + margin-bottom: px2rem(8px); + } + + &-settings--all { + margin-left: px2rem(5px); + display: flex; + justify-content: space-between; + .theme-select { + margin-bottom: 0; + margin-right: px2rem(5px); + width: px2rem(80px); + flex: 1 0; + } + .Theme-Border-settings-style-color { + display: flex; + justify-content: space-between; + flex: 1; + .cxd-Select { + width: px2rem(96px); + height: px2rem(32px); + margin-left: px2rem(4px); + } + } + } + + &-style { + display: flex; + width: 100%; + align-items: center; + &-line { + border: 1px solid #000000; + height: 1px; + flex: 1; + margin-right: px2rem(14px); + } + } + .is-active { + .Theme-Border-style-line { + border-color: #2468f2; + } + } +} diff --git a/packages/amis-theme-editor-helper/src/style/_color-picker.scss b/packages/amis-theme-editor-helper/src/style/_color-picker.scss new file mode 100644 index 000000000..e5814cd4e --- /dev/null +++ b/packages/amis-theme-editor-helper/src/style/_color-picker.scss @@ -0,0 +1,600 @@ +$ns: cxd-; +.Theme-ColorPicker { + &-label-out { + height: px2rem(32px); + width: px2rem(32px); + border-radius: px2rem(4px); + cursor: pointer; + overflow: hidden; + } + &-label { + height: px2rem(32px); + width: px2rem(32px); + } + + &.is-disabled { + color: #b8babf; + border-color: #e8e9eb; + background: #f7f8fa; + } + + &.is-readOnly { + pointer-events: none; + } +} +.Theme-ColorPicker-title { + margin-bottom: px2rem(10px); + color: #5c5f66; + font-size: 12px; +} +.Theme-ColorPicker--input { + display: flex; + height: px2rem(32px); + border: 1px solid #e8e9eb; + border-radius: px2rem(4px); + padding: 0px px2rem(10px); + align-items: center; + cursor: pointer; + .Theme-ColorPicker-label-out { + height: px2rem(22px); + width: px2rem(22px); + border-radius: px2rem(4px); + overflow: hidden; + flex-shrink: 0; + } + .Theme-ColorPicker-label { + height: px2rem(22px); + width: px2rem(22px); + } + .Theme-ColorPicker-input { + margin-left: px2rem(6px); + overflow: hidden; + flex-grow: 1; + width: auto; + max-width: 100%; + > div { + white-space: nowrap; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + } + &--placeholder { + color: var(--Form-select-placeholderColor); + } + } + .Theme-ColorPicker-arrow { + width: px2rem(16px); + text-align: center; + display: flex; + align-items: center; + justify-content: center; + line-height: 1; + transform: rotate(90deg); + transition: transform 0.2s; + & > svg { + width: 0.625rem; + height: 0.625rem; + top: 0; + color: var(--default-icon-color); + } + } + .Theme-ColorPicker-arrow--active { + transform: rotate(270deg); + } +} + +.Theme-ColorSelect { + width: px2rem(240px); + &-tab { + display: flex; + padding: px2rem(14px) px2rem(12px); + border: 1px solid #e8e9eb; + & > div { + height: px2rem(16px); + width: px2rem(16px); + border-radius: 50%; + margin-right: px2rem(12px); + cursor: pointer; + & > svg { + height: px2rem(16px); + width: px2rem(16px); + } + } + &-color { + background-color: #e8e9eb; + } + &-color--active { + background: #d4e5ff; + border: 1px solid #2468f2; + } + &-gradient { + background-image: linear-gradient(180deg, #f4f4f4 0%, #b8babf 100%); + } + &-gradient--active { + background-image: linear-gradient(180deg, #ffffff 0%, #6296ff 99%); + border: 1px solid #2468f2; + } + &-img--active > svg { + border: 1px solid #2468f2; + border-radius: 50%; + } + } + &-tab { + &-sub { + display: flex; + font-size: 12px; + color: #5c5f66; + padding: px2rem(12px) 0; + margin: 0 px2rem(14px); + border-bottom: 1px solid #e8e9eb; + &-item { + margin-right: px2rem(30px); + cursor: pointer; + } + &--active { + color: #2468f2; + } + } + } + &-content { + padding: px2rem(12px); + } + &-PresetColors { + margin-top: px2rem(10px); + padding-top: px2rem(10px); + border-top: 1px solid #e8e9eb; + &-header { + font-size: 12px; + color: #5c5f66; + } + &-edit { + float: right; + cursor: pointer; + &:hover { + color: #2468f2; + } + } + &-editing { + color: #2468f2; + } + + &-content { + margin: 0 px2rem(-4px); + margin-top: px2rem(4px); + display: flex; + flex-wrap: wrap; + & > div { + cursor: pointer; + height: px2rem(20px); + width: px2rem(20px); + border-radius: px2rem(2px); + margin: 0 px2rem(4px); + display: flex; + align-items: center; + justify-content: center; + position: relative; + > div { + height: px2rem(20px); + width: px2rem(20px); + } + } + &-placeholder { + font-size: 12px; + color: #b8babf; + } + } + &-content-editing { + & > div:hover { + &::before { + content: ''; + display: block; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background-color: rgba(0, 0, 0, 0.4); + } + + &::after { + font-family: 'Font Awesome 5 Free'; + content: '\f2ed'; + color: #fff; + position: absolute; + font-size: 12px; + } + } + } + } +} +.ThemeColorList { + max-height: px2rem(310px); + width: px2rem(216px); + overflow: auto; + &-title { + font-size: 12px; + color: #151b26; + } + + &-content { + display: flex; + margin: px2rem(12px) 0; + &-title { + font-size: 12px; + color: #5c5f66; + font-weight: 400; + margin-right: px2rem(12px); + flex: px2rem(36px) 0 0; + line-height: px2rem(24px); + } + &-label { + height: px2rem(24px); + width: px2rem(24px); + border-radius: px2rem(2px); + margin-right: px2rem(8px); + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + } + &-label-inner { + height: px2rem(20px); + width: px2rem(20px); + border-radius: px2rem(2px); + } + &-label--border { + border: 1px solid #f7f7f9; + } + &-label--active { + border: 1px solid #2468f2; + border-radius: 2px; + } + } + &-content--top { + margin-top: 0; + position: relative; + } + &-content--search { + position: absolute; + right: 0; + input { + font-size: 12px; + } + .cxd-SearchBox.is-active { + width: px2rem(216px); + } + } +} + +.Theme-GradientColor { + &-slider { + display: flex; + align-items: center; + margin-bottom: px2rem(10px); + } + &-slider-inner { + margin: 0 px2rem(7px); + height: px2rem(8px); + position: relative; + display: flex; + align-items: center; + cursor: copy; + flex: 1 1 auto; + margin-right: px2rem(10px); + border: 1px solid #a5a5a5; + border-radius: px2rem(4px); + &-item { + position: absolute; + height: px2rem(14px); + width: px2rem(14px); + border-radius: 50%; + border: 2px solid #ffffff; + cursor: pointer; + box-shadow: 0px 0px 2px 1px #a5a5a5; + } + &-item--active { + box-shadow: 0px 0px 2px 1px #2468f2; + } + } + &-range { + width: px2rem(40px); + position: relative; + .cxd-Number { + height: px2rem(26px); + } + .cxd-Number-handler-wrap { + display: none !important; + } + .cxd-Number-input { + padding: 0 px2rem(4px); + font-size: 12px; + } + &-panel { + width: px2rem(70px); + background: #fff; + padding: px2rem(4px); + &-title { + font-size: 12px; + color: #5c5f66; + transform: scale(0.9); + margin-bottom: px2rem(4px); + } + &-content { + height: 50px; + width: 50px; + margin: 0 auto; + border-radius: 50%; + background: #d0d0d0; + position: relative; + &-handler { + height: 8px; + width: 8px; + border-radius: 50%; + background: #5c5f66; + position: absolute; + cursor: pointer; + left: 12px; + } + } + } + } +} + +.Theme-ImageInput { + .resourceManager-background, + .#{$ns}ImageControl-addBtn, + .#{$ns}ImageControl-item, + .#{$ns}Image-thumb, + .#{$ns}Image--thumb { + width: 100%; + } + .#{$ns}Form-item { + margin-bottom: px2rem(8px); + } + &-func { + display: grid; + grid-column-gap: px2rem(10px); + grid-template-columns: auto px2rem(32px) px2rem(32px); + } +} + +.Theme-ImageInput-position { + height: px2rem(32px); + width: px2rem(32px); + overflow: hidden; + cursor: pointer; + border: 1px solid #e8e9eb; + border-radius: px2rem(4px); + display: grid; + grid-template-columns: repeat(3, 33.33%); + grid-template-rows: repeat(3, 33.33%); + &-item { + border: 1px solid #e8e9eb; + &:nth-child(1) { + border-top: none; + border-left: none; + } + &:nth-child(2) { + border-top: none; + border-left: none; + border-right: none; + } + &:nth-child(3) { + border-top: none; + border-right: none; + } + &:nth-child(4) { + border-top: none; + border-left: none; + border-bottom: none; + } + &:nth-child(5) { + border: none; + } + &:nth-child(6) { + border-top: none; + border-right: none; + border-bottom: none; + } + &:nth-child(7) { + border-left: none; + border-bottom: none; + } + &:nth-child(8) { + border-left: none; + border-right: none; + border-bottom: none; + } + &:nth-child(9) { + border-right: none; + border-bottom: none; + } + } + &-item--active { + background: #2468f2; + } +} +.Theme-ImageInput-position-container { + padding: px2rem(16px); + padding-top: px2rem(10px); + .Theme-ImageInput-position-title { + font-size: 12px; + margin-bottom: px2rem(10px); + } +} +.Theme-ImageInput-position-content { + width: 100px; + height: 100px; + cursor: pointer; + overflow: hidden; + border: 1px solid #e8e9eb; + border-radius: px2rem(4px); + display: grid; + grid-template-columns: repeat(3, 33.33%); + grid-template-rows: repeat(3, 33.33%); + &-item--active { + background: #2468f2; + } + &-item { + border: 1px solid #e8e9eb; + &:nth-child(1) { + border-top: none; + border-left: none; + } + &:nth-child(2) { + border-top: none; + border-left: none; + border-right: none; + } + &:nth-child(3) { + border-top: none; + border-right: none; + } + &:nth-child(4) { + border-top: none; + border-left: none; + border-bottom: none; + } + &:nth-child(5) { + border: none; + } + &:nth-child(6) { + border-top: none; + border-right: none; + border-bottom: none; + } + &:nth-child(7) { + border-left: none; + border-bottom: none; + } + &:nth-child(8) { + border-left: none; + border-right: none; + border-bottom: none; + } + &:nth-child(9) { + border-right: none; + border-bottom: none; + } + + &:hover { + background: #e6f0ff; + } + } +} +.Theme-ImageInput-color { + width: px2rem(32px); + height: px2rem(32px); + cursor: pointer; + border-radius: px2rem(4px); + background-image: linear-gradient( + 45deg, + #f7f8fa 25%, + transparent 25%, + transparent 75%, + #f7f8fa 75%, + #f7f8fa + ), + linear-gradient( + 45deg, + #f7f8fa 25%, + transparent 25%, + transparent 75%, + #f7f8fa 75%, + #f7f8fa + ); + background-size: 10px 10px; + background-position: 0 0, 5px 5px; + border: 1px solid #f7f7f9; +} +.Theme-ImageInput-color-container { + padding: 16px; +} +.Theme-ImageInput-color-content { + &-tab { + display: flex; + font-size: 12px; + color: #5c5f66; + padding-bottom: px2rem(14px); + margin-bottom: px2rem(14px); + border-bottom: 1px solid #e8e9eb; + &-item { + margin-right: px2rem(30px); + cursor: pointer; + &--active { + color: #2468f2; + } + } + } +} + +.Theme-CustomColor, +.Theme-GradientColor { + .sketch-picker { + box-shadow: none !important; + padding: 0 !important; + } +} + +.ThemeColor--transparent { + background-color: #fff !important; + background-image: linear-gradient( + 45deg, + #f7f8fa 25%, + transparent 25%, + transparent 75%, + #f7f8fa 75%, + #f7f8fa + ), + linear-gradient( + 45deg, + #f7f8fa 25%, + transparent 25%, + transparent 75%, + #f7f8fa 75%, + #f7f8fa + ) !important; + background-size: 10px 10px !important; + background-position: 0 0, 5px 5px !important; + border: 1px solid #f7f7f9; +} + +.ThemeColor--delete { + border: 1px solid #f7f7f9; + width: 100%; + height: 100%; + background: #fff; + &::before { + content: ''; + height: 2px; + width: 100%; + display: block; + transform: rotate(-45deg) translateY(-50%); + background-color: #f23d3d; + margin-top: 50%; + } +} + +[color-tooltip] { + position: relative; + &:hover { + &:before { + display: block; + } + } + &:before { + content: attr(color-tooltip); + width: max-content; + padding: px2rem(6px); + display: none; + position: absolute; + font-size: 12px; + bottom: px2rem(-35px); + left: 50%; + transform: scale(0.9) translateX(-50%); + box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); + border-radius: px2rem(2px); + background: #fff; + z-index: 1500; + } +} diff --git a/packages/amis-theme-editor-helper/src/style/_font.scss b/packages/amis-theme-editor-helper/src/style/_font.scss new file mode 100644 index 000000000..fa98a5906 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/style/_font.scss @@ -0,0 +1,97 @@ +$ns: cxd-; + +.Theme-FontEditor { + .common-icon { + width: px2rem(16px); + height: px2rem(16px); + cursor: pointer; + color: #5c5f66; + } + + &-line { + display: flex; + justify-content: space-between; + margin-bottom: px2rem(12px); + + .#{$ns}Button { + padding: px2rem(6px) px2rem(8px); + } + } + + &-item { + display: flex; + flex: 1; + margin-right: px2rem(4px); + align-items: top; + flex-direction: column; + min-width: 0; + + &:last-child { + margin-right: 0; + } + + &-label { + font-size: 12px; + color: #5c5f66; + line-height: px2rem(20px); + margin-top: px2rem(4px); + text-align: center; + } + + .#{$ns}Form-item { + flex: 1; + margin: 0; + } + + .#{$ns}Select { + font-size: 12px; + } + + .#{$ns}Select-popover { + min-width: px2rem(150px) !important; + } + + .color-picker { + background: #151b26; + border-radius: 4px; + width: px2rem(32px); + height: px2rem(32px); + } + + &-color-picker { + width: px2rem(32px); + flex: 0 1 2rem; + } + } + + &-font-line { + margin: 0; + } + + &-font-style { + display: flex; + justify-content: stretch; + background: #f7f7f9; + margin-bottom: px2rem(12px); + margin-top: px2rem(8px); + + &-icon { + flex: 1; + display: flex; + justify-content: center; + align-items: center; + height: px2rem(32px); + cursor: pointer; + } + + .right-line { + border-right: 1px solid #d8d8d8; + } + + &-selected { + .common-icon { + color: #2468f2; + } + } + } +} diff --git a/packages/amis-theme-editor-helper/src/style/_padding-and-margin.scss b/packages/amis-theme-editor-helper/src/style/_padding-and-margin.scss new file mode 100644 index 000000000..e5514e6c8 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/style/_padding-and-margin.scss @@ -0,0 +1,224 @@ +$bg: url('data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjI1NnB4IiBoZWlnaHQ9IjEzMnB4IiB2aWV3Qm94PSIwIDAgMjU2IDEzMiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxnIGlkPSLpobXpnaItMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHJlY3QgaWQ9IuefqeW9oiIgZmlsbD0iI0VFRjNGRSIgeD0iMCIgeT0iMCIgd2lkdGg9IjI1NiIgaGVpZ2h0PSIxMzIiIHJ4PSI0Ij48L3JlY3Q+CiAgICAgICAgPHBhdGggZD0iTTEuNTgwNzA5MDIsMC44MTQyODgxMyBMMTI4LDY2IEwxLjU4MDcwOTAyLDEzMS4xODU3MTIgQzAuNjIwMTMxOTM0LDEzMC40NTUxMDUgMS41OTIwMDcxMWUtMTYsMTI5LjI5OTk3MiAwLDEyOCBMMCw0IEMtMS41OTIwMDcxMWUtMTYsMi43MDAwMjc1NCAwLjYyMDEzMTkzNCwxLjU0NDg5NDY2IDEuNTgwNzA5MDIsMC44MTQyODgxMyBaIE0yNTYsNCBMMjU2LDEyOCBDMjU2LDEyOS4yOTk1MiAyNTUuMzgwMywxMzAuNDU0MzAxIDI1NC40MjAyOTQsMTMxLjE4NDk0OSBMMTI4LDY2IEwyNTQuNDE5MjkxLDAuODE0Mjg4MTMgQzI1NS4zNzk4NjgsMS41NDQ4OTQ2NiAyNTYsMi43MDAwMjc1NCAyNTYsNCBaIiBpZD0i5b2i54q257uT5ZCIIiBmaWxsPSIjRTNFRUZGIj48L3BhdGg+CiAgICAgICAgPHBhdGggZD0iTTIxMSwyMyBMMjExLDEwOSBMNDQsMTA5IEw0NCwyMyBMMjExLDIzIFogTTE5OSwyOSBMNTYsMjkgTDU2LDEwMyBMMTk5LDEwMyBMMTk5LDI5IFoiIGlkPSLlvaLnirbnu5PlkIgiIGZpbGw9IiNGRkZGRkYiPjwvcGF0aD4KICAgICAgICA8cmVjdCBpZD0i55+p5b2iIiBmaWxsPSIjRkZGRkZGIiB4PSIxMTEiIHk9IjU3IiB3aWR0aD0iMzQiIGhlaWdodD0iMTgiPjwvcmVjdD4KICAgIDwvZz4KPC9zdmc+'); +.Theme-PaddingAndMargin { + &-title { + margin-bottom: px2rem(10px); + color: #5c5f66; + font-size: 12px; + } + &-inner { + display: flex; + justify-content: space-between; + .theme-select { + width: 100%; + } + } + &-input { + flex-direction: column; + align-items: center; + flex: 1; + margin-left: px2rem(4px); + min-width: 0; + &-label { + font-size: 12px; + color: #5c5f66; + text-align: center; + } + } + &-label { + border-radius: 4px; + overflow: hidden; + height: px2rem(32px); + width: px2rem(32px); + flex-shrink: 0; + flex-grow: 0; + display: flex; + cursor: pointer; + &-all { + background: #f7f7f9; + height: px2rem(32px); + display: inline-flex; + align-items: center; + justify-content: center; + width: px2rem(32px); + &:before { + content: ''; + height: px2rem(14px); + width: px2rem(14px); + display: block; + border: 2px solid #5c5f66; + border-radius: 2px; + } + } + &-custom { + background: #f7f7f9; + height: px2rem(32px); + width: px2rem(32px); + position: relative; + border-left: 1px solid #e8e9eb; + > div { + height: px2rem(14px); + width: px2rem(14px); + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + &:before, + &:after { + position: absolute; + content: ''; + display: block; + background: #5c5f66; + height: px2rem(2px); + width: px2rem(2px); + border-radius: px2rem(1px); + } + } + > div:first-child { + &:before { + width: px2rem(8px); + top: 0; + left: px2rem(3px); + } + &:after { + height: px2rem(8px); + top: px2rem(3px); + left: 0; + } + } + > div:last-child { + &:before { + width: px2rem(8px); + bottom: 0; + left: px2rem(3px); + } + &:after { + height: px2rem(8px); + bottom: px2rem(3px); + right: 0; + } + } + } + &-all--active { + &:before { + border-color: #2468f2; + } + } + &-custom--active > div { + &:before, + &:after { + background-color: #2468f2; + } + } + } + &-label--custom { + width: px2rem(64px); + } + .cxd-Form-item { + margin-bottom: 0; + } + + &-custom { + height: px2rem(132px); + width: px2rem(256px); + margin: 0 auto; + margin-top: px2rem(8px); + background: $bg; + position: relative; + &::before, + &::after { + font-size: 10px; + color: #b8babf; + font-weight: 400; + position: absolute; + transform: scale(0.8); + } + & > div { + font-size: 12px; + color: #5c5f66; + position: absolute; + display: flex; + align-items: center; + justify-content: center; + padding: px2rem(2px); + cursor: pointer; + word-wrap: break-word; + line-height: 0.8; + min-width: px2rem(40px); + min-height: px2rem(14px); + border: 1px solid transparent; + div { + transform: scale(0.8); + transform-origin: left; + } + &:hover { + color: #2468f2; + border-color: #2468f2; + border-radius: px2rem(2px); + } + } + &-marginTop { + top: px2rem(4px); + left: 50%; + transform: translateX(-50%); + } + &-marginBottom { + bottom: px2rem(4px); + left: 50%; + transform: translateX(-50%); + } + &-marginLeft { + left: px2rem(4px); + top: 50%; + transform: translateY(-50%); + width: px2rem(40px); + } + &-marginRight { + right: px2rem(4px); + top: 50%; + transform: translateY(-50%); + width: px2rem(40px); + } + &-paddingTop { + top: px2rem(34px); + left: 50%; + transform: translateX(-50%); + } + &-paddingBottom { + bottom: px2rem(34px); + left: 50%; + transform: translateX(-50%); + } + &-paddingLeft { + left: px2rem(60px); + top: 50%; + transform: translateY(-50%); + width: px2rem(40px); + } + &-paddingRight { + right: px2rem(60px); + top: 50%; + transform: translateY(-50%); + width: px2rem(40px); + } + &-popover { + padding: px2rem(16px) px2rem(12px); + .cxd-Form-item { + margin-bottom: 0; + } + } + } + &-custom--padding { + &::after { + content: 'Padding'; + top: px2rem(28px); + left: px2rem(56px); + } + } + &-custom--margin { + &::before { + content: 'Margin'; + top: 0; + left: px2rem(2px); + } + } +} diff --git a/packages/amis-theme-editor-helper/src/style/_radius.scss b/packages/amis-theme-editor-helper/src/style/_radius.scss new file mode 100644 index 000000000..aea77de26 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/style/_radius.scss @@ -0,0 +1,128 @@ +.Theme-Radius { + &-label { + margin-bottom: px2rem(10px); + color: #5c5f66; + font-size: 12px; + } + .cxd-Form-item { + margin-bottom: 0; + } + &-inner { + display: flex; + } + &-item { + margin-right: px2rem(4px); + border-radius: 4px; + overflow: hidden; + height: px2rem(32px); + width: px2rem(32px); + flex-shrink: 0; + flex-grow: 0; + display: flex; + cursor: pointer; + &-all { + background: #f7f7f9; + height: px2rem(32px); + display: inline-flex; + align-items: center; + justify-content: center; + width: px2rem(32px); + &:before { + content: ''; + height: px2rem(14px); + width: px2rem(14px); + display: block; + border: 2px solid #5c5f66; + border-radius: 2px; + } + } + &-custom { + background: #f7f7f9; + height: px2rem(32px); + position: relative; + width: px2rem(32px); + border-left: 1px solid #e8e9eb; + &:before { + content: ''; + height: px2rem(14px); + width: px2rem(14px); + display: block; + border: 2px solid #5c5f66; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + border-radius: 2px; + } + &:after { + content: '＋'; + color: #f7f7f9; + display: block; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + font-size: px2rem(30px); + font-weight: 900; + } + } + &-all--active, + &-custom--active { + &:before { + border-color: #2468f2; + } + } + } + &-item--custom { + width: px2rem(64px); + } + &-settings { + flex: 1; + } + + &-settings-custom { + display: flex; + justify-content: space-between; + margin-top: px2rem(8px); + .arrow-icon { + display: none; + } + input { + padding: 0 !important; + } + .theme-select { + padding: 0 px2rem(4px) !important; + } + &-item:last-child { + margin-right: 0; + } + &-item { + flex: 1; + min-width: 0; + margin-right: px2rem(4px); + &-label { + height: px2rem(10px); + width: px2rem(10px); + border: 0 solid #5c5f66; + margin: px2rem(8px) auto; + border-radius: 2px; + } + &-top-left { + border-top-width: 2px; + border-left-width: 2px; + } + &-top-right { + border-top-width: 2px; + border-right-width: 2px; + } + &-bottom-left { + border-bottom-width: 2px; + border-left-width: 2px; + } + &-bottom-right { + border-bottom-width: 2px; + border-right-width: 2px; + } + } + } +} diff --git a/packages/amis-theme-editor-helper/src/style/_shadow.scss b/packages/amis-theme-editor-helper/src/style/_shadow.scss new file mode 100644 index 000000000..8ce68b2ba --- /dev/null +++ b/packages/amis-theme-editor-helper/src/style/_shadow.scss @@ -0,0 +1,236 @@ +$ns: cxd-; + +.Theme-ShadowEditor { + .#{$ns}Theme-ShadowEditor-add { + color: #5c5f66; + width: px2rem(12px); + height: px2rem(12px); + padding: 0; + + &:not(:disabled):not(.is-disabled):hover { + color: #5c5f66; + } + } + &-customContent { + background-color: #f7f7f9; + border-radius: 4px; + padding: px2rem(10px); + margin-top: px2rem(10px); + } + + &-sub-header { + margin-bottom: 0; + .Theme-Wrapper-header-left { + color: #5c5f66; + } + } + + &-line { + display: flex; + justify-content: space-between; + margin-top: px2rem(12px); + + .#{$ns}Button { + padding: px2rem(6px) px2rem(8px); + } + } + + &-item { + display: flex; + flex: 1; + margin-right: px2rem(4px); + align-items: top; + flex-direction: column; + + &:last-child { + margin-right: 0; + } + + &-label { + font-size: 12px; + color: #5c5f66; + line-height: px2rem(12px); + margin: px2rem(4px) 0 px2rem(8px); + text-align: center; + } + + .#{$ns}Form-item { + flex: 1; + margin: 0; + } + + .#{$ns}Select { + font-size: 12px; + } + + .#{$ns}Select-popover { + min-width: px2rem(150px) !important; + } + + .Theme-ShadowEditor-color-picker { + background: #fff; + border: 1px solid rgba($color: #979797, $alpha: 0.1); + border-radius: px2rem(4px); + padding: px2rem(6px) px2rem(12px); + height: px2rem(32px); + display: flex; + justify-content: center; + align-items: center; + + .Theme-ColorPicker-arrow { + display: none; + } + + .Theme-ColorPicker-label-out, + .Theme-ColorPicker-label { + height: px2rem(20px); + } + } + + .#{$ns}Number { + .#{$ns}Select { + display: none; + } + .#{$ns}Number-handler-wrap { + display: none !important; + } + input { + padding: 0 px2rem(4px) !important; + } + } + } + + .trash-icon { + font-size: px2rem(16px); + align-items: center; + margin-left: px2rem(4px); + flex-basis: px2rem(16px); + flex-grow: initial; + .common-icon { + margin-top: px2rem(8px); + cursor: pointer; + path { + fill: var(--colors-neutral-text-2); + } + &:hover { + path { + fill: var(--colors-brand-5); + } + } + } + .disabled-icon { + cursor: not-allowed; + path { + fill: var(--colors-neutral-text-5); + } + &:hover { + path { + fill: var(--colors-neutral-text-5); + } + } + } + } + + &-view { + width: px2rem(42px); + height: px2rem(32px); + border: 1px solid rgba($color: #979797, $alpha: 0.1); + border-radius: px2rem(4px); + margin-right: px2rem(4px); + background-color: #fff; + background-image: linear-gradient( + 45deg, + #f7f8fa 25%, + transparent 25%, + transparent 75%, + #f7f8fa 75%, + #f7f8fa + ), + linear-gradient( + 45deg, + #f7f8fa 25%, + transparent 25%, + transparent 75%, + #f7f8fa 75%, + #f7f8fa + ); + background-size: 10px 10px; + background-position: 0 0, 5px 5px; + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; + + &-inner { + width: px2rem(28px); + height: px2rem(20px); + background: #fff; + } + } +} + +.Theme-ShadowView { + width: px2rem(300px); + font-size: 12px; + padding: px2rem(12px); + + &-header { + color: #050a10; + line-height: px2rem(20px); + font-weight: 500; + margin-bottom: px2rem(8px); + } + + &-body { + border: 1px solid #e8e9eb; + border-radius: px2rem(4px); + padding: px2rem(12px); + + &-shadow { + width: 100%; + height: px2rem(100px); + background-color: #fff; + background-image: linear-gradient( + 45deg, + #f7f8fa 25%, + transparent 25%, + transparent 75%, + #f7f8fa 75%, + #f7f8fa + ), + linear-gradient( + 45deg, + #f7f8fa 25%, + transparent 25%, + transparent 75%, + #f7f8fa 75%, + #f7f8fa + ); + background-size: 20px 20px; + background-position: 0 0, 10px 10px; + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; + } + + &-shadow-square { + width: px2rem(164px); + height: px2rem(70px); + background: #fff; + } + + &-title { + font-size: 12px; + color: #050a10; + line-height: px2rem(20px); + font-weight: 500; + margin: px2rem(8px) 0 0; + } + + &-value { + color: #83868c; + line-height: px2rem(20px); + } + } +} diff --git a/packages/amis-theme-editor-helper/src/style/_size.scss b/packages/amis-theme-editor-helper/src/style/_size.scss new file mode 100644 index 000000000..a91825ceb --- /dev/null +++ b/packages/amis-theme-editor-helper/src/style/_size.scss @@ -0,0 +1,118 @@ +$ns: cxd-; + +.Theme-SizeEditor { + &-label { + margin-bottom: 0.625rem; + color: #5c5f66; + font-size: 12px; + } + + &-line { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: px2rem(12px); + + .#{$ns}Button { + padding: px2rem(6px) px2rem(8px); + width: px2rem(32px); + } + + &-no-hide { + .Theme-SizeEditor-item { + width: px2rem(210px); + max-width: px2rem(210px); + .theme-select { + width: px2rem(174px); + max-width: px2rem(174px); + } + } + } + + .Theme-SizeEditor-item-label { + width: px2rem(36px); + } + + .Theme-SizeEditor-item:not(:last-child) { + margin-bottom: px2rem(8px); + } + } + + &-lock { + position: relative; + &::before { + content: ''; + display: block; + position: absolute; + top: px2rem(-10px); + left: px2rem(-10px); + width: px2rem(26px); + height: px2rem(10px); + border: none; + border-top: 1px solid #b8babf; + border-right: 1px solid #b8babf; + } + &::after { + content: ''; + display: block; + position: absolute; + bottom: px2rem(-10px); + left: px2rem(-10px); + width: px2rem(26px); + height: px2rem(10px); + border: none; + border-bottom: 1px solid #b8babf; + border-right: 1px solid #b8babf; + } + } + + &-item { + display: flex; + flex: 1; + align-items: center; + + &-label { + padding: px2rem(6px) px2rem(12px); + font-size: 12px; + color: #b8babf; + line-height: 18px; + border: px2rem(1px) solid #e8e9eb; + border-right: 0; + border-top-left-radius: px2rem(4px); + border-bottom-left-radius: px2rem(4px); + } + + .#{$ns}Form-item { + margin: 0; + } + + .#{$ns}TextControl-input { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + font-size: 12px; + } + + .#{$ns}TextControl-sugs { + min-width: px2rem(150px) !important; + } + } + + &-item-sigle { + display: block; + + .#{$ns}Form-item { + width: auto; + } + + .Theme-SizeEditor-item { + div { + flex-grow: 1; + } + + .Theme-SizeEditor-item-label { + width: auto; + flex-grow: 0; + } + } + } +} diff --git a/packages/amis-theme-editor-helper/src/style/_theme-select.scss b/packages/amis-theme-editor-helper/src/style/_theme-select.scss new file mode 100644 index 000000000..54eb95764 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/style/_theme-select.scss @@ -0,0 +1,88 @@ +$ns: cxd-; + +.theme-select { + position: relative; + flex: 1 0 px2rem(32px); + border: 1px solid #e8e9eb; + border-radius: 4px; + height: px2rem(32px); + padding: 0 px2rem(8px); + display: flex; + align-items: center; + .ThemeSelectContent-theme { + background-color: #f7f8fa; + border-radius: 2px; + padding: 0 px2rem(4px); + width: fit-content; + height: px2rem(24px); + display: flex; + align-items: center; + cursor: pointer; + overflow: hidden; + > div { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + > .icon-close { + color: #b8babf; + margin-left: px2rem(4px); + top: 0; + flex: 1 0 1em; + &:hover { + color: #2468f2; + } + } + } + .ThemeSelectContent-input { + border: none; + outline: none; + width: 100%; + &::placeholder { + color: #b8babf; + } + } + + &:hover, + &--active { + border-color: #2468f2; + } +} + +.theme-select--disabled { + background-color: #f7f8fa; + cursor: not-allowed; + .ThemeSelectContent-theme { + cursor: not-allowed; + } +} + +.ThemeSelectContent-input-select { + max-height: px2rem(200px); + max-width: px2rem(200px); + overflow: scroll; + & > div { + height: px2rem(32px); + line-height: px2rem(32px); + padding: 0 px2rem(8px); + cursor: pointer; + &:hover { + background-color: #e6f0ff; + } + } + &-item--active { + color: #2468f2; + } +} + +.arrow-icon { + width: px2rem(10px); + height: px2rem(10px); + color: #84868c; + transform: rotate(90deg); + transition: transform 0.2s ease; +} + +.arrow-icon-reverse { + transform: rotate(270deg); +} diff --git a/packages/amis-theme-editor-helper/src/style/_theme-wrapper.scss b/packages/amis-theme-editor-helper/src/style/_theme-wrapper.scss new file mode 100644 index 000000000..105af7f26 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/style/_theme-wrapper.scss @@ -0,0 +1,69 @@ +$ns: cxd-; + +.Theme-Wrapper { + .common-icon { + width: px2rem(16px); + height: px2rem(16px); + cursor: pointer; + color: #5c5f66; + } + + &-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: px2rem(8px); + + &-left { + font-size: 12px; + color: #070c14; + line-height: px2rem(20px); + font-weight: 400; + } + + &-right { + display: flex; + align-items: center; + + .arrow-icon { + width: px2rem(10px); + height: px2rem(10px); + color: #84868c; + transform: rotate(90deg); + transition: transform 0.2s ease; + margin-left: px2rem(8px); + cursor: pointer; + } + + .arrow-icon-reverse { + transform: rotate(270deg); + } + } + } + + &-body { + .#{$ns}Form-item { + margin-bottom: px2rem(16px); + } + + .theme-select .#{$ns}Form-item { + margin-bottom: 0; + } + + .theme-select, + .#{$ns}IconSelectControl-input { + border-radius: 0 px2rem(4px) px2rem(4px) 0; + height: px2rem(32px); + } + + .#{$ns}Form-label { + border: 1px solid #e8e9eb; + border-right: none; + border-radius: px2rem(4px) 0 0 px2rem(4px); + padding: 0 px2rem(12px); + width: auto !important; + flex-grow: 0; + height: px2rem(32px); + } + } +} diff --git a/packages/amis-theme-editor-helper/src/style/index.scss b/packages/amis-theme-editor-helper/src/style/index.scss new file mode 100644 index 000000000..b00c88aad --- /dev/null +++ b/packages/amis-theme-editor-helper/src/style/index.scss @@ -0,0 +1,15 @@ +$remFactor: 16px; +@import '../../../../node_modules/amis-ui/scss/functions'; +@import './padding-and-margin'; +@import './border'; +@import './radius'; +@import './color-picker'; +@import './size'; +@import './theme-select'; +@import './font'; +@import './theme-wrapper'; +@import './shadow'; + +.cxd-PopOver { + z-index: 1400 !important; +} diff --git a/packages/amis-theme-editor-helper/src/systemTheme/antd.ts b/packages/amis-theme-editor-helper/src/systemTheme/antd.ts new file mode 100644 index 000000000..e863e9d86 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/systemTheme/antd.ts @@ -0,0 +1,1187 @@ +import type {ThemeDefinition} from '../helper/declares'; +import component from './component'; + +const antdData: ThemeDefinition = { + config: { + key: 'antd', + name: '仿Antd', + description: '平台预设主题' + }, + global: { + fonts: { + base: { + body: [ + {value: '-apple-system'}, + {value: 'BlinkMacSystemFont'}, + {value: 'SF Pro SC'}, + {value: 'SF Pro Text'}, + {value: 'Helvetica Neue'}, + {value: 'Helvetica'}, + {value: 'PingFang SC'}, + {value: 'Segoe UI'}, + {value: 'Roboto'}, + {value: 'Hiragino Sans GB'}, + {value: 'Arial'}, + {value: 'microsoft yahei ui'}, + {value: 'Microsoft YaHei'}, + {value: 'SimSun'}, + {value: 'sans-serif'} + ], + label: '基础字体', + token: '--fonts-base-family' + }, + size: { + body: [ + {label: '运营标题-大', token: '--fonts-size-1', value: '48px'}, + {label: '运营标题-中', token: '--fonts-size-2', value: '40px'}, + {label: '运营标题-小', token: '--fonts-size-3', value: '32px'}, + {label: '标题-大', token: '--fonts-size-4', value: '24px'}, + {label: '标题-中', token: '--fonts-size-5', value: '18px'}, + {label: '标题-小', token: '--fonts-size-6', value: '16px'}, + {label: '正文-常规-大', token: '--fonts-size-7', value: '14px'}, + {label: '正文-常规-小', token: '--fonts-size-8', value: '12px'}, + {label: '水印文字', token: '--fonts-size-9', value: '12px'} + ], + label: '字号', + token: '--fonts-size-' + }, + weight: { + body: [ + {label: 'Ultra bold(heavy)', token: '--fonts-weight-1', value: 900}, + {label: 'Extra bold', token: '--fonts-weight-2', value: 800}, + {label: 'Blod', token: '--fonts-weight-3', value: 700}, + {label: 'Semi bold', token: '--fonts-weight-4', value: 600}, + {label: 'Medium', token: '--fonts-weight-5', value: 500}, + {label: 'Regular', token: '--fonts-weight-6', value: 400}, + {label: 'Light', token: '--fonts-weight-7', value: 300}, + {label: 'Extra light(thin)', token: '--fonts-weight-8', value: 200}, + {label: 'Uitra light', token: '--fonts-weight-9', value: 100} + ], + label: '字重', + token: '--fonts-weight-' + }, + lineHeight: { + body: [ + {label: 'Line-height-1', token: '--fonts-lineHeight-1', value: 1.3}, + {label: 'Line-height-2', token: '--fonts-lineHeight-2', value: 1.5}, + {label: 'Line-height-3', token: '--fonts-lineHeight-3', value: 1.7} + ], + label: '行高', + token: '--fonts-lineHeight-' + } + }, + sizes: { + size: { + base: 0.125, + body: [ + {label: '无', token: '--sizes-size-0', value: '0rem', disabled: true}, + { + label: 'auto', + token: '--sizes-size-1', + value: 'auto', + disabled: true + }, + { + label: '特小', + token: '--sizes-size-2', + value: '0.125rem' + }, + { + label: '极小', + token: '--sizes-size-3', + value: '0.25rem' + }, + { + label: '小', + token: '--sizes-size-4', + value: '0.375rem' + }, + { + label: '正常', + token: '--sizes-size-5', + value: '0.5rem' + }, + { + label: '中', + token: '--sizes-size-6', + value: '0.625rem' + }, + { + label: '大', + token: '--sizes-size-7', + value: '0.75rem' + }, + { + label: '极大', + token: '--sizes-size-8', + value: '0.875rem' + }, + { + label: '特大', + token: '--sizes-size-9', + value: '1rem' + } + ], + label: '尺寸', + start: '0.125rem', + token: '--sizes-size-' + } + }, + colors: { + func: { + body: [ + { + body: { + main: '#ff4d4f', + colors: [ + { + color: '#660a18', + index: 0, + label: '1-#660a18', + token: '--colors-error-1' + }, + { + color: '#8c1523', + index: 1, + label: '2-#8c1523', + token: '--colors-error-2' + }, + { + color: '#b32430', + index: 2, + label: '3-#b32430', + token: '--colors-error-3' + }, + { + color: '#d9363e', + index: 3, + label: '4-#d9363e', + token: '--colors-error-4' + }, + { + color: '#ff4d4f', + index: 4, + label: '5-#ff4d4f', + token: '--colors-error-5' + }, + { + color: '#ff7070', + index: 5, + label: '6-#ff7070', + token: '--colors-error-6' + }, + { + color: '#ff9694', + index: 6, + label: '7-#ff9694', + token: '--colors-error-7' + }, + { + color: '#ffbab8', + index: 7, + label: '8-#ffbab8', + token: '--colors-error-8' + }, + { + color: '#ffdddb', + index: 8, + label: '9-#ffdddb', + token: '--colors-error-9' + }, + { + color: '#ffe7e6', + index: 9, + label: '10-#ffe7e6', + token: '--colors-error-10' + } + ], + common: [ + {id: 'default', color: 4, label: '常规'}, + {id: 'active', color: 3, label: '点击'}, + {id: 'hover', color: 5, label: '悬浮'}, + {id: 'bg', color: 9, label: '背景'} + ] + }, + label: '失败色', + token: '--colors-error-' + }, + { + body: { + main: '#faad14', + colors: [ + { + color: '#613400', + index: 0, + label: '1-#613400', + token: '--colors-warning-1' + }, + { + color: '#874d00', + index: 1, + label: '2-#874d00', + token: '--colors-warning-2' + }, + { + color: '#ad6800', + index: 2, + label: '3-#ad6800', + token: '--colors-warning-3' + }, + { + color: '#d48806', + index: 3, + label: '4-#d48806', + token: '--colors-warning-4' + }, + { + color: '#faad14', + index: 4, + label: '5-#faad14', + token: '--colors-warning-5' + }, + { + color: '#ffc443', + index: 5, + label: '6-#ffc443', + token: '--colors-warning-6' + }, + { + color: '#ffd572', + index: 6, + label: '7-#ffd572', + token: '--colors-warning-7' + }, + { + color: '#ffe4a1', + index: 7, + label: '8-#ffe4a1', + token: '--colors-warning-8' + }, + { + color: '#fff2d0', + index: 8, + label: '9-#fff2d0', + token: '--colors-warning-9' + }, + { + color: '#fff9e6', + index: 9, + label: '10-#fff9e6', + token: '--colors-warning-10' + } + ], + common: [ + {id: 'default', color: 4, label: '常规'}, + {id: 'active', color: 3, label: '点击'}, + {id: 'hover', color: 5, label: '悬浮'}, + {id: 'bg', color: 9, label: '背景'} + ] + }, + label: '警告色', + token: '--colors-warning-' + }, + { + body: { + main: '#389e0d', + colors: [ + { + color: '#010500', + index: 0, + label: '1-#010500', + token: '--colors-success-1' + }, + { + color: '#092b00', + index: 1, + label: '2-#092b00', + token: '--colors-success-2' + }, + { + color: '#135200', + index: 2, + label: '3-#135200', + token: '--colors-success-3' + }, + { + color: '#237804', + index: 3, + label: '4-#237804', + token: '--colors-success-4' + }, + { + color: '#389e0d', + index: 4, + label: '5-#389e0d', + token: '--colors-success-5' + }, + { + color: '#55ab2d', + index: 5, + label: '6-#55ab2d', + token: '--colors-success-6' + }, + { + color: '#74b852', + index: 6, + label: '7-#74b852', + token: '--colors-success-7' + }, + { + color: '#95c47c', + index: 7, + label: '8-#95c47c', + token: '--colors-success-8' + }, + { + color: '#b9d1ab', + index: 8, + label: '9-#b9d1ab', + token: '--colors-success-9' + }, + { + color: '#d0dec8', + index: 9, + label: '10-#d0dec8', + token: '--colors-success-10' + } + ], + common: [ + {id: 'default', color: 4, label: '常规'}, + {id: 'active', color: 3, label: '点击'}, + {id: 'hover', color: 5, label: '悬浮'}, + {id: 'bg', color: 9, label: '背景'} + ] + }, + label: '成功色', + token: '--colors-success-' + }, + { + body: { + colors: [ + { + color: '#002766', + index: 0, + label: '1-#002766', + token: '--colors-link-1' + }, + { + color: '#003a8c', + index: 1, + label: '2-#003a8c', + token: '--colors-link-2' + }, + { + color: '#0050b3', + index: 2, + label: '3-#0050b3', + token: '--colors-link-3' + }, + { + color: '#096dd9', + index: 3, + label: '4-#096dd9', + token: '--colors-link-4' + }, + { + color: '#1890ff', + index: 4, + label: '5-#1890ff', + token: '--colors-link-5' + }, + { + color: '#45a8ff', + index: 5, + label: '6-#45a8ff', + token: '--colors-link-6' + }, + { + color: '#74c0ff', + index: 6, + label: '7-#74c0ff', + token: '--colors-link-7' + }, + { + color: '#a2d7ff', + index: 7, + label: '8-#a2d7ff', + token: '--colors-link-8' + }, + { + color: '#d1ecff', + index: 8, + label: '9-#d1ecff', + token: '--colors-link-9' + }, + { + color: '#e6f5ff', + index: 9, + label: '10-#e6f5ff', + token: '--colors-link-10' + } + ], + common: [ + {id: 'default', color: 4, label: '常规'}, + {id: 'active', color: 3, label: '点击'}, + {id: 'hover', color: 5, label: '悬浮'}, + {id: 'bg', color: 9, label: '背景'} + ] + }, + label: '链接色', + token: '--colors-link-' + }, + { + body: { + colors: [ + { + color: '#002766', + index: 0, + label: '1-#002766', + token: '--colors-info-1' + }, + { + color: '#003a8c', + index: 1, + label: '2-#003a8c', + token: '--colors-info-2' + }, + { + color: '#0050b3', + index: 2, + label: '3-#0050b3', + token: '--colors-info-3' + }, + { + color: '#096dd9', + index: 3, + label: '4-#096dd9', + token: '--colors-info-4' + }, + { + color: '#1890ff', + index: 4, + label: '5-#1890ff', + token: '--colors-info-5' + }, + { + color: '#45a8ff', + index: 5, + label: '6-#45a8ff', + token: '--colors-info-6' + }, + { + color: '#74c0ff', + index: 6, + label: '7-#74c0ff', + token: '--colors-info-7' + }, + { + color: '#a2d7ff', + index: 7, + label: '8-#a2d7ff', + token: '--colors-info-8' + }, + { + color: '#d1ecff', + index: 8, + label: '9-#d1ecff', + token: '--colors-info-9' + }, + { + color: '#e6f5ff', + index: 9, + label: '10-#e6f5ff', + token: '--colors-info-10' + } + ], + common: [ + {id: 'default', color: 4, label: '常规'}, + {id: 'active', color: 3, label: '点击'}, + {id: 'hover', color: 5, label: '悬浮'}, + {id: 'bg', color: 9, label: '背景'} + ] + }, + label: '提示色', + token: '--colors-info-' + }, + { + body: { + main: '#2468f2', + colors: [ + { + color: '#001259', + index: 0, + label: '1-#001259', + token: '--colors-other-1' + }, + { + color: '#001e80', + index: 1, + label: '2-#001e80', + token: '--colors-other-2' + }, + { + color: '#0832a6', + index: 2, + label: '3-#0832a6', + token: '--colors-other-3' + }, + { + color: '#144bcc', + index: 3, + label: '4-#144bcc', + token: '--colors-other-4' + }, + { + color: '#2468f2', + index: 4, + label: '5-#2468f2', + token: '--colors-other-5' + }, + { + color: '#528eff', + index: 5, + label: '6-#528eff', + token: '--colors-other-6' + }, + { + color: '#7dadff', + index: 6, + label: '7-#7dadff', + token: '--colors-other-7' + }, + { + color: '#a8caff', + index: 7, + label: '8-#a8caff', + token: '--colors-other-8' + }, + { + color: '#d4e5ff', + index: 8, + label: '9-#d4e5ff', + token: '--colors-other-9' + }, + { + color: '#e6f0ff', + index: 9, + label: '10-#e6f0ff', + token: '--colors-other-10' + } + ], + common: [ + {id: 'default', color: 4, label: '常规'}, + {id: 'active', color: 3, label: '点击'}, + {id: 'hover', color: 5, label: '悬浮'}, + {id: 'bg', color: 9, label: '背景'} + ] + }, + label: '其他色', + token: '--colors-other-' + } + ], + label: '辅助色', + token: 'func' + }, + brand: { + body: { + colors: [ + { + color: '#002766', + index: 0, + label: '1-#002766', + token: '--colors-brand-1' + }, + { + color: '#003a8c', + index: 1, + label: '2-#003a8c', + token: '--colors-brand-2' + }, + { + color: '#0050b3', + index: 2, + label: '3-#0050b3', + token: '--colors-brand-3' + }, + { + color: '#096dd9', + index: 3, + label: '4-#096dd9', + token: '--colors-brand-4' + }, + { + color: '#1890ff', + index: 4, + label: '5-#1890ff', + token: '--colors-brand-5' + }, + { + color: '#45a8ff', + index: 5, + label: '6-#45a8ff', + token: '--colors-brand-6' + }, + { + color: '#74c0ff', + index: 6, + label: '7-#74c0ff', + token: '--colors-brand-7' + }, + { + color: '#a2d7ff', + index: 7, + label: '8-#a2d7ff', + token: '--colors-brand-8' + }, + { + color: '#d1ecff', + index: 8, + label: '9-#d1ecff', + token: '--colors-brand-9' + }, + { + color: '#e6f5ff', + index: 9, + label: '10-#e6f5ff', + token: '--colors-brand-10' + } + ], + common: [ + {id: 'default', color: 4, label: '常规'}, + {id: 'active', color: 3, label: '点击'}, + {id: 'hover', color: 5, label: '悬浮'}, + {id: 'bg', color: 9, label: '背景'} + ] + }, + label: '品牌色', + token: '--colors-brand-' + }, + neutral: { + body: [ + { + body: { + common: [ + {id: 'strong', color: 1, label: '强调/正文标题'}, + {id: 'lessStrong', color: 3, label: '次强调/正文标题'}, + {id: 'info', color: 4, label: '辅助说明'}, + {id: 'disabledInfo', color: 5, label: '禁用'}, + {id: 'white', color: 10, label: '纯白文字'} + ], + colors: [ + { + color: '#070e14', + index: 0, + label: '0-#070e14', + token: '--colors-neutral-text-1' + }, + { + color: '#151e26', + index: 1, + label: '1-#151e26', + token: '--colors-neutral-text-2' + }, + { + color: '#303840', + index: 2, + label: '2-#303840', + token: '--colors-neutral-text-3' + }, + { + color: '#5c6166', + index: 3, + label: '3-#5c6166', + token: '--colors-neutral-text-4' + }, + { + color: '#84888c', + index: 4, + label: '4-#84888c', + token: '--colors-neutral-text-5' + }, + { + color: '#b8bcbf', + index: 5, + label: '5-#b8bcbf', + token: '--colors-neutral-text-6' + }, + { + color: '#d4d7d9', + index: 6, + label: '6-#d4d7d9', + token: '--colors-neutral-text-7' + }, + { + color: '#e8e9eb', + index: 7, + label: '7-#e8e9eb', + token: '--colors-neutral-text-8' + }, + { + color: '#f2f4f5', + index: 8, + label: '8-#f2f4f5', + token: '--colors-neutral-text-9' + }, + { + color: '#f7f9fa', + index: 9, + label: '9-#f7f9fa', + token: '--colors-neutral-text-10' + }, + { + color: '#ffffff', + index: 10, + label: '10-#ffffff', + token: '--colors-neutral-text-11' + } + ] + }, + label: '文字', + token: '--colors-neutral-text-' + }, + { + body: { + none: 'transparent', + common: [ + {id: 'fill-white', color: 10, label: '纯白填充'}, + {id: 'fill-1', color: 9, label: '浅/禁用背景'}, + {id: 'fill-2', color: 7, label: '分割线'}, + {id: 'fill-3', color: 6, label: '深/灰底悬浮'} + ], + colors: [ + { + color: '#070e14', + index: 0, + label: '0-#070e14', + token: '--colors-neutral-fill-1' + }, + { + color: '#151e26', + index: 1, + label: '1-#151e26', + token: '--colors-neutral-fill-2' + }, + { + color: '#303840', + index: 2, + label: '2-#303840', + token: '--colors-neutral-fill-3' + }, + { + color: '#5c6166', + index: 3, + label: '3-#5c6166', + token: '--colors-neutral-fill-4' + }, + { + color: '#84888c', + index: 4, + label: '4-#84888c', + token: '--colors-neutral-fill-5' + }, + { + color: '#b8bcbf', + index: 5, + label: '5-#b8bcbf', + token: '--colors-neutral-fill-6' + }, + { + color: '#d4d7d9', + index: 6, + label: '6-#d4d7d9', + token: '--colors-neutral-fill-7' + }, + { + color: '#e8e9eb', + index: 7, + label: '7-#e8e9eb', + token: '--colors-neutral-fill-8' + }, + { + color: '#f2f4f5', + index: 8, + label: '8-#f2f4f5', + token: '--colors-neutral-fill-9' + }, + { + color: '#f7f9fa', + index: 9, + label: '9-#f7f9fa', + token: '--colors-neutral-fill-10' + }, + { + color: '#ffffff', + index: 10, + label: '10-#ffffff', + token: '--colors-neutral-fill-11' + } + ] + }, + label: '填充', + token: '--colors-neutral-fill-' + }, + { + body: { + common: [ + {id: 'line-1', color: 9, label: '浅'}, + {id: 'line-2', color: 7, label: '常规'}, + {id: 'line-3', color: 5, label: '深'}, + {id: 'line-4', color: 3, label: '重'} + ], + colors: [ + { + color: '#070e14', + index: 0, + label: '0-#070e14', + token: '--colors-neutral-line-1' + }, + { + color: '#151e26', + index: 1, + label: '1-#151e26', + token: '--colors-neutral-line-2' + }, + { + color: '#303840', + index: 2, + label: '2-#303840', + token: '--colors-neutral-line-3' + }, + { + color: '#5c6166', + index: 3, + label: '3-#5c6166', + token: '--colors-neutral-line-4' + }, + { + color: '#84888c', + index: 4, + label: '4-#84888c', + token: '--colors-neutral-line-5' + }, + { + color: '#b8bcbf', + index: 5, + label: '5-#b8bcbf', + token: '--colors-neutral-line-6' + }, + { + color: '#d4d7d9', + index: 6, + label: '6-#d4d7d9', + token: '--colors-neutral-line-7' + }, + { + color: '#e8e9eb', + index: 7, + label: '7-#e8e9eb', + token: '--colors-neutral-line-8' + }, + { + color: '#f2f4f5', + index: 8, + label: '8-#f2f4f5', + token: '--colors-neutral-line-9' + }, + { + color: '#f7f9fa', + index: 9, + label: '9-#f7f9fa', + token: '--colors-neutral-line-10' + }, + { + color: '#ffffff', + index: 10, + label: '10-#ffffff', + token: '--colors-neutral-line-11' + } + ] + }, + label: '线条', + token: '--colors-neutral-line-' + } + ], + label: '中性色', + token: '--colors-neutral-' + }, + data: { + label: '数据色', + body: [ + { + label: '默认', + token: 'dataColor1', + colors: [ + { + value: '#1890ff' + }, + { + value: '#a04bfa' + }, + { + value: '#fc2d98' + }, + { + value: '#c26711' + }, + { + value: '#579c0e' + }, + { + value: '#10b35f' + }, + { + value: '#129dc7' + } + ] + }, + { + label: '经典', + token: 'dataColor2', + colors: [ + { + value: '#1890ff' + }, + { + value: '#c735fc' + }, + { + value: '#fc3f42' + }, + { + value: '#72910d' + }, + { + value: '#11ba38' + }, + { + value: '#129dc7' + }, + { + value: '#815bfc' + } + ] + }, + { + label: '过渡', + token: 'dataColor3', + colors: [ + { + value: '#1890ff' + }, + { + value: '#4878fa' + }, + { + value: '#6568fc' + }, + { + value: '#815bfc' + }, + { + value: '#a04bfa' + }, + { + value: '#c735fc' + }, + { + value: '#f61efa' + } + ] + } + ] + } + }, + borders: { + style: { + body: [ + { + label: '无', + token: '--borders-style-1', + value: 'none', + disabled: true + }, + {label: '实线', token: '--borders-style-2', value: 'solid'}, + {label: '虚线', token: '--borders-style-3', value: 'dashed'}, + {label: '点线', token: '--borders-style-4', value: 'dotted'} + ], + label: '样式', + token: '--borders-style-' + }, + width: { + body: [ + { + label: '无', + token: '--borders-width-1', + value: '0px', + disabled: true + }, + {label: '常规', token: '--borders-width-2', value: '1px'}, + {label: '中粗', token: '--borders-width-3', value: '2px'}, + {label: '特粗', token: '--borders-width-4', value: '4px'} + ], + label: '粗细', + token: '--borders-width-' + }, + radius: { + body: [ + { + label: '无', + token: '--borders-radius-1', + value: '0px', + disabled: true + }, + {label: '圆角1', token: '--borders-radius-2', value: '1px'}, + {label: '圆角2', token: '--borders-radius-3', value: '2px'}, + {label: '圆角3', token: '--borders-radius-4', value: '6px'}, + {label: '圆角4', token: '--borders-radius-5', value: '8px'}, + {label: '圆角5', token: '--borders-radius-6', value: '10px'}, + {label: '圆角6', token: '--borders-radius-7', value: '50%'} + ], + label: '圆角', + token: '--borders-radius-' + } + }, + shadows: { + shadow: { + body: [ + { + label: '无阴影', + token: '--shadows-shadow-none', + value: [ + { + x: '0px', + y: '0px', + blur: '0px', + color: 'transparent', + inset: false, + spread: '0px' + } + ], + disabled: true + }, + { + label: '阴影sm', + token: '--shadows-shadow-sm', + value: [ + { + x: '0px', + y: '1px', + blur: '2px', + color: 'rgba(0, 0, 0, 0.05)', + inset: false, + spread: '0px' + } + ] + }, + { + label: '阴影', + token: '--shadows-shadow-normal', + value: [ + { + x: '0px', + y: '1px', + blur: '3px', + color: 'rgba(0, 0, 0, 0.1)', + inset: false, + spread: '0px' + }, + { + x: '0px', + y: '1px', + blur: '2px', + color: 'rgba(0, 0, 0, 0.06)', + inset: false, + spread: '0px' + } + ] + }, + { + label: '阴影md', + token: '--shadows-shadow-md', + value: [ + { + x: '0px', + y: '4px', + blur: '-1px', + color: 'rgba(0, 0, 0, 0.1)', + inset: false, + spread: '0px' + }, + { + x: '0px', + y: '2px', + blur: '4px', + color: 'rgba(0, 0, 0, 0.06)', + inset: false, + spread: '-1px' + } + ] + }, + { + label: '阴影lg', + token: '--shadows-shadow-lg', + value: [ + { + x: '0px', + y: '10px', + blur: '15px', + color: 'rgba(0, 0, 0, 0.1)', + inset: false, + spread: '-3px' + }, + { + x: '0px', + y: '4px', + blur: '6px', + color: 'rgba(0, 0, 0, 0.05)', + inset: false, + spread: '-2px' + } + ] + }, + { + label: '阴影xl', + token: '--shadows-shadow-xl', + value: [ + { + x: '0px', + y: '20px', + blur: '25px', + color: 'rgba(0, 0, 0, 0.1)', + inset: false, + spread: '-5px' + }, + { + x: '0px', + y: '10px', + blur: '10px', + color: 'rgba(0, 0, 0, 0.04)', + inset: false, + spread: '-5px' + } + ] + }, + { + label: '阴影2xl', + token: '--shadows-shadow-2xl', + value: [ + { + x: '0px', + y: '25px', + blur: '50px', + color: 'rgba(0, 0, 0, 0.25)', + inset: false, + spread: '-12px' + } + ] + } + ], + label: '阴影', + token: '--shadows-shadow-' + } + } + }, + component +}; + +export default antdData; diff --git a/packages/amis-theme-editor-helper/src/systemTheme/component.ts b/packages/amis-theme-editor-helper/src/systemTheme/component.ts new file mode 100644 index 000000000..9351b42c1 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/systemTheme/component.ts @@ -0,0 +1,6157 @@ +import type {ThemeDefinition} from '../helper/declares'; + +const component: ThemeDefinition['component'] = { + button1: { + type: [ + { + label: '默认', + custom: false, + type: 'default', + default: { + label: '默认常规', + token: '--button-default-default-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-neutral-fill-11)', + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + hover: { + label: '默认悬浮', + token: '--button-default-hover-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-brand-5)', + 'bg-color': 'var(--colors-neutral-fill-11)', + 'border': { + 'top-border-color': 'var(--colors-brand-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + active: { + label: '默认点击', + token: '--button-default-active-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-brand-4)', + 'bg-color': 'var(--colors-neutral-fill-11)', + 'border': { + 'top-border-color': 'var(--colors-brand-4)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-4)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-4)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-4)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + disabled: { + label: '默认禁用', + token: '--button-default-disabled-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-6)', + 'bg-color': 'var(--colors-neutral-fill-10)', + 'border': { + 'top-border-color': 'var(--colors-neutral-line-10)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-10)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-10)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-10)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + } + }, + { + label: '主要', + custom: false, + type: 'primary', + default: { + label: '默认常规', + token: '--button-primary-default-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-11)', + 'bg-color': 'var(--colors-brand-5)', + 'border': { + 'top-border-color': 'var(--colors-brand-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + hover: { + label: '默认悬浮', + token: '--button-primary-hover-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-11)', + 'bg-color': 'var(--colors-brand-6)', + 'border': { + 'top-border-color': 'var(--colors-brand-6)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-6)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-6)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-6)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + active: { + label: '默认点击', + token: '--button-primary-active-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-11)', + 'bg-color': 'var(--colors-brand-4)', + 'border': { + 'top-border-color': 'var(--colors-brand-4)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-4)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-4)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-4)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + disabled: { + label: '默认禁用', + token: '--button-primary-disabled-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-6)', + 'bg-color': 'var(--colors-neutral-fill-10)', + 'border': { + 'top-border-color': 'var(--colors-neutral-line-10)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-10)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-10)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-10)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + } + }, + { + label: '次要', + custom: false, + type: 'secondary', + default: { + label: '默认常规', + token: '--button-secondary-default-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-11)', + 'bg-color': 'var(--colors-neutral-fill-6)', + 'border': { + 'top-border-color': 'var(--colors-neutral-line-6)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-6)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-6)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-6)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + hover: { + label: '默认悬浮', + token: '--button-secondary-hover-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-11)', + 'bg-color': 'var(--colors-neutral-fill-5)', + 'border': { + 'top-border-color': 'var(--colors-neutral-line-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + active: { + label: '默认点击', + token: '--button-secondary-active-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-11)', + 'bg-color': 'var(--colors-neutral-fill-4)', + 'border': { + 'top-border-color': 'var(--colors-neutral-line-4)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-4)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-4)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-4)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + disabled: { + label: '默认禁用', + token: '--button-secondary-disabled-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-6)', + 'bg-color': 'var(--colors-neutral-fill-10)', + 'border': { + 'top-border-color': 'var(--colors-neutral-line-10)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-10)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-10)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-10)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + } + }, + { + label: '增强', + custom: false, + type: 'enhance', + default: { + label: '默认常规', + token: '--button-enhance-default-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-brand-5)', + 'bg-color': 'var(--colors-neutral-fill-11)', + 'border': { + 'top-border-color': 'var(--colors-brand-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + hover: { + label: '默认悬浮', + token: '--button-enhance-hover-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-brand-6)', + 'bg-color': 'var(--colors-neutral-fill-11)', + 'border': { + 'top-border-color': 'var(--colors-brand-6)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-6)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-6)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-6)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + active: { + label: '默认点击', + token: '--button-enhance-active-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-brand-4)', + 'bg-color': 'var(--colors-neutral-fill-11)', + 'border': { + 'top-border-color': 'var(--colors-brand-4)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-4)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-4)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-4)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + disabled: { + label: '默认禁用', + token: '--button-enhance-disabled-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-6)', + 'bg-color': 'var(--colors-neutral-fill-10)', + 'border': { + 'top-border-color': 'var(--colors-neutral-line-10)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-10)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-10)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-10)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + } + }, + { + label: '信息', + custom: false, + type: 'info', + default: { + label: '默认常规', + token: '--button-info-default-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-11)', + 'bg-color': 'var(--colors-info-5)', + 'border': { + 'top-border-color': 'var(--colors-info-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-info-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-info-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-info-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + hover: { + label: '默认悬浮', + token: '--button-info-hover-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-11)', + 'bg-color': 'var(--colors-info-6)', + 'border': { + 'top-border-color': 'var(--colors-info-6)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-info-6)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-info-6)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-info-6)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + active: { + label: '默认点击', + token: '--button-info-active-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-11)', + 'bg-color': 'var(--colors-info-4)', + 'border': { + 'top-border-color': 'var(--colors-info-4)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-info-4)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-info-4)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-info-4)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + disabled: { + label: '默认禁用', + token: '--button-info-disabled-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-6)', + 'bg-color': 'var(--colors-neutral-fill-10)', + 'border': { + 'top-border-color': 'var(--colors-neutral-line-10)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-10)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-10)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-10)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + } + }, + { + label: '成功', + custom: false, + type: 'success', + default: { + label: '默认常规', + token: '--button-success-default-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-11)', + 'bg-color': 'var(--colors-success-5)', + 'border': { + 'top-border-color': 'var(--colors-success-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-success-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-success-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-success-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + hover: { + label: '默认悬浮', + token: '--button-success-hover-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-11)', + 'bg-color': 'var(--colors-success-6)', + 'border': { + 'top-border-color': 'var(--colors-success-6)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-success-6)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-success-6)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-success-6)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + active: { + label: '默认点击', + token: '--button-success-active-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-11)', + 'bg-color': 'var(--colors-success-4)', + 'border': { + 'top-border-color': 'var(--colors-success-4)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-success-4)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-success-4)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-success-4)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + disabled: { + label: '默认禁用', + token: '--button-success-disabled-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-6)', + 'bg-color': 'var(--colors-neutral-fill-10)', + 'border': { + 'top-border-color': 'var(--colors-neutral-line-10)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-10)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-10)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-10)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + } + }, + { + label: '警告', + custom: false, + type: 'warning', + default: { + label: '默认常规', + token: '--button-warning-default-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-11)', + 'bg-color': 'var(--colors-warning-5)', + 'border': { + 'top-border-color': 'var(--colors-warning-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-warning-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-warning-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-warning-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + hover: { + label: '默认悬浮', + token: '--button-warning-hover-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-11)', + 'bg-color': 'var(--colors-warning-6)', + 'border': { + 'top-border-color': 'var(--colors-warning-6)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-warning-6)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-warning-6)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-warning-6)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + active: { + label: '默认点击', + token: '--button-warning-active-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-11)', + 'bg-color': 'var(--colors-warning-4)', + 'border': { + 'top-border-color': 'var(--colors-warning-4)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-warning-4)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-warning-4)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-warning-4)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + disabled: { + label: '默认禁用', + token: '--button-warning-disabled-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-6)', + 'bg-color': 'var(--colors-neutral-fill-10)', + 'border': { + 'top-border-color': 'var(--colors-neutral-line-10)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-10)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-10)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-10)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + } + }, + { + label: '危险', + custom: false, + type: 'danger', + default: { + label: '默认常规', + token: '--button-danger-default-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-11)', + 'bg-color': 'var(--colors-error-5)', + 'border': { + 'top-border-color': 'var(--colors-error-5)', + 'top-border-width': 'var(--borders-width-1)', + 'top-border-style': 'var(--borders-style-1)', + 'right-border-color': 'var(--colors-error-5)', + 'right-border-width': 'var(--borders-width-1)', + 'right-border-style': 'var(--borders-style-1)', + 'bottom-border-color': 'var(--colors-error-5)', + 'bottom-border-width': 'var(--borders-width-1)', + 'bottom-border-style': 'var(--borders-style-1)', + 'left-border-color': 'var(--colors-error-5)', + 'left-border-width': 'var(--borders-width-1)', + 'left-border-style': 'var(--borders-style-1)' + } + } + }, + hover: { + label: '默认悬浮', + token: '--button-danger-hover-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-11)', + 'bg-color': 'var(--colors-error-6)', + 'border': { + 'top-border-color': 'var(--colors-error-6)', + 'top-border-width': 'var(--borders-width-1)', + 'top-border-style': 'var(--borders-style-1)', + 'right-border-color': 'var(--colors-error-6)', + 'right-border-width': 'var(--borders-width-1)', + 'right-border-style': 'var(--borders-style-1)', + 'bottom-border-color': 'var(--colors-error-6)', + 'bottom-border-width': 'var(--borders-width-1)', + 'bottom-border-style': 'var(--borders-style-1)', + 'left-border-color': 'var(--colors-error-6)', + 'left-border-width': 'var(--borders-width-1)', + 'left-border-style': 'var(--borders-style-1)' + } + } + }, + active: { + label: '默认点击', + token: '--button-danger-active-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-11)', + 'bg-color': 'var(--colors-error-4)', + 'border': { + 'top-border-color': 'var(--colors-error-4)', + 'top-border-width': 'var(--borders-width-1)', + 'top-border-style': 'var(--borders-style-1)', + 'right-border-color': 'var(--colors-error-4)', + 'right-border-width': 'var(--borders-width-1)', + 'right-border-style': 'var(--borders-style-1)', + 'bottom-border-color': 'var(--colors-error-4)', + 'bottom-border-width': 'var(--borders-width-1)', + 'bottom-border-style': 'var(--borders-style-1)', + 'left-border-color': 'var(--colors-error-4)', + 'left-border-width': 'var(--borders-width-1)', + 'left-border-style': 'var(--borders-style-1)' + } + } + }, + disabled: { + label: '默认禁用', + token: '--button-danger-disabled-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-6)', + 'bg-color': 'var(--colors-neutral-fill-10)', + 'border': { + 'top-border-color': 'var(--colors-neutral-line-10)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-10)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-10)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-10)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + } + }, + { + label: '浅色', + custom: false, + type: 'light', + default: { + label: '默认常规', + token: '--button-light-default-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-brand-10)', + 'border': { + 'top-border-color': 'var(--colors-brand-10)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-10)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-10)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-10)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + hover: { + label: '默认悬浮', + token: '--button-light-hover-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-brand-9)', + 'border': { + 'top-border-color': 'var(--colors-brand-9)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-9)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-9)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-9)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + active: { + label: '默认点击', + token: '--button-light-active-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-brand-7)', + 'border': { + 'top-border-color': 'var(--colors-brand-7)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-7)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-7)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-7)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + disabled: { + label: '默认禁用', + token: '--button-light-disabled-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-6)', + 'bg-color': 'var(--colors-neutral-fill-10)', + 'border': { + 'top-border-color': 'var(--colors-neutral-line-10)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-10)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-10)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-10)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + } + }, + { + label: '深色', + custom: false, + type: 'dark', + default: { + label: '默认常规', + token: '--button-dark-default-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-11)', + 'bg-color': 'var(--colors-neutral-fill-3)', + 'border': { + 'top-border-color': 'var(--colors-neutral-line-3)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-3)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-3)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-3)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + hover: { + label: '默认悬浮', + token: '--button-dark-hover-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-11)', + 'bg-color': 'var(--colors-neutral-fill-4)', + 'border': { + 'top-border-color': 'var(--colors-neutral-line-4)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-4)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-4)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-4)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + active: { + label: '默认点击', + token: '--button-dark-active-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-11)', + 'bg-color': 'var(--colors-neutral-fill-5)', + 'border': { + 'top-border-color': 'var(--colors-neutral-line-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + disabled: { + label: '默认禁用', + token: '--button-dark-disabled-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-6)', + 'bg-color': 'var(--colors-neutral-fill-10)', + 'border': { + 'top-border-color': 'var(--colors-neutral-line-10)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-10)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-10)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-10)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + } + }, + { + label: '链接', + custom: false, + type: 'link', + default: { + label: '默认常规', + token: '--button-link-default-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-link-5)', + 'bg-color': 'transparent', + 'border': { + 'top-border-color': 'transparent', + 'top-border-width': 'var(--borders-width-1)', + 'top-border-style': 'var(--borders-style-1)', + 'right-border-color': 'transparent', + 'right-border-width': 'var(--borders-width-1)', + 'right-border-style': 'var(--borders-style-1)', + 'bottom-border-color': 'transparent', + 'bottom-border-width': 'var(--borders-width-1)', + 'bottom-border-style': 'var(--borders-style-1)', + 'left-border-color': 'transparent', + 'left-border-width': 'var(--borders-width-1)', + 'left-border-style': 'var(--borders-style-1)' + } + } + }, + hover: { + label: '默认悬浮', + token: '--button-link-hover-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-link-6)', + 'bg-color': 'transparent', + 'border': { + 'top-border-color': 'transparent', + 'top-border-width': 'var(--borders-width-1)', + 'top-border-style': 'var(--borders-style-1)', + 'right-border-color': 'transparent', + 'right-border-width': 'var(--borders-width-1)', + 'right-border-style': 'var(--borders-style-1)', + 'bottom-border-color': 'transparent', + 'bottom-border-width': 'var(--borders-width-1)', + 'bottom-border-style': 'var(--borders-style-1)', + 'left-border-color': 'transparent', + 'left-border-width': 'var(--borders-width-1)', + 'left-border-style': 'var(--borders-style-1)' + } + } + }, + active: { + label: '默认点击', + token: '--button-link-active-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-link-4)', + 'bg-color': 'transparent', + 'border': { + 'top-border-color': 'transparent', + 'top-border-width': 'var(--borders-width-1)', + 'top-border-style': 'var(--borders-style-1)', + 'right-border-color': 'transparent', + 'right-border-width': 'var(--borders-width-1)', + 'right-border-style': 'var(--borders-style-1)', + 'bottom-border-color': 'transparent', + 'bottom-border-width': 'var(--borders-width-1)', + 'bottom-border-style': 'var(--borders-style-1)', + 'left-border-color': 'transparent', + 'left-border-width': 'var(--borders-width-1)', + 'left-border-style': 'var(--borders-style-1)' + } + } + }, + disabled: { + label: '默认禁用', + token: '--button-link-disabled-', + body: { + 'shadow': 'var(--shadows-shadow-none)', + 'font-color': 'var(--colors-neutral-text-6)', + 'bg-color': 'transparent', + 'border': { + 'top-border-color': 'transparent', + 'top-border-width': 'var(--borders-width-1)', + 'top-border-style': 'var(--borders-style-1)', + 'right-border-color': 'transparent', + 'right-border-width': 'var(--borders-width-1)', + 'right-border-style': 'var(--borders-style-1)', + 'bottom-border-color': 'transparent', + 'bottom-border-width': 'var(--borders-width-1)', + 'bottom-border-style': 'var(--borders-style-1)', + 'left-border-color': 'transparent', + 'left-border-width': 'var(--borders-width-1)', + 'left-border-style': 'var(--borders-style-1)' + } + } + } + } + ], + size: [ + { + label: '默认', + type: 'default', + custom: false, + token: '--button-size-default-', + body: { + 'size': { + height: 'var(--sizes-base-16)', + minWidth: 'var(--sizes-size-1)' + }, + 'font': { + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-7)', + paddingRight: 'var(--sizes-size-7)', + marginTop: 'var(--sizes-size-0)', + marginBottom: 'var(--sizes-size-0)', + marginLeft: 'var(--sizes-size-0)', + marginRight: 'var(--sizes-size-0)' + }, + 'icon-size': 'var(--sizes-size-8)', + 'icon-margin': 'var(--sizes-size-3)', + 'border': { + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + } + } + }, + { + label: '极小', + type: 'xs', + custom: false, + token: '--button-size-xs-', + body: { + 'size': { + height: 'var(--sizes-base-11)', + minWidth: 'var(--sizes-size-1)' + }, + 'font': { + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-2)', + paddingBottom: 'var(--sizes-size-2)', + paddingLeft: 'var(--sizes-size-3)', + paddingRight: 'var(--sizes-size-3)', + marginTop: 'var(--sizes-size-0)', + marginBottom: 'var(--sizes-size-0)', + marginLeft: 'var(--sizes-size-0)', + marginRight: 'var(--sizes-size-0)' + }, + 'icon-size': 'var(--sizes-size-8)', + 'icon-margin': 'var(--sizes-size-3)', + 'border': { + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + } + } + }, + { + label: '小', + type: 'sm', + custom: false, + token: '--button-size-sm-', + body: { + 'size': { + height: 'var(--sizes-base-15)', + minWidth: 'var(--sizes-size-1)' + }, + 'font': { + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)', + marginTop: 'var(--sizes-size-0)', + marginBottom: 'var(--sizes-size-0)', + marginLeft: 'var(--sizes-size-0)', + marginRight: 'var(--sizes-size-0)' + }, + 'icon-size': 'var(--sizes-size-8)', + 'icon-margin': 'var(--sizes-size-3)', + 'border': { + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + } + } + }, + { + label: '中等', + type: 'md', + custom: false, + token: '--button-size-md-', + body: { + 'size': { + height: 'var(--sizes-base-16)', + minWidth: 'var(--sizes-size-1)' + }, + 'font': { + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-7)', + paddingRight: 'var(--sizes-size-7)', + marginTop: 'var(--sizes-size-0)', + marginBottom: 'var(--sizes-size-0)', + marginLeft: 'var(--sizes-size-0)', + marginRight: 'var(--sizes-size-0)' + }, + 'icon-size': 'var(--sizes-size-8)', + 'icon-margin': 'var(--sizes-size-3)', + 'border': { + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + } + } + }, + { + label: '大', + type: 'lg', + custom: false, + token: '--button-size-lg-', + body: { + 'size': { + height: 'var(--sizes-base-19)', + minWidth: 'var(--sizes-size-1)' + }, + 'font': { + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-6)', + paddingBottom: 'var(--sizes-size-6)', + paddingLeft: 'var(--sizes-size-9)', + paddingRight: 'var(--sizes-size-9)', + marginTop: 'var(--sizes-size-0)', + marginBottom: 'var(--sizes-size-0)', + marginLeft: 'var(--sizes-size-0)', + marginRight: 'var(--sizes-size-0)' + }, + 'icon-size': 'var(--sizes-size-8)', + 'icon-margin': 'var(--sizes-size-3)', + 'border': { + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + } + } + } + ] + }, + transfer1: { + base: { + label: '基础配置', + token: '--transfer-base-', + body: { + 'title-bg': 'var(--colors-neutral-fill-10)', + 'title-font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + 'content-font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-2)', + 'bottom-left-border-radius': 'var(--borders-radius-2)' + }, + 'header-padding-and-margin': { + paddingTop: 'var(--sizes-size-5)', + paddingBottom: 'var(--sizes-size-5)', + paddingLeft: 'var(--sizes-size-8)', + paddingRight: 'var(--sizes-size-8)' + }, + 'body-padding-and-margin': { + paddingTop: 'var(--sizes-size-0)', + paddingBottom: 'var(--sizes-size-0)', + paddingLeft: 'var(--sizes-size-0)', + paddingRight: 'var(--sizes-size-0)' + }, + 'option-padding-and-margin': { + paddingTop: 'var(--sizes-size-5)', + paddingBottom: 'var(--sizes-size-5)', + paddingLeft: 'var(--sizes-size-8)', + paddingRight: 'var(--sizes-size-8)', + marginTop: 'var(--sizes-size-0)', + marginBottom: 'var(--sizes-size-0)', + marginLeft: 'var(--sizes-size-0)', + marginRight: 'var(--sizes-size-0)' + }, + 'shadow': 'var(--shadows-shadow-none)' + } + }, + search: { + label: '搜索框', + token: '--transfer-search-', + body: { + 'font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + 'placeholder-font-color': 'var(--colors-neutral-text-6)', + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'border-hover-color': 'var(--colors-brand-4)', + 'border-active-color': 'var(--colors-brand-4)', + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-6)', + paddingBottom: 'var(--sizes-size-6)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'input-padding-and-margin': { + paddingTop: 'var(--sizes-size-4)', + paddingBottom: 'var(--sizes-size-4)', + paddingLeft: 'var(--sizes-size-7)', + paddingRight: 'var(--sizes-size-7)' + }, + 'shadow': 'var(--shadows-shadow-none)' + } + }, + group: { + label: '分组', + token: '--transfer-group-', + body: { + font: { + color: 'var(--colors-neutral-text-5)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + } + } + }, + table: { + label: '表格形式', + token: '--transfer-table-', + body: { + 'header-padding-and-margin': { + paddingTop: 'var(--sizes-size-5)', + paddingBottom: 'var(--sizes-size-5)', + paddingLeft: 'var(--sizes-size-7)', + paddingRight: 'var(--sizes-size-7)' + }, + 'option-padding-and-margin': { + paddingTop: 'var(--sizes-size-4)', + paddingBottom: 'var(--sizes-size-5)', + paddingLeft: 'var(--sizes-size-7)', + paddingRight: 'var(--sizes-size-7)' + }, + 'last-paddingRight': 'var(--sizes-base-9)' + } + }, + tree: { + label: '树形式', + token: '--transfer-tree-', + body: { + 'bg-hover-color': 'var(--colors-neutral-fill-10)', + 'bg-active-color': 'var(--colors-brand-10)', + 'border': { + 'top-right-border-radius': 'var(--borders-radius-2)', + 'top-left-border-radius': 'var(--borders-radius-2)', + 'bottom-right-border-radius': 'var(--borders-radius-2)', + 'bottom-left-border-radius': 'var(--borders-radius-2)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-7)', + paddingRight: 'var(--sizes-size-7)', + marginTop: 'var(--sizes-size-0)', + marginBottom: 'var(--sizes-size-2)', + marginLeft: 'var(--sizes-size-0)', + marginRight: 'var(--sizes-size-0)' + }, + 'option-padding-and-margin': { + paddingTop: 'var(--sizes-size-0)', + paddingBottom: 'var(--sizes-size-0)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-0)', + marginTop: 'var(--sizes-size-0)', + marginBottom: 'var(--sizes-size-4)', + marginLeft: 'var(--sizes-size-0)', + marginRight: 'var(--sizes-size-0)' + } + } + }, + chained: { + label: '级联选择', + token: '--transfer-chained-', + body: { + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-5)', + paddingBottom: 'var(--sizes-size-5)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)', + marginTop: 'var(--sizes-size-0)', + marginBottom: 'var(--sizes-size-0)', + marginLeft: 'var(--sizes-size-0)', + marginRight: 'var(--sizes-size-0)' + } + } + } + }, + input: { + base: { + default: { + label: '默认', + type: 'default', + default: { + label: '常规', + token: '--input-default-default-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'font': { + color: 'var(--colors-neutral-fill-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'bg-color': 'var(--colors-neutral-fill-11)' + } + }, + hover: { + label: '悬浮', + token: '--input-default-hover-', + body: { + 'border': { + 'top-border-color': 'var(--colors-brand-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'bg-color': 'var(--colors-neutral-fill-11)' + } + }, + active: { + label: '点击', + token: '--input-default-active-', + body: { + 'border': { + 'top-border-color': 'var(--colors-brand-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'shadow': 'var(--shadows-shadow-none)', + 'bg-color': 'var(--colors-neutral-fill-11)' + } + }, + disabled: { + label: '禁用', + token: '--input-default-disabled-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'bg-color': 'var(--colors-neutral-fill-10)' + } + } + }, + clearable: { + label: '可清除', + token: '--input-clearable-', + body: { + 'icon': '', + 'icon-size': 'var(--sizes-size-8)', + 'default-color': 'var(--colors-brand-5)', + 'hover-color': 'var(--colors-neutral-text-4)', + 'active-color': 'var(--colors-neutral-text-4)' + } + }, + count: { + label: '字数统计', + single: { + label: '单行输入框', + token: '--input-count-single-', + body: { + font: { + fontSize: 'var(--fonts-size-7)', + color: 'var(--colors-neutral-text-6)' + } + } + }, + multi: { + label: '多行输入框', + token: '--input-count-multi-', + body: { + font: { + fontSize: 'var(--fonts-size-7)', + color: 'var(--colors-neutral-text-5)' + } + } + } + }, + prefix: { + label: '前缀/后缀', + token: '--input-prefix-', + body: { + font: { + fontSize: 'var(--fonts-size-7)', + color: 'var(--colors-neutral-text-1)' + } + } + }, + password: { + label: '密码输入框', + token: '--input-password-', + body: { + 'invisible-icon': '', + 'invisible-icon-size': 'var(--sizes-size-8)', + 'invisible-icon-color': 'var(--colors-neutral-text-5)', + 'view-icon': '', + 'view-icon-size': 'var(--sizes-size-8)', + 'view-icon-color': 'var(--colors-neutral-text-5)' + } + }, + textarea: { + label: '多行输入框', + token: '--input-textarea-', + body: { + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-base-11)' + } + } + }, + addon: { + label: '附加组件', + text: { + label: '文本', + token: '--input-addon-text-', + body: { + 'bg-color-default': 'var(--colors-neutral-fill-11)', + 'bg-color-hover': 'var(--colors-neutral-fill-11)', + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + } + } + } + } + } + }, + link: { + base: { + default: { + token: '--link-', + body: { + 'font': { + 'fontSize': 'var(--fonts-size-7)', + 'color': 'var(--colors-link-5)', + 'fontWeight': 'var(--fonts-weight-6)', + 'text-decoration': 'none', + 'font-style': 'none' + }, + 'bg-color': 'transparent' + } + }, + hover: { + token: '--link-onHover-', + body: { + 'font': { + 'fontSize': 'var(--fonts-size-7)', + 'color': 'var(--colors-link-6)', + 'fontWeight': 'var(--fonts-weight-6)', + 'text-decoration': 'none', + 'font-style': 'none' + }, + 'bg-color': 'transparent' + } + }, + click: { + token: '--link-onClick-', + body: { + 'font': { + 'fontSize': 'var(--fonts-size-7)', + 'color': 'var(--colors-link-4)', + 'fontWeight': 'var(--fonts-weight-6)', + 'text-decoration': 'none', + 'font-style': 'none' + }, + 'bg-color': 'transparent' + } + }, + disabled: { + token: '--link-disabled-', + body: { + 'font': { + 'fontSize': 'var(--fonts-size-7)', + 'color': 'var(--colors-neutral-text-6)', + 'fontWeight': 'var(--fonts-weight-6)', + 'text-decoration': 'none', + 'font-style': 'none' + }, + 'bg-color': 'transparent' + } + } + }, + icon: { + token: '--link-icon-', + body: { + size: 'var(--sizes-size-8)', + margin: 'var(--sizes-size-3)' + } + } + }, + form: { + item: { + default: { + item: { + token: '--Form-item-', + body: { + gap: 'var(--sizes-base-12)' + } + }, + label: { + token: '--Form-item-', + body: { + font: { + color: 'var(--colors-neutral-text-4)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + } + } + }, + star: { + token: '--Form-item-star-', + body: { + color: 'var(--colors-error-5)', + size: 'var(--sizes-size-7)' + } + }, + description: { + token: '--Form-description-', + body: { + font: { + color: 'var(--colors-neutral-text-5)', + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + gap: 'var(--sizes-size-3)' + } + } + }, + error: { + item: { + token: '--Form-item-onError-', + body: { + color: 'var(--colors-error-5)', + borderColor: 'var(--colors-error-5)', + bg: 'var(--colors-neutral-fill-11)' + } + }, + feedBack: { + token: '--Form-feedBack-', + body: { + font: { + color: 'var(--colors-error-5)', + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + gap: 'var(--sizes-size-3)' + } + } + } + }, + mode: { + default: { + token: '--Form-mode-default-', + body: { + labelGap: 'var(--sizes-size-5)', + width: '100%' + } + }, + horizontal: { + label: { + token: '--Form--horizontal-label-', + body: { + gap: 'var(--sizes-base-8)', + widthBase: 'var(--sizes-base-49)', + widthXs: 'var(--sizes-base-25)', + widthSm: 'var(--sizes-base-35)', + widthMd: '8.75rem', + widthLg: '12.5rem' + } + }, + value: { + token: '--Form--horizontal-value-', + body: { + size: { + maxWidth: '100%', + minWidth: 'var(--sizes-size-0)' + } + } + } + }, + inline: { + item: { + token: '--Form-mode-inline-item-', + body: { + gap: 'var(--sizes-base-8)' + } + }, + label: { + token: '--Form-mode-inline-label-', + body: { + gap: 'var(--sizes-base-8)' + } + } + } + } + }, + inputNumber: { + base: { + base: { + label: '基础样式', + type: 'base', + default: { + label: '默认', + token: '--inputNumber-base-default-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'bg-color': 'var(--colors-neutral-fill-11)', + 'step-bg': 'var(--colors-neutral-fill-11)', + 'icon-size': 'var(--fonts-size-8)', + 'icon-color': 'var(--colors-neutral-text-2)' + } + }, + hover: { + label: '悬浮', + token: '--inputNumber-base-hover-', + body: { + 'border': { + 'top-border-color': 'var(--colors-brand-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'bg-color': 'var(--colors-neutral-fill-11)', + 'step-bg-color': 'var(--colors-neutral-fill-11)', + 'icon-fontSize': 'var(--fonts-size-8)', + 'icon-color': 'var(--colors-brand-5)' + } + }, + active: { + label: '点击', + token: '--inputNumber-base-active-', + body: { + 'border': { + 'top-border-color': 'var(--colors-brand-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'shadow': 'var(--shadows-shadow-none)', + 'bg-color': 'var(--colors-neutral-fill-11)', + 'step-bg-color': 'var(--colors-neutral-fill-11)', + 'icon-size': 'var(--fonts-size-8)', + 'icon-color': 'var(--colors-brand-5)' + } + }, + disabled: { + label: '禁用', + token: '--inputNumber-base-disabled-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'bg-color': 'var(--colors-neutral-fill-10)', + 'step-bg-color': 'var(--colors-neutral-fill-11)', + 'icon-size': 'var(--fonts-size-8)', + 'icon-color': 'var(--colors-brand-5)' + } + } + }, + enhance: { + label: '加强版', + type: 'enhance', + default: { + label: '默认', + token: '--inputNumber-enhance-default-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-0)', + paddingBottom: 'var(--sizes-size-0)', + paddingLeft: 'var(--sizes-size-0)', + paddingRight: 'var(--sizes-size-0)' + }, + 'bg-color': 'var(--colors-neutral-fill-11)' + } + }, + hover: { + label: '悬浮', + token: '--inputNumber-enhance-hover-', + body: { + 'border': { + 'top-border-color': 'var(--colors-brand-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-0)', + paddingBottom: 'var(--sizes-size-0)', + paddingLeft: 'var(--sizes-size-0)', + paddingRight: 'var(--sizes-size-0)' + }, + 'bg-color': 'var(--colors-neutral-fill-11)' + } + }, + active: { + label: '点击', + token: '--inputNumber-enhance-active-', + body: { + 'border': { + 'top-border-color': 'var(--colors-brand-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-0)', + paddingBottom: 'var(--sizes-size-0)', + paddingLeft: 'var(--sizes-size-0)', + paddingRight: 'var(--sizes-size-0)' + }, + 'bg-color': 'var(--colors-neutral-fill-11)', + 'shadow': 'var(--shadows-shadow-none)' + } + }, + disabled: { + label: '禁用', + token: '--inputNumber-enhance-disabled-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-0)', + paddingBottom: 'var(--sizes-size-0)', + paddingLeft: 'var(--sizes-size-0)', + paddingRight: 'var(--sizes-size-0)' + }, + 'bg-color': 'var(--colors-neutral-fill-10)' + } + }, + leftIcon: { + default: { + label: '默认', + token: '--inputNumber-enhance-leftIcon-default-', + body: { + 'icon': '', + 'size': { + height: 'var(--sizes-size-7)', + width: 'var(--sizes-size-7)' + }, + 'color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-neutral-fill-11)' + } + }, + hover: { + label: '默认', + token: '--inputNumber-enhance-leftIcon-hover-', + body: { + 'size': { + height: 'var(--sizes-size-7)', + width: 'var(--sizes-size-7)' + }, + 'color': 'var(--colors-brand-5)', + 'bg-color': 'var(--colors-neutral-fill-11)' + } + }, + active: { + label: '默认', + token: '--inputNumber-enhance-leftIcon-active-', + body: { + 'size': { + height: 'var(--sizes-size-7)', + width: 'var(--sizes-size-7)' + }, + 'color': 'var(--colors-brand-5)', + 'bg-color': 'var(--colors-neutral-fill-11)' + } + }, + disabled: { + label: '默认', + token: '--inputNumber-enhance-leftIcon-disabled-', + body: { + 'size': { + height: 'var(--sizes-size-7)', + width: 'var(--sizes-size-7)' + }, + 'color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-neutral-fill-11)' + } + } + }, + rightIcon: { + default: { + label: '默认', + token: '--inputNumber-enhance-rightIcon-default-', + body: { + 'icon': '', + 'size': { + height: 'var(--sizes-size-7)', + width: 'var(--sizes-size-7)' + }, + 'color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-neutral-fill-11)' + } + }, + hover: { + label: '默认', + token: '--inputNumber-enhance-rightIcon-hover-', + body: { + 'size': { + height: 'var(--sizes-size-7)', + width: 'var(--sizes-size-7)' + }, + 'color': 'var(--colors-brand-5)', + 'bg-color': 'var(--colors-neutral-fill-11)' + } + }, + active: { + label: '默认', + token: '--inputNumber-enhance-rightIcon-active-', + body: { + 'size': { + height: 'var(--sizes-size-7)', + width: 'var(--sizes-size-7)' + }, + 'color': 'var(--colors-brand-5)', + 'bg-color': 'var(--colors-neutral-fill-11)' + } + }, + disabled: { + label: '默认', + token: '--inputNumber-enhance-rightIcon-disabled-', + body: { + 'size': { + height: 'var(--sizes-size-7)', + width: 'var(--sizes-size-7)' + }, + 'color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-neutral-fill-11)' + } + } + } + }, + unit: { + label: '带单位选择', + width: { + label: '单位选择器', + token: '--inputNumber-base-default-unit-', + body: { + width: 'var(--sizes-base-28)' + } + } + } + } + }, + inputRange: { + base: { + track: { + token: '--InputRange-track-', + body: { + 'bg': 'var(--colors-neutral-fill-8)', + 'height': 'var(--sizes-size-4)', + 'border-radius': 'var(--sizes-size-3)' + } + }, + trackActive: { + token: '--InputRange-track-onActive-', + body: { + bg: 'var(--colors-brand-5)' + } + }, + handle: { + token: '--InputRange-handle-', + body: { + size: { + height: 'var(--sizes-size-9)', + width: 'var(--sizes-size-9)' + }, + bg: 'var(--colors-neutral-fill-11)', + border: { + 'top-border-color': 'var(--colors-brand-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-7)', + 'top-left-border-radius': 'var(--borders-radius-7)', + 'bottom-right-border-radius': 'var(--borders-radius-7)', + 'bottom-left-border-radius': 'var(--borders-radius-7)' + } + } + }, + handleIcon: { + token: '--InputRange-handle-icon-', + body: { + size: { + height: 'var(--sizes-size-5)', + width: 'var(--sizes-size-5)' + }, + color: 'var(--colors-brand-9)' + } + } + }, + disabled: { + trackActive: { + token: '--InputRange-track-onActive-onDisabled-', + body: { + bg: 'var(--colors-neutral-fill-6)' + } + }, + handle: { + token: '--InputRange-handle-onDisabled-', + body: { + 'border-color': 'var(--colors-neutral-fill-7)', + 'bg': 'var(--colors-neutral-fill-11)' + } + }, + handleIcon: { + token: '--InputRange-handle-icon-onDisabled-', + body: { + color: 'var(--colors-neutral-fill-7)' + } + } + }, + dot: { + token: '--InputRange-track-dot-', + body: { + size: { + height: 'var(--sizes-size-4)', + width: 'var(--sizes-size-4)' + }, + bg: 'var(--colors-neutral-fill-11)' + } + }, + marks: { + token: '--InputRange-marks-', + body: { + font: { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + marginTop: 'var(--sizes-size-0)' + } + }, + label: { + token: '--InputRange-label-', + body: { + font: { + color: 'var(--colors-neutral-fill-11)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + padding: { + paddingTop: 'var(--sizes-size-5)', + paddingBottom: 'var(--sizes-size-5)', + paddingLeft: 'var(--sizes-size-5)', + paddingRight: 'var(--sizes-size-5)' + }, + bg: 'var(--colors-neutral-fill-1)', + border: { + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + } + } + }, + input: { + token: '--InputRange-input-', + body: { + width: 'var(--sizes-base-40)', + margin: { + marginTop: 'var(--sizes-size-0)', + marginBottom: 'var(--sizes-size-0)', + marginLeft: 'var(--sizes-size-5)', + marginRight: 'var(--sizes-size-5)' + } + } + }, + clearIcon: { + token: '--InputRange-clearIcon-', + body: { + size: { + height: 'var(--sizes-size-7)', + width: 'var(--sizes-size-7)' + }, + color: 'var(--colors-neutral-text-4)', + hoverColor: 'var(--colors-brand-5)' + } + } + }, + progress: { + base: { + line: { + token: '--Progress-line-', + body: { + 'bg': 'var(--colors-neutral-fill-8)', + 'theme-color': 'var(--colors-brand-5)', + 'font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-8)' + } + } + }, + circle: { + token: '--Progress-circle-', + body: { + 'bg': 'var(--colors-neutral-fill-8)', + 'theme-color': 'var(--colors-brand-5)', + 'font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-8)' + } + } + } + } + }, + radio: { + base: { + default: { + label: '默认', + type: 'default', + default: { + label: '常规', + token: '--radio-default-default-', + body: { + 'color': 'var(--colors-neutral-text-8)', + 'text-color': 'var(--colors-neutral-text-1)', + 'bg-color': 'var(--colors-neutral-fill-11)', + 'font': { + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + 'point-size': 'var(--sizes-size-9)', + 'point-inner-size': 'var(--sizes-size-5)', + 'padding-and-margin': { + marginTop: 'var(--sizes-size-0)', + marginBottom: 'var(--sizes-size-4)', + marginLeft: 'var(--sizes-size-0)', + marginRight: 'var(--sizes-size-9)' + }, + 'distance': 'var(--sizes-size-5)' + } + }, + hover: { + label: '悬浮', + token: '--radio-default-hover-', + body: { + 'color': 'var(--colors-brand-5)', + 'text-color': 'var(--colors-neutral-text-1)', + 'bg-color': 'var(--colors-neutral-fill-11)' + } + }, + active: { + label: '点击', + token: '--radio-default-active-', + body: { + 'color': 'var(--colors-brand-5)', + 'text-color': 'var(--colors-neutral-text-1)', + 'bg-color': 'var(--colors-neutral-fill-11)' + } + }, + disabled: { + label: '禁用', + token: '--radio-default-disabled-', + body: { + 'color': 'var(--colors-neutral-text-6)', + 'text-color': 'var(--colors-neutral-text-6)', + 'bg-color': 'var(--colors-neutral-fill-8)' + } + } + }, + vertical: { + label: '列显示', + token: '--radio-default-vertical-', + body: { + 'padding-and-margin': { + marginTop: 'var(--sizes-size-0)', + marginBottom: 'var(--sizes-size-4)', + marginLeft: 'var(--sizes-size-0)', + marginRight: 'var(--sizes-size-5)' + } + } + } + } + }, + switch: { + base: { + default: { + label: '默认', + type: 'default', + off: { + label: '关', + token: '--switch-default-off-', + body: { + 'bg-color': 'var(--colors-neutral-fill-7)', + 'hover-bg-color': 'var(--colors-neutral-fill-6)', + 'slider-color': 'var(--colors-neutral-fill-11)' + } + }, + on: { + label: '开', + token: '--switch-default-on-', + body: { + 'bg-color': 'var(--colors-brand-5)', + 'hover-bg-color': 'var(--colors-brand-4)', + 'slider-color': 'var(--colors-neutral-fill-11)' + } + } + }, + option: { + label: '开关说明', + token: '--switch-option-', + body: { + 'font': { + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)', + color: 'var(--colors-neutral-text-1)' + }, + 'padding-and-margin': { + marginTop: 'var(--sizes-size-0)', + marginBottom: 'var(--sizes-size-0)', + marginLeft: 'var(--sizes-size-5)', + marginRight: 'var(--sizes-size-0)' + } + } + }, + text: { + label: '开关状态文本', + off: { + label: '关', + token: '--switch-text-off-', + body: { + 'font': { + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-3)', + color: 'var(--colors-neutral-text-11)' + }, + 'padding-and-margin': { + marginTop: 'var(--sizes-size-0)', + marginBottom: 'var(--sizes-size-0)', + marginLeft: 'var(--sizes-base-12)', + marginRight: 'var(--sizes-size-5)' + } + } + }, + on: { + label: '开', + token: '--switch-text-on-', + body: { + 'font': { + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-3)', + color: 'var(--colors-neutral-text-11)' + }, + 'padding-and-margin': { + marginTop: 'var(--sizes-size-0)', + marginBottom: 'var(--sizes-size-0)', + marginLeft: 'var(--sizes-base-4)', + marginRight: 'var(--sizes-base-12)' + } + } + } + } + }, + size: { + default: { + label: '常规', + token: '--switch-size-default-', + body: { + 'size': { + height: 'var(--sizes-base-10)', + minWidth: 'var(--sizes-base-22)' + }, + 'slider-size': { + width: 'var(--sizes-size-9)' + }, + 'slider-margin': 'var(--sizes-size-2)', + 'border': { + 'top-right-border-radius': 'var(--sizes-base-15)', + 'top-left-border-radius': 'var(--sizes-base-15)', + 'bottom-right-border-radius': 'var(--sizes-base-15)', + 'bottom-left-border-radius': 'var(--sizes-base-15)' + } + } + }, + sm: { + label: '小', + token: '--switch-size-sm-', + body: { + 'size': { + height: 'var(--sizes-size-9)', + minWidth: 'var(--sizes-base-14)' + }, + 'slider-size': { + width: 'var(--sizes-size-7)' + }, + 'slider-margin': 'var(--sizes-size-2)', + 'border': { + 'top-right-border-radius': 'var(--sizes-base-15)', + 'top-left-border-radius': 'var(--sizes-base-15)', + 'bottom-right-border-radius': 'var(--sizes-base-15)', + 'bottom-left-border-radius': 'var(--sizes-base-15)' + } + } + } + } + }, + checkbox: { + checkbox: { + normal: { + default: { + label: '常规', + token: '--checkbox-checkbox-default-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'text-color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-neutral-fill-11)', + 'size': { + height: 'var(--sizes-base-8)' + }, + 'font': { + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + } + } + }, + hover: { + label: '悬浮', + token: '--checkbox-checkbox-hover-', + body: { + 'border': { + 'top-border-color': 'var(--colors-brand-6)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-6)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-6)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-6)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'text-color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-neutral-fill-11)', + 'size': { + height: 'var(--sizes-base-8)' + } + } + }, + active: { + label: '点击', + token: '--checkbox-checkbox-active-', + body: { + 'border': { + 'top-border-color': 'var(--colors-brand-4)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-4)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-4)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-4)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'shadow': 'var(--shadows-shadow-none)', + 'text-color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-neutral-fill-11)', + 'size': { + height: 'var(--sizes-base-8)' + } + } + }, + disabled: { + label: '禁用', + token: '--checkbox-checkbox-disabled-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'text-color': 'var(--colors-neutral-text-6)', + 'bg-color': 'var(--colors-neutral-fill-10)', + 'size': { + height: 'var(--sizes-base-8)' + } + } + } + }, + checked: { + default: { + label: '常规', + token: '--checkbox-checked-default-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'text-color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-brand-5)', + 'size': { + height: 'var(--sizes-base-8)' + } + } + }, + hover: { + label: '悬浮', + token: '--checkbox-checked-hover-', + body: { + 'border': { + 'top-border-color': 'var(--colors-brand-6)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-6)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-6)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-6)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'text-color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-brand-6)', + 'size': { + height: 'var(--sizes-base-8)' + } + } + }, + active: { + label: '点击', + token: '--checkbox-checked-active-', + body: { + 'border': { + 'top-border-color': 'var(--colors-brand-4)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-4)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-4)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-4)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'shadow': 'var(--shadows-shadow-none)', + 'text-color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-brand-4)', + 'size': { + height: 'var(--sizes-base-8)' + } + } + }, + disabled: { + label: '禁用', + token: '--checkbox-checked-disabled-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'text-color': 'var(--colors-neutral-text-6)', + 'bg-color': 'var(--colors-neutral-fill-10)', + 'size': { + height: 'var(--sizes-base-8)' + } + } + } + } + }, + checkboxes: { + label: '常规', + token: '--checkbox-checkboxes-', + body: { + marginRight: 'var(--sizes-base-8)' + } + } + }, + inputTree: { + base: { + base: { + label: '默认态', + type: 'base', + default: { + label: '默认', + token: '--inputTree-base-default-', + body: { + color: 'var(--colors-neutral-text-2)', + expandColor: 'var(--colors-neutral-text-5)' + } + }, + hover: { + label: '悬浮', + token: '--inputTree-base-hover-', + body: { + color: 'var(--colors-neutral-text-2)', + expandColor: 'var(--colors-neutral-text-5)' + } + }, + active: { + label: '点击', + token: '--inputTree-base-active-', + body: { + color: 'var(--colors-neutral-text-2)', + expandColor: 'var(--colors-neutral-text-5)' + } + }, + disabled: { + label: '禁用', + token: '--inputTree-base-disabled-', + body: { + color: 'var(--colors-neutral-text-6)', + expandColor: 'var(--colors-neutral-text-5)' + } + }, + size: { + label: '尺寸', + token: '--inputTree-base-size-', + body: { + expandMarginRight: 'var(--sizes-size-5)', + nodeMarginRight: 'var(--sizes-size-5)' + } + } + }, + checkboxes: { + label: '复选框', + type: 'checkboxes', + size: { + label: '默认', + token: '--inputTree-checkboxes-size-', + body: { + marginRight: 'var(--sizes-size-5)' + } + } + } + } + }, + listSelect: { + base: { + default: { + label: '常规', + token: '--listSelect-base-default-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-neutral-fill-11)', + 'size': { + height: 'var(--sizes-base-8)' + } + } + }, + hover: { + label: '悬浮', + token: '--listSelect-base-hover-', + body: { + 'border': { + 'top-border-color': 'var(--colors-brand-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-4)', + paddingBottom: 'var(--sizes-size-4)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'color': 'var(--colors-brand-5)', + 'bg-color': 'var(--colors-neutral-fill-11)', + 'size': { + height: 'var(--sizes-base-8)' + } + } + }, + active: { + label: '点击', + token: '--listSelect-base-active-', + body: { + 'border': { + 'top-border-color': 'var(--colors-brand-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-4)', + paddingBottom: 'var(--sizes-size-4)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'shadow': 'var(--shadows-shadow-none)', + 'color': 'var(--colors-brand-5)', + 'bg-color': 'var(--colors-neutral-fill-11)', + 'size': { + height: 'var(--sizes-base-8)' + } + } + }, + disabled: { + label: '禁用', + token: '--listSelect-base-disabled-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-4)', + paddingBottom: 'var(--sizes-size-4)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'color': 'var(--colors-neutral-text-6)', + 'bg-color': 'var(--colors-neutral-fill-10)', + 'size': { + height: 'var(--sizes-base-8)' + } + } + }, + size: { + label: '常规', + token: '--listSelect-base-image-', + body: { + size: { + width: 'var(--sizes-size-1)' + } + } + } + } + }, + inputRating: { + icon: { + token: '--Rating-star-', + body: { + margin: 'var(--sizes-size-5)', + size: 'var(--sizes-base-13)', + icon: '' + } + }, + inactiveColors: { + token: '--Rating-inactive-', + body: { + color: 'var(--colors-neutral-text-9)' + } + }, + activeColors: [ + {value: '#abadb1', id: 2}, + {value: '#787b81', id: 3}, + {value: '#ffa900', id: 5} + ], + text: { + token: '--Rating-text-', + body: { + font: { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + } + } + } + }, + collapse: { + base: { + default: { + label: '默认', + token: '--collapse-default-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'header-padding-and-margin': { + paddingTop: 'var(--sizes-size-9)', + paddingBottom: 'var(--sizes-size-9)', + paddingLeft: 'var(--sizes-size-9)', + paddingRight: 'var(--sizes-size-9)' + }, + 'header-font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + 'header-bg-color': 'var(--colors-neutral-fill-10)', + 'header-hover-bg-color': 'var(--colors-neutral-fill-9)', + 'header-hover-color': 'var(--colors-neutral-text-2)', + 'disabled-header-bg-color': 'var(--colors-neutral-fill-10)', + 'disabled-color': 'var(--colors-neutral-text-6)', + 'content-padding-and-margin': { + paddingTop: 'var(--sizes-size-9)', + paddingBottom: 'var(--sizes-size-9)', + paddingLeft: 'var(--sizes-size-9)', + paddingRight: 'var(--sizes-size-9)' + }, + 'content-font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + 'bg-color': 'var(--colors-neutral-fill-11)' + } + }, + icon: { + label: '图标', + token: '--collapse-icon-', + body: { + icon: '', + size: 'var(--sizes-size-6)', + color: 'var(--colors-neutral-text-5)', + margin: 'var(--sizes-size-5)', + rotate: '90deg' + } + } + } + }, + tabs: { + simple: { + default: { + token: '--Tabs--simple-', + body: { + 'padding': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-9)', + paddingRight: 'var(--sizes-size-9)' + }, + 'split-width': 'var(--borders-width-2)', + 'split-style': 'var(--borders-style-2)', + 'split-color': 'var(--colors-neutral-line-8)', + 'font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + } + } + }, + active: { + token: '--Tabs--simple-active-', + body: { + font: { + color: 'var(--colors-brand-5)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + } + } + }, + hover: { + token: '--Tabs--simple-hover-', + body: { + font: { + color: 'var(--colors-brand-5)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + } + } + }, + disabled: { + token: '--Tabs--simple-disabled-', + body: { + font: { + color: 'var(--colors-neutral-text-6)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + } + } + } + }, + strong: { + default: { + token: '--Tabs--strong-', + body: { + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-5)', + paddingBottom: 'var(--sizes-size-5)', + paddingLeft: 'var(--sizes-size-9)', + paddingRight: 'var(--sizes-size-9)', + marginTop: 'var(--sizes-size-0)', + marginBottom: 'var(--sizes-size-0)', + marginLeft: 'var(--sizes-size-0)', + marginRight: 'var(--sizes-size-5)' + }, + 'bg': 'var(--colors-neutral-fill-11)', + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-1)', + 'bottom-left-border-radius': 'var(--borders-radius-1)' + }, + 'font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + } + } + }, + active: { + token: '--Tabs--strong-active-', + body: { + bg: 'var(--colors-neutral-fill-11)', + border: { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'transparent', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + }, + font: { + color: 'var(--colors-brand-5)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + } + } + }, + hover: { + token: '--Tabs--strong-hover-', + body: { + bg: 'var(--colors-neutral-fill-11)', + border: { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + }, + font: { + color: 'var(--colors-brand-5)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + } + } + }, + disabled: { + token: '--Tabs--strong-disabled-', + body: { + bg: 'var(--colors-neutral-fill-11)', + border: { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + }, + font: { + color: 'var(--colors-neutral-text-6)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + } + } + } + }, + line: { + default: { + token: '--Tabs--line-', + body: { + 'padding': 'var(--sizes-base-16)', + 'border-color': 'var(--colors-neutral-line-8)', + 'border-width': 'var(--borders-width-2)', + 'border-style': 'var(--borders-style-2)', + 'font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + } + } + }, + active: { + token: '--Tabs--line-active-', + body: { + 'font': { + color: 'var(--colors-brand-5)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + 'border-color': 'var(--colors-brand-5)', + 'border-width': 'var(--borders-width-3)', + 'border-style': 'var(--borders-style-2)' + } + }, + hover: { + token: '--Tabs--line-hover-', + body: { + font: { + color: 'var(--colors-brand-5)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + } + } + }, + disabled: { + token: '--Tabs--line-disabled-', + body: { + font: { + color: 'var(--colors-neutral-text-6)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + } + } + } + }, + card: { + default: { + token: '--Tabs--card-', + body: { + 'padding': { + paddingTop: 'var(--sizes-size-4)', + paddingBottom: 'var(--sizes-size-0)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'border-color': 'var(--colors-neutral-line-8)', + 'border-width': 'var(--borders-width-2)', + 'border-style': 'var(--borders-style-2)', + 'bg': 'var(--colors-neutral-fill-10)', + 'font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + 'linkMargin': 'var(--sizes-size-6)', + 'linkPadding': 'var(--sizes-size-6)', + 'borderRadius': 'var(--borders-radius-3)', + 'linkBg': 'transparent' + } + }, + active: { + token: '--Tabs--card-active-', + body: { + font: { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + linkBg: 'transparent' + } + }, + hover: { + token: '--Tabs--card-hover-', + body: { + font: { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + linkBg: 'transparent' + } + }, + disabled: { + token: '--Tabs--card-disabled-', + body: { + font: { + color: 'var(--colors-neutral-text-6)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + linkBg: 'transparent' + } + } + }, + tiled: { + default: { + token: '--Tabs--tiled-', + body: { + border: { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + }, + font: { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + padding: { + paddingTop: 'var(--sizes-size-5)', + paddingBottom: 'var(--sizes-size-5)', + paddingLeft: 'var(--sizes-size-7)', + paddingRight: 'var(--sizes-size-7)' + } + } + }, + active: { + token: '--Tabs--tiled-active-', + body: { + border: { + 'top-border-color': 'var(--colors-brand-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'transparent', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + }, + font: { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + } + } + }, + hover: { + token: '--Tabs--tiled-hover-', + body: { + border: { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + }, + font: { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + } + } + }, + disabled: { + token: '--Tabs--tiled-disabled-', + body: { + border: { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + }, + font: { + color: 'var(--colors-neutral-text-6)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + } + } + } + }, + radio: { + default: { + token: '--Tabs--radio-', + body: { + border: { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + }, + font: { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + padding: { + paddingTop: 'var(--sizes-size-5)', + paddingBottom: 'var(--sizes-size-5)', + paddingLeft: 'var(--sizes-size-7)', + paddingRight: 'var(--sizes-size-7)' + }, + bg: 'var(--colors-neutral-fill-11)', + height: 'var(--sizes-base-15)' + } + }, + active: { + token: '--Tabs--radio-active-', + body: { + border: { + 'top-border-color': 'var(--colors-brand-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + }, + font: { + color: 'var(--colors-neutral-text-11)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + bg: 'var(--colors-brand-5)' + } + }, + hover: { + token: '--Tabs--radio-hover-', + body: { + border: { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + }, + font: { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + bg: 'var(--colors-neutral-fill-11)' + } + }, + disabled: { + token: '--Tabs--radio-disabled-', + body: { + border: { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + }, + font: { + color: 'var(--colors-neutral-text-6)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + bg: 'var(--colors-neutral-fill-11)' + } + } + }, + vertical: { + default: { + token: '--Tabs--vertical-', + body: { + font: { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + padding: { + paddingTop: 'var(--sizes-size-5)', + paddingBottom: 'var(--sizes-size-5)', + paddingLeft: 'var(--sizes-size-7)', + paddingRight: 'var(--sizes-size-7)' + }, + bg: 'var(--colors-neutral-fill-10)', + width: '8.75rem' + } + }, + active: { + token: '--Tabs--vertical-active-', + body: { + 'font': { + color: 'var(--colors-brand-5)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + 'border-color': 'var(--colors-brand-5)', + 'border-width': 'var(--borders-width-4)', + 'border-style': 'var(--borders-style-2)' + } + }, + hover: { + token: '--Tabs--vertical-hover-', + body: { + font: { + color: 'var(--colors-brand-6)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + } + } + }, + disabled: { + token: '--Tabs--vertical-disabled-', + body: { + font: { + color: 'var(--colors-neutral-text-6)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + } + } + } + }, + sidebar: { + default: { + token: '--Tabs--sidebar-', + body: { + font: { + color: 'var(--colors-neutral-text-5)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + sideWidth: 'var(--sizes-base-31)', + sideMargin: 'var(--sizes-base-11)' + } + }, + active: { + token: '--Tabs--sidebar-active-', + body: { + font: { + color: 'var(--colors-brand-5)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + } + } + }, + hover: { + token: '--Tabs--sidebar-hover-', + body: { + font: { + color: 'var(--colors-brand-6)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + } + } + }, + disabled: { + token: '--Tabs--sidebar-disabled-', + body: { + font: { + color: 'var(--colors-neutral-text-6)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + } + } + } + } + }, + panel: { + panel: { + token: '--Panel-', + body: { + bg: 'var(--colors-neutral-fill-11)', + boxShadow: 'var(--shadows-shadow-sm)', + margin: { + marginTop: 'var(--sizes-size-0)', + marginBottom: 'var(--sizes-base-10)', + marginLeft: 'var(--sizes-size-0)', + marginRight: 'var(--sizes-size-0)' + }, + border: { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + } + } + }, + heading: { + token: '--Panel-heading-', + body: { + padding: { + paddingTop: 'var(--sizes-size-5)', + paddingBottom: 'var(--sizes-size-5)', + paddingLeft: 'var(--sizes-size-7)', + paddingRight: 'var(--sizes-size-7)' + }, + bg: 'var(--colors-neutral-fill-10)', + font: { + color: 'var(--colors-neutral-text-3)', + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + border: { + 'top-border-color': 'transparent', + 'top-border-width': 'var(--borders-width-1)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'transparent', + 'right-border-width': 'var(--borders-width-1)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'transparent', + 'left-border-width': 'var(--borders-width-1)', + 'left-border-style': 'var(--borders-style-2)' + } + } + }, + body: { + token: '--Panel-body-', + body: { + padding: { + paddingTop: 'var(--sizes-size-7)', + paddingBottom: 'var(--sizes-size-7)', + paddingLeft: 'var(--sizes-size-7)', + paddingRight: 'var(--sizes-size-7)' + } + } + }, + footer: { + token: '--Panel-footer-', + body: { + padding: { + paddingTop: 'var(--sizes-size-5)', + paddingBottom: 'var(--sizes-size-5)', + paddingLeft: 'var(--sizes-size-7)', + paddingRight: 'var(--sizes-size-7)' + }, + bg: 'var(--colors-neutral-fill-11)', + border: { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'transparent', + 'right-border-width': 'var(--borders-width-1)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'transparent', + 'bottom-border-width': 'var(--borders-width-1)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'transparent', + 'left-border-width': 'var(--borders-width-1)', + 'left-border-style': 'var(--borders-style-2)' + }, + buttonSpace: 'var(--sizes-size-5)' + } + } + }, + divider: { + token: '--Divider-', + body: { + style: 'var(--borders-style-2)', + color: 'var(--colors-neutral-line-8)', + width: 'var(--borders-width-2)', + margin: { + marginTop: 'var(--sizes-size-7)', + marginBottom: 'var(--sizes-size-7)', + marginLeft: 'var(--sizes-size-0)', + marginRight: 'var(--sizes-size-0)' + } + } + }, + dialog: { + base: { + default: { + token: '--dialog-default-', + body: { + 'border-width': 'var(--sizes-size-0)', + 'border-radius': 'var(--sizes-size-4)', + 'padding-y': 'var(--sizes-base-12)' + } + }, + icon: { + token: '--dialog-icon-', + body: { + icon: '', + size: 'var(--sizes-size-9)', + color: 'var(--colors-neutral-text-6)' + } + }, + header: { + token: '--dialog-header-', + body: { + height: 'var(--sizes-size-1)', + font: { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-5)' + } + } + }, + content: { + token: '--dialog-content-', + body: { + 'height': 'var(--sizes-size-1)', + 'margin-left': 'var(--sizes-size-5)', + 'font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)' + } + } + }, + footer: { + token: '--dialog-footer-', + body: { + 'height': 'var(--sizes-size-1)', + 'margin-left': 'var(--sizes-size-5)' + } + } + }, + size: { + sm: { + token: '--dialog-size-sm-', + body: { + width: '21.875rem' + } + }, + normal: { + token: '--dialog-size-normal-', + body: { + width: '31.25rem' + } + }, + lg: { + token: '--dialog-size-lg-', + body: { + width: '68.75rem' + } + }, + xl: { + token: '--dialog-size-xl-', + body: { + width: '90%' + } + } + } + }, + drawer: { + base: { + header: { + token: '--drawer-header-', + body: { + height: 'var(--sizes-size-1)', + font: { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-5)' + } + } + }, + icon: { + token: '--drawer-header-icon-', + body: { + icon: '', + size: 'var(--sizes-size-7)', + color: 'var(--colors-neutral-text-2)' + } + }, + content: { + token: '--drawer-content-', + body: { + 'font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-5)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-base-12)', + paddingBottom: 'var(--sizes-base-12)', + paddingLeft: 'var(--sizes-base-12)', + paddingRight: 'var(--sizes-base-12)' + } + } + }, + footer: { + token: '--drawer-footer-', + body: { + 'height': 'var(--sizes-size-1)', + 'margin-left': 'var(--sizes-size-9)' + } + } + }, + size: { + xs: { + token: '--drawer-size-xs-', + body: { + width: '12.5rem' + } + }, + sm: { + token: '--drawer-size-sm-', + body: { + width: '18.75rem' + } + }, + md: { + token: '--drawer-size-md-', + body: { + width: '31.25rem' + } + }, + lg: { + token: '--drawer-size-lg-', + body: { + width: '50rem' + } + }, + xl: { + token: '--drawer-size-xl-', + body: { + width: '90%' + } + } + } + }, + inputFile: { + base: { + token: '--inputFile-base-', + body: { + 'des-font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'des-margin': 'var(--sizes-base-5)' + } + }, + list: { + token: '--inputFile-list-', + body: { + 'padding-and-margin': { + marginTop: 'var(--sizes-base-4)', + marginBottom: 'var(--sizes-base-4)', + marginLeft: 'var(--sizes-size-0)', + marginRight: 'var(--sizes-size-0)', + paddingTop: 'var(--sizes-size-2)', + paddingBottom: 'var(--sizes-size-2)', + paddingLeft: 'var(--sizes-size-3)', + paddingRight: 'var(--sizes-size-3)' + }, + 'font': { + color: 'var(--colors-brand-5)', + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'bg-color': 'var(--colors-neutral-fill-11)', + 'bg-color-hover': 'var(--colors-neutral-fill-9)', + 'icon-size': 'var(--sizes-base-6)', + 'icon-color': 'var(--colors-neutral-text-2)', + 'icon-margin': 'var(--sizes-size-3)', + 'delete-icon-size': 'var(--sizes-base-6)', + 'delete-icon-color': 'var(--colors-neutral-text-5)', + 'delete-icon-color-hover': 'var(--colors-neutral-text-4)' + } + }, + drag: { + token: '--inputFile-drag-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-3)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-3)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-3)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-3)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'hover-border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-3)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-3)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-3)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-3)' + }, + 'font': { + color: 'var(--colors-neutral-text-3)', + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'icon-size': 'var(--sizes-base-24)', + 'icon-color': 'var(--colors-neutral-fill-8)', + 'icon-margin': 'var(--sizes-size-5)', + 'bg-color': 'var(--colors-neutral-fill-11)', + 'bg-color-hover': 'var(--colors-neutral-fill-11)' + } + } + }, + inputImage: { + base: { + label: '图片上传', + default: { + token: '--inputImage-base-default-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'font': { + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'color': 'var(--colors-neutral-text-5)', + 'icon-size': 'var(--sizes-base-12)', + 'icon-color': 'var(--colors-neutral-text-5)', + 'icon-margin': 'var(--sizes-size-5)', + 'bg-color': 'var(--colors-neutral-fill-11)' + } + }, + hover: { + token: '--inputImage-base-hover-', + body: { + 'border': { + 'top-border-color': 'var(--colors-brand-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + }, + 'color': 'var(--colors-neutral-text-5)', + 'icon-color': 'var(--colors-neutral-text-5)', + 'bg-color': 'var(--colors-neutral-fill-11)' + } + }, + active: { + token: '--inputImage-base-active-', + body: { + 'border': { + 'top-border-color': 'var(--colors-brand-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + }, + 'color': 'var(--colors-neutral-text-5)', + 'icon-color': 'var(--colors-neutral-text-5)', + 'bg-color': 'var(--colors-neutral-fill-11)' + } + }, + disabled: { + token: '--inputImage-base-disabled-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + }, + 'color': 'var(--colors-neutral-text-6)', + 'icon-color': 'var(--colors-neutral-text-6)', + 'bg-color': 'var(--colors-neutral-fill-10)' + } + } + } + }, + select: { + base: { + label: '默认', + default: { + label: '常规', + token: '--select-base-default-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'bg-color': 'var(--colors-neutral-fill-11)', + 'option-padding-and-margin': { + paddingTop: 'var(--sizes-size-0)', + paddingBottom: 'var(--sizes-size-0)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'option-font': { + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'option-color': 'var(--colors-neutral-text-2)', + 'option-bg-color': 'var(--colors-neutral-fill-11)', + 'option-line-height': 'var(--sizes-base-16)' + } + }, + hover: { + label: '悬浮', + token: '--select-base-hover-', + body: { + 'border': { + 'top-border-color': 'var(--colors-brand-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + }, + 'bg-color': 'var(--colors-neutral-fill-11)', + 'option-color': 'var(--colors-neutral-text-2)', + 'option-bg-color': 'var(--colors-brand-10)' + } + }, + active: { + label: '点击', + token: '--select-base-active-', + body: { + 'border': { + 'top-border-color': 'var(--colors-brand-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + }, + 'shadow': 'var(--shadows-shadow-none)', + 'bg-color': 'var(--colors-neutral-fill-11)', + 'option-color': 'var(--colors-brand-5)', + 'option-bg-color': 'var(--colors-neutral-fill-11)' + } + }, + disabled: { + label: '禁用', + token: '--select-base-disabled-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + }, + 'bg-color': 'var(--colors-neutral-fill-10)', + 'option-color': 'var(--colors-neutral-text-6)', + 'option-bg-color': 'var(--colors-neutral-fill-11)' + } + } + }, + multiple: { + label: '多选', + token: '--select-multiple-', + body: { + 'border': { + 'top-right-border-radius': 'var(--borders-radius-2)', + 'top-left-border-radius': 'var(--borders-radius-2)', + 'bottom-right-border-radius': 'var(--borders-radius-2)', + 'bottom-left-border-radius': 'var(--borders-radius-2)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-0)', + paddingBottom: 'var(--sizes-size-0)', + paddingLeft: 'var(--sizes-size-3)', + paddingRight: 'var(--sizes-size-3)', + marginTop: 'var(--sizes-size-0)', + marginBottom: 'var(--sizes-size-2)', + marginLeft: 'var(--sizes-size-0)', + marginRight: 'var(--sizes-size-3)' + }, + 'font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'bg-color': 'var(--colors-neutral-fill-10)', + 'hover-bg-color': 'var(--colors-brand-10)', + 'icon-color': 'var(--colors-neutral-text-6)', + 'icon-hover-color': 'var(--colors-neutral-text-2)' + } + }, + group: { + label: '分组模式', + token: '--select-group-', + body: { + 'font': { + color: 'var(--colors-neutral-text-5)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-7)', + paddingRight: 'var(--sizes-size-7)' + } + } + }, + table: { + label: '表格模式', + token: '--select-table-', + body: { + 'header-padding-and-margin': { + paddingTop: 'var(--sizes-size-5)', + paddingBottom: 'var(--sizes-size-5)', + paddingLeft: 'var(--sizes-size-7)', + paddingRight: 'var(--sizes-base-9)' + }, + 'option-padding-and-margin': { + paddingTop: 'var(--sizes-size-4)', + paddingBottom: 'var(--sizes-size-5)', + paddingLeft: 'var(--sizes-size-7)', + paddingRight: 'var(--sizes-base-9)' + }, + 'font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-8)' + } + } + }, + tree: { + label: '树模式', + token: '--select-tree-', + body: { + 'font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)' + }, + 'hover-bg-color': 'var(--colors-neutral-fill-10)', + 'active-bg-color': 'var(--colors-brand-10)' + } + } + }, + inputDate: { + base: { + label: '默认', + default: { + label: '常规', + token: '--inputDate-default-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'font': { + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'size': { + height: 'var(--sizes-base-16)' + }, + 'color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-neutral-fill-11)', + 'icon': '', + 'icon-color': 'var(--colors-brand-5)', + 'icon-size': 'var(--sizes-base-7)', + 'title-color': 'var(--colors-neutral-text-2)', + 'title-arrow-color': 'var(--colors-neutral-text-5)', + 'option-color': 'var(--colors-neutral-text-2)', + 'option-bg-color': 'var(--colors-neutral-fill-11)', + 'option-today-border-color': 'var(--colors-brand-5)', + 'option-border': { + 'top-right-border-radius': 'var(--borders-radius-2)', + 'top-left-border-radius': 'var(--borders-radius-2)', + 'bottom-right-border-radius': 'var(--borders-radius-2)', + 'bottom-left-border-radius': 'var(--borders-radius-2)' + } + } + }, + hover: { + label: '悬浮', + token: '--inputDate-hover-', + body: { + 'border': { + 'top-border-color': 'var(--colors-brand-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + }, + 'color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-neutral-fill-11)', + 'title-color': 'var(--colors-brand-6)', + 'title-arrow-color': 'var(--colors-neutral-text-2)', + 'option-color': 'var(--colors-neutral-text-2)', + 'option-bg-color': 'var(--colors-neutral-fill-10)' + } + }, + active: { + label: '点击', + token: '--inputDate-active-', + body: { + 'border': { + 'top-border-color': 'var(--colors-brand-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + }, + 'shadow': 'var(--shadows-shadow-none)', + 'color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-neutral-fill-11)', + 'option-color': 'var(--colors-neutral-text-11)', + 'option-bg-color': 'var(--colors-brand-5)' + } + }, + disabled: { + label: '禁用', + token: '--inputDate-disabled-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + }, + 'color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-neutral-fill-10)', + 'option-color': 'var(--colors-neutral-text-6)', + 'option-bg-color': 'var(--colors-neutral-fill-11)' + } + } + }, + other: { + default: { + label: '常规', + token: '--inputDate-other-', + body: { + 'color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-neutral-fill-11)', + 'border': { + 'top-right-border-radius': 'var(--borders-radius-2)', + 'top-left-border-radius': 'var(--borders-radius-2)', + 'bottom-right-border-radius': 'var(--borders-radius-2)', + 'bottom-left-border-radius': 'var(--borders-radius-2)' + } + } + }, + hover: { + label: '悬浮', + token: '--inputDate-other-hover-', + body: { + 'color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-neutral-fill-10)' + } + }, + active: { + label: '点击', + token: '--inputDate-other-active-', + body: { + 'color': 'var(--colors-neutral-text-11)', + 'bg-color': 'var(--colors-brand-5)' + } + }, + disabled: { + label: '禁用', + token: '--inputDate-other-disabled-', + body: { + 'color': 'var(--colors-neutral-text-6)', + 'bg-color': 'var(--colors-neutral-fill-10)' + } + } + }, + range: { + label: '范围', + token: '--inputDate-range-', + body: { + 'line-height': 'var(--borders-width-3)', + 'line-color': 'var(--colors-brand-4)', + 'separator-width': 'var(--sizes-size-5)', + 'separator-margin': 'var(--sizes-size-5)', + 'separator-color': 'var(--colors-neutral-fill-6)', + 'between-color': 'var(--colors-brand-10)' + } + } + }, + inputTime: { + base: { + label: '默认', + default: { + label: '常规', + token: '--inputTime-default-', + body: { + 'font': { + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-neutral-text-11)' + } + }, + hover: { + label: '悬浮', + token: '--inputTime-hover-', + body: { + 'color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-neutral-fill-10)' + } + }, + active: { + label: '点击', + token: '--inputTime-active-', + body: { + 'color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-brand-10)' + } + } + } + }, + steps: { + base: { + label: '基本', + token: '--steps-base-', + body: { + 'font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'subTitle-font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'des-font': { + color: 'var(--colors-neutral-text-5)', + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'title-paddingRight': 'var(--sizes-size-5)', + 'subTitle-paddingLeft': 'var(--sizes-size-6)', + 'icon-size': 'var(--sizes-base-15)', + 'icon-paddingRight': 'var(--sizes-size-6)', + 'icon-fontSize': 'var(--fonts-size-6)', + 'line-color': 'var(--colors-neutral-line-8)', + 'line-active-color': 'var(--colors-brand-5)' + } + }, + status: { + label: '状态', + token: '--steps-status-', + body: { + 'wait-bg-color': 'var(--colors-neutral-fill-11)', + 'wait-color': 'var(--colors-neutral-text-8)', + 'process-bg-color': 'var(--colors-brand-5)', + 'process-color': 'var(--colors-neutral-text-11)', + 'finish-bg-color': 'var(--colors-brand-5)', + 'finish-color': 'var(--colors-neutral-text-11)', + 'error-bg-color': 'var(--colors-error-5)', + 'error-color': 'var(--colors-neutral-text-11)' + } + }, + dot: { + label: '点状', + token: '--steps-dot-', + body: { + 'icon-size': 'var(--sizes-size-5)', + 'wait-bg-color': 'var(--colors-neutral-fill-8)', + 'process-bg-color': 'var(--colors-brand-5)', + 'finish-bg-color': 'var(--colors-neutral-fill-11)', + 'error-bg-color': 'var(--colors-error-5)' + } + }, + simple: { + label: '简单模式', + token: '--steps-simple-', + body: { + 'icon': '', + 'icon-size': 'var(--sizes-size-8)' + } + } + }, + userSelect: { + base: { + label: '基础', + type: 'base', + default: { + label: '常规', + token: '--user-select-base-default-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'font': { + color: 'var(--colors-neutral-fill-2)', + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'bg-color': 'var(--colors-neutral-fill-11)' + } + }, + hover: { + label: '悬浮', + token: '--user-select-base-hover-', + body: { + 'border': { + 'top-border-color': 'var(--colors-brand-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'font': { + color: 'var(--colors-neutral-fill-2)', + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'bg-color': 'var(--colors-neutral-fill-11)' + } + }, + active: { + label: '点击', + token: '--user-select-base-active-', + body: { + 'border': { + 'top-border-color': 'var(--colors-brand-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'font': { + color: 'var(--colors-neutral-fill-2)', + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'shadow': 'var(--shadows-shadow-none)', + 'bg-color': 'var(--colors-neutral-fill-11)' + } + }, + disabled: { + label: '禁用', + token: '--user-select-base-disabled-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'font': { + color: 'var(--colors-neutral-text-6)', + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'bg-color': 'var(--colors-neutral-fill-10)' + } + } + }, + addIcon: { + label: '添加图标', + token: '--user-select-add-', + body: { + 'width': 'var(--sizes-base-15)', + 'bg-color': 'var(--colors-neutral-fill-10)', + 'active-color': 'var(--colors-brand-5)', + 'active-bg-color': 'var(--colors-brand-10)', + 'icon': '', + 'icon-size': 'var(--sizes-size-7)' + } + }, + option: { + label: '选项', + token: '--user-select-option-', + body: { + 'height': 'var(--sizes-base-24)', + 'icon-size': 'var(--sizes-base-16)', + 'icon-bg-color': 'var(--colors-brand-6)', + 'icon-color': 'var(--colors-neutral-text-11)', + 'icon-marginRight': 'var(--sizes-size-6)', + 'font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)' + }, + 'des-font': { + color: 'var(--colors-neutral-text-5)', + fontSize: 'var(--fonts-size-8)' + }, + 'active-color': 'var(--colors-brand-5)' + } + }, + dialogOption: { + label: '弹窗选项', + token: '--user-select-dialog-option-', + body: { + 'height': 'var(--sizes-base-30)', + 'bg-color': 'var(--colors-neutral-fill-11)', + 'active-bg-color': 'var(--colors-neutral-fill-10)', + 'icon-size': 'var(--sizes-base-14)', + 'icon-bg-color': 'var(--colors-brand-6)', + 'icon-color': 'var(--colors-neutral-text-11)', + 'icon-marginRight': 'var(--sizes-size-7)', + 'font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)' + }, + 'des-font': { + color: 'var(--colors-neutral-text-5)', + fontSize: 'var(--fonts-size-8)' + } + } + } + }, + alert: { + base: { + label: '点击', + token: '--alert-base-', + body: { + 'padding-and-margin': { + marginTop: 'var(--sizes-size-0)', + marginBottom: 'var(--sizes-size-9)', + marginLeft: 'var(--sizes-size-0)', + marginRight: 'var(--sizes-size-0)', + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-9)', + paddingRight: 'var(--sizes-size-9)' + }, + 'border': { + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'font': { + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'shadow': 'var(--shadows-shadow-none)', + 'title-padding-and-margin': { + paddingTop: 'var(--sizes-size-9)', + paddingBottom: 'var(--sizes-size-9)', + paddingLeft: 'var(--sizes-size-9)', + paddingRight: 'var(--sizes-size-9)' + }, + 'title-font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-5)' + }, + 'title-margin-bottom': 'var(--sizes-size-3)' + } + }, + icon: { + label: '图标', + token: '--alert-icon-', + body: { + 'size': 'var(--sizes-base-8)', + 'margin-right': 'var(--sizes-size-5)' + } + }, + level: { + info: { + label: '提示', + token: '--alert-level-info-', + body: { + 'color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-brand-10)', + 'icon-color': 'var(--colors-brand-5)' + } + }, + success: { + label: '成功', + token: '--alert-level-success-', + body: { + 'color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-success-10)', + 'icon-color': 'var(--colors-success-5)' + } + }, + warning: { + label: '成功', + token: '--alert-level-warning-', + body: { + 'color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-warning-10)', + 'icon-color': 'var(--colors-warning-5)' + } + }, + danger: { + label: '成功', + token: '--alert-level-danger-', + body: { + 'color': 'var(--colors-neutral-text-2)', + 'bg-color': 'var(--colors-error-10)', + 'icon-color': 'var(--colors-error-5)' + } + } + } + }, + spinner: { + base: { + label: '基本', + token: '--spinner-base-', + body: { + 'font': { + color: 'var(--colors-info-5)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'tip-size': 'var(--sizes-base-6)' + } + }, + small: { + label: 'small尺寸', + token: '--spinner-sm-', + body: { + size: 'var(--sizes-base-8)' + } + }, + normal: { + label: 'normal尺寸', + token: '--spinner-size-', + body: { + size: 'var(--sizes-base-16)' + } + }, + large: { + label: 'large尺寸', + token: '--spinner-lg-', + body: { + size: 'var(--sizes-base-24)' + } + } + }, + tag: { + base: { + label: '基本', + token: '--Tag-base-', + body: { + 'font': { + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'height': 'var(--sizes-base-12)', + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-0)', + paddingBottom: 'var(--sizes-size-0)', + paddingLeft: 'var(--sizes-size-5)', + paddingRight: 'var(--sizes-size-5)' + } + } + }, + model: [ + { + label: '面性标签', + type: 'normal', + token: '--Tag-model-normal-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-6)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-1)', + 'right-border-color': 'var(--colors-neutral-line-6)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-1)', + 'bottom-border-color': 'var(--colors-neutral-line-6)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-1)', + 'left-border-color': 'var(--colors-neutral-line-6)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-1)', + 'top-right-border-radius': 'var(--borders-radius-1)', + 'top-left-border-radius': 'var(--borders-radius-1)', + 'bottom-right-border-radius': 'var(--borders-radius-1)', + 'bottom-left-border-radius': 'var(--borders-radius-1)' + }, + 'status-size': 'var(--sizes-size-0)', + 'status-margin': 'var(--sizes-size-0)', + 'close-size': 'var(--sizes-size-0)', + 'close-margin': 'var(--sizes-size-0)' + } + }, + { + label: '线性标签', + type: 'rounded', + token: '--Tag-model-rounded-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-6)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-6)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-6)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-6)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': '12px', + 'top-left-border-radius': '12px', + 'bottom-right-border-radius': '12px', + 'bottom-left-border-radius': '12px' + }, + 'status-size': 'var(--sizes-size-0)', + 'status-margin': 'var(--sizes-size-0)', + 'close-size': 'var(--sizes-size-0)', + 'close-margin': 'var(--sizes-size-0)' + } + }, + { + label: '状态标签', + type: 'status', + token: '--Tag-model-status-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-6)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-1)', + 'right-border-color': 'var(--colors-neutral-line-6)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-1)', + 'bottom-border-color': 'var(--colors-neutral-line-6)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-1)', + 'left-border-color': 'var(--colors-neutral-line-6)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-1)', + 'top-right-border-radius': 'var(--borders-radius-1)', + 'top-left-border-radius': 'var(--borders-radius-1)', + 'bottom-right-border-radius': 'var(--borders-radius-1)', + 'bottom-left-border-radius': 'var(--borders-radius-1)' + }, + 'status-size': 'var(--sizes-size-5)', + 'status-margin': 'var(--sizes-size-5)', + 'close-size': 'var(--sizes-size-5)', + 'close-margin': 'var(--sizes-size-5)' + } + } + ], + color: [ + { + label: 'active', + type: 'active', + token: '--Tag-color-active-', + body: { + 'color': 'var(--colors-neutral-fill-11)', + 'bg-color': 'var(--colors-brand-5)' + } + }, + { + label: 'inactive', + type: 'inactive', + token: '--Tag-color-inactive-', + body: { + 'color': 'var(--colors-neutral-fill-11)', + 'bg-color': 'var(--colors-neutral-fill-6)' + } + }, + { + label: 'error', + tyupe: 'error', + token: '--Tag-color-error-', + body: { + 'color': 'var(--colors-neutral-fill-11)', + 'bg-color': 'var(--colors-error-5)' + } + }, + { + label: 'success', + type: 'success', + token: '--Tag-color-success-', + body: { + 'color': 'var(--colors-neutral-fill-11)', + 'bg-color': 'var(--colors-success-5)' + } + }, + { + label: 'processing', + tyupe: 'processing', + token: '--Tag-color-processing-', + body: { + 'color': 'var(--colors-neutral-fill-11)', + 'bg-color': 'var(--colors-brand-6)' + } + }, + { + label: 'warning', + type: 'warning', + token: '--Tag-color-warning-', + body: { + 'color': 'var(--colors-neutral-fill-11)', + 'bg-color': 'var(--colors-warning-5)' + } + } + ] + }, + timeline: { + base: { + label: '基本', + token: '--Timeline-', + body: { + 'time-font': { + color: 'var(--colors-neutral-text-5)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'title-font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'detail-label-font': { + color: 'var(--colors-brand-5)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'detail-content-font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'line-bg': '#e6e6e8', + 'round-bg': '#dadbdd', + 'left-size': 'var(--sizes-size-2)', + 'shadow': 'var(--shadows-shadow-normal)', + 'detail-icon-size': 'var(--sizes-base-8)', + 'detail-icon-color': 'var(--colors-brand-5)', + 'visible-padding-and-margin': { + paddingTop: 'var(--sizes-size-6)', + paddingBottom: 'var(--sizes-size-6)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'visible-border': { + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + } + } + }, + type: { + label: '颜色状态', + token: '--Timeline-type-', + body: { + 'info-color': 'var(--colors-info-5)', + 'success-color': 'var(--colors-success-5)', + 'warning-color': 'var(--colors-warning-5)', + 'danger-color': 'var(--colors-error-5)' + } + }, + horizontal: { + label: '方向', + token: '--Timeline-horizontal-', + body: { + 'top-size': 'var(--sizes-size-0)' + } + } + }, + pick: { + base: { + label: '基本', + token: '--Pick-base-', + body: { + 'border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'bgColor': 'var(--colors-neutral-fill-11)', + 'value-font': { + color: 'var(--colors-other-5)', + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'value-border': { + 'top-border-color': 'var(--colors-other-7)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-other-7)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-other-7)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-other-7)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + }, + 'value-bgColor': '#cce5ff', + 'value-radius': { + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'icon': '', + 'icon-size': 'var(--sizes-size-9)', + 'icon-color': '#84878c', + 'value-icon-color': 'var(--colors-other-5)', + 'value-hover-icon-color': '#b3d7ff' + } + }, + status: { + label: '配置 不同状态', + token: '--Pick-status-', + body: { + 'hover-border': { + 'top-border-color': 'var(--colors-other-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-other-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-other-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-other-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + }, + 'hover-bgColor': 'var(--colors-neutral-line-11)', + 'focus-border': { + 'top-border-color': 'var(--colors-other-7)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-other-7)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-other-7)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-other-7)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + }, + 'focus-shadow': 'var(--shadows-shadow-none)', + 'focus-bgColor': 'var(--colors-neutral-line-11)', + 'disabled-border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)' + }, + 'disabled-bgColor': 'var(--colors-neutral-text-10)', + 'disabled-font': { + color: 'var(--colors-neutral-line-6)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)' + } + } + } + }, + toast: { + base: { + label: '基本', + token: '--Toast-', + body: { + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-9)', + paddingRight: 'var(--sizes-size-9)' + }, + 'border': { + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + 'icon-size': 'var(--sizes-size-9)' + } + }, + info: { + label: '基本', + token: '--Toast--info-', + body: { + font: { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-6)' + }, + border: { + 'top-border-color': 'var(--colors-neutral-line-11)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-11)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-11)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-11)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + bgColor: 'var(--colors-neutral-fill-11)' + } + }, + success: { + label: '基本', + token: '--Toast--success-', + body: { + font: { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-6)' + }, + border: { + 'top-border-color': 'var(--colors-neutral-line-11)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-11)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-11)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-11)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + bgColor: 'var(--colors-neutral-fill-11)' + } + }, + danger: { + label: '基本', + token: '--Toast--danger-', + body: { + font: { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-6)' + }, + border: { + 'top-border-color': 'var(--colors-neutral-line-11)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-11)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-11)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-11)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + bgColor: 'var(--colors-neutral-fill-11)' + } + }, + warning: { + label: '基本', + token: '--Toast--warning-', + body: { + font: { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-6)' + }, + border: { + 'top-border-color': 'var(--colors-neutral-line-11)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-11)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-11)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-11)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-right-border-radius': 'var(--borders-radius-3)', + 'top-left-border-radius': 'var(--borders-radius-3)', + 'bottom-right-border-radius': 'var(--borders-radius-3)', + 'bottom-left-border-radius': 'var(--borders-radius-3)' + }, + bgColor: 'var(--colors-neutral-fill-11)' + } + } + }, + status: { + base: { + label: 'base', + type: 'base', + token: '--Status-base-', + body: { + 'fontSize': 'var(--fonts-size-9)', + 'icon-size': 'var(--sizes-size-8)', + 'text-margin': 'var(--sizes-size-3)' + } + }, + color: [ + { + label: 'fail', + type: 'fail', + token: '--Status-fail-', + body: { + color: 'var(--colors-error-5)' + } + }, + { + label: 'success', + type: 'success', + token: '--Status-success-', + body: { + color: 'var(--colors-success-5)' + } + }, + { + label: 'queue', + type: 'queue', + token: '--Status-queue-', + body: { + color: 'var(--colors-warning-5)' + } + }, + { + label: 'schedule', + type: 'schedule', + token: '--Status-schedule-', + body: { + color: 'var(--colors-neutral-fill-2)' + } + }, + { + label: 'pending', + type: 'pending', + token: '--Status-pending-', + body: { + 'before-color': 'var(--colors-error-5)', + 'after-color': 'var(--colors-brand-5)' + } + } + ] + }, + image: { + image: { + default: { + label: '默认样式', + normal: { + label: '整体', + token: '--image-image-normal-', + body: { + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-3)', + paddingRight: 'var(--sizes-size-3)' + }, + 'font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)' + }, + 'title-marginTop': 'var(--sizes-size-0)' + } + }, + description: { + label: '描述', + token: '--image-image-description-', + body: { + font: { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-8)' + }, + marginTop: 'var(--sizes-size-0)' + } + } + } + }, + images: { + item: { + label: '图片项', + token: '--image-images-item-', + body: { + 'padding-and-margin': { + marginTop: 'var(--sizes-size-3)', + marginBottom: 'var(--sizes-size-3)', + marginLeft: 'var(--sizes-size-3)', + marginRight: 'var(--sizes-size-3)' + }, + 'size': '48px', + 'color': 'var(--colors-neutral-text-5)' + } + }, + preview: { + label: '图片项', + token: '--image-images-preview-', + body: { + 'radius': 'var(--sizes-size-3)', + 'bgColor': 'var(--colors-neutral-text-11)', + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-9)', + paddingRight: 'var(--sizes-size-9)' + } + } + } + } + }, + inputTag: { + option: { + label: '选项', + token: '--inputTag-option-', + body: { + 'height': 'var(--sizes-base-16)', + 'font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)' + }, + 'bg-color': 'var(--colors-neutral-fill-11)', + 'hover-color': 'var(--colors-brand-5)', + 'hover-bg-color': 'var(--colors-brand-10)' + } + } + }, + fieldSet: { + legend: { + label: '标题', + token: '--fieldSet-legend-', + body: { + 'height': 'var(--sizes-size-9)', + 'font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)' + }, + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-0)', + paddingBottom: 'var(--sizes-size-0)', + paddingLeft: 'var(--sizes-size-8)', + paddingRight: 'var(--sizes-size-0)', + marginTop: 'var(--sizes-size-7)', + marginBottom: 'var(--sizes-size-7)', + marginLeft: 'var(--sizes-size-0)', + marginRight: 'var(--sizes-size-0)' + }, + 'border-color': 'var(--colors-brand-5)', + 'border-width': 'var(--sizes-size-3)' + } + }, + size: { + xs: { + label: 'xs', + token: '--fieldSet-size-xs-', + body: { + 'padding-and-margin': { + paddingTop: 'var(--sizes-base-10)', + paddingRight: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-3)', + paddingLeft: 'var(--sizes-size-3)' + }, + 'fontSize': 'var(--fonts-size-8)' + } + }, + sm: { + label: 'sm', + token: '--fieldSet-size-sm-', + body: { + 'padding-and-margin': { + paddingTop: 'var(--sizes-base-12)', + paddingRight: 'var(--sizes-size-6)', + paddingBottom: 'var(--sizes-size-6)', + paddingLeft: 'var(--sizes-size-6)' + }, + 'fontSize': 'var(--fonts-size-8)' + } + }, + base: { + label: 'base', + token: '--fieldSet-size-base-', + body: { + 'padding-and-margin': { + paddingTop: 'var(--sizes-base-15)', + paddingRight: 'var(--sizes-size-9)', + paddingBottom: 'var(--sizes-size-9)', + paddingLeft: 'var(--sizes-size-9)' + }, + 'fontSize': 'var(--fonts-size-7)' + } + }, + md: { + label: 'md', + token: '--fieldSet-size-md-', + body: { + 'padding-and-margin': { + paddingTop: 'var(--sizes-base-15)', + paddingRight: 'var(--sizes-base-10)', + paddingBottom: 'var(--sizes-base-10)', + paddingLeft: 'var(--sizes-base-10)' + }, + 'fontSize': 'var(--fonts-size-7)' + } + }, + lg: { + label: 'lg', + token: '--fieldSet-size-lg-', + body: { + 'padding-and-margin': { + paddingTop: 'var(--sizes-base-20)', + paddingRight: 'var(--sizes-base-15)', + paddingBottom: 'var(--sizes-base-15)', + paddingLeft: 'var(--sizes-base-15)' + }, + 'fontSize': 'var(--fonts-size-6)' + } + } + } + }, + inputRichText: { + base: { + label: '基础样式', + default: { + label: '常规', + token: '--inputRichText-default-', + body: { + border: { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-left-border-radius': 'var(--borders-radius-1)', + 'top-right-border-radius': 'var(--borders-radius-1)', + 'bottom-right-border-radius': 'var(--borders-radius-1)', + 'bottom-left-border-radius': 'var(--borders-radius-1)' + } + } + }, + hover: { + label: '常规', + token: '--inputRichText-hover-', + body: { + border: { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-left-border-radius': 'var(--borders-radius-1)', + 'top-right-border-radius': 'var(--borders-radius-1)', + 'bottom-right-border-radius': 'var(--borders-radius-1)', + 'bottom-left-border-radius': 'var(--borders-radius-1)' + } + } + }, + active: { + label: '点击', + token: '--inputRichText-active-', + body: { + border: { + 'top-border-color': 'var(--colors-brand-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-brand-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-brand-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-brand-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-left-border-radius': 'var(--borders-radius-1)', + 'top-right-border-radius': 'var(--borders-radius-1)', + 'bottom-right-border-radius': 'var(--borders-radius-1)', + 'bottom-left-border-radius': 'var(--borders-radius-1)' + } + } + }, + disabled: { + label: '禁用', + token: '--inputRichText-disabled-', + body: { + border: { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-2)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-2)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-2)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-2)', + 'top-left-border-radius': 'var(--borders-radius-1)', + 'top-right-border-radius': 'var(--borders-radius-1)', + 'bottom-right-border-radius': 'var(--borders-radius-1)', + 'bottom-left-border-radius': 'var(--borders-radius-1)' + } + } + } + } + }, + conditionBuilder: { + base: { + label: '标题', + token: '--conditionBuilder-', + body: { + 'toolbar-size': { + width: 'var(--sizes-base-14)', + height: 'var(--sizes-base-14)' + }, + 'toolbar-font': { + color: 'var(--colors-brand-3)', + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-5)' + }, + 'toolbar-bg-color': 'var(--colors-brand-9)', + 'toolbar-hover-font': { + color: 'var(--colors-neutral-text-11)', + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-5)' + }, + 'toolbar-hover-bg-color': 'var(--colors-brand-5)', + 'line-width': 'var(--sizes-size-2)', + 'line-bg-color': 'var(--colors-brand-9)', + 'body-bg-color': 'var(--colors-neutral-line-10)', + 'body-padding-and-margin': { + paddingTop: 'var(--sizes-size-7)', + paddingRight: 'var(--sizes-size-7)', + paddingBottom: 'var(--sizes-size-7)', + paddingLeft: 'var(--sizes-base-14)' + } + } + } + }, + wizard: { + base: { + label: '基础样式', + badge: { + label: 'basebadge', + type: 'badge', + token: '--Wizard-badge-', + body: { + 'size': 'var(--sizes-base-13)', + 'font': { + fontSize: 'var(--fonts-size-7)', + color: 'var(--colors-neutral-text-6)' + }, + 'border-width': 'var(--borders-width-2)', + 'border-color': 'var(--colors-neutral-line-6)', + 'bg-color': 'var(--colors-neutral-fill-11)', + 'onActive-color': 'var(--colors-neutral-text-11)', + 'onActive-bg-color': 'var(--colors-neutral-fill-3)', + 'text-margin': 'var(--sizes-size-4)' + } + }, + step: { + label: 'basestep', + type: 'step', + token: '--Wizard-step-', + body: { + 'font': { + fontSize: 'var(--fonts-size-7)', + color: 'var(--colors-neutral-text-6)' + }, + 'padding': { + paddingTop: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-0)', + paddingBottom: 'var(--sizes-size-6)', + paddingLeft: 'var(--sizes-size-0)' + }, + 'bg-color': 'var(--colors-neutral-fill-11)', + 'li-onActive-color': 'var(--colors-neutral-text-3)', + 'li-onActive-bg-color': 'var(--colors-neutral-fill-11)' + } + }, + after: { + label: 'baseafter', + type: 'after', + token: '--Wizard-after-', + body: { + 'color': 'var(--colors-neutral-text-6)', + 'onActive-color': 'var(--colors-neutral-text-3)' + } + }, + stepContent: { + label: 'basestepContent', + type: 'stepContent', + token: '--Wizard-stepContent-', + body: { + padding: { + paddingTop: 'var(--sizes-size-7)', + paddingRight: 'var(--sizes-size-7)', + paddingBottom: 'var(--sizes-size-7)', + paddingLeft: 'var(--sizes-size-7)' + } + } + } + } + }, + table: { + base: { + label: '基础', + token: '--table-', + body: { + 'border-width': 'var(--borders-width-2)', + 'border-color': 'var(--colors-neutral-line-8)', + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)', + paddingBottom: 'var(--sizes-size-6)', + paddingLeft: 'var(--sizes-size-6)' + }, + 'paddingX': 'var(--sizes-size-7)', + 'header-font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + 'header-bg-color': 'var(--colors-neutral-fill-10)', + 'header-separate-line-color': 'var(--colors-neutral-fill-11)', + 'header-separate-line-width': 'var(--borders-width-2)', + 'body-font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-8)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + 'body-bg-color': 'var(--colors-neutral-fill-11)', + 'body-hover-color': 'var(--colors-neutral-text-2)', + 'body-hover-bg-color': 'var(--colors-brand-10)', + 'body-disabled-color': 'var(--colors-neutral-text-6)', + 'body-disabled-bg-color': 'var(--colors-neutral-fill-10)', + 'title-font': { + color: 'var(--colors-neutral-text-2)', + fontSize: 'var(--fonts-size-7)', + fontWeight: 'var(--fonts-weight-6)', + lineHeight: 'var(--fonts-lineHeight-2)' + }, + 'title-bg-color': 'var(--colors-neutral-fill-11)', + 'title-padding-and-margin': { + paddingTop: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-5)', + paddingBottom: 'var(--sizes-size-6)', + paddingLeft: 'var(--sizes-size-5)' + }, + 'icon-color': 'var(--colors-neutral-text-6)', + 'icon-hover-color': 'var(--colors-neutral-text-2)', + 'icon-active-color': 'var(--colors-brand-5)', + 'icon-marginLeft': 'var(--sizes-size-5)', + 'sort-icon': '', + 'sort-up-icon': '', + 'sort-down-icon': '', + 'filter-icon': '', + 'search-icon': '' + } + }, + togglable: { + label: '自定义列', + token: '--table-togglable-', + body: { + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-4)', + paddingRight: 'var(--sizes-size-5)', + paddingBottom: 'var(--sizes-size-4)', + paddingLeft: 'var(--sizes-size-5)' + }, + 'bg-color': 'var(--colors-neutral-fill-11)', + 'hover-bg-color': 'var(--colors-neutral-fill-8)' + } + }, + size: { + large: { + label: '尺寸大', + token: '--table-size-large-', + body: { + 'padding-and-margin': { + paddingTop: 'var(--sizes-base-10)', + paddingRight: 'var(--sizes-size-7)', + paddingBottom: 'var(--sizes-base-10)', + paddingLeft: 'var(--sizes-size-7)' + } + } + }, + small: { + label: '尺寸小', + token: '--table-size-small-', + body: { + 'padding-and-margin': { + paddingTop: 'var(--sizes-size-4)', + paddingRight: 'var(--sizes-size-3)', + paddingBottom: 'var(--sizes-size-4)', + paddingLeft: 'var(--sizes-size-3)' + } + } + } + } + }, + combo: { + base: { + label: '基本', + token: '--combo-', + body: { + 'bg-color': 'var(--colors-neutral-fill-11)', + 'vertical-border': { + 'top-border-color': 'var(--colors-neutral-line-8)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-3)', + 'right-border-color': 'var(--colors-neutral-line-8)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-3)', + 'bottom-border-color': 'var(--colors-neutral-line-8)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-3)', + 'left-border-color': 'var(--colors-neutral-line-8)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-3)', + 'top-left-border-radius': 'var(--borders-radius-1)', + 'top-right-border-radius': 'var(--borders-radius-1)', + 'bottom-right-border-radius': 'var(--borders-radius-1)', + 'bottom-left-border-radius': 'var(--borders-radius-1)' + }, + 'vertical-hover-border': { + 'top-border-color': 'var(--colors-brand-5)', + 'top-border-width': 'var(--borders-width-2)', + 'top-border-style': 'var(--borders-style-3)', + 'right-border-color': 'var(--colors-brand-5)', + 'right-border-width': 'var(--borders-width-2)', + 'right-border-style': 'var(--borders-style-3)', + 'bottom-border-color': 'var(--colors-brand-5)', + 'bottom-border-width': 'var(--borders-width-2)', + 'bottom-border-style': 'var(--borders-style-3)', + 'left-border-color': 'var(--colors-brand-5)', + 'left-border-width': 'var(--borders-width-2)', + 'left-border-style': 'var(--borders-style-3)' + }, + 'vertical-padding-and-margin': { + paddingTop: 'var(--sizes-size-6)', + paddingRight: 'var(--sizes-size-6)', + paddingBottom: 'var(--sizes-size-6)', + paddingLeft: 'var(--sizes-size-6)' + } + } + }, + multi: { + label: '多选模式', + token: '--combo-multi-', + body: { + 'delBtn-color': 'var(--colors-neutral-text-5)', + 'delBtn-hover-color': 'var(--colors-neutral-text-2)' + } + } + } +}; + +export default component; diff --git a/packages/amis-theme-editor-helper/src/systemTheme/cxd.ts b/packages/amis-theme-editor-helper/src/systemTheme/cxd.ts new file mode 100644 index 000000000..a60a2478b --- /dev/null +++ b/packages/amis-theme-editor-helper/src/systemTheme/cxd.ts @@ -0,0 +1,1513 @@ +import type {ThemeDefinition} from '../helper/declares'; +import component from './component'; + +const cxdData: ThemeDefinition = { + config: { + name: '云舍', + key: 'cxd', + description: '系统预设主题' + }, + global: { + colors: { + brand: { + token: '--colors-brand-', + label: '品牌色', + body: { + common: [ + { + id: 'default', + label: '常规', + color: 4 + }, + { + id: 'active', + label: '点击', + color: 3 + }, + { + id: 'hover', + label: '悬浮', + color: 5 + }, + { + id: 'bg', + label: '背景', + color: 9 + } + ], + colors: [ + { + token: '--colors-brand-1', + label: '1-#001259', + color: '#001259', + index: 0 + }, + { + token: '--colors-brand-2', + label: '2-#001e80', + color: '#001e80', + index: 1 + }, + { + token: '--colors-brand-3', + label: '3-#0832a6', + color: '#0832a6', + index: 2 + }, + { + token: '--colors-brand-4', + label: '4-#144bcc', + color: '#144bcc', + index: 3 + }, + { + token: '--colors-brand-5', + label: '5-#2468f2', + color: '#2468f2', + index: 4 + }, + { + token: '--colors-brand-6', + label: '6-#528eff', + color: '#528eff', + index: 5 + }, + { + token: '--colors-brand-7', + label: '7-#7dadff', + color: '#7dadff', + index: 6 + }, + { + token: '--colors-brand-8', + label: '8-#a8caff', + color: '#a8caff', + index: 7 + }, + { + token: '--colors-brand-9', + label: '9-#d4e5ff', + color: '#d4e5ff', + index: 8 + }, + { + token: '--colors-brand-10', + label: '10-#e6f0ff', + color: '#e6f0ff', + index: 9 + } + ] + } + }, + neutral: { + token: '--colors-neutral-', + label: '中性色', + body: [ + { + token: '--colors-neutral-text-', + label: '文字', + body: { + common: [ + { + id: 'strong', + label: '强调/正文标题', + color: 1 + }, + { + id: 'lessStrong', + label: '次强调/正文标题', + color: 3 + }, + { + id: 'info', + label: '辅助说明', + color: 4 + }, + { + id: 'disabledInfo', + label: '禁用', + color: 5 + }, + { + id: 'white', + label: '纯白文字', + color: 10 + } + ], + colors: [ + { + token: '--colors-neutral-text-1', + label: '1-#070c14', + color: '#070c14', + index: 0 + }, + { + token: '--colors-neutral-text-2', + label: '2-#151b26', + color: '#151b26', + index: 1 + }, + { + token: '--colors-neutral-text-3', + label: '3-#303540', + color: '#303540', + index: 2 + }, + { + token: '--colors-neutral-text-4', + label: '4-#5c5f66', + color: '#5c5f66', + index: 3 + }, + { + token: '--colors-neutral-text-5', + label: '5-#84878c', + color: '#84878c', + index: 4 + }, + { + token: '--colors-neutral-text-6', + label: '6-#b8babf', + color: '#b8babf', + index: 5 + }, + { + token: '--colors-neutral-text-7', + label: '7-#d4d6d9', + color: '#d4d6d9', + index: 6 + }, + { + token: '--colors-neutral-text-8', + label: '8-#e8e9eb', + color: '#e8e9eb', + index: 7 + }, + { + token: '--colors-neutral-text-9', + label: '9-#f2f3f5', + color: '#f2f3f5', + index: 8 + }, + { + token: '--colors-neutral-text-10', + label: '10-#f7f8fa', + color: '#f7f8fa', + index: 9 + }, + { + token: '--colors-neutral-text-11', + label: '11-#ffffff', + color: '#ffffff', + index: 10 + } + ] + } + }, + { + token: '--colors-neutral-fill-', + label: '填充', + body: { + none: 'transparent', + common: [ + { + id: 'fill-white', + label: '纯白填充', + color: 10 + }, + { + id: 'fill-1', + label: '浅/禁用背景', + color: 9 + }, + { + id: 'fill-2', + label: '分割线', + color: 7 + }, + { + id: 'fill-3', + label: '深/灰底悬浮', + color: 6 + } + ], + colors: [ + { + token: '--colors-neutral-fill-1', + label: '1-#070c14', + color: '#070c14', + index: 0 + }, + { + token: '--colors-neutral-fill-2', + label: '2-#151b26', + color: '#151b26', + index: 1 + }, + { + token: '--colors-neutral-fill-3', + label: '3-#303540', + color: '#303540', + index: 2 + }, + { + token: '--colors-neutral-fill-4', + label: '4-#5c5f66', + color: '#5c5f66', + index: 3 + }, + { + token: '--colors-neutral-fill-5', + label: '5-#84878c', + color: '#84878c', + index: 4 + }, + { + token: '--colors-neutral-fill-6', + label: '6-#b8babf', + color: '#b8babf', + index: 5 + }, + { + token: '--colors-neutral-fill-7', + label: '7-#d4d6d9', + color: '#d4d6d9', + index: 6 + }, + { + token: '--colors-neutral-fill-8', + label: '8-#e8e9eb', + color: '#e8e9eb', + index: 7 + }, + { + token: '--colors-neutral-fill-9', + label: '9-#f2f3f5', + color: '#f2f3f5', + index: 8 + }, + { + token: '--colors-neutral-fill-10', + label: '10-#f7f8fa', + color: '#f7f8fa', + index: 9 + }, + { + token: '--colors-neutral-fill-11', + label: '11-#ffffff', + color: '#ffffff', + index: 10 + } + ] + } + }, + { + token: '--colors-neutral-line-', + label: '线条', + body: { + common: [ + { + id: 'line-1', + label: '浅', + color: 9 + }, + { + id: 'line-2', + label: '常规', + color: 7 + }, + { + id: 'line-3', + label: '深', + color: 5 + }, + { + id: 'line-4', + label: '重', + color: 3 + } + ], + colors: [ + { + token: '--colors-neutral-line-1', + label: '1-#070c14', + color: '#070c14', + index: 0 + }, + { + token: '--colors-neutral-line-2', + label: '2-#151b26', + color: '#151b26', + index: 1 + }, + { + token: '--colors-neutral-line-3', + label: '3-#303540', + color: '#303540', + index: 2 + }, + { + token: '--colors-neutral-line-4', + label: '4-#5c5f66', + color: '#5c5f66', + index: 3 + }, + { + token: '--colors-neutral-line-5', + label: '5-#84878c', + color: '#84878c', + index: 4 + }, + { + token: '--colors-neutral-line-6', + label: '6-#b8babf', + color: '#b8babf', + index: 5 + }, + { + token: '--colors-neutral-line-7', + label: '7-#d4d6d9', + color: '#d4d6d9', + index: 6 + }, + { + token: '--colors-neutral-line-8', + label: '8-#e8e9eb', + color: '#e8e9eb', + index: 7 + }, + { + token: '--colors-neutral-line-9', + label: '9-#f2f3f5', + color: '#f2f3f5', + index: 8 + }, + { + token: '--colors-neutral-line-10', + label: '10-#f7f8fa', + color: '#f7f8fa', + index: 9 + }, + { + token: '--colors-neutral-line-11', + label: '11-#ffffff', + color: '#ffffff', + index: 10 + } + ] + } + } + ] + }, + func: { + token: 'func', + label: '辅助色', + body: [ + { + token: '--colors-error-', + label: '失败色', + body: { + common: [ + { + id: 'default', + label: '常规', + color: 4 + }, + { + id: 'active', + label: '点击', + color: 3 + }, + { + id: 'hover', + label: '悬浮', + color: 5 + }, + { + id: 'bg', + label: '背景', + color: 9 + } + ], + colors: [ + { + token: '--colors-error-1', + label: '1-#590410', + color: '#590410', + index: 0 + }, + { + token: '--colors-error-2', + label: '2-#800d18', + color: '#800d18', + index: 1 + }, + { + token: '--colors-error-3', + label: '3-#a61922', + color: '#a61922', + index: 2 + }, + { + token: '--colors-error-4', + label: '4-#cc292e', + color: '#cc292e', + index: 3 + }, + { + token: '--colors-error-5', + label: '5-#f23d3d', + color: '#f23d3d', + index: 4 + }, + { + token: '--colors-error-6', + label: '6-#ff6966', + color: '#ff6966', + index: 5 + }, + { + token: '--colors-error-7', + label: '7-#ff908c', + color: '#ff908c', + index: 6 + }, + { + token: '--colors-error-8', + label: '8-#ffb6b3', + color: '#ffb6b3', + index: 7 + }, + { + token: '--colors-error-9', + label: '9-#ffdbd9', + color: '#ffdbd9', + index: 8 + }, + { + token: '--colors-error-10', + label: '10-#ffe8e6', + color: '#ffe8e6', + index: 9 + } + ] + } + }, + { + token: '--colors-warning-', + label: '警告色', + body: { + common: [ + { + id: 'default', + label: '常规', + color: 4 + }, + { + id: 'active', + label: '点击', + color: 3 + }, + { + id: 'hover', + label: '悬浮', + color: 5 + }, + { + id: 'bg', + label: '背景', + color: 9 + } + ], + colors: [ + { + token: '--colors-warning-1', + label: '1-#662500', + color: '#662500', + index: 0 + }, + { + token: '--colors-warning-2', + label: '2-#8c3800', + color: '#8c3800', + index: 1 + }, + { + token: '--colors-warning-3', + label: '3-#b35209', + color: '#b35209', + index: 2 + }, + { + token: '--colors-warning-4', + label: '4-#d97116', + color: '#d97116', + index: 3 + }, + { + token: '--colors-warning-5', + label: '5-#ff9326', + color: '#ff9326', + index: 4 + }, + { + token: '--colors-warning-6', + label: '6-#ffab52', + color: '#ffab52', + index: 5 + }, + { + token: '--colors-warning-7', + label: '7-#ffc27d', + color: '#ffc27d', + index: 6 + }, + { + token: '--colors-warning-8', + label: '8-#ffd8a8', + color: '#ffd8a8', + index: 7 + }, + { + token: '--colors-warning-9', + label: '9-#ffecd4', + color: '#ffecd4', + index: 8 + }, + { + token: '--colors-warning-10', + label: '10-#fff4e6', + color: '#fff4e6', + index: 9 + } + ] + } + }, + { + token: '--colors-success-', + label: '成功色', + body: { + common: [ + { + id: 'default', + label: '常规', + color: 4 + }, + { + id: 'active', + label: '点击', + color: 3 + }, + { + id: 'hover', + label: '悬浮', + color: 5 + }, + { + id: 'bg', + label: '背景', + color: 9 + } + ], + colors: [ + { + token: '--colors-success-1', + label: '1-#012600', + color: '#012600', + index: 0 + }, + { + token: '--colors-success-2', + label: '2-#054d00', + color: '#054d00', + index: 1 + }, + { + token: '--colors-success-3', + label: '3-#0b7300', + color: '#0b7300', + index: 2 + }, + { + token: '--colors-success-4', + label: '4-#1b9908', + color: '#1b9908', + index: 3 + }, + { + token: '--colors-success-5', + label: '5-#30bf13', + color: '#30bf13', + index: 4 + }, + { + token: '--colors-success-6', + label: '6-#54cc39', + color: '#54cc39', + index: 5 + }, + { + token: '--colors-success-7', + label: '7-#7bd964', + color: '#7bd964', + index: 6 + }, + { + token: '--colors-success-8', + label: '8-#a5e693', + color: '#a5e693', + index: 7 + }, + { + token: '--colors-success-9', + label: '9-#d1f2c7', + color: '#d1f2c7', + index: 8 + }, + { + token: '--colors-success-10', + label: '10-#ecffe6', + color: '#ecffe6', + index: 9 + } + ] + } + }, + { + token: '--colors-link-', + label: '链接色', + body: { + common: [ + { + id: 'default', + label: '常规', + color: 4 + }, + { + id: 'active', + label: '点击', + color: 3 + }, + { + id: 'hover', + label: '悬浮', + color: 5 + }, + { + id: 'bg', + label: '背景', + color: 9 + } + ], + colors: [ + { + token: '--colors-link-1', + label: '1-#001259', + color: '#001259', + index: 0 + }, + { + token: '--colors-link-2', + label: '2-#001e80', + color: '#001e80', + index: 1 + }, + { + token: '--colors-link-3', + label: '3-#0832a6', + color: '#0832a6', + index: 2 + }, + { + token: '--colors-link-4', + label: '4-#144bcc', + color: '#144bcc', + index: 3 + }, + { + token: '--colors-link-5', + label: '5-#2468f2', + color: '#2468f2', + index: 4 + }, + { + token: '--colors-link-6', + label: '6-#528eff', + color: '#528eff', + index: 5 + }, + { + token: '--colors-link-7', + label: '7-#7dadff', + color: '#7dadff', + index: 6 + }, + { + token: '--colors-link-8', + label: '8-#a8caff', + color: '#a8caff', + index: 7 + }, + { + token: '--colors-link-9', + label: '9-#d4e5ff', + color: '#d4e5ff', + index: 8 + }, + { + token: '--colors-link-10', + label: '10-#e6f0ff', + color: '#e6f0ff', + index: 9 + } + ] + } + }, + { + token: '--colors-info-', + label: '提示色', + body: { + common: [ + { + id: 'default', + label: '常规', + color: 4 + }, + { + id: 'active', + label: '点击', + color: 3 + }, + { + id: 'hover', + label: '悬浮', + color: 5 + }, + { + id: 'bg', + label: '背景', + color: 9 + } + ], + colors: [ + { + token: '--colors-info-1', + label: '1-#001259', + color: '#001259', + index: 0 + }, + { + token: '--colors-info-2', + label: '2-#001e80', + color: '#001e80', + index: 1 + }, + { + token: '--colors-info-3', + label: '3-#0832a6', + color: '#0832a6', + index: 2 + }, + { + token: '--colors-info-4', + label: '4-#144bcc', + color: '#144bcc', + index: 3 + }, + { + token: '--colors-info-5', + label: '5-#2468f2', + color: '#2468f2', + index: 4 + }, + { + token: '--colors-info-6', + label: '6-#528eff', + color: '#528eff', + index: 5 + }, + { + token: '--colors-info-7', + label: '7-#7dadff', + color: '#7dadff', + index: 6 + }, + { + token: '--colors-info-8', + label: '8-#a8caff', + color: '#a8caff', + index: 7 + }, + { + token: '--colors-info-9', + label: '9-#d4e5ff', + color: '#d4e5ff', + index: 8 + }, + { + token: '--colors-info-10', + label: '10-#e6f0ff', + color: '#e6f0ff', + index: 9 + } + ] + } + }, + { + token: '--colors-other-', + label: '其他色', + body: { + common: [ + { + id: 'default', + label: '常规', + color: 4 + }, + { + id: 'active', + label: '点击', + color: 3 + }, + { + id: 'hover', + label: '悬浮', + color: 5 + }, + { + id: 'bg', + label: '背景', + color: 9 + } + ], + colors: [ + { + token: '--colors-other-1', + label: '1-#001259', + color: '#001259', + index: 0 + }, + { + token: '--colors-other-2', + label: '2-#001e80', + color: '#001e80', + index: 1 + }, + { + token: '--colors-other-3', + label: '3-#0832a6', + color: '#0832a6', + index: 2 + }, + { + token: '--colors-other-4', + label: '4-#144bcc', + color: '#144bcc', + index: 3 + }, + { + token: '--colors-other-5', + label: '5-#2468f2', + color: '#2468f2', + index: 4 + }, + { + token: '--colors-other-6', + label: '6-#528eff', + color: '#528eff', + index: 5 + }, + { + token: '--colors-other-7', + label: '7-#7dadff', + color: '#7dadff', + index: 6 + }, + { + token: '--colors-other-8', + label: '8-#a8caff', + color: '#a8caff', + index: 7 + }, + { + token: '--colors-other-9', + label: '9-#d4e5ff', + color: '#d4e5ff', + index: 8 + }, + { + token: '--colors-other-10', + label: '10-#e6f0ff', + color: '#e6f0ff', + index: 9 + } + ] + } + } + ] + }, + data: { + label: '数据色', + body: [ + { + label: '默认', + token: 'dataColor1', + colors: [ + { + value: '#2468f2' + }, + { + value: '#aa24ed' + }, + { + value: '#e32262' + }, + { + value: '#855f14' + }, + { + value: '#3b8714' + }, + { + value: '#158a63' + }, + { + value: '#1c77b8' + } + ] + }, + { + label: '经典', + token: 'dataColor2', + colors: [ + { + value: '#2468f2' + }, + { + value: '#c01fcf' + }, + { + value: '#cc3b1f' + }, + { + value: '#4f7a12' + }, + { + value: '#158f48' + }, + { + value: '#1c77b8' + }, + { + value: '#8437f0' + } + ] + }, + { + label: '过渡', + token: 'dataColor3', + colors: [ + { + value: '#2468f2' + }, + { + value: '#4856f0' + }, + { + value: '#6347ed' + }, + { + value: '#8437f0' + }, + { + value: '#aa24ed' + }, + { + value: '#c01fcf' + }, + { + value: '#cc1faf' + } + ] + } + ] + } + }, + fonts: { + base: { + label: '基础字体', + token: '--fonts-base-family', + body: [ + { + value: '-apple-system' + }, + { + value: 'BlinkMacSystemFont' + }, + { + value: 'SF Pro SC' + }, + { + value: 'SF Pro Text' + }, + { + value: 'Helvetica Neue' + }, + { + value: 'Helvetica' + }, + { + value: 'PingFang SC' + }, + { + value: 'Segoe UI' + }, + { + value: 'Roboto' + }, + { + value: 'Hiragino Sans GB' + }, + { + value: 'Arial' + }, + { + value: 'microsoft yahei ui' + }, + { + value: 'Microsoft YaHei' + }, + { + value: 'SimSun' + }, + { + value: 'sans-serif' + } + ] + }, + size: { + label: '字号', + token: '--fonts-size-', + body: [ + { + label: '运营标题-大', + token: '--fonts-size-1', + value: '48px' + }, + { + label: '运营标题-中', + token: '--fonts-size-2', + value: '40px' + }, + { + label: '运营标题-小', + token: '--fonts-size-3', + value: '32px' + }, + { + label: '标题-大', + token: '--fonts-size-4', + value: '24px' + }, + { + label: '标题-中', + token: '--fonts-size-5', + value: '18px' + }, + { + label: '标题-小', + token: '--fonts-size-6', + value: '16px' + }, + { + label: '正文-常规-大', + token: '--fonts-size-7', + value: '14px' + }, + { + label: '正文-常规-小', + token: '--fonts-size-8', + value: '12px' + }, + { + label: '水印文字', + token: '--fonts-size-9', + value: '12px' + } + ] + }, + lineHeight: { + label: '行高', + token: '--fonts-lineHeight-', + body: [ + { + label: 'Line-height-1', + token: '--fonts-lineHeight-1', + value: 1.3 + }, + { + label: 'Line-height-2', + token: '--fonts-lineHeight-2', + value: 1.5 + }, + { + label: 'Line-height-3', + token: '--fonts-lineHeight-3', + value: 1.7 + } + ] + }, + weight: { + label: '字重', + token: '--fonts-weight-', + body: [ + { + label: 'Ultra bold(heavy)', + token: '--fonts-weight-1', + value: 900 + }, + { + label: 'Extra bold', + token: '--fonts-weight-2', + value: 800 + }, + { + label: 'Blod', + token: '--fonts-weight-3', + value: 700 + }, + { + label: 'Semi bold', + token: '--fonts-weight-4', + value: 600 + }, + { + label: 'Medium', + token: '--fonts-weight-5', + value: 500 + }, + { + label: 'Regular', + token: '--fonts-weight-6', + value: 400 + }, + { + label: 'Light', + token: '--fonts-weight-7', + value: 300 + }, + { + label: 'Extra light(thin)', + token: '--fonts-weight-8', + value: 200 + }, + { + label: 'Uitra light', + token: '--fonts-weight-9', + value: 100 + } + ] + } + }, + borders: { + width: { + label: '粗细', + token: '--borders-width-', + body: [ + { + label: '无', + disabled: true, + token: '--borders-width-1', + value: '0px' + }, + { + label: '常规', + token: '--borders-width-2', + value: '1px' + }, + { + label: '中粗', + token: '--borders-width-3', + value: '2px' + }, + { + label: '特粗', + token: '--borders-width-4', + value: '4px' + } + ] + }, + style: { + label: '样式', + token: '--borders-style-', + body: [ + { + label: '无', + disabled: true, + token: '--borders-style-1', + value: 'none' + }, + { + label: '实线', + token: '--borders-style-2', + value: 'solid' + }, + { + label: '虚线', + token: '--borders-style-3', + value: 'dashed' + }, + { + label: '点线', + token: '--borders-style-4', + value: 'dotted' + } + ] + }, + radius: { + label: '圆角', + token: '--borders-radius-', + body: [ + { + label: '无', + disabled: true, + token: '--borders-radius-1', + value: '0px' + }, + { + label: '圆角1', + token: '--borders-radius-2', + value: '2px' + }, + { + label: '圆角2', + token: '--borders-radius-3', + value: '4px' + }, + { + label: '圆角3', + token: '--borders-radius-4', + value: '6px' + }, + { + label: '圆角4', + token: '--borders-radius-5', + value: '8px' + }, + { + label: '圆角5', + token: '--borders-radius-6', + value: '10px' + }, + { + label: '圆角6', + token: '--borders-radius-7', + value: '50%' + } + ] + } + }, + sizes: { + size: { + label: '尺寸', + token: '--sizes-size-', + base: 0.125, + start: '0.125rem', + body: [ + { + label: '无', + disabled: true, + token: '--sizes-size-0', + value: '0rem' + }, + { + label: 'auto', + disabled: true, + token: '--sizes-size-1', + value: 'auto' + }, + { + label: '特小', + token: '--sizes-size-2', + value: '0.125rem' + }, + { + label: '极小', + token: '--sizes-size-3', + value: '0.25rem' + }, + { + label: '小', + token: '--sizes-size-4', + value: '0.375rem' + }, + { + label: '正常', + token: '--sizes-size-5', + value: '0.5rem' + }, + { + label: '中', + token: '--sizes-size-6', + value: '0.625rem' + }, + { + label: '大', + token: '--sizes-size-7', + value: '0.75rem' + }, + { + label: '极大', + token: '--sizes-size-8', + value: '0.875rem' + }, + { + label: '特大', + token: '--sizes-size-9', + value: '1rem' + } + ] + } + }, + shadows: { + shadow: { + label: '阴影', + token: '--shadows-shadow-', + body: [ + { + label: '无阴影', + disabled: true, + token: '--shadows-shadow-none', + value: [ + { + inset: false, + x: '0px', + y: '0px', + blur: '0px', + spread: '0px', + color: 'transparent' + } + ] + }, + { + label: '阴影sm', + token: '--shadows-shadow-sm', + value: [ + { + inset: false, + x: '0px', + y: '1px', + blur: '2px', + spread: '0px', + color: 'rgba(0, 0, 0, 0.05)' + } + ] + }, + { + label: '阴影', + token: '--shadows-shadow-normal', + value: [ + { + inset: false, + x: '0px', + y: '1px', + blur: '3px', + spread: '0px', + color: 'rgba(0, 0, 0, 0.1)' + }, + { + inset: false, + x: '0px', + y: '1px', + blur: '2px', + spread: '0px', + color: 'rgba(0, 0, 0, 0.06)' + } + ] + }, + { + label: '阴影md', + token: '--shadows-shadow-md', + value: [ + { + inset: false, + x: '0px', + y: '4px', + blur: '-1px', + spread: '0px', + color: 'rgba(0, 0, 0, 0.1)' + }, + { + inset: false, + x: '0px', + y: '2px', + blur: '4px', + spread: '-1px', + color: 'rgba(0, 0, 0, 0.06)' + } + ] + }, + { + label: '阴影lg', + token: '--shadows-shadow-lg', + value: [ + { + inset: false, + x: '0px', + y: '10px', + blur: '15px', + spread: '-3px', + color: 'rgba(0, 0, 0, 0.1)' + }, + { + inset: false, + x: '0px', + y: '4px', + blur: '6px', + spread: '-2px', + color: 'rgba(0, 0, 0, 0.05)' + } + ] + }, + { + label: '阴影xl', + token: '--shadows-shadow-xl', + value: [ + { + inset: false, + x: '0px', + y: '20px', + blur: '25px', + spread: '-5px', + color: 'rgba(0, 0, 0, 0.1)' + }, + { + inset: false, + x: '0px', + y: '10px', + blur: '10px', + spread: '-5px', + color: 'rgba(0, 0, 0, 0.04)' + } + ] + }, + { + label: '阴影2xl', + token: '--shadows-shadow-2xl', + value: [ + { + inset: false, + x: '0px', + y: '25px', + blur: '50px', + spread: '-12px', + color: 'rgba(0, 0, 0, 0.25)' + } + ] + } + ] + } + } + }, + component +}; +export default cxdData; diff --git a/packages/amis-theme-editor-helper/src/systemTheme/index.ts b/packages/amis-theme-editor-helper/src/systemTheme/index.ts new file mode 100644 index 000000000..fde3520b1 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/systemTheme/index.ts @@ -0,0 +1,3 @@ +import cxdData from './cxd'; +import antdData from './antd'; +export {cxdData, antdData}; diff --git a/packages/amis-theme-editor-helper/src/util.ts b/packages/amis-theme-editor-helper/src/util.ts new file mode 100644 index 000000000..c6df987d6 --- /dev/null +++ b/packages/amis-theme-editor-helper/src/util.ts @@ -0,0 +1,156 @@ +import cloneDeep from 'lodash/cloneDeep'; + +/** + * 根据路径获取默认值 + */ +export function getValueByPath(path: string | string[], data: any): any { + try { + if (!path || !data) { + return null; + } + let res = {}; + const getValue = (p: string) => { + const keys = p.split('.'); + let value = cloneDeep(data.themeConfig.component); + let defaultToken = ''; + for (let i = 0; i < keys.length; i++) { + let key = keys[i]; + const isVar = /\$\{(.*)\}/.exec(key) || []; + if (isVar[1]) { + key = data[isVar[1]] || 'default'; + } + + if (Array.isArray(value)) { + value = value.find(n => n.type === key); + } else { + if (key === 'hover' || key === 'active' || key === 'disabled') { + defaultToken = value['default'].token; + } + value = value[key]; + } + } + if (defaultToken && value) { + // 继承default + if (typeof value === 'object') { + for (let key in value) { + if (value[key] === `var(${defaultToken}${key})`) { + value[key] = 'inherit'; + } + } + } else { + if (value === `var(${defaultToken}${keys[keys.length - 1]})`) { + value = 'inherit'; + } + } + } + return value; + }; + if (Array.isArray(path)) { + path.forEach(p => { + let value = getValue(p); + if (typeof value === 'string') { + value = {color: value}; + } + res = Object.assign(res, value); + }); + } else { + res = getValue(path); + } + return res; + } catch (e) { + return null; + } +} + +/** + * 获取继承值 + */ +export function getInheritValue(path: string | string[], data: any): any { + try { + if (!path || !data) { + return null; + } + let res = {}; + const getValue = (p: string) => { + const keys = p.split('.'); + let value = cloneDeep(data.themeConfig.component); + let defaultToken = ''; + for (let i = 0; i < keys.length; i++) { + let key = keys[i]; + const isVar = /\$\{(.*)\}/.exec(key) || []; + if (isVar[1]) { + key = data[isVar[1]] || 'default'; + } + + if (Array.isArray(value)) { + value = value.find(n => n.type === key); + } else { + if (key === 'hover' || key === 'active' || key === 'disabled') { + defaultToken = value['default'].token; + value = value['default']; + } else { + value = value[key]; + } + } + + if (!value) { + break; + } + } + if (defaultToken && value) { + return value; + } + return null; + }; + if (Array.isArray(path)) { + path.forEach(p => { + let value = getValue(p); + if (typeof value === 'string') { + value = {color: value}; + } + res = Object.assign(res, value); + }); + } else { + res = getValue(path); + } + return res; + } catch (e) { + return null; + } +} + +// 处理传入的继承数据 +export function formatInheritData(data: any) { + if (typeof data === 'string' && data.indexOf('inherit:') > -1) { + return 'inherit'; + } + if (!data || typeof data !== 'object') { + return data; + } + data = cloneDeep(data); + for (let key in data) { + if (typeof data[key] === 'string' && data[key].indexOf('inherit:') > -1) { + data[key] = 'inherit'; + } + } + return data; +} + +// 设置继承数据 +export function setInheritData(value: any, editorInheritValue: any) { + if (value && editorInheritValue) { + if (typeof value === 'string') { + if (value === 'inherit') { + value = 'inherit:' + (editorInheritValue || ''); + } + } else { + value = cloneDeep(value); + for (let key in value) { + if (value[key] === 'inherit') { + value[key] = 'inherit:' + (editorInheritValue[key] || ''); + } + } + } + } + return value; +} diff --git a/packages/amis-theme-editor-helper/tsconfig.json b/packages/amis-theme-editor-helper/tsconfig.json new file mode 100644 index 000000000..510bd5e0b --- /dev/null +++ b/packages/amis-theme-editor-helper/tsconfig.json @@ -0,0 +1,18 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "lib", + "rootDir": "./src", + "typeRoots": [ + "../../types", + "./node_modules/@types", + "../../node_modules/@types" + ] + }, + "include": ["src/**/*"], + "references": [ + {"path": "../amis"}, + {"path": "../amis-ui"}, + {"path": "../amis-core"} + ] +} diff --git a/packages/amis-theme-editor-helper/typings.ts b/packages/amis-theme-editor-helper/typings.ts new file mode 100644 index 000000000..800c1afec --- /dev/null +++ b/packages/amis-theme-editor-helper/typings.ts @@ -0,0 +1,5 @@ +declare module '*.json' { + const value: any; + export default value; +} +declare module 'plugin-react-i18n'; diff --git a/packages/amis-ui/src/components/TooltipWrapper.tsx b/packages/amis-ui/src/components/TooltipWrapper.tsx index 2a292b35f..add73d052 100644 --- a/packages/amis-ui/src/components/TooltipWrapper.tsx +++ b/packages/amis-ui/src/components/TooltipWrapper.tsx @@ -109,6 +109,7 @@ export interface TooltipWrapperProps { */ onVisibleChange?: (visible: boolean) => void; children?: React.ReactNode | Array; + disabled?: boolean; } interface TooltipWrapperState { diff --git a/publish-theme.sh b/publish-theme.sh new file mode 100644 index 000000000..b0449eacb --- /dev/null +++ b/publish-theme.sh @@ -0,0 +1,93 @@ +#!/bin/bash +set -e +source ./scripts/utils.sh + +echo "请选择发布内网or外网：" +publish_types=("internal" "external") + +select_option "${publish_types[@]}" + +publish_type=$selected_option + +echo "请选择发布版本的类型：" + +options=("latest" "beta" "alpha" "custom") + +select_option "${options[@]}" + +if [ "$selected_option" == "custom" ]; then + read -p "请自定义输入版本: " version + npm_get_tag $version + tag=$npm_tag +else + tag=$selected_option + if [ "$publish_type" == "internal" ]; then + current_version=`npm show @fex/amis-theme-editor-helper@${tag} version --registry=http://registry.npm.baidu-int.com` + else + current_version=`npm show amis-theme-editor-helper@${tag} version` + fi + if [ -z "${current_version}" ]; then + echo "没有找到的${tag}版本" + read -p "请自定义输入版本: " version + npm_get_tag $version + tag=$npm_tag + else + echo "当前版本：${current_version}" + npm_version $current_version $tag + version=$new_version + read -p "确认更新y or n: " confirm + if [ "$confirm" != "y" ]; then + read -p "请自定义输入版本: " version + npm_get_tag $version + tag=$npm_tag + fi + fi +fi + +sed -i '' -e 's/\"version\": \".*\"/\"version\": \"'${version}'\"/g' ./packages/amis-theme-editor-helper/package.json + +npm run build --workspace=amis-theme-editor-helper + +rm -rf theme-npm + +mkdir -p theme-npm/amis-theme-editor-helper + +cp -rf packages/amis-theme-editor-helper/lib theme-npm/amis-theme-editor-helper +cp -rf packages/amis-theme-editor-helper/esm theme-npm/amis-theme-editor-helper +cp packages/amis-theme-editor-helper/package.json theme-npm/amis-theme-editor-helper + +cd theme-npm/amis-theme-editor-helper + +if [ "$publish_type" == "internal" ]; then + # package.json 里面把包名称换了 + for f in $(find ./ -name "package.json"); do + sed -i '' -e 's/\"name\": \"amis/\"name\": \"@fex\/amis/g' $f + sed -i '' -e 's/\"amis-/\"@fex\/amis-/g' $f + sed -i '' -e 's/\"amis\":/\"@fex\/amis\":/g' $f + sed -i '' -e 's/\"i18n-runtime\":/\"@fex\/i18n-runtime\":/g' $f + done + + # 把代码里面import的部分换成内部包名称 + for f in $(find ./ -type f -name "*.[tj]s"); do + # 正则那个 | 用不了，还不知道为何 + #sed -i '' -e "s#\('|\"\)\(amis|amis-formula|amis-core|amis-ui|amis-editor|amis-editor-core\)\('|\"|\/\)#\1@fex\/\2\3#g" $f + + sed -i '' -e "s#'\(amis\)\(['\"/]\)#'@fex\/\1\2#g" $f + sed -i '' -e "s#\"\(amis\)\(['\"/]\)#\"@fex\/\1\2#g" $f + + sed -i '' -e "s#'\(amis-core\)\(['\"/]\)#'@fex\/\1\2#g" $f + sed -i '' -e "s#\"\(amis-core\)\(['\"/]\)#\"@fex\/\1\2#g" $f + + sed -i '' -e "s#'\(amis-ui\)\(['\"/]\)#'@fex\/\1\2#g" $f + sed -i '' -e "s#\"\(amis-ui\)\(['\"/]\)#\"@fex\/\1\2#g" $f + + sed -i '' -e "s#'\(i18n-runtime\)\(['\"/]\)#'@fex\/\1\2#g" $f + sed -i '' -e "s#\"\(i18n-runtime\)\(['\"/]\)#\"@fex\/\1\2#g" $f + done + + npm publish --tag=$tag --registry=http://registry.npm.baidu-int.com +else + npm publish --tag=$tag +fi + + diff --git a/scripts/utils.sh b/scripts/utils.sh new file mode 100644 index 000000000..7da4823d0 --- /dev/null +++ b/scripts/utils.sh @@ -0,0 +1,83 @@ +#!/bin/bash + +render_option() { + for index in "${!choices[@]}"; do + if [ $index -eq $1 ]; then + printf "\033[31m> ${choices[$index]}\033[0m\n" # 高亮显示选中的选项 + else + echo " ${choices[$index]}" + fi + done +} + +clear_screen() { + local len=$1 + echo "\033[${len}A\033[K" + for ((i=1;i<$len;i++)); do + echo "\033[K" + done + echo "\033[$((${len} + 1))A" + +} + +select_option() { + choices=("$@") # 将选项数组声明为全局变量 + local selected=0 # 初始化选择索引 + local choices_lenght=${#choices[@]} # 获取选项数组长度 + render_option $selected + while true; do + read -n1 -s key # 读取单个按键并保持输入的隐私 + case "$key" in + A) # 上箭头 + if [ $selected -gt 0 ]; then + selected=$((selected - 1)) + else + selected=$(($choices_lenght - 1)) + fi + clear_screen $choices_lenght + render_option $selected + ;; + B) # 下箭头 + if [ $selected -lt $(($choices_lenght - 1)) ]; then + selected=$((selected + 1)) + else + selected=0 + fi + clear_screen $choices_lenght + render_option $selected + ;; + "") # 回车键 + break + ;; + esac + done + + # 打印最终结果日志 + selected_option="${choices[$selected]}" +} + +npm_version() { + local current_version=$1 + local tag=$2 + IFS='.-' read -r major minor patch pre_release pre_release_version <<< "$current_version" + if [ $tag = $pre_release ]; then + ((pre_release_version++)) + new_version="$major.$minor.$patch-$tag.$pre_release_version" + else + ((patch++)) + new_version="$major.$minor.$patch" + fi + + echo "新版本为：$new_version" +} + +npm_get_tag() { + IFS='.-' read -r major minor patch pre_release pre_release_version <<< "$1" + if [ "$pre_release" ]; then + npm_tag=$pre_release + else + npm_tag="latest" + fi + echo "发布tag为: $npm_tag" +} + diff --git a/tsconfig.json b/tsconfig.json index 5dc684d29..c5824458a 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -29,7 +29,10 @@ "amis": ["./packages/amis/src/index.tsx"], "office-viewer": ["./packages/office-viewer/src/index.ts"], "amis-editor-core": ["./packages/amis-editor-core/src/index.ts"], - "amis-editor": ["./packages/amis-editor/src/index.tsx"] + "amis-editor": ["./packages/amis-editor/src/index.tsx"], + "amis-theme-editor-helper": [ + "./packages/amis-theme-editor-helper/src/index.ts" + ] } }, "watchOptions": { diff --git a/vite.config.ts b/vite.config.ts index 17c70cc06..c90ada657 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -14,25 +14,6 @@ import i18nConfig from './i18nConfig'; var I18N = process.env.I18N; -var PROXY_THEME = process.env.PROXY_THEME - ? [ - { - find: 'amis-theme-editor/lib/renderers.css', - replacement: path.resolve( - __dirname, - '../editor/packages/amis-theme-editor/src/renderers/style/_index.scss' - ) - }, - { - find: 'amis-theme-editor/lib', - replacement: path.resolve( - __dirname, - '../editor/packages/amis-theme-editor/src' - ) - } - ] - : []; - // https://vitejs.dev/config/ export default defineConfig({ plugins: [ @@ -126,7 +107,14 @@ export default defineConfig({ { find: 'office-viewer', replacement: path.resolve(__dirname, './packages/office-viewer/src') + }, + { + find: 'amis-theme-editor-helper', + replacement: path.resolve( + __dirname, + './packages/amis-theme-editor-helper/src' + ) } - ].concat(PROXY_THEME) + ] } });