feat(theme): change incorrect css variables and delete the ‘less’ file

designer-demo/package.json

@@ -4,14 +4,12 @@
   "version": "2.2.0",
   "type": "module",
   "scripts": {
-    "dev": "cross-env VITE_THEME=light vite",
-    "build:alpha": "cross-env NODE_OPTIONS=--max-old-space-size=8192 VITE_THEME=light vite build --mode alpha",
-    "build": "cross-env NODE_OPTIONS=--max-old-space-size=8192 VITE_THEME=light vite build"
+    "dev": "cross-env vite",
+    "build:alpha": "cross-env NODE_OPTIONS=--max-old-space-size=8192 vite build --mode alpha",
+    "build": "cross-env NODE_OPTIONS=--max-old-space-size=8192 vite build"
   },
   "dependencies": {
     "@opentiny/tiny-engine": "workspace:^",
-    "@opentiny/tiny-engine-theme-dark": "workspace:*",
-    "@opentiny/tiny-engine-theme-light": "workspace:*",
     "@opentiny/tiny-engine-utils": "workspace:*",
     "@opentiny/vue": "~3.20.0",
     "@opentiny/vue-design-smb": "~3.20.0",

designer-demo/src/main.js

@@ -15,7 +15,6 @@ import { registry } from './defineEntry.js'
 import { init } from '@opentiny/tiny-engine'
 import { configurators } from './configurators/'
 import 'virtual:svg-icons-register'
-import '@opentiny/tiny-engine-theme'
 
 init({
   registry,

designer-demo/src/preview.js

@@ -13,7 +13,6 @@
 import { initHook, HOOK_NAME, GenerateCodeService, Breadcrumb, Media, Lang } from '@opentiny/tiny-engine'
 import { initPreview } from '@opentiny/tiny-engine'
 import 'virtual:svg-icons-register'
-import '@opentiny/tiny-engine-theme'
 import { HttpService } from './composable'
 
 const beforeAppCreate = () => {

jsconfig.json

@@ -33,8 +33,6 @@
       "@opentiny/tiny-engine-toolbar-clean": ["packages/toolbars/clean/index"],
       "@opentiny/tiny-engine-toolbar-save": ["packages/toolbars/save/index"],
       "tiny-engine-canvas": ["packages/canvas/index"],
-      "@opentiny/tiny-engine-theme-dark": ["packages/theme/dark/index.less"],
-      "@opentiny/tiny-engine-theme-light": ["packages/theme/light/index.less"],
       "@opentiny/tiny-engine-svgs": ["packages/svgs/index"],
       "@opentiny/tiny-engine-plugin-materials/*": ["packages/plugins/materials/*"],
       "@opentiny/tiny-engine-plugin-state/*": ["packages/plugins/state/*"],
@@ -60,8 +58,6 @@
       "@opentiny/tiny-engine-toolbar-preview/*": ["packages/toolbars/preview/*"],
       "@opentiny/tiny-engine-toolbar-clean/*": ["packages/toolbars/clean/*"],
       "@opentiny/tiny-engine-toolbar-save/*": ["packages/toolbars/save/*"],
-      "@opentiny/tiny-engine-theme-dark/*": ["packages/theme/dark/*"],
-      "@opentiny/tiny-engine-theme-light/*": ["packages/theme/light/*"],
       "@opentiny/tiny-engine-svgs/*": ["packages/svgs/*"],
       "@opentiny/tiny-engine-utils": ["packages/utils/src/index.js"],
       "@opentiny/tiny-engine-webcomponent-core": ["packages/webcomponent/src/lib"],

packages/build/vite-config/src/vite-plugins/devAliasPlugin.js

@@ -50,8 +50,6 @@ const getDevAlias = (useSourceAlias) => {
     '@opentiny/tiny-engine-toolbar-save': path.resolve(basePath, 'packages/toolbars/save/index.js'),
     '@opentiny/tiny-engine-toolbar-setting': path.resolve(basePath, 'packages/toolbars/setting/index.js'),
     '@opentiny/tiny-engine-toolbar-collaboration': path.resolve(basePath, 'packages/toolbars/collaboration/index.js'),
-    '@opentiny/tiny-engine-theme-dark': path.resolve(basePath, 'packages/theme/dark/index.less'),
-    '@opentiny/tiny-engine-theme-light': path.resolve(basePath, 'packages/theme/light/index.less'),
     '@opentiny/tiny-engine-theme-base': path.resolve(basePath, 'packages/theme/base/src/index.js'),
     '@opentiny/tiny-engine-svgs': path.resolve(basePath, 'packages/svgs/index.js'),
     '@opentiny/tiny-engine-canvas/render': path.resolve(basePath, 'packages/canvas/render/index.ts'),
@@ -67,19 +65,6 @@ const getDevAlias = (useSourceAlias) => {
   }
 }
 
-const getThemePath = (theme, useSourceAlias) => {
-  if (!['light', 'dark'].includes(theme)) {
-    return ''
-  }
-
-  if (useSourceAlias) {
-    const basePath = useSourceAlias.basePath || path.resolve(process.cwd(), '..')
-    return path.resolve(basePath, `packages/theme/${theme}/index.less`)
-  }
-
-  return path.resolve(process.cwd(), `./node_modules/@opentiny/tiny-engine-theme-${theme}/dist/style.css`)
-}
-
 /**
  * 源码调试插件
  * 开启后，会指定  alias 到官方源码 package
@@ -95,8 +80,7 @@ export const devAliasPlugin = (env, useSourceAlias) => {
         return {
           resolve: {
             alias: {
-              ...getDevAlias(useSourceAlias),
-              '@opentiny/tiny-engine-theme': getThemePath(env.VITE_THEME, useSourceAlias)
+              ...getDevAlias(useSourceAlias)
             }
           }
         }
@@ -107,7 +91,6 @@ export const devAliasPlugin = (env, useSourceAlias) => {
           resolve: {
             alias: {
               // 构建不使用 alias
-              '@opentiny/tiny-engine-theme': getThemePath(env.VITE_THEME, false)
             }
           }
         }

packages/canvas/container/src/components/CanvasDivider.vue

@@ -220,7 +220,7 @@ export default {
   width: 24px;
   height: 24px;
   border-radius: 50%;
-  background-color: var(--te-canvas-container-bg-color);
+  background-color: var(--te-canvas-container-bg-color-white);
   cursor: pointer;
   z-index: 3;
   &.divider-vertical {

packages/canvas/styles/vars.less

@@ -31,6 +31,7 @@
   --te-canvas-container-border-color: var(--te-common-border-default);
 
   --te-canvas-container-bg-color: var(--te-common-bg-default);
+  --te-canvas-container-bg-color-white: var(--te-base-gray-0);
   --te-canvas-container-bg-color-hover: var(--te-common-bg-container);
   --te-canvas-container-bg-color-checked: var(--te-common-bg-primary-checked);
 

packages/design-core/package.json

@@ -68,8 +68,6 @@
     "@opentiny/tiny-engine-settings-panel": "workspace:*",
     "@opentiny/tiny-engine-svgs": "workspace:*",
     "@opentiny/tiny-engine-theme-base": "workspace:*",
-    "@opentiny/tiny-engine-theme-dark": "workspace:*",
-    "@opentiny/tiny-engine-theme-light": "workspace:*",
     "@opentiny/tiny-engine-toolbar-breadcrumb": "workspace:*",
     "@opentiny/tiny-engine-toolbar-clean": "workspace:*",
     "@opentiny/tiny-engine-toolbar-collaboration": "workspace:*",

packages/design-core/src/theme/dark.js

@@ -1 +0,0 @@
-import '@opentiny/tiny-engine-theme-dark'

packages/design-core/src/theme/light.js

@@ -1 +0,0 @@
-import '@opentiny/tiny-engine-theme-light'

packages/engine-cli/src/commands/generateConfig.js

@@ -24,18 +24,6 @@ export const generatePackageJson = (name, options, templatePath) => {
   const templatePackageJson = fs.readJSONSync(path.resolve(templatePath, 'package.json'))
 
   templatePackageJson.name = name
-  templatePackageJson.scripts['serve:frontend'] = templatePackageJson.scripts['serve:frontend'].replace(
-    /VITE_THEME=[^\s]+/,
-    `VITE_THEME=${options.theme}`
-  )
-  templatePackageJson.scripts.build = templatePackageJson.scripts.build.replace(
-    /VITE_THEME=[^\s]+/,
-    `VITE_THEME=${options.theme}`
-  )
-  templatePackageJson.scripts['build:alpha'] = templatePackageJson.scripts['build:alpha'].replace(
-    /VITE_THEME=[^\s]+/,
-    `VITE_THEME=${options.theme}`
-  )
 
   return templatePackageJson
 }

packages/engine-cli/template/designer/package.json

@@ -5,15 +5,13 @@
   "type": "module",
   "scripts": {
     "dev": "concurrently 'pnpm:serve:mock' 'pnpm:serve:frontend'",
-    "build:alpha": "cross-env NODE_OPTIONS=--max-old-space-size=8192 VITE_THEME=light vite build --mode alpha",
-    "build": "cross-env NODE_OPTIONS=--max-old-space-size=8192 VITE_THEME=light vite build --mode prod",
-    "serve:frontend": "cross-env VITE_THEME=light vite",
+    "build:alpha": "cross-env NODE_OPTIONS=--max-old-space-size=8192 vite build --mode alpha",
+    "build": "cross-env NODE_OPTIONS=--max-old-space-size=8192 vite build --mode prod",
+    "serve:frontend": "cross-env vite",
     "serve:mock": "node node_modules/@opentiny/tiny-engine-mock/dist/app.js"
   },
   "dependencies": {
     "@opentiny/tiny-engine": "2.2.0",
-    "@opentiny/tiny-engine-theme-dark": "2.2.0",
-    "@opentiny/tiny-engine-theme-light": "2.2.0",
     "@opentiny/tiny-engine-utils": "2.2.0",
     "@opentiny/vue": "~3.20.0",
     "@opentiny/vue-design-smb": "~3.20.0",

packages/engine-cli/template/designer/src/main.js

@@ -15,7 +15,6 @@ import { registry } from './defineEntry.js'
 import { init } from '@opentiny/tiny-engine'
 import { configurators } from './configurators/'
 import 'virtual:svg-icons-register'
-import '@opentiny/tiny-engine-theme'
 
 init({
   registry,

packages/engine-cli/template/designer/src/preview.js

@@ -13,7 +13,6 @@
 import { initHook, HOOK_NAME, GenerateCodeService, Breadcrumb, Media, Lang } from '@opentiny/tiny-engine'
 import { initPreview } from '@opentiny/tiny-engine'
 import 'virtual:svg-icons-register'
-import '@opentiny/tiny-engine-theme'
 import { HttpService } from './composable'
 
 const beforeAppCreate = () => {

packages/layout/src/Main.vue

@@ -78,7 +78,7 @@ export default {
 #tiny-engine {
   display: flex;
   flex-flow: column;
-  min-width: var(--base-min-width);
+  min-width: var(--te-base-min-width);
   height: 100vh;
   overflow: hidden;
   .tiny-engine-main {

packages/plugins/tree/src/styles/vars.less

@@ -3,5 +3,5 @@
   --te-tree-icon-color: var(--te-common-icon-secondary);
   --te-tree-bg-color-active: var(--te-common-bg-container);
   --te-tree-text-color: var(--te-common-text-primary);
-  --te-tree-block-text-color: var(--te-common-color-prompt-secondary);
+  --te-tree-block-text-color: var(--te-common-text-purple);
 }

packages/settings/design/src/App.vue

@@ -97,9 +97,9 @@ export default {
 
 <style lang="less">
 :root {
-  --ti-lowcode-common-secondary-text-color: #adb0b8;
-  --ti-lowcode-common-hover-bg-color: #f2f5fc;
-  --ti-lowcode-mask-bg: #fafafa;
+  --te-setting-design-secondary-text-color: #adb0b8;
+  --te-setting-design-hover-bg-color: #f2f5fc;
+  --te-lowcode-mask-bg: #fafafa;
   --max-height: calc(65vh - 70px);
 }
 html {
@@ -181,9 +181,8 @@ td {
 }
 .mask {
   .source-code {
-    --ti-lowcode-toolbar-bg: var(--ti-lowcode-mask-bg);
     .tiny-button {
-      --ti-button-info-normal-bg-color: #1476ff;
+      background-color: #1476ff;
     }
   }
 }
@@ -212,7 +211,7 @@ td {
   }
 
   .canvas {
-    background: var(--ti-lowcode-common-hover-bg-color);
+    background: var(--te-setting-design-hover-bg-color);
     padding: 20px;
     margin: 0 20px;
   }

packages/settings/design/src/components/ArrayConfigItemForm.vue

@@ -209,8 +209,8 @@ export default {
     }
     .tiny-form-item__content {
       .editor-warp {
-        --ti-lowcode-meta-codeEditor-border-color: #595959;
-        --ti-lowcode-meta-codeEditor-color: #595959;
+        border-color: #595959;
+        color: #595959;
       }
     }
   }

packages/settings/design/src/components/PropertyCanvas.vue

@@ -282,7 +282,7 @@ export default {
         padding: 3px 10px;
         cursor: pointer;
         &.active {
-          background-color: var(--ti-lowcode-common-hover-bg-color);
+          background-color: var(--te-setting-design-hover-bg-color);
         }
         .item-input .action-icon {
           display: none;

packages/settings/design/src/components/PropertyList.vue

@@ -94,7 +94,7 @@ export default {
 }
 .property-list-tips {
   font-size: 12px;
-  color: var(--ti-lowcode-common-secondary-text-color);
+  color: var(--te-setting-design-secondary-text-color);
 }
 .help-icon {
   margin-left: 3px;
@@ -116,7 +116,7 @@ export default {
   border: 1px solid #e6e6e6;
 
   &:hover {
-    background: var(--ti-lowcode-common-hover-bg-color);
+    background: var(--te-setting-design-hover-bg-color);
   }
 }
 </style>

packages/settings/design/src/components/SettingPanel.vue

@@ -369,9 +369,6 @@ export default {
     flex-wrap: wrap;
     width: 100%;
   }
-  :deep(.tiny-switch) {
-    width: var(--ti-switch-width);
-  }
   .setting-radio-group {
     &.setting-layout {
       width: 100%;

packages/settings/styles/src/components/inputs/ModalMask.vue

@@ -107,12 +107,13 @@ export default {
     box-sizing: border-box;
   }
   .modal-padding {
-    padding: var(--ti-modal-padding-y, 14px) var(--ti-modal-padding-x, 20px);
+    padding: var(--te-styles-modal-padding-y) var(--te-styles-modal-padding-x);
   }
   .align-body {
-    right: var(--modal-right-offset, 280px);
+    right: var(--te-styles-modal-right-offset-first);
     left: calc(
-      100% - var(--modal-right-offset, 287px) - var(--modal-right-offset, 280px) - var(--modal-spaceing, 16px)
+      100% - var(--te-styles-modal-right-offset-first) - var(--te-styles-modal-right-offset-second) -
+        var(--te-styles-modal-spacing)
     );
   }
 }

packages/settings/styles/src/components/typography/TypographyGroup.vue

@@ -687,8 +687,4 @@ export default {
     }
   }
 }
-
-:deep(.tiny-select .tiny-input .tiny-input__inner) {
-  padding: 0 var(--ti-input-suffix-padding-right) 0 var(--ti-input-suffix-padding-left);
-}
 </style>

packages/settings/styles/src/styles/vars.less

@@ -68,4 +68,10 @@
   // 样式面板-文本
   --te-styles-typography-bg-color: var(--te-common-bg-container);
   --te-styles-typography-bg-color-hover: var(--te-common-bg-gray-hover);
+
+  --te-styles-modal-padding-y: var(--te-base-modal-padding-y);
+  --te-styles-modal-padding-x: var(--te-base-modal-padding-x);
+  --te-styles-modal-right-offset-first: var(--te-base-modal-offset-1);
+  --te-styles-modal-right-offset-second: var(--te-base-modal-offset-2);
+  --te-styles-modal-spacing: var(--te-base-space-16);
 }

packages/theme/base/src/base.less

@@ -280,6 +280,7 @@
   --te-base-space-2: 2px; // 下拉面板距离上部输入框的间距
   --te-base-space-6: 6px; // 其他间距-3
   --te-base-space-10: 10px; // 其他间距-4
+  --te-base-space-16: 16px;
 
   /**
    * 1.3 字号
@@ -317,4 +318,13 @@
   --te-base-border-radius-2: 6px; // 圆角-2
   --te-base-border-radius-3: 8px; // 圆角-3
   --te-base-border-radius-4: 50%; // 圆形
+
+  /**
+  * 基础配置
+  **/
+  --te-base-min-width: 1280px;
+  --te-base-modal-offset-1: 287px;
+  --te-base-modal-offset-2: 280px;
+  --te-base-modal-padding-y: 14px;
+  --te-base-modal-padding-x: 20px;
 }