packages-theme/console-base-theme/doc/css/jb.less

:root {
  --wh-color-white-80: rgba(255, 255, 255, 0.80);
  --wh-color-main-bg: var(--wt-color-white);
  --wh-color-secondary-bg: var(--wt-color-dark-70);
  --wh-color-text: var(--wt-color-dark);
  --wh-color-text-inverted: var(--wt-color-white);
  --wh-color-secondary-text: var(--wt-color-dark-70);
  --wh-color-hidden-bg: var(--wt-color-dark-20);
  --wh-color-hidden-text: var(--wt-color-dark-40);
  --wh-color-backlight: var(--wt-color-dark-5);
  --wh-color-border: var(--wt-color-dark-20);
  --wh-color-substrate: rgba(244, 244, 244, 0.7);
  --wh-color-link-text-visited: #67686b;
  --wh-color-footer-bg: var(--wt-color-grey-light);
  --wh-color-feedback-bg: rgba(244, 244, 244, 0.3);
  --wh-color-scrollbar: var(--wt-color-dark-40);
  --wh-color-scrollbar-track: var(--wt-color-grey-light);
  --wh-color-blue: #4ca6ff;
  --wh-color-success: #4dbb5f;
  --wh-color-sucсess-bg: rgba(77, 187, 95, 0.2);
  --wh-color-note: rgba(243, 192, 51, 0.2);
  --wh-color-todo: #ea7d22;
  --wh-color-warning: rgba(239, 52, 30, 0.2);
  --wh-flow-unit-xs: 6px;
}

:root {
  --wh-flow-unit-sm: 16px;
  --wh-flow-unit: 24px;
  --wh-flow-unit-m: 32px;
  --wh-spacer: 32px;
  --wh-spacer-sm: 16px;
  --wh-max-width-xl: 820px;
  --wh-max-width-l: 706px;
  --wh-max-width-m: 540px;
  --wh-max-width-s: 460px;
  --wh-max-width-xs: 320px;
  --wh-article-list-width: 716px;
  --wh-transition-xfast: 100ms;
  --wh-transition-fast: 300ms;
  --wh-transition-medium: 500ms;
  --wh-transition-long: 1000ms;
  --wh-sidebar-width-xxlg: 310px;
  --wh-sidebar-width-xlg: 300px;
  --wh-sidebar-width-lg: 272px;
  --wh-virtual-toc-width: 210px;
  --wh-header-height-lg: 70px;
  --wh-header-height-sm: 48px;
  --wh-gap-xs: 8px;
  --wh-gap-sm: 16px;
  --wh-gap-m: 22px;
  --wh-gap-lg: 32px;
  --wh-max-width: calc(1520px - var(--wh-gap-m) * 2);
  --wh-max-width-content: calc(var(--wh-max-width) - var(--wh-sidebar-width-xxlg));
  --wh-max-width-article: 952px;
  --wh-app-fallback-width: 360px;
  --wh-app-fallback-image-height: 325px;
  --wh-app-fallback-width-sm: 300px;
  --wh-app-fallback-height-sm: 300px;
}

:root {
  --jblogo-black-square-to-beam-ratio: 1.6171428571;
  --jblogo-size-1: 40px;
  --jblogo-size-2: 60px;
  --jblogo-size-3: 75px;
  --jblogo-size-4: 100px;
  --jblogo-size-5: 150px;
}

:root {
  --wh-search-padding-left: 345px;
  --wh-search-padding-top: 120px;
}

:root {
  --wt-focus-shadow-width: 4px;
}

:root {
  --wt-color-white: #fff;
  --wt-color-white-60: rgba(255, 255, 255, 0.60);
  --wt-color-white-30: rgba(255, 255, 255, 0.30);
  --wt-color-white-20: rgba(255, 255, 255, 0.20);
  --wt-color-white-10: rgba(255, 255, 255, 0.10);
  --wt-color-white-5: rgba(255, 255, 255, 0.05);
  --wt-color-dark: #27282c;
  --wt-color-dark-70: rgba(39, 40, 44, 0.70);
  --wt-color-dark-40: rgba(39, 40, 44, 0.40);
  --wt-color-dark-20: rgba(39, 40, 44, 0.20);
  --wt-color-dark-5: rgba(39, 40, 44, 0.05);
  --wt-color-grey: #3c3d40;
  --wt-color-grey-light: #f4f4f4;
  --wt-color-grey-dark: #323236;
  --wt-color-primary-light-theme: rgb(22, 125, 255);
  --wt-color-primary-light-theme-80: rgba(22, 125, 255, 0.80);
  --wt-color-primary-light-theme-20: rgba(22, 125, 255, 0.20);
  --wt-color-primary-dark-theme: rgb(76, 166, 255);
  --wt-color-primary-dark-theme-80: rgba(76, 166, 255, 0.80);
  --wt-color-primary-dark-theme-20: rgba(76, 166, 255, 0.20);
  --wt-color-error: #ef341e;
  --wt-color-success: #4dbb5f;
  --wt-color-warning: #f3c033;
}

:root {
  --wt-offset-top-unit: 24px;
}

:root {
  --wt-font-family-gotham: 'Gotham SSm A', 'Gotham SSm B', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
  --wt-font-family-system: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
  --wt-font-family-mono: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace;
  --wt-font-weight-black: 900;
  --wt-font-weight-bold: 700;
  --wt-font-weight-light: 300;
}

// 以下主题 - class 应用于 html
:root.theme-dark {
  --wh-color-main-bg: var(--wt-color-dark);
  --wh-color-secondary-bg: var(--wt-color-white-60);
  --wh-color-text: var(--wh-color-white-80);
  --wh-color-text-inverted: var(--wt-color-dark);
  --wh-color-secondary-text: var(--wt-color-white-60);
  --wh-color-hidden-bg: var(--wt-color-white-20);
  --wh-color-hidden-text: var(--wt-color-white-30);
  --wh-color-backlight: var(--wt-color-white-5);
  --wh-color-border: var(--wt-color-white-20);
  --wh-color-substrate: #323337b3;
  --wh-color-link-text-visited: #a9a9ab;
  --wh-color-footer-bg: var(--wt-color-white-5);
  --wh-color-feedback-bg: rgba(50, 50, 54, 0.3);
  --wh-color-scrollbar: #0000004f;
  --wh-color-scrollbar-track: #323437;
}