@import '../functions';
@import './cxd-colors';

// dark 主题
// 参考： https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/color/

$ns: 'dark-';

$orange: #ff9f0b;
$yellow: #ffd609;
$green: #32d74b;
$turquoise: #00d1b2;
$cyan: #17a2b8;
$blue: #0983ff;
$purple: #bf5af2;
$red: #dc3545;

$primary: $blue;
$info: #2296f3;
$success: $green;
$warning: $orange;
$danger: $red;
$light: #3a3a3a;
$dark: #1e1f22;
$black: #141316;

$text-color: rgb(243, 241, 241);

$text--muted-color: #6c6c6c;
$text--loud-color: lighten($text-color, 10%);

$Page-aside-bg: #3c3c3c;
$Panel-bg: #302d2a;
$link-color: $info;

@import '../variables';
@import '../properties';

// yunshe4.0 font-size
$T1: 10px;
$T2: 12px;
$T3: 14px;
$T4: 16px;
$T5: 18px;
$T6: 20px;
$T7: 22px;
$T8: 24px;
$T9: 28px;
$T10: 30px;
$T11: 32px;
$T12: 34px;
$T13: 36px;
$T14: 40px;
// yunshe4.0 border-radius
$R1: 0;
$R2: px2rem(2px);
$R3: px2rem(4px);
$R4: px2rem(6px);
$R5: px2rem(8px);
$R6: px2rem(10px);
$R7: px2rem(16px);
$R8: 50%;

