// 亮色主题
:root {
  // 基础配置，前缀为 --base
  --base-min-width: 1280px;

  // ------ 主要的公共主题色，前缀为 --ti-lowcode-common -------
  --ti-lowcode-common-primary-color: var(--ti-lowcode-base-primary-color-2);
  --ti-lowcode-common-primary-hover-color: var(--ti-lowcode-base-primary-color-2); // hover时，颜色不变
  --ti-lowcode-common-component-bg: #fff;
  --ti-lowcode-common-component-hover-bg: #f5f5f5;
  --ti-lowcode-common-layout-bg: #fff;
  --ti-lowcode-common-header-bg: #eee;
  --ti-lowcode-common-primary-text-color: var(--ti-lowcode-base-text-color);
  --ti-lowcode-common-secondary-text-color: #c2c2c2;
  --ti-lowcode-common-text-title-color: var(--ti-lowcode-base-text-color);
  --ti-lowcode-common-text-main-color: var(--ti-lowcode-base-text-color-1);
  --ti-lowcode-common-text-placeholder-color: var(--ti-lowcode-base-text-color-1);
  --ti-lowcode-common-text-color-1: #6a6a6a;
  --ti-lowcode-common-text-color-2: #d9d9d9;
  --ti-lowcode-common-text-color-3: #fff;
  --ti-lowcode-common-text-color-4: #50d4ab;
  --ti-lowcode-common-text-color-5: var(--ti-lowcode-base-text-color-3);
  --ti-lowcode-common-text-color-6: var(--ti-lowcode-base-text-color-1);
  --ti-lowcode-common-border-color-1: #dfe1e6;
  --ti-lowcode-common-border-color-3: #606165;
  --ti-lowcode-common-border-color-4: #dfe1e6;
  --ti-lowcode-common-hover-bg-1: #f5f5f5;
  --ti-lowcode-common-third-text-color: #ababab;
  --ti-lowcode-common-error-color: var(--ti-lowcode-base-error-color);
  --ti-lowcode-common-empty-text-color: var(--ti-lowcode-base-gray-50);

  --ti-lowcode-info-color: var(--ti-lowcode-base-prompt-color);
  --ti-lowcode-warning-color: var(--ti-lowcode-base-warn-color);
  --ti-lowcode-warning-color-1: var(--ti-lowcode-base-warn-color-1);
  --ti-lowcode-dark-1: #464c59;

  // ------ 公共组件的主题色，前缀为 --ti-lowcode-component-组件名 -------
  --ti-lowcode-component-btn-default-color: var(--ti-lowcode-base-primary-color-1); // 默认按钮颜色
  --ti-lowcode-component-btn-default-disabled-color: var(--ti-lowcode-common-secondary-text-color); // 默认禁用颜色
  --ti-lowcode-component-btn-default-hover-color: var(--ti-lowcode-common-text-main-color); // 默认按钮 hover 颜色
  --ti-lowcode-component-btn-default-border-color: var(--ti-lowcode-base-primary-color-1); // 默认按钮边框色
  --ti-lowcode-component-btn-default-border-hover-color: var(
    --ti-lowcode-common-text-main-color
  ); // 默认按钮 hover 边框色
  --ti-lowcode-component-search-bg: #fff; // tinysearch  背景色
  // svgButton
  --ti-lowcode-component-svg-button-color: var(--ti-lowcode-base-text-color);
  --ti-lowcode-component-svg-button-hover-color: var(--ti-lowcode-base-text-color);
  --ti-lowcode-component-svg-button-hover-bg-color: var(--te-common-bg-prompt);
  --ti-lowcode-component-svg-button-active-color: var(--ti-lowcode-base-text-color);
  --ti-lowcode-component-svg-button-active-bg-color: var(--te-common-bg-prompt);

  // 关闭按钮
  --ti-lowcode-component-close-icon-text-color: var(--ti-lowcode-base-text-color); // 关闭按钮默认颜色
  --ti-lowcode-component-close-icon-text-hover-color: var(
    --ti-lowcode-common-primary-text-color
  ); // 关闭按钮 hover 颜色

  // 插件面板
  --ti-lowcode-plugin-panel-title-color: rgb(25, 25, 25); // 插件面板标题色
  --ti-lowcode-plugin-panel-title-font-weight: 700; // 插件面板标题加粗效果
  --ti-lowcode-plugin-panel-bg: var(--ti-lowcode-common-component-bg); // 插件面板背景色
  --ti-lowcode-plugin-panel-border-right-color: var(--ti-lowcode-common-border-color-4); // 插件面板右侧边框色
  --ti-lowcode-plugin-panel-header-border-bottom-color: #ebebeb; // 插件面板头部区域底部边框线颜色

  // 插件设置面板
  --ti-lowcode-plugin-setting-panel-bg: var(--ti-lowcode-common-component-bg); // 插件设置面板背景色

  // 设置面板
  --ti-lowcode-component-setting-panel-label-color: var(--ti-lowcode-common-text-main-color);
  --ti-lowcode-component-setting-panel-icon-color: var(--ti-lowcode-common-text-main-color);

  // ------ 各个模块的主题色，前缀为 --ti-lowcode-模块名 -------

  --ti-lowcode-design-plugin-color: var(--ti-lowcode-base-gray-90);
  --ti-lowcode-design-toolbar-icon-color: #8a8e99;

  // 物料-组件列表
  --ti-lowcode-material-component-list-border-color: var(--ti-lowcode-common-border-color-4);
  --ti-lowcode-material-component-list-hover-bg: var(--ti-lowcode-common-component-hover-bg);

  // 页面管理
  --ti-lowcode-page-tree-color: var(--ti-lowcode-common-text-main-color);
  --ti-lowcode-page-tree-hover-color: var(--ti-lowcode-common-primary-text-color);

  // 数据源
  --ti-lowcode-datasource-list-color: var(--ti-lowcode-common-text-main-color);

  // 状态管理
  --ti-lowcode-data-list-color: var(--ti-lowcode-common-text-main-color);
  // 状态管理面板头部的底部边框色
  --ti-lowcode-data-header-border-bottom-color: var(--ti-lowcode-common-border-color-4);
  // 状态管理示例背景色
  --ti-lowcode-data-example-bg-color: var(--ti-lowcode-dark-1);
  // 状态管理示例文字色
  --ti-lowcode-data-example-color: var(--ti-lowcode-common-text-color-2);
  // 添加高级属性文字颜色
  --ti-lowcode-data-advanced-text-color: #252b3a;
  // 添加高级属性 hover 文字颜色
  --ti-lowcode-data-advanced-text-hover-color: #5073e5;
  // 状态管理按激活背景色
  --ti-lowcode-data-radio-group-active-bg: var(--ti-lowcode-base-gray-0);
  // 状态管理按背景色
  --ti-lowcode-data-radio-group-bg: transparent;

  // 教程
  --ti-lowcode-tutorial-list-item-color: var(--ti-lowcode-common-text-main-color);

  // 头部工具栏背景色
  --ti-lowcode-toolbar-bg: #fafafa;
  // 头部工具栏选中背景色
  --ti-lowcode-toolbar-active-bg: transparent;
  // 头部工具栏边框色
  --ti-lowcode-toolbar-border-color: var(--ti-lowcode-base-default-button-border-color);
  // 头部工具栏icon颜色
  --ti-lowcode-toolbar-icon-color: #404040;
  // 头部工具栏icon颜色
  --ti-lowcode-toolbar-icon-active-color: #4f77ff;
  // 头部工具栏更多more图标颜色
  --ti-lowcode-toolbar-more-color: #000;
  // 头部工具栏更多more图标hover颜色
  --ti-lowcode-toolbar-more-hover-color: var(--te-common-icon-secondary);

  // 头部工具栏面包屑字体颜色
  --ti-lowcode-toolbar-breadcrumb-color: var(--ti-lowcode-base-gray-60);
  // 头部工具栏画布大小文本hover背景色 && 头部弹框背景色 && context-menu 背景色 && 大纲树节点hover背景色 && 日期组件背景色
  --ti-lowcode-toolbar-view-hover-bg: #e9e9e9;
  // 头部工具栏i18n国际化字体颜色
  --ti-lowcode-toolbar-i18n-color: red;
  // 应用发布弹窗图标颜色
  --ti-lowcode-toolbar-publish-icon-color: var(--ti-lowcode-common-primary-text-color);
  // 头部左侧logo颜色
  --ti-lowcode-logo-color: #8a8e99;
  // 头部左侧logo颜色
  --ti-lowcode-logo-active-color: rgba(0, 0, 0, 0.5);
  // 中间画布边框色
  --ti-lowcode-canvas-border-color: #999;
  // 右侧属性面板tab页签背景色
  --ti-lowcode-tabs-bg: #ebebeb;
  // 右侧属性面板tab页签边框色
  --ti-lowcode-tabs-border-color: #ddd;
  // 右侧属性面板tab页签激活状态背景色
  --ti-lowcode-tabs-active-bg: #f3f3f3;
  // 右侧属性面板折叠面板展开内容边框色
  --ti-lowcode-collapse-active-border-color: #333;
  // 中间画布外框容器背景色
  --ti-lowcode-canvas-wrap-bg: #e5e5e5;
  // 中间画布拖拽宽度按钮背景色
  --ti-lowcode-canvas-handle-bg: red;
  // 中间画布拖拽宽度按钮背景色
  --ti-lowcode-canvas-handle-hover-bg: #5e7ce0;
  // 中间画布底部面包屑背景色
  --ti-lowcode-breadcrumb-bg: #fff;
  // 中间画布底部面包屑字体颜色
  --ti-lowcode-breadcrumb-color: #999;
  // 中间画布底部面包屑三角箭头颜色
  --ti-lowcode-breadcrumb-icon-color: #ccc;
  // 弹框遮罩层背景色
  --ti-lowcode-mask-modal-bg: rgba(0, 0, 0, 0.2);
  // 引导提示框遮罩层背景色
  --ti-lowcode-guide-mask-bg: rgba(0, 0, 0, 0.5);
  // 引导高亮遮罩层背景色
  --ti-lowcode-guide-highlight-mask-bg: rgba(200, 200, 200, 0.2);
  // 引导弹框背景色
  --ti-lowcode-guide-dialog-bg: #fff;
  // 引导弹框标题，按钮文本字体色
  --ti-lowcode-guide-title-color: #252b3a;
  // 引导弹框描述文本字体色
  --ti-lowcode-guide-message-color: #575d6c;

  // collapse 折叠面板激活后字体颜色
  --ti-lowcode-collapse-active-color: #252b3a;
  // input 框背景色
  --ti-lowcode-input-bg: #fff;
  // switch 圆点背景色
  --ti-lowcode-switch-after-bg: #fff;
  // switch 圆点 hover 背景色
  --ti-lowcode-switch-after-hover-bg: #f5f5f5;
  // switch 圆点 checked 背景色
  --ti-lowcode-switch-after-checked-bg: #fff;

  // -----下拉框相关主题配置-----
  // 下拉框聚焦时边框颜色
  --ti-lowcode-select-focus-border-color: var(--ti-lowcode-base-default-button-border-hover-color);
  // 下拉框选中标签字体颜色
  --ti-lowcode-select-tags-text-color: var(--ti-lowcode-base-text-color-3);
  // 下拉框选中标签背景颜色
  --ti-lowcode-select-tags-bg-color: #5959591a;
  // 下拉框suffix图标悬浮颜色
  --ti-lowcode-select-suffix-icon-color-hover: var(--ti-lowcode-base-text-color);
  // 组件icon颜色
  --ti-lowcode-component-icon-color: #8d8d8d;
  // 左侧插件激活背景色
  --ti-lowcode-left-panel-active-bg: #f2f2f2;
  // 左侧插件激活边框色
  --ti-lowcode-left-panel-active-border-color: #999;
  // 左侧tabs按钮边框色
  --ti-lowcode-left-button-border-color: #ddd;

  // radio 按钮组激活背景色
  --ti-lowcode-radio-button-active-bg: #9d9d9d;
  // grid 布局设置按钮字体颜色
  --ti-lowcode-grid-edit-color: #252b3a;
  // grid 布局设置按钮背景色
  --ti-lowcode-grid-edit-bg: #fff;
  // tooltip字体颜色
  --ti-lowcode-tooltip-text-color: var(--ti-lowcode-base-text-color);
  // tooltip背景颜色
  --ti-lowcode-tooltip-bg-color: var(--ti-lowcode-base-bg-5);
  // tooltip错误提示背景颜色
  --ti-lowcode-tooltip-error-bg-color: var(--ti-lowcode-base-bg-5);

  // Fit 字体颜色
  --ti-lowcode-fit-label-color: #252b3a;
  // Fit 背景颜色
  --ti-lowcode-fit-coordinate-bg: #fff;
  // Fit 边框颜色
  --ti-lowcode-fit-coordinate-border-color: #ddd;
  // Fit 圆点颜色
  --ti-lowcode-fit-coordinate-origin-color: #757575;
  // more icon 选中背景色
  --ti-lowcode-more-icon-selected-bg: #e5e5e5;
  // main menu 背景色
  --ti-lowcode-main-menu-bg: #fff;
  // main menu hover 背景色
  --ti-lowcode-main-menu-item-hover-bg: var(--ti-lowcode-common-primary-color);
  --ti-lowcode-main-menu-item-hover-color: var(--ti-lowcode-common-text-color-3);
  // spacing svg 图标上下颜色
  --ti-lowcode-spacing-tb-color: #d1d1d1;
  // spacing svg 图标上下hover颜色
  --ti-lowcode-spacing-tb-hover-color: #bdbdbd;
  // spacing svg 图标左右颜色
  --ti-lowcode-spacing-lr-color: #e5e5e5;
  // spacing svg 图标左右hover颜色
  --ti-lowcode-spacing-lr-hover-color: #dfdfdf;
  // spacing svg 图标边框颜色
  --ti-lowcode-spacing-border-color: #999;
  // position direction 字体颜色
  --ti-lowcode-position-direction-color: #252b3a;
  // position direction 弹框显示时字体背景色
  --ti-lowcode-position-direction-bg: #bfbfbf;
  // position Relative to 按钮字体颜色
  --ti-lowcode-position-relative-to-color: #252b3a;
  // position Relative to 按钮边框颜色
  --ti-lowcode-position-relative-to-border-color: #ddd;
  // position Relative to 按钮背景色
  --ti-lowcode-position-relative-to-bg: #e5e5e5;
  // position 选中背景色
  --ti-lowcode-position-selected-bg: #b5b5b5;
  // icon 图标选择弹框背景色
  --ti-lowcode-icon-popover-bg: #ebebeb;
  // icon 图标选择弹框字体颜色
  --ti-lowcode-icon-popover-color: #666;
  // icon 图标选择弹框hover颜色
  --ti-lowcode-icon-popover-hover-color: #333;
  // 查看区块详情icon颜色
  --ti-lowcode-block-detail-icon-color: #999;
  // 顶部按钮显示背景色
  --ti-lowcode-toolbar-button-bg: #ebebeb;
  // 顶部面包屑显示背景色
  --ti-lowcode-toolbar-breadcrumb-bg: rgba(110, 81, 224, 0.1);
  // 顶部左侧面包屑显示字体色
  --ti-lowcode-toolbar-breadcrumb-left-color: rgb(110, 81, 224);
  // 顶部面包屑显示背景色
  --ti-lowcode-toolbar-breadcrumb-bg-hover: rgba(110, 81, 224, 0.06);
  // 顶部隐藏导航栏按钮hover颜色
  --ti-lowcode-toolbar-ellipsis-hover-bg: #f5f5f5;

  // 中间画布底部面包屑hover背景色
  --ti-lowcode-breadcrumb-hover-bg: #fff;
  // 弹框中tip提示边框颜色
  --ti-lowcode-dialog-tip-border-color: #575d6c;
  // 弹框字体颜色 && 左侧面板 title 字体颜色
  --ti-lowcode-dialog-font-color: #333;
  // 输入框icon图标颜色
  --ti-lowcode-input-icon-color: #737373;
  // 弹框字体颜色 && 图标颜色 && 输入框 suffix 字体颜色
  --ti-lowcode-text-color: #6a6a6a;
  // 右侧optionitem的边框色
  --ti-lowcode-optionitem-border-color: #9f9f9f;
  // 右侧optionitem的背景色
  --ti-lowcode-optionitem-background-color: #e5e5e5;
  //tootip里的input框字体颜色
  --ti-lowcode-tootip-input-color: #fff;
  //tootip里的input背景颜色
  --ti-lowcode-tootip-input-background-color: #363636;
  //tootip里的input框边框颜色
  --ti-lowcode-tootip-input-border-color: #b9b9b9;
  //tootip里的input框箭头颜色
  --ti-lowcode-tootip-arrow-border-color: #404040;
  // dialogBox弹框示例框边框色
  --ti-lowcode-dialog-demo-border-color: #5e5e5e;
  // 关闭 icon 图标hover背景色 && 输入框后置文本hover背景色
  --ti-lowcode-icon-hover-bg: rgba(255, 255, 255, 0.1);
  // 说明提示框警告颜色
  --ti-lowcode-description-warning-color: #facb4b;
  // 说明提示框错误颜色
  --ti-lowcode-description-error-color: #ff0000;
  // switch checked状态边框色
  --ti-lowcode-switch-checked-border-color: var(--ti-lowcode-common-primary-color);
  // 文本链接颜色
  --ti-lowcode-text-link-color: #6bb0ff;
  // 大纲树node节点选中背景色
  --ti-lowcode-node-current-bg: var(--ti-lowcode-common-primary-color);
  // 大纲树node节点不可拖拽背景色 && 表单校验错误边框色
  --ti-lowcode-node-nodrag-bg: #ea384c;
  // 成功状态按钮边框色
  --ti-lowcode-success-border-color: #2ad986;
  // 错误提示颜色
  --ti-lowcode-error-tip-color: var(--ti-lowcode-base-error-color);
  // 画布拖拽元素背景色
  --ti-lowcode-drag-ghost-bg: #888;
  // 画布拖拽位置线背景色
  --ti-lowcode-ghost-line-bg: #ffb100;
  // 描述颜色
  --ti-lowcode-description-color: var(--ti-lowcode-common-text-color-4);
  // 更多折叠面板头部hover背景色
  --ti-lowcode-more-collapse-header-hover-color: #afafaf;
  // 绑定时icon图标颜色
  --ti-lowcode-icon-bind-color: #006cff;
  // 创建字体颜色
  --ti-lowcode-create-color: #575d6c;
  // 删除按钮hover背景色 && 表单校验错误背景色
  --ti-lowcode-delete-button-hover-bg: #c92c3f;
  // input框focus 获焦时边框颜色
  --ti-lowcode-input-focus-border-color: var(--ti-lowcode-base-default-button-border-hover-color);
  // 次要描述字体颜色 && 面包屑label 字体颜色
  --ti-lowcode-description-minor-color: #ababab;
  // 样式设置 label 字体颜色
  --ti-lowcode-style-setting-label-color: var(--te-common-bg-primary-checked);
  // 样式设置 label 背景颜色
  --ti-lowcode-style-setting-label-bg: var(--te-base-blue-25);
  // 多人协作item项hover背景色
  --ti-lowcode-user-item-hover-bg: #f3f3f5;
  // 多人协作人员头像背景色
  --ti-lowcode-user-header-bg: #919191;
  // 工具栏提示框字体颜色
  --ti-lowcode-toolbar-popover-color: #363636;
  // 工具栏 media 提示框字体颜色
  --ti-lowcode-media-popover-color: var(--ti-lowcode-base-gray-60);
  // 工具栏 media 提示框标题字体颜色
  --ti-lowcode-media-popover-title-color: #191919;
  // 工具栏icon禁用颜色
  --ti-lowcode-disabled-color: #c2c2c2;
  // 状态管理详情收缩摩纳哥编辑器icon颜色
  --ti-lowcode-state-management-screen-icon-color: #404040;
  // 状态管理搜索无结果显示颜色
  --ti-lowcode-state-management-query-color: #404040;
  // 状态管理代码编辑器边框颜色
  --ti-lowcode-state-management-monaco-editor-border-color: var(--ti-lowcode-base-gray-40);

  // Popover提示框
  --ti-lowcode-popover-color: var(--ti-lowcode-base-text-color);
  // popover 弹框背景色
  --ti-lowcode-popover-bg-color: #fff;
  // 自定义类名lowcode弹框背景色
  --ti-lowcode-custom-popover-bg-color: #fff;
  // 自定义类名lowcode弹框字体颜色
  --ti-lowcode-custom-popover-text-color: #191919;
  // 自定义类名lowcode弹框边框颜色
  --ti-lowcode-custom-popover-border-color: #fff;

  // 滚动条thumb颜色
  --ti-lowcode-scrollbar-thumb-background-color: #e7e8e9;
  // 可点击交互的文字颜色
  --ti-lowcode-common-interaction-text-color: #5e7ce0;
  // 数字输入框组件下拉列表文字颜色
  --ti-lowcode-numeric-unit-text-color: var(--ti-lowcode-text-color);

  //左侧插件栏hover背景色
  --ti-plugins-hover-bg-color: #fff;
  //左侧插件栏hover边框色
  --ti-plugins-hover-border-color: #9e9e9e;
  //左侧插件栏hover文字色
  --ti-plugins-hover-text-color: #4d4d4d;
  // 表格行间背景色
  --ti-lowcode-new-table-row-sepline-background: #f0f0f0;

  // 查看指引视频
  --ti-lowcode-block-video-tip-color: var(--ti-lowcode-base-primary-color-2);

  // 右侧optionitem的边框色
  --ti-lowcode-optionitem-border-color: rgba(0, 0, 0, 0.08);
  // 右侧optionitem的背景色
  --ti-lowcode-optionitem-background-color: #fff;
}