From d6763c619dfa46806ebd5b4a7182c1dc2964aeae Mon Sep 17 00:00:00 2001 From: James-9696 Date: Tue, 2 Jul 2024 23:19:43 -0700 Subject: [PATCH 01/14] feat: add package of opentiny/tiny-engine-theme-base --- .../src/vite-plugins/devAliasPlugin.js | 1 + packages/design-core/package.json | 1 + packages/design-core/src/init.js | 4 +- packages/layout/src/DesignSettings.vue | 2 +- packages/plugins/bridge/src/Main.vue | 1 + .../materials/src/meta/layout/src/Main.vue | 1 + packages/settings/panel/src/Main.vue | 2 +- packages/theme/base/package.json | 30 ++ packages/theme/base/src/base.js | 301 ++++++++++++++++++ packages/theme/base/src/dark-component.js | 20 ++ packages/theme/base/src/index.js | 15 + packages/theme/base/src/light-component.js | 20 ++ packages/theme/base/vite.config.js | 27 ++ 13 files changed, 421 insertions(+), 4 deletions(-) create mode 100644 packages/theme/base/package.json create mode 100644 packages/theme/base/src/base.js create mode 100644 packages/theme/base/src/dark-component.js create mode 100644 packages/theme/base/src/index.js create mode 100644 packages/theme/base/src/light-component.js create mode 100644 packages/theme/base/vite.config.js diff --git a/packages/build/vite-config/src/vite-plugins/devAliasPlugin.js b/packages/build/vite-config/src/vite-plugins/devAliasPlugin.js index 5d07954d0..1b5dbf64c 100644 --- a/packages/build/vite-config/src/vite-plugins/devAliasPlugin.js +++ b/packages/build/vite-config/src/vite-plugins/devAliasPlugin.js @@ -47,6 +47,7 @@ const devAlias = { ), '@opentiny/tiny-engine-theme-dark': path.resolve(process.cwd(), '../packages/theme/dark/index.less'), '@opentiny/tiny-engine-theme-light': path.resolve(process.cwd(), '../packages/theme/light/index.less'), + '@opentiny/tiny-engine-theme-base': path.resolve(process.cwd(), '../packages/theme/base/src/index.js'), '@opentiny/tiny-engine-svgs': path.resolve(process.cwd(), '../packages/svgs/index.js'), '@opentiny/tiny-engine-http': path.resolve(process.cwd(), '../packages/http/src/index.js'), '@opentiny/tiny-engine-canvas': path.resolve(process.cwd(), '../packages/canvas/index.js'), diff --git a/packages/design-core/package.json b/packages/design-core/package.json index effb39fe1..b5ded7ffc 100644 --- a/packages/design-core/package.json +++ b/packages/design-core/package.json @@ -71,6 +71,7 @@ "@opentiny/tiny-engine-svgs": "workspace:*", "@opentiny/tiny-engine-theme-dark": "workspace:*", "@opentiny/tiny-engine-theme-light": "workspace:*", + "@opentiny/tiny-engine-theme-base": "workspace:*", "@opentiny/tiny-engine-toolbar-breadcrumb": "workspace:*", "@opentiny/tiny-engine-toolbar-checkinout": "workspace:*", "@opentiny/tiny-engine-toolbar-clean": "workspace:*", diff --git a/packages/design-core/src/init.js b/packages/design-core/src/init.js index e772b44c5..065ffa3c2 100644 --- a/packages/design-core/src/init.js +++ b/packages/design-core/src/init.js @@ -17,7 +17,7 @@ import { initMonitor } from '@opentiny/tiny-engine-common/js/monitor' import { injectGlobalComponents, setGlobalMonacoEditorTheme, Modal, Notify } from '@opentiny/tiny-engine-common' import { initHttp } from '@opentiny/tiny-engine-http' import TinyThemeTool from '@opentiny/vue-theme/theme-tool' -import { tinySmbTheme } from '@opentiny/vue-theme/theme' // SMB 主题 +import { tinyEngineThemeLight } from '@opentiny/tiny-engine-theme-base' import { defineEntry, mergeRegistry, @@ -52,7 +52,7 @@ const defaultLifeCycles = { initHttp({ env: import.meta.env }) // eslint-disable-next-line no-new - new TinyThemeTool(tinySmbTheme, 'smbtheme') // 初始化主题 + new TinyThemeTool(tinyEngineThemeLight, 'tinyEngineTheme') // 初始化主题 if (import.meta.env.VITE_ERROR_MONITOR === 'true' && import.meta.env.VITE_ERROR_MONITOR_URL) { initMonitor(import.meta.env.VITE_ERROR_MONITOR_URL) diff --git a/packages/layout/src/DesignSettings.vue b/packages/layout/src/DesignSettings.vue index a6288c22c..43fb6ce34 100644 --- a/packages/layout/src/DesignSettings.vue +++ b/packages/layout/src/DesignSettings.vue @@ -71,7 +71,7 @@ export default { flex: 1; overflow-y: scroll; padding: 0; - margin-top: 0; + margin: 0; } .tiny-tabs__item { color: var(--ti-lowcode-setting-panel-tabs-item-title-color); diff --git a/packages/plugins/bridge/src/Main.vue b/packages/plugins/bridge/src/Main.vue index 4621b9b98..8a22f9713 100644 --- a/packages/plugins/bridge/src/Main.vue +++ b/packages/plugins/bridge/src/Main.vue @@ -99,6 +99,7 @@ export default { :deep(.tiny-tabs__content) { height: calc(100% - 45px); padding: 0; + margin: 0; & > div { height: 100%; } diff --git a/packages/plugins/materials/src/meta/layout/src/Main.vue b/packages/plugins/materials/src/meta/layout/src/Main.vue index 4e786ef78..718d62cc3 100644 --- a/packages/plugins/materials/src/meta/layout/src/Main.vue +++ b/packages/plugins/materials/src/meta/layout/src/Main.vue @@ -99,6 +99,7 @@ export default { flex: 1; overflow-y: scroll; padding: 0; + margin: 0px; & > div { height: 100%; } diff --git a/packages/settings/panel/src/Main.vue b/packages/settings/panel/src/Main.vue index c0ef43c93..17e77f18a 100644 --- a/packages/settings/panel/src/Main.vue +++ b/packages/settings/panel/src/Main.vue @@ -70,7 +70,7 @@ export default { flex: 1; overflow-y: scroll; padding: 0; - margin-top: 0; + margin: 0; } .tiny-tabs__item { color: var(--ti-lowcode-setting-panel-tabs-item-title-color); diff --git a/packages/theme/base/package.json b/packages/theme/base/package.json new file mode 100644 index 000000000..74583fd7a --- /dev/null +++ b/packages/theme/base/package.json @@ -0,0 +1,30 @@ +{ + "name": "@opentiny/tiny-engine-theme-base", + "version": "1.0.0", + "publishConfig": { + "access": "public" + }, + "scripts": { + "build": "vite build" + }, + "main": "dist/index.js", + "files": [ + "dist" + ], + "repository": { + "type": "git", + "url": "https://github.com/opentiny/tiny-engine", + "directory": "packages/theme/base" + }, + "bugs": { + "url": "https://github.com/opentiny/tiny-engine/issues" + }, + "author": "OpenTiny Team", + "license": "MIT", + "homepage": "https://opentiny.design/tiny-engine", + "dependencies": {}, + "devDependencies": { + "rimraf": "^3.0.2", + "vite": "^4.3.7" + } +} diff --git a/packages/theme/base/src/base.js b/packages/theme/base/src/base.js new file mode 100644 index 000000000..5e6ba2504 --- /dev/null +++ b/packages/theme/base/src/base.js @@ -0,0 +1,301 @@ +export const tinyBaseTheme = { + // 灰阶 + 'ti-lowcode-base-gray-0': '#fff', + 'ti-lowcode-base-gray-5': '#fafafa', + 'ti-lowcode-base-gray-10': '#f5f5f5', + 'ti-lowcode-base-gray-15': '#f0f0f0', + 'ti-lowcode-base-gray-20': '#e6e6e6', + 'ti-lowcode-base-gray-25': '#d9d9d9', + 'ti-lowcode-base-gray-30': '#dbdbdb', + 'ti-lowcode-base-gray-35': '#ccc', + 'ti-lowcode-base-gray-40': '#c2c2c2', + 'ti-lowcode-base-gray-45': '#a6a6a6', + 'ti-lowcode-base-gray-50': '#808080', + 'ti-lowcode-base-gray-60': '#595959', + 'ti-lowcode-base-gray-70': '#333', + 'ti-lowcode-base-gray-75': '#262626', + 'ti-lowcode-base-gray-80': '#292929', + 'ti-lowcode-base-gray-85': '#1f1f1f', + 'ti-lowcode-base-gray-90': '#141414', + 'ti-lowcode-base-gray-95': '#191919', + 'ti-lowcode-base-gray-100': '#000', + + // expand-red + 'ti-lowcode-base-red-1': '#ffeae8', + 'ti-lowcode-base-red-2': '#fccdca', + 'ti-lowcode-base-red-3': '#faa9a5', + 'ti-lowcode-base-red-4': '#fa8682', + 'ti-lowcode-base-red-5': '#f76360', + 'ti-lowcode-base-red-6': '#f23030', + 'ti-lowcode-base-red-7': '#cc272a', + 'ti-lowcode-base-red-8': '#a3171c', + 'ti-lowcode-base-red-9': '#78080e', + 'ti-lowcode-base-red-10': '#4d0005', + 'ti-lowcode-base-red-11': '#a64242', + 'ti-lowcode-base-red-12': '#d4827f', + 'ti-lowcode-base-red-13': '#f2c5c2', + + // expand-orange + 'ti-lowcode-base-orange-1': '#fff5e8', + 'ti-lowcode-base-orange-2': '#fcdfb8', + 'ti-lowcode-base-orange-3': '#fcc98b', + 'ti-lowcode-base-orange-4': '#fcb25c', + 'ti-lowcode-base-orange-5': '#ff9a2e', + 'ti-lowcode-base-orange-6': '#ff8800', + 'ti-lowcode-base-orange-7': '#d96900', + 'ti-lowcode-base-orange-8': '#a64d00', + 'ti-lowcode-base-orange-9': '#733400', + 'ti-lowcode-base-orange-10': '#4d2201', + 'ti-lowcode-base-orange-11': '#9e6d3f', + 'ti-lowcode-base-orange-12': '#d6a981', + 'ti-lowcode-base-orange-13': '#f2d8c2', + + // expand-yellow + 'ti-lowcode-base-yellow-1': '#fcf9eb', + 'ti-lowcode-base-yellow-2': '#fcf0c2', + 'ti-lowcode-base-yellow-3': '#fae396', + 'ti-lowcode-base-yellow-4': '#f7d56d', + 'ti-lowcode-base-yellow-5': '#f7c845', + 'ti-lowcode-base-yellow-6': '#fcbe1e', + 'ti-lowcode-base-yellow-7': '#d99b0b', + 'ti-lowcode-base-yellow-8': '#a67711', + 'ti-lowcode-base-yellow-9': '#7a5202', + 'ti-lowcode-base-yellow-10': '#4d3200', + 'ti-lowcode-base-yellow-11': '#9e7e3f', + 'ti-lowcode-base-yellow-12': '#d4b57f', + 'ti-lowcode-base-yellow-13': '#e6d3b8', + + // expand-lemon + 'ti-lowcode-base-lemon-1': '#fcfae8', + 'ti-lowcode-base-lemon-2': '#fcf6c2', + 'ti-lowcode-base-lemon-3': '#fcf092', + 'ti-lowcode-base-lemon-4': '#fae969', + 'ti-lowcode-base-lemon-5': '#f7e04a', + 'ti-lowcode-base-lemon-6': '#f7d916', + 'ti-lowcode-base-lemon-7': '#d9bb16', + 'ti-lowcode-base-lemon-8': '#a38708', + 'ti-lowcode-base-lemon-9': '#756002', + 'ti-lowcode-base-lemon-10': '#4d3d00', + 'ti-lowcode-base-lemon-11': '#9e8f46', + 'ti-lowcode-base-lemon-12': '#d6c581', + 'ti-lowcode-base-lemon-13': '#eddfb2', + + // expand-lime + 'ti-lowcode-base-lime-1': '#f8fae3', + 'ti-lowcode-base-lime-2': '#eff5bf', + 'ti-lowcode-base-lime-3': '#e2ed8e', + 'ti-lowcode-base-lime-4': '#d5e667', + 'ti-lowcode-base-lime-5': '#c6de3e', + 'ti-lowcode-base-lime-6': '#b2d119', + 'ti-lowcode-base-lime-7': '#95b312', + 'ti-lowcode-base-lime-8': '#728c0a', + 'ti-lowcode-base-lime-9': '#576e05', + 'ti-lowcode-base-lime-10': '#3b4d00', + 'ti-lowcode-base-lime-11': '#808c46', + 'ti-lowcode-base-lime-12': '#c1cc7a', + 'ti-lowcode-base-lime-13': '#3b4d00', + + // expand-kelly + 'ti-lowcode-base-kelly-1': '#f2fae6', + 'ti-lowcode-base-kelly-2': '#daf2bb', + 'ti-lowcode-base-kelly-3': '#b9e683', + 'ti-lowcode-base-kelly-4': '#9edb58', + 'ti-lowcode-base-kelly-5': '#7dcc29', + 'ti-lowcode-base-kelly-6': '#5cb300', + 'ti-lowcode-base-kelly-7': '#4b9902', + 'ti-lowcode-base-kelly-8': '#3c8001', + 'ti-lowcode-base-kelly-9': '#2e6600', + 'ti-lowcode-base-kelly-10': '#1f4700', + 'ti-lowcode-base-kelly-11': '#628c38', + 'ti-lowcode-base-kelly-12': '#a2c777', + 'ti-lowcode-base-kelly-13': '#d2e6bb', + + // expand-green + 'ti-lowcode-base-green-1': '#e8fced', + 'ti-lowcode-base-green-2': '#bbf2c8', + 'ti-lowcode-base-green-3': '#82e09a', + 'ti-lowcode-base-green-4': '#51d675', + 'ti-lowcode-base-green-5': '#25c251', + 'ti-lowcode-base-green-6': '#00b336', + 'ti-lowcode-base-green-7': '#029931', + 'ti-lowcode-base-green-8': '#01802b', + 'ti-lowcode-base-green-9': '#006624', + 'ti-lowcode-base-green-10': '#004a1b', + 'ti-lowcode-base-green-11': '#3d995c', + 'ti-lowcode-base-green-12': '#77c78f', + 'ti-lowcode-base-green-13': '#b8e6c7', + + // expand-mint + 'ti-lowcode-base-mint-1': '#e8fcfa', + 'ti-lowcode-base-mint-2': '#bff5ef', + 'ti-lowcode-base-mint-3': '#8be8e0', + 'ti-lowcode-base-mint-4': '#5dded5', + 'ti-lowcode-base-mint-5': '#38d6ce', + 'ti-lowcode-base-mint-6': '#10c7c1', + 'ti-lowcode-base-mint-7': '#0aaba8', + 'ti-lowcode-base-mint-8': '#048c8c', + 'ti-lowcode-base-mint-9': '#046466', + 'ti-lowcode-base-mint-10': '#004547', + 'ti-lowcode-base-mint-11': '#3d9996', + 'ti-lowcode-base-mint-12': '#77c7c2', + 'ti-lowcode-base-mint-13': '#b8e6e1', + + // expand-sky + 'ti-lowcode-base-sky-1': '#e8f8fc', + 'ti-lowcode-base-sky-2': '#c4f2ff', + 'ti-lowcode-base-sky-3': '#9de4fa', + 'ti-lowcode-base-sky-4': '#79d8f7', + 'ti-lowcode-base-sky-5': '#58cbf5', + 'ti-lowcode-base-sky-6': '#33bcf2', + 'ti-lowcode-base-sky-7': '#1f9acf', + 'ti-lowcode-base-sky-8': '#1075a3', + 'ti-lowcode-base-sky-9': '#065278', + 'ti-lowcode-base-sky-10': '#00304a', + 'ti-lowcode-base-sky-11': '#3d7f99', + 'ti-lowcode-base-sky-12': '#7ab8cc', + 'ti-lowcode-base-sky-13': '#b6e5f2', + + // expand-blue + 'ti-lowcode-base-blue-1': '#e3effa', + 'ti-lowcode-base-blue-2': '#c4e1ff', + 'ti-lowcode-base-blue-3': '#99c9ff', + 'ti-lowcode-base-blue-4': '#68abfc', + 'ti-lowcode-base-blue-5': '#4191fa', + 'ti-lowcode-base-blue-6': '#1476ff', + 'ti-lowcode-base-blue-7': '#0f5ed4', + 'ti-lowcode-base-blue-8': '#0845a6', + 'ti-lowcode-base-blue-9': '#022e7a', + 'ti-lowcode-base-blue-10': '#001a4a', + 'ti-lowcode-base-blue-11': '#3d6899', + 'ti-lowcode-base-blue-12': '#7fa6d4', + 'ti-lowcode-base-blue-13': '#b6d4f2', + + // expand-indigo + 'ti-lowcode-base-indigo-1': '#eee8ff', + 'ti-lowcode-base-indigo-2': '#ddd7fa', + 'ti-lowcode-base-indigo-3': '#b19cf7', + 'ti-lowcode-base-indigo-4': '#957af5', + 'ti-lowcode-base-indigo-5': '#6e51e0', + 'ti-lowcode-base-indigo-6': '#512fd6', + 'ti-lowcode-base-indigo-7': '#391eb0', + 'ti-lowcode-base-indigo-8': '#27108f', + 'ti-lowcode-base-indigo-9': '#19056e', + 'ti-lowcode-base-indigo-10': '#0e004d', + 'ti-lowcode-base-indigo-11': '#584d99', + 'ti-lowcode-base-indigo-12': '#847acc', + 'ti-lowcode-base-indigo-13': '#bbb8e6', + + // expand-purple + 'ti-lowcode-base-purple-1': '#f5e8ff', + 'ti-lowcode-base-purple-2': '#e4c5fc', + 'ti-lowcode-base-purple-3': '#d0a1f7', + 'ti-lowcode-base-purple-4': '#b878f0', + 'ti-lowcode-base-purple-5': '#9f53e6', + 'ti-lowcode-base-purple-6': '#832fd6', + 'ti-lowcode-base-purple-7': '#641eb0', + 'ti-lowcode-base-purple-8': '#4c1091', + 'ti-lowcode-base-purple-9': '#370673', + 'ti-lowcode-base-purple-10': '#20004d', + 'ti-lowcode-base-purple-11': '#683d99', + 'ti-lowcode-base-purple-12': '#a07acc', + 'ti-lowcode-base-purple-13': '#cbb8e6', + + // expand-pink + 'ti-lowcode-base-pink-1': '#fce6fb', + 'ti-lowcode-base-pink-2': '#fcc2f9', + 'ti-lowcode-base-pink-3': '#f794f2', + 'ti-lowcode-base-pink-4': '#eb67e6', + 'ti-lowcode-base-pink-5': '#e841e5', + 'ti-lowcode-base-pink-6': '#d91ad9', + 'ti-lowcode-base-pink-7': '#b50fb8', + 'ti-lowcode-base-pink-8': '#8f0a94', + 'ti-lowcode-base-pink-9': '#6b0370', + 'ti-lowcode-base-pink-10': '#47004d', + 'ti-lowcode-base-pink-11': '#993d99', + 'ti-lowcode-base-pink-12': '#c97acc', + 'ti-lowcode-base-pink-13': '#e2b8e6', + + // expand-rose + 'ti-lowcode-base-rose-1': '#fce6ef', + 'ti-lowcode-base-rose-2': '#ffc4de', + 'ti-lowcode-base-rose-3': '#fa9bc9', + 'ti-lowcode-base-rose-4': '#f56cac', + 'ti-lowcode-base-rose-5': '#eb4696', + 'ti-lowcode-base-rose-6': '#e61c81', + 'ti-lowcode-base-rose-7': '#b50e65', + 'ti-lowcode-base-rose-8': '#940a54', + 'ti-lowcode-base-rose-9': '#70033f', + 'ti-lowcode-base-rose-10': '#4d002b', + 'ti-lowcode-base-rose-11': '#993d6e', + 'ti-lowcode-base-rose-12': '#cc7aa6', + 'ti-lowcode-base-rose-13': '#e6b8d2', + + // 公司品牌色 + 'ti-lowcode-base-brand-color': '#c7000b', + + // 主色 + 'ti-lowcode-base-primary-color-1': '#191919', + 'ti-lowcode-base-primary-color-2': '#1476ff', + + // 背景色 + 'ti-lowcode-base-bg': '#f5f5f5', + 'ti-lowcode-base-bg-1': 'rgba(0, 0, 0, 0.05)', + 'ti-lowcode-base-bg-2': '#fafafa', + 'ti-lowcode-base-bg-3': '#191919', + 'ti-lowcode-base-bg-4': '#595959', + 'ti-lowcode-base-bg-5': '#fff', + 'ti-lowcode-base-bg-6': '#5959591a', + 'ti-lowcode-base-dark-bg': '#141414', + 'ti-lowcode-base-dark-bg-2': '#333', + 'ti-lowcode-base-dark-bg-3': '#e6e6e6', + 'ti-lowcode-base-dark-bg-4': '#a6a6a6', + 'ti-lowcode-base-dark-bg-5': '#000', + 'ti-lowcode-base-dark-bg-6': '#a6a6a61a', + + // 文本色 + 'ti-lowcode-base-text-color': '#191919', + 'ti-lowcode-base-text-color-1': '#595959', + 'ti-lowcode-base-text-color-2': '#1476ff', + 'ti-lowcode-base-text-color-3': '#808080', + 'ti-lowcode-base-text-color-4': '#c2c2c2', + 'ti-lowcode-base-dark-text-color': '#e6e6e6', + 'ti-lowcode-base-dark-text-color-1': '#a6a6a6', + 'ti-lowcode-base-text-dark-color-2': '#595959', + + // 文本链接色 + 'ti-lowcode-base-text-link-color': '#191919', + 'ti-lowcode-base-text-link-color-1': '#595959', + 'ti-lowcode-base-text-link-color-2': '#c2c2c2', + 'ti-lowcode-base-text-link-color-3': '#fff', + 'ti-lowcode-base-dark-text-link-color': '#e6e6e6', + 'ti-lowcode-base-dark-text-link-color-1': '#a6a6a6', + + // 按钮边框色 + 'ti-lowcode-base-secondary-button-border-color': '#595959', + 'ti-lowcode-base-secondary-button-border-hover-color': '#c2c2c2', + 'ti-lowcode-base-default-button-border-color': '#c2c2c2', + 'ti-lowcode-base-default-button-border-hover-color': '#191919', + 'ti-lowcode-base-default-button-border-disable-color': '#dbdbdb', + 'ti-lowcode-base-dark-secondary-button-border-color': '#a6a6a6', + 'ti-lowcode-base-dark-secondary-button-border-hover-color': '#3d3d3d', + 'ti-lowcode-base-dark-default-button-border-color': '#595959', + 'ti-lowcode-base-dark-default-button-border-hover-color': '#e6e6e6', + + // 分割线 + 'ti-lowcode-base-split-color-1': 'rgba(0, 0, 0, 0.08)', // 白色背景分割线 + 'ti-lowcode-base-split-color-2': 'rgba(0, 0, 0, 0.15)', // 灰色背景分割线 + 'ti-lowcode-base-dark-split-color-1': 'rgba(255, 255, 255, 0.08)', // 白色背景分割线 + 'ti-lowcode-base-dark-split-color-2': 'rgba(255, 255, 255, 0.15)', + + // 状态色 + 'ti-lowcode-base-error-color': '#f23030', + 'ti-lowcode-base-warn-color': '#ff8800', + 'ti-lowcode-base-warn-color-1': '#f7d916', + 'ti-lowcode-base-success-color': '#5cb300', + 'ti-lowcode-base-prompt-color': '#1476ff', + 'ti-lowcode-base-invalidate-color': '#ebebeb' +} + +export * from './light-component.js' + +export * from './dark-component.js' diff --git a/packages/theme/base/src/dark-component.js b/packages/theme/base/src/dark-component.js new file mode 100644 index 000000000..9cd4c8985 --- /dev/null +++ b/packages/theme/base/src/dark-component.js @@ -0,0 +1,20 @@ +export const concatThemeDark = { + // 弹窗 + 'ti-dialog-box-bg-color': '#2f2f2f', + 'ti-dialog-box-head-title-text-color': '#e6e6e6', + 'ti-dialog-box-close-icon-color-hover': '#adb0b8', + 'ti-dialog-box-close-icon-color': '#fff', + 'ti-dialog-box-body-text-color': '#191919', + // 手风琴 + 'ti-collapse-item-text-color': '#e6e6e6', + 'ti-collapse-item-header-bg-color': '#222222', + 'ti-collapse-item-header-padding-vertical': '20px', + 'ti-collapse-item-wrap-bg-color': '#2f2f2f', + 'ti-collapse-item-bg-color': '#2f2f2f', + // dropdown组件 + 'ti-dropdown-text-color-hover': '#8a8e99', + // input 组件 + 'ti-input-text-color': '#d9d9d9', + 'ti-input-bg-color': '#262626', + 'ti-input-border-color': 'transparent' +} diff --git a/packages/theme/base/src/index.js b/packages/theme/base/src/index.js new file mode 100644 index 000000000..aa6208bab --- /dev/null +++ b/packages/theme/base/src/index.js @@ -0,0 +1,15 @@ +import { tinyBaseTheme, concatThemeLight, concatThemeDark } from './base' + +export const tinyEngineThemeLight = { + id: 'tiny-engine-light-theme', + name: 'EngineLightTheme', + cnName: 'EngineLightTheme', + data: { ...tinyBaseTheme, ...concatThemeLight } +} + +export const tinyEngineThemeDark = { + id: 'tiny-engine-dark-theme', + name: 'EngineDarkTheme', + cnName: 'EngineDarkTheme', + data: { ...tinyBaseTheme, ...concatThemeDark } +} diff --git a/packages/theme/base/src/light-component.js b/packages/theme/base/src/light-component.js new file mode 100644 index 000000000..fc24f2662 --- /dev/null +++ b/packages/theme/base/src/light-component.js @@ -0,0 +1,20 @@ +export const concatThemeLight = { + // 弹窗 + 'ti-dialog-box-bg-color': '#fff', + 'ti-dialog-box-head-title-text-color': '#191919', + 'ti-dialog-box-close-icon-color-hover': '#1f1f1f', + 'ti-dialog-box-close-icon-color': '#808080', + 'ti-dialog-box-body-text-color': '#191919', + // collapse手风琴 + 'ti-collapse-item-text-color': '#191919', + 'ti-collapse-item-header-bg-color': 'transparent', + 'ti-collapse-item-header-padding-vertical': '20px', + 'ti-collapse-item-wrap-bg-color': '#fff', + 'ti-collapse-item-bg-color': '#fff', + // dropdown组件 + 'ti-dropdown-text-color-hover': '#526ecc', + // input组件 + 'ti-input-text-color': '#191919', + 'ti-input-bg-color': '#fff', + 'ti-input-border-color': '#c2c2c2' +} diff --git a/packages/theme/base/vite.config.js b/packages/theme/base/vite.config.js new file mode 100644 index 000000000..5e8379be8 --- /dev/null +++ b/packages/theme/base/vite.config.js @@ -0,0 +1,27 @@ +/** + * Copyright (c) 2023 - present TinyEngine Authors. + * Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd. + * + * Use of this source code is governed by an MIT-style license. + * + * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL, + * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR + * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS. + * + */ + +import { defineConfig } from 'vite' +import path from 'path' + +// https://vitejs.dev/config/ +export default defineConfig({ + publicDir: false, + build: { + lib: { + entry: path.resolve(__dirname, './src/index.js'), + name: 'theme-base', + fileName: () => 'index.js', + formats: ['es'] + } + } +}) From 0d43dcbbf7eb31bd798299d6ca25873f3842ced7 Mon Sep 17 00:00:00 2001 From: James-9696 Date: Tue, 9 Jul 2024 04:49:02 -0700 Subject: [PATCH 02/14] feat(theme-base): add common style --- packages/common/component/CloseIcon.vue | 10 +- packages/common/component/MonacoEditor.vue | 4 +- packages/common/component/PluginBlockList.vue | 4 +- packages/common/component/SvgButton.vue | 10 +- packages/plugins/block/src/Main.vue | 4 +- packages/plugins/i18n/src/Main.vue | 2 +- .../src/meta/block/src/BlockGroup.vue | 4 +- packages/plugins/script/src/Main.vue | 2 +- packages/theme/base/src/base.js | 108 +++++++++++++++--- packages/theme/base/src/dark-common.js | 72 ++++++++++++ packages/theme/base/src/dark-component.js | 28 ++--- packages/theme/base/src/light-common.js | 61 ++++++++++ packages/theme/base/src/light-component.js | 28 ++--- packages/theme/dark/tiny-search.less | 2 +- packages/theme/dark/variable.less | 37 +++--- packages/theme/light/tiny-search.less | 2 +- packages/theme/light/variable.less | 40 +++---- 17 files changed, 310 insertions(+), 108 deletions(-) create mode 100644 packages/theme/base/src/dark-common.js create mode 100644 packages/theme/base/src/light-common.js diff --git a/packages/common/component/CloseIcon.vue b/packages/common/component/CloseIcon.vue index c105b7586..8cb703816 100644 --- a/packages/common/component/CloseIcon.vue +++ b/packages/common/component/CloseIcon.vue @@ -29,7 +29,7 @@ export default { .icon-wrap { width: 24px; height: 24px; - color: var(--ti-lowcode-component-svg-button-color); + color: var(--ti-lowcode-common-svg-button-color); font-size: 16px; border-radius: 4px; cursor: pointer; @@ -39,12 +39,12 @@ export default { transition: 0.3s; &:hover { - color: var(--ti-lowcode-component-svg-button-hover-color); - background-color: var(--ti-lowcode-component-svg-button-hover-bg-color); + color: var(--ti-lowcode-common-svg-button-hover-color); + background-color: var(--ti-lowcode-common-svg-button-hover-bg-color); } &.active { - color: var(--ti-lowcode-component-svg-button-active-color); - background-color: var(--ti-lowcode-component-svg-button-active-bg-color); + color: var(--ti-lowcode-common-svg-button-active-color); + background-color: var(--ti-lowcode-common-svg-button-active-bg-color); } } diff --git a/packages/common/component/MonacoEditor.vue b/packages/common/component/MonacoEditor.vue index 08217b78b..17a7aa72f 100644 --- a/packages/common/component/MonacoEditor.vue +++ b/packages/common/component/MonacoEditor.vue @@ -152,10 +152,10 @@ export default { .buttons { display: flex; gap: 8px; - color: var(--ti-lowcode-component-svg-button-color); + color: var(--ti-lowcode-common-svg-button-color); cursor: pointer; :hover { - color: var(--ti-lowcode-component-svg-button-hover-color); + color: var(--ti-lowcode-common-svg-button-hover-color); } } } diff --git a/packages/common/component/PluginBlockList.vue b/packages/common/component/PluginBlockList.vue index 1df056a09..0aefd9fd8 100644 --- a/packages/common/component/PluginBlockList.vue +++ b/packages/common/component/PluginBlockList.vue @@ -506,12 +506,12 @@ export default { align-items: center; .tiny-svg { font-size: 24px; - color: var(--ti-lowcode-component-svg-button-color); + color: var(--ti-lowcode-common-svg-button-color); } &:hover { cursor: pointer; - color: var(--ti-lowcode-component-svg-button-hover-color); + color: var(--ti-lowcode-common-svg-button-hover-color); } } diff --git a/packages/common/component/SvgButton.vue b/packages/common/component/SvgButton.vue index e46650d35..2e59b167e 100644 --- a/packages/common/component/SvgButton.vue +++ b/packages/common/component/SvgButton.vue @@ -45,7 +45,7 @@ export default { width: 24px; height: 24px; font-size: 16px; - color: var(--ti-lowcode-component-svg-button-color); + color: var(--ti-lowcode-common-svg-button-color); border: 1px solid transparent; border-radius: 4px; display: inline-flex; @@ -53,12 +53,12 @@ export default { align-items: center; cursor: pointer; &:hover { - color: var(--ti-lowcode-component-svg-button-hover-color); - background-color: var(--ti-lowcode-component-svg-button-hover-bg-color); + color: var(--ti-lowcode-common-svg-button-hover-color); + background-color: var(--ti-lowcode-common-svg-button-hover-bg-color); } &.active { - color: var(--ti-lowcode-component-svg-button-active-color); - background-color: var(--ti-lowcode-component-svg-button-active-bg-color); + color: var(--ti-lowcode-common-svg-button-active-color); + background-color: var(--ti-lowcode-common-svg-button-active-bg-color); } & + .svg-button { diff --git a/packages/plugins/block/src/Main.vue b/packages/plugins/block/src/Main.vue index e2edab70c..fda3a92ee 100644 --- a/packages/plugins/block/src/Main.vue +++ b/packages/plugins/block/src/Main.vue @@ -467,7 +467,7 @@ export default { left: -6px; right: 0; padding: 10px 16px; - background-color: var(--ti-lowcode-component-search-bg); + background-color: var(--ti-lowcode-common-search-bg); color: var(--ti-lowcode-component-block-list-item-color); display: flex; justify-content: space-between; @@ -519,7 +519,7 @@ export default { font-size: 12px; color: var(--ti-lowcode-materials-block-group-delete-popover-title-color); .icon { - color: var(--ti-lowcode-warning-color); + color: var(--ti-lowcode-common-warning-color); width: 16px; height: 16px; } diff --git a/packages/plugins/i18n/src/Main.vue b/packages/plugins/i18n/src/Main.vue index bede2a2af..6e54e3d05 100644 --- a/packages/plugins/i18n/src/Main.vue +++ b/packages/plugins/i18n/src/Main.vue @@ -585,7 +585,7 @@ export default { padding: 20px; svg { font-size: 20px; - color: var(--ti-lowcode-warning-color); + color: var(--ti-lowcode-common-warning-color); } .delete-tip { margin-left: 5px; diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroup.vue b/packages/plugins/materials/src/meta/block/src/BlockGroup.vue index db072e2af..fbbb30f3e 100644 --- a/packages/plugins/materials/src/meta/block/src/BlockGroup.vue +++ b/packages/plugins/materials/src/meta/block/src/BlockGroup.vue @@ -458,7 +458,7 @@ export default { margin-left: 0; } :deep(svg) { - color: var(--ti-lowcode-component-svg-button-color); + color: var(--ti-lowcode-common-svg-button-color); } } &.show-underline { @@ -512,7 +512,7 @@ export default { font-size: 12px; color: var(--ti-lowcode-materials-block-group-delete-popover-title-color); .icon { - color: var(--ti-lowcode-warning-color); + color: var(--ti-lowcode-common-warning-color); width: 16px; height: 16px; } diff --git a/packages/plugins/script/src/Main.vue b/packages/plugins/script/src/Main.vue index 86d088412..95283e68d 100644 --- a/packages/plugins/script/src/Main.vue +++ b/packages/plugins/script/src/Main.vue @@ -148,7 +148,7 @@ export default { .dots { width: 10px; height: 10px; - background: var(--ti-lowcode-warning-color-1); + background: var(--ti-lowcode-common-warning-color-1); border-radius: 50%; position: absolute; top: -4px; diff --git a/packages/theme/base/src/base.js b/packages/theme/base/src/base.js index 5e6ba2504..e695e3c06 100644 --- a/packages/theme/base/src/base.js +++ b/packages/theme/base/src/base.js @@ -1,24 +1,83 @@ export const tinyBaseTheme = { + // 透明色 + 'ti-base-color-transparent': 'transparent', + // 灰阶 - 'ti-lowcode-base-gray-0': '#fff', - 'ti-lowcode-base-gray-5': '#fafafa', - 'ti-lowcode-base-gray-10': '#f5f5f5', - 'ti-lowcode-base-gray-15': '#f0f0f0', - 'ti-lowcode-base-gray-20': '#e6e6e6', - 'ti-lowcode-base-gray-25': '#d9d9d9', - 'ti-lowcode-base-gray-30': '#dbdbdb', - 'ti-lowcode-base-gray-35': '#ccc', - 'ti-lowcode-base-gray-40': '#c2c2c2', - 'ti-lowcode-base-gray-45': '#a6a6a6', - 'ti-lowcode-base-gray-50': '#808080', - 'ti-lowcode-base-gray-60': '#595959', - 'ti-lowcode-base-gray-70': '#333', - 'ti-lowcode-base-gray-75': '#262626', - 'ti-lowcode-base-gray-80': '#292929', - 'ti-lowcode-base-gray-85': '#1f1f1f', - 'ti-lowcode-base-gray-90': '#141414', - 'ti-lowcode-base-gray-95': '#191919', - 'ti-lowcode-base-gray-100': '#000', + 'ti-lowcode-base-gray-1': '#fff', + 'ti-lowcode-base-gray-2': '#fafafa', + 'ti-lowcode-base-gray-3': '#f2f2f2', + 'ti-lowcode-base-gray-4': '#f2f5fc', + 'ti-lowcode-base-gray-5': '#f5f5f5', + 'ti-lowcode-base-gray-6': '#f0f0f0', + 'ti-lowcode-base-gray-7': '#e6e6e6', + 'ti-lowcode-base-gray-8': '#eeeeee', + 'ti-lowcode-base-gray-9': '#dfe1e6', + 'ti-lowcode-base-gray-10': '#e3e3e3', + 'ti-lowcode-base-gray-11': '#ebebeb', + 'ti-lowcode-base-gray-12': '#d9d9d9', + 'ti-lowcode-base-gray-13': '#dbdbdb', + 'ti-lowcode-base-gray-14': '#e5e5e5', + 'ti-lowcode-base-gray-15': '#e9e9e9', + 'ti-lowcode-base-gray-16': '#b9b9b9', + 'ti-lowcode-base-gray-17': '#ccc', + 'ti-lowcode-base-gray-18': '#c2c2c2', + 'ti-lowcode-base-gray-19': '#afafaf', + 'ti-lowcode-base-gray-20': '#ababab', + 'ti-lowcode-base-gray-21': '#adb0b8', + + 'ti-lowcode-base-gray-23': '#a6a6a6', + 'ti-lowcode-base-gray-24': '#a7aab2', + 'ti-lowcode-base-gray-25': '#4d4d4d', + 'ti-lowcode-base-gray-26': '#464c59', + 'ti-lowcode-base-gray-27': '#5a5a5a', + 'ti-lowcode-base-gray-28': '#555', + 'ti-lowcode-base-gray-29': '#5e5e5e', + 'ti-lowcode-base-gray-30': '#575d6c', + 'ti-lowcode-base-gray-31': '#595959', + 'ti-lowcode-base-gray-32': '#666', + 'ti-lowcode-base-gray-33': '#6a6a6a', + 'ti-lowcode-base-gray-34': '#6b6b6b', + 'ti-lowcode-base-gray-35': '#606165', + + 'ti-lowcode-base-gray-38': '#626262', + 'ti-lowcode-base-gray-39': '#737373', + 'ti-lowcode-base-gray-40': '#757575', + 'ti-lowcode-base-gray-41': '#888', + 'ti-lowcode-base-gray-42': '#8d8d8d', + 'ti-lowcode-base-gray-43': '#808080', + 'ti-lowcode-base-gray-44': '#8a8e99', + 'ti-lowcode-base-gray-45': '#9a9a9a', + 'ti-lowcode-base-gray-46': '#999', + 'ti-lowcode-base-gray-47': '#9d9d9d', + 'ti-lowcode-base-gray-48': '#9f9f9f', + + // black + 'ti-lowcode-base-dark-1': '#1f1f1f', + 'ti-lowcode-base-dark-2': '#1a1a1a', + 'ti-lowcode-base-dark-3': '#141414', + 'ti-lowcode-base-dark-4': '#191818', + 'ti-lowcode-base-dark-5': '#191919', + 'ti-lowcode-base-dark-6': '#202020', + 'ti-lowcode-base-dark-7': '#2e2e2e', + 'ti-lowcode-base-dark-8': '#2f2f2f', + 'ti-lowcode-base-dark-9': '#212121', + 'ti-lowcode-base-dark-10': '#232323', + 'ti-lowcode-base-dark-11': '#252b3a', + 'ti-lowcode-base-dark-12': '#2b2b2b', + 'ti-lowcode-base-dark-13': '#262626', + 'ti-lowcode-base-dark-14': '#222', + 'ti-lowcode-base-dark-15': '#202020', + 'ti-lowcode-base-dark-16': '#292929', + 'ti-lowcode-base-dark-17': '#292929', + 'ti-lowcode-base-dark-18': '#3c3c3c', + 'ti-lowcode-base-dark-19': '#313131', + 'ti-lowcode-base-dark-20': '#333', + 'ti-lowcode-base-dark-21': '#363636', + 'ti-lowcode-base-dark-22': '#404040', + 'ti-lowcode-base-dark-23': '#414141', + 'ti-lowcode-base-dark-24': '#433535', + 'ti-lowcode-base-dark-25': '#041320', + 'ti-lowcode-base-dark-26': '#000', // expand-red 'ti-lowcode-base-red-1': '#ffeae8', @@ -34,6 +93,8 @@ export const tinyBaseTheme = { 'ti-lowcode-base-red-11': '#a64242', 'ti-lowcode-base-red-12': '#d4827f', 'ti-lowcode-base-red-13': '#f2c5c2', + 'ti-lowcode-base-red-14': '#c7000b', + 'ti-lowcode-base-red-15': '#fce3e1', // expand-orange 'ti-lowcode-base-orange-1': '#fff5e8', @@ -49,6 +110,7 @@ export const tinyBaseTheme = { 'ti-lowcode-base-orange-11': '#9e6d3f', 'ti-lowcode-base-orange-12': '#d6a981', 'ti-lowcode-base-orange-13': '#f2d8c2', + 'ti-lowcode-base-orange-14': '#fa9841', // expand-yellow 'ti-lowcode-base-yellow-1': '#fcf9eb', @@ -124,6 +186,7 @@ export const tinyBaseTheme = { 'ti-lowcode-base-green-11': '#3d995c', 'ti-lowcode-base-green-12': '#77c78f', 'ti-lowcode-base-green-13': '#b8e6c7', + 'ti-lowcode-base-green-14': '#e6f2d5', // expand-mint 'ti-lowcode-base-mint-1': '#e8fcfa', @@ -139,6 +202,7 @@ export const tinyBaseTheme = { 'ti-lowcode-base-mint-11': '#3d9996', 'ti-lowcode-base-mint-12': '#77c7c2', 'ti-lowcode-base-mint-13': '#b8e6e1', + 'ti-lowcode-base-mint-14': '#50d4ab', // expand-sky 'ti-lowcode-base-sky-1': '#e8f8fc', @@ -169,6 +233,11 @@ export const tinyBaseTheme = { 'ti-lowcode-base-blue-11': '#3d6899', 'ti-lowcode-base-blue-12': '#7fa6d4', 'ti-lowcode-base-blue-13': '#b6d4f2', + 'ti-lowcode-base-blue-14': '#4f77ff', + 'ti-lowcode-base-blue-15': '#3961eb', + 'ti-lowcode-base-blue-16': '#7693f5', + 'ti-lowcode-base-blue-17': '#526ecc', + 'ti-lowcode-base-blue-18': '#deecff', // expand-indigo 'ti-lowcode-base-indigo-1': '#eee8ff', @@ -199,6 +268,7 @@ export const tinyBaseTheme = { 'ti-lowcode-base-purple-11': '#683d99', 'ti-lowcode-base-purple-12': '#a07acc', 'ti-lowcode-base-purple-13': '#cbb8e6', + 'ti-lowcode-base-purple-14': '#f0edfc', // expand-pink 'ti-lowcode-base-pink-1': '#fce6fb', diff --git a/packages/theme/base/src/dark-common.js b/packages/theme/base/src/dark-common.js new file mode 100644 index 000000000..4901697c4 --- /dev/null +++ b/packages/theme/base/src/dark-common.js @@ -0,0 +1,72 @@ +export const tinyDarkCommon = { + 'ti-lowcode-common-gray-26': 'var(--ti-lowcode-base-gray-26)', + 'ti-lowcode-common-transparent-color': 'var(--ti-base-color-transparent)', + 'ti-lowcode-common-search-bg': 'var(--ti-lowcode-base-dark-13)', + + // 背景 + 'ti-lowcode-common-component-bg': 'var(--ti-lowcode-base-dark-8)', + 'ti-lowcode-common-component-hover-bg': 'var(--ti-lowcode-base-dark-18)', + 'ti-lowcode-common-layout-bg': 'var(--ti-lowcode-base-dark-4)', + 'ti-lowcode-common-header-bg': 'var(--ti-lowcode-base-dark-6)', + 'ti-lowcode-common-bg-1': 'var(--ti-lowcode-base-dark-22)', + 'ti-lowcode-common-bg-2': 'var(--ti-lowcode-base-gray-25)', + 'ti-lowcode-common-bg-3': 'var(--ti-lowcode-base-dark-12)', + 'ti-lowcode-common-bg-4': 'var(--ti-lowcode-base-dark-13)', + 'ti-lowcode-common-bg-5': 'var(--ti-lowcode-base-gray-8)', + 'ti-lowcode-common-bg-6': 'var(--ti-lowcode-base-dark-24)', + 'ti-lowcode-common-bg-7': 'var(--ti-lowcode-base-gray-44)', + 'ti-lowcode-common-bg-8': 'var(--ti-lowcode-base-dark-14)', + 'ti-lowcode-common-bg-9': 'var(--ti-lowcode-base-dark-16)', + 'ti-lowcode-common-hover-bg-1': 'rgba(255, 255, 255, 0.1)', + 'ti-lowcode-common-icon-hover-1': 'var(--ti-lowcode-base-gray-21)', + + // 文本 + 'ti-lowcode-common-primary-text-color': 'var(--ti-lowcode-base-gray-1)', + 'ti-lowcode-common-secondary-text-color': 'var(--ti-lowcode-base-gray-21)', + 'ti-lowcode-common-text-title-color': 'var(--ti-lowcode-base-dark-11)', + 'ti-lowcode-common-text-color-1': 'var(--ti-lowcode-base-gray-33)', + 'ti-lowcode-common-text-color-2': 'var(--ti-lowcode-base-gray-12)', + 'ti-lowcode-common-text-color-3': 'var(--ti-lowcode-base-gray-1)', + 'ti-lowcode-common-text-color-4': 'var(--ti-lowcode-base-mint-14)', + 'ti-lowcode-common-text-color-5': 'var(--ti-lowcode-base-gray-44)', + 'ti-lowcode-common-text-color-6': 'var(--ti-lowcode-base-gray-30)', + 'ti-lowcode-common-text-color-7': 'var(--ti-lowcode-base-gray-7)', + 'ti-lowcode-common-text-color-8': 'var(--ti-lowcode-base-text-color)', + 'ti-lowcode-common-third-text-color': 'var(--ti-lowcode-base-gray-20)', + 'ti-lowcode-common-text-main-color': 'var(--ti-lowcode-base-gray-31)', + 'ti-lowcode-common-text-desc-color': 'var(--ti-lowcode-base-gray-43)', + 'ti-lowcode-common-text-placeholder-color': 'var(--ti-lowcode-base-gray-31)', + + // 边框 + 'ti-lowcode-common-border-color-1': 'var(--ti-lowcode-base-dark-9)', + 'ti-lowcode-common-border-color-2': 'var(--ti-lowcode-base-dark-19)', + 'ti-lowcode-common-border-color-3': 'var(--ti-lowcode-base-gray-35)', + 'ti-lowcode-common-border-color-4': 'var(--ti-lowcode-base-dark-10)', + + // 信息 + 'ti-lowcode-common-primary-color': 'var(--ti-lowcode-base-blue-14)', + 'ti-lowcode-common-primary-hover-color': 'var(--ti-lowcode-base-blue-15)', + 'ti-lowcode-common-error-color': 'var(--ti-lowcode-base-red-6)', + 'ti-lowcode-common-info-color': 'var(--ti-lowcode-base-blue-16)', + 'ti-lowcode-common-warning-color': 'var(--ti-lowcode-base-orange-14)', + 'ti-lowcode-common-empty-color': 'var(--ti-lowcode-base-gray-45)', + 'ti-lowcode-common-danger-color': 'var(--ti-lowcode-base-red-14)', + + // 按钮 + 'ti-lowcode-common-btn-default-color': 'var(--ti-lowcode-base-dark-5)', // 默认按钮颜色 + 'ti-lowcode-common-btn-default-disabled-color': 'var(--ti-lowcode-base-gray-18)', // 默认禁用颜色 + 'ti-lowcode-common-btn-default-hover-color': 'var(--ti-lowcode-base-gray-31)', // 默认按钮 hover 颜色 + 'ti-lowcode-common-btn-default-border-color': 'var(--ti-lowcode-base-dark-5)', // 默认按钮边框色 + 'ti-lowcode-common-btn-default-border-hover-color': 'var(--ti-lowcode-base-gray-31)', // 默认按钮 hover 边框色 + + // svg按钮 + 'ti-lowcode-common-svg-button-color': 'var(--ti-lowcode-base-gray-12)', + 'ti-lowcode-common-svg-button-hover-color': 'var(--ti-lowcode-base-blue-14)', + 'ti-lowcode-common-svg-button-hover-bg-color': 'var(--ti-base-color-transparent)', + 'ti-lowcode-common-svg-button-active-color': 'var(--ti-lowcode-base-blue-14)', + 'ti-lowcode-common-svg-button-active-bg-color': 'var(--ti-base-color-transparent)', + + // 关闭按钮 + 'ti-lowcode-common-close-icon-text-color': 'var(--ti-lowcode-base-gray-20)', // 关闭按钮默认颜色 + 'ti-lowcode-common-close-icon-text-hover-color': 'var(--ti-lowcode-base-gray-1)' +} diff --git a/packages/theme/base/src/dark-component.js b/packages/theme/base/src/dark-component.js index 9cd4c8985..99c6f8115 100644 --- a/packages/theme/base/src/dark-component.js +++ b/packages/theme/base/src/dark-component.js @@ -1,20 +1,22 @@ +import './dark-common.js' + export const concatThemeDark = { // 弹窗 - 'ti-dialog-box-bg-color': '#2f2f2f', - 'ti-dialog-box-head-title-text-color': '#e6e6e6', - 'ti-dialog-box-close-icon-color-hover': '#adb0b8', - 'ti-dialog-box-close-icon-color': '#fff', - 'ti-dialog-box-body-text-color': '#191919', + 'ti-dialog-box-bg-color': 'var(--ti-lowcode-common-component-bg)', + 'ti-dialog-box-head-title-text-color': 'var(--ti-lowcode-common-text-color-7)', + 'ti-dialog-box-close-icon-color-hover': 'var(--ti-lowcode-common-icon-hover-1)', + 'ti-dialog-box-close-icon-color': 'var(--ti-lowcode-common-text-color-3)', + 'ti-dialog-box-body-text-color': 'var(--ti-lowcode-common-text-color-8)', // 手风琴 - 'ti-collapse-item-text-color': '#e6e6e6', - 'ti-collapse-item-header-bg-color': '#222222', + 'ti-collapse-item-text-color': 'var(--ti-lowcode-common-text-color-7)', + 'ti-collapse-item-header-bg-color': 'var(--ti-lowcode-common-bg-8)', 'ti-collapse-item-header-padding-vertical': '20px', - 'ti-collapse-item-wrap-bg-color': '#2f2f2f', - 'ti-collapse-item-bg-color': '#2f2f2f', + 'ti-collapse-item-wrap-bg-color': 'var(--ti-lowcode-common-component-bg)', + 'ti-collapse-item-bg-color': 'var(--ti-lowcode-common-component-bg)', // dropdown组件 - 'ti-dropdown-text-color-hover': '#8a8e99', + 'ti-dropdown-text-color-hover': 'var(--ti-lowcode-common-text-color-5)', // input 组件 - 'ti-input-text-color': '#d9d9d9', - 'ti-input-bg-color': '#262626', - 'ti-input-border-color': 'transparent' + 'ti-input-text-color': 'var(--ti-lowcode-common-text-color-2)', + 'ti-input-bg-color': 'var(--ti-lowcode-common-bg-4)', + 'ti-input-border-color': 'var(--ti-lowcode-common-transparent-color)' } diff --git a/packages/theme/base/src/light-common.js b/packages/theme/base/src/light-common.js new file mode 100644 index 000000000..92baa2e5f --- /dev/null +++ b/packages/theme/base/src/light-common.js @@ -0,0 +1,61 @@ +export const tinyLightCommon = { + // + 'ti-lowcode-common-dark-1': 'var(--ti-lowcode-base-dark-1)', + 'ti-lowcode-common-gray-18': 'var(--ti-lowcode-base-gray-18)', + 'ti-lowcode-common-gray-26': 'var(--ti-lowcode-base-gray-26)', + + // 背景色 + 'ti-lowcode-common-component-bg': 'var(--ti-lowcode-base-gray-1)', + 'ti-lowcode-common-component-hover-bg': 'var(--ti-lowcode-base-gray-5)', + 'ti-lowcode-common-layout-bg': 'var(--ti-lowcode-base-gray-1)', + 'ti-lowcode-common-header-bg': 'var(--ti-lowcode-base-gray-8)', + 'ti-lowcode-common-bg-0': 'var(--ti-base-color-transparent)', + 'ti-lowcode-common-text-hover': 'var(--ti-lowcode-base-blue-17)', + + // 文本 + 'ti-lowcode-common-primary-text-color': 'var(--ti-lowcode-base-dark-5)', + 'ti-lowcode-common-secondary-text-color': 'var(--ti-lowcode-base-gray-18)', + 'ti-lowcode-common-third-text-color': 'var(--ti-lowcode-base-gray-20)', + 'ti-lowcode-common-text-title-color': 'var(--ti-lowcode-base-dark-5)', + 'ti-lowcode-common-text-main-color': 'var(--ti-lowcode-base-gray-31)', + 'ti-lowcode-common-text-desc-color': 'var(--ti-lowcode-base-gray-43)', + 'ti-lowcode-common-text-placeholder-color': 'var(--ti-lowcode-base-gray-31)', + 'ti-lowcode-common-text-color-1': 'var(--ti-lowcode-base-gray-33)', + 'ti-lowcode-common-text-color-2': 'var(--ti-lowcode-base-gray-12)', + 'ti-lowcode-common-text-color-3': 'var(--ti-lowcode-base-gray-1)', + 'ti-lowcode-common-text-color-4': 'var(--ti-lowcode-base-mint-14)', + 'ti-lowcode-common-text-color-5': 'var(--ti-lowcode-base-gray-43)', + 'ti-lowcode-common-text-color-6': 'var(--ti-lowcode-base-gray-31)', + // 边框 + 'ti-lowcode-common-border-color-1': 'var(--ti-lowcode-base-gray-9)', + 'ti-lowcode-common-border-color-3': 'var(--ti-lowcode-base-gray-35)', + 'ti-lowcode-common-border-color-4': 'var(--ti-lowcode-base-gray-9)', + + 'ti-lowcode-common-hover-bg-1': 'var(--ti-lowcode-base-gray-5)', + // 提示 + 'ti-lowcode-common-primary-color': 'var(--ti-lowcode-base-blue-6)', + 'ti-lowcode-common-primary-hover-color': 'var(--ti-lowcode-base-blue-6)', + 'ti-lowcode-common-info-color': 'var(--ti-lowcode-base-blue-6)', + 'ti-lowcode-common-warning-color': 'var(--ti-lowcode-base-orange-6)', + 'ti-lowcode-common-warning-color-1': 'var(--ti-lowcode-base-lemon-6)', + 'ti-lowcode-common-error-color': 'var(ti-lowcode-base-red-6)', + + // 按钮 + 'ti-lowcode-common-btn-default-color': 'var(--ti-lowcode-base-dark-5)', // 默认按钮颜色 + 'ti-lowcode-common-btn-default-disabled-color': 'var(--ti-lowcode-base-gray-18)', // 默认禁用颜色 + 'ti-lowcode-common-btn-default-hover-color': 'var(--ti-lowcode-base-gray-31)', // 默认按钮 hover 颜色 + 'ti-lowcode-common-btn-default-border-color': 'var(--ti-lowcode-base-dark-5)', // 默认按钮边框色 + 'ti-lowcode-common-btn-default-border-hover-color': 'var(--ti-lowcode-base-gray-31)', // 默认按钮 hover 边框色 + 'ti-lowcode-common-search-bg': 'var(--ti-lowcode-base-gray-1)', // tinysearch 背景色 + + // 关闭按钮 + 'ti-lowcode-common-close-icon-text-color': 'var(--ti-lowcode-base-dark-5)', // 关闭按钮默认颜色 + 'ti-lowcode-common-close-icon-text-hover-color': 'var(--ti-lowcode-base-dark-5)', + + // svg按钮 + 'ti-lowcode-common-svg-button-color': 'var(--ti-lowcode-base-dark-5)', + 'ti-lowcode-common-svg-button-hover-color': 'var(--ti-lowcode-base-dark-5)', + 'ti-lowcode-common-svg-button-hover-bg-color': 'rgba(0, 0, 0, 0.05)', + 'ti-lowcode-common-svg-button-active-color': 'var(--ti-lowcode-base-dark-5)', + 'ti-lowcode-common-svg-button-active-bg-color': 'rgba(0, 0, 0, 0.05)' +} diff --git a/packages/theme/base/src/light-component.js b/packages/theme/base/src/light-component.js index fc24f2662..0558ae027 100644 --- a/packages/theme/base/src/light-component.js +++ b/packages/theme/base/src/light-component.js @@ -1,20 +1,22 @@ +import './light-common.js' + export const concatThemeLight = { // 弹窗 - 'ti-dialog-box-bg-color': '#fff', - 'ti-dialog-box-head-title-text-color': '#191919', - 'ti-dialog-box-close-icon-color-hover': '#1f1f1f', - 'ti-dialog-box-close-icon-color': '#808080', - 'ti-dialog-box-body-text-color': '#191919', + 'ti-dialog-box-bg-color': 'var(--ti-lowcode-common-component-bg)', + 'ti-dialog-box-head-title-text-color': 'var(--ti-lowcode-common-primary-text-color)', + 'ti-dialog-box-close-icon-color-hover': 'var(--ti-lowcode-common-dark-1)', + 'ti-dialog-box-close-icon-color': 'var(--ti-lowcode-common-text-desc-color)', + 'ti-dialog-box-body-text-color': 'var(--ti-lowcode-common-primary-text-color)', // collapse手风琴 - 'ti-collapse-item-text-color': '#191919', - 'ti-collapse-item-header-bg-color': 'transparent', + 'ti-collapse-item-text-color': 'var(--ti-lowcode-common-primary-text-color)', + 'ti-collapse-item-header-bg-color': 'var(--ti-lowcode-common-bg-0)', 'ti-collapse-item-header-padding-vertical': '20px', - 'ti-collapse-item-wrap-bg-color': '#fff', - 'ti-collapse-item-bg-color': '#fff', + 'ti-collapse-item-wrap-bg-color': 'var(--ti-lowcode-common-component-bg)', + 'ti-collapse-item-bg-color': 'var(--ti-lowcode-common-component-bg)', // dropdown组件 - 'ti-dropdown-text-color-hover': '#526ecc', + 'ti-dropdown-text-color-hover': 'var(--ti-lowcode-common-text-hover)', // input组件 - 'ti-input-text-color': '#191919', - 'ti-input-bg-color': '#fff', - 'ti-input-border-color': '#c2c2c2' + 'ti-input-text-color': 'var(--ti-lowcode-common-primary-text-color)', + 'ti-input-bg-color': 'var(--ti-lowcode-common-component-bg)', + 'ti-input-border-color': 'var(--ti-lowcode-common-gray-18)' } diff --git a/packages/theme/dark/tiny-search.less b/packages/theme/dark/tiny-search.less index 0356fb7df..7380c5fa5 100644 --- a/packages/theme/dark/tiny-search.less +++ b/packages/theme/dark/tiny-search.less @@ -15,7 +15,7 @@ --ti-lowcode-search-hover-bg: #3c3c3c; // tinysearch 背景色 - --ti-lowcode-component-search-bg: var(--ti-lowcode-input-bg); + --ti-lowcode-common-search-bg: var(--ti-lowcode-input-bg); // 搜索框hover背景色 --ti-lowcode-search-hover-bg: var(--ti-lowcode-common-component-hover-bg); --ti-lowcode-search-input-color: #d9d9d9; diff --git a/packages/theme/dark/variable.less b/packages/theme/dark/variable.less index beed6faae..3d115f304 100644 --- a/packages/theme/dark/variable.less +++ b/packages/theme/dark/variable.less @@ -40,11 +40,26 @@ --ti-lowcode-common-border-color-4: #232323; --ti-lowcode-common-error-color: var(--ti-lowcode-base-error-color); - --ti-lowcode-info-color: #7693f5; - --ti-lowcode-warning-color: #fa9841; - --ti-lowcode-warning-color-1: #fac20a; + --ti-lowcode-common-info-color: #7693f5; + --ti-lowcode-common-warning-color: #fa9841; + --ti-lowcode-common-warning-color-1: #fac20a; --ti-lowcode-common-empty-color: #9a9a9a; + // tinysearch 背景色 + --ti-lowcode-common-search-bg: var(--ti-lowcode-input-bg); + // tinysearch 边框色 + --ti-lowcode-component-input-border-color: transparent; + // svgButton + --ti-lowcode-common-svg-button-color: var(--ti-lowcode-common-text-color-2); + --ti-lowcode-common-svg-button-hover-color: var(--ti-lowcode-common-primary-color); + --ti-lowcode-common-svg-button-hover-bg-color: transparent; + --ti-lowcode-common-svg-button-active-color: var(--ti-lowcode-common-primary-color); + --ti-lowcode-common-svg-button-hover-bg-color: transparent; + // 关闭按钮 + --ti-lowcode-common-close-icon-text-color: var(--ti-lowcode-common-third-text-color); // 关闭按钮默认颜色 + // 关闭按钮 hover 颜色 + --ti-lowcode-common-close-icon-text-hover-color: var(--ti-lowcode-common-primary-text-color); + // tiny vue 的 css 变量，覆盖掉就好 .tiny-form-item { @@ -62,26 +77,10 @@ --ti-lowcode-input-error-color: var(--ti-lowcode-common-error-color); --ti-lowcode-input-error-bg: rgba(246, 111, 106, 0.1); - // ------ 公共组件的主题色，前缀为 --ti-lowcode-component-组件名 ------ - // tinysearch 背景色 - --ti-lowcode-component-search-bg: var(--ti-lowcode-input-bg); - // tinysearch 边框色 - --ti-lowcode-component-input-border-color: transparent; - // svgButton - --ti-lowcode-component-svg-button-color: var(--ti-lowcode-common-text-color-2); - --ti-lowcode-component-svg-button-hover-color: var(--ti-lowcode-common-primary-color); - --ti-lowcode-component-svg-button-hover-bg-color: transparent; - --ti-lowcode-component-svg-button-active-color: var(--ti-lowcode-common-primary-color); - --ti-lowcode-component-svg-button-hover-bg-color: transparent; - --ti-lowcode-tabs-active-border-bottom-color: var(--ti-lowcode-common-primary-color); --ti-lowcode-tabs-active-color: var(--ti-lowcode-common-primary-color); --ti-lowcode-form-error-tips-color: var(--ti-lowcode-common-error-color); - // 关闭按钮 - --ti-lowcode-component-close-icon-text-color: var(--ti-lowcode-common-third-text-color); // 关闭按钮默认颜色 - // 关闭按钮 hover 颜色 - --ti-lowcode-component-close-icon-text-hover-color: var(--ti-lowcode-common-primary-text-color); // 设置面板 --ti-lowcode-component-setting-panel-label-color: var(--ti-lowcode-common-secondary-text-color); diff --git a/packages/theme/light/tiny-search.less b/packages/theme/light/tiny-search.less index 29f9851d0..9df981c84 100644 --- a/packages/theme/light/tiny-search.less +++ b/packages/theme/light/tiny-search.less @@ -5,7 +5,7 @@ --ti-lowcode-search-hover-icon-color: #191919; // tinysearch 背景色 - --ti-lowcode-component-search-bg: var(--ti-lowcode-base-bg-5); + --ti-lowcode-common-search-bg: var(--ti-lowcode-base-bg-5); // 搜索框hover背景色 --ti-lowcode-search-hover-bg: var(--ti-lowcode-base-bg-5); diff --git a/packages/theme/light/variable.less b/packages/theme/light/variable.less index b93ba581f..8a56157a6 100644 --- a/packages/theme/light/variable.less +++ b/packages/theme/light/variable.less @@ -29,32 +29,28 @@ --ti-lowcode-common-third-text-color: #ababab; --ti-lowcode-common-error-color: var(--ti-lowcode-base-error-color); - --ti-lowcode-info-color: var(--ti-lowcode-base-prompt-color); - --ti-lowcode-warning-color: var(--ti-lowcode-base-warn-color); - --ti-lowcode-warning-color-1: var(--ti-lowcode-base-warn-color-1); - --ti-lowcode-dark-1: #464c59; + --ti-lowcode-common-info-color: var(--ti-lowcode-base-prompt-color); + --ti-lowcode-common-warning-color: var(--ti-lowcode-base-warn-color); + --ti-lowcode-common-warning-color-1: var(--ti-lowcode-base-warn-color-1); + --ti-lowcode-common-gray-26: var(--ti-lowcode-base-gray-26); // ------ 公共组件的主题色，前缀为 --ti-lowcode-component-组件名 ------- - --ti-lowcode-component-btn-default-color: var(--ti-lowcode-base-primary-color-1); // 默认按钮颜色 - --ti-lowcode-component-btn-default-disabled-color: var(--ti-lowcode-common-secondary-text-color); // 默认禁用颜色 - --ti-lowcode-component-btn-default-hover-color: var(--ti-lowcode-common-text-main-color); // 默认按钮 hover 颜色 - --ti-lowcode-component-btn-default-border-color: var(--ti-lowcode-base-primary-color-1); // 默认按钮边框色 - --ti-lowcode-component-btn-default-border-hover-color: var( - --ti-lowcode-common-text-main-color - ); // 默认按钮 hover 边框色 - --ti-lowcode-component-search-bg: #fff; // tinysearch 背景色 + --ti-lowcode-common-btn-default-color: var(--ti-lowcode-base-primary-color-1); // 默认按钮颜色 + --ti-lowcode-common-btn-default-disabled-color: var(--ti-lowcode-common-secondary-text-color); // 默认禁用颜色 + --ti-lowcode-common-btn-default-hover-color: var(--ti-lowcode-common-text-main-color); // 默认按钮 hover 颜色 + --ti-lowcode-common-btn-default-border-color: var(--ti-lowcode-base-primary-color-1); // 默认按钮边框色 + --ti-lowcode-common-btn-default-border-hover-color: var(--ti-lowcode-common-text-main-color); // 默认按钮 hover 边框色 + --ti-lowcode-common-search-bg: #fff; // tinysearch 背景色 // svgButton - --ti-lowcode-component-svg-button-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-component-svg-button-hover-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-component-svg-button-hover-bg-color: rgba(0, 0, 0, 0.05); - --ti-lowcode-component-svg-button-active-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-component-svg-button-active-bg-color: rgba(0, 0, 0, 0.05); + --ti-lowcode-common-svg-button-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-common-svg-button-hover-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-common-svg-button-hover-bg-color: rgba(0, 0, 0, 0.05); + --ti-lowcode-common-svg-button-active-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-common-svg-button-active-bg-color: rgba(0, 0, 0, 0.05); // 关闭按钮 - --ti-lowcode-component-close-icon-text-color: var(--ti-lowcode-base-text-color); // 关闭按钮默认颜色 - --ti-lowcode-component-close-icon-text-hover-color: var( - --ti-lowcode-common-primary-text-color - ); // 关闭按钮 hover 颜色 + --ti-lowcode-common-close-icon-text-color: var(--ti-lowcode-base-text-color); // 关闭按钮默认颜色 + --ti-lowcode-common-close-icon-text-hover-color: var(--ti-lowcode-common-primary-text-color); // 关闭按钮 hover 颜色 // 插件面板 --ti-lowcode-plugin-panel-title-color: var(--ti-lowcode-common-text-title-color); // 插件面板标题色 @@ -91,7 +87,7 @@ // 状态管理面板头部的底部边框色 --ti-lowcode-data-header-border-bottom-color: var(--ti-lowcode-common-border-color-4); // 状态管理示例背景色 - --ti-lowcode-data-example-bg-color: var(--ti-lowcode-dark-1); + --ti-lowcode-data-example-bg-color: var(--ti-lowcode-common-gray-26); // 状态管理示例文字色 --ti-lowcode-data-example-color: var(--ti-lowcode-common-text-color-2); // 添加高级属性文字颜色 From edbd0da4415520d4b5f61958200732365c01cc5d Mon Sep 17 00:00:00 2001 From: James-9696 Date: Wed, 10 Jul 2024 19:57:15 -0700 Subject: [PATCH 03/14] fix: update theme-base common --- packages/theme/base/src/base.js | 371 ------------------ packages/theme/base/src/base.less | 428 +++++++++++++++++++++ packages/theme/base/src/dark-common.js | 72 ---- packages/theme/base/src/dark-component.js | 3 +- packages/theme/base/src/dark.less | 73 ++++ packages/theme/base/src/index.js | 7 +- packages/theme/base/src/light-common.js | 61 --- packages/theme/base/src/light-component.js | 3 +- packages/theme/base/src/light.less | 62 +++ packages/theme/dark/variable.less | 58 --- packages/theme/light/variable.less | 49 --- 11 files changed, 571 insertions(+), 616 deletions(-) delete mode 100644 packages/theme/base/src/base.js create mode 100644 packages/theme/base/src/base.less delete mode 100644 packages/theme/base/src/dark-common.js create mode 100644 packages/theme/base/src/dark.less delete mode 100644 packages/theme/base/src/light-common.js create mode 100644 packages/theme/base/src/light.less diff --git a/packages/theme/base/src/base.js b/packages/theme/base/src/base.js deleted file mode 100644 index e695e3c06..000000000 --- a/packages/theme/base/src/base.js +++ /dev/null @@ -1,371 +0,0 @@ -export const tinyBaseTheme = { - // 透明色 - 'ti-base-color-transparent': 'transparent', - - // 灰阶 - 'ti-lowcode-base-gray-1': '#fff', - 'ti-lowcode-base-gray-2': '#fafafa', - 'ti-lowcode-base-gray-3': '#f2f2f2', - 'ti-lowcode-base-gray-4': '#f2f5fc', - 'ti-lowcode-base-gray-5': '#f5f5f5', - 'ti-lowcode-base-gray-6': '#f0f0f0', - 'ti-lowcode-base-gray-7': '#e6e6e6', - 'ti-lowcode-base-gray-8': '#eeeeee', - 'ti-lowcode-base-gray-9': '#dfe1e6', - 'ti-lowcode-base-gray-10': '#e3e3e3', - 'ti-lowcode-base-gray-11': '#ebebeb', - 'ti-lowcode-base-gray-12': '#d9d9d9', - 'ti-lowcode-base-gray-13': '#dbdbdb', - 'ti-lowcode-base-gray-14': '#e5e5e5', - 'ti-lowcode-base-gray-15': '#e9e9e9', - 'ti-lowcode-base-gray-16': '#b9b9b9', - 'ti-lowcode-base-gray-17': '#ccc', - 'ti-lowcode-base-gray-18': '#c2c2c2', - 'ti-lowcode-base-gray-19': '#afafaf', - 'ti-lowcode-base-gray-20': '#ababab', - 'ti-lowcode-base-gray-21': '#adb0b8', - - 'ti-lowcode-base-gray-23': '#a6a6a6', - 'ti-lowcode-base-gray-24': '#a7aab2', - 'ti-lowcode-base-gray-25': '#4d4d4d', - 'ti-lowcode-base-gray-26': '#464c59', - 'ti-lowcode-base-gray-27': '#5a5a5a', - 'ti-lowcode-base-gray-28': '#555', - 'ti-lowcode-base-gray-29': '#5e5e5e', - 'ti-lowcode-base-gray-30': '#575d6c', - 'ti-lowcode-base-gray-31': '#595959', - 'ti-lowcode-base-gray-32': '#666', - 'ti-lowcode-base-gray-33': '#6a6a6a', - 'ti-lowcode-base-gray-34': '#6b6b6b', - 'ti-lowcode-base-gray-35': '#606165', - - 'ti-lowcode-base-gray-38': '#626262', - 'ti-lowcode-base-gray-39': '#737373', - 'ti-lowcode-base-gray-40': '#757575', - 'ti-lowcode-base-gray-41': '#888', - 'ti-lowcode-base-gray-42': '#8d8d8d', - 'ti-lowcode-base-gray-43': '#808080', - 'ti-lowcode-base-gray-44': '#8a8e99', - 'ti-lowcode-base-gray-45': '#9a9a9a', - 'ti-lowcode-base-gray-46': '#999', - 'ti-lowcode-base-gray-47': '#9d9d9d', - 'ti-lowcode-base-gray-48': '#9f9f9f', - - // black - 'ti-lowcode-base-dark-1': '#1f1f1f', - 'ti-lowcode-base-dark-2': '#1a1a1a', - 'ti-lowcode-base-dark-3': '#141414', - 'ti-lowcode-base-dark-4': '#191818', - 'ti-lowcode-base-dark-5': '#191919', - 'ti-lowcode-base-dark-6': '#202020', - 'ti-lowcode-base-dark-7': '#2e2e2e', - 'ti-lowcode-base-dark-8': '#2f2f2f', - 'ti-lowcode-base-dark-9': '#212121', - 'ti-lowcode-base-dark-10': '#232323', - 'ti-lowcode-base-dark-11': '#252b3a', - 'ti-lowcode-base-dark-12': '#2b2b2b', - 'ti-lowcode-base-dark-13': '#262626', - 'ti-lowcode-base-dark-14': '#222', - 'ti-lowcode-base-dark-15': '#202020', - 'ti-lowcode-base-dark-16': '#292929', - 'ti-lowcode-base-dark-17': '#292929', - 'ti-lowcode-base-dark-18': '#3c3c3c', - 'ti-lowcode-base-dark-19': '#313131', - 'ti-lowcode-base-dark-20': '#333', - 'ti-lowcode-base-dark-21': '#363636', - 'ti-lowcode-base-dark-22': '#404040', - 'ti-lowcode-base-dark-23': '#414141', - 'ti-lowcode-base-dark-24': '#433535', - 'ti-lowcode-base-dark-25': '#041320', - 'ti-lowcode-base-dark-26': '#000', - - // expand-red - 'ti-lowcode-base-red-1': '#ffeae8', - 'ti-lowcode-base-red-2': '#fccdca', - 'ti-lowcode-base-red-3': '#faa9a5', - 'ti-lowcode-base-red-4': '#fa8682', - 'ti-lowcode-base-red-5': '#f76360', - 'ti-lowcode-base-red-6': '#f23030', - 'ti-lowcode-base-red-7': '#cc272a', - 'ti-lowcode-base-red-8': '#a3171c', - 'ti-lowcode-base-red-9': '#78080e', - 'ti-lowcode-base-red-10': '#4d0005', - 'ti-lowcode-base-red-11': '#a64242', - 'ti-lowcode-base-red-12': '#d4827f', - 'ti-lowcode-base-red-13': '#f2c5c2', - 'ti-lowcode-base-red-14': '#c7000b', - 'ti-lowcode-base-red-15': '#fce3e1', - - // expand-orange - 'ti-lowcode-base-orange-1': '#fff5e8', - 'ti-lowcode-base-orange-2': '#fcdfb8', - 'ti-lowcode-base-orange-3': '#fcc98b', - 'ti-lowcode-base-orange-4': '#fcb25c', - 'ti-lowcode-base-orange-5': '#ff9a2e', - 'ti-lowcode-base-orange-6': '#ff8800', - 'ti-lowcode-base-orange-7': '#d96900', - 'ti-lowcode-base-orange-8': '#a64d00', - 'ti-lowcode-base-orange-9': '#733400', - 'ti-lowcode-base-orange-10': '#4d2201', - 'ti-lowcode-base-orange-11': '#9e6d3f', - 'ti-lowcode-base-orange-12': '#d6a981', - 'ti-lowcode-base-orange-13': '#f2d8c2', - 'ti-lowcode-base-orange-14': '#fa9841', - - // expand-yellow - 'ti-lowcode-base-yellow-1': '#fcf9eb', - 'ti-lowcode-base-yellow-2': '#fcf0c2', - 'ti-lowcode-base-yellow-3': '#fae396', - 'ti-lowcode-base-yellow-4': '#f7d56d', - 'ti-lowcode-base-yellow-5': '#f7c845', - 'ti-lowcode-base-yellow-6': '#fcbe1e', - 'ti-lowcode-base-yellow-7': '#d99b0b', - 'ti-lowcode-base-yellow-8': '#a67711', - 'ti-lowcode-base-yellow-9': '#7a5202', - 'ti-lowcode-base-yellow-10': '#4d3200', - 'ti-lowcode-base-yellow-11': '#9e7e3f', - 'ti-lowcode-base-yellow-12': '#d4b57f', - 'ti-lowcode-base-yellow-13': '#e6d3b8', - - // expand-lemon - 'ti-lowcode-base-lemon-1': '#fcfae8', - 'ti-lowcode-base-lemon-2': '#fcf6c2', - 'ti-lowcode-base-lemon-3': '#fcf092', - 'ti-lowcode-base-lemon-4': '#fae969', - 'ti-lowcode-base-lemon-5': '#f7e04a', - 'ti-lowcode-base-lemon-6': '#f7d916', - 'ti-lowcode-base-lemon-7': '#d9bb16', - 'ti-lowcode-base-lemon-8': '#a38708', - 'ti-lowcode-base-lemon-9': '#756002', - 'ti-lowcode-base-lemon-10': '#4d3d00', - 'ti-lowcode-base-lemon-11': '#9e8f46', - 'ti-lowcode-base-lemon-12': '#d6c581', - 'ti-lowcode-base-lemon-13': '#eddfb2', - - // expand-lime - 'ti-lowcode-base-lime-1': '#f8fae3', - 'ti-lowcode-base-lime-2': '#eff5bf', - 'ti-lowcode-base-lime-3': '#e2ed8e', - 'ti-lowcode-base-lime-4': '#d5e667', - 'ti-lowcode-base-lime-5': '#c6de3e', - 'ti-lowcode-base-lime-6': '#b2d119', - 'ti-lowcode-base-lime-7': '#95b312', - 'ti-lowcode-base-lime-8': '#728c0a', - 'ti-lowcode-base-lime-9': '#576e05', - 'ti-lowcode-base-lime-10': '#3b4d00', - 'ti-lowcode-base-lime-11': '#808c46', - 'ti-lowcode-base-lime-12': '#c1cc7a', - 'ti-lowcode-base-lime-13': '#3b4d00', - - // expand-kelly - 'ti-lowcode-base-kelly-1': '#f2fae6', - 'ti-lowcode-base-kelly-2': '#daf2bb', - 'ti-lowcode-base-kelly-3': '#b9e683', - 'ti-lowcode-base-kelly-4': '#9edb58', - 'ti-lowcode-base-kelly-5': '#7dcc29', - 'ti-lowcode-base-kelly-6': '#5cb300', - 'ti-lowcode-base-kelly-7': '#4b9902', - 'ti-lowcode-base-kelly-8': '#3c8001', - 'ti-lowcode-base-kelly-9': '#2e6600', - 'ti-lowcode-base-kelly-10': '#1f4700', - 'ti-lowcode-base-kelly-11': '#628c38', - 'ti-lowcode-base-kelly-12': '#a2c777', - 'ti-lowcode-base-kelly-13': '#d2e6bb', - - // expand-green - 'ti-lowcode-base-green-1': '#e8fced', - 'ti-lowcode-base-green-2': '#bbf2c8', - 'ti-lowcode-base-green-3': '#82e09a', - 'ti-lowcode-base-green-4': '#51d675', - 'ti-lowcode-base-green-5': '#25c251', - 'ti-lowcode-base-green-6': '#00b336', - 'ti-lowcode-base-green-7': '#029931', - 'ti-lowcode-base-green-8': '#01802b', - 'ti-lowcode-base-green-9': '#006624', - 'ti-lowcode-base-green-10': '#004a1b', - 'ti-lowcode-base-green-11': '#3d995c', - 'ti-lowcode-base-green-12': '#77c78f', - 'ti-lowcode-base-green-13': '#b8e6c7', - 'ti-lowcode-base-green-14': '#e6f2d5', - - // expand-mint - 'ti-lowcode-base-mint-1': '#e8fcfa', - 'ti-lowcode-base-mint-2': '#bff5ef', - 'ti-lowcode-base-mint-3': '#8be8e0', - 'ti-lowcode-base-mint-4': '#5dded5', - 'ti-lowcode-base-mint-5': '#38d6ce', - 'ti-lowcode-base-mint-6': '#10c7c1', - 'ti-lowcode-base-mint-7': '#0aaba8', - 'ti-lowcode-base-mint-8': '#048c8c', - 'ti-lowcode-base-mint-9': '#046466', - 'ti-lowcode-base-mint-10': '#004547', - 'ti-lowcode-base-mint-11': '#3d9996', - 'ti-lowcode-base-mint-12': '#77c7c2', - 'ti-lowcode-base-mint-13': '#b8e6e1', - 'ti-lowcode-base-mint-14': '#50d4ab', - - // expand-sky - 'ti-lowcode-base-sky-1': '#e8f8fc', - 'ti-lowcode-base-sky-2': '#c4f2ff', - 'ti-lowcode-base-sky-3': '#9de4fa', - 'ti-lowcode-base-sky-4': '#79d8f7', - 'ti-lowcode-base-sky-5': '#58cbf5', - 'ti-lowcode-base-sky-6': '#33bcf2', - 'ti-lowcode-base-sky-7': '#1f9acf', - 'ti-lowcode-base-sky-8': '#1075a3', - 'ti-lowcode-base-sky-9': '#065278', - 'ti-lowcode-base-sky-10': '#00304a', - 'ti-lowcode-base-sky-11': '#3d7f99', - 'ti-lowcode-base-sky-12': '#7ab8cc', - 'ti-lowcode-base-sky-13': '#b6e5f2', - - // expand-blue - 'ti-lowcode-base-blue-1': '#e3effa', - 'ti-lowcode-base-blue-2': '#c4e1ff', - 'ti-lowcode-base-blue-3': '#99c9ff', - 'ti-lowcode-base-blue-4': '#68abfc', - 'ti-lowcode-base-blue-5': '#4191fa', - 'ti-lowcode-base-blue-6': '#1476ff', - 'ti-lowcode-base-blue-7': '#0f5ed4', - 'ti-lowcode-base-blue-8': '#0845a6', - 'ti-lowcode-base-blue-9': '#022e7a', - 'ti-lowcode-base-blue-10': '#001a4a', - 'ti-lowcode-base-blue-11': '#3d6899', - 'ti-lowcode-base-blue-12': '#7fa6d4', - 'ti-lowcode-base-blue-13': '#b6d4f2', - 'ti-lowcode-base-blue-14': '#4f77ff', - 'ti-lowcode-base-blue-15': '#3961eb', - 'ti-lowcode-base-blue-16': '#7693f5', - 'ti-lowcode-base-blue-17': '#526ecc', - 'ti-lowcode-base-blue-18': '#deecff', - - // expand-indigo - 'ti-lowcode-base-indigo-1': '#eee8ff', - 'ti-lowcode-base-indigo-2': '#ddd7fa', - 'ti-lowcode-base-indigo-3': '#b19cf7', - 'ti-lowcode-base-indigo-4': '#957af5', - 'ti-lowcode-base-indigo-5': '#6e51e0', - 'ti-lowcode-base-indigo-6': '#512fd6', - 'ti-lowcode-base-indigo-7': '#391eb0', - 'ti-lowcode-base-indigo-8': '#27108f', - 'ti-lowcode-base-indigo-9': '#19056e', - 'ti-lowcode-base-indigo-10': '#0e004d', - 'ti-lowcode-base-indigo-11': '#584d99', - 'ti-lowcode-base-indigo-12': '#847acc', - 'ti-lowcode-base-indigo-13': '#bbb8e6', - - // expand-purple - 'ti-lowcode-base-purple-1': '#f5e8ff', - 'ti-lowcode-base-purple-2': '#e4c5fc', - 'ti-lowcode-base-purple-3': '#d0a1f7', - 'ti-lowcode-base-purple-4': '#b878f0', - 'ti-lowcode-base-purple-5': '#9f53e6', - 'ti-lowcode-base-purple-6': '#832fd6', - 'ti-lowcode-base-purple-7': '#641eb0', - 'ti-lowcode-base-purple-8': '#4c1091', - 'ti-lowcode-base-purple-9': '#370673', - 'ti-lowcode-base-purple-10': '#20004d', - 'ti-lowcode-base-purple-11': '#683d99', - 'ti-lowcode-base-purple-12': '#a07acc', - 'ti-lowcode-base-purple-13': '#cbb8e6', - 'ti-lowcode-base-purple-14': '#f0edfc', - - // expand-pink - 'ti-lowcode-base-pink-1': '#fce6fb', - 'ti-lowcode-base-pink-2': '#fcc2f9', - 'ti-lowcode-base-pink-3': '#f794f2', - 'ti-lowcode-base-pink-4': '#eb67e6', - 'ti-lowcode-base-pink-5': '#e841e5', - 'ti-lowcode-base-pink-6': '#d91ad9', - 'ti-lowcode-base-pink-7': '#b50fb8', - 'ti-lowcode-base-pink-8': '#8f0a94', - 'ti-lowcode-base-pink-9': '#6b0370', - 'ti-lowcode-base-pink-10': '#47004d', - 'ti-lowcode-base-pink-11': '#993d99', - 'ti-lowcode-base-pink-12': '#c97acc', - 'ti-lowcode-base-pink-13': '#e2b8e6', - - // expand-rose - 'ti-lowcode-base-rose-1': '#fce6ef', - 'ti-lowcode-base-rose-2': '#ffc4de', - 'ti-lowcode-base-rose-3': '#fa9bc9', - 'ti-lowcode-base-rose-4': '#f56cac', - 'ti-lowcode-base-rose-5': '#eb4696', - 'ti-lowcode-base-rose-6': '#e61c81', - 'ti-lowcode-base-rose-7': '#b50e65', - 'ti-lowcode-base-rose-8': '#940a54', - 'ti-lowcode-base-rose-9': '#70033f', - 'ti-lowcode-base-rose-10': '#4d002b', - 'ti-lowcode-base-rose-11': '#993d6e', - 'ti-lowcode-base-rose-12': '#cc7aa6', - 'ti-lowcode-base-rose-13': '#e6b8d2', - - // 公司品牌色 - 'ti-lowcode-base-brand-color': '#c7000b', - - // 主色 - 'ti-lowcode-base-primary-color-1': '#191919', - 'ti-lowcode-base-primary-color-2': '#1476ff', - - // 背景色 - 'ti-lowcode-base-bg': '#f5f5f5', - 'ti-lowcode-base-bg-1': 'rgba(0, 0, 0, 0.05)', - 'ti-lowcode-base-bg-2': '#fafafa', - 'ti-lowcode-base-bg-3': '#191919', - 'ti-lowcode-base-bg-4': '#595959', - 'ti-lowcode-base-bg-5': '#fff', - 'ti-lowcode-base-bg-6': '#5959591a', - 'ti-lowcode-base-dark-bg': '#141414', - 'ti-lowcode-base-dark-bg-2': '#333', - 'ti-lowcode-base-dark-bg-3': '#e6e6e6', - 'ti-lowcode-base-dark-bg-4': '#a6a6a6', - 'ti-lowcode-base-dark-bg-5': '#000', - 'ti-lowcode-base-dark-bg-6': '#a6a6a61a', - - // 文本色 - 'ti-lowcode-base-text-color': '#191919', - 'ti-lowcode-base-text-color-1': '#595959', - 'ti-lowcode-base-text-color-2': '#1476ff', - 'ti-lowcode-base-text-color-3': '#808080', - 'ti-lowcode-base-text-color-4': '#c2c2c2', - 'ti-lowcode-base-dark-text-color': '#e6e6e6', - 'ti-lowcode-base-dark-text-color-1': '#a6a6a6', - 'ti-lowcode-base-text-dark-color-2': '#595959', - - // 文本链接色 - 'ti-lowcode-base-text-link-color': '#191919', - 'ti-lowcode-base-text-link-color-1': '#595959', - 'ti-lowcode-base-text-link-color-2': '#c2c2c2', - 'ti-lowcode-base-text-link-color-3': '#fff', - 'ti-lowcode-base-dark-text-link-color': '#e6e6e6', - 'ti-lowcode-base-dark-text-link-color-1': '#a6a6a6', - - // 按钮边框色 - 'ti-lowcode-base-secondary-button-border-color': '#595959', - 'ti-lowcode-base-secondary-button-border-hover-color': '#c2c2c2', - 'ti-lowcode-base-default-button-border-color': '#c2c2c2', - 'ti-lowcode-base-default-button-border-hover-color': '#191919', - 'ti-lowcode-base-default-button-border-disable-color': '#dbdbdb', - 'ti-lowcode-base-dark-secondary-button-border-color': '#a6a6a6', - 'ti-lowcode-base-dark-secondary-button-border-hover-color': '#3d3d3d', - 'ti-lowcode-base-dark-default-button-border-color': '#595959', - 'ti-lowcode-base-dark-default-button-border-hover-color': '#e6e6e6', - - // 分割线 - 'ti-lowcode-base-split-color-1': 'rgba(0, 0, 0, 0.08)', // 白色背景分割线 - 'ti-lowcode-base-split-color-2': 'rgba(0, 0, 0, 0.15)', // 灰色背景分割线 - 'ti-lowcode-base-dark-split-color-1': 'rgba(255, 255, 255, 0.08)', // 白色背景分割线 - 'ti-lowcode-base-dark-split-color-2': 'rgba(255, 255, 255, 0.15)', - - // 状态色 - 'ti-lowcode-base-error-color': '#f23030', - 'ti-lowcode-base-warn-color': '#ff8800', - 'ti-lowcode-base-warn-color-1': '#f7d916', - 'ti-lowcode-base-success-color': '#5cb300', - 'ti-lowcode-base-prompt-color': '#1476ff', - 'ti-lowcode-base-invalidate-color': '#ebebeb' -} - -export * from './light-component.js' - -export * from './dark-component.js' diff --git a/packages/theme/base/src/base.less b/packages/theme/base/src/base.less new file mode 100644 index 000000000..b6b881924 --- /dev/null +++ b/packages/theme/base/src/base.less @@ -0,0 +1,428 @@ +:root { + // 透明色 + --ti-base-color-transparent: transparent; + + // 灰阶 + --ti-lowcode-base-gray-1: #fff; + --ti-lowcode-base-gray-2: #fafafa; + --ti-lowcode-base-gray-3: #f2f2f2; + --ti-lowcode-base-gray-4: #f2f5fc; + --ti-lowcode-base-gray-5: #f5f5f5; + --ti-lowcode-base-gray-6: #f0f0f0; + --ti-lowcode-base-gray-7: #e6e6e6; + --ti-lowcode-base-gray-8: #eeeeee; + --ti-lowcode-base-gray-9: #dfe1e6; + --ti-lowcode-base-gray-10: #e3e3e3; + --ti-lowcode-base-gray-11: #ebebeb; + --ti-lowcode-base-gray-12: #d9d9d9; + --ti-lowcode-base-gray-13: #dbdbdb; + --ti-lowcode-base-gray-14: #e5e5e5; + --ti-lowcode-base-gray-15: #e9e9e9; + --ti-lowcode-base-gray-16: #b9b9b9; + --ti-lowcode-base-gray-17: #ccc; + --ti-lowcode-base-gray-18: #c2c2c2; + --ti-lowcode-base-gray-19: #afafaf; + --ti-lowcode-base-gray-20: #ababab; + --ti-lowcode-base-gray-21: #adb0b8; + + --ti-lowcode-base-gray-23: #a6a6a6; + --ti-lowcode-base-gray-24: #a7aab2; + --ti-lowcode-base-gray-25: #4d4d4d; + --ti-lowcode-base-gray-26: #464c59; + --ti-lowcode-base-gray-27: #5a5a5a; + --ti-lowcode-base-gray-28: #555; + --ti-lowcode-base-gray-29: #5e5e5e; + --ti-lowcode-base-gray-30: #575d6c; + --ti-lowcode-base-gray-31: #595959; + --ti-lowcode-base-gray-32: #666; + --ti-lowcode-base-gray-33: #6a6a6a; + --ti-lowcode-base-gray-34: #6b6b6b; + --ti-lowcode-base-gray-35: #606165; + + --ti-lowcode-base-gray-38: #626262; + --ti-lowcode-base-gray-39: #737373; + --ti-lowcode-base-gray-40: #757575; + --ti-lowcode-base-gray-41: #888; + --ti-lowcode-base-gray-42: #8d8d8d; + --ti-lowcode-base-gray-43: #808080; + --ti-lowcode-base-gray-44: #8a8e99; + --ti-lowcode-base-gray-45: #9a9a9a; + --ti-lowcode-base-gray-46: #999; + --ti-lowcode-base-gray-47: #9d9d9d; + --ti-lowcode-base-gray-48: #9f9f9f; + + // black + --ti-lowcode-base-dark-1: #1f1f1f; + --ti-lowcode-base-dark-2: #1a1a1a; + --ti-lowcode-base-dark-3: #141414; + --ti-lowcode-base-dark-4: #191818; + --ti-lowcode-base-dark-5: #191919; + --ti-lowcode-base-dark-6: #202020; + --ti-lowcode-base-dark-7: #2e2e2e; + --ti-lowcode-base-dark-8: #2f2f2f; + --ti-lowcode-base-dark-9: #212121; + --ti-lowcode-base-dark-10: #232323; + --ti-lowcode-base-dark-11: #252b3a; + --ti-lowcode-base-dark-12: #2b2b2b; + --ti-lowcode-base-dark-13: #262626; + --ti-lowcode-base-dark-14: #222; + --ti-lowcode-base-dark-15: #202020; + --ti-lowcode-base-dark-16: #292929; + --ti-lowcode-base-dark-17: #292929; + --ti-lowcode-base-dark-18: #3c3c3c; + --ti-lowcode-base-dark-19: #313131; + --ti-lowcode-base-dark-20: #333; + --ti-lowcode-base-dark-21: #363636; + --ti-lowcode-base-dark-22: #404040; + --ti-lowcode-base-dark-23: #414141; + --ti-lowcode-base-dark-24: #433535; + --ti-lowcode-base-dark-25: #041320; + --ti-lowcode-base-dark-26: #000; + + // expand-red + --ti-lowcode-base-red-1: #ffeae8; + --ti-lowcode-base-red-2: #fccdca; + --ti-lowcode-base-red-3: #faa9a5; + --ti-lowcode-base-red-4: #fa8682; + --ti-lowcode-base-red-5: #f76360; + --ti-lowcode-base-red-6: #f23030; + --ti-lowcode-base-red-7: #cc272a; + --ti-lowcode-base-red-8: #a3171c; + --ti-lowcode-base-red-9: #78080e; + --ti-lowcode-base-red-10: #4d0005; + --ti-lowcode-base-red-11: #a64242; + --ti-lowcode-base-red-12: #d4827f; + --ti-lowcode-base-red-13: #f2c5c2; + --ti-lowcode-base-red-14: #c7000b; + --ti-lowcode-base-red-15: #fce3e1; + + // expand-orange + --ti-lowcode-base-orange-1: #fff5e8; + --ti-lowcode-base-orange-2: #fcdfb8; + --ti-lowcode-base-orange-3: #fcc98b; + --ti-lowcode-base-orange-4: #fcb25c; + --ti-lowcode-base-orange-5: #ff9a2e; + --ti-lowcode-base-orange-6: #ff8800; + --ti-lowcode-base-orange-7: #d96900; + --ti-lowcode-base-orange-8: #a64d00; + --ti-lowcode-base-orange-9: #733400; + --ti-lowcode-base-orange-10: #4d2201; + --ti-lowcode-base-orange-11: #9e6d3f; + --ti-lowcode-base-orange-12: #d6a981; + --ti-lowcode-base-orange-13: #f2d8c2; + --ti-lowcode-base-orange-14: #fa9841; + + // expand-yellow + --ti-lowcode-base-yellow-1: #fcf9eb; + --ti-lowcode-base-yellow-2: #fcf0c2; + --ti-lowcode-base-yellow-3: #fae396; + --ti-lowcode-base-yellow-4: #f7d56d; + --ti-lowcode-base-yellow-5: #f7c845; + --ti-lowcode-base-yellow-6: #fcbe1e; + --ti-lowcode-base-yellow-7: #d99b0b; + --ti-lowcode-base-yellow-8: #a67711; + --ti-lowcode-base-yellow-9: #7a5202; + --ti-lowcode-base-yellow-10: #4d3200; + --ti-lowcode-base-yellow-11: #9e7e3f; + --ti-lowcode-base-yellow-12: #d4b57f; + --ti-lowcode-base-yellow-13: #e6d3b8; + + // expand-lemon + --ti-lowcode-base-lemon-1: #fcfae8; + --ti-lowcode-base-lemon-2: #fcf6c2; + --ti-lowcode-base-lemon-3: #fcf092; + --ti-lowcode-base-lemon-4: #fae969; + --ti-lowcode-base-lemon-5: #f7e04a; + --ti-lowcode-base-lemon-6: #f7d916; + --ti-lowcode-base-lemon-7: #d9bb16; + --ti-lowcode-base-lemon-8: #a38708; + --ti-lowcode-base-lemon-9: #756002; + --ti-lowcode-base-lemon-10: #4d3d00; + --ti-lowcode-base-lemon-11: #9e8f46; + --ti-lowcode-base-lemon-12: #d6c581; + --ti-lowcode-base-lemon-13: #eddfb2; + + // expand-lime + --ti-lowcode-base-lime-1: #f8fae3; + --ti-lowcode-base-lime-2: #eff5bf; + --ti-lowcode-base-lime-3: #e2ed8e; + --ti-lowcode-base-lime-4: #d5e667; + --ti-lowcode-base-lime-5: #c6de3e; + --ti-lowcode-base-lime-6: #b2d119; + --ti-lowcode-base-lime-7: #95b312; + --ti-lowcode-base-lime-8: #728c0a; + --ti-lowcode-base-lime-9: #576e05; + --ti-lowcode-base-lime-10: #3b4d00; + --ti-lowcode-base-lime-11: #808c46; + --ti-lowcode-base-lime-12: #c1cc7a; + --ti-lowcode-base-lime-13: #3b4d00; + + // expand-kelly + --ti-lowcode-base-kelly-1: #f2fae6; + --ti-lowcode-base-kelly-2: #daf2bb; + --ti-lowcode-base-kelly-3: #b9e683; + --ti-lowcode-base-kelly-4: #9edb58; + --ti-lowcode-base-kelly-5: #7dcc29; + --ti-lowcode-base-kelly-6: #5cb300; + --ti-lowcode-base-kelly-7: #4b9902; + --ti-lowcode-base-kelly-8: #3c8001; + --ti-lowcode-base-kelly-9: #2e6600; + --ti-lowcode-base-kelly-10: #1f4700; + --ti-lowcode-base-kelly-11: #628c38; + --ti-lowcode-base-kelly-12: #a2c777; + --ti-lowcode-base-kelly-13: #d2e6bb; + + // expand-green + --ti-lowcode-base-green-1: #e8fced; + --ti-lowcode-base-green-2: #bbf2c8; + --ti-lowcode-base-green-3: #82e09a; + --ti-lowcode-base-green-4: #51d675; + --ti-lowcode-base-green-5: #25c251; + --ti-lowcode-base-green-6: #00b336; + --ti-lowcode-base-green-7: #029931; + --ti-lowcode-base-green-8: #01802b; + --ti-lowcode-base-green-9: #006624; + --ti-lowcode-base-green-10: #004a1b; + --ti-lowcode-base-green-11: #3d995c; + --ti-lowcode-base-green-12: #77c78f; + --ti-lowcode-base-green-13: #b8e6c7; + --ti-lowcode-base-green-14: #e6f2d5; + + // expand-mint + --ti-lowcode-base-mint-1: #e8fcfa; + --ti-lowcode-base-mint-2: #bff5ef; + --ti-lowcode-base-mint-3: #8be8e0; + --ti-lowcode-base-mint-4: #5dded5; + --ti-lowcode-base-mint-5: #38d6ce; + --ti-lowcode-base-mint-6: #10c7c1; + --ti-lowcode-base-mint-7: #0aaba8; + --ti-lowcode-base-mint-8: #048c8c; + --ti-lowcode-base-mint-9: #046466; + --ti-lowcode-base-mint-10: #004547; + --ti-lowcode-base-mint-11: #3d9996; + --ti-lowcode-base-mint-12: #77c7c2; + --ti-lowcode-base-mint-13: #b8e6e1; + --ti-lowcode-base-mint-14: #50d4ab; + + // expand-sky + --ti-lowcode-base-sky-1: #e8f8fc; + --ti-lowcode-base-sky-2: #c4f2ff; + --ti-lowcode-base-sky-3: #9de4fa; + --ti-lowcode-base-sky-4: #79d8f7; + --ti-lowcode-base-sky-5: #58cbf5; + --ti-lowcode-base-sky-6: #33bcf2; + --ti-lowcode-base-sky-7: #1f9acf; + --ti-lowcode-base-sky-8: #1075a3; + --ti-lowcode-base-sky-9: #065278; + --ti-lowcode-base-sky-10: #00304a; + --ti-lowcode-base-sky-11: #3d7f99; + --ti-lowcode-base-sky-12: #7ab8cc; + --ti-lowcode-base-sky-13: #b6e5f2; + + // expand-blue + --ti-lowcode-base-blue-1: #e3effa; + --ti-lowcode-base-blue-2: #c4e1ff; + --ti-lowcode-base-blue-3: #99c9ff; + --ti-lowcode-base-blue-4: #68abfc; + --ti-lowcode-base-blue-5: #4191fa; + --ti-lowcode-base-blue-6: #1476ff; + --ti-lowcode-base-blue-7: #0f5ed4; + --ti-lowcode-base-blue-8: #0845a6; + --ti-lowcode-base-blue-9: #022e7a; + --ti-lowcode-base-blue-10: #001a4a; + --ti-lowcode-base-blue-11: #3d6899; + --ti-lowcode-base-blue-12: #7fa6d4; + --ti-lowcode-base-blue-13: #b6d4f2; + --ti-lowcode-base-blue-14: #4f77ff; + --ti-lowcode-base-blue-15: #3961eb; + --ti-lowcode-base-blue-16: #7693f5; + --ti-lowcode-base-blue-17: #526ecc; + --ti-lowcode-base-blue-18: #deecff; + + // expand-indigo + --ti-lowcode-base-indigo-1: #eee8ff; + --ti-lowcode-base-indigo-2: #ddd7fa; + --ti-lowcode-base-indigo-3: #b19cf7; + --ti-lowcode-base-indigo-4: #957af5; + --ti-lowcode-base-indigo-5: #6e51e0; + --ti-lowcode-base-indigo-6: #512fd6; + --ti-lowcode-base-indigo-7: #391eb0; + --ti-lowcode-base-indigo-8: #27108f; + --ti-lowcode-base-indigo-9: #19056e; + --ti-lowcode-base-indigo-10: #0e004d; + --ti-lowcode-base-indigo-11: #584d99; + --ti-lowcode-base-indigo-12: #847acc; + --ti-lowcode-base-indigo-13: #bbb8e6; + + // expand-purple + --ti-lowcode-base-purple-1: #f5e8ff; + --ti-lowcode-base-purple-2: #e4c5fc; + --ti-lowcode-base-purple-3: #d0a1f7; + --ti-lowcode-base-purple-4: #b878f0; + --ti-lowcode-base-purple-5: #9f53e6; + --ti-lowcode-base-purple-6: #832fd6; + --ti-lowcode-base-purple-7: #641eb0; + --ti-lowcode-base-purple-8: #4c1091; + --ti-lowcode-base-purple-9: #370673; + --ti-lowcode-base-purple-10: #20004d; + --ti-lowcode-base-purple-11: #683d99; + --ti-lowcode-base-purple-12: #a07acc; + --ti-lowcode-base-purple-13: #cbb8e6; + --ti-lowcode-base-purple-14: #f0edfc; + + // expand-pink + --ti-lowcode-base-pink-1: #fce6fb; + --ti-lowcode-base-pink-2: #fcc2f9; + --ti-lowcode-base-pink-3: #f794f2; + --ti-lowcode-base-pink-4: #eb67e6; + --ti-lowcode-base-pink-5: #e841e5; + --ti-lowcode-base-pink-6: #d91ad9; + --ti-lowcode-base-pink-7: #b50fb8; + --ti-lowcode-base-pink-8: #8f0a94; + --ti-lowcode-base-pink-9: #6b0370; + --ti-lowcode-base-pink-10: #47004d; + --ti-lowcode-base-pink-11: #993d99; + --ti-lowcode-base-pink-12: #c97acc; + --ti-lowcode-base-pink-13: #e2b8e6; + + // expand-rose + --ti-lowcode-base-rose-1: #fce6ef; + --ti-lowcode-base-rose-2: #ffc4de; + --ti-lowcode-base-rose-3: #fa9bc9; + --ti-lowcode-base-rose-4: #f56cac; + --ti-lowcode-base-rose-5: #eb4696; + --ti-lowcode-base-rose-6: #e61c81; + --ti-lowcode-base-rose-7: #b50e65; + --ti-lowcode-base-rose-8: #940a54; + --ti-lowcode-base-rose-9: #70033f; + --ti-lowcode-base-rose-10: #4d002b; + --ti-lowcode-base-rose-11: #993d6e; + --ti-lowcode-base-rose-12: #cc7aa6; + --ti-lowcode-base-rose-13: #e6b8d2; + + // 公司品牌色 + --ti-lowcode-base-brand-color: #c7000b; + + // 主色 + --ti-lowcode-base-primary-color-1: #191919; + --ti-lowcode-base-primary-color-2: #1476ff; + + // 背景色 + --ti-lowcode-base-bg: #f5f5f5; + --ti-lowcode-base-bg-1: rgba(0, 0, 0, 0.05); + --ti-lowcode-base-bg-2: #fafafa; + --ti-lowcode-base-bg-3: #191919; + --ti-lowcode-base-bg-4: #595959; + --ti-lowcode-base-bg-5: #fff; + --ti-lowcode-base-bg-6: #5959591a; + --ti-lowcode-base-dark-bg: #141414; + --ti-lowcode-base-dark-bg-2: #333; + --ti-lowcode-base-dark-bg-3: #e6e6e6; + --ti-lowcode-base-dark-bg-4: #a6a6a6; + --ti-lowcode-base-dark-bg-5: #000; + --ti-lowcode-base-dark-bg-6: #a6a6a61a; + --ti-lowcode-base-dark-bg-7: rgba(255, 255, 255, 0.1); + + // 文本色 + --ti-lowcode-base-text-color: #191919; + --ti-lowcode-base-text-color-1: #595959; + --ti-lowcode-base-text-color-2: #1476ff; + --ti-lowcode-base-text-color-3: #808080; + --ti-lowcode-base-text-color-4: #c2c2c2; + --ti-lowcode-base-dark-text-color: #e6e6e6; + --ti-lowcode-base-dark-text-color-1: #a6a6a6; + --ti-lowcode-base-text-dark-color-2: #595959; + + // 文本链接色 + --ti-lowcode-base-text-link-color: #191919; + --ti-lowcode-base-text-link-color-1: #595959; + --ti-lowcode-base-text-link-color-2: #c2c2c2; + --ti-lowcode-base-text-link-color-3: #fff; + --ti-lowcode-base-dark-text-link-color: #e6e6e6; + --ti-lowcode-base-dark-text-link-color-1: #a6a6a6; + + // 按钮边框色 + --ti-lowcode-base-secondary-button-border-color: #595959; + --ti-lowcode-base-secondary-button-border-hover-color: #c2c2c2; + --ti-lowcode-base-default-button-border-color: #c2c2c2; + --ti-lowcode-base-default-button-border-hover-color: #191919; + --ti-lowcode-base-default-button-border-disable-color: #dbdbdb; + --ti-lowcode-base-dark-secondary-button-border-color: #a6a6a6; + --ti-lowcode-base-dark-secondary-button-border-hover-color: #3d3d3d; + --ti-lowcode-base-dark-default-button-border-color: #595959; + --ti-lowcode-base-dark-default-button-border-hover-color: #e6e6e6; + + // 分割线 + --ti-lowcode-base-split-color-1: rgba(0, 0, 0, 0.08); // 白色背景分割线 + --ti-lowcode-base-split-color-2: rgba(0, 0, 0, 0.15); // 灰色背景分割线 + --ti-lowcode-base-dark-split-color-1: rgba(255, 255, 255, 0.08); // 白色背景分割线 + --ti-lowcode-base-dark-split-color-2: rgba(255, 255, 255, 0.15); + + // 状态色 + --ti-lowcode-base-error-color: #f23030; + --ti-lowcode-base-warn-color: #ff8800; + --ti-lowcode-base-warn-color-1: #f7d916; + --ti-lowcode-base-success-color: #5cb300; + --ti-lowcode-base-prompt-color: #1476ff; + --ti-lowcode-base-invalidate-color: #ebebeb; + + /** + * 1.1 行高 + */ + --ti-lowcode-base-line-height-number: 1.5; // 文字行高倍数，建议组件中设置行高使用该变量，如有特殊情况，请自行定义 + --ti-lowcode-base-line-height-base: 12px; // 跟字号保持一致 + --ti-lowcode-base-line-height-1: 14px; + --ti-lowcode-base-line-height-2: 16px; + --ti-lowcode-base-line-height-3: 18px; + --ti-lowcode-base-line-height-4: 20px; + --ti-lowcode-base-line-height-5: 24px; + --ti-lowcode-base-line-height-6: 32px; + --ti-lowcode-base-line-height-7: 36px; + + /** + * 1.2 间距 + * 适用于组件中的margin、padding + **/ + /* 基础间距 */ + --ti-lowcode-base-space-base: 4px; + --ti-lowcode-base-space-2x: calc(var(--ti-lowcode-base-space-base) * 2); // 间距-2 + --ti-lowcode-base-space-3x: calc(var(--ti-lowcode-base-space-base) * 3); // 间距-3 + --ti-lowcode-base-space-4x: calc(var(--ti-lowcode-base-space-base) * 4); // 间距-4 + --ti-lowcode-base-space-5x: calc(var(--ti-lowcode-base-space-base) * 5); // 间距-5 + --ti-lowcode-base-space-6x: calc(var(--ti-lowcode-base-space-base) * 6); // 间距-6 + --ti-lowcode-base-space-8x: calc(var(--ti-lowcode-base-space-base) * 8); // 间距-7 + --ti-lowcode-base-space-10x: calc(var(--ti-lowcode-base-space-base) * 10); // 间距-8 + + /* 其他间距 */ + --ti-lowcode-base-space-0: 0px; // 其他间距-1 + --ti-lowcode-base-space-1: 1px; // 其他间距-2 + --ti-lowcode-base-space-2: 2px; // 下拉面板距离上部输入框的间距 + --ti-lowcode-base-space-6: 6px; // 其他间距-3 + --ti-lowcode-base-space-10: 10px; // 其他间距-4 + + /** + * 1.3 字号 + **/ + --ti-lowcode-base-font-size-base: 12px; // 正文-常规 + --ti-lowcode-base-font-size-1: 14px; + --ti-lowcode-base-font-size-2: 16px; + --ti-lowcode-base-font-size-3: 18px; + --ti-lowcode-base-font-size-4: 20px; + --ti-lowcode-base-font-size-5: 24px; + --ti-lowcode-base-font-size-6: 32px; + --ti-lowcode-base-font-size-7: 36px; + + /** + * 1.4字重 + **/ + --ti-lowcode-base-font-weight-1: 100; // 极细 + --ti-lowcode-base-font-weight-2: 200; // 纤细 + --ti-lowcode-base-font-weight-3: 300; // 细体 + --ti-lowcode-base-font-weight-4: normal; // 常规 + --ti-lowcode-base-font-weight-5: 500; // 中等 + --ti-lowcode-base-font-weight-6: 600; // 半粗 + --ti-lowcode-base-font-weight-7: bold; // 粗体 + --ti-lowcode-base-font-weight-8: 800; // 中黑 + --ti-lowcode-base-font-weight-9: 900; // 黑体 + --ti-lowcode-base-font-weight-bold: 700; +} diff --git a/packages/theme/base/src/dark-common.js b/packages/theme/base/src/dark-common.js deleted file mode 100644 index 4901697c4..000000000 --- a/packages/theme/base/src/dark-common.js +++ /dev/null @@ -1,72 +0,0 @@ -export const tinyDarkCommon = { - 'ti-lowcode-common-gray-26': 'var(--ti-lowcode-base-gray-26)', - 'ti-lowcode-common-transparent-color': 'var(--ti-base-color-transparent)', - 'ti-lowcode-common-search-bg': 'var(--ti-lowcode-base-dark-13)', - - // 背景 - 'ti-lowcode-common-component-bg': 'var(--ti-lowcode-base-dark-8)', - 'ti-lowcode-common-component-hover-bg': 'var(--ti-lowcode-base-dark-18)', - 'ti-lowcode-common-layout-bg': 'var(--ti-lowcode-base-dark-4)', - 'ti-lowcode-common-header-bg': 'var(--ti-lowcode-base-dark-6)', - 'ti-lowcode-common-bg-1': 'var(--ti-lowcode-base-dark-22)', - 'ti-lowcode-common-bg-2': 'var(--ti-lowcode-base-gray-25)', - 'ti-lowcode-common-bg-3': 'var(--ti-lowcode-base-dark-12)', - 'ti-lowcode-common-bg-4': 'var(--ti-lowcode-base-dark-13)', - 'ti-lowcode-common-bg-5': 'var(--ti-lowcode-base-gray-8)', - 'ti-lowcode-common-bg-6': 'var(--ti-lowcode-base-dark-24)', - 'ti-lowcode-common-bg-7': 'var(--ti-lowcode-base-gray-44)', - 'ti-lowcode-common-bg-8': 'var(--ti-lowcode-base-dark-14)', - 'ti-lowcode-common-bg-9': 'var(--ti-lowcode-base-dark-16)', - 'ti-lowcode-common-hover-bg-1': 'rgba(255, 255, 255, 0.1)', - 'ti-lowcode-common-icon-hover-1': 'var(--ti-lowcode-base-gray-21)', - - // 文本 - 'ti-lowcode-common-primary-text-color': 'var(--ti-lowcode-base-gray-1)', - 'ti-lowcode-common-secondary-text-color': 'var(--ti-lowcode-base-gray-21)', - 'ti-lowcode-common-text-title-color': 'var(--ti-lowcode-base-dark-11)', - 'ti-lowcode-common-text-color-1': 'var(--ti-lowcode-base-gray-33)', - 'ti-lowcode-common-text-color-2': 'var(--ti-lowcode-base-gray-12)', - 'ti-lowcode-common-text-color-3': 'var(--ti-lowcode-base-gray-1)', - 'ti-lowcode-common-text-color-4': 'var(--ti-lowcode-base-mint-14)', - 'ti-lowcode-common-text-color-5': 'var(--ti-lowcode-base-gray-44)', - 'ti-lowcode-common-text-color-6': 'var(--ti-lowcode-base-gray-30)', - 'ti-lowcode-common-text-color-7': 'var(--ti-lowcode-base-gray-7)', - 'ti-lowcode-common-text-color-8': 'var(--ti-lowcode-base-text-color)', - 'ti-lowcode-common-third-text-color': 'var(--ti-lowcode-base-gray-20)', - 'ti-lowcode-common-text-main-color': 'var(--ti-lowcode-base-gray-31)', - 'ti-lowcode-common-text-desc-color': 'var(--ti-lowcode-base-gray-43)', - 'ti-lowcode-common-text-placeholder-color': 'var(--ti-lowcode-base-gray-31)', - - // 边框 - 'ti-lowcode-common-border-color-1': 'var(--ti-lowcode-base-dark-9)', - 'ti-lowcode-common-border-color-2': 'var(--ti-lowcode-base-dark-19)', - 'ti-lowcode-common-border-color-3': 'var(--ti-lowcode-base-gray-35)', - 'ti-lowcode-common-border-color-4': 'var(--ti-lowcode-base-dark-10)', - - // 信息 - 'ti-lowcode-common-primary-color': 'var(--ti-lowcode-base-blue-14)', - 'ti-lowcode-common-primary-hover-color': 'var(--ti-lowcode-base-blue-15)', - 'ti-lowcode-common-error-color': 'var(--ti-lowcode-base-red-6)', - 'ti-lowcode-common-info-color': 'var(--ti-lowcode-base-blue-16)', - 'ti-lowcode-common-warning-color': 'var(--ti-lowcode-base-orange-14)', - 'ti-lowcode-common-empty-color': 'var(--ti-lowcode-base-gray-45)', - 'ti-lowcode-common-danger-color': 'var(--ti-lowcode-base-red-14)', - - // 按钮 - 'ti-lowcode-common-btn-default-color': 'var(--ti-lowcode-base-dark-5)', // 默认按钮颜色 - 'ti-lowcode-common-btn-default-disabled-color': 'var(--ti-lowcode-base-gray-18)', // 默认禁用颜色 - 'ti-lowcode-common-btn-default-hover-color': 'var(--ti-lowcode-base-gray-31)', // 默认按钮 hover 颜色 - 'ti-lowcode-common-btn-default-border-color': 'var(--ti-lowcode-base-dark-5)', // 默认按钮边框色 - 'ti-lowcode-common-btn-default-border-hover-color': 'var(--ti-lowcode-base-gray-31)', // 默认按钮 hover 边框色 - - // svg按钮 - 'ti-lowcode-common-svg-button-color': 'var(--ti-lowcode-base-gray-12)', - 'ti-lowcode-common-svg-button-hover-color': 'var(--ti-lowcode-base-blue-14)', - 'ti-lowcode-common-svg-button-hover-bg-color': 'var(--ti-base-color-transparent)', - 'ti-lowcode-common-svg-button-active-color': 'var(--ti-lowcode-base-blue-14)', - 'ti-lowcode-common-svg-button-active-bg-color': 'var(--ti-base-color-transparent)', - - // 关闭按钮 - 'ti-lowcode-common-close-icon-text-color': 'var(--ti-lowcode-base-gray-20)', // 关闭按钮默认颜色 - 'ti-lowcode-common-close-icon-text-hover-color': 'var(--ti-lowcode-base-gray-1)' -} diff --git a/packages/theme/base/src/dark-component.js b/packages/theme/base/src/dark-component.js index 99c6f8115..7f4d597e2 100644 --- a/packages/theme/base/src/dark-component.js +++ b/packages/theme/base/src/dark-component.js @@ -1,4 +1,5 @@ -import './dark-common.js' +import './base.less' +import './dark.less' export const concatThemeDark = { // 弹窗 diff --git a/packages/theme/base/src/dark.less b/packages/theme/base/src/dark.less new file mode 100644 index 000000000..0305e60ad --- /dev/null +++ b/packages/theme/base/src/dark.less @@ -0,0 +1,73 @@ +// 暗色主题 +:root { + --ti-lowcode-common-gray-26: var(--ti-lowcode-base-gray-26); + --ti-lowcode-common-transparent-color: var(--ti-base-color-transparent); + --ti-lowcode-common-search-bg: var(--ti-lowcode-base-dark-13); + + // 背景 + --ti-lowcode-common-component-bg: var(--ti-lowcode-base-dark-8); + --ti-lowcode-common-component-hover-bg: var(--ti-lowcode-base-dark-18); + --ti-lowcode-common-layout-bg: var(--ti-lowcode-base-dark-4); + --ti-lowcode-common-header-bg: var(--ti-lowcode-base-dark-6); + --ti-lowcode-common-bg-1: var(--ti-lowcode-base-dark-22); + --ti-lowcode-common-bg-2: var(--ti-lowcode-base-gray-25); + --ti-lowcode-common-bg-3: var(--ti-lowcode-base-dark-12); + --ti-lowcode-common-bg-4: var(--ti-lowcode-base-dark-13); + --ti-lowcode-common-bg-5: var(--ti-lowcode-base-gray-8); + --ti-lowcode-common-bg-6: var(--ti-lowcode-base-dark-24); + --ti-lowcode-common-bg-7: var(--ti-lowcode-base-gray-44); + --ti-lowcode-common-bg-8: var(--ti-lowcode-base-dark-14); + --ti-lowcode-common-bg-9: var(--ti-lowcode-base-dark-16); + --ti-lowcode-common-hover-bg-1: var(--ti-lowcode-base-dark-bg-7); + --ti-lowcode-common-icon-hover-1: var(--ti-lowcode-base-gray-21); + + // 文本 + --ti-lowcode-common-primary-text-color: var(--ti-lowcode-base-gray-1); + --ti-lowcode-common-secondary-text-color: var(--ti-lowcode-base-gray-21); + --ti-lowcode-common-text-title-color: var(--ti-lowcode-base-dark-11); + --ti-lowcode-common-text-color-1: var(--ti-lowcode-base-gray-33); + --ti-lowcode-common-text-color-2: var(--ti-lowcode-base-gray-12); + --ti-lowcode-common-text-color-3: var(--ti-lowcode-base-gray-1); + --ti-lowcode-common-text-color-4: var(--ti-lowcode-base-mint-14); + --ti-lowcode-common-text-color-5: var(--ti-lowcode-base-gray-44); + --ti-lowcode-common-text-color-6: var(--ti-lowcode-base-gray-30); + --ti-lowcode-common-text-color-7: var(--ti-lowcode-base-gray-7); + --ti-lowcode-common-text-color-8: var(--ti-lowcode-base-text-color); + --ti-lowcode-common-third-text-color: var(--ti-lowcode-base-gray-20); + --ti-lowcode-common-text-main-color: var(--ti-lowcode-base-gray-31); + --ti-lowcode-common-text-desc-color: var(--ti-lowcode-base-gray-43); + --ti-lowcode-common-text-placeholder-color: var(--ti-lowcode-base-gray-31); + + // 边框 + --ti-lowcode-common-border-color-1: var(--ti-lowcode-base-dark-9); + --ti-lowcode-common-border-color-2: var(--ti-lowcode-base-dark-19); + --ti-lowcode-common-border-color-3: var(--ti-lowcode-base-gray-35); + --ti-lowcode-common-border-color-4: var(--ti-lowcode-base-dark-10); + + // 信息 + --ti-lowcode-common-primary-color: var(--ti-lowcode-base-blue-14); + --ti-lowcode-common-primary-hover-color: var(--ti-lowcode-base-blue-15); + --ti-lowcode-common-error-color: var(--ti-lowcode-base-red-6); + --ti-lowcode-common-info-color: var(--ti-lowcode-base-blue-16); + --ti-lowcode-common-warning-color: var(--ti-lowcode-base-orange-14); + --ti-lowcode-common-empty-color: var(--ti-lowcode-base-gray-45); + --ti-lowcode-common-danger-color: var(--ti-lowcode-base-red-14); + + // 按钮 + --ti-lowcode-common-btn-default-color: var(--ti-lowcode-base-dark-5); // 默认按钮颜色 + --ti-lowcode-common-btn-default-disabled-color: var(--ti-lowcode-base-gray-18); // 默认禁用颜色 + --ti-lowcode-common-btn-default-hover-color: var(--ti-lowcode-base-gray-31); // 默认按钮 hover 颜色 + --ti-lowcode-common-btn-default-border-color: var(--ti-lowcode-base-dark-5); // 默认按钮边框色 + --ti-lowcode-common-btn-default-border-hover-color: var(--ti-lowcode-base-gray-31); // 默认按钮 hover 边框色 + + // svg按钮 + --ti-lowcode-common-svg-button-color: var(--ti-lowcode-base-gray-12); + --ti-lowcode-common-svg-button-hover-color: var(--ti-lowcode-base-blue-14); + --ti-lowcode-common-svg-button-hover-bg-color: var(--ti-base-color-transparent); + --ti-lowcode-common-svg-button-active-color: var(--ti-lowcode-base-blue-14); + --ti-lowcode-common-svg-button-active-bg-color: var(--ti-base-color-transparent); + + // 关闭按钮 + --ti-lowcode-common-close-icon-text-color: var(--ti-lowcode-base-gray-20); // 关闭按钮默认颜色 + --ti-lowcode-common-close-icon-text-hover-color: var(--ti-lowcode-base-gray-1); +} diff --git a/packages/theme/base/src/index.js b/packages/theme/base/src/index.js index aa6208bab..f1be4c07c 100644 --- a/packages/theme/base/src/index.js +++ b/packages/theme/base/src/index.js @@ -1,15 +1,16 @@ -import { tinyBaseTheme, concatThemeLight, concatThemeDark } from './base' +import { concatThemeDark } from './dark-component.js' +import { concatThemeLight } from './light-component.js' export const tinyEngineThemeLight = { id: 'tiny-engine-light-theme', name: 'EngineLightTheme', cnName: 'EngineLightTheme', - data: { ...tinyBaseTheme, ...concatThemeLight } + data: { ...concatThemeLight } } export const tinyEngineThemeDark = { id: 'tiny-engine-dark-theme', name: 'EngineDarkTheme', cnName: 'EngineDarkTheme', - data: { ...tinyBaseTheme, ...concatThemeDark } + data: { ...concatThemeDark } } diff --git a/packages/theme/base/src/light-common.js b/packages/theme/base/src/light-common.js deleted file mode 100644 index 92baa2e5f..000000000 --- a/packages/theme/base/src/light-common.js +++ /dev/null @@ -1,61 +0,0 @@ -export const tinyLightCommon = { - // - 'ti-lowcode-common-dark-1': 'var(--ti-lowcode-base-dark-1)', - 'ti-lowcode-common-gray-18': 'var(--ti-lowcode-base-gray-18)', - 'ti-lowcode-common-gray-26': 'var(--ti-lowcode-base-gray-26)', - - // 背景色 - 'ti-lowcode-common-component-bg': 'var(--ti-lowcode-base-gray-1)', - 'ti-lowcode-common-component-hover-bg': 'var(--ti-lowcode-base-gray-5)', - 'ti-lowcode-common-layout-bg': 'var(--ti-lowcode-base-gray-1)', - 'ti-lowcode-common-header-bg': 'var(--ti-lowcode-base-gray-8)', - 'ti-lowcode-common-bg-0': 'var(--ti-base-color-transparent)', - 'ti-lowcode-common-text-hover': 'var(--ti-lowcode-base-blue-17)', - - // 文本 - 'ti-lowcode-common-primary-text-color': 'var(--ti-lowcode-base-dark-5)', - 'ti-lowcode-common-secondary-text-color': 'var(--ti-lowcode-base-gray-18)', - 'ti-lowcode-common-third-text-color': 'var(--ti-lowcode-base-gray-20)', - 'ti-lowcode-common-text-title-color': 'var(--ti-lowcode-base-dark-5)', - 'ti-lowcode-common-text-main-color': 'var(--ti-lowcode-base-gray-31)', - 'ti-lowcode-common-text-desc-color': 'var(--ti-lowcode-base-gray-43)', - 'ti-lowcode-common-text-placeholder-color': 'var(--ti-lowcode-base-gray-31)', - 'ti-lowcode-common-text-color-1': 'var(--ti-lowcode-base-gray-33)', - 'ti-lowcode-common-text-color-2': 'var(--ti-lowcode-base-gray-12)', - 'ti-lowcode-common-text-color-3': 'var(--ti-lowcode-base-gray-1)', - 'ti-lowcode-common-text-color-4': 'var(--ti-lowcode-base-mint-14)', - 'ti-lowcode-common-text-color-5': 'var(--ti-lowcode-base-gray-43)', - 'ti-lowcode-common-text-color-6': 'var(--ti-lowcode-base-gray-31)', - // 边框 - 'ti-lowcode-common-border-color-1': 'var(--ti-lowcode-base-gray-9)', - 'ti-lowcode-common-border-color-3': 'var(--ti-lowcode-base-gray-35)', - 'ti-lowcode-common-border-color-4': 'var(--ti-lowcode-base-gray-9)', - - 'ti-lowcode-common-hover-bg-1': 'var(--ti-lowcode-base-gray-5)', - // 提示 - 'ti-lowcode-common-primary-color': 'var(--ti-lowcode-base-blue-6)', - 'ti-lowcode-common-primary-hover-color': 'var(--ti-lowcode-base-blue-6)', - 'ti-lowcode-common-info-color': 'var(--ti-lowcode-base-blue-6)', - 'ti-lowcode-common-warning-color': 'var(--ti-lowcode-base-orange-6)', - 'ti-lowcode-common-warning-color-1': 'var(--ti-lowcode-base-lemon-6)', - 'ti-lowcode-common-error-color': 'var(ti-lowcode-base-red-6)', - - // 按钮 - 'ti-lowcode-common-btn-default-color': 'var(--ti-lowcode-base-dark-5)', // 默认按钮颜色 - 'ti-lowcode-common-btn-default-disabled-color': 'var(--ti-lowcode-base-gray-18)', // 默认禁用颜色 - 'ti-lowcode-common-btn-default-hover-color': 'var(--ti-lowcode-base-gray-31)', // 默认按钮 hover 颜色 - 'ti-lowcode-common-btn-default-border-color': 'var(--ti-lowcode-base-dark-5)', // 默认按钮边框色 - 'ti-lowcode-common-btn-default-border-hover-color': 'var(--ti-lowcode-base-gray-31)', // 默认按钮 hover 边框色 - 'ti-lowcode-common-search-bg': 'var(--ti-lowcode-base-gray-1)', // tinysearch 背景色 - - // 关闭按钮 - 'ti-lowcode-common-close-icon-text-color': 'var(--ti-lowcode-base-dark-5)', // 关闭按钮默认颜色 - 'ti-lowcode-common-close-icon-text-hover-color': 'var(--ti-lowcode-base-dark-5)', - - // svg按钮 - 'ti-lowcode-common-svg-button-color': 'var(--ti-lowcode-base-dark-5)', - 'ti-lowcode-common-svg-button-hover-color': 'var(--ti-lowcode-base-dark-5)', - 'ti-lowcode-common-svg-button-hover-bg-color': 'rgba(0, 0, 0, 0.05)', - 'ti-lowcode-common-svg-button-active-color': 'var(--ti-lowcode-base-dark-5)', - 'ti-lowcode-common-svg-button-active-bg-color': 'rgba(0, 0, 0, 0.05)' -} diff --git a/packages/theme/base/src/light-component.js b/packages/theme/base/src/light-component.js index 0558ae027..943e41761 100644 --- a/packages/theme/base/src/light-component.js +++ b/packages/theme/base/src/light-component.js @@ -1,4 +1,5 @@ -import './light-common.js' +import './base.less' +import './light.less' export const concatThemeLight = { // 弹窗 diff --git a/packages/theme/base/src/light.less b/packages/theme/base/src/light.less new file mode 100644 index 000000000..40f7ab599 --- /dev/null +++ b/packages/theme/base/src/light.less @@ -0,0 +1,62 @@ +// 亮色主题 +:root { + // + --ti-lowcode-common-dark-1: var(--ti-lowcode-base-dark-1); + --ti-lowcode-common-gray-18: var(--ti-lowcode-base-gray-18); + --ti-lowcode-common-gray-26: var(--ti-lowcode-base-gray-26); + + // 背景色 + --ti-lowcode-common-component-bg: var(--ti-lowcode-base-gray-1); + --ti-lowcode-common-component-hover-bg: var(--ti-lowcode-base-gray-5); + --ti-lowcode-common-layout-bg: var(--ti-lowcode-base-gray-1); + --ti-lowcode-common-header-bg: var(--ti-lowcode-base-gray-8); + --ti-lowcode-common-bg-0: var(--ti-base-color-transparent); + --ti-lowcode-common-text-hover: var(--ti-lowcode-base-blue-17); + + // 文本 + --ti-lowcode-common-primary-text-color: var(--ti-lowcode-base-dark-5); + --ti-lowcode-common-secondary-text-color: var(--ti-lowcode-base-gray-18); + --ti-lowcode-common-third-text-color: var(--ti-lowcode-base-gray-20); + --ti-lowcode-common-text-title-color: var(--ti-lowcode-base-dark-5); + --ti-lowcode-common-text-main-color: var(--ti-lowcode-base-gray-31); + --ti-lowcode-common-text-desc-color: var(--ti-lowcode-base-gray-43); + --ti-lowcode-common-text-placeholder-color: var(--ti-lowcode-base-gray-31); + --ti-lowcode-common-text-color-1: var(--ti-lowcode-base-gray-33); + --ti-lowcode-common-text-color-2: var(--ti-lowcode-base-gray-12); + --ti-lowcode-common-text-color-3: var(--ti-lowcode-base-gray-1); + --ti-lowcode-common-text-color-4: var(--ti-lowcode-base-mint-14); + --ti-lowcode-common-text-color-5: var(--ti-lowcode-base-gray-43); + --ti-lowcode-common-text-color-6: var(--ti-lowcode-base-gray-31); + // 边框 + --ti-lowcode-common-border-color-1: var(--ti-lowcode-base-gray-9); + --ti-lowcode-common-border-color-3: var(--ti-lowcode-base-gray-35); + --ti-lowcode-common-border-color-4: var(--ti-lowcode-base-gray-9); + + --ti-lowcode-common-hover-bg-1: var(--ti-lowcode-base-gray-5); + // 提示 + --ti-lowcode-common-primary-color: var(--ti-lowcode-base-blue-6); + --ti-lowcode-common-primary-hover-color: var(--ti-lowcode-base-blue-6); + --ti-lowcode-common-info-color: var(--ti-lowcode-base-blue-6); + --ti-lowcode-common-warning-color: var(--ti-lowcode-base-orange-6); + --ti-lowcode-common-warning-color-1: var(--ti-lowcode-base-lemon-6); + --ti-lowcode-common-error-color: var(ti-lowcode-base-red-6); + + // 按钮 + --ti-lowcode-common-btn-default-color: var(--ti-lowcode-base-dark-5); // 默认按钮颜色 + --ti-lowcode-common-btn-default-disabled-color: var(--ti-lowcode-base-gray-18); // 默认禁用颜色 + --ti-lowcode-common-btn-default-hover-color: var(--ti-lowcode-base-gray-31); // 默认按钮 hover 颜色 + --ti-lowcode-common-btn-default-border-color: var(--ti-lowcode-base-dark-5); // 默认按钮边框色 + --ti-lowcode-common-btn-default-border-hover-color: var(--ti-lowcode-base-gray-31); // 默认按钮 hover 边框色 + --ti-lowcode-common-search-bg: var(--ti-lowcode-base-gray-1); // tinysearch 背景色 + + // 关闭按钮 + --ti-lowcode-common-close-icon-text-color: var(--ti-lowcode-base-dark-5); // 关闭按钮默认颜色 + --ti-lowcode-common-close-icon-text-hover-color: var(--ti-lowcode-base-dark-5); + + // svg按钮 + --ti-lowcode-common-svg-button-color: var(--ti-lowcode-base-dark-5); + --ti-lowcode-common-svg-button-hover-color: var(--ti-lowcode-base-dark-5); + --ti-lowcode-common-svg-button-hover-bg-color: var(--ti-lowcode-base-bg-1); + --ti-lowcode-common-svg-button-active-color: var(--ti-lowcode-base-dark-5); + --ti-lowcode-common-svg-button-active-bg-color: var(--ti-lowcode-base-bg-1); +} diff --git a/packages/theme/dark/variable.less b/packages/theme/dark/variable.less index 3d115f304..e5256c6dc 100644 --- a/packages/theme/dark/variable.less +++ b/packages/theme/dark/variable.less @@ -3,65 +3,7 @@ // 基础配置，前缀为 --base --base-min-width: 1280px; - // ------ 主要的公共主题色，前缀为 --ti-lowcode-common ------- - --ti-lowcode-common-primary-color: #4f77ff; - --ti-lowcode-common-primary-hover-color: #3961eb; - --ti-lowcode-common-primary-color-1: #cad6ff; - --ti-lowcode-common-component-bg: #2f2f2f; - --ti-lowcode-common-component-hover-bg: #3c3c3c; - --ti-lowcode-common-layout-bg: #191818; - --ti-lowcode-common-layout-hover-bg: #191919; - --ti-lowcode-common-header-bg: #202020; - --ti-lowcode-common-bg-1: #404040; - --ti-lowcode-common-bg-2: #4d4d4d; - --ti-lowcode-common-bg-3: #2b2b2b; - --ti-lowcode-common-bg-4: #262626; - --ti-lowcode-common-bg-5: #eee; - --ti-lowcode-common-bg-6: #414141; - --ti-lowcode-common-bg-7: #8a8e99; - --ti-lowcode-common-bg-8: #222; - --ti-lowcode-common-bg-9: #292929; - --ti-lowcode-common-hover-bg-1: rgba(255, 255, 255, 0.1); - --ti-lowcode-common-transparent-color: transparent; - --ti-lowcode-common-primary-text-color: #fff; - --ti-lowcode-common-secondary-text-color: #adb0b8; - --ti-lowcode-common-text-title-color: #252b3a; - --ti-lowcode-common-text-color-1: #6a6a6a; - --ti-lowcode-common-text-color-2: #d9d9d9; - --ti-lowcode-common-text-color-3: #fff; - --ti-lowcode-common-text-color-4: #50d4ab; - --ti-lowcode-common-text-color-5: #8a8e99; - --ti-lowcode-common-text-color-6: #575d6c; - --ti-lowcode-common-third-text-color: #ababab; - --ti-lowcode-common-danger-color: #c7000b; - --ti-lowcode-common-border-color-1: #212121; - --ti-lowcode-common-border-color-2: #313131; - --ti-lowcode-common-border-color-3: #606165; - --ti-lowcode-common-border-color-4: #232323; - --ti-lowcode-common-error-color: var(--ti-lowcode-base-error-color); - - --ti-lowcode-common-info-color: #7693f5; - --ti-lowcode-common-warning-color: #fa9841; - --ti-lowcode-common-warning-color-1: #fac20a; - --ti-lowcode-common-empty-color: #9a9a9a; - - // tinysearch 背景色 - --ti-lowcode-common-search-bg: var(--ti-lowcode-input-bg); - // tinysearch 边框色 - --ti-lowcode-component-input-border-color: transparent; - // svgButton - --ti-lowcode-common-svg-button-color: var(--ti-lowcode-common-text-color-2); - --ti-lowcode-common-svg-button-hover-color: var(--ti-lowcode-common-primary-color); - --ti-lowcode-common-svg-button-hover-bg-color: transparent; - --ti-lowcode-common-svg-button-active-color: var(--ti-lowcode-common-primary-color); - --ti-lowcode-common-svg-button-hover-bg-color: transparent; - // 关闭按钮 - --ti-lowcode-common-close-icon-text-color: var(--ti-lowcode-common-third-text-color); // 关闭按钮默认颜色 - // 关闭按钮 hover 颜色 - --ti-lowcode-common-close-icon-text-hover-color: var(--ti-lowcode-common-primary-text-color); - // tiny vue 的 css 变量，覆盖掉就好 - .tiny-form-item { // 错误背景色 --ti-form-item-error-bg-color: #433535; diff --git a/packages/theme/light/variable.less b/packages/theme/light/variable.less index a3b60e08a..d505f8855 100644 --- a/packages/theme/light/variable.less +++ b/packages/theme/light/variable.less @@ -3,55 +3,6 @@ // 基础配置，前缀为 --base --base-min-width: 1280px; - // ------ 主要的公共主题色，前缀为 --ti-lowcode-common ------- - --ti-lowcode-common-primary-color: var(--ti-lowcode-base-primary-color-2); - --ti-lowcode-common-primary-hover-color: var(--ti-lowcode-base-primary-color-2); // hover时，颜色不变 - --ti-lowcode-common-component-bg: #fff; - --ti-lowcode-common-component-hover-bg: #f5f5f5; - --ti-lowcode-common-layout-bg: #fff; - --ti-lowcode-common-header-bg: #eee; - --ti-lowcode-common-primary-text-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-common-secondary-text-color: #c2c2c2; - --ti-lowcode-common-text-title-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-common-text-main-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-common-text-desc-color: var(--ti-lowcode-base-text-color-3); - --ti-lowcode-common-text-placeholder-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-common-text-color-1: #6a6a6a; - --ti-lowcode-common-text-color-2: #d9d9d9; - --ti-lowcode-common-text-color-3: #fff; - --ti-lowcode-common-text-color-4: #50d4ab; - --ti-lowcode-common-text-color-5: var(--ti-lowcode-base-text-color-3); - --ti-lowcode-common-text-color-6: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-common-border-color-1: #dfe1e6; - --ti-lowcode-common-border-color-3: #606165; - --ti-lowcode-common-border-color-4: #dfe1e6; - --ti-lowcode-common-hover-bg-1: #f5f5f5; - --ti-lowcode-common-third-text-color: #ababab; - --ti-lowcode-common-error-color: var(--ti-lowcode-base-error-color); - - --ti-lowcode-common-info-color: var(--ti-lowcode-base-prompt-color); - --ti-lowcode-common-warning-color: var(--ti-lowcode-base-warn-color); - --ti-lowcode-common-warning-color-1: var(--ti-lowcode-base-warn-color-1); - --ti-lowcode-common-gray-26: var(--ti-lowcode-base-gray-26); - - // ------ 公共组件的主题色，前缀为 --ti-lowcode-component-组件名 ------- - --ti-lowcode-common-btn-default-color: var(--ti-lowcode-base-primary-color-1); // 默认按钮颜色 - --ti-lowcode-common-btn-default-disabled-color: var(--ti-lowcode-common-secondary-text-color); // 默认禁用颜色 - --ti-lowcode-common-btn-default-hover-color: var(--ti-lowcode-common-text-main-color); // 默认按钮 hover 颜色 - --ti-lowcode-common-btn-default-border-color: var(--ti-lowcode-base-primary-color-1); // 默认按钮边框色 - --ti-lowcode-common-btn-default-border-hover-color: var(--ti-lowcode-common-text-main-color); // 默认按钮 hover 边框色 - --ti-lowcode-common-search-bg: #fff; // tinysearch 背景色 - // svgButton - --ti-lowcode-common-svg-button-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-common-svg-button-hover-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-common-svg-button-hover-bg-color: rgba(0, 0, 0, 0.05); - --ti-lowcode-common-svg-button-active-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-common-svg-button-active-bg-color: rgba(0, 0, 0, 0.05); - - // 关闭按钮 - --ti-lowcode-common-close-icon-text-color: var(--ti-lowcode-base-text-color); // 关闭按钮默认颜色 - --ti-lowcode-common-close-icon-text-hover-color: var(--ti-lowcode-common-primary-text-color); // 关闭按钮 hover 颜色 - // 插件面板 --ti-lowcode-plugin-panel-title-color: var(--ti-lowcode-common-text-title-color); // 插件面板标题色 --ti-lowcode-plugin-panel-title-font-weight: 700; // 插件面板标题加粗效果 From 15846a62a4fcfefa6125695e66dbbcdbda27bff7 Mon Sep 17 00:00:00 2001 From: James-9696 Date: Sun, 14 Jul 2024 18:47:05 -0700 Subject: [PATCH 04/14] update theme-base file --- packages/design-core/src/init.js | 6 +- packages/theme/base/src/component-common.less | 1959 +++++++++++++++++ packages/theme/base/src/dark-component.js | 23 - .../src/{dark.less => dark/dark-common.less} | 0 .../theme/base/src/dark/dark-component.js | 3 + packages/theme/base/src/dark/index.js | 1 + packages/theme/base/src/index.js | 30 +- packages/theme/base/src/light-component.js | 23 - packages/theme/base/src/light/index.js | 1 + .../{light.less => light/light-common.less} | 0 .../theme/base/src/light/light-component.js | 3 + 11 files changed, 1986 insertions(+), 63 deletions(-) create mode 100644 packages/theme/base/src/component-common.less delete mode 100644 packages/theme/base/src/dark-component.js rename packages/theme/base/src/{dark.less => dark/dark-common.less} (100%) create mode 100644 packages/theme/base/src/dark/dark-component.js create mode 100644 packages/theme/base/src/dark/index.js delete mode 100644 packages/theme/base/src/light-component.js create mode 100644 packages/theme/base/src/light/index.js rename packages/theme/base/src/{light.less => light/light-common.less} (100%) create mode 100644 packages/theme/base/src/light/light-component.js diff --git a/packages/design-core/src/init.js b/packages/design-core/src/init.js index 065ffa3c2..0a956dff1 100644 --- a/packages/design-core/src/init.js +++ b/packages/design-core/src/init.js @@ -16,8 +16,8 @@ import i18n from '@opentiny/tiny-engine-common/js/i18n' import { initMonitor } from '@opentiny/tiny-engine-common/js/monitor' import { injectGlobalComponents, setGlobalMonacoEditorTheme, Modal, Notify } from '@opentiny/tiny-engine-common' import { initHttp } from '@opentiny/tiny-engine-http' -import TinyThemeTool from '@opentiny/vue-theme/theme-tool' -import { tinyEngineThemeLight } from '@opentiny/tiny-engine-theme-base' +// import TinyThemeTool from '@opentiny/vue-theme/theme-tool' +import '@opentiny/tiny-engine-theme-base' import { defineEntry, mergeRegistry, @@ -52,7 +52,7 @@ const defaultLifeCycles = { initHttp({ env: import.meta.env }) // eslint-disable-next-line no-new - new TinyThemeTool(tinyEngineThemeLight, 'tinyEngineTheme') // 初始化主题 + // new TinyThemeTool(tinyEngineThemeLight, 'tinyEngineTheme') // 初始化主题 if (import.meta.env.VITE_ERROR_MONITOR === 'true' && import.meta.env.VITE_ERROR_MONITOR_URL) { initMonitor(import.meta.env.VITE_ERROR_MONITOR_URL) diff --git a/packages/theme/base/src/component-common.less b/packages/theme/base/src/component-common.less new file mode 100644 index 000000000..50d9ffa71 --- /dev/null +++ b/packages/theme/base/src/component-common.less @@ -0,0 +1,1959 @@ +// 用于定义TinyVue组件的公共样式 +:root { + --ti-lowcode-property-active-color: #4f77ff; // 属性被激活的颜色 + --ti-lowcode-property-hover-color: #4f77ff; // 属性被hover的颜色 + --ti-lowcode-block-video-tip-color: rgb(80, 212, 171); // 区块播放视频提示颜色 +} + +// tiny-vue popover 弹框样式 +.tiny-popover.tiny-popper { + color: var(--ti-lowcode-popover-color); + background: var(--ti-lowcode-popover-bg-color); + border: none; + padding: 6px; + border-radius: 6px; + line-height: 16px; + box-shadow: rgb(0 0 0 / 15%) 0 5px 10px; + + &[x-placement^='bottom'] { + .popper__arrow { + top: -6px; + + &, + &::after { + border-bottom-color: var(--ti-lowcode-popover-bg-color); + } + } + } + + &[x-placement^='right'] { + margin-left: 16px; + + .popper__arrow { + left: -7px; + border-color: transparent; + + &::after { + border-right-color: var(--ti-lowcode-popover-bg-color); + } + } + } + + &[x-placement^='top'] { + .popper__arrow { + &, + &::after { + border-top-color: var(--ti-lowcode-popover-bg-color); + } + } + } + + &[x-placement^='left'] { + .popper__arrow { + right: -7px; + + &, + &::after { + border-left-color: var(--ti-lowcode-popover-bg-color); + } + } + } + + &.data-source-popper { + background: var(--ti-lowcode-tabs-bg); + color: var(--ti-lowcode-toolbar-breadcrumb-color); + border: 1px solid var(--ti-lowcode-tabs-border-color); + padding: 6px 0; + border-radius: 4px; + + &[x-placement^='bottom'] { + .popper__arrow { + &, + &::after { + border-bottom-color: var(--ti-lowcode-tabs-bg); + } + } + } + + &[x-placement^='right'] { + margin-left: 16px; + + .popper__arrow { + left: -7px; + border-color: transparent; + + &::after { + border-right-color: var(--ti-lowcode-tabs-bg); + } + } + } + + &[x-placement^='top'] { + .popper__arrow { + bottom: -7px; + + &, + &::after { + border-top-color: var(--ti-lowcode-tabs-bg); + } + } + } + + &[x-placement^='left'] { + .popper__arrow { + right: -7px; + + &, + &::after { + border-left-color: var(--ti-lowcode-tabs-bg); + } + } + } + + &.data-remote-popper { + background: var(--ti-lowcode-toolbar-view-hover-bg); + border-color: var(--ti-lowcode-toolbar-border-color); + + &[x-placement^='bottom'] { + .popper__arrow { + &, + &::after { + border-bottom-color: var(--ti-lowcode-toolbar-view-hover-bg); + } + } + } + + &[x-placement^='right'] { + margin-left: 16px; + + .popper__arrow { + left: -7px; + border-color: transparent; + + &::after { + border-right-color: var(--ti-lowcode-toolbar-view-hover-bg); + } + } + } + + &[x-placement^='top'] { + .popper__arrow { + bottom: -7px; + + &, + &::after { + border-top-color: var(--ti-lowcode-toolbar-view-hover-bg); + } + } + } + + &[x-placement^='left'] { + .popper__arrow { + right: -7px; + + &, + &::after { + border-left-color: var(--ti-lowcode-toolbar-view-hover-bg); + } + } + } + + li { + padding: 4px 10px; + font-size: 12px; + + &:hover { + background: var(--ti-lowcode-canvas-wrap-bg); + cursor: pointer; + } + } + } + + li { + cursor: pointer; + color: var(--ti-lowcode-toolbar-breadcrumb-color); + padding: 4px 8px; + transition: 0.3s; + + &:hover { + color: var(--ti-lowcode-tootip-input-color); + background: var(--ti-lowcode-toolbar-active-bg); + } + } + } + + &.lowcode { + background: var(--ti-lowcode-custom-popover-bg-color); + border: 1px solid var(--ti-lowcode-custom-popover-border-color); + color: var(--ti-lowcode-custom-popover-text-color); + + .popper__arrow, + .popper__arrow::after { + border-bottom-color: var(--ti-lowcode-custom-popover-bg-color); + } + + .languageContent { + width: 100%; + } + } + + &.option-popper { + background: var(--ti-lowcode-popover-bg-color); + border: 1px solid var(--ti-lowcode-popover-option-popper-border-color); + color: var(--ti-lowcode-toolbar-breadcrumb-color); + + &[x-placement^='bottom'] { + .popper__arrow { + &, + &::after { + border-bottom-color: var(--ti-lowcode-popover-bg-color); + } + } + } + + &[x-placement^='right'] { + margin-left: 16px; + + .popper__arrow { + left: -7px; + border-color: transparent; + + &::after { + border-right-color: var(--ti-lowcode-popover-bg-color); + } + } + } + + &[x-placement^='top'] { + .popper__arrow { + &, + &::after { + border-top-color: var(--ti-lowcode-popover-bg-color); + } + } + } + + &[x-placement^='left'] { + .popper__arrow { + right: -7px; + + &, + &::after { + border-left-color: var(--ti-lowcode-popover-bg-color); + } + } + } + + .add-options { + &.top { + border-bottom: 1px solid var(--ti-lowcode-tabs-border-color); + margin-bottom: 15px; + overflow: hidden; + display: flex; + height: 26px; + justify-content: space-between; + align-items: center; + padding: 6px; + + .title { + font-weight: 600; + } + + .icon-close { + margin-bottom: 4px; + margin-right: 0px; + } + } + + .demo-form { + padding: 6px; + + .tiny-form-item { + margin-bottom: 4px; + + :deep(.tiny-form-item__label) { + color: var(--ti-lowcode-toolbar-breadcrumb-color); + } + + :deep(.tiny-input__inner) { + color: var(--ti-lowcode-tootip-input-color); + background: var(--ti-lowcode-tootip-input-background-color); + border-color: var(--ti-lowcode-tootip-input-border-color); + + &:focus { + border-color: var(--ti-lowcode-canvas-handle-hover-bg); + } + } + } + + :deep(.btn) { + .tiny-form-item__content { + display: flex; + + .tiny-button { + min-width: auto; + flex: 1; + } + } + } + } + + .tiny-svg { + color: var(--ti-lowcode-toolbar-breadcrumb-color); + font-size: 14px; + + &.icon-close { + margin: 10px; + } + + &:hover { + cursor: pointer; + } + + &.header-icon { + margin-right: 0; + } + + &.isBind { + color: var(--ti-lowcode-icon-bind-color); + } + } + } + } + + &.option-popper { + padding: 2px 0; + min-width: 6%; + width: auto; + + .list { + li { + text-align: center; + + &:hover { + background: var(--ti-lowcode-canvas-wrap-bg); + } + } + } + + &.collaborator { + padding: 0; + } + + &.fixed-left { + top: 24px !important; + transform: translateX(calc(4px - var(--base-right-panel-width))); + height: calc(100% - 36px); + } + } + + &.media-icon-popover { + color: var(--ti-lowcode-media-popover-color); + font-size: 12px; + font-weight: 400; + padding: 20px; + + &[x-placement^='bottom'] { + margin-top: 16px; + } + + .tiny-popover__title { + color: var(--ti-lowcode-media-popover-title-color); + font-size: 14px; + line-height: 18px; + font-weight: 600; + margin-bottom: 0; + } + + .media-title { + color: var(--ti-lowcode-media-popover-title-color); + display: flex; + align-items: center; + font-size: 14px; + .sub-title { + color: var(--ti-lowcode-media-popover-color); + } + .icon-stars { + font-size: 16px; + margin-right: 4px; + } + } + + .content { + margin-top: 6px; + } + } + + &.toolbar-right-popover { + color: var(--ti-lowcode-toolbar-hover-popper); + font-size: 14px; + padding: 10px 16px; + border-radius: 6px; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, + 'Helvetica Neue', Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif; + &[x-placement^='bottom'] { + margin-top: 8px; + } + + &.collaboration-popover[x-placement^='bottom'] { + margin-top: 14px; + } + &.collaborator { + padding: 10px 0; + } + } + + &.block-add-transfer-popover { + background: var(--ti-lowcode-toolbar-bg); + border: 1px solid var(--ti-lowcode-tabs-border-color); + color: var(--ti-lowcode-toolbar-breadcrumb-color); + padding: 0; + + .popper__arrow { + display: none; + } + + &[x-placement^='top'] { + margin-bottom: 0; + } + + .sort-item { + padding: 6px 10px 6px 24px; + transition: 0.3s; + position: relative; + + &:hover { + background: var(--ti-lowcode-button-hover-bg); + } + } + } + + &.data-remote-popper { + width: 12%; + } + + &.toolbar-media-popper { + padding: 0; + font-size: 12px; + border-color: var(--ti-lowcode-tabs-border-color); + + &[x-placement^='bottom'] { + margin-top: 6px; + } + + &[x-placement^='right'] { + .popper__arrow { + border-color: transparent; + + &::after { + border-right-color: var(--ti-lowcode-toolbar-media-bg); + } + } + } + + &[x-placement^='top'] { + .popper__arrow { + &, + &::after { + border-top-color: var(--ti-lowcode-toolbar-media-bg); + } + } + } + + &[x-placement^='left'] { + .popper__arrow { + &, + &::after { + border-left-color: var(--ti-lowcode-toolbar-media-bg); + } + } + } + + .content-wrap { + padding: 20px; + .title { + width: 100%; + color: var(--ti-lowcode-media-popover-title-color); + background: var(--ti-lowcode-tabs-active-bg); + display: inline-block; + box-sizing: border-box; + font-size: 14px; + &.text-title { + background: transparent; + } + } + + .list { + border-bottom: 1px solid var(--ti-lowcode-tabs-border-color); + + li { + padding: 4px 8px; + transition: 0.3s; + color: var(--ti-lowcode-toolbar-breadcrumb-color); + + .tiny-svg { + margin-right: 6px; + color: var(--ti-lowcode-toolbar-breadcrumb-color); + } + + &:hover { + background: var(--ti-lowcode-canvas-wrap-bg); + } + } + } + + .more-setting { + li { + display: flex; + align-items: center; + gap: 8px; + color: var(--ti-lowcode-toolbar-sub-title-color); + padding-top: 12px; + } + } + + .tips { + padding: 8px; + + span { + display: inline-block; + padding: 4px 8px; + color: var(--ti-lowcode-dialog-font-color); + background: var(--ti-lowcode-canvas-wrap-bg); + border-left: 2px solid var(--ti-lowcode-dialog-tip-border-color); + } + } + + .setting { + display: flex; + align-items: center; + color: var(--ti-lowcode-toolbar-sub-title-color); + padding-top: 12px; + & > div { + display: flex; + align-items: center; + + & + div { + margin-left: 12px; + } + + label { + flex-shrink: 0; + margin-right: 8px; + } + } + + & > span { + width: 24px; + height: 24px; + display: flex; + justify-content: center; + align-items: center; + flex-shrink: 0; + margin-left: 12px; + border-radius: 2px; + transition: 0.3s; + + &:hover { + background: var(--ti-lowcode-icon-hover-bg); + cursor: pointer; + } + + .icon-canvas-fit { + font-size: 16px; + color: var(--ti-lowcode-description-minor-color); + } + } + + .tiny-input__suffix { + right: 4px; + + .tiny-input__suffix-inner { + font-size: 12px; + color: var(--ti-lowcode-description-minor-color); + } + } + + .tiny-input-suffix .tiny-input__inner { + padding-right: 20px; + padding-left: 4px; + + &[readonly] { + cursor: not-allowed; + + &:focus { + border-color: var(--ti-lowcode-tabs-border-color); + } + } + } + } + } + } + + &.tiny-pager__selector { + background-color: var(--ti-lowcode-common-hover-bg-1); + + .tiny-pager__selector-poplist { + background: var(--ti-lowcode-toolbar-view-hover-bg); + border: 1px solid var(--ti-lowcode-toolbar-border-color); + color: var(--ti-lowcode-toolbar-breadcrumb-color); + + .list-item { + &.select-pre.is-selected { + background: var(--ti-lowcode-canvas-wrap-bg); + } + + &:hover { + color: var(--ti-lowcode-dialog-font-color); + background-color: var(--ti-lowcode-canvas-wrap-bg); + } + } + } + } + + &.fit-popper { + .fit-content { + display: grid; + gap: 8px 4px; + grid-template-columns: 48px 1fr; + padding: 8px; + align-items: center; + } + + .fit-content-label { + color: var(--ti-lowcode-fit-label-color); + padding: 2px; + } + + .fit-content-main { + place-items: start center; + height: 64px; + display: grid; + gap: 4px 8px; + grid-template-columns: auto auto; + grid-template-rows: 1fr 3fr; + } + + .coordinate { + grid-column-start: 1; + grid-row: 1 / span 3; + width: 64px; + height: 64px; + background: var(--ti-lowcode-fit-coordinate-bg); + display: inline-grid; + overflow: hidden; + justify-items: center; + border-width: 1px; + box-sizing: border-box; + border-style: solid; + border-color: var(--ti-lowcode-fit-coordinate-border-color); + border-radius: 2px; + gap: 0px; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr; + } + + .coordinate-origin { + background-color: var(--ti-lowcode-fit-coordinate-bg); + transition: color 0.1s ease 0s; + color: var(--ti-lowcode-fit-coordinate-origin-color); + font-size: 19px; + + &:hover, + &.selected { + color: var(--ti-lowcode-fit-label-color); + } + } + + .input-wrap { + grid-column-end: span 1; + grid-row-start: 2; + align-items: center; + box-sizing: border-box; + display: grid; + gap: 4px 8px; + grid-template-columns: auto auto; + + .left-input { + grid-column-start: 1; + } + + .top-input { + grid-column-start: 2; + } + + .left { + color: var(--ti-lowcode-fit-label-color); + justify-self: center; + grid-column-start: 1; + } + + .top { + color: var(--ti-lowcode-fit-label-color); + justify-self: center; + grid-column-start: 2; + } + + .tiny-input__inner { + padding: 0 20px 0 4px; + } + + .tiny-input__suffix { + right: 4px; + } + } + } + + &.grid-edit-popper { + color: var(--ti-lowcode-toolbar-breadcrumb-color); + + .grid-edit-spacing { + display: grid; + gap: 8px 4px; + grid-template-columns: 44px 1fr 24px 1fr; + align-items: center; + padding: 8px; + + .gap, + .direction { + grid-column: 1 / -1; + display: grid; + gap: 4px; + grid-template-columns: 48px 1fr; + } + + .direction { + align-items: center; + + .radio-button { + width: 50%; + } + } + + .gap-label { + display: inline-block; + height: 28px; + line-height: 28px; + } + + .gap-input { + display: grid; + gap: 4px; + grid-template-columns: 1fr 24px 1fr; + + .svg-icon { + place-self: center; + grid-area: 1 / 2 / auto / auto; + font-family: inherit; + font-size: inherit; + position: relative; + display: flex; + align-items: center; + justify-content: center; + height: 24px; + font-size: 18px; + } + + .col { + place-self: center; + } + + .row { + place-self: center; + grid-column: 3 / -1; + } + + .suffix { + min-width: 18px; + } + } + + .dense { + grid-column: 2 / -1; + display: flex; + align-items: center; + + input[type='checkbox'] { + accent-color: var(--ti-lowcode-tootip-arrow-border-color); + } + + label { + margin-right: 4px; + } + } + } + + .grid-edit-layout { + padding: 8px; + + .top { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 4px; + padding-right: 4px; + + .tiny-svg { + font-size: 16px; + } + } + + .text { + margin-left: 4px; + } + + .item-icon { + display: none; + color: var(--ti-lowcode-input-icon-color); + + &:hover { + color: var(--ti-lowcode-toolbar-breadcrumb-color); + } + + & + .item-icon { + margin-left: 8px; + } + } + + .option-input { + &:hover .item-icon { + display: inline-block; + } + } + + .layout-item { + .tiny-svg { + margin-right: 0; + } + + & + .layout-item { + margin-top: 8px; + } + } + } + + .is-setting { + color: var(--ti-lowcode-style-setting-label-color); + background-color: var(--ti-lowcode-style-setting-label-bg); + } + } + + &.icon-popover { + background-color: var(--ti-lowcode-icon-popover-bg); + filter: drop-shadow(rgba(0, 0, 0, 0.5) 0px 0px 1px) drop-shadow(rgba(0, 0, 0, 0.5) 0px 2px 4px) + drop-shadow(rgba(0, 0, 0, 0.5) 0px 4px 12px); + + &[x-placement^='left'] { + .popper__arrow { + right: -6px; + + &, + &::after { + border-left-color: var(--ti-lowcode-icon-popover-bg); + } + } + } + } +} + +// tiny-vue dialogBox 弹框样式 +.tiny-dialog-box__wrapper { + .tiny-dialog-box { + background-color: var(--ti-lowcode-dialog-box-bg-color); + .tiny-dialog-box__header { + color: var(--ti-lowcode-dialog-header-color); + background-color: var(--ti-lowcode-dialog-box-bg-color); + .tiny-dialog-box__headerbtn { + color: var(--ti-lowcode-dialog-close-btn-color); + + &:hover { + color: var(--ti-lowcode-dialog-close-btn-hover-color); + } + } + } + + .tiny-dialog-box__body { + color: var(--ti-lowcode-dialog-box-body-color); + + .tiny-collapse { + margin: 16px 0; + } + + .tiny-collapse-item__header { + padding: 0 8px; + color: var(--ti-lowcode-toolbar-breadcrumb-color); + background-color: var(--ti-lowcode-toolbar-active-bg); + + svg { + color: var(--ti-lowcode-toolbar-breadcrumb-color); + } + } + + .tiny-collapse-item { + border: none; + margin-top: 0; + padding-top: 0; + padding-bottom: 0; + background: var(--ti-lowcode-toolbar-bg); + color: var(--ti-lowcode-toolbar-breadcrumb-color); + } + + .tiny-collapse-item__wrap { + background-color: var(--ti-lowcode-toolbar-view-hover-bg); + } + + .tiny-collapse-item__content { + color: var(--ti-lowcode-toolbar-breadcrumb-color); + border: 1px solid var(--ti-lowcode-dialog-demo-border-color); + border-top: none; + } + } + } + + .switch-tip { + color: var(--ti-lowcode-toolbar-breadcrumb-color); + + .icon { + font-size: 28px; + margin-right: 12px; + } + } + + &.update-page { + .tiny-dialog-box__body { + .tiny-input { + margin-bottom: 10px; + background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59)); + + input { + color: var(--ti-lowcode-toolbar-breadcrumb-color); + } + } + } + } +} + +// tiny-vue modal 模态框 +.tiny-modal__wrapper { + .tiny-modal__box { + .tiny-modal__status-wrapper { + display: none; + } + + .tiny-modal__close-btn { + color: var(--ti-lowcode-modal-close-btn-color); + + &:hover { + background-color: unset; + color: var(--ti-lowcode-modal-close-btn-hover-color); + } + } + + .tiny-modal__body { + .modal-content { + color: var(--ti-lowcode-modal-content-color); + } + } + + .tiny-modal__footer { + display: flex; + justify-content: center; + + .tiny-button--primary { + margin-left: 8px; + } + } + } + + &.status__custom { + .tiny-modal__footer { + .tiny-button--default { + display: none; + } + } + } +} + +// tiny-vue tooltip 提示框 +.tiny-tooltip.tiny-tooltip__popper { + &.is-dark { + color: var(--ti-lowcode-tooltip-text-color); + background: var(--ti-lowcode-tooltip-bg-color); + padding: 6px; + border-radius: 2px; + box-shadow: rgb(0 0 0 / 15%) 0px 5px 10px; + font-size: 14px; + } + + &.is-error { + background-color: var(--ti-lowcode-tooltip-error-bg-color); + + &[x-placement^='top'] { + .popper__arrow { + &, + &::after { + border-top-color: var(--ti-lowcode-tooltip-error-bg-color); + } + } + } + + &[x-placement^='bottom'] { + .popper__arrow { + &, + &::after { + border-bottom-color: var(--ti-lowcode-tooltip-error-bg-color); + } + } + } + + &[x-placement^='left'] { + .popper__arrow { + &, + &::after { + border-left-color: var(--ti-lowcode-tooltip-error-bg-color); + } + } + } + + &[x-placement^='right'] { + .popper__arrow { + &, + &::after { + border-right-color: var(--ti-lowcode-tooltip-error-bg-color); + } + } + } + } + + &.tiny-form__valid.is-error { + &[x-placement^='top'] { + .popper__arrow { + bottom: -6px; + } + } + } + + &[x-placement^='top'] { + .popper__arrow { + &, + &::after { + border-top-color: var(--ti-lowcode-tooltip-bg-color); + } + } + } + + &[x-placement^='bottom'] { + .popper__arrow { + &, + &::after { + border-bottom-color: var(--ti-lowcode-tooltip-bg-color); + } + } + } + + &[x-placement^='left'] { + .popper__arrow { + &, + &::after { + border-left-color: var(--ti-lowcode-tooltip-bg-color); + } + } + } + + &[x-placement^='right'] { + .popper__arrow { + &, + &::after { + border-right-color: var(--ti-lowcode-tooltip-bg-color); + } + } + } + + &.background-type-tooltip { + z-index: 9999999 !important; + } +} + +.tiny-popper { + &.tiny-picker-panel { + color: var(--ti-lowcode-dialog-font-color); + background: var(--ti-lowcode-toolbar-view-hover-bg); + border-color: var(--ti-lowcode-tabs-border-color); + box-shadow: rgb(0 0 0 / 15%) 0px 5px 10px; + + .tiny-date-picker__header-label { + color: var(--ti-lowcode-dialog-font-color); + } + + .tiny-date-picker__time-header { + border-color: var(--ti-lowcode-tabs-border-color); + } + + .tiny-picker-panel__icon-btn { + color: var(--ti-lowcode-description-minor-color); + + &:hover { + color: var(--ti-lowcode-toolbar-icon-color); + } + } + + .tiny-picker-panel__footer { + background-color: var(--ti-lowcode-toolbar-view-hover-bg); + border-color: var(--ti-lowcode-tabs-border-color); + + .tiny-button--text { + color: var(--ti-lowcode-dialog-font-color); + + &:hover { + color: var(--ti-lowcode-toolbar-icon-color); + } + } + + .tiny-button--primary { + color: var(--ti-lowcode-toolbar-icon-color); + border-color: var(--ti-lowcode-toolbar-border-color); + background-color: var(--ti-lowcode-button-info-bg-color); + + &:hover { + color: var(--ti-lowcode-toolbar-icon-color); + border-color: var(--ti-lowcode-toolbar-border-color); + background-color: var(--ti-lowcode-button-info-hover-bg); + } + } + } + + .tiny-date-table { + td.next-month, + td.pre-month { + color: var(--ti-lowcode-description-minor-color); + + span:hover { + color: var(--ti-lowcode-toolbar-icon-color); + background: var(--ti-lowcode-canvas-wrap-bg); + } + } + + th { + color: var(--ti-lowcode-dialog-font-color); + } + + td.current:not(.disabled) span { + background-color: var(--ti-lowcode-canvas-wrap-bg); + } + + td.available:hover span { + color: var(--ti-lowcode-toolbar-icon-color); + background-color: var(--ti-lowcode-canvas-wrap-bg); + } + } + + .tiny-time-panel { + background: var(--ti-lowcode-toolbar-view-hover-bg); + border-color: var(--ti-lowcode-tabs-border-color); + box-shadow: rgb(0 0 0 / 15%) 0px 5px 10px; + } + + .tiny-time-spinner__item { + color: var(--ti-lowcode-description-minor-color); + + &.active:not(.disabled) { + color: var(--ti-lowcode-toolbar-icon-color); + } + + &:hover:not(.disabled):not(.active) { + color: var(--ti-lowcode-toolbar-icon-color); + background: var(--ti-lowcode-canvas-wrap-bg); + } + } + + .tiny-time-panel__footer { + border-color: var(--ti-lowcode-tabs-border-color); + + .cancel { + color: var(--ti-lowcode-dialog-font-color); + } + + .confirm { + color: var(--ti-lowcode-button-info-bg); + } + } + + .tiny-time-panel__content { + &::after, + &::before { + border-color: var(--ti-lowcode-toolbar-border-color); + } + } + } +} + +.tiny-grid { + svg { + color: var(--ti-grid-primary-color); + width: 16px; + height: 16px; + } + .tiny-grid__body-wrapper { + .tiny-grid-body__column { + border-bottom: 0; + cursor: pointer; + color: var(--ti-lowcode-base-text-color); + + .tree-box { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + + .node-icon { + margin-right: 5px; + } + } + } + + .tiny-grid-body__row { + .tiny-grid-default-input { + background: var(--ti-lowcode-input-bg); + color: var(--ti-lowcode-toolbar-breadcrumb-color); + } + + &, + &:not(.row__hover):nth-child(2n) { + background: var(--ti-lowcode-tiny-grid-row-hover-bg); + color: var(--ti-lowcode-toolbar-breadcrumb-color); + + &:hover { + background: var(--ti-lowcode-toolbar-bg); + } + + &.row__current { + background: var(--ti-lowcode-node-current-bg); + + span { + color: var(--ti-lowcode-toolbar-breadcrumb-color); + } + + svg { + color: var(--ti-lowcode-toolbar-breadcrumb-color); + } + } + + &.sortable-chosen { + background: var(--ti-lowcode-node-current-bg); + + &.nodrag { + background: var(--ti-lowcode-node-nodrag-bg); + } + } + } + + &.nav-tree { + .tiny-grid-body__column { + height: 32px; + } + + .tiny-grid-cell { + display: flex; + } + } + } + + .tiny-grid-tree-wrapper { + width: 14px; + + .tiny-grid-tree__node-btn { + font-size: 8px; + color: var(--ti-lowcode-tree-icon-color); + + &:hover { + color: var(--ti-lowcode-toolbar-icon-color); + } + } + } + } + + .tiny-grid__fixed-right-wrapper, + .tiny-grid__fixed-left-wrapper { + background-color: var(--ti-lowcode-common-bg-1); + } + + .tiny-grid-checkbox { + input { + & + .tiny-grid-checkbox__icon { + border: 1px solid var(--ti-lowcode-tiny-grid-checkbox-checked-border-color); + background-color: transparent; + svg { + color: var(--ti-lowcode-tiny-grid-checkbox-svg-color); + } + } + + &:checked + .tiny-grid-checkbox__icon { + border: 1px solid var(--ti-lowcode-tiny-grid-checkbox-checked-border-color); + + svg { + color: var(--ti-lowcode-common-primary-color); + width: 100%; + height: 100%; + } + } + + &[type='checkbox']:checked + .tiny-grid-checkbox__icon { + background-color: var(--ti-lowcode-tiny-grid-checkbox-checked-bg-color); + border-color: var(--ti-lowcode-tiny-grid-checkbox-checked-border-color); + } + } + &.is__indeterminate { + .tiny-grid-checkbox__icon svg { + color: var(--ti-lowcode-common-primary-color); + } + } + } + .tiny-grid-radio { + input + .tiny-grid-radio__icon > svg.icon-radio-selected { + color: var(--ti-lowcode-tiny-radio-selected-svg-color); + } + } +} + +.stripe-tiny-grid.tiny-grid { + background-color: var(--ti-lowcode-common-component-bg); + .tiny-grid { + background-color: var(--ti-lowcode-common-component-bg); + } + + .tiny-grid__header-wrapper { + background-color: var(--ti-lowcode-tabs-bg); + + .tiny-grid-header__column { + color: var(--ti-lowcode-stripe-grid-header-text-color); + height: 39px; + } + + .tiny-grid__repair { + border-color: var(--ti-lowcode-tabs-border-color); + } + + .tiny-grid-resizable.is__line:before { + background-color: var(--ti-lowcode-toolbar-active-bg); + } + } + + .tiny-grid__body-wrapper { + .tiny-grid-body__column { + height: 44px; + } + + .tiny-grid-body__row, + .tiny-grid-body__row:not(.row__hover):nth-child(2n) { + background-color: var(--ti-lowcode-stripe-grid-list-2n-bg-color); + + &:hover { + background-color: var(--ti-lowcode-stripe-grid-list-item-hover-bg); + } + + &.row__current { + background-color: var(--ti-lowcode-toolbar-view-hover-bg); + } + } + + .tiny-grid-body__row:not(.row__hover):nth-child(2n) { + background-color: var(--ti-lowcode-stripe-grid-list-n-bg-color); + } + } + + .tiny-grid__empty-text { + color: var(--ti-lowcode-toolbar-breadcrumb-color); + } +} + +.tiny-search { + div.tiny-search__line { + &:hover { + background-color: var(--ti-lowcode-search-hover-bg); + } + &.focus { + .tiny-search__input-btn { + color: var(--ti-lowcode-search-hover-icon-color); + } + .tiny-search__prefix svg { + color: var(--ti-lowcode-search-hover-icon-color); + } + } + + .tiny-search__input-btn { + color: var(--ti-lowcode-search-icon-color); + &:hover { + color: var(--ti-lowcode-search-hover-icon-color); + } + } + .tiny-search__prefix svg { + color: var(--ti-lowcode-search-icon-color); + &:hover { + color: var(--ti-lowcode-search-hover-icon-color); + cursor: pointer; + } + } + .tiny-search__input { + color: var(--ti-lowcode-search-input-color); + &::placeholder { + color: var(--ti-lowcode-search-input-placeholder-color); + } + } + } +} + +.tiny-input { + .tiny-input__inner { + border-color: var(--ti-lowcode-input-border-color); + background-color: var(--ti-lowcode-input-bg-color); + color: var(--ti-lowcode-input-color); + + &:focus { + border-color: var(--ti-lowcode-input-focus-border-color); + } + &::placeholder { + color: var(--ti-lowcode-input-placeholder-color); + } + &:hover { + border-color: var(--ti-lowcode-input-hover-border-color); + } + } + + &.is-disabled { + .tiny-input__inner { + border-color: var(--ti-lowcode-input-disabled-border-color); + background: var(--ti-lowcode-input-disabled-bg-color); + } + } + + // 全局自定义的错误样式状态，tinyvue 那边要有错误样式必须要包一层 form、form-item + // 所以我们这里自定义了一个类，添加这个类，就可以有错误的样式，无需包一层 form、form-item + &.status-error { + .tiny-input__inner { + border-color: var(--ti-lowcode-input-error-border-color); + background-color: var(--ti-lowcode-input-error-bg-color); + } + } +} + +.tiny-textarea { + border-color: var(--ti-lowcode-textarea-border-color); + + &:hover, + &:has(.tiny-textarea__inner:focus) { + border-color: var(--ti-lowcode-textarea-hover-border-color); + } + + .tiny-textarea__inner { + background-color: var(--ti-lowcode-textarea-input-bg-color); + color: var(--ti-lowcode-textarea-input-color); + } +} + +.tiny-numeric { + .tiny-numeric__decrease, + .tiny-numeric__increase { + color: var(--ti-lowcode-tiny-numeric-icon-color); + + &:hover { + color: var(--ti-lowcode-tiny-numeric-icon-hover-color); + } + } +} + +span.tiny-switch { + background-color: var(--ti-lowcode-tiny-switch-bg-color); + + &.tiny-switch-checked { + background-color: var(--ti-lowcode-tiny-switch-checked-bg-color); + } + + &::after { + background-color: var(--ti-lowcode-tiny-switch-dot-bg); + } +} + +.tiny-select { + div.tiny-input { + &.is-focus { + .tiny-input__inner { + border-color: var(--ti-lowcode-select-focus-border-color); + } + } + } + + .tiny-select__tags { + .tiny-tag { + color: var(--ti-lowcode-select-tags-text-color); + background-color: var(--ti-lowcode-select-tags-bg-color); + + .tiny-tag__close { + color: var(--ti-lowcode-select-tags-text-color); + &:hover { + color: var(--ti-lowcode-select-suffix-icon-color-hover); + } + } + } + } + + .tiny-input { + .tiny-input__inner { + padding: 8px; + } + + .tiny-select__caret { + color: var(--ti-lowcode-select-tags-text-color); + } + + .tiny-input__suffix-inner { + &:hover { + .tiny-select__caret { + color: var(--ti-lowcode-select-suffix-icon-color-hover); + } + } + } + } +} + +.tiny-select-dropdown { + &.tiny-popper { + background-color: var(--ti-lowcode-dropdown-bg-color); + border: 1px solid var(--ti-lowcode-dropdown-border-color); + + &.select-popper { + margin-top: 3px; + + .tiny-select-dropdown__item.tiny-option { + width: 79px; + height: 24px; + line-height: 24px; + padding: 4px 8px; + display: flex; + align-items: center; + } + + .tiny-select-dropdown__list { + padding: 4px 0; + } + + .tiny-select-dropdown__wrap { + min-height: 50px; + margin-bottom: -8px !important; + margin-right: -8px !important; + } + } + + .cursor-option { + padding: 0 4px 0 12px; + + .item-icon { + font-size: 16px; + } + + .item-label { + font-size: 14px; + margin-left: 4px; + } + } + } + + .tiny-select-dropdown__item { + &.tiny-option { + color: var(--ti-lowcode-dropdown-item-text-color); + background-color: var(--ti-lowcode-dropdown-bg-color); + + &.hover, + &:hover { + background-color: var(--ti-lowcode-dropdown-item-hover-bg-color); + color: var(--ti-lowcode-dropdown-item-hover-text-color); + } + + &.selected { + color: var(--ti-lowcode-dropdown-item-selected-color); + background-color: var(--ti-lowcode-dropdown-item-selected-bg); + + & > span { + position: relative; + } + } + + &.is-disabled > a { + cursor: not-allowed; + } + } + } + + &.is-multiple { + .tiny-select-dropdown__item.tiny-option { + &:not(.is-disabled).hover, + &:not(.is-disabled):hover { + color: var(--ti-lowcode-dropdown-item-hover-text-color); + background-color: var(--ti-lowcode-dropdown-item-hover-bg-color); + + .tiny-svg { + color: var(--ti-lowcode-dropdown-item-hover-text-color); + } + } + + &.is-disabled:hover { + background-color: transparent; + } + + &.selected { + color: var(--ti-lowcode-dropdown-item-hover-text-color); + background-color: transparent; + font-weight: 600; + + .tiny-svg { + color: var(--ti-lowcode-dropdown-item-hover-text-color); + } + + & > span { + padding-left: 0; + + &::before { + content: ''; + } + } + } + + & > span { + padding-left: 0; + } + } + } + + .tiny-select-group__wrap { + &:not(:last-of-type)::after { + left: 0; + right: 0; + background: var(--ti-lowcode-toolbar-border-color); + } + + .tiny-select-group__title { + font-size: 14px; + font-weight: 500; + color: var(--ti-lowcode-dialog-font-color); + background: var(--ti-lowcode-toolbar-bg); + padding: 2px 0 2px 8px; + margin-bottom: 2px; + } + } + + .tiny-tree { + color: var(--ti-lowcode-dialog-font-color); + background: var(--ti-lowcode-toolbar-view-hover-bg); + + .tiny-tree-node__expand-icon { + &, + &.expanded { + color: var(--ti-lowcode-dialog-font-color); + } + + &:not(.is-leaf) { + margin-left: 12px; + margin-right: 6px; + } + } + + .tiny-tree-node__content { + &:hover { + background-color: var(--ti-lowcode-canvas-wrap-bg); + } + } + + .tiny-tree-node { + &.is-current, + &:focus { + & > .tiny-tree-node__content { + background-color: var(--ti-lowcode-canvas-wrap-bg); + } + } + } + } + + &.position-origin-select { + min-width: 72px !important; + z-index: 9999999 !important; + } +} + +.tiny-tree { + .tiny-tree-node__label { + font-size: 12px; + } +} + +button { + &.tiny-button { + &.tiny-button--default { + color: var(--ti-lowcode-button-default-color); + border-color: var(--ti-lowcode-button-default-border-color); + background-color: var(--ti-lowcode-button-default-bg); + + &:hover { + color: var(--ti-lowcode-button-default-hover-color); + border-color: var(--ti-lowcode-button-default-hover-border-color); + background-color: var(--ti-lowcode-button-default-hover-bg); + } + + &.is-disabled { + color: var(--ti-lowcode-button-default-disabled-color); + border-color: var(--ti-lowcode-button-default-disabled-border-color); + background-color: var(--ti-lowcode-button-default-disabled-bg); + } + } + + &.tiny-button--info { + color: var(--ti-lowcode-button-info-color); + border-color: var(--ti-lowcode-button-info-border-color); + background-color: var(--ti-lowcode-button-info-bg-color); + + &:hover { + color: var(--ti-lowcode-button-info-hover-color); + border-color: var(--ti-lowcode-button-info-hover-border-color); + background-color: var(--ti-lowcode-button-info-hover-bg-color); + } + } + &.tiny-button--primary { + color: var(--ti-lowcode-button-primary-color); + border-color: var(--ti-lowcode-button-primary-border-color); + background-color: var(--ti-lowcode-button-primary-bg-color); + + &:hover { + color: var(--ti-lowcode-button-primary-hover-color); + border-color: var(--ti-lowcode-button-primary-hover-border-color); + background-color: var(--ti-lowcode-button-primary-hover-bg-color); + } + } + } +} + +.tiny-button-group { + ul.tiny-group-item { + border: 1px solid var(--ti-lowcode-tabs-border-color); + border-radius: 2px; + + li { + background-color: var(--ti-lowcode-canvas-wrap-bg); + + &.active { + &:hover button:not(.disabled), + button:not(.disabled) { + background: var(--ti-lowcode-tabs-bg); + border-color: var(--ti-lowcode-tabs-bg); + color: var(--ti-lowcode-toolbar-icon-color); + } + } + + &:hover { + button:not(.disabled) { + color: var(--ti-lowcode-dropdown-item-hover-text-color); + background-color: var(--ti-lowcode-common-component-bg); + } + } + + &:not(:last-child) { + margin-right: 0; + } + } + + button { + background-color: var(--ti-lowcode-canvas-wrap-bg); + color: var(--ti-lowcode-toolbar-breadcrumb-color); + + &::before { + background: var(--ti-lowcode-tabs-border-color); + } + } + } +} + +.tiny-form { + .tiny-form-item__label { + padding-right: 8px; + color: var(--ti-lowcode-input-label-color); + } + + .tiny-form-item { + &.is-error { + margin-bottom: 20px; + } + } +} + +.tiny-collapse { + border-top: none; + border-bottom: none; + .tiny-collapse-item { + border: none; + // 第一项的外边距会与其他元素外边距相加形成最终外边距，因此第一项外边距不调整 + + .tiny-collapse-item { + margin-top: 4px; + } + .tiny-collapse-item__header { + padding-left: 16px; + } + .components-items { + .item { + cursor: pointer; + } + } + } + + .tiny-collapse-item__header { + color: var(--ti-lowcode-collapse-item-header-color); + background: var(--ti-lowcode-collapse-item-header-bg-color); + position: relative; + min-height: 32px; + padding-top: 5px; + padding-bottom: 5px; + + &:hover, + &.is-active { + color: var(--ti-lowcode-collapse-item-header-active-color); + } + + .tiny-collapse-item__arrow { + line-height: 14px; + } + } + + .tiny-collapse-item, + .tiny-collapse-item__wrap { + background-color: var(--ti-lowcode-collapse-item-bg-color); + } + + .tiny-collapse-item__content { + color: var(--ti-lowcode-collapse-item-content-color); + padding: 0; + border: none; + } + + .tiny-collapse-item__wrap { + overflow: inherit; + } +} + +.canvas-slot-choose { + div { + line-height: 30px; + text-align: center; + color: var(--ti-lowcode-button-info-color); + + &:hover { + background-color: var(--ti-lowcode-component-item-hover-bg); + } + } +} + +.tiny-notify { + .tiny-notify__close-zone { + color: var(--ti-lowcode-notify-close-color); + &:hover { + color: var(--ti-lowcode-notify-close-hover-color); + } + } + + &.tiny-notify--error { + .tiny-notify__icon-status { + color: var(--ti-lowcode-base-error-color); + } + } + + &.tiny-notify--info { + .tiny-notify__icon-status { + color: var(--ti-lowcode-base-prompt-color); + } + } + + &.tiny-notify--success { + .tiny-notify__icon-status { + color: var(--ti-lowcode-base-success-color); + } + } + + &.tiny-notify--warning { + .tiny-notify__icon-status { + color: var(--ti-lowcode-base-warn-color); + } + } +} + +.tiny-tabs { + // tiny-tabs button-card模式宽度默认无法铺满父容器，添加此类名修改成铺满父容器 + &.full-width-tabs { + .tiny-tabs__nav { + float: none; + display: flex; + .tiny-tabs__item { + flex: 1 1 auto; + } + } + } + &__item__title { + text-align: center; + } +} + +.tiny-dropdown { + &__trigger { + color: var(--ti-lowcode-trigger-color); + &:not(&__caret-button):hover { + color: var(--ti-lowcode-trigger-hover-color); + } + } +} + +.empty-wrap { + text-align: center; + margin-top: 20px; + + .empty-icon { + width: 64px; + height: 64px; + color: var(--ti-lowcode-empty-icon-color); + } + + .empty-text { + margin-top: 6px; + margin-bottom: 0; + font-size: 12px; + color: var(--ti-lowcode-common-text-color-5); + } +} + +.tiny-radio-group { + .tiny-radio-button { + &:first-child { + .tiny-radio-button__inner { + border-color: var(--ti-lowcode-radio-button-border-color); + } + } + .tiny-radio-button__orig-radio:checked { + & + .tiny-radio-button__inner { + background-color: var(--ti-lowcode-tiny-radio-button-checked-bg); + border-color: var(--ti-lowcode-radio-button-border-color); + &:hover { + box-shadow: none; + } + } + } + &__inner { + background-color: var(--ti-lowcode-tiny-radio-button-bg); + color: var(--ti-lowcode-radio-button-color); + border-color: var(--ti-lowcode-radio-button-border-color); + } + } +} + +.tiny-loading { + .tiny-loading__spinner { + margin-top: 0; + transform: translateY(-50%); + } +} + +.global-desc-info { + color: var(--ti-lowcode-common-text-desc-color); +} diff --git a/packages/theme/base/src/dark-component.js b/packages/theme/base/src/dark-component.js deleted file mode 100644 index 7f4d597e2..000000000 --- a/packages/theme/base/src/dark-component.js +++ /dev/null @@ -1,23 +0,0 @@ -import './base.less' -import './dark.less' - -export const concatThemeDark = { - // 弹窗 - 'ti-dialog-box-bg-color': 'var(--ti-lowcode-common-component-bg)', - 'ti-dialog-box-head-title-text-color': 'var(--ti-lowcode-common-text-color-7)', - 'ti-dialog-box-close-icon-color-hover': 'var(--ti-lowcode-common-icon-hover-1)', - 'ti-dialog-box-close-icon-color': 'var(--ti-lowcode-common-text-color-3)', - 'ti-dialog-box-body-text-color': 'var(--ti-lowcode-common-text-color-8)', - // 手风琴 - 'ti-collapse-item-text-color': 'var(--ti-lowcode-common-text-color-7)', - 'ti-collapse-item-header-bg-color': 'var(--ti-lowcode-common-bg-8)', - 'ti-collapse-item-header-padding-vertical': '20px', - 'ti-collapse-item-wrap-bg-color': 'var(--ti-lowcode-common-component-bg)', - 'ti-collapse-item-bg-color': 'var(--ti-lowcode-common-component-bg)', - // dropdown组件 - 'ti-dropdown-text-color-hover': 'var(--ti-lowcode-common-text-color-5)', - // input 组件 - 'ti-input-text-color': 'var(--ti-lowcode-common-text-color-2)', - 'ti-input-bg-color': 'var(--ti-lowcode-common-bg-4)', - 'ti-input-border-color': 'var(--ti-lowcode-common-transparent-color)' -} diff --git a/packages/theme/base/src/dark.less b/packages/theme/base/src/dark/dark-common.less similarity index 100% rename from packages/theme/base/src/dark.less rename to packages/theme/base/src/dark/dark-common.less diff --git a/packages/theme/base/src/dark/dark-component.js b/packages/theme/base/src/dark/dark-component.js new file mode 100644 index 000000000..6473b5c44 --- /dev/null +++ b/packages/theme/base/src/dark/dark-component.js @@ -0,0 +1,3 @@ +// 用于定义TinyVue组件的dark样式 +// export const concatThemeDark = { +// } diff --git a/packages/theme/base/src/dark/index.js b/packages/theme/base/src/dark/index.js new file mode 100644 index 000000000..5dc280ee5 --- /dev/null +++ b/packages/theme/base/src/dark/index.js @@ -0,0 +1 @@ +import './dark-common.less' diff --git a/packages/theme/base/src/index.js b/packages/theme/base/src/index.js index f1be4c07c..2e64a38b6 100644 --- a/packages/theme/base/src/index.js +++ b/packages/theme/base/src/index.js @@ -1,16 +1,18 @@ -import { concatThemeDark } from './dark-component.js' -import { concatThemeLight } from './light-component.js' +import './base.less' +import './dark' +import './light' +import './component-common.less' -export const tinyEngineThemeLight = { - id: 'tiny-engine-light-theme', - name: 'EngineLightTheme', - cnName: 'EngineLightTheme', - data: { ...concatThemeLight } -} +// export const tinyEngineThemeLight = { +// id: 'tiny-engine-light-theme', +// name: 'EngineLightTheme', +// cnName: 'EngineLightTheme', +// data: { ...concatThemeLight } +// } -export const tinyEngineThemeDark = { - id: 'tiny-engine-dark-theme', - name: 'EngineDarkTheme', - cnName: 'EngineDarkTheme', - data: { ...concatThemeDark } -} +// export const tinyEngineThemeDark = { +// id: 'tiny-engine-dark-theme', +// name: 'EngineDarkTheme', +// cnName: 'EngineDarkTheme', +// data: { ...concatThemeDark } +// } diff --git a/packages/theme/base/src/light-component.js b/packages/theme/base/src/light-component.js deleted file mode 100644 index 943e41761..000000000 --- a/packages/theme/base/src/light-component.js +++ /dev/null @@ -1,23 +0,0 @@ -import './base.less' -import './light.less' - -export const concatThemeLight = { - // 弹窗 - 'ti-dialog-box-bg-color': 'var(--ti-lowcode-common-component-bg)', - 'ti-dialog-box-head-title-text-color': 'var(--ti-lowcode-common-primary-text-color)', - 'ti-dialog-box-close-icon-color-hover': 'var(--ti-lowcode-common-dark-1)', - 'ti-dialog-box-close-icon-color': 'var(--ti-lowcode-common-text-desc-color)', - 'ti-dialog-box-body-text-color': 'var(--ti-lowcode-common-primary-text-color)', - // collapse手风琴 - 'ti-collapse-item-text-color': 'var(--ti-lowcode-common-primary-text-color)', - 'ti-collapse-item-header-bg-color': 'var(--ti-lowcode-common-bg-0)', - 'ti-collapse-item-header-padding-vertical': '20px', - 'ti-collapse-item-wrap-bg-color': 'var(--ti-lowcode-common-component-bg)', - 'ti-collapse-item-bg-color': 'var(--ti-lowcode-common-component-bg)', - // dropdown组件 - 'ti-dropdown-text-color-hover': 'var(--ti-lowcode-common-text-hover)', - // input组件 - 'ti-input-text-color': 'var(--ti-lowcode-common-primary-text-color)', - 'ti-input-bg-color': 'var(--ti-lowcode-common-component-bg)', - 'ti-input-border-color': 'var(--ti-lowcode-common-gray-18)' -} diff --git a/packages/theme/base/src/light/index.js b/packages/theme/base/src/light/index.js new file mode 100644 index 000000000..1fb5e12f4 --- /dev/null +++ b/packages/theme/base/src/light/index.js @@ -0,0 +1 @@ +import './light-common.less' diff --git a/packages/theme/base/src/light.less b/packages/theme/base/src/light/light-common.less similarity index 100% rename from packages/theme/base/src/light.less rename to packages/theme/base/src/light/light-common.less diff --git a/packages/theme/base/src/light/light-component.js b/packages/theme/base/src/light/light-component.js new file mode 100644 index 000000000..7f6f8da11 --- /dev/null +++ b/packages/theme/base/src/light/light-component.js @@ -0,0 +1,3 @@ +// 用于定义TinyVue组件的light样式 +// export const concatThemeLight = { +// } From e747cd937d3b72536f7ec584587557f641822a61 Mon Sep 17 00:00:00 2001 From: James-9696 Date: Sun, 14 Jul 2024 19:05:32 -0700 Subject: [PATCH 05/14] delete invalid code --- packages/theme/base/src/component-common.less | 1959 ----------------- packages/theme/base/src/var-component.less | 0 2 files changed, 1959 deletions(-) create mode 100644 packages/theme/base/src/var-component.less diff --git a/packages/theme/base/src/component-common.less b/packages/theme/base/src/component-common.less index 50d9ffa71..e69de29bb 100644 --- a/packages/theme/base/src/component-common.less +++ b/packages/theme/base/src/component-common.less @@ -1,1959 +0,0 @@ -// 用于定义TinyVue组件的公共样式 -:root { - --ti-lowcode-property-active-color: #4f77ff; // 属性被激活的颜色 - --ti-lowcode-property-hover-color: #4f77ff; // 属性被hover的颜色 - --ti-lowcode-block-video-tip-color: rgb(80, 212, 171); // 区块播放视频提示颜色 -} - -// tiny-vue popover 弹框样式 -.tiny-popover.tiny-popper { - color: var(--ti-lowcode-popover-color); - background: var(--ti-lowcode-popover-bg-color); - border: none; - padding: 6px; - border-radius: 6px; - line-height: 16px; - box-shadow: rgb(0 0 0 / 15%) 0 5px 10px; - - &[x-placement^='bottom'] { - .popper__arrow { - top: -6px; - - &, - &::after { - border-bottom-color: var(--ti-lowcode-popover-bg-color); - } - } - } - - &[x-placement^='right'] { - margin-left: 16px; - - .popper__arrow { - left: -7px; - border-color: transparent; - - &::after { - border-right-color: var(--ti-lowcode-popover-bg-color); - } - } - } - - &[x-placement^='top'] { - .popper__arrow { - &, - &::after { - border-top-color: var(--ti-lowcode-popover-bg-color); - } - } - } - - &[x-placement^='left'] { - .popper__arrow { - right: -7px; - - &, - &::after { - border-left-color: var(--ti-lowcode-popover-bg-color); - } - } - } - - &.data-source-popper { - background: var(--ti-lowcode-tabs-bg); - color: var(--ti-lowcode-toolbar-breadcrumb-color); - border: 1px solid var(--ti-lowcode-tabs-border-color); - padding: 6px 0; - border-radius: 4px; - - &[x-placement^='bottom'] { - .popper__arrow { - &, - &::after { - border-bottom-color: var(--ti-lowcode-tabs-bg); - } - } - } - - &[x-placement^='right'] { - margin-left: 16px; - - .popper__arrow { - left: -7px; - border-color: transparent; - - &::after { - border-right-color: var(--ti-lowcode-tabs-bg); - } - } - } - - &[x-placement^='top'] { - .popper__arrow { - bottom: -7px; - - &, - &::after { - border-top-color: var(--ti-lowcode-tabs-bg); - } - } - } - - &[x-placement^='left'] { - .popper__arrow { - right: -7px; - - &, - &::after { - border-left-color: var(--ti-lowcode-tabs-bg); - } - } - } - - &.data-remote-popper { - background: var(--ti-lowcode-toolbar-view-hover-bg); - border-color: var(--ti-lowcode-toolbar-border-color); - - &[x-placement^='bottom'] { - .popper__arrow { - &, - &::after { - border-bottom-color: var(--ti-lowcode-toolbar-view-hover-bg); - } - } - } - - &[x-placement^='right'] { - margin-left: 16px; - - .popper__arrow { - left: -7px; - border-color: transparent; - - &::after { - border-right-color: var(--ti-lowcode-toolbar-view-hover-bg); - } - } - } - - &[x-placement^='top'] { - .popper__arrow { - bottom: -7px; - - &, - &::after { - border-top-color: var(--ti-lowcode-toolbar-view-hover-bg); - } - } - } - - &[x-placement^='left'] { - .popper__arrow { - right: -7px; - - &, - &::after { - border-left-color: var(--ti-lowcode-toolbar-view-hover-bg); - } - } - } - - li { - padding: 4px 10px; - font-size: 12px; - - &:hover { - background: var(--ti-lowcode-canvas-wrap-bg); - cursor: pointer; - } - } - } - - li { - cursor: pointer; - color: var(--ti-lowcode-toolbar-breadcrumb-color); - padding: 4px 8px; - transition: 0.3s; - - &:hover { - color: var(--ti-lowcode-tootip-input-color); - background: var(--ti-lowcode-toolbar-active-bg); - } - } - } - - &.lowcode { - background: var(--ti-lowcode-custom-popover-bg-color); - border: 1px solid var(--ti-lowcode-custom-popover-border-color); - color: var(--ti-lowcode-custom-popover-text-color); - - .popper__arrow, - .popper__arrow::after { - border-bottom-color: var(--ti-lowcode-custom-popover-bg-color); - } - - .languageContent { - width: 100%; - } - } - - &.option-popper { - background: var(--ti-lowcode-popover-bg-color); - border: 1px solid var(--ti-lowcode-popover-option-popper-border-color); - color: var(--ti-lowcode-toolbar-breadcrumb-color); - - &[x-placement^='bottom'] { - .popper__arrow { - &, - &::after { - border-bottom-color: var(--ti-lowcode-popover-bg-color); - } - } - } - - &[x-placement^='right'] { - margin-left: 16px; - - .popper__arrow { - left: -7px; - border-color: transparent; - - &::after { - border-right-color: var(--ti-lowcode-popover-bg-color); - } - } - } - - &[x-placement^='top'] { - .popper__arrow { - &, - &::after { - border-top-color: var(--ti-lowcode-popover-bg-color); - } - } - } - - &[x-placement^='left'] { - .popper__arrow { - right: -7px; - - &, - &::after { - border-left-color: var(--ti-lowcode-popover-bg-color); - } - } - } - - .add-options { - &.top { - border-bottom: 1px solid var(--ti-lowcode-tabs-border-color); - margin-bottom: 15px; - overflow: hidden; - display: flex; - height: 26px; - justify-content: space-between; - align-items: center; - padding: 6px; - - .title { - font-weight: 600; - } - - .icon-close { - margin-bottom: 4px; - margin-right: 0px; - } - } - - .demo-form { - padding: 6px; - - .tiny-form-item { - margin-bottom: 4px; - - :deep(.tiny-form-item__label) { - color: var(--ti-lowcode-toolbar-breadcrumb-color); - } - - :deep(.tiny-input__inner) { - color: var(--ti-lowcode-tootip-input-color); - background: var(--ti-lowcode-tootip-input-background-color); - border-color: var(--ti-lowcode-tootip-input-border-color); - - &:focus { - border-color: var(--ti-lowcode-canvas-handle-hover-bg); - } - } - } - - :deep(.btn) { - .tiny-form-item__content { - display: flex; - - .tiny-button { - min-width: auto; - flex: 1; - } - } - } - } - - .tiny-svg { - color: var(--ti-lowcode-toolbar-breadcrumb-color); - font-size: 14px; - - &.icon-close { - margin: 10px; - } - - &:hover { - cursor: pointer; - } - - &.header-icon { - margin-right: 0; - } - - &.isBind { - color: var(--ti-lowcode-icon-bind-color); - } - } - } - } - - &.option-popper { - padding: 2px 0; - min-width: 6%; - width: auto; - - .list { - li { - text-align: center; - - &:hover { - background: var(--ti-lowcode-canvas-wrap-bg); - } - } - } - - &.collaborator { - padding: 0; - } - - &.fixed-left { - top: 24px !important; - transform: translateX(calc(4px - var(--base-right-panel-width))); - height: calc(100% - 36px); - } - } - - &.media-icon-popover { - color: var(--ti-lowcode-media-popover-color); - font-size: 12px; - font-weight: 400; - padding: 20px; - - &[x-placement^='bottom'] { - margin-top: 16px; - } - - .tiny-popover__title { - color: var(--ti-lowcode-media-popover-title-color); - font-size: 14px; - line-height: 18px; - font-weight: 600; - margin-bottom: 0; - } - - .media-title { - color: var(--ti-lowcode-media-popover-title-color); - display: flex; - align-items: center; - font-size: 14px; - .sub-title { - color: var(--ti-lowcode-media-popover-color); - } - .icon-stars { - font-size: 16px; - margin-right: 4px; - } - } - - .content { - margin-top: 6px; - } - } - - &.toolbar-right-popover { - color: var(--ti-lowcode-toolbar-hover-popper); - font-size: 14px; - padding: 10px 16px; - border-radius: 6px; - font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, - 'Helvetica Neue', Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif; - &[x-placement^='bottom'] { - margin-top: 8px; - } - - &.collaboration-popover[x-placement^='bottom'] { - margin-top: 14px; - } - &.collaborator { - padding: 10px 0; - } - } - - &.block-add-transfer-popover { - background: var(--ti-lowcode-toolbar-bg); - border: 1px solid var(--ti-lowcode-tabs-border-color); - color: var(--ti-lowcode-toolbar-breadcrumb-color); - padding: 0; - - .popper__arrow { - display: none; - } - - &[x-placement^='top'] { - margin-bottom: 0; - } - - .sort-item { - padding: 6px 10px 6px 24px; - transition: 0.3s; - position: relative; - - &:hover { - background: var(--ti-lowcode-button-hover-bg); - } - } - } - - &.data-remote-popper { - width: 12%; - } - - &.toolbar-media-popper { - padding: 0; - font-size: 12px; - border-color: var(--ti-lowcode-tabs-border-color); - - &[x-placement^='bottom'] { - margin-top: 6px; - } - - &[x-placement^='right'] { - .popper__arrow { - border-color: transparent; - - &::after { - border-right-color: var(--ti-lowcode-toolbar-media-bg); - } - } - } - - &[x-placement^='top'] { - .popper__arrow { - &, - &::after { - border-top-color: var(--ti-lowcode-toolbar-media-bg); - } - } - } - - &[x-placement^='left'] { - .popper__arrow { - &, - &::after { - border-left-color: var(--ti-lowcode-toolbar-media-bg); - } - } - } - - .content-wrap { - padding: 20px; - .title { - width: 100%; - color: var(--ti-lowcode-media-popover-title-color); - background: var(--ti-lowcode-tabs-active-bg); - display: inline-block; - box-sizing: border-box; - font-size: 14px; - &.text-title { - background: transparent; - } - } - - .list { - border-bottom: 1px solid var(--ti-lowcode-tabs-border-color); - - li { - padding: 4px 8px; - transition: 0.3s; - color: var(--ti-lowcode-toolbar-breadcrumb-color); - - .tiny-svg { - margin-right: 6px; - color: var(--ti-lowcode-toolbar-breadcrumb-color); - } - - &:hover { - background: var(--ti-lowcode-canvas-wrap-bg); - } - } - } - - .more-setting { - li { - display: flex; - align-items: center; - gap: 8px; - color: var(--ti-lowcode-toolbar-sub-title-color); - padding-top: 12px; - } - } - - .tips { - padding: 8px; - - span { - display: inline-block; - padding: 4px 8px; - color: var(--ti-lowcode-dialog-font-color); - background: var(--ti-lowcode-canvas-wrap-bg); - border-left: 2px solid var(--ti-lowcode-dialog-tip-border-color); - } - } - - .setting { - display: flex; - align-items: center; - color: var(--ti-lowcode-toolbar-sub-title-color); - padding-top: 12px; - & > div { - display: flex; - align-items: center; - - & + div { - margin-left: 12px; - } - - label { - flex-shrink: 0; - margin-right: 8px; - } - } - - & > span { - width: 24px; - height: 24px; - display: flex; - justify-content: center; - align-items: center; - flex-shrink: 0; - margin-left: 12px; - border-radius: 2px; - transition: 0.3s; - - &:hover { - background: var(--ti-lowcode-icon-hover-bg); - cursor: pointer; - } - - .icon-canvas-fit { - font-size: 16px; - color: var(--ti-lowcode-description-minor-color); - } - } - - .tiny-input__suffix { - right: 4px; - - .tiny-input__suffix-inner { - font-size: 12px; - color: var(--ti-lowcode-description-minor-color); - } - } - - .tiny-input-suffix .tiny-input__inner { - padding-right: 20px; - padding-left: 4px; - - &[readonly] { - cursor: not-allowed; - - &:focus { - border-color: var(--ti-lowcode-tabs-border-color); - } - } - } - } - } - } - - &.tiny-pager__selector { - background-color: var(--ti-lowcode-common-hover-bg-1); - - .tiny-pager__selector-poplist { - background: var(--ti-lowcode-toolbar-view-hover-bg); - border: 1px solid var(--ti-lowcode-toolbar-border-color); - color: var(--ti-lowcode-toolbar-breadcrumb-color); - - .list-item { - &.select-pre.is-selected { - background: var(--ti-lowcode-canvas-wrap-bg); - } - - &:hover { - color: var(--ti-lowcode-dialog-font-color); - background-color: var(--ti-lowcode-canvas-wrap-bg); - } - } - } - } - - &.fit-popper { - .fit-content { - display: grid; - gap: 8px 4px; - grid-template-columns: 48px 1fr; - padding: 8px; - align-items: center; - } - - .fit-content-label { - color: var(--ti-lowcode-fit-label-color); - padding: 2px; - } - - .fit-content-main { - place-items: start center; - height: 64px; - display: grid; - gap: 4px 8px; - grid-template-columns: auto auto; - grid-template-rows: 1fr 3fr; - } - - .coordinate { - grid-column-start: 1; - grid-row: 1 / span 3; - width: 64px; - height: 64px; - background: var(--ti-lowcode-fit-coordinate-bg); - display: inline-grid; - overflow: hidden; - justify-items: center; - border-width: 1px; - box-sizing: border-box; - border-style: solid; - border-color: var(--ti-lowcode-fit-coordinate-border-color); - border-radius: 2px; - gap: 0px; - grid-template-columns: 1fr 1fr 1fr; - grid-template-rows: 1fr 1fr 1fr; - } - - .coordinate-origin { - background-color: var(--ti-lowcode-fit-coordinate-bg); - transition: color 0.1s ease 0s; - color: var(--ti-lowcode-fit-coordinate-origin-color); - font-size: 19px; - - &:hover, - &.selected { - color: var(--ti-lowcode-fit-label-color); - } - } - - .input-wrap { - grid-column-end: span 1; - grid-row-start: 2; - align-items: center; - box-sizing: border-box; - display: grid; - gap: 4px 8px; - grid-template-columns: auto auto; - - .left-input { - grid-column-start: 1; - } - - .top-input { - grid-column-start: 2; - } - - .left { - color: var(--ti-lowcode-fit-label-color); - justify-self: center; - grid-column-start: 1; - } - - .top { - color: var(--ti-lowcode-fit-label-color); - justify-self: center; - grid-column-start: 2; - } - - .tiny-input__inner { - padding: 0 20px 0 4px; - } - - .tiny-input__suffix { - right: 4px; - } - } - } - - &.grid-edit-popper { - color: var(--ti-lowcode-toolbar-breadcrumb-color); - - .grid-edit-spacing { - display: grid; - gap: 8px 4px; - grid-template-columns: 44px 1fr 24px 1fr; - align-items: center; - padding: 8px; - - .gap, - .direction { - grid-column: 1 / -1; - display: grid; - gap: 4px; - grid-template-columns: 48px 1fr; - } - - .direction { - align-items: center; - - .radio-button { - width: 50%; - } - } - - .gap-label { - display: inline-block; - height: 28px; - line-height: 28px; - } - - .gap-input { - display: grid; - gap: 4px; - grid-template-columns: 1fr 24px 1fr; - - .svg-icon { - place-self: center; - grid-area: 1 / 2 / auto / auto; - font-family: inherit; - font-size: inherit; - position: relative; - display: flex; - align-items: center; - justify-content: center; - height: 24px; - font-size: 18px; - } - - .col { - place-self: center; - } - - .row { - place-self: center; - grid-column: 3 / -1; - } - - .suffix { - min-width: 18px; - } - } - - .dense { - grid-column: 2 / -1; - display: flex; - align-items: center; - - input[type='checkbox'] { - accent-color: var(--ti-lowcode-tootip-arrow-border-color); - } - - label { - margin-right: 4px; - } - } - } - - .grid-edit-layout { - padding: 8px; - - .top { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 4px; - padding-right: 4px; - - .tiny-svg { - font-size: 16px; - } - } - - .text { - margin-left: 4px; - } - - .item-icon { - display: none; - color: var(--ti-lowcode-input-icon-color); - - &:hover { - color: var(--ti-lowcode-toolbar-breadcrumb-color); - } - - & + .item-icon { - margin-left: 8px; - } - } - - .option-input { - &:hover .item-icon { - display: inline-block; - } - } - - .layout-item { - .tiny-svg { - margin-right: 0; - } - - & + .layout-item { - margin-top: 8px; - } - } - } - - .is-setting { - color: var(--ti-lowcode-style-setting-label-color); - background-color: var(--ti-lowcode-style-setting-label-bg); - } - } - - &.icon-popover { - background-color: var(--ti-lowcode-icon-popover-bg); - filter: drop-shadow(rgba(0, 0, 0, 0.5) 0px 0px 1px) drop-shadow(rgba(0, 0, 0, 0.5) 0px 2px 4px) - drop-shadow(rgba(0, 0, 0, 0.5) 0px 4px 12px); - - &[x-placement^='left'] { - .popper__arrow { - right: -6px; - - &, - &::after { - border-left-color: var(--ti-lowcode-icon-popover-bg); - } - } - } - } -} - -// tiny-vue dialogBox 弹框样式 -.tiny-dialog-box__wrapper { - .tiny-dialog-box { - background-color: var(--ti-lowcode-dialog-box-bg-color); - .tiny-dialog-box__header { - color: var(--ti-lowcode-dialog-header-color); - background-color: var(--ti-lowcode-dialog-box-bg-color); - .tiny-dialog-box__headerbtn { - color: var(--ti-lowcode-dialog-close-btn-color); - - &:hover { - color: var(--ti-lowcode-dialog-close-btn-hover-color); - } - } - } - - .tiny-dialog-box__body { - color: var(--ti-lowcode-dialog-box-body-color); - - .tiny-collapse { - margin: 16px 0; - } - - .tiny-collapse-item__header { - padding: 0 8px; - color: var(--ti-lowcode-toolbar-breadcrumb-color); - background-color: var(--ti-lowcode-toolbar-active-bg); - - svg { - color: var(--ti-lowcode-toolbar-breadcrumb-color); - } - } - - .tiny-collapse-item { - border: none; - margin-top: 0; - padding-top: 0; - padding-bottom: 0; - background: var(--ti-lowcode-toolbar-bg); - color: var(--ti-lowcode-toolbar-breadcrumb-color); - } - - .tiny-collapse-item__wrap { - background-color: var(--ti-lowcode-toolbar-view-hover-bg); - } - - .tiny-collapse-item__content { - color: var(--ti-lowcode-toolbar-breadcrumb-color); - border: 1px solid var(--ti-lowcode-dialog-demo-border-color); - border-top: none; - } - } - } - - .switch-tip { - color: var(--ti-lowcode-toolbar-breadcrumb-color); - - .icon { - font-size: 28px; - margin-right: 12px; - } - } - - &.update-page { - .tiny-dialog-box__body { - .tiny-input { - margin-bottom: 10px; - background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59)); - - input { - color: var(--ti-lowcode-toolbar-breadcrumb-color); - } - } - } - } -} - -// tiny-vue modal 模态框 -.tiny-modal__wrapper { - .tiny-modal__box { - .tiny-modal__status-wrapper { - display: none; - } - - .tiny-modal__close-btn { - color: var(--ti-lowcode-modal-close-btn-color); - - &:hover { - background-color: unset; - color: var(--ti-lowcode-modal-close-btn-hover-color); - } - } - - .tiny-modal__body { - .modal-content { - color: var(--ti-lowcode-modal-content-color); - } - } - - .tiny-modal__footer { - display: flex; - justify-content: center; - - .tiny-button--primary { - margin-left: 8px; - } - } - } - - &.status__custom { - .tiny-modal__footer { - .tiny-button--default { - display: none; - } - } - } -} - -// tiny-vue tooltip 提示框 -.tiny-tooltip.tiny-tooltip__popper { - &.is-dark { - color: var(--ti-lowcode-tooltip-text-color); - background: var(--ti-lowcode-tooltip-bg-color); - padding: 6px; - border-radius: 2px; - box-shadow: rgb(0 0 0 / 15%) 0px 5px 10px; - font-size: 14px; - } - - &.is-error { - background-color: var(--ti-lowcode-tooltip-error-bg-color); - - &[x-placement^='top'] { - .popper__arrow { - &, - &::after { - border-top-color: var(--ti-lowcode-tooltip-error-bg-color); - } - } - } - - &[x-placement^='bottom'] { - .popper__arrow { - &, - &::after { - border-bottom-color: var(--ti-lowcode-tooltip-error-bg-color); - } - } - } - - &[x-placement^='left'] { - .popper__arrow { - &, - &::after { - border-left-color: var(--ti-lowcode-tooltip-error-bg-color); - } - } - } - - &[x-placement^='right'] { - .popper__arrow { - &, - &::after { - border-right-color: var(--ti-lowcode-tooltip-error-bg-color); - } - } - } - } - - &.tiny-form__valid.is-error { - &[x-placement^='top'] { - .popper__arrow { - bottom: -6px; - } - } - } - - &[x-placement^='top'] { - .popper__arrow { - &, - &::after { - border-top-color: var(--ti-lowcode-tooltip-bg-color); - } - } - } - - &[x-placement^='bottom'] { - .popper__arrow { - &, - &::after { - border-bottom-color: var(--ti-lowcode-tooltip-bg-color); - } - } - } - - &[x-placement^='left'] { - .popper__arrow { - &, - &::after { - border-left-color: var(--ti-lowcode-tooltip-bg-color); - } - } - } - - &[x-placement^='right'] { - .popper__arrow { - &, - &::after { - border-right-color: var(--ti-lowcode-tooltip-bg-color); - } - } - } - - &.background-type-tooltip { - z-index: 9999999 !important; - } -} - -.tiny-popper { - &.tiny-picker-panel { - color: var(--ti-lowcode-dialog-font-color); - background: var(--ti-lowcode-toolbar-view-hover-bg); - border-color: var(--ti-lowcode-tabs-border-color); - box-shadow: rgb(0 0 0 / 15%) 0px 5px 10px; - - .tiny-date-picker__header-label { - color: var(--ti-lowcode-dialog-font-color); - } - - .tiny-date-picker__time-header { - border-color: var(--ti-lowcode-tabs-border-color); - } - - .tiny-picker-panel__icon-btn { - color: var(--ti-lowcode-description-minor-color); - - &:hover { - color: var(--ti-lowcode-toolbar-icon-color); - } - } - - .tiny-picker-panel__footer { - background-color: var(--ti-lowcode-toolbar-view-hover-bg); - border-color: var(--ti-lowcode-tabs-border-color); - - .tiny-button--text { - color: var(--ti-lowcode-dialog-font-color); - - &:hover { - color: var(--ti-lowcode-toolbar-icon-color); - } - } - - .tiny-button--primary { - color: var(--ti-lowcode-toolbar-icon-color); - border-color: var(--ti-lowcode-toolbar-border-color); - background-color: var(--ti-lowcode-button-info-bg-color); - - &:hover { - color: var(--ti-lowcode-toolbar-icon-color); - border-color: var(--ti-lowcode-toolbar-border-color); - background-color: var(--ti-lowcode-button-info-hover-bg); - } - } - } - - .tiny-date-table { - td.next-month, - td.pre-month { - color: var(--ti-lowcode-description-minor-color); - - span:hover { - color: var(--ti-lowcode-toolbar-icon-color); - background: var(--ti-lowcode-canvas-wrap-bg); - } - } - - th { - color: var(--ti-lowcode-dialog-font-color); - } - - td.current:not(.disabled) span { - background-color: var(--ti-lowcode-canvas-wrap-bg); - } - - td.available:hover span { - color: var(--ti-lowcode-toolbar-icon-color); - background-color: var(--ti-lowcode-canvas-wrap-bg); - } - } - - .tiny-time-panel { - background: var(--ti-lowcode-toolbar-view-hover-bg); - border-color: var(--ti-lowcode-tabs-border-color); - box-shadow: rgb(0 0 0 / 15%) 0px 5px 10px; - } - - .tiny-time-spinner__item { - color: var(--ti-lowcode-description-minor-color); - - &.active:not(.disabled) { - color: var(--ti-lowcode-toolbar-icon-color); - } - - &:hover:not(.disabled):not(.active) { - color: var(--ti-lowcode-toolbar-icon-color); - background: var(--ti-lowcode-canvas-wrap-bg); - } - } - - .tiny-time-panel__footer { - border-color: var(--ti-lowcode-tabs-border-color); - - .cancel { - color: var(--ti-lowcode-dialog-font-color); - } - - .confirm { - color: var(--ti-lowcode-button-info-bg); - } - } - - .tiny-time-panel__content { - &::after, - &::before { - border-color: var(--ti-lowcode-toolbar-border-color); - } - } - } -} - -.tiny-grid { - svg { - color: var(--ti-grid-primary-color); - width: 16px; - height: 16px; - } - .tiny-grid__body-wrapper { - .tiny-grid-body__column { - border-bottom: 0; - cursor: pointer; - color: var(--ti-lowcode-base-text-color); - - .tree-box { - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; - - .node-icon { - margin-right: 5px; - } - } - } - - .tiny-grid-body__row { - .tiny-grid-default-input { - background: var(--ti-lowcode-input-bg); - color: var(--ti-lowcode-toolbar-breadcrumb-color); - } - - &, - &:not(.row__hover):nth-child(2n) { - background: var(--ti-lowcode-tiny-grid-row-hover-bg); - color: var(--ti-lowcode-toolbar-breadcrumb-color); - - &:hover { - background: var(--ti-lowcode-toolbar-bg); - } - - &.row__current { - background: var(--ti-lowcode-node-current-bg); - - span { - color: var(--ti-lowcode-toolbar-breadcrumb-color); - } - - svg { - color: var(--ti-lowcode-toolbar-breadcrumb-color); - } - } - - &.sortable-chosen { - background: var(--ti-lowcode-node-current-bg); - - &.nodrag { - background: var(--ti-lowcode-node-nodrag-bg); - } - } - } - - &.nav-tree { - .tiny-grid-body__column { - height: 32px; - } - - .tiny-grid-cell { - display: flex; - } - } - } - - .tiny-grid-tree-wrapper { - width: 14px; - - .tiny-grid-tree__node-btn { - font-size: 8px; - color: var(--ti-lowcode-tree-icon-color); - - &:hover { - color: var(--ti-lowcode-toolbar-icon-color); - } - } - } - } - - .tiny-grid__fixed-right-wrapper, - .tiny-grid__fixed-left-wrapper { - background-color: var(--ti-lowcode-common-bg-1); - } - - .tiny-grid-checkbox { - input { - & + .tiny-grid-checkbox__icon { - border: 1px solid var(--ti-lowcode-tiny-grid-checkbox-checked-border-color); - background-color: transparent; - svg { - color: var(--ti-lowcode-tiny-grid-checkbox-svg-color); - } - } - - &:checked + .tiny-grid-checkbox__icon { - border: 1px solid var(--ti-lowcode-tiny-grid-checkbox-checked-border-color); - - svg { - color: var(--ti-lowcode-common-primary-color); - width: 100%; - height: 100%; - } - } - - &[type='checkbox']:checked + .tiny-grid-checkbox__icon { - background-color: var(--ti-lowcode-tiny-grid-checkbox-checked-bg-color); - border-color: var(--ti-lowcode-tiny-grid-checkbox-checked-border-color); - } - } - &.is__indeterminate { - .tiny-grid-checkbox__icon svg { - color: var(--ti-lowcode-common-primary-color); - } - } - } - .tiny-grid-radio { - input + .tiny-grid-radio__icon > svg.icon-radio-selected { - color: var(--ti-lowcode-tiny-radio-selected-svg-color); - } - } -} - -.stripe-tiny-grid.tiny-grid { - background-color: var(--ti-lowcode-common-component-bg); - .tiny-grid { - background-color: var(--ti-lowcode-common-component-bg); - } - - .tiny-grid__header-wrapper { - background-color: var(--ti-lowcode-tabs-bg); - - .tiny-grid-header__column { - color: var(--ti-lowcode-stripe-grid-header-text-color); - height: 39px; - } - - .tiny-grid__repair { - border-color: var(--ti-lowcode-tabs-border-color); - } - - .tiny-grid-resizable.is__line:before { - background-color: var(--ti-lowcode-toolbar-active-bg); - } - } - - .tiny-grid__body-wrapper { - .tiny-grid-body__column { - height: 44px; - } - - .tiny-grid-body__row, - .tiny-grid-body__row:not(.row__hover):nth-child(2n) { - background-color: var(--ti-lowcode-stripe-grid-list-2n-bg-color); - - &:hover { - background-color: var(--ti-lowcode-stripe-grid-list-item-hover-bg); - } - - &.row__current { - background-color: var(--ti-lowcode-toolbar-view-hover-bg); - } - } - - .tiny-grid-body__row:not(.row__hover):nth-child(2n) { - background-color: var(--ti-lowcode-stripe-grid-list-n-bg-color); - } - } - - .tiny-grid__empty-text { - color: var(--ti-lowcode-toolbar-breadcrumb-color); - } -} - -.tiny-search { - div.tiny-search__line { - &:hover { - background-color: var(--ti-lowcode-search-hover-bg); - } - &.focus { - .tiny-search__input-btn { - color: var(--ti-lowcode-search-hover-icon-color); - } - .tiny-search__prefix svg { - color: var(--ti-lowcode-search-hover-icon-color); - } - } - - .tiny-search__input-btn { - color: var(--ti-lowcode-search-icon-color); - &:hover { - color: var(--ti-lowcode-search-hover-icon-color); - } - } - .tiny-search__prefix svg { - color: var(--ti-lowcode-search-icon-color); - &:hover { - color: var(--ti-lowcode-search-hover-icon-color); - cursor: pointer; - } - } - .tiny-search__input { - color: var(--ti-lowcode-search-input-color); - &::placeholder { - color: var(--ti-lowcode-search-input-placeholder-color); - } - } - } -} - -.tiny-input { - .tiny-input__inner { - border-color: var(--ti-lowcode-input-border-color); - background-color: var(--ti-lowcode-input-bg-color); - color: var(--ti-lowcode-input-color); - - &:focus { - border-color: var(--ti-lowcode-input-focus-border-color); - } - &::placeholder { - color: var(--ti-lowcode-input-placeholder-color); - } - &:hover { - border-color: var(--ti-lowcode-input-hover-border-color); - } - } - - &.is-disabled { - .tiny-input__inner { - border-color: var(--ti-lowcode-input-disabled-border-color); - background: var(--ti-lowcode-input-disabled-bg-color); - } - } - - // 全局自定义的错误样式状态，tinyvue 那边要有错误样式必须要包一层 form、form-item - // 所以我们这里自定义了一个类，添加这个类，就可以有错误的样式，无需包一层 form、form-item - &.status-error { - .tiny-input__inner { - border-color: var(--ti-lowcode-input-error-border-color); - background-color: var(--ti-lowcode-input-error-bg-color); - } - } -} - -.tiny-textarea { - border-color: var(--ti-lowcode-textarea-border-color); - - &:hover, - &:has(.tiny-textarea__inner:focus) { - border-color: var(--ti-lowcode-textarea-hover-border-color); - } - - .tiny-textarea__inner { - background-color: var(--ti-lowcode-textarea-input-bg-color); - color: var(--ti-lowcode-textarea-input-color); - } -} - -.tiny-numeric { - .tiny-numeric__decrease, - .tiny-numeric__increase { - color: var(--ti-lowcode-tiny-numeric-icon-color); - - &:hover { - color: var(--ti-lowcode-tiny-numeric-icon-hover-color); - } - } -} - -span.tiny-switch { - background-color: var(--ti-lowcode-tiny-switch-bg-color); - - &.tiny-switch-checked { - background-color: var(--ti-lowcode-tiny-switch-checked-bg-color); - } - - &::after { - background-color: var(--ti-lowcode-tiny-switch-dot-bg); - } -} - -.tiny-select { - div.tiny-input { - &.is-focus { - .tiny-input__inner { - border-color: var(--ti-lowcode-select-focus-border-color); - } - } - } - - .tiny-select__tags { - .tiny-tag { - color: var(--ti-lowcode-select-tags-text-color); - background-color: var(--ti-lowcode-select-tags-bg-color); - - .tiny-tag__close { - color: var(--ti-lowcode-select-tags-text-color); - &:hover { - color: var(--ti-lowcode-select-suffix-icon-color-hover); - } - } - } - } - - .tiny-input { - .tiny-input__inner { - padding: 8px; - } - - .tiny-select__caret { - color: var(--ti-lowcode-select-tags-text-color); - } - - .tiny-input__suffix-inner { - &:hover { - .tiny-select__caret { - color: var(--ti-lowcode-select-suffix-icon-color-hover); - } - } - } - } -} - -.tiny-select-dropdown { - &.tiny-popper { - background-color: var(--ti-lowcode-dropdown-bg-color); - border: 1px solid var(--ti-lowcode-dropdown-border-color); - - &.select-popper { - margin-top: 3px; - - .tiny-select-dropdown__item.tiny-option { - width: 79px; - height: 24px; - line-height: 24px; - padding: 4px 8px; - display: flex; - align-items: center; - } - - .tiny-select-dropdown__list { - padding: 4px 0; - } - - .tiny-select-dropdown__wrap { - min-height: 50px; - margin-bottom: -8px !important; - margin-right: -8px !important; - } - } - - .cursor-option { - padding: 0 4px 0 12px; - - .item-icon { - font-size: 16px; - } - - .item-label { - font-size: 14px; - margin-left: 4px; - } - } - } - - .tiny-select-dropdown__item { - &.tiny-option { - color: var(--ti-lowcode-dropdown-item-text-color); - background-color: var(--ti-lowcode-dropdown-bg-color); - - &.hover, - &:hover { - background-color: var(--ti-lowcode-dropdown-item-hover-bg-color); - color: var(--ti-lowcode-dropdown-item-hover-text-color); - } - - &.selected { - color: var(--ti-lowcode-dropdown-item-selected-color); - background-color: var(--ti-lowcode-dropdown-item-selected-bg); - - & > span { - position: relative; - } - } - - &.is-disabled > a { - cursor: not-allowed; - } - } - } - - &.is-multiple { - .tiny-select-dropdown__item.tiny-option { - &:not(.is-disabled).hover, - &:not(.is-disabled):hover { - color: var(--ti-lowcode-dropdown-item-hover-text-color); - background-color: var(--ti-lowcode-dropdown-item-hover-bg-color); - - .tiny-svg { - color: var(--ti-lowcode-dropdown-item-hover-text-color); - } - } - - &.is-disabled:hover { - background-color: transparent; - } - - &.selected { - color: var(--ti-lowcode-dropdown-item-hover-text-color); - background-color: transparent; - font-weight: 600; - - .tiny-svg { - color: var(--ti-lowcode-dropdown-item-hover-text-color); - } - - & > span { - padding-left: 0; - - &::before { - content: ''; - } - } - } - - & > span { - padding-left: 0; - } - } - } - - .tiny-select-group__wrap { - &:not(:last-of-type)::after { - left: 0; - right: 0; - background: var(--ti-lowcode-toolbar-border-color); - } - - .tiny-select-group__title { - font-size: 14px; - font-weight: 500; - color: var(--ti-lowcode-dialog-font-color); - background: var(--ti-lowcode-toolbar-bg); - padding: 2px 0 2px 8px; - margin-bottom: 2px; - } - } - - .tiny-tree { - color: var(--ti-lowcode-dialog-font-color); - background: var(--ti-lowcode-toolbar-view-hover-bg); - - .tiny-tree-node__expand-icon { - &, - &.expanded { - color: var(--ti-lowcode-dialog-font-color); - } - - &:not(.is-leaf) { - margin-left: 12px; - margin-right: 6px; - } - } - - .tiny-tree-node__content { - &:hover { - background-color: var(--ti-lowcode-canvas-wrap-bg); - } - } - - .tiny-tree-node { - &.is-current, - &:focus { - & > .tiny-tree-node__content { - background-color: var(--ti-lowcode-canvas-wrap-bg); - } - } - } - } - - &.position-origin-select { - min-width: 72px !important; - z-index: 9999999 !important; - } -} - -.tiny-tree { - .tiny-tree-node__label { - font-size: 12px; - } -} - -button { - &.tiny-button { - &.tiny-button--default { - color: var(--ti-lowcode-button-default-color); - border-color: var(--ti-lowcode-button-default-border-color); - background-color: var(--ti-lowcode-button-default-bg); - - &:hover { - color: var(--ti-lowcode-button-default-hover-color); - border-color: var(--ti-lowcode-button-default-hover-border-color); - background-color: var(--ti-lowcode-button-default-hover-bg); - } - - &.is-disabled { - color: var(--ti-lowcode-button-default-disabled-color); - border-color: var(--ti-lowcode-button-default-disabled-border-color); - background-color: var(--ti-lowcode-button-default-disabled-bg); - } - } - - &.tiny-button--info { - color: var(--ti-lowcode-button-info-color); - border-color: var(--ti-lowcode-button-info-border-color); - background-color: var(--ti-lowcode-button-info-bg-color); - - &:hover { - color: var(--ti-lowcode-button-info-hover-color); - border-color: var(--ti-lowcode-button-info-hover-border-color); - background-color: var(--ti-lowcode-button-info-hover-bg-color); - } - } - &.tiny-button--primary { - color: var(--ti-lowcode-button-primary-color); - border-color: var(--ti-lowcode-button-primary-border-color); - background-color: var(--ti-lowcode-button-primary-bg-color); - - &:hover { - color: var(--ti-lowcode-button-primary-hover-color); - border-color: var(--ti-lowcode-button-primary-hover-border-color); - background-color: var(--ti-lowcode-button-primary-hover-bg-color); - } - } - } -} - -.tiny-button-group { - ul.tiny-group-item { - border: 1px solid var(--ti-lowcode-tabs-border-color); - border-radius: 2px; - - li { - background-color: var(--ti-lowcode-canvas-wrap-bg); - - &.active { - &:hover button:not(.disabled), - button:not(.disabled) { - background: var(--ti-lowcode-tabs-bg); - border-color: var(--ti-lowcode-tabs-bg); - color: var(--ti-lowcode-toolbar-icon-color); - } - } - - &:hover { - button:not(.disabled) { - color: var(--ti-lowcode-dropdown-item-hover-text-color); - background-color: var(--ti-lowcode-common-component-bg); - } - } - - &:not(:last-child) { - margin-right: 0; - } - } - - button { - background-color: var(--ti-lowcode-canvas-wrap-bg); - color: var(--ti-lowcode-toolbar-breadcrumb-color); - - &::before { - background: var(--ti-lowcode-tabs-border-color); - } - } - } -} - -.tiny-form { - .tiny-form-item__label { - padding-right: 8px; - color: var(--ti-lowcode-input-label-color); - } - - .tiny-form-item { - &.is-error { - margin-bottom: 20px; - } - } -} - -.tiny-collapse { - border-top: none; - border-bottom: none; - .tiny-collapse-item { - border: none; - // 第一项的外边距会与其他元素外边距相加形成最终外边距，因此第一项外边距不调整 - + .tiny-collapse-item { - margin-top: 4px; - } - .tiny-collapse-item__header { - padding-left: 16px; - } - .components-items { - .item { - cursor: pointer; - } - } - } - - .tiny-collapse-item__header { - color: var(--ti-lowcode-collapse-item-header-color); - background: var(--ti-lowcode-collapse-item-header-bg-color); - position: relative; - min-height: 32px; - padding-top: 5px; - padding-bottom: 5px; - - &:hover, - &.is-active { - color: var(--ti-lowcode-collapse-item-header-active-color); - } - - .tiny-collapse-item__arrow { - line-height: 14px; - } - } - - .tiny-collapse-item, - .tiny-collapse-item__wrap { - background-color: var(--ti-lowcode-collapse-item-bg-color); - } - - .tiny-collapse-item__content { - color: var(--ti-lowcode-collapse-item-content-color); - padding: 0; - border: none; - } - - .tiny-collapse-item__wrap { - overflow: inherit; - } -} - -.canvas-slot-choose { - div { - line-height: 30px; - text-align: center; - color: var(--ti-lowcode-button-info-color); - - &:hover { - background-color: var(--ti-lowcode-component-item-hover-bg); - } - } -} - -.tiny-notify { - .tiny-notify__close-zone { - color: var(--ti-lowcode-notify-close-color); - &:hover { - color: var(--ti-lowcode-notify-close-hover-color); - } - } - - &.tiny-notify--error { - .tiny-notify__icon-status { - color: var(--ti-lowcode-base-error-color); - } - } - - &.tiny-notify--info { - .tiny-notify__icon-status { - color: var(--ti-lowcode-base-prompt-color); - } - } - - &.tiny-notify--success { - .tiny-notify__icon-status { - color: var(--ti-lowcode-base-success-color); - } - } - - &.tiny-notify--warning { - .tiny-notify__icon-status { - color: var(--ti-lowcode-base-warn-color); - } - } -} - -.tiny-tabs { - // tiny-tabs button-card模式宽度默认无法铺满父容器，添加此类名修改成铺满父容器 - &.full-width-tabs { - .tiny-tabs__nav { - float: none; - display: flex; - .tiny-tabs__item { - flex: 1 1 auto; - } - } - } - &__item__title { - text-align: center; - } -} - -.tiny-dropdown { - &__trigger { - color: var(--ti-lowcode-trigger-color); - &:not(&__caret-button):hover { - color: var(--ti-lowcode-trigger-hover-color); - } - } -} - -.empty-wrap { - text-align: center; - margin-top: 20px; - - .empty-icon { - width: 64px; - height: 64px; - color: var(--ti-lowcode-empty-icon-color); - } - - .empty-text { - margin-top: 6px; - margin-bottom: 0; - font-size: 12px; - color: var(--ti-lowcode-common-text-color-5); - } -} - -.tiny-radio-group { - .tiny-radio-button { - &:first-child { - .tiny-radio-button__inner { - border-color: var(--ti-lowcode-radio-button-border-color); - } - } - .tiny-radio-button__orig-radio:checked { - & + .tiny-radio-button__inner { - background-color: var(--ti-lowcode-tiny-radio-button-checked-bg); - border-color: var(--ti-lowcode-radio-button-border-color); - &:hover { - box-shadow: none; - } - } - } - &__inner { - background-color: var(--ti-lowcode-tiny-radio-button-bg); - color: var(--ti-lowcode-radio-button-color); - border-color: var(--ti-lowcode-radio-button-border-color); - } - } -} - -.tiny-loading { - .tiny-loading__spinner { - margin-top: 0; - transform: translateY(-50%); - } -} - -.global-desc-info { - color: var(--ti-lowcode-common-text-desc-color); -} diff --git a/packages/theme/base/src/var-component.less b/packages/theme/base/src/var-component.less new file mode 100644 index 000000000..e69de29bb From 371c89cafb04830732c922909f4107426fc46810 Mon Sep 17 00:00:00 2001 From: James-9696 Date: Wed, 17 Jul 2024 20:32:39 -0700 Subject: [PATCH 06/14] fix: engine component light color theme variable replacement --- packages/theme/base/src/base.less | 61 +++- packages/theme/base/src/common.less | 179 ++++++++++ packages/theme/base/src/component-common.less | 1 + packages/theme/base/src/dark/dark-common.less | 72 +--- .../theme/base/src/dark/dark-component.js | 3 - packages/theme/base/src/index.js | 19 +- .../theme/base/src/light/light-common.less | 61 +--- .../theme/base/src/light/light-component.js | 3 - packages/theme/base/src/var-component.less | 0 packages/theme/light/base.less | 273 --------------- packages/theme/light/block.less | 44 +-- packages/theme/light/bridge.less | 12 +- packages/theme/light/canvas.less | 39 +-- packages/theme/light/datasource.less | 66 ++-- packages/theme/light/events.less | 48 +-- packages/theme/light/gpt-dialog.less | 48 +-- packages/theme/light/help.less | 20 +- packages/theme/light/i18n.less | 6 +- packages/theme/light/index.less | 1 - packages/theme/light/life-cycles.less | 8 +- packages/theme/light/materials.less | 10 +- packages/theme/light/metaComponent.less | 80 +++-- packages/theme/light/pageManage.less | 24 +- packages/theme/light/plugin-js.less | 8 +- packages/theme/light/setting-style.less | 12 +- packages/theme/light/settings.less | 56 ++-- packages/theme/light/toolbar.less | 2 +- packages/theme/light/tutorial.less | 6 +- packages/theme/light/variable.less | 315 +++++++++--------- 29 files changed, 642 insertions(+), 835 deletions(-) create mode 100644 packages/theme/base/src/common.less delete mode 100644 packages/theme/base/src/dark/dark-component.js delete mode 100644 packages/theme/base/src/light/light-component.js delete mode 100644 packages/theme/base/src/var-component.less delete mode 100644 packages/theme/light/base.less diff --git a/packages/theme/base/src/base.less b/packages/theme/base/src/base.less index b6b881924..c710b53e6 100644 --- a/packages/theme/base/src/base.less +++ b/packages/theme/base/src/base.less @@ -1,6 +1,8 @@ :root { // 透明色 --ti-base-color-transparent: transparent; + --ti-base-color-inherit: inherit; + --ti-base-color-unset: unset; // 灰阶 --ti-lowcode-base-gray-1: #fff; @@ -24,7 +26,7 @@ --ti-lowcode-base-gray-19: #afafaf; --ti-lowcode-base-gray-20: #ababab; --ti-lowcode-base-gray-21: #adb0b8; - + --ti-lowcode-base-gray-22: #1476ff1a; --ti-lowcode-base-gray-23: #a6a6a6; --ti-lowcode-base-gray-24: #a7aab2; --ti-lowcode-base-gray-25: #4d4d4d; @@ -38,7 +40,8 @@ --ti-lowcode-base-gray-33: #6a6a6a; --ti-lowcode-base-gray-34: #6b6b6b; --ti-lowcode-base-gray-35: #606165; - + --ti-lowcode-base-gray-36: #dddddd; + --ti-lowcode-base-gray-37: #cbcbcb; --ti-lowcode-base-gray-38: #626262; --ti-lowcode-base-gray-39: #737373; --ti-lowcode-base-gray-40: #757575; @@ -50,6 +53,18 @@ --ti-lowcode-base-gray-46: #999; --ti-lowcode-base-gray-47: #9d9d9d; --ti-lowcode-base-gray-48: #9f9f9f; + --ti-lowcode-base-gray-49: #999999; + --ti-lowcode-base-gray-50: #8a887b; + --ti-lowcode-base-gray-51: #f3f3f3; + --ti-lowcode-base-gray-52: #d1d1d1; + --ti-lowcode-base-gray-53: #bdbdbd; + --ti-lowcode-base-gray-54: #dfdfdf; + --ti-lowcode-base-gray-55: #bfbfbf; + --ti-lowcode-base-gray-56: #b5b5b5; + --ti-lowcode-base-gray-57: #f3f3f5; + --ti-lowcode-base-gray-58: #919191; + --ti-lowcode-base-gray-59: #e7e8e9; + --ti-lowcode-base-gray-60: #9e9e9e; // black --ti-lowcode-base-dark-1: #1f1f1f; @@ -66,7 +81,7 @@ --ti-lowcode-base-dark-12: #2b2b2b; --ti-lowcode-base-dark-13: #262626; --ti-lowcode-base-dark-14: #222; - --ti-lowcode-base-dark-15: #202020; + --ti-lowcode-base-dark-16: #292929; --ti-lowcode-base-dark-17: #292929; --ti-lowcode-base-dark-18: #3c3c3c; @@ -95,6 +110,11 @@ --ti-lowcode-base-red-13: #f2c5c2; --ti-lowcode-base-red-14: #c7000b; --ti-lowcode-base-red-15: #fce3e1; + --ti-lowcode-base-red-16: #feeaeb; + --ti-lowcode-base-red-17: #dc544f; + --ti-lowcode-base-red-18: #ff0000; + --ti-lowcode-base-red-19: #ea384c; + --ti-lowcode-base-red-20: #c92c3f; // expand-orange --ti-lowcode-base-orange-1: #fff5e8; @@ -111,6 +131,8 @@ --ti-lowcode-base-orange-12: #d6a981; --ti-lowcode-base-orange-13: #f2d8c2; --ti-lowcode-base-orange-14: #fa9841; + --ti-lowcode-base-orange-15: #facb4b; + --ti-lowcode-base-orange-16: #ffb100; // expand-yellow --ti-lowcode-base-yellow-1: #fcf9eb; @@ -126,6 +148,7 @@ --ti-lowcode-base-yellow-11: #9e7e3f; --ti-lowcode-base-yellow-12: #d4b57f; --ti-lowcode-base-yellow-13: #e6d3b8; + --ti-lowcode-base-yellow-14: #501c1c; // expand-lemon --ti-lowcode-base-lemon-1: #fcfae8; @@ -187,6 +210,7 @@ --ti-lowcode-base-green-12: #77c78f; --ti-lowcode-base-green-13: #b8e6c7; --ti-lowcode-base-green-14: #e6f2d5; + --ti-lowcode-base-green-15: #2ad986; // expand-mint --ti-lowcode-base-mint-1: #e8fcfa; @@ -238,6 +262,11 @@ --ti-lowcode-base-blue-16: #7693f5; --ti-lowcode-base-blue-17: #526ecc; --ti-lowcode-base-blue-18: #deecff; + --ti-lowcode-base-blue-19: #5073e5; + --ti-lowcode-base-blue-20: #5e7ce0; + --ti-lowcode-base-blue-21: #6bb0ff; + --ti-lowcode-base-blue-22: #006cff; + --ti-lowcode-base-blue-23: #8bbefa; // expand-indigo --ti-lowcode-base-indigo-1: #eee8ff; @@ -315,6 +344,8 @@ --ti-lowcode-base-bg-4: #595959; --ti-lowcode-base-bg-5: #fff; --ti-lowcode-base-bg-6: #5959591a; + --ti-lowcode-base-bg-7: rgba(0, 255, 0, 0.1); + --ti-lowcode-base-bg-8: rgba(242, 48, 48, 0.3); --ti-lowcode-base-dark-bg: #141414; --ti-lowcode-base-dark-bg-2: #333; --ti-lowcode-base-dark-bg-3: #e6e6e6; @@ -331,7 +362,6 @@ --ti-lowcode-base-text-color-4: #c2c2c2; --ti-lowcode-base-dark-text-color: #e6e6e6; --ti-lowcode-base-dark-text-color-1: #a6a6a6; - --ti-lowcode-base-text-dark-color-2: #595959; // 文本链接色 --ti-lowcode-base-text-link-color: #191919; @@ -345,11 +375,9 @@ --ti-lowcode-base-secondary-button-border-color: #595959; --ti-lowcode-base-secondary-button-border-hover-color: #c2c2c2; --ti-lowcode-base-default-button-border-color: #c2c2c2; - --ti-lowcode-base-default-button-border-hover-color: #191919; --ti-lowcode-base-default-button-border-disable-color: #dbdbdb; --ti-lowcode-base-dark-secondary-button-border-color: #a6a6a6; --ti-lowcode-base-dark-secondary-button-border-hover-color: #3d3d3d; - --ti-lowcode-base-dark-default-button-border-color: #595959; --ti-lowcode-base-dark-default-button-border-hover-color: #e6e6e6; // 分割线 @@ -358,6 +386,17 @@ --ti-lowcode-base-dark-split-color-1: rgba(255, 255, 255, 0.08); // 白色背景分割线 --ti-lowcode-base-dark-split-color-2: rgba(255, 255, 255, 0.15); + // rgba + --ti-lowcode-base-rgba-1: rgba(0, 0, 0, 0.2); + --ti-lowcode-base-rgba-2: rgba(0, 0, 0, 0.08); + --ti-lowcode-base-rgba-3: rgba(242, 48, 48, 0.1); + --ti-lowcode-base-rgba-4: rgba(20, 118, 255, 0.1); + --ti-lowcode-base-rgba-5: rgba(255, 0, 0); + --ti-lowcode-base-rgba-6: rgba(0, 0, 0, 0.5); + --ti-lowcode-base-rgba-7: rgba(200, 200, 200, 0.2); + --ti-lowcode-base-rgba-8: rgba(255, 255, 255, 0.1); + --ti-lowcode-base-rgba-9: rgba(76, 152, 241, 0.15); + // 状态色 --ti-lowcode-base-error-color: #f23030; --ti-lowcode-base-warn-color: #ff8800; @@ -425,4 +464,14 @@ --ti-lowcode-base-font-weight-8: 800; // 中黑 --ti-lowcode-base-font-weight-9: 900; // 黑体 --ti-lowcode-base-font-weight-bold: 700; + + /** + * 1.5 圆角 + **/ + --ti-common-border-radius-normal: 2px; // 常规 + --ti-common-border-radius-0: 0px; // 直角 + --ti-common-border-radius-1: 4px; // 圆角-1 + --ti-common-border-radius-2: 6px; // 圆角-1 + --ti-common-border-radius-3: 8px; // 圆角-2 + --ti-common-border-radius-4: 50%; // 圆形 } diff --git a/packages/theme/base/src/common.less b/packages/theme/base/src/common.less new file mode 100644 index 000000000..4921c4046 --- /dev/null +++ b/packages/theme/base/src/common.less @@ -0,0 +1,179 @@ +// common变量定义 +:root { + // 背景色 + --ti-lowcode-common-component-bg: var(--ti-lowcode-base-gray-1); + --ti-lowcode-common-component-bg-1: var(--ti-lowcode-base-bg); + --ti-lowcode-common-component-bg-2: var(--ti-lowcode-base-bg-5); + --ti-lowcode-common-component-bg-3: var(--ti-lowcode-base-gray-22); + --ti-lowcode-common-component-bg-4: var(--ti-lowcode-base-bg-2); + --ti-lowcode-common-component-bg-5: var(--ti-lowcode-base-gray-6); + --ti-lowcode-common-component-bg-6: var(--ti-lowcode-base-bg-7); + --ti-lowcode-common-component-bg-7: var(--ti-lowcode-base-red-6); + --ti-lowcode-common-component-bg-8: var(--ti-lowcode-base-bg-8); + --ti-lowcode-common-component-bg-9: var(--ti-lowcode-base-blue-6); + --ti-lowcode-common-component-bg-10: var(--ti-lowcode-base-bg-3); + --ti-lowcode-common-component-bg-11: var(--ti-lowcode-base-gray-13); + --ti-lowcode-common-component-bg-12: var(--ti-lowcode-base-orange-6); + --ti-lowcode-common-component-bg-13: var(--ti-lowcode-base-bg-1); + --ti-lowcode-common-component-bg-14: var(--ti-lowcode-base-red-16); + --ti-lowcode-common-component-bg-15: var(--ti-lowcode-base-gray-8); + --ti-lowcode-common-component-bg-16: var(--ti-base-color-inherit); + --ti-lowcode-common-component-bg-17: var(--ti-lowcode-base-rgba-3); + --ti-lowcode-common-component-bg-18: var(--ti-lowcode-base-rgba-4); + --ti-lowcode-common-component-bg-19: var(--ti-lowcode-base-gray-11); + --ti-lowcode-common-component-bg-20: var(--ti-lowcode-base-gray-15); + --ti-lowcode-common-component-bg-21: var(--ti-lowcode-base-rgba-6); + --ti-lowcode-common-component-bg-22: var(--ti-lowcode-base-gray-51); + --ti-lowcode-common-component-bg-23: var(--ti-lowcode-base-rgba-5); + --ti-lowcode-common-component-bg-24: var(--ti-lowcode-base-gray-14); + --ti-lowcode-common-component-bg-25: var(--ti-lowcode-base-gray-5); + --ti-lowcode-common-component-bg-26: var(--ti-lowcode-base-gray-3); + --ti-lowcode-common-component-bg-27: var(--ti-lowcode-base-invalidate-color); + --ti-lowcode-common-component-bg-28: var(--ti-lowcode-base-bg-6); + --ti-lowcode-common-component-bg-29: var(--ti-lowcode-base-dark-6); + --ti-lowcode-common-component-bg-30: var(--ti-lowcode-base-gray-10); + --ti-lowcode-common-component-bg-31: var(--ti-lowcode-base-gray-47); + --ti-lowcode-common-component-bg-32: var(--ti-lowcode-base-gray-55); + --ti-lowcode-common-component-bg-33: var(--ti-lowcode-base-gray-56); + --ti-lowcode-common-component-bg-34: var(--ti-lowcode-base-dark-21); + --ti-lowcode-common-component-bg-35: var(--ti-lowcode-base-dark-bg-7); + --ti-lowcode-common-component-bg-36: var(--ti-lowcode-base-gray-41); + --ti-lowcode-common-component-bg-37: var(--ti-lowcode-base-orange-16); + --ti-lowcode-common-component-bg-38: var(--ti-lowcode-base-red-20); + --ti-lowcode-common-component-bg-39: var(--ti-lowcode-base-rgba-9); + --ti-lowcode-common-component-bg-40: var(--ti-lowcode-base-gray-57); + --ti-lowcode-common-component-bg-41: var(--ti-lowcode-base-gray-58); + --ti-lowcode-common-component-bg-42: var(--ti-lowcode-base-gray-59); + --ti-lowcode-common-component-bg-43: var(--ti-lowcode-base-blue-20); + --ti-lowcode-common-component-bg-44: var(--ti-lowcode-base-rgba-7); + --ti-lowcode-common-component-bg-45: var(--ti-lowcode-base-red-19); + + // 文本 + --ti-lowcode-common-primary-text-color: var(--ti-lowcode-base-dark-5); + --ti-lowcode-common-secondary-text-color: var(--ti-lowcode-base-gray-18); + --ti-lowcode-common-third-text-color: var(--ti-lowcode-base-gray-20); + --ti-lowcode-common-text-title-color: var(--ti-lowcode-base-dark-5); + --ti-lowcode-common-text-main-color: var(--ti-lowcode-base-gray-31); + --ti-lowcode-common-text-desc-color: var(--ti-lowcode-base-gray-43); + --ti-lowcode-common-text-placeholder-color: var(--ti-lowcode-base-gray-31); + --ti-lowcode-common-text-color-1: var(--ti-lowcode-base-gray-33); + --ti-lowcode-common-text-color-2: var(--ti-lowcode-base-gray-12); + --ti-lowcode-common-text-color-3: var(--ti-lowcode-base-gray-1); + --ti-lowcode-common-text-color-4: var(--ti-lowcode-base-mint-14); + --ti-lowcode-common-text-color-5: var(--ti-lowcode-base-gray-43); + --ti-lowcode-common-text-color-6: var(--ti-lowcode-base-gray-31); + --ti-lowcode-common-text-color-7: var(--ti-lowcode-base-text-color-2); + --ti-lowcode-common-text-color-8: var(--ti-lowcode-base-text-color-1); + --ti-lowcode-common-text-color-9: var(--ti-lowcode-base-dark-20); + --ti-lowcode-common-text-color-10: var(--ti-lowcode-base-text-link-color-3); + --ti-lowcode-common-text-color-11: var(--ti-lowcode-base-gray-37); + --ti-lowcode-common-text-color-12: var(--ti-lowcode-base-yellow-14); + --ti-lowcode-common-text-color-13: var(--ti-base-color-inherit); + --ti-lowcode-common-text-color-14: var(--ti-lowcode-base-gray-44); + --ti-lowcode-common-text-color-15: var(--ti-lowcode-base-dark-11); + --ti-lowcode-common-text-color-16: var(--ti-lowcode-base-blue-19); + --ti-lowcode-common-text-color-17: var(--ti-lowcode-base-blue-14); + --ti-lowcode-common-text-color-18: var(--ti-lowcode-base-dark-26); + --ti-lowcode-common-text-color-19: var(--ti-lowcode-base-gray-32); + --ti-lowcode-common-text-color-20: var(--ti-lowcode-base-rgba-5); + --ti-lowcode-common-text-color-21: var(--ti-lowcode-base-rgba-6); + --ti-lowcode-common-text-color-22: var(--ti-lowcode-base-gray-46); + --ti-lowcode-common-text-color-23: var(--ti-lowcode-base-gray-14); + --ti-lowcode-common-text-color-24: var(--ti-lowcode-base-gray-17); + --ti-lowcode-common-text-color-25: var(--ti-lowcode-base-gray-30); + --ti-lowcode-common-text-color-26: var(--ti-lowcode-base-gray-42); + --ti-lowcode-common-text-color-27: var(--ti-lowcode-base-gray-40); + --ti-lowcode-common-text-color-28: var(--ti-lowcode-base-gray-52); + --ti-lowcode-common-text-color-29: var(--ti-lowcode-base-gray-39); + --ti-lowcode-common-text-color-30: var(--ti-lowcode-base-dark-21); + --ti-lowcode-common-text-color-31: var(--ti-lowcode-base-blue-21); + --ti-lowcode-common-text-color-32: var(--ti-lowcode-base-blue-23); + --ti-lowcode-common-text-color-33: var(--ti-lowcode-base-blue-20); + --ti-lowcode-common-text-color-34: var(--ti-lowcode-base-gray-25); + + // 边框 + --ti-lowcode-common-border-color-1: var(--ti-lowcode-base-gray-9); + --ti-lowcode-common-border-color-2: var(--ti-lowcode-base-gray-6); + --ti-lowcode-common-border-color-3: var(--ti-lowcode-base-gray-35); + --ti-lowcode-common-border-color-4: var(--ti-lowcode-base-default-button-border-color); + --ti-lowcode-common-border-color-5: var(--ti-lowcode-base-gray-20); + --ti-lowcode-common-border-color-6: var(--ti-lowcode-base-blue-6); + --ti-lowcode-common-border-color-7: var(--ti-lowcode-base-gray-36); + --ti-lowcode-common-border-color-8: var(--ti-lowcode-base-gray-13); + --ti-lowcode-common-border-color-9: var(--ti-lowcode-base-kelly-6); + --ti-lowcode-common-border-color-10: var(--ti-lowcode-base-rgba-2); + --ti-lowcode-common-border-color-11: var(--ti-lowcode-base-red-17); + --ti-lowcode-common-border-color-12: var(--ti-lowcode-base-gray-11); + --ti-lowcode-common-border-color-13: var(--ti-lowcode-base-gray-18); + --ti-lowcode-common-border-color-14: var(--ti-lowcode-base-gray-43); + --ti-lowcode-common-border-color-15: var(--ti-lowcode-base-dark-5); + --ti-lowcode-common-border-color-16: var(--ti-lowcode-base-gray-46); + --ti-lowcode-common-border-color-17: var(--ti-lowcode-base-dark-20); + --ti-lowcode-common-border-color-18: var(--ti-base-color-transparent); + --ti-lowcode-common-border-color-19: var(--ti-lowcode-base-gray-1); + --ti-lowcode-common-border-color-20: var(--ti-lowcode-base-gray-30); + --ti-lowcode-common-border-color-21: var(--ti-lowcode-base-gray-48); + --ti-lowcode-common-border-color-22: var(--ti-lowcode-base-gray-16); + --ti-lowcode-common-border-color-23: var(--ti-lowcode-base-gray-29); + --ti-lowcode-common-border-color-24: var(--ti-lowcode-base-green-15); + --ti-lowcode-common-border-color-25: var(--ti-lowcode-base-gray-60); + + // 提示 + --ti-lowcode-common-primary-color: var(--ti-lowcode-base-blue-6); + --ti-lowcode-common-primary-hover-color: var(--ti-lowcode-base-blue-6); + --ti-lowcode-common-info-color: var(--ti-lowcode-base-blue-6); + --ti-lowcode-common-warning-color: var(--ti-lowcode-base-orange-6); + --ti-lowcode-common-warning-color-1: var(--ti-lowcode-base-lemon-6); + --ti-lowcode-common-warning-color-2: var(--ti-lowcode-base-orange-15); + --ti-lowcode-common-error-color: var(--ti-lowcode-base-red-6); + --ti-lowcode-common-error-color-1: var(--ti-lowcode-base-red-18); + + // 按钮 + --ti-lowcode-common-btn-default-color: var(--ti-lowcode-base-dark-5); // 默认按钮颜色 + --ti-lowcode-common-btn-default-disabled-color: var(--ti-lowcode-base-gray-18); // 默认禁用颜色 + --ti-lowcode-common-btn-default-hover-color: var(--ti-lowcode-base-gray-31); // 默认按钮 hover 颜色 + --ti-lowcode-common-btn-default-border-color: var(--ti-lowcode-base-dark-5); // 默认按钮边框色 + --ti-lowcode-common-btn-default-border-hover-color: var(--ti-lowcode-base-gray-31); // 默认按钮 hover 边框色 + --ti-lowcode-common-search-bg: var(--ti-lowcode-base-gray-1); // tinysearch 背景色 + + // 关闭按钮 + --ti-lowcode-common-close-icon-text-color: var(--ti-lowcode-base-dark-5); // 关闭按钮默认颜色 + --ti-lowcode-common-close-icon-text-color-1: var(--ti-lowcode-base-dark-22); + --ti-lowcode-common-close-icon-text-hover-color: var(--ti-lowcode-base-dark-5); + + // svg按钮 + --ti-lowcode-common-svg-button-color: var(--ti-lowcode-base-dark-5); + --ti-lowcode-common-svg-button-hover-color: var(--ti-lowcode-base-dark-5); + --ti-lowcode-common-svg-button-hover-bg-color: var(--ti-lowcode-base-bg-1); + --ti-lowcode-common-svg-button-active-color: var(--ti-lowcode-base-dark-5); + --ti-lowcode-common-svg-button-active-bg-color: var(--ti-lowcode-base-bg-1); + + // 圆角 + --ti-lowcode-common-radius-6: var(--ti-common-border-radius-2); + + //状态 + --ti-lowcode-common-status-error: var(--ti-lowcode-base-error-color); + --ti-lowcode-common-status-success: var(--ti-lowcode-base-success-color); + + // 权重值 + --ti-lowcode-common-font-weight-normal: var(--ti-lowcode-base-font-weight-bold); + + // 其他 + --ti-lowcode-common-dark-1: var(--ti-lowcode-base-dark-1); + --ti-lowcode-common-dark-2: var(--ti-lowcode-base-dark-13); + --ti-lowcode-common-gray-18: var(--ti-lowcode-base-gray-18); + --ti-lowcode-common-gray-19: var(--ti-lowcode-base-gray-19); + --ti-lowcode-common-gray-26: var(--ti-lowcode-base-gray-26); + --ti-lowcode-common-gray-49: var(--ti-lowcode-base-gray-49); + --ti-lowcode-common-gray-50: var(--ti-lowcode-base-gray-50); + --ti-lowcode-common-gray-53: var(--ti-lowcode-base-gray-53); + --ti-lowcode-common-gray-54: var(--ti-lowcode-base-gray-54); + --ti-lowcode-common-blue-22: var(--ti-lowcode-base-blue-22); + --ti-lowcode-common-bg-0: var(--ti-base-color-transparent); + --ti-lowcode-common-layout-bg: var(--ti-lowcode-base-gray-1); + --ti-lowcode-common-header-bg: var(--ti-lowcode-base-gray-8); + --ti-lowcode-common-text-hover: var(--ti-lowcode-base-blue-17); + --ti-lowcode-common-component-hover-bg: var(--ti-lowcode-base-gray-5); + --ti-lowcode-common-rgba-1: var(--ti-lowcode-base-rgba-1); + --ti-lowcode-common-color-unset: var(--ti-base-color-unset); +} diff --git a/packages/theme/base/src/component-common.less b/packages/theme/base/src/component-common.less index e69de29bb..2c8dfc8ee 100644 --- a/packages/theme/base/src/component-common.less +++ b/packages/theme/base/src/component-common.less @@ -0,0 +1 @@ +// 用于写tinyvue组件的样式 diff --git a/packages/theme/base/src/dark/dark-common.less b/packages/theme/base/src/dark/dark-common.less index 0305e60ad..d388ffd02 100644 --- a/packages/theme/base/src/dark/dark-common.less +++ b/packages/theme/base/src/dark/dark-common.less @@ -1,73 +1,3 @@ -// 暗色主题 +// tinyvue组件的暗色主题 :root { - --ti-lowcode-common-gray-26: var(--ti-lowcode-base-gray-26); - --ti-lowcode-common-transparent-color: var(--ti-base-color-transparent); - --ti-lowcode-common-search-bg: var(--ti-lowcode-base-dark-13); - - // 背景 - --ti-lowcode-common-component-bg: var(--ti-lowcode-base-dark-8); - --ti-lowcode-common-component-hover-bg: var(--ti-lowcode-base-dark-18); - --ti-lowcode-common-layout-bg: var(--ti-lowcode-base-dark-4); - --ti-lowcode-common-header-bg: var(--ti-lowcode-base-dark-6); - --ti-lowcode-common-bg-1: var(--ti-lowcode-base-dark-22); - --ti-lowcode-common-bg-2: var(--ti-lowcode-base-gray-25); - --ti-lowcode-common-bg-3: var(--ti-lowcode-base-dark-12); - --ti-lowcode-common-bg-4: var(--ti-lowcode-base-dark-13); - --ti-lowcode-common-bg-5: var(--ti-lowcode-base-gray-8); - --ti-lowcode-common-bg-6: var(--ti-lowcode-base-dark-24); - --ti-lowcode-common-bg-7: var(--ti-lowcode-base-gray-44); - --ti-lowcode-common-bg-8: var(--ti-lowcode-base-dark-14); - --ti-lowcode-common-bg-9: var(--ti-lowcode-base-dark-16); - --ti-lowcode-common-hover-bg-1: var(--ti-lowcode-base-dark-bg-7); - --ti-lowcode-common-icon-hover-1: var(--ti-lowcode-base-gray-21); - - // 文本 - --ti-lowcode-common-primary-text-color: var(--ti-lowcode-base-gray-1); - --ti-lowcode-common-secondary-text-color: var(--ti-lowcode-base-gray-21); - --ti-lowcode-common-text-title-color: var(--ti-lowcode-base-dark-11); - --ti-lowcode-common-text-color-1: var(--ti-lowcode-base-gray-33); - --ti-lowcode-common-text-color-2: var(--ti-lowcode-base-gray-12); - --ti-lowcode-common-text-color-3: var(--ti-lowcode-base-gray-1); - --ti-lowcode-common-text-color-4: var(--ti-lowcode-base-mint-14); - --ti-lowcode-common-text-color-5: var(--ti-lowcode-base-gray-44); - --ti-lowcode-common-text-color-6: var(--ti-lowcode-base-gray-30); - --ti-lowcode-common-text-color-7: var(--ti-lowcode-base-gray-7); - --ti-lowcode-common-text-color-8: var(--ti-lowcode-base-text-color); - --ti-lowcode-common-third-text-color: var(--ti-lowcode-base-gray-20); - --ti-lowcode-common-text-main-color: var(--ti-lowcode-base-gray-31); - --ti-lowcode-common-text-desc-color: var(--ti-lowcode-base-gray-43); - --ti-lowcode-common-text-placeholder-color: var(--ti-lowcode-base-gray-31); - - // 边框 - --ti-lowcode-common-border-color-1: var(--ti-lowcode-base-dark-9); - --ti-lowcode-common-border-color-2: var(--ti-lowcode-base-dark-19); - --ti-lowcode-common-border-color-3: var(--ti-lowcode-base-gray-35); - --ti-lowcode-common-border-color-4: var(--ti-lowcode-base-dark-10); - - // 信息 - --ti-lowcode-common-primary-color: var(--ti-lowcode-base-blue-14); - --ti-lowcode-common-primary-hover-color: var(--ti-lowcode-base-blue-15); - --ti-lowcode-common-error-color: var(--ti-lowcode-base-red-6); - --ti-lowcode-common-info-color: var(--ti-lowcode-base-blue-16); - --ti-lowcode-common-warning-color: var(--ti-lowcode-base-orange-14); - --ti-lowcode-common-empty-color: var(--ti-lowcode-base-gray-45); - --ti-lowcode-common-danger-color: var(--ti-lowcode-base-red-14); - - // 按钮 - --ti-lowcode-common-btn-default-color: var(--ti-lowcode-base-dark-5); // 默认按钮颜色 - --ti-lowcode-common-btn-default-disabled-color: var(--ti-lowcode-base-gray-18); // 默认禁用颜色 - --ti-lowcode-common-btn-default-hover-color: var(--ti-lowcode-base-gray-31); // 默认按钮 hover 颜色 - --ti-lowcode-common-btn-default-border-color: var(--ti-lowcode-base-dark-5); // 默认按钮边框色 - --ti-lowcode-common-btn-default-border-hover-color: var(--ti-lowcode-base-gray-31); // 默认按钮 hover 边框色 - - // svg按钮 - --ti-lowcode-common-svg-button-color: var(--ti-lowcode-base-gray-12); - --ti-lowcode-common-svg-button-hover-color: var(--ti-lowcode-base-blue-14); - --ti-lowcode-common-svg-button-hover-bg-color: var(--ti-base-color-transparent); - --ti-lowcode-common-svg-button-active-color: var(--ti-lowcode-base-blue-14); - --ti-lowcode-common-svg-button-active-bg-color: var(--ti-base-color-transparent); - - // 关闭按钮 - --ti-lowcode-common-close-icon-text-color: var(--ti-lowcode-base-gray-20); // 关闭按钮默认颜色 - --ti-lowcode-common-close-icon-text-hover-color: var(--ti-lowcode-base-gray-1); } diff --git a/packages/theme/base/src/dark/dark-component.js b/packages/theme/base/src/dark/dark-component.js deleted file mode 100644 index 6473b5c44..000000000 --- a/packages/theme/base/src/dark/dark-component.js +++ /dev/null @@ -1,3 +0,0 @@ -// 用于定义TinyVue组件的dark样式 -// export const concatThemeDark = { -// } diff --git a/packages/theme/base/src/index.js b/packages/theme/base/src/index.js index 2e64a38b6..bdbe45b70 100644 --- a/packages/theme/base/src/index.js +++ b/packages/theme/base/src/index.js @@ -1,18 +1,7 @@ +// 提供engine主题包的样式定义引入 import './base.less' -import './dark' +import './common.less' +// 须提供变量区分亮暗两套主题，再引入引入dark和light，达到提供tinyvue组件亮暗色两套样式定义引入 +// import './dark' import './light' import './component-common.less' - -// export const tinyEngineThemeLight = { -// id: 'tiny-engine-light-theme', -// name: 'EngineLightTheme', -// cnName: 'EngineLightTheme', -// data: { ...concatThemeLight } -// } - -// export const tinyEngineThemeDark = { -// id: 'tiny-engine-dark-theme', -// name: 'EngineDarkTheme', -// cnName: 'EngineDarkTheme', -// data: { ...concatThemeDark } -// } diff --git a/packages/theme/base/src/light/light-common.less b/packages/theme/base/src/light/light-common.less index 40f7ab599..6dcce4df4 100644 --- a/packages/theme/base/src/light/light-common.less +++ b/packages/theme/base/src/light/light-common.less @@ -1,62 +1,3 @@ -// 亮色主题 +// tinyvue组件的亮色主题 :root { - // - --ti-lowcode-common-dark-1: var(--ti-lowcode-base-dark-1); - --ti-lowcode-common-gray-18: var(--ti-lowcode-base-gray-18); - --ti-lowcode-common-gray-26: var(--ti-lowcode-base-gray-26); - - // 背景色 - --ti-lowcode-common-component-bg: var(--ti-lowcode-base-gray-1); - --ti-lowcode-common-component-hover-bg: var(--ti-lowcode-base-gray-5); - --ti-lowcode-common-layout-bg: var(--ti-lowcode-base-gray-1); - --ti-lowcode-common-header-bg: var(--ti-lowcode-base-gray-8); - --ti-lowcode-common-bg-0: var(--ti-base-color-transparent); - --ti-lowcode-common-text-hover: var(--ti-lowcode-base-blue-17); - - // 文本 - --ti-lowcode-common-primary-text-color: var(--ti-lowcode-base-dark-5); - --ti-lowcode-common-secondary-text-color: var(--ti-lowcode-base-gray-18); - --ti-lowcode-common-third-text-color: var(--ti-lowcode-base-gray-20); - --ti-lowcode-common-text-title-color: var(--ti-lowcode-base-dark-5); - --ti-lowcode-common-text-main-color: var(--ti-lowcode-base-gray-31); - --ti-lowcode-common-text-desc-color: var(--ti-lowcode-base-gray-43); - --ti-lowcode-common-text-placeholder-color: var(--ti-lowcode-base-gray-31); - --ti-lowcode-common-text-color-1: var(--ti-lowcode-base-gray-33); - --ti-lowcode-common-text-color-2: var(--ti-lowcode-base-gray-12); - --ti-lowcode-common-text-color-3: var(--ti-lowcode-base-gray-1); - --ti-lowcode-common-text-color-4: var(--ti-lowcode-base-mint-14); - --ti-lowcode-common-text-color-5: var(--ti-lowcode-base-gray-43); - --ti-lowcode-common-text-color-6: var(--ti-lowcode-base-gray-31); - // 边框 - --ti-lowcode-common-border-color-1: var(--ti-lowcode-base-gray-9); - --ti-lowcode-common-border-color-3: var(--ti-lowcode-base-gray-35); - --ti-lowcode-common-border-color-4: var(--ti-lowcode-base-gray-9); - - --ti-lowcode-common-hover-bg-1: var(--ti-lowcode-base-gray-5); - // 提示 - --ti-lowcode-common-primary-color: var(--ti-lowcode-base-blue-6); - --ti-lowcode-common-primary-hover-color: var(--ti-lowcode-base-blue-6); - --ti-lowcode-common-info-color: var(--ti-lowcode-base-blue-6); - --ti-lowcode-common-warning-color: var(--ti-lowcode-base-orange-6); - --ti-lowcode-common-warning-color-1: var(--ti-lowcode-base-lemon-6); - --ti-lowcode-common-error-color: var(ti-lowcode-base-red-6); - - // 按钮 - --ti-lowcode-common-btn-default-color: var(--ti-lowcode-base-dark-5); // 默认按钮颜色 - --ti-lowcode-common-btn-default-disabled-color: var(--ti-lowcode-base-gray-18); // 默认禁用颜色 - --ti-lowcode-common-btn-default-hover-color: var(--ti-lowcode-base-gray-31); // 默认按钮 hover 颜色 - --ti-lowcode-common-btn-default-border-color: var(--ti-lowcode-base-dark-5); // 默认按钮边框色 - --ti-lowcode-common-btn-default-border-hover-color: var(--ti-lowcode-base-gray-31); // 默认按钮 hover 边框色 - --ti-lowcode-common-search-bg: var(--ti-lowcode-base-gray-1); // tinysearch 背景色 - - // 关闭按钮 - --ti-lowcode-common-close-icon-text-color: var(--ti-lowcode-base-dark-5); // 关闭按钮默认颜色 - --ti-lowcode-common-close-icon-text-hover-color: var(--ti-lowcode-base-dark-5); - - // svg按钮 - --ti-lowcode-common-svg-button-color: var(--ti-lowcode-base-dark-5); - --ti-lowcode-common-svg-button-hover-color: var(--ti-lowcode-base-dark-5); - --ti-lowcode-common-svg-button-hover-bg-color: var(--ti-lowcode-base-bg-1); - --ti-lowcode-common-svg-button-active-color: var(--ti-lowcode-base-dark-5); - --ti-lowcode-common-svg-button-active-bg-color: var(--ti-lowcode-base-bg-1); } diff --git a/packages/theme/base/src/light/light-component.js b/packages/theme/base/src/light/light-component.js deleted file mode 100644 index 7f6f8da11..000000000 --- a/packages/theme/base/src/light/light-component.js +++ /dev/null @@ -1,3 +0,0 @@ -// 用于定义TinyVue组件的light样式 -// export const concatThemeLight = { -// } diff --git a/packages/theme/base/src/var-component.less b/packages/theme/base/src/var-component.less deleted file mode 100644 index e69de29bb..000000000 diff --git a/packages/theme/light/base.less b/packages/theme/light/base.less deleted file mode 100644 index db2e35310..000000000 --- a/packages/theme/light/base.less +++ /dev/null @@ -1,273 +0,0 @@ -:root { - // 灰阶 - --ti-lowcode-base-gray-0: #fff; - --ti-lowcode-base-gray-5: #fafafa; - --ti-lowcode-base-gray-10: #f5f5f5; - --ti-lowcode-base-gray-20: #f0f0f0; - --ti-lowcode-base-gray-30: #dbdbdb; - --ti-lowcode-base-gray-40: #c2c2c2; - --ti-lowcode-base-gray-50: #808080; - --ti-lowcode-base-gray-60: #595959; - --ti-lowcode-base-gray-70: #333; - --ti-lowcode-base-gray-80: #262626; - --ti-lowcode-base-gray-90: #191919; - --ti-lowcode-base-gray-100: #000; - - // expand-red - --ti-lowcode-base-red-1: #ffeae8; - --ti-lowcode-base-red-2: #fccdca; - --ti-lowcode-base-red-3: #faa9a5; - --ti-lowcode-base-red-4: #fa8682; - --ti-lowcode-base-red-5: #f76360; - --ti-lowcode-base-red-6: #f23030; - --ti-lowcode-base-red-7: #cc272a; - --ti-lowcode-base-red-8: #a3171c; - --ti-lowcode-base-red-9: #78080e; - --ti-lowcode-base-red-10: #4d0005; - --ti-lowcode-base-red-11: #a64242; - --ti-lowcode-base-red-12: #d4827f; - --ti-lowcode-base-red-13: #f2c5c2; - - // expand-orange - --ti-lowcode-base-orange-1: #fff5e8; - --ti-lowcode-base-orange-2: #fcdfb8; - --ti-lowcode-base-orange-3: #fcc98b; - --ti-lowcode-base-orange-4: #fcb25c; - --ti-lowcode-base-orange-5: #ff9a2e; - --ti-lowcode-base-orange-6: #ff8800; - --ti-lowcode-base-orange-7: #d96900; - --ti-lowcode-base-orange-8: #a64d00; - --ti-lowcode-base-orange-9: #733400; - --ti-lowcode-base-orange-10: #4d2201; - --ti-lowcode-base-orange-11: #9e6d3f; - --ti-lowcode-base-orange-12: #d6a981; - --ti-lowcode-base-orange-13: #f2d8c2; - - // expand-yellow - --ti-lowcode-base-yellow-1: #fcf9eb; - --ti-lowcode-base-yellow-2: #fcf0c2; - --ti-lowcode-base-yellow-3: #fae396; - --ti-lowcode-base-yellow-4: #f7d56d; - --ti-lowcode-base-yellow-5: #f7c845; - --ti-lowcode-base-yellow-6: #fcbe1e; - --ti-lowcode-base-yellow-7: #d99b0b; - --ti-lowcode-base-yellow-8: #a67711; - --ti-lowcode-base-yellow-9: #7a5202; - --ti-lowcode-base-yellow-10: #4d3200; - --ti-lowcode-base-yellow-11: #9e7e3f; - --ti-lowcode-base-yellow-12: #d4b57f; - --ti-lowcode-base-yellow-13: #e6d3b8; - - // expand-lemon - --ti-lowcode-base-lemon-1: #fcfae8; - --ti-lowcode-base-lemon-2: #fcf6c2; - --ti-lowcode-base-lemon-3: #fcf092; - --ti-lowcode-base-lemon-4: #fae969; - --ti-lowcode-base-lemon-5: #f7e04a; - --ti-lowcode-base-lemon-6: #f7d916; - --ti-lowcode-base-lemon-7: #d9bb16; - --ti-lowcode-base-lemon-8: #a38708; - --ti-lowcode-base-lemon-9: #756002; - --ti-lowcode-base-lemon-10: #4d3d00; - --ti-lowcode-base-lemon-11: #9e8f46; - --ti-lowcode-base-lemon-12: #d6c581; - --ti-lowcode-base-lemon-13: #eddfb2; - - // expand-lime - --ti-lowcode-base-lime-1: #f8fae3; - --ti-lowcode-base-lime-2: #eff5bf; - --ti-lowcode-base-lime-3: #e2ed8e; - --ti-lowcode-base-lime-4: #d5e667; - --ti-lowcode-base-lime-5: #c6de3e; - --ti-lowcode-base-lime-6: #b2d119; - --ti-lowcode-base-lime-7: #95b312; - --ti-lowcode-base-lime-8: #728c0a; - --ti-lowcode-base-lime-9: #576e05; - --ti-lowcode-base-lime-10: #3b4d00; - --ti-lowcode-base-lime-11: #808c46; - --ti-lowcode-base-lime-12: #c1cc7a; - --ti-lowcode-base-lime-13: #3b4d00; - - // expand-kelly - --ti-lowcode-base-kelly-1: #f2fae6; - --ti-lowcode-base-kelly-2: #daf2bb; - --ti-lowcode-base-kelly-3: #b9e683; - --ti-lowcode-base-kelly-4: #9edb58; - --ti-lowcode-base-kelly-5: #7dcc29; - --ti-lowcode-base-kelly-6: #5cb300; - --ti-lowcode-base-kelly-7: #4b9902; - --ti-lowcode-base-kelly-8: #3c8001; - --ti-lowcode-base-kelly-9: #2e6600; - --ti-lowcode-base-kelly-10: #1f4700; - --ti-lowcode-base-kelly-11: #628c38; - --ti-lowcode-base-kelly-12: #a2c777; - --ti-lowcode-base-kelly-13: #d2e6bb; - - // expand-green - --ti-lowcode-base-green-1: #e8fced; - --ti-lowcode-base-green-2: #bbf2c8; - --ti-lowcode-base-green-3: #82e09a; - --ti-lowcode-base-green-4: #51d675; - --ti-lowcode-base-green-5: #25c251; - --ti-lowcode-base-green-6: #00b336; - --ti-lowcode-base-green-7: #029931; - --ti-lowcode-base-green-8: #01802b; - --ti-lowcode-base-green-9: #006624; - --ti-lowcode-base-green-10: #004a1b; - --ti-lowcode-base-green-11: #3d995c; - --ti-lowcode-base-green-12: #77c78f; - --ti-lowcode-base-green-13: #b8e6c7; - - // expand-mint - --ti-lowcode-base-mint-1: #e8fcfa; - --ti-lowcode-base-mint-2: #bff5ef; - --ti-lowcode-base-mint-3: #8be8e0; - --ti-lowcode-base-mint-4: #5dded5; - --ti-lowcode-base-mint-5: #38d6ce; - --ti-lowcode-base-mint-6: #10c7c1; - --ti-lowcode-base-mint-7: #0aaba8; - --ti-lowcode-base-mint-8: #048c8c; - --ti-lowcode-base-mint-9: #046466; - --ti-lowcode-base-mint-10: #004547; - --ti-lowcode-base-mint-11: #3d9996; - --ti-lowcode-base-mint-12: #77c7c2; - --ti-lowcode-base-mint-13: #b8e6e1; - - // expand-sky - --ti-lowcode-base-sky-1: #e8f8fc; - --ti-lowcode-base-sky-2: #c4f2ff; - --ti-lowcode-base-sky-3: #9de4fa; - --ti-lowcode-base-sky-4: #79d8f7; - --ti-lowcode-base-sky-5: #58cbf5; - --ti-lowcode-base-sky-6: #33bcf2; - --ti-lowcode-base-sky-7: #1f9acf; - --ti-lowcode-base-sky-8: #1075a3; - --ti-lowcode-base-sky-9: #065278; - --ti-lowcode-base-sky-10: #00304a; - --ti-lowcode-base-sky-11: #3d7f99; - --ti-lowcode-base-sky-12: #7ab8cc; - --ti-lowcode-base-sky-13: #b6e5f2; - - // expand-blue - --ti-lowcode-base-blue-1: #e3effa; - --ti-lowcode-base-blue-2: #c4e1ff; - --ti-lowcode-base-blue-3: #99c9ff; - --ti-lowcode-base-blue-4: #68abfc; - --ti-lowcode-base-blue-5: #4191fa; - --ti-lowcode-base-blue-6: #1476ff; - --ti-lowcode-base-blue-7: #0f5ed4; - --ti-lowcode-base-blue-8: #0845a6; - --ti-lowcode-base-blue-9: #022e7a; - --ti-lowcode-base-blue-10: #001a4a; - --ti-lowcode-base-blue-11: #3d6899; - --ti-lowcode-base-blue-12: #7fa6d4; - --ti-lowcode-base-blue-13: #b6d4f2; - - // expand-indigo - --ti-lowcode-base-indigo-1: #eee8ff; - --ti-lowcode-base-indigo-2: #ddd7fa; - --ti-lowcode-base-indigo-3: #b19cf7; - --ti-lowcode-base-indigo-4: #957af5; - --ti-lowcode-base-indigo-5: #6e51e0; - --ti-lowcode-base-indigo-6: #512fd6; - --ti-lowcode-base-indigo-7: #391eb0; - --ti-lowcode-base-indigo-8: #27108f; - --ti-lowcode-base-indigo-9: #19056e; - --ti-lowcode-base-indigo-10: #0e004d; - --ti-lowcode-base-indigo-11: #584d99; - --ti-lowcode-base-indigo-12: #847acc; - --ti-lowcode-base-indigo-13: #bbb8e6; - - // expand-purple - --ti-lowcode-base-purple-1: #f5e8ff; - --ti-lowcode-base-purple-2: #e4c5fc; - --ti-lowcode-base-purple-3: #d0a1f7; - --ti-lowcode-base-purple-4: #b878f0; - --ti-lowcode-base-purple-5: #9f53e6; - --ti-lowcode-base-purple-6: #832fd6; - --ti-lowcode-base-purple-7: #641eb0; - --ti-lowcode-base-purple-8: #4c1091; - --ti-lowcode-base-purple-9: #370673; - --ti-lowcode-base-purple-10: #20004d; - --ti-lowcode-base-purple-11: #683d99; - --ti-lowcode-base-purple-12: #a07acc; - --ti-lowcode-base-purple-13: #cbb8e6; - - // expand-pink - --ti-lowcode-base-pink-1: #fce6fb; - --ti-lowcode-base-pink-2: #fcc2f9; - --ti-lowcode-base-pink-3: #f794f2; - --ti-lowcode-base-pink-4: #eb67e6; - --ti-lowcode-base-pink-5: #e841e5; - --ti-lowcode-base-pink-6: #d91ad9; - --ti-lowcode-base-pink-7: #b50fb8; - --ti-lowcode-base-pink-8: #8f0a94; - --ti-lowcode-base-pink-9: #6b0370; - --ti-lowcode-base-pink-10: #47004d; - --ti-lowcode-base-pink-11: #993d99; - --ti-lowcode-base-pink-12: #c97acc; - --ti-lowcode-base-pink-13: #e2b8e6; - - // expand-rose - --ti-lowcode-base-rose-1: #fce6ef; - --ti-lowcode-base-rose-2: #ffc4de; - --ti-lowcode-base-rose-3: #fa9bc9; - --ti-lowcode-base-rose-4: #f56cac; - --ti-lowcode-base-rose-5: #eb4696; - --ti-lowcode-base-rose-6: #e61c81; - --ti-lowcode-base-rose-7: #b50e65; - --ti-lowcode-base-rose-8: #940a54; - --ti-lowcode-base-rose-9: #70033f; - --ti-lowcode-base-rose-10: #4d002b; - --ti-lowcode-base-rose-11: #993d6e; - --ti-lowcode-base-rose-12: #cc7aa6; - --ti-lowcode-base-rose-13: #e6b8d2; - - // 公司品牌色 - --ti-lowcode-base-brand-color: #c7000b; - - // 主色 - --ti-lowcode-base-primary-color-1: #191919; - --ti-lowcode-base-primary-color-2: #1476ff; - - // 背景色 - --ti-lowcode-base-bg: #f5f5f5; - --ti-lowcode-base-bg-1: rgba(0, 0, 0, 0.05); - --ti-lowcode-base-bg-2: #fafafa; - --ti-lowcode-base-bg-3: #191919; - --ti-lowcode-base-bg-4: #595959; - --ti-lowcode-base-bg-5: #fff; - --ti-lowcode-base-bg-6: #5959591a; - - // 文本色 - --ti-lowcode-base-text-color: #191919; - --ti-lowcode-base-text-color-1: #595959; - --ti-lowcode-base-text-color-2: #1476ff; - --ti-lowcode-base-text-color-3: #808080; - --ti-lowcode-base-text-color-4: #c2c2c2; - - // 文本链接色 - --ti-lowcode-base-text-link-color: #191919; - --ti-lowcode-base-text-link-color-1: #595959; - --ti-lowcode-base-text-link-color-2: #c2c2c2; - --ti-lowcode-base-text-link-color-3: #fff; - - // 按钮边框色 - --ti-lowcode-base-secondary-button-border-color: #595959; - --ti-lowcode-base-secondary-button-border-hover-color: #c2c2c2; - --ti-lowcode-base-default-button-border-color: #c2c2c2; - --ti-lowcode-base-default-button-border-hover-color: #191919; - --ti-lowcode-base-default-button-border-disable-color: #dbdbdb; - - // 分割线 - --ti-lowcode-base-split-color-1: rgba(0, 0, 0, 0.08); // 白色背景分割线 - --ti-lowcode-base-split-color-2: rgba(0, 0, 0, 0.15); // 灰色背景分割线 - - // 状态色 - --ti-lowcode-base-error-color: #f23030; - --ti-lowcode-base-warn-color: #ff8800; - --ti-lowcode-base-warn-color-1: #f7d916; - --ti-lowcode-base-success-color: #5cb300; - --ti-lowcode-base-prompt-color: #1476ff; - --ti-lowcode-base-invalidate-color: #ebebeb; -} diff --git a/packages/theme/light/block.less b/packages/theme/light/block.less index 9b3afa156..2892e98cb 100644 --- a/packages/theme/light/block.less +++ b/packages/theme/light/block.less @@ -10,7 +10,9 @@ --ti-lowcode-component-block-history-list-item-btn-hover-color: var( --ti-lowcode-common-text-main-color ); // 预览还原 hover 颜色 - --ti-lowcode-component-block-history-list-item-btn-hover-bg: var(--ti-lowcode-common-hover-bg-1); // 预览还原背景色 + --ti-lowcode-component-block-history-list-item-btn-hover-bg: var( + --ti-lowcode-common-component-bg-25 + ); // 预览还原背景色 --ti-lowcode-component-block-history-list-item-btn-border-color: var( --ti-lowcode-common-secondary-text-color ); // 预览还原边框色 @@ -19,36 +21,36 @@ --ti-lowcode-component-block-list-item-color: var(--ti-lowcode-common-text-main-color); // 区块列表颜色 --ti-lowcode-component-block-list-shortcut-title-color: var(--ti-lowcode-common-primary-text-color); // 快照标题颜色 --ti-lowcode-component-block-list-shortcut-bg: var(--ti-lowcode-common-component-bg); // 快照标题颜色 - --ti-lowcode-component-block-list-border-color: var(--ti-lowcode-common-border-color-4); // 快照标题颜色 - --ti-lowcode-component-block-list-item-active-bg: #f5f5f5; // 区块 active 背景色 - --ti-lowcode-component-block-version-list-item-border-color: var(--ti-lowcode-base-gray-20); - --ti-lowcode-component-block-version-list-item-bg: var(--ti-lowcode-base-gray-0); - --ti-lowcode-component-block-version-list-version-bg: #1476ff1a; + --ti-lowcode-component-block-list-border-color: var(--ti-lowcode-common-border-color-1); // 快照标题颜色 + --ti-lowcode-component-block-list-item-active-bg: var(----ti-lowcode-common-component-bg-1); // 区块 active 背景色 + --ti-lowcode-component-block-version-list-item-border-color: var(--ti-lowcode-common-border-color-2); + --ti-lowcode-component-block-version-list-item-bg: var(--ti-lowcode-common-component-bg-2); + --ti-lowcode-component-block-version-list-version-bg: var(--ti-lowcode-common-component-bg-3); --ti-lowcode-component-block-version-list-version-color: var(--ti-lowcode-common-primary-color); --ti-lowcode-component-block-version-list-panel-title-color: var(--ti-lowcode-common-text-title-color); --ti-lowcode-component-block-version-list-time-color: var(--ti-lowcode-common-text-title-color); --ti-lowcode-component-block-version-list-desc-color: var(--ti-lowcode-common-text-desc-color); - --ti-lowcode-component-block-version-list-current-version-color: var(--ti-lowcode-base-text-color-2); - --ti-lowcode-component-block-setting-popover-bg: var(--ti-lowcode-base-gray-0); - --ti-lowcode-component-block-setting-item-hover-bg: var(--ti-lowcode-base-bg-2); - --ti-lowcode-component-block-setting-item-text-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-component-block-version-list-current-version-color: var(--ti-lowcode-common-text-color-7); + --ti-lowcode-component-block-setting-popover-bg: var(--ti-lowcode-common-component-bg-2); + --ti-lowcode-component-block-setting-item-hover-bg: var(--ti-lowcode-common-component-bg-4); + --ti-lowcode-component-block-setting-item-text-color: var(--ti-lowcode-common-text-color-7); // 区块管理 - 添加分类 - --ti-lowcode-component-block-list-add-group-btn-bg: transparent; - --ti-lowcode-component-block-list-add-group-btn-border: 1px solid var(--ti-lowcode-base-default-button-border-color); - --ti-lowcode-component-block-list-setting-btn-color: var(--ti-lowcode-base-default-button-border-hover-color); - --ti-lowcode-component-block-list-setting-btn-hover-color: var(--ti-lowcode-base-default-button-border-hover-color); - --ti-lowcode-component-block-list-add-group-btn-border-radius: 6px; + --ti-lowcode-component-block-list-add-group-btn-bg: var(--ti-lowcode-common-bg-0); + --ti-lowcode-component-block-list-add-group-btn-border: 1px solid var(--ti-lowcode-common-border-color-4); + --ti-lowcode-component-block-list-setting-btn-color: var(--ti-lowcode-common-component-bg-10); + --ti-lowcode-component-block-list-setting-btn-hover-color: var(--ti-lowcode-common-component-bg-10); + --ti-lowcode-component-block-list-add-group-btn-border-radius: var(ti-lowcode-common-radius-6); } .block-setting-content { - --ti-lowcode-block-config-form-item-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-block-config-form-item-color: var(--ti-lowcode-common-text-color-7); } // 区块设置 - 标签 .block-tag-create { - --ti-lowcode-block-config-tag-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-block-config-tag-bg: var(--ti-lowcode-input-bg); - --ti-lowcode-block-config-tag-hover-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-block-config-tag-hover-bg: #f2f2f2; - --ti-lowcode-block-config-tag-close-color: var(--ti-lowcode-toolbar-icon-color); + --ti-lowcode-block-config-tag-color: var(--ti-lowcode-common-text-color-7); + --ti-lowcode-block-config-tag-bg: var(--ti-lowcode-common-component-bg); + --ti-lowcode-block-config-tag-hover-color: var(--ti-lowcode-common-text-color-7); + --ti-lowcode-block-config-tag-hover-bg: var(--ti-lowcode-common-component-bg-26); + --ti-lowcode-block-config-tag-close-color: var(--ti-lowcode-common-close-icon-text-color-1); } diff --git a/packages/theme/light/bridge.less b/packages/theme/light/bridge.less index 2b23ddc8b..2a093bd73 100644 --- a/packages/theme/light/bridge.less +++ b/packages/theme/light/bridge.less @@ -1,11 +1,11 @@ .plugin-panel { // 资源管理 - --ti-lowcode-bridge-list-color: var(--ti-lowcode-base-gray-90); - --ti-lowcode-bridge-list-bg: var(--ti-lowcode-base-gray-10); - --ti-lowcode-birdge-editor-border-color: var(--ti-lowcode-base-gray-20); - --ti-lowcode-birdge-input-label-color: var(--ti-lowcode-base-text-color-1); + --ti-lowcode-bridge-list-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-bridge-list-bg: var(--ti-lowcode-common-component-bg-1); + --ti-lowcode-birdge-editor-border-color: var(--ti-lowcode-common-border-color-5); + --ti-lowcode-birdge-input-label-color: var(--ti-lowcode-common-text-color-8); // npm工具类中代码预览的主题 - --ti-lowcode-birdge-code-preview-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-birdge-code-preview-bg-color: #f0f0f0; + --ti-lowcode-birdge-code-preview-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-birdge-code-preview-bg-color: var(--ti-lowcode-common-component-bg-5); } diff --git a/packages/theme/light/canvas.less b/packages/theme/light/canvas.less index 1342c9457..b0547e165 100644 --- a/packages/theme/light/canvas.less +++ b/packages/theme/light/canvas.less @@ -1,26 +1,27 @@ #canvas-wrap { - --ti-lowcode-canvas-rect-border-color: var(--ti-lowcode-base-primary-color-2); - --ti-lowcode-canvas-hover-line-in-bg-color: rgba(0, 255, 0, 0.1); - --ti-lowcode-canvas-hover-line-forbid-bg-color: var(--ti-lowcode-base-error-color); - --ti-lowcode-canvas-hover-line-in-forbid-bg-color: rgba(242, 48, 48, 0.3); - --ti-lowcode-canvas-choose-slot-border-color: var(--ti-lowcode-base-text-color-2); - --ti-lowcode-canvas-choose-slot-color: var(--ti-lowcode-base-text-color-2); - --ti-lowcode-canvas-corner-mark-left-color: var(--ti-lowcode-base-text-color-2); - --ti-lowcode-canvas-corner-mark-bottom-right-color: var(--ti-lowcode-base-text-color-3); - --ti-lowcode-canvas-corner-mark-bottom-right-border-color: #c2c2c2; - --ti-lowcode-canvas-corner-mark-bottom-right-bg-color: #f5f5f5; - --ti-lowcode-canvas-corner-mark-right-color: var(--ti-lowcode-base-gray-0); - --ti-lowcode-canvas-corner-mark-right-bg-color: var(--ti-lowcode-base-primary-color-2); - --ti-lowcode-canvas-select-corner-mark-left-color: var(--ti-lowcode-base-gray-0); - --ti-lowcode-canvas-select-corner-mark-left-bg-color: var(--ti-lowcode-base-primary-color-2); + --ti-lowcode-canvas-rect-border-color: var(--ti-lowcode-common-border-color-6); + --ti-lowcode-canvas-hover-line-in-bg-color: var(--ti-lowcode-common-component-bg-6); + --ti-lowcode-canvas-hover-line-forbid-bg-color: var(--ti-lowcode-common-component-bg-7); + --ti-lowcode-canvas-hover-line-in-forbid-bg-color: var(--ti-lowcode-common-component-bg-8); - --ti-lowcode-canvas-footer-border-top-color: var(--ti-lowcode-common-border-color-4); // canvas 底部面包屑 边框色 + --ti-lowcode-canvas-choose-slot-border-color: var(--ti-lowcode-common-border-color-6); + --ti-lowcode-canvas-choose-slot-color: var(--ti-lowcode-common-text-color-7); + --ti-lowcode-canvas-corner-mark-left-color: var(--ti-lowcode-common-text-color-7); + --ti-lowcode-canvas-corner-mark-bottom-right-color: var(--ti-lowcode-common-text-color-5); + --ti-lowcode-canvas-corner-mark-bottom-right-border-color: var(--ti-lowcode-common-border-color-4); + --ti-lowcode-canvas-corner-mark-bottom-right-bg-color: var(--ti-lowcode-common-component-bg-1); + --ti-lowcode-canvas-corner-mark-right-color: var(--ti-lowcode-common-text-color-3); + --ti-lowcode-canvas-corner-mark-right-bg-color: var(--ti-lowcode-common-component-bg-9); + --ti-lowcode-canvas-select-corner-mark-left-color: var(--ti-lowcode-common-text-color-3); + --ti-lowcode-canvas-select-corner-mark-left-bg-color: var(--ti-lowcode-common-component-bg-9); + + --ti-lowcode-canvas-footer-border-top-color: var(--ti-lowcode-common-border-color-1); // canvas 底部面包屑 边框色 --ti-lowcode-canvas-tab-handle-bg: var(--ti-lowcode-common-secondary-text-color); // canvas 宽度拖动手柄 背景色 --ti-lowcode-canvas-tab-handle-hover-bg: var(--ti-lowcode-common-primary-color); // canvas 宽度拖动手柄 hover 背景色 --ti-lowcode-canvas-tab-handle-color: var(--ti-lowcode-common-text-color-2); // canvas 宽度拖动手柄 两条竖线颜色 --ti-lowcode-canvas-menu-bg: var(--ti-lowcode-common-component-bg); // canvas 右键菜单背景 - --ti-lowcode-canvas-menu-item-color: var(--ti-lowcode-base-gray-90); // 右键菜单文字颜色 - --ti-lowcode-canvas-menu-item-hover-bg-color: #f5f5f5; - --ti-lowcode-canvas-menu-border-color: #ddd; - --ti-lowcode-canvas-menu-item-disabled-color: var(--ti-lowcode-base-text-color-4); + --ti-lowcode-canvas-menu-item-color: var(--ti-lowcode-common-component-bg-10); // 右键菜单文字颜色 + --ti-lowcode-canvas-menu-item-hover-bg-color: var(--ti-lowcode-common-component-bg-1); + --ti-lowcode-canvas-menu-border-color: var(--ti-lowcode-common-border-color-7); + --ti-lowcode-canvas-menu-item-disabled-color: var(--ti-lowcode-common-secondary-text-color); } diff --git a/packages/theme/light/datasource.less b/packages/theme/light/datasource.less index a8d717859..6767b3276 100644 --- a/packages/theme/light/datasource.less +++ b/packages/theme/light/datasource.less @@ -1,44 +1,44 @@ :root { - --ti-lowcode-datasource-toolbar-icon-color: var(--ti-lowcode-base-gray-60); - --ti-lowcode-datasource-tabs-border-color: var(--ti-lowcode-base-gray-30); - --ti-lowcode-datasource-toolbar-breadcrumb-color: var(--ti-lowcode-base-gray-80); + --ti-lowcode-datasource-toolbar-icon-color: var(--ti-lowcode-common-text-color-8); + --ti-lowcode-datasource-tabs-border-color: var(--ti-lowcode-common-border-color-8); + --ti-lowcode-datasource-toolbar-breadcrumb-color: var(--ti-lowcode-common-dark-2); --ti-lowcode-datasource-json-border-colorr: var(--ti-lowcode-common-primary-color); - --ti-lowcode-datasource-tree-border-color: var(--ti-lowcode-base-success-color); + --ti-lowcode-datasource-tree-border-color: var(--ti-lowcode-common-border-color-9); --ti-lowcode-datasource-common-primary-color: var(--ti-lowcode-common-primary-color); - --ti-lowcode-datasource-success-border-color: var(--ti-lowcode-base-success-color); - --ti-lowcode-datasource-input-icon-color: var(--ti-lowcode-base-gray-60); - --ti-lowcode-datasource-dialog-demo-border-color: var(--ti-lowcode-base-gray-60); - --ti-lowcode-datasource-canvas-wrap-bg: var(--ti-lowcode-base-default-button-border-disable-color); - --ti-lowcode-datasource-dialog-font-color: var(--ti-lowcode-base-gray-70); - --ti-lowcode-datasource-toolbar-bg: var(--ti-lowcode-base-bg-2); - --ti-lowcode-datasource-description-error-color: var(--ti-lowcode-base-error-color); + --ti-lowcode-datasource-success-border-color: var(--ti-lowcode-common-border-color-9); + --ti-lowcode-datasource-input-icon-color: var(--ti-lowcode-common-text-color-8); + --ti-lowcode-datasource-dialog-demo-border-color: var(--ti-lowcode-common-text-color-8); + --ti-lowcode-datasource-canvas-wrap-bg: var(--ti-lowcode-common-component-bg-11); + --ti-lowcode-datasource-dialog-font-color: var(--ti-lowcode-common-text-color-9); + --ti-lowcode-datasource-toolbar-bg: var(--ti-lowcode-common-component-bg-4); + --ti-lowcode-datasource-description-error-color: var(--ti-lowcode-common-status-error); --ti-lowcode-datasource-common-text-main-color: var(--ti-lowcode-common-text-main-color); - --ti-lowcode-datasource-toolbar-more-hover-color: var(--ti-lowcode-base-gray-60); - --ti-lowcode-datasource-delete-button-hover-bg: var(--ti-lowcode-base-red-6); + --ti-lowcode-datasource-toolbar-more-hover-color: var(--ti-lowcode-common-text-color-8); + --ti-lowcode-datasource-delete-button-hover-bg: var(--ti-lowcode-common-component-bg-7); --ti-lowcode-datasource-common-text-color-5: var(--ti-lowcode-common-text-color-5); --ti-lowcode-datasource-common-empty-color: var(--ti-lowcode-common-empty-color); - --ti-lowcode-datasource-toolbar-view-hover-bg: var(--ti-lowcode-base-invalidate-color); - --ti-lowcode-datasource-common-hover-bg-1: var(--ti-lowcode-common-hover-bg-1); + --ti-lowcode-datasource-toolbar-view-hover-bg: var(--ti-lowcode-common-component-bg-27); + --ti-lowcode-datasource-common-hover-bg-1: var(--ti-lowcode-common-component-bg-25); --ti-lowcode-datasource-common-primary-text-color: var(--ti-lowcode-common-primary-text-color); - --ti-lowcode-datasource-icon-hover-bg: var(--ti-lowcode-base-invalidate-color); - --ti-lowcode-datasource-tabs-bg: var(--ti-lowcode-base-gray-20); - --ti-lowcode-datasource-canvas-handle-hover-bg: var(--ti-lowcode-base-blue-6); - --ti-lowcode-datasource-tabs-active-bg: var(--ti-lowcode-base-gray-20); + --ti-lowcode-datasource-icon-hover-bg: var(--ti-lowcode-common-component-bg-27); + --ti-lowcode-datasource-tabs-bg: var(--ti-lowcode-common-component-bg-5); + --ti-lowcode-datasource-canvas-handle-hover-bg: var(--ti-lowcode-common-component-bg-9); + --ti-lowcode-datasource-tabs-active-bg: var(--ti-lowcode-common-component-bg-5); --ti-lowcode-datasource-common-error-color: var(--ti-lowcode-common-error-color); - --ti-lowcode-datasource-description-minor-color: var(--ti-lowcode-base-gray-50); - --ti-lowcode-datasource-description-warning-color: var(--ti-lowcode-base-orange-6); - --ti-lowcode-datasource-error-tip-color: var(--ti-lowcode-base-red-6); - --ti-lowcode-datasource-label-color: var(--ti-lowcode-base-gray-60); // light + --ti-lowcode-datasource-description-minor-color: var(--ti-lowcode-common-text-color-5); + --ti-lowcode-datasource-description-warning-color: var(--ti-lowcode-common-component-bg-12); + --ti-lowcode-datasource-error-tip-color: var(--ti-lowcode-common-error-color); + --ti-lowcode-datasource-label-color: var(--ti-lowcode-common-text-color-8); // light --ti-lowcode-datasource-list-hover-color: var(--ti-lowcode-common-component-hover-bg); - --ti-lowcode-datasource-btn-click-color: var(--ti-lowcode-base-default-button-border-hover-color); - --ti-lowcode-datasource-tabs-bottom-border-color: var(--ti-lowcode-base-default-button-border-hover-color); - --ti-lowcode-datasource-list-bottom-border-color: var(--ti-lowcode-base-invalidate-color); - --ti-lowcode-datasource-switch-off-bg-color: var(--ti-lowcode-base-gray-50); - --ti-lowcode-datasource-switch-on-bg-color: var(--ti-lowcode-base-blue-6); - --ti-lowcode-datasource-modal-text-color: var(--ti-lowcode-base-gray-90); - --ti-lowcode-datasource-respones-select-color-bg: var(--ti-lowcode-base-text-link-color-3); - --ti-lowcode-datasource-respones-color-bg: var(--ti-lowcode-base-blue-6); - --ti-lowcode-datasource-respones-border-color-bg: var(--ti-lowcode-base-text-link-color-3); - --ti-lowcode-datasource-select-border-right-color-bg: var(--ti-lowcode-base-default-button-border-disable-color); + --ti-lowcode-datasource-btn-click-color: var(--ti-lowcode-common-btn-default-color); + --ti-lowcode-datasource-tabs-bottom-border-color: var(--ti-lowcode-common-btn-default-border-color); + --ti-lowcode-datasource-list-bottom-border-color: var(--ti-lowcode-common-component-bg-27); + --ti-lowcode-datasource-switch-off-bg-color: var(--ti-lowcode-common-text-color-5); + --ti-lowcode-datasource-switch-on-bg-color: var(--ti-lowcode-common-component-bg-9); + --ti-lowcode-datasource-modal-text-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-datasource-respones-select-color-bg: var(--ti-lowcode-common-component-bg); + --ti-lowcode-datasource-respones-color-bg: var(--ti-lowcode-common-component-bg-9); + --ti-lowcode-datasource-respones-border-color-bg: var(--ti-lowcode-common-component-bg); + --ti-lowcode-datasource-select-border-right-color-bg: var(--ti-lowcode-common-component-bg-11); --ti-lowcode-datasource-select-border-color: var(--ti-lowcode-common-secondary-text-color); } diff --git a/packages/theme/light/events.less b/packages/theme/light/events.less index 9191a7543..38b33abf4 100644 --- a/packages/theme/light/events.less +++ b/packages/theme/light/events.less @@ -1,38 +1,38 @@ .setting-advanced-add-custom-event-tip { - --ti-lowcode-events-add-custom-event-tips-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-event-add-custom-event-tips-highlight-color: var(--ti-lowcode-base-warn-color); + --ti-lowcode-events-add-custom-event-tips-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-event-add-custom-event-tips-highlight-color: var(--ti-lowcode-common-warning-color); } .setting-advanced-bind-event-list { - --ti-lowcode-events-bind-event-list-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-events-bind-event-list-item-disabled-color: var(--ti-lowcode-base-text-color-4); - --lowcode-events-bind-event-list-item-hover-bg-color: var(--ti-lowcode-base-bg-1); + --ti-lowcode-events-bind-event-list-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-events-bind-event-list-item-disabled-color: var(--ti-lowcode-common-gray-18); + --lowcode-events-bind-event-list-item-hover-bg-color: var(--ti-lowcode-common-component-bg-13); } .bind-action-list { - --ti-lowcode-events-bind-action-item-border-color: var(--ti-lowcode-base-split-color-1); - --ti-lowcode-events-event-bind-color: var(--ti-lowcode-base-primary-color-2); - --ti-lowcode-events-bind-action-item-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-events-bind-action-item-hover-bg-color: var(--ti-lowcode-base-bg-1); - --ti-lowcode-events-bind-action-item-linked-bg-color: var(--ti-lowcode-base-success-color); - --ti-lowcode-events-bind-action-item-linked-color: var(--ti-lowcode-base-gray-0); - --ti-lowcode-events-empty-action-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-events-empty-action-tips-strong-color: var(--ti-lowcode-base-warn-color); + --ti-lowcode-events-bind-action-item-border-color: var(--ti-lowcode-common-border-color-10); + --ti-lowcode-events-event-bind-color: var(--ti-lowcode-common-primary-color); + --ti-lowcode-events-bind-action-item-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-events-bind-action-item-hover-bg-color: var(--ti-lowcode-common-component-bg-13); + --ti-lowcode-events-bind-action-item-linked-bg-color: var(--ti-lowcode-common-status-success); + --ti-lowcode-events-bind-action-item-linked-color: var(----ti-lowcode-common-text-color-10); + --ti-lowcode-events-empty-action-color: var(--ti-lowcode-common-text-color-6); + --ti-lowcode-events-empty-action-tips-strong-color: var(--ti-lowcode-common-warning-color); } .advanced-config-container { - --ti-lowcode-events-advanced-config-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-events-advanced-label-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-events-advanced-binding-state-bg-color: var(--ti-lowcode-base-primary-color-2); - --ti-lowcode-events-advanced-binding-state-color: var(--ti-lowcode-base-gray-0); + --ti-lowcode-events-advanced-config-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-events-advanced-label-color: var(--ti-lowcode-common-text-color-6); + --ti-lowcode-events-advanced-binding-state-bg-color: var(--ti-lowcode-common-component-bg-9); + --ti-lowcode-events-advanced-binding-state-color: var(----ti-lowcode-common-text-color-10); } .bind-event-dialog-content { - --ti-lowcode-bind-event-dialog-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-bind-event-dialog-content-left-border-color: var(--ti-lowcode-base-split-color-1); - --ti-lowcode-bind-event-dialog-content-right-monaco-border-color: var(--ti-lowcode-base-split-color-1); - --ti-lowcode-bind-event-dialog-content-left-list-item-active-bg-color: var(--ti-lowcode-base-bg-1); - --ti-lowcode-bind-event-dialog-new-action-tip-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-bind-event-dialog-action-selected-icon-color: var(--ti-lowcode-base-primary-color-2); - --ti-lowcode-bind-event-dialog-mark-bg-color: var(--ti-lowcode-base-bg-1); + --ti-lowcode-bind-event-dialog-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-bind-event-dialog-content-left-border-color: var(--ti-lowcode-common-border-color-10); + --ti-lowcode-bind-event-dialog-content-right-monaco-border-color: var(--ti-lowcode-common-border-color-10); + --ti-lowcode-bind-event-dialog-content-left-list-item-active-bg-color: var(--ti-lowcode-common-component-bg-13); + --ti-lowcode-bind-event-dialog-new-action-tip-color: var(--ti-lowcode-common-text-color-6); + --ti-lowcode-bind-event-dialog-action-selected-icon-color: var(--ti-lowcode-common-primary-color); + --ti-lowcode-bind-event-dialog-mark-bg-color: var(--ti-lowcode-common-component-bg-13); } diff --git a/packages/theme/light/gpt-dialog.less b/packages/theme/light/gpt-dialog.less index 5a45c34df..620876651 100644 --- a/packages/theme/light/gpt-dialog.less +++ b/packages/theme/light/gpt-dialog.less @@ -1,51 +1,51 @@ .bind-chatgpt { // chatGPT聊天窗问题模板文字颜色 - --ti-lowcode-chat-model-text: #191919; + --ti-lowcode-chat-model-text: var(--ti-lowcode-common-primary-text-color); // chatGPT聊天窗问题模板文字边框颜色 - --ti-lowcode-chat-model-text-border: #cbcbcb; + --ti-lowcode-chat-model-text-border: var(--ti-lowcode-common-text-color-11); // chatGPT聊天窗提问框图标 - --ti-lowcode-chat-model-input-icon: #999999; + --ti-lowcode-chat-model-input-icon: var(--ti-lowcode-common-gray-49); // chatGPT聊天窗用户头像边框色 - --ti-lowcode-chat-model-avatar-border: #dfe1e6; + --ti-lowcode-chat-model-avatar-border: var(--ti-lowcode-common-border-color-1); // chatGPT聊天窗AI聊天文字背景 - --ti-lowcode-chat-model-ai-text-bg: #1476ff; + --ti-lowcode-chat-model-ai-text-bg: var(--ti-lowcode-common-component-bg-9); // chatGPT聊天窗AI聊天文字背景边框 - --ti-lowcode-chat-model-ai-text-border: #1476ff; + --ti-lowcode-chat-model-ai-text-border: var(--ti-lowcode-common-border-color-6); // chatGPT聊天窗AI聊天文字 - --ti-lowcode-chat-model-ai-text: #ffffff; + --ti-lowcode-chat-model-ai-text: var(--ti-lowcode-common-text-color-12); // chatGPT聊天窗AI连接失败文字背景 - --ti-lowcode-chat-model-ai-fail-text-bg: #feeaeb; + --ti-lowcode-chat-model-ai-fail-text-bg: var(--ti-lowcode-common-component-bg-14); // chatGPT聊天窗AI连接失败文字背景边框 - --ti-lowcode-chat-model-ai-fail-text-border: #dc544f; + --ti-lowcode-chat-model-ai-fail-text-border: var(--ti-lowcode-common-border-color-11); // chatGPT聊天窗AI连接失败文字 - --ti-lowcode-chat-model-ai-fail-text: #191919; + --ti-lowcode-chat-model-ai-fail-text: var(--ti-lowcode-common-primary-text-color); // chatGPT聊天窗用户聊天文字背景 - --ti-lowcode-chat-model-user-text-bg: #fafafa; + --ti-lowcode-chat-model-user-text-bg: var(--ti-lowcode-common-component-bg-4); // chatGPT聊天窗用户聊天文字边框 - --ti-lowcode-chat-model-user-text-border: #dbdbdb; + --ti-lowcode-chat-model-user-text-border: var(--ti-lowcode-common-border-color-8); // chatGPT聊天窗用户聊天文字 - --ti-lowcode-chat-model-user-text: #191919; + --ti-lowcode-chat-model-user-text: var(--ti-lowcode-common-primary-text-color); // chatGPT聊天窗标题文字 - --ti-lowcode-chat-model-title: #333333; + --ti-lowcode-chat-model-title: var(--ti-lowcode-common-text-color-9); // chatGPT聊天窗基础图标 - --ti-lowcode-chat-model-common-icon: #8a887b; + --ti-lowcode-chat-model-common-icon: var(--ti-lowcode-common-gray-50); // chatGPT聊天窗输入框背景 - --ti-lowcode-chat-model-input-bg: #eeeeee; + --ti-lowcode-chat-model-input-bg: var(--ti-lowcode-common-component-bg-15); // chatGPT聊天窗发送按钮背景 - --ti-lowcode-chat-model-button-bg: #1476ff; + --ti-lowcode-chat-model-button-bg: var(--ti-lowcode-common-component-bg-9); // chatGPT聊天窗发送按钮边框 - --ti-lowcode-chat-model-button-border: #1476ff; + --ti-lowcode-chat-model-button-border: var(--ti-lowcode-common-border-color-6); // chatGPT聊天窗发送按钮文字 - --ti-lowcode-chat-model-button-text: #ffffff; + --ti-lowcode-chat-model-button-text: var(--ti-lowcode-common-text-color-3); // chatGPT加载 --ti-lowcode-chat-loading-svg-color: var(--ti-lowcode-common-primary-color); - --ti-lowcode-chat-loading-text-color: #595959; + --ti-lowcode-chat-loading-text-color: var(--ti-lowcode-common-text-color-6); } .chat-model-popover { - --ti-lowcode-chat-model-popover-bg: #fff; - --ti-lowcode-chat-model-popover-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-chat-model-popover-active-bg: #fff; - --ti-lowcode-chat-model-popover-active-color: var(--ti-lowcode-base-text-color-2); + --ti-lowcode-chat-model-popover-bg: var(--ti-lowcode-common-component-bg); + --ti-lowcode-chat-model-popover-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-chat-model-popover-active-bg: var(--ti-lowcode-common-component-bg); + --ti-lowcode-chat-model-popover-active-color: var(--ti-lowcode-common-primary-color); } diff --git a/packages/theme/light/help.less b/packages/theme/light/help.less index e53a7e3e8..126522387 100644 --- a/packages/theme/light/help.less +++ b/packages/theme/light/help.less @@ -1,15 +1,15 @@ .shepherd-modal-overlay-container, .tiny-guide { - --ti-lowcode-help-guide-content-text-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-help-guide-title-text-color: var(--ti-lowcode-base-primary-color-1); - --ti-lowcode-help-guide-progress-style-text-color: var(--ti-lowcode-base-primary-color-1); - --ti-lowcode-help-guide-mask-bg-color: inherit; + --ti-lowcode-help-guide-content-text-color: var(--ti-lowcode-common-text-color-8); + --ti-lowcode-help-guide-title-text-color: var(----ti-lowcode-common-primary-text-color); + --ti-lowcode-help-guide-progress-style-text-color: var(----ti-lowcode-common-primary-text-color); + --ti-lowcode-help-guide-mask-bg-color: var(--ti-lowcode-common-component-bg-16); } .help-plugin-box { - --ti-lowcode-help-box-bg-color: #ffffff; - --ti-lowcode-help-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2); - --ti-lowcode-help-box-title-text-color: #191919; - --ti-lowcode-help-box-item-text-color: #191919; - --ti-lowcode-help-box-question-border-top: #ebebeb; - --ti-lowcode-help-box-question-item-text-color: #1476ff; + --ti-lowcode-help-box-bg-color: var(--ti-lowcode-common-component-bg-2); + --ti-lowcode-help-box-shadow: 0px 2px 6px 0px var(--ti-lowcode-common-rgba-1); + --ti-lowcode-help-box-title-text-color: var(----ti-lowcode-common-primary-text-color); + --ti-lowcode-help-box-item-text-color: var(----ti-lowcode-common-primary-text-color); + --ti-lowcode-help-box-question-border-top: var(--ti-lowcode-common-border-color-12); + --ti-lowcode-help-box-question-item-text-color: var(--ti-lowcode-common-primary-color); } diff --git a/packages/theme/light/i18n.less b/packages/theme/light/i18n.less index 6b8db462c..52f419087 100644 --- a/packages/theme/light/i18n.less +++ b/packages/theme/light/i18n.less @@ -1,8 +1,8 @@ :root { // 国际化表格操作图标颜色 - --ti-lowcode-i18n-operate-svg-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-i18n-operate-svg-color: var(--ti-lowcode-common-primary-text-color); // 国际化表格加载中字体颜色 - --ti-lowcode-i18n-loading-text-color: #999999; + --ti-lowcode-i18n-loading-text-color: var(--ti-lowcode-common-gray-49); // 国际化表格加载中图标颜色 - --ti-lowcode-i18n-loading-svg-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-i18n-loading-svg-color: var(--ti-lowcode-common-primary-text-color); } diff --git a/packages/theme/light/index.less b/packages/theme/light/index.less index eef6cef06..54cb05456 100644 --- a/packages/theme/light/index.less +++ b/packages/theme/light/index.less @@ -1,6 +1,5 @@ @import '../common/base.less'; @import '../common/global.less'; -@import './base.less'; // 主题配置优先于公共配置 @import './variable.less'; @import './tutorial.less'; diff --git a/packages/theme/light/life-cycles.less b/packages/theme/light/life-cycles.less index ff5e86f54..2c3370017 100644 --- a/packages/theme/light/life-cycles.less +++ b/packages/theme/light/life-cycles.less @@ -1,7 +1,7 @@ :root { // 生命周期 - --ti-lowcode-life-cycle-alert-color: inherit; - --ti-lowcode-life-cycle-item-hover-bg: var(--ti-lowcode-common-hover-bg-1); - --ti-lowcode-life-cycle-item-disable-color: var(--ti-lowcode-base-text-link-color-2); - --ti-lowcode-life-cycle-editor-border: var(--ti-lowcode-base-default-button-border-color); + --ti-lowcode-life-cycle-alert-color: var(--ti-lowcode-common-text-color-13); + --ti-lowcode-life-cycle-item-hover-bg: var(--ti-lowcode-common-component-bg-25); + --ti-lowcode-life-cycle-item-disable-color: var(--ti-lowcode-common-gray-18); + --ti-lowcode-life-cycle-editor-border: var(--ti-lowcode-common-border-color-4); } diff --git a/packages/theme/light/materials.less b/packages/theme/light/materials.less index eb46f29a3..9fd19be4e 100644 --- a/packages/theme/light/materials.less +++ b/packages/theme/light/materials.less @@ -1,12 +1,12 @@ :root { // 带边框的图标按钮边框颜色 - --ti-lowcode-materials-border-icon-border-color: var(--ti-lowcode-base-default-button-border-color); + --ti-lowcode-materials-border-icon-border-color: var(--ti-lowcode-common-gray-18); // 带边框的图标按钮图标颜色 - --ti-lowcode-materials-border-icon-svg-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-materials-border-icon-svg-color: var(--ti-lowcode-common-svg-button-color); // 带边框的图标按钮悬浮边框颜色 - --ti-lowcode-materials-border-icon-border-color-hover: var(--ti-lowcode-base-default-button-border-hover-color); + --ti-lowcode-materials-border-icon-border-color-hover: var(--ti-lowcode-common-btn-default-border-color); // 带边框的图标按钮背景颜色 - --ti-lowcode-materials-border-icon-bg-color: var(--ti-lowcode-base-bg-5); + --ti-lowcode-materials-border-icon-bg-color: var(--ti-lowcode-common-component-bg-2); // 区块分组下拉选项下边框颜色 --ti-lowcode-materials-block-group-item-border-color: var(--ti-lowcode-common-primary-text-color); // 添加区块筛选模块字体颜色 @@ -18,7 +18,7 @@ // 添加区块筛选模块选中字体颜色 --ti-lowcode-materials-block-filter-selected-text-color: var(--ti-lowcode-common-primary-text-color); // 添加区块穿梭框面板头部背景颜色 - --ti-lowcode-materials-block-transfer-header-bg-color: var(--ti-lowcode-base-bg); + --ti-lowcode-materials-block-transfer-header-bg-color: var(--ti-lowcode-common-component-bg-1); // 区块分组添加区块筛选项 hover 颜色 --ti-lowcode-materials-block-filter-hover-color: var(--ti-lowcode-common-primary-text-color); // 组件列表 组件名称颜色 diff --git a/packages/theme/light/metaComponent.less b/packages/theme/light/metaComponent.less index 58e4b9bc9..8b87a10a6 100644 --- a/packages/theme/light/metaComponent.less +++ b/packages/theme/light/metaComponent.less @@ -1,65 +1,63 @@ :root { // MetaListItem - --ti-lowcode-meta-list-item-bg-color: var(--ti-lowcode-base-bg-5); - --ti-lowcode-meta-list-item-border-color: rgba(0, 0, 0, 0.08); + --ti-lowcode-meta-list-item-bg-color: var(--ti-lowcode-common-component-bg-2); + --ti-lowcode-meta-list-item-border-color: var(--ti-lowcode-common-border-color-10); // - --ti-lowcode-meta-list-top-color: var(--ti-lowcode-base-text-color-1); + --ti-lowcode-meta-list-top-color: var(--ti-lowcode-common-text-color-8); // MetaJsSlot - --lowcode-meta-js-slot-color: var(--ti-lowcode-base-text-color-1); + --lowcode-meta-js-slot-color: var(--ti-lowcode-common-text-color-8); // MetaCodeEditor - --ti-lowcode-meta-codeEditor-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-codeEditor-hover-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-codeEditor-border-color: var(--ti-lowcode-base-default-button-border-color); - --ti-lowcode-meta-codeEditor-border-hover-color: var(--ti-lowcode-base-default-button-border-hover-color); + --ti-lowcode-meta-codeEditor-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-meta-codeEditor-hover-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-meta-codeEditor-border-color: var(--ti-lowcode-common-border-color-4); + --ti-lowcode-meta-codeEditor-border-hover-color: var(--ti-lowcode-common-btn-default-border-color); } // config-item label popover tips .prop-label-tips-container { - --ti-lowcode-meta-config-item-label-tips-desc-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-meta-config-item-label-tips-title-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-meta-config-item-label-tips-desc-color: var(--ti-lowcode-common-text-color-8); + --ti-lowcode-meta-config-item-label-tips-title-color: var(--ti-lowcode-common-primary-text-color); } // configItem .properties-item { - --ti-lowcode-meta-config-item-error-tips-color: var(--ti-lowcode-base-error-color); - --ti-lowcode-meta-config-item-label-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-config-item-bind-color: var(--ti-lowcode-base-gray-0); - --ti-lowcode-meta-config-item-bind-bg: var(--ti-lowcode-base-primary-color-2); + --ti-lowcode-meta-config-item-error-tips-color: var(--ti-lowcode-common-status-error); + --ti-lowcode-meta-config-item-label-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-meta-config-item-bind-color: var(--ti-lowcode-common-text-color-3); + --ti-lowcode-meta-config-item-bind-bg: var(--ti-lowcode-common-component-bg-9); - --ti-lowcode-meta-config-item-active-bg: var(--ti-lowcode-common-hover-bg-1); - --ti-lowcode-meta-config-item-link-color: var(--ti-lowcode-base-text-color-2); + --ti-lowcode-meta-config-item-active-bg: var(--ti-lowcode-common-component-bg-25); + --ti-lowcode-meta-config-item-link-color: var(--ti-lowcode-common-primary-color); } // MetaBindVariable .meta-bind-variable-dialog-box { - --ti-lowcode-meta-bind-variable-icon-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-bind-variable-icon-hover-bg-color: var(--ti-lowcode-base-bg-1); - --ti-lowcode-meta-bind-variable-content-left-title-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-bind-variable-content-right-title-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-bind-variable-list-wrap-border-color: var(--ti-lowcode-base-default-button-border-color); - --ti-lowcode-meta-bind-variable-content-left-list-border-right-color: var( - --ti-lowcode-base-default-button-border-color - ); - --ti-lowcode-meta-bind-variable-list-item-hover-bg-color: var(--ti-lowcode-base-bg-1); - --ti-lowcode-meta-bind-variable-item-selected-bg-color: var(--ti-lowcode-base-bg-1); - --ti-lowcode-meta-bind-variable-item-hover-bg-color: var(--ti-lowcode-base-bg-1); - --ti-lowcode-meta-bind-variable-bottom-border-color: var(--ti-lowcode-base-default-button-border-color); - --ti-lowcode-meta-bind-variable-top-border-color: var(--ti-lowcode-base-default-button-border-color); - --ti-lowcode-meta-bind-variable-bottom-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-meta-bind-variable-content-left-list-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-bind-variable-item-text-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-bind-variable-header-alert-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-bind-variable-top-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-meta-bind-variable-icon-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-meta-bind-variable-icon-hover-bg-color: var(--ti-lowcode-common-component-bg-13); + --ti-lowcode-meta-bind-variable-content-left-title-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-meta-bind-variable-content-right-title-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-meta-bind-variable-list-wrap-border-color: var(--ti-lowcode-common-border-color-4); + --ti-lowcode-meta-bind-variable-content-left-list-border-right-color: var(--ti-lowcode-common-border-color-4); + --ti-lowcode-meta-bind-variable-list-item-hover-bg-color: var(--ti-lowcode-common-component-bg-13); + --ti-lowcode-meta-bind-variable-item-selected-bg-color: var(--ti-lowcode-common-component-bg-13); + --ti-lowcode-meta-bind-variable-item-hover-bg-color: var(--ti-lowcode-common-component-bg-13); + --ti-lowcode-meta-bind-variable-bottom-border-color: var(--ti-lowcode-common-border-color-4); + --ti-lowcode-meta-bind-variable-top-border-color: var(--ti-lowcode-common-border-color-4); + --ti-lowcode-meta-bind-variable-bottom-color: var(--ti-lowcode-common-text-color-8); + --ti-lowcode-meta-bind-variable-content-left-list-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-meta-bind-variable-item-text-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-meta-bind-variable-header-alert-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-meta-bind-variable-top-color: var(--ti-lowcode-common-primary-text-color); } // MetaCodeEditor .meta-code-editor-dialog-box { - --ti-lowcode-meta-code-editor-header-tips-container-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-code-editor-header-collapse-icon-color: var(--ti-lowcode-base-gray-50); - --ti-lowcode-meta-code-editor-header-collapse-icon-hover-color: var(--ti-lowcode-base-gray-90); - --ti-lowcode-meta-code-editor-header-tips-demo-bg-color: var(--ti-lowcode-base-gray-5); - --ti-lowcode-meta-code-editor-header-tips-demo-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-code-editor-source-code-content-border-color: var(--ti-lowcode-base-gray-40); - --ti-lowcode-meta-code-editor-err-msg-color: var(--ti-lowcode-base-error-color); + --ti-lowcode-meta-code-editor-header-tips-container-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-meta-code-editor-header-collapse-icon-color: var(--ti-lowcode-common-text-color-5); + --ti-lowcode-meta-code-editor-header-collapse-icon-hover-color: var(--ti-lowcode-common-component-bg-10); + --ti-lowcode-meta-code-editor-header-tips-demo-bg-color: var(--ti-lowcode-common-component-bg-4); + --ti-lowcode-meta-code-editor-header-tips-demo-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-meta-code-editor-source-code-content-border-color: var(--ti-lowcode-common-border-color-13); + --ti-lowcode-meta-code-editor-err-msg-color: var(--ti-lowcode-common-status-error); } diff --git a/packages/theme/light/pageManage.less b/packages/theme/light/pageManage.less index e9caec3ac..cacebda54 100644 --- a/packages/theme/light/pageManage.less +++ b/packages/theme/light/pageManage.less @@ -1,26 +1,26 @@ :root { - --ti-lowcode-page-manage-title-background-text-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-page-manage-tip-border-color: var(--ti-lowcode-base-gray-50); + --ti-lowcode-page-manage-title-background-text-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-page-manage-tip-border-color: var(--ti-lowcode-common-border-color-14); --ti-lowcode-page-manage-tree-text-background-color: var(--ti-lowcode-common-bg-8); --ti-lowcode-page-manage-tree-node-background-color: var(--ti-lowcode-common-component-bg); - --ti-lowcode-page-manage-tip-color: var(--ti-lowcode-base-gray-90); + --ti-lowcode-page-manage-tip-color: var(--ti-lowcode-common-primary-text-color); --ti-lowcode-page-manage-input-background-color: var(--ti-lowcode-common-bg-9); --ti-lowcode-page-manage-input-border-color: var(--ti-lowcode-common-text-color-4); --ti-lowcode-page-manage-tips-icon-color: var(--ti-lowcode-common-primary-color); --ti-lowcode-page-manage-content-tips-color: var(--ti-lowcode-common-text-color-5); - --ti-lowcode-page-manage-search-border-color: var(--ti-lowcode-base-gray-30); + --ti-lowcode-page-manage-search-border-color: var(--ti-lowcode-common-border-color-8); --ti-lowcode-page-manage-tree-color: var(--ti-lowcode-common-text-main-color); --ti-lowcode-page-manage-page-tree-background-active-color: var(--ti-lowcode-common-component-hover-bg); --ti-lowcode-page-manage-page-tree-background-hover-color: var(--ti-lowcode-common-component-hover-bg); - --ti-lowcode-page-manage-svg-hover-color: var(--ti-lowcode-base-bg-3); - --ti-lowcode-page-manage-text-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-page-manage-input-head-text-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-page-manage-btn-text-color: var(--ti-lowcode-base-gray-50); + --ti-lowcode-page-manage-svg-hover-color: var(--ti-lowcode-common-component-bg-10); + --ti-lowcode-page-manage-text-color: var(--ti-lowcode-common-text-color-8); + --ti-lowcode-page-manage-input-head-text-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-page-manage-btn-text-color: var(--ti-lowcode-common-border-color-14); --ti-lowcode-page-manage-btn-text-color-2: var(--ti-lowcode-common-text-color-5); --ti-lowcode-page-manage-error-color: var(--ti-lowcode-common-error-color); - --ti-lowcode-page-manage-input-group-color: var(--ti-lowcode-base-bg-5); - --ti-lowcode-page-manage-input-group-border-color: var(--ti-lowcode-base-default-button-border-color); + --ti-lowcode-page-manage-input-group-color: var(--ti-lowcode-common-component-bg-2); + --ti-lowcode-page-manage-input-group-border-color: var(--ti-lowcode-common-border-color-4); --ti-lowcode-page-manage-input-group-border-right-color: var(--ti-lowcode-common-component-hover-bg); - --ti-lowcode-page-manage-input-output-text-color: var(--ti-lowcode-base-gray-60); - --ti-lowcode-page-manage-input-output-text-bg-color: var(--ti-lowcode-base-blue-6); + --ti-lowcode-page-manage-input-output-text-color: var(--ti-lowcode-common-text-color-8); + --ti-lowcode-page-manage-input-output-text-bg-color: var(--ti-lowcode-common-component-bg-9); } diff --git a/packages/theme/light/plugin-js.less b/packages/theme/light/plugin-js.less index ad512cd92..8d1f6626e 100644 --- a/packages/theme/light/plugin-js.less +++ b/packages/theme/light/plugin-js.less @@ -1,7 +1,7 @@ // 页面JS 插件面板 .plugin-page-js-container { - --ti-lowcode-plugin-js-bg: var(--ti-lowcode-base-gray-0); - --ti-lowcode-plugin-js-head-border-bottom-color: var(--ti-lowcode-base-split-color-1); - --ti-lowcode-code-edit-content-border-color: var(--ti-lowcode-base-gray-40); - --ti-lowcode-plugin-js-help-link-color: var(--ti-lowcode-base-primary-color-2); + --ti-lowcode-plugin-js-bg: var(--ti-lowcode-common-component-bg-2); + --ti-lowcode-plugin-js-head-border-bottom-color: var(--ti-lowcode-common-border-color-10); + --ti-lowcode-code-edit-content-border-color: var(--ti-lowcode-common-border-color-4); + --ti-lowcode-plugin-js-help-link-color: var(--ti-lowcode-common-primary-color); } diff --git a/packages/theme/light/setting-style.less b/packages/theme/light/setting-style.less index 4afe8bfe8..ff832f87e 100644 --- a/packages/theme/light/setting-style.less +++ b/packages/theme/light/setting-style.less @@ -1,8 +1,8 @@ :root { - --ti-lowcode-setting-style-input-bg: var(--ti-lowcode-base-blue-6); - --ti-lowcode-setting-style-font-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-setting-style-input-font-color: var(--ti-lowcode-base-gray-0); - --ti-lowcode-setting-style-btn-font-color: var(--ti-lowcode-base-gray-50); - --ti-lowcode-setting-style-btn-border-color: var(--ti-lowcode-base-gray-90); - --ti-lowcode-setting-style-title-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-setting-style-input-bg: var(--ti-lowcode-common-component-bg-9); + --ti-lowcode-setting-style-font-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-setting-style-input-font-color: var(--ti-lowcode-common-text-color-3); + --ti-lowcode-setting-style-btn-font-color: var(--ti-lowcode-common-text-color-5); + --ti-lowcode-setting-style-btn-border-color: var(--ti-lowcode-common-border-color-15); + --ti-lowcode-setting-style-title-color: var(--ti-lowcode-common-primary-text-color); } diff --git a/packages/theme/light/settings.less b/packages/theme/light/settings.less index 6bd21cb73..730c007cf 100644 --- a/packages/theme/light/settings.less +++ b/packages/theme/light/settings.less @@ -1,46 +1,46 @@ // 右侧属性面板 css 变量 #tiny-right-panel { - --ti-lowcode-setting-panel-bg-color: var(--ti-lowcode-base-bg-5); - --ti-lowcode-setting-panel-tabs-item-title-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-setting-panel-tabs-item-title-active-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-setting-panel-tabs-item-title-hover-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-setting-panel-bg-color: var(--ti-lowcode-common-component-bg-2); + --ti-lowcode-setting-panel-tabs-item-title-color: var(--ti-lowcode-common-text-color-6); + --ti-lowcode-setting-panel-tabs-item-title-active-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-setting-panel-tabs-item-title-hover-color: var(--ti-lowcode-common-primary-text-color); // 插件设置面板左侧边框 - --ti-lowcode-plugin-setting-panel-border-left-color: var(--ti-lowcode-common-border-color-4); + --ti-lowcode-plugin-setting-panel-border-left-color: var(--ti-lowcode-common-border-color-1); } // 属性面板-属性-区块关联属性-新建区块属性popover .block-new-attr-popover { - --ti-lowcode-attr-popover-menu-item-hover-bg-color: var(--ti-lowcode-base-bg-1); - --ti-lowcode-attr-popover-menu-item-link-item-bg-color: var(--ti-lowcode-base-primary-color-2); - --ti-lowcode-attr-popover-menu-item-link-item-color: var(--ti-lowcode-base-gray-0); - --ti-lowcode-attr-popover-menu-item-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-attr-popover-menu-item-hover-bg-color: var(--ti-lowcode-common-component-bg-13); + --ti-lowcode-attr-popover-menu-item-link-item-bg-color: var(--ti-lowcode-common-component-bg-9); + --ti-lowcode-attr-popover-menu-item-link-item-color: var(--ti-lowcode-common-text-color-3); + --ti-lowcode-attr-popover-menu-item-color: var(--ti-lowcode-common-primary-text-color); } // 属性面板-属性-区块关联属性 icon .block-link-field { - --ti-lowcode-block-link-field-link-icon-color: var(--ti-lowcode-base-gray-0); - --ti-lowcode-block-link-field-link-icon-bg-color: var(--ti-lowcode-base-success-color); + --ti-lowcode-block-link-field-link-icon-color: var(--ti-lowcode-common-text-color-3); + --ti-lowcode-block-link-field-link-icon-bg-color: var(--ti-lowcode-common-status-success); } .className-container { - --ti-lowcode-className-selector-container-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-className-selector-container-error-border-color: var(--ti-lowcode-base-error-color); - --ti-lowcode-className-selector-container-error-bg-color: rgba(242, 48, 48, 0.1); - --ti-lowcode-className-selector-error-tips-color: var(--ti-lowcode-base-error-color); - --ti-lowcode-className-selector-container-border-color: var(--ti-lowcode-base-gray-40); - --ti-lowcode-className-selector-container-hover-border-color: var(--ti-lowcode-base-gray-90); - --ti-lowcode-className-selector-container-empty-tips-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-className-selector-container-label-bg-color: rgba(20, 118, 255, 0.1); - --ti-lowcode-className-selector-container-label-color: var(--ti-lowcode-base-primary-color-2); - --ti-lowcode-className-selector-container-option-btn-color: var(--ti-lowcode-base-primary-color-2); - --ti-lowcode-className-selector-dropdown-list-bg-color: var(--ti-lowcode-base-gray-0); - --ti-lowcode-className-selector-dropdown-list-item-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-className-selector-dropdown-list-item-active-bg-color: var(--ti-lowcode-base-gray-20); - --ti-lowcode-className-selector-title-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-className-selector-dropdown-list-tips-color: var(--ti-lowcode-base-text-color-3); + --ti-lowcode-className-selector-container-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-className-selector-container-error-border-color: var(--ti-lowcode-common-status-error); + --ti-lowcode-className-selector-container-error-bg-color: var(--ti-lowcode-common-component-bg-17); + --ti-lowcode-className-selector-error-tips-color: var(--ti-lowcode-common-status-error); + --ti-lowcode-className-selector-container-border-color: var(--ti-lowcode-common-border-color-13); + --ti-lowcode-className-selector-container-hover-border-color: var(--ti-lowcode-common-border-color-15); + --ti-lowcode-className-selector-container-empty-tips-color: var(--ti-lowcode-common-text-color-6); + --ti-lowcode-className-selector-container-label-bg-color: var(--ti-lowcode-common-component-bg-18); + --ti-lowcode-className-selector-container-label-color: var(--ti-lowcode-common-primary-color); + --ti-lowcode-className-selector-container-option-btn-color: var(--ti-lowcode-common-primary-color); + --ti-lowcode-className-selector-dropdown-list-bg-color: var(--ti-lowcode-common-component-bg); + --ti-lowcode-className-selector-dropdown-list-item-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-className-selector-dropdown-list-item-active-bg-color: var(--ti-lowcode-common-component-bg-5); + --ti-lowcode-className-selector-title-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-className-selector-dropdown-list-tips-color: var(--ti-lowcode-common-text-color-5); } :root { - --ti-lowcode-className-selector-del-popover-bg-color: var(--ti-lowcode-base-bg-5); - --ti-lowcode-className-selector-del-popover-title-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-className-selector-del-popover-bg-color: var(--ti-lowcode-common-component-bg-2); + --ti-lowcode-className-selector-del-popover-title-color: var(--ti-lowcode-common-primary-text-color); } diff --git a/packages/theme/light/toolbar.less b/packages/theme/light/toolbar.less index 5e60484bd..d9b07056d 100644 --- a/packages/theme/light/toolbar.less +++ b/packages/theme/light/toolbar.less @@ -1,6 +1,6 @@ .tiny-engine-toolbar { // 头部工具栏 - --ti-lowcode-toolbar-border-bottom-color: var(--ti-lowcode-common-border-color-4); + --ti-lowcode-toolbar-border-bottom-color: var(--ti-lowcode-common-border-color-1); --ti-lowcode-toolbar-media-bg: var(--ti-lowcode-common-component-bg); --ti-lowcode-toolbar-media-setting-border-color: var(--ti-lowcode-common-border-color-1); --ti-lowcode-toolbar-title-color: var(--ti-lowcode-base-gray-90); diff --git a/packages/theme/light/tutorial.less b/packages/theme/light/tutorial.less index 45404b2f6..6c909e441 100644 --- a/packages/theme/light/tutorial.less +++ b/packages/theme/light/tutorial.less @@ -1,5 +1,5 @@ #tiny-engine-left-panel { - --ti-lowcode-tutorial-primary-text-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-tutorial-primary-bg-color: var(--ti-lowcode-base-bg-5); - --ti-lowcode-tutorial-hover-bg-color: var(--ti-lowcode-base-bg); + --ti-lowcode-tutorial-primary-text-color: var(--ti-lowcode-common-text-color-8); + --ti-lowcode-tutorial-primary-bg-color: var(--ti-lowcode-common-component-bg-2); + --ti-lowcode-tutorial-hover-bg-color: var(--ti-lowcode-common-component-bg-1); } diff --git a/packages/theme/light/variable.less b/packages/theme/light/variable.less index d505f8855..e5cc438c7 100644 --- a/packages/theme/light/variable.less +++ b/packages/theme/light/variable.less @@ -5,10 +5,12 @@ // 插件面板 --ti-lowcode-plugin-panel-title-color: var(--ti-lowcode-common-text-title-color); // 插件面板标题色 - --ti-lowcode-plugin-panel-title-font-weight: 700; // 插件面板标题加粗效果 + --ti-lowcode-plugin-panel-title-font-weight: var(--ti-lowcode-common-font-weight-normal); // 插件面板标题加粗效果 --ti-lowcode-plugin-panel-bg: var(--ti-lowcode-common-component-bg); // 插件面板背景色 - --ti-lowcode-plugin-panel-border-right-color: var(--ti-lowcode-common-border-color-4); // 插件面板右侧边框色 - --ti-lowcode-plugin-panel-header-border-bottom-color: #ebebeb; // 插件面板头部区域底部边框线颜色 + --ti-lowcode-plugin-panel-border-right-color: var(--ti-lowcode-common-border-color-1); // 插件面板右侧边框色 + --ti-lowcode-plugin-panel-header-border-bottom-color: var( + --ti-lowcode-common-border-color-12 + ); // 插件面板头部区域底部边框线颜色 // 插件设置面板 --ti-lowcode-plugin-setting-panel-bg: var(--ti-lowcode-common-component-bg); // 插件设置面板背景色 @@ -19,11 +21,11 @@ // ------ 各个模块的主题色，前缀为 --ti-lowcode-模块名 ------- - --ti-lowcode-design-plugin-color: var(--ti-lowcode-base-gray-90); - --ti-lowcode-design-toolbar-icon-color: #8a8e99; + --ti-lowcode-design-plugin-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-design-toolbar-icon-color: var(--ti-lowcode-common-text-color-14); // 物料-组件列表 - --ti-lowcode-material-component-list-border-color: var(--ti-lowcode-common-border-color-4); + --ti-lowcode-material-component-list-border-color: var(--ti-lowcode-common-border-color-1); --ti-lowcode-material-component-list-hover-bg: var(--ti-lowcode-common-component-hover-bg); // 页面管理 @@ -36,337 +38,332 @@ // 状态管理 --ti-lowcode-data-list-color: var(--ti-lowcode-common-text-main-color); // 状态管理面板头部的底部边框色 - --ti-lowcode-data-header-border-bottom-color: var(--ti-lowcode-common-border-color-4); + --ti-lowcode-data-header-border-bottom-color: var(--ti-lowcode-common-border-color-1); // 状态管理示例背景色 --ti-lowcode-data-example-bg-color: var(--ti-lowcode-common-gray-26); // 状态管理示例文字色 --ti-lowcode-data-example-color: var(--ti-lowcode-common-text-color-2); // 添加高级属性文字颜色 - --ti-lowcode-data-advanced-text-color: #252b3a; + --ti-lowcode-data-advanced-text-color: var(--ti-lowcode-common-text-color-15); // 添加高级属性 hover 文字颜色 - --ti-lowcode-data-advanced-text-hover-color: #5073e5; + --ti-lowcode-data-advanced-text-hover-color: var(--ti-lowcode-common-text-color-16); // 状态管理按激活背景色 - --ti-lowcode-data-radio-group-active-bg: var(--ti-lowcode-base-gray-0); + --ti-lowcode-data-radio-group-active-bg: var(--ti-lowcode-common-component-bg-2); // 状态管理按背景色 - --ti-lowcode-data-radio-group-bg: transparent; + --ti-lowcode-data-radio-group-bg: var(--ti-lowcode-common-bg-0); // 教程 --ti-lowcode-tutorial-list-item-color: var(--ti-lowcode-common-text-main-color); // 头部工具栏背景色 - --ti-lowcode-toolbar-bg: #fafafa; + --ti-lowcode-toolbar-bg: var(--ti-lowcode-common-component-bg-4); // 头部工具栏选中背景色 - --ti-lowcode-toolbar-active-bg: transparent; + --ti-lowcode-toolbar-active-bg: var(--ti-lowcode-common-bg-0); // 头部工具栏边框色 - --ti-lowcode-toolbar-border-color: var(--ti-lowcode-base-default-button-border-color); + --ti-lowcode-toolbar-border-color: var(--ti-lowcode-common-border-color-4); // 头部工具栏icon颜色 - --ti-lowcode-toolbar-icon-color: #404040; + --ti-lowcode-toolbar-icon-color: var(--ti-lowcode-common-close-icon-text-color-1); // 头部工具栏icon颜色 - --ti-lowcode-toolbar-icon-active-color: #4f77ff; + --ti-lowcode-toolbar-icon-active-color: var(--ti-lowcode-common-text-color-17); // 头部工具栏更多more图标颜色 - --ti-lowcode-toolbar-more-color: #000; + --ti-lowcode-toolbar-more-color: var(--ti-lowcode-common-text-color-18); // 头部工具栏更多more图标hover颜色 - --ti-lowcode-toolbar-more-hover-color: #666; + --ti-lowcode-toolbar-more-hover-color: var(--ti-lowcode-common-text-color-19); // 头部工具栏面包屑字体颜色 - --ti-lowcode-toolbar-breadcrumb-color: var(--ti-lowcode-base-gray-60); + --ti-lowcode-toolbar-breadcrumb-color: var(--ti-lowcode-common-text-color-8); // 头部工具栏画布大小文本hover背景色 && 头部弹框背景色 && context-menu 背景色 && 大纲树节点hover背景色 && 日期组件背景色 - --ti-lowcode-toolbar-view-hover-bg: #e9e9e9; + --ti-lowcode-toolbar-view-hover-bg: var(--ti-lowcode-common-component-bg-20); // 头部工具栏i18n国际化字体颜色 - --ti-lowcode-toolbar-i18n-color: red; + --ti-lowcode-toolbar-i18n-color: var(--ti-lowcode-common-text-color-20); // 应用发布弹窗图标颜色 --ti-lowcode-toolbar-publish-icon-color: var(--ti-lowcode-common-primary-text-color); // 头部左侧logo颜色 - --ti-lowcode-logo-color: #8a8e99; + --ti-lowcode-logo-color: var(--ti-lowcode-common-text-color-14); // 头部左侧logo颜色 - --ti-lowcode-logo-active-color: rgba(0, 0, 0, 0.5); + --ti-lowcode-logo-active-color: var(--ti-lowcode-common-text-color-21); // 中间画布边框色 - --ti-lowcode-canvas-border-color: #999; + --ti-lowcode-canvas-border-color: var(--ti-lowcode-common-border-color-16); // 右侧属性面板tab页签背景色 - --ti-lowcode-tabs-bg: #ebebeb; + --ti-lowcode-tabs-bg: var(--ti-lowcode-common-component-bg-19); // 右侧属性面板tab页签边框色 - --ti-lowcode-tabs-border-color: #ddd; + --ti-lowcode-tabs-border-color: var(--ti-lowcode-common-border-color-7); // 右侧属性面板tab页签激活状态背景色 - --ti-lowcode-tabs-active-bg: #f3f3f3; + --ti-lowcode-tabs-active-bg: var(--ti-lowcode-common-component-bg-22); // 右侧属性面板折叠面板展开内容边框色 - --ti-lowcode-collapse-active-border-color: #333; + --ti-lowcode-collapse-active-border-color: var(--ti-lowcode-common-border-color-17); // 中间画布外框容器背景色 - --ti-lowcode-canvas-wrap-bg: #e5e5e5; + --ti-lowcode-canvas-wrap-bg: var(--ti-lowcode-common-component-bg-24); // 中间画布拖拽宽度按钮背景色 - --ti-lowcode-canvas-handle-bg: red; + --ti-lowcode-canvas-handle-bg: var(--ti-lowcode-common-component-bg-23); // 中间画布拖拽宽度按钮背景色 - --ti-lowcode-canvas-handle-hover-bg: #5e7ce0; + --ti-lowcode-canvas-handle-hover-bg: var(--ti-lowcode-common-component-bg-43); // 中间画布底部面包屑背景色 - --ti-lowcode-breadcrumb-bg: #fff; + --ti-lowcode-breadcrumb-bg: var(--ti-lowcode-common-component-bg-2); // 中间画布底部面包屑字体颜色 - --ti-lowcode-breadcrumb-color: #999; + --ti-lowcode-breadcrumb-color: var(--ti-lowcode-common-text-color-22); // 中间画布底部面包屑三角箭头颜色 - --ti-lowcode-breadcrumb-icon-color: #ccc; + --ti-lowcode-breadcrumb-icon-color: var(--ti-lowcode-common-text-color-24); // 弹框遮罩层背景色 - --ti-lowcode-mask-modal-bg: rgba(0, 0, 0, 0.5); + --ti-lowcode-mask-modal-bg: var(--ti-lowcode-common-component-bg-21); // 引导提示框遮罩层背景色 - --ti-lowcode-guide-mask-bg: rgba(0, 0, 0, 0.5); + --ti-lowcode-guide-mask-bg: var(--ti-lowcode-common-component-bg-21); // 引导高亮遮罩层背景色 - --ti-lowcode-guide-highlight-mask-bg: rgba(200, 200, 200, 0.2); + --ti-lowcode-guide-highlight-mask-bg: var(--ti-lowcode-common-component-bg-44); // 引导弹框背景色 - --ti-lowcode-guide-dialog-bg: #fff; + --ti-lowcode-guide-dialog-bg: var(--ti-lowcode-common-component-bg-2); // 引导弹框标题，按钮文本字体色 - --ti-lowcode-guide-title-color: #252b3a; + --ti-lowcode-guide-title-color: var(--ti-lowcode-common-text-color-15); // 引导弹框描述文本字体色 - --ti-lowcode-guide-message-color: #575d6c; + --ti-lowcode-guide-message-color: var(--ti-lowcode-common-text-color-25); // collapse 折叠面板激活后字体颜色 - --ti-lowcode-collapse-active-color: #252b3a; + --ti-lowcode-collapse-active-color: var(--ti-lowcode-common-text-color-15); // input 框背景色 - --ti-lowcode-input-bg: #fff; + --ti-lowcode-input-bg: var(--ti-lowcode-common-component-bg-2); // switch 圆点背景色 - --ti-lowcode-switch-after-bg: #fff; + --ti-lowcode-switch-after-bg: var(--ti-lowcode-common-component-bg-2); // switch 圆点 hover 背景色 - --ti-lowcode-switch-after-hover-bg: #f5f5f5; + --ti-lowcode-switch-after-hover-bg: var(--ti-lowcode-common-component-bg-1); // switch 圆点 checked 背景色 - --ti-lowcode-switch-after-checked-bg: #fff; + --ti-lowcode-switch-after-checked-bg: var(--ti-lowcode-common-component-bg-2); // -----下拉框相关主题配置----- // 下拉框聚焦时边框颜色 - --ti-lowcode-select-focus-border-color: var(--ti-lowcode-base-default-button-border-hover-color); + --ti-lowcode-select-focus-border-color: var(--ti-lowcode-common-btn-default-border-color); // 下拉框选中标签字体颜色 - --ti-lowcode-select-tags-text-color: var(--ti-lowcode-base-text-color-3); + --ti-lowcode-select-tags-text-color: var(--ti-lowcode-common-text-color-5); // 下拉框选中标签背景颜色 - --ti-lowcode-select-tags-bg-color: #5959591a; + --ti-lowcode-select-tags-bg-color: var(--ti-lowcode-common-component-bg-28); // 下拉框suffix图标悬浮颜色 - --ti-lowcode-select-suffix-icon-color-hover: var(--ti-lowcode-base-text-color); + --ti-lowcode-select-suffix-icon-color-hover: var(--ti-lowcode-common-primary-text-color); // select 下拉框背景色 - --ti-lowcode-dropdown-bg-color: #202020; + --ti-lowcode-dropdown-bg-color: var(--ti-lowcode-common-component-bg-29); // select 下拉面板边框颜色 - --ti-lowcode-dropdown-border-color: transparent; + --ti-lowcode-dropdown-border-color: var(--ti-lowcode-common-border-color-18); // select 下拉面板选型字体颜色 - --ti-lowcode-dropdown-item-text-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-dropdown-item-text-color: var(--ti-lowcode-common-primary-text-color); // select 下拉框背景色 - --ti-lowcode-dropdown-bg-color: #fff; + --ti-lowcode-dropdown-bg-color: var(--ti-lowcode-common-component-bg-2); // select 下拉框选项hover背景色 - --ti-lowcode-dropdown-item-hover-bg-color: #f2f2f2; + --ti-lowcode-dropdown-item-hover-bg-color: var(--ti-lowcode-common-component-bg-26); // select 下拉框选项选中背景色 - --ti-lowcode-dropdown-item-selected-bg: #fff; + --ti-lowcode-dropdown-item-selected-bg: var(--ti-lowcode-common-component-bg-2); // select 下拉框选项选中字体颜色 - --ti-lowcode-dropdown-item-selected-color: var(--ti-lowcode-base-text-color-2); + --ti-lowcode-dropdown-item-selected-color: var(--ti-lowcode-common-text-color-7); // select 下拉框选项hover字体颜色 - --ti-lowcode-dropdown-item-hover-text-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-dropdown-item-hover-text-color: var(--ti-lowcode-common-primary-text-color); // button info 字体颜色 - --ti-lowcode-button-info-color: #fff; + --ti-lowcode-button-info-color: var(--ti-lowcode-common-text-color-3); // button default 背景颜色 - --ti-lowcode-button-default-bg: #fff; + --ti-lowcode-button-default-bg: var(--ti-lowcode-common-component-bg-2); // 按钮hover字体颜色 --ti-lowcode-button-default-hover-color: var(--ti-lowcode-common-primary-color); // 按钮hover背景色 - --ti-lowcode-button-default-hover-bg: #fff; + --ti-lowcode-button-default-hover-bg: var(--ti-lowcode-common-component-bg-2); --ti-lowcode-button-default-hover-border-color: var(--ti-lowcode-common-primary-color); // info 保存按钮背景色 --ti-lowcode-button-info-bg: var(--ti-lowcode-common-primary-color); // info 保存按钮 hover 背景色 --ti-lowcode-button-info-hover-bg: var(--ti-lowcode-common-primary-hover-color); // primary 按钮字体颜色 - --ti-lowcode-button-primary-color: #fff; + --ti-lowcode-button-primary-color: var(--ti-lowcode-common-text-color-3); // 按钮边框颜色 --ti-lowcode-button-border-color: var(--ti-lowcode-common-primary-color); // 组件icon颜色 - --ti-lowcode-component-icon-color: #8d8d8d; + --ti-lowcode-component-icon-color: var(--ti-lowcode-common-text-color-26); // 组件item hover 背景色 - --ti-lowcode-component-item-hover-bg: #e3e3e3; + --ti-lowcode-component-item-hover-bg: var(--ti-lowcode-common-component-bg-30); // 左侧插件激活背景色 - --ti-lowcode-left-panel-active-bg: #f2f2f2; + --ti-lowcode-left-panel-active-bg: var(--ti-lowcode-common-component-bg-26); // 左侧插件激活边框色 - --ti-lowcode-left-panel-active-border-color: #999; + --ti-lowcode-left-panel-active-border-color: var(--ti-lowcode-common-border-color-16); // 左侧tabs按钮边框色 - --ti-lowcode-left-button-border-color: #ddd; + --ti-lowcode-left-button-border-color: var(--ti-lowcode-common-border-color-7); // list-item 项背景色 - --ti-lowcode-list-item-bg: #fafafa; + --ti-lowcode-list-item-bg: var(--ti-lowcode-common-component-bg-4); // list-item 项激活背景色 - --ti-lowcode-list-item-active-bg: #e9e9e9; + --ti-lowcode-list-item-active-bg: var(--ti-lowcode-common-component-bg-20); // radio 按钮组激活背景色 - --ti-lowcode-radio-button-active-bg: #9d9d9d; + --ti-lowcode-radio-button-active-bg: var(--ti-lowcode-common-component-bg-31); // grid 布局设置按钮字体颜色 - --ti-lowcode-grid-edit-color: #252b3a; + --ti-lowcode-grid-edit-color: var(--ti-lowcode-common-text-color-15); // grid 布局设置按钮背景色 - --ti-lowcode-grid-edit-bg: #fff; + --ti-lowcode-grid-edit-bg: var(--ti-lowcode-common-component-bg-2); // tooltip字体颜色 - --ti-lowcode-tooltip-text-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-tooltip-text-color: var(--ti-lowcode-common-primary-text-color); // tooltip背景颜色 - --ti-lowcode-tooltip-bg-color: var(--ti-lowcode-base-bg-5); + --ti-lowcode-tooltip-bg-color: var(--ti-lowcode-common-component-bg-2); // tooltip错误提示背景颜色 - --ti-lowcode-tooltip-error-bg-color: var(--ti-lowcode-base-bg-5); + --ti-lowcode-tooltip-error-bg-color: var(--ti-lowcode-common-component-bg-2); // Fit 字体颜色 - --ti-lowcode-fit-label-color: #252b3a; + --ti-lowcode-fit-label-color: var(--ti-lowcode-common-text-color-15); // Fit 背景颜色 - --ti-lowcode-fit-coordinate-bg: #fff; + --ti-lowcode-fit-coordinate-bg: var(--ti-lowcode-common-component-bg-2); // Fit 边框颜色 - --ti-lowcode-fit-coordinate-border-color: #ddd; + --ti-lowcode-fit-coordinate-border-color: var(--ti-lowcode-common-border-color-7); // Fit 圆点颜色 - --ti-lowcode-fit-coordinate-origin-color: #757575; + --ti-lowcode-fit-coordinate-origin-color: var(--ti-lowcode-common-text-color-27); // more icon 选中背景色 - --ti-lowcode-more-icon-selected-bg: #e5e5e5; + --ti-lowcode-more-icon-selected-bg: var(--ti-lowcode-common-component-bg-24); // main menu 背景色 - --ti-lowcode-main-menu-bg: #fff; + --ti-lowcode-main-menu-bg: var(--ti-lowcode-common-component-bg-2); // main menu hover 背景色 - --ti-lowcode-main-menu-item-hover-bg: var(--ti-lowcode-common-primary-color); + --ti-lowcode-main-menu-item-hover-bg: var(--ti-lowcode-common-component-bg-9); --ti-lowcode-main-menu-item-hover-color: var(--ti-lowcode-common-text-color-3); // spacing svg 图标上下颜色 - --ti-lowcode-spacing-tb-color: #d1d1d1; + --ti-lowcode-spacing-tb-color: var(--ti-lowcode-common-text-color-28); // spacing svg 图标上下hover颜色 - --ti-lowcode-spacing-tb-hover-color: #bdbdbd; + --ti-lowcode-spacing-tb-hover-color: var(--ti-lowcode-common-gray-53); // spacing svg 图标左右颜色 - --ti-lowcode-spacing-lr-color: #e5e5e5; + --ti-lowcode-spacing-lr-color: var(--ti-lowcode-common-text-color-23); // spacing svg 图标左右hover颜色 - --ti-lowcode-spacing-lr-hover-color: #dfdfdf; + --ti-lowcode-spacing-lr-hover-color: var(--ti-lowcode-common-gray-54); // spacing svg 图标边框颜色 - --ti-lowcode-spacing-border-color: #999; + --ti-lowcode-spacing-border-color: var(--ti-lowcode-common-border-color-16); // position direction 字体颜色 - --ti-lowcode-position-direction-color: #252b3a; + --ti-lowcode-position-direction-color: var(--ti-lowcode-common-text-color-15); // position direction 弹框显示时字体背景色 - --ti-lowcode-position-direction-bg: #bfbfbf; + --ti-lowcode-position-direction-bg: var(--ti-lowcode-common-component-bg-32); // position Relative to 按钮字体颜色 - --ti-lowcode-position-relative-to-color: #252b3a; + --ti-lowcode-position-relative-to-color: var(--ti-lowcode-common-text-color-15); // position Relative to 按钮边框颜色 - --ti-lowcode-position-relative-to-border-color: #ddd; + --ti-lowcode-position-relative-to-border-color: var(--ti-lowcode-common-border-color-7); // position Relative to 按钮背景色 - --ti-lowcode-position-relative-to-bg: #e5e5e5; + --ti-lowcode-position-relative-to-bg: var(--ti-lowcode-common-component-bg-24); // position 选中背景色 - --ti-lowcode-position-selected-bg: #b5b5b5; + --ti-lowcode-position-selected-bg: var(--ti-lowcode-common-component-bg-33); // icon 图标选择弹框背景色 - --ti-lowcode-icon-popover-bg: #ebebeb; + --ti-lowcode-icon-popover-bg: var(--ti-lowcode-common-component-bg-19); // icon 图标选择弹框字体颜色 - --ti-lowcode-icon-popover-color: #666; + --ti-lowcode-icon-popover-color: var(--ti-lowcode-common-text-color-19); // icon 图标选择弹框hover颜色 - --ti-lowcode-icon-popover-hover-color: #333; + --ti-lowcode-icon-popover-hover-color: var(--ti-lowcode-common-text-color-9); // 查看区块详情icon颜色 - --ti-lowcode-block-detail-icon-color: #999; + --ti-lowcode-block-detail-icon-color: var(--ti-lowcode-common-text-color-22); // 顶部按钮显示背景色 - --ti-lowcode-toolbar-button-bg: #ebebeb; + --ti-lowcode-toolbar-button-bg: var(--ti-lowcode-common-component-bg-19); // 顶部隐藏导航栏按钮hover颜色 - --ti-lowcode-toolbar-ellipsis-hover-bg: #f5f5f5; + --ti-lowcode-toolbar-ellipsis-hover-bg: var(--ti-lowcode-common-component-bg-1); // 中间画布底部面包屑hover背景色 - --ti-lowcode-breadcrumb-hover-bg: #fff; + --ti-lowcode-breadcrumb-hover-bg: var(--ti-lowcode-common-component-bg-2); // 弹框中tip提示边框颜色 - --ti-lowcode-dialog-tip-border-color: #575d6c; + --ti-lowcode-dialog-tip-border-color: var(--ti-lowcode-common-border-color-20); // 弹框字体颜色 && 左侧面板 title 字体颜色 - --ti-lowcode-dialog-font-color: #333; + --ti-lowcode-dialog-font-color: var(--ti-lowcode-common-text-color-9); // 输入框icon图标颜色 - --ti-lowcode-input-icon-color: #737373; + --ti-lowcode-input-icon-color: var(--ti-lowcode-common-text-color-29); // 弹框字体颜色 && 图标颜色 && 输入框 suffix 字体颜色 - --ti-lowcode-text-color: #6a6a6a; + --ti-lowcode-text-color: var(--ti-lowcode-common-text-color-1); // 右侧optionitem的边框色 - --ti-lowcode-optionitem-border-color: #9f9f9f; + --ti-lowcode-optionitem-border-color: var(--ti-lowcode-common-border-color-21); // 右侧optionitem的背景色 - --ti-lowcode-optionitem-background-color: #e5e5e5; + --ti-lowcode-optionitem-background-color: var(--ti-lowcode-common-component-bg-24); //tootip里的input框字体颜色 - --ti-lowcode-tootip-input-color: #fff; + --ti-lowcode-tootip-input-color: var(--ti-lowcode-common-text-color-3); //tootip里的input背景颜色 - --ti-lowcode-tootip-input-background-color: #363636; + --ti-lowcode-tootip-input-background-color: var(--ti-lowcode-common-component-bg-34); //tootip里的input框边框颜色 - --ti-lowcode-tootip-input-border-color: #b9b9b9; + --ti-lowcode-tootip-input-border-color: var(--ti-lowcode-common-border-color-22); //tootip里的input框箭头颜色 - --ti-lowcode-tootip-arrow-border-color: #404040; + --ti-lowcode-tootip-arrow-border-color: var(--ti-lowcode-common-close-icon-text-color-1); // dialogBox弹框示例框边框色 - --ti-lowcode-dialog-demo-border-color: #5e5e5e; + --ti-lowcode-dialog-demo-border-color: var(--ti-lowcode-common-border-color-23); // 关闭 icon 图标hover背景色 && 输入框后置文本hover背景色 - --ti-lowcode-icon-hover-bg: rgba(255, 255, 255, 0.1); + --ti-lowcode-icon-hover-bg: var(--ti-lowcode-common-component-bg-35); // 说明提示框警告颜色 - --ti-lowcode-description-warning-color: #facb4b; + --ti-lowcode-description-warning-color: var(--ti-lowcode-common-warning-color-2); // 说明提示框错误颜色 - --ti-lowcode-description-error-color: #ff0000; + --ti-lowcode-description-error-color: var(--ti-lowcode-common-error-color-1); // switch checked状态边框色 --ti-lowcode-switch-checked-border-color: var(--ti-lowcode-common-primary-color); // 文本链接颜色 - --ti-lowcode-text-link-color: #6bb0ff; + --ti-lowcode-text-link-color: var(--ti-lowcode-common-text-color-31); // 大纲树node节点选中背景色 --ti-lowcode-node-current-bg: var(--ti-lowcode-common-primary-color); // 大纲树node节点不可拖拽背景色 && 表单校验错误边框色 - --ti-lowcode-node-nodrag-bg: #ea384c; + --ti-lowcode-node-nodrag-bg: var(--ti-lowcode-common-component-bg-45); // 成功状态按钮边框色 - --ti-lowcode-success-border-color: #2ad986; + --ti-lowcode-success-border-color: var(--ti-lowcode-common-border-color-24); // 错误提示颜色 - --ti-lowcode-error-tip-color: var(--ti-lowcode-base-error-color); + --ti-lowcode-error-tip-color: var(--ti-lowcode-common-status-error); // 画布拖拽元素背景色 - --ti-lowcode-drag-ghost-bg: #888; + --ti-lowcode-drag-ghost-bg: var(--ti-lowcode-common-component-bg-36); // 画布拖拽位置线背景色 - --ti-lowcode-ghost-line-bg: #ffb100; + --ti-lowcode-ghost-line-bg: var(--ti-lowcode-common-component-bg-37); // 描述颜色 --ti-lowcode-description-color: var(--ti-lowcode-common-text-color-4); // 更多折叠面板头部hover背景色 - --ti-lowcode-more-collapse-header-hover-color: #afafaf; + --ti-lowcode-more-collapse-header-hover-color: var(--ti-lowcode-common-gray-19); // 绑定时icon图标颜色 - --ti-lowcode-icon-bind-color: #006cff; + --ti-lowcode-icon-bind-color: var(--ti-lowcode-common-blue-22); // 创建字体颜色 - --ti-lowcode-create-color: #575d6c; + --ti-lowcode-create-color: var(--ti-lowcode-common-text-color-25); // 删除按钮hover背景色 && 表单校验错误背景色 - --ti-lowcode-delete-button-hover-bg: #c92c3f; + --ti-lowcode-delete-button-hover-bg: var(--ti-lowcode-common-component-bg-38); // input框focus 获焦时边框颜色 - --ti-lowcode-input-focus-border-color: var(--ti-lowcode-base-default-button-border-hover-color); + --ti-lowcode-input-focus-border-color: var(--ti-lowcode-common-btn-default-border-color); // 次要描述字体颜色 && 面包屑label 字体颜色 - --ti-lowcode-description-minor-color: #ababab; + --ti-lowcode-description-minor-color: var(--ti-lowcode-common-third-text-color); // 样式设置 label 字体颜色 - --ti-lowcode-style-setting-label-color: #8bbefa; + --ti-lowcode-style-setting-label-color: var(--ti-lowcode-common-text-color-32); // 样式设置 label 背景颜色 - --ti-lowcode-style-setting-label-bg: rgba(76, 152, 241, 0.15); + --ti-lowcode-style-setting-label-bg: var(--ti-lowcode-common-component-bg-39); // 多人协作item项hover背景色 - --ti-lowcode-user-item-hover-bg: #f3f3f5; + --ti-lowcode-user-item-hover-bg: var(--ti-lowcode-common-component-bg-40); // 多人协作人员头像背景色 - --ti-lowcode-user-header-bg: #919191; + --ti-lowcode-user-header-bg: var(--ti-lowcode-common-component-bg-41); // 工具栏提示框字体颜色 - --ti-lowcode-toolbar-popover-color: #363636; + --ti-lowcode-toolbar-popover-color: var(--ti-lowcode-common-text-color-30); // 工具栏 media 提示框字体颜色 - --ti-lowcode-media-popover-color: var(--ti-lowcode-base-gray-60); + --ti-lowcode-media-popover-color: var(--ti-lowcode-common-text-color-8); // 工具栏 media 提示框标题字体颜色 - --ti-lowcode-media-popover-title-color: #191919; + --ti-lowcode-media-popover-title-color: var(--ti-lowcode-common-primary-text-color); // 工具栏icon禁用颜色 - --ti-lowcode-disabled-color: #c2c2c2; + --ti-lowcode-disabled-color: var(--ti-lowcode-common-gray-18); // 状态管理详情收缩摩纳哥编辑器icon颜色 - --ti-lowcode-state-management-screen-icon-color: #404040; + --ti-lowcode-state-management-screen-icon-color: var(--ti-lowcode-common-close-icon-text-color-1); // 状态管理搜索无结果显示颜色 - --ti-lowcode-state-management-query-color: #404040; + --ti-lowcode-state-management-query-color: var(--ti-lowcode-common-close-icon-text-color-1); // 状态管理代码编辑器边框颜色 - --ti-lowcode-state-management-monaco-editor-border-color: var(--ti-lowcode-base-gray-40); + --ti-lowcode-state-management-monaco-editor-border-color: var(--ti-lowcode-common-border-color-13); // Popover提示框 - --ti-lowcode-popover-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-popover-color: var(--ti-lowcode-common-primary-text-color); // popover 弹框背景色 - --ti-lowcode-popover-bg-color: #fff; + --ti-lowcode-popover-bg-color: var(--ti-lowcode-common-component-bg-2); // 自定义类名lowcode弹框背景色 - --ti-lowcode-custom-popover-bg-color: #fff; + --ti-lowcode-custom-popover-bg-color: var(--ti-lowcode-common-component-bg-2); // 自定义类名lowcode弹框字体颜色 - --ti-lowcode-custom-popover-text-color: #191919; + --ti-lowcode-custom-popover-text-color: var(--ti-lowcode-common-primary-text-color); // 自定义类名lowcode弹框边框颜色 - --ti-lowcode-custom-popover-border-color: #fff; + --ti-lowcode-custom-popover-border-color: var(--ti-lowcode-common-border-color-19); // 滚动条thumb颜色 - --ti-lowcode-scrollbar-thumb-background-color: #e7e8e9; + --ti-lowcode-scrollbar-thumb-background-color: var(--ti-lowcode-common-component-bg-42); // 可点击交互的文字颜色 - --ti-lowcode-common-interaction-text-color: #5e7ce0; + --ti-lowcode-interaction-text-color: var(--ti-lowcode-common-text-color-33); // 数字输入框组件下拉列表文字颜色 - --ti-lowcode-numeric-unit-text-color: var(--ti-lowcode-text-color); - + --ti-lowcode-numeric-unit-text-color: var(--ti-lowcode-common-text-color-1); //左侧插件栏hover背景色 - --ti-plugins-hover-bg-color: #fff; + --ti-plugins-hover-bg-color: var(--ti-lowcode-common-component-bg-2); //左侧插件栏hover边框色 - --ti-plugins-hover-border-color: #9e9e9e; + --ti-plugins-hover-border-color: var(--ti-lowcode-common-border-color-25); //左侧插件栏hover文字色 - --ti-plugins-hover-text-color: #4d4d4d; + --ti-plugins-hover-text-color: var(--ti-lowcode-common-text-color-34); // 表格行间背景色 - --ti-lowcode-new-table-row-sepline-background: #f0f0f0; - + --ti-lowcode-new-table-row-sepline-background: var(--ti-lowcode-common-component-bg-5); // 查看指引视频 - --ti-lowcode-block-video-tip-color: var(--ti-lowcode-base-primary-color-2); - + --ti-lowcode-block-video-tip-color: var(--ti-lowcode-common-primary-color); // 右侧optionitem的边框色 - --ti-lowcode-optionitem-border-color: rgba(0, 0, 0, 0.08); + --ti-lowcode-optionitem-border-color: var(--ti-lowcode-common-border-color-10); // 右侧optionitem的背景色 - --ti-lowcode-optionitem-background-color: #fff; - + --ti-lowcode-optionitem-background-color: var(--ti-lowcode-common-component-bg-2); // 空数据图标颜色 - --ti-lowcode-empty-icon-color: unset; - - --ti-lowcode-popover-option-popper-border-color: transparent; - --ti-lowcode-toolbar-hover-popper: var(--ti-lowcode-toolbar-more-color); + --ti-lowcode-empty-icon-color: var(--ti-lowcode-common-color-unset); + --ti-lowcode-popover-option-popper-border-color: var(--ti-lowcode-common-border-color-18); + --ti-lowcode-toolbar-hover-popper: var(--ti-lowcode-common-text-color-18); } From 5ee33e40126d77815ec202ea0b1c7f8d4ec9079b Mon Sep 17 00:00:00 2001 From: James-9696 Date: Mon, 22 Jul 2024 02:21:47 -0700 Subject: [PATCH 07/14] fix: engine component dark color theme variable replacement --- packages/layout/src/Main.vue | 2 +- .../datasource/src/DataSourceField.vue | 4 +- .../datasource/src/DataSourceRecordList.vue | 2 +- .../datasource/src/DataSourceTemplate.vue | 2 +- packages/theme/base/src/base.less | 25 +- packages/theme/base/src/common.less | 87 ++++ packages/theme/common/global.less | 2 +- packages/theme/dark/block.less | 68 ++-- packages/theme/dark/bridge.less | 12 +- packages/theme/dark/canvas.less | 46 ++- packages/theme/dark/datasource.less | 84 ++-- packages/theme/dark/events.less | 48 +-- packages/theme/dark/gpt-dialog.less | 48 +-- packages/theme/dark/help.less | 20 +- packages/theme/dark/i18n.less | 6 +- packages/theme/dark/life-cycles.less | 8 +- packages/theme/dark/materials.less | 26 +- packages/theme/dark/metaComponent.less | 82 ++-- packages/theme/dark/pageManage.less | 48 +-- packages/theme/dark/plugin-js.less | 8 +- packages/theme/dark/setting-style.less | 12 +- packages/theme/dark/settings.less | 57 +-- packages/theme/dark/toolbar.less | 22 +- packages/theme/dark/tree.less | 8 +- packages/theme/dark/tutorial.less | 6 +- packages/theme/dark/variable.less | 370 +++++++++--------- packages/theme/light/base.less | 273 +++++++++++++ packages/theme/light/datasource.less | 2 +- packages/theme/light/index.less | 1 + packages/theme/light/variable.less | 2 +- 30 files changed, 884 insertions(+), 497 deletions(-) create mode 100644 packages/theme/light/base.less diff --git a/packages/layout/src/Main.vue b/packages/layout/src/Main.vue index fa2725c28..26f37747f 100644 --- a/packages/layout/src/Main.vue +++ b/packages/layout/src/Main.vue @@ -87,7 +87,7 @@ export default { #tiny-engine { display: flex; flex-flow: column; - min-width: var(--base-min-width); + min-width: var(--ti-common-min-width); height: 100vh; overflow: hidden; .tiny-engine-main { diff --git a/packages/plugins/datasource/src/DataSourceField.vue b/packages/plugins/datasource/src/DataSourceField.vue index 06bceb5ae..8bcb830f6 100644 --- a/packages/plugins/datasource/src/DataSourceField.vue +++ b/packages/plugins/datasource/src/DataSourceField.vue @@ -186,9 +186,9 @@ export default { align-items: center; &.field-row-add { - color: var(--ti-lowcode-datasource-json-border-colorr); + color: var(--ti-lowcode-datasource-json-border-color); svg { - color: var(--ti-lowcode-datasource-json-border-colorr); + color: var(--ti-lowcode-datasource-json-border-color); } } } diff --git a/packages/plugins/datasource/src/DataSourceRecordList.vue b/packages/plugins/datasource/src/DataSourceRecordList.vue index 85182023a..cc707d588 100644 --- a/packages/plugins/datasource/src/DataSourceRecordList.vue +++ b/packages/plugins/datasource/src/DataSourceRecordList.vue @@ -650,7 +650,7 @@ export default { color: var(--ti-lowcode-datasource-common-empty-color); } .add-column { - color: var(--ti-lowcode-datasource-json-border-colorr); + color: var(--ti-lowcode-datasource-json-border-color); cursor: pointer; } } diff --git a/packages/plugins/datasource/src/DataSourceTemplate.vue b/packages/plugins/datasource/src/DataSourceTemplate.vue index e3c49d068..8ab3d5fdd 100644 --- a/packages/plugins/datasource/src/DataSourceTemplate.vue +++ b/packages/plugins/datasource/src/DataSourceTemplate.vue @@ -79,7 +79,7 @@ export default { } } .blue::before { - border: 1px solid var(--ti-lowcode-datasource-json-border-colorr); + border: 1px solid var(--ti-lowcode-datasource-json-border-color); } .green::before { diff --git a/packages/theme/base/src/base.less b/packages/theme/base/src/base.less index c710b53e6..bb8f164a0 100644 --- a/packages/theme/base/src/base.less +++ b/packages/theme/base/src/base.less @@ -65,6 +65,9 @@ --ti-lowcode-base-gray-58: #919191; --ti-lowcode-base-gray-59: #e7e8e9; --ti-lowcode-base-gray-60: #9e9e9e; + --ti-lowcode-base-gray-61: #63666c; + --ti-lowcode-base-gray-62: #858585; + --ti-lowcode-base-gray-63: #f6eeee; // black --ti-lowcode-base-dark-1: #1f1f1f; @@ -81,8 +84,8 @@ --ti-lowcode-base-dark-12: #2b2b2b; --ti-lowcode-base-dark-13: #262626; --ti-lowcode-base-dark-14: #222; - - --ti-lowcode-base-dark-16: #292929; + --ti-lowcode-base-dark-15: #323644; + --ti-lowcode-base-dark-16: #1e1e1e; --ti-lowcode-base-dark-17: #292929; --ti-lowcode-base-dark-18: #3c3c3c; --ti-lowcode-base-dark-19: #313131; @@ -115,6 +118,7 @@ --ti-lowcode-base-red-18: #ff0000; --ti-lowcode-base-red-19: #ea384c; --ti-lowcode-base-red-20: #c92c3f; + --ti-lowcode-base-red-21: #de504e; // expand-orange --ti-lowcode-base-orange-1: #fff5e8; @@ -149,6 +153,7 @@ --ti-lowcode-base-yellow-12: #d4b57f; --ti-lowcode-base-yellow-13: #e6d3b8; --ti-lowcode-base-yellow-14: #501c1c; + --ti-lowcode-base-yellow-15: #8d5421; // expand-lemon --ti-lowcode-base-lemon-1: #fcfae8; @@ -267,6 +272,7 @@ --ti-lowcode-base-blue-21: #6bb0ff; --ti-lowcode-base-blue-22: #006cff; --ti-lowcode-base-blue-23: #8bbefa; + --ti-lowcode-base-blue-24: #476be5; // expand-indigo --ti-lowcode-base-indigo-1: #eee8ff; @@ -328,6 +334,7 @@ --ti-lowcode-base-rose-11: #993d6e; --ti-lowcode-base-rose-12: #cc7aa6; --ti-lowcode-base-rose-13: #e6b8d2; + --ti-lowcode-base-rose-14: #f66f6a; // 公司品牌色 --ti-lowcode-base-brand-color: #c7000b; @@ -372,6 +379,7 @@ --ti-lowcode-base-dark-text-link-color-1: #a6a6a6; // 按钮边框色 + --ti-lowcode-base-button-border-none: none; --ti-lowcode-base-secondary-button-border-color: #595959; --ti-lowcode-base-secondary-button-border-hover-color: #c2c2c2; --ti-lowcode-base-default-button-border-color: #c2c2c2; @@ -396,6 +404,19 @@ --ti-lowcode-base-rgba-7: rgba(200, 200, 200, 0.2); --ti-lowcode-base-rgba-8: rgba(255, 255, 255, 0.1); --ti-lowcode-base-rgba-9: rgba(76, 152, 241, 0.15); + --ti-lowcode-base-rgba-10: rgba(173, 176, 184, 0.6); + --ti-lowcode-base-rgba-11: rgba(0, 255, 0, 0.1); + --ti-lowcode-base-rgba-12: rgba(242, 48, 48, 0.3); + --ti-lowcode-base-rgba-13: rgba(255, 255, 255, 0.08); + --ti-lowcode-base-rgba-14: rgba(246, 111, 106, 0.1); + --ti-lowcode-base-rgba-15: rgba(217, 217, 217, 0.8); + --ti-lowcode-base-rgba-16: rgba(0, 179, 54, 0.6); + --ti-lowcode-base-rgba-17: rgba(217, 217, 217, 0.4); + --ti-lowcode-base-rgba-18: rgba(255, 255, 255, 0.4); + --ti-lowcode-base-rgba-19: rgba(255, 255, 255, 0.5); + --ti-lowcode-base-rgba-20: rgba(94, 94, 94, 0.8); + --ti-lowcode-base-rgba-21: rgba(121, 121, 121, 0.4); + --ti-lowcode-base-rgba-22: rgba(138, 142, 153, 0.99); // 状态色 --ti-lowcode-base-error-color: #f23030; diff --git a/packages/theme/base/src/common.less b/packages/theme/base/src/common.less index 4921c4046..ebc4c9a02 100644 --- a/packages/theme/base/src/common.less +++ b/packages/theme/base/src/common.less @@ -47,6 +47,42 @@ --ti-lowcode-common-component-bg-43: var(--ti-lowcode-base-blue-20); --ti-lowcode-common-component-bg-44: var(--ti-lowcode-base-rgba-7); --ti-lowcode-common-component-bg-45: var(--ti-lowcode-base-red-19); + --ti-lowcode-common-component-bg-46: var(--ti-lowcode-base-dark-18); + --ti-lowcode-common-component-bg-47: var(--ti-lowcode-base-dark-8); + --ti-lowcode-common-component-bg-48: var(--ti-lowcode-base-yellow-15); + --ti-lowcode-common-component-bg-49: var(--ti-lowcode-base-dark-17); + --ti-lowcode-common-component-bg-50: var(--ti-lowcode-base-dark-15); + --ti-lowcode-common-component-bg-51: var(--ti-lowcode-base-dark-12); + --ti-lowcode-common-component-bg-52: var(--ti-lowcode-base-dark-13); + --ti-lowcode-common-component-bg-53: var(--ti-lowcode-base-rgba-11); + --ti-lowcode-common-component-bg-54: var(--ti-lowcode-base-rgba-12); + --ti-lowcode-common-component-bg-55: var(--ti-lowcode-base-gray-29); + --ti-lowcode-common-component-bg-56: var(--ti-lowcode-base-blue-14); + --ti-lowcode-common-component-bg-57: var(--ti-lowcode-base-dark-22); + --ti-lowcode-common-component-bg-58: var(--ti-lowcode-base-gray-43); + --ti-lowcode-common-component-bg-59: var(--ti-lowcode-base-gray-25); + --ti-lowcode-common-component-bg-60: var(--ti-lowcode-base-kelly-6); + --ti-lowcode-common-component-bg-61: var(--ti-lowcode-base-dark-1); + --ti-lowcode-common-component-bg-62: var(--ti-lowcode-base-dark-bg-6); + --ti-lowcode-common-component-bg-63: var(--ti-lowcode-base-dark-16); + --ti-lowcode-common-component-bg-64: var(--ti-lowcode-base-rgba-14); + --ti-lowcode-common-component-bg-65: var(--ti-lowcode-base-dark-bg-3); + --ti-lowcode-common-component-bg-66: var(--ti-lowcode-base-dark-14); + --ti-lowcode-common-component-bg-67: var(--ti-lowcode-base-dark-bg-2); + --ti-lowcode-common-component-bg-68: var(--ti-lowcode-base-dark-bg-5); + --ti-lowcode-common-component-bg-69: var(--ti-lowcode-base-dark-24); + --ti-lowcode-common-component-bg-70: var(--ti-lowcode-base-gray-4); + --ti-lowcode-common-component-bg-71: var(--ti-lowcode-base-dark-9); + --ti-lowcode-common-component-bg-72: var(--ti-lowcode-base-dark-20); + --ti-lowcode-common-component-bg-73: var(--ti-lowcode-base-rgba-16); + --ti-lowcode-common-component-bg-74: var(--ti-lowcode-base-rgba-19); + --ti-lowcode-common-component-bg-75: var(--ti-lowcode-base-dark-25); + --ti-lowcode-common-component-bg-76: var(--ti-lowcode-base-gray-34); + --ti-lowcode-common-component-bg-77: var(--ti-lowcode-base-gray-12); + --ti-lowcode-common-component-bg-78: var(--ti-lowcode-base-dark-7); + --ti-lowcode-common-component-bg-79: var(--ti-lowcode-base-dark-5); + --ti-lowcode-common-component-bg-80: var(--ti-lowcode-base-rgba-21); + --ti-lowcode-common-component-bg-81: var(--ti-lowcode-base-rgba-20); // 文本 --ti-lowcode-common-primary-text-color: var(--ti-lowcode-base-dark-5); @@ -90,8 +126,37 @@ --ti-lowcode-common-text-color-32: var(--ti-lowcode-base-blue-23); --ti-lowcode-common-text-color-33: var(--ti-lowcode-base-blue-20); --ti-lowcode-common-text-color-34: var(--ti-lowcode-base-gray-25); + --ti-lowcode-common-text-color-35: var(--ti-lowcode-base-gray-21); + --ti-lowcode-common-text-color-36: var(--ti-lowcode-base-blue-24); + --ti-lowcode-common-text-color-37: var(--ti-lowcode-base-gray-61); + --ti-lowcode-common-text-color-38: var(--ti-base-color-transparent); + --ti-lowcode-common-text-color-39: var(--ti-lowcode-base-gray-11); + --ti-lowcode-common-text-color-40: var(--ti-lowcode-base-gray-45); + --ti-lowcode-common-text-color-41: var(--ti-lowcode-base-dark-text-color); + --ti-lowcode-common-text-color-42: var(--ti-lowcode-base-red-21); + --ti-lowcode-common-text-color-43: var(--ti-lowcode-base-gray-23); + --ti-lowcode-common-text-color-44: var(--ti-lowcode-base-gray-9); + --ti-lowcode-common-text-color-45: var(--ti-lowcode-base-gray-7); + --ti-lowcode-common-text-color-46: var(--ti-lowcode-base-gray-47); + --ti-lowcode-common-text-color-47: var(--ti-lowcode-base-dark-18); + --ti-lowcode-common-text-color-48: var(--ti-lowcode-base-blue-15); + --ti-lowcode-common-text-color-49: var(--ti-lowcode-base-dark-8); + --ti-lowcode-common-text-color-50: var(--ti-lowcode-base-gray-29); + --ti-lowcode-common-text-color-51: var(--ti-lowcode-base-rgba-15); + --ti-lowcode-common-text-color-52: var(--ti-lowcode-base-rgba-17); + --ti-lowcode-common-text-color-53: var(--ti-lowcode-base-rgba-18); + --ti-lowcode-common-text-color-54: var(--ti-lowcode-base-rgba-19); + --ti-lowcode-common-text-color-55: var(--ti-lowcode-base-gray-62); + --ti-lowcode-common-text-color-56: var(--ti-lowcode-base-gray-24); + --ti-lowcode-common-text-color-57: var(--ti-lowcode-base-gray-27); + --ti-lowcode-common-text-color-58: var(--ti-lowcode-base-gray-28); + --ti-lowcode-common-text-color-59: var(--ti-lowcode-base-gray-38); + --ti-lowcode-common-text-color-60: var(--ti-lowcode-base-gray-63); + --ti-lowcode-common-text-color-61: var(--ti-lowcode-base-red-14); + --ti-lowcode-common-text-color-62: var(--ti-lowcode-base-rgba-22); // 边框 + --ti-lowcode-common-border-none: var(--ti-lowcode-base-button-border-none); --ti-lowcode-common-border-color-1: var(--ti-lowcode-base-gray-9); --ti-lowcode-common-border-color-2: var(--ti-lowcode-base-gray-6); --ti-lowcode-common-border-color-3: var(--ti-lowcode-base-gray-35); @@ -117,6 +182,26 @@ --ti-lowcode-common-border-color-23: var(--ti-lowcode-base-gray-29); --ti-lowcode-common-border-color-24: var(--ti-lowcode-base-green-15); --ti-lowcode-common-border-color-25: var(--ti-lowcode-base-gray-60); + --ti-lowcode-common-border-color-26: var(--ti-lowcode-base-dark-9); + --ti-lowcode-common-border-color-27: var(--ti-lowcode-base-dark-13); + --ti-lowcode-common-border-color-28: var(--ti-lowcode-base-dark-19); + --ti-lowcode-common-border-color-29: var(--ti-lowcode-base-blue-14); + --ti-lowcode-common-border-color-30: var(--ti-lowcode-base-dark-text-color); + --ti-lowcode-common-border-color-31: var(--ti-lowcode-base-dark-6); + --ti-lowcode-common-border-color-32: var(--ti-lowcode-base-dark-12); + --ti-lowcode-common-border-color-33: var(--ti-lowcode-base-rgba-13); + --ti-lowcode-common-border-color-34: var(--ti-lowcode-base-gray-44); + --ti-lowcode-common-border-color-35: var(--ti-lowcode-base-rose-14); + --ti-lowcode-common-border-color-36: var(--ti-lowcode-base-rgba-8); + --ti-lowcode-common-border-color-37: var(--ti-lowcode-base-gray-21); + --ti-lowcode-common-border-color-38: var(--ti-lowcode-base-gray-34); + --ti-lowcode-common-border-color-39: var(--ti-lowcode-base-gray-31); + --ti-lowcode-common-border-color-40: var(--ti-lowcode-base-mint-14); + --ti-lowcode-common-border-color-41: var(--ti-lowcode-base-gray-23); + --ti-lowcode-common-border-color-42: var(--ti-lowcode-base-dark-2); + --ti-lowcode-common-border-color-43: var(--ti-lowcode-base-dark-22); + --ti-lowcode-common-border-color-44: var(--ti-lowcode-base-gray-12); + --ti-lowcode-common-border-color-45: var(--ti-lowcode-base-dark-21); // 提示 --ti-lowcode-common-primary-color: var(--ti-lowcode-base-blue-6); @@ -157,6 +242,7 @@ // 权重值 --ti-lowcode-common-font-weight-normal: var(--ti-lowcode-base-font-weight-bold); + --ti-lowcode-common-font-weight-400: var(--ti-lowcode-base-font-weight-4); // 其他 --ti-lowcode-common-dark-1: var(--ti-lowcode-base-dark-1); @@ -175,5 +261,6 @@ --ti-lowcode-common-text-hover: var(--ti-lowcode-base-blue-17); --ti-lowcode-common-component-hover-bg: var(--ti-lowcode-base-gray-5); --ti-lowcode-common-rgba-1: var(--ti-lowcode-base-rgba-1); + --ti-lowcode-common-rgba-10: var(--ti-lowcode-base-rgba-10); --ti-lowcode-common-color-unset: var(--ti-base-color-unset); } diff --git a/packages/theme/common/global.less b/packages/theme/common/global.less index aaeef86fb..e570c6b77 100644 --- a/packages/theme/common/global.less +++ b/packages/theme/common/global.less @@ -590,7 +590,7 @@ } &.tiny-pager__selector { - background-color: var(--ti-lowcode-common-hover-bg-1); + background-color: var(--ti-lowcode-common-component-bg-25); .tiny-pager__selector-poplist { background: var(--ti-lowcode-toolbar-view-hover-bg); diff --git a/packages/theme/dark/block.less b/packages/theme/dark/block.less index 2b43fe9cb..813f5e724 100644 --- a/packages/theme/dark/block.less +++ b/packages/theme/dark/block.less @@ -1,57 +1,59 @@ :root { // 历史备份列表 - --ti-lowcode-component-block-history-list-item-border-color: var(--ti-lowcode-common-border-color-1); // 组件边框色 + --ti-lowcode-component-block-history-list-item-border-color: var(--ti-lowcode-common-border-color-26); // 组件边框色 // 组件 hover 背景 色 - --ti-lowcode-component-block-history-list-item-hover-bg: var(--ti-lowcode-common-component-hover-bg); + --ti-lowcode-component-block-history-list-item-hover-bg: var(--ti-lowcode-common-component-bg-46); // 组件默认颜色 - --ti-lowcode-component-block-history-list-item-text-color: var(--ti-lowcode-common-secondary-text-color); + --ti-lowcode-component-block-history-list-item-text-color: var(--ti-lowcode-common-text-color-35); // 预览还原 hover 颜色 - --ti-lowcode-component-block-history-list-item-btn-hover-color: var(--ti-lowcode-common-primary-text-color); - --ti-lowcode-component-block-history-list-item-btn-hover-bg: var(--ti-lowcode-common-hover-bg-1); // 预览还原背景色 + --ti-lowcode-component-block-history-list-item-btn-hover-color: var(--ti-lowcode-common-text-color-3); + --ti-lowcode-component-block-history-list-item-btn-hover-bg: var( + --ti-lowcode-common-component-bg-25 + ); // 预览还原背景色 // 预览还原边框色 --ti-lowcode-component-block-history-list-item-btn-border-color: var(--ti-lowcode-common-border-color-3); --ti-lowcode-component-block-history-list-item-title-color: var(--ti-lowcode-common-text-color-2); // 组件title颜色 - --ti-lowcode-component-block-history-list-item-time-color: rgba(173, 176, 184, 0.6); // 组件时间颜色 + --ti-lowcode-component-block-history-list-item-time-color: var(--ti-lowcode-common-rgba-10); // 组件时间颜色 // 区块列表 - --ti-lowcode-component-block-list-item-color: var(--ti-lowcode-common-secondary-text-color); // 区块列表颜色 - --ti-lowcode-component-block-list-shortcut-title-color: var(--ti-lowcode-common-primary-text-color); // 快照标题颜色 - --ti-lowcode-component-block-list-shortcut-bg: var(--ti-lowcode-common-component-bg); // 快照标题颜色 + --ti-lowcode-component-block-list-item-color: var(--ti-lowcode-common-text-color-35); // 区块列表颜色 + --ti-lowcode-component-block-list-shortcut-title-color: var(--ti-lowcode-common-text-color-3); // 快照标题颜色 + --ti-lowcode-component-block-list-shortcut-bg: var(--ti-lowcode-common-component-bg-47); // 快照标题颜色 --ti-lowcode-component-block-list-border-color: var(--ti-lowcode-common-border-color-4); // 快照标题颜色 - --ti-lowcode-component-block-list-item-active-bg: var(--ti-lowcode-common-component-hover-bg); // 区块 active 背景色 - --ti-lowcode-component-block-list-item-tag-bg: #8d5421; - --ti-lowcode-component-block-version-list-item-border-color: #202020; - --ti-lowcode-component-block-version-list-item-bg: #292929; - --ti-lowcode-component-block-version-list-version-bg: #323644; - --ti-lowcode-component-block-version-list-version-color: #476be5; - --ti-lowcode-component-block-version-list-panel-title-color: var(--ti-lowcode-common-primary-text-color); - --ti-lowcode-component-block-version-list-time-color: var(--ti-lowcode-common-text-color-5); - --ti-lowcode-component-block-version-list-desc-color: #63666c; - --ti-lowcode-component-block-version-list-current-version-color: var(--ti-lowcode-base-text-color-2); - --ti-lowcode-component-block-setting-popover-bg: #202020; - --ti-lowcode-component-block-setting-item-hover-bg: #202020; - --ti-lowcode-component-block-setting-item-text-color: var(--ti-lowcode-common-secondary-text-color); + --ti-lowcode-component-block-list-item-active-bg: var(--ti-lowcode-common-component-bg-46); // 区块 active 背景色 + --ti-lowcode-component-block-list-item-tag-bg: var(--ti-lowcode-common-component-bg-48); + --ti-lowcode-component-block-version-list-item-border-color: var(--ti-lowcode-common-component-bg-29); + --ti-lowcode-component-block-version-list-item-bg: var(--ti-lowcode-common-component-bg-49); + --ti-lowcode-component-block-version-list-version-bg: var(--ti-lowcode-common-component-bg-50); + --ti-lowcode-component-block-version-list-version-color: var(--ti-lowcode-common-text-color-36); + --ti-lowcode-component-block-version-list-panel-title-color: var(--ti-lowcode-common-text-color-3); + --ti-lowcode-component-block-version-list-time-color: var(--ti-lowcode-common-text-color-14); + --ti-lowcode-component-block-version-list-desc-color: var(--ti-lowcode-common-text-color-37); + --ti-lowcode-component-block-version-list-current-version-color: var(--ti-lowcode-common-primary-color); + --ti-lowcode-component-block-setting-popover-bg: var(--ti-lowcode-common-component-bg-29); + --ti-lowcode-component-block-setting-item-hover-bg: var(--ti-lowcode-common-component-bg-29); + --ti-lowcode-component-block-setting-item-text-color: var(--ti-lowcode-common-text-color-35); // 区块管理 - 添加分类 - --ti-lowcode-component-block-list-add-group-btn-bg: var(--ti-lowcode-common-header-bg); - --ti-lowcode-component-block-list-add-group-btn-border: none; - --ti-lowcode-component-block-list-setting-btn-color: var(--ti-lowcode-common-text-color-5); + --ti-lowcode-component-block-list-add-group-btn-bg: var(--ti-lowcode-common-component-bg-29); + --ti-lowcode-component-block-list-add-group-btn-border: var(--ti-lowcode-common-border-none); + --ti-lowcode-component-block-list-setting-btn-color: var(--ti-lowcode-common-text-color-14); --ti-lowcode-component-block-list-setting-btn-hover-color: var(--ti-lowcode-common-primary-color); - --ti-lowcode-component-block-list-add-group-btn-border-radius: none; + --ti-lowcode-component-block-list-add-group-btn-border-radius: var(--ti-lowcode-common-border-none); } .block-setting-content { - --ti-lowcode-block-config-form-item-color: var(--ti-lowcode-toolbar-breadcrumb-color); + --ti-lowcode-block-config-form-item-color: var(--ti-lowcode-common-text-color-2); .tiny-form-item.is-error .tiny-input__inner { - background-color: var(--ti-lowcode-tabs-bg); + background-color: var(--ti-lowcode-common-component-bg-51); } } // 区块设置 - 标签 .block-tag-create { - --ti-lowcode-block-config-tag-color: var(--ti-lowcode-toolbar-breadcrumb-color); - --ti-lowcode-block-config-tag-bg: var(--ti-lowcode-input-bg); - --ti-lowcode-block-config-tag-hover-color: var(--ti-lowcode-toolbar-icon-color); - --ti-lowcode-block-config-tag-hover-bg: transparent; - --ti-lowcode-block-config-tag-close-color: var(--ti-lowcode-toolbar-icon-color); + --ti-lowcode-block-config-tag-color: var(--ti-lowcode-common-text-color-2); + --ti-lowcode-block-config-tag-bg: var(--ti-lowcode-common-component-bg-52); + --ti-lowcode-block-config-tag-hover-color: var(--ti-lowcode-common-text-color-3); + --ti-lowcode-block-config-tag-hover-bg: var(--ti-lowcode-common-bg-0); + --ti-lowcode-block-config-tag-close-color: var(--ti-lowcode-common-text-color-3); } diff --git a/packages/theme/dark/bridge.less b/packages/theme/dark/bridge.less index 44dea9e3b..d7c07e315 100644 --- a/packages/theme/dark/bridge.less +++ b/packages/theme/dark/bridge.less @@ -1,11 +1,11 @@ .plugin-panel { // 资源管理 - --ti-lowcode-bridge-list-color: #adb0b8; - --ti-lowcode-bridge-list-bg: #3c3c3c; - --ti-lowcode-birdge-editor-border-color: #262626; - --ti-lowcode-birdge-input-label-color: #adb0b8; + --ti-lowcode-bridge-list-color: var(--ti-lowcode-common-text-color-35); + --ti-lowcode-bridge-list-bg: var(--ti-lowcode-common-component-bg-46); + --ti-lowcode-birdge-editor-border-color: var(--ti-lowcode-common-border-color-27); + --ti-lowcode-birdge-input-label-color: var(--ti-lowcode-common-text-color-35); // npm工具类中代码预览的主题 - --ti-lowcode-birdge-code-preview-color: var(--ti-lowcode-base-gray-20); - --ti-lowcode-birdge-code-preview-bg-color: #262626; + --ti-lowcode-birdge-code-preview-color: var(--ti-lowcode-common-text-color-2); + --ti-lowcode-birdge-code-preview-bg-color: var(--ti-lowcode-common-component-bg-52); } diff --git a/packages/theme/dark/canvas.less b/packages/theme/dark/canvas.less index 9201f8342..61d57e24c 100644 --- a/packages/theme/dark/canvas.less +++ b/packages/theme/dark/canvas.less @@ -1,28 +1,26 @@ #canvas-wrap { - --ti-lowcode-canvas-rect-border-color: var(--ti-lowcode-base-primary-color-2); - --ti-lowcode-canvas-hover-line-in-bg-color: rgba(0, 255, 0, 0.1); - --ti-lowcode-canvas-hover-line-forbid-bg-color: var(--ti-lowcode-base-error-color); - --ti-lowcode-canvas-hover-line-in-forbid-bg-color: rgba(242, 48, 48, 0.3); - --ti-lowcode-canvas-choose-slot-border-color: var(--ti-lowcode-base-text-color-2); - --ti-lowcode-canvas-choose-slot-color: var(--ti-lowcode-base-text-color-2); - --ti-lowcode-canvas-corner-mark-left-color: var(--ti-lowcode-base-text-color-2); - --ti-lowcode-canvas-corner-mark-bottom-right-color: var(--ti-lowcode-base-text-color-3); - --ti-lowcode-canvas-corner-mark-bottom-right-border-color: #c2c2c2; - --ti-lowcode-canvas-corner-mark-bottom-right-bg-color: #f5f5f5; - --ti-lowcode-canvas-corner-mark-right-color: var(--ti-lowcode-base-gray-0); - --ti-lowcode-canvas-corner-mark-right-bg-color: var(--ti-lowcode-base-primary-color-2); - --ti-lowcode-canvas-select-corner-mark-left-color: var(--ti-lowcode-base-gray-0); - --ti-lowcode-canvas-select-corner-mark-left-bg-color: var(--ti-lowcode-base-primary-color-2); + --ti-lowcode-canvas-rect-border-color: var(--ti-lowcode-common-border-color-6); + --ti-lowcode-canvas-hover-line-in-bg-color: var(--ti-lowcode-common-component-bg-53); + --ti-lowcode-canvas-hover-line-forbid-bg-color: var(--ti-lowcode-common-component-bg-7); + --ti-lowcode-canvas-hover-line-in-forbid-bg-color: var(--ti-lowcode-common-component-bg-54); + --ti-lowcode-canvas-choose-slot-border-color: var(--ti-lowcode-common-border-color-6); + --ti-lowcode-canvas-choose-slot-color: var(--ti-lowcode-common-primary-color); + --ti-lowcode-canvas-corner-mark-left-color: var(--ti-lowcode-common-primary-color); + --ti-lowcode-canvas-corner-mark-bottom-right-color: var(--ti-lowcode-common-text-color-5); + --ti-lowcode-canvas-corner-mark-bottom-right-border-color: var(--ti-lowcode-common-border-color-13); + --ti-lowcode-canvas-corner-mark-bottom-right-bg-color: var(--ti-lowcode-common-component-bg-1); + --ti-lowcode-canvas-corner-mark-right-color: var(--ti-lowcode-common-text-color-3); + --ti-lowcode-canvas-corner-mark-right-bg-color: var(--ti-lowcode-common-component-bg-9); + --ti-lowcode-canvas-select-corner-mark-left-color: var(--ti-lowcode-common-text-color-3); + --ti-lowcode-canvas-select-corner-mark-left-bg-color: var(--ti-lowcode-common-component-bg-9); - --ti-lowcode-canvas-footer-border-top-color: transparent; // canvas 底部面包屑 边框色 - --ti-lowcode-canvas-tab-handle-bg: var(--ti-lowcode-common-component-bg); // canvas 宽度拖动手柄 背景色 + --ti-lowcode-canvas-footer-border-top-color: var(--ti-lowcode-common-text-color-38); // canvas 底部面包屑 边框色 + --ti-lowcode-canvas-tab-handle-bg: var(--ti-lowcode-common-component-bg-47); // canvas 宽度拖动手柄 背景色 --ti-lowcode-canvas-tab-handle-hover-bg: var(--ti-lowcode-common-primary-color); // canvas 宽度拖动手柄 hover 背景色 - --ti-lowcode-canvas-tab-handle-color: var( - --ti-lowcode-common-secondary-text-color - ); // canvas 宽度拖动手柄 两条竖线颜色 - --ti-lowcode-canvas-menu-bg: var(--ti-lowcode-common-component-hover-bg); // canvas 右键菜单背景 - --ti-lowcode-canvas-menu-item-color: #adb0b8; // 右键菜单文字颜色 - --ti-lowcode-canvas-menu-item-hover-bg-color: #5e5e5e; - --ti-lowcode-canvas-menu-border-color: var(--ti-lowcode-common-border-color-2); - --ti-lowcode-canvas-menu-item-disabled-color: var(--ti-lowcode-base-text-color-3); + --ti-lowcode-canvas-tab-handle-color: var(--ti-lowcode-common-text-color-35); // canvas 宽度拖动手柄 两条竖线颜色 + --ti-lowcode-canvas-menu-bg: var(--ti-lowcode-common-component-bg-46); // canvas 右键菜单背景 + --ti-lowcode-canvas-menu-item-color: var(--ti-lowcode-common-text-color-35); // 右键菜单文字颜色 + --ti-lowcode-canvas-menu-item-hover-bg-color: var(--ti-lowcode-common-component-bg-55); + --ti-lowcode-canvas-menu-border-color: var(--ti-lowcode-common-border-color-28); + --ti-lowcode-canvas-menu-item-disabled-color: var(--ti-lowcode-common-text-color-14); } diff --git a/packages/theme/dark/datasource.less b/packages/theme/dark/datasource.less index 2ad563e6e..a4ccb68dd 100644 --- a/packages/theme/dark/datasource.less +++ b/packages/theme/dark/datasource.less @@ -1,44 +1,46 @@ :root { - --ti-lowcode-datasource-toolbar-icon-color: var(--ti-lowcode-common-primary-text-color); - --ti-lowcode-datasource-tabs-border-color: #313131; - --ti-lowcode-datasource-toolbar-breadcrumb-color: var(--ti-lowcode-base-gray-20); - --ti-lowcode-datasource-json-border-colorr: var(--ti-lowcode-common-primary-color); - --ti-lowcode-datasource-tree-border-color: #2ad986; - --ti-lowcode-datasource-common-primary-color: var(--ti-lowcode-common-primary-color); - --ti-lowcode-datasource-success-border-color: #2ad986; - --ti-lowcode-datasource-input-icon-color: #737373; - --ti-lowcode-datasource-dialog-demo-border-color: #5e5e5e; - --ti-lowcode-datasource-canvas-wrap-bg: #5e5e5e; - --ti-lowcode-datasource-dialog-font-color: var(--ti-lowcode-base-invalidate-color); - --ti-lowcode-datasource-toolbar-bg: #404040; - --ti-lowcode-datasource-description-error-color: #ff0000; - --ti-lowcode-datasource-common-text-main-color: var(--ti-lowcode-base-invalidate-color); - --ti-lowcode-datasource-toolbar-more-hover-color: var(--ti-lowcode-base-invalidate-color); - --ti-lowcode-datasource-delete-button-hover-bg: #c92c3f; - --ti-lowcode-datasource-common-text-color-5: var(--ti-lowcode-common-text-color-5); - --ti-lowcode-datasource-common-empty-color: var(--ti-lowcode-common-empty-color); - --ti-lowcode-datasource-toolbar-view-hover-bg: #4d4d4d; - --ti-lowcode-datasource-common-hover-bg-1: var(--ti-lowcode-common-hover-bg-1); - --ti-lowcode-datasource-common-primary-text-color: var(--ti-lowcode-base-gray-10); - --ti-lowcode-datasource-icon-hover-bg: #e5e5e5; - --ti-lowcode-datasource-tabs-bg: #2b2b2b; - --ti-lowcode-datasource-canvas-handle-hover-bg: var(--ti-lowcode-common-primary-color); - --ti-lowcode-datasource-tabs-active-bg: #2b2b2b; + --ti-lowcode-datasource-toolbar-icon-color: var(--ti-lowcode-common-text-color-3); + --ti-lowcode-datasource-tabs-border-color: var(--ti-lowcode-common-border-color-28); + --ti-lowcode-datasource-toolbar-breadcrumb-color: var(--ti-lowcode-common-text-color-2); + --ti-lowcode-datasource-json-border-color: var(--ti-lowcode-common-border-color-29); + --ti-lowcode-datasource-tree-border-color: var(--ti-lowcode-common-border-color-24); + --ti-lowcode-datasource-common-primary-color: var(--ti-lowcode-common-text-color-17); + --ti-lowcode-datasource-success-border-color: var(--ti-lowcode-common-border-color-24); + --ti-lowcode-datasource-input-icon-color: var(--ti-lowcode-common-text-color-29); + --ti-lowcode-datasource-dialog-demo-border-color: var(--ti-lowcode-common-border-color-23); + --ti-lowcode-datasource-canvas-wrap-bg: var(--ti-lowcode-common-component-bg-55); + --ti-lowcode-datasource-dialog-font-color: var(--ti-lowcode-common-text-color-39); + --ti-lowcode-datasource-toolbar-bg: var(--ti-lowcode-common-component-bg-57); + --ti-lowcode-datasource-description-error-color: var(--ti-lowcode-common-error-color-1); + --ti-lowcode-datasource-common-text-main-color: var(--ti-lowcode-common-text-color-39); + --ti-lowcode-datasource-toolbar-more-hover-color: var(--ti-lowcode-common-text-color-39); + --ti-lowcode-datasource-delete-button-hover-bg: var(--ti-lowcode-common-component-bg-38); + --ti-lowcode-datasource-common-text-color-5: var(--ti-lowcode-common-text-color-14); + --ti-lowcode-datasource-common-empty-color: var(--ti-lowcode-common-text-color-40); + + --ti-lowcode-datasource-toolbar-view-hover-bg: var(--ti-lowcode-common-component-bg-59); + --ti-lowcode-datasource-common-hover-bg-1: var(--ti-lowcode-common-component-bg-35); + --ti-lowcode-datasource-common-primary-text-color: var(--ti-lowcode-common-text-color-41); + --ti-lowcode-datasource-icon-hover-bg: var(--ti-lowcode-common-text-color-41); + --ti-lowcode-datasource-tabs-bg: var(--ti-lowcode-common-component-bg-51); + --ti-lowcode-datasource-canvas-handle-hover-bg: var(--ti-lowcode-common-component-bg-56); + --ti-lowcode-datasource-tabs-active-bg: var(--ti-lowcode-common-component-bg-51); --ti-lowcode-datasource-common-error-color: var(--ti-lowcode-common-error-color); - --ti-lowcode-datasource-description-minor-color: #ababab; - --ti-lowcode-datasource-description-warning-color: #facb4b; - --ti-lowcode-datasource-error-tip-color: #de504e; - --ti-lowcode-datasource-label-color: var(--ti-lowcode-common-secondary-text-color); // light - --ti-lowcode-datasource-list-hover-color: var(--ti-lowcode-common-component-hover-bg); - --ti-lowcode-datasource-btn-click-color: var(--ti-lowcode-common-bg-7); - --ti-lowcode-datasource-btn-border-color: var(--ti-lowcode-base-gray-10); - --ti-lowcode-datasource-tabs-bottom-border-color: var(--ti-lowcode-common-primary-color); - --ti-lowcode-datasource-list-bottom-border-color: var(--ti-lowcode-common-header-bg); - --ti-lowcode-datasource-switch-off-bg-color: var(--ti-lowcode-base-gray-50); - --ti-lowcode-datasource-switch-on-bg-color: var(--ti-lowcode-base-blue-6); - --ti-lowcode-datasource-respones-select-color-bg: var(--ti-lowcode-common-bg-4); - --ti-lowcode-datasource-respones-color-bg: var(--ti-lowcode-base-blue-6); - --ti-lowcode-datasource-respones-border-color-bg: var(--ti-lowcode-base-text-link-color-3); - --ti-lowcode-datasource-select-border-right-color-bg: var(--ti-lowcode-common-text-color-5); - --ti-lowcode-datasource-select-border-color: #2b2b2b; + --ti-lowcode-datasource-description-minor-color: var(--ti-lowcode-common-third-text-color); + --ti-lowcode-datasource-description-warning-color: var(--ti-lowcode-common-warning-color-2); + --ti-lowcode-datasource-error-tip-color: var(--ti-lowcode-common-text-color-42); + --ti-lowcode-datasource-label-color: var(--ti-lowcode-common-text-color-35); // light + --ti-lowcode-datasource-list-hover-color: var(--ti-lowcode-common-component-bg-46); + --ti-lowcode-datasource-btn-click-color: var(--ti-lowcode-common-text-color-14); + + --ti-lowcode-datasource-btn-border-color: var(--ti-lowcode-common-border-color-30); + --ti-lowcode-datasource-tabs-bottom-border-color: var(--ti-lowcode-common-text-color-17); + --ti-lowcode-datasource-list-bottom-border-color: var(--ti-lowcode-common-border-color-31); + --ti-lowcode-datasource-switch-off-bg-color: var(--ti-lowcode-common-component-bg-58); + --ti-lowcode-datasource-switch-on-bg-color: var(--ti-lowcode-common-component-bg-9); + --ti-lowcode-datasource-respones-select-color-bg: var(--ti-lowcode-common-component-bg-52); + --ti-lowcode-datasource-respones-color-bg: var(--ti-lowcode-common-component-bg-9); + --ti-lowcode-datasource-respones-border-color-bg: var(--ti-lowcode-common-component-bg-2); + --ti-lowcode-datasource-select-border-right-color-bg: var(--ti-lowcode-common-component-bg-58); + --ti-lowcode-datasource-select-border-color: var(--ti-lowcode-common-border-color-32); } diff --git a/packages/theme/dark/events.less b/packages/theme/dark/events.less index db31330fd..2053fed03 100644 --- a/packages/theme/dark/events.less +++ b/packages/theme/dark/events.less @@ -1,36 +1,36 @@ .setting-advanced-add-custom-event-tip { - --ti-lowcode-events-add-custom-event-tips-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-event-add-custom-event-tips-highlight-color: var(--ti-lowcode-base-warn-color); + --ti-lowcode-events-add-custom-event-tips-color: var(--ti-lowcode-common-text-color-41); + --ti-lowcode-event-add-custom-event-tips-highlight-color: var(--ti-lowcode-common-warning-color); } .setting-advanced-bind-event-list { - --ti-lowcode-events-bind-event-list-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-events-bind-event-list-item-disabled-color: var(--ti-lowcode-base-text-color-4); - --lowcode-events-bind-event-list-item-hover-bg-color: var(--ti-lowcode-base-bg-1); + --ti-lowcode-events-bind-event-list-color: var(--ti-lowcode-common-text-color-41); + --ti-lowcode-events-bind-event-list-item-disabled-color: var(--ti-lowcode-common-text-color-6); + --lowcode-events-bind-event-list-item-hover-bg-color: var(--ti-lowcode-common-component-bg-13); } .bind-action-list { - --ti-lowcode-events-bind-action-item-border-color: var(--ti-lowcode-base-split-color-1); - --ti-lowcode-events-event-bind-color: var(--ti-lowcode-base-primary-color-2); - --ti-lowcode-events-bind-action-item-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-events-bind-action-item-hover-bg-color: var(--ti-lowcode-base-bg-1); - --ti-lowcode-events-bind-action-item-linked-bg-color: var(--ti-lowcode-base-success-color); - --ti-lowcode-events-bind-action-item-linked-color: var(--ti-lowcode-base-gray-0); - --ti-lowcode-events-empty-action-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-events-empty-action-tips-strong-color: var(--ti-lowcode-base-warn-color); + --ti-lowcode-events-bind-action-item-border-color: var(--ti-lowcode-common-border-color-33); + --ti-lowcode-events-event-bind-color: var(--ti-lowcode-common-primary-color); + --ti-lowcode-events-bind-action-item-color: var(--ti-lowcode-common-text-color-41); + --ti-lowcode-events-bind-action-item-hover-bg-color: var(--ti-lowcode-common-component-bg-13); + --ti-lowcode-events-bind-action-item-linked-bg-color: var(--ti-lowcode-common-component-bg-60); + --ti-lowcode-events-bind-action-item-linked-color: var(--ti-lowcode-common-text-color-3); + --ti-lowcode-events-empty-action-color: var(--ti-lowcode-common-text-color-43); + --ti-lowcode-events-empty-action-tips-strong-color: var(--ti-lowcode-common-warning-color); } .advanced-config-container { - --ti-lowcode-events-advanced-config-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-events-advanced-label-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-events-advanced-binding-state-bg-color: var(--ti-lowcode-base-primary-color-2); - --ti-lowcode-events-advanced-binding-state-color: var(--ti-lowcode-base-gray-0); + --ti-lowcode-events-advanced-config-color: var(--ti-lowcode-common-text-color-41); + --ti-lowcode-events-advanced-label-color: var(--ti-lowcode-common-text-color-43); + --ti-lowcode-events-advanced-binding-state-bg-color: var(--ti-lowcode-common-component-bg-9); + --ti-lowcode-events-advanced-binding-state-color: var(--ti-lowcode-common-text-color-3); } .bind-event-dialog-content { - --ti-lowcode-bind-event-dialog-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-bind-event-dialog-content-left-border-color: var(--ti-lowcode-base-split-color-1); - --ti-lowcode-bind-event-dialog-content-right-monaco-border-color: var(--ti-lowcode-base-split-color-1); - --ti-lowcode-bind-event-dialog-content-left-list-item-active-bg-color: var(--ti-lowcode-base-gray-90); - --ti-lowcode-bind-event-dialog-new-action-tip-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-bind-event-dialog-action-selected-icon-color: var(--ti-lowcode-base-primary-color-2); - --ti-lowcode-bind-event-dialog-mark-bg-color: var(--ti-lowcode-base-bg-6); + --ti-lowcode-bind-event-dialog-color: var(--ti-lowcode-common-text-color-41); + --ti-lowcode-bind-event-dialog-content-left-border-color: var(--ti-lowcode-common-border-color-33); + --ti-lowcode-bind-event-dialog-content-right-monaco-border-color: var(--ti-lowcode-common-border-color-33); + --ti-lowcode-bind-event-dialog-content-left-list-item-active-bg-color: var(--ti-lowcode-common-component-bg-61); + --ti-lowcode-bind-event-dialog-new-action-tip-color: var(--ti-lowcode-common-text-color-43); + --ti-lowcode-bind-event-dialog-action-selected-icon-color: var(--ti-lowcode-common-primary-color); + --ti-lowcode-bind-event-dialog-mark-bg-color: var(--ti-lowcode-common-component-bg-62); } diff --git a/packages/theme/dark/gpt-dialog.less b/packages/theme/dark/gpt-dialog.less index 74fce60c0..5d7fe95d9 100644 --- a/packages/theme/dark/gpt-dialog.less +++ b/packages/theme/dark/gpt-dialog.less @@ -1,51 +1,51 @@ .bind-chatgpt { // chatGPT聊天窗问题模板文字颜色 - --ti-lowcode-chat-model-text: #dfe1e6; + --ti-lowcode-chat-model-text: var(--ti-lowcode-common-text-color-44); // chatGPT聊天窗问题模板文字边框颜色 - --ti-lowcode-chat-model-text-border: #8a8e99; + --ti-lowcode-chat-model-text-border: var(--ti-lowcode-common-border-color-34); // chatGPT聊天窗提问框图标 - --ti-lowcode-chat-model-input-icon: #8a8e99; + --ti-lowcode-chat-model-input-icon: var(--ti-lowcode-common-text-color-14); // chatGPT聊天窗用户头像边框色 - --ti-lowcode-chat-model-avatar-border: #8a8e99; + --ti-lowcode-chat-model-avatar-border: var(--ti-lowcode-common-border-color-34); // chatGPT聊天窗AI聊天文字背景 - --ti-lowcode-chat-model-ai-text-bg: #262626; + --ti-lowcode-chat-model-ai-text-bg: var(--ti-lowcode-common-component-bg-52); // chatGPT聊天窗AI聊天文字背景边框 - --ti-lowcode-chat-model-ai-text-border: #262626; + --ti-lowcode-chat-model-ai-text-border: var(--ti-lowcode-common-border-color-27); // chatGPT聊天窗AI聊天文字 - --ti-lowcode-chat-model-ai-text: #dfe1e6; + --ti-lowcode-chat-model-ai-text: var(--ti-lowcode-common-text-color-44); // chatGPT聊天窗AI连接失败文字背景 - --ti-lowcode-chat-model-ai-fail-text-bg: rgba(246, 111, 106, 0.1); + --ti-lowcode-chat-model-ai-fail-text-bg: var(--ti-lowcode-common-component-bg-64); // chatGPT聊天窗AI连接失败文字背景边框 - --ti-lowcode-chat-model-ai-fail-text-border: #f66f6a; + --ti-lowcode-chat-model-ai-fail-text-border: var(--ti-lowcode-common-border-color-35); // chatGPT聊天窗AI连接失败文字 - --ti-lowcode-chat-model-ai-fail-text: #dfe1e6; + --ti-lowcode-chat-model-ai-fail-text: var(--ti-lowcode-common-text-color-44); // chatGPT聊天窗用户聊天文字背景 - --ti-lowcode-chat-model-user-text-bg: #4f77ff; + --ti-lowcode-chat-model-user-text-bg: var(--ti-lowcode-common-component-bg-9); // chatGPT聊天窗用户聊天文字边框 - --ti-lowcode-chat-model-user-text-border: #4f77ff; + --ti-lowcode-chat-model-user-text-border: var(--ti-lowcode-common-border-color-6); // chatGPT聊天窗用户聊天文字 - --ti-lowcode-chat-model-user-text: #ffffff; + --ti-lowcode-chat-model-user-text: var(--ti-lowcode-common-text-color-3); // chatGPT聊天窗标题文字 - --ti-lowcode-chat-model-title: #dfe1e6; + --ti-lowcode-chat-model-title: var(--ti-lowcode-common-text-color-44); // chatGPT聊天窗基础图标 - --ti-lowcode-chat-model-common-icon: #8a887b; + --ti-lowcode-chat-model-common-icon: var(--ti-lowcode-common-text-color-14); // chatGPT聊天窗输入框背景 - --ti-lowcode-chat-model-input-bg: #1e1e1e; + --ti-lowcode-chat-model-input-bg: var(--ti-lowcode-common-component-bg-63); // chatGPT聊天窗发送按钮背景 - --ti-lowcode-chat-model-button-bg: #2f2f2f; + --ti-lowcode-chat-model-button-bg: var(--ti-lowcode-common-component-bg-47); // chatGPT聊天窗发送按钮边框 - --ti-lowcode-chat-model-button-border: #8a8e99; + --ti-lowcode-chat-model-button-border: var(--ti-lowcode-common-border-color-34); // chatGPT聊天窗发送按钮文字 - --ti-lowcode-chat-model-button-text: #dfe1e6; + --ti-lowcode-chat-model-button-text: var(--ti-lowcode-common-text-color-44); // chatGPT加载 --ti-lowcode-chat-loading-svg-color: var(--ti-lowcode-common-primary-color); - --ti-lowcode-chat-loading-text-color: #fff; + --ti-lowcode-chat-loading-text-color: var(--ti-lowcode-common-text-color-3); } .chat-model-popover { - --ti-lowcode-chat-model-popover-bg: #262626; - --ti-lowcode-chat-model-popover-color: #adb0b8; - --ti-lowcode-chat-model-popover-active-bg: #2f2f2f; - --ti-lowcode-chat-model-popover-active-color: #adb0b8; + --ti-lowcode-chat-model-popover-bg: var(--ti-lowcode-common-component-bg-52); + --ti-lowcode-chat-model-popover-color: var(--ti-lowcode-common-text-color-35); + --ti-lowcode-chat-model-popover-active-bg: var(--ti-lowcode-common-component-bg-47); + --ti-lowcode-chat-model-popover-active-color: var(--ti-lowcode-common-text-color-35); } diff --git a/packages/theme/dark/help.less b/packages/theme/dark/help.less index e3457c2ec..85c42c815 100644 --- a/packages/theme/dark/help.less +++ b/packages/theme/dark/help.less @@ -1,15 +1,15 @@ .shepherd-modal-overlay-container, .tiny-guide { - --ti-lowcode-help-guide-content-text-color: var(--ti-lowcode-base-text-color-4); - --ti-lowcode-help-guide-title-text-color: var(--ti-lowcode-base-text-color-4); - --ti-lowcode-help-guide-progress-style-text-color: var(--ti-lowcode-base-text-color-4); - --ti-lowcode-help-guide-mask-bg-color: var(--ti-lowcode-base-bg-3); + --ti-lowcode-help-guide-content-text-color: var(--ti-lowcode-common-text-color-8); + --ti-lowcode-help-guide-title-text-color: var(--ti-lowcode-common-text-color-8); + --ti-lowcode-help-guide-progress-style-text-color: var(--ti-lowcode-common-text-color-8); + --ti-lowcode-help-guide-mask-bg-color: var(--ti-lowcode-common-component-bg-65); } .help-plugin-box { - --ti-lowcode-help-box-bg-color: #3c3c3c; - --ti-lowcode-help-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.5); - --ti-lowcode-help-box-title-text-color: #ffffff; - --ti-lowcode-help-box-item-text-color: #adb0b8; - --ti-lowcode-help-box-question-border-top: rgba(255, 255, 255, 0.1); - --ti-lowcode-help-box-question-item-text-color: #4f77ff; + --ti-lowcode-help-box-bg-color: var(--ti-lowcode-common-component-bg-46); + --ti-lowcode-help-box-shadow: 0px 2px 6px 0px var(--ti-lowcode-common-text-color-21); + --ti-lowcode-help-box-title-text-color: var(--ti-lowcode-common-text-color-3); + --ti-lowcode-help-box-item-text-color: var(--ti-lowcode-common-text-color-35); + --ti-lowcode-help-box-question-border-top: var(--ti-lowcode-common-border-color-36); + --ti-lowcode-help-box-question-item-text-color: var(--ti-lowcode-common-text-color-17); } diff --git a/packages/theme/dark/i18n.less b/packages/theme/dark/i18n.less index c6a7258ae..5a47919df 100644 --- a/packages/theme/dark/i18n.less +++ b/packages/theme/dark/i18n.less @@ -1,8 +1,8 @@ :root { // 国际化表格操作图标颜色 - --ti-lowcode-i18n-operate-svg-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-i18n-operate-svg-color: var(--ti-lowcode-common-text-color-45); // 国际化表格加载中字体颜色 - --ti-lowcode-i18n-loading-text-color: #d9d9d9; + --ti-lowcode-i18n-loading-text-color: var(--ti-lowcode-common-text-color-2); // 国际化表格加载中图标颜色 - --ti-lowcode-i18n-loading-svg-color: #d9d9d9; + --ti-lowcode-i18n-loading-svg-color: var(--ti-lowcode-common-text-color-2); } diff --git a/packages/theme/dark/life-cycles.less b/packages/theme/dark/life-cycles.less index 69a2bce16..696d1dfea 100644 --- a/packages/theme/dark/life-cycles.less +++ b/packages/theme/dark/life-cycles.less @@ -1,7 +1,7 @@ :root { // 生命周期 - --ti-lowcode-life-cycle-alert-color: #fff; - --ti-lowcode-life-cycle-item-hover-bg: #202020; - --ti-lowcode-life-cycle-item-disable-color: #9d9d9d; - --ti-lowcode-life-cycle-editor-border: var(--ti-lowcode-base-default-button-border-color); + --ti-lowcode-life-cycle-alert-color: var(--ti-lowcode-common-text-color-3); + --ti-lowcode-life-cycle-item-hover-bg: var(--ti-lowcode-common-component-bg-29); + --ti-lowcode-life-cycle-item-disable-color: var(--ti-lowcode-common-text-color-46); + --ti-lowcode-life-cycle-editor-border: var(--ti-lowcode-common-border-color-39); } diff --git a/packages/theme/dark/materials.less b/packages/theme/dark/materials.less index 971e385f5..c1fd0e812 100644 --- a/packages/theme/dark/materials.less +++ b/packages/theme/dark/materials.less @@ -1,30 +1,30 @@ :root { // 带边框的图标按钮边框颜色 - --ti-lowcode-materials-border-icon-border-color: transparent; + --ti-lowcode-materials-border-icon-border-color: var(--ti-lowcode-common-border-color-18); // 带边框的图标按钮图标颜色 - --ti-lowcode-materials-border-icon-svg-color: #d9d9d9; + --ti-lowcode-materials-border-icon-svg-color: var(--ti-lowcode-common-text-color-2); // 带边框的图标按钮悬浮边框颜色 - --ti-lowcode-materials-border-icon-border-color-hover: transparent; + --ti-lowcode-materials-border-icon-border-color-hover: var(--ti-lowcode-common-bg-0); // 带边框的图标按钮背景颜色 - --ti-lowcode-materials-border-icon-bg-color: #202020; + --ti-lowcode-materials-border-icon-bg-color: var(--ti-lowcode-common-component-bg-29); // 区块分组下拉选项下边框颜色 - --ti-lowcode-materials-block-group-item-border-color: var(--ti-lowcode-common-primary-color); + --ti-lowcode-materials-block-group-item-border-color: var(--ti-lowcode-common-text-color-17); // 添加区块筛选模块字体颜色 - --ti-lowcode-materials-block-filter-text-color: var(--ti-lowcode-common-secondary-text-color); + --ti-lowcode-materials-block-filter-text-color: var(--ti-lowcode-common-text-color-35); // 添加区块筛选模块选中字体颜色 - --ti-lowcode-materials-block-filter-selected-text-color: var(--ti-lowcode-common-primary-color); + --ti-lowcode-materials-block-filter-selected-text-color: var(--ti-lowcode-common-text-color-17); // 添加区块穿梭框面板背景颜色 - --ti-lowcode-materials-block-transfer-bg-color: var(--ti-lowcode-common-component-bg); + --ti-lowcode-materials-block-transfer-bg-color: var(--ti-lowcode-common-component-bg-47); // 添加区块穿梭框面板头部字体颜色 - --ti-lowcode-materials-block-transfer-header-text-color: #d9d9d9; + --ti-lowcode-materials-block-transfer-header-text-color: var(--ti-lowcode-common-text-color-2); // 添加区块穿梭框面板头部背景颜色 - --ti-lowcode-materials-block-transfer-header-bg-color: var(--ti-lowcode-common-header-bg); + --ti-lowcode-materials-block-transfer-header-bg-color: var(--ti-lowcode-common-component-bg-29); // 区块分组添加区块筛选项 hover 颜色 --ti-lowcode-materials-block-filter-hover-color: var(--ti-lowcode-common-text-color-2); // 组件列表 组件名称颜色 - --ti-lowcode-materials-component-list-color: var(--ti-lowcode-toolbar-title-color); + --ti-lowcode-materials-component-list-color: var(--ti-lowcode-common-text-color-45); // 删除区块分组气泡弹窗背景色 - --ti-lowcode-materials-block-group-delete-popover-bg-color: var(--ti-lowcode-common-component-hover-bg); + --ti-lowcode-materials-block-group-delete-popover-bg-color: var(--ti-lowcode-common-component-bg-46); // 删除区块分组气泡弹窗标题色 - --ti-lowcode-materials-block-group-delete-popover-title-color: var(--ti-lowcode-common-secondary-text-color); + --ti-lowcode-materials-block-group-delete-popover-title-color: var(--ti-lowcode-common-text-color-35); } diff --git a/packages/theme/dark/metaComponent.less b/packages/theme/dark/metaComponent.less index cea6734aa..b6ce95015 100644 --- a/packages/theme/dark/metaComponent.less +++ b/packages/theme/dark/metaComponent.less @@ -1,65 +1,63 @@ :root { // MetaListItem - --ti-lowcode-meta-list-item-bg-color: var(--ti-lowcode-base-bg-5); - --ti-lowcode-meta-list-item-border-color: transparent; + --ti-lowcode-meta-list-item-bg-color: var(--ti-lowcode-common-component-bg-2); + --ti-lowcode-meta-list-item-border-color: var(--ti-lowcode-common-border-color-18); - --ti-lowcode-meta-list-top-color: var(--ti-lowcode-base-text-color-1); + --ti-lowcode-meta-list-top-color: var(--ti-lowcode-common-text-color-43); // MetaJsSlot - --lowcode-meta-js-slot-color: var(--ti-lowcode-base-text-color-1); + --lowcode-meta-js-slot-color: var(--ti-lowcode-common-text-color-43); // MetaCodeEditor - --ti-lowcode-meta-codeEditor-color: #d9d9d9; - --ti-lowcode-meta-codeEditor-border-color: var(--ti-lowcode-button-default-border-color); - --ti-lowcode-meta-codeEditor-hover-color: #fff; - --ti-lowcode-meta-codeEditor-border-hover-color: #6b6b6b; + --ti-lowcode-meta-codeEditor-color: var(--ti-lowcode-common-text-color-2); + --ti-lowcode-meta-codeEditor-border-color: var(--ti-lowcode-common-border-color-37); + --ti-lowcode-meta-codeEditor-hover-color: var(--ti-lowcode-common-text-color-3); + --ti-lowcode-meta-codeEditor-border-hover-color: var(--ti-lowcode-common-border-color-38); } // config-item label popover tips .prop-label-tips-container { - --ti-lowcode-meta-config-item-label-tips-desc-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-meta-config-item-label-tips-title-color: #fff; + --ti-lowcode-meta-config-item-label-tips-desc-color: var(--ti-lowcode-common-text-color-43); + --ti-lowcode-meta-config-item-label-tips-title-color: var(--ti-lowcode-common-text-color-3); } // configItem .properties-item { - --ti-lowcode-meta-config-item-error-tips-color: var(--ti-lowcode-base-error-color); - --ti-lowcode-meta-config-item-label-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-meta-config-item-bind-color: var(--ti-lowcode-base-gray-0); - --ti-lowcode-meta-config-item-bind-bg: var(--ti-lowcode-common-primary-color); - --ti-lowcode-meta-config-item-bind-bg: var(--ti-lowcode-common-primary-color); - --ti-lowcode-meta-config-item-active-bg: #fff; - --ti-lowcode-meta-config-item-link-color: var(--ti-lowcode-description-color); + --ti-lowcode-meta-config-item-error-tips-color: var(--ti-lowcode-common-status-error); + --ti-lowcode-meta-config-item-label-color: var(--ti-lowcode-common-text-color-43); + --ti-lowcode-meta-config-item-bind-color: var(--ti-lowcode-common-text-color-3); + --ti-lowcode-meta-config-item-bind-bg: var(--ti-lowcode-common-component-bg-56); + --ti-lowcode-meta-config-item-bind-bg: var(--ti-lowcode-common-component-bg-56); + --ti-lowcode-meta-config-item-active-bg: var(--ti-lowcode-common-component-bg); + --ti-lowcode-meta-config-item-link-color: var(--ti-lowcode-common-text-color-4); } // MetaBindVariable .meta-bind-variable-dialog-box { - --ti-lowcode-meta-bind-variable-icon-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-bind-variable-icon-hover-bg-color: var(--ti-lowcode-base-bg-1); - --ti-lowcode-meta-bind-variable-content-left-title-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-bind-variable-content-right-title-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-bind-variable-list-wrap-border-color: var(--ti-lowcode-base-default-button-border-color); - --ti-lowcode-meta-bind-variable-content-left-list-border-right-color: var( - --ti-lowcode-base-default-button-border-color - ); - --ti-lowcode-meta-bind-variable-list-item-hover-bg-color: var(--ti-lowcode-base-bg-1); - --ti-lowcode-meta-bind-variable-item-selected-bg-color: var(--ti-lowcode-base-bg-1); - --ti-lowcode-meta-bind-variable-item-hover-bg-color: var(--ti-lowcode-base-bg-1); - --ti-lowcode-meta-bind-variable-bottom-border-color: var(--ti-lowcode-base-default-button-border-color); - --ti-lowcode-meta-bind-variable-top-border-color: var(--ti-lowcode-base-default-button-border-color); - --ti-lowcode-meta-bind-variable-bottom-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-meta-bind-variable-content-left-list-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-bind-variable-item-text-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-bind-variable-header-alert-color: var(--ti-lowcode-base-gray-0); - --ti-lowcode-meta-bind-variable-top-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-meta-bind-variable-icon-color: var(--ti-lowcode-common-text-color-45); + --ti-lowcode-meta-bind-variable-icon-hover-bg-color: var(--ti-lowcode-common-component-bg-13); + --ti-lowcode-meta-bind-variable-content-left-title-color: var(--ti-lowcode-common-text-color-45); + --ti-lowcode-meta-bind-variable-content-right-title-color: var(--ti-lowcode-common-text-color-45); + --ti-lowcode-meta-bind-variable-list-wrap-border-color: var(--ti-lowcode-common-border-color-39); + --ti-lowcode-meta-bind-variable-content-left-list-border-right-color: var(--ti-lowcode-common-border-color-39); + --ti-lowcode-meta-bind-variable-list-item-hover-bg-color: var(--ti-lowcode-common-component-bg-13); + --ti-lowcode-meta-bind-variable-item-selected-bg-color: var(--ti-lowcode-common-component-bg-13); + --ti-lowcode-meta-bind-variable-item-hover-bg-color: var(--ti-lowcode-common-component-bg-13); + --ti-lowcode-meta-bind-variable-bottom-border-color: var(--ti-lowcode-common-border-color-39); + --ti-lowcode-meta-bind-variable-top-border-color: var(--ti-lowcode-common-border-color-39); + --ti-lowcode-meta-bind-variable-bottom-color: var(--ti-lowcode-common-text-color-43); + --ti-lowcode-meta-bind-variable-content-left-list-color: var(--ti-lowcode-common-text-color-45); + --ti-lowcode-meta-bind-variable-item-text-color: var(--ti-lowcode-common-text-color-45); + --ti-lowcode-meta-bind-variable-header-alert-color: var(--ti-lowcode-common-text-color-3); + --ti-lowcode-meta-bind-variable-top-color: var(--ti-lowcode-common-text-color-45); } // MetaCodeEditor .meta-code-editor-dialog-box { - --ti-lowcode-meta-code-editor-header-tips-container-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-code-editor-header-collapse-icon-color: var(--ti-lowcode-base-gray-50); - --ti-lowcode-meta-code-editor-header-collapse-icon-hover-color: var(--ti-lowcode-base-gray-40); - --ti-lowcode-meta-code-editor-header-tips-demo-bg-color: var(--ti-lowcode-base-gray-5); - --ti-lowcode-meta-code-editor-header-tips-demo-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-meta-code-editor-source-code-content-border-color: transparent; - --ti-lowcode-meta-code-editor-err-msg-color: var(--ti-lowcode-base-error-color); + --ti-lowcode-meta-code-editor-header-tips-container-color: var(--ti-lowcode-common-text-color-45); + --ti-lowcode-meta-code-editor-header-collapse-icon-color: var(--ti-lowcode-common-text-color-5); + --ti-lowcode-meta-code-editor-header-collapse-icon-hover-color: var(--ti-lowcode-common-text-color-43); + --ti-lowcode-meta-code-editor-header-tips-demo-bg-color: var(--ti-lowcode-common-component-bg-25); + --ti-lowcode-meta-code-editor-header-tips-demo-color: var(--ti-lowcode-common-text-color-45); + --ti-lowcode-meta-code-editor-source-code-content-border-color: var(--ti-lowcode-common-border-color-18); + --ti-lowcode-meta-code-editor-err-msg-color: var(--ti-lowcode-common-status-error); } diff --git a/packages/theme/dark/pageManage.less b/packages/theme/dark/pageManage.less index 4311afab2..a317a95b8 100644 --- a/packages/theme/dark/pageManage.less +++ b/packages/theme/dark/pageManage.less @@ -1,29 +1,29 @@ :root { - --ti-lowcode-page-manage-title-background-text-color: var(--ti-lowcode-common-secondary-text-color); - --ti-lowcode-page-manage-tip-background-text-color: var(--ti-lowcode-common-bg-2); - --ti-lowcode-page-manage-tip-text-color: var(--ti-lowcode-common-bg-2); - --ti-lowcode-page-manage-tip-border-color: var(--ti-lowcode-base-gray-70); + --ti-lowcode-page-manage-title-background-text-color: var(--ti-lowcode-common-text-color-35); + --ti-lowcode-page-manage-tip-background-text-color: var(--ti-lowcode-common-text-color-34); + --ti-lowcode-page-manage-tip-text-color: var(--ti-lowcode-common-text-color-34); + --ti-lowcode-page-manage-tip-border-color: var(--ti-lowcode-common-border-color-17); --ti-lowcode-page-manage-icon-text-color: var(--ti-lowcode-common-text-color-2); - --ti-lowcode-page-manage-tree-text-background-color: var(--ti-lowcode-common-bg-8); - --ti-lowcode-page-manage-tree-node-background-color: var(--ti-lowcode-common-component-bg); - --ti-lowcode-page-manage-tip-color: var(--ti-lowcode-base-gray-10); - --ti-lowcode-page-manage-input-background-color: var(--ti-lowcode-common-bg-9); - --ti-lowcode-page-manage-input-border-color: var(--ti-lowcode-common-text-color-4); - --ti-lowcode-page-manage-tips-icon-color: var(--ti-lowcode-common-primary-color); - --ti-lowcode-page-manage-content-tips-color: var(--ti-lowcode-common-text-color-5); - --ti-lowcode-page-manage-search-border-color: var(--ti-lowcode-common-border-color-2); - --ti-lowcode-page-manage-tree-color: var(--ti-lowcode-common-secondary-text-color); - --ti-lowcode-page-manage-page-tree-background-active-color: var(--ti-lowcode-common-component-hover-bg); - --ti-lowcode-page-manage-page-tree-background-hover-color: var(--ti-lowcode-common-primary-hover-color); - --ti-lowcode-page-manage-svg-hover-color: var(--ti-lowcode-common-primary-color); - --ti-lowcode-page-manage-text-color: var(--ti-lowcode-common-secondary-text-color); - --ti-lowcode-page-manage-input-head-text-color: var(--ti-lowcode-common-secondary-text-color); - --ti-lowcode-page-manage-btn-text-color: #999; - --ti-lowcode-page-manage-btn-text-color-2: var(--ti-lowcode-common-bg-7); + --ti-lowcode-page-manage-tree-text-background-color: var(--ti-lowcode-common-component-bg-66); + --ti-lowcode-page-manage-tree-node-background-color: var(--ti-lowcode-common-component-bg-47); + --ti-lowcode-page-manage-tip-color: var(--ti-lowcode-common-text-color-45); + --ti-lowcode-page-manage-input-background-color: var(--ti-lowcode-common-component-bg-63); + --ti-lowcode-page-manage-input-border-color: var(--ti-lowcode-common-border-color-40); + --ti-lowcode-page-manage-tips-icon-color: var(--ti-lowcode-common-text-color-17); + --ti-lowcode-page-manage-content-tips-color: var(--ti-lowcode-common-text-color-14); + --ti-lowcode-page-manage-search-border-color: var(--ti-lowcode-common-border-color-28); + --ti-lowcode-page-manage-tree-color: var(--ti-lowcode-common-text-color-35); + --ti-lowcode-page-manage-page-tree-background-active-color: var(--ti-lowcode-common-text-color-47); + --ti-lowcode-page-manage-page-tree-background-hover-color: var(--ti-lowcode-common-text-color-48); + --ti-lowcode-page-manage-svg-hover-color: var(--ti-lowcode-common-text-color-17); + --ti-lowcode-page-manage-text-color: var(--ti-lowcode-common-text-color-35); + --ti-lowcode-page-manage-input-head-text-color: var(--ti-lowcode-common-text-color-35); + --ti-lowcode-page-manage-btn-text-color: var(--ti-lowcode-common-text-color-22); + --ti-lowcode-page-manage-btn-text-color-2: var(--ti-lowcode-common-text-color-14); --ti-lowcode-page-manage-error-color: var(--ti-lowcode-common-error-color); - --ti-lowcode-page-manage-input-group-color: var(--ti-lowcode-common-bg-4); - --ti-lowcode-page-manage-input-group-border-color: var(--ti-lowcode-common-bg-4); - --ti-lowcode-page-manage-input-group-border-right-color: var(--ti-lowcode-common-component-hover-bg); + --ti-lowcode-page-manage-input-group-color: var(--ti-lowcode-common-component-bg-52); + --ti-lowcode-page-manage-input-group-border-color: var(--ti-lowcode-common-component-bg-52); + --ti-lowcode-page-manage-input-group-border-right-color: var(--ti-lowcode-common-text-color-47); --ti-lowcode-page-manage-input-output-text-color: var(--ti-lowcode-common-text-color-3); - --ti-lowcode-page-manage-input-output-text-bg-color: var(--ti-lowcode-base-blue-6); + --ti-lowcode-page-manage-input-output-text-bg-color: var(--ti-lowcode-common-component-bg-9); } diff --git a/packages/theme/dark/plugin-js.less b/packages/theme/dark/plugin-js.less index c07a1a2c3..90e337013 100644 --- a/packages/theme/dark/plugin-js.less +++ b/packages/theme/dark/plugin-js.less @@ -1,7 +1,7 @@ // 页面JS 插件面板 .plugin-page-js-container { - --ti-lowcode-plugin-js-bg: var(--ti-lowcode-common-component-bg); - --ti-lowcode-plugin-js-head-border-bottom-color: var(--ti-lowcode-common-bg-4); - --ti-lowcode-code-edit-content-border-color: var(--ti-lowcode-base-gray-60); - --ti-lowcode-plugin-js-help-link-color: var(--ti-lowcode-base-primary-color-2); + --ti-lowcode-plugin-js-bg: var(--ti-lowcode-common-component-bg-47); + --ti-lowcode-plugin-js-head-border-bottom-color: var(--ti-lowcode-common-border-color-27); + --ti-lowcode-code-edit-content-border-color: var(--ti-lowcode-common-border-color-39); + --ti-lowcode-plugin-js-help-link-color: var(--ti-lowcode-common-primary-color); } diff --git a/packages/theme/dark/setting-style.less b/packages/theme/dark/setting-style.less index 552eee7e3..8e1210822 100644 --- a/packages/theme/dark/setting-style.less +++ b/packages/theme/dark/setting-style.less @@ -1,8 +1,8 @@ :root { - --ti-lowcode-setting-style-input-bg: var(--ti-lowcode-base-blue-6); - --ti-lowcode-setting-style-font-color: var(--ti-lowcode-common-secondary-text-color); // light - --ti-lowcode-setting-style-input-font-color: var(--ti-lowcode-base-gray-0); - --ti-lowcode-setting-style-btn-font-color: var(--ti-lowcode-base-gray-40); - --ti-lowcode-setting-style-btn-border-color: var(--ti-lowcode-base-blue-6); - --ti-lowcode-setting-style-title-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-setting-style-input-bg: var(--ti-lowcode-common-component-bg-9); + --ti-lowcode-setting-style-font-color: var(--ti-lowcode-common-text-color-35); // light + --ti-lowcode-setting-style-input-font-color: var(--ti-lowcode-common-text-color-3); + --ti-lowcode-setting-style-btn-font-color: var(--ti-lowcode-common-text-color-43); + --ti-lowcode-setting-style-btn-border-color: var(--ti-lowcode-common-border-color-6); + --ti-lowcode-setting-style-title-color: var(--ti-lowcode-common-text-color-45); } diff --git a/packages/theme/dark/settings.less b/packages/theme/dark/settings.less index fe74f0cdc..097962013 100644 --- a/packages/theme/dark/settings.less +++ b/packages/theme/dark/settings.less @@ -1,46 +1,47 @@ // 右侧属性面板 css 变量 #tiny-right-panel { - --ti-lowcode-setting-panel-bg-color: #2f2f2f; - --ti-lowcode-setting-panel-tabs-item-title-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-setting-panel-tabs-item-title-active-color: #000; - --ti-lowcode-setting-panel-tabs-item-title-hover-color: #fff; + --ti-lowcode-setting-panel-bg-color: var(--ti-lowcode-common-component-bg-47); + --ti-lowcode-setting-panel-tabs-item-title-color: var(--ti-lowcode-common-text-color-43); + --ti-lowcode-setting-panel-tabs-item-title-active-color: var(--ti-lowcode-common-text-color-18); + --ti-lowcode-setting-panel-tabs-item-title-hover-color: var(--ti-lowcode-common-text-color-3); // 插件设置面板左侧边框 - --ti-lowcode-plugin-setting-panel-border-left-color: var(--ti-lowcode-common-component-bg); + --ti-lowcode-plugin-setting-panel-border-left-color: var(--ti-lowcode-common-text-color-49); } // 属性面板-属性-新建区块属性 .block-new-attr-popover { - --ti-lowcode-attr-popover-menu-item-hover-bg-color: var(--ti-lowcode-base-bg-1); - --ti-lowcode-attr-popover-menu-item-link-item-bg-color: var(--ti-lowcode-base-primary-color-2); - --ti-lowcode-attr-popover-menu-item-link-item-color: var(--ti-lowcode-base-gray-0); - --ti-lowcode-attr-popover-menu-item-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-attr-popover-menu-item-hover-bg-color: var(--ti-lowcode-common-component-bg-13); + --ti-lowcode-attr-popover-menu-item-link-item-bg-color: var(--ti-lowcode-common-component-bg-9); + --ti-lowcode-attr-popover-menu-item-link-item-color: var(--ti-lowcode-common-text-color-3); + --ti-lowcode-attr-popover-menu-item-color: var(--ti-lowcode-common-text-color-45); } // 属性面板-属性-区块关联属性 icon .block-link-field { - --ti-lowcode-block-link-field-link-icon-color: var(--ti-lowcode-base-gray-0); - --ti-lowcode-block-link-field-link-icon-bg-color: var(--ti-lowcode-base-success-color); + --ti-lowcode-block-link-field-link-icon-color: var(--ti-lowcode-common-text-color-3); + --ti-lowcode-block-link-field-link-icon-bg-color: var(--ti-lowcode-common-component-bg-60); } .className-container { - --ti-lowcode-className-selector-container-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-className-selector-container-error-border-color: var(--ti-lowcode-base-error-color); - --ti-lowcode-className-selector-container-error-bg-color: rgba(242, 48, 48, 0.1); - --ti-lowcode-className-selector-error-tips-color: var(--ti-lowcode-base-error-color); - --ti-lowcode-className-selector-container-border-color: var(--ti-lowcode-base-gray-40); - --ti-lowcode-className-selector-container-hover-border-color: var(--ti-lowcode-base-primary-color-2); - --ti-lowcode-className-selector-container-empty-tips-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-className-selector-container-label-bg-color: rgba(20, 118, 255, 0.1); - --ti-lowcode-className-selector-container-label-color: var(--ti-lowcode-base-blue-6); - --ti-lowcode-className-selector-container-option-btn-color: var(--ti-lowcode-base-blue-6); - --ti-lowcode-className-selector-dropdown-list-bg-color: #202020; - --ti-lowcode-className-selector-dropdown-list-item-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-className-selector-dropdown-list-item-active-bg-color: var(--ti-lowcode-base-bg-2); - --ti-lowcode-className-selector-title-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-className-selector-dropdown-list-tips-color: var(--ti-lowcode-base-text-color-3); + --ti-lowcode-className-selector-container-color: var(--ti-lowcode-common-text-color-45); + --ti-lowcode-className-selector-container-error-border-color: var(--ti-lowcode-common-status-error); + --ti-lowcode-className-selector-container-error-bg-color: var(--ti-lowcode-common-component-bg-17); + --ti-lowcode-className-selector-error-tips-color: var(--ti-lowcode-common-status-error); + + --ti-lowcode-className-selector-container-border-color: var(--ti-lowcode-common-border-color-41); + --ti-lowcode-className-selector-container-hover-border-color: var(--ti-lowcode-common-border-color-6); + --ti-lowcode-className-selector-container-empty-tips-color: var(--ti-lowcode-common-text-color-43); + --ti-lowcode-className-selector-container-label-bg-color: var(--ti-lowcode-common-component-bg-18); + --ti-lowcode-className-selector-container-label-color: var(--ti-lowcode-common-primary-color); + --ti-lowcode-className-selector-container-option-btn-color: var(--ti-lowcode-common-primary-color); + --ti-lowcode-className-selector-dropdown-list-bg-color: var(--ti-lowcode-common-component-bg-29); + --ti-lowcode-className-selector-dropdown-list-item-color: var(--ti-lowcode-common-text-color-45); + --ti-lowcode-className-selector-dropdown-list-item-active-bg-color: var(--ti-lowcode-common-component-bg-67); + --ti-lowcode-className-selector-title-color: var(--ti-lowcode-common-text-color-45); + --ti-lowcode-className-selector-dropdown-list-tips-color: var(--ti-lowcode-common-text-color-5); } :root { - --ti-lowcode-className-selector-del-popover-bg-color: var(--ti-lowcode-base-bg-5); - --ti-lowcode-className-selector-del-popover-title-color: var(--ti-lowcode-base-text-color); + --ti-lowcode-className-selector-del-popover-bg-color: var(--ti-lowcode-common-component-bg-68); + --ti-lowcode-className-selector-del-popover-title-color: var(--ti-lowcode-common-text-color-45); } diff --git a/packages/theme/dark/toolbar.less b/packages/theme/dark/toolbar.less index 322903a59..08b93081f 100644 --- a/packages/theme/dark/toolbar.less +++ b/packages/theme/dark/toolbar.less @@ -1,14 +1,14 @@ .tiny-engine-toolbar { // 头部工具栏 - --ti-lowcode-toolbar-border-bottom-color: transparent; - --ti-lowcode-toolbar-media-bg: var(--ti-lowcode-common-bg-6); - --ti-lowcode-toolbar-media-setting-border-color: var(--ti-lowcode-common-border-color-2); - --ti-lowcode-toolbar-title-color: #e6e6e6; - --ti-lowcode-toolbar-sub-title-color: var(--ti-lowcode-common-secondary-text-color); - --ti-lowcode-toolbar-hover-color: var(--ti-lowcode-common-component-hover-bg); - --ti-lowcode-toolbar-view-active-bg: #2f2f2f; - --ti-lowcode-toolbar-popover-bg: var(--ti-lowcode-base-gray-0); - --ti-lowcode-toolbar-active-color: #808080; - --ti-lowcode-toolbar-user-img-border-color: var(--ti-lowcode-base-gray-20); - --ti-lowcode-toolbar-dot-color: var(--ti-lowcode-common-danger-color); + --ti-lowcode-toolbar-border-bottom-color: var(--ti-lowcode-common-border-color-18); + --ti-lowcode-toolbar-media-bg: var(--ti-lowcode-common-component-bg-69); + --ti-lowcode-toolbar-media-setting-border-color: var(--ti-lowcode-common-border-color-28); + --ti-lowcode-toolbar-title-color: var(--ti-lowcode-common-text-color-45); + --ti-lowcode-toolbar-sub-title-color: var(--ti-lowcode-common-text-color-35); + --ti-lowcode-toolbar-hover-color: var(--ti-lowcode-common-text-color-47); + --ti-lowcode-toolbar-view-active-bg: var(--ti-lowcode-common-component-bg-47); + --ti-lowcode-toolbar-popover-bg: var(--ti-lowcode-common-component-bg); + --ti-lowcode-toolbar-active-color: var(--ti-lowcode-common-text-color-5); + --ti-lowcode-toolbar-user-img-border-color: var(--ti-lowcode-common-border-color-44); + --ti-lowcode-toolbar-dot-color: var(--ti-lowcode-common-text-color-61); } diff --git a/packages/theme/dark/tree.less b/packages/theme/dark/tree.less index b2d7556b0..75fb4873a 100644 --- a/packages/theme/dark/tree.less +++ b/packages/theme/dark/tree.less @@ -1,7 +1,7 @@ .outlinebox { - --ti-lowcode-tree-color: var(--ti-lowcode-common-secondary-text-color); - --ti-lowcode-tree-icon-color: rgba(138, 142, 153, 0.99); - --ti-lowcode-tree-icon-hover-color: var(--ti-lowcode-common-secondary-text-color); + --ti-lowcode-tree-color: var(--ti-lowcode-common-text-color-35); + --ti-lowcode-tree-icon-color: var(--ti-lowcode-common-text-color-62); + --ti-lowcode-tree-icon-hover-color: var(--ti-lowcode-common-text-color-35); --ti-lowcode-tree-selected-color: var(--ti-lowcode-common-text-color-3); - --ti-lowcode-tree-selected-bg: var(--ti-lowcode-common-primary-color); + --ti-lowcode-tree-selected-bg: var(--ti-lowcode-common-text-color-17); } diff --git a/packages/theme/dark/tutorial.less b/packages/theme/dark/tutorial.less index 28f063eef..0258727c7 100644 --- a/packages/theme/dark/tutorial.less +++ b/packages/theme/dark/tutorial.less @@ -1,5 +1,5 @@ #tiny-engine-left-panel { - --ti-lowcode-tutorial-primary-text-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-tutorial-primary-bg-color: var(--ti-lowcode-base-bg-2); - --ti-lowcode-tutorial-hover-bg-color: var(--ti-lowcode-base-bg); + --ti-lowcode-tutorial-primary-text-color: var(--ti-lowcode-common-text-color-8); + --ti-lowcode-tutorial-primary-bg-color: var(--ti-lowcode-common-component-bg-4); + --ti-lowcode-tutorial-hover-bg-color: var(--ti-lowcode-common-component-bg-1); } diff --git a/packages/theme/dark/variable.less b/packages/theme/dark/variable.less index e5256c6dc..9c41f746a 100644 --- a/packages/theme/dark/variable.less +++ b/packages/theme/dark/variable.less @@ -1,392 +1,396 @@ // 暗色主题 :root { // 基础配置，前缀为 --base - --base-min-width: 1280px; + --ti-common-min-width: 1280px; // tiny vue 的 css 变量，覆盖掉就好 .tiny-form-item { // 错误背景色 - --ti-form-item-error-bg-color: #433535; + --ti-form-item-error-bg-color: var(--ti-lowcode-common-component-bg-69); } .tiny-grid { - --ti-grid-light-color: var(--ti-lowcode-common-component-bg); - --ti-grid-text-color: var(--ti-lowcode-common-text-color-5); + --ti-grid-light-color: var(--ti-lowcode-common-text-color-49); + --ti-grid-text-color: var(--ti-lowcode-common-text-color-14); } - --ti-lowcode-trigger-color: #adb0b8; - --ti-lowcode-trigger-hover-color: #8a8e99; + --ti-lowcode-trigger-color: var(--ti-lowcode-common-text-color-35); + --ti-lowcode-trigger-hover-color: var(--ti-lowcode-common-text-color-14); --ti-lowcode-input-error-color: var(--ti-lowcode-common-error-color); - --ti-lowcode-input-error-bg: rgba(246, 111, 106, 0.1); - - --ti-lowcode-tabs-active-border-bottom-color: var(--ti-lowcode-common-primary-color); - --ti-lowcode-tabs-active-color: var(--ti-lowcode-common-primary-color); + --ti-lowcode-input-error-bg: var(--ti-lowcode-common-component-bg-64); + --ti-lowcode-tabs-active-border-bottom-color: var(--ti-lowcode-common-border-color-29); + --ti-lowcode-tabs-active-color: var(--ti-lowcode-common-text-color-17); --ti-lowcode-form-error-tips-color: var(--ti-lowcode-common-error-color); // 设置面板 - --ti-lowcode-component-setting-panel-label-color: var(--ti-lowcode-common-secondary-text-color); - --ti-lowcode-component-setting-panel-icon-color: var(--ti-lowcode-toolbar-breadcrumb-color); - --ti-lowcode-component-setting-panel-label-tips-bg: #f2f5fc; + --ti-lowcode-component-setting-panel-label-color: var(--ti-lowcode-common-text-color-35); + + --ti-lowcode-component-setting-panel-icon-color: var(--ti-lowcode-common-text-color-2); + --ti-lowcode-component-setting-panel-label-tips-bg: var(--ti-lowcode-common-component-bg-70); // 插件面板 - --ti-lowcode-plugin-panel-title-color: var(--ti-lowcode-dialog-font-color); // 插件面板标题色 - --ti-lowcode-plugin-panel-bg: var(--ti-lowcode-common-component-bg); // 插件面板背景色 - --ti-lowcode-plugin-panel-border-right-color: var(--ti-lowcode-canvas-border-color); // 插件面板右侧边框色 - --ti-lowcode-plugin-panel-header-border-bottom-color: #262626; // 插件面板头部区域底部边框线颜色 - --ti-lowcode-plugin-panel-title-font-weight: 400; // 插件面板标题加粗效果 + --ti-lowcode-plugin-panel-title-color: var(--ti-lowcode-common-text-color-39); // 插件面板标题色 + --ti-lowcode-plugin-panel-bg: var(--ti-lowcode-common-component-bg-47); // 插件面板背景色 + --ti-lowcode-plugin-panel-border-right-color: var(--ti-lowcode-common-border-color-42); // 插件面板右侧边框色 + --ti-lowcode-plugin-panel-header-border-bottom-color: var( + --ti-lowcode-common-border-color-27 + ); // 插件面板头部区域底部边框线颜色 + --ti-lowcode-plugin-panel-title-font-weight: var(--ti-lowcode-common-font-weight-400); // 插件面板标题加粗效果 // 插件设置面板 - --ti-lowcode-plugin-setting-panel-bg: var(--ti-lowcode-common-component-bg); // 插件设置面板背景色 + --ti-lowcode-plugin-setting-panel-bg: var(--ti-lowcode-common-component-bg-47); // 插件设置面板背景色 // ------ 各个模块的主题色，前缀为 --ti-lowcode-模块名 ------- - --ti-lowcode-design-plugin-color: #8a8e99; - --ti-lowcode-design-toolbar-icon-color: #8a8e99; + --ti-lowcode-design-plugin-color: var(--ti-lowcode-common-text-color-14); + --ti-lowcode-design-toolbar-icon-color: var(--ti-lowcode-common-text-color-14); --ti-lowcode-nav-panel-border-left-color: transparent; // 物料-组件列表 --ti-lowcode-material-component-list-border-color: var(--ti-lowcode-common-border-color-4); - --ti-lowcode-material-component-list-hover-bg: var(--ti-lowcode-common-component-hover-bg); + --ti-lowcode-material-component-list-hover-bg: var(--ti-lowcode-common-component-bg-46); // 页面管理 --ti-lowcode-page-tree-color: var(--ti-lowcode-common-secondary-text-color); - --ti-lowcode-page-tree-hover-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-page-tree-hover-color: var(--ti-lowcode-common-text-color-3); // 画布 canvas - --ti-lowcode-canvas-iframe-scrollbar-track-color: var(--ti-lowcode-canvas-wrap-bg); // iframe 内部滚动条 track 颜色 + --ti-lowcode-canvas-iframe-scrollbar-track-color: var( + --ti-lowcode-common-text-color-50 + ); // iframe 内部滚动条 track 颜色 // iframe 内部滚动条 滑块 颜色 - --ti-lowcode-canvas-iframe-scrollbar-thumb-color: var(--ti-lowcode-common-component-bg); + --ti-lowcode-canvas-iframe-scrollbar-thumb-color: var(--ti-lowcode-common-text-color-49); // 数据源 - --ti-lowcode-datasource-list-color: var(--ti-lowcode-toolbar-more-hover-color); + --ti-lowcode-datasource-list-color: var(--ti-lowcode-common-text-color-51); // 状态管理 - --ti-lowcode-data-list-color: var(--ti-lowcode-toolbar-icon-color); + --ti-lowcode-data-list-color: var(--ti-lowcode-common-text-color-3); // 状态管理面板头部的底部边框色 - --ti-lowcode-data-header-border-bottom-color: var(--ti-lowcode-common-bg-4); + --ti-lowcode-data-header-border-bottom-color: var(--ti-lowcode-common-border-color-27); // 状态管理示例背景色 - --ti-lowcode-data-example-bg-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-data-example-bg-color: var(--ti-lowcode-common-component-bg); // 状态管理示例文字色 - --ti-lowcode-data-example-color: var(--ti-lowcode-common-text-title-color); + --ti-lowcode-data-example-color: var(--ti-lowcode-common-text-color-15); // 添加高级属性文字颜色 - --ti-lowcode-data-advanced-text-color: #dfe1e6; + --ti-lowcode-data-advanced-text-color: var(--ti-lowcode-common-text-color-44); // 添加高级属性 hover 文字颜色 - --ti-lowcode-data-advanced-text-hover-color: #8a8e99; + --ti-lowcode-data-advanced-text-hover-color: var(--ti-lowcode-common-text-color-14); // 状态管理按激活背景色 - --ti-lowcode-data-radio-group-active-bg: var(--ti-lowcode-common-primary-color); + --ti-lowcode-data-radio-group-active-bg: var(--ti-lowcode-common-component-bg-56); // 状态管理按默认背景色 - --ti-lowcode-data-radio-group-bg: var(--ti-lowcode-common-header-bg); + --ti-lowcode-data-radio-group-bg: var(--ti-lowcode-common-component-bg-29); // 教程 - --ti-lowcode-tutorial-list-item-color: var(--ti-lowcode-toolbar-breadcrumb-color); + --ti-lowcode-tutorial-list-item-color: var(--ti-lowcode-common-text-color-2); // 头部工具栏背景色 - --ti-lowcode-toolbar-bg: #404040; + --ti-lowcode-toolbar-bg: var(--ti-lowcode-common-component-bg-57); // 头部工具栏选中背景色 - --ti-lowcode-toolbar-active-bg: #212121; + --ti-lowcode-toolbar-active-bg: var(--ti-lowcode-common-component-bg-71); // 头部工具栏边框色 - --ti-lowcode-toolbar-border-color: #333; + --ti-lowcode-toolbar-border-color: var(--ti-lowcode-common-border-color-17); // 头部工具栏icon颜色 && 右侧属性面板tabs hover字体颜色 && switch 选中hover圆背景色 - --ti-lowcode-toolbar-icon-color: #fff; + --ti-lowcode-toolbar-icon-color: var(--ti-lowcode-common-text-color-3); // 头部工具栏icon颜色 - --ti-lowcode-toolbar-icon-active-color: #4f77ff; + --ti-lowcode-toolbar-icon-active-color: var(--ti-lowcode-common-text-color-17); // 头部工具栏面包屑背景颜色 - --ti-lowcode-toolbar-breadcrumb-background-color: rgba(0, 179, 54, 0.6); + --ti-lowcode-toolbar-breadcrumb-background-color: var(--ti-lowcode-common-component-bg-73); // 头部工具栏更多more图标颜色 - --ti-lowcode-toolbar-more-color: rgba(217, 217, 217, 0.4); + --ti-lowcode-toolbar-more-color: var(--ti-lowcode-common-text-color-52); // 头部工具栏更多more图标hover颜色 - --ti-lowcode-toolbar-more-hover-color: rgba(217, 217, 217, 0.8); + --ti-lowcode-toolbar-more-hover-color: var(--ti-lowcode-common-text-color-51); // 头部工具栏面包屑字体颜色 && 右侧属性面板tabs字体颜色 && 右侧属性面板 collapse 头部字体颜色 && switch 选中圆背景色 - --ti-lowcode-toolbar-breadcrumb-color: #d9d9d9; + --ti-lowcode-toolbar-breadcrumb-color: var(--ti-lowcode-common-text-color-2); // 头部工具栏画布大小文本hover背景色 && 头部弹框背景色 && context-menu 背景色 && 大纲树节点hover背景色 && 日期组件背景色 - --ti-lowcode-toolbar-view-hover-bg: #4d4d4d; + --ti-lowcode-toolbar-view-hover-bg: var(--ti-lowcode-common-component-bg-59); // 头部工具栏i18n国际化字体颜色 - --ti-lowcode-toolbar-i18n-color: rgba(255, 255, 255, 0.4); + --ti-lowcode-toolbar-i18n-color: var(--ti-lowcode-common-text-color-53); // 应用发布弹窗图标颜色 - --ti-lowcode-toolbar-publish-icon-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-toolbar-publish-icon-color: var(--ti-lowcode-common-text-color-3); // 头部左侧logo颜色 - --ti-lowcode-logo-color: #8a8e99; + --ti-lowcode-logo-color: var(--ti-lowcode-common-text-color-14); // 头部左侧logo颜色 - --ti-lowcode-logo-active-color: rgba(255, 255, 255, 0.5); + --ti-lowcode-logo-active-color: var(--ti-lowcode-common-text-color-54); // 中间画布边框色 - --ti-lowcode-canvas-border-color: #1a1a1a; + --ti-lowcode-canvas-border-color: var(--ti-lowcode-common-border-color-42); // 右侧属性面板tab页签背景色 && 表单校验错误输入框背景色 - --ti-lowcode-tabs-bg: #2b2b2b; + --ti-lowcode-tabs-bg: var(--ti-lowcode-common-component-bg-51); // 右侧属性面板tab页签边框色 && 弹框边框色 && context-menu 边框色 - --ti-lowcode-tabs-border-color: #313131; + --ti-lowcode-tabs-border-color: var(--ti-lowcode-common-border-color-28); // 右侧属性面板tab页签激活状态背景色 && 弹框title背景颜色 - --ti-lowcode-tabs-active-bg: #404040; + --ti-lowcode-tabs-active-bg: var(--ti-lowcode-common-component-bg-57); // 右侧属性面板折叠面板展开内容边框色 - --ti-lowcode-collapse-active-border-color: #333; + --ti-lowcode-collapse-active-border-color: var(--ti-lowcode-common-border-color-17); // 中间画布外框容器背景色 && 弹框底部tip背景色 && select 多选下拉选项hover背景色 - --ti-lowcode-canvas-wrap-bg: #5e5e5e; + --ti-lowcode-canvas-wrap-bg: var(--ti-lowcode-common-component-bg-55); // 中间画布拖拽宽度按钮背景色 - --ti-lowcode-canvas-handle-bg: #2b2b2b; + --ti-lowcode-canvas-handle-bg: var(--ti-lowcode-common-component-bg-51); // 中间画布拖拽宽度按钮背景色 - --ti-lowcode-canvas-handle-hover-bg: var(--ti-lowcode-common-primary-color); + --ti-lowcode-canvas-handle-hover-bg: var(--ti-lowcode-common-component-bg-56); // 中间画布底部面包屑背景色 && popover 背景颜色 - --ti-lowcode-breadcrumb-bg: #ebebeb; + --ti-lowcode-breadcrumb-bg: var(--ti-lowcode-common-component-bg-19); // 中间画布底部面包屑字体颜色 && popover 字体颜色 - --ti-lowcode-breadcrumb-color: #4d4d4d; + --ti-lowcode-breadcrumb-color: var(--ti-lowcode-common-text-color-34); // 中间画布底部面包屑三角箭头颜色 - --ti-lowcode-breadcrumb-icon-color: #858585; + --ti-lowcode-breadcrumb-icon-color: var(--ti-lowcode-common-text-color-55); // 弹框遮罩层背景色 - --ti-lowcode-mask-modal-bg: rgba(0, 0, 0, 0.5); + --ti-lowcode-mask-modal-bg: var(--ti-lowcode-common-component-bg-21); // 引导提示框遮罩层背景色 - --ti-lowcode-guide-mask-bg: rgba(255, 255, 255, 0.5); + --ti-lowcode-guide-mask-bg: var(--ti-lowcode-common-component-bg-74); // 引导高亮遮罩层背景色 - --ti-lowcode-guide-highlight-mask-bg: rgba(200, 200, 200, 0.2); + --ti-lowcode-guide-highlight-mask-bg: var(--ti-lowcode-common-component-bg-44); // 引导弹框背景色 - --ti-lowcode-guide-dialog-bg: #041320; + --ti-lowcode-guide-dialog-bg: var(--ti-lowcode-common-component-bg-75); // 引导弹框标题，按钮文本字体色 - --ti-lowcode-guide-title-color: #fff; + --ti-lowcode-guide-title-color: var(--ti-lowcode-common-text-color-3); // 引导弹框描述文本字体色 - --ti-lowcode-guide-message-color: #a7aab2; + --ti-lowcode-guide-message-color: var(--ti-lowcode-common-text-color-56); // collapse 折叠面板激活后字体颜色 - --ti-lowcode-collapse-active-color: #ebebeb; + --ti-lowcode-collapse-active-color: var(--ti-lowcode-common-text-color-39); // input 框背景色 - --ti-lowcode-input-bg: #262626; + --ti-lowcode-input-bg: var(--ti-lowcode-common-component-bg-52); // switch 圆点 hover 背景色 - --ti-lowcode-switch-after-hover-bg: #6b6b6b; + --ti-lowcode-switch-after-hover-bg: var(--ti-lowcode-common-component-bg-76); // switch 圆点 checked 背景色 - --ti-lowcode-switch-after-checked-bg: #d9d9d9; + --ti-lowcode-switch-after-checked-bg: var(--ti-lowcode-common-component-bg-77); // -----下拉框相关主题配置----- // 下拉框聚焦时边框颜色 - --ti-lowcode-select-focus-border-color: var(--ti-lowcode-common-primary-color); + --ti-lowcode-select-focus-border-color: var(--ti-lowcode-common-border-color-29); // 下拉框选中标签字体颜色 - --ti-lowcode-select-tags-text-color: #d9d9d9; + --ti-lowcode-select-tags-text-color: var(--ti-lowcode-common-text-color-2); // 下拉框选中标签背景颜色 - --ti-lowcode-select-tags-bg-color: #5e5e5e; + --ti-lowcode-select-tags-bg-color: var(--ti-lowcode-common-component-bg-55); // 下拉框suffix图标悬浮颜色 - --ti-lowcode-select-suffix-icon-color-hover: #fff; + --ti-lowcode-select-suffix-icon-color-hover: var(--ti-lowcode-common-text-color-3); // select 下拉框背景色 - --ti-lowcode-dropdown-bg-color: #202020; + --ti-lowcode-dropdown-bg-color: var(--ti-lowcode-common-component-bg-29); // select 下拉面板边框颜色 - --ti-lowcode-dropdown-border-color: #333; + --ti-lowcode-dropdown-border-color: var(--ti-lowcode-common-border-color-17); // select 下拉面板选型字体颜色 - --ti-lowcode-dropdown-item-text-color: #d9d9d9; + --ti-lowcode-dropdown-item-text-color: var(--ti-lowcode-common-text-color-2); // select 下拉框选项hover背景色 - --ti-lowcode-dropdown-item-hover-bg-color: var(--ti-lowcode-common-component-bg); + --ti-lowcode-dropdown-item-hover-bg-color: var(--ti-lowcode-common-component-bg-47); // select 下拉框选项选中背景色 - --ti-lowcode-dropdown-item-selected-bg: var(--ti-lowcode-common-component-hover-bg); + --ti-lowcode-dropdown-item-selected-bg: var(--ti-lowcode-common-component-bg-46); // select 下拉框选项选中字体颜色 - --ti-lowcode-dropdown-item-selected-color: #ebebeb; + --ti-lowcode-dropdown-item-selected-color: var(--ti-lowcode-common-text-color-39); // select 下拉框选项hover字体颜色 - --ti-lowcode-dropdown-item-hover-text-color: #ebebeb; + --ti-lowcode-dropdown-item-hover-text-color: var(--ti-lowcode-common-text-color-39); // button info 字体颜色 - --ti-lowcode-button-info-color: #fff; + --ti-lowcode-button-info-color: var(--ti-lowcode-common-text-color-3); // button default 背景颜色 - --ti-lowcode-button-default-bg: transparent; + --ti-lowcode-button-default-bg: var(--ti-lowcode-common-bg-0); // 按钮hover字体颜色 - --ti-lowcode-button-default-hover-color: #fff; + --ti-lowcode-button-default-hover-color: var(--ti-lowcode-common-text-color-3); // 按钮hover背景色 - --ti-lowcode-button-default-hover-bg: #6b6b6b; - --ti-lowcode-button-default-hover-border-color: #6b6b6b; + --ti-lowcode-button-default-hover-bg: var(--ti-lowcode-common-component-bg-76); + --ti-lowcode-button-default-hover-border-color: var(--ti-lowcode-common-border-color-38); // info 保存按钮背景色 - --ti-lowcode-button-info-bg: var(--ti-lowcode-common-primary-color); + --ti-lowcode-button-info-bg: var(--ti-lowcode-common-component-bg-56); // info 保存按钮 hover 背景色 --ti-lowcode-button-info-hover-bg: var(--ti-lowcode-common-primary-hover-color); // primary 按钮字体颜色 - --ti-lowcode-button-primary-color: #fff; + --ti-lowcode-button-primary-color: var(--ti-lowcode-common-text-color-3); // 按钮边框颜色 - --ti-lowcode-button-border-color: #333; + --ti-lowcode-button-border-color: var(--ti-lowcode-common-border-color-17); // 组件icon颜色 - --ti-lowcode-component-icon-color: #d9d9d9; + --ti-lowcode-component-icon-color: var(--ti-lowcode-common-text-color-2); // 组件item hover 背景色 - --ti-lowcode-component-item-hover-bg: #4d4d4d; + --ti-lowcode-component-item-hover-bg: var(--ti-lowcode-common-component-bg-59); // 左侧插件激活背景色 - --ti-lowcode-left-panel-active-bg: #2f2f2f; + --ti-lowcode-left-panel-active-bg: var(--ti-lowcode-common-component-bg-47); // 左侧插件激活边框色 - --ti-lowcode-left-panel-active-border-color: #212121; + --ti-lowcode-left-panel-active-border-color: var(--ti-lowcode-common-border-color-26); // 左侧按钮边框色 - --ti-lowcode-left-button-border-color: #212121; + --ti-lowcode-left-button-border-color: var(--ti-lowcode-common-border-color-26); // list-item 项背景色 - --ti-lowcode-list-item-bg: #333; + --ti-lowcode-list-item-bg: var(--ti-lowcode-common-component-bg-72); // list-item 项激活背景色 - --ti-lowcode-list-item-active-bg: #404040; + --ti-lowcode-list-item-active-bg: var(--ti-lowcode-common-component-bg-57); // radio 按钮组激活背景色 - --ti-lowcode-radio-button-active-bg: #2b2b2b; + --ti-lowcode-radio-button-active-bg: var(--ti-lowcode-common-component-bg-51); // grid 布局设置按钮字体颜色 - --ti-lowcode-grid-edit-color: #d9d9d9; + --ti-lowcode-grid-edit-color: var(--ti-lowcode-common-text-color-2); // grid 布局设置按钮背景色 - --ti-lowcode-grid-edit-bg: #5e5e5e; + --ti-lowcode-grid-edit-bg: var(--ti-lowcode-common-component-bg-55); // tooltip字体颜色 - --ti-lowcode-tooltip-text-color: #999; + --ti-lowcode-tooltip-text-color: var(--ti-lowcode-common-text-color-22); // tooltip背景颜色 - --ti-lowcode-tooltip-bg-color: #ebebeb; + --ti-lowcode-tooltip-bg-color: var(--ti-lowcode-common-component-bg-19); // tooltip错误提示背景颜色 - --ti-lowcode-tooltip-error-bg-color: #c92c3f; + --ti-lowcode-tooltip-error-bg-color: var(--ti-lowcode-common-component-bg-38); // Fit 字体颜色 - --ti-lowcode-fit-label-color: #ebebeb; + --ti-lowcode-fit-label-color: var(--ti-lowcode-common-text-color-39); // Fit 背景颜色 - --ti-lowcode-fit-coordinate-bg: #2b2b2b; + --ti-lowcode-fit-coordinate-bg: var(--ti-lowcode-common-component-bg-51); // Fit 边框颜色 - --ti-lowcode-fit-coordinate-border-color: #212121; + --ti-lowcode-fit-coordinate-border-color: var(--ti-lowcode-common-border-color-26); // Fit 圆点颜色 - --ti-lowcode-fit-coordinate-origin-color: #757575; + --ti-lowcode-fit-coordinate-origin-color: var(--ti-lowcode-common-text-color-27); // more icon 选中背景色 - --ti-lowcode-more-icon-selected-bg: #2e2e2e; + --ti-lowcode-more-icon-selected-bg: var(--ti-lowcode-common-component-bg-78); // main menu 背景色 - --ti-lowcode-main-menu-bg: var(--ti-lowcode-common-component-bg); - --ti-lowcode-main-menu-item-hover-bg: var(--ti-lowcode-common-component-hover-bg); - --ti-lowcode-main-menu-item-hover-color: var(--ti-lowcode-toolbar-icon-color); + --ti-lowcode-main-menu-bg: var(--ti-lowcode-common-component-bg-47); + --ti-lowcode-main-menu-item-hover-bg: var(--ti-lowcode-common-component-bg-46); + --ti-lowcode-main-menu-item-hover-color: var(--ti-lowcode-common-text-color-3); // spacing svg 图标上下颜色 - --ti-lowcode-spacing-tb-color: #4d4d4d; + --ti-lowcode-spacing-tb-color: var(--ti-lowcode-common-text-color-34); // spacing svg 图标上下hover颜色 - --ti-lowcode-spacing-tb-hover-color: #5a5a5a; + --ti-lowcode-spacing-tb-hover-color: var(--ti-lowcode-common-text-color-57); // spacing svg 图标左右颜色 - --ti-lowcode-spacing-lr-color: #555; + --ti-lowcode-spacing-lr-color: var(--ti-lowcode-common-text-color-58); // spacing svg 图标左右hover颜色 - --ti-lowcode-spacing-lr-hover-color: #626262; + --ti-lowcode-spacing-lr-hover-color: var(--ti-lowcode-common-text-color-59); // spacing svg 图标边框颜色 - --ti-lowcode-spacing-border-color: #333; + --ti-lowcode-spacing-border-color: var(--ti-lowcode-common-border-color-17); // position direction 字体颜色 - --ti-lowcode-position-direction-color: #ebebeb; + --ti-lowcode-position-direction-color: var(--ti-lowcode-common-text-color-39); // position direction 弹框显示时字体背景色 - --ti-lowcode-position-direction-bg: #6b6b6b; + --ti-lowcode-position-direction-bg: var(--ti-lowcode-common-component-bg-76); // position Relative to 按钮字体颜色 - --ti-lowcode-position-relative-to-color: #ababab; + --ti-lowcode-position-relative-to-color: var(--ti-lowcode-common-third-text-color); // position Relative to 按钮边框颜色 - --ti-lowcode-position-relative-to-border-color: #363636; + --ti-lowcode-position-relative-to-border-color: var(--ti-lowcode-common-border-color-45); // position Relative to 按钮背景色 - --ti-lowcode-position-relative-to-bg: #363636; + --ti-lowcode-position-relative-to-bg: var(--ti-lowcode-common-component-bg-34); // position 选中背景色 - --ti-lowcode-position-selected-bg: #2b2b2b; + --ti-lowcode-position-selected-bg: var(--ti-lowcode-common-component-bg-51); // icon 图标选择弹框背景色 - --ti-lowcode-icon-popover-bg: #404040; + --ti-lowcode-icon-popover-bg: var(--ti-lowcode-common-component-bg-57); // icon 图标选择弹框字体颜色 - --ti-lowcode-icon-popover-color: #d9d9d9; + --ti-lowcode-icon-popover-color: var(--ti-lowcode-common-text-color-2); // icon 图标选择弹框hover颜色 - --ti-lowcode-icon-popover-hover-color: #fff; + --ti-lowcode-icon-popover-hover-color: var(--ti-lowcode-common-text-color-3); // 查看区块详情icon颜色 - --ti-lowcode-block-detail-icon-color: #f6eeee; + --ti-lowcode-block-detail-icon-color: var(--ti-lowcode-common-text-color-60); // 中间画布底部面包屑hover背景色 - --ti-lowcode-breadcrumb-hover-bg: #fff; + --ti-lowcode-breadcrumb-hover-bg: var(--ti-lowcode-common-component-bg-47); // 弹框中tip提示边框颜色 - --ti-lowcode-dialog-tip-border-color: #d9d9d9; + --ti-lowcode-dialog-tip-border-color: var(--ti-lowcode-common-border-color-44); // 弹框字体颜色 && 左侧面板 title 字体颜色 - --ti-lowcode-dialog-font-color: #ebebeb; + --ti-lowcode-dialog-font-color: var(--ti-lowcode-common-text-color-39); // 输入框icon图标颜色 - --ti-lowcode-input-icon-color: #737373; + --ti-lowcode-input-icon-color: var(--ti-lowcode-common-text-color-29); // 弹框字体颜色 && 图标颜色 && 输入框 suffix 字体颜色 - --ti-lowcode-text-color: #6a6a6a; + --ti-lowcode-text-color: var(--ti-lowcode-common-text-color-1); // 右侧optionitem的边框色 - --ti-lowcode-optionitem-border-color: #2b2b2b; + --ti-lowcode-optionitem-border-color: var(--ti-lowcode-common-border-color-32); // 右侧optionitem的背景色 - --ti-lowcode-optionitem-background-color: #363636; + --ti-lowcode-optionitem-background-color: var(--ti-lowcode-common-component-bg-34); //tootip里的input框字体颜色 - --ti-lowcode-tootip-input-color: #fff; + --ti-lowcode-tootip-input-color: var(--ti-lowcode-common-text-color-3); //tootip里的input背景颜色 - --ti-lowcode-tootip-input-background-color: #363636; + --ti-lowcode-tootip-input-background-color: var(--ti-lowcode-common-component-bg-34); //tootip里的input框边框颜色 - --ti-lowcode-tootip-input-border-color: #2b2b2b; + --ti-lowcode-tootip-input-border-color: var(--ti-lowcode-common-border-color-32); //tootip里的input框箭头颜色 - --ti-lowcode-tootip-arrow-border-color: #404040; + --ti-lowcode-tootip-arrow-border-color: var(--ti-lowcode-common-border-color-43); // dialogBox弹框示例框边框色 - --ti-lowcode-dialog-demo-border-color: #5e5e5e; + --ti-lowcode-dialog-demo-border-color: var(--ti-lowcode-common-border-color-23); // 关闭 icon 图标hover背景色 && 输入框后置文本hover背景色 - --ti-lowcode-icon-hover-bg: rgba(255, 255, 255, 0.1); + --ti-lowcode-icon-hover-bg: var(--ti-lowcode-common-component-bg-35); // 说明提示框警告颜色 - --ti-lowcode-description-warning-color: #facb4b; + --ti-lowcode-description-warning-color: var(--ti-lowcode-common-warning-color-2); // 说明提示框错误颜色 - --ti-lowcode-description-error-color: #ff0000; + --ti-lowcode-description-error-color: var(--ti-lowcode-common-error-color-1); // switch checked状态边框色 - --ti-lowcode-switch-checked-border-color: var(--ti-lowcode-common-primary-color); + --ti-lowcode-switch-checked-border-color: var(--ti-lowcode-common-border-color-29); // 文本链接颜色 - --ti-lowcode-text-link-color: #6bb0ff; + --ti-lowcode-text-link-color: var(--ti-lowcode-common-text-color-31); // 大纲树node节点选中背景色 - --ti-lowcode-node-current-bg: var(--ti-lowcode-common-primary-color); + --ti-lowcode-node-current-bg: var(--ti-lowcode-common-component-bg-56); // 大纲树node节点不可拖拽背景色 && 表单校验错误边框色 - --ti-lowcode-node-nodrag-bg: #ea384c; + --ti-lowcode-node-nodrag-bg: var(--ti-lowcode-common-component-bg-45); // 成功状态按钮边框色 - --ti-lowcode-success-border-color: #2ad986; + --ti-lowcode-success-border-color: var(--ti-lowcode-common-border-color-24); // 错误提示颜色 - --ti-lowcode-error-tip-color: #de504e; + --ti-lowcode-error-tip-color: var(--ti-lowcode-common-text-color-42); // 画布拖拽元素背景色 - --ti-lowcode-drag-ghost-bg: #888; + --ti-lowcode-drag-ghost-bg: var(--ti-lowcode-common-component-bg-36); // 画布拖拽位置线背景色 - --ti-lowcode-ghost-line-bg: #ffb100; + --ti-lowcode-ghost-line-bg: var(--ti-lowcode-common-component-bg-37); // 描述颜色 --ti-lowcode-description-color: var(--ti-lowcode-common-text-color-4); // 更多折叠面板头部hover背景色 - --ti-lowcode-more-collapse-header-hover-color: #5a5a5a; + --ti-lowcode-more-collapse-header-hover-color: var(--ti-lowcode-common-text-color-57); // 绑定时icon图标颜色 - --ti-lowcode-icon-bind-color: #006cff; + --ti-lowcode-icon-bind-color: var(--ti-lowcode-common-blue-22); // 创建字体颜色 - --ti-lowcode-create-color: #575d6c; + --ti-lowcode-create-color: var(--ti-lowcode-common-text-color-25); // 删除按钮hover背景色 && 表单校验错误背景色 - --ti-lowcode-delete-button-hover-bg: #c92c3f; + --ti-lowcode-delete-button-hover-bg: var(--ti-lowcode-common-component-bg-38); // input框focus 获焦时边框颜色 - --ti-lowcode-input-focus-border-color: var(--ti-lowcode-common-primary-color); + --ti-lowcode-input-focus-border-color: var(--ti-lowcode-common-border-color-29); // 次要描述字体颜色 && 面包屑label 字体颜色 - --ti-lowcode-description-minor-color: #ababab; + --ti-lowcode-description-minor-color: var(--ti-lowcode-common-third-text-color); // 样式设置 label 字体颜色 - --ti-lowcode-style-setting-label-color: #8bbefa; + --ti-lowcode-style-setting-label-color: var(--ti-lowcode-common-text-color-32); // 样式设置 label 背景颜色 - --ti-lowcode-style-setting-label-bg: rgba(76, 152, 241, 0.15); + --ti-lowcode-style-setting-label-bg: var(--ti-lowcode-common-component-bg-39); // 多人协作item项hover背景色 - --ti-lowcode-user-item-hover-bg: rgba(94, 94, 94, 0.8); + --ti-lowcode-user-item-hover-bg: var(--ti-lowcode-common-component-bg-81); // 多人协作人员头像背景色 - --ti-lowcode-user-header-bg: #919191; + --ti-lowcode-user-header-bg: var(--ti-lowcode-common-component-bg-41); // 工具栏提示框字体颜色 - --ti-lowcode-toolbar-popover-color: #363636; + --ti-lowcode-toolbar-popover-color: var(--ti-lowcode-common-text-color-30); // 工具栏 media 提示框字体颜色 - --ti-lowcode-media-popover-color: #adb0b8; + --ti-lowcode-media-popover-color: var(--ti-lowcode-common-text-color-35); // 工具栏 media 提示框标题字体颜色 - --ti-lowcode-media-popover-title-color: #fff; + --ti-lowcode-media-popover-title-color: var(--ti-lowcode-common-text-color-3); // 工具栏icon禁用颜色 - --ti-lowcode-disabled-color: #757575; + --ti-lowcode-disabled-color: var(--ti-lowcode-common-text-color-27); // 状态管理详情收缩摩纳哥编辑器icon颜色 - --ti-lowcode-state-management-screen-icon-color: #fff; + --ti-lowcode-state-management-screen-icon-color: var(--ti-lowcode-common-text-color-3); // 状态管理搜索无结果显示颜色 - --ti-lowcode-state-management-query-color: #fff; + --ti-lowcode-state-management-query-color: var(--ti-lowcode-common-text-color-3); // 状态管理代码编辑器边框颜色 - --ti-lowcode-state-management-monaco-editor-border-color: transparent; + --ti-lowcode-state-management-monaco-editor-border-color: var(--ti-lowcode-common-border-color-18); // Popover提示框 - --ti-lowcode-popover-color: var(--ti-lowcode-breadcrumb-color); - --ti-lowcode-popover-bg-color: #191919; + --ti-lowcode-popover-color: var(--ti-lowcode-common-text-color-34); + --ti-lowcode-popover-bg-color: var(--ti-lowcode-common-component-bg-79); // 自定义类名lowcode弹框背景色 - --ti-lowcode-custom-popover-bg-color: #404040; + --ti-lowcode-custom-popover-bg-color: var(--ti-lowcode-common-component-bg-57); // 自定义类名lowcode弹框字体颜色 - --ti-lowcode-custom-popover-text-color: #d9d9d9; + --ti-lowcode-custom-popover-text-color: var(--ti-lowcode-common-text-color-2); // 自定义类名lowcode弹框边框颜色 - --ti-lowcode-custom-popover-border-color: #313131; + --ti-lowcode-custom-popover-border-color: var(--ti-lowcode-common-border-color-28); // 滚动条thumb颜色 - --ti-lowcode-scrollbar-thumb-background-color: rgba(121, 121, 121, 0.4); + --ti-lowcode-scrollbar-thumb-background-color: var(--ti-lowcode-common-component-bg-80); // 可点击交互的文字颜色 - --ti-lowcode-common-interaction-text-color: #5e7ce0; + --ti-lowcode-interaction-text-color: var(--ti-lowcode-common-text-color-33); // 数字输入框组件下拉列表文字颜色 - --ti-lowcode-numeric-unit-text-color: var(--ti-lowcode-text-color); + --ti-lowcode-numeric-unit-text-color: var(--ti-lowcode-common-text-color-1); //左侧插件栏hover背景色 - --ti-plugins-hover-bg-color: #ffffff; + --ti-plugins-hover-bg-color: var(--ti-lowcode-common-component-bg); //左侧插件栏hover文字色 - --ti-plugins-hover-text-color: #4d4d4d; + --ti-plugins-hover-text-color: var(--ti-lowcode-common-text-color-34); //左侧插件栏hover边框色 - --ti-plugins-hover-border-color: #9e9e9e; + --ti-plugins-hover-border-color: var(--ti-lowcode-common-border-color-25); // 表格行间背景色 - --ti-lowcode-new-table-row-sepline-background: #1f1f1f; + --ti-lowcode-new-table-row-sepline-background: var(--ti-lowcode-common-component-bg-61); // 查看指引视频 - --ti-lowcode-block-video-tip-color: var(--ti-lowcode-base-primary-color-2); + --ti-lowcode-block-video-tip-color: var(--ti-lowcode-common-primary-color); // 属性设置、事件设置等列表的背景色 - --ti-lowcode-meta-list-item-border-color: #2b2b2b; + --ti-lowcode-meta-list-item-border-color: var(--ti-lowcode-common-border-color-32); // 属性设置、事件设置等列表的背景色 - --ti-lowcode-meta-list-item-bg-color: #363636; + --ti-lowcode-meta-list-item-bg-color: var(--ti-lowcode-common-component-bg-34); // 空数据图标颜色 - --ti-lowcode-empty-icon-color: #fff; - --ti-lowcode-popover-option-popper-border-color: transparent; - --ti-lowcode-toolbar-hover-popper: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-empty-icon-color: var(--ti-lowcode-common-text-color-3); + --ti-lowcode-popover-option-popper-border-color: var(--ti-lowcode-common-border-color-18); + --ti-lowcode-toolbar-hover-popper: var(--ti-lowcode-common-text-color-3); } diff --git a/packages/theme/light/base.less b/packages/theme/light/base.less new file mode 100644 index 000000000..db2e35310 --- /dev/null +++ b/packages/theme/light/base.less @@ -0,0 +1,273 @@ +:root { + // 灰阶 + --ti-lowcode-base-gray-0: #fff; + --ti-lowcode-base-gray-5: #fafafa; + --ti-lowcode-base-gray-10: #f5f5f5; + --ti-lowcode-base-gray-20: #f0f0f0; + --ti-lowcode-base-gray-30: #dbdbdb; + --ti-lowcode-base-gray-40: #c2c2c2; + --ti-lowcode-base-gray-50: #808080; + --ti-lowcode-base-gray-60: #595959; + --ti-lowcode-base-gray-70: #333; + --ti-lowcode-base-gray-80: #262626; + --ti-lowcode-base-gray-90: #191919; + --ti-lowcode-base-gray-100: #000; + + // expand-red + --ti-lowcode-base-red-1: #ffeae8; + --ti-lowcode-base-red-2: #fccdca; + --ti-lowcode-base-red-3: #faa9a5; + --ti-lowcode-base-red-4: #fa8682; + --ti-lowcode-base-red-5: #f76360; + --ti-lowcode-base-red-6: #f23030; + --ti-lowcode-base-red-7: #cc272a; + --ti-lowcode-base-red-8: #a3171c; + --ti-lowcode-base-red-9: #78080e; + --ti-lowcode-base-red-10: #4d0005; + --ti-lowcode-base-red-11: #a64242; + --ti-lowcode-base-red-12: #d4827f; + --ti-lowcode-base-red-13: #f2c5c2; + + // expand-orange + --ti-lowcode-base-orange-1: #fff5e8; + --ti-lowcode-base-orange-2: #fcdfb8; + --ti-lowcode-base-orange-3: #fcc98b; + --ti-lowcode-base-orange-4: #fcb25c; + --ti-lowcode-base-orange-5: #ff9a2e; + --ti-lowcode-base-orange-6: #ff8800; + --ti-lowcode-base-orange-7: #d96900; + --ti-lowcode-base-orange-8: #a64d00; + --ti-lowcode-base-orange-9: #733400; + --ti-lowcode-base-orange-10: #4d2201; + --ti-lowcode-base-orange-11: #9e6d3f; + --ti-lowcode-base-orange-12: #d6a981; + --ti-lowcode-base-orange-13: #f2d8c2; + + // expand-yellow + --ti-lowcode-base-yellow-1: #fcf9eb; + --ti-lowcode-base-yellow-2: #fcf0c2; + --ti-lowcode-base-yellow-3: #fae396; + --ti-lowcode-base-yellow-4: #f7d56d; + --ti-lowcode-base-yellow-5: #f7c845; + --ti-lowcode-base-yellow-6: #fcbe1e; + --ti-lowcode-base-yellow-7: #d99b0b; + --ti-lowcode-base-yellow-8: #a67711; + --ti-lowcode-base-yellow-9: #7a5202; + --ti-lowcode-base-yellow-10: #4d3200; + --ti-lowcode-base-yellow-11: #9e7e3f; + --ti-lowcode-base-yellow-12: #d4b57f; + --ti-lowcode-base-yellow-13: #e6d3b8; + + // expand-lemon + --ti-lowcode-base-lemon-1: #fcfae8; + --ti-lowcode-base-lemon-2: #fcf6c2; + --ti-lowcode-base-lemon-3: #fcf092; + --ti-lowcode-base-lemon-4: #fae969; + --ti-lowcode-base-lemon-5: #f7e04a; + --ti-lowcode-base-lemon-6: #f7d916; + --ti-lowcode-base-lemon-7: #d9bb16; + --ti-lowcode-base-lemon-8: #a38708; + --ti-lowcode-base-lemon-9: #756002; + --ti-lowcode-base-lemon-10: #4d3d00; + --ti-lowcode-base-lemon-11: #9e8f46; + --ti-lowcode-base-lemon-12: #d6c581; + --ti-lowcode-base-lemon-13: #eddfb2; + + // expand-lime + --ti-lowcode-base-lime-1: #f8fae3; + --ti-lowcode-base-lime-2: #eff5bf; + --ti-lowcode-base-lime-3: #e2ed8e; + --ti-lowcode-base-lime-4: #d5e667; + --ti-lowcode-base-lime-5: #c6de3e; + --ti-lowcode-base-lime-6: #b2d119; + --ti-lowcode-base-lime-7: #95b312; + --ti-lowcode-base-lime-8: #728c0a; + --ti-lowcode-base-lime-9: #576e05; + --ti-lowcode-base-lime-10: #3b4d00; + --ti-lowcode-base-lime-11: #808c46; + --ti-lowcode-base-lime-12: #c1cc7a; + --ti-lowcode-base-lime-13: #3b4d00; + + // expand-kelly + --ti-lowcode-base-kelly-1: #f2fae6; + --ti-lowcode-base-kelly-2: #daf2bb; + --ti-lowcode-base-kelly-3: #b9e683; + --ti-lowcode-base-kelly-4: #9edb58; + --ti-lowcode-base-kelly-5: #7dcc29; + --ti-lowcode-base-kelly-6: #5cb300; + --ti-lowcode-base-kelly-7: #4b9902; + --ti-lowcode-base-kelly-8: #3c8001; + --ti-lowcode-base-kelly-9: #2e6600; + --ti-lowcode-base-kelly-10: #1f4700; + --ti-lowcode-base-kelly-11: #628c38; + --ti-lowcode-base-kelly-12: #a2c777; + --ti-lowcode-base-kelly-13: #d2e6bb; + + // expand-green + --ti-lowcode-base-green-1: #e8fced; + --ti-lowcode-base-green-2: #bbf2c8; + --ti-lowcode-base-green-3: #82e09a; + --ti-lowcode-base-green-4: #51d675; + --ti-lowcode-base-green-5: #25c251; + --ti-lowcode-base-green-6: #00b336; + --ti-lowcode-base-green-7: #029931; + --ti-lowcode-base-green-8: #01802b; + --ti-lowcode-base-green-9: #006624; + --ti-lowcode-base-green-10: #004a1b; + --ti-lowcode-base-green-11: #3d995c; + --ti-lowcode-base-green-12: #77c78f; + --ti-lowcode-base-green-13: #b8e6c7; + + // expand-mint + --ti-lowcode-base-mint-1: #e8fcfa; + --ti-lowcode-base-mint-2: #bff5ef; + --ti-lowcode-base-mint-3: #8be8e0; + --ti-lowcode-base-mint-4: #5dded5; + --ti-lowcode-base-mint-5: #38d6ce; + --ti-lowcode-base-mint-6: #10c7c1; + --ti-lowcode-base-mint-7: #0aaba8; + --ti-lowcode-base-mint-8: #048c8c; + --ti-lowcode-base-mint-9: #046466; + --ti-lowcode-base-mint-10: #004547; + --ti-lowcode-base-mint-11: #3d9996; + --ti-lowcode-base-mint-12: #77c7c2; + --ti-lowcode-base-mint-13: #b8e6e1; + + // expand-sky + --ti-lowcode-base-sky-1: #e8f8fc; + --ti-lowcode-base-sky-2: #c4f2ff; + --ti-lowcode-base-sky-3: #9de4fa; + --ti-lowcode-base-sky-4: #79d8f7; + --ti-lowcode-base-sky-5: #58cbf5; + --ti-lowcode-base-sky-6: #33bcf2; + --ti-lowcode-base-sky-7: #1f9acf; + --ti-lowcode-base-sky-8: #1075a3; + --ti-lowcode-base-sky-9: #065278; + --ti-lowcode-base-sky-10: #00304a; + --ti-lowcode-base-sky-11: #3d7f99; + --ti-lowcode-base-sky-12: #7ab8cc; + --ti-lowcode-base-sky-13: #b6e5f2; + + // expand-blue + --ti-lowcode-base-blue-1: #e3effa; + --ti-lowcode-base-blue-2: #c4e1ff; + --ti-lowcode-base-blue-3: #99c9ff; + --ti-lowcode-base-blue-4: #68abfc; + --ti-lowcode-base-blue-5: #4191fa; + --ti-lowcode-base-blue-6: #1476ff; + --ti-lowcode-base-blue-7: #0f5ed4; + --ti-lowcode-base-blue-8: #0845a6; + --ti-lowcode-base-blue-9: #022e7a; + --ti-lowcode-base-blue-10: #001a4a; + --ti-lowcode-base-blue-11: #3d6899; + --ti-lowcode-base-blue-12: #7fa6d4; + --ti-lowcode-base-blue-13: #b6d4f2; + + // expand-indigo + --ti-lowcode-base-indigo-1: #eee8ff; + --ti-lowcode-base-indigo-2: #ddd7fa; + --ti-lowcode-base-indigo-3: #b19cf7; + --ti-lowcode-base-indigo-4: #957af5; + --ti-lowcode-base-indigo-5: #6e51e0; + --ti-lowcode-base-indigo-6: #512fd6; + --ti-lowcode-base-indigo-7: #391eb0; + --ti-lowcode-base-indigo-8: #27108f; + --ti-lowcode-base-indigo-9: #19056e; + --ti-lowcode-base-indigo-10: #0e004d; + --ti-lowcode-base-indigo-11: #584d99; + --ti-lowcode-base-indigo-12: #847acc; + --ti-lowcode-base-indigo-13: #bbb8e6; + + // expand-purple + --ti-lowcode-base-purple-1: #f5e8ff; + --ti-lowcode-base-purple-2: #e4c5fc; + --ti-lowcode-base-purple-3: #d0a1f7; + --ti-lowcode-base-purple-4: #b878f0; + --ti-lowcode-base-purple-5: #9f53e6; + --ti-lowcode-base-purple-6: #832fd6; + --ti-lowcode-base-purple-7: #641eb0; + --ti-lowcode-base-purple-8: #4c1091; + --ti-lowcode-base-purple-9: #370673; + --ti-lowcode-base-purple-10: #20004d; + --ti-lowcode-base-purple-11: #683d99; + --ti-lowcode-base-purple-12: #a07acc; + --ti-lowcode-base-purple-13: #cbb8e6; + + // expand-pink + --ti-lowcode-base-pink-1: #fce6fb; + --ti-lowcode-base-pink-2: #fcc2f9; + --ti-lowcode-base-pink-3: #f794f2; + --ti-lowcode-base-pink-4: #eb67e6; + --ti-lowcode-base-pink-5: #e841e5; + --ti-lowcode-base-pink-6: #d91ad9; + --ti-lowcode-base-pink-7: #b50fb8; + --ti-lowcode-base-pink-8: #8f0a94; + --ti-lowcode-base-pink-9: #6b0370; + --ti-lowcode-base-pink-10: #47004d; + --ti-lowcode-base-pink-11: #993d99; + --ti-lowcode-base-pink-12: #c97acc; + --ti-lowcode-base-pink-13: #e2b8e6; + + // expand-rose + --ti-lowcode-base-rose-1: #fce6ef; + --ti-lowcode-base-rose-2: #ffc4de; + --ti-lowcode-base-rose-3: #fa9bc9; + --ti-lowcode-base-rose-4: #f56cac; + --ti-lowcode-base-rose-5: #eb4696; + --ti-lowcode-base-rose-6: #e61c81; + --ti-lowcode-base-rose-7: #b50e65; + --ti-lowcode-base-rose-8: #940a54; + --ti-lowcode-base-rose-9: #70033f; + --ti-lowcode-base-rose-10: #4d002b; + --ti-lowcode-base-rose-11: #993d6e; + --ti-lowcode-base-rose-12: #cc7aa6; + --ti-lowcode-base-rose-13: #e6b8d2; + + // 公司品牌色 + --ti-lowcode-base-brand-color: #c7000b; + + // 主色 + --ti-lowcode-base-primary-color-1: #191919; + --ti-lowcode-base-primary-color-2: #1476ff; + + // 背景色 + --ti-lowcode-base-bg: #f5f5f5; + --ti-lowcode-base-bg-1: rgba(0, 0, 0, 0.05); + --ti-lowcode-base-bg-2: #fafafa; + --ti-lowcode-base-bg-3: #191919; + --ti-lowcode-base-bg-4: #595959; + --ti-lowcode-base-bg-5: #fff; + --ti-lowcode-base-bg-6: #5959591a; + + // 文本色 + --ti-lowcode-base-text-color: #191919; + --ti-lowcode-base-text-color-1: #595959; + --ti-lowcode-base-text-color-2: #1476ff; + --ti-lowcode-base-text-color-3: #808080; + --ti-lowcode-base-text-color-4: #c2c2c2; + + // 文本链接色 + --ti-lowcode-base-text-link-color: #191919; + --ti-lowcode-base-text-link-color-1: #595959; + --ti-lowcode-base-text-link-color-2: #c2c2c2; + --ti-lowcode-base-text-link-color-3: #fff; + + // 按钮边框色 + --ti-lowcode-base-secondary-button-border-color: #595959; + --ti-lowcode-base-secondary-button-border-hover-color: #c2c2c2; + --ti-lowcode-base-default-button-border-color: #c2c2c2; + --ti-lowcode-base-default-button-border-hover-color: #191919; + --ti-lowcode-base-default-button-border-disable-color: #dbdbdb; + + // 分割线 + --ti-lowcode-base-split-color-1: rgba(0, 0, 0, 0.08); // 白色背景分割线 + --ti-lowcode-base-split-color-2: rgba(0, 0, 0, 0.15); // 灰色背景分割线 + + // 状态色 + --ti-lowcode-base-error-color: #f23030; + --ti-lowcode-base-warn-color: #ff8800; + --ti-lowcode-base-warn-color-1: #f7d916; + --ti-lowcode-base-success-color: #5cb300; + --ti-lowcode-base-prompt-color: #1476ff; + --ti-lowcode-base-invalidate-color: #ebebeb; +} diff --git a/packages/theme/light/datasource.less b/packages/theme/light/datasource.less index 6767b3276..5082b633c 100644 --- a/packages/theme/light/datasource.less +++ b/packages/theme/light/datasource.less @@ -2,7 +2,7 @@ --ti-lowcode-datasource-toolbar-icon-color: var(--ti-lowcode-common-text-color-8); --ti-lowcode-datasource-tabs-border-color: var(--ti-lowcode-common-border-color-8); --ti-lowcode-datasource-toolbar-breadcrumb-color: var(--ti-lowcode-common-dark-2); - --ti-lowcode-datasource-json-border-colorr: var(--ti-lowcode-common-primary-color); + --ti-lowcode-datasource-json-border-color: var(--ti-lowcode-common-primary-color); --ti-lowcode-datasource-tree-border-color: var(--ti-lowcode-common-border-color-9); --ti-lowcode-datasource-common-primary-color: var(--ti-lowcode-common-primary-color); --ti-lowcode-datasource-success-border-color: var(--ti-lowcode-common-border-color-9); diff --git a/packages/theme/light/index.less b/packages/theme/light/index.less index 54cb05456..eef6cef06 100644 --- a/packages/theme/light/index.less +++ b/packages/theme/light/index.less @@ -1,5 +1,6 @@ @import '../common/base.less'; @import '../common/global.less'; +@import './base.less'; // 主题配置优先于公共配置 @import './variable.less'; @import './tutorial.less'; diff --git a/packages/theme/light/variable.less b/packages/theme/light/variable.less index e5cc438c7..8d1e965e2 100644 --- a/packages/theme/light/variable.less +++ b/packages/theme/light/variable.less @@ -1,7 +1,7 @@ // 亮色主题 :root { // 基础配置，前缀为 --base - --base-min-width: 1280px; + --ti-common-min-width: 1280px; // 插件面板 --ti-lowcode-plugin-panel-title-color: var(--ti-lowcode-common-text-title-color); // 插件面板标题色 From fb5cb5cdcd24656ae4c921770740e8e80172a465 Mon Sep 17 00:00:00 2001 From: James-9696 Date: Mon, 22 Jul 2024 03:27:54 -0700 Subject: [PATCH 08/14] fix: update light variable --- packages/theme/base/src/common.less | 1 + packages/theme/light/toolbar.less | 18 +++++++++--------- packages/theme/light/tree.less | 10 +++++----- 3 files changed, 15 insertions(+), 14 deletions(-) diff --git a/packages/theme/base/src/common.less b/packages/theme/base/src/common.less index ebc4c9a02..7299dcd00 100644 --- a/packages/theme/base/src/common.less +++ b/packages/theme/base/src/common.less @@ -154,6 +154,7 @@ --ti-lowcode-common-text-color-60: var(--ti-lowcode-base-gray-63); --ti-lowcode-common-text-color-61: var(--ti-lowcode-base-red-14); --ti-lowcode-common-text-color-62: var(--ti-lowcode-base-rgba-22); + --ti-lowcode-common-text-color-63: var(--ti-lowcode-base-gray-5); // 边框 --ti-lowcode-common-border-none: var(--ti-lowcode-base-button-border-none); diff --git a/packages/theme/light/toolbar.less b/packages/theme/light/toolbar.less index d9b07056d..c6008cf19 100644 --- a/packages/theme/light/toolbar.less +++ b/packages/theme/light/toolbar.less @@ -3,13 +3,13 @@ --ti-lowcode-toolbar-border-bottom-color: var(--ti-lowcode-common-border-color-1); --ti-lowcode-toolbar-media-bg: var(--ti-lowcode-common-component-bg); --ti-lowcode-toolbar-media-setting-border-color: var(--ti-lowcode-common-border-color-1); - --ti-lowcode-toolbar-title-color: var(--ti-lowcode-base-gray-90); - --ti-lowcode-toolbar-sub-title-color: var(--ti-lowcode-base-gray-60); - --ti-lowcode-toolbar-hover-color: var(--ti-lowcode-base-bg); - --ti-lowcode-toolbar-view-active-bg: #f0f0f0; // 相当于 规范中定义的 #191919 透明度5% - --ti-lowcode-toolbar-popover-bg: var(--ti-lowcode-base-gray-0); - --ti-lowcode-toolbar-active-color: var(--ti-lowcode-base-gray-60); - --ti-lowcode-toolbar-user-img-border-color: var(--ti-lowcode-base-gray-20); - --ti-lowcode-toolbar-dot-color: var(--ti-lowcode-base-brand-color); - --ti-lowcode-toolbar-collapsed-toolbar-bg: #f5f5f5; + --ti-lowcode-toolbar-title-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-toolbar-sub-title-color: var(--ti-lowcode-common-text-color-6); + --ti-lowcode-toolbar-hover-color: var(--ti-lowcode-common-text-color-63); + --ti-lowcode-toolbar-view-active-bg: var(--ti-lowcode-common-component-bg-5); + --ti-lowcode-toolbar-popover-bg: var(--ti-lowcode-common-component-bg); + --ti-lowcode-toolbar-active-color: var(--ti-lowcode-common-text-color-6); + --ti-lowcode-toolbar-user-img-border-color: var(--ti-lowcode-common-border-color-2); + --ti-lowcode-toolbar-dot-color: var(--ti-lowcode-common-text-color-61); + --ti-lowcode-toolbar-collapsed-toolbar-bg: var(--ti-lowcode-common-component-bg-25); } diff --git a/packages/theme/light/tree.less b/packages/theme/light/tree.less index d29c7bdac..53e26ef42 100644 --- a/packages/theme/light/tree.less +++ b/packages/theme/light/tree.less @@ -1,7 +1,7 @@ .outlinebox { - --ti-lowcode-tree-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-tree-icon-color: var(--ti-lowcode-base-primary-color-1); - --ti-lowcode-tree-icon-hover-color: var(--ti-lowcode-base-text-color-1); - --ti-lowcode-tree-selected-color: var(--ti-lowcode-common-text-main-color); - --ti-lowcode-tree-selected-bg: var(--ti-lowcode-base-bg); + --ti-lowcode-tree-color: var(--ti-lowcode-common-text-color-61); + --ti-lowcode-tree-icon-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-tree-icon-hover-color: var(--ti-lowcode-common-text-color-6); + --ti-lowcode-tree-selected-color: var(--ti-lowcode-common-text-color-6); + --ti-lowcode-tree-selected-bg: var(--ti-lowcode-common-component-bg-1); } From fda7c56ba1526450f7bee5ab0c5c92f3ea121bcd Mon Sep 17 00:00:00 2001 From: James-9696 Date: Tue, 23 Jul 2024 19:57:03 -0700 Subject: [PATCH 09/14] fix: update tree component variable --- packages/theme/light/tree.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/theme/light/tree.less b/packages/theme/light/tree.less index 53e26ef42..306652800 100644 --- a/packages/theme/light/tree.less +++ b/packages/theme/light/tree.less @@ -1,5 +1,5 @@ .outlinebox { - --ti-lowcode-tree-color: var(--ti-lowcode-common-text-color-61); + --ti-lowcode-tree-color: var(--ti-lowcode-common-primary-text-color); --ti-lowcode-tree-icon-color: var(--ti-lowcode-common-primary-text-color); --ti-lowcode-tree-icon-hover-color: var(--ti-lowcode-common-text-color-6); --ti-lowcode-tree-selected-color: var(--ti-lowcode-common-text-color-6); From 3a8524e229681609c71394fea3e11f9f99ab734a Mon Sep 17 00:00:00 2001 From: James-9696 Date: Wed, 24 Jul 2024 20:39:53 -0700 Subject: [PATCH 10/14] fix: update comment and format --- packages/design-core/src/init.js | 2 -- packages/theme/base/src/index.js | 4 ++-- packages/theme/light/block.less | 2 +- packages/theme/light/events.less | 4 ++-- packages/theme/light/help.less | 8 ++++---- 5 files changed, 9 insertions(+), 11 deletions(-) diff --git a/packages/design-core/src/init.js b/packages/design-core/src/init.js index 0a956dff1..5aa08c939 100644 --- a/packages/design-core/src/init.js +++ b/packages/design-core/src/init.js @@ -16,7 +16,6 @@ import i18n from '@opentiny/tiny-engine-common/js/i18n' import { initMonitor } from '@opentiny/tiny-engine-common/js/monitor' import { injectGlobalComponents, setGlobalMonacoEditorTheme, Modal, Notify } from '@opentiny/tiny-engine-common' import { initHttp } from '@opentiny/tiny-engine-http' -// import TinyThemeTool from '@opentiny/vue-theme/theme-tool' import '@opentiny/tiny-engine-theme-base' import { defineEntry, @@ -52,7 +51,6 @@ const defaultLifeCycles = { initHttp({ env: import.meta.env }) // eslint-disable-next-line no-new - // new TinyThemeTool(tinyEngineThemeLight, 'tinyEngineTheme') // 初始化主题 if (import.meta.env.VITE_ERROR_MONITOR === 'true' && import.meta.env.VITE_ERROR_MONITOR_URL) { initMonitor(import.meta.env.VITE_ERROR_MONITOR_URL) diff --git a/packages/theme/base/src/index.js b/packages/theme/base/src/index.js index bdbe45b70..d7a98928a 100644 --- a/packages/theme/base/src/index.js +++ b/packages/theme/base/src/index.js @@ -1,7 +1,7 @@ // 提供engine主题包的样式定义引入 import './base.less' import './common.less' -// 须提供变量区分亮暗两套主题，再引入引入dark和light，达到提供tinyvue组件亮暗色两套样式定义引入 -// import './dark' +// TODO: 须提供变量区分亮暗两套主题，再分别引入dark和light，达到分别显示tinyvue组件亮暗色 +import './dark' import './light' import './component-common.less' diff --git a/packages/theme/light/block.less b/packages/theme/light/block.less index 2892e98cb..ecb430d3c 100644 --- a/packages/theme/light/block.less +++ b/packages/theme/light/block.less @@ -22,7 +22,7 @@ --ti-lowcode-component-block-list-shortcut-title-color: var(--ti-lowcode-common-primary-text-color); // 快照标题颜色 --ti-lowcode-component-block-list-shortcut-bg: var(--ti-lowcode-common-component-bg); // 快照标题颜色 --ti-lowcode-component-block-list-border-color: var(--ti-lowcode-common-border-color-1); // 快照标题颜色 - --ti-lowcode-component-block-list-item-active-bg: var(----ti-lowcode-common-component-bg-1); // 区块 active 背景色 + --ti-lowcode-component-block-list-item-active-bg: var(--ti-lowcode-common-component-bg-1); // 区块 active 背景色 --ti-lowcode-component-block-version-list-item-border-color: var(--ti-lowcode-common-border-color-2); --ti-lowcode-component-block-version-list-item-bg: var(--ti-lowcode-common-component-bg-2); --ti-lowcode-component-block-version-list-version-bg: var(--ti-lowcode-common-component-bg-3); diff --git a/packages/theme/light/events.less b/packages/theme/light/events.less index 38b33abf4..a22c18f0b 100644 --- a/packages/theme/light/events.less +++ b/packages/theme/light/events.less @@ -15,7 +15,7 @@ --ti-lowcode-events-bind-action-item-color: var(--ti-lowcode-common-primary-text-color); --ti-lowcode-events-bind-action-item-hover-bg-color: var(--ti-lowcode-common-component-bg-13); --ti-lowcode-events-bind-action-item-linked-bg-color: var(--ti-lowcode-common-status-success); - --ti-lowcode-events-bind-action-item-linked-color: var(----ti-lowcode-common-text-color-10); + --ti-lowcode-events-bind-action-item-linked-color: var(--ti-lowcode-common-text-color-10); --ti-lowcode-events-empty-action-color: var(--ti-lowcode-common-text-color-6); --ti-lowcode-events-empty-action-tips-strong-color: var(--ti-lowcode-common-warning-color); } @@ -24,7 +24,7 @@ --ti-lowcode-events-advanced-config-color: var(--ti-lowcode-common-primary-text-color); --ti-lowcode-events-advanced-label-color: var(--ti-lowcode-common-text-color-6); --ti-lowcode-events-advanced-binding-state-bg-color: var(--ti-lowcode-common-component-bg-9); - --ti-lowcode-events-advanced-binding-state-color: var(----ti-lowcode-common-text-color-10); + --ti-lowcode-events-advanced-binding-state-color: var(--ti-lowcode-common-text-color-10); } .bind-event-dialog-content { diff --git a/packages/theme/light/help.less b/packages/theme/light/help.less index 126522387..ae9a59497 100644 --- a/packages/theme/light/help.less +++ b/packages/theme/light/help.less @@ -1,15 +1,15 @@ .shepherd-modal-overlay-container, .tiny-guide { --ti-lowcode-help-guide-content-text-color: var(--ti-lowcode-common-text-color-8); - --ti-lowcode-help-guide-title-text-color: var(----ti-lowcode-common-primary-text-color); - --ti-lowcode-help-guide-progress-style-text-color: var(----ti-lowcode-common-primary-text-color); + --ti-lowcode-help-guide-title-text-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-help-guide-progress-style-text-color: var(--ti-lowcode-common-primary-text-color); --ti-lowcode-help-guide-mask-bg-color: var(--ti-lowcode-common-component-bg-16); } .help-plugin-box { --ti-lowcode-help-box-bg-color: var(--ti-lowcode-common-component-bg-2); --ti-lowcode-help-box-shadow: 0px 2px 6px 0px var(--ti-lowcode-common-rgba-1); - --ti-lowcode-help-box-title-text-color: var(----ti-lowcode-common-primary-text-color); - --ti-lowcode-help-box-item-text-color: var(----ti-lowcode-common-primary-text-color); + --ti-lowcode-help-box-title-text-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-help-box-item-text-color: var(--ti-lowcode-common-primary-text-color); --ti-lowcode-help-box-question-border-top: var(--ti-lowcode-common-border-color-12); --ti-lowcode-help-box-question-item-text-color: var(--ti-lowcode-common-primary-color); } From 698e5055684487ed9fb6afc39515371478083eb4 Mon Sep 17 00:00:00 2001 From: James-9696 Date: Thu, 25 Jul 2024 23:37:28 -0700 Subject: [PATCH 11/14] update theme-base package --- packages/theme/base/src/dark/index.js | 1 - packages/theme/base/src/index.js | 8 +++++--- packages/theme/base/src/light/index.js | 1 - 3 files changed, 5 insertions(+), 5 deletions(-) delete mode 100644 packages/theme/base/src/dark/index.js delete mode 100644 packages/theme/base/src/light/index.js diff --git a/packages/theme/base/src/dark/index.js b/packages/theme/base/src/dark/index.js deleted file mode 100644 index 5dc280ee5..000000000 --- a/packages/theme/base/src/dark/index.js +++ /dev/null @@ -1 +0,0 @@ -import './dark-common.less' diff --git a/packages/theme/base/src/index.js b/packages/theme/base/src/index.js index d7a98928a..fc0bd1f8c 100644 --- a/packages/theme/base/src/index.js +++ b/packages/theme/base/src/index.js @@ -1,7 +1,9 @@ // 提供engine主题包的样式定义引入 import './base.less' import './common.less' -// TODO: 须提供变量区分亮暗两套主题，再分别引入dark和light，达到分别显示tinyvue组件亮暗色 -import './dark' -import './light' +if (import.meta.env.VITE_THEME === 'light') { + import('./light/light-common.less') +} else { + import('./dark/dark-common.less') +} import './component-common.less' diff --git a/packages/theme/base/src/light/index.js b/packages/theme/base/src/light/index.js deleted file mode 100644 index 1fb5e12f4..000000000 --- a/packages/theme/base/src/light/index.js +++ /dev/null @@ -1 +0,0 @@ -import './light-common.less' From 6d25ea4e8e13b1ca8283127db800c80a8869dfbd Mon Sep 17 00:00:00 2001 From: James-9696 Date: Wed, 31 Jul 2024 18:23:31 -0700 Subject: [PATCH 12/14] fix(theme-base): update theme-base package file --- packages/design-core/src/init.js | 5 ++++- .../dark/{dark-common.less => dark-common.js} | 3 +-- packages/theme/base/src/index.js | 21 ++++++++++++++----- packages/theme/base/src/light/light-common.js | 2 ++ .../theme/base/src/light/light-common.less | 3 --- 5 files changed, 23 insertions(+), 11 deletions(-) rename packages/theme/base/src/dark/{dark-common.less => dark-common.js} (50%) create mode 100644 packages/theme/base/src/light/light-common.js delete mode 100644 packages/theme/base/src/light/light-common.less diff --git a/packages/design-core/src/init.js b/packages/design-core/src/init.js index 5aa08c939..c3926dbcd 100644 --- a/packages/design-core/src/init.js +++ b/packages/design-core/src/init.js @@ -16,7 +16,9 @@ import i18n from '@opentiny/tiny-engine-common/js/i18n' import { initMonitor } from '@opentiny/tiny-engine-common/js/monitor' import { injectGlobalComponents, setGlobalMonacoEditorTheme, Modal, Notify } from '@opentiny/tiny-engine-common' import { initHttp } from '@opentiny/tiny-engine-http' -import '@opentiny/tiny-engine-theme-base' +import TinyThemeTool from '@opentiny/vue-theme/theme-tool' +import { tinyThemeLightVars } from '@opentiny/tiny-engine-theme-base' + import { defineEntry, mergeRegistry, @@ -51,6 +53,7 @@ const defaultLifeCycles = { initHttp({ env: import.meta.env }) // eslint-disable-next-line no-new + new TinyThemeTool(tinyThemeLightVars, 'tinyThemeLightVars') if (import.meta.env.VITE_ERROR_MONITOR === 'true' && import.meta.env.VITE_ERROR_MONITOR_URL) { initMonitor(import.meta.env.VITE_ERROR_MONITOR_URL) diff --git a/packages/theme/base/src/dark/dark-common.less b/packages/theme/base/src/dark/dark-common.js similarity index 50% rename from packages/theme/base/src/dark/dark-common.less rename to packages/theme/base/src/dark/dark-common.js index d388ffd02..5d5be1561 100644 --- a/packages/theme/base/src/dark/dark-common.less +++ b/packages/theme/base/src/dark/dark-common.js @@ -1,3 +1,2 @@ // tinyvue组件的暗色主题 -:root { -} +export const tinyDarkTheme = {} diff --git a/packages/theme/base/src/index.js b/packages/theme/base/src/index.js index fc0bd1f8c..4eb47b18a 100644 --- a/packages/theme/base/src/index.js +++ b/packages/theme/base/src/index.js @@ -1,9 +1,20 @@ // 提供engine主题包的样式定义引入 import './base.less' import './common.less' -if (import.meta.env.VITE_THEME === 'light') { - import('./light/light-common.less') -} else { - import('./dark/dark-common.less') -} +import { tinyDarkTheme } from './dark/dark-common' +import { tinyLightTheme } from './light/light-common' import './component-common.less' + +export const tinyThemeLightVars = { + id: 'tiny-light-theme', + name: 'tinyLightTheme', + cnName: '', + data: { ...tinyLightTheme } +} + +export const tinyThemeDarkVars = { + id: 'tiny-dark-theme', + name: 'tinyDarkTheme', + cnName: '', + data: { ...tinyDarkTheme } +} diff --git a/packages/theme/base/src/light/light-common.js b/packages/theme/base/src/light/light-common.js new file mode 100644 index 000000000..04d4c678d --- /dev/null +++ b/packages/theme/base/src/light/light-common.js @@ -0,0 +1,2 @@ +// tinyvue组件的亮色主题 +export const tinyLightTheme = {} diff --git a/packages/theme/base/src/light/light-common.less b/packages/theme/base/src/light/light-common.less deleted file mode 100644 index 6dcce4df4..000000000 --- a/packages/theme/base/src/light/light-common.less +++ /dev/null @@ -1,3 +0,0 @@ -// tinyvue组件的亮色主题 -:root { -} From 5527b43ab40c7f676a73721fcd12b2d2325e76e7 Mon Sep 17 00:00:00 2001 From: James-9696 Date: Fri, 23 Aug 2024 01:51:44 -0700 Subject: [PATCH 13/14] fix: modify theme-base --- packages/common/component/MetaCodeEditor.vue | 2 +- packages/common/component/SearchEmpty.vue | 19 + packages/layout/src/DesignSettings.vue | 9 - packages/plugins/block/src/Main.vue | 3 +- packages/plugins/data/src/DataSourceList.vue | 2 +- packages/plugins/i18n/src/Main.vue | 3 - .../src/meta/block/src/BlockGroup.vue | 4 +- packages/plugins/page/src/PageInputOutput.vue | 2 - packages/plugins/page/src/PageSetting.vue | 9 - packages/plugins/tree/src/Main.vue | 52 - .../events/src/components/AdvanceConfig.vue | 2 +- packages/settings/panel/src/Main.vue | 9 - packages/theme/base/src/base.less | 23 +- packages/theme/base/src/common.less | 31 +- packages/theme/base/src/component-common.less | 764 ++++++- packages/theme/base/src/index.js | 1 + packages/theme/base/src/light/light-common.js | 185 +- .../src/page/base-config-page.less} | 90 +- packages/theme/base/src/var-component.less | 234 ++ packages/theme/common/global.less | 1958 ----------------- packages/theme/dark/base.less | 273 --- packages/theme/dark/button.less | 34 - packages/theme/dark/index.less | 16 - packages/theme/dark/radio.less | 19 - packages/theme/dark/tiny-checkbox.less | 27 - packages/theme/dark/tiny-collapse.less | 7 - packages/theme/dark/tiny-dialog-box.less | 7 - packages/theme/dark/tiny-grid.less | 24 - packages/theme/dark/tiny-input.less | 25 - packages/theme/dark/tiny-modal.less | 10 - packages/theme/dark/tiny-notify.less | 5 - packages/theme/dark/tiny-numeric.less | 11 - packages/theme/dark/tiny-search.less | 23 - packages/theme/dark/tiny-switch.less | 5 - packages/theme/dark/tiny-tabs.less | 5 - packages/theme/dark/variable.less | 17 +- packages/theme/light/base.less | 273 --- packages/theme/light/block.less | 4 +- packages/theme/light/button.less | 36 - packages/theme/light/datasource.less | 2 +- packages/theme/light/index.less | 14 - packages/theme/light/pageManage.less | 6 +- packages/theme/light/radio.less | 6 - packages/theme/light/tiny-collapse.less | 7 - packages/theme/light/tiny-dialog-box.less | 7 - packages/theme/light/tiny-grid.less | 24 - packages/theme/light/tiny-input.less | 24 - packages/theme/light/tiny-modal.less | 5 - packages/theme/light/tiny-notify.less | 5 - packages/theme/light/tiny-numeric.less | 4 - packages/theme/light/tiny-search.less | 14 - packages/theme/light/tiny-switch.less | 5 - packages/theme/light/tree.less | 2 +- packages/theme/light/variable.less | 8 +- 54 files changed, 1310 insertions(+), 3046 deletions(-) rename packages/theme/{common/base.less => base/src/page/base-config-page.less} (94%) create mode 100644 packages/theme/base/src/var-component.less delete mode 100644 packages/theme/common/global.less delete mode 100644 packages/theme/dark/base.less delete mode 100644 packages/theme/dark/button.less delete mode 100644 packages/theme/dark/radio.less delete mode 100644 packages/theme/dark/tiny-checkbox.less delete mode 100644 packages/theme/dark/tiny-collapse.less delete mode 100644 packages/theme/dark/tiny-dialog-box.less delete mode 100644 packages/theme/dark/tiny-grid.less delete mode 100644 packages/theme/dark/tiny-input.less delete mode 100644 packages/theme/dark/tiny-modal.less delete mode 100644 packages/theme/dark/tiny-notify.less delete mode 100644 packages/theme/dark/tiny-numeric.less delete mode 100644 packages/theme/dark/tiny-search.less delete mode 100644 packages/theme/dark/tiny-switch.less delete mode 100644 packages/theme/dark/tiny-tabs.less delete mode 100644 packages/theme/light/base.less delete mode 100644 packages/theme/light/button.less delete mode 100644 packages/theme/light/radio.less delete mode 100644 packages/theme/light/tiny-collapse.less delete mode 100644 packages/theme/light/tiny-dialog-box.less delete mode 100644 packages/theme/light/tiny-grid.less delete mode 100644 packages/theme/light/tiny-input.less delete mode 100644 packages/theme/light/tiny-modal.less delete mode 100644 packages/theme/light/tiny-notify.less delete mode 100644 packages/theme/light/tiny-numeric.less delete mode 100644 packages/theme/light/tiny-search.less delete mode 100644 packages/theme/light/tiny-switch.less diff --git a/packages/common/component/MetaCodeEditor.vue b/packages/common/component/MetaCodeEditor.vue index c61322aaf..b96ac0cbb 100644 --- a/packages/common/component/MetaCodeEditor.vue +++ b/packages/common/component/MetaCodeEditor.vue @@ -283,7 +283,7 @@ export default { border-color: var(--ti-lowcode-meta-codeEditor-border-hover-color); } .text-content { - --ellipsis-line: 1; + -webkit-line-clamp: 1; } &.empty-color { color: var(--ti-lowcode-common-text-desc-color); diff --git a/packages/common/component/SearchEmpty.vue b/packages/common/component/SearchEmpty.vue index de010835d..479c602af 100644 --- a/packages/common/component/SearchEmpty.vue +++ b/packages/common/component/SearchEmpty.vue @@ -17,3 +17,22 @@ export default { } } + diff --git a/packages/layout/src/DesignSettings.vue b/packages/layout/src/DesignSettings.vue index f344494d9..a62353c31 100644 --- a/packages/layout/src/DesignSettings.vue +++ b/packages/layout/src/DesignSettings.vue @@ -73,15 +73,6 @@ export default { padding: 0; margin: 0; } - .tiny-tabs__item { - color: var(--ti-lowcode-setting-panel-tabs-item-title-color); - &:hover { - color: var(--ti-lowcode-setting-panel-tabs-item-title-hover-color); - } - &.is-active { - color: var(--ti-lowcode-setting-panel-tabs-item-title-active-color); - } - } } :deep(.tiny-collapse-item__content) { diff --git a/packages/plugins/block/src/Main.vue b/packages/plugins/block/src/Main.vue index fda3a92ee..4f76fe152 100644 --- a/packages/plugins/block/src/Main.vue +++ b/packages/plugins/block/src/Main.vue @@ -431,7 +431,6 @@ export default { border-color: transparent; background-color: var(--ti-lowcode-component-block-list-add-group-btn-bg); width: 30px; - height: 30px; border: var(--ti-lowcode-component-block-list-add-group-btn-border); border-radius: var(--ti-lowcode-component-block-list-add-group-btn-border-radius); } @@ -506,7 +505,7 @@ export default { .popper__arrow { &, &::after { - border-right-color: var(--ti-lowcode-common-component-hover-bg); + border-right-color: var(--ti-lowcode-common-component-bg-25); } } } diff --git a/packages/plugins/data/src/DataSourceList.vue b/packages/plugins/data/src/DataSourceList.vue index e5df9637f..7ea1bc9a6 100644 --- a/packages/plugins/data/src/DataSourceList.vue +++ b/packages/plugins/data/src/DataSourceList.vue @@ -123,7 +123,7 @@ export default { .data-source-list-item { &.selected, &:hover { - background: var(--ti-lowcode-common-component-hover-bg); + background: var(--ti-lowcode-common-component-bg-25); } } diff --git a/packages/plugins/i18n/src/Main.vue b/packages/plugins/i18n/src/Main.vue index 6e54e3d05..c2fbaaca0 100644 --- a/packages/plugins/i18n/src/Main.vue +++ b/packages/plugins/i18n/src/Main.vue @@ -570,9 +570,6 @@ export default { .tiny-input { margin: 12px 0; margin-left: 8px; - :deep(.tiny-input__prefix) { - left: 8px; - } } .tiny-select { margin: 12px 0; diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroup.vue b/packages/plugins/materials/src/meta/block/src/BlockGroup.vue index fbbb30f3e..344730c73 100644 --- a/packages/plugins/materials/src/meta/block/src/BlockGroup.vue +++ b/packages/plugins/materials/src/meta/block/src/BlockGroup.vue @@ -428,7 +428,7 @@ export default { .add-group-btn { font-size: 16px; width: 32px; - height: 32px; + height: 24px; border-radius: 6px; border-color: var(--ti-lowcode-materials-border-icon-border-color); background-color: var(--ti-lowcode-materials-border-icon-bg-color); @@ -499,7 +499,7 @@ export default { .popper__arrow { &, &::after { - border-right-color: var(--ti-lowcode-common-component-hover-bg); + border-right-color: var(--ti-lowcode-common-component-bg-25); } } } diff --git a/packages/plugins/page/src/PageInputOutput.vue b/packages/plugins/page/src/PageInputOutput.vue index b7df70f9d..78f6e5134 100644 --- a/packages/plugins/page/src/PageInputOutput.vue +++ b/packages/plugins/page/src/PageInputOutput.vue @@ -106,7 +106,6 @@ export default { diff --git a/packages/plugins/tree/src/Main.vue b/packages/plugins/tree/src/Main.vue index 8eb0ae2ae..77740c2e1 100644 --- a/packages/plugins/tree/src/Main.vue +++ b/packages/plugins/tree/src/Main.vue @@ -312,66 +312,14 @@ export default { .tree-handle svg { color: var(--ti-lowcode-tree-icon-color); - - &:hover { - color: var(--ti-lowcode-tree-hover-icon-color); - } } } :deep(.tiny-grid) { - background-color: unset; - - .tiny-grid-tree-wrapper { - margin-right: 8px; - - .tiny-grid-tree__node-btn { - width: 14px; - height: 14px; - margin-bottom: 2px; - - &:hover { - color: var(--ti-lowcode-tree-icon-hover-color); - } - } - } .high-light-node { .tree-handle svg { color: var(--ti-lowcode-tree-selected-color); } } } - - :deep(.tiny-grid .tiny-grid__body-wrapper .tiny-grid-body__row) { - background-color: var(--ti-lowcode-common-component-bg); - &:hover { - background-color: var(--ti-lowcode-common-component-hover-bg); - } - } - :deep(.tiny-grid .tiny-grid__body-wrapper .tiny-grid-body__row:not(.row__hover):nth-child(2n)) { - background-color: var(--ti-lowcode-common-component-bg); - &:hover { - background-color: var(--ti-lowcode-common-component-hover-bg); - } - } - :deep(.tiny-grid-body__row.nav-tree .tiny-grid-cell) { - line-height: inherit; - } - :deep(.high-light-node) { - background: var(--ti-lowcode-tree-selected-bg) !important; - - :deep(.eyeOpen) { - display: block !important; - } - } - :deep(.tiny-grid .tiny-grid__body-wrapper .tiny-grid-body__column) { - color: var(--ti-lowcode-tree-color); - } - :deep(.tiny-grid .tiny-grid__body-wrapper .high-light-node .tiny-grid-body__column) { - color: var(--ti-lowcode-tree-selected-color); - font-weight: bold; - } - :deep(.tiny-grid .tiny-grid__body-wrapper .high-light-node .tiny-grid-body__column .tiny-grid-tree__node-btn) { - color: var(--ti-lowcode-tree-selected-color); - } } diff --git a/packages/settings/events/src/components/AdvanceConfig.vue b/packages/settings/events/src/components/AdvanceConfig.vue index 310c54381..fe6402773 100644 --- a/packages/settings/events/src/components/AdvanceConfig.vue +++ b/packages/settings/events/src/components/AdvanceConfig.vue @@ -260,7 +260,7 @@ export default { height: 30px; line-height: 22px; padding: 4px 8px; - --ellipsis-line: 1; + -webkit-line-clamp: 1; border-radius: 6px; } diff --git a/packages/settings/panel/src/Main.vue b/packages/settings/panel/src/Main.vue index 17e77f18a..4a68e2b3a 100644 --- a/packages/settings/panel/src/Main.vue +++ b/packages/settings/panel/src/Main.vue @@ -72,15 +72,6 @@ export default { padding: 0; margin: 0; } - .tiny-tabs__item { - color: var(--ti-lowcode-setting-panel-tabs-item-title-color); - &:hover { - color: var(--ti-lowcode-setting-panel-tabs-item-title-hover-color); - } - &.is-active { - color: var(--ti-lowcode-setting-panel-tabs-item-title-active-color); - } - } } :deep(.tiny-collapse-item__content) { diff --git a/packages/theme/base/src/base.less b/packages/theme/base/src/base.less index bb8f164a0..8b3d7d54f 100644 --- a/packages/theme/base/src/base.less +++ b/packages/theme/base/src/base.less @@ -1,8 +1,8 @@ :root { // 透明色 - --ti-base-color-transparent: transparent; - --ti-base-color-inherit: inherit; - --ti-base-color-unset: unset; + --ti-lowcode-base-color-transparent: transparent; + --ti-lowcode-base-color-inherit: inherit; + --ti-lowcode-base-color-unset: unset; // 灰阶 --ti-lowcode-base-gray-1: #fff; @@ -417,6 +417,10 @@ --ti-lowcode-base-rgba-20: rgba(94, 94, 94, 0.8); --ti-lowcode-base-rgba-21: rgba(121, 121, 121, 0.4); --ti-lowcode-base-rgba-22: rgba(138, 142, 153, 0.99); + --ti-lowcode-base-rgba-23: rgba(25, 25, 25, 0.15); + --ti-lowcode-base-rgba-24: rgba(0, 0, 0, 0.16); + + --ti-lowcode-base-rgb-1: rgb(80, 212, 171); // 状态色 --ti-lowcode-base-error-color: #f23030; @@ -463,6 +467,7 @@ /** * 1.3 字号 **/ + --ti-lowcode-base-font-size: 11px; // 正文-常规 --ti-lowcode-base-font-size-base: 12px; // 正文-常规 --ti-lowcode-base-font-size-1: 14px; --ti-lowcode-base-font-size-2: 16px; @@ -489,10 +494,10 @@ /** * 1.5 圆角 **/ - --ti-common-border-radius-normal: 2px; // 常规 - --ti-common-border-radius-0: 0px; // 直角 - --ti-common-border-radius-1: 4px; // 圆角-1 - --ti-common-border-radius-2: 6px; // 圆角-1 - --ti-common-border-radius-3: 8px; // 圆角-2 - --ti-common-border-radius-4: 50%; // 圆形 + --ti-lowcode-base-border-radius-normal: 2px; // 常规 + --ti-lowcode-base-border-radius-0: 0px; // 直角 + --ti-lowcode-base-border-radius-1: 4px; // 圆角-1 + --ti-lowcode-base-border-radius-2: 6px; // 圆角-1 + --ti-lowcode-base-border-radius-3: 8px; // 圆角-2 + --ti-lowcode-base-border-radius-4: 50%; // 圆形 } diff --git a/packages/theme/base/src/common.less b/packages/theme/base/src/common.less index 7299dcd00..b0fcff13e 100644 --- a/packages/theme/base/src/common.less +++ b/packages/theme/base/src/common.less @@ -17,7 +17,7 @@ --ti-lowcode-common-component-bg-13: var(--ti-lowcode-base-bg-1); --ti-lowcode-common-component-bg-14: var(--ti-lowcode-base-red-16); --ti-lowcode-common-component-bg-15: var(--ti-lowcode-base-gray-8); - --ti-lowcode-common-component-bg-16: var(--ti-base-color-inherit); + --ti-lowcode-common-component-bg-16: var(--ti-lowcode-base-color-inherit); --ti-lowcode-common-component-bg-17: var(--ti-lowcode-base-rgba-3); --ti-lowcode-common-component-bg-18: var(--ti-lowcode-base-rgba-4); --ti-lowcode-common-component-bg-19: var(--ti-lowcode-base-gray-11); @@ -83,6 +83,9 @@ --ti-lowcode-common-component-bg-79: var(--ti-lowcode-base-dark-5); --ti-lowcode-common-component-bg-80: var(--ti-lowcode-base-rgba-21); --ti-lowcode-common-component-bg-81: var(--ti-lowcode-base-rgba-20); + --ti-lowcode-common-component-bg-82: var(--ti-lowcode-base-gray-31); + --ti-lowcode-common-component-bg-83: var(--ti-lowcode-base-gray-36); + --ti-lowcode-common-component-bg-84: var(--ti-lowcode-base-gray-18); // 文本 --ti-lowcode-common-primary-text-color: var(--ti-lowcode-base-dark-5); @@ -104,7 +107,7 @@ --ti-lowcode-common-text-color-10: var(--ti-lowcode-base-text-link-color-3); --ti-lowcode-common-text-color-11: var(--ti-lowcode-base-gray-37); --ti-lowcode-common-text-color-12: var(--ti-lowcode-base-yellow-14); - --ti-lowcode-common-text-color-13: var(--ti-base-color-inherit); + --ti-lowcode-common-text-color-13: var(--ti-lowcode-base-color-inherit); --ti-lowcode-common-text-color-14: var(--ti-lowcode-base-gray-44); --ti-lowcode-common-text-color-15: var(--ti-lowcode-base-dark-11); --ti-lowcode-common-text-color-16: var(--ti-lowcode-base-blue-19); @@ -129,7 +132,7 @@ --ti-lowcode-common-text-color-35: var(--ti-lowcode-base-gray-21); --ti-lowcode-common-text-color-36: var(--ti-lowcode-base-blue-24); --ti-lowcode-common-text-color-37: var(--ti-lowcode-base-gray-61); - --ti-lowcode-common-text-color-38: var(--ti-base-color-transparent); + --ti-lowcode-common-text-color-38: var(--ti-lowcode-base-color-transparent); --ti-lowcode-common-text-color-39: var(--ti-lowcode-base-gray-11); --ti-lowcode-common-text-color-40: var(--ti-lowcode-base-gray-45); --ti-lowcode-common-text-color-41: var(--ti-lowcode-base-dark-text-color); @@ -175,7 +178,7 @@ --ti-lowcode-common-border-color-15: var(--ti-lowcode-base-dark-5); --ti-lowcode-common-border-color-16: var(--ti-lowcode-base-gray-46); --ti-lowcode-common-border-color-17: var(--ti-lowcode-base-dark-20); - --ti-lowcode-common-border-color-18: var(--ti-base-color-transparent); + --ti-lowcode-common-border-color-18: var(--ti-lowcode-base-color-transparent); --ti-lowcode-common-border-color-19: var(--ti-lowcode-base-gray-1); --ti-lowcode-common-border-color-20: var(--ti-lowcode-base-gray-30); --ti-lowcode-common-border-color-21: var(--ti-lowcode-base-gray-48); @@ -235,16 +238,26 @@ --ti-lowcode-common-svg-button-active-bg-color: var(--ti-lowcode-base-bg-1); // 圆角 - --ti-lowcode-common-radius-6: var(--ti-common-border-radius-2); + --ti-lowcode-common-radius-4: var(--ti-lowcode-base-border-radius-1); + --ti-lowcode-common-radius-6: var(--ti-lowcode-base-border-radius-2); + --ti-lowcode-common-radius-normal: var(--ti-lowcode-base-border-radius-normal); //状态 --ti-lowcode-common-status-error: var(--ti-lowcode-base-error-color); --ti-lowcode-common-status-success: var(--ti-lowcode-base-success-color); + --ti-lowcode-common-status-prompt: var(--ti-lowcode-base-prompt-color); + --ti-lowcode-common-status-warning: var(--ti-lowcode-base-warn-color); // 权重值 --ti-lowcode-common-font-weight-normal: var(--ti-lowcode-base-font-weight-bold); --ti-lowcode-common-font-weight-400: var(--ti-lowcode-base-font-weight-4); + // 字体 + --ti-lowcode-common-font-size-11: var(--ti-lowcode-base-font-size); + --ti-lowcode-common-font-size-12: var(--ti-lowcode-base-font-size-base); + --ti-lowcode-common-font-size-14: var(--ti-lowcode-base-font-size-1); + --ti-lowcode-common-font-size-16: var(--ti-lowcode-base-font-size-2); + // 其他 --ti-lowcode-common-dark-1: var(--ti-lowcode-base-dark-1); --ti-lowcode-common-dark-2: var(--ti-lowcode-base-dark-13); @@ -256,12 +269,14 @@ --ti-lowcode-common-gray-53: var(--ti-lowcode-base-gray-53); --ti-lowcode-common-gray-54: var(--ti-lowcode-base-gray-54); --ti-lowcode-common-blue-22: var(--ti-lowcode-base-blue-22); - --ti-lowcode-common-bg-0: var(--ti-base-color-transparent); + --ti-lowcode-common-bg-0: var(--ti-lowcode-base-color-transparent); --ti-lowcode-common-layout-bg: var(--ti-lowcode-base-gray-1); --ti-lowcode-common-header-bg: var(--ti-lowcode-base-gray-8); --ti-lowcode-common-text-hover: var(--ti-lowcode-base-blue-17); - --ti-lowcode-common-component-hover-bg: var(--ti-lowcode-base-gray-5); --ti-lowcode-common-rgba-1: var(--ti-lowcode-base-rgba-1); --ti-lowcode-common-rgba-10: var(--ti-lowcode-base-rgba-10); - --ti-lowcode-common-color-unset: var(--ti-base-color-unset); + --ti-lowcode-common-rgba-23: var(--ti-lowcode-base-rgba-23); + --ti-lowcode-common-rgba-24: var(--ti-lowcode-base-rgba-24); + --ti-lowcode-common-rgb-1: var(--ti-lowcode-base-rgb-1); + --ti-lowcode-common-color-unset: var(--ti-lowcode-base-color-unset); } diff --git a/packages/theme/base/src/component-common.less b/packages/theme/base/src/component-common.less index 2c8dfc8ee..5f99ca899 100644 --- a/packages/theme/base/src/component-common.less +++ b/packages/theme/base/src/component-common.less @@ -1 +1,763 @@ -// 用于写tinyvue组件的样式 +@import './var-component.less'; + +// 1、select 下拉框组件 +.tiny-select { + .component-css-vars-select(); + .tiny-input { + // 输入框 + &.is-focus .tiny-input__inner { + border-color: var(--ti-select-input-inner-border-color); + color: var(--ti-select-input-inner-text-color); + font-size: var(--ti-select-input-inner-font-size); + } + // 下拉右侧箭头图标 + .tiny-select__caret { + font-size: var(--ti-select-input-caret-font-size); + color: var(--ti-select-input-caret-color); + } + } + .tiny-select__tags { + .tiny-tag { + color: var(--ti-select-tags-text-color); + background-color: var(--ti-select-tags-bg-color); + + .tiny-tag__close { + color: var(--ti-select-tags-text-color); + &:hover { + color: var(--ti-select-tags-close-color); + } + } + } + } +} + +.tiny-select-dropdown { + .component-css-vars-select-drop-down(); + // 下拉新增列 + .tiny-select__top-create { + margin: 8px 12px 4px 12px; + > div { + color: var(--ti-select-dropdown-text-color); + font-size: var(--ti-select-dropdown-font-size); + } + } + // 下拉选项框 + .tiny-select-dropdown__item { + padding: 0px 12px; + } + // 下拉选项框上下边距 + .tiny-popper { + padding: 8px 0px; + } + // 带搜索的下拉 + .tiny-select-dropdown__search { + margin: 0 12px 4px 12px; + } + // 选项框字体 + .tiny-option { + // 选中状态 + &.selected { + color: var(--ti-select-dropdown-option-text-color); + background-color: var(--ti-select-dropdown-option-bg-color); + &:hover { + background-color: var(--ti-select-dropdown-option-bg-hover-color); + } + } + color: var(--ti-select-dropdown-option-selected-text-color); + // 悬浮状态 + &.hover, + &:hover { + background-color: var(--ti-select-dropdown-option-bg-hover-color); + } + } + // 选项框图标 + .tiny-option > .tiny-option__icon { + font-size: var(--ti-select-dropdown-option-icon-font-size); + margin-right: 4px; + color: var(--ti-select-dropdown-option-icon-color); + } +} + +// 2、input框 +.tiny-input { + .component-css-vars-input(); + &.tiny-input-prefix .tiny-input__inner { + padding: 0 8px 0 30px; + } + .tiny-input__inner { + border-radius: var(--ti-input-inner-border-radius); + padding: 0 8px 0 12px; + height: 24px; + border-color: var(--ti-input-inner-border-color); + color: var(--ti-input-inner-text-color); + font-size: var(--ti-input-inner-font-size); + &:hover { + border-color: var(--ti-input-inner-border-hover-color); + } + &:focus { + border-color: var(--ti-input-inner-border-focus-color); + } + } + &.is-disabled .tiny-input__inner { + fill: var(--ti-input-inner-disabled); + background: var(--ti-input-inner-disabled); + color: var(--ti-input-inner-disabled-text); + font-size: var(--ti-input-inner-font-size); + } +} + +// 3、折叠框 +.tiny-collapse { + .component-css-vars-collapse(); + border-top: 0; + .tiny-collapse-item__header { + flex-direction: row-reverse; + font-size: var(--ti-collapse-font-size); + color: var(--ti-collapse-text-color); + font-weight: var(--ti-collapse-font-weight); + background-color: var(--ti-collapse-header-bg-color); + padding: 0 8px 0 12px; + border: 0px; + border-bottom-style: none; + + .tiny-collapse-item__word-overflow { + margin: 12px 0px; + width: 100%; + } + .tiny-collapse-item__arrow { + display: flex; + svg { + font-size: var(--ti-collapse-svg-font-size); + color: var(--ti-collapse-word-overflow-svg-color); + } + } + } + .tiny-collapse-item { + border-bottom: 0px; + margin: 0; + } + .tiny-collapse-item__content { + border: 0px; + padding: 12px; + } +} + +// 4、树-tree +.tiny-tree { + .component-css-vars-tree(); + .tiny-tree-node__wrapper { + cursor: pointer; + color: var(--ti-tree-text-color); + font-size: var(--ti-tree-font-size); + .tiny-tree-node { + .tiny-tree-node__content { + height: 24px; + .tiny-tree-node__content-left { + padding: 0 12px; + .tiny-tree-node__content-box { + padding: 0 12px 0 4px; + background-color: var(--ti-tree-node-content-box-bg-color); + &:hover { + background-color: var(--ti-tree-node-content-box-hover-bg-color); + } + } + } + } + .is-current:not(.show-checkbox) > .tiny-tree-node__content .tiny-tree-node__content-box, + .is-current:not(.show-checkbox) > .tiny-tree-node__content .tiny-tree-node__content-right { + background-color: var(--ti-tree-node-content-box-current-bg-color); + } + } + } +} + +// 5、页签tabs +.tiny-tabs { + .component-css-vars-tabs(); + .tiny-tabs__header { + .tiny-tabs__item__title { + padding: 0 12px; + } + .tiny-tabs__nav { + border-radius: var(--ti-tabs-nav-border-radius); + background-color: var(--ti-tabs-nav-bg-color); + } + .tiny-tabs__item { + font-size: var(--ti-tabs-font-size); + height: 24px; + line-height: 24px; + color: var(--ti-tabs-item-text-color); + background-color: var(--ti-tabs-item-bg-color); + &.is-active { + color: var(--ti-tabs-item-active-text-color); + } + } + } +} + +// 6、search组件 +.tiny-search { + .component-css-vars-search(); + .tiny-search__line { + height: 24px; + border-radius: var(--ti-search-line-border-radius); + border: 1px solid var(--ti-search-line-border-color); + font-size: var(--ti-search-line-font-size); + } + .tiny-search__input { + padding: 0 8px 0 12px; + } + .tiny-search__input-btn { + a { + height: 24px; + line-height: 24px; + } + } + .tiny-search__input-btn svg { + font-size: var(--ti-search-input-btn-svg-font-size); + color: var(--ti-search-input-btn-svg-color); + } +} + +// 7、dialog组件 +.tiny-dialog-box { + .component-css-vars-dialog-box(); + padding: 20px; + .tiny-dialog-box__header { + font-size: var(--ti-dialog-box-header-font-size); + color: var(--ti-dialog-box-header-font-color); + padding: 0; + } + .tiny-dialog-box__body { + color: var(--ti-dialog-box-body-font-color); + padding: 0; + margin-top: 16px; + } + .tiny-dialog-box__footer { + margin-top: 16px; + padding: 0; + display: flex; + flex-direction: row-reverse; + } +} + +// 8、button按钮 +.tiny-button { + .component-css-vars-button(); + font-size: var(--ti-button-font-size); + border-radius: var(--ti-button-border-radius); + padding: 0 8px; + height: 24px; + line-height: 24px; + // 默认按钮 + &.tiny-button--default { + margin-right: 8px; + margin-left: 0px; + border: 1px solid var(--ti-button-default-border-color); + color: var(--ti-button-default-font-color); + background-color: var(--ti-button-default-bg-color); + fill: var(--ti-button-default-bg-color); + &:hover { + border: 1px solid var(--ti-button-default-hover-border-color); + } + } + // 确认按钮 + &.tiny-button--primary { + background-color: var(--ti-button-primary-bg-color); + fill: var(--ti-button-primary-bg-color); + color: var(--ti-button-primary-font-color); + border: 1px solid var(--ti-button-primary-border-color); + &:hover { + border: 1px solid var(--ti-button-primary-hover-border-color); + background-color: var(--ti-button-primary-hover-bg-color); + } + } + &.tiny-button--info { + color: var(--ti-button-info-font-color); + border-color: var(--ti-button-info-border-color); + background-color: var(--ti-button-info-bg-color); + + &:hover { + border-color: var(--ti-button-info-hover-border-color); + } + } + &.tiny-button--text { + color: var(--ti-button-text-font-color); + &:hover { + color: var(--ti-button-text-font-color); + text-decoration: none; + } + } + // 图标按钮 + &:not(.is-circle) .tiny-svg.is-text { + margin-right: 4px; + } +} + +.tiny-button-group { + .component-css-vars-button-group(); + ul.tiny-group-item { + border: 1px solid var(--ti-button-group-item-border-color); + border-radius: var(--ti-button-group-item-border-radius); + + li { + background-color: var(--ti-button-group-item-bg-color); + + &.active { + &:hover button:not(.disabled), + button:not(.disabled) { + background: var(--ti-button-group-item-active-disabled-bg-color); + border-color: var(--ti-button-group-item-active-disabled-border-color); + color: var(--ti-button-group-item-active-disabled-color); + } + } + + &:hover { + button:not(.disabled) { + color: var(--ti-button-group-item-hover-disabled-color); + background-color: var(--ti-button-group-item-hover-bg-color); + } + } + + &:not(:last-child) { + margin-right: 0; + } + } + + button { + background-color: var(--ti-button-group-item-bg-color); + color: var(--ti-button-group-item-font-color); + + &::before { + background: var(--ti-button-group-item-before-bg-color); + } + } + } +} + +// 9、modal模态框 +.tiny-modal__box { + .component-css-vars-modal-box(); + padding: 20px; + border-radius: var(--ti-modal-box-border-radius); + box-shadow: 0 0 10px 0 var(--ti-modal-box-shadow-color); + .tiny-modal__header { + padding: 0; + font-size: var(--ti-modal-box-header-font-size); + color: var(--ti-modal-box-header-font-color); + font-weight: var(--ti-modal-box-header-font-weight); + } + .tiny-modal__close-btn, + .tiny-modal__zoom-btn { + width: 16px; + height: 16px; + top: 0px; + right: 0; + color: var(--ti-modal-box-close-btn-color); + } + .tiny-modal__body { + margin-top: 12px; + font-size: var(--ti-modal-box-body-font-size); + color: var(--ti-modal-box-body-font-color); + } + .tiny-modal__footer { + padding: 0; + margin-top: 16px; + display: flex; + flex-direction: row-reverse; + } +} + +//10、modal的消息提示框 +.tiny-modal.tiny-modal__wrapper.type__message { + .component-css-vars-modal-message(); + .tiny-modal__box { + border-radius: var(--ti-modal-message-border-radius); + box-shadow: 0 2px 12px 0 var(--ti-modal-message-shadow-color); + padding: 0; + height: 38px; + .tiny-modal__body { + margin: 12px; + padding: 0; + } + } + .tiny-modal__content { + .tiny-modal__text { + font-size: var(--ti-modal-message-font-size); + color: var(--ti-modal-message-content-font-color); + } + } + .tiny-modal__close-wrapper .tiny-modal__close-btn { + color: var(--ti-modal-message-close-btn-color); + } +} + +// 11、numeric 组件 +.tiny-numeric { + .component-css-vars-numeric(); + .tiny-numeric__input-inner { + height: 24px; + border-radius: var(--ti-numeric-border-radius); + color: var(--ti-numeric-input-font-color); + border-color: var(--ti-numeric-input-border-color); + text-align: left; + } + &.is-controls-right { + .tiny-numeric__input-inner { + padding: 0 42px 0 12px; + } + //加减按钮 + .tiny-numeric__decrease, + .tiny-numeric__increase { + width: 14px; + border-left: 1px solid var(--ti-numeric-input-border-color); + } + } + .tiny-numeric-base .is-disabled { + fill: var(--ti-numeric-base-disabled-bg-color); + background: var(--ti-numeric-base-disabled-bg-color); + color: var(--ti-numeric-input-disabled-font-color); + } + .tiny-numeric__input { + background-color: var(--ti-numeric-input-bg-color); + border-color: var(--ti-numeric-input-border-color); + &.has-unit .tiny-numeric__input-inner { + padding: 0 42px 0 12px; + } + } + .tiny-numeric__unit { + color: var(--ti-numeric-unit-font-color); + background: var(--ti-numeric-unit-bg-color); + border: 0; + width: 14px; + margin-right: 4px; + } +} + +// 12、popover气泡卡片 +.tiny-popover.tiny-popper[x-placement] { + .component-css-vars-popover(); + padding: 0px 8px; + font-size: var(--ti-popover-font-size); + color: var(--ti-popover-font-color); + height: auto; + line-height: 28px; +} + +// 13、tag标签 +.tiny-tag { + .component-css-vars-tag(); + font-size: var(--ti-tag-font-size); + color: var(--ti-tag-font-color); + background: var(--ti-tag-bg-color); + border-radius: var(--ti-tag-border-radius); + .tiny-tag__close { + margin: 0 0 0 4px; + color: var(--ti-tag-close-color); + } +} + +// 14、radio 单选 +.tiny-radio { + .component-css-vars-radio(); + margin-right: 20px; + .tiny-radio__inner { + border: 1px solid var(--ti-radio-inner-border-color); + } + .tiny-radio__label { + font-size: var(--ti-radio-label-font-size); + color: var(--ti-radio-label-font-color); + padding-left: 6px; + } + .tiny-radio__input.is-checked .tiny-radio__inner::after { + background-color: var(--ti-radio-input-checked-bg-color); + } +} + +.tiny-radio-group { + .component-css-vars-radio-group(); + .tiny-radio-button { + &:first-child { + .tiny-radio-button__inner { + border-color: var(--ti-radio-group-btn-inner-border-color); + } + } + .tiny-radio-button__orig-radio:checked { + & + .tiny-radio-button__inner { + background-color: var(--ti-radio-group-btn-inner-bg-color); + border-color: var(--ti-radio-group-btn-inner-border-color); + &:hover { + box-shadow: none; + } + } + } + &__inner { + background-color: var(--ti-radio-group-inner-bg-color); + color: var(--ti-radio-group-inner-font-color); + border-color: var(--ti-radio-group-btn-inner-border-color); + } + } +} + +// 15、checkbox 复选框适配 +.tiny-checkbox { + .component-css-vars-checkbox(); + .tiny-checkbox__input { + &.is-checked .tiny-checkbox__inner { + background-color: var(--ti-checkbox-input-checked-bg-color); + border-color: var(--ti-checkbox-input-checked-border-color); + } + .tiny-checkbox__inner { + border-radius: var(--ti-checkbox-input-inner-border-radius); + border: 1px solid var(--ti-checkbox-input-inner-border-color); + line-height: 24px; + } + } + .tiny-checkbox__label { + line-height: 24px; + color: var(--ti-checkbox-input-inner-label-color); + } +} + +// 16、notify通知 +.tiny-notify { + .component-css-vars-notify(); + border-radius: var(--ti-notify-border-radius); + padding: 12px; + background-color: var(--ti-notify-bg-color); + box-shadow: 0 2px 12px 0 var(--ti-notify-box-shadow); + .tiny-notify__icon-zone { + .tiny-notify__icon-status { + width: 16px; + height: 16px; + } + } + .tiny-notify__content { + color: var(--ti-notify-content-color); + font-size: var(--ti-notify-content-font-size); + > a { + color: var(--ti-notify-content-href-font-color); + } + } + .tiny-notify__message-zone { + margin: 0 0 0 8px; + .tiny-notify__title-wrapper { + font-size: var(--ti-notify-message-zone-title-font-size); + font-weight: var(--ti-notify-message-zone-title-font-weight); + color: var(--ti-notify-message-zone-title-color); + } + } + .tiny-notify__close-zone { + padding: 0; + &.tiny-notify__icon-close { + width: 16px; + height: 16px; + } + } + &.tiny-notify--error { + .tiny-notify__icon-status { + color: var(--ti-notify-error-font-color); + } + } + + &.tiny-notify--info { + .tiny-notify__icon-status { + color: var(--ti-notify-info-font-color); + } + } + + &.tiny-notify--success { + .tiny-notify__icon-status { + color: var(--ti-notify-success-font-color); + } + } + + &.tiny-notify--warning { + .tiny-notify__icon-status { + color: var(--ti-notify-warning-font-color); + } + } +} + +// 17、tooltip文字提示 +.tiny-tooltip { + .component-css-vars-tooltip(); + &.tiny-tooltip__popper { + box-shadow: 0 4px 16px 0 var(--ti-tooltip-box-shadow); + &[class*='is-'] { + background: var(--ti-tooltip-popper-bg-color); + color: var(--ti-tooltip-popper-font-color); + font-size: var(--ti-tooltip-popper-font-size); + padding: 12px; + &[x-placement^='top'] { + .popper__arrow { + &.popper__arrow::after { + border-top-color: var(--ti-tooltip-popper-placement-arrow); + } + } + } + &[x-placement^='bottom'] { + .popper__arrow { + &.popper__arrow::after { + border-bottom-color: var(--ti-tooltip-popper-placement-arrow); + } + } + } + &[x-placement^='left'] { + .popper__arrow { + &.popper__arrow::after { + border-left-color: var(--ti-tooltip-popper-placement-arrow); + } + } + } + &[x-placement^='right'] { + .popper__arrow { + &.popper__arrow::after { + border-right-color: var(--ti-tooltip-popper-placement-arrow); + } + } + } + } + } +} + +// 18、表单 +.tiny-form { + .component-css-vars-form(); + .tiny-form-item { + .tiny-form-item__label { + color: var(--ti-form-item-label-font-color); + font-size: var(--ti-form-item-label-font-size); + } + } + .tiny-form--label-left.label-align .tiny-form-item .tiny-form-item__label { + padding-left: 0; + padding-right: 16px; + } + .tiny-form-item.is-text.is-required.is-no-asterisk.tiny-form-item--default { + margin-bottom: 12px; + } + .tiny-form-item__error--block { + padding-top: 4px; + } + .tiny-form-item__error { + font-size: var(--ti-form-item-error-font-size); + } +} + +// 19、表格 +.tiny-grid__wrapper { + .component-css-vars-grid-wrapper(); + .tiny-grid { + font-size: var(--ti-grid-wrapper-font-size); + background-color: var(--ti-grid-wrapper-bg-color); + color: var(--ti-grid-wrapper-font-color); + cursor: pointer; + .tiny-grid__header-wrapper { + background-color: var(--ti-grid-wrapper-header-bg-color); + .tiny-grid__header { + .tiny-grid-header__row { + .tiny-grid-header__column { + height: 24px; + &.col__center { + text-align: left; + } + } + .tiny-grid-cell { + border-color: var(--ti-grid-wrapper-cell-color); + font-weight: var(--ti-grid-wrapper-cell-font-weight); + font-size: var(--ti-grid-wrapper-cell-font-size); + .icon-half-select, + .icon-checked-sur { + color: var(--ti-lowcode-common-primary-color); + } + } + .tiny-grid-resizable.is__line { + color: var(--ti-grid-resizable-line-font-color); + height: 10px; + margin-bottom: 9px; + } + } + } + } + .tiny-grid__body-wrapper { + .high-light-node { + background-color: var(--ti-grid-wrapper-body-bg-color); + &.tiny-grid-body__column { + font-size: var(--ti-grid-wrapper-body-font-size); + color: var(--ti-grid-wrapper-body-font-color); + } + } + .tiny-grid__body { + .tiny-grid-body__row { + &.nav-tree .tiny-grid-cell { + line-height: inherit; + } + .tiny-grid-body__column, + .tiny-grid-footer__column { + height: 30px; + text-align: left; + border-bottom: 0; + &:hover { + background-color: var(--ti-grid-wrapper-body-column-hover-bg-color); + } + .tiny-grid-cell { + padding: 0; + } + } + .tiny-grid-tree-wrapper .tiny-grid-tree__node-btn { + fill: var(--ti-grid-tree-wrapper-fill-color); + } + } + } + } + } +} + +// 20、loading组件 +.tiny-loading { + .tiny-loading__spinner { + margin-top: 0; + transform: translateY(-50%); + } + // 适配尺寸medium + .tiny-loading__spinner-medium img, + .tiny-loading__spinner-medium svg { + width: 28px; + height: 28px; + } +} + +// 21、progress进度条 +.tiny-progress.tiny-progress--line.progress-first { + .component-css-vars-progress(); + &.tiny-progress-bar__outer { + background-color: var(--ti-progress-bar-outer-bg-color); + } + .tiny-progress__text { + margin-left: 12px; + color: var(--ti-progress-text-font-color); + } +} + +// 22、开关 +.tiny-switch { + .component-css-vars-switch(); + background-color: var(--ti-switch-bg-color); + &.tiny-switch-checked { + background-color: var(--ti-switch-checked-bg-color); + } + &::after { + background-color: var(--ti-switch-after-bg-color); + } +} + +// 23、下拉菜单 +.tiny-dropdown { + &__trigger { + color: var(--ti-lowcode-trigger-color); + &:not(&__caret-button):hover { + color: var(--ti-dropdown-caret-hover-bg-color); + } + } +} diff --git a/packages/theme/base/src/index.js b/packages/theme/base/src/index.js index 4eb47b18a..91e86071f 100644 --- a/packages/theme/base/src/index.js +++ b/packages/theme/base/src/index.js @@ -1,4 +1,5 @@ // 提供engine主题包的样式定义引入 +import './page/base-config-page.less' import './base.less' import './common.less' import { tinyDarkTheme } from './dark/dark-common' diff --git a/packages/theme/base/src/light/light-common.js b/packages/theme/base/src/light/light-common.js index 04d4c678d..a43b703dd 100644 --- a/packages/theme/base/src/light/light-common.js +++ b/packages/theme/base/src/light/light-common.js @@ -1,2 +1,185 @@ // tinyvue组件的亮色主题 -export const tinyLightTheme = {} +export const tinyLightTheme = { + // select + 'ti-select-input-inner-border-color': 'var(--ti-lowcode-common-border-color-8)', + 'ti-select-input-inner-text-color': 'var(--ti-lowcode-common-primary-text-color)', + 'ti-select-input-inner-font-size': 'var(--ti-lowcode-common-font-size-12)', + 'ti-select-input-caret-font-size': 'var(--ti-lowcode-common-font-size-14)', + 'ti-select-input-caret-color': 'var(--ti-lowcode-common-text-color-5)', + 'ti-select-tags-text-color': 'var(--ti-lowcode-common-text-color-5)', + 'ti-select-tags-bg-color': 'var(--ti-lowcode-common-component-bg-28)', + 'ti-select-tags-close-color': 'var(--ti-lowcode-common-primary-text-color)', + // select-dropdown + 'ti-select-dropdown-text-color': 'var(--ti-lowcode-common-primary-color)', + 'ti-select-dropdown-font-size': 'var(--ti-lowcode-common-font-size-14)', + 'ti-select-dropdown-option-text-color': 'var(--ti-lowcode-common-primary-color)', + 'ti-select-dropdown-option-bg-color': 'var(--ti-lowcode-common-component-bg)', + 'ti-select-dropdown-option-bg-hover-color': 'var(--ti-lowcode-common-component-bg-25)', + 'ti-select-dropdown-option-selected-text-color': 'var(--ti-lowcode-common-primary-text-color)', + 'ti-select-dropdown-option-icon-color': 'var(--ti-lowcode-common-primary-text-color)', + 'ti-select-dropdown-option-icon-font-size': 'var(--ti-lowcode-common-font-size-14)', + // input + 'ti-input-inner-border-radius': 'var(--ti-lowcode-common-radius-4)', + 'ti-input-inner-border-color': 'var(--ti-lowcode-common-border-color-8)', + 'ti-input-inner-text-color': 'var(--ti-lowcode-common-primary-text-color)', + 'ti-input-inner-border-hover-color': 'var(--ti-lowcode-common-border-color-15)', + 'ti-input-inner-border-focus-color': 'var(--ti-lowcode-common-border-color-15)', + 'ti-input-inner-font-size': 'var(--ti-lowcode-common-font-size-12)', + 'ti-input-inner-disabled': 'var(--ti-lowcode-common-component-bg-5)', + 'ti-input-inner-disabled-text': 'var(--ti-lowcode-common-secondary-text-color)', + // collapse + 'ti-collapse-font-size': 'var(--ti-lowcode-common-font-size-12)', + 'ti-collapse-text-color': 'var(--ti-lowcode-common-primary-text-color)', + 'ti-collapse-font-weight': 'var(--ti-lowcode-common-font-weight-normal)', + 'ti-collapse-header-bg-color': 'var(--ti-lowcode-common-component-bg)', + 'ti-collapse-word-overflow-svg-color': 'var(--ti-lowcode-common-text-color-5)', + 'ti-collapse-svg-font-size': 'var(--ti-lowcode-common-font-size-14)', + // tree + 'ti-tree-font-size': 'var(--ti-lowcode-common-font-size-12)', + 'ti-tree-text-color': 'var(--ti-lowcode-common-primary-text-color)', + 'ti-tree-node-content-box-bg-color': 'var(--ti-lowcode-common-component-bg)', + 'ti-tree-node-content-box-hover-bg-color': 'var(--ti-lowcode-common-component-bg-25)', + 'ti-tree-node-content-box-current-bg-color': 'var(--ti-lowcode-common-component-bg-25)', + // tabs + 'ti-tabs-font-size': 'var(--ti-lowcode-common-font-size-12)', + 'ti-tabs-item-text-color': 'var(--ti-lowcode-common-text-color-6)', + 'ti-tabs-item-active-text-color': 'var(--ti-lowcode-common-primary-text-color)', + 'ti-tabs-nav-bg-color': 'var(--ti-lowcode-common-component-bg)', + 'ti-tabs-nav-border-radius': 'var(--ti-lowcode-common-radius-4)', + 'ti-tabs-item-bg-color': 'var(--ti-lowcode-common-component-bg-25)', + // search + 'ti-search-line-font-size': 'var(--ti-lowcode-common-font-size-12)', + 'ti-search-line-border-radius': 'var(--ti-lowcode-common-radius-4)', + 'ti-search-line-border-color': 'var(--ti-lowcode-common-border-color-8)', + 'ti-search-input-btn-svg-font-size': 'var(--ti-lowcode-common-font-size-16)', + 'ti-search-input-btn-svg-color': 'var(--ti-lowcode-common-text-color-5)', + // dialog-box + 'ti-dialog-box-header-font-size': 'var(--ti-lowcode-common-font-size-14)', + 'ti-dialog-box-header-font-color': 'var(--ti-lowcode-common-primary-text-color)', + 'ti-dialog-box-body-font-color': 'var(--ti-lowcode-common-text-color-6)', + // button + 'ti-button-font-size': 'var(--ti-lowcode-common-font-size-12)', + 'ti-button-border-radius': 'var(--ti-lowcode-common-radius-4)', + 'ti-button-default-border-color': 'var(--ti-lowcode-common-text-color-6)', + 'ti-button-default-font-color': 'var(--ti-lowcode-common-primary-text-color)', + 'ti-button-default-bg-color': 'var(--ti-lowcode-common-component-bg)', + 'ti-button-default-hover-border-color': 'var(--ti-lowcode-common-border-color-13)', + 'ti-button-primary-font-color': 'var(--ti-lowcode-common-text-color-3)', + 'ti-button-primary-bg-color': 'var(--ti-lowcode-common-component-bg-10)', + 'ti-button-primary-border-color': 'var(--ti-lowcode-common-border-color-15)', + 'ti-button-primary-hover-border-color': 'var(--ti-lowcode-common-border-color-13)', + 'ti-button-primary-hover-bg-color': 'var(--ti-lowcode-common-component-bg-82)', + 'ti-button-info-font-color': 'var(--ti-lowcode-common-text-color-3)', + 'ti-button-info-border-color': 'var(--ti-lowcode-common-border-color-15)', + 'ti-button-info-bg-color': 'var(--ti-lowcode-common-component-bg-10)', + 'ti-button-info-hover-border-color': 'var(--ti-lowcode-common-border-color-39)', + 'ti-button-info-hover-bg-color': 'var(--ti-lowcode-common-component-bg-82)', + // button-group + 'ti-button-group-item-border-color': 'var(--ti-lowcode-common-border-color-7)', + 'ti-button-group-item-border-radius': 'var(--ti-lowcode-common-radius-normal)', + 'ti-button-group-item-bg-color': 'var(--ti-lowcode-common-component-bg-24)', + 'ti-button-group-item-active-disabled-bg-color': 'var(--ti-lowcode-common-component-bg-19)', + 'ti-button-group-item-active-disabled-border-color': 'var(--ti-lowcode-common-border-color-12)', + 'ti-button-group-item-active-disabled-color': 'var(--ti-lowcode-common-close-icon-text-color-1)', + 'ti-button-group-item-hover-disabled-color': 'var(--ti-lowcode-common-primary-text-color)', + 'ti-button-group-item-hover-bg-color': 'var(--ti-lowcode-common-component-bg)', + 'ti-button-group-item-font-color': 'var(--ti-lowcode-common-text-color-8)', + 'ti-button-group-item-before-bg-color': 'var(--ti-lowcode-common-component-bg-83)', + // modal + 'ti-modal-box-border-radius': 'var(--ti-lowcode-common-radius-4)', + 'ti-modal-box-shadow-color': 'var(--ti-lowcode-common-rgba-23)', + 'ti-modal-box-header-font-size': 'var(--ti-lowcode-common-font-size-14)', + 'ti-modal-box-header-font-color': 'var(--ti-lowcode-common-border-color-15)', + 'ti-modal-box-header-font-weight': 'var(--ti-lowcode-common-font-weight-normal)', + 'ti-modal-box-close-btn-color': 'var(--ti-lowcode-common-text-color-5)', + 'ti-modal-box-body-font-color': 'var(--ti-lowcode-common-text-color-6)', + 'ti-modal-box-body-font-size': 'var(--ti-lowcode-common-font-size-12)', + // modal-message + 'ti-modal-message-font-size': 'var(--ti-lowcode-common-font-size-12)', + 'ti-modal-message-border-radius': 'var(--ti-lowcode-common-radius-6)', + 'ti-modal-message-shadow-color': 'var(--ti-lowcode-common-rgba-24)', + 'ti-modal-message-content-font-color': 'var(--ti-lowcode-common-primary-text-color)', + 'ti-modal-message-close-btn-color': 'var(--ti-lowcode-common-text-color-5)', + // numeric + 'ti-numeric-border-radius': 'var(--ti-lowcode-common-radius-4)', + 'ti-numeric-input-font-color': 'var(--ti-lowcode-common-primary-text-color)', + 'ti-numeric-input-border-color': 'var(--ti-lowcode-common-border-color-8)', + 'ti-numeric-base-disabled-bg-color': 'var(--ti-lowcode-common-component-bg-5)', + 'ti-numeric-input-disabled-font-color': 'var(--ti-lowcode-common-secondary-text-color)', + 'ti-numeric-input-bg-color': 'var(--ti-lowcode-common-component-bg)', + 'ti-numeric-unit-font-color': 'var(--ti-lowcode-common-text-color-5)', + 'ti-numeric-unit-bg-color': 'var(--ti-lowcode-common-component-bg)', + // popover + 'ti-popover-font-color': 'var(--ti-lowcode-common-primary-text-color)', + 'ti-popover-font-size': 'var(--ti-lowcode-common-font-size-12)', + // tag + 'ti-tag-font-color': 'var(--ti-lowcode-common-text-color-6)', + 'ti-tag-font-size': 'var(--ti-lowcode-common-font-size-12)', + 'ti-tag-border-radius': 'var(--ti-lowcode-common-radius-4)', + 'ti-tag-bg-color': 'var(--ti-lowcode-common-component-bg-5)', + 'ti-tag-close-color': 'var(--ti-lowcode-common-text-color-5)', + // radio + 'ti-radio-inner-border-color': 'var(--ti-lowcode-common-border-color-13)', + 'ti-radio-label-font-size': 'var(--ti-lowcode-common-font-size-12)', + 'ti-radio-label-font-color': 'var(--ti-lowcode-common-primary-text-color)', + 'ti-radio-input-checked-bg-color': 'var(--ti-lowcode-common-component-bg-9)', + // radio-group + 'ti-radio-group-btn-inner-border-color': 'var(--ti-lowcode-common-border-color-39)', + 'ti-radio-group-btn-inner-bg-color': 'var(--ti-lowcode-common-component-bg-79)', + 'ti-radio-group-inner-bg-color': 'var(--ti-lowcode-common-component-bg)', + 'ti-radio-group-inner-font-color': 'var(--ti-lowcode-common-primary-text-color)', + // checkbox + 'ti-checkbox-input-checked-border-color': 'var(--ti-lowcode-common-border-color-6)', + 'ti-checkbox-input-checked-bg-color': 'var(--ti-lowcode-common-component-bg-9)', + 'ti-checkbox-input-inner-border-radius': 'var(--ti-lowcode-common-radius-4)', + 'ti-checkbox-input-inner-border-color': 'var(--ti-lowcode-common-border-color-13)', + 'ti-checkbox-input-inner-label-color': 'var(--ti-lowcode-common-primary-text-color)', + // notify + 'ti-notify-border-radius': 'var(--ti-lowcode-common-radius-6)', + 'ti-notify-bg-color': 'var(--ti-lowcode-common-component-bg)', + 'ti-notify-box-shadow': 'var(--ti-lowcode-common-rgba-24)', + 'ti-notify-content-color': 'var(--ti-lowcode-common-text-color-6)', + 'ti-notify-content-font-size': 'var(--ti-lowcode-common-font-size-12)', + 'ti-notify-content-href-font-color': 'var(--ti-lowcode-common-primary-color)', + 'ti-notify-message-zone-title-color': 'var(--ti-lowcode-common-primary-text-color)', + 'ti-notify-message-zone-title-font-size': 'var(--ti-lowcode-common-font-size-14)', + 'ti-notify-message-zone-title-font-weight': 'var(--ti-lowcode-common-font-weight-normal)', + 'ti-notify-error-font-color': 'var(--ti-lowcode-common-status-error)', + 'ti-notify-info-font-color': 'var(--ti-lowcode-common-status-prompt)', + 'ti-notify-success-font-color': 'var(--ti-lowcode-common-status-success)', + 'ti-notify-warning-font-color': 'var(--ti-lowcode-common-status-warning)', + // tooltip + 'ti-tooltip-box-shadow': 'var(--ti-lowcode-common-rgba-23)', + 'ti-tooltip-popper-bg-color': 'var(--ti-lowcode-common-component-bg)', + 'ti-tooltip-popper-font-color': 'var(--ti-lowcode-common-primary-text-color)', + 'ti-tooltip-popper-font-size': 'var(--ti-lowcode-common-font-size-12)', + 'ti-tooltip-popper-placement-arrow': 'var(--ti-lowcode-common-border-color-19)', + // form + 'ti-form-item-label-font-color': 'var(--ti-lowcode-common-text-color-6)', + 'ti-form-item-label-font-size': 'var(--ti-lowcode-common-font-size-12)', + 'ti-form-item-error-font-size': 'var(--ti-lowcode-common-font-size-11)', + // grid + 'ti-grid-wrapper-bg-color': 'var(--ti-lowcode-common-component-bg)', + 'ti-grid-wrapper-font-size': 'var(--ti-lowcode-common-font-size-12)', + 'ti-grid-wrapper-font-color': 'var(--ti-lowcode-common-primary-text-color)', + 'ti-grid-wrapper-header-bg-color': 'var(--ti-lowcode-common-component-bg-25)', + 'ti-grid-wrapper-cell-color': 'var(--ti-lowcode-common-text-color-6)', + 'ti-grid-wrapper-cell-font-weight': 'var(--ti-lowcode-common-font-weight-400)', + 'ti-grid-wrapper-cell-font-size': 'var(--ti-lowcode-common-font-size-12)', + 'ti-grid-resizable-line-font-color': 'var(--ti-lowcode-common-secondary-text-color)', + 'ti-grid-wrapper-body-bg-color': 'var(--ti-lowcode-common-component-bg-25)', + 'ti-grid-wrapper-body-font-size': 'var(--ti-lowcode-common-font-size-12)', + 'ti-grid-wrapper-body-font-color': 'var(--ti-lowcode-common-primary-text-color)', + 'ti-grid-wrapper-body-column-hover-bg-color': 'var(--ti-lowcode-common-component-bg-25)', + 'ti-grid-tree-wrapper-fill-color': 'var(--ti-lowcode-common-component-bg-58)', + // progress + 'ti-progress-bar-outer-bg-color': 'var(--ti-lowcode-common-component-bg-19)', + 'ti-progress-text-font-color': 'var(--ti-lowcode-common-primary-text-color)', + // switch + 'ti-switch-bg-color': 'var(--ti-lowcode-common-component-bg-84)', + 'ti-switch-checked-bg-color': 'var(--ti-lowcode-common-component-bg-9)', + 'ti-switch-after-bg-color': 'var(--ti-lowcode-common-component-bg)', + // dropdown + 'ti-dropdown-trigger-font-color': 'var(--ti-lowcode-common-text-color-35)', + 'ti-dropdown-caret-hover-bg-color': 'var(--ti-lowcode-common-text-color-14)' +} diff --git a/packages/theme/common/base.less b/packages/theme/base/src/page/base-config-page.less similarity index 94% rename from packages/theme/common/base.less rename to packages/theme/base/src/page/base-config-page.less index dad9798c0..c615d0dc1 100644 --- a/packages/theme/common/base.less +++ b/packages/theme/base/src/page/base-config-page.less @@ -3,12 +3,36 @@ html { } body { - padding: 0; - margin: 0; - font-family: Microsoft YaHei, Microsoft YaHei-Normal; -} + *, + .lowcode-scrollbar, + .lowcode-scrollbar-thin { + &::-webkit-scrollbar-track, + &::-webkit-scrollbar-track-piece, + &::-webkit-scrollbar-corner { + background-color: transparent; + } -body { + &::-webkit-scrollbar-thumb { + background-color: #dbdbdb; + + &:hover { + background-color: #c2c2c2; + } + } + } + *, + .lowcode-scrollbar { + &::-webkit-scrollbar { + width: 8px; + height: 8px; + } + } + .lowcode-scrollbar-thin { + &::-webkit-scrollbar { + width: 4px; + height: 4px; + } + } --base-left-panel-width: 280px; --base-right-panel-width: 280px; --base-top-panel-height: 40px; @@ -23,6 +47,9 @@ body { ); -webkit-font-smoothing: subpixel-antialiased; background: #f9f9f9; + padding: 0; + margin: 0; + font-family: Microsoft YaHei, Microsoft YaHei-Normal; } ol, @@ -66,45 +93,8 @@ td { outline: none; } -.text-ellipsis-multiple { - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: var(--ellipsis-line, 2); - -webkit-box-orient: vertical; -} - -body { - *, - .lowcode-scrollbar, - .lowcode-scrollbar-thin { - &::-webkit-scrollbar-track, - &::-webkit-scrollbar-track-piece, - &::-webkit-scrollbar-corner { - background-color: transparent; - } - - &::-webkit-scrollbar-thumb { - background-color: #dbdbdb; - - &:hover { - background-color: #c2c2c2; - } - } - } - *, - .lowcode-scrollbar { - &::-webkit-scrollbar { - width: 8px; - height: 8px; - } - } - .lowcode-scrollbar-thin { - &::-webkit-scrollbar { - width: 4px; - height: 4px; - } - } +#tiny-engine .svg-icon { + fill: #808080; } // support for not webkit browser and won't override ::webkit-scrollbar-* selector @@ -129,3 +119,15 @@ body { display: none; } } + +.global-desc-info { + color: var(--ti-lowcode-common-text-desc-color); +} + +.text-ellipsis-multiple { + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; +} diff --git a/packages/theme/base/src/var-component.less b/packages/theme/base/src/var-component.less new file mode 100644 index 000000000..1d6890b18 --- /dev/null +++ b/packages/theme/base/src/var-component.less @@ -0,0 +1,234 @@ +.component-css-vars-select() { + --ti-select-input-inner-border-color: var(--ti-lowcode-common-border-color-8); + --ti-select-input-inner-text-color: var(--ti-lowcode-common-primary-text-color); + --ti-select-input-inner-font-size: var(--ti-lowcode-common-font-size-12); + --ti-select-input-caret-font-size: var(--ti-lowcode-common-font-size-14); + --ti-select-input-caret-color: var(--ti-lowcode-common-text-color-5); + --ti-select-tags-text-color: var(--ti-lowcode-common-text-color-5); + --ti-select-tags-bg-color: var(--ti-lowcode-common-component-bg-28); + --ti-select-tags-close-color: var(--ti-lowcode-common-primary-text-color); +} + +.component-css-vars-select-drop-down() { + --ti-select-dropdown-text-color: var(--ti-lowcode-common-primary-color); + --ti-select-dropdown-font-size: var(--ti-lowcode-common-font-size-14); + --ti-select-dropdown-option-text-color: var(--ti-lowcode-common-primary-color); + --ti-select-dropdown-option-bg-color: var(--ti-lowcode-common-component-bg); + --ti-select-dropdown-option-bg-hover-color: var(--ti-lowcode-common-component-bg-25); + --ti-select-dropdown-option-selected-text-color: var(--ti-lowcode-common-primary-text-color); + --ti-select-dropdown-option-icon-color: var(--ti-lowcode-common-primary-text-color); + --ti-select-dropdown-option-icon-font-size: var(--ti-lowcode-common-font-size-14); +} + +.component-css-vars-input() { + --ti-input-inner-border-radius: var(--ti-lowcode-common-radius-4); + --ti-input-inner-border-color: var(--ti-lowcode-common-border-color-8); + --ti-input-inner-text-color: var(--ti-lowcode-common-primary-text-color); + --ti-input-inner-border-hover-color: var(--ti-lowcode-common-border-color-15); + --ti-input-inner-border-focus-color: var(--ti-lowcode-common-border-color-15); + --ti-input-inner-font-size: var(--ti-lowcode-common-font-size-12); + --ti-input-inner-disabled: var(--ti-lowcode-common-component-bg-5); + --ti-input-inner-disabled-text: var(--ti-lowcode-common-secondary-text-color); +} + +.component-css-vars-collapse() { + --ti-collapse-font-size: var(--ti-lowcode-common-font-size-12); + --ti-collapse-text-color: var(--ti-lowcode-common-primary-text-color); + --ti-collapse-font-weight: var(--ti-lowcode-common-font-weight-normal); + --ti-collapse-header-bg-color: var(--ti-lowcode-common-component-bg); + --ti-collapse-word-overflow-svg-color: var(--ti-lowcode-common-text-color-5); + --ti-collapse-svg-font-size: var(--ti-lowcode-common-font-size-14); +} + +.component-css-vars-tree() { + --ti-tree-font-size: var(--ti-lowcode-common-font-size-12); + --ti-tree-text-color: var(--ti-lowcode-common-primary-text-color); + --ti-tree-node-content-box-bg-color: var(--ti-lowcode-common-component-bg); + --ti-tree-node-content-box-hover-bg-color: var(--ti-lowcode-common-component-bg-25); + --ti-tree-node-content-box-current-bg-color: var(--ti-lowcode-common-component-bg-25); +} + +.component-css-vars-tabs() { + --ti-tabs-font-size: var(--ti-lowcode-common-font-size-12); + --ti-tabs-item-text-color: var(--ti-lowcode-common-text-color-6); + --ti-tabs-item-bg-color: var(--ti-lowcode-common-component-bg-25); + --ti-tabs-item-active-text-color: var(--ti-lowcode-common-primary-text-color); + --ti-tabs-nav-bg-color: var(--ti-lowcode-common-component-bg); + --ti-tabs-nav-border-radius: var(--ti-lowcode-common-radius-4); +} + +.component-css-vars-search() { + --ti-search-line-font-size: var(--ti-lowcode-common-font-size-12); + --ti-search-line-border-radius: var(--ti-lowcode-common-radius-4); + --ti-search-line-border-color: var(--ti-lowcode-common-border-color-8); + --ti-search-input-btn-svg-font-size: var(--ti-lowcode-common-font-size-16); + --ti-search-input-btn-svg-color: var(--ti-lowcode-common-text-color-5); +} + +.component-css-vars-dialog-box() { + --ti-dialog-box-header-font-size: var(--ti-lowcode-common-font-size-14); + --ti-dialog-box-header-font-color: var(--ti-lowcode-common-primary-text-color); + --ti-dialog-box-body-font-color: var(--ti-lowcode-common-text-color-6); +} + +.component-css-vars-button() { + --ti-button-font-size: var(--ti-lowcode-common-font-size-12); + --ti-button-border-radius: var(--ti-lowcode-common-radius-4); + --ti-button-default-border-color: var(--ti-lowcode-common-text-color-6); + --ti-button-default-font-color: var(--ti-lowcode-common-primary-text-color); + --ti-button-default-bg-color: var(--ti-lowcode-common-component-bg); + --ti-button-default-hover-border-color: var(--ti-lowcode-common-border-color-13); + + --ti-button-primary-font-color: var(--ti-lowcode-common-text-color-3); + --ti-button-primary-bg-color: var(--ti-lowcode-common-component-bg-10); + --ti-button-primary-border-color: var(--ti-lowcode-common-border-color-15); + --ti-button-primary-hover-border-color: var(--ti-lowcode-common-border-color-13); + --ti-button-primary-hover-bg-color: var(--ti-lowcode-common-component-bg-82); + --ti-button-text-font-color: var(--ti-lowcode-common-primary-color); + + --ti-button-info-font-color: var(--ti-lowcode-common-text-color-3); + --ti-button-info-border-color: var(--ti-lowcode-common-border-color-15); + --ti-button-info-bg-color: var(--ti-lowcode-common-component-bg-10); + --ti-button-info-hover-border-color: var(--ti-lowcode-common-border-color-39); + --ti-button-info-hover-bg-color: var(--ti-lowcode-common-component-bg-82); +} + +.component-css-vars-button-group() { + --ti-button-group-item-border-color: var(--ti-lowcode-common-border-color-7); + --ti-button-group-item-border-radius: var(--ti-lowcode-common-radius-normal); + --ti-button-group-item-bg-color: var(--ti-lowcode-common-component-bg-24); + --ti-button-group-item-active-disabled-bg-color: var(--ti-lowcode-common-component-bg-19); + --ti-button-group-item-active-disabled-border-color: var(--ti-lowcode-common-border-color-12); + --ti-button-group-item-active-disabled-color: var(--ti-lowcode-common-close-icon-text-color-1); + --ti-button-group-item-hover-disabled-color: var(--ti-lowcode-common-primary-text-color); + --ti-button-group-item-hover-bg-color: var(--ti-lowcode-common-component-bg); + --ti-button-group-item-font-color: var(--ti-lowcode-common-text-color-8); + --ti-button-group-item-before-bg-color: var(--ti-lowcode-common-component-bg-83); +} + +.component-css-vars-modal-box() { + --ti-modal-box-border-radius: var(--ti-lowcode-common-radius-4); + --ti-modal-box-shadow-color: var(--ti-lowcode-common-rgba-23); + --ti-modal-box-header-font-size: var(--ti-lowcode-common-font-size-14); + --ti-modal-box-header-font-color: var(--ti-lowcode-common-border-color-15); + --ti-modal-box-header-font-weight: var(--ti-lowcode-common-font-weight-normal); + --ti-modal-box-close-btn-color: var(--ti-lowcode-common-text-color-5); + --ti-modal-box-body-font-color: var(--ti-lowcode-common-text-color-6); + --ti-modal-box-body-font-size: var(--ti-lowcode-common-font-size-12); +} + +.component-css-vars-modal-message() { + --ti-modal-message-font-size: var(--ti-lowcode-common-font-size-12); + --ti-modal-message-border-radius: var(--ti-lowcode-common-radius-6); + --ti-modal-message-shadow-color: var(--ti-lowcode-common-rgba-24); + --ti-modal-message-content-font-color: var(--ti-lowcode-common-primary-text-color); + --ti-modal-message-close-btn-color: var(--ti-lowcode-common-text-color-5); +} + +.component-css-vars-numeric() { + --ti-numeric-border-radius: var(--ti-lowcode-common-radius-4); + --ti-numeric-input-font-color: var(--ti-lowcode-common-primary-text-color); + --ti-numeric-input-border-color: var(--ti-lowcode-common-border-color-8); + --ti-numeric-base-disabled-bg-color: var(--ti-lowcode-common-component-bg-5); + --ti-numeric-input-disabled-font-color: var(--ti-lowcode-common-secondary-text-color); + --ti-numeric-input-bg-color: var(--ti-lowcode-common-component-bg); + --ti-numeric-unit-font-color: var(--ti-lowcode-common-text-color-5); + --ti-numeric-unit-bg-color: var(--ti-lowcode-common-component-bg); +} + +.component-css-vars-popover() { + --ti-popover-font-color: var(--ti-lowcode-common-primary-text-color); + --ti-popover-font-size: var(--ti-lowcode-common-font-size-12); +} + +.component-css-vars-tag() { + --ti-tag-font-color: var(--ti-lowcode-common-text-color-6); + --ti-tag-font-size: var(--ti-lowcode-common-font-size-12); + --ti-tag-border-radius: var(--ti-lowcode-common-radius-4); + --ti-tag-bg-color: var(--ti-lowcode-common-component-bg-5); + --ti-tag-close-color: var(--ti-lowcode-common-text-color-5); +} + +.component-css-vars-radio() { + --ti-radio-inner-border-color: var(--ti-lowcode-common-border-color-13); + --ti-radio-label-font-size: var(--ti-lowcode-common-font-size-12); + --ti-radio-label-font-color: var(--ti-lowcode-common-primary-text-color); + --ti-radio-input-checked-bg-color: var(--ti-lowcode-common-component-bg-9); +} + +.component-css-vars-radio-group() { + --ti-radio-group-btn-inner-border-color: var(--ti-lowcode-common-border-color-39); + --ti-radio-group-btn-inner-bg-color: var(--ti-lowcode-common-component-bg-79); + --ti-radio-group-inner-bg-color: var(--ti-lowcode-common-component-bg); + --ti-radio-group-inner-font-color: var(--ti-lowcode-common-primary-text-color); +} + +.component-css-vars-checkbox() { + --ti-checkbox-input-checked-border-color: var(--ti-lowcode-common-border-color-6); + --ti-checkbox-input-checked-bg-color: var(--ti-lowcode-common-component-bg-9); + --ti-checkbox-input-inner-border-radius: var(--ti-lowcode-common-radius-4); + --ti-checkbox-input-inner-border-color: var(--ti-lowcode-common-border-color-13); + --ti-checkbox-input-inner-label-color: var(--ti-lowcode-common-primary-text-color); +} + +.component-css-vars-notify() { + --ti-notify-border-radius: var(--ti-lowcode-common-radius-6); + --ti-notify-bg-color: var(--ti-lowcode-common-component-bg); + --ti-notify-box-shadow: var(--ti-lowcode-common-rgba-24); + --ti-notify-content-color: var(--ti-lowcode-common-text-color-6); + --ti-notify-content-font-size: var(--ti-lowcode-common-font-size-12); + --ti-notify-content-href-font-color: var(--ti-lowcode-common-primary-color); + --ti-notify-message-zone-title-color: var(--ti-lowcode-common-primary-text-color); + --ti-notify-message-zone-title-font-size: var(--ti-lowcode-common-font-size-14); + --ti-notify-message-zone-title-font-weight: var(--ti-lowcode-common-font-weight-normal); + --ti-notify-error-font-color: var(--ti-lowcode-common-status-error); + --ti-notify-info-font-color: var(--ti-lowcode-common-status-prompt); + --ti-notify-success-font-color: var(--ti-lowcode-common-status-success); + --ti-notify-warning-font-color: var(--ti-lowcode-common-status-warning); +} + +.component-css-vars-tooltip() { + --ti-tooltip-box-shadow: var(--ti-lowcode-common-rgba-23); + --ti-tooltip-popper-bg-color: var(--ti-lowcode-common-component-bg); + --ti-tooltip-popper-font-color: var(--ti-lowcode-common-primary-text-color); + --ti-tooltip-popper-font-size: var(--ti-lowcode-common-font-size-12); + --ti-tooltip-popper-placement-arrow: var(--ti-lowcode-common-border-color-19); +} + +.component-css-vars-form() { + --ti-form-item-label-font-color: var(--ti-lowcode-common-text-color-6); + --ti-form-item-label-font-size: var(--ti-lowcode-common-font-size-12); + --ti-form-item-error-font-size: var(--ti-lowcode-common-font-size-11); +} + +.component-css-vars-grid-wrapper() { + --ti-grid-wrapper-bg-color: var(--ti-lowcode-common-component-bg); + --ti-grid-wrapper-font-size: var(--ti-lowcode-common-font-size-12); + --ti-grid-wrapper-font-color: var(--ti-lowcode-common-primary-text-color); + --ti-grid-wrapper-header-bg-color: var(--ti-lowcode-common-component-bg-25); + --ti-grid-wrapper-cell-color: var(--ti-lowcode-common-text-color-6); + --ti-grid-wrapper-cell-font-weight: var(--ti-lowcode-common-font-weight-400); + --ti-grid-wrapper-cell-font-size: var(--ti-lowcode-common-font-size-12); + --ti-grid-resizable-line-font-color: var(--ti-lowcode-common-secondary-text-color); + --ti-grid-wrapper-body-bg-color: var(--ti-lowcode-common-component-bg-25); + --ti-grid-wrapper-body-font-size: var(--ti-lowcode-common-font-size-12); + --ti-grid-wrapper-body-font-color: var(--ti-lowcode-common-primary-text-color); + --ti-grid-wrapper-body-column-hover-bg-color: var(--ti-lowcode-common-component-bg-25); + --ti-grid-tree-wrapper-fill-color: var(--ti-lowcode-common-component-bg-58); +} + +.component-css-vars-progress() { + --ti-progress-bar-outer-bg-color: var(--ti-lowcode-common-component-bg-19); + --ti-progress-text-font-color: var(--ti-lowcode-common-primary-text-color); +} + +.component-css-vars-switch() { + --ti-switch-bg-color: var(--ti-lowcode-common-component-bg-84); + --ti-switch-checked-bg-color: var(--ti-lowcode-common-component-bg-9); + --ti-switch-after-bg-color: var(--ti-lowcode-common-component-bg); +} + +.component-css-vars-dropdown() { + --ti-dropdown-trigger-font-color: var(--ti-lowcode-common-text-color-35); + --ti-dropdown-caret-hover-bg-color: var(--ti-lowcode-common-text-color-14); +} diff --git a/packages/theme/common/global.less b/packages/theme/common/global.less deleted file mode 100644 index e570c6b77..000000000 --- a/packages/theme/common/global.less +++ /dev/null @@ -1,1958 +0,0 @@ -:root { - --ti-lowcode-property-active-color: #4f77ff; // 属性被激活的颜色 - --ti-lowcode-property-hover-color: #4f77ff; // 属性被hover的颜色 - --ti-lowcode-block-video-tip-color: rgb(80, 212, 171); // 区块播放视频提示颜色 -} - -// tiny-vue popover 弹框样式 -.tiny-popover.tiny-popper { - color: var(--ti-lowcode-popover-color); - background: var(--ti-lowcode-popover-bg-color); - border: none; - padding: 6px; - border-radius: 6px; - line-height: 16px; - box-shadow: rgb(0 0 0 / 15%) 0 5px 10px; - - &[x-placement^='bottom'] { - .popper__arrow { - top: -6px; - - &, - &::after { - border-bottom-color: var(--ti-lowcode-popover-bg-color); - } - } - } - - &[x-placement^='right'] { - margin-left: 16px; - - .popper__arrow { - left: -7px; - border-color: transparent; - - &::after { - border-right-color: var(--ti-lowcode-popover-bg-color); - } - } - } - - &[x-placement^='top'] { - .popper__arrow { - &, - &::after { - border-top-color: var(--ti-lowcode-popover-bg-color); - } - } - } - - &[x-placement^='left'] { - .popper__arrow { - right: -7px; - - &, - &::after { - border-left-color: var(--ti-lowcode-popover-bg-color); - } - } - } - - &.data-source-popper { - background: var(--ti-lowcode-tabs-bg); - color: var(--ti-lowcode-toolbar-breadcrumb-color); - border: 1px solid var(--ti-lowcode-tabs-border-color); - padding: 6px 0; - border-radius: 4px; - - &[x-placement^='bottom'] { - .popper__arrow { - &, - &::after { - border-bottom-color: var(--ti-lowcode-tabs-bg); - } - } - } - - &[x-placement^='right'] { - margin-left: 16px; - - .popper__arrow { - left: -7px; - border-color: transparent; - - &::after { - border-right-color: var(--ti-lowcode-tabs-bg); - } - } - } - - &[x-placement^='top'] { - .popper__arrow { - bottom: -7px; - - &, - &::after { - border-top-color: var(--ti-lowcode-tabs-bg); - } - } - } - - &[x-placement^='left'] { - .popper__arrow { - right: -7px; - - &, - &::after { - border-left-color: var(--ti-lowcode-tabs-bg); - } - } - } - - &.data-remote-popper { - background: var(--ti-lowcode-toolbar-view-hover-bg); - border-color: var(--ti-lowcode-toolbar-border-color); - - &[x-placement^='bottom'] { - .popper__arrow { - &, - &::after { - border-bottom-color: var(--ti-lowcode-toolbar-view-hover-bg); - } - } - } - - &[x-placement^='right'] { - margin-left: 16px; - - .popper__arrow { - left: -7px; - border-color: transparent; - - &::after { - border-right-color: var(--ti-lowcode-toolbar-view-hover-bg); - } - } - } - - &[x-placement^='top'] { - .popper__arrow { - bottom: -7px; - - &, - &::after { - border-top-color: var(--ti-lowcode-toolbar-view-hover-bg); - } - } - } - - &[x-placement^='left'] { - .popper__arrow { - right: -7px; - - &, - &::after { - border-left-color: var(--ti-lowcode-toolbar-view-hover-bg); - } - } - } - - li { - padding: 4px 10px; - font-size: 12px; - - &:hover { - background: var(--ti-lowcode-canvas-wrap-bg); - cursor: pointer; - } - } - } - - li { - cursor: pointer; - color: var(--ti-lowcode-toolbar-breadcrumb-color); - padding: 4px 8px; - transition: 0.3s; - - &:hover { - color: var(--ti-lowcode-tootip-input-color); - background: var(--ti-lowcode-toolbar-active-bg); - } - } - } - - &.lowcode { - background: var(--ti-lowcode-custom-popover-bg-color); - border: 1px solid var(--ti-lowcode-custom-popover-border-color); - color: var(--ti-lowcode-custom-popover-text-color); - - .popper__arrow, - .popper__arrow::after { - border-bottom-color: var(--ti-lowcode-custom-popover-bg-color); - } - - .languageContent { - width: 100%; - } - } - - &.option-popper { - background: var(--ti-lowcode-popover-bg-color); - border: 1px solid var(--ti-lowcode-popover-option-popper-border-color); - color: var(--ti-lowcode-toolbar-breadcrumb-color); - - &[x-placement^='bottom'] { - .popper__arrow { - &, - &::after { - border-bottom-color: var(--ti-lowcode-popover-bg-color); - } - } - } - - &[x-placement^='right'] { - margin-left: 16px; - - .popper__arrow { - left: -7px; - border-color: transparent; - - &::after { - border-right-color: var(--ti-lowcode-popover-bg-color); - } - } - } - - &[x-placement^='top'] { - .popper__arrow { - &, - &::after { - border-top-color: var(--ti-lowcode-popover-bg-color); - } - } - } - - &[x-placement^='left'] { - .popper__arrow { - right: -7px; - - &, - &::after { - border-left-color: var(--ti-lowcode-popover-bg-color); - } - } - } - - .add-options { - &.top { - border-bottom: 1px solid var(--ti-lowcode-tabs-border-color); - margin-bottom: 15px; - overflow: hidden; - display: flex; - height: 26px; - justify-content: space-between; - align-items: center; - padding: 6px; - - .title { - font-weight: 600; - } - - .icon-close { - margin-bottom: 4px; - margin-right: 0px; - } - } - - .demo-form { - padding: 6px; - - .tiny-form-item { - margin-bottom: 4px; - - :deep(.tiny-form-item__label) { - color: var(--ti-lowcode-toolbar-breadcrumb-color); - } - - :deep(.tiny-input__inner) { - color: var(--ti-lowcode-tootip-input-color); - background: var(--ti-lowcode-tootip-input-background-color); - border-color: var(--ti-lowcode-tootip-input-border-color); - - &:focus { - border-color: var(--ti-lowcode-canvas-handle-hover-bg); - } - } - } - - :deep(.btn) { - .tiny-form-item__content { - display: flex; - - .tiny-button { - min-width: auto; - flex: 1; - } - } - } - } - - .tiny-svg { - color: var(--ti-lowcode-toolbar-breadcrumb-color); - font-size: 14px; - - &.icon-close { - margin: 10px; - } - - &:hover { - cursor: pointer; - } - - &.header-icon { - margin-right: 0; - } - - &.isBind { - color: var(--ti-lowcode-icon-bind-color); - } - } - } - } - - &.option-popper { - padding: 2px 0; - min-width: 6%; - width: auto; - - .list { - li { - text-align: center; - - &:hover { - background: var(--ti-lowcode-canvas-wrap-bg); - } - } - } - - &.collaborator { - padding: 0; - } - - &.fixed-left { - top: 24px !important; - transform: translateX(calc(4px - var(--base-right-panel-width))); - height: calc(100% - 36px); - } - } - - &.media-icon-popover { - color: var(--ti-lowcode-media-popover-color); - font-size: 12px; - font-weight: 400; - padding: 20px; - - &[x-placement^='bottom'] { - margin-top: 16px; - } - - .tiny-popover__title { - color: var(--ti-lowcode-media-popover-title-color); - font-size: 14px; - line-height: 18px; - font-weight: 600; - margin-bottom: 0; - } - - .media-title { - color: var(--ti-lowcode-media-popover-title-color); - display: flex; - align-items: center; - font-size: 14px; - .sub-title { - color: var(--ti-lowcode-media-popover-color); - } - .icon-stars { - font-size: 16px; - margin-right: 4px; - } - } - - .content { - margin-top: 6px; - } - } - - &.toolbar-right-popover { - color: var(--ti-lowcode-toolbar-hover-popper); - font-size: 14px; - padding: 10px 16px; - border-radius: 6px; - font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, - 'Helvetica Neue', Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif; - &[x-placement^='bottom'] { - margin-top: 8px; - } - - &.collaboration-popover[x-placement^='bottom'] { - margin-top: 14px; - } - &.collaborator { - padding: 10px 0; - } - } - - &.block-add-transfer-popover { - background: var(--ti-lowcode-toolbar-bg); - border: 1px solid var(--ti-lowcode-tabs-border-color); - color: var(--ti-lowcode-toolbar-breadcrumb-color); - padding: 0; - - .popper__arrow { - display: none; - } - - &[x-placement^='top'] { - margin-bottom: 0; - } - - .sort-item { - padding: 6px 10px 6px 24px; - transition: 0.3s; - position: relative; - - &:hover { - background: var(--ti-lowcode-button-hover-bg); - } - } - } - - &.data-remote-popper { - width: 12%; - } - - &.toolbar-media-popper { - padding: 0; - font-size: 12px; - border-color: var(--ti-lowcode-tabs-border-color); - - &[x-placement^='bottom'] { - margin-top: 6px; - } - - &[x-placement^='right'] { - .popper__arrow { - border-color: transparent; - - &::after { - border-right-color: var(--ti-lowcode-toolbar-media-bg); - } - } - } - - &[x-placement^='top'] { - .popper__arrow { - &, - &::after { - border-top-color: var(--ti-lowcode-toolbar-media-bg); - } - } - } - - &[x-placement^='left'] { - .popper__arrow { - &, - &::after { - border-left-color: var(--ti-lowcode-toolbar-media-bg); - } - } - } - - .content-wrap { - padding: 20px; - .title { - width: 100%; - color: var(--ti-lowcode-media-popover-title-color); - background: var(--ti-lowcode-tabs-active-bg); - display: inline-block; - box-sizing: border-box; - font-size: 14px; - &.text-title { - background: transparent; - } - } - - .list { - border-bottom: 1px solid var(--ti-lowcode-tabs-border-color); - - li { - padding: 4px 8px; - transition: 0.3s; - color: var(--ti-lowcode-toolbar-breadcrumb-color); - - .tiny-svg { - margin-right: 6px; - color: var(--ti-lowcode-toolbar-breadcrumb-color); - } - - &:hover { - background: var(--ti-lowcode-canvas-wrap-bg); - } - } - } - - .more-setting { - li { - display: flex; - align-items: center; - gap: 8px; - color: var(--ti-lowcode-toolbar-sub-title-color); - padding-top: 12px; - } - } - - .tips { - padding: 8px; - - span { - display: inline-block; - padding: 4px 8px; - color: var(--ti-lowcode-dialog-font-color); - background: var(--ti-lowcode-canvas-wrap-bg); - border-left: 2px solid var(--ti-lowcode-dialog-tip-border-color); - } - } - - .setting { - display: flex; - align-items: center; - color: var(--ti-lowcode-toolbar-sub-title-color); - padding-top: 12px; - & > div { - display: flex; - align-items: center; - - & + div { - margin-left: 12px; - } - - label { - flex-shrink: 0; - margin-right: 8px; - } - } - - & > span { - width: 24px; - height: 24px; - display: flex; - justify-content: center; - align-items: center; - flex-shrink: 0; - margin-left: 12px; - border-radius: 2px; - transition: 0.3s; - - &:hover { - background: var(--ti-lowcode-icon-hover-bg); - cursor: pointer; - } - - .icon-canvas-fit { - font-size: 16px; - color: var(--ti-lowcode-description-minor-color); - } - } - - .tiny-input__suffix { - right: 4px; - - .tiny-input__suffix-inner { - font-size: 12px; - color: var(--ti-lowcode-description-minor-color); - } - } - - .tiny-input-suffix .tiny-input__inner { - padding-right: 20px; - padding-left: 4px; - - &[readonly] { - cursor: not-allowed; - - &:focus { - border-color: var(--ti-lowcode-tabs-border-color); - } - } - } - } - } - } - - &.tiny-pager__selector { - background-color: var(--ti-lowcode-common-component-bg-25); - - .tiny-pager__selector-poplist { - background: var(--ti-lowcode-toolbar-view-hover-bg); - border: 1px solid var(--ti-lowcode-toolbar-border-color); - color: var(--ti-lowcode-toolbar-breadcrumb-color); - - .list-item { - &.select-pre.is-selected { - background: var(--ti-lowcode-canvas-wrap-bg); - } - - &:hover { - color: var(--ti-lowcode-dialog-font-color); - background-color: var(--ti-lowcode-canvas-wrap-bg); - } - } - } - } - - &.fit-popper { - .fit-content { - display: grid; - gap: 8px 4px; - grid-template-columns: 48px 1fr; - padding: 8px; - align-items: center; - } - - .fit-content-label { - color: var(--ti-lowcode-fit-label-color); - padding: 2px; - } - - .fit-content-main { - place-items: start center; - height: 64px; - display: grid; - gap: 4px 8px; - grid-template-columns: auto auto; - grid-template-rows: 1fr 3fr; - } - - .coordinate { - grid-column-start: 1; - grid-row: 1 / span 3; - width: 64px; - height: 64px; - background: var(--ti-lowcode-fit-coordinate-bg); - display: inline-grid; - overflow: hidden; - justify-items: center; - border-width: 1px; - box-sizing: border-box; - border-style: solid; - border-color: var(--ti-lowcode-fit-coordinate-border-color); - border-radius: 2px; - gap: 0px; - grid-template-columns: 1fr 1fr 1fr; - grid-template-rows: 1fr 1fr 1fr; - } - - .coordinate-origin { - background-color: var(--ti-lowcode-fit-coordinate-bg); - transition: color 0.1s ease 0s; - color: var(--ti-lowcode-fit-coordinate-origin-color); - font-size: 19px; - - &:hover, - &.selected { - color: var(--ti-lowcode-fit-label-color); - } - } - - .input-wrap { - grid-column-end: span 1; - grid-row-start: 2; - align-items: center; - box-sizing: border-box; - display: grid; - gap: 4px 8px; - grid-template-columns: auto auto; - - .left-input { - grid-column-start: 1; - } - - .top-input { - grid-column-start: 2; - } - - .left { - color: var(--ti-lowcode-fit-label-color); - justify-self: center; - grid-column-start: 1; - } - - .top { - color: var(--ti-lowcode-fit-label-color); - justify-self: center; - grid-column-start: 2; - } - - .tiny-input__inner { - padding: 0 20px 0 4px; - } - - .tiny-input__suffix { - right: 4px; - } - } - } - - &.grid-edit-popper { - color: var(--ti-lowcode-toolbar-breadcrumb-color); - - .grid-edit-spacing { - display: grid; - gap: 8px 4px; - grid-template-columns: 44px 1fr 24px 1fr; - align-items: center; - padding: 8px; - - .gap, - .direction { - grid-column: 1 / -1; - display: grid; - gap: 4px; - grid-template-columns: 48px 1fr; - } - - .direction { - align-items: center; - - .radio-button { - width: 50%; - } - } - - .gap-label { - display: inline-block; - height: 28px; - line-height: 28px; - } - - .gap-input { - display: grid; - gap: 4px; - grid-template-columns: 1fr 24px 1fr; - - .svg-icon { - place-self: center; - grid-area: 1 / 2 / auto / auto; - font-family: inherit; - font-size: inherit; - position: relative; - display: flex; - align-items: center; - justify-content: center; - height: 24px; - font-size: 18px; - } - - .col { - place-self: center; - } - - .row { - place-self: center; - grid-column: 3 / -1; - } - - .suffix { - min-width: 18px; - } - } - - .dense { - grid-column: 2 / -1; - display: flex; - align-items: center; - - input[type='checkbox'] { - accent-color: var(--ti-lowcode-tootip-arrow-border-color); - } - - label { - margin-right: 4px; - } - } - } - - .grid-edit-layout { - padding: 8px; - - .top { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 4px; - padding-right: 4px; - - .tiny-svg { - font-size: 16px; - } - } - - .text { - margin-left: 4px; - } - - .item-icon { - display: none; - color: var(--ti-lowcode-input-icon-color); - - &:hover { - color: var(--ti-lowcode-toolbar-breadcrumb-color); - } - - & + .item-icon { - margin-left: 8px; - } - } - - .option-input { - &:hover .item-icon { - display: inline-block; - } - } - - .layout-item { - .tiny-svg { - margin-right: 0; - } - - & + .layout-item { - margin-top: 8px; - } - } - } - - .is-setting { - color: var(--ti-lowcode-style-setting-label-color); - background-color: var(--ti-lowcode-style-setting-label-bg); - } - } - - &.icon-popover { - background-color: var(--ti-lowcode-icon-popover-bg); - filter: drop-shadow(rgba(0, 0, 0, 0.5) 0px 0px 1px) drop-shadow(rgba(0, 0, 0, 0.5) 0px 2px 4px) - drop-shadow(rgba(0, 0, 0, 0.5) 0px 4px 12px); - - &[x-placement^='left'] { - .popper__arrow { - right: -6px; - - &, - &::after { - border-left-color: var(--ti-lowcode-icon-popover-bg); - } - } - } - } -} - -// tiny-vue dialogBox 弹框样式 -.tiny-dialog-box__wrapper { - .tiny-dialog-box { - background-color: var(--ti-lowcode-dialog-box-bg-color); - .tiny-dialog-box__header { - color: var(--ti-lowcode-dialog-header-color); - background-color: var(--ti-lowcode-dialog-box-bg-color); - .tiny-dialog-box__headerbtn { - color: var(--ti-lowcode-dialog-close-btn-color); - - &:hover { - color: var(--ti-lowcode-dialog-close-btn-hover-color); - } - } - } - - .tiny-dialog-box__body { - color: var(--ti-lowcode-dialog-box-body-color); - - .tiny-collapse { - margin: 16px 0; - } - - .tiny-collapse-item__header { - padding: 0 8px; - color: var(--ti-lowcode-toolbar-breadcrumb-color); - background-color: var(--ti-lowcode-toolbar-active-bg); - - svg { - color: var(--ti-lowcode-toolbar-breadcrumb-color); - } - } - - .tiny-collapse-item { - border: none; - margin-top: 0; - padding-top: 0; - padding-bottom: 0; - background: var(--ti-lowcode-toolbar-bg); - color: var(--ti-lowcode-toolbar-breadcrumb-color); - } - - .tiny-collapse-item__wrap { - background-color: var(--ti-lowcode-toolbar-view-hover-bg); - } - - .tiny-collapse-item__content { - color: var(--ti-lowcode-toolbar-breadcrumb-color); - border: 1px solid var(--ti-lowcode-dialog-demo-border-color); - border-top: none; - } - } - } - - .switch-tip { - color: var(--ti-lowcode-toolbar-breadcrumb-color); - - .icon { - font-size: 28px; - margin-right: 12px; - } - } - - &.update-page { - .tiny-dialog-box__body { - .tiny-input { - margin-bottom: 10px; - background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59)); - - input { - color: var(--ti-lowcode-toolbar-breadcrumb-color); - } - } - } - } -} - -// tiny-vue modal 模态框 -.tiny-modal__wrapper { - .tiny-modal__box { - .tiny-modal__status-wrapper { - display: none; - } - - .tiny-modal__close-btn { - color: var(--ti-lowcode-modal-close-btn-color); - - &:hover { - background-color: unset; - color: var(--ti-lowcode-modal-close-btn-hover-color); - } - } - - .tiny-modal__body { - .modal-content { - color: var(--ti-lowcode-modal-content-color); - } - } - - .tiny-modal__footer { - display: flex; - justify-content: center; - - .tiny-button--primary { - margin-left: 8px; - } - } - } - - &.status__custom { - .tiny-modal__footer { - .tiny-button--default { - display: none; - } - } - } -} - -// tiny-vue tooltip 提示框 -.tiny-tooltip.tiny-tooltip__popper { - &.is-dark { - color: var(--ti-lowcode-tooltip-text-color); - background: var(--ti-lowcode-tooltip-bg-color); - padding: 6px; - border-radius: 2px; - box-shadow: rgb(0 0 0 / 15%) 0px 5px 10px; - font-size: 14px; - } - - &.is-error { - background-color: var(--ti-lowcode-tooltip-error-bg-color); - - &[x-placement^='top'] { - .popper__arrow { - &, - &::after { - border-top-color: var(--ti-lowcode-tooltip-error-bg-color); - } - } - } - - &[x-placement^='bottom'] { - .popper__arrow { - &, - &::after { - border-bottom-color: var(--ti-lowcode-tooltip-error-bg-color); - } - } - } - - &[x-placement^='left'] { - .popper__arrow { - &, - &::after { - border-left-color: var(--ti-lowcode-tooltip-error-bg-color); - } - } - } - - &[x-placement^='right'] { - .popper__arrow { - &, - &::after { - border-right-color: var(--ti-lowcode-tooltip-error-bg-color); - } - } - } - } - - &.tiny-form__valid.is-error { - &[x-placement^='top'] { - .popper__arrow { - bottom: -6px; - } - } - } - - &[x-placement^='top'] { - .popper__arrow { - &, - &::after { - border-top-color: var(--ti-lowcode-tooltip-bg-color); - } - } - } - - &[x-placement^='bottom'] { - .popper__arrow { - &, - &::after { - border-bottom-color: var(--ti-lowcode-tooltip-bg-color); - } - } - } - - &[x-placement^='left'] { - .popper__arrow { - &, - &::after { - border-left-color: var(--ti-lowcode-tooltip-bg-color); - } - } - } - - &[x-placement^='right'] { - .popper__arrow { - &, - &::after { - border-right-color: var(--ti-lowcode-tooltip-bg-color); - } - } - } - - &.background-type-tooltip { - z-index: 9999999 !important; - } -} - -.tiny-popper { - &.tiny-picker-panel { - color: var(--ti-lowcode-dialog-font-color); - background: var(--ti-lowcode-toolbar-view-hover-bg); - border-color: var(--ti-lowcode-tabs-border-color); - box-shadow: rgb(0 0 0 / 15%) 0px 5px 10px; - - .tiny-date-picker__header-label { - color: var(--ti-lowcode-dialog-font-color); - } - - .tiny-date-picker__time-header { - border-color: var(--ti-lowcode-tabs-border-color); - } - - .tiny-picker-panel__icon-btn { - color: var(--ti-lowcode-description-minor-color); - - &:hover { - color: var(--ti-lowcode-toolbar-icon-color); - } - } - - .tiny-picker-panel__footer { - background-color: var(--ti-lowcode-toolbar-view-hover-bg); - border-color: var(--ti-lowcode-tabs-border-color); - - .tiny-button--text { - color: var(--ti-lowcode-dialog-font-color); - - &:hover { - color: var(--ti-lowcode-toolbar-icon-color); - } - } - - .tiny-button--primary { - color: var(--ti-lowcode-toolbar-icon-color); - border-color: var(--ti-lowcode-toolbar-border-color); - background-color: var(--ti-lowcode-button-info-bg-color); - - &:hover { - color: var(--ti-lowcode-toolbar-icon-color); - border-color: var(--ti-lowcode-toolbar-border-color); - background-color: var(--ti-lowcode-button-info-hover-bg); - } - } - } - - .tiny-date-table { - td.next-month, - td.pre-month { - color: var(--ti-lowcode-description-minor-color); - - span:hover { - color: var(--ti-lowcode-toolbar-icon-color); - background: var(--ti-lowcode-canvas-wrap-bg); - } - } - - th { - color: var(--ti-lowcode-dialog-font-color); - } - - td.current:not(.disabled) span { - background-color: var(--ti-lowcode-canvas-wrap-bg); - } - - td.available:hover span { - color: var(--ti-lowcode-toolbar-icon-color); - background-color: var(--ti-lowcode-canvas-wrap-bg); - } - } - - .tiny-time-panel { - background: var(--ti-lowcode-toolbar-view-hover-bg); - border-color: var(--ti-lowcode-tabs-border-color); - box-shadow: rgb(0 0 0 / 15%) 0px 5px 10px; - } - - .tiny-time-spinner__item { - color: var(--ti-lowcode-description-minor-color); - - &.active:not(.disabled) { - color: var(--ti-lowcode-toolbar-icon-color); - } - - &:hover:not(.disabled):not(.active) { - color: var(--ti-lowcode-toolbar-icon-color); - background: var(--ti-lowcode-canvas-wrap-bg); - } - } - - .tiny-time-panel__footer { - border-color: var(--ti-lowcode-tabs-border-color); - - .cancel { - color: var(--ti-lowcode-dialog-font-color); - } - - .confirm { - color: var(--ti-lowcode-button-info-bg); - } - } - - .tiny-time-panel__content { - &::after, - &::before { - border-color: var(--ti-lowcode-toolbar-border-color); - } - } - } -} - -.tiny-grid { - svg { - color: var(--ti-grid-primary-color); - width: 16px; - height: 16px; - } - .tiny-grid__body-wrapper { - .tiny-grid-body__column { - border-bottom: 0; - cursor: pointer; - color: var(--ti-lowcode-base-text-color); - - .tree-box { - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; - - .node-icon { - margin-right: 5px; - } - } - } - - .tiny-grid-body__row { - .tiny-grid-default-input { - background: var(--ti-lowcode-input-bg); - color: var(--ti-lowcode-toolbar-breadcrumb-color); - } - - &, - &:not(.row__hover):nth-child(2n) { - background: var(--ti-lowcode-tiny-grid-row-hover-bg); - color: var(--ti-lowcode-toolbar-breadcrumb-color); - - &:hover { - background: var(--ti-lowcode-toolbar-bg); - } - - &.row__current { - background: var(--ti-lowcode-node-current-bg); - - span { - color: var(--ti-lowcode-toolbar-breadcrumb-color); - } - - svg { - color: var(--ti-lowcode-toolbar-breadcrumb-color); - } - } - - &.sortable-chosen { - background: var(--ti-lowcode-node-current-bg); - - &.nodrag { - background: var(--ti-lowcode-node-nodrag-bg); - } - } - } - - &.nav-tree { - .tiny-grid-body__column { - height: 32px; - } - - .tiny-grid-cell { - display: flex; - } - } - } - - .tiny-grid-tree-wrapper { - width: 14px; - - .tiny-grid-tree__node-btn { - font-size: 8px; - color: var(--ti-lowcode-tree-icon-color); - - &:hover { - color: var(--ti-lowcode-toolbar-icon-color); - } - } - } - } - - .tiny-grid__fixed-right-wrapper, - .tiny-grid__fixed-left-wrapper { - background-color: var(--ti-lowcode-common-bg-1); - } - - .tiny-grid-checkbox { - input { - & + .tiny-grid-checkbox__icon { - border: 1px solid var(--ti-lowcode-tiny-grid-checkbox-checked-border-color); - background-color: transparent; - svg { - color: var(--ti-lowcode-tiny-grid-checkbox-svg-color); - } - } - - &:checked + .tiny-grid-checkbox__icon { - border: 1px solid var(--ti-lowcode-tiny-grid-checkbox-checked-border-color); - - svg { - color: var(--ti-lowcode-common-primary-color); - width: 100%; - height: 100%; - } - } - - &[type='checkbox']:checked + .tiny-grid-checkbox__icon { - background-color: var(--ti-lowcode-tiny-grid-checkbox-checked-bg-color); - border-color: var(--ti-lowcode-tiny-grid-checkbox-checked-border-color); - } - } - &.is__indeterminate { - .tiny-grid-checkbox__icon svg { - color: var(--ti-lowcode-common-primary-color); - } - } - } - .tiny-grid-radio { - input + .tiny-grid-radio__icon > svg.icon-radio-selected { - color: var(--ti-lowcode-tiny-radio-selected-svg-color); - } - } -} - -.stripe-tiny-grid.tiny-grid { - background-color: var(--ti-lowcode-common-component-bg); - .tiny-grid { - background-color: var(--ti-lowcode-common-component-bg); - } - - .tiny-grid__header-wrapper { - background-color: var(--ti-lowcode-tabs-bg); - - .tiny-grid-header__column { - color: var(--ti-lowcode-stripe-grid-header-text-color); - height: 39px; - } - - .tiny-grid__repair { - border-color: var(--ti-lowcode-tabs-border-color); - } - - .tiny-grid-resizable.is__line:before { - background-color: var(--ti-lowcode-toolbar-active-bg); - } - } - - .tiny-grid__body-wrapper { - .tiny-grid-body__column { - height: 44px; - } - - .tiny-grid-body__row, - .tiny-grid-body__row:not(.row__hover):nth-child(2n) { - background-color: var(--ti-lowcode-stripe-grid-list-2n-bg-color); - - &:hover { - background-color: var(--ti-lowcode-stripe-grid-list-item-hover-bg); - } - - &.row__current { - background-color: var(--ti-lowcode-toolbar-view-hover-bg); - } - } - - .tiny-grid-body__row:not(.row__hover):nth-child(2n) { - background-color: var(--ti-lowcode-stripe-grid-list-n-bg-color); - } - } - - .tiny-grid__empty-text { - color: var(--ti-lowcode-toolbar-breadcrumb-color); - } -} - -.tiny-search { - div.tiny-search__line { - &:hover { - background-color: var(--ti-lowcode-search-hover-bg); - } - &.focus { - .tiny-search__input-btn { - color: var(--ti-lowcode-search-hover-icon-color); - } - .tiny-search__prefix svg { - color: var(--ti-lowcode-search-hover-icon-color); - } - } - - .tiny-search__input-btn { - color: var(--ti-lowcode-search-icon-color); - &:hover { - color: var(--ti-lowcode-search-hover-icon-color); - } - } - .tiny-search__prefix svg { - color: var(--ti-lowcode-search-icon-color); - &:hover { - color: var(--ti-lowcode-search-hover-icon-color); - cursor: pointer; - } - } - .tiny-search__input { - color: var(--ti-lowcode-search-input-color); - &::placeholder { - color: var(--ti-lowcode-search-input-placeholder-color); - } - } - } -} - -.tiny-input { - .tiny-input__inner { - border-color: var(--ti-lowcode-input-border-color); - background-color: var(--ti-lowcode-input-bg-color); - color: var(--ti-lowcode-input-color); - - &:focus { - border-color: var(--ti-lowcode-input-focus-border-color); - } - &::placeholder { - color: var(--ti-lowcode-input-placeholder-color); - } - &:hover { - border-color: var(--ti-lowcode-input-hover-border-color); - } - } - - &.is-disabled { - .tiny-input__inner { - border-color: var(--ti-lowcode-input-disabled-border-color); - background: var(--ti-lowcode-input-disabled-bg-color); - } - } - - // 全局自定义的错误样式状态，tinyvue 那边要有错误样式必须要包一层 form、form-item - // 所以我们这里自定义了一个类，添加这个类，就可以有错误的样式，无需包一层 form、form-item - &.status-error { - .tiny-input__inner { - border-color: var(--ti-lowcode-input-error-border-color); - background-color: var(--ti-lowcode-input-error-bg-color); - } - } -} - -.tiny-textarea { - border-color: var(--ti-lowcode-textarea-border-color); - - &:hover, - &:has(.tiny-textarea__inner:focus) { - border-color: var(--ti-lowcode-textarea-hover-border-color); - } - - .tiny-textarea__inner { - background-color: var(--ti-lowcode-textarea-input-bg-color); - color: var(--ti-lowcode-textarea-input-color); - } -} - -.tiny-numeric { - .tiny-numeric__decrease, - .tiny-numeric__increase { - color: var(--ti-lowcode-tiny-numeric-icon-color); - - &:hover { - color: var(--ti-lowcode-tiny-numeric-icon-hover-color); - } - } -} - -span.tiny-switch { - background-color: var(--ti-lowcode-tiny-switch-bg-color); - - &.tiny-switch-checked { - background-color: var(--ti-lowcode-tiny-switch-checked-bg-color); - } - - &::after { - background-color: var(--ti-lowcode-tiny-switch-dot-bg); - } -} - -.tiny-select { - div.tiny-input { - &.is-focus { - .tiny-input__inner { - border-color: var(--ti-lowcode-select-focus-border-color); - } - } - } - - .tiny-select__tags { - .tiny-tag { - color: var(--ti-lowcode-select-tags-text-color); - background-color: var(--ti-lowcode-select-tags-bg-color); - - .tiny-tag__close { - color: var(--ti-lowcode-select-tags-text-color); - &:hover { - color: var(--ti-lowcode-select-suffix-icon-color-hover); - } - } - } - } - - .tiny-input { - .tiny-input__inner { - padding: 8px; - } - - .tiny-select__caret { - color: var(--ti-lowcode-select-tags-text-color); - } - - .tiny-input__suffix-inner { - &:hover { - .tiny-select__caret { - color: var(--ti-lowcode-select-suffix-icon-color-hover); - } - } - } - } -} - -.tiny-select-dropdown { - &.tiny-popper { - background-color: var(--ti-lowcode-dropdown-bg-color); - border: 1px solid var(--ti-lowcode-dropdown-border-color); - - &.select-popper { - margin-top: 3px; - - .tiny-select-dropdown__item.tiny-option { - width: 79px; - height: 24px; - line-height: 24px; - padding: 4px 8px; - display: flex; - align-items: center; - } - - .tiny-select-dropdown__list { - padding: 4px 0; - } - - .tiny-select-dropdown__wrap { - min-height: 50px; - margin-bottom: -8px !important; - margin-right: -8px !important; - } - } - - .cursor-option { - padding: 0 4px 0 12px; - - .item-icon { - font-size: 16px; - } - - .item-label { - font-size: 14px; - margin-left: 4px; - } - } - } - - .tiny-select-dropdown__item { - &.tiny-option { - color: var(--ti-lowcode-dropdown-item-text-color); - background-color: var(--ti-lowcode-dropdown-bg-color); - - &.hover, - &:hover { - background-color: var(--ti-lowcode-dropdown-item-hover-bg-color); - color: var(--ti-lowcode-dropdown-item-hover-text-color); - } - - &.selected { - color: var(--ti-lowcode-dropdown-item-selected-color); - background-color: var(--ti-lowcode-dropdown-item-selected-bg); - - & > span { - position: relative; - } - } - - &.is-disabled > a { - cursor: not-allowed; - } - } - } - - &.is-multiple { - .tiny-select-dropdown__item.tiny-option { - &:not(.is-disabled).hover, - &:not(.is-disabled):hover { - color: var(--ti-lowcode-dropdown-item-hover-text-color); - background-color: var(--ti-lowcode-dropdown-item-hover-bg-color); - - .tiny-svg { - color: var(--ti-lowcode-dropdown-item-hover-text-color); - } - } - - &.is-disabled:hover { - background-color: transparent; - } - - &.selected { - color: var(--ti-lowcode-dropdown-item-hover-text-color); - background-color: transparent; - font-weight: 600; - - .tiny-svg { - color: var(--ti-lowcode-dropdown-item-hover-text-color); - } - - & > span { - padding-left: 0; - - &::before { - content: ''; - } - } - } - - & > span { - padding-left: 0; - } - } - } - - .tiny-select-group__wrap { - &:not(:last-of-type)::after { - left: 0; - right: 0; - background: var(--ti-lowcode-toolbar-border-color); - } - - .tiny-select-group__title { - font-size: 14px; - font-weight: 500; - color: var(--ti-lowcode-dialog-font-color); - background: var(--ti-lowcode-toolbar-bg); - padding: 2px 0 2px 8px; - margin-bottom: 2px; - } - } - - .tiny-tree { - color: var(--ti-lowcode-dialog-font-color); - background: var(--ti-lowcode-toolbar-view-hover-bg); - - .tiny-tree-node__expand-icon { - &, - &.expanded { - color: var(--ti-lowcode-dialog-font-color); - } - - &:not(.is-leaf) { - margin-left: 12px; - margin-right: 6px; - } - } - - .tiny-tree-node__content { - &:hover { - background-color: var(--ti-lowcode-canvas-wrap-bg); - } - } - - .tiny-tree-node { - &.is-current, - &:focus { - & > .tiny-tree-node__content { - background-color: var(--ti-lowcode-canvas-wrap-bg); - } - } - } - } - - &.position-origin-select { - min-width: 72px !important; - z-index: 9999999 !important; - } -} - -.tiny-tree { - .tiny-tree-node__label { - font-size: 12px; - } -} - -button { - &.tiny-button { - &.tiny-button--default { - color: var(--ti-lowcode-button-default-color); - border-color: var(--ti-lowcode-button-default-border-color); - background-color: var(--ti-lowcode-button-default-bg); - - &:hover { - color: var(--ti-lowcode-button-default-hover-color); - border-color: var(--ti-lowcode-button-default-hover-border-color); - background-color: var(--ti-lowcode-button-default-hover-bg); - } - - &.is-disabled { - color: var(--ti-lowcode-button-default-disabled-color); - border-color: var(--ti-lowcode-button-default-disabled-border-color); - background-color: var(--ti-lowcode-button-default-disabled-bg); - } - } - - &.tiny-button--info { - color: var(--ti-lowcode-button-info-color); - border-color: var(--ti-lowcode-button-info-border-color); - background-color: var(--ti-lowcode-button-info-bg-color); - - &:hover { - color: var(--ti-lowcode-button-info-hover-color); - border-color: var(--ti-lowcode-button-info-hover-border-color); - background-color: var(--ti-lowcode-button-info-hover-bg-color); - } - } - &.tiny-button--primary { - color: var(--ti-lowcode-button-primary-color); - border-color: var(--ti-lowcode-button-primary-border-color); - background-color: var(--ti-lowcode-button-primary-bg-color); - - &:hover { - color: var(--ti-lowcode-button-primary-hover-color); - border-color: var(--ti-lowcode-button-primary-hover-border-color); - background-color: var(--ti-lowcode-button-primary-hover-bg-color); - } - } - } -} - -.tiny-button-group { - ul.tiny-group-item { - border: 1px solid var(--ti-lowcode-tabs-border-color); - border-radius: 2px; - - li { - background-color: var(--ti-lowcode-canvas-wrap-bg); - - &.active { - &:hover button:not(.disabled), - button:not(.disabled) { - background: var(--ti-lowcode-tabs-bg); - border-color: var(--ti-lowcode-tabs-bg); - color: var(--ti-lowcode-toolbar-icon-color); - } - } - - &:hover { - button:not(.disabled) { - color: var(--ti-lowcode-dropdown-item-hover-text-color); - background-color: var(--ti-lowcode-common-component-bg); - } - } - - &:not(:last-child) { - margin-right: 0; - } - } - - button { - background-color: var(--ti-lowcode-canvas-wrap-bg); - color: var(--ti-lowcode-toolbar-breadcrumb-color); - - &::before { - background: var(--ti-lowcode-tabs-border-color); - } - } - } -} - -.tiny-form { - .tiny-form-item__label { - padding-right: 8px; - color: var(--ti-lowcode-input-label-color); - } - - .tiny-form-item { - &.is-error { - margin-bottom: 20px; - } - } -} - -.tiny-collapse { - border-top: none; - border-bottom: none; - .tiny-collapse-item { - border: none; - // 第一项的外边距会与其他元素外边距相加形成最终外边距，因此第一项外边距不调整 - + .tiny-collapse-item { - margin-top: 4px; - } - .tiny-collapse-item__header { - padding-left: 16px; - } - .components-items { - .item { - cursor: pointer; - } - } - } - - .tiny-collapse-item__header { - color: var(--ti-lowcode-collapse-item-header-color); - background: var(--ti-lowcode-collapse-item-header-bg-color); - position: relative; - min-height: 32px; - padding-top: 5px; - padding-bottom: 5px; - - &:hover, - &.is-active { - color: var(--ti-lowcode-collapse-item-header-active-color); - } - - .tiny-collapse-item__arrow { - line-height: 14px; - } - } - - .tiny-collapse-item, - .tiny-collapse-item__wrap { - background-color: var(--ti-lowcode-collapse-item-bg-color); - } - - .tiny-collapse-item__content { - color: var(--ti-lowcode-collapse-item-content-color); - padding: 0; - border: none; - } - - .tiny-collapse-item__wrap { - overflow: inherit; - } -} - -.canvas-slot-choose { - div { - line-height: 30px; - text-align: center; - color: var(--ti-lowcode-button-info-color); - - &:hover { - background-color: var(--ti-lowcode-component-item-hover-bg); - } - } -} - -.tiny-notify { - .tiny-notify__close-zone { - color: var(--ti-lowcode-notify-close-color); - &:hover { - color: var(--ti-lowcode-notify-close-hover-color); - } - } - - &.tiny-notify--error { - .tiny-notify__icon-status { - color: var(--ti-lowcode-base-error-color); - } - } - - &.tiny-notify--info { - .tiny-notify__icon-status { - color: var(--ti-lowcode-base-prompt-color); - } - } - - &.tiny-notify--success { - .tiny-notify__icon-status { - color: var(--ti-lowcode-base-success-color); - } - } - - &.tiny-notify--warning { - .tiny-notify__icon-status { - color: var(--ti-lowcode-base-warn-color); - } - } -} - -.tiny-tabs { - // tiny-tabs button-card模式宽度默认无法铺满父容器，添加此类名修改成铺满父容器 - &.full-width-tabs { - .tiny-tabs__nav { - float: none; - display: flex; - .tiny-tabs__item { - flex: 1 1 auto; - } - } - } - &__item__title { - text-align: center; - } -} - -.tiny-dropdown { - &__trigger { - color: var(--ti-lowcode-trigger-color); - &:not(&__caret-button):hover { - color: var(--ti-lowcode-trigger-hover-color); - } - } -} - -.empty-wrap { - text-align: center; - margin-top: 20px; - - .empty-icon { - width: 64px; - height: 64px; - color: var(--ti-lowcode-empty-icon-color); - } - - .empty-text { - margin-top: 6px; - margin-bottom: 0; - font-size: 12px; - color: var(--ti-lowcode-common-text-color-5); - } -} - -.tiny-radio-group { - .tiny-radio-button { - &:first-child { - .tiny-radio-button__inner { - border-color: var(--ti-lowcode-radio-button-border-color); - } - } - .tiny-radio-button__orig-radio:checked { - & + .tiny-radio-button__inner { - background-color: var(--ti-lowcode-tiny-radio-button-checked-bg); - border-color: var(--ti-lowcode-radio-button-border-color); - &:hover { - box-shadow: none; - } - } - } - &__inner { - background-color: var(--ti-lowcode-tiny-radio-button-bg); - color: var(--ti-lowcode-radio-button-color); - border-color: var(--ti-lowcode-radio-button-border-color); - } - } -} - -.tiny-loading { - .tiny-loading__spinner { - margin-top: 0; - transform: translateY(-50%); - } -} - -.global-desc-info { - color: var(--ti-lowcode-common-text-desc-color); -} diff --git a/packages/theme/dark/base.less b/packages/theme/dark/base.less deleted file mode 100644 index 2713efff9..000000000 --- a/packages/theme/dark/base.less +++ /dev/null @@ -1,273 +0,0 @@ -:root { - // 灰阶 - --ti-lowcode-base-gray-0: #fff; - --ti-lowcode-base-gray-10: #e6e6e6; - --ti-lowcode-base-gray-20: #d9d9d9; - --ti-lowcode-base-gray-30: #ccc; - --ti-lowcode-base-gray-40: #a6a6a6; - --ti-lowcode-base-gray-50: #808080; - --ti-lowcode-base-gray-60: #595959; - --ti-lowcode-base-gray-70: #333; - --ti-lowcode-base-gray-80: #292929; - --ti-lowcode-base-gray-90: #1f1f1f; - --ti-lowcode-base-gray-95: #141414; - --ti-lowcode-base-gray-100: #000; - - // expand-red - --ti-lowcode-base-red-1: #ffeae8; - --ti-lowcode-base-red-2: #fccdca; - --ti-lowcode-base-red-3: #faa9a5; - --ti-lowcode-base-red-4: #fa8682; - --ti-lowcode-base-red-5: #f76360; - --ti-lowcode-base-red-6: #f23030; - --ti-lowcode-base-red-7: #cc272a; - --ti-lowcode-base-red-8: #a3171c; - --ti-lowcode-base-red-9: #78080e; - --ti-lowcode-base-red-10: #4d0005; - --ti-lowcode-base-red-11: #a64242; - --ti-lowcode-base-red-12: #d4827f; - --ti-lowcode-base-red-13: #f2c5c2; - - // expand-orange - --ti-lowcode-base-orange-1: #fff5e8; - --ti-lowcode-base-orange-2: #fcdfb8; - --ti-lowcode-base-orange-3: #fcc98b; - --ti-lowcode-base-orange-4: #fcb25c; - --ti-lowcode-base-orange-5: #ff9a2e; - --ti-lowcode-base-orange-6: #ff8800; - --ti-lowcode-base-orange-7: #d96900; - --ti-lowcode-base-orange-8: #a64d00; - --ti-lowcode-base-orange-9: #733400; - --ti-lowcode-base-orange-10: #4d2201; - --ti-lowcode-base-orange-11: #9e6d3f; - --ti-lowcode-base-orange-12: #d6a981; - --ti-lowcode-base-orange-13: #f2d8c2; - - // expand-yellow - --ti-lowcode-base-yellow-1: #fcf9eb; - --ti-lowcode-base-yellow-2: #fcf0c2; - --ti-lowcode-base-yellow-3: #fae396; - --ti-lowcode-base-yellow-4: #f7d56d; - --ti-lowcode-base-yellow-5: #f7c845; - --ti-lowcode-base-yellow-6: #fcbe1e; - --ti-lowcode-base-yellow-7: #d99b0b; - --ti-lowcode-base-yellow-8: #a67711; - --ti-lowcode-base-yellow-9: #7a5202; - --ti-lowcode-base-yellow-10: #4d3200; - --ti-lowcode-base-yellow-11: #9e7e3f; - --ti-lowcode-base-yellow-12: #d4b57f; - --ti-lowcode-base-yellow-13: #e6d3b8; - - // expand-lemon - --ti-lowcode-base-lemon-1: #fcfae8; - --ti-lowcode-base-lemon-2: #fcf6c2; - --ti-lowcode-base-lemon-3: #fcf092; - --ti-lowcode-base-lemon-4: #fae969; - --ti-lowcode-base-lemon-5: #f7e04a; - --ti-lowcode-base-lemon-6: #f7d916; - --ti-lowcode-base-lemon-7: #d9bb16; - --ti-lowcode-base-lemon-8: #a38708; - --ti-lowcode-base-lemon-9: #756002; - --ti-lowcode-base-lemon-10: #4d3d00; - --ti-lowcode-base-lemon-11: #9e8f46; - --ti-lowcode-base-lemon-12: #d6c581; - --ti-lowcode-base-lemon-13: #eddfb2; - - // expand-lime - --ti-lowcode-base-lime-1: #f8fae3; - --ti-lowcode-base-lime-2: #eff5bf; - --ti-lowcode-base-lime-3: #e2ed8e; - --ti-lowcode-base-lime-4: #d5e667; - --ti-lowcode-base-lime-5: #c6de3e; - --ti-lowcode-base-lime-6: #b2d119; - --ti-lowcode-base-lime-7: #95b312; - --ti-lowcode-base-lime-8: #728c0a; - --ti-lowcode-base-lime-9: #576e05; - --ti-lowcode-base-lime-10: #3b4d00; - --ti-lowcode-base-lime-11: #808c46; - --ti-lowcode-base-lime-12: #c1cc7a; - --ti-lowcode-base-lime-13: #3b4d00; - - // expand-kelly - --ti-lowcode-base-kelly-1: #f2fae6; - --ti-lowcode-base-kelly-2: #daf2bb; - --ti-lowcode-base-kelly-3: #b9e683; - --ti-lowcode-base-kelly-4: #9edb58; - --ti-lowcode-base-kelly-5: #7dcc29; - --ti-lowcode-base-kelly-6: #5cb300; - --ti-lowcode-base-kelly-7: #4b9902; - --ti-lowcode-base-kelly-8: #3c8001; - --ti-lowcode-base-kelly-9: #2e6600; - --ti-lowcode-base-kelly-10: #1f4700; - --ti-lowcode-base-kelly-11: #628c38; - --ti-lowcode-base-kelly-12: #a2c777; - --ti-lowcode-base-kelly-13: #d2e6bb; - - // expand-green - --ti-lowcode-base-green-1: #e8fced; - --ti-lowcode-base-green-2: #bbf2c8; - --ti-lowcode-base-green-3: #82e09a; - --ti-lowcode-base-green-4: #51d675; - --ti-lowcode-base-green-5: #25c251; - --ti-lowcode-base-green-6: #00b336; - --ti-lowcode-base-green-7: #029931; - --ti-lowcode-base-green-8: #01802b; - --ti-lowcode-base-green-9: #006624; - --ti-lowcode-base-green-10: #004a1b; - --ti-lowcode-base-green-11: #3d995c; - --ti-lowcode-base-green-12: #77c78f; - --ti-lowcode-base-green-13: #b8e6c7; - - // expand-mint - --ti-lowcode-base-mint-1: #e8fcfa; - --ti-lowcode-base-mint-2: #bff5ef; - --ti-lowcode-base-mint-3: #8be8e0; - --ti-lowcode-base-mint-4: #5dded5; - --ti-lowcode-base-mint-5: #38d6ce; - --ti-lowcode-base-mint-6: #10c7c1; - --ti-lowcode-base-mint-7: #0aaba8; - --ti-lowcode-base-mint-8: #048c8c; - --ti-lowcode-base-mint-9: #046466; - --ti-lowcode-base-mint-10: #004547; - --ti-lowcode-base-mint-11: #3d9996; - --ti-lowcode-base-mint-12: #77c7c2; - --ti-lowcode-base-mint-13: #b8e6e1; - - // expand-sky - --ti-lowcode-base-sky-1: #e8f8fc; - --ti-lowcode-base-sky-2: #c4f2ff; - --ti-lowcode-base-sky-3: #9de4fa; - --ti-lowcode-base-sky-4: #79d8f7; - --ti-lowcode-base-sky-5: #58cbf5; - --ti-lowcode-base-sky-6: #33bcf2; - --ti-lowcode-base-sky-7: #1f9acf; - --ti-lowcode-base-sky-8: #1075a3; - --ti-lowcode-base-sky-9: #065278; - --ti-lowcode-base-sky-10: #00304a; - --ti-lowcode-base-sky-11: #3d7f99; - --ti-lowcode-base-sky-12: #7ab8cc; - --ti-lowcode-base-sky-13: #b6e5f2; - - // expand-blue - --ti-lowcode-base-blue-1: #e3effa; - --ti-lowcode-base-blue-2: #c4e1ff; - --ti-lowcode-base-blue-3: #99c9ff; - --ti-lowcode-base-blue-4: #68abfc; - --ti-lowcode-base-blue-5: #4191fa; - --ti-lowcode-base-blue-6: #1476ff; - --ti-lowcode-base-blue-7: #0f5ed4; - --ti-lowcode-base-blue-8: #0845a6; - --ti-lowcode-base-blue-9: #022e7a; - --ti-lowcode-base-blue-10: #001a4a; - --ti-lowcode-base-blue-11: #3d6899; - --ti-lowcode-base-blue-12: #7fa6d4; - --ti-lowcode-base-blue-13: #b6d4f2; - - // expand-indigo - --ti-lowcode-base-indigo-1: #eee8ff; - --ti-lowcode-base-indigo-2: #ddd7fa; - --ti-lowcode-base-indigo-3: #b19cf7; - --ti-lowcode-base-indigo-4: #957af5; - --ti-lowcode-base-indigo-5: #6e51e0; - --ti-lowcode-base-indigo-6: #512fd6; - --ti-lowcode-base-indigo-7: #391eb0; - --ti-lowcode-base-indigo-8: #27108f; - --ti-lowcode-base-indigo-9: #19056e; - --ti-lowcode-base-indigo-10: #0e004d; - --ti-lowcode-base-indigo-11: #584d99; - --ti-lowcode-base-indigo-12: #847acc; - --ti-lowcode-base-indigo-13: #bbb8e6; - - // expand-purple - --ti-lowcode-base-purple-1: #f5e8ff; - --ti-lowcode-base-purple-2: #e4c5fc; - --ti-lowcode-base-purple-3: #d0a1f7; - --ti-lowcode-base-purple-4: #b878f0; - --ti-lowcode-base-purple-5: #9f53e6; - --ti-lowcode-base-purple-6: #832fd6; - --ti-lowcode-base-purple-7: #641eb0; - --ti-lowcode-base-purple-8: #4c1091; - --ti-lowcode-base-purple-9: #370673; - --ti-lowcode-base-purple-10: #20004d; - --ti-lowcode-base-purple-11: #683d99; - --ti-lowcode-base-purple-12: #a07acc; - --ti-lowcode-base-purple-13: #cbb8e6; - - // expand-pink - --ti-lowcode-base-pink-1: #fce6fb; - --ti-lowcode-base-pink-2: #fcc2f9; - --ti-lowcode-base-pink-3: #f794f2; - --ti-lowcode-base-pink-4: #eb67e6; - --ti-lowcode-base-pink-5: #e841e5; - --ti-lowcode-base-pink-6: #d91ad9; - --ti-lowcode-base-pink-7: #b50fb8; - --ti-lowcode-base-pink-8: #8f0a94; - --ti-lowcode-base-pink-9: #6b0370; - --ti-lowcode-base-pink-10: #47004d; - --ti-lowcode-base-pink-11: #993d99; - --ti-lowcode-base-pink-12: #c97acc; - --ti-lowcode-base-pink-13: #e2b8e6; - - // expand-rose - --ti-lowcode-base-rose-1: #fce6ef; - --ti-lowcode-base-rose-2: #ffc4de; - --ti-lowcode-base-rose-3: #fa9bc9; - --ti-lowcode-base-rose-4: #f56cac; - --ti-lowcode-base-rose-5: #eb4696; - --ti-lowcode-base-rose-6: #e61c81; - --ti-lowcode-base-rose-7: #b50e65; - --ti-lowcode-base-rose-8: #940a54; - --ti-lowcode-base-rose-9: #70033f; - --ti-lowcode-base-rose-10: #4d002b; - --ti-lowcode-base-rose-11: #993d6e; - --ti-lowcode-base-rose-12: #cc7aa6; - --ti-lowcode-base-rose-13: #e6b8d2; - - // 公司品牌色 - --ti-lowcode-base-brand-color: #c7000b; - - // 主色 - --ti-lowcode-base-primary-color-1: #e6e6e6; - --ti-lowcode-base-primary-color-2: #1476ff; - - // 背景色 - --ti-lowcode-base-bg: #141414; - --ti-lowcode-base-bg-1: rgba(0, 0, 0, 0.05); - --ti-lowcode-base-bg-2: #333; - --ti-lowcode-base-bg-3: #e6e6e6; - --ti-lowcode-base-bg-4: #a6a6a6; - --ti-lowcode-base-bg-5: #000; - --ti-lowcode-base-bg-6: #a6a6a61a; - - // 文本色 - --ti-lowcode-base-text-color: #e6e6e6; - --ti-lowcode-base-text-color-1: #a6a6a6; - --ti-lowcode-base-text-color-2: #1476ff; - --ti-lowcode-base-text-color-3: #808080; - --ti-lowcode-base-text-color-4: #595959; - - // 文本链接色 - --ti-lowcode-base-text-link-color: #e6e6e6; - --ti-lowcode-base-text-link-color-1: #a6a6a6; - --ti-lowcode-base-text-link-color-2: #595959; - --ti-lowcode-base-text-link-color-3: #fff; - - // 按钮边框色 - --ti-lowcode-base-secondary-button-border-color: #a6a6a6; - --ti-lowcode-base-secondary-button-border-hover-color: #3d3d3d; - --ti-lowcode-base-default-button-border-color: #595959; - --ti-lowcode-base-default-button-border-hover-color: #e6e6e6; - --ti-lowcode-base-default-button-border-disable-color: #dbdbdb; - - // 分割线 - --ti-lowcode-base-split-color-1: rgba(255, 255, 255, 0.08); // 白色背景分割线 - --ti-lowcode-base-split-color-2: rgba(255, 255, 255, 0.15); // 灰色背景分割线 - - // 状态色 - --ti-lowcode-base-error-color: #f23030; - --ti-lowcode-base-warn-color: #ff8800; - --ti-lowcode-base-warn-color-1: #f7d916; - --ti-lowcode-base-success-color: #5cb300; - --ti-lowcode-base-prompt-color: #1476ff; - --ti-lowcode-base-invalidate-color: #ebebeb; -} diff --git a/packages/theme/dark/button.less b/packages/theme/dark/button.less deleted file mode 100644 index d2c9da9d8..000000000 --- a/packages/theme/dark/button.less +++ /dev/null @@ -1,34 +0,0 @@ -button { - --ti-lowcode-button-primary-color: #fff; - --ti-lowcode-button-primary-border-color: var(--ti-lowcode-common-primary-color); - --ti-lowcode-button-primary-bg-color: var(--ti-lowcode-common-primary-color); - - --ti-lowcode-button-primary-hover-color: #fff; - --ti-lowcode-button-primary-hover-border-color: var(--ti-lowcode-common-primary-hover-color); - --ti-lowcode-button-primary-hover-bg-color: var(--ti-lowcode-common-primary-hover-color); - - // button info 字体颜色 - --ti-lowcode-button-info-color: #fff; - --ti-lowcode-button-info-border-color: var(--ti-lowcode-common-primary-color); - --ti-lowcode-button-info-bg-color: var(--ti-lowcode-common-primary-color); - - // info 保存按钮 hover 背景色 - --ti-lowcode-button-info-hover-color: var(--ti-lowcode-base-gray-0); - --ti-lowcode-button-info-hover-border-color: var(--ti-lowcode-common-primary-hover-color); - --ti-lowcode-button-info-hover-bg-color: var(--ti-lowcode-common-primary-hover-color); - - // 默认按钮颜色 - --ti-lowcode-button-default-color: var(--ti-lowcode-toolbar-breadcrumb-color); - --ti-lowcode-button-default-border-color: var(--ti-lowcode-common-secondary-text-color); - --ti-lowcode-button-default-bg: transparent; - - // 默认按钮 hover 颜色 - --ti-lowcode-button-default-hover-color: #fff; - --ti-lowcode-button-default-hover-border-color: #6b6b6b; - --ti-lowcode-button-default-hover-bg: #6b6b6b; - - // 默认按钮禁用颜色 - --ti-lowcode-button-default-disabled-color: #4a4b4e; - --ti-lowcode-button-default-disabled-border-color: transparent; - --ti-lowcode-button-default-disabled-bg: var(--ti-lowcode-base-bg-1); -} diff --git a/packages/theme/dark/index.less b/packages/theme/dark/index.less index e43a405a7..a54353b9c 100644 --- a/packages/theme/dark/index.less +++ b/packages/theme/dark/index.less @@ -1,6 +1,4 @@ -@import '../common/base.less'; @import '../common/global.less'; -@import './base.less'; // 主题配置优先于公共配置 @import './variable.less'; @import './block.less'; @@ -9,26 +7,12 @@ @import './help.less'; @import './settings.less'; @import './metaComponent.less'; -@import './button.less'; -@import './tiny-collapse.less'; -@import './tiny-modal.less'; -@import './tiny-tabs.less'; -@import './tiny-search.less'; -@import './tiny-grid.less'; @import './events.less'; -@import './radio.less'; @import './i18n.less'; @import './pageManage.less'; @import './materials.less'; @import './tree.less'; @import './canvas.less'; -@import './tiny-dialog-box.less'; -@import './tiny-input.less'; -@import './tiny-switch.less'; -@import './tiny-search.less'; -@import './tiny-numeric.less'; -@import './tiny-checkbox.less'; -@import './tiny-notify.less'; @import './bridge.less'; @import './toolbar.less'; @import './datasource.less'; diff --git a/packages/theme/dark/radio.less b/packages/theme/dark/radio.less deleted file mode 100644 index 50ff79bf3..000000000 --- a/packages/theme/dark/radio.less +++ /dev/null @@ -1,19 +0,0 @@ -// 对 tinyvue 主题进行变量覆盖 -#app .tiny-radio[class*='tiny'] { - --ti-radio-bordered-checked-background-color: transparent; - --ti-radio-inner-bg-color: transparent; - --ti-radio-inner-checked-bg-color: var(--ti-lowcode-base-primary-color-2); - --ti-radio-bordered-checked-border-color: var(--ti-lowcode-base-primary-color-2); - --ti-radio-bordered-hover-border-color: var(--ti-lowcode-base-primary-color-2); - --ti-radio-inner-checked-hover-bg-color: var(--ti-lowcode-base-blue-5); - --ti-radio-bordered-checked-hover-border-color: var(--ti-lowcode-base-blue-5); - --ti-radio-text-color: var(--ti-lowcode-base-text-color); - --ti-radio-bordered-active-border-color: var(--ti-lowcode-base-primary-color-2); -} - -.tiny-radio-group { - --ti-lowcode-tiny-radio-button-bg: #262626; - --ti-lowcode-tiny-radio-button-checked-bg: var(--ti-lowcode-base-primary-color-2); - --ti-lowcode-radio-button-color: #fff; - --ti-lowcode-radio-button-border-color: transparent; -} diff --git a/packages/theme/dark/tiny-checkbox.less b/packages/theme/dark/tiny-checkbox.less deleted file mode 100644 index 8e9b9a53e..000000000 --- a/packages/theme/dark/tiny-checkbox.less +++ /dev/null @@ -1,27 +0,0 @@ -label.tiny-checkbox[class*='tiny'] { - --ti-checkbox-text-color: var(--ti-lowcode-base-gray-10); - --ti-checkbox-bg-color-checked: var(--ti-lowcode-base-primary-color-2); - --ti-checkbox-bg-color-hover-checked: var(--ti-lowcode-base-primary-color-2); - --ti-checkbox-border-color-hover-checked: var(--ti-lowcode-base-primary-color-2); - --ti-checkbox-border-color-checked: var(--ti-lowcode-base-primary-color-2); - --ti-checkbox-border-color-hover: var(--ti-lowcode-base-gray-40); - --ti-checkbox-bg-color-disable: rgba(255, 255, 255, 0.08); - --ti-checkbox-border-color-unchecked-disabled: var(--ti-lowcode-base-gray-40); -} - -label.tiny-checkbox-button[class*='tiny'] { - --ti-checkbox-button-checked-border-color: var(--ti-lowcode-base-primary-color-2); - --ti-checkbox-button-checked-text-color: var(--ti-lowcode-base-primary-color-2); - --ti-checkbox-button-bg-color-hover: #fff; - --ti-checkbox-button-border-color-hover: var(--ti-lowcode-base-primary-color-2); - --ti-checkbox-button-hover-text-color: var(--ti-lowcode-base-primary-color-2); - --ti-checkbox-button-disabled-bg-color: rgba(255, 255, 255, 0.08); -} - -label.tiny-checkbox-button:not(.is-disabled).is-checked::after { - border-right-color: var(--ti-lowcode-base-primary-color-2); -} - -label.tiny-checkbox-button:not(.is-disabled).is-checked .tiny-checkbox-button__inner { - --ti-checkbox-shadow-color: var(--ti-lowcode-base-primary-color-2); -} diff --git a/packages/theme/dark/tiny-collapse.less b/packages/theme/dark/tiny-collapse.less deleted file mode 100644 index 22f139350..000000000 --- a/packages/theme/dark/tiny-collapse.less +++ /dev/null @@ -1,7 +0,0 @@ -.tiny-collapse { - --ti-lowcode-collapse-item-header-bg-color: #222; - --ti-lowcode-collapse-item-header-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-collapse-item-header-active-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-collapse-item-bg-color: #2f2f2f; - --ti-lowcode-collapse-item-content-color: var(--ti-lowcode-base-text-color); -} diff --git a/packages/theme/dark/tiny-dialog-box.less b/packages/theme/dark/tiny-dialog-box.less deleted file mode 100644 index 56a010ecb..000000000 --- a/packages/theme/dark/tiny-dialog-box.less +++ /dev/null @@ -1,7 +0,0 @@ -.tiny-dialog-box__wrapper { - --ti-lowcode-dialog-close-btn-color: var(--ti-lowcode-common-secondary-text-color); - --ti-lowcode-dialog-close-btn-hover-color: var(--ti-lowcode-common-primary-text-color); - --ti-lowcode-dialog-box-bg-color: #2f2f2f; - --ti-lowcode-dialog-box-body-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-dialog-header-color: var(--ti-lowcode-base-text-color); -} diff --git a/packages/theme/dark/tiny-grid.less b/packages/theme/dark/tiny-grid.less deleted file mode 100644 index 73aaeb3dc..000000000 --- a/packages/theme/dark/tiny-grid.less +++ /dev/null @@ -1,24 +0,0 @@ -.tiny-grid { - --ti-lowcode-tiny-grid-header-color: var(--ti-lowcode-toolbar-breadcrumb-color); - --ti-lowcode-tiny-grid-header-color-bg: var(--ti-lowcode-common-bg-4); - --ti-lowcode-tiny-grid-row-hover-bg: var(--ti-lowcode-common-component-bg); - // 表格checkbox非选中时边框颜色 - --ti-lowcode-tiny-grid-checkbox-border-color: #8a8e99; - // 表格checkbox选中时边框颜色 - --ti-lowcode-tiny-grid-checkbox-checked-border-color: var(--ti-lowcode-common-primary-color); - // 表格checkbox选中时背景颜色 - --ti-lowcode-tiny-grid-checkbox-checked-bg-color: #fff; - // 表格checkbox未选中时图标颜色 - --ti-lowcode-tiny-grid-checkbox-svg-color: #fff; - // 表格radio选中时颜色 - --ti-lowcode-tiny-radio-selected-svg-color: var(--ti-lowcode-common-primary-color); - // ----斑马纹表格---- - // 斑马纹表格单行背景颜色 - --ti-lowcode-stripe-grid-list-n-bg-color: #282828; - // 斑马纹表格双行背景颜色 - --ti-lowcode-stripe-grid-list-2n-bg-color: var(--ti-lowcode-common-component-bg); - // 斑马纹表格鼠标悬浮时背景颜色 - --ti-lowcode-stripe-grid-list-item-hover-bg: var(--ti-lowcode-toolbar-view-hover-bg); - // 斑马纹表格头部字体颜色 - --ti-lowcode-stripe-grid-header-text-color: #d9d9d9; -} diff --git a/packages/theme/dark/tiny-input.less b/packages/theme/dark/tiny-input.less deleted file mode 100644 index e98eefb5c..000000000 --- a/packages/theme/dark/tiny-input.less +++ /dev/null @@ -1,25 +0,0 @@ -.tiny-input { - // input 禁用边框色 - --ti-lowcode-input-disabled-border-color: #6b6b6b; - --ti-lowcode-input-disabled-bg-color: #4d4d4d; - --ti-lowcode-input-border-color: transparent; - --ti-lowcode-input-bg-color: #262626; - --ti-lowcode-input-placeholder-color: rgba(138, 142, 153, 0.6); - --ti-lowcode-input-color: #d9d9d9; - // input框focus 获焦时边框颜色 - --ti-lowcode-input-focus-border-color: var(--ti-lowcode-base-primary-color-2); - --ti-lowcode-input-hover-border-color: var(--ti-lowcode-base-primary-color-2); - --ti-lowcode-input-error-border-color: var(--ti-lowcode-base-error-color); - --ti-lowcode-input-error-bg-color: rgba(242, 48, 48, 0.1); -} - -.tiny-textarea { - --ti-lowcode-textarea-border-color: #313131; - --ti-lowcode-textarea-hover-border-color: var(--ti-lowcode-base-primary-color-2); - --ti-lowcode-textarea-input-bg-color: #262626; - --ti-lowcode-textarea-input-color: #fff; -} - -.tiny-form-item__label { - --ti-lowcode-input-label-color: var(--ti-lowcode-base-gray-20); -} diff --git a/packages/theme/dark/tiny-modal.less b/packages/theme/dark/tiny-modal.less deleted file mode 100644 index dd5bfa590..000000000 --- a/packages/theme/dark/tiny-modal.less +++ /dev/null @@ -1,10 +0,0 @@ -// 覆写组件样式 -:root .tiny-modal[class*='tiny'] { - --ti-modal-box-background-color: #2f2f2f; - --ti-modal-header-text-color: var(--ti-lowcode-base-text-color); -} -.tiny-modal { - --ti-lowcode-modal-close-btn-color: var(--ti-lowcode-common-secondary-text-color); - --ti-lowcode-modal-close-btn-hover-color: var(--ti-lowcode-common-primary-text-color); - --ti-lowcode-modal-content-color: var(--ti-lowcode-common-secondary-text-color); -} diff --git a/packages/theme/dark/tiny-notify.less b/packages/theme/dark/tiny-notify.less deleted file mode 100644 index 1a99c0d36..000000000 --- a/packages/theme/dark/tiny-notify.less +++ /dev/null @@ -1,5 +0,0 @@ -.tiny-notify { - // notify 样式 - --ti-lowcode-notify-close-color: var(--ti-lowcode-base-gray-50); - --ti-lowcode-notify-close-hover-color: var(--ti-lowcode-base-gray-80); -} diff --git a/packages/theme/dark/tiny-numeric.less b/packages/theme/dark/tiny-numeric.less deleted file mode 100644 index f2c45e001..000000000 --- a/packages/theme/dark/tiny-numeric.less +++ /dev/null @@ -1,11 +0,0 @@ -div.tiny-numeric { - --ti-numeric-input-normal-bg-color: #262626; - --ti-numeric-input-normal-border-color: var(--ti-lowcode-base-gray-60); - --ti-numeric-input-normal-text-color: var(--ti-lowcode-base-text-color); - --ti-numeric-input-border-color-active: var(--ti-lowcode-base-gray-40); - --ti-numeric-input-normal-active-border-color: var(--ti-lowcode-base-gray-40); - --ti-numeric-input-icon-color-hover: var(--ti-lowcode-base-gray-40); - - --ti-lowcode-tiny-numeric-icon-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-tiny-numeric-icon-hover-color: var(--ti-lowcode-base-gray-40); -} diff --git a/packages/theme/dark/tiny-search.less b/packages/theme/dark/tiny-search.less deleted file mode 100644 index 7380c5fa5..000000000 --- a/packages/theme/dark/tiny-search.less +++ /dev/null @@ -1,23 +0,0 @@ -#app .tiny-search { - --ti-search-input-border-color: transparent; - --ti-search-input-bg-color: #262626; - --ti-search-line-hover-border-color: #3c3c3c; - --ti-search-input-focus-border-color: #4f77ff; - --ti-search-input-text-color: #d9d9d9; -} - -.tiny-search { - // 搜索框图标颜色 - --ti-lowcode-search-icon-color: #737373; - // 搜索框图标悬浮时颜色 - --ti-lowcode-search-hover-icon-color: #d9d9d9; - // 搜索框hover背景色 - --ti-lowcode-search-hover-bg: #3c3c3c; - - // tinysearch 背景色 - --ti-lowcode-common-search-bg: var(--ti-lowcode-input-bg); - // 搜索框hover背景色 - --ti-lowcode-search-hover-bg: var(--ti-lowcode-common-component-hover-bg); - --ti-lowcode-search-input-color: #d9d9d9; - --ti-lowcode-search-input-placeholder-color: #757575; -} diff --git a/packages/theme/dark/tiny-switch.less b/packages/theme/dark/tiny-switch.less deleted file mode 100644 index 9025824c2..000000000 --- a/packages/theme/dark/tiny-switch.less +++ /dev/null @@ -1,5 +0,0 @@ -.tiny-switch { - --ti-lowcode-tiny-switch-bg-color: #c2c2c2; - --ti-lowcode-tiny-switch-checked-bg-color: var(--ti-lowcode-base-blue-6); - --ti-lowcode-tiny-switch-dot-bg: #fff; -} diff --git a/packages/theme/dark/tiny-tabs.less b/packages/theme/dark/tiny-tabs.less deleted file mode 100644 index 1b68112cf..000000000 --- a/packages/theme/dark/tiny-tabs.less +++ /dev/null @@ -1,5 +0,0 @@ -#app .tiny-tabs { - --ti-tabs-button-card-item-text-color: #a6a6a6; - --ti-tabs-button-card-item-hover-text-color: #fff; - --ti-tabs-button-card-nav-bg-color: #262626; -} diff --git a/packages/theme/dark/variable.less b/packages/theme/dark/variable.less index 9c41f746a..60779413e 100644 --- a/packages/theme/dark/variable.less +++ b/packages/theme/dark/variable.less @@ -3,17 +3,6 @@ // 基础配置，前缀为 --base --ti-common-min-width: 1280px; - // tiny vue 的 css 变量，覆盖掉就好 - .tiny-form-item { - // 错误背景色 - --ti-form-item-error-bg-color: var(--ti-lowcode-common-component-bg-69); - } - - .tiny-grid { - --ti-grid-light-color: var(--ti-lowcode-common-text-color-49); - --ti-grid-text-color: var(--ti-lowcode-common-text-color-14); - } - --ti-lowcode-trigger-color: var(--ti-lowcode-common-text-color-35); --ti-lowcode-trigger-hover-color: var(--ti-lowcode-common-text-color-14); --ti-lowcode-input-error-color: var(--ti-lowcode-common-error-color); @@ -215,6 +204,10 @@ --ti-lowcode-list-item-active-bg: var(--ti-lowcode-common-component-bg-57); // radio 按钮组激活背景色 --ti-lowcode-radio-button-active-bg: var(--ti-lowcode-common-component-bg-51); + // 属性被激活的颜色 + --ti-lowcode-property-active-color: var(--ti-lowcode-common-text-color-17); + // 属性被悬浮的颜色 + --ti-lowcode-property-hover-color: var(--ti-lowcode-common-text-color-17); // grid 布局设置按钮字体颜色 --ti-lowcode-grid-edit-color: var(--ti-lowcode-common-text-color-2); // grid 布局设置按钮背景色 @@ -391,6 +384,8 @@ // 空数据图标颜色 --ti-lowcode-empty-icon-color: var(--ti-lowcode-common-text-color-3); + // 空数据字体颜色 + --ti-lowcode-empty-text-color: var(--ti-lowcode-common-text-color-5); --ti-lowcode-popover-option-popper-border-color: var(--ti-lowcode-common-border-color-18); --ti-lowcode-toolbar-hover-popper: var(--ti-lowcode-common-text-color-3); } diff --git a/packages/theme/light/base.less b/packages/theme/light/base.less deleted file mode 100644 index db2e35310..000000000 --- a/packages/theme/light/base.less +++ /dev/null @@ -1,273 +0,0 @@ -:root { - // 灰阶 - --ti-lowcode-base-gray-0: #fff; - --ti-lowcode-base-gray-5: #fafafa; - --ti-lowcode-base-gray-10: #f5f5f5; - --ti-lowcode-base-gray-20: #f0f0f0; - --ti-lowcode-base-gray-30: #dbdbdb; - --ti-lowcode-base-gray-40: #c2c2c2; - --ti-lowcode-base-gray-50: #808080; - --ti-lowcode-base-gray-60: #595959; - --ti-lowcode-base-gray-70: #333; - --ti-lowcode-base-gray-80: #262626; - --ti-lowcode-base-gray-90: #191919; - --ti-lowcode-base-gray-100: #000; - - // expand-red - --ti-lowcode-base-red-1: #ffeae8; - --ti-lowcode-base-red-2: #fccdca; - --ti-lowcode-base-red-3: #faa9a5; - --ti-lowcode-base-red-4: #fa8682; - --ti-lowcode-base-red-5: #f76360; - --ti-lowcode-base-red-6: #f23030; - --ti-lowcode-base-red-7: #cc272a; - --ti-lowcode-base-red-8: #a3171c; - --ti-lowcode-base-red-9: #78080e; - --ti-lowcode-base-red-10: #4d0005; - --ti-lowcode-base-red-11: #a64242; - --ti-lowcode-base-red-12: #d4827f; - --ti-lowcode-base-red-13: #f2c5c2; - - // expand-orange - --ti-lowcode-base-orange-1: #fff5e8; - --ti-lowcode-base-orange-2: #fcdfb8; - --ti-lowcode-base-orange-3: #fcc98b; - --ti-lowcode-base-orange-4: #fcb25c; - --ti-lowcode-base-orange-5: #ff9a2e; - --ti-lowcode-base-orange-6: #ff8800; - --ti-lowcode-base-orange-7: #d96900; - --ti-lowcode-base-orange-8: #a64d00; - --ti-lowcode-base-orange-9: #733400; - --ti-lowcode-base-orange-10: #4d2201; - --ti-lowcode-base-orange-11: #9e6d3f; - --ti-lowcode-base-orange-12: #d6a981; - --ti-lowcode-base-orange-13: #f2d8c2; - - // expand-yellow - --ti-lowcode-base-yellow-1: #fcf9eb; - --ti-lowcode-base-yellow-2: #fcf0c2; - --ti-lowcode-base-yellow-3: #fae396; - --ti-lowcode-base-yellow-4: #f7d56d; - --ti-lowcode-base-yellow-5: #f7c845; - --ti-lowcode-base-yellow-6: #fcbe1e; - --ti-lowcode-base-yellow-7: #d99b0b; - --ti-lowcode-base-yellow-8: #a67711; - --ti-lowcode-base-yellow-9: #7a5202; - --ti-lowcode-base-yellow-10: #4d3200; - --ti-lowcode-base-yellow-11: #9e7e3f; - --ti-lowcode-base-yellow-12: #d4b57f; - --ti-lowcode-base-yellow-13: #e6d3b8; - - // expand-lemon - --ti-lowcode-base-lemon-1: #fcfae8; - --ti-lowcode-base-lemon-2: #fcf6c2; - --ti-lowcode-base-lemon-3: #fcf092; - --ti-lowcode-base-lemon-4: #fae969; - --ti-lowcode-base-lemon-5: #f7e04a; - --ti-lowcode-base-lemon-6: #f7d916; - --ti-lowcode-base-lemon-7: #d9bb16; - --ti-lowcode-base-lemon-8: #a38708; - --ti-lowcode-base-lemon-9: #756002; - --ti-lowcode-base-lemon-10: #4d3d00; - --ti-lowcode-base-lemon-11: #9e8f46; - --ti-lowcode-base-lemon-12: #d6c581; - --ti-lowcode-base-lemon-13: #eddfb2; - - // expand-lime - --ti-lowcode-base-lime-1: #f8fae3; - --ti-lowcode-base-lime-2: #eff5bf; - --ti-lowcode-base-lime-3: #e2ed8e; - --ti-lowcode-base-lime-4: #d5e667; - --ti-lowcode-base-lime-5: #c6de3e; - --ti-lowcode-base-lime-6: #b2d119; - --ti-lowcode-base-lime-7: #95b312; - --ti-lowcode-base-lime-8: #728c0a; - --ti-lowcode-base-lime-9: #576e05; - --ti-lowcode-base-lime-10: #3b4d00; - --ti-lowcode-base-lime-11: #808c46; - --ti-lowcode-base-lime-12: #c1cc7a; - --ti-lowcode-base-lime-13: #3b4d00; - - // expand-kelly - --ti-lowcode-base-kelly-1: #f2fae6; - --ti-lowcode-base-kelly-2: #daf2bb; - --ti-lowcode-base-kelly-3: #b9e683; - --ti-lowcode-base-kelly-4: #9edb58; - --ti-lowcode-base-kelly-5: #7dcc29; - --ti-lowcode-base-kelly-6: #5cb300; - --ti-lowcode-base-kelly-7: #4b9902; - --ti-lowcode-base-kelly-8: #3c8001; - --ti-lowcode-base-kelly-9: #2e6600; - --ti-lowcode-base-kelly-10: #1f4700; - --ti-lowcode-base-kelly-11: #628c38; - --ti-lowcode-base-kelly-12: #a2c777; - --ti-lowcode-base-kelly-13: #d2e6bb; - - // expand-green - --ti-lowcode-base-green-1: #e8fced; - --ti-lowcode-base-green-2: #bbf2c8; - --ti-lowcode-base-green-3: #82e09a; - --ti-lowcode-base-green-4: #51d675; - --ti-lowcode-base-green-5: #25c251; - --ti-lowcode-base-green-6: #00b336; - --ti-lowcode-base-green-7: #029931; - --ti-lowcode-base-green-8: #01802b; - --ti-lowcode-base-green-9: #006624; - --ti-lowcode-base-green-10: #004a1b; - --ti-lowcode-base-green-11: #3d995c; - --ti-lowcode-base-green-12: #77c78f; - --ti-lowcode-base-green-13: #b8e6c7; - - // expand-mint - --ti-lowcode-base-mint-1: #e8fcfa; - --ti-lowcode-base-mint-2: #bff5ef; - --ti-lowcode-base-mint-3: #8be8e0; - --ti-lowcode-base-mint-4: #5dded5; - --ti-lowcode-base-mint-5: #38d6ce; - --ti-lowcode-base-mint-6: #10c7c1; - --ti-lowcode-base-mint-7: #0aaba8; - --ti-lowcode-base-mint-8: #048c8c; - --ti-lowcode-base-mint-9: #046466; - --ti-lowcode-base-mint-10: #004547; - --ti-lowcode-base-mint-11: #3d9996; - --ti-lowcode-base-mint-12: #77c7c2; - --ti-lowcode-base-mint-13: #b8e6e1; - - // expand-sky - --ti-lowcode-base-sky-1: #e8f8fc; - --ti-lowcode-base-sky-2: #c4f2ff; - --ti-lowcode-base-sky-3: #9de4fa; - --ti-lowcode-base-sky-4: #79d8f7; - --ti-lowcode-base-sky-5: #58cbf5; - --ti-lowcode-base-sky-6: #33bcf2; - --ti-lowcode-base-sky-7: #1f9acf; - --ti-lowcode-base-sky-8: #1075a3; - --ti-lowcode-base-sky-9: #065278; - --ti-lowcode-base-sky-10: #00304a; - --ti-lowcode-base-sky-11: #3d7f99; - --ti-lowcode-base-sky-12: #7ab8cc; - --ti-lowcode-base-sky-13: #b6e5f2; - - // expand-blue - --ti-lowcode-base-blue-1: #e3effa; - --ti-lowcode-base-blue-2: #c4e1ff; - --ti-lowcode-base-blue-3: #99c9ff; - --ti-lowcode-base-blue-4: #68abfc; - --ti-lowcode-base-blue-5: #4191fa; - --ti-lowcode-base-blue-6: #1476ff; - --ti-lowcode-base-blue-7: #0f5ed4; - --ti-lowcode-base-blue-8: #0845a6; - --ti-lowcode-base-blue-9: #022e7a; - --ti-lowcode-base-blue-10: #001a4a; - --ti-lowcode-base-blue-11: #3d6899; - --ti-lowcode-base-blue-12: #7fa6d4; - --ti-lowcode-base-blue-13: #b6d4f2; - - // expand-indigo - --ti-lowcode-base-indigo-1: #eee8ff; - --ti-lowcode-base-indigo-2: #ddd7fa; - --ti-lowcode-base-indigo-3: #b19cf7; - --ti-lowcode-base-indigo-4: #957af5; - --ti-lowcode-base-indigo-5: #6e51e0; - --ti-lowcode-base-indigo-6: #512fd6; - --ti-lowcode-base-indigo-7: #391eb0; - --ti-lowcode-base-indigo-8: #27108f; - --ti-lowcode-base-indigo-9: #19056e; - --ti-lowcode-base-indigo-10: #0e004d; - --ti-lowcode-base-indigo-11: #584d99; - --ti-lowcode-base-indigo-12: #847acc; - --ti-lowcode-base-indigo-13: #bbb8e6; - - // expand-purple - --ti-lowcode-base-purple-1: #f5e8ff; - --ti-lowcode-base-purple-2: #e4c5fc; - --ti-lowcode-base-purple-3: #d0a1f7; - --ti-lowcode-base-purple-4: #b878f0; - --ti-lowcode-base-purple-5: #9f53e6; - --ti-lowcode-base-purple-6: #832fd6; - --ti-lowcode-base-purple-7: #641eb0; - --ti-lowcode-base-purple-8: #4c1091; - --ti-lowcode-base-purple-9: #370673; - --ti-lowcode-base-purple-10: #20004d; - --ti-lowcode-base-purple-11: #683d99; - --ti-lowcode-base-purple-12: #a07acc; - --ti-lowcode-base-purple-13: #cbb8e6; - - // expand-pink - --ti-lowcode-base-pink-1: #fce6fb; - --ti-lowcode-base-pink-2: #fcc2f9; - --ti-lowcode-base-pink-3: #f794f2; - --ti-lowcode-base-pink-4: #eb67e6; - --ti-lowcode-base-pink-5: #e841e5; - --ti-lowcode-base-pink-6: #d91ad9; - --ti-lowcode-base-pink-7: #b50fb8; - --ti-lowcode-base-pink-8: #8f0a94; - --ti-lowcode-base-pink-9: #6b0370; - --ti-lowcode-base-pink-10: #47004d; - --ti-lowcode-base-pink-11: #993d99; - --ti-lowcode-base-pink-12: #c97acc; - --ti-lowcode-base-pink-13: #e2b8e6; - - // expand-rose - --ti-lowcode-base-rose-1: #fce6ef; - --ti-lowcode-base-rose-2: #ffc4de; - --ti-lowcode-base-rose-3: #fa9bc9; - --ti-lowcode-base-rose-4: #f56cac; - --ti-lowcode-base-rose-5: #eb4696; - --ti-lowcode-base-rose-6: #e61c81; - --ti-lowcode-base-rose-7: #b50e65; - --ti-lowcode-base-rose-8: #940a54; - --ti-lowcode-base-rose-9: #70033f; - --ti-lowcode-base-rose-10: #4d002b; - --ti-lowcode-base-rose-11: #993d6e; - --ti-lowcode-base-rose-12: #cc7aa6; - --ti-lowcode-base-rose-13: #e6b8d2; - - // 公司品牌色 - --ti-lowcode-base-brand-color: #c7000b; - - // 主色 - --ti-lowcode-base-primary-color-1: #191919; - --ti-lowcode-base-primary-color-2: #1476ff; - - // 背景色 - --ti-lowcode-base-bg: #f5f5f5; - --ti-lowcode-base-bg-1: rgba(0, 0, 0, 0.05); - --ti-lowcode-base-bg-2: #fafafa; - --ti-lowcode-base-bg-3: #191919; - --ti-lowcode-base-bg-4: #595959; - --ti-lowcode-base-bg-5: #fff; - --ti-lowcode-base-bg-6: #5959591a; - - // 文本色 - --ti-lowcode-base-text-color: #191919; - --ti-lowcode-base-text-color-1: #595959; - --ti-lowcode-base-text-color-2: #1476ff; - --ti-lowcode-base-text-color-3: #808080; - --ti-lowcode-base-text-color-4: #c2c2c2; - - // 文本链接色 - --ti-lowcode-base-text-link-color: #191919; - --ti-lowcode-base-text-link-color-1: #595959; - --ti-lowcode-base-text-link-color-2: #c2c2c2; - --ti-lowcode-base-text-link-color-3: #fff; - - // 按钮边框色 - --ti-lowcode-base-secondary-button-border-color: #595959; - --ti-lowcode-base-secondary-button-border-hover-color: #c2c2c2; - --ti-lowcode-base-default-button-border-color: #c2c2c2; - --ti-lowcode-base-default-button-border-hover-color: #191919; - --ti-lowcode-base-default-button-border-disable-color: #dbdbdb; - - // 分割线 - --ti-lowcode-base-split-color-1: rgba(0, 0, 0, 0.08); // 白色背景分割线 - --ti-lowcode-base-split-color-2: rgba(0, 0, 0, 0.15); // 灰色背景分割线 - - // 状态色 - --ti-lowcode-base-error-color: #f23030; - --ti-lowcode-base-warn-color: #ff8800; - --ti-lowcode-base-warn-color-1: #f7d916; - --ti-lowcode-base-success-color: #5cb300; - --ti-lowcode-base-prompt-color: #1476ff; - --ti-lowcode-base-invalidate-color: #ebebeb; -} diff --git a/packages/theme/light/block.less b/packages/theme/light/block.less index ecb430d3c..7aaa64370 100644 --- a/packages/theme/light/block.less +++ b/packages/theme/light/block.less @@ -2,7 +2,7 @@ // 历史备份列表 --ti-lowcode-component-block-history-list-item-border-color: var(--ti-lowcode-common-border-color-1); // 组件边框色 --ti-lowcode-component-block-history-list-item-hover-bg: var( - --ti-lowcode-common-component-hover-bg + --ti-lowcode-common-component-bg-25 ); // 组件 hover 背景 色 --ti-lowcode-component-block-history-list-item-btn-color: var( --ti-lowcode-common-secondary-text-color @@ -39,7 +39,7 @@ --ti-lowcode-component-block-list-add-group-btn-border: 1px solid var(--ti-lowcode-common-border-color-4); --ti-lowcode-component-block-list-setting-btn-color: var(--ti-lowcode-common-component-bg-10); --ti-lowcode-component-block-list-setting-btn-hover-color: var(--ti-lowcode-common-component-bg-10); - --ti-lowcode-component-block-list-add-group-btn-border-radius: var(ti-lowcode-common-radius-6); + --ti-lowcode-component-block-list-add-group-btn-border-radius: var(--ti-lowcode-common-radius-6); } .block-setting-content { diff --git a/packages/theme/light/button.less b/packages/theme/light/button.less deleted file mode 100644 index 4d23f2280..000000000 --- a/packages/theme/light/button.less +++ /dev/null @@ -1,36 +0,0 @@ -button { - // primary 按钮字体颜色 - // --ti-lowcode-button-primary-color: #fff; - --ti-lowcode-button-primary-color: var(--ti-lowcode-base-gray-0); - --ti-lowcode-button-primary-border-color: var(--ti-lowcode-base-bg-3); - --ti-lowcode-button-primary-bg-color: var(--ti-lowcode-base-bg-3); - - --ti-lowcode-button-primary-hover-color: var(--ti-lowcode-base-gray-0); - --ti-lowcode-button-primary-hover-border-color: var(--ti-lowcode-base-bg-4); - --ti-lowcode-button-primary-hover-bg-color: var(--ti-lowcode-base-bg-4); - - // button info 字体颜色 - --ti-lowcode-button-info-color: var(--ti-lowcode-base-gray-0); - --ti-lowcode-button-info-border-color: var(--ti-lowcode-base-bg-3); - --ti-lowcode-button-info-bg-color: var(--ti-lowcode-base-bg-3); - - // info 保存按钮 hover - --ti-lowcode-button-info-hover-color: var(--ti-lowcode-base-gray-0); - --ti-lowcode-button-info-hover-border-color: var(--ti-lowcode-base-bg-4); - --ti-lowcode-button-info-hover-bg-color: var(--ti-lowcode-base-bg-4); - - // 默认按钮颜色 - --ti-lowcode-button-default-color: var(--ti-lowcode-base-primary-color-1); // 默认按钮颜色 - --ti-lowcode-button-default-border-color: var(--ti-lowcode-base-secondary-button-border-color); // 默认按钮边框色 - --ti-lowcode-button-default-bg: var(--ti-lowcode-base-gray-0); - - // 按钮hover字体颜色 - --ti-lowcode-button-default-hover-color: var(--ti-lowcode-base-primary-color-1); - --ti-lowcode-button-default-hover-border-color: var(--ti-lowcode-base-secondary-button-border-hover-color); - --ti-lowcode-button-default-hover-bg: var(--ti-lowcode-base-gray-0); - - // 默认按钮禁用颜色 - --ti-lowcode-button-default-disabled-color: var(--ti-lowcode-base-text-color-4); - --ti-lowcode-button-default-disabled-border-color: transparent; - --ti-lowcode-button-default-disabled-bg: var(--ti-lowcode-base-bg-1); -} diff --git a/packages/theme/light/datasource.less b/packages/theme/light/datasource.less index 5082b633c..e07755b08 100644 --- a/packages/theme/light/datasource.less +++ b/packages/theme/light/datasource.less @@ -29,7 +29,7 @@ --ti-lowcode-datasource-description-warning-color: var(--ti-lowcode-common-component-bg-12); --ti-lowcode-datasource-error-tip-color: var(--ti-lowcode-common-error-color); --ti-lowcode-datasource-label-color: var(--ti-lowcode-common-text-color-8); // light - --ti-lowcode-datasource-list-hover-color: var(--ti-lowcode-common-component-hover-bg); + --ti-lowcode-datasource-list-hover-color: var(--ti-lowcode-common-component-bg-25); --ti-lowcode-datasource-btn-click-color: var(--ti-lowcode-common-btn-default-color); --ti-lowcode-datasource-tabs-bottom-border-color: var(--ti-lowcode-common-btn-default-border-color); --ti-lowcode-datasource-list-bottom-border-color: var(--ti-lowcode-common-component-bg-27); diff --git a/packages/theme/light/index.less b/packages/theme/light/index.less index eef6cef06..3506a54df 100644 --- a/packages/theme/light/index.less +++ b/packages/theme/light/index.less @@ -1,6 +1,4 @@ -@import '../common/base.less'; @import '../common/global.less'; -@import './base.less'; // 主题配置优先于公共配置 @import './variable.less'; @import './tutorial.less'; @@ -9,24 +7,12 @@ @import './life-cycles.less'; @import './settings.less'; @import './metaComponent.less'; -@import './button.less'; -@import './tiny-collapse.less'; -@import './tiny-modal.less'; -@import './tiny-search.less'; -@import './tiny-grid.less'; @import './events.less'; -@import './radio.less'; @import './i18n.less'; @import './pageManage.less'; @import './materials.less'; @import './tree.less'; @import './canvas.less'; -@import './tiny-dialog-box.less'; -@import './tiny-input.less'; -@import './tiny-switch.less'; -@import './tiny-search.less'; -@import './tiny-numeric.less'; -@import './tiny-notify.less'; @import './bridge.less'; @import './toolbar.less'; @import './datasource.less'; diff --git a/packages/theme/light/pageManage.less b/packages/theme/light/pageManage.less index cacebda54..f272c90ed 100644 --- a/packages/theme/light/pageManage.less +++ b/packages/theme/light/pageManage.less @@ -10,8 +10,8 @@ --ti-lowcode-page-manage-content-tips-color: var(--ti-lowcode-common-text-color-5); --ti-lowcode-page-manage-search-border-color: var(--ti-lowcode-common-border-color-8); --ti-lowcode-page-manage-tree-color: var(--ti-lowcode-common-text-main-color); - --ti-lowcode-page-manage-page-tree-background-active-color: var(--ti-lowcode-common-component-hover-bg); - --ti-lowcode-page-manage-page-tree-background-hover-color: var(--ti-lowcode-common-component-hover-bg); + --ti-lowcode-page-manage-page-tree-background-active-color: var(--ti-lowcode-common-component-bg-25); + --ti-lowcode-page-manage-page-tree-background-hover-color: var(--ti-lowcode-common-component-bg-25); --ti-lowcode-page-manage-svg-hover-color: var(--ti-lowcode-common-component-bg-10); --ti-lowcode-page-manage-text-color: var(--ti-lowcode-common-text-color-8); --ti-lowcode-page-manage-input-head-text-color: var(--ti-lowcode-common-primary-text-color); @@ -20,7 +20,7 @@ --ti-lowcode-page-manage-error-color: var(--ti-lowcode-common-error-color); --ti-lowcode-page-manage-input-group-color: var(--ti-lowcode-common-component-bg-2); --ti-lowcode-page-manage-input-group-border-color: var(--ti-lowcode-common-border-color-4); - --ti-lowcode-page-manage-input-group-border-right-color: var(--ti-lowcode-common-component-hover-bg); + --ti-lowcode-page-manage-input-group-border-right-color: var(--ti-lowcode-common-component-bg-25); --ti-lowcode-page-manage-input-output-text-color: var(--ti-lowcode-common-text-color-8); --ti-lowcode-page-manage-input-output-text-bg-color: var(--ti-lowcode-common-component-bg-9); } diff --git a/packages/theme/light/radio.less b/packages/theme/light/radio.less deleted file mode 100644 index b93c1e4e0..000000000 --- a/packages/theme/light/radio.less +++ /dev/null @@ -1,6 +0,0 @@ -.tiny-radio-group { - --ti-lowcode-tiny-radio-button-bg: var(--ti-lowcode-base-gray-0); - --ti-lowcode-tiny-radio-button-checked-bg: var(--ti-lowcode-base-bg-3); - --ti-lowcode-radio-button-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-radio-button-border-color: var(--ti-lowcode-base-secondary-button-border-color); -} diff --git a/packages/theme/light/tiny-collapse.less b/packages/theme/light/tiny-collapse.less deleted file mode 100644 index 84df15bb4..000000000 --- a/packages/theme/light/tiny-collapse.less +++ /dev/null @@ -1,7 +0,0 @@ -.tiny-collapse { - --ti-lowcode-collapse-item-header-bg-color: var(--ti-lowcode-base-bg-1); - --ti-lowcode-collapse-item-header-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-collapse-item-header-active-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-collapse-item-bg-color: var(--ti-lowcode-base-bg-5); - --ti-lowcode-collapse-item-content-color: var(--ti-lowcode-base-text-color); -} diff --git a/packages/theme/light/tiny-dialog-box.less b/packages/theme/light/tiny-dialog-box.less deleted file mode 100644 index 25f4c180b..000000000 --- a/packages/theme/light/tiny-dialog-box.less +++ /dev/null @@ -1,7 +0,0 @@ -.tiny-dialog-box__wrapper { - --ti-lowcode-dialog-box-bg-color: var(--ti-lowcode-base-bg-5); - --ti-lowcode-dialog-close-btn-color: var(--ti-lowcode-base-gray-50); - --ti-lowcode-dialog-close-btn-hover-color: var(--ti-lowcode-base-gray-90); - --ti-lowcode-dialog-box-body-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-dialog-header-color: var(--ti-lowcode-base-text-color); -} diff --git a/packages/theme/light/tiny-grid.less b/packages/theme/light/tiny-grid.less deleted file mode 100644 index a6db2b09a..000000000 --- a/packages/theme/light/tiny-grid.less +++ /dev/null @@ -1,24 +0,0 @@ -.tiny-grid { - --ti-lowcode-tiny-grid-header-color: var(--ti-lowcode-toolbar-breadcrumb-color); - --ti-lowcode-tiny-grid-header-color-bg: #f2f2f2; - --ti-lowcode-tiny-grid-row-hover-bg: #f2f5fc; - // 表格checkbox非选中时边框颜色 - --ti-lowcode-tiny-grid-checkbox-border-color: transparent; - // 表格checkbox选中时边框颜色 - --ti-lowcode-tiny-grid-checkbox-checked-border-color: transparent; - // 表格checkbox选中时背景颜色 - --ti-lowcode-tiny-grid-checkbox-checked-bg-color: transparent; - // 表格checkbox未选中时图标颜色 - --ti-lowcode-tiny-grid-checkbox-svg-color: #c2c2c2; - // 表格radio选中时颜色 - --ti-lowcode-tiny-radio-selected-svg-color: var(--ti-lowcode-common-primary-text-color); - // ----斑马纹表格---- - // 斑马纹表格单行背景颜色 - --ti-lowcode-stripe-grid-list-n-bg-color: var(--ti-lowcode-base-bg-5); - // 斑马纹表格双行背景颜色 - --ti-lowcode-stripe-grid-list-2n-bg-color: var(--ti-lowcode-base-bg-5); - // 斑马纹表格鼠标悬浮时背景颜色 - --ti-lowcode-stripe-grid-list-item-hover-bg: var(--ti-lowcode-base-bg); - // 斑马纹表格头部字体颜色 - --ti-lowcode-stripe-grid-header-text-color: #595959; -} diff --git a/packages/theme/light/tiny-input.less b/packages/theme/light/tiny-input.less deleted file mode 100644 index 4c0984357..000000000 --- a/packages/theme/light/tiny-input.less +++ /dev/null @@ -1,24 +0,0 @@ -.tiny-input { - // input 禁用边框色 - --ti-lowcode-input-disabled-border-color: var(--ti-lowcode-base-gray-30); - --ti-lowcode-input-disabled-bg-color: var(--ti-lowcode-base-bg-1); - --ti-lowcode-input-border-color: var(--ti-lowcode-base-gray-40); - --ti-lowcode-input-bg-color: var(--ti-lowcode-base-bg-5); - --ti-lowcode-input-placeholder-color: var(--ti-lowcode-base-gray-50); - --ti-lowcode-input-color: var(--ti-lowcode-base-text-color); - // input框focus 获焦时边框颜色 - --ti-lowcode-input-focus-border-color: var(--ti-lowcode-base-gray-90); - --ti-lowcode-input-hover-border-color: var(--ti-lowcode-base-gray-90); - --ti-lowcode-input-error-border-color: var(--ti-lowcode-base-error-color); - --ti-lowcode-input-error-bg-color: rgba(242, 48, 48, 0.1); -} - -.tiny-textarea { - --ti-lowcode-textarea-border-color: var(--ti-lowcode-base-gray-40); - --ti-lowcode-textarea-hover-border-color: var(--ti-lowcode-base-gray-90); - --ti-lowcode-textarea-input-bg-color: var(--ti-lowcode-base-gray-0); - --ti-lowcode-textarea-input-color: var(--ti-lowcode-base-text-color); -} -.tiny-form-item__label { - --ti-lowcode-input-label-color: var(--ti-lowcode-base-text-color-1); -} diff --git a/packages/theme/light/tiny-modal.less b/packages/theme/light/tiny-modal.less deleted file mode 100644 index 6b6068c47..000000000 --- a/packages/theme/light/tiny-modal.less +++ /dev/null @@ -1,5 +0,0 @@ -.tiny-modal { - --ti-lowcode-modal-close-btn-color: var(--ti-lowcode-base-text-color-3); - --ti-lowcode-modal-close-btn-hover-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-modal-content-color: var(--ti-lowcode-base-text-color-1); -} diff --git a/packages/theme/light/tiny-notify.less b/packages/theme/light/tiny-notify.less deleted file mode 100644 index 6dbb0f86c..000000000 --- a/packages/theme/light/tiny-notify.less +++ /dev/null @@ -1,5 +0,0 @@ -.tiny-notify { - // notify 样式 - --ti-lowcode-notify-close-color: var(--ti-lowcode-base-gray-50); - --ti-lowcode-notify-close-hover-color: var(--ti-lowcode-base-gray-90); -} diff --git a/packages/theme/light/tiny-numeric.less b/packages/theme/light/tiny-numeric.less deleted file mode 100644 index 7ced7418d..000000000 --- a/packages/theme/light/tiny-numeric.less +++ /dev/null @@ -1,4 +0,0 @@ -div.tiny-numeric { - --ti-lowcode-tiny-numeric-icon-color: var(--ti-lowcode-base-gray-90); - --ti-lowcode-tiny-numeric-icon-hover-color: var(--ti-lowcode-base-gray-50); -} diff --git a/packages/theme/light/tiny-search.less b/packages/theme/light/tiny-search.less deleted file mode 100644 index 9df981c84..000000000 --- a/packages/theme/light/tiny-search.less +++ /dev/null @@ -1,14 +0,0 @@ -.tiny-search { - // 搜索框图标颜色 - --ti-lowcode-search-icon-color: #808080; - // 搜索框图标悬浮时颜色 - --ti-lowcode-search-hover-icon-color: #191919; - - // tinysearch 背景色 - --ti-lowcode-common-search-bg: var(--ti-lowcode-base-bg-5); - - // 搜索框hover背景色 - --ti-lowcode-search-hover-bg: var(--ti-lowcode-base-bg-5); - --ti-lowcode-search-input-color: var(--ti-lowcode-base-text-color); - --ti-lowcode-search-input-placeholder-color: var(--ti-lowcode-base-gray-50); -} diff --git a/packages/theme/light/tiny-switch.less b/packages/theme/light/tiny-switch.less deleted file mode 100644 index f0590cade..000000000 --- a/packages/theme/light/tiny-switch.less +++ /dev/null @@ -1,5 +0,0 @@ -.tiny-switch { - --ti-lowcode-tiny-switch-bg-color: #c2c2c2; - --ti-lowcode-tiny-switch-checked-bg-color: var(--ti-lowcode-base-blue-6); - --ti-lowcode-tiny-switch-dot-bg: var(--ti-lowcode-base-bg-5); -} diff --git a/packages/theme/light/tree.less b/packages/theme/light/tree.less index 306652800..f19c4927b 100644 --- a/packages/theme/light/tree.less +++ b/packages/theme/light/tree.less @@ -1,6 +1,6 @@ .outlinebox { --ti-lowcode-tree-color: var(--ti-lowcode-common-primary-text-color); - --ti-lowcode-tree-icon-color: var(--ti-lowcode-common-primary-text-color); + --ti-lowcode-tree-icon-color: var(--ti-lowcode-common-text-color-5); --ti-lowcode-tree-icon-hover-color: var(--ti-lowcode-common-text-color-6); --ti-lowcode-tree-selected-color: var(--ti-lowcode-common-text-color-6); --ti-lowcode-tree-selected-bg: var(--ti-lowcode-common-component-bg-1); diff --git a/packages/theme/light/variable.less b/packages/theme/light/variable.less index 8d1e965e2..3b6774e51 100644 --- a/packages/theme/light/variable.less +++ b/packages/theme/light/variable.less @@ -26,7 +26,7 @@ // 物料-组件列表 --ti-lowcode-material-component-list-border-color: var(--ti-lowcode-common-border-color-1); - --ti-lowcode-material-component-list-hover-bg: var(--ti-lowcode-common-component-hover-bg); + --ti-lowcode-material-component-list-hover-bg: var(--ti-lowcode-common-component-bg-25); // 页面管理 --ti-lowcode-page-tree-color: var(--ti-lowcode-common-text-main-color); @@ -187,6 +187,10 @@ --ti-lowcode-list-item-active-bg: var(--ti-lowcode-common-component-bg-20); // radio 按钮组激活背景色 --ti-lowcode-radio-button-active-bg: var(--ti-lowcode-common-component-bg-31); + // 属性被激活的颜色 + --ti-lowcode-property-active-color: var(--ti-lowcode-common-text-color-17); + // 属性被悬浮的颜色 + --ti-lowcode-property-hover-color: var(--ti-lowcode-common-text-color-17); // grid 布局设置按钮字体颜色 --ti-lowcode-grid-edit-color: var(--ti-lowcode-common-text-color-15); // grid 布局设置按钮背景色 @@ -364,6 +368,8 @@ --ti-lowcode-optionitem-background-color: var(--ti-lowcode-common-component-bg-2); // 空数据图标颜色 --ti-lowcode-empty-icon-color: var(--ti-lowcode-common-color-unset); + // 空数据字体颜色 + --ti-lowcode-empty-text-color: var(--ti-lowcode-common-text-color-5); --ti-lowcode-popover-option-popper-border-color: var(--ti-lowcode-common-border-color-18); --ti-lowcode-toolbar-hover-popper: var(--ti-lowcode-common-text-color-18); } From ec507c362c65c06b7a2526d7784d7521ec2ae091 Mon Sep 17 00:00:00 2001 From: James-9696 Date: Fri, 23 Aug 2024 01:53:15 -0700 Subject: [PATCH 14/14] fix: modify theme-base --- packages/theme/dark/index.less | 1 - packages/theme/light/index.less | 1 - 2 files changed, 2 deletions(-) diff --git a/packages/theme/dark/index.less b/packages/theme/dark/index.less index a54353b9c..8fdcaa2be 100644 --- a/packages/theme/dark/index.less +++ b/packages/theme/dark/index.less @@ -1,4 +1,3 @@ -@import '../common/global.less'; // 主题配置优先于公共配置 @import './variable.less'; @import './block.less'; diff --git a/packages/theme/light/index.less b/packages/theme/light/index.less index 3506a54df..66a84d889 100644 --- a/packages/theme/light/index.less +++ b/packages/theme/light/index.less @@ -1,4 +1,3 @@ -@import '../common/global.less'; // 主题配置优先于公共配置 @import './variable.less'; @import './tutorial.less';