visualization-design/src/styles/var.css

:root {
  --font-family: '-apple-system', 'BlinkMacSystemFont', 'PingFang SC',
    'Hiragino Sans GB', 'Microsoft YaHei UI', ' Microsoft YaHei',
    'Source Han Sans CN', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  --font-size: 13px;
  --color: #bdc7db;
  --color-title: #e3e8f4;
  --color-desc: #617b91;
  --color-gray: #4f5b75;

  --color-bland: #ff4000;
  --color-bland-hover: #fa541c;

  --color-primary: #4583ff;
  --color-primary-hover: #0c56eb;
  --color-primary-disabled: #bae7ff;
  --color-success: #52c41a;
  --color-success-hover: #3fad09;
  --color-success-disabled: #c6ebb4;
  --color-warning: #faad14;
  --color-warning-hover: #d9a116;
  --color-warning-disabled: #fff6dd;
  --color-error: #f50000;
  --color-error-hover: #f00;
  --color-error-disabled: #ffc2c5;

  --color-background: #1e2430;
  --color-background-active: #161f2c;
  --color-background-hover: #181f29;
  --color-background-input: #303746;
  --color-background-editor: #0f151f;
  --color-background-popup: #303746;
  --color-background-popup-hover: #454f64;

  --color-border: #000000;
  --color-sub-border: var(--color-background-input);
  --color-border-input: #535f79;
  --color-border-input-hover: #454f64;

  --color-scrollbar: #dad7d7;
  --color-scrollbar-hover: #e5e5e5;

  --border-radius: 4px;

  --shadow: 0px 2px 6px 0px rgba(0, 10, 38, 0.1);
  --shadow-hover: 0px 4px 8px 0px rgba(0, 10, 38, 0.3);
  --shadow-panel: 0px 2px 6px 0px rgb(0 10 38 / 4%);

  --td-bg-color-component-hover: var(--color-border-input-hover);
  --td-bg-color-component-active: var(--color-background-input);
  --td-radius-medium: 4px;
  --td-bg-color-container: var(--color-background);
  --td-component-border: #42516c;
  --td-bg-color-secondarycontainer: var(--td-component-border);
  --td-comp-size-xxl: 40px;
  --td-text-color-primary: var(--color);
  --td-text-color-secondary: var(--color-desc);
  --td-bg-color-container-hover: var(--color-background-hover);
  --td-font-family: var(--font-family);
  --td-font-body-medium: var(--font-size) / var(--td-line-height-body-medium)
    var(--td-font-family);
  --td-border-level-1-color: var(--color-background-input);
  --td-text-color-placeholder: var(--color-desc);
  --td-brand-color: var(--color-primary);
  --td-bg-color-component: var(--color-border-input);
  --td-brand-color-light: var(--color-border-input);
  --td-mask-disabled: var(--color-background);
  --td-text-color-disabled: var(--color-gray);
  --td-bg-color-component-disabled: var(--color-border-input-hover);

  --color-dialog-border: transparent;
  --td-bg-color-specialcomponent: transparent;
  --td-border-level-2-color: var(--color-border-input);

  --color-background-editor: #181b24;
  --color-border-editor: #1e2430;
}