From dcff211293646e2742bb412afaf44cff53ce6d74 Mon Sep 17 00:00:00 2001 From: wenmine Date: Wed, 25 Sep 2024 09:39:49 +0800 Subject: [PATCH 01/14] feat(theme): component style && common theme --- packages/design-core/src/init.js | 6 +- packages/theme/base/package.json | 3 +- packages/theme/base/src/base.js | 301 --- packages/theme/base/src/base.less | 514 +++++ packages/theme/base/src/common.less | 96 + packages/theme/base/src/component-common.less | 759 +++++++ packages/theme/base/src/dark-component.js | 20 - packages/theme/base/src/dark/dark-common.js | 39 + packages/theme/base/src/index.js | 33 +- packages/theme/base/src/light-component.js | 20 - packages/theme/base/src/light/light-common.js | 40 + .../src/page/base-config-page.less} | 90 +- packages/theme/base/src/var-component.less | 15 + packages/theme/common/global.less | 1958 ----------------- packages/theme/dark/index.less | 17 - 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/light/canvas.less | 34 +- packages/theme/light/index.less | 15 - packages/theme/light/radio.less | 6 - packages/theme/light/settings.less | 2 +- 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 - 40 files changed, 1555 insertions(+), 2676 deletions(-) delete mode 100644 packages/theme/base/src/base.js create mode 100644 packages/theme/base/src/base.less create mode 100644 packages/theme/base/src/common.less create mode 100644 packages/theme/base/src/component-common.less delete mode 100644 packages/theme/base/src/dark-component.js create mode 100644 packages/theme/base/src/dark/dark-common.js delete mode 100644 packages/theme/base/src/light-component.js create mode 100644 packages/theme/base/src/light/light-common.js 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/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/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/design-core/src/init.js b/packages/design-core/src/init.js index 065ffa3c2..b1aede90f 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 { tinyEngineThemeLight } from '@opentiny/tiny-engine-theme-base' +import { defaultThemeList } from '@opentiny/tiny-engine-theme-base' import { defineEntry, mergeRegistry, @@ -51,8 +51,10 @@ const defaultLifeCycles = { initHttp({ env: import.meta.env }) + const theme = newRegistry.config.theme || 'light' // eslint-disable-next-line no-new - new TinyThemeTool(tinyEngineThemeLight, 'tinyEngineTheme') // 初始化主题 + new TinyThemeTool(defaultThemeList[theme], defaultThemeList[theme]?.id) + document.documentElement?.setAttribute?.('data-theme', theme) 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/package.json b/packages/theme/base/package.json index 75e7301b1..74583fd7a 100644 --- a/packages/theme/base/package.json +++ b/packages/theme/base/package.json @@ -1,6 +1,6 @@ { "name": "@opentiny/tiny-engine-theme-base", - "version": "2.0.0-alpha.1", + "version": "1.0.0", "publishConfig": { "access": "public" }, @@ -22,6 +22,7 @@ "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 deleted file mode 100644 index 5e6ba2504..000000000 --- a/packages/theme/base/src/base.js +++ /dev/null @@ -1,301 +0,0 @@ -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/base.less b/packages/theme/base/src/base.less new file mode 100644 index 000000000..4361e7c7f --- /dev/null +++ b/packages/theme/base/src/base.less @@ -0,0 +1,514 @@ +:root { + // 透明色 + --te-base-color-transparent: transparent; + --te-base-color-inherit: inherit; + --te-base-color-unset: unset; + + // 灰阶 + --te-base-gray-1: #fff; + --te-base-gray-2: #fafafa; + --te-base-gray-3: #f2f2f2; + --te-base-gray-4: #f2f5fc; + --te-base-gray-5: #f5f5f5; + --te-base-gray-6: #f0f0f0; + --te-base-gray-7: #e6e6e6; + --te-base-gray-8: #eeeeee; + --te-base-gray-9: #dfe1e6; + --te-base-gray-10: #e3e3e3; + --te-base-gray-11: #ebebeb; + --te-base-gray-12: #d9d9d9; + --te-base-gray-13: #dbdbdb; + --te-base-gray-14: #e5e5e5; + --te-base-gray-15: #e9e9e9; + --te-base-gray-16: #b9b9b9; + --te-base-gray-17: #ccc; + --te-base-gray-18: #c2c2c2; + --te-base-gray-19: #afafaf; + --te-base-gray-20: #ababab; + --te-base-gray-21: #adb0b8; + --te-base-gray-22: #1476ff1a; + --te-base-gray-23: #a6a6a6; + --te-base-gray-24: #a7aab2; + --te-base-gray-25: #4d4d4d; + --te-base-gray-26: #464c59; + --te-base-gray-27: #5a5a5a; + --te-base-gray-28: #555; + --te-base-gray-29: #5e5e5e; + --te-base-gray-30: #575d6c; + --te-base-gray-31: #595959; + --te-base-gray-32: #666; + --te-base-gray-33: #6a6a6a; + --te-base-gray-34: #6b6b6b; + --te-base-gray-35: #606165; + --te-base-gray-36: #dddddd; + --te-base-gray-37: #cbcbcb; + --te-base-gray-38: #626262; + --te-base-gray-39: #737373; + --te-base-gray-40: #757575; + --te-base-gray-41: #888; + --te-base-gray-42: #8d8d8d; + --te-base-gray-43: #808080; + --te-base-gray-44: #8a8e99; + --te-base-gray-45: #9a9a9a; + --te-base-gray-46: #999; + --te-base-gray-47: #9d9d9d; + --te-base-gray-48: #9f9f9f; + --te-base-gray-49: #999999; + --te-base-gray-50: #8a887b; + --te-base-gray-51: #f3f3f3; + --te-base-gray-52: #d1d1d1; + --te-base-gray-53: #bdbdbd; + --te-base-gray-54: #dfdfdf; + --te-base-gray-55: #bfbfbf; + --te-base-gray-56: #b5b5b5; + --te-base-gray-57: #f3f3f5; + --te-base-gray-58: #919191; + --te-base-gray-59: #e7e8e9; + --te-base-gray-60: #9e9e9e; + --te-base-gray-61: #63666c; + --te-base-gray-62: #858585; + --te-base-gray-63: #f6eeee; + --te-base-gray-64: #f0f1f5; + --te-base-gray-65: #b4b5b8; + --te-base-gray-66: #8b8c8f; + --te-base-gray-67: #4d4e52; + --te-base-gray-68: #36383d; + --te-base-gray-69: #2b2d33; + + // black + --te-base-dark-1: #1f1f1f; + --te-base-dark-2: #1a1a1a; + --te-base-dark-3: #141414; + --te-base-dark-4: #191818; + --te-base-dark-5: #191919; + --te-base-dark-6: #202020; + --te-base-dark-7: #2e2e2e; + --te-base-dark-8: #2f2f2f; + --te-base-dark-9: #212121; + --te-base-dark-10: #232323; + --te-base-dark-11: #252b3a; + --te-base-dark-12: #2b2b2b; + --te-base-dark-13: #262626; + --te-base-dark-14: #222; + --te-base-dark-15: #323644; + --te-base-dark-16: #1e1e1e; + --te-base-dark-17: #292929; + --te-base-dark-18: #3c3c3c; + --te-base-dark-19: #313131; + --te-base-dark-20: #333; + --te-base-dark-21: #363636; + --te-base-dark-22: #404040; + --te-base-dark-23: #414141; + --te-base-dark-24: #433535; + --te-base-dark-25: #041320; + --te-base-dark-26: #000; + --te-base-dark-27: #212329; + --te-base-dark-28: #1d312a; + --te-base-dark-29: #2a2c31; + + // expand-red + --te-base-red-1: #ffeae8; + --te-base-red-2: #fccdca; + --te-base-red-3: #faa9a5; + --te-base-red-4: #fa8682; + --te-base-red-5: #f76360; + --te-base-red-6: #f23030; + --te-base-red-7: #cc272a; + --te-base-red-8: #a3171c; + --te-base-red-9: #78080e; + --te-base-red-10: #4d0005; + --te-base-red-11: #a64242; + --te-base-red-12: #d4827f; + --te-base-red-13: #f2c5c2; + --te-base-red-14: #c7000b; + --te-base-red-15: #fce3e1; + --te-base-red-16: #feeaeb; + --te-base-red-17: #dc544f; + --te-base-red-18: #ff0000; + --te-base-red-19: #ea384c; + --te-base-red-20: #c92c3f; + --te-base-red-21: #de504e; + + // expand-orange + --te-base-orange-1: #fff5e8; + --te-base-orange-2: #fcdfb8; + --te-base-orange-3: #fcc98b; + --te-base-orange-4: #fcb25c; + --te-base-orange-5: #ff9a2e; + --te-base-orange-6: #ff8800; + --te-base-orange-7: #d96900; + --te-base-orange-8: #a64d00; + --te-base-orange-9: #733400; + --te-base-orange-10: #4d2201; + --te-base-orange-11: #9e6d3f; + --te-base-orange-12: #d6a981; + --te-base-orange-13: #f2d8c2; + --te-base-orange-14: #fa9841; + --te-base-orange-15: #facb4b; + --te-base-orange-16: #ffb100; + + // expand-yellow + --te-base-yellow-1: #fcf9eb; + --te-base-yellow-2: #fcf0c2; + --te-base-yellow-3: #fae396; + --te-base-yellow-4: #f7d56d; + --te-base-yellow-5: #f7c845; + --te-base-yellow-6: #fcbe1e; + --te-base-yellow-7: #d99b0b; + --te-base-yellow-8: #a67711; + --te-base-yellow-9: #7a5202; + --te-base-yellow-10: #4d3200; + --te-base-yellow-11: #9e7e3f; + --te-base-yellow-12: #d4b57f; + --te-base-yellow-13: #e6d3b8; + --te-base-yellow-14: #501c1c; + --te-base-yellow-15: #8d5421; + + // expand-lemon + --te-base-lemon-1: #fcfae8; + --te-base-lemon-2: #fcf6c2; + --te-base-lemon-3: #fcf092; + --te-base-lemon-4: #fae969; + --te-base-lemon-5: #f7e04a; + --te-base-lemon-6: #f7d916; + --te-base-lemon-7: #d9bb16; + --te-base-lemon-8: #a38708; + --te-base-lemon-9: #756002; + --te-base-lemon-10: #4d3d00; + --te-base-lemon-11: #9e8f46; + --te-base-lemon-12: #d6c581; + --te-base-lemon-13: #eddfb2; + + // expand-lime + --te-base-lime-1: #f8fae3; + --te-base-lime-2: #eff5bf; + --te-base-lime-3: #e2ed8e; + --te-base-lime-4: #d5e667; + --te-base-lime-5: #c6de3e; + --te-base-lime-6: #b2d119; + --te-base-lime-7: #95b312; + --te-base-lime-8: #728c0a; + --te-base-lime-9: #576e05; + --te-base-lime-10: #3b4d00; + --te-base-lime-11: #808c46; + --te-base-lime-12: #c1cc7a; + --te-base-lime-13: #3b4d00; + + // expand-kelly + --te-base-kelly-1: #f2fae6; + --te-base-kelly-2: #daf2bb; + --te-base-kelly-3: #b9e683; + --te-base-kelly-4: #9edb58; + --te-base-kelly-5: #7dcc29; + --te-base-kelly-6: #5cb300; + --te-base-kelly-7: #4b9902; + --te-base-kelly-8: #3c8001; + --te-base-kelly-9: #2e6600; + --te-base-kelly-10: #1f4700; + --te-base-kelly-11: #628c38; + --te-base-kelly-12: #a2c777; + --te-base-kelly-13: #d2e6bb; + + // expand-green + --te-base-green-1: #e8fced; + --te-base-green-2: #bbf2c8; + --te-base-green-3: #82e09a; + --te-base-green-4: #51d675; + --te-base-green-5: #25c251; + --te-base-green-6: #00b336; + --te-base-green-7: #029931; + --te-base-green-8: #01802b; + --te-base-green-9: #006624; + --te-base-green-10: #004a1b; + --te-base-green-11: #3d995c; + --te-base-green-12: #77c78f; + --te-base-green-13: #b8e6c7; + --te-base-green-14: #e6f2d5; + --te-base-green-15: #2ad986; + + // expand-mint + --te-base-mint-1: #e8fcfa; + --te-base-mint-2: #bff5ef; + --te-base-mint-3: #8be8e0; + --te-base-mint-4: #5dded5; + --te-base-mint-5: #38d6ce; + --te-base-mint-6: #10c7c1; + --te-base-mint-7: #0aaba8; + --te-base-mint-8: #048c8c; + --te-base-mint-9: #046466; + --te-base-mint-10: #004547; + --te-base-mint-11: #3d9996; + --te-base-mint-12: #77c7c2; + --te-base-mint-13: #b8e6e1; + --te-base-mint-14: #50d4ab; + + // expand-sky + --te-base-sky-1: #e8f8fc; + --te-base-sky-2: #c4f2ff; + --te-base-sky-3: #9de4fa; + --te-base-sky-4: #79d8f7; + --te-base-sky-5: #58cbf5; + --te-base-sky-6: #33bcf2; + --te-base-sky-7: #1f9acf; + --te-base-sky-8: #1075a3; + --te-base-sky-9: #065278; + --te-base-sky-10: #00304a; + --te-base-sky-11: #3d7f99; + --te-base-sky-12: #7ab8cc; + --te-base-sky-13: #b6e5f2; + + // expand-blue + --te-base-blue-1: #e3effa; + --te-base-blue-2: #c4e1ff; + --te-base-blue-3: #99c9ff; + --te-base-blue-4: #68abfc; + --te-base-blue-5: #4191fa; + --te-base-blue-6: #1476ff; + --te-base-blue-7: #0f5ed4; + --te-base-blue-8: #0845a6; + --te-base-blue-9: #022e7a; + --te-base-blue-10: #001a4a; + --te-base-blue-11: #3d6899; + --te-base-blue-12: #7fa6d4; + --te-base-blue-13: #b6d4f2; + --te-base-blue-14: #4f77ff; + --te-base-blue-15: #3961eb; + --te-base-blue-16: #7693f5; + --te-base-blue-17: #526ecc; + --te-base-blue-18: #deecff; + --te-base-blue-19: #5073e5; + --te-base-blue-20: #5e7ce0; + --te-base-blue-21: #6bb0ff; + --te-base-blue-22: #006cff; + --te-base-blue-23: #8bbefa; + --te-base-blue-24: #476be5; + + // expand-indigo + --te-base-indigo-1: #eee8ff; + --te-base-indigo-2: #ddd7fa; + --te-base-indigo-3: #b19cf7; + --te-base-indigo-4: #957af5; + --te-base-indigo-5: #6e51e0; + --te-base-indigo-6: #512fd6; + --te-base-indigo-7: #391eb0; + --te-base-indigo-8: #27108f; + --te-base-indigo-9: #19056e; + --te-base-indigo-10: #0e004d; + --te-base-indigo-11: #584d99; + --te-base-indigo-12: #847acc; + --te-base-indigo-13: #bbb8e6; + --te-base-indigo-14: #a790ff; + + // expand-purple + --te-base-purple-1: #f5e8ff; + --te-base-purple-2: #e4c5fc; + --te-base-purple-3: #d0a1f7; + --te-base-purple-4: #b878f0; + --te-base-purple-5: #9f53e6; + --te-base-purple-6: #832fd6; + --te-base-purple-7: #641eb0; + --te-base-purple-8: #4c1091; + --te-base-purple-9: #370673; + --te-base-purple-10: #20004d; + --te-base-purple-11: #683d99; + --te-base-purple-12: #a07acc; + --te-base-purple-13: #cbb8e6; + --te-base-purple-14: #f0edfc; + + // expand-pink + --te-base-pink-1: #fce6fb; + --te-base-pink-2: #fcc2f9; + --te-base-pink-3: #f794f2; + --te-base-pink-4: #eb67e6; + --te-base-pink-5: #e841e5; + --te-base-pink-6: #d91ad9; + --te-base-pink-7: #b50fb8; + --te-base-pink-8: #8f0a94; + --te-base-pink-9: #6b0370; + --te-base-pink-10: #47004d; + --te-base-pink-11: #993d99; + --te-base-pink-12: #c97acc; + --te-base-pink-13: #e2b8e6; + + // expand-rose + --te-base-rose-1: #fce6ef; + --te-base-rose-2: #ffc4de; + --te-base-rose-3: #fa9bc9; + --te-base-rose-4: #f56cac; + --te-base-rose-5: #eb4696; + --te-base-rose-6: #e61c81; + --te-base-rose-7: #b50e65; + --te-base-rose-8: #940a54; + --te-base-rose-9: #70033f; + --te-base-rose-10: #4d002b; + --te-base-rose-11: #993d6e; + --te-base-rose-12: #cc7aa6; + --te-base-rose-13: #e6b8d2; + --te-base-rose-14: #f66f6a; + + // 公司品牌色 + --te-base-brand-color: #c7000b; + + // 主色 + --te-base-primary-color-1: #191919; + --te-base-primary-color-2: #1476ff; + + // 背景色 + --te-base-bg: #f5f5f5; + --te-base-bg-1: rgba(0, 0, 0, 0.05); + --te-base-bg-2: #fafafa; + --te-base-bg-3: #191919; + --te-base-bg-4: #595959; + --te-base-bg-5: #fff; + --te-base-bg-6: #5959591a; + --te-base-bg-7: rgba(0, 255, 0, 0.1); + --te-base-bg-8: rgba(242, 48, 48, 0.3); + --te-base-dark-bg: #141414; + --te-base-dark-bg-2: #333; + --te-base-dark-bg-3: #e6e6e6; + --te-base-dark-bg-4: #a6a6a6; + --te-base-dark-bg-5: #000; + --te-base-dark-bg-6: #a6a6a61a; + --te-base-dark-bg-7: rgba(255, 255, 255, 0.1); + + // 文本色 + --te-base-text-color: #191919; + --te-base-text-color-1: #595959; + --te-base-text-color-2: #1476ff; + --te-base-text-color-3: #808080; + --te-base-text-color-4: #c2c2c2; + --te-base-dark-text-color: #e6e6e6; + --te-base-dark-text-color-1: #a6a6a6; + + // 文本链接色 + --te-base-text-link-color: #191919; + --te-base-text-link-color-1: #595959; + --te-base-text-link-color-2: #c2c2c2; + --te-base-text-link-color-3: #fff; + --te-base-dark-text-link-color: #e6e6e6; + --te-base-dark-text-link-color-1: #a6a6a6; + + // 按钮边框色 + --te-base-button-border-none: none; + --te-base-secondary-button-border-color: #595959; + --te-base-secondary-button-border-hover-color: #c2c2c2; + --te-base-default-button-border-color: #c2c2c2; + --te-base-default-button-border-disable-color: #dbdbdb; + --te-base-dark-secondary-button-border-color: #a6a6a6; + --te-base-dark-secondary-button-border-hover-color: #3d3d3d; + --te-base-dark-default-button-border-hover-color: #e6e6e6; + + // 分割线 + --te-base-split-color-1: rgba(0, 0, 0, 0.08); // 白色背景分割线 + --te-base-split-color-2: rgba(0, 0, 0, 0.15); // 灰色背景分割线 + --te-base-dark-split-color-1: rgba(255, 255, 255, 0.08); // 白色背景分割线 + --te-base-dark-split-color-2: rgba(255, 255, 255, 0.15); + + // rgba + --te-base-rgba-1: rgba(0, 0, 0, 0.2); + --te-base-rgba-2: rgba(0, 0, 0, 0.08); + --te-base-rgba-3: rgba(242, 48, 48, 0.1); + --te-base-rgba-4: rgba(20, 118, 255, 0.1); + --te-base-rgba-5: rgba(255, 0, 0); + --te-base-rgba-6: rgba(0, 0, 0, 0.5); + --te-base-rgba-7: rgba(200, 200, 200, 0.2); + --te-base-rgba-8: rgba(255, 255, 255, 0.1); + --te-base-rgba-9: rgba(76, 152, 241, 0.15); + --te-base-rgba-10: rgba(173, 176, 184, 0.6); + --te-base-rgba-11: rgba(0, 255, 0, 0.1); + --te-base-rgba-12: rgba(242, 48, 48, 0.3); + --te-base-rgba-13: rgba(255, 255, 255, 0.08); + --te-base-rgba-14: rgba(246, 111, 106, 0.1); + --te-base-rgba-15: rgba(217, 217, 217, 0.8); + --te-base-rgba-16: rgba(0, 179, 54, 0.6); + --te-base-rgba-17: rgba(217, 217, 217, 0.4); + --te-base-rgba-18: rgba(255, 255, 255, 0.4); + --te-base-rgba-19: rgba(255, 255, 255, 0.5); + --te-base-rgba-20: rgba(94, 94, 94, 0.8); + --te-base-rgba-21: rgba(121, 121, 121, 0.4); + --te-base-rgba-22: rgba(138, 142, 153, 0.99); + --te-base-rgba-23: rgba(25, 25, 25, 0.15); + --te-base-rgba-24: rgba(0, 0, 0, 0.16); + --te-base-rgba-25: rgba(0, 255, 0, 0.1); + --te-base-rgba-26: rgba(242, 48, 48, 0.3); + --te-base-rgb-1: rgb(80, 212, 171); + + // 状态色 + --te-base-error-color: #f23030; + --te-base-warn-color: #ff8800; + --te-base-warn-color-1: #f7d916; + --te-base-success-color: #5cb300; + --te-base-prompt-color: #1476ff; + --te-base-invalidate-color: #ebebeb; + + /** + * 1.1 行高 + */ + --te-base-line-height-number: 1.5; // 文字行高倍数，建议组件中设置行高使用该变量，如有特殊情况，请自行定义 + --te-base-line-height-base: 12px; // 跟字号保持一致 + --te-base-line-height-1: 14px; + --te-base-line-height-2: 16px; + --te-base-line-height-3: 18px; + --te-base-line-height-4: 20px; + --te-base-line-height-5: 24px; + --te-base-line-height-6: 32px; + --te-base-line-height-7: 36px; + + /** + * 1.2 间距 + * 适用于组件中的margin、padding + **/ + /* 基础间距 */ + --te-base-space-base: 4px; + --te-base-space-2x: calc(var(--te-base-space-base) * 2); // 间距-2 + --te-base-space-3x: calc(var(--te-base-space-base) * 3); // 间距-3 + --te-base-space-4x: calc(var(--te-base-space-base) * 4); // 间距-4 + --te-base-space-5x: calc(var(--te-base-space-base) * 5); // 间距-5 + --te-base-space-6x: calc(var(--te-base-space-base) * 6); // 间距-6 + --te-base-space-8x: calc(var(--te-base-space-base) * 8); // 间距-7 + --te-base-space-10x: calc(var(--te-base-space-base) * 10); // 间距-8 + + /* 其他间距 */ + --te-base-space-0: 0px; // 其他间距-1 + --te-base-space-1: 1px; // 其他间距-2 + --te-base-space-2: 2px; // 下拉面板距离上部输入框的间距 + --te-base-space-6: 6px; // 其他间距-3 + --te-base-space-10: 10px; // 其他间距-4 + + /** + * 1.3 字号 + **/ + --te-base-font-size: 11px; // 正文-常规 + --te-base-font-size-base: 12px; // 正文-常规 + --te-base-font-size-1: 14px; + --te-base-font-size-2: 16px; + --te-base-font-size-3: 18px; + --te-base-font-size-4: 20px; + --te-base-font-size-5: 24px; + --te-base-font-size-6: 32px; + --te-base-font-size-7: 36px; + + /** + * 1.4字重 + **/ + --te-base-font-weight-1: 100; // 极细 + --te-base-font-weight-2: 200; // 纤细 + --te-base-font-weight-3: 300; // 细体 + --te-base-font-weight-4: normal; // 常规 + --te-base-font-weight-5: 500; // 中等 + --te-base-font-weight-6: 600; // 半粗 + --te-base-font-weight-7: bold; // 粗体 + --te-base-font-weight-8: 800; // 中黑 + --te-base-font-weight-9: 900; // 黑体 + --te-base-font-weight-bold: 700; + + /** + * 1.5 圆角 + **/ + --te-base-border-radius-normal: 2px; // 常规 + --te-base-border-radius-0: 0px; // 直角 + --te-base-border-radius-1: 4px; // 圆角-1 + --te-base-border-radius-2: 6px; // 圆角-1 + --te-base-border-radius-3: 8px; // 圆角-2 + --te-base-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..d529ca58d --- /dev/null +++ b/packages/theme/base/src/common.less @@ -0,0 +1,96 @@ +// common变量定义 +:root { + //功能色 + --te-common-color-success: var(--te-base-success-color); // 注释，成功-背景色 #5cb300 + --te-common-color-warning: var(--te-base-warn-color); // 注释，告警-背景色 #ff8800 + --te-common-color-error: var(--te-base-error-color); // 注释，错误-背景色 #f23030 + --te-common-color-info: var(--te-base-prompt-color); // 注释，告警-背景色 #1476ff + --te-common-color-prompt-secondary: var(--te-base-indigo-5); // 注释，区块提示-背景色 #6e51e0 + + // 文本色 + --te-common-text-primary: var(--te-base-dark-5); // 一级文本色-重要信息/标题颜色/输入类文本颜色 #191919 + --te-common-text-secondary: var(--te-base-gray-31); // 二级文本色-次要信息/表单标签颜色/选块按钮默认色 #595959 + --te-common-text-weaken: var(--te-base-gray-43); // 三级文本色-弱化信息/提示文字 #808080 + --te-common-text-disabled: var(--te-base-gray-18); // 文本禁用色 #c2c2c2 + --te-common-text-link: var(--te-base-blue-6); // 链接色 #1476ff + --te-common-text-inverse: var(--te-base-gray-1); // 主按钮上的文本色 #fff + --te-common-text-dark-inverse: var(--te-base-gray-1); // 深色背景下按钮上的文本色 #fff + --te-common-text-emphasize: var(--te-base-blue-6); // 强调性文字 #1476ff + + --te-common-icon-primary: var(--te-base-dark-5); // 重要图标色 #191919 + --te-common-icon-secondary: var(--te-base-gray-43); // 图标默认色 #808080 + --te-common-icon-disabled: var(--te-base-gray-18); // 图标禁用色 #c2c2c2 + --te-common-icon-link: var(--te-base-blue-6); // 图标提示色 #1476ff + + --te-common-border-default: var(--te-base-gray-13); // 线条-输入框默认色 #dbdbdb + --te-common-border-active: var(--te-base-dark-5); // 线条-输入框悬浮色/激活色 #191919 + --te-common-border-disabled: var(--te-base-dark-5); // 线条-禁用色 #dbdbdb + --te-common-border-secondary: var(--te-base-gray-31); // 线条-次要按钮描边色 #595959 + --te-common-border-prompt: var(--te-base-gray-13); // 线条-三级按钮默认色/表单内按钮 #dbdbdb + --te-common-border-hover: var(--te-base-gray-18); // 线条-按钮边框悬浮色 #c2c2c2 + --te-common-border-divider: var(--te-base-gray-11); //线条-白色背景分割线颜色 #ebebeb + --te-common-border-bg-divider: var(--te-base-gray-13); // 线条-灰色背景分割线颜色/表头分割线/选块分割线 #dbdbdb + --te-common-border-checked: var(--te-base-blue-6); // 线条 选中色 #1476ff + + --te-common-bg-primary: var(--te-base-dark-5); // 主要按钮-背景色 #191919 + --te-common-bg-primary-checked: var(--te-base-blue-6); // 主色-背景色 #1476ff + --te-common-bg-primary-emphasize: var(--te-base-blue-6); // 主色-背景色 #1476ff + + --te-common-bg-secondary: var(--te-base-gray-31); // 次要按钮-背景色 #595959 + --te-common-bg-prompt: var(--te-base-gray-7); // 导航按钮-背景色/选块-选中色 #e6e6e6 + --te-common-bg-container: var( + --te-base-gray-5 + ); // 列表悬浮色/表格悬浮色/顶部导航按钮悬浮色/选块背景色/提示背景色 #f5f5f5 + --te-common-bg-container-weaken: var(--te-base-gray-2); // 浅编辑代码--背景色 #fafafa + --te-common-bg-tag: var(--te-base-green-14); // tag标签-背景色 #e6f2d5 + --te-common-bg-default: var(--te-base-gray-1); // 白色背景-输入框背景/面板背景色 #fff + --te-common-bg-component: var(--te-base-gray-1); // 白色背景-输入框等组件默认背景/面板背景色 #fff + --te-common-bg-disabled: var(--te-base-gray-6); // 禁用/标签 背景色 #f0f0f0 +} + +:root[data-theme='dark'] { + //功能色 + --te-common-color-success: var(--te-base-success-color); // 注释，成功-背景色 #5cb300 + --te-common-color-warning: var(--te-base-warn-color); // 注释，告警-背景色 #ff8800 + --te-common-color-error: var(--te-base-error-color); // 注释，错误-背景色 #f23030 + --te-common-color-info: var(--te-base-prompt-color); // 注释，说明-背景色 #1476ff + --te-common-color-prompt-secondary: var(--te-base-indigo-14); // 注释，区块提示-背景色 #A790FF + // 文本色 + --te-common-text-primary: var(--te-base-gray-64); // 一级文本色-重要信息/标题颜色/输入类文本颜色 #F0F1F5 + --te-common-text-secondary: var(--te-base-gray-65); // 二级文本色-次要信息/表单标签颜色 #B4B5B8 + --te-common-text-weaken: var(--te-base-gray-66); // 三级文本色-弱化信息/提示文字 #8B8C8F + --te-common-text-disabled: var(--te-base-gray-67); // 文本禁用色 #4D4E52 + --te-common-text-link: var(--te-base-blue-6); // 链接色 #1476ff + --te-common-text-inverse: var(--te-base-dark-26); // 主按钮上的文本色 #000000 + --te-common-text-dark-inverse: var(--te-base-gray-1); // 深色背景下按钮上的文本色 #fff + --te-common-text-emphasize: var(--te-base-blue-6); // 强调性文字 #1476ff + + --te-common-icon-primary: var(--te-base-gray-64); // 重要图标色 #F0F1F5 + --te-common-icon-secondary: var(--te-base-gray-66); // 图标默认色 #8B8C8F + --te-common-icon-disabled: var(--te-base-gray-18); // 图标禁用色 #C2C2C2 + --te-common-icon-link: var(--te-base-blue-6); // 图标提示色 #1476ff + + --te-common-border-default: var(--te-base-gray-67); // 线条-输入框默认色 #4D4E52 + --te-common-border-active: var(--te-base-gray-64); // 线条-输入框悬浮色/激活色 #F0F1F5 + --te-common-border-disabled: var(--te-base-gray-68); // 线条-禁用色 #36383D + --te-common-border-secondary: var(--te-base-gray-65); // 线条-次要按钮描边色 #B4B5B8 + --te-common-border-prompt: var(--te-base-gray-67); // 线条-三级按钮默认色/表单内按钮 #4D4E52 + --te-common-border-hover: var(--te-base-gray-66); // 线条-按钮边框悬浮色 #8B8C8F + --te-common-border-divider: var(--te-base-gray-68); //线条-白色背景分割线颜色 #36383D + --te-common-border-bg-divider: var(--te-base-gray-67); // 线条-灰色背景分割线颜色/表头分割线/选块分割线 #4D4E52 + --te-common-border-checked: var(--te-base-blue-6); // 线条 选中色 #1476ff + + --te-common-bg-primary: var(--te-base-gray-64); // 主要按钮-背景色 #F0F1F5 + --te-common-bg-primary-checked: var(--te-base-blue-6); // 主色-背景色 #1476ff + --te-common-bg-primary-emphasize: var(--te-base-blue-6); // 主色-背景色 #1476ff + --te-common-bg-secondary: var(--te-base-gray-65); // 次要按钮-背景色 #B4B5B8 + --te-common-bg-prompt: var(--te-base-gray-66); // 导航按钮-背景色/选块-选中色 #8B8C8F + --te-common-bg-container: var( + --te-base-gray-68 + ); // 列表悬浮色/表格悬浮色/顶部导航按钮悬浮色/选块背景色/提示背景色 #36383D + --te-common-bg-container-weaken: var(--te-base-gray-69); // 浅编辑代码--背景色 #2B2D33 + --te-common-bg-tag: var(--te-base-dark-28); // tag标签-背景色 #1d312a + --te-common-bg-default: var(--te-base-dark-27); // 深色背景-输入框背景/面板背景色 #212329 + --te-common-bg-component: var(--te-base-gray-1); // 深色背景-输入框等组件默认背景/面板背景色 #212329 + --te-common-bg-disabled: var(--te-base-dark-29); // tag标签-背景色 #2a2c31 +} diff --git a/packages/theme/base/src/component-common.less b/packages/theme/base/src/component-common.less new file mode 100644 index 000000000..a8436c197 --- /dev/null +++ b/packages/theme/base/src/component-common.less @@ -0,0 +1,759 @@ +@import './var-component.less'; + +// 1、select 下拉框组件 +.tiny-select { + .tiny-input { + // 输入框 + &.is-focus .tiny-input__inner { + border-color: var(--te-common-border-default); + color: var(--te-common-text-primary); + font-size: var(--te-base-font-size-base); + } + // 下拉右侧箭头图标 + .tiny-select__caret { + font-size: var(--te-base-font-size-1); + color: var(--te-common-text-weaken); + } + } + .tiny-select__tags { + .tiny-tag { + color: var(--te-common-text-weaken); + background-color: var(--te-common-bg-tag); // 选择框 + + .tiny-tag__close { + color: var(--te-common-text-primary); + &:hover { + color: var(--te-common-text-primary); + } + } + } + } +} + +.tiny-select-dropdown { + // 下拉新增列 + .tiny-select__top-create { + margin: 8px 12px 4px 12px; + > div { + color: var(--te-common-text-emphasize); + font-size: var(--te-base-font-size-1); + } + } + // 下拉选项框 + .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(--te-common-text-emphasize); + background-color: var(--te-common-bg-default); + &:hover { + background-color: var(--te-common-bg-container); + } + } + color: var(--te-common-text-primary); + // 悬浮状态 + &.hover, + &:hover { + background-color: var(--te-common-bg-container); + } + } + // 选项框图标 + .tiny-option > .tiny-option__icon { + font-size: var(--te-base-font-size-1); + margin-right: 4px; + color: var(--te-common-text-primary); + } +} + +// 2、input框 +.tiny-input { + &.tiny-input-prefix .tiny-input__inner { + padding: 0 8px 0 30px; + } + .tiny-input__inner { + border-radius: var(--te-base-border-radius-1); + padding: 0 8px 0 12px; + height: 24px; + border-color: var(--te-common-border-default); + color: var(--te-common-text-primary); + font-size: var(--te-base-font-size-base); + &:hover { + border-color: var(--te-common-border-active); + } + &:focus { + border-color: var(--te-common-border-active); + } + } + &.is-disabled .tiny-input__inner { + fill: var(--te-common-text-disabled); + background: var(--te-common-bg-disabled); + color: var(--te-common-text-disabled); + font-size: var(--te-base-font-size-base); + } +} + +// 3、折叠框 +.tiny-collapse { + border-top: 0; + .tiny-collapse-item__header { + flex-direction: row-reverse; + font-size: var(--te-base-font-size-base); + color: var(--te-common-text-primary); + font-weight: var(--te-base-font-weight-7); + background-color: var(--te-common-bg-default); + 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(--te-base-font-size-1); + color: var(--te-common-text-weaken); + } + } + } + .tiny-collapse-item { + border-top-color: var(--te-common-border-bg-divider); + border-bottom: 0px; + margin: 0; + } + .tiny-collapse-item__content { + border: 0px; + padding: 12px; + } + .tiny-collapse-item, + .tiny-collapse-item__wrap { + background-color: var(--te-common-bg-default); + } + + .tiny-collapse-item__content { + color: var(--te-common-text-primary); + } + + .tiny-collapse-item__wrap { + overflow: inherit; + } +} + +// 4、树-tree +.tiny-tree { + .tiny-tree-node__wrapper { + cursor: pointer; + color: var(--te-common-text-primary); + font-size: var(--te-base-font-size-base); + .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(--te-common-bg-default); + &:hover { + background-color: var(--te-common-bg-container); + } + } + } + } + .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(--te-common-bg-container); + } + } + } +} + +// 5、页签tabs +.tiny-tabs { + .tiny-tabs__header { + .tiny-tabs__item__title { + padding: 0 12px; + } + .tiny-tabs__nav { + display: flex; + width: 100%; // 要验证一下是否需要写死 + border-radius: var(--te-base-border-radius-1); + text-align: center; + } + .tiny-tabs__item { + flex-grow: 1; + font-size: var(--te-base-font-size-base); + height: 24px; + line-height: 24px; + color: var(--te-common-text-secondary); + background-color: var(--te-common-bg-container); + // min-width: 120px; + text-align: center; + &.is-active { + color: var(--te-common-text-primary); + background-color: var(--te-common-bg-default); + border-radius: var(--te-base-border-radius-1); + } + } + } +} + +// 6、search组件 +.tiny-search { + .tiny-search__line { + height: 24px; + border-radius: var(--te-base-border-radius-1); + border: 1px solid var(--te-common-border-default); + font-size: var(--te-base-font-size-base); + } + .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(--te-base-font-size-2); + color: var(--te-common-text-weaken); + } +} + +// 7、dialog组件 +.tiny-dialog-box { + padding: 20px; + .tiny-dialog-box__header { + font-size: var(--te-base-font-size-1); + color: var(--te-common-text-primary); + padding: 0; + } + .tiny-dialog-box__body { + color: var(--te-common-text-secondary); + padding: 0; + margin-top: 16px; + } + .tiny-dialog-box__footer { + margin-top: 16px; + padding: 0; + display: flex; + flex-direction: row-reverse; + } +} + +// 8、button按钮 +.tiny-button { + font-size: var(--te-base-font-size-base); + border-radius: var(--te-base-border-radius-1); + padding: 0 8px; + height: 24px; + line-height: 24px; + // 默认按钮 + &.tiny-button--default { + margin-right: 8px; + margin-left: 0px; + border: 1px solid var(--te-common-border-secondary); + color: var(--te-common-text-primary); + background-color: var(--te-common-bg-default); + fill: var(--te-common-bg-default); + &:hover { + border: 1px solid var(--te-common-border-hover); + } + } + // 确认按钮 + &.tiny-button--primary { + background-color: var(--te-common-bg-primary); + fill: var(--te-common-bg-primary); + color: var(--te-common-text-inverse); + border: 1px solid var(--te-common-border-active); + &:hover { + border: 1px solid var(--te-common-border-hover); + background-color: var(--te-common-bg-secondary); + } + } + &.tiny-button--info { + color: var(--te-common-text-inverse); + border-color: var(--te-common-border-active); + background-color: var(--te-common-bg-primary); + + &:hover { + border-color: var(--te-common-border-secondary); + } + } + &.tiny-button--text { + color: var(--te-common-text-emphasize); + &:hover { + color: var(--te-common-text-emphasize); + text-decoration: none; + } + } + // 图标按钮 + &:not(.is-circle) .tiny-svg.is-text { + margin-right: 4px; + } +} + +.tiny-button-group { + ul.tiny-group-item { + border-radius: var(--te-base-border-radius-normal); + li { + background-color: var(--te-common-bg-container); + &.active { + &:hover button:not(.disabled), + button:not(.disabled) { + background: var(--te-common-bg-prompt); + color: var(--te-common-text-primary); + } + } + + &:hover { + button:not(.disabled) { + color: var(--te-common-text-primary); + background-color: var(--te-common-bg-default); + } + } + + &:not(:last-child) { + margin-right: 0; + } + } + + button { + background-color: var(--te-common-bg-container); + color: var(--te-common-text-secondary); + + &::before { + background: var(--te-common-border-default); + } + } + } +} + +// 9、modal模态框 +.tiny-modal__box { + padding: 20px; + border-radius: var(--te-base-border-radius-1); + box-shadow: 0 0 10px 0 var(--te-base-rgba-23); + .tiny-modal__header { + padding: 0; + font-size: var(--te-base-font-size-1); + color: var(--te-common-text-primary); + font-weight: var(--te-base-font-weight-4); + } + .tiny-modal__close-btn, + .tiny-modal__zoom-btn { + width: 16px; + height: 16px; + top: 0px; + right: 0; + color: var(--te-common-text-weaken); + } + .tiny-modal__body { + margin-top: 12px; + font-size: var(--te-base-font-size-base); + color: var(--te-common-text-secondary); + } + .tiny-modal__footer { + padding: 0; + margin-top: 16px; + display: flex; + flex-direction: row-reverse; + } +} + +//10、modal的消息提示框 +.tiny-modal.tiny-modal__wrapper.type__message { + .tiny-modal__box { + border-radius: var(--te-base-border-radius-2); + box-shadow: 0 2px 12px 0 var(--te-base-rgba-24); + padding: 0; + height: 38px; + .tiny-modal__body { + margin: 12px; + padding: 0; + } + } + .tiny-modal__content { + .tiny-modal__text { + font-size: var(--te-base-font-size-base); + color: var(--te-common-text-primary); + } + } + .tiny-modal__close-wrapper .tiny-modal__close-btn { + color: var(--te-common-text-weaken); + } +} + +// 11、numeric 组件 +.tiny-numeric { + .tiny-numeric__input-inner { + height: 24px; + border-radius: var(--te-base-border-radius-1); + color: var(--te-common-text-primary); + border-color: var(--te-common-border-default); + 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(--te-common-border-default); + } + } + .tiny-numeric-base .is-disabled { + fill: var(---te-common-bg-disabled); + background: var(---te-common-bg-disabled); + color: var(--te-common-text-disabled); + } + .tiny-numeric__input { + background-color: var(--te-common-bg-default); + border-color: var(--te-common-border-default); + &.has-unit .tiny-numeric__input-inner { + padding: 0 42px 0 12px; + } + } + .tiny-numeric__unit { + color: var(--te-common-text-weaken); + background: var(--te-common-border-default); + border: 0; + width: 14px; + margin-right: 4px; + } +} + +// 12、popover气泡卡片 +.tiny-popover.tiny-popper[x-placement] { + padding: 0px 8px; + font-size: var(--te-base-font-size-base); + color: var(--te-common-text-primary); + background-color: var(--te-common-bg-default); + + height: auto; + line-height: 28px; +} + +// 13、tag标签 +.tiny-tag { + font-size: var(--te-base-font-size-base); + color: var(--te-common-text-secondary); + background: var(--te-common-bg-disabled); + border-radius: var(--te-base-border-radius-1); + .tiny-tag__close { + margin: 0 0 0 4px; + color: var(--te-common-text-weaken); + } +} + +// 14、radio 单选 +.tiny-radio { + margin-right: 20px; + .tiny-radio__inner { + border: 1px solid var(--te-common-border-hover); // 单选待确认 + } + .tiny-radio__label { + font-size: var(--te-base-font-size-base); + color: var(--te-common-text-primary); + padding-left: 6px; + } + .tiny-radio__input.is-checked .tiny-radio__inner::after { + background-color: var(--te-common-bg-primary-checked); + } +} + +.tiny-radio-group { + .tiny-radio-button { + &:first-child { + .tiny-radio-button__inner { + border-color: var(--te-common-border-secondary); + } + } + .tiny-radio-button__orig-radio:checked { + & + .tiny-radio-button__inner { + background-color: var(--te-common-bg-primary-checked); // 待确认,原来： --te-common-bg-primary + border-color: var(--te-common-border-secondary); + &:hover { + box-shadow: none; + } + } + } + &__inner { + background-color: var(--te-common-bg-default); + color: var(--te-common-text-primary); + border-color: var(--te-common-border-secondary); + } + } +} + +// 15、checkbox 复选框适配 +.tiny-checkbox { + .tiny-checkbox__input { + &.is-checked .tiny-checkbox__inner { + background-color: var(--te-common-bg-primary-checked); + border-color: var(--te-common-border-checked); + } + .tiny-checkbox__inner { + border-radius: var(--te-base-border-radius-1); + border: 1px solid var(--te-common-border-hover); // 待确认 + line-height: 24px; + } + } + .tiny-checkbox__label { + line-height: 24px; + color: var(--te-common-text-primary); + } +} + +// 16、notify通知 +.tiny-notify { + border-radius: var(---te-base-border-radius-2); + padding: 12px; + background-color: var(--te-common-bg-default); + box-shadow: 0 2px 12px 0 var(--te-base-rgba-24); + .tiny-notify__icon-zone { + .tiny-notify__icon-status { + width: 16px; + height: 16px; + } + } + .tiny-notify__content { + color: var(--te-common-text-secondary); + font-size: var(--te-base-font-size-base); + > a { + color: var(--te-common-text-link); + } + } + .tiny-notify__message-zone { + margin: 0 0 0 8px; + .tiny-notify__title-wrapper { + font-size: var(--te-base-font-size-1); + font-weight: var(--te-base-font-weight-4t); + color: var(--te-common-text-primary); + } + } + .tiny-notify__close-zone { + padding: 0; + &.tiny-notify__icon-close { + width: 16px; + height: 16px; + } + } + &.tiny-notify--error { + .tiny-notify__icon-status { + color: var(--te-common-color-error); + } + } + + &.tiny-notify--info { + .tiny-notify__icon-status { + color: var(--te-common-color-info); + } + } + + &.tiny-notify--success { + .tiny-notify__icon-status { + color: var(--te-common-color-success); + } + } + + &.tiny-notify--warning { + .tiny-notify__icon-status { + color: var(--te-common-color-warning); + } + } +} + +// 17、tooltip文字提示 +.tiny-tooltip { + &.tiny-tooltip__popper { + box-shadow: 0 4px 16px 0 var(--te-base-rgba-23); + &[class*='is-'] { + background: var(--te-common-bg-default); + color: var(--te-common-text-primary); + font-size: var(--te-base-font-size-base); + padding: 12px; + &[x-placement^='top'] { + .popper__arrow { + &.popper__arrow::after { + border-top-color: var(--te-common-text-inverse); // 等待确认 + } + } + } + &[x-placement^='bottom'] { + .popper__arrow { + &.popper__arrow::after { + border-bottom-color: var(--te-common-text-inverse); + } + } + } + &[x-placement^='left'] { + .popper__arrow { + &.popper__arrow::after { + border-left-color: var(--te-common-text-inverse); + } + } + } + &[x-placement^='right'] { + .popper__arrow { + &.popper__arrow::after { + border-right-color: var(--te-common-text-inverse); + } + } + } + } + } +} + +// 18、表单 +.tiny-form { + .tiny-form-item { + .tiny-form-item__label { + color: var(--te-common-text-secondary); + font-size: var(--te-base-font-size-base); + } + } + .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(--te-base-font-size); + } +} + +// 19、表格 +.tiny-grid__wrapper { + .tiny-grid { + font-size: var(--te-base-font-size-base); + background-color: var(--te-common-text-primary); + color: var(--te-common-text-primary); + cursor: pointer; + .tiny-grid__header-wrapper { + background-color: var(--te-common-bg-container); + .tiny-grid__header { + .tiny-grid-header__row { + .tiny-grid-header__column { + height: 24px; + &.col__center { + text-align: left; + } + } + .tiny-grid-cell { + border-color: var(--te-common-text-secondary); + font-weight: var(--te-base-font-weight-4); + font-size: var(--te-base-font-size-base); + .icon-half-select, + .icon-checked-sur { + color: var(--te-common-text-primary); + } + } + .tiny-grid-resizable.is__line { + color: var(--te-common-border-hover); + height: 10px; + margin-bottom: 9px; + } + } + } + } + .tiny-grid__body-wrapper { + .high-light-node { + background-color: var(--te-common-bg-container); + &.tiny-grid-body__column { + font-size: var(--te-base-font-size-base); + color: var(--te-common-text-primary); + } + } + .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(--te-common-bg-container); + } + .tiny-grid-cell { + padding: 0; + } + } + .tiny-grid-tree-wrapper .tiny-grid-tree__node-btn { + fill: var(--te-common-icon-secondary); + } + } + } + } + } +} + +// 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(--te-common-border-divider); // 待确认 + } + .tiny-progress__text { + margin-left: 12px; + color: var(--te-common-text-primary); // 待确认 + } +} + +// 22、开关 +.tiny-switch { + .component-css-vars-switch(); + background-color: var(--te-common-bg-disabled); // 待确认是用背景色 还是线条色 + &.tiny-switch-checked { + background-color: var(--te-common-bg-primary-checked); + } + &::after { + background-color: var(--te-common-bg-default); + } +} + +// 23、下拉菜单 +.tiny-dropdown { + &__trigger { + color: var(--te-common-text-primary); // 待确认 + &:not(&__caret-button):hover { + color: var(--te-common-text-weaken); + } + } +} diff --git a/packages/theme/base/src/dark-component.js b/packages/theme/base/src/dark-component.js deleted file mode 100644 index 9cd4c8985..000000000 --- a/packages/theme/base/src/dark-component.js +++ /dev/null @@ -1,20 +0,0 @@ -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/dark/dark-common.js b/packages/theme/base/src/dark/dark-common.js new file mode 100644 index 000000000..8bdc5d448 --- /dev/null +++ b/packages/theme/base/src/dark/dark-common.js @@ -0,0 +1,39 @@ +// tinyvue组件的暗色主题 +export const tinyDarkTheme = { + //功能色 + '--te-common-color-success': 'var(--te-base-success-color)', // 注释，成功-背景色 #5cb300 + '--te-common-color-warning': 'var(--te-base-warn-color)', // 注释，告警-背景色 #ff8800 + '--te-common-color-error': 'var(--te-base-error-color)', // 注释，错误-背景色 #f23030 + '--te-common-color-info': 'var(--te-base-prompt-color)', // 注释，告警-背景色 #1476ff + '--te-common-color-prompt-secondary': 'var(--te-base-indigo-14)', // 注释，区块提示-背景色 #A790FF + + // 文本色 + '--te-common-text-primary': 'var(--te-base-gray-64)', // 一级文本色-重要信息/标题颜色/输入类文本颜色 #F0F1F5 + '--te-common-text-secondary': 'var(--te-base-gray-65)', // 二级文本色-次要信息/表单标签颜色 #B4B5B8 + '--te-common-text-placeholder': 'var(--te-base-gray-66)', // 三级文本色-弱化信息/提示文字 #8B8C8F + '--te-common-text-disabled': 'var(--te-base-gray-67)', // 文本禁用色 #4D4E52 + '--te-common-text-link': 'var(--te-base-blue-6)', // 链接色 #1476ff + '--te-common-text-inverse': 'var(--te-base-dark-26)', // 主按钮上的文本色 #000000 + '--te-common-text-dark-inverse': 'var(--te-base-gray-1)', // 深色背景下按钮上的文本色 #fff + + '--te-common-icon-primary': 'var(--te-base-gray-64)', // 重要图标色 #F0F1F5 + '--te-common-icon-secondary': 'var(--te-base-gray-66)', // 图标默认色 #8B8C8F + '--te-common-icon-disabled': 'var(--te-base-gray-18)', // 图标禁用色 #C2C2C2 + '--te-common-icon-link': 'var(--te-base-blue-6)', // 图标提示色 #1476ff + + '--te-common-border-default': 'var(--te-base-gray-67)', // 线条-输入框默认色 #4D4E52 + '--te-common-border-active': 'var(--te-base-gray-64)', // 线条-输入框悬浮色/激活色 #F0F1F5 + '--te-common-border-secondary': 'var(--te-base-gray-65)', // 线条-次要按钮描边色 #B4B5B8 + '--te-common-border-prompt': 'var(--te-base-gray-67)', // 线条-三级按钮默认色/表单内按钮 #4D4E52 + '--te-common-border-hover': 'var(--te-base-gray-66)', // 线条-按钮边框悬浮色 #8B8C8F + '--te-common-border-divider': 'var(--te-base-gray-68)', //线条-白色背景分割线颜色 #36383D + '--te-common-border-bg-divider': 'var(--te-base-gray-67)', // 线条-灰色背景分割线颜色/表头分割线/选块分割线 #4D4E52 + + '--te-common-bg-primary': 'var(--te-base-gray-64)', // 主要按钮-背景色 #F0F1F5 + '--te-common-bg-secondary': 'var(--te-base-gray-65)', // 次要按钮-背景色 #B4B5B8 + '--te-common-bg-prompt': 'var(--te-base-gray-66)', // 导航按钮-背景色/选块-选中色 #8B8C8F + '--te-common-bg-container': 'var(--te-base-gray-68)', // 列表悬浮色/表格悬浮色/顶部导航按钮悬浮色/选块背景色/提示背景色 #36383D + '--te-common-bg-container-weaken': 'var(--te-base-gray-69)', // 浅编辑代码--背景色 #2B2D33 + '--te-common-bg-default': 'var(--te-base-dark-27)', // 深色背景-输入框背景/面板背景色 #212329 + '--te-common-bg-component': 'var(--te-base-gray-1)' // 深色背景-输入框等组件默认背景/面板背景色 #212329 +} diff --git a/packages/theme/base/src/index.js b/packages/theme/base/src/index.js index aa6208bab..4d9dca4fa 100644 --- a/packages/theme/base/src/index.js +++ b/packages/theme/base/src/index.js @@ -1,15 +1,26 @@ -import { tinyBaseTheme, concatThemeLight, concatThemeDark } from './base' +// 提供engine主题包的样式定义引入 +import './page/base-config-page.less' +import './base.less' +import './common.less' +import { tinyDarkTheme } from './dark/dark-common' +import { tinyLightTheme } from './light/light-common' +import './component-common.less' -export const tinyEngineThemeLight = { - id: 'tiny-engine-light-theme', - name: 'EngineLightTheme', - cnName: 'EngineLightTheme', - data: { ...tinyBaseTheme, ...concatThemeLight } +export const tinyThemeLightVars = { + id: 'tiny-light-theme', + name: 'tinyLightTheme', + cnName: '', + data: { ...tinyLightTheme } } -export const tinyEngineThemeDark = { - id: 'tiny-engine-dark-theme', - name: 'EngineDarkTheme', - cnName: 'EngineDarkTheme', - data: { ...tinyBaseTheme, ...concatThemeDark } +export const tinyThemeDarkVars = { + id: 'tiny-dark-theme', + name: 'tinyDarkTheme', + cnName: '', + data: { ...tinyDarkTheme } +} + +export const defaultThemeList = { + light: tinyThemeLightVars, + dark: tinyThemeDarkVars } diff --git a/packages/theme/base/src/light-component.js b/packages/theme/base/src/light-component.js deleted file mode 100644 index fc24f2662..000000000 --- a/packages/theme/base/src/light-component.js +++ /dev/null @@ -1,20 +0,0 @@ -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/src/light/light-common.js b/packages/theme/base/src/light/light-common.js new file mode 100644 index 000000000..bdb39391c --- /dev/null +++ b/packages/theme/base/src/light/light-common.js @@ -0,0 +1,40 @@ +// tinyvue组件的亮色主题 +export const tinyLightTheme = { + //功能色 + '--te-common-color-success': 'var(--te-base-success-color)', // 注释，成功-背景色 #5cb300 + '--te-common-color-warning': 'var(--te-base-warn-color)', // 注释，告警-背景色 #ff8800 + '--te-common-color-error': 'var(--te-base-error-color)', // 注释，错误-背景色 #f23030 + '--te-common-color-info': 'var(--te-base-prompt-color)', // 注释，告警-背景色 #1476ff + '--te-common-color-prompt-secondary': 'var(--te-base-indigo-5)', // 注释，区块提示-背景色 #6e51e0 + + // 文本色 + '--te-common-text-primary': 'var(--te-base-dark-5)', // 一级文本色-重要信息/标题颜色/输入类文本颜色 #191919 + '--te-common-text-secondary': 'var(--te-base-gray-31)', // 二级文本色-次要信息/表单标签颜色 #595959 + '--te-common-text-placeholder': 'var(--te-base-gray-43)', // 三级文本色-弱化信息/提示文字 #808080 + '--te-common-text-disabled': 'var(--te-base-gray-18)', // 文本禁用色 #c2c2c2 + '--te-common-text-link': 'var(--te-base-blue-6)', // 链接色 #1476ff + '--te-common-text-inverse': 'var(--te-base-gray-1)', // 主按钮上的文本色 #fff + '--te-common-text-dark-inverse': 'var(--te-base-gray-1)', // 深色背景下按钮上的文本色 #fff + + '--te-common-icon-primary': 'var(--te-base-dark-5)', // 重要图标色 #191919 + '--te-common-icon-secondary': 'var(--te-base-gray-43)', // 图标默认色 #808080 + '--te-common-icon-disabled': 'var(--te-base-gray-18)', // 图标禁用色 #c2c2c2 + '--te-common-icon-link': 'var(--te-base-blue-6)', // 图标提示色 #1476ff + + '--te-common-border-default': 'var(--te-base-gray-13)', // 线条-输入框默认色 #dbdbdb + '--te-common-border-active': 'var(--te-base-dark-5)', // 线条-输入框悬浮色/激活色 #191919 + '--te-common-border-secondary': 'var(--te-base-gray-31)', // 线条-次要按钮描边色 #595959 + '--te-common-border-prompt': 'var(--te-base-gray-13)', // 线条-三级按钮默认色/表单内按钮 #dbdbdb + '--te-common-border-hover': 'var(--te-base-gray-18)', // 线条-按钮边框悬浮色 #c2c2c2 + '--te-common-border-divider': 'var(--te-base-gray-11)', //线条-白色背景分割线颜色 #ebebeb + '--te-common-border-bg-divider': 'var(--te-base-gray-13)', // 线条-灰色背景分割线颜色/表头分割线/选块分割线 #dbdbdb + + '--te-common-bg-primary': 'var(--te-base-dark-5)', // 主要按钮-背景色 #191919 + '--te-common-bg-primary-2': 'var(--te-base-blue-6)', // 主色-背景色 #1476ff + '--te-common-bg-secondary': 'var(--te-base-gray-31)', // 次要按钮-背景色 #595959 + '--te-common-bg-prompt': 'var(--te-base-gray-7)', // 导航按钮-背景色/选块-选中色 #e6e6e6 + '--te-common-bg-container': 'var(--te-base-gray-5)', // 列表悬浮色/表格悬浮色/顶部导航按钮悬浮色/选块背景色/提示背景色 #f5f5f5 + '--te-common-bg-container-weaken': 'var(--te-base-gray-2)', // 浅编辑代码--背景色 #fafafa + '--te-common-bg-default': 'var(--te-base-gray-1)', // 白色背景-输入框背景/面板背景色 #fff + '--te-common-bg-component': 'var(--te-base-gray-1)' // 白色背景-输入框等组件默认背景/面板背景色 #fff +} 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 69a5c3e89..dd3439835 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..add9e7a44 --- /dev/null +++ b/packages/theme/base/src/var-component.less @@ -0,0 +1,15 @@ +.component-css-vars-progress() { + --ti-progress-bar-outer-bg-color: var(--te-common-border-divider); + --ti-progress-text-font-color: var(--te-common-text-primary); +} + +.component-css-vars-switch() { + --ti-switch-bg-color: var(--te-common-bg-disabled); //存疑 是用背景色 还是线条色 + --ti-switch-checked-bg-color: var(--te-base-blue-6); // 存疑 + --ti-switch-after-bg-color: var(--te-common-bg-default); +} + +.component-css-vars-dropdown() { + --ti-dropdown-trigger-font-color: #adb0b8; //存疑 + --ti-dropdown-caret-hover-bg-color: #8a8e99; // 8a8e99 +} diff --git a/packages/theme/common/global.less b/packages/theme/common/global.less deleted file mode 100644 index 1f47ba294..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-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 { - border-radius: 6px; - 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 { - font-size: 12px; - 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; - margin-top: 0; - .components-items { - .item { - cursor: pointer; - } - } - } - - .tiny-collapse-item__header { - color: var(--ti-lowcode-collapse-item-header-color); - position: relative; - min-height: 32px; - padding: 12px; - font-weight: 700; - border-top: 1px solid var(--ti-lowcode-base-invalidate-color); - - &:hover, - &.is-active { - color: var(--ti-lowcode-collapse-item-header-active-color); - } - - .tiny-collapse-item__arrow { - color: var(--ti-lowcode-life-cycle-alert-color); - line-height: 14px; - position: absolute; - right: 0; - } - } - - .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; - margin-bottom: 12px; - } - - .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/index.less b/packages/theme/dark/index.less index e43a405a7..8fdcaa2be 100644 --- a/packages/theme/dark/index.less +++ b/packages/theme/dark/index.less @@ -1,6 +1,3 @@ -@import '../common/base.less'; -@import '../common/global.less'; -@import './base.less'; // 主题配置优先于公共配置 @import './variable.less'; @import './block.less'; @@ -9,26 +6,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 0356fb7df..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-component-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/light/canvas.less b/packages/theme/light/canvas.less index 1342c9457..aec4ae443 100644 --- a/packages/theme/light/canvas.less +++ b/packages/theme/light/canvas.less @@ -1,26 +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(--te-common-border-checked); + --ti-lowcode-canvas-hover-line-in-bg-color: var(--te-base-rgba-25); + --ti-lowcode-canvas-hover-line-forbid-bg-color: var(--te-common-color-error); + --ti-lowcode-canvas-hover-line-in-forbid-bg-color: var(--te-base-rgba-26); + --ti-lowcode-canvas-choose-slot-border-color: var(--te-common-border-checked); + --ti-lowcode-canvas-choose-slot-color: var(--te-common-text-dark-inverse); + --ti-lowcode-canvas-corner-mark-left-color: var(--te-common-border-checked); + --ti-lowcode-canvas-corner-mark-bottom-right-color: var(--te-common-text-dark-inverse); + --ti-lowcode-canvas-corner-mark-bottom-right-border-color: var(--te-common-border-hover); + --ti-lowcode-canvas-corner-mark-bottom-right-bg-color: var(--te-common-bg-container); + --ti-lowcode-canvas-corner-mark-right-color: var(--te-common-text-dark-inverse); + --ti-lowcode-canvas-corner-mark-right-bg-color: var(--te-common-bg-primary-checked); + --ti-lowcode-canvas-select-corner-mark-left-color: var(--te-common-text-dark-inverse); + --ti-lowcode-canvas-select-corner-mark-left-bg-color: var(--te-common-bg-primary-checked); --ti-lowcode-canvas-footer-border-top-color: var(--ti-lowcode-common-border-color-4); // 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-color: var(--te-common-text-primary); // 右键菜单文字颜色 + --ti-lowcode-canvas-menu-item-hover-bg-color: var(--te-common-bg-container); + --ti-lowcode-canvas-menu-border-color: var(--te-common-border-default); --ti-lowcode-canvas-menu-item-disabled-color: var(--ti-lowcode-base-text-color-4); } diff --git a/packages/theme/light/index.less b/packages/theme/light/index.less index eef6cef06..66a84d889 100644 --- a/packages/theme/light/index.less +++ b/packages/theme/light/index.less @@ -1,6 +1,3 @@ -@import '../common/base.less'; -@import '../common/global.less'; -@import './base.less'; // 主题配置优先于公共配置 @import './variable.less'; @import './tutorial.less'; @@ -9,24 +6,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/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/settings.less b/packages/theme/light/settings.less index 6bd21cb73..c71950759 100644 --- a/packages/theme/light/settings.less +++ b/packages/theme/light/settings.less @@ -1,6 +1,6 @@ // 右侧属性面板 css 变量 #tiny-right-panel { - --ti-lowcode-setting-panel-bg-color: var(--ti-lowcode-base-bg-5); + --ti-lowcode-setting-panel-bg-color: var(--te-common-bg-default); --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); 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 29f9851d0..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-component-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); -} From 9a3729e692163068917801fd077c1b765cde248b Mon Sep 17 00:00:00 2001 From: wenmine Date: Wed, 25 Sep 2024 09:43:43 +0800 Subject: [PATCH 02/14] feat(theme): merge refactor/develop --- packages/theme/base/package.json | 2 +- packages/theme/base/src/dark/dark-common.js | 35 ------------------ packages/theme/base/src/light/light-common.js | 36 ------------------- 3 files changed, 1 insertion(+), 72 deletions(-) diff --git a/packages/theme/base/package.json b/packages/theme/base/package.json index 74583fd7a..7fdfc3922 100644 --- a/packages/theme/base/package.json +++ b/packages/theme/base/package.json @@ -1,6 +1,6 @@ { "name": "@opentiny/tiny-engine-theme-base", - "version": "1.0.0", + "version": "2.0.0-alpha.1", "publishConfig": { "access": "public" }, diff --git a/packages/theme/base/src/dark/dark-common.js b/packages/theme/base/src/dark/dark-common.js index 8bdc5d448..70036e277 100644 --- a/packages/theme/base/src/dark/dark-common.js +++ b/packages/theme/base/src/dark/dark-common.js @@ -1,39 +1,4 @@ // tinyvue组件的暗色主题 export const tinyDarkTheme = { //功能色 - '--te-common-color-success': 'var(--te-base-success-color)', // 注释，成功-背景色 #5cb300 - '--te-common-color-warning': 'var(--te-base-warn-color)', // 注释，告警-背景色 #ff8800 - '--te-common-color-error': 'var(--te-base-error-color)', // 注释，错误-背景色 #f23030 - '--te-common-color-info': 'var(--te-base-prompt-color)', // 注释，告警-背景色 #1476ff - '--te-common-color-prompt-secondary': 'var(--te-base-indigo-14)', // 注释，区块提示-背景色 #A790FF - - // 文本色 - '--te-common-text-primary': 'var(--te-base-gray-64)', // 一级文本色-重要信息/标题颜色/输入类文本颜色 #F0F1F5 - '--te-common-text-secondary': 'var(--te-base-gray-65)', // 二级文本色-次要信息/表单标签颜色 #B4B5B8 - '--te-common-text-placeholder': 'var(--te-base-gray-66)', // 三级文本色-弱化信息/提示文字 #8B8C8F - '--te-common-text-disabled': 'var(--te-base-gray-67)', // 文本禁用色 #4D4E52 - '--te-common-text-link': 'var(--te-base-blue-6)', // 链接色 #1476ff - '--te-common-text-inverse': 'var(--te-base-dark-26)', // 主按钮上的文本色 #000000 - '--te-common-text-dark-inverse': 'var(--te-base-gray-1)', // 深色背景下按钮上的文本色 #fff - - '--te-common-icon-primary': 'var(--te-base-gray-64)', // 重要图标色 #F0F1F5 - '--te-common-icon-secondary': 'var(--te-base-gray-66)', // 图标默认色 #8B8C8F - '--te-common-icon-disabled': 'var(--te-base-gray-18)', // 图标禁用色 #C2C2C2 - '--te-common-icon-link': 'var(--te-base-blue-6)', // 图标提示色 #1476ff - - '--te-common-border-default': 'var(--te-base-gray-67)', // 线条-输入框默认色 #4D4E52 - '--te-common-border-active': 'var(--te-base-gray-64)', // 线条-输入框悬浮色/激活色 #F0F1F5 - '--te-common-border-secondary': 'var(--te-base-gray-65)', // 线条-次要按钮描边色 #B4B5B8 - '--te-common-border-prompt': 'var(--te-base-gray-67)', // 线条-三级按钮默认色/表单内按钮 #4D4E52 - '--te-common-border-hover': 'var(--te-base-gray-66)', // 线条-按钮边框悬浮色 #8B8C8F - '--te-common-border-divider': 'var(--te-base-gray-68)', //线条-白色背景分割线颜色 #36383D - '--te-common-border-bg-divider': 'var(--te-base-gray-67)', // 线条-灰色背景分割线颜色/表头分割线/选块分割线 #4D4E52 - - '--te-common-bg-primary': 'var(--te-base-gray-64)', // 主要按钮-背景色 #F0F1F5 - '--te-common-bg-secondary': 'var(--te-base-gray-65)', // 次要按钮-背景色 #B4B5B8 - '--te-common-bg-prompt': 'var(--te-base-gray-66)', // 导航按钮-背景色/选块-选中色 #8B8C8F - '--te-common-bg-container': 'var(--te-base-gray-68)', // 列表悬浮色/表格悬浮色/顶部导航按钮悬浮色/选块背景色/提示背景色 #36383D - '--te-common-bg-container-weaken': 'var(--te-base-gray-69)', // 浅编辑代码--背景色 #2B2D33 - '--te-common-bg-default': 'var(--te-base-dark-27)', // 深色背景-输入框背景/面板背景色 #212329 - '--te-common-bg-component': 'var(--te-base-gray-1)' // 深色背景-输入框等组件默认背景/面板背景色 #212329 } diff --git a/packages/theme/base/src/light/light-common.js b/packages/theme/base/src/light/light-common.js index bdb39391c..36732eb1c 100644 --- a/packages/theme/base/src/light/light-common.js +++ b/packages/theme/base/src/light/light-common.js @@ -1,40 +1,4 @@ // tinyvue组件的亮色主题 export const tinyLightTheme = { //功能色 - '--te-common-color-success': 'var(--te-base-success-color)', // 注释，成功-背景色 #5cb300 - '--te-common-color-warning': 'var(--te-base-warn-color)', // 注释，告警-背景色 #ff8800 - '--te-common-color-error': 'var(--te-base-error-color)', // 注释，错误-背景色 #f23030 - '--te-common-color-info': 'var(--te-base-prompt-color)', // 注释，告警-背景色 #1476ff - '--te-common-color-prompt-secondary': 'var(--te-base-indigo-5)', // 注释，区块提示-背景色 #6e51e0 - - // 文本色 - '--te-common-text-primary': 'var(--te-base-dark-5)', // 一级文本色-重要信息/标题颜色/输入类文本颜色 #191919 - '--te-common-text-secondary': 'var(--te-base-gray-31)', // 二级文本色-次要信息/表单标签颜色 #595959 - '--te-common-text-placeholder': 'var(--te-base-gray-43)', // 三级文本色-弱化信息/提示文字 #808080 - '--te-common-text-disabled': 'var(--te-base-gray-18)', // 文本禁用色 #c2c2c2 - '--te-common-text-link': 'var(--te-base-blue-6)', // 链接色 #1476ff - '--te-common-text-inverse': 'var(--te-base-gray-1)', // 主按钮上的文本色 #fff - '--te-common-text-dark-inverse': 'var(--te-base-gray-1)', // 深色背景下按钮上的文本色 #fff - - '--te-common-icon-primary': 'var(--te-base-dark-5)', // 重要图标色 #191919 - '--te-common-icon-secondary': 'var(--te-base-gray-43)', // 图标默认色 #808080 - '--te-common-icon-disabled': 'var(--te-base-gray-18)', // 图标禁用色 #c2c2c2 - '--te-common-icon-link': 'var(--te-base-blue-6)', // 图标提示色 #1476ff - - '--te-common-border-default': 'var(--te-base-gray-13)', // 线条-输入框默认色 #dbdbdb - '--te-common-border-active': 'var(--te-base-dark-5)', // 线条-输入框悬浮色/激活色 #191919 - '--te-common-border-secondary': 'var(--te-base-gray-31)', // 线条-次要按钮描边色 #595959 - '--te-common-border-prompt': 'var(--te-base-gray-13)', // 线条-三级按钮默认色/表单内按钮 #dbdbdb - '--te-common-border-hover': 'var(--te-base-gray-18)', // 线条-按钮边框悬浮色 #c2c2c2 - '--te-common-border-divider': 'var(--te-base-gray-11)', //线条-白色背景分割线颜色 #ebebeb - '--te-common-border-bg-divider': 'var(--te-base-gray-13)', // 线条-灰色背景分割线颜色/表头分割线/选块分割线 #dbdbdb - - '--te-common-bg-primary': 'var(--te-base-dark-5)', // 主要按钮-背景色 #191919 - '--te-common-bg-primary-2': 'var(--te-base-blue-6)', // 主色-背景色 #1476ff - '--te-common-bg-secondary': 'var(--te-base-gray-31)', // 次要按钮-背景色 #595959 - '--te-common-bg-prompt': 'var(--te-base-gray-7)', // 导航按钮-背景色/选块-选中色 #e6e6e6 - '--te-common-bg-container': 'var(--te-base-gray-5)', // 列表悬浮色/表格悬浮色/顶部导航按钮悬浮色/选块背景色/提示背景色 #f5f5f5 - '--te-common-bg-container-weaken': 'var(--te-base-gray-2)', // 浅编辑代码--背景色 #fafafa - '--te-common-bg-default': 'var(--te-base-gray-1)', // 白色背景-输入框背景/面板背景色 #fff - '--te-common-bg-component': 'var(--te-base-gray-1)' // 白色背景-输入框等组件默认背景/面板背景色 #fff } From cf678a2dae2275449a5b098fa4f73991de8981d7 Mon Sep 17 00:00:00 2001 From: wenmine Date: Wed, 25 Sep 2024 17:22:22 +0800 Subject: [PATCH 03/14] feat(theme): common theme & fix review --- packages/common/component/ConfigItem.vue | 2 +- packages/common/component/MetaCodeEditor.vue | 6 +-- .../JsSlotConfigurator.vue | 4 +- .../slot-configurator/SlotConfigurator.vue | 4 +- packages/layout/src/DesignSettings.vue | 26 +++++------ packages/plugins/block/src/BlockEventList.vue | 2 +- .../plugins/block/src/BlockPropertyList.vue | 2 +- .../src/DataSourceRemoteDataResult.vue | 2 +- .../src/meta/block/src/BlockGroup.vue | 17 ------- .../background/BackgroundImageSetting.vue | 16 +++---- .../components/background/LinearGradient.vue | 16 +++---- .../src/components/spacing/SpacingGroup.vue | 4 -- .../components/typography/TypographyMore.vue | 1 - packages/theme/base/src/common.less | 6 +-- packages/theme/base/src/component-common.less | 21 ++++----- .../theme/base/src/page/base-config-page.less | 2 +- packages/theme/base/src/var-component.less | 15 ------ packages/theme/dark/button.less | 34 -------------- packages/theme/dark/canvas.less | 4 +- packages/theme/dark/index.less | 1 + packages/theme/dark/metaComponent.less | 2 +- packages/theme/dark/settings.less | 2 +- packages/theme/dark/tutorial.less | 2 +- packages/theme/dark/variable.less | 45 ------------------ packages/theme/light/block.less | 2 +- packages/theme/light/button.less | 36 --------------- packages/theme/light/index.less | 1 + packages/theme/light/materials.less | 2 +- packages/theme/light/metaComponent.less | 2 +- packages/theme/light/settings.less | 2 +- packages/theme/light/toolbar.less | 2 +- packages/theme/light/tutorial.less | 2 +- packages/theme/light/variable.less | 46 ------------------- 33 files changed, 64 insertions(+), 267 deletions(-) delete mode 100644 packages/theme/base/src/var-component.less delete mode 100644 packages/theme/dark/button.less delete mode 100644 packages/theme/light/button.less diff --git a/packages/common/component/ConfigItem.vue b/packages/common/component/ConfigItem.vue index 4a33cf408..383853875 100644 --- a/packages/common/component/ConfigItem.vue +++ b/packages/common/component/ConfigItem.vue @@ -600,7 +600,7 @@ export default { .prop-description { margin-top: 8px; - color: var(--ti-lowcode-common-text-desc-color); + color: var(--te-common-text-weaken); } .label-tip { padding: 2px 0; diff --git a/packages/common/component/MetaCodeEditor.vue b/packages/common/component/MetaCodeEditor.vue index 7230a5762..e415050b2 100644 --- a/packages/common/component/MetaCodeEditor.vue +++ b/packages/common/component/MetaCodeEditor.vue @@ -294,7 +294,7 @@ export default { } &.empty-color { - color: var(--ti-lowcode-common-text-desc-color); + color: var(--te-common-text-weaken); } .edit-icon { @@ -328,7 +328,7 @@ export default { color: var(--ti-lowcode-meta-code-editor-header-tips-container-color); .header-tips-title { - color: var(--ti-lowcode-base-text-color-3); + color: var(); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; @@ -357,7 +357,7 @@ export default { code { font-family: Microsoft YaHei, Microsoft YaHei-Normal; - color: var(--ti-lowcode-base-text-color-3); + color: var(); } } } diff --git a/packages/configurator/src/js-slot-configurator/JsSlotConfigurator.vue b/packages/configurator/src/js-slot-configurator/JsSlotConfigurator.vue index b930ff4f1..292166d86 100644 --- a/packages/configurator/src/js-slot-configurator/JsSlotConfigurator.vue +++ b/packages/configurator/src/js-slot-configurator/JsSlotConfigurator.vue @@ -234,11 +234,11 @@ export default { position: relative; width: 60px; height: 20px; - border: 1px solid var(--ti-lowcode-base-bg); + border: 1px solid var(--te-common-bg-container); outline: 0; border-radius: 10px; box-sizing: border-box; - background: var(--ti-lowcode-base-bg); + background: var(--te-common-bg-container); transition: border-color 0.3s, background-color 0.3s; vertical-align: middle; } diff --git a/packages/configurator/src/slot-configurator/SlotConfigurator.vue b/packages/configurator/src/slot-configurator/SlotConfigurator.vue index a024634cc..b686b0d1e 100644 --- a/packages/configurator/src/slot-configurator/SlotConfigurator.vue +++ b/packages/configurator/src/slot-configurator/SlotConfigurator.vue @@ -171,11 +171,11 @@ export default { position: relative; width: 40px; height: 20px; - border: 1px solid var(--ti-lowcode-base-bg); + border: 1px solid var(--te-common-bg-container); outline: 0; border-radius: 10px; box-sizing: border-box; - background: var(--ti-lowcode-base-bg); + background: var(--te-common-bg-container); transition: border-color 0.3s, background-color 0.3s; vertical-align: middle; } diff --git a/packages/layout/src/DesignSettings.vue b/packages/layout/src/DesignSettings.vue index 1c5e26ded..4caec2ed3 100644 --- a/packages/layout/src/DesignSettings.vue +++ b/packages/layout/src/DesignSettings.vue @@ -57,23 +57,12 @@ export default { flex-direction: column; .tiny-tabs__nav-scroll { margin-left: 12px; - .tiny-tabs__nav { - display: inline-flex; - justify-content: center; - float: none; - } .tiny-tabs__active-bar { - width: 40px !important; - height: 2px; + height: 3px; background-color: var(--ti-lowcode-setting-panel-tabs-item-title-active-color); } - .tiny-tabs__item__title { - margin-left: 6px; - } - } - .tiny-tabs__header { - padding-bottom: 12px; } + .tiny-tabs__content { flex: 1; overflow-y: auto; @@ -81,7 +70,8 @@ export default { margin: 0; } .tiny-tabs__item { - margin-right: 26px; + flex: 1; + background-color: var(--ti-lowcode-setting-panel-bg-color); color: var(--ti-lowcode-setting-panel-tabs-item-title-color); &:hover { color: var(--ti-lowcode-setting-panel-tabs-item-title-hover-color); @@ -89,6 +79,14 @@ export default { &.is-active { color: var(--ti-lowcode-setting-panel-tabs-item-title-active-color); } + + .tiny-tabs__item__title { + padding-bottom: 2px; + } + } + + .tiny-tabs__nav-wrap-not-separator::after { + z-index: 2; } } diff --git a/packages/plugins/block/src/BlockEventList.vue b/packages/plugins/block/src/BlockEventList.vue index 1f058d428..25bedb507 100644 --- a/packages/plugins/block/src/BlockEventList.vue +++ b/packages/plugins/block/src/BlockEventList.vue @@ -83,7 +83,7 @@ export default { } .icon-plus { margin-right: 6px; - stroke: var(--ti-lowcode-base-text-color-3); + stroke: var(--te-common-text-weaken); } } diff --git a/packages/plugins/block/src/BlockPropertyList.vue b/packages/plugins/block/src/BlockPropertyList.vue index b786354e4..c94ba9bf2 100644 --- a/packages/plugins/block/src/BlockPropertyList.vue +++ b/packages/plugins/block/src/BlockPropertyList.vue @@ -104,7 +104,7 @@ export default { } .icon-plus { margin-right: 6px; - stroke: var(--ti-lowcode-base-text-color-3); + stroke: var(--te-common-text-weaken); } } diff --git a/packages/plugins/datasource/src/DataSourceRemoteDataResult.vue b/packages/plugins/datasource/src/DataSourceRemoteDataResult.vue index f617f188e..ed81a4a5a 100644 --- a/packages/plugins/datasource/src/DataSourceRemoteDataResult.vue +++ b/packages/plugins/datasource/src/DataSourceRemoteDataResult.vue @@ -105,7 +105,7 @@ export default { z-index: 9999; .tiny-button { border-radius: 4px; - border-color: var(--ti-lowcode-button-default-border-color); + border-color: var(--te-common-border-default); } } diff --git a/packages/plugins/materials/src/meta/block/src/BlockGroup.vue b/packages/plugins/materials/src/meta/block/src/BlockGroup.vue index aecd230ba..ec2a11eaf 100644 --- a/packages/plugins/materials/src/meta/block/src/BlockGroup.vue +++ b/packages/plugins/materials/src/meta/block/src/BlockGroup.vue @@ -408,23 +408,6 @@ export default { width: calc(100% - 36px); } - .blocks-header-icon { - width: 28px; - height: 28px; - font-size: 16px; - color: var(--ti-lowcode-toolbar-breadcrumb-color); - background: var(--ti-lowcode-canvas-wrap-bg); - border: 1px solid var(--ti-lowcode-toolbar-border-color); - border-radius: 2px; - display: inline-flex; - justify-content: center; - align-items: center; - cursor: pointer; - &:hover { - color: var(--ti-lowcode-toolbar-icon-color); - background: var(--ti-lowcode-button-hover-bg); - } - } .add-group-btn { font-size: 16px; width: 32px; diff --git a/packages/settings/styles/src/components/background/BackgroundImageSetting.vue b/packages/settings/styles/src/components/background/BackgroundImageSetting.vue index 015440aad..eaa75a620 100644 --- a/packages/settings/styles/src/components/background/BackgroundImageSetting.vue +++ b/packages/settings/styles/src/components/background/BackgroundImageSetting.vue @@ -169,13 +169,13 @@ export default { .row-content { flex: auto; display: flex; - border: 1px solid var(--ti-lowcode-tabs-border-color); - + border: 1px solid var(--te-common-border-default); + color: var(--te-common-text-primary); .row-content-item { flex: 1; padding: 4px 0; - color: var(--ti-lowcode-toolbar-breadcrumb-color); - background: var(--ti-lowcode-canvas-wrap-bg); + color: var(--te-common-text-secondary); + background: var(--te-common-bg-container); position: relative; display: flex; justify-content: center; @@ -194,13 +194,13 @@ export default { } &:hover { - color: var(--ti-lowcode-toolbar-icon-color); - background-color: var(--ti-lowcode-button-hover-bg); + color: var(--te-common-text-primary); + background-color: var(--te-common-bg-container); } &.selected { - color: var(--ti-lowcode-toolbar-icon-color); - background-color: var(--ti-lowcode-radio-button-active-bg); + color: var(--te-common-text-primary); + background-color: var(--te-common-bg-prompt); } .overflow-svg { diff --git a/packages/settings/styles/src/components/background/LinearGradient.vue b/packages/settings/styles/src/components/background/LinearGradient.vue index 2a34f36e9..56afcae2d 100644 --- a/packages/settings/styles/src/components/background/LinearGradient.vue +++ b/packages/settings/styles/src/components/background/LinearGradient.vue @@ -79,9 +79,8 @@ const updateStyle = (property) => { emit('updateStyle', property) } -const inputAngle = (val) => { - state.angle = Number(val) - rotateAngle() +const angleChange = () => { + updateStyle({ [BACKGROUND_PROPERTY.BackgroundImage]: `linear-gradient(${state.angle}deg, black, white)` }) } const rotateAngle = () => { @@ -89,6 +88,11 @@ const rotateAngle = () => { angleChange() } +const inputAngle = (val) => { + state.angle = Number(val) + rotateAngle() +} + const counterclockwiseRotate = () => { state.angle = state.angle % DAUBLE_PI_DEG state.angle -= QUARTER_PI_DEG @@ -126,10 +130,6 @@ const handleClickAngle = (e) => { rotateAngle() } -const angleChange = () => { - updateStyle({ [BACKGROUND_PROPERTY.BackgroundImage]: `linear-gradient(${state.angle}deg, black, white)` }) -} - const updateGradient = ({ repeat }) => { updateStyle({ [BACKGROUND_PROPERTY.BackgroundRepeat]: repeat ?? '' }) } @@ -142,7 +142,7 @@ onMounted(() => { state.angle = angleMatch ? Number(angleMatch[1]) : ONE_PI_DEG rotateAngle() - const rColor = /\#(?:[a-f0-9]{6}|[a-f0-9]{3})/ // #fff | #fff + const rColor = /#(?:[a-f0-9]{6}|[a-f0-9]{3})/ // #fff | #fff const rLengthPercentage = /(?:[+-]?\d*\.?\d+)(?:%|[a-z]+)?/ // .5 5px 50% const rLinearColorStop = new RegExp(`${rColor.source}(?:\\s+${rLengthPercentage.source})?`) const rComma = /\s*,\s*/ diff --git a/packages/settings/styles/src/components/spacing/SpacingGroup.vue b/packages/settings/styles/src/components/spacing/SpacingGroup.vue index 9379bcee4..056dc3ace 100644 --- a/packages/settings/styles/src/components/spacing/SpacingGroup.vue +++ b/packages/settings/styles/src/components/spacing/SpacingGroup.vue @@ -583,10 +583,6 @@ export default { .reference-wrapper { & > div { padding: 2px; - - &.active { - background: var(--ti-lowcode-button-hover-bg); - } } } } diff --git a/packages/settings/styles/src/components/typography/TypographyMore.vue b/packages/settings/styles/src/components/typography/TypographyMore.vue index 5a31e1a3d..88d858265 100644 --- a/packages/settings/styles/src/components/typography/TypographyMore.vue +++ b/packages/settings/styles/src/components/typography/TypographyMore.vue @@ -199,7 +199,6 @@ export default { &:hover { color: var(--ti-lowcode-toolbar-icon-color); - background-color: var(--ti-lowcode-button-hover-bg); } &:not(:last-child)::after { diff --git a/packages/theme/base/src/common.less b/packages/theme/base/src/common.less index d529ca58d..8d9fb5308 100644 --- a/packages/theme/base/src/common.less +++ b/packages/theme/base/src/common.less @@ -27,7 +27,7 @@ --te-common-border-disabled: var(--te-base-dark-5); // 线条-禁用色 #dbdbdb --te-common-border-secondary: var(--te-base-gray-31); // 线条-次要按钮描边色 #595959 --te-common-border-prompt: var(--te-base-gray-13); // 线条-三级按钮默认色/表单内按钮 #dbdbdb - --te-common-border-hover: var(--te-base-gray-18); // 线条-按钮边框悬浮色 #c2c2c2 + --te-common-border-hover: var(--te-base-gray-18); // 线条-按钮边框悬浮色/复选框/单选框，欧仁边框色 #c2c2c2 --te-common-border-divider: var(--te-base-gray-11); //线条-白色背景分割线颜色 #ebebeb --te-common-border-bg-divider: var(--te-base-gray-13); // 线条-灰色背景分割线颜色/表头分割线/选块分割线 #dbdbdb --te-common-border-checked: var(--te-base-blue-6); // 线条 选中色 #1476ff @@ -45,7 +45,7 @@ --te-common-bg-tag: var(--te-base-green-14); // tag标签-背景色 #e6f2d5 --te-common-bg-default: var(--te-base-gray-1); // 白色背景-输入框背景/面板背景色 #fff --te-common-bg-component: var(--te-base-gray-1); // 白色背景-输入框等组件默认背景/面板背景色 #fff - --te-common-bg-disabled: var(--te-base-gray-6); // 禁用/标签 背景色 #f0f0f0 + --te-common-bg-disabled: var(--te-base-gray-6); // 禁用/标签/下拉框多选标签 背景色 #f0f0f0 } :root[data-theme='dark'] { @@ -92,5 +92,5 @@ --te-common-bg-tag: var(--te-base-dark-28); // tag标签-背景色 #1d312a --te-common-bg-default: var(--te-base-dark-27); // 深色背景-输入框背景/面板背景色 #212329 --te-common-bg-component: var(--te-base-gray-1); // 深色背景-输入框等组件默认背景/面板背景色 #212329 - --te-common-bg-disabled: var(--te-base-dark-29); // tag标签-背景色 #2a2c31 + --te-common-bg-disabled: var(--te-base-dark-29); // 禁用/标签/下拉框多选标签 背景色 #2a2c31 } diff --git a/packages/theme/base/src/component-common.less b/packages/theme/base/src/component-common.less index a8436c197..046ffa665 100644 --- a/packages/theme/base/src/component-common.less +++ b/packages/theme/base/src/component-common.less @@ -1,5 +1,3 @@ -@import './var-component.less'; - // 1、select 下拉框组件 .tiny-select { .tiny-input { @@ -184,6 +182,7 @@ .tiny-tabs__header { .tiny-tabs__item__title { padding: 0 12px; + line-height: 2; } .tiny-tabs__nav { display: flex; @@ -194,11 +193,9 @@ .tiny-tabs__item { flex-grow: 1; font-size: var(--te-base-font-size-base); - height: 24px; - line-height: 24px; color: var(--te-common-text-secondary); background-color: var(--te-common-bg-container); - // min-width: 120px; + height: auto; text-align: center; &.is-active { color: var(--te-common-text-primary); @@ -464,7 +461,7 @@ .tiny-radio { margin-right: 20px; .tiny-radio__inner { - border: 1px solid var(--te-common-border-hover); // 单选待确认 + border: 1px solid var(--te-common-border-hover); } .tiny-radio__label { font-size: var(--te-base-font-size-base); @@ -485,7 +482,7 @@ } .tiny-radio-button__orig-radio:checked { & + .tiny-radio-button__inner { - background-color: var(--te-common-bg-primary-checked); // 待确认,原来： --te-common-bg-primary + background-color: var(--te-common-bg-primary-checked); border-color: var(--te-common-border-secondary); &:hover { box-shadow: none; @@ -509,7 +506,7 @@ } .tiny-checkbox__inner { border-radius: var(--te-base-border-radius-1); - border: 1px solid var(--te-common-border-hover); // 待确认 + border: 1px solid var(--te-common-border-hover); line-height: 24px; } } @@ -590,7 +587,7 @@ &[x-placement^='top'] { .popper__arrow { &.popper__arrow::after { - border-top-color: var(--te-common-text-inverse); // 等待确认 + border-top-color: var(--te-common-text-inverse); } } } @@ -726,19 +723,17 @@ // 21、progress进度条 .tiny-progress.tiny-progress--line.progress-first { - .component-css-vars-progress(); &.tiny-progress-bar__outer { - background-color: var(--te-common-border-divider); // 待确认 + background-color: var(--te-common-border-divider); } .tiny-progress__text { margin-left: 12px; - color: var(--te-common-text-primary); // 待确认 + color: var(--te-common-text-primary); } } // 22、开关 .tiny-switch { - .component-css-vars-switch(); background-color: var(--te-common-bg-disabled); // 待确认是用背景色 还是线条色 &.tiny-switch-checked { background-color: var(--te-common-bg-primary-checked); diff --git a/packages/theme/base/src/page/base-config-page.less b/packages/theme/base/src/page/base-config-page.less index dd3439835..4b3b8e899 100644 --- a/packages/theme/base/src/page/base-config-page.less +++ b/packages/theme/base/src/page/base-config-page.less @@ -121,7 +121,7 @@ td { } .global-desc-info { - color: var(--ti-lowcode-common-text-desc-color); + color: #808080; } .text-ellipsis-multiple { diff --git a/packages/theme/base/src/var-component.less b/packages/theme/base/src/var-component.less deleted file mode 100644 index add9e7a44..000000000 --- a/packages/theme/base/src/var-component.less +++ /dev/null @@ -1,15 +0,0 @@ -.component-css-vars-progress() { - --ti-progress-bar-outer-bg-color: var(--te-common-border-divider); - --ti-progress-text-font-color: var(--te-common-text-primary); -} - -.component-css-vars-switch() { - --ti-switch-bg-color: var(--te-common-bg-disabled); //存疑 是用背景色 还是线条色 - --ti-switch-checked-bg-color: var(--te-base-blue-6); // 存疑 - --ti-switch-after-bg-color: var(--te-common-bg-default); -} - -.component-css-vars-dropdown() { - --ti-dropdown-trigger-font-color: #adb0b8; //存疑 - --ti-dropdown-caret-hover-bg-color: #8a8e99; // 8a8e99 -} 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/canvas.less b/packages/theme/dark/canvas.less index 9201f8342..8bf0cd027 100644 --- a/packages/theme/dark/canvas.less +++ b/packages/theme/dark/canvas.less @@ -6,7 +6,7 @@ --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-color: var(--te-common-text-weaken); --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); @@ -24,5 +24,5 @@ --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-menu-item-disabled-color: var(---te-common-text-weaken); } diff --git a/packages/theme/dark/index.less b/packages/theme/dark/index.less index 8fdcaa2be..a4f8c143d 100644 --- a/packages/theme/dark/index.less +++ b/packages/theme/dark/index.less @@ -1,4 +1,5 @@ // 主题配置优先于公共配置 +@import './base.less'; @import './variable.less'; @import './block.less'; @import './life-cycles.less'; diff --git a/packages/theme/dark/metaComponent.less b/packages/theme/dark/metaComponent.less index cea6734aa..b185a2e41 100644 --- a/packages/theme/dark/metaComponent.less +++ b/packages/theme/dark/metaComponent.less @@ -9,7 +9,7 @@ // MetaCodeEditor --ti-lowcode-meta-codeEditor-color: #d9d9d9; - --ti-lowcode-meta-codeEditor-border-color: var(--ti-lowcode-button-default-border-color); + --ti-lowcode-meta-codeEditor-border-color: var(--te-common-border-default); --ti-lowcode-meta-codeEditor-hover-color: #fff; --ti-lowcode-meta-codeEditor-border-hover-color: #6b6b6b; } diff --git a/packages/theme/dark/settings.less b/packages/theme/dark/settings.less index fe74f0cdc..db48b7a56 100644 --- a/packages/theme/dark/settings.less +++ b/packages/theme/dark/settings.less @@ -37,7 +37,7 @@ --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-dropdown-list-tips-color: var(---te-common-text-weaken); } :root { diff --git a/packages/theme/dark/tutorial.less b/packages/theme/dark/tutorial.less index 28f063eef..f872e57f7 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-hover-bg-color: var(--te-common-bg-container); } diff --git a/packages/theme/dark/variable.less b/packages/theme/dark/variable.less index beed6faae..6e0dd680b 100644 --- a/packages/theme/dark/variable.less +++ b/packages/theme/dark/variable.less @@ -221,42 +221,8 @@ --ti-lowcode-select-tags-bg-color: #5e5e5e; // 下拉框suffix图标悬浮颜色 --ti-lowcode-select-suffix-icon-color-hover: #fff; - // select 下拉框背景色 - --ti-lowcode-dropdown-bg-color: #202020; - // select 下拉面板边框颜色 - --ti-lowcode-dropdown-border-color: #333; - // select 下拉面板选型字体颜色 - --ti-lowcode-dropdown-item-text-color: #d9d9d9; - // select 下拉框选项hover背景色 - --ti-lowcode-dropdown-item-hover-bg-color: var(--ti-lowcode-common-component-bg); - // select 下拉框选项选中背景色 - --ti-lowcode-dropdown-item-selected-bg: var(--ti-lowcode-common-component-hover-bg); - // select 下拉框选项选中字体颜色 - --ti-lowcode-dropdown-item-selected-color: #ebebeb; - // select 下拉框选项hover字体颜色 - --ti-lowcode-dropdown-item-hover-text-color: #ebebeb; - // button info 字体颜色 - --ti-lowcode-button-info-color: #fff; - // button default 背景颜色 - --ti-lowcode-button-default-bg: transparent; - // 按钮hover字体颜色 - --ti-lowcode-button-default-hover-color: #fff; - // 按钮hover背景色 - --ti-lowcode-button-default-hover-bg: #6b6b6b; - --ti-lowcode-button-default-hover-border-color: #6b6b6b; - // 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-border-color: #333; - // 组件icon颜色 --ti-lowcode-component-icon-color: #d9d9d9; - // 组件item hover 背景色 - --ti-lowcode-component-item-hover-bg: #4d4d4d; // 左侧插件激活背景色 --ti-lowcode-left-panel-active-bg: #2f2f2f; // 左侧插件激活边框色 @@ -264,10 +230,6 @@ // 左侧按钮边框色 --ti-lowcode-left-button-border-color: #212121; - // list-item 项背景色 - --ti-lowcode-list-item-bg: #333; - // list-item 项激活背景色 - --ti-lowcode-list-item-active-bg: #404040; // radio 按钮组激活背景色 --ti-lowcode-radio-button-active-bg: #2b2b2b; // grid 布局设置按钮字体颜色 @@ -429,8 +391,6 @@ //左侧插件栏hover背景色 --ti-plugins-hover-bg-color: #ffffff; - //左侧插件栏hover文字色 - --ti-plugins-hover-text-color: #4d4d4d; //左侧插件栏hover边框色 --ti-plugins-hover-border-color: #9e9e9e; // 表格行间背景色 @@ -443,9 +403,4 @@ --ti-lowcode-meta-list-item-border-color: #2b2b2b; // 属性设置、事件设置等列表的背景色 --ti-lowcode-meta-list-item-bg-color: #363636; - - // 空数据图标颜色 - --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); } diff --git a/packages/theme/light/block.less b/packages/theme/light/block.less index 9b3afa156..0d85bda2c 100644 --- a/packages/theme/light/block.less +++ b/packages/theme/light/block.less @@ -27,7 +27,7 @@ --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-desc-color: var(--te-common-text-weaken); --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); 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/index.less b/packages/theme/light/index.less index 66a84d889..60c943fad 100644 --- a/packages/theme/light/index.less +++ b/packages/theme/light/index.less @@ -1,4 +1,5 @@ // 主题配置优先于公共配置 +@import './base.less'; @import './variable.less'; @import './tutorial.less'; @import './help.less'; diff --git a/packages/theme/light/materials.less b/packages/theme/light/materials.less index eb46f29a3..b18119956 100644 --- a/packages/theme/light/materials.less +++ b/packages/theme/light/materials.less @@ -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(--te-common-bg-container); // 区块分组添加区块筛选项 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 210eb094d..49cf1a5a3 100644 --- a/packages/theme/light/metaComponent.less +++ b/packages/theme/light/metaComponent.less @@ -12,7 +12,7 @@ --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-icon-color: var(--ti-lowcode-base-text-color-3); + --ti-lowcode-meta-codeEditor-icon-color: var(--te-common-text-weaken); } // config-item label popover tips diff --git a/packages/theme/light/settings.less b/packages/theme/light/settings.less index c71950759..85b0ed336 100644 --- a/packages/theme/light/settings.less +++ b/packages/theme/light/settings.less @@ -37,7 +37,7 @@ --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-dropdown-list-tips-color: var(--te-common-text-weaken); } :root { diff --git a/packages/theme/light/toolbar.less b/packages/theme/light/toolbar.less index 3846b6caf..057378c2a 100644 --- a/packages/theme/light/toolbar.less +++ b/packages/theme/light/toolbar.less @@ -5,7 +5,7 @@ --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-hover-color: var(--te-common-bg-container); --ti-lowcode-toolbar-view-active-bg: rgb(235, 235, 235); // 相当于 规范中定义的 #191919 透明度5% --ti-lowcode-toolbar-left-icon-bg-hover: rgb(240, 240, 240); --ti-lowcode-toolbar-popover-bg: var(--ti-lowcode-base-gray-0); diff --git a/packages/theme/light/tutorial.less b/packages/theme/light/tutorial.less index 45404b2f6..39f0d5dbc 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-hover-bg-color: var(--te-common-bg-container); } diff --git a/packages/theme/light/variable.less b/packages/theme/light/variable.less index 82b8aeea0..92e4c59f8 100644 --- a/packages/theme/light/variable.less +++ b/packages/theme/light/variable.less @@ -14,7 +14,6 @@ --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; @@ -189,43 +188,8 @@ --ti-lowcode-select-tags-bg-color: #5959591a; // 下拉框suffix图标悬浮颜色 --ti-lowcode-select-suffix-icon-color-hover: var(--ti-lowcode-base-text-color); - // select 下拉框背景色 - --ti-lowcode-dropdown-bg-color: #202020; - // select 下拉面板边框颜色 - --ti-lowcode-dropdown-border-color: transparent; - // select 下拉面板选型字体颜色 - --ti-lowcode-dropdown-item-text-color: var(--ti-lowcode-base-text-color); - // select 下拉框背景色 - --ti-lowcode-dropdown-bg-color: #fff; - // select 下拉框选项hover背景色 - --ti-lowcode-dropdown-item-hover-bg-color: #f2f2f2; - // select 下拉框选项选中背景色 - --ti-lowcode-dropdown-item-selected-bg: #fff; - // select 下拉框选项选中字体颜色 - --ti-lowcode-dropdown-item-selected-color: var(--ti-lowcode-base-text-color-2); - // select 下拉框选项hover字体颜色 - --ti-lowcode-dropdown-item-hover-text-color: var(--ti-lowcode-base-text-color); - // button info 字体颜色 - --ti-lowcode-button-info-color: #fff; - // button default 背景颜色 - --ti-lowcode-button-default-bg: #fff; - // 按钮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-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-border-color: var(--ti-lowcode-common-primary-color); // 组件icon颜色 --ti-lowcode-component-icon-color: #8d8d8d; - // 组件item hover 背景色 - --ti-lowcode-component-item-hover-bg: #e3e3e3; // 左侧插件激活背景色 --ti-lowcode-left-panel-active-bg: #f2f2f2; // 左侧插件激活边框色 @@ -233,10 +197,6 @@ // 左侧tabs按钮边框色 --ti-lowcode-left-button-border-color: #ddd; - // list-item 项背景色 - --ti-lowcode-list-item-bg: #fafafa; - // list-item 项激活背景色 - --ti-lowcode-list-item-active-bg: #e9e9e9; // radio 按钮组激活背景色 --ti-lowcode-radio-button-active-bg: #9d9d9d; // grid 布局设置按钮字体颜色 @@ -423,10 +383,4 @@ --ti-lowcode-optionitem-border-color: rgba(0, 0, 0, 0.08); // 右侧optionitem的背景色 --ti-lowcode-optionitem-background-color: #fff; - - // 空数据图标颜色 - --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); } From 0b7348e1d33d931a8e4eed51747542595a92f1fb Mon Sep 17 00:00:00 2001 From: wenmine Date: Wed, 25 Sep 2024 17:35:34 +0800 Subject: [PATCH 04/14] feat(theme): common theme & fix review --- packages/common/component/MetaCodeEditor.vue | 6 +++--- packages/settings/styles/src/Main.vue | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/common/component/MetaCodeEditor.vue b/packages/common/component/MetaCodeEditor.vue index e415050b2..d693bfe6d 100644 --- a/packages/common/component/MetaCodeEditor.vue +++ b/packages/common/component/MetaCodeEditor.vue @@ -281,7 +281,7 @@ export default { align-items: center; width: 100%; height: 32px; - padding: 4px 8px; + padding: 4px; border: 1px solid var(--ti-lowcode-meta-codeEditor-border-color); border-radius: 6px; @@ -328,7 +328,7 @@ export default { color: var(--ti-lowcode-meta-code-editor-header-tips-container-color); .header-tips-title { - color: var(); + color: var(--te-common-text-weaken); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; @@ -357,7 +357,7 @@ export default { code { font-family: Microsoft YaHei, Microsoft YaHei-Normal; - color: var(); + color: var(--te-common-text-weaken); } } } diff --git a/packages/settings/styles/src/Main.vue b/packages/settings/styles/src/Main.vue index c8df17eda..9dc4b7298 100644 --- a/packages/settings/styles/src/Main.vue +++ b/packages/settings/styles/src/Main.vue @@ -205,7 +205,7 @@ export default {