@import '../color/css-variables.less';

:root {
  --color-white: @color-white; //
  --color-black: @color-black;

  // 主色
  --primary: @blue-6; // 常规
  --primary-color: @blue-6; // 常规
  --primary-1: @blue-1; // 浅色/白底悬浮
  --primary-2: @blue-2; // 文字禁用
  --primary-3: @blue-3; // 一般禁用
  --primary-4: @blue-4; // 特殊场景
  --primary-5: @blue-5; // 悬浮（hover）
  --primary-6: @blue-6; // 常规
  --primary-7: @blue-7; // 点击（click）
  --primary-8: @blue-8;
  --primary-9: @blue-9;
  --primary-10: @blue-10;

  // 文字颜色
  --color-text-1: var(--gray-10); // 标题，正文
  --color-text-2: var(--gray-8); // 语句
  --color-text-3: var(--gray-6); // 次要信息/placeholder
  --color-text-4: var(--gray-4); // 次要信息/disabled

  // 边框
  --color-border: var(--gray-3); // 一般
  --color-border-1: var(--gray-2); // 浅色
  --color-border-2: var(--gray-3); // 一般
  --color-border-3: var(--gray-4); // 深/悬浮
  --color-border-4: var(--gray-6); // 重/按钮描边

  // 填充颜色
  --color-fill-1: var(--gray-1); // 浅/禁用
  --color-fill-2: var(--gray-2); // 常规/白底悬浮
  --color-fill-3: var(--gray-3); // 深/灰底悬浮
  --color-fill-4: var(--gray-4); // 重/特殊场景

  // 背景颜色
  --color-bg-1: @color-bg-1; // 整体背景色
  --color-bg-2: @color-bg-2; // 一级容器背景
  --color-bg-3: @color-bg-3; // 二级容器背景
  --color-bg-4: @color-bg-4; // 三级容器背景
  --color-bg-5: @color-bg-5; // 下拉弹出框、Tooltip 背景颜色
  --color-bg-white: @color-bg-white; // 白色背景
  --color-mask-bg: @mask-color-bg; // 遮罩背景色
}

:root[data-theme='dark'] {
  --color-white: @dark-color-white;
  --color-black: @dark-color-black;

  --primary: @dark-pdblue-6;
  --primary-color: @dark-pdblue-6;
  --primary-1: @dark-pdblue-1;
  --primary-2: @dark-pdblue-2;
  --primary-3: @dark-pdblue-3;
  --primary-4: @dark-pdblue-4;
  --primary-5: @dark-pdblue-5;
  --primary-6: @dark-pdblue-6;
  --primary-7: @dark-pdblue-7;
  --primary-8: @dark-pdblue-8;
  --primary-9: @dark-pdblue-9;
  --primary-10: @dark-pdblue-10;

  // 文字颜色
  --color-text-1: @dark-color-text-1;
  --color-text-2: @dark-color-text-2;
  --color-text-3: @dark-color-text-3;
  --color-text-4: @dark-color-text-4;

  // 边框
  // --color-border: @dark-color-border;

  // 填充颜色
  --color-fill-1: @dark-color-fill-1;
  --color-fill-2: @dark-color-fill-2;
  --color-fill-3: @dark-color-fill-3;
  --color-fill-4: @dark-color-fill-4;

  // 背景颜色
  --color-bg-1: @dark-color-bg-1;
  --color-bg-2: @dark-color-bg-2;
  --color-bg-3: @dark-color-bg-3;
  --color-bg-4: @dark-color-bg-4;
  --color-bg-5: @dark-color-bg-5;
  --color-bg-white: @dark-color-bg-white;
  --color-mask-bg: @dark-mask-color-bg; // 遮罩背景色
}