:root {
  // MetaListItem
  --ti-lowcode-meta-list-item-bg-color: var(--ti-lowcode-base-bg-5);
  --ti-lowcode-meta-list-item-border-color: transparent;

  --ti-lowcode-meta-list-top-color: var(--ti-lowcode-base-text-color-1);
  // MetaJsSlot
  --lowcode-meta-js-slot-color: var(--ti-lowcode-base-text-color-1);

  // MetaCodeEditor
  --ti-lowcode-meta-codeEditor-color: #d9d9d9;
  --ti-lowcode-meta-codeEditor-border-color: var(--ti-lowcode-button-default-border-color);
  --ti-lowcode-meta-codeEditor-hover-color: #fff;
  --ti-lowcode-meta-codeEditor-border-hover-color: #6b6b6b;
}

// config-item label popover tips
.prop-label-tips-container {
  --ti-lowcode-meta-config-item-label-tips-desc-color: var(--ti-lowcode-base-text-color-1);
  --ti-lowcode-meta-config-item-label-tips-title-color: #fff;
}

// configItem
.properties-item {
  --ti-lowcode-meta-config-item-error-tips-color: var(--ti-lowcode-base-error-color);
  --ti-lowcode-meta-config-item-label-color: var(--ti-lowcode-base-text-color-1);
  --ti-lowcode-meta-config-item-bind-color: var(--ti-lowcode-base-gray-0);
  --ti-lowcode-meta-config-item-bind-bg: var(--ti-lowcode-common-primary-color);
  --ti-lowcode-meta-config-item-bind-bg: var(--ti-lowcode-common-primary-color);
  --ti-lowcode-meta-config-item-active-bg: #fff;
  --ti-lowcode-meta-config-item-link-color: var(--ti-lowcode-description-color);
}

// MetaBindVariable
.meta-bind-variable-dialog-box {
  --ti-lowcode-meta-bind-variable-icon-color: var(--ti-lowcode-base-text-color);
  --ti-lowcode-meta-bind-variable-icon-hover-bg-color: var(--ti-lowcode-base-bg-1);
  --ti-lowcode-meta-bind-variable-content-left-title-color: var(--ti-lowcode-base-text-color);
  --ti-lowcode-meta-bind-variable-content-right-title-color: var(--ti-lowcode-base-text-color);
  --ti-lowcode-meta-bind-variable-list-wrap-border-color: var(--ti-lowcode-base-default-button-border-color);
  --ti-lowcode-meta-bind-variable-content-left-list-border-right-color: var(
    --ti-lowcode-base-default-button-border-color
  );
  --ti-lowcode-meta-bind-variable-list-item-hover-bg-color: var(--ti-lowcode-base-bg-1);
  --ti-lowcode-meta-bind-variable-item-selected-bg-color: var(--ti-lowcode-base-bg-1);
  --ti-lowcode-meta-bind-variable-item-hover-bg-color: var(--ti-lowcode-base-bg-1);
  --ti-lowcode-meta-bind-variable-bottom-border-color: var(--ti-lowcode-base-default-button-border-color);
  --ti-lowcode-meta-bind-variable-top-border-color: var(--ti-lowcode-base-default-button-border-color);
  --ti-lowcode-meta-bind-variable-bottom-color: var(--ti-lowcode-base-text-color-1);
  --ti-lowcode-meta-bind-variable-content-left-list-color: var(--ti-lowcode-base-text-color);
  --ti-lowcode-meta-bind-variable-item-text-color: var(--ti-lowcode-base-text-color);
  --ti-lowcode-meta-bind-variable-header-alert-color: var(--ti-lowcode-base-gray-0);
  --ti-lowcode-meta-bind-variable-top-color: var(--ti-lowcode-base-text-color);
}

// MetaCodeEditor
.meta-code-editor-dialog-box {
  --ti-lowcode-meta-code-editor-header-tips-container-color: var(--ti-lowcode-base-text-color);
  --ti-lowcode-meta-code-editor-header-collapse-icon-color: var(--ti-lowcode-base-gray-50);
  --ti-lowcode-meta-code-editor-header-collapse-icon-hover-color: var(--ti-lowcode-base-gray-40);
  --ti-lowcode-meta-code-editor-header-tips-demo-bg-color: var(--ti-lowcode-base-gray-5);
  --ti-lowcode-meta-code-editor-header-tips-demo-color: var(--ti-lowcode-base-text-color);
  --ti-lowcode-meta-code-editor-source-code-content-border-color: transparent;
  --ti-lowcode-meta-code-editor-err-msg-color: var(--ti-lowcode-base-error-color);
}