:root {
  --Alert-fontSize: 13px;
  --Panel-bg: #{$Panel-bg};
  --background-head: #191c22;
  --background: #100c2a;
  --body-bg: var(--background);
  --borderColor: #656565;
  --Button--default-bg: var(--black);
  --Button--light-color: var(--black);
  --Button--light-onHover-color: white;
  --Calendar-btnCancel-bg: var(--background-head);
  --Calendar-cell-bg: var(--Panel-bg);
  --Card-actions-onHover-bg: var(--dark);
  --Card-actions-onHover-color: var(--text-color);
  --Card-bg: var(--Panel-bg);
  --Card-onChecked-bg: var(--black);
  --Card-onChecked-color: var(--text-color);
  --Card-onModified-bg: var(--dark);
  --Card-onModified-color: var(--text-color);
  --Checkbox-gb: linear-gradient(#515151, #4b4b4b);
  --Checkbox-onHover-color: #0983ff;
  --ColorPicker-bg: var(--background);
  --DatePicker-bg: var(--background);
  --DatePicker-header-select-borderColor: var(--background);
  --DropDown-menu-bg: var(--background);
  --Drawer-header-bg: var(--background);
  --Fieldset-legend-bgColor: var(--background);

  --Form-item-fontSize: var(--fontSizeBase);
  --Form-item-fontColor: var(--body-color);
  --Form-input-addOnBg: var(--Form-input-bg);
  --Form-input-bg: #3c3c3c;
  --Form-input-color: var(--text-color);
  --Form-input-onDisabled-bg: var(--Panel-bg);
  --Form-select-bg: var(--background);
  --Form-select-menu-bg: var(--background);
  --Form-select-onHover-bg: var(--background-head);
  --Form-selectValue-bg: var(--Panel-bg);
  --Form-selectValue-color: var(--text-color);
  --Form-select-placeholderColor: rgba(255,255,255, .45);
  --Form-textarea-disabled: gray;
  --IconPicker-tab-onActive-bg: var(--background);
  --InputGroup-select-bg: var(--background);
  --InputGroup-select-onFocused-bg: var(--Panel-bg);
  --istItem-onModified-bg: var(--black);
  --Layout-aside-bg: var(--background-head);
  --Layout-aside-onAcitve-bg: var(--Panel-bg);
  --Layout-aside-onHover-bg: #404040;
  --Layout-aside-subList-bg: #131519;
  --Layout-header-bg: var(--background-head);
  --List-bg: var(--Panel-bg);
  --ListControl-item-bg: var(--background);
  --ListControl-item-onActive-before-bg: var(--background);
  --ListItem--strip-bg: var(--background);
  --ListItem-onChecked-bg: var(--black);
  --ListItem-onChecked-color: var(--text-color);
  --ListItem-onModified-color: var(--text-color);
  --Number-handler-bg: var(--background);
  --Panel--default-bg: linear-gradient(#524e48, #423e3a);
  --Panel-footerBg: linear-gradient(#524e48, #423e3a);
  --PopOver-bg: var(--background);
  --Table-onChecked-bg: var(--black);
  --Table-onChecked-color: var(--text-color);
  --Table-onHover-bg-rgba: 30, 31, 34;
  --Table-onModified-bg: var(--black);
  --Table-onModified-color: var(--text-color);
  --Table-strip-bg: transparent;
  --Table-thead-bg: #2f2f2f;
  --Tabs--card-bg: #323639;
  --Tabs--card-borderTopColor: var(--background);
  --Tabs--card-onActive-bg: var(--Panel-bg);
  --Tabs--radio-bg: var(--Panel-bg);
  --Tabs--radio-bg: var(--Panel-bg);
  --Tabs-content-bg: var(--Panel-bg);
  --Tabs-onActive-bg: var(--Panel-bg);
  --Tabs-onActive-color: #{lighten($text-color, 10%)};
  --Tabs-onHover-borderColor: var(--Tabs-onActive-borderColor);
  --Tabs--chrome-onHover-bg: #36383c;
  --Tabs--chrome-bg: #100c2a;
  --Tooltip--attr-color: var(--text-color);
  --Transfer-title-bg: #2f2f2f;
  --TransferSelect--table-heading-bg: var(--background);
  --TreeSelect-popover-bg: var(--Panel-bg);
  --Wizard-steps-bg: var(--background-head);
  --Wizard-steps-li-onActive-arrow-bg: var(--Panel-bg);
  --Wizard-steps-li-onActive-bg: var(--Panel-bg);
  --Checkbox-onDisabled-color: #4e4e4e;
  --Checkbox-onDisabled-bg: var(--Panel-bg);
  --Radio-onDisabled-color: #4e4e4e;
  --Radio-onDisabled-bg: var(--Panel-bg);

  --saas-grid-combination-color: var(--Panel-bg);
  --saas-border-color: #343434;
  --saas-crud-title-from-color: #181818;
  --saas-crud-form-advanced-show: #000;

  --saas-crud-table-thead-color: #100c2a;
  --saas-crud-table-body-color: #181818;
  --saas-crud-table-body-is-Highlight-color: #3f495f;

  --saas-font-size-light-black: rgba(255, 255, 255, 0.26);
  --saas-font-size-deep-black: rgba(255, 255, 255, 0.4);
  --saas-font-size-dark-black: rgba(255, 255, 255, 0.65);
  --saas-font-size-black: rgba(255, 255, 255, 0.9);
  --saas-transferPicker-icon-color: #5c5c5c;
  --saas-font-size-color-reverse: rgba(0, 0, 0, 0.9);
  --saas-data-hover-background-color: #000;
  --saas-crud-advanced-modle-title-color: #5f5f5f;
  --saas-crud-advanced-modle-body-color: #292d35;
  --saasBodyMessageTablePaginationColor: #383838;
  --frameworkSelectedBackGroundColor: #292d35;
  --frameworkBackGroundColorf5: #000;
  --saas-crud-advanced-modle-body-condition-color: #000;
  --saas-crud-advanced-modle-body-condition-Button: #5f5f5f;
  --saas-crud-hover-color: #000;
  --Modal-header-bg: #5f5f5f;
  --ColumnToggler-backgroundColor: var(--saas-border-color);
  --saas-form-property-title-color: var(--saas-border-color);
  --saas-form-table-cell-img-color: #000;
  --saas-tabs-title-color: #000;
  --Tree-item-onHover-bg: #3574ee;
  //暗色系主题颜色变量
  --saas-main-bg: #100c2a;
  --saas-Title-Text: rgba(255,255,255,.9);
  --saas-Link-Text: #4f86f4;
  --saas-Secondary-Text: rgba(255,255,255,.65);
  --saas-Placeholder-Text: rgba(255,255,255,.45);
  --saas-Disable-Text: rgba(255,255,255,.25);
  --saas-Border-Dividers: #343434;
  --saas-Background-Header: #181818;
  --saas-SelectedBg: #383838;
  --saas-SelectedBorder: #3574ee;
  --saas-Button-Disabled: rgba(255, 255, 255, 0.08);
  //查询器相关
  --saas-crud-filters-bg-color: #153987;
  --saas-crud-filters-font-color: var(--saas-Placeholder-Text);
  --saas-crud-filters-font-border-color: var(--saas-Placeholder-Text);

  --saas-table-thead-border-color: #4b4b4b;
  --saas-fold-text: rgba(255,255,255,.4);

  --them-bg-color: var(--saas-main-bg);
  --saasTabsBodyHoverBackgroundColor: #0c2662;

  // ai工具相关
  --ai-tool-bg-image: unset;
  --ai-tool-bg-color: #383838;
  --ai-tool-footer-bg: rgba(255, 255, 255, 0.1);
  --ai-tool-title-bg: #383838;
  --ai-tool-title-color: var(--saas-Title-Text);
  // 文件预览通用模态框相关
  --image-gallery-modal-bg: #383838;
  //表格行颜色相关
  --Table-onHover-bg: #172045;
  --saas-crud-table-body-is-checked-color: #242236;
  --saas-Table-Row-Success: #254522;
  --saas-Table-Row-Primary: #1c2d62;
  --saas-Table-Row-Warning: #583d23;
  --saas-Table-Row-Danger: #551527;
  --saas-Table-Row-Info: #043542;
  --saas-Table-Row-Success-Hover: #31691f;
  --saas-Table-Row-Primary-Hover: #23428a;
  --saas-Table-Row-Warning-Hover: #875b22;
  --saas-Table-Row-Danger-Hover: #831929;
  --saas-Table-Row-Info-Hover: #00515c;

  // 日历/日程组件相关
  --schedule-datepicker-bg: #383838;
  --schedule-datepicker-font-color: #fff;
  --schedule-datepicker-other-font-color: #999;
  --schedule-arrow-icon: #fff;
  --schedule-split-border: rgba(255,255,255,0.04);

  // 富文本编辑器相关
  --w-e-textarea-bg-color: var(--Form-input-bg);
  --w-e-textarea-color: var(--saas-Title-Text);
  --w-e-textarea-border-color: var(--ai-tool-footer-bg);
  --w-e-toolbar-color: var(--saas-Title-Text);
  --w-e-toolbar-bg-color: var(--Form-input-bg);
  --w-e-toolbar-active-color: var(--saas-Title-Text);
  --w-e-toolbar-active-bg-color: var(--Form-input-bg);
  --w-e-toolbar-border-color: var(--ai-tool-footer-bg);
  --w-e-modal-button-bg-color: var(--Button--default-bg);
  --w-e-modal-button-border-color: var(--ai-tool-footer-bg);

    // timeline
  --TimelineItem--axle-flex: 0 0 #{px2rem(26px)};
  --TimelineItem--left-line-width: #{px2rem(2px)};
  --TimelineItem--left-line-left: #{px2rem(13px)};
  --TimelineItem--left-line-top: #{px2rem(20px)};
  --TimelineItem--round-width: #{px2rem(8px)};
  --TimelineItem--round-height: #{px2rem(8px)};
  --TimelineItem--round-left: #{px2rem(10px)};
  --TimelineItem--round-top: #{px2rem(8px)};
  --TimelineItem--icon-width: #{px2rem(16px)};
  --TimelineItem--icon-height: #{px2rem(16px)};
  --TimelineItem--icon-left: #{px2rem(6px)};
  --TimelineItem--content-padding-bottom: #{px2rem(16px)};
  --TimelineItem--content-margin-left: #{px2rem(8px)};
  --TimelineItem--content-time-margin-bottom: #{px2rem(4px)};
  --TimelineItem--content-title-margin-bottom: #{px2rem(4px)};
  --TimelineItem--detail-button-margin-bottom: #{px2rem(8px)};
  --TimelineItem-detail-arrow-width: #{px2rem(16px)};
  --TimelineItem-detail-visible-padding: #{px2rem(10px)};
  --TimelineItem-detail-visible-max-width: #{px2rem(150px)};
  --Timeline-alternate-margin-left: #{px2rem(24px)};

  --TimelineItem--icon-radius: #{$R8};
  --TimelineItem--round-radius: #{$R8};
  --TimelineItem--content-radius: #{$R2};

  --TimelineItem-detail-visible-shadow: 0 #{px2rem(1px)} #{px2rem(10px)} 0 #5e5e5e;
  --TimelineItem-detail-visible-border: #5e5e5e;
  --TimelineItem-detail-visible-text: rgba(255,255,255,.45);

  --TimelineItem--font-size: #{$T2};

  --TimelineItem--text-primary-color: rgba(255,255,255,.9);
  --TimelineItem--text-secondary-color: rgba(255,255,255,.9);
  --TimelineItem--detail-button-color: var(--primary);
  --TimelineItem--line-bg: #383838;
  --TimelineItem--content-bg: #{$G10};
  --TimelineItem-round-bg: #5e5e5e;

  --Timeline--success-bg: var(--success);
  --Timeline--info-bg: var(--info);
  --Timeline--warning-bg: var(--warning);
  --Timeline--danger-bg: var(--danger);

}