src/css/variables.scss
body {
  // Main colors
  --headline-font-weight: 500;
  --font-color-action: var(--blue);

  // Font size
  --font-sm: 12px;
  --font-md: 16px;
  --font-lg: 20px;

  // Ul
  --ul-font-size: 20px;
  --ul-line-height: 32px;
  --ul-font-family: var(--main-font-family);

  // Bars
  --top-bar-height: 0px;

  // Markup
  --content-max-width: 768px;

  // Modeline config
  --modeline-height: 48px;
  --modeline-padding: 0 32px;
  --modeline-background: var(--base1);

  // Card
  --card-background-color: var(--bg);

  // Shadow
  --shadow-main: none;

  // Sidebar
  --sidebar-width: 56px;
  --action-pane-opened-width: 320px;

  // Mobile footer pane
  --footer-height: 0px;

  // Public preview
  --public-preview-image-width: 112px;
  --public-preview-image-height: 112px;
  --public-preview-max-height: 156px;

  // Completion item
  --completion-item-min-height: 24px;
  --completion-item-padding: 8px 4px;
  --completion-item-margin: 0 16px;
  --completion-item-hover-background: var(--base7);
  --completion-item-hover-color: inherit;
  --completion-float-top: 32px;
  --completion-border-radius: 8px;
  --completion-width: 80%;
  --completion-max-width: 768px;
  --completion-border: none;
  --completion-box-shadow: none;
  --completion-input-height: 56px;
  --completion-container-margin: 0px;

  // Menu
  --menu-padding: 8px;
  --menu-item-height: 50px;
  --menu-item-max-height: 200px;

  // File uploader
  --file-uploader-border-width: 4px;
  --file-uploader-border-style: dashed;
  --file-uploader-border-color: var(--base-3);
  --file-uploader-bg: var(--bg-alt);
  --file-uploader-opacity: 0.8;

  // Note preview link
  --note-preview-link-max-width: 365px;
  --note-preview-link-height: 200px;

  // Action btn
  --btn-action-shadow: 0 1px 0 rgba(27, 31, 36, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  --btn-action-border: 1px solid;
  --btn-action-border-color: var(--base5);
  --btn-action-padding: 6px;
  --btn-action-radius: 6px;
  --btn-action-fire-color: var(--green);
  --btn-action-fire-border-color: var(--green);
  --btn-action-md: 20px;
  --btn-action-sm: 14px;
  --btn-action-lg: 28px;
  --btn-action-color: var(--base5);
  --btn-action-bg: var(--bg);

  // Mini buffer
  --mini-buffer-background: var(--bg-alt);
  --mini-buffer-font-color: var(--fg);
  --mini-buffer-border-top: 1px solid var(--base4);
  --mini-buffer-max-height: 460px;

  // Tags
  --tag-hover-background: var(--base0);
  --tag-hover-color: var(--base1);

  // Toolbar
  --toolbar-border-top: 0;
  --toolbar-hover-color: var(--base8);

  // HeaderBar
  --headerbar-height: 30px;
  --headerbar-border-radius: 8px;
  --headerbar-background-color: var(--bg);
  --headerbar-color: var(--fg-alt);
  --headerbar-border: none;

  // File manager item
  --file-item-bg-hover: var(--base8);
  --file-item-color-hover: var(--base6);
  --file-item-height: 30px;

  // Icon button
  --icon-btn-color: var(--fg);
  --icon-btn-hover-color: var(--base8);
  --icon-border-radius: var(--block-border-radius-sm);

  // Modal
  --modal-max-height: 94svh;
  --modal-max-width: 1024px;
  --modal-padding: 16px;

  // Box paddings/margins
  --block-padding-sm: 8px;
  --block-padding-md: 16px;
  --block-padding-lg: 32px;
  --block-margin-md: 16px;
  --block-margin-sm: 8px;
  --block-margin-xs: 8px;
  --block-border-radius-lg: 16px;
  --block-border-radius-md: 10px;
  --block-border-radius-sm: 6px;
  --item-default-radius: 8px;
  --search-icn-size: 44px;
  --gap-md: 16px;
  --gap-sm: 8px;
  --gap-xs: 4px;

  // Src block
  --src-block-header-padding-y: 8px;
  --src-block-footer-padding-y: 8px;
  --src-block-padding-x: 16px;
  --src-block-padding-y: 16px;
  --src-block-margin-y: 16px;

  // Editor
  --editor-line-height: 1.8;
  --editor-headline-line-height: 1.2;
  --editor-default-line-height: 28.8px;
  --editor-padding-bottom: 48px;
  --editor-cursor-color: var(--fg);
  --editor-selection-bg-color: var(--base8);
  --editor-selection-color: var(--bg);
  --editor-gutter-color: var(--fg-alt);
  --editor-gutter-hover-color: var(--base8);
  --editor-fold-placeholder-color: var(--fg);
  --editor-active-line-bg-color: transparent;
  --editor-caret-color: var(--fg);

  // Page
  --page-padding: 16px 56px;
  --page-max-width: 1024px;

  // List
  --org-list-item-bullet-margin-left: 20px;

  // Device specific feature
  --device-padding-bottom: 0px;

  // Graph
  --graph-node-color: var(--fg-alt);
  --graph-edge-color: var(--fg-alt);
  --graph-active-color: var(--red);

  // Inputs
  --input-height: 28px;
  --input-lg-height: 48px;

  // Device-specific options
  --standalone-bottom-padding: 24px;

  // Toggle button
  --toggle-button-scale: 0.45;
}

@include light-mode {
  --completion-border: 1px solid var(--fg-alt);
}

@include mobile {
  body.body--dark,
  body.body--light {
    --block-padding-md: 10px;
    --footer-height: 56px;
    --page-padding: 14px;
    --gap-md: 10px;
    --file-item-height: 46px;
    --headerbar-height: 42px;

    --completion-container-margin: 0px;
    --completion-width: 100%;
    --completion-border-radius: 0px;
    --completion-border: none !important;
  }
}

body {
  // Border
  --border-main: 1px solid var(--fg-alt);
  --border-secondary: 1px solid var(--base7);
}

body.standalone {
  --device-padding-bottom: 24px;
}

@include electron {
  --top-bar-height: 32px;
}
